Lab 2: HTML Essentials

You will create HTML pages, which use many of the most common tags, in order to become familiar with (or review) the different kinds of items that can be incorporated into a typical web page, and practice controlling how items appear on the page.

Do each of the following parts in order, creating a separate HTML file for each part (such as part1.html, part2.html, etc.) If working on Windows, edit your document with Notepad++, and remember to save it as a file with the .html extension.

Use http://jsbin.com/ to test your code, and check whether it has any errors. You may copy and paste portions of the code from your Notepad++ editor to the jsbin test page.

Resources

You may refer to online resources to help understand how each tag is defined, such as the following information sources:

Part 1

First HTML Page

Create a web page that looks like the one below.

im1.gif

Part 2

Text Alignment and Formatting

The goal of this exercise is to get you using many of the tags to control layout of text. I am not so concerned that your page has spacing 100% identical to the one below, but it should be pretty close.

Create an HTML page that looks similar to the one that follows.

Part 2 Output

Be sure to include the following features:

  • Use <center> tag to control text that must be centered
  • Use bold, italic, underline tags
  • Use font tag and associated attributes
  • Use heading tags
  • Use preserve tag<pre>
  • Use non breaking spaces (escape character)

Part 3

Lists: Create a page that looks like the one depicted below.

im5.gif

Be sure to include the following features:

  • Create an unordered list
  • Create an ordered list
  • Use various bullet styles
  • Created nested lists
  • Use the font tag in conjunction with lists
  • Create definition lists

Part 4

Tables 1: Create a table like the one below.

im6.gif

Be sure to include the following features:

  • HTML tables
  • Create a simple table
  • Create borders and adjust border size
  • Adjust table cellspacing
  • Change border color

Part 5

Tables 2: Create a table like the one below.

im7.gif

Be sure to include the following features:

  • Align tables on HTML page
  • Perform cell text alignment (to get desired horizontal alignment)
  • Create a multi-column table

Parts 6 - 7 (added Wednesday)

Part 6

Hyperlinks

Create a page that has a bulleted list with 3 hyperlinks:

To use the image as a link, download it to the same folder with your HTML file for part 6 (right click and save link), and then use an IMG tag in your HTML file.

Part 7

Forms: Create a form with the elements shown in the example below.

im9.gif

  • Use a <form> tag to include the form input items in your HTML document.
  • Use <input> tags to create: text box, check boxes, radio buttons, and submit and reset buttons.
  • Use <select> tag to create a drop-down list menu with at least 3 different occupations.
  • You are not expected to add actions to process the form input (that would require JavaScript ), but just create a form that displays all of these elements.
Submission: When you have completed all 7 parts, go to the Moodle page for Lab 2 Submission, and attach all 7 HTML files and the image file to your submission. You may either select all of the items and drag them from your folder to the Moodle submission box, or you may create a zip file with all of your files, and then attach the zip file.

-- RobertKasper - 2015-02-09

Topic attachments
I Attachment Action Size Date Who Comment
Jpgjpg Multimedia-HTML-part2.jpg manage 46.3 K 2015-02-09 - 18:55 RobertKasper  
Jpgjpg OhioLinkLogo.jpg manage 17.2 K 2015-02-11 - 19:28 RobertKasper  
Topic revision: r2 - 2015-02-11 - RobertKasper
 
This site is powered by the TWiki collaboration platformCopyright &© by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback