Creating my presentation
Homepage:
Second page:
Third page:
Fourth page:
Fifth page:
When e-mail link is used:
Annotation
This is the html, which has been taken from one of my web pages, as each of the pages all work on the same basis and therefore have the same template, this will show you how each of the pages work.
<html> This tag states that this file is an html file, it means that when it is viewed over the internet everything inside it will be recognised as html instead of showing all the script.
<TABLE STYLE="position: absolute; top: 0; left: 180;" WIDTH="825" HEIGHT="760" BORDER="0" BGCOLOR="#000000" BORDERCOLOR="#000000"><TD VALIGN="top"> This style tag states that everything inside it is put into a table, the positioning of the table is 180 pixels from the left of the screen, it is 825 pixels in width and is 760 pixels in height. The table has no border (0 pixels), the background colour of the table is #000000, which is the hexidecimal code for black.
<center> This tag states that everything from now on will be aligned to the center.
<marquee behavior="alternate" direction="left" loop="*" scrollamount="4" scrolldelay="1.5"> This tag makes the writing move in a marquee behaviour. It moves from right to left then back to the right and will carry on doing so for as long as the window is open, which is shown by loop=”*” and behaviour=”alternate”, the asterisk stands for infinity. The scrolldelay tells the writing how quickly it should move, in this case not very quickly.
<TABLE STYLE="filter:dropshadow(color=#00CCFF, strength=9)"><TR><TD> This is a different table tag, it states that the writing in it will be of a certain type, it will have a dropshadow and the colour of the writing is #00CCFF, which is a light blue. The strength is how much dropshadow there is.
<H1><u>Games for all!</u></H1></TABLE></marquee> The <H1> states that the writing is a header and is of the biggest size, the <u> means that all writing after it will be underlined. </u>ends the underlining message, all tags which are </…> will end what its corresponding tag is doing. Therefore the </H1></Table> and </marquee> end the heading, the table ends and so does the marquee. If the tags were not closed then everything after it would end up having those attributes.
<br><br> These tags very simply state that there is to be a break in the code, it effectively works as pressing return would in a Word document.
<font face="Palatino Linotype" size="4" color="#00CCFF" > The font face is the style of font used, the size is how large the font should appear to be, the color is simply the colour of the writing.
This page contains information on the games from the top ten list, which have an Elspa of universal. This means that the games shown on this page are
suitable for children and adults of any age. All of this is the writing which is actually seen.
</center> This tag ends the centered writing.
<valign=”left”> This tag states that from now on all writing is to be aligned to the left of the screen.
<hr><br> <hr> states that there is to be a line going through the page.
<H2><u><b>Super Mario Sunshine</u></b></H2><br> <H2> is just a different sized heading, <b></b> means that all the writing in between the two tags will be bold.
<i>Name</i>: Super Mario Sunshine<br> <i> and </i> state that everything inside the two tags will be italic.
<i>Elspa rating</i>: Universal<br>
<i>Console</i>: Gamecube<br>
<i>Genre</i>: 3D Platformer<br>
<i>Price</i>: £34.99<br>
<i>Our Rating</i>: Eight
<IMG SRC="http://gamespot.com/gamespot/images/2002/gamecube/mariosunshine/mariosunshine_boxshot.jpg" STYLE="position: absolute; left: 350; top: 300; z-index: 0;">
<img SRC="http://gamespot.com/gamespot/images/2001/gba/mariokartsupercircuit/mariokartsupercircuit_boxshot.jpg" STYLE="position: absolute; left: 350; top: 590; z-index: 0;"> This tag puts an image onto the web page, the url (in red) is that of the image. Instead of putting the location of the picture from my folder and using the url ensures that the website can be viewed from any computer and the images are still shown. The positioning just states where on the page the image should go.
<hr><br>
<H2><u><b>Mario Kart Super Circuit</u></b></H2>
<br><i>Name</i>: Mario Kart Super ciruit<br>
<i>Elspa rating</i>: Universal<br>
<i>Console</i>: Gameboy Advanced<br>
<i>Genre</i>: Racing<br>
<i>Price</i>: £27.99<br>
<i>Our Rating</i>: Nine
</font>
</TD></TABLE> These tags just close everything up.
<TABLE STYLE="position: absolute; top: 0; left: 0;" WIDTH="180" HEIGHT="760" BORDER="5" BGCOLOR="#00CCFF" BORDERCOLOR="#cccccc"><TD VALIGN="top">
<font face="Palatino Linotype" size="2" color="#000000"> This is another table tag, much like the one that is at the beginning of all this html. This one works
on the same principles, only it is not as wide and starts to the left of the page. It also contains different information, which is all below. This one also has a border around it, I did this so that it looks neater.
<br><br><br>
<b><i>Click on the links below to go to different pages or related
sites.</b></i><br>
<br><br>
<b><u>Games</b></u>
<br><br>
<A HREF="main.html">Home page</A> This tag works as a hyperlink, only the ‘Home page’ part of the html is seen, when it is clicked on the user will be automatically taken back to the homepage. “main.html” is the destination; it is what I have called the file, which is my home page.
<br><br>
<A HREF="page3.html">Elspa rated 3years games</A>
<br><br>
<A HREF="page4.html">Elspa rated 5 and 11years games</A>
<br><br>
<A HREF="page5.html">ELspa rated 15 and 18years games</A>
<br><br><br>
<b><u>Online Stores</b></u>
<br><br>
<A HREF="http://www.gameplay.com/">www.gameplay.com</A>
<br><br>
<A HREF="http://www.gamespot.com/">www.gamespot.com</A> Here is there are yet again hyperlinks. However, instead of taking you somewhere back in the website it will take you to a different site altogether. The address in red is where you will be taken to.
<br><br>
<A HREF="http://www.argos.co.uk/webapp/commerce/command/ExecMacro/ols-home.d2w/report">www.argos.co.uk</A> You must end hyperlinks with </a> otherwise everything after will also work as a hyperlink to in this case the argos website.
<br><br>
<A HREF="http://www.microsoft.com/games/">www.microsoft.com</A>
<br><br><br>
<b><u>E-mail me</u></b>
<br><br>
<a href="mailto:[email protected]?subject=comments">E-mail me with your comments</a> This is also a hyperlink, but it is different in the fact that it does not take you to another web page. Instead it opens up an e-mail box, with the subject as ‘comments’, the e-mail will automatically have my e-mail address in the to: section.
</font></TD></TABLE>
</html>
Everything in purple the writing, which is actually shown on the website, everything in blue is the html used, everything in red are urls and everything in black is the explanation for the html.
I decided to put a bar (table) at the side of every page with the same details inside it, so that it is easy to navigate through the website. The bar allows users to go to any page at any time, it also allows them to e-mail me with comments whenever they want as well as visit a related site.
At first I started out using a frameset for the side bar and the main part of the page. However, this didn’t work out how I wanted it to. When I put a link in the side bar, I wanted for the link to open up in the main page, instead the link would open up in the side bar and the main page would be left as it was.
To create the wording, I used Word Art. I changed the colours of the writing by using fill effects. To get the pictures behind the text, I simply altered their layout to ‘behind text’. I inserted the pictures from a file, which contained them.
I had already created the graph in Excel, which was from the previous modelling assignment. I opened the Excel document then copied the graph and pasted it into the Word document. I then cropped and resized the graph so that it would fit onto the page.
I saved this and all other files that are to do with this assignment in a folder. This was so that it would be easy to find everything. Here is that folder:
