Basic HTML Tags Tutorial

An overview of basic HTML tags that you can use to mark up your submissions (especially if you are using Safari, or any other browser not compatible (yet) with the wysiwyg editor). These basic tags are the essential HTML text formatting codes for the web.

Basic HTML:

<b> <i> <a> <p> <img> <em> <br> <strong> <blockquote> <tt> <li> <ol> <ul>

Most HTML tags have an opening and closing form. Text between the opening and closing tags takes on the format of the code.

<b> Bold text. Closing tag: </b>

<i> Italic text. Closing tag: </i>

<b><i>Makes bold italic type</i></b>

<em> Emphasis, looks the same as italic, but has a slightly different meaning. It is a structure code </em>

<strong>Strong looks the same as bold, it is also a structure code</strong>

<tt> tele-type, fixed width typewriter-like text </tt>

<p> Makes a new paragraph. Paragraphs always have a line space before and after them. </p>

<br> This creates a line-break with no extra space. Any formatting codes carry over to the next line. There is no closing tag.

Creating Links

<a> anchor. This is the tag you use to create a web link.

For example, the code: <a href="http://aecontent.net">AEContent</a> would look like this: AEContent

Now, this looks a little more complicated than it really is:

The first part: <a href=" is always the same.
a (an anchor) href (that references a hypertext document) = (equals) " (open quote, inch mark, not curly quote)

http:// (tells the web browser that the link is absolute, not relative to where the page is. It means "Hypertext Protocol")

The next part is the changing part, this is where you want your link to go. In this case it is: aecontent.net

Next, just close the quote and the tag: "> (it's VERY important that you close the quote and the tag).

Now you need some text that identifies where that tag is linking to.
It can be any text you want. It can also be a copy of the URL if you'd like.

Lets have it say: Visit AEContent

Now we need the closing tag. This is also very important. </a>

Visit AEContent

Linking to Images

The code <img src="images/stories/ArtEd.gif"> calls this image from this site:

Notice that there is no closing tag for an image.

Images can be used as hyperlinks. For example:

<a href="content/category/4/17/49/"><img src="aec/images/stories/ArtEd.gif"></a>

can be broken down like so: <a href="content/category/4/17/49/"> a relative link (to this page, at this site): the Art Education Topics page. The image: <img src="images/stories/ArtEd.gif"> (it is also relative, part of this website). </a> the closing tag.

More often, you would be linking to an image that exists elsewhere, at your school server, for example and would need the use the http:// part of the URL
For example: This code <img src="http://elramsay.com/images/smallcalligraphy.jpg">

Calls an image from my personal website and shows it here at AEC:

Once you've used this code a few times you'll see how most of it is always the same, just the image locations and links change.

Formatting the layout of your text.

<blockquote> Indents text right and left. This code is used when quoting a source </blockquote>
For example:

Educate your children to self-control, to the habit of holding passion and prejudice and evil tendencies subject to an upright and reasoning will, and you have done much to abolish misery from their future and crimes from society.
-- Benjamin Franklin

Ordered lists are numbered lists.

<ol><li>item one <li>item two <li> item three </ol> (notice that you do not type the numbers, the code adds them for you)

1. item one
2. item two
3. item three

Un-numbered lists:

<ul><li>item one <li>item two <li> item three </ul>

• item one
• item two
• item three

That's all you really need to know to make your posts and stories look great!