Be safe.
Do not publish personal information beyond your name
Do not share address
Do not share phone number
Do not share images of yourself or friends
If you are unclear about these safety precautions, please ask your teacher to explain.
Be legal.
Do not use copywritten material on hulk.osd.wednet.edu
Hulk server address: hulk.osd.wednet.edu
Your account is at /~username
EXAMPLE: hulk.osd.wednet.edu/~sleduc
Access Hulk from home with [...]
Goal
Understand how to download, edit and save an image to media folder and place in web page
Product
HTML document with images included
Sample CSS from the above example:
body {background-color: yellow}
p {color:blue}
{background-color: #00ff00;
color: salmon;
font-size: 400%}
h2 {background-color: transparent}
#divbox {
width: 300px;
height: 300px;
border: medium double #333333;
background-color:#FF33FF;
}
#container {
width: 1024px;
height: 682px;
border: medium double #666666;
background-color:#999999;
margin: 0px auto;
background-image:url(’media/flower.jpg’);
overflow:scroll;
margin-top: 50px;
}
Tools
Adobe Dreamweaver
Adobe Photoshop
GIMP - Free Open [...]
Continue reading about Explore HTML and CSS Relationship - Day 4
Goal
Understand how to create boxes with HTML divisions or as some call them “div” tags
Product
Create at least three div tag boxes
Place boxes on the page in different positions
Change dimensions of the boxes
Change the background color of the boxes
Tools
Adobe Dreamweaver
Kompozer
Resources
W3schools Div Tag Explanation
CHS ComTech DIV Tag Code Page
Basic file from today’s lesson
Advanced example as a [...]
Continue reading about Explore HTML and CSS Relationship - Day 3
Goal
Understand relationships between naming protocols, files, folders and links
Product
Web site folder
Combine CSS declarations under a single selectors
Watch video linked above for examples
Folder named “lastname_portfolio”
HTML file placed inside
media folder included inside
Include images for all future work
Make sure it is titled all lowercase “media
Tools
~ Adobe Dreamweaver
~ Kompozer
Resource
~ W3schools.com CSS Examples Page
Continue reading about Explore HTML and CSS Relationship - Day 2
Goal
Understand relationship between HTML and CSS
Product
Save file to your server account
Basic HTML page with 20 lines of CSS
One CSS question for the teacher tomorrow
Tools
Adobe Dreamweaver
Kompozer
Resource
Sample Web Page
W3schools.com CSS Examples Page
Sample Code
<h1>This is a Header or h1</h1>
<h2>This is an h2</h2>
<h3>This is an h3</h3>
<h4>This is an h4</h4>
<p>This is a paragraph. This is a paragraph. This is a [...]
Continue reading about Explore HTML and CSS Relationship - Day 1
Download a zipped copy of this file with the complete folder structure
body {
color:#F2B368;
text-align: center;
background-image: url(’media/bg.gif’);
margin:50px 0px; padding:0px;
}
#container {
margin: 0 auto;
width: 270px;
background-color: #000;
border: medium solid #000;
}
#title1, #title2 {
position: relative;
margin: 0 auto;
width: 248px;
height: 43px;
border: medium solid #000;
margin: 10px;
display: block;
margin-left: auto;
margin-right: auto;
}
#title1 [...]
