IMPORTANT: AT THE END OF EVERY CLASS SEND ME AN EMAIL STATING HOW FAR YOU GOT TODAY AND WHAT YOU LEARNED. THIS WILL BE GRADED!!!

GOAL: By the end of class today you will know all about this course and the expectations for the course

    1. What Kind of Student are You?
    2. Effort & Attitude–Two Things You Can Control
  1. Supplies for the class: EARBUDS!!! Everyday!!
    1. Watch this Introduction video clip
    2. Intro Form–fill this out please
    3. Answer these questions to determine what TYPE of learner you are
      1. You will be asked to tell me what kind of learner (auditory, visually, tactile–the questions you answer from the link will tell you in the end.)
    4. FILL OUT THIS FORM
    5. EXTRA CREDIT: Show your parents this lesson plan and have them visit this part of my website:
      1. Parent Info.
      2. Resources
      3. Web Design
      4. Ask them to fill out the form on the Parent Info. page or the Comments section at the bottom of the Web Design page or the bottom of the home page of my website.
        1. Ask them to tell me what they expect you to learn in this class this quarter.
  2. Edmodo: Class Code: sgcz8p
  3. Since this is a COLLEGE CREDIT COURSE, be sure to login to your EICC account every day!!!
    1. Go to http://www.eicc.edu/
    2. Click on EICConnect on the left side of the screen.
    3. Get your username and password from your teacher or Mr. Jess
  4. Web Design Student Page of Fame
  5. 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 (1 of 6)

 

 

 

 

 

 

 

Free Online Courses:

  1. Today we will continue to work through Project 2.
  2. 2-sided notetaking–copy the following into a Google Doc. Explain what each one represents in your own words to the right of each one. Share it with me. PUT YOUR NAME AT THE TOP!!
    1. <p> </p>
    2. <html> </html>
    3. <head> </head>
    4. <title> </title>
    5. <body bgclolor=”#000000″> </body>
    6. <ul type=”square”> </ul>
    7. <ol type=”A”> </ol>
    8. <li> </li>
    9. <hr />
    10. <img src=”bluecomet.gif” width=”474″ height=”128″ alt=”Bellevue Comet Logo” /
  3. Goal today is to complete the following chapters in the HTML Basic Tutorial:
  1. We will plan to take the test next class.
  2. We will begin VALIDATING every web page as we create them. Validating means the code is error-free and the web page will appear the same in all browser windows. Please use the Firefox Validating handout to help you.
  3. Today we need to finish Project 2.
    1. Finish AYK, In the Labs 1-3
    2. Cases & Places #2–only take 15 minutes at the beginning of class to do this.
    3. After the test we will be working on creating a homepage for your Bellevue Business. You will be graded using the Project 2 Bellevue Business grading rubric. Be sure to look it over.
  4. If time permits, do the review exercises in your study guide. We will take the Project 2 test next class.
  1. Picture Types–you will be held accountable–pages 51-52. Know the difference between them: jpeg, gif, png, etc.
  2. Today we need to finish Project 2.
    1. Finish AYK, In the Labs 1-3
    2. Cases & Places #2
    3. After the test we will be working on creating a homepage for your Bellevue Business. You will be graded using the Project 2 Bellevue Business grading rubric. Be sure to look it over.
  3. If time permits, do the review exercises in your study guide. We will take the Project 2 test next class.
  1. Finish Cases & Places #2
  2. Review for the Project 2 Test by playing the review games.
  1. Take the Project 2 Written Test on another computer. Remember to login as class and your password is xp.
  2. In a new Word file, type a summary of how you plan to use what you learned in Project 2 in your Bellevue business site. You will be graded using the Summarization Grading Rubric posted on my bulletin board. Share it with me in Google Docs.
  3. Today we will continue to work on Project 2.
    1. Create a folder on your drive for your Bellevue business. The name of the folder should be in all lowercase letters with no punctuation marks and no spaces. Remember, right now, you are just creating the home page, so name the home page file in Notepad index.htm and save it to your Bellevue business folder on your drive. Use the Bellevue Business Project 2 Grading Rubric to help you.
    2. Begin the home page for your assigned business. Here is the grading rubric you need to meet
  1. Create a folder on your drive for your Bellevue business. The name of the folder should be in all lowercase letters with no punctuation marks and no spaces. Remember, right now, you are just creating the home page, so name the home page file in Notepad index.htm and save it to your Bellevue business folder on your drive. Use the Bellevue Business Project 2 Grading Rubric to help you.
  1. Before you leave today, show me the progress you have made on your Bellevue Business Site.
  2. Let’s work on the business’ web site you have been assigned. Please print a copy of the actual home page and the code for the page. Hand in the Grading Rubric and Home Page printout. You may not finish today and that is ok, we can work on it next class.
  3. Work on your Bellevue business web site.
  1. Complete your Bellevue Business Site
  2. Print the following before you leave today:
    1. Webpage in Explorer
    2. Code
    3. Grading Rubric
  1. Take the Project 3 Pre Test
  2. Open the Project 3 Study Guide. You will begin by taking the Project 3 Pre Test. Remember that all POST TESTS will go in my grade book, but all PRE TESTS will not. The pre test is designed to give you an overview of the next project.
  3. Let’s work through Project 3 together.
  1. Today we will continue to work on Project 3. As you work, be thinking of ways you can apply the concepts in Project 3 to your assigned business’ web site! You need to be taking pictures of your business. You may either use your own digital camera or you may use one of mine. Just let me know. Remember–any files (including pictures) associated with a web site need to be saved INSIDE the FOLDER for that web site! Do you have one for your business?
  1. Today we will continue working through Project 3.
  1. Thick Question–You had an opportunity to begin working through HTML Project 3 last class, go to Google Docs and describe what is meant by “Absolute Vs. Relative Path” Share it with me.
  2. Today we will continue to work through Project 3 and you will have the opportunity to work on the end of the project exercises. Be sure to follow the Project 3 Study Guide.

