Scribd
Upload
3 views

Introduction_To_HTML

HTML, or Hyper Text Markup Language, is the standard markup language for creating web pages, using markup tags to describe the structure and content of a page. It consists of elements that inform the browser how to display text, images, and links, and includes essential tools like HTML editors and web browsers for creating and viewing HTML documents. The document also covers HTML syntax, common tags, attributes, and special characters, along with the evolution of HTML versions over the years.

Uploaded by

GeethaRaju1
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
3 views

Introduction_To_HTML

HTML, or Hyper Text Markup Language, is the standard markup language for creating web pages, using markup tags to describe the structure and content of a page. It consists of elements that inform the browser how to display text, images, and links, and includes essential tools like HTML editors and web browsers for creating and viewing HTML documents. The document also covers HTML syntax, common tags, attributes, and special characters, along with the evolution of HTML versions over the years.

Uploaded by

GeethaRaju1
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 46

INTRODUCTION

TO HTML
INTRODUCTION TO
HTML
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is a markup language
A markup language is a set of markup tags
HTML uses markup tags to describe web pages
INTRODUCTION TO
HTML
•HTML stands for Hyper Text Markup Language
•HTML is the standard markup language for creating Web pages
•HTML describes the structure of a Web page
•HTML consists of a series of elements
•HTML elements tell the browser how to display the content
•HTML elements label pieces of content such as "this is a
heading", "this is a paragraph", "this is a link", etc.
WORLD WIDE WEB

The World Wide Web (abbreviated as WWW or W3 and


commonly known as the Web)is a system of
interlinked hypertext documents accessed via the Internet.
With a web browser, one can view web pages that may contain
text, images, videos, and other multimedia and navigate
between them via hyperlinks.
HTML TOOLS

There are two tools of HTML.


a)HTML Editor: it is the program that one
uses to create and save HTML documents.
They fall into two categories:
- Text based or code based which allows one
to see the HTML code as one is creating a
document.e.g. Notepad.
- Netscape composer
HTML TOOLS
b) Web Browser: it is the program that one uses to view and test
the HTML documents. They translate Html encoded files into
text,image,sounds and other features user see. Microsoft
Internet Explorer,Netscape,Mosaic Chrome are examples of
browsers that enables user to view text and images and many
more other World Wide Web featueres.They are software that
must be installed on user computer.
HTML TERMINOLOGIES
Some commonly used terms in HTML are:
a)Tag: Tags are always written within angles brackets. it is a
piece of text is used to identify an element so that the browser
realizes how to display its contents.e.g.<HTML> tag indicates
the start of an HTML document .HTML tag can be two types.
They are:-
-Paired Tags :A tag is said to be a paired tag if text is placed
between a tag and its companions tag.In paired tag ,the first tag
is referred to as opening tag and the second tag is referred to
as closing tag.
-Unpaired Tags: An unpaired tag does not have a companion
tag .unpaired tag also known as singular or Stand-Alone
tags.e.g:<br>,<hr> etc.
HTML TERMINOLOGIES
b) Attribute: Attribute is the property of a tag that specified in the
opening angle brackets. It supplies additional information like
color,size,home font-style etc to the browser about a tag. E.g. most of
the common attributes are height, color, width, src, border, align etc.
c) DTD: Document Type Definition is a collection of rules written in
standard Generalized Markup Language(SGML). HTML is define in
terms of its DTDs. All the details of HTML tags, entities and related
document structure are defined in the DTDs.
d) ELEMENT: Element is the component of a document’s structure such
as a title, a paragraph or a list. It can include an opening and a closing
tag and the contents within it.
A SIMPLE HTML
DOCUMENT
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
A SIMPLE HTML
DOCUMENT
<!DOCTYPE html> The <!DOCTYPE html> declaration defines that
<html> this document is an HTML5 document
<head>
<title>Page The <html> element is the root element of an
Title</title> HTML page
</head>
<body> The <head> element contains meta information
about the HTML page
<h1>My First
Heading</h1> The <title> element specifies a title for the HTML
<p>My first page
paragraph.</p>
The <body> element defines the document's
</body> body
</html> The <h1> element defines a large heading
The <p> element defines a paragraph
What is an HTML
element?
An HTML element is defined by a start tag, some content, and
an end tag:
<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end
tag:

<h1>My First Heading</h1>


<p>My first paragraph.</p>
How to
The essential tags that are required to create a HTML document
are:
<HTML>.............</HTML>
<HEAD>.............</HEAD>
<BODY>.............</BODY>
Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is
to read HTML documents and display them correctly.
A browser does not display the HTML tags, but uses them to
determine how to display the document:
HTML Page Structure
The Evolution of HTML
Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
The Evolution of HTML
Year Version
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2
HTML Documents
All HTML documents must start with a document type declaration: <!
DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is
between <body> and </body>.
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
The <!DOCTYPE>
Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers
to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading.
<h6> defines the least important heading:

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> tag:
<a href="https://www.abc.com">This is a link</a>

The link's destination is specified in the href attribute.

Attributes are used to provide additional information


about HTML elements.
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width,
and height are provided as attributes:

<img src=“flower.jpg" alt=“flower" width="104" h


eight="142">
HTML Attributes
•All HTML elements can have attributes
•Attributes provide additional information about elements
•Attributes are always specified in the start tag
•Attributes usually come in name/value pairs like: name="value"
HTML Attributes
•The href attribute of <a> specifies the URL of the page the link
goes to
•The src attribute of <img> specifies the path to the image to be
displayed
•The width and height attributes of <img> provide size
information for images
•The alt attribute of <img> provides an alternate text for an
image
•The style attribute is used to add styles to an element, such as
color, font, size, and more
•The lang attribute of the <html> tag declares the language of the
Web page
•The title attribute defines some extra information about an
element
Character Formatting Tag
The character formatting tags are used to specify how a
particular text should be displayed on the screen to distinguish
certain characters within the document.
The most common character
formatting tags are
Boldface <B>: displays text in BOLD
◦ Example: Welcome to the <B> Internet World </B>
◦ Output: Welcome to the Internet World

Italics <I>: displays text in Italic


◦ Example: Welcome to the <I> Internet World </I>
◦ Output: Welcome to the Internet World

Subscript <SUB>: displays text in Subscript


Superscript <SUP>: displays text in Superscript
Small <SMALL>: displays text in smaller font as compared to normal font
Big <BIG>: displays text in larger font as compared to normal font
Underline<U>specifies that the enclosed text be underline
◦ Example:<U> hello</u>
◦ Output: hello
Font Colors and
Size:<FONT>
By using <FONT> Tag one can specify the colors, size of the text.
Example:
<FONT> Your text goes here </FONT>
Attributes of <FONT> are:
- COLOR: Sets the color of the text that will appear on the
screen. It can be set by giving the value as #rr0000 for red (in
RGB hexadecimal format), or by name. Example: <FONT
COLOR="RED"> Your text goes here </FONT>
Font Colors and
Size:<FONT
SIZE: Sets the size of the text, takes value between 1 and
7, default is 3. Size can also be set relative to default size
for example; SIZE=+X, where X is any integer value and it will
add with the default size.
Example:
<FONT SIZE=5> Font Size changes to 5 </FONT>
FACE: Sets the normal font type, provided it is installed on the
user’s machine.
Example:
<FONT FACE="ARIAL"> the text will be displayed in
Arial</FONT>
MARQUEE TAG
This tag is used text horizontally across the screen.it is mainly
used to deliver a specfic message to the visitor or to scroll Ads
on a page.
Example: <marquee> hello world></marquee>
Attributes of marquee tag
Bgcolor : Sets the background color of the marquee.
Direction :Sets the direction of the marquee box to either left-
to-right, right-to-left, up-to-down and down-to-up.
Width: This sets how wide the marquee should be.
Loop: This sets how many times the marquee should 'Loop' its
text. Each trip counts as one loop.
Paragraph Formatting
Tag
Paragraph level formatting applies to formatting of an entire
portion of text unlike character level tags where only individual
letters or words are formatted.
Using paragraph tag: <P>
It is used to separate two paragraphs with a blank line.
The most common
paragraph formatting tags
are
Example:
<P> Welcome to the world of HTML </P>
<P> First paragraph. Text of First paragraph goes here</P>
Output:
Welcome to the world of HTML
First paragraph. Text of First paragraph goes her
Using Line Break Tag:
<BR>
The empty tag <BR> is used, where the text needs to start from a
new line and not continue on the same line. To get every sentence
on a new line, it is necessary to use a line break.
Example:
<BODY>National Institute of Open Schooling <BR>
B-31B, Calipash Colony <BR>
New Delhi-110048</BODY>
Output:
National Institute of Open Schooling
B-31B, Calipash Colony
New Delhi-11004
Using Preformatted Text
Tag: <PRE>
<PRE> tag can be used, where it requires total control over s p a c i n g a n
d line breaks such as typing a poem. Browser
preserves your space and line break in the text written inside the tag.
Example:
<PRE>
National Institute of Open Schooling
B-31B, Kailash Colony
New Delhi-110048
</PRE>
Output:
National Institute of Open Schooling
B-31B, Kailash Colony
New Delhi-11004
An HTML document control.html shows the
use of <P>,
<BR> and <PRE>
<HTML>
<HEAD>
<TITLE>
Use of Paragraph, Line break and preformatted text Tag
</TITLE>
</HEAD>
<BODY>
HTML Tutorial
<P>
HTML stands for Hypertext Markup Language
It is used for creating web page. It is very simple
and easy to learn.
An HTML document control.html shows the use of
<P>,
<BR> and <PRE>
</P>
<P>
HTML stands for Hypertext Markup Language.<BR>
It is used for creating web page. It is very simple<BR>
and easy to learn.<BR>
</P>
<PRE>
HTML stands for Hypertext Markup Language
It is used for creating web page. It is very simple
and easy to learn.
</PRE>
</BODY>
</HTML>
OUTPUT
HTML Tutorial
HTML stands for Hypertext Markup Language. It is used for
creating web page. It is very simple and easy to learn.

HTML stands for Hypertext Markup Language.


It is used for creating web page. It is very simple
and easy to learn.

HTML stands for Hypertext Markup Language.


It is used for creating web page. It is very simple
and easy to learn.
Using Horizontal Rule
Tag: <HR>
An empty tag <HR> basically used to draw lines and horizontal
rules. It can be used to separate two sections of text.
Example:
<BODY>
Your horizontal rule goes here. <HR>
The rest of the text goes here.
</BODY>
Output:
Your horizontal rule goes here.

The rest of the text goes her


<HR> accepts following
attributes
SIZE: Determines the thickness of the horizontal rule. The value is given as a pixel value.
Example: <HR SIZE="3">
WIDTH: Specifies an exact width of HR in pixels, or arelative width as percentage of the
document width.
Example: <HR WIDTH="50%">, horizontal rule a width a 50 percent of the page width.
ALIGN: Set the alignment of the rule to LEFT, RIGHT and CENTER. It is applicable if it is not
equal to width of the page.
NOSHADE: If a solid bar is required, this attribute is used; it specifies that the horizontal
rule should not be shaded at all.
COLOR: Set the color of the Horizontal rule.
Example: <HR COLOR="BLUE“>
Example of <HR> with its attribute:
<HR ALIGN=' 'CENTER' ' WIDTH=' '50%' ' SIZE=' '3" NOSHADE
COLOR="BLUE“>
HEADING:
<H1>.............<H6>tags
HTML has six header tags <H1>, <H2>...........<H6> used to specify
section headings. Text with header tags is displayed in larger
and bolder fonts than the normal body text by a web browser.
Every .header leaves a blank line above and below it when
displayed in browse.
Example: An HTML document, headings.html
shows the different section headings
.
<HTML>
<HEAD>
<TITLE>
Section Heading
</TITLE>
</HEAD>
<BODY>
<H1> This is Section Heading 1 </H1>
<H2> This is Section Heading 2 </H2>
<H3> This is Section Heading 3 </H3>
<H4> This is Section Heading 4 </H4>
<H5> This is Section Heading 5 </H5>
<H6> This is Section Heading 6 </H6>
</BODY>
</HTML>
Viewing output of HTML
document
headings.html in browse
This is Section Heading 1
This is Section Heading 2
This is Section Heading 3

This is Section Heading 4


This is Section Heading 5
This is Section Heading 6
SPECIAL CHARTACTER

There are certain special characters that can be used while


creating document.Following are some special character:
Symbols Entity
©, ® &copy, &reg
¼, ½, ¾ &frac14, &frac12, &frac34
÷, <, >, ≤,≥ &divide, &lt, &gt, &le, &ge
& &amp
♣♠♥ &spades, &clubs, &hearts
All these special character must be ended with a semicolon;
Example:
<PRE>
The copyright symbol is: &COPY;
The registered rank is: &REG;
</PRE>
Output:
The copyright symbol is:©
The registered rank is:®
ADVANTAGES OF HTML

Easy to use
Loose syntax (although, being too flexible will not comply with
standards).
Supported on almost every browser, if not all browsers.
Widely used; established on almost every website, if not all
websites.
Very similar to XML syntax, which is increasingly used for data
storage.
Free - You need not buy any software.
Easy to learn & code even for novice programmers.
DISADVANTAGES OF HTML

It cannot produce dynamic output alone, since it is a static


language
Sometimes, the structuring of HTML documents is hard to
grasp
You have to keep up with deprecated tags, and make sure
not to use them
Deprecated tags appear because another language that
works with HTML has replaced the original work of the tag;
thus the other language needs to be learned (most of the
time, it is CSS)
Security features offered by HTML are limited

You might also like