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):
- Bold - <b> ... </b>
- Italic - <i> ... </i>
- Underline - <u> ... </u>
- Emphasized - <em> ... </em>
- Strong - <strong> ... </strong>
- 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:
- <pre>preformatted</pre> - the lines and character spaces are displayed exactly as they are typed in. Text within a <pre> element is displayed in a monospace font (usually Courier).
- <cite> cite tag </cite> - defines a citation - a reference to another work.
Example:
<pre>
Text within PRE tag after some space,
new line without a BR
</pre>
<cite>Example of cite</cite>
-
Set 2:
- <del> ... </del> - Indicates deleted text.
- <small> </small> - Defines small text.
- <sub> ... </sub> - Subscripted text.
- <sup> ... </pre> - Superscripted text.
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):
- <code> ... </code> - Defines computer code text.
- <dfn> ... </dfn> - Indicates a definition term.
- <samp> ... </samp> - Indicates sample output from programs, scripts, and so on.
- <kbd> </kbd> - Stands for 'keyboard' and indicates text entered by the user.
- <var> </var> - Indicates a variable.
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:
- <q> ... </q> - Delimits a short quotation that can be included inline.
- <blockquote> ... </blockquote> - Indicates a long quotation. It's a block level element. The browser inserts white space before and after a blockquote.
- <address> ... </address> - Defines contact information for the author /owner of a document
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 attribute is used in <a> tag for the address of the link?
src href rel<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Which CSS property sets the type of the text font?
font-family text-decoration font-sizeh2 {
font-family:"Calibri",sans-serif;
}What instruction selects all the <div> tags with class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length; // number of selected items
alert(nr_elms);Indicate the function that can be used to get the sum of values in an array.
array_sum() array_diff() array_shift()$arr =[1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum; // 10