Introduction To HTML

Introduction
Contents
Introduction to HTML What is HTML? Why HTML?
Introduction to HTML
What is HTML?
HTML is the language of the world wide web. It is used to specify information about the content of web pages, which web browsers can use to display web pages. Although it is a language, and therefore has its own rules, it is nowhere near as complicated as spoken languages (such as English) or programming languages (such as C). HTML stands for Hypertext Markup Language; this gives you an idea of what it is - it is used to markup hypertext (linked content). Since this is the only thing it does - it does not allow you to write computer programs, and it does not allow you to write your own markup languages (for that you require SGML or XML), it therefore can be extremely simple.
Why HTML? 1. 2. 3. 4. Learning HTML gives you a marketable skill. It enables you to communicate with others. Web browsers are free, and if you know HTML you do not need a (costly) word processor. It enables you to correct problems caused by authoring tools - rather than being stuck if your HTML authoring program does not do what you want or does it incorrectly, you can fix it yourself.
Now that I've explained the background of HTML, you will probably want to continue with the next section, which discusses HTML itself.
Beginning HTML
Contents
Getting started
Example web page
HTML concepts
Tags Elements Attributes Attribute values and quote marks

Anatomy of a web page
Item 1 - the <HTML> tag Item 2 - the <HEAD> tag Item 3 - the <TITLE> tag Item 4 - the </HEAD> tag Item 5 - the <BODY> tag Item 6 - the <H1> tag Item 7 - the </H1> tag Item 8 - the <P> tag Item 9 - the </P> tag Item 10 - the </BODY> tag Item 11 - the </HTML> tag
Getting started
HTML is simply human-readable text. See below for an example of a web page.
Example web page
<HTML> <HEAD> <TITLE> My first web page </TITLE> </HEAD>
<BODY> <H1> About me </H1> <P> I live in New Hampshire. </P> </BODY> </HTML> And that would be displayed similar to that below:
About me
I live in New Hampshire. I will explain what each of the lines means one by one, but first note the following: that the indentation makes no difference to the page, but is merely there to make it easier to read - the following would have the same effect:
<HTML><HEAD><TITLE>My first web page</TITLE></HEAD><BODY><H1>About me</H1><P>I live in leafy New Hampshire.</P></BODY></HTML>
In addition, case is unimportant in HTML - you can equally well place your markup in lowercase or a combination of upper and lowercase.
HTML concepts
Tags
Any piece of text enclosed in < and > is called a tag. This distinguishes it from normal text. A tag is an instruction to the web browser that will not appear on screen. It does not matter whether tags are in upper or lower case. Most opening tags will have a closing tag. Closing tags look the same as opening tags but has a / to mark it as closing. For example, here is a hypothetical opening tag: <atag>, and here is its closing tag: </atag>.
Elements
A tag is a marker, an element is an actual thing. For example, given this: <B>bold text</B> the <B> and </B> are open and closing B tags, but the 'bold text' as a whole is the B element.
Usually, the start and end of an element is marked by a tag, but this is not necessarily so sometimes these are implied For example, the HTML element (which is simply the element that contains the whole of a web page) is implied. This means that even if you don't have the opening or closing tag, since every web page, by definition, includes the HTML element, the element's presence is implied. Similarly, for paragraphs (the P element), although you may not omit the opening tag, you may omit the closing tag, since if you have:
<P> Paragraph <P> Next paragraph
then the P tag by starting the second paragraph implies the end of the first paragraph.
Attributes
An attribute is something that gives the browser extra information about the element. Attributes are only specified on opening tags, since there is no point in telling the browser something about a tag that is being closed. For example, <BODY bgcolor="white">, bgcolor is BODY's attribute. Attributes usually have values, e.g., <TAG attribute="value">, but not in all cases - e.g., <TABLE border>.
Attribute values and quote marks
Attribute values (e.g., white in bgcolor="white") must be enclosed in matching quotes (" " or ' ') unless they only contain a-z, A-Z, 0-9, -, and '.'. However, since they are always valid if included but sometimes invalid if not included, it is recommended that you always use quote marks. To illustrate, <P style=color: red> is not valid, since the attribute value contains spaces and a colon, but <BODY bgcolor=red>, is, since it does not.
Anatomy of a web page

This section introduces you to the most important concepts introduced in the small piece of HTML above.
Item 1 - the <HTML> tag
The first line of any web page should (but need not) be this tag.
Item 2 - the <HEAD> tag
Next comes this tag. It contains any content that is not displayed as part of the body of the document.
Item 3 - <TITLE>
Between the <TITLE> and </TITLE> tags come the document's title. E.g., <TITLE>Introduction</TITLE>. The TITLE will be displayed at the top of the screen in the application's title bar. Every document MUST have a title.
Item 4 - </HEAD>
This is to say that the HEADer is over.

Item 5 - <BODY>
This says that now you want to put the BODY. Inside the BODY comes things like paragraphs, lists and headings.
Item 6 - <H1>
This is to say that you want a heading now. The H stands for heading, and 1 for the size of the heading. There are 6 sizes of heading from H1 down to H6.
Item 7 - </H1>
This says that the heading is over. If you did not tell the browser this, it would think everything was a header, and display everything in the huge header font.
Item 8 - <P>
This says that now we want a paragraph. Without this tag, there would be no space between paragraphs.
Item 9 - </P>
Now our paragraph is over.

Line 10 - </BODY>
Now our BODY is over.
Line 11 - </HTML>
Now the HTML file is finished. Now that I've introduced you to the basic concepts of HTML, I suggest that you try making a page of your own. Try starting with the basic page above, and then save it (you shouldn't use a word processor to do this, because it will save it with all kinds of irrelevant formatting information - instead use a text editor such as Notepad) and load it up in your web browser. Be sure to give it a name ending in '.html' or '.htm' - e.g., myfile.html. Once you are totally happy with what has been discussed so far, you should continue with the next section, which considers individual elements.
Content-based elements
Contents
Content-based elements Block-level elements
<P> Headings <BLOCKQUOTE> <PRE> <DIV> <ADDRESS>

Lists
LI OL UL
Definition lists
<DL>
<DT> <DD>
Inline elements Special elements
<BR> <HR>
Sample page
Content-based elements
The main thing about HTML is that it is content-oriented. This means that you should mark text according to what it contains. For example, if you mark your address with the ADDRESS tag, you can then tell the web browser that you want ADDRESSes to be italic, or green or whatever. If you just mark it as a paragraph, this is not possible. Equally, you should avoid using tags for reasons other than they were intended. Thus you should not use the OL (ordered list) tag for reasons other than creating ordered lists. This is because if you do, it makes it impossible for you to specify that you want all ordered lists to be displayed in a certain way, since it would affect text that wasn't really an ordered list at all.
Block-level elements
Block level tags are so-called because they create a block - i.e. a new line before and after.
<P>
The most basic of all tags, this indicates a paragraph. It is closed by a </P> tag or by implication - another block-level element. E.g.,:
<P> This is a paragraph </P> <P> This is in a separate P element. <P> This is a paragraph <P> This is a paragraph - the other one's end is implied.
The P tag may only contain inline tags (i.e. not other block tags such as P).
You should avoid using empty paragraphs to create white space.

