Web Design I Name_____________________
MP1 Assignments Sheet
Lesson Number Assignments Date Completed
Lesson 1 1. 12 definitions
Lesson 2 2. 18 definitions
3. Create a blog
Lesson 3 1. Create index.html page
Lesson 4 1. Modify index.html
2. 4 definitions
3. Focus on Web Design
Lesson 5 Modify index page to
include these HTML
tags:
1. center
2. italicize
3. scrolling text
4. image
Lesson 6 1. 6 definitions
2. Add a background color
to your page using a hex
color code.
Lesson 7 1. Add an ordered and
unordered list to your
index.html page
2. Customize unordered list
to a square
3. Customized ordered list
to a letter
Lesson 8 1. 4 definitions
2. 3 links (email, and 2
hyperlinks)
3. 3 Critical Thinking
Questions
Lesson 9 HTML Web Page Project
20 Items (5 pts. each)
Lesson 10 JavaJam Coffee House Web Site
1
Lesson 1 - What age are we in?
Define:
1. agrarian society
2. industrial revolution
3. digital revolution (Information Age)
4. Internet
5. World Wide Web
6. World Wide Web Consortium (W3C)
7. Web Accessibility Initiative (WAI)
8. Do a search on “keyboard layouts” and select wikipedia. Find a keyboard used in: China, Saudi
Arabia, Greece, Russia and France. Are they different from the keyboard you use? Paste 2
images here:
9. How do visually impaired people (people with poor vision or legally blind) use the web? Go to:
Start/MyComputer/Public Drive/Web Design I/Disabled and Computer Use and view 2 videos on
this topic.
10. Can someone with no arms use the computer? Go to: Start/MyComputer/Public Drive/Web
Design I/Disabled and Computer Use and view 2 videos on this topic.
11. Name 2 ways to make your web site easier to use for older people. Older users
12. Name 2 ways to make your web site more accessible. assessibility steps
Lesson 2 - What is a network?
Define:
1. network
2. Intranet
3. LAN
4. client/server
5. Internet Protocols (FTP, E-mail protocols, HTTP, TCP/IP)
6. URL
7. Domain Name
8. router
9. Domain Name System (DNS)
10. List 5 domains (Hint: it's the right-most part of the domain name)
11. List 2 top-level country code domains
2
12. Markup Language (HTML, XHTML)
13. E-commerce
14. blog
15. wiki
16. podcast
17. RSS feed
18. social network (state a social networking web site)
Create a blog. Paste the URL of your blog here:
Lesson 3 - What is HTML?
Follow our class wikispaces’ directions.
Create your first web page. It will be saved as: index.html
Lesson 4 - How do we modify a web page?
Follow our class wikispaces’ directions.
Modify: index.html
Find the index.html file in your Web Design I folder and open it with notepad, change the HTML code,
save it and then view it in your browser (refresh) to see you changes.
Define:
1. media
2. multimedia
3. search engine (name 3)
4. flash plugin
5. ergonomics
6. usability
7. criteria
Focus on Web Design:
1. Visit a web site that interests you. Copy of the home page of the site (while the page is on your screen,
press the print screen key on your keyboard to copy it) and paste it here:
Every web site is designed for a specific purpose. The purpose of the site will affect the layout, color choices,
font face and size choices, graphics and more. Answer the following questions:
1. What is the purpose of the site?
2. Who is the intended audience?
3. Do you think that the site reaches its intended audience? Why or Why not?
3
4. Is the site useful to you? Why or why not?
5. List one interesting fact or issue that this site addresses
6. Would you encourage others to visit this site?
7. How could this site be improved?
Lesson 5 - How do we change and add HTML tags to a page?
Open and modify your index.html page:
1. center some text
5. italicize some text
6. add scrolling text
7. use the font tag – HTML is FUN! & I LOVE WEB DESIGN!
8. add an image
Lesson 6 - How do we add a background color to a page?
Define:
1. default
2. pixel
3. acronym
4. RGB
5. web-safe color
6. give the hex color code for a purple color:
Modify index.html : Add background color to your index.html page
Lesson 7 - How do we create lists in HTML?
Modify you index.html page: Add 3 different lists and customize them.
Define: IP, HTTP, FTP in one list on your web page.
Lesson 8 - What is a Hyperlink?
Modify index.html : Add hyperlinks
Define:
1. hyperlinks
2. anchor
3. absolute link
4. relative link
Critical Thinking Questions
Take a moment to carefully consider and answer the issues below:
1. Has the Internet changed the way that you communicate with your friends and family, work on
school assignments, research and compare products? If so, how? Cite specific examples. How do you
think it will impact these activities in the future?
2. Are you aware of a so-called "Digital Divide"— the difference between individuals that use
computers and those that do not? Do you think there really is a Digital Divide? Cite examples. What
can be done to bridge this divide? Visit: http://searchcio-
midmarket.techtarget.com/sDefinition/0,,sid183_gci214062,00.html
4
Lesson 9 - HTML Web Page Project
Complete 20 HTML tasks in one web page.
OBJECTIVE: Get very acquainted with HTML
ASSIGNMENT OVERVIEW:
You will create a simple 3 page web site about a ―mock‖ business of your choice using
Notepad. You will be using a variety of HTML tags as you step through the requirements of this
project.
Preliminary Tasks and Requirements:
1. In your class folder, create a new folder and name it: MyBusiness. You will save ALL
FILES related to this project in that folder. This is called the ROOT FOLDER of the site.
2. The first page you create will be the home page of the site and the home page of a site is
ALWAYS saved as index.html
Web Site Requirements (5pts each):
Do the following on the home page (also know as: index.htm)
1. Put the name of your business at the top using a heading tag and center it.
2. Put a picture of something relevant to your business.
3. Write a brief paragraph about what your business has to offer.
4. Italicize one word in the paragraph.
5. Make one word in the paragraph a different color. (Search on: HTML font tab. Also search
on: hex color)
6. Change the font of the paragraph by modifying the font tag. You will need to add the
―face=‖ attribute to a font face. Your font face of choice (arial, verdana, etc…).
7. Change the background color of the page.
8. Create a numbered list itemizing 3 services your business offers.
9. Link 1 of those services to a related web site (search on: HTML hypertext links). You must
include http:// before the www for the link to work. Test the link!!!
10. Add a bullet list of three celebrities that use your business.
11. Link each celebrity to a related web site. Make sure the links work! You need to use the full
address: http://www.......!
12. Put a horizontal rule on the page that is 80% wide and 10 pixels high.
13. Add an email link.
14. Add scrolling text (see HTML marquee tag).
15. Add an animated GIF (images with movement). (search on: animated gif)
16. Create an image at: www.flamingtext.com and put in on your page somewhere. This image
will expire in a day.
17. Put your full address and right-align it. (search on: HTML align).
18. Under your business name, at the top of the page, create a table that has 1 row and 3
columns like below. (Search on HTML table tag.) This will be your navigation bar for your
mini 3-page site. It should contain 3 links: Home and 2 links of your choice (About Us,
Services, Testimonials, Contact Us, etc.). Example:
Home Services Contact Us
19. Create a new page for each of the 2 links in #18. (Hint: You can copy and paste your index page
and rename it to: services.html) Your business name should be at the top, like the home page, the
5
navigation bar below it followed by the page title. Make the top of each page look the same! Put some
text and an image on each page. Make the page feel like you are still in the same web site (colors and
layout should create visual continuity).
20. Get a sound off the web, save it to your folder and put it on your page. Or bring in music of your
own and put it on your page. Visit www.myflashfetish.com, you will need to create an account to get
the code.
Lesson 10 - Web Site Case Study
Java Jam Coffee House
Create a new folder and name it: JavaJam
1. The home page of any web site is ALWAYS named index.html
2. Follow the assignment handout to create this 3 page site.
3. This assignment will only create a total of 3 web pages: index.html (home), music.html and
jobs.html
Check with me before continuing!
Lesson 11 – Trillium Web Site Modification using Cascading Style
Sheets (CSS)
TRILLIUM ASSIGNMENT
ASSIGNMENT GOAL: Understand what an embedded cascading style sheet (css) is and how to
change it.
ASSIGNMENT OVERVIEW:
You will be modifying a web page that uses an embedded(the styles are listed in the web page)
cascading style sheet (css).
PREPARE AND GET THE WEB PAGE:
1. Create a folder and name it: trillium
2. Download the trillium home page (index.htm) to this folder. This is the root folder of the trillium
site.
3. Go inside the trillium folder and double-click on that index.htm page to open it in your browser and
right-click
on it and open it in notepad so you can change the html code.
DO SOME READING THAT WILL HELP YOU TO UNDERSTAND THIS ASSIGNMENT:
1. Visit the following page: http://www.w3schools.com/css/css_syntax.asp
2. Read the page and use the links on the navigation bar at left to complete this assignment.
ASSIGNMENT: MODIFY THE index.html (the home page) OF THE TRILLIUM SITE
Perform the following modifications to the trillium.html page. Notice what line of html is assigned to
the style
you are changing. Test each change as you go by saving your changes and refreshing the web page in
your browser.
6
1- Change the title: "Trillium Web Design" to "Trillium Web Design Services"
2- Change the background color on the text h1 and h2 styles to gray (find the hex color code for gray).
3- Change the .nav style in some way
4- Change the body background color to white (#ffffff)
5- Change the color to white in the h1 style
6- Download the trilliumbanner.jpg image file and replace the text at the top of the page with this
banner image.
Look at the optional attributes of the image tag: http://www.w3schools.com/tags/tag_IMG.asp
7