HTML Introduction
advertisement
4.1 Bringing it Together: Finding, Evaluating and Organizing Information HTML Introduction – An Express Introduction to Web Page Design The Basics: HTML stands for HyperText Markup Language. HTML is the basis for most pages found on the web. HTML tells your internet browser how to display a page. HTML code can be written on a basic text editor such as notepad, or by using a WYSIWYG editor such as Macromedia DreamWeaver or FrontPage. HTML files must have an html or htm file extension on their name. HTML uses “tags” which are found between these brackets < > as in the simple example below: <html> <head> <title>Your page title goes here.</title> </head> <body> This is my first web page. <b>This text is in bold.</b> </body> </html> Note: Each tag has an opening tag like <title> and a closing tag like </title>. There are exceptions to this rule, but mostly this is the case for every tag. Exercise 1: 1. Launch the Notepad application found on the Start menu, under All Programs\Accessories. Insert your diskette and open the file named a:\htmlexample.html using Notepad. 2. Change the title of the page (between <title> and </title>) to anything you want, and type whatever you want in between <body> and </body> but don’t mess with the tags. 3. Save. 4. Launch Internet Explorer and then Open/Browse… and find and open your document -- A:\htmlexample.html . The Public Health Information Partners (PHIP) project is funded by the National Library of Medicine under NLM contract N01-LM-1-3521 with the National Networks of Library of Medicine, Middle Atlantic Region, Region 1. M. Ascher 5/1/06 Basic HTML Tags <html> specifies an HTML document <head> defines section of document that does not appear in browser <title> defines title of page – important as this is what will show up in search results (Google, etc.) <body> defines the document’s body – everything here will appear in the browser <h1> large headline; <h6> is the smallest headline <p> paragraph – inserts a blank line between <br> inserts a single line break <hr> inserts a horizontal rule – or dividing line <table> inserts a table <tr> inserts a table row <td> inserts a table cell Attributes <body bgcolor=”######” > or <body bgcolor=”red”> sets background color using hexadecimal value or color name <font face=”Arial” size=”3” color=”red”> sets font attributes <p align=”center”>, <td align=”center”> centers the paragraph or table cell text Text Format <b> bold <i> italics Links Example: <a href=http://library.nymc.edu/>Health Sciences Library</a> Lists <ul> defines an unordered list <ol> defines an ordered list <li> defines a list item Images Example: <img src="redribbon.gif" alt="AIDS Ribbon"> The Public Health Information Partners (PHIP) project is funded by the National Library of Medicine under NLM contract N01-LM-1-3521 with the National Networks of Library of Medicine, Middle Atlantic Region, Region 1. M. Ascher 5/1/06 The following file can be found on your diskette – htmlexample2.html : <html> <head> <title>More fun stuff to do with html</title> </head> <body bgcolor="ffffff" text="green"><font face="arial" size="3"> <h1>This is a heading</h1> <h2>This is a smaller heading</h2> <h3>This is an even smaller heading</h3> <h4>This is a really small heading</h4> <h5>This is a heading that's barely even a heading</h5> <h6>This is a ridiculously small heading</h6> <p>This is a paragraph</p> <p>This is another paragraph</p> <hr>That was a horizontal rule. <br><br><br>We just inserted three blank lines. <!-- This is a comment. It won't show up in your document --> <p><font face="verdana" size="5" color="red">I changed the font face, color, and size for this paragraph</font></p> <p align="center">Number of participants in today's class from each county.</p> <table width="90%" cellspacing="0"border="1" align="center"> <tr bgcolor="pink"><td align="center">Putnam</td><td align="center">Dutchess</td><td align="center">Orange</td></tr> <tr><td align="center">1</td><td align="center">6</td><td align="center">8</td></tr> </table> <p>And for our grand finale for this document -- a couple links in a list:<ul> <li><a href="http://www.co.orange.ny.us/orgMain.asp?orgid=49&storyTypeID=&sid=&">Orange County Department of Health</a> <li><a href="http://www.putnamcountyny.com/healthdept/index.html">Putnam County Department of Health</a> <li><a href="http://www.co.dutchess.ny.us/CountyGov/Departments/Health/HDindex.htm">Dutchess County Department of Health</a></ul> </body> </html> Exercise 2: 1) Change the background color to yellow, the text color to black. 2) And add a link to New York Medical College at the bottom of your list. http://www.nymc.edu 3) View in Internet Explorer. The Public Health Information Partners (PHIP) project is funded by the National Library of Medicine under NLM contract N01-LM-1-3521 with the National Networks of Library of Medicine, Middle Atlantic Region, Region 1. M. Ascher 5/1/06
