MAT165 Exercises:
Exercise One: About Me
HTML & CSS
This exercise will review hardcoding HTML and using CSS (internal/document and inline styles) to format a basic html page.
Topic: This page is about you, why you are taking the class, what you hope to learn, things you know, things you enjoy, pets you have, and anything else you care to share. One page. As long as you want it to be. Your page should include:
- A page title with your name & Exercise 1
- A header with your name
- A narrative about you that uses <p> and/or <div> tags
- Subheads to divide the page up - <h2> &/or <h3> tags
- A list of links to your favorite websites <ul> or <ol> <li> & <a>
- A hot link of your email
- Document and Inline CSS styles
- Use commments in the code explaining what you are doing
- With styles define:
- a background color
- font-families, sizes, colors
- define link colors (a:link, a:visited, a:hover, a:active) - Name your folder " exercise1 "
- Name your file " index.html "
- Name the html <title> " Your Last Name - E1 "
- Load to your folder (there should be a folder with your last name on it) in our folder on the MAT server
Evaluation: This Exercise is worth 30 points:
- Coding & Functionality (10)
- Meeting project requirements (10)
- Your effort & creativity (10)
Late work may be lowered one letter grade for each class meeting it is late
Exercise Two: Poetry
DreamWeaver
Topic: Choose a poem, and use the tools available in DreamWeaver to bring it to life. Use formatting that reflects the theme of the poem. Add imagery (must be prepared for web use), add style, fonts, colors to the text, external links, internal jump links, colors and design to create your page. Link to it, a page with a brief bio (one paragraph) of the author and a page with a brief interpretation of the poem and why you chose it. You may also break the poem into multiple pages or use multiple short poems on by the same author on separate pages. Minumum of 4 pages.
Objectives:
- Link to multiple files (relative and absolute links)
- Learn file content management and structure
- Site organization in DreamWeaver
- Learn how to create a website template
- Image preparation for the web (save for Web & Devices)
Requirements:
- The main page with the poem will be creatively designed to bring the poem to life with images and effective fonts and color use
- Must contain links to all additional pages (relative links) and an absolute link to the source of your information
- The remaining pages must have:
- a consistent header
- navigation bar - linking to all pages including main poem page
- content area (with headings, subheads, paragraphs, and images)
- footer (with a copyright and whatever else you wish to include) - Name your folder "exercise2 "
- Name your poem page " index.html "
- Name the html <title> on each page " Your Last Name - E2 "
Evaluation: This Exercise is worth 50 points:
- Coding & Functionality (20)
- Meeting project requirements (10)
- Design & creativity (10)
- Your effort (10)
Late work may be lowered one letter grade for each class meeting it is late.
Exercise Three: CSS Box Layout Challenge
CSS Layout, Floats, Absolute and Relative Positioning
Use the techniques that we have covered in class to create solutions to five unique template layouts and the simple code provided. Use DreamWeaver and CSS styles to develop your webpages to match the image positions and dimensions given. You can develop each layout using any CSS rules you feel are appropriate, but strive to write code that is clean, efficiant and well structured.
Objectives/Requirements:
- Use a combination of these to develop your solutions:
- margins
- positioning (relative, absolute, or fixed)
- floats (left, right, clearing)
- Use the HTML starter code provided for each solution (do not reorder the coding)
- Create a root folder named Exercise3
- Save each of the 5 pages using the naming convention: layout1.html, layout2.html, and so on.
- Create an index.html page that links to all 5 of your pages.
You may add HTML code to the document such as "wrappers" or "containers" as well as other content (text,images, backgrounds, colors) to make you layout more interesting, but the final positioning or layout must match the the template images given
CSS-Box-Layout HTML
Use this code as the starting point for all 5 pages you create.
Template Images
Evaluation: This Exercise is worth 60 points
- Coding & Functionality (20)
- Meeting project requirements (10)
- Design & creativity (20)
- Your effort (10)
Late work may be lowered one letter grade for each class meeting it is late.