Scribd
Upload
97 views

HTML Lab Guide

This document provides instructions for completing an HTML lab exercise. It details 19 steps to modify an HTML template by adding various elements like paragraphs, headings, images, links, lists and tables. It also covers advanced HTML topics like image maps, non-breaking spaces and internal links.

Uploaded by

ppghoshin
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
97 views

HTML Lab Guide

This document provides instructions for completing an HTML lab exercise. It details 19 steps to modify an HTML template by adding various elements like paragraphs, headings, images, links, lists and tables. It also covers advanced HTML topics like image maps, non-breaking spaces and internal links.

Uploaded by

ppghoshin
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 5

ITEC110 HTML Lab Exercise

Part I. Introduction, Getting Started Note 1. This ITEC110 lab will use Dave Raggett's tutorial ( www.w3.org/MarkUp/Guide) as a resource. Use your browser and open up the link to the online tutorial above; read and scan through the tutorial in order to perform the lab tasks or to answer the questions posed in the Steps below. Step 1. Use Notepad. For this lab you will use NOTEPAD to edit HTML and to create a web page on your PC. Startup the NOTEPAD application and have it running while you work through the lab. Note 2. The Getting Started with HTML tutorial contains the information you will need to complete Part I of the Lab. Part II is to be completed using the associated Advanced HTML tutorial which can be linked to from the Getting Started Tutorial. To complete this lab, you will need to finish both Parts I and II. You can get extra credit by completing the Adding a Touch of Style tutorial (on the use of styles sheets). Step 2. View Source. In the Getting Started tutorial introduction at the paragraph entitled p.s., follow the instructions to view the HTML source of the tutorial page. HTML (HyperText Markup Language) uses pairs of tags with attributes. Notice that the tag pairs have a start tag <TAG> and an end tag </TAG>. This is characteristic of all markup languages. Scroll to the top of the sources page (if you are not already there) and you will see <html> which is the start tag representing the beginning of the HTML document. Now scroll to the bottom and youll find the end tag </html>. As Dave says, use View Source as a way to learn how others have coded interesting web pages. Step 3. Initialize your HTML document and title. Use the text below (after this step), highlight, copy, and paste the provided HTML template (beginning at the <HTML> start tag and going through the </HTML> end tag) into your NOTEPAD document. As Dave describes in Start with a Title, modify the TITLE tag to specify the title as My first HTML document. Save your document as a text file to your working directory. Do this by selecting File->Save As and then, if necessary, ensure you change the directory of the NOTEPAD application to your working directory. That is where you want to save the file. Next, select Save as Type as "All files" using the dropdown list. Type in the file name as htmllab.htm or htmllab.html and select Save. The extension of .htm or .html is important for the system to recognize the file as an HTML document Now, check out your initial web page in your browser by double-clicking on the file name ( htmllab.htm or htmllab.html) from within your working directory. Your title "My first HTML document" should be displayed in your window border but the main section of the page will still be blank.

<!-make <!-HTML

The comment tags surrounding this sentence and the template below the text invisible when viewing with a browser--> Copy from after this line at the HTML start TAG and up through the end TAG and paste this code into your NOTEPAD document-->

<HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML>

Note 3. Each time you modify save out your web document, in order to view the changes, you will need to use the refresh icon on the browser in order to reload the new version of the page. As you read through the tutorial, you will modify the template in accordance with the lab Steps. You will add various HTML components (like the TITLE tag and data above) to your HTML document and you should add each below the last modification entered. Your web page will grow longer and longer with each new addition. Step 4. Paragraphs, Headings, Emphasis. In the Add headings and paragraphs and Adding a bit of emphasis sections, find and paste the tutorial examples of heading, paragraph, and emphasis tags into the body section of your HTML document. That is, paste in the h1 and h2 heading examples, the two lines of paragraph examples, and the emphasis example. Step 5. Graphics and Images. Now, in the Adding interest to your pages with images section, add two image tag lines (without and with an alt tag for short description) like those in the tutorial and save your document and view in your browser to see the difference between them. Instead of the image tags dealing with peter.jpg in the tutorial, use the following two image tags instead. If necessary, runews.gif will need to be copied to your working directory:
<img src="rulogo.jpg" width="144" height="45"> <img src="runews.gif" width="144" height="45" alt="RU News">

Note 4. You can view the second image's short description by mousing over the image. Try it. Step 6. Hypertext Links. In the Adding links to other pages section, add three similar web links to your page (a local link, a Web link, an image link). Instead of the links in the tutorial, use the following:
This a link to <a href="links.htm">Useful HTML Links page</a>. This is a link to <a href="http://www.w3.org/">W3C</a>. <a href="http://www.radford.edu"><img src="rulogo.jpg" alt="Radford University Web Page"></a>

