Basic Web Site Design

Web site design today is almost a fundamental skill that is required by most people to ensure that they have an online presence that is worthy of their company, whether it is an online or off line business. Many people would rather have a company design their websites for them and while this is an excellent option, it is good to at least have a basic understanding of web design in order to update your web site every now and again. If you are running a large database driven website, it may be in your best interest to give it out to a web development company.

HTML (Hyper-text Markup Language) is the code used for web pages anywhere on the internet. Most blogs that allow comments on them as well as social sites such as facebook often allow users to make comments using HTML so it’s a good idea to know the basic HTML commands. Here are a few examples:

<HTML> – Begins your HTML document.

<HEAD> – Contains information about the page such as the TITLE, META tags for proper Search Engine indexing, STYLE tags, which determine the page layout, and JavaScript coding for special effects.

<TITLE> – The TITLE of your page. This will be visible in the title bar of the viewers’ browser.

</TITLE> – Closes the HTML <TITLE> tag.

</HEAD> – Closes the HTML <HEAD> tag.

<BODY> – This is where you will begin writing your document and placing your HTML codes.

</BODY> – Closes the HTML <BODY> tag.

</HTML> – Closes the <HTML> tag.

<H1>Heading 1 Example</H1>
<H2>Heading 2 Example</H2>
<H3>Heading 3 Example</H3>
<H4>Heading 4 Example</H4>
<H5>Heading 5 Example</H5>
<H6>Heading 6 Example</H6>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML Tutorial Example</title>
</head>
<body>
<p>Less than 5 minutes into this HTML tutorial and
I've already created my first homepage!</p>
</body>
</html>

Explanation of the above code:

The <!DOCTYPE… > element tells the browser which version of HTML the document is using.
The <html> element can be thought of as a container that all other tags sit inside (except for the !DOCTYPE tag).
The <head> tag contains information that is not normally viewable within your browser (such as meta tags, JavaScript and CSS), although the <title> tag is an exception to this. The content of the <title> tag is displayed in the browser’s title bar (right at the very top of the browser).
The <body> tag is the main area for your content. This is where most of your code (and viewable elements) will go.
The <p> tag declares a paragraph. This contains the body text.

Closing your tags

As mentioned in a previous lesson, you’ll notice that all of these tags have opening and closing tags, and that the content of the tag is placed in between them. There are a few exceptions to this rule.

You’ll also notice that the closing tag is slightly different to the opening tag – the closing tag contains a forward slash (/) after the <. This tells the browser that this tag closes the previous one.

UPPERCASE or lowercase?

Although most browsers will display your page regardless of the case you use, you should always code in lowercase. This helps keep your code XML compliant (but that’s another topic).

Therefore…	Good:	`<head>`
	Bad:	`<HEAD>`

<IMG SRC=”Earth.gif” WIDTH=”41″ HEIGHT=”41″ BORDER=”0″ ALT=”text describing the image”>

Two Examples on creating lists:

Example 1:

<MENU>
<LI type=”disc”>List item 1
<LI type=”circle”>List item 2
<LI type=”square”>List item 3
</MENU>

Example 2:

<marquee behavior=”alternate”>Your bouncing text goes here</marquee>

<marquee behavior=”scroll” direction=”left”>Your scrolling text goes here</marquee>

Here are more tricks you can use with your marquees:

Closing your tags

UPPERCASE or lowercase?

Two Examples on creating lists:

Related posts