Headings
As already explained there are 6 types of heading, from H1 (largest) to H6 (smallest). You should try in use headings in a logical way:
<H1>THE WOMBAT HOME PAGE</H1> <H2>Habitat<H2> <H3>Australia</H3> <P> ... </P> <H3>New Zealand</H3> <P> ... </P> <H2>Food</H2>
This is a good way to structure your headings - going from H1 for the overall title, to H2 for categories to H3 to divisions of these categories. You should try and avoid skipping out numbers - e.g., going from H1 to H3. The heading tags may not contain other block elements, so, for example, <H1> A heading <P> A paragraph </P><H1> is not valid. They must always have an end tag.
What now?
Believe it or not, having considered just a few elements, you now know enough to write great pages. This page, for example, is almost entirely constituted of H and P elements. Now that you really have the ability to write a good page, I suggest you go and practice your newfound skill. Remember, the essential elements (if you will pardon the pun) of an HTML page look like this: <HTML> <HEAD> <TITLE> My first web page </TITLE> </HEAD> <BODY> <H1> About me </H1> <P> I live in New Hampshire. </P>
</BODY> </HTML> Once you have done this, I suggest you continue by reading about all the other elements, but remember that pages will be mainly constituted of headings and paragraphs.
<BLOCKQUOTE>
This indicates that the following text is a block quote (i.e. a long quote, not just a few words). For example:
<BLOCKQUOTE> To be or not to be, that is the question. </BLOCKQUOTE>
Generally browsers distinguish block quotes by indenting them both from the left and right margin. BLOCKQUOTEs must always be closed by an end tag.
<PRE>
Normally web browsers ignore line breaks and additional spaces between words. This is because HTML would be very difficult to read if it only had spaces where they appear on screen. However, <PRE> overrides this, meaning that spaces and line breaks appear on screen where they do in the document. In addition, to ignoring spacing, most browsers display PREformatted text by default in a monospaced font.
<PRE> A bit here. A N </PRE> D S O And some more over here. M E EXTRA S P A C E S
The PRE tag may only contain inline elements (not block ones such as P or H1). It must always be closed by an end tag.
<DIV>
The DIV tag is very similar to the P tag. However, it differs in two main ways: 1. browsers tend to have a whole blank line between paragraphs, whereas DIV tags just have a line break, 2. DIV tags may contain other block elements, making them useful for marking logical divisions in documents, 3. DIV elements must be closed with an end tag. E.g.:
<DIV> <P> A paragraph inside a DIVision. </P>
<P> And another. </P> </DIV>
The DIV element is best reserved for containing other elements so that styles can be applied to all of them.
<ADDRESS>
This is used for marking something as your (e-mail/home/company, etc.) address. E.g.
<ADDRESS> E-mail me at joepublic@joepublic.com </ADDRESS>
Browsers tend to mark addresses in italic. The ADDRESS tag may only contain inline tags. It must always have an end tag.
Lists
There are two main types of list:

1. Numbered (or ordered) lists
And bulleted (or unordered) lists
Therefore, there will be two HTML elements: one for ordered lists, and one for unordered lists.
LI
This states that the element is a list item. List items may only occur inside the OL or UL elements. E.g:
<LI> This is a list item </LI>
Note that the example above is not valid on its own, since you have failed to state what sort of list you want it to be. To see the types of list, read on. The end tag of list items can be omitted, so <LI>This is a list item<LI>This is another list item is also valid.
OL
This states that a list is ordered. E.g.:
<OL> <LI> This list item will be prefixed by the number 1. </LI> <LI> And this one will be prefixed by the number 2. </LI> </OL>
That example might be rendered like this:

1. This list item will be prefixed by the number 1. 2. And this one will be prefixed by the number 2.
Browsers left-indent ordered lists by default.

UL
This states that a list is unordered. E.g:

<UL> <LI> This will be prefixed by a bullet. <LI> As will this, by an identical bullet. </UL>
That might be rendered like this:

This will be prefixed by a bullet. As will this, by an identical bullet.
Note in the code how the optional end tags of the LI elements have been omitted. Browsers left-indent unordered lists by default.
Definition lists
These are used when you are defining a number of phrases, terms, words, etc. E.g.:
Block element One that is preceded and followed by a line break Tag Something in between < and >.
This type of list is not required nearly as often as the ordered and unordered kinds.
Here is an example of the code for a definition list:

<DL> <DT> Term to be defined </DT> <DD> Definition </DD> </DL>
Note that a single definition description may define several definition terms and vice versa.
<DL>
This, like OL and UL, indicates that there is about to be a Definition List. The Definition List is required in order to enclose the Defintion Term and the Definition Description.
<DT>
This indicates the Term to be Defined.

<DD>
And this indicates the Definition Description. Defintion descriptions are by default left-indented.
Inline elements
Inline elements are used for marking bits of content within a block. For example, you might like to specify that a piece of text within a line should be bold. Like this piece of bold text. That effect was created by this code: <P> Inline elements are used for marking bits of content within a block. For example, you might like to specify that a piece of text within a line should be bold. Like <B>this piece of bold text</B>. </P> Here is a list of the main inline elements:
Name of tag Content <EM> <B> EMphasized text Bold text Typical formatting Italic Bold
<I> <BIG> <SMALL> <STRONG> <DFN> <SAMP> <INS> <DEL> <CODE> <VAR> <KBD> <CITE> <ABBR>
Italic text Big text Small text STRONGly emphasized text That the text is a definition
Italic Bigger Smaller Bold Italic
That the text is sample output of a program (or Monospaced font similar) That the text has been inserted That the text should be deleted That the text is computer code That the text is a variable That the text is keyboard input Underlined Strike through Monospaced font Italic Monospaced font
That the text is an authority that is being CITEd Italic That the text is an ABBReviation Plain text Plain text Quote marks will be inserted before and after it Subscript Superscript
<ACRONYM> That the text is an acronym <Q> <SUB> <SUP> That the text is a short quotation That the text should be subscripted That the text should be superscripted
Note that all inline elements must be closed by an end tag. For example: <B> Bold text </B> Inline elements may not span block elements. Invalid is:
<P> <B> Bold text </P> <P> New block element; invalid - B should have been closed</B>
Special elements <BR>
This indicates a line break. Unlike elements we have met previously, it does not have a closing tag. E.g: <P> This is a paragraph. I don't want the extra space of a new paragraph, so I'll just have a line break.<BR> And thus we continue. </P>
<HR>
Horizontal rules are used to indicate divisions within documents. They are specified by use of the <HR> tag. For example: <P> End of a section </P> <HR> <H3> A heading in the new section </H3> Here's what the typical horizontal rule looks like:
Sample page
Here's a sample web page: <HTML> <HEAD> <TITLE> My second web page </TITLE>
</HEAD> <BODY> <H1> About me </H1> <P> I live in <EM>New Hampshire</EM>. </P> <H2> I like </H2> <OL> <LI> cheese <LI> pies </OL> </BODY> </HTML> And here's how it might be rendered:
About me
I live in New Hampshire.
I like
1. cheese 2. pies
I strongly recommend that you go and hone your skills now - practise writing documents in HTML; convert some of your existing work into HTML - anything to get practise with HTML. The next section deals with formatting of elements, and after that comes how we make links between pages.
Formatting
Contents
Introduction Style sheets
Embedded, linked and inline style Style types Naming elements - the class and id attributes
Inefficient styles
Older browsers Colors Styling the BODY Other old-style methods Alignment
Formatting elements
CENTER, U, S/STRIKE FONT
Introduction
So far we've discussed how you mark elements according to their types. In this section, this will be developed to allow elements to be styled.
Style sheets
Style sheets are used to specify the formatting of elements. A typical style sheet declaration looks like this - color: red. Here's the declaration styling all ADDRESS elements: ADDRESS {color: red} Style sheets are a subject in their own right (covered by RichInStyle.com's guides to CSS2 and CSS1) and which deserve separate study. However, here's a brief introduction from an HTML standpoint.
Embedded, linked and inline style
Style may be included in three different ways:

