Chapter2 : HTML Web Applications
Chapter 2 HTML: syntax, formatting, tables, links and images
Introduction
To share informations in the same network, it is necessary to speak the same language. That is
why all computers connected to the network use the same protocols to exchange data and the
same language to create the web pages HTML.
I. Definitions
HTML: Hyper Text Markup Language : It is a programming language that creates
hypertext documents.
An hypertext document This document can be also called a web page and will be
next interpreted and displayable by a web browser.
It is a text file with an extention “.html” in whitch we find text and tags. The text will define
the content .The tags will define the document's structure.
A tag : it is an instruction written between two angle brackets < >. A tag has a name
and may have some attributes.
Each tag is written in pair <tab> for the start tag, and </tag> for the end tag.
An attribute :It is a parameter that gives some indications to a tag. It has a name
and a value written as following (name = "value"). The list of attributes are written
after the start tag' name and are separated by spaces.
II. What do we need?
1) A text editor or an HTML editor :
- A text editor: to write the HTML code we just need a text editor like Notepad,
WordPad, vi under UNIX...
- An HTML editor: There is a huge number of HTML editors . The new ones have
graphical interface that helps designers to create HTML items automatically. For
exemple : FrontPage, Dreamweaver, Nvu, BlueGriffon...
2) A browser : to excute HTML pages.
III. First HTML page
At least we must have the following HTML code:
<HTML>
<HEAD>
<TITLE>Page</TITLE>
</HEAD>
<BODY>My first page</BODY>
</HTML>
HTML code Code Signification
1
<HTML> The start of the HTML document.
</HTML> The end of the HTML document.
<HEAD> The start of the header of the web document. Its content is directed to the
browser and will not be visible.
</HEAD> The end of the header.
<TITLE> The start of the title of the web page.
</TITLE> The end of the title of the web page.
<BODY> The start of the body of the web page ( the visible page content ).
</BODY> The end of the body of the web page.
Directions
Most of tags have to be closed.
Between the start tag and the end tag, we can find text or other tags. In the second case,
the last opened tag must be the first closed
When we don't specify the attribute 's value, the browser will take the default value.
IV. Text Formatting
character font : <FONT FACE="font_name">…..</FONT>
character color : <FONT COLOR="#******">…..</FONT>
To give a value to the attribute color, we have two choices:
Writing the color name in english
writing its code :
Color Code
black #000000
blue #0000FF
gray #C0C0C0
purple #8000FF
white #FFFFFF
red #FF0000
green #00FF00
yellow #FFFF00
Character size : <FONT SIZE= "*">...</FONT>
The value of the character size could be given by two ways:
1) a number from 1 to 7. 3 is the default value.
2) relatively to the default size 3, we can write -3,-2,-1, +1, +2,+3.
Bold : <B>...</B> or <STRONG>...</STRONG> or <BIG>...</BIG>
Italic : <I>...</I>
Underlined : <U>...</U>
New line: <BR> , this tag does not need to be closed
Comments : <!--write your comment--> (this text will not be visible)
Center : <CENTER>….</CENTER>
Separator: <HR> this tag does not need to be closed
Chapter2 : HTML Web Applications
Paragraph : <P>…</P>
<P align="right">…</P>
<P align="center">… </P>
<P align="left"> …</P>
<P align="justify">…</P>
Scrolling text : <MARQUEE>...</MARQUEE>
Background : <body bgcolor=”#******”> or <body background=”image.jpg”>
Emphasized : <EM>…</EM>
Titles : the tags <Hn> where n is from 1 to 6. This tag has an attribute ALIGN which
could have the values : left, right, center or justify.
Example:
<HTML>
<HEAD> <TITLE>page</TITLE> </HEAD>
<BODY>
<H1>chapter</H1>
<H2>first title</H2>
<H3>first parapraph</H3>
</BODY>
</HTML>
V. Lists
- Ordrerd List :
<OL TYPE=" A, a, I or i" >
<LI>Element1</LI>
<LI>Element2</LI>
</OL>
- Unordered List :
<UL TYPE= " disc, circle or square " >
<LI>Element1</LI>
<LI>Element2</LI>
</UL>
VI. Special characters
Character HTML Entity
< <
> >
& &
space  
VII. Tables
<TABLE>...</TABLE> : to start and end the table that encapsulates:
<TR>...</TR> : It defines a table row and can contain other tags like<th> or <td>.
<TD>...</TD> :it defines the table data
<TH>...</TH> (Table Header) : it is similar to <TD> but its text is displayed bold and
centered
3
<CAPTION>...<CAPTION> : inserts a global title to the table.
Tag table's attributes
Attribute Effect Value
width in pixels or percentage
border Thickness of the external border in pixels (default, 0, without border)
frame Existence of the external border void
above
below
hsides : above and below
vsides : right an left
lhs : left
rhs : right
box, border : all 4 sides
rules Like “frame” but for the internal none
border rows : between rows
cols : between columns
all : (default)
cellspacing Margin between tow cells in pixels
cellpadding Margin between the edge and in pixels
the cell content
align Table of position in the window. center
left
right
bgcolor Table background color
VIII. Links
<A>...................</A>
Type Function Tag Code Example
Signet <A NAME = " signet_name"> <A NAME = "d"> down </A>
creation text </A>
Signet
<A HREF= "#signet_name"> link <A HREF= "#d"> move down </A>
Internal link </A>
Local address <A HREF="file://file_adress"> <A
Internal
link </A> HREF="file://C:/mine/site/p1.html">
Link Page1 </A>
External To web page <A HREF= "http://web_adress"> <A HREF= "http://www.google.sa">
link </A> google </A>
Chapter2 : HTML Web Applications
To an email <A HREF= "mailto:adress email"> <A HREF=
email </A> "mailto:
[email protected]"> ben
Link guirat </A>
To a file (to <A HREF= "ftp://ftp_adress"> <A HREF=
download it) file </A> "ftp://ftp.commentcamarche.net/docs
/Html.zip "> cmpressed file </A>
VIII. Images
<IMG src= "path/image_name.extension ">
The tag <IMG> has other possible attributes:
WIDTH and HEIGHT
ALT : it is a text that could be displayed until the image become ready (downloaded)
BORDER
ALIGN ( LEFT, RIGHT, MIDDLE , TOP and BOTTOM)
VSPACE and HSPACE : vertical and horizontal space. It gives the space between
text and image in pixels
VIV. Audio and video insertion
To insert an audio file, a video or a flash animation in a web page, we just have to use one of
the two following tags:<embed> or <object>.
1. <embed> </embed>
<embed src="…" height="…" width="…" align="…" hspace="…"
vspace="…" alt="…" autostart="…" loop="… " hidden="…" > </embed>
- autostart: when it is true , the file will start playing automatically
- loop: when it is true it will be replayed automatically. If its value is a number n(1, 2, 3,….) it
will be played n times.
- hidden: the object can be hidden if the value is true.
Example:
<embed src="1.mp3" autostart="true" autoplay="true" loop="true" alt="quran"></embed>
2. <object> </object>
5
<OBJECT type="…" height="…" width="…" align="…"
hspace="…" vspace="…" standby="…" >
<PARAM name="SRC" VALUE="object path and name">
<PARAM name="AUTOSTART" VALUE="true or false">
<PARAM name="LOOP" VALUE="true or false or integer(1,2,3…)">
</OBJECT>
- type : defines the object type. For exmaple:
audio/mp3: mp3
audio/x-ms-wma: Windows Media Audio (.wma)
audio/vnd.rn-realaudio : RealAudio (.ra, .rm …)
audio/x-wav : WAV (.wav)
video/mp4:(.mp4)
video/quicktime : QuickTime (.qt, .mov)
video/msvideo: Microsoft Windows videos (.avi)
video/x-ms-wmv :Windows Media Video (.wmv)
video/x-flv : Flash Video (.flv)
application/x-shockwave-flash : Adobe Flash (.swf)
- standby : displayed until object is loaded
Example:
<OBJECT type=" video/msvideo" height="200" width="300" standby="my video">
<PARAM name="SRC" VALUE="v1.avi">
<PARAM name="AUTOSTART" VALUE="false">
<PARAM name="LOOP" VALUE="false">
Chapter2 : HTML Web Applications
</OBJECT>
