WIXLIB

Pdf - print version - Click hereLab Exercise 8 Web PagesUsing HTML to Create a Simple Web PagePurpose: to learn the basics of making webpages by creating a simple webpage with HTML (HyperText MarkupLanguage)Before you begin Lab8, read thoroughly the Information Page for Labs 8 & 9. You will not use your lab book for these lasttwo labs.Introduction to HTML:Hypertext Markup Language or HTML is used to create webpages. It describes the structure and the content of thewebpage. Pieces of content in a webpage document are set off using Markup Tags. Early on, there were widevariations of tags used by differing browsers. Now the W3C – World Wide Web Consortium has established standardsfollowed by most software companies that produce browsers. Although some browsers allow deviations from thestandards, by using the standards your webpage should display well in all browsers.A webpage document starts with the ‘root’ tag HTML, followed by a heading and then a body, both nested inside of theHTML tag. The name of the tag is contained inside angle brackets, with the closing tag differentiated from the openingtag by having an additional forward slash. The basic outline of a webpage document looks like the following: HTML HEAD some content, including a title /HEAD BODY additional content /BODY /HTML More tags can be nested inside of the head or body to create paragraphs or blocks of content and add styles such asunderlining, italics, etc. Nesting of tags inside of other tags allows complex webpages to be built. Some opening tagsinclude additional attributes. The syntax for that style of tag would look like this: tag name attribute1 ”value1”,attribute2 “value2” . An example for a paragraph tag with one attribute might look like this. P align "right" content material /P Another style of tag, called a one-sided tag (also called empty elements because they contain no content materials) hasonly an opening tag without an ending tag. The proper syntax for a one-sided tag is name / . Examples of that styleare a line break BR / or the tag for inserting a horizontal line HR / .A third type of tag is a comment tag. A comment is used to add notes to your HTML code, but does not show on yourwebpage. The syntax for a comment looks like this: !-- comments -- .You will use all of the above tag styles in your webpage. Finally, HTML tags are not case sensitive. You may use eitherupper or lower case letters in the tags.Step 1. Starting Lab8: In this lab you will create a web page similar to the one illustrated below. The choice oftitle, text, graphics, and hypertext links is yours, but your page must have at least the following elements in order to satisfy theassignment:An opening HTML Comment that documents your name, the date, and the lab numberTitle (which shows in the blue bar in your browser at the very top of the screen)Headings of 3 different levels (there are 6 altogether)Some text about the topic of the page.Some text in Bold and some in Italic.At least one Graphic. In this sample a graphic called “Snowman.GIF” is referenced. You need to find your owngraphic. (some suggested sites for locating graphics are provided).Active Hypertext links to at least two other sites on the Web that work when clicked on.1

Your name as the webpage author, and a “last modified” date.The mechanics of carrying out the assignment. You may work “on-line”- connected to the Internet, for thisassignment, but it is not necessary except for the work involved in downloading a graphic image. To work “off-line” seethe notes on the Lab8-9 Intro page. DO NOT USE any other application (such as your word processor) to generate aweb page. This also means DO NOT edit and save your webpage within your Browser application.Step 2. Activate the Browser: Open your web browser (FireFox, Internet Explorer, etc.) by clicking the appropriatedesktop shortcut or by clicking Start/Programs and then finding the proper browser reference.Step 3. Activate the text editor: Open Notepad (Click Start/Programs/Accessories/Notepad). From the file menuclick Save As and name your file lab8.htm - be sure to change the option for selected file types from "Text" to "All Files *.*" or Notepad may change the name of your file to lab8.htm.txt. (Web pages can also have the extension .html )Step 4. Working between the editor and the browser:a. Now, immediately switch over to your Internet browser (using the Taskbar), and click on the File menu.Under File there can be a slight difference depending on the version of the Browser you are using. In some youwill click on 'Open' and in others, 'Open File'. Then another window will open that allows you to either Browsefor the file or type in it's name.b. Using the 'Browse for file' option, navigate to the location of your file lab8.htm, and Open it. Right now thepage is empty, but you will be ready to bring up your page’s contents as you create them.c. On the task bar, switch back to Notepad. You will be typing in the text and HTML tags that produced thesample page as shown below. Start by typing in the first tag html at the top of your NotePad file, then createseveral empty lines with the ENTER key, and end the page with the /html tag. Save your Notepad file. Mosteverything else will go between those tags. Inside those tags there is a section for headings followed by a sectionfor the body of the webpage. The headings start with the head and end with the /head tags. The main bodyof the page goes between the body and /body tags.d. Next, right after the html tag, type in the heading section as show below, from head through /head .Save your lab8.htm in Notepad, then switch over to your browser (using the Taskbar). In the browser click onthe Reload or Refresh button and the beginning of your webpage will appear.e. Using the task bar, now return to Notepad and you will create a comment. HTML comments begin with the !-- tag and end with the -- . Comments will not appear on your webpage under the browser, but only when youview it with a text editor. The purpose is to record internally, information about the webpage. On the topmost lineenter the comment as it appears in the Sample Page. Now start entering the rest of the sample webpage. Tomonitor your progress, periodically Save your file in Notepad, then switch over and Reload or Refresh. Youhave to save the file in Notepad and reload in your browser every time you want to see a change. DO NOT USETHE SAVE FILE UNDER YOUR BROWSER.f. When you finish, Save your file in Notepad, then switch over to your browser and click Reload or Refresh.With the exception of the graphic, the page should look like the sample below.Step 5. Changing your web page:a. Return to your file in Notepad. Go to the topmost comment line (it starts with the !-- ) and substitute yourname, Lab#, and date for the text between the beginning '--' and the ending '--'.b. Now substitute a new title for your webpage between the title and the /title tags.c. Next you will substitute the name of another graphic file for the "MVONGRQA.GIF" file. Remember thatyour image file must be in the same directory as your lab8.htm file and you must use it's full name, includingextension. If you don't already have a graphic file that you'd like to use, review the Lab8-9 Information Page onfinding a graphic image from the Internet. It may take several tries before you get one that you like and is sizedappropriately.d. Now replace the three levels of heading text with your own text which talks about the contents of your page.Also replace the different styles of text with your own words. Remember to Save your file in Notepad and switchover to your browser and refresh the webpage to review what you've changed.e. Create some links on your page to other websites that you like to visit by subtituting their web addresses2

