FINAL PROJECT

GOAL: By the end of class today you will know all about the origins of the Internet.

  1. History of the Internet–View this.
  2. Create a new Google Doc named INTERNET ORIGINS. Share it with me (tracyweber@bellevue.k12.ia.us). Respond to the following statements/take notes:
  3. INTERNET SCAVENGER HUNT
    1. Internet Origins
      1. Identify the Defense Department initiative that led to the Internet
      2. Identify the major technological breakthroughs that let to the Internet (packet switching, TCP/IP, ethernet, routers, email, etc.)
      3. Identify important people involved in developing the Internet (Marc Andreesen, Jon McAfee, Licklider, Ray Thomlinson, Bob Metcalfe, Abramson, Lernet & Bosack, Tim Berners-Lee, etc.)
    2. Know the following terms:
      1. Arpanet
      2. Browser
      3. Client
      4. Ethernet
      5. HTTP
      6. Internet
      7. Mosaic
      8. Open Standards
      9. Packet
      10. URL
      11. Venture Capitalist
    3. What are the 3 things a router does?
    4. What is the name of the “Card catalogue used by people to retrieve information off the Internet?”
    1. WATCH THIS VIDEO AS HOMEWORK TO GIVE YOURSELF A FIRM GRASP OF HOW THE  COMPUTER/INTERNET WAS INVENTED:
      1. Triumph of the Nerds Part 1 of 3 (2 of 6)

 

GOAL: By the end of class today you will know all about the origins of the Internet.

  1. History of the Internet–View this.
  2. Create a new Google Doc named INTERNET ORIGINS. Share it with me (tracyweber@bellevue.k12.ia.us). Respond to the following statements/take notes:
  3. INTERNET SCAVENGER HUNT
    1. Internet Origins
      1. Identify the Defense Department initiative that led to the Internet
      2. Identify the major technological breakthroughs that let to the Internet (packet switching, TCP/IP, ethernet, routers, email, etc.)
      3. Identify important people involved in developing the Internet (Marc Andreesen, Jon McAfee, Licklider, Ray Thomlinson, Bob Metcalfe, Abramson, Lernet & Bosack, Tim Berners-Lee, etc.)
    2. Know the following terms:
      1. Arpanet
      2. Browser
      3. Client
      4. Ethernet
      5. HTTP
      6. Internet
      7. Mosaic
      8. Open Standards
      9. Packet
      10. URL
      11. Venture Capitalist
    3. What are the 3 things a router does?
    4. What is the name of the “Card catalogue used by people to retrieve information off the Internet?”
    1. WATCH THIS VIDEO AS HOMEWORK TO GIVE YOURSELF A FIRM GRASP OF HOW THE  COMPUTER/INTERNET WAS INVENTED:
      1. Triumph of the Nerds Part 1 of 3 (2 of 6)

Goal: Before you leave class today you will be familiar with Internet Components

  1. Check JMC
  2. Create a new Google Doc and name it INTERNET COMPONENTS. Share it with me. Use it to take notes over the statements/questions below:
    1. Identify the two types of browsers
    2. Explain the differences between the two types of browsers and explain where each is typically used
    3. Use a browser to visit a website/webpage
    4. Identify the 4 parts of a URL
    5. List several common protocols used by browers (http, https, ftp, mailto, etc.)
    6. Explain the purpose of a search engine
    7. Expain what a keyword is
    8. Use a search engine to find information
    9. Limit the results returned by a search engine using advanced settings
    10. Explain how metatags are used by search engines
    11. Explain the difference between various text editors
    12. Explain what an ISP/IPP is
    13. Explain what an Internet Host is
    1. WATCH THIS VIDEO AS HOMEWORK TO GIVE YOURSELF A FIRM GRASP OF HOW THE  COMPUTER/INTERNET WAS INVENTED:
      1. Triumph of the Nerds Part 1 of 3 (3 of 6)
      2. Triumph of the Nerds Part 1 of 3 (4 of 6)

Goal: Before you leave class today you will be familiar with Internet Components QUIZ NEXT CLASS

  1. Open the Google Doc named INTERNET COMPONENTS. Finish taking notes over the statements/questions below:
    1. Identify the two types of browsers
    2. Explain the differences between the two types of browsers and explain where each is typically used
    3. Use a browser to visit a website/webpage
    4. Identify the 4 parts of a URL
    5. List several common protocols used by browers (http, https, ftp, mailto, etc.)
    6. Explain the purpose of a search engine
    7. Explain what a keyword is
    8. Use a search engine to find information
    9. Limit the results returned by a search engine using advanced settings
    10. Explain how metatags are used by search engines
    11. Explain the difference between various text editors
    12. Explain what an ISP/IPP is
    13. Explain what an Internet Host is
  2. MAKE SURE YOU KNOW WHO THESE PEOPLE ARE AND WHAT THEY DID: Marc Andreesen, Jon McAfee, Licklider, Ray Thomlinson, Bob Metcalfe, Abramson, Lernet & Bosack, Tim Berners-Lee, etc.
  3. REVIEW THE INTERNET ORIGINS Google Doc!!
  4. WATCH THIS VIDEO AS HOMEWORK TO GIVE YOURSELF A FIRM GRASP OF HOW THE  COMPUTER/INTERNET WAS INVENTED:
    1. Triumph of the Nerds Part 1 of 3 (5 of 6)
    2. Triumph of the Nerds Part 1 of 3 (6 of 6)
    3. Triumph of the Nerds Part 2

OVERVIEW QUIZ–In Edmodo

BEGIN:

SPECIAL ISSUES: FINISH next class

  1. Record your answers to the following  questions in a Google Doc title: SPECIAL ISSUES and share it with me (tracyweber@bellevue.k12.ia.us) Use this website (and others you can find using the Internet) to help with the following questions: http://www.w3c.org/
    1. What are some of the major ethical considerations associated with the Internet (privacy, access, etc.)?
    2. Who is W3C and what is their role in developing Internet standards?
    3. How do ADA laws effect the way web sites should be developed?
    4. Explain how different browsers/platforms that “break” W3C standards effect the way web sites are designed.
    5. Identify the browser(s) most notorious for breaking W3C standards.
    6. Explain the philosophy for handling browsers and platforms that don’t adhere to common standards.
    7. Identify many of the common issues web designers must take into consideration when developing a website.
  2. BOOKMARK THESE SITES FOR LATER USE:
    1. http://validator.w3.org/
    2. http://www.w3schools.com/

SPECIAL ISSUES

  1. FINISH
  2. Record your answers to the following  questions in a Google Doc title: SPECIAL ISSUES and share it with me (tracyweber@bellevue.k12.ia.us) Use this website (and others you can find using the Internet) to help with the following questions: http://www.w3.org/
    1. What are some of the major ethical considerations associated with the Internet (privacy, access, etc.)?
    2. Who is W3C and what is their role in developing Internet standards?
    3. How do ADA laws effect the way web sites should be developed?
    4. Explain how different browsers/platforms that “break” W3C standards effect the way web sites are designed.
    5. Identify the browser(s) most notorious for breaking W3C standards.
    6. Explain the philosophy for handling browsers and platforms that don’t adhere to common standards.
    7. Identify many of the common issues web designers must take into consideration when developing a website.
  3. BOOKMARK THESE SITES FOR LATER USE:
    1. http://validator.w3.org/
    2. http://www.w3schools.com/

FINISH THE LESSON PLAN FROM LAST CLASS

DO THIS FIRST TODAY: Take the HTML PRE TEST in Edmodo

CHAPTER 1 STRUCTURING DOCUMENTS FOR THE WEB

GOAL: Before you leave today you will know about structured documents for the web and the following HTML5 terms & concepts:

  1. Tags and elements
  2. Separating Heads from Bodies
  3. What Attributes Tell You about Elements
  4. Learn from Others y Viewing Their Source Code
  5. Elements for Marking Up Text

