HTML Lab

For this lab, you will create two webpages using HTML. The first webpage contains most of the interesting material; the second only serves as a way to illustrate how hyperlinks work. Below, we will refer to the first webpage — the main one you are duplicating from the handout — as the model webpage. Your goal is to re- create the model webpage yourself as closely as possible, with caveats like using your own image.

We will follow the HTML lessons at W3Schools (I suggest opening this link in a separate browser window or tab).

As you create your webpages, check them by using the W3C Markup Validator service (copy and paste your code into the window). You can ignore any warnings, but you should fix any errors that are shown! I will be checking your webpages with this validator.

Getting Started

In a text editor, like Notepad on Windows or TextEdit on Mac, (pretty much any programming language editor will work as well), create a new webpage called first.html.

Begin by reading HTML Introduction, HTML Editors, HTML Basic, HTML Elements, and HTML Attributes. At this point, you should be able to create a basic webpage with some text on it.

HTML Headings

When you are ready, read HTML Headings. Then create the “My First Webpage” and “Created by” headings (change the second one to your name) from the model webpage.

Paragraphs

Read HTML Paragraphs and HTML Formatting. You may skip HTML Styles. Then add the first two paragraphs from the model webpage to your first.html webpage.

Links

Read HTML Links. You may skip Quotations through CSS, though you may want to read them later. Add the third paragraph from the model webpage to your first webpage. You will also need to create the second webpage, which should be called second.html.

Images

Read HTML Images. Then go on the web and find a piece of clip art that you like. FYI, everything on the web is copyrighted by default, so stealing other people’s images without permission is a copyright violation. In general, it is a copyright violation (a.k.a. illegal!) to take someone else’s images from the web and use them on your own webpage. Exceptions are websites that give you explicit permission to do this, or if you obtain permission from the permission who owns the image. For this lab, however, we will fall back on the doctrine of fair use (that’s a real thing!) which gives us some leeway if we are pursuing nonprofit educational purposes (which we certainly are for this class). Furthermore, we’re not publishing this webpage online (everything is going to stay on your own computer).

Once you find an image you like (keep it fairly small), right-click on it and save it to your own computer in the same directory that you saved first.html. Make a note of the filename of the image (you may want to change it to something easy to remember). Add the image to your webpage like in the model webpage. Note that you should use the alt attribute with your image because it is required — this text will be used in place of the image where appropriate, such as with screen readers.

Lists

Read HTML Lists. We will come back to tables next. Re-create the two lists from the model webpage. One should be an ordered list, and one should be unordered. Do not create the bullets and numbering manually; let the HTML tags create them for you.

Tables

Read HTML Tables, then re-create the table from the model handout.

Forms

Read HTML Forms, including Form Elements, Input Types, and Attributes. This is the most important section to learn well, because HTML forms are how we can solicit input from the user, and thus we will use them heavily in our database group projects.

When you are ready, re-create the form you see in the model handout as closely as possible. You should use the <input> element for the name, password, fruit checkboxes, and course radio buttons. Use the <textarea> element for the “courses you’d like to see” part. Use the <select> element for your year in school (first-year, sophomore, junior, senior, and super-senior) and the subjects you’ve taken (math, CS, biology, chemistry, and physics). Make sure that the “subjects taken” part allows multiple selection! Use a <submit> tag for the submission button, but change the text on the button appropriately.

Turning in the lab

When you are done re-creating the model webpage (and the second webpage), upload both of them to Canvas. You should see a submission link, where you can upload first.html and second.html.