02_FinalWebPage 2012 SlideShow
-
Upload
kmardock064 -
Category
Documents
-
view
217 -
download
0
Transcript of 02_FinalWebPage 2012 SlideShow
-
7/31/2019 02_FinalWebPage 2012 SlideShow
1/16
Making Your Web Page
Changing your Essay into a
Web Page
-
7/31/2019 02_FinalWebPage 2012 SlideShow
2/16
The title should be found within the Headelement
Your title should include your name and yourtopic
Your title does not have to be the same as thefile name of your page
-
7/31/2019 02_FinalWebPage 2012 SlideShow
3/16
Attributes
An attribute is something that modifies atags default settings
An attribute is placed inside thebeginning tag and must have a value
The attribute does not appear in the end
tag
stuff
stuff
-
7/31/2019 02_FinalWebPage 2012 SlideShow
4/16
Style=Background-Color Attribute
The Background Color attribute is used
in the tag
The Background Color style attribute isused in the tag
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_bodybgstylehttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_bodybgstylehttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_bodybgstylehttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_bodybgstyle -
7/31/2019 02_FinalWebPage 2012 SlideShow
5/16
Color
There are sixteen colors that are
guaranteed to appear the same colorin
any browser They can be labeled by name
Aqua Gray Navy Silver
Black Green Olive Teal
Blue Lime Purple White
Fuchsia Maroon Red Yellow
http://www.w3schools.com/tags/ref_colornames.asphttp://www.w3schools.com/tags/ref_colornames.asp -
7/31/2019 02_FinalWebPage 2012 SlideShow
6/16
Color
The whole palette can be described as
mixes of three basic additive colors:
RED GREEN BLUE
FFFFFF
-
7/31/2019 02_FinalWebPage 2012 SlideShow
7/16
Color
Each has 2 digit value on a 16 step scale
0 1 2 3 4 5 6 7 8 9 A B C D E F
RED GREEN BLUE
00A5FF
-
7/31/2019 02_FinalWebPage 2012 SlideShow
8/16
Color
The 16 web safe colors labeled by
NUMBER:
00FFFF 808080 000080 C0C0C0
000000 008000 808000 0080800000FF 00FF00 800080 FFFFFF
FF00FF 800000 FF0000 FFFF00
-
7/31/2019 02_FinalWebPage 2012 SlideShow
9/16
The image file must be in the same
location as your .html document
The SourceAttribute _src _value is the
pictures FILE NAME It MUST include the file Extention .jpg, .bmp, .tiff, .gif, etc.
Image tags do NOT have end tags
You may also want to add the AlignAttribute Align=right or Align=left
http://localhost/Users/kmardock/Bonnie%20Branch/Grade%208/WEB%20PROJECT/Examples/Alignment%20Example.htmlhttp://localhost/Users/kmardock/Bonnie%20Branch/Grade%208/WEB%20PROJECT/Examples/Alignment%20Example.html -
7/31/2019 02_FinalWebPage 2012 SlideShow
10/16
Links (three of them)
The Tag is (for ANCHOR)
You need an attribute to reference another file
You need something in the body that will be theobject you click on Text
Picture
HTML Help
http://www.w3schools.com/htmlhttp://www.w3schools.com/html -
7/31/2019 02_FinalWebPage 2012 SlideShow
11/16
An Example:
If we do these things, there will be a lot to show for ourefforts. There will be very little trash on the land. If all of this
is done you can likely reduce the trash on the land by over
half. The people who live in Onondaga County, New York
reduced their trash by 64percent by recycling. Land
animals will live a better, safer
life and the water will be
cleaner for the sea life. Justone ton of recycled paper can
save 17 trees. Also, you cant
see this but there will be
cleaner air for us to breathe.
http://www.ocrra.org/Recycling.htmlhttp://www.nrcm.org/default.asphttp://www.ocrra.org/Recycling.html -
7/31/2019 02_FinalWebPage 2012 SlideShow
12/16
If we do these things, there will be a lot to show for our
efforts. There will be very little trash on the land. If all of this isdone you can likely reduce the trash on the land by over half.
The people who live in
Onondaga County , New York reduced their trash by 64percent by recycling.
Land animals will live a better, safer life and the water will be
cleaner for the sea life. Just one ton of recycled paper can save
17 trees. Also, you cant see this, but there will be cleaner air for
us to breathe.
The Code:
-
7/31/2019 02_FinalWebPage 2012 SlideShow
13/16
Bonus Points
Unordered List 1 point
Ordered List 1 point
Each List Item .5 points
Additional Links 1 point
Additional Images 1 point
Table 1 point
Each Row 1 point
Each Data Item .5 points
Style Element 1 point
Style tags (p, h1, h2) 1 point
Style Attributes .5 points
-
7/31/2019 02_FinalWebPage 2012 SlideShow
14/16
Adding a Style Sheet
Adding a style
sheet allows you
to make formatchanges quickly
and easily
tag goes
in the head
Whatever your title is
p {text-indent:10px; font-family:arial;color:red}
h1 {text-align:center}
What you type:
-
7/31/2019 02_FinalWebPage 2012 SlideShow
15/16
Tables
and are the main tags
Made up of Rows &
Rows contain Data &
You can have Headers for Rows and
Data & and &
Tables can be aligned left, right
-
7/31/2019 02_FinalWebPage 2012 SlideShow
16/16
Table with a picture and Caption
This is a picture of something important.
What you see:
This is a picture of somethingimportant.
What you type: