WEEK #3
TOWSON WEATHER :
65° - 49°, Sun and clouds mixed.
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.
NOTE: Exchange contact info with 3 people
Papyrus:
Review HTML:
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
NOTE:
This week, we might start using WeTransfer
Let's open up Adobe Photoshop & Dreamweaver
(Review) HTML basics:
*LINK 2 PAGES TOGETHER*
Headings:
<h1> </h1>
**File formats:
. jpg, gif, png, pdf, txt, htmldiv tags:
<div id="name">
CSS
-CSS Syntax
***External Style Sheets
<link href="466.css" rel="stylesheet" >
CSS Questions:
1. How do you change the background color of a webpage?
...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:
If there's time...
Talk about: TYPOGRAPHY
& readability
HOMEWORK:
[part 1]
- Using HTML, try creating at least 3 webpages.
- Use a navigation bar to link all the pages together.
- You can have an “art” page, a "bio" or about page, and a "links" page.
- Either way, this website should be about you.
- Try to keep it looking professional and please proofread your work.
NOTE: We will be uploading these to the WWW.
[part2]
Using 1 Exernal Style Sheet,
change the fonts and colors of your webpages...
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