The Comment tag Many programming languages allow us to write comments in a program Comments are ignored by the computer when processing the program but

The Comment tag

• Many programming languages allow us to write comments in a program

• Comments are ignored by the computer when processing the program but are useful to humans reading the program text

• HTML also provides comments

• They are ignored by browsers but are useful to humans reading HTML specifications

Comment tags (contd.)

• A comment tag is of the form

• A comment can appear anywhere in a HTML specification

• They are frequently used to tell people who wrote the specification, when, why, etc.

<HTML>

<HEAD>

<TITLE> Politics in Ireland </TITLE>

<BASE HREF=“http://www.iol.ie/pres/”>



</HEAD>

<BODY>

<H1> Presidents </H1>

<P>

The presidents of Ireland were </P>

<OL>

<LI> <A HREF="hyde.htm"> Douglas Hyde </A>

<LI><A HREF="dev.htm"> Eamon de Valera </A>

</OL>

</BODY>

</HTML>

Using <IMG> tags

<IMG> tags

• <IMG> tags are used to incorporate pictures into web documents

• A picture cannot be inserted directly into the HTML spec of a web document, since a HTML spec is a textual spec

• <IMG> tags are used to point to pictures that we want to appear in a web document

<IMG> tags (contd.)

• The <IMG> tag is a structured tag -- it has attributes

• The SRC attribute is used to point to the picture to be included

<IMG SRC = “some-URL” >

A simple web document containing a picture

Of course, we can have text with

the pictures

A document

The ALIGN attribute• In early versions of HTML, IMG tags used to

have an ALIGN attribute for specifying how to align pictures relative to neighbouring text

• This was, therefore, a rendering attribute

• DO NOT USE this attribute– NEVER use rendering attributes

• We will see how to achieve rendering effects more cleanly when we meet Style Sheets

Specifying Image sizes

• The <IMG> tag has further ATTRIBUTES– the WIDTH and– the HEIGHT

which specify the size of the displayed version of an image, in units called “pixels”

<H2> Suez </H2><P><IMG SRC = "mideast.gif" > <IMG SRC = "mideast.gif" WIDTH = 50 HEIGHT = 75 ><IMG SRC = "mideast.gif" WIDTH = 150 HEIGHT = 225 ></P>

Colour of the background

• It would be preferable if you could ignore such rendering features as the colour of the background

• Unfortunately, when you start using pictures, you cannot, since pictures have colour and you have to consider how clearly an image will show up against the background

Background colour (contd.)

• For example, consider how the last document we specified would appear in both Netscape Navigator and Microsoft Explorer


• In Netscape, the images show up clearly against the default background colour, which is white

• In Explorer, the largely-grey images do not contrast so well with the grey-ish background


• We can specify the background colour we want

• Early versions of HTML provided a BGCOLOR attribute in the <BODY> tag

• However this is a rendering attribute and SHOULD NOT BE USED

• We will see how to do it more cleanly when we meet style sheets

Background PATTERNS

• We can also ask the browser to use a repeated version of some image as a background

• This should be done with care, because– it can lead to unreadable documents– it adds to the length of time it takes to

download a document over the Internet

Background PATTERNS

• Early versions of HTML provided an attribute in the <BODY> tag for this purpose

• Again, as with all rendering attributes, DO NOT USE IT

• We will see how to do achieve the same effect more cleanly when we meet style sheets

Another kind of list:

Definition lists

Definition lists:

• Frequently, we want to have lists of items like this:

CPUCentral Processor Unit

VDUVisual Display Unit

IRQInterrupt ReQuest

• In other words, we want to have a list in which each member has two parts:– a TERM, whose meaning is to be defined– a DEFINITION of the term

• HTML provides a tag for this kind of concept: the Definition List tag or <DL> tag

• A list of definitions is delimited by a <DL> tag and a </DL> tag

<DL>

….

….

</DL>

• Each item between the <DL> and </DL> tags has two parts, a term and its definition

• A term is delimited by <DT> and </DT> tags, while a definition is delimited by <DD> and </DD> tags:<DL>

<DT > CPU </DT> <DD> Central Processing Unit </DD>

<DT> VDU </DT> <DD> Visual Display Unit </DD>

<DT> IRQ </DT> <DD> Interrupt ReQuest </DD>

</DL>

• Example document:

<HTML>

<HEAD>

<TITLE> Definition List </TITLE>

</HEAD>

<BODY>

<H1> Some Computing Acronyms </H1>

<DL>

<DT > CPU </DT> <DD> Central Processing Unit </DD>

<DT> VDU </DT> <DD> Visual Display Unit </DD>

<DT> IRQ </DT> <DD> Interrupt ReQuest </DD>

</DL>

</BODY>

</HTML>

• Another example document: <HTML>

<HEAD>

<TITLE> Languages of the World </TITLE>

</HEAD>

<BODY>

<H1> Languages of the World </H1>

<DL>

<DT > Tok Pisin </DT>

<DD> A Melanesian Creole spoken in the South-western Pacific </DD>

<DT> Hakka </DT>

<DD> One of the languages spoken in Fujien province in China</DD>

<DT> Mon </DT>

<DD> A language spoken in Cambodia</DD>

<DT> Xhosa </DT>

<DD> One of the major languages of South Africa</DD>

</DL>

</BODY>

</HTML>

Style Sheets:

the right way to specify rendering

Structure versus Rendering

• HTML specifications of documents should contain only information about how a document is structured into logical units such as paragraphs, pictures, lists, etc.

• HTML specifications should not contain rendering information

• And yet: – we often want to specify how we want a document rendered

Question:

• How can we specify our own style of rendering without mixing rendering rules inside a document’s logical specification?

Answer:

• We should use Style sheets

Style sheets

• A style sheet contains a set of rendering specifications

• We can apply a style sheet to a HTML document specification in order to change the appearance of the document when it is rendered by a browser

A simple style sheet

• This style sheet specifies that all <H1> items in any document to which the style sheet is applied should be printed in red

H1 { COLOR : red}

Storing style sheets:• We can store style sheets in files with the

extension “.css”

• For example, the style sheetH1 { COLOR : red}

could be stored in a file calledstyle1.css

Applying style sheets• We apply a style sheet in a .css file to a

document in a .htm file by calling the .css file in the <HEAD> part of the .htm file:<HTML>

<HEAD>

<TITLE> … </TITLE>

<LINK REL=STYLESHEET

TYPE=“text/css” HREF=“style1.css” >

</HEAD>

<BODY>

<H1> Wars of the 20th Century </H1>

</BODY>

</HTML>

Multiple usage of a style sheet:• We can apply a style sheet which is stored

in a .css file to many documents

• This HTML spec uses style1.css as well: <html>

<head>

<title> … </title>

<link rel=“stylesheet”

type=“text/css” href=“style1.css” >

</head>

<body>

<h1> Tourist Attractions of the World </h1>

</body>

</html>

A more sophisticated style sheet

Specifying styles for <P> items as well as <H1> items

style2.css

h1 {color : red}

p {color : blue}

wars.htm<HTML>

<HEAD>

<TITLE> … </TITLE>

<LINK REL=STYLESHEET TYPE=“text/css” HREF=“style2.css” >

</HEAD>

<BODY>

<H1> Wars of the 20th Century</H1>

<P>The century just coming to an end was one of the bloodiest

on record ... </P>

</BODY>

</HTML>

Several H1 style attributes

h1 {color : red; font-size : 50}

p {color : blue}

Another H1 style attribute

H1 {COLOR : red;

FONT-SIZE : 50 ; FONT-FAMILY : arial}

P {COLOR : blue}

• We can, of course, specify styles for all levels of headings

• Consider a document which has H2 as well as H1 headings

wars2.htm

style2.css

• This first style-sheet does not specify anything for the H2 headings:

H1 {COLOR : red ;


P {COLOR : blue}

• So, as we see on the next slide, H2 headings have the default style

Applying style2.css to wars2.htm

style3.css

H1 {COLOR : red ;


H2 {COLOR : green}

P {COLOR : blue}

Applying style3.css to wars2.htm

Documents

The Comment tag Many programming languages allow us to write comments in a program Comments are ignored by the computer when processing the program but