BasicHTML

Articles: Basic HTML

Above:
JPEG image.

Basic HTML
by Ginger Rosenkrans
updated 3/22/06

Basically, there are three kinds of popular Web page design software

Dreamweaver

FrontPage

Go Live

Viewing code HTML

View source (Notepad)

Format>Word Wrap

Meta name= “keywords” (for searching)

Example: recycler.com

View>source

About HTML

HTML (Hyper Text Markup Language) allows multimedia hypertext documents and related multimedia data to be authored, edited, published, referenced, and navigated through the Web. HTML uses syntactical elements called tags. HTML files can be created using any text editor (e.g., Notepad on a Windows machine, HTML window on FrontPage 2000).

An element is a component of the structure of a text document. Examples of elements are heads, tables, paragraphs, and lists. HTML tags are used to mark the elements of a file for a browser. Elements can contain plain text, other elements, or both.

To denote the various elements in an HTML document, tags are used. HTML tags consist of a left angle bracket (<), a tag name, and a right angle bracket (>). Tags are usually paired (e.g., <H1> and </H1>) to start and end the tag instruction. The end tag looks just like the start tag except a slash (/) precedes the text within the brackets. Some HTML tags are given below.

Some elements may include an attribute, which is additional information that is included inside the start tag. For example, you can specify the alignment of images (top, middle, or bottom) by including the appropriate attribute with the image source HTML code. Tags that have optional attributes are given below.

HTML is not case sensitive. <title> is equivalent to <TITLE> or <TiTlE>.

< > these are TAGS

</HTML> Attributes are what’s inside the tags

The length of each line is determined by the browser window.

The World Wide Web Consortium (W3C) is the name of the organization that defines and established new versions of HTML.

Creating a root folder (to put all pages and pictures)

R click, new folder

Name: surfnturf (best to put everything all in one word)

Access Notepd

Accessories> Notepad

Format>font (change font size)

Minimum of an HTML Document

Every HTML document should contain certain standard HTML tags. Each document consists of head and body text. The head contains the title, and the body contains the actual text that is made up of paragraphs, lists, and other elements. Browsers expect specific information because they are programmed according to HTML and SGML specifications.

The required elements are the <html>, <head>, <title>, and <body> tags (and their corresponding end tags).

Tags

HTML

The <HTML> tag declares that the text that follows defines an HTML Web page that can be viewed in a Web browser. The closing </HTML> tag ends the page.

Head Tag

The <HEAD> tag defines the header area of a page, which is not displayed within the page itself in the browser. The closing </HEAD> tag ends the header area.

Title

The text between <TITLE> and the closing </TITLE> tag is the title of the Web page and is displayed in the title bar of a browser. The title should be descriptive; as it is frequently used by Web indexing and searching programs to name the Web page.

Body

The <BODY> tag delineates the actual content of the Web page that will be displayed in the browser. There are several optional attributes for this tag. One of them is BACKGROUND, with which you can specify a background graphical image for the page.

Paragraph

Use the paragraph tag () to mark the beginning of a new paragraph; the ending tag, , is optional but should be included for clarity during revisions. You can include the ALIGN attribute to specify whether the paragraph should be centered or right-aligned in the page.

NOTE: Left-aligned is the default.

Comment

The Comment tag is not revealed in the browser, but will be advantageous when editing or viewing the HTML code for a page. In Internet Explorer, use the <COMMENT> tag to create descriptive comments within the code, which will be ignored by the browser. With other browsers, you can use the combination of symbols to create a comment. You must use an open and closed tag.

The following example will place a comment but will not be revealed in the browser:

<comment> Anything between these comment tags will not be shown in the browser. </comment>

Break

Use the line break tag for no extra spaces between lines. You only need to place the tag after the sentence. No open or closed tags are required.

The following example will break each line without any space between the lines.

The surf is up in Malibu.

Go to your local Malibu surf report.

Have a nice day.

Preformatted

In the preformatted tag <PRE>, spaces and hard returns in the HTML code do display. It instructs a browser to display the text in a mono-spaced font that allows you to align text precisely, such as you would when showing a program listing.

Address

allows you to display author information for a Web page, such as a URL, author name, date of last revision, etc. in itals in the browser.

Spaces

You can include extra spaces and blank lines in HTML code to make the code easier to read and interpret. When a browser opens a Web page, it ignores multiple spaces within the code and displays them as a single space.

Hard Returns

HTML code ignores all hard returns within the code: for example, an Enter at the end of a text line you are editing in Notepad will not be displayed in the user's browser.

Formatting text and pages: absolute and relative

absolute (literal) font type. It’s specified by a name and color specified by a hexadecimal RGB color value. EX: Surf’s Up!

Relative (logical) attribute: font size 5 refers to a size that is relative to the browser’s default font size (which is 2 in Internet Explorer). EX: Surf’s Up!

Background Format

to change the color of the page background, you can use the optimal attribute BGCOLOR for <body> tag. Ex: <body BGCOLOR= “birds.gif”> </body>

Text attribute to change the default color of the text

EX: <body BGCOLOR= “0000AB” Text= “#FFFFFF”> Write your text after the tag. (/BODY>

These also all require opening and closing tags:

Italicize text

emphasizes text (browser displays in itals)

bold faces text

gives strong emphasis (browser displays inbold)

<s> strike-through text

underline—but avoid this and reserve underlining text for links

Text Format
1. Two popular fonts online: Verdana and Arial

2. Times New Roman is defaulted for most browsers

3. To change from Times to another font, you must open and close font face tag

Tag is:

your text goes after your open tag and be sure to close it like this:

4. Font with a color looks something like this:

Designing for Monitor Size

15” monitor= 640 pixels across

17” monitor=800 pixels across (most popular one)

19” monitor=1,024pixels across

Horizontal line tag

has no closing tag and looks like this:

Sample HTML Document

<html>

<head>

<title> Surf N Turf - The best tours on the planet!

</title>

</head>

<H1> Welcome to Surf N Turf Tours

</H1>

</center>

We have been crafting quality tours for 25 years. Our

all-inclusive tours will fit any lifestyle and budgets. Call our

tour consultants any time of the day to find your perfect tour.

We take care of the details so you can concentrate on having fun.

</center>

Surf N Turf Tours </>

24255 Pacific Coast Hwy.

Malibu, CA 90263

1-800-Tours 4u

</body>

</html>

Above: JPEG image.

Basic HTML by Ginger Rosenkrans updated 3/22/06