Creating Your Home Page on Kielo
PK5 Web Page Requirements
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
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
Step Two: Basic HTML Tags
- Log in to your home directory on Kielo
- From the prompt, type luokotisivu and press "Enter"
- 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
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.
- 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).
- 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".
- 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.
- 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
- 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.
- 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).
- 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 Three: Adding Content (usually text and graphics) to
Your Page (Top)
- 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.
- 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
- 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):
- <HTML> (at the very top, to define an 'HTML-page')
- <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.)
- <TITLE> (this enables the 'header' text to be shown.
You need to enter the text ...)
Example: <TITLE> This is My Home Page
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".
- </HEAD> is next. This "turns off" the "Head" tag you
turned on in "B" above.
- <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
<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)
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
- </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.
- 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.
- 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
Step Four: Adding Images to Your Page
- 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,
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 <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.
- And others as described further in the reference guides.
- 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
- 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.
- 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
- 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.
- 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.
- 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").
- Note that the "path/filename" sequence always needs to be inside
- 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.
- 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).
- 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).
- Other attributes can also be used in the image tag, for example
border=on or border=3 or align=right, etc.
- 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
- 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.
- First, you need to "name" the location to which you wish to
link. This is done by using the
</a> tag (where "location" is the "name" you wish
to use for your internal link.
- 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.
- 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..
- 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.
- 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
Step Seven: Linking to Files and Images in Other
- 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.
- 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.
- Depending on which of these methods you use, there may be an
- 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.
- 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
- 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
- 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.
- 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
- 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>
- 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 Eight: Linking Another Filename So It Will Display as
- 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
- 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)>.
- 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.
- 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)
- 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?
- 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
- 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.
- 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.
- 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.
- 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.
- 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
- 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).
PK5 Reference Index
Last Updated 19 September 2011