HTML Basics

HTML isn't scary or hard to learn. In fact it's really easy. You probably already know quite a bit of HTML, but you're just not aware that you do. We think the best way to learn HTML is to remix someone else's work, but this module can help you understand why things work the way they do.

HTML gives content structure and it does this by using tags. The more you make webpages, the more you'll explore the exact nature of tags in more depth but for now think of them as things that give structure.

What is HTML?

HTML (Hyper Text Markup Language) is the language used to tell computers how to structure webpages. HTML stands for Hyper Text Markup Language. Here’s a really simple web page:

I can <em>hear</em> you!

Because the word is wrapped in what we call tags, this page displays as a single line of text with the word “hear” italicized. The <em> tag tells the computer to emphasize anything inside of it. If a blind person were listening to the webpage, a computerized voice would place emphasis on the word “hear”.

Elements are the building blocks of a webpage.

The combination of an opening tag — in this case, <em> — its corresponding closing tag — </em> — and the content in between is called an element. There are many kinds of elements. Aside from the <em> element, one of the most useful elements is <a>, which can be used like this:

<a href=“http://wikipedia.org”>Wikipedia</a> is cool.

Attributes add meaning to elements.

This element is slightly more complex because it includes an attribute, or piece of information that adds meaning to the element’s content. In this case, the href attribute tells a computer that “Wikipedia” is associated with — or hyperlinked to — the website wikipedia.org. That means clicking (or tapping) on the word will take the reader to Wikipedia’s website.Some elements don’t actually contain any content, and hence have no closing tag, but represent special kinds of content themselves. One example is the tag:

  This is serious!
  <img src=“http://seriouscat.com/serious_cat_is_serious.jpg”>

Nesting Elements

Finally, it’s also possible to put elements inside each other, also known as nesting them:

<a href=“http://en.wikipedia.org/wiki/Lolcat”>
<img src=”http://seriouscat.com/serious_cat_is_serious.jpg”>
</a>

This links the picture of a cat to the Wikipedia entry on Lolcat.

There is a complete list of all HTML elements here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

What's a Text Editor?

Text editors come in all many different forms, but at their hearts they all do the same thing - allow you to edit files that are composed of straight forward, everyday text. HTML & CSS files are like this, their contents are simply plain text.

Your computer may already have a text editor on it. If you're using a Windows based computer then you'll likely have Notepad (Programs > Accessories > Notepad). If you're using an Apple computer then you'll have TextEdit already installed (Applications > TextEdit). Finally, if you're running Linux (bonus points if you are) then you'll certainly have one of either VI/VIM, emacs, Kate or gedit.

At Webmaker, we've built an online editor called Thimble. You can use this editor to create and publish webpages that are then stored within the Webmaker infrastructure.

Depending on the operating system that you're using, you'll have different options available to you in terms of which text editor you can install. Some of these editors are not free, but we've listed them because they're robust and available for a short period in a trial mode. Trying them out won't cost you anything financially.

There are many more text editors available for each platform, and we'd encourage you to search around if none of the editors on this page choose you.

If you're running Windows –

If you're running OS X –

If you're running Linux –

Take some time to try out the various text editors available for your operating system. If one of the text editors feels more comfortable than the others, then congratulations; a text editor just chose you.

After choosing your text editor, write a quick 'helloworld.html' file, save it and you've just created your first web page.

Open up your web browser and from the file menu at the top choose File > Open and open the 'helloworld.html' file that you've just created. Congratulations, that's a web page that you created.

Notice

This module is under active development. We'd LOVE your help making this content better. Join the discussion forum and let us know how you'd like to improve the content or start filing issues to get involved.

Where to next?