Unit G - Day 5

• Open your Garden Folder and open the resources.html page
• Make the list at the top a bulleted list with circle bullets
• Add the table below to the page underneath the bulleted list

Unit G - Day 4

Modify your locations page in your pizza site to add the tables shown below

Unit G - Day 3

Learning Goals:

1. Create a table using html 
2. Format the table using css

Activities:

• Create a new page called: classes.html
• Use an embedded style sheet
• See image below

Chapter 4

Read Chapter 4 in Web Design book - pg. 100-126

Answer Matching 1-15 (page 127-128) and Short Answer Questions 1-10 (page 128)

Turn in when done!

Historic Figure - pt. 2

Learning Goals :

• Insert images into website and format using css
• Evaluate website design

Activities:

• Complete the historic figure webpage by adding three images of for historic figure to your page
• Use css styles to float your image left or right and have the text "wrap" around your images
• Evaluate a neighbor's web site and give design tips

Unit F - Day 5

Learning Goals:  

1. Insert images as background
2. Insert images using float

Today we will:

• Open index.html (Garden Folder)with TextEdit/Textastic
• Add background images, and logo  image
• Modify content so your page look like the example below
• Use css to format the images

Homework:

1. None!

Links:

• Unit F Notes

Unit F - Day 4

Learning Goals:  

1. Insert images as background
2. Insert images using float

Today we will:

• Open locations.html (Pizza Folder)with TextEdit/Textastic
• Add background images, and logo  image
• Modify content so your page look like the example below
• Use css to format the images

Homework:

1. None!

Links:

• Unit F Notes

Unit F - Day 3

Learning Goals:  

1. Insert images as background
2. Insert images using float

Today we will:

• bout.html and history.html (Pizza Folder)with TextEdit/Textastic
• Add background images, and other images
• Modify content so your pages look like the examples below
• Use css to format the images

Homework:

1. None!

Links:

• Unit F Notes

Unit F - Day 2

Learning Goals:  

1. Insert images as background
2. Create a favicon

Today we will:

• Open index.html, about.html and rooms.html (Lakeland Reeds)with TextEdit/Textastic
• Add background images
• Add a favicon to the address bar
• Use css to format the images
• Work on Beat_Clark.html - add image as a hyperlink at the bottom

Homework:

1. None!

Links:

• Unit F Notes

Unit F - Day 1

Learning Goals:  

1. use the single sided <img> tag to insert images in a web page
2. use the <figure> and <footer> tags to float images

Today we will:

• Open index.html, about.html and rooms.html (Lakeland Reeds)with TextEdit/Textastic
• Add images with height, width, and alt attributes
• Use css to format the images

Homework:

1. None!

Links:

• Unit F Notes

Historic Figure - pt.1

Directions: Within your Web Design folder create a folder called "Historic Figure". Create a web page based on an historic figure of your choice - this does not include sports figures or people from the entertainment industry! Save your page using the person's last name as the file name (remember to include a .html file extension). This page should have an embedded style sheet.  You will need to do some Internet research about your person.

Your web page must contain the following sections:

• A"Biography" section that includes at least a paragraph (4-5 sentances) of biographical information.
• An "Accomplishments" section that outlines the person's major life accomplishments (include at least five accomplishments).
• A "Learn More About..." section that includes absolute hyperlinks to three websites that contain additional information about your subject.

Your page needs to include:

• Title: Historical Figure
• A main, centered heading at the top of the page which includes the person's name and years of life (ex: 1780-1845).
• Use of heading tags - one for each section
• Font attributes - include the use of serif and sans-serif fonts!
• Target links to the three sections and navigation to those sections at the top.
• Background color

Unit E - Day 6

Learning Goals:  

1. Create a navigation bar and apply styles using pseudo-classes

Today we will:

