Website design & development

Content

In your .css file (stylesheet), lets add the following:
click next to "top;" in the td tag and press enter, press tab and type: background:white;
Press enter and tab again, and type: padding:5px;
It should now look like this. If not, copy mine and paste it over yours
body { background-color:green; background-position:center; } a { color: black; text-decoration: none; font-weight: bold; background-color: none; border: none; font-family:comic sans ms; } a:hover { color: white; text-decoration: none; font-weight: bold; background-color: none; border: none; font-family:comic sans ms; } h1 { text-align:center; color:blue; font-family:comic sans ms; } td { vertical-align:text-top; background:white; padding:5px; }

Remember to save each page everytime you go to a different page. Now, go to your .html file again.
Copy your complete table, from opening tag to closing tag and paste it in again just after the closing tag. You should now have two tables just below each other, but won't see anything in your web page yet. In the top table, remove the second collumn (the 30% one) completely and change the 70% to 100% in the first collumn.

Now, create a jpeg image that is 900px X 75 px, or just right click on mine and save it into your root folder (the folder where all your website file are being saved in). Name it banner.jpg Make sure of the spelling and do not use capital letters.

In Your first table, between your first collumn opening and closing tags, type the following:
<img src="banner.jpg" width="100%"/>
That tells the browser that you want to insert an image, where to source it from, and that you want it to display at 100%. Save your file, open up the html file in your browser or refresh it, and see what your image looks like.

Your text will now be added in the second table, at the same place we added your image in the first table. Keep in mind that every paragraph needs to start with an opening tag < p > and end with a closing tag.< /p >

Click in between the opening and closing tags of your first collumn in the second table, press enter and type the following two paragrapghs, see if you can make them look like mine. I start with the header < h1 > opening and closing tags and then move on to paragraphs and line breaks.

If yours looks the same, then GREAT and congratulations. If not, here is the code, compare it to yours and try to fix yours rather than copy and paste mine. Once youve done that, lets move on to Step 6 <h1>This is My Header</h1> <p>Thus far I have learnt how to start my webpage, how to use an external style sheet and how to insert images and tables into my webpage. I can change the colour of my background in my style sheet, or .css document, add headers, paragraphs etc. in my page.</p> <p>Once I have finished with this, I can continue and learn how to do various links on my page, including buttons to go to other pages in my site. Then, we will go back and make it all look good and I will have a nice template to use and I will have something to come back to everytime I cannot remember how it works.</p>