(X)HTML for Beginners – Lesson 1: The basics

Categorized under: Web Development

- What will I learn?
In this first lesson we will learn what is HTML and the basic structure of an (X)HTML page.
- What do I need?
1) For the start, you will need a text editor. We will use it to write and edit the code. For this tutorial we will use Notepadd++ (Download Notepadd++)
2) Next, you will need a browser which you will use to view the page. If you are on Windows, you already got Internet Explorer. But because IE use to be a pain in the neck, I strongly recomand you to get a “real” browser, like Opera, Mozilla Firefox or Google Chrome. (Personally, I use Opera for daily use)

What is HTML?

HTML stands for Hypertext Markup Language. First mentioned in 1991, it is a tag based language. But this is history so I’ll not get into it right now. Maybe in another post?

- What is a tag? you’ll say
Tags are composed of the name of the element, surrounded by angle brackets. Eg: <html>
- What are the tags then?
The main html tag is, weird, html. It contains the whole page and is the root tag. It has only 2 descendents: head and body.

In head we define informations about the page, like the title of the page, a short description of the content on the page, a list of main keywords on page and so on.

In body we put the elements that build the visual page.

But let’s see it in action. Let’s create your first “Hello world” website.
1. Choose a place on your harddrive where you will store all your new work and create a directory. Let’s say: www
2. In www directory, create a file named lesson1.html
3. Open lesson1.html using your text editor (Notepad++)
4. Write the following code:

<html>
  <head>

  </head>
  <body>
    Hello World. This is awewsome!
  </body>
</html>

5. Open the file using your browser (Internet Explorer, Opera) and you should see something similar to:

Remember: Make sure to use only the tags specified by W3C standards. Otherwise your website may not render properly by all the browsers.

Congratulations, you just created your first page. Was it hard?

Download files here. (Right click -> Save As)

Comments

  1. Much appreciated for the information and share!
    Nancy


    Nancy
    September 23rd, 2011
  2. Excellent subject matter. I’ve discovered a lot something totally new here. Continue.


    Gabrielle Feliz
    October 28th, 2011
  3. Great article, mate! Really good for beginners like me.


    Elvis
    January 30th, 2012
  4. This is insane! It really worked! I got my first website. Looking forward for the next lessons.


    Adrian
    February 1st, 2012