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