Scribd
Upload
2 views

Web Technology Notes Part 2

The document provides an overview of HTML, focusing on hyperlinks, anchor tags, formatting tags, and basic HTML structures such as tables and lists. It explains the syntax and usage of various HTML tags, including paired and unpaired tags, headings, paragraphs, and lists. Additionally, it covers attributes for styling and organizing content within HTML documents.

Uploaded by

jhansirv23
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Web Technology Notes Part 2

The document provides an overview of HTML, focusing on hyperlinks, anchor tags, formatting tags, and basic HTML structures such as tables and lists. It explains the syntax and usage of various HTML tags, including paired and unpaired tags, headings, paragraphs, and lists. Additionally, it covers attributes for styling and organizing content within HTML documents.

Uploaded by

jhansirv23
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Hyperlink

A hyperlink, often called a link, is a reference or navigation element in a document that


allows users to jump to another location within the same document or to a different
document, webpage, or resource on the internet. Hyperlinks are typically represented as text
or images that, when clicked, direct the user to the target location, which could be a URL,
file, or an anchor point within the document. In HTML, hyperlinks are created using the <a>
(anchor) tag.

Anchor Tag

The anchor tag (<a>) in HTML is used to define hyperlinks, allowing users to navigate to
different pages or resources. It can link to a different webpage, a specific section of the
current page, or even trigger actions like downloading a file or sending an email.

Syntax:

<a href="URL">Link Text</a>

href (Hypertext Reference) attribute: Specifies the destination of the link (URL, file, or
anchor).

Link Text: The clickable part of the link that users see.

Example:

<a href="https://www.example.com">Click here to visit Example</a>

In this example, clicking on the text "Click here to visit Example" will take the user to
"https://www.example.com".

Formatting Tags

Formatting tags are used for formatting the text style. It will become necessary to make
minor changes for the elements in the HTML document. A tag which is used to an individual
character is referred to as a character tag.

There are two types of character tags:

• Physical tags
• Logical tags

Physical Tags

In Physical tags, the formatting is done by the user, how the text has to be displayed on the
browser. It controls the physical characteristics and gives the visual effects for the text.

Syntax:
<Tag Name>Characters to be formatted</Tag Name>

Logical Tags

In Logical tags, the formatting is left to the browser how they have to display the text on the
browser which is designed by the user. Logical tags represent the structure and meaning of
a document.

Syntax:
<Tag Name>Characters to be formatted</Tag Name>
HTML Tags

(1) Paired / Container Tags:


HTML Tags normally come in pairs like <HTML> and </HTML>. Such types of tags are
called Paired or Container Tags. The first tag in a pair is the Start tag and the second tag is
the End tag. The End tag is written like the Start tag, with a forward slash before the tag
name. Start and End tags are also called Opening tags and Closing tags.

Syntax of Paired / Container Tag:

<tagname>content</tagname>

Example:

<B>HELLO</B>

(2) Unpaired / Empty Tags:


An unpaired or empty tag refers to a tag, which does not have an ending/closing tag.

Syntax of Unpaired / Empty Tag:

<tagname>

Example:

<BR>

Basic HTML Tags

●​ Headings Tag
Headings are defined with <h1> to <h6> tags. <h1> indicates the largest size for heading
whereas <h6> indicates the smallest size for heading.

Syntax:

<h1>Heading Level 1</h1>


<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

●​ Paragraph Tag
Paragraphs can be used as <p> for opening tag and </p> for closing tag. It adds automa
extra blank line before and after a paragraph when it is executed.

Syntax:
<p>This is a paragraph</p>

●​ Line Break Tag (<br>)


The <br> tag is used to insert a single line break in the text. It is a self-closing tag (does not
require a closing tag).
Useful for breaking text into multiple lines without starting a new paragraph.

Syntax:
Line 1<br>
Line 2

●​ Horizontal Line Break Tag (<hr>)


The <hr> tag is used to create a horizontal line, often to separate content visually. It is also a
self-closing tag.
The line is styled by default but can be customized with CSS.

Syntax:
<hr>

●​ <Font>:
We can use <font> tag to change color of the text by giving color name. By using face, we
can change style of the text like Arial or Times New Roman, etc. We can change size of the
text also. We should include this tag in the <body> tag.

Example:
<font size=7 color="green" face="Arial">Welcome to font tag</font>

●​ <Blink>:
This tag is little bit notorious because the text which is enclosed between this tag will blink on
and off and it is very difficult to read the text which is enclosed inside the tag. This tag should
be used in the body section.

Example:
<blink>Blink tag Welcomes all of u</blink>

●​ <Div> and <Span>:


This tag is very useful when we are working with style sheet to design the web pages. <Div>
(which stands for division) is used for a block of code whereas <span> tag is used for a line
of text.

Example:
<div align="center" style="color:red"> welcome to <div> tag which is used to design a block
of code according to the requirement of the user </div>.

Example:
<span align="center" style="color="green">Welcome to <span> tag
●​ Pre-formatting text <pre>:
This tag is used to display the text exactly how the user is designing without changing
anything because it is already formatted by the user.

Example:
<pre>
Name: ashok
Class: Bcom Illyr
Address: Sec-bad
</pre>

●​ <Marquee>:
This tag is used to scroll the text on the screen which is used in the Internet Explorer. Some
of the attribute which are commonly used are:

●​ Align - It takes the value left, right and center.

●​ Behavior - By default, it is scroll. It can take other values such as slide and alternate.

●​ Height - Height of the Marquee.

●​ Width - Width of the Marquee.

●​ Bgcolor - Background color of the Marquee text.

●​ Direction - Left, Right, Down and Up

Example:
<marquee align="left" behavior="scroll" height="50" width="250"bgcolor="cyan"
direction="right"> Welcome to Marquee tag </marquee>

HTML Tables

Tables in HTML are used to display tabular data (data in rows and columns). The basic
structure of an HTML table consists of the <table> element, which contains rows (<tr>) and
cells (<td> for data cells or <th> for header cells).

Basic Table Structure

<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</table>

Key Elements in Tables

●​ <table>: Defines the table.

●​ <tr>: Defines a table row.

●​ <th>: Defines a table header cell. It is bold and centered by default.

●​ <td>: Defines a table data cell.

Adding Borders:

To add borders, use the border attribute

<table border="1">
<!-- Content here -->
</table>

Attributes of HTML Table Tags:

1. <table> Tag

The <table> tag defines the start of a table. It can include these attributes:

●​ border: Adds a border to the table.


Example: <table border="1">

●​ cellspacing: Controls the space between cells.


Example: <table cellspacing="5">

●​ cellpadding: Adds space inside each cell.


Example: <table cellpadding="10">

2. <tr> Tag

The <tr> tag defines a table row. It does not have specific attributes for styling but organizes
<td> or <th> tags in one row.
3. <th> Tag

The <th> tag defines a header cell. Its text is bold and centered by default. You can also
style it with CSS.

4. <td> Tag

The <td> tag defines a regular data cell. It can use these attributes:

●​ rowspan: Merges a cell across multiple rows.

●​ colspan: Merges a cell across multiple columns.


Example:
<table border="1">
<tr>
<th>Name</th>
<th>Grade</th>
<th>Remarks</th>
</tr>
<tr>
<td rowspan="2">John</td>
<td>A</td>
<td>Excellent</td>
</tr>
<tr>
<td>B</td>
<td>Good</td>
</tr>
</table>

Lists in HTML

Lists in HTML are used to organize items in a structured format. HTML provides three main
types of lists:

1. Ordered List (<ol>)

An ordered list displays items in a specific order (with numbers or letters).

Syntax:

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Output:
1. Item 1

2. Item 2

3. Item 3

Attributes of <ol>:

●​ type: Specifies the numbering style.

●​ type="1": Default numbering (1, 2, 3…)

●​ type="A": Uppercase letters (A, B, C…)

●​ type="a": Lowercase letters (a, b, c…)

●​ type="I": Uppercase Roman numerals (I, II, III…)

●​ type="i": Lowercase Roman numerals (i, ii, iii…)

Example:

<ol type="I">
<li>Introduction</li>
<li>Body</li>
<li>Conclusion</li>
</ol>

2. Unordered List (<ul>)

An unordered list displays items with bullet points.

Syntax:

<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>

Output:

Apple

Banana
Cherry

Attributes of <ul>:

●​ type: Specifies the bullet style.

●​ type="disc": Default bullet (●)

●​ type="circle": Hollow circle (○)

●​ type="square": Square bullet (■)

Example:

<ul type="square">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

3. Definition List (<dl>)

A definition list displays terms and their definitions.

Syntax:

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>

<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>

Output:

HTML
HyperText Markup Language

CSS
Cascading Style Sheets

Tags in Definition List:

<dl>: Defines the list.

<dt>: Defines the term.


<dd>: Defines the description.

●​ Nested Lists

You can nest one type of list inside another. Nested lists are generally used in Ordered Lists.

Example:

<ul>
<li>Fruits
<ol>
<li>Apple</li>
<li>Banana</li>
</ol>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Spinach</li>
</ul>
</li>
</ul>

Output:

Fruits

1. Apple
2. Banana

Vegetables

Carrot
Spinach

You might also like