A website is made up of multiple web pages, hyperlinked together.

URL = Uniform Research Locator

A URL tells the computer exactly where to look for a particular file on the web:

It's best to use lowercase when creating directory names and filenames, because they are case-sensitive (depending on the server). The scheme, subdomain and domain are not case sensitive, however.

Types of schemes:

HTTP:// HyperText Transfer Protocol (the default in most browsers)
FTP:// File Transfer Protocol used for downloading files
Mailto: email - mailto:emailaddress@bgnet.bgsu.edu
file:/// file on desktop or computer

Types of file extensions:

standard HTML web page:
.html .htm
image:
.jpg .gif .png
sound:
aiff .wav .mp3
movies:
.mov .mpg
text:
.txt
database-driven site:
.php
.cf
.asp
Flash:
.swf

index.html

If the URL does not contain a specific filename, the computer automatically looks for the file index.html, and opens it. This is why some URLs do not contain filenames: they are directing the computer to a home page within a particular directory.

For example, in the URL www.bgsu.edu, the computer is instructed to go to the root directory at bgsu.edu. It isn't necessary to include the filename, because the computer will always open the index.html file by default.

HOWEVER, if the computer is sent to a directory that does not contain an index.html file, there will be an ERROR: FILE NOT FOUND message.

Therefore... ALL HOME PAGES MUST BE NAMED index.html

Website Organization

Proper organization of directories and filenames in a website is ESSENTIAL. A simple three-page website using three images might have a directory structure that looks like this (directories shown in square brackets):

[websitename]
- index.html
- page1.html
- page2.html
- [images]
  - image1.jpg
  - image2.jpg
  - image3.jpg

In this example, the home page (index.html) contains code that points to the three images so they'll appear on the page. The home page also displays text with hyperlinks to the two other pages in the website. If you were to rename or move any of the files, the web page would not be able to find them, so your images/links would not work. You would have to change the code to the new name/location.

Hyperlink tag <a href=""></a>

The HTML code for a basic hyperlink looks like this:

visit our website for more information

The <a> (anchor) tag is nested within a <p> tag in this example.
It opens just before the text you want to apply the link to.
The href= attribute is code for "hyperlink reference", and tells the computer what file to open and where to find it.
Link location is shown within double quotes. In this example, since no filename is provided, it will open the default "index.html" at the root directory of the location given.
The </a> tag must be closed after the text you want to apply the link to.

Absolute and Relative Links

There are two types of links used in HTML:

An absolute URL - points to another web site (like href="http://www.example.com/theme.css")
A relative URL - points to a file within a web site (like href="/themes/theme.css")

Relative Link Paths

Links within a website are made relative to the HTML page. Relative links are used for pages, images, stylesheets, etc. that are located in the same website as the HTML page.

Look at the example directory structure at the top of the page. A relative link from the home page to the second page of the website would be written like this:
<a href="/page2.html">Page Two</a>

You can also reference subdirectories like this example of an image that is in a subdirectory called homePage, which is inside the images directory:

Or you can reference directories one level up from the one your page is in, like this:

<a href="../section1.html">Section One</a>

Image tag <img src=""/>

In order to display any image on an HTML page, code needs to be written so the computer can find the source of the image file. IT IS IMPORTANT TO KEEP YOUR DIRECTORIES AND FILENAMES ORGANIZED AND CONSISTENT so you can easily find the files you need to link to!

The basic HTML tag for an image looks like this:

This image is nested inside a paragraph tag.
The source (directory pathway and filename) for the image is between double quotes.
The <img/> tag is SELF-CLOSING, as you can see by the / outside the quotes, but inside the closing bracket >.
Source pathway and filename MUST be exact, or the computer will not find the image!

You can add attributes to the image tag, as shown in the following example:

<p><img src="/images/myImage.gif" width="335" height="80" alt="My Image"/></p>

Width and height of the image are specified in pixels. This speeds up processing time, telling the computer what size space to create for the image before it is imported.
The alt attribute provides alternative text. This is the text that appears by your cursor when you point to an image. It also is read by software used by the visually impaired. It is considered industry standard to include alt text for all images used for navigation, that contain text or important information.