IPchapter 2

Chapter II
Static HTML (Hyper Text Markup Language) (2 weeks)
2.1 HTML document structure and html tag format
2.1.1 What is an HTML File?

 HTML stands for Hyper Text Markup Language
 HTML is based on a simple text file containing small markup tags
 The markup tags tell the Web browser how to display the page
 An HTML file must have either an htm or html file extension
 An HTML file can be created using a simple text editor
2.1.2 Creating a basic web page

The structure of a Web page is made up of three major components:
 Text content - the actual headers and paragraphs that appear on the page.
 References – references to more complex content like links, images, and

perhaps Flash animations.
 Markup instructions - that describe how the content and references should
be displayed.
A basic HTML code should have at lease the following structure and Html tags.
<html>
<head>
<title>Text appears as page heading on the browser</title>
</head>
<body>
Text appears as content of my homepage.
<b>This text is bold</b>
</body>
</html>
15
HTML tags Explained
<html> - It tells the browser that this is the start of an HTML document.
The last tag in the document is </html>. This tag tells the
browser that this is the end of the HTML document.
<head> - It is the header information. Header information is not displayed
in the browser window.
<title> - It is the title of web page document. The title is displayed in your
browser's caption.
<body> - Data enclosed will be displayed in your browser.
The text between the <b> and </b> tags will be displayed in a bold font.
Note on HTML Editors:

You can easily edit HTML files using a WYSIWYG (what you see is what you get)
editor like FrontPage, Dreamweaver, Claris Home Page, or Adobe PageMill
instead of writing your markup tags in a plain text file. But to be a skillful Web
developer, it is strongly recommend that you use a plain text editor such as
notepad to learn your primer HTML.
2.1.3 Markup: Elements, Attributes, and Values
HTML has three major types of markup: elements, attributes, and values. HTML
documents are text files made up of HTML elements. HTML elements are
defined using HTML tags.
2.1.3.1 HTML Tags

 HTML tags are used to mark-up HTML elements
 HTML tags are surrounded by the two characters < and >
 The surrounding characters are called angle brackets
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag & the second is the end tag
 The text between the start and end tags is the element content
 HTML tags are not case sensitive: <b> & <B> means the same. However
the W3C recommends lowercase tags in their HTML 4 recommendation, and
XHTML (the next generation HTML) demands lowercase tags.
16
2.1.3.2 HTML Elements
Elements identify and structure the different parts of a Web page. Some elements
have one or more attributes, which further describe the purpose and content, if
any, of the element. An element consists of an opening tag, the content, and a
closing tag.
 This is an HTML element:
<b>This text is bold</b>
 The HTML element starts with a start tag: <b>

 The content of the HTML element is:
This text is bold
 The HTML element ends with an end tag: </b>
 The purpose of the <b> tag is to define an HTML element to be displayed as
bold.
2.1.3.3 Tag attributes and values

Tags can have one or more attributes. Attributes are not data but contain
information about the data in the document. The <body> tag defines the body
element of your HTML page. With an added bgcolor attribute, you can tell the
browser that the background color of your page should be red:
 <body bgcolor="red">.
The <body> tag has seven attributes: bgcolor, text, link, vlink, alink, background,
margins. E.g.
 <body bgcolor="#ffffff", background= "bg.gif",text="#000000",
link="#3399ff",vlink="#9966ff",alink="#000000", bgproperties="fixed",
topmargin="10", marginheight="10">
This tag defines an HTML table: <table>. With an added border attribute, you can
tell the browser that the table should have no borders:
 <table border="0">
 Attributes always come in name/value pairs - name="value".

 Attributes are always added to the start tag of an HTML element.
Attribute values should always be enclosed in quotes. Double style quotes are
the most common, but single style quotes are also allowed.
 Quote Styles, "red" or 'red'?
In some rare situations, like when the attribute value itself contains quotes, it is
necessary to use single quotes: name='John "ShotGun" Nelson'
17
2.1.3.4 Basic HTML Tags
The most important tags in HTML are tags that define headings, paragraphs and
line breaks.
2.1.3.4.1 Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest
heading. <h6> defines the smallest heading.
<h1>This is a heading</h1>
<h6>This is a heading</h6>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
HTML automatically adds an extra blank line before & after a heading.
2.1.3.4.2 Paragraphs
Paragraphs are defined with the <p> tag.
<p>This is a paragraph</p>
HTML automatically adds an extra blank line before & after a paragraph.
2.1.3.4.3 Line Breaks

The <br> tag is used when you want to end a line, but not to start a new
paragraph. The <br> tag forces a line break.
<p>This <br> is a para<br>graph with line breaks</p>
The <br> tag is an empty tag. It has no closing tag.
2.1.3.4.4 Comments in HTML

The comment tag is used to insert a comment in the HTML source code. A
comment will be ignored by the browser. You can use comments to explain your
code, which can help you when you edit the source code at a later date.

 An exclamation point is placed after the opening bracket.
18
Basic Notes - Useful Tips
 Never try to format the text in your editor by adding empty lines and spaces
to the text. Any numbers of spaces count as one.
 Use <br> to insert blank lines instead of empty paragraphs <p>.
 Use horizontal <hr> tag, to separate sections by a horizontal line.
2.2 Basic HTML Formatting

There are a number of formatting output for changing the font, size, and color like
bold or italic text.
The following are some of the examples that you can try out yourself:
2.2.1 Text Formatting Tags

Tag Description
<b> Defines bold text
<i> Formats italic text
<u> Formats underlined text
<em> Formats emphasized text, logical tag for italics
<strong> Formats strong text, logical tag for bold
<big> Formats big text in respect to the surrounding text, has cumulative
effect
<small> Formats small text in respect to the surrounding text, has cumulative
effect
<sub> Formats subscripted text, lowered slightly relative to the main body
text
<sup> Formats superscripted text , raised slightly relative to the main body
text
<ins> Formats inserted text, marks (underlines) newly inserted text
<del> Formats deleted text, marks (strikes out) deleted text
<Center> Aligns text to centre
2.2.2 "Computer Output" Tags