Remember to stay in constant contact with your business! If you haven’t already, be sure to request pictures from them. If you haven’t met your business owner face-to-face yet, set up a time to meet with them. This business is YOUR client! Be professional & prepared when meeting with them! It is YOUR JOB to meet their needs!

  1. Thick Question–Explain how you add links within a web page and why you would do this. Use proper sentence structure. Share it with me in a Google Doc
  2. Today we will continue to work on completing Project 3.
  3. By the end of class today you have finished Apply Your Knowledge #1 and In the Lab #1-3.
  4. Follow the instructions in your study guide for Project 3.
  1. Before you leave today you need to be finished with all the In The Labs.

    Continue to work on the In The Lab exercises for Project 3.

Thick Question–Explain how you add links within a web page and why you would do this. Use proper sentence structure. Share it with me in a Google Doc

Continue to work through the Project 3 Assignments.

  1. Today try to be completely finished with the In The Lab exercises before you leave class.
  1. Finish Project 3 Assignments–Follow the Project 3 Study Guide!

CONTACT YOUR BUSINESS OWNER!!

  1. In a Google Doc, describe in your own words what the following mean. Be sure to sure compete sentences AND Share it with me 2(tweber@bellevue.k12.ia.us), give me EDITING capabilities, and put your name on it:
    1. <body link=”000000″ vlink=”000000″ alink=”000000″>
    2. <a href=”desertplants.htm”>
    3. <a href=”mailto:address@email.com”>Tracy Weber</a>
    4. <br clear=”right” />
    5. <a href=”largeimage.gif><img src=”src=thumbnail.gif” /></a>
    6. <a name=”targetname”></a>
    7. <a href=”#targetname”>
  2. Review for the Project 3 test by playing the review games.
  3. Take the Project 3 Test, if time permits.
  4. Today you will begin applying what you learned in Project 3 to your Bellevue business web site. Follow the Grading Rubric for the Bellevue Business assignment for Project 3. Get it from your teacher.
  1. Take the Project 3 Written Test
    1. Log in as class, with xp as a password.
    2. Double click My Computer
    3. Double click the classonserver1 drive
    4. Double click the evplay icon
    5. Choose the HTML Project 3 Post Test
    6. The password for the test is awd
    7. Ask your teacher if you do not remember your student ID number.
  2. Today you will begin applying what you learned in Project 3 to your Bellevue business web site. Follow the Grading Rubric for the Bellevue Business assignment for Project 3. Get it from your teacher.

Today you will begin applying what you learned in Project 3 to your Bellevue business web site. Follow the Grading Rubric for the Bellevue Business assignment for Project 3. Get it from your teacher.

REMINDER: I am going to contact your business owner today!

Today will be the last day to work on your Bellevue Business web site. Before you leave today, be sure to print copies of your web pages. Sometime between now and the next time we work on these web sites, you need to visit with your business owner, face-to-face, to let them see what you have accomplished and to get feedback from them on what you need to do for them. REMEMBER: THEY ARE YOUR CUSTOMER!!!! You need to meet their needs! Use your time wisely! Be sure you are meeting all the requirements in the Bellevue Business Grading Rubic for Project 3.

Today will be the last day to work on your Bellevue Business web site. Before you leave today, be sure to print copies of your web pages. Sometime between now and the next time we work on these web sites, you need to visit with your business owner, face-to-face, to let them see what you have accomplished and to get feedback from them on what you need to do for them. REMEMBER: THEY ARE YOUR CUSTOMER!!!! You need to meet their needs! Use your time wisely! Be sure you are meeting all the requirements in the Bellevue Business Grading Rubic for Project 3.

Remember to keep in touch with your business owner. I update your sites after this class every time we meet, so keep asking them for feedback regarding changes you have made and also remind them of the URL they need to go to in order to see their updated site.

Be sure you are meeting all the requirements in the Bellevue Business Grading Rubic for Project 3.

Show me your Bellevue Business Site before you leave today. This is the first grade for the second quarter.

Before you leave class today you will know how to create a table using HTML code. This is a great way to organize your web pages and to get items on your web page to “stay put”! Before you leave today be sure you understand how to use the following codes and their attributes:

  • table (attributes: align, bgcolor, border, cellspacing, cellpadding, cols, width)
  • tr (align, bgcolor, valign)
  • th and td (align,m bgcolor, colspan, rowspan, valign)

Open the Study Guide for Project 4, which is linked from your classes web page, save it to your drive, and begin. Be sure to follow the Project 4 Study Guide very carefully!!

Before you leave today be sure you know how to create a borderless table, insert images in a table, create a vertical menu bar with text links, and add text to a table cell.

You will have the entire class time today to work on the Project 4 Study Guide. Your goal should be to completely finish the steps by steps today. Next class we will be working on the end of the project assignments.

Describe what each of the following mean to you in your OWN WORDS using a Google Doc. Share it with me:

  1. colspan
  2. <td>
  3. <th>
  4. rowspan
  5. bgcolor
  6. cellspacing
  7. cellpadding
  8. valign
  9. <tr>
  10. border=”0″

Before you leave class today be sure you know the following: how to create secondary web pages, how to create a table with borders, how to add cellspacing, cellpadding, and a caption to a table, how to use spanning rows and columns. Today will be challenging, but YOU CAN DO IT!!!! Finish working through Project 4. Next class you will be working on the Project 4 assignments.

 

Today you should be working on the end of Project 4 assignments. Get pictures of your Bellevue business! You will need them next week.

Continue to work on the Project 4 assignments.

THICK QUESTION: In Google Docs, using complete sentences and proper sentence structure, explain to someone who knows nothing about inserting tables in a web site using HTML code how they should do it. USE THE SUMMARIZING GRADING RUBRIC!! THIS IS HOW I WILL GRADE IT!!! Share it with me in a Google Doc.

Complete the Project 4 assignments.

Work on Project 4 Assignments

Complete Project 4 Assignments

Complete Project 4 Assignments

Complete Project 4

COMPLETE PROJECT 4 TODAY!!

Test next class

Finish Project 4

Play the review games for the first 10-15 minutes of class. We will take the test after that.

  1. We are going to do a little bit at the beginnng of class today together, so right now create a new Notepad file. We are going to create a sample home page, so create a new folder named “sample” and copy & paste any random picture into the folder.

    Please open the Sample Home Page in Firefox and in WordPad. I am going to show you how to copy and paste the code to make additional pages using the same layout. Remember it is important to have consistency throughout a web site–you want to have the same layout on every page as well as the same title & email message at the bottom. We are going to edit the code for a new page.

    THICK QUESTION: Put yourself in your business owner’s shoes. What kinds of questions would you expect to hear from your web site developer? Explain how you think you have met or not met the needs of your business owner and write down some goals you would like to meet for your Bellevue Business Web Site before the end of the school year.

    Work on your Bellevue Business Web Site. Be sure to check out the grading rubric so you understand the requirements. You WILL have to validate your Bellevue business web site. I can help you with that. You need to have a relatively error-free web site.

    Today we will begin to apply what you learned in Project 4 to your Bellevue Business’ site. I think it would be a great idea for you to draw the layout of each of your web pages before you jump right in. If you have a plan, it will be easier to accomplish. Remember, consistency and simplicity are important in a web site. Limit your use of text, pictures, etc. on every page. Think about it–if a web page has a lot of text, do you stick around and read it all? I don’t! Instead of trying to fit everything on a page, divide the information up into separate pages. Also, use consistency–the layout you have on your home page may be the same layout on all your page.

    Continue to work on your Bellevue Business Web Site.

    Continue to work on your Bellevue Business Web Site.

    Continue to work on your Bellevue Business Web Site.

    Continue to work on your Bellevue Business site. Before you leave today, be sure to have me grade your site using the Bellevue Business Grading Rubric for Project 4.

    THICK QUESTION: If you owned a business what would you like to see on your web site? Use complete sentence and proper grammar and sentence structure.

    Finish working on your Bellevue business web site. Make sure you show it to me and make sure you meet the requirements on the grading rubric before you leave today.

    THICK QUESTION: If you owned a business what would you like to see on your web site? Use complete sentence and proper grammar and sentence structure.

    Finish working on your Bellevue business web site. Make sure you show it to me and make sure you meet the requirements on the grading rubric before you leave today.

    Take the Project 6 pre-test.

    Today we will begin HTML Project 6. We are going to work through Project 6 together. Before you leave class today, you will know how to use Frames in a web site to keep your web pages in your web site looking consistent. Open the Project 6 Study Guide and save it to your drive.

    Today we will continue to work through Project 6 together.

     

    POP QUIZ: Answer the following 5 questions on a 1/2 piece of paper and then hand it in.

    1. What is the name you save a frame definite file as? What does the frame definition file do? What is NOT included in a frame definition file that IS included in all other html files?
    2. Which tag is used in the creation of a frame definition file?
    3. Which attribute changes the border color?
    4. How would you type the attributes for two rows taking up 30% and 70% of the screen in a frame definition file?
    5. How should you print a web page containing multiple frames?

    Today we will finish working through Project 6 together.

    Today you will apply what you learned last class about Frames by working on the Apply Your Knowledge and In The Lab assignments for Project 6. Be sure to follow your Project 6 Study Guide!

    Today we will continue to work on the Project 6 assignments.

    Please do Cases and Places # 1

    Today we will continue working on Project 6 assignments!

    *Remember to do Cases and Places 1

    Thick Question:

    On my blog… Explain to someone who is new at HTML, why it is important to put frames in your webpage and the steps you take to do so!!!

    GOAL: Complete Project 6 Assignments TODAY!

    Your businesses would like to see progress made with their web sites! We need to get started with this next class. BEFORE NEXT CLASS: Get photos of your business and talk to the owner so you know what they would like to see on their web site!

    Project 6 Test Next Class!

    GOAL: Complete Project 6 Assignments TODAY!

    Your businesses would like to see progress made with their web sites! We need to get started with this next class. BEFORE NEXT CLASS: Get photos of your business and talk to the owner so you know what they would like to see on their web site!

    Project 6 Test Next Class!

    Work on project 6 assignments today!

    Goal – Finish Project 6 Assignments today

    Project 6 Test Next Time

    Goal – Finish Project 6 Assignments today

    Project 6 Test Next Time

    Play review games for the first 15 minutes of class.

    Project 6 Test Today!

    Let me know if you would like your Bellevue Business Site updated.

    Today we will begin Project 7. During this project you will learn how to create a form in order to collect data from people who visit your web site. This is pretty neat stuff! I have spent a lot of time anticipating questions you may have and trying to anwser those questions in the study guide. PLEASE READ AND FOLLOW THE STUDY GUIDE!! Right now, please open the Project 7 Study Guide and begin!

    Before you leave today you need to have the step by steps for Project 7 completed. You will be working on the end of Project 7 assignments beginning next class!

  2. Go to Moode (click on the link below), click on Web Development class, and then click on the Uses for forms forum. Type your own response and comment on at least 1 other student’s response.
  3. Work on end of project assignments!

