Scribd
Upload
0 views

1. Introduction of HTML

HTML, or Hyper Text Markup Language, is used for creating web pages and applications, enabling links between documents and formatting text. The document outlines the history, versions, features, and basic building blocks of HTML, including tags, attributes, and elements. It also provides guidance on using text editors like Notepad and Sublime Text for writing HTML code.

Uploaded by

kyadav7042
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0 views

1. Introduction of HTML

HTML, or Hyper Text Markup Language, is used for creating web pages and applications, enabling links between documents and formatting text. The document outlines the history, versions, features, and basic building blocks of HTML, including tags, attributes, and elements. It also provides guidance on using text editors like Notepad and Sublime Text for writing HTML code.

Uploaded by

kyadav7042
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 38

HTML is an acronym which

INTRODUCTION stands for Hyper Text Markup


Language which is used for
TO creating web pages and web
HTML applications. Let's see what is
meant by Hypertext Markup
Language, and Web page.
What is HTML

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.
Web Page: A web page is a document which is commonly written in HTML and translated by a
web browser. A web page can be identified by entering a URL. A Web page can be of the static
or dynamic type. With the help of HTML only, we can create static web pages.
HTML Example
Description of HTML Example

<!DOCTYPE>: It defines the document type or it instruct the browser about the version of HTML.
<html>: This tag informs the browser that it is an HTML document. Text between html tag
describes the web document. It is a container for all other elements of HTML except <!DOCTYPE>
<head>: It should be the first element inside the <html> element, which contains the
metadata(information about the document). It must be closed before the body tag opens.
<title>: As its name suggested, it is used to add title of that HTML page which appears at the top
of the browser window. It must be placed inside the head tag and should close immediately.
<body>: Text between body tag describes the body content of the page that is visible to the end
user. This tag contains the main content of the HTML document.
<h1>: Text between <h1> tag describes the first level heading of the webpage.
Brief History of HTML

In the late 1980's, a physicist, Tim Berners-Lee who was a contractor at CERN, proposed a system
for CERN researchers. In 1989, he wrote a memo proposing an internet based hypertext system.
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. The latest version of HTML is HTML5,
which we will learn later in this tutorial.
HTML Versions

Since the time HTML was invented there are lots of HTML versions in market, the brief
introduction about the HTML version is given below:
HTML 1.0: The first version of HTML was 1.0, which was the barebones version of HTML
language, and it was released in1991.
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.
HTML 5: 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 facilitates programmers to add a link on the web pages (by html anchor tag), so it enhances
the interest of browsing of the user.
• 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.
HTML Text Editors

• 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.
• In our tutorial, we will use Notepad and sublime text editor. Following are some easy ways to
create your first web page with Notepad, and sublime text.
HTML Code with Notepad (Recommended for Beginners)

• Notepad is a simple text editor and suitable for beginners to learn HTML. It is available in all
versions of Windows, from where you easily access it.
Step 1: Open Notepad (Windows)
HTML Code with Notepad. (Recommended for Beginners)

Step 2: Write code in HTML


HTML Code with Notepad. (Recommended for Beginners)

Step 3: Save the HTML file with .htm or .html extension.


HTML Code with Notepad. (Recommended for Beginners)

Step 4: Open the HTML page in your web browser.


To run the HTML page, you need to open the file location, where you have saved the file and
then either double-click on file or click on open with option
HTML Code with Notepad. (Recommended for Beginners)

Step 4: Open the HTML page in your web browser.


HTML code with Sublime Text-editor (Recommended after learning basics of HTML)

Step 1: Open Sublime


Text editor(Windows 8):
To open Sublime Text editor
go to Start screen ⤏ type
Sublime Text⤏ Open it. To
open a new page press
CTRL+N.
HTML code with Sublime Text-editor.(Recommended after learning basics of HTML)

Step 2: Save the page before writing any code.


To save your page in Sublime Text press Ctrl+S or go to File option ⤏ save, to save a file use
extension .htm or .html. We recommend to save the file first then write the code because
after saving the page sublime text editor will give you suggestions to write code.
HTML code with Sublime Text-editor.(Recommended after learning basics of HTML)

