HTML PPT

HTML
Sandeep Kumar
Shaheed Bhagat Singh College

(University of Delhi)
July 23, 2017
Sandeep Kumar (SBSC, DU) HTML July 23, 2017 1 / 27

Introduction
Introduction
HTML stands for Hypertext Markup Language.

Hypertext is the method by which one can move around on the web by
clicking on special text called hyperlinks which takes you to other page.
Markup is what HTML tags do to the text inside them.
The Markup tells the web browser how to display text or images on a web
page, for example, whether the text to be displayed italic or bold.

Introduction
A Simple Example
<html>
<head>
< t i t l e >F i r s t HTML Page</ t i t l e >
</head>
<body>
<h1>My F i r s t Heading </h1>
<p>My f i r s t Par agra p h </p>
</body>
</html>

Introduction
HTML Tags
HTML tags are keywords (tag names) surrounded by angle brackets. The
general syntax is:
<tagname> text/image </tagname>
An HTML tag creates ‘markers’ for web browser to read and interpret.
These ‘markers’ tell the web browser what and how to display contents on
the web page.
The first tag is called ‘opening’ tag and second tag is called ‘closing’ tag.

Introduction
HTML Elements and Basic Structure

The pair of HTML tags together with the enclosed text/image is called HTML element.
HTML elements can also be nested, we can see from previous example that the head element
lies within html element.

Introduction
Basic Elements
html: The html element tells the web browser that you are writing a HTML document.
The text between the opening tag <html> and closing tag </html> describes a HTML
document. It is a necessary element in every HTML document.
head: The head element contains information about the HTML document that does not
appear on the web page. For example, the title element. In the head element, we can
define the style attribute of other HTML elements.
title: The title element sets the title of the web page. Though, it is not a necessary
element but it is recommended to give a meaningful title to each web page.
body: The body element describes the visible contents of the web page, i.e. the contents
define inside body element will be shown on the web page. It’s a necessary element in
every HTML document.

Introduction
HTML Attribute
HTML elements can have attributes. They provide additional information

about HTML elements. Attributes are always specified in the opening
tag and they appear in pair, name = ‘value’.
For example, the <html> element can have language attribute that can be
specified as:
<html lang="en-US">
which specifies the document language to be United Nations English.
We will come across many other HTML attributes in subsequent learning.

Introduction
HTML using Notepad
One can use any text editor to write html code. Today many advanced html editors are
available free of cost. Even, the notepad available in all Windows system can work.
Open the Notepad in Windows by Clicking:
Start ⇒ All Programs ⇒ Accessories ⇒ Notepad
Write the html code provided provided earlier.
Save the file by giving its name index.html or any other name. Do not forget to put the
file extension as ‘.html’ or ‘.htm’ while saving file.
Open the saved HTML file in your favorite web browser.

Introduction
HTML using Notepad

Introduction
A Simple Web Page

Introduction
Headings
The HTML headings can be made using the six heading tags
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>. The <h1> tag is used for highest precedence
paragraph and <h6> for lowest precedence paragraph. http:/
<html>
<body>
<h1>T h i s is heading 1</h1>

<h4>T h i s is heading 4</h4> This is heading 3
<h6>T h i s is heading 6</h6> This is heading 4
This is heading 5
</body>
</html>
This is heading 6

Introduction
Paragraph
HTML paragraph is defined using <p> tag.
<html>
<body>
<p>The s k i l l e d b a s e p a p e r L a t e x and HTML
i n t r o d u c e d u n d e r CBCS p a t t e r n i s a n i c e
i n i t i a t i v e . T h i s p a p e r i s o f two c r e d i t . </p>
<p>Through t h i s p a p e r s t u d e n t s can l e a r n
how t o p r o d u c e p r o f e s s i o n a l documents and
p r e s e n t a t i o n s i n l a t e x . HTML w i l l h e l p them
t o c r e a t e s i m p l e web p a g e s .</p>
</body>
</html>

Introduction
Text Formatting
HTML provides tags for making text italic, bold, subscript, superscript, marked, deleted etc.
These tags are summarized in following table:
Tag Description Tag Description

<b> Bold Text <strong> Strong Text, same effect as of bold
<i> Italic Text <em> Emphasized Text, same effect as of italic
<small> Small Text <mark> Marked/Highlighted Text
<del> Deleted Text <u> Underline Text
<sup> Super-script Text <sub> Sub-script Text

Introduction
Text Formatting
<html>
<body> This text is normal.
<p>T h i s t e x t i s n o r m a l .</p>
This text is bold.
<p><b>T h i s t e x t i s b o l d .</b></p>
This text is italic.
<p><i>T h i s t e x t is i t a l i c .</ i ></p>
<p><s m a l l>T h i s i s s m a l l t e x t </s m a l l ></p> This is small text
<p>T h i s <mark>t e x t </mark> i s marked</p> This text is marked

<p>My f a v o r i t e s u b j e c t i s
<d e l>a l g e b r a </d e l> a n a l y s i s .</p> My favorite subject is algebra analysis.
<p>The g i v e n f u n c t i o n i s x<sup>2</sup></p>
The given function is x2
<p> The s e q u e n c e i s r e p r e s e n t e d by a<sub>n</sub></p>
The sequence is represented by an
<u> U n d e r l i n e t e x t </u>
</body> Underline text

</html>

Introduction
Font
Using the tag <font>, one can specify the font family, font size and color of the text. The
<font> tag can take following attributes:
Attribute Description Attribute Possible Values

size Specify font size 1, 2, 3, 4, 5, ...
face Specify font family Times New Roman, Verdana, Comic Sans MS, WildWest, ...
color Specify font color red, green, blue, ...

Introduction
Text Formatting
<html>
<body>
<p><f o n t s i z e =”6” c o l o r =” g r a y”>Gray c o l o r t e x t

o f s i z e 6.</ f o n t ></p>
<p><f o n t s i z e =”4” c o l o r =” r e d”>Red c o l o r t e x t o f

s i z e 4.</ f o n t ></p> Red color text of size 4.
<p><f o n t f a c e =” v e r d a n a ” c o l o r =” b l a c k”>B l a c k c o l o r Black color text of font-family verdana
t e x t o f f o n t−f a m i l y v e r d a n a </f o n t ></p>
</body>
</html>

Introduction
Making List
The HTML tags for ordered and unordered list are <ol> and <ul> respectively. The HTML tag
for a list element is <li>.
http:
<html> <body>
<h3>U n o r d e r e d L i s t w i t h D e f a u l t B u l l e t s </h3> Unordered List with Default Bullets

<u l>
<l i >A l g e b r a </ l i > Algebra
<l i >A n a l y s i s </ l i > Analysis
<l i >D i f f e r e n t i a l E q u a t i o n </ l i > Differential Equation
</u l>
<h3>O r d e r e d L i s t w i t h D e f a u l t Numbering</h3> Ordered List with Default Numbering

<o l>
<l i >A l g e b r a </ l i > 1. Algebra
<l i >A n a l y s i s </ l i > 2. Analysis
<l i >D i f f e r e n t i a l E q u a t i o n </ l i > 3. Differential Equation
</o l>
</body> </html>

Introduction
Changing Bullets
One can change the bullets to circle, disc or square in an unordered list using the type attribute.
A type attribute can take values "circle", "square", "disc" or "none".
<html> <body>
<h3>U n o r d e r e d L i s t w i t h d i s c B u l l e t s </h3> Unordered List with disc Bullets

<u l t y p e =” d i s c ”>
<l i >D i f f e r e n t i a l E q u a t i o n s </ l i > Differential Equations
</u l>
<h3>U n o r d e r e d L i s t w i t h c i r c l e B u l l e t s </h3> Unordered List with circle Bullets

<u l t y p e =” c i r c l e ”>
<l i >D i f f e r e n t i a l E q u a t i o n s </ l i > Differential Equations
</u l>
</body> </html>

Introduction
Changing numerals in ordered list

One can change the numerals in ordered list to Arabic, Roman or Letters (capital or small)
using the type attribute that can take values "1", "i", "I", "a", "A".
<html>
<body> http
<h3>O r d e r e d L i s t w i t h A r a b i c n u m e r a l s </h3>
<o l t y p e =”1”> Ordered List with Arabic numerals
<l i >A n a l y s i s </ l i >
<l i >A l g e b r a </ l i > 1. Analysis
<l i >D i f f e r e n t i a l E q u a t i o n s </ l i > 2. Algebra
</o l> 3. Differential Equations
<h3>O r d e r e d L i s t w i t h roman n u m e r a l s </h3>
<o l t y p e =” i ”>
Ordered List with roman numerals
<l i >A n a l y s i s </ l i >
i. Analysis
<l i >A l g e b r a </ l i >
ii. Algebra
<l i >D i f f e r e n t i a l E q u a t i o n s </ l i >
iii. Differential Equations
</o l>
<h3>O r d e r e d L i s t w i t h u p p e r c a s e l e t t e r s </h3> Ordered List with upper case letters

<o l t y p e =”A”>
<l i >A n a l y s i s </ l i > A. Analysis
<l i >A l g e b r a </ l i > B. Algebra
<l i >D i f f e r e n t i a l E q u a t i o n s </ l i > C. Differential Equations
</o l>
</body>
</html>
Introduction
Creating Tables
HTML provides tags to make tables. Different tags for rows, data and headings are :
Tag Description Attribute Description

<table> Create Table <border> Border of the table
<tr> Table row <caption> Define caption of the table
<td> Data of the row <colspan> Define a cell span over how many columns
<th> Table Heading <rowspan> Define a cell span over how many rows

Introduction
Creating Table
<html> <body>
<t a b l e b o r d e r =”1”>
<c a p t i o n >S t u d e n t s Marks Record </c a p t i o n >
<t r >
<th>S t u d e n t Name</th>
<th>A n a l y s i s Marks</th>
<th>A l g e b r a Marks</th>
</t r >
<t r > Students Marks Record
<td>Ruhani </td> Student Name Analysis Marks Algebra Marks
<td >90</td>
<td >95</td> Ruhani 90 95
</t r >
<t r > Meera 85 92
<td>Meera</td>
<td >85</td> Satvik 95 88
<td >92</td>
</t r >
<t r >
<td>S a t v i k </td>
<td >95</td>
<td >88</td>
</t r >
</t a b l e >
</body> </html>

Introduction
Inserting Images
HTML provides the tag <img> to insert images in web page. Different attributes specifying
source of image, width, height are:
Tag/Attribute Description Example

src Specify source/path of image
alt Specify alternative text Any text describing the logo
width Width of image Any measurement in pixels, e.g. 100px
height Height of image – same –
border Insert border around image 1, 2, 3, ... (Describing thickness of border)

Introduction
Inserting Image
<html>
<body>
<img s r c =” d u i c o n . png ” a l t =” D e l h i U n i v e r s i t y Logo ”

w i d t h =200 px h e i g h t =200px>
</body>
</html>
If image lies on some server then one can include that image by specifying its web address. For
example, to include shown Delhi University icon, one can specify its web address, which is
http://du.ac.in/uod/Logos/uod1.png as src attribute.

Introduction
Videos
HTML provides tags to insert videos in web pages. Different tags specifying source of video,
width, height and controls are:
Tag/Attribute Description
<video> Insert Video
<type> Specify type of video; mp3 or Ogg or WebM
<controls> Insert controls buttons, start, stop, pause etc.
<width> Width of video
<height> Height of video

Introduction
Inserting Video
http://w
<html>
<body>
<v i d e o w i d t h =400 px h e i g h t =250 px c o n t r o l s >

<s o u r c e s r c =” h t t p : / /www . w 3 s c h o o l s . com/ h t m l / mov bbb . mp4”
t y p e =” v i d e o /mp4”>
</v i d e o>
</body>
</html>

Introduction
Youtube Video
To include Youtube Videos, copy the Embed code and paste it inside the body of HTML page.
<html>
<body>
<i f r a m e w i d t h =”420” h e i g h t =”315”
s r c =” h t t p s : / /www . y o u t u b e . com/ embed /X9zKg−Nkauk ”
f r a m e b o r d e r =”0” a l l o w f u l l s c r e e n ></i f r a m e >
</body>
</html>

Introduction
Links
What makes HTML a hypertext language is the ability to move from one web page to another
web page. The anchor tag <a> is used to insert links in a web page. Syntax for this tag is:
<a href="URL">link text<\a>
Click below link to visit University of Delhi

<html>
<body> University of Delhi
<p>C l i c k b e l o w l i n k t o v i s i t U n i v e r s i t y o f D e l h i </p>
<a h r e f =” h t t p : / / du . ac . i n /”> U n i v e r s i t y o f D e l h i </a>
</body>
</html>

HTML PPT

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML PPT

Uploaded by

Copyright:

Available Formats

HTML

Shaheed Bhagat Singh College

July 23, 2017

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 1 / 27

HTML stands for Hypertext Markup Language.

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 2 / 27

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 3 / 27

<tagname> text/image </tagname>

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 4 / 27

HTML Elements and Basic Structure

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 5 / 27

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 6 / 27

HTML elements can have attributes. They provide additional information

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 7 / 27

HTML using Notepad

Open the Notepad in Windows by Clicking:

Start ⇒ All Programs ⇒ Accessories ⇒ Notepad

Write the html code provided provided earlier.

Open the saved HTML file in your favorite web browser.

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 8 / 27

HTML using Notepad

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 9 / 27

A Simple Web Page

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 10 / 27

<h1>T h i s is heading 1</h1>

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 11 / 27

HTML paragraph is defined using <p> tag.

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 12 / 27

Tag Description Tag Description

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 13 / 27

<p><s m a l l>T h i s i s s m a l l t e x t </s m a l l ></p> This is small text

<p>T h i s <mark>t e x t </mark> i s marked</p> This text is marked

</body> Underline text

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 14 / 27

Attribute Description Attribute Possible Values

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 15 / 27

<p><f o n t s i z e =”6” c o l o r =” g r a y”>Gray c o l o r t e x t

<p><f o n t s i z e =”4” c o l o r =” r e d”>Red c o l o r t e x t o f

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 16 / 27

<h3>U n o r d e r e d L i s t w i t h D e f a u l t B u l l e t s </h3> Unordered List with Default Bullets

<h3>O r d e r e d L i s t w i t h D e f a u l t Numbering</h3> Ordered List with Default Numbering

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 17 / 27

<h3>U n o r d e r e d L i s t w i t h d i s c B u l l e t s </h3> Unordered List with disc Bullets

<h3>U n o r d e r e d L i s t w i t h c i r c l e B u l l e t s </h3> Unordered List with circle Bullets

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 18 / 27

Changing numerals in ordered list

<h3>O r d e r e d L i s t w i t h u p p e r c a s e l e t t e r s </h3> Ordered List with upper case letters

Tag Description Attribute Description

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 20 / 27

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 21 / 27

Tag/Attribute Description Example

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 22 / 27

<img s r c =” d u i c o n . png ” a l t =” D e l h i U n i v e r s i t y Logo ”

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 23 / 27

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 24 / 27

<v i d e o w i d t h =400 px h e i g h t =250 px c o n t r o l s >

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 25 / 27

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 26 / 27

<a href="URL">link text<\a>

Click below link to visit University of Delhi

Sandeep Kumar (SBSC, DU) HTML July 23, 2017 27 / 27

You might also like