Html For Beginners (Printable)

What is HTML

HTML documents are plain-text (also known as ASCII) files that can be created using any text editor. You can use Simple Text on a Macintosh; Notepad on a Windows machine. Use word processing software and save your documents as "text-only" file.
Getting Your Files on a Server
If you have access to a Web sever at school or work, many community have a FreeNet, here in Vancouver We have a FreeNet called The Vancouver CommunityNet. There is also many Free places on the Internet that offer free space, in order to advertise to you and your clients.
The Vancouver CommunitityNet http://www.vcn.bc.ca
Do a search on Google for "Free Web Space" http://www.google.com
Tags Explained
An element is a fundamental component of the structure of a text document. Some examples of elements are heads, tables, paragraphs, and lists. Think of it this way, you use HTML tags to mark the elements of a file for your browser. Elements can contain plain text, other elements, or both.
To denote the various elements in a HTML document, you use Tags. HTML tags consist of a lesser than sign <, and then a Greater than sign >, but through the rest of this document, we will call them angle brackets.
Some tags can be either single (open) or paired (closed), when they are paired, there is an opening tag, and a closing tag, when a single tag is used, the start tag is the one to use.
Here is a start heading tag: <H1>, and this is it's closing tag: </H1>. You see the difference. The ending tag has a forward slash inserted after the first angel bracket. A Heading tag is a closed tag.
Some elements may include an "attribute", which is additional information that is included inside the start tag. For example, you can specify the alignment attribute of the IMAGES tag, it can be aligned to the (top, middle, or bottom) by including the appropriate attribute with the images source HTML code.
The Minimal HTML Document
Every HTML document should contain certain standard HTML tags. Each consists of a HTML tag, a HEAD tag, a TITLE tag, a BODY tag. The Head contains the TITLE tag, and the BODY contains the actual text, images and other elements of the document.
Required elements
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
A Teaching Tool
The Source Code:
To look at the source code for almost any Web pages on the Internet, most Browsers will, under the VIEW menu, have something like view source, or source something.. The source file will show you how all the tags were used to get the effect you want. However, there can be many other languages used such as a scripting language, or a linked stylesheet.
<HTML></HTML>
This tag tells your browser that the file contains HTML-coded information. The file extension .html or .htm also indicates this is a HTML document and must be used. The opening tag goes at the top of the document and the closing tag goes at the end of the document. The closing tag is the tag with the forward slash in it
The HTML tag is a closed tag.
<HEAD></HEAD>
The head tag identifies the first part of your HTML coded document that contains the title tag and sometimes the META tag. The head start tag goes right after the HTML tag and the Closing tag comes after Both the opening and closing TITLE TAG.
The Head tag is a closed tag.
<TITLE></TITLE>
The Title is typically displayed in the title bar at the top of the browser window and is also what is displayed on someone's bookmark or favorites list, so choose something descriptive of the page content. Is also is used by search engines to identify the page in a search. Keep to 64 characters or fewer in length. The TITLE TAGS goes between the opening and closing HEAD tags.
The Title tag is a closed tag.
<BODY></BODY>
The largest part of your HTML document is the body, which contains the content of your document, that's put in-between the BODY start tag and ending tag. Most of the tags that will be explained are used within the body of your HTML document.

Body Attributes

Any attributes that are put into the body tag effects the whole page, althought an inline font tag with the color attributes can override the body color and link attributes.

You can change the background color of a page like this:

<BODY BGCOLOR="Black">

You can use a background image like this:

<BODY BGCOLOR="Black" Background="Stars.gif">

You can change the text color like this:

<BODY BGCOLOR="Black" Background="Stars.gif" Color="White">

You can change the link color like this:

<BODY BGCOLOR="Black" Background="Stars.gif" Color="White" LINK="Blue">

You can change the vlink color like this:

<BODY BGCOLOR="Black" Background="Stars.gif" Color="White" LINK="Blue" VLINK="Gray">

You can change the alink color like this:

<BODY BGCOLOR="Black" Background="Stars.gif" Color="White" LINK="Blue" VLINK="Gray" ALINK="Red">

