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
- 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.
- Tags usually come in pairs, with information between a start
<tag> and end
<title>My First Web Page</title>.
do not have end tags.
- Tags can have attributes which come after the tag name and modify
their behaviour, often of the form
<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
Page Structure Tags
the entire document and indicate that the document is a HTML document.
</head> enclose general information
about the HTML file such as title, author, and keywords.
</title> enclose the document title,
which appears between the
</body> enclose all information that
will be displayed in the body of the web page.
- <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.
<font size="18" face="arial">
<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
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