Back to UkMirModeration or UkMirFeatureTutorial

Basic HTML tutorial

This page gives some a very basic quick introduction to HTML for indymedia uk article. Once you are happy with this read the Imc Uk HTML Style guide.

Introducing <tags>

Your article in HTML is just the ordinary text of your article, but with a few special 'tags'. Tags are enclosed in angle brakets < and >. Tags never show up in the text of the webpage, they just give the browser instructions like "this is a paragraph".

Example

What it looks like

The HTML

 <p>This is the first paragraph.<br />This bit is 
forced onto the next line</p>
 <p>This is the second paragraph, and includes a link 
to <a href="http://www.indymedia.org.uk">indymedia uk</a></p>
 <hr />
 <p>This time the all of this is under a line. 
<strong>And this a bit I want to emphasise</strong>.</p>
 <ul>
  <li>First in a list</li>
  <li>Second in a list</li>
 </ul>

The output

This is the first paragraph. This bit is forced onto the next line This is the second paragraph, and includes a link to indymedia uk This time the all of this is under a line. And this a bit I want to emphasise. First in a list Second in a list

The Tags

Paragraphs

A paragraph starts with <p> and finishes with </p>

If the tag has something in it notice it always has an opening tag <p> then the content and then a closing tag </p>

Line Breaks

To force something onto the next line use <br />

As this doesn't contain anything so it just closes itself with the / in the tag. You will see <br> this is correct too, but an older way of doing it.

Links

For this we use the <a> tag. Anything inside the <a> and </a> tags is a link somewhere. But of course, the browser needs more information than that. It needs to know where to link to. So we put some extra info in the <a> tag as follows:

<a href="http://www.indymedia.org">This</a> is a link to Indymedia.

Which comes out as: This is a link to Indymedia.

The word 'This' is now a link, straight to the global IMC site http://www.indymedia.org. The bit of the tag that says href="http://www.indymedia.org" is just telling the browser where to link to. It's inside the tag, so it doesn't show up on the page.

See also this note about linking to stuff also on indymedia uk

Emphasis

Use <strong> and <em> to highlight something

This is <strong>really important</strong>

It would come out as: This is really important

This needs <em>to be marked out</em> as special too.

Would be: This needs to be marked out as special too.

<b> was used for bold and <i> for italics. But these are outdated tags. Always use <strong> and <em> they actually mean strong emphasis and emphasis.

Lists

Unordered lists using <ul> to hold the whole and <li> to contain the individual items.

So:

<ul>
  <li>che</li>
  <li>karl</li>
  <li>errico</li>
</ul>

Looks like:

• che
• karl
• errico

Or if you want it ordered <ol>

<ol>
 <li>karl (1818)</li>
 <li>errico (1853)</li>
 <li>che (1928)</li>
</ol>

1. karl (1818)
2. errico (1853)
3. che (1928)

Headings

More advanced. Headings are defined by <h1> to <h6> in articles don't use <h1> and <h2> see the HTML Style Page.

Where To Go From Here?

There are loads of good, free HTML tutorials out there. Just do a search for 'HTML tutorial' or 'HTML guide' and you'll find them. WikiKes likes W3 Schools.

The best way to learn, though, is to experiment. Have a look at the HTML code for different websites, and see if you can spot all the different tags working. For example, try right-clicking on this page and selecting 'View Source Code' (or something similar) to see the HTML I used to create this page. Mess around, write a few test pages yourself. All you need to do is:

1. Write your page using a text editor like Notepad
2. Save it with the extension "htm". With notepad you may have to rename as it is determined to save everything as "txt"
3. Doubleclick on the file. If you have managed to save it as a .htm file, it should open in your browser and you will see the results.
4. Now experiment!

---

-- ChickenMerengo - 25 Aug 2003 with tips from Vince
-- WikiKes - 29 Nov 2003 added examples, made paragraphs more important the line breaks, and added lists, made it xhtml -- BarneyLaurance - 22 Feb 2004 - added an 'e' twice.