Sept+2

=Basic HTML Stuff We Must Know - 9-2-2008=

This is the stuff we learned in class on 9-2-2008. I pulled most of this stuff off of a most excellent website called [|W3 Schools]. I highly recommend you check it out.

HTML Tags
• HTML tags are used to mark-up HTML elements • HTML tags are surrounded by the two characters • The surrounding characters are called angle brackets • HTML tags normally come in pairs like  and  • The first tag in a pair is the start tag, the second tag is the end tag • The text between the start and end tags is the element content • HTML tags are not case sensitive,  means the same as 

The basic tags we learned:

 * ~ Tag ||~ Description ||
 * || Defines an HTML Document ||
 * || Defines information about the document ||
 * || Defines the document title ||
 * || Defines the document's body ||
 * to || Defines header 1 to header 6 ||
 * || Defines a paragraph ||
 * Inserts a single line break ||
 * Inserts a single line break ||

**HTML**
This element tells a browser that this is an HTML document. This must be the very first and very last tags in the document. Syntax: 

[everything else in your document

**Head** (don’t confuse with Headings, below)
The head element can contain information about the document. The browser does not display the "head information" to the user. Most HTML formatters will add information to the head automatically. The important other tag we learned about that goes within the head is. Syntax: 

[everything in your page, including undisplayed meta-data and all of your content]

Title
This element defines the title of the document. It must be placed within the header tags. You should always define a title. The text that appears within the title start and stop tags will appear in the title bar of your web page. If you don’t use one, the word “untitled” will appear in the title bar, and that is the sign that you (a) are an amateur, (b) don’t care, or (c) both.

Syntax:
 This is your title

[all of your content]

Body
The body element defines the documents' body. It contains all the contents of the document (like text, images, colors, graphics, etc.). I’m not really sure what it’s used for. Basically, the body start tag comes after header close tag and the body close tag comes just before the HTML close tag. Other than that, it’s a bit of a mystery to me.

Syntax:


[all of your content]

Headings
Headings are defined with the to tags. defines the largest heading. defines the smallest heading. “Largest” and “smallest” are literal. Without any further configuration of the headings, the h1 will display “largest” on screen, the h6 the smallest. HTML automatically adds an extra blank line before and after a heading.

Syntax:
 This is a heading This is a heading This is a heading

Paragraphs
Paragraphs are defined with the tag. Surrounding text with paragraph tags has two primary effects. First, all text enclosed within paragraph tags will automatically adjust it’s right margin to remain visible within a browser window when that window is resized by the user. Second, and perhaps more importantly, text within paragraph tags become an “element” that can be formatted using cascading style sheet (CSS) commands. HTML automatically adds an extra blank line before and after a paragraph.

Syntax:
 This is a paragraph This is another paragraph

Line Breaks
The tag is used when you want to break a line, but don't want to start a new paragraph. The tag forces a line break wherever you place it. You may find that will also work as a line break in simple HTML documents, however this form of the tag is not compliant with the most recent X/HTML standards and you shouldn’t use it. “Mail to” link tag We learned how to embed a “mail to:” tag. When you click on this tag, it opens the users default mail application, starts a new message, and inserts the defined email address into the “to:” element of the new email.

Syntax:
TEXT

We also learned some stuff about CSS.
What is CSS? • CSS stands for Cascading Style Sheets • Styles define how to display HTML elements • Styles are normally stored in Style Sheets • Style Sheets can save you a lot of work

Set the background color
You can set the background color of various elements on the page.

Syntax:
 body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)}

Align text
You can align text (left, center, right justified) on the page using various commands. We learned about “center”.

Syntax:
  h1 {text-align: center} h2 {text-align: left} h3 {text-align: right}

In this example the elements defined as headings 1, 2, and 3 would be centered.

Colors
You can also use CSS to define colors for text. HTML has defined certain color names that you can use in your HTML coding. However you can also access the hexadecimal value of colors directly.

The standard color names recognized by HTML are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

There are many colornames supported by many browsers, but only the 16 above are recognized by the W3C standards consortium. You can find a chart of hexadecimal color values for colors guaranteed to be supported by any standards-compliant browser [|here].