Scribd
Upload
77 views

Chapter 12 HTML

Notes

Uploaded by

Jananika R
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
77 views

Chapter 12 HTML

Notes

Uploaded by

Jananika R
Copyright
© © All Rights Reserved
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