The HTML Sandbox

Make all the mistakes you want. Nobody's going to get hurt.

			
			<html>

			<head>

			<title>The HTML Sandbox</title>

			</head>

			<body>

</body>
			
</html>

You're going to fill this screen

Think of this space as your web browser. In just a few minutes, you're going to be building webpages in here.

I've written some code examples for you to copy and paste into the box on the left. You can tinker with it to see how it works.

It's easy to get started. Just type something into the box in the left to make this window yours.

Making a Mark

You'll notice that anything you type within the <body> tags appears on the screen. But it looks really dull. Let's see how we can make it more interesting.

First of all, let's look at creating paragraphs. We can do that by using <p> tags.

<p>This is the first paragraph.</p>
<p>And this is the second paragraph.</p>
<p>You'll notice that the text starts on a new line every time. </p>

Copy the code above and paste it into the code box at the top. Then play around with it to create your own paragraphs.

back to top

Big Text, Little Text

As well as paragraph tags, HTML has some default tags to change the size of your text. Big for headlines, small for the legal mumbo-jumbo. These <h> tags are numbered from 1 to 6 to indicate the size. Copy and paste the code to see how they work.

<h1>This is your headline size.</h1>
<h2>And as you can see</h2>
<h3>the text gets smaller</h3>
<h4>and smaller</h4>
<h5>as the tag numbers increase.</h5>
<h6>You probably can't even read this one!</h6>

Copy & paste a headline and a couple of paragraphs from this page into the code box. Now use the tags to create a headline and two paragraphs of text using the <h1> and <p> tags.

back to top

Giving it some style

Most of the stuff you can do in Microsoft Word, you can do in HTML. You just need to know the right tags to use. Most of them are pretty obvious. For example, the <em> tag emphasises text but putting it in italics, the <strong> tag makes the text bolder and I'll let you guess what the <big> and <small> tags do.

<p>This is what normal text looks like.</p>
<p>This is how you make the <strong>text bold.</strong></p>
<p>This is how you <em>italicise</em> the text.</p>
<p>You can also <u>underline</u> words.</p>
<p>You can <strike>strike out</strike> words in a sentence.</p>
<p>You can add <sup>superscript</sup> text.</p>
<p>You can add <sub>subscript</sub> text.</p>
<p>You can make <big>text bigger</big></p>
<p>You can make <small>text smaller</small></p>

Paste the above code into the code box and play around with it. Create a business card with your company name in large text, your name in bold, your job title in italic and your email small.

back to top

Making a few points

If you want to create a list, HTML does all the hard work for you. First decide if you want to create a numbered 'ordered list' or a bullet-pointed 'unordered list'. You then use the <ol> and <ul> tags accordingly.

Within those tags, you then wrap each point in <li> 'list item' tags. Look how simple it is in the code below.

<p>It's easy to make bullet points</p>
<ul>
<li>Say something </li>
<li>Then something else</li>
<li>As many times as you like </li>
</ul>
<p>Or you may want a numbered list</p>
<ol>
<li>simply wrap </li>
<li>your items</li>
<li>in a different tag </li>
</ol>

Do your copy and pasting trick. Then try to create a list of your top 5 songs with the artist names in bold and the song title in italics.

back to top

Making links

The web would be nothing without links. So you better learn how to do them quickly.

We use the <a> tag to define the text or object that you want users to click on. Then within the opening tag, we add href="" and put the web address within the quotes. Try it out.

<p>Making links is the whole point of the internet.</p>
<p>If you want to see some more stuff from the guy who built this webpage, </p>
<h2><a href="http://godd.am">click here</a>.</h2>

To try it out, write your name in the code box and then use the <a> tags to link your name to your Facebook page.

back to top

Button it

To make it more obvious that you want users to click on something, you need to use a button. Fortunately HTML makes it really easy for you to do this using the <button> tag. Any text you put in between the opening and closing tags appear on a lovely clickable lozenge.

<p>You don't just want people to click on text links.</p>
<p>Sometimes you want them to click on a button.</p>
<p>That's pretty easy to do.</p>
<p>Just use the 'button' tag.</p>
<button>And you'll get something like this!</button>
<p>Click on it as much as you like, it won't take you anywhere.</p>

Use paragraph tags to tell people your name. Then create a button that links to your Facebook page with the words 'say hello' on it (you'll need to wrap the <button> tags inside some <a> tags).

back to top

Adding images

The web would be dull if it was just text. It would probably be full of people describing kittens. So let's start adding images.

We now need to introduce a tag that breaks the rules; it doesn't use a closing tag. You add images using the <img> tag and define the source of the image using src="". Try out the code to see how it works.

<p>Yeah. Text is good. But it's a bit plain.</p>
<p>Sometimes you need to add an image.</p>
<p>Like this:</p>
<img src="http://getadditive.com/html/img/puppy.jpg">

Click here to get a lovely little image of me. Use the <img> tag to add it to your page and the <p> tags to guess the imaginary object I appear to be holding.

back to top

Building boxes

Webpages are made out of boxes. Even the items that are weird shapes sit within a square box. The trick to nicely designed webpages is knowing how to position the boxes and style them. You do that using something called Cascading Style Sheets - otherwise known as CSS.

We define where the content of these boxes starts and ends using <div> tags. In the code below, I've added some basic CSS using the style="" command. Give it a go.

<p>Webpages are made out of boxes.</p>
<div style="background-color:red;padding:20px; margin:20px;">This is an example of a box.</div>
<p>You style them with CSS.</p>
<p>That's what you need to learn next.</p>

To finish off, copy the following code into the code box and add your own name:

<div id="certificate">Your Name</div> back to top