Help & Support

HTML Basics

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="path_to_your_images/exampleImage.jpg" alt="alternative text - this is an image" />
alternative text - this is an image

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

<img src="path_to_your_images/exampleImage.jpg" alt="this is an image" style="float:left" />
this is an image As you can see, the text is floating to the left side of the image.

<img src="path_to_your_images/exampleImage.jpg" alt="this is an image" style="float:right" />
this is an image As you can see, the text is floating to the right 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.tripod.co.uk"> Visit tripod.co.uk </a>
Example: Visit tripod.co.uk
(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.tripod.co.uk" onclick="window.open('http://www.tripod.co.uk'); return false;"> Visit tripod.co.uk </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>