html
DESCRIPTION
HTML. Hyper Text Markup Language. Tags. Dividers that tell the browser when a specific format begins and when it ends. Tags are written within angle brackets < > Proud to be a Tanager Most tags come in pairs (usually). Create a simple HTML page. Open Note Pad - PowerPoint PPT PresentationTRANSCRIPT
HTML
Hyper Text Markup Language
Tags
Dividers that tell the browser when a specific format begins and when it ends.
Tags are written within angle brackets < >
<b> Proud to be a Tanager</b>
Most tags come in pairs (usually)
Create a simple HTML page
Open Note Pad Every HTML page needs to start and
end with the HTML tag. Therefore, type <html>
Press ENTER six times (to leave room in the file-although this has no significance)
Type the ending HTML tag </html>
HEADER
Header tag - After the <html> line, Press enter twice
Type <head> Press ENTER key twice and type
</head>
TITLE
The most important information in the head tag is the title.
Used for bookmarking and the title bar I find it easier to read the html code if the empty
tags are on separate lines Position cursor to the line after the <head>tag Type <title> Press ENTER key twice and type </title> Position your cursor at the blank line between
the opening and ending title tags and type The Tanager Home Page
Body
This is where the body of your Web page goes. The body is also closed just before the closing
HTML tag Position your cursor so that it is on the line
under the </head> tag Press ENTER twice Type <body>. Position your cursor two lines above the
</html> tag near the bottom of the document Type </body>
Headings
The <h1> tag goes from size 1 – 6 You have used this tag in the formatting toolbar Position your cursor to the line under the <body> tag Type <h1> Go Tanagers </h1> Press ENTER Key Type <h2> Go Tanagers </h2> Press ENTER Key Type <h3> Go Tanagers </h3> Press ENTER key Type <h4> Go Tanagers </h4> Press ENTER key Type <h5> Go Tanagers </h5> Press ENTER key Type <h6> Go Tanagers </h6>
Preview in the Browser Now erase all <h> tags except for <h1>
and </h1> Place your cursor after the </h1> tag and
press ENTER Type the following passage
Tanager is the common name given in a family of American birds, many of which have brilliant red, blue, or green feathers. Tanagers are from 6 to 8 inches long, and are usually found in the forests, where they feed on insects, fruits, and flowers. There are more than 200 species of tanagers which live in Central and South America. Only a few species of tanagers live in the US.
The best known of this family are the scarlet tanagers. They have a loud cheery song somewhat like that of the robin. They are sometimes called firebirds. The male has bright red feathers, with velvety black wings and tail. The female is a dull yellow below and olive green above.
TANAGERS
Congrats
Not really – your page is ugly Line breaks – prevent the browser from
wrapping the text only at the edge of the browser
<br> (it is not a container tag) Go ahead and enter them where they
are needed
Create spacing between paragraphs You need to add a bit of HTML to this. Place a <p> tag at the beginning of the
first paragraph. Then, place one at the beginning of the second paragraph.
Close the paragraphs too
Placing images <img>
Within the image tag you can specify attributes.
Most important is the source attribute (src)
The source identifies the image you are using and the path to or location of the image sitting within the computer.
Go ahead and find a picture on the web and save it as vhs_ _ (your initials)
Position your cursor just to the right of the </h1>Hit Return
type <img src=”vhs_ _.jpg”> (you might need the full file extension)
Now try adding a border <img border=“3” src=“YOUR PICTURE FILE
EXTENSION” width=“122” height=“122” align=“left”>
FONTS
Let’s get rid of <h1> and add <font size=“6”> The larger the number – the larger the font
(the opposite of heading tags) You can also change the font itself with the
use of the tag <font face=“ “. Type <font face=“Dauphin, Helvetica,
sans serif”>
Font Color
Let’s change the color of the Go Tanagers heading to red
Color is an attribute of the font tag They are best listed using their
hexadecimal equivalents Right <font size Type color=“#FF0000”>
Background Color
This is added to the <body> tag Here is how it will look
<body bgcolor=yellow> Wow, is that ugly, pick a new color but use
the hexidecimal code on the internet to find it.
Hyperlinks
Hyperlinks are created with special tags called anchor tags. The tag has several parts. The opening and closing tags are called the anchor or link tags. <A HREF=“insert location of file”>
Link or anchor tags are fairly useless unless you define the place to which you are linking such as: Spot within your own page Link to a URL or web page on the www Link to another page on your computer
Let’s try it
We will make a hyperlink to the Vermillion School District Web Page
Type this <br><a href=“http://vermillion.k12.sd.us/
”>Vermillion Schools</a>
Making Tables
Position your cursor after the paragraphs Press ENTER key to create a new line,
and move your cursor to the new line. On the new line, type <table border=”1”
cellpadding=“0” cellspacing=“0”> Look at the HTML in Preview mode. You
will see a table immediately appear, even though you haven’t finished the full definition yet
Tables Continued
On a new line, type the <tr> tag and hit return Now type in table data tags
<td width=“50%”>Go Tanagers!</td> <td width=“50%”>Go, Fight, Win!</td> Close the table row</tr>
Now create another row using the same code Create a phone number in td #1 and an address in td#2
Tables Continued
Let’s fancy up the text a bit Another attribute of the <td> tag is valign The code <valign=“top”> will alingn the text to the top of
the cell. Type this code after the <td but before the width “400”> <td valign=“top” width=“400”>
Center the tag line “Go Tanagers” by placing the <center> tag in size=“2”> tag before the <p> tag in front of the text and close it after the final </p>tag after the text.
Close the row with the </tr> tag and close the table with </table> tag. Put these tags after all of the text but above the </body> tag
Now create another table above the other one. You’ll use the same method as before. Put a set of td tags around the image and another one around the Tanagers logo.