Lost password?
Having other login trouble?

or sign in using...

Here are some examples of HTML code that you may want to use in building your website.
These codes may be used in:

  1. In the free text area of the Basic Editor, or
  2. Anywhere between the <body> and </body> tags of the Advanced Editor.


Setting up a blank HTML document

If you are starting with a blank html file, at the top of your document, type:
<!DOCTYPE HTML> <--Declares the file as a standard HTML5 document
<html>
<body>
and
</body>
</html> at the bottom of the document.

You'll be placing all your text and other HTML tags between these opening and closing tags.

Aligning text/images within a tag

Code:
<div style="text-align:left">
This text will be left-aligned.
</div>

Example:

This text is left-aligned. This is the default for text-alignment.

Code:
<div style="text-align:center">
This text will be centered.
</div>

Example:

This text is centered.

Code:
<div style="text-align:right">
This text will be right-aligned.
</div>

Example:

This text is right aligned.

By the way, the code to create the border and width of the div looks like this:
style="border:1px solid;"

Basic Font Styling

Bold Text:
Your Text here = <strong> Your Text here </strong>

Italic Text:
Your Text here = <em> Your Text here </em>

Bold & Italic Text:
Your Text here = <strong><em> Your Text here </em></strong>

Changing Font Size:
Your Text here = <p style="font-size:18px"> Your Text here </p>

Changing Font Color:
Your Text here = <p style="color:#f00"> Your Text here </p>

Changing Fonts:
Verdana = <p style="font-family:Verdana, Geneva, sans-serif"> Verdana </p>
Georgia = <p style="font-family:Georgia, 'Times New Roman', Times, serif"> Verdana </p>
Courier = <p style="font-family:'Courier New', Courier, monospace"> Verdana </p>
Arial / Helvetica = <p style="font-family:Arial, Helvetica, sans-serif"> Arial/Helvetica </p>
Lucida = <p style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif"> Lucida </p>

Images

Adding an image to your site:
<img src="http://www.angelfire.com/doc/images/a2_logo.gif" alt="alternative text - Old Angelfire Logo" />
alternative text - Old Angelfire Logo

Images can be floated to the left or right within a layout or block of text by using floats.

<img src="http://www.angelfire.com/doc/images/a2_logo.gif" alt="Old Angelfire Logo" style="float:left" />
Old Angelfire Logo As you can see, the text is floating to the side of the image.

<img src="http://www.angelfire.com/doc/images/a2_logo.gif" alt="Old Angelfire Logo" style="float:right" />
Old Angelfire Logo As you can see, the text is floating to the side of the image.

Heading Tags

Here is the code to add different Heading styles to your page:
<h1>Heading 1</h1>
<h2>Heading 2</h1>
<h3>Heading 3</h1>

Heading 1

Heading 2

Heading 3

Note: Due to differences in styling from website to website, your Heading tags may look differently than what is displayed here.

Paragraphs & Lists

Code to make a new paragraph:
<p> Your text goes here </p>

Code to make an unordered list:
<ul>
<li>Your text goes here, inside a list item tag. </li>
</ul>

  • This text is inside of a <li> tag, inside of a <ul> tag.
  • Here is a second <li> tag, inside of the same <ul> tag.

Code to make an ordered list:
<ol>
<li>Your text goes here, inside a list item tag. </li>
</ol>

  1. This text is inside of a <li> tag, inside of a <ol> tag.
  2. Here is a second <li> tag, inside of the same <ol> tag.

Linking

Direct linking to an external webpage:
<a href="http://www.angelfire.com"> Visit Angelfire.com </a>
Example: Visit Angelfire.com
(If you clicked on the link, you'll notice that it opened a new window. You can do that to your links too, by using a javascript onclick event.

Here's what the code looks like:
<a href="http://www.angelfire.com" onclick="window.open('http://www.angelfire.com'); return false;"> Visit Angelfire.com </a>

Linking to a local file:
<a href="about.html"> About me </a>
The above code would link to a file called 'about.html,' located in the same directory as the .html file with the link in it.

<a href="images/myphoto.jpg"> See my photo! </a>
The above code would link to a file called 'myphoto.jpg,' located in the images directory on your website.

Divs & other layout tags

Here are examples of HTML tags used in creating a website. /p>

<div> Insert your content here. Div tags are the main building blocks in creating a website's layout. </div>
<br /> - Use this tag to create returns (line breaks) in your paragraphs.
<hr /> - Use this tag to create a horizontal rule on your page.
<table> <tr> <td> </td> </tr> </table> - Use the table tags to create a space for tabular data on your website.

Table Example:
<table>
<tr>
<td> Data 1 </td>
<td> Data 2 </td>
</tr>
<tr>
<td> Data 3 </td>
<td> Data 4 </td>
</tr>
</table>

Data 1 Data 2
Data 3 Data 4

You can use CSS to make the table look much nicer.

Data 1 Data 2
Data 3 Data 4

Here's the CSS code used to edit the table:
<style>
table{border:1px solid; border-right:none; border-bottom:0; background:#CCC; border-spacing:0; width:350px}
table.td{padding:5px; border-right:1px solid; border-bottom:1px solid; text-align:center}
</style>