Title image

About This Site

This site was originally created for a web assignment at university. It now functions as my own personal website, and has taken off from the Aberystwyth servers, and currently lives on 000webhost's servers. The information below starts with the text I wrote explaining how I started writing the XHTML and CSS and how I tested the site in different browsers. After that, there is information on the more recent updates I have done the site, as I have started to use PHP to help me with many tasks, and provide more functionality.

I enjoyed this assignment, and though it was my first time using any type of web programming language, I was able to pick up XHTML fairly quickly. I enjoyed learning how to code in XHTML, and took some tutorials to help me extend my knowledge of the language. I also looked up tutorials on CSS and JavaScript, to further reinforce my understanding of them. I found JavaScript to be similar in parts to Java programming.

I found the XHTML fairly easy to write, especially once I'd got the hang of divs and classes. One thing I found tricky was getting things where I wanted them on the webpage. I now have everything roughly where it is intended to be, but if I ever made a website again, or extended and added to this site, I might have to think about other ways to position things.

At first I found CSS pretty easy, as I styled the various components on my webpage, and even used the greater than sign to tell the CSS what children of a certain parent I wanted to have which attributes.


General Structure of the Site
Pic of Div layouts

This image illustrates the general layout of my site, each red box representing a different div. I managed to get a basic site structure together fairly early on, with a menu at the side, and a big header at the top (which is now an image). It was only later that I added the nav and bottom divs.

Browsers

I tested my site in a number of different browsers, including:

  • Google Chrome 10.0.648.204
  • Firefox 3.6.13
  • Opera 10.53
  • Internet Explorer 8 and 9
  • Safari 5.0.4

All of these browsers displayed my site perfectly, apart from Safari, which was faultless except on my About page the date and last modified information was slightly misplaced up the page. I have also tested my site on screens from 20" to 10" and an iPhone screen too, and it performs very well on all of them

Pic of site on iPhone screen
Problems

The CSS became a bit difficult and confusing when I wanted different styles on 2 sets of hyperlinks - the top ones had to always have black text to be visible, and the side ones must start as light blue to keep in theme with the rest of the page. I had a fair amount of trouble getting the text on the top links to be black and stay black.

Another problem I encountered was that I wanted the hyperlink buttons along the top to change colour when the user hovers over it. In the end, I asked for a friend's advice, and they reminded me of something I'd previously seen on the internet, where both button backgrounds are drawn in an image file, one above the other. Then when a cursor hovers over the link, the image moves up by say 50 pixels, and leaving the different background behind the link.

I found that comments also proved to be a bit of a problem, sometimes causing unexpected anomalies that were only fixed by removing the comments. As such, I have only commented on the JavaScript to help any readers understand how it works. I especially found comments in the CSS to cause unexpected results in pages. Once removed, everything works normally.


Update

After a few months, I came back to this site to make it better - as before it was very wide and didn't look very professional, as I had made it to be compatible with a large variety of screen sizes. I modified the site to be generally a bit thinner and more dynamic. I started using divs that follow after each other down the page - rather than them all being fixed in position (position:absolute). They now follow each other, and some are set to float left. I had some problems getting things to be in the middle of the page, as divs don't have an "align" attribute now etc. They also don't seem to like to float:centre - as I had a lot of problems making the nav bar at the top central. In the end I had to use a div to the left of it to move it over to the right (called navbuffer).

Picture of updated divs

I am also still looking at a way to give all pages some of the same HTML code, without having to write it multiple times (and then change every page when I change one thing that is common to them all). I may attempt this with PHP.


PHP Update

After starting to learn and get to grips with PHP, I have decided to change my site to use PHP to make it more maintainable and useful. The main thing I wanted to do was to use PHP to pull the same standard bit of (X)HTML, therefore if I wanted to say change or add a link to the menu on the left, I would just change one file, rather than having to change each HTML page.

I managed to do this fairly easily. First I cut out each bit of code that appears on every page, such as the top nav menu, left menu, top image and footer. I put each of these bits of code in their own .php file. I now have to add the php function into the gap in the HTML to retrieve (include) the standard code in the HTML. This is done by the line "< ?php include("standardcodefilename.php"); ?>" (Remove the space before ?php for it to work). This code now includes whatever is in "standardcodefilename.php" into that part of the XHTML code. There is also another PHP function called "require" that works the same way, but if for some reason it cannot retrieve the file, the script will stop completely with a fatal error. With include, if it can't find the file, it will continue and generate an error warning message. I will now start work on a "contact me" form and a page for it.

I found it useful to use a "template" for the webpages - a file with just the basic structure of my page, with all the includes ready. If viewed, this page works fine, but has no content in the main middle part of the page. Now every time I want a new webpage, I can make a copy of the template and just start adding to the main section, and the layout and menus etc are all there ready.


New Web Assignment

I have recently just completed a new web assignment, where I had to create a games site that pulled the game data from an SQL database and displayed it in a useful way to the user. The user then could manipulate this data using SQL queries (linked to buttons) to refine, sort and search the data. They then could add the items they wanted to a basket, and could (pretend to)pay for the desired items using their card. Once the order was complete, the user was sent an email confirming the order had gone through, and showed them what they had ordered with the prices etc. You can find that assignment here.


St John Site

I was recently asked to design and build a new website for the Aberystwyth LINKS First Aid division that I am a part of. I gladly accepted this challenge, and started designing the site immedietly. The site started with a similar structure to what this site used to be (as wide as the users page), but then evolved to be more central and stable, and being able to look good when being viewed on many sizes of screen from 10 to 20 inch. One fairly big change weas the fact that the top nav bar uses colour-changing backgrounds on hover, rather than moving an image 50px up. You can visit the first aid website here.

Pic of sunset