Introduction to HTML

HTML Hyper-Text Markup Language: the foundation of the World-Wide Web Design goals:  Platform independence: pages can be viewed using a variety of different computers and browsers.  Universality: servers can store information in their own data formats, but convert it to HTML for access by browsers.  Convenient linking from one page to another (hypertext).  HTML conveys the structure of the document, not its precise appearance. Openness (not proprietary) was key to the adoption of HTML and growth of the Web

Getting Started System Requirements  Text Editors Macintosh: simple text PC: notepad, emacs, word, etc. Unix: vi, emacs, etc.  Browser: display an HTML page Netscape, IE  Internet Service Provider (ISP): connect to the world wide web

Structure of An HTML Page Title  Contained in head tags Protocol  Methods for information transformation  Starting with protocol Server Name  Where is the server Page location  Where is the file on the server

Basic form of HTML An HTML document is all plain text (no binary formatting codes). The contents can be divided into two categories:  Content: material which the user sees when visiting the page  Meta-information: information about the document: its structure, formatting, etc. Meta-information is distinguished from content by using tags. A tag is a tag-name enclosed in angle brackets. Tags usually come in pairs: an opening tag and a closing tag, which is the same tag-name preceded by a slash. Content affected by tag

HTML for This Page My first web page My first program written by:###### Date: ######

HTML Basics Comment tags: begin with : Which HTML version  Html 4.0 transitional with English tag always follows the tag  Indicate the page is written in html. tag follows the tag  Form a container for the head of the page and

Rules about Tags Rule 1. Tag name is not case sensitive Rule 2. Tags as containers. For example, and  For some tags, a closing tag is optional: paragraph. Implies closing of previous paragraph tag.  For some tags, a closing tag is never used: line break. Marks a location, not a region. Unknown tags are ignored. This rule allows new tags to be introduced without causing problems for older browsers. But it also means you need to be careful to spell tag names correctly!

Rules about Tags Tag attribute names and values  Some tags can be qualified by attributes that provide needed additional information or change the default properties of the tag.  Attributes are specified within the angle brackets following the opening tag name. (Attributes are never listed in a closing tag.) Content text

Rules about Tags Spacing HTML does not like spaces immediately after the opening angular bracket or before the closing bracket.  For example,,

Rules about Tags Nesting of tags  Opening and closing tags define regions affected by the tags. These regions must nest, not overlap. Yes: Some text more text and more. No: Some text more text and more.

Heading Tags HTML has six different levels of headings.  Format, where n is a number between 1 and 6. Ending tag is  tag contains an ALIGN attribute For example, ALIGN=“CENTER”

Heading Tags Headings Heading: Size 1 Heading: Size 2 Heading: Size 3 Heading: Size 4 Heading: Size 5 Heading: Size 6

Horizontal Rules places a beveled line on the page. There is no corresponding end tag. Attributes: WIDTH, ALIGN, NOSHADE, and SIZE.

and TAGs tag centers the entire content. tag is a shorthand way of

Tag example Generators New generators Y2k Surplus **Reduced** Millennium Motors Ph. XXX-XXX-XXXX