In this lab, you will learn a little bit about HTML (Hyper Text Markup Language) and create your own web page. You should have started reading one of the HTML tutorials below. Later in the lab, you can use Mozilla Firefox (or Konqueror) to view the tutorial to help you "polish" your page while you are working on it.
For just having a quick reference to all the tags, you might try:
If you choose to use Kate or gedit for your editor, they are mostly self-explanatory (just be sure to save your HTML files with a .html extension). If you are using Xemacs, it has one peculiarity when opening directories and files that you should be aware of. When traversing a directory structure (after clicking "Open" or the "File -> Save as" menu item), the directory structure shows in the left pane of the window that opens, and the files in the current directory show in the right pane. To go to a directory or load a file, you must middle-click on it (the middle button on most mice are activated by pressing the wheel). To "save as", just type in the name after you are in the proper directory, and hit enter. Once you have "saved as", you can just click on the save button on the Xemacs tool bar. (You can also turn on syntax highlighting by selecting "Options"->"Syntax Highlighting"if you want.) One more detail about using Xemacs: When you first open it, you will see some text and a tab called *scratch* (this is like "untitled" in other editors). You will need to highlight the 3 or 4 lines that appear and select "Cut". Then just type in what you want and select "File"->"Save as" as instructed above. One really nice feature of Xemacs, is that you can have several documents open in the same window, with tabs to move back and forth (gedit also has a similar feature). You won't need that for this lab, but it will be nice when you work on your first project.
Most tags are similar to this in that you have a beginning tag like <I> and an ending tag like </I>. The ending tag is optional in some cases. (But not in this example! How would the browser know when to turn off the italics!?) An example of a tag whose ending is optional is the paragraph tag <P>. I created the spaces between lines above by inserting a <P> tag between the lines. It doesn't hurt to put an ending tag (such as </P>) on those where they are optional, and in many cases it makes sense to do so. For now, assume ending tags are never optional unless you are told they are. (We will see shortly that some tags don't even have an associated ending tag, but there are very few of these.)
Notice in the examples above, the tags I illustrated were typed in uppercase letters. That is not required by the HTML language, but is considered good style by some, and makes it easier to read the marked-up page. When we view the page in an editor instead of a browser, we see all the tags along with all the text. (In fact you can view these tags in any page that you visit on the Internet by selecting the "View -> Page Source" menu item or by right-clicking on the page.) You should observe the uppercase convention for HTML tags on the page you create for this lab. (It doesn't hurt to continue to observer this convention for pages you create later as well, at least until you feel comfortable with reading and writing HTML.)
<HTML> <HEAD> <TITLE> My Web Page </TITLE> </HEAD> <BODY> Roses are red Violets are blue Replacing this poem Is left up to you </BODY> </HTML>
After you have typed in the above, use your editor's "File -> Save as" menu item and save it to your cs120/Lab5 subdirectory (or wherever you decide to save it) as "lab5.html". (The text file you just saved is called the source file for your HTML web page.) In order for pages to (eventually) be properly rendered by a browser, they must end with the extension .html (or .htm). (Important Note: You should not use spaces in file names on Linux systems. If you want file names with words, separate the words with the underscore character. Go back and read that again.)
Now open a new browser window using the "File -> New Window" menu item in Mozilla Firefox (or the "Location -> New Window" item in Konqueror), so you can still have this page open while you view the page you created. (You can "minimize" the editor window or open it on a different virtual desktop, if you are feeling cramped. I usually use the virtual desktops feature of the "pager". See last lab or ask.) In your new Firefox window, Select "File -> Open File" and click your way to your new page. In this case, you are using an internet browser to look at files in your own home directory instead of on the internet. If you are using Konqueror, just type ~ (that's a tilde) in the "Location:" box, and hit enter. Then find your file.
The first thing you probably notice when viewing your page is that all the lines of your nice poem are all on one line! Why?... Well...browsers have certain rules for displaying pages and one of the rules says to only do what the tags tell you to do. Firefox (as well as other browsers) will wrap lines that are too long for the window, but it won't break up text just because it's on a different line in the source. It may seem odd, but these rules allow for better viewing with different size windows and so on. So let's fix this so that the browser will display this poem as a poem.
Back to the editor. After each of the first three lines of the poem, add the tag <BR> (for "break"). This is one of those special few tags mentioned above that have no associated ending tag. Save the file again and hit the "reload" button on your browser window to view the results. Ahh...better.
Another thing you might be curious about is the title that you typed in. Where is it? The <TITLE> tag is used to display the title of your document in the browser's "title bar". So what if we want a title for our poem to be shown on the web page itself? Let's fix that now. Above the four lines of the poem (but below the <BODY> tag), add the following line:
and then look at the page. You should now be getting an idea of how a web page is put together. As we continue, keep in mind that you are "marking up" the the text that will be displayed, so that it will be displayed just like you want it to be. What about all of those other tags? Except for the tags you added to the original example (and the title text and poem itself), all other tags are required in every HTML document.
Let's do a little more before I turn you loose on your assignment. Many tags in HTML can contain attributes. For example, edit the <BODY> tag as follows:
You can read in your tutorial about how to set other colors and how to specify colors differently as well. Try some more tags. Add the following tags in the first line of your poem:
Wow, your poem can actually take on the "attributes" of it's words! Experiment with some of the following tags to see what they do:
<H2>...</H2>
<H3>...</H3>
<BIG>...</BIG>
<SMALL>...</SMALL>
<STRONG>...</STRONG>
<B>...</B>
<BLINK>...</BLINK>
<PRE>...</PRE>
<BLOCKQUOTE>...</BLOCKQUOTE>
<HR>
In either case, you should have 2 or 3 paragraphs of text in addition to the lyrics or schedules and so on. Use some color somewhere on your page (text or background), and try to organize the page in such a way that a reader (such as your instructor) would find logical and appropriate for the content, as well as interesting. Your name should be included either in the document's title or somewhere obvious in the body of the text. Keep in mind as you write your page, that you may be able to expand upon this document for a future project.
You should save this document somewhere in your "cs120" subdirectory. You should print your HTML document "source" from your text editor (OR using a2ps). If using Xemacs, select "File -> Pretty Print" to print your document. Note: If printing from Xemacs does not output to the printer in the room you are in, under the Options menu item, select Printing, then Set Printer Name for Generic Printer Support, and at the bottom of the Xemacs window, type the name gul208 (or wherever you are), and hit enter. Now choose pretty print again. (If you later are working in a different lab, such as the Library or Lansing 310, you will have to reset this to print to the different printer.) Do not use your browser to print your document. For this lab, I want to see your actual HTML "source" code. Submit your source code printout as your lab report. The printout you submit must match the file in your "cs120" subdirectory exactly. (ie, Don't edit the file after you print it out. If you want to work on it some more later, make a copy of it and edit that instead.) Your printout is due at the beginning of class on Monday, October 3.
When your page is done, you will be probably be ready to present it to the world. We will talk about exactly how to do that on Monday.