Basic HTML Cheat Sheet 1 - Camas High School

Basic HTML Cheat Sheet

1

HTML Tags

HTML works in a very simple, very logical, format. It reads like you do, top to bottom, left to right. That's

important to remember. HTML is written with TEXT. What you use to set certain sections apart as

headings, subtitles, bold text, underlined text, etc is a series of tags.

Tag Format

?

?

?

?

?

?

?

HTML tags are used to mark�\up HTML elements

HTML tags are surrounded by the two characters < and >

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

All tag formats are the same. They begin with a less�\than sign: < and end with a greater�\than sign: >.

Always. No exceptions. What goes inside the < and > is the tag. Learning HTML is learning the tag to

perform whatever command you want to do. Here's an example:

The tag for a paragraph is "p". That makes sense.

For example:

This is a paragraph.

The majority of HTML tags do require both an open and a close tag (a begin and end tag). Most are very

easy to understand because the tag is obvious. Here are a few and what they do to text:

This text will appear bold

This text will appear in italics

This text will appear underlined

Follow this rule:

Always set the beginning and end tags at the same time, always placing them on the farthest end of the

item being affected. In other words, the first tag in is the last tag out. For example:

Strong and emphasis

The tag is the first one in, and is the last tag out.

Basic HTML Cheat Sheet

2

Single Tags

The open and close tag format dominates the majority of the available HTML tags, but there are tags

that stand alone.

Here are two useful ones:

This command gives you a line across the page. (HR stands for Horizontal Reference.)

The tag can also be modified using the following as a guide:

Which will give the following results:

This Breaks the text and starts it again on the next line. Remember you saved your document as

TEXT so where you hit ENTER to jump to the next line was not saved. In an HTML document, you need to

denote where you want every

Carriage return with a .

You can write your HTML by hand with almost any available text editor, including notepad that comes as

a standard program with Windows.

All you need to do is type in the code, then save the document, making sure to put an .html extension or

an .htm extension to the file (for instance "mypage.html"). Open Notepad and type in the following:

Title of page

This line is a header

this line is a paragraph of text.

This text is bold

Save the file as "mypage.htm".

Start your Internet browser. Select "File>Open" (or "Open Page") in the File menu of your browser. A

dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created �\

Basic HTML Cheat Sheet

3

"mypage.htm" �\ select it and click "Open". Now you should see an address in the dialog box, for example

"C:MyDocumentsmypage.htm". Click OK, and the browser will display the page.

Tag Attributes

Tags can have attributes. Attributes provide additional information to an HTML element.

The following tag defines an HTML table: . With an added border attribute, you can tell the

browser that the table should have no borders:

Attributes always come in name/value pairs like this: name="value".

Attributes are always specified in the start tag of an HTML element.

Attributes and attribute values are also case�\insensitive. However, the World Wide Web Consortium

(W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation, and XHTML

demands lowercase attributes/attribute values.

This is a basic table with two columns and two rows:

Cell 1

Cell 2

Cell 3

Cell 4

This will produce the table below.

Cell 1

Cell 2

Cell 3

Cell 4

Note the tag attributes, width="200" and border="1". These attributes define the tables width, 200

pixels, and border thickness, 1px. The cellpadding is the amount of distance in pixels from the text to the

inside of the cell border. The cellspacing is the amount of distance between the individual cells, in this

case 0 pixels. The bgcolor="#FF0000" is a hexadecimal number that defines the background color of the

cell, in this case red. The sets the font color, in this case blue.

The stands for Table Row, the stands for Table Data.

Basic HTML Cheat Sheet

4

Headings

Headings are defined with the to tags. defines the largest heading. defines the

smallest heading.

This is a heading

This is a heading

This is a heading

This is a heading

This is a heading

This is a heading

Comments in HTML

The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by

the browser. You can use comments to explain your code, which can help you when you edit the source

code at a later date.

Note that you need an exclamation point after the opening bracket, but not before the closing bracket.

The following example shows the use of a comment tag.

Title of page

This line is a header

this line is a paragraph of text.

This text is bold

The above code will look like this:

Basic HTML Cheat Sheet

5

This line is a header

This line is a paragraph of text.

This text is bold

What is a Hypertext link?

A hypertext link is a special tag that links one page to another page or resource. If you click the link, the

browser jumps to the link's destination.

There are two parts to a link:

?

?

One part tells the human what to do.

The other part tells the browser what to do.

?

Here is an example:

Click here to go to our Home Page will produce a link that looks

like this:

Click here to go to our Home Page

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download