3 Basics of HTML

By SHOBHIT SHARMA
Topics to be Discuss…
1. HTML Introduction 8. Marquee Tag
2. HTML Editors 9. HTML Iframes
3. HTML Basic tags 10. HTML Lists
4. HTML Attributes 11. HTML Entities
5. Body tag
6. Font tag
7. Quotations and
Citations
1. HTML Introduction
a) What is HTML???
b) Web Browsers
c) HTML Versions
d) HTML Tag
e) HTML Page Structure
a) What is HTML ???
 Hyper Text Markup Language

 HTML is a markup language
 A markup language is a set of markup tags
 HTML documents contain HTML tags and plain text
 HTML documents are also called web pages
 Save as .html
b)Web Browsers
 The purpose of a web browser is to read HTML

documents and display them as web pages.
 The browser does not display the HTML tags
c) HTML Versions
There have been many versions of HTML:
Version Year
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2012
d)HTML Tag
 HTML tags are keywords (tag names) surrounded

by angle brackets like <html>
 HTML tags normally come in pairs like and 
 The first tag in a pair is the start tag, the second tag is
the end tag
 The end tag is written like the start tag, with a forward
slash before the tag name
 Start and end tags are also called opening
tags and closing tags
 Syntax is: <tagname>content</tagname>
e)HTML Page Structure
Page title
Body Contents
2. HTML Editors
 HTML Using Notepad or Text Edit

 Adobe Dreamweaver
Start with Notepad
Step-1 Start Notepad
Step-2 Type HTML Code

Step-3 Save HTML Page
Step-4 View HTML Page in Your Browser

Adobe Dreamviewer
Step-1 Start With Dreamviewer
Step-2 Click on Create New >HTML

 Step-3 Write your HTML code
 Step-4 Save as .html

 Step-5 Open Preview in chrome
 Step-6 View HTML Page in Your Browser

3. HTML Basic Tag
a) Headings Tag (H1–H6)

b) Paragraphs Tag
c) Link Tag
d) Image Tag
e) <hr> Horizintal rule tag
f) Divide Section Tag
g) <pre> preformatting Tag
h) HTML Comment Tags
a) Headings Tag (H1–H6)
<!DOCTYPE html>//The <!DOCTYPE> declaration helps the browser to display a

web page correctly.
<html>
<body>
<h1>This is heading 1</h1>

</body>
</html>
Result :
b)Paragraphs Tag
<!DOCTYPE html>
<html>
<body>
This is a paragraph.
</body>
</html>
Result :
c) Link Tag
<!DOCTYPE html>
<html>
<body>
<a href="http://www.nitrkl.ac.in/">This is a link</a>
</body>
</html>
Result :
d)Image Tag
Image should be in same folder with html page.

<!DOCTYPE html>
<html>
<body>
<img src="NITRKL.jpg" width=“150px“

height="100px"></body>
</html>
Result :
Other HTML Image Tags
Tag Description
 <img> Defines an image
 <map> Defines an image-map
 <area> Defines a clickable area inside an image-map
e)<hr> Horizontal rules
 The <hr> tag creates a horizontal line in an

HTML page.
 The hr element can be used to separate content
 Syntax: This is a paragraph.
<hr>
<hr>
Result
f) Divide Section Tag
<!DOCTYPE html>
<html>
<body>
This is a para graph with line breaks
</body>
</html>
Result :
g) <pre> Preformatting tag
 The HTML <pre> element defines preformatted text.
 The text inside a <pre> element is displayed in a fixed-
width font (usually Courier), and it preserves both spaces
and line breaks:
 Example:<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.

</pre>
<pre> result
h)HTML Comment Tags
<!DOCTYPE html>
<html>
<body>



</body>
</html>
Result :
4. HTML Attributes
 HTML elements can

have attributes
 Attributes provide additional
information about an element
 Attributes are always specified
in the start tag
 Attributes come in name/value
pairs like: name="value"
lang attribute
 The document language can be declared in

the <html> tag.
 The language is declared in the lang attribute.
 Declaring a language is important for accessibility
applications (screen readers) and search engines
 Syntax: <html lang=“en-US”></html>
title attribute
 When you move the mouse over the element, the title
will be displayed as a tooltip.
 Syntax: 
SparKX Club is organising an
intensiveweb-designing course in N.I.T. Rourkela. All
interested participants are encouraged.
result
alt Attribute
 The alt attribute specifies an alternative text to be used, when an HTML

element cannot be displayed.
 The value of the attribute can be read by "screen readers". This way,
