HTML
The
World Wide Web
Definitions
– The World Wide Web
• The set of computers on the Internet that support HTTP
• Not a separate network.
– HTTP
• The HyperText Transfer Protocol.
• The language used by a WWW client (e.g. Netscape,
Internet
Explorer) to request documents from a WWW
server
(i.e. the program running at Web sites like
amazon.com
or yahoo.com)
– HTML
• The HyperText Markup Language
•
The language used to design web
pages
Introducing
HTML:
HTML stands for Hypertext Markup Language,
and it is the most widely used language to write Web Pages. As its name
suggests, HTML is a markup language.
Hypertext refers to the way
in which Web pages (HTML documents) are linked together. When you click a link
in a Web page, you are using hypertext.
Markup Language describes how HTML works. With a markup
language, you simply "mark up" a text document with tags that tell a
Web browser how to structure it to display.
Originally, HTML was developed with the intent of defining the structure
of documents like headings, paragraphs, lists, and so forth to facilitate the
sharing of scientific information between researchers.
All you need to do to use HTML is to learn what type of markup to use
to get the results you want.
HyperText Markup Language
• Text Mixed with Markup Tags
– Tags Enclosed in Angle Brackets
(<H1>Introduction</H1>)
• What Does Markup Describe?
– Appearance
– Layout
– Content (Can’t Enforce an Exact Look)
• Changes in HTML 3.2 to HTML 4.0
– Standardization of frames
– Deprecation of formatting elements (vs. style
sheets)
– Improved cell alignment and grouping in tables
– Mouse and keyboard events for nearly all
elements
– Internationalization features
the
simple steps to create a baisc HTML document:
Open Notepad or another text editor.
At the top of the page type <html>.
On the next line, indent five spaces and now add the
opening header tag: <head>.
On the next line, indent ten spaces and type
<title> </title>.
Go to the next line, indent five spaces from the margin
and insert the closing header tag: </head>.
Five spaces in from the margin on the next line,
type<body>.
Now drop down another line and type the closing tag
right below its mate: </body>.
Finally, go to the next line and type </html>.
In the File menu, choose Save As.
In the Save as Type option box, choose All Files.
Name the file template.htm.
Click Save.
You have basic HTML document now, to
see some result put the following code in title and body tags.
<html>
<head>
<title>This
is document title</title>
</head>
<body>
<h1>This
is a heading</h1>
<p>Document
description goes here.....</p>
</body>
</html>
Now
you have created one HTML page and you can use a Web Browser to open
this HTML file to see the result. Hope you understood that Web Pages are
nothing but they are simple HTML files with some content which can be rendered
using Web Browsers.
Here
<html>, <head>,...<p>, <h1> etc. are called HTML tags.
HTML tags are building blocks of an HTML document nd we will learn all the HTML
tags in subsequent chapters.
NOTE: One HTML file can have extension as .htm or .html.
So you can use either of them based on your comfort.
HTML Document Structure:
An
HTML document starts and ends with <html> and >/html> tags. These
tags tell the browser that the entire document is composed in HTML. Inside
these two tags, the document is split into two sections:
The <head>...</head> elements, which contain
information about the document such as title of the document, author of the
document etc. Information inside this tag does not display outside.
The <body>...</body> elements, which contain the real content of
the document that you see on your screen.
HTML Basic Tags
The
basic structure for all HTML documents is simple and should include the
following minimum elements or tags:
<html> - The main container for HTML pages
<head> - The container for page header
information
<title> - The title of the page
<body>
- The main body of the page
Remember
that before an opening <html> tag, an XHTML document can contain the
optional XML declaration, and it should always contain a DOCTYPE declaration
indicating which version of XHTML it uses.
Now
we will explain each of these tags one by one. In this tutorial you will find
the terms element and tag are used interchangeably.
The
<html> Element:
The <html> element is the containing element for the whole HTML
document. Each HTML document should have one <html> and each document
should end with a closing </html> tag.
Following two elements appear as direct children of an <html>
element:
<head>
<body>
As such, start and end HTML tags enclose all the other HTML tags you
use to describe the Web page.
The
<head> Element:
The <head> element is just a container for
all other header elements. It should be the first thing to appear after the
opening <html> tag.
Main HTML Elements
1.DOCTYPE
2.HTML
3.HEAD
– TITLE element required
– Optional elements:
• BASE
• META
• BGSOUND
• SCRIPT, NOSCRIPT
• STYLE
• LINK
12 BODY Element
– <BODY BGCOLOR="YELLOW">
– HTML Attributes and Attribute Values
• BACKGROUND
• BGCOLOR
• TEXT
• LINK, VLINK, ALINK
• OnLoad, OnUnload, OnFocus, OnBlur
5.Elements inside BODY element
– <BODY>
Remaining HTML elements
</BODY>
13 BODY Element
– <BODY BGCOLOR="YELLOW">
– HTML Attributes and Attribute Values
• BACKGROUND
• BGCOLOR
• TEXT
• LINK, VLINK, ALINK
• OnLoad, OnUnload, OnFocus, OnBlur
5.Elements inside BODY element
– <BODY>
Remaining HTML elements
</BODY>
13 Lists
– OL
– LI
– UL
– LI
– DL
– DT
– DD
• Tables and Forms (Postponed)
• Misc.
– HR
– DIV
– CENTER
– MULTICOL (Netscape only)
16
Headings
• Heading Types
– < H1 ...> ... </H1>
– <H2 ...> ... </H2>
– <H3 ...> ... </H3>
– <H4 ...> ... </H4>
– <H5 ...> ... </H5>
– <H6 ...> ... </H6>
• Attributes: ALIGN
– Values: LEFT (default), RIGHT, CENTER
• Nesting tags
– Headings and other block-level elements can
contain
text-level elements, but not vice versa
17 Headings, Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<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><U>Level-3 (H3)</U></H3>
<H4 ALIGN="RIGHT">Level-4 (H4)</H4>
<H5>Level-5 (H5)</H5>
<H6>Level-6 (H6)</H6>
</BODY>
</HTML>
18 The Basic Paragraph
• Attributes: ALIGN
– LEFT (default), RIGHT, CENTER. Same as headings.
– Whitespace ignored (use <BR> for line
break)
• Consecutive <P>’s do not yield multiple blank lines
– End Tag is optional in HTML 4:
<BODY>
<P>
<BODY>
Paragraph 1
Paragraph 1
</P>
<P>
<P>
Paragraph 2
<P>
Paragraph 2
</P>
<P>
Paragraph 3
Paragraph 3
</BODY>
Equivalent with Implied Tags
20
g p
</P>
</BODY>
Fully-Specified
Preformatted Paragraphs
• The PRE Element
– <PRE> ... </PRE>
• Attributes: WIDTH
– Expected width in characters. Not widely
supported.
• Problem: Special Characters
<PRE>
if (a<b) {
doThis();
} else
{
doThat();
}
</PRE>
Ordered (Numbered) Lists
• OL Element
– <OL>
<LI>…
<LI>…
...
</OL>
– Attributes: TYPE, START, COMPACT
• List entries: LI
– <LI ...> ... </LI> (End Tag
Optional)
<OL>
<LI>Li t It O
22
List Item One
<LI>List Item Two
<LI>List Item Three
</OL>
Nested Ordered Lists
<OL TYPE="I">
<LI>Headings
<LI>Basic Text Sections
<LI>Lists
<OL TYPE="A">
<LI>Ordered
<OL TYPE="1">
<LI>The OL tag
<OL TYPE="a">
<LI>TYPE
<LI>START
<LI>COMPACT
</OL>
<LI>The LI tag
</OL>
<LI>Unordered
<OL TYPE="1">
<LI>The UL tag
<LI>The LI tag
</OL>
<LI>Definition
<OL TYPE="1">
<LI>The DL tag
<LI>The DT tag
<LI>The DD tag
</OL>
</OL>
<LI>Miscellaneous
</OL>
23
Unordered (Bulleted) Lists
• UL Element
– <UL>
<LI>…
<LI>…
...
</UL>
• Attributes: TYPE, COMPACT
– TYPE is DISC, CIRCLE, or SQUARE
• List entries: LI (TYPE)
– TYPE
DISC, CIRCLE, or SQUARE
<UL>
<LI>List Item One
24
<LI>List Item Two
<LI>List Item Three
</UL>
Custom Bullets
<UL TYPE="DISC">
<LI>The UL tag
<UL TYPE="CIRCLE">
<LI>TYPE
<UL TYPE="SQUARE">
<LI>DISC
<LI>CIRCLE
<LI>SQUARE
</UL>
<LI>COMPACT
</UL>
<LI>The LI tag
<UL TYPE="CIRCLE">
<LI>TYPE
<UL TYPE="SQUARE">
<LI>DISC
<LI>CIRCLE
<LI>SQUARE
</UL>
<LI>VALUE
</UL>
</UL>
Text-Level Elements
• Physical Character Styles
– B, I, TT, U, SUB, SUP, SMALL, BIG, STRIKE, S,
BLINK
– FONT
• SIZE
• COLOR
• FACE
– BASEFONT
– SIZE
• Logical Character Styles
– EM, STRONG, CODE, SAMP, KBD, DFN, VAR, CITE
27
Hypertext Links
– A
• HREF, NAME, TARGET, ...
• Images
– IMG
• SRC (required), ALT, ALIGN, WIDTH, HEIGHT, HSPACE,
VSPACE,
BORDER, USEMAP, ISMAP
• Misc. Text-Level Elements
– BR (Explicit line break)
– AREA (Client-side image maps)
– APPLET (Java),
– ...
28 Physical Character Styles,
Example
...
<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>
...
29 Logical Character Styles,
Example
...
<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 Image Alignment, Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<HTML>
<HEAD><TITLE>Image
Alignment</TITLE></HEAD>
<BODY>
<H1 ALIGN="CENTER">Image Alignment</H1>
<TABLE BORDER=1>
<TR><TH>Alignment
<TH>Result
<TR><TH><CODE>LEFT</CODE>
<TD><IMG
SRC="rude-pc.gif" ALIGN="LEFT"
ALT="Rude PC" WIDTH=54 HEIGHT=77>
This positions the image at the left side,
with text flowing around it on the right.
<TR><TH><CODE>RIGHT</CODE>
<TD><IMG
SRC="rude-pc.gif" ALIGN="RIGHT"
ALT="Rude PC" WIDTH=54 HEIGHT=77>
This positions the image at the right side,
with text flowing around it on the left.
...
</TABLE>
</BODY>
</HTML>
Tables
• Template
<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>
<TR><TD>Row2 Col1 Data</TD><TD>Row2 Col2
Data</TD></TR>
<TR><TD>Row3 Col1 Data</TD><TD>Row3 Col2
Data</TD></TR>
</TABLE>
TABLE Element Attributes
• ALIGN
– The ALIGN attribute gives the horizontal
alignment of the table as a
whole
– Legal values are LEFT, RIGHT, and CENTER, with
LEFT being
the default
• BORDER
– This specifies the width in pixels of the border
around the table
– This is in addition to the border around each
cell (the
CELLSPACING).
– The default is zero, which also results in the
visible 3D divider
between cells being turned off
• CELLSPACING
– This gives the space in pixels between adjacent
cells. Drawn as a 3D line if BORDER is nonzero, otherwise empty space in the
background color is used
39 – The default is
usually about 3
CELLPADDING
– CELLPADDING determines the empty space, in
pixels, between
the cell’s border and the table element
– The default is usually about 1
• WIDTH
– This specifies the width of the table, either in
pixels (<TABLE
WIDTH=250>) or as a percentage of the current browser window
width (<TABLE WIDTH="75%">)
• BGCOLOR
– Specify the background color of the table TABLE
(also legal for
TR, TD, and TH)
• BORDERCOLOR, BORDERCOLORDARK,
• BORDERCOLORLIGHT
– Non standard attributes supported by IE to
specify the colors to user
for the borders 40
BACKGROUND
– This nonstandard attribute supported by IE gives
an image file that
will be tiled as the background of the table
– You might want to use style sheets instead.
• RULES
– HTML 4.0 attribute that specifies which inner
dividing lines are
drawn
– All are drawn if this attribute is omitted
– Legal values are NONE, ROWS, COLS, and ALL
• FRAME
– Specifies which outer borders are drawn
– All four are drawn if this attribute is omitted
– Legal values are BORDER or BOX (all), VOID
(none), ABOVE
(top), BELOW (bottom), HSIDES (top and bottom, despite the
somewhat confusing name),
VSIDES (left and right), LHS (left)
Attribute
– ALIGN (Values: TOP, BOTTOM)
• Usage
– An enclosing borderless table may give more
flexibility
than the built-in CAPTION.
42 TR is used to define each row in the table
• Each row will then contain TH and/or TD entries
• ALIGN
– ALIGN (legal values LEFT, RIGHT, or CENTER) is
used to set the
default horizontal alignment for table cells
• VALIGN
– VALIGN (legal values TOP, MIDDLE, or BOTTOM) is
used to set
the default vertical alignment for table cells
• BGCOLOR
– Sets the color for the table row, overriding any
values set for the
table as a whole via the BGCOLOR attribute of TABLE
• BORDERCOLOR, BORDERCOLORDARK,
• BORDERCOLORLIGHT
– Supported only by Internet Explorer, these
specify the colors to use
43 for the row borders
Table Cells: TH and TD
• COLSPAN
– COLSPAN defines a heading or cell data entry
that spans
multiple columns
<TABLE BORDER=1>
<TR><TH COLSPAN=2>Col 1&2 Heading
<TH>Col3 Heading
<TR><TD>Col1 Data
<TD>Col2 Data
<TD>Col3 Data
</TABLE>
44 ROWSPAN
– ROWSPAN defines a heading or cell data entry
that spans multiple
rows; similar to COLSPAN
• ALIGN
– LEFT, RIGHT, CENTER, JUSTIFY and CHAR.
– E.g., the following aligns entries on a decimal
point
<TD ALIGN="CHAR" CHAR=".">
• VALIGN
– TOP, BOTTOM, MIDDLE
• WIDTH, HEIGHT
– Values in pixels only (no percentages officially
allowed)
• NOWRAP
– Use with caution
• BGCOLOR, BACKGROUND
– Same as for TABLE and TR
~~~ HALF & BASIC PART ~~~
.jpg)
No comments:
Post a Comment