Programs must be written for people to read, and only incidentally for machines to execute. ”
– Abelson / Sussman
Prerequisite: You don’t need any previous knowledge of programming, this is for absolute beginners but anyone who has some working knowledge of HTML then this blog would be a great revision.
You will need: A text editor like Notepad++, Sublime Text 3, etc, a web browser that supports HTML5 like Google Chrome, Mozilla Firefox, IE, etc.
Basic HTML Document Structure:
Although various versions of HTML have been released but basics remains same. First open Notepad++ and save your first html file as FirstWebpage.html.
Note: Remember all html files are saved as .htm or .html
So this is the basic format of any html file where an html webpage begins with an opening and closing tag <html> </html>. Then comes the head tag <head> </head> which contains many other tags like <title> </title> which is used to create title written on the tab of your web browser. The body tag <body> </body> contains the content of your webpage like the information, pictures, videos, music, etc.
Note: In HTML5 before beginning with <html> tag it is necessary to add <!DOCTYPE html>
Top 10 HTML tags that everyone should know….
1)Paragraph and line break: To create a new paragraph use <p> </p> tag whereas if you want to start from a new line without starting a new paragraph then use <br/> only, it has no closing tag if observe closely.
2)Text formatting tags: These tags help in formatting the special text of your content in variety of different ways possible like italic, bold, small and large text, etc.
4)Links: Links are integral part of any website. You can add link to text or image that will enable user to click on it and direct them to another webpage. The link tag is <a href=”about.html”>About us</a>. You can also add URL to any website in href that will open that website when clicked by user.
5)List: You can list your items in two ways in html. First is ordered list in which you can list down items with numbers like 1,2,3, etc. Or using alphabets a, b, c, d, etc. Second is unordered list in which it uses bullet marks.
6)Horizontal line and comments: To create a horizontal line use <hr/> tag. You can add comments in your html file but these comments will not be displayed in your browser but it is for your own reference.Please see above HTML code for example.
7)Image: to add image to your webpage use <img src=”image.jpg”/> tag where you have to add image source in src. Here image.jpg is in the same file in which all html files are put. Notice that <img> has no closing tag. You can also change image size with height and width attributes and border with border attribute.
8)Background and text colour: You can add background colour to your webpage using bgcolor tag and text colour with font tag having color attribute.
9)Audio: In HTML5 there are three formats of playing an audio file .mp3, .wav and .ogg format. You can use <audio> </audio> tag to add an audio player inside your webpage. Controls attribute specifies the audio controls that will be displayed such as play/pause button, etc.
10)Video: It is same as audio, by using <video> </video> tag you can add video. In source you can even add an URL to the video you want to display.
Now these were the basics of creating a webpage. To master web development this is not enough. You can search for more html5 features online and study them in detail. Some of the features are web storage and Geo-location API, creating tables and forms, drag and drop API, etc.
Thanks for reading and I hope this helps. For any query comment down bellow.
You can follow me on Google+ by clicking on the link below
Written by Akarsh Singh