I am not going to waste time telling stories that inspire this post, as most people would have already heard something similar constantly. This is not a mythbuster kinda post, so don’t expect a scientific proof to the answer of the question. Instead, through this post, I hope to break the impression that claims composing a HTML document is difficult.
I don’t have one of those fancy software.
Writing a HTML document technically do not need fancy tools. These days one only need an up-to-date web browser (e.g. Internet Explorer, Google Chrome, Mozilla Firefox, Safari etc.) to do the job. However, assuming we are still living in early 2000s, then we would need an additional software that should be available — a text editor.
By text editor, I don’t mean a text processor in a typical office suite (e.g. Microsoft Word, OpenOffice.org/LibreOffice Writer etc.). For each of the major operating system, the respective editor is listed below,
- Microsoft Windows: notepad
- Mac OS X: TextEdit
- Modern Linux Distros: Text Editor/gEdit (Gnome), Kate (KDE)
Pretty much that’s all you need.
The books of HTML are so friggin thick, ain’t nobody got time for that
The goal of this post is not telling you to create a super cool-looking document with flying nyancats. Instead I am only going to tell you how to create a bare-minimum document. My point is to prove HTML is not difficult, not “How to build a page with flying nyancats in 30 seconds”.
There is only one important thing to remember, when you open a tag, you have to close it eventually, in orderly manner. Think of this as wrapping a present for your loved ones with multiple layers of wrapping papers. Usually you would want to finish the current layer before starting with another. Same thing applies to a HTML document, when you start a tag you would need to close it.
For instance, open up the text editor, and write a sentence.
Yes, I am a smart-looking dude.
Assuming we want to make this a header (think the default “Heading 1” in most word processor), we then enclose the sentence with a <h1> tag, as follows,
<h1>Yes, I am a smart-looking dude.</h1>
As one would have already noticed, in order to close a tag, just insert a backslash before the tag name (in this case the tag name is h1). Save the file with the extension .html (you can name it whatever you want), and then double click it to open in browser. You should then see a plain document with a heading of your choice.
What’s a document if it doesn’t have any content. In order to make this a complete document, let’s add another paragraph to the document, shall we?
<h1>Yes, I am a smart-looking dude.</h1> I am really that smart. No doubt about it.
Like any other documents, I like to keep my document organized. However, after saving the changes and refreshing the page in browser, you might not see the expected output. The two sentences are shown next to each other instead of in different paragraphs. That’s because the browser is not aware of the fact that those are two paragraphs. To tell the browser about it, enclose each paragraphs with a <p> tag.
<h1>Yes, I am a smart-looking dude.</h1> <p>I am really that smart.</p> <p>No doubt about it.</p>
Save and refresh the page, you should see the expected changes now.
Is that it?
Unfortunately no, this is not really a complete document. However, browsers are coded in a way such that it can tolerate badly-formed document. Even if a document is not written properly, it should still render the page more or less the same as one in good-form. The document that we are having is missing some tags that should appear in all HTML documents, namely the <html>, <head>, <title> and <body>.
I won’t spend time explaining what each of these does in detail, but I would show you how to apply them in our document.
<html> <head><title>AWESOME document title</title></head> <body> <h1>Yes, I am a smart-looking dude.</h1> <p>I am really that smart.</p> <p>No doubt about it.</p> </body> </html>
How do I know I am doing this right?
Go to the W3C Markup Validaton Service, and then upload the document for a free check. You should see a big error with a couple of warnings (if you are doing according to this post, that is). Let’s forget about the warnings for now, and focus on fixing the error. As we are living in 2014, let’s use the doctype for the upcoming HTML 5. That’s just a fancy way of saying add this line to the beginning of the document, before the <html> tag
<!DOCTYPE html>
Don’t close this “tag”, save the document, and re-upload to validate. Now the document should pass the validation (although with the same warnings as before), and this means the document is in good form. Then this very much fulfills the purpose of this post by telling you it is not that difficult to produce a HTML file.
Of course if you made it this far, you might want to find out more about it. A good place to start is through w3schools. For hardcore geeks, you might want to go straight to the respective pages at w3c to dig for more information. Just make sure you are reading up-to-date material that is html5 compatible/compliant/related.
And yes, you should find those friggin thick book a little bit more understandable.
Welcome to the world of weirdos.
I have the intention of making this into a series of blog posts. Once I have the time I would probably write more on the related topics.
