Open Source For Geeks: HTML Hello World Tutorial

Saturday, 7 June 2014

HTML Hello World Tutorial

Introduction

Our live as we are living now would not be the same without the internet. What we see while browsing internet are called web pages. What we use to browse these pages is called a browser (client). These pages are written using various technologies like HTML, CSS, JavaScript, JQuery etc. which are client side technologies. There are various backed (server side) technologies like JSP, Servlets that are used to build application that are deployed on the servers eg. Tomcat which help server users/clients request to browse a particular page. What user types in an address bar to fetch a web page is called URL(Universal resource locator). For example you may type http://google.com/. What you see before colon ':' (i.e http or Hypertext Transfer Protocol) is the protocol used to communicate with the server. It can also be https which is secure version of http protocol.You may see the use of this protocol when you browse a page to do some secure action like payments or transactions. Both HTTP and HTTPS fall under application layer in OSI model. Both of them have TCP as their underlying protocol. So basically when browser it to request a web page it first creates a TCP connection with the server and then uses HTTP or HTTPS to get the required pages to display.

Goal

Most of the basic tutorials can be found on W3Schools. Prior to moving to some advance tutorials on web development let me provide this basic Hello World HTML tutorial. Here we will simply crate a web page and open it in our browser that shows "Hello World!" text.

Getting Started

Create a file name index.html . Notice the extension html. It is required so that the browser and OS understands it is a web page and will be opened in a web browser.

Next add the following text in your file

<html>
<header><title>Open Source For Geeks Tutorial</title></header>
<body>
<center>
<h1><b><i>Hello World!!</i></b></h1>
</center>
</body>
</html>

Simply double click the file. It should open up in your default browser and should look like below
See how easy that was? Web pages that you visit in day to day life are much more complex. They have animations, dynamic contexts, logins etc but it all starts from Hello world :)

Understanding the language

HTML is stands for Hyper Text Markup Language. You have bunch of tags that the browser understands and renders.
Notice the <html></html> tag. This is the root element of your web page. Or kind of was. Modern browsers detect the html page even if this tag is not present.
Next comes your tag <head></head> and <body></body>. As the name suggests head tag has your meta info like page titile. you can put it under <title></title> tag in your head. Notice the text on the tab in above image. Your java scripts also go in this head section.
Body as the name suggests has your actual page content to be shown. Here we are simply displaying "Hello World !!" text. But notice the font ? Looks different ? That is because I used some tags.
<center><center/> tag tell the browser that the element/tag that come in between must be rendered in the center of the browser. <b> is for bold and <i > is for italics. <h1> is the size tag that shows text with different size. You can go ahead and try <h2>... etc.

As I told earlier you will find much help on W3Schhools. So do go through it if you are beginning with Web development. Let me know if you still have any doubts.