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   Scruff the Cat       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

§ 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

• The files marked PAGE above are Web pages that you can edit, rename, delete or copy.
• The files marked SPECIAL PAGE above should only be edited when you add, remove or rename pages or when you edit the preferences for this Website.
• The files marked SPECIAL SITE above should only be edited when the name of your Website is changed or you wish to add or remove a Website to the src folder.
• The files marked READ ONLY above should only be edited by advanced users. Novice users should not need to edit or even look at these files.
• As mentioned above, files ending with the .hts extension are used to build H.T.M.L. files.
• Files ending with the .m4 extension are m4 source files that are used by the H.T.S. files.
• Files ending with the .mk extension are files that are used by the Makefiles.

§ 7.2 Build the Website using make m4 copy

§ 7.3 Opening the Website in a Web browser

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

§ 7.5 Editing Web pages using m4 code

§ 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:

• Delete the page x.hts from disk,
• Remove one line of m4 code that contains the line x.html from the file index.m4 that is in the same folder as the file you have deleted in the previous step, and finally
• Execute make m4 while inside the folder tutorial-7/src.

§ 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:

• Create the page x.hts on disk in the appropriate folder,
• by following the pattern of the rest of the code in the file index.m4 that is in the same folder as x.hts, add one line of m4 code to the file index.m4. Ask Davin if you get stuck here.
• Execute make m4 while inside the folder tutorial-7/src.

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.

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

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

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.

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

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.

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:

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.

§ 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.

 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

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.

www.w3schools.com/css/tryit.asp?filename=trycss_text-transform

www.w3schools.com/css/tryit.asp?filename=trycss_text-indent

§ 7.10.4 Removing the underlining of hyperlinks

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

a {text-decoration: none}

§ 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
}

www.w3schools.com/css/css_background.asp

§ 7.11 Uploading your Website to Ripway

Here is what you have to do to upload your Website to Ripway:

1. First you will need to log on to Ripway using the name and password that you received in tutorial 2.
2. Then you will need to click on the File Browser tool.
3. For every folder that exists in the local version of your Website tutorial-7/output/site you will need to create a folder on the Ripway server.
4. For ever folder that exists in the local version of your Website, you will need to upload every file in that folder to Ripway using the Easy Upload tool.

To upload your Website to Ripway 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.