HTML » Introduction

You can use a layout account on Horseland to create code. But since HTML files are simple text files, so you need nothing more than a simple text editor. Notepad is a common example (on Windows this is usually found under the Programs > Accessories).

Type this in to your text editor:

My very own HTML code

Now create a folder called "layouts" and save the file as "mywebpage.htm" (it is important that the extension ".htm" be specified as some text editors, like Notepad, automatically saves it as ".txt" otherwise).

To look at HTML files, they don't need to be on the web. Open Internet Explorer, or any other web browser and in the address bar, where you usually type web addresses, type in the location of the file you just saved (for example, "c:\layouts\mywebpage.html") and hit return. Or open the folder "layouts" and double click on "myfirstpage". If you want to view the code, right click on "myfirstpage" chose "open in" and open it in Notepad (or open notepad and click "open", remember to choose "all" in the file type selection.

Tags

The basic structure of an HTML document includes tags, which surround content and apply meaning to it. For example, <li> and <font> is a tag. The and close their respective tags. All HTML tags should be closed. Older versions of HTML allowed some tags not to be closed, but latest standards require all tags to be closed. This is a good habit to get into.

Here are some examples of handy tags.

Bold text: To create bold text, write these tags: <b>Bold between the tags</b>

Italic text: To create italic text: <i>Italic between the tags</i>.

Underlined text: To create underlined text: <u>Underlined between the tags</u>

Strike thru: To create striked thru text: <s>Striked thru between the tags</s>

Line feed

As browsers ignore your enter line feeds, you have to add code to make a line feed. Simply add <br> where you want the line feed.

Colored text

To change the color of the text, write <font color="#FF0000">Red text between the tags</font>.

Font

To change the font of the text: <font face="Tahoma">Tahoma as font between the tags</font>

To change the size of the text: <font size="2">Big font size between the tags</font>.

To combine these features, write: <font color="#FF0000" face="Tahoma" size="2">Text between the tags</font>

To change all the text on the whole page, also the horses and stable buddies, you have to use CSS.

List

  • <li>List between the tags</li>

    • To make a numbered list instead of a bulleted, write <ol> instead of <ul>. Remember to close with </ol>

    Backgrounds

    To add a background image to your page, add this code:

    <body background="picture.jpg">

    You have to upload the picture to a server before you can use it. Photobucket is one example.

    If you want the image to be fixated on one place, use this code:

    <body background="picture.jpg" bgproperties="fixed">

    If you want a background color, add:

    <body bgcolor="#000000">

    Check the hex codes tutorial for more hex codes (#000000 is a hex code that can be changed to something else).

    Headings

    You can make headings by simply adding one tag: <h1>Heading here</h1>, and <h2> and so on. The bigger number the smaller heading (up to six). Each heading has it's style. To define your own heading style, use css as explained in the css tutorials.