As before, If necessary, the links.htm and rulogo.jpg files need to be copied into your working directory. Step 7. Paragraphs Again. The last few steps have created a sentence (about emphasis), two images, and three links right next to each other on the same line which wraps around. Now, insert the paragraph, <P> and </P> tags around each of these elements so that each is on a separate line. That is, the sentence, each image, and each hypertext link should be on a separate line following the correct use of the paragraph tags. Step 8. Lists. In the Three kinds of lists section, add all four of the examples of lists (exactly as in the tutorial) to your web document. These are bulleted unordered, numbered ordered, definitions, and nested. Step 9. Your Web Page on the World Wide Web. You can create pages that your family and friends can view. To see how this works, copy your htmllab.htm or htmllab.html file to your network drive, into the public_html folder. Rename your file to index.htm or index.html. (Alternatively, if you already have an index.htm or index.html web page in this directory, then name the file something else, e.g., mylabpage.htm. The page can then be accessed from the World Wide Web via the link http://www.radford.edu/~yourusername if it is named index.htm or index.html. The system knows to automatically look for index files as the top level web pages in the public_html directory. If you named your page mylabpage.htm, it can be accessed via the link http://www.radford.edu/~yourusername/mylabpage.htm. Step 10. Now continue with Part II of the lab concerning Advanced HTML. Part II. Advanced HTML. Step 11. Line Breaks. In the section How to force line breaks, paste Daves "line break" example into your htmllab.htm or htmllab.html file. After copying the line break example into the file, then save and check the result to see how the <BR> tag operates. Step 12. Non-breaking Spaces. Now in the section titled How to introduce non-breaking spaces, paste the above "non-breaking spaces" example (coca cola) into your htmllab file, Save it, and check the result in your browser. Step 13. Special Characters. Following the tutorial section How to use entities for special characters, insert copyright, registered trademark, and trademark symbols into your document, each on a separate line. Use line breaks to do this. Save and check results as usual. Step 14. Linking within Pages. According to the instructions in Linking into the middle of web pages, replace the first heading in your document ("An

important heading") with the appropriate code to turn it into a link target. Then at the bottom of your document, put a link reference to it using code similar to that in the tutorials instructions. Now, save the file and check the result. From the bottom of your web page, you should be able to click on the link and it should return you to the top of your page, to the heading entitled "An important heading. Step 15. Text and Images. Now from the section Flowing text around images, use the code for having text flow to the left of a graphic, and modify the image tag code for the second runews.gif graphic (the one with the alt tag) in your htmllab file in order to have text to the "left"; Use the text "This text will be flowed around the left side of the graphic" as in the example. Step 16. Image Maps. Paste the "image map" example below (similar to that from the tutorial section Clickable regions within images), as is, into your htmllab file. Notice how the image geometry is entered, first by shape, then by coordinates. Now save and check results by clicking on the various regions to see where it takes you.
<p align="center"> <img src="pages.gif" width="384" height="245" alt="site map" usemap="#sitemap" border="0"> <map name="sitemap"> <area shape="circle" coords="186,44,45" href=" http://www.w3.org/MarkUp/Guide/Overview.html" alt="Getting Started"> <area shape="circle" coords="42,171,45" href=" http://www.w3.org/MarkUp/Guide/Style.html" alt="A Touch of Style"> <area shape="circle" coords="186,171,45" alt="Web Page Design"> <area shape="circle" coords="318,173,45" href=" http://www.w3.org/MarkUp/Guide/Advanced.html" alt="Advanced HTML"> </map> </p>

Step 17. Tables. Just above the section entitled Making your tables accessible, Paste the table example that uses the bgcolor attribute (coloring tables without style sheets) into your htmllab file. Change the two colors used as the background colors to Teal (Hex is #008080) and Aqua (#00FFFF). For the TABLE structure, notice the use of the TABLE attributes, followed by row TR, header TH, and cell TD information. Step 18. Tables Again. Now, following the tutorials instructions on tables, add a second table like the one just added and modify this borderless table to add border of size 1 and to be 80% width of the web page.

Step 19. Image Roll-Overs. Paste the "rollover" example script from the section Roll-overs and other tricks (SCRIPT tags and everything in between) into your htmllab file into the HEAD section, after the title tags, and before the body start tags. The actual link reference (A tag with HREF portion) to the rollovers and placement of the images should be inserted at the very bottom of your htmllab file, within the BODY tag. Notice the use of the chgImg function and the declaration of the events "onMouseOver" and "onMouseOut". Mouseover the image to see the roll-over effect. Step 20. Lab Completion and Checkoff. Get your instructor to check off your lab completion by viewing your final HTML page which should display the end result of all lab steps.

EXTRA CREDIT. Follow Daves Adding a touch of style tutorial and then create a style sheet with the following properties and insert into your htmllab file using STYLE tags placed after the TITLE tags, before the SCRIPT tags, and within the HEAD tags: Body text color maroon, background white Body margins, left and right 10% H1 header margin left -8% H2 header margin left -4% em (emphasis) in bold Body font family Verdana, sans-serif H1 header font family Garamond, Times New Roman, serif Yellow background under the image map Border around the image map (hint: use nested tags).

You might also like