Code2Design.com

User login

Programming

The Layout

Navigation

Popular content

Resources

Who's online

There are currently 0 users and 3 guests online.

HTML Lesson 5 - Random Tags

Watch the Movie of Lesson 5

Now I want to show you a bunch of random tags that will help you to markup your code certain ways. After all, who wants boring text??

Bolding
You can bold your text by using the "<b>" tag. Bold is great for placing emphasis on something - but please don't go over board like some people. Every other word does NOT need to be emphasized!

<html>
<body>
<!-- Bold the word "awesome" -->
<p>This is an <b>awesome</b> site!</p>
</body>
</html>

Underlining
Every now and then bolding something just doesn't work, so you can underline it! Which is perfect for pointing out something specific in a quote or other text. To underline something use the "<u>" tag.

<html>
<body>
<!-- Underline the word "awesome" -->
<p>This is an <u>awesome</u> site!</p>
</body>
</html>

Italicizing
You can Italicize text with the "<i>" tag. Usually, you would use this to add a small but noticeable amount of emphasis on something.

<html>
<body>
<!-- Underline the word "very" -->
<p>This is an <i>very</i> cool site!</p>
</body>
</html>

Strike
You can strike text with the "<strike>" tag. Usually, you would use this to show that something has been changed or updated from an old to a new version. It is for when you don't want something to be read but at the same time you can't deleted it because of reference purposes...

Download v1.9
Download v2.0
Download v 2.1

<html>
<body>
<strike>Download v1.9</strike>
<strike>Download v2.0</strike>
Download v 2.1
</body>
</html>

Blockqoute
You can create blockquotes with the "<blockqoute>" tag. The blockqoute is for indenting something on both sides. While the <p> tag surrounds paragraphs it just lets them file the whole width of the page. <blockqoute> indents the text so that there is space between the left an right side of the page and the text.

This is a bunch of text and other stuff, or wait, no it is all just text. This is a bunch of text and other stuff, or wait, no it is all just text. This is a bunch of text and other stuff, or wait, no it is all just text.

<html>
<body>
<blockquote>
This is a bunch of text and other stuff, or wait, no it is all just text. This is a bunch of text and other stuff, or wait, no it is all just text. This is a bunch of text and other stuff, or wait, no it is all just text.
</blockquote>
</body>
</html>

You can also put blockqoutes inside of other blockqoutes to indent further:

This is a bunch of text and other stuff, or wait, no it is all just text. This is a bunch of text and other stuff, or wait, no it is all just text. This is a bunch of text and other stuff, or wait, no it is all just text.

<html>
<body>
<blockquote>
<blockquote>
<blockquote>
This is a bunch of text and other stuff, or wait, no it is all just text. This is a bunch of text and other stuff, or wait, no it is all just text. This is a bunch of text and other stuff, or wait, no it is all just text.
</blockquote>
</blockquote>
</blockquote>
</body>
</html>

Unordered Lists
Unordered lists are handy when you have a bunch of items in the same group. Like the features of a product:

    Supper Product

  • Feature 1!
  • Feature 2!
  • Feature 3!
  • Feature 4!
  • Feature 5!
  • And More!

<html>
<body>
<ul>
<b>Supper Product</b>
<li>Feature 1!</li>
<li>Feature 2!</li>
<li>Feature 3!</li>
<li>Feature 4!</li>
<li>Feature 5!</li>
<li>And More!</li>
</ul>
</body>
</html>

You can also swap the <ul> with <ol> to make an ORDERED list, which uses numbers instead of dots.

Horizontal Rule
A horizontal rule is like a <br> with a line through it. It is useful for separating content with a line. It also makes anything after it skip to the next line like a <br>.

<html>
<body>
<!-- Makes a line across the page -->
<hr>
</body>
</html>

Other Tags
Other common tags include:

<code>For showing HTML Code instead of processing it&lt;/code>
<q>Quote</q>
<small>Make Small</small>
<sub>Push Down (For something like the "2" in "H20")</sub>
<sup>Push Up (For something like the "th" in "5th")</sup>
<pre>Pre-Formatted - Text you already added returns, spaces, etc.</pre>

Now these are not all of the HTML tags, however, they are some of the most used. That is why I am showing them to you. The rest of the tags are either unimportant (to the average user) or will be covered in future lessons. If you still want to learn them I recommend that you do a search on google for HTML Tags.


Submitted by David on November 29, 2006 - 12:00am.
printer friendly version

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <br> <br /> <h3>
  • Lines and paragraphs break automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • You can use BBCode tags in the text, URLs will be automatically converted to links
More information about formatting options



Like what you see?

Why not add more? C2D is looking for other Christian Web Masters who would like to help write articles for this site. If you have expericance in FLASH, CSS/HTML, PHP/MySQL, PhotoShop/GIMP, Blender, Javascript, or just General Design - our users would love to hear what you have to say. Contact Us

delicious   digg   reddit   magnoliacom   newsvine   furl   google   yahoo   technorati