introduction to html
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
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 RequirementsText Editors
Macintosh: simple textPC: notepad, emacs, word, etc.Unix: vi, emacs, etc.
Browser: display an HTML pageNetscape, IE
Internet Service Provider (ISP): connect to the world wide web
Structure of An HTML Page
TitleContained in head tags
ProtocolMethods for information transformationStarting with protocol
Server NameWhere is the server
Page locationWhere 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.
<tag-name>Content affected by tag</tag-name>
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 programwritten by:######Date: ######</Body></Html>
HTML Basics
Comment tags: begin with <--, end with --><DOCTYPE>: Which HTML version
Html 4.0 transitional with English<HTML> tag always follows the
<DOCTYPE> tagIndicate the page is written in html.
<HEAD> tag follows the <HTML> tagForm a container for the head of the page
<TITLE> and </TITLE>
Rules about Tags
Rule 1. Tag name is not case sensitiveRule 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!
Rules about Tags
Tag attribute names and valuesSome 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-name attribute="value" attribute="value">Content text </tag-name>
<P ALIGN = “center”>
Rules about Tags
SpacingHTML does not like spaces immediately
after the opening angular bracket or before the closing bracket.For example, < Head>, <head >
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>
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”
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>
Horizontal Rules
<HR> places a beveled line on the page. There is no corresponding end tag.
Attributes: WIDTH, ALIGN, NOSHADE, and SIZE.
<CENTER> and <DIV> TAGs
<CENTER> tag centers the entire content.<CENTER> tag is a shorthand way of
<DIV ALIGN = “CENTER”>
<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>