Basic HTML Commands

Hyper Text Markup Language

Firstly a brief background

• Tim Berners-Lee designed this language and wrote the first web browser (in Geneva) at the European Laboratory for Particle Physics in 1989. However, for graphics support it only ran on Steve Jobs's NeXT computers. A free version of this browser, known as Mosaic, was made available to university colleges everywhere in 1993. It ran on Windows, Apple and Unix. As numerous "web" sites formed on the Internet, Marc Andreesen added the graphical <IMG> image tag to his Netscape browser and released it in 1994. With support for both ISO's .JPG format, plus Compuserve's .GIF format, people everywhere referred to it as supporting HTML2.
• In 1995, a worldwide committee under the auspices of Tim Berners-Lee released the HTML3 standard with support for graphical "stylesheets". This was supported not only by Netscape, but also the new Internet Explorer (a version of Mosaic) that was licensed by Microsoft to run in Windows 95.
• In 1997 the HTML4 standard was released with an internal specialist programming language (known as Javascript) and also the <object> tag which provided support for audio and video downloads. This has become the prevailing standard on literally billions of web pages — and supported by all browsers. Since 2011 however, a new standard HTML5 has been made available to support high quality graphics and movies, especially on smartphones, without the need to download Adobe Flash. Supported by all the newer browsers.

  Click here for an iOS resolution reference for the various iPhone and iPad sizes.

The commonly used HTML tags referred to below are those applicable to HTML4. Click here to "dive" into HTML5.

HTML Tags

The first thing to remember about HTML tags is that most of them are used in pairs, ie., they have an opening and closing tag. Whenever you use a tag - say <span> - you must also close it off with another tag - in this case, </span>. Note the slash - / - before the word "span"; is what distinguishes a closing tag from an opening tag. A few of the HTML tags (br p li image hr) do not need a closing tag. All HTML commands are enclosed in <> braces. These <> brace sequences are what the Internet browser uses in determining how a page should be displayed.

All special HTML character entities and foreign characters are enclosed in & ; braces e.g. &lt; will display the < character.

Use of colour in the HTML commands. In the HTML tags listed, items shown in green are HTML command tags. Items in blue then illustrate actual HTML coding with the results of that coding shown immediately after it. Note, HTML command tags may be entered in either upper or lower case (or a combination of upper and lower case).

Text Tags center, h1 - h6, bold, italics, font, span, pre, tt, cite, br

Links a   using http & mailto

Formatting Blocks div, p, blockquote, ol, ul, li

Graphical Elements img, hr

Tables table, tr, td

Click here for more information on these commands.

Text Tags    Return to Top of Menu

<center></center> Centers a portion of text <center>This text is centered</center> This text is centered

<hl></hl> (h and the number one) Creates the largest headline <hl>Biggest Heading</hl> Biggest Heading Please note HTML tags can be combined. In this next example the center and the h1 tags are combined. Also, note that the closing HTML tags must be in the opposite order (work from inside out). <center><hl>Biggest Heading Centered</hl></center> Biggest Heading Centered

<h2></h2> (h and the number two) Creates the next biggest headline. Heading Numbers range from 1 to 6. One is the largest and six is the smallest. <h2>Next Biggest Heading</h2> Next Biggest Heading

<h6></h6> (h and the number six) Creates the smallest headline <h6>Smallest Heading</h6> Smallest Heading

<b></b> Creates bold text <b>Bold Print</b> Bold Print

<i></i> Creates italic text <i>Italic Print</i> Italic Print

<font size=?></font> Sets size of font, from 1 to 7. <font size="3">Example of size 3</font> Example of size 3 font

<span></span> Alternative span command that changes Font size and, optionally, Font family <span style='font-size:16pt;font-family:Arial'>This is an example of a span that changes the font size to 16pt and the font family to Arial.</span> This is an example of a span that changes the font size to 16pt and the font family to Arial.

<font color=?></font> Sets font color, using name or hex value. Note that the color and size tags may be set into the same command. <font color="red" size="2">Red text size equal 2</font> Red text size equal 2 <font color="#ff0000" size="2">Same using hex color codes</font> Same using hex color codes Note: Good site for HTML Color Codes.

<pre></pre> Preformatted text - the text is displayed the same way it is typed. Sometimes this is used to get text to align in columns. However, the table command (below) is a much better command to use to align text in columns. <pre> This is an example of the pre command. When you use this command type the text exactly as you wish it to appear. Column 1 Column 2 Column 3 item1 item2 item3 item4 item5 item6 </pre>

<tt></tt> Creates teletype, or typewriter-style text <tt>This is an example of teletype text.</tt> This is an example of teletype text.

<cite></cite> Creates a citation, usually italic <cite>This is an example of a citation.</cite> This is an example of a citation.

