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.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related download
- new the complete html cheat sheet stony brook university
- html cheat sheet
- html cheat sheet december
- html and css cheat sheet tn code academy
- html cheat sheet a simple guide to html
- basic html cheat sheet 1 camas high school
- new the complete html cheat sheet
- html color code cheat sheet php
- html cheat css
- beginner s html cheat sheet
Related searches
- basic high school supply list
- basic high school supplies
- camas unified school district
- camas county school district
- basic excel formulas cheat sheet pdf
- visual basic cheat sheet pdf
- high school basic math test
- html coding cheat sheet pdf
- html cheat sheet download
- basic html commands cheat sheet
- basic high school math test
- camas washington school district