| Date post: | 22-Dec-2015 |
| Category: |
Documents |
| View: | 214 times |
| Download: | 0 times |
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
• Use lower-case tags and attributes
– The picture on this slide is very old
– It shows upper-case tags and attributes, which were allowed back then
– Upper-case tags and attributes are not allowed any more
– Do not use upper-case tags or attributes
Of course, we can have text with
the pictures
• Use lower-case tags and attributes
– The picture on this slide is very old
– It shows upper-case tags and attributes, which were allowed back then
– Upper-case tags and attributes are not allowed any more
– Do not use upper-case tags or attributes
A document
• Use lower-case tags and attributes
– The picture on this slide is very old
– It shows upper-case tags and attributes, which were allowed back then
– Upper-case tags and attributes are not allowed any more
– Do not use upper-case tags or attributes
Never use HTML presentational attributes
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:
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>
