Monday, September 20, 2010

Making Your webpage - Part II

Simple html commands

HTML, or HyperText Markup Language, is the language used on the web. It is a markup language, which basically means that the structure and appearance of a page can be encoded into a simple text file using tags (text surrounded by angle brackets). These tags may take the form of simple commands such as 'put a hyper link here', or 'put an image here', but can also be used to call scripting languages such as javascript. In this tutorial we shall just go the most basic commands, those for hyper links and images, and general structure of a web page.

Previous example

In the last entry we went through setting up a simple index file for your website. But what did each of the parts mean? Let us look through each line in turn.

  • Line 1: <html> This basically tells the computer that what follows is an HTML file.
  • Line 2: <body> What follows is the main body of the text, i.e. not header or footer.
  • Line 3: <h1> My Webpage Works!!!</h1> Text enclosed inside h1 tags will be displayed as a title, appearing in a font much larger that normal text.
  • Line 5: <p> I can... </p> Text enclosed inside p tags shall denote a paragraph.
  • Line 7: </body> The main body of the text has finished.
  • Line 8: </html> The HTML file has finished. Ignore subsequent text.
Note that every time a <tag> is started, it must be finished with </tag>.

Another Web Page

The 'index.html' page is used as the default page for a website. You can have as many separate webpages as you like inside your website, as long as you can present links to them!

Open a terminal and enter the following:

emacs ~/public_html/anotherpage.html
and copy the HTML code from the index.html file across to this new file. Edit it slightly so that you can tell it is different from the original, then save and exit.

Now reopen the original index.html file. Add the following line within the body of the text:

<a href="anotherpage"> Link to another page </a>

Reload your webpage and the link should appear underlined. Check that it is working.

Upload An Image

Now we may want to include a picture on our website. First we need to get a picture, then we need to place it somewhere that the world wide web can find it. Download a picture off the web, and save it to your hard disk. Locate the file and copy it to the public_html directory. Reopen the original index.html file and add the following line within the body of the text (changing for the appropriate file name, my example is 'dog.jpg')

<img src="dog.jpg" class="picture">
Reload your webpage and the image should appear.

Using Directories

You can also use directories to store files inside your web space. Try making a directory and store the your picture inside it using the terminal.

mkdir ~/public_html/myPictures
mv ~/public_html/dog.jpg ~/public_html/myPictures
Now change the line containing the img tag to now be the path to the file. For my example it would be:
<img src="myPictures/dog.jpg" class="picture">
Reload your webpage and check the image still appears. If you have lot's of directories and files things can get confusing since the src must define the path from your current directory to the directory containing the file. One way to circumvent this is to use the absolute path, much in the same way all of the terminal commands use ~/pathToFile so that they work regardless of your current directory. For my example on my website I would enter:
<img src="http://www.maths.manchester.ac.uk/~pjohnson/myPictures/dog.jpg" class="picture">

Restricting Access

As discussed in the lecture the unix filesystem provides a restrictions on the access of a file. Any file placed inside your public_html directory shall be open for the general public to view by default. The way to restrict access is by changing the file permissions. Try restricting access to the picture that you have created. First, from the terminal, navigate to the directory containing your picture. The commands will look like:

cd
cd public_html
cd myPictures
Then change the rwx access for 'other' users with the command:
chmod o-rwx dog.jpg
Reload your webpage and check the image should not load anymore. You may need to reload the page to refresh the cache. See if you can use the terminal to restore access to the file.

Using Dynamic Links

There may be instances where you want not to copy a file into your webspace, but access a file from somewhere else on your system. Rather than having multiple copies of the same file, we can get round this by using dynamic links (much like shortcuts on windows) to 'point' to a file in a different directory. Say I have a presentation file pres.pdf in the directory /home/pjohnson/presentations/pres.pdf. I want the latest version available on the web, and I will be updating the file regularly so don't want to copy it. I can create a 'link' to the file using the command:

ln -s ~/presentations/pres.pdf ~/public_html/pres.pdf
The '-s' denotes a soft link. This means that because it is not a copy, nor is it a hard link, deleting the link will not delete the original file. Download a presentation off my website and store it on your filesystem. Create a link to the file in your public_html directory and create a hyper reference to the file on your webpage. PDF files can be linked using the code:
<a href="pres.pdf" class="pdf">A Presentation</a>

No comments:

Post a Comment