AdvHTML

Foundation Computing >> Curriculum Revision >> Advanced HTML


 * [[image:pi_logo.jpg]] || ==The Petroleum Institute, Abu Dhabi UAE==

Foundation Computing Department
==Curriculum Revision== ||

=__Advanced HTML__=

Developer: Vance Stevens Date: January 21, 2008 //14:30 UTC/GMT//

This course follows on a set of introductory materials which have undergone revision in January 2008, including application of a cascading style sheet here: http://prosites-vstevens.homestead.com/files/pi/very_basics/starthere.htm http://www.tinyurl.com/32byv

Plans for a 2-week 6 lesson short course on Advanced HTML

Thumbnails (and quick review)
> Review: [|http://prosites-vstevens.homestead.com/files/pi/very_basics/housekeeping.htm>][|http://tinyurl.com/2rhlc4] > Tables review: http://prosites-vstevens.homestead.com/files/pi/very_basics/example12.htm and [|http://tinyurl.com/2y7skp]
 * Create an [advancedHTML] project folder
 * In your [advancedHTML] folder, create an attractive web page to serve as your **PI student portal** (you will put it on the Internet soon)
 * Use http://colormatch.dk/ to help you select colors that match
 * Click on the big **?** for an informative explanation of color schemes
 * Give your page Titles and Headings using H1, H2, and H3 tags
 * Link to at least two URLs on the Internet that are relevant to your role as a student at PI
 * Put (at least) two large pictures in your [advancedHTML] folder
 * Display them in thumbnail view (resized) in a table on your web page
 * **When a thumbnail is clicked, make it display the picture**



//**Notes on color / colour matchmakers**// There are a couple of color matchmakers in my delicious acct [|htt://del.icio.us/vancestevens/color] If you Google this topic you can turn up dozens if not hundreds. The ones I tagged are the three I like particularly. The one about Football works in an interesting way. Explaining this to your students will give them insights on how computers can work in imaginative ways. From the website: “Let Yahoo pick your color scheme! Enter a word or phrase and I'll grab 5 related images from Yahoo Images, and get the 6 most prominent colors from each.” So I put Football there but you could also put something like Jungle or garden for more greens and blues. “Grand Canyon” is nice. You can play with this. If you put in 'barf' you get, not surprisingly 'wheat' and 'light salmon' but also a not at all unpleasant selection of varying shades of 'dark green olive' and 'lemon chiffon'. Try it here: http://www.gpeters.com/color/color-schemes.php The other one is here: http://www.colorschemer.com/online.html You click on a color you’re trying to match and it returns 16 blending colors (I like colormatch.dk because it does something similar but on a sliding scale). Now, for an illustration of what we can do with [|del.icio.us] … If YOU find a color schemer you think it uniquely interesting, and assuming you have a del.icio.us acct, you can tag it color and/or colour (I use both) and ALSO tag it 'for:vancestevens'. That’s “for colon vancestevens”. If you do that it will turn up under my “Links for you” in my del.icio.us acct and I can tag it color / colour and it will be added to our list.

**CSS Styles**
Helpful references: http://www.w3schools.com/css/default.asp comprehensive, step by step tutorial, well organized for each topic; for example: > "The CSS syntax is made up of three parts: a selector, a property and a value" > These are written in this syntax: selector {property: value} > "The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:" e.g. body {color: black} > For every concept here there is a workpad where users can change elements in the code and immediately see the effect.
 * There is a clear explanation of the syntax here: http://www.w3schools.com/css/css_syntax.asp
 * http://www.w3schools.com/css/css_syntax.asp - what is on this page would be good prep for teachers and STUDENTS

Having chosen an appealing color scheme from http://colormatch.dk/
 * Apply a style to the web page created in the previous exercise
 * Use the following code pattern - paste it in the HEAD section of your web page
 * Change the colors, font faces and sizes, and line attributes to make your web page attractive and unlike anyone else's

body { background-color: #EFDE98; font-family: Arial; font-size: 10px; color: #1E2A3A; } h1 {font-family: Arial;color:#4F2E29;} h2 {font-family: Arial;color:#4F2E29;} h3 {font-family: Arial; color:#9F5C52;} hr{ color:#2F69AF; background-color:#EF5840; width:70%; height:2px; }



**External cascading style sheet**
Helpful references: http://webdesign.about.com/od/css/a/aa051203a.htm explains how to write out styles as usual and put them in a .css file then them http://www.developertutorials.com/tutorials/css/creating-linking-external-css-files-050531/page1.html clear, step by step http://www.ibdjohn.com/ has a nice template for a style sheet http://www.tizag.com/cssT/external.php has even simpler examples GOOD FOR STUDENTS http://htmlhelp.com/reference/css/quick-tutorial.html for a css quick tutorial and how to link to the external file > Name the file following this pattern: ID##style.css > Use this code pattern  > Remove the  script from any page that has  script.
 * Create pages in your [advancedHTML] folder in addition to the one with the thumbnails
 * Each additional page is set up to display one of the pictures
 * Copy the code between the  and  tags in your existing page to a separate .css file.
 * WIthin the  embed the line in each page that will apply the style specified in the .css file to all pages in your [advancedHTML] folder

You can see a stylesheet applied here: http://prosites-vstevens.homestead.com/files/pi/very_basics/starthere.htm

**Wiki**
> You may have to remove the link to your .css file (or maybe not, might not make any difference) > The widget maker icon looks like a TV set
 * Create a wiki at [|http://wikispaces.com]**
 * Make your** **PI student portal** page appear in the wiki by following these __//steps for creating an HTML Widget//__
 * 1) Be sure you are signed in to your wiki
 * 2) At the page you wish to work on click Edit this Page
 * 3) Copy all code from your **PI student portal** __//between//__  and 
 * 1) Embed the code for your PI student portal in the wiki by creating an HTML code 'widget' there
 * Choose the last item, More HTML
 * Paste your code into the space provided
 * Save the widget
 * 1) When the widget appears (as a grey patch), save the page

