GNU   davin.50webs.com/webdesign
a GNU world order – your home of everything that is free

       Main Menu          Research Projects         Photo Album            Curriculum Vitae      The Greatest Artists
    Email Address       Computer Games          Web Design          Java Training Wheels      The Fly (A Story)   
  Political Activism   Bob Dylan Quotes+       My Life Story          Smoking Cessation          Other Links      
      Tutorial 1             Tutorial 2               Tutorial 3                   Tutorial 4                 Tutorial 5      
      Tutorial 6             Tutorial 7               Tutorial 8                   Tutorial 9                 Tutorial 10      
      Tutorial 11         Dec/Hex Codes   H.T.M.L. ASCII Codes         Using Emacs           Download Links  


Web design course tutorial 7 : sub-menus and CSS


Question 7.1: Unzip the archive file webdesign-tutorial-07.tar.gz using Winzip or the tar command for the purposes of completing this tutorial.


§ 7.1 Sub-menus and sub-sub-menus etc

The archive associated with this tutorial contains just one Website with the following structure:

tutorial-7
  |
  +-- src
  |     |
  |     +-- site
  |     |     |
  |     |     +-- inner1
  |     |     |     |
  |     |     |     +-- inner2
  |     |     |     |     |
  |     |     |     |     +-- index.hts (PAGE)
  |     |     |     |     |
  |     |     |     |     +-- index.m4 (SPECIAL PAGE)
  |     |     |     |     |
  |     |     |     |     +-- inner4.hts (PAGE)
  |     |     |     |     |
  |     |     |     |     +-- inner5.hts (PAGE)
  |     |     |     |     |
  |     |     |     |     +-- Makefile (READ ONLY)
  |     |     |     |
  |     |     |     +-- index.hts (PAGE)
  |     |     |     |
  |     |     |     +-- index.m4 (SPECIAL PAGE)
  |     |     |     |
  |     |     |     +-- inner1.hts (PAGE)
  |     |     |     |
  |     |     |     +-- inner2.hts (PAGE)
  |     |     |     |
  |     |     |     +-- inner3.hts (PAGE)
  |     |     |     |
  |     |     |     +-- Makefile (READ ONLY)
  |     |     |
  |     |     +-- cv.hts (PAGE)
  |     |     |
  |     |     +-- davins-webcam.jpg (PAGE)
  |     |     |
  |     |     +-- dolphin.jpg (PAGE)
  |     |     |
  |     |     +-- icon-16x16.png (PAGE)
  |     |     |
  |     |     +-- index.hts (PAGE)
  |     |     |
  |     |     +-- index.m4 (SPECIAL PAGE)
  |     |     |
  |     |     +-- Makefile (READ ONLY)
  |     |     |
  |     |     +-- photos.hts (PAGE)
  |     |     |
  |     |     +-- stylesheet.css (PAGE)
  |     |
  |     +-- Makefile (SPECIAL SITE)
  |     |
  |     +-- readonly.m4 (READ ONLY)
  |     |
  |     +-- readonly.mk (READ ONLY)
  |
  +-- output
        |
        +-- site
Like tutorial 4, the above files have the following different purposes:

§ 7.2 Build the Website using make m4 copy


Question 7.2: In the folder tutorial-7/src, press one of the following key sequences: Ctrl-F9, Alt-F9 or Shift-F9 and execute the following command: make m4 copy. This will build your Website for you.


§ 7.3 Opening the Website in a Web browser


Question 7.3: Open the Website in a Web browser to view the contents of the site.


§ 7.4 Editing Web pages using H.T.M.L. code


Question 7.4: Edit some of the H.T.M.L. code in the Website, save your changes and open them in a Web browser to see if your changes are correct.


§ 7.5 Editing Web pages using m4 code


Question 7.5: Edit the m4 source file index.m4 so that the colours and fonts of the Website are changed.


§ 7.6 Removing pages from your Website

Every time you remove a Web page of the form x.hts you will need to do the following steps:


Question 7.6: Delete one of the H.T.S. files in the set inner1.hts, inner2.hts, inner3.hts, inner4.hts, inner5.hts. Then follow all of the above steps. When you have done this open your Website in a Web browser to verify that the page has been successfully deleted.


§ 7.7 Adding pages to your Website

Every time you add a Web page of the form x.hts you will need to do the following steps:


Question 7.7: Add an H.T.S. m4 source file called inner6.hts to the folder tutorial-7/src/site/inner1/inner2. Then follow all of the above steps. When you have done this open your Website in a Web browser to verify that the page has been successfully added.


Question 7.8: In the H.T.S. source file that you have just created, add an image link to the animated GIF file tutorial-7/src/site/under-const.gif. Firstly you will need to open Irfanview on this image to find out the width= and height= attributes for the image tag. Once you have got these values there are two main ways of doing this:

Question 7.8a: The first way is using a relative image hyperlink. Since the GIF file is two folder levels up from the Web page that you are currently editing, the href= attribute will need to be prefixed with ../.. before the name of the image file.

Question 7.8b: A better way is to use the symbol m4_home to locate the file, so that the href= attribute is prefixed with the value m4_home. The advantage of this method is that you can move the H.T.S. source file into a different folder and it will still correctly load the GIF image file.


Question 7.9: In the file tutorial-7/src/site/photos.hts add a hyperlink to the page tutorial-7/src/site/inner1/index.html using the following H.T.M.L. code:

Click <a href="inner1/index.html">here</a> to visit page inner1.


Question 7.10: Your next task is to add the m4_home symbol to the above href= attribute so that the file photos.hts can be moved to a different folder and it will still locate the file inner1.


§ 7.8 Adding sub-menus and sub-sub-sub-menus to your Website


Question 7.11: Add a sub-menu to your Website using the patterns established in the rest of the files. Suppose the name of the folder that you want to create sub-menus in be called tutorial-7/src/site/abc. Then you need to complete the following actions:

  1. Create a folder: tutorial-7/src/site/abc
  2. Create a file tutorial-7/src/site/abc/index.m4 similar to tutorial-7/src/site/inner1/index.m4.
  3. Create files 1.hts, 2.hts and 3.hts etc in the folder tutorial-7/src/site/abc for the Web pages that you wish to add to the sub-menus.
  4. Edit the file tutorial-7/src/site/index.m4 so that it has a link to the menu item abc.
  5. Edit the m4 and copy targets of the Makefile tutorial-7/src/Makefile so that your sub-menus are created when you invoke make m4 copy.


Question 7.12: Add a sub-sub-sub-menu to your Website using the patterns established in the previous question. Suppose the folder of sub-sub-sub-menu that you want to add is called tutorial-7/src/site/inner1/inner2/inner8. Then you will need to complete the following actions:

  1. Create a folder: tutorial-7/src/site/inner1/inner2/inner8
  2. Create a file tutorial-7/src/site/inner1/inner2/inner8/index.m4 similar to tutorial-7/src/site/inner1/inner2/index.m4.
  3. Create files 1.hts, 2.hts and 3.hts etc in the folder tutorial-7/src/site/inner1/inner2/inner8 for the Web pages that you wish to add to the sub-menus.
  4. Edit the file tutorial-7/src/site/inner1/inner2/index.m4 so that it has a link to the menu item inner8.
  5. Edit the m4 and copy targets of the Makefile tutorial-7/src/Makefile so that your sub-menus are created when you invoke make m4 copy.


§ 7.9 Removing sub-menus and sub-sub-sub-menus to your Website


Question 7.13: Remove a sub-menu from your Website. Suppose that the folder containing the sub-menus that you want to remove is called tutorial-7/src/site/abc. Then you need to complete the following actions:

  1. Delete the folder tutorial-7/src/site/abc including all files contained within it.
  2. Remove the line mentioning abc from tutorial-7/src/site/index.m4 to delete the menu item abc.
  3. Remove the lines containing abc from the Makefile tutorial-7/src/Makefile so that your sub-menus are removed when you invoke make m4 copy.


