HTML
Web page
•A web page or webpage is a document
commonly written in HyperText Markup
Language (HTML) that is accessible
through the Internet or other network
using a browser.
•A web page is accessed by entering a URL
addresses and may contain text, graphics,
and hyperlinks to other web pages and
files.
Types of Web page
• Static WebPages are those fixed content WebPages
that are created and stored on a web server and
every time a request is made for the webpage by a
client, the same unvarying copy of the document is
rendered on the client browser.
• The content can only be changed by the Web
developer and all the users accessing the webpage
get a copy of the same document.
•A dynamic web page is a web page that
displays different content each time it's
viewed.
•For example, the page may change with
the time of day, the user that accesses
the webpage, or the type of user
interaction.
What is HTML
•HTML :- HTML Stands for Hypertext Mark-
up Language.
•Hypertext :- It refers to the way in which
Web Page (HTML Document ) are linked
together. When you click a link in a Web page
, you are using Hypertext.
•Mark-up Language :- it describe how HTML
works. With a mark-up language you simply
“mark up ” a text document with tags that tell
a browser how to structure it to display .
History of html
•From w3c (World Wide Web Consortium)
organization there are several versions
released .
HTML 1.0 1994
HTML 2.0 1995
HTML 3.0 1997
HTML 4.0 1998
HTML 4.01 1999
HTML 5.0 2008(unstable)-2014(stable)
HTML 5.1 2016
Basic HTML
HTML is a collection of predefined tags that
defines the display attribute of data.
Rules for HTML has been taken from Standard
Generalized Mark-up Language (SGML). It is the
mother mark-up language for other mark-up
languages.
HTML standards are defined and maintained by
W3C. World Wide Consortium. (up to version 4)
In 2004, WHATWG (Web Hypertext Application
Technology Working Group) was formed. The
WHATWG wanted to develop HTML, consistent with
how the web was used, while being backward
compatible with older versions of HTML.
Why Learn HTML
•It is possible to create webpage without
knowing anything about HTML Source behind
the page with smart editors.
•Why learn HTML :-
• You can use tags the editor does not support .
• You can read the code of other people page , and
“borrow ” the cool effect.
• You can do the work yourself when the editor
simply refuse to create the effect you want
Words to know
•Tags :- tag is command the web browsers
interprets .
Tags looks like :- <tag>
•Element:- A complete tag , having an
opening <tag> and a closing </tag>.
•Attribute :- Used to modify the value of the
HTML element . Elements will often have
multiple attribute.
HTML ELEMENT
•An HTML element is everything from start
tag to end tag.
Start Tags Element Content End Tags
<p> This is paragraph </p>
<a href=“default.html”> This is link
</a>
<br/>
HTML Element Syntax
•Syntax :-
An HTML elements start with a start tags /
opening tag
An HTML elements ends with a end tag /
closing tag
The element Content is everything
between the start tag and end tag.
Some HTML elements have empty content.
Empty elements are closed in the start tag.
Most HTML Elements can have attribute.
Need for Html
Software Requirement
1. Editor : Notepad, Notepad++, Sublime, gEdit
2. Browser : Chrome, Firefox, Safari
Steps to create and execute
1. Open Notepad
2. Type the document
3. Save It
NOTE : Extension should be .htm or .html
4. Open Browser
5. File | Open and Browse the html document
Types of tags
Paired Tag
Non paired Tag
Paired Tag :- These tags are having opening and closing
tag.
Example :- <html> </html>
<head> </head>
Non-paired Tag :- The tag that have only opening and
closing tag.
Example :- <br/> break
<hr/> horizontal tag
<img/> Image tag
Paired Types of tags
• These tags can be classified as :
1. Basic Tags
2. Formatting Tags
3. Lists
4. Tables
5. Anchors
6. Frames
7. Forms
Basic Tags/Structure of html document
<html> .. </html>
Marks the beginning and end of HTML Document
HTML document is divided in 2 parts
1. Head
All the things that needs to be loaded prior to
display is written within head.
2. Body
All the things that needs to be displayed is
written within body.
Example :---
<head> .. </head>
Head Part of HTML document
<body> .. </body>
Body Part of HTML document
<title> .. </title>
Defines the title to be displayed on Title
Bar is written within head part
Sample HTML Document
• <!-- My First HTML Page -->
<html>
<head> <title> Page One</title></head>
<body>
My First HTML Document.
</body>
</html>
Formatting Tags
HTML supports 6 levels of headings from h1 to h6
<h1> heading one </h1>
<h2> heading two </h2>
<h3> heading three </h3>
<h4> heading four </h4>
<h5> heading five </h5>
<h6> heading six </h6>
Formatting Tags
o
o
o
o
o
o
o
o
Formatting Tags
<hr/> Horizontal Ruler
Attributes :
1. noshade
2. width : specifies width is percentage
3. align : left, right, center*
Eg :
<hr noshade width="50%" />
<hr noshade />
<hr noshade width="50%" align="right“ />
Formatting Tags
<p> ..... </p> Paragraph
Attribute :
align : can be left, right, center, justify
<p align="justify"> This is paragraph.
</p>
•<pre> .... </pre> Preformatted Text
Formatting Tags
<marquee> …….</marquee>
Attributes :
1. direction : left, right
2. bgcolor : specifies background color
3. width : width is percentage
4. behavior : can be alternate, slide
5. scroll delay : scrolling speed
Eg :
• <marquee behavior="alternate" scrolldelay= 500
bgcolor="yellow" width="50%"> Scrolling Text
</marquee>
HTML Comment
•HTML Comment lines indicated by the
special tag <!-- and ending tag --> places at
the beginning and end of EVERY line to be
treated as a comment.
•For Example :-
<!-- This is commented out -->
