Scribd
Upload
16 views21 pages

Unit II Part 1-1

The document discusses HTML tags and lists. It provides an overview of common HTML tags like <html>, <head>, <title>, and <body>. It also describes how to format text using tags like <font>, including adding attributes for size, color, and face. Finally, it gives examples of different types of HTML lists, including unordered, ordered, and definition lists, and how to structure them using tags like <ul>, <ol>, <dt>, and <dd>.

Uploaded by

taufeekansari12032003
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views21 pages

Unit II Part 1-1

The document discusses HTML tags and lists. It provides an overview of common HTML tags like <html>, <head>, <title>, and <body>. It also describes how to format text using tags like <font>, including adding attributes for size, color, and face. Finally, it gives examples of different types of HTML lists, including unordered, ordered, and definition lists, and how to structure them using tags like <ul>, <ol>, <dt>, and <dd>.

Uploaded by

taufeekansari12032003
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

UNIT II

HTML TAGS

The <html> tag represents the root of an HTML document. The <html> tag is the
container for all other HTML elements.

HTML tags are like keywords which define that how web browser will format and
display the content. With the help of tags, a web browser can distinguish between
an HTML content and a simple content. HTML tags contain three main parts:
opening tag, content and closing tag. But some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to
bottom and left to right. HTML tags are used to create HTML documents.

You can use as many tags you want as per your code requirement.

 All HTML tags must enclosed within < > these brackets.
 Every tag in HTML perform different tasks.
 If you have used an open tag <tag>, then you must use a close tag
</tag> (except some tags)

Syntax

<tag> content </tag>

HTML Tag Examples

<html> … </html> — The root element. ...


<head> … </head> — The document head. ...
<title> … </title> — The page title. ...
<body> … </body> — The page's content. ...
<p> Paragraph Tag </p>
<h2> Heading Tag </h2>
<b> Bold Tag </b>
<i> Italic Tag </i>
<u> Underline Tag</u>

There is a list of newly included tags in HTML 5.

Tag Description

<article> This element is used to define an independent piece of


content in a document, that may be a blog, a magazine or a
newspaper article.

<aside> It specifies that article is slightly related to the rest of the


whole page.

<audio> It is used to play audio file in HTML.

<bdi> The bdi stands for bi-directional isolation. It isolates a part of


text that is formatted in other direction from the outside text
document.

<canvas> It is used to draw canvas.

<data> It provides machine readable version of its data.

<datalist> It provides auto complete feature for textfield.

<details> It specifies the additional information or controls required by


user.

<dialog> It defines a window or a dialog box.


<figcaption> It is used to define a caption for a <figure> element.

<figure> It defines a self-contained content like photos, diagrams etc.

<footer> It defines a footer for a section.

<header> It defines a header for a section.

<main> It defines the main content of a document.

<mark> It specifies the marked or highlighted content.

<menuitem> It defines a command that the user can invoke from a popup
menu.

<meter> It is used to measure the scalar value within a given range.

<nav> It is used to define the navigation link in the document.

<progress> It specifies the progress of the task.

<rp> It defines what to show in browser that don't support ruby


annotation.

<rt> It defines an explanation/pronunciation of characters.

<ruby> It defines ruby annotation along with <rp> and <rt>.

<section> It defines a section in the document.

<summary> It specifies a visible heading for <detailed> element.

<svg> It is used to display shapes.


<time> It is used to define a date/time.

<video> It is used to play video file in HTML.

<wbr> It defines a possible line break.

WORKING WITH TEXT

1. Add the <font> Tag Pair


Introducing the <font> tag and, of course, its sidekick, the </font> tag. You use
this tag pair to control the look of your text. Be aware that some browsers don't
recognize this tag pair, although the major ones do. To control the size, color, and
typeface of your text, type <font>...</font>.

<html>
<head>
<title>Working with the Font Tag</title>
</head>
<body>
<font>
Here is text within the font tag pair.
</font>
</body>
</html>

2. Add the size Attribute


You add attributes to the <font> tag in exactly the same way as you've added
attributes to tags in earlier tasks. Type <font size="value">. You'll specify the
value of the font in the next step.

<html>
<head>
<title>Working with the Font Tag</title>
</head>
<body>
<font size="value">
Here is text within the font tag pair.
The size attribute has been
added, but the value has not
yet been specified.</font>
</body>
</html>

3. Absolute or Relative Size


You can specify an absolute or relative size for text. To specify an absolute size,
type <font size="X">, where X is a number from 1 to 7. The default is 3, the
size you'll get if you don't specify the size attribute. To specify a relative size,
type <font size="+ (or –) X">. Relative sizes are always based on the
default size of 3, regardless of any absolute size you might have set earlier, so if
you want a size of 2, type either <font size="2"> or <font size="–1">.

