Welcome, Guest. [ Log In ]
Question   HTML Basics
Search KBase


Related Links:
· Do you support dynamic fonts?
· Creating an index page
· FTP
· What does upload mean?
· Can I hide my HTML code?
· How do I upload files (publish) to my site?
· Using FTP clients

Top 5 in this Area:
1. Creating an index page
2. HTML Basics
3. Can I hide my HTML code?
4. Which web authoring (HTML-generating) programs do you support?
5. What is CSS, and do you support it?

 
HTML Basics
Introduction

HTML (Hypertext Markup Language) is a simple language used to create web pages. The language consists of tags placed before and after text to indicate how the text is to appear in a browser. Here are some examples:

<html> Everything between the tags is an html document. </html>

<b> Everything between the tags will appear in boldface. </b>

<i> Everything between the tags will appear in italics. </i>

Here are some basic HTML tasks you might encounter:



  1. Creating your first HTML Page [Back to menu]

    HTML files are text files. You don't need any special equipment to create them; any text editor will do: vi, emacs, EditPlus, Notepad, Wordpad ---even Microsoft Word!

    Let's create a test file.

    Open a new file in your editor. Type in the following:

    <html>

    <head> (optional)

    <body> (optional)

    <p> First HTML document! </p>

    </head> (optional)

    </body> (optional)

    </html>

    Now save this file as test.html

    That's all there is to it!

    Some editors, like Word and Notepad, will try to save your file with a default extension like .doc or .txt. Don't let this happen, or when you FTP your page to your website, it won't be visible on the web!

    To avoid this, select the Save As option under the File menu, instead of Save.



    Type in the file name as whatever.html, and use the drop down menu to select either .html files, or, if that option is not available, select All files.



  2. Line Breaks [Back to menu]

    There are several ways to make a line break. They include:
    • Enclosing each paragraph between these two tags: <p> </p>.
    • Putting the following at the end of each paragraph: <br> <br>


  3. Headlines [Back to menu]

    Headline tags are generally used at the top of the page, to create an emphasized title. However, they can be used anywhere on the page. Headline tags function exactly like paragraph tags <p> </p>, but in addition to setting apart a line or lines of text, headline tags also put the text in boldface, and define how large or small the text will be.

    There are five sizes of headline text; 1 is the largest, and 5 is the smallest. The tags look like this:

    <h1> Largest </h1>


    <h2> Second largest </h2>


    <h3> Medium </h3>


    <h4> Small </h4>


    <h5> Smallest </h5>


  4. Align Text [Back to menu]

    You can align your text to the left, center, or middle. This code goes inside the headline or paragraph tags:

    <h1 align = left> headline aligned left </h1>

    <p align = center> paragraph aligned center </p>

    <h1 align = right> headline aligned right </h1>

  5. Background Color and Images [Back to menu]

    Background color and image are specified inside the < body > tag:

    <body bgcolor = "green"> There are a 16 predefined colors that can be referred to by name [what are they?].

    <body bgcolor = "#218429"> You can create almost any color by referring to it by its hexadecimal code. A list of colors and codes are available here: Webmonkey Color Chart.

    <body background = "./mycat.gif"> Remember that most browsers automatically tile background images.

    If you don't designate a background color or image, the default color is white.

  6. Fonts [Back to menu]

    Use the < font > < /font > tags to define font color, size, and face. If you don't designate font properties, the default font is black 12pt. Times New Roman.

    < font size = "3" face = "Arial" color = "blue"> < /font >

    Font size ranges from 1 to 7. The default size is 3, which corresponds to 12pt. font.

    Remember that different browsers may display your text differently. If you choose an unusual font, it's likely that some of your visitors will not have the ability to view it; their browsers will revert to the default Times New Roman. Times New Roman, Arial, and Courier are three very common fonts that most browsers will understand. If you work with these fonts, it's likely that most visitors will see your site as you intended it to appear.

    Use the same hex color chart for font colors, as for background colors, or choose font colors with predefined names, as above.

  7. Boldface [Back to menu]

    To make boldface text, enclose the text in these tags:
    <b> boldface text </b>.

  8. Italics [Back to menu]

    To italicize text, enclose the text in these tags:
    <i> this stuff will be in italics </i>.

  9. Horizontal Lines [Back to menu]

    To draw a horizontal line across the page, use this code, where "width" is the percentage of the window width you want the line to span.

    <hr width = "100%">




    You can change the color of a horizontal line by adding color = "whatever" to the hr tag. Choose between the 16 predefined colors [what are they?], and hundreds of other colors designated by their hex codes:

    <hr width = "100%" color = "green">




  10. Hyperlinks [Back to menu]

    Link your article to another page by adding this code:

    <a href = "URL">Name of link</a>

    Link one part of your article to another part of the same article by adding this code to the link:

    <a href = "#1">Name of link</a>

    and this code to the area you want the link to take you to:

    <a name = "1">Text you want to link to</a>

    Of course if you have more than one of these in an article, make sure each has a unique anchor reference/name (the part in quotes)!

  11. Adding Images [Back to menu]

    To add an image (for instance, mycat.gif), insert this code into your page:

    < img src = "./mycat.gif" >

    "./mycat.gif" is called a relative link. That means, the code links to the image, which is located in the same directory as your webpage.

    You can also use an absolute link. An absolute link gives the full URL where the image is located. Instead of giving the location of the image as "./mycat.gif", an absolute link would read:

    < img src = "http://www.mydomain.com/mycat.gif" >

    Both ways work equally well. However, using relative links makes it easier to build and edit your page (if you keep a copy of all of the images in a directory on your computer, as well as at your ftp site). In addition, if you want to move directories around, using relative links will spare you the trouble of changing all of the URLs in your img src tags every time you do so.

  12. Numbered Lists [Back to menu]

    Want to make a numbered list, but not worry about formatting it? Use the following tags!

    <ol> (ol stands for Ordered List)

    <li>li stands for List Item</li>

    <li>another list item</li>

    <li>(the closing tag for list items is optional)</li>

    </ol>

  13. Bulleted Lists [Back to menu]

    <ul> (ul stands for Unordered List)

    <li>li still stands for List Item</li>

    <li>another list item</li>

    <li>(the closing tag for list items is still optional)</li>

    </ul>

  14. Tables [Back to menu]

    Tables organize information into rows and columns. Here's an example of a table:

    Principal Interest Time
    $500.00 7.5% 10 years


    Here's the code:

    <table> Designates beginning of the table

    <table border = 2 > Sets a table border of 2 pixels

    <tr> Marks the beginning of a row

    <td> Principal </td> td and /td mark the beginning and end of a column

    <td> Interest </td>

    <td> Time </td>

    </tr> End of row

    <tr>

    <td> $500.00 </td>

    <td> 7.5% </td>

    <td> 10 years </td>

    </tr>

    </table> End of table

  15. Code [Back to menu]

    If you want code to show up as text, for example, if you're giving examples of HTML code, you must use special symbols to represent the HTML reserved characters. Here are some common ones. For a more complete list, go here:

    Webmonkey Special Characters List

    "Special characters" are a series of characters beginning with an ampersand (&). Here are some examples:

    &#60 = <
    &#62 = >
    &#47 = /
    &#nbsp = blank space
    &amp = &
    &#09 = horizontal tab

    ... and so on

  16. Style Sheets Style sheets define font and other properties for an entire page, or for several pages. This makes writing, updating, and maintaining your page easier.

    Internal Style Sheets dictate the properties of a single page.

    Cascading Style Sheets are separate .html documents that dictate the properties of all of the pages linked to them.

  17. Editing and Viewing Your HTML Page Offline [Back to menu]

    To view the page you created before you FTP it to your website, fire up a browser (a Netscape or Explorer window, for example), and in the address bar, type in the address (disk, directory, and filename) where you saved your file:



    (if this is where you saved your file.)

    To look at your code, select View from the browser toolbar, then Source from the subsequent drop-down menu. This will make the source code of the webpage visible.



    This is also a good trick to know if you see something nifty on someone else's site, and want to know how they did it!

  18. Posting Your Site to the World Wide Web [Back to menu]

    To make your html page available on the Internet, you must send it via FTP (file transfer protocol) to your directory on your server. For further instructions, see our FTP Frequently Asked Questions

  19. Resources [Back to menu]

    Here are some places you can go to learn more about HTML:








The 16 predefined web colors (for backgrounds, fonts, etc.) are:

white silver gray maroon
green black navy purple
olive teal red lime
blue magenta yellow cyan


Last updated: Nov 08, 2002.