ࡱ > w y v !` 0 7- bjbj\\ 3L > > $ @ 8 V D 4 !h ( n n n 6 6 6 6 = :7 4 nO 4 g $ i h k l g n j n n n g h g n X 6 n 6 1 K3 pj0 X 1 6 D g 0 !h 1 \ k f k 0 K3 k K3 l n n n n n n n g g X n n n !h n n n n D CA 101, Introduction to Microcomputers
Lab Week 10
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 left-hand 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.
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. or
. 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, is the tag that begins an HTML document, and is its corresponding ending tag.
Empty tags, unlike container tags, appear alone; they have no ending tags. One example of an empty tag is
, the line break tag.
4. Every HTML document must start with the tag and end with the 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 doesnt 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:
Global Positioning System
GPS stands for Global Positioning System.
Every HTML document contains header information and a body. The header information, including the title of the document, goes in between the , 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 , 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. Dont 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).
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 , , and/or container tags. Try it.
As you browse the web, you may see something on a web page that youd 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 for ordered lists and 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 - tag empty tag. For example, here is an unordered list of the parts of an information system in HTML code:
- People
- Procedures
- Hardware
- Software
- Data
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:
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 doesnt have a matching end tag.
8. Copy an image file into your web folder, then insert the image into your web page.
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 container tag. Whatever appears between the and the 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.
Go to the Apple page
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 container tag is used to display a table in a web page. A table is made up of rows and columns. The container tag is used for each row in the table. The container tag is used for each data item in a row. So, a sequence of | tags may appear nested inside each row. Likewise, a sequence of |
tags may appear nested inside the tag pair.
Name |
Major |
Phone |
Ahmed |
Microcomputer Applications |
0501112222 |
Badr |
Accounting |
0503334444 |
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.
Background Color
You can set the background color using the bgcolor property of the tag. For example, to set the background to red, add bgcolor=red to the tag like this:
Instead of specifying the name of the color (e.g. red), you can specify the color in RGB (Red-Green-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:
11. Set the background of your web page to any color you like (except the default).
Sample tags
The sample HTML file shown in the file HTMLSample.doc 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.
CA 101, Lab 10, page PAGE 6 of NUMPAGES 6
% & ' * + 4 5 T t u v w ! * 1 f {
F
q
v
÷wssok hkfc hfC h&lV