cache.php on line 137
Mr. Harris

Web I

Strict Standards: Non-static method PermissionsCache::exists() should not be called statically in /home/mrharr2/public_html/conc/concrete/models/permissions.php on line 69

Strict Standards: Non-static method PermissionsCache::getIdentifier() should not be called statically in /home/mrharr2/public_html/conc/concrete/models/permissions.php on line 15

Strict Standards: Non-static method PermissionsCache::getObject() should not be called statically in /home/mrharr2/public_html/conc/concrete/models/permissions.php on line 70

Strict Standards: Non-static method PermissionsCache::getIdentifier() should not be called statically in /home/mrharr2/public_html/conc/concrete/models/permissions.php on line 45

Strict Standards: Non-static method Area::getOrCreate() should not be called statically in /home/mrharr2/public_html/conc/concrete/models/block.php on line 63

Strict Standards: Non-static method Area::get() should not be called statically in /home/mrharr2/public_html/conc/concrete/models/area.php on line 153

Strict Standards: Non-static method Cache::get() should not be called statically in /home/mrharr2/public_html/conc/concrete/models/area.php on line 121

Strict Standards: Non-static method Cache::key() should not be called statically in /home/mrharr2/public_html/conc/concrete/libraries/cache.php on line 117

Strict Standards: Non-static method Cache::getLibrary() should not be called statically in /home/mrharr2/public_html/conc/concrete/libraries/cache.php on line 121

Strict Standards: Non-static method Cache::key() should not be called statically in /home/mrharr2/public_html/conc/concrete/libraries/cache.php on line 137

Strict Standards: Non-static method Cache::get() should not be called statically in /home/mrharr2/public_html/conc/concrete/models/block.php on line 67

Strict Standards: Non-static method Cache::key() should not be called statically in /home/mrharr2/public_html/conc/concrete/libraries/cache.php on line 117

Strict Standards: Non-static method Cache::getLibrary() should not be called statically in /home/mrharr2/public_html/conc/concrete/libraries/cache.php on line 121

Strict Standards: Non-static method Cache::key() should not be called statically in /home/mrharr2/public_html/conc/concrete/libraries/cache.php on line 137

Strict Standards: Non-static method PermissionsCache::exists() should not be called statically in /home/mrharr2/public_html/conc/concrete/models/permissions.php on line 69

Strict Standards: Non-static method PermissionsCache::getIdentifier() should not be called statically in /home/mrharr2/public_html/conc/concrete/models/permissions.php on line 15

Strict Standards: Non-static method PermissionsCache::getObject() should not be called statically in /home/mrharr2/public_html/conc/concrete/models/permissions.php on line 70

Strict Standards: Non-static method PermissionsCache::getIdentifier() should not be called statically in /home/mrharr2/public_html/conc/concrete/models/permissions.php on line 45

Strict Standards: Declaration of FileAttributeKey::getList() should be compatible with AttributeKey::getList($akCategoryHandle, $filters = Array) in /home/mrharr2/public_html/conc/concrete/models/attribute/categories/file.php on line 0

Strict Standards: Declaration of FileAttributeKey::add() should be compatible with AttributeKey::add($akCategoryHandle, $type, $args, $pkg = false) in /home/mrharr2/public_html/conc/concrete/models/attribute/categories/file.php on line 0

Strict Standards: Non-static method Cache::get() should not be called statically in /home/mrharr2/public_html/conc/concrete/models/attribute/categories/file.php on line 57

Strict Standards: Non-static method Cache::key() should not be called statically in /home/mrharr2/public_html/conc/concrete/libraries/cache.php on line 117

Strict Standards: Non-static method Cache::getLibrary() should not be called statically in /home/mrharr2/public_html/conc/concrete/libraries/cache.php on line 121

Strict Standards: Non-static method Cache::key() should not be called statically in /home/mrharr2/public_html/conc/concrete/libraries/cache.php on line 137

Strict Standards: Non-static method Loader::db() should not be called statically in /home/mrharr2/public_html/conc/concrete/models/attribute/type.php on line 11

Strict Standards: Non-static method Cache::get() should not be called statically in /home/mrharr2/public_html/conc/concrete/models/attribute/categories/file.php on line 57

Strict Standards: Non-static method Cache::key() should not be called statically in /home/mrharr2/public_html/conc/concrete/libraries/cache.php on line 117

Strict Standards: Non-static method Cache::getLibrary() should not be called statically in /home/mrharr2/public_html/conc/concrete/libraries/cache.php on line 121

Strict Standards: Non-static method Cache::key() should not be called statically in /home/mrharr2/public_html/conc/concrete/libraries/cache.php on line 137

Strict Standards: Non-static method Loader::db() should not be called statically in /home/mrharr2/public_html/conc/concrete/models/attribute/type.php on line 11

Strict Standards: Non-static method Cache::get() should not be called statically in /home/mrharr2/public_html/conc/concrete/models/file.php on line 80

Strict Standards: Non-static method Cache::key() should not be called statically in /home/mrharr2/public_html/conc/concrete/libraries/cache.php on line 117

Strict Standards: Non-static method Cache::getLibrary() should not be called statically in /home/mrharr2/public_html/conc/concrete/libraries/cache.php on line 121

Strict Standards: Non-static method Cache::key() should not be called statically in /home/mrharr2/public_html/conc/concrete/libraries/cache.php on line 137

Strict Standards: Non-static method File::getByID() should not be called statically in /home/mrharr2/public_html/conc/concrete/models/file.php on line 85

Strict Standards: Non-static method Cache::get() should not be called statically in /home/mrharr2/public_html/conc/concrete/models/file.php on line 17

Strict Standards: Non-static method Cache::key() should not be called statically in /home/mrharr2/public_html/conc/concrete/libraries/cache.php on line 117

Strict Standards: Non-static method Cache::getLibrary() should not be called statically in /home/mrharr2/public_html/conc/concrete/libraries/cache.php on line 121

Strict Standards: Non-static method Cache::key() should not be called statically in /home/mrharr2/public_html/conc/concrete/libraries/cache.php on line 137

Strict Standards: Non-static method Cache::set() should not be called statically in /home/mrharr2/public_html/conc/concrete/models/file.php on line 88

Strict Standards: Non-static method Cache::key() should not be called statically in /home/mrharr2/public_html/conc/concrete/libraries/cache.php on line 101

Strict Standards: Non-static method Cache::getLibrary() should not be called statically in /home/mrharr2/public_html/conc/concrete/libraries/cache.php on line 103

Strict Standards: Non-static method Cache::key() should not be called statically in /home/mrharr2/public_html/conc/concrete/libraries/cache.php on line 107

Strict Standards: Non-static method Cache::get() should not be called statically in /home/mrharr2/public_html/conc/concrete/models/file.php on line 80

Strict Standards: Non-static method Cache::key() should not be called statically in /home/mrharr2/public_html/conc/concrete/libraries/cache.php on line 117

Strict Standards: Non-static method Cache::getLibrary() should not be called statically in /home/mrharr2/public_html/conc/concrete/libraries/cache.php on line 121

Strict Standards: Non-static method Cache::key() should not be called statically in /home/mrharr2/public_html/conc/concrete/libraries/cache.php on line 137

Home

