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 |
No comments:
Post a Comment