1. Using the STYLE element 2. Using the style attribute of elements 3. Using the LINK element
Here's an example of each: 1. <HTML> <HEAD> <TITLE> Embedded style example </TITLE> <STYLE type="text/css"> <!-BODY {background-color: black; color: white} --> </STYLE> </HEAD> </HTML> 2. <HTML> <HEAD> <TITLE> Linked style example </TITLE> <LINK rel="stylesheet" href="style.css" type="text/css"> </HEAD> </HTML> 3. <HTML> <HEAD> <TITLE> Inline style example </TITLE> <META http-equiv="Content-Style-Type" type="text/css"> </HEAD> <BODY> <P style="color: red"> Some red text </HTML>
1. Embedded styles
The STYLE element may be used to specify styles about a document. There is very little to note about it except that it should include the  tags at the beginning and end of the element to hide style sheet data from old browsers.
2. Linked styles
The LINK element is very similar except it stores the style in a separate file: The great advantage that linked style sheets have is that by changing one file, you can affect the style of hundreds of pages to which the style sheet is linked. They also reduce file size by avoiding duplication of styles. Style.css might look something like this: BODY {background-color: black; color: white}
3. Inline style
Inline style is essentially the same as the other types except it only applies to the element to which the style attribute is applied. Note that the style attribute applies to all elements.
General style sheet syntax
In general pages are styled by using a selector (which states the elements to which style declarations apply) and one or more declarations. For example, to state that all H1 elements should be twice as large as their ancestor element, you would have H1 {font-size: 200%}. If the style were to be specified via the style attribute, you could omit the selector - style="font-size: 200%". For example, this page is (partly) styled by: BODY {color: black; background: white; font-family: Arial, sans-serif; margin-left: 10%; margin-right: 8%}
Style types
The only style sheet type that is used is CSS. However, since other types do exist, it is necessary to use the type attribute when you use <STYLE> or <LINK>. This should always be set to text/css. For example, <STYLE type="text/css">. If you use inline style (style specified via the style attribute), you should declare the style language of the document. This is preferably done by setting the Content-Style-Type HTTP header to text/css, but it can be done with an HTTP header equivalent, which should be included in the HEAD of a page: <HEAD> <TITLE> Title </TITLE> <META http-equiv="Content-Style-Type" type="text/css"> </HEAD>
Naming elements - the class and id attributes
Although I have already demonstrated that you can give every element of a particular type a style, and you can apply style to an element on a tag-level basis, I have not as yet explained how to set many elements to the same style. This is done using the class attribute. E.g.: <P class="aclass"> For example, at the bottom of this (and every page) I have a P element that has a class set to "copyright". In my style sheet I have P.copyright {font-size: 80%}, which specifies that P elements with a class of copyright should be 80% of the size of the rest of the document. Thus classes are referred to in the same way as ordinary elements except they are prefixed by a '.' E.g.: <STYLE type="text/css"> <!-.cls1 {color: red} --> </STYLE> The element name is optional, but P.class applies only to P class="class" whereas .class applies to DIV class="class", etc.). You should only include a-z, A-Z and 0-9 in classes. In addition, you should not start classes with numbers.
IDs are almost exactly the same as classes except they may only occur once in any document whereas classes can occur any number of times. For example: <P id="unique"> </P> It would also be selected in a different way - using a '#' instead of '.'. #id {color: red}
Inefficient styles
The styles that we have discussed thus far are efficient in that they style elements according to their content, reduce file sizes and increase maintainability by being kept separately. There are however styles that do not have this advantage but do have the advantage of being supported by very old browsers (Internet Explorer 2 and before, Netscape 3 and before).
Older browsers
Unfortunately, since very old browsers do not support style sheets, they are denied the styles they provide. To get around this, you may wish to use older inefficient HTML (inefficient because you need to restate the style every time you want to use it rather than just stating it once). My recommendation on this front is that it is not worth bothering except for on BODY. This is because changing BODY's background from the default gray makes a vast difference to a page whereas changing FONT tags, etc., do not. For example, I recommend that you do: <BODY bgcolor="white" text="black"> but not: <H1> <FONT face="Arial"> A heading in Arial </FONT> </H1> However, I do include FONT tags in my navigational table at the top: <TABLE bgcolor=black><td> <a href="../guides/" title="Tutorials"><FONT color=white><span>Tutorials</span></font></a>. This is because it is important that these look good, even in old browsers.
Colors
Colors are specified either using a color name or using a 6 digit hexadecimal number. Here's a list of valid colors:

black = #000000 silver = #c0c0c0 gray = #808080 white = #ffffff maroon = #800000, red = #ff0000 purple = #800080 fuchsia = #ff00ff green = #008000, lime = #00ff00 olive = #808000 yellow = #ffff00 navy = #000080, blue = #0000ff teal = #008080 aqua = #00ffff.
For example, bgcolor="blue" is the same as bgcolor="#0000FF". Note that the hexadecimal number is red green blue where the first two digits refer to the red component, the second two to the green component, and the third two to the blue component. Thus a color #12253F means a red value of 12hex, a green value of 25hex and a blue value of 3Fhex.
Styling the BODY
Five attributes are used to specify the style of the BODY (i.e., the style of the whole of the document):
1. 2. 3. 4. 5. bgcolor - this specifies the background color of the page text - this specifies the foreground color of the page link - this specifies the color of unvisited links vlink - this specifies the color of visited links alink - this specifies the color of links that are being activated
Personally, I always set these attributes because CSS provides that where CSS contradicts HTML (i.e., through the background-color property), CSS wins. This means that if you set: <BODY bgcolor="white" text="black" link="blue" vlink="red" alink="#ffff00"> if you have a style sheet that states BODY {background-color: black; color: white}, then it will override it.
Other old-style methods
There are other methods that you can use to style your document. However, I strongly recommend that you do not use them. For completeness, however, I include them here.
Alignment
It is possible to specify the alignment of block elements using HTML. For example, to specify that a P element should be right-aligned, you would use <P align="right">. However, if instead you did <P class="copyright"> (or whatever the reason was for wanting the text right-aligned), you could have P.copyright {text-align: right}. If you later wished to center the text, you could just change that one line: P.copyright {text-align: center}. This demonstrates how much better CSS is for formatting than HTML - just change one line and you can change many hundreds of individual elements. If you had done this in HTML, you would have to change each and every one individually. Valid values for align are left, center, right and justify. The default value is left for left to right text, and right for right to left text.
Formatting elements CENTER, U, STRIKE
The CENTER element is used to center text. However, it is better to use a class and the CSS property 'text-align'. E.g.: <DIV class="center"> <H1> A heading> </H1> <P> A P element. </DIV> <STYLE type="text/css"> <!-DIV.center {text-align: center} --> </STYLE> rather than: <CENTER> <H1> A heading> </H1>
<P> A P element. </CENTER> because the former option allows you to change it more easily. U is used for underlining, and STRIKE for strikethrough. E.g., <P><U>This is underlined</U>.
FONT
The FONT element is used to specify the font that should be used. It takes three attributes:
1. size 2. face 3. color
For example: <FONT size="3" face="Arial, Helvetica" color="red">. Note that size takes an integer value between 1 and 7 (where 3 is the default), or alternatively a relative size. Thus <FONT size="+2"> means 2 levels bigger than the current size. In addition, the face attribute takes a comma-separated list of font names, where if the first is not available, the second will be used. The FONT element is strongly deprecated because other methods of styling pages are far more efficient. For example, instead of: <H1><FONT face="Arial, Helvetica">A heading</FONT></H1> for each and every such heading, you should instead have: <HEAD> <STYLE type="text/css"> <!-H1 {font-family: Arial, Helvetica, sans-serif} --> </STYLE> </HEAD> If this were to be inserted in a LINKed style sheet, the one ruleset can be used to style hundreds of pages, instead of using the FONT element hundreds of times for each instance of H1. That's the end of this part of the HTML guide. The next section considers links, so I suggest you click here to continue.
Links
Contents
Links The A element
Other attributes of the A element

URIs
Absolute URIs Relative URIs Linking to a particular part of a document

Base URIs
Links
The world wide web would be nowhere without links. Without them, there would be no way to get from one page to another without typing in the address by hand.
The A element
The A (anchor) element is used to make links from one document to another. In addition, it is used to create targets for other links to link to. To make a link you enclose the text you want to be marked as a link in an A element: The <A href="next.html">next section</A> That example might be rendered thus: The next section. As you can see, there are essentially two parts to an A element - its content, enclosed within the A element; and the address to which it is linking, specified by href.
Other attributes of the A element
In addition to specifying the hypertext reference of the anchor, the following attributes may be used:
1. title - this specifies a title for the link. Titles are used to provide a tooltip for the link when the mouse passes over them. It is recommended that you give all anchors a title because it makes your pages look more professional. For example, <A href="next.html" title="The next section"> would result (in most browsers) in a tooltip saying 'The next section' when the mouse passes over. URIs Absolute URIs Absolute URIs specify the location of links in a way that is absolute - it is not dependent on the location of the linking document - in the same way that 'c:\documents\mydoc.doc' is meaningful from anywhere on your hard disk, so too http://www.richinstyle.com is meaningful regardless of the location of a web page.
To use absolute URIs, you must specify the type of mechanism that is used to link to the resource. For example, <A href="http://www.richinstyle.com"> or ftp://www.foo.com. In addition to these, you may also specify a link to an e-mail address. For example, <A href="mailto: foo@foo.com">.
Relative URIs
Relative URIs specify the location of linked resources relative to the location of the linking document. For example, if a document is http://www.richinstyle.com/guides/links4.html, then <A href="html4.html"> is interpreted as relative to the directory that links4.html is in. Thus that A element would result in http://www.richinstyle.com/guides/html4.html. In addition, you may specify a directory - <A href="/copyright.html"> from http://www.richinstyle.com/guides/html4.html means http://www.richinstyle.com/copyright.html, since the / means relative to the root directory. <A href="./html4.html"> from http://www.richinstyle.com/guides means http://www.richinstyle.com/guides/html4.html, since the '.' means the current directory. <A href="../copyright.html"> from http://www.richinstyle.com/guides means http://www.richinstyle.com/copyight.html, since the '..' means up one directory. Finally, <IMG src="guides/html.gif"> from http://www.richinstyle.com means http://www.richinstyle.com/guides/html.gif.
Linking to a particular part of a document
If you want to link to a particular part of a document, for example to make cross-references within a document, it is essential to be able to refer to a particular party of the document. This is done using the A element with the name attribute. For example:
<H1> <A name="x"></A> A heading </H1>
This could then be referred to by <A href="#x">, or <A href="http://www.richinstyle.com/document.html#x"> (i.e., you add the '#' sign and the name of the link to the URI). Note that two identical anchor names cannot appear in the same document, and even though names are case-sensitive, they cannot be identical but for case either.
Base URIs
Base URIs are specified using the <BASE> element. Base URIs allow you to reduce the amount of typing that you have to do - instead of: <A href="http://www.foo.com/foo/foostuff/foo.html"></A> <IMG src="http://www.foo.com/foo/foostuff/foo.html"> etc. you would have: <HEAD> <BASE href="http://www.foo.com/foo/foostuff/"> </HEAD> <BODY> <A href="foo.html"><IMG src="foo.gif"></A> </BODY> Thus you simply put the reference of the base URI from which all others are interpreted and you can reduce typing. That's the end of this part of the HTML guide. The next section considers essential concepts, things such as how to refer to characters like < so I suggest you click here to continue.
Essential concepts
Contents
Character references Comments
Character references
There are times when the character you need to include in your web page can't be directly included. For example, you might want to include a <, which would otherwise be difficult because browsers would interpret it as opening a tag, and therefore destroy the rest of the page. Fortunately HTML provides a means of doing this, known as character references (or sometimes as escapes). To do this you use the & sign followed by up to 6 letters specifying the character that you want and then a semicolon. The code for <, for example, is < (lt for less than). Other useful characters include the non-breaking space, referred to by . This specifies that there must be a space there. For example, a lot of space was caused to the left of this by the use of some non-breaking spaces. The other main characters are &, which specifies that you want an ampersand and >, which specifies that you want a greater than sign (this shouldn't be necessary, but Word 95 and 97 will ignore plain >, but won't ignore >). Beyond this there are other characters that are useful because they don't appear on computer keyboards and therefore cannot easily be entered. For example:
Character reference ¡ ¿ é É à ü ô ¢ £ ¥ © Meaning Inverted exclamation Inverted question mark Rendering
Lowercase e with acute accent Uppercase e with acute accent Lowercase a with grave accent Lowercase u with umlaut Lowercase o with circumflex Cent English pound sign Yen Copyright
® ç × ÷ ° ±
Registered trademark Lowercase c with cedilla Times sign Divide sign Degrees Plusminus
Note that the list above only lists a subset of the available entities. However, the form is indicated, so although the O with circumflex is not listed, it is obvious that the correct reference is Ô
Comments
Very often you want to include some text in a file, perhaps as a reminder to yourself, but you don't want it to appear on screen when someone looks at the page in their web browser. In order to cater for this, you can use the comment tags, . These tags delimit the comment. For example: <!-<P> This won't be rendered --> <P> But this will. Note that they differ slightly from normal tags insofar as they do not have a / on closing. The one point of note is that you should not include '--' inside comments except at the comment's end. For example,  is bad. That's the end of this part of the HTML guide. The next section considers images, so I suggest you click here to continue.
Images
Contents
Introduction
The IMG element Image types More advanced concepts
Introduction
One of the most important things on the web is images. Without them, the web would be a different place. This means that is important to use them correctly. Important issues include:
1. accessibility 2. the type of image to use The IMG element
The IMG element is used to specify the location of an image. For example: <IMG src="ball.gif" alt="A ball">. Thus the image has two parts:
1. Its location, specified using the src attribute; e.g., <IMG src="http://www.foo.com/ball.gif"> 2. Its alternative description, useful for: 1. People who surf with images turned off 2. Blind people for audio rendering 3. Browsers that don't support images
Here's some example code: <IMG src="holiday.gif" alt="Pictures from my holiday"> In addition to these attributes, the following may be used:
1. height; if omitted, the image's intrinsic height is used - useful for stretching images. E.g., <IMG src="green.gif" alt="A picture of the countryside" height="100">. Heights are specified in pixels. 2. width; if omitted, the image's intrinsic width is used - useful for stretching images. E.g., <IMG src="green.gif" alt="A picture of the countryside" width="100">. Widths are specified in pixels.
Thus the following piece of code would give a 100 by 100 image: <IMG height=100 width=100 src="holiday.gif" alt="Pictures from my holiday">
Image types
An important concern on the the web is which file format to use. There are basically three types: gif, jpeg and png. Of these png suffers problems in that it is not supported by a lot of browsers.
Gif and jpeg are both well-supported; however, jpeg is to be preferred for photographs because it results in smaller files for these. All other formats (such as bmp) should be avoided.
More advanced concepts
There are more advanced concepts regarding images. However, you will need to consult the section on objects if you wish to learn more about these. The next section of this HTML tutorial deals with more advanced concepts.
Essential concepts - part 2