someone "listening" to the webpage, i.e. a blind person, can "hear" the
element.
 Syntax: <img src=“image.jpg" alt=“IMAGES" width="104" height="142">
Result
Other attributes
 href
<a href="http://www.w3schools.com">This is a link</a>
 size
<img src="w3schools.jpg" width="104" height="142">
 id

 src
<image src=“nitrkl.ac.in” ></image>
 And many more…..
5.BODY Tag
 Background and Text Color

Background and Text Color
<HTML>
<HEAD>
<TITLE>PS<TITLE>
</HEAD>
<BODY BGCOLOR=CYAN TEXT=BLUE>
<BODY>
</HTML>
OUTPUT :
6. Font Tag
<!DOCTYPE html>
<html>
<body>
How are you 
</body>
</html>
Result :
Font Size
 How are you 
 Size in px
Font Color
 How are you 

 In notepad : Blue, White, black, yellow, brown, Green,
Red etc.
 In dreamviewer :
Text format
 Bold text 
 Important text 
 Italic text 
 Emphasized text 
 Marked text 
 Small text 
 Deleted text <del>
 Inserted text <ins>
 Subscripts 
 Superscripts 
7.Quotations and Citations
 The HTML <q> element defines a short quotation.
 Browsers usually insert quotation marks around the <q>

element
 Syntax: <q>He is a good boy</q>
result
 The HTML <blockquote> element defines a quoted section.
 Browsers usually indent <blockquote> elements.
 Syntax:
<blockquote cite="http://www.worldwildlife.o
rg/who/index.html">
For 50 years, WWF has been protecting the
future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported
by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
result
 he HTML <abbr> element defines an abbreviation or an acronym.
 Marking abbreviations can give useful information to browsers, translation
systems and search-engines.
 Syntax:
The <abbr title="World Health Organization">WHO</abbr> was founded
in 1948.
Result
 HTML <address> for Contact Information
 The HTML <address> element defines contact information (author/owner)
of a document or article.
 The element is usually displayed in italic. Most browsers will add a line
break before and after the element.
 Syntax:
<address>
Written by Jon Doe. 
Visit us at: 
Example.com 
Box 564, Disneyland 
USA
</address>
 The HTML <bdo> element defines bi-directional override.
If your browser supports bdo, this text will be written from right to left.
Syntax:
<bdo dir="rtl">This text will be written from right to left</bdo>
 The HTML <cite> element defines the title of a work.
Browsers usually displays <cite> elements in italic.
Syntax:<cite>The Scream</cite> by Edward Munch. Painted in
1893.
HTML Computer Code Elements
Tag Description
 <code></code> Defines programming
code
 <kbd></kbd> Defines keyboard input
 <samp></samp> Defines computer output
 <var></var> Defines a mathematical
variable
8. Marquee Tag
Use to text/images scroll from right to left, left to right, up to down, down to
up.
<!DOCTYPE html>
<html>
<body>
<marquee> This is marquee</marquee>
</body>
</html>
Result :
Marquee Direction
 <marquee direction="down"> This is

marquee</marquee>
 Up
 Down
 Right
 Left
Marquee Speed
 <marquee scrollamount="20"> This is

marquee</marquee>
 Scrollamount Speed
 Scrollamount Speed
Marquee Behavior
 <marquee behavior="alternate"> This is

marquee</marquee>
 Alternate
 Scroll
 slide
Marquee Onmouse
 <marquee behavior="scroll" direction="left"

onmouseover="this.stop();"onmouseout="this.start();">Go
on... hover over me!</marquee>
**Use in chrome
9.HTML Iframes
 An iframe is used to display a web page within a web

page.
 Start with <iframe src=“Next_page.html“> & end with
</iframe>.
 Next_page.html is Iframe web page.
 Both page should be in same folder.
Iframe Tag
<!DOCTYPE html>
<html>
<head>
<titel><h1>Facebook</h1></titel>
</head>
<body>
<marquee> This is marquee</marquee>
<iframe src="nit.html" >
</iframe>
</body>
</html>
Result :
Iframe – Set Height and Width
 <iframe src=“Next_page.html" width="300px"

height="300px">
 Set iframe width in px
 Set iframe height in px
10. HTML List
 Ordered List
 Unordered List
 Description List
Ordered List
An ordered list starts with the <ol> tag. Each list
item starts with the <li> tag.
<!DOCTYPE html>
<html>
<body>
<ol type="1">
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
<li>water</li>
</ol>
</body>
</html>
Result :
A type attribute can be added to an ordered list, to define the type of the
marker:
Type Description
 type="1" : The list items will be numbered with numbers
