CS 8 Spring 2012 - Lab 10 (Extra Credit)

Note that this lab is extra credit, so if you have completed all your other labs and do not wish to do it, you do not have to attend lab this week. However, since all lab scores must be entered by the end of the week (June 8), it is highly recommended you double-check all your scores and, if you see any mistakes, go to lab this week so you can discuss the scores with your TA.

Purpose

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.

Getting Started - Hello Word

Click on the Windows start button -> all programs ->Notepad++.
From the menu in Notepad++ click language -> HTML.
Copy the following directly into Notepad++: 
<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.
Double click on hello.html on the desktop to see the local version of your first web page in a web browser.

The following section explains what this all means.

HTML

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 Tags

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.

Adding an Image

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.

Linking to Another Web Page

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>

Try it Yourself

Using Notepad++, create a file called lab10.html and do the following:

Using the tags described above, create a web page about yourself. You can include whatever information you like, such as the classes you are taking, 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, and smaller 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 lab10.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 (lab10.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.

This lab is worth 10 points (not 20 points like the normal labs).