Contents
Search engine indexing of pages Specifying the language of a page Meta data Specifying the beginning of a set of documents LINK
Search engine indexing of pages

One of the most important factors in web page construction, but also one of the most frequently overlooked is that of how search engines will find them.
Specifying the language of a page
This should be done using the lang attribute on the HTML element. E.g., <HTML lang="en">. This will assist the user by ensuring that the document that they get is in their favored language. Other codes include es (Spanish), fr (French) and de (German). In addition, if the page has translations, you should link to these. This will allow search engines to find the page: <HEAD> <LINK rel="alternate" href="document.html" hreflang="es" lang="es" type="text/html"> </HEAD>
Meta data
Meta data is information about data - it can be used to describe the page so that the search engine can index it appropriately: <META name="keywords" content="Pekinese,Siamese,cats"> <META name="description" content="A page about cats"> Meta data always goes in the HEAD: <HEAD> <META name="keywords" content="Pekinese,Siamese,cats"> <META name="description" content="A page about cats"> </HEAD> The keywords are a comma-separated list of keywords that should trigger a 'hit' on your site. The description is just that - the description that the site will use to describe your page.
Specifying the beginning of a set of documents
In order that search engines can find the start page of a linked collection as well as the individual pages, you should use the LINK element: <HEAD> <LINK rel="start" type="text/html" href="main.html" title="A description of the link"> </HEAD>
LINK
The A element represents by far the most common sort of link - to change from one document to another. The LINK element on the other hand, allows more unusual relationships to be specified - we've already seen it be used to link style sheets (see the section on formatting), and there also other relationships that it can make. The type of relationship is specified using the rel and rev attributes, and the location of the linked document with the href attribute. For example, <LINK rel="contents" href="contents.html">. Note that the LINK element differs from A in that LINK is not rendered and therefore it can only appear in the head. Despite not being rendered, the LINK element performs several useful functions:
1. providing alternate versions of documents 2. providing information for search engines 3. enabling browsers to use the LINKs for navigational purposes.
The two main attributes on LINK, rel and rev specify whether a relationship is forward or reverse respectively. E.g.: d.html - <LINK rel="nada" href="e.html">
is the same as:
e.html - <LINK rev="nada" href="d.html"> Here's some examples of what can be done:
1. <LINK rel="alternate" hreflang="es" href="spanish.html"> - specifies a Spanish translation 2. <LINK rel="start" href="contents.html"> - specifies a starting page; useful for search engines 3. <LINK rel="alternate" media="print" type="application/postscript" href="print.ps"> - specifies a version suited to printing
That's the end of this part of the HTML guide. The next section considers tables, so I suggest you click here to continue.
Tables
Contents
Tables <TABLE> <TR> <TD> <TH> <CAPTION> Conclusion Table attributes
Tables
An essential part of any publishing method is the use of tables. It is no surprise therefore that HTML should be rich in methods to allow them to be described.
<TABLE>
This indicates the start of a TABLE: <TABLE> </TABLE>

<TR>
This indicates a table row. Note that you may omit the end tags from <TR> elements - their end tags are implied by a <TR> or </TABLE>.
<TD>
This indicates a table cell, which must occur inside a table row.
<TABLE> <TR> <TD> A table </TD> <TD> A table </TD> </TR> <TR> <TD> A table </TD> <TD> A table </TD> </TR> </TABLE>
cell cell
cell in a different row cell in a different row
Note that you may omit the end tags from <TD> elements - their end tags are implied by a <TR>, <TH>, </TABLE> or <TD> tag.
<TH>
This is exactly the same as TD, except it is a Table Header cell, and is typically rendered in bold and centered:
<TABLE> <TR> <TH> A table cell </TH>
<TH> A table cell </TH> </TR> <TR> <TD> A table cell in a different row </TD> <TD> A table cell in a different row </TD> </TR> </TABLE>
Note that you may omit the end tags from <TH> elements - their end tags are implied by a <TR>, <TH>, </TABLE> or <TD> tag.
<CAPTION>
This gives a TABLE a caption, typically centered.Tables may contain only one caption, and if used it must be the first element following the TABLE element:
<TABLE> <CAPTION align="right"> A caption </CAPTION> ... </TABLE>
Conclusion
That is all you need to create tables. However, there are some more advanced topics.
Borders
In order to specify the borders around tables, HTML provides a number of attributes. Principal among these is the border attribute. The border attribute specifies the thickness of borders around tables and table cells. For example, <TABLE border="2"> specifies that the table should have a 2-pixel border. If you do not specify a number, as in <TABLE border>, then 2 pixels is assumed. If you do not specify the border attribute at all, no border will result.
Cell padding and spacing
The two attributes provided for cell padding and spacing are the cellpadding and cellspacing attributes. Cellpadding specifies the space inside the cells and cellspacing the space between them. The difference between the two is that cellpadding is always colored by the background of the cell whereas cellspacing is colored by the background of the table.
Width and height of tables
Normally, the width of tables and table cells is provided by the width of their content. However, sometimes you might want to give an explicit width or height. This is done with the height and width attributes. These attributes specify the minimum width or height of the table row, cell or table on which they were specified. You can specify the lengths as a percentage or as a number of pixels on width, or as a number of pixels on height. I recommend that you avoid pixels however, since you have no way of knowing the width of the window on the computer that looks at your pages. As an illustration of what tables can do,
bgcolor
This specifies the table's background color. E.g., <TABLE bgcolor="red">. If unspecified, it has the same background color as the BODY. You should avoid using this attribute in favor of style sheets. E.g., <TABLE class="mytable"> TABLE.mytable {background: red}.
Valign
This can be specified as top (data flush with top of cell), middle (default), bottom or baseline (align all cells in the row with valign: baseline to the same point). That's the end of this part of the HTML guide. The next section considers objects, so I suggest you click here to continue.
Objects
Contents
Introduction to objects Object attributes
Other attributes for <OBJECT> Browsers that cannot render the contents of <OBJECT>s <PARAM> Using declared OBJECTs Embedding HTML
Introduction to objects
Although images were discussed earlier on in this HTML tutorial, they represent a limited subset of objects. In a nutshell, objects are instances of external data inserted in a page. They are designed to provide an infinitely extensible means of inserting content. Here's an example <OBJECT data="image.jpg" type="image/jpeg"> An image </OBJECT> And its IMG equivalent: <IMG alt="An image" src="image.jpg">
Object attributes
Two attributes are sufficient for any object:

1. classid 2. data
The data attribute is used to specify the location of object data. Object data include things such as images. The classid attribute specifies the location of the object's implemenation. Object implementations include things like applets - whereas data is the subject of an implementation and has a subservient role, the classid attribute specifies the thing that can use the data. E.g.: <OBJECT classid="http://www.foo.com/applet.java"> Note that objects frequently do not require both data and classid - one is usually all that is needed. For example, with images, the implementation can usually be done by the browser, so all that is needed is the data. Conversely, many implementations do not require any data; for example, a clock applet probably wouldn't need any extra data.
Objects may appear both in the <HEAD> and <BODY> of documents. However, <OBJECT>s in the <HEAD> should not produce rendered content.
Other attributes for <OBJECT>
Certain other attributes also perform a useful function:

1. standby - this gives a text message to be used while rendering the document; for example, <OBJECT standby="Please wait"> 2. archive - the archive attribute is used to specify a space-separated list of things that the object will use. Use of this attribute will reduce waiting time. E.g., <OBJECT archive="image.gif">. This is in addition to classid and data. 3. codebase - this gives a base path with which to resolve relative URIs specified on archive, data or classid 4. type - this specifies the content type of data specified via the data attribute. For example, <OBJECT type="image/jpeg" data="image.jpeg">. Use of this attribute is recommended if data is used to avoid loading unsupported objects. 5. codetype - this specifies the content type of data downloaded via classid. It is recommended to avoid loading unsupported data. 6. title - this gives a title, useful for tooltips 7. declare - this attribute declares the OBJECT but does not run it. E.g., <OBJECT 8. id - this gives the <OBJECT> an id for referencing purposes Browsers that cannot render the content of <OBJECT>s
Browsers that can't render the content of <OBJECT> elements will try the content. E.g.: <OBJECT classid="java.jar"> <OBJECT title="Will only be rendered if the java can't be used" type="image/gif" data="image.gif"> Will only be rendered if the image and java can't be used. </OBJECT> </OBJECT> You should always include alternate content inside <OBJECT> for non-object supporting browsers.
<PARAM>
The <PARAM> element is used to specify parameters to be passed to an OBJECT. For example: <OBJECT classid="java.jar"> <PARAM name="size" value="100" valuetype="data"> Alternate content here </OBJECT>
The PARAM element takes four main attributes:

1. name - this gives the name of the parameter; only relevant to the object that uses it 2. value - this gives the value of the parameter; only relevant to the object that uses it 3. valuetype - this gives the type of the value. Valid values are: 1. ref; that the value is a URI where runtimes are to be found 2. object; that the value is the identifier of an OBJECT in the document. The identifier is the value of that <OBJECT>s id. 3. data; default value meaning that the data will be passed as a string 4. type - this gives the content type; relevant only when the valuetype is ref. E.g., type="application"
Given: <OBJECT> <PARAM> <OBJECT> <PARAM> </OBJECT> </OBJECT> only the child PARAM is used.
Using declared OBJECTs
Declared OBJECTs may be run by use of an A element: <OBJECT id="useme" declare data="video.mpeg"> </OBJECT> <A href="#useme">Click to show video</A> Or: <OBJECT id="use" declare data="data.data"> </OBJECT> <OBJECT classid="java.jar"> <PARAM name="data" valuetype="object" value="#use"> </OBJECT>
Embedding HTML
It is possible to embed web pages within web pages; this is done simply by setting data to a web page. E.g., <OBJECT data="webpage.html"></OBJECT>. However, inline frames offer a better alternative when you wish to change the embedded document - inline frames can have their content changed by HTML.
That's the end of this part of the HTML guide. The next section considers frames, so I suggest you click here to continue.
Frames
Contents
Introduction to frames
FRAMESET FRAMESET
examples
Nesting of FRAMESET
FRAME
Loading documents in a target frame

NOFRAMES IFRAME
Introduction to frames
Frames allow you to have several documents open in one window. They are typically used in Webmail and more generally for page navigation. They allow independent scrolling of separate documents - you can have one frame with a list of links, and the other frame to load the pages in. For example: <HTML> <HEAD> <TITLE> Frameset </TITLE> </HEAD> <FRAMESET cols="25%, 75%"> <FRAME src="frame1.htm"> <FRAME src="frame2.htm"> <NOFRAMES> Sorry, your browser doesn't support frames. </NOFRAMES> </FRAMESET> </HTML>
That would be rendered as:
Frame 1
Frame 2
FRAMESET
The FRAMESET element in a FRAMESET page takes the place of the BODY element. The FRAMESET element takes two principal attributes: rows and cols. These attributes specify whether the frameset should be divided into columns:
Frame 1
Frame 2
Or rows:
Frame 1
Frame 2
Each of these attributes takes as its value a comma-separated list of values specified in pixels (e.g., 100), percentages (e.g., 50%) or relative lengths. If rows/cols is omitted, each is set to 100%, which means that columns/rows are a page wide/high. Frames are created left-to-right from top row to bottom. Where absolute lengths do not add up to 100% of the available space, each frame is are adjusted in size so that it does.
Examples
<FRAMESET rows="50%, 10%, *, 100"> This would divide the screen into four, the top 50% of the height of the screen; the next one down 10%; the next one down equal to the remaining space minus the 100 for the bottom frame. (N.B. * is equivalent to 1*). <FRAMESET cols="100, 4*, .5*"> This would divide the screen horizontally into a left 100px frame, a middle frame occupying 8/9 of the remaining space (4 /4+4.5) and the right frame the other ninth.
Nesting of FRAMESET
FRAMESETs
may be nested. E.g.:
<FRAMESET rows="50%, 50%"> <FRAMESET cols="50%, 50%"> <FRAME src="frame1.html"> <FRAME src="frame2.html"> </FRAMESET> <FRAME src="frame2.html"> </FRAMESET>
Might be rendered as:
FRAME
This specifies the location of each frame and their characteristics. Location is specified using the src attribute. E.g., src="frame1.html". Its other attributes are:
1. name - essential if documents are going to be loaded in the frame; e.g., <FRAME 2. 3. 4. 5. 6. 7.
src="frame.html" name="myframe"> title = a title - useful for non-visual browsers. E.g., title="Ad frame" noresize - e.g., <FRAME src="frame.html"> - prevents resizing of the FRAME by the user scrolling; specifies scrolling usage - auto (scroll bar when required) (default value), yes (scroll bar always), no (scroll bar never) E.g., scrolling="auto" frameborder; specifies whether to draw a border between the frame and other frames. Can be set to 1 (draw border - default value) or 0 (do not draw border). marginwidth; specifies the amount of space between a frame and its contents on the left and right. E.g., marginwidth=10. This cannot be less than 1. marginheight; specifies the amount of space between a frame and its contents above and
below it. This cannot be less than 1. 8. longdesc = a link to a longer description than that provided by title. E.g., <FRAME longdesc="http://www.foo.com". Long descriptions should describe the frame, not its content. Loading documents in a target frame
This is done using the target attribute on A. E.g.: <FRAMESET cols="25%, 75%"> <FRAME src="menu.html"> <FRAME src="introduction.html" name="main"> </FRAMESET> menu.html: <A href="whatever.html" target="main"> Thus by addition of the target attribute, the page is set to load in a different frame. To avoid having to set the target attribute on every A, you use the BASE element with target <BASE target="main"> would set pages to load in main unless a different target was specified.
NOFRAMES
You should always include the NOFRAMES element for the benefit of browsers that do not support frames. This content will only be rendered if frames are unsupported. Note that NOFRAMES must occur inside FRAMESET. <FRAMESET cols="25%, 75%"> <FRAME src="menu.html"> <FRAME src="introduction.html" name="main"> <NOFRAMES> Alternative content for browsers that do not support frames including a <A href="noframes.html">means</A> of alternative access. </NOFRAMES> </FRAMESET>
IFRAME
The IFRAME or inline frame element is a newer addition to HTML and is only supported by Internet Explorer 4 and 5 - not Netscape 4. It is used in exactly the same way as FRAME except that it goes inline with content. It takes exactly the same attributes as FRAME except:
1. it does not take noresize since inline frames cannot be resized 2. it takes the height and width attributes, which must be specified in pixels, and specify the dimensions of the inline frame 3. since it is just an element like P or TABLE, it can be left or right aligned
For example: <IFRAME src="page.html" width="100" height="100"> Content that won't be rendered if the browser supports inline frames. </IFRAME> Thus instead of NOFRAMES, the alternate content for old browsers is simply placed inside the element. Note that since inline frames can be NAMEd, they can be the subject of <A href="" target=""> links. The next section of this HTML 4 guide deals with scripts (such as JavaScript).
Scripts
Contents
Introduction Including scripts in HTML
NOSCRIPT
Events
Script types The events
Introduction
Scripting is incredibly important on the world wide web - without it, the web would be a different experience. HTML's role in scripting is relatively limited, but what it does do is to act as a facilitator - it permits the use of scripts in HTML. HTML essentially has two roles; firstly, in allowing scripts to react to certain events, and secondly in allowing scripts to be included in HTML.
Including scripts in HTML

The SCRIPT element is used to include scripts within HTML documents. E.g.: <SCRIPT type="text/javascript"> document.write('Hello world'); </SCRIPT> From an HTML point of view, the SCRIPT element is extremely simple. There are really only a very few points of note:
1. The type attribute - this is required; usually set to "text/javascript" 2. Scripts may be hidden from older browsers using the comment delimiters:
<SCRIPT type="text/bananascript"> <!-banana.size=12; --> </SCRIPT>
Although the number of browsers that would otherwise render the content is minuscule, it is still worth including them. Note also that to avoid errors in the language, the comment close tag must be hidden from the script parser. E.g.,: <SCRIPT type="text/javascript"> <!-bean.cost=12; // --> </SCRIPT>
3. The language attribute; although this is deprecated, it is still useful for hiding new scripts from old browsers. E.g.:
<SCRIPT language="javascript1.2" type="text/javascript"> <!-bean.cost=12; // --> </SCRIPT>

