Transcript Chapter 1
Module 7: HTML
1. What is HTML?
2. Basic syntax, document structure 3. Basic formatting, images, links 4. Lists, table, and forms Read these slides together with the example file 1 CP102 Module 7: HTML
What is HTML
What is HTML?
HyperText Markup Language (HTML) is an Markup Language for marking up WWW documents Markup: tags are used to indicate the formatting, layout and some features of documents. Markup does not show up in the display HTML allows user to Publish documents to the Internet in a format not dependent on platform Present text, graphics and multimedia data Create links pointing to other WWW documents
CP102 Module 7: HTML
2
The development of HTML
HTML was originally developed by Tim Berners-Lee 1990, and had gone through a sequence of versions. HTML2.0, 1995 => HTML3.2, 1997 HTML 4.0, 1997=>HTML 4.01, in 1999 HTML4.01
XHTML1.0, 2000 => XML (eXtensible Markup Language) XML is a more extended than HTML. It enables designers to create their own tags, structures to indicate specific information. XHTML is a special case of XML The development is guided by the World Wide Web Consortium (W3C)
CP102 Module 7: HTML
3
Standard HTML document structure
The whole document must have as its root A document consists of a head and a body The
CP102 Module 7: HTML
4
Basic Syntax
Tag and elements Tags are markups to tell browser how to display it’s contents. An element: tags and its marked contents Tag format: Opening tag
CP102 Module 7: HTML
5
Basic text formatting
• Paragraph Elements:
• Line break tag
• Heading
, …,
•
is the default size • and use smaller font size
• Blockquote • Preformatted
use smaller font size
• Blockquote • Preformatted
• Preformatted
CP102 Module 7: HTML
6
•
Font Styles and Sizes (can be nested)
• • • • •
Boldface - Italics Larger Smaller monospace
•
Superscripts and subscripts
• •
Subscripts with Superscripts with
CP102 Module 7: HTML
7
• Character Entities
Char Entity
& & " < > ' ¼ ½ ¾ (space) < > " Double quote &apos Single quote ¼ Less than Greater than One quarter ½ ¾ °
Meaning
Ampersand One half Three quarters Degree   Non-breaking space • Horizontal rules
CP102 Module 7: HTML
8
Images
• GIF (Graphic Interchange Format) 8-bit color (256 different colors) • JPEG (Joint Photographic Experts Group) 24-bit color (16 million different colors) • Portable Network Graphics (PNG) • Images are inserted into a document with tag with the src attribute
CP102 Module 7: HTML
9
Hypertext Links
• Hypertext is the essence of the Web • Both links (sometimes called sources) and targets (or anchors) of links are specified with the anchor tag () • A link is specified with the href (hypertext reference) attribute of • The content of is the visual link in the document e.g.
CP102 Module 7: HTML
10
Lists
Unordered lists The list is the content of the
- tag List elements are the content of the
- tag Ordered lists The list is the content of the
- tag Each item in the display is preceded by a sequence value Nested lists Any type list can be nested inside any type list The nested list must be in a list item
CP102 Module 7: HTML
11
Tables
A table is a matrix of cells, each possibly having content The cells can include almost any elemen A table is specified as the content of a