HTML-Tutorial

HTML is defined as Hypertext markup language. it is used to build the structure of the web page.

Hi, friends, What do you understand from above line . As I expected you understand only what HTML do.Let’s see why we need HTML.

Did you faced problem while reading the document which is not structured well means without headings and not clear in readability?.

The reason that made up you discomfort while reading the document is the way it was written.
So to attract the reader the document should well structured and clear to read.

Here HTML comes into action, HTML helps to write the web page in form of proper document by using headings,sub-heading, paragraph etc. let’s dive into more deep.
If you want to display the word “Computer” as Heading on the Web page, how will you communicate with the browser?

Here you need a tool or language to communicate with the browser how the word computer should display whether as  Heading or paragraph or underlined word etc which is  HTML.

Through HTML programmer can instruct the browser how the web page element should display.

HTML-Tutorial

Table of content

  1. HTML-part-1
    1. Introduction
    2. HTML IDT tools
    3. HTML Basic
    4. HTML Elements
  2. HTML-Part-2
  3. HTML-Part-3

HTML-Introduction:


What is HTML?

  • HTML is defined as Hyper Text Mark up language.
  • HTML is used to build the Structure of the web page
  • HTML uses HTML elements to design the structure of the web page which acts as building block of the web
    page

What is HTML Element?

  • HTML element is defined as a building block of the web page.
  • HTML element is represented by Content within the element tags.
  • Each and every element of the HTML web page must represent with HTML element.

 

Eg:<h1> Computer</h1>.Here h1 is element name of the main heading and Computer is Content which is displays as the main heading.

What is HTML tags?

  • HTML tag is element name surrounded by angular brackets.
  • HTML tag consists of start tag and end tag.
  • HTML start and end tag of an element are same , but end tag contain / before the element name

Eg:<tag name></tag name>  , <h1></h1>

HTML Document Example:

<!doctype html>
<html>
<head>
<title> Title</title>
</head>
<body>
body content goes here
</body>
</html>

The result of above code:

body content goes here

Analysis of above HTML code

  • <!Doctype html> is used to tells the browser about the document as HTML
  • Every HTML page must start with <html> and ends with </html>.This is root element of HTML page.
  • The <head> element contains meta information which is used by Search bots to know about web page content.
  • The <title> tag is used to represent the title of the page which is visible on the browser tab.

 

title-tag-place-HTML-tutorial-for-beginners-1
title-tag-place
  • The <body> element contains all the data visible on the web page.

Note:* HTML tags are not case sensitive.You can use any case of the letter.

Ex:       <HTML></html> ,<HTML></HTML>,<html></html>.

Web browser:

Web browser is used to read the HTML code and display the web page as written in HTML document.

Ex: Google chrome, Microsoft Edge ,Mozilla Firefox, Opera.

Visual Presentation of Web page:

Html-page-visual-structure-HTML-tutorial
Html-page-visual-structure-HTML-Tutorial

 


HTML IDT Tools


IDT means Internet Development tool which is used to write the web page code. There are many free and paid IDT are available online to develop the web page.
Ex: Notepad, Dreamviewer,Notepad ++ etc
The basic IBT tool is notepad.
*Note: It is better to use simple text editor Notepad to learn web building which helps to remember the code.

Let’s see how to create web page document in Notepad step by step:

  • Step-1: Open text editor in Windows(Notepad) and in Mac(Text Edit)
    1. a.To Open the text editor by following the path given below according to OS
    2. i).In Windows Start > Programs > Accessories > Notepad
    3. ii). In MAC Finder > Applications > TextEdit
  • Step-2:Write some HTML code

Example:

<!doctype html5>
<html>
<head><title>Page title</title></head>
<body>
<h1> My Main Heading</h1>
<p> Paragraph text goes here......</p>
</body>
</html>
  • Step-3:Save the document with HTML extension (.html).

 How to create HTML webpage using notepad.


HTML Basic


HTML Basic covers all the concepts related to the basic elements which are necessary to build HTML web page.The following are the basic  elements

  • 1.HTML documents
  • 2.HTML Headings
  • 3.HTML Paragraphs
  • 4.HTML images
  • 5.HTML links

 

1. HTML documents

  • Every HTML document must start with document declaration which is “<!DOCTYPE HTML5>”.
  • Every HTML page must start with <HTML> and ends with </HTML>.
  • The visible content needs to be lies between <BODY></BODY>.

