INTRODUCTION TO HTML
Lets discuss some of the words that we
use in our life.
INTERNET
WORLD
WIDE WEB
WEB SITE
(WWW)
HYPER TEXT
TRANSFER HYPERTEXT
WEB PAGE
PROTOCOL
(HTTP)
UNIFORM
RESOURCE WEB
LOCATOR WEB SERVER
(URL) BROWSER
World Wide Web
(WWW)
• The World Wide Web is most
often called the Web.
• The Web is a system of
interlinked hypertext documents
accessed via the Internet
Internet
Internet or Net is a computer
based world wide information
network composed of a large
number of smaller interconnected
networks
HTTP
Hyper Text transmission Protocol
is used for communication across
the Net
Web Server
It is a specialized powerful
computer used to publish pages
on the web and retrieve
information requested by the web
browser.
Examples:
Internet Information Server(IIS),
Apache Web Server
Web Browser
The Web Client use a software
that allows to navigate through
World Wide Web and display web
pages.
Examples:
Internet Explorer
Mozilla Firefox
Website
A collection of web pages
constitutes a website
Web page
It is an electronic document on the
internet that can contain any text
and graphics.
Hypertext
Hypertext is text that links to
other information.
URL
• Every resource available on the Web – HTML
document, image, video clip, program etc has an
address that may be encoded by a Universal
Resource Identifier, or Uniform Resource Locator.
• It’s format is
protocol :// Server name or domain name / resource
Eg:
http:// www.cbse.nic.in/public.htm
protocol :// Server name /resource
HOW DOES WWW WORK?
• Web information is stored in web pages.
• Web pages are files stored in web servers.
• Computer reading the web pages ( making request) are web
clients.
• Web clients view the pages through Web browser (Google
Chrome, Internet Explorer).
HOW DOES THE BROWSER FETCH THE PAGES?
A browser fetches a Web Pages
from a server by a request
A request is a standard HTTP request
containing a page address(URL)
HTML
• HTML Stands for "Hypertext Markup
Language.” HTML is the language used to
create WebPages. "Hypertext" refers to the
hyperlinks that an HTML page may contain.
• Hypertext is not simply text, it can include
graphics, videos and sounds.
HTML Doc Structure
<HTML> Identifies the doc as an HTML doc
<HEAD> Includes header information that is not displayed in the
browser window. This tag also contains the <Title> and
</Title> tag.
<TITLE> Contains document title that appears at the title bar
</TITLE>
</HEAD>
<BODY> The text between the <Body> and </Body> tags
is the text that will be displayed in your browser
</BODY>
</HTML> Tells the browser that this is the end of the
HTML document
HTML Tag
• HTML tag informs the browser
that it is dealing with HTML
document.
• If you leave it out, your
document will work fine today.
Head Tag
• The HEAD contains general
information, or meta – information,
about the document.
•The contents of the HEAD are not
displayed as part of the document
text.
Title Tag
• The title of a document is specified by
the TITLE element which should be
placed in the HEAD tag.
•Each document can have only one
title.
•The Title is not the document text and
cannot contain hypertext links or
special markup commands.
BODY tag
The BODY element contains all the
content of a document, as
opposed to the HEAD, which
contains information about the
document.
Various mark-up elements are
allowed within the body to
indicate heading, paragraphs, lists,
hypertext links, images and so on.
Headings
Headings are defined with the
<h1> to <h6> tags. <h1> defines
the largest heading <h6> defines
the smallest heading.
HTML automatically adds an extra
blank line before and after a
heading.
Paragraph
Element
Paragraph are defined with the
<p> tag.
HTML automatically adds an extra
blank before and after a
paragraph.
Line Breaks
<br> Tag
The <br> tag is used when you
want to end a line, but don’t want
to start a new paragraph.
Comments in
HTML
The comment tag is used to insert a
comment in the HTML source code. A
Comment will be ignored by the browser
Example:
<!- - This is a comment - ->
Horizontal rule
<hr> Tag
The <hr> tag is used to defines a
horizontal line in a web page .
Attributes of BODY tags
• Bgcolor
• Background
• Text
• Leftmargin
• Rightmargin
Bgcolor
The bgcolor attribute sets the
background to a specified color.
Text
Text attribute is used to change the text
colour, so as to make the text
attractive. We can specify colour name
or colour number as value of the
attribute.
Background
The background attribute sets the
background to an image. The
value of this attribute is the path
of the image you want to use.
Image file formats like jpeg, gif,
bmp etc can be used
Leftmargin
It is used to specify the left margin
of the webpage in pixels.
Topmargin
It is used to specify the top margin of
the webpage in pixels
Review of HTML tags
• <html>- describes an HTML document
• <head> -contains general information or meta-
information, about the document. It has <title> with it.
• <title> - which should be placed in the <HEAD> and
displays the title in the title bar of the web page.
• <body>- defines the document’s body
• <H1> to <H6>- defines header 1 to header 6
• <P> - defines a paragraph
• <br>- insert a single line break
• <hr>- defines a horizontal rule
• <!--> defines a document comment
HTML Exercise
1. Give one word for the following
a. Tag used to add section breaks.
b. A line of code that is not interpreted by a browser.
c. A popular text editor used for creating HTML documents.
d. Two possible extensions of an HTML file.
e. A tag used for displaying headings in a webpage
f. An attribute specifies the background colour of a webpage in HTML?
2. Fill in the blanks
a) There are ______________ levels of headings in HTML.
b) The special character to mark the end of a container tag is___________.
c) A collection of web pages linked together in a random order is called a
_______________.
d) __________________ provide additional information about tags/elements and are
attached to the tags/elements.
3. What is comment? Give one example.
