HTML

HTML
• HTML instructions divide the text of a document

into blocks called elements. These can be divided
into two broad categories -- those that define
how the BODY of the document is to be displayed
by the browser, and those that define
information `about' the document, such as the
title or relationships to other documents.
• The HTML instructions, along with the text to
which the instructions apply, are called
HTML elements. The HTML instructions are
themselves called tags, and look
like<element_name> -- that is, they are simply
the element name surrounded by left and right
angle brackets.
• Empty Elements
Some elements are empty -- that is, they do
not affect a block of the document in some
way. These elements do not require an
ending tag. An example is the <HR> element,
which draws a horizontal line across the page.
This element would simply be entered as
• <HR> Upper and Lower Case
Element names are case insensitive. Thus, the
the horizontal rule element can be written as
any of <hr>, <Hr> or <HR>.
• Elements can have Attributes
• Many elements can have arguments that pass
parameters to the interpreter handling this element.
These arguments are called attributes of the element.
For example, consider the element A, which marks a
region of text as the beginning (or end) of a hypertext
link. This element can have several attributes. One of
them, HREF, specifies the hypertext document to
which the marked piece of text is linked. To specify this
in the tag for A you write:
• <A HREF="http://www.somewhere.ca/file.html">
marked text </a>. where the attribute HREF is assigned
the indicated value. Note that the A element is not
empty, and that it is closed by the tag </a>. Note also
that end tags never take attributes -- the attributes to
an element are always placed in the start tag.
HTML Document Structure
• HTML documents are structured into two parts,

the HEAD, and the BODY. Both of these are contained
within the HTML element -- this element simply
denotes this as an HTML document.
• The head contains information about the document
that is not generally displayed with the document,
such as its TITLE. The BODY contains the body of the
text, and is where you place the document material to
be displayed. Elements allowed inside the HEAD, such
as TITLE, are not allowed inside the BODY, and vice
versa.
<HTML>
<HEAD>
<TITLE> Environmental Change Project </TITLE> </HEAD> <BODY>
<h1> Environmental Change Project </h1>
Welcome to the home page of the Environmental Change Project. This
project is different from other projects with similar names. In our
case we actually wish to change the climate. For example, we
would like hot beaches in Northern Quebec, and deserts near
Chicago. <p>So how will we do this. Well we do the following
<ul>
<li>
<A HREF="burn.html">Burn</A> more forests.
<li>Destroy the
<A HREF="http://who.zoo.do/ozone.html">Ozone</A> layer.
<li>Birth more <A HREF="ftp:foo.do.do/cows.gif">cows</a> </ul>
</BODY> </HTML>
Naming Scheme for HTML Documents
• When your HTML browser (Netscape Navigator,

Internet Explorer, Opera, lynx etc.....) retrieves a
file, it must know what type of data it has
received in order to know what to do with it.
• the browsers "guesses" the data type from the
filename extension -- that is the part after the dot
in the filename. For example, HTML files are
identified by names such as name.html, where
the .htmlextension indicates an HTML document.
• Four letter extensions are common. This is not
a problem with UNIX computers or
Macintoshes, since these machines place no
restriction on the filename. DOS and Windows
3.1 machines are unfortunately restricted to a
three letter extension. Generally the
extension is truncated to three letters
(i.e. .html becomes .htm).
Anchor tag<a>
• <a href="http://www.great-
workout.com/killer-ab-workout.cfm"
target="_blank">Killer Ab Workout</a>
• <b>bold</b>
• <p>This is before the line break<br /> and this
after the line break.</p>
• <BODY BACKGROUND="back/marble.gif">
• <h1> Bla Bla Bla </h1> <p> And still more
text....
• Section Headings
• HTML allows for six levels of headings, marked
by the element names H1, H2... H6. There is no
forced hierarchy in these headings, but for
consistency you should use the top level (H1)
for main headings, and lower levels for
progressively less important ones
• Heading Alignment: The ALIGN Attribute
• <H2 align="center"> Heading type H2 </H2>
Marking Paragraphs
• The P element marks a block of text as a

paragraph -- the tag <P> marks the
beginning of the paragraph, while the tag
</P> marks the end of a paragraph.
• The end tag, however, is optional, as a
paragraph is automatically ended when
you start another paragraph
• <p> The P element marks a block of text as a
paragraph -- the tag;<P> marks the beginning
of the paragraph, while the tag </P>
Image
• The <img> tag embeds an image in an HTML
page.
• The <img> tag has two required attributes: src
and alt.
• <img src="url" alt="some_text"/>
• <img src="angry.gif" alt="Angry face" />

• <img src="logo_w3s.gif" alt="W3Schools.com"
align="middle" />
• Left Align the image to the left
• right Align the image to the right
• Middle Align the image in the middle
• top Align the image at the top
• bottom Align the image at the bottom
Lists
• Definition list
• Ordered list
• Unordered list
• <DT> -- The `Term' (a single line)
• <DD> -- The `Definition' (may be multiple
lines)
<dl>
<dt> Things to Avoid: </dt>
<dd> You should NOT use elements that define
paragraph formatting within the PRE element. This
means you should not use <code> <P>,
<ADDRESS>, <Hn> </code>and so on. You
should avoid the use of tab characters -- use single
blank characters to space text apart. </dd>
<dt> Things That are OK: </dt>
<dd>You can use Anchor. A typed carriage return will
cause a new line in the presented text. People you
should never let format lists include:
</dd> </dl>
Things to Avoid:
You should NOT use elements that define paragraph
formatting within the PRE element. This means you
should not use <P>, <ADDRESS>, <Hn> and so on.
You should avoid the use of tab characters -- use
single blank characters to space text apart.
Things That are OK:
You can use Anchor. A typed carriage return will
cause a new line in the presented text. People you
should never let format lists include:
<UL> <ol>
<li>list element</li>
<LI> list element </LI>
</ol>
<LI> another list • START -- specifies the starting
element ... </LI> number for a numbered list. Thus
START="4" means that the list will
</UL> start with the number 4.
• TYPE = "A", "a", "I", "i" or "1" --
specifies how the items are
numbered. "A" or "a" indicate letter
ordering (upper or lower case),
while "I" or "i" indicate roman
numerals (upper or lower case).
"1" is the default, and indicates
numerical ordering.
<ol start=4 type="i">
<li>First item
<li>Second item
<li value=2>Third item; value=2
<li type="A">Second item; type="A“
</ol>
HR -- Horizontal Ruled Line
<hr size=4 width=80%>

<hr size=10 width=40>
<hr size=10 width=40 align="left">
<hr size=10 width=40 align="left" noshade>
<hr size = 5 width=20% align="right">
<hr size = 5 width=20% align="left"
color="red">
• SIZE="n" --specifies the vertical width, in
pixels, of the dividing line (n is an integer).
• WIDTH="n", or "n%" --specifies the
horizontal width, in pixels or as a
percentage of the display width, of the
dividing line (n is an integer).
• ALIGN="left", "right", "center" --
specifies the alignment of the dividing line
on the page. The default is centered.
• NOSHADE --Draw the dividing line as a
solid black bar -- the default is a shaded
bar.
FORMS Element for fill-out Forms
• The FORM element allows you to create a

fill-out form:
• the user reading the HTML document will
see the FORM elements as user input
elements -- he or she can then type
information into the fields or select from
buttons and pull-down menus to input their
data.
• WHen the user submits the FORM, the
data are encoded and transmitted to a
server, where it must be interpreted and
processed by a program. In general, this is
done by so-called CGI, or Common
Gateway Interface programs, residing on
an HTTP server.
• <FORM ACTION="http://bla.bla.edu/cgi-bin/some-
prgm" METHOD=POST>
• First entry field: <INPUT NAME="entry1"> <BR>
Second entry field: <INPUT NAME="entry2"
VALUE="bloop"> <BR>
• Third entry field: <INPUT NAME="entry3"> ---
Select Option: <SELECT NAME="entry4">
<OPTION VALUE="no1">Frogs
• <OPTION VALUE="no2">Peaches
• <OPTION VALUE="no3">Cream
• <OPTION VALUE="no4">Newts
• </SELECT>
To submit the query, press: <INPUT TYPE="submit"
VALUE="Submit Query">. <P> </FORM>
• First text entry field:
Second entry field:
Third entry field:
• --- Select Option:
To submit the query, press: .
• The ACTION specifies the url to which the
form results will be sent: this URL should
point to a cgi-bin/ script or program. If
absent, the ACTION is taken to be the url
of the current document -- that is, the data
is returned to the same place from whence
the document came.
• The METHOD specifies the HTTP method
to be used to submit the form information
to the server. METHOD can have two
arguments
• GET (the default) - the form contents are
appended to the url
• POST - the form contents are sent to the
server in the body of the message.
• Text Fields
• <form>
First name: <input type="text"
name="firstname" /><br />
Last name: <input type="text"
name="lastname" />
</form>
• Password Field
• <form>
Password: <input type="password"
name="pwd" />
</form>
• Radio Buttons
• <form>
<input type="radio" name="sex" value="male"
/> Male<br />
<input type="radio" name="sex"
value="female" /> Female
</form>
• Checkboxes
• <form>
<input type="checkbox" name="vehicle"
value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle"
value="Car" /> I have a car
</form>
• Submit Button
• <form name="input"
action="html_form_action.asp"
method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
TABLES
• <TABLE BORDER="1">
• <caption align="bottom">This is the Table Caption</caption>
• <TR> <TH>Heading 1 <TH> Heading 2 <TH> Heading 3
<TH> Heading 4 </TH> </TR>
• <TR> <TD> 0.32 </TD>
• <TD> 1.2 </TD> <TD> 3.2 </TD>
• <TD> alpha </TD> </TR>
• <TR> <TD> 0.44 </TD> <TD> 0.3 </TD>
• <TD> 7.2 </TD> <TD> beta </TD>
• </TR> </TABLE>
• TH, TD and TR should always have end tags.
• A default TABLE has no borders
• You can also assign numbers to the

CELLPADDING and CELLSPACING attributes.
CELLPADDING defines the space, in pixels,
between the cell contents and the cell borders
(that is, padding within each cell of the table),
while CELLSPACING defines the space
betweenthe cells (the width of the cell-cell
border).
<table border=8>
<TR> <TH> Head 1 <TH> Head 2 </TR> <TR> <TD> 4.11
<TD> 4.23 </TR>
</table>
<table border =1 cellpadding=8>
<TR> <TH> Head 1 <TH> Head 2 </TR>
<TR> <TD> 4.11 <TD> 4.23 </TR>
</table>
<table border=5 cellspacing=8>
<TR> <TH> Head 1 <TH> Head 2 </TR>
<TR> <TD> 4.11 <TD> 4.23 </TR>
</table>
The TR Element and Its Attributes
• The TR Element defines a single table row. The TR

element can take the attributes ALIGN and VALIGN,
which define alignment properties for the contents of
cells within that row.
• ALIGN, which defines the horizontal alignment
properties, can take the values "left", "center" and "right",
• VALIGN, which defines the vertical alignment properties
of the cells, can take the possible values "top", "middle",
"bottom". The default values are ALIGN="left", and
VALIGN="middle".
The COLSPAN and ROWSPAN
Attributes to TD and TH
• By default, a cell lies in a given row and column
(depending on how you created the table).
Sometime, however, you want a cell to "drop
down" to the next cell below it, or perhaps
stretch across into the next row.
• This is accomplished using the COLSPAN and
ROWSPAN attributes, respectively. COLSPAN
indicates how many columns (counting to the
right) are occupied by the cell, while ROWSPAN
indicated how many rows (hanging down) the
cell "spans".
• <TABLE BORDER WIDTH=40%>
• <TR> <TD> 1.1 <TD> 1.2 <TD> 1.3 <TD> 1.4
</TR>
• <TR> <TD> 2.1 <TD COLSPAN=2> 2.2 <TD> 2.4
</TR>
• <TR> <TD> 3.1 <TD> 3.2 <TD ROWSPAN=3> 3.3
<TD> 3.4 </TR> <TR> <TD> 4.1 <TD> 4.2 <TD>
4.4 </TR>
• <TR> <TD> 5.1 <TD> 5.2 <TD> 5.4 </TR>
</TABLE>
HTML Frames
• With frames, you can display more than one HTML

document in the same browser window. Each HTML
document is called a frame, and each frame is
independent of the others.
• The HTML frameset Element
• 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.
• <frameset cols="25%,75%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
</frameset>
• This frame set has two columns with 25 pixel
and 75 pixel dimension.
• <opening HTML codes >
• <frameset rows="25%,*">
</frameset>
• </closing HTML codes >
Naming frames
• <frameset cols="40, *">
<frame scr="links.html" name="links">
<frame scr="main.html" name="main">
</frameset>
Adding a border
• frameborder="1"
• border="1"
• framespacing="1"
frameborder="0"
• border="0"
• framespacing="0"

HTML

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

Uploaded by

Copyright:

Available Formats

HTML

• HTML instructions divide the text of a document

• HTML documents are structured into two parts,

• When your HTML browser (Netscape Navigator,

• The P element marks a block of text as a

• <img src="angry.gif" alt="Angry face" />

<hr size=4 width=80%>

• The FORM element allows you to create a

• A default TABLE has no borders

• You can also assign numbers to the

• The TR Element defines a single table row. The TR

• With frames, you can display more than one HTML

You might also like