• Create a new document in your GARDEN folder.  Save it as:  resources.html
• Create the navigation bar (don't forget to add styles in the css) and add it to all three pages
• The link color should be yellow, the visited link color should be green and the hover color should be white
• All three pages should use the same style sheet (garden.css)

Homework:

1. None!

Links:

• Unit E Notes

Unit E - Day 5

Learning Goals:  

1. Create a navigation bar and apply styles using pseudo-classes

Today we will:

• Modify the documents in your Pizza folder (index.html, history.html, locations.html) so they look like the examples below.
• Create the navigation bar (don't forget to add styles in the css) and add it to all three pages
• The link color should be red, the visited link color should be gold and the hover color should be white
• All three pages should use the same style sheet (pizza.css)

Homework:

1. None!

Links:

• Unit E Notes

Unit E - Day 4

Learning Goals:  

1. Link to Anchors (target links)

Today we will:

• Create a new document in your Pizza folder.  Save it as :  locations.html
• Add the content and tags necessary to make the document shown below
• Create and apply styles as necessary using your pizza.css stylesheet

Homework:

1. None!

Links:

• Unit E Notes

Unit E - Day 3

Learning Goals:  

1. Link to Anchors (target links)

Today we will:

• Open rooms.html with TextEdit/Textastic
• Add target links
• identify the location in the document you want to link to
• create the link using the anchor tag
• Create and apply styles as necessary using your css stylesheet

Homework:

1. None!

Links:

• Unit E Notes

Final Exam Web Site Proposal

Utilizing the information covered in the reading from chapters 1-3, create a Web site proposal for you final exam.  Complete the necessary information on the Site Proposal Sheet, utilizing the information from the readings when necessary.  Please turn your proposal in when it is completed.

Unit E - Day 2

Learning Goals:  

1. Apply styles to navigation using pseudo-class rules

Today we will:

• Open previously made document with TextEdit/Textastic
• Style the navigation bar to create new link, visited link and hover colors
• Create the rooms.html page

Homework:

1. None!

Links:

• Unit E Notes

Unit E - Day 1

Learning Goals:  

1. Create relative and absolute hyperlinks

Today we will:

• Open index.html with TextEdit/Textastic
• Add a navigation bar using relative and absolute hyperlinks

Homework:

1. None!

Links:

• Unit E Notes

Chapter 3

Learning Goal:  Describe the Web site development process

Today we will:

• Read Chapter 3 from WEB DESIGN; Introductory Concepts and Techniques, 3e
• Books are in the drawer under the laptops, you will need to share.  Please return the books before leaving class
• Complete the Chapter 3 review while reading and turn in before leaving class today!
  
  
  

Homework:

• None!

Unit D - Day 5

Learning Goal: Implement styles to modify the font using CSS style rules

Today we will:

• Open your Soccer folder
• Create a second web page for the soccer site called: join.html
• Add content so that your page looks like the example shown below
• Validate your code at: validator.w3.org 

Links:

• Code Validator
• Unit D Notes

Unit D - Day 4

Learning Goal: Implement styles to modify the font using CSS style rules

Today we will:

• Create a new folder called:  SOCCER
• Create a css stylesheet in the Soccer folder called: soccer.css
• Create the homepage for the soccer site called: index.html
• Add content so that your page looks like the example shown below
• Add style rules to your soccer.css page to add new styles needed to create the page
•  Create an element selector to create a white, serif, centered heading at the top
• Create an element selector to create a black, serif, centered, secondary heading at the top
• Create an id selector called #contact to create the right aligned, white sans-serif contact information at the bottom
• Create a class selector called .bold and use with the <span> to bold every occurrence of GLSL in the page
• Create a style to apply sans-serif font to the main text in the middle
• Validate your code at: validator.w3.org 

Links:

• Code Validator
• Unit D Notes

Unit D - Day 3

Learning Goal: Implement styles to modify the font using CSS style rules

Today we will:

• Create a new Web page in your GARDEN folder called:  hours.html
• Add content so that your page looks like the example shown below
• Modify your pizza.css page to add new styles needed to create the page
•  Create an element selector to change the font for your entire document to a sans-serif font-family
• Create an id selector called #tagline that increases the font size to 1.5em serif text that is centered
• Modify the h2 style to make the text green
•  Modify the box to add a background color of #ffff33
• Validate your code at: validator.w3.org 

Links:

• Code Validator
• Unit D Notes

Unit D - Day 2

Learning Goal: Implement styles to modify the font using CSS style rules

Today we will:

• Create a new Web page in your PIZZA folder called:  history.html
• Add content so that your page looks like the example shown below
• Modify your garden.css page to add new styles needed to create the page
• Validate your code at: validator.w3.org

Links:

• Code Validator
• Unit D Notes

Unit C - Day 5

Learning Goal: Create and link to an external style sheet

Today we will:

• Create a new web page with embedded style sheet - see directions below!
• Check your codes using the code validator 
• Print out your codes and turn them in!

Links:

• Code Validator
• Unit C Notes
• Unit C Review

Unit C - Day 4

Learning Goal: Create and link to an external style sheet

Today we will:

• Create a new web page with embedded style sheet - see directions below!
• Check your codes using the code validator 
• Print out your codes and turn them in!

Links:

• Code Validator
• Unit C Notes
• Unit C Review

Unit C - Day 3

Learning Goal: Create and link to an external style sheet

Today we will:

• Open previously made document with TextEdit/Textastic - index.html in Garden Center folder
• Modify the page so that it looks like the page shown
• Create a new document : garden.css (external style sheet)
• Create new <link /> tag to link index to the new stylesheet
• Validate your code at: validator.w3.org

Links:

• Code Validator
• Unit C Notes

Unit C - Day 2

Learning Goal: Create and link to an external style sheet

Today we will:

• Open previously made document with TextEdit/Textastic - index.html in Lakeland Reeds folder
• Create new style and apply to a section of the document using the <div> tag pair
• Create a new document : styles.css (external style sheet)
• Cut all style statements out of index.html and paste onto new external style sheet
• Create new <link /> tag to link index to the new stylesheet

Practice:

1. Modify index.html from your Pizza folder.
2. Create a new stylesheet in the pizza folder:  pizza.css
3. Create the style statements necessary to make your pizza homepage look like the example shown

Unit C - Day 1

Learning Goals:  

1. Create an embedded style sheet
2. Implement element, id and class selectors

Today we will:

• Open previously made document with TextEdit/Textastic
• Add <style> tag pair w/ attributes to create an embedded style sheet
• Create element, #id and .class selector style rules and apply them to the index.html document

Homework:

1. None!

Web Design Chapter 2

Learning Goal:  Describe basic Web design principles

Today we will:

• Read Chapter 2 from WEB DESIGN; Introductory Concepts and Techniques, 3e
• During reading, complete Chapter 2 Key Terms
• After reading, Please click this link for Chapter 2 Practice Test.
  
  
  Take the practice test, put your name in the correct field at the bottom and print out your results! Please make sure they printed BEFORE closing! You may re-take the practice test as many times as you like to get the best score possible!  Staple the practice test to the Key Terms and turn it in!

Homework:

• None!

Unit B - Day 3

Learning Goal:  Create an HTML document

Today we will:

• Work on our own to start two new web sites
• Create two new folders : Pizza and Garden Center
• Create a new web page in each folder : index.html
• Add necessary elements and content to create the page shown
• *Remember to create a unique <title> for each new home page
• Your pages should look like the pages shown
• Validate your code to check for errors at:  validator.w3.org

Homework:

• None!

Unit B - Day 2

Learning Goal:  Create and Save a web page

Today we will:

• Review information from Unit B lesson
• Unit B Notes
• Create a new folder : Lakeland Reeds
• Create a new web page in folder : index.html
• Add necessary elements and content to create the page shown
• Complet the Unit B Review 

Homework:

• None!

Unit B - Day 1

Learning Goal:  Create and Save a web page

Today we will:

• Open TextEdit and set up preferences (see first post)
• Create and save document as a web page
• Add main elements necessary for all web pages
• Add content to <body> of the document

Homework:

• None!

Web Design Chapter 1

Learning Goal:  Describe the Internet and the World Wide Web

Today we will:

• Read Chapter 1 from WEB DESIGN; Introductory Concepts and Techniques, 3e
• During reading, complete Chapter 1 Key Terms
• After reading, Please click this link for Chapter 1 Practice Test.
  
  
  Take the practice test, put your name in the correct field at the bottom and print out your results! Please make sure they printed BEFORE closing! You may re-take the practice test as many times as you like to get the best score possible!  Staple the practice test to the Key Terms and turn it in!

Homework:

• None!

Web Site Evaluation

Learning Goal:  Evaluate Internet resources for reliability and validity. (IV- B.7)

Today we will:

• Discuss good and bad site design
• Complete the Web Site Evaluation

Homework:

• Web site evaluation (if you didn't finish in class)

Setting up your Preferences in TextEdit

To set up your preferences in TextEdit:

Click on TextEdit > Preferences > Click on Plain Text > Switch to the Open and Save tab > Check the top two boxes and uncheck the 4th box > Click the red button. Then go to Format on the menu bar and click Make Plain Text