Week 2

4:00pm - 4:15

WWW History

4:15 - 4:30pm

How the WebWorks

4:30 - 4:45 (Uploading to a Server)

FUGU (FTP) Free Download
Step by step FUGU instructions (UMBC)

1) Save your homework as index.html, then save it in a 382 folder in a umbc directory
2) Upload the 382 folder (with your images, and index.html page) to UMBC's server
3) Check to make make sure it worked: http://userpages.umbc.edu/~username/382/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

4:45 - 5:00

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. ">



5:00 - 5:15

Hexadecimal System (RGB)

This is HTML code:
<body bgcolor="#00FF00">

5:15 - 5:50(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="382.css" rel="stylesheet" type="text/css" />

Home Work:

1) 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 before next class - Here's my CSS

2) 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.

3) Prepare a brief (less than 5 min.) presentation about your self and your art work. Please include images of your work.
What are you studying? Why are you studying it? What else do you do for fun?
What experience do you have with Interactive Media, Flash, ActionScript, and or web design?
What do you want to learn this semester?

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; */
}

art382 (interactive media)

Week 2