Introduction To HTML CLASS NOTES

Introduction to
HTML
gkagombe@jkuat.ac.ke 1
Definitions
• W W W – World Wide Web.
• URL – Uniform Resource Locator.
• Browser – A software program which is used
to show web pages.
• A markup language is a set of markup tags
HOW THE WEB WORKS
1. you connect to the web, via an Internet Service Provider (ISP).
-type a domain name or web address into your browser to
visit a site; e.g. google.com.
2. Your computer contacts a network of servers called Domain
Name System (DNS) servers.
– act like phone books; tell your computer the IP address associated
with the requested domain name.
3. The unique address from DNS server allows your browser to
contact the web server that hosts the website you requested.
– A web server is a computer that is constantly connected to the web,
and is set up especially to send web pages to users.
4. The web server then sends the page you requested back to
your web browser.
What is HTML
HTML is the standard markup language for creating Web
pages.
• HTML stands for Hyper Text Markup Language
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements are represented by tags
• HTML tags label pieces of content such as "heading",
"paragraph", "table", and so on
• Browsers do not display the HTML tags, but use them to
render the content of the page
What is HTML?
• HTML is a markup language

for describing web documents (web pages).
• HTML documents are described by HTML tags
• Each HTML tag describes different document
content
• Pages end with “.htm” or “.html”
• HTML Editor – A word processor that has been
specialized to make the writing of HTML
documents more effortless.
Tags
• HTML tags are element names surrounded by angle
brackets:
<tagname>content goes here...</tagname>
• normally in pairs like <p> and </p>
• first tag in a pair is the start tag, the 2nd tag is the end
tag (forward slash inserted before the tag name)
• start tag -the opening tag, and the end tag -the closing
tag.
• Not case sensitive

– <TITLE> = <title> = <TITLE>
Choosing Text Editor
• There are many different programs that you
can use to create web documents.
• HTML Editors enable users to create
documents quickly and easily by pushing a few
buttons. Instead of entering all of the HTML
codes by hand.
• These programs will generate the HTML
Source Code for you.
Choosing Text Editor
• HTML Editors are excellent tools for
experienced web developers; however; it is
important that you learn and understand the
HTML language so that you can edit code and
fix “bugs” in your pages.
• For this Course, we will focus on using the
standard Microsoft Windows text editors,
NotePad. We may use also textpad.
HTML Page Creation & Editing
• In this chapter you will learn to create HTML
pages with a standard text editor.
Objectives
Upon completing this section, you should be able
to
1. Choose a Text Editor.
2. Create a Basic Starting Document.
3. Understand and set Document Properties.
4. View Your Results in a Browser.
Creating a Basic Starting Document
<!DOCTYPE html>
<html>
<head>
<title>Intoduction to HTML </title>
</head>
<body>
<h1>My first web page</h1>

<p>Hello world!</p>
</body>
</html>
WHAT IT MEANS…
• The <!DOCTYPE html> declaration defines this document to be
HTML5
• The <html> -the root element of an HTML page
• The <head> - element contains meta information about the
document
• The <title> - specifies a title for the document
• The <body> - contains the visible page content
• The <h1> element defines a large heading
• The <p> element defines a paragraph
The <!DOCTYPE> Declaration
• The <!DOCTYPE> declaration helps the