4. The defer attribute; e.g., <SCRIPT defer> - this indicates that the SCRIPT will not generate any content and therefore that the browser can continue rendering without considering the SCRIPT 5. The src attribute. This allows scripts to be kept in external files. However, whereas Javascript support was introduced in Netscape 1.5, src was not implemented until 3.0; equally, IE 3.0 and 3.01 do not support src; subsequent versions do. NOSCRIPT
The NOSCRIPT element is used to provide alternate content for browsers that are not currently supporting script. E.g., <SCRIPT type="text/javascript"> Script here // --> </SCRIPT> <NOSCRIPT> </NOSCRIPT>
Events
Certain actions (such as mouse clicks) generate an event. HTML allows these to be reacted by scripting languages by its use of the ONxxxx event handlers.
Script types
Since there is no way of declaring the type of scripting languages used on attributes (e.g., onload), if you use the intrinsic events, you must set the default script type for the document.
This is best done by setting the Content-Script-Type HTTP header to the desired value, but failing that, you can set a header equivalent: <META http-equiv="Content-Script-Type" content="text/javascript"> If you fail to set a default script type and use the intrinsic events, your document is WRONG.
The events Name onload onunload onclick ondblclick Applies to FRAMESET or BODY FRAMESET or BODY most elements most elements mouse is pressed down over an element mouse is released over an element mouse is moved over an element mouse is moved while over an element mouse moved away from an element Element has focus through tabbing to it or by being given it by the mouse Element has focus through tabbing to it or by being given it by the mouse key is pressed and released over an element key is pressed down over an element key is released over an element when form is submitted when form is submitted Means completely loaded Means completely loaded
onmousedown most elements onmouseup most elements
onmouseover most elements onmousemove most elements onmouseout onfocus most elements LABEL, INPUT, SELECT, TEXTAREA, BUTTON LABEL, INPUT, SELECT, TEXTAREA, BUTTON most elements most elements most elements FORM FORM
onblur onkeypress onkeydown onkeyup onsubmit onreset
onselect onchange
INPUT and TEXTAREA INPUT, SELECT and TEXTAREA
applies when text in a text field is selected Control loses focus having had its value changed prior to losing the focus.
For example, <INPUT onclick="f()">. Thus the script is contained within the attribute - in this instance a JavaScript function call. The next section of this HTML tutorial deals with forms.
Forms
g form controls
In order to preselect checkboxes and radio buttons, you use the checked attribute: <INPUT type="radio" name="radiobutton"> <INPUT type="radio" checked name="radiobutton">
Since radio buttons are mutually exclusive, you should avoid preselecting more than one.
Creating menus with forms
Aside from those elements already described, also useful are menus. These are created using the SELECT, OPTION and OPTGROUP elements. For example: <SELECT name="myselect"> <OPTION value="1">10</OPTION> <OPTION value="2">20</OPTION> <OPTION value="3">30</OPTION> </SELECT> As you can probably see, there are two essential points concerning creating form elements. The first of these is the SELECT element. This acts as the container for the menu and gives the whole thing a name (required if you are to refer to the value of the SELECT later on). Secondly, there is the elements of the menu - these are the OPTION elements. Each OPTION should be given a value if it is to be referred to.
In between the opening and closing tag (the closing tag is optional) comes the content, which is what will be rendered.
Advanced SELECT topics
The example above will satisfy 99% of requirements. However, as always, there are more options. On SELECT, you may also specify that multiple selections may be made. This is done using the multiple attribute. For example, <SELECT multiple>. Secondly, you may choose to specify the number of options that should be on screen at once (only relevant if the user agent displays the menu as a scrolling list). This is done using the size attribute. E.g., <SELECT size="3">.
Preselecting OPTIONs
In order to preselect OPTIONs, you add the selected attribute to its opening tag. E.g., <OPTION selected>. You may preselect multiple OPTIONs if SELECT itself is set to multiple.
Grouping options
It is possible to group options using the OPTGROUP element. Say you have a model of car that is sold according to engine capacity but where the higher capacity ones have a different name: <SELECT name="myselect"> <OPTGROUP label="The Stingray"> <OPTION value="1600">1600</OPTION> <OPTION value="1800">1800</OPTION> <OPTION value="2000">2000</OPTION> </OPTGROUP> <OPTGROUP label="The Barracuda"> <OPTION value="2500">2500</OPTION> <OPTION value="3000">3000</OPTION> <OPTION value="4000">4000</OPTION> </OPTGROUP> </SELECT> In theory, that example should have made some visual distinction (that is the only purpose of OPTGROUP - it does not have any affect on the value passed to the form processor) between the Stingray and the Barracuda. In practice, however, it is likely that your browser doesn't support this.
TEXTAREA
The TEXTAREA is very similar to the INPUT type="text" element, which we have already met. It differs, however, in being suitable for larger quantities of text - it is provided with a scrollbar and can span several lines.
Some content that can be changed
Here's a TEXTAREA element: And here's the code that produced it: <TEXTAREA rows="3" cols="50" name="mytextarea"> Some content that can be changed </TEXTAREA> Thus the TEXTAREA element is defined by:
1. the rows attribute (required) - this specifies the number of rows 2. the cols attribute (required) - this specifies the width of each row in characters 3. its name - used for form processing purposes
Note that the content inside the TEXTAREA can only be characters and character references never other elements.
Disabling form elements and/or making them read-only
All form elements may be disabled by addition of the disabled attribute. For example, <TEXTAREA disabled>. In addition, where elements have content that can be changed, they can be set to read-only with the addition of the readonly attribute. E.g., <TEXTAREA readonly>.
The data that is submitted
The data submitted as a result of submitting a form is simply the name and value of each 'successful' control. Successful controls are simply those that have a name and that are not disabled. For 'on/off' buttons, the value passed is only that of those that are 'on'. The data will then be encoded. This is done according to the enctype attribute of the FORM element. The two principal enctypes are:
1. application/x-www-form-urlencoded; this replaces all non-alphanumeric characters with escapes. In addition, control names are separate from their values by '=' and names are separated by '&'. Note that if method="get", this will ALWAYS be used. 2. multipart/form-data; this should be used for forms that include files (i.e., by INPUT type="file") or large quantities of data Form submission
The way that form data is sent is determined by the method attribute of FORM.
The default method, get, is only useful for small quantities of data. The way that this is sent is by taking the location specified by action, adding a '?' and then putting the form data on the end of that. This is most often used for search engines. With post, the form data is included as the body of an HTTP post to the uri specified by action. The next section of this HTML tutorial deals with language support.
Languages
Lang
In order to specify the language that an element is in, you use the lang attribute. For example, <P lang="de"> (German). Languages inherit, so if you specify <HTML lang="en-us"> (US English), this will inherit to all descendant elements. Languages are specified to assist search engines and to help browsers render your page in a language-appropriate manner. Language codes take the form of a two letter primary language optionally followed by a hyphen and a subcode. The primary language is something like 'en' (English), and the subcode the regional dialect. It is also possible specify a language using HTTP by setting 'Content-Language: language'; e.g., Content-Language: en-us.
Bidirectionality (bidi)
The dir attribute
The dir attribute specifies the direction of directionally neutral text (that is to say text for which there is no inherent directionality) and of tables. For example, <Q dir="rtl">. Primarily the dir attribute is associated with block-level elements. Dir is inherited to block-level descendants. Thus every block-level element has a dir. For example, if your browser is right-toleft this P will have inherited dir="rtl". That doesn't mean that the text will go right-to-left however, because this text is inherently left-to-right so it is displayed left-to-right. Why then, you might ask, is dir needed at all. The answer is that the bidirectional algorithm can only cope with one level of embedding (i.e., of one level with different direction). For example, if this P element had dir="rtl", and contained some right-to-left text inside some left-to-right text (on a right-to-left element), because there is more than one level of embedding, to get correct directionality on the second level of embedding, it must be given dir="rtl" to get correct results.
BDO
Sometimes text might already have been put in visual order; for example, if you have right-toleft characters that have already been placed right-to-left in the document source (e.g., assuming 'Hello' is a right-to-left word, 'olleH'). To stop the renderer inverting this again, you would simply put <BDO dir="direction"></BDO> around the the text. This stops implicit reordering and simply renders the whole sequence left-to-right. That's the end of the HTML guide! I now suggest that you learn about CSS, or go the RichInStyle.com front page to see what else is on offer.

Introduction To HTML

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Introduction To HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Introduction

Example web page

Tags Elements Attributes Attribute values and quote marks

<HTML> <HEAD> <TITLE> My first web page </TITLE> </HEAD>

Anatomy of a web page

Item 2 - the <HEAD> tag

This is to say that the HEADer is over.

Now our paragraph is over.

Now our BODY is over.

<P> Headings <BLOCKQUOTE> <PRE> <DIV> <ADDRESS>

You should avoid using empty paragraphs to create white space.

<P> And another. </P> </DIV>

There are two main types of list:

And bulleted (or unordered) lists

This states that a list is ordered. E.g.:

That example might be rendered like this:

Browsers left-indent ordered lists by default.

This states that a list is unordered. E.g:

That might be rendered like this:

This will be prefixed by a bullet. As will this, by an identical bullet.

Here is an example of the code for a definition list:

This indicates the Term to be Defined.

Italic Bigger Smaller Bold Italic

CENTER, U, S/STRIKE FONT

Embedded, linked and inline style

Style may be included in three different ways:

Other old-style methods

Other attributes of the A element

Absolute URIs Relative URIs Linking to a particular part of a document

<H1> <A name="x"></A> A heading </H1>

&reg; &ccedil; &times; &divide; &deg; &plusmn;

The IMG element Image types More advanced concepts

Essential concepts - part 2

Search engine indexing of pages

This indicates the start of a TABLE: <TABLE> </TABLE>

cell in a different row cell in a different row

Cell padding and spacing

Two attributes are sufficient for any object:

Certain other attributes also perform a useful function:

The PARAM element takes four main attributes:

Loading documents in a target frame

That would be rendered as:

may be nested. E.g.:

Might be rendered as:

Script types The events

Including scripts in HTML

<SCRIPT type="text/bananascript"> <!-banana.size=12; --> </SCRIPT>

<SCRIPT language="javascript1.2" type="text/javascript"> <!-bean.cost=12; // --> </SCRIPT>

onmousedown most elements onmouseup most elements

onblur onkeypress onkeydown onkeyup onsubmit onreset

INPUT and TEXTAREA INPUT, SELECT and TEXTAREA

Some content that can be changed

S-ar putea să vă placă și

® ç × ÷ ° ±