VLINK stands for visited link, and AKINK stands for activated link. A vlink is a link you have allready followed and will be a different color from links you havent followed. an alink will chane color when you click on a link.

The Body tag is a closed tag.

HTML has six levels of headings, numbered 1 through 6, with 1 being the largest. Headings are typically displayed in larger and bolder fonts than normal body text. The first heading in each document should be tagged as <H1>.

The Heading tag is a closed tag.

The center tag will center almost anything on a page.

The Center tag is a closed tag.

Any amount of white space will automatically be compressed into a single space when your HTML document is displayed in a browser. The easiest way to understand a tag, is to say when a browser reads a tag it will insert an empty line into the document. The only time you would use the closing tag would be when you are aligning the paragraph, the closing tag will tell the alignment when to stop aligning. To use alignment do this:

your text

The paragrph tag is an open tag, but can also be closed.

Bolding things can be a great way to make text stand out from the text srounding it, bold text like this:

Webheads

The Bold tag is a closed tag.

To underline text use the underline tag, the syntax is:

Underline something

But rember that on the internet, Links are usualy the things that are underlined, don't confuse your readers by making non links , look like links.

The Underline tag is a closed tag.

HTML supports unnumbered, numbered, and definition lists. You can nest lists too (put one kind of list in another kind), but use this sparingly because too many nested items can get difficult to follow.

Unnumbered Lists

To Make an Unnumbered, Bulleted List

1. Start with an opening list tag <UL>
2. Enter the <LI> (list Item) tag followed by the individual item, no closing </LI> tag is needed.
3. End the entire list with a closing list </UL>

Below is a sample three-item list:

<UL>
<LI> apples
<LI> bananas
<LI> grapefruit
</UL>

The output looks like this:

� apples
� bananas
� grapefruit

The <LI> list items can contain multiple paragraphs. Indicate the paragraphs with the tags.

Numbered Lists

A numbered list (also called an ordered list, from which the tag name derives) is identical to an unnumbered list, except it uses <OL>. The items are tagged using the same <LI> tag. An Example follows:

<OL>
<LI> oranges
<LI> peaches
<LI> grapes
</OL>

The output looks like this:

1. oranges
2. peaches
3. grapes

Definition Lists

A definition list (coded as <DL>) usually consists of alternating a definition term (coded as <DT>) and a definition (coded as <DD>). Web browsers generally format the definition on a new line and indent it.

An example of a definition list:

<DL>
<DT>Learning Centre
<DD>Learning Centre has a site on the World Wide Web devoted to learning.</DL>

The output looks like this:

Learning Centre
Learning Centre is a site on the World Wide Web devoted to learning.

Use the <PRE> tag (which stands for "preformatted") to generate text in a fixt-width font. (every letter of the alphabet is the same width). This tag also makes spaces, new lines, and tabs significant - multiple spaces are displayed as multiple spaces, and line break in the same locations as in the source HTML file. This is useful for program listings, among other things. For example, the following lines:

<PRE>

Learning Centre

This text was generated by a word processor, and copied and pasted into this document, the text retains its shape, meaning, the text will look the same in the browser, as it does in the source code, even the empty spaces are preserved, and without any HTML tags inside the pre tags.

</PRE>

The <PRE> tag can be used with an optional WIDTH attribute that specifies the maximum number of characters for a line. WIDTH also signals your browser to choose an appropriate font and indentation for the text.

The Pre tag is a closed tag.

Extended Quotations

Use The <BLOCKQUOTE> tag to include lengthy quotations in a separate block on the screen. Most browsers generally change the margins for the quotation to separate it from surrounding text.

In this example:

Omit needless words

Vigorous writing is concise. A sentence should contain no unnecessary words, paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts. -- William Strunk, Jr., 1918.

</BLOCKQUOTE>

The result is:

Omit needless words.


Vigorous writing is concise. A sentence should contain no 
unnecessary words, a paragraph no unnecessary sentences, for the
same reason that a drawing should have no unnecessary lines and a
machine no unnecessary parts.

	--William Strunk, Jr., 1918.

The Blockqote tag is a closed tag.

This tag forces a line break with no extra white space between line. Using the tags for short lines of text such as a postal addresses results in unwanted white spaces underneath it. Use the tag in this case.