RIGHT NOW:

  1. Go to your Google Drive ON YOUR MACHINE and create a new folder named Web Design
  2. Create a new Google Doc and name it CHAPTER 1: STRUCTURING DOCUMENTS FOR THE WEB (use this document to take notes throughout chapter 1 and to answer any questions you are asked in the daily lesson plans)
  3. Go to the downloads page for this book and download the files to your Web Design folder in your Google Drive on your machine (the book is the Creative Suite 6 book in my classroom. We will only use it for this first chapter.)
  4. Unzip the folder to your Web Design folder
  5. Read pages 1-3
    1. When they indicate to “look at a simple web page” do the following:
      1. Open Dreamweaver (click the Windows button and begin to type Dreamweaver, then click Dreamweaver CS6)
      2. Click the FILE menu and choose OPEN
      3. Navigate to your Web Design folder.
      4. Open the CODE folder
      5. Open the C01 folder
      6. Open the ch01_eg01.html file
    2. We will use Dreamweaver CS6 instead of Notepad for this class.
    3. Below the menu bar you will see 4 buttons: Code, Split, Design, Live–click on each
    4. Click and stay on the SPLIT button. What you are seeing on the left side of your screen should match what is in your book on page 3.
  6. WATCH THIS VIDEO CLIP & TAKE NOTES IN YOUR GOOGLE DOC
  7. Continue to read to the top of page 4. Be sure you know the following:
    1. What is a tag? What does it look like?
  8. Tags and Elements–Read and do pages 4-5
    1. What is the difference between an opening & closing tag?
    2. What is an element? Explain how you would describe an element to someone who knows nothing about it.
    3. READ THE WARNING & TAKE NOTE AT THE BOTTOM OF PAGE 4
    4. READ THE NOTE IN THE MIDDLE OF PAGE 5 & BE SURE TO ALWAYS DO THIS!!
  9. Separating Heads from Bodies–Read and do pages 5-6 (ALSO: Be sure to always refer to the web page you have open right now in Dreamweaver to get a REAL view of what they are talking about in the text)
    1. Which are the first and last tags in a web page?
    2. What are the 2 main elements between the HTML tags? Describe what is included in each.
    3. What is the foundation upon which every web page is built?
    4. What does the TITLE tag do? Do you have to include it?
    5. READ THE WARNING ON PAGE 6 AND TAKE NOTE OF IT!!
    6. What is nesting?
  10. Attributes Tell You about Elements–Read and do pages 6-8
    1. What is an attribute?
    2. Open the ch01_eg02.html file in Dreamweaver CS6
    3. How is a hyperlink created?
    4. What are the 2 parts to an attribute? Provide an example of each.
    5. How is the value of the attribute always be formatted?
  11. Learning from Others by Viewing Their Source Code–Read and do page 8.
    1. DO THIS!!! You can do this for ANY website using ANY browser.
  12. Elements for Marking Up Text–Read and do pages 8 (bottom)-9 (top)
  13. In your Google Doc shared with me, write the code REQUIRED for EVERY web page.

PICK UP WHERE YOU LEFT OFF LAST CLASS

CHAPTER 1 STRUCTURING DOCUMENTS FOR THE WEB

GOAL: Before you leave today you will know about structured documents for the web and the following HTML5 terms & concepts:

  1. Tags and elements
  2. Separating Heads from Bodies
  3. What Attributes Tell You about Elements
  4. Learn from Others y Viewing Their Source Code
  5. Elements for Marking Up Text

RIGHT NOW:

  1. Go to your Google Drive ON YOUR MACHINE and create a new folder named Web Design
  2. Create a new Google Doc and name it CHAPTER 1: STRUCTURING DOCUMENTS FOR THE WEB (use this document to take notes throughout chapter 1 and to answer any questions you are asked in the daily lesson plans)
  3. Go to the downloads page for this book and download the files to your Web Design folder in your Google Drive on your machine (the book is the Creative Suite 6 book in my classroom. We will only use it for this first chapter.)
  4. Unzip the folder to your Web Design folder
  5. Read pages 1-3
    1. When they indicate to “look at a simple web page” do the following:
      1. Open Dreamweaver (click the Windows button and begin to type Dreamweaver, then click Dreamweaver CS6)
      2. Click the FILE menu and choose OPEN
      3. Navigate to your Web Design folder.
      4. Open the CODE folder
      5. Open the C01 folder
      6. Open the ch01_eg01.html file
    2. We will use Dreamweaver CS6 instead of Notepad for this class.
    3. Below the menu bar you will see 4 buttons: Code, Split, Design, Live–click on each
    4. Click and stay on the SPLIT button. What you are seeing on the left side of your screen should match what is in your book on page 3.
  6. WATCH THIS VIDEO CLIP & TAKE NOTES IN YOUR GOOGLE DOC
  7. Continue to read to the top of page 4. Be sure you know the following:
    1. What is a tag? What does it look like?
  8. Tags and Elements–Read and do pages 4-5
    1. What is the difference between an opening & closing tag?
    2. What is an element? Explain how you would describe an element to someone who knows nothing about it.
    3. READ THE WARNING & TAKE NOTE AT THE BOTTOM OF PAGE 4
    4. READ THE NOTE IN THE MIDDLE OF PAGE 5 & BE SURE TO ALWAYS DO THIS!!
  9. Separating Heads from Bodies–Read and do pages 5-6 (ALSO: Be sure to always refer to the web page you have open right now in Dreamweaver to get a REAL view of what they are talking about in the text)
    1. Which are the first and last tags in a web page?
    2. What are the 2 main elements between the HTML tags? Describe what is included in each.
    3. What is the foundation upon which every web page is built?
    4. What does the TITLE tag do? Do you have to include it?
    5. READ THE WARNING ON PAGE 6 AND TAKE NOTE OF IT!!
    6. What is nesting?
  10. Attributes Tell You about Elements–Read and do pages 6-8
    1. What is an attribute?
    2. Open the ch01_eg02.html file in Dreamweaver CS6
    3. How is a hyperlink created?
    4. What are the 2 parts to an attribute? Provide an example of each.
    5. How is the value of the attribute always be formatted?
  11. Learning from Others by Viewing Their Source Code–Read and do page 8.
    1. DO THIS!!! You can do this for ANY website using ANY browser.
  12. Elements for Marking Up Text–Read and do pages 8 (bottom)-9 (top)
  13. In your Google Doc shared with me, write the code REQUIRED for EVERY web page.

GOAL: Before you leave today you will know how to use Dreamweaver to work with HTML.

PICK UP WHERE YOU LEFT OFF LAST CLASS–Finish

CHAPTER 1 STRUCTURING DOCUMENTS FOR THE WEB

  1. WATCH THIS VIDEO CLIP & TAKE NOTES IN YOUR GOOGLE DOC
  2. Continue to read to the top of page 4. Be sure you know the following:
    1. What is a tag? What does it look like?
  3. Tags and Elements–Read and do pages 4-5
    1. What is the difference between an opening & closing tag?
    2. What is an element? Explain how you would describe an element to someone who knows nothing about it.
    3. READ THE WARNING & TAKE NOTE AT THE BOTTOM OF PAGE 4
    4. READ THE NOTE IN THE MIDDLE OF PAGE 5 & BE SURE TO ALWAYS DO THIS!!
  4. Separating Heads from Bodies–Read and do pages 5-6 (ALSO: Be sure to always refer to the web page you have open right now in Dreamweaver to get a REAL view of what they are talking about in the text)
    1. Which are the first and last tags in a web page?
    2. What are the 2 main elements between the HTML tags? Describe what is included in each.
    3. What is the foundation upon which every web page is built?
    4. What does the TITLE tag do? Do you have to include it?
    5. READ THE WARNING ON PAGE 6 AND TAKE NOTE OF IT!!
    6. What is nesting?
  5. Attributes Tell You about Elements–Read and do pages 6-8
    1. What is an attribute?
    2. Open the ch01_eg02.html file in Dreamweaver CS6
    3. How is a hyperlink created?
    4. What are the 2 parts to an attribute? Provide an example of each.
    5. How is the value of the attribute always be formatted?
  6. Learning from Others by Viewing Their Source Code–Read and do page 8.
    1. DO THIS!!! You can do this for ANY website using ANY browser.
  7. Elements for Marking Up Text–Read and do pages 8 (bottom)-9 (top)
  8. In your Google Doc shared with me, write the code REQUIRED for EVERY web page.
  9. SHARE THE GOOGLE DOC WITH ME AGAIN TODAY.

MOVING ON…………

  1. WATCH THIS VIDEO ABOUT DREAMWEAVER & HTML–About the Head
  2. Open the HTML TUTORIAL and save it to your Google Drive folder for this class.
  3. You will begin working through the HTML Basic tutorial. Your goal today should be to finish the following Chapters:
    1. HTML HOME
    2. HTML Introduction
    3. HTML Get Started
    4. Basic
    5. Elements
    6. Attributes
    7. Headings
    8. Paragraphs
    9. Formatting

