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" />