Hyper Text Markup Language

What is HTML
HTML is stands for Hyper Text Markup Language which is used for creating web
pages and web applications.

Hyper Text: HyperText simply means "Text within Text." A text has a link within it,
is a hypertext. Whenever you click on a link which brings you to a new webpage,
you have clicked on a hypertext. HyperText is a way to link two or more web pages
(HTML documents) with each other.

Markup language: A markup language is a computer language that is used to

apply layout and formatting conventions to a text document. Markup language
makes text more interactive and dynamic. It can turn text into images, tables, links,
etc.
Brief History of HTML
Tim Berners-Lee is known as the father of HTML. The first available description of
HTML was a document called "HTML Tags" proposed by Tim in late 1991.

First Web Page:

http://info.cern.ch/hypertext/WWW/TheProject.html

The latest version of HTML is HTML5.

HTML Versions
Since the time HTML was invented there are lots of HTML versions in market.

HTML 1.0: The first version of HTML was 1.0, which was the barebones version of
HTML language, and it was released in 1991.

HTML 2.0: This was the next version which was released in 1995, and it was
standard language version for website design. HTML 2.0 was able to support extra
features such as form-based file upload, form elements such as text box, option
button, etc.
HTML 3.2: HTML 3.2 version was published by W3C in early 1997. This version
was capable of creating tables and providing support for extra options for form
elements. It can also support a web page with complex mathematical equations. It
became an official standard for any browser till January 1997. Today it is
practically supported by most of the browsers.

HTML 4.01: HTML 4.01 version was released on December 1999, and it is a very
stable version of HTML language. This version is the current official standard, and
it provides added support for stylesheets (CSS) and scripting ability for various
multimedia elements.
HTML5 : HTML5 is the newest version of HyperText Markup language. The first
draft of this version was announced in January 2008. There are two major
organizations one is W3C (World Wide Web Consortium), and another one is
WHATWG( Web Hypertext Application Technology Working Group) which are
involved in the development of HTML 5 version, and still, it is under development.
Features of HTML

It is a very easy and simple language. It can be easily understood and modified.

It is very easy to make an effective presentation with HTML because it has a lot of
formatting tags.

It is a markup language, so it provides a flexible way to design web pages along with
the text.

It is platform-independent because it can be displayed on any platform like

Windows, Linux, and Macintosh, etc.
It facilitates the programmer to add Graphics, Videos, and Sound to the web
pages which makes it more attractive and interactive.

HTML is a case-insensitive language, which means we can use tags either in

lower-case or upper-case.

NOTE: It is recommended to write all tags in lower-case for

consistency, readability, etc.
HTML Text Editor

● An HTML file is a text file, so to create an HTML file we can use any text editors.
● Text editors are the programs which allow editing in a written text, hence to
create a web page we need to write our code in some text editor.
● There are various types of text editors available which you can directly download,
but for a beginner, the best text editor is Notepad (Windows) or TextEdit (Mac).
● After learning the basics, you can easily use other professional text editors
which are, Notepad++, Sublime Text, Vim, etc.
Building Blocks of HTML

● Tags: An HTML tag surrounds the content and apply meaning to it. It is
written between < and > brackets.

● Attribute: An attribute in HTML provides extra information about the element,

and it is applied within the start tag. An HTML attribute contains two fields:
name & value.

<tag name attribute_name= " attr_value"> content </ tag name>

● Elements: An HTML element is an individual component of an HTML file. In
an HTML file, everything written within tags are termed as HTML elements.
<!DOCTYPE html>

<html>

<head>

<title>The basic building blocks of HTML</title>

</head>

<body>

<h2>The building blocks</h2>

<p>This is a paragraph tag</p>

<p style="color: red">The style is attribute of paragraph tag</p>

<span>The element contains tag, attribute and content</span>

</body>

</html>

** Save as buildingblocks.html
HTML Tags
HTML tags are like keywords which defines that how web browser will format and
display the content. With the help of tags, a web browser can distinguish between
an HTML content and a simple content. A start tag consists of an opening angle
bracket (<) followed by the element name, zero or more space separated
attribute/value pairs, and a closing angle bracket (>).

End tags consist of an opening angle bracket followed by a forward slash, the
element name, and a closing angle bracket:

But some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to
bottom and left to right. HTML tags are used to create HTML documents and
render their properties. Each HTML tags have different properties.
● All HTML tags must enclosed within < > these brackets.
● Every tag in HTML perform different tasks.
● If you have used an open tag <tag>, then you must use a
close tag </tag> (except some tags)
Example
<!DOCTYPE html>
<html>
<body>
<p> Paragraph Tag </p>
<h2> Heading Tag </h2>
<b> Bold Tag </b>
<i> Italic Tag </i>
<u> Underline Tag</u>
<hr>
</body>
</html>

**Save as tags.html
Attributes
● HTML attributes are special words which provide additional information
about the elements or attributes are the modifier of the HTML element.

Core Attributes

● Id

● Title

● Class

● Style

** Create a new html file as attributes.html and add following examples.

The Id Attribute

The id attribute of an HTML tag can be used to uniquely identify any element
within an HTML page.

Example:

<p id = "html">This para explains what is HTML</p>

<p id = "css">This para explains what is Cascading Style Sheet</p>

The title Attribute

The title attribute gives a suggested title for the element.

Example:

<h3 title = "Hello HTML!">Titled Heading Tag Example</h3>

The class Attribute

The class attribute is used to associate an element with a style sheet, and
specifies the class of element.

<h3 class = "className"> Class Example</h3>

The style Attribute

The style attribute allows you to specify Cascading Style Sheet (CSS) rules within
the element.

<p style = "font-family:arial; color:#FF0000;">Some text...</p>

HTML Comments
Comments are some text or code written in your code to give an explanation about
the code, and not visible to the user. Comments which are used for HTML file are
known as HTML comments. Anything written between these tags will be ignored
by the browser, so comments will not be visible on the webpage.

Syntax :

<! -- Write commented text here -->

Example
<!DOCTYPE html>
<html>
<!-- This is Header section -->
<head>
</head>

<!-- This is body section, write code here which you want to display on web-page -->
<body>
<!-- heading tag -->
<h2>My WebPage</h2>

<!-- Paragraph tag -->

<p>Write your Content here!!!</p>
</body>
</html>
HTML Formatting
HTML Formatting is a process of formatting text for better look and feel. HTML
provides us ability to format text without using CSS. There are many formatting
tags in HTML. These tags are used to make text bold, italicized, or underlined.

**create a HTML file as htmlformatting.html and add following changes.

<p>The following word uses a <b>bold</b> typeface.</p>

<p>The following word uses an <i>italicized</i> typeface.</p>

<p>The following word uses an <u>underlined</u> typeface.</p>

<p>The following word uses a <strike>strikethrough</strike> typeface.</p>

<p>The following word uses a <tt>monospaced</tt> typeface.</p>

<p>The following word uses a ^superscript typeface.</p>

<p>The following word uses a _subscript typeface.</p>

<p>I want to drink <del>cola</del> <ins>wine</ins></p>

<p>The following word uses a <big>big</big> typeface.</p>

HTML Headings
A HTML heading or HTML h tag can be defined as a title or a subtitle which you
want to display on the webpage. When you place the text within the heading tags
<h1>.........</h1>, it is displayed on the browser in the bold format and size of the
text depends on the number of heading.

**create a HTML file as headings.html and add following changes

<!DOCTYPE html>
<html>
<head>
<title>Heading elements</title>
</head>
<body>
<h1>Heading no. 1</h1>
<h2>Heading no. 2</h2>
<h3>Heading no. 3</h3>
<h4>Heading no. 4</h4>
<h5>Heading no. 5</h5>
<h6>Heading no. 6</h6>
</body>
</html>
HTML Paragraph
HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let's
take a simple example to see how it work.

**create a HTML file as paragraph.html and add following changes

<!DOCTYPE html>

<html>

<body>

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

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

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

</body>

</html>
HTML Anchor
The HTML anchor tag defines a hyperlink that links one page to another page. It
can create hyperlink to other web page as well as files, location, or any URL. The
"href" attribute is the most important attribute of the HTML a tag. and which links
to destination page or URL.

Syntax:

<a href = "..........."> Link Text </a>

**create a HTML file as anchor.html and add following changes.

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<p>Click on <a href="https://www.google.com/" target="_blank"> this-link

</a>to go on home page of Google</p>

</body>

</html>
HTML Images
HTML img tag is used to display image on the web page. HTML img tag is an
empty tag that contains attributes only, closing tags are not used in HTML image
element.

**create a HTML file as image.html and add following changes.

<!DOCTYPE html>
<html>
<head>
<title>Image tag</title>
</head>
<body>
<h2>HTML image example with height and width</h2>
<img src="animal.jpg" height="180" width="300" alt="animal image">
</body>
</html>
HTML Tables
HTML table tag is used to display data in tabular form (row * column). There can
be many columns in a row.

We can create a table to display data in tabular form, using <table> element, with
the help of <tr> , <td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by <th>, and
table data is defined by <td> tags.

HTML tables are used to manage the layout of the page e.g. header section,
navigation bar, body content, footer section etc. But it is recommended to use div
tag over table to manage the layout of the page .
<!DOCTYPE html>
<html>
<body>
<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
</body>
</html>
HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or
more list elements. There are three different types of HTML lists:

1. Ordered List or Numbered List (ol)

2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)
HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers by default. It
is known as numbered list also. The ordered list starts with <ol> tag and the list
items start with <li> tag.
HTML Ordered List or Numbered List Example

<!DOCTYPE html>
<html>
<body>
<ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>
</body>
</html>
HTML Ordered List or Numbered List Types:

<ol type="I">

<ol type="i">

<ol type="A">
<ol type="a">
HTML Unordered List or Bulleted List

In HTML Unordered list, all the list items are marked with bullets. It is also known
as bulleted list also. The Unordered list starts with <ul> tag and list items start with
the <li> tag.
HTML Unordered List or Bulleted List Example

<!DOCTYPE html>
<html>
<body>
<ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>
</body>
</html>
HTML Unordered List or Bulleted List Types

<ul type="circle">

<ul type="square">

<ul type="none">
HTML Description List or Definition List

The definition list is very appropriate when you want to present glossary, list of
terms or other name-value list.

The HTML definition list contains following three tags:

<dl> tag defines the start of the list.

<dt> tag defines a term.

<dd> tag defines the term definition (description).

HTML Description List or Definition List Example

<!DOCTYPE html>
<html>
<body>
<dl>
<dt>Aries</dt>
<dd>-One of the 12 horoscope sign.</dd>
<dt>Bingo</dt>
<dd>-One of my evening snacks</dd>
<dt>Leo</dt>
<dd>-It is also an one of the 12 horoscope sign.</dd>
</dl>
</body>
</html>
HTML Forms
An HTML form is a section of a document which contains controls such as text
fields, password fields, checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for
processing such as name, email address, password, phone number, etc. .
Why HTML Forms
HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user want to purchase some items on internet, he/she must fill
the form such as shipping address and credit/debit card details so that item can
be sent to the given address.

Syntax:

<form action="server url" method="get|post">

//input controls e.g. textfield, textarea, radiobutton, button

</form>
HTML Form Controls
● Text Input Controls

● Checkboxes Controls

● Radio Box Controls

● Select Box Controls

● File Select boxes

● Hidden Controls

● Clickable Buttons

● Submit and Reset Button

Simple Example

<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" /> <br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>