Thursday, February 23, 2017

Bootstrap Example-Nineteen (Bootstrap Typography)


Bootstrap Example-Nineteen (Bootstrap Typography)

.text-left Indicates left-aligned text

To write the below html code


<<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Typography</h2>
  <p class="text-left">Left-aligned text.</p>
  <p class="text-right">Right-aligned text.</p>     
  <p class="text-center">Center-aligned text.</p>
  <p class="text-justify">Justified text. Justified text. Justified text. Justified text. Justified text. Justified text.</p>     
  <p class="text-nowrap">No wrap text. No wrap text. No wrap text. No wrap text.</p>
  <p><strong>Tip:</strong> Try to resize the browser window to see the behaviour of justify and nowrap.</p>     
</div>

</body>
</html>


You wil find the below result as like as:

Typography

Left-aligned text.
                                                                                                                            Right-aligned text.
                                                                          Center-aligned text.
Justified text. Justified text. Justified text. Justified text. Justified text. Justified text.
No wrap text. No wrap text. No wrap text. No wrap text.
Tip: Try to resize the browser window to see the behaviour of justify and nowrap.







Bootstrap Example-Egihteen (Bootstrap Typography)


Bootstrap Example-Eighteen (Bootstrap Typography)


To write the below html code


<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>

  <body>
    <div class="container">
      <h2>Typography</h2>
      <p>Use the .small class to make the text smaller:</p>
      <p class="small">This paragraph is smaller.</p>
      <p>This is a regular paragraph.</p>
    </div>
  </body>
 
</html>


You wil find the below result as like as:

Typography

Use the small class to make the text smaller:
This paragraph is smaller.
This is a regular paragraph.








Bootstrap Example-Seventeen (Bootstrap Typography)


Bootstrap Example-Seventeen (Bootstrap Typography)


To write the below html code


<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Typography</h2>
  <p>Use the .lead class to make a paragraph "stand out":</p>
  <p class="lead">This paragraph stands out.</p>
  <p>This is a regular paragraph.</p>
</div>

</body>
</html>


You wil find the below result as like as:

Typography

Use the .lead class to make a paragraph "stand out":
This paragraph stands out.
This is a regular paragraph.



 




Thursday, February 2, 2017

HTML Introduction


HTML Introduction

What is HTML?

HTML is the standard markup language for creating Web pages.
  • HTML stands for Hyper Text Markup Language
  • HTML describes the structure of Web pages using markup
  • HTML elements are the building blocks of HTML pages
  • HTML elements are represented by tags
  • HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
  • Browsers do not display the HTML tags, but use them to render the content of the page

Example Explained

  • The <!DOCTYPE html> declaration defines this document to be HTML5
  • The <html> element is the root element of an HTML page
  • The <head> element contains meta information about the document
  • The <title> element specifies a title for the document
  • The <body> element contains the visible page content
  • The <h1> element defines a large heading
  • The <p> element defines a paragraph

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Links

HTML links are defined with the <a> tag:
Example
<a href="http://www.w3schools.com">This is a link</a>

The link's destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.