LEARN HTML
PUBLISHED BY :
BHUVAN SINGH RAJPUT
CONTENTS
1.INTRODUCTION
2.HTML
1.INTRODUCTION
Today, almost every person is affected by Internet. Millions
of people throughout the world use Internet to share
information, shopping, business, etc. Internet is become a
primary needs of every human.
World Wide Web is an Internet-based network of servers that
are interconnected through hypertext (i.e. hyperlinks,
etc.).The World Wide Web comprises a large collection of
document called web pages. A web pages is an electronic
document written in markup language called Hypertext
Markup Language (HTML).Each web page has a unique
address that identifies its location on the network , called
Uniform Resource Locator (URL).A web site is a collection of
many web pages, images, videos and other digital files
hosted on a web server. A web server is a computer program
that serves HTML page or files. The first web page of a web
site is called Home page.
1.1.HTML
In this book, I will talk about html from basic to
professional level.HTML is a markup language and you can
learn it within few days professionally. HTML is a cornerstone
technology used by most websites.
HTML is a markup language that web browsers (i.e. Google
chrome, opera mini, etc. use to interpret and compose text,
images, videos and other materials into visual web pages.
Default characteristics for every item of HTML elements are
pre-define in web browser, and these characteristics can be
enhanced by use of CSS.HTML was created by Berners-Lee in
late 1991.HTML5 is latest version which was published in
2012.
BASIC REQUIREMENT TO LEARN HTML :
1. You have a computer/laptop/tablet/Smartphone.
2. You have a text editor like notepad. But for Smartphone
you have just notepad app.
3. You have a web browser like Google chrome, internet
explorer, UC browser app for Smartphone.
In this book, I have my pc (personal computer).I have
notepad as a text editor and Google chrome as a web
browser.
Now let begin to learn our first chapter in html.
2.HTML – First Web page
We will now try to publish our first web page.
Now we look about HTML SYNTAX
Open notepad and type the following code :
<html>
<head>
My Website
<title> My first Webpage</title>
</head>
<body>
I am try to learn html
</body>
</html>
After typing, save the file with html extension, for example
mywebpage.html and click file type option, click on All File
and then click on save button.
Open file with browser like google chrome.
Output of above html is
Now start to understand above code.
Line below is called html element
<h1>this is a wepage<h1>
HTML elements generally consist of html tag.HTML tag is a
word or character enclosed within greater than and lesser
than sign <>.
Opening tag <html>
Closing tag </html>
An attribute is a special word or set of words contained in the
tag specify additional information such as color, font,etc.
Now, we start with <html> tag. This tag encloses the
complete HTML document mainly comprise of document
header which is represented by <html>.....</html> and
document body which is represented by <body> ..... </body>
tag.
<head> tag represent the document header which can keep
other HTML tag like <title>
<title> ..... </title> here we write the title which shown in
top of web browser as document title. In above code you see
MY First Webpage .
<body> which means here we write the text. Whatever we
write here in text will appear in the web browser. It also keep
other tag like <h1> , etc. In our code you see output as
I am try to learn html.
Now we close body tag </body>
At last we close html tag </html> which implies complete
html.
I think you get some idea about html. Don’t worry when you
study further you get answer of every question comes in your
mind.
3. HTML Basics
HTML RULES
1. Elements tags are not case sensitive , i.e., small letters and
capital letters are treated as same.For example, <H1>is same
as <h1>.
2. Attribute tags are also not case sensitive i.e., <b SIZE=2>
and <b size=2> is same.
3. Elements tags cannot contain spaces.
4. Web browsers ignore unknown elements and unknown
attributes.
5.Elements can be nested i.e., <b><u> text </u></b> is
correct format and <b><u> text </b></u> is incorrect.
3.1. HTML Attribute
Attribute Attribute value Explanation Example
Dir Ltr(default value) Display text <html dir=rtl>
Left to Right
Rtl Right to Left
Lang En,fr,zh,hi,etc. Specifies the <html
language you lang=hi>
have
generally
used within
the
document.
3.2. Body Tag
Now i will explain the tag which is using within body tag
<body>.
3.2.1. Paragraphs Tag
The <p> tag is used to create paragraph so that it is easy
to read your document. Each paragraph go between
opening <p> tag and closing </p> tag.
#Note: Automatically , with paragraph tag , Paragraph
will start from new line.
Code for <p> tag :
<body>
<p>I am try to learn html.It is a simple language to
learn.I love it
</p>
<p>It is second paragraph which created</p>
</body>
Result
3.2.2. Heading Tag
Any document starts with a heading.You can use different
sizes for your heading.There are 6 levels of headings in
html,which is use the elements <h1> , <h2> , <h3> , <h4> ,
<h5> , <h6> .
Note: While displaying any heading web browser adds one
line before and one line after that heading.
Code :
<body>
I am try to learn html
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
</body>
Result :
3.3.3. Line break tag
When we use line break element </br>, anything following it
start from next line.
Code :
<body>
<p>I am try to learn html.It is a simple </br>language to
learn.I love it
</p>
<p>It is second paragraph which created</p>
</body>
Result:
3.3.4. Center Tag
You can use <center> tag to put any content in the
center of the page.
Code :
<body>
<p>
I am try to learn html.It is a simple language to learn.I
love it
</p>
<center><p>It is second paragraph which
created</p></center>
</body>
Result :
3.3.5. Horizontal Line Tag
The <hr> tag is used to break up sections of a document.
It has no opening or closing tag.
Code:
<body>
<p>I am try to learn html</p><hr>
<p>It is second paragraph which created</p>
</body>
Results:
3.3.6. Address Tag
The ADDRESS tag is ued to contain information , such as
address, signature, etc.,for the html document.This tag
results in italicized text and typically placed at the
bottom of the document.
Coding :
<body>
<p>I am try to learn html</p>
<p>It is second paragraph which created</p>
<address> ADDRESS :J.K.Road,NH-86,Bhopal</address>
</body>
Result :
3.3.7.Bold Tag
It is used to make selected text as bold.
<b> .....</b>
Coding :
<body>
<b>I am try to learn html</b>
<p>It is second paragraph which created</p>
</body>
Result :
3.3.8.Italic Tag
It is used to mark selecting tag a italics.
<i> ..... </i>
Coding :
<body>
<b>I am try to learn html</b>
<i>It is italic text</i>
</body>
Result :
3.3.9. Underline Tag
This tag is used to underline the text.
<u>.....</u>
Coding :
<body>
<b>I am try to learn html</b>
<u>this is underline text</u>
</body>
Result :
3.8.10.Superscript Tag
It is used to mark the text as superscript.See the below
example to understand this tag.
Coding :
<body>
<b>I am try to learn html</b></br>
<u>this is underline text</u></br>
The square of 2 i.e., 2 <sup>2</sup> is 4
</body>
Result :
3.3.11.Subscript Tag
It is used to mark the text to appear as subscript.
Coding :
<body>
<b>I am try to learn html</b></br>
<u>this is underline text</u></br>
human inhales O <sub> 2</sub>
</body>
Result :
To get complete list of tags used in HTML document , see
appendix 1. Now, we will discuss some important tag ,
attributes and elements using in HTML document.
4. INSERTING IMAGES IN HTML DOCUMENT
4.1.Inserting background Images
You can inert an image as a background of document by
using background attribute of Body tag.The image will be
seen at the back of the text.You can only use background
color or background image at one time.
Images are available in different formats.Following are some
formats of images which mostly uses in web brower :
JPEG,GIF,PNG
Note : Full path of the image file is required to be given.File
name is given within the Quotes using background attribute.
Coding :
<body background="H:\bluetooth\pic's\KAFEEL (10).jpg">
<b>I am try to learn html</b></br>
<u>this is underline text</u></br>
human inhales O <sub> 2</sub>
</body>
Result :
4.2.Inserting images in any line
Now , we will be inserting image for display for meaningful
purpose so that user will attract towards the products,
remember we are not insert images as background because
we already add an image as background.
Now we use img tag with attribute src.
Note # Please carefully note the file path of image and paste
it in attribute.
Here we use this image to display –
Coding :
<body background="H:\bluetooth\pic's\KAFEEL (10).jpg">
<b>I am try to learn html</b></br>
<u>this is underline text</u></br>
<img src="H:\bluetooth\pic's\KAFEEL (24).jpg">
</body>
Result:
