Chapter-4 Introduction to Hyper Text Markup Language (HTML)
Uploaded by
kaleabmarkos142Chapter-4 Introduction to Hyper Text Markup Language (HTML)
Uploaded by
kaleabmarkos142Chapter - Four
Introduction to Hyper Text Markup Language
Contents
Introduction to Markup Languages
Document Object Model (DOM) of HTML
Headings, Paragraph and Breaks
Formatting Text
WorkingWith List
Working with Graphics
Anchors, URLs and Image Maps
Tables
HTML Frames and Forms
ActiveX Objects and Applets
Special HTML Elements
Page Layout and Design Considerations
2
HTML
HTML stands for HyperText Markup Language
HTML is not a programming language, it is a markup language
A markup language is a set of markup tags that tell the Web browser
how todisplay the page.
HTML tags describe how a web page is formatted.
HTML elements tell the browser how to display the content
Each tag appears inside bracket(<>) e.g. <b> Bold text Here </b>
The surrounding characters are called angle bracket.
The end tag is written like the start tag, with a forward slash before the tag
name.
Start and end tags are also called opening tags and closing tags.
HTML tags are not case-sensitive. E.g. <b> is the same as <B>
3
HTML…
An HTML file must have an htm or html file extension.
An HTML file can be created using a simple text editor like notepad.
You can also easily edit your file using tools like Dreamweaver, MS-
frontpage
,adobe pagemill, etc…
The purpose of a web browser is to read HTML documents and display
themas web pages.
The browser does not display the HTML tags, but uses the tags to
interpret
the content of the page:
Example
4
Document Object Model (DOM)
The Document Object Model (DOM) is a
programming interface for HTML and XML (Extensible markup
language) documents.
It defines the logical structure of documents and the way a
document isaccessed and manipulated.
Represents the content of HTML document in tree structure.
Used foraccessing and updating a document elements easily.
DOM is a way to represent the webpage in a structured hierarchical way
Document can be file
Object can be html tag elements.
Model can be layout or structure.
5
With DOM, we can easily access and manipulate tags, ids, classes,
Attributes, or Elements using commands or methods provided by the
Document object.
6
Cont’d
When a web page is loaded, the browser creates a Document Object
Modelof the page.
The HTML DOM model is constructed as a tree of Objects:
6
The structure of an HTML element
An HTML element is defined by a start tag, some content, and an end tag:
The HTML element is everything from the start tag to the end tag:
<html> - The main container for HTML pages
<head> - The container for page header information
<title> -The title of the page
<body> - The main body of the page
7
The structure of an HTML element…
8
HTML Elements
The <html> Element:
Contains the whole page
The Head <head> </head>
Contains information about the page which is not displayed
Describes the page
It should be the first thing to appear after the opening <html> tag.
The <head> element is just a container for all other header elements.
Each <head> element can contain a <title> element indicating the title of
the
document,
It may also contain any combination of the following elements, in any
9
HTML Elements
order:
<link>, <script>, <style> and likes
10
HTML Elements…
The <title> Element:
You should specify a title for every page inside the <title> element.
This element is a child of the <head> element.
It is used in several ways:
It displays at the very top of a browser window.
It is used as the default name for a bookmark in browsers such as IE,…
Its is used by search engines that use its content to help index pages.
Therefore it is important to use a title that really describes the content of your
site.
The <title> element should contain only the text for the title and it may not
containany other elements.
11
HTML Elements…
The <body> Element:
The <body> element contains the part of the Web page that you actually
see
in the main browser window.
<body> element may contain anything like a paragraphs ,
heading ,forms,tables and likes
Most of what you learn in this course will be written between the
opening
<body> tag and closing </body> tag.
12
Simple page
13
HTML Attributes
HTML elements can have attributes
Attributes provide additional information about the element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
Attribute names and attribute values are case-insensitive.
Example
<a body bgcolor= “green”>
Attribute values should always be enclosed in quotes.
Double style quotes are the most common, single quotes are also
allowed.
In some rare situations, like when the attribute value itself contains
quotes,
it is necessary to use single quotes:
name='John "ShotGun" Nelson’
14
HTML Attributes
The attributes value may only contain letters, digits, hyphens,
periods,underscores and colons.
15
<body> Attributes
BACKGROUND= allows you to specify an image to use as the background for your web
page
Enter the filename or the full URL to the
image. e.g: <BODY
BACKGROUND="image.gif">
BGCOLOR= allows you to define the background color of your web page.
if you choose not to use a background image.
e.g: <BODY BGCOLOR="blue">
BGPROPERTIES="FIXED" allows you to display a static background image with
text thatflows over the image. (IE Only)
e.g: <BODY BGPROPERTIES="fixed">
LEFTMARGIN= allows you to set the default left margin
16
<body> Attributes
size.e.g: <BODY LEFTMARGIN=“1">
17
<body> Attributes…
TEXT= allows you to define the default color for all text appearing on your
page.
e.g: <BODY TEXT=“green">
LINK= allows you to define the default color all your links will appear
beforethey are clicked (Unvisited).
e.g: <BODY LINK=“blue">
ALINK= allows you to define the color your links will change as you
clickonthem (Active).
e.g: <BODY ALINK="red">
VLINK= allows you to define the color that your visited links will
appear inafter they have been clicked (Visited).
18
e.g: <BODY VLINK=“purple">
19
How text inside paragraphs is displayed
Paragraph <P>Tag
The Paragraph Tag will allow you to separate text blocks.
When a browser displays a paragraph it usually inserts a
new line before the next paragraph and
adds a little bit of extra vertical space
Attributes:
ALIGN= allows you to specify how your paragraph should be aligned
on thepage.
Possible values are: LEFT, RIGHT and CENTER.
20
e.g: <P ALIGN="center">
Basic text formatting
Whitespace and Flow
Several consecutive spaces between two words
A new line in your source document
Consecutive empty lines,
Tab characters
These all will be ignored and simply treated as one space
Useful to indent the code for better readability
21
Example
<html>
<body>
<p> Several consecutive spaces between
two words, a new line in the source document
,consecutive empty lines,
and tab characters are all ignored and
simply treated as one space </p>
</body>
</html>
22
HTML text formatting tags
Line Break <BR>
The Line Break Tag tells a line of text to stop displaying on the current
line anddrops the cursor to the beginning of the next line.
It doesn’t need closing tag.
e.g: text on one line <BR> text on the next line
Heading <H#> </H#>
The Heading Tag allows you to define the font size of a block of text and
Bold it inone step.
Possible values are H1, H2, H3, H4, H5, H6, H7.
H1 is the largest and H7 is the
smallest. e.g: <H1> header text here
23
HTML text formatting tags
</H1>
24
HTML text formatting tags
Example:
<html>
<body>
<h1> Heading 1 </h1>
<p> The content under heading one goes here. </p>
<h2> Heading 2 </h2>
<p> The content under heading two goes here. </p>
<h3> Heading 3 </h3>
<p> the content under heading three goes here. </p>
<h4> Heading 4 </h4>
<p> The content under heading four goes here. </p>
<h5> Heading 5 </h5>
<p> The content under heading five goes here. </p>
<h6> Heading 6 </h6>
<p> The content under heading six goes here. </p>
</body>
</html>
25
Comments in the HTML source
Comment <!-- --> tag
The Comment Tag allows you to add comments to your source code
thatis NOT visible on the page.
This is useful if you have a complicated set of coding and need to
keepnotes within the code.
Using the Comment
Tag:Example
<!-- This is a comment -->
<!-- This is a
multiple-line comment
that ends here. -->
26
Insert a horizontal rule
Horizontal Rule <HR> tag
Allows you to place a Horizontal Line on your page.
The Horizontal Rule Tag is a one-sided tag (with out the
corresponding closing tag) – like <br> tag
Attributes:
ALIGN= allows you to specify the horizontal alignment of the line on
yourpage. Possible values are: LEFT, RIGHT and CENTER.
e.g: <HR ALIGN="center">
COLOR= allows you to specify the color of
the horizontal line. e.g: <HR COLOR=“red">
27
Insert a horizontal rule
SIZE= allows you to specify the height, in pixels, of the horizontal
line.e.g: <HR SIZE="5">
SRC= allows you to specify an image to be used as your horizontal
line.e.g: <HR SRC="image.gif">
WIDTH= allows you to define how wide the horizontal line should
appear
on your page.
You can use a percentage of the page ("50%") or the exact number of
pixels
("200").
e.g: <HRWIDTH="50%" or "200">
28
Insert a horizontal rule
Example
<body>
<h3>Times</h3>
<p>Description and history of the Times typeface.</p>
<hr>
<h3>Georgia</h3>
<p>Description and history of the Georgia
typeface.</p>
</body>
29
Text formatting
Bold , strong and big tag
These Tags allows you add boldface formatting to text.
e.g: <B> text you wish to appear bold here </B>
<strong> text you wish to appear bold here</strong>
<big> text you wish to appear bold here </big>
Emphasized <EM> </EM>
The emphasized tag defines text that should be emphasized
Most browsers will display it in italics.
e.g: <EM> text to be emphasized here </EM>
30
Text formatting
HTML Marked Formatting
The HTML <mark> element defines marked or highlighted text:
Example
<h2>HTML <mark>Marked</mark> Formatting</h2>
Italics <I> </I>
The ItalicTag allows you add italic formatting to
text. e.g: <I> text you wish to appear italic here </I>
Underline <u> </u>
The UnderlineTag allows you add underline formatting to
text. e.g: <u> text you wish to appear underline here </u>
31
Text formatting…
Small <small> </small>
Allow you to add small font size text.
e.g: <small> text</small>
subscript <sub> </sub>
The subscript Tag allows you add subscript formatting to
text. e.g: <sub> text you wish to appear subscript here </sub>
Superscript <sup> </sup>
The subscriptTag allows you add superscript formatting to text.
e.g: <sup> text you wish to appear superscript here </sup>
32
Example for Text Formatting
<html><body>
<b>This text is bold</b><br>
<strong> This text is strong</strong><br>
<big> This text is big</big><br>
<em> This text is emphasized</em><br>
<i>This text is italic</i><br>
<u>this is underlined text</u><br>
<small>This text is small</small><br>
This text contains subscript
H<sub><small>2</small> </sub>O<br>
This text contains superscript
pi r <sup><small>2</small></sup>
</body></html>
33
Text Formatting
Insert an address
Address tag <address> </address>
It is a standard to put address texts inside the address tags.
<html>
<body>
<address>
Debre Berhan University <br />
BOX 450 <br />
Debre Birhan<br />
Ethiopia
</address>
</body>
</html>
34
Text formatting…
Pre-formattedText <PRE> </PRE>
The preformatted text tag defines text that should be shown in a
fixed
width, line breaks and other white space specified by the page author.
There is no need to use <BR> tags to indicate line breaks
In addition multiple spaces will be displayed as multiple spaces.
35
Text formatting…
Example
<html><body>
<p>The pre tag is good for displaying computer code </p>
<pre>
for i = 1 to 10
print I
next I
</pre>
</body></html>
36
Example: tabular data using <pre>tag
<html>
<body>
<p> Table 3.8 student grade report
<pre>
Name idno result
Solomon 334 78
Girma 454 84
Buzunesh 343 90
</pre>
</p>
</body>
</html>
37
Text formatting…
Acronyms <acronym> </ acronym >
Are used to write short representation of words.
Acronym works only for in IE 5, in Netscape 6.2 and later.
Attributes:
TITLE= is used to show the spelled-out version when holding the
mousepointer over the acronym.
e.g: <acronym title="WorldWideWeb">WWW</acronym>
38
Text formatting…
Bi Directional Override <bdo> </bdo>
The <bdo> element overrides the default text direction.
Attributes:
DIR= allows you to specify the text direction, it takes the value “ltr” for left to
rightexpression and “rtl” expression
e.g: <bdo dir = dir="rtl"> the text goes here!</bdo>
Example
<html><body>
<p>If your browser supports bi-directional override (bdo), the next line will be written from
the right to the left (rtl):</p> <bdo dir="rtl">Here is some Hebrew text</bdo>
</body></html>
39
How to mark deleted and inserted text
Deleted and Inserted texts <del> </del>, <ins> <ins>
If you want to Change information in your website you need to
insert the former inside the <del> tag which will be replaced by the
new one inside the <ins> tag.
Most browsers will overstrike deleted text and underline inserted text.
e.g: < del> former information here </del><ins> the new information goes
here </ins>
40
HTML Lists
HTML supports ordered, unordered and definition lists.
An unordered list
An unordered list is a list of items where the list items are marked with bullets.
An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.
An unordered list example
<html><body>
<h4>An Unordered List:</h4>
<ul> <li>Coffee</li>
<li>Tea</li>
<li>Milk</li></ul>
</body></html>
41
HTML Lists…
Ordered list
An ordered list is a list of items where items are marked with numbers.
An ordered list starts with the <ol> tag.
Each list item starts with the <li> tag.
An ordered list example
<html><body>
<h4>An Ordered List:</h4>
<ol start=“4” type=“1”> <li>Coffee</li>
<li>Tea</li>
<li>Milk</li></ol>
</body></html>
42
HTML Lists…
Attributes
TYPE= allows you to specify how specific 'bullets' or 'numbers' will appear on the list.
Possible values are SQUARE, DISC, CIRCLE for Unordered Lists, and A, a, I, i, 1
for
Ordered Lists as shown below:
Unordered List
TYPE="circle"
TYPE="square"
TYPE="disc"
Ordered List
TYPE="A" (Upper Case Letters... ie,A,B,C etc.)
TYPE="a" (lower case letters... ie, a,b,c etc.)
TYPE="I" (Upper Case Roman Numerals... ie,II,III,IV etc.)
TYPE="i" (lower case roman numerals... ie,ii,iii,iv etc.)
43
HTML Lists…
TYPE="1" (Standard numbers... ie, 1,2,3 etc.
44
HTML Lists…
Example Nested list
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
<li>Milk</li>
</ul>
</body>
</html>
45
HTML Lists…
Definition list: A description list is list of terms, with a description of each
terms.
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.
• The <dl> tag defines the description list./ Specifies a description list.
Each definition-list term starts with the <dt> tag.
• The <dt> tag defines the term name. / Specifies the term in a description list.
Each definition-list definition starts with the <dd> tag.
• The <dd> tag describe each term./Specifies description of term in a description list
46
HTML Lists…
Example for Definition list
<html>
<body>
<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
<dd>White hot drink</dd>
</dl>
</body>
</html>
47
How to insert image to HTML page
Image <IMG>
The Image Tag allows you to embed images into your web page.
This is a one-sided tag and does not require a closing tag.
Types of Image Formats (BMP, JPEG, GIF,TIFF, PNG,AI, SVG, Flash)
Note:The <IMG>Tag requires you always use the SRC= attribute.
The source file (src), alternative text (alt), width, and height are
providedasattributes
Attributes:
ALIGN= this allows you to specify how the text next to the image
should bealigned in relation to the image.
Possible values for this attribute are LEFT, RIGHT,
42 BOTTOM. e.g. : <IMG ALIGN="bottom">
TOP, MIDDLE,
BOTTOM. e.g. : <IMG ALIGN="bottom">
42
How to insert image to HTML page…
ALT= allows you to provide text which will be displayed in browsers that do not
displayimages.
The text will also display in browsers able to display images and this can be
used to provide more detail about the image or the image
function. e.g: <IMG ALT="text you wish to display here">
BORDER= allows you to set the width of the border in the number of pixels.
Using a border value of 0 will remove the border around the
image.e.g: <IMG BORDER="0">
HEIGHT= This specifies the height of the image, according to the UNITS
attribute.
e.g: <IMG HEIGHT="250">
HSPACE= allows you to specify the amount of Horizontal space, in pixels, on each
side ofthe image.
e.g: <IMG HSPACE="5">
43
How to insert image to HTML page
LOWSRC= allows you to specify that a secondary image be loaded while the original, or
primary, image is loading.
This is useful when you are using image files that have very large file sizes.
You can preview a smaller less graphically intense image while the visitor waits for the
original image to load.
e.g: <IMG LOWSRC="example.gif">
SRC= allows you to define a static image file you wish to display on your page.
You can enter the URL to the file, or just the
filename. e.g: <IMG SRC="example.gif">
VSPACE= allows you to specify the amount of Vertical space, in pixels, above and below
the
image.
e.g: <IMGVSPACE="5">
WIDTH= allows you to specify the width of the image.
44
e.g: <IMGWIDTH="250">
45
Links and Navigation
Web site is a group of pages users navigate between using hypertext links.
These pages often include links to
OtherWeb sites, other pages in the same site., From one part to another part of the
page
A link is specified using the anchor <a> element.
An anchor can point to any resource on theWeb:
an HTML page, an image, a sound file, a movie, etc.
Anything between the opening <a> tag and the closing </a> tag becomes part of the
link auser can click in a browser.
To link to another document, the opening <a> tag must carry an attribute called
href,
whose value is the page you are linking to.
46
Go to the <a href="index.html">index page </a>
The file index.html should be in the same folder
47
Links and Navigation
Attributes of anchor <a> element :
HREF= Hypertext Reference.This attribute must be used to create a link
e.g: <A HREF="http://www.server.com">link text</A>
NAME= Use this to provide an Anchor Name.
To create a book mark inside a document.
e.g: <A NAME="anchorname">topic name</A>
Link to the Anchor Name like this:
e.g: <A HREF="#anchorname">link text</A>
TARGET= allows you to specify a Frame or New Window to open a page in.
Target attribute has several values of it's own:
"_blank"Will cause the link to be loaded into a new blank window
"_top"Will cause the link to be loaded into the full body of the current
48
Links and Navigation
window
49
Links and Navigation
When you move the mouse cursor over a link, two things will normally
happen:
The mouse arrow will turn into a little hand
The color of the link element will change
By default, links will appear as this in all browsers:
An unvisited link is underlined and blue-Link
An active link is underlined and red-Alink
A visited link is underlined and purple-Vlink
One can change the color of links by using CSS or using a body tag
it is recommended that you keep them consistent throughout your site so
50
Links and Navigation
as not to confuse your users.
51
Linking to a website
to link to a different site you need to write the URL between the <a>
and
</a> tags
<body>
You can also <a href="http://www.google.com/">search Google</a>
</body>
You can include title attribute to links – when the mouse is over
the linkadditional information could be delivered to the user.
<body>
<ahref="http://www.Google.com/" title="Search theWebwithGoogle">Google</a>
is a very popular search engine.
52
Linking to a website
</body>
53
Example
Example How to create hyperlinks
<html><body>
<p><a href="lastpage.htm">This text</a> is a link to a page on this Web
site.</p>
<p> <a href="http://www.microsoft.com/"> This text</a> is a link on
theWorldWide Web.</p>
</body></html>
Open a link in a new browser window
<html><body>
<a href="lastpage.htm" target="_blank">Last Page</a>
</body></html>
54
Using an image as a link
Put the img element in the anchor element:
<a href="http://www.oreilly.com"><img src="ora.gif" /></a>
Most browsers display linked images with a blue border.
Example
<html><body>
<a href=“g.html"><img border="0" src="Sunset.jpg" width="65”
height="38"></a>
</body></html>
55
Linking to a specific part of a page
If you have a long Web page, you might want to link to a specific part of that page.
<html> <body>
<a href="#C4">See also Chapter 4.</a>
<h2><a name="ch1">Chapter 1</a></h2>
<h2>Chapter 2</h2>
<br> <br><br><br><br><br><br><br>
<h2>Chapter 3</h2>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<h2><a name="C4">Chapter 4</a></h2>
<br><br><br><br><br><br><br><br>
<a href="#ch1"> return to chapter one</a>
<h2>Chapter 5</h2>
<br><br><br><br><br><br><br><br><br>
<5/1body></html>
HTML Table
HTML Table is an arrangement of data in rows and columns, or
possibly inamore complex structure.
Defining Tables in HTML:
An HTML table is defined with the “table” tag.
Each table row is defined with the “tr” tag.
A table header is defined with the “th” tag.
By default, table headings are bold and centered.
A table data/cell is defined with the “td” tag.
By default, the text in <td> elements are regular and left-aligned.
The <td> elements are the data containers of the table
It can contain all sorts of HTML elements such as text, images, lists, other
52
tables,
52
HTML Table…
Width="n" or "(n %)“
where n specifies the width of the table in pixels or we can specifies
the
width of the table in percentage in relative to the size of the screen.
Height= “n” or " (n %)"
where n specifies the height of the table in pixels or percentage in
relative
to the size of the screen.
Bordercolor=“color”:set a color for a table border
HTML Table…
Tags inside a table tag
With in the table tag we need to define one or more table rows using the table row
tags
<tr></tr>.
With in each rows of a table we can define one or more cells using the table data
tags
<td></td>.
The table heading tags <th></th> can be substituted for the table data tags.
The difference is that the table heading is displayed in bold face and centric.
Like the table tag, the table data and heading tags <td> and <th> also has
attributes mentioned above.
Within the table data tag and heading tag you can place any HTML tag, including
another
table.
HTML Table…
If you want your table to have a title. You can putthe
title enclosed in the
<caption></caption> tags just after the <table>tag.
HTML Table…
HTML <tr> tag
Defines a row in a table.
Attribute Value Description
align Right, left, Defines the text alignment in cells
center, justify
bgcolor colorname Specifies the background color of the table
cell.
valign Top, middle, Specifies the vertical text alignment in cells
bottom
baseline
HTML Table… <td> tag
HTML <td> tag defines a cell in a table.
A cell is a crossectional area made by combination of rows and columns.
Attribute Value Description
align Left, right, center Specifies the horizontal alignment of cell
justify, char content
bgcolor Color name Specifies the background color of the
table cell.
colspan number Indicates the number of columns this cell
should span
height pixels Specifies the height of the table cell.
rowspan number Indicates the number of rows this cell
should span
valign Top, middle, bottom Specifies the vertical alignment of cell
baseline content
width Pixels % Specifies the width of the table cell.
HTML Table…
HTML <th> tag
Defines a table header.
Attribute Value Description
align Left, right, center Specifies the horizontal alignment of cell content
justify, char
bgcolor colorname Specifies the background color of the table cell.
colspan number Indicates the number of columns this cell should
span
height pixels Specifies the height of the table cell.
rowspan number Indicates the number of rows this cell should
span
valign Top, middle, Specifies the vertical alignment of cell content
bottom
baseline
width Pixels % Specifies the width of the table cell.
HTML Table…
Example
<html><body><table border = "1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table></body></html>
HTML Table…
HTML <caption> tag
This element defines a table caption.
The <caption> tag must be inserted immediately after the <table>
tag.
You can specify only one caption per table.
Usually the caption will be centered above the table.
Attribute Value Description
align Left, How to align the caption.
right,
top,
bottom
HTML Table…
Example
<html><body><table border="1">
<caption>This is a caption</caption>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table></body></html>
HTML Table…
Example of tables
<Html>
<body>
<table border="1" width="50%" height="10%“ bgcolor="yellow" >
<caption align=“left"> Table-1 </caption>
<tr> <td>jone</td></tr>
</table>
<br><br>
<table border="2" width="50%" height="20%" background="silver">
<caption> Table-2</caption>
<tr> <td>ana</td>
<td>kit</td>
<td>john</td>
</tr></table> <br><br>
</body></html>
Spanning Cells
Spanning is the stretching of a cell to cover several rows or columns
You make a header or data cell span by adding the colspan or rowspan attributes
Column spans, created with the colspan attribute in the td or th element, stretch a cell to
the
right to span over the subsequent columns
Example :
<table border="1">
<tr>
<th colspan="2">Degree</th>
</tr>
<tr>
<td>UnderGraduate</td>
<td>Graduate</td>
</tr>
</table>
Example
Table cells that span more than one column
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">E-mail</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
</body>
Exercise
Write the markup for the table shown
Row spans
Row spans, created with the rowspan attribute
cause the cell to span downward over several rows.
Example:
<table>
<tr>
<th rowspan="3">Serving Size</th>
<td>Small (8oz.)</td>
</tr>
<tr>
<td>Medium (16oz.)</td>
</tr>
<tr>
<td>Large (24oz.)</td>
</tr>
</table>
Example
Table cells that span more than one raw
<body> <h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854 </td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
Exercise
Write the markup for the table shown
Cell Padding and Spacing
By default, cells are sized just large enough to fit their contents
Cell padding is the amount of space held between the contents of the cell and the cell border.
if you don’t specify any cell padding, the cells will have the
default value of one pixel of padding.
Example:
<table border="1" cellpadding="15">
<tr>
<td>CELL 1</td> With cell With out cell
padding padding
<td>CELL 2</td>
</tr>
<tr>
<td>CELL 3</td>
<td>CELL 4</td>
</tr>
</table>
Cell Padding and Spacing …
cellpadding attribute may be used with the table element only,
The cellpadding value applies to all the cells in the table.
Cell spacing is the amount of space held between cells, specified in number of pixels.
<table border="1" cellpadding="15" cellspacing="15">
<tr>
<td>CELL 1</td>
<td>CELL 2</td>
</tr>
<tr>
<td>CELL 3</td>
<td>CELL 4</td>
</tr>
</table>
HTML Attributes Reference
id
used to uniquely identify any element within a page or style sheet.
to link to a specific point in a document
to select one specific element’s content
to associate a CSS style with a particular element
or identify that element using a script
If you have two elements of the same name within a Web page or style sheet,
youcan use the id attribute to distinguish between elements
Syntax: id=“idname”
<p id="faculty">This paragraph explains the role of the faculty.</p>
<p id="dept">This paragraph explains the role of the department.</p>
HTML Attributes Reference…
Title
A text to display in a tool tip
Syntax: title=”string”
class
used to associate an element with a style sheet, and specifi the class of
element
Syntax: class="className"
Style
attribute allows you to specify CSS rules within the element
<p style="font-family:arial;color:red;">Some text...</p>
Generic Elements
The <div> and <span> elements allow you to group together
severalelements to create sections or subsections of a page.
Commonly used with CSS to allow you to attach a style to a section of a
page
<div> used to group block-level elements together.
<span> is used to group inline elements only.
Inline elements means they just stay in the flow of text and do not
causeline breaks.
Both use id or class to give names to the generic div and span
elements
<p><span class="inventor"><b>The World Wide Web </b> was
Generic Elements
invented byTim Berners Lee</span></p>
Generic Elements …
<div class=“www”>
<H1>WorldWideWeb</H1>
<p>The W3C is the World Wide Web Consortium who maintain many Web
standards
</p>
</div>
Adding Color to Your Site
In HTML there are two key ways of specifying a color:
Hex codes: A six-digit code representing the amount of red, green, and
blue thatmake up the color, preceded by a pound or hash sign # example, #333333.
Color names:A set of names that represent over 200 colors, such as red, blue
Color name Hexadecimal Code
Black #000000
White #FFFFFF
Red #FF0000
Green #008000
Blue #0000FF
Purple #800080
Adding Color to Your Site …
The numbers that follow the # sign is the amount of red, green, and
bluethat make up the color.
The format for hex codes is: # rrggbb
Each letter represent a hexadecimal number
Each basic color has a value of 0 to 255(00000000-11111111) or (00=ff)
If all values of red, green, and blue are 0 the color = black
If all have 255 then the color would be white
Using Color Names to Specify Colors
you can also use color names such as red, green, and white to
specify thecolor.
Example:
aqua, beige, coral, darkcyan, firebrick, green,honeydew, indianred,
But usually it is better to use hex codes since it gives more color options.
Marquee <MARQUEE> </MARQUEE>
The Marquee Tag gives you the ability to set up blocks of text or objects that move
aroundthe page when the visitor views the page.
End tag: </marquee>; never omitted
Used in: body content
Attributes:
ALIGN= used to set the location of the surrounding text.
Possible values can be:TOP, BOTTOM, or
MIDDLE.e.g: <MARQUEE ALIGN="bottom">
BEHAVIOR= this allows you to define how the text in the Marquee behaves.
Possible values are: SCROLL, SLIDE and ALTERNATE.
e.g: <MARQUEE BEHAVIOR="scroll"> ---defoult
BGCOLOR= allows you to set the background color of the Marquee text
area.e.g: <MARQUEE BGCOLOR="#000000">
Marquee <MARQUEE> </MARQUEE>
DIRECTION= allows you to specify which direction the text will move.
Possible values are: LEFT and
RIGHT. e.g: <MARQUEE
DIRECTION="left">
HEIGHT= allows you to specify the height of the Marquee text area.
Use absolute pixel size or a percentage of the height of the page.
e.g: <MARQUEE HEIGHT="50%"> or <MARQUEE HEIGHT="200">
LOOP=allows you to define how many times the text should move
across thescreen.
e.g: <MARQUEE LOOP="10">
Using the value "INFINITE" will move the text continuously as long
as thepage is open.
Marquee <MARQUEE> </MARQUEE>
e.g: <MARQUEE LOOP="infinite">
Marquee <MARQUEE> </MARQUEE>
SCROLLDELAY
The scroll delay attribute lets you set the number of milliseconds to wait
between successive movements during the scrolling process.
e.g: <MARQUEE SCROLLDELAY="20">
WIDTH= allows you to specify the width of the Marquee text area.
Use absolute pixel size or a percentage of the width of the page.
e.g: <MARQUEE WIDTH="200"> or <MARQUEE WIDTH="50%">
Marquee <MARQUEE> </MARQUEE>
Example
<html>
<body>
<h1><marquee BGCOLOR="YELLOW" BEHAVIOR="scroll" DIRECTION="right"
WIDTH="50%" SCROLLDELAY="2" >
Computer science
</marquee></h1>
</body>
</html>
HTML Character Entities
Some characters have a special meaning in HTML, like the less than
symbol(<) that defines the start of an HTML tag.
If we want the browser to actually display these characters we must
insertcharacter entities in the HTML source code.
A character entity has three parts:
an ampersand (&), an entity name and finally a semicolon (;)
or
&# , an entity number, and finally a semicolon (;).
To display a less than sign in an HTML document we must write: <
or
HTML Character Entities
<
Note: that the entitie names are case sensitive.
HTML Character Entities…
The Most Common Character Entities:
Entity
Result Description Entity Name
Number
non-breaking space  
< less than < <
> greater than > >
& ampersand & &
" quotation mark " "
' apostrophe ' '
Frames
Frames divide a browser window into several pieces or panes, each pane
containing aseparate (X)HTML page.
It allows you to display severalWebPages on a single screen, one page per frame.
One of the key advantages that frames offer is that you can load and reload single
paneswithout affecting the entire contents of the browser window.
A collection of frames in the browser window is known as a frameset.
To create a frameset document,
first you need the <frameset> element, which is used instead of the
<body>
element.
The frameset defines the number of rows and columns you need to
have,including where each individual frame will be displayed.
Frames
Each frame is then represented by a <frame> element.
The<frameset> Element
The <frameset> element replaces the <body>
elment in frameset documents.
the attributes of the <frameset> element
cols specifies how many columns are in the frameset
rows specifies how many rows are in the frameset
<frame> element for each frame of the document
<noframes> elements to indicate what should be displayed to the
user iftheir browser does not load frames.
The cols and rows Attribute
Specifies
how many columns are contained in the frameset and
the size of each column.
Eg cols="20%, 60%, 20%" – three columns and their resize
If you do not specify a cols attribute then the default value 100 percent
You can specify the width of each column in one of the following ways
Absolute values in pixels
A percentage of the browser window
Using a wildcard symbol (*)
Width of column
A Percentage of the BrowserWindow or Parent Frame
use a number followed by the percent sign
Cols="40%, 60%"
The first frame takes 40% of the browser window
The second frame takes 60% of the browser window
TheWildcard Symbol (*)
The asterisk, or wildcard symbol, indicates the “rest of the window”
Cols="400, *"
<frameset cols="10%,*">
Width of column
AbsoluteValues in Pixels
use a number
Cols="100, 500, *" - - three columns 100, 500 and the rest
Cols="100, 100, 100" – will produce three frames of size100, but if
the
screen size is 600px it will produce three 200 px size frames
Cols= “100,100,100,*” will produce three exactly 100px frames
and oneframe to fill the rest of the space
HTML Frame
Example for create a vertical frameset with 3 different
documents
<Html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.html">
<frame src="frame_b.html">
<frame src="frame_c.html">
</frameset>
</html>
HTML Form
HTML forms are used to select different kinds of user input.
HTML forms are used to pass data from the client to a server and vise versa.
There are two parts of working form.
The first part is the form that you see on the page itself. Forms are made up of buttons,
text fields, and pull-down menus (collectively known as form controls) used to
collect information from the user.
The second component of a web form is an application or script on the server that
processes
the information collected by the form and returns an appropriate response
Attributes of form tag
Action: A URL, the destination to where the form will be submitted – if omitted, the
action is the same URL
Method: indicates how the data entered on the form is submitted to the server.
Name: A name for the form, used for reference only
Cont’d
Input tag
The most used form tag is the <input> tag. The type of input is specified with the type attribute.
Themost commonly used input types are explained below.
Creates an input field on the form – inputs should always be inside the FORM…/FORM tags. It
hasnoend tag.
Attributes of input tag
Name: A name for the input – should be unique in the page, and is used to label the value in the
input when the form data is submitted.
Type: The type of the input specifies how it will display and what data will be submitted for it when
the form is submitted.The possible values are
Text: A text field; also specify attributes MAXLENGTH (max number of characters that can be
entered), SIZE (width of the field) and, if desired, a default VALUE e.g.
<input type="text" maxlength=20 size=50 name="txtFirstName" value="enter name here">
Cont’d
Checkbox: Checkboxes are small rectangular boxes used when you want the user to select one or
more options of a limited number of choices. Use the attribute checked=”checked” to select one of
them by default.
Radio: Radio Buttons are small round buttons used when you want the user to select one of a
limited number of choices such asYes/No type choices.
<form>
<input type="checkbox" name="service" value=”cafe”> Cafeteria<br>
<input type="checkbox" name="service" value=”lib”> Library <br>
<input type="radio" name="sex" value="male"> Male <br>
<input type="radio" name="sex" value="female"> Female <br>
</form>
Password: Like a Text type, but when characters are typed into the field, they are not displayed but
appear as asterisks.
Cont’d
Button: Places a button on the form, VALUE attribute is the text that appears
on the button. VBScript or JavaScript can be used to attach functionality to the
button.
Submit: A button that when clicked will submit the form. VALUE attribute is the
text that appears on the button. If NAME attribute is specified, the name and the
value are submitted when the form is submitted.
Reset: A button that when clicked resets the form's fields to their initial values.
VALUE attribute specifies the text that appears on the button.
Hidden: Like a text type, but the field is hidden on the web page – usually used
to send some information to the server, that is not provided by the user.
<input type="hidden" value="2">
Cont’d
Select box Control: Drop down Box is used when we have many options available
tobeselected but only one or two will be selected.
HTML uses the <SELECT> tag to create both the combo-
box control and the
list-box control.
Using the <SELECT> tag with the SIZE attribute of 1 will generate a combo-box
control. Using a SIZE attribute greater than 1 will generate a list-box control.
Combo box controls allow the user to select only one item from the list, while the
list boxcontrols can be configured to allow multiple selection.
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
Cont’d
<input type="submit" value="Submit" />
Cont’d
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>
Cont’d
Fieldset and Legend tags
The HTML <fieldset> tag is used for grouping related form elements. By using the
fieldset tagand the legend tag, you can make your forms much easier to understand for your
users.
The <legend> tag will add some title text to the box created by the <fieldset> tag.
This title text will appear at the top left of the box created by the <fieldset> tag.
<form>
<fieldset>
<legend>Personal Information</legend>
Name:<input name="name" id="name"><br>
DOB: <input name="dob" id="dob" type="date">
</fieldset>
</form>
Page layout and design consideration
When we design the layout of web page we must consider the following:
The maximum width of a page should be 600 pixels in order to be displayed
properly, regardless of the display resolution.
Recommended components of a home page:
E-mail address ([email protected])
Mailing address
Phone numbers
Interactive component that encourages repeat visits by your target audience v.
Look,
feel and message should reflect the organization
Information that is relevant to the target audience
Directions to what your target audience wants to know or do
Cont. . .
When deciding to use a Background Image that has a distinct left side you should make
sure it is 1280 pixels wide.
Use the DIV and CENTER element to control layout.
To create attractive looking forms you should use a table to control the layout and
alignment of the form elements.
Web pages should use white space at the borders.
Screen resolution is dependent on the hardware and the settings on the computer
that isgoing to view your page. It is measured in pixels.
Reducing the colors used in graphics has the additional benefit of reducing the file
size,
which allows faster downloading.
Probably the biggest technical design consideration is the overall size of the page versus
the
time it takes to load on the surfer’s computer.
~ End ~
