Lecture6

HTML
IT1 Course Slide
Instructor:
Majid Taghiloo

١ IT1 Majid Taghiloo

Why Learn HTML
1. Its
1 It pretty easy to use
tt t
2. Standards for HTML expanding rapidly / Web
editors not always up to date with standards
3. Web editors have their own way of doing
things – taking away control from the user at
times
4.
4 Dynamic features of Web page development
that facilitate interactivity such as CGI’s, Java
etc., require a knowledge of HTML to
, q g
integrate them and implement them on Web
pages.
٢ IT1 Majid Taghiloo

Using Notepad to develop HTML
pages
Step 1, Develop HTML pages in
p
Notepad

٣ IT1 Majid Taghiloo

Step 2 Save to your area as a HTML
2,
file

1: Save to Disk (a:drive) or to your network area (h:drive)
2: ensure that “Save as type” list box is set to “All Files (*.*)
Save type All (* *)”
3: add extension (HTM or HTML) preferably in lowercase to filename
4: Save it to disk

۴ IT1 Majid Taghiloo

Step 3 To view the HTML file using
3,
Windows NT Explorer simply double
click the file and Internet Explorer or
li k nd Inte net E plo e o
Netscape will launch and open the file
for you

۵ IT1 Majid Taghiloo

Alternatively you can open it
directly in Netscape or Internet
Explorer by choosing to open
the file from the File menu.

Later we will look how to FTP
your web pages and view them
on the internet
internet.

IT1

Hypertext & Hypermedia
yp yp
• With hypertext (or hypermedia) information
is stored as a set of documents.
– With the WWW, documents are often called "pages".
pages .
– We use the two terms synonymously.

• A document contains both information and
links to other documents.

٧ IT1 Majid Taghiloo

• A hypertext viewer (Browser) will display the information in a
document and will allow a user to follow links.
+ For example, a link may be highlighted so that a user can
select the link
link.
+ When a link is followed, the document pointed to by the link is
displayed.

• Hypertext versus Hypermedia
+ With hypertext, all information is textual.
+ With hypermedia, information can consist of text, graphics,
pictures, sound, video, etc..
+ In the remainder of these notes we will use the term "hypertext",
hypertext
but unless otherwise stated, we are also referring to
hypermedia.

• With the Internet we use HTML to write hypertext pages.

• We
W use a bbrowser t display pages.
to di l
٨ + In particular, a browser allows us to follow links to other pages.
IT1 Majid Taghiloo

• In general, HTML pages can reside on different computers.
+ These pages can be retrieved over the Internet.
+ The only significant difference between local and remote
pages is the time taken to load them.

• However, on this part of the course we will assume that all
pages reside on the same computer.
+ Typically, an HTML page will be contained in a file with the
e te s o
extension .html (e.g. index.html).
t (e g de t )
+ When we "double-click" on an HTML file a computer typically
starts a browser to display the file.
+ R f
References within HTML files are names of other fil
i hi fil f h files.
introduction.html table.html

content.html
content html
reference.html

body.html

٩ IT1 Majid Taghiloo

• WWW pages are written using HTML.
– We must use a standard format so that all browsers can interpret
and display the information.
• Note that there is a "war" between Netscape and Microsoft
war
over the exact definition of HTML.
• Therefore, HTML is constantly evolving and a browser may not
be able to interpret all aspects of a particular version of HTML
HTML.
• The most widely accepted standard is issued by the World
Wide Web Consortium, W3C. Neither Netscape nor Internet
Explorer conforms fully to it!

– HTML is a markup language, i.e., it allows information to be
specified without giving exact d t il of h
ifi d ith t i i t details f how it should b
h ld be
displayed. This allows the browser-user to decide on some
aspects of how information should be displayed.
• For example, many pages do not specify the exact font size to
be used, just the relative importance (1-6) of each piece of text.
The browser (under direction from the user) selects
appropriate font sizes.
i t f t i
١٠ IT1 Majid Taghiloo

• In its simplest form, an HTML page contains:
+ Information to be displayed. This can include text, graphics,
etc..
+ Hypertext Links that reference other pages, graphics etc..
+ A link contains the name and location of other information.

• However, HTML pages may contain:
+ Forms that can be filled out and returned to a server.
+ Programs that interact with users. These can be written in
scripting languages such as JavaScript (Netscape) or Visual
Basic (Microsoft) or in programming languages such as
(Microsoft),
Java.

١١ IT1 Majid Taghiloo

Simple HTML

• An HTML page is simply ASCII text
consisting of:
– T t t b displayed.
Text to be di l d
– Tags specifying how text should be formatted for display or
some action that should be taken by a browser.

• A browser will format and display text.
– Multiple spaces & new lines within text are ignored.
p p g
– Certain non-ASCII characters and characters with special
meanings can be represented using special codes. For
example:
© © ç ç
£ £ & &

١٢ IT1 Majid Taghiloo

Contents of the
This is a piece of text file one.html
when viewed with
h i d ith
with
a text editor such
as Notepad.
various spaces and

new lines.

Some special characters: © ç £ &. Contents of the
file one.html
one.html
ht l when viewed with
h i d ih
a browser.

١٣ IT1 Majid Taghiloo

Page Format
• While most browsers will attempt to display any
a b t a y piece of SC text,
arbitrary p ece o ASCII te t, a page s ou d
should
have a standard format.
– It should start with an <HTML> tag and end with a </HTML> tag.
– Within these tags there should be a head and a body.
– The head should be enclosed by the tags <HEAD> and </HEAD>. It
can contain a title and other information.
– The body should be enclosed by the tags <BODY> and </BODY>. It
should contain the contents of the document
document.
– Note that spaces and new lines are (in general) ignored.

<HTML>
<HEAD>
<TITLE> Document Title </TITLE>
</HEAD>
/
<BODY>
Document Contents
</BODY>
</HTML>
١۴ IT1 Majid Taghiloo

<HTML>
<HEAD>
<TITLE> Simple Page</TITLE>
</HEAD>
<BODY>
This is a <B>simple</B> page.
</BODY>
</HTML>

three.html

١۵ IT1 Majid Taghiloo

<HTML><HEAD><TITLE> Simple Page</TITLE></HEAD><BODY>
This is a <B>simple</B> page.</BODY></HTML>

four.html

١۶ IT1 Majid Taghiloo

HTML T l
Tools
• There is a wide range of formatting tags
tags.
+ It is possible to produce HTML pages using a simple text
editor such as Notepad. Simple editors force you to type
each HTML tag in full. By learning the basic tags this way it
gives you a greater understanding of how HTML works.
+ However, it is much easier to use an HTML editor which
displays a formatted version of the text and automatically
inserts the correct tags. MS Word can be used in this way.

١٧ IT1 Majid Taghiloo

Basic Text Formatting
Most Web pages use text as their primary means of
communication. Providing quality content should
always be your first priority when you add text to any
Web page But the visual presentation of text on a
page.
Web page can greatly enhance or detract from the
underlying content.

Some basic text formatting features are:
– Fonts
– Headings
– Paragraphs
– Carriage returns
– Horizontal Rules

١٨ IT1 Majid Taghiloo

• A tag consists of text bracketed by < and >.
+ i.e., <TAGNAME>
+ Some tags come in pairs - one to start a formatting operation and
one to end the operation.
+ End tags have the form: </TAGNAME>
+ Notes:
• Tag names are case insensitive – with the exception of some
mark-up
mark up languages currently under development (XML and
XHTML)
• Tags can have attributes (sometimes called arguments or
parameters). These appear between the tag name and the
closing > bracket.

• For example, the tag <B> specifies that the following text should be
displayed in a bold font. Normal font is restored by using the end tag
</B>.
</B>
+ <B> This is bold </B> while this is not.
(<STRONG></STRONG>)
+ <U></U> these tags underline text
١٩ + <I> this is italic</I> while this is not (<EM></EM>)
IT1 Majid Taghiloo

<HR>
<B> This is bold </B> while this is not.<BR>
<U> This starts on a new line and is underlined <B>
and this is underlined and bold. </B></U><BR>
<HR>
<BR>
<BR>
<BR>
© 1998
two.html

٢٠ IT1 Majid Taghiloo

Headings
• A good example of why HTML is a markup
language, is the handling of headings.
– In most text we have various levels of headings, e.g., chapter
heading, main section heading, sub-section heading etc..
– Generally, the font size and/or the emphasis of headings
decreases as we deal with less significant portions of a document.
– To handle this, HTML specifies 6 levels of headings together with
, p g g
normal text. It is assumed that 1 is more significant than 2, which
is in turn more significant than 3, etc..
– Therefore the exact font font size and emphasis for headings is
Therefore, font,
determined by the browser. The page designer simply uses tags
to specify that certain text should be treated as headings.
– Headings can be places anywhere inside the BODY of a Web
page

٢١ IT1 Majid Taghiloo

<HTML>
<HEAD>
<TITLE> Page Five</TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1><BR>
6 ead g / 6
Normal text.
</BODY>
</HTML>

five.html

٢٢ IT1 Majid Taghiloo

General guidelines for using Headings
1‐6
• <H1> Computer Science Program </H1>
<!—use H1 for titles at the top of a web page-->

• <H2>An Introduction to Mod le CA106 Web Design</H2>
Introd ction Module
<!– use H2 for subtitles or Chapter titles -->
This course represents the basic concepts in Web Design. It
will introduce the students to the basic concepts of HTML
and later look at more advanced features. Student will learn
how to create their own Web pages …..
• <H3> Who should take CA106</H3>
H3 CA106 /H3
<!– Use H3 for section Heads -->
This is a course for students interested in learning Web
Design, I.e. learning how to correctly design and present
information on th web.
i f ti the b

٢٣ IT1 Majid Taghiloo

• <H4>Prerequisites </H4>
q
There are no prerequisites
<!–
<! Use H4 for Section heads -->
>

• <H5> Credits 5 </H5>
<!– Use H5 for “fine Print” -->
fine Print

• <H6> must pass each module</H6>
<!– use H6 for “very fine Print” -->

٢۴ IT1 Majid Taghiloo

• The Paragraph Element signals the beginning of a
g p g g g
new Paragraph most browser insert a blank line
before a paragraph element thereby signaling the
start of a new paragraph To mark the start of a new
paragraph.
paragraph in your HTML file, insert the tag pair <P>
</P> at the beginning and end of each paragraph

• To generate a carriage return within your HTML file
uses the line break element tag <BR>, this displays
BR ,
the text following the tag on a new line without
inserting a blank line which appears using the <P>
</P> tags

• To emphasize a break in text without titles or sub-
p
titles insert an <HR> tag (horizontal rule element),
this tag produces a horizontal line across the page.

٢۶ IT1 Majid Taghiloo

Images
• An HTML page consists of ASCII text.
– Therefore we cannot put non textual information
Therefore, non‐textual
directly into an HTML page.
– Instead we can use various tags to specify where
the non‐textual information resides.
– For graphic information we use the IMG tag.
g p g
– With the IMG tag we use an attribute to specify
the name of a file containing the image to be
displayed.
– When the page is displayed, the image is obtained
from the specified fil and di l d
f h ifi d file d displayed.
– A file will contain an image in some graphics format, not HTML.
– If a simple file name is specified, then the file is assumed to be in the same
location as the HTML page. Therefore, if the file was obtained locally, the
image file is assumed to be in the same directory as the HTML file.
٢٧ IT1 Majid Taghiloo

<HTML> This is an
<HEAD>
<TITLE> Page Seven</TITLE>
attribute or
</HEAD>
/ parameter.
parameter
<BODY>
<BR>NetGate : <IMG SRC="globe3e.gif">
<IMG SRC="flydove.gif">
<BR>A dog : <IMG SRC="anidog3.gif">
g g g
</BODY>
</HTML>

seven.html

٢٨ IT1 Majid Taghiloo

Hypertext Links
yp
• A hypertext link is used within one page to
reference another page.
page
– With HTML we specify a hypertext link using an anchor
element.
– This consists of :
• An <A> tag. This has an attribute that specifies the file name
of the referenced page.
• Text (and/or images) that can be selected in the browser to cause the link to be followed
followed.
• An </A> tag.

<A HREF="index.html"> text </A>

File name of Selectable text to be
referenced page displayed for this link As we will see later, a
hypertext reference can
specify a page on another
computer by using a URL
٢٩ IT1 Majid Taghiloo
(Uniform Resource Locator).

