(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
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