VirtualMV/HTML/Basic/Formating and Lines

From WikiEducator
Jump to: navigation, search


VmvIcon Objectives.png

By the end of this page you will have

  • added some formatting tags:

Formatting tags

Text can be formatted using the following tags;

  • The <p> tag is used to create a new paragraph
  • The <br> tag specifies a line break between blocks of text. There are variations of the br tag, (<br>,</br>). If you were to adhere to the rules of XML (XHTML) you would use <br /> as it shows the tag is closed, but HTML5 is not XHTML5!!
  • The <pre> ... </pre> tag is useful for formatting text where white space is important (where spaces are to be included).
  • The <div> ... </div> tag is useful for formatting a block of text, and is commonly used with style sheets.
  • The <blockquote> ... </blockquote> tag is useful for formatting a block of text which is a quote, and indents the text in both the left and right margins.
  • Alignment (left, center, right) can be achieved the style attribute, for example style ="text-align:center"
<!DOCTYPE html>
  <META NAME="keywords" CONTENT="html, htm, first page">
  <META NAME="description" CONTENT="First web page">
  <title>**’s first page</title>
  <h1>**’s web</h1>
  <p>Hello <b>world</b></p>
  <h2>Favourite quotes</h2>
  <p>Live long and prosper</p>
  <p>To be, or not to be .....<br>that is the question.</p>
  <p>Et tu Brutus.</p>
  <pre>     **space the final frontier</pre>
  <div style ="text-align:center">position: left right out</div>
  <blockquote>"You have derailed my train of thought"</blockquote>

TASK: Add and edit the body of one.html as shown above .


  • All media elements such as text (including headings) and graphics are automatically left aligned
  • Traditionally text alignment has been achieved using a container tag (one attached to another tag). In modern HTML this has been deprecated (phased out) and replaced with a style attribute, for example
    • <div style="text-align: center">, remembering to turn it off with </div>
    • <p style="text-align: right">, remembering to turn it off with </p>
    • <h2 style="text-align: center">, remembering to turn it off with </h2>
  • To center text (or other items on a page), you can also use the <center> and </center> tags. (Note: center is spelt the American way!). Using the <center> tag and the align attribute is discouraged and being replaced (deprecated) by the use of Style Sheets.
  • If bullet text is aligned the lines will be double spaced. (More on this later).

Phrase (logical style) elements

Are tags that exist inside other tags (such as the <p> tag ) However it is over to the browser as to how they are interpreted. It is probably better to use the style tag, and if you are interested in the semantic web (the web of meaning) you will create a special XML tag! Screen readers may inter[ret the tags e.g. strong may read it out with more emphasis! As you will see below some have interesting results!

Element Example Comment
<abbr> HTML abbreviation (in the example <abbr title="Hypertext Markup Language">HTML</abbr>)
<b> bold text bold!
<cite> bold text citation or reference usually in italics
<code> e.g. JS code while (intI <= 5){ computer code usually fixed (spaced) font
<dfn> The Internet is a global computer network Definition
<em> Emphasised text Emphasised (usually italics)
<i> Italic text Italic
<kbd> Type in QWERTY Identifies text to be type in
<mark> This is important Highlight (HTML5 onwards)
<samp> The printout shows Cost=$100 Program code sample output
<small> The fine print 30 day trial can be used for legal disclaimers and notices (fine print)
<strong> Note very hot something important - usually bold
<sub> Hypothesis H0 Subscript e.g. Hypothesis H<sub>0</sub>
<sup> y = x2 Superscript e.g. y = x<sup>2</sup>
<var> Int:I; Program variable (usually italics)

Lines (horizontal ruler)

A line can be inserted into the page by using the <hr> tag. For example

<hr width = "80%" size = "4" />

Where size = height of the line in pixels.

The hr tag can also be expressed in the number of pixels, For example

<hr width ="333" />

where 333 is the number of pixels across

If you want to add really flashy lines, you can include them as an image. For example create a line that is animated (this will be covered later).

L comet1.gif

VmvIcon References.png References

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/HTML/Basic/Formating and Lines. (2017). In WikiEducator/VirtualMV wiki. Retrieved October 24, 2017, from    (zotero)