How to Create a Web Page Using HyperText Markup Language (HTML)
advertisement
CA 101, Lab 4, page 1 of 6 CA 101, Introduction to Microcomputers Lab #4 How to Create a Web Page Using HyperText Markup Language (HTML) Introduction HyperText Markup Language (HTML) is a language used for describing the contents of a web page. An HTML document consists of plain text augmented by tags. The HTML code is stored in a text file with file extension “html” or “htm”. For example, index.html is a file that contains HTML code. An HTML file is processed by a web browser (such as Microsoft Internet Explorer or Netscape Navigator) and displayed to the user as a multimedia document. HTML is easy to learn and simple to use. This lab introduces HTML by stepping through the creation of a simple web page. You can use this lab as the starting point for your own personal web page! Setup 1. First of all, you must create a folder in which to store all the documents of your website. For example, create a folder called “Lab4” in your “My Documents” folder. 2. Start the Notepad program by clicking on the Start button, which is located in the lower lefthand corner of your screen, then select All Programs, then Accessories, then Notepad. A new window should appear with the words “Untitled – Notepad” appearing in the title bar. The word “Untitled” means that you have opened a new file and have not yet given it a name. The word “Notepad” is the name of the application program you are now using. 3. You will type the HTML code for your web page in the Notepad window. To save what you have typed, click on the word File in the menu bar of the Notepad window, then select Save-As. Select “All Files” in the Save as Type field, then type “index.htm” (without the quotes) in the File name field. The Notepad program needs to know where to store your file. The Save in field lets you choose where you want the file to be stored. Make sure the Save in field says “Lab4” (or whatever folder you created in step #1 above). If not, click the down arrow located just to the right of the Save in field, then select your folder from the list. Now click the Save button. Notice that the title of the Notepad window has changed to “index.htm – Notepad” to reflect the name you gave the file. CA 101, Lab 4, page 2 of 6 HTML Tags As mentioned above, HTML code consists of plain text modified by tags. A tag looks like a word (the name of the tag) surrounded by angle brackets, e.g. <HTML> or <BODY>. There are two types of tags: container tags and empty tags. Container tags come in pairs of beginning and ending tags. The names of the beginning and ending tags must match, and the name of the ending tag is prefixed by a slash (“/”). For example, <HTML> is the tag that begins an HTML document, and </HTML> is its corresponding ending tag. Empty tags, unlike container tags, appear alone; they have no ending tags. One example of an empty tag is <BR>, the line break tag. 4. Every HTML document must start with the <HTML> tag and end with the </HTML> tag. So type these two tags, one after the other, into your index.htm file. If you like, you can insert a blank line (or two, or ten) between them. One thing to know about HTML is that all contiguous whitespace (space, tab, newline, etc.) is treated as a single blank space. So ten blank lines is just as good as a single space. The whitespace in an HTML file is only cosmetic; it doesn’t affect how the web page looks. The use of tags determines how the web page looks. Below is a very short example of what HTML code looks like. Type the following HTML code into your index.htm document: <html> <head> <title>Global Positioning System</title> </head> <body>GPS stands for Global Positioning System. </body> </html> Every HTML document contains header information and a body. The header information, including the title of the document, goes in between the <HEAD>,</HEAD> tag pair. The title of the web page is part of the header. Above, the title is “Global Positioning System”. The title is shown in the title bar of the web browser when the web page is displayed. The <BODY>, </BODY> tag pair contains the main part of the web page. Most of the HTML code will be found in the body. Notice that the head and body tags are nested inside the html tag. 5. Don’t forget to save what you typed in part #4, above. Open the folder where you saved your index.htm file and double-click its icon. You should now see the web page displayed in a web browser. Keep the browser window open. Whenever you make changes to the HTML code in the index.htm file, remember to reload the newest version of the code from the browser by clicking the Refresh button on the toolbar. (The Refresh button looks like two green arrows arranged in a circle). CA 101, Lab 4, page 3 of 6 6. At this point you should change the title and body of the web page to something of your choice. Add some text to the body of your web page. You can make text of your web page bold, italic, and/or underlined by using <B>, <I>, and/or <U> container tags. Try it. As you browse the web, you may see something on a web page that you’d like to use in your own page. Select View, Source from the menu of Microsoft Internet Explorer to look at the code behind the web page that is currently being displayed in the browser window. Lists You can include lists in an html document using the list container tags. Use <OL> for ordered lists and <UL> for unordered lists. Ordered lists display a numbered list of items. Unordered lists are simple bulleted lists. Each item in the list should come after the <LI> tag empty tag. For example, here is an unordered list of the parts of an information system in HTML code: <UL> <LI>People <LI>Procedures <LI>Hardware <LI>Software <LI>Data </UL> 7. Add a list of items to your web page. Adding Images Images can be placed in a web page using the image tag as in the following example: <img src=”x.jpg”> The name of the image tag is “img”. One property of the image tag is “src”, which tells the browser the name and location (in double quotes) of the image to load. The location is relative to the location of the web page. For example, the x.jpg file above should be located in the same folder as the index.htm file (the file that contains the HTML code for the web page). If the image is not in the same folder, you can specify a full or relative pathname along with the file name in the src field. Note that the image tag is an empty tag, so it doesn’t have a matching end tag. 8. Copy an image file into your web folder, then insert the image into your web page. CA 101, Lab 4, page 4 of 6 Hyperlinks A hyperlink connects your web page to other web pages in the World Wide Web. Someone viewing your web page simply clicks on a hyperlink in your page to go to another page. Hyperlinks are created using the <A> container tag. Whatever appears between the <A> and the </A> is clickable. The href property determines where the link connects. The example below shows a hyperlink to the apple.htm page. The user can click anywhere in the text “Go to the Apple page” to jump to the apple.htm page. <A href=”apple.htm”>Go to the Apple page</A> 9. Create a hyperlink from your web page index.htm to another web page in your web folder. You will need to create the other web page also. You can make the second web page very simple, but make sure to include a link on the second web page to go back to the index.htm page. Tables The <table> container tag is used to display a table in a web page. A table is made up of rows and columns. The <tr> container tag is used for each row in the table. The <td> container tag is used for each data item in a row. So, a sequence of <td> tags may appear nested inside each row. Likewise, a sequence of <tr> tags may appear nested inside the <table>, </table> tag pair. <table border=”1”> <tr> <td>Name</td> <td>Major</td> <td>Phone</td> </tr> <tr> <td>Ahmed</td> <td>Microcomputer Applications</td> <td>0501112222</td> </tr> <tr> <td>Badr</td> <td>Accounting</td> <td>0503334444</td> </tr> </table> Table attributes include border (0, 1, 2, etc.), align, width and height (in number of pixels), and bgcolor. 10. Create a table in your web page. You could create a calendar, or a table of thumbnail images, or anything else you like. Your table should have at least three rows and four columns. CA 101, Lab 4, page 5 of 6 Background Color You can set the background color using the bgcolor property of the <body> tag. For example, to set the background to red, add bgcolor=“red” to the <body> tag like this: <body bgcolor=”red”> Instead of specifying the name of the color (e.g. “red”), you can specify the color in RGB (RedGreen-Blue) as a 6-digit hexadecimal number, where the first two digits specify the red component, the second pair of digits specify the green component, and the last two digits specify the blue component. For example, FF0000 is red, 00FF00 is green, 0000FF is blue, 000000 is black, etc. To set the background blue, use the following body tag: <body bgcolor=”0000FF”> 11. Set the background of your web page to any color you like (except the default). CA 101, Lab 4, page 6 of 6 Sample tags The sample HTML file shown below contains many of the features discussed in this lab. Compare the HTML code (on the left side of the page) to the web page as it is displayed in the browser window (on the right side). Try to correlate the code with the displayed page. <HTML> <HEAD> <TITLE>This is the title</TITLE> </HEAD> <BODY bgcolor="00FF99"> <!--This is a comment. The web browser ignores it. Comments are used to keep notes for the web author. --> This is the body. Here is a small dictionary of HTML tags. <br> <B>Bold</B> <br> <I>Italic</I> <br> <U>Underline</U> <br> <I><B>Both bold and italic</B></I> <br> <center>This text is centered.</center> <div align="right">This text is right justified.</div> <div align="left">This text is left justified.</div> <div align="center">This text is also centered.</div> <h1>Information System</h1> <ul> <li>People <li>Procedures <li>Hardware <li>Software <li>Data </ul> <img src="JETS.jpg"><br> <img src="JETS.jpg" width=100 height=100> <h1>header1</h1> <h2>header2</h2> <h3>header3</h3> <h4>header4</h4> <h5>header5</h5> <h6>header6</h6> <center>FONTS</center><br> <font face="arial" size="10">Arial</font><br> <font face="times new roman" size="12">Times New Roman</font><br> <font face="Courier" size="8">Courier</font><br> </BODY> </HTML>
