GoalMost 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.
- 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.