html basic

HTML Basic – HTML Tutorials – Web Development

Hey there Everyone! I’m posting kind of late, not gonna lie was a bit occupied with other things, we will be discussing basic HTML in this article. Let’s get started without any further due!

One more thing, if you are viewing this in a mobile, please switch to desktop mode. It will be very much easier compared to mobile view for you to understand and read it.

Editor & Installation

Before starting with HTML you need a place to write the HTML code, which means you need an editor. There are various options like Notepad, Notepad++, Sublime Text and much more. I use Sublime Text as an editor. Just search on Google “Download Sublime Text” and you will get the link to proceed. Use the free version, they also have a paid version, no need to use that.

To download Sublime-Text directly:


What is HTML?

HTML stands for Hyper Text Mark-Up Language. It’s not a programming language. It’s used for preparing the skeleton of a webpage or website whatever you wanna call, for now, will dive deeper into it in the upcoming articles!

Given below is an example of a basic HTML document.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. 	<title></title>
5. </head>
6. <body>

7. </body>
8. </html>

Creating Your First HTML Document

We will be making an HTML file that displays “HTML is Awesome” on the web-page.

Step 1: Creating a HTML file

Open Sublime-Text or whichever editor you are using and create a New File.

creating new file in sublime

Step 2: Writing HTML code

You will now see an empty window, now type the following code:

<!DOCTYPE html>
<html>
<head>
	<title>A title</title>
</head>
<body>
	<p>HTML is Awesome</p>
</body>
</html>
A screenshot of basic html code

Step 3: Saving the file

Save the file on your desktop as myFirstHtmlPage.html

saving file in html from sublime editor

Note: It is important that the extension .html is specified — some text editors, such as Notepad, will automatically save it as .txt otherwise.

To open the file in a browser. Navigate to your file then double click on it. It will open in your default Web browser. If it does not, open your browser and drag the file to it.

Output of Your first code
Opened in Chrome

Followed by this is the explanation of each and every line of the above code.

What is <!DOCTYPE html> ?

As we can see in the 1st line of code <!DOCTYPE html>, it is not an HTML Tag and all HTML Documents must start with this declaration. It is like information to the web browser that, what kind of document it should expect! And it will give a kind of info like it should expect HTML type document.

What is <html> tag?

The 2nd line of code, <html>. Actually its not only <html>, it comes in pair with </html>. It basically represents the root of an html document and it acts as a container for each and every other tag.

All other tags goes in between <html> </html> for e.g., <head> tag, <body> tag, <title> tag which goes within <head> tag.

Note: Most of the tags comes in pair i.e., the opening and closing tags for e.g., <body> is the opening tag and </body> is the closing tag.

What is <title> tag?

The <title> tag. It is nested within the <head> </head> tags. It basically shows the text content in the tab of a web page, like shown below.

screenshot of title tag

Another Example:

<!DOCTYPE html>
<html>
<head>
	<title>A title</title>
</head>
<body>
	
</body>
</html>
Output of the html code given above
Output of Code Given Above.

What is <body> tag?

The <body> tag, everything that you see in a web-page is written inside the body tag. It is where all the other tags and content goes in.

So now let’s continue with the other elements of HTML.


Topics Upcoming

This are the topics we are going to cover in this blog.



Headings

There are 6 kinds of Heading tags.

<h1> is the largest heading tag and <h6> is the smallest heading tag. So the size decreases accordingly as we move down in order.

Snippet for heading tag given as follows:

<h1>1st Heading</h1>
<h2>2nd Heading</h2>
<h3>3rd Heading</h3>
<h4>4th Heading</h4>
<h5>5th Heading</h5>
<h6>6th Heading</h6>

Total working code given as follows:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<h1>1st Heading</h1>
	<h2>2nd Heading</h2>
	<h3>3rd Heading</h3>
	<h4>4th Heading</h4>
	<h5>5th Heading</h5>
	<h6>6th Heading</h6>
</body>
</html>

It looks like as follows in the Web browser:

Screenshot of different size of headings

Down below is the HTML file for headings, you can download.



Paragraphs

Paragraphs are defined using the <p> tag. Any normal paragraph or text that you want to display in a web-page goes within the <p> </p> tag.

Snippet for paragraph tag given as follows:

<p>This is a paragraph</p>

Total working code given as follows:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<p>This is a paragraph</p>
</body>
</html>

It looks like as follows in the Web browser:

Output of a html code

Down below is the HTML file for paragraph, you can download.



Links

Links are defined using the <a> tag. It is also known as anchor tags.

The href Attribute

The link address is specified in the href attribute

Snippet for link tag given as follows:

<a href="https://ecommarket.in">This is a link</a>

Total working code given as follows:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<a href="https://ecommarket.in">This is a link</a>
</body>
</html>

It looks like as follows in the Web browser:

Down below is the HTML file for link, you can download.



Images

Images are defined using the <img> tag. It is a self-closing tag, i.e., it does not require a closing tag.

Now there are a few basic properties or to be more specific attributes attached to the <img> tag, which are src, short for source file, alt, short for an alternative text, width, height which stands for as their name is i.e., for the width and height of the image.

The src Attribute

The image name or the image url is specified with in the src attribute .

The alt Attribute

The text you want to show in the web-browser if the image doesn’t load is specified within the alt attribute.

The width and height Attribute

HTML images also have width and height attributes, which specifies the width and height of the image

Snippet for image tag given as follows:

<img src="Over Here goes the image link or address where the image is" alt="The text you want to show if the image doesn't load or render" width="140" height="142">

Total working code given as follows:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<img src="Over Here goes the image link or address where the image 
         is" alt="The text you want to show if the image doesn't load or 
         render" width="140" height="142">
</body>
</html>

It looks like as follows in the Web browser:

output of a image in html

Down below is the HTML file for image, you can download.



Buttons

Buttons are defined using <button> tag

Snippet for button tag given as follows:

<button>Click Me!</button>

Total working code given as follows:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<button>Click Me!</button>
</body>
</html>

It looks like as follows in the Web browser:

button in html

Down below is the HTML file for button, you can download.



Lists

Now there are two kinds of lists:

  1. Unordered or Bullet List
  2. Ordered or Numbered List

1. Unordered or Bullet List

It is defined using the <ul> tag and each list item within the list goes within the <li> tag. All the <li> tags are nested in between the <ul> </ul> tags.

Snippet for unordered list tag given as follows:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

Total working code given as follows:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<ul>
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
		<li>Item 4</li>
	</ul>
</body>
</html>

It looks like as follows in the Web browser:

Down below is the HTML file for unordered list, you can download.



2. Ordered or Numbered List

It is defined using the <ol> tag and each list item within the list goes within the <li> tag.Again, all the <li> tags are nested in between the <ol> </ol> tags.

Snippet for ordered list tag given as follows:

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>

Total working code given as follows:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<ol>
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
		<li>Item 4</li>
	</ol>
</body>
</html>

It looks like as follows in the Web browser:

list

Down below is the HTML file for ordered list, you can download.

I will be uploading furthermore tutorials on it and comment down below whether the article was helpful or not. Feel free to suggest improvements.

See yaa soon!😉

To check out the article on introduction to Web Development Tutorial: Click Here

10 thoughts on “HTML Basic – HTML Tutorials – Web Development”

  1. Good but it should be great if there is example like open a text pad put the following lines and save it in some drive with html extension. And see the magic. Your article might not be of great help is user is very new .

    1. Thanks for the feedback. I have updated the article and tried to cover up all the points as you mentioned.

  2. Catch me if you can

    1. If you have already assumed the reader of this blog knows html basic then you don’t need this .but if you think it is for beginners so you need to keep you own assumption aside..
    2. For beginners who will read and try to do something by reading your blog, it will not help them..
    3. Where is how to guide to run the snippet for beginners?
    4. Again who are the viewers you have targeted to read your technical blogs that’s very important..always keep it a point.

    Overall good attempt but do think from.a reader prospective and their expectations.

    1. Thanks for the feedback. I have updated this article and I hope now that all your points must be cleared now based upon the updated article.

Leave a Comment

Your email address will not be published. Required fields are marked *