Tag Description
<code> Formats computer code text with monospaced font in languages
like C or Perl
<kbd> Formats keyboard instruction text
<samp> For displaying sample text
<tt> Formats teletype text, monospaced text to display computer
codes, URLs that you wish to offset from the main text
<var> Formats a variable
<pre> Formats preformatted text, maintain the original line breaks
and spacing & is ideal for computer code examples
19
2.2.3 Citations, Quotations, and Definition Tags
Tag Description
<abbr> Formats an abbreviation, to add meaning shown as a tooltip
<acronym> Formats an acronym, to add meaning shown as a tooltip
<address> Formats an address element, logical tag for making text italic
used to format the Web page designer's email address
<bdo> Formats the text direction
<blockquote> Formats a long quotation, indents from both sides
<q> Formats a short quotation, quotes inline text
<cite> Formats a citation
<dfn> Formats a definition term
2.2.4 HTML Character Entities

Some characters like the < character that defines the start of an HTML tag, have a
special meaning in HTML, and therefore cannot be used in the text.
To display a less than sign (<) in HTML, we have to use a character entity.
2.2.4.1 Character Entities
A character entity has three parts:

 An ampersand (&); an entity name (unique identifying words) or a # sign
and an entity number; a semicolon (;).

To display a less than sign in an HTML document we must write:
 < or <
The advantage of using a name instead of a number is that a name is easier to

remember. The disadvantage is that not all browsers support the newest entity
names.
 Note that the entities are case sensitive.
2.2.4.2 Non-breaking Space

The most common character entity in HTML is the non-breaking space. Normally
HTML will truncate spaces in your text. If you write 10 spaces in your text HTML
will remove 9 of them. To add spaces to your text, use the & nbsp; character
entity.
20
2.2.4.3 The Most Common Character Entities:
Entity
Result Description Entity Name
Number
non-breaking space
< less than < <
> greater than > >
& ampersand & &
" quotation mark " "
' apostrophe ' '
2.2.4.4 Other Commonly Used Character Entities:

Result Description Entity Name Entity Number
½ fraction one half ½ ½
£ pound £ £
© copyright © ©
® registered trademark ® ®
∈ element of ∈ &8712;
√ square root √ √
→ rightwards arrow → →
± plus-or-minus ± ±
2.3 HTML Links (Hyper-Links)

HTML uses a hyperlink to link to another document on the Web. The link structure
is discussed below:
2.3.1 Linking to other WebPages

The Anchor Tag and the href Attribute
a stands for Anchor, which means Link. HTML uses the anchor <a> tag to create a
link to another document. This is the tag what makes hypertext "hyper".
Href means a hyper reference to anchor or document.

An anchor can point to any resource on the Web: an HTML page, an image, a
sound file, a movie, etc.
The syntax of creating an anchor:
<a href="url">Text to be displayed on browser</a>
The <a> tag is used to create an anchor to link from; the href attribute is used to
address the document to link to, and the words between the open and close of the
anchor tag will be displayed as a hyperlink colored blue and underlined.
This anchor defines a link to AAU website:
21
<a href="http://www.aau.edu.int/">Link to AAU.</a>
The line above will look like as follows in a browser:

Link to AAU.
When you hover the mouse on the linked text, your cursor will turn into a hand
and the URL of the page will appear in your browser’s status bar (at the bottom of
the window).
The Target Attribute
With the target attribute, you can define where the linked document will be
opened. The line below will open the document in a new browser window:
<a href="http://www.aau.edu.et/"target="_blank">Visit AAU!</a >
2.3.2 Linking between your own Pages/Section

There is no need to specify a complete internet address or URL when you create a
link from one page to another page on the same folder/computer. If the two pages
are in the same directory, simply use the file name. E.g.
<a href="index.html" Click here to go to Home Page</a>
Links can be Relative or Absolute. Absolute links include the full URL and
relative links only link a page from the same site by just linking to the directory
and/or file name. If the filename is on the same root directory but different
subfolder, just add the name of folder as follows:
<a href="departments/contacts.html" Contact address</a>
Note that forward slash (/) is always used to separate directory folders in HTML.
Don't use the backslash (\) normally used in windows.
The Anchor Tag and the Name Attribute
The name attribute is used to create a named anchor. When using named anchors
we can create links that can jump directly into a specific section on a page where
the tag occurs, instead of letting the user scroll around to find what he/she is
looking for.
Below is the syntax of a named anchor:
<a name="label"></a>
As you can see the </a> tag must be included, but no text between <a> and
</a> is necessary.
The name attribute is used to create a named anchor. The name of the anchor can
be any text you care to use.
The line below defines a named anchor:
<a name="tips">Useful Tips Section</a>
22
To link to the named anchor just created within the same page, include the anchor
name preceded by #.
A hyperlink to the Useful Tips Section from WITHIN the file "IPCourse.html" will
look like this:
<a href="#tips">Jump to the Useful Tips Section</a>
It is also possible to link to a named anchor on another page. To link directly to

the "tips" section created above, add a # sign and the name of the anchor to the
end of a URL, like this:
<a href="http://www.aau.edu.et/IPCourse.html#tips">
Jump to the Useful Tips Section</a >

 Always add a trailing slash to subfolder references. If you link like this:
href="http://www.aau.edu.et/html", you will generate two HTTP
requests to the server, because the server will add a slash to the address
and create a new request like this:
href="http://www.aau.edu.et/html/"
 <a href> is what you click and <a name> is where you go when you click.
 Named anchors are often used to create "table of contents" at the beginning
of a large document. Each chapter within the document is given a named
anchor, and links to each of these anchors are put at the top of the
document.
 If a browser cannot find a named anchor that has been specified, it goes to
the top of the document. No error occurs.
 Linking to email addresses use the code:
<a href="mailto:your_email_name@domain_name.com"> mail me</a>
23
2.4 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 disadvantages of using frames are:
 The web developer must keep track of more HTML documents

 It is difficult to print the entire page
Frame Tags
Tag Description
<frameset> Defines a set of frames
<frame> Defines a sub window (a frame)
<noframes> Defines a noframe section for browsers that do not handle
frames
<iframe> Defines an inline sub window (frame)
The Frameset Tag
 The <frameset> defines how to divide the window into frames
 Each frameset defines a set of rows or columns

 The values of the rows/cols indicate the amount of screen area each
row/column will occupy
 A frameset document has no content but tells the browser which other pages
to load and how to arrange them in the browser window.
The Frame Tag

 The <frame> tag defines what HTML document to put into each frame
