Lost password?
Having other login trouble?

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://your-web-site.com/images/image-name.gif" alt="alternative text - Angelfire Logo" />
alternative text - Angelfire Logo

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

<img src="http://your-web-site.com/images/image-name.gif" alt="Angelfire Logo" style="float:left" />
Angelfire Logo As you can see, the text is floating to the side of the image.

<img src="http://your-web-site.com/images/image-name.gif" alt="Angelfire Logo" style="float:right" />
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>