Pictures in Documents

Comment tags (contd.)
• A comment tag is of the form
<!-- Some-comment-text-appears-here -->
• 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/”>
<!-- Written by: James Bowen Date: 19/10/2000 Why: CS4400 class -->
</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
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
Background colour (contd.)
• 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
Background colour (contd.)
• 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:
CPU
Central Processor Unit
VDU
Visual Display Unit
IRQ
Interrupt 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>