Start Learning HTML with CSS and XHTML: 2.My First HTML page

If the CEO of a fast growing Coffee shop asks you to create a website and he gave you some thing on a paper.
Thanks for giving us a hand!
On the Web page we just need something simple (see below) that includes the beverage names, prices, and descriptions.

House Blend, $1.49
A smooth, mild blend of coffees from Mexico, Bolivia
and Guatemala.

Mocha Cafe Latte, $2.35
Espresso, steamed milk and chocolate syrup.

Cappuccino, $1.89
A mixture of espresso, steamed milk and foam.

Chai Tea, $1.85
A spicy drink made with black tea, spices, milk and honey.

Open the notepad++ and create a new text file. Type in the information given by CEO and save it as index.html

When you open the index.html in a browser it will be look like this.

The result is little unsatisfying. We just got only the content of the web page. HTML gives you a way to tell the browser about the structure of your page.i.e.marking up your text so that the browser knows what’s a heading, what text is in a paragraph, what text is a subheading, and so on. Once the browser knows a little about the structure, it can display your page in a more meaningful and readable manner.

Here is a few HTML tags which tells the browser about the structure.

<h1>: start of heading </h1>: end of heading
<h2>: start of subheading </h2>: end of subheading
<p>: start of paragraph </p>: end of paragraph

Just by using this simple tags, you modify the previous index.html file like this and save it.

You have an HTML file with markup – does that make a Web page?

we just need to add <html>, <head>, <title>, and <body> tags to make this a first class HTML page...

<html> : this tells the browser the content of the file is HTML.
<head> : the head contains information about your Web page, like its title.
<title> : put a title inside the head, it usually appears at the top of the browser window.
<body>: The body contains all the content and structure of your Web page – the parts of the Web page that you see in your browser.

Go ahead and change your “index.html” file by adding in the <head>, </head>, <title>, </title>, <body> and

</body> tags. Make sure you separate the head and body while writing HTML.

Once you have done that, save your changes and reload the file into your browser.Now things look a bit better.The browser has interpreted your tags and created a display for the page that is not only more structured but also more readable.