Module 1: HTML Basics

Creating a Work Folder

Before you start, you’ll need to create a Work Folder on your computer to hold all the files that you’ll be using and creating throughout this tutorial.

In Windows, from the Desktop, choose: File > New > Folder
On a Mac, from the Desktop, choose: File > New Folder

Name this Folder: HTML Lesson 1

Choosing a Text Editor

You can create a web page with any text editor that’s on your computer. Since the Hamilton classroom is equipped with PC workstations, we’ll be using Notepad, a free text editor that comes with the Windows operating system.

You can also use WordPad; sometimes saving in Notepad causes line breaks to disappear. If working in WordPad, be sure to set your options to working with “text” and not RichText. You should not see a ruler at the top of the window.

What if I’m using a Mac or a PC?

In Windows, you can use a simple text editor such as Notepad, Notepad++ or any word processor such as Microsoft Word, or WordPad However, if you use a word processor, be sure to save the file as a plain text file. NotePad automatically saves the file as a text file, so you don’t have to worry about this.

On a Mac,  you can use SimpleText or TextWranger (free download) for your text editor.

Whether you’re using a PC or a Mac, just be sure to save an HTML document with either the .htm or .html extension.

This tells the Web browser that the file you want to view is an HTML document and will translate it accordingly.


Commercial HTML Editors

There are a number of commercial HTML editors that you can use to author HTML documents. These editors are commonly referred to as WYSIWYG (pronounced WIZ-EE-WIG), and it stands for What You See Is What You Get.

WYSIWYG editors such as Macromedia’s Dreamweaver or Adobe GoLive! allows you to create HTML and see it as if you were previewing it in a browser simultaneously. Commercial HTML editors can catch your mistakes too such as forgetting to close an HTML tag. You can also manage many pages at once using templates and libraries that you create, saving you tons of time and reducing repetitive tasks.

On the other hand, WYSIWYG editors requires that you know at least a little HTML to begin with because these editors aren’t perfect. You’ll want to edit or customize certain things on your own and to do this, you need to know the basics of HTML.

The following products have evaluation, or trial, versions available freely over the Internet. Download them for free and evaluate which one you like best. The UH bookstore also offers some of these products at educational discounts (meaning they’re pretty affordable and the bookstore doesn’t charge you tax on top of the low price).

For a comprehensive list of HTML editors, check out builder.com’s reviews and cost comparisons.

HTML Tags: What are they and what do they mean?

HTML tags are basically commands written between angle brackets (<,>). This tells your Web browser how to display text and the overall page you created.

For example, every web page begins with <HTML> and ends with </HTML>. There are both beginning and ending tags. Beginning tags tells the browser when formatting begins, and ending tags tell the browser when formatting ends. Ending tags have a forward slash in front of the command as in the example:

This text is <strong>bold</strong>

In your Web browser, you would see this as:

This text is bold.

It doesn’t matter how you type in the tags, they can be all capital letters or lowercase, or a combination of both. HOWEVER, xHTML only recognizes lowercase HTML tags. All HTML tags in this tutorial will be CAPITALIZED.

Attributes

HTML tags also have attributes. Several properties can be assigned to one base tag. For example,

<IMG src="pic.jpg" WIDTH="200" HEIGHT="150">

The tag in the example above is the IMG (image) tag. The properties of the IMG tag are srcwidth, and height. These attributes tell the browser to display the image “pic.jpg” and that the picture is 200 pixels wide and 150 pixels high.

Here are a list of common HTML tags.

Basic Text Formatting Tags

HTML text formatting tags are commands that allow you to add a header, create paragraphs, and create horizontal rules.

Commonly used formatting tags and their attributes:

Tags/Attribute Description
<!– Comment –> Used for inserting comments into your web page
<html>,</html> This tells the web browser that the page you want to view is an HTML document. This is a required beginning and ending tag for all your HTML documents.
<head>,</head> This is the head of the HTML document and contains the <title> tag as well as your<meta> tags.
<title>,</title> Allows you to create a title for your HTML document. It goes within the <head> and</head> tags.
<body>,</body> Used for enclosing the content, or main, section of the page. This tag is required.
<h1>,</h1> First level heading. Very large text size. Requires both beginning and ending tags.
<h2>,</h2> Second level heading. Requires both beginning and ending tags.
<h3>,</h3> Third level heading. Requires both beginning and ending tags.
<h4>,</h4> Fourth level heading. Requires both beginning and ending tags.
<h5>,</h5> Fifth level heading. Requires both beginning and ending tags.
<h6>,</h6> Sixth level heading. The smallest text size for any heading tag.
<p>,</p> This creates a new paragraph. Note: you need to use this tag if you want to create a space between two blocks of texts (paragraphs). Simply hitting the return key will not make a new paragraph because HTML ignores hard returns and spaces.
<br / > This creates a line break. Use it to create a new line in, say, writing your postal address where you want a separate line for:<p>your name<br / >
address<br / >
city, state zip<br / >
phone number</p>
<hr / > Creates a horizontal rule that can be used to section off part of a page.
<strong>,</strong> Creates bold text. Requires both beginning and ending tags.
<em>,</em> Creates italic text. Requires both beginning and ending tags.

