HTML Tutorial

HTML
1
HTML File
HTML stands for Hyper Text Markup Language
An HTML file is a text file containing small markup
tags
The markup tags tell the Web browser how to
display the page
An HTML file must have an htm or html file
extension
An HTML file can be created using a simple text
editor
HTML File
HTML tags are surrounded by the two characters <
and >
The surrounding characters are called angle brackets
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is
the end tag
The text between the start and end tags is the element
content
HTML tags are not case sensitive, <b> means the
same as <B>
HTML Page Format
<HTML>
<HEAD>
<TITLE> First Web Page </TITLE>
</HEAD>
<BODY>
<H1> Hello World </H1>
<! Rest of page goes here. This is a comment. >
</BODY>
</HTML>
4
HEAD ELEMENTS
The <head> tag is supported in all major
browsers.The head element contains general
information, also called meta-information, about a
document .
Meta-information means information about
information.
The elements inside the head element should not be
displayed by a browser.
According to the HTML standard, only a few tags are
legal inside the head section. These are: <link>,
<title>, <style>, and <script>.
TITLE TAG
The <title> tag defines the title of the document.
The title element is required in all HTML documents.
The title element:
1. defines a title in the browser toolbar
2. provides a title for the page when it is added to
favorites
3. displays a title for the page in search-engine
results
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
Tag Attributes
Tags can have attributes. Attributes can provide

additional information about the HTML elements on
your page.
<body bgcolor="red">
HTML <body> tag
The body element defines the document's body.

The body element contains all the contents of an
HTML document, such as text, hyperlinks, images,
tables, lists, etc.
BODY Element
<BODY attributename="attributevalue">
 Deprecated attributes (but still used)
 BACKGROUND=“Sunset.jpg” (can be tiled)

 BGCOLOR=color
 TEXT=color
 LINK=color (unvisited links)
 VLINK=color (visited links)
 ALINK=color (when selected)
11
HTML <h1> to <h6> tags
The <h1> to <h6> tags are used to define HTML

headings.
<h1> defines the largest heading and <h6> defines
the smallest heading.
Headings
<H1 ...> text </H1> -- largest of the six
<H2 ...> text </H2>
<H3 ...> text </H3>
<H4 ...> text </H4>
<H5 ...> text </H5>
<H6 ...> text </H6> -- smallest of the six
ALIGN="position" --left (default), center or right
13
Headings
<HTML>
<HEAD>
<TITLE>Document Headings</TITLE>
</HEAD>
<BODY>
Samples of the six heading types:
<H1>Level-1 (H1)</H1>
<H2 ALIGN="center">Level-2 (H2)</H2>
<H3>Level-3 (H3)</H3>
<H4 ALIGN="right">Level-4 (H4)</H4>
<H5>Level-5 (H5)</H5>
<H6>Level-6 (H6)</H6>
</BODY>
</HTML>
14
<P> Paragraph
 <P> defines a paragraph
 Add ALIGN="position" (left, center, right)
 Multiple <P>'s do not create blank lines
 Use <BR> for blank line
 Fully-specified text uses <P> and </P>
 But </P> is optional
15
<BODY>
<P>Here is some text </P>
<P ALIGN="center"> Centered text </P>
<P><P><P>
<P ALIGN="right"> Right-justified text
<! Note: no closing /P tag is not a problem>
</BODY>
16
<PRE> Preformatted Text
<PRE>
if (a < b) {
a++;
b = c * d;
}
else {
a--;
b = (b-1)/2;
}
</PRE>
17
Special Characters
Character Use
< <
> >
& &
" "
Space
18
Colors
 Values for BGCOLOR and COLOR
 many are predefined (red, blue, green, ...)
 all colors can be specified as a six character hexadecimal
value: RRGGBB
 FF0000 – red
 888888 – gray
 004400 – dark green
 FFFF00 – yellow
19
Fonts
<FONT COLOR="red" SIZE="2" FACE="Times Roman">
This is the text of line one </FONT>
<FONT COLOR="green" SIZE="4" FACE="Arial">
Line two contains this text </FONT>
<FONT COLOR="blue" SIZE="6" FACE="Courier"
The third line has this additional text </FONT>
Note: <FONT> is now deprecated in favor of CSS. 20

Block level elements
HTML <br> tag
The <br> tag inserts a single line break.
The <br> tag is an empty tag which means that it
has no end tag.
䏸HTML <center> tag
The <center> tag is used to center text.
<center>This text will be centered.</center>
䏸HTML <pre> tag

