Chapter 2

• Basic html
• HTML (Hypertext Markup Language) is the primary building block of creating a website.
• Hyper Text Markup Language
• Hyper Text = “Text with links to other text. Documents written as hypertext contain text
that when "clicked on" by the user with a mouse, links to other documents. “
• Markup = The printer's marks that indicate how a document is to appear when published.
Sometimes also the editor's markings, or a graphical designer's marks to indicate
positioning, fonts, styles, etc. in a "comp."
• HTML is a very basic markup language and requires memorization of a few dozen HTML
commands that structure the look and layout of a web page.
• Before writing any HTML code or designing your first web page, you must decide on an
HTML editor or text editor, such as Notepad or WordPad.
• Tags tell Web browser how to display a page
• Can have either *.htm or *.html file extension
Select to Run your web site necessary browser
• Test your website in multiple browsers on multiple platforms. 
• This is incredibly important, as different browsers may handle aspects
of your website differently. 
• Before you begin promoting your website, try visiting and using your
website in the following browsers on Windows, Mac, iPhone, and
Android platforms:
• Google Chrome
• Firefox
• Safari (iPhone and Mac only)
• Microsoft Edge and Internet Explorer (Windows only)
• The built-in browser on several different Android phones (e.g.,
Samsung Galaxy, Google Nexus, etc.)
Continue…
• Step1. Determine whether you want to use a website creator.
• If you do decide to code your own website, you'll need to learn
both HTML and CSS coding.
• Step2. Map out your site.
• Your website's pages may be easier to visualize if you draw rough
pictures of each of them rather than just determining what
content should appear.
Continue….
• Use intuitive design.
•  your website's basic design should follow established guidelines
such as the following:
• Navigation options (e.g., tabs for different pages) should go at the
top of the page.
• If you use a menu icon (☰), it should be in the top-left corner of
the page.
• If you use a search bar, it should be near the upper-right side of
the page.
• Helpful links (e.g., links to the "About" page or the "Contact Us"
page) should go at the very bottom of each page.
Continue…
Continue…
• Step4. Be consistent.
• Whatever text font, color palette, image theme, and design options
you choose, make sure that you use the same decision throughout
your website.
•  if you exclusively use cool-tone colors for your site's home page,
don't implement bright, loud colors on the next page.
• Keep in mind that using loud or clashing colors, especially when
the colors display in a dynamic (e.g., moving) fashion, can evoke
epilepsy in a small number of web users. 
A Web Page, Step by Step

• Step 1: Start with content. We add raw text content and see what
browsers do with it.
Step 2: Give the document structure. We learn about HTML
elements and its structure.
Step 3: Identify text elements. You’ll describe the content using the
appropriate text elements and learn about the proper way to use
HTML.
Step 4: Add an image. By adding an image to the page, we will
learn about attributes.
Step 5: Change the look with a style sheet. We learn formatting
content with CSS.
Start with Content
• Rules Naming Conventions
• It is important that you follow these rules and conventions when naming your files:
• Use proper suffixes for your files._ HTML files must end with .html (some servers allow .htm).
• Web graphics must be labeled according to their file format: .gif or .jpg (.jpeg is also acceptable).
• Never use character spaces within filenames.
• It is common to use an underline character or dash to visually separate words within filenames,
such as robbins_bio. html or robbins-bio.html.
• Avoid special characters such as?, %, #, /, :, ;, •, etc. Limit filenames to letters, numbers,
underscores, hyphens, and periods.
• Filenames may be case-sensitive, depending on your server configuration.
• Consistently using all lowercase letters in filenames, while not necessary, makes your filenames
easier to manage.
• Keep filenames short. Short names keep the character count and file size of your HTML file in
check.
What Browsers Ignore

• Some information in the source document will be ignored when it

