1 / 61

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

whitney-duran
Download Presentation

The Comment tag

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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

  2. 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.

  3. <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>

  4. Using <IMG> tags

  5. <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

  6. <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” >

  7. A simple web document containing a picture

  8. Of course, we can have text with the pictures

  9. A document

  10. 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

  11. 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”

  12. <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>

  13. 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

  14. Background colour (contd.) • For example, consider how the last document we specified would appear in both Netscape Navigator and Microsoft Explorer

  15. 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

  16. 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

  17. 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

  18. 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

  19. Another kind of list: Definition lists

  20. Definition lists: • Frequently, we want to have lists of items like this: CPU Central Processor Unit VDU Visual Display Unit IRQ Interrupt ReQuest

  21. 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

  22. 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>

  23. 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>

  24. 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>

  25. 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>

  26. Style Sheets: the right way to specify rendering

  27. 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

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

  29. Answer: • We should use Style sheets

  30. 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

  31. 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}

  32. Storing style sheets: • We can store style sheets in files with the extension “.css” • For example, the style sheet H1 { COLOR : red} could be stored in a file called style1.css

  33. 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>

  34. 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>

  35. A more sophisticated style sheet Specifying styles for <P> items as well as <H1> items

  36. style2.css h1 {color : red} p {color : blue}

  37. 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>

More Related