CS188 Creations Computing Central

HTML Reference List

An Explanation of HTML

What exactly is HTML? Bascially, HTML stands for Hyper Text Markup Language, and it is the coding language used to create webpages on the internet. This language is then interpreted by web browsers, and converted into a graphical format. There are many different ways to do a single thing in HTML, so when coding there is always a variety of options to choose from. The following HTML reference list is intended for novices as well as experienced users who simply need a decent code reference.

Basic HTML Page Start

Note: The following code is pretty much a "skeleton" for any HTML document. Use it to start your own page.

<html>
   <head>
      <title>Title of Website</title>
   </head>

   <body>

The content of your website goes here.

   </body>
</html>

Font Commands

Bold Text
Code:

<b>Sample Text</b> OR <strong>Sample Text</strong>

Result:
Sample Text

Italic Text
Code:

<i>Sample Text</i> OR <em>Sample Text</em>

Result:
Sample Text

Underlined Text
Code:

<u>Sample Text</u> OR <ins>Sample Text</ins>

Result:
Sample Text

Strikeout Text
Code:

<s>Sample Text</s> OR <strike>Sample Text</strike> OR <del>Sample Text</del>

Result:
~~Sample Text~~

Teletext-style Text
Code:

<tt>Sample Text</tt>

Result:
Sample Text

Superscript Numbers
Code:

&sup#;

Result:
¹ ² ³
Note:
Replace the "#" in the code with the number 1, 2, or 3.

Manual Space
Code:

texttext texttext

Result:
texttext texttext

Change Font Color
Code:

<font color="#00FF00">Sample Text</font>

Result:
Sample Text
Color Code Reference Chart: Click Here

Change Font Size
Code:

<font size="4">Sample Text</font>

Result:
Sample Text

Change Font Style
Code:

<font style="border-width:1px;border-style:dashed;
border-color:#A7C0F4;background-color:#353535;">
Sample Text</font>

Result:
Sample Text

Create Header Text
Code:

<h2>Header Text</h2>

Result:

Header Text

Notes:
Headers, like paragraphs, automatically create line breaks for emphasis. "h7" is the smallest header size possible, while "h1" is the largest.

Create Scrolling Text
Code:

<marquee bgcolor="#000000" direction="left" loop="true" width="300" height="40" scrollamount="1">Sample Text</marquee>

Result:
Sample Text
Notes on setting the optional attributes:
- "bgcolor=" set the background color of the marquee text (use the Color Code Reference Chart)
- "direction=" set the direction you wish the text to scroll in
- "loop=" set to true or false, determines whether or not the marqueed text will loop around infinitely
- "width=" sets the width of the marquee box, in either pixels or window percent
- "height=" set the height of the marquee box, in either pixels or window percent
- "scrollamount=" set to a numerical value greater than 1, determines the speed at which the marquee will scroll

Links

Create a Hyperlink
Code:

<a href="http://www.websiteurl.com">Sample Link</a>

Result:
Sample Link

Create a Hyperlink that Opens in a New Window
Code:

<a href="http://www.websiteurl.com" target="_blank">Sample Link</a>

Result:
Sample Link

Create an Email Hyperlink
Code:

<a href="mailto:webuser@something.com">Email someone!</a>

Result:
Email me!

Images

Insert an Image
Code:

Result:

Insert an Image with Alternate Text
Code:

Result:

Insert a Hyperlinked Image
Code:

Result:

Create Rollover Image Buttons
Code:

Result: (hover mouse over the button and click)

Paragraph-Related Codes

Insert a Horizontal Page Rule
Code:

Result:

Notes:
Experiment with the "width" percentage attribute to get various rule widths.

Insert a Break
Code:

<br>

Result:
Sample Text
Sample Break (you can see this is on a different line than the text above)

Insert a New Paragraph
Code:

<p>Sample New Paragraph</p>

Result:

Sample New Paragraph

Notes:
It may not look like much, but this HTML command is useful for creating seperate paragraphs without having to use two consecutive break commands. The <p> tag automatically creates line breaks for emphasis.

Create a Bulleted List
Code:

<ul>
<li>First thing</li>
<li>Second Thing</li>
<li>Third Thing</li>
</ul>

Result:

First thing
Second Thing
Third Thing

Create a Numbered List
Code:

<ol>
<li>First thing</li>
<li>Second Thing</li>
<li>Third Thing</li>
</ol>

Result:

First thing
Second Thing
Third Thing

Create a Block Quote
Code:

<blockquote>"They say that quotations have lost their luster, but I strongly disagree." - Somebody who is often quoted</blockquote>

Result:

"They say that quotations have lost their luster, but I strongly disagree." - Somebody who is often quoted

Creating Tables

Starting the Table
Code:

<table border="1px">other table commands go inside here</table>

Make Table Columns
Code:

<td>First Thing</td>
<td>Second Thing</td>

Result:

First Thing

Second Thing

Make Table Rows
Code:

<tr>
<td>First Thing</td>
<td>Second Thing</td>
</tr>

Result:

First Thing

Second Thing

Make a Title for the Table
Code:

<caption>This is the title for my table</caption>

Result:

This is the title for my table
First Thing	Second Thing	Third Thing

Changing the Color of the Table
Code:

Result:

First Thing

Second Thing

Third Thing

Color Code Reference Chart: Click Here

Changing the Background Color of the Table
Code:

Result:

First Thing

Second Thing

Third Thing

Color Code Reference Chart: Click Here

Div and Span

Creating a Div
Code:

<div style="position:relative;
left:100px;top:20px;width:140px;height:60px;
overflow:auto;
border-style:solid;border-width:2px;
padding:2px;
background-color:#0323B2;
color:#FB1C14;">

Text within the div element.

</div>

Result:

