Assuming you know how to use either Netscape or Internet Explorer, and that you have surfed already on the web, finding interesting information, you will soon certainly want to compose your own pages.
The easiest way to do it is to start from pre-existing pages and to modify them a bit, looking at the modifications and progress from there by a trial and error method. For instance, you could edit the source of this page by "view source" in your Netscape browser, copy and paste it in an ASCII format in whatever text editor you want to use (Notepad, Wordpad, Word ...).
However some basics on the most commonly used syntaxes would greatly help you starting.
It is composed of a header <HEAD>........</HEAD> and a body <BODY>........</BODY>.
The header contains generally the page title (not visible on the screen when browsing, but useful for searching motors):
<HEAD><TITLE>My first HTML document</TITLE></HEAD>
and the body has all the informations you want to place on your document. We generally use the body tag to also indicate the document background:
<BODY background="../../images/fond1.jpg">
Here, "../../images/background.gif" locates the actual file (an image in gif or jpg format) to be used as a background.
<H1>Size Header of size 1</H1>
<H2>Size Header of size 2</H2>
<H6>Size Header of size 6</H6>
<I> ... </I> Writes in Italic
<SUB> ... </SUB> Writes in Subscript
<SUP> ... </SUP> Writes in Superscript
<FONT COLOR="000080"> ... </FONT> Changes into a specific Color
. Colors are coded in RedGreenBlue digits, with two digits for each color in a hexadecimal base. For instance:
<FONT COLOR="ff0000"> ... </FONT> is Red
<FONT COLOR="00ff00"> ... </FONT> is Green
<FONT COLOR="0000ff"> ... </FONT> is Blue
<Back to Contents>
Special Characters | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
á | á | â | â | à | à | ä | ä | ã | ã | å | å |
Á | Á | Â | Â | À | À | Ä | Ä | Ã | Ã | Å | Å |
(Most of these combinations are available also for e, i, o, u, y, E, I, O, U, Y ) | |||||||||||
ç | ç | Ç | Ç | ñ | ñ | Ñ | Ñ | © | © | ® | ® |
° | ° | < | < | > | > | " | " | & | & | ™ | |
Some browsers directly implement these special characters: HTML Pro.
For a more detailed list:
Martin Ramsh - iso8859 - 1 table
ASCII - ISO 8859-1 (Latin-1) with HTML 3.0 Entities Table.
To jump one lign <P>, we change of paragraphTo jump a lign
change paragraph
To go to the next ligne <BR>, we place a <BR>Go to the next lign
An Unordered list <UL> <LI>Hydrogen <LI>Helium <LI>Lithium </UL>
gives:
An Unordered List:
<Back to Contents>
A more complex unordered list <UL> <LI>Alcalines <UL> <LI>Lithium <LI>Sodium </UL> <LI>Alcaline-Earth <UL> <LI>Beryllium <LI>Magnesium </UL> </UL>
gives:
A more complex unordered list:
<Back to Contents>
An Ordered List <OL> <LI>Methane <LI>Ethane <LI>Propane <LI>Butane </OL>
gives:
An Ordered List
<Back to Contents>
A Definition List <DL> <DT>Alcalines <DD>Lithium <DD>Sodium <DD>Potassium <DT>Halogens <DD>Fluorine <DD>Chlorine <DD>Bromine </DL>
gives:
A Definition List
<Back to Contents>
<HR size=1 noshade align=left width=50%>
<HR size=3 align=left width=60%>
<HR size=4 align=left width=70%>
<HR size=5 align=left width=80%>
<IMG src="../../logos/logo_crismat.gif" hspace=5> By default, the bottom of the image is aligned with the beginning of the text. A 5 pixels horizontal space is placed around the image.
<IMG src="../../images/polefig.jpg" hspace=5 align=top>The top of the image is aligned with the beginning of the text. A 5 pixels horizontal space is placed around the image.
<IMG src="../../images/diffract.gif" hspace=5 align=middle>Text is aligned at half-height of the image. A 5 pixels horizontal space is placed around the image.
<IMG src="../../images/fezrb.jpg" hspace=5 align=left> When text is having several lines, it is nicer to have it all on the side of the image. It is then necessary to had a break command: 'clear="all"'. <BR clear="all">
Each row is defined by the tags <tr>.....</tr>, each column by <td>.....</td>
<table border=5 cellspacing=5 cellpadding=3> <tr> <td><IMG src="../../images/reflecti.gif" width="400"></td> <td align=center>This text is<BR>easily aligned<BR> with adjacent<BR>images</td> <td><IMG src="../../images/thinfilm.jpg" width="200"></td> </tr> </table>
![]() |
This text is easily aligned with adjacent images |
![]() |
<center> <table border=0 cellpadding=10> <tr> <td><IMG src="../../images/esr.jpg"></td> <td align=center>This text is<BR>easily aligned<BR>with adjacent<BR>images</td> <td><IMG src="../../images/nmr.gif"></td> </tr> </table> </center>
![]() |
This text is easily aligned with adjacent images |
![]() |
Comments and suggestions are very welcome
© 2000 - All rights reserved Daniel Chateigner