Multimedia English
Home
Syllabus
History of CALL
Resources
Netiquette
Search engines
Evaluating Web Sites

Criteria
Application
Designing activities

Planning
Reading Acivities
Writing Activities
Listening Activities
Grammar Activities
Vocabulary Activities
Software
HTML Design

Intro
HTML Tags
Graphics
BG Colors
My First webpage
Website Requirements

An Introduction to HTML Design

Below is a brief tutorial on HTML and web page design. This tutorial is not meant to be an exhaustive resource on HTML or web page design. Rather it is meant to give you a very basic understanding of HTML. The topics covered in this tutorial are as follows:

[HTML][Tags][Hyperlinks][Graphics]


What is HTML?

HTML, or Hypertext Mark-Up Language, is farely easy to learn once you get the basics down. HTML is a simple programming language that is used to write what we refer to as web pages. The codes discussed in this section are very basic, but they will get you started.

To top of page



What is a tag?

A tag is that part of the code that designates the structural element of the web page. For example, the <IMG SRC>designates that an image of some sort will be displayed at a specific location on the page. See the Graphics section. Tags begin with an open bracket < and end with a close > bracket. The first word inside the brackets is the name of the tag. For example, <IMG SRC> means Image Source. All other information within a tag refers to the attributes of the item being displayed. Many, although not all, tags have an end tag that indicates where the effect of the tag ends. Go here for a more detailed discussion of the 12 basic tags in HTML.

The first tag on any webpage is the <HTML>tag. This is the tag that tells the server that the page you are requesting is a page built using HTML. If you open the source code of any web page the <HTML> tag will be in the top left corner. The <HTML> tag, like other tags discussed later, must be closed with an end tag. To close a tag you simply add a forward slash / inside the brackets, so a closed <HTML> tag would look like this </HTML>. Note: the </HTML> is the last tag on the page. Everything between the <HTML> and the </HTML> is the wep page. However, not all of what is between <HTML> and the </HTML> shows on the browser page.

The tag directly under the <HTML> is the <HEAD> tag. The <HEAD> also must be closed. Between the open and close <HEAD> tags you will find META information. This is information that is used by search engines to index your site. META information is inside <META> tags and indicates the attributes of the page. Things like content, author's name and key words are all part of the META information tags.

<HTML>
<HEAD>
<TITLE>web site title </TITLE>
<META http-equiv=content-type content=text/html; charset=iso-8859-1>
<META name=generator content=SiteUp Internet Promotions Meta-Tag Builder>
<META name=author content=author's name>
<META name=keywords content=key words, one or two word, phrases that, discribe your, site>
<META name=description content=Description: This is a full description of your site. The stuff you read under the results of a search is in between meta tags like these>
</HEAD>

If you look closely you will see the two <HEAD> tags, one open at the top the other closed at the bottom. You will also see that <META> tags do not have closing tags. One more thing, the <title> tag does require a closing tag. Remember the information between the <HEAD> and </HEAD> will not show up on the browser page, but it's important if you want your page to be found and indexed by search engines.

The next tag after the </HEAD> tag is the <BODY> tag. This tag is also closed at the bottom of the page. Within the <BODY> tag you can, and should specify several attributes. Look at the example below.


<BODY BGCOLOR=00FF33 LINK=3366CC VLINK=FF0033 TEXT=000000>

As mentioned earlier the <BODY> tag must be closed at the bottom of the page. The last two tags on any web page will always be
</BODY>
</HTML>

Also notice that in the example above we have designated the color of the background, the links, the visited links, and the text(Black). Colors used on web pages are created using a hexdecimal code that is writen numerically, or as a combination of numbers and letters. I have built a color chartwith 100 colors and their hexdecimal code that will give you some idea of what the colors look like on a web page. There are also color machines that will let you generate the color you want and the code that produces that color.

So, the basic code for a web page would look like the following:

<HTML>
<HEAD>
<TITLE>web site title </TITLE>
<META http-equiv=content-type content=text/html; charset=iso-8859-1>
<META name=generator content=SiteUp Internet Promotions Meta-Tag Builder>
<META name=author content=author's name>
<META name=keywords content=key words, one or two word, phrases that, discribe your, site>
<META name=description content=Description: This is a full description of your site. The stuff you read under the results of a search is in between meta tags like these>
</HEAD>
<BODY>

