HTML is the language that web pages are written in. It is not a programming language like perl, C, BASIC, or Java. Instead it is a markup language. A markup language consists of tags that are added to a text file to describe the file's contents. A web browser uses these tags to determine how to display the contents of the HTML file. Creating web pages is simply a matter of adding tags to a text file and placing the file in a directory where the web server can deliver it out over the internet.
In this lesson you will examine, modify, and answer questions about some HTML documents. When you see text that looks like this it is a question that you should answer for Assignment 2 (to be turned in by the next class meeting). Follow the instructions in this document and in any linked documents you are directed to along the way. We will work through the examples in class, and anything you do not finish in class will be homework.
Begin by taking a look at this simple HTML document.
Now telnet (or ssh) into your account on the course server. Find the web page you were just looking at on the server and copy it to your public_html directory. Hints:
Now open a new browser window ("File - new window" in IE) and load the file you copied into that window by typing in the URL in the "address" box. Be sure you have opened the copy in your public_html directory. You will need to switch back and forth between this browser window and that one throughout this session.
1. What is the URL of the file you copied to your public_html directory? (The URL from your web directory, not the URL where you copied it from)
Now you will edit the page on the server and observe the changes in the browser window. In your telnet window, use either vi or pico to edit the file. Make the following changes:
Be sure to save the changes you made to the file, then exit the editor.
Next, look again at the browser window in which you displayed that file. Look carefully at the way it is displayed, then click the "reload" button on the browser window. (You may have to hold down the "shift" key while you click reload to get the updated page to load.) When you do, you should see the new version of the file with the changes you made to it. Note the changes, and answer these questions:
2. Where is the text from the "title" element displayed in the browser window?
3. What do the <h1> and <h2> tags do?
4. How is text in within <em> tags displayed?
5. How is text in within <strong> tags displayed?
6. What happened to the word "browser" in the second sentence when it was inside both the <em> and <strong> tags?
Now take a look at simple-html4-file2.html to learn about a few more HTML tags, and to learn how to validate a web page.
7. Was the page valid HTML according to the w3c validator page?
The two files you have looked at so far have document-type definition headers that define them to be HTML version 4. HTML is now deprecated - meaning it is being phased out in favor of a new standard, XHTML. The file simple-html4-file2-as-xhtml.html is identical to the one you just validated, except that its document type has been changed to XHTML 1.0 Strict. All the rest of the examples in this course will use XHTML 1.0 (or will try to anyway). Follow the link to the page, and click the validator button.
8. Does the page validate as XHTML?
The main change from HTML to XHTML is that XHTML follows the rules of XML, the extensible markup language standard. That makes it more compatible with other markup languages that have been or may someday be developed. Most importantly, XHTML forces web authors to keep the format of their documents separate from the content. HTML tags in XHTML are used only to define the content - whether text is part of a paragraph, an ordered list, a heading, etc. The style used to display different types of content is defined separately, in style sheets, usually either in the "head" section of the document, or in a separate file called a cascading style sheet. So, in older versions of HTML there were tags to indicate where elements should be displayed (<center>) and what style of font to use (<b> and <i>). In XHTML all formatting instructions are handled by style definitions, not by markup tags.
If you take a look at the directory where the web pages for this course are stored you will see a cascading style sheet called "psy422-styles.css" that I use for these web pages. If I decide to change the way that I display the questions in the assignments, for example, I only have to change this one style sheet, rather than all the web pages individually. Styles can also be defined in the "head" section to apply to everything in just one document. You can also use inline styles to define a style for a single element in a page.
Take a look at the file simple-xhtml-file1.html in your browser. It should look just like "simple-html4-file2-as-xhtml.html" did in the browser window. The only difference is that I have changed the file to make it valid XHTML. Click the verify icon to confirm that it is valid XHTML.
Now use your telnet window to compare the two files. Hint: Change directories to where the two files are located, and use the "diff" command.
9. What is different between the two files? What does the first difference demonstrate about the difference between HTML and XHTML's requirements for end tags? (See the output of the validation of "simple-html4-file2-as-xhtml.html" if you need a reminder.) What does the second difference tell you about how inline styles are written? How do you think you might put an inline style in a paragraph tag to make the text right-justified?
You can validate any web page by cutting and pasting its URL into the form at the w3c validator page. Just for fun, validate some random web pages. Many of my web pages for other classes were generated with MSWord or Powerpoint. Try one of them as an example of the HTML generated by those applications. (You can find out what application generated a page by looking at the meta tags when you view the page source.)
10. List the URL of at least 3 pages that you validated, and say whether each was valid, and what application was used to generate the page if you can tell. Can you draw any conclusions about the way those applications generate HTML or XHTML?
Now you will learn a second way to create or edit web pages. Instead of editing an html file that is already on the server as you did before, you will download a web page to your local hard drive, edit it using Notepad (or some other text editor if you prefer), and then upload the file to your public_html directory on the server using ftp.
Click on simple-xhtml-file2.html and then follow the directions on that page.
Now ftp the file from your local computer to your public_html directory on sheu-hp. You will have to use your account name rather than "anonymous" to connect in the ftp program, and will have to change directories to your public_html directory before transferring the file. You can either use a Windows-based ftp client such as WSFTP from the Programs Menu, or you can type "ftp sheu-hp.psy.depaul.edu" in the "Run" window as you do for telnet.
Open the file in your browser, and make sure that everything looks the way you expected it to. Follow the links on the page (including the "mailto" link) to be sure they work. Check to make sure the page is still valid XHTML.
In your telnet window, enter the command chmod o-r ~/public_html/mypage1.html. Then hit "Reload" on your browser.
11. What happened? What can you conclude about the file permissions that are needed for your web pages to be accessible to web browsers? What command did you use to fix it so that the page is accessible again?
There are lots of ways to create and edit web pages. We have started you out using text editors to edit the marked up source files directly. This is the best way to learn XHTML, and give you the most control over your web pages.
There are also WYSIWYG (what you see is what you get) HTML editors that hide all the markup tags from you and make it easier to generate web pages. Most web browsers (such as IE and Netscape) and word processors (such as WordPerfect, StarOffice, or Word) can edit HTML this way. I often use "Save as HTML" to quickly get Word and Powerpoint files onto the web, for example. The price I pay is that the HTML they generate is unreadable to humans, and the pages do not display correctly in non-Microsoft browsers.
In addition, there is software specifically designed for web development. Microsoft's Frontpage is one of the best-known. It allows you to edit files directly on a server using a WYSIWYG editor (if the server has the software to support Frontpage).
Many text editors that run on Unix will color-code elements and help show you where your opening and closing tags are, and do other things to make it easier to write HTML or XHTML. The version of vi that comes with the Cygwin Bash Shell for Windows has some nice features along these lines, as does the emacs text editor.
Personally, I prefer systems that combine a text editor to allow you to directly control your page's source file with a previewer that lets you see how things look as you go. Most such products also help you put in HTML tags more easily and help check to see that you have put closing tags in, etc. A commercial product called CoffeCup HTML Editor is one that seems to be popular. (A free version is available with some features disabled.) My favorite, however, is the HTML-Kit from chami.com, which includes a module for the Tidy program to help you validate and clean up your pages as you edit them. I highly recommend both HTML-Kit and Tidy. You can download HTML-Kit from the above link and install it on your Windows PC. (We can not install any software in the public lab without first getting it approved by the University, however.)
Forms are used to collect information from people who visit your web site. The can easily be used to do on-line surveys, for example.
The file forms1.html contains a form that collects information and emails it to me (dallbrit@depaul.edu). It first uses three text boxes in which the user types in answers. Then it uses a drop-down menu (using the <select> tag) for a multiple-choice question. Finally, it uses checkboxes for a second multiple choice question.
Place a copy of the file in your public_html directory and then do the following:
The file forms2.html has the same form input fields as the previous file, but uses a different method of submitting the user's data. The "forms1.html" file used the email client on the user's computer to email the raw form data to the address in the "mailto" field. The "forms2.html" file uses a CGI program called "FormMail.pl" instead, which uses the mail program on the server to send the data by email. Edit the "forms2.html" file so that it sends email to your DePaul email account, and submit the same answers you did in forms1.html. Then compare the mail that the two pages sent you.
16. Describe the differences between the data sent by FormMail.pl and that sent with the "mailto:" tag.
17. What do you think might be some advantages and disadvantages of using "mailto" versus using "FormMail"?
Answer the questions from this page.
Edit your home page on sheu-hp. Create an unordered list naming and describing the web pages you have edited or created today. Make a link to each file from it's name in your list. Include a "mailto" link for people to send you email. Submit your home page to the w3c validator, and fix any problems it notes. Once it checks out as "valid XHTML 1.0" add the "Valid XHTML 1.0" button to the bottom of the page. You can use any method you like to do the editing, and can make any other changes and additions to your home page you like, so long as you end up with a valid XHTML 1.0 document when you are done.
Optional: For extra credit (whatever that might mean in this course!) add a link to a location within the file - also called a "bookmark". There are links to bookmarks a the top of the "Week 1" web page you can examine to help you figure out how. As an added hint, look at how this link to a particular location in last week's web page works.
Hints: