Scribd
Upload
20 views

Chapter-II(Introduction of HTML)

Uploaded by

citecollege301
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
20 views

Chapter-II(Introduction of HTML)

Uploaded by

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

2.

Introduction of HTML

2.1 Introduction of HTML

 HTML is not programming language, but a markup language (A markup language


is a set of markup tags).
 Hyper Text Transfer Language (HTML) is a simple markup system used to create
hypertext documents that are portable from one platform to another.
 HTML provides a way of displaying web pages with text and images or multimedia
content.
 Using HTML, you can create your own website.
 An HTML file is a text file containing small markup tags, the markup tags tells the
web browser, such as Google Chrome or Opera Mini how to display the pages.
 Feature of HTML
 It is easy to learn and easy to use
 It is platform independent
 Images, videos and audio can be added to a web page
 Hypertext can be added to text.

2.2 Structure of HTML

The basic structure of HTML document consists of 5 elements.

a) < ! DOCTYPE >


A DOCTYPE declaration must be specified on the first line of each web document.
The DOCTYPE tells the web browser which version of HTML the page is written
in.
b) <html>
Immediately following the DOCTYPE declaration is the <html> element. The
<html> element tells the browser that the page will be formatted in HTML and,
optionally, which world language the page content is in.
c) <head>
The <head> element surrounds all the special “behind the scenes” elements of a
web document. Most of these elements do not get displayed directly on the web
page
d) <title >
The <title> element defines what text will show in the web browser’s title bar:
e) <body>
The <body> element surrounds all the actual content (text, images, videos, links,
etc.) that will be displayed on our web page.

HTML Tag :

Output:

2.3 Switching between opened Windows and browser

i. Container Tags

Those html tags which have both opening and closing tags called container
tags.
Opening tag
Closing Description
tag tag

<h1> to </h1> to Heading


<h6> </h6>
<p> </p> Paragraph
<div> </div> A container for block of content
<span> </span>A container for in-line content, such as
content inside a paragraph.
<em> </em> Gives the contained text emphasis
(usually as italics).
<strong> <strong> Makes the contained text bold.
< a href= </a> Link
“ “>
<ol> </ol> Ordered (numbered) list
<ul> </ul> Unordered (bulleted) list
<li> </li> List item, must be nested inside a list element
such as a <ol> or <ul>
<!-- --> Comment. Anything between these tags
is not displayed on the screen. This is
useful for making notes to yourself or to others who
may view the source code of the web page.

ii. Empty tags

The tags which requires only opening not closing tag in an html document is
called Empty tags or Non-container tags.

<br/> (for line break)


<img src ="image location" alt="alternate text" /> (for insert an image into
a web page)

iii. Attribute

Attributes define additional characteristics or properties of the element such


as width and height of an image. Attributes are always specified in the start
tag (or opening tag) and usually consists of name/value pairs
like name="value". Attribute values should always be enclosed in quotation
marks.
Also, some attributes are required for certain elements. For instance,
an <img> tag must contain a src and alt attributes. Let's take a look at some
examples of the attributes usages:
Examples:
<img src="images/smiley.png" width="30" height="30" alt="Smiley">
<a href="https://www.google.com/" title="Search Engine">Google</a>
<abbr title="Hyper Text Markup Language">HTML</abbr>
<input type="text" value="John Doe">

2.4 Basic tags of HTML: Html, Head, Title, body

a) Setting Font color and Background color


In html font color and background color set by using following tags tags

<! DOCTYPE html>


<html>
<head>
<title> Font color demo</title>
</head>
<body style="background-color: black">
<p style="color: red"> Demo for font color and background color </p>
</body>
</html>
Output:
b) Background image

In html background image is set by using following tags.

<! DOCTYPE html>


<html>
<head>
<title> Background Image Demo</title>
</head>
<style>
body {
background-image: url("Murti.png");
background-repeat: no repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</html>

Output:
c) Background Sound
In html Background sound is set by following tags

<! DOCTYPE html>


<html>
<head>
<title>
HTML Background Music
</title>
</head>
<body>
<p> Demonstraton of Background music in HTML </p>
<! -- background music for html -->
<audio src="maisap.mp3" autoplay loop></audio>
</body>
</html>
In above tags
 just use the <audio> tag, but try to place it near to the bottom of the page – So that
the audio loads last and users don’t have to stare at an empty page for long; Let the
text and images load first.
 The autoplay property should be self-explanatory – Automatically start playing
when the audio file is loaded.
 The loop property as well… Automatically loop when the audio has ended.

2.5 Heading tags (H1 to H6) and attributes (align)

HTML defines six levels of headings. A heading element implies all the font changes,
paragraph breaks before and after, and any white space necessary to render the heading.
The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most
important) level and H6 the least.
Example:

<! DOCTYPE html>


<html>
<head>
<title>
Heading Demo
</title>
</head>
<body>
<h1>title first </h1>
<h2>title second</h2>
<h3>title third</h3>
<h4>title fourth</h4>
<h5>title fifth</h5>
<h6>title sixth</h6>
</body>
</html>
Output :
Attribute alignment in html

<! DOCTYPE html>


<html>

<head>
<title>
HTML Alignment
</title>
</head>

<body>
<h1 align ="center"> Nepal Polytechnic Institute</h1>
<h2 align ="left"> Bharatpur </h2>
<h2 align ="Center"> Chitwan </h2>
<h2 align ="right"> Nepal </h2>
</body>
</html>

2.6 Font tags and attributes

i. Size: 1to 7

To maintain the size of font in html we can use <font size=” “> </font>
Tags

Examples:

<! DOCTYPE html>


<html>
<head>
<title> Font Size Demo</title>
</head>
<body>
<font size = "1">Font size</font> <br/>
<font size = "2">Font size</font> <br/>
<font size = "3">Font size</font> <br/>
<font size = "4">Font size </font> <br/>
<font size = "5">Font size </font> <br/>
<font size = "6">Font size </font> <br/>
<font size = "7">Font size </font>
</body>
</html>

Output:

ii. Base font and color

To manage the font style, color and size we can use following tags
<! DOCTYPE html>
<html>
<head>
<title>Basefont Demo</title>
<basefont color="black" size="5" face="arial">
</head>
<body>
<p>Example of Basefont tag</p>
</body>
</html>

iii. Small and Big

The <small> HTML element represents side-comments and small print, like
copyright and legal text, independent of its styled presentation. By default,
it renders text within it one font-size smaller, such as from small to x-small.
While The HTML <big> tag makes text one font size bigger in the HTML
document. This tag is also commonly referred to as the <big> element.

Examples:

<! DOCTYPE html>


<html>
<head>
<title>Small Big Demo </title>
</head>
<body>
<p> NPI<small> (Affiliated to CTEVT) </small> </p>
<p> Situated in <big> Bharatpur </big> </p>
</body>
</html>

2.7 Paragraph formatting (P) and Break Line BR

The HTML <p> element defines a paragraph. A paragraph always starts on a new line, and
browsers automatically add some white space (a margin) before and after a paragraph.
The browser does not recognize new line and paragraph formatting in the text. If you want
to start a new line, you need to insert a line break with the help of of the <br>. The
<br> tag insert a single carriage return or break in the document. This element has no
end tag.
Examples:

<! DOCTYPE HTML>


<html>
<head>
<title> Paragraph </title>
</head>
<body>
<p>
A router receives and sends data
on computer networks. </br> Routers are sometimes
confused with network hubs
, modems, or network switches. </br> However,
routers can combine
the functions of these components
, and connect with these devices, to improve Internet
access or help create business networks.
</p>
<p>
A switch is a device in a computer network
that connects other devices together. </br> Switches
manage the flow of data across a network by transmitting
a received network packet only
to the one or more devices for which the packet is intended.
</p>
</body>
</html>
Output:

2.8 Comment in html

HTML comments are not displayed in the browser, but they can help document your
HTML source code. An HTML comment begins with <! - - and the comment closes with
- - >.

Examples:

<! DOCTYPE HTML>

<html>

<head>

<title> Comment Demo </title>

</head>

<body>

<p>

Russia is the Biggest Country in the world

<! -- Area of Russia is 17.13 square km-->

</P>
</body>

</html>

2.9 Formatting text

 <b> tag is used to display the written text in bold letters.


 <i> tag is used to display the written text in italic forms.
 <u> tag is used to display the written text in underlined form.
 The <em> tag in HTML is a phrase tag and used to emphasize the text content. It
is similar to <italic> tag. The main difference between these two tag is the <em>
tag semantically emphasizes on the important word or section of words while <i>
tag is just offset text conventionally styled in italic to show alternative mood or
voice.
Examples:

<! DOCTYPE HTML>


<html>
<head>
<title> BIU and em Demo </title>
</head>
<body>
<p>
<b> Nepal Polytechnic Institute </b> <br/>
<i> Affiliated to CTEVT </i> <br/>
<u> Bharatpur, Chitwan </u> <br/>
<em> Largest Institute of CTEVT </em>
</p>
</body>
</html>
Output:

 The <blockquote> HTML element indicates that the enclosed text is an extended
quotation. Usually, this is rendered visually by indentation (see Notes for how to
change it).
Examples:
<! DOCTYPE HTML>
<html>
<head>
<title> Block quote Demo </title>
</head>
<body>
<figure>
<p>
If I have seen further than others, it is by standing upon the shoulders of giants.
</p>
<figcaption> -----Sir Isaac newton </figcaption>
</figure>
</body>
</html>
Output:

 The <pre> HTML element represents preformatted text which is to be presented


exactly as written in the HTML file.

Examples:

<! DOCTYPE HTML>


<html>
<head>
<title> Preformatted Demo </title>
</head>
<body>
<pre>
H E LL O
Students
How are you?
</pre>
</body>
</html>
Output:

 The HTML <strike> tag gives text the appearance of a strikethrough which
draws a horizontal line over the text. This tag is also commonly referred to as
the <strike> element.
<! DOCTYPE HTML>
<html>
<head>
<title> Strike Demo </title>
</head>
<body>
<p> <strike> Water </strike>
Water is neither acid nor base </p>
</body>
</html>
Output:

 The <sup> tag defines superscript text. While <sub> tag defines subscript text.

Examples:

<! DOCTYPE HTML>


<html>
<head>
<title> Sup and Sub Demo </title>
</head>
<body>
<p> Chemical formula of water is H<sub>2</sub>O.
<p> Einstein’s equation is E=mc<sup>2<sup></p>.
</body>
</html>
Output:

2.10 Ordered List –OL


 An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The
list items will be marked with numbers by default.

<! DOCTYPE HTML>


<html>
<head>
<title> OL Demo </title>
</head>
<body>
<ol>
<li>Russia</li>
<li>Canada</li>
<li>USA</li>
</ol>
</body>
</html>
Output:

 For different types of ordered list <ol type = “ “> can be used.

<! DOCTYPE HTML>


<html>
<head>
<title> OL Demo </title>
</head>
<body>
<ol type ="1">
<li>Russia</li>
<li>Canada</li>
<li>USA</li>
</ol>
<ol type ="I">
<li>Kathmandu</li>
<li>Bhaktapur</li>
<li>Lalitpur</li>
</ol>
<ol type ="A">
<li>Siraha</li>
<li>Saptari</li>
<li>Dhanusha</li>
</ol>
<ol type ="a">
<li>India</li>
<li>Pakistan</li>
<li>Afghanistan</li>
</ol>
</body>
</html>
Output:

 The start attribute specifies the start value of the first list item in an ordered list
and used in <ol > tag. This value is always an integer, even when the numbering
type is letters or romans. The value attribute sets the value of a list item. The
following list items will increment from that number and is used in <li> tag.
<! DOCTYPE HTML>
<html>
<head>
<title> OL Demo </title>
</head>
<body>
<ol start="50" >
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol >
<li value ="100" >Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Water</li>
</ol>
</body>
</html>

2.11 Unordered List – UL

 The HTML <ul> tag defines an unordered (bulleted) list.

Examples:
<! DOCTYPE HTML>
<html>
<head>
<title> UL Demo </title>
</head>
<body>
<ul>
<li>Nepal</li>
<li>Bhutan</li>
<li>Bangladesh</li>
</ul>
</body>
</html>
Output:

 <ul type =” “> tag is defining bullet in disc, circle and square in html.

<! DOCTYPE HTML>


<html>
<head>
<title> UL Type Demo </title>
</head>
<body>
<ul type ="Disc">
<li>Nepal</li>
<li>Bhutan</li>
<li>Bangladesh</li>
</ul>
<ul type ="circle">
<li>Canada</li>
<li>USA</li>
<li>Mexico</li>
</ul>
<ul type ="square">
<li>Denmark</li>
<li>Portugal</li>
<li>Finland</li>
</ul>
</body>
</html>
Output:

 The <dl> HTML element represents a description list. The element encloses a list
of groups of terms (specified using the <dt> element) and descriptions
(provided by <dd> elements).
Examples:

<! DOCTYPE HTML>


<html>
<head>
<title>DL DT DD Demo </title>
</head>
<body>
<P> Prime Minister of Nepal </p>
<dl>
<dt>Kaji Bhimsen Thapa</dt>
<dd>First Prime minister of Nepal</dd>

<dt> Shree 3 Janga Bahadur Rana</dt>


<dd>First Rana Prime minister of Nepal. </dd>
</dl>
</body>
</html>

Output:

2.12 Marques tags and its properties

The HTML <marquee> tag is used for scrolling piece of text or image displayed either
horizontally across or vertically down your web site page depending on the settings.
Examples:

<! DOCTYPE HTML>


<html>
<head>
<title>Marques Tag </title>
</head>
<body>
<marquee width="100%" direction="up" bgcolor="red" height="800px">
Nepal Polytechnic Institute
</marquee>
</body>
</html>

Output:

Properties of Marques tag

 Width provides the width or breadth of Marquee.


 Height provides height or length of Marquee.
 Direction provides the direction or way in which your marquee will allow you
to scroll. The value of this attribute can be: left, right, up or down.
 Scrolldelay provides a feature whose value will be used for delaying among
each jump.
 Scrollamount provides value for speeding the marquee feature.
 Behavior provides the scrolling type in a marquee. That scrolling can be like
sliding, scrolling or alternate.
 Loop provides how many times the marquee will loop.
 Bgcolor provides a background color where the value will be either the name of
the color or the hexadecimal color-code.
 Vspace provides a vertical space and its value can be like: vspace="20" or
vspace="30%".
 Hspace provides a horizontal space and its value can be like: vspace="20" or
vspace="30%.

2.13 Anchor Tag and its properties

An anchor is a piece of text which marks the beginning and/or the end of a hypertext link.
The text between the opening tag and the closing tag is either the start or destination (or
both) of a link.

I. Creating link:
Links are found in nearly all web pages. Links allow users to click
their way from page to page. The HTML <a> tag defines a hyperlink.
The most important attribute of the <a> element is the href attribute,
which indicates the link's destination.

Examples:

<! DOCTYPE HTML>


<html>
<head>
<title> Link Demo </title>
</head>
<body>
<a href = "https://www.youtube.com/"> YouTube Link </a>
</body>
</html>
Output:

II. Link to same HTML

Hyperlinks are utilized by a web browser to move from one page to


another. However, you can also move to a different area on the same
page. The following sections show users how to link to the top,
bottom, or a specific section on a web page. Choose a method from
the following list, or explore both options.

Examples:

<! DOCTYPE HTML>


<html>
<head>
<title> Link Demo </title>
</head>
<body>
<a href="#top">Top</a>
<a href="#bottom">Bottom</a>
</body>
</html>
III. <A NAME > Tag

The name attribute specifies the name of an anchor:

Examples:

<! DOCTYPE HTML>


<html>
<head>
<title> Link Demo </title>
</head>
<body>
<a name="C2"> Introduction to HTML</a>
</body>
</html>

IV. Inserting inline image

 Img src is used for inserting the image.


 Align is used to align the image (left, right, middle)
 Height and width associated with pixel height and width of
image.
 Alt is used to display text alternative to the image.
Examples:
<! DOCTYPE HTML>
<html>
<head>
<title> Image Demo </title>
</head>
<body>
<img src ="Murti.png" align="left" width=" 100" height="100" alt= "image of
murti">
</body>
</html>
Output:

V. Horizontal Rules:
<hr> tag is used to draw horizontal line in html and noshade is used to draw solid
horizontal line.
Examples:

<! DOCTYPE HTML>


<html>
<head>
<title> Hr Demo </title>
</head>
<body>
<h1> Nepal Polytechnic Institute </h1>
<hr align ="left" width =" 400" size= "1">
<hr align ="left" width ="400" size ="10" noshade >
<! -- noshade is used to draw solid horizontal line -->
</body>
</html>
Output:

You might also like