This website has been created with four html files and 1 css file. The four html files are index.html, past.html, future.html and comments.html. The text and rough layout for each page are put into those files. The css file called websystems.css helps to futher position and format the pages. This is done with different classes which is outlined in the class explaination section below. The html pages interact with each other by linking to each other which you can see in the navigation bar.
The first thing I created when making the website was the navigation bar. This enabled me to more easily check how my html was working, as then within the website itself I can reload the page and jump between different pages to examine changes. This code was copied onto all four of the webpages and left unchanged between them in order to make a more seamless user experience. This way the navigation bar is static between all differnet pages including when scrolling down on the page. It is a persistent element that allows the user to always change to another page whever they wish. The spacing of the naviagtion bar took some trial and error to try and get the padding correct. This was initially set as a hard pixel size but that meant that when the page was viewed with different screen sizes it would be messed up. Instead, it is now set with 25% width so it will automatically wrap no matter the screen or window size.
| Class | What | Effect |
|---|---|---|
| Navigation | This class is the section in the top right that connects the different webpages | This class is used to colour the text and box that the navigation bar sits in. This ensures it is easy to read and noticble for first time users. One of the more difficult aspects of this class was the location. Making sure it was in the same place was difficult. This was acheived with the fixed position in the css and fixed to the top right. |
| H1 | Main header text | This class was used the change the font, size and colour of the header. |
| Body | This is the default class where all other elements fit into. | This is the default so any text that doesnt have its own unique tag gets affected by this css. |
| H5 | This is the sub headers on this page | These subheaders help break up this more information heavy section with clear subheadings so that users can quickly go to the elemnt they wish to read. |
| Table | This table you're reading | This class was used in conjunction with th,tr and td classes to create and affect the different elements of this table. The table headings are set up to easily show the content and are coloured different from the background table colour to help them be more noticeable. |
| Footer | This is the small strip at the bottom | This class affects the colour and text at the bottom of the screen. A fake email and uts copyright were added for realism. |
The colour choice for the webiste went through many iterations. Initally it was very bright colours but that didn't contrast well so it was very hard to read the text. I decided to choose a darkmode theme for the website in order to save peoples retinas if they opened it late at night and reduce eye strain. After some experimentation I found the dark blue background with the white text suited my criteria perrfectly. This made the text much more legible and easier to read as it contrasts well from the dark background.
Testing was performed to check the robustness of the webpages. It was tested on chrome, firefox and OpraGX. On firefox it was tested with css turned off. The webpage is still usable however obviously it is a rather poor experience. Different window sizes were tested as well which initially caused issues as my padding was set with pixels rather than proportionally. This was then changed to use a percentage for the padding and widths which allowed the websites elements to wrap porportionally to screen or window size.