Lessons

**Lesson 1 - What age are we in?**

 * 1) Create a folder called Web Design I.
 * 2) **Click to download the Web Design Assignments[[file:Web Design Assignments.doc]]**
 * 3) You are responsible for all the definitions in each lesson and other work. The LESSON NUMBER should be before each set of work
 * 4) Keep the definitions numbered (use a numbered list)


 * Define: **
 * 1) **agrarian revolution**
 * 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 keyboards. Find a keyboard used in: China, Saudi Arabia, Greece, Russia and France**
 * 9) **How do visually impaired (blind) people use the web?**
 * 10) **Can someone with no arms use the computer?**

**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**
 * 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 ** to document your learning experiences as you study web site development in this class. Try: blogspot.com or xanga.com Contribute to your blog at least 4 times.
 * In your Web Design Assignments document -** Type: Create a blog. Paste the URL of your blog underneath it. Save and close.

**Lesson 3 - What is HTML?**
My first web page  HELLO HELLO HELLO HELLO AGAIN  **
 * 1) Read this page: [] and click on the Next Chapter button at the bottom
 * 2) Read the first 10 pages and use this site as a reference.
 * 3) Create your first web page: You must have a folder called Web Design I to proceed with the following work.
 * 4) **Open notepad (got to: Start-->Accessories-->notepad**).
 * 5) Type in the following:
 * 
 * 1) Go to: **File-->Save** and save the file in your Web Design 1 folder under the name: **index.html** (Note: the home page file of any web site is ALWAYS named: INDEX).
 * 2) **Test the file in your browser (**which is, by default, Internet Explorer if you are in our classroom). To do this, find your file in your folder, and double-click on it.

=Hello=
 * Lesson 4 - How do we modify a web page?**
 * 1) Open the above created file (index.html) in notepad
 * 2) Find the file in your folder,
 * 3) Click on the file ONCE and go to: File-->open with--> notepad.
 * 4) If you came into class late and don't have the file, click and download this file: [[file:index.html]]
 * 5) Modify the index.html file. Replacing the text, so that when you save the changes and open the page in the browser, or refresh it, it says the following:

School
**Define:**
 * 1) **media**
 * 2) **multimedia**
 * 3) **search engine (name 3)**
 * 4) **flash plugin**

**Focus on Web Design**
 * 1) Open your Web Assignments document and type: **Focus on Web Design**
 * 2) Visit a web site that interests you. Make a copy of the home page of your site (use the print screen key on your keyboard) and paste it in your document.
 * 3) Each web site is design for a specific purpose that affects it's layout, color choices, font face and size choices, graphics and more. Think about the design as you write a one-page summary and reaction to the site. Address the following topics:
 * 4) What is the purpose of the site?
 * 5) Who is the intended audience?
 * 6) Do you think that the site reaches its intended audience? Why or Why not?
 * 7) Is the site useful to you? Why or why not?
 * 8) List one interesting fact or issue that this site addresses
 * 9) Would you encourage others to visit this site?
 * 10) How could this site be improved?

**Lesson 5 - How do we change and add HTML tags to a page?**

 * 1) Do a search on the web or in the w3schools web site on the keywords: html center tag
 * 2) Modify your index.html page above to **center** the first Hello.
 * 3) Save the file and refresh the browser to test your change.
 * 4) Modify it again to **italicize** the words: Curtis High School (Hint: seach on the keywords: html italic tag)
 * 5) Now add a paragraph tag after the last line of text (school) BUT BEFORE the closing tag. Inside the opening and closing paragraph tag give you name and write what you like about yourself.
 * 6) So a search on: **html marquee tag**
 * 7) Add a line of text that scrolls across the page telling us who your best friend is using the marquee tag.
 * 8) **Find a picture** of something that represents you and **save it to this folder** (Right-click on picture--> Save Picture As)
 * 9) Web supported image file types include: **.jpg and .gif**
 * 10) **Find the image you saved. Notice the file type** (by mousing over it or right-clicking on it--> properties). Notice the name of the image. If it's too long or complicated, rename it to something short and meaningful. Take note of the full name! For example: the file might be name **star** and the file type might be **.jpg**, therefore, the full name would be: **star.jpg**
 * 11) I want you to display this image on your web page. To do so: know the full name of the image file and make sure it is in the same folder as your web page. If not already opened, **open index.html and search on the keywords: html image tag**
 * 12) Add the image tag **BEFORE** the closing body tag.
 * 13) Save and test your changes in the browser.

**Lesson 6 - How do we add a background color to a page?**
Some tags in HTML allow you to have further control with "attributes". Notice the  tag at the top of your HTML file. There should only be one opening and closing body tag.
 * HTML TAG ATTRIBUTES**

You will be modifying your body tag to add a background color on your page shortly.
 * 1) Do a search on: HTML body tag
 * 2) Find the different attributes of the body tag. bgcolor = background color, is one attribute used to change the background color of the page.

**Pixel (picture element)** - Tiny dots that make up a computer image. The more pixels a computer monitor can display, the better the image resolution and quality. On a color monitor, every pixel is composed of a red, a green, and a blue (RGB) dot that are small enough to appear as a single entity. There is an artist by the name of Chuck Close who painted portraits of people by breaking them down into small pixel units. From a distance, his work looked very realistic, but up close you can see his pixel approach. Example: []
 * Do you know what a pixel is?**

Define:
 * 1) pixel

In the world of web design, color and appear different on different monitors. To minimize this problem, 256 web safe colors were developed so that color would consistently look the same on any monitor screen. A **hex triplet** is a six-digit, three-[|byte] [|hexadecimal] number used in [|HTML], [|CSS], [|SVG], and other computing applications, to represent [|colors]. The bytes represent the red, green and blue components of the color. The hex triplet is formed by concatenating three bytes in hexadecimal notation, in the following order: .
 * Byte 1: red value (color type red)
 * Byte 2: green value (color type green)
 * Byte 3: blue value (color type blue) --- thus producing the RGB color approach
 * 1) Do a search on: hex color codes
 * 2) Find a color that will contrast well with black text to use as a background color on your page.
 * 3) Modify your body tag by adding the bgcolor attribute and the desired hex color code you want for your page. For Example: 
 * 4) Save and test.

Lesson 7 - How do we create lists in HTML?

 * 1) Do a search on HTML lists. Select the w3schools.com web site
 * 2) Notice the following different lists:
 * 3) Ordered
 * 4) Unordered
 * 5) Definition
 * 6) Add 3 different types of lists in your index.html page.
 * 7) Create an ordered list of your favorite music artists
 * 8) Create an unordered list of places in the world you would like to visit
 * 9) Create a definition list of the following 3 network terms: IP, HTTP, FTP
 * 10) Save and test as you go along.
 * 11) Modify the unordered list to display a square instead of a disc (the default). (Hint: use the w3schools.com web site, read, click on links and the try buttons to figure it out or do a search on "html unordered list types")
 * 12) Modify the ordered list to display A,B,C instead of 1,2,3.

**Lesson 8 - What is a Hyperlink?**
Use the w3shools.com site as a reference.
 * The HTML anchor element , is used to define both hyperlinks and anchors.**
 * Define:**
 * 1) **hyperlinks**
 * 2) **anchor**
 * 3) **absolute link**
 * 4) **relative link**

TIPS: Make your link names descriptive!! What might be a potential future problem when to linking to an external web site from your own web site?????
 * 1) Open index.html in notepad
 * 2) Add a link to www.mamma.com
 * 3) Add an email link to any email address (fake or real)
 * 4) Add a link to your favorite web site (if it's not blocked by the school)

Lesson 9 - Web Case Studies
Create the JavaJam web site
 * 1) Create a new folder and name it: JavaJam
 * 2) The home page of any web site is ALWAYS named index.html
 * 3) Follow the assignment handout to create this 4 page site.
 * 4) This assignment will only create 2 pages.

The font tag will allow you to change the font face, size and color of your text.
 * 1) Do a search on: html font tag
 * 2) Surround the text inside your paragraph tag  to be font face: comic sans, size: 8 and color: your choice(use hex code).
 * 3) Save and test.

**Lesson 8 - Project 1**
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. 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** 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 i**t. 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: 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 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). **Be Creative and Explore!!!!**
 * OBJECTIVE:** Get very acquainted with HTML
 * ASSIGNMENT OVERVIEW**:
 * Preliminary Tasks and Requirements**:
 * Web Site Requirements (//5pts each//): **
 * Home || Services || Contact Us ||
 * 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 9 - Critical Thinking**

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: []