Learn HTML Basics

0
134

HTML is one of the most useful language for creating web pages. It is easy to learn. It is not a programming language because it does not contain any conditional statements like if-else or loops type statement. It’s a markup language. You can create your own website by using HTML. For designing of Website, we use CSS with HTML. CSS is little bit difficult but you can learn it in one or two weeks all you need is to learn and then start practicing. Make different types of sites and increase your experience.

So today we will learn the basics of HTML. Without wasting time let’s get started. First, open your notepad. Now start writing this, just write this code, I will explain it later.

<!DOCTYPE HTML>
<html>
<head>
<title>My First Web Page </title>
</head>
<body>
<h1> My First Heading </h1>
<p> This is my first paragraph </p>
</body>
</html>

After writing the above code on a notepad, go to “Files” select “All files” and save it with .html extension. See image below :

The result will be like this :

My First Heading

This is my first paragraph

TAGS INFORMATION

<!DOCTYPE HTML> = Defines that the document is HTML 5

<html> = This is root element of a webpage.

<head> = It contains meta information of a webpage like title,google verification codes,ads codes etc.

<tittle> = It shows the title of a document in browser.

<body> = This is very important tag, everything which show in the browser are written in this tag.

<p> = This tag is used to write paragraphs. we also use <pre> for paragraph.

Some people say it is not necessary to close a tag in HTML but you should close them because some browsers can generate errors. Open tag like this = <html> and close like this = </html>. Similarly open like this <p> and close it like this </p>. <tagname> Your content </tagname> . There are some tags in HTML that do not need a closing tag like <br>, you don’t need its closing tag like this </br>. It is used to break lines. See the example below.

<p> My first line <br> My second line </p>

The result will be like this :

My first line
My second line

HTML Versions

There are six HTML versions details are mentioned below :

HTML = 1991
HTML 2.0 = 1995
HTML 3.2 = 1997
HTML 4.01 = 1999
XHTML = 2000
HTML 5 = 2014

LIST WITH HTML

Now let’s see how to create a list with HTML. Write this code for making list :

<h1> Uordered List </h1>
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
</ul>
<h1> Ordered List </h1>
<ol>
 <li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li> 
</ol>

The result will be like this :

<li> = It defines list item.
<ul> = It is used to make unordered list (without numbers)
<ol> = It is used to make ordered list (with numbers)

RELATED : How to install Yoast SEO on WordPress?

HTML LINKS

Now we will learn about HTML links. It is very easy to make a link in HTML. For making link in HTML we use <a> tag. See below

<a href="www.opnmax.com"> OPNMAX </a>

The destination of the link is specified in the href attribute. The result will be like this :

OPNMAX

To add images in your HTML document we use <img> tag and src attribute for providing the destination of the image file. We use alt attribute if the image failed to load and width and height attribute for customizing the image. See below code.

<img src=”opnmax.jpg” alt=”image load failed but it is about opnmax” width=”104″ height=”142″>

CASE SENSITIVE

HTML is not a case sensitive language means capital ‘A’ and small ‘a’ are same but you should use small letters.

Now you have learned basics of HTML, there are many HTML tags we will only tell you the most important tags but you can learn more tags from google and can implement on your document because now you have completed basics of HTML.

STYLES IN HTML

Let’s move forward to some advanced HTML learning. How to change the color of the text? We use <style> attribute for styling our texts in HTML. See code below:

<tagname style=”property:value;“>

<p style=”color:blue”>This is a paragraph.</p>

The result will be like this :

This is a paragraph.

You can change the font size by coding like this.

 <p style="font-size:60px;">My Webpage</p> 
You can change the background color of your document by using this code :

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body> 

You can chnage font of your text by using this code :

<p style="font-family:courier;">This is a paragraph.</p> 

You can change the text allignment :

<p style="text-align:center;">Centered paragraph.</p> 
<p style="text-align:left;">Left paragraph.</p>  

HTML HEADINGS

<h1> defines the most important heading. <h6> defines the least important heading. Normally <h2> is a normal heading for blog purpose articles.

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

You can use <hr> tag, it will create a line after your previous content. See code and result.

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
 

The result will be like this.

This is heading 1

This is some text.


This is heading 2

This is some other text.


TITTLE ATTRIBUTES

We know about title tags but there is an attribute with the same name.

 <p title="I am OPNMAX">
This is a paragraph.
</p> 

The result will be like this :

This is a paragraph.

When you mouse over the above text it will show you a tooltip “I am OPNMAX”.

TEXT FORMATTING

 For bold text you can use <b> and <strong> tags.

<b>This text is bold</b> 
<strong>This text is strong</strong> 

For italic font you can use <i> and <em>

 <i>This text is italic</i> 
 <em>This text is emphasized</em> 

You can make your text look small by using <small> tag.

 <h1>HTML <small>Small</small> Formatting</h1> 

You can highlight a specif word of your content with <mark> tag.

 <h2>HTML <mark>Marked</mark> Formatting</h2> 

You can make your text look like this  blue by using <del> tag

 <p>My favorite color is <del>red</del> green </p> 

MORE TEXT FORMATTING TAGS

<sub>Defines subscripted text
<sup>Defines superscripted text
<ins>Defines inserted text

That’s all for today we will soon publish a new article in which we will teach you advance level of HTML and CSS. Read this article again and again and do practice as much as you can. Keep smiling, and don’t forget to share this tutorial with your friends and family. Hope you like it. Comment below your thoughts. Take care goodbye!

LEAVE A REPLY

Please enter your comment!
Please enter your name here