The Br tag is an open tag.

<HR>

This tag produces a horizontal line the width of the browser window. This is useful to separate major sections of your document. You can vary a rule's size (thickness) and width (the percentage of the window covered by the rule). Try

<HR SIZE=4 WIDTH="50%">.

The Hr tag is an open tag.

Logical Versus Physical Styles

Why are there both logical and physical styles ?
HTML has two types of styles for individual words or sentences and they are the logical and physical styles. Logical styles tag text according to its meaning, while physical styles indicate the specific appearance of a section. Why both styles ? Choice is good.

LOGICAL STYLE

<DFN> For a word being defined. Typically displayed in italics.

For emphasis. Typically displayed in italics.

<CITE> For titles of books, films, etc. Typically displayed in italics.

<CODE> For computer code. Displayed in a fixed-width font.

<KBD> For user keyboard entry. Typically displayed in plain fixed-width font.

<SAMP> For a sequence of littoral characters. Displayed in a fixed-width font.

For strong emphasis. Typically displayed in bold.

<VAR> For a variable, where you will replace the variable with specific information. Typically displayed in italics.

Physical Styles

Italic text

<TT> Typewriter text, e.g. fixed-width font.

Escape Sequences (a.k.a. Character Entities)

Character entities have two functions:

* escaping special characters * displaying other characters not available in the plain ASCII character set.

Three characters, the left angle bracket "<", the right angle bracket ">" and ampersand "&" have special meaning in HTML and cannot be used "as is".

The angle brackets are used to indicate the beginning and end of HTML tags, and the ampersand is used to indicate the beginning of an escape sequence.

To use one of the three characters in an HTML document, you must enter its escape sequence instead:

< = <

> = >

& = &

  = a space

Unlike the rest of HTML, the escape sequences are case sensitive. You cannot, for example use &LT; instead of &lt.

LINKING IN HTML

The chief power of HTML comes from its ability to link text and images to other documents or sections of a document. A browser highlights the identified text or image with color and or underlines to indicate that it is a hypertext link.

<A HREF="your filename">What you click on, or see on the page goes between the opening and closing link tags </A>

Specific Sections

Anchors can also be used to move a reader to a particular section in a document (either the same or a different document) rather than just going to the top, which is the default. This type of anchor is commonly called a named anchor because to create the link, you insert names within the Link Tag.

Creating a document as one long file can make printing and downloading easier but it can be time consuming to move through when all you want is a specific part of the document. In this way you can create a table of contents or index for the page. To create a index use this tag were you want the index to go:

<A HREF="#cre">Put your click here</A>

Then the part of the document you wish to link to you would put:

<A NAME="cre">Creating</A>

"cre" is the name for Creating so when you click on the link in the index, the line that has Creating will jump to the top of the window.

LINKS TO DIFFERENT DOCUMENTS

Suppose you want to set a link from this document to a specific place in another document, you would make a link and add a named anchor to it like this:

MAILTO LINKS

You can make it easy for a reader to send electronic mail to a specific person including the mailto attribute in a hyperlink, The Format is:

IMAGES

Most Web browsers can display inline images (images next to the text) that are in several different formats GIF and JPEG among them. However each image takes additional time to download and slows down the initial display of the document. Carefully select your images and the number of images so it wont be slowed to much. To put an inline image on your page:

Where your image filename is the URL of the image file. If the image file is a GIF file, then the filename part must end with gif.

IMAGE SIZE

You should include two other attributes on the <IMG> tags to tell the browser the size of the images it will downloading with the text. The HEIGHT and WIDTH attributes let the browser set aside the appropriate space (in pixels) for the images as it downloads the rest of the file. You can get the pixel size from image-processing software, such as Adobe Photoshop. Some browsers will also display the dimensions of an image file in the title bar if the image is viewed by itself without an enclosing HTML document.

Use the IMG attributes like this:

Some browsers use the HEIGHT and WIDTH attributes to stretch or shrink an image to fit into the allotted space when the image does not exactly match the attribute numbers.

EXTERNAL IMAGES, SOUNDS, or ANIMATION'S

