Online Auction Help

Basic HTML - Part 1

So now we have the basic structure of a webpage explained, what should you do now. Below are some of the basic codes that you can add to your webpage to improve the look and feel of it.

Time to put your copy and paste skills to good use.

Adding Basic Text

<p>Insert paragraph</p>	Insert paragraph
<b>BOLD</b>	BOLD
<i>ITALIC</i>	ITALIC
<u>Underlined</u>	Underlined
<strike>STRIKE</strike>	~~STRIKE~~
<b><I>BOLD And Italic</I></b>	*BOLD And Italic*
<sub>Lower Text</sub>	_{Lower Text}
<sup>Higher Text</sup>	^{Higher Text}
<p align=left>LEFT</align>	LEFT
<p align=center>CENTER</align>	CENTER
<p align=right>RIGHT</align>	RIGHT
<br>	Insert new line

Little Tip - move the mouse over a code of html - on the left column in the table above - and click the left mouse button three times. That shall highlight the whole piece of code. If it doesn't work first time move the mouse a little and try again.

Practical Test 1

Copy the text below starting from <html> and ending with </html>

<html>
<head>
This is the heading
 
 
</head>
<body>
This is a paragraph
</body>
</html>

Paste the text into Notepad.

In Notepad click on "File" and "Save As"

Name the document test and ensure you type .html after test - "test.html"

Now go to that html file and open it up.

It may not be the best looking webpage ever created but it still a webpage.

Alternatively you can use this free HTML editor. Ensure you click on HTML so that you can copy and paste HTML code into it then preview it.

Changing Font Colour

<font color=red >RED </font>	RED
<font color=blue >BLUE</font>	BLUE
<font color=green >GREEN</font>	GREEN

Little Tip - Note that it is color and not colour

There are many other colours to choose from but as this is basic HTML I shall just use these three. Take a look at Advanced HTML for more choices.

Changing Font

<font face=arial>Arial font</font >	Arial font
<font face=courier>Courier font</font >	Courier font
<font face=modern>Modern font</font >	Modern font

Click here to see the common fonts used.

Little Tip - HTML is not case sensitive which means you can write the tags in CAPITAL LETTERS if you prefer. You can mix it but that is not good practice and can become confusing.

Changing Font Size

<font size=1>FONT SIZE 1</font >	FONT SIZE 1
<font size=2>FONT SIZE 2</font >	FONT SIZE 2
<font size=3>FONT SIZE 3</font >	FONT SIZE 3
<font size=4>FONT SIZE 4</font >	FONT SIZE 4
<font size=5>FONT SIZE 5</font >	FONT SIZE 5
<font size=6>FONT SIZE 6</font >	FONT SIZE 6
<font size=7>FONT SIZE 7</font >	FONT SIZE 7

Little Tip - For larger text than HTML allows use:

LARGE TEXT

LARGE TEXT

Joining Tags Together

Now things get a little tricky but please bare in mind that you do not need to do this everytime you want to to edit or insert something on your webpage. Once you are more familiar with HTML you shall see that it is a lot easier to copy someone else's code than to make up your own everytime. Also, using a web editor such as FrontPage or Dreamweaver makes life a lot easier.

In the font tag () it is possible to put three tags into one, the font style, size and color.

For example

<font face=courier size=4 color=red>Red Text</font>	Red Text
<font face=arial size=6 color=blue>Large Blue Text</font>	Large Blue Text

You can also include other tags around the font tag to enhance it.

For example

<b><u><font color=orange>Text here</font></u></b>	Text here
<b><i><font size=3 color=green>Text here</font></i></b>	*Text here*

Incidently, this is exactly what I mean about you not having to create you own code from scratch. You can copy the code I have written above and change the 3 key commands to whatever you want.

It is important that you close the tags in the same order as they were opened. In the example above was opened first so must be closed last was the last opened and first to be closed.

Rules

Only tags with the same beginning can be merged together
All < > tags must be closed with the appropriate </ > tag - exccept the tag
The first tags opened are the last ones to be closed

Practical Test 2

Lets go back to the webpage we created earlier. Open up the test.html document in Notepad - right click on the test.html file and then choose "Open With" then "Notepad".

Now, if you are feeling confident, make some changes to the document using some of the HTML examples given above, If you are not feeling so confident copy and past the HTML below into the test.html document.

No short cuts now. Make sure you understand the HTML code. Compare what you see in Notepad and what you see in your browser and make sure you understand what it is doing.

You can replace my text with your own to give it a more personal feel.

<html>
<head>
 This is the heading </align>
</head>
 
 
 
<body>
And this is still the paragraph but starting to look a bit better.
 
 
Still looking a bit plain though. Could do with some brightening up :-(
 
 
Perhaps that shall be covered in the next part?????? :-)
</body>
</html>

LEGAL INFO: eBay® is a registered trademark of eBay®, Inc. eBay®, Inc. is not associated with OnlineAuctionHelp in any way, nor is OnlineAuctionHelp
associated with eBay in any way. All concerns or questions about this website should be directed to this address, and not to eBay. All other trademarks are the property of their respective owners.
Copyright © 2006 All Rights Reserved http://www.OnlineAuctionHelp.co.uk| No part of this website and its content may be reproduced.