GOAL: Before you leave today you will know how to use Dreamweaver to work with HTML.

  1. WATCH THIS VIDEO ABOUT DREAMWEAVER & HTML–About the Head
  2. Open the HTML TUTORIAL and save it to your Google Drive folder for this class.
  3. You will begin working through the HTML Basic tutorial. Your goal today should be to finish the following Chapters:
    1. HTML HOME
    2. HTML Introduction
    3. HTML Get Started
    4. Basic
    5. Elements
    6. Attributes
    7. Headings
    8. Paragraphs
    9. Formatting

GOAL: Before you leave today you will know how to use Dreamweaver to work with HTML.

  1. Continue working through the HTML Basic tutorial. Your goal today should be to finish the following Chapters:
    1. HTML HOME
    2. HTML Introduction
    3. HTML Get Started
    4. Basic
    5. Elements
    6. Attributes
    7. Headings
    8. Paragraphs
    9. Formatting

GOAL: Before you leave today you will know how to use Dreamweaver to work with HTML.

  1. Finish working through the HTML Basic tutorial. Your goal today should be to finish the following Chapters:
    1. HTML HOME
    2. HTML Introduction
    3. HTML Get Started
    4. Basic
    5. Elements
    6. Attributes
    7. Headings
    8. Paragraphs
    9. Formatting

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

HTML CODE

Goal: Before you leave class today you will understand what is meant by HTML and how it is used.

  1. HTML Pre-Test in Edmodo
  2. HTML textbook–will be a reference guide
  3. Lynda.com–use this as a source
  4. iTunes–Subscribe to Chris Coyers CSS Tricks podcast
  5. Overview HTML–Slides 1-13–Plug in your headphones and listen to the sound file and view the PowerPoint as you listen.
  6. In a Google Doc, please share the following with me:
    1. With respect to the Internet, what is the difference between a document and a page?
    2. How many browsers should a Web designer use to test a newly designed Web page?
    3. What is the difference between a landing page and a homepage?
    4. What is the protocol for a URL?
    5. What does stand for URL?
    6. What does HTML stand for?
    7. Identify 4 protocols used on the Internet.
    8. Give an example of a domain name.
  • Give examples of domain name extension.

 

  1. HTML CODE
  2. COMPLETE:
    1. Overview HTML–Slides 1-13–Plug in your headphones and listen to the sound file and view the PowerPoint as you listen.
    1. In a Google Doc, please share the following with me:
      1. With respect to the Internet, what is the difference between a document and a page?
      2. How many browsers should a Web designer use to test a newly designed Web page?
      3. What is the difference between a landing page and a homepage?
      4. What is the protocol for a URL?
      5. What does stand for URL?
      6. What does HTML stand for?
      7. Identify 4 protocols used on the Internet.
      8. Give an example of a domain name.
      9. Give examples of domain name extension.
  1. HOMEWORK: VIEW THIS VIDEO AT HOME TONIGHT AND BE PREPARED TO DISCUSS NEXT CLASS
    1. Overview HTML–Slides 14-27–Plug in your headphones and listen to the sound file and view the PowerPoint as you listen.
    2. In a Google Doc, please share the following with me:
      1. What is a tag?
      2. What is the difference between a container tag and an empty tag? Write an example of each.
      3. What is an attribute?
      4. Is a tag a noun or adjective? Is an attribute a noun or attribute?
      5. What special characters enclose HTML tags?
      6. In HTML container tags what distinguishes the ending tag from the beginning tag?
      7. What does the World Wide Web Consortium (W3C) do?
    1. Overview Terminology you need to be familiar with:
      1. Attribute
      2. Browser
      3. Deprecated
      4. Domain Name
      5. Document
      6. Hyper Document
      7. Hypertext Markup Language (HTML)
      8. Internt Protocol address (IP)
      9. Internet Service
      10. Provider (ISP)
      11. Link
      12. Page
      13. Platform
      14. Protocol
      15. Search Site
      16. Tag
      17. Uniform Resource Locator (URL)
      18. Web Administrator
      19. Web Master
      20. Web Site

    HTML CODE

  2. Overview Quiz–Edmodo

 

 

 

 

 

 

 

 

 

 

 

 

  1. HTML CODE: Before you leave today you will know how to the write the code to start a web page.
    1. Overview HTML–Slides 14-27–Plug in your headphones and listen to the sound file and view the PowerPoint as you listen.
    2. In a Google Doc, please share the following with me:
      1. What is a tag?
      2. What is the difference between a container tag and an empty tag? Write an example of each.
      3. What is an attribute?
      4. Is a tag a noun or adjective? Is an attribute a noun or attribute?
      5. What special characters enclose HTML tags?
      6. In HTML container tags what distinguishes the ending tag from the beginning tag?
      7. What does the World Wide Web Consortium (W3C) do?
    1. Overview Terminology you need to be familiar with:
      1. Attribute
      2. Browser
      3. Deprecated
      4. Domain Name
      5. Document
      6. Hyper Document
      7. Hypertext Markup Language (HTML)
      8. Internt Protocol address (IP)
      9. Internet Service
      10. Provider (ISP)
      11. Link
      12. Page
      13. Platform
      14. Protocol
      15. Search Site
      16. Tag
      17. Uniform Resource Locator (URL)
      18. Web Administrator
      19. Web Master
      20. Web Site

    HTML CODE

  2. Overview Quiz–Edmodo
  3. First Page View all slides
  4. Answer the following questions in a Google Doc:
    1. What tag appears first on every web page? Write it.
    2. What tag appears second on every web page? Write it.
    3. What is contained in the HEAD tag?
    4. Can you see on a web page what is contained in the HEAD?
    5. What tag should be included in the HEAD tag?
    6. What some reasons why the contents of the <title> element should be short and descriptive?
    7. Should you use upper or lowercase text when writing code?
    8. What is the difference between metadata and content? Between what tags does metadata appear? Between what tags does content appear?
    9. What does the meta tag do?
    10. What appears between the ending HEAD tag and the beginning BODY tag?
    11. Which is bigger font size H1 or H6?
    12. If you have 3 paragraphs, can you put all 3 paragraphs within 1 set of <p> tags?
    13. What do the following empty tags do?
      1. <hr>
      2. <br>
    14. How are comments used with an HTML document?
    15. What is deprecated code?
  5. Begin making a web page together.
  1. HTML CODE–Before you leave today you will be able to write code to create a webpage and you will be able to preview the page using Internet Explorer.
  2. First Page View all slides
  3. Answer the following questions in a Google Doc:
    1. What tag appears first on every web page? Write it.
    2. What tag appears second on every web page? Write it.
    3. What is contained in the HEAD tag?
    4. Can you see on a web page what is contained in the HEAD?
    5. What tag should be included in the HEAD tag?
    6. What some reasons why the contents of the <title> element should be short and descriptive?
    7. Should you use upper or lowercase text when writing code?
    8. What is the difference between metadata and content? Between what tags does metadata appear? Between what tags does content appear?
    9. What does the meta tag do?
    10. What appears between the ending HEAD tag and the beginning BODY tag?
    11. Which is bigger font size H1 or H6?
    12. If you have 3 paragraphs, can you put all 3 paragraphs within 1 set of <p> tags?
    13. What do the following empty tags do?
      1. <hr>
      2. <br>
    14. How are comments used with an HTML document?
    15. What is deprecated code?
  4. Continue making a web page together–page 64–Apply Your Knowledge
  5. Create a web page–with a partner–page 65–In The Lab
  6. Create a web page–on your own–page 66–In The Lab–Show me
  7. Get the file for the HTML textbook saved–follow the instructions inside the BACK COVER of the HTML textbook–SKIP #1
  8. Create a web page–on your own–page 67–show me–for a grade
  9. Create a web page–on your own–page 68, 1-4–Pick one. You will present it to the class.
  1. HTML CODE
  2. Before you leave the class today you will apply what you have learned about HTML code to creating webpages from scratch both with a partner and on your own.
  3. Continue making a web page together–page 64–Apply Your Knowledge
  4. Create a web page–with a partner–page 65–In The Lab
  5. Create a web page–on your own–page 66–In The Lab–Show me
  6. Create a web page–on your own–page 67–show me–for a grade
  7. Create a web page–on your own–page 68, 1-4–Pick one. You will present it to the class.
  1. HTML CODE–Before you leave today you will be able to apply what you have learned about writing code so far to creating web pages from scratch with a partner and on your own.
  2. Create a web page–with a partner–page 65–In The Lab
  3. Create a web page–on your own–page 66–In The Lab–Show me
  4. Create a web page–on your own–page 67–show me–for a grade
  5. Create a web page–on your own–page 68, 1-4–Pick one. You will present it to the class.
  1. HTML CODE–Before you leave today you will be able to apply what you have learned about writing code so far to creating web pages from scratch with a partner and on your own.
    1. Create a web page–on your own–page 66–In The Lab–Show me
    2. Create a web page–on your own–page 67–show me–for a grade
    3. Create a web page–on your own–page 68, 1-4–Pick one. You will present it to the class.
  1. Before you leave today you will be able to practice your presentation skills by showing the class your own web site. Take pride in your work!!
  2. HTML CODE
  3. Create a web page–on your own–page 68, 1-4–Pick one. You will present it to the class.
  1. Before you leave today you will be able to practice your presentation skills by showing the class your own web site. Take pride in your work!!
  2. HTML CODE
  3. Create a web page–on your own–page 68, 1-4–Pick one. You will present it to the class.
    1. When you present, be sure to tell the class the following:
      1. Which one you chose from page 68
      2. Why you chose it
      3. What you did that went above & beyond
  1. Those that did not present last class, present now.
  2. Before you leave today you will have the opportunity to review what you have learned so far about HTML code and you will also know how to use the Web Developer toolbar in Firefox.
  3. HTML CODE
  4. Download Firefox–go to www.firefox.com
  5. First Page Part II–Listen and follow along
      1. Copy and paste begining code first
      2. Title page
      3. Save
      4. Preview using Firefox
      5. www.lipsum.org–used temporarily to fill text space
      6. Be sure the Web Developer toolbar is available in Firefox.
  6. What should the first page of a website be named?
  7. What does the browser show automatically between paragraphs?
  8. Which is text is larger <h1> or <h6>?
  9. What does the <hr> tag do?
  10. What does the <br> tag do?
  11. How can you check to be sure your code is correct?

