CIS 2308 – Lab 2

Kyvernitis

Add some images, arranging them inside a table.

Create a form that emails to the web master.

A.Find Some Images

For your website, you have a user table (subject), an associative table (verb) and an object table. For the “object table”, find 4 images that represent them (e.g., products if your site is selling something, topics to rate if you are doing a ratings site). If you don’t know where else to look for images, go to google.com, click on images and start searching. You can click on “medium” size pictures (so you are not looking at huge or tiny images), you can also click on “show sizes” so you can see how many pixels each picture is. For this assignment, select only jpg files.

Once you find an image you like, click on it (to see the larger version), then right click on that. Select “save image as” (from firefox) and browse to your web root folder (probably on your flash drive). Create a folder (you can call it “pics”) and save the file in there. Do that about 4-5 more times (get a few more pictures than you actually need to give you more options when you are working on your homework).

B.Resize the Images (pictures of featured sale items)

You’ll have to edit the images – to make them all the same width (my images were 175 pixels wide). You can edit the images by downloading, installing, and using free software called irfanview (unless you prefer to use some other software). See this link for tutorial and how to download and use the software. You just open an image file, click on Image – Resize/Resample, make the image smaller. This tutorial also tells how you can crop an image.

C.Organize the Images using a Table

This is how you can use a HTML table to organize the pictures of the products along with their prices (or other descriptive info):

<html>
<head>
<style>
.sale-pic {
border: thick inset #E9A00C;
background-color: #F9F3B0;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
font-weight: bold;
color: #900;
line-height: 14px;
}
</style>
</head>
<body>
<table
<tr>
<td class="sale-pic" <img src="pics/tile04c.jpg" /> <br/>
Sale Price: $4,000</td>
</tr>
<tr>
<td class="sale-pic" <img src="pics/tile03.jpg" /> <br/>
Sale Price: $4,500</td>
</tr>
<tr>
<td class="sale-pic" <img src="pics/tile02.JPG" /> <br/>
Sale Price: $3,000</td>
</tr>
</table>
</body> /

After you get a plain page with the table of your images (as shown above), put your table inside the content of one of your tabs (label the tab whatever is appropriate to the table you found pictures for). Then, try to have some text next to the images, like this.

Hint: Inside your content div, you’ll have a table (acts like a div, must apply a class with float left to that table, can have some margin around the outside of the table), then a div where you put your text.

D.Learn about HTML Input tags and the Form tag

Read this link to learn what a HTML form is:

Study all the code examples in the zip file attached to the Blackboard document (you can start by opening up index.html – this file points to all the other pages). All of these examples deal with getting user input and how you can submit this input back to a web server.
Here are more links from W3schools – that show you examples for many of the input tags that are commonly used within a HTML web page. To visit the links from MSWord, hold down the control key, then click on the link.
Create text fields
Create password field
Checkboxes
Radio buttons
Simple drop-down list
Drop-down list with a pre-selected value / Textarea (a multi-line text input field)
Create a button
Form with text fields and a submit button
Form with checkboxes and a submit button
Form with radiobuttons and a submit button
Send e-mail from a form
Examples explained

The above information was taken from

E.Create a web page that emails the web master

  • Create a HTML page named email_form.html. This page should contain a form that has at least one of each of the following HTML input elements inside: Text field, text area, set of radio buttons, a checkbox, drop down list, submit button. Your form’s action should email the users’ input to yourself (your temple email) – your official title is now “web master”. Your email form should “make sense” within the context of your proposed web application.
  • The rightmost “tab” in your navigation bar should be named “contact us” and link to this new page (email_form.html).

F.Submit your homework

  • The content of your index page should be addressed to a potential user of your web site. That page should summarize all the functionality that your site has to offer (refer back to the original web proposal to remind yourself about what your site will provide).
  • If you want to change the layout of your web pages (the rounded corner exercise from last lab), you can do so, but this is not required. If you do decide to change your layout, your final layout must have all the major elements from last lab (title, navigation bar, content area, footer).

After you have completed the homework and tested everything carefully,

  • Attach a zip file of your web root folder into blackboard.
  • Post your web site to your astro account (see instructions attached to blackboard).

1