Creating Hyperlinks

If you want to connect your web page to other web pages that you created or to other web sites on the Internet, you’ll have to create what is called an Anchor tag<a>. An link or anchor is the highlighted text that you click on and see highlighted on a web page.

The code for this hyperlink is:

<a href="http://www.kmjlibrarian.com">
Kimberly's ePortfolio</a>

An Anchor contains an address (Uniform Resource Locator, or URL) that is required to tell your browser and the computer that hosts a web site where to locate a particular file. In the example above, the <a> tag contains an attribute called the href="http://www.hawaii.edu/slis/webteam/". The href attribute is followed by an equal sign, =, and beginning and ending quotes. Enclosed within those quotes is the URL of the LIS Web Team home page.

After the beginning <a> tag, you have a descriptive label for the link. In this case it’s the LIS Web Team Home page. You then close the </a> for the link to work.

Types of Links You Need to Know

There are two types of hyperlinks: Absolute and Relative. An absolute link is described above, and it’s used to link to an external web site, or a site that another web author has created and exists on another computer on the Internet.Use absolute links to connect to another web site.

Absolute links look like this:

<A href="http://www.hawaii.edu/slis/webteam/">
LIS Web Team Home Page</a>

On the other hand, if you want to connect to another web page that you created, (link to your own documents within a given work folder), you should use relative links). A relative link is portable, meaning that if you move your web site to another work folder, your web site will still work. If you used absolute links, you’d have to change all of your absolute links in order for your web site to work.

Does this makes sense? Well, many people get confused by this concept and it takes some time for it to sink in, so here’s an example of what relative links look like:

Relative Path href="tags.htm"
This file is located in the same (current) directory/folder
Relative Path href="../index.htm"
This file is located in the directory/folder one level up form the current directory.
Relative Path href="module02/unix.htm"
This file is located in the directory/folder called “module02”. This “module02” directory is located within the same directory/folder
Absolute Path href="http://www.hawaii.edu/slis/webteam/"
This file is located on the Univ. of Hawaii web Server

Creating E-mail Links

Any time you author an HTML document, it’s always a good idea to include a link to you, the author of the page. This allows users to contact you as well as provide a sense of credibility and authority to the information that you provide through the Web.

Creating an e-mail link is simple, and it looks like this:

Send e-mail to: LIS-WEB@lists.hawaii.edu

The code for this e-mail link looks like this:

Send e-mail to: <a href="mailto:LIS-WEB@lists.hawaii.edu">
LIS-WEB@lists.hawaii.edu</a>

All e-mail links use this form: href="mailto:yourname@email.address"

Cautionary: Email spam is sometimes generated by a webcrawler looking for email address links on webpages; some sites make their email address into an image, to prevent possible spam.

Creating Lists

Creating lists is something that you will use often because it allows you create step-by-step instructions, list a series of steps or information (bulleted lists), and helps users scan a page for important information that would otherwise be embedded in a paragraph of text.


Ordered Lists

Ordered lists allows you to create sequential instructions or an outline format. The cool thing about ordered lists is that you can define the initial value for a list item. Let’s see some examples:

Step-by-Step Instructions

To start your HTML document:

  1. Type the <HTML> tag.
  2. Then type the closing </HTML> tag.
  3. In between these two tags you will have your <HEAD>, <TITLE>, and <BODY> tags.

The code for this example looks like:

<P>To start your HTML document:</P>

<OL>
<LI>Type the <HTML> tag.</LI>
<LI>Then type the closing </HTML> tag.</LI>
<LI>In between these two tags you will have your <HEAD>, <TITLE>, and <BODY> tags.</LI>
</OL>

Outline Format

Here you define type=n where n= is a symbol. For example:

