Tuesday, May 10, 2011

Introduction to HTML. Basic HTML tags

HTML Tutorial. Introduction to HTML. Basic HTML tags

HTML Introduction

HTML stands for Hyper Text Markup Language.

HTML is the computer language that is used to create documents for display on the Web. Many editors exist to create Web Pages – Word, FrontPage, and DreamWeaver are just a few. Nevertheless, each of these software programs (editors) performs the exact same task – they all generate HTML language.

The HTML language consists of a series of HTML tags. Learning HTML involves finding out what tags are used to mark the parts of a document and how these tags are used in creating an HTML document.

Tags are instructions that tell your browser what to show on a Web page. They break up your document into basic sections. All tags start with a < (left bracket) and end with a > (right bracket).

Basic HTML Tags

<HTML> </HTML>
This tag tells your browser that the file contains HTML-coded information. All html tags must be placed between the open <HTML> tag and the closed tag </HTML> The file extension .html also indicates the document is an HTML document. All html documents MUST be saved with the .html file extension.

<HEAD> </HEAD>
The head tag identifies the first part of your HTML-coded document. The title tag (explained below) must be places between the open <HEAD> tag and the closed </HEAD> tag.

<TITLE> </TITLE>
The title tag contains your document title and identifies its content in a global context. The title is typically displayed in the title bar at the top of the browser window, but not inside the window itself. The title is also what is displayed on someone's hotlist or bookmark list, so choose something descriptive, unique, and relatively short. A title is also used to identify your page for search engines (such as Hotbot or AltaVista).

<BODY> </BODY>
The largest part of your HTML document is the body, which contains the content of your document (displayed within the text area of your browser window). All HTML tags that pertain to the body of your HTML document must be places between the open <BODY> tag and the closed </BODY> tag. The tag has attributes which you can use to set the colors of your background, text, links, and also to include your own background image. They are as follows:
  • BGCOLOR="white" Sets the background color (other color names: red, black, blue etc)
  • TEXT="black" Sets the body text color
  • LINK="blue" Sets the unvisited hypertext links
  • VLINK ="purple" Sets the visited hypertext links
  • ALINK="red" Sets the active hypertext links (the color of the hypertext link when you have your mouse button depressed)
  • BACKGROUND Let you use an image as the background <background=
Body attributes are used as part of the open <body> tag. For example:

<BODY BGCOLOR = "white" TEXT = "black" LINK = "blue" VLINK = "purple" ALINK = "red">

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

The syntax of the heading element is: <Hy>Text of heading </Hy>

where y is a number between 1 and 6 specifying the level of the heading.

<P> Paragraph tag
Unlike documents in most word processors, carriage returns in HTML files aren't significant. In fact, any amount of whitespace -- including spaces, linefeeds, and carriage returns -- are automatically compressed into a single space when your HTML document is displayed in a browser. So you don't have to worry about how long your lines of text are. Word wrapping can occur at any point in your source file without affecting how the page will be displayed.

In the bare-bones a paragraph could be coded as:

<P>This is a paragraph

the line break is ignored.</P>

In the source file there is a line break between the sentences. A Web browser ignores this line break and starts a new paragraph only when it encounters another <P> tag.

To align a paragraph, use the align attribute along with the paragraph tag. Alignment can be "center" or "right." Left is the default alignment. Text will be aligned in the manner spcified until the paragraph tag is closed </P>

<P ALIGN="center"> This paragraph is centered </P>

TIP: To preserve readability in HTML files, put headings on separate lines, use a blank line or two where it helps identify the start of a new section, and separate paragraphs with blank lines (in addition to the <P> tags). These extra spaces will help you when you edit your files (but your browser will ignore the extra spaces because it has its own set of rules on spacing that do not depend on the spaces you put in your source file).

NOTE: The </P> closing tag may be omitted. This is because browsers understand that when they encounter a <P> tag, it means that the previous paragraph has ended.

<BR> Line break
The <BR> tag forces a line break with no extra (white) space between lines. Use the <BR> tag instead of the <P> tag when you want a line break with no additonal vertical space. Think of this a single spacing.

<UL></UL>, <OL></OL>, <LI> Unordered and Ordered Lists
HTML supports unnumbered and numbered lists. You can nest lists too, but use this feature sparingly because too many nested items can get difficult to follow.

HTML LISTS

1. Unnumbered Lists
To make an unnumbered, bulleted list,
  1. start with an opening list <UL> (for unnumbered list) tag;
  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> tag.
Below is a sample three-item list:

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

The output is:
  • apples
  • bananas
  • grapefruit
The <LI> items can contain multiple paragraphs. Indicate the paragraphs with the <P> paragraph tags.

2. Ordered Lists
A numbered list is identical to an unnumbered list, except it uses <OL> instead of <UL>. The items are tagged using the same <LI> tag. The following HTML code:

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

produces this formatted output:
  1. oranges
  2. peaches
  3. grapes
<HR> Horizontal Rule
The <HR> tag produces a horizontal line the width of the browser window. A horizontal rule 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). Experiment with the settings until you are satisfied with the presentation. For example:

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

Character formatting

<B></B> Bold
<I></I> Italics
<U></U> Underline
<CENTER></CENTER> Centers image/text

<FONT> </FONT>
Font tag controls font attributes such as size, color and face. Sizes can range from 1-7, where 1 is the smallest and 7 the largest font size. <FONT SIZE ="1" COLOR= "pink" FACE="ariel">This text is small and pink</FONT>

LINKING in HTML

The chief power of HTML comes from its ability to link text and/or an image to another document or section of a document. A browser highlights the identified text or image with color and/or underlines to indicate that it is a hypertext link (often shortened to hyperlink or just link).

HTML's single hypertext-related tag is <A>, which stands for anchor. To include an anchor in your document:
  1. start the anchor with <A (include a space after the A)
  2. specify the document you're linking to by entering the parameter HREF="filename" followed by a closing right angle bracket (>)
  3. enter the text that will serve as the hypertext link in the current document
  4. enter the ending anchor tag: </A> (no space is needed before the end anchor tag)
Here is a sample hypertext reference to our class syllabus:

<A HREF="http://www.luc.edu/faculty/dfelici/">Class Syllabus</A>

This entry makes the words Class Syllabus the hyperlink to the URL for the class syllabus.

Mailto links
You can make it easy for a reader to send electronic mail to a specific person or mail alias by including the mailto attribute in a hyperlink. The format is:

<A HREF="mailto:emailinfo@host">Name</a>

Images
Most Web browsers can display images that are in X Bitmap (XBM), GIF, or JPEG format. Each image takes additional time to download and slows down the initial display of a document. Carefully select your images and the number of images in a document.

To include an image, enter:

<IMG SRC=ImageName.fileformat>
<IMG SRC=images/ImageName.fileformat -- if the image is in a directory called "images"

In order for the image to display in your browser the image must be saved, preferably to the same directory, as the .html page that refers to it, either on the webserver (ORION) or on a local drive (A:, C:, etc). If the image exist in a directory other than the one the HTML page is saved, you must include the path to the directory as part of the tag information (as shown above).

Example: Creating a simple HTML page

1. Start Notepad.
2. Type in the following text
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is a very basic HTML webpage. <b>This text will be displayed in bold</b>
</body>
</html>
3. Save the file as "firstpage.html".
4. Double click the saved file the browser will display the page.


Comments: