HTML Markers Help

Go to: English Help French Page French Help

• HTML Markers Help •

You can use this topic in two ways:

Direcly from the Synopsis below,
Automatically for the whole of the markers explained on this page.
This automatic Help works with the Netedit built-in HTML viewer only.
Sorry, that works actually with the French Page only... The development isn't ended yet. That'll work alright with the next version.
Instructions for use:
select the marker for which you need help on the current HTML file.
You ought to select the first basic marker part only. Example:

You can do a double-left-click on the marker to select it,
then, do a right-clik on the current file in the editor Help on the local menu.
the concerned marker-paragraph is always displayed at the screen-top.
If you selected characters too much, you'll get this Help page, but at its top.
At each paragraph, a present anti-marker : </MARKER> means that it's indispensable.
The icon: shows a link to a topic or a paragraph to consult.
If there is no visible back-link, please use the button:
"Previous Page" of your browser / HTML viewer.

Synopsis

Markers Architecture
<A>
<B>
<BGSOUND>
<BIG>
<BODY>
<BR>
<CENTER>
<CITE>
‹CLASS› Important attribute!
<COMMENT>
<DIR>
<DIV>
<EM>
<EMBED>
<FONT>
<FRAME>
<FRAMESET>
<H>
<HEAD>
<HR>

<HTML>
<I>
<IMG>
<LI>
<LINK>
<MAP>
<MARQUEE>
<META>
<NOFRAMES>
<OL>
<P>
<S>
<SMALL>
<SPAN>
<STRONG>
<STYLE>
<SUB>
<SUP>
<TABLE>
<TITLE>
<U>
<UL>
<XMP>

Allows you to write a comment. All strings written inside (at the location of "x") are not displayed on the screen.
Synopsis

<A …> x </A>: Anchor Builds a link. Usual attributes:

HREF="url", link to a site, another local page, or a topic in the same file with: "#topic-name" as URL.
To reach a topic in another file: "path/file-name#topic-name".
CLASS="name", defines a class for <A>
NAME="topic-name", a target to reach in the file from a HREF link; it's named an hypertext link.
ID="topic-name", quite equivalent to NAME above.

Reachable from the tool-bar

Synopsis

<B> x </B> Bold, writes the text in bold. If the whole of the text is already in usual bold, you can get an upper font-weight with the <STYLE>

marker. Add the instruction-row:

B { font-weight:900 }. You get THIS!

Works in the lists items and in the table-cells.

None anti-marker!

Synopsis

<BGSOUND> Background Sound.
To play a sound file: *.WAV, *.MID, *.RMI.

Must be placed inside the <HEAD> marker

Usual attribute: LOOP="number" which gives the loop(s) number. "0": infinite.

The anti-marker is optional.

Synopsis

<BIG> x </BIG>Warning! Higher. Increases the text size from the current one into the next upper size.
Example: if the current size is H4 (default), it becomes <H3>.

Synopsis

• BODY •

<BODY …> x </BODY> Delimits the body of the file; this marker is absolutly indispensable; it's automatically written by Netedit when you create a new HTML file

Usual attributes:

BGCOLOR="colour" Note. Background colour,
TEXT="colour", default text colour,
LINK="colour", ALINK="colour", VLINK="colour" In this order: colours of the links , actived links (when you click on them), and already visited links; we can add: OLINK="colour", the link colour when the mouse-cursor runs over it; but this attribute doesn't work with all browsers /HTML viewers… You can replace it by an instruction-row like:A:hover { color:coulour-name-or-value } in a <STYLE> marker, or in an external style-sheet (*.css). In this case, please notice that the colour value (or name) must not be written within inverted commas .
CLASS Please, consult the topic

Synopsis

<BR> Break Row-break. Wraps the text to the next row. Works too in the lists and in the table-cells.

None anti-marker!

Synopsis

<CENTER> x </CENTER> To centre. Allows to centre an item -text or picture- when the current alignment is different. Very useful within lists, when you want for embed a centered picture.

Synopsis

<CITE> x <CITE> Citation. Used "as is", it's similar to <EM>:

