Tags HTML
1. Headings
HTML headings are defined with the <h1>
to <h6> tags. <h1> defines the most important heading. <h6>
defines the least important heading.
Ex-
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js\bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css\bootstrap.min.css">
</head>
<body>
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
</body>
</html>
Result-
2. Paragraphs
HTML paragraphs are defined with the <p>
tag
Ex-
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js\bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css\bootstrap.min.css">
</head>
<body>
<p>This is paragraph</p>
</body>
</html>
Result-
Note:- For creating
dummy text type lorem and press tab button
3.
Links
HTML
links are defined with the <a> tag
Ex-
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js\bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css\bootstrap.min.css">
</head>
<body>
<a href="https://www.google.com">This is link www.google.com</a>
</body>
</html>
4.
Horizontal
Rules
The <hr>
tag defines a thematic break in an HTML page
Ex- <hr>
5.
Line
Breaks
The HTML <br> element defines
a line break.
Ex-
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js\bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css\bootstrap.min.css">
</head>
<body>
<p>This is<br>a paragraph<br>with line breaks.</p>
</body>
</html>
Result-
6.
Preformatted
The HTML <pre> element defines preformatted text
Ex-
<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>
- Grid system consist of row’s and column’s each row contain 12 column’s
- Row à Creating row by using “row” class
- Column à col-device name-count
xs-4 àextra small [mobile]
sm-4 à small [tab]
md-4 à medium [desktop]
lg-4 à large
- Space between two columns used to “offset”
Col-sm-offset-4
-
Container à It is used for keeping more space on both side of
containt
-
Container-fluid à It is used for keeping less space on both side of
containt
Ex-
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js\bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css\bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-sm-4 col-sm-offset-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-sm-4 col-sm-offset-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</body>
</html>
Result-
0 Comments