Before you leave today you will know how to insert hyperlinks within a page, within a website, or out to another webiste.

  1. In a note to me in Edmodo, answer the following questions using good writing skills:
    1. What should the first page of a website be named?
    2. What does the browser show automatically between paragraphs?
    3. Which is text is larger <h1> or <h6>?
    4. What does the <hr> tag do?
    5. What does the <br> tag do?
    6. How can you check to be sure your code is correct?
  2. Links–View the PowerPoint
    1. Hyperlinks Part I –Listen as you view the PowerPoint. Be sure to answer the following questions as you go:
  3. Be sure you can answer the following questions:
    1. What is chunking?
    2. Why is keeping contents of a page short important?
    3. Where does an intrapage link take you? When are they used?
    4. Where does an intrasystem link take you?
    5. Where does an intersystem link take you?
    6. How many parts must you have for an intrapage link? What does it look like or what do they look like? Where do they appear on the page?
    7. What is the difference between a relative and absolute path? Which is most commonly used?
    8. Is it a good idea to link to an outside website? Explain.
    9. What should be included in a page footer?
  1. What is validating using Firefox? Create the following 2 webpages and then we will validate together.
  2. Apply What You Have Learned
    1. Create a new blank web page in Dreamweaver using Strict DOCTYPE. Include the following on the page:
      1. save it–this is your homepage
      2. appropriate title
      3. comment in head section
      4. 6 paragraphs from www.lipsum.org
      5. h1, h2, h3, h4, h5, h6 tags
      6. br tag
      7. hr tag
      8. intrapage link
      9. appropriate information in the footer
      10. intrasystem link to the second page (do this AFTER you do #2 below)
    2. Create another new blank web page in Dreamweaver using Strict DOCTYPE. Include the following the page:
      1. appropriate title
      2. comment in head section
      3. 2 paragraphs from www.ipsum.org
      4. br tag
      5. hr tag
      6. intrasystem link to the first page
      7. intersystem link to another website
      8. appropriate information in the footer
    3. Validate both pages in Firefox–print both validation pages
    4. Print–code for both pages, web page for both pages

GOAL: Before you leave today you will know about HTML fonts, styles, and links.

  1. WATCH THIS VIDEO ABOUT DREAMWEAVER & HTML–The Body
  2. Complete HTML Formatting and everything from last class: HERE IS THE UPDATED COPY OF THE HTML TUTORIAL–IT INCLUDES ALL SECTIONS IN THE W3SCHOOLS TUTORIAL!!! HTML-TUTORIAL–USE IT!!!!! TRANSFER YOUR ANSWERS!!!
  3. THERE ARE EXTRA SECTIONS IN W3SCHOOLS THAT ARE NOT IN THE HTML TUTORIAL WORD FILE I CREATED……..PLEASE do ALL the W3SCHOOLS tutorials whether they are in the HTML Word Tutorial Handout or not–TAKE NOTES for all the missing sections–SHARE the file with me at the end of class.

GOAL: Before you leave today you will know about HTML fonts, styles, and links.

  1. Complete HTML Formatting and everything from last class.
  2. THERE ARE EXTRA SECTIONS IN W3SCHOOLS THAT ARE NOT IN THE HTML TUTORIAL WORD FILE I CREATED……..PLEASE do ALL the W3SCHOOLS tutorials whether they are in the HTML Word Tutorial Handout or not–TAKE NOTES for all the missing sections–SHARE the file with me at the end of class.
  3. Go to Edmodo and complete the Copy #1 of HTML Overview–this is a PRACTICE quiz–the recorded quiz will be next class.
  4. HTML-TUTORIAL–USE IT!!!!! TRANSFER YOUR ANSWERS!!! SHARE THIS WITH ME AT THE END OF CLASS!!!
    1. HTML Links–Watch these 2 clips first
      1. How to Create a Link to Another Website and How to Create a Link to Another PAGE within YOUR website.
      2. How to Create Named Anchors within a Webpage
  5. QUIZ NEXT CLASS

GOAL: Before you leave today you will know about HTML styles, formatting, quotations, computercode, and comments.

  1. Goal today is to complete the following chapters in the HTML Basic Tutorial:
    1. HTML Styles
    2. HTML Formatting
    3. HTML Quotations
    4. HTML Computercode
    5. HTML Comments

You will be asked to begin creating a website using what you learned from the tutorial, so experiment! If you have time, create a couple pages using the layouts mentioned in the tutorial. We will NOT use tables for web page layouts. Use <div>s and frames.

GOAL: Before you leave today you will understand CSS. TODAY IS A VERY IMPORTANT DAY!!! TAKE YOUR TIME!!

CSS–Watch the following videos first BEFORE YOU COMPLETE THE HTML CSS STYLES SECTION OF THE HTML TUTORIAL:

  1. CSS Tutorial 1
  2. CSS Tutorial 2
  3. CSS Tutorial 3
  4. CSS Tutorial 4
  5. CSS Tutorial 5–Relationships
  6. CSS Tutorial 6
  7. CSS Tutorial 7
  8. CSS Tutorial 8
  9. In a Google Doc shared with me, tell me what you learned today and how you think this will help you in the future.
  10. HTML CSS

GOAL: Before you leave class today you will know how to apply the following HTML concepts: Links, Images, and Tables

  1. HTML Links
  2. HTML Images
  3. HTML Tables–View this YouTube Video first

You will be asked to begin creating a website using what you learned from the tutorial, so experiment! If you have time, create a couple pages using the layouts mentioned in the tutorial. We will NOT use tables for web page layouts. Use <div>s and frames.

GOAL: Before you leave today you will understand HTML lists, blocks, classes, and layouts.

  1. HTML Tables–View this YouTube Video first
  2. HTML Lists
  3. HTML Blocks
  4. HTML Classes
  5. HTML Layouts

You will be asked to begin creating a website using what you learned from the tutorial, so experiment! If you have time, create a couple pages using the layouts mentioned in the tutorial. We will NOT use tables for web page layouts. Use <div>s and frames.

GOAL: Before you leave today you will understand HTML lists, blocks, classes, and layouts.

  1. HTML Tables–View this YouTube Video first
  2. HTML Lists
  3. HTML Blocks
  4. HTML Classes
  5. HTML Layouts

You will be asked to begin creating a website using what you learned from the tutorial, so experiment! If you have time, create a couple pages using the layouts mentioned in the tutorial. We will NOT use tables for web page layouts. Use <div>s and frames.

FINISH THE LESSON PLAN FROM LAST CLASS

GOAL: Before you leave class today you will know how to create a Dreamweaver webpage that utilizes tables & lists.

RIGHT NOW:

  1. Create a new FOLDER on your Google Drive on your machine named PAGEPRACTICE
  2. Inside the PAGEPRACTICE folder create another folder named ASSETS (this is where you will save any picture, documents, etc. that are associated with this website)
  3. Create a new blank webpage using Dreamweaver. Save it to your PAGEPRACTICE folder as index.html (it is the homepage)
  4. Include the following on the page:
    1. 2 Tables (one with a border and one without a border)
      1. col span
      2. th
      3. td
      4. row span
      5. caption
    2. Lists (challenge: include the lists in the table to eliminate scrolling…….!!!)
      1. ordered
      2. unordered
    3. HTML Comments
    4. Image
    5. And the following tags:
      1. heading 1, 2, 3, 4, 5, 6
      2. paragraph
      3. line break
      4. italics
      5. bold
      6. quote
      7. blockquote
      8. abbreviation
      9. definition

GOAL: Before you leave class today you will know how to create a Dreamweaver webpage that utilizes tables & lists.

CONTINUE:

  1. Create a new FOLDER on your Google Drive on your machine named PAGEPRACTICE
  2. Inside the PAGEPRACTICE folder create another folder named ASSETS (this is where you will save any picture, documents, etc. that are associated with this website)
  3. Create a new blank webpage using Dreamweaver. Save it to your PAGEPRACTICE folder as index.html (it is the homepage)
  4. Include the following on the page:
    1. 2 Tables (one with a border and one without a border)
      1. col span
      2. th
      3. td
      4. row span
      5. caption
    2. Lists (challenge: include the lists in the table to eliminate scrolling…….!!!)
      1. ordered
      2. unordered
    3. HTML Comments
    4. Image
    5. And the following tags:
      1. heading 1, 2, 3, 4, 5, 6
      2. paragraph
      3. line break
      4. italics
      5. bold
      6. quote
      7. blockquote
      8. abbreviation
      9. definition

GOAL: Before you leave class today you will know how to create a Dreamweaver webpage that utilizes tables & lists.

FINISH:

  1. Create a new FOLDER on your Google Drive on your machine named PAGEPRACTICE
  2. Inside the PAGEPRACTICE folder create another folder named ASSETS (this is where you will save any picture, documents, etc. that are associated with this website)
  3. Create a new blank webpage using Dreamweaver. Save it to your PAGEPRACTICE folder as index.html (it is the homepage)
  4. Include the following on the page:
    1. 2 Tables (one with a border and one without a border)
      1. col span
      2. th
      3. td
      4. row span
      5. caption
    2. Lists (challenge: include the lists in the table to eliminate scrolling…….!!!)
      1. ordered
      2. unordered
    3. HTML Comments
    4. Image
    5. And the following tags:
      1. heading 1, 2, 3, 4, 5, 6
      2. paragraph
      3. line break
      4. italics
      5. bold
      6. quote
      7. blockquote
      8. abbreviation
      9. definition

SHOW ME YOUR PAGE & do make up work!

GOAL: Before you leave today you will understand the following about HMTL:

  1. HTML Responsive
  2. HTML iFrames–Watch this YouTube video first and DO what it tells you to do
  3. HTML Color Names
  4. HTML Color Values
  5. HTML Color Shades
  6. HTML JavaScript
  7. HTML <head>–Watch this video first

You will be asked to begin creating a website using what you learned from the tutorial, so experiment! If you have time, create a couple pages using the layouts mentioned in the tutorial. We will NOT use tables for web page layouts. Use <div>s and frames.

FINISH LESSON PLAN FROM LAST CLASS

GOAL: Finish the w3school tutorial.

  1. HTML Entities
  2. HTML Symbols
  3. HTML Charset
  4. HTML URLs
  5. HTML XHTML
  6. HTML Forms Section–Watch this YouTube video first

GOAL: Apply what you know about forms.

Create a webpage that includes a form. Save it to your PAGEPRACTICE folder.

Include the following on the form:

  • Text Field
  • Radio Buttons
  • List
  • Submit
  • Reset
  • Checkboxes

You will be asked to begin creating a website using what you learned from the tutorial, so experiment! If you have time, create a couple pages using the layouts mentioned in the tutorial. We will NOT use tables for web page layouts. Use <div>s and frames.

GOAL: You will have the opportunity to demonstrate your knowledge of html.

Before you leave today you will have the opportunity to apply what you have learned about HTML code to a new website you will create from scratch. You will be expected to use iFrames, CSS (external, internal, and inline), div tags, and forms.

  1. Review for about 10 minutes before taking the test–use the tutorials
  2. Take the QuizDo a Print Screen (hold down the CTRL button and hit the PRT SC button in the top row of your keyboard). Then, TURN IN the quiz PASTING the print screen into an email message to me.
  3. Before we advance, you are going to have the opportunity to create a basic web site.
    1. Create a new folder for this site in your Google Drive on your machine. This website will be for a coffee shop. You pick the name. Remember: no spaces and all lowercase.
    2. Watch and do this video--get Dreamweaver on 1/2 your screen and the video on the other 1/2.
    3. Create a folder inside your site folder named ASSETS
    4. Watch and do the following video clip about DIV tags & CSS
    5. Apply what you learned from the video to your index.html page for your coffee shop website.
    6. All page layouts need to be created using <div> and frames!!! You will be required to use an external, internal, and inline CSS in this site. WATCH THIS VIDEO NOW!! To see how to use an External Style Sheet and DIV containers in Dreamweaver. THIS VIDEO IS LONG, but very good!!! He talks FAST, so you will have to pause & rewind frequently…..TAKE YOUR TIME!!! You work on your home page today. Get the layout established today, then you can copy and paste the code for the layout into your other web page files for this site.
      1. Use div tags to design the layout of your pages.
      2. Use an external style sheet to set your background color, font, etc. for your entire website
    7. Be sure to preview your pages often!! Do not go by the design or live view only! Preview using Internet Explorer & Chrome & FireFox….if you don’t know how to do this ASK FOR HELP!!!
    8. Here is how you will be graded: authorwebdevhtmlbasicwebsiterubric

 

GOAL: Before you leave today you will have the layout for all your pages established and you will have created an external style sheet that you attached to your homepage (index.htm).

  1. Before we advance, you are going to have the opportunity to create a basic web site.
    1. Create a new folder for this site in your Google Drive on your machine. This website will be for a coffee shop. You pick the name. Remember: no spaces and all lowercase.
    2. Watch and do this video--get Dreamweaver on 1/2 your screen and the video on the other 1/2.
    3. Create a folder inside your site folder named ASSETS
    4. Watch and do the following video clip about DIV tags & CSS
    5. Apply what you learned from the video to your index.html page for your coffee shop website.
    6. WATCH THIS VIDEO NOW!! To see how to use an External Style Sheet and DIV 2containers in Dreamweaver. THIS VIDEO IS LONG, but very good!!! He talks FAST, so you will have to pause & rewind frequently…..TAKE YOUR TIME!!! You work on your home page today. Get the layout established today, then you can copy and paste the code for the layout into your other web page files for this site.
      1. Use div tags to design the layout of your pages.
      2. Use an external style sheet to set your background color, font, etc. for your entire website
    7. Be sure to preview your pages often!! Do not go by the design or live view only! Preview using Internet Explorer & Chrome & FireFox….if you don’t know how to do this ASK FOR HELP!!!
    8. Here is how you will be graded: authorwebdevhtmlbasicwebsiterubric
  2. SHOW ME WHEN YOU HAVE YOUR LAYOUT FINISHED AND YOUR EXTERNAL STYLE SHEET CREATED AND ATTACHED TO YOUR HOMEPAGE (index.htm)
  3. Begin creating your other pages. They can be named whatever you choose, just make sure:
    1. they are all lowercase with no spaces
    2. they contain thle filename extension of .html
    3. they are saved to your coffee shop folder
  4. Once your pages are created, you can begin hyperlinking. Use w3schools to help.
  5. Here is how you will be graded: authorwebdevhtmlbasicwebsiterubric
  6. Before you leave today, send me a note in Edmodo describing what you learned today that will be helpful when creating future websites. 3-5 sentences. Use good GUM!!

WORK ON:

GOAL: Before you leave today you will have the layout for all your pages established and you will have created an external style sheet that you attached to your homepage (index.htm).

  1. Before we advance, you are going to have the opportunity to create a basic web site.
    1. Create a new folder for this site in your Google Drive on your machine. This website will be for a coffee shop. You pick the name. Remember: no spaces and all lowercase.
    2. Watch and do this video--get Dreamweaver on 1/2 your screen and the video on the other 1/2.
    3. Create a folder inside your site folder named ASSETS
    4. Watch and do the following video clip about DIV tags & CSS
    5. Apply what you learned from the video to your index.html page for your coffee shop website.
    6. WATCH THIS VIDEO NOW!! To see how to use an External Style Sheet and DIV 2containers in Dreamweaver. THIS VIDEO IS LONG, but very good!!! He talks FAST, so you will have to pause & rewind frequently…..TAKE YOUR TIME!!! You work on your home page today. Get the layout established today, then you can copy and paste the code for the layout into your other web page files for this site.
      1. Use div tags to design the layout of your pages.
      2. Use an external style sheet to set your background color, font, etc. for your entire website
    7. Be sure to preview your pages often!! Do not go by the design or live view only! Preview using Internet Explorer & Chrome & FireFox….if you don’t know how to do this ASK FOR HELP!!!
    8. Here is how you will be graded: authorwebdevhtmlbasicwebsiterubric
  2. SHOW ME WHEN YOU HAVE YOUR LAYOUT FINISHED AND YOUR EXTERNAL STYLE SHEET CREATED AND ATTACHED TO YOUR HOMEPAGE (index.htm)
  3. Begin creating your other pages. They can be named whatever you choose, just make sure:
    1. they are all lowercase with no spaces
    2. they contain thle filename extension of .html
    3. they are saved to your coffee shop folder
  4. Once your pages are created, you can begin hyperlinking. Use w3schools to help.
  5. Here is how you will be graded: authorwebdevhtmlbasicwebsiterubric
  6. Before you leave today, send me a note in Edmodo describing what you learned today that will be helpful when creating future websites. 3-5 sentences. Use good GUM!!

WORK ON:

GOAL: Before you leave today you will have the layout for all your pages established and you will have created an external style sheet that you attached to your homepage (index.htm).

  1. Before we advance, you are going to have the opportunity to create a basic web site.
    1. Create a new folder for this site in your Google Drive on your machine. This website will be for a coffee shop. You pick the name. Remember: no spaces and all lowercase.
    2. Watch and do this video--get Dreamweaver on 1/2 your screen and the video on the other 1/2.
    3. Create a folder inside your site folder named ASSETS
    4. Watch and do the following video clip about DIV tags & CSS
    5. Apply what you learned from the video to your index.html page for your coffee shop website.
    6. WATCH THIS VIDEO NOW!! To see how to use an External Style Sheet and DIV 2containers in Dreamweaver. THIS VIDEO IS LONG, but very good!!! He talks FAST, so you will have to pause & rewind frequently…..TAKE YOUR TIME!!! You work on your home page today. Get the layout established today, then you can copy and paste the code for the layout into your other web page files for this site.
      1. Use div tags to design the layout of your pages.
      2. Use an external style sheet to set your background color, font, etc. for your entire website
    7. Be sure to preview your pages often!! Do not go by the design or live view only! Preview using Internet Explorer & Chrome & FireFox….if you don’t know how to do this ASK FOR HELP!!!
    8. Here is how you will be graded: authorwebdevhtmlbasicwebsiterubric
  2. SHOW ME WHEN YOU HAVE YOUR LAYOUT FINISHED AND YOUR EXTERNAL STYLE SHEET CREATED AND ATTACHED TO YOUR HOMEPAGE (index.htm)
  3. Begin creating your other pages. They can be named whatever you choose, just make sure:
    1. they are all lowercase with no spaces
    2. they contain thle filename extension of .html
    3. they are saved to your coffee shop folder
  4. Once your pages are created, you can begin hyperlinking. Use w3schools to help.
  5. Here is how you will be graded: authorwebdevhtmlbasicwebsiterubric
  6. Before you leave today, send me a note in Edmodo describing what you learned today that will be helpful when creating future websites. 3-5 sentences. Use good GUM!!

FINISH:

GOAL: Before you leave today you will have the layout for all your pages established and you will have created an external style sheet that you attached to your homepage (index.htm).

  1. Before we advance, you are going to have the opportunity to create a basic web site.
    1. Create a new folder for this site in your Google Drive on your machine. This website will be for a coffee shop. You pick the name. Remember: no spaces and all lowercase.
    2. Watch and do this video--get Dreamweaver on 1/2 your screen and the video on the other 1/2.
    3. Create a folder inside your site folder named ASSETS
    4. Watch and do the following video clip about DIV tags & CSS
    5. Apply what you learned from the video to your index.html page for your coffee shop website.
    6. WATCH THIS VIDEO NOW!! To see how to use an External Style Sheet and DIV 2containers in Dreamweaver. THIS VIDEO IS LONG, but very good!!! He talks FAST, so you will have to pause & rewind frequently…..TAKE YOUR TIME!!! You work on your home page today. Get the layout established today, then you can copy and paste the code for the layout into your other web page files for this site.
      1. Use div tags to design the layout of your pages.
      2. Use an external style sheet to set your background color, font, etc. for your entire website
    7. Be sure to preview your pages often!! Do not go by the design or live view only! Preview using Internet Explorer & Chrome & FireFox….if you don’t know how to do this ASK FOR HELP!!!
    8. Here is how you will be graded: authorwebdevhtmlbasicwebsiterubric
  2. SHOW ME WHEN YOU HAVE YOUR LAYOUT FINISHED AND YOUR EXTERNAL STYLE SHEET CREATED AND ATTACHED TO YOUR HOMEPAGE (index.htm)
  3. Begin creating your other pages. They can be named whatever you choose, just make sure:
    1. they are all lowercase with no spaces
    2. they contain thle filename extension of .html
    3. they are saved to your coffee shop folder
  4. Once your pages are created, you can begin hyperlinking. Use w3schools to help.
  5. Here is how you will be graded: authorwebdevhtmlbasicwebsiterubric
  6. Before you leave today, send me a note in Edmodo describing what you learned today that will be helpful when creating future websites. 3-5 sentences. Use good GUM!!

 

FINISH:

GOAL: Before you leave today you will have the layout for all your pages established and you will have created an external style sheet that you attached to your homepage (index.htm).

  1. Before we advance, you are going to have the opportunity to create a basic web site.
    1. Create a new folder for this site in your Google Drive on your machine. This website will be for a coffee shop. You pick the name. Remember: no spaces and all lowercase.
    2. Watch and do this video--get Dreamweaver on 1/2 your screen and the video on the other 1/2.
    3. Create a folder inside your site folder named ASSETS
    4. Watch and do the following video clip about DIV tags & CSS
    5. Apply what you learned from the video to your index.html page for your coffee shop website.
    6. WATCH THIS VIDEO NOW!! To see how to use an External Style Sheet and DIV 2containers in Dreamweaver. THIS VIDEO IS LONG, but very good!!! He talks FAST, so you will have to pause & rewind frequently…..TAKE YOUR TIME!!! You work on your home page today. Get the layout established today, then you can copy and paste the code for the layout into your other web page files for this site.
      1. Use div tags to design the layout of your pages.
      2. Use an external style sheet to set your background color, font, etc. for your entire website
    7. Be sure to preview your pages often!! Do not go by the design or live view only! Preview using Internet Explorer & Chrome & FireFox….if you don’t know how to do this ASK FOR HELP!!!
    8. Here is how you will be graded: authorwebdevhtmlbasicwebsiterubric
  2. SHOW ME WHEN YOU HAVE YOUR LAYOUT FINISHED AND YOUR EXTERNAL STYLE SHEET CREATED AND ATTACHED TO YOUR HOMEPAGE (index.htm)
  3. Begin creating your other pages. They can be named whatever you choose, just make sure:
    1. they are all lowercase with no spaces
    2. they contain thle filename extension of .html
    3. they are saved to your coffee shop folder
  4. Once your pages are created, you can begin hyperlinking. Use w3schools to help.
  5. Here is how you will be graded: authorwebdevhtmlbasicwebsiterubric
  6. Before you leave today, send me a note in Edmodo describing what you learned today that will be helpful when creating future websites. 3-5 sentences. Use good GUM!!
  1. Show me your home page today.
  2. Create 4 new pages (save them to your folder for this web site):
    1. menu.htm
    2. hours.htm
    3. feedback.htm
    4. contactus.htm
  3. Use the same layout (copy and paste the code from you home page to your other pages) on the other pages of your web site.
  4. Customize each page
  5. Be sure to link all pages to each other

GOAL: Before you leave today you will be able to attach an external style sheet to your web pages.

  1. Create 4 new pages (save them to your folder for this web site):
    1. menu.htm
    2. hours.htm
    3. feedback.htm
    4. contactus.htm
  2. Use the same layout (copy and paste the code from you home page to your other pages) on the other pages of your web site.
    1. Customize each page
    2. Be sure to link all pages to each other
  3. External Style Sheet–This effects EVERY PAGE of your website.
  4. Put in the EXTERNAL STYLE SHEET–this is everything that would apply to ALL pages in your site.
  5. Here is how you will be graded: authorwebdevhtmlbasicwebsiterubric
  6. SHOW ME YOUR FOLDER for the Coffee Shop Web Site!!
  7. At the end of class today, share a Google Doc with me explaining what you accomplished and what questions you have.

FINISH THE COFFEE SHOP WEB SITE: Here is how you will be graded: authorwebdevhtmlbasicwebsiterubric

Get Worksheet 3 from your instructor. Use the Internet to find your answers. It is due today. Use Little Web Hut and W3Schools to help you.

How do you VALIDATE a web page? Look it up. Tell me what you find in a Google Doc shared with me.

Begin working on Exercise 3.1 –Due next class.

Finish Exercise 3.1–validate & print as instructed

Do Exercise 3.2 –validate & print as instructed

Finish Exercise 3.1–validate & print as instructed

Do Exercise 3.2 –validate & print as instructed

Finish 3.2–Print as instructed

Get Worksheet 4 from your instructor. Use the Internet to find your answers. It is due today. Use Little Web Hut and W3Schools to help you.

 

Exercise 4.1

Exercise 4.2

FINISH 4

TURN IN:
Worksheet 4

4.1

4.2

FINISH 4

TURN IN:
Worksheet 4

4.1

4.2

Get Worksheet 5 from your instructor. Use the Internet to find your answers. It is due today. Use Little Web Hut and W3Schools to help you. THIS IS ON MY DESK IN THE PILE ON THE LEFT. EMAIL ME IF YOU CANNOT FIND IT.

FINISH 4

FINISH 4

Turn Worksheet 5

Exercise 5.1–SHOW ME

Exercise 5.2–SHOW ME

Exercise 5.3–SHOW ME

QUIZ NEXT CLASS

Exercise 5.2–SHOW ME

Exercise 5.3–SHOW ME

QUIZ NEXT CLASS

Exercise 5.2–SHOW ME

Exercise 5.3–SHOW ME

QUIZ NEXT CLASS

YOU NEED TO TAKE THE QUIZ TODAY!!

QUIZ–WRITTEN & HANDS ON

FINISH THE QUIZ

ALEX: Begin your final project–Get the handout from Mrs. Weber–PICK A LOCAL BUSINESS–if possible!!

SCENARIO: You have been hired as a web site designer by the Bellevue Cal Ripken/Babe Ruth Baseball & Softball League to create their website.

Get Worksheet 6 from your instructor. Use the Internet to find your answers. It is due today. Use Little Web Hut and W3Schools to help you.

Begin Exercise 6.1a

THE TEXT YOU NEED:

Colors of Sapphire Gwen’s Glorious Gemstone Gallery Sapphire Colors The term “Sapphire” used to mean blue stones. Now it is used to refer to any colored Corundum except red, which is called “ruby.” True Sapphire. The finest sapphire color is rich, cornflower blue. This is called “Kashmir” color to honor the traditional source of the finest quality stones. In recent times, the Kashmir region of India is not being mined because it is so difficult to get to. Africa, Australia, Burma, Montana, Sri Lanka, and Thailand are the source of new stones. Oriental Emerald or green sapphire Green Sapphire isn’t a brilliant Emerald green, it is more of a bluish green or grey-green color. It is very common, and so is of lower value than some of the other colors. As with all the other colors of Sapphire except Ruby, green Sapphires are always heat treated at the mine to enhance their color. Untreated green Sapphires are not available. Oriental Topaz or golden sapphire These stones are much less common than green Sapphires, and so are more valuable. It is very rare to find an untreated golden sapphire, but some do exist. You need to be very sure of your gemologist before you buy an untreated stone. Golden Sapphires range from brilliant yellow to almost orange. Padparadscha rare pink-orange sapphire One of the rarest forms of Sapphire, the “padparadscha” color means “lotus blossom” in the Sinhalese language. These wonderful stones are only found in Sri Lanka, and are always heat treated to intensify the color and remove inclusions. Back to the styles page. Gwen’s Glorious Gemstone Gallery 231 Lee Street Emporia, VA 23847 733-436-7829 Come visit, you won’t be disappointed!

The Sapphire Story Gwen’s Glorious Gemstone Gallery The Sapphire Story Even though the Sapphire is a prized gem, it is chemically identical to the abrasive on fine emery paper. That is because a Sapphire, (as well as a Ruby), is composed of corundum. The difference between a ruby and an abrasive is in the crystalline form. History The ancient Persians believed that the blue of the sky was the reflection of a giant Sapphire upon which the earth rested. Kings and royalty wore Sapphire to protect them from harm. In addition, since the rays of a Sapphire were supposed to kill poisonous snakes, they were thought to be proof against poison. The Sapphire, besides protecting from harm, was supposed to attract the favor of the gods, while protecting the wearer from the envy of their peers. The word Sapphire comes from the word “Sappheiros” which is Greek for “blue.” By far the most common color for a Sapphire is blue. However, corundum comes in many colors which range from nearly transparent to opaque black. Inclusions In most gems inclusions reduce the value of a particular stone. However, with Sapphires, there are some inclusions which increase the value because of what they do to light when it moves through the stone. There are long, rod shaped inclusions known as Rutile needles cause some polished Sapphires to exhibit asterism, or the appearance of a star of 4, 6, or even 12 rays that moves around the stone as it is rotated. These stars may be more or less pronounced depending upon the concentration of Rutile needles in that particular stone. Another effect seen in Sapphires is called “cats eye”, where a band of bright color is reflected along the midline of the stone. This is rare, and so cats eye Sapphires are somewhat more expensive. Uses Besides as a beautiful jewelry stone, Sapphires have value as abrasives. Since only diamonds are harder, Sapphires can be used to wear down, or abrade, other materials. Emery paper and garnet paper are examples of the stones being used in this manner. Most commercial Sapphires are man made, and the art is well advanced. Companies can create Sapphires of varying sizes to provide uniform grit for abrasive uses. One of the more interesting uses for synthetic Sapphire is the crystal of the Rolex Submariner watch. Since the Sapphire is so hard, the crystal of a Submariner won’t be scratched by anything but a diamond. Gwen’s Glorious Gemstone Gallery 231 Lee Street Emporia, VA 23847 733-436-7829 Come visit, you won’t be disappointed!

Corundum Gwen’s Glorious Gemstone Gallery Corundum Corundum is simply Aluminum Oxide, AL2O3. It is harder than any other mineral except diamond. That is why is is such a wonderful abrasive. It does not cleave, and it fractures cleanly with multiple facets, so when put under load, it makes new faces that are sharp and cut well. This is very useful when it is used as an abrasive, as when used to grind metal. When Corundum is mostly or at least partly transparent, and has color, it forms one of many different gems. The most common, and most valuable two are ruby, the red colored Corundum, and Sapphire, which occurs in many other colors. One exceptionally fine form of Corundum is called Emery. It is a black abrasive which is mined. The term “Emery paper” used to describe papers which had actual Emery bonded to it. Another form of Corundum abrasive paper is “Garnet paper”, which, no surprise, has garnet bonded to it. Both these papers are common in finer cabinet shops. However, if you don’t need the fine abrasive qualities of these papers, you can use good old “Sand paper” which is paper with quartz crystals bonded to it. Corundum is easily created in industry. That means that literally tons of small crystal aluminum oxide crystals can be created. That is the secret of RealRuff abrasive papers. They have a process to create exceptionally fine crystals and a patented bonding process that makes their papers some of the best in the industry. Gwen’s Glorious Gemstone Gallery 231 Lee Street Emporia, VA 23847 733-436-7829 Come visit, you won’t be disappointed!

Exercise 6.1b–SHOW ME

styles.html

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Emerald, the Green Star</title>
</head>
<body>
<h1 style=”color:#0066CC”>Gwen’s Glorious Gemstone Gallery</h1>
<h2>Emerald, the Green Star</h2>
<p align=”center”>
<img align=”middle”
src=”em1.jpg”
alt=”Bright green Emerald”
height=”200″
width=”250″ />
</p>
<hr />
<hr />
<hr />
<p>
An Emerald, with a hardness of 7½ – 8 is one of the hardest minerals.<br>
It is the green variety of the mineral Beryl. It has a chemical composition
of Be<sup>3</sup>Al<sup>2</sup>SiO<sup>6</sup>.
</p>
<a name=”probs”></a>
<p>Emeralds are the most famous of the green gemstones, and also the most
valuable. For this reason, and due to their composition, there are
some <a href=”gems-probs.html”>problems</a> with this particular
group of gem stones.
</p>
<p>The deeper the green, the better the value. The stone shown at the
top of this page is a middle green stone. We have a variety of other
<a href=”gems-stones.html”>stones</a> for sale at the shop.
</p>
<p>
Other, lesser known gem varieties, such as aquamarine and heliodor are also composed of Berl. Pure beryl is white. The green color of Emeralds is due
to either chromium or vanadium impurities. Very pale emeralds are called “green beryl” instead of emerald. Green berl stones are sometimes heat-treated, to become aquamarine.</p>

<p>Emeralds are notorious for their flaws and inclusions. Flawless stones are very uncommon, and so are of great value. However, the true collector prefers stones with inclusions and/or small flaws as they prove that the stone is
natural and unaltered.
</p>
</body>
</html>

 

gems-probs.html

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Problems with Emeralds</title>
</head>
<body>
<h1>Gwen’s Glorious Gemstone Gallery</h1>
<h2>Emeralds available at the shop</h2>

<hr />
<hr />
<hr />
<h3>Stones for sale</h3>
<p> We have a series of stones for sale at the shop. Here are
some of our favorite Emeralds.
</p>
<table border>
<tr>
<th>Number</th>
<th>Image</th>
<th>Description</th>
<th>Cost</th>
</tr>
<tr>
<td>23106</td>
<td><img src=”em1.jpg”
alt=”Emerald #1″
height=”100″
width=”100″>
</td>
<td> This is a wonderful, medium green Emerald with many tiny
inclusions, 4.32ct</td>
<td>264.00</td>
</tr>
<tr>
<td>23110</td>
<td><img src=”em2.jpg”
alt=”Emerald #2″
height=”100″
width=”100″>
</td>
<td>A deep green stone with minor inclusions. This large
Emerald is one of the prizes of our collection. 6.2ct.
</td>
<td>1965.00</td>
</tr>
<tr>
<td>23187</td>
<td><img src=”em5.jpg”
alt=”Emerald #5″
height=”100″
width=”100″>
</td>
<td>This pair of wonderful medium green stones are almost
perfectly matched. The total weight for both is 2.1ct.
</td>
<td>sold</td>
</tr>
</table>
<br />
<a href=”styles.html#probs”>Return</a> to the Emerald page.
<hr />
<br />
Gwen’s Glorious Gemstone Gallery<br />
231 Lee Street<br />
Emporia, VA<br />
23847<br />
733-436-7829<br />
Come visit, you won’t be disappointed!
</body>
</html>

 

gems-stones.html

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Problems with Emeralds</title>
</head>
<body>
<h1 style=”color:#0066CC”>Gwen’s Glorious Gemstone Gallery</h1>
<h2>Emeralds available at the shop</h2>
<p align=”center”>
<img align=”middle”
src=”em2.jpg”
alt=”beautiful green Emerald”
height=”200″
width=”250″ />
</p>
<hr />
<hr />
<hr />
<h3>Fakes</h3>
<p>
There are many different ways to fake an Emerald, and since it
is one of the oldest gemstones, there has been a lot of time for
people to develop imitations. There are three ways emeralds are
“faked”:
</p>
<dl>
<dt>doublets</dt>
<dd>A doublet is usually two pale colored stones glued
together with a green paste between them simulating a
dark, valuable stone.</dd>
<dt>glass</dt>
<dd>Green colored glass can be faceted and sold as an
Emerald. Usually these fakes are treated with a hard
surface coat to hide the softness of the glass.</dd>
<dt>Synthetic stones</dt>
<dd>Many synthetic stones are manufactured and sold as
genuine Emeralds. Often these stones, like glass, can
be identified by their lack of inclusions.</dd>
</dl>
<h3>Damaged stones</h3>
Emeralds can break if they are:
<ol>
<li>subjected to a sharp blow. This is why the “emerald cut”
was developed, it reduces the incidence of breaking stones
as they are cut.</li>
<li>thermally challenged. Emeralds don’t like to have their temperature
changed quickly. You can destroy a beautiful stone by subjecting it
to rapid heating or cooling.</li>
<li>exposed to detergents or water. Many medium value Emeralds are soaked
with oil or wax to hide flaws. Detergent may remove this oil or wax,
leaving the stone liable to breakage along the flaws.</li>
<li>cleaned with ultrasonic cleaners. Like detergents, these cleaners can
remove the protective oils or waxes and subject the stone to vibration
as well.</li>
</ol>
<a href=”styles.html#probs”>Return</a> to the Emerald page.
<hr />
<br />
Gwen’s Glorious Gemstone Gallery<br />
231 Lee Street<br />
Emporia, VA<br />
23847<br />
733-436-7829<br />
Come visit, you won’t be disappointed!
</body>
</html>

ALEX: Final project–Get the handout from Mrs. Weber-New Grandpa’s Parlour website.

Exercise 6.2–SHOW ME

FINISH 6

QUIZ NEXT CLASS

ALEX: Final project–Get the handout from Mrs. Weber

FINISH 6–SHOW ME TODAY

ALEX: Final project–Get the handout from Mrs. Weber

QUIZ–WRITTEN & HANDS ON

ALEX: Final project–Get the handout from Mrs. Weber

FINAL PROJECT–Get the handouts from your teacher–New Grandpa’s Parlour website

ALEX FINISH FINAL PROJECT–SHARE your folder for this website with me. CHECK THE GRADING RUBRIC FOR THE WEB SITE DESIGN–IF YOU HAVE QUESTIONS, PLEASE EMAIL, TEXT, OR CALL ME!! THIS IS DUE TOMORROW!!!

FINAL PROJECT

FINAL PROJECT SCENARIO: Grandpa’s Parlour (a real business in Bellevue) needs a new web site. Follow the instructions on page 1 of the Final Project handout. (Don’t worry about the “Three approved, significantly different roughs…….” We will discuss the grading rubrics next class. Before you leave today you should have completed the following:

  1. create the wireframe for the home page (rough, written design on how page 1 will look)
  2. create a folder for this website with an assets folder in it–SHARE the website folder with me
  3. create the index.html page in Dreamweaver
  4. create the style sheet–you will edit this often

ALEX PRESENT FINAL PROJECT & SCORE THE CLASS:
Create your own user feedback survey

FINAL PROJECT

FINAL PROJECT SCENARIO: Grandpa’s Parlour (a real business in Bellevue) needs a new web site. Follow the instructions on page 1 of the Final Project handout. (Don’t worry about the “Three approved, significantly different roughs…….” We will discuss the grading rubrics next class. Before you leave today you should have completed the following:

  1. finish the home page
  2. add to the .css

ALEX PRESENT FINAL PROJECT & SCORE THE CLASS:
Create your own user feedback survey

FINAL PROJECT

FINAL PROJECT SCENARIO: Grandpa’s Parlour (a real business in Bellevue) needs a new web site. Follow the instructions on page 1 of the Final Project handout. (Don’t worry about the “Three approved, significantly different roughs…….” We will discuss the grading rubrics next class. Before you leave today you should have completed the following:

  1. finish the home page
  2. add to the .css file

FINAL PROJECT

FINAL PROJECT SCENARIO: Grandpa’s Parlour (a real business in Bellevue) needs a new web site. Follow the instructions on page 1 of the Final Project handout. (Don’t worry about the “Three approved, significantly different roughs…….” We will discuss the grading rubrics next class. Before you leave today you should have completed the following:

  1. create the menu page

FINAL PROJECT SCENARIO: Grandpa’s Parlour (a real business in Bellevue) needs a new web site. Follow the instructions on page 1 of the Final Project handout. (Don’t worry about the “Three approved, significantly different roughs…….” We will discuss the grading rubrics next class. Before you leave today you should have completed the following:

  1. create the about us page