Embed Size (px)
DESCRIPTION
Making Your Web Page. Changing your Essay into a Web Page. . The title should be found within the Head element Your title should include your name and your topic Your title does not have to be the same as the file name of your page. Attributes. - PowerPoint PPT Presentation
Citation preview
Making Your Web Page
Changing your Essay into a Web Page
<title></title>
• The title should be found within the Head element
• Your title should include your name and your topic
• Your title does not have to be the same as the file name of your page
Attributes
• An attribute is something that modifies a tag’s default settings
• An attribute is placed inside the beginning tag and must have a value
• The attribute does not appear in the end tag
<p style=“font-color:red; size:14px; family:arial”> stuff </p>
<tag attribute=“value” attribute=“value” > stuff </tag>
Style=Background-Color Attribute
• The Background Color attribute is used in the <body> tag
• The Background Color style attribute is used in the <body> tag
<body style="background-color:color">
Color
• There are sixteen colors that are guaranteed to appear the same color in any browser
• They can be labeled by name
Aqua Gray Navy Silver
Black Green Olive Teal
Blue Lime Purple White
Fuchsia Maroon Red Yellow
Color
• The whole palette can be described as mixes of three basic additive colors:
RED GREEN BLUE
FFFFFF
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
Color
• The 16 “web safe” colors labeled by NUMBER:
00FFFF 808080 000080 C0C0C0
000000 008000 808000 008080
0000FF 00FF00 800080 FFFFFF
FF00FF 800000 FF0000 FFFF00
<img src=“Pictures.jpg” />• Image tags do NOT have end tags• The Source Attribute _ src _ value is the
picture’s FILE NAME– It MUST include the file Extention
• .jpg, .bmp, .tiff, .gif, etc.
• The image file must be in the same location as the .html document
• You may also want the Align Attribute– Align=“right” or Align=“left”
<img src=“harvested_trees.jpg” align=“right” /><tag attribute=“value” attribute=“value” />
Links (three of them)
• The Tag is <a> (for ANCHOR) </a>• You need an attribute to reference another file • You need something in the body that will be the
object you click on– Text– Picture
<a href=“http://www.w3schools.com/html”> HTML Help </a>
<a href=“http://www.w3schools.com/html”> </a>
An Example: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 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 64 percent 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 can’t see this but there will be cleaner air for us to breathe.
<p>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 is done you can likely reduce the trash on the land by over half. The people who live in <a href=“http://www.ocrra.org/Recycling.html”> Onondaga County </a>, New York reduced their trash by 64 percent 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 can’t see this, but there will be cleaner air for us to breathe.
<a href=“http://www.nrcm.org/default.asp”><img src=“harvested_trees.jpg” align=“right”> </a> </p>
The Code:
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
Adding a Style Sheet
• Adding a style sheet allows you to make format changes quickly and easily
• <style> tag goes in the head
<head>
<title>Whatever your title is</title>
<style type=“text/css”> p {text-indent:10px; font-family:arial; color:red}
h1 {text-align:center}</style>
</head>
What you type:
<table> Tables </table>
• <table> and </table> are the main tags
• Made up of Rows <tr> & </tr>
• Rows contain Data <td> & <td>
• You can have Headers for Rows and Data <hr> & </hr> and <hd> & <hd>
• Tables can be aligned left, right
Table with a picture and Caption
<head>
<title>Whatever your title is</title>
<style type=“text/css”> p {text-indent:10px; font-family:arial; color:red}
h1 {text-align:center}</style>
</head>
What you see:
<head>
<title>Whatever your title is</title>
<style type=“text/css”> p {text-indent:10px; font-family:arial; color:red}
h1 {text-align:center}</style>
</head>
What you type:
