Basic HTML Codes - Tips, Tricks, Troubleshooting, and How To's.
88
HTML [Hyper Text Markup Language] makes things look the way they do on the Internet. Once you've got the hang of a few basic codes, you open up a whole new world of Internet design and browsing. However, memorising these codes and learning how to implement them proves testing for some. Therefore I've published this quick-start guide on getting to know HTML.
You can even type the codes into NotePad as we go and see the finished product at the end - your very first page created with HTML!
Backgrounds
A catching background can make a good and long-lasting impression on a page's reader, as long it doesn't clash with anything else or make the text hard to read. However, no special knowledge is needed for this - its all common sense ;)
Adding 'bgcolour' to your <body> tag creates just these effects. We'll use a white background, and to do this, we'll use the code:
<body bgcolour="#FFFFFF">
Please note that everything to be displayed is to go between the <body> and </body> tags. Anything outsisde these are a little more advanced, but a great link is included at the bottom to explain it.
Fonts
One of the first things most new HTML coders want to be able to do is change their font. A <font> tag allows you to do this. This is a versatile tag with attributes that can be used interchangeably to give different effects. For example:
<font colour="#000000" face="Tahoma" size="18pt">This text is black, size 18 and has a font of Tahoma.</font>
Any values between the speech marks can be changed to relfect what you want, but only the text between the <font> and </font> tags will be affected. Luckily any amount of text can be put in between the two - even a whole article!
Links
I'm sure everyone here on HubPages knows what value a link carries. And its fairly easy to make them. This simple code creates a link to my HubPages profile:
<a href="http://www.hubpages.com/profile/apae">Apae</a>
Similar to the font tags above, only the text between the <a> and </a> tags will be linked and the URL can be changed to any you'd like. Always remember to close your tags, or the rest of your article could be linked.
Images
To display an image on the internet, it must first be uploaded. Any free site such as Photobucket or ImageShack can be used to do this. I prefer to use the latter.
After you've uploaded the image you can copy the URL provided and paste in between the speech marks of the following code:
<img src="http://hubpages.com/u/135254_200.jpg" >
That's it! Your image should display for you.
DIV Elements
These are my favourite parts of HTML coding, simply because they are so versatile. Honestly, DIV elements are what make coding a joy - I don't know what I'd do without them. They can have their size, border, background colour, and content changed at any time, and posess the ability to overlap each other or be arranged in a table. Basically, they just hold slabs of content. And I love them.
<div>Hello DIV!</div>
This one just contains text, but anything can be used - such as images and links.
Tables
Just as on your computer, tables organise information on the internet too. This data can be alphanumerical values, images, links, or even DIV elements. Here's the code for a basic table:
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
I know that looks like a jumbled mess, so here's an explanation. The <table> and </table> tags define what goes into the table, while the <tr> and </tr> tags define what goes into each row of the table. As shown, more than one row can be used. And finally, whatever is between the <td> and </td> tags is what gets displayed. Once again, this can be images, text, links, anything at all.
Centering
Not only does centering provide an interesting effect, but can neaten up presentations and create aesthetic in any web page. It is, therefore, an indispensable tool - and easily learnt to.
Its as simple as adding <center> and </center> tags around whatever you want to be centred. You can do it to text, images, tables and links. The only drawback of using it with tables is that it will only center the actual thing - to center the content of the actual cells, you'll need to add the <center> and </center> tags between the <td> and </td> tags.
Bold, Italics and Underline
These are other tools that can be used to create aesthetic in presentations, accentuate sections of text or just give the reader a break in font. Make sure they're used carefully though to aid your presentation, not hinder it.
To make any text bold, just place <b> and </b> tags around it. It works on links too, but not images or DIV elements. The same goes for italics and underline, using the <i> and </i> tags, as well as <u> and </u> tags respectively.
--
That's really about it for the basics of HTML. Any of the above tags can be played around with to create different, wacky effects. And playing around is the only serious way to get anywhere with HTML. You can read "HTML for Dummies" almost from back to front like I did, but its not until you sit at your computer and put things together that you see how they work.
Another great HTML resource, although for kids, is Lissa Explains. It is down to earth, easy to read, and oh so helpful - on more than just the basics of HTML. I'm no 'kid', but I still use it, simply for its reliability as a source. Aside from that, there's also Funky Chickens. Both these sites are great for troubleshooting HTML.
Share it! — Rate it: up down [flag this hub]
Comments
Looks simple enough, but it's using it that becomes more tricky. Thanks!
If you need any further help, just let me know =]
Nice and easy. Thanks for these tips. My HTML knowledge is pretty non existent.
When I was writing it, it seemed really stupid and complicated in my head. I'm glad you found it helpful =]
When I was writing it, it seemed really stupid and complicated in my head. I'm glad you found it helpful =]
<img src="" > is images..whats videos?
Videos uses the embed tag.
Great hub! Do know of anyway to put html code into our hubpages? Hope its not a silly question! But there was an amazon link to purchase a book I wanted to put on a page and its coded and I don't know how to make it work. Thank you!!!
I have been breaking my head with HTML tutorials and still no where. our explanation is simple. It's already past midnight otherwise i would have been tring it immediately.
Good Hub! Keep it up.
working
MrMarmalade says:
8 months ago
I need thsat information thanks