The stuff in this space is what you see in your browser

</BODY>
</HTML>

That's the basic information about <HTML>, <META> and <BODY> tags. (HINT: Most people wait until their finished with their site before inserting the <META> tags.) Now it's time to talk about what goes in between the open <BODY> tag and the </BODY> Tag.

To top of pag


What are Hyperlinks


HyperLinks are connections from your page to another page. The page your linking to may be on another server on the other side of the world, or it may be another page within your site. When you click on one you are calling up a page using HTTP, which stands for Hyper Text Transfer Protocol. HTTP is the magic little formula that allows servers to talk to each other. By clicking on a link you are telling one server to go get information from another server. The result is the web page you see in your browser window.

There are two codes for creating hyperlinks. The first method creates links to pages that reside at a location outside your web site. These are known as external links and are often reffered to as Absolute URL's. The second type of hyperlink is to pages within your site. Links to pages within your site are called internal links and are refered to as Relative URL's. You can also use absolute URLs as internal links. To build either an external or internal link you begin with the following bit of code. <A HREF=URL address>.

So, what does all that mean? Generally speaking, most people refer to the above code as an anchor reference. <A = anchor and HREF =reference. I like to think of it in these terms, <A=area or that part of the server where the information resides. HREF=Hyper Reference or the referenced page number, and URL=Universal Resource Locator which is the exact address of the page you want to view. It doesn't really matter at this point what terminology you use as long as you get the code on your page right. One thing to remember about the <A HREF> tag is that you MUST close this tag with </A>. If you don't all the text that follows the opening tag will be a hyperlink. Leave one open sometime and you'll know exactly what I mean. In between the <A HREF=URL address> and the </A> you will place text for a text link or an image for a image link. So an entire text link would look like this.


<A HREF=http://www.anysite.home.html>Somebodys Home page</A>

The example above is an Absolute URL. This means that we have to use the entire address to get the page to load into our window. Relative URL's are different in that you don't have to include the entire address. For example, on this site there are several pages. To link from one page on this site to another I only have to include the name of the page followed by .html So the link from the page you are currently reading to the gammar for this unit would look like the link below.

<A HREF=unit7grammar.html>Unit 7 Grammar</A>

Do you see the differece between the two types of links? In the last example I left off the <http://www.>

To top of pag

Graphics

One important aspect of web design is the use of graphics. Graphics can inhance your web page or, they can clutter your web page depending on how you use them. Remember, sometimes less is more.

Graphics include anything that is not text. Graphics come in several different formats, but the two that are used on web pages most of the time are in either GIF or JPG format. The difference between the two has to do with the number of colors used to create the image.

A GIF image will use a maximum of 256 colors. A JPG, on the other hand uses 16.7 million colors. Once you start building your own site you will have to deside whether to build your own graphics or download graphics from the web for use on your site. There are several good sites on the web that offer free graphics, but it is really exciting when you turn out the first graphic that looks the way you intended for it to look.

To put images on your web page you should first up-load the images to the server where your web page resides. To do this you must use an ftp program. FTP stands for File Transfer Protocol. The code for placing an image on your page is really pretty simple. Look at the example.

<IMG SRC=name of file.gif (or .jpg)>

IMG=IMAGE, SRC=SOURCE, simple right? There is also some other information that you should place within the tag. Remember a thing called attributes? Good web designers always place height, width and alt attributes within the IMAGE tag. The alt attribute is used to tell viewers without graphics capabilities what they are looking at. The height and width attributes can be in either pixels or in percentage of the web page deminsions. Play with it and you will eventually get a feel for height and width attributes of various pixel sizes.

<IMG SRC=green05bar.jpg width=100% height=5 alt=ruler>
ruler
<IMG SRC=green05bar.jpg width=250 height=5 alt=ruler>
ruler

Notice that the first bar goes all the way across the page, but the second one is restricted by the number of pixels in the width designation.

Copyright © John's ESL Community. All rights reserved.