Monday 20 March 2017

HTML Paragraphs Tags | Pagargraph Tags in HTML

HTML Paragraphs


The HTML <p> element defines a paragraph:

Example
<p>MY First paragraph.</p>
<p>MY Second paragraph.</p>
<p>MY Thrid paragraph.</p>

HTML Paragraphs Tags | Pagargraph Tags in HTML


HTML Display
You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.

The browser will remove any extra spaces and extra lines when the page is displayed:

Example
<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>

Don't Forget the End Tag
Most browsers will display HTML correctly even if you forget the end tag:

Example
<p>This is a paragraph.
<p>This is another paragraph.

HTML Line Breaks
The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new paragraph:

Example
<p>This is<br>a paragraph<br>with line breaks.</p>

The Poem Problem
This poem will display on a single line:

Example
<p>
  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.
</p>

The HTML <pre> Element
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:  Read More.....

Friday 3 March 2017

The HTML Style Attribute | HTML Style

HTML Styles

The HTML Style Attribute
The HTML Style Attribute


The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following 

syntax:<tagname style="property:value;">

The property is a CSS property. The value is a CSS value.

You will learn more about CSS later in this tutorial.

HTML Background Color
The background-color property defines the background color for an HTML element.

This example sets the background color for a page to powderblue:
Example

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

HTML Text Color

The color property defines the text color for an HTML element:

Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

HTML Fonts

The font-family property defines the font to be used for an HTML element:

Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

HTML Text Size
The font-size property defines the text size for an HTML element:

Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>


Thursday 2 March 2017

HtML Class Attribute | Use CSS through Classs Atribute

The HTML class attribute makes it possible to define equal styles for elements with the same class name.

Here we have three <div> elements that points to the same class name:

<!DOCTYPE html>
<html>
<head>
<style>
div.info {
    background-color: black;
    color: white;
    margin: 20px 0 20px 0;
    padding: 20px;

</style>
</head>
<body>

<div class="info">
<h2>Leonardo Da Vinci</h2>
<p>His keen eye and quick mind led him to make important scientific discoveries, yet he never published his ideas. He was a vegetarian who loved animals and despised war, yet he worked as a military engineer to invent advanced and deadly weapons.</p>
</div>

<div class="info">
<h2>Nikola Tesla</h2>
<p>Inventor Nikola Tesla contributed to the development of the alternating-current electrical system that's widely used today and discovered the rotating magnetic field.</p>
</div>