Web Authoring and Design course

Week 1

Orientation

Activity 1.1: Email The Instructor

Send your instructor an email with the following: Name; Where are you from; Web Experience; Expectations / What do you expect to learn?; Special Interests

Send email to sager.joshua@pti.edu Make sure to set the SUBJECT LINE for ALL SUBMISSIONS to start with WEB: For example WEB: Email Activity

This Activity is worth 5 points

History of the Internet

The beginning of the internet: Not Al Gore; sputnik; ARPANET; Tim Berners-Lee; Mosaic Web Browser
Web Standards: A Breif History of Web Standards

Web Servers

Local Server: Testing: Tour of local server; WAMP (PC), MAMP (MAC) , XAMPP (BOTH)
Web Server: Live Content: Tour of a live web server
Web Host vs Domain Name
Domain Names: An address for you website; Think of it like your street address; Transfering Domain Names; Domain registrar; Who is
Web Hosting: The space where your website is located; Think of it like your house or apartment
Hosting Companies: A Small Orange; Media Temple; 1 and 1; Go Daddy
Web Publishing Workflow: Create files locally; Upload files via FTP, HTTP, or Web Disk

Web Content

Web Content: Blogs, Templates, and Handmade
File Extensions: .htm, .html, .shtml, .php, .jsp, .asp, .aspx, .cfm, (plus many more)

Text Editors

1.2 - Web Scavenger Hunt

Using the internet, find at least one website link for each of the items listed below.

Download theScavenger Hunt document.

Compose an email with all of your answers and send it to your instructor. This activity is worth 10 points.

Great Resources for Web Design

Videos: Don't Fear the Internet
Books: Designing with Web Standards by Jeffery Zeldman; HTML5 by Jeremy Keith; CSS3 by Dan Cederholm
Curriculum: Opera Web Standards Curriculum; WaSP Interact Curriculum
Community: Refresh Pittsburgh; Pittsburgh Flash Users Group
Blogs: Jeffery Zeldman; Samantha Warren; Jason Santa Maria; Smashing Magazine
Odd and Ends: Web Standards Checklist (via max design); Wireframing and Moodboards. A Practial approach; W3Schools - Be careful not everything they show is Web Standards friendly!; InDesign... That's right I said it.; SEO Guide form google; Google Grades their SEO

Project setup

Folder setup

icons

<link rel="shortcut icon" href="favicon.ico">

<link rel="apple-touch-icon" href="icon_57x57.png">

index

starte code (see below)

Validation

What is validation: doctype; how to validat; the truth about validation

HTML Starter Code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>

1.3 - Basic Project Setup

Create a new web project: Use the HTML starter code; Use proper folder structure; Create a .ico file (favicon). Apple touch is optional.; Create an index.html file; Be sure to name the title tag Basic Web Project; Place your name in the body; Upload (ftp) the project to the web server

Compose an email with a link to your project and send it to your instructor. This activity is worth 10 points.

Week 2

HTML 101

HTML Quiz

Web Standards

What are they?: Best practices and a philosophies aimed at creating ubiquitous content.
Common Best Practices: Always use a proper Title; Always use h1 - h6 appropriately; Put your navigation in a list; All tags should be lower case; Use quotes for attributes; Manage div's and classes; Call a spade a spade - semantic markup
Why do it: Better indexing and less to maintenance
Where do they come from?: HTML Specification; CSS Specification

2.1- HTML 101

Download the HTML 101 starting files

Go the the working folder and take a look at the screenshot

Your goal is to use the appropriate tags for the article

Use any of the following tags

<h1> - <h6>
<p>
<hr />
<ol>
<ul>
<li>
<img />
<hr />
<a>
<strong>
<em>
<a>

Upload the project to the student web server

Compose an email with a link to your project and send it to your instructor. This activity is worth 25 points.

2.2 - HTML - In the Wild

Seek out a newspaper or magazine article that is at least 4 paragraphs in length
Make a photocopy of the article
Write the appropriate HTML tags on the photocopy
All article type and imagery must be accounted

Hand in the completed document to your instructor. This activity is worth 25 points.

Week 3

Style Sheets

CSS 101

CSS 101 (.pdf) CSS Best Practices (.pdf) CSS 2.1 Cheat Sheet (.pdf) CSS 3 Cheat Sheet (.pdf)

Style Sheet Best Practices

Tips and Best Pracices: CSS Box Model; CSS Reset; Default Styles; Rendered Font Tests; Browser Lab; Style Sheet Conditionals; CSS Hacks; classes vs id's; Firebug, Web Developer Toolbar and other development tools

CSS Tricks and Techniques

Centering

margin: 0 auto;

Columns

float:left;

Descendant Selectors

li a{color:orange;}

Rollovers

a:hover{color:yellow;}

No bullets

ul{list-style:none; margin:0; padding:0;}

Developer Tools

CSS 101 - Answers(.zip)

3.1 - CSS 101

Build an HTML Article and format with CSS: Download the starting files.; open up instructions.txt inside the working folder. Follow the instructions step by step

Compose an email with a link to your project and send it to your instructor. This activity is worth 50 points.

Week 4

HTHML5 Compatibility

HTML5 Boilerplate

4.1 - Translation Activity

Translate a newspaper article into semantic markup plan: Break into Pairs; Place the appropriate tag next to the content in the newspaper article; Compare with my semantic markeup plan

The objective is to gain a better understanding of how to break down content into semantic markup

This activity is worth 5 points

Image for Article (.jpg)

4.2 - Plotting Mark Up Activity

Using your semantic mark up plan, plot out your mark up in index.html file.

Download and use the Newspaper Copy

Open Dreamweaver
Manage your site
Setup folder structure
Create index.html
Uset this code to start: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
Place all content inside of the body tag
Add appropriate markup
Misc: favicons; Meta Description

The objective is to practice and become more familiar with plotting basic mark up.

This activity is worth 10 points

4.3 - Pagelayout Markup

Break into Pairs: Place the appropriate page layout markup newspaper article