LAB 1

I can't talk today, so we will be doing a largely "quiet" lab.

HTML

You may use online resorces to help in your work, such as the following information sources:

Also - use http://jsbin.com/ to test you solutions. Then copy, and paste them to an editor and save them.

Do each of the following. Place the result of each on the web (as we learned last week), and turn in a link to your work on Moodle.

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 all of the tags you have been shown so far.

I am not so concerned that your page look 100% identical to the one below, but it

should be pretty close.

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


im2.gif

Be sure to include the following features:

  • Use alignment attribute
  • Use bold, italic, underline tags
  • Use font tag and associated attributes
  • Use heading tags
  • Use preserve tag
  • Use non breaking spaces (escape character)

Part 3

Hyperlinks

Create a page that supports the following hyperlinks depicted

 Link to the document list_graphic_bullets.htm

 Create link to Amazon.com

 Link to a place in your document (use the book1.gif )*

book1.gif

Create another HTML file, called "list_graphic_bullets.htm", and make it "look" like the second screen. Link to this new page, to demonstrate that you can go to a page that you create. This will not work in jsbin, you will actually have to put both files on the class web server.


im3.gif im4.gif

Note: The third bullet…I have asked you to hyperlink using a graphic as the link. I have not provided you an example of this. You will need to accomplish

this with a little bit of research.

Be sure to include the following features:

  • Hyperlink within an HTML document
  • Hyperlink to another URL
  • Hyperlink to a file that can be rendered in the browser

Part 4

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
  • Use graphics as bullets

Part 5

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
  • Change table background color

Part 6

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
  • Create multi-column tables

Part 7

Tables 3

Create a table like the one below.

im8.gif

Be sure to include the following features:

  • Use tables to create menus
  • Use tables as a means of formatting HTML content

Part 8

Frames - removed from assignment, for extra credit only

Part 9

Forms

Create a form like the one below.

Be sure to include the following features:

im9.gif

  • Create a simple HTML form
  • Use the input tag to create a: text box; textarea box; check box; list box;
  • radio button; password field; popup menu; hidden field.
  • Use the submit and reset buttons

  • MVNU_TAG-CMYK.JPG:
Topic attachments
I Attachment Action Size Date Who Comment
Pngpng FramesEx.png manage 170.8 K 2013-01-31 - 03:52 JimSkon  
JPGJPG MVNU_TAG-CMYK.JPG manage 923.2 K 2013-01-31 - 03:53 JimSkon  
Gifgif book1.gif manage 27.0 K 2013-01-30 - 04:38 JimSkon  
Gifgif im1.gif manage 12.7 K 2013-01-30 - 04:27 JimSkon Page 1
Gifgif im2.gif manage 28.8 K 2013-01-30 - 04:30 JimSkon  
Gifgif im3.gif manage 8.9 K 2013-01-30 - 04:42 JimSkon  
Gifgif im4.gif manage 8.2 K 2013-01-30 - 04:43 JimSkon  
Gifgif im5.gif manage 16.1 K 2013-01-30 - 04:49 JimSkon  
Gifgif im6.gif manage 1.4 K 2013-01-30 - 05:02 JimSkon  
Gifgif im7.gif manage 4.2 K 2013-01-30 - 05:03 JimSkon  
Gifgif im8.gif manage 4.7 K 2013-01-30 - 05:03 JimSkon  
Gifgif im9.gif manage 4.0 K 2013-01-30 - 05:03 JimSkon  
Topic revision: r5 - 2013-02-07 - JimSkon
 
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