Basic HTML Guide (Look here)

Xaltic · Feb 15, 2007

Basic Guide to HTML
An Introduction to HTML.

For those of you who don't know HTML is a language used by Web pages.
Web Pages are built using HTML, short for HyperText Markup Language. HTML documents are comprised of text and coding that instruct a Web Browser how to display the data. HTML documents are identified by their .html or .htm file extension. Because any Web Browser can read an HTML document, you do not need a special platform , such as Windows, UNIX, or Mac, to view the information.

HTML Coding.

HTML Coding consists of tags. Tags are individual instructions to the browser and are surrounded by brackets, < >. Many tags include an opening tag and a closing tag. When writing tags, you can use upper- or lowercase letters. To make the coding easy to read, most users type it in uppercase to distinguish the coding from regular text data on the page. Tags can also include attributes you can define, such as color values or measurements.
Part 2
Creating Your First HTML Page

Contents:

Understanding HTML Document Structure

Start an HTML Document

Save an HTML Document

View an HTML Page

Add a Document Declaration

Add MetaData

Understanding HTML Document Structure.

All HTML documents are built on key elements that define a page's structure. Although every HTML page differs in content and layout, the underlying structure remains the same. Understanding the basic structure of a document can help you understand how to build and improve your own HTML pages.

HTML Element:

The <HTML> and </HTML> Tags are the main tags used to identify an HTML document. When a browser encounters these tags, it knows that anything within the two tags is part of an HTML document. With the latest version of HTML and newer versions of Web Browsers, the tags are not always necessary, but adding them is always good form. Older Web browsers expect to see the HTML element tags.

Document Header

You can use the document header to add basic information about your page. The document header tags, <HEAD> and </HEAD>, follow the <HTML> opening tag. You can use the document header to include title information, metadata, and base and script elements.

MetaData

Metadata is data that describes the material on your page, such as author information, any programs you used to create the page, a description of the page, and keywords for search engines. You can use the Metadata tags to add author and copyright information, too. You can place metadata between your document header tags.

Title

You can add a title to your document header to help other identify your page. For example, if you are building a web page for business, your company name is a good page title. Web browsers display the title in the browser window's title bar. You can use the <TITLE> and </TITLE> tags to define a page title. For best results, keep the title brief and to the point.

Body

The content of your page, including paragraphs, lists, and images, appears within the body of your HTML document. The body of the document is identified by the <BODY> and </BODY> tags. Anything you place between these tags appears on the document and in the browsers window. The body of the document includes blocks of text, headings, lists, tables, and forms.

Start an HTML Document

You can start an HTML document using a text editor or word processing program. You can use the sets of HTML tags to define the basic structure of your page.

The <HTML>, <HEAD>, and <TITLE> tags are basic to Web pages. The <HEAD> and <TITLE> information doe not appear on the web page itself; however, the text you include between these tags declares the type of document and briefly describes the page. The text you place between these tags appears in the browsers window's title bar.

Start an HTML Document:
1. Open the text editor or word processing program you want to use.
(I recommend WordPad or Notepad)

2. Type <HTML>
This tag declares the document is an HTML document.

3. Press "Enter"

4. Type <HEAD>
This tag starts the information descibing the page, including any title text.

5. Press "Enter"

6. Type <TITLE>

7. Type the title text for your page
Title text describes the contents of the page and appears in the title bar of the Web Browser

8. Type </TITLE>

9. Press "Enter"

10 Type </HEAD>
This tag completes the document heading information for the page.

11. Press "Enter"

Note: You do not need to press "Enter" each time you start a new tag or add a close tag. However, placing tags on their own lines in the code can help you more easily identify your page structure.

You should have this right now on your word pad:
Code:
<HTML>
<HEAD>
<TITLE>Your title here</TITLE>
</HEAD>
Body Tags

You can use the body tags, <BODY> and </BODY>, to add content to your page. Page content can include lines of text, paragraphs, bulleted and numbered lists, and more.

12. Type <BODY>
This tag starts the actual content of your webpage.

13. Press "Enter"

14. Type the body text you want to appear on the page. Body text is the content of your page, including lines of text, paragraphs, lists, and more.
For practice, consider typing a simple paragraph for the body text.

15. Press "Enter"

16. Type </BODY>
This tag closes the body portion of the page

17. Press "Enter"

18. Type </HTML>
This tag closes the HTML declaration. You can now save and view your page in a Web Browser.

Note: To save a file as a .html document do the following:
Go to Save as. Find save as type (Bottom) and go to All Files and make your file name but make sure the ending is .html.

You should have this now:
Code:
<HTML>
<HEAD>
<TITLE>Your title here</TITLE>
</HEAD>
<BODY>
This is a very boring paragraph where I'm randomly talking. I like pickles do you? A pickle is a cucumber, it sits in vinegar until it turns sour and a deep green color. Finally when the pickle is done to perfection it is bottled in one of Chef Xaltics pickle jars.
</BODY>
</HTML>
To view an HTML Page go to your Web browser, Then click file. Then click open. The dialog box then appears, Click browse. Go to your file you just saved. Click open. Click ok.

A few things to know:

To create a new paragraph type: Your paragraph 

To add a Line Break type: Ladeda here

To add Preformatted Text type: <PRE> Preformatted text here </PRE>

To add a heading type: <H?> Heading here </H> *Replace ? with the heading level number you want to assign.

To add block quotes type: <BLOCKQUOTE> Quote </BLOCKQUOTE>

To insert a comment type: 

To Create a numbered list type: <OL>. Type <Li> for new list item then type </OL>

To create a bulleted list type: <UL> and type <LI> for every new item. Then type </UL>

To Bold your text type: Text you want bolded 

To Italicize your text type: Text you want Italicized

To Underline your text type: Text you want underlined 

To Change Font size type: <FONE SIZE="?"> Big text? Or maybe small? *Replace ? with size.

To change text color type: YAY COLORED TEXT!! * Change ? the the basic colors. example: red, blue, green purple etc. Or fill it in with the code for the color (Hex color)

To add a horizontal line type: <HR>

I will continue to add to this Guide.

Rate me pl0x?
*/10

Sticky pl0x?

Xaltic.

0wnedwithgaxe · Feb 15, 2007

Nice guide 9/10, maybe I'll start to learn HTML in the future.

Xaltic · Feb 15, 2007

Thanks, And also, as a side note, Please post why you reduced/added points! Thanks.

KEEP THE REVIEWS COMING IN PLEASE

cp · Feb 16, 2007

7.813/10

Not everything is detailed and described as the others.

You should also have included some examples in the extra codes section.

Nice guide though.

Xaltic · Feb 16, 2007

Thanks for Reviewing.

I'll try to update and keep everything as descriptive as possible. I'm making major update soon. Ill add examples too.

Thanks for feedback.

MORE REVIEWS PLEASE?

free_bullets · Feb 16, 2007

Isn't easier to use FrontPage?

Xaltic · Feb 17, 2007

Yes... But frontpage is an HTML editor. It just does the HTML for you.

trio · Mar 24, 2007

pretty good 8/10

hockeyman · Mar 25, 2007

10/10 lol now i know html woot

zackcraig · Mar 26, 2007

www.pixel2life.com and www.htmlgoodies.com are great sites for coded site building.

shad0w~ · May 6, 2007

9/10 im into html for a while now im learning about it.

Log in or Sign up

Basic HTML Guide (Look here)

Xaltic Member

0wnedwithgaxe Apprentice

Xaltic Member

cp ａｎｃａｔ

Xaltic Member

free_bullets Active Member

Xaltic Member

trio Active Member

hockeyman Guest

zackcraig Guest

shad0w~ Guest

Log in or Sign up

Basic HTML Guide (Look here)

Thread Tools

Xaltic Member

0wnedwithgaxe Apprentice

Xaltic Member

cp ａｎ ｃａｔ

Xaltic Member

free_bullets Active Member

Xaltic Member

trio Active Member

hockeyman Guest

zackcraig Guest

shad0w~ Guest

cp ａｎｃａｔ