Web 1 - Opening Activities

Day 1 - (Min. Day)

Document: Activity 1
PowerPoint: Welcome to Class

Video - PowerPoint Class Lecture - Part 1 Teacher Intro | Part 2 - School Rules


Day 2 - (Min. Day)

Document: Web Design Syllabus

Recruit Dancers Bachata Cumbia Salsa Salsa

Document: Activity 3



Day 3 - (Min. Day)

Student Presentations (pairs) from Activity 3

Teach Student Login

Review Activity 1 Questions (online notes)

If time permits:

Web 1 Video: What is the Internet? (online notes)

 


Day 4

Review Class Rules

  • Pay attention to the teacher - No talking while the teacher is talking
  • Raise your hand for assistance - Do not shout the teacher's name and please be patient
  • Work quietly - Collaboration is encouraged, but class volume must stay low
  • Take care of computer equipment - Do not change computer settings or delete files

- No food or drinks (computer lab rule)
- No gum (school rule)
- Remove earbuds/headphones before entering classroom

Log in to the network using Student account

Use Sticky Notes to place name on Desktop

Start Activity 2 (Just read and preview questions)

Preview Activity 4 Questions

Go to online notes

Show Vignette

PowerPoint - History of the Internet Presentation

Video - History of the Internet Presentation

Bonus:

Web 1 Video: Laika

Start Activity 5 Questions


Day 5

Complete Quia Activity 0 - History of the Internet

Web 1 Video - Space Race

Web 1 Video: Yuri Gagarin

Web 1 Video: Duck and Cover

Bomb Simulator - Nukemap

ARPA has become DARPA

The Future with DARPA (24s) .

Complete Activity 2

Bonus:

A look back - old versions of modern websites

File Extensions Novice (online notes).

Create folder with various text files to introduce file extensions

.ppt, .docx, .xlsx, .jpg, .html, .mp3


Day 6

Complete Quia - Activity 0 - History of the Internet

Visit Student Web 1 Projects:

1 2 3 4 5

Build - File Extensions Advanced - (Fake Files)

File Extensions - (online notes)

Review or Complete Activity .25


Day 7

Network log in with gmail accounts

Explain Local CHS Server - Map to Server \\fs01-chs\classroom (whiteboard)

File Extensions Review (whiteboard)

Classroom Server/Student Folders- Explanation and Demonstration (projector)

Complete Activity 0

File Extensions - hands on file extension (.txt to .html) - "open with" custom browser

Complete Activity .25


Day 8

Update Seating Chart

Kahoot Etiquette

Kahoot - History of the Internet

Practice Window Manipulation

  • Title bar drag
  • Resize and position
  • Min, max, restore
  • Taskbar window settings
  • Windows key + arrows
  • Alt-Tab for program switching

 


Day 9

Prepare for Quiz 1 and Quiz 2

- Complete Activity 0

- Complete Activity .25

Create Folder Structure (on Desktop)

Video Laika | Laika2

Document Activity 5 - Use multiple windows

Create Folder Structure Practice Day 1:

Handout001 Angel
Handout002 Ryan
Handout003 Brock
Handout004 Jared

Compressing Files and Folders

- Photos to Download (3)

- Photos to Compress (3 Favorites)

Email teacher

- (gmail) - Compressed file


Day 10

Prepare for Quiz 1 and Quiz 2

- Complete Activity 0

- Complete Activity .25

Create Folder Structure Practice Day 2:

Handout001 Angel
Handout002 Ryan
Handout003 Brock
Handout004 Jared

Compressing Files and Folders

- Photos to Download (3)

- Photos to Compress (3 Favorites)

Email teacher

- (gmail) - Compressed file

Extracting Files and Folders

- Compressed - Photos (zipped file)

- Compressed - Colors (zipped file)

Keyboard Navigation Shortcuts:

  • Backspace (exit a folder)
  • Enter (go into folder)
  • Arrows (move)

