SIGN UP LOGIN

Create your first web page using HTML5

  22nd Nov, 2019   Rahul Ranjan   0 comment
Create your first web page using HTML5

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>

HTML tags 

 

 

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>

Unclosed Tag

 

 

 

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.

Notepad++

 

 

 

 

 

 

 

 

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.

sublime text

 

 

 

 

 

 

 

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.

 

Rahul Ranjan
Author: Rahul Ranjan

Founder of 7topics. Rahul Ranjan is a website developer and blogger who loves to read and share about new techonology with others through his blog.

SUBSCRIBE TO NEWSLETTER

Enter your email address to subscribe to this blog and receive notifications of new posts by email

RECENT POSTS

1