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”
Some HTML 5 tags - Learn HTML Part 2
HTML Paragraphs Tag Description:-
<p> Defines a paragraph
<br> Inserts a single line break
<pre> Defines 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 in the source code, but the browser ignores it.
</p>
<p>
This paragraph contains a lot of spaces in the 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>
<p style=”font-family:courier;”>This is next
paragraph.</p>
<h1 style=”font-size:300%;”>This is a heading after
second</h1>
<p style=”font-size:160%;”>This is a paragraph after
2nd/p>
<h1 style=”text-align:center;”>Centered
Heading</h1>
<p style=”text-align:center;”>Centered
paragraph.</p>
</body>
Style TIPS
• Use the style attribute for styling HTML elements
• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• 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.
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
<sup>New</sup> –
Superscript text
</body>
</html>
HTML QUOTATIONS - Learn HTML
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>
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
<hr>
<bdo dir=”rtl”>This text will be written from right to
left</bdo><br> Defines
the text direction
<br>
<hr>
<blockquote
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>
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>
<br><hr>
<cite>The Scream</cite> by Edvard Munch. Painted in
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
<hr>
</body>
</html>
RUN THE PROGRAM: Copy and paste this code in Notepad, “save with a.html”, run in browser, see the output