DO THIS FIRST: Email your business owner and see if they would like a survey of some sort on their site. Explain it. If they do, ask them which email address it should be sent to.

Before you leave class today you should have the following assignments turned in:

  • 1 Apply your knowledge
  • 1 In the lab
  • 2 In the lab
  • 3 In the lab

If you finish early, start working on next classes assignment!

Go to Moodle and comment on the Business suveys forum and then comment on at least one of your classmates responses.

Let’s finish In the Lab 3. Here are some helpful hints:

    • The second grouping is a TABLE with 1 row and 3 columns. You will have to refer back to Project 4 to help you.
    • EXTRA CREDIT: Figure out how to get the 2nd choice preselected for the radio buttons and the 4th choice checked for the checklist in section 2.

 

Complete Project 7 Assignments

Your semester exam will be the Project 7 Exam

Finish Project 7

Play Review Games

Semester Exam (Project 7 Test) Next Class

Work on completing your Bellevue Business Site! Give me the name and phone number of your Bellevue business owner. We need to set a date for you present your sites. Encourage them to view their site frequently so they can offer you suggestions on how to change it.

  1. Give me the name and phone number of your Bellevue business owner. We need to set a date for you present your sites. Encourage them to view their site frequently so they can offer you suggestions on how to change it.
  2. Today we will begin working on Project 8. Open the Project 8 Study Guide. Read and do all of project 8–do not skip or skim!! This project is VERY important and full of new material.
  3. I need ALL of you to send me an email message containing the name and phone number AND email address of your business owner!! Do this first today!!

  4. Continue to follow the Project 8 Study Guide. Remember to READ EVERYTHING and TAKE THIS PROJECT VERRRRRRY SLLLLOOOOOWWWWWLLLLLYYYY!!!!!!!

  5. Continue to work on Project 8.

  6. Go to Moodle and click on the Authoring & Web Development page and comment on the CSS forum.

  7. Finish Project 8. Check JMC to see if you have any missing work.
  8. Play the online review games to prepare for the test
  9. Take the Project 8 Post Test
  10. Add all 3 CSS’ to your Bellevue business web site–external style sheet, embedded style sheet, inline style sheet. Be sure to contact your business to keep them posted. Remind them to check the link–include it in your email message.
  1. Work on Project 8. Check JMC to see if you have any missing work.
  2. Complete Project 8!!
  3. Play the online review games to prepare for the test
  4. Take the Project 8 Post Test
  5. Add all 3 CSS’ to your Bellevue business web site–external style sheet, embedded style sheet, inline style sheet. Be sure to contact your business to keep them posted. Remind them to check the link–include it in your email message.
  6. Please “polish-up” your business site. Give me the contact information for the owner of your business: name, phone number, and email address. I NEED THIS BEFORE YOU LEAVE TODAY!! Also, let me know a good time for you to present. I was thinking 7:30 a.m. or 3:30 p.m. some day. Which works best for you? Please send all information in an email message: tweber@bellevue.k12.ia.us Thanks!
  7. We need to plan a day to present your sites to your business owner. How about 7:30 a.m. someday? Let me know what your opinion is on this!

