Formatting Tags

HTML contains several elements, tags and attributes, to display text in multiple formats with different layouts.

Size, font and color of text

In the style attribute you can add CSS properties to control the typeface, type size, and color of the text displayed in the browser.
          - The typeface can be changed with the css font-family:'font_type'; property.
<div style="font-family:'Arial Black';">This is the Arial Black font.</div>

          - The text size can be changed with the css font-size property.
<div style="font-size:20px;">Font with 20px size</div>

          - The text color can be changed with the css color property, with a value of type: "#RRGGBB" or "color name".
<div style="colo:r#00c000;">Text with font color #00c000</div>

Bold, Italic, Underline and other elements

Elements often used to format text (called formatting tags): - Often <strong> renders as <b>, and <em> renders as <i>. But <strong> or <em> means that you want the text to be rendered in a way that the user understands as "important".
Example:
<b> bold </b>
<i> italic </i>
<u> underline </u>
<em> emphasized </em>
<strong> strong </strong>

Other elements used for text formatting

- The set 1: Example:
<html>
<head>
 <title>Document Title</title>
</head>
<body>

<pre>
Text within PRE tag
new line without a BR
</pre>
<tt>Teletype text</tt><br />
<cite>Example of cite</cite>

</body>
</html>
This code will display:
Text within PRE tag
new line without a BR
Teletype text
Example of cite

- The set 2: Example:
<html>
<head>
 <title>Document Title</title>
</head>
<body>

<del>Deleted text</del><br />
<big>Display the text in bigger format</big><br />
<small>Display the text in smaller format</small><br />
<sub>Place text in subscript position</sub> Normal text <sup>Place text in superscript position</sup>

</body>
</html>
This code will display:
Deleted text
Display the text in bigger format
Display the text in smaller format
Place text in subscript position Normal text Place text in superscript position

- The set 3 (The following tags are used for documents with technical applications): Example:
<html>
<head>
 <title>Document Title</title>
</head>
<body>

<p>DOM reference: <code>document.getElementById('id')</code></p>
<dfn>Truecolor</dfn> uses 24 bits per pixel.
<p>Provide alternative error messages to <samp>404 Not Found</samp>.</p>
<p>Enter your coupon code. Example: <kbd>AX4003</kbd></p>
<code><var>webSite</var> = 'coursesweb.net/html/';</code>

</body>
</html>
This code will display:

DOM reference: document.getElementById('id')

Truecolor uses 24 bits per pixel.

Provide alternative error messages to 404 Not Found.

Enter your coupon code. Example: AX4003

webSite = 'coursesweb.net/html/';

- The set 4: Example:
<html>
<head>
 <title>Document Title</title>
</head>
<body>

I say: <q>If you want and you really believe, anything is possible.</q>
<blockquote>
 <p>The unrequited joys can bring sadness and shared suffering can bring joy.</p>
 This is the first day of the rest of your life.
 <p>Patience with love and love with patience.</p>
</blockquote>
<address>HTML Course: https://coursesweb.net/html/</address>

</body>
</html>
This code will display:
I say: If you want and you really believe, anything is possible.

The unrequited joys can bring sadness and shared suffering can bring joy.

This is the first day of the rest of your life.

Patience with love and love with patience.

HTML Course: https://coursesweb.net/html/

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
HTML Text Formatting

Last accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (71506)
  2. Node.js Move and Copy file (3515)
  3. PHP-MySQL Scripts (3745)
  4. PHP getElementById and getElementsByTagName (19140)
  5. Redirects (503)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (443)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (351)
  3. Register and show online users and visitors (319)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (301)
  5. Insert, Select and Update NULL value in MySQL (214)