Exercise 2
Navigation, publishing WWW pages and elementary CSS

First we'll practice creating navigation to a complex of several pages.

1. In case you haven't finished the first exercise (excluding the additional exercises) do that before continuing with these.
2. Make an imaginary homepage site that consists of three pages:
   • Front page that contains a short description, contact information, a picture and links to other pages
   • Study page with a schedule
   • Link page containing the favorite links
3. Open a new document in HTML-Kit. Use the same basic code as last time. First write the front page that includes the following:
   • Use your name as a title
   • and as the main heading
   • Write a short desription of your self. Tell what you study and what you do in your spare time.
   • Insert a photo (img) below the contact information. Use one of the example images. Save the image to folder U:/networks/demo2/.
   • Put Contact for a heading and write your address, phone number and e-mail address.
     • Dividing the contact information to separate lines can be done with the element br.
     • Turn your e-mail address into a mailto link. For example:

       <a href="mailto:tommi.j.lahtonen@jyu.fi">tommi.j.lahtonen@jyu.fi</a>

   • Below the contact info write a new heading More about me. Below this heading put an unorganized list (ul) with two lines: Studies and Links.
   • To the end of the document, mark who maintains the page and when it was updated like in the following example:

     
     <address>
     <a title="Webmaster" href="http://www.cc.jyu.fi/%7Eusername/">John Doe</a>
     (<a title="E-mail to webmaster" href="mailto:username@st.jyu.fi">username@st.jyu.fi</a>)
     <strong>2000-09-18 12:47</strong>
     </address>
     

4. Save to U:/networks/demo2/ as index.html.
5. Validate and correct possible errors. Make sure your page works on a browser.
6. Open a new document and use again the same basic code.
   • Write your weekly schedule as a table to this documet. For an example on defining tables see the lecture.
     
   • Write a sensible title and a main heading.
   • Save the doument as studies.html.
   • Validate, correct the errors and test by using a browser.
7. Open a new document again. Write a page that contains some links in an unorganized list (ul). If you don't have any favorites, put links to the homepage of the course and to the front page of the University of Jyväskylä. Write a title and a main heading. Save.
8. Edit the index.html file. Turn the text in the unorganized list to links to the respective documents. Save and test the links by using the browser.
9. Then edit the studies.html file. Add navigation links to the beginning of the document above the main heading. Put the links inside a div element. An example:

   
   <div>
   <a href="lectures/">Lectures</a> |
   <a href="exercises/">Exercises</a> |
   <a href="assignment/">Assignment</a> |
   <a href="notes/">Lecture notes</a> | 
   <a href="schedle.html">Schedule</a> | 
   </div>
   

   • Write links to the index.html page and your link page.
   • Use | to separate the link words or put every link between []s.
   • Save and test.
   • Put the update date and the maintainer of the page to the end of the document as you did with index.html.
10. Add the navigation links and maintainer/update information onto the link page.

Basics of Cascading Style Sheets (CSS)

1. Open a new document in HTML-Kit (File|New Document). Copy the css base and use it as a base for your document. Save it to U:\networks\demo2\ as demo2.css.
2. Add a link element inside the head element of every XHTML document you made above. With this link you link the CSS file to all the documents. The following information should be inserted to the link element:

   <link href="demo2.css" rel="stylesheet" type="text/css" />

3. CSS language is for defining the appearance of the xhtml elements. Also new styles that can be used in the xhtml doument can be made. Examples of CSS can be found on the lecture page.
4. First define the font for the document. Add the font definition to the body element as follows:

   body {
   		 font-family: Verdana, Arial, "Trebuchet MS", sans-serif;
   }
   

   Verdana, Arial ja "Trebuchet MS" are names of the fonts in use. The first one in the list is used on the page. The author of a www page cannot know which fonts all the browsing people have on their computers so several options are needed. sans-serif means a font family from where the font is selected if none of the other fonts are in use.

5. Save the CSS file and use the browser to see the appearance of your documents. You can change the order of the fonts to see how it affects the appearance of the pages.
6. Then define the margins for the pages. Add the following definitions to the body element:

   
   margin-left: 2%;
   margin-right: 2%;
   margin-top: 1%;
   margin-bottom: 1%;
   

   Thus, the left and the right margin of the whole page are 2% of the size of the page. Top and bottom margins in turn are 1% of the size of the page.

   Save and look at the page on the browser window.

7. More margins! Add the following definitions to h1, h2, and p elements:

   
   margin-left: 1em;
   margin-right: 1em;
   margin-top: 1.5em;
   margin-bottom: 1.5em;
   

   The em unit relates the size to the size of the default font of the browser.

   Save and check on the browser window. Change the margins to what you like.

8. Next, you will make a distinct appearance for the navigation bar on the pages. Add a border to the .navbar style like this:

   
   border-style: solid;
   border-width: thin;
   border-color: #000000;
   

   The style .navbar is not yet in use so change the code for the navigation in studies.html and your link page to

   
   <div class="navbar">
   

   There the div element now uses a style called navbar.

   Look at the pages on the browser window.

9. You can also put a background color for the navigation bar. When you set a background color you have to define a color for the text as well:

   
    background-color: #EEEECC; 
    color: #FFFFFF; 
   

   For defining the colors as RGB codes see the WDG site.

10. Then the effects for the links:

    a:link

    defines the normal appearance of a link

    a:visited

    is for a visited link

    a:hover

    defines the appearance of a link when the cursor is on it

    a:active

    is for the appearance of an active link

    It is not necessary and sometimes not even wise to change other link definitions but hover effect is useful. For example:

    
    a:hover {
     color: white;
     background-color: #993399; 
    }
    

Publishing a WWW page

Now you will learn how to copy a WWW page to a WWW server for everyone to see.

1. Connect to a Unix server (silmu, itu, verso, kanto or tukki) of the Computing Centre using SSH.
2. Write makewww. That will create a folder called www that serves as a link to the WWW server. "The World" can see all documents you save to the www-folder.
3. Go to the www folder (cd www) and create a new folder for your exercises: mkdir networks.
4. The address of your web site is:

   http://www.cc.jyu.fi/~username/

   For example: http://www.cc.jyu.fi/~tjlahton/. You can also use:
   • http://www.st.jyu.fi/~username/
   • http://www.cc.jyu.fi/%7Eusername/
   • http://www.st.jyu.fi/%7Eusername/

   Select one of the forms and use the same one always when you give your www address to someone.

   If you don't want to have a homepage yet, you can hide the exercise documents you put to the server by creating an empty homepage. Create an empty page by writing

   touch index.html

   when in the www folder.

5. Commonly the pages are copied to the server by using a FTP programme but this should be avoided as the FTP connection is not secure. Use only the command prompt -based SCP2 command or the graphic SFTP. Using these programmes was learned on the Preliminary Course on Information Technology.

Secure File Transfer Client (SFTP)

Secure File Transfer by SSH is a Windows programme for secure copying of files between computers that support the SSH2 protocol.

1. Start SSH Secure File Transter by Start|Programs|Secure Shell SSH|Secure File Transfer Client
2. Press enter and the programme will ask the server you want to connect. Connect to the unix server you have your username for (silmu, itu, verso, kanto or tukki).
3. Copy the pages you just made to the WWW server
   • From the list on the left, select the folder www and there the folder networks.

     New folders are created by Operation|New Folder.

   • Select Operation|Upload
   • Select the folder U:\networks\demo2 in the opening window. The contents of the whole folder are to be copied to the www server.
   • Copying starts when you select Upload
   • You can get SFTP to your home computer in the SSH2 package.

SCP2

SCP2 is a similar programme to Secure File Transfer Client but it is used from the command window.

1. Open Command Prompt
2. Go to folder U:\networks\.
3. Copy the whole folder demo2 to the www server by writing:

   
   scp -r demo2 username@server.st.jyu.fi:www/networks/
   
   

   The command line above copies the demo2 folder and all its subfolders to the www server. Attribute -r copies all subfolders and files therein.

4. You can get SCP to your home computer either within SSH2 package or by taking the Putty SCP
5. Now you can test the pages on the server. Go to

   http://www.cc.jyu.fi/~username/networks/demo2

   by using the browser.
6. Validate the entire site by WDG HTML Validator. Go to <http://www.htmlhelp.com/tools/validator/> give the address of your site and select Validate entire site.

Additional exercises

1. Create a new CSS file for the document you made last time. Try to make the page look like the original article by Jukka Korpela. Some hints and help are available at the leture page.
   • You'll have to set a background image or color for the document.
   • The heading has its own background color.
   • The main title is centered.
   • The element pre also has its own backgroung color and border.
   • At the end of the document there is a paragraph that differs in its appearance.
2. Make a new document where you place a table that contains 16 of the basic colors defined by using a CSS file. Make a corresponding table by using ID definition for the cells of the table (td). Put the styles that correspond to the ID definitions to the CSS file so that those styles can be used for changing the properties of the cells. Also define the following properties:
   • The contents of the cells are centered.
   • Set a background color that doesn't confound with the contents of the cell.
   • The table has to be in the middle of the browser window. You have to put the table inside a div element so make a subclass .center for div where you can define the centering.

   aqua	black	blue	fuchsia
   gray	green	lime	maroon
   navy	olive	purple	red
   silver	teal	white	yellow