browser to display a web page correctly.
• There are different document types on the
web.
• To display a document correctly, the browser
must know both type and version.
• The doctype declaration is not case sensitive.
All cases are acceptable:
Common doctype Declarations
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Creating a Basic Starting Document
• The HEAD of your document point to above window part.
• The TITLE of your document appears in the very top line
of the user’s browser. If the user chooses to “Bookmark”
your page or save as a “Favorite”; it is the TITLE that is
added to the list.
– The text in your TITLE should be as descriptive as possible
because this is what many search engines, on the internet, use
for indexing your site.
• the <body> element -Everything inside this element is
shown inside the main browser window.
ATTRIBUTES TELL US
MORE ABOUT ELEMENTS
• Document properties are controlled by attributes
of the BODY element.
• Attributes provide additional information about
the contents of an element.
• They appear on the opening tag of the element
and are made up of two parts: a name and a
value, separated by an equals sign.
<p lang=“en-us”> Paragraph in english</p>
Color Codes
• Colors are set using “RGB” color codes, which
are, represented as hexadecimal values.
• Each 2-digit section of the code represents the
amount, in sequence, of red, green or blue
that forms the color.
• For example, a RGB value with 00 as the first
two digits has no red in the color.
Main Colours
16 Basic Colors
Color Codes
• WHITE • #FFFFFF
• BLACK • #000000
• RED • #FF0000
• GREEN • #00FF00
• BLUE • #0000FF
• MAGENTA • #FF00FF
• CYAN • #00FFFF
• YELLOW • #FFFF00
• AQUAMARINE • #70DB93
• BAKER’S CHOCOLATE • #5C3317
• VIOLET • #9F5F9F
• BRASS • #B5A642
• COPPER • #B87333
• PINK • #FF6EC7
• ORANGE • #FF7F00
The Body Element
• The BODY element of a web page is an important
element in regards to the page’s appearance.
• Here are the attributes of the BODY tag to control
all the levels:
– TEXT="#RRGGBB" to change the color of all the text
on the page (full page text color.)
– Background Color: This element contains information
about the page’s background color, the background
image, as well as the text and link colors.
Background Color
• It is very common to see web pages with their
background color set to white or some other
colors.
• To set your document’s background color, you
need to edit the <BODY> element by adding
the BGCOLOR attribute. The following example
will display a document with a white
background color:
<BODY BGCOLOR=“#FFFFFF”></BODY>
TEXT Color
• The TEXT attribute is used to control the color
of all the normal text in the document. The
default color for text is black. The TEXT
attribute would be added as follows:
<BODY BGCOLOR=“#FFFFFF”
TEXT=“#FF0000”></BODY>
• In this example the document’s page color is
white and the text would be red.
LINK, VLINK, and ALINK
• These attributes control the colors of the different
link states:
1. LINK – initial appearance – default = Blue.
2. VLINK – visited link – default = Purple.
3. ALINK –active link being clicked–default= Yellow.
• The Format for setting these attributes is:
<BODY BGCOLOR=“#FFFFFF”
TEXT=“#FF0000” LINK=“#0000FF”
VLINK=“#FF00FF” ALINK=“FFFF00”>
</BODY>
Using Image Background
• The BODY element also gives you ability of
setting an image as the document’s
background.
• An example of a background image’s HTML
code is as follows:
<BODY BACKGROUND=“hi.gif”
BGCOLOR=“#FFFFFF”></BODY>
Headings, Paragraphs, Breaks & Horizontal
Rules
Headings, <Hx> </Hx>
• heading elements H1 through H6 are generally used for major
divisions of the document. Headings are permitted to appear in
any order, but for best results :
– H1: should be used as the highest level of heading, H2 as the next
highest, and so forth.
– no skipping heading levels: e.g., H3 should not appear after an H1, unless
there is an H2 between them.
• Note: Use HTML headings for headings only. Don't use headings to
make text BIG or bold.
• Importance of headings:
– Search engines use the headings to index the structure and content of
your web pages.
– Users often skim a page by its headings.
=>It is important to use headings to show the document structure.
Headings, <Hx> </Hx>
<HTML>
<HEAD>
<TITLE> Example
Page</TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1>
</BODY>
</HTML>
Paragraphs, <P> </P>
• Paragraphs allow you to add text to a
document in such a way that it will
automatically adjust the end of line to suite
the window size of the browser in which it is
being displayed.
• Each line of text will stretch the entire length
of the window.
Paragraphs, <P> </P>
<HTML><HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY>
</H1> Heading 1 </H1>
<P> Paragraph 1, ….</P>
<H6> Heading 6</H6>
</BODY>
</HTML>
Break, <BR>
• Line breaks allow you to decide where the text
will break on a line or continue to the end of
the window.
• A <BR> is an empty Element, meaning that it
may contain attributes but it does not contain
content.
• The <BR> element does not have a closing tag.
Break, <BR>
<HTML>
<HEAD>
<TITLE> Example
Page</TITLE>
</HEAD>
<BODY>
<P>Paragraph 1, <BR>
Line 2 <BR> Line 3
<BR>….
</P>
</BODY>
</HTML>
Horizontal Rule, <HR>
• The <HR> element causes the browser to
display a horizontal line (rule) in your
document.
• <HR> does not use a closing tag, </HR>.
Attribute Description Default Value
Height of the rule in
SIZE 2 pixels
pixels
Width of the rule in
WIDTH pixels or percentage 100%
of screen width
Draw the rule with a Not set
NOSHADE flat look instead of a
3D look (3D look)
Aligns the line (Left,
ALIGN Center
Center, Right)
Sets a color for the
COLOR Not set
rule (IE 3.0 or later)
• <HTML>
• <HEAD>
• <TITLE> Example Page</TITLE>
Heading 1
• </HEAD> Paragraph 1,….
• <BODY> Line 2
• <H1> Heading 1 </H1>
• <P>Paragraph 1, <BR>
______________________
• Line 2 <BR> _____
• <HR>Line 3 <BR> Line 3
• </P>
• </BODY>
• </HTML>
Character Formatting
• In this chapter you will learn how to enhance
your page with Bold, Italics, and other
character formatting options.
Bold, Italic and other Character Formatting
Elements
<FONT SIZE=“+2”> Two sizes bigger</FONT>
• The size attribute can be set as an absolute value from 1 to 7 or as a
relative value using the “+” or “-” sign. Normal text size is 3 (from -2 to
+4).
<B> Bold </B>
<I> Italic </I>
<U> Underline </U>
• Color = “#RRGGBB” The COLOR attribute of the FONT element. E.g.,
<FONT COLOR=“#RRGGBB”>this text has color</FONT>
<PRE> Preformatted </PRE>
• Text enclosed by PRE tags is displayed in a mono-spaced font. Spaces and
line breaks are supported without additional elements or special
characters.
Bold, Italic and other Character Formatting
Elements
• <EM> Emphasis </EM> Browsers usually display this as
italics.
• <STRONG> STRONG </STRONG> Browsers display this
as bold.
• <TT> TELETYPE </TT> Text is displayed in a mono-
spaced font. A typewriter text, e.g. fixed-width font.
• <CITE> Citation </CITE> represents a document citation
(italics). For titles of books, films, etc. Typically
displayed in italics. (A Beginner's Guide to HTML)
•
QUOTATIONS
• There are two elements commonly used for marking up
quotations:
<blockquote>
• used for longer quotes that take up an entire paragraph.
– Browsers tend to indent the contents of the <blockquote> , do not use
this element just to indent a piece of text — use CSS to achieve this.
The <q> element I
• used for shorter quotes that sit within a paragraph.
– Browsers put quotes around the <q> element,
• Both elements may use the cite attribute to indicate where the
quote is from. Its value should be a URL that will have more
information about the source of the quotation.
QUOTATIONS
<blockquote cite="http://en.wikipedia.org/wiki/
Winnie-the-Pooh">
<p>Did you ever stop to think, and forget to
start again?</p>
</blockquote>
<p>As A.A. Milne said, <q>Some people talk to
animals. Not many listen though. That's the
problem.</q></p>
<html>
EXAMPLE –TEXT markup
<head>
<title>Text</title>
</head>
<body>
<h1>The Story in the Book</h1>
<h2>Chapter 1</h2>
<p>Molly had been staring out of her window for about an hour now. On her desk, lying
between the copies of <i>Nature</i>, <i>New Scientist</i>, and all the other scientific
journals her work had appeared in, was a well thumbed copy of <cite>On The Road</cite>.
It had been Molly's favorite book since college, and the longer she spent in these
four walls the more she felt she needed to be free.</p>
<p>She had spent the last ten years in this room,sitting under a poster with an Oscar
Wilde quote proclaiming that <q>Work is the refuge of people who have nothing better to
do</q>. Although many considered her pioneering work, unraveling the secrets of the
llama <abbr title="Deoxyribonucleic acid">DNA</abbr>, to be an outstanding achievement,
Molly <em>did</em> think she had something better to do.</p>
</body>
</html>
Special Characters & Symbols
• These Characters are recognized in HTML as they begin
with an ampersand and end with with a semi-colon
e.g. &value; The value will either be an entity name or
a standard ASCII character number. They are called
escape sequences.
• The next table represents some of the more commonly
used special characters. For a comprehensive listing,
visit the W3C’s section on special characters at: http://
www.w3.org/MarkUp/HTMLPlus/htmlplus_13.html
Special Entity Special Entity
Character Name Character Name
Ampersand & & Greater-than > >
sign
Asterisk &lowast; Less-than sign < <
∗∗
Cent sign ¢ ¢ Non-breaking
space
Copyright © © Quotation mark " "
Fraction one ¼ ¼ Registration ® ®
qtr mark
Fraction one ½ ½ Trademark sign ™
half ™
• Additional escape sequences support accented characters,
such as:
• ö
– a lowercase o with an umlaut: ö
• ñ
– a lowercase n with a tilde: ñ
• È
– an uppercase E with a grave accent: È
• NOTE: Unlike the rest of HTML, the escape sequences are
case sensitive. You cannot, for instance, use &LT; instead of
<.
Additional Character Formatting Elements
• <STRIKE> strike-through text</STRIKE>

• DEL is used for STRIKE at the latest browsers
• <BIG> places text in a big font</BIG>
• <SMALL> places text in a small font</SMALL>
• <SUB> places text in subscript position </SUB>
• <SUP> places text in superscript style position
</SUP>
Example
<P><STRIKE> strike-through text </STRIKE></BR>
<BIG>places text in a big font </BIG><BR>
<SMALL> places text in a small font</SMALL><BR>
<SUB> places text in subscript position </SUB>

Normal
<SUP> places text in superscript style position </SUP><BR>
</P>
LISTS
• how to create a variety of lists.
Objectives
Upon completing this section, you should be
able to
– Create an unordered list.
– Create an ordered list.
– Create a defined list.
– Nest Lists.
List Elements
• HTML supplies several list elements. Most list elements
are composed of one or more <LI> (List Item) elements.
• UL : Unordered List. Items in this list start with a list
mark such as a bullet. Browsers will usually change the
list mark in nested lists.
<UL>
<LI> List item …</LI>
</UL>
List Elements
• You have the choice of three bullet types:
disc(default), circle, square.
• These are controlled in Netscape Navigator by the
“TYPE” attribute for the <UL> element.
<UL TYPE=“square”>
</UL>
List Elements
• OL: Ordered List. Items in this list are numbered
automatically by the browser.
<OL>
</OL>
• You have the choice of setting the TYPE Attribute to
one of five numbering styles.
List Elements
TYPE Numbering Styles
1 Arabic numbers 1,2,3, ……
a Lower alpha a, b, c, ……
A Upper alpha A, B, C, ……
i Lower roman i, ii, iii, ……
I Upper roman I, II, III, ……
List Elements
• You can specify a starting number for an ordered list.
<OL TYPE =“i”>
</OL>
<P> text ….</P>
<OL TYPE=“i” START=“3”>
</OL>
List Elements
i. List item …
ii. List item …
Text ….
iii. List item …
List Elements
• DL: Definition List. This kind of list is different from the others. Each
item in a DL consists of one or more Definition Terms (DT elements),
followed by one or more Definition Description (DD elements).
<DL>
<DT> HTML </DT>
<DD> Hyper Text Markup Language </DD>
<DT> DOG </DT>
<DD> A human’s best friend!</DD>
</DL>
HTML
Hyper Text Markup Language
DOG
A human’s best friend!
Nesting Lists
• You can nest lists by inserting a UL, OL, etc., inside a list item (LI).
EXample
<UL TYPE = “square”>
<LI> List item …
<OL TYPE=“i” START=“3”>
</OL>
</LI>
</UL>
What will be the output?
<H1 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H1>

<OL TYPE=“a” START=“2”>
<LI>Be able to swim </LI>
<LI>Wear a life jacket at all times </LI>
<LI>Don't stand up or move around. If canoe tips,
<UL>
<LI>Hang on to the canoe </LI>
<LI>Use the canoe for support and </LI>
<LI>Swim to shore
</UL> </LI>
<LI>Don't overexert yourself </LI>
<LI>Use a bow light at night </LI>
</OL>
<body>
<h1>Scrambled Eggs</h1>
<p>Here is a recipe for deliciously rich scrambled eggs.</p>
<h2>Ingredients</h2>
<ul>
<li>2 eggs</li>
<li>1tbs butter</li>
<li>2tbs cream</li> What will the
</ul>
<h2>Method</h2> Output be?
<ol>
<li>Melt butter in a frying pan over a medium heat</li>
<li>Gently mix the eggs and cream in a bowl</li>
<li>Once butter has melted add cream and eggs</li>
<li>Using a spatula fold the eggs from the edge of the pan to the center every
20 seconds (as if you are making an omelette)</li>
<li>When the eggs are still moist remove from the heat (it will continue to cook
on the plate until served)</li> </ol>
</body>
SUMMARY
LISTS
• There are three types of HTML lists: ordered,
unordered, and definition.
• Ordered lists use numbers.
• Unordered lists use bullets.
• Definition lists are used to define terminology.
• Lists can be nested inside one another.
IMAGES
• Great images help make the difference
between an average-looking site and a really
engaging one
• Images should...
– Be relevant
– Convey information
– Convey the right mood
– Be instantly recognisable
– Fit the color palette
Adding Images
<IMG>
• defines a graphic image on the page.
• An empty element
• Attributes:
– src : (source) This value will be a URL (location of the image)
– Alternate Text (ALT): text field that describes an image or acts as a label. The
text used -often referred to as alt text.
• should give an accurate description of the image content so it can be understood by
screen reader software (used by people with visual impairments) and search
engines.
– title (title): provide additional information about the image. Browsers will
display the content of this attribute in a tootip when the user hovers over
the image.
<img src="images/lions.jpg" alt="A pride of lions" title="The lion is one of the
big cats found in africa." />
Other <image> attributes
• Width (WIDTH): width of the image in pixels.
• Height (HEIGHT): height of image in pixels.
• Border (BORDER): a border around the image,
in pixels.
• HSPACE: Horizontal Space on both sides of the
image (in pixels). i.e. put pxls of invisible space
on both sides of the image.
• VSPACE: is for Vertical Space on top and
bottom of the image specified in pixels.
Summary Images
• <img> element is used to add images to a web page.
• You must always specify a src attribute to indicate the
source of an image and an alt attribute to describe
the content of an image.
• You should save images at the size you will be using
them on the web page and in the appropriate format.
• Photographs are best saved as JPEGs; illustrations or
logos that use flat colors are better saved as GIFs.
LINKS
• Links are the defining feature of the web - they allow you
to move from one web page to another — enabling the
very idea of browsing or surfing.
• types of links:
– Links from one website to another
– Links from one page to another on the same website
– Links from one part of a web page to another part of the same
page
– Links that open in a new browser window
– Links that start up your email program and address a new
email to someone
HOW TO MAKE A LINK
• The tags used to produce links are the <A> and </A>. The <A> tells
where the link should start and the </A> indicates where the link ends.
• Everything between these two will work as a link.
• The example below shows how to make the word ‘Here’ work as a link
to yahoo.
Click <A HREF="http://www.IMDB.com">here</A> to

go to IMDB.
Linking to other sites
• the value of the href attribute will be the full web address for the site (an
absolute URL).
• Browsers show links in blue with an underline by default.
<p>Movie Reviews:
<ul>
<li><a href="http://www.empireonline.com">
Empire</a></li>
<li><a href="http://www.metacritic.com">
Metacritic</a></li>
<li><a href="http://www.rottentomatoes.com">
Rotten Tomatoes</a></li>
<li><a href="http://www.variety.com">
Variety</a></li>
</ul>
</p>
LINKING TO OTHER PAGES
ON THE SAME SITE
• you do not need to specify the domain name in the URL. You can
use a relative URL.
<p>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About</a></li>
<li><a href="movies.html">Movies</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</p>
Internal Links
• Links can also be created inside large documents to simplify
navigation. Internal links can help you meet the need to get the
information quickly.
• Select some text at a place in the document that you would like to
create a link to, then add an anchor to link to like this:
<A NAME=“bookmark_name”></A>
• The Name attribute specifies a location in the document that we
link to shortly. All NAME attributes in a document must be unique.
• Alternatively , by using the id attribute (can be used on every
HTML element).
• Next select the text that you would like to create as a link to the
location created above.
<A HREF=“#bookmark_name”>Go To Book Mark</A>
<h1 id="top">Film-Making Terms</h1>
<a href="#arc_shot">Arc Shot</a><br />
<a href="#interlude">Interlude</a><br />
<a href="#prologue">Prologue</a><br /><br />
<h2 id="arc_shot">Arc Shot</h2>
<p>Photographed by a moving camera</p>
<h2 id="interlude">Interlude</h2>
<p>A brief, intervening film scene or
sequence, that appears within a film</p>
<h2 id="prologue">Prologue</h2>
<p>A speech, preface, introduction, or brief
scene preceding the the main action or plot
of a film; contrast to epilogue</p>
<p><a href="#top">Top</a></p>
E-Mail (Electronic Mail)
• E.g. gkagombe@jkuat.co.ke
• The type of service is identified as the mail client
program. This type of link will launch the users mail
client.
• The recipient of the message is
gkagombe@jkuat.co.ke
• <A HREF=“mailto:gkagombe@jkuat.co.ke”>Send
me More Information </A>
OPENING LINKS IN A NEW WINDOW
target
• If you want a link to open in a new window, you can use the
target attribute on the opening <a> tag.
• The value of this attribute should be _blank.
• Desirable if a link points to another website.
• Generally you should avoid opening links in a new window,
but if you do, it is considered good practice to inform users
that the link will open a new window before they click on it.
<a href="http://www.imdb.com"
target="_blank">Internet Movie
Database</a> (opens in new window)
HTML Attributes
• All HTML elements can have attributes
• provide additional information about an element
• Attributes are always specified in the start tag
• usually come in name/value pairs like: name="value"
• The style attribute is used to specify the styling of an

element, like color, font, size etc.
• Example
<p style="color:red">This is a paragraph.</p>
Tables
• We will learn that tables have many uses in
HTML.
Objectives:
• Upon completing this section, you should be
able to:
– Insert a table.
– Explain a table’s attributes.
– Edit a table.
– Add a table header.
Tables
• The <table> </table> element has four sub-
elements:
• Table Row<tr></tr>.
• Table Header <th></th>.
• Table Data <td></td>.
• Caption <caption></caption>.
• The table row elements usually contain table
header elements or table data elements.
Tables
<table>
<tr>
<th></th> <th scope="col">Saturday</th> <th
scope="col">Sunday</th>
</tr>
<tr>
<th scope="row">Tickets sold:</th> <td>120</td> <td>135</td>
</tr>
<tr>
<th scope="row">Total sales:</th> <td>$600</td> <td>$675</td>
</tr>
</table>
Table Attributes
• CellPadding: Cell Padding is the space
between the cell border and the cell contents
and is specified in pixels.
• Align: tables can have left, right, or center
alignment.
• Background: Background Image, will be titled
in IE3.0 and above.
• BorderColor, BorderColorDark.
long Tables
• There are three elements that help distinguish between
the main content of the table and the first and last
rows (which can contain different content).
• These elements help people who use screen readers
and also allow you to style these sections in a different
manner than the rest of the table (as you will see when
you learn about CSS).
<thead> -The headings of the table should sit inside this.
<tbody> -The body should sit inside this element.
<tfoot> -The footer belongs inside the <tfoot> element.
<table>
<thead>
<tr> <th>Date</th> <th>Income</th> <th>Expenditure</th>
</tr>
</thead>
<tbody>
<tr> <th>1st January</th> <td>250</td> <td>36</td> </tr>
<tr>
<th>2nd January</th> <td>285</td> <td>48</td>
</tr>

<tr> <th>31st January</th> <td>129</td> <td>64</td> </tr>
</tbody>
<tfoot>
<tr> <td></td> <td>7824</td> <td>1241</td> </tr>
</tfoot>
</table>
Table Header
• Table Data cells are represented by the TD
element.
• Cells can also be TH (Table Header) elements
which results in the contents of the table
header cells appearing centered and in bold
text.
Table Data and Table Header Attributes
• Colspan: Specifies how many cell columns of the table this
cell should span.
• Rowspan: Specifies how many cell rows of the table this cell
should span.
• Align: cell data can have left, right, or center alignment.
• Valign: cell data can have top, middle, or bottom alignment.
• Width: you can specify the width as an absolute number of
pixels or a percentage of the document width.
• Height: You can specify the height as an absolute number of
pixels or a percentage of the document height.
Basic Table Code
<TABLE BORDER=1 width=50%>
<CAPTION> <h1>Spare Parts <h1> </Caption>
<TR><TH>Stock
Number</TH><TH>Description</TH><TH>List Price</TH></
TR>
<TR><TD bgcolor=red>3476-AB</TD><TD>76mm
Socket</TD><TD>45.00</TD></TR>
<TR><TD >3478-AB</TD><TD><font color=blue>78mm
Socket</font> </TD><TD>47.50</TD></TR>
<TR><TD>3480-AB</TD><TD>80mm
Socket</TD><TD>50.00</TD></TR>
</TABLE>
<Table border=1 cellpadding =2>
<tr> <th> Column 1 Header</th> <th>
Column 2 Header</th> </tr>
<tr> <td colspan=2> Row 1 Col 1</td>
</tr>
<tr> <td rowspan=2>Row 2 Col 1</td>
<td> Row 2 Col2</td> </tr>
<tr> <td> Row 3 Col2</td> </tr>
</table>
Column 1 Header Column 2 Header
Row 1 Col 1
Row 2 Col 2
Row 2 Col 1
Row 3 Col 2
Special Things to Note
• The <table> element is used to add tables to a web

page.
• A table is drawn out row by row. Each row is created
with the <tr> element.
• Inside each row there are a number of cells
represented by the <td> element (or <th> if it is a
header).
• You can make cells of a table span more than one row
or column using the rowspan and colspan attributes.
• For long tables you can split the table into a <thead>,
<tbody>, and <tfoot>
Forms
Forms
• Different elements that allow you to collect information
from visitors to your site.
• To insert a form we use the <FORM></FORM> tags. The
rest of the form elements must be inserted in between the
form tags.
<form
action="http://www.example.com/subscribe.
php"
method="get">
<p>This is where the form controls will
appear. </p>
</form>
FORM STRUCTURE - <form> element
• Form controls live inside a <form> element.
• should always carry the action attribute and will usually have a method and id
attribute too.
action
• Every <form> element requires an action attribute. Its value is the URL for the
page on the server that will receive the information in the form when it is
submitted.
method
• Forms can be sent using one of two methods: get or post.
• get method -is ideal for:
– short forms (such as search boxes)
– when you are just retrieving data from the web server (not sending information that
should be added to or deleted from a database)
• Post method -values are sent in what are known as HTTP headers
id
• the value is used to identify the form distinctly from other elements on the page
(often used by scripts).
Form controls- adding text
Text input (single-line)
• Used for a single line of text such as email
addresses and names.
Password input
• Like a single line text box but it masks the
characters entered.
Text area (multi-line)
For longer areas of text, such as messages and
comments.
Form Elements-making choices:
Radio buttons
For use when a user must select one of a number of options.
Checkboxes
When a user can select and unselect one or more options.
Drop-down boxes
When a user must pick one of a number of options from a list.
SUBMITTING FORMS:
Submit buttons
To submit data from your form to another web page.
Image buttons
Similar to submit buttons but they allow you to use an image.
Text input
• Text boxes: Used to provide input fields for text, phone numbers,
dates, etc.
<input type="text" name="username" size="15“
maxlength="30" />
• Textboxes use the following attributes:

– Type=“text”
– SIZE: determines the size of the textbox in characters. Default=20
characters. (old code)
– MAXLENGHT : determines the maximum number of characters that the
field will accept.
– NAME: is the name of the variable to be sent to the CGI application.
– VALUE: will display its contents as the default value.
Password
• Password: Used to allow entry of passwords.
• Text typed in a password box is blocked out
• Password boxes use the following attributes:
– type= “password”
– size: determines the size of the textbox in characters.
– maxlength: determines the maximum size of the
password in characters.
– name: is the name of the variable to be sent to the
server.
Example on Password Box
<form action="http://www.example.com/login.php">
<p>Username:
<input type="text" name="username" size="15“ maxlength="30" />
</p>
<p>Password:
<input type="password" name="password" size="15"
maxlength="30" />
</p>
</form>
TEXT AREA
• The <textarea> element is used to create a mutli-line text
input.
• Unlike other input elements this is not an empty element. It
should therefore have an opening and a closing tag.
• Any text that appears between the opening <textarea> and
closing </textarea> tags will appear in the text box when the
pagedidloads.
<p>What you think of this gig?</p>
<textarea name="comments" cols="20" rows="4">Enter your comments... </textarea>
Hidden
• Hidden: Used to send data to the CGI application that
you don’t want the web surfer to see, change or have
to enter but is necessary for the application to process
the form correctly.
<INPUT TYPE=“HIDDEN”>
• Nothing is displayed in the browser.
• Hidden inputs have the following attributes:
– TYPE: hidden.
– NAME: is the name of the variable to be sent to the CGI
application.
– VALUE: is usually set a value expected by the CGI application.
Check Box
• Check Box: Check boxes allow the users to
select more than one option.
• Checkboxes have the following attributes:
– type=“ checkbox”
– checked: is blank or checked as the initial status.
– name: is the name of the variable to be sent to
the server application.
– value: is usually set to a value
<BODY>
<h1>
<font color=green>Please check one of the
following</font></h1>
<FORM name="fome3" Action="url" method="get">
<font color=red> Select Country: </font><BR>
Kenya:<INPUT TYPE="CheckBox" Name="country"
CHECKED><BR>
Uganda<INPUT TYPE="CheckBox" Name="country"><BR>
Tanzania:<INPUT TYPE="CheckBox"
Name="country"><BR> <BR>
<font color=blue>Select Language:</font><BR>
kiswahili:<INPUT TYPE="CheckBox" Name="language"
CHECKED><BR> English:<INPUT TYPE="CheckBox"
Name="language"><BR>
French:<INPUT TYPE="CheckBox" Name="language">
<BR></FORM> </BODY>
Output
Radio Button
• Radio Button: Radio buttons allow the users to select only
one option.
• Radio buttons have the following attributes:
– Type=“radio”
– checked: is blank or checked as the initial status. only one radio
button can be checked
– name: is the variable name to be sent along with the selected
value to the server application.
– value: usually has a set value.
• Note: Once a radio button has been selected it cannot be
deselected. The user can only select a different option.
<form action="http://www.example.com/profile.php">
<p>Please select your favorite genre:
<br />
<input type="radio" name="genre" value="rock“
checked="checked" /> Rock
<input type="radio" name="genre" value="pop" />
Pop <input type="radio" name="genre" value="jazz" />
Jazz
</p>
</form>
Push Button
• Push Button: This element would be used with
JavaScript to cause an action to take place.
<INPUT TYPE=“BUTTON”>
• Browser will display
• Push Button has the following attributes:

– TYPE: button.
– NAME: is the name of the button to be used in scripting.
– VALUE: determines the text label on the button.
<DIV align=center><BR><BR>
<FORM>
<FONT Color=red>
<h1>Press Here to see a baby crying:<BR>
<INPUT TYPE="button" VALUE="PressMe"><BR><BR>
<FONT Color=blue>
Click Here to see a baby shouting:<BR>
<INPUT TYPE="button" VALUE="ClickMe" >
<BR><BR>
<FONT Color=green>
Hit Here to see a baby eating:<BR>
<INPUT TYPE="button" VALUE="HitME" > <BR><BR>
<FONT Color=yellow>
</FORM></DIV>
Button & Hidden control
<button> - allows more control over how buttons appear, and allow
other elements to appear inside the button.
- can combine text and images between the opening and closing tag.
<input type="hidden“>
The example also shows a hidden form control- not shown on the
page
They allow web page authors to add values to forms that users
cannot see.
<form action="http://www.example.com/add.php">
<button><img src="images/add.gif" alt="add“ width="10"
height="10" /> Add</button>
<input type="hidden" name="bookmark“ value="lyrics" />
</form>
Submit Button
• Every set of Form tags requires a Submit button. It is the
element that causes the browser to send the names and
values of the other elements to the CGI Application
specified by the ACTION attribute of the FORM element.
<INPUT TYPE=“SUBMIT”>
• The browser will display
• Submit has the following attributes:
– TYPE: submit.
– NAME: value used by the CGI script for processing.
– VALUE: determines the text label on the button, usually Submit
Query.
Try out the following code;
<FORM Action="URL" method="get">
First Name: <INPUT TYPE="TEXT" Size=25
name="firstName"><BR>
Family Name: <INPUT TYPE="TEXT" Size=25
name="LastName"><BR>
<BR>
<FONT Color=red>
Press Here to submit the data:<BR>
<INPUT TYPE="submit" VALUE="SubmitData " >
</FORM>
Reset Button
• It is a good idea to include one of these for each form
where users are entering data.
• It allows the surfer to clear all the input in the form.
<INPUT TYPE=“RESET”>
• Reset buttons have the following attributes:

– TYPE: reset.
– VALUE: determines the text label on the button, usually
Reset.
<FORM Action="URL" method="get">
First Name: <INPUT TYPE="TEXT" Size=25
name="firstName"> <BR>
Family Name: <INPUT TYPE="TEXT" Size=25
name="LastName"><BR>
<BR>
<FONT Color = red>
<STRONG><font size=5>Press Here to submit the
data:</font></STRONG><BR>
<INPUT TYPE="submit" VALUE="SubmitData">
<INPUT TYPE="RESET" VALUE="Reset">
</FORM>
Image Submit Button
• Allows you to substitute an image for the standard
submit button.
<INPUT TYPE=“IMAGE” SRC=“Kenya.gif”>
• Image submit button has the following attributes:

– TYPE: Image.
– NAME: is the name of the button to be used in scripting.
– SRC: URL of the Image file.
<form>
<H1><font color=blue>
Click go to the Map of Kenya:
<INPUT TYPE="IMAGE"
SRC=“Kenya.gif">
</form>
File
• File Upload: You can use a file upload to allow surfers to upload files to
your web server.
• <INPUT TYPE=“FILE”>
• File Upload has the following attributes:

• TYPE: file.
• SIZE: is the size of the text box in characters.
• NAME: is the name of the variable to be sent to the
• CGI application.
• MAXLENGHT: is the maximum size of the input in the
• textbox in characters.
<BODY bgcolor=lightblue>
<form>
<H3><font color=forestgreen>
Please attach your file here to for uploading to
My <font color =red>SERVER...<BR>
<INPUT TYPE="File" name="myFile" size="30">
<INPUT TYPE="Submit" value="SubmitFile">

</form>
</BODY>
Other Elements used in Forms
• <TEXTAREA></TEXTAREA>: is an element that
allows for free form text entry.
• Textarea has the following attributes:

– NAME: is the name of the variable to be sent to
the CGI application.
– ROWS: the number of rows to the textbox.
– COLS: the number of columns to the textbox.
• The two following examples are <SELECT></SELECT>
elements, where the attributes are set differently.
• The Select elements attributes are:
• NAME: is the name of the variable to be sent to the
CGI application.
• SIZE: this sets the number of visible choices.
• MULTIPLE: the presence of this attribute signifies
that the user can make multiple selections. By
default only one selection is allowed.
form
action="http://www.example.com/profile.php">
<p>What device do you listen to music on?</p>
<select name="devices">
<option value="ipod">iPod</option>
<option value="radio">Radio</option>
<option value="computer">Computer</option>
</select>
</form>
• Drop Down List:
– Name: is the name of the variable to be sent to

the server.
– Size: 1.
• List Box:
– Name: is the name of the variable to be sent to the CGI

application.
– SIZE: is greater than one.
• Option
• The list items are added to the <SELECT> element by
inserting <OPTION></OPTION> elements.
• The Option Element’s attributes are:
– SELECTED: When this attribute is present, the option is
selected when the document is initially loaded. It is an
error for more than one option to be selected.
– VALUE: Specifies the value the variable named in the
select element.
</HEAD>
<BODY>
<h2><font color=blue>What type of Computer do you
have?</font><h2>
<FORM>
<SELECT NAME="ComputerType" size=4>
<OPTION value="IBM" SELECTED> IBM</OPTION>
<OPTION value="INTEL"> INTEL</OPTION>
<OPTION value=" Apple"> Apple</OPTION>
<OPTION value="Compaq"> Compaq</OPTION>
</SELECT>
</FORM></BODY></HTML>
<HEAD> <TITLE>SELECT with Mutiple </TITLE> </HEAD>
<BODY>
<h2><font color=blue>What type of Computer do you
have?</font><h2>
<FORM>
<SELECT NAME="ComputerType" size=5 multiple>
<OPTION value="IBM" > IBM</OPTION>
<OPTION value="INTEL"> INTEL</OPTION>
<OPTION value=" Apple"> Apple</OPTION>
<OPTION value="Compaq" SELECTED> Compaq</OPTION>
<OPTION value=" other"> Other</OPTION>
</SELECT>
</FORM></BODY></HTML>
LABELLING FORM CONTROLS
<label>
• each form control should have its own <label> element as this makes the form
accessible to vision-impaired users.
• The <label> element can be used in two ways. It can:
1. Wrap around both the text description and the form input (as shown on the first line of
the example that follows).
2. Be kept separate from the form control and use the for attribute to indicate which form
control it is a label for (as shown with the radio buttons).
for
• The for attribute states which form control the label belongs to.
• Note how the radio buttons use the id attribute. The value of the id attribute
uniquely identifies an element from all other elements on a page. (The id
attribute is covered on page 183.)
• The value of the for attribute matches that of the id attribute on the form control
it is labelling.
• This technique using the for and id attributes can be used on any form control
Label example
<label>Age: <input type="text" name="age" /></label>
<br/ >
Gender:
<input id="female" type="radio“ name="gender"
value="f">
<label for="female">Female</label>
<input id="male" type="radio“ name="gender“
value="m">
<label for="male">Male</label>
Things to Note:
• When a <label> element is used with a
checkbox or radio button, users can click on
either the form control or the label to select.
– The position of the label is very important. Rule of
thumb, of the best places to place labels on form
controls is as follows:
- Above or to the left: - To the right:
• Text inputs • Individual checkboxes
• Text areas • Individual radio buttons
• Select boxes
• File uploads
HTML5 <datalist> Element
• specifies a list of pre-defined options for an <input> element.
• Users see drop-down list of the pre-defined options.
• The list attribute of the <input> element, must refer to the id attribute of
the <datalist> element. Example
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Grouping Form Data with <fieldset>
• The <fieldset> element is used to group related data in a form.
• The <legend> element defines a caption for the
<fieldset> element.
Example
<form action="/action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
HTML Input Types
Here are the different input types you can use in HTML:
• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
More input types
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">

Introduction To HTML CLASS NOTES

Uploaded by

Copyright:

Available Formats

You might also like

Introduction To HTML CLASS NOTES

Uploaded by

Document Information

Original Description:

Original Title

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

Introduction To HTML CLASS NOTES

Uploaded by

Copyright:

Available Formats

Introduction to

• HTML is a markup language

• Not case sensitive

<h1>My first web page</h1>

• The <!DOCTYPE> declaration helps the

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

• <STRIKE> strike-through text</STRIKE>

<BIG>places text in a big font </BIG><BR>

<SMALL> places text in a small font</SMALL><BR>

<SUB> places text in subscript position </SUB>

<H1 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H1>

Click <A HREF="http://www.IMDB.com">here</A> to

• The style attribute is used to specify the styling of an

• The <table> element is used to add tables to a web

• Textboxes use the following attributes:

• Push Button has the following attributes:

• Browser will display

• Reset buttons have the following attributes:

<INPUT TYPE=“IMAGE” SRC=“Kenya.gif”>

• Image submit button has the following attributes:

• File Upload has the following attributes:

<INPUT TYPE="File" name="myFile" size="30">

<INPUT TYPE="Submit" value="SubmitFile">

• Browser will display

• Textarea has the following attributes:

– Name: is the name of the variable to be sent to

– Name: is the name of the variable to be sent to the CGI

You might also like