In the example below we have a frameset with two rows. The first row is set to
25% of the width of the browser window. The second row is set to whatever space
is available in the window. The HTML document "frame_a.htm" is put into the first
row, and the HTML document "frame_b.htm" is put into the second row:
<frameset rows="25%, *">

<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
24
 If a frame has visible borders, the user can resize it by dragging the border.
To prevent from being resized, add noresize to the <frame> tag.

 You can use both the cols and rows attribute in a single frameset to have
equal number of horizontal and vertical layout. To have a different number
of columns or rows use nested framesets.
 The <frameset> tag should replace the <body> tag and no tags that would
be contained in a <body> tag can be within the <frameset> tag. They only
contain references to individual parts.
 Enclose with <noframes> </noframes> tag an alternative text or URL, plus
that reminds users that you have used frames and that their browser do not
support frames.
 Other attributes for <frameset> tag include border="0"; for <frame>
scrolling="no", frameborder="0", marginheight="1", marginwidth="1",
noresize.
2.5 HTML Tables

A table is a section of information broken up into columns and /or rows of blocks
called cells. Tables are defined with the <table> tag. A table is divided into rows
with the <tr> tag, and each row is divided into data cells with the <td> tag. The
letters td stands for "table data," which is the content of a data cell. A data cell
can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
How it looks in a browser:
25
Tables and the Border Attribute
If you do not specify a border attribute the table will be displayed without any
borders. Sometimes this can be useful, but most of the time, you want the
borders to show. To display a table with borders, you will have to use the border
attribute <table border="1">.
Headings in a Table
The <th> tag stands for table header. It is an optional tag used instead of the
<td> tag. By default, the content in the cell is bolded & centered.
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
</tr>
</table>
Table Tags
Tag Description
<table> Defines a table
<caption> Defines a table caption/Title
<tr> Defines a table row
<th> Defines a table header
<td> Defines a table cell
Tabel Attributes
Border Turns on all the internal and external borders.
Frame Defines external borders like box, above, hsides, lhs, etc.
Rules Defines internal borders like all, none, groups rows, etc.
cellpadding Defines space between the content & the edges of the cell.
26
cellspacing Defines spaces between cells
Align Defines the position of the table relative to the
browser window like center, right, and left.
bgcolor To change the background color of the whole table
background To add a background image
width/height Defines the relative/absolute size of your table
rowspan/colspan To create a cell that spans multiple rows or columns,
attributes to <td> or <th>
Most of the table attributes are shown as follows:
<table border="10" width="10%" height="10%" frame="box" rules="all"

cellpadding="15" cellspacing="10" align="left" bgcolor="#669999">
<caption>The title of the table</caption>
<tr>
<th colspan="2">SIST STUDENTS</th>
</tr>
<tr>
<th rowspan="2">Extension</th>
<th>70</th>
</tr>
<tr>
<td>55</td>
</tr>
</table>
Caption
Width=”10%”
Border=”10”
Colspan=”2” Frame=”box”
Rules=”all”
Height=”10%” Cellpadding=”15”
Cellspacing=”10”
Rowspan=”2”
27
 Table cells with no content are not displayed very well in most browsers. If
you want to include a blank cell with no content, then type the code for a
non-breaking-space (&nbsp) between the opening and closing tags
<td> </td>, and the data cell will appear blank.
 If a text in a cell is too long, you can force it to break using <br>
2.6 HTML Lists

HTML supports three types of lists: ordered, unordered and definition lists.
2.6.1 Ordered Lists

An ordered list is a list in which each item in the list is preceded by numbers
(Arabic, alphabet or roman).
 An ordered list starts with the <ol> tag. Each list item starts with the <li>
tag.
 The default type of ordered lists use Arabic numbers. The Type attribute
has values: a-lowercase alphabet, A-uppercase alphabet, i-lowercase
Roman, I-uppercase Roman and 1-Arabic numbers.
 The Start attribute specify the starting number or letter for an ordered list.
<ol Type="a" Start="3" >
<li>Introduction</li>
<li>Basic HTML</li>
<li>Databases</li>
</ol>
Here is how it looks in a browser:
 Inside a list item you can put paragraphs, line breaks, images, links, other
lists, etc.
28
2.6.2 Unordered Lists
Unordered list is a list in which each item in the list is preceded by bullets.
 An unordered list starts with the <ul> tag. Each list item starts with the
<li> tag.
 The default bullets are typically small black circles (disc). The Type attribute
has values: disc, circle, and square.
<ul type= "square">
<li>Ordered List</li>
<li>Unordered List</li>
<li>Definition List</li>
</ul>
 Inside a list item you can put paragraphs, line breaks, images, links, other
lists, etc.
2.6.3 Definition Lists

A definition list is not a list of items. This is a list of terms and explanation of the
terms.
 A definition list starts with the <dl> tag. Each definition-list term starts
with the <dt> & the definition-list definition starts with the <dd> tag.
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Here is how it looks in a browser:
 Inside a definition-list definition (the <dd> tag) you can put paragraphs, line
breaks, images, links, other lists, etc.
List Tags
Tag Description
29
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines a definition term
<dd> Defines a definition description
30
2.7 HTML Forms and Input
Forms are used to collect information. To get your identification card, you fill out
your name, address, department, etc. Similarly, HTML Forms are used to select
different kinds of user input.
2.7.1 Forms
A form is an area that can contain form elements.
Form elements are elements that allow the user to enter information in a form
(like text fields, drop-down menus, radio buttons, checkboxes, etc.).
A form is defined with the <form> tag.
<form>
<input>
<input>
</form>
2.7.2 Input
The most used form tag is the <input> tag. The type of input is specified with the
type attribute. The most commonly used input types are explained below.
2.7.2.1 Text Fields

Text field is rectangular box used when you want the user to type letters,
numbers, etc. in a form. Attributes included are: name-identifies the control, size-
specifies length, maxlength-specifies maximum number of characters, value-
defines the default text.
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname"><br>
Password: <input type="password" name="password">
</form>
 The other type of textfield is type="password" for passwords.
 Note that the form itself is not visible. Also note that in most browsers, the
width of the text field is 20 characters by default.
 To enter more than one line text, use a <textarea> tag.
2.7.2.2 Radio Buttons