Classifications - Animal

Categorization - Target

Update Seating Chart


Day 11

- Complete Activity 0

- Complete Activity .25

Test Canvas Login: http://chusd.instructure.com/

Compressing Files and Folders Day 2

- Photos to Compress (3 Animals)

Email teacher

- (gmail) - Compressed file

Organizing

Animal Sort Zip - Sorting Images (practice and apply keyboard shortcuts)

Target Sort Zip - Sorting Products (practice and apply keyboard shortcuts)

File Server Connection Test - \\fs01-chs\classroom

Create Folder Structure (on Network)

Keyboard Shortcuts:

  • Backspace (exit a folder)
  • Enter (go into folder)
  • Arrows (move)
  • Ctrl-X (cut)
  • Ctrl-V (paste)
  • Alt + F4 (close window)
  • Esc (escape)
  • Ctrl + Z (undo)
  • Ctrl + Y (redo)
  • Shift + F10 right-click menu (see context options)

Color Sort.Zip - Sorting Objects (practice and apply keyboard shortcuts - multi-select)

Character Sort Zip - Sorting Objects (practice and apply keyboard shortcuts - multiselect)

  • Shift + Arrow Keys (multi-select adjacent files)
  • Ctrl + Spacebar (multi-select/delect non adjacent files)

Day 12

- Complete Activity 0

Take Quiz #1 - History of the Internet

Manipulate Text with Keyboard Shortcuts

Review the keyboard. Look for the following keys:

Home

End

Backspace

Delete

Esc

 

Visit Yahoo and look at source code

Click on the following file for text edit practice (code manipulation):

interestingfacts.txt

Click on the following file for text edit practice (sort):

howtocatchaliar.txt

Copy the text from the above documents to a new Word document.

Use additional shortcut keys with file documents:

Double-click - word selection
ctrl-home - go to beginning of document
ctrl-end - go to end of document
shift + arrow - multi-character selection

The Essentials - Keyboard Shortcuts
ctrl-f = find
ctrl-c = copy
ctrl-x = cut
ctrl-v = paste
ctrl-z = undo
ctrl-y = redo
ctrl-a = select all
alt-tab = navigate programs

F2 = rename

F11 = maximized view

window key + D = minimizes all windows
window key + up arrow = maximize current window
window key + down arrow = restore current window


Day 13

- Complete Activity .25

Review Keyboard Shortcuts:

  • Backspace (exit a folder)
  • Enter (go into folder)
  • Arrows (move)
  • Ctrl-X (cut)
  • Ctrl-V (paste)
  • Alt + F4 (close window)
  • Esc (escape)
  • Ctrl + Z (undo)
  • Ctrl + Y (redo)
  • Shift + F10 right-click menu (see context options)

Character Sort Zip - Sorting Objects (practice and apply keyboard shortcuts - multiselect)

  • Shift + Arrow Keys (multi-select adjacent files)
  • Ctrl + Spacebar (multi-select/delect non adjacent files)

Review Keyboard (only) Text Manipulation - Sort

The Essentials - Keyboard Shortcuts
ctrl-f = find
ctrl-c = copy
ctrl-x = cut
ctrl-v = paste
ctrl-z = undo
ctrl-y = redo
ctrl-a = select all
alt-tab = navigate programs

interestingfacts.txt

Find and Reorder:

  • Pregnant goldfish
  • Baby kneecaps
  • Mickey Mouse named after Mickey Rooney
  • Russians answering phones

 

Setup Practice

  • Disconnect Network Drive
  • Map Network Drive - \\fs01-chs\classroom
  • Setup default browser

Day 14

Complete Activity .25

Review (switch workstations)
  • Log in to Network
  • Log in to Gmail
  • Unhide File Extenstions
  • Map Network Drive - \\fs01-chs\classroom
  • Check Folder Structure on CHS file server
  • Set Default Browser - Firefox Developer Edition

 

Install Visual Studio Code for code preview day 1