Text within the div element.

Head on over to the CSS Reference section for a complete explanation of the style variables.

Notes on setting div attributes:
- "position:" set to relative or absolute, absolute places the div at the exact pixel location on the screen, relative places the div the number of pixels relative to the current position
- "left:,top:" set the horizontal and vertical pixel postion for the div element on the screen
- "width:,height:" specifies the width and height of the div element
- "overflow:" set to auto, visible, or hidden, determines how the div will react when content goes outside of the div borders
- "border-style:" set to solid, dashed, double, inset, or outset, sets the type of border for the outside of the div element
- "border-width:" sets the thickness of the border (in pixels)
- "padding:" sets the around of "space" between content and the inside of the div border
- "background-color:" sets the background color of the div element
- "color:" sets the color of text and borders the div element
Color Code Reference Chart: Click Here

Creating a Span
Code:

<span style="position:relative;
left:100px;top:20px;
overflow:auto;
border-style:solid;border-width:2px;
padding:2px;
background-color:#0323B2;
color:#FB1C14;">

Text within the span element.

</span>

Result:
Text within the span element.

Head on over to the CSS Reference section for a complete explanation of the style variables.

Embed a Media Player

Code:

Result:

Notes on setting the optional attributes:
- "width=" set the width of your embedded player (in pixels)
- "height=" set the height of your embedded player (in pixels)
- "autostart=" set to 1 (yes) or 0 (no), determines whether or not the player will automatically start playing the media when the page is loaded
- "loop=" set to 1 (yes) or 0 (no), determines whether or not the player will loop the media
- "enablecontextmenu=" set to 1 (yes) or 0 (no), determines whether right-clicking on the player to access the context menu is permitted
- "showstatusbar=" set to 1 (yes) or 0 (no), determines whether or not a status bar will be displayed in the player
- "showcontrols=" set to 1 (yes) or 0 (no), determines whether or not the player controls will be accessible to the user
- "volume=full" simple add this into the player code with the other attributes, set the default volume of the player to maximum
- "hidden=true" simple add this into the player code with the other attributes, determines whether or not the player and it's controls should be completely hidden from the user

Input Forms

Create the Form
Code:

<form method="post" action="URL used to handle the form request">form variables go in here</form>

Create a Fieldset
Code:

<fieldset>form contents</fieldset>

Result:

form contents

Create a Legend for Fieldset
Code:

<fieldset>
<legend>Legend for Fieldset</legend>
</fieldset>

Result:

Legend for Fieldsetform contents

Create a Text Input Box
Code:

Result:

Create a Text Area
Code:

<textarea name="textarea" rows="5" cols="20">Text in an...area. Amazing, eh?</textarea>

Result:

Notes on setting the attributes:
Experiment with the row and column attributes to adjust the size of the text area.

Create a Text Area with Text Color and Background
Code:

<textarea name="textarea" rows="5" cols="20" style="background-image:url(backgroundimage.gif); font-family:verdana; color:#FF9900">Text in an...area. Amazing, eh?</textarea>

Result:

Color Code Reference Chart: Click Here

Create a Drop-down Box
Code:

<select name="Gender" size="1"><option selected="selected">Choose Your Gender
<option>Male
<option>Female</select>

Result:

Create "Checkbox" Selection Buttons
Code:

Which accurately describes your current mood?
<br><input type="checkbox" name="mood" value="happy"> Happy
<br><input type="checkbox" name="mood" value="angry"> Angry
<br><input type="checkbox" name="mood" value="lonely"> Lonely

Result:
Which accurately describes your current mood?
Happy
Angry
Lonely

Create "Radio" Selection Buttons
Code:

Gender:
<br><input type="radio" name="gender" value="male"> Male
<br><input type="radio" name="gender" value="female"> Female

Result:
Gender:
Male
Female

Create a Submit Button
Code:

Result:

Misc Codes

Create Name Labels for Text
Code:

<span name="Text Name">Sample Text</span>

Create Rollover Titles for Text
Code:

<span title="This is some sample text that I wrote one day">Sample Text</span>

Result: (hover mouse over the text for a second)
Sample Text

Create Acronym Titles for Text
Code:

Result: (hover mouse over the text for a second)
HTML

Create a Popup Dialogue Box
Code:

<a href="" onclick="alert('You fool! Now look what youve done!')">Click here and see what happens!</a>

Result:
Click here and see what happens!

Embed a Page Within a Page (Frames)
Code:

Result:

Create an HTML Comment
Code:

Result:

Notes: The point of HTML comments is to create references in the HTML for the coder. Whatever is typed here will not be seen in the page output. It's useful for making notes on important parts of your HTML, so that it's a bit easier for you to code and figure out later.

Create an Automatic Page Redirect
Code:

Notes: Change the URL line to the site you wish to redirect to, and edit the number value after content= to set the number of seconds to wait before automatic page redirect. This code MUST be placed after the head section of the document but before the title section in order to work properly.

Create a Favorite Icon
Code:

Result: (check CS188 Creations address bar above for example)
Notes: Favorite icons, also known as "favicons", as displayed in the address bar in the internet browser next to the URL, and are helpful for making your page stand out more easily in a set of links or windows. Their size must be 16x16 pixels, and must be in icon (.ico) file format. This code MUST be placed after the head section of the document but before the title section in order to work properly.

Create a Dynamic Image
Code:

Result:

Notes: Dynamic content only works with browsers such as Internet Explorer. As of now, it is not supported by Mozilla Firefox, and the alternate image is displayed.

Embed a Flash Object
Code:

Result: Inserts a flash object in HTML

Special Codes Only for IE
Note: If you have Mozilla Firefox, you won't notice any change in the images below.

Apply an X-ray Filter to an Image
Code:

Result: