HTML for STARTERS

HTML for STARTERS

HTML is the primary language used for creating Web Pages. The main problems encountered with HTML is that the writers of different Browsers have written their own versions and what works in say Microsoft Internet Explorer, may not be recognised by Netscape Navigator. Attempts are being made to standardise HTML, but the Browser companies are slow on taking it on board. Until some sanity is instilled, I can only suggest you have at least the 2 browsers mentioned above to test your HTML code. Similar problems occur with Java Applets as in this instance, 'pig-headed' Microsoft went their own way with Javascript and have caused incompatibility problems there. All the command/tags given here are cross browser compatible (except where stated otherwise), but the permitted 'attributes' may vary. Good luck in your endeavours!
HTML takes no prisoners, as you will have discovered if you have tried to save your document as Web pages. What makes matters worse is that Web pages are quite volatile, and can even change as you resize the browser window! The key to producing good pages lies in understanding what HTML can do, and the best way to do that is to look at existing sites. Note how the text is usually limited to a range of basic styles (a bit like an outline format) and usually has the images in line with the text with separating lines, or graphics, to break up sections. With practice it doesn't take too long to turn most Word documents into good looking Web pages. (Note: the Word97 inbuilt translator is total CRAP, Excel97's is slightly better, as Word's version incorrectly closes tags and causes problems for many browsers, including Microsoft's own in certain areas).
Before you go and read this speil, a quick advertisement for an excellent FREE HTML editor. It's Arachnophilia (the majority of these pages were made using it) and can be used with a sparse knowledge of HTML, it's that simple yet very powerful. It's downloadable from both Tucows or WebAttack, and most likely other such sites.

HTML Tags


Used to add comments to code. All text between the tags is ignored by browsers.
For example:  will not show on your Web page, neither would:
.

<a></a>
Anchor tag. Sets up a text or picture hyperlink to another document, URL or another named anchor tag. The link includes a name, which sets the name for hyperlink so you can jump directly to it from another anchor or href , which is the URL or document you are linking to. You can also target the name of the frame you want the linked document to load into. For example
<a href="mydoc.htm" target="main"> I'm a link </a>
With this tag it is possible to link within the same page. This is done by identifying the section of the page you wish to link to with:
<a name="name"></a>
and linking to it with
<a href="#name">click here</a>

<applet></applet>
Applet tag. Inserts a Java applet into a page. Java applets are separate files that add animation or interactivity to a page. You can align , giving the horizontal alignment for the applet in relation to the text. Code is the actual filename of the Java applet class file and codebase is the location of applet code. height and width set the dimensions of the applet in pixels. You also use <param> inside the main tags to set parameters for the applet. For Example:
<applet code="animation.class"
width="100" height="100">
<param name="image" value="picture.gif">
</applet>
For more information, go to http://www.netmag.co.uk/webbuilder/59easy/javaapplets/

<b></b>
Makes text between the tags bold. Similar tags include <em> and <strong> - experimentation is the key. Superceded by Style Sheets in version 4 browsers.

<base>
A stand-alone tag that defines anchor tag preferences for the entire document. Again, href gives the location which relative links should use as a base and target is the default target frame for any document linked. For example:
<base href="http://www.netmag.co.uk/webbuilder/" target="_top">

<body></body>
Defines the section of an HTML document which contains the text and other elements that are displayed in the browser.

<br>
Inserts a line break. If the text is meant to wrap around an image, the clear attribute can be used to force the text to continue on the next clear line.

<center></center>
Centralises all the content between the tags.

<dl></dl>
Produces a definition list or glossary. The list will be made up from terms <dt> and definitions <dd>.

<div></div>
Encloses a block of content and is used to apply alignment and style characteristics to a section that contains multiple elements rather than having to apply these to each element.

<embed></embed>
Defines an embedded object in an HTML document. Often used to include plug-ins such as Shockwave or Crescendo within the document.

<font></font>
Changes font properties such as type face, size and color. Superceded by Style Sheets in version 4 browsers. For example.
<font face="Arial" size="1" color="Red"><b> I'm red.</b></font> produces : I'm red.

<form></form>
Defines a form for the user to fill out. The form can contain an interface of text boxes, check boxes, buttons and selection lists that accept information from the user which can then be processed by a CGI script. See also <input>. The form can contain other HTML elements, such as tables.

<frame>
Defines a single frame within a <frameset>. Each frame is an individual area within a Web browser and has it's own URL. For example:
<frame name="main" src="start.htm" scrolling="auto">
(N.B. Frames are not always popular with Web page visitors and may put them off exploring your page. Personally I hate them and exit the page as soon as I see it's using frames. Axiompc.)

<frameset></frameset>
Defines the main container for a <frame>. An HTML document that contains <frameset> cannot contain a <body> tag. For example:
<frameset cols="150, *, 20%"></frameset>

<h1></h1>
Head tag level 1 (Largest)

<h2></h2>
Head tag level 2.

<h3></h3>
Head tag level 3.

<h4></h4>
Head tag level 4.

<h5></h5>
Head tag level 5.

<h6></h6>
Head tag level 6.

<head></head>
Contains information about the document rather than the information to be displayed in the document such as <title> and <meta> tags.

<hr>
Draws a horizontal rule across a document window or frame. size and width (in pixels or percentage terms) parameters can be used to define style of rule.

<html></html>
Signals at the beginning and end of the document. Every HTML document must contain the <html> tag.

<i></i>
Defines a section of italic text. Superseded by Style Sheets in version 4 browsers.

<img>
Embeds an image into a document. src defines the image file and height and width tags can be used to define or constrain the dimensions of the image. The alt parameter enables text to be displayed for those browsers that do not support images, or have images turned off. For example:
<img src="images/image.gif" height="100" width="180" alt="My image">

<input></input>
Defines a user input box within a form element. The type parameter determines what sort of element is created. Button, checkbox, hidden, image, password, reset and submit are all types of input elements.

<li> </li>
Defines a list item in any type of list other than a definition list and with the closing tag allows a list to be truncated. For an example of this check the Source code for my Jargon Explained page.

<meta>
Defines the content of the document. The tag has no effect on the appearance of the Web page but is intended for use by programs such as search engines and browsers. The <meta> can also be used to load another page after a given time. This is done with the following code:
<meta http-equiv="refresh" content="10;URL=http://www.server.org/next.html">

<noframes></noframes>
Displays content to be shown if browser does not support frames. Allows for backwards compatability with non-frame compliant browsers. Browsers that support frames will ignore text between the <noframes> tags.

<noscript></noscript>
Defines HTML to be displayed in browsers that do not support scripting. Browsers that support script will ignore the text between the <noscript> tags.

<ol></ol>
Defines an ordered (numbered) list which will contain a number of list items <li>. The type of numbering/lettering can be defined as 1, i, A, a within the tag as <ol type="i">. To start a list at a higher point, just insert the start number/letter as the type attribute.

<option></option>
Used within the <select> form tag to present the user with a number of options. When the form is submitted, only the option chosen will be sent to the server-side CGI script.

<p></p>
Defines a paragraph within a block of text. N.B. The </p> is optional almost to the point of being obsolete.

<script></script>
Text between the tags is inserted client side script code. Commonly used to place JavaScript within an HTML page.

<select></select>
Denotes a list box or drop-down list within a form. List elements are individually defined by the <option> tag.

<strike></strike>
Strike through. Renders the enclosed text as crossed out like ~~this~~ for example.

<table></table>
Defines a series of columns and rows to form a table. The table consists of <tr> tags to define rows and <td> tags to define cells within those rows.

<td></td>
Specifies a cell in a table. Can only be used within a <tr> table row tag. colspan and rowspan parameters define how many rows or columns the table cell occupies. bgcolor defines the colour of the cell.

<textarea></textarea>
Defines a text area within a form element. The parameter cols defines the number of characters per line, while rows specifies the number of lines that are visible. Scroll bars will be used to accommodate more text.

<title></title>
Defines the title of the document which is displayed in the title bar of the browser window and used by automated tools to index components.

<tr></tr>
Defines a table row. Can only be used within a <table> tag. The cells within a table row are defined by <td> tags.

<u></u>
Denotes a section of underlined text. Superseded by Style Sheets in version 4 browsers.

<ul></ul>
Defines an unordered (bulleted) list which will contain a number of list items <li>. The type of bullet can be defined as disk (default), square or circle within the tag as <ul type="circle">.


SPECIAL CHARACTERS:
Special Character	&#?;	(where ? is the ISO 8859-1 code)
<	<
>	>
&	&
"	"
Registered TM	®	Gives ®
Copyright	©	Gives ©
Non-breaking Space
ä, ë, ï, ö, ü, ÿ	ä	) Applies for ä, ë, ï, ö, ü, through
â, ê, î, ô, û	â	) Ä, Ë, Ï, Ö, Ü down to á.
ã, ñ, õ	ã	)You can change 'a' to 'e', i, 'o' or 'u',
å	å	) or change 'A' to 'E', I, 'O' or 'U', etc.
à, è, ì, ò, ù	&agrave	) Partial inclusion for i and y.
á, é, í, ó, ú, ý	á	) NB. Specify font.
æ	æ	As in Cæsar, the Veni Vidi Vici guy.
œ	&oelig;	As in Amœba, that single cell thingy, or Œdipus as in Rex.

N.B. Some of the above will not work with certain browsers, notably ALL versions of Netscape, before Netscape 6. So that you know the ones that create problems, it's the first and last items in the above list (&#?; {works with some numbers} and &oelig;), although Netscape 4.77 does work for Œ and œ with  and  as shown here.
For more special characters look at the Special Characters Page. These and more are there.

Further help from the .net Web site: -

Web JavaScript

I hope anyone who reads this page, finds it useful as a starter for HTML usage with constructing a Web page. Here is another HTML Guide page that contains much of the above but has items omitted here

This page hosted by Get your own Free Home Page