Scribd
Upload
18 views

Lecture 2 HTML Tags-2

The document discusses various HTML tags and their attributes. It describes deprecated tags like <center> and <font> that should be avoided. It explains how to use the <font> tag to specify font styles, the <img> tag to add and align images, and the <table> tag to create and format tables. It also covers ordered and unordered lists, definition lists, and using the style attribute to control formatting and styling.

Uploaded by

Talha Riaz
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
18 views

Lecture 2 HTML Tags-2

The document discusses various HTML tags and their attributes. It describes deprecated tags like <center> and <font> that should be avoided. It explains how to use the <font> tag to specify font styles, the <img> tag to add and align images, and the <table> tag to create and format tables. It also covers ordered and unordered lists, definition lists, and using the style attribute to control formatting and styling.

Uploaded by

Talha Riaz
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 12

HTML TAGS -2

Using Attributes with HTML Tags


Lecture 2

1
Outline
 Deprecated tags
 <font> tag with various attributes
 <img> tag with various attributes
 <table> tag to create and format table
 Ordered, Unordered & Definition Lists
 Style Attribute with various formatting values

2
Deprecated Tags
Following tags are deprecated in HTML 5, so one
should avoid using them.
Tags Description
<center> Deprecated. Defines centered content

<font> and <basefont> Deprecated. Defines HTML fonts

<s> and <strike> Deprecated. Defines strikethrough text

<u> Deprecated. Defines underlined text

Attributes Description

align Deprecated. Defines the alignment of text

bgcolor Deprecated. Defines the background color

color Deprecated. Defines the text color

3
HTML Formatting Tags
 <font> to specify formatting of fonts.
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
<font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
</font>
 “Bgcolor” attribute – to color the background
<body bgcolor=“green”>this is page with green color</body>

 <center> to align the text into center of page.


<br>
<center>we have used here center tag to align the text into
center.</center>
4 <br>this text is written after closing of center text...
Image tag attributes
 <img> tag with “align” attribute to align the image on page.
<img src=“image/pic.jpg” width=“200” height=“100”
align=“top”/> you can also use “middle”, bottom is by default.
 <img> tag with “alt” attribute to show alternative text.
<img src=“image/pic.jpg” align=“top” alt=“logo image”/>
 <img> tag with “border” attribute to show the image border
<img src=“image/pic.jpg” border=“0” align=“top” />
 Creating Hyperlink of an image using “href” attribute. Means
by clicking that image you will go to that page.
<p>Create a link of an image:
<a href="default.asp">
<img src="smiley.gif" width="32" height="32" /> </a>
5
HTML Table Tags
 <table> to create table
 <th>… for table header Note: All browsers display the text in
 <tr> … for creating a row the <th> element as bold and
 <td> … for creating a cell within a row centered
 <table> and the “border” Attribute
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
6
 A <td> tag can contain text, links, images, lists, forms, other tables,.
HTML Table Tags
<table> tag with “cellpadding” attribute to change
the size of table.
<table border="1“ cellpadding=“10”>
Zero cell padding means default size

7
HTML Lists- (Ordered & Unordered lists)
Unordered lists with <ul> tag to show bullets.
<ul>
<li>BS Software</li>
<li>BS Computer Science</li>
</ul>
Ordered Lists with <ol> tag to show numberings
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

NOTE: Inside a list item you can put text, line breaks, images, links, other
lists, etc
8
HTML Definition Lists
Definition Lists with <dl> tag to provide description of
each item.
<dl> tag defines a definition list along with following tags;
 <dt> defines the item in the list .
 <dd> describes the item in the list

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

9
HTML Style Attribute;
Background-color : we use colons : with style, not = sign
Style attribute can be added in any tag like <body>, <p>,<h1>,
<table>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>

Font, Color and Size to change formatting style is preferred in HTML 5.


<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body

10
HTML Style Attribute;
Text Alignment to set the alignment of text in any
component. Can be <table> or <body>
<h1 style="text-align:center;">Center-aligned heading</h1>

Possible syntax mistakes:



Don’t use = sign in style attribute. Use colon :
don’t forget to add semicolon ; after every value of style
attribute.

11
Basic Tips:
Note: Always add a trailing slash to subfolder references.
If you link like this:
href="http://www.w3schools.com/html",
you will generate two requests to the server, the server will
first add a slash to the address, and then create a new
request like this:
href="http://www.w3schools.com/html/".
So you should write url with last slash as ending .
o http://www.google.com/

12

You might also like