This is the P2PU Archive. If you want the current site, go to www.p2pu.org!
Web Design 101: Study Group
Course Material
Week Two
Week 2 Overview
BEFORE YOU BEGIN! Make a copy of your first week's work and save it to a folder on your server named Week 2. Use the files in the Week 2 folder as the foundation for developing this week's activities.
Keeping track of your different weeks' work will allow you to look back and reflect on your progress.
Hopefully you're beginning to feel comfortable working with basic HTML and are learning how to use it to semantically define the content of your web page.
To clarify, in web development we use the term semantics to mean that the tag used to markup the contents makes sense as a descriptor of what type of text is being marked up. For example, the first heading or title of your page should be marked up with the <h1> tag. Paragraphs will be defined by the <p> tag.
Sub-headings should be defined by increasingly lower level headings depending on their importance in the text (<h2> through to <h6>). This use of headings is similar to the way Word Processing software allows users to define sections of a report, article or academic paper.
If you use the <h1> tag to make a section of text appear larger, but it is not a heading, that is not semantic markup and is not a web page made to web standards. When you wish to change the appearance of your text, you will use Cascading Style Sheets or CSS. Some of you may have started to experiment with CSS, but please use this week to focus on learning more about HTML structure and standards based tags as described in the readings.
We'll begin to look at CSS next week.
Week 2 Readings
- A Minimal HTML Document
- The HTML <head> element, by Christian Heilmann.
- The Importance of Correct HTML Commenting
- HTML Lists, by Ben Buchanan.
- Images in HTML, by Christian Heilmann.
- HTML links—let’s build a web! by Christian Heilmann.
- HTML Tables, by Jen Hanen.
- HTML Forms—the basics, by Jen Hanen.
- Lesser–known semantic elements, by Mark Norman Francis.
- Generic containers — the div and span elements, by Mark Norman Francis.
- Creating multiple pages with navigation menus, by Christian Heilmann.
Week 2 Activities
-
BEFORE YOU BEGIN! Make a copy of your first week's work and save it to a folder on your server named Week 2. Use the files in the Week 2 folder as the foundation for developing this week's activities.
- Keeping track of your different weeks' work will allow you to look back and reflect on your progress.
-
Read article A Minimal HTML Document and amend your original webpage so that the basic website structure contains a language attribute and a meta tag describing the character set used by the page.
- You should add in the lines referring for the style tag and the script tag, but please comment these out as you should not be using Javascript or CSS in your current pages.
- Add several more pages for your basic site and use hyperlinks to make logical connections between them.
- Where appropriate, use more specific and semanically correct elements to add images, quotes, citations, tables and numbered or bulleted lists.
-
Create the elements to make a contact form that people would type comments into.
- PLEASE NOTE: This form does not need to send information, please focus on using the correct HTML elements to describe the contents of the form.
- Check that all of the pages in your site are semantically marked up, consistent in their format and that the tags used make sense in relation to the text and image files they describe.
Post links to your work for Week 2 in the Week Two Activity Forum.
