Saturday, July 23, 2011

HTML: Writing Your First Webpage

An Extremely Brief Introduction to HTML

HTML (HyperText Markup Language) is the base for building all web pages. HTML is written via using HTML tags which are enclosed in angled brackets. Eg. <p> is a paragraph tag. 
All HTML tags have a start and end tag. Eg. <p> is the start tag for paragraph and </p> is the end tag for it.
HTML is not a case-sensitive language. In simple words, uppercase (capital letters) and lower case letters (small letters) have the same meaning when used in HTML. Also, HTML doesn't render whitespace characters (return, tab, space etc)


Let’s start writing HTML

Enough of the boring theory, let’s move on to how we can actually create a simple HTML document.
First, open up any text editor like Notepad, Notepad++, Dreamweaver, E-text editor etc. (for windows) and Coda, BBEdit, Text Wrangler, TextMate etc. (for Mac).

You can see a full list of best text-editors for Mac.
For Windows, see a list of text-editors that are mostly used.

Note: Please DO NOT use MS Word or any word processors for writing HTML.

I’m assuming you’re using Notepad. Make a New File and paste/type in the following code and save this file as index.html. Don’t forget to type the extension as .html or .htm (I prefer .html rather than .htm). The first webpage of any website is usually named index.html, or in some cases, default.html.

Write this code in your text-editor.

<html>

    <head>

        <title>My First EVER Web page</title>

    </head>

    <body>

        <p>This is a paragraph</p>

        <p>This is another paragraph. This is an extremely simple webpage.</p>

    </body>

</html>



Explanation of the code written above

Now, let’s understand what’s going on in the code above. Firstly, we’ve started our HTML document with <html> start tag and immediately ending it with </html> end HTML tag.
Inside the <html> tag, we've typed <head> tags which could contain other important tags but for the time being, we’ll only write the <title> tag. Whatever you type inside the <title> tag will be displayed as the page title.
Then we've used the <body> tag. Almost all of the content/code for a website comes inside the <body> tag. For simplicity’s sake, we’ve only used the <p> paragraph tag, which of course, creates a new paragraph.

Save this file again and preview it in any browser. Here's a screenshot of my PC. I'm viewing it on Firefox5


Preview of your webpage

Conclusion

So, believe it or not, that's actually it. We've successfully created a very simple HTML page. I know this webpage actually sucks right now, but please be patient. We'll cover all of the aspects of making our webpage look good in the later posts. But for that, you'll need to master the basics first. Anyway, I'll be back with more tips and tutorials on HTML in the next post. But for now, it’s enough for today. c ya.