is viewed in a browser, including:
• Line breaks (carriage returns)_. Line breaks are ignored. Text and
elements will wrap continuously until a new block element, such as
a heading (h1) or paragraph (p), or the line break (br) element is
encountered in the flow of the document text.
• Tabs and multiple spaces_. When a browser encounters a tab or
more than one consecutive blank character space, it displays a
single space.
• Unrecognized markup_. A browser simply ignores any tag it
doesn’t understand or that was incorrectly specified.
HTML Formatting
• HTML Formatting is a process of formatting text for better look and
feel.
• HTML provides us ability to format text without using CSS.
• There are many formatting tags in HTML.
• These tags are used to make text bold, italicized, or underlined.
• There are almost 14 options available that how text appears in HTML
and XHTML.
Conti….
• In HTML the formatting tags are divided into two categories:
• Physical tag: These tags are used to provide the visual appearance to
the text.
• Logical tag: These tags are used to add some logical or semantic
value to the text.
• NOTE: There are some physical and logical tags which may give
same visual appearance, but they will be different in semantics.
HTML Text Formatting Elements
Conti…
•A. Bold Text
•HTML<b> and <strong> formatting elements
•The HTML <b> element is a physical tag which display text in bold font, without any logical
importance.
• If you write anything within <b>............</b> element, is shown in bold letters.
•<p> <b>Write Your First Paragraph in bold text.</b></p> 
•The HTML <strong> tag is a logical tag, which displays the content in bold font and informs the
browser about its logical importance. If you write anything between <strong>???????. </strong>,
is shown important text.
• example:
1. <p><strong>This is an important content</strong>, and this is normal content</p>  
•Test it N
Conti…
•2) Italic Text
•HTML <i> and <em> formatting elements
•The HTML <i> element is physical element, which display the enclosed content
in italic font, without any added importance. If you write anything within
<i>............</i> element, is shown in italic letters.

• Example <p> <i>Write Your First Paragraph in italic text.</i></p>  
• The HTML <em> tag is a logical element, which will display the enclosed
content in italic font, with added semantics importance.
• <p><em>This is an important content</em>, which displayed in italic font.</
p>  
Cont…
•3) HTML Marked formatting
•If you want to mark or highlight a text, you should write the content within <mark>.........</mark>.
• <h2>  I want to put a <mark> Mark</mark> on your face</h2>   
•4) Underlined Text
•If you write anything within <u>.........</u> element, is shown in underlined text.
• <p> <u>Write Your First Paragraph in underlined text.</u></p>  
•5) Strike Text
•Anything written within <strike>.......................</strike> element is displayed with strikethrough. It
is a thin line which cross the statement.
• example:
• <p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>  
Cont…
•6) Monospaced Font
•If you want that each letter has the same width then you should write the content within
<tt>.............</tt> element.
•Note: We know that most of the fonts are known as variable-width fonts because different
letters have different width. (for example: 'w' is wider than 'i'). Monospaced Font provides
similar space among every letter.
• <p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>     
•7) Superscript Text
•If you put the content within ^{..............} element, is shown in superscript; means it
is displayed half a character's height above the other characters.
• <p>Hello ^{Write Your First Paragraph in superscript.}</p>     
Cont…
•8) Subscript Text
•If you put the content within _{..............} element, is shown in subscript ;
means it is displayed half a character's height below the other characters.
•<p>Hello _{Write Your First Paragraph in subscript.}</p>  
•9) Deleted Text
•Anything that puts within <del>..........</del> is displayed as deleted text.
•<p>Hello <del>Delete your first paragraph.</del></p>  
•10) Inserted Text
•Anything that puts within <ins>..........</ins> is displayed as inserted text.
•<p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>  
Cont…
•11) Larger Text
•If you want to put your font size larger than the rest of the text then put the
content within <big>.........</big>. It increase one font size larger than the previous
one.
•<p>Hello <big>Write the paragraph in larger font.</big></p>  
•12) Smaller Text
•If you want to put your font size smaller than the rest of the text then put the
content within <small>.........</small>tag. It reduces one font size than the previous
one.
•<p>Hello <small>Write the paragraph in smaller font.</small></p>  
Give the Document Structure
• HTML Element Syntax
• An HTML element is an individual component of an HTML document. It
represents semantics, or meaning.
• Most HTML elements are written with a start tag (or opening tag) and an end
tag (or closing tag), with content in between.
• Tags surrounded by angle brackets < >
• Usually come in pairs
• Example: Start tag <p> and end tag </p>
• Stuff between is called “element content”
• Tags are not case sensitive
• New standard is to use lower case
Conti…
Continue…
• Empty HTML Elements
• Empty elements (also called self-closing or void elements) are not
container tags — that means, you can not write

• A typical example of an empty element, is the element, which

represents a line break. Some other common empty elements are
Continue…

Nesting HTML Elements

Most HTML elements can contain any number of further elements (except empty elements), which are, in turn,
made up of tags, attributes, and content or other elements.
HTML Elements Types
• Elements can be placed in two distinct groups:
• block level and inline level elements. The former make up the
document's structure, while the latter dress up the contents of a
block.
• Also, a block element occupies 100% of the available width and it is
rendered with a line break before and after.
• Whereas, an inline element will take up only as much space as it
needs.
• The most commonly used block-level elements are
Continue…
• Whereas, the commonly used inline-level elements are

