/ /Introduction
© Lucidio Studio Inc/CORBIS
—Igor Stravinsky
HTML
The documents you will be creating are text-only documents. No matter how fancy your page is, no matter how many animations or images are on your page, the foundation of it all is a simple text document.
The source document contains two things:
-
The actual text to be displayed
- Special markers called elements and tags, which specify the structure of the web page such as headings, paragraphs and so on.
For most elements you use pairs of tags (an opened and a closed tag). Tags are set off from the the regular text using the less than (<) and greater than (>) symbols which surround the type of tag: <tag_name>.
The closing tag contains a / to indicate the termination of the element. Between the pair of tags you place the text to be displayed.
An HTML page is a series of nested elements. The entire structure of the page is like a tree. Some elements are siblings. Some elements can be children of other elements. Elements that have no children are called leaf nodes. The outer-most element, which is the ancestor of all other elements on the page, is called the root element. The root element of an HTML page is always <html>.
Syntax refers to the rules for how something needs to be written and punctuated.
Before you can write HTML pages, you need to understand structure and syntax.
The source document has two sections:
-
The head
- The body
The head element
The <head> </head> element is the first child of the root element. The <head> </head> element contains metadata — information about the page, such as the the tags that define the documents title:<head> <title>WWW Introduction</title> <meta name="generator" content="BBEdit 7.0.3" /> </head>
the body element
The body element of the source document contains everything that will be displayed by the browser as the Web page and is marked by the <body> </body> tags. Keep in mind that you cannot put just text within the body tags. The text must be within header, p, div or table tags. Common tags are header and p tags.I generally put a pair of div tags within my bodytags so that I don't have to use p tags.
Heading Tags
The largest heading tag is marked using the <h1> and </h1> tags
To mark paragraphs you can use the <p></p> tags which will insert a blank line at the beginning and at the end of your text block.
The entire source code is enclosed within the <html> </html> tags and the first line of the document specifies the document type.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Page</title>
</head>
<body>
<div>
<h1>The HTML document</h1>
<p>Interdum volgus videt, est ubi peccat. Si veteres ita miratur
laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si
quaedam nimis antique, si peraque dure dicere credit eos, ignave multa
fatetur, et sapit et mecum facit et Iova iudicat aequo. Non equidem
insector delendave carmina Livi esse reor, memini quae plagosum mihi
parvo Orbilium dictare; sed emendata videri pulchraque et exactis
minimum distantia miror. Inter quae verbum emicuit si forte decorum, et
si versus paulo concinnior unus et alter, iniuste totum ducit venditque
poema.</p>
<img src="images/macaroni.gif" alt="" width="43" height="81" />
</div>
</body>
</html>The HTML documentInterdum volgus videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo. Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium dictare; sed emendata videri pulchraque et exactis minimum distantia miror. Inter quae verbum emicuit si forte decorum, et si versus paulo concinnior unus et alter, iniuste totum ducit venditque poema. 
|
Creating pages
You could use any text editor to create a web page, but we will use BBEdit. Text editors that create text-only documents, create documents that do not contain any hidden formatting characters.- Open BBEdit
- Select Control+ ⌘+N to open a new HTML document.
- Make sure XHTML 1.0 Strict is selected
- Give your document a title (This is what appears on the top of your browser).
- Press OK
- Save the document in your web folder and include the extention .html
XHTML
XHTML stands for Extensible Hypertext Markup Language Officially released in January of 2000, XHTML is based on XML rules and philosophy and was created to standardize HTML. Basically XHTML separates the content from the presentation.HTML5 is currently in the process of replacing XHTML as the standard.
Other useful tags
The <br /> element specifies a line break. This tag is an exception to the rule that elements always have a separate open and close tag. There is no </br> tag. This tag is referred to as an empty element. To indicate that it is an empty tag you place a space and the / after the element: <br />Within a paragraph you might want to make a word italic or bold. You would use the inline <em> </em> or <strong> </strong> elements.
If you wanted to classify a block of text as a long quotation, you might want to use the block-level <blockquote><p> </p><blockquote> element:
While the preferred way to specify a font is through a stylesheet, you can use the <big> <big> element to specify Big text or the <small> <small> element to spacify small text.Interdum volgus videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit
In order to make your code more readable you should use comments:
<!-- your comment here -->
Links
Links are created using the anchor tag <a href="url">text</a>Standard unvisited links are underlined and blue and visited links are purple.
All links must include "link text" — that is the text (or image) that serves as the link. Here this is the link text.