Web Design Training

HTML, or “Hyper Text Markup Language”, is a computer language that is interpreted by a web browser such as Firefox or Internet Explorer. HTML documents contain the instructions necessary to display the contents of a web page. This tutorial will enable you to gain a basic understanding of HTML to create your own web pages.

Goals

Upon completion of this tutorial, you will be able to:

Tutorial

Create a Document

  1. First, open Notepad by clicking Start > All Programs > Accessories > Notepad. When you open Notepad, a new blank document will automatically be created.

    Note: For a Mac user, begin by clicking Macintosh HD > Applications > TextEdit.app

    .

  2. Start by saving this new document as “tutorial.html”. The .html extension takes the place of other file extensions such as .txt or .doc. This lets a web browser know it’s supposed to follow the directions of the HTML document, and not simply display the text inside of it.

The Structure of HTML

HTML documents are structured using a hierarchy of nested tags. Nesting means that “tags”, or instructions, fit inside of other groups of tags. Don’t worry about knowing what the tags themselves mean yet, but look at how they appear on the page:

<HTML>

<HEAD>

</HEAD>

</HTML>

The <HEAD> tags are nested inside of the <HTML> tags. There are two of each, a starting tag and an ending tag for each type. In a pair of tags, the first is written with < > symbols, while the second tag uses a forward slash </ > to end whichever instruction the first tag initiated. Copy the code example given above into your tutorial.html file.

The Head

There are generally two basic parts inside of the <HTML> tags. The <HEAD> and the <BODY>. We’ll start with the <HEAD>. This is where information goes that we might not want to appear in the browser window. An example is the <TITLE> of the page. Look at the title bar on the top of your web browser. It should say Tech Help Desk – Luther College, Decorah, IA. That’s the <TITLE> of this page. The title bar should always display the name of the site you are visiting. To add a <TITLE> to this new page, first make <HEAD> tags, and then put <TITLE> tags inside of those. This is what tutorial.html should now contain:

<HTML>

<HEAD>
<TITLE>
LIS: Tutorial
</TITLE>
</HEAD>

</HTML>

See that the <HEAD> tags fit inside of the <HTML>, and that the <TITLE> tags fit inside of the <HEAD> . “LIST: Tutorial” is the text put inside of the title tags.

Open a new window or tab with your web browser, and press Crtl + O. Then find where you saved tutorial.html, and open it. The page should be blank, but look at the top to see “LIS: Tutorial”. Now that a title has been added, it is time to add content to the page.

The Body

The visible components of a web page are coded inside of the <BODY> of an HTML document. The <BODY> is similar to the <HEAD> in that it is beneath the <HTML> tags. Begin by displaying the text “Hello World!.”. The file tutorial.html should now contain the following code:

<HTML>

<HEAD>
<TITLE>
LIST: Tutorial
</TITLE>
</HEAD>

<BODY>
Hello World!
</BODY>

</HTML>

Save the changes to tutorial.html, and click the Refresh button on your web browser. “Hello World!. ” is displayed in the upper left hand corner of the page. To center the text, add <CENTER> tags before and after the text. The <BODY> of tutorial.html now contains:

<BODY>
<CENTER>
Hello World!
</CENTER>
</BODY>

Anything contained in <CENTER> tags will be middle-aligned. To bolden and increase the size of the text, turn it into a heading. Headings are created using the <H1> tag. <H1> is the largest heading, and <H6> is the smallest.

<BODY>
<CENTER>
<H1>
Hello World!
</H1>
</CENTER>
</BODY>

The contents of tutorial.html are now as follows. Save tutorial.html and refresh the page in your web browser to view the changes.

<HTML>

<HEAD>
<TITLE>
LIS: Tutorial
</TITLE>
</HEAD>

<BODY>
<CENTER>
<H1>
Hello World!
</H1>
</CENTER>
</BODY>

<HTML>

Adding Color

Now change the page’s background color. The command to change the “bgcolor” (background color) is passed as a parameter in the <BODY> tag. In this example we add two parameters to the <BODY> tag, changing both the background and text colors. Add these parameters to your tutorial.html file and refresh it.

<BODY bgcolor="#ccccff" text=”#00aaff”>

In HTML, colors are defined using the hexadecimal system. Users who are uninterested in defining their own colors should gloss to the bottom of this section. Digital colors are represented as a mixture of three values, red, green, and blue. This is called an RGB value. Each individual channel in an RGB value is given a digit between 0 and 255. Zero indicates that there is no color added in the specific channel. A value of 255 indicates that the maximum color value is being used. In HTML these values are inserted as tuples of hexadecimal digits. Hexadecimal is a number system that may contain one of 16 values in a single digit, as oppose to the 10 values in our standard decimal system. It’s exactly how it sounds, hexa(6) + decimal(10) = hexadecimal(16). In hexadecimal, 0 through 9 are the same as we are used to, but instead of rolling over to 10, the character “a” is used. A takes the place of 10, “b” is the value for 11, and so on until “f” equals 15. Sixteen in hexadecimal looks like 10 in our standard notation. The hexadecimal system is used because it is much easier for computers, which process information digitally using 1s and 0s, to use powers of 2 to model data than it is to use some ambiguous number of digits, like 10.