<html>
<head>
<title>Working with the Font Tag</title>
</head>
<body>
<font size="4">
Here the value for the size attribute has
been set to "4", <font size="+3>one higher
than the default. I could also specify a
value of "+1"</font> to achieve the same result.
</font>
</body>
</html>

4. Change the Base Font Size


As mentioned in Step 3, the default size for text is 3. You can change that default
with the <basefont> attribute. To specify a new default size, type <basefont
size="X"> where X is between 1 and 7. Now any relative sizes you specify in
the <font> tag will be based on the size you specified in the <basefont> tag.

<html>
<head>
<title>Working with the Font Tag </title>
</head>
<body>
<basefont size="4">
<font size="-2">Notice that here I use the
basefont tag pair to set the base font size
to "4". In the font tag, I use the size
attribute to set the font size to "-2". I
could achieve the same results with a font
size of "2".
</font>
</basefont>
</body>
</html>

5. Add the color Attribute


Add the color attribute. Type <font color="value">...</font> where value is
specified using either of the methods discussed in Part 1, Task 10, "How to Specify
Colors."

<html>
<head>
<title>Working with the Font Tag</title>
</head>
<body>
<font color="#3300ff">
Here is text within the font tag pair.
The color attribute has been
added, and a hex value specified to
make the text blue with a touch of red.
</font>
</body>
</html>

6. Nest Colors
There might be times when you want to have a few words of one color appear
within a paragraph of text in another color. To do this, simply nest one <font> tag
within another. Type <font color="#ff0000">...<font
color="#00ff00">...</font>...</font>.

<html>
<head>
<title>Working with the Font Tag</title>
</head>
<body>
<font color="#3300ff">
Here I am embedding a couple words of
<font color="red">red text</font>
within a line of blue font. Notice
that to do this I simply nest one
font tag pair within
the other.</font>
</body>
</html>
7. Add the face Attribute
Another important attribute of the <font> tag is the face attribute. Add it just as
you add any other attribute. Type <font face="value"> where value is the
desired typeface.

<html>
<head>
<title>Working with the Font Tag</title>
</head>
<body>
<font size="4" face="value">
Here I have left the size
attribute in and added
the face attribute to the font tag.</font>
</body>
</html>

8. Specify a Font
You can specify any font you desire in the face attribute. For instance, to specify
the typeface Comic Sans MS, type <font face="comic sans
ms">...</font>.

<html>
<head>
<title>Working with the Font Tag</title></head>
<body>
<font size="4" face="comic sans ms">
Here I have chosen Comic Sans MS for
the value in the
face attribute.</font>
</body>
</html>

9. Specify Font Alternatives


If you specify a different font, you should also specify alternatives for people who
don't have that font on their computers. To do so, separate the alternatives by a
comma. Type <font face="comic sans ms, arial, helvetica">. The
browser first looks for Comic Sans MS; if it can't find that font, it looks for Arial, and
so on. If it can't find any of the fonts in the list, it uses the system default.

<html>
<head>
<title>Working with the Font Tag</title></head>
<body>
<font size="4" face="comic sans ms,
arial, helvetica">
Here I have chosen Comic Sans MS for the
value in the face attribute. I also list
two alternatives: Arial and Helvetica.
Because Comic Sans MS is loaded on my
system, the alternative fonts are not
called on by the browser.</font>
</body>
</html>

WORKING WITH LIST


HTML lists allow web developers to group a set of related
items in lists.

Example
Unordered List

An unordered HTML list:

 Item
 Item
 Item
 Item
<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
</html>

Ordered List
An ordered HTML list:

1. First item
2. Second item
3. Third item
4. Fourth item

<!DOCTYPE html>
<html>
<body>

<h2>An ordered HTML list</h2>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>

Definition List (or Description List)

 Definition lists are complex than the other two types of lists because they
have two elements for each item i.e., terms and definition.

 The <dl> tag defines a description list.

 The <dl> tag is used in conjunction with <dt> (defines terms)


and <dd> (describes Definition).

 E.g
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Nested List

 We can nest lists of the same type or different type inside another list e.g.,
Suppose we have a bulleted list and need a numbered ist beneath one of
the items.
<html>
<body>

<h2>A Nested List</h2>


<p>Lists can be nested (list inside list):</p>

<ul>
<li>Fruit
<ul>
<li>Bananas</li>
<li>Apples</li>
<li>Pears</li>
</ul>
</li>
<li>Vegetables</li>
<li>Meat</li>
</ul>