Continue updating your Belleve business site–be sure you are meeting the requirements in the grading rubric you were provided. Be proud of the product you are producing–so much so that you would be willing to get in front of a room full of people to present your site!

  1. 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
  1. Lists
    1. Lists (begins at 10:37)
      1. Email Link–use the HTML text to help you–this is before 10:37
    1. Be sure you can answer the following questions:
      1. What is the difference between a blocked element and an inline element
      2. What is the tag for an ordered list?
      3. What is the tag for an unordered list?
      4. What does the <li> tag do?
      5. What are the 3 tags associated with a definition list and what does each one mean?
  2. Apply What You 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. create an unordered list to be used as a navigation bar–use square bullets
      5. 6 paragraphs from www.lipsum.org
      6. h1, h2, h3, h4, h5, h6 tags
      7. br tag
      8. hr tag
      9. intrapage link
      10. appropriate information in the footer
      11. 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. create an ordered list–Use capital roman numbers.
      4. create at least 3 definitions for terms of your choice
      5. 2 paragraphs from www.ipsum.org
      6. br tag
      7. hr tag
      8. intrasystem link to the first page
      9. intersystem link to another website
      10. 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
  1. What is validating using Firefox? Create the following 2 webpages and then we will validate together.
  2. Multimedia
    1. Images (stop at 39:00)
      1. Be sure you can answer these questions:
        1. What are 4 different types of images? (jpeg, gif, png, bmp)
        2. What do GIF pictures look like? (cartoon, logo)
        3. What is important to remember about color in regard to a GIF? (limited color)
        4. Is GIF a large or small file size? (small)
        5. What does a JPEG look like? (photograph)
        6. What is an advantage to using PNG? (open source)
        7. How is a TIF used? (graphic arts industry for print)
        8. What is a disadvantage to using BMP? (most browsers don’t use it (only internet explorer), uncompressed)
        9. What is the tag used to insert an image on a web page?
        10. What is the required attribute to be included with an image tag?
        11. Why is the alt attribute used in the image tag?
        12. How can an image be used? (link, bullet,
        13. What is a favicon? (small icon in the title bar)
        14. Where does the code for a favicon appear? (in the head)
          1. What must you remember about favicon? (8 bit, must be square)
        15. What should you remember about image sizes? (audience, internet connection speed)
        16. What should you avoid using images for on a web page? (avoid using images to let people know what to do)
    1. Let’s get into Photoshop to see how to change image size.
      1. 72 dpi for web use images
        1. Image
          1. Image Size
            1. Resolution 72
            2. Width 100
        2. Double click Magnifying Glass to see how it will look on the web.
        3. OR you could use the crop tool to be more precise in size.
        4. File
          1. Save for Web & Devices
            1. Optimize 4 up
            2. JPEG
            3. High Compression
            4. Compare at Medium & Low
    2. Place image in Dreamweaver–be sure it is in your site folder.
  1. Generating Images–Don’t listen to it
    1. Create a logo in Photoshop and save it as a GIF–Skip this?
  1. Favicons
    1. www.favicon.cc
    2. Very small graphics
    3. 16 pixels X 16 pixels
    4. Supported formats: ico, png, gif
    5. ICO
      1. Go to http://www.favicon.cc/ to make a favicon
      2. Go to http://iconhandbook.co.uk/reference/examples/favicons/ for the code–this code needs to go in the head.
  1. CSS Fonts
  1. CSS Image Replacement
  1. CSS Color
  1. CSS Image Replacement–Contains CSS code for Image Replacement
    1. CSS Image Replacement–Listen & follow along–Start Dreamweaver & Photoshop
      1. A List A Part
      2. Zen Garden CSS 45
      3. Do together–follow along
  1. CSS Color
    1. Different ways to identify color: color name, hexidecimal, rgb–most commonly used
    2. Why can’t you just say “red”? (not as precise)
    3. Hexidecimal #first2 numbers red next 2 numbers are green last 2 numbers are blue
    4. rgb(red numbers greeen numbers blue numbers) 256 values for each number
    5. unvisited link–blue, targeted link (hover): yellow, visited: purple DEFAULT VALUES
    6. Open Photoshop to look for colors
    7. http://www.archaeologica.org/
  1. CSS Background
    • CSS Background
    • See PowerPoint for questions
    • http://www.archaeologica.org/
    • Best practice: declare a background color even if your background is images
  1. CSS HTML and CSS Hooks
    • CSS HTML and CSS Hooks
    • ID–used for anchors on intrapage link–HTML attribute, used with CSS, Javascript–can only be used once on a page SEE POWERPOINT
    • CLASSES–
    • How is an ID identified? How is a class identified?
    • Can Div tags be used by themselves?
    • DO THIS TOGETHER USING STYLES.HTML & STYLES.CSS
  1. CSS Multi-Column Layout
  1. CSS 3 Column Layout
  1. Let’s practice using CSS. Go to page 362 in the HTML textbook. Do the following:
    1. In the Lab 1 pages 362-363–Show me
    2. In the Lab 2 pages 364-365–Show me
    3. In the Lab 3 pages 365-366–Show me
    4. Cases and Places pages 367-368
      1. #1–Share this with me in a Google Doc
      2. #2–Share with me and your classmates in Edmodo–post this to the wall in Edmodo
      3. #3–Show me
      4. #4–Show me and be prepared to explain the new properties you used.
      5. #5–Skip
  1. Continue to practice using CSS. Go to page 362 in the HTML textbook. Do the following:
    1. In the Lab 1 pages 362-363–Show me
    2. In the Lab 2 pages 364-365–Show me
    3. In the Lab 3 pages 365-366–Show me
    4. Cases and Places pages 367-368
      1. #1–Share this with me in a Google Doc
      2. #2–Share with me and your classmates in Edmodo–post this to the wall in Edmodo
      3. #3–Show me
      4. #4–Show me and be prepared to explain the new properties you used.
      5. #5–Skip
  1. Continue to practice using CSS. Go to page 362 in the HTML textbook. Do the following:
    1. In the Lab 1 pages 362-363–Show me
    2. In the Lab 2 pages 364-365–Show me
    3. In the Lab 3 pages 365-366–Show me
    4. Cases and Places pages 367-368
      1. #1–Share this with me in a Google Doc
      2. #2–Share with me and your classmates in Edmodo–post this to the wall in Edmodo
      3. #3–Show me
      4. #4–Show me and be prepared to explain the new properties you used.
      5. #5–Skip

Practice using CSS. Go to page 362 in the HTML textbook. Do the following:

  1. In the Lab 1 pages 362-363–Show me
  2. In the Lab 2 pages 364-365–Show me–DO NOT save as SOLUTION FILE!!
  3. In the Lab 3 pages 365-366–Show me
  4. Cases and Places pages 367-368
    1. #1–Share this with me in a Google Doc
    2. #2–Share with me and your classmates in Edmodo–post this to the wall in Edmodo
    3. #3–Show me
    4. #4–Show me and be prepared to explain the new properties you used.
    5. #5–Skip
  5. On page 360 in your book, work on the 12 review exercises. There will be a test next class.
  1. Practice using CSS. Go to page 362 in the HTML textbook. Do the following:
    1. In the Lab 1 pages 362-363–Show me
    2. In the Lab 2 pages 364-365–CHANGE OF PLANS!!! DO NOT DO THIS!!
    3. In the Lab 3 pages 365-366–CHANGE OF PLANS!!! DO NOT DO THIS!!
    4. Cases and Places pages 367-368
      1. #1–Share this with me in a Google Doc
      2. #2–Share with me and your classmates in Edmodo–post this to the wall in Edmodo–this will require a lot of digging and thinking!! Use Little Web Hut and w3schools to help. Also, use other web sites.
      3. #3–Show me–THIS WILL TAKE SOME TIME!! MAYBE 2 CLASS PERIODS!!! Create the web page from scratch.
  1. Cases and Places pages 367-368
    1. #1–Share this with me in a Google Doc
    2. #2–Share with me and your classmates in Edmodo–post this to the wall in Edmodo–this will require a lot of digging and thinking!! Use Little Web Hut and w3schools to help. Also, use other web sites.
    3. #3–Show me–THIS WILL TAKE SOME TIME!! MAYBE 2 CLASS PERIODS!!! Create the web page from scratch.
  1. Cases and Places pages 367-368
    1. #1–Share this with me in a Google Doc
    2. #3–Show me–THIS WILL TAKE SOME TIME!! MAYBE 2 CLASS PERIODS!!! Create the web page from scratch.
  2. On page 360 in your book, work on the 12 review exercises. There will be a test next class.
  1. Cases and Places pages 367-368
    1. #1–Share this with me in a Google Doc
    2. #3–Show me–THIS WILL TAKE SOME TIME!! MAYBE 2 CLASS PERIODS!!! Create the web page from scratch.
  2. On page 360 in your book, work on the 12 review exercises. There will be a test next class.
  1. #3–Show me–THIS WILL TAKE SOME TIME!! MAYBE 2 CLASS PERIODS!!! Create the web page from scratch.
  2. On page 360 in your book, work on the 12 review exercises. There will be a test next class.
  1. CSS Test in Edmodo
  2. To apply what you learned about CSS, create the following for the Coffee Shop web site you created:
    1. External style sheet–connect it to all the pages in your site
    2. Internal style sheet–do this for at least 1 page in your site–be sure you include 1 element from the external style sheet
    3. Inline style–change the code for at least 1 element that was included in the external and internal style sheets for at least 1 page
    4. Use ID, class, div tags
    5. Use the Position Properties.
    6. Extra Credit for other CSS code you learned from Little Web Hut that you include.
  1. CSS Test
  2. To apply what you learned about CSS, create the following for the Coffee Shop web site you created:
    1. External style sheet–connect it to all the pages in your site
    2. Internal style sheet–do this for at least 1 page in your site–be sure you include 1 element from the external style sheet
    3. Inline style–change the code for at least 1 element that was included in the external and internal style sheets for at least 1 page
    4. Use ID, class, div tags
    5. Use the Position Properties.
    6. Extra Credit for other CSS code you learned from Little Web Hut that you include.
  1. To apply what you learned about CSS, create the following for the Coffee Shop web site you created:
    1. External style sheet–connect it to all the pages in your site
    2. Internal style sheet–do this for at least 1 page in your site–be sure you include 1 element from the external style sheet
    3. Inline style–change the code for at least 1 element that was included in the external and internal style sheets for at least 1 page
    4. Use ID, class, div tags
    5. Use the Position Properties.
    6. Extra Credit for other CSS code you learned from Little Web Hut that you include.
  2. Create a new web site and include CSS
  1. HTML5 Tutorial
    1. Home
    2. Introduction
    3. New Elements
    4. Video
    5. Audio
    6. Canvas
    7. Web Storage
  2. HTML5 Forms
    1. Input Types
    2. Form Elements
    3. Form Attributes
  3. HTML5 Reference
    1. Tags
    2. Attributes
    3. Events
    4. Valid DTDs
  4. HTML5 Test