Web Development I - Page Content Elements

Lists
You can create lists on your page that will automatically add the number or bullet. A
numbered list is called an ordered list and the tag is <ol>. Your list items will use the tag
<li>, like this:

<ol>
<li>first list item</li>
<li>second list item</li>
<li>third list item</li>
</ol>
The default type is a numbered list, but you can change that to letters or roman
numerals with the type attribute. Inside your opening tag, place the type attribute with
the value you want in quotes, like this: <ol type="A">. Capital "A" will give you capital
letters and lowercase "a" will give you lowercase letters. Roman letters are done with
"I" for upper case and "i" for lowercase.
If you prefer to use bullets, that is called an unordered list which uses the tag <ul>. You
can also nest lists within lists. Most browsers will automatically indent the inner list and
give unordered lists a different style bullet. Ordered lists can be nested as well, but you
will need to specify the type on each. Those are useful for outlines and tables of
contents.
A third type of list is the description list <dl>. This is used less frequently than <ol> and
<ul>, but can still be beneficial. A common use of description lists is for definitions. You
may see it called a definition list in some reference material. This type of list does not
use the <li> tags, but two others instead. The first is the <dt> description term and the
second is <dd> description definition. This will look like:
<dl>
<dt>Description list</dt>
<dd>A description list is used to provide descriptions of terms, such as
definitions</dd>
<dt>Ordered list</dt>
<dd>An ordered list is a list of items in order with numbers or letters</dd>
<dt>Unordered list</dt>
<dd>An unordered list is a list of items with bullets</dd>
</dl>

In your browser it will look like:

Web Development I - Page Content Elements

Linking to external files

External style sheets are files that tell the browser how our pages should look. These
are done with CSS. HTML focuses on the content, while CSS focuses on the style. We
will work on creating our own stylesheets in Week 4, but so that our pages aren't so
plain now, we will link to existing style sheets. To link a page to an external file you will
use the <link> tag. Note that this links a file to the page; it is not a hyperlink to another
page or website. It will look like:
<link href="filename.css" rel="stylesheet" />
The rel attribute indicates the relationship between your file and the linked file. The
attributes can go in any order inside the link tag. Make sure each value is in quotes.
You may also see type="text/css" as one of the attributes. This is an old requirement
and is no longer necessary. Your link will work with or without it.
To link to a JavaScript file you use:
<script src="filename.js"></script>
The type attribute is also no longer required for the JavaScript link. We will not write our
own JavaScript in this class. If you are interested in JavaScript, that is covered in
IS306. That class uses the second half of our book, so you can look ahead if you like,
but I recommend waiting until you have HTML and CSS covered.

More semantics
Last week we discussed using semantic elements rather than generic ones. Here are a
few more times in which you should use semantic elements at text-level, which is within
other elements. A couple different tags will give you bold font, but bold may not tell a
blind user with an audio web reader very much. Using <strong> instead of <b> gives
better information. Mobile devices may display differently too, as small screen
resolutions may not be well-suited to some features. Bold text may be difficult to read,
so <strong> may display as an underlined word instead. Italics is another one that
should be more descriptive. If you are using italics to emphasize text, use <em> as an
alternative to <i>. It will display the same to typical users, but will tell a blind user that
 Web Development I - Page Content Elements
you intend the emphasize the word. If you are using italics in a citation, use <cite>
instead to designate its purpose. Putting <abbr></abbr> tags around an acronym will
tell a browser to read it as an abbreviation rather than trying to pronounce it as a word.
This might be important if you are discussing something like RAM versus a ram. There
is a good list of text-level elements on page 45 of your text.

Images
You may remember empty elements like a <br /> tag from last week. They are called
empty elements because they have no content and no closing tag. But some empty
element tags can have attributes within them. Therefore, some people prefer to call
them one-sided tags. You may hear both terms. One such empty element that can
have a lot inside the tag is an image element. These often look like:
<img src="filename" alt="text" height="value" width="value" />
The alternate text is used in browsers for the blind so they know what is in the picture.
It may also display on standard browsers as a placeholder if a page is loading slowly, or
if the image fails to load at all. Height and width are optional, but are typically included
so that web designers can control the size of the image. Without them, the image size
defaults to the size of the original image.

Absolute measures

in inch

cm centimeter

mm millimeter

pt point 1/72 of an inch

pc pica 1/6 of an inch

px pixel one dot on the screen

With all heights and widths it is a good idea to use units of measure. There are several
you can use. Absolute measures are the same size on every screen. These include
inch, centimeter, millimeter, point, and pica. Since these are the same on every screen,
you might like to use them for consistency. But a site that appears the same way on the
largest of desktops and the smallest of phones will not work well for one or both of
them. The most likely time for you to use absolute measurements is if you create a
printable version of a page.
Web Development I - Page Content Elements
Relative measures

em size relative to the font used on the

page

% adjusts to fill the percentage of

container

Pixels are sometimes included on both lists. Pixels are the teeny little dots on a user's
screen. You may have been asked to set the resolution on your monitor and were given
choices that look like 1280 X 600. This is the number of pixels on your screen. Users
can set the number of pixels on their screens to display more or less depending on their
preferences. Setting your web page sizes to pixels will adjust to whatever settings the
user has chosen for their computer display. However, it will not size up for visually-
impaired readers nor scale down for phone screens. The default unit of measure is
pixel, so if you leave off your unit of measure, the browser will use pixels.
It is better to use true relative measures. These are sizes that are relative to something
else on the viewer's screen. One relative measure is em. This sets everything in
relation to the browser's default font size. If a user has a browser that is set to large
print, it adjusts everything accordingly. Percents are also relative measures. These
adjust to fill the percentage of the container they are in. So if you have an image set to
a width of 100%, it will go all the way across the page. And if you resize the browser
window, the image resizes with it to go across 100% of the new size. This is even more
important for phone screens. Using relative measures prevents users from having to
scroll around so much. Percents can also be used to in relation to the size of the table
or other container the element is in.

Special characters
You have probably noticed that we use a lot of special characters in our markup. But
what do you do when you want to use one of these in the text itself? You will need to
use special character codes for these. Characters have a code number and many also
have a code name that is easier to remember. Both start with an ampersand and end
with a semicolon. For example, if you want to use a < in your text and you don't want
the browser to read it as the start of a tag, you can use &#60; or &lt;. lt is for less than
which is easier to remember than the number. Here is my favorite list of special
characters. It includes everything from math symbols, to punctuation, and even some
emojis.