art388 (art_on_the_internet)

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

Week 3

(***PUT COMPUTERS TO SLEEP***) RSA Animate - Changing Education Paradigms
adapted from a talk given at the RSA by Sir Ken Robinson

Review (any trouble with CSS or Uploading?)
1) Save your homework as index.html, then save it in a 388 folder in a umbc directory
2) Upload the 388 folder (with your images, index.html page, and CSS) to UMBC's server
3) Check to make make sure it worked: http://userpages.umbc.edu/~username/388/index.html
*4) Email me a link to the URL address (now), and if you can't get it uploaded email me your photo, HTML code, and CSS.
ryansmithstudent@aol.com

What we did last class:
Hexadecimal System (RGB)
CSS Syntax
In the head of your html code, put a link to a separate .css file:
<link href="382.css" rel="stylesheet" type="text/css" />
This is an example of an External Style Sheet

Presentations:
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 web design?
What do you want to learn this semester?


WEDNESDAY
.jpg or .gif or .png

More with CSS:

<!-- comments --> and /* comments */

changing the background with CSS

CSS styles can be applied to general page elements, CSS Classes, and specific items:

img { border: 0px; }
this applies to every image tag in the HTML document

.classy { color: red; }
this applies to a CSS class called classy.
<span class="classy" > Example of a paragraph with classy text </p>

#about { background-color: #ccc; }
This rule applies to just the specific element that has an ID value of about:

<p id="about"> About stuff goes here </p>


http://www.csszengarden.com/

div tags:
<div id="title"> week 3 </div>
<div id="other"> most of stuff </div>
<div id="scroller">--scrolling div section-----------</div>

CSS:
#title{
background-color:#000;
color:#FFF;
top:0px;
height:50px;
left:0px;
width:100%;
}
#other{
top:70px;
background-color:#FFF;
color:#999;
width:500px;
}
#scroller{
padding-left:10px;
background-color:#000;
color:#FFF;
width:100px;
height:50px;
overflow:scroll;
}


Homework:
Get started on "Project A"

Due Monday, Sep. 17:
-familiarize yourself with HTML & CSS, start planning the website
-pick an artist
-do some research
-get (or make) digital images of artwork
*complete 2 webpages with at least 1 image and a working link