1 / 22

HTML

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

marcin
Download Presentation

HTML

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. HTML Hyper Text Markup Language

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

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

  4. HEADER • Header tag - After the <html> line, Press enter twice • Type <head> • Press ENTER key twice and type </head>

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

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

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

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

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

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

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

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

  13. 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 <imgsrc=”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”>

  14. 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”>

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

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

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

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

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

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

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

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

More Related