(URL's) for those sites in the a href tags of the original page. Change the text describing those links so that itaccurately represents the websites you've chosen. DO NOT hit the Enter key in the middle of an a href tag.Always type out to the end of the tag and then press enter.f. Review your page. Now it's time to have fun. Decide if there are things you'd like to rearrange or additionsthat you'd like to make. Switch back to Notepad, make and save your changes. Review your final page in thebrowser to make sure it's what you want and includes all items listed in Step 1.g. If you are using Internet Explorer as your browser, you'll need to test your webpage under at least one otherbrowser such as FireFox, Opera, Safari, or Chrome to make sure your page works correctly. (see Labs8-9Information Page)Step 6. Turning in your web page: Email your web page file and its accompanying graphic files as attachments toyour instructor. (See Turning in Assignments)SAMPLE WEB PAGEThe HTML code which produces the Sample PageUse this sample as the basis for making a simple page of your own. See below for the line-by-line meaning of the HTML tags.3

The Meaning of the Codes from the above example page html --start of the page !--text-- --comment, not displayed on screen. head -- starts the header section of the page title The Title of Your Page Goes Here /title -- sets up title which goes on top bar of the browser /head --end of header body --start of the main text area center --center everything until the end-center code, \center . img src "Pumpkin2.JPG" / --reference to a graphic image !--References to graphic images (.jpg or .gif) assume the file is in the same directory as the web page file unless a differentdrive/directory path is specified. Your web page is saved in a folder on your USB stick or on your hard drive so all graphicsshould be on the same drive and folder as well-- h1 This is a Level 1 Heading /h1 -- there are 6 sizes of headers !--headings created with these tags have a built-in paragraph mark above and below the header-- h3 This is a Level 3 heading /h3 h5 This is a Level 5 heading /h5 /center --end of centering p --start new paragraph with blank line before itThis is plain text br / -- br / is like carriage-return - starts a new line b This is bold text /b br / i This is italic text /i br / big This text is big /big and br / 4

hr / --draws a line across the screen ("horizontal rule") h3 Links to other sites /h3 p !-- Don’t press ENTER in the middle of typing an href line. Type out to the end of the tag, then press enter, even if thetyping goes beyond the visible right margin-- a href "http://www.freegraphics.com/" A series of Graphics collections /a br --reference to a linked URL, followed by the text that will appear on-screen. The actual start tag is a href and the endtag is /a a href "http://www.ausmall.com.au/freegraf/freegrfa.htm" Another Graphics Collection /a br / a href "http://www.mcli.dist.maricopa.edu/tut/index.html" i A Tutorial on Writing HTML /i /a !--notice the i and /i tags inside the a and /a tags.-- p Page created by i your name /i br / Last Modified: i today's date /i /body -end of main text area /html -end of whole page5

Start by typing in the first tag html at the top of your NotePad file, then create several empty lines with the ENTER key, and end the page with the /html tag. Saveyour Notepad file. Most everything else will go between those tags. Inside those tags there is a section for headings followed by a section for the body of the webpage.