2.HTML Headings:

  • Headings are important to document a data to make readers identifies all the main topics in the document and the date comes under the topic.
  • To define the main topic in a web page , heading tags are available in different sizes according to their importance
  • The different Heading are H1 ,H2 ,H3 ,H4,H5,H6.
  • Among all headings H1 Heading is most important and H6 is least important

Table on Heading and their tags and sizes:

Serial no Heading Heading format Font-size
1   Heading 1(H1)  <H1></H1>  24px
 2   Heading 2(H2)  <H2></H2>  22px
 3   Heading 3(H3)  <H3></H3>  18px
 4   Heading 4(H4)  <H4></H4>  16px
 5   Heading 5(H5)  <H5></H5>  12px
 6   Heading 6(H6)  <H6></H6>  10px

Points to remember:

  • HTML headings are important for webpage to get indexed by search engine.
  • Every web page must contain Main heading  H1 and must follow the order start from H1 to H6.
  • Use HTML heading for heading only, don’t use them to show text BOLD.
  • Browser adds space before and after the heading.

3.HTML Paragraphs:

A paragraph is a basic thing while documentation of data. HTML paragraph are used to divide the huge data into separate paragraphs.

HTML paragraphs are represented by Tag <p></p>.

Note:*

  • The content which present lies between paragraph tag (<p></p> comes under a paragraph.
  • Paragraph separates whole data into parts.

Example:

<p>This is first paragraph</p>

<p>This is second paragraph</p>

Result of the above code:

This is first paragraph

This is second paragraph

HTML Links:

  • HTML links are used to connect pages and different data through clickable text or images.
  • HTML links are defined by using anchor tag ( <a></a>).

Syntax:

<a href=”url of the page or data “>Text to show on link</a>

Example:

<a href=”https://www.facebook.com/w3techtor/”>Click here</a>

Note:* Href attribute is used to specify the link destination.

I will discuss attribute with a detailed concept in Furthur post.

A result of the above code:

Click here

Note:* Default color of HTML link is Blue. You can change the color of the HTML link by using CSS.

HTML images:

In HTML, Images are represented by Image tag( <IMG>).

Syntax:

<img src=”source file address” alt=”alternative name of the image”  width=”X”  height=”Y” >

X-Width of the image

Y-Height of the image

Example:

<img src="https://i1.wp.com/w3techtor.com/wp-content/uploads/2017/05/cropped-wl-4.jpg?fit=280%2C87&ssl=1" alt="w3techtor logo" width="auto"  height="auto"/>

Result of the above code:

w3techtor logo-image-tag-image-element-example
Example image for image tag

HTML Elements:


What is an HTML Element?

  • An HTML Element is defined as a building block of a website.
  • Everything which is present on a web page is built with an Element.

Example HTML elements are  Headings ,table , div etc

 Syntax:

An HTML element is defined by using start tag and end tag as shown below.

Format : <tag name>Content goes here </tagname>.

The tag name is defined as the name of an element.

If it is a paragraph element. Tag name is p

Format to represent Paragraph element is

<p> Content goes here </p>

Example:

<p>This is paragraph element. </p>

The result of above code:

This is paragraph element.

Type of HTML Elements:

HTML elements are two types.They are

      • Most of all HTML elements are Double tag elements.Double tag elements should have an opening and closing tag.
      • A closing tag must contain  / before tag name.Double tag element.

Ex: <h1>Heading element </h1>  ,<body>Body element</body>

  • Single tag element:
    • Single tag element is defined as an element with an opening tag and there is no need to write closing tag.
    • Single tag element is also defined as Empty HTML element.

Ex : <img>(image element),</br>(line break element) etc

Note:*

  • HTML tags are not case sensitive. You can use any of the letter cases (upper case or lower case letters), but it is better to use lower case as per W3C standard recommendation.
  • Empty element such as <br> can be closed  in the opening tag such as </br>.

 

 

AuthorPrathap Sujyvera

Hi, This is prathap Sujayvera , Founder of W3Techtor. My passion towards learning new things and knowledge sharing made me start W3Techtor. In this blog I will regularly write and update posts related to web designing, web development ,digital marketing, Computer, Mobile and Internet technology tutorials and tips .Best products and up to date online coupons and offers

Leave a Reply