Module 2

Module 2 Instructions

Overview

For this second module I would like you to further develop the materials you made for your first module, add additional elements and content, and begin to style it up using CSS. There are some steps you will not be able to complete immediately, as you will need to watch the tutorials for next Monday to get more information on CSS. Please do not panic.

Step One

If you haven’t already, make sure that you have at least four pages that share the same <nav> bar and are interlinked with one another uploaded to the mason.gmu.edu server. These four (or more) html files ought to be inside a folder titled “module1” inside your “public_html” folder.

Make sure that each of the html files beyond your home page has at least five <p> elements in it, at least one <img> element in it, and, wherever possible, <a> elements and list elements – either <ul> or <ol>. We need these files to have decent amount of content for us to style up.

Once you are sure that you have all of those files functional and uploaded to the server, you want to create a secondary folder titled “module2” on your computer (i.e. not on the server yet) and copy paste those same html files into that new folder.

Step Two

For the next few steps, you will be working to incorporate some of the new tags that you have learned to use into your site.

You want to make use of at least the <h1> <h2> and <h3> tags, if not the <h4> <h5> and <h6> tags. You want to make sure that these headers are nested properly and create a logical outline for each of your web pages.

Step Three

You want to incorporate the <figure> and <figcaption> tags around all of your <img> elements and any other visualizations that you might have included in your rudimentary site.

Step Four

You want to incorporate the various methods of emphasizing text wherever it may be relevant (or just for fun). These tags include <em> <strong> <b> and <i>. Try to find a consistent way to use these tags across your site.

Step Five

You want to incorporate some new <a> elements, including internal links, external links, links to at least one downloadable resource (which you can upload to the server), and at least one link to a specific section of one of your pages by using the #class extension in the HREF attribute and by adding that same class identification to the element you are linking to.

Step Six

Find a logical place to utilize the <article> and <aside> elements in your site, as well as additional <section> elements.

Step Seven

Create an external .css document that you can use to modify the presentation of your website as a whole and add the appropriate link to that CSS document in the <head> element of each of your individual html files.

Step Eight

You will learn how to complete the final steps of this module over the weekend, so please don’t be frustrated if in class you do not already know how to complete these last steps. In each of these last steps you will be tasked with using a CSS selector to target a specific element or set of elements in your html files and to tell the browser to display that element or set of elements differently.

In this first step, please open your .css document and target all of the paragraphs in your website. Then, please visit the W3Schools site to explore some of the properties and values that you can use to modify all of the text on your site. In particular, you might want to look at the Property Groups for Color, Text, Text Decoration, Fonts, and Multi-column. Also check out this site.

Play around applying some of the possible declarations you can make out of these properties and different values. For example, try changing the font of all the <p> elements on your site. Try changing their color, size, indentation, justification, font-variant, font-weight, etc.

Once you have gotten a sense for these modifications, choose a simple style for all of your <p> elements and save it in your .css file.

Step Nine

Continue exploring the different properties that you can modify for your elements. In particular, try applying classes and IDs to your elements in your .html files and then use your CSS skills to target those classes and IDs so that you can modify only one or a select group of elements at a time.

For instance, try modifying just the first paragraph of every page or just a certain type of paragraph on each page.

Step Ten

Use CSS to modify the display of each of your images. You can modify all of them at once or use classes and IDs to modify them in subsets or individually. Make sure that you adjust their widths and heights (tip: try using percentage values instead of pixel values; also try using em’s), and modify any other properties that you’d like.

Step Eleven

Lastly, be sure to try modifying the padding, border, and margin of some of your box elements (such as <section> <article> <div> <aside> <header> and <footer> elements) so that you can control how much space is inside them, outside them, and how their border displays (if at all).

Step Twelve

Once you have a functional site that contains all (or at least most) of the new elements I’ve referenced above, and that uses CSS to modify all of its <p> elements as well as to select specific elements or sets of elements via classes, IDs, or descendent selectors, you are ready to turn in your module.

Please upload your “module2” folder containing all of your .html files and your .css file to your “public_html” folder on the mason.gmu.edu server. I ought to be able to load your site by visiting:

http://mason.gmu.edu/~YOURNAME/module2/index.html