CIS89A - 4. Lists and Links

From WikiEducator
Jump to: navigation, search

Mir - February 1995

List and Links

Lists are everywhere. Space isn't a problem on the web and much of the information on the web is text. Using lists for text increases readability and helps viewers skim text for what they are looking for.
Linking - the ability to embed hyperlinks in pages, is one of the most significant features of the web. The idea that a viewer could click on a word or a picture and immediately be taken to another page that provided additional relevant information was revolutionary.

Learning outcomes

  • use each of the list types in a web page
  • combine list types
  • use customized list formatting
  • add links to other web pages
  • add links to sections within the same web page
  • add links to email address


  • ordered, unordered, definition, style
  • absolute, relative, section, anchor, email address, downloadable file, style link, default color, tab order target window

Reading guide

  • What are the types of lists available?
  • How can list appearance be altered?
  • What are some of the customizations that can be added to list appearances?
  • What is a relative link?
  • What is required for the mailto link to initiate an email?


Coding project title and required elements

  • cis89Listslinks - a, href, #, id (replaces name), link title text, top, mailto, subject, target, _blank, visited
  • links within the page, top, links to external web page, opens in new window, opens in same window, link changes color after being visited, link changes color when mouse hovers over link, title displays when mouse hovers over link, maito: special link with subject provided
  • li, ol, ul, dl, type, i, A, dt, dd * ordered lists with 2 different numbering, un-numbered lists with 2 different bullet types, nested lists, definition list used appropriately * .css - customized bullets (list-style-image)

  1. Review the Keywords and Reading guide questions at the top of this page. These will help you look for important ideas in the rest of assignments for this module.

  2. Read Chapter 7. How to work with lists, links, and navigation menus

  3. Read 2-3 of the Lists and Links media.

  4. Lists and Links - Open a new coding project. Collect all the links that you selected for previous assignments and add them to this project html file. Use all the link elements and tags to provide links to the sites, to your other projects and headings within this html file.
    Check the Email HTML Code tool for help with the mailto link.
    AND use the assignment elements and tags to format lists. Use all the elements and tags within your project. Include an example of customized bullets (list-style-image).
  5. Review the grading rubric in the Lists and Links assignment. Compare your work with the grading criteria. Do you understand the criteria and how your coding project will be evaluated? Any questions about the rubric and the grading process?
  6. Check your work. Use a HTML code validators such as HTML Validator to check the code you have written. Just copy your HTML code and paste it into the textbox in the online form.

  7. Submit the link to your coding project to the Lists and Links assignment. Include any questions or comments you have about the rubric and the coding project evaluation process.
  8. AND Post a link to your project along with your comments and questions about this assignment to the Lists and Links discussion.

  9. Review the work of 2 others - the page display and the source code. Post a note with links to those projects, and a brief description of your observations - anything that you learned from looking at these? Any ideas you have for using in your own work in the future? Post to the Lists and Links discussion.

  10. Voyager public web page - If you do not have a Voyager account from another DeAnza CIS course this semester, you need to set it up. The instructions are provided CIS89A Voyager FTP If you have questions, ask as a post in the Link to Voyager discussion topic.

    Set up your Business/Computer Systems Account - If you haven't done this already, see Accessing Your Computer Account for more information. Enter your Campus Wide ID and birthdate (for security reasons!!). Following the lab agreement, click the checkbox to confirm and proceed. This will create a DeAnza Windows account.
    If your account has been successfully created, please close your browser. You need to wait at least 5-10 minutes to use your new account.
    Then Set up your DeAnza Voyager account. You will also be saving work to the DeAnza web server Voyager, so you will need a Voyager account as well. Use the same username and password to login to Voyager.

  11. If you already have a Voyager account, or once you have created your Voyager account, create a simple HTML file and upload it to the public_html directory in your Voyager account. This must be a text file with the type .htm or .html. You can copy the HTML from Glitch, but check that you are creating a new text file on your own computer.
    There are several ways to transfer files to Voyager. You can use any ftp application or web page development tool that provides file transfer to move your page source text file from your computer to your Voyager public_html directory.
    Note: some functions work fine with either http: or https: in the web address. Other sites will work with one but not the other. Try each one if you are having problems.

  12. FTP - For pages hosted on Voyager, transfer the HTML code text file with suffix .htm or .html to your Voyager public_html directory. Voyager is an SFTP server. To connect Voyager, enter the address s into the host field.

    FileZilla (recommended) is open source software distributed free of charge under the terms of the GNU General Public License. FileZilla documentation including tutorials are available.
    Also see CIS89A Voyager FTP instructions. Instructions for downloading a different FTP application - Putty (PCs only) are included in the Voyager instructions .pdf. You only need one of these FTP applications.
    NOTE: Make sure the File protocol is "SFTP" otherwise you will not be able to connect to the server.

  13. Post a link to your web page in your Voyager account to Link to Voyager discussion.
    example :
    ~username is a shortcut to your public_html directory in your Voyager user directory. username is always all lowercase. To access your web page files stored on Voyager - just http:// (not https://)
    Submit the Voyager page web address to the Voyager web page address assignment.

    NOTE: Throughout the course there are a number of discussion activities that require research and comments. These are important because they address topics that web developers need to know about. And you should be critically examining the site designs, layouts and usability. We will be look at site evaluation criteria in more depth later in the course. For now use this evaluation criteria to guide your review of the sites you visit. In your post for each of the research activities include a note about the site design based on one of the criteria in the evaluation description.

  14. Success Skills - Share it - Communication and Collaboration are becoming more important as we are expanding our personal and professional networks of contacts and businesses. Review 2-3 articles from Success skills - Share it. The internet is all about sharing - information and processes including web development. What do professional web developers do? Look at the .html and .css source code for the sites you selected. What do you see that is different from what you are creating with Glitch? How does the code determine what the site looks like? Can you adapt some of these features and ideas in your own code? Post a link and a brief summary of one idea that you got from looking at the source code for the article you selected to the Success Skills - Share it discussion.

  15. Blogs/Vlogs - Consider subscribing to the blogs or vlogs (video) of people or groups that regularly provide new and interesting information about a subject that interests you. Blogs/Vlogs are used by individuals, companies, colleges and organizations as a way to provide updates and news to "subscribers" - usually by email. But they are also viewable as web pages, so you don't have to subscribe to see the information.
    Pick two Blogs (or Vlogs) you find interesting and start reading them. Some that I like - Scientific American, Gizmodo.
    In the Blogs discussion, for one that you selected, post a link and a brief description and why you selected it.

  16. Themes - Popular blogging software includes WordPress and Weebly. WordPress is available as an "open source" application you can download and run on your own web server, or as a hosted service at For these, the content of the site pages are stored separately from the format information by making extensive use of CSS functionality. A "theme" created with Cascading Style Sheets (CSS) can be selected and applied to the site content. Other sources such as Bootstrap sell "themes" (complete CSS stylesheets) as well.
    Look through the Weebly themes or WordPress themes that are provided. It is important to understand how powerful CSS is for determining the look and layout for a site. The pages for your site don't have to have all the formatting coded on each page.
    Select 2 examples of themes from the themes gallery. The content is the same - text, associated pictures, links and category information. What are the noticeable differences between the page displays? What layout features are important to you and the display of your content? Post links to the gallery pages for the themes you are comparing, and a brief description of the differences (2-3 sentences), and your preference to the Weebly / WordPress themes discussion. .

  17. Test drive - Twitter. Blogging in 140 characters. Read through the Newbie's guide to Twitter. Then search Twitter for some topics of interest. If you know hashtags or handles associated with topics and people, look them up. In the Test drive - Twitter discussion, post the contents of 2-3 tweets that are interesting along with 2-3 associated hashtags and a brief comment about your Twitter experience.

  18. Web Literacy - WRITE - Writing on the web enables one to build and create content to make meaning. Review the Web Literacy skills in the WRITE group. What is one thing that you aren't sure you understand? Look it up. In the Web Literacy - WRITE discussion, post a link to a resource where you found the answer.