the text becomes italic. You can get a different emphasis placing <CITE> inside a <STYLE>

marker, or an external "*.css" style-sheet. Synopsis

<MARKER CLASS="name"> Defines a class for the marker in an external *.css style-sheet or within a <STYLE> marker

The writing within <STYLE> is:

MARKER.name{ needed-css-instructions }

This attributes is used more and more, because the newest Web browsers no longer recognize several simpler css-instructions which worked with the previous version! Synopsis

<COMMENT> x </COMMENT> Comment, similar to: .
Though obsolete, it works still, and can be useful to find an error caused by the new  marker

Synopsis

<DIR> List </DIR> Directory: in fact, it's a simple bulleted list .
Each new row item is created by a <LI>

marker.
Doesn't support any usual attribute; the bullet is always a full disk like:

Customized bullets:

With a small *.BMP, *.GIF. *.PNG or *.JPG pic, you can create a customized bullet, and place it at each list item start. To do this, write an instruction-row in the <STYLE>

marker, or an external *.css style-sheet like :

DIR.name{list-style-image:url("path/image.xxx");disk;} The indication : disk; allows to write a standard bullet if the picture is missing.

In your HTML file, the code becomes:
<DIR CLASS="name">

These customized bullets don't work in any case if the file is compiled as CHM! The "Help project script" [ *.hhp ] writing must be adapted. No problem with HTML…

The </DIR> anti-marker causes a row-break.

Synopsis

<DIV …> x </DIV> Sets an alignment for a part of the file included inside (at the location of "x").
Supports only the attributes:

ALIGN="center", centres all items,
ALIGN="right", aligns all items to right,
ALIGN="left", aligns all items to left.
Marker to avoid if the file contains many long lists.

Synopsis

<EM> x </EM> Emphasis, allows to distinguish a part of the text.
Used "as is", the text becomes simply italic. It's cleverer to use it inside a <STYLE>

marker or an external *.css style-sheet with an instruction-row like:
EM {font-weight:attribut-value;color:colour-value;text-decoration:attribut-value }.
That allows a more homogenous look; so, you don't write again the style / colour markers for every part of the text to distinguish.

Synopsis

<EMBED …> Embed: to add Multimedia effects (Sound, Video...) in your page.

Uses the attributes:

HIDDEN="value":
with "true", the sound / video device is hidden; the video-show is displayed, or the sound played only.
with "false", the player window is visible on the screen; that could be useful with some browsers where <EMBED> cannot work "hidden"...
ALIGN="value", there are many values, "right", "left" and "middle" are usual... They allow to choose the device location on the screen. <EMBED> must be placed inside <HEAD> or inside <BODY>.

The anti-marker is optional.

Synopsis

• FONT •

<FONT …> x </FONT> Characters font. Defines the font for the text written inside (x). Needs attributes:

COLOR="colour-code", the characters colour,
FACE="name", name of the font; if it's unavailable, the browser'll use the nearest look font; or else, a default font (generally: "Arial").
SIZE="value", font size as two modes:
absolute, don't look for the current size; the value can be written as: "4", similar to <H4> size.
But it's the one similar value, because the size is directly proportional to the number. With the <H> markers, it's the opposite!
relative, this means refering to the current or default font-size:
SIZE="+1" or: SIZE="-1" increases or decreases the font height for one <H> size.
STYLE="value", defines a style for the font. The most used: "italic".
CLASS="name", it allows to replace (any) parameter(s) for (an) attribute(s) among the previous ones; hence, you can use it only! It commands an instruction-row in a style-sheet like:
FONT.name { attribute:value;attribute:value}

Synopsis

<FRAME …> Defines a frame (covering window) on your HTML page. Must be used within the next <FRAMESET> marker. It has numerous attributes. The most usual are:

BORDERCOLOR="colour-code", border-colour,
FRAMEBORDER="value", border thickness,
HEIGHT="value" and WIDTH="value": the frame dimensions; "value " can be written in pixels or in percentage. Example: "400" or "50%".
MARGINHEIGHT="value", horizontal margins (top and bottom),
MARGINWIDTH="value", vertical margins (left and right),
NAME="value", indicates the window where the frame is displayed into:
"_blank", "_parent", "_self", "_top"
NORESIZE="value", indicates if the frame dimensions can be adjusted by the user; "noresize" no; "resize" yes.
SCROLLING="value", the scroll-command in the frame.
Values: "auto", automatic following the screen definition; "no" no scrolling; "yes" scrolling-bars.
SRC="URL", path/file-name of the file which contains the HTML codes for this frame.

The anti-marker is optional.

Synopsis

<FRAMESET …> x </FRAMESET> Set (a) frame(s). Allows to build a page having one or several frames

The following attributes define the characteristics of the frame(s) for this page:

BORDER="number", borders width in pixels; "0": no border,
BORDERCOLOR="colour-code", borders colour,
COLS="value", columns number (width) of the frame; if the page contains several frames, each value is separated by a comma , example:
<FRAMESET COLS="25%, 50%"> or:
<FRAMESET COLS="40, 60">
ROWS="value", rows number (height) for the frame; if there are several frames, the values are separated by a comma like above.
FRAMEBORDER="value", frames border,
FRAMESPACING="value", the space between the frames.
Inside <FRAMESET …> x </FRAMESET>, you can place only:
<FRAME>, for each frame definition,
<NOFRAMES>, if the browser doesn't support frames (rare!).

Synopsis

<H'n'> x </H'n'> Standard Font Heights.

The 'n' values are from <H1>:
the highest
to <H6>, the smallest.
They are directly available on the Netedit tool-bar
The <H> marker causes a row-break!
It's normal and inescapable!
If it's undesirable, use the markers:
<BIG>
<SMALL>
<FONT SIZE="value">
<H'n'...> supports the attribute Align="value" ("center", "right", "left").

Synopsis

• HEAD •

<HEAD> x </HEAD> The file Head. Its own attributes aren't very used; in fact, <HEAD> contains especially the following markers:

<LINK>, which gives an external "*.css" style -sheet file location,
<TITLE>, the title of your page,
<META>, for the search engines,
<BASEFONT>, the default font for the page, example: <BASEFONT FACE="Arial">
<BGSOUND>, background sound,
With IE 32-bit 5.01®, <EMBED> works in <HEAD>. With other browsers, you need to try...

Synopsis

<HR …> Draws a partition line

in the text . You can add attributes:

COLOR="colour-code", the line colour,
ALIGN="value", "center", "right", "left".
Note: place always ALIGN... inside <HR> itself; that doesn't work from the <STYLE> marker or a "Style" *.css. file with some browsers.
SIZE="value", line thickness: SIZE="4" draws a four-pixel thickness line
WIDTH="value", line lenght in pixels or in %.
With none attribute, <HR> draws a line: lenght=100%, minimal thickness, Windows® default colour (the dialog-boxes background colour...).
NOSHADE, draws the line without "3D" effect (visible only without the COLOR attribute). NOSHADE has no value.

supports the partition-line: menu "HTML"

"Style"

"Partition Line"

The anti-marker is optional.

Synopsis

• HTML •

It's the master-marker which defines the file-type.
So, it's the first at the file top, just below the used code Standard informations written as comments.
<HTML> contains all the parts and markers of the file.
It's the extension too; it allows the system to recognize the file as HTML.
Notice that the shortened form "*.htm" is recognized by the browsers still.
The reason: old 16-bit systems support eight characters for the name and three characters only for the extension: FileName.htm.

writes <HTML> when you create a new file

Synopsis

<I> x </I> Writes the text in italic. Available on the tool-bar

Synopsis

• IMG •

<IMG …> Image

To embed a picture or a video too in the page. It uses numerous attributes:

SRC="URL", the picture location,
ALIGN="value", alignment ; the values are:
"absbottom" "absmiddle" "baseline" "bottom" "left" "middle" "right" "textop" "top"
Note: some browsers don't support ALIGN within <IMG>…
ALT="text", info-text when the mouse-cursor runs over; don't write inverted commas there! Replace them by another character like: " ¤ " or " * " .
BORDER="number", the border thickness when the pic is used as a link; "0": no border.
HEIGHT="value" - WIDTH="value", the pic dimensions; "value" is generally written in pixels, ex.: HEIGHT="57"; these attributes are used both together.
LOOP="number", for a video, the loop(s) number; "0": infinite.
HSPACE="value" - VSPACE="value", Horizontal and Vertical spaces refering the immediate neighbourhood items. Value in pixels; you may use one attribute only.
USEMAP="#name", to use the pic as a reactive picture Consult too: <MAP>

The anti-marker is optional.

Synopsis

<LI> List, adds a new row item to a list. Must be used with the list-builders markers:
<DIR>

, <UL>

and <OL>

.
<LI> has attributes, but not very used...

It's useful to prepar a button

to write <LI>

The anti-marker is optional.

Synopsis

<LINK> Resource Link, especially used to locate an external *.css Style Sheet.

writes <LINK> with the appropriate attributes:
<LINK REL=STYLESHEET HREF="path/file.css" TYPE="text/css">

To get it: menu HTML

Style Sheet

<LINK>

Must be placed within the <HEAD> marker only.

The anti-marker is optional.

Synopsis

• MAP •

<MAP …> aaa </MAP> Active areas map for a reactive picture

Its essential attribute is: NAME="name".
It must be the same than in: USEMAP="#name" but without "#".
Inside this marker, you place the rows "aaa" which define the co-ordinates for each active area and the corresponding link.
Each row begins with the marker <AREA> (only used within <MAP>).

builds automatically the "Maps". "Map" example below:

<IMG SRC="icon.bmp" HEIGHT="60" WIDTH="46" USEMAP="#icon" BORDER="0">
<MAP NAME="icon">
<AREA HREF="#title" SHAPE="rect" COORDS="43,58,4,36" ALT="Title">
<AREA HREF="#stamp" SHAPE="rect" COORDS="7,4,33,33" ALT="Stamp">
</MAP>

The anti-marker</MAP> causes a row break.
Synopsis

• MARQUEE •

<MARQUEE …> text </MARQUEE> Text animation. Numerous attributes allow to define the text animation:

BGCOLOR="colour-code", the item background colour,
LOOP="number", movings number; "0" or missing: infinite,
VSPACE="value" - HSPACE="value", defines margins for this item; "value" in pixels or in %.
WIDTH="value" - HEIGHT="value", dimensions of the item; "value" in pixels or in %.
BEHAVIOR="value", defines the animation type:
"scroll", continual scroll,
"slide", a single progressive appearance of the text, which stays displayed then,
"alternate", alternative moving: R >> L >> R... or: U >> D >> U ...
SCROLLAMOUNT="value", the moving step of the text; "value" in pixels or %.
SCROLLDELAY="ms", specifies the speed the MARQUEE scroll in milliseconds,
ALIGN="value", the item alignment; the values are:
"absbottom" "absmiddle" "baseline" "bottom" "left" "middle" "right" "textop" "top"
Note: ALIGN doesn't work within MARQUEE with all browsers...
DIRECTION="value", the moving direction:
"down" (to down), "up" (to up), "right" (to right), "left" (to left); the default is "left".
Example:
The *MARQUEE* marker...
Like you see above, it's possible to embed small pictures within <MARQUEE>: place them at the text location. The Marquee height must be as so large as the hightest pic height at least.

writes <MARQUEE> -simplified, but you can adapt it to your needs- from:
menu HTML

Effects

Marquee (IE).

This marker works with MS-IE® only, also with some "light" browsers like: LEM by R. Remblain.

It works with the Netedit built-in HTML viewer

Synopsis

<META …> Specifies the page for the search-engines. Please, consult the special topic

writes automatically these markers; example: this file meta-markers:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-1">
<META NAME="author" CONTENT="S. Morey & C. Charries">
<META NAME="copyright" CONTENT="XnView,Corel3.0,Netedit7.2,Win.Commander4.54(Re)">
<META NAME="creation_date" CONTENT="16/10/2001">
<META http-equiv="content_language" CONTENT="en">
<META NAME="generator" CONTENT="Netedit 7.2">

Synopsis

<NOFRAMES> text </NOFRAMES> Consult: <FRAMESET>

Synopsis

• OL •

<OL …> list </OL> Ordered List.
Each new row item is added by a <LI>

marker. <OL> has two usual attributes:

TYPE="value", shows the type in which the rows'll be referenced:

"1", numbered list, classic numbers
"I" (capital "i"), numbered list, roman numbers
"a", alphanumeric list, lowercase,
"A", alphanumeric list, UPPERCASE.

START="value", following the list-type, you choose the first symbol (number or letter) for a first list; example: "1" or "A"; then, if you need to embed another item in the list -like a bulleted sub-list or a picture- you can create a second <OL> which starts with the last symbol of the first list +1.

Example of codes: <OL TYPE="1" START="1"> <LI>This is an ordered list, <LI>Now, I show you our logos: </OL> <CENTER> <IMG SRC="toile-fr.gif">    <IMG SRC="hibou-a.gif"> </CENTER> <OL TYPE="1" START="3"> <LI>And the list continues... <LI>Useful, isn't it? </OL>

View on the screen:

This is an ordered list,
Now, I show you our logos:

And the list continues...
Useful, isn't it?

writes the lists: menu HTML

Style

Lists

Choose the list-type, or the <LI> marker.
It's useful to prepar a button

with the <OL> code and its attributes like:

<OL TYPE="x" START="y"></OL> you just need to complete it for use...

The </OL> anti-marker causes a row-break.

Synopsis

<P …> x </P> Paragraph, delimits a paragraph.

The anti-marker </P> is optional. However, <P> supports the Align="value" ("center", "right", "left") attribute; in this case, the </P> anti-marker is necessary.

Synopsis

<S> x </S> Strike Strikes the text. Example: ~~O! It's a mistake!~~

Synopsis

<SMALL> x </SMALL> Smaller, decreases the current font-size into the first next lower one.
Example: It's smaller!

It's useful to prepar a button

to write this marker.

Synopsis

<SPAN> xxx </SPAN> Allows to avoid instructions of a style-sheet:
<SPAN STYLE="instructions"> xxx </SPAN>

To write it: Menu HTML Style Sheet

"Span"

<SPAN> doesn't work with some browsers…

Synopsis

<STRONG> x </STRONG> Stronger. Used "as is", writes the text as bold.
If the whole of the text is already bold, you can get an "extra-bold" text placing <STRONG> within a <STYLE>

marker or a *.css style-sheet with the instruction:
STRONG { font-weight:900 }

Synopsis

• STYLE •

<STYLE …> css-instructions </STYLE> Defines a style for some similar items in the file; hence, isn't necessary to write again the same style-markers! Example:

<STYLE TYPE="text/css">

</STYLE>
You'll get:

All text parts inside the <H1> markers in red,
The whole of the file in usual bold, needs to write: <BODY CLASS="bld"...> on the HTML file.
All text parts inside the <STRONG> markers in extra-bold.
You can write too these instructions in a "*.css" file,
this file is "text-type", and contains the instructions only!
In this case, the <LINK> marker is used

writes the <STYLE> marker: menu HTML

Style Sheet

"Style".

Synopsis

<SUB ...> x </SUB> Indice. Example: C₂H₅OH
• Usual attribute:
CLASS="name" to define the font characteristics for <SUB>

Synopsis

<SUP ...> x </SUP> Exponant. Example: 10⁶
• Usual attribute:
CLASS="name" to define the font characteristics for <SUP>

Synopsis

• TABLE •

<TABLE …> covering-markers </TABLE> Table. It's the main marker to build a table; it's a so complex structure to write "by hand"! In fact, several covering markers are needed for each cell in the table; moreover, they can have their own attributes ...
Hence, the Table writing has been very well planned and automated with

the table is written with a marking off for each cell; so, it's easy to write the text and / or place items in the appropriate cell...
Inside the <TABLE> marker, you can add colour attributes as:
BORDERCOLOR="colour-value", borders single colour or:
BORDERCOLORLIGHT="colour-value", borders light colour ("3D" effect),
BORDERCOLORDARK="colour-value", borders dark colour, same use...
A table is an independent entity in the HTML file; hence, the usual style-markers don't work for the whole of the table!
For instance, if you want for a bold text in all cells, you must:
either place a <B> marker in each cell,
or write a "bold" instruction for the <TD> covering marker inside the <STYLE> marker (or an external *.css file) like:
TD { font-weight:bold }

Simple Table-codes example:
<TABLE WIDTH="40%" BORDER="3" BGCOLOR="#80FF80"> <TR>  <TD ALIGN="center"> Cell: Row #1 <BR> Column #1 </TD>  <TD ALIGN="center"> Cell: Row #1<BR>Column #2 </TD> </TR> <TR>  <TD ALIGN="center"> Cell: Row #2<BR>Column #1 </TD>  <TD ALIGN="center"> Cell: Row #1<BR>Column #2 </TD> </TR> </TABLE> On the screen:

Cell: Row #1 Column #1	Cell: Row #1 Column #2
Cell: Row #2 Columnn #1	Cell #2 Column #2

To get the dialog-boxes which build a table: Menu HTML Table Table.

Keyboard-shortcut: F9

Synopsis

<TITLE> text </TITLE> The title of the page. Its displayed on the browser title-bar and / or / in its status-bar This element may only be used within the <HEAD>

marker. Synopsis

<U> x </U> Underlined. Writes the text as underlined. Available on the tool-bar

Synopsis

<UL …> list </UL>Unordered List, bulleted list; its usual attribute is: TYPE="value" which defines the bullet-type as "disk", "circle", or "square". Example:

"disk"

"circle"

"square" Each new item-row is added by a <LI>

marker.

writes the lists: menu HTML Style Lists Choose the list-type or the <LI> marker.

It's useful to prepar a button

for the <UL> code and its attribute like:
<UL TYPE="x"></UL> then, just complete it following the needs...

Customized bullets:
With a small pic *.PNG, *.BMP, *.GIF or *.JPG, you can create a customized bullet to place at each new item-row start. To do that, you need to write an instruction within the <STYLE>

marker,
or an external *.css style-sheet file:
UL.name{list-style-image:url("path/image.xxx");disk;} The instruction: disk; allows to display a standard bullet if the picture is missing .

The "type=x" attribute is replaced in the HTML file by:
<UL CLASS="name">

Example:

There are...
customized bullets!

The customized bullets work for <UL> with HTML and CHM files. However, to compile the HTML file into CHM, the "Help project script" [ *.hhp ] writing must be adapted.

The </UL> anti-marker causes a row-break.

Synopsis

<XMP> encoded HTML text example </XMP> Example. Though obsolete, it's useful still to display a long code-example... Moreover, the new markers supposed to replace it aren't really equivalent (nothing on the screen with some browsers!). You can give it a colour and a font-weight using an instruction within the <STYLE>

marker.

It's useful to prepar a button

to write the <XMP> codes.

Disadvantages:

The </XMP> anti-marker causes a row-break,

The default font isn't very aesthetic; to change it, only "css" instructions for a CLASS="name" attribute are efficient.

For a short example, encode the < > symbols…

Synopsis

• Markers Architecture •

MARKER

< Open-symbol: "Lower than..." angle-bracket,
Basic Marker,
ONE SPACE
#1 attribute
"Value" within inverted commas,
ONE SPACE
#2 attribute
"Value" within inverted commas,
ONE SPACE
#n... attribute
"Value" between inverted commas
> Close-symbol: "Greater than..." angle-bracket.

ANTI-MARKER

< Open-symbol: "Lower than..." angle-bracket,
/ slash: specifies as an anti-marker,
Basic marker,
> Close-symbol: "Greater than..." angle bracket.

Synopsis

English Help Index

Created October / 17 / 2001 • Last update: December/ 30/ 2001.
The Netedit Help - ©Sébastien Morey & Claude Charries - 1999~2002.