So what is html? It stands for "hypertext markup language". So what's "hypertext"? Or for that matter, "markup language"?!
Well hypertext is what it sounds like. It's more-than text. While an html file is plaintext (meaning it's written only in recognizable characters, no binary!) it describes incredible web pages with links, fancy fonts, and cool formatting! A markup language is simply a special computer language to express to the computer (via your web browser) what the page is supposed to say and look like.
So what should you use to write html? You'll need a good programmer's text editor. This isn't something like Microsoft Word; more like a fancy Notepad! Of course you can write html in Notepad itself, but you'll soon wish you hadn't. Here's some editors you can use:
So, now you've got a text editor, you're read for some coding! Let's start with something simple. Open a textfile called "mypage.html", and put this code inside:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> My First Website </title> </head> <body> <h1>Hello World!</h1> </body> </html>
Now open it up in your web browser (I use firefox because it's free software!) Wow! You should be able to see a huge lovely "Hello World!" at the top of a blank page! Amazing!
Yeah, that's very cool, I hear you saying, but how does it work!? Well, it's simple.
HTML works on the concept of "tags". These are the things in angle brackets, like
<h1>. The angle
brackets let the browser know we're starting a tag here, and the
word inside tells you what tag it is! Some tags need to have a
closing tag - this is the same tag name, but with a / in front of
tells the browser that the tag ends here and we can start a new one!
This method is so flexible, you can nest tags together! Actually,
that's what the document is - it's as many tags as you like, wrapped inside
So let's go through the tags, one by one!
<!DOCTYPE html>- the first thing we need to do is tell the browser which version of HTML we're using! Now that most people use modern browsers like Firefox or Chrome, we can just about guarentee they'll be able to support html5, the latest and greatest. That's what this doctype says!
<html>- Now that the browser knows what version of html we're using, we open the html tab to start the document!
<head>- Let's start with the head section. This is where we tell the browser lots of useful information about the page which isn't necessarily the content itself (what we call metadata.)
<meta charset="utf-8">- this tells the browser our document is using the UTF-8 encoding. This means any special characters, like «guilliames», will be displayed correctly. Without this, they might turn into a garbled mess!
<meta name="viewport" content="width=device-width, initial-scale=1">- this magical spell does nothing more than make the page display nicely on mobile browsers. Just copy and paste it verbatim.
<title> My First Website </title>- this is the title of the page. It's displayed in the titlebar of your browser, and in the heading of the browser tabs!
</head>- this is to say we've reached the end of the head. No more metadata follows!
<body>- now we move on to the body of the document. This is where you'll write most of your code, to describe what's on the page and how it looks.
<h1>Hello World!</h1>- this describes a header, i.e. the title at the top of the page. Headers go from h1 (the largest) all the way down to h6 (the smallest)!
</body>- the end of the body.
</html>- the end of the document. We're done here!
So we have our page, but it's really really boring at the moment. It's nothing but a title! It's high time we added some content. Play around with these tags!
<p></p>specifies a paragraph of text. Nice! Use it to write about how cool html is!
<ul></ul>(unordered list) describes a bulleted list. Items can be placed inside the list using
<li></li>(list item) tags. Use it to write a shopping list or list of reasons why my tutorial is bad!
<ol></ol>(ordered list) describes a numbered list. Items can be placed in the list in the same way as an unordered list. Use it to rank your top ten albums or movies!
<hr>(horizontal rule) tells the browser to put a big ol' line across the page here. This is useful for seperating sections of your page!
With what you've learned so far, you can already make very nice pages with lots of information on them. But these pages may be a little boring - no links and no pictures!
The tag for a link is
<a></a> and the tag for an image is
<img>. But if you put them into your document, nothing interesting
will happen. Your links will go nowhere and your images will be empty!
To link to things and to add images, we need to learn about attributes. These are special properties inside a tag that tell the browser about what the tag is or does!
A property is specified by name/value pairs after the tag name but before the closing
<tag name="value">. We use double quotes to prevent our
html from becoming confusing with all the angle brackets and slashes that might be in
the attribute value. We've already seen an example, with the
meta tags in
our head section!
To specify a link address, we use the
href attribute. This html:
<a href="http://example.com/">click me!</a> will produce
this link: click me!
To specify the location of a picture, we use the
src attribute. This html:
will produce this image:
We can also use the
alt attribute to specify alt text if an image is broken,
or to describe the image to people using screenreaders:
Here are some cool attributes you might want to use in your pages:
styleattribute will let you style an element with CSS!
widthattributes let you specify how big an element (especially an image) is!
idattribute will let you link to individual elements on a page!
classattribute is great to help style elements in CSS!
Happy hacking! ☺