HTML & CSS SANDBOX (PART 2: links, tables, forms, and images)

HTML & CSS SANDBOX

PART 2: LINKS, TABLES, FORMS, IMAGES

This is another low stress assignment.

1. Using Notepad++ (PC) or TextWrangler (if you’re on a MAC),* SAVE your new file in your idc folder and name it “02_sandbox.html.” Note the lower case letters! If you are not using your own computer, make sure you store this “local” idc folder on a reliable USB drive.

*Brackets.io is also really cool text editor!

HERE are the three items you MUST have in your idc folder:

NOTE: the 01_sandbox.html is from your last sandbox exercise may be in this folder too, but that’s just fine!
The 02_sandbox.html file is the document you’ll be building your table in.
The 02_sandbox.asp file sends and returns data to the server from the Submit form (see below)

2. a. Put <!DOCTYPE html> on the first line. This tells the browser what language it's reading (in this case, HTML).

b. Put <html> on the next line. This starts the HTML document.

c. Put </html> on the last line. This ends the HTML document.

Add <head> and <title> tags.

<head>

<title>my schedule</title>

</head>

3. Using your knowledge of HTML, create a 7-column table--1 column for each day of the week-- that illustrates your weekly schedule, including your classes and other activities. You will have to determine how many rows you want to fit in depending on your time blocks. The table should have a border value of at least “1.”
IT IS A GOOD IDEA TO SKETCH OUT YOUR SCHEDULE ON A PIECE OF PAPER BEFORE YOU START WORKING WITH HTML.

4. Add <th> headings for every day of the week, and appear at the top of every column

5. Within this table, add 5 links to outside websites that are relevant to either your classes or your other activities. This is to help you practice HTML linking. Refer to p. 79 in your textbook. Here’s another refresher from W3Schools:

<p>

<a href="http://www.w3.org/">W3C</a> This is a link to a website on the World Wide Web.

</p>

6. Make one of your outside website links appear in a new window. Refer to p. 86 in your textbook, or simply rely on this code here:
<a href="URL goes here" target="_blank">link text goes here</a>

PLEASE INDICATE WHICH IS THE PAGE THAT WILL OPEN UP IN A NEW WINDOW SO I CAN FIND IT IMMEDIATELY.

7. You should have an images folder inside your idc folder (if you don’t, create one--note the lower case on “images”): idc/images. Find a single image either in the Creative Commons (attribute as needed) or in the public domain (Wikimedia Commons is a good source for public domain images) and save this image into your images folder. It is so critical that all your files and documents related to your website are all contained within the idc folder.

Then find a place within your table in which to place the image [NOTE--you will have to resize the image in a way that makes sense to your table] and link to this image as a relative link from your 02_sandbox.html webpage.
Please refer to p. 99 in your textbook.
Here’s another refresher from W3Schools:

(PS: you can put a border around your image if you want!)

8. At the bottom of the page, please create a form with a SUBMIT button--here is the EXACT CODE:

Username: <input type="text" name="user">

</form>

9. Create a new file in Notepad++ or Text Wrangler called “02_sandbox.asp.”

In this form, write a few words telling people who click on your Submit button what will happen to them next.

10. NOW THE CLINCHER: Make an animated gif of your own creation (see directions for animated gif files here). This animated gif needs to be saved to your idc/images folder.

To place it in the html file, don’t forget that it just has to be added just like a normal image (in this case, a .gif) file:

NOTE: the width and height should be whatever the width and height values of your image are.

Extra credit: change the colors of your cell blocks….here is some sample code for the adventurous:

<th bgcolor="#ff0066"><font size="5">Sunday</th>

(#XXXXXX is a color’s “HEX code,” which you can identify in the color picker window in Photoshop (or by adding the Colorpick Eyedropper app to your browser!)

YOU’RE DONE. THAT WASN’T SO HARD, WAS IT?

NOW UPLOAD your file to the Web using FileZilla (now available on ALL 35 Rod Library laptops ready for check out at the Media Resource Center) or WINSCP or CYBERDUCK and the instructions we used in class.
Your link should be something like: weblab.uni.edu/username/idc/02_sandbox.html

To view your webpage online, you need to upload your files to a web server.
We have been using Filezilla in class, but newer versions have been associated with Malware...we recommend you download Winscp (for Windows) or Cyberduck (for Mac).

All FTP clients are pretty much the same.

DIRECTIONS BELOW…..

YOU MAY HAVE TO SELECT “NEW SITE” if the text boxes are not responsive...I’m using my own username here (you would use your user name, of course), then click on “connect” ...

Screen Shot 2015-09-19 at 5.45.48 PM.png