The <pre> tag defines preformatted text.
Text in a pre element is displayed in a fixed-width
font (usually Courier), and it preserves both spaces
and line breaks.
HTML <hr> tag
The <hr> tag creates a horizontal line in an HTML

page.
The hr element can be used to separate content in
an HTML page.
<p>This is some text.</p>

<hr />
<p>This is some text.</p>
Attribute Value
Align left center right
Noshade noshade
Size pixels
Width pixels%
Blockquote
 <blockquote> tag defines a long quotation.

 A browser inserts white space before and after a
blockquote element. It also insert margins for the
blockquote element.
25
Ordered (Numbered) Lists
<OL TYPE="1">
<LI> Item one </LI>
<LI> Item two </LI>
<OL TYPE="I" >
<LI> Sublist item one </LI>
<LI> Sublist item two </LI>
<OL TYPE="i">
<LI> Sub-sublist item one </LI>
<LI> Sub-sublist item two </LI>
</OL>
</OL>
</OL> 26
Unordered (Bulleted) Lists
An unordered list is a list of items. The list items are

marked with bullets (typically small black circles).
An unordered list starts with the <ul> tag. Each list
item starts with the <li> tag.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul> Here is how it looks in a browser:
Unordered (Bulleted) Lists
<UL TYPE="disc">
<LI> One </LI>
<LI> Two </LI>
<UL TYPE="circle">
<LI> Three </LI>
<LI> Four </LI>
<UL TYPE="square">
<LI> Five </LI>
<LI> Six </LI>
</UL>
</UL>
28
</UL>
Definition Lists
A definition list is not a list of single items. It is a list

of items (terms), with a description of each item
(term).
A definition list starts with a <dl> tag (definition list).
Each term starts with a <dt> tag (definition term).
Each description starts with a <dd> tag (definition
description).
Physical Character Styles
<H1>Physical Character Styles</H1>

<B>Bold</B><BR>
<I>Italic</I><BR>
<TT>Teletype (Monospaced)</TT><BR>
<U>Underlined</U><BR>
Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR>
Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR>
<SMALL>Smaller</SMALL><BR>
<BIG>Bigger</BIG><BR>
<STRIKE>Strike Through</STRIKE><BR>
<B><I>Bold Italic</I></B><BR>
<BIG><TT>Big Monospaced</TT></BIG><BR>
<SMALL><I>Small Italic</I></SMALL><BR>
<FONT COLOR="GRAY">Gray</FONT><BR>
<DEL>Delete</DEL><BR>
<INS>Insert</INS><BR>
30
Logical
Character
Styles
<H1>Logical Character Styles</H1>
<EM>Emphasized</EM><BR>
<STRONG>Strongly Emphasized</STRONG><BR>
<CODE>Code</CODE><BR>
<SAMP>Sample Output</SAMP><BR>
<KBD>Keyboard Text</KBD><BR>
<DFN>Definition</DFN><BR>
<VAR>Variable</VAR><BR>
<CITE>Citation</CITE><BR>
<EM><CODE>Emphasized Code</CODE></EM><BR>
<FONT COLOR="GRAY"><CITE>Gray Citation</CITE></FONT><BR>
<ACRONYM TITLE="Java Development Kit">JDK Acronym</ACRONYM>
31
Anchor Tag
HTML uses the <a> (anchor) tag to create a
link to another document.
An anchor can point to any resource on the Web: an
HTML page, an image, a sound file, a movie, etc.
The syntax of creating an anchor
<a href="url">Text to be displayed</a>
!
32
The <a> tag is used to create an anchor to link from, the href
attribute is used to address the document to link to, and
the words between the open and close of the anchor tag
will be displayed as a hyperlink.
This anchor defines a link to W3Schools:
<a href="http://www.w3schools.com/">Visit W3Schools!
</a>The line above will look like this in a browser:
Visit W3Schools
33
The name attribute is used to create a named
anchor. When using named anchors we can create
links that can jump directly into a specific section
on a page
<a name="label">Text to be displayed</a>
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips
Section</a>
Hyperlinks
<BODY>
<H3>Welcome to <A HREF="http://www.cs.virginia.edu">
<STRONG>Computer Science</STRONG></A>
at the <A HREF="www.virginia.edu">University of Virginia.</A>
</H3>
</BODY>
35
Images
 SRC is required
 WIDTH, HEIGHT may be in units of pixels or
percentage of page or frame
 WIDTH="357"
 HEIGHT="50%"
 Images scale to fit the space allowed
36
Images
Align=position Image/Text Placement
Left Image on left edge; text flows to right of image
Right Image on right edge; text flows to left
Top Image is left; words align with top of image
Bottom Image is left; words align with bottom of image
Middle Words align with middle of image
37
Images
<BODY>
<img src="dolphin.jpg" align="left" width="150" height="150"
alt="dolphin jump!">
This is a very cute dolphin on the left!<br>
You can see text wrap around it<br>
</BODY> 38
</HTML>
ALIGN="left"
39
ALIGN="right"
40
ALIGN=“bottom"
41
Mapping
There are two types of mapping:
Client side mapping (all the pages that are to be opened are
at the client side terminal.)
Server Side mapping (all the pages are to be connected
through the server.)
The regions that are selected for hyperlinks in an image is
called as HOT SPOT or HOT REGION.
ISMAP is the attribute when we create SERVER SIDE
MAPPING
USEMAP is the attribute when we create CLIENT SIDE
MAPPING
HTML <map> tag
The <map> tag is used to define a client-side image-

map. An image-map is an image with clickable
areas.
The name attribute is required in the map element.
This attribute is associated with the <img>'s
usemap attribute and creates a relationship
between the image and the map.
The map element contains a number of area
elements, that defines the clickable areas in the
image map.
<img src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm"
alt="Sun" />
<area shape="circle" coords="90,58,3" href="mercur.htm"
alt="Mercury" />
<area shape="circle" coords="124,58,8" href="venus.htm"
alt="Venus" />
</map>
HTML <area> tag
The <area> tag defines an area inside an image-map

(an image-map is an image with clickable areas).
The area element is always nested inside a <map>
tag.
HTML <table> tag
The <table> tag defines an HTML table.

A simple HTML table consists of the table element
and one or more tr,th and td elements.
The tr element defines a table row, the th element
defines a table header, and the td element defines
a table cell.
<TABLE> Element Attributes
 ALIGN=position -- left, center, right for table
 BORDER=number -- width in pixels of border (including any
cell spacing, default 0)
 CELLSPACING=number -- spacing in pixels between cells,
default about 3
 CELLPADDING=number -- space in pixels between cell
border and table element, default about 1
 WIDTH=number[%]-- width in pixels or percentage of
page/frame width
47
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Tables
<TABLE> table tag

<CAPTION> table title
<TR> table row
<TH> table column header
<TD> table data element
49
<colgroup>
Defines groups of table columns
<col>
Defines the attribute values for one or more columns
in a table
<thead>
Defines a table head
<tbody>
Defines a table body 50
Tables
<TABLE BORDER=1>
<CAPTION>Table Caption</CAPTION>
<TR><TH>Heading1</TH> <TH>Heading2</TH></TR>
<TR><TD>Row1 Col1 Data</TD><TD>Row1 Col2 Data</TD></TR>
</TABLE>
51
 cellspacing=10
 cellpadding=10
52
<TABLE> Element Attributes
BGCOLOR=color -- background color of table, also valid
for <TR>, <TH>, and <TD>
RULES=value -- which internal lines are shown; values are
none, rows, cols, and all (default)
EX: <TABLE COLS=“40%, *,*”>

<TABLE ROWS=“*,*”>
53
<TR> Table Row Attributes
Valid for the table row:
ALIGN -- left, center, right
VALIGN -- top, middle, bottom
BGCOLOR -- background color
<TABLE ALIGN="center" WIDTH="300" HEIGHT="200">

<TR ALIGN="left" VALIGN="top" BGCOLOR="red"><TD>One</TD><TD>Two</TD>
<TR ALIGN="center" VALIGN="middle" BGCOLOR="lightblue"><TD>Three</TD><TD>Four</TD>
<TR ALIGN="right" VALIGN="bottom" BGCOLOR="yellow"><TD>Five</TD><TD>Six</TD>
</TABLE>
54
<TD> Table Cell Attributes
Valid for the table cell:
colspan -- how many columns this cell occupies
rowspan – how many rows this cell occupies
<TABLE ALIGN="center" WIDTH="300" HEIGHT="200" border="1">

<TR>
<TD colspan="1" rowspan="2">a</TD>
<TD colspan="1" rowspan="1">b</TD>
</TR>
<TR>
<TD colspan="1" rowspan="1">c</TD>
</TR>
</TABLE>
55
HTML Frames
HTML frames allow users to present documents in
multiple views, which may be independent
windows or subwindows. Multiple views offer
designers a way to keep certain information visible,
while other views are scrolled or replaced.
HTML <frameset> Tag
The <frameset> tag defines a frameset.

The frameset element holds two or more frame elements.
Each frame element holds a separate document.
The frameset element states only how many columns or rows
there will be in the frameset.
The <frameset> tag defines how to divide the window into
frames
Each frameset defines a set of rows or columns
 The values of the rows/columns indicate the amount of
screen area each row/column will occupy
Frames
 Frames help control navigation and display
 <FRAME> attributes include
 FRAMEBORDER – yes or 1 for borders
 BORDERCOLOR – color
 SRC – location of HTML to display in frame
 NAME – destination for TARGET attribute
58
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
Frames
 MARGINWIDTH – left/right margins
 MARGINHEIGHT – top/bottom margins
 SCROLLING – yes or 1 adds scroll bar
 NORESIZE – yes or 1 disables resizing
60
Style Sheets
Style sheets make it easy to specify the amount of white
space between text lines, the amount lines are indented,
the colors used for the text and the backgrounds, the font
size and style, and a host of other details.
Style sheets allow style information to be specified in many
ways.
Styles can be specified:
• inside an HTML element
• inside the head section of an HTML page
• in an external CSS file
61
What is CSS?
CSS stands for Cascading Style Sheets

Styles define how to display HTML elements
Styles are normally stored in Style Sheets
External Style Sheets are stored in CSS files
Inlining Style
Style may be inlined using the STYLE attribute. The
STYLE attribute may be applied to any body
element
<P STYLE="color: red; font-family: Arial, serif"> This
paragraph is styled in red with the Arial,serif font, if
available.</P>
Embedding a Style Sheet
A style sheet may be embedded in a document with

the STYLE element:
<STYLE TYPE="text/css" >
BODY { background: url(foo.gif) red; color: black }
</STYLE>
Linking to an External Style
Sheet
An external style sheet may be linked to an HTML

document through HTML's LINK element:
<LINK REL=StyleSheet HREF="style.css"
TYPE="text/css" >
CSS
 General form:
selector {property: value} or
selector {property1: value1;

property2: value2;
...
propertyn: valuen }
66
CSS
H1 {text-align: center;
color: blue;
font: Arial, Times New Roman}
P {text-align: left;
color: red;
font-family: Tahoma, Arial Narrow;
font-style: italics}
67
Fizzics1 (no style sheet)
<HTML>
<HEAD>
<TITLE>New Advances in Physics</TITLE>
</HEAD>
<BODY>
<H1>New Advances in Physics</H1>
<H2>Turning Gold into Lead</H2>
In a startling breakthrough, scientist B.O. "Gus" Fizzics
has invented a <STRONG>practical</STRONG> technique for
transmutation! For more details, please see
<A HREF="give-us-your-gold.html">our transmutation thesis</A>.
...
</BODY>
</HTML>
68
From: Core Web Programming, Marty Hall and Larry Brown, © 2002

HTML Tutorial

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Tutorial

Uploaded by

Copyright:

Available Formats

HTML

Tags can have attributes. Attributes can provide

The body element defines the document's body.

 BACKGROUND=“Sunset.jpg” (can be tiled)

The <h1> to <h6> tags are used to define HTML

ALIGN="position" --left (default), center or right

Note: <FONT> is now deprecated in favor of CSS. 20

䏸HTML <pre> tag

The <hr> tag creates a horizontal line in an HTML

<p>This is some text.</p>

 <blockquote> tag defines a long quotation.

An unordered list is a list of items. The list items are

A definition list is not a list of single items. It is a list

<H1>Physical Character Styles</H1>

Align=position Image/Text Placement

Left Image on left edge; text flows to right of image

Right Image on right edge; text flows to left

Top Image is left; words align with top of image

Bottom Image is left; words align with bottom of image

Middle Words align with middle of image

The <map> tag is used to define a client-side image-

The <area> tag defines an area inside an image-map

The <table> tag defines an HTML table.

<TABLE> table tag

EX: <TABLE COLS=“40%, *,*”>

<TABLE ALIGN="center" WIDTH="300" HEIGHT="200">

<TABLE ALIGN="center" WIDTH="300" HEIGHT="200" border="1">

The <frameset> tag defines a frameset.

CSS stands for Cascading Style Sheets

A style sheet may be embedded in a document with

An external style sheet may be linked to an HTML

selector {property1: value1;

You might also like

EX: <TABLE COLS=“40%, ,”>