HTML5 Tutorial
- Introduction
- Lesson 1: Let's get started
- Lesson 2: What is HTML?
- Lesson 3: Elements and tags
- Lesson 4: Create your first website
- Lesson 5: What have you learned so far
- Lesson 6: A few more elements
- Lesson 7: Attributes
- Lesson 8: Links
- Lesson 9: Images
- Lesson 10: Tables
- Lesson 11: More about tables
- Lesson 12: Layout (CSS)
- Lesson 13: Uploading pages
- Lesson 14: Web-standards and validation
- Lesson 15: HTML5 — The New Kid on the Block
- Lesson 16: New Tags and Attributes
- Lesson 17: Invisible Things: Scripts, Metadata, Viewports, and Comments
- Lesson 18: Forms
- Lesson 19: APIs
- Lesson 20: More Images
- Lesson 21: Video and Audio
- Lesson 22: Advanced APIs
- Lesson 23: Geolocation: You Are Here
- Lesson 24: Web Storage
- Lesson 25: Drag and Drop
- Lesson 26: Final tips

January

#1 *First Day

Cover
Logging on, Fire Drills,
rules, Saving

Complete lesson 1. Create a web page with your name, a picture off the Internet, and your own background color. Name it webpage1.

#2 Syllabus, Class Rules, Lab Rules.

#3 naming files/directories and lesson2.

Create a web page with your name, a picture off the Internet, and your own

background color.

#4 lessons 3
Cover marquee

Create your own web page with:

Bold, italics, underline, marquee, a topic and paragraph of text.

*show this to the instructor. Name the web page file marquee.

#5 lesson 4

Lesson 5

Lesson 6

Show this to the instructor, call it 4_6.

Put your name in a rainbow and wave

Summative #1 Create a webpage, topic of your choicE, include:

font size change

font color change

heading change

and tags.

#9 Start Web Page Project Tentatively 2 days.

#10 Continue web page project, 5 points extra credit if you create a picture that has an alt tag in Fireworks, 10 points if the pic changes color when you roll over it.

Lesson 11

#13 Lesson 12

Lesson 13

For Lessons 11-13, while completing the lessons, create a web page with:

1. An email hyperlink

2. A recent news story picture that is a hyperlink without the blue border

3. A blank target

4. A word document that downloads.

Note, you need to open the picture and word document on these computers in order to then save it.

#14 Animal Applied web page including:

An animal as a topic, 1 or more special characters, 1 normal sized and one resized picture, and a blank target (a webpage that opens in a new window). The webpage should be able to stand alone, so a person can know what the web page is about and get a message from the page.

#15

Create a web page with the topic of your favorite technology product, including the items covered in lessons 14-16. Examples might include Android cell phones or Iphones, an Irobot, Facebook, Google, GPS or any other technolgy that interests you.

#16

The topic is a website about yourself, the student.

Include:

An email hyperlink
A picture of something you like that is a hyperlink without the blue border
a blank target
A picture that is a hyperlink that downloads
A word document that downloads
Note, you need to open the picture and word document on these computers in order to then save it.
Make a business card in Word, save it as a PDF by going, Save As, PDF and put this in your html folder for this assignment, and make a hyperlink to download it.

#17

Restaurant Project, applied 14-16.

Pick a fast-food Restaurant or make up your own (four points for each item)

Draw a picture of the building, make it a hyperlink that gets bigger when you click on it.

Complete a bulleted and numbered list or a combination of both.

Include a blockquote of 2 lines or more of text, possibly talking about your restaurant; you need to make this up.

Include a pdf hyperlink.

Include a background change.

#18

Lesson 17

Lesson 18

Lesson 17-18 tutorial

Include a table with:

4 rows

Centered text

Left aligned text

Right aligned text

Valign top or bottom centered picture

#19

To support lessons 17-18 3 pictures of rainbows horizontally

Have width of 100 pixels for each picture

valign 1 picture on the top

valign bottom

right align

#20

Make a table on books.

Have a title + five books

Have something vertically and horizontally centered

Have at least 7 cells

Have at least 7 rows

Have a picture

For the remaining 3 points, pick 2 previously used tags like Bold, Background Color Change, Italic, background picture, special character. Add a new tag that we haven't used before, like a drop down list (1). Point them out when I check it.

#21

Lesson 19

Copy the pictures and make the links work, square with pre tag, anchor link and definition list

#22

#23

Put your initials in a table

#24

Tables 9

