Scribd
Upload
6 views

HTML Formatting Elements

The document provides an overview of HTML formatting elements, including tags for bold, italic, and emphasized text, as well as styling options for fonts, colors, and alignment. It also covers HTML links, images, tables, lists, and iframes, detailing how to implement borders and background images. Additionally, it explains the structure and syntax for unordered, ordered, and description lists.

Uploaded by

PG Zain
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views

HTML Formatting Elements

The document provides an overview of HTML formatting elements, including tags for bold, italic, and emphasized text, as well as styling options for fonts, colors, and alignment. It also covers HTML links, images, tables, lists, and iframes, detailing how to implement borders and background images. Additionally, it explains the structure and syntax for unordered, ordered, and description lists.

Uploaded by

PG Zain
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

HTML Formatting Elements

Formatting elements were designed to display special types of text:

 <b> - Bold text


 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

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

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

Background Color
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Text Color
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Text Alignment
Alignment (right, left, Centre, justify)
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

HTML Links - Syntax


<a href="https://www.example.com">Visit Example</a>

Link to an Email Address


<a href="mailto:[email protected]">Send email</a>

HTML Images
<img src="img_girl.jpg" alt="Girl in a jacket">

Image Size - Width and Height


<img src="img_girl.jpg" alt="Girl in a
jacket" width="500" height="600">

How To Add a Border to an Image


img {
border: 5px solid #555;
}

Background Image on an HTML


element
<style>
body {
background-image: url('img_girl.jpg');
background-size: 100% 100%;
}
</style>

HTML Tables
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>

How To Add a Border


table, th, td {
border: 1px solid black;
}

Collapsed Table Borders


table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

Style Table Borders


table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}

Unordered HTML List


<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Ordered HTML List


<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

HTML Description Lists


<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

HTML List Tags


Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list

HTML Iframes
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the
size of the iframe:</p>

<iframe src="demo_iframe.htm" height="200" width="300"


title="Iframe Example"></iframe>

</body>
</html>

OUTPUT:

You might also like