PK5 Web Page Requirements — (Top)

Your PK5 basic web "home page" must have at least 15 different html elements. 'Elements' may include different colors, lists, font sizes, boldface, italics, underlining, dividing lines, graphical images, etc. The objective of both the basic "home page" and the html paper version is to ensure that students have a basic grasp of how html elements work and how to create and edit one's academic work in html format. Please see the PK5 Background file for details on exam procedure.

Creating web page(s) on Kielo is quite simple. If you have not yet created your first page, just do the following:

Step One: Creating your First Web Directory and Web Page — (Top)

1. Log in to your home directory on Kielo
2. From the prompt, type luokotisivu and press "Enter"
3. This luokotisivu command (which only works on Kielo) is the easiest way to create your first web page on Kielo. The command does four things [as of September 2011]: (1) it creates a directory called public_html in which your web pages must be put; (2) sets the UNIX protection on this directory (and your 'top-level' home directory) to be "public"; (3) creates in the public_html directory a model index.html first web page which will be registered to your Kielo account; and (4) sets the UNIX protection on this page to be 'public' in a special way for first Kielo web pages. it).
4. Thus, after using the luokotisivu command, you will have both a public_html directory AND a home page called index.html (which, however, you will need to edit).
5. So, the next step is to move to the public_html directory to edit the index.html file. To do this, type cd public_html (from your home directory) and press "Enter".
6. If you have previously set your Kielo .login file to show the path (see Configuration Tips), you'll see that you are in the public_html directory. Otherwise, type pwd (and "Enter") to make sure you are in the right directory.
7. In the public_html directory, use the ls command to check that index.html is there. (If it isn't, go back to your home directory [type cd and "Enter"] and try the luokotisivu command again).
8. Next, you could use your browser to check that the file is public. Go to http://www.uta.fi/~yourlogin/ (in this example, 'yourlogin' = 'tunnus', e.g. mine is http://www.uta.fi/~hopkins/). You should see the 'Matti Meikäläinen' model file that Kielo created.
9. Now, edit the file. (If you used your browser to check the page, first go back to your telnet connection to Kielo.) Type pico index.html (and "Enter") and the text of the model file will appear on screen. Go through and replace the 'model' text with your own personal details (or whatever you want to put). Keep it simple this first time; the main thing is to get your first page working. When editing the page, remember that with PICO you can delete entire lines with Control-K (or undelete text you accidentally deleted with Control-U).
10. Use PICO's Control-O command to save what you have changed. Now switch back to your web browser to inspect the changes (click the "Reload" button so the browser will load the changed page). You may keep PICO open if you wish to continue editing and alternately checking the results with the browser; just remember to use Control-O to save each new change, and then "Reload" the new changes into the browser. When you finish editing, save your new file again and then exit PICO with Control-X. Congratulations should now be in order ...

Step Two: Basic HTML Tags — (Top)

1. As you will have noticed from editing the 'Matti Meikäläinen' model file (or using your browser's View - Document Source feature to check the underlying coding of any web page you are looking at), web pages are constructed with HTML (hypertext markup language) coding "tags". Following is an introduction to these tags. For further detail please see the Pieni HTML-opas (in Finnish) via the UTA Computer Center, or one of the PK5 HTML and Web Design Guide reference links.
2. The basic rule for HTML tags is that each "part" of your page will be defined by certain tags. Most of the tags need to be "turned on" before you enter the text for that "part" and then "turned off" after you have ended that part. Tags are "turned on" by putting the tag code inside a pair of angle-brackets "<XtagX>". Tags are "turned off" by putting a "slash" (/) sign before the tag code (see below). Codes may be typed as upper-case or lower-case or even mixed-case.
3. The most basic web page will have eight HTML tags (or, four basic tags both "turned-on" and "turned-off"). These commands are for basic "page definition" only (as opposed to page content). They are (in order):
   1. <HTML> (at the very top, to define an 'HTML-page')
   2. <HEAD> (turns on the page "header"; this is what will appear at the very top of your browser screen (above the 'File', 'Edit' and 'View' prompts, etc.)
   3. <TITLE> (this enables the 'header' text to be shown. You need to enter the text ...)
      Example: <TITLE> This is My Home Page </TITLE>
      The above demonstrated how to 'turn on' and 'turn off' a 'Title' which would appear in the 'Header' of a web page with the text "This is My Home Page".
   4. </HEAD> is next. This "turns off" the "Head" tag you turned on in "B" above.
   5. <BODY> (turns on the "Body" of the text, i.e. all of the actual content (text, graphics, etc.) you will put there)
      • If you want to change the page background color from the default grey to something else, do that as an extension of the "Body" tag, by putting for example:
        <BODY BGCOLOR="#FFFFFF"> (this would be plain-white).
        Other examples would be <BODY BGCOLOR="#ffe4e1"> (this is pink) or
        <BODY BGCOLOR="#2900ff"> (this is light blue)
        See the Project Cool interactive color chart for more color examples.
        You can also set many colors with their names, e.g.
        <BODY BGCOLOR=PINK> or <BODY BGCOLOR=BEIGE>.
      • If you want to use a graphics background file instead of a plain color, you would also use the "Body" tag to define this, as follows:
      • <BODY BACKGROUND="cloud.gif"> (this would use a "gif" image called "cloud.gif" as your page background). For this command to work you would need to have the "cloud.gif" file in the same directory as the web page you are using it with (for example, in the same public_html directory in which you are probably working). NB: If you have created a subdirectory called "images" for your graphical images, then the pathname would probably be <BODY BACKGROUND="images/cloud.gif">
   6. </BODY> and </HTML> are the two that remain. These "turn off" the "Body" and "HTML" commands (E and A above). Put these two tags at the very end of your web page.
   7. All these tags (plus a few more) have been used in the Template for Student Web Papers that you may wish to use as the "frame" for putting your own paper(s) on-line, or consult as further examples of html coding.
4. That's it! Of course you'll want some content (body) for your page as well, and this will require a few more tags.
   The basic tags for the content of your page are introduced below.

Step Three: Adding Content (usually text and graphics) to Your Page — (Top)

1. See the default Kielo web page or Model Paper Template files for examples of HTML commands you may wish to use. These would include:
   • the <CENTER> command to Center text, followed by </CENTER> to turn it off.
   • the <P> command to indicate a new paragraph, (optionally) followed by a </P> command at the end of the paragraph (this is one of the few commands that does NOT need to be turned off -- putting a new <P> command will automatically start a new paragraph even if you haven't "turned off" the one before).
   • the <BR> command to put a line "Break" (move down to the next line before the end of a line, or else just to add space to your layout). This does NOT need to be 'turned off'.
   • the <OL> command to start an "ordered list" (with the list items indicated by numbers or letters, as you choose), followed by a </OL> command to turn it off.
   • the <UL> command to start an "UNordered list" (with list items indicated by dots or squares, rather than numbers or letters), followed by the </UL> command to turn it off.
   • the <BLOCKQUOTE> command (which moves both the left and right margins of the text in by 5 spaces each), which is turned off with the </BLOCKQUOTE> command.
   • the <HR> command to put a 'horizontal rule' (separator line) across the entire page. Note that this is another command that does NOT need to be "turned off".
   • a modified <HR> command, such as <HR width=50%> command would be used for a line only halfway (50%) across the page. In this case you may want to CENTER the line as <CENTER><HR width=50%></CENTER>, and perhaps use <P> and/or <BR> commands for extra space above and below, depending on your taste in layout. You may also increase the size and color of your HR tag, such as <HR SIZE=5 COLOR=RED>. Experiment with different attribute options for different appearances.
2. And others as described further in the reference guides.

Step Four: Adding Images to Your Page — (Top)

1. This section describes how to add images to the content area of your page. How to use an image as the background for your entire page is covered above in the last part of point 3-E in Step Two.
2. Images files usually end with the extensions .gif (prounced "jiff") or .jpg (pronounced "jay-peg"). Gif files are usually smaller in size and less detailed in the number of colors and their intensity. Animated images are always gif files. jpg files can include much more colors and detail, and are thus usually much larger in size. Digital photos, artistic designs and high-resolution maps are usually jpg images.
3. You may create your own images, for example by taking photographs with digital cameras or camera-equipped cell phones, by scanning photos, charts, tables, etc. (in which case the source and other credits for the images must be attributed), or with other image-creation software. You may also capture images from the web, if there is no copyright or other restriction on your using them.
4. To capture web images, simply place your mouse cursor over an image (or page background) and right-click. This will bring up a menu. Select "save image as" (or "save background as" if it is a background image). You will then be prompted for the filename and directory or other location to which you wish to download the file. Confirm this information and the file will be downloaded to your micro. From there you are ready to code it into your web page(s), and then subsequently upload both the page(s) and image(s) to your web directory on Kielo.
5. To upload images from your own computer to Kielo, regardless of whether they are in gif or jpg format, either WinSCP, Tectia SSH or equivalent secure file transfer software must be used. Note that images cannot be copied and pasted to Kielo (differently from how text files may be copied from Notepad or Notetab on your computer into Pico on Kielo, for example). Images must be in your public_html folder(s), either in your default 'home' folder or in a separate 'images' folder you may have created, as your prefer.
6. Images are placed on your page using the <img src="file.name"> HTML coding (for example <img src="mydog.jpg">) or <img src="path/file.name">, depending on whether the both your web page and the image are in the same directory, or the image is in a separate 'images' directory, respectively. In the subtitle for Step Four (above) a small animated image of a rotating red-and-blue ball has been placed on the left margin before the text. The name of this image is bluered.gif. It is located in the "images" subdirectory of the "PK5" main web directory. Therefore the tag sequence used to put the image on this page was <img src="images/bluered.gif">. This translates to display an image (the filename), which can be found at the following source (with the "source" in this case being the subdirectory "images" and the filename "bluered.gif").
7. Note that the "path/filename" sequence always needs to be inside quotation marks.
8. If your image is in the same web directory as the page which is using the image then the tag would be simpler. In the above example, if the bluered.gif image had been in the same web directory as this makepage.html document, then the tag sequence would have been simply <img src="bluered.gif">. However, if you might eventually have several web pages which may end up using quite a number of total images, then it will be easier to keep track of your various files by having separate directories for the documents and the images.
9. If you used the "view document source" tool to examine the coding of this page, you will have seen that the size-attribute was used in the tag for the bluered.gif image, e.g. "<img src="images/bluered.gif" height=12 width=12>. Putting the image height and width in the tag will help larger files load more quickly. You can also re-size images by using a proportionally smaller height and width. In this case, the bluered.gif file was 12x12 pixels. If I had wanted to file to display at half its original size, I could have put in width=6 height=6 instead of 12x12. This may be useful if you have a large graphics image that you want to use, but also want it to load more quickly and fit into a smaller space on your page (see the table at the top of this page for an example of re-sizing the 32x32 blu-ball.gif image down to size 16x16).
10. Some web browsers will show image sizes at the bottom of the screen when your cursor is over them. However, an easier way to work with images is to get the free graphics software IrfanView available free of charge from www.irfanview.com).
11. Other attributes can also be used in the image tag, for example border=on or border=3 or align=right, etc. Experiment!
12. For precise positioning of graphics files on your page (or for creating parallel columns of text, etc.) you should probably use Table coding. See the coding for the "contents" table at the top of this page as an example.

Step Five: Linking to Other Parts of the Same Page — (Top)

1. You may sometimes wish to link to other locations or references within a single page. This is done by using internal hyperlinks, which consist of two parts.
2. First, you need to "name" the location to which you wish to link. This is done by using the
   <a name="location">    </a> tag (where "location" is the "name" you wish to use for your internal link.
3. Then, after you've named what you wish to link to, you put in the internal hyperlink that a user would click to go there. This would be done for the above example with the <a href="#location"> [click here to go to "location"] </a> tag sequence. Look at all the section headings for this page (via View Document Source) to see how the section numbers have been "named" and are followed by internal links back to the "Top" of the page; the Table at the top of the page has examples of internal links to the various Section Numbers.
4. Note that the "name" tag in #2 above does not have a text or other element between the opening and ending of the hyperlink sequence. The <a name="location">    </a> sequence has only empty space (underlined here) between the opening and ending of the "name" tagging. However, while it does not need a text identification, it can include a text or other element, for example the title of a section heading, a term you are referring to, a "horizontal rule (line) just above the section you want to go to, etc..
5. But, the internal hyperlink to the "named" location does need to have a text (or image) in order to identify that there is a link there which leads to something.
6. It is also often useful to know this tagging procedure when you are citing other web documents (PK6), if the section of the document you are citing has used internal links. In your endnotes or bibliography, do you intend to link to the top of the document or to a specific section of the document that you had "clicked on" via that document's internal links? Understanding the URL will tell you exactly where your own link will lead to. If the URL you use has an "#" sign in it, it will go to an internal document link, not to the top of the document itself.

Step Six: Linking to Other Pages in Your Home Web Directory — (Top)

1. If you are going to put more than just basic personal information into your web directory, you should use separate web pages for each separate type of information.
2. Edit these pages the same way you did for your index.html page. They will need to have different names (almost anything that isn't index.html). You can create new pages on-line using PICO, or else you can create them on your micro and upload them to Kielo using WinSCP.
   1. Depending on which of these methods you use, there may be an additional step.
   2. If you create additional pages directly on Kielo using PICO, then you will also need to change the file protection of all such new files to "public" (after you have created them) so your web browser will be able to "find" them. If you've created a second file called "two.html", then type the command chmod 644 two.html (then "Enter"). That's all there is to it. Now your browser will find the file.
   3. If you create the page on your micro and upload it to Kielo using WinSCP, you do NOT have to change the UNIX file protection manually, since WinSCPdoes this for you. See the WinSCP setup file for further information on this point.
      • The same principle applies if you create subdirectories for your (growing...!) personal website. If you create these using the WinSCP MkDir command, WinSCPwill change the directory protection coding to "public" for you. For example,you could use FTP to create a "PAPERS" subdirectory in which to place your on-line papers. (The new PAPERS subdirectory would then appear in your URL as www.uta.fi/~tunnus/PAPERS/filename.html).
      • However, if you created an "images" subdirectory in which to store graphics files (images) manually with PICO by using the mkdir images command, you would need to change the protection yourself with the command chmod 755 images.
3. Linking from your index.html page to additional pages in your public_html directory is easy. Use the following command (assuming the name of the second file is two.html):
   • <a href="two.html"> Click here to see my second page!</a>
   • This command puts a link in your index.html page with the text "Click here to see my second page!" (underlined, as a hotlink) to direct people to your second page.
   • Remember to put a link in your second page back to your first page (or wherever you want readers to go), for example with <a href="index.html"> Back to my home page! </a>
4. Remember when creating new filenames and links that text case is important on a UNIX system. Files called new.html or New.html or NEW.html will appear to UNIX (and a browser) as completely different files. With UNIX it is preferable to use lower-case all the time, or — if you are creating subdirectories — to use upper-case for DIRECTORY names and lower-case for file names to help keep the two separate. (In the example above on the "images" subdirectory, lower-case has been used since visitors to your website would never go to the "images" directory and it would never show up in a URL; it is an "administrative" directory for the storage of graphics files used by your regular web pages).

Step Seven: Linking to Files and Images in Other Directories — (Top)

1. Most of the above examples of how to hyperlink to other files or images have referred to files which are in the same web directory, for example your "home" public_html directory which was created by the luokotisivu command. For such same-directory links from one page to the next, the hyperlink tag is a simple <a href="nextpage.html">.
2. If you are linking to a page in someone else's web directory on Kielo, or to another website altogether, you should use an explicit hyperlink, such as <a href="http://www.tucows.fi"> (this would link to the TuCows (Finland) website)>.
3. If you are linking to other directories in your own website (if and after you have created them), you may also used "relative" links. Examples of this have already been given above for linking to image files which have been stored in a separate "images" subdirectory.
4. However, what if you have several document subdirectories which all use image files that have been stored in the central images subdirectory? Let's say that from your "home" (public_html) web directory you had created an "images" subdirectory plus a "PAPERS" subdirectory which was further divided by the respective "classes" for which you had written the papers. Such a structure might look like this:

            public_html (your home directory)
            public_html/images (subdirectory for image files)
            public_html/PAPERS (subdirectory for 'general' papers)
            public_html/PAPERS/PK5 (subdirectory for PK5 papers)
            public_html/PAPERS/USA-1 (subdirectory for USA-1 papers)
            (etc)

5. Let's say that all of your papers will use the same "background" image file, which is called sky.jpg and is stored in the "images" subdirectory. How can we use "relative links" to access that file from the PAPERS subdirectory and the PAPERS/PK5 subdirectory?
6. In both cases, the pathname for the <img src> tag first has to tell the browser where exactly to find the sky.jpg file. For a page in the PAPERS subdirectory it must go back one directory level to your "public_html" home directory, and then go forward from there to the "images" subdirectory. For a page in the PAPERS/PK5 subdirectory it must go back two directory levels and then again forward to the "images" subdirectory. The relative links for these would be:
   • <img src="../images/sky.jpg"> (for a paper in the PAPERS subdirectory)
   • <img src="../../images/sky.jpg"> (for a paper in the PAPERS/PK5 subdirectory)
7. In UNIX, the "../images/sky.jpg" command tells the browser to go back one directory level ("../" is UnixSpeak for going back one directory level) and then from the directory where the browser finds itself after going back one level (public_html in this example) to go forward to the "images" subdirectory and use the "sky.jpg" file. The "../../" sequence tells the browser to go back TWO directory levels and then look for the "images" subdirectory.
8. Why should one know this?
   • Within your own web directory and subdirectories, using relative links will result in shorter hyperlinks, and also enables the use of "standard" links in page templates
   • When looking at the html coding in other web pages, a knowledge of the structure of relative links helps you understand how internal hyperlinks have been coded, for example in case you wish to include all or part of other pages as quotations or citations in papers you are writing, and need to modify the html coding of the original page in order for all the elements to display.

Step Eight: Linking Another Filename So It Will Display as "index.html" — (Top)

1. In the above examples, index.html has been used as the filename for your "main" page, since this is the filename that the luokotisivu command creates. However, "index.html" does not have to be the filename for your main page.
2. Web structure is such that within each web directory or subdirectory, if you give a browser a URL such as <www.uta.fi/~hopkins> (without specifying a filename), it will automatically look for a starting file in that directory which has the name index.html or home.html or default.html.
3. What if I created a new subdirectory called "PERSONAL" and wanted my default file to be john.html instead of index.html? In this case I could create a file named john.html and then use the UNIX command ln -s john.html index.html (return!). This would "link" the john.html file with the index.html filename, or in other words tell the browser that whenever it looks for the default "index.html" file in that subdirectory it will instead display "john.html". Thus, whenever someone would go to the URL <www.uta.fi/~hopkins/PERSONAL> then the "index.html" default file that the browser starts with would actually be the "john.html" file.
4. This is particularly useful to do if you have a number of subdirectories in your website and do not want to have the same "index.html" filename for each of these subdirectories (after a very short time all the different "index.html" files would be difficult to distinguish from each other).