Step 3: Write the code in Sublime Text editor


HTML code with Sublime Text-editor.(Recommended after learning basics of HTML)

Step 4: Open the HTML page in your Browser


To execute or open this page in Web browser just right click by mouse on sublime text page
and click on Open in Browser.
HTML code with Sublime Text-editor (Recommended after learning basics of HTML)

Step 4: Open the HTML page in your Browser


Building blocks of HTML

An HTML document consist of its basic building blocks which are:


• 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.

Syntax

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.
Building Blocks of HTML

Example
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. HTML tags contain three main parts: opening tag, content and closing tag. 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.
An HTML file must have some essential tags so that web browser can differentiate between a
simple text and HTML text. You can use as many tags you want as per your code requirement.
• 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)
HTML Tags

Syntax

HTML Tag Examples


HTML Attribute

• HTML attributes are special words which provide additional information about the elements or
attributes are the modifier of the HTML element.
• Each element or tag can have attributes, which defines the behaviour of that element.
• Attributes should always be applied with start tag.
• The Attribute should always be applied with its name and value pair.
• The Attributes name and values are case sensitive, and it is recommended by W3C that it
should be written in Lowercase only.
• You can add multiple attributes in one HTML element, but need to give space between two
attributes.
HTML Attribute
HTML Attribute
HTML Attribute

The title attribute in HTML


The title attribute is used as text tooltip in most of the browsers. It display its text when user move
the cursor over a link or any text. You can use it with any text or link to show the description about
that link or text. In our example, we are taking this with paragraph tag and heading tag.
HTML Attribute
HTML Attribute
HTML Attribute

The href attribute in HTML


The href attribute is the main attribute of <a> anchor tag. This attribute gives the link address
which is specified in that link. The href attribute provides the hyperlink, and if it is blank, then it
will remain in same page.
HTML Attribute

The src Attribute


The src attribute is one of the important and required attribute of <img> element. It is source
for the image which is required to display on browser. This attribute can contain image in same
directory or another directory. The image name or source should be correct else browser will not
display the image.
HTML Attribute

Quotes: single quotes or double quotes?


In this chapter you have seen that, we have used attribute with double quotes, but some
people might use single quotes in HTML. So use of single quotes with HTML attribute, is also
allowed. The following both statements are absolutely fine.
<a href="https://www.javatpoint.com">A link to HTML.</a>
<a href='https://www.javatpoint.com'>A link to HTML.</a>

In HTML5, you can also omit use of quotes around attribute values.
<a href=https://www.javatpoint.com>A link to HTML.</a>
HTML Elements

An HTML file is made up of elements. These elements are responsible for creating web pages
and define content in that webpage. An element in HTML usually consist of a start tag <tag
name>, close tag </tag name> and content inserted between them. Technically, an element is
a collection of start tag, attributes, end tag, content between them.
HTML Elements

All the content written between body elements are visible on web page.
Void element: All the elements in HTML do not require to have start tag and end tag, some elements
does not have content and end tag such elements are known as Void elements or empty elements.
These elements are also called as unpaired tag.
Some Void elements are <br> (represents a line break) , <hr> (represents a horizontal line), etc.
Nested HTML Elements: HTML can be nested, which means an element can contain another
element.
Block-level and Inline HTML elements
For the default display and styling purpose in HTML, all the elements are divided into two categories:
1. Block-level element
2. Inline element
Block-level element: These are the elements, which structure main part of web page, by dividing a
page into coherent blocks. A block-level element always start with new line and takes the full width of
web page, from left to right. These elements can contain block-level as well as inline elements.
Following are the block-level elements in HTML.
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>,
<figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>,
<noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>.
HTML Elements
HTML Elements

Inline elements: Inline elements are those elements, which differentiate the part of a given
text and provide it a particular function.
These elements does not start with new line and take width as per requirement.
The Inline elements are mostly used with other elements.
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>,
<em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>,
<select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.
HTML Elements
HTML Elements
Thank
You!

You might also like