Présentation d'une page Html et ses explications

**Omicron** Mar 26 Jan - 0:30

Comme vous l'attendiez surement depuis longtemps maintenant, je vous présente la suite du tuto sur le language XHTML
On abordera la composition d'une page Html avec ses explications.

Ce tuto et assez long et complexe: c'est pourquoi je vous recommande de le relire plusieurs fois.

Vous vous demandé surement à quoi ressemble une page Html ?
Une page ressemble à ça :

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"> <html dir="ltr" id="min-width" lang="fr" xml:lang="fr" xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]"> <head> <title>Forum d'apprentissage de la programmation et de pa</title> <meta name="language" content="fr" /> <meta name="description" content="Ce forum traite l'apprentissage des languages web et informatiques. Il est destiné aux gens qui souhaite débuter en programmation et en modélisation 3d, ou alors pour en apprendre plus sur le sujet." /> <meta name="keywords" content="Informatique, Programmation, language web, language de logiciel, modélisation 3d, web, 3d, programmation, design" lang="fr" /> <meta name="robots" content="index, follow, noodp" /> <link rel="alternate" type="application/rss+xml" href="/feed/?f=15" title="Présentation des membres" /> <link rel="alternate" type="application/rss+xml" href="/feed/?f=19" title="Présentation du forum" /> <link rel="alternate" type="application/rss+xml" href="/feed/?f=17" title="Vie du forum" /> <link rel="alternate" type="application/rss+xml" href="/feed/?f=21" title="Amélioration du forum" /> <link rel="alternate" type="application/rss+xml" href="/feed/?f=12" title="Proposition d'amélioration pour le forum" /> <link rel="alternate" type="application/rss+xml" href="/feed/?f=16" title="Parler de tout et de n'importe quoi" /> <link rel="alternate" type="application/rss+xml" title="Derniers sujets (RSS 2.0)" href="[url=http://websterdeveloppement.forumsactifs.net/feed/]http://websterdeveloppement.forumsactifs.net/feed/[/url]" /> <link rel="alternate" type="application/atom+xml" title="Derniers sujets (ATOM)" href="[url=http://websterdeveloppement.forumsactifs.net/feed/?type=atom]http://websterdeveloppement.forumsactifs.net/feed/?type=atom[/url]" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <meta name="title" content="Forum d'apprentissage de la programmation et de pa" /> <link rel="stylesheet" href="/17-ltr.css" type="text/css" /> <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="WEBster Developpements Systems" /> <link rel="search" type="application/opensearchdescription+xml" <DIV style="FILTER: ; WIDTH: 350px; <DIV class=h3>WEBster Developpements Systems</DIV>Bienvenu sur le forum de WEBster Developpement Systems <DIV id=login_popup_buttons> <FORM method=get action=/login.forum><INPUT class=button1 value=Connexion type=submit><INPUT class=button1 onclick="parent.location='/profile.forum?mode=register';" value="S'enregistrer" type=button><INPUT id=login_popup_close class=button2> </FORM></DIV></DIV> <DIV class=conteneur_minwidth_IE> <DIV class=conteneur_layout_IE> <DIV class=conteneur_container_IE> <DIV id=wrap><A accessKey=t id=top name=top></A> <DIV id=page-header> <DIV class=headerbar> <DIV class=inner><SPAN class=corners-top><SPAN></SPAN></SPAN> <DIV id=logo-desc><A id=logo href="/forum.htm"><IMG alt="WEBster Developpements Systems" src="[url=http://i17.servimg.com/u/f17/14/27/44/35/webste12.jpg"/A]http://i17.servimg.com/u/f17/14/27/44/35/webste12.jpg"></A[/url]> <DIV id=site-title> <H1>WEBster Developpements Systems</H1></DIV> <P>FORUM DE DEVELOPPEMENT WEB, 3D ET PROGRAMMATION</P></DIV><SPAN class=corners-bottom><SPAN></SPAN></SPAN></DIV></DIV> <DIV class=navbar> <DIV class=inner><SPAN class=corners-top><SPAN></SPAN></SPAN> <UL class="linklist navlinks"> <LI><A class=mainmenu href="/forum.htm"><IMG id=i_icon_mini_index title=Accueil border=0 hspace=0 alt=Accueil src="[url=http://hitskin.com/themes/14/65/39/i_icon_mini_index.jpg"/A/LI]http://hitskin.com/themes/14/65/39/i_icon_mini_index.jpg"></A></LI[/url]> <LI><A class=mainmenu href="/calendar.forum" target=_blank><IMG id=i_icon_mini_calendar title=Calendrier border=0 hspace=0 alt=Calendrier src="[url=http://2img.net/i/fa/empty.gif"/A/LI]http://2img.net/i/fa/empty.gif"></A></LI[/url]> <LI><A class=mainmenu href="/faq.htm"><IMG id=i_icon_mini_faq title=FAQ border=0 hspace=0 alt=FAQ src="[url=http://hitskin.com/themes/14/65/39/i_icon_mini_faq.jpg"/A/LI]http://hitskin.com/themes/14/65/39/i_icon_mini_faq.jpg"></A></LI[/url]> <LI><A class=mainmenu onclick="showhide(document.getElementById('search_menu')); return false;" href="/search.forum"><IMG id=i_icon_mini_search title=Rechercher border=0 hspace=0 alt=Rechercher src="[url=http://hitskin.com/themes/14/65/39/i_icon_mini_search.jpg"/A]http://hitskin.com/themes/14/65/39/i_icon_mini_search.jpg"></A[/url]> <DIV style="Z-INDEX: 10000; POSITION: absolute; WIDTH: 350px; DISPLAY: none" id=search_menu class="overview row3"> <FORM method=get action=/search.forum><INPUT value=searchbox type=hidden name=mode> <P class="title-overview row2">Rechercher</P> <P class=center-overview><INPUT class="inputbox medium" type=text name=search_keywords><INPUT class=button1 value=Go type=submit><BR>Résultats par : <LABEL for=rposts><INPUT id=rposts value=posts type=radio name=show_results> Messages</LABEL> <LABEL for=rtopics><INPUT id=rtopics value=topics CHECKED type=radio name=show_results> Sujets</LABEL></P> <HR class=dashed> <P class=center-overview><A href="/search.forum" rel=nofollow><IMG alt="" src="[url=http://2img.net/i/fa/icon_mini_search.gif]http://2img.net/i/fa/icon_mini_search.gif[/url]" width=12 height=13> Recherche avancée</A></P></FORM></DIV></LI> <LI><A class=mainmenu href="/profile.forum?mode=register" rel=nofollow><IMG id=i_icon_mini_register title="S'enregistrer" border=0 hspace=0 alt="S'enregistrer" src="[url=http://hitskin.com/themes/14/65/39/i_icon_mini_register.jpg"/A/LI]http://hitskin.com/themes/14/65/39/i_icon_mini_register.jpg"></A></LI[/url]> <LI><A class=mainmenu href="/login.forum?connexion" rel=nofollow><IMG id=i_icon_mini_login title=Connexion border=0 hspace=0 alt=Connexion src="[url=http://hitskin.com/themes/14/65/39/i_icon_mini_login.jpg"/A/LI/UL]http://hitskin.com/themes/14/65/39/i_icon_mini_login.jpg"></A></LI></UL[/url]> <DIV id=search-box> <FORM id=search method=get action=/search.forum> <P class=nomargin><INPUT class=button2 value=Rechercher type=submit></P></FORM></DIV><SPAN class=corners-bottom><SPAN></SPAN></SPAN></DIV></DIV> <DIV style="MARGIN-TOP: 4px; DISPLAY:> <DIV class=module> <DIV class=inner><SPAN class=corners-top><SPAN></SPAN></SPAN> <DIV style="POSITION: absolute; WHITE-SPACE: nowrap; LEFT: 0px">Bonjour et bienvenu sur le forum de WDS</DIV> <DIV style="POSITION: absolute; WHITE-SPACE: nowrap; LEFT: 326px">Forum de programmation, modélisme 3D, graphisme, animations et partage...</DIV></DIV> <DIV style="POSITION: absolute; WHITE-SPACE: nowrap; LEFT: 0px">Bonjour et bienvenu sur le forum de WDS</DIV> <DIV style="POSITION: absolute; WHITE-SPACE: nowrap; LEFT: 326px">Forum de programmation, modélisme 3D, graphisme, animations et partage...</DIV></DIV></DIV></DIV><SPAN class=corners-bottom><SPAN></SPAN></SPAN></DIV></DIV></DIV></DIV> <DIV id=page-body> <DIV id=emptyidcc class=no-left> <DIV id=outer-wrapper> <DIV id=wrapper> <DIV id=container> <DIV id=content> <DIV id=emptyidleft></DIV> <DIV id=main> <DIV id=main-content> <DIV style="HEIGHT: 3px"></DIV> <P>La date/heure actuelle est Lun 25 Jan - 20:56</P><BR class=clear> <DIV class=panel> <DIV class=inner><SPAN class=corners-top><SPAN></SPAN></SPAN> <FORM method=post name=form_login action=/login.forum> <DIV class="user_login_form center"><LABEL>Nom d'utilisateur : <INPUT class=post size=10 type=text name=username></LABEL> <LABEL>Mot de passe : <INPUT class=post value="" size=10 type=password name=password></LABEL> <LABEL>Connexion automatique : <INPUT class=radio CHECKED type=checkbox name=autologin></LABEL> <INPUT class="mainoption button1" value=Connexion type=submit name=login></DIV></FORM><SPAN class=corners-bottom><SPAN></SPAN></SPAN></DIV></DIV> <DIV class="panel introduction"> <DIV class=inner><SPAN class=corners-top><SPAN></SPAN></SPAN> <DIV class=h3>Le forum WDS a ses adresses</DIV> <DIV class=mes-txt> <P style="TEXT-ALIGN: center">WDS est inscrit dans l'annuaire des forums:<BR><A href="[url=http://annuaire2follie.myblox.fr/]http://annuaire2follie.myblox.fr/[/url]" target=_blank><IMG border=0 alt="bienvenue sur l'Annuaire 2Follie" src="[url=http://perso.wanadoo.fr/boxer.h/images/menuliens/l'annuaire(1).gif]http://perso.wanadoo.fr/boxer.h/images/menuliens/l'annuaire(1).gif[/url]" width=88 height=31> <A href="[url=http://www.boosterforum.com]http://www.boosterforum.com[/url] "><IMG alt="bienvenue sur l'Annuaire de bosterforum" src="[url=http://i17.servimg.com/u/f17/14/27/44/35/th/booste10.gif]http://i17.servimg.com/u/f17/14/27/44/35/th/booste10.gif[/url]"> <A href="[url=http://www.annuaire-des-forums.net]http://www.annuaire-des-forums.net[/url]" target=_blank><IMG border=0 alt="Annuaire des Forums" src="[url=http://www.annuaire-des-forums.net/bannieres/bouton.gif]http://www.annuaire-des-forums.net/bannieres/bouton.gif[/url]" width=88 height=31></A></P></DIV><SPAN class=corners-bottom><SPAN></SPAN></SPAN></DIV></DIV> <UL class=linklist> <LI><A href="/search.forum?search_id=unanswered">Voir les messages sans réponses</A></LI></UL> <DIV class=forabg> <DIV class=inner><SPAN class=corners-top><SPAN></SPAN></SPAN> <UL class=topiclist> <LI class=header> <DL class=icon> <DD class=dterm> <DIV class=table-title> <H2>Présentation</H2></DIV></DD> <DD class=topics>Sujets</DD> <DD class=posts>Messages</DD> <DD class=lastpost><SPAN>Derniers Messages</SPAN></DD></DL></LI></UL> <UL class="topiclist forums"> <LI class=row> <DL style="BACKGROUND: url([url=http://hitskin.com/themes/14/65/39/i_folder_big.png]http://hitskin.com/themes/14/65/39/i_folder_big.png[/url]) no-repeat 10px 50%" class=icon> <DD class=dterm> <DIV style="MARGIN: 0px 0px 0px 41px; DISPLAY: block"> <H3 class=hierarchy><A class=forumtitle href="/presentation-des-membres-f15/">Présentation des membres</A></H3><BR><STRONG></STRONG></DIV></DD> <DD class=topics>8 <DFN>Sujets</DFN></DD> <DD class=posts>68 <DFN>Messages</DFN></DD> <DD class=lastpost><SPAN>Dim 17 Jan - 20:35<BR><STRONG><A class=gensmall href="/profile.forum?mode=viewprofile&u=3"><SPAN style="COLOR: #cc0202" class=color-groups><STRONG>megalex</STRONG></SPAN></A></STRONG><A class=last-post-icon href="/presentation-des-membres-f15/hi-i-am-tanguy100-t17.htm#151"><IMG title="Hi, I am Tanguy100" alt="Hi, I am Tanguy100" src="[url=http://hitskin.com/themes/14/65/39/i_icon_latest_reply.jpg"/A/SPAN/DD/DL/LI]http://hitskin.com/themes/14/65/39/i_icon_latest_reply.jpg"></A></SPAN></DD></DL></LI[/url]> <LI class=row> <DL style="BACKGROUND: url([url=http://hitskin.com/themes/14/65/39/i_folder_big.png]http://hitskin.com/themes/14/65/39/i_folder_big.png[/url]) no-repeat 10px 50%" class=icon> <DD class=dterm> <DIV style="MARGIN: 0px 0px 0px 41px; DISPLAY: block"> <H3 class=hierarchy><A class=forumtitle href="/presentation-du-forum-f19/">Présentation du forum</A></H3><BR><STRONG></STRONG></DIV></DD> <DD class=topics>1 <DFN>Sujets</DFN></DD> <DD class=posts>4 <DFN>Messages</DFN></DD> <DD class=lastpost><SPAN>Mar 12 Jan - 20:36<BR><STRONG><A class=gensmall href="/profile.forum?mode=viewprofile&u=2"><SPAN style="COLOR: #000099" class=color-groups><STRONG>Omicron</STRONG></SPAN></A></STRONG><A class=last-post-icon href="/presentation-du-forum-f19/presentation-du-forum-t1.htm#16"><IMG title="Présentation du forum" alt="Présentation du forum" src="[url=http://hitskin.com/themes/14/65/39/i_icon_latest_reply.jpg"/A/SPAN/DD/DL/LI/ULSPAN]http://hitskin.com/themes/14/65/39/i_icon_latest_reply.jpg"></A></SPAN></DD></DL></LI></UL><SPAN[/url] class=corners-bottom><SPAN></SPAN></SPAN></DIV></DIV> <DIV class=forabg> <DIV class=inner><SPAN class=corners-top><SPAN></SPAN></SPAN> <UL class=topiclist> <LI class=header> <DL class=icon> <DD class=dterm> <DIV class=table-title> <H2>News</H2></DIV></DD> <DD class=topics>Sujets</DD> <DD class=posts>Messages</DD> <DD class=lastpost><SPAN>Derniers Messages</SPAN></DD></DL></LI></UL> <UL class="topiclist forums"> <LI class=row> <DL style="BACKGROUND: url([url=http://hitskin.com/themes/14/65/39/i_folder_big.png]http://hitskin.com/themes/14/65/39/i_folder_big.png[/url]) no-repeat 10px 50%" class=icon> <DD class=dterm> <DIV style="MARGIN: 0px 0px 0px 41px; DISPLAY: block"> <H3 class=hierarchy><A class=forumtitle href="/vie-du-forum-f17/">Vie du forum</A></H3><BR><STRONG></STRONG></DIV></DD> <DD class=topics>0 <DFN>Sujets</DFN></DD> <DD class=posts>0 <DFN>Messages</DFN></DD> <DD class=lastpost></DD></DL></LI> <LI class=row> <DL style="BACKGROUND: url([url=http://hitskin.com/themes/14/65/39/i_folder_big.png]http://hitskin.com/themes/14/65/39/i_folder_big.png[/url]) no-repeat 10px 50%" class=icon> <DD class=dterm> <DIV style="MARGIN: 0px 0px 0px 41px; DISPLAY: block"> <H3 class=hierarchy><A class=forumtitle href="/amelioration-du-forum-f21/">Amélioration du forum</A></H3><BR><STRONG></STRONG></DIV></DD> <DD class=topics>2 <DFN>Sujets</DFN></DD> <DD class=posts>46 <DFN>Messages</DFN></DD> <DD class=lastpost><SPAN>Sam 23 Jan - 19:07<BR><STRONG><A class=gensmall href="/profile.forum?mode=viewprofile&u=2"><SPAN style="COLOR: #000099" class=color-groups><STRONG>Omicron</STRONG></SPAN></A></STRONG><A class=last-post-icon href="/amelioration-du-forum-f21/commande-de-design-pour-le-forum-t13-15.htm#176"><IMG title="Commande de design pour le forum." alt="Commande de design pour le forum." src="[url=http://hitskin.com/themes/14/65/39/i_icon_latest_reply.jpg"/A/SPAN/DD/DL/LI]http://hitskin.com/themes/14/65/39/i_icon_latest_reply.jpg"></A></SPAN></DD></DL></LI[/url]> <LI class=row> <DL style="BACKGROUND: url([url=http://hitskin.com/themes/14/65/39/i_folder_big.png]http://hitskin.com/themes/14/65/39/i_folder_big.png[/url]) no-repeat 10px 50%" class=icon> <DD class=dterm> <DIV style="MARGIN: 0px 0px 0px 41px; DISPLAY: block"> <H3 class=hierarchy><A class=forumtitle href="/proposition-d-amelioration-pour-le-forum-f12/">Proposition d'amélioration pour le forum</A></H3><BR><SPAN class=mod-text>Modérateur:</SPAN> <A class=group-mod href="/groupcp.forum?g=2">Modérateurs</A><BR><STRONG></STRONG></DIV></DD> <DD class=topics>2 <DFN>Sujets</DFN></DD> <DD class=posts>15 <DFN>Messages</DFN></DD> <DD class=lastpost><SPAN>Mar 19 Jan - 18:16<BR><STRONG><A class=gensmall href="/profile.forum?mode=viewprofile&u=2"><SPAN style="COLOR: #000099" class=color-groups><STRONG>Omicron</STRONG></SPAN></A></STRONG><A class=last-post-icon href="/proposition-d-amelioration-pour-le-forum-f12/vous-avez-aime-ce-forum-pourquoi-pas-lui-inserer-un-logo-t15.htm#161"><IMG title="Vous avez aimé ce forum, pourquoi pas lui inserer un logo?" alt="Vous avez aimé ce forum, pourquoi pas lui inserer un logo?" src="[url=http://hitskin.com/themes/14/65/39/i_icon_latest_reply.jpg"/A/SPAN/DD/DL/LI/ULSPAN]http://hitskin.com/themes/14/65/39/i_icon_latest_reply.jpg"></A></SPAN></DD></DL></LI></UL><SPAN[/url] class=corners-bottom><SPAN></SPAN></SPAN></DIV></DIV> <DIV class=forabg> <DIV class=inner><SPAN class=corners-top><SPAN></SPAN></SPAN> <UL class=topiclist> <LI class=header> <DL class=icon> <DD class=dterm> <DIV class=table-title> <H2>Programmation</H2></DIV></DD> <DD class=topics>Sujets</DD> <DD class=posts>Messages</DD> <DD class=lastpost><SPAN>Derniers Messages</SPAN></DD></DL></LI></UL> <UL class="topiclist forums"> <LI class=row> <DL style="BACKGROUND: url([url=http://hitskin.com/themes/14/65/39/i_category.png]http://hitskin.com/themes/14/65/39/i_category.png[/url]) no-repeat 10px 50%" class=icon> <DD class=dterm> <DIV style="MARGIN: 0px 0px 0px 41px; DISPLAY: block"> <H3 class=hierarchy><A class=forumtitle href="/language-web-c6/">Language WEB</A></H3><BR><STRONG></STRONG></DIV></DD> <DD class=topics>1 <DFN>Sujets</DFN></DD> <DD class=posts>1 <DFN>Messages</DFN></DD> <DD class=lastpost><SPAN>Jeu 14 Jan - 20:29<BR><STRONG><A class=gensmall href="/profile.forum?mode=viewprofile&u=2"><SPAN style="COLOR: #000099" class=color-groups><STRONG>Omicron</STRONG></SPAN></A></STRONG><A class=last-post-icon href="/xhtml-f18/ce-forum-du-language-html-peut-etre-considere-comme-une-partie-pratique-t14.htm#80"><IMG title="Ce forum du language HTML peut être considéré comme une partie pratique" alt="Ce forum du language HTML peut être considéré comme une partie pratique" src="[url=http://hitskin.com/themes/14/65/39/i_icon_latest_reply.jpg"/A/SPAN/DD/DL/LI]http://hitskin.com/themes/14/65/39/i_icon_latest_reply.jpg"></A></SPAN></DD></DL></LI[/url]> <LI class=row> <DL style="BACKGROUND: url([url=http://hitskin.com/themes/14/65/39/i_category.png]http://hitskin.com/themes/14/65/39/i_category.png[/url]) no-repeat 10px 50%" class=icon> <DD class=dterm> <DIV style="MARGIN: 0px 0px 0px 41px; DISPLAY: block"> <H3 class=hierarchy><A class=forumtitle href="/language-informatique-c7/">Language Informatique</A></H3><BR><STRONG></STRONG></DIV></DD> <DD class=topics>0 <DFN>Sujets</DFN></DD> <DD class=posts>0 <DFN>Messages</DFN></DD> <DD class=lastpost></DD></DL></LI></UL><SPAN class=corners-bottom><SPAN></SPAN></SPAN></DIV></DIV> <DIV class=forabg> <DIV class=inner><SPAN class=corners-top><SPAN></SPAN></SPAN> <UL class=topiclist> <LI class=header> <DL class=icon> <DD class=dterm> <DIV class=table-title> <H2>Modélisation 3D</H2></DIV></DD> <DD class=topics>Sujets</DD> <DD class=posts>Messages</DD> <DD class=lastpost><SPAN>Derniers Messages</SPAN></DD></DL></LI></UL> <UL class="topiclist forums"> <LI class=row> <DL style="BACKGROUND: url([url=http://hitskin.com/themes/14/65/39/i_folder_big.png]http://hitskin.com/themes/14/65/39/i_folder_big.png[/url]) no-repeat 10px 50%" class=icon> <DD class=dterm> <DIV style="MARGIN: 0px 0px 0px 41px; DISPLAY: block"> <H3 class=hierarchy><A class=forumtitle href="/3ds-max-f1/">3Ds Max</A></H3><BR><SPAN class=mod-text>Modérateur:</SPAN> <A class=group-mod href="/groupcp.forum?g=2">Modérateurs</A><BR><STRONG></STRONG></DIV></DD> <DD class=topics>0 <DFN>Sujets</DFN></DD> <DD class=posts>0 <DFN>Messages</DFN></DD> <DD class=lastpost></DD></DL></LI> <LI class=row> <DL style="BACKGROUND: url([url=http://hitskin.com/themes/14/65/39/i_folder_big.png]http://hitskin.com/themes/14/65/39/i_folder_big.png[/url]) no-repeat 10px 50%" class=icon> <DD class=dterm> <DIV style="MARGIN: 0px 0px 0px 41px; DISPLAY: block"> <H3 class=hierarchy><A class=forumtitle href="/blender-f2/">Blender</A></H3><BR><SPAN class=mod-text>Modérateur:</SPAN> <A class=group-mod href="/groupcp.forum?g=2">Modérateurs</A><BR><STRONG></STRONG></DIV></DD> <DD class=topics>0 <DFN>Sujets</DFN></DD> <DD class=posts>0 <DFN>Messages</DFN></DD> <DD class=lastpost></DD></DL></LI></UL><SPAN class=corners-bottom><SPAN></SPAN></SPAN></DIV></DIV> <DIV class=forabg> <DIV class=inner><SPAN class=corners-top><SPAN></SPAN></SPAN> <UL class=topiclist> <LI class=header> <DL class=icon> <DD class=dterm> <DIV class=table-title> <H2>Tutoriaux</H2></DIV></DD> <DD class=topics>Sujets</DD> <DD class=posts>Messages</DD> <DD class=lastpost><SPAN>Derniers Messages</SPAN></DD></DL></LI></UL> <UL class="topiclist forums"> <LI class=row> <DL style="BACKGROUND: url([url=http://hitskin.com/themes/14/65/39/i_category.png]http://hitskin.com/themes/14/65/39/i_category.png[/url]) no-repeat 10px 50%" class=icon> <DD class=dterm> <DIV style="MARGIN: 0px 0px 0px 41px; DISPLAY: block"> <H3 class=hierarchy><A class=forumtitle href="/tutoriaux-programmation-f3/">Tutoriaux Programmation</A></H3><BR><SPAN class=mod-text>Modérateur:</SPAN> <A class=group-mod href="/groupcp.forum?g=2">Modérateurs</A><BR><STRONG></STRONG></DIV></DD> <DD class=topics>5 <DFN>Sujets</DFN></DD> <DD class=posts>38 <DFN>Messages</DFN></DD> <DD class=lastpost><SPAN>Ven 22 Jan - 18:41<BR><STRONG><A class=gensmall href="/profile.forum?mode=viewprofile&u=2"><SPAN style="COLOR: #000099" class=color-groups><STRONG>Omicron</STRONG></SPAN></A></STRONG><A class=last-post-icon href="/tutoriaux-programmation-f3/autoit-de-a-a-z-t21.htm#172"><IMG title="AutoIt de A à Z!" alt="AutoIt de A à Z!" src="[url=http://hitskin.com/themes/14/65/39/i_icon_latest_reply.jpg"/A/SPAN/DD/DL/LI]http://hitskin.com/themes/14/65/39/i_icon_latest_reply.jpg"></A></SPAN></DD></DL></LI[/url]> <LI class=row> <DL style="BACKGROUND: url([url=http://hitskin.com/themes/14/65/39/i_folder_big.png]http://hitskin.com/themes/14/65/39/i_folder_big.png[/url]) no-repeat 10px 50%" class=icon> <DD class=dterm> <DIV style="MARGIN: 0px 0px 0px 41px; DISPLAY: block"> <H3 class=hierarchy><A class=forumtitle href="/tutoriaux-de-modelisation-3d-f6/">Tutoriaux de modélisation 3D</A></H3><BR><SPAN class=mod-text>Modérateur:</SPAN> <A class=group-mod href="/groupcp.forum?g=2">Modérateurs</A><BR><STRONG></STRONG></DIV></DD> <DD class=topics>0 <DFN>Sujets</DFN></DD> <DD class=posts>0 <DFN>Messages</DFN></DD> <DD class=lastpost></DD></DL></LI></UL><SPAN class=corners-bottom><SPAN></SPAN></SPAN></DIV></DIV> <DIV class=forabg> <DIV class=inner><SPAN class=corners-top><SPAN></SPAN></SPAN> <UL class=topiclist> <LI class=header> <DL class=icon> <DD class=dterm> <DIV class=table-title> <H2>Bla Bla</H2></DIV></DD> <DD class=topics>Sujets</DD> <DD class=posts>Messages</DD> <DD class=lastpost><SPAN>Derniers Messages</SPAN></DD></DL></LI></UL> <UL class="topiclist forums"> <LI class=row> <DL style="BACKGROUND: url([url=http://hitskin.com/themes/14/65/39/i_folder_big.png]http://hitskin.com/themes/14/65/39/i_folder_big.png[/url]) no-repeat 10px 50%" class=icon> <DD class=dterm> <DIV style="MARGIN: 0px 0px 0px 41px; DISPLAY: block"> <H3 class=hierarchy><A class=forumtitle href="/parler-de-tout-et-de-n-importe-quoi-f16/">Parler de tout et de n'importe quoi</A></H3><BR><SPAN class=mod-text>Modérateur:</SPAN> <A class=group-mod href="/groupcp.forum?g=2">Modérateurs</A><BR><STRONG></STRONG></DIV></DD> <DD class=topics>1 <DFN>Sujets</DFN></DD> <DD class=posts>3 <DFN>Messages</DFN></DD> <DD class=lastpost><SPAN>Lun 18 Jan - 18:19<BR><STRONG><A class=gensmall href="/profile.forum?mode=viewprofile&u=2"><SPAN style="COLOR: #000099" class=color-groups><STRONG>Omicron</STRONG></SPAN></A></STRONG><A class=last-post-icon href="/parler-de-tout-et-de-n-importe-quoi-f16/vous-ecoutez-quoi-comme-music-t20.htm#157"><IMG title="Vous écoutez quoi comme music?" alt="Vous écoutez quoi comme music?" src="[url=http://hitskin.com/themes/14/65/39/i_icon_latest_reply.jpg"/A/SPAN/DD/DL/LI/ULSPAN]http://hitskin.com/themes/14/65/39/i_icon_latest_reply.jpg"></A></SPAN></DD></DL></LI></UL><SPAN[/url] class=corners-bottom><SPAN></SPAN></SPAN></DIV></DIV> <UL class=linklist> <LI><A href="/search.forum?search_id=activetopics">Sujets actifs du jour</A> • </LI> <LI><A href="/memberlist.forum?mode=today_posters">Top 20 des posteurs du jour</A> • </LI> <LI class=last><A href="/memberlist.forum?mode=overall_posters">Top 20 des posteurs du forum</A></LI> <LI class=rightside><A href="/forum.htm?mode=delete_cookies">Supprimer les cookies du forum</A></LI></UL> <DIV class=h3><A href="/viewonline.htm" rel=nofollow>Qui est en ligne ?</A></DIV><IMG id=i_whosonline class=img-whois alt="Qui est en ligne ?" src="[url=http://hitskin.com/themes/14/65/39/i_whosonline.jpg]http://hitskin.com/themes/14/65/39/i_whosonline.jpg[/url]"> <P>Il y a en tout <STRONG>3</STRONG> utilisateurs en ligne :: 0 Enregistré, 0 Invisible et 3 Invités <BR>Le record du nombre d'utilisateurs en ligne est de <STRONG>8</STRONG> le Ven 15 Jan - 20:55<BR><BR>Utilisateurs enregistrés : Aucun<BR>Membres connectés au cours des 24 dernières heures : <A href="/profile.forum?mode=viewprofile&u=7"><SPAN style="COLOR: #03a82a"><STRONG>Mordicus</STRONG></SPAN></A>, <A href="/profile.forum?mode=viewprofile&u=2"><SPAN style="COLOR: #000099"><STRONG>Omicron</STRONG></SPAN></A>, <A href="/profile.forum?mode=viewprofile&u=6"><SPAN style="COLOR: #000099"><STRONG>PaulOf64</STRONG></SPAN></A><BR><BR style="LINE-HEIGHT: 5px">Aucun membre ne fête son anniversaire aujourd'hui<BR>Aucun membre ne fête son anniversaire dans les 14 prochains jours<BR><BR><EM>Légende :  [ <B><A style="COLOR: #000099" class=gensmall href="/groupcp.forum?g=2">Modérateurs</A></B> ] [ <B><A style="COLOR: #cc0202" class=gensmall href="/groupcp.forum?g=3">Membre</A></B> ] [ <B><A style="COLOR: #03a82a" class=gensmall href="/groupcp.forum?g=4">Consultant</A></B> ]</EM></P> <DIV class=clear></DIV> <DIV class=h3><A href="/stats.htm" rel=nofollow>Statistiques</A></DIV> <P class=page-bottom>Nos membres ont posté un total de <STRONG>176</STRONG> messages</P> <P class=page-bottom>Nous avons <STRONG>14</STRONG> membres enregistrés</P> <P class=page-bottom>L'utilisateur enregistré le plus récent est <STRONG><A href="/profile.forum?mode=viewprofile&u=14"><SPAN style="COLOR: #cc0202"><STRONG>hajer</STRONG></SPAN></A></STRONG></P><BR style="CLEAR: both"> <UL id=picture_legend> <LI><IMG alt="Nouveaux messages" src="[url=http://hitskin.com/themes/14/65/39/i_folder_new_big.png"Nouveaux]http://hitskin.com/themes/14/65/39/i_folder_new_big.png">Nouveaux[/url] messages</LI> <LI><IMG alt="Pas de nouveaux messages" src="[url=http://hitskin.com/themes/14/65/39/i_folder_big.png"Pas]http://hitskin.com/themes/14/65/39/i_folder_big.png">Pas[/url] de nouveaux messages</LI> <LI><IMG alt="Forum Verrouillé" src="[url=http://hitskin.com/themes/14/65/39/i_folder_locked_big.png"Forum]http://hitskin.com/themes/14/65/39/i_folder_locked_big.png">Forum[/url] Verrouillé</LI></UL></DIV></DIV></DIV></DIV> <DIV id=emptyidright></DIV></DIV></DIV></DIV></DIV> <DIV id=page-footer> <DIV class=navbar> <DIV class=inner><SPAN class=corners-top><SPAN></SPAN></SPAN> <UL class="linklist clearfix"> <LI class=footer-home><A accessKey=h class=icon-home href="/forum.htm">Accueil</A></LI> <LI class=rightside> ></LI>

Vous trouvez ça surement un peu gros ? et les formules barbares, non ?
C'est ce que je me suis dit au début,
mais en réalité ce code est ni plus ni moins que le code source de la page d'acceuil du forum (clic droit / Afficher la source).

Maintenant que je vous est montré à quoi ressemble une page Html, vous savez à quoi vous attendre: je vous avez prévenu en vous disant que une page Html contient beaucoups de balises et d'informations.

J'espère ne pas trop vous avoir dégouté pour la suite.
En tout cas, rassurez vous, apprendre ce code par coeur ne vous servirai à rien: c'est pourquoi je vais vous en tirer les éléments éssentiels.

--Commençons par le début de ce code:

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

[/code[/url]]" target="_blank" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/code[/url]]
Ligne à mettre obligatoirement en début de page de code: elle permet en effet de dire au navigateur Web qu'il doit afficher une page et qu'elle est bien conforme aux normes du W3C (organisme qui gère les normes du web et son développement).
Inutile d'apprendre ce code par coeur, un simple copié coller fonctionne.

--Puis on retrouve la balise "head" qui contient les balises "link" et "meta".

Code:: <meta name="language" content="fr" /> <meta http-equiv="content-style-type" content="text/css" />

Dans cet exemple, la balise "meta" définit la langue d'écriture, ici: content="fr" (texte écrit en français) et le type de language utilisé, ici content-style="text/css" (language pour définir les styles en CSS(on vera plus tard ce language))

Les balises "link" contiennent aussi ce même type d'information

En résumé, la balise "head" s'utilise une seule fois en début de page Html pour indiquer des infos au naviguateur (languages, langue d'écriture, police d'écriture si elle est unique dans tout le document...)

--Ensuite, il y'a la balise "html" qui prend cette forme:
Les infos à l'interieur peuvent varier

Code:: <html lang="fr" xml:lang="fr" xmlns="[url=http://www.w3.org/1999/xhtml"

[/code[/url]]" target="_blank" rel="nofollow">http://www.w3.org/1999/xhtml">[/code[/url]]

La balise se place TOUJOURS juste après la balise "doctype", car "html" défini le language de la page et elle se referme TOUJOURS à la dernière ligne du document

--Viens ensuite la balise "body".
Celle-ci se place TOUJOURS après la balise "html" et se referme TOUJOURS juste avant "html", de la manière suivante:

Code:: <html> <body> <p>votre page html</p> </body> </html>

--Nous retrouvons ensuite toutes les balises "div" de votre page qui structurent votre page.
Elle servent entre autre à mettre en place un design (avec l'aide du CSS). Je précise aussi que la majeure partie du texte que contient votre page Web se situe à l'interieur de ces balises, de la manière suivante:

Code:: <div>texte d'une partie de la page web</div>

--Pour finir dans les balises "div" nous retrouvons des balises secondaires comme "p" (on en a déjà parlé), "ul" , "li" , "h.."
Des chapitres spéciaux leurs seront consacrés pour apprendre leurs utilisations

Après un cours fatiguant, je vous propose de faire une synthèse
Le principal est de retenir ce schéma pour une page Html telle qu'elle soit:

Code:: <!DOCTYPE> <html> <head> <meta /> <link /> </head> <body> <div>texte de votre page</div> <div>texte de votre page</div> ................ <div>texte de votre page</div> </body> </html>

Ce cours sur la composition d'une page Html et ses explications se termine.
C'est s'en doute la partie du tuto la plus longue et la plus chiante: je vous l'accorde. Néamoins cette partie est extremement importante pour la suite, car je vous l'annonce la partie théorique et désormais terminée pour laisser place à la pratique

Par conséquent, je pense à présent que vous en savez assez pour creer votre propre page internet: ce sera le sujet du prochain cours, applications