art466 (design_for_the_WWW_II)

instructor: ryanSmith
home | syllabus | contact | links | student work

Week 2

9:30am - 9:45
(***PUT COMPUTERS TO SLEEP***)

RSA Animate - Changing Education Paradigms
adapted from a talk given at the RSA by Sir Ken Robinson

9:45 - 10:00

WWW History


10:00 - 10:15

How the WebWorks


10:15 - 10:30 (Uploading to a Server)

Review

1) Save your homework as index.html, then save it in a 466 folder in a towson directory
2) Upload the 466 folder (with your images, and index.html page) to Towson's server
3) Test your webpages: http://tiger.towson.edu/~username/466/index.html
*4) Email me a link to the URL address (now), and if you can't get it uploaded email me your photo, and your HTML code.
ryansmithstudent@aol.com


What we did last class:
Doctype declarations

<html> Basic XHTML
<br /> Line Break
<h1> Headings
<img src="image.jpg" /> Inserting an image
<strong> Bold text
<ul> Unordered List
<a href="http://www.website.com"> Link to a webpage
<p> Paragraphs


10:30 - 10:045

XHTML
not HTML
(information from PHP for the web , by Larry Ullman)

1) all tags are written in lowercase.
Example: <html>
Not: <HTML>

2)
Nested tags must be "well formed"
Example: <div><p> some text </p> </div>
Not: <div><p> some text </div></p>

3) All tag attributes must be quoted.
Example: <table border="0">
Not: <table border=0>

4) All tags must be closed.
Example: <br /> or <img src="image.jpg" />
Not: <br> or <img src=image.jpg>

A valid XHTML document begins with these lines:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

"They tell the web browser what type of document to expect."

"The head of an XHTML page includes the content-type meta tag."
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

UTF-8 is short for 8-bit Unicode Transformation Format
"Unicode is a way of reliably representing every symbol in in every alphabet"
"The current version supports over 99,000 characters."
Other Meta Tags:
<meta name="Keywords" content="ryan, smith, art, photography, video, baltimore, towson, MICA">
<meta name="description" content="Welcome to the official Ryan Smith Art site. ">

<!-- this is an HTML comment -->


10:45 - 11:00

Hexadecimal System (RGB)

This is HTML code:

<body bgcolor="#00FF00">



11:00 - 11:30(CSS)

What is CSS
?

CSS Syntax

This is an example of how to put CSS in the head of your html code (don't do it this semester) :


<style type="text/css">
p{ background-color:#FFF; padding: 2em; color:#999; width:500px; }
</style>

Instead, in the head of your html code, put a link to a separate .css file:

<link href="466.css" rel="stylesheet" type="text/css" />

External style sheets: http://www.w3schools.com/css/css_howto.asp


11:30 - 11:45 BREAK

11:45 - 12:15

(Check HW)

Classwork
:

Create a separate .css file, and link the .html page from week 1 to your new css code.
- What you did last week - What you should have uploaded - Here's my CSS

Be creative, use at least 1 other color aside from black, white, or gray.
Pick appropriate colors, change the size & style of your fonts.
Do not use the default link colors from now until the end of the semester.

Prepare a brief (less than 5 min.) presentation about your self and your art work.
What are you studying? Why are you studying it? What else do you do for fun?
What experience do you have with web design? What do you want to learn this semester?

12:15 - 1:10

Presentations

1:10 - 1:20
Talk about Homework


Homework:


1) Find a website that you think looks awful.
example 1
example 2

2) Redesign the homepage, and one other page.

3) Add a link from your index.html page (from last week) to your homework.

Requirements:
The 2 pages must link to each other, and you should have a link to the original "awful" website (please set the target to _blank).
All CSS must be in an External Style Sheet (http://www.w3schools.com/css/css_howto.asp).
All text should come from the original site.
You can use images from anywhere, maybe try using screenshots (shift+command+ 3 or 4).

CSS Code:

@charset "UTF-8";
/* CSS Document */
/*
this is a comment
*/
body{
background-color:#000000;
color:#CCCCCC;
font-family: Taco Box, Helvetica, Arial, sans-serif;
font-size:12px;
line-height: 1.5em;
}

img{
padding:1px;
border:2px solid #CCC;
}

h1{color:red;background-color:#FFF;text-align:center;font-family:"Arial Black", Gadget, sans-serif;font-size:24px;}
h2{color:#F00; font-family:"Arial Black", Gadget, sans-serif; font-size:18px;}
h3{color:#F00; font-family:"Arial Black", Gadget, sans-serif;}

p{
background-color:#FFF;
padding: 2em;
color:#999;
width:500px;
}

a:link{color:#FFF; font-weight:bold; text-decoration: underline;}
a:visited{color:#FFF; font-weight:bold; text-decoration: underline;}
a:active {text-decoration: underline; font-weight:bold; color: #000;}
a:hover{color:#F00; background-color: #000; text-decoration: none;}

ul{
text-align:center;
list-style:circle;
width:10em;
}

li{
background-color:#FF0000;
padding: 1em;
/* display: inline; */
}