(default)
 type="A" : The list items will be numbered with uppercase
letters
 type="a" : The list items will be numbered with lowercase
letters
 type="I" : The list items will be numbered with uppercase
roman numbers
 type="i" : The list items will be numbered with lowercase
roman numbers
Unordered List
An unordered list starts with the <ul> tag. Each list
item starts with the <li> tag.
<!DOCTYPE html>
<html>
<body>
<ul style=«list-style-type:disc»>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
<li>water</li>
</ul>
</body>
</html>
Result :
A style attribute can be added to an unordered list, to define the style of the
marker.
Style Description
 disc The list items will be marked with bullets
(default)
 circle The list items will be marked with circles
 square The list items will be marked with squares
 none The list items will not be marked
Description List
A description list, is a list of

terms, with a description of
each term.
 The <dl> tag defines a
description list.
 The <dt> tag defines the term
(name), and the <dd> tag
defines the data (description).
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
<dt>Tea</dt>
<dd>- green cold drink</dd>
<dt>Water</dt>
<dd>- Plain and cold drink</dd>
</dl>
 Lists can be nested inside lists
 List items can contain other HTML elements
 Use the CSS property display:inline to display a
list horizontally
11. HTML Entities
 Some characters in HTML gets mixed with its syntax.
 For example: ‘<‘ or ‘>’ gets mixed with the tags while writing in the text
form.
 So to avoid this AMBIGUITY HTML entities are used.
 Entities can be number or name.
 Its advantage to use name instead ofnumber cause its easy to remember a
name.
 Some entities are shown in the next slide.
&nbsp
 If you give more spaces in the code, the compiler will

take only one. So to give multiple spaces “&nbsp” is
used.
 Syntax: hello there
Result Description Entity Name Entity
Number
non-breaking space
< less than < <
> greater than > >
& ampersand & &
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
€ euro € €
© copyright © ©
® registered trademark ® ®
Diacritical Marks
 A diacritical mark is a "glyph" added to a letter.
 Some diacritical marks, like grave ( ̀) and acute ( ́) are called accents.
 Diacritical marks can appear both above and below a letter, inside a
letter, and between two letters.
 Diacritical marks can be used in combination with alphanumeric

characters, to produce a character that is not present in the character set
(encoding) used in the page.
Mark Character Construct Result
̀ a à à
́ a á á
̂ a â â
̃ a ã ã
̀ O Ò Ò
́ O Ó Ó
̂ O Ô Ô
̃ O Õ Õ
NOTE:Reference: www.w3schools.comhtml/html_symbols.html

3 Basics of HTML

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

3 Basics of HTML

Hochgeladen von

Copyright:

Verfügbare Formate

By SHOBHIT SHARMA

 Hyper Text Markup Language

 The purpose of a web browser is to read HTML

 HTML tags are keywords (tag names) surrounded

 HTML Using Notepad or Text Edit

Step-1 Start Notepad

Step-2 Type HTML Code

Step-4 View HTML Page in Your Browser

Step-1 Start With Dreamviewer

Step-2 Click on Create New >HTML

 Step-4 Save as .html

 Step-6 View HTML Page in Your Browser

a) Headings Tag (H1–H6)

<!DOCTYPE html>//The <!DOCTYPE> declaration helps the browser to display a

<h1>This is heading 1</h1>

<a href="http://www.nitrkl.ac.in/">This is a link</a>

Image should be in same folder with html page.

<img src="NITRKL.jpg" width=“150px“

 The <hr> tag creates a horizontal line in an

<p>This is<br>a para<br>graph with line breaks</p>

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

 HTML elements can

 The document language can be declared in

 The alt attribute specifies an alternative text to be used, when an HTML

 Background and Text Color

 <font size="50px">How are you </font>

 <font color="Blue">How are you </font>

 The HTML <q> element defines a short quotation.

 Browsers usually insert quotation marks around the <q>

 <marquee direction="down"> This is

 <marquee scrollamount="20"> This is

 <marquee behavior="alternate"> This is

 <marquee behavior="scroll" direction="left"

 An iframe is used to display a web page within a web

 <iframe src=“Next_page.html" width="300px"

A description list, is a list of

 If you give more spaces in the code, the compiler will

 Diacritical marks can be used in combination with alphanumeric

Das könnte Ihnen auch gefallen