XXI. More for Images and Lists
Objectives
After this lesson you will be able to:
" Create a hyperlinked-graphic without a bounding border
" Place a framing border around an inline image
" Write the HTML for an un-ordered lists that uses different bullet styles
" Write an ordered list that numbers items via capital and small alphabetical letters or large or small Roman numerals
" Modify an ordered list to start counting from any positive value
No Hypertext Borders on Hyperlinked Images
In lesson 9e you learned how to make a small graphic image act as a hyperlink to some other web page or a larger size copy of a picture. Hopefully you noticed that the web browser places an annoying bounding box around the graphic, to identify it as being "hyper" like normal hypertext items that would normally be underlined, since it does work just like any other hypertext link.
However, the box is sometimes distracting, especially if you have an image that has non-rectangular borders. The user can typically determine if a picture is "hyper" simply by noting a change in the cursor as they move a mouse over the image (it usually changes to a "hand" when it is over an active link). You can hide the box by adding an attribute to the <img...> tag:
<a href="bigpict.gif"><img src="lilpict.gif" border=0>
In this example, the inline image lilpict.gif acts as a hyperlink to the bigger image bigpict.gif. The border=0 attribute has no meaning if the <img..> tag is not inside of an <a href=...</a> tag.
You have two places in your Favorite Cars web site where you have hyperlinked inline images -- do you remember where?
The first is in the intro.html file, where three small image of cars link to their larger sized images. The second is the arrow button on the camaro.html page that leads back to the lesson.
- 1. Open both the intro.html and the camaro.html in your text editor.
- 2. Locate the place where we have a small image that links to something else.
- 3. Modify each <img src=....> tag that is a hyperlink so that it contains a "border=0" attribute. For example, in the camaro.html file it should look like:
<a href="index.html#domestic"> <img src="images/left.gif" border="0">Return to <i>Domestic Cars</i></a>
- 4. Save and Load the intro.html and camaro.html files in your web browser.
- 5. If the small images have lost their borders but still connect to their intended target when clicked, your job is done.
Putting Borders around Images
And now we show you how to do the opposite of taking away borders; adding BIG THICK borders! You can use the same border=X option to add a border around an image. The number you use for X determines the thickness, in pixels, of the border placed around an image. So to place an 8 pixel border around an inline image the HTML would be:
<img src="pictures/disk.gif" width=48 height=40 border=8>
NOTE: The border color is the color defined as the TEXT color in the BODY tag. (see lesson 17)
You can also use this on an image that is acting as a hyperlink:
<a href="page.html"><img src="pictures/disk.gif" width=48 height=40 border=8></a>
Bullets for Un-Ordered Lists
In lesson 7 we first created unordered <ul>...</ul> lists. The web browser automatically puts a bullet mark in front of each item and the bullets change if we create a list inside of a list. With some web browsers, you can specify in your HTML any of three bullet characters by adding an attribute to the <ul> tag:
<ul type=xxxx>
where xxxx can be:
- type=circle
- type=square
- type=disc [default bullet for top level list]
...wait there's more! You can change the type within a list by putting the type attribute in the <li> tag also. Closely examine the following example of a list with mixed types and see if you can follow along with how it is done.
Example
<ul> HTML
<ul type=square>
<li>this is item 1</li>
<li>this is item 2</li>
<li>this is item 3</li>
<li type=circle>
Hey! how about these circle bullets?
<li type=circle>this is another item</li>
<li type=circle>and one more</li>
<li type=disc>Hey! how about this disc bullet?</li>
</ul>
Sample Result
In some browsers, the type specified in the <li type=xxxx> tag is used by all succeeding <li> tags that do not have a type attribute until another bullet type is established. However, in Internet Explorer web browsers, list items without a type attribute will revert to the type set in the initial <ul> tag. Therefore, our recommendation is that if you wish to change the bullet styles within a list is that you set it for each <li> tag that requires a different bullet.
Differences between the web browsers sure make life complicated! And this is another reason you should consider checking your site in more environments that just your own computer.
You will now change the bullet list style used in your Research Projects page (file proj.html).
- Open your proj.html file in your text editor.
- The first list in this file is an Ordered List <ol>...</ol> but you will now change it to an unordered list with circle bullets. Edit your HTML for this first list so that it looks like:
<ul type=circle>
<li>Type of Car</li>
<li>Geographic location of the manufacturer</li>
<li>Noteworthy details</li>
<li>Comparable vehicles</li>
<li>Personal reason for liking that particular car</li>
</ul>
- Save and Load your file in your web browser. Compare your page with this sample of how your list should like at this point.
Styles and Values for Ordered Lists
When you first created an ordered list <ol>...</ol> in lesson 6, you saw how the web browser automatically numbers the items, one for each <li> tag. What if you do not always want to use Arabic numerals (1,2,3...)? Well, here is the answer, a type=x attribute for the <ol> and <li> tags inside:
- ARABIC
- <ol> type=1>
- 1 first
- 2 second
- 3 third
- 4 fourth
|
- UPPERCASE
- <ol> type=A>
- A first
- B second
- C third
- D fourth
|
- LOWERCASE
- <ol> type=a>
- a first
- b second
- c third
- d fourth
|
- LARGE ROMAN
- <ol> type=I>
- I first
- II second
- III third
- IV fourth
|
- SMALL ROMAN
- <ol> type=i>
- i first
- ii second
- iii third
- iv fourth
|
Presented below is an example of using ordered lists within ordered lists (nested) to create outlines -- with the type attribute you can create pages with a standard format:
Example
Nested ordered list using various number formats
- Prestigious Automobile Brands from Asia
- Japan
- Acura
- Infinity
- Lexus
- Prestigious Automobile Brands from Europe
- Germany
- Audi
- BMW
- Mercedes-Benz
- Porsche
- Great Britain
- Aston Martin
- Bentley
- Jaguar
- Rolls Royce
- Italy
- Ferrari
- Lamborghini
- Maserati
- Prestigious Automobile Brands from North America
- United States
- Cadillac
- Lincoln
Another thing you can do with ordered lists is to have them start counting from some other value than (1.) To do this, you add the "start=y" attribute to the tag to define where in particular it will start.
NOTE: Even if you have some other "type=x attribute", you can still specify the starting value y as "2,3,10,100, etc.". Look at the following example:
Example
- <ol type=1 start=11>
- 11 eleventh
- 12 twelfth
- 13 thirteenth
- 14 fourteenth
|
- <ol type=a start=11>
- k eleventh
- l twelfth
- m thirteenth
- n fourteenth
|
Review
Review topics for this lesson:
- How do you get rid of the hypertext box that surrounds a graphic that is hyperlinked to another item?
- How can you put a 20 pixel border around an inline image? What color will it be?
- How can you change the bullet markers for an unordered list?
- Do you have to use the same bullet markers for an entire list? If not, how do you change the markers mid-list?
- How can you create a list that marks items by Roman Numerals?
Independent Practice
Experiment with different bullet markers and numbering styles in the lists of your own web pages. Can you think of some unique ways to use these added features? Can you make a complex outline with "standard" formatting? All of those <ol>...</ol> tags can get pretty complicated if you do not pay attention!
XXII. META tags
"Hey! What's the <meta> in Your <head>?"
"A slicker opening... and I look better on Search Engines!"
Objectives
After this lesson you will be able to:
- Write the HTML to have one web page automatically advance to another page
- Add embedded information that will help others find your site using Internet searches
Lesson
In this lesson we will review two uses of <meta> tags. This HTML syntax was created to allow "meta" or "extra" information to be embedded in a web page, in the part that is not displayed by the web browsers. There are many other types of META tags that you may come across, but provided you will find examples on the two that are most useful.
The place that these tags go are within the <head> ... </head> part of your HTML document that you learned about way back in lesson 2.
META REFRESH for auto advancing of web pages
The first type of META tag allows you to write HTML that will display your web page, wait an arbitrary number of seconds, and then automatically advance to another page or URL. Why would you even want to do such a thing?
- Pages that have moved -- As a web site designer, you should strive to avoid your visitors striking the dreaded Error 404 Site Not Found message. Often you may create a web site available on the web, and then because you re-design the site, the file has been moved to a different folder/directory, or moved to another web server, or is just no longer made available. It is nice to leave a page that offers a link to the newly named or moved site, but with the META tag, you can have it jump there automatically.
- Timed Slide Shows -- You may create a series of web pages that each sit for say 10 seconds before automatically advancing to another web page, like a kiosk.
- Opening Sequences -- Many web sites now are designed to load a quick opening page, perhaps with a small logo, which pauses a few seconds before jumping automatically to a more comprehensive page. This presents a more eye-pleasing introduction, especially if the main page is "busy", like the opening credits to a movie.
Now you will learn how to do the third example above, adding an opening screen to the Favorite Cars Web lesson. The <meta> tag resides inside the <head>..</head> block:
<head>
<title>My page title</title>
<meta http-equiv="refresh" content="x; url=newpage_or_url.html">
</head>
where X represents the number of seconds that this page will be displayed before advancing to the HTML file or URL listed after url=".
NOTE: The whole string after content= must be in quotes, and there must be a semi-colon after the value for the number of seconds.
For this lesson you will be creating a cover page that replaces the entry point to the lesson, index.html. Before you do anything, you have to adjust the name of the page and all link references to it.
- First, you will use a copy of a colorful graphic image from the images folder where all of your image files are located. In this case you will use the file "leather logo.jpg".
- Using your text editor, open all of your HTML files, and change every link to file index.html to read index1.html.
NOTE: This occurs once in every page, at the top of the page, except for the index.html and the Camaro.html files!
<a href="index.html">index</a> --
This should be changed to read:
<a href="index1.html">index</a> --
- Now you will create a new page named "index1.html", which will be a page that will be the "splash" page to your site. A splash page generally is defined as a graphical page to create an impact at the beginning of a presentation or hint at it content. You will first construct it and verify the HTML before inserting the META tag (it is difficult to test your pages if it keeps moving every time you load it!). Using your text editor, create a new HTML file that looks like this:
<!DOCTYPE HTML>
<html lang="en">
<html>
<head>
<title>Favorite Cars</title>
<meta http-equiv="refresh" content="8; url=index.html">
</head>
<body background="images/leather%20logo.jpg" height="100%" width="100%">
<h3 align="right" valign="bottom"><a href="index.html">Click here if this
page does not automatically advance in 5 seconds!</a></h3>
</body>
</html>
- Save and Reload in your web browser. Test all of your links to make sure they lead back to the index1.html file.
- Now open your newly created index1.html file in your text editor, and after the line that reads:
<title>Favorite Cars</title>
add the META tag line:
<meta http-equiv="refresh" content="8; url=index.html">
NOTE: The META tag instructs the browser to pause 8 seconds and then automatically advance to the web page at index1.html
- Save and Reload index1.html in your web browser. See if it forwards to the next web page.
META Descriptor tags
You are doing all of this hard work to learn HTML and create web pages. Ultimately, you probably want people to be able to find them among the other 99 Billion pages out there. META tags allow you to add extra information that will help identify your web page when people use Internet searches.
This tutorial will not go into great detail about web search engines; it is something you will have to investigate yourself. Basically, some clever programmers have written code that tries to follow as many web links as it can, and return a bit of information about each page it "crawls" (hence the term webcrawler) through and report it to a centralized database. They then offer a single web page where you can enter some descriptive words, and their site returns a list from their database that might match what you are looking for.
If you are not familiar, experiment with using the search features from sites such as Google or Bing. At many of these web sites, the results that are returned display the text of the first few lines of the displayed web page. Unless the very first words on your page are very descriptive, the results will not provide a clear understanding about what is on the page.
Below would be an example of what a search engine would return as a result for the original "Writing HTML" tutorial web page at http://www.mcli.dist.maricopa.edu/tut.html
Example
Result without META Tags
If you look closely you will notice that the search engine result consists of nothing more than the typed text at the beginning of the web page.
Writing HTML
From: http://www.mcli.dist.maricopa.edu/tut/
Writing HTML | About | FAQ | Alumni | Kudos | References | Tags | Lessons | / June, 2000 /
version 4.5.2 / version history / About this Tutorial WRITING HTML WAS CREATED to
help teachers create learning...
Result of the same web page with predefined META Tags
The information shown here is the result of the information written into the META Tag. If used properly this will give preview information to a prospective visitor when the site shows up in a search result.
Writing HTML
From: http://www.mcli.dist.maricopa.edu/tut/
More than just an HTML reference, this is a structured approach for learning how to create web pages, designed by specialists in learning at the Maricopa Center for Learning & Instruction.
The HTML format for adding this kind of META tag is:
<meta name="description" content="This string of text is a really good description of this web page. Perhaps a second sentence would help as well.">
If you are tempted to write a long descriptive narrative, keep in mind that maximum length of a META tag, from the first "<" to the last ">" is 1024 characters, leaving 998 characters between the beginning of the tag <meta name="description" content="and the closing"> leaving room for perhaps 100 words.
Another META tag that is useful in shaping how your site fares on web searches allows you to add the important words that you think a visitor might enter when they are searching for a site such as your own. For example, for the "Writing HTML" tutorial main page at http://www.mcli.dist.maricopa.edu/tut/ the staff provided these keywords to include the META tag:
<META name="keywords" content="HTML, tutorial, learn, make, create, design, web page, home page, education, maricopa, mcli, writing, form, tables, frames, javascript">
Now you will add the two descriptor META tags to the main entry page for your Favorite Cars Web site. For your own work, you may add these to each page so that it has unique content and keywords.
- Open the index.html file in your text editor.
- After the portion of the HEAD tag that reads:
<meta http-equiv="refresh" content="2; url=index1.html">
add these two additional meta tags:
<meta name="description" content=" This tutorial teaches you how to create web pages the old fashioned way; by hand. The lessons will teach the basics of HTML. This will is a hands-on course which will include easy to follow assignments, class discussions and reviews of the actual project."> <meta name="keywords" content="HTML, learn, web page design, create web">
- Save the HTML file and Reload in your Web browser.
NOTE: The addition of the two META tags will not make your web page look any different. (Why?) ...but once they are placed on a web server, they will enhance how your web page is "indexed" by the different web search sites.
Review
Review topics for this lesson:
- How can you make one web page automatically jump to another?
- If you edit the meta description=... tags, why do you not see anything different when you view your web page?
- How would you use meta refresh tags to create a 10 screen, auto-advancing, slide show? How would you make it cycle endlessly through all 10 slides?
- How can you use META tags to increase the chances of your web page being found by web search engines?
Independent Practice
Can you develop a one or two sentence that would define your site to a person who had not seen it before? Add some META tags for descriptors and keywords to your own page. Experiment with a front end page that introduces your web site and use the meta refresh tags to make it jump to your main page. Can you make the opening page compelling enough to "invite" someone into your site? Do you think this page should contain a lot of graphics or very few? Why or why not?
More Information
It's always a good idea to include these two tags (a description and some keywords) on every page you create. It will help your site to be found and indexed by search engines such as Google.
In the past, search engines based the contents of their indexes on little more than this information. However, that's no longer the case, as many web site operators tried to cheat the system by, for example, including explicit sexual keywords to describe fairly dull sites. So although meta-tag information is no longer as important as it was, it is still taken into account by search engines as part of a much more complex process.
Most people locate web sites of interest by using a search engine such as Google. Therefore, by far the easiest and cheapest way to attract visitors is to ensure that your site, rather than anyone else's, is top of Google's list.
For obvious reasons, search engine companies don't divulge the precise details of the formulas that they use when deciding whether one site should be higher in the list than another. However, they do publish a selection of tips which can help. These, combined with anecdotal evidence from people who run sites that do achieve a good Google ranking, are clearly worth following.
The art (actually it's more like a science) of getting good search results is known as search engine optimization, or SEO. If you want to know more about it, search online, or in your favorite bookshop or library.
If, during your quest, you encounter ads for companies or software products which guarantee your site a top-10 placing in return for a fee, avoid them. As previously mentioned, search engines keep their methods highly secret, so anyone who claims to know how to defeat them is, at best, mistaken.
