1 / 16

Making Your Web Page

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.

palmer
Download Presentation

Making Your Web Page

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Making Your Web Page Changing your Essay into a Web Page

  2. <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

  3. 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 <tag attribute=“value” attribute=“value” > stuff </tag> <p style=“font-color:red; size:14px; family:arial”> stuff </p>

  4. Style=Background-Color Attribute • The Background Color attribute is used in the <body> tag <body style="background-color:color"> • The Background Color style attribute is used in the <body> tag

  5. Color • There are sixteen colors that are guaranteed to appear the same color in any browser • They can be labeled by name

  6. Color • The whole palette can be described as mixes of three basic additive colors: RED GREEN BLUE FF FF FF

  7. 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 FF A5 00

  8. Color • The 16 “web safe” colors labeled by NUMBER:

  9. <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” <tag attribute=“value” attribute=“value” /> <img src=“harvested_trees.jpg” align=“right” />

  10. 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>

  11. 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.

  12. The Code: <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>

  13. 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. Adding a Style Sheet What you type: • 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>

  15. <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

  16. Table with a picture and Caption What you type: 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> <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>

More Related