Technology and Livelihood Education IV

(Information and Communication Technology II)

	Activity Sheet No.15

Score

School		Year & Section
Name		Date

Activity Title:	INDENTING A LINE and CREATING SPACES with
Learning Target:

Remember that your browser normally prints text left justified and only leaves one space between words and sentences. To force extra spaces or simply to indent a line, use the following command. It works.

These six characters will create a space as if you pressed the space bar. I used 8 of them to indent this paragraph as in:

These six characters will ...

In , the nbsp stands for non-breaking space character. is simply known as the space character. How many of these non-breaking space characters you use in a row is up to you. Use whatever number suits your purpose. Note that the "nbsp" must be in lower case letters. &NBSP; will not work. The character "&" is pronounced "ampersand" and these 6 characters form an ampersand command. We know that browsers read commands inside angle brackets (< >). Well, browsers also read commands between the "&" and ";" (that is, between the ampersand and semicolon). Ampersand commands are used to create special characters not found on the keyboard such as the copyright symbol, the trademark symbol, the symbol for degrees, etc. All you need to know is that special code that goes between the "&" and the ";".

Here are some popular symbols and their ampersand commands that work in all browsers (commands for subscripts and superscripts are covered in Lesson 17):

Hands 0n Exercise:

If all you want to do is indent a line or paragraph, using the ampersand command is quite simple. But the ampersand command can also be cumbersome to work with. For example, try the following problem for this lesson.

Problem: SWITCH to NOTEPAD and make up an HTML document that gives the following output in your browser. Indent my address 10 spaces (10 commands) from the left side of the screen, and use 30 spaces between the "n" in Gilson and the "W" in William. Do the best you can to line everything up. The answer is given in the answer section at the end of this lesson

John Gilson William Somebody
Pauline Johnson Collegiate 120 Somestreet
627 Colborne St. East Someplace, Somestate
Brantford, Ontario U.S.A. 45061
Canada, N3S 3M8

Answer:

John Gilson William Somebody

Pauline Johnson Collegiate 120 Somestreet

627 Colborne St. East Someplace, Somestate

Brantford, Ontario U.S.A. 45061

Canada, N3S 3M8

You can see from the above document why many people will use an alternate method such as tables (Lesson Twelve) to display information in columns.

Technology and Livelihood Education IV

(Information and Communication Technology II)

	Activity Sheet No. 16

Score

School		Year & Section
Name		Date

Activity Title:	CREATING A LIST
Learning Target:	Learn the types of lists and its uses

Lists are often used to present information in an easy to read fashion. Lists can also be used to indent information. Lists can be bulleted, numbered or printed without bullets and numbers. It should also be noted that in any type of list, you can still use the line break and paragraph tags and the normal text markup tags to emphasize text, etc.

There are three types of lists:

• UNORDERED LISTS (uses bullets)
• ORDERED LISTS (uses numbers)
• DEFINITION LISTS (no numbers or bullets).

Exercise:

1. What are the three types of lists and its uses?

Technology and Livelihood Education IV

(Information and Communication Technology II)

	Activity Sheet No. 17

Score

School		Year & Section
Name		Date

Activity Title:	CREATING AN UNORDERED LIST
Learning Target:	Create an unordered list

Unordered Lists are bulleted lists. You use the opening tag

to indicate the beginning of an Unordered List. To indicate the end of the Unordered List, you use the ending tag

. Furthermore, each item in your bulleted list must begin with the tag

.

stands for List Item. This is how you do it then:

• item
  
• item
  
• item
  

To see an unordered list in action, SWITCH to NOTEPAD and type in the following HTML document. When finished, save the document, SWITCH back to your browser and LOAD the document file so you can see it in action and also to experiment with the document by trying different things. NOTE: Once a document has been loaded into the browser, it is not necessary to choose FILE and then LOAD FILE each time you want to check how your document looks. If your document is already in the browser, then just click on the RELOAD button on the menu bar (assuming you have that option). This will reload your document so you can examine your updates. Now back to the task at hand. Type in the following HTML document which we will call document #1 as it will also be used later for ordered and definition lists.

This is document #1:

SAFETY TIPS FOR CANOEISTS

• Be able to swim
  
• Wear a life jacket at all times
  
• Don't stand up or move around
  
• Don't overexert yourself
  
• Use a bow light at night
  

All my examples are for illustration purposes only. They should not be considered complete lists. This is the way your document should look:

