HTML (Hyper Text Markup Language)

Lecture II

Review

Writing HTML files for web pages –efficient

compact – fundamental.Text files with htm extension containing

tags or markers and dataElements, attributes and valuesSimple HTM page – formatting – lists -

images

Objectives of Lecture II

• More about images and page appearance

• Hyperlinks

• Internal and external links

• Tables

Image – Alternate text

<IMG SRC = “pic.gif” ALT = “alternate text”

Alternate text will be displayed if:• Failure to load • Text only browser• Browser set to not display images

More on IMG

• Height and width can be specified as attribute values

Eg. <IMG SRC = “pic.jpg” HEIGHT = “300” >

• Special characters: < &lt > &gt © &copy

Colours• Body tag has attributes to set the colour

for different kinds of page contents, like page colour, text colour, links

colours etc.The colour can be specified as name or

as RGB values in that order, each a

hexadecimal value from 0 to 255.Eg. #000000 stands for black, #FFFFFF

white

Attributes ( …. colour)• The body tag can take attributes :BGCOLOR (to specify background colour)TEXT (to specify text colour)LINK (unvisited links)ALINK (to specify colour of links when

mouse is placed)VLINK (visited links)BACKGROUND (specify background pattern)

Font

• The Font tag can specify the font for enclosed text.

• Attributes like Face , Color, Size etc.<FONT FACE = “Arial” Size = “5”

COLOR = “PURPLE”>

Links

• The critical element is the ability to connect to different documents or move from page to page by clicking on linked text or images.

An ANCHOR tag <A> is used to mark a text or picture as a link.

Using <A> TagThe A tag encloses the text or picture that is

supposed to act as the link.An HREF attribute for the A Tag has the

value which is the URL of the page to be accessed or the (path)filename of the document,

If it is the same machine.Eg. <A HREF = “http://www.nitc.ac.in”>

Our institute</A>

Internal Link

• When a link has to be given to a part of the

same page, when the pages are long, the target part of the page is marked with an anchor tag with the name attribute, to give a name.

The link has anchor tags with HREF attributes having this name as value.

Name attribute

Eg. <A NAME = “Studentlist”>

<OL>

<LI> …

</OL>

</A>

……

<A HREF = “#Studentlist”> Click here for complete list</A>

More on internal links• An external files internal anchor name

can be specified<A HREF =

“URL/Filename.ext#anchorname”></A>Eg<A HREF =

“http://www.nitc.ac.in/stu.htm/#firstyears></A>

Tables

• <TABLE> </TABLE>• <CAPTION> </CAPTION>• <TR> Table row• <TH> Table header• <TD> Table dataAttributes like cellspacing, cellpadding,

border etc for the table tag.

A very important site

• http://www.w3.orgAll information and resources connected

with the WWW including HTML.

Hosting your page.

Many free hosting sites on the web.

Find by a google search