Before we begin
This page was recently restructured. The contents on the World Wide Web are now divided into several pages. The page of introduction to the World Wide Web contains an introduction and a description of the elements that one finds on Web pages and Web sites. There is also a page containing advices for the conception of Web pages,the promotion of the site and the publication. Both following pages are for the conception of Web pages by using Netscape Composer or Microsoft Word. There are many of the small advices that are included on these pages. The next page contains a description of the elements that one finds in a form of a Web page as well as its advantages and the limitations. To end, there is a page that contains the codes HTML ( this page) that one finds on all the pages of Web. By understanding their functioning, you can compose better Web pages.
Introduction
The previous pages how showed to use Microsoft Word 97 or Netscape Composer to create a Web page. But, possibly, it will be necessary that you enter the code HTML to be able to change or add an option.As being mentioned on the page of conception of Web pages with Word, all the codes in HTML format you will find among one "<" and ">". Most of these codes work also in pairs: the first one to activate the command and the second to end it. The only difference between both is that the last one has the character "/" in more in the code. For example, the codes < P > and < / P > indicate the beginning and the end of a paragraph. There are also certain codes that are necessary.
The basic instructions
Certain codes are essential so that the Browser recognizes that the file is a Web page.< HTML >
< HEAD >
< TITLE > Titles of your Web page < / TITLE >
< / HEAD >
< BODY >
< / BODY >
< / HTML >
What you have above are the basic codes for a Web page. A Web page always begins with the code < HTML. It's in this way that the size(format) is recognized by the publishers(editors) of Web pages. Then the section < HEAD > follows that include the name of the page (< TITLE >) that will appear on the titles bar of the window during the view of the page in a Browser. It's inside the codes < BODY > that itself meets the text of the page. Often, the first code BODY included by the options such as the thorough color (< BACKGROUND >) or the name of the image that serves as thorough pattern for the page. Here are some possible options for the command BODY.
| Code | Description |
| BGCOLOR | Thorough color of the Web page. |
| BACKGROUND | Image used for the bottom of the Web page. Only a color or an image can be used at the same moment to determine the apparance of the bottom of the Web page. |
| TEXT | Colour of the text of the Web page. |
| LINK | Colours of the links on the Web page. |
| VLINK | Colour of a link when one "clicks" above. |
| ALINK | Colour of a link already visited recently. |
The presentation
Between the instructions < BODY > and < / BODY >, there is a text that composes the Web page. It's however always possible to change the presentation of the text. The instructions that follow an idea of gives you what is possible to carry out in HTML format for the presentation of the text.| P> < / P > | The beginning and the end of paragraph |
| B> < / B > | The beginning and the end of the bold ( Bold) |
| I> < / I > | The beginning and the end of italic |
| U> < / U > | The beginning and the end of underlined ( Underline) |
| < BR > | At the end of line. Begin to write in the line directly down. |
| ALIGN = " LEFT, CENTER, RIGHT " | Align an element that it's a paragraph, an image, a contents of a cell...). Choose among one of three possibilities. |
| < Hx > < / hour > Ex: < H1 > < / H1 > | The beginning and the end of heading ( header ) headings go from H1 to H6. |
| < UL > < LI > < / LI > < / UL > Ex: < UL > (LI) Text of your choice < / LI > (LI) Text of your choice < / LI > < / UL > | View of a not numbered list (Unordered list) and the contents of each of the lines. |
| < OL > < LI > < / LI > < / OL > Ex: < OL > (LI) Text of your choice < / LI > (LI) Text of your choice < / LI > < / OL > | View of an orderly list, numbered (Ordered list) and the contents of each of the lines |
| < HR > | Horizontal line. The name of the image can have as option the length in pixels or in percentage of the screen as well as. |
< BLINK > < / BLINK >
< EM >
< STRONG >
<MEADOW PRÉFORMATÉ>
<TOWN> Quotation
<CODE> View the code instead of using it for the presentation of the page
< SAMP > example
< Kdatabase > Keyboard Input
Variable (VAR)
< DFN > definition
< MAKE size =? > Size from 1 to 7
< BASEFONT size =? > Size from 1 to 7
< BLOCKQUOTE >
< CENTER >
The images
One of element that returned so popular World Wide Web is the possibility to show images. Here is an example of the code for the image plus.gif< IMG SRC = " plus.gif " ALT = "+" HEIGHT = "10" WIDTH = "10" TO LINE = "0" >
Here is the result
The previous code indentifie an image. The option SRC indicates the name and if need be the road (in so necessary absolute address) to find the image in question. The option ALT shows of the text if, for a reason or the other one, the image would not appear. This always leaves a reference to the readers of the page. This option is even more important for the readers of Web pages having a visual hadicap. The option HEIGHT and WIDTH reserves the necessary space to show the image. In this way, the Browser reserves the space and continues to show the rest of the text of the page. Later, it returns and shows the images in the reserved(distant) spaces. If this option is not used, the presentation of the text of the page is slow because the Browser should first read the image before reserving the space. The option TO LINE serves for determining the thickness of the outline of the image. If the option is not there, there will be no border around the image (TO LINE = "0").
The links and bookmarks
The most important element of a Web page, after its contents, is the link on another Web page. It's unthinkable to create a Web page without intending to create one or several links on the other Web pages. Moreover the name of the service, Web, results from the fact that all the pages available on the Internet are among connected. There are also the codes for the links and the bookmarks.< In HREF = " acct.htm " > tables < / has >
This code represents a link to another Web page ( acct.htm ) with a relative address. There is also a text that appears to the screen on that you press to go to this page.
< In HREF = " * intro " > Introduction < / has >
The code above is a link in a bookmark that meets itself somewhere on the same current Web page.
< "Test" Has NAME = > < / has >
This is a bookmark of the page. The name of this one is "test".
Link at an address of E-mail
< In HREF = " mailto:adresse_de_courrier_électronique @de_votre_choix " > Ex: < In HREF = " mailto:roy.patrice@uqam.ca " >
Link in a file or a document that is not a Web page or an image.
< HREF = " nom_du_document_incluant extention_si_nécessaire " > Ex: < HREF = " courrier.ppt " >
The other services: FTP, Gopher, newsgroups
Target (for "frames" or the executives)
Links on Imagemap with forms:
Oblong
Circular
Non-uniform
Tables
They are useful for a grid but also to write of the text on several columns. The HTML format has no instructions to show several columns. It's however possible to by-pass this limitation by writing the text in cells of a table.Here are some of the codes that you go to find in a table.
| < TABLE TO LINE = "0" CELLSPACING = "0" WIDTH = "780" > | At the beginning of the table No outline of cells (To line = "0") Nobody(no) outstrips between the text and the border of cells ( CELLSPACING) The width of the table is 780 pixels. |
| < TR > | At the beginning of one row of a table |
| < TD VALIGN = "PIP("TOP") > < B> No Facture < / B > | At the beginning of the cell Vertical adaptation at the top of the cell The text No. Charges is in bold ( Bold) |
| < / TD > | At the end of the cell |
| < / TR > | At the end of one Row of the table |
| < / table > | At the end of the table |
TO LINE, CELLSPACING, CELLPADDING, WIDTH %, pixel, nowrap
ALIGN
Forms
Forms allows to the designer of Web pages to have a contact with the readers without having to pass by the E-mail. Of more the designer can ask of the precise data because it conçoie the form.| < FORM METHOD = " POST " action = " mailto: or SCRIPT CGI " > <INPUT> < / FORM > | Contents of a form. Announce the beginning and the end of the form. COMPULSORY. |
| < INPUT TYPIFIES = " TEXT " NAME = " Name of the variable " SIZE = " Number of characters " > | Variable for the text. For a line of text in reader's choice. |
| < INPUT TYPIFIES = " TEXTAREA " NAME = " Name of the variable " ROWS = " Number of rows " COLLARS = " Number of columns " > | Field for comments. Allows to the reader to enter several lines of texts. Completed for comments. |
| < INPUT TYPIFIES = "RADIO" NAME = " Name of the variable " BEEN WORTH = " Value messenger by e-mail " > | Button radio. Allows d, to have several possibilities. Only one of these can be chosen. |
| < INPUT TYPIFIES = " CHECKBOX " NAME = " Name of the variable " BEEN WORTH = " Value messenger by e-mail " > | Button hook. Being completed for situations Yes/No. |
| < SELECT NAME = " Name of the variable " SIZE = " Counts of shown lines " > < OPTION SELECTED > Value by default < SELECT > the Other choice... < / SELECT > | Pop-up menu. A list allows to have déroulante. Selected option allows to have a predetermined choice. |
| < INPUT TYPIFIES = BEEN WORTH " SUBMIT " = " Text in the button " > | Button to pass on the contents of the form. Passes on the contents of variables to the addresser. COMPULSORY. |
| < INPUT TYPIFIES = BEEN WORTH " RESET " = " Text in the button " > | Button to empty the contents of the form. The entry of data allows to the user to begin again. |
Frames
FRAMESET Cuts the screen in several parites horizontally or vertically in as many parts as you need. The division can be made according to the number of "pixels" or according to certain poucentage of the screen.< NOFRAME > text of the page < / NOFRAME > Incrire of the text for the users who use a Browser who supports(bears) the option of cardre. This is more and more rare.
Other instructions
Special charactersAmong the codes, there are those for the special characters. The HTML format was first created for the text in English. It's then that codes were added for the characters of the various languages of the planet. Here are some of the codes for the French language.
| 224; or *agrave; in 232; è *ugrave; ù 233; or *eacute; é | *acirc; â *ecirc; ê *icirc; î *ocirc; ô | *ucirc; û *ccedil; ç *Agrave; In *Eacute; É |
As being mentioned above, the command < META > can be used better to describe your Web page. This command takes place between the instructions < HEAD > and < / HEAD > at the beginning of the page. place it at once after the instructions < TITLE > and < / TITLE. The META > offers several options as you go to see it. It stands out in two parts: the name and the contents. Here is to begin both more popular.
< META NAME = SATISFIED " KEYWORDS " = " List of keywords, separated, by, a comma " > This command hidden offers to the research site the terms that he can put in various categories. Certain research sites don't like having spaces next to the comma. don't put it!
< META NAME = "DESCRIPTION" TELLS = " A short description of your site or your page. About of 25 words or 200 characters. " > It's the description that will appear to the screen when a person will have chosen one of the keywords that you wrote.
The other that often appears: < META NAME = " GENERATOR " TELLS = " Name of the publisher(editor) with that you created this page ". It's the publisher(editor) himself who adds it. A little of promotion that! In here is the others.
< META NAME = SATISFIED " AUTHOR " = " Name of the author of the page ( your name) " > Certain research sites allows you to look according to the author of the page. It's necessary however that the good META > is present!
< META NAME = SATISFIED "COPYRIGHT" = " The copyrights go to your name), year of composition (Ex: on 1998) " > The copyrights.
< META NAME = "EXPIRED" TELLS = " Date in English Ex: 1 on january 2001 " > A date or the reference to this page will be removed from the database of the site. To verify if a page is still valid, certain research sites use "spiders ( spiders )", small machines that validate the existence of a page.
With a little of query, I found these other " META TAGS " who could help you to identify your page. This is more for the general data about the page than to identify the page with keywords.
< META http-equiv = " Publication_Date " TELLS = " A date of publication " >
< META http-equiv = " Custodian " TELLS = " Name of the responsible " >
< META http-equiv = " Custodian Contact " TELLS = " Coordinated by the resposable (name, e-mail) " >
< META http-equiv = " Owner " TELLS = " Name of the owner of the page " >
< META http-equiv = " Reply to " TELLS = " e-mail of the owner " >
The last one META TAG is interesting for " rafraichir " the page or when "to move" you your site on another server. The command allows to load another Web page automatically after certain tempa.
< META http-equiv = " Refresh " TELLS = " (number of seconds of posting); url = (address of the Web page to be shown) " >
It's interesting if to move you your site, if possible , you can, leave a Web page on the former(ancient) server with the command " refresh " that re-steers the readers in the new site. In this way, you can save the regular users in your site by informing them about the new address. To demonstrate you the functioning of this command, you can click here. This link will transfer you to a Web page with a command " refresh ". You will be back in the paragraph following in 30 seconds.
One can also use it to show quickly several small pages to make a kind of promotion of it. A person even mentioned me the possibility of a " carousel " or several Web pages make a buckle infinity. don't forget in that case to add a link or a button of navigation "to go out" of the buckle!
| 31? | 41) | 51 3 | 61 = | 71 G | 81 Q |
| 32 | 42 * | 52 4 | 62> | 72 hours | 82 R |
| 33! | 43 + | 53 5 | 63? | 73 I | 83 |
| 34 " | 44, | 54 6 | 64 | 74 J | 84 T |
| 35 * | 45- | 55 7 | 65 In | 75 K | 85 U |
| 36 $ | 46. | 56 8 | 66 B | 76 L | 86 V |
| 37 % | 47/ | 57 9 | 67 C | 77 M | 87 W |
| 38 and | 48 0 | 58: | 68 D | 78 N | 88 X |
| 39 ' | 49 1 | 59; | 69 E | 79 O | 89 There |
| 40 ( | 50 2 | 60 < | 70 F | 80 P | 90 Z |
| 91 [ | 101 e | 111 o | 121 there | 131 ƒ | 141 ì |
| 92\ | 102 f | 112 p | 122 z | 132 " | 142 Ä |
| 93] | 103 g | 113 q | 123 { | 133 … | 143 Å |
| 94 ^ | 104 hours | 114 r | 124 ¦ | 134 + | 144 É |
| 95 _ | 105 i | 115 | 125} | 135 ‡ | 145 ' |
| 96 ` | 106 j | 116 t | 126 ~ | 136 ^ | 146 ' |
| 97 has | 107 k | 117 u | 127 ¦ | 137 % | 147 " |
| 98 b | 108 l | 118 v | 128 Ç | 138 | 148 " |
| 99 c | 109 m | 119 w | 129 ü | 139 " | 149 · |
| 100 d | 110 n | 120 x | 130, | 140 Π| 150- |
| 151- | 161 ¡ | 171 " | 181 µ | 191 ¿ | 201 É |
| 152 ~ | 162 ¢ | 172 ¬ | 182 ¶ | 192 In | 202 Ê |
| 153 ™ | 163 £ | 173- | 183 · | 193 Á | 203 Ë |
| 154 | 164 ¤ | 174 ® | 184 ¸ | 194 Â | 204 Ì |
| 155 " | 165 ¥ | 175 ¯ | 185 ¹ | 195 Ã | 205 Í |
| 156 œ | 166 ¦ | 176 ° | 186 | 196 Ä | 206 Î |
| 157 Ø | 167 § | 177 ± | 187 " | 197 Å | 207 Ï |
| 158 € | 168 ¨ | 178 ² | 188 ¼ | 198 Æ | 208 Ð |
| 159 There | 169 © | 179 ³ | 189 ½ | 199 Ç | 209 Ñ |
| 160 á | 170 ª | 180 ' | 190 ¾ | 200 È | 210 Ò |
| 211 Ó | 221 Ý | 231 ç | 241 ñ | 251 û |
| 212 Ô | 222 Þ | 232 è | 242 ò | 252 ü |
| 213 Õ | 223 ß | 233 Ú | 243 ó | 253 ý |
| 214 Ö | 224 in | 234 Û | 244 ô | 254 þ |
| 215 × | 225 á | 235 ë | 245 õ | 255 ÿ |
| 216 Ø | 226 â | 236 ì | 246 ö | |
| 217 Ù | 227 ã | 237 í | 247 ÷ | |
| 218 Ú | 228 ä | 238 î | 248 ø | |
| 219 Û | 229 Õ | 239 ï | 249 ù | |
| 220 Ü | 230 æ | 240 ð | 250 ú |
No comments:
Post a Comment