To start your HTML document:

  1. Type the <HTML> tag.
  2. Then type the c losing </HTML> tag.
  3. In between these two tags you will have your <HEAD>, <TITLE>, and <BODY> tags.

The code for this example looks like:

<P>To start your HTML document:</P>

<OL type=I>
<LI>Type the <HTML> tag.</LI>
<LI>Then type the closing </HTML> tag.</LI>
<LI>In between these two tags you will have your <HEAD>, <TITLE>, and <BODY> tags.</LI>
</OL>

Or you may want to use a letter of the alphabet (case sensitive!):

To start your HTML document:

  1. Type the <HTML> tag.
  2. Then type the closing </HTML> tag.
  3. In between these two tags you will have your <HEAD>, <TITLE>, and <BODY> tags.

The code for this example looks like:

<P>To start your HTML document:</P>

<OL type=a>
<LI>Type the <HTML> tag.</LI>
<LI>Then type the closing </HTML> tag.</LI>
<LI>In between these two tags you will have your <HEAD>, <TITLE>, and <BODY> tags.</LI>
</OL>


Unordered Lists

Unordered lists allows you to create a series of bulleted information.

To start your HTML document:

  • Type the <HTML> tag.
  • Then type the closing </HTML> tag.
  • In between these two tags you will have your <HEAD>, <TITLE>, and <BODY> tags.

The code for this example looks like:

<P>To start your HTML document:</P>

<UL>
<LI> Type the <HTML> tag.</LI>
<LI>Then type the closing </HTML> tag.</LI>
<LI>In between these two tags you will have your <HEAD>, <TITLE>, and <BODY> tags.</LI>
</UL>

Unordered Lists have type=”disc” (default) “circle” or “square”


Definition Lists

Definition lists may be used for glossary type lists as in the example:

HTML:
Stands for HyperText Markup Language. This is the computer language used to write source code (see definition below). The purpose of HTML is to describe to the computer how a web page should look. Every few years, a new standard for HTML is introduced. As of January, 2000, HTML 4.0 is the latest version.
HTTP:
Stands for HyperText Transport Protocol. Most Web site addresses are preceded by HTTP. For example: http://www.amazon.com.

The code:

<DL>
<DT><STRONG>HTML:</STRONG> </DT>
<DD >Stands for HyperText Markup Language. This is the computer language used to write source code (see definition below). The purpose of HTML is to describe to the computer how a web page should look. Every few years, a new standard for HTML is introduced. As of January, 2000, HTML 4.0 is the latest version.
</DD>

<BR / >
<BR / >

<DT><STRONG>HTTP:</STRONG> </DT>
<DD>
Stands for HyperText Transport Protocol. Most Web site addresses are preceded by HTTP. For example: http://www.amazon.com.
</DD>
</DL>

Adding an Image

To insert an image into your web page, simply use the following code:

<img src="cabbage.gif"" alt="My Little Cabbage" />

My Little Cabbage

This tag, short for “image source” will load the requested URL. This URL is a document-relative link. This means that the server will look for an image in the same folder as the page itself. If you have an images folder (which I highly recommend), your link will look like this:

<img src="images/cabbage.gif" alt="My Little Cabbage" />

The uhUNIX server reads folders in the above manner; other servers may need a backslash in front of the folder name: <img src="/images/cabbage.gif" alt="My Little Cabbage"/>

Don’t forget the alt! This enables people to read what your picture is about, instead of looking at it. This is useful if the user is blind and using a screen reader, which will read the alt text, or for a broken image link, or for a user with a slow connection who doesn’t load browser images.

<img src="images/cabbage.gif" alt="My Little Cabbage" />

The <IMG> tag has the following associated attributes:

src= specifies the URL, or path to the image file
width= specifies the width of an image
height= specifies the height of an image
alt= specifies an alternative text label, or description, of your image

The src= attribute tells your browser where to find the image file that you want to display on your web page.

The width and height attributes are not mandatory. They simply help the browser download your page faster. These attributes are not required, but if you want to ensure that your page renders quickly in any web browser, it might be a good idea to include them in the <IMG> tag.

To find the width and height of your image, simply load it into any image program. Loading it into a web browser will also show the width/height (across the top of the browser).

The alt= attribute provides users with screen readers or text only browsers to identify whether an object on a page is an image or whether that image conveys meaningful information to the user. This is the string of text that pops-up when you roll your mouse over an image. Alt attributes are required if you are building web accessible web pages and web sites.

Advertisements