The tuple is used because each digit can hold one of 16 values, and when multiplied together 16 * 16 equals 256 possibilities. As we know, 255 is the maximum amount of color possible in a channel, and 0 is the least amount possible. As an example:

bgcolor="#00ff00" will return solid green. There is no color in the red or blue fields, and full color in the green component of the triplet.

For a more in-depth look at hexadecimal web colors, see the additional resources.

Adding an Image

If you have an image in the same directory (folder) as tutorial.html, you can display the image file using the <IMG> tag with “src” (source) as a parameter. The <IMG> tag only uses an initialization command, and does not require an ending </IMG> tag. Here is an example command:

<IMG src="picture.gif">

The text “picture.gif” should be replaced with the filename and extension of the image to be used. Some file types should not be used on the web, while others like .jpg, .png, and .gif are recommended. To link to an image file from the internet, or place that is not in the same directory as the web page file, the pathname must be provided. Here is an example of the code to link to an image from Luther’s homepage. The pathname begins with Luther’s web address, followed by the path to where the image is stored on a server.

<IMG src="http://www.luther.edu/Media/Website%20Resources/images/sitewide/print_logo.gif">

It is also possible to add alternative text to an image. The alternative text will be displayed while the image is loading in a browser, as well as when the mouse is hovered over the image. This is done using the “alt” (alternate) parameter:

<IMG src="http://www.luther.edu/Media/Website%20Resources/images/sitewide/print_logo.gif" alt="Luther College Logo">

Copy and paste the code above into tutorial.html, or find a picture on the internet you like better. If you are using Firefox, a very simple technique to find an image’s location on the web is to right click and select Copy Image Location. Pasting this text into the src parameter will display that image so long as it is not moved or deleted on the server it is being stored at.

Linking to Other Web Pages

To link to a page outside of your own domain, or inside for that matter, an anchor must be used. The web address is given as a parameter to the <a> tag in the form of an “href” (hash reference). The text inside of the two <a> tags will be displayed as the actual link. Here is an example:

<a href="www.luther.edu">Luther College</a>

As you can see, the “href” points to “www.luther.edu, and the text displayed is “Luther College”. When linking to a page in the same directory as tutorial.html, all that needs to be provided is the file name in place of the web address.

Final Product

This is the page generated from following the steps above. The next step is to experiment. Try using different colors and layouts. Make sure to check the Additional Resources section to see more HTML code possibilities. Beneath it is the final version of the code that generates the page.

Webdesign 1

<HTML>

<HEAD>
<TITLE>
LIS: Tutorial
</TITLE>
</HEAD>

<BODY bgcolor="#ccccff" text=”#00aaff”>
<CENTER>
<H1>
Hello World!

</H1>
<IMG src="http://www.luther.edu/Media/Website%20Resources/images/sitewide/print_logo.gif" alt="Luther College Logo">
<a href="www.luther.edu">Luther College</a>
</CENTER>
</BODY>

<HTML>

Additional Resources

Template Code

Here is a more complete example of HTML code for reference purposes. This may be copied an pasted into a .html file and viewed.

<HTML>

<HEAD>
<TITLE>
LIS: Tutorial
</TITLE>
</HEAD>

<BODY bgcolor="#ccccff" text=”#00aaff”>
<CENTER>
<H1>
LIS: Tutorial
</H1>
</CENTER>
Use this HTML document as a reference for code examples while creating your own web pages.
<UL>
<LI>This is an example of a list.</LI>
<LI>Lists are useful for organization.</LI>
<LI>They can contain <a href="http://www.luther.edu" target="_blank">links</a>.</LI>
<UI>
<BR>
<BR>
In the code, BR tags create a line break. It's like pressing Enter in a word processor.
<BR>
<BR>
<UI>
<LI>Even Images can serve as links.
<BR>
<BR>
<LI><a href="http://www.luther.edu" target="_blank"><IMG src="http://www.luther.edu/Media/Website%20Resources/images/sitewide/print_logo.gif" alt="Luther College Link"></a>
</LI></LI>
<BR>
<BR>
Make Sure you take a look at the <a href="http://htmlhelp.com/reference/wilbur/list.html">Overview of all HTML tags</a>. This can also be found in the Additional Resources section of LIST: Basic Web Design.

</BODY>

<HTML>

List of HTML tags

HTML Editor Environment Options

Luther College has a few programs to facilitate the web design process. These make it possible to see the effects of code changes in real time, as well as design pages graphically- without manipulating code at all. These programs can be found on Luther’s lab machines.

Below is a list of Open Source programs that function similarly to their proprietary counterparts. They are of no cost. While ITS does not offer support for these programs, they are considered safe and reputable.

Hexadecimal Color List

A list of color names and their hexadecimal counterparts can be found here.

In-Depth Hexadecimal

Review the Technology Help Desk web site

Contact the Technology Help Desk