What is HTML?

All web pages (including this one) are made of a code called HTML. HTML stands for HyperText Markup Language. Developed by scientist Tim Berners-Lee in 1990, HTML is the "hidden" code that helps us communicate with others on the World Wide Web (WWW).

Why Learn HTML?

There are many ways to produce HTML. Sites like Mahara, take all of the hard work out of creating the code and allow the user to create pages without any knowledge of HTML.

However, it is sometimes useful to have some knowledge of HTML. If you want true control over how a page looks, the best way to do that is to edit the page's HTML.

For that reason, we will learn a little bit about HTML. Please note : this is only an introduction to HTML. There is a lot of other stuff (like cascading style sheets) that wont be mentioned in this course. However, what you will learn will be valuable to you and allow you to do clever and cool things.

Exercise

The page displayed on the left is a very simple HTML page. You will re-create this page for yourself.

  1. Open the Notepad Application on your computer.
  2. Copy the HTML code on the right into your notepad document.
  3. Save the code as Snoopy.html somewhere on your computer.
  4. Find the file in explorer and open it. It should open in internet explorer (or some other browser)
  5. Note the page title is "Untitled"
  6. Go back to Notepad and find the tags <title> and </title>. Change the word "untitled" between the tags to "Snoopy"
  7. Save the changes and open the file again in your web browser. You should see the changes.

Display your page

You can use Mahara to display your Snoopy page.

  1. Create a new Mahara page called "My First HTML Page"
  2. Make the page Two Columns
  3. In the left column place a text box.
  4. Copy and paste your HTML code from your Notepad application into the text box.
  5. In the right column, place a "Some HTML" box in this column (found under the "files images and video tab")
  6. Upload your snoopy.html file and display it here.
  7. Your page should look like this.

HTML Code


<html>

<head>
<title>Untitled 1</title>
</head>

<body>

<p><h1>A PAGE OF HTML</h1></p>
<p>This is some text. It is written in HTML Hypertext Markup language.</p>
<p>Here is a picture :</p>
<p>
<img src="http://dillieodigital.files.wordpress.com/2011/09/snoopy-5368.jpg"></p>

</body>

</html>

Comments

Danyoh1234
11 June 2012, 21:03

Sorry Mr Carpenter, the picture doesn't work for students, is it a blocked site?

1 comment