|
Basics
Computers need to understand language just like we do, so it’s important that you use the proper HTML “grammar”. The order of the symbols and letters is crucial to writing an effective code. Often the the commands have a beginning and an end, but not always. The initial command is enclosed within angle brackets <>, and the closing command has angle brackets with a forward slash </>. Quotation marks also play a special part. Below you will find some basic HTML commands for formatting text, images, and more. To continue, choose a topic from the navigation menu on the left. |
TEXT
Command
Paragraph
|
Symbol
<p>
|
Example
<p>This starts a paragraph of text, and here it ends.</p>
This starts a paragraph of text, and here it ends. |
|
Heading
|
<h1>
|
<h1>Big title</h1> for a paragraph
Big title for a paragraph (Note: There's also h2, h3, h4, h5, and h6) |
|
Block quote
|
<blockquote>
|
<blockquote>This is an easy way to create margins on each side of the text.</blockquote>
|
|
Bold
|
<b>
|
This <b>makes text bold</b> until you tell it to stop
This makes text bold until you tell it to stop |
|
Italic
|
<i>
|
This <i>makes text italic</i> until you tell it to stop
This makes text italic until you tell it to stop |
|
Bold & Italic
|
<b> & <i>
|
Here's a <b>combination of bold and <i>italic</i> words</b> in a sentence.
Here's a combination of bold and italic words in a sentence. |
|
Line Break
|
<br>
|
This makes a line of text end<br> where you want it to.
This makes a line of text end where you want it to. |
|
Line
|
<hr>
|
This will add a horizontal line to your text.<hr> Like Line Break, there is no closing tag for it.
This will add a horizontal line to your text. Like Line Break, there is no closing tab for it.
|
Images & Hyperlink
|
Command
Image
|
Symbol
<img src= "URL"/>
|
Note
The URL portion is the URL of the image. Be sure to include the quotation marks, and use the image's URL and not the web page's.
|
|
Alt attribute
|
<img src= "URL" alt="description"/>
|
The alt attribute provides words in place of the image. This is helpful for visually impaired persons. Just enter a short description of the image (i.e. erupting volcano).
This command doesn't seem to work in Google Earth at this time. |
|
Center
|
<center>
|
<center>This command</center> can be used to center an image or text element.
This command
can be used to center an image or text element.
|
|
Size
|
<img src="URL" width="400" height="300"/>
|
Width and height can be specified within the image command. Be careful of proportions.
|
|
Hyperlink
|
<a href= "URL"> Link text</a>
|
Color
Color can be added to text, border lines, and the background. The color command can be given as the color’s name or a 6-digit code consisting of letters and/or numbers. Like most of the commands above, it is added on to the list of descriptives for a particular element. In the Layout Templates, I will provide the cue “add color” at the appropriate spots for you. Delete the add color and enter a color name or 6-digit code from one of these resources: Visibone's Web Color Chart or W3 School’s HTML Color Names. Enter in color codes such as 33FF33 or just try typing in the color you want. You’ll find many of the basic color names such as red or darkblue (no spaces) will work also.
|
Command
Background
|
Symbol
bgcolor = "add color"
|
Description
This command designates the color for the background.
|
|
Border
|
border color = "add color"
|
This portion will determine the color of a table's border.
|
|
Color
|
color = "add color"
|
This is typically what you will see as one of the descriptive elements for the text. It determines the color of the text. You'll probably see other text elements with it, such as font and size. Those can be changed also.
|
