HTML Text- alignment/conversion
1.
Text-alignment
·
text-left
·
text-right
·
text-center
· text-justify
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">
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</body>
</html>
Result-
2. Text-conversion
·
text-uppercase
·
text-lowercase
· text-capitalize
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">
<p class="text-uppercase">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor </p>
</div>
</body>
</html>
Result-
HTML Text- Style
The
HTML style attribute has the following syntax
<tagname style="property:value;">
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">
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</div>
</body>
</html>
Result-
1.
Text Color
<!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">
<h1 style="color: #ff33ff;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</div>
</body>
</html>
Result-
2.
Text Font
<!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">
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</div>
</body>
</html>
Result-
3.
Text Size
<!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">
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
</div>
</body>
</html>
Result-
4.
Background
Color/Image
<body style="background-color:powderblue;">
5.
Text
Bold/Strong & Italic
<!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 style="background-color:powderblue;" >
<div class="container">
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><i>This text is italic</i></p>
</div>
</body>
</html>
Result-
6.
Text
delete/insert/mark/small/subscripted/ superscripted
<!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 style="background-color:powderblue;" >
<div class="container">
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite <ins>color</ins> is red.</p>
<h2>HTML <small>Small</small> Formatting</h2>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
</div>
</body>
</html>
To highlight part of webpage
1.
<h2>HTML
<mark>Marked</mark> Formatting</h2>
2.
Jumbotron class:
<div class="jumbotron">
<p>-----text-----</p>
</div>
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 style="background-color:powderblue;" >
<div class="container">
<h2>HTML <mark>Marked</mark> Formatting</h2>
<div class="jumbotron">
<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>
</body>
</html>
Result-
7.
Quotations/abbreviations/address/bio-directional
<!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 style="background-color:powderblue;" >
<div class="container">
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<address> Written by John Doe.<br>Visit us at<br>Example.com<br>Box 564, Disneyland<br>USA</address>
<bdo dir="rtl">This text will be written from right to left</bdo>
</div>
</body>
</html>
8.
Comment
Ctrl+/
<!--
This is a comment -->
9.
Text blink
· Direction –up, down, left, right
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 style="background-color:powderblue;" >
<div class="container">
<marquee behavior="scroll" direction="right" style="height:500px;" class="blink"> Your upward scrolling text goes here </marquee>
<style type="text/css">
.blink{
color:red;
font-size:30px;
animation:blink_animation .5s infinite;
}
@keyframes blink_animation {
50% {color:red;}
100% {color:blue}
}
</style>
</div>
</body>
</html>
Result-
0 Comments