In this article, we will learn the basics of HTML for website development. We will also see how HTML webpage is structured and will execute all examples to make learning more effective.
A quick overview about HTML
What is HTML?
HTML(Hypertext markup Language) is a markup language in which most of the websites are written. HTML is used to provide structure to the web page and css is used to design the web page to make it visually more attractive. CSS topics will be covered in the next tutorial. However in this tutorial we will focus on HTML.
What are HTML Tags?
HTML tags are used to define, how your content will be displayed on the web browser. Tags help the browser and search engines to distinguish between content types in your web page. HTMl elements are made of an opening tag and a closing tags with contents kept in between of them. Based on HTML tag applied, the content is displayed on the web page
Example:
<h1>This is title</h1>
Above tag is used to display main heading on the website. There are some unclosed tags which can be placed in between of content to serve the purpose.
Example:
<p>Hi this is a unclosed tag <br> example</p>
In above tag <p> tag has been used to display content as paragraph and <br> tag is used to put half content on the second line.
What are HTML Attributes?
While using html tags some optional parameter can be used inside the opening tag which is referred as attributes. In case of image in <img> tag we put source attribute
to define image location.
Example:
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" alt="A demo image" title="A demo image"/>
In above example we have used <img> tag to display image on the browser. It have three attributes:
src :- Contains image location/path.
alt :- Alternative text to be displayed if image is not loaded or not found.
title :- Title of the image.
Get started
Let us start our development process by firstly installing the important software required for the development.
Editors
We will an editor to write our code and content. There are many popular editors available online you can select anyone which suits you. Editors that i would like recommend to get started are as follows:
Notepad++
I mainly prefer to do coding in Notepad++, as it is very light weight program and does not occupies much resources. It supports tabbed editing, which allows working with multiple open files in a single window.
It is available for free and supports Microsoft Windows.
Sublime Text 3
Another popular editor to choose is Sublime Text Editor. It is free and offers cross platform support for Windows, Linux and Mac users.
Browser
Once we have your editor ready, the next thing we will need is a browser. While it comes to browser, your design may vary browser to browser. So always prefer popular browsers with latest edition. Few popular browsers are chrome, firefox, opera. I am using chrome for this tutorial.
Basic structure for HTML web page
Open your text editor and create a new file with the name “demo.html”. Here we kept extension of file as “.html” which is used for a html file. We can also use .htm alternatively. So now paste the content given below to the file and save it. Now open it with the help of browser and check result.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>This is a sample web page</title>
</head>
<body>
<!-- Content goes here -->
<h1> Welcome </h1>
<p> Hi this is a simple web page demo</p>
</body>
</html>Output:
Welcome
Hi this is a simple web page demo
Code definitions
<!DOCTYPE html> :- This tag is used to tell browser about the version of HTML. In this case the version used is HTML5.
<html> :- This tag act as container of all HTML elements and is considered as the root of all HTML elements. All our HTML code are written inside <html> tag.
<head> :- This tag as a container of all required resources and the contents/information invisible to the users. This includes elements like keywords and a page description, any external resource linking like css or js files.
<meta charset=”utf-8″> :- This tag is used to set character set for our document, setting it to UTF-8 enables most of the characters.
<title> :- The <title> tag sets the title of your page, which is the title displayed in the browser’s tab.
<body> :- The <body> tag contains all the content that is visible to the users when they visit the page.
<h1> :- This tag is used to display heading of the content in web page. It has variations from h1 to h6 depending on the title priority required.
<p> :- This tag is used to display paragraph/content in the web page.
Most used tags
Now as we are aware of the required structure for web page. We will continue to understand the most used tags in HTML with the help of example given below. Copy and paste the below code in ‘file.html’ and open in browser to see results.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>This is a sample web page</title>
</head>
<body>
<header>Used to keep all header contents like logo,site name, menu of the web page</header>
<h1>This is h1 heading</h1>
<h2>This is h2 heading</h2>
<h3>This is h3 heading</h3>
<h4>This is h4 heading</h4>
<h5>This is h5 heading</h5>
<h6>This is h6 heading</h6>
<article>
<h1>Article heading</h1>
<p>Article tag is used to put all article content inside.</p>
<b>This is bold text</b>
<em>This is italic text</em>
</article>
<p>
This is a paragraph. This is link <a href="http://7topics.com" title="This is a sample permalink" target="_blank">Click here</a>.
Adding a image in next line<br>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" alt="sample image" title="sample image"/>
<br>
<button name="button" value="check">Sample Button</button>
<code>Display programming code here</code>
<div>This is a division section within HTML document. <span>
</p>
<footer>Used to keep all footer contents like sitemap links, copyright information e.t.c</footer>
</body>
</html>Above i have discussed the HTML basics required to get started with our first web page. In upcoming tutorial we will learn advanced components of HTML 5 and CSS designing for HTML web page. If you liked this article, do share it with your friends. Thanks for reading complete article carefully, do check our next post on this article.
No Responses