Web Wednesday – Beginners’ HTML
HTML is the structure, the bones of the internet. Every page you look at has HTML at its core, so if you’re even somewhat interested in why we word things the way we do on the web, or if you’re just curious as to what all this talk about this magical HTML5 is, this is the series for you. Welcome to Web Wednesday, a new series I’m running to help encourage people to get involved with web development. If you enjoy this series, please go and take your knowledge further and let me know in the comments what you do thanks to these simple lessons.
HTML – Why?
HTML as I’ve previously discussed, is HyperText Markup Language. The most important thing to remember is that HTML is nothing like a traditional programming language and really, it’s not! No, instead what HTML does is send some basic instructions, in the form of tags to a web browser. Before we get stuck into the meat of the content of this technical demo, let’s discuss what a browser is designed to do.
“It shows me the internet”, I heard someone say once. Well that’s certainly something they do, but that’s not what they’re for. There’s no magical realm called “the internet”, where we can just say “here’s some wizardry, now go forth my new website!” Instead, we have people who will design a website in some design software or on a piece of paper than piece it all together with this HTML thing and uses something called tags. I’m sorry to demystify the internet, but that’s the truth of the matter! These websites aren’t always made by some magical internet web developer, the pages can be made by the little guys – You and I.
My First HTML Page
I want you to copy this and put it in Notepad, Text Edit, Vim, Gedit… Whatever basic text editor you use.
<!doctype html> My First HTML Page This is my first HTML page :) Hello, world!
Save the document and call it something like hello.html, or index.html. Notice that I’m asking you to end the file with a .html extension rather than .txt? This lets your computer understand that you mean to make the words you’ve just made turn into a browser readable HTML page. By default, if you were to double click on the document, you would open up your browser. You should be met with a really boring page that says “This is my first HTML page :) Hello, world!”
Let’s break it down!
Declare the doctype for this. All HTML5 code should exactly as above. This lets the browser interpret what version of HTML to use, as there are still millions upon millions of websites using HTML4.1 tags. Those have a different tag, but for simplicities sake just use <!doctype html>, which let’s you use the most modern implementation of HTML (HTML5).
The html tag declares that you’re ready to begin building your website. The closing tag says “I’m finished now, browser!” Pretty simple.
Between the head tags, you want to put all information that the page will want to reach for. You can add your Cascading Style Sheet content up here, as well as some scripts that you want to happen on the website! We use specific tags in the head section to explain to the browser how to display certain things. Think of the head as the brain – This is where you can point to certain things and the body can manipulate a lot of this data once it’s been retrieved. Speaking of the body…
This is where the content of your website is declared. Now this is where you can start to deal with layouts and the likes. It’s in here that you’d write what you want to see in your website, so in our above example, in the body we’re just typing in the words “This is my first HTML page :) Hello, world!”
EXERCISE 1 – Aww yes! When you’re learning, you need to participate in these exercises. Starting easy with some basic questions then…
1) Where do you put information about the website to tell the browser?
2) What HTML version are we playing with if we use <!doctype html>?
EXERCISE 2 – Have a go at making your own HTML page. Using the above, write a website that has your name in the browsers tab and has some writing you want to see on the website.
When you’ve finished these exercises, click on the 2 below to proceed to the next page and see the answers!