Learn to Design Websites with Learn 2 Design

Log Out Contact Glossary About Us Site Map

page 8 of 9

What is HTML?

Head information
Document body
Basic text attributes
Basic table attributes
Bullet points
Including images
Links
Closing tags
Final Points

HTML is the hidden coding behind any web page, which tells the browser what to display on the user's screen. HTML tags are contained within "<" and ">" brackets. Most html tags have an opening tag <tag> and a closing tag </tag> which contains a "/" before the tag name. There are a few exceptions, but it's generally best practice to always include the closing tag -- it makes editing the html easier as you can see where tags close.

It is advisable to use a style sheet, so that you can control the elements more precisely. Style sheet attributes are explained in the css section. A brief overview of html editors provides a guide to what's currently available. A html tag library and hex color chart are also provided for quick reference.
---------------------------------------------------------------------------------------------------------------------
Head information
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert your page title here</title>
</head>

This is not complete list, as meta tags should also be included to help search engines index your site. This is covered in the search engines section.
back to top

------------------------------------------------------------------------------------------------------------------ Document body
<body bgcolor="#FFFFFF">

Opens the body and tells the browser the background color. Then you need to actually add your content, but it needs to be enclosed in HTML tags.
back to top

-------------------------------------------------------------------------------------------------------------------
Basic text attributes
<h1>Heading 1</h1> Heading 1
<h2>Heading 2</h2> Heading 2
<h3>Heading 3</h3> Heading 3
<h4>Heading 4</h4> Heading 4
<h5>Heading 5</h5> Heading 5
<h6>Heading 6</h6> Heading 6
<p>Paragraph</p> Paragraph

<b>Bold</b> Bold
<i>Italic</i> Italic

-------------------------------------------------------------------------------------------------------------------
Basic table attributes:
To create the simple table below use the following HTML:

<table border="1" cellspacing="2" cellpadding="4" bgcolor="#FFFF99">
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</table>

cellspacing is the space between the cells
cellpadding is the space inside the cells
bgcolor is background color
Experiment with changing the border, cellspacing and cellpadding. Background color can be specified for the whole table, a single row or individual cells.

n.b: If you choose to have a background color for the whole table (as in the example above), the cellspacing will appear as the background color in Microsoft Internet Explorer.
back to top

--------------------------------------------------------------------------------------------------------------------
Bullet points
Simple bullet points can be created using the following HTML:

<ul>
<li>Bullet point</li>
<li>Bullet point</li>
<li>Bullet point</li>
</UL>

This will display in the browser like this:

Bullet point
Bullet point
Bullet point
Numbered bullets can be created with the following HTML:

<ol>
<li>First point</li>
<li>Second point</li>
<li>Third point</li>
</ol>

This will display like this:

First point
Second point
Third point
back to top

------------------------------------------------------------------------------------------------------------------
Images
Images on the web usually come in .gif or .jpg format
Unless you specify border="0", a blue border may be seen around your image
Specifying width and height in pixels speeds up download time
Alt text should be specified so that the site still makes sense to users who switch off graphics in their browsers
hspace and vspace can be specified in pixels to allow horizontal or vertical space around the image
Images can be aligned to the left, right or middle
Keep the use of images to a minimum - they slow the download time
Smaller images keep download time to a minimum
Large images can look "clunky" on a web page - especially on a small browser
Images should be displayed using the following HTML:

<img src="/graphics/image.gif" border="0" width="100" height="100" alt="My Image" hspace="5" vspace="5" align="right">

-------------------------------------------------------------------------------------------------------------------- Links
Links to a different page or site can be added to any text. This both highlights the text selected as well as providing a source of further relevant information. Links can also be added to an image. This is especially common on company logos which link back to the home page.

Links within the same site should be applied using the following HTML:

<a href="/section/page.html">Linked text</a>

Links to a different site should be applied using the following HTML:

<a href="http://www.site.com/section/page.html">Linked text</a>

Links on an image should be applied like this:

-------------------------------------------------------------------------------------------------------------------
Closing tags
It is crucial to have closing tags for:
</body>
</html>

-------------------------------------------------------------------------------------------------------------------
Final points
Accurate HTML will go a long way to ensuring your site displays correctly and quickly on a variety of browsers.

Make your HTML as clean and simple as possible.
Double check all your HTML to ensure all quote marks are included, and all opening tags have a corresponding closing tags.
Use a spell checker - spelling mistakes are unprofessional.
Experimenting is the quickest way to learn HTML.
Right click on web sites you like to view the HTML source to see how certain effects were made.
Try and keep content and style separate by using a style sheet.
Put your page through a validator, such as http://validator.w3.org/ .
back to top

web site, dating web site, web site design, internet web site, christian web site, submit web site, web site promotion, web site creation