Day #6, Part 1: Lists

Create a new HTML file called Day06.html.

HTML: Unordered Lists

Elements in an unordered list are marked with bullets. An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

Example

Copy the following to your HTML file.

li>George Washington</li>

li>John Adams</li>

</ul

HTML: Ordered Lists

Elements in an order list are numbered. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

Example

Add the following to the bottom of your HTML file.

li>George Washington</li>

li>John Adams</li>

</ol

Example

An ordered list can be continued. Add the following to the bottom of your HTML file.

Stuff in between…

ol start="3">

li>Thomas Jefferson</li>

li>James Madison</li>

</ol

HTML List Tags

Tag / Description
ol / Defines an ordered list
ul / Defines an unordered list
<li> / Defines a list item

Nested Lists

You can put a list inside of a list. This is comparable to using the "increase indent level" in Word.

Example

Copy the following to the end of your HTML file.

First two presidents:

li>George Washington</li>

li>John Adams</li>

</ol

</li>

Next two presidents:

ol start="3">

li>Thomas Jefferson</li>

li>James Madison</li>

</ol

</li>

</ul

Definition/Description Lists

A definition list (HTML4), or a description list (HTML5) is used to create a list of terms and their definitions.

Example:

dtComputer</dt

ddAn instruction follower.</dd

dtWeb server</dt

ddA computer/program that provides web pages to a client.</dd

</dl>

Definition List Tags

Tag / Description
<dl> / Defines a definition list
dt / Defines aterm in a definition list
dd / Defines a description of an item in a definition list

CSS Formatting for Lists: Changing the bullet

By default, you get a black disk when you create an unordered list. You can change this using the list-style-type property in the CSS file. Common values for the list-style-type property are: disc, circle, square, none.

Example

Create a <style> element in the top of your HTML file. Then try each of the following. Note that disc is the default, so adding it does nothing.

ul { list-style-type: disc; }

ul { list-style-type: circle; }

ul { list-style-type: square; }

ul { list-style-type: none; }

Images as bullets

If you want to use your own graphic image for a bullet, use the list-style-image property in the CSS file.

ul {list-style-image: url("

Note that this image is inherited by the <ol> that is a child of an <ul>!

Source of free bullets:

Formatting Lists: Changing the numbering system

By default, you get Arabic numbers when you create an ordered list. You can change this using the list-style-type property in the CSS file. Common values for the list-style-type property for an ordered list are: decimal, decimal-leading-zero, lower-alpha (also lower-latin), upper-alpha (also upper-latin), lower-roman, upper-roman.

Example

Try adding the following, one at a time, to the bottom of your <style> element.

ol { list-style-type:decimal; }

ol { list-style-type:decimal-leading-zero; }

ol { list-style-type:lower-alpha; }

ol { list-style-type:upper-alpha; }

ol { list-style-type:lower-roman; }

ol { list-style-type:upper-roman; }

Formatting Lists: Changing the alignment

The indentation between the left margin of the page and the bullet/number is a property of the list (either ul or ol). To set this, use the padding-left property in the CSS file.

Example

Add the following to the bottom of your <style> element.

ol { padding-left: 5em; }

The space between the bullet/number and the text that follows it is a property of the list items (li). To set this, use the padding-left property in the CSS file.

Example

Add the following to the bottom of your <style> element.

li { padding-left: 10em; }

Formatting Lists: Positioning Bullets and Numbers

There are two options for displaying the bullets or numbers, and the options are specified using the list-style-position property. Its two values are inside and outside.

Example

We need some text for our bullet items that is more than one line long. Add the following to the bottom of your HTML.

<ul

<li>Four score and seven years ago. Four score and seven years ago. Four score and seven years ago. Four score and seven years ago. Four score and seven years ago. Four score and seven years ago. Four score and seven years ago. </li>

</ul

<ol

</ol

Add the following to your CSS rules. Then preview your HTML file in the browser.

ul, ol {list-style-position:inside;}

Change inside to outside and preview your file again. Note that outside is the default.

ul, ol {list-style-position:outside;}

Links

HTML: The <a> Tag

The simplest format of the <a> tag is:

The <a> tag has four attributes:

href: a relative or absolute URL
title: a description that is displayed as a tool tip
tabindex: sets the tab order for links, beginning with 0. To remove a link from the tab order, give it a negative value.
accesskey: identifies a keyboard key that can be used to activate the control, in combination with the ALT key.

The href attribute can be absolute or relative:

Absolute:
Relative: docs/stuff.html
Relative: ../docs/stuff.html

Example

Add the following code to your HTML file body.

<p<a href=" title="BCU" accesskey="b">BCU</a</p>

<p<a href=" title="Google" accesskey="g">Google</a</p>

<p<a href=" title="Yahoo" accesskey="y">Yahoo!</a</p>

You should see tool tips for each hyperlink and alt+b should take you to BCU's web site, alt+g should take you to Google's web site, and alt+y should take you to Yahoo's web site.

Image links

A picture can be a link.

Example

Add the following to the bottom of your HTML file. This uses the Google image as the link to go to the Google home page. It also provides the tool tip "Google" (title attribute).

<p<a href=" title="Google"<imgsrc=" alt="Google"</a</p>

When coding images, always include the alt property for accessibility.

Email links

To create an email link, use mailto followed by the desired email address. To fill in the subject, cc, bcc, and body fields, follow the email address with a question mark followed by name/value pairs that are separated by ampersands (&).

Example

Copy the following to the bottom of your HTML file.

<p<a href="mailto:?subject=EmailLinkDemo&cc=&body=Hi!">Email Tom Kleen</a</p>

Note that you will get a warning from NetBeans if you put blanks in the subject line. You can get rid of the warning if you use &20 instead of the blanks.

<p<a href="mailto:?subject=Email%20Link%20Demo&cc=&body=Hi!">Email Tom Kleen</a</p>

Opening a link in a new window/tab

To open a hyperlink in a new window or tab (depends on your browser settings), use the target attribute and set it to the value _blank.

Example

Add the following to the bottom of your HTML file.

<p<a href=" target="_blank">BCU</a</p>

Whether the page opens in a new window or a new tab depends on your browser settings.

Linking to a placeholder (bookmark)

To link to a location on the same page (or in the middle of another page), you must first create a placeholder and then create a link to the placeholder.

To create a placeholder, just add an id property to the <a> tag.

Example

Add the following to the top of your HTML file.

<h1 id="top">Heading 1</h1>

To branch to a placeholder on the same page, just use the id with a pound sign in front of it. To link to a placeholder on another page, use the URL followed by a pound sign and the placeholder id.

Add the following to the bottom of your HTML file.

<p<a href="#top">Jump to top</a</p>

<p<a href="

Linking to media files

To link to a media file, give the name of the file as the value of the href property, and add the type property with one of the following values (there are others, but these are some of the most common):

For PDF files: application/pdf
For WAV files: audio/x-wave
For MP3 files: audio/mpeg
For MPG files: video/mpeg
For Flash files: application/x-shockwave-flash

For a complete list of Internet media types, see Wikipedia.

Example

Add the following to the bottom of your HTML file. It will display a PDF file in a new window.

<p<a href=" type="application/pdf" target="_blank">Here's a PDF file.</a</p>

Add the following to the bottom of your HTML file. It will play a WAV file.

<p<a href=" Data--Audio/HelloBaby.wav" type="audio/x-wave" target="_blank">Here's a WAV file.</a</p>

Add the following to the bottom of your HTML file. It will play an MPG video file.

<p<a href=" type="video/mpeg" target="_blank">Here is an MPEG video.</a</p>

CSS for <a>

CSS: Formatting links: Anchor pseudo-classes

Anchor Pseudo-classes can be used to display links in different ways.

Links can be displayed in different ways in a CSS-supporting browser:You can use the following CSS "pseudo-classes" to format your links:

a:link {color:red;} /* unvisited link. Default is blue. */
a:visited {color:green;} /* visited link. Default is purple. */
a:hover {color:purple;} /* mouse over link. Purple. */
a:active {color:blue;} /* selected link. Default: red underline. */
a:focus {color:yellow;} /* a link with the focus. */

A pseudo-class is similar to a class in HTML, but it’s not specified explicitly in the markup. Some pseudo-classes are dynamic—they’re applied as a result of user interaction with the document.

A pseudo-class starts with a colon (:). No whitespace may appear between a type selector or universal selector and the colon, nor can whitespace appear after the colon.

Note:a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

Note:a:active MUST come after a:hover in the CSS definition in order to be effective!!

Note:Pseudo-class names are not case-sensitive.

CSS: Removing underlines and borders

There are two properties for removing underlines and borders:

text-decoration: to remove underlining, set to none.
border: to remove the border from an image link, set to none.

Example

a:hover { text-decoration:none; font-size:125%;}

The <nav> tag

"The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links." (w3.org)

HTML/CSS for Navigation Lists (vertical)

Example

Add the following to the bottom of your HTML file.

<h1>Navigation List</h1>

nav id="nav_list">

<li<a href=" >Yahoo</a</li>

li<a href="

</ul

</nav

And add this to your CSS <style> element.

#nav_listul{

list-style: none; /* removes the bullets */

margin-left: 1.25em;

margin-bottom: 1.5em;

}

#nav_list li {

width: 200px;

margin-bottom: .5em;

border: 2px solid blue;

}

#nav_list li a{

display: block;/* makes entire block clickable */

padding: .5em 0 .5em 1.5em; /* provides space around the link */

text-decoration: none;/* removes the underline */

font-weight: bold;

color: blue;

}

#nav_list a:hover {

background-color: #00FF00;

}

HTML/CSS for Navigation Bars (horizontal)

Example

Add the following to the bottom of your HTML file.

<h1>Navigation Bar</h1>

nav id="nav_bar">

<li<a href=" >Yahoo</a</li>

li<a href="

</ul

</nav

Then add this to your CSS <style> element.

#nav_barul{

list-style: none; /* removes the bullets */

padding: 1em 0; /* above and below */

background-color: blue;

}

#nav_bar li {

display: inline;

}

#nav_bara{

padding: 1em 2em; /* provides space around the link */

text-decoration: none;/* removes the underline */

font-weight: bold;

color: white;

border-right: 2px solid white;

}

#nav_bar a:hover {

background-color: #00FF00;

}

NOTE: The value of the display attribute must be inline. It cannot be block if you want a horizontal bar.

9/27/2018Day06Ch07--Lists,Links.docxPage 1 of 11