Learn Advanced and Basic HTML - Lesson 3

1
Learn HTML BasicsLesson No 03

• Publisher Attitude Academy

2
LESSON NO - 03 HTML
3
HTML Text Formatting Elements
Text Formatting This text is boldThis text is
italicThis is superscript
Browsers display ltstronggt as ltbgt, and ltemgt as
ltigt.However, there is a difference in the
meaning of these tags ltbgt and ltigt defines bold
and italic text,but ltstronggt and ltemgt means that
the text is "important".
4
HTML Formatting Elements
HTML also defines special elements for defining
text with a special meaning. HTML uses elements
like ltbgt and ltigt for formatting output,
like bold or italic text. Formatting elements
were designed to display special types of text

• Bold text ltbgt
• Important bold text ltstronggt
• Italic text ltigt
• Emphasized text ltemgt
• Marked text ltmarkgt

• Small text ltsmallgt
• Deleted text ltdelgt
• Inserted text ltinsgt
• Subscripts ltsubgt
• Superscripts ltsupgt

5
HTML Bold and Strong Formatting
The HTML ltbgt element defines bold text, without
any extra importance.
Example lt!DOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage
Titlelt/titlegtlt/headgt ltbodygt ltpgtThis text is
normal.lt/pgt ltpgtltbgtThis text is bold.lt/bgtlt/pgt lt/bod
ygt lt/htmlgt
6
The HTML ltstronggt element defines strong text,
with added semantic "strong" importance. Example
lt!DOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage
Titlelt/titlegtlt/headgt ltbodygt ltpgtThis text is
normal.lt/pgt ltpgtltstronggtThis text is
strong.lt/stronggtlt/pgt lt/bodygt lt/htmlgt
7
HTML Italic and Emphasized Formatting
The HTML ltigt element defines italic text, without
any extra importance. Example
lt!DOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage
Titlelt/titlegtlt/headgt ltbodygt ltpgtThis text is
normal.lt/pgt ltpgtltigtThis text is italic.lt/igtlt/pgt lt/
bodygt lt/htmlgt
8
The HTML ltemgt element defines emphasized text,
with added semantic importance. Example -
lt!DOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage
Titlelt/titlegtlt/headgt ltbodygt ltpgtThis text is
normal.lt/pgt ltpgtltemgtThis text is
emphasized.lt/emgtlt/pgt lt/bodygt lt/htmlgt
9
HTML Small Formatting
The HTML ltsmallgt element defines small text Examp
le
lt!DOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage
Titlelt/titlegtlt/headgt ltbodygt lth2gtHTML
ltsmallgtSmalllt/smallgt Formattinglt/h2gt
lt/bodygt lt/htmlgt
10
HTML Marked Formatting
The HTML ltmarkgt element defines marked or
highlighted text Example
lt!DOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage
Titlelt/titlegtlt/headgt ltbodygt lth2gtHTML
ltmarkgtMarkedlt/markgt Formattinglt/h2gt lt/bodygt lt/htm
lgt
11
HTML Deleted Formatting
The HTML ltdelgt element defines deleted (removed)
text. Example
lt!DOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage
Titlelt/titlegtlt/headgt ltbodygt ltpgtThe del element
represents deleted (removed) text.lt/pgt ltpgtMy
favorite color is ltdelgtbluelt/delgt
red.lt/pgt lt/bodygt lt/htmlgt
12
HTML Inserted Formatting
The HTML ltinsgt element defines inserted (added)
text. Example
lt!DOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage
Titlelt/titlegtlt/headgt ltbodygt ltpgtThe ins element
represent inserted (added) text.lt/pgt ltpgtMy
favorite ltinsgtcolorlt/insgt is red.lt/pgt
lt/bodygt lt/htmlgt
13
HTML Subscript Formatting
The HTML ltsubgt element defines subscripted text.
Example
lt!DOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage
Titlelt/titlegtlt/headgt ltbodygt ltpgtThis is
ltsubgtsubscriptedlt/subgt text.lt/pgt lt/bodygt lt/htmlgt
14
HTML Superscript Formatting
The HTML ltsupgt element defines superscripted text.
Example
lt!DOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage
Titlelt/titlegtlt/headgt ltbodygt ltpgtThis is
ltsupgtsuperscriptedlt/supgt text.lt/pgt
lt/bodygt lt/htmlgt
15
HTML Quotation and Citation Elements
Tag Description
ltabbrgt Defines an abbreviation or acronym
ltaddressgt Defines contact information for the author/owner of a document
ltbdogt Defines the text direction
ltblockquotegt Defines a section that is quoted from another source
ltcitegt Defines the title of a work
ltqgt Defines a short inline quotation
16
HTML ltabbrgt for Abbreviations
The HTML ltabbrgt element defines an abbreviation
or an acronym. Marking abbreviations can give
useful information to browsers, translation
systems and search-engines.
ltbodygt ltpgtThe ltabbr title"World Health
Organization"gtWHOlt/abbrgt was founded in
1948.lt/pgt ltpgtMarking up abbreviations can give
useful information to browsers, translation
systems and search-engines.lt/pgt lt/bodygt
17
HTML ltaddressgt for Contact Information
The HTML ltaddressgt element defines contact
information (author/owner) of a document or
article.The ltaddressgt element is usually
displayed in italic. Most browsers will add a
line break before and after the element.
ltbodygt ltaddressgt B-2/19A, Yamuna vihar
ltbrgt behind B-block ltbrgt Bus Stand Delhi 110094
ltbrgt Call 011-43522158 ltbrgt lt/addressgt lt/bodygt
18
HTML ltbdogt for Bi-Directional Override
The HTML ltbdogt element defines bi-directional
override. The ltbdogt element is used to override
the current text direction
ltbodygt ltpgtIf your browser supports bi-directional
override (bdo), the next line will be written
from right to left (rtl)lt/pgt ltbdo
dir"rtl"gtThis line will be written from right to
leftlt/bdogt lt/bodygt
19
HTML ltblockquotegt for Long Quotations
The HTML ltblockquotegt element defines a quoted
section. Browsers usually indent ltblockquotegt
elements.
ltbodygt ltpgtLorem Ipsum is simply dummy text of the
printing and typesetting industry.lt/pgt ltblockquote
cite"http//www.worldwildlife.org/who/index.html
"gt Lorem Ipsum is simply dummy text of the
printing and typesetting industry. lt/blockquotegt
lt/bodygt
20
HTML ltcitegt for Work Title
The HTML ltcitegt element defines the title of a
work. Browsers usually display ltcitegt elements in
italic.
ltbodygt ltimg src"logoooo.jpg" width"220"
height"200" alt"The Scream"gt ltpgt ltcitegtThe
Screamlt/citegt by Edvard Munch. Painted in
1893. lt/pgt lt/bodygt
21
HTML ltqgt for Short Quotations
The HTML ltqgt element defines a short
quotation. Browsers usually insert quotation
marks around the ltqgt element.
ltbodygt ltpgtBrowsers usually insert quotation marks
around the q element.lt/pgt ltpgtthe is to ltqgtBuild
a future where people live in harmony with
nature.lt/qgtlt/pgt lt/bodygt
22
HTML Comments
Comment tags lt!-- and --gt are used to insert
comments in HTML.
HTML Comment Tags You can add comments to your
HTML source by using the following syntax lt!--
Write your comments here --gt
lt!DOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage
Titlelt/titlegtlt/headgt ltbodygt lt!-- This is a
comment --gt ltpgtThis is a paragraph.lt/pgt lt!--
Comments are not displayed in the browser --gt
lt/bodygt lt/htmlgt
23
PRACTICAL IMPLENTATION
24

• Visit Us Attitude Academy