(Save in the Demos folder with other folders, P1Code, P2Code, P3Code)

Introduction to Visual Studio Code environment

The basics - the document parts

p1code.html - basic - finished1

 


Day 15

Complete Activity .25

What is HTML?

Video - HTML, CSS, JavaScript Explained

 

Web Page Design Overview - PowerPoint Presentation (online notes)

 

Install Visual Studio Code for code preview day 2

(Save in the Demos folder with other folders, P1Code, P2Code, P3Code)

Introduction to Visual Studio Code environment

Extensions

  • Live Server
  • Open in Browser (Alt-B)
  • VSCode-Icons
  • Beautify (F1, Beautify File)

 

Introduction to HTML - It's a markup language (defines structure)

Search Google for HTML images

  • Associated wth < > angle brackets
  • Often paired with beginning and ending tags <html> </html>
  • Defines structure (looks ugly)

Markup the following file using an HTML editor (Visual Studio Code, Notepad++, or Atom.io):

Create interestingfactsshort.html file in Demos

interestingfactsshort.txt - copy text to interestingfactsshort.html and markup

(Internet Failed During 3rd Period - Make Up Next Day)


Day 16

Quiz - Monday

Kahoot- File Extensions

(Make up - Install VS Code, Watch Video, HTML Search)

Transition IDE to Notepad++

Using HTML editor, code three pages

(Save in the Demos folder with other folders, P1Code, P2Code, P3Code)

The basics - the document parts

p1code.html - basic - finished1

Introduce tags:

  • Header 1, Header 2, Header 3
  • Horizontal Rule
  • Break
  • Emphasis
  • Ordered List
  • Unordered List
  • List Item

p2code.html - <h1>, <hr>, <br>, <em> - finished2
p3code.html - <h3>, <ol>, <ul>, <li> - finished3


Day 17

Take Quiz #2 - File Extensions

Prepare for next Quiz - Keyboard Shortcuts

Paper HTML - Create Handout

Word Example of Header and Lists

Review

On your own:

Finish: p3code.html - <h3>, <ol>, <ul>, <li> - finished3

HTML Presentation PowerPoint

Part 1

CSS (Cascading Style Sheets) is the presentation language for the Web. It allows you to "style" HTML elements.

HTML - A markup language for structure

CSS - A presentation language for presentation

Using an HTML Editor, code three pages. First do the HTML then add the <style> tags to the <head> section and add the CSS (Save in Demos in as p4code.html, p5code.html, p6code.html). Your final page should look like the finished link.

Make sure to code your CSS with the <style> and </style> tags.
Remember, the style tags go in the head section.

p4code.html + css ------->finished4
p5code.html + css ------->finished5
p6code.html + css ------->finished6

p7code.html + css - make your own css using Rachel's Challenge HTML
p8code.html + css - make your own css using Rachel's Challenge HTML


Day 18

Activity .5

CSS Presentation PowerPoint

Part 2

Resources:

1 - Copy and Paste Text

2 - Color Names

3 - System Font Names

Using an HTML editor, code three pages. First do the HTML then add the <style> tags to the <head> section and add the CSS (Save in Demos as p4code.html, p5code.html, p6code.html). Your final page should look like the finished link.

Make sure to code your CSS with the <style> and </style> tags.
Remember, the style tags go in the head section.

p4code.html + css ------->finished4
p5code.html + css ------->finished5
p6code.html + css ------->finished6

p7code.html + css - make your own css using Rachel's Challenge HTML
p8code.html + css - make your own css using Rachel's Challenge HTML


Day 19

Part 3

Activity .5

Bring Macbooks tomorrow!

Mac Connection to server test demonstration:

Go to Finder and select Connect to server - smb://fs01-chs.chusd.org

Use your gmail account and check off the "remember" box

Resources:

1 - Updated HTML

2 - Color Names

3 - System Font Names

4 - HTML Code Image (cheater!)