Question 7.14: Remove a sub-sub-sub-menu from your Website. Suppose that the folder containing the sub-sub-sub-menus that you want to remove is called tutorial-7/src/site/inner1/inner2/inner8. Then you need to complete the following actions:

  1. Delete the folder tutorial-7/src/site/inner1/inner2/inner8 including all files contained within it.
  2. Remove the line mentioning inner8 from tutorial-7/src/site/inner1/inner2/index.m4 to delete the menu item inner8.
  3. Remove the lines containing inner8 from the Makefile tutorial-7/src/Makefile so that your sub-menus are removed when you invoke make m4 copy.


§ 7.10 Introduction to Cascading Style Sheets

Recall from Section § 1.4 that you cannot specify the background colour of text using <font> tags. To do this you will need to use Cascading Style Sheets (or C.S.S. for short). Cascading Style Sheets are also useful because it allows you to separate the logic of your H.T.M.L. code from the layout (which is purely cosmetic). It is true that m4 bypasses this flaw so m4 programmers should not need to use C.S.S. as much as raw H.T.M.L. programmers. For this reason I will only present a brief outline of how C.S.S. works.

Although C.S.S. code can legally be put in every H.T.M.L. file, it is better to factor it out of the H.T.M.L. file and have one C.S.S. file that applies to all H.T.M.L. files. This is the approach that is taken in the Website associated with this tutorial. Therefore when you want to change the C.S.S. file, you only need to do it in one place: tutorial-7/src/site/stylesheet.css and the changes will be reflected in every Web page of the Website.

To access the file stylesheet.css in every Web page of your Website each H.T.M.L. Web page will need to look like this:

<html>
<head>
   <link rel="stylesheet" href="m4_home/stylesheet.css" type="text/css">
</head>
<body>
   Web page code goes here...
</body>
</html>

In the above code, notice the use of the symbol m4_home to locate the file stylesheet.css in the main folder of your Website, whatever is the actual location of this H.T.S./H.T.M.L. file. Users of m4 don't need to worry about this because the Website that you are using for this tutorial automatically has this code included using the symbol m4_head_stuff. However if you ever need to create a Website from scratch, you will need to include this code.. Visit the following Website for more detailed tutorials on how to use Cascading Style Sheets: www.w3schools.com/css/default.asp.

§ 7.10.1 Span tags

Span tags provide a way for you to specify the background colours of text. Here is an example of the definition of a span tag in the file stylesheet.css:

span.rb
{
   font-family: courier;
   font-weight: bold
   font-style: italic;
   color: #ff0000;
   background: #000000;
}

With this code in place you can create text which is in the courier font, with bold and italics turned on, has a black background and a red foreground. You cannot do this with the <font> tag. Here is how to use this font in an H.T.M.L. document:


<span class="rb">I have a red foreground and a black background.</span>

Note that all of the entries in the definition of the span tag are optional. When specifying colours such as the color: or background: attributes, you can use hexadecimal RGB colour triplets (as is done above), or you can name colours explicitly using a colour name such as red. The third way to do this is by using a RGB decimal triplet such as rgb(255,0,0);. Legal values for the font-family: attribute include: Times, Courier, San-Serif (also known as Helvetica) and Comic Sans MS.


Question 7.15: Add code to stylesheet.css to create a span tag with class name myspan with no bold, no italics, Helvetica font, green background and yellow foreground. Add some H.T.M.L. code to tutorial-7/src/site/index.hts so that some text is shown with the span class myspan and finally open index.html in a Web browser to verify that <span> tags are correctly rendered.


§ 7.10.1.1 Multiple values for the font-family: attribute

When specifying a font like Comic Sans MS which may not exist in non-Windows computers, it is wise to give one or more alternative fonts in case the first one doesn't exist. Consider the following C.S.S. code.

span.comic
{
   font-family: 'Comic Sans MS', Helvetica;
}

In the above, note that Comic Sans MS needs to be quoted as it has spaces in it. Then consider the following H.T.M.L. code:

<span class="comic">I might be in the Comic Sans MS font.</span>

The above sentence will appear in the Comic Sans MS font, and if that font doesn't exist, it will appear in the Helvetica font.

§ 7.10.2 <h1> - <h6> tags

Here is a definition of the <h1> tag to go in stylesheet.css:

h1 {
   font-family: courier;
   font-weight: bold
   font-style: italic;
   color: #ff0000;
   background: #ffffff;
   text-align: right;
   font-size: 40pt
}

With the above definition in place, whenever you write a pair of tags <h1>  . . .  </h1> it will show up in courier face, bold, italic, red foreground, black background, right text alignment and font size 40pt.


Question 7.16: Using similar code to the above, write a C.S.S. definition so that <h2> tags show up with center alignment and green foreground and no other styles. Change index.hts so that it contains an <h2> tag and finally open index.html in a Web browser to verify that <h2> tags are correctly rendered.


Question 7.17: Write a C.S.S. definition so that <h3> tags show up with left alignment, green foreground and a yellow background and no other styles. Change index.hts so that it contains an <h3> tag and finally open index.html in a Web browser to verify that <h3> tags are correctly rendered.


Question 7.18: Write a C.S.S. definition so that <h4> tags show up with left alignment, green foreground, yellow background, orange left borders, orange bottom borders and no other styles. The following code will help you to achieve this:

 border-bottom:   medium solid rgb(255, 128, 0);
 border-left:     medium solid rgb(255, 128, 0);

and finally open index.html in a Web browser to verify that <h4> tags are correctly rendered..


§ 7.10.3 <p> tags

Here are some attributes that you can apply to default text:
p {
   font-family: courier;
   font-weight: bold
   font-style: italic;
   color: #ff0000;
   background: #ffffff;
   text-align: right;
   font-size: 40pt
}

Note that you will need to use </p> tags to get this feature to work. In these tutorials I have only taught you to use <p> tags by themselves.


Question 7.19: Make it so that default text appears with a red colour, in the Helvetica face with no bold and no italic.


Question 7.20: Visit the following Website www.w3schools.com/css/tryit.asp?filename=trycss_text-transform to find out how to uppercase, lowercase and capitalise text.


Question 7.21: Visit the following www.w3schools.com/css/tryit.asp?filename=trycss_text-indent to find out how to set the amount of paragraph indent.


§ 7.10.4 Removing the underlining of hyperlinks

The following C.S.S. code removes the underlining of hyperlinks:

a {text-decoration: none}


Question 7.22: Add this code to the C.S.S. page of your Website stylesheet.css and check that it does indeed remove the underlining of hyperlinks.


§ 7.10.5 Background tags

Here is some code to add to the C.S.S. to give you a stationary background image:

body
{
   background-color: #ffffff;
   background-image: url('dolphin.jpg');
   background-repeat: no-repeat;
   background-attachment: fixed
}


Question 7.23: Write some C.S.S. code so that the background image in your Website is different to the one above, and does repeat, but is not fixed, so that it scrolls whenever you scroll the screen. See the following Website: www.w3schools.com/css/css_background.asp for more information.


§ 7.11 Uploading your Website to 50webs.com

Here is what you have to do to upload your Website to 50webs.com:

  1. First you will need to log on to 50webs.com using the name and password that you received in tutorial 2.
  2. To upload your Website to 50webs.com you should use the program FTP and transmit every file in each folder, one folder at a time. Ask Davin for more information if you need it.


Question 7.24: You should now upload your Website to 50webs.com. When you have finished doing this, you should browse your Website to verify that all files have been uploaded successfully.


You can view the answers to this tutorial. A password is required.

Back to Web Design Course
This page has the following hit count:
| Main Menu | Research Projects | Photo Album | Curriculum Vitae | The Greatest Artists |
| Email Address | Computer Games | Web Design | Java Training Wheels | The Fly (A Story) |
| Political Activism | Bob Dylan Quotes+ | My Life Story | Smoking Cessation | Other Links |
| Tutorial 1 | Tutorial 2 | Tutorial 3 | Tutorial 4 | Tutorial 5 |
| Tutorial 6 | Tutorial 7 | Tutorial 8 | Tutorial 9 | Tutorial 10 |
| Tutorial 11 | Dec/Hex Codes | H.T.M.L. ASCII Codes | Using Emacs | Download Links
Last modified: Sun Oct 9 14:46:30 NZDT 2016
Best viewed at 800x600 or above resolution.
© Copyright 1999-2016 Davin Pearson.
Please report any broken links to