1 / 16

Introduction to HTML

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.

malcolm-kirby
Download Presentation

Introduction to HTML

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. Introduction to HTML

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

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

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

  5. 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. <tag-name>Content affected by tag</tag-name>

  6. HTML for This Page • <!-- File name: first.html--> • <!DOCTYPE HTML PUBLIC" "-//W3C//DTD HTML 4.0 Transitional //EN"> • <HTML> • <HEAD><TITLE> My first web page</TITLE></HEAD> • <BODY> • My first program • written by:###### • Date: ###### • </Body></Html>

  7. HTML Basics • Comment tags: begin with <--, end with --> • <DOCTYPE>: Which HTML version • Html 4.0 transitional with English • <HTML> tag always follows the <DOCTYPE> tag • Indicate the page is written in html. • <HEAD> tag follows the <HTML> tag • Form a container for the head of the page • <TITLE> and </TITLE>

  8. Rules about Tags • Rule 1. Tag name is not case sensitive • Rule 2. Tags as containers. For example, <html> and </html> • For some tags, a closing tag is optional: <P> paragraph. Implies closing of previous paragraph tag. • For some tags, a closing tag is never used: <BR> 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!

  9. 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.) <tag-nameattribute="value" attribute="value">Content text </tag-name> <P ALIGN = “center”>

  10. Rules about Tags • Spacing • HTML does not like spaces immediately after the opening angular bracket or before the closing bracket. • For example, < Head>, <head >

  11. Rules about Tags • Nesting of tags • Opening and closing tags define regions affected by the tags. These regions must nest, not overlap. Yes: <tag1>Some text <tag2>more text</tag2> and more.</tag1> No: <tag1>Some text <tag2>more text</tag1> and more.</tag2>

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

  13. Heading Tags • <! -- file name: heading.html ----- > • <!DOCTYPE HTML PUBLIC" "-//W3C//DTD HTML 4.0 Transitional //EN"> • <HTML> • <HEAD><TITLE> Headings</TITLE></HEAD> • <BODY> • <H1>Heading: Size 1 </H1> • <H2>Heading: Size 2 </H1> • <H3>Heading: Size 3 </H1> • <H4>Heading: Size 4 </H1> • <H5>Heading: Size 5 </H1> • <H6>Heading: Size 6 </H1> • </Body></Html>

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

  15. <CENTER> and <DIV> TAGs • <CENTER> tag centers the entire content. • <CENTER> tag is a shorthand way of <DIV ALIGN = “CENTER”>

  16. <Center> Tag example • <! --file name: generator.html --> • <!DOCTYPE HTML PUBLIC" "-//W3C//DTD HTML 4.0 Transitional //EN"> • <HTML> • <HEAD><TITLE>Generators</TITLE></HEAD> • <BODY> • <CENTER> <H3> <Generators </H3> • New generators <BR> • Y2k Surplus <BR> • <H4> **Reduced** </H4> • Millennium Motors <BR> • Ph. XXX-XXX-XXXX </CENTER> • </Body></Html>

More Related