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".


What it looks like


 <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="">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>
  <li>First in a list</li>
  <li>Second in a list</li>

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


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.

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="">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 The bit of the tag that says href="" 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


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.


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


Looks like:
  • che
  • karl
  • errico

Or if you want it ordered <ol>

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

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


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.
Topic revision: r5 - 22 Feb 2004, BarneyLaurance
This site is powered by FoswikiCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback