ART 466


WEEK 2

(Wednesday) February 9
Weather forecast Towson Mostly Sunny, 51°F - 35°F 

*CHECK HOMEWORK*

If you have not yet downloaded - BB Edit or Brackets, please do

NOTE: Next week, we might start using WeTransfer






Changing Education Paradigms
a talk given at the RSA 
by Sir Ken Robinson (world-renowned education & creativity expert)

(Review) HTML basics:


*PLEASE, DO NOT USE HTML STYLES

(Review) page1.html



Some more HTML:

<!-- this is a comment in HTML -->

<a href="http://www.website.com"> Link to a webpage </a>

<a href="..." target="_blank">Link to a webpage </a>

*LINK 2 PAGES TOGETHER*

Headings:
<h1> </h1>

<em>, <i>, <strong>, & <b>



File formats:

. jpg, gif, png, pdf, txt, html



div tags:
<div id="name">




CSS

-Example #1: (W3 schools)

-CSS Syntax

***External Style Sheets

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



an example of a CSS page

body{background-color:black;}

styling links

a:link {color:#FF0000;}

h1{
background-color:#CC0;
padding:.5em;
text-align:center;
}

/*this is a comment in CSS code */



Center divs using CSS:

#wrap{
text-align:left;
max-width:1000px;
min-width:600px;
margin-left:auto;
margin-right:auto;

width:60%;
background-color:white;
padding:10px;
}

****changing the background with CSS 



....... CSS3:

html{
height:100%;
overflow-y: scroll;
background: url(images/bg.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


Google fonts 

ID vs. Classes
* htmldog.com


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

img { border: solid #000 10px; }
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 classy red text </span> 

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

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






HOMEWORK:


[part 1]

Using the same HTML code from last week's assignment, add an external CSS page.
* And, add 3 hyperlinks to websites of your choosing.

[part2]


Using HTML and CSS CODE:
Change the fonts and colors of the 1 webpage (about yourself),
try using the following:
- CSS link colors
- CSS text color
- CSS background color
- CSS margins
- And, try playing with font families

...all due next Wednesday, February 16

- Put all of your images, HTML, & CSS page in 1 folder
- You can compress it into a .zip file
help: How to ZIP files, Mac
help: How to ZIP files, Windows