Tables 10
Tables 11

Tables 12

Create a table with:

A title row

5 rows below the title

two columns below the title

5 rows merged on the right column using rowspan

5 links on the left that change 5 pictures on the right

A topic

A background color change

Invisible borders

#25

Work on turning yesterday’s project into a 5 page website.

Tables 13

Tables 14

Tables 15

Ordered or unordered list on the left, picture on the right, table within a table within a table below.

#26

Extra Credit

Complete HTML

*Musicians or a specific musician

Include:

1. Rowspan and Colspan used

2. A picture in a table

3. A paragraph of text, in a table

4. Italics and or bold tag, in a table

5. Unordered List

6. 2 hyperlinks

7. A hit counter, they can be found by Googling “free hit counter” (after the table is okay)

8. Use Rules="none" or "cols" or "rows"

9. Use Cellpadding or Cellspacing

#27
Create a table with a topic of food or make-up, or the Oscar's, or Justin Beber.
Include:
1. 6+ cells, 2+ rows
2. Change cell height to 75 pixels or more, width to 75 pixels or more.
3. Align right and center, so it is easy to tell you used that tag.
4. valign top and bottom
5. A border

#28
HTML Applied Part 4

Show me this

Applied Exercises Part 5 ***Exercise 6, listed under Part 5, is extra, but different than Part 6b below.

#29
Part 6b, the Pie Project, it is 3 pages that look so similar, they look like one.

November

#33

Web Mock Up Assignment

Work on Web Mock up, we’ll present it for 20 points on Thursday.

#34
Web Mock Up Assignment

Work on Web Mock up, we’ll present it Monday the 29th, volunteers, extra credit, required Tuesday.

Present Web Mock Up

#36

Start CSS
· Introduction

Alter lesson 3 to include:

1. Change the text so you have enough text to scroll.

2. Make background picture stationary, so text scrolls over picture.

3. Add a different picture, other than the butterfly.

4. Have the picture right or bottom or centered

5. Have a heading color other than red or black

6. Have a heading background color change, from orange

7. Have a background color change

#37

Lesson 4

Create a simple web page with an article copied off an internet news site that includes:

-monospace in h1

-Use font style, use oblique and italic and normal

-Have an example of small caps

-Use font-weight: bold; or heavier

-Have an example of font-size that is approximately twice the size of the smaller font.

-Show me using View, Text size, Larger

#38

Text

Lesson 5

Lets make either a table with 7 rows or an unordered or ordered wish list with at least 7 lines.

Include:

1. Letter spacing

2. Upper case

3. Capitalization (capit ali ze the first letter of each word)

4. Have an indented heading- name at the end

5. A text decoration change (line over, line under, or line through)

6. Text- ali gn something so it lines up on the right or center, title centered (example).

(6 points)

*November 4, 2014, we put together 4 and 5 with the topic of Puppies or Star Wars.

#39

Lessons 1-5 Application Project: Pandas or Rock Music

Make a website about your Pandas or Rock Music or I-594. If you have a different idea that is compatible with the requirements, run it by me individually.

Include, using what CSS we have learned so far:

A 3 page site. Some pages you might want to include: Types of Pandas, Diet, Population.
From Lesson 3, Colors And Backgrounds, a background color change
A heading color and background change
A background picture that is stationary, does not repeat, and is somewhere besides the top left.
From Lesson 4: Fonts, A font family name (that you can show me in your code)
Small caps
Bold
A font-size change using % or em
Indented text (I need to be able to see this, so it needs to be originally left aligned).
Centered text
A line over or through or under text.
A letter spacing change
Either capitalized or uppercase text

#40

Complete the:
Links

Project,

Topic, Hunting or Animals

Include these links:

A: visited

A:link

A:active

A:hover

Also:

A text decoration change

A background color change

A font color change

A text transform change

#41

Work on:
3-Page Holiday or Hobby Web Site

New for November 2014

Complete the tutorial on the Internet and save it as flash1

Part 2

Create a Pokemon Flash assignment called flash2 include:

1 shape tween and 2 motion tweens, at least 3 layers and 80 frames.

-------not completed below, 2014------

#42

Flash Project 1

Create movie of a car crashing into a rock. Include:

1 shape tween

2+ motion tweens

2+ drawings

4 layers

Flash Project 2

Choose your own topic, include at least:

1 shape tween

2+ motion tweens

2+ drawings

4 layers

Topic or story

#43

November 24, 2014------------

December

Complete Dreamweaver Tutorial

Finish a 3 page Pokemon web page that includes:

3 pages hyperlinked together (3 pts each)

2 Flash Movies (Insert, Media, SWF), if you don't have an SWF File, open your flash movie, then go to Control, Test Movie. (7.5 pts each)

(2 pts) Logo

Background (1 pt)

Text on all 3 pages, can get it from Wikipedia

Have a picture or Flash Movie on all 3 pages

Make a simple web page in Dreamweaver, add Flash movie. We’ll do this together. Video of this project

Create 4 web pages under a subtopic, so if Music was the topic, the webpages might be Emo, Jazz, metal, and Rap. Add a table, insert the prior flash project. It is 3 points for each webpage, (12 points), 2 points for the table, 3 for the flash, 3 for using a main topic, 20 total.

#45

#44 Identification and Grouping of elements

Lesson 8 Grouping of elements ()

Class and ID Project or Span and Div

Class Id Span and Div Applied

Select a topic with 8 or more items that you can divide into equal groups, like 4 local schools in Snohomish and 4 in Everett.

Create a webpage using a style sheet that has (make a new stylesheet):

1. Have a a Class or Div is a unique color, ex red

2. Have a second Class or Div that is a unique color, ex yellow

3. Use an ID or Span to make one or more of one group stand out. Perhaps one of the schools is blue and the others are red.

4. 4 extra for using Class and ID and Span and Div

Grouping

Lesson 9, The Box Model

Lesson 10 Margin and padding

*the assignment: Disaster Survival Website.

#46

Borders

Presidential Border Project

1. Write 3 sentences about your favorite President and put a 3 different border styles, widths, and color changes using 3 different tags (h1, h2, h3, p, ul). *Include one incomplete border.

2. Change the paragraph or body margins as in lesson 10.

3. Find a picture and include it on the website however you want.

#47

All work assigned before today must be turned in today by 2:12.

Height and width

Floating elements (floats)

News Project (3 pages)

1. Look up a local news story with a picture and float the text around the picture on a website. Change the margins and color, so it has a good appearance (try to finish this part today). Have a hyperlink to the second page.

2. Include a hyperlink to another page, for example, “columns”. On the columns page present a news story in columns (try to finish this part Thursday).

3. Have a link to a 3rd page with the text below the picture using the clear property (start this part Friday).

#48

Work on Disaster website.

#6 Lesson 1.1, using Fireworks

#7 For 1.1, add notes:

For the “frames,” part of the lesson, which don’t exist on Fireworks 5:

Open the “menu” file.

Choose the states menu (go windows, states, if you don’t see it), click on “new”.

Right click on State 1 and add state 2

Go File, Import, choose Overmenu.

Drag it out.

Go to state 1.

Choose the slice tool, select one button, go to window, behaviors.

Choose the plus sign, swap image.

Choose preview, see if it works, go back to original, complete the other buttons.

1.5, drawing software

#8 Check off 1.1

Lesson 1.2

#11 Lesson 1.3

For 1.3, choose A or B or C, save it as a word document, submit it do the inbox (I’ll have to cover the inbox in class, so if you finish it in advance, please wait until I cover it).

Make a 4-Page Dreamweaver website, all linked together using a Spry Toolbar, include a Flash Movie, a topic, and at least 3 external links. 30 points.

#30
Part 7 b, c, d ----

#35 *Start this is you finish the Mock-Up Assignment
Super Big Project

Get up through

Lesson 21 (we are doing this now to give you a template for the Super Big Project. Type it up and I’ll check it off for 10 points.

And look at:

#32
Make a table with a column on the left that has two links, one referring to cell padding and cell spacing that shows up on the right, the other using rowspan and/or colspan.

January

JavaScript

Lesson 1

Lesson 2

Complete lesson 1 and 2 of javascript. To apply lesson 2, Instead of having it say Hello Joe, change it so you have 2 different variables with your name and another quote, and two different stable quotes to go with them. For example, my quote might be” Is AWESOME”, and “at most things” and my variables might be, x = “Mr. Harris”, and y = “Most of the time”

Call this Javascript 2, so we will be able to easily find it when it is time check it, and show me the working program and the code.

If it doesn’t work, look at it closely, a quote in the wrong place or capitalized letter in the wrong spot will throw it all off.

Lesson 3

Create a web page with 3 pictures. When you click on the picture, you will be prompted for your name, have display what the picture is. For example, You could have a picture of a Mustang, Corvette, and Camaro. When you click on the picture of the car, a box asks your name, you click okay, then a box says “Jeff, you clicked on a Mustang.” Call this Javascript3.

Lesson 4

Write a web page that will prompt a person for their name onLoad and display it in a new window. Keep in mind you’ll have to combine information from lesson 3 and 4.

Add to this web page a separate function with a new picture that when you click on it, it will say what it is and include your name from the variable above.

So, I am looking for 2 functions on one page and using a variable that has been set to prove you can do so.

So, what this would look like is the webpage opens up and asks you your name, then a window pops up and says, “Hello, Joe.” You see a picture, click on it, and it says something like, “You clicked on a 1964 Mustang, Joe.”

Javascript
Lesson 5
“Lesson 5”
Write a page that asks a person their age, then tells them what year
they can retire (consider age 67 retirement age). Next, have it ask
the user their height in inches, and multiply it by 2.54, and give them
their height in centimeters.

Javascript

Lesson 6
Lesson 6
Create a web page with a picture of a rectangle above the two text
boxes. The user will enter the length and width of a square. You will
create an alert that tells the user the area of the square (length
times width).

Javascript

Lesson 7

Edit lesson 7 to have a game that uses:

1. Change the background color change (5 points)

2. Use onClick, or mouse over, mouse out (5 points)

3. 9 pictures (5 points)

4. Directions when the game opens (5 points)

10 points for a creative fully functional game that is fully explained, 7 if it is creative but missing something, perhaps the instructions don't fully explain the game. 5 for a project that meets the criteria but doesn't make sense.

30 total points.

Ideas include a maze, one bomb of 9 pictures and a message if you make the wrong choice. Minesweeper.

Javascript

Lesson 8

Create a page that asks a person a number related question, for
example, "Click here to enter your age." The page will give a message
box with a response. For example, it might say, "Time to get a job."
if the person is over 18.

Have at least 3 questions and answers.

Javascript

Lesson 9
Create a number guessing game. The user will enter a number into a
textbox, the page will compare the number to a preset number, like 75.
If the user guesses low, they will get a message like, "guess higher."
If they guess high, they will get a message like, "guess lower."

*If they are correct, have a message appear in the textbox, like
"Correct". If you want to do additional things, that is fine, just be
sure to have something appear in the textbox, so we are sure to cover
the required material.

Lesson 9b
Create a page that will convert Celsius into Fahrenheit, and Fahrenheit into Celsius. It should ask the person to enter Celsius or Fahrenheit into a textbox, they will hit a button, the conversion will display in a textbox.

Tc = (5/9)*(Tf-32); Tc = temperature in degrees Celsius, Tf = temperature in degrees Fahrenheit

Tf = (9/5)*Tc+32; Tc = temperature in degrees Celsius, Tf = temperature in degrees Fahrenheit