In this lab, you will go over the basics of how to create a simple web page by hand (as opposed to using a web authoring program).
You will not publish the web page you create to the web, but will view it on your computer using a web browser.
<html> <head> <title>Hello World Page</title> </head> <body> <p> Hello World! </p> <p> This is my first web page. </p> </body> </html>Click File -> Save as, give it the name hello.html, and save it to the desktop.
The following section explains what this all means.
HTML stands for Hyper Text Markup Language. The page you just created in was written in HTML and is a web page. All HTML documents are saved with the extension .htm or .html. For this lab, we will use .html.
HTML uses markup tags (HTML tags) to describe web pages. These tags are given names that define their purposes. Look at your code. All "words" within "< >" are tags. Notice that most tags come in pairs (<tag> </tag>), called the start tag and end tag respectively. Let's go over all the tags used in the code:
| <html> </html> | The text between these tags describes the web page. |
| <head> </head> | The text between these tags describes the head element of the web page. To give a very superficial definition, the head element of a web page is not displayed by the browser; it just contains information about the page, such as the page title. |
| <title> </title> | The text between these tags indicates the page title. When a browser displays this page, the title is shown in the above the menu bar. |
| <body> </body> | The text between these tags describes the visible content of the web page. |
| <p> </p> | The text between these tags are HTML paragraphs |
Some other basic tags:
| <h1> </h1> | The text between these tags are HTML headings. (You can use h1, h2, h3, h4, h5, and h6) |
| <b> </b> | The text between these tags is bold-faced |
| <i> </i> | The text between these tags is italicized |
| <u> </u> | The text between these tags is underlined |
| <big> </big> | The text between these tags is made larger |
| <small> </small> | The text between these tags is made smaller |
| <hr/> | This tag creates a horizontal line. Notice it has no end tag. |
Whenever you "add an image" to your website, you are not literally placing an image onto the page. Instead, you are telling your browser where to find an image (an address) and the browser displays that image onto your page. The image can either be on the same computer as your web page or it can be posted anywhere else on the Internet. We will show how to do the latter; i.e. how to display an image from somewhere else on your web page.
The tag for inserting an image into a web page is img. It has a so-called attribute that simply indicates where the image is located:
<img src="http://some_domain/some_picture.jpg"/>
Notice the img tag, like a few others we have seen, has a start tag but no end tag.
To display an image already on the Internet in your web page, right click on the image and select "Properties". On that menu, the address or URL should be displayed. Copy-and-paste the entire URL and add it as the src attribute in an image tag as shown above.
To add a hyperlink to another web page, you use the a tag (not very well named), along with the href attribute:
<a href="http://some_domain/some_page.html">This is a hyperlink</a>
To change the color of some text, you use the font tag, along with the color attribute:
<font color="red">Some red text</font>
Most common colors (red, blue, black, green, etc.) can be specified.
Using Notepad++, create a file called lab9.html and do the following:
Using the tags described above, create a web page. It can be about yourself, your pet, your favorite movie, favorite band, whatever...
The page should have at least 2 headings, 2 paragraphs, 2 images, 2 hyperlinks to other pages, and a horizontal line. There should be some text that is bold-faced, italicized, underlined, bigger, smaller, and is a color other than black. (In other words, you should use all the tags described above.)
Note that you do not have to try to create the entire page in Notepad++ all at once before viewing it in a browser. At any time, you can save lab9.html to the desktop, then either double-click on it to open it in a browser or, if the page is already being displayed in the browser, click the refresh button. It is recommended you build your page in steps. Add a little, then save it and see how it looks in a browser, then add a little more, save it, see how it looks, etc. This way, if you make a mistake, you can more quickly find out where it is.
Once you have completed the web page, show it (lab9.html) to your TA. He or she will verify that you have used all the tags in the page. Also be prepared to show hello.html.