<HTML>
<HEAD>
<TITLE> Contents</TITLE>
</HEAD>
<BODY>
<H1>Networks & Internets</H1>
Example pages:
<UL>
<LI> <A HREF="one.html"> One </A>
<LI> <A HREF="two.html"> Two </A>
<LI> <A HREF="three.html"> Three </A>
<LI> <A HREF="four.html"> Four </A>
<LI> <A HREF="five.html"> Five </A>
<LI> <A HREF="six html"> Six </A>
HREF= six.html >
<LI> <A HREF="seven.html"> Seven</A>
</UL>
</BODY>
</HTML>

eight.html

٣٠ IT1 Majid Taghiloo

Three types of HyperLinks
There are three types of HTML Links each
one i used i a diff
is d in different situation
t it ti
– Absolute URL: links to a page on a different Web Server
– Relative URL: links to a page on the same Web Sever
– Named Anchor : links to a different location on the same web
page

Named Anchor
Named anchors are t i ll used t h l
N d h typically d to help
people navigate through the same web page.
– Named anchors can be used in Relative and Absolute URLs
• Relative – example on next slide
• Absolute

٣١ IT1 Majid Taghiloo

<HTML>
<HEAD>
<TITLE>Named Anchor</TITLE>
<HEAD>
<BODY>
<PRE>
This example looks at named anchors
<A HREF = "#Introduction to DCU"> Intro DCU</A>
<A HREF = "#Welcome to the School of computing"> School of Computing</A>
p g p g
<A HREF = "#School timetable"> School TimeTable </A>

<h3><a name = "Introduction to DCU"> Intro DCU</a>
...............

<h3><a name = "Welcome to the School of computing"> school of computing</a>
.......................

<h3><a name = "School timetable"> School timeTable</a>
School TimeTable
</PRE>
</BODY>
</HTML>

File is Anchors html
Anchors.html

٣٢ IT1 Majid Taghiloo

Attributes
• Most HTML tags have optional attributes
(
(or arguments) that can be used to control
g )
their behaviour.
– Such attributes appear after the tag name but before the closing
pp g g
> bracket.
– Each attribute consists of a name, = and a value.
• HREF "i d ht l"
HREF="index.html"
• HREF='index.html'
• rows="4"
rows 4
– Attribute names are case-insensitive.
– Each tag supports different attributes.

٣۴ IT1 Majid Taghiloo

Tag Attributes and Values
Attribute
HTML Element Attributes What the attribute does
Values
<H1></H1> (heading) Align= Left, center, right Alignment justifies or centers the
Through t
Th h to EXAMPLE heading.
heading Default is left alignment
<H6></H6>(heading)
<P></P> (paragraph) Align= Left, center, right Alignment is used justify or center
EXAMPLE the text

<BR> clear= Left, right Used only in conjuction with images
EXAMPLE and tables

<HR> align= Left, center, right Alignment used to justify or center
EXAMPLE horizontal rule. Default is centered

Noshade [takes no value] Eliminates 3-D effect
EXAMPLE

size= n (an integer)
( g ) Sets the thickness of the rule in
EXAMPLE EXAMPLE pixels. Default size is 2

Width= n (an integer) Integer values set the width of the
EXAMPLE Or n% horizontal rule, % value set the
width as a percentage of the
browsers window. Default is 100%
٣۵ IT1 Majid Taghiloo

Tag Attributes and Values for Fonts

Attribute
Values
V l
<FONT></FONT> face= [the name of a Changes the typeface
EXAMPLE preinstalled font
type]
colour= [a colour name or Changes the text colour. (White
EXAMPLE hexadecimal colour =FFFFFF Black =000000 )
code]
size= n (an integer Changes the text size
between 1 and 7)
=n or –n

٣۶ IT1 Majid Taghiloo

Fontattributes.html

٣٧ IT1 Majid Taghiloo

Lists

• There are a number of different tags used to construct lists.
– <OL> … </OL> is used to construct an ordered or numbered list
list.
– <UL> … </UL> is used to construct an unordered or bullet list.
– Within these tags we place the items making up the list.

• Within a list, we use:
– <LH> for the header of the list.
– <LI> to specify list items.

٣٨ IT1 Majid Taghiloo

<HTML>
<HEAD>
<TITLE> Numbers </TITLE>
</HEAD>
<BODY>
<OL>
<LH> <EM>This is a list of 5 numbers</EM>.
<LI> One
<LI> Two
<LI> Three
<LI> Four
<LI> Five
</OL>
</BODY>
</HTML>

ten.html

٣٩ IT1 Majid Taghiloo

<HTML><HEAD><TITLE> Numbers </TITLE></HEAD>
<BODY>
<OL TYPE="i" START="10">
<LH> <EM>This is a list of 5 numbers</EM>
numbers</EM>.
<LI> One
<LI> Two Sets markers to uppercase letters. TYPE="A"
<LI> Three Sets markers to lowercase letters. TYPE="a"
<LI> Four Sets markers to uppercase Roman numerals. TYPE="I"
<LI> Five
i Sets markers to lowercase Roman numerals TYPE="i"
</OL> Sets markers to numbers Default value. TYPE="1"
</BODY>
</HTML>

eleven.html
l ht l

۴٠ IT1 Majid Taghiloo

• Bullet shapes in an unordered list can
also be changed.
– Possible values are disc, circle square – the default value is
disc circle,
disc
<UL> type = square</UL> EXAMPLE

• A third type of list is a defintition list
yp
– Definition list element is created with the tag pair <DL></DL>
• Inside the Defintion list, deflist-term elements are marked
with the tag <DT>
• In addition to the deflist-term elements, deflist-definitions
elements are marked with the tag <DD> DD
• <DT> and <DD> work within the <DL> in pairs
EXAMPLE EXAMPLE

۴١ IT1 Majid Taghiloo

Deflist.html

۴٢ IT1 Majid Taghiloo

