HTML stands for Hyper Text Markup Language. HTML is primary language to create webpages commonly known as mark up language. With HTML you mark your content with HTML tags to tell browser about the different parts of content on your webpage.
For example if you have a web page with text only. How web browsers (Firefox, Chrome, Safari etc) knows that which line is a heading and which lines are paragraphs and which content is list item or table. In this Beginner HTML Tutorial you will learn how HTML works and how to create your first webpage with HTML.
Here comes HTML to rescue, HTML has a lot of tags or elements that helps you to mark your content on web pages. For example with with <h1> </h1> tag you can tell browser, which line of text is a heading and with <p></p> tags you can tell browsers that which text is a paragraph.
Most HTML tags has 2 parts starting and ending part. for example <h1> </h1>. You start wrapping content with opening tag <h1> and where your heading ends, you use closing tag </h1>. The difference between staring and ending or you can call them opening and closing tags is / in closing tag.
here is a example of heading level 1 with opening and closing HTML tags.
<h1> This is heading level 1 </h1>
here is another example of opening and closing HTML tags for paragraph.
<p> This is short paragraph. you can have 300 words or 30 words paragraph. It is not an issue, just don't forget to use starting and ending HTML tags. </p>
In above two examples you can see we have opening and closing HTML tags. There are some many other HTML tags as well for heading 2, heading 3, ordered lists, unordered lists, blockquotes etc.
All the HTML tags tell browser about the content. Without these HTML tags browser can not differentiate between heading, paragraphs, list items and other content.
Here is the basic and necessary mark of HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet repellat laborum quis, vero aspernatur cumque!
</p>
</body>
</html>
At the top of this code in first line we have <!DOCTYPE html> or Document Type, which tells browser that this is a HTML document. Next we have <html lang="en"> starting or opening tag. Here you can also define language of your webpage. In this example i have defined en for English.
HTML Document has two sections. Head and Body section. In the Head section of HTML page you can define what your web page is about. As you can see we also have <title>Document Title Here</title> tags. Here you define title of your webpage or HTML Document. You can replace Document Title Here text with your web page title such as your website name.
In the head section of webpage you can use other HTML tags to link CSS stylesheet or JavaScript files. Content in the head section does not appear when you will see your webpage (HTML Document) in web browser such as Firefox, Chrome, Safari or any other browser except Title of your HTML document.
You will learn how to link CSS and JavaScript files in head section in next article, in this article we will only discuss basics.
After Head section, where </head> tell browser that head section ends here. You can see opening body tag <body>. Everything (text, images, videos) with in opening and closing body tag appears in browser.
As you can see before closing body tag </body> we have two lines of code, first one is for heading and second one for paragraph. If you will open this HTML Document in web browser you will see heading and paragraph text in browser as you can see in following screen shot.
Creating your first HTML Document
TO create HTML documents you don’t need any special software or program, you can use simple text editor such Notepad to create HTML Documents. There are so many other HTML editors also available that makes it easy and simple to write HTML mark up.
We will discuss more about Text Editors and browser later. I have written review of Brackets text editor, you can read brackets text editor review to learn how and why you should use brackets HTML editor.
Now Open simple text editor such as notepad, remember don’t use MS Word or any other Rich Text editor to create HTML Document because these editors will add their own mark up that will cause problems. Create a new file and save it as index.html.
index is our file name and .html is extension of our document. You can name your file anything you like such as tahir.html, web.html etc. index.html is standard file name for main web page of any website. After creating your first html document paste above necessary mark up in your new document save file and now open in browser such firerfox, chrome, safari or internet explorer or any browser of your choice.
You will see similar result as show in above screenshot. If you can see the result as show in image above congrats you have successfully created your first html document.
CSS : Cascading Style Sheet
CSS stands for Cascading Style Sheet, CSS is stylesheet language that you can use to style the web page content, CSS tells the browser to change the color, font, layout, size and more of HTML content.
In next article we will discuss about HTML text editors, browsers and how to style HTML pages with CSS language. Remember CSS is styling language which helps you to make your web pages beautiful and responsive.
HTML beginner tutorial pdf download
You can download this beginner HTML Tutorial and first HTML document that we have created to understand how it woks.
Download Free beginner HTML Tutorial PDF
If you have something to share, add your comments below. Read part 2 of HTML for beginner : Code Editors, Headings & Paragraphs
Leave a Reply