Scribd
Upload
28 views16 pages

Changing Your Essay Into A Web Page

The document provides instructions for converting an essay into a web page by explaining key HTML tags and elements. It covers adding a title, using attributes, setting background colors, inserting images and links, creating tables, and adding a style sheet to format text. The overall goal is to teach the basics of HTML markup needed to transform written content into an online webpage.

Uploaded by

kmardock064
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
28 views16 pages

Changing Your Essay Into A Web Page

The document provides instructions for converting an essay into a web page by explaining key HTML tags and elements. It covers adding a title, using attributes, setting background colors, inserting images and links, creating tables, and adding a style sheet to format text. The overall goal is to teach the basics of HTML markup needed to transform written content into an online webpage.

Uploaded by

kmardock064
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

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 tags 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>

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

Color
There are sixteen colors that are guaranteed to appear the same color in any browser They can be labeled by name
Aqua Black Blue Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow

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

FF

FF

FF

Color
Each has 2 digit value on a 16 step scale

0123456789ABCDEF
RED GREEN BLUE

FF

A5

00

Color
The 16 web safe colors labeled by NUMBER:
00FFFF 000000 0000FF FF00FF 808080 008000 00FF00 800000 000080 808000 800080 FF0000 C0C0C0 008080 FFFFFF FFFF00

<img src=Pictures.jpg />


The image file must be in the same location as your .html document The Source Attribute _ 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 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> <img src=picture.jpg /> </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 cant see this but there will be cleaner air for us to breathe.

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 cant 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>

Bonus Points
Unordered List Ordered List Each List Item Additional Links Additional Images Table Each Row Each Data Item Style Element Style tags (p, h1, h2) Style Attributes 1 point 1 point .5 points 1 point 1 point 1 point 1 point .5 points 1 point 1 point .5 points

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>

<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


What you type: <table> <tr> <td> <img src=picture.jpg/> </td> </tr> <tr> <td> <h6>This is a picture of something important. </h6> </td> </tr> </table> What you see:

This is a picture of something important.

You might also like