Writing Comments in HTML

Comments are usually added with the purpose of making the source code easier to understand.
Comments are not displayed in the browser. An HTML comment begins with

and ends with

Continue…
• Elements are identified by tags in the text source.
• A tag consists of the element name (usually an abbreviation of a longer descriptive
name) within angle brackets (< >).
• most tags come in pairs, marking a beginning and ending

• <title> and </title> enclose the title of a page

 hypertext
 tags & elements
 text formatting
 lists, hyperlinks, images
 tables, frames

 cascading style sheets

• inline, document, external
Page Components
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• First line of code
<html>
• Declaration of version of HTML
<head>
<title> …document
• <html>…</html> title… </title>
• Container for the document </head>
<body>
• <head>…</head> …your page content…
• <title> Title of page </title> </body>
</html>

• <body>…</body>
• Content of page
DOCTYPE
• A pre-processor directive at the top of the document tells the
browser what kind of standards apply to the document
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
Continue…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>***replace this text with course & section number and your full name </title>

</head>

<body>
<!--Begin your content specification by adding your elements here. -->

</body>

</html>
Continue…
• <element attribute-name="value">Content</element> or for empty
elements:
• <element attribute-name="value" />
Continue…
• ISO 639-1 defines abbreviations for languages. In HTML, they can be
used in the lang attributes.
Language ISO Code
Chinese Zh

English En

French Fr

German De

Russian Ru

Local Languages

Afar Aa

Amharic Am

Afan Oromo Om

Somali So

Tigrinya Ti
 Headings, <Hx> </Hx>
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
Heading 1
<BODY>
<H1> Heading 1 </H1> Heading 2
<H2> Heading 2 </H2> Heading 3
<H3> Heading 3 </H3>
Heading 4
<H4> Heading 4 </H4>
Heading 5
<H5> Heading 5 </H5>
Heading 6
<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.
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>.
Cont…
Attribute Description Default Value

SIZE Height of the rule in pixels 2 pixels

Width of the rule in pixels or

WIDTH 100%
percentage of screen width
Draw the rule with a flat look Not set
NOSHADE
instead of a 3D look (3D look)
Aligns the line (Left, Center,
ALIGN Center
Right)
Sets a color for the rule (IE
COLOR Not set
3.0 or later)
Cont…
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD> Heading 1
<BODY>
Paragraph 1,….
<H1> Heading 1 </H1>
<P>Paragraph 1, <BR> Line 2
Line 2 <BR> _________________________
<HR>Line 3 <BR> __
</P> Line 3
</BODY>
</HTML>
 Alignment
 Some elements have attributes for alignment (ALIGN) e.g. Headings,
Paragraphs and Horizontal Rules.
 The Three alignment values are : LEFT, RIGHT, CENTER.
 <CENTER></CENTER> Will center elements.
 Cont…
 <DIV ALIGN=“value”></DIV> Represents a division in the document and
can contain most other element type. The alignment attribute of the DIV
element is well supported.
 <TABLE></TABLE> Inside a TABLE, alignment can be set for each
individual cell.
 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
Cont…
Special Character Entity Name Special Character Entity Name

Ampersand &amp; & Greater-than sign &gt; >

Asterisk &lowast; Less-than sign &lt; <

∗∗
Cent sign &cent; ¢ Non-breaking &nbsp;
space
Copyright &copy; © Quotation mark &quot; "
Fraction one qtr &frac14; ¼ Registration mark &reg; ®

Fraction one half &frac12; ½ Trademark sign &trade; ™

Lists
Upon completing this section, you should be able to
1. Create an unordered list.
2. Create an ordered list.
3. Create a defined list.
4. 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>
<LI> List item …</LI>
</UL>
• List item …
• List item …
Cont…
 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”>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</UL>
 List item …
 List item …
 List item …
 Cont…
 OL: Ordered List. Items in this list are numbered automatically by the browser.
<OL>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
1. List item …
2. List item …
3. List item
 You have the choice of setting the TYPE Attribute to one of five numbering styles.
Cont…

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, ……
Cont…
 You can specify a starting number for an ordered list.
<OL TYPE =“i”>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
<P> text ….</P>
<OL TYPE=“i” START=“3”>
<LI> List item …</LI>
</OL>
Cont…
 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 …</LI>
