Introduction of HTML

Overview

HTML Stands for HyperText Markup Language which is used for creating web pages and web applications.

HTML Invented by Tim Berners-Lee in 1990. and Also known as the father of HTML.

HTML is a scripting language. It defines the structure and layout of a document.

Features of HTML

Independent Platform, It is not case sensitive, We can control fonts, sizes, colors, position using CSS

History of HTML

  • Tim Berners-Lee invented WWW in 1989
  • The first version of HTML invented by Tim Berners-Lee in 1991
  • HTML 2.0 which was published in 1995
  • HTML 4.1 which was published in 1999
  • and it was a primary version of HTML history
  • XHTML 1.0 Released in 2000 by W3C
  • HTML 5 Version was published in 2014 by W3C
  • HTML 5.1 is the latest version of HTML.
  • HTML 5.1 2nd Edition is the latest version of HTML.
  • It was released on 1st November 2016.
  • HTML 5.2 Released in 2017 by W3C
  • Follow the below table for History of HTML

HTML Overview

<!DOCTYPE> represents the document type, It tells the browser to display the data. (no need of close tag here)

An HTML element usually consists of a start tag and end tag.

<tagname> Content … </tagname>

All HTML Documents must start with document type declaration <!Doctype html>

The HTML document itself begins with <html> and ends with </html>

Head tag represents the document’s header and its start with <head> and close with </head>.

Note: It was not displayed in the browser. it helps search engines and the <title> tag is used inside the head tag to mention the document title.

The visible part of the HTML document is between <body> tag.

Basic HTML Tags

<html> 
<head>
<title>
<body>

Structure Formation

<!doctype html> 
<html>
 <head>
  <title> Document Title </title> 
  <meta description=""  content="" />
 </head>
  <body>
   <!-- Content Here -->
  </body>
</html>

Document save with test.html extension

What is Tag?

A tag is a command on a web page that tells the browser to do something. Tags are enclosed in less than (<) and greater than (>) signs.

What is an Element?

Elements having an opening <tag> and a closing </ tag>

What is Attribute?

Attribute: is used to change the value of an element in HTML

Image tag example: 

<img src=”image.png” />

Note: Some tags are closing by itself. Example is shown below

<img src="" /> <br/> <hr/> 

<br> br stands for brake line, it breaks the line of the code.

break tag doesn’t contain a close tag. it closes by itself. it was used to tell the browser to break the second line content.

<pre> </pre>

<pre> tag represents preformatted text. whitespace inside this element is displayed as typed.

pre-tag is used to display the content like what we write. it takes multiple spaces like tab space.

<code> tag is used for indicating a piece of code.

in this code tag, we can write any javascript code

<code>

Content …..

</code>

function myFunction() {
document.getElementById("demo").innerHTML = "Display text.";
}

HTML Headings

  • An HTML heading can be defined as a little of a subtitle that you want to display on the webpage.
  • There are six different HTML headings which are defined with the <h1> to <h6> tags.
  • <h1> defines the most important heading tag.

H1, H2, H3, H4, H5, H6 tags are used for heading.

<h1>  Heading </h1>
<h2>  Heading </h2>
<h3> Heading </h3>
<h4> Heading </h4>
<h5> Heading </h5>
<h6> Heading </h6>

Paragraph

  • HTML  Paragraph tag is used to define a paragraph in a webpage.
  • <p> element defines a paragraph.
<p> Lansum content Lansum content Lansum content </p>

HTML Formating

Formating elements were designed to display special types of text.

  • Bold
  • Italic
  • Marked text
  • Underline
  • Superscript
  • Subscript
  • Small
  • Big
  • Deleted
<b> Bold </b>
<i> Italic </i>
<mark> Mark </mark>
<u> Underline </u>
2<super>3  </super>
H<sub>2</sub>o
<small> Small text </small>
<big> Big text </open>
<deleted> 50% </deleted> 75% Discount

HTML Background

  • These are the attributes to change web page looking.
  • Attributes are used inside a tag and it follows name=”value”. ex: bgcolor=”pink”
  • bgcolor attribute is used to change the background-color in a webpage.
<body bgcolor="pink">
  Entire page will display in pink background
</body>
  • text attribute is used to change the text color in webpage.
<body bgcolor="pink" text="green"> Entire page will display in pink background </body>
  • background attribute is used to set an image as a background in a webpage.

Note: keep the image in a particular location, set the path in background.

<body bgcolor="pink" text="green" background="picture.jpg"> Entire page will display in pink background </body>

align tag is used for the position text.

<p align="center"> Center  </p> <p align="right"> Right</p>

HTML Images

  • You can insert any image in your web page by using <img> tag.
  • The simple syntax to use this tag is
<img src="picture.jpg" alt="Sports" />
  • The src attribute is used to give the address of the image with an extension.
  • The alt attribute is a mandatory attribute that specifies an alternate text for an image. (if image not available)
  • You can set the width and height for an image using width and height attributes.

 

<img src="picture.jpg" alt="Sports" width="250" height="250" />

you can set the position of the image using align attribute either center or right.

you can set the border.

<img src="picture.jpg" alt="Sports" width="250" height="250" border="2" />