SAFETY TIPS FOR CANOEISTS

• Be able to swim
• Wear a life jacket at all times
• Don't stand up or move around
• Don't overexert yourself
• Use a bow light at night

Notice from the above results that:

1. denotes the beginning of an Unordered List
   denotes the end of the Unordered List
2. each
3. denotes the next item in the list to receive a bullet
4. the bullets are round and solid
5. each item in the list has been indented 3 or 4 spaces from the left side of the screen
6. no
tag is required - although you can use it to signal the end of each List Item. However, each new
7. implies that the previous List Item is finished.
8. no
   tag is needed as each new LI command forces a line break before printing the next item. Try experimenting with
   after a list item or a

   tag before a list item.

You can also have lists within lists (nested lists). For example, the following HTML web page (which we will call document #2) is the same as the last one, except that for the third item in the list, I have added some statements on what to do if the canoe tips. What to do if the canoe tips will form a second list of items within the first list. SWITCH to NOTEPAD and make the necessary changes so that the web page now looks like the following.
Document #2 is:

SAFETY TIPS FOR CANOEISTS

• Be able to swim
  
• Wear a life jacket at all times
  
• Don't stand up or move around. If canoe tips,

Hang on to the canoe

Use the canoe for support and

Swim to shore

Don't overexert yourself

Use a bow light at night

I indented the second list for emphasis. You don't have to do that. Here is the browser output for this web page.

SAFETY TIPS FOR CANOEISTS

• Be able to swim
• Wear a life jacket at all times
• Don't stand up or move around. If canoe tips,
• Hang on to the canoe
• Use the canoe for support and
• Swim to shore
• Don't overexert yourself
• Use a bow light at night

Notice that:

1. the second list was indented more than the first list
2. the second list also has bullets. In many browsers, they will be round, hollow bullets and not solid as in the first list, or they may be square bullets. For these browsers, if you have a third list, you will find the bullet changing to something else. Each time you move in a tier, the bullet style changes. Try it. In some low level and older browsers, the bullets will all be round no matter what tier you move to. This also illustrates the point that you must design your web pages on the basis of content and not solely on the basis of appearance. For example, if you want bullets, have them, and then let each browser handle how it will print them. If you still want square bullets for those browsers that can handle them, that's fine too. Just remember that browsers that can't handle them will simply print them their way.
3. for each
   tag, you need a
   tag. If you want lists within lists within lists, just remember to follow the LIFO principle (Last In, First Out principle or in this case the last
   tag activated must be the first tag terminated).

If you want to have your list line up more in the center of the page, the ALIGN="CENTER" command won't work as it would center each list item. Thus your list will not look very good. To move your bulleted list more to the center of the screen, simply use more

tags as in:

• List Items
  

Exercise:

1. Create an unordered list with five (5) items following the examples above.

Technology and Livelihood Education IV

(Information and Communication Technology II)

	Activity Sheet No. 18

Score

School		Year & Section
Name		Date

Activity Title:	CREATING AN ORDERED LIST (A NUMBERED LIST)
Learning Target:	Create an ordered list

An Ordered List is a numbered list where the numbers are in order beginning with the number 1. In other words, instead of using bullets, numbers are used to number each item in the list. You treat an Ordered List in the same way as an Unordered List, except that you use

instead of
. OL stands for Ordered List.

To see an ordered list, let's use document #1 and simply change the

tag to
and the closing

tag to . So SWITCH to NOTEPAD, load in document #1 and make the two changes so that the web page now looks like:

SAFETY TIPS FOR CANOEISTS

1. Be able to swim
   
2. Wear a life jacket at all times
   
3. Don't stand up or move around
   
4. Don't overexert yourself
   
5. Use a bow light at night
   

This is the way your web page should now look:

SAFETY TIPS FOR CANOEISTS

1. Be able to swim
2. Wear a life jacket at all times
3. Don't stand up or move around
4. Don't overexert yourself
5. Use a bow light at night

Notice the similarities here to that of the Unordered List in that:

1. denotes the beginning of an ordered or numbered list
   denotes the end of the ordered list
2. each
3. denotes the next item in the list to receive a number
4. the numbers are in sequence (in order) - hence the name Ordered List)
5. each item in the list has been indented 4 or 5 spaces from the left side of the screen
6. no
tag is required to end a list item.
7. no
   tag is needed to force a line break at the end of a list item.
