Learn HTML – Part 2
Learning HTML for everyone is necessary, it make
SEO on-page optimization easier, and it also helps to create website in easy
manner…. “Knowledge is Power Supreme”
SEO on-page optimization easier, and it also helps to create website in easy
manner…. “Knowledge is Power Supreme”
HTML
Paragraphs
Paragraphs
Tag Description
<p> Defines
a paragraph
a paragraph
<br> Inserts
a single line break
a single line break
<pre> Defines
pre-formatted text
pre-formatted text
<!DOCTYPE html>
<html>
<head>
<title>Heading example</title>
</head>
<body>
<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>
<p>
This paragraph
contains a lot
of lines
of lines
in the source
code,
code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the
source code,
source code,
but the browser
ignores it.
</p>
</body>
</html>
Note:: Look the difference between P and Pre
P- Extra spaces are removes
Pre – As it is shown
HTML Styles
The style of a HTML element is done with the help of “style” attribute
Syntax – <tagname style=”property:value;”>
Its Property is CSS and Value is also CSS
Examples
<body style=”background-color:powderblue;”>
<h1>This is a heading h1</h1>
<p>This is a paragraph. Hello, how are You?</p>
<h1 style=”color:blue;”>This is a heading</h1>
<p style=”color:red;”>This is a paragraph.</p>
<h1 style=”font-family:verdana;”>This is next
heading</h1>
heading</h1>
<p style=”font-family:courier;”>This is next
paragraph.</p>
paragraph.</p>
<h1 style=”font-size:300%;”>This is a heading after
second</h1>
second</h1>
<p style=”font-size:160%;”>This is a paragraph after
2nd/p>
2nd/p>
<h1 style=”text-align:center;”>Centered
Heading</h1>
Heading</h1>
<p style=”text-align:center;”>Centered
paragraph.</p>
paragraph.</p>
</body>
Style TIPS
·
Use the style attribute for styling HTML
elements
Use the style attribute for styling HTML
elements
·
Use background-color for background color
Use background-color for background color
·
Use color for text colors
Use color for text colors
·
Use font-family for text fonts
Use font-family for text fonts
·
Use font-size for text sizes
Use font-size for text sizes
·
Use text-align for text alignment
Use text-align for text alignment
HTML Text Formatting
Do you know with the help of HTML, anyone easily defines the text with
some special meaning? HTML uses elements for formatting the output.
some special meaning? HTML uses elements for formatting the output.
Let’s explore by this example –
<!DOCTYPE html>
<html>
<head>
<title>Heading example</title>
</head>
<body>
<b>This is Bold Text </b> – Bold text
<strong>This is Strong Text</strong> – Important text
<i>This text show Italic</i> – Italic text
<em>This text is for emphasized</em> – Emphasized text
<mark>This is marked Text</mark> – Marked text
<small>This text is small</small> – Small text
<del>This text is deleted</del> – Deleted text
<ins>This text is inserted</ins> – Inserted text
<sub>text</sub> –
Subscript text
Subscript text
<sup>New</sup> –
Superscript text
Superscript text
</body>
</html>
HTML QUOTATIONS
Let’s explore quotations through this example
–
–
<!DOCTYPE html>
<html>
<head>
<title>Quotation Examples</title>
</head>
<body>
<abbr title=”World Health
Organization”>WHO</abbr> was founded in
1948.</abbr><br>
Organization”>WHO</abbr> was founded in
1948.</abbr><br>
Defines an abbreviation or acronym
<br>
<hr>
<address>
Written by Biber<br>
Visit us at:<br>
www.udmideas.com<br>
India<br>
</address><br> Defines
contact information for the author/owner of a document
contact information for the author/owner of a document
<hr>
<bdo dir=”rtl”>This text will be written from right to
left</bdo><br> Defines
the text direction
left</bdo><br> Defines
the text direction
<br>
<hr>
<blockquote
cite=”http://www.worldwildlife.org/who/index.html”>
cite=”http://www.worldwildlife.org/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><br> Defines
a section that is quoted from another source<br>
a section that is quoted from another source<br>
Note: How to get rid from
the copied content from other website to your website as it is possible that Google
penalizes if other website content is at your website – Use
Blockquote<br>
the copied content from other website to your website as it is possible that Google
penalizes if other website content is at your website – Use
Blockquote<br>
<br><hr>
<cite>The Scream</cite> by Edvard Munch. Painted in
1893.<br> Defines the
title of a work
1893.<br> Defines the
title of a work
<br><hr>
<q>Build a future where people live in harmony with
nature.</q><br> defines a
short inline quotation
nature.</q><br> defines a
short inline quotation
<hr>
</body>
</html>
RUN THE PROGRAM: Copy and
paste this code in Notepad, “save with a.html”, run in browser, see the output
paste this code in Notepad, “save with a.html”, run in browser, see the output
