02_FinalWebPage 2012 SlideShow

7/31/2019 02_FinalWebPage 2012 SlideShow

1/16

Making Your Web Page

Changing your Essay into a

Web Page


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


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


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


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


6/16

Color

The whole palette can be described as

mixes of three basic additive colors:

RED GREEN BLUE

FFFFFF


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


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


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


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


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


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:


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


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:


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


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:

02_FinalWebPage 2012 SlideShow

Documents

Transcript of 02_FinalWebPage 2012 SlideShow