0% found this document useful (0 votes)
121 views37 pages

Chapter 12 HTML

Notes

Uploaded by

Jananika R
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
121 views37 pages

Chapter 12 HTML

Notes

Uploaded by

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

Chapter 12

HTML
Advanced
Features
Objectives
• Comments
• Creating lists in a webpage
• Inserting images
• Creating Hyperlinks
• Creating tables and forms
HTML
• HTML, which stands for Hyper Text Markup
Language, and it is used to create
hypertext documents for the world wide
web.
• It is used to design web pages.
• It provides a means to create structured
documents by denoting structural
semantics for text such as headings,
paragraphs, lists, links, quotes, and other
items.
• It allows images and objects to be
Tags
• The essence of HTML programming is tags
• A tag is a keyword enclosed by angle brackets
• ( Example: <I> )
• There are opening and closing tags for many
but not all tags; The affected text is between
the two tags.
• All the HTML documents are created in a
Word processing software such as Notepad
and are saved with the extension of .htm
or .html
Example

Heading
Tags
Basic HTML Tags
How to use?
Structure of a Web Page
• All Web pages share a common structure
• All Web pages should contain a pair of <HTML>,
<HEAD>, <TITLE>, and <BODY> tags
<HTML>
<HEAD>
<TITLE> Example </TITLE>
</HEAD>
<BODY>
This is where you would include the text and images
on your Web page.
</BODY>
</HTML>
The <TITLE> Tag
• Choose the title of your Web
page carefully; The title of a Web
page determines its ranking in
certain search engines
• The title will also appear on
Favorite lists, History lists, and
Bookmark lists to identify your
page
Text Formatting Tags
<B> Bold Face </B>
<I> Italics </I>
<U> Underline </U>
<P> New Paragraph </P>
<BR> Next Line
Changing the Font
• The expression <FONT FACE =
“fontname”> … </FONT> can be
used to change the font of the
enclosed text
• To change the size of text use the
expression <FONT SIZE=n> ….
</FONT> where n is a number
between 1 and 7
Changing the Font
• To change the color, use <FONT
COLOR=“red”>…. </FONT>; The color can
also be defined using hexadecimal
representation ( Example: #ffffff )
• These attributes can be combined to
change the font, size, and color of the text
all at once; For example, <FONT SIZE=4
FACE=“Courier” COLOR=“red”> ….
</FONT>
Aligning Text
• The ALIGN attribute can be inserted
in the <P> and <Hn> tags to right
justify, center, or left justify the text
• For example, <H1 ALIGN=CENTER>
The New York Times </H1> would
create a centered heading of the
largest size
Comment Statements
• Comment statements are notes in the
HTML code that explain the important
features of the code
• The comments do not appear on the Web
page itself but are a useful reference to the
author of the page and other programmers
• To create a comment statement use the
<!-- …. --> tags.
Inserting Images
• Inserting images will enhance the look of
the webpage.
• It will add more meaning to it.
• HTML allows you to insert the following
images:
• GIF – Graphics Interchange Format
• JPEG – Joint Photographic Experts Group
• PNG – Portable Network Graphics
Inserting Images
• Type <IMG SRC = “image.jpg”>, where
image.jpg indicates the location of the
image file
• The WIDTH=n and HEIGHT=n attributes
can be used to adjust the size of an image
• The attribute BORDER=n can be used to
add a border n pixels thick around the
image
Creating list in webpages
• It helps you to arrange your information in
an organized way.
• Html supports the following types of lists:
• Ordered list <ol> </ol>
• Unordered list <ul> <ul>
• Definition list or Description list <dl>,
<dt>, <dd>
HTML List Tags

Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list


Defines a term in a description
<dt>
list
Describes the term in a
<dd>
description list
Ordered list
• An ordered list starts with the <ol> tag.
• Each list item starts with the <li> tag.
• The list items will be marked with numbers
by default:
• Example
• <ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered list example
Output
Ordered HTML List - The Type Attribute

The type attribute of the <ol> tag,


defines the type of the list item marker:

Type Description
The list items will be numbered
type="1"
with numbers (default)
The list items will be numbered
type="A"
with uppercase letters
The list items will be numbered
type="a"
with lowercase letters
The list items will be numbered
type="I"
with uppercase roman numbers
The list items will be numbered
type="i"
with lowercase roman numbers
Example: Ordered list with numbers
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.
The list items will be marked with bullets (small black circles) by
default:

<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

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

</body>
</html>
Unordered list example
output
HTML Description Lists

• HTML also supports description lists.


• A description list is a list of terms, with a
description of each term.
• The <dl> tag defines the description list, the
<dt> tag defines the term (name), and the <dd>
tag describes each term:
Description list example
output
Description Lists example
<!DOCTYPE html>
<html>
<body>

<h2>A Description List</h2>

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

</body>
</html>
• Different types of lists in HTML
• Different image formats that can be used in a
webpage.
Ordered Lists
• Ordered lists are a list of numbered items.
• It is used when the items have a specific
Order.
The list is enclosed with <ol> and </ol>.
• To create an ordered list, type:
<OL>
<LI> This is step one.
<LI> This is step two.
<LI> This is step three.
</OL>
Unordered Lists
• An unordered list is a list of bulleted items
• To create an unordered list, type:
<UL>
<LI> First item in list
<LI> Second item in list
<LI> Third item in list
</UL>
Cont….
• <dl>- Description list
• <dt>- Description term
• <dd>- Description definition
Tables
• Tables can be used to display rows and columns of
data, create multi-column text, captions for
images, and sidebars
• The <TABLE> tag is used to create a table; the
<TR> tag defines the beginning of a row while the
<TD> tag defines the beginning of a cell
Creating Simple Table
<TABLE BORDER=10>
<TR>
<TD>One</TD>
<TD>Two</TD>
</TR>
<TR>
<TD>Three</TD>
<TD>Four</TD>
</TR>
</TABLE>
HTML
• Which is the Starting tag in HTML?
• <p> is used for ____________.
• Which tag is used for background color?
• Which tag is used to add images in HTML?
• What are comments in HTML?
• Write the heading tag in HTML?
• <hr> is used for _______.
• GIF : ____________.
• JPEG : ____________.
• PNG: __________.
THANK YOU

You might also like