TOWSON WEATHER :
63° - 37°, mostly sunny
Review 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>
Relative links:
- refer to a page that exists in the current directory that the browser points to.
• sub-directories and included files can be specified in the relative link.
• Makes for very portable web pages. Whole directory systems [websites/projects] can be moved easily.
Absolute links:
- reference files based on the absolute location on the local file system.
• absolute links begin with a / or ../
Remote links:
- reference files based on the absolute location on complete URL:
Example: https://users.cs.cf.ac.uk
If you have not yet downloaded BB Edit or Brackets, please do :)
NOTE: Next week, we might start using WeTransfer
(Review) HTML basics:
*PLEASE, DO NOT USE HTML STYLES
(Review) page1.html
Some more HTML:
*LINK 2 PAGES TOGETHER*
Headings:
<h1> </h1>
<em>, <i>, <strong>, & <b>
File formats:
. jpg, gif, png, pdf, txt, htmldiv tags:
<div id="name">
CSS
-Example #1: (W3 schools)
-CSS Syntax
***External Style Sheets
<link href="466.css" rel="stylesheet" >
CSS Questions:
1. How do you change the background color of a webpage?
2. How do you change the font color of “Body Text”?
3. How do you change the font color of headers: H1, H2, etc?
4. How do you change font sizes?
5. How do you change the background color of a paragraph?
6. What is padding, and how do you add it to a paragraph of text?
7. How do you add a solid border to your images?
8. What's a margin, and how do you add it to your images?
9. How do you change the color of your hyperlinks ("A" tags), and how do you change the "visited link" color?
10. What's the difference between an "active" link color and a "hover" color? How do you apply these CSS styles to HTML Links.
11. How do you change the font family, and why would you want to choose more than 1 font family?
12. What is "line height", and how would you adjust it using CSS?
13. What's the difference between a DIV Class, and an ID?
14. How would you center text and/or an image?
15. How do you change the background color of a DIV box?
16. How would you change the margins and padding of a DIV (using a class)?
17. Why would you use "span" tags, and can you use them to change your font color?
18. How do you add comments, or notes to yourself using CSS? And, why would you use comments?
19. What are "Google Fonts", and how do you add them to your page (using CSS code)?
20. How do you adjust the opacity of your CSS styles?
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:
HOMEWORK:
[part 1]
Using HTML code :
Make 1 webpage (about yourself),
use the following:
- 1 heading (your name)
- 1 image of your face
- at least 3 more image sources (preferably images of your original art)
- at least 1 paragraph (about you)
*and 3 hyperlinks to websites of your choosing
Note: Please have examples of previous web designs
(web designs can be embeded as images ,or you can make hyperlinks to uploaded projects.)
[part2]
Using CSS CODE:
Change the fonts and colors of you 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 class
- Put all of your images, HTML, & CSS page in 1 folder
- You can compress it into a .zip file
Remember...
Required materials for this class:
(1) a flash drive or hard drive: 2GB or more
(some external device to store your work on)
(2) *Personal Web Space (Towson user accounts are fine)
(3) a sketchbook, something not too big, about 8x10 inches
(for notes and sketches)
(4) something to write & make drawings with
Quiz Questions for Week #3:
1) What is typically the first file of your website saved as?
2) Name 3 “Required materials” for your ART466 class.
3) There are many programming languages, and different types of code;
name 3 coding languages that we will cover in this class.
4) Name 2 webbrowsers.
5) Name 2 search engines.