List Related Elements
Attribute
Att ib t
Values
<UL></UL> type= disc, circle, Changes the shape of the bullet.
(Unordered Li t
(U d d List> square Default value is disc

<OL></OL> type=
A" Sets markers to uppercase letters.
(Ordered List)
"a"
a Sets markers to lowercase letters.
letters
"I" Sets markers to uppercase Roman numerals.
"i" Sets markers to lowercase Roman numerals
"1" Sets markers to numbers Default value.

start= n(a positive Indicates where to start counting
integer)

<LI></LI> (List Item)
( ) type=
yp Any of the
y Overrides any type attribute set by
y yp y
vaues for relevant OL tag (ordered lists only)
ordered list
above
type= Any of the Overrides any type attribute set by
vaues for relevant UL tag (unordered lists only)
unordered list
above
value= n(positive Indicates where to start counting
integer) (applies only to ordered lists)
۴٣ IT1 Majid Taghiloo

<HTML>
<HEAD>
We can nest one list within another. •
<TITLE> Numbers </TITLE>
</HEAD>
<BODY>
<OL TYPE=I>
<LH> <EM>This is a list of 5 numbers with
sub-lists</EM>.
<LI> One
<OL>
<LI> One One
<LI> One Two
</OL>
<LI> Two
<LI> Three
<UL>
<LI> Six One
<LI> Six Two
<LI> Six Three
</UL>
<LI> Four
<LI> Five
</OL> twelve.html
</BODY>
</HTML>
۴۴ IT1 Majid Taghiloo

Controlling White Space
g p

• Web browsers ignore white space and
blank lines so special elements are
bl k li i l l t
needed to produce spaces and blank
lines that will be preserved and
displayed by a web browser.
– Single white space &nbsp:
• EXAMPLE
– Single Line Break <BR>
• EXAMPLE
– Block quote element <blockquote> </blockquote>
• EXAMPLE
– Preformat element <PRE> </PRE>
• EXAMPLE

۴۶ IT1 Majid Taghiloo

Application of Colour
• The following page elements can be changed
– Background colour
ac g ou d co ou
– Text colour for the whole page
– Link colours
– Visted link colours
– Active link colours
Changing background colour
– Choose the colour carefully, take into consideration the colour of your
y, y
text and graphics
• <BODY BGCOLOR = “#000000”> … </BODY>
• <BODY BACKGROUND = “93098.GIF”> …. </BODY>

Changing the text colour for whole page to
White
<BODY TEXT = “#FFFFFF”>

۴٧ IT1 Majid Taghiloo

Change link colour to RED
<BODY LINK = “#FF0000”>
#FF0000 >……….</BODY>
</BODY>

Change the visited Link Colour to Orange
<BODY VLINK = “#FFA500”
BODY “#FFA500”>………</BODY>
/BODY

Change the Active Link Colour to Yellow
<BODY ALINK = “#FFFF00”>…….</BODY>

In practice, all the changes would be made at once by nesting
p , g y g
all of the attributes within the BODY tag

<BODY BGCOLOR =“#000000” TEXT=“#FFFFFF”
LINK=“#FF0000” VLINK=“#FF6600”
LINK “#FF0000” VLINK “#FF6600”
ALINK=“#FFFF00”>………….</BODY>

(You
(Y can also just type the name of the colour without
l j tt th f th l ith t
having to use hex value)

۴٨ IT1 Majid Taghiloo

<HTML>
<HEAD>
<TITLE> C t t /TITLE
TITLE Contents</TITLE>
</HEAD>

<BODY bgcolor = "#000000" TEXT = "#FFFFFF"
#000000 #FFFFFF
LINK= "#FF0000" VLINK = "#00FF00"
ALINK ="#0000FF">

<H1>Networks & Internets</H1>
Example pages:
<UL>
UL
<LI> <A HREF="one.html"> One </A>
<LI> <A HREF="two.html"> Two </A>
<LI> <A HREF="three html"> Three </A>
LI A HREF three.html /A
<LI> <A HREF="four.html"> Four </A>
<LI> <A HREF="five.html"> Five </A>
<LI> <A HREF="six.html"> Six </A>
<LI> <A HREF="seven.html"> Seven</A>
</UL>
</BODY>
</HTML>

۴٩ IT1 Majid Taghiloo

<HTML>
<HEAD>

۵٠
> tes</TITLE
<TITLE> Attribut E>
</HEAD>
<BODY BACKKGROUND="9 0ff00">
93098.gif" TEXT="#00
This pa
age has a backgroun and the colour
nd
of the text has been set to match(? the bac
?) ckground.

<HR>

<img al
lign="left height=
t" ="200" widt
th="120" src="box.g
s gif">

<img al
lign="righ
ht" src="b
box.gif">

</BODY>
HTML>
</H

nine.
.html

IT1
Majid Taghiloo

Adding Background Patterns
<BODY BACKGROUND="93098.gif">

• Browsers display backgrounds by filling the available space in the
browsers window with a tiling background
– Image boundaries make tiling apparent
– Photographs often produce a “Pillow” effect (colour on opposite edges
don’t match)
• Photograph images used for background should be uniform in colour
• Images for background can be obtained with digital camera’s, image
libraries on the web, by scanning images, or by creating your own images
using a drawing program (psp)
– Web friendly formats for images on the web are
• GIF, JPEG, PNG (portable network Graphics)
– not
t recommended are BMP TIFF or PICT files (files usually
d d BMP, fil (fil ll
too large, and not all browsers can display them)
• Images should be restricted to no larger than 30-40KB

۵١ IT1 Majid Taghiloo

Return to Image attributes
Aligning Images
Inline images need to be aligned with text blocks to
achieve a good combination of t t and graphics. Thi
hi d bi ti f text d hi This
effect is achieved by the use of the ALIGN Attribute inside
the IMG tag.g
– Any text near the image will automatically flow around the image
• ALIGN values LEFT, RIGHT, CENTER
• Vertical ALIGN values BOTTOM, TOP and MIDDLE
• EXAMPLE
– Additional control over text behaviour around an image using CLEAR attribute
inside the BR tag
• CLEAR = RIGHT, CLEAR = LEFT OR CLEAR = CENTER
• EXAMPLE
Images used as Links EXAMPLE
Including the image tag <IMG> tag within the <A
HREF></A> tags. When an image is used as a link it
usually has a blue border around it
ll h bl b d d it,
<A HREF=one.html> <IMG BORDER = 0 SRC =
“box.gif” ALT = “grey box”> </A>

۵٢ IT1 Majid Taghiloo

Scaling Images
– Ch
Changing it H i ht and Width attributes (increase or decrease size
i Height d tt ib t (i d i
of image on screen)
– Preserve Aspect Ration
• Scaling to large can result in Pixel effects ( g resolution images
g g (high g
better for scaling up)
• Scaling to small can result loss of image quality
– Shrinking an image down does not reduce its bandwith
requirement.
requirement To reduce download times you must compress
times,
the images
Uses of ALT attribute
The ALT attribute allows you to specify a line of
text that will be displayed by browsers that aren’t
configured to display graphics
– Blind people use text-to-voice speech generation to describe web
pages
– ALT attribute will be displayed is there is a problem with your image

<IMG ALIGN ="left" HEIGHT="200"
WIDTH= 120 SRC= box.gif
WIDTH="120" SRC="box gif“ ALT = picture
=“picture
۵٣
of a box”> IT1 Majid Taghiloo

BACKGROUND & IMAGE ELEMENTS
Attribute
Values
<BODY> </BODY> background= [a file name] Sets the background pattern for the
page

bgcolor= [a colour name Sets the background colour for the page
or hex colour
code]
<IMG> align= Left, right Alignment is used to justify the image
EXAMPLES against one side of the page with text
flowing down alongside it.
alt= [a string of Alt used by browsers that cannot display
text] the image

height n(an integer) Sets the height of the image in pixels

width n (an integer)
( g ) sets the height of the image in p
g g pixels

src [a filename] Tells the browser which image to display

۵۴ IT1 Majid Taghiloo

Tables
HTML Tables are used to control Web page
layout for both text and graphics
– In HTML, we use <TABLE> and </TABLE> tags to create a
table.
– A table has an internal structure based on rows and columns
– A table is made up of a number of rows.
• We use <TR> and </TR> to define a row.

– Each row is made up of a number of cells (columns).
• We use <TD> and </TD> to define the data to be placed in
a cell.
• We use <TH> and </TH> to define column headings.
TH and TD EXAMPLE
– Table data elements can contain any HTML element
A simple rule is if you can add it to a Web page you can
i l l i dd t W b
add
it to a table cell.

۵۵ IT1 Majid Taghiloo

Tables

۵۶ IT1 Majid Taghiloo

·
<TABLE>
·
<TR> ·
column header1
column header2 <TH> Column 2 </TH>
…
column headerm
</TR> ·
<TR> ·
<TABLE>
·
row1 cell1
row2 cell2
… …
rown cellm <TD> Data for (2,m) </TD>
</TABLE> </TR>
… ·
<TR> ·
·
cell1
cell2
…
cellm
</TR>
</TABLE>

۵٧ IT1 Majid Taghiloo

<HTML>
<HEAD>
<TITLE> Table </TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
<TH> Column 1 </TH> <TH> Column 2 </TH>
<TH> Column 3 </TH>
</TR>
<TR>
<TD> (1,1) </TD> <TD> ( , ) </TD> <TD>
( , ) / (2,1) /
(3,1) </TD>
</TR>
<TR>
thirteen.html
<TD> (1,2) </TD> <TD> (2,2) </TD> <TD>
(3,2) </TD>
</TR>
</TABLE>
</BODY>
</HTML>

۵٨ IT1 Majid Taghiloo

Tables

EXAMPLE

۵٩ IT1 Majid Taghiloo

Empty Cells
py
• In general, blanks in HTML text are ignored.
– However we can use a special non breaking space  
However, non‐breaking
if we want to cause output of a space.
This is a piece of text  
   
         

with

various spaces and
i d

new lines
lines.
one_a.html

Some special characters: ©
ç £ &.
۶٠ IT1 Majid Taghiloo

• We can distinguish between empty cells and cells containing spaces.

<HTML>
<HEAD>
<TITLE> Table</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
<TH> Column 1 </TH> <TH> Column 2
</TH> <TH> Column 3 </TH>
</TR>
<TR>
<TD></TD> <TD> </TD> <TD></TD>
</TR>
<TR>
<TD> </TD> <TD></TD>
<TD> </TD>
</TR>
fourteen.html
</TABLE>
</BODY>
</HTML>
۶١ IT1 Majid Taghiloo

• Some attributes for <TABLE>.
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER CELLPADDING="20"
CELLSPACING="20">
<TR>
<TH> Column 1 </TH> <TH> Column 2
</TH> <TH> Column 3 </TH>
</TR>
<TR>
<TD></TD> <TD> </TD> <TD></TD>
</TR>
<TR>
<TD> </TD> <TD></TD>
<TD> </TD>
/ fifteen.html
ff h l
</TR>
</TABLE>
</BODY>
</HTML>
۶٣ IT1 Majid Taghiloo

• Some attributes for <TH> and <TD>.
TH ATTTIBUTES and TD ATTRIBUTES

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER CELLPADDING="20" CELLSPACING="20">
<TR>
<TH> Column 1 </TH> <TH> Column 2 </TH> <TH
BGCOLOR=#FF0000> Column 3 </TH>
</TR>
<TR>
<TD></TD> <TD> <IMG SRC="flydove.gif"> </TD>
<TD></TD>
</TR>
<TR>
<TD BGCOLOR="#00FF00"> </TD> <TD></TD> <TD
sixteen.html
BGCOLOR="#0000FF"> </TD>
</TR>
</TABLE>
/TABLE
</BODY>
۶۶ IT1 Majid Taghiloo
</HTML>

• With no border attribute to <TABLE> we get:

۶٨ IT1 Majid Taghiloo

• Typically, each row in a table has the same number of columns.
+ Similarly, each column has the same number of rows.
+ However, it is possible to have cells that span 2 or more rows (columns).

۶٩ IT1 Majid Taghiloo

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
<TH> Column 1 </TH> <TH> Column 2 </TH> <TH> Column 3 </TH>
</TR>
<TR>
<TD COLSPAN="2" BGCOLOR="#00FFFF"> (1,1)&(2,1) </TD><TD>(3,1 </TD>
</TR>
<TR>
<TD> (1,2) </TD> <TD> (2,2) </TD> <TD> (3,2) </TD>
</TR>
</TABLE>
<BR><BR><BR>
<TABLE BORDER>
<TR>
</TR>
<TR>
<TD ROWSPAN="2" BGCOLOR="#00FFFF"> (1,1)&(1,2) </TD><TD> (2,1) </TD> <TD>(3,1)</TD>
</TR>
<TR>
<TD> (2,2) </TD> <TD> (3,2) </TD>
</TR>
</TABLE>
</BODY>
</HTML>

eighteen.html
i h h l

٧٠ IT1 Majid Taghiloo

• It is possible to nest one table within another.
+ This is achieved by making a table the data of a single cell.
+ Not all browsers support nested tables.
COLSPAN AND ROWSPAN EXAMPLE

٧١ IT1 Majid Taghiloo

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
</TR>
<TR>
<TD COLSPAN=2 BGCOLOR="#00FFFF">(1,1)&(2,1)</TD><TD>(3,1)</TD>
</TR>
<TR>
<TD BGCOLOR="#FF00FF">

<TABLE BORDER>
<TR>
</TR>
<TR>
<TD ROWSPAN = "2" BGCOLOR="#00FFFF">(1,1)&(1,2)</TD><TD>(2,1)</TD><TD>(3,1)</TD>
</TR>
<TR>
<TD>(2,2)</TD><TD>(3,2)</TD>
</TR>
</TABLE>

</TD><TD>(2,2)</TD><TD>(3,2)</TD>
</TR>
</TABLE>

</BODY>
</HTML>

٧٢ nineteen.html
IT1 Majid Taghiloo

Tables and Text
You can use tables to product two‐column text di l
bl d l displays to achieve a news l
hi letter effect,
ff
it is important to keep the columns narrow so that they will display correctly on
smaller monitors.
– To create a two‐column text table create a table with one row and two data
elements in that row. Fill data element with a column of text. For the best
display you should fill each cell with the same amount of text.
– Also include cell padding to create space between the two columns.

٧٣ IT1 Majid Taghiloo

HTML Element Attributes Attribute What the Attribute
Values Does
<table></table> Align = Left, right Justifies the table against
one side of the page with
EXAMPLE EXAMPLE text flowing down alongside
it. (this attribute does not
set the alignment for any
cells within the table)
Bgcolor = A colour name or Sets the background colour
EXAMPLE hex colour code for all cells of the table
(can be overridden by TD
BGCOLOR)
Border = n(an integer) Sets the width in pixels of
EXAMPLE EXAMPLE the 3-D border drawn
around the entire table
Cellpadding = n(an integer) Sets the width in pixels of a
EXAMPLE margin inserted inside the
boundaries of each cell

Cellspacing = n(an integer) Sets the width in pixels of
EXAMPLE the b
th boundary separating
d ti
adjacent cells
٧۵ IT1 Majid Taghiloo

HTML Element Attributes Attribute What the Attribute
Values Does
<table></table> Summary = A quoted string Summarises the table for
EXAMPLE nonvisual browsers

Width = n(an integer) or n% An integer value sets the
EXAMPLE width of the table in pixels,
a % value sets the width as
a pecentage of the width of
the browser window
<td></td> Align = Left, center, Sets the horizontal
(table data)
( bl d ) EXAMPLE right alignment for one cell
<th></th> (table (default value is left
headers)
Bgcolor= A colour name or Sets the background
EXAMPLE hex colour code colour for one cell

Colspan= n (an integer) Allows the cell to span n
EXAMPLE table columns

٧۶ IT1 Majid Taghiloo

HTML Element Attributes Attribute Values What the Attribute Does

Nowrap Takes no value Keeps all text inside the cell on a
EXAMPLE single line, unless explicitly
borken by BR or P tags
Rowspan = n(integer) Allows cells to span n table rows
EXAMPLE
Valign = Top, middle, bottom, Sets the vertical alignment for
EXAMPLE baseline one cell (default value is middle)

Width = n (an integer) An integer values sets the width
of the cell in pixels

<tr></tr>
/ Align =
g Left, center, right
, , g Sets the alignment attribute for
g
(table row) each cell in one row (can be
overridden by TD align)

Nowrap Takes no value Disables line wrapping for all
cells in the row
Valign = Top, middle, bottom, Sets the vertical alignment for
baseline cells in the row (default value is
(
middle)
٧٧ IT1 Majid Taghiloo

Exercise III
Design an HTML page to produce the following table: •

Link this page to your home page. •
٧٨ IT1 Majid Taghiloo

Frames

• When displaying information in a browser, it is
sometimes useful to divide the display into a number
of distinct areas called frames and display different
HTML pages in each frame.

٧٩ IT1 Majid Taghiloo

• To use frames, we need a frame page that specifies the layout of the frames.
+ This page uses the <FRAMESET> tag to specify a set of related frames.
+ Each frame in this set is introduced by a <FRAME> tag.

• For a set of frames, we need to specify:
+ Whether the frames form rows or columns.
+ What percentage of the available space is to be occupied by each frame.
p g p p y

<FRAMESET ROWS="30%,40%,30%"> <FRAMESET COLS="40%,60%">
••• •••
</FRAMESET> </FRAMESET>

• For an individual frame we need to specify:
frame,
+ The HTML page that will be displayed in that page.
+ This is known as the source for the frame.
+ Th name of th f
The f the frame.

<FRAME SRC="one.html"
٨١
NAME=TOP> IT1 Majid Taghiloo

<HTML>
<HEAD>
<TITLE>Frames in a
row</TITLE>
</HEAD>

<FRAMESET
ROWS="30%,40%,30%">

<FRAME SRC="one.html"
NAME=TOP> twenty.html
<FRAME SRC="two.html"
NAME=MIDDLE>
NAME MIDDLE>
<FRAME SRC="three.html"
NAME=BOTTOM>

</FRAMESET>

</HTML>

٨٢ IT1 Majid Taghiloo

<HTML>
<HEAD>
<TITLE>Frames in a
column</TITLE>
</HEAD>

<FRAMESET cols="40%,50%">

<FRAME SRC="eight.html"
twentyone.html
NAME=LEFT>
NAME=RIGHT>
NAME RIGHT>

</FRAMESET>

</HTML>

٨٣ IT1 Majid Taghiloo

Other <FRAME> Attributes
• There are a number of other useful attributes that can be used
with <FRAME>.

– Normally, a user can resize frames once they have been created.
• For example, the frames on the previous two examples can be resized by
"dragging" the bar separating the frames.
– The NORESIZE attribute can be used to prevent the user resizing
a frame.
– If the content of the page displayed in a frame is too large for the
frame, a b
f browser will add scroll b
ill dd ll bars.
– To prevent the browser adding scroll bars we can use the
SCROLLING attribute.
• W can specify scrolling as YES NO or AUTO
We if lli YES, AUTO.

<FRAME SRC="one.html" NAME=TOP NORESIZE
SCROLLING=NO>

٨۴ IT1 Majid Taghiloo

Nested Frame Sets
• It is possible to nest one frame set within another.
– This allows us to divide the display into arbitrarily complex sets of
frames.

<HTML>
<HEAD>
<TITLE>Untitled Document</TITLE>
</HEAD>
/
<FRAMESET ROWS="81,86%" BORDER=0>
<FRAME SRC="name.html" NAME="Top" SCROLLING=NO NORESIZE>
<FRAMESET COLS="263,74%"BORDER="0">
<FRAME SRC="frame.html" NAME="Left" SCROLLING=NO NORESIZE>
<FRAME SRC= tan.html NAME="Right" SCROLLING=YES>
SRC="tan html" NAME= Right
</FRAMESET>
<NOFRAMES>
<BODY>
Viewing this page requires a browser capable of displaying frames.
</BODY>
/
</NOFRAMES>
</FRAMESET>
</HTML>

٨۵ IT1 Majid Taghiloo

Navigating Between Frames
• Normally when we follow a hypertext link, the new page
overwrites the page containing the link.
– If the original page is displayed in a frame, then the contents of
frame
the frame are overwritten.
– However, within an <A> tag we can specify the frame into which a
p g
page should be loaded.
<HTML>
<HEAD>
<TITLE> Contents</TITLE>
/
</HEAD>
<HTML> <BODY>
<HEAD> <H1>Networks & Internets</H1>
<TITLE>Frames in a column</TITLE> Example pages:
</HEAD> <UL>
<LI> <A HREF="one.html" TARGET=RIGHT>One</A>
<FRAMESET cols="40%,50%"> <LI> <A HREF="two.html" TARGET=RIGHT>Two</A>
<LI> <A HREF="three.html" TARGET=RIGHT>Three</A>
<FRAME SRC="eight_a.html"
g <LI> <A HREF="four.html" TARGET=RIGHT> Four </A>
NAME=LEFT> <LI> <A HREF="five.html" TARGET=RIGHT> Five </A>
<FRAME SRC="two.html" NAME=RIGHT> <LI> <A HREF="six.html" TARGET=RIGHT> Six </A>
<LI> <A HREF="seven.html" TARGET=RIGHT>
</FRAMESET> Seven</A>
/
</UL>
</HTML> </BODY>
</HTML>
٨۶ twentytwo.html IT1 eight_a.html Majid Taghiloo

<HTML>
<HEAD>
<TITLE>Frames in a
column</TITLE>
</HEAD>

<FRAMESET cols="40%,50%">

<FRAME SRC="eight html"
SRC="eight.html"
twentyone.html
NAME=LEFT>
NAME=RIGHT>

</FRAMESET>

</HTML>

٨٧ IT1 Majid Taghiloo

Forms
• It is sometimes useful to have HTML pages that allow a user to
enter data.
– For example, a page used to register a student for the practical work
allows a user to enter data.

• This is achieved by using a form
form.
– A form consists of a collection of controls.
• Text windows.
• Drop down selection lists.
• Radio buttons.
• Check boxes.
• Buttons.

– The exact nature of these controls depends on the platform.
• i e whether the computer is a Java Workstation MS Windows, Unix
i.e., Workstation, Windows Unix,
Macintosh, ...
٨٨ IT1 Majid Taghiloo

• A form is specified by using the tags <FORM> and </FORM>.
/
+ Between these tags we use other tags to insert the specific controls and other
information (e.g., static text) making up the form.
+ Note that we can have more than one form on a page.

<HTML>
<HEAD>
<TITLE>A simple form</TITLE>
</HEAD>
<BODY BGCOLOR=#888888 TEXT=#FFFFFF>
# #
This page contains an example
form.
<FORM>
•••
</FORM>
The form is finished.
</BODY> twentythree.html
</HTML>

٩٠ IT1 Majid Taghiloo

Text Areas
• A text area is a control that allows multiple lines of text to be
entered.
– If the text i too l
f h is large to di l then scroll b are used.
display, h ll bars d
– We use the tags <TEXTAREA> and </TEXTAREA> to introduce
a text area.
– Th text b
The between these two tags i used as the d f l text f the
h is d h default for h
text area.
– Note that most control must be given a name.
• W will see th purpose of th name l t
We ill the f the later.

•••
<FORM>
Type some text:
<TEXTAREA NAME="area" ROWS=5 COLS=30> Default text.
OK. </TEXTAREA>
•••
</FORM>
••• twentythree.html
٩١ IT1 Majid Taghiloo

Single Line Text
• A control that can be used to input a single line of text can be specified using
the <INPUT> tag.
– As we will see, this tag can be used to specify other controls.
– Therefore, the <INPUT> tag has an attribute TYPE which indicates the type of control
required.
– In addition, we can use attributes to give the control a name, a default value and a size.
– The type text is used for ordinary text and the type password for a text which is always
echoed as '*'.

•••
<FORM>
O
•••
<BR><BR> Text:
<INPUT TYPE="text" NAME="details" SIZE=30
VALUE="DEFAULT">

<BR><BR> Password:
<INPUT TYPE="password" NAME="password" SIZE=30
VALUE="DEFAULT">
•••
٩٢
</FORM> IT1 Majid Taghiloo
twentythree.html
•••

Selections
• A selection control allows a user to select one or more options from a
drop down menu.
– We use the tags <SELECT> and </SELECT> to specify a selection.
• Like all controls, we must give a selection a name.
• In addition, we can use the attribute MULTIPLE to allow the user to select more
than one option.
– Between these tags, we use the <OPTION> tag to introduce each option.
• For each option we use the attribute VALUE to give the value of the option. Later we
will see how this value is used.
• We give the text to be displayed after the tag.
• We can use the SELECTED attribute to indicate that by default, an option is
selected.

•••
<BR><BR> Select an item:
<SELECT NAME "it ">
NAME="item">
<OPTION VALUE="1"> One
<OPTION VALUE="2"> Two
<OPTION SELECTED VALUE="3"> Three
<OPTION VALUE="4"> Four
<OPTION VALUE="5"> Five
<OPTION VALUE="5"> Six
VALUE= 5 >
</SELECT>
٩٣
IT1 Majid Taghiloo

Checkboxes
• A checkbox is a small b that can either b
h kb ll box h h be
ticked or not ticked.
– A checkbox is specified using th <INPUT> t
h kb i ifi d i the tag.
– We use attributes to give a checkbox a name and
to indicate if it is ticked by default.
•••
<FORM>
•••
<BR><BR> Checkboxes:
<INPUT TYPE="checkbox" NAME="checked1" CHECKED>
<INPUT TYPE="checkbox" NAME="checked2">
•••
</FORM>
/
•••
twentythree.html

٩۴ IT1 Majid Taghiloo

Radio Buttons
• A group of radio buttons is specified by using a separate
<INPUT> tag for each button.
– To indicate that the buttons belong to the same group, they are
all given the same name.
g
– For each button we use the attribute VALUE to give the value of
the button. Later we will see how this value is used.
– We give the text to be displayed beside the button after the tag.
– W can also use th attribute CHECKED t specify which of th
We l the tt ib t to if hi h f the
buttons is checked.
•••
<FORM>
•••
<BR><BR> Radio buttons:
<INPUT TYPE="radio" NAME="choice" VALUE="1"> A
<INPUT TYPE="radio" NAME="choice" VALUE="2"
CHECKED> B
<INPUT TYPE="radio" NAME="choice" VALUE="3"> C
<INPUT TYPE="radio" NAME="choice" VALUE="4"> D
•••
</FORM>
•••
٩۵ twentythree.html
IT1 Majid Taghiloo

Buttons
• We have two types of regular buttons ‐ submit and reset buttons.
– These buttons can be specified by using the <INPUT> tag.
– By default, these b
f l h buttons are displayed with the text "
l h h "Submit Query"
"
and "Reset".
– We can use the attribute VALUE to change the value displayed.
– We do not need to give buttons names
names.

•••
<FORM>
•••
<BR><BR> Buttons:
<INPUT TYPE="submit">
<INPUT TYPE="submit" VALUE="2nd submit">
<INPUT TYPE="reset">
<INPUT TYPE="reset" VALUE="2nd reset">
•••
</FORM>
٩۶ IT1 Majid Taghiloo

Hidden Input
• It is sometime useful to have controls that are hidden.
+ i.e., controls that have a name and a fixed value that cannot be changed by the
user.
+ In fact, such controls are hidden and do not appear on the display.
+ These controls can be specified by using the <INPUT> tag.
+ E.g. a posting ID

•••
<FORM>
•••
<INPUT TYPE="hidden" NAME="secret" VALUE="Hidden
value">
</FORM>
•••

٩٧ IT1 Majid Taghiloo

Actions
• Q A form allows us t fill out t t fi ld check b tt
Q: f ll to t text fields, h k buttons etc.,
t
but what can we do with the data that a user enters?

• A: We can submit it to a server.
b
– i.e., we send the data entered into the form to a server, this
interprets the data and sends back results.
– This is achieved by pressing any submit button.
– If we press any reset button, then the controls on the form are
reset to their default values.

• For this process to work, we must specify:
– The address of a server.
• For this we use a Uniform Resource Locator (URL).
• We will discuss the structure of URLs later in the course.
– How the data should be sent to the server.
• There are two methods ‐ POST and GET.
– With GET, the data is appended to the end of the URL and sent to the server.
– With POST, the data is sent separately from the URL.

• In both cases, the browser sends pairs consisting of the name of the
control and its current value
value.

٩٨ IT1 Majid Taghiloo

• The <FORM> tag has two attributes:
– METHOD which allows us to specify GET or POST.
– ACTION which allows us to specify the URL.

<HTML>
<HEAD>
<TITLE>A simple form</TITLE>
</HEAD>
<BODY BGCOLOR=#888888 TEXT=#FFFFFF>
This page conatins an example form.
<FORM METHOD="POST"
ACTION="http://www.computing.dcu.ie/cgi-
bin/away/form2mail">
<INPUT T
Type="hidden" NAME="mailto"
"hidd " NAME " ilt "
VALUE="howard@compapp.dcu.ie">
<INPUT Type="hidden" NAME="subject" VALUE="GDF1
Networks & Internets">
••• twentyfour.html
</FORM>
The f
h form i fi i h d
is finished.
</BODY>
٩٩ IT1 Majid Taghiloo
</HTML>

The POST Method
• If the POST method is used, then the user data is entered in the
,
body of the form and sent with the URL to the server.

• POST EXAMPLE – GOOD SITE ABOUT FORMS

http://computing.dcu.ie/cgi-bin/away/form2mail
... [More headers here]

area=+Default+text.++OK.+&item=3&
area=+Default+text ++OK +&item=3&
details=%26%26%26%26%26%26%26%26%26&
password=Dog&checked2=on&choice=2&
secret=Hidden+value Note that line breaks
have been introduced
to fit this single
line of text onto the
slide.
١٠١ IT1 Majid Taghiloo

The GET Method
• If the GET method is used then the user data are
used,
appended to the URL and sent to the server.
– The resulting URL must be unambiguous. Therefore, the
following
f ll i conventions are used:
i d
• The user data is separated from the original URL by a '?'.
• The data for each control is added as a pair name=value.
• Each pair is separated by a '&'.
• Spaces are represented by '+'.
• Special characters ('?', '&', '+', '=', etc.) are represented as numbers
such as %26
h %26.
• •••

http://compapp.dcu.ie/cgi-bin/away/form2mail?
area=+Default+text.++OK.+&item=3&
details=%26%26%26%26%26%26%26%26%26&
password=Dog&checked2=on&choice=2&
secret=Hidden+value

١٠٢ IT1 Majid Taghiloo

Lecture6

More Related Content

Viewers also liked (7)

Similar to Lecture6 (20)

Lecture6