Scribd
Upload
2 views

HTML TextFormattingColors

The document discusses various HTML elements for formatting text, including those that define bold, italic, emphasized, small, marked, deleted, inserted, subscripted and superscripted text. It also covers how to specify colors in HTML using color names, RGB, HEX and other values, and how to apply colors to backgrounds, text and borders.

Uploaded by

jayr domnigo
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

HTML TextFormattingColors

The document discusses various HTML elements for formatting text, including those that define bold, italic, emphasized, small, marked, deleted, inserted, subscripted and superscripted text. It also covers how to specify colors in HTML using color names, RGB, HEX and other values, and how to apply colors to backgrounds, text and borders.

Uploaded by

jayr domnigo
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

HTML 

Text Formatting
HTML contains several elements for defining text
with a special meaning.
Example: Output:
<!DOCTYPE html>
<html> This text is bold
<body> This text is italic
<p><b>This text is bold</b></p> This is subscript and superscript
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and
<sup>superscript</sup></p>

</body>
</html>
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
HTML <b> and <strong> Elements
The HTML <b> element defines bold text, without any extra importance.

Example: Output:
<!DOCTYPE html>
<html> This text is normal.
<body> This text is bold
<p>This text is normal.</p>
<p><b>This text is bold.</b></p> This text is important!
<p><strong>This text is bold.</ strong ></p>
</body>
</html>
The HTML <strong> element defines text with strong importance. The content inside is
typically displayed in bold.
HTML <i> and <em> Elements
The HTML <i> element defines a part of text in an alternate voice or mood. The content inside
is typically displayed in italic.
Tip: The <i> tag is often used to indicate a technical term, a phrase from another language, a
thought, a ship name, etc.
The HTML <em> element defines emphasized text. The content inside is
typically displayed in italic.

Example: Output:
<!DOCTYPE html>
<html> This text is normal.
<body> This text is italic.
<p>This text is normal.</p>
<p><em>This text is emphasized.</em></p> This text is emphasized.
</body>
</html>
HTML <small> Element
The HTML <small> element defines smaller text:

Example: Output:
<!DOCTYPE html>
<html> This is some normal text.
This is some smaller text.
<body>
<p>This is some normal text.</p>
<p><small>This is some smaller text.</small></p>
</body>
</html>
HTML <mark> Element
The HTML <mark> element defines text that should be marked or
highlighted:

Example: Output:
<!DOCTYPE html>
<html>
<body>
<p>Do not forget to buy <mark>milk</mark> today.</p>
</body>
</html>
HTML <del> Element
The HTML <del> element defines text that has been deleted from a document.
Browsers will usually strike a line through deleted text:

Example: Output:
<!DOCTYPE html>
<html>
<body>
<p>My favorite color is <del>blue</del> red.</p>
</body>
</html>
HTML <ins> Element
The HTML <ins> element defines a text that has been inserted into a document.
Browsers will usually underline inserted text:

Example: Output:
<!DOCTYPE html>
<html>
<body>

<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

</body>
</html>
HTML <sub> Element
The HTML <sub> element defines subscript text. Subscript text appears half a
character below the normal line, and is sometimes rendered in a smaller font.
Subscript text can be used for chemical formulas, like H2O:
Example: Output:
<!DOCTYPE html>
<html>
<body>

<p>This is <sub>subscripted</sub> text.</p>

</body>
</html>
HTML <sup> Element
The HTML <sup> element defines superscript text. Superscript text appears half a
character above the normal line, and is sometimes rendered in a smaller font.
Superscript text can be used for footnotes, like WWW[1]:

Example: Output:
<!DOCTYPE html>
<html>
<body>

<p>This is <sup>superscripted</sup> text.</p>

</body>
</html>
HTML Comment Tag
You can add comments to your HTML source by using the following
syntax: <!-- Write your comments here -->

Example: Output:
<!DOCTYPE html>
<html>
<body>
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->
</body>
</html>
HTML COLORS
HTML COLORS
HTML colors are specified with predefined color names, or with RGB, HEX, HSL,
RGBA, or HSLA values.
COLOR NAMES
In HTML, a color can be specified by using a color name:
Example: Output:
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-
color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
BACKGROUND COLOR
You can set the background color for HTML elements:
Example: Output:
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>


<p style="background-color:Tomato;">
my name is _________________________
</p>

</body>
</html>
Text Color
You can set the color of text:

Example: Output:
<!DOCTYPE html>
<html>
<body>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Hello World</p>

<p style="color:MediumSeaGreen;">Hello World</p>

</body>
</html>
Border Color
You can set the color of borders:
Example: Output:
<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid Tomato;">Hello World</h1>

<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

<h1 style="border: 2px solid Violet;">Hello World</h1>

</body>
</html>

You might also like