Icon multimedia.gif


Help forums

  • How To Ask Questions The Smart Way - Sooner or later you are going to need help. You really tried to find the answer yourself. And you are still stuck. How and where you ask for help will make a big difference.


Voyager account setup

FTP clients


CSS Styling Lists
The CSS list properties allow you to: Set different list item markers for ordered lists Set different list item markers for unordered lists Set an image as the list item marker Add back...
HTML Lists
List items can contain new list, and other HTML elements, like images and links, etc.HTML lists can be styled in many different ways with CSS.One popular way is to style a list horizontally, to cre...
Icon Archive - Search 735,802 free icons, desktop icons, download icons, social icons, xp icons, vista icons
Search through 735,802 icons / 2,458 iconsetsm- Check the License entry before you download - make sure the icon is free to use
<p class="diigo-tags"><strong>Tags:...
list-style-image - CSS: Cascading Style Sheets | MDN
The list-style-image CSS property sets an image to be used as the list item marker.It is often more convenient to use the shorthand list-style."
<p class="diigo-tags"&...
HTML Lists Tutorial - YouTube
video 9:18 - Learn HTML code: lists - ordered, un-ordered (bullet) lists, list items. change numbering in ordered list with value, definition lists
<p class="diigo-tags"&g...


Tutorial Navigation Bar - HTML & CSS - YouTube
3:50 how to make a navigation bar with HTML and CSS. When I was trying to learn how to do this, many sites were including javascript in their code. This is a simple video that's important to w...
HTML Tutorial 10 Creating Internal Links - Linking your pages together - Part 1 - YouTube
9:07 good tutorial for an explanation to the module of working with links. It explains how to create links between your pages, by showing clear code on a new tab notepad. I like this video becaus...
HTML5 Tutorial For Beginners - part 3 of 6 - Images and Hyperlinks - YouTube
how to use images and hyperlinks. The difference between relative and absolute addressing is covered. This video shows the height and width attributes used with the img tag. In older versions of HT...
Documentation - FileZilla Wiki
"Installation on Windows/Linux/Mac OSXTutorialUsage instructionsFixing connection and transfer problems; Network configurationFrequently Asked Questions (FAQ)"
<p class=&qu...
CIS Department Web Server
"Create Your Voyager AccountConnecting to Voyager"
<p class="diigo-tags"><strong>Tags:</strong> <a href='https://www...

2016.3 2989 . 2018.3 6122