</body>
</html>

TABLES AND FRAMES

Tables

 HTML Provide the table element to create a TABLE.


 The Table element helps us to display the information in more than one
dimension i.e in columns and rows.
 A table consists of columns and rows, where each row is divided into
several data cells.
 A cell can contain text, lists, images, forms and other tables.
 A table in a web page can be defined by usng the starting and endng tags of
the <table>.
 E.g.

<table>

…………………………

</table>
 The elements used in the table element are caption, colgroup, col, tbody,
thead,tfoot, tr,td,th
 The <th> tag defines a header cell in an HTML table.

 The text in <th> elements are bold and centered by default.

 The text in <td> elements are regular and left-aligned by default.

<!DOCTYPE html>
<html>

<body>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>

</html>

Student Registration Form


<html>

<head>

<title>Student Regstration Form</title>

</head>

<body>

<table bgcolor=”99FFFF” border=”1px Solid Black”>

<tr>

<td colspan=”2”>

<center><font size=”4”><b> Student Registration Form</b></font></center>

</td>

</tr>

<tr>

<td> Name</td>

<td><input type=text name=”textnames” id=”textname” size=”30”></td>

</tr>

<tr>

<td>Father Name</td>

<td><input type=”text” name=”fathername” id=”fathername” size=”30”></td>


</tr>

<tr>

<td>Personal Address</td>

<td><input type=”text” name=”personaladdress” id=”personaladdress”


size=”30”></td>

</tr>

<tr>

<td>Gender</td>

<td>

<input type="radio" id="male" name="gender" value="male">

<label for="male">Male</label><br>

<input type="radio" id="female" name="gender" value="female">

<label for="female">Female</label><br>

</tr>

<tr>

<td>Course</td>

<td>

<select name=”Course”>

<option value=”-1” selected>Select</option>

<option value=”B.Tech” >B.Tech</option>

<option value=”MCA”>MCA</option>

</select>
</td>

</tr>

<tr>

<td>Email</td>

<td><input type=”text” name=”email” id=”email” size=”30”></td>

</tr>

<tr>

<td>Mobile No.</td>

<td><input type=”text” name=”mobileno” id=”mobileno” size=”30”></td>

</tr>

<tr>

<td><input type="submit" value="Reset"></td>

<td colspan=”2”><input type="submit" value="Submit"></td>

</tr>

</table>

</form>

</body>

</html>
Table Elements
1. Caption Element
 The Caption element is used to create the caption(Heading) of the
table and used in conjunction with the <table> element.
 A table should have only one caption element and t must be placed
after the starting tag of the <table> element.

e.g.

<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

Output:
2. Colgroup Element
 The colgroup element is used to specify the properties , such
as font color and background color, border for a group of
columns in a table.
 This element is useful in applying a style to multiple columns
without defining the style again and again for each cell.
 The colgroup element must be placed after the caption
element and before TBODY, THEAD, TFOOT,TR elements.

e.g

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

</style>

</head>

<body>

<h1>The colgroup element</h1>

<table>

<colgroup>
<col span="2" style="background-color:red">

<col style="background-color:yellow">

</colgroup>

<tr>

<th>ISBN</th>

<th>Title</th>

<th>Price</th>

</tr>

<tr>

<td>3476896</td>

<td>My first HTML</td>

<td>$53</td>

</tr>

<tr>

<td>5869207</td>

<td>My first CSS</td>

<td>$49</td>

</tr>

</table>

</body>

</html>
Output

3. Col Element
Col Element is used to define the properties of each column of a
table separately.
 The Col element can be defined in the Colgroup element, which itself
is defined in the <table > element.
 Each Col element in the Colgroup element represents a column of
the table.

4. TBody Element
 The Tbody element is used to group the rows of a table and is used in
conjunction with the Thead and Tfoot elements.
 These three elements determine the body,head and footer of the
table.
 They allow us to scroll freely throughout the body section and
provide a fixed height to the table.
e.g.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<h1>The thead, tbody, and tfoot elements</h1>

<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>

</body>
</html>
5. Thead Element
 The Thead element is used to define the header for the tale and is
used in conjunction with Tbody and Tfoot elements.
 We must define Thead of the <table> element after caption, and
colgroup elements and before TBody, TFoot and TR elements.

6. Tfoot Element
 The Tfoot element is used to define the footer for the table and s
used in conjunction with Tbody and the Thead.
 We must define Tfoot element in the <table> element after Caption,
Colgroup and Thead element and before the Tbody and Tr Element.

You might also like