Using an HTML Editor, code three pages. First do the HTML then add the <style> tags to the <head> section and add the CSS (Save in Demos as p4code.html, p5code.html, p6code.html). Your final page should look like the finished link.

Make sure to code your CSS with the <style> and </style> tags.
Remember, the style tags go in the head section.

p4code.html + css ------->finished4
p5code.html + css ------->finished5
p6code.html + css ------->finished6

p7code.html + css - make your own css using Rachel's Challenge HTML or your own list
p8code.html + css - make your own css using Rachel's Challenge HTML or your own list


Day 20 - Day 21

Activity .5

Connect Student Macs to Server

Every class download and install Visual Studio Code. Create pages using updated HTML (Rachel's Challenge) with teacher.

Resources -

1 Updated HTML

2 Color Names or Hex Codes

3 Color Scheme Generator

4 Web Safe Fonts

5 HTML Code Image (for help)

Using a different HTML editor, code two pages.

First code the HTML then add the <style> tags to the <head> section.

Afterwards add the CSS (Save in Demos as p11code.html and p12code.html, etc.).

Make sure to code your CSS with the <style> and </style> tags.
Remember, the style tags go in the head section.

If you need help with CSS, review the following:

+  css 
 + css
 + css

.


Day 22-23-24

Activity .5

Mac Connection to server test:

Go to Finder and select Connect to server - smb://fs01-chs.chusd.org

Use your gmail account and check off the "remember" box

Part 1

Add One Image to a Web Page

Add the following images to a Web page - Learn <img> attributes
Image - 1 : 2: 3

Create three folders:

  • WhatWeLearned
  • OffInternet
  • PlayOutside

Within each folder create a corresponding .html file:

  • whatwelearned.html
  • offinternet.html
  • playoutside.html

Within each folder also create an Images folder.

<img src="Images/mypic.jpg">

Add Three Images to a Web page Part 1

Download zip file and add three images to a Web page:

Image - 1 : 2: 3

Make sure to provide a title (header) and a description paragraph for each image. - Learn <img> attributes and css for centering images. Also style the page with colors and fonts.

activity006a.zip

<img src="mypic.jpg">

Learn about the Images folder.

<img src="Images/mypic.jpg">

CSS - display:block; and margin:auto; for centering images.

Add Six Images to a Web page Part 2

Download zip file and add six images to a Web page.

Make sure to provide a title (header) and a description paragraph for each image. - Learn <img> attributes and css for centering images. Also style the page with colors and fonts.

activity006b.zip


Day 25-27

Activity .5

Part 2
Finish Part 2

activity006b.zip

Make sure to provide a title (header) and a description paragraph for each image. - Learn <img> attributes and css for centering images.

A Look Back

First Web Browser (WorldWideWeb)

Web Design Museum

On Your Own 1 - Web Technologies

  • Create a WebTechnologiesCode folder in Demos
  • Create a webtechnologies.html file and save to the WebTechnologiesCode folder
  • Create an Images folder within the WebTechnologiesCode folder
  • Download the images to the Images folder
  • Add the basic tags to your webtechnologies.html file (html, head, title, body)
  • Use the following resources to complete the web page

Text | Images 1 2 3 4 5 | HTML Code| CSSCode | Finished Web Page

 

Kahoot - Keyboard Shortcut Keys

CodePen - Explore CodePen - HTML, CSS, and JavaScript

Visual Studio Code - Extension - Intstall Pigments

Quiz # 3 - Keyboard Shortcuts

Color Theory

What is a blockquote - MLA and APA report formatting - Image

Visual Studio Code - Extension - Color Pigments

The Color of Friendship (text) - Paste onto a Wordpad file .

Download and markup wth HTML - Learn <blockquote> and Ids
Images - 1 2 3screenshot

(Advanced) The Color of Friendship - Demo only - Ids
demoactivityids.zip

<blockquote id="red">

On Your Own 2 - Color Wheel

  • Create a ColorWheelCode002 folder in your Demos folder
  • Create an Images folder inside of the ColorWheelCode002 folder
  • Create a colorwheelcode002.html file and save to the ColorWheelCode002 folder
  • Add the basic tags to your colorwheelcode002.html file (html, head, title, body)
  • Use the following resources to complete the web page

Text | Images 1 2 3 4 | HTML Code | CSS Code | Finished Web Page

Use Ids enhance colorwheelcode002.html presentation

Use HEX codes or the Color Scheme Generator


Day 28

Read/Study Pyschology of Color Article for Quiz#4

CSS and Color

Pay special attention to the colors you choose for your Web site. They are important and convey different emotions to your target audience. Please read the following article:

Color Psychology

From Ezilon.com

Internet Design Articles
The Psychology of Colors in Website Design
By Ezilon.com Articles
Oct 24, 2005, 07:57

Since people associate particular colors with different emotions, the colors used on your website can have a psychological effect on visitors to your site. By using specific colors geared towards the emotion you want to invoke, you can actually increase product sales.

Here are some colors along with the emotions and symbols they stimulate:

1) WHITE- purity, innocence, peace, perfection, chastity, sterility, cleanliness. In general, white creates a cool and refreshing feeling.

