Learn HTML – Part 2


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”


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


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



Click Here - Learn HTML - Part 3


UDMIDEAS

Latest Digital Marketing News and Ideas

No comments:

Post a Comment

Thank You