8. With ordered lists, if you insert another item into the list, or if you delete an item from the list, the list will automatically be renumbered (try it).
9. A list item can take up more than one line. These nine items are an Ordered List and note that list items 8 and 9 take up more than one line and everything still nicely lines up. This is also true for Unordered and Definition Lists (studied below)

Exercise:

1. Create an ordered list with five (5) items following the example above.

Technology and Livelihood Education IV

(Information and Communication Technology II)

	Activity Sheet No. 19

Score

School		Year & Section
Name		Date

Activity Title:	COMBINING UNORDERED AND ORDERED LISTS\
Learning Target:	Combine unordered and ordered lists

We can combine unordered and ordered lists. To see this, let's use HTML document #2 where we had a list within a list. We will make some changes so that we will have a numbered list for the main items and a bulleted list for the items on "what to do if the canoe tips". Here is the revised document #2.

SAFETY TIPS FOR CANOEISTS

1. Be able to swim
   
2. Wear a life jacket at all times
   
3. Don't stand up or move around. If canoe tips,

Hang on to the canoe

Use the canoe for support and

Swim to shore

Don't overexert yourself

Use a bow light at night

Here is the browser output for this web page.

SAFETY TIPS FOR CANOEISTS

1. Be able to swim
2. Wear a life jacket at all times
3. Don't stand up or move around. If canoe tips,
• Hang on to the canoe
• Use the canoe for support and
• Swim to shore
4. Don't overexert yourself
5. Use a bow light at night

Notice in the output that the main list is numbered and the secondary list is bulleted.

Exercise:

1. Following the examples above, combine unordered and ordered lists.

Technology and Livelihood Education IV

(Information and Communication Technology II)

	Activity Sheet No. 20

Score

School		Year & Section
Name		Date

Activity Title:	CREATING A DEFINITION LIST (NO BULLETS OR NUMBERS)
Learning Target:	Create a definition list

A Definition List also manipulates text for you. Unordered Lists and Ordered lists are "single item" or "one tier" lists because each

creates one list item. A Definition List is a "two item" or a "two tier" list as you will see in the next example.

The following example illustrates a DEFINITION LIST and we will not use one of our previous examples for this. SWITCH to NOTEPAD and type in the following new document.

SUMMER CAMPING TRIP PLANNING

---

Winter

Write for maps and travel brochures

Read camping books

Prepare budget and equipment list

Spring

Visit camping shows

Buy essential items

Make reservations

Week Before Trip

Have vehicle serviced

Vaccinate pets

Buy traveler's cheques

Cancel newspaper and other deliveries

Day before trip

Load vehicle

When you execute this HTML document, it should look like the following:

SUMMER CAMPING TRIP PLANNING

Winter

Write for maps and travel brochures

Read camping books

Prepare budget and equipment list

Spring

Visit camping shows

Buy essential items

Make reservations

Week Before Trip

Have vehicle serviced

Vaccinate pets

Buy traveler's cheques

Cancel newspaper and other deliveries

Day before trip

Load vehicle

Note the following points:

1. DL stands for Definition List and

   denotes the beginning of a Definition List. It also tells the browser that a two item list or a two tier list is coming up.

2. denotes the end of a Definition List
3. DT stands for Definiton Term. It represents the set of first items in the list or the first tier. Each
   defines a new term in the list. Note that these terms are not indented.
4. The DT tag may only contain text-level elements (definition of text-level elements given below).
5. The DT tag has an optional end tag (), as it is always clear from the context where the tag's contents end.
6. DD stands for Definition Description. It gives the set of second items in the list or the second tier. Note that the second tier is indented from the first tier (although this is not a guarantee in all browsers) and that the second tier describes the items in the first tier. That is, the second tier is a description of the first tier.
7. The DD end tag () is also optional, as it is clear from the context where the tag's contents end.
8. DD may contain block-level elements as well as text-level elements. There are two types of elements in the BODY section of a web page and they are block-level elements and text-level elements. Elements that generate a new paragraph such as a header tag (for example

   ) or a paragraph tag (

   ), are called block-level elements. Text-level elements are elements that do not generate a new paragraph (examples are and ).

A DL is used to provide a list of items with associated definitions. Each item should be placed in a DT and its definition goes into a DD directly following it. If you are still confused, consider this brief explanation of the Definition List. Each

gives a term and each

describes or supports that term.

While it is legal to have a DL with only DT tags or with only DD tags, you are not encouraged to do this. It really doesn't make sense, for example, to have a definition without a term. Also, do not use the Definition List to indent a block of text. It is not good HTML form and indenting a section of text this way is not guaranteed to work. It is considered invalid HTML.

Exercise:

Here is a problem that will keep you busy for awhile. Be sure to try it though. There's nothing like learning by doing.

Problem: This problem involves all three types of lists (Unordered, Ordered and Definition Lists). Make up a document that will give the following web page in your browser. It looks rather long, but just start at the beginning and work your way slowly through it. The answer is given in the answer section.

FINDING YOUR WAY IN THE WILDERNESS

1. Seek expert advice about the area
• Get the best maps. On the map select
• landmarks
• mountains
• lakes
• Get a good compass and
• check slope of land
• check direction of flowing streams
2. If there is snow on the ground, stay close to:
• roads
• trails and
• waterways

If you are inexperienced

do not travel alone

do not travel at night

If you do get lost

Don't panic

Don't wander in the dark

Give distress signals at regular intervals such as:

· three shouts

· three small fires

· three blasts of a whistle

· three rifle shots

It may be wise to sit tight and wait for searchers

Answer:

This is how I did it. You may have found another way that yields the same results.

FINDING YOUR WAY IN THE WILDERNESS

1. Seek expert advice about the area
   
   
   
   • Get the best maps. On the map select
     
     
     
     • landmarks
       
     • mountains
       
     • lakes
       
     
     
   • Get a good compass and
     
     
     
     • check slope of land
       
     • check direction of flowing streams
       
     
     
   
   
2. If there is snow on the ground, stay close to:
   
   
   
   • roads
     
   • trails and
     
   • waterways
     
   
   

If you are inexperienced

do not travel alone

do not travel at night

If you do get lost

Don't panic

Don't wander in the dark

Give distress signals at regular intervals such as:

• three shouts
  
• three small fires
  
• three blasts of a whistle
  
• three rifle shots
  

It may be wise to sit tight and wait for searchers

Technology and Livelihood Education IV

(Information and Communication Technology II)

	Activity Sheet No. 21

Score

School		Year & Section
Name		Date

Activity Title:	CHANGING THE STYLE OF YOUR BULLETS AND NUMBERS
Learning Target:	Change bullet and number style

The TYPE attribute

You can use the TYPE attribute to control the "appearance" of the bullets and also to control a numbered list. The TYPE attribute was originally a Netscape extension and new to HTML 3.2. It is now supported by all browsers.

CHANGING THE APPEARANCE OF BULLETS

Here is the way to change your bullets to SQUARE bullets:

• item 1
  
• item 2
  
• item 3
  

If your browser supports the TYPE attribute, you should see the following square bullets. If your bullets are not square, then your browser does not support the TYPE attribute. Note that the value "square" is written in lowercase letters. The TYPE attribute will not work if it is written in uppercase letters.

• item 1
• item 2
• item 3

You can also change the appearance of your bullets to hollow or open bullets with:

To get the round solid bullets back again (which is the default value), use:

CHANGING THE APPEARANCE OF AN ORDERED LIST

We can also change the ordered list to something other than Arabic numbers (1, 2, 3, etc.). For example, to change to a capitalized Roman Numeral numbered list, it is:

1. item 1
   
2. item 2
   
3. item 3
   

Note that the "I" is a capital or upper case "I" and not the number 1. The above example will give the following output in the browser:

1. item 1
2. item 2
3. item 3

The following replacements for the numbered list can also be made:

for lower case Roman Numerals (i, ii, iii, iv, and so on).

for capital letters (A, B, C, and so on).

for lower case letters (a, b, c, and so on).

Note that

(the number 1) is the default for listing the items as 1, 2, 3, and so on.

The START attribute

The START attribute like the TYPE attribute is new to HTML 3.2 and so do not assume it will work for your website visitor.

The START attribute is used to begin an Ordered List with any number or letter. For example,

as in:

3. item 3
   
4. item 4
   
5. item 5
   

will begin numbering the list with the number 3 as in:

3. item 3
4. item 4
5. item 5

Also, try the following if your browser supports these attributes:

will begin numbering with Roman Numeral III.

will begin numbering with Roman Numeral iii.

Exercise:

Problem 1: What do you think

will do to the list?

Problem 2: What will

do to the list?

Answer:

1. The list will begin with the letter "D" (as in D, E, F, etc.).
2. The list will begin with the letter "e" (as in e, f, g, etc.).