|
Davis Community Network HTML Class 2
References:
Assembled by Anne Hance (rahance@dcn.davis.ca.us)
DCN Business Office (530) 750.1170 Review
Hyper Text Markup Language (HTML) authoring is not programming.
HTML is platform-independent. This means that HTML documents are portable from one computer system to another.
Once an HTML document has been marked up, many different User Agents can process the document based on its structure. The most common User Agents are, of course, web browsers (Netscape, Explorer, Mosaic, Lynx etc.). But there are other User Agents such as speech devices for the blind, various search engines and spiders, and scripts which create tables of contents or outlines.
HTML versions The official standards for HTML are developed by the World Wide Web Consortium Independent of the WWW Consortium's work, browser-specific tags have been introduced by software developers working for commercial companies (such Netscape, and Microsoft's Internet Explorer etc.) Other browsers tried to duplicate the new effects, but this didn't always work as expected and it has led to confusion and problems when authors used these elements and then found that they didn't work as expected in a browser other than Netscape.
World Wide Web Consortium (W3C) documents explaining existing and planned HTML coding can be found at http://www.w3.org/pub/WWW/MarkUp/Wilbur/ DESIGN Web sites should be designed so that their contents and layout are clearly apparent to a person browsing the site, and so that the site can easily and efficiently be navigated. Each page (file/document) should load quickly, fit within the width of most monitors (horizontal scrolling is not popular), have a pleasing, well laid out appearance, and should usually not require extensive vertical scrolling.
Image files (.gif .jpg) should be as small as possible because they slow down loading. Frames should be used only when truly necessary. CONSTRUCTING AN HTML FILE/DOCUMENT Your file must be prepared in a "text only" format: Your file-name must end in .html (Macintosh) or .htm (PC). The file name must be without spaces. Browsers are case sensitive in respect to file names. On your own hard drive when you are testing your pages the browser is sometimes forgiving and will recognize files even if they are not properly cited. However, once your file is on an Internet Server it will only be recognised when the precisely accurate file name is used. While browsers are very fussy about file names they are not fussy about the tags used within the html file which can be upper or lower case - or even a mixture! You can construct your HTML page or series of pages in a folder (directory) on your hard drive and test them with your browser but when you want to make them available to the rest of the world via the Internet you have to transfer them onto the Internet Server (just another large capacity hard drive!) of the Internet Service Provider with whom you have an account. You need to be connected to your service to transfer your files and you need the proper software to make the transfer. The basic elements of an HTML file are:
<HTML> Terminology
HTML "elements" In such cases the two tags and the part of the document enclosed by them forms a unit which is called HTML element.
Some tags, e.g. <HR>, are HTML elements by themselves and use no end tag.
HTML "attributes" An attribute specification consists of the following, in this order:
* the attribute name, e.g. WIDTH Attributes, if present, are written into the start tag of an element, after the element name. They must be separated from the element name and from each other by blanks. The order of attribute specifications in a tag is insignificant.
It is always advisable to enclose the attribute value in quotes, using either single or double quotes, using matching quotes of course. An HTML 3.2 compliant document (file) should look basically as follows: (Note: the line numbers are only for reference - they are referred to on the pages following this one)
The numbered sections below refer to the numbered lines of the document above 1. DOCTYPE
This is a so-called DOCTYPE declaration. It is used by Standard General
Markup Language (SGML) tools (eg. "browsers") to detect what kind of document is being processed. The DOCTYPE declaration identifies the Document Type Definition (DTD) which defines the elements used. The declaration tells us that this is an HTML document conforming to the public, unregistered (the minus sign) final version of the DTD for HTML 3.2, which was developed by the World Wide Web Consortium (W3C) and is written in English (EN). Some web page editors include an arbitrary DOCTYPE declaration in the documents they produce, even when it is not correct. Note that in particular, any doctype for HTML 3.0 is not an "official" declaration, since that proposal has been expired for a long time. 2. <HTML> </HTML> This tag goes around the entire document. Basically, it states that the rest is all HTML, as opposed to some other language which may use tags within < and > brackets. 3. <HEAD> </HEAD> The head of your document contains information about the document itself. Nothing within the HEAD section will be displayed in the document window. The head section must include the TITLE of the document. It can optionally contain things like a description, a list of keywords for search engines, and the name of the program used to create the HTML document.
4. <!-- COMMENT --> Comment elements can be placed in the head or body elements. Browsers do not display them and so they are very useful for recording the page author's notes to him/herself
5. <TITLE> </TITLE> The TITLE tag: <TITLE>The title of the document</TITLE> is the only required tag for the head section. It is typically displayed in the browser's window title bar, and used in bookmark files and search engine result listings. For the last two situations, you should make sure the title is descriptive for the document - "Homepage" or "Index" doesn't say much in a bookmark file.
6. <META ..... > META tags provide "meta information" about the document. For example, a Meta tag can give a description of the document, indicate when the document will have expired or what program was used to generate it. There are many possible META constructs - for example:
To provide information which is used by search engines such as Alta Vista and Infoseek: 7. <BODY> </BODY> The BODY of the document contains the actual information. There must be only one BODY statement in the document. Some web-page editors incorrectly insert another BODY statement for each new attribute you want to add to the body, but this can have unexpected side-effects (such as some of the attributes getting ignored completely). <BODY BACKGROUND=" ? "> If you use attributes such as backgrounds, you do not add a second BODY tag. Instead, the attribute is added to the existing BODY tag. An example of a tiled background tag might be: <BODY BACKGROUND="gifs/tiled.jpg"> A simpler way of enhancing your page (much quicker loading than a tiled image) is to simply use a background color. The tag below will make the window the color "aqua".
<BODY BGCOLOR=" ? "> Research has shown that windows (pages) with white backgrounds are easier to read than the default grey or another color. So, it depends on your purpose for the page. If it contains serious reference information I suggest a white background. If it is a "fun" page go ahead and use background colors or tiled images!.
To make a white background you use either of the following body tags: 8. <H?> HEADINGS </H?>
Most browsers will display the text inside heading tags with some sort of emphasis (large font, etc). In addition, when webcrawlers are indexing your page, text that is inside headings may be given extra weight. Levels 1 through 6 are recogtnized by most browsers. The main, page titleand perhaps a subtitle9. <P> PARAGRAPHS AND <BR> LINE BREAKS (hard returns)
The <P> tag instructs the browser to end the previous line and
leave a two line space before starting the next line of text. The <BR> tag simply results in an end-of-line and the text continues on the next line.
You will notice that spaces in your HTML text are always collapsed by the browser to a single space. If you have spaces on the html page, the extra spaces will not show on the web page when it is displayed by the browser. 10. CREATING LINKS - WITH THE ANCHOR ELEMENT
How do we manage links to and within Local documents?
How do we manage links to other documents in various locations? (Directory names in the diagram below are in bold and shaded in grey)
* from science.html to chemistry.html <A HREF="chemistry.html"> xxx </A> * from science.html to atoms.html <A HREF="Chemistry/atoms.html"> xxx </A> * from science.html to carbon.html <A HREF="Biology/Organic/carbon.html"> xxx </A> * from carbon.html to atoms.html <A HREF="../Chemistry/atoms.html"> xxx </A> * from carbon.html to science.html <A HREF="../../science.html> xxx </A> * from carbon.html to contents.html <A HREF="../../../contents.html> xxx </A> b) Absolute links using full domain and directory/file path names
* a link to a file in rahance's top-level (public_html) directory 11. <IMG SRC=" ? "> Linking inline images using the <IMG element
<IMG SRC="gifs/photo.gif" ALT="my photo"><BR>
Considerations when managing images:
ALT ... This is used to provide a text description of the image and is vital
for interoperability with speech-based and text only user agents.
12. <UL> </UL> Lists
On the left we have an unordered list containing two items, on
the right is an ordered list.:
Attributes allowed within the <OL> tag are: TYPE=A / I / a / i (the default is 1,2 ...) What should you put at the end of your page? 13. Because visitors can arrive at many different pages of a site it is important to have a link on every page of the site to take the visitors to a page that lets them know what the rest of the site includes. A link to the homepage is commonly used this way.
14. It is good style to include the date the document was created and/or last updated, and an email address for the author:
<ADDRESS> Last updated 23 July 1998 by Finally, the document is finished off by inserting the </BODY> end tag and the </HTML> end tag.
MISCELLANEOUS ELEMENTS & attributes
Block Quote <BLOCKQUOTE> </BLOCKQUOTE> this element is
indented CHARACTER STYLES
1. logical <STRONG> </STRONG> <EMPHASIS>
</EMPHASIS> COLORS The sixteen color names below are recognized by most user agents. You can also specify colors by their Red Green and Blue components using hexadecimal (base 16) equivalents for the actual RGB numbers. The hex numbers for the named colors are shown as they must be written as attributes.
TABLES
Define Table <TABLE> </TABLE> CONSTRUCTING A TABLE Tables are set up with columns and rows in order to place text so that it is organized in a specific way on a web page as displayed by a browser. Most browsers have recognized TABLE tags for several years but other types of User Agents may not. A table opens and closes with TABLE tags; a table row opens with <TR> and closes with </TR> and each table data cell of that row opens with <TD> and closes with </TD> Here is a simple table:
<TABLE WIDTH="450" BORDER="1"> ALMOST ANYTHING YOU NEED TO KNOW CAN BE FOUND ON THE WWW. You might benefit from checking some of these resources:
When you have started creating and maintaining important HTML documents, you should learn to use a validator, i.e. a program which checks your HTML code against the HTML 3.2 (or some other) specifications. Even if you know HTML 3.2 well, you will by mistake violate the specification; for instance, just forgetting an ending quote can cause problems. Since different browsers have different error handling, you may not notice the error in your environment but your readers may get confused.
It is not sufficient to check that "it works" on your browser. Other people will use that browser in a different environment or with different settings, different versions of the browser, or even quite different browsers. Browsers very often pass invalid HTML without giving error messages, perhaps even handling in such a way that things seem to work fine. For other people, it might be a mess.
Therefore, validate your code. There are online services ( i.e. Web pages containing forms which accept a URL of a document and send back the validation report. One of them is the * W3C HTML Validation Service at <http://validator.w3.org/>.
You can also test your page for accessibility at * the Bobby Site <http://www.cast.org/bobby/>
Yet another important issue is checking the links. One of the worst problems in Web authoring is "linkrot". Documents to which you have linked might have been deleted or moved to another location. * NetMechanic at <http://www.netmechanic.com/index.shtml> allows you to send a URL to be checked for technical validity of links, and it will reply by E-mail.
|