Lecture 3b: HTML
Tags and Formatting
What You Will Learn Today
- State the purpose, structure and use of HTML tags.
- Use common HTML tags for formatting a document physically and
logically.
- List some common errors to check for.
- Hypertext Markup Language is a set of tags and rules for creating
formatted, linked documents for the World Wide Web.
- A tag is a word enclosed in angle brackets, e.g.
<html>.
- Tags usually come in pairs, with information between a start
<tag> and end </tag>,
e.g.
-
<title>My First Web Page</title>.
-
Exceptions:
<img>, <br> and <hr> tags
do not have end tags.
- Tags can have attributes which come after the tag name and modify
their behaviour, often of the form
attribute="value",
e.g.
<body bgcolor="white"><font size="14">larger text</font>
- Parent tags can enclose children tags, e.g. <html> encloses
both <head> and <body>.
- Tags can be in uppercase or lowercase but lowercase is preferred.
- HTML ignores any extra spaces or lines between tags, combining them into a
single space.
Page Structure Tags
<html> and </html> enclose
the entire document and indicate that the document is a HTML document.<head> and </head> enclose general information
about the HTML file such as title, author, and keywords.<title> and </title> enclose the document title,
which appears between the <head> tags.<body> and </body> enclose all information that
will be displayed in the body of the web page.
Headings
- <h1> is the largest heading and used for the main, most
important headings in a document.
- <h2> through <h6> are progressively smaller headings and are used for
sub-headings or sub-sub-headings.
Paragraphs and Line Breaks
- <p> marks a paragraph; a blank line is added before and after it.
- <br> marks a line break within a paragraph; no blank line is added.
<b>boldface</b><i>italics</i><u>underline</u><big>big</big><small>small</small><sub>subscript</sub><sup>superscript</sup><font size="18" face="arial">Arial
18 Point</font>
<strong>strong</strong><em>emphasis</em><pre> is for preformatted text, e.g. for a long block
of already formatted text that spans more than one line.<code> is for HTML or programming code.<tt> gives text with fixed width font.<address> is for an e-mail or physical address.<abbrev> is for abbreviations.<blockquote> indents a section of text.<quote> is for quotations.<cite> is for citations.
Annoying Formatting to Avoid
<blink></blink><marquee></marquee>
Some Special Characters
- < is less than (<)
- > is greater than (>)
- & is ampersand (&)
- " is a quotation mark (")
- © is a copyright symbol (©)
- accent marks include é è ê and ç (é,
è, ê, ç).
- is a non-breaking space, used when you need more than one space
in a row
- If your page does not display properly, you may be missing a closing tag
or angle bracket > or slash mark / or quotation mark ".
- Also make sure your tag names are spelled correctly. Unrecognised
(misspelled) tags are completely ignored by the browser.
To Do After Class