Now you can work your way through the template, adding to the code when instructed. The hints below will help you fill in the gaps.
- To import a picture use the img src="yourimage.jpeg"
tag, inserting the image URL between the speech marks. If you want to insert a picture from your computer simply save the image as a jpeg file and then reference it within your image tags. To give an object or image an id simply type within the opening tag before the src; id="OBJECT NAME".
<img id="background" src="IMAGE URL">
- Resize and position your images using the style tags at the beginning of the code. Place the ball at the position you decided earlier. Place the goalie in the middle of the goal and place the goal in the middle of the board. Refer the code to a particular object by calling its id.
#background{
position:absolute; //make every object have absolute positioning
width:...; //make these the same width and height as the board div.
height:...;
top:...; //distance from the top, in px
left:...; //distance from the left, in px
}
- Create a scoreboard in the top left hand corner of the board, writing the visible words where instructed.
- Next write the rules. You must write a title using the 'h' tags, an introductory paragraph using the 'p' tags. This must include all the languages that you used to create the game and what the game does. Finally you must put these rules into an unordered list, using 'ul' tags.
Edit the text however you would like using different fonts and colours to make your page look different.
And that's it!! Test it out and see how it works. The main reason for testing is to see were you need to make changes e.g. is the title font too big? Should I move the ball a bit? Have a play around and see what difference your alterations make...
(Bcakground picture Source from: http://disney.wikia.com/wiki/File:Baymax_commercial.png)