Lab Assignment On Html Website

Web Page Design

Course Rationale: Rapid technological advancement by businesses to reach global markets, greater focus on industry certifications and national skill standards, expansion of responsibilities of office workers, portability of employee skills—all these increase the need for business students in career education programs to have skills in Web design and maintenance.

Web Design & Development I - Web Based Student Version

DESE Workshop - Pat's Pizza Web PDF - Assignment for

Assignment 4 - TextWrangler Basic HTML Coding Recreate this image. Assignment for
Print the source coding from the web page.

Getting Started - You are to create a series of folders in you documents folder on the Mac side of your computer. The format of the folders should be as follows:

Web_page_design

TextWrangler
Pats Pizza
Dreamweaver

Unit 1: Introduction to Web Development

  1. ***Link to basic HTML codes - HTML Cheatsheet
  2. Basic html Coding
  3. html Hyperlink Coding
  4. HTML Coding ValidationAlways check your page coding!
  5. Awesome for images - GRSites or CoolText Serif font have curlies on them [a slight projection finishing off a stroke of a letter, as in T contrasted with T] where as Sans Serif fonts are more block [a style of type without serifs.
  6. How Web Servers Work
  7. Key terms review for TextWrangler assignments
  8. ***HTML Starters Web - Image, PDF
  9. Basic HTML Coding
  10. Web page bullets - link

Assignments

  1. Review of HTML/CSS - Head of Class Download assignment as PDF Assignment for

 

Assignments

  1. Create a Folder In Your WebPage/TextWrangler folder called Beginning Web Designassignment for 8-25-14
    • Save all of your Lesson downloads in that folder so you can refer to them at any time.
    • Complete Lesson Downloads - Packet pages 1-7 PDFassignment for 8-26-14
  2. Lesson A Check-Up Time A - TextWrangler PDF assignment for 8-29-14
  3. Review of Lesson A Web, PDF- assignment for
    • Sunny Days - Complete Together (drag and drop link) assignment for 8-29-14
    • Headings - Print Validation, Page Source and Web Page assignment for 8-29-14
      • Save in your Beginning_Web_Page folder as LA_Headings
      • Print Validation, Page Source and Web Page
  4. Lesson B: Block Level Elements, Inline Elements and Styles
    1. Watch ScreenCast Video - Tonya Skinner assignment for 9-2-14
    2. pages 11-14 PDF
    3. p11 PDF review Test Page
    4. p12 PDF type Cool Examples Coding
    5. p13 PDFassignment for
      • Save in your Beginning_Web_Page folder as LB_Math_Elements
      • Print Validation, Page Source and Web Page
      • Don't want to type? Source file: math.txt
      • Or you can find the math text using the following path. Open/macserver/RuckerShare/Students/Student_Files_Web_Page_Design/practice/math.txt
    6. p14 PDF
    7. p15 - Quiz over Lesson B
      • Download the Quiz
      • Complete on your computer
      • You can use 11-14 to complete your quiz.
      • Print Validation, Page Source and Web Page (30 Points Possible)
  5. Lesson C: Three Types of List
    1. Watch ScreenCast Video - Tonya Skinner assignment for 9-8-14
    2. pages 18-20 PDF Type Bullets on p20 as practice.
      • Save in your Beginning_Web_Page folder as LC_Bullets
      • Print Validation, Page Source and Web Page (30 Points Possible)
    3. p21 - Quiz over Lesson C assignment for 9-9-14
      • Download the Quiz
      • Complete on your computer
      • You can use 18-20 to complete your quiz. (I expect all A's! Whoop! Whoop!)
      • Print
    1. REVIEW p23 PDF assignment for 9-10-14
    2. REVIEW p24 PDF assignment for 9-12&15-14
      • Download data file
      • Save as LC_hail_facts_yourname.html
      • Print Validation, Page Source and Web Page (30 Points Possible)
    1. REVIEW p25 PDF assignment for 9-15-14
      • Download data file
      • Save as LC_messy_html_yourname.html
      • Print Validation, Page Source and Web Page (30 Points Possible)
  6. Lesson D: Hyperlinks
    1. Watch ScreenCast Video Basic Hyperlinks, Advanced Hyperlinks- Tonya Skinner assignment for 9-17-14
    2. pages 26-30 PDF
      • Data Files for p27 Download and save in your textwrangler/beginning_web_page folder, but create a new folder called hyperlinkpages. index, page1, page2
      • Type the coding on p30 assignment for 9-18-14
      • Save in your Beginning_Web_Page/hyperlinks folder as LD_Target_Page_Yourname.html
      • Put yourname in the Title (Target Page Yourname)
      • Print Validation, Page Source and Web Page
    3. p31 - Quiz over Lesson D assignment for 9-22-14
      • Download the Quiz PDF
      • Complete on your computer
      • Complete #9 in Textwrangle
        • Save in your Beginning_Web_Page folder as LD_food_target_yourname.htmlassignment for 9-22-14
        • Print Validation, Page Source and Web Page and staple to the back of the quiz.
      • You can use 26-30 to complete your quiz.
      • Print p31
    1. p33 Performance Quiz lesson D assignment for
      • Download the Quiz PDF
      • Download the data file linkdown.html (copy the data source to TextWrangler if you have to). assignment for
      • Complete in Textwrangler
        • Save in your Beginning_Web_Page folder as LD_link_down_yourname.html
      • You can use any of your resources to complete this quiz (except your neighbor).
      • Print Validation, Page Source and Web Page

    Lesson E: Entity References

    1. p35 & 36- Read and complete together. Take Quiz over Lesson E assignment for
      • Download the Quiz PDF
      • Complete in blue or black pen or pencil.
      • Complete Practice E in Textwrangle
        • Save in your Beginning_Web_Page folder as LE_entitiespractice_yourname.html
        • Print Validation, Page Source and Web Page and staple to the back of the quiz.

Lesson F: Image Filetypes

    1. p38-44 Read and complete together. Take Quiz over Lesson F assignment for
      • Complete Practice F, p41 in Textwrangle together
        • Save in your Beginning_Web_Page folder as LF_image_knock_knock_yourname.html
        • copy/paste the Tonya_Skinner_student_data_files folder to your Beginning_Web_Page folder in a folder called images. We will do this together.
        • Print Validation, Page Source and Web Page and staple to the back of the quiz.
        Download the p42, Quiz PDF
      • Complete in blue or black pen or pencil.
      • Complete Practice F, p44 in Textwrangle together
        • Save in your Beginning_Web_Page folder as LF_pigs_yourname.html
        • Print Validation, Page Source and Web Page and staple to the back of the quiz.

Lesson G: Image Filetypes assignment for

    1. p46-53 Read and complete together. Take Quiz over Lesson G assignment for
      • Complete Practice G, Stylin HTML, p49 in Textwrangle together
        • Save in your Beginning_Web_Page/Practice folder as LG_styling_yourname.html
        • Save the css page as LG_nice_yourname.css
        • Print Validation, Page Source and Web Page.
      • Complete Practice G, Rainy Days, p50 in Textwrangle together
        • Save in your Beginning_Web_Page/Practice folder as LG_rainy_yourname.html
        • Save the css page as LG_rainy_yourname.css
        • Print Validation, Page Source and Web Page
      • Complete Practice G, Page with Links, p51 in Textwrangle together assignment for
        • Save in your Beginning_Web_Page/Practice folder as ps.html
        • Save the css page as ps.css
        • Print Validation, Page Source and Web Page
      • Check-up Time the p52, Quiz PDF assignment for
      • Complete in blue or black pen or pencil.
      • Complete Practice G, p54 in Textwrangle
        • Save in your Beginning_Web_Page/Skittles folder as LG_Skittles_yourname.htmlassignment for
        • Print Validation, Page Source and Web Page and staple to the back of the quiz
      • Project HTML Do It--funtimes.html p.55 assignment for
        • Read the Requirements Carefully!!! Refer to p.56 for an example of the assignment.
        • Create a new folder in your Beginning_Web_Page folder called Project_HTML_Do_It
        • Save your webpage as funtimes.html
        • Save your Cascading Style Sheet as movie.css
        • Print Validation, Page Source, CSS, Check-off list, and Web Page with Web Page on top
      • Project HTML Classy Fun.html p.57 assignment for
        • Read the Requirements Carefully!!! Refer to p.57 for an example of the assignment.
        • Save your webpage as classyfun.html in your Practice Folder
        • Save your Cascading Style Sheet as classyclass.css in your Practice Folder
        • Print Validation, Page Source, CSS, Check-off list, and Web Page with Web Page on top

Lesson H: Making Prettier Pages with Divisions assignment for

    1. p58-59 Read and complete together. assignment for
      • Complete Practice H, Div Tags, p59 in Textwrangle together
        • Open/Save in your Div Intro Keys/as the name given for it
        • Complete Try it Out! on p60 on your own assignment for
        • Print Validation, Page Source, CSS and Web Page.
    1. p62--63 Read and complete together. assignment for
        • Complete Practice H, Div Tags, p62-63 in Textwrangle together
          • Copy coding to your html
            • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          • Open/Save in your Div Intro Keys/as the name given for it
        • Complete Try it Out! on p64 on your own assignment for
          • Print Validation, Page Source, CSS and Web Page. - 4 Print outs!
  1. Dreamweaver Assignment 1 - Fridayassignment for
  2. Dreamweaver Assignment 2 - How to Be Awesomeassignment for
  3. Go over saving backgrounds and text. assignment for
  4. Go over saving buttons and text. Open DW Assignment 2. assignment for
  5. Dreamweaver Assignment 3 - cssassignment for
  6. Dreamweaver Assignment 3-2 - cssText Wrangler File assignment for
  7. Dreamweaver Assignment 4 - classesassignment for
  8. HTML Review -Source Doc / Word Doc - Open on Windows Side assignment for
  9. Review: Assignment 13 - TextWrangler wiz.html/square bullets assignment for
  10. Review: Assignment 14 - TextWrangler table coding assignment for
  11. Dreamweaver Pat's Pizza Place Project assignment for
  12. Dreamweaver DIV Challenge 1 - WebPDFassignment for
  13. Dreamweaver DIV Christmas Assignment -WebPDFassignment for

Misc. Don't want to get rid of yet.

  1. Assignment 1 - TextWranglerPDF fileassignment for 8-22-14
  2. Assignment 2 - TextWrangler assignment for 8-25-14
  3. Assignment 3 - TextWranglerassignmentfor
  4. Assignment 4 - TextWrangler Basic HTML Coding Recreate this image. Assignment for
    Print the source coding from the web page.
  5. Assignment 5 - TextWranglerassignmentfor - Print the source coding from the web page (after I view it).
  6. Assignment 6 - TextWranglerassignment for
  7. Assignment Monday - TextWranglerassignment for
  8. Assignment 7 - TextWranglerassignmentfor
  9. Assignment 8 - TextWrangler assignment for
  10. Basic html Coding Test #1assignment for
  11. Basic html Coding Test #1 Redoassignmentfor
  12. Google Docs HTML Checkup #1 assignmentfor
  13. Messy html #1: Copy page source to a new TextWrangler File. Save it as messy_html.htmlassignmentfor . We will work this together.
  14. Review of HTML list and coding for ul, ol, and def list - QuickTime Video Assignment for
    Watch Video with Headphones (no laughing at my video voice! LOL!).
    Assignment 9 - TextWranglerassignment for
  15. Assignment 10 - TextWrangler assignmentfor
  16. Assignment 11 and 11-2- TextWrangler - watch video first: QuickTime Video coding example for Absolute/Relative Hyperlinks and jpg images
    assignmentfor
  17. Assignment 12 - TextWrangler 3 hyperlinks assignmentfor
  18. Assignment 13 - TextWrangler wiz.html/square bullets assignment for
  19. Assignment 14 - TextWrangler table coding assignment for
  20. Assignment 15 - TextWrangler - Testing Acronyms assignment for

 

Dreamweaver CS3 Textbook

Dreamweaver is a What You See Is What You Get (WYSIWYG) text editor. A WYSIWYG text editor allows a user to view a document as it will appear in the final product and to edit the text, images, or other elements directly within that view.

Dreamweaver Introduction: Web Site Development & Adobe Dreamweaver CS3

  1. You will need to read DW2 to DW23.
  2. You are to complete a practice test on the textbook website. You can only miss two questions. If you miss more than two, you can take it over. You can use your book to look up answers, not your neighbor. This is a review, not a test.
  3. You will need to complete flashcards also.

Dreamweaver Chapter 1: Creating a Dreamweaver Web Page and Local Site

Go through chapter together.
Assignments:

  1. Apply Your Knowledge DW105-DW106 Assignment for
    In step 12, after you enter the date, put in another line break and put your assignment
    (DW Apply Your Knowledge).
    Figure 1-87, Table 1-5
  2. In the Lab 1 DW107-DW108 Assignment for
    In step 10, after you enter the date, put in another line break and put your assignment
    (DW In the Lab 1
    ) Figure 1-88, Table 1-6a, Table 1-6b
  3. In the Lab 2 DW109-DW111 Assignment for
    In step 10, after you enter the date, put in another line break and put your assignment
    (DW In the Lab 2) Figure 1-89, Table 1-7
  4. In the Lab 3 DW111-DW112 Assignment for
    In step 8, after you enter the date, put in another line break and put your assignment
    (DW In the Lab 3) Figure 1-90, Table 1-8
  5. As a review for creating web pages - complete Cases and Places 1 page DW 113. Follow the instructions.
    After you enter the date, put in another line break and put your assignment (DW Cases and Places 1) Assignment for
  6. Complete a practice test with 2 or less errors. Be sure to print and score your own test.
  7. Complete Ch1 Flash Cards. You are to complete 15 questions without missing more than three. You are to print your results.
  8. PLANS FOR TUESDAY, SEPTEMBER 14: We will grade papers first and then you will finish Cases & Places 1. I am to view it and then you are to print.

Dreamweaver Chapter 2: Adding Web Pages, Links, and Images

Go through chapter together.
Assignments:

  1. Apply Your Knowledge DW186-DW189
  2. In the Lab 1 DW190-DW192 Assignment for
  3. In the Lab 2 DW192-DW195 Assignment for
  4. In the Lab 3 DW195-DW198 Assignment for
  5. Complete a practice test with 2 or less errors. It will be a hard copy. Put your name at the top.
  6. Complete Ch2 Flash Cards. You are to complete 15 questions without missing more than three. You are to print your results.

Dreamweaver Chapter 3: Tables and Page Layout

Go through chapter together.
Assignments:

  1. Apply Your Knowledge DW301-DW302
  2. In the Lab 1 DW303-DW304 Assignment for
  3. In the Lab 2 DW304-DW308 Assignment for
  4. In the Lab 3 DW308-DW309 Assignment for
  5. Complete a practice test with 2 or less errors.

Dreamweaver Chapter 4: Forms

Go through chapter together.
Assignments:

  1. Apply Your Knowledge DW385-DW387
  2. In the Lab 1 DW388-DW390
  3. In the Lab 2 DW390-DW392
  4. In the Lab 3 DW392-DW394
  5. Complete a practice test with 2 or less errors.

Class Web Page Assignment (FBLA)

Design Document Assignment
Design Document - What will be on my web page
Design Document - Example
Assignment

 

iWeb

Learn to use iWeb Assignment Assignment for

iWeb Assignment - My Favorite ???Assignment for

Student sites:

2012 - Claire FBLA Contest Site Student Government

2011 - Abbie, Dillion, Martha, Sara

2010 - April, Clayton, Dale, Darcy, Dillon, Tanner, Whitney, Zach.

Personal Portfolio Development:

You will be required to complete a portfolio for you. You will design the entire site and "brag" about you!

Electronic Career Portfolio Assignment for

Grading Rubric html format Download PDF format Rubric

Sample Portfolio - Excellent Example

Sample Portfolio 2

Electronic Portfolio Rubric

2013 - Rachael, Marie, Brooklynn, Elizabeth

2013 - Elizabeth's Pat's Pizza, Elizabeth's Do It!

2012 - Claire, Noah, Brooke

2011 - Sara, Martha, Drew, Jake

2010 - Whitney's Portfolio

 

iMovie

Garage Band

Cool Websites:

http://phs.parkhill.k12.mo.us

http://schoolweb.missouri.edu/districts.html

http://www.grandpajunior.com/Mo.shtml

http://www.chillicotheschools.org/

Helpful websites for color scheme:

**HTML Color Codes - Highlights Color For Code For You

**HTML Color Codes and Names - good resource

Color Codes matching Chart HTML

**Color Schemer On-line

Mandarin Design

Web Colour Generator

Web Safe Colours

Helpful websites to use when designing your web page:

Great Resource for Web Page Design: Houston Business Class

http://3dtext.com/

http://www.coolarchive.com/

http://www.fg-a.com/gifs.html

http://www.artistic-designers.com/bkgds/

http://www.cln.org/themes/clip_art.html

http://www.animationlibrary.com/a-l/

http://dragonneo.com/

http://hometown.aol.com/sunstar253/a-dragons.html

Introduction

In this week's lab you are going to work with specifying font types, sizes, and colors.

HTML includes the <font> tag for specifying font information. However, it is not very good, at least for specifying a size. You can only tell it to use a size from 1 to 7, but what does a size of 1 or 7 mean?

A much better way of specifying font information is with CSS, or Cascading Style Sheets. With CSS, the exact font type, size, and color can be specified.

Changing Some Fonts

In your web page, add the following in the <HEAD> section, after the title. (If you are not sure where to put it, view the page source for this page and search for the STYLE tag.) <STYLE type="text/css"> <!-- BODY { color: white; background-color: black; font-family: Arial, sans-serif; font-size: 12pt; } --> </STYLE> STYLE is a CSS tag that is used to define attributes (such as size, color, etc.) for the various tags in your web page. The above is telling the browser that within the BODY tag (which is everything on your page), have the font color be white, have the background color be black, use Arial for the font type (or sans-serif if Arial is not available), and 12pt for the size.

What is particularly nice about the above is that the font size is set to a very precise value (12 points) instead of some almost-meaningless number like 1.

You will notice in looking at your web page that even though the font size is set to 12, your headers are still displayed differently. This is because tags such as <H1> have default font values. However, you can change this as well.

In your STYLE tag, add entries for the H1 and H2 tags. When you are finished, the STYLE tag definition will look as follows:

<STYLE type="text/css"> <!-- BODY { color: white; background-color: black; font-family: Arial, sans-serif; font-size: 12pt; } H1 { color: red; font-family: Courier New, serif; font-size: 24pt; } H2 { color: green; font-family: Courier New, serif; font-size: 18pt; } --> </STYLE> If your page does not use any H1 or H2 tags already, add them so there is at least one of each. Save your changes and refresh your page in the browser and observe the results.

Play around with the STYLE definitions by changing some of the colors and sizes. Make sure to save your changes and refresh your page in the browser to view the results of your chnages.

You could, of course, add definitions for the other header tags as well.

After completing this lab, you should know how to use the STYLE tag to set the font type, color, and size for the web page and any headers on the page.

CSS is actually much more powerful than what has been demonstrated here. There are a large number of tutorials on the web for anybody interested in exploring further.

0 comments

Leave a Reply

Your email address will not be published. Required fields are marked *