HTML Basics to Create a Website

Your friend for life: HTML Basics

It's always useful to understand HTML at least a little bit. The good news is that it's very easy to learn as it's only a mark-up language that is not nearly as complex as a full-blown programming language.

An HTML element, called a tag, generally starts with an opening tag <> and ends with a closing tag </>.

These are the most important HTML Tags:

Title <title>

The title tag is very important. It displays text in the browser window top bar. You want to make the title descriptive to it's page as it is also used by search engines.

<title>Acme - World leaders in acme supplies</title>

Body <body>

Between the body tags contains your website viewable content. It has 5 main attributes.
Background Color: bgcolor="#333333"
Text Color: text="#FFFFFF"
Link Color: link="#FFFF66"
Visited Link Color: vlink="#FF3333"
Active Link Color: alink="#66FF66"

<body bgcolor="#333333" text="#FFFFFF" link="#FFFF66" vlink="#FF3333" alink="#66FF66">
Hello World
</body>

Text

Headings <h1>

Heading tags are also used by search engines and therefore important. Headings are usually larger and bolder. There are 6 heading sizes defined by h1...h6 h1 being the largest.

<h1>About Us</h1>

Top

Paragraphs <p> or <p align="center">

Paragraphs group text together. Paragraphs also have an align attribute so you can align groups of your text. Paragraphs will also apply a double space after the end tag.

<p>My paragraph text goes here.</p>

Break <br>

The break tag will create a line break

Using the break tag<br>to start a new line.

Will display
Using the break tag
to start a new line.

Text Formatting with Bold, Italic, Underline, Strike Through, Subscript, Superscript, Teletype

<b>My Text</b> My Text
<i>My Text</i> My Text
<u>My Text</u> My Text
<strike>My Text</strike> My Text
<sub>My Text</sub> My Text
<sup>My Text</sup> My Text
<tt>My Text</tt> My Text

Lists <ul> and <ol>

Lists create indented bulleted lists. There are 2 types, Unorded and Ordered lists. Unordered lists simply display bullets whereas Ordered lists are numbered.

<ul>
  <li>Cats
  <li>Dogs
  <li>Mice
</ul>

Cats
Dogs
Mice

Cats
Dogs
Mice

Images <img>

There are 2 main types of images used on the web. JPG usually photos and GIF, images with large areas of the same color. The reason for the 2 types of formats is because different types of compressions are applied when you first generate the file.

JPG compression is great for images that have a lot of color change from pixels to pixel such as photos. JPG compression is applied by 8x8 blocks, that is why if you apply too much the photo pixelates.

GIF compression focuses on large areas of the same color such as in simple cartoons and logos. Gif images can only have a maximum of 256 colors. There is also another type of Gif known as an Animated Gif. This is an image that consists of a couple of frames like a film strip. It automatically plays from frame to frame when the image is loaded simulating movement. To create an Animated Gif you need special software. There are plenty of free available on the web. Search Google with "animated gif software"

The image tag has a few attributes.
src: src="myPhoto.jpg" (path to your image file):
width: width="100"
height: height="100"
border: border="0"
alt: alt="Photo of me" (text displayed if images are turned off, also used by search engines)

<img src="myPhoto.jpg" width="100" height="100" border="0" alt="Photo of me">

Linking <a>

The attributes to the anchor link is

href: href="contact.htm" (path to location the link will go to)
target: target="_blank" (optional, _blank will open the link in a new browser)

There are 5 ways you can link on your website.

1. To another page on your site
<a href="contact.htm" >Contact Me</a>

2. To another site
<a href="http://www.google.com" >Google Search</a>

3. Using an image instead of text
<a href="myBio.htm" ><img src="myPhoto.jpg" width="100" height="100" border="0"></a>

4. Within the same page
<a href="contact.htm#phone" >My Phone Number</a>
Within the same page place the anchor near the area you want the link to jump to.
<a name="phone"></a>

5. Loading the email client
<a href="mailto@[email protected]" >Email Support</a>

Horizontal Rule <hr>

A Horizontal Rule is a line. They are used to break up content and to give your webpage structure.

Attributes are:

Size: Size="3"

Width: Width="50%"

No shade: Noshade

<hr size="3" width="50%">

<hr Noshade size="3" width="50%">

Table <table>

Tables enable you to construct grids across your page. Text, links and images can be placed within the grids. Tables consist of rows and columns.

A simple table structure.

<table width="75%" border="1">
  <tr>
    <td>
     Add Content
    </td>
    <td>
    </td>
    <td>
     here
    </td>
  </tr>

  <tr>
    <td>
    </td>
    <td>
     here
    </td>
    <td>

    </td>
  </tr>

  <tr>
    <td>

    </td>
    <td>

    </td>
    <td>
     here
    </td>
  </tr>

</table>

Add content

here

here

Meta Tags <meta>

There is a huge range of meta tags available but I will only mention the main ones used by search engines. Meta tags go in the top of your webpage within the <head></head> tags.

The main meta tag attributes are
Name: name="description"
Content: content="We offer online support to webmasters"

Search engines (not all) use 4 types of meta tags: title, description, keywords, classification.

<meta name="title" content="How to FTP your files">
<meta name="description" content="Step-by-step on how to get your files onto your server using FTP">
<meta name="keywords" content="ftp, software, upload my files, howto">
<meta name="classification" content="Web Support">

Note there is restrictions on lengths to content so don't load-up the content attributes.

Comments 

To add comments within your code which will not be displayed use

Create a website!

Your friend for life: HTML Basics