T2H - Creation of World Wide Web pages.txt

A World Wide Web page (or "internet document") is a text file written in accordance to the HyperText Markup Language (HTML) specification. When this file is placed in an internet server, it defines an "internet site" that may be reviewed by anyone that have internet access, although you do not need such access to review your own local web pages. Anyone can create a file with .html extension using a text editor like Windows Notepad, but the HTML specification is extensive and requires a certain domain knowledge in order to successfully create a web page.
[b]TextToHtml.bat[/b] is a conversion program that process a text file and translate it to a HTML file, so it allows the creation of completely functional web pages (like [i]this[/i] one) in a very simple way. The display parameters used in the created file have carefully selected default values, so the general aspect of the resulting page is very pleasant. The web elements are defined via a very simple method that allows the creation of a page in minutes, even with complex elements like lists, tables, animated images, etc. A series of optional values may be used to enrich the default appearance of any element, so the final look may be professional and complete. The only aspect that can not be changed is the general layout of the document, that resembles the [url=new:http://en.wikipedia.org/wiki/Wikipedia:Manual_of_Style/Layout]article layout of Wikipedia[/url] including a table of contents.
The elements of the web page are defined enclosing segments in the text file between special markers, called [i]tags[/i], that gives specific format to the segment; the tags are groups of equal-sign characters (like ===) or short words enclosed in square brackets (like [tag]) with the ending tag preceded by a slash (like [/tag]). For example, the contents of a file may be this one: "Normal text [tag]formatted text[/tag] more normal text"; when this file is converted and displayed in a web page, it looks this way: "Normal text [code]formatted text[/code] more normal text".
There are four types of tags that achieve different formatting operations: 1-Document subdivisions, 2-Text attributes, 3-Hypertext links and 4-Multi-line sections. These tags are explained in this document using concise descriptions and simple examples, but the descriptions will become larger and the examples numerous as the complexity of the described tag increases. If the description of a given tag suddenly becomes too complex for you, just pass to the next tag and return to that one later; the advanced features of any tag will be comprehended in an easier way after using the basic ones.[hr]
==Document subdivisions==|Separate sections and create a table of contents
===Your first web page===
Let's start this description with a small example that show you how easy is to use the conversion program. Follow the steps below:
[list=1]
[*]Create a text file named Hello.txt
[*]Open it with Notepad editor and insert: Hello World!
[*]Close the file and drag&drop it on TextToHtml.bat program icon
[/list]
After that, a new file named Hello.html is created and displayed.
===Basic formatting===
The text you insert in the file will be automatically adjusted to fit web page margins; this mean that a line break may be introduced between two words at any place. If you want to keep two words together, you may use [code][nbsp][/code] (nonbreaking space) tag; for example: [code]"Mr.[nbsp]Smith"[/code] produce "Mr.[nbsp]Smith" words that will never be split at right margin.
Each [i]line[/i] in the text file (up to 8192 characters long) will be displayed in one [i]paragraph[/i] and separated from the next paragraph by an empty line. If you want to introduce a simple line break, you may use [code][br][/code] tag; for example: [code]End of line[br]Start of new line[/code] produce: End of line[br]Start of new line in the same paragraph.
An empty line in the text file will be displayed as an additional empty line in the web page, like this one:

If you want to introduce a separating horizontal rule, use [code][hr][/code] tag; an example of such rule is shown before the Table of Contents above. You may modify the appearance of the rule via additional values ("modifiers") placed inside the tag; the value of each modifier must be enclosed in quotes.
[table border="1" align="center" cellpadding="5" rules="all"]Modifiers for HR tag
|Modifier|Description: possible values|Example
width|Width of horizontal rule: percentage of page width|width="70%"
align|Alignment if width is less than 100%: left, center, right|align="right"
size|Height of horizontal rule: pixels|size="3"
noshade|Show a solid bar rule if size is greater than 1|noshade="noshade"
[/table]
For example, this tag: [code][hr width="70%" align="right" size="3" noshade="noshade"][/code] produce: [hr width="70%" align="right" size="3" noshade="noshade"]
===Division headers===
These tags allows you to insert subdivision headers in a document and automatically create a Table of Contents with links to the subdivisions, that is inserted at beginning of the document. To do that, just enclose the division header between equal signs, from 2 up to 6 in accordance with the division level; for example: [code]==Two equal signs: Title of chapter==[/code], [code]===Three equal signs: Title of a section into chapter===[/code], etc; the header must appear in a line alone with no spaces at left side.
An optional comment may be included in the header separated by a vertical bar this way: [code]==Header|Comment to header==[/code]; the comment will appear in the Table of Contents, but just the header will work as link to the subdivision. If the comment is placed after the header, it becomes a [i]title[/i] that will momentarily appear when the cursor moved over the header in the Table of Contents: [code]==Header==|Momentary title[/code]. If the comment or title start with colon, it will also appear in the subdivision header: [code]==Header|:Comment in both table and subdivision header==[/code].
The Table of Contents may have a link to the subdivision header that have a second link to the subdivision body defined elsewhere; this feature allows to define "sub-tables" of contents with links to sections located at any place in the document. To do that, insert a "sublink" separated by colon before the header: [code]==sublink:Header|:Comment in table and sublink==[/code]; the sublink may be any name not used as target in other parts and the Header target must be defined later (for example, in a multi-line section). You may review an example of this scheme in [url=Windows-DOS Commands Help.txt]the text file[/url] created by HelpToTextToHtml.bat program, below ==Batch== subdivision.
If you insert paragraphs before the first division header they will appear before the Table of Contents, like an introduction to the document; you must not insert multi-line sections before the first division header.
You may change the "[b]Table of Contents[/b]" header itself including a header enclosed between one equal-sign (level-1 header) placed before the first level-2 header.
When a level-2 division ends, a link to the Top of the document is inserted at right side. You may mark the end of the last division (before the document footer) with a line that have just an equal-sign alone.
To create a web page with no Table of Contents, start the file with a line that have just one equal-sign.
===Your second web page===
Let's write now a more sophisticated web page. Follow the steps below and replace the indicated parts by your own data.
[list=1]
[*] Create a text file named [code]Your Name Here's data.txt[/code]
[*] Open it with Notepad and copy-paste the following text:
[code]
This is the second web page created by Your Name Here.
It is a very simple page that just display a couple personal data.[hr]
=Personal Data=
==Address==
Place your complete address here.[br]Use break tag to separate each address line.
==Phone==
Place your phone number here
[/code]
[*] Close the file and drag and drop it on TextToHtml.bat program
[/list]
You are invited to add to your web page the additional elements provided by TextToHtml.bat program as you review they in the rest of this document. You may review large examples of all these features in the source text file used to create [i]this[/i] web page, that you may open via this link: [url=new:Creation of World Wide Web pages.txt]Creation of World Wide Web pages.txt[/url] or directly with your text editor. I suggest you to extract the sections of your interest from the previous file in order to make tests on they; the conversion of small files is faster, specially with table data. You may also compare previous file versus the [i]converted[/i] HTML code via a right-click on this page and selecting "View source code", or via "View" menu tab and selecting "Source"; reviewing of this code is a good way to take a first contact with HTML.
Please be aware that you must not insert spaces that are not required in the tags; even a single space inserted at the wrong place may modify the result or cause a run-time error in the conversion program. Also, there are a few special characters that may produce errors when they are included in certain particular places; this is a technical limitation of the conversion program.
==Text attributes==|Change the appearance of the text
These tags change the appearance of the displayed text in a line.
===Code segment inline===
This segment is customarily used to differentiate certain elements explained in the text from the rest of the text. To show a code segment in the same line, enclose it between [code][code][/code] and [code][/code][/code] tags; the segment will appear in monospace font over light blue background (like [code]this one[/code]). Code segments inline do not break at right margin, so they should not be too long. A code segment inline can not appear at beginning of a line, so in this case you must insert a space before the tag.
===Text styles===
There are several different text styles that may be used to display text in a web page; to use them, just enclose the text between the desired starting and ending tags. For example: [code]"This show [b]bold text[/b] in a line"[/code] display: "This show [b]bold text[/b] in a line".
[table border="1" rules="rows" cellpadding="5" align="center"]Available text styles
|Style|Tag|Example|Display
Bold|b|[code]Show [b]bold[/b] text.[/code]|Show [b]bold[/b] text.
Italic|i|[code]Show [i]italic[/i] text.[/code]|Show [i]italic[/i] text.
Underline|u|[code]Show [u]underlined[/u] text.[/code]|Show [u]underlined[/u] text.
Strike|s|[code]Show [s]striked[/s] text.[/code]|Show [s]striked[/s] text.
Teletype|tt|[code]Show [tt]teletype[/tt] text.[/code]|Show [tt]teletype[/tt] text.
Small|small|[code]Show [small]small[/small] text.[/code]|Show [small]small[/small] text.
Big|big|[code]Show [big]big[/big] text.[/code]|Show [big]big[/big] text.
Subscript|sub|[code]Show [sub]subscript[/sub] text.[/code]|Show [sub]subscript[/sub] text.
Superscript|sup|[code]Show [sup]superscript[/sup] text.[/code]|Show [sup]superscript[/sup] text.
Quote|q|[code]Show [q]quoted[/q] text.[/code]|Show [q]quoted[/q] text.
Keyboard|kbd|[code]Show [kbd]keyboard[/kbd] text.[/code]|Show [kbd]keyboard[/kbd] text. (*)
[/table]
(*) This Keyboard text style is not HTML standard, but defined by the conversion program.
===Text color/size/font===
Because technical reasons, the tag used to change the color of the text is also used to change the size and font; this point means that you must always give a color with this tag even if you want to change the size or font only (use "0" for black).
====Text colors====
To change the color, enclose the text between [code][color="colorValue"][/code] and [code][/color][/code] tags. For example: [code]"This show [color="red"]red text[/color] in a line"[/code] display: "This show [color="red"]red text[/color] in a line".
A [i]color value[/i] may be specified via six hexadecimal digits preceded by # character this way: [code][color="#FF0000"][/code]; each couple of digits corresponds to a red, green or blue value between 0 and 255 that can be described this way: rgb(255,0,0). For simplicity, there are 16 standard [i]color names[/i] that corresponds to the 0-F DOS text colors available in the command-line window (see: COLOR /?).
[table border="1" rules="cols" cellpadding="3" align="center"; ; ;align="center"| | | |align="center"|bgcolor="black"]Standard HTML color names equivalent to DOS text colors
|DOS|Name|Hexa|RGB|DOS|Name|Hexa|RGB
0|[color="Black"]Black[/color]|#000000|rgb(0,0,0)|8|[color="Gray"]Gray[/color]|#808080|rgb(128,128,128)
1|[color="Navy"]Navy[/color]|#000080|rgb(0,0,128)|9|[color="Blue"]Blue[/color]|#0000FF|rgb(0,0,255)
2|[color="Green"]Green[/color]|#008000|rgb(0,128,0)|A|[color="Lime"]Lime[/color]|#00FF00|rgb(0,255,0)
3|[color="Teal"]Teal[/color]|#008080|rgb(0,128,128)|B|[color="Aqua"]Aqua[/color]|#00FFFF|rgb(0,255,255)
4|[color="Maroon"]Maroon[/color]|#800000|rgb(128,0,0)|C|[color="Red"]Red[/color]|#FF0000|rgb(255,0,0)
5|[color="Purple"]Purple[/color]|#800080|rgb(128,0,128)|D|[color="Fuchsia"]Fuchsia[/color]|#FF00FF|rgb(255,0,255)
6|[color="Olive"]Olive[/color]|#808000|rgb(128,128,0)|E|[color="Yellow"]Yellow[/color]|#FFFF00|rgb(255,255,0)
7|[color="Silver"]Silver[/color]|#C0C0C0|rgb(192,192,192)|F|[color="White"]White[/color]|#FFFFFF|rgb(255,255,255)
[/table]
The available number of different colors for a web page is 256*256*256, that is, over 16 million! In order to make the selection of colors for a given page easier, you may stay with the 16 standard DOS colors if they are enough for your needs; otherwise, I suggest you to choose from the [url=new:http://www.quackit.com/html/codes/color/web_safe_color_palette.cfm]6x6x6 Cube[/url] set of 216 colors that I have arranged in a novel layout in my [url=popup:Aacini's Colors Tree.html]Colors Tree[/url] chart.
For further explanations about HTML colors, see Dave Raggett's [url=new:http://www.w3.org/MarkUp/Guide/Style.html]Adding a touch of style[/url].
====Text sizes====
To change the size, insert [code]size="sizeValue"[/code] after the color value; the size may be a number from 1 to 9 (or more), or a number with sign that specify a size relative to current one. For example: [code]"This is [color="0" size="5"]size 5 text[/color], and this a [color="0" size="-1"][/code][br][code]slightly smaller one[/color]"[/code] display: "This is [color="0" size="5"]size 5 text[/color], and this a [color="0" size="-1"]slightly smaller one[/color]".
====Text fonts====
To change the font, insert [code]face="font list"[/code] after the color value; the font must be given as a list of font names given in preference order because not all fonts are installed in every computer. For example: [code]"This is [color="0" face="Courier New, monospace"]Courier New[/color] font, and this [/code][br][code][color="0" face="Times New Roman, sans-serif"]Times New Roman[/color] one"[/code] display: "This is [color="0" face="Courier New, monospace"]Courier New[/color] font, and this [color="0" face="Times New Roman, sans-serif"]Times New Roman[/color] one". You should insert in last place a name that represent an always installed font family in all systems: serif, sans-serif, cursive, fantasy, or monospace.
===Combining attributes===
The three previous attributes can be set in the same tag. For example: [code]"This is [color="blue" size="+2" face="Times New Roman, sans-serif"][/code][br][code]a larger blue Times New Roman[/color] text"[/code] display: "This is [color="blue" size="+2" face="Times New Roman, sans-serif"]a larger blue Times New Roman[/color] text".
A combination of several [i]coherent[/i] styles and one color/size/font may be applied to the same text, and this text may appear at any place in the document. For example: [code]"This show [big][b][i][color="red"]big bold italic red[/color][/i][/b][/big] text"[/code] display: "This show [big][b][i][color="red"]big bold italic red[/color][/i][/b][/big] text".
You must always properly close all nested tags as shown in previous example, that is, closing first the last open tag, but you may also use partial attributes from open tags. For example: [code]"Normal [big]-Big [b]--Big Bold [i]---Big Bold italic---[/i] biG bolD--[/b] biG-[/big] normaL"[/code] display: "Normal [big]-Big [b]--Big Bold [i]---Big Bold italic---[/i] biG bolD--[/b] biG-[/big] normaL".
===CSS properties===
The [code][style][/code] tag provides another way to change the appearance of the text in a line via [url=new:http://www.quackit.com/css/properties/]Cascade Style Sheets[/url] (CSS) [i]properties[/i] that requires a different format. This tag is writen this way: [code][style="property1:value1; property2:value2; ..."]formatted text[/style][/code]; for example, the "Top" link placed at right side of the page when a level-2 division ends is defined this way: [code][style="float:right; font-size:small;"]Top[/style][/code].
This method is more powerful than the combination of text style/color/size/font described above, but you should start writing web pages with the former method and use [code]style[/code] tag until the capabilities of the other tags are not enough for your needs (and you have more experience on this topic). A further explanation of CSS properties will be given [url=#Some_CSS_properties_that_may_be_used_as_modifiers_in_CODE_segment_and_STYLE_tags]later[/url].
==Hypertext links==|Define links to show images, open web sites and more
These tags allows you to insert links to images or web sites, and combine them.
===Image link===|Show an image or a changing image
To show an image, use this tag: [code][img]imagefile.ext[/img][code]. For example: [code][img]mueller_hut.jpg[/img][/code] produce: [img]mueller_hut.jpg[/img]
If the image file is located on another folder, you need to insert its path relative to the folder where the HTML file is placed, or via an absolute path. If the image file is located on another Web site, insert the complete Web address (Uniform Resource Locator, or "URL"). For example: [code][img]http://www.w3.org/Icons/w3c_home.gif[/img][/code] produce: [img]http://www.w3.org/Icons/w3c_home.gif[/img]
If you include a second image file separated by a vertical bar, it will be displayed when the cursor moved over the image. For example: [code][img]w3c_home.gif|w3c_home0.gif[/img][/code] produce: [img]w3c_home.gif|w3c_home0.gif[/img]
If you include more image files, each additional image will be displayed in order each time the cursor moved over the image; if a "R" letter is inserted after the last image file separated by colon, the additional images will be displayed in random order. For example: [code][img]w3c_home.gif|w3c_homeLT.gif|w3c_homeLB.gif|w3c_homeRL.gif:R[/img][/code] produce: [img]w3c_home.gif|w3c_homeLT.gif|w3c_homeLB.gif|w3c_homeRL.gif:R[/img]
If you insert a delay in milliseconds in place of the R letter, the images will change automatically in the given time (animation). For example: [code][img]w3c_homeLT.gif|w3c_homeRT.gif|w3c_homeRB.gif|w3c_homeLB.gif:300[/img][/code] produce: [img]w3c_homeLT.gif|w3c_homeRT.gif|w3c_homeRB.gif|w3c_homeLB.gif:300[/img]; if you want to also include the R letter, place it before the delay.
If a "M" letter is inserted after the delay, the animation is active only when the cursor moved over the image. For example: [code][img]w3c_homeLT.gif|w3c_homeRT.gif|w3c_homeRB.gif|w3c_homeLB.gif:R200M[/img][/code] produce: [img]w3c_homeLT.gif|w3c_homeRT.gif|w3c_homeRB.gif|w3c_homeLB.gif:R200M[/img]
The delay may also be written as a range of milliseconds separated by dash this way: [code]start-end[/code], in this case a new random delay in this range will be used to show each image; an example is given below. If you want to also include the M letter, place it before the dash this way: [code]RstartM-end[/code].[hr]
You may insert additional values in the [code][img][/code] tag that modify the presentation of the image ("modifiers"). The [code]align[/code] modifier change the place where the image is displayed to left or right margins in the page; the value of the modifier must be enclosed in quotes. For example: [code][img align="left"]mueller_hut.jpg[/img][/code] is displayed this way: [img align="left"]mueller_hut.jpg[/img]Note that the text following the image takes up the space left by the alignment, so you need to delimit the point that is fitted this way if you wish; this is done inserting a [code][br clear="all"][/code] tag at the right place. In this text, the breaking tag is included just here:[br clear="all"]
If you insert several adjacent images with the same "align" value, they will accomodate at same side in the order they were defined. The [code]width[/code] and [code]height[/code] modifiers allows to change the size of the displayed image (in pixels). For example: [code][img align="right"]mueller_hut.jpg[/img][img align="right" width="220" height="146"]mueller_hut.jpg[/img][/code][br][code][img align="right" width="110" height="73"]mueller_hut.jpg[/img][/code] is displayed this way:
[img align="right"]mueller_hut.jpg[/img][img align="right" width="220" height="146"]mueller_hut.jpg[/img][img align="right" width="110" height="73"]mueller_hut.jpg[/img]If an image with the [code]align[/code] modifier is placed before a paragraph, the whole text of the paragraph will be displayed at side of the image as long as there are enough space for it. Note that this arrangement works the same way no matter if the image is aligned at left or right side (like in [i]this[/i] example); the key for this to work is that the image be defined first. If the text is defined first, it will be mixed up with the image as in the previous example.[br clear="all"]
Other modifiers for img tag are [code]border="#pixels"[/code] that allows to enclose the image in a box, [code]hspace="#pixels"[/code] that insert a separation margin at both sides of the image, and [code]vspace="#pixels"[/code] that insert the margin above and below the image.
The next example show 9 adjacent images with [code]align="left"[/code] modifier each, so all of them appear in the same line. All images are animated ones; you must note that this effect is achieved preparing in advance all the intermediate images ([i]frames[/i]) that comprise each animation. For example, the banner at center consists of 18 individual images, one of which is displayed three times (20 frames total). The last part show the 18 image files of the banner in random order.
[code]
[img align="left"]w3c_homeLT.gif|w3c_homeRT.gif|w3c_homeRB.gif|w3c_homeLB.gif:200-500[/img]
[img align="left"]w3c_home.gif|w3c_homeRL.gif:2000-5000[/img]
[img align="left"]w3c_homeLT.gif|w3c_homeLB.gif:50-500[/img]
[img align="left"]A01.gif|A01.gif|A01.gif|A02.gif|A03.gif|A04.gif|A05.gif|A06.gif|A07.gif|A08.gif|A09.gif|A10.gif|A11.gif|A12.gif|A13.gif|A14.gif|A15.gif|A16.gif|A17.gif|A18.gif:200[/img]
[img align="left"]w3c_homeRT.gif|w3c_homeRB.gif:200-500[/img]
[img align="left"]w3c_home.gif|w3c_homeC.gif|w3c_home9.gif|w3c_home6.gif|w3c_home3.gif|w3c_home6.gif|w3c_home9.gif|w3c_homeC.gif:100[/img]
[img align="left"]w3c_homeLT.gif|w3c_homeLB.gif|w3c_homeRB.gif|w3c_homeRT.gif:300-700[/img]
[img align="left"]w3c_home.gif|w3c_homeRL.gif:2000-5000[/img]
[img align="left"]A01.gif|A02.gif|A03.gif|A04.gif|A05.gif|A06.gif|A07.gif|A08.gif|A09.gif|A10.gif|A11.gif|A12.gif|A13.gif|A14.gif|A15.gif|A16.gif|A17.gif|A18.gif:R1000[/img]
[/code]
[img align="left"]w3c_homeLT.gif|w3c_homeRT.gif|w3c_homeRB.gif|w3c_homeLB.gif:200-500[/img]
[img align="left"]w3c_home.gif|w3c_homeRL.gif:2000-5000[/img]
[img align="left"]w3c_homeLT.gif|w3c_homeLB.gif:50-500[/img]
[img align="left"]A01.gif|A01.gif|A01.gif|A02.gif|A03.gif|A04.gif|A05.gif|A06.gif|A07.gif|A08.gif|A09.gif|A10.gif|A11.gif|A12.gif|A13.gif|A14.gif|A15.gif|A16.gif|A17.gif|A18.gif:200[/img]
[img align="left"]w3c_homeRT.gif|w3c_homeRB.gif:200-500[/img]
[img align="left"]w3c_home.gif|w3c_homeC.gif|w3c_home9.gif|w3c_home6.gif|w3c_home3.gif|w3c_home6.gif|w3c_home9.gif|w3c_homeC.gif:100[/img]
[img align="left"]w3c_homeLT.gif|w3c_homeLB.gif|w3c_homeRB.gif|w3c_homeRT.gif:300-700[/img]
[img align="left"]w3c_home.gif|w3c_homeRL.gif:2000-5000[/img]
[img align="left"]A01.gif|A02.gif|A03.gif|A04.gif|A05.gif|A06.gif|A07.gif|A08.gif|A09.gif|A10.gif|A11.gif|A12.gif|A13.gif|A14.gif|A15.gif|A16.gif|A17.gif|A18.gif:R1000[/img]
[br clear="all"]
===Web site link===|Open a site
To insert a link to a web site, use this tag: [code][url=http://web/address]Description[/url][code]. For example: [code][url=http://www.w3.org/MarkUp/Guide/]Getting started with HTML[/url][/code] produce: [url=http://www.w3.org/MarkUp/Guide/]Getting started with HTML[/url]. An optional Title may be included after the Description separated by a vertical bar this way: [code]Description|Title[/code]; this title will momentarily appear when the cursor moved over the link.
The web address may indicate an audio file with .MP3 extension (or other audio formats) or a playlist file with .M3U extension. The details about how these files are played depends on specific installation at the target computer; the same behavior is used for video files. The method to reproduce an audio or video file in a standard way depends on techniques that are not included in this conversion program.
If you insert [code]plain:[/code] or [code]button:[/code] words before the Description, it is displayed as plain text or as a button instead of underlined text, respectively; an example is shown below. You may also insert [code]new:[/code] or [code]popup:[/code] words before the web address, so the web site will be opened in a new or popup window, respectively; the latter may require script permissions, as described below.
Additionally, you may place a message enclosed in quotes instead of the web address that will be displayed when the link be selected; the message may include [/code]\n[/code] characters to separate lines. For example: [code][url="This feature may require\nscript permissions\nin some computers"][/code][br][code]button:Additional instructions|Click me and allow blocked content[/url][/code] produce: [url="This feature may require\nscript permissions\nin some computers"]button:Additional instructions|Click me and allow blocked content[/url]. Placing a message instead of a web address is useful when several url's are included in an image or dropdown menu, as explained later.
If you include both the message and the web address separated by a question mark, the message is used as a question to confirm that the site must be opened; in this case the message should include a brief site description. For example: [code][url="Aacini's Colors Tree\nshow the 216 colors of\n6x6x6 Cube in a novel layout.\n\n[/code][br][code]Open the Tree?"?popup:Aacini's Colors Tree.html]Ask question and open site[/url][/code] produce: [url="Aacini's Colors Tree\nshow the 216 colors of\n6x6x6 Cube in a novel layout.\n\nOpen the Tree?"?popup:Aacini's Colors Tree.html]Ask question and open site[/url].
[table align="center" border="1" rules="all" cellpadding="3"]Summary of URL tag parts
[colspan="3"][url=[i]"Text"[/i]?[i]target:[/i]Url][i]option:[/i]Description[i]|Title[/i][/url]
[b]Part[/b]|[b]Example[/b]|[b]Explanation[/b]
[url=|[url=|Start the tag and Url part
[rowspan="2"][i]"Text"[/i]|"Message"|Show the message when the link is selected
"Question"?|Show the question; if accepted, open the Url
[rowspan="2"][i]target:[/i]|new:|Open the Url in a new window
popup:|Open the Url in a popup window
Url|http://tiny.cc/A|Specify the URL to open
]|]|End the Url part
[rowspan="2"][i]option:[/i]|plain:|Show the link as plain text instead of underlined
button:|Show the link as button instead of underlined text
Description|Interesting site!|Specify the Description in the link or button
[i]|Title[/i]||Click me|Show the Title when cursor moved over the link
[/url]|[/url]|End the tag
[/table]
Several url tags may be nested inside an img or select tag, as will be explained later; in this case the Url part may be omitted and [code]plain:[/code] and [code]button:[/code] options can not be used.
Because limitations in the conversion program, you can not include a right bracket in the "Text" part nor a vertical bar in the Description (nor quotes in any element delimited by quotes), but you may use [url=popup:http://www.quackit.com/html/html_special_characters.cfm]HTML character references[/url] to show any character given its Ascii code; for example, use [code]][/code] for right bracket and [code]|[/code] for vertical bar (and [code]"[/code] for quotes).
[name="Examples_of_URL_tag_parts"]Below[/name] there is an example of each combination of the different url tag parts.
[list=H]
[*]Show text:
[list=H]
[*]normal link:
[url="Show text"]url="Show text"[/url], with Title: [url="Show text"]url="Show text"|Title of "Show text"[/url]
[*]plain link:
[url="Show text"]plain:url="Show text"[/url], with Title: [url="Show text"]plain:url="Show text"|Title of "Show text" plain[/url]
[*]button:
[url="Show text"]button:url="Show text" button[/url], with Title: [url="Show text"]button:url="Show text" button|Title of "Show text" button[/url]
[/list]
[*]Open site:
[list=H]
[*]normal link:
in same window: [url=Aacini's Colors Tree.html]url=link[/url], in new window: [url=new:Aacini's Colors Tree.html]url=new:link[/url], in popup window: [url=popup:Aacini's Colors Tree.html]url=popup:link[/url].
[*]plain link:
in same window: [url=Aacini's Colors Tree.html]plain:url=link[/url], in new window: [url=new:Aacini's Colors Tree.html]plain:url=new:link[/url], in popup window: [url=popup:Aacini's Colors Tree.html]plain:url=popup:link[/url].
[*]button:
in same window: [url=Aacini's Colors Tree.html]button:url=link button[/url], in new window: [url=new:Aacini's Colors Tree.html]button:url=new:link button[/url], in popup window: [url=popup:Aacini's Colors Tree.html]button:url=popup:link button[/url].
[*]normal link, with Title:
in same window: [url=Aacini's Colors Tree.html]url=link|Title of link[/url], in new window: [url=new:Aacini's Colors Tree.html]url=new:link|Title of new:link[/url], in popup window: [url=popup:Aacini's Colors Tree.html]url=popup:link|Title of popup:link[/url].
[*]plain link, with Title:
in same window: [url=Aacini's Colors Tree.html]plain:url=link|Title of link plain[/url], in new window: [url=new:Aacini's Colors Tree.html]plain:url=new:link|Title of new:link plain[/url], in popup window: [url=popup:Aacini's Colors Tree.html]plain:url=popup:link|Title of popup:link plain[/url].
[*]button, with Title:
in same window: [url=Aacini's Colors Tree.html]button:url=link button|Title of link button[/url], in new window: [url=new:Aacini's Colors Tree.html]button:url=new:link button|Title of new:link button[/url], in popup window: [url=popup:Aacini's Colors Tree.html]button:url=popup:link button|Title of popup:link button[/url].
[/list]
[*]Ask question and open site:
[list=H]
[*]normal link:
in same window: [url="Question"?Aacini's Colors Tree.html]url="Question"?link[/url], in new window: [url="Question"?new:Aacini's Colors Tree.html]url="Question"?new:link[/url], in popup window: [url="Question"?popup:Aacini's Colors Tree.html]url="Question"?popup:link[/url].
[*]plain link:
in same window: [url="Question"?Aacini's Colors Tree.html]plain:url="Question"?link[/url], in new window: [url="Question"?new:Aacini's Colors Tree.html]plain:url="Question"?new:link[/url], in popup window: [url="Question"?popup:Aacini's Colors Tree.html]plain:url="Question"?popup:link[/url].
[*]button:
in same window: [url="Question"?Aacini's Colors Tree.html]button:url="Question"?link button[/url], in new window: [url="Question"?new:Aacini's Colors Tree.html]button:url="Question"?new:link button[/url], in popup window: [url="Question"?popup:Aacini's Colors Tree.html]button:url="Question"?popup:link button[/url].
[*]normal link, with Title:
in same window: [url="Question"?Aacini's Colors Tree.html]url="Question"?link|Title of "Question"?link[/url], in new window: [url="Question"?new:Aacini's Colors Tree.html]url="Question"?new:link|Title of "Question"?new:link[/url], in popup window: [url="Question"?popup:Aacini's Colors Tree.html]url="Question"?popup:link|Title of "Question"?popup:link[/url].
[*]plain link, with Title:
in same window: [url="Question"?Aacini's Colors Tree.html]plain:url="Question"?link|Title of "Question"?link plain[/url], in new window: [url="Question"?new:Aacini's Colors Tree.html]plain:url="Question"?new:link|Title of "Question"?new:link plain[/url], in popup window: [url="Question"?popup:Aacini's Colors Tree.html]plain:url="Question"?popup:link|Title of "Question"?popup:link plain[/url].
[*]button, with Title:
in same window: [url="Question"?Aacini's Colors Tree.html]button:url="Question"?link button|Title of "Question"?link button[/url], in new window: [url="Question"?new:Aacini's Colors Tree.html]button:url="Question"?new:link button|Title of "Question"?new:link button[/url], in popup window: [url="Question"?popup:Aacini's Colors Tree.html]button:url="Question"?popup:link button|Title of "Question"?popup:link button[/url].
[/list]
[/list]
===Links into sections of web pages===|Open a site at a given part
A point inside a web page may be set as a target for a url link. For example, all subdivision headers in this document are set as internal targets, so the links in the Table of Contents can reach they. To indicate that the target is a point inside a page, precede its name with # character in the url tag. It is customary to change spaces by underscores in the internal target names; for example, to set a link to the chapter header of this section, use: [code][url=#Hypertext_links]Hypertext links[/url][/code] that produce: [url=#Hypertext_links]Hypertext links[/url]. A # character alone serve as link to the top of the document.
In this document there is [code]#Table_of_Contents[/code] name also defined as internal target, and the [i]descriptions[/i] of the [url=#Multi-line_sections]Multi-line sections[/url] (described below) are also defined this way; this feature allows you to insert URL links to the lists, tables and code segments that you define in a document. You may also define a target name at any place you wish [name="Target_name"]this way[/name]: [code][name="Target_name"]example text[/name][/code]; for example, this url tag: [code][url=#Target_name]example text[/url][/code] define this link to: [url=#Target_name]example text[/url].
To insert a link into a section of another web page, place the URL of the page, a # character and the name of the section with underscores instead of spaces. For example: [code][url=http://en.wikipedia.org/wiki/Hyperlink#How_hyperlinks_work_in_HTML][/code][br][code]How hyperlinks work in HTML[/url][/code] produce: [url=http://en.wikipedia.org/wiki/Hyperlink#How_hyperlinks_work_in_HTML]How hyperlinks work in HTML[/url]
===Image link in web site link===|Open a site via an image or changing image
An image tag may be placed inside a web link tag in place of the Description. This way, the image is used as link to the web site instead of the text; in this case the Title should always be included (and "plain:/button:" options can not be included). For example: [code][url=http://www.w3.org/MarkUp/Guide/][img]http://www.w3.org/Icons/w3c_home.gif[/img][/code][br][code]|Getting started with HTML[/url][/code][br]produce: [url=http://www.w3.org/MarkUp/Guide/][img]http://www.w3.org/Icons/w3c_home.gif[/img]|Getting started with HTML[/url]
If several image files are included in the image tag, they will be displayed as previously explained: when the cursor moved over the image or in an animation.
===Web site links in image link===|Open different sites via parts of an image
An image may be divided in parts and each part may be used as a link to a different web site; to do that, just place the desired web link tags inside the image tag after the file name. In this case the Description in the nested url tags is used to specify the shape of each image part.
[table border="1" rules="all" cellpadding="5" align="center"]Image parts in Description of nested URL tags
|Shape|Format|Example
Circle|circle=x-center,y-center,radius|circle=100,80,50
Rectangle|rect=x-left,y-top,x-right,y-bottom|rect=20,10,80,30
Polygon|poly=x1,y1,x2,y2,...|poly=0,0,50,0,25,44,0,0
[/table]
The coordinates are given in pixels; they start at left-top corner of the image with value 0,0 (in x,y order) and advance rightwards and downwards. If an image have links to several sites, it is convenient to include [code]border="0"[/code] modifier in order to hide the blue frame around it. For example:
[code]
[img border="0" align="right" hspace="8"]mueller_hut.jpg
[url="Me"]rect=132,125,176,221|Me[/url]
[url=popup:http://www.naturalenvironment.com/places/mueller_hut.php]
poly=212,117,213,146,315,132,315,117,264,88,213,117|Mueller Hut[/url]
[url="Mount Cook is the highest mountain in New Zealand.\n\nOpen its Wikipedia site?"?
new:http://en.wikipedia.org/wiki/Mount_Cook]
poly=80,80,176,117,132,117,132,146,102,146,30,117,80,80|Mount Cook[/url]
[/img]
[/code]
[img border="0" align="right" hspace="8"]mueller_hut.jpg[url="Me"]rect=132,125,176,221|Me[/url][url=popup:http://www.naturalenvironment.com/places/mueller_hut.php]poly=212,117,213,146,315,132,315,117,264,88,213,117|Mueller Hut[/url][url="Mount Cook is the highest mountain in New Zealand.\n\nOpen its Wikipedia site?"?new:http://en.wikipedia.org/wiki/Mount_Cook]poly=80,80,176,117,132,117,132,146,102,146,30,117,80,80|Mount Cook[/url][/img]
The image defined with the text above is displayed at right side:

If an image part have no web address then there is no target link for it, just the Title will be displayed when the cursor moved over that area; this feature may be used to label parts of an image (like people in a photography) or to create complex link zones as described below.[br clear="all"]
[code]
[img border="0" align="left"]Tetris layout.gif
[url="Yellow"]poly=7,56,46,56,46,102,92,102,92,142,46,142,46,189,7,189,7,56|Yellow[/url]
[url]rect=51,56,230,96|Fuchsia[/url]
[url="Aqua"]poly=235,56,274,56,274,142,143,142,143,102,235,102,235,56|Aqua[/url]
[url]poly=97,102,139,102,139,189,92,189,92,234,51,234,51,148,97,148,97,102|Gray[/url]
[url]poly=143,148,230,148,230,189,184,189,184,234,97,234,97,196,143,196,143,148|Lime[/url]
[url="Red"]poly=7,196,46,196,46,241,139,241,139,281,7,281,7,196|Red[/url]
[url="Blue"]rect=188,196,274,281|Blue[/url]
[/img]
[/code]
[img border="0" align="left"]Tetris layout.gif[url="Yellow"]poly=7,56,46,56,46,102,92,102,92,142,46,142,46,189,7,189,7,56|Yellow[/url][url]rect=51,56,230,96|Fuchsia[/url][url="Aqua"]poly=235,56,274,56,274,142,143,142,143,102,235,102,235,56|Aqua[/url][url]poly=97,102,139,102,139,189,92,189,92,234,51,234,51,148,97,148,97,102|Gray[/url][url]poly=143,148,230,148,230,189,184,189,184,234,97,234,97,196,143,196,143,148|Lime[/url][url="Red"]poly=7,196,46,196,46,241,139,241,139,281,7,281,7,196|Red[/url][url="Blue"]rect=188,196,274,281|Blue[/url][/img]
The example at left, created with the text above, is an image that have three areas at center with no web addresses, and four areas in the corners that just show messages.

If two or more areas of an image overlaps, the first ones takes priority; several areas may be combined this way in order to create complex link zones. For example, to define the concentric circular and ring-shapped zones for a bow and arrow target, just define the center first and continue with circles every time larger. Each new link zone will be comprised of the parts of the new area that exceed the previous ones. You may also use just one url tag in order to define a link zone with a shape different than the usual rectangle around the image.[br clear="all"]
[code]
[img border="0" align="left"]Tetris layout.gif
[url="Yellow"]poly=7,56,46,56,46,102,92,102,92,142,46,142,46,189,7,189,7,56|img:Tetris Yellow.gif[/url]
[url]rect=51,56,230,96|img:Tetris Fuchsia.gif[/url]
[url="Aqua"]poly=235,56,274,56,274,142,143,142,143,102,235,102,235,56|img:Tetris Aqua.gif[/url]
[url]poly=97,102,139,102,139,189,92,189,92,234,51,234,51,148,97,148,97,102|img:Tetris Gray.gif[/url]
[url]poly=143,148,230,148,230,189,184,189,184,234,97,234,97,196,143,196,143,148|img:Tetris Lime.gif[/url]
[url="Red"]poly=7,196,46,196,46,241,139,241,139,281,7,281,7,196|img:Tetris Red.gif[/url]
[url="Blue"]rect=188,196,274,281|img:Tetris Blue.gif[/url]
[/img]
[/code]
[img border="0" align="left"]Tetris layout.gif[url="Yellow"]poly=7,56,46,56,46,102,92,102,92,142,46,142,46,189,7,189,7,56|img:Tetris Yellow.gif[/url][url]rect=51,56,230,96|img:Tetris Fuchsia.gif[/url][url="Aqua"]poly=235,56,274,56,274,142,143,142,143,102,235,102,235,56|img:Tetris Aqua.gif[/url][url]poly=97,102,139,102,139,189,92,189,92,234,51,234,51,148,97,148,97,102|img:Tetris Gray.gif[/url][url]poly=143,148,230,148,230,189,184,189,184,234,97,234,97,196,143,196,143,148|img:Tetris Lime.gif[/url][url="Red"]poly=7,196,46,196,46,241,139,241,139,281,7,281,7,196|img:Tetris Red.gif[/url][url="Blue"]rect=188,196,274,281|img:Tetris Blue.gif[/url][/img]
You may also insert [code]img:[/code] word before the Title, so it specify an image that will be displayed in place of the original when the cursor moved over that part. For example, the text above use several images with enlarged parts for each one of the original image areas; the result appear at left.[br clear="all"]
===Web site links in multi-file image link===|Open different sites via (parts of) changing images
If several image files are given in the nesting [code]img[/code] tag then the corresponding [code]url[/code] link will be opened when the cursor select its image, so image files and url tags are matched one-to-one. In this case no Description must be given in the nested url tags. For example:
[code width:80%; float:right;]
[img]w3c_home.gif|w3c_homeLT.gif|w3c_homeLB.gif|w3c_homeRL.gif:2000
[url="Center selected"][/url]
[url="Top selected"][/url]
[url="Bottom selected"][/url]
[url="Rotated selected"][/url]
[/img]
[/code]

[img]w3c_home.gif|w3c_homeLT.gif|w3c_homeLB.gif|w3c_homeRL.gif:2000[url="Center selected"][/url][url="Top selected"][/url][url="Bottom selected"][/url][url="Rotated selected"][/url][/img][br clear="all"]
The images may change in any of the ways previously described in img tag, like as cursor moved over, animation, in random order, etc; a summary of these methods appear in the [url=#Summary_of_hypertext_links]summary of hypertext links[/url] at end of this chapter. The next example change the target url each time the cursor moved over the image; note that in this case the first image can not be selected, so the first url may be empty.
[code width:80%; float:right;]
[img]w3c_home.gif|w3c_homeLT.gif|w3c_homeLB.gif|w3c_homeRL.gif
[url][/url]
[url="Top selected"][/url]
[url="Bottom selected"][/url]
[url="Rotated selected"][/url]
[/img]
[/code]

[img]w3c_home.gif|w3c_homeLT.gif|w3c_homeLB.gif|w3c_homeRL.gif[url="Center selected"][/url][url="Top selected"][/url][url="Bottom selected"][/url][url="Rotated selected"][/url][/img][br clear="all"]
If the nested url tags include Descriptions with image parts, then the corresponding link will be opened only if the cursor select that area precisely in the matching image; in this case the animation is mandatory. You may append additional url tags with [code]play:[/code], [code]fast:[/code] or [code]slow:[/code] options before the Description in order to define areas to start/stop, speed up or speed down the animation, respectively, but in this case the delay must be given in [code]start-end+step[/code] format in order to specify the "step" amount of variation for "fast:" and "slow:" areas; an example is shown below.
The animation may be achieved alternating one base image with a base delay and the other images with a different delay; to do that, insert the base delay at end of the first image file. In this case the base image can not have a matching url, so the first url match the second image file and so on. If the base delay also have the [code]start-end+step[/code] format, the "fast:" and "slow:" areas will change both delay values.
[code]
[img border="0" align="left"]
Tetris layout.gif:1000-1500|Tetris Yellow.gif|Tetris Fuchsia.gif|Tetris Aqua.gif|
Tetris Gray.gif|Tetris Lime.gif|Tetris Red.gif|Tetris Blue.gif:R500-2000+100
[url="Yellow trapped"]poly=7,56,46,56,46,102,92,102,92,142,46,142,46,189,7,189,7,56[/url]
[url="Fuchsia trapped"]rect=51,56,230,96[/url]
[url="Aqua trapped"]poly=235,56,274,56,274,142,143,142,143,102,235,102,235,56[/url]
[url="Gray trapped"]poly=97,102,139,102,139,189,92,189,92,234,51,234,51,148,97,148,97,102[/url]
[url="Lime trapped"]poly=143,148,230,148,230,189,184,189,184,234,97,234,97,196,143,196,143,148[/url]
[url="Red trapped"]poly=7,196,46,196,46,241,139,241,139,281,7,281,7,196[/url]
[url="Blue trapped"]rect=188,196,274,281[/url]
[url]play:rect=143,241,184,281[/url]
[url]fast:rect=235,148,274,189[/url]
[/img]
[/code]
[img border="0" align="left"]Tetris layout.gif:1000-1500|Tetris Yellow.gif|Tetris Fuchsia.gif|Tetris Aqua.gif|Tetris Gray.gif|Tetris Lime.gif|Tetris Red.gif|Tetris Blue.gif:R500-2000+100[url="Yellow trapped"]poly=7,56,46,56,46,102,92,102,92,142,46,142,46,189,7,189,7,56[/url][url="Fuchsia trapped"]rect=51,56,230,96[/url][url="Aqua trapped"]poly=235,56,274,56,274,142,143,142,143,102,235,102,235,56[/url][url="Gray trapped"]poly=97,102,139,102,139,189,92,189,92,234,51,234,51,148,97,148,97,102[/url][url="Lime trapped"]poly=143,148,230,148,230,189,184,189,184,234,97,234,97,196,143,196,143,148[/url][url="Red trapped"]poly=7,196,46,196,46,241,139,241,139,281,7,281,7,196[/url][url="Blue trapped"]rect=188,196,274,281[/url][url]play:rect=143,241,184,281[/url][url]fast:rect=235,148,274,189[/url][/img]
The example at left, created with the text above, should be an animated game with a meerkat that suddenly show up from one of several holes in the land, so you must quickly trap it with a mouse click. However, I decided to reuse some existent files instead of create new ones in order to not make bigger the already huge data, so I replaced the meerkat by the increased color areas of Tetris layout of previous example; note that the zones to "trap" the colors are not the enlarged areas, but the original ones.
In this case the "start/stop" control is placed at the bottom white square and the "faster" control at the other square, so to start the game just click on the bottom square. Of course, this game would be funnier with smaller targets![br clear="all"]
===Web site links in selection menu===|Open different sites via a dropdown menu
The [code][select][/code] tag is similar to a single-file [code][img][/code] one with several nested url tags, but in this case the selection of the desired site is done via a dropdown menu instead of parts of an image. It is convenient that the first menu option contain just an informative message. For example:
[code]
Select the desired Raggett's lesson on HTML:
[select]
[url]Pick one...[/url]
[url=http://www.w3.org/MarkUp/Guide/]1. Getting started with HTML[/url]
[url=http://www.w3.org/MarkUp/Guide/Advanced.html]2. Advanced HTML[/url]
[url=http://www.w3.org/MarkUp/Guide/Style.html]3. Adding a touch of style[/url]
[/select]
[/code]
Select the desired Raggett's lesson on HTML: [select][url]Pick one...[/url][url=http://www.w3.org/MarkUp/Guide/]1. Getting started with HTML[/url][url=http://www.w3.org/MarkUp/Guide/Advanced.html]2. Advanced HTML[/url][url=http://www.w3.org/MarkUp/Guide/Style.html]3. Adding a touch of style[/url][/select]
If you insert [code]open:#lines:[/code] before the Description in a nested url tag, that menu option will open/close the one-line menu as a multi-line one; this should be done in the second menu option. You may also insert [code]group:[/code] before the Description to specify a division header in the menu. The example below is a dropdown menu that contain several combinations of different url tag parts.
[code]
Select the desired combination of URL tag parts:
[select]
[url]Pick one...[/url]
[url]open:8:Open/Close the menu[/url]
[url]group:Show text[/url]
[url="Show text"]url="Show text"[/url]
[url="Show text, Title"]url="Show text", Title|Title of "Show text"[/url]
[url]group:Open link[/url]
[url=Aacini's Colors Tree.html]In same window: url=link[/url]
[url=new:Aacini's Colors Tree.html]In new window: url=new:link[/url]
[url=popup:Aacini's Colors Tree.html]In popup window: url=popup:link[/url]
[url]group:Open link, Title[/url]
[url=Aacini's Colors Tree.html]In same window: url=link, Title|Title of link[/url]
[url=new:Aacini's Colors Tree.html]In new window: url=new:link, Title|Title of new:link[/url]
[url=popup:Aacini's Colors Tree.html]In popup window: url=popup:link, Title|Title of popup:link[/url]
[url]group:Ask question and open site[/url]
[url="Question"?Aacini's Colors Tree.html]In same window: url="Question"?link[/url]
[url="Question"?new:Aacini's Colors Tree.html]In new window: url="Question"?new:link[/url]
[url="Question"?popup:Aacini's Colors Tree.html]In popup window: url="Question"?popup:link[/url]
[url]group:Ask question and open site, Title[/url]
[url="Question"?Aacini's Colors Tree.html]In same window: url="Question"?link, Title|Title of "Question"?link[/url]
[url="Question"?new:Aacini's Colors Tree.html]In new window: url="Question"?new:link, Title|Title of "Question"?new:link[/url]
[url="Question"?popup:Aacini's Colors Tree.html]In popup window: url="Question"?popup:link, Title|Title of "Question"?popup:link[/url]
[/select]
[/code]
Select the desired combination of URL tag parts: [select][url]Pick one...[/url][url]open:8:Open/Close the menu[/url][url]group:Show text[/url][url="Show text"]url="Show text"[/url][url="Show text, Title"]url="Show text", Title|Title of "Show text"[/url][url]group:Open link[/url][url=Aacini's Colors Tree.html]In same window: url=link[/url][url=new:Aacini's Colors Tree.html]In new window: url=new:link[/url][url=popup:Aacini's Colors Tree.html]In popup window: url=popup:link[/url][url]group:Open link, Title[/url][url=Aacini's Colors Tree.html]In same window: url=link, Title|Title of link[/url][url=new:Aacini's Colors Tree.html]In new window: url=new:link, Title|Title of new:link[/url][url=popup:Aacini's Colors Tree.html]In popup window: url=popup:link, Title|Title of popup:link[/url][url]group:Ask question and open site[/url][url="Question"?Aacini's Colors Tree.html]In same window: url="Question"?link[/url][url="Question"?new:Aacini's Colors Tree.html]In new window: url="Question"?new:link[/url][url="Question"?popup:Aacini's Colors Tree.html]In popup window: url="Question"?popup:link[/url][url]group:Ask question and open site, Title[/url][url="Question"?Aacini's Colors Tree.html]In same window: url="Question"?link, Title|Title of "Question"?link[/url][url="Question"?new:Aacini's Colors Tree.html]In new window: url="Question"?new:link, Title|Title of "Question"?new:link[/url][url="Question"?popup:Aacini's Colors Tree.html]In popup window: url="Question"?popup:link, Title|Title of "Question"?popup:link[/url][/select]
A dropdown menu may provide a very agile way to access large volumes of information. If the options are alphabetically ordered, browsing the menu via keyboard is simple and fast: navigation keys works as expected and letter keys select the first option with such letter. The url's may include a message with a summary of option's information and a question to confirm to open the site with the full information. An example of this scheme is the alphabetical index of [url=Windows-DOS Commands Help.html]Windows-DOS Commands Help.html[/url].
Remember that anyone of the previous tags must be written in one long line that include all its nested tags; previous examples are shown in separated lines just to be clearer to read. The maximum number of options in a dropdown menu is limited by the 8192 characters maximum size of the [i]translated[/i] paragraph. A menu uses about 80 characters plus the options, each of which uses 26 characters as base plus the option data. If each option have 10 characters long Descriptions plus 10 characters long Url's, then a menu may have a maximum of about 175 options.
===Summary of hypertext links===
The following table summarize the behavior of an img tag with nested url's:
[table border="1" rules="all" cellpadding="3"]
|Images|Url's|Result
One|Many (parts)|Divide the image in parts, one for each url.[br]img:Title may specify changing images.
Many|Many (no parts)|Match each image with an url.
Many|Many (parts)|Match each image part with an url.[br]Animation is mandatory.
[/table]
When many image files are included in one img tag, the way to display the images depends on the "delay" value given after the last image file:
[list]
[*]No delay given: images change one by one each time the cursor moved over the image.
[*]Delay is "value": images change at the delay value given in milliseconds.
[*]Delay is "valueM": images change at the delay given only while the cursor moved over the image.
[*]Delay is "start-end": images change at a random delay in the given range.
[*]Delay is "startM-end": images change at the given range only while the cursor moved over the image.
[*]Delay is "start-end+step": images change at a delay value that may be manually changed via "fast:" and "slow:" areas; this mode can only be used in "Many-Many(parts)" combination.
[/list]
If the first character of the delay is "R", the images will appear in random order. The table below list all possible combinations of hypertext tags.
[table border="1" rules="all" cellpadding="3"]
|This combination of tags|Is displayed as|Notes
[img]single file[/img]|Image|[nbsp]
[img]multi|file[/img]|Changing images|1
[url]Description[/url]|Underlined text with link to one site|2
[url][img]single file[/img][/url]|Image with link to one site|[nbsp]
[url][img]multi|file[/img][/url]|Changing images with link to one site|1
[img]single file[multi-url]Description[/urls][/img]|Image with links to several sites|[align="right"]5, 6
[img]multi|file[multi-url][/urls][/img]|Changing images with links to several sites|1, [nbsp] [nbsp] [nbsp] [nbsp] 7
[img]multi|file[multi-url]Description[/urls][/img]|Changing images with links to several sites|1, 3, 5, 7
[select][multi-url]Description[/urls][/select]|Dropdown menu with links to several sites|4
[/table]
[list=1]Notes:
[*][code]Rstart-end+step[/code] delay value controls the way the changing images are displayed.
[*][code]plain:[/code] and [code]button:[/code] show the link as plain text or button instead of underlined text.
[*][code]play:[/code], [code]fast:[/code] and [code]slow:[/code] specify image areas used to control the animation.
[*][code]open:#:[/code] open/close the dropdown menu and [code]group:[/code] specify a division header.
[*]The Description specify a part of the image via 3 standard shapes: circle, rect and poly.
[*]The Title may include [code]img:[/code] option to specify a changing image title.
[*]The number of images and urls must match, excluding the parts listed in Note 3.
[/list]
==Multi-line sections==|Show complex data in advanced sections
These tags group several lines and display them in the same visual element. Multi-line tags must be placed at beginning of the line.
The [i]descriptions[/i] included in these sections are displayed in bold text style and defined as internal target names. If you insert additional text attributes to a [i]description[/i], it can not be used as internal target.
===Lists===
List tag allows you to show lists in a very easy way.
[list]These are the steps needed to create a list:
[*]Start the list with [code][list][/code] tag; optionally include a [i]description[/i] for the list.
[*]Include [i]list items[/i] in the following lines preceded by [code][*][/code] tag.
[*]End the list with [code][/list][/code] tag.
[/list]
For example, previous list is created this way:
[code]
[list]These are the steps needed to create a list:
[*]Start the list with [code][list][/code] tag; optionally include a [i]description[/i] for the list.
[*]Include [i]list items[/i] in the following lines preceded by [code][*][/code] tag.
[*]End the list with [code][/list][/code] tag.
[/list]
[/code]
The basic list is a bulletted ([i]unordered[/i]) one. You may also show a numbered ([i]ordered[/i]) list with [code][list=T][/code] tag, where the [b]T[/b] character indicate the type of numeration this way:
[list=0]
[*][code][list=1][/code] Arabic numerals: 1, 2, 3, ...
[*][code][list=0][/code] Arabic numerals with leading zero (like [i]this[/i] list).
[*][code][list=a][/code] Lower alphabetic characters: a, b, c, ...
[*][code][list=A][/code] Upper alphabetic characters: A, B, C, ...
[*][code][list=i][/code] Lower roman numerals: i, ii, iii, ...
[*][code][list=I][/code] Upper roman numerals: I, II, III, ...
[*][code][list=g][/code] Lower greek characters.
[*][code][list=G][/code] Upper greek characters.
[*][code][list=d][/code] Disc bulletted (like the [i]unordered[/i] list).
[*][code][list=c][/code] Circle bulletted.
[*][code][list=s][/code] Square bulletted.
[*][code][list= ][/code] If the [b]T[/b] is a space, no numeration or bullet is shown.
[*][code][list=H][/code] Header list; special type described below.
[*][code][list=C][/code] Horizontal list at Center.
[*][code][list=L][/code] Horizontal list at Left side.
[*][code][list=R][/code] Horizontal list at Right side.
[*][code][list=B][/code] Horizontal list at Both sides.
[/list]
The [url=#Horizontal_lists]horizontal lists[/url] will be described later. This is an example of a three-level nested list:
[code width:50%; float:right]
[list=I]Roman-alpha-number list
[*]Outer level item
[list=a]
[*]Sub point I.a
[list=1]
[*]Sub-sub point I.a.1
[*]Sub-sub point I.a.2
[/list]
[*]Sub point I.b
[/list]
[*]Another outer level item
[list=a]
[*]Sub point II.a
[*]Sub point II.b
[list=1]
[*]Sub-sub point II.b.1
[*]Sub-sub point II.b.2
[/list]
[/list]
[*]Last outer level item
[/list]
[/code]

[list=I]Roman-alpha-number list
[*]Outer level item
[list=a]
[*]Sub point I.a
[list=1]
[*]Sub-sub point I.a.1
[*]Sub-sub point I.a.2
[/list]
[*]Sub point I.b
[/list]
[*]Another outer level item
[list=a]
[*]Sub point II.a
[*]Sub point II.b
[list=1]
[*]Sub-sub point II.b.1
[*]Sub-sub point II.b.2
[/list]
[/list]
[*]Last outer level item
[/list]
[br clear="all"]
If a list contain links to other web sites or to points inside a web page, then it may serve as a menu, like the [url=#Table_of_Contents]Table of Contents[/url] included at beginning of this document. For example:
[code]
[list= ]These are the examples of lists shown in this document:
[*][url=#Notes:]Notes:[/url]
[*][url=#These_are_the_steps_needed_to_create_a_list:]These are the steps needed to create a list:[/url]
[*][url=#Roman-alpha-number_list]Roman-alpha-number list[/url]
[*][url=#To_show_a_table_of_values:]To show a table of values:[/url]
[/list]
[/code]
[list= ]These are the examples of lists shown in this document:
[*][url=#Notes:]Notes:[/url]
[*][url=#These_are_the_steps_needed_to_create_a_list:]These are the steps needed to create a list:[/url]
[*][url=#Roman-alpha-number_list]Roman-alpha-number list[/url]
[*][url=#To_show_a_table_of_values:]To show a table of values:[/url]
[/list]
The [code][list=H][/code] Header ([i]definition[/i]) list use text headers instead of bullets or numeration to mark each list item; in this case the definition of the item is given in the lines below the header. For example:
[code]
[list=H]Some favorite cities:
[*]Australia
Sydney[br]Melbourne
[*]New Zealand
Cromwell[br]Queenstown
[/list]
[/code]
[list=H]Some favorite cities:
[*]Australia
Sydney[br]Melbourne
[*]New Zealand
Cromwell[br]Queenstown
[/list]
Header lists may also be nested inside other lists. The [url=#Examples_of_URL_tag_parts]Examples of URL tag parts[/url] is an example of a two-level nested header list; this is a segment of the definition of such list:
[code]
[list=H]
[*]Show text:
[list=H]
[*]normal link:
Examples of Show text, normal link
[*]button:
Examples of Show text, button
[/list]
[*]Open site:
[list=H]
[*]normal link:
Examples of Open site, normal link
[*]button:
Examples of Open site, button
[/list]
[*]Ask question and open site:
[list=H]
[*]normal link:
Examples of Ask question and open site, normal link
[*]button:
Examples of Ask question and open site, button
[/list]
[/list]
[/code]
===Tables===
Table tag allows you to display tables in a very easy way.
[list]To show a table of values:
[*]Start the table with [code][table][/code] tag; optionally include a [i]description[/i] for the table.
[*]Include [i]column headers[/i] in the next lines preceded and separated by vertical bars.
[*]Include [i]column data[/i] in the following lines ([i]rows[/i]) separated by vertical bars.
[*]End the table with [code][/table][/code] tag.
[/list]
For example, this section:
[code]
[table]A table
|Year|Sales
2000|$18M
2001|$25M
2002|$36M
[/table]
[/code]
Is displayed this way:
[table]A table
|Year|Sales
2000|$18M
2001|$25M
2002|$36M
[/table]
Note that you can not include a vertical bar in any table cell (nor an equal sign in the first non-blank character), but you may use [url=popup:http://www.quackit.com/html/html_special_characters.cfm]HTML character references[/url] to show any character given its Ascii code; for example, use [code]|[/code] for the vertical bar (and [code]=[/code] for the equal-sign). The presentation of the table may be modified in several ways by a series of values ("modifiers") that may be included in the table tag.
[table border="1" rules="all" cellpadding="5" align="center"]Modifiers for TABLE tag
|Modifier|Description: available values|Example
border|Width of frame border: in pixels (may be zero)|border="1"
frame|Frame sides to show: void,above,below,hsides,lhs,rhs,vsides|frame="hsides"
rules|Rules to show between cells: none,rows,cols,all|rules="cols"
cellspacing|Separation between cells: in pixels (may be zero)|cellspacing="10"
cellpadding|Space between cell and data: in pixels (may be zero)|cellpadding="10"
width|Width of table: in pixels or percentage of page width|width="50%"
align|Alignment of table/headers/data: left,center,right|align="center"
bgcolor|Background color of table/headers/data: color value|bgcolor="#CCCCCC"
colspan|Columns that this header/data cell spans across: number|colspan="3"
rowspan|Rows that this header/data cell spans across: number|rowspan="2"
nowrap|Prevent column cell contents from wrapping: present or not|nowrap="nowrap"
[/table]
The table above use [code]border="1" rules="all" cellpadding="5" align="center"[/code] modifiers. You may see an example of [code]rules="rows"[/code] in [url=#Available_text_styles]Text styles[/url] table, and of [code]rules="cols"[/code] in [url=#Standard_HTML_color_names_equivalent_to_DOS_text_colors]Standard color names[/url] table.
Previous modifiers can be applied to the whole table (excepting the last three), but [code]align[/code] and [code]bgcolor[/code] values may also be set in headers and data cells [i]independently[/i]; to do that, include the modifiers for table, headers and data separated by semicolons, in that order. For example, the same "|Year|Sales" table shown above, but defined now with this tag: [code][table border="5" cellspacing="10" cellpadding="10" width="50%" align="right"[/code][br][code]bgcolor="#808080";bgcolor="#CCCCCC";align="center" bgcolor="#FFFF66"]A table[/code][br]is displayed this way:
[table border="5" cellspacing="10" cellpadding="10" width="50%" align="right" bgcolor="#808080";bgcolor="#CCCCCC";align="center" bgcolor="#FFFF66"]A table
|Year|Sales
2000|$18M
2001|$25M
2002|$36M
[/table]
This table use #808080 color for background of the whole table, #CCCCCC for background of headers and #FFFF66 for background of data.
Note that the paragraph following the table takes up the space left by [code]align="right"[/code] modifier in the same way described in [code][img][/code] tag above, so you must insert the [code][br clear="all"][/code] tag at the right place, if necessary; for example, at this point.[br clear="all"]
You may also set [code]width[/code], [code]align[/code], [code]bgcolor[/code] and [code]nowrap[/code] modifiers in [i]individual data columns[/i]; to do that, insert a fourth group of modifiers that include values for each column separated by vertical bars in this format: [code][table tableMods;headerMods;dataMods;col1Mods|col2Mods|...][/code], you may insert a space in order to skip over not given modifiers. For example, the [url=#Standard_HTML_color_names_equivalent_to_DOS_text_colors]Standard color names[/url] table is defined with this tag: [code][table border="1" rules="cols" cellpadding="3" align="center"; ; ;[/code][br][code]align="center"| | | |align="center"|bgcolor="black"][/code], that is, after the modifiers for the whole table are given, there are not modifiers for headers nor data, but columns 1 and 5 are centered and column 6 have the background color in black.
Finally, you may set [code]align[/code], [code]bgcolor[/code], [code]colspan[/code] and [code]rowspan[/code] modifiers in [i]individual header or data cells[/i]; just include these modifiers enclosed in square brackets before the cell value. The "span" modifiers allows you to define tables with certain cells that span across more than one column or row. For example:
[code]
[table border="1" cellpadding="5" align="left"]4x4 tiled table
[colspan="3" align="center"]colspan=3|[rowspan="2"]row[br]span[br]=2
[rowspan="3"]row[br]span[br]=3|B2|B3
C2|[colspan="2"]colspan=2
[colspan="2"]colspan=2|D4
[/table]
[/code]
[table border="1" cellpadding="5" align="left"]4x4 tiled table
[colspan="3" align="center"]colspan=3|[rowspan="2"]row[br]span[br]=2
[rowspan="3"]row[br]span[br]=3|B2|B3
C2|[colspan="2"]colspan=2
[colspan="2"]colspan=2|D4
[/table]
This table shows, besides the effect of the "span" modifiers, an example of two new points: cell values that are displayed in several screen lines via [code][br][/code] tags included in them, and a table that have not headers. The [url=#Summary_of_URL_tag_parts]Summary of URL tag parts[/url] is another example of a table that use [code]colspan="3"[/code] and [code]rowspan="2"[/code] modifiers.
The next example below show a table that have two lines of headers with "span" modifiers:[br clear="all"][br]
[code]
[table border="1" cellpadding="10" width="60%" align="center";bgcolor="#CCCCCC";align="center" bgcolor="#FFFF66"]A table
|[rowspan="2"]Year|[colspan="3"]Sales
|North|South|Total
2000|$10M|$8M|$18M
2001|$14M|$11M|$25M
[/table]
[/code]
[table border="1" cellpadding="10" width="60%" align="center";bgcolor="#CCCCCC";align="center" bgcolor="#FFFF66"]A table
|[rowspan="2"]Year|[colspan="3"]Sales
|North|South|Total
2000|$10M|$8M|$18M
2001|$14M|$11M|$25M
[/table]
A cell that have "span" modifiers must match the following cells so they "fill the holes" created by the previous "span" modifier, otherwise the next cells are used to fill the empty spaces even if they appear in the following rows. If you want that the last cell in a row have a [code]rowspan[/code] value greater than 1, you must add as many empty rows as needed until fill the empty space; the empty rows must have a cell with [code][nbsp][/code] tag. You may review an example of this method in [url=new:Aacini's Colors Tree.txt]the source file[/url] used to create my [url=new:Aacini's Colors Tree.html]Colors Tree[/url] chart.
Additionally, you may include a file name after the "table" word separated by an equal-sign like this: [code][table="fileName.txt"][/code]; this way, the contents of the given file is inserted in the table like an [i]include[/i] facility. This feature allows you to create a table in a file separated from the web page that display it, so you need to update the table data in just one place; the same table data may be displayed in different parts of the web page with different modifiers. For example:
[code]
[table="AgendaForMidweekDays.txt"  ; ; ; | |bgcolor="aqua"]Tuesday data highlighted
[/table]

[table="AgendaForMidweekDays.txt"  ; ; ; | | | | |bgcolor="aqua"]Friday data highlighted
[/table]
[/code]
If lines of data are given before the [code][/table][/code] ending tag, they are inserted in the table [i]before[/i] the included file (as the first part of it). This feature allows you to display the same table data with different headers in the same or different document. For example:
[code]
[table="AgendaForMidweekDays.txt"]Agenda for midweek days
|Hour|Monday|Tuesday|Wednesday|Thursday|Friday
[/table]

[table="AgendaForMidweekDays.txt"]Agenda de días entre semana
|Hora|Lunes|Martes|Miércoles|Jueves|Viernes
[/table]
[/code]
The next example show a large table that is stored in a separated file; it is defined this way:
[code]
[table="DOSColorTable.txt" cellspacing="0" width="47%"]Color table of DOS text colors
[/table]
[/code]
The table contain the 256 Background/Foreground color combinations available in the text mode of the command-line window via the parameter of COLOR command; the code shown at right side is the Batch program used to generate the table.
[code:DOSColorTable.bat width:47%; float:right; font-size:1em;]
[/code]
[table="DOSColorTable.txt" cellspacing="0" width="47%"]Color table of DOS text colors
[/table]
===Code segment===
A [i]multi-line[/i] code segment start with a [code][code][/code] tag placed at beginning of the line and end at a [code][/code][/code] tag placed at beginning of a posterior line; you may include a [i]description[/i] for the code segment after the code tag. Note that in the [url=#Code_segment_inline]code segment [i]inline[/i][/url] seen before, the tag can not appear at beginning of the line. The multi-line code segment is used to display the source code of a program or the contents of any text file, like a large description. For example:
[code:"Format of the source text file.txt" height:30em]Format of the source text file
[/code]
You may include a file name after the "code" word separated by a colon like this: [code][code:fileName.txt][/code] so the contents of the given file is inserted in the code segment, like an [i]include[/i] facility. This feature allows you to separate a file from the web page that display it, so you need to update the file contents just once. If lines of text are given before the ending [code][/code][/code] tag, then they are inserted in the code segment [i]before[/i] the included text file (as the first part of it). For example:
[code]
[code:FileName.txt]
These lines will be inserted
before the FileName.txt contents
[/code]
[/code]
The presentation of the code segment may be modified by values that may be included in the code tag, in the same way as [code][img][/code] and [code][table][/code] tags. However, because technical reasons, these modifiers are [i]CSS properties[/i] instead of HTML attributes. This point means that you must give the modifiers for [code][code][/code] tag in a slightly different format than the one used in img and table tags, but that is the same for [url=#CSS_properties]style tag[/url], that is: [code]property1:value1; property2:value2; ...[/code]
[code:ModifiersForCodeTag.txt color:green; background:white; border:solid black; font-size:1em;]Some CSS properties that may be used as modifiers in CODE segment and STYLE tags
[/code]
The previous box is a code segment defined this way:
[code]
[code:ModifiersForCodeTag.txt color:green; background:white; border:solid black; font-size:1em;]Some CSS properties that may be used as modifiers in CODE segment and STYLE tags
[/code]
[/code]
The default text color for code segment is black over light blue background, so these modifiers change that colors to green on white and also define a black border. The default font size of code segment is slightly larger than normal (1.05em) in order to make it more visible on the blue background, so previous [code]font-size: 1em;[/code] modifier recover the standard size.
For a detailed description of all CSS properties, see: [url=new:http://www.quackit.com/css/properties/]quackit CSS Properties[/url]
The [url=#Format_of_the_source_text_file]Format of the source text file[/url] segment that was displayed before previous box, was defined with this modifier: [code]height:30em;[/code] This value limits the size of the code subwindow and activates a vertical scroll bar that allows to access its whole contents. This way, if the code segment is too large, the user don't needs to scroll over multiple pages in order to reach the next section of the web page.
The method used to show the code segment at right side of the [url=#Roman-alpha-number_list]Roman-alpha-number list[/url] is with these modifiers: [code]width:50%; float:right;[/code] In a similar way, the modifiers used to show the Batch program at right side of the [url=#Color_table_of_DOS_text_colors]Color table of DOS text colors[/url] are these: [code]width:47%; float:right; font-size:1em;[/code]
===Horizontal lists===
An horizontal list is defined via "C", "L", "R" or "B" types in [code][list=T][/code] tag, so its items are placed in the same line at Center, Left, Right or Both sides of the page, respectively. After the type you may include a number separated by colon that specify the separation between items in "em units" (text spaces) that may have decimal part. In L, R or B types you may include a second number that specify the margin, that will be inserted at same side of the list; this value may be negative in order to align the left side of the list to the same margin of previous page elements. In B type a third margin value may be included to specify the right margin, and an empty item will separate the left and right groups of items. For example:
[code]
Horizontal list at left side, with 1.5 spaces of separation between items and the standard left margin of any list ([code][list=L:1.5][/code]):
[list=L:1.5]
[*]First left
[*]Second left
[*]Third left
[/list]
Horizontal list at right side, with 1.5 spaces of separation between items and 2 spaces at right margin ([code][list=R:1.5:2][/code]):
[list=R:1.5:2]
[*]First right
[*]Second right
[*]Third right
[/list]
Horizontal list at both sides, with 1.5 spaces of separation between items, the standard left margin, and 2 spaces at right margin ([code][list=B:1.5:0:2][/code]):
[list=B:1.5:0:2]
[*]First left
[*]Second left
[*]Third left
[*]
[*]First right
[*]Second right
[*]Third right
[/list]
[/code]
Horizontal list at left side, with 1.5 spaces of separation between items and the standard left margin of any list ([code][list=L:1.5][/code]):
[list=L:1.5]
[*]First left
[*]Second left
[*]Third left
[/list]
Horizontal list at right side, with 1.5 spaces of separation between items and 2 spaces at right margin ([code][list=R:1.5:2][/code]):
[list=R:1.5:2]
[*]First right
[*]Second right
[*]Third right
[/list]
Horizontal list at both sides, with 1.5 spaces of separation between items, the standard left margin, and 2 spaces at right margin ([code][list=B:1.5:0:2][/code]):
[list=B:1.5:0:2]
[*]First left
[*]Second left
[*]Third left
[*]
[*]First right
[*]Second right
[*]Third right
[/list]
An horizontal list can not include another multi-line section nested inside it. The last example below use a centered horizontal list to define a menu with internal links as the footer of this document:
[code]
=
[hr]
[list=C:3]
[*][url=#Document_subdivisions]plain:[color="#666666" size="-1"]Document subdivisions[/color][/url]
[*][url=#Text_attributes]plain:[color="#666666" size="-1"]Text attributes[/color][/url]
[*][url=#Hypertext_links]plain:[color="#666666" size="-1"]Hypertext links[/color][/url]
[*][url=#Multi-line_sections]plain:[color="#666666" size="-1"]Multi-line sections[/color][/url]
[/list]
[/code]
=
[hr]
[list=C:3]
[*][url=#Document_subdivisions]plain:[color="#666666" size="-1"]Document subdivisions[/color][/url]
[*][url=#Text_attributes]plain:[color="#666666" size="-1"]Text attributes[/color][/url]
[*][url=#Hypertext_links]plain:[color="#666666" size="-1"]Hypertext links[/color][/url]
[*][url=#Multi-line_sections]plain:[color="#666666" size="-1"]Multi-line sections[/color][/url]
[/list]