You may want to have an image open as a separate document when a user activates a link on either a word or a smaller inline version of the image included in your document. This is called an external image, and it is useful if you do not wish to slow down the loading of the main document with large images.

To include a reference to external image, enter:

<A HREF="Your Image.GIF>link anchor</A>

You can also create a smaller image for the link anchor which is linked to the full size image like this:

The reader will see the small image on the page, this will be the image tag with the height and width attributes, it's placed inbetween the opening and closing link tags.

Click this image and a new image or page with the image embeded in it will load, depending on which file type you put in the hyper-refence (HREF="file.gif or file.htm").

You will see a border around the image and while some images don't have borders, this images border indicates the image is a link. Use the same syntax for links to external animation's and sounds. The only difference is the file extension of the linked file, for example:

<A HREF="Atomspin.avi">link Anchor</A>

Aligning Images

You have some flexibility when displaying images. You can have images separated from text and aligned to the lift or right or center. You can have an image aligned with text. try several possibility to see how your information looks best.

Aligning Text with an Image

By default the bottom of an image is aligned with the text, You can align images to the top, bottom, center, left, right of a paragraph using the ALIGN=" " attribute. This text is aligned with the top of the image, the browser aligns, only one line at the top and then it jumps to the bottom of the image for the rest of the text.

ALTERNATE TEXT FOR IMAGES

Some Web browsers -- primarily the text-only browsers such as lynx -- cannot display images, and some users turn off images loading so the page will load the text faster.

The ALT attribute lets you specify text to be displayed instead of an image, for example:

You should try to include alternate text for each image you use in your document, which is a courtesy for your readers.

IMAGES as HYPERLINKS

Inline images can be used as hyperlinks just like plain text.

Use the following link tag:

The white border that surrounds the image indicates that it's a click able hyperlink. You may not always want a border to be displayed, adding the border attribute and setting it to zero, will result in an image without any borders.

BACKGROUND IMAGES

Most newer versions of Web Browsers can load an image and use it as a background when displaying a page. Some people like background images and some don't. In general, if you want to include a background, make sure your text can be read easily when displayed on top of the image.

Background images can be a texture (linen finished paper, for example) or an image of an object (possibly a logo). You create the background image as you do any image, however you only have to create a small image as the browser uses a feature called tiling, it takes the image and repeats it across and down to fill your browser window. This action is automatic when you use the background attrbute which goes in the BODY tag.

URL's

The World Wide Web uses Uniform Resource Locators (URL's) to specify the location of files on other servers. A URL includes the type of resource being accessed (e.g., Web, gopher, FTP) , the address of the server, and the location of the file. The syntax is: scheme://host.domain (:port)/path/filename

where scheme is one of;

File
a file on a local system FTP
a file on a anonymous FTP server HTTP
a file on a World Wide Web Server Gopher
a file on a Gopher server WAIS
a file on a WAIS server NEWS
a Usenet newsgroup TELNET
a connection to a Telnet-based service

The port number can generally be omitted. Unless someone tells you otherwise, leave it out.

The Font Tag Does many things, from changing the text color, to changing the size, or type.

To change the text color. The attribute that changes the color, is the COLOR attribute.

This text is RED

Now we have red text, so now we can change the type of font used, from the default, to Symbol, not that it is a great font, but that it is at least different. The attribute that changes the font type, is the FACE attribute.

This text is RED

The attribute that changes the size is the SIZE attribute, the size can range from 6, the largest, to 1 the smallest.

This text is RED, is using Times New Roman, and its size is 6.

When using the face attribute, you can use more than one font style by septerating them with a coma, the browser will try to use the first font, and if the computer doesn't have it, it will try to use the second, and so on.

Case Sensitivity

It is important to point out that UNIX is a case sensitive operating system where filenames are concerned, while DOS and the Mac OS are not. For instance, on a Macintosh, "DOCUMENT.HTML", "Document.HTML", and "document.html" are all the same name. If you make a relative hyperlink to "DOCUMENT.HTML", and the file is actually named "document.html" the link will still be valid. But if you upload your pages to a UNIX Web server, the link will no longer work.

So be sure to check your filenames before uploading.

Enjoy.

Ken Carmody. (A Carnegie Webhead).

Hosted by www.Geocities.ws