What is HTML ?
HTML Stands For HyperText markup language . Which
is basically use for design the structure of a web page.
• HTML tell the browser how to display the web content
• It was created by Sir Tim Berners-Lee in 1991.
• The first version of HTML, known as HTML 1.0, was released in 1993.
• HTML5 is the latest version of the HTML (2017*)
• First website [Link] is developed by Tim Berners-Lee
• HTML consists of a series of elements (tags)
• We use HTML Text editors to create a Web page.
@campusxchange_services @campusxchange_services @campusxchangeservices
HTML Versions ?
Version Year Features
HTML 1.0 1991 Basic text and links
HTML 2.0 1995 Forms and basic layout
HTML 3.2 1997 Tables, images, font styling
CSS integration, better
HTML 4.01 1999
structure
XHTML 2000 XML-based strict HTML
Multimedia, semantic tags,
HTML5 2017–Now
mobile support
Features of HTML
• Simple and Easy to Learn
• Platform Independent
• Supports Hyperlinks
• Allows Multimedia Integration
• Provides a Structured Document Format
• Works with CSS and JavaScript
• Fast and Lightweight
• Open Source and Free to Use
• Supports Responsive Web Design
HTML Text Editors
A HTML text editor is a software application used to write, edit, and
save HTML code. It allows developers to create web pages using plain
text files with the .html extension.
• Notepad
• Notepad++ OR Sublime Text
• Visual Studio Code
Structure of HTML Program
<!DOCTYPE html>
<html>
<head>
<title>Hello HTML Program </title>
</head>
<body>
Hello HTML
</body>
</html>
<!--!DOCTYPE HTML> : it define document type and the latest version HTML5
<html> : Starting point of html program
<head></head> : it contains metadata (information about page content) and external links
<title></title> : it contains title of your page which display as a tab name
<body> </body> : Inside this we write our all page elements
</html> : Ending point of html program
First Program in HTML
• Open Notepad in your PC if not installed download from official website
• Press Ctrl+N to create a new File
• Save with .html or .htm Extension in any Location (Best in Desktop)
• Write your code in this File
• Once you wrote your code go to the outside of texeditor and open the File
• You can see your Output
[Link] program
<!DOCTYPE html>
<!--!DOCTYPE define the latest version HTML5 -->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello HTML Program </title>
</head>
<body>
Hello HTML
</body>
</html>
HTML Comments
It is used to add notes or explanations about the code and it doesn’t display
in the webpage. Syntax:
<!-- Hello I am single line comments and -->
<!– Hello We are multi-line comments and
<!DOCTYPE html>
<html> we don’t display on browser screen. -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello HTML Program </title>
</head>
<body>
<!-- this is a basic HTML Program-->
Hello HTML
</body>
</html>
HTML Elements
An HTML element is collection of a start tag, some content, and an end tag.
Syntax: <tagname>content</tagname>
Example: <p>I am a paragraph </p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello HTML Elements</title>
</head>
<body>
<p>I am a paragraph </p>
</body>
</html>
Types of Elements
1. Block-level Elements
These elements start on a new line and occupy the full available with of their parent
container
Example: <div></div> , <p></p> , <h1></h1> , <ul></ul> , <table></table> , <form></form>
etc.
2. Inline Elements
These elements do not start on a new line and only take up as much width as their content
requires.
Example: <span></span> , <a></a> , <strong></strong> , <img> , <button><button>
HTML tags
HTML tags are the basic building blocks of a web page . It written inside angle brackets
< > that tell the browser how to display content on a webpage.
Example: <div></div> , <p></p> , <h1></h1> , <ul></ul> , <span></span> , <a></a> ,
<strong></strong>
1. Paired tags(open-close tag)
These tags always come in two parts – an opening tag <> and a closing tag </> .
Example: <p> Hello HTML !!</p> , <b> bold text </b>
2. Unpaired tags (open tag>
These tags are single and don’t need a closing tag because they don’t wrap any content.
Example: <br>
<img src=“[Link]”>
<hr>