HTML Tutorial

Step by Step HTML tutorial with examples. This complete tutorial series will guide you to work with HTML. Complete HTML tutorial for beginners as well as for professionals.

Introduction with HTML

Html is defined as HyperText Markup Language.
It is a standard markup language for specifying the structure and layout of a web page. Let us understand the HTML in detail.

WHAT IS HTML?

  • HTML was created by Tim Berners-Lee in 1991.
  • HTML is a language that allows you to create websites.
  • HTML is used by web browsers to render the readable document to the webpage.
  • HTML is a textual language that includes special markup tags and hyperlinks.
  • Html uses a series of elements to create a web page,
  • Html is stored in a simple text file that has either a .htm or a .html filename extension.

SYNTAX OF HTML :

  • All HTML documents must start with a document type declaration; <!DOCTYPE HTML> .
  • The HTML document itself begins with <html> and ends with </html>.
  • The visible part of the HTML document is between <body> and </body>.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>Heading from codedec. </h1>
<p>This is first Html Paragraph</p>

</body>
</html>

HTML TAGS:

  • Tags are used to mark up the start of an HTML element.
  • They are enclosed in angular brackets.
  • Most tags must be open and close in order to function.
  • Some common HTML tags are <html> <title> <body> <h1><p> <i> <img> <br/> <b>.

HTML TITLE:

  • The text inside the HTML tag which is shown on the page tab of the web browser.
  • An example of a title tag is:
<title>Introduction to HTML</title>

HTML HEADINGS

  • There are six levels of headings.
  • The heading elements are H1, H2, H3, H4, H5, and H6.
  • The HTML heading tag is defined as a title or a subtitle that you want to display on a webpage.
  • An example of a heading is:
<h1>Welcome to Codedec</h1>
<h2>Welcome to Codedec</h2>
<h3>Welcome to Codedec</h3>
<h4>Welcome to Codedec</h4>
<h5>Welcome to Codedec</h5>
<h6>Welcome to Codedec</h6>

OUTPUT:

BASIC HTML PARAGRAPHS

  • The Paragraph tag <p> is used to start a paragraph and will automatically format the text inside it.
  • The Break tag <br> used to break a line.
  • The Horizontal Rule <hr> tag is used to break a line.
  • The Preformatted tag <pre> represents exactly as written in the HTML file.
<p>
   This is line 1 This is line 2
</p>
<br />
<hr />
<pre>
   This is line 1
   This is line 2
</pre>

OUTPUT:

 HTML LISTS 

  • Unordered list –  a bullet list used to create the list of similar items in no specific manner.
<ul>
   <li>Burj Khalifa</li>
   <li>Shanghai Tower</li>
   <li>Abraj Al-Bait Clock Tower</li>
</ul>
  • Ordered list – To put the list under a sequence instead of a bullet list.
<ol>
   <li>Burj Khalifa</li>
   <li>Shanghai Tower</li>
   <li>Abraj Al-Bait Clock Tower</li>
</ol
  • Definition list –  It represents a term and a relevant description.
<dl>
   <dt>Burj Khalifa</dt>
     <dd>It is in Dubai</dd>
   <dt>Shanghai Tower</dt>
     <dd>It is in Shanghai</dd>
</dl>

OUTPUT:

Advantages and disadvantages of HTML

Advantages:

  • HTML is widely used.
  • HTML is platform-independent language .
  • HTML is an open-source.
  • HTML is supported by all Browsers.
  • HTML is Simple to Edit.
  • HTML is Lightweight.
  • HTML supports multiple framework languages.

Disadvantages:

  • HTML  security features are not up to the mark. 
  • HTML  needs to write a lot of code for a simple web page.
  • HTML Requires extra interpretation with extra interpretation by nonenglish.
  • HTML  creates static web pages, if we need dynamic pages then we need to use other languages with it.
  • Security features are not good at HTML.
  • If we need to write long code for making a webpage then it produces some complexity.

 VERSIONS AND UPDATES OF HTML

   HTML 1

  • HTML 1  was the first release of HTML and was released in 1993.
  • The basic version only supports text and images.

 HTML 2

  •  HTML 2 released in 1995 . 
  • Support for different browsers.
  •  W3C was formed to maintain HTML tags across different websites.

 HTML 3

  • HTML 3  released in 1997 . 
  • CSS was introduced and it was in the initial stage of development.
  • Support for adding complex mathematical equations was also added in this version.

 HTML 4

  • HTML 4 released in 1999 . 
  • Added support for stylesheet and scripting ability for multimedia elements.

  HTML 5

  • HTML 5 was released in 2011 and it is the latest upgrade of HTML.
  • It works for all the old browsers. 
  • In HTML 5 take audio, image, folders from 1 location to another by using the drop and drag feature. 
  • An enhanced user interface to reduce the need for javascript
  • HTML 5 is totally mobile-ready.