Building a Web Page Part 2 - 4h
advertisement
Review
◦ DMACC P drive
◦ Email 4htclub@gmail.com
password: stem2014
first line always put your name
Club Web site : www.4hhtc.org
Photo editor;
◦ Photoshop free program Gimp
http://www.gimp.org/
Text editor;
◦ Dreamweaver free program notepad and
notepad++
◦ http://notepad-plus-plus.org/
<!doctype html>
<html>
<head>
◦ <title>Untitled Document</title>
◦ <style>
/*put the css between the style tags in the head.
This is a CSS comment */
◦ </style>
</head>
<body>
◦ <p> put contents between the body tags</p>
◦ <!--remove this line this is a HTML comment-->
</body>
</html>
<h1> </h1> Header tags
<p> </p>
Paragraph tags
Picture
http://www.w3schools.com/html/tryit.asp?fil
ename=tryhtml_images_style
Stored in another folder + broken path to the
picture
http://www.w3schools.com/html/tryit.asp?fil
ename=tryhtml_images_folder
Link to
◦ another web page on you web site
◦ to an external web site
http://www.w3schools.com/html/tryit.asp?fil
ename=tryhtml_links
CSS Demo
http://www.w3schools.com/css/demo_defaul
t.htm
Color p{color:red:}
http://www.w3schools.com/css/tryit.asp?file
name=trycss_color
Background
http://www.w3schools.com/css/css_backgro
und.asp
http://www.w3schools.com/css/tryit.asp?file
name=trycss_background-image_position
add body, p and h1 change: repeat, margin,
position
Text-align
◦ http://www.w3schools.com/css/tryit
.asp?filename=trycss_text-align_all
Text-decoration
◦ http://www.w3schools.com/css/tryit
.asp?filename=trycss_textdecoration_link
◦ Add color: red background-color:
yellow;
Font-size
◦ http://www.w3schools.com/css/tryit
.asp?filename=trycss_font-size_px
Border
◦ http://www.w3schools.com/css/tryit
.asp?filename=trycss3_border-radius
Tables
http://www.w3schools.com/html/tryit
.asp?filename=tryhtml_table_collapse
Learn More Free
http://www.w3schools.com/
http://www.codecademy.com/tracks/
web