Radio Buttons are small round buttons used when you want the user to select one
of a limited number of choices such as Yes/No type choices.
31
<form>
<input type="radio" name="sex" value="male"> Male <br>
<input type="radio" name="sex" value="female"> Female <br>
</form>
 Note that the name attribute contains the same value for all options to link
all controls together when processed.

 Use the attribute checked=”checked” to one of the radio buttons to select it
by default.
2.7.2.3 Checkboxes
Checkboxes are small rectangular boxes used when you want the user to select
one or more options of a limited number of choices.
<form>
<input type="checkbox" name="service" value=”cafe”> Cafeteria<br>
<input type="checkbox" name="service" value=”lib”> Library <br>
</form>
 Use the attribute checked=”checked” to select one of them by default.

 You can also use the select menu instead of checkbox. The format is:
<select name=”color” size =”3”>
<option value=”Red”>Red</option>
<option value=”Cyan”>Cyan</option>
<option value=”Green”>Green</option>
<option value=”Blue”>Blue</option>
</select>
2.7.2.4 File Uploads

File upload is important to send a supporting file such as photo, CV, etc. along the
filled data. This is accomplished with the input type=”file”. It tells the browser to
expect a file input form the user and provide you an additional button to browse
the location of the file.
<form>
<input type="file" name="MyPhoto.jpg">
</form>
2.7.2.5 Buttons
Buttons enable users to interact with a form. When you click on the "Submit"
button, you are telling the browser you have finished filling out a form and the
32
content of the form is sent to another file or for further processing. The form's
action attribute defines the name of the file to send the content to. The file defined
in the action attribute usually does something with the received input.
<form name="input" action="html_form_action.asp" method="get">

User Name: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
If you type some characters in the text field above, and click the "Submit" button,
you will send your input to a page called "html_form_action.asp". That page will
show you the received input.
Form Tags
Tag Description
<form> Defines a form for user input
<input> Defines an input field
<textarea> Defines a text-area (a multi-line text input control)
<label> Defines a label to a control
<fieldset> Defines a fieldset
<legend> Defines a caption for a fieldset
<select> Defines a selectable list (a drop-down box)
<optgroup> Defines an option group
<option> Defines an option in the drop-down box
<button> Defines a push button
33
2.8 HTML Images
It is easy to add images anywhere in your Webpage by using the <img> tag
where <img> is short for “image”. The <img> tag is empty, which means that it
contains attributes only and it has no closing tag.
2.8.1 The Src Attribute

To display an image on a page, you need to use the src attribute. Src stands for
"source". The value of the src attribute is the URL (absolute/relative address) of
the image you want to display on your page.
The syntax of defining an image:
<img src="url">
E.g.
<img src=”http://www.aau.edu.et/images/boat.gif”> - absolute address-URL
<img src=”boat.gif”> - relative address- on the same directory with the page
<img src=”../boat.gif”> - relative address – one directory higher
2.8.2 The Alt Attribute

The alt attribute is used to define an "alternate text" for an image. Images may
not be visible on the browsers of users. Some of the reasons are:
 Images have turned of in their browsers
 They are using text-only browsers such as hand-held devices

 The image doesn’t appear due to too much traffic or when stop button is
pressed before it fully loaded.
<img src="boat.gif" alt="Big Boat">
The "alt" attribute tells the reader what he or she is missing on a page if the
browser can't load images. The browser will then display the alternate text instead
of the image. It is a good practice to include the "alt" attribute for each image on a
page, to improve the display and usefulness of your document for people who
have text-only browsers.
Image Tags
Tag Description
<img> Defines an image
<map> Defines an image map
<area> Defines an area inside an image map
34
2.8.3 Linking Sections of an image
You can link sections of an image as opposed to the entire image. Suppose you
have the Ethiopian map. You can link each region with its own page.
Image map example:
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
Using the attribute “usemap” shown above, you have to tell the browser that the
image will be used as an image map.
Next you have to name the map & define each spot using coordinates as follows:
<map name="planetmap">
<area shape="circle" coords="90,90,30" alt="Mercury" href="sun.htm">
<area shape="rect" coords="0,0,82,80" alt="Sun" href="mercury.htm">
<area shape="circle" coords="100,0,50" alt="Venus" href="venus.htm">
</map>
The coordinates define the boundaries of the spot as follows:
 rect x1,y1,x2,y2
 poly x1,y1,x2,y2,x3,y3…
 circle x,y,r
Where x, y, and r stands for horizontal, vertical and radius (circle) respectively.
35
2.9 HTML Fonts
The <font> tag in HTML is not advised. It is supposed to be removed in a future
version of HTML. Even if a lot of people are using it, you should try to avoid it, and
use styles instead.
2.9.1 The HTML <font> Tag

With HTML code like this, you can specify both the size and the type of the
browser output:
<font size="2" face="Verdana">
This is a paragraph.
</font>
2.9.2 Font Attributes

Attribute Example Purpose
size="number" size="2" Defines the font size
size="+number" size="+1" Increases the font size
size="-number" size="-1" Decreases the font size
face="face-name" face="Times" Defines the font-name
color="color-value" color="#eeff00" Defines the font color
color="color-name" color="red" Defines the font color
36
2.10 HTML Styles
With HTML 4.0 all formatting can be moved out of the HTML document and into a
separate style sheet.
How to Use Styles
When a browser reads a style sheet, it will format the document according to it.
There are three ways of inserting a style sheet:
2.10.1 External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an
external style sheet, you can change the look of an entire Web site by changing
one file. Each page must link to the style sheet using the <link> tag. The <link>
tag goes inside the head section.
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
2.10.2 Internal Style Sheet

An internal style sheet should be used when a single document has a unique style.
You define internal styles in the head section with the <style> tag.
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
2.10.3 Inline Styles

An inline style should be used when a unique style is to be applied to a single
occurrence of an element.
To use inline styles you use the style attribute with the relevant tags. The style
attribute can contain any CSS property. The example shows how to change the
color and the left margin of a paragraph:
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
37
2.11 HTML Head
The head element contains general information, also called meta-information,
about a document. Meta means "information about". You can say that meta-
data means information about data or meta-information means information about
information.
Information Inside the Head Element
The elements inside the head element should not be displayed by a browser.
According to the HTML standard, only a few tags are legal inside the head section.
These are: <base>, <link>, <meta>, <title>, <style>, and <script>.
If you put an HTML element like <h1> or <p> inside a head element, most
browsers will display it, even if it is illegal.
Head Tags
Tag Description
<head> Defines information about the document
<title> Defines the document title
<base> Defines a base URL for all the links on a page
<link> Defines a resource reference
<meta> Defines meta information
<!DOCTYPE> Defines the document type. This tag goes before the <html>
start tag.
2.11.1 The Meta Element

HTML includes Meta element that goes inside the head element. The purpose of
the Meta element is to provide meta-information about the document.
Most often the Meta element is used to provide information that is relevant to
browsers or search engines like describing the content of your document.
Some search engines on the WWW will use the name and content attributes of
the Meta tag to index your pages.
This Meta element defines a description of your page:
<meta name="description" content="Free Web tutorials: X/HTML, CSS and XML">
This meta element defines keywords for your page:
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript">
The intention of the name and content attributes is to describe the content of a
page. However, since too many webmasters have used Meta tags for spamming,
like repeating keywords to give pages a higher ranking, some search engines have
stopped using them entirely.
38
Unknown Meta Attributes
Sometimes you will see Meta attributes that are unknown to you like this:
<meta name="security" content="low">
Then you just have to accept that this is something unique to the site or to the
author of the site, and that it has probably no relevance to you.
39
2.12 Browser Compatibility Issues
There are at least four popular browsers being used regularly on the internet.
Netscape and Internet Explorer are forever enhancing their products.
As the new versions become adapted, their older counterparts lose popularity. It
generally takes a year or more for the implementation of the new browser. By that
time there is yet another version. This is good for users, but difficult for designers
and webmasters.
While web pages will almost never appear EXACTLY the same in all browser
versions, good design can eliminate many viewing problems. While we try to make
everything as browser-neutral as possible, the truth is, tailoring a site for cross
browser compatibility is a pain.
In the early days of the Internet, many sites were advertising as "Best viewed with
Netscape" or "Best viewed with Internet Explorer" or the like.
These days, such labels seem to be rarer. And no wonder. Webmasters today put
too much amount of effort to promote their sites on the search engines and
elsewhere, and it's unlikely that they'll want to turn away any visitor just because
s/he uses a different browser.
Along with this principle of catering to the widest possible audience is the principle
of designing your page for compatibility with different browsers, operating systems
and hardware.
Next, we shall discuss compatibility issues. They are by no means exhaustive, but
they are at least starting points to designing a site that will be viewable by more
visitors.
2.12.1 Screen Resolution Issues

Today, the bulk web page visitors use a screen resolution of 800x600 and
1024x768 (with insignificant numbers using other resolutions).
If you design your site with fixed widths, you need to be aware of the above. For
example, if you design for the 1024x768 screen resolution, you will force almost
half your visitors to scroll their screens horizontally to see the entire page. They do
this by either designing with a fluid design, where the page automatically fits
whatever screen resolution the visitor uses, or by designing it for a worst case
screen resolution (either 800x600 or 640x480).
If fixed width is your choice, choose 800x600 display resolution. If, you feel that
you need a fixed canvas larger than 800x600, you can use a trick by putting
optional material (like advertisements) in the rightmost column of the web page.
This allows visitors who have smaller screens to ignore the rightmost column; they
can read the main content without having to scroll horizontally. If you use relative
widths with percentages like 100%, 80%, your page already caters to different
screen resolutions.
40
2.12.2 Color Limitations
It may or may not come as a surprise to you that a color code like "#F2C3BE"
results in different colors on different systems, depending on the number of colors
in your visitors' color palettes, their monitors, etc.
For example, if you choose a color that looks good on your 24-bit color system
("True Color" on Windows, "millions of colors" on Mac), and your visitor goes to
your site using a 256 color setting on his system, your color will be dithered to fit
into the more limited number of colors in his palette.
What looks to you like beautiful shades of colors may thus turn out to be ugly
combinations on a different system.
Of course, few people use 256 colors on their system anymore. As such, many
webmasters are abandoning the old technique of only using color combinations
that are multiples of the hexadecimal "33" (which are supposed to be safe to use
in that they display fairly similarly across the main platforms).
However, if you think that you can now use the next lowest denominator, the 16-
bit color setting ("High Color" on Windows, "thousands of colors" on Mac) safely,
think again. Contrary to what you might expect, the 16-bit color palette is not a
subset of the 24-bit color palette: apart from black and white, the colors in the two
palettes are not identical. If you design the color scheme of your site while
working from one palette, be sure to switch to the other color setting to make sure
that your color scheme blends well in the other setting as well.
2.12.3 Frames
Let‘s look at frames from two points of views: screen resolution and people who
browse your site using speech software.
One common complaint that people have against sites using frames is usually that
webmasters tend to forget that visitors don't have the same large screen
resolution that the designers have when they created the web page. Sites with
frames tend to provide a smaller area for people to view the main content of the
site, since the outer frames occupy some of the screen real estate as well. If the
web designer has not checked his site using a lower screen resolution like 800x600
and 640x460, and tested its usability with those lower resolutions, he may not be
aware that the site is difficult to use in such situations. Visitors may have to scroll
horizontally and vertically continually just to read the content. The situation is
worse if the designer removed the scroll bar (because it looked fine without it on
his high resolution screen), and visitors find they can no longer scroll
left/right/up/down to read the content.
If you use frames on your site - be sure to check how it appears under lower
resolutions. Try reading all the content on your site with those resolutions. If you
find that the site is inconvenient to use under those resolutions, you may need to
rethink of your design. Remember, your visitors don't have the same amount of
patience with your site that you have.
Framed pages also pose certain difficulties for people who have to use speech
41
software to access your pages, such as the visually impaired. Unlike people using a
visual web browser, the speech software reads every item on your pages & frames
serially. The person using such software does not have the ability to skip portions
of the page because it appears irrelevant. Neither is he able to match what is
displayed on one frame with the content appearing in another. Remember-
matching the content of one frame with another requires ability to see the layout.
It does not mean that this necessarily precludes the use of frames on your site.
What is needed, instead, if you think you really need to use frames on your site, is
to plan carefully so that both the user with a low screen resolution and the person
using speech software are able to access your site as you intend.
2.12.4 JavaScript Availability

