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.

Monday, January 30, 2017

Bootstrap Example-Sixteen (Bootstrap Typography)

Bootstrap Example-Sixteen (Bootstrap Typography)



Bootstrap Example-Sixteen (Bootstrap Typography)-Contextual background colors



Write the code on your index.html :

Contextual Backgrounds
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <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>Contextual Backgrounds</h2>
  <p>Use the contextual background classes to provide "meaning through colors":</p>
  <p class="bg-primary">This text is important.</p>
  <p class="bg-success">This text indicates success.</p>
  <p class="bg-info">This text represents some information.</p>
  <p class="bg-warning">This text represents a warning.</p>
  <p class="bg-danger">This text represents danger.</p>
</div>

</body>
</html>

You will get the Result:

Contextual background colors

 

 

 


Source:http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_txt_bgcolors&stacked=h

Bootstrap Example-Fifteen (Bootstrap Typography)-


Bootstrap Example-Fifteen (Bootstrap Typography)

 

Bootstrap Example-Fifteen (Bootstrap Typography)-Contextual text colors


Write the code on your index.html :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <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>Contextual Colors</h2>
  <p>Use the contextual classes to provide "meaning through colors":</p>
  <p class="text-muted">This text is muted.</p>
  <p class="text-primary">This text is important.</p>
  <p class="text-success">This text indicates success.</p>
  <p class="text-info">This text represents some information.</p>
  <p class="text-warning">This text represents a warning.</p>
  <p class="text-danger">This text represents danger.</p>
</div>

</body>
</html>

You will get the Result:

 Contextual Colors

Use the contextual classes to provide "meaning through colors":
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Source: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_txt_colors&stacked=h