Figure 4.3b: A tree view from Windows Explorer (Windows XP shown)
| Chapter 4: Pictures, Links, and Sites | ||
| Previous Chapter 3: Body and Basic Text FX |
Home | Next Chapter 5: Advanced Text FX |
Since we assume that you have used the Web before, you probably know all about URLs. But well take that information a step further, and find out how URLs fit in to HTML code:
A user needs a way to easily locate and view Web pages, as well as files on their computer. The URL (Uniform Resource Locator) meets that challenge. It consists of three parts: the protocol, the domain name, and the file name.
The protocol is the communication standard for getting the file. The protocol for viewing files over the Web is called HyperText Transfer Protocol, or HTTP. To view a page, use the http:// protocol. If you are referencing files on one of your local drives, use file://.
CAUTION
If you leave off the http:// protocol, some browsers may assume that you are using file://. Always include the protocol when using an absolute (rather than relative) URL.
The Web is made of sites, and most have domains, which is a registered website name that only they can use. www.ebay.com is a domain, www.amazon.com is a domain, and so is www.google.com. Domains are hosted on large computers called servers, which run the site. Most big, well-known sites have multiple servers for backups as well as to handle the sheer number of viewers at any one time. The domain name has an extension denoting the type of organization that owns the site, such as .com (commercial), .org (non-profit organization), .edu (educational), .gov (government) or .mil (military).
Other Domain Name Extensions
Other countries may have different domain extensions. Rather than .com, commercial sites in the United Kingdom use a .co.uk extension, Canada uses .cn, Germany uses .de, and Japan uses .jp.
Servers typically have subfolders. These are referenced by adding a / and the name of the subfolder after the domain name, then another slash, e.g. http://www.sample.com/subfolder1/page1.html.
The src attribute of hyperlink and picture tags accept a full URL (without the protocol), called the absolute address, as well as a shortened form of the URL that leaves off the server name and subfolders, called the relative address. To use this shortened form, the file youre referencing must be in the same folder (directory) as the file youre in.
However, if you find a need to reference a file in a parent folder (the folder in which a subfolder resides), type ../filename. You can refer to other subfolders of the parent folder in this way, for example, if the file that you're working on is stored at C:\HTML\Folder1, then to refer to a file at C:\HTML\Folder2, type ../Folder2/otherfile.
If you are ever in doubt about which version of the URL to use, take the full (absolute) version. The extra typing wont kill you.
A link that doesnt work is called a dead link, or a broken link. Always test your code for dead links.
CAUTION No doubt you have encountered a broken link before. When you click the link, the screen displays 404: The page cannot be displayed. This is really frustrating to the user, and they may get so angry that they go to a different site. The reasons for broken links vary: a site moves or shuts down, wrong URL or just plain sloppy coding. There could be connection problems with the users ISP. So always check your links!
To make organization easier, I like to isolate all the pictures and pages for a site into its own folder. This makes linking easier.
In Chapter 1 you learned (hopefully; you probably didnt, though) that images were first added to the Internet in 1993, when Marc Anderssen invented the <img> tag. The <img> tag will display any picture you like. It accepts many attributes, but the two most important are the src attribute (which is absolutely required), and the alt attribute, which specifies text describing the picture that will be displayed only if the picture cannot be loaded for some reason.
What kinds of pictures can be used? While you may think, pictures are pictures, they arent. There are so many different file formats that it can be really overwhelming. The most popular formats, *.BMP, *.GIF, and *.JPEG are all accepted. The format that I use most is *.GIF, and that is the one I recommend. You should NEVER EVER use *.BMP format, because it is huge and takes forever to load.
The src attribute will take the URL of whatever picture you choose. Simply type it in.
The image tag needs no closing tag.
There is a new up-and-coming format, called the Scalable Vector Graphics (SVG) format that will probably become the primary format of the Web by 2010 or earlier. SVG is not based on bitmaps (like *.BMP, *.GIF, *.JPEG), but rather mathematical equations, meaning they can be scaled down or scaled up without becoming grainy. They can also be animated. Unfortunately *.SVG files cannot be used with the <img> tag but older browsers do not support them at all. To add *.SVG support to their browsers, users may download a viewer to make their browser compatible. If youre going to add SVG pictures, its good idea to add a link to the download page at
http://www.adobe.com/svg/viewer/install/main.html.
But if SVG can't be placed into the image tag, how can you display the pictures? Fear not - there are two workarounds. The first is to use the <object> tag. The syntax is <object type="image/svg+xml" data="[place file path here]" NAME="[place a meaningful name here]" width="[width in pixels]" height="[height in pixels]" ></object>. As you can see, it is somewhat more complex than the image tag, and debate rages over whether the <object> tag or the <embed> tag should be used. However, the object tag is usually preferred. For more information about this controversy, click here.
To create an SVG picture, you'll need a vector-drawing program (Pictures made up of math equations are called vector drawings). The most popular program for this purpose is Adobe Illustrator (not cheap!), but you can also use freeware programs like Inkscape that are designed for vector drawing. Vector drawings can also be made in a text editor like Notepad if you know how the code works. The code is written in the Extensible Markup Language (XML). That's beyond the scope of this book, however.
Hyperlinks, or links for short, send the user to another page. The hyperlink is created by the <a> tag. Any text or graphics between the <a> tag and its closing tag will be displayed as a hyperlink, and, when clicked, displays the hyperlinks destination.
href attribute in the same way as the src attribute of the image tag. Clicking the link will divert the person to that URL.
http://encarta.msn.com/encyclopedia_761568615/McKinley_William.html
mckinley.html file in Notepad.
HOME | MSN Encarta Encyclopedia | Google
http://encarta.msn.com/default.aspx
Figure 4.1: Links and pictures (part of Exercise 4.01)
Sometimes you may want to link to a specific place in a HTML document, such as a heading or specific paragraph. In this case, create an anchor at that spot. Use the <a> tag's name attribute. For example, <a name="anchor1">. Place a closing tag after the specific text that you're linking to. Then, link as normal, but add a sharp (#) to the URL and add the anchor name that you want to link to, for example, <a href="webpage1.html#anchor1">.
CAUTION
All anchor names inside a particular document must be unique. You cannot use the same name twice.
Just because you have written pages doesnt mean that you have created a site. A site is a collection of related pages on the same server, usually with a domain name. Sites are organized in different ways. There are three basic ways of organizing a site: linear, hierarchal, and random-access.
The linear structure of a web site is a structure where the pages are arranged in a specific order, much like a book. The first page, or home page, often gives a table of contents with links. The pages are accessed with <<Back or Next>> links.
Figure 4.2: Diagram of a linear-access site
Most often, the linear structure of a Web site is used for informatory purposes. For example, if you were creating a site teaching someone how to replace a hard drive, the linear structure would serve your site well.There are times when the linear style of site is not appropriate. For example, if you were creating a site giving information about computer products, you could sort each page into hardware and software categories, and further sort the hardware into subcategories like processors, RAM memory, hard drives, floppy drives, and motherboards. The software could be sorted into word processors, spreadsheets, programming tools, and so on. Sorting and organization is the benchmark of the hierarchal structure.
In fact, the hierarchal structure of a Web site is so organized, it can be compared to the tree view in Windows Explorer or Konqueror (see Figure 4.3b).
Figure 4.3a: Diagram of a hierarchal site
Figure 4.3b: A tree view from Windows Explorer (Windows XP shown)
The only problem with the hierarchal site structure is that it is easy to get lost in. In order to get from page A1 to page B1, one would have to go up to the home page and down through page B and then into page B1. While this doesnt seem like a big deal, with large sites it can become unwieldy.
The random-access structure is the closest a Web site gets to having "no structure." It contains a home page, which is linked to all the pages of the site. In addition, each page contains a link bar or table of links to connect all the pages. The problem with this structure is that it is so unorganized that it may be hard to find anything.
Figure 4.4: A diagram of a random-access site
The random-access structure is one of the most popular on the Web. It has a wide range of uses and may easily be set up to work with any Web page.
The mixed structure is a very convenient and popular way of organizing sites. At its core, the mixed structure is a structure that is a mix of multiple site structures. You may mix any of the three structures. For example, the site in Figure 4.4 shows a random-access structure with a hierarchy branching off the page in the upper-right corner.
Figure 4.4: An example of a mixed-site structure
The mixed site structure is very efficient for any use. For example, eBay is a mixed structure. The categories of items are arranged in a hierarchy, but any page may be accessed using the search feature. The form for registration follows a linear process.
Simply type the answers to the questions in a new *.txt document. Print and turn in. You may save the file if you like.
Please remember that these questions have been painstakingly researched, although the answers have not. Sticklers for the truth should write their own book.
name and href attributes of the <a> tag.