Should you use JavaScript on your web page? While it is true that many people
use browsers like Internet Explorer, Netscape, Mozilla (and derivatives) and Opera,
all of which support it, it is also true that there is a small percentage of people who
use browsers that do not support JavaScript. This small percentage is not confined
to people using old browsers or those that have disabled JavaScript in their
browsers. People who use handheld devices may not be able to read the content
generated using JavaScript on your site.
A good preference is not to rely entirely on JavaScript to get the job done. That
is, whenever you use JavaScript in your pages, try to make the page work even if
JavaScript is not available. "Work", in this case, means that the visitor is still able
to navigate the site and read the material on the page.
42
2.13 Introduction to CSS
2.13.1 What is CSS?

There are two CSS recommendations from the W3C: CSS1 and CSS2. Most
modern browsers support a large part of CSS1 and some of CSS2. CSS2 is not
discussed here since it is for future use.
 CSS stands for Cascading Style Sheets
 Styles define how to display HTML elements

 Styles are normally stored in Style Sheets or CSS
 Styles were added to HTML 4.0 to solve a problem
 External Style Sheets can save you a lot of work
 Multiple style definitions will cascade into one
2.13.1.1 Styles Solve a Common Problem

HTML tags were originally designed to define the content of a document. They
were supposed to say "This is a header", "This is a paragraph", "This is a table", by
using tags like <h1>, <p>, <table>, and so on. The layout of the document was
supposed to be taken care of by the browser, without using any formatting tags.
As the two major browsers - Netscape and Internet Explorer - continued to add
new HTML tags and attributes (like the <font> tag and the color attribute) to the
original HTML specification, it became more and more difficult to create Web sites
where the content of HTML documents was clearly separated from the document's
presentation layout.
To solve this problem, the World Wide Web Consortium (W3C) - the non profit,
standard setting consortium responsible for standardizing HTML - created STYLES
in addition to HTML 4.0. Both Netscape 4.0 and Internet Explorer 4.0 support
Cascading Style Sheets.
2.13.1.2 Style Sheets Can Save a Lot of Work

Styles in HTML 4.0 define how HTML elements are displayed, just like the font tag
and the color attribute in HTML 3.2. Styles are normally saved in files external to
your HTML documents. External style sheets enable you to change the appearance
and layout of all the pages in your Web, just by editing a single CSS document. If
you have ever tried to change the font or color of all the headings in all your Web
pages, you will understand how CSS can save you a lot of work.
CSS is a breakthrough in Web design because it allows developers to control the
style and layout of multiple Web pages all at once. As a Web developer you can
define a style for each HTML element and apply it to as many Web pages as you
want. To make a global change, simply change the style, and all elements in the
Web are updated automatically.
43
2.13.1.3 Multiple Styles Will Cascade into One
Style Sheets allow style information to be specified in many ways. Styles can be
specified inside a single HTML element, or inside the <head> element of an HTML
page, or in an external CSS file. Even multiple external Style Sheets can be
referenced inside a single HTML document.
2.13.1.4 Cascading Order

What style will be used when there is more than one style specified for an HTML
element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual"
Style Sheet by the following rules, where number four has the highest priority:
1. Browser default
2. External Style Sheet
3. Internal Style Sheet (inside the <head> tag)
4. Inline Style (inside HTML element)
So, an inline style (inside an HTML element) has the highest priority, which means
that it will override every style declared inside the <head> tag, in an external
style sheet, and in a browser (a default value).
2.13.2 CSS Syntax

The CSS syntax is made up of two main parts: a selector and declaration.
Declaration has two parts: a property and a value:
Selector {property: value}
The selector is the link between the HTML document and the style sheet, and all
HTML element types are possible selectors. The selector is normally the HTML
element/tag you wish to format, the property is the attribute you wish to change,
and each property can take a value. The property and value are separated by a
colon and surrounded by curly braces:
body {color: black}
If the value is multiple words, put quotes around the value:

p {font-family: "Sans Serif"}
To make the style definitions more readable, you can describe one property on
each line, like this:
P
{
text-align: center
}
44
Grouping
To reduce the size of CSS, you can group selectors and/or declarations.
Separate each selector with a comma. In the example below we have grouped all
the header elements. Each header element will be green:
h1,h2,h3,h4,h5,h6
{
color: green
}
Separate each declaration with a semi-colon.

H1
{
font-weight: bold;
font-size: 18pt;
line-height: 18pt;
font-family: verdana;
}
2.13.2.1 The class Selector

In the CSS, a class selector is a name preceded by a full stop (.) With the class
selector you can define different styles for the same type of HTML element. Say
that you would like to have two types of paragraphs in your document: one right-
aligned paragraph, and one center-aligned paragraph. Here is how you can do it
with styles:
p.right {text-align: right}
p.center {text-align: center}
The Class attribute is a new attribute that has been added to HTML. You have to
use the class attribute in your HTML document:
<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>
Note: Only one class attribute can be specified per HTML element! The example
below is wrong:
<p class="right" class="center">
This is a paragraph.
</p>
You can also omit the tag name in the selector to define a style that will be used
by all HTML elements that have a certain class. In the example below, all HTML
elements with class="center" will be center-aligned:
.center {text-align: center}
45
In the code below both the h1 element and the p element have class="center".
This means that both elements will follow the rules in the ".center" selector:
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
2.13.2.2 The id Selector

The id selector is different from the class selector! While a class selector may apply
to SEVERAL elements on a page, an id selector always applies to only ONE
element. An ID selector is a name preceded by a hash character (#) immediately
followed by ID value. An ID attribute must be unique within the document. What
makes attributes of type ID special is that no two such attributes can have the
same value.
The style rule below will match a p element that has the id value "para1":
#para1
{
text-align: Center;
color: red
}
The style rule below will match the p element that has the id value "para1":
<P id=para1>Some text</p>
The style rule below will only match a p element that has an ID value of "para1".
p#para1
{
text-align: Center;
color: red
}
The rule above will not match the h2 element that has both an element type p and
id value "para1":
<h2 id = "para1">Some text</h2>
The difference between an ID and a class is that an ID can be used to identify
exactly one element, whereas a class can be used to identify more than one.
46
2.13.3 CSS Comments
You can insert comments in CSS to explain your code, which can help you when
you edit the source code at a later date. It will help you remember what
particularly complicated style rules are supposed to do. A comment will be ignored
by the browser. A CSS comment begins with "/*", and ends with "*/", like this:
/* This is a comment */
p
{
/* This is another comment */
color: black;
}
2.13.4 How to Insert a Style Sheet

When a browser reads a style sheet, it will format the document according to it.
There are three ways of inserting a style sheet:
2.13.4.1 External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an
external style sheet, you can change the look of an entire Web site by changing
one file. Each page must link to the style sheet using the <link> tag. The <link>
tag goes inside the head section:
<head>
<link rel="stylesheet" type="text/css
href="mystyle.css" />
</head>
The browser will read the style definitions from the file mystyle.css, and format the
document according to it.
An external style sheet can be written in any text editor. The file should not
contain any html tags. Your style sheet should be saved with a .css extension. An
example of a style sheet file is shown below:
hr {color: sienna}
body {background-image: url("images/back40.gif")}
Do NOT leave spaces between the property value and the units! If you use
"margin-left: 20 px" instead of "margin-left: 20px" it will only work properly in IE6
but it will not work in Mozilla or Netscape.
47
2.13.4.2 Internal Style Sheet
An internal style sheet should be used when a single document has a unique style.
You define internal styles in the head section by using the <style> tag, like this:
<head>
</style>
</head>
The browser will now read the style definitions, and format the document
according to it.
Note: A browser normally ignores unknown tags. This means that an old browser
that does not support styles will ignore the <style> tag, but the content of the
<style> tag will be displayed on the page. It is possible to prevent an old browser
from displaying the content by hiding it in the HTML comment element:
<head>

</style>
</head>
2.13.4.3 Inline Styles

An inline style loses many of the advantages of style sheets by mixing content with
presentation. Use this method sparingly, such as when a style is to be applied to a
single occurrence of an element.
To use inline styles you use the style attribute in the relevant tag. The style
attribute can contain any CSS property. The example shows how to change the
color and the left margin of a paragraph:
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
2.13.4.4 Multiple Style Sheets

If some properties have been set for the same selector in different style sheets,
the values will be inherited from the more specific style sheet.
For example, an external style sheet has these properties for the h3 selector:
48
h3
{
color: red;
text-align: left;
font-size: 8pt
}
And an internal style sheet has these properties for the h3 selector:
h3
{
text-align: right;
font-size: 20pt
}
If the page with the internal style sheet also links to the external style sheet the
properties for h3 will be:
color: red;
text-align: right;
font-size: 20pt
The color is inherited from the external style sheet and the text-alignment and the
font-size is replaced by the internal style sheet.
2.13.5 CSS Background

CSS Background properties define the background effects of an element.
The Background properties allow you to control the background color of an
element, set an image as the background, repeat a background image vertically or
horizontally, and position an image on a page. Depending the version of the
browser, some may or may not work.
Background Properties:
Property Description Values
background A shorthand property for background-color, background-
setting all background image, background- repeat,
background- attachment,
properties in one declaration
background- position
background-color Sets the background color of color-rgb, color-hex, color-name,
an element transparent
background-image Sets an image as the url, none
background
background-repeat Sets if/how a background Repeat, Repeat-x, Repeat-y, No-
image will be repeated repeat
background- Sets whether a background Scroll fixed
attachment image is fixed or scrolls with
the rest of the page
background-position Sets the starting position of top left, top center, top right, center
a background image left, center center, center right,
bottom left, bottom center, bottom
right, x-% y-%, x-pos y-pos
49
2.13.6 CSS Text
Text properties allow you to control the appearance of text. It is possible to
change the color of a text, increase or decrease the space between characters in a
text, align a text, decorate a text, indent the first line in a text, and more.
Text Properties:
color Sets the color of a text color
direction Sets the text direction ltr, rtl
letter-spacing Increase or decrease the space normal, length
between characters
text-align Aligns the text in an element left, right, center, justify
text-decoration Adds decoration to text none, underline, overline,
line-through, blink
text-indent Indents the first line of text in an length, %
element
text-shadow none, Color, length
text-transform Controls the letters in an element none, capitalize, uppercase,
lowercase
unicode-bidi normal, embed, bidi-override
white-space Sets how white space inside an normal, pre, nowrap
element is handled
word-spacing Increase or decrease the space normal, length
between words
Example: Text color and alignment

<html>
<head>
h1 {color: #00ff00; text-align: center}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
</body>
</html>
2.13.7 CSS Fonts

The Font properties allow you to change the font family, boldness, size, and the
style of a text.
 Fonts are identified by their name in CSS1. Note that if a browser
does not support the font that is specified, it will use a default font.
50
Font Properties:

font A shorthand property for font-style, font-variant, font-weight,
setting all of the properties font-size/line-height, font-family,
for a font in one declaration caption, icon, menu, message-box,
small-caption, status-bar
font-family A prioritized list of, font family-name, generic-family
family names, and/or generic
family, names for an element
font-size Sets the size of a font xx-small, x-small, small, medium,
large, x-large, xx-large, smaller,
larger, length, %
font-size-adjust Specifies an aspect, value for none , number
an element, that will
preserve the, x-height of the
first-, choice font
font-stretch Condenses or, expands the normal, wider, narrower, ultra-
current, font-family condensed, extra-condensed,
condensed, semi-condensed, semi-
expanded, expanded, extra-expanded,
ultra-expanded
font-style Sets the style of the, font normal, italic, oblique
font-variant Displays text in a, small-caps normal, small-caps
font or a, normal font
font-weight Sets the weight of a, font normal, bold, bolder, lighter, 100,
200, 300, 400, 500, 600, 700, 800,
900
Example
<html>
<head>
p
{
font: italic small-caps 900 12px arial
}
</style>
</head>
<body>
</body>
</html>
2.13.8 CSS Borders

The Border properties allow you to specify the style, color, and width of an
element's border. In HTML we use tables to create borders around a text, but with
the CSS Border properties we can create borders with nice effects, and it can be
applied to any element.
51
Border Properties:
border A shorthand property for setting border-width, border-style, border-
all of the properties for the four color
borders in one declaration
border-bottom A shorthand property for setting border-bottom-width, border-style,
all of the properties for the border-color
bottom border in one
declaration
border-bottom- Sets the color of the bottom border-color
color border
border-bottom- Sets the style of the bottom border-style
style border
border-bottom- Sets the width of the bottom thin, medium, thick, length
width border
border-color Sets the color of the four color
borders, can have from one to
four colors
border-left A shorthand property for setting border-left-width, border-style,
all of the properties for the left border-color
border in one declaration
border-left-color Sets the color of the left border border-color
border-left-style Sets the style of the left border border-style
border-left-width Sets the width of the left border thin, medium, thick, length
border-right A shorthand property for setting border-right-width, border-style,
all of the properties for the right border-color
border-right- Sets the color of the right border-color
color border
border-right- Sets the style of the right border-style
style border
border-right- Sets the width of the right thin, medium, thick, length
width border
border-style Sets the style of the four none, hidden, dotted, dashed, solid,
borders, can have from one to double, groove, ridge, inset, outset
four styles
border-top A shorthand property for setting border-top-width, border-style,
all of the properties for the top border-color,
border-top-color Sets the color of the top border border-color
border-top-style Sets the style of the top border border-style
border-top-width Sets the width of the top border thin, medium, thick, length
border-width A shorthand property for setting thin, medium, thick, length
the width of the four borders in
one declaration, can have from
one to four values
52
Example
<html>
<head>
p
{
border: medium double rgb(250,0,255)
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>
2.13.9 CSS Margins

The Margin properties define the space around elements. It is possible to use
negative values to overlap content. The top, right, bottom, and left margin can be
changed independently using separate properties. A shorthand margin property
can also be used to change all of the margins at once.
Margin Properties:
margin A shorthand property for setting the margin-top, margin-right,
margin properties in one declaration margin-bottom, margin-left
margin-top Sets the top margin of an element auto, length, %
margin-right Sets the right margin of an element auto, length, %
margin-bottom Sets the bottom margin of an element auto, length, %
margin-left Sets the left margin of an element auto, length , %
Example
<html>
<head>
p.margin {margin: 2cm 4cm 3cm 4cm}
<! --only for one margin use p-margin {margin-left : 2cm } -->
</style>
</head>
<body>
<p>
This is a paragraph
</p>
<p class="margin">
This is a paragraph with margins
</p>
</body>
</html>
53
2.13.10 CSS Padding
The Padding properties define the space between the element border and the
element content. Negative values are not allowed. The top, right, bottom, and
left padding can be changed independently using separate properties. A shorthand
padding property is also created to control multiple sides at once.
Padding Properties:
padding A shorthand property for setting all of padding-top, padding-right,
the padding properties in one padding-bottom, padding-left
declaration
padding- Sets the bottom padding of an length, %
bottom element
padding-left Sets the left padding of an element length, %
padding-right Sets the right padding length of an length, %
element
padding-top Sets the top padding of an element length, %
Example
<html>
<head>
td {padding-left: 2cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>This is a table cell with a left padding</td>
</tr>
</table>
</body>
</html>
54
2.13.11 CSS List Properties
The List properties allow you to change between different list-item markers, set an
image as a list-item marker, and set where to place a list-item marker.
list-style A shorthand property for list-style-type, list-style-position, list-
setting all of the properties style-image
for a list in one declaration
list-style-image Sets an image as the list- none, url
item marker
list-style-position Places the list-item marker inside, outside
in the list
list-style-type Sets the type of the list-item none, disc, circle, square, decimal,
marker decimal-leading-zero, lower-roman,
upper-roman, lower-alpha, upper-
alpha, lower-greek, lower-latin,
upper-latin, hebrew, armenian,
georgian, cjk-ideographic, hiragana,
katakana, hiragana-iroha, katakana-
iroha
marker-offset auto, length
Example
<html>
<head>
ul
{
list-style-type:square; list-style-position:inside; list-style-
image:url('arrow.gif')
}
</style>
</head>
<body>
<p><b>Note:</b> Netscape 4 does not display the images or position the
list.</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
55

IPchapter 2

Uploaded by

Copyright:

Available Formats

IPchapter 2

Uploaded by

Document Information

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

IPchapter 2

Uploaded by

Copyright:

Available Formats

Chapter II

Static HTML (Hyper Text Markup Language) (2 weeks)

2.1 HTML document structure and html tag format

2.1.1 What is an HTML File?

2.1.2 Creating a basic web page

 References – references to more complex content like links, images, and

Note on HTML Editors:

2.1.3 Markup: Elements, Attributes, and Values

2.1.3.1 HTML Tags

<b>This text is bold</b>

 The HTML element starts with a start tag: <b>

2.1.3.3 Tag attributes and values

 Attributes always come in name/value pairs - name="value".

2.1.3.4.3 Line Breaks

The <br> tag is an empty tag. It has no closing tag.

2.1.3.4.4 Comments in HTML

 An exclamation point is placed after the opening bracket.

2.2 Basic HTML Formatting

2.2.1 Text Formatting Tags

2.2.2 "Computer Output" Tags

2.2.4 HTML Character Entities

2.2.4.1 Character Entities

A character entity has three parts:

and an entity number; a semicolon (;).

The advantage of using a name instead of a number is that a name is easier to

2.2.4.2 Non-breaking Space

2.2.4.4 Other Commonly Used Character Entities:

2.3 HTML Links (Hyper-Links)

2.3.1 Linking to other WebPages

Href means a hyper reference to anchor or document.

The line above will look like as follows in a browser:

<a href="http://www.aau.edu.et/"target="_blank">Visit AAU!</a >

2.3.2 Linking between your own Pages/Section

<a href="#tips">Jump to the Useful Tips Section</a>

It is also possible to link to a named anchor on another page. To link directly to

Basic Notes - Useful Tips

 The web developer must keep track of more HTML documents

 Each frameset defines a set of rows or columns

The Frame Tag

<frameset rows="25%, *">

To prevent from being resized, add noresize to the <frame> tag.

2.5 HTML Tables

How it looks in a browser:

<table border="10" width="10%" height="10%" frame="box" rules="all"

How it looks in a browser:

2.6 HTML Lists

2.6.1 Ordered Lists

Here is how it looks in a browser:

2.6.3 Definition Lists

2.7.2.1 Text Fields

2.7.2.2 Radio Buttons

all controls together when processed.

 Use the attribute checked=”checked” to select one of them by default.

2.7.2.4 File Uploads

<form name="input" action="html_form_action.asp" method="get">

2.8.1 The Src Attribute

2.8.2 The Alt Attribute

 They are using text-only browsers such as hand-held devices

<img src="boat.gif" alt="Big Boat">