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


Text align

The text alignment can be defined with the text-align:value; css property, in style. The 'value' can be: left, center, right (default is left).

<div style="text-align:center;"> This text is displayed in the center of the Div. </div>

Size, font and color of text

In the style attribute you can add CSS properties to control the 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 HTML tags for text formatting

- Set 1: Example:
<pre>
Text within PRE tag after some space,
new line without a BR
</pre>
<cite>Example of cite</cite>
- Set 2: Example:
<del>Deleted text</del><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>
- Set 3 (The following tags are used for documents with technical applications): Example:
<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>Example with <kbd>text in kbd</kbd> and some <var>$php_var</var>.</p>
- Set 4: Example:
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>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag defines marked text? (can be used to highlight parts of text)
<mark> <embed> <span>
<p>Free corses: <mark>coursesweb.net</mark> for Web Development.</p>
Which CSS pseudo-class adds a style to an element when the mouse is over it?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Click on the function which returns a string value that represents the number rounded to the x digits after the decimal point.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicate the PHP function which reads an entire file into an array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
HTML Text Formatting

Last accessed pages

  1. Node.js Move and Copy file (12285)
  2. Convert XML to JSON in JavaScript (21274)
  3. innerHTML and outerHTML to Get and Replace HTML content (22099)
  4. Creating objects in ActionScript (8098)
  5. Insert, Select and Update NULL value in MySQL (44208)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1278)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (1243)
  3. Tabs effect with CSS (1235)
  4. Contact page - CoursesWeb (1233)
  5. Insert, Select and Update NULL value in MySQL (730)