You will now see your web page in the wiki, but you won't see background format and other formatting specified in . Also, your picture links will not appear.

To get your pictures back into the page, you'll need to upload them to your wiki space. Each picture will THEN have its own URL. Follow these __//steps for uploading files//__:

> OR (much easier) right click on the file NAME and select Copy Link Location (puts the URL in RAM)
 * 1) Be sure you are logged in to your wiki
 * 2) Click on Manage Space
 * 3) Click on List and Upload Files
 * 4) When you upload you will see an icon under FILE and a filename under NAME
 * 5) Either open the file by clicking on its icon or filename and then right click to select PROPERTIES and copy the URL from the properties window

Now the picture is on the internet, it has a URL, and that URL is in your clipboard. You can now go to your code and replace the filename of each picture with its URL from Wikispaces.


 * Revise your copy of your code by replacing the broken picture links with the new picture URLs from the wiki.
 * Edit your wiki page and delete the old widget.
 * Upload the new new code to the wiki following the steps for creating an HTML widget above.

You should see your pictures now. Now upload your CODE (your html file) to the wiki using the steps for uploading files above. As with the pictures, when the file has uploaded, right click on its name to get its URL (copy shortcut)

Now return to the code you are working on and create a link at the top of your web page which says, The complete version of this file is here: (paste the URL here and hyperlink it)

Now save the file, copy the code between the BODY tags, and create a new widget in the wiki. Your wiki now has
 * working picture links
 * a link to a version of your file on the Internet where your STYLE specifications work correctly

You also have the latest version of your code in two places:
 * in your home folder or on your computer
 * in your Wikispaces account where you can download it from there and work on it later from anywhere you can connect to the Internet

What you have accomplished > but you can also control the display of your content by using HTML code
 * You have found a private place to store pictures and other files on the Internet (for free)
 * You have found a means of sharing pictures and files with others (you can give out the URLs)
 * You can not only create content using the WYSIWYG editor in a wiki
 * You have created a web page or web portal for yourself which you can use in many imaginative ways in your personal and professional life at PI and beyond

In computing at PI we hope to help you explore some of the ways we can use these online, shareable spaces to promote effective project management and lifelong learning

The above was drastically simplified based on feedback from colleagues and the result is here ...

http://213.42.148.233/file.php/83/html/advanced/advancedHTML4.pdf** //Material remaining to be be included in the workbook is detailed below://
 * Student workbook with Lessons 1, 2 and 3 have been reVamped (February 4, 2008):

Dom Munster has created an example page to model what the final result of this exercise might look like: http://yachtie.wikispaces.com/

Vance has created his page here: http://vancestevens.wikispaces.com/

The latter gives an example of how a page can be created in the wiki editor and then linked to the web project in the files area. **NOTE:** When I open a file from Wikispaces in Mozilla Firefox it saves the file to browser cache and then opens if from there. Not surprisingly, all the links are broken. This technique **may work only in IE** which opens the file on the Internet, and then all the links work.

Frames

 * Use the template provided to create a sidebar for the above pages so that each appears in the main frame
 * References:
 * http://prosites-vstevens.homestead.com/files/pi/very_basics/frames/framed_ezine.pdf
 * http://prosites-vstevens.homestead.com/files/pi/very_basics/frames/ezine.htm

Javascript
> http://prosites-vstevens.homestead.com/files/pi/very_basics/internet_syllabus.htm#javascript_forms
 * Introduction to the sites providing free javascripts
 * Some sample scripts provided as part of this course
 * Embed a javascript effect in one of the pages or frames