Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Making Your Web Page Changing your Essay into a Web Page."— Presentation transcript:

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

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

4 Style=Background-Color Attribute The Background Color attribute is used in the tag The Background Color style attribute is used in the tag

5 ColorColor There are sixteen colors that are guaranteed to appear the same color in any browsercolor They can be labeled by name AquaGrayNavySilver BlackGreenOliveTeal BlueLimePurpleWhite FuchsiaMaroonRedYellow

6 ColorColor The whole palette can be described as mixes of three basic additive colors: REDGREENBLUE FFFFFF

7 ColorColor 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 REDGREENBLUE 00A5FF

8 ColorColor The 16 “web safe” colors labeled by NUMBER: 00FFFF808080000080C0C0C0 000000008000808000008080 0000FF00FF00800080FFFFFF FF00FF800000FF0000FFFF00

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

10 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 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 YorkOnondaga County 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 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. The Code:

13 Bonus Points Unordered List1 point Ordered List1 point Each List Item.5 points Additional Links1 point Additional Images1 point Table1 point Each Row1 point Each Data Item.5 points Style Element1 point Style tags (p, h1, h2…)1 point Style Attributes.5 points

14 Adding a Style Sheet Adding a style sheet allows you to make format changes 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 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 Table with a picture and Caption Whatever your title is p {text-indent:10px; font- family:arial; color:red} h1 {text-align:center} What you see: Whatever your title is p {text-indent:10px; font- family:arial; color:red} h1 {text-align:center} What you type:


Download ppt "Making Your Web Page Changing your Essay into a Web Page."

Similar presentations


Ads by Google