<LI> List item …
<OL TYPE=“i” START=“3”>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
</LI>
<LI> List item …</LI>
</UL>
Exercise
Cont…
• <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>
Images
 <IMG>This element defines a graphic image on the page.
 Image File (SRC:source): This value will be a URL (location of the
image) E.g. http://www.domain.com/dir/file.ext or /dir/file.txt.
 Alternate Text (ALT): This is a text field that describes an image or
acts as a label. It is displayed when they position the cursor over a
graphic image.
 Alignment (ALIGN): This allows you to align the image on your page.
Cont..
 Width (WIDTH): is the width of the image in pixels.
 Height (HEIGHT): is the height of the image in pixels.
 Border (BORDER): is for a border around the image, specified in pixels.
 HSPACE: is for Horizontal Space on both sides of the image specified in
pixels. A setting of 5 will put 5 pixels of invisible space on both sides of the
image.
 VSPACE: is for Vertical Space on top and bottom of the image specified in
pixels. A setting of 5 will put 5 pixels of invisible space above and bellow
the image.
 Cont…
1) <IMG SRC=“jordan.gif“ border=4>
2) <IMG SRC=" jordan.gif" width="60" height="60">
3) <IMG SRC=“jordan.gif" ALT="This is a text that goes with the image">
4) <IMG SRC=" jordan.gif “ Hspace="30" Vspace="10" border=20>
5) < IMG SRC =" jordan.gif“ align="left">
blast blast blast blast blast
Lab section exercise 1
create a web page for the following information.
THE DESIGN PRINCIPLES
The design principles adopted in the curricula design are the capillary approach, the
adoption of a web-centric solution as the basis for the mediating process and a highly
flexible implementation approach which corresponds to an intensive use of multimedia,
ICT resources and multiple content formats.
Coding Is a Valuable Job skill
Coding is the skill of the 21st century. Jobs today require more problem-solving ability
than ever before, and more and more careers involve technology as an integral
requirement.
 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.)
 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>

 HOW TO MAKE A LINK
1) 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.

2) The example below shows how to make the word

Here work as a link to yahoo.

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

go to yahoo.
Cont…

<body LINK="#C0C0C0" VLINK="#808080" ALINK="#FF0000">

• LINK - standard link - to a page the visitor hasn't been to yet. (standard color is
blue - #0000FF).
VLINK - visited link - to a page the visitor has been to before. (standard color is
purple - #800080).
ALINK - active link - the color of the link when the mouse is on it. (standard
color is red - #FF0000).
If the programmer what to change the color
• Click <a href="http://www.yahoo.com"><font
color="FF00CC">here</font></a> to go to yahoo.
 E-Mail (Electronic Mail)
E.g. mailto:kmf@yahoo.com
 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 kmf@yahoo.com
<A HREF=“mailto:kmf@yahoo.com”>Send me
More Information </A>
 Tables
 The <TABLE></TABLE> element has four sub-
elements:
1. Table Row<TR></TR>.
2. Table Header <TH></TH>.
3. Table Data <TD></TD>.
4. Caption <CAPTION></CAPTION>.
 The table row elements usually contain table
header elements or table data elements.
 Conti…
<table border=“1”>
<tr>
<th> Column 1 header </th>
<th> Column 2 header </th>
</tr>
<tr>
<td> Row1, Col1 </td>
<td> Row1, Col2 </td>
</tr>
<tr>
<td> Row2, Col1 </td>
<td> Row2, Col2 </td>
</tr>
</table>
Cont…

Column 1 Header Column 2 Header

Row1, Col1 Row1, Col2

Row2, Col1 Row2, Col2

 Tables Attributes
 BGColor: Some browsers support background colors
in a table.
 Width: you can specify the table width as an absolute
number of pixels or a percentage of the document
width. You can set the width for the table cells as well.
 Border: You can choose a numerical value for the
border width, which specifies the border in pixels.
 CellSpacing: Cell Spacing represents the space
between cells and is specified in pixels.
 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.
 Table Caption
 A table caption allows you to specify a line of text that
will appear centered above or bellow the table.
<TABLE BORDER=1 CELLPADDING=2>
<CAPTION ALIGN=“BOTTOM”> Label For My Table </CAPTION>

 The Caption element has one attribute ALIGN that can

be either TOP (Above the table) or BOTTOM (below
the 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 Data and Table Header Attributes
<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>
Conti…
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
• TH, TD and TR should always have end tags.
Although the end tags are formally optional, many browsers will mess up the
formatting of the table if you omit the end tags. In particular, you should always
use end tags if you have a TABLE within a TABLE -- in this situation, the table parser
gets hopelessly confused if you don't close your TH, TD and TR elements.
• A default TABLE has no borders
By default, tables are drawn without border lines. You need the BORDER attribute
to draw the lines.
• By default, a table is flush with the left margin
TABLEs are plopped over on the left margin. If you want centered tables, You can
either: place the table inside a DIV element with attribute ALIGN="center".
Most current browsers also supports table alignment, using the ALIGN attribute.
Allowed values are "left", "right", or "center", for example: <TABLE ALIGN="left">.
The values "left" and "right" float the table to the left or right of the page, with text
flow allowed around the table. This is entirely equivalent to IMG alignment
What will be the output?

<TABLE BORDER width=“750”>

<TR> <TD colspan=“4” align=“center”>Page
Banner</TD></TR>

<TR> <TD rowspan=“2” width=“25%”>Nav Links</TD><TD

colspan=“2”>Feature Article</TD> <TD rowspan=“2”
width=“25%”>Linked Ads</TD></TR>

<TR><TD width=“25%”>News Column 1 </TD> <TD

width=“25%”><News Column 2 </TD></TR>
</TABLE>
 Frames
 A framed page is actually made up of multiple
HTML pages. There is one HTML document that
describes how to break up the single browser
window into multiple windowpanes. Each
windowpane is filled with an HTML document.

 For Example to make a framed page with a

windowpane on the left and one on the right
requires three HTML pages. Doc1.html and
Doc2.html are the pages that contain content.
Frames.html is the page that describes the division
of the single browser window into two
windowpanes.
Cont…

Doc1.html Doc2.html

Doc1.html Doc2.html

Frames.html
 Frame Page Architecture
 A <FRAMESET> element is placed in the html document before the
<BODY> element. The <FRAMESET> describes the amount of screen
real estate given to each windowpane by dividing the screen into
ROWS or COLS.
 The <FRAMESET> will then contain <FRAME> elements, one per
division of the browser window.
 Note: Because there is no BODY container, FRAMESET pages can't
have background images and background colors associated with them.
 Cont…
<HTML>
<HEAD>
<TITLE> Framed Page </TITLE>
<FRAMeSET COLS=“23%,77%”>
<FRAME SRC=“Doc1.html”>
<FRAME SRC=“Doc2.html”>
</FRAMeSET >
</HEAD>

</HTML>
The Diagram below is a graphical view of
the document described above

FRAMESET COLS=”23%, 77%”

FRAME FRAME

NAME= NAME=right_pane
left_pane SRC= Doc2.html
SRC=Doc1.h
tml
 <FRAMESET> Container
<FRAMESET> : The FRAMESET element creates divisions in the
browser window in a single direction. This allows you to define
divisions as either rows or columns.
 ROWS : Determines the size and number of rectangular rows
within a <FRAMESET>. They are set from top of the display
area to the bottom.
Possible values are:
 Absolute pixel units, I.e. “360,120”.
 A percentage of screen height, e.g. “75%,25%”.
 Proportional values using the asterisk (*). This is often
combined with a value in pixels , e.g. “360,*”.
 <Frameset cols=“200,20%,*,2*”>
Creating a Frames Page
 COLS: Determines the size and number of rectangular
columns within a <FRAMESET>. They are set from left
to right of the display area.

Possible values are:

 Absolute pixel units, I.e. “480,160”.
 A percentage of screen width, e.g. “75%,25%”.
 Proportional values using the asterisk (*). This is often
combined with a value in pixels , e.g. “480,*”.
Creating a Frames Page
 FRAMEBORDER : Possible values 0, 1, YES, NO. A setting of zero will create a
borderless frame.
 FRAMESPACING: This attribute is specified in pixels. If you go to borderless
frames you will need to set this value to zero as well, or you will have a gap
between your frames where the border used to be.
 BORDER(thickness of the Frame): This attribute specified in pixels. A setting of
zero will create a borderless frame. Default value is 5.
 BORDERCOLOR: This attribute is allows you choose a color for your border. This
attribute is rarely used.
 <FRAME>
<FRAME>: This element defines a single frame within a
frameset. There will be a FRAME element for each division
created by the FRAMESET element. This tag has the following
attributes:
 SRC: Required, as it provides the URL for the page that will be
displayed in the frame.
 NAME: Required for frames that will allow targeting by other
HTML documents. Works in conjunction with the target
attribute of the <A>, <AREA>, <BASE>, and <FORM> tags.
 Cont…
 MARGINWIDTH: Optional attribute stated in pixels.
Determines horizontal space between the <FRAME>
contents and the frame’s borders.
 MARGINHEIGHT: Optional attribute stated in pixels.
Determines vertical space between the <FRAME>
contents and the frame’s borders.
 SCROLLING: Displays a scroll bar(s) in the frame.
Possible values are:
1. Yes – always display scroll bar(s).
2. No – never display scroll bar(s).
3. Auto – browser will decide based on frame contents.
By default: scrolling is auto.
 Cont…
 NORESIZE: Optional – prevents viewers from resizing
the frame. By default the user can stretch or shrink
the frame’s display by selecting the frame’s border
and moving it up, down, left, or right.
<NOFRAMES>
 <NOFRAMES>: Frame – capable browsers ignore all HTML
within this tag including the contents of the BODY element.
This element does not have any attributes.

<HTML>
<HEAD>
<TITLE> Framed Page </TITLE>
</HEAD>
Cont…
<FRAMESET COLS="23%,77%">
<FRAME SRC="" NAME="left_pane“>
<FRAME SRC="" NAME="right_pane">
<NOFRAMES>
<P> This is a Framed Page. Upgrade your browser to
support frames.</P>
</NOFRAMES></FRAMESET>
Compound FRAMESET Divisions
 In this case a second FRAMESET element will be inserted in the place
of the FRAME element that would describe the second row.
 The second FRAMESET element will divide the remaining screen real
estate into 2 columns.
 This nested FRAMESET will then be followed by 2 FRAME elements to
describe each of the subsequent frame divisions created.
Example
<html> <noframes>
<head>
<p>
<title> Compound Frames Page</title>
</head> Default message
<frameset rows=“120,*”> </p>
<frame src=“banner_file.html” </noframes>
name”banner”>
<frameset cols=“120,*”>
</frameset>
<frame src=“links_file.html” name=“links”> </frameset>
<frame src=“content_file.html”
name=“content”>
</head>
Cont…

Banner File

Links
File Contents File
 Cont…
<HEAD>
<FRAMESET ROWS="25%,50%,25%”
<FRAME SRC="">
<FRAMESET COLS="25%,*">
<FRAME SRC="">
<FRAME SRC="">
</FRAMESET>
<FRAME SRC="">
</FRAMESET>
</HEAD>
95
96
 Frame Formatting
• Example:

<frameset rows=“20%, *, 20%”>

<frame src=“header.html” noresize
scrolling=no>
<frame src=“body.html”>
<frame src=“navigationbar.html” noresize
scrolling=no>
</frameset>
Generic Frame Formula
• The <FRAME> tag has six associated attributes: SRC,
NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING, and
NORESIZE. Here's a complete generic FRAME:
• <FRAME SRC="url" NAME="window_name"
SCROLLING=YES|NO|AUTO MARGINWIDTH="value"
MARGINHEIGHT="value"
NORESIZE>
 What will be the Output?
<FRAMESET ROWS="*, 2*, *" COLS="2*, *">
<FRAME SRC=“”>
<FRAME SRC=“”>
<FRAME SRC=“”>
<FRAME SRC=“”>
<FRAME SRC=“”>
<FRAME SRC=“”>
</FRAMESET>

99
 Targets
 When you use links for use in a frames environment you will
need to specify an additional attribute called TARGET.
 The TARGET attribute uses the NAME attribute of the FRAME
element.
 If we were to place a link in doc1.html that linked to doc3.html
and we wanted doc3.html to be displayed in the right
windowpane; the HTML code would appear in doc1.html as
follows:

<A HREF=“doc3.html” TARGET=“right_pane”>Link to

Document 3 </A>
 Special Targets
• There are 4 special target names that cannot be assigned by the NAME attribute of
the FRAME tag.
1. TARGET=“_top” : This loads the linked document into the full browser window with
the URL specified by the HREF attribute. All frames disappear, leaving the new linked
page to occupy the entire window. The back is turned on.
2. TARGET=“_blank” : Opens an unnamed new browser window and loads the
document specified in the URL attribute into the new window (and your old window
stays open). The back is turned off. Other windows remains on.

3. TARGET=“_self” : Loads the document in the same window where the anchor was
{Clicked}. This is the default setting for linking elements.

4. TARGET=“_parent” : the _parent frame is a prior frameset that the current frameset
was “spawned” from. If there isn’t one it is the browser window. The document is
loaded into the area occupied by the columns or rows frameset containing the frame
that contains the link. The back is turned on. All windows disappear.
If a frame contains the following link, then clicking the link
launches a new, unnamed browser display window that contains
the content defined in stuff.HTM. This can be a simple HTML
document, or an entirely new FRAMESET definition.
1. <A HREF="stuff.html" TARGET="_blank">
If a frame contains the following link, then clicking the link will
simply cause the frame which contains the link to clear, and its
content will be replaced with whatever is in stuff.htm.
2. <A HREF="stuff.html" TARGET="_self">
If a frame contains the following link, the frameset that contains
the frame that contains this link will be replaced by stuff.HTM.
3. <A HREF="stuff.html" TARGET="_parent">
Finally, if a frame contains the following link, clicking the link
replaces the entire browser window with the contents of
stuff.HTM.
4. <A HREF="stuff.html" TARGET="_top">
 Targeting links to frames
The TARGET attribute allows you to specify the frame into which a page is to be
loaded into in a frames setting.

<A HREF=“chap1.html” TARGET=“_self”> [Chapter 1]</A>

<A HREF=“chap1.html” TARGET=“_parent”> [Chapter 2]</A>

Parent window
The TARGET attribute allows you to specify the frame into which a page is to be
loaded into in a frames setting.

<A HREF=“chap1.html” TARGET=“bottom”> [Chapter 1]</A>

<A HREF=“chap2.html” TARGET=“bottom”> [Chapter 2]</A>
<A HREF=“chap3.html” TARGET=“bottom”> [Chapter 3]</A>

chap1.html Learning HTML

[Chapter 1][Chapter 2][Chapter 3]

chap2.html

chap3.html
Forms
• Forms add the ability to web pages to not only provide the person
viewing the document with dynamic information but also to obtain
information from the person viewing it, and process the information.
• To insert a form we use the <FORM></FORM> tags. The rest of the
form elements must be inserted in between the form tags.
<HTML> <HEAD>
<TITLE> Sample Form</TITLE>
</HEAD>
<BODY BGCOLOR=“FFFFFF”>
<FORM ACTION = “”>
<P> First Name: <INPUT TYPE=“TEXT” NAME=“fname” MAXLENGTH=“50”> </P>
<P> <INPUT TYPE=“SUBMIT” NAME=“fsubmit1” VALUE=“Send Info”> </P>
</FORM>
</BODY> </HTML>
<FORM> element attributes
 ACTION: is the URL of the CGI (Common Gateway Interface) program
that is going to accept the data from the form, process it, and send a
response back to the browser.
 METHOD: GET (default) or POST specifies which HTTP method will be
used to send the form’s contents to the web server. The CGI
application should be written to accept the data from either method.
 NAME: is a form name used by VBScript or
JavaScripts.
 TARGET: is the target frame where the response page will show up.
 Form Elements
 Form elements have properties: Text boxes, Password boxes,
Checkboxes, Option(Radio) buttons, Submit, Reset, File, Hidden and
Image.
 The properties are specified in the TYPE Attribute of the HTML element
<INPUT></INPUT>.
 Form Elements
<INPUT> Element’s Properties
TYPE= Type of INPUT entry field.
NAME = Variable name passed to CGI application
VALUE= The data associated with the variable
name to be passed to the CGI application
CHECKED= Button/box checked
SIZE= Number of visible characters in text field
MAXLENGHT= Maximum number of characters
accepted.
 Text Box
 Text boxes: Used to provide input fields for text, phone numbers, dates, etc.
<INPUT TYPE= " TEXT " >
Browser will display
Textboxes use the following attributes:
 TYPE: text.
 SIZE: determines the size of the textbox in characters. Default=20 characters.
 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.
Example on Text Box
<TITLE>Form_Text_Type</TITLE>
</HEAD> <BODY>
<h1> <font color=blue>Please enter the following bioData</font></h1>
<FORM name="fome1" Method= " get " Action= " URL " >
First Name: <INPUT TYPE="TEXT" NAME="FName"
SIZE="15" MAXLENGTH="25"><BR>
Last Name: <INPUT TYPE="TEXT" NAME="LName"
SIZE="15" MAXLENGTH="25"><BR>
Nationality: <INPUT TYPE="TEXT" NAME="Country"
SIZE="25" MAXLENGTH="25"><BR>
The Phone Number: <INPUT TYPE="TEXT" NAME="Phone"
SIZE="15" MAXLENGTH="12"><BR>
</FORM> </BODY> </HTML>
Output
 Password
 Password: Used to allow entry of passwords.
<INPUT TYPE= " PASSWORD " >
Browser will display
Text typed in a password box is starred out in the browser
display.
Password boxes use the following attributes:
 TYPE: password.
 SIZE: determines the size of the textbox in characters.
 MAXLENGHT: determines the maximum size of the password in characters.
 NAME: is the name of the variable to be sent to the CGI application.
 VALUE: is usually blank.
 Example on Password Box
<HTML><HEAD>
<TITLE>Form_Password_Type</TITLE></HEAD>
<BODY>
<h1> <font color=red>To Access, Please
enter:</font></h1>
<FORM name="fome2" Action="url" method="get">
User Name: <INPUT TYPE="TEXT" Name="FName"
SIZE="15" MAXLENGTH="25"><BR>
Password: <INPUT TYPE="PASSWORD"
NAME="PWord" value="" SIZE="15”
MAXLENGTH="25"><BR>
</FORM></BODY> </HTML>
Output
 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.
<INPUT TYPE=“CHECKBOX”>
Browser will display

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
CGI application.
 VALUE: is usually set to a value.
example
<HTML> <HEAD><TITLE>CheckBoxType</TITLE> </HEAD>
<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>
jordan:<INPUT TYPE="CheckBox" Name="country" CHECKED><BR>
Yemen<INPUT TYPE="CheckBox" Name="country"><BR>
Qatar:<INPUT TYPE="CheckBox" Name="country"><BR> <BR>
<font color=blue>Select Language:</font><BR>
Arabic:<INPUT TYPE="CheckBox" Name="language" CHECKED><BR>
English:<INPUT TYPE="CheckBox" Name="language"><BR>
French:<INPUT TYPE="CheckBox" Name="language"> <BR></FORM>
</BODY></HTML>
output
Radio Button
 Radio Button: Radio buttons allow the users to select
only one option.
<INPUT TYPE=“RADIO”>
Browser will display

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 name of the variable to be sent to the
CGI application.
 VALUE: usually has a set value.
 example
<HTML> <HEAD><TITLE>CheckBoxType</TITLE> </HEAD>
<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>
Ethiopia:<INPUT TYPE= "RADIO" Name="country" CHECKED><BR>
kenya<INPUT TYPE="RADIO " Name="country"><BR>
sudan:<INPUT TYPE="RADIO" Name="country"><BR> <BR>
<font color=blue>Select Language:</font><BR>
Ahmaric:<INPUT TYPE="RADIO" Name="language" CHECKED><BR>
English:<INPUT TYPE=" RADIO " Name="language"><BR>
Afan oromo:<INPUT TYPE=" RADIO " Name="language"> <BR></FORM>
</BODY></HTML>
output
Write source code the following output
 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.
eample
<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>
output
Submit Button
 Submit: Every set of Form tags requires a Submit button. This is the element
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.
Example
<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>
output
 Reset Button
• Reset: 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”>

• Browser will display

• Reset buttons have the following attributes:
• TYPE: reset.
• VALUE: determines the text label on the button, usually Reset.
 Image Submit Button
 Image Submit Button: Allows you to substitute an image for the standard
submit button.

<INPUT TYPE=“IMAGE” SRC=“jordan.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.
 File
• File Upload: You can use a file upload to allow surfers to upload files to your web server.
• <INPUT TYPE=“FILE”>
• Browser will display

• 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.
 Other Elements used in Forms
 <TEXTAREA></TEXTAREA>: is an element that allows for free form text
entry.

Browser will display

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.
Example
<BODY bgcolor=lightblue>
<form>
<TEXTAREA COLS=40 ROWS=20 Name="comments" >
From observing the apathy of those
about me during flag raising I
concluded that patriotism if not
actually on the decline is at least
in a state of dormancy.
Written by Khaled Al-Fagih
</TEXTAREA>:
</form>
</BODY>
 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.
 Example
<BODY bgcolor=lightblue>
<form>
Select the cities you have visited:
<SELECT name=“list” size=5>
<option> London</option>
<option> Tokyo</option>
<option> Paris</option>
<option> New York</option>
<option> LA</option>
<option> KL</option>
</SELECT>
</form>
 Cont…
 Drop Down List:

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

the CGI application.
 Size: 1.
 Cont…
 List Box:

 Name: is the name of the variable to be sent to the CGI application.

 SIZE: is greater than one.
 Cont…
 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.
 Example
</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>