Practice 1 - HTML Tutorials

Free HTML Tutorials • CSS • Frames Tutorials • Forms Tutorials • Beginners HTML Tutorials • Advanced HTML Tutorials • JavaScripts • Free Web Page Tutorials • Free Downloads

	Beginners Section
SUMMARY & PRACTICE

SUMMARY OF BEGINNERS' SECTION

This is a very brief summary of what we have learned so far. You should now know how to:

Use a text editor
Open & close a new HTML page
Use lots of tags
Change colours and backgrounds
Create lists
Add images
Use links & email.

You now have enough information to -

CREATE A PAGE

Now let's put it all together and create a "real" web page. Further down this page you will find a link so you can have a look at it.

Our page will be called - Lee's Home Page

First, create a new web page as described in Getting Started (click to review). Call it "mypage2.html" or whatever suits you, when you save it. Also create a sub folder and call it "pix" (without the quotes) if you haven't already done so.

The images for this practice session are snake.gif, bggreen.jpg and 2pixgrn.gif. You will find them in this zip file HERE. Right click on the file, select "Save target as.." or similar, save, then unzip in your images folder.

You will need to have WinZip installed so to obtain a copy of WinZip, click this link, WinZip (http://www.winzip.com).

All the code you need is in blue. Highlight and copy (Ctrl+C) the following HTML code, from the first line, <HTML> to the last line, </HTML>. Paste (Ctrl+V) it into your new page then check to make sure it works in your browser.

You may find you will need to play around with it a bit to make it look the same as the example, all good practice!. Then start changing things - try different fonts, images, etc - all part of the learning process.

<CENTER>
<H2> WELCOME TO </H2>

<H1> LEE'S HOME PAGE </H1>
</CENTER>

<HR>

 This is my first web page. I'll try out a few of the things I've learned so far.

First the background. This goes in the BODY tag. It is "bg01.jpg". (I also have a background colour in the body tag.)

I'll put a picture of something in the centre of the page next. How about this cool snake.

<CENTER>
<IMG SRC="images/snake.gif" WIDTH=55 HEIGHT=54 ALT="paint.gif" BORDER=0>
</CENTER>

 I can easily change my font colours to green or to blue.


To make this sentence really stand out I can do it red and BOLD, then change to ITALICS. 

<UL>

<UL>I used that UL tag to indent this sentence.</UL>

I could even change the font size and type face! 

I'd better put in my email address so my friends can contact me. I'll centre this line and the email contact too.

<CENTER>
<A HREF="mailto: lee@myisp.com "> Contact Lee here. </A></CENTER>

Here's a handy link for searching the web:

<CENTER>
<A HREF="http://www.google.com/"> Google</A>
</CENTER>

Now I can just click to go straight there!

So far I have put in a graphic, my email address, a link, changed the link colours and put in a background image and a background colour.

That's a good start so now I'll go on to the Intermediate section. My next page should look even better after that.

To finish it off I'll put a line under all this. 

<HR>

</BODY>
</HTML>

To see how this should look, let's go and look at Lee's Home Page. Click the link at the bottom of that page to return here.

If your page doesn't look like something like this when you've made changes, check your code, line by line.

It may be something as simple as a missed " , < or > .

If you get really stuck, use the Help form to contact me.

Now that you have mastered the basics we can now move on to more interesting stuff in the Intermediate section.

Next: Intermediate Index

Beginners Index