UberPages :: Tutorials :: HTML Tutorials :: Basic HTML Tags

Quick Menu

Hopefully you've checked out this tutorial before you decide to read on.

Get your old page ready, it's time to add some stuff. In this tutorial were going to go over how to align text, work with tables, add background colors and a few other cool things.

<html>
<head>
<title>My Webpage</title>
</head>
<body>
Hello World!
</body>
</html>

Let's mess with that text first: Notice how it's just there own it's own. Pretty plain, huh?

We can make this text, and ANY other text look different by just adding tags around it, here are some common ones:

<strong>Hello World!</strong>

Wrapping this around the text will make it bold.

<em>Hello World!</em>

Wrapping this around the text will make it italic.

Moving the text around is just as easy:

<p align="right">Hello World!</p>

Makes text go to the right!

<p align="center">Hello World!</p>

Makes text go to the center!

Note: Notice the <p></p> tag? That denotes a paragraph. If you keep those around your paragraphs, everything will be nicely spaced away from other paragraphs. In this case, we are just telling whatever is in this <p> tag to move to the center or the right of the page.

Next up we have font colors:

<font color="red">Hello World!</font>

Use the font tag with the color attribute set to red.

<font color="#FF0000">Hello World!</font>

Use the font tag with the color attribute set to #FF0000. (Hexadecimal for red)

Here are just some of the colors you can use.

Next up are Ordered Lists and Unordered Lists.

An Ordered List and an Unordered List are almost both the same in terms of writing them out in HTML, but they end up looking different. Try adding this in the body tag of your page:

<p>Ordered List</p>
<ol>
<li>Ordered List Item One</li>
<li>Ordered List Item Two</li>
<li>Ordered List Item Three</li>
<li>Ordered List Item Four</li>
</ol>

<p>Unordered List</p>
<ul>
<li>Unordered List Item One</li>
<li>Unordered List Item Two</li>
<li>Unordered List Item Three</li>
<li>Unordered List Item Four</li>
</ul>

Save your page and check it out with your browser. Simple, huh? One list is numbered and one is not.

Either make it Ordered with an <OL></OL> or unordered with a <UL></UL>, then make List Items with <LI></LI>.

You can even make lists INSIDE of lists. Just toss in another list instead of a list item, give this a try.

<p>Unordered List</p>
<ul>
<li>Unordered List Item One</li>
<li>Unordered List Item Two</li>
<ol>
<li>Ordered List Item One</li>
<li>Ordered List Item Two</li>
</ol>
<li>Unordered List Item Three</li>
<li>Unordered List Item Four</li>
</ul>

Save your page and check it out in the browser. You can make lists as large and complex as you want or need to.

What's a basic list without some miscellaneous tags?

Need a simple divider line to go across your page? Try out some of these, Horizontal Rule:

<hr>
<hr size="1">
<hr size="1" width="50%">

This is one of some few tags that don't need to be closed. Here's another, the Break. It's just like pressing enter in a word processor, it adds a line.

<br>

Ever notice how all the stuff by default is pushed inwards from the top and left, kind of like an actual page margin. If you want your page content pushed flush with the top and left of the browser window all you need to do is add a few attributes to the <BODY></BODY> tag.

<html>
<head>
<title>My Webpage</title>
</head>
<body leftmargin="0" topmargin="0">
Hello World!
</body>
</html>

It's that simple. Remember, if you see something you like on the web, just check out the source and learn something. :)










Affiliates and Uber Linkage