The Comment tag
-
Upload
whitney-duran -
Category
Documents
-
view
17 -
download
0
description
Transcript of The Comment tag
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<!-- 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>
<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” >
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
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
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>
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?
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>
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>
• We can, of course, specify styles for all levels of headings
• Consider a document which has H2 as well as H1 headings
style2.css
• This first style-sheet does not specify anything for the H2 headings:
H1 {COLOR : red ;
FONT-SIZE : 20 ; FONT-FAMILY : arial}
P {COLOR : blue}
• So, as we see on the next slide, H2 headings have the default style
style3.css
H1 {COLOR : red ;
FONT-SIZE : 20 ; FONT-FAMILY : arial}
H2 {COLOR : green}
P {COLOR : blue}