How to
Make Kehilalinks Pages
Lists and Special Characters
Introduction
In this short lesson we'll finish learning about text in web pages.
One thing that we'll cover is how to insert special characters, like
the copyright symbol (©) and other characters that you often won't
find on your keyboard. The other thing we'll learn about is numbered
and bulleted lists, which are similar to lists in word processing
software.
Special Characters
There are many special character symbols in the International
Standards Organization (ISO) iso-8859-1
character set (used by default in Composer and supported by
all web browsers) that don't appear on many keyboards, so we can't
directly type them. Most keyboards, for example, don't have keys for
special characters like the copyright symbol (©), certain
mathematical symbols (e.g., ±), and various other symbols. Depending
on your geographical location and the language spoken there, your
keyboard may have keys for some symbols but not others. The standard
U.S. keyboard, for example, does not have keys for entering accented
letters (e.g., á, â, ḁ, ẳ). Composer has a feature that lets you
insert some special characters like this. Select
Insert -> Characters and Symbols
to open the "Insert Character" window. This window allows you to
insert various accented letters (uppercase and lowercase), plus a
few letters from non-latin alphabets. These are all the special
characters that are defined for HTML using this character set.
One reason to use special symbols is to show latitude and longitude
using the correct symbols. For example, the latitude and longitude
of the town of Kovel in Ukraine is 51°13' 24°43'. The degree symbol
(°) is one of the symbols that you can insert using this feature of
Composer. You can find it under the "Common Symbols". Click in the
circle next to where the Insert Character window says "Common
Symbols" and the degree symbol will then be one of the characters in
the drop-down "Character" menu.
To insert a special character, select the character and then click
the "Insert" button. The "Close" button will close the "Insert
Character" window.
There are many special characters that are not in one of the
categories supported by Composer -- Hebrew letters, for example.
We'll learn how to insert those in a later lesson.
Lists
A list, according to my dictionary, is a series of names,
definitions, numbers, etc., set forth in order. Lists are an
excellent method of organizing information on a web page because
they can be laid out in a way that is much easier to read and
understand than text in a paragraph. HTML provides three basic
types of lists:
- Numbered lists. This is an example of how a
numbered list looks. The text is indented and a number
appears to the left of the text for each list entry.
Numbered lists are also called "ordered lists," because, if you
need to number the list entries, you probably want them in a
particular order.
- Bullet lists. Like numbered lists, bullet
lists have all the text indented with some kind of marker to the
left of each list item. The difference, as you can see, is
that a simple dot, circle, or square, instead of a number, marks
each list entry. Bullet lists are also called "unordered
lists."
- Definition Lists
- This is an example of a definition list. For each list
entry there is a term that is left-aligned, and a definition
that is indented. I bold-faced the description term here
to be consistent with how I bold-faced "numbered lists" and
"bullet lists" above, but normally the term will be in the
default text style and font unless you explicitly use a
different style or font.
Composer doesn't always handle lists in what I consider to be a
consistent way. This problem is not uncommon with WYSIWYG web page
editors, unfortunately, and it arises from the complexity of the
underlying HTML. Inconsistency means that the way lists work
can be quite different depending on the exact order that you insert
and delete text in a list. It also makes lists difficult to
explain because you might do things in a slightly different order
than I do them and, if you diverge from my instructions here, even a
little bit, your results may be different from mine. The best
that I can do is give you an introduction to how lists work, and let
you discover for yourself how best to make them work for you.
Numbered Lists
We will need a web page to practice on for this lesson. Go
ahead and open up a new web page in Composer. As you will
recall from the last lesson, in the SeaMonkey browser window select
File -> New -> Composer Page
which opens a composer window with a blank web page.
On the Format Tool Bar, do you see these two symbols that we
didn't use in the last lesson?
They appear between the underline button and
the decrease indent button. These are the buttons for
creating, from left to right, bullet lists (three small circles to
the left of three short lines) and numbered lists (the numbers 1,
2, and 3 to the left of three short lines). We will now
learn how they are used.
In the Composer window, type the following list of color names
with line breaks between them:
red
orange
yellow
blue
indigo
violet
Now select all of the color names (i.e., highlight them by
clicking the mouse at the left of the 'r' in "red" and dragging
the mouse until everything is highlighted through the closing 't'
in "violet") and click on the number list button. You should
see each line turn into an entry in a numbered list. The
list will also be indented from what it was before.
- red
- orange
- yellow
- blue
- indigo
- violet
Those of you who recognize that these are colors of the rainbow have
also noticed that we have left out the color green, which should go
between yellow and blue. In the Composer window, click just
after "yellow" (i.e., move the blinking cursor there) and insert a
line break (i.e., press the "return" or "enter" key). Composer
should automatically create a new, empty numbered list entry for
you. You should also see that the browser has correctly increased
the numbers after the new line.
- red
- orange
- yellow
- blue
- indigo
- violet
Type the word "green" in the empty line and browse the page (don't
be surprised when Composer prompts you to give the page a name and
save it before you can browse it, like in the previous
lesson). You have now successfully entered a new list entry.
Let's say that, after creating a list, you want to enter some
new, non-list text beneath the list. Try this by moving the
cursor to after the word "violet" and insert a line break.
You should see that Composer has created a new list item, which we
don't want. To get out of list mode, click once on the
numbered list button. Composer will create an empty line and
put the cursor on the next line below the empty one, with no list
marker. Type "this text is outside of the list."
What you have done by clicking on the numbered list button is tell
Composer that you are completely finished with the list, so the
next text you entered was not indented or numbered.
If you want to put two lists on your page, one right after
another, be sure to have at least one non-list line between the
lists. Otherwise, Composer will attempt to merge the
lists. (Try this out yourself.)
There is a way to set both the numbering style (i.e., roman
numerals, letters, etc.) and the starting number, that we will
cover near the end of this lesson.
Bullet Lists
The button for bullet lists works exactly the same way as the button
for numbered lists. Press the enter key twice to create a
blank line after "this text is outside of the list," and then type
these words separated by line breaks:
every
good
boy
does
fine
Now select all the lines of text that you just typed and click on
the bullet list button.
Practice inserting and deleting list entries. Also select
an entire list and try clicking on the numbered list button and
then the bullet list button, and notice how you can change an
entire list from one style to another.
The specific symbol that marks a bullet list item will vary
depending on which browser you are using and if the list is nested
inside another list. DO NOT, as I cautioned in the
last lesson, be tempted to use one of the picture fonts (e.g.,
Zapf Dingbats or Wingdings) to create bullets in your pages.
I've seen more than one web page where someone did this, and their
bullets appeared on my screen as letters in various
alphabets. Near the end of this lesson you will learn how to
have some control over what the bullets look like.
Nesting Lists
Sometimes you will want to nest lists -- put sub-lists into a list,
even mix bullet lists with numbered lists. For example:
This is easy to do in Composer by adjusting the indenting of list
items. For the example above, I selected "good" and then indented it
(by using the indent text tool button). That made "good" a sub list
under "every". Then I did the same thing with "boy". Do you notice
how the bullets for the sub list are different? On my Windows
computer in the SeaMonkey browser, the first level list items have a
solid black, round bullet, while the sub list items have empty
circle bullets. As you increase the indenting, the shape of the
bullets changes:
I can also do this:
(I selected both "good" and "boy" and used the numbered list tool.)
Try creating nested lists of both types.
Once more, just as a reminder in case you have forgotten, be sure to
browse the page to make sure that the browser displays it the way
you think it should be displayed. Try viewing the page in different
browsers to see if the lists display differently.
Some Annoyances
and How to Fix Them
As I mentioned earlier, Composer doesn't always handle lists in a
consistent way because it gets confused and generates the wrong
HTML.
For example, here I have indented "good" more than I indented
"boy":
When I try to decrease the indent of "good" back to being the same
as that of "boy", Composer won't let me! (In fairness to Composer, I
did many other things to confuse Composer and get this to happen, so
you may not be able to replicate this example unless you open this
lesson page in Composer yourself and try to decrease the indent.)
To fix this problem, I select the entire list and clicked on the
bullet list tool, which caused Composer to remove all the list HTML:
every
good
boy
does
fine
Then I use the bullet list tool and indent tool to put things back
where I wanted them:
If this kind of thing ever happens to you, you can fix the problem
by selecting the entire list and clicking on the list tool to take
away the bullets (or numbers). When you change a list into regular
text, Composer removes all of the HTML that makes the list,
including the HTML that confused Composer.
Definition Lists
Definition lists are not quite as simple to make as numbered and
bullet lists. That's probably why there is no tool button for them
in the tool bar. To make a definition list, first type in all the
terms and list items that you want in the list on separate lines,
first a term, then it's definition, then another term, etc., as in
the following example:
First term
This is the definition of the
first term.
Second term
This is the definition of the
second term.
Now select the entire list -- all the terms and
definitions -- and then
Format -> List -> Term
This will probably add a blank line above and below the list
because Composer is now aware that you want that text to be a list,
but it thinks every line is a term. Now select just the one line
that contains the definition of the first term, then
Format -> List -> Definition
This should indent the definition that you selected.
- First term
- This is the definition
of the first term.
- Second term
- This is the definition
of the second term.
Doing the same thing for the second description gives us a complete
description list:
- First term
- This is the definition
of the first term.
- Second term
- This is the definition
of the second term
Try making a definition list of your own in Composer. (Or just skip
the whole thing if you think definition lists are just too much
trouble.)
Inserting Line
Breaks Into Lists
You have probably noticed by now that each time you press the enter
key while typing a list, Composer assumes that you want to begin
another list item. But, what if you simply want to insert an
empty line? For example, you might want to have a list item
that consists of multiple paragraphs. How can you do this if
Composer interprets every press of the enter key as a new list
item? This problem is not limited to lists alone. There
are many cases in Composer where it does not interpret your pressing
the enter key as a line break.
Recognizing this problem, Composer has a feature that let's you
explicitly insert a line break wherever you need one. To
insert a line break, simply hold the Shift key down while you
press the Enter
(or return) key. This is a "soft return", which does not
end a paragraph like a hard return does.
Try this in any of the lists that you created earlier in this
lesson. Move the cursor to after any of the list entries and
press the enter (or return) key, and you will get a new list
item. But, if you move the cursor after a list item and
instead insert a soft return using Shift+Enter, you get a new
line without a new bullet or number. The line is still part
of that list item, however, and so it will be indented. Here is
what it looks like:
- red
This is an example of using Shift+Enter in a list
item.
- orange
- yellow
- green
- blue
- indigo
- violet
Numbering and
Bullet Styles
Composer lets you change the numbering style of a numbered list, or
the bullet style of a bullet list. To do this, click anyplace in a
list and select Format -> List -> List
Properties
You will have the option of changing the list type, but also
of changing the numbering type or bullet type. You can also change
just the list item you clicked on or the entire list. For example, I
can change the example list above to use Roman numerals:
- red
This is an example of using Shift-Enter in a list
item.
- orange
- yellow
- green
- blue
- indigo
- violet
Or I can change it to a bullet list with open circles for the
bullets.
- red
This is an example of using Shift-Enter in a list
item.
- orange
- yellow
- green
- blue
- indigo
- violet
"Final" Word on
Lists
You may sometimes get confused when using lists in Composer because
Composer is so sensitive about the exact order that you do
things. The way that Composer displays lists will seem
inconsistent at times, and you may wonder just how you can get the
program to do what you want it to do. The seemingly
inconsistent behavior is due to different HTML commands, and
different orders of HTML commands, that Composer is generating as it
tries to guess what it is that you want the web page to look
like. With patience, however, you should be able to make
the lists look like you want them to. As you work with lists
you will no doubt discover new combinations of commands that will
give you even more effects than I have introduced here. And, of
course, if you mess up a list, you can just remove all of the list
formatting and start over.
Assignment
Try adding lists and special characters to your Kehilalinks page (if
you haven't already added the degree symbol "º" in the latitude and
longitude, you can do that now). Remember to view your page in
SeaMonkey and at least one other browser. It would also be a good
idea to start getting in the habit of varying the size of the
browser window as you view your page, to make sure you haven't
inserted extra line breaks or other, extraneous formatting.
I've added a list to my Kehilalinks page for Kamen Kashirskiy and a
copyright symbol:
kc-2.html
Be sure to save the web page that you make, as we
will use it again in the next lesson. Remember
to use the filename "index.html" (or "index.htm") for your saved
file.
Copyright © 2009, 2010, 2012, 2013, 2014, 2016 Mark
Heckman. All rights reserved.