2) BLACK- night, space, authority, sturdiness, reliability, power, constancy, prudence, wisdom, classy, elegance, submission, mourning, demons, witches. Black is a controversial color as it can symbolize both good and evil.

3) RED- love, excitement, warmth, heat, fire, blood, passion, power, aggression, action. Use red as an attention grabber. It works better as an accent color rather than a background one.

4) PINK- romantic, affection, sensuality, tenderness, calm, soft hearted, softness, femininity. Pink tends to reduce aggression.

5) BLUE- sky, ocean, water, temperature, ice, coolness, mist, shadow, travel, freedom, truth, solitude, wisdom, trust, loyalty, peaceful, calmness, intelligence, dedication, masculinity. Different shades of blue convey opposite meanings. Light blue is peaceful while dark blue is depressing.

6) PURPLE- royalty, dignity, luxury, wealth, sophistication, feminine, passion, romance, sensitivity, coolness, mist, shadows, mysterious, mystic.

7) GREEN- money, calm, envy, greed, nature, life, youth, renewal, hope, vigor, fertility, rebirth, freedom, guilt. Different shades of green have different meanings. Dark green-cool. masculine, conservative, wealth. Emerald green- immortality. Olive green- peace. Green is the easiest color on the eye.

8) YELLOW- light, purity, understanding, brightness, warmth, playfulness, creativity. Lemon yellow is the most eye fatiguing color. Yellow can increase irritability so yellow should not be used as a main color, only as an accent. Yellow enhances concentration.

9) ORANGE- autumn, youthful, fire, warmth, contentment, fruitfulness, wholesomeness, strong, generous, endurance, strength, ambition. Orange is the color most associated with appetite so it would be a good color choice for a website selling food products. Orange also makes a product seem more suitable for everyone and more affordable.

10) BROWN- wood, comfort, strength, earth, solid, reliable, credible, maturity, humility, conservancy. Light brown conveys genuineness.

11) GRAY- exclusivity. Enhances the psychological response of other colors.

In general, red, orange, and yellow are exciting colors while purple, blue and green are calming ones.

Use the color that symbolizes the emotion you want to convey as the primary color on your website. Add 1-2 other colors to reinforce this emotion. The colors used for your background, header, graphics, text, highlighting, headlines, etc. will all contribute to your websi te's influence on your visitors.

© Copyright 2004 by YourSITE.com

 

Color Theory

Color Wheel Image

Used in Various Careers

- Web Design - Colors and Emotion Article

- Interior Design - Room Colors Screenshot

- Fashion - Pantone Colors 2015 pdf

- Cinema - Film Color Schemes Article

- Marketing (packaging) - Package Design Article

Color Theory