<br> Inserts a line break (line feed).

Links    Return to Top of Menu

<a href="URL"></a> Creates a hyperlink. The URL can be either of two formats. First format: If the link is to a page external to your web site then the link must be preceded by http://. For example http://www.yahoo.com.   Second Format: If you were linking to a page hosted at your own domain (i.e. on your own website), the http://www.yourdomain.com portion of the URL could be omitted. For example if the URL was http://www.yourdomain.com /example/images/mylink.htm, where yourdomain.com was your own website you could reference it as /example/images/mylink.htm. A link to <a href="http://www.google.com"> google.com</a>. A link to google.com.

<a href="mailto:EMAIL"></a> Creates a mailto link Send an email to <a href="mailto:steve@swcs.com.au"> steve@swcs.com.au</a>. Send an email to steve@swcs.com.au.

Formatting Blocks    Return to Top of Menu

<div> Creates a new division

<p> Creates a new paragraph. Inserts an extra line feed prior to the beginning of the text.

<p align=?> Aligns a paragraph to the left, right, or center

<blockquote> </blockquote> Indents text from both sides <blockquote>This is an example of a blockquote.</blockquote> This is an example of a blockquote.

<ol></ol> Creates a numbered list

<ul></ul> Creates a bulleted list

<li> Precedes each list item, and adds a number Numbered list. <ol> <li>Line 1. <li>Line 2. <li>Line 3. </ol> Line 1. Line 2. Line 3. Bulleted list. <ul> <li>Item 1. <li>Item 2. <li>Item 3. </ul> Item 1. Item 2. Item 3.

Graphical Elements    Return to Top of Menu

<img src="URL"> Adds an image. Please note the URL is the same format as described in the <a href="URL"> command above.

<img src="URL" align=?> Aligns an image: left, right, center; bottom, top, middle

<img src="URL" height=? width=?> Aligns an image with the height and width set. Setting the height and width of the image allows the browser to load the page fractionally quicker and without "jiggling" the page since it knows beforehand how much space to allocate to the image.

<img src="URL" border=?> Sets size of border around an image Insert the swcs logo and have it left aligned with no border and with height and width set. Note: The align, height, width, and border tags are optional. <img src="https://www.swcs.com.au /swcslogo.gif" height="54" width="65" align="left" border="0">

<hr> Inserts a horizontal rule

<hr size=?> Sets size (height) of rule

<hr width=?> Sets width of rule, in percentage or absolute value

<hr noshade> Creates a rule without a shadow Insert an unshaded ruler of height 4 and width 300. <hr size="4" noshade width="300">

Tables    Return to Top of Menu

<table></table> Creates a table

<tr></tr> Sets off each row in a table

<td></td> Sets off each cell in a row

<th></th> Sets off the table header (a normal cell with bold, centered text)

Table Attributes

<table border=#> Sets width of border around table cells

<table cellspacing=#> Sets amount of space between table cells

<table cellpadding=#> Sets amount of space between a cell's border and its contents

<table width=# or %> Sets width of table — in pixels or as a percentage of document width

<tr align=?> or <td align=?> Sets alignment for cell(s) (left, center, or right)

<tr valign=?> or <td valign=?> Sets vertical alignment for cell(s) (top, middle, or bottom)

<td width=# or %> Sets width of cell — in pixels or as a percentage of table width

<td colspan=#> Sets number of columns a cell should span (default=1)

<td rowspan=#> Sets number of rows a cell should span (default=1)

<td nowrap> Prevents the lines within a cell from being broken to fit

Three further notes re styles in Heading layouts

• Firstly, the style in the heading layout for this page was set out as follows:

  <html>
  <head>
  <meta name=viewport content="width=device-width, initial-scale=1">
  <title>Basic HTML Commands</title>
  <style>
  p, br, td, li{font-size:20.0px;font-family:"Arial";}
  a:link {color: purple;}

  </style>
  </head>
  <body>
  .
  .
  <p id="MenuTop">
  .
  .
  .
  

   

• Normally, HTML pages "wrap" lines and remove any additional "whitespace" within the window, unless specifically told not to (e.g. via the use of the <pre> command).
  If you copy and paste from another document, and want to retain its spacing layout via the use of this <pre> command, but also the convenience of "wrapping" all the text inside the window area, add the following "wrap" command to the heading:

  <style>
  pre {
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
  }
  </style>
  

   

• If you wish to retain a set layout for a web page e.g. a news bulletin with tables and "no wrapping", and irrespective of whether the page is being read on a smartphone, a tablet, a desktop, or even a television, you will probably want to increase the font size automatically, basing that decision on the width of the client window. Click here for some ideas on how to achieve that.

With all due appreciation to InfoSports which provided much of the background to this page