bull Un site web est un ensemble de pages web heacutebergeacutees par un serveur et identifieacute par une adresse internet ( URL)

bull Les pages web sont eacutecrites en langage html puis transfeacutereacutees sur un serveur par un deacuteveloppeur web Elles contiennent des liens qui permettent le passage drsquoune page agrave lrsquoautre

Organisation drsquoun site web

Page drsquo accueil

Page 1 Page 4

Serveur

SLoutfi

bull Pour consulter un site web il est neacutecessaire dutiliser un logiciel informatique le navigateur web

bull Le rocircle du navigateur est de rendre visible sur un eacutecran le contenu drsquoune page web

bull Les navigateurs web les plus connues sont Internet explorer installeacute par deacutefaut au sein du systegraveme

dexploitation Windows Mozilla Firefox logiciel libre gratuit deacuteveloppeacute par

Mozilla Foundation Safari deacuteveloppeacute par Apple et installeacute par deacutefaut sur le

systegraveme dexploitation Mac OS X Google Chrome deacuteveloppeacute par Google ce logiciel est

gratuitement mis agrave disposition du grand public

Consulter un site web

SLoutfi

Serveurbull Un serveur est une machine sur laquelle sont installeacutes des

programmes speacutecifiques ( logiciels serveurs)bull Le serveur reccediloit une requecircte la traite et renvoie le reacutesultat aux

clients

Notion de clientserveur

SLoutfi

Clientbull Un client est une machine sur laquelle sont installeacutes des logiciels

qui utilisent les services offerts par un serveur

Notion de clientserveur

SLoutfi

Principe de fonctionnementbull Un serveur est une machine sur laquelle sont installeacutes des

programmes speacutecifiques ( logiciels serveurs)bull Le serveur reccediloit une requecircte la traite et renvoie le reacutesultat aux

clients

Notion de clientserveur

Ouverture du navigateurSaisi de lrsquoadresse du site internetEnvoi de la requecircte au serveur

Traitement de la demande par le serveurEnvoi de la page html

Traduction par le navigateur de la page reccedilueAffichage agrave lrsquoeacutecran

SLoutfi

Principaux langages web

SLoutfi

bull LHTML (HyperText Markup Language) est un langage informatique qui permet de creacuteer des pages web

bull Cest un langage de balisage dhypertexte qui permet de mettre en forme du contenu et de reacutealiser des textes qui contiennent des liens permettant de passer dun document agrave un autre

bull Les balises permettent de mettre en forme le texte et de placer des eacuteleacutements interactif tel des liens des images ou bien encore des animations Ces eacuteleacutements ne sont pas dans le code source dune page codeacute en HTML mais agrave coteacute et la page en HTML ne fait que reprendre ces eacuteleacutements

Langages web HTMLCSS JAVASCRIPT PHP

SLoutfi

Le CSS permet de mettre en forme le contenu dune page codeacute en HTML

Langages web HTMLCSS JAVASCRIPT PHP

SLoutfi

bull La plupart du temps dautres langages informatiques sont associeacutes agrave une page codeacutee en HTML

Le Javascript est un langage de programmation qui permet dapporter des ameacuteliorations au langage HTML et de dynamiser des pages web en permettant dexeacutecuter des commandes du cocircteacute client cest-agrave-dire au niveau du navigateur et non du serveur

Le PHP est un langage de programmation qui permet de produire un site web dynamique Il est exeacutecuteacute du cocircteacute serveuril geacutenegravere puis envoi au client une page web

Langages web HTMLCSS JAVASCRIPT PHP

SLoutfi

Organisation drsquoune page HTML

SLoutfi

Quels sont les outils pour creacuteer une page html

Pour creacuteer une page html il faut

bull taper le script dans un eacutediteur de texte

bull puis enregistrer le fichier avec lrsquoextension html

Lrsquoeacutediteur de texte que lrsquoon utilisera dans la suite est Notepad++

Pour voir le rendu de la page html creacuteeacutee il faut ouvrir le fichier avec le navigateur de votre choix

Organisation drsquoune page HTML

SLoutfi

Organisation drsquoune page HTML

Texte brut

Enregistrer le script ci-dessous dans un fichier lsquo montextehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_textelttitlegtltheadgt

ltbodygtBonjour ceci est ma page internetligne1 ceci est la ligne 1ligne 2 ceci est la ligne 2Ma page est imparfaite

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

Saut de ligne

Pour indiquer au navigateur qursquoil faut retourner agrave la ligne il faut utiliser la balise ltbrgt

Enregistrer le script ci-dessous dans un fichier lsquo saut_lignehtmlrsquo

lthtmlgtltheadgt

lttitlegt Saut_de_lignelttitlegtltheadgtltbodygt

Bonjour ceci est ma page internet ltbrgtligne1 ceci est la ligne 1 ltbrgtligne 2 ceci est la ligne 2 ltbrgtMa page est parfaite

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

Paragraphe Pour indiquer au navigateur le deacutebut et la fin drsquoun paragraphe il faut utiliser les balises ltpgt etltpgt Le texte est compris entre ces deux balises

Enregistrer le script ci-dessous dans un fichier lsquo paragraphehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_paragraphelttitlegtltheadgtltbodygt

ltpgtBonjour ceci est ma page internet ltpgtltpgtligne1 ceci est la ligne 1 ltpgtltpgtligne 2 ceci est la ligne 2 ltpgtltpgtMa page est parfaite ltpgt

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

A vous de faire Reacutealiser la page suivante Pour cela vous pouvez utiliser le fichier tigredoc fourni dans le dossier laquo html raquo

SLoutfi

Organisation drsquoune page HTML

Changer lrsquoaspect du textePour afficher autrement un texte il faut donner plus drsquoinstructions au navigateurLes balises pour transformer le texte sont les suivantes ltUgtltUgt texte souligneacute ltBgtltBgt texte gras ltEMgtltEMgt texte en italiqueltH1gtltH1gt texte tregraves grand ltH2gtltH2gt texte un peu moins grand ltH7gtltH7gt texte tregraves petitltFONTgtltFONTgt modifie la police de caractegravere la taille du texte et la couleur Toutes ces balises se mettent autour du texte concerneacute

Exemple Enregistrer le script ci-dessous dans un fichier lsquo change_textehtmlrsquopuis lancez le fichier

ltHTMLgt

ltHEADgt

ltTITLEgtMa page ltTITLEgt

ltHEADgt

ltBODYgt

ltPgtltUgtmon texte souligne balise ultUgtltPgt

ltPgtltSTRONGgtmon texte en gras balise strongltSTRONGgtltPgt

ltPgtltBgtmon texte en gras balise bltBgtltPgt

ltPgtltEMgtlth1gtmon texte en italique et titre balises h1et emlth1gtltEMgtltPgt

ltpgtltfont face=Times New Romansize=5 color=FF0000 gtmon texte en vertltfontgtltpgt

ltpgtet pour combiner les balises ltpgt

ltpgtltUgtltBgtltfont face=Arialsize=7 color=00FF00gtmon texteltfontgtltBgtltUgtltpgt

ltBODYgt

ltHTMLgt SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez en forme la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de page agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML

Les images Pour inseacuterer des images dans une page internet il faut tout drsquoabord disposer drsquoune image qui soit au format Gif ou JPEG ou PNGPour une simpliciteacute drsquoutilisation il vaut mieux placer cette image dans le mecircme dossier que le fichier scriptLe balise qui permet de charger une image est la balise ltimggt qui contient toujours un attribut src=rdquo rdquo (src comme source)

Enregistrer le script ci-dessous dans un fichier lsquo image1htmlrsquo puis le lancez

lthtmlgtltheadgt

lttitlegtImagelttitlegtltheadgtltbodygt ltpgtMon animale de compagnie ltpgt

ltimg src=ldquotigre1pnggtlttdgtltbodygt

lthtmlgt

SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez une image dans la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de preacutesentation agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML Les liens Les liens sont introduits gracircce agrave la balise ltagt et ltagt

Le balise ltagt contient TOUJOURS un attribut href= lsquopagepointeacuteehtmlrsquo

Enregistrer le script ci-dessous dans un fichier lsquo lien1htmlrsquo puis le lancez

NB les fichiers lien1html page1html et lienshtml doivent ecirctre placeacutes dans le mecircme reacutepertoire

lthtmlgtltheadgt

lttitlegtLienslttitlegtltheadgtltbodygt

ltpgtci dessous se trouve mon lien ltbrgtcliquez dessus pour voir la photo du tigre ltpgtlta href=image1htmlgtMa photoltagt

ltpgtci dessous se trouve mon second lien ltbrgtcliquez dessus pour voir mon tableau ltpgtlta href=mapage7htmlgtMon tableaultagt

ltpgtci dessous se trouve mon troisieme lien ltbrgtcliquez dessus pour voir mon site ltpgtlta href=httpwwwlapostenetgtMon siteltagt

ltbodygtlthtmlgt

SLoutfi

bull Pour consulter un site web il est neacutecessaire dutiliser un logiciel informatique le navigateur web

bull Le rocircle du navigateur est de rendre visible sur un eacutecran le contenu drsquoune page web

bull Les navigateurs web les plus connues sont Internet explorer installeacute par deacutefaut au sein du systegraveme

dexploitation Windows Mozilla Firefox logiciel libre gratuit deacuteveloppeacute par

Mozilla Foundation Safari deacuteveloppeacute par Apple et installeacute par deacutefaut sur le

systegraveme dexploitation Mac OS X Google Chrome deacuteveloppeacute par Google ce logiciel est

gratuitement mis agrave disposition du grand public

Consulter un site web

SLoutfi

Serveurbull Un serveur est une machine sur laquelle sont installeacutes des

programmes speacutecifiques ( logiciels serveurs)bull Le serveur reccediloit une requecircte la traite et renvoie le reacutesultat aux

clients

Notion de clientserveur

SLoutfi

Clientbull Un client est une machine sur laquelle sont installeacutes des logiciels

qui utilisent les services offerts par un serveur

Notion de clientserveur

SLoutfi

Principe de fonctionnementbull Un serveur est une machine sur laquelle sont installeacutes des

programmes speacutecifiques ( logiciels serveurs)bull Le serveur reccediloit une requecircte la traite et renvoie le reacutesultat aux

clients

Notion de clientserveur

Ouverture du navigateurSaisi de lrsquoadresse du site internetEnvoi de la requecircte au serveur

Traitement de la demande par le serveurEnvoi de la page html

Traduction par le navigateur de la page reccedilueAffichage agrave lrsquoeacutecran

SLoutfi

Principaux langages web

SLoutfi

bull LHTML (HyperText Markup Language) est un langage informatique qui permet de creacuteer des pages web

bull Cest un langage de balisage dhypertexte qui permet de mettre en forme du contenu et de reacutealiser des textes qui contiennent des liens permettant de passer dun document agrave un autre

bull Les balises permettent de mettre en forme le texte et de placer des eacuteleacutements interactif tel des liens des images ou bien encore des animations Ces eacuteleacutements ne sont pas dans le code source dune page codeacute en HTML mais agrave coteacute et la page en HTML ne fait que reprendre ces eacuteleacutements

Langages web HTMLCSS JAVASCRIPT PHP

SLoutfi

Le CSS permet de mettre en forme le contenu dune page codeacute en HTML

Langages web HTMLCSS JAVASCRIPT PHP

SLoutfi

bull La plupart du temps dautres langages informatiques sont associeacutes agrave une page codeacutee en HTML

Le Javascript est un langage de programmation qui permet dapporter des ameacuteliorations au langage HTML et de dynamiser des pages web en permettant dexeacutecuter des commandes du cocircteacute client cest-agrave-dire au niveau du navigateur et non du serveur

Le PHP est un langage de programmation qui permet de produire un site web dynamique Il est exeacutecuteacute du cocircteacute serveuril geacutenegravere puis envoi au client une page web

Langages web HTMLCSS JAVASCRIPT PHP

SLoutfi

Organisation drsquoune page HTML

SLoutfi

Quels sont les outils pour creacuteer une page html

Pour creacuteer une page html il faut

bull taper le script dans un eacutediteur de texte

bull puis enregistrer le fichier avec lrsquoextension html

Lrsquoeacutediteur de texte que lrsquoon utilisera dans la suite est Notepad++

Pour voir le rendu de la page html creacuteeacutee il faut ouvrir le fichier avec le navigateur de votre choix

Organisation drsquoune page HTML

SLoutfi

Organisation drsquoune page HTML

Texte brut

Enregistrer le script ci-dessous dans un fichier lsquo montextehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_textelttitlegtltheadgt

ltbodygtBonjour ceci est ma page internetligne1 ceci est la ligne 1ligne 2 ceci est la ligne 2Ma page est imparfaite

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

Saut de ligne

Pour indiquer au navigateur qursquoil faut retourner agrave la ligne il faut utiliser la balise ltbrgt

Enregistrer le script ci-dessous dans un fichier lsquo saut_lignehtmlrsquo

lthtmlgtltheadgt

lttitlegt Saut_de_lignelttitlegtltheadgtltbodygt

Bonjour ceci est ma page internet ltbrgtligne1 ceci est la ligne 1 ltbrgtligne 2 ceci est la ligne 2 ltbrgtMa page est parfaite

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

Paragraphe Pour indiquer au navigateur le deacutebut et la fin drsquoun paragraphe il faut utiliser les balises ltpgt etltpgt Le texte est compris entre ces deux balises

Enregistrer le script ci-dessous dans un fichier lsquo paragraphehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_paragraphelttitlegtltheadgtltbodygt

ltpgtBonjour ceci est ma page internet ltpgtltpgtligne1 ceci est la ligne 1 ltpgtltpgtligne 2 ceci est la ligne 2 ltpgtltpgtMa page est parfaite ltpgt

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

A vous de faire Reacutealiser la page suivante Pour cela vous pouvez utiliser le fichier tigredoc fourni dans le dossier laquo html raquo

SLoutfi

Organisation drsquoune page HTML

Changer lrsquoaspect du textePour afficher autrement un texte il faut donner plus drsquoinstructions au navigateurLes balises pour transformer le texte sont les suivantes ltUgtltUgt texte souligneacute ltBgtltBgt texte gras ltEMgtltEMgt texte en italiqueltH1gtltH1gt texte tregraves grand ltH2gtltH2gt texte un peu moins grand ltH7gtltH7gt texte tregraves petitltFONTgtltFONTgt modifie la police de caractegravere la taille du texte et la couleur Toutes ces balises se mettent autour du texte concerneacute

Exemple Enregistrer le script ci-dessous dans un fichier lsquo change_textehtmlrsquopuis lancez le fichier

ltHTMLgt

ltHEADgt

ltTITLEgtMa page ltTITLEgt

ltHEADgt

ltBODYgt

ltPgtltUgtmon texte souligne balise ultUgtltPgt

ltPgtltSTRONGgtmon texte en gras balise strongltSTRONGgtltPgt

ltPgtltBgtmon texte en gras balise bltBgtltPgt

ltPgtltEMgtlth1gtmon texte en italique et titre balises h1et emlth1gtltEMgtltPgt

ltpgtltfont face=Times New Romansize=5 color=FF0000 gtmon texte en vertltfontgtltpgt

ltpgtet pour combiner les balises ltpgt

ltpgtltUgtltBgtltfont face=Arialsize=7 color=00FF00gtmon texteltfontgtltBgtltUgtltpgt

ltBODYgt

ltHTMLgt SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez en forme la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de page agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML

Les images Pour inseacuterer des images dans une page internet il faut tout drsquoabord disposer drsquoune image qui soit au format Gif ou JPEG ou PNGPour une simpliciteacute drsquoutilisation il vaut mieux placer cette image dans le mecircme dossier que le fichier scriptLe balise qui permet de charger une image est la balise ltimggt qui contient toujours un attribut src=rdquo rdquo (src comme source)

Enregistrer le script ci-dessous dans un fichier lsquo image1htmlrsquo puis le lancez

lthtmlgtltheadgt

lttitlegtImagelttitlegtltheadgtltbodygt ltpgtMon animale de compagnie ltpgt

ltimg src=ldquotigre1pnggtlttdgtltbodygt

lthtmlgt

SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez une image dans la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de preacutesentation agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML Les liens Les liens sont introduits gracircce agrave la balise ltagt et ltagt

Le balise ltagt contient TOUJOURS un attribut href= lsquopagepointeacuteehtmlrsquo

Enregistrer le script ci-dessous dans un fichier lsquo lien1htmlrsquo puis le lancez

NB les fichiers lien1html page1html et lienshtml doivent ecirctre placeacutes dans le mecircme reacutepertoire

lthtmlgtltheadgt

lttitlegtLienslttitlegtltheadgtltbodygt

ltpgtci dessous se trouve mon lien ltbrgtcliquez dessus pour voir la photo du tigre ltpgtlta href=image1htmlgtMa photoltagt

ltpgtci dessous se trouve mon second lien ltbrgtcliquez dessus pour voir mon tableau ltpgtlta href=mapage7htmlgtMon tableaultagt

ltpgtci dessous se trouve mon troisieme lien ltbrgtcliquez dessus pour voir mon site ltpgtlta href=httpwwwlapostenetgtMon siteltagt

ltbodygtlthtmlgt

SLoutfi

Serveurbull Un serveur est une machine sur laquelle sont installeacutes des

programmes speacutecifiques ( logiciels serveurs)bull Le serveur reccediloit une requecircte la traite et renvoie le reacutesultat aux

clients

Notion de clientserveur

SLoutfi

Clientbull Un client est une machine sur laquelle sont installeacutes des logiciels

qui utilisent les services offerts par un serveur

Notion de clientserveur

SLoutfi

Principe de fonctionnementbull Un serveur est une machine sur laquelle sont installeacutes des

programmes speacutecifiques ( logiciels serveurs)bull Le serveur reccediloit une requecircte la traite et renvoie le reacutesultat aux

clients

Notion de clientserveur

Ouverture du navigateurSaisi de lrsquoadresse du site internetEnvoi de la requecircte au serveur

Traitement de la demande par le serveurEnvoi de la page html

Traduction par le navigateur de la page reccedilueAffichage agrave lrsquoeacutecran

SLoutfi

Principaux langages web

SLoutfi

bull LHTML (HyperText Markup Language) est un langage informatique qui permet de creacuteer des pages web

bull Cest un langage de balisage dhypertexte qui permet de mettre en forme du contenu et de reacutealiser des textes qui contiennent des liens permettant de passer dun document agrave un autre

bull Les balises permettent de mettre en forme le texte et de placer des eacuteleacutements interactif tel des liens des images ou bien encore des animations Ces eacuteleacutements ne sont pas dans le code source dune page codeacute en HTML mais agrave coteacute et la page en HTML ne fait que reprendre ces eacuteleacutements

Langages web HTMLCSS JAVASCRIPT PHP

SLoutfi

Le CSS permet de mettre en forme le contenu dune page codeacute en HTML

Langages web HTMLCSS JAVASCRIPT PHP

SLoutfi

bull La plupart du temps dautres langages informatiques sont associeacutes agrave une page codeacutee en HTML

Le Javascript est un langage de programmation qui permet dapporter des ameacuteliorations au langage HTML et de dynamiser des pages web en permettant dexeacutecuter des commandes du cocircteacute client cest-agrave-dire au niveau du navigateur et non du serveur

Le PHP est un langage de programmation qui permet de produire un site web dynamique Il est exeacutecuteacute du cocircteacute serveuril geacutenegravere puis envoi au client une page web

Langages web HTMLCSS JAVASCRIPT PHP

SLoutfi

Organisation drsquoune page HTML

SLoutfi

Quels sont les outils pour creacuteer une page html

Pour creacuteer une page html il faut

bull taper le script dans un eacutediteur de texte

bull puis enregistrer le fichier avec lrsquoextension html

Lrsquoeacutediteur de texte que lrsquoon utilisera dans la suite est Notepad++

Pour voir le rendu de la page html creacuteeacutee il faut ouvrir le fichier avec le navigateur de votre choix

Organisation drsquoune page HTML

SLoutfi

Organisation drsquoune page HTML

Texte brut

Enregistrer le script ci-dessous dans un fichier lsquo montextehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_textelttitlegtltheadgt

ltbodygtBonjour ceci est ma page internetligne1 ceci est la ligne 1ligne 2 ceci est la ligne 2Ma page est imparfaite

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

Saut de ligne

Pour indiquer au navigateur qursquoil faut retourner agrave la ligne il faut utiliser la balise ltbrgt

Enregistrer le script ci-dessous dans un fichier lsquo saut_lignehtmlrsquo

lthtmlgtltheadgt

lttitlegt Saut_de_lignelttitlegtltheadgtltbodygt

Bonjour ceci est ma page internet ltbrgtligne1 ceci est la ligne 1 ltbrgtligne 2 ceci est la ligne 2 ltbrgtMa page est parfaite

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

Paragraphe Pour indiquer au navigateur le deacutebut et la fin drsquoun paragraphe il faut utiliser les balises ltpgt etltpgt Le texte est compris entre ces deux balises

Enregistrer le script ci-dessous dans un fichier lsquo paragraphehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_paragraphelttitlegtltheadgtltbodygt

ltpgtBonjour ceci est ma page internet ltpgtltpgtligne1 ceci est la ligne 1 ltpgtltpgtligne 2 ceci est la ligne 2 ltpgtltpgtMa page est parfaite ltpgt

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

A vous de faire Reacutealiser la page suivante Pour cela vous pouvez utiliser le fichier tigredoc fourni dans le dossier laquo html raquo

SLoutfi

Organisation drsquoune page HTML

Changer lrsquoaspect du textePour afficher autrement un texte il faut donner plus drsquoinstructions au navigateurLes balises pour transformer le texte sont les suivantes ltUgtltUgt texte souligneacute ltBgtltBgt texte gras ltEMgtltEMgt texte en italiqueltH1gtltH1gt texte tregraves grand ltH2gtltH2gt texte un peu moins grand ltH7gtltH7gt texte tregraves petitltFONTgtltFONTgt modifie la police de caractegravere la taille du texte et la couleur Toutes ces balises se mettent autour du texte concerneacute

Exemple Enregistrer le script ci-dessous dans un fichier lsquo change_textehtmlrsquopuis lancez le fichier

ltHTMLgt

ltHEADgt

ltTITLEgtMa page ltTITLEgt

ltHEADgt

ltBODYgt

ltPgtltUgtmon texte souligne balise ultUgtltPgt

ltPgtltSTRONGgtmon texte en gras balise strongltSTRONGgtltPgt

ltPgtltBgtmon texte en gras balise bltBgtltPgt

ltPgtltEMgtlth1gtmon texte en italique et titre balises h1et emlth1gtltEMgtltPgt

ltpgtltfont face=Times New Romansize=5 color=FF0000 gtmon texte en vertltfontgtltpgt

ltpgtet pour combiner les balises ltpgt

ltpgtltUgtltBgtltfont face=Arialsize=7 color=00FF00gtmon texteltfontgtltBgtltUgtltpgt

ltBODYgt

ltHTMLgt SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez en forme la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de page agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML

Les images Pour inseacuterer des images dans une page internet il faut tout drsquoabord disposer drsquoune image qui soit au format Gif ou JPEG ou PNGPour une simpliciteacute drsquoutilisation il vaut mieux placer cette image dans le mecircme dossier que le fichier scriptLe balise qui permet de charger une image est la balise ltimggt qui contient toujours un attribut src=rdquo rdquo (src comme source)

Enregistrer le script ci-dessous dans un fichier lsquo image1htmlrsquo puis le lancez

lthtmlgtltheadgt

lttitlegtImagelttitlegtltheadgtltbodygt ltpgtMon animale de compagnie ltpgt

ltimg src=ldquotigre1pnggtlttdgtltbodygt

lthtmlgt

SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez une image dans la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de preacutesentation agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML Les liens Les liens sont introduits gracircce agrave la balise ltagt et ltagt

Le balise ltagt contient TOUJOURS un attribut href= lsquopagepointeacuteehtmlrsquo

Enregistrer le script ci-dessous dans un fichier lsquo lien1htmlrsquo puis le lancez

NB les fichiers lien1html page1html et lienshtml doivent ecirctre placeacutes dans le mecircme reacutepertoire

lthtmlgtltheadgt

lttitlegtLienslttitlegtltheadgtltbodygt

ltpgtci dessous se trouve mon lien ltbrgtcliquez dessus pour voir la photo du tigre ltpgtlta href=image1htmlgtMa photoltagt

ltpgtci dessous se trouve mon second lien ltbrgtcliquez dessus pour voir mon tableau ltpgtlta href=mapage7htmlgtMon tableaultagt

ltpgtci dessous se trouve mon troisieme lien ltbrgtcliquez dessus pour voir mon site ltpgtlta href=httpwwwlapostenetgtMon siteltagt

ltbodygtlthtmlgt

SLoutfi

Clientbull Un client est une machine sur laquelle sont installeacutes des logiciels

qui utilisent les services offerts par un serveur

Notion de clientserveur

SLoutfi

Principe de fonctionnementbull Un serveur est une machine sur laquelle sont installeacutes des

programmes speacutecifiques ( logiciels serveurs)bull Le serveur reccediloit une requecircte la traite et renvoie le reacutesultat aux

clients

Notion de clientserveur

Ouverture du navigateurSaisi de lrsquoadresse du site internetEnvoi de la requecircte au serveur

Traitement de la demande par le serveurEnvoi de la page html

Traduction par le navigateur de la page reccedilueAffichage agrave lrsquoeacutecran

SLoutfi

Principaux langages web

SLoutfi

bull LHTML (HyperText Markup Language) est un langage informatique qui permet de creacuteer des pages web

bull Cest un langage de balisage dhypertexte qui permet de mettre en forme du contenu et de reacutealiser des textes qui contiennent des liens permettant de passer dun document agrave un autre

bull Les balises permettent de mettre en forme le texte et de placer des eacuteleacutements interactif tel des liens des images ou bien encore des animations Ces eacuteleacutements ne sont pas dans le code source dune page codeacute en HTML mais agrave coteacute et la page en HTML ne fait que reprendre ces eacuteleacutements

Langages web HTMLCSS JAVASCRIPT PHP

SLoutfi

Le CSS permet de mettre en forme le contenu dune page codeacute en HTML

Langages web HTMLCSS JAVASCRIPT PHP

SLoutfi

bull La plupart du temps dautres langages informatiques sont associeacutes agrave une page codeacutee en HTML

Le Javascript est un langage de programmation qui permet dapporter des ameacuteliorations au langage HTML et de dynamiser des pages web en permettant dexeacutecuter des commandes du cocircteacute client cest-agrave-dire au niveau du navigateur et non du serveur

Le PHP est un langage de programmation qui permet de produire un site web dynamique Il est exeacutecuteacute du cocircteacute serveuril geacutenegravere puis envoi au client une page web

Langages web HTMLCSS JAVASCRIPT PHP

SLoutfi

Organisation drsquoune page HTML

SLoutfi

Quels sont les outils pour creacuteer une page html

Pour creacuteer une page html il faut

bull taper le script dans un eacutediteur de texte

bull puis enregistrer le fichier avec lrsquoextension html

Lrsquoeacutediteur de texte que lrsquoon utilisera dans la suite est Notepad++

Pour voir le rendu de la page html creacuteeacutee il faut ouvrir le fichier avec le navigateur de votre choix

Organisation drsquoune page HTML

SLoutfi

Organisation drsquoune page HTML

Texte brut

Enregistrer le script ci-dessous dans un fichier lsquo montextehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_textelttitlegtltheadgt

ltbodygtBonjour ceci est ma page internetligne1 ceci est la ligne 1ligne 2 ceci est la ligne 2Ma page est imparfaite

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

Saut de ligne

Pour indiquer au navigateur qursquoil faut retourner agrave la ligne il faut utiliser la balise ltbrgt

Enregistrer le script ci-dessous dans un fichier lsquo saut_lignehtmlrsquo

lthtmlgtltheadgt

lttitlegt Saut_de_lignelttitlegtltheadgtltbodygt

Bonjour ceci est ma page internet ltbrgtligne1 ceci est la ligne 1 ltbrgtligne 2 ceci est la ligne 2 ltbrgtMa page est parfaite

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

Paragraphe Pour indiquer au navigateur le deacutebut et la fin drsquoun paragraphe il faut utiliser les balises ltpgt etltpgt Le texte est compris entre ces deux balises

Enregistrer le script ci-dessous dans un fichier lsquo paragraphehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_paragraphelttitlegtltheadgtltbodygt

ltpgtBonjour ceci est ma page internet ltpgtltpgtligne1 ceci est la ligne 1 ltpgtltpgtligne 2 ceci est la ligne 2 ltpgtltpgtMa page est parfaite ltpgt

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

A vous de faire Reacutealiser la page suivante Pour cela vous pouvez utiliser le fichier tigredoc fourni dans le dossier laquo html raquo

SLoutfi

Organisation drsquoune page HTML

Changer lrsquoaspect du textePour afficher autrement un texte il faut donner plus drsquoinstructions au navigateurLes balises pour transformer le texte sont les suivantes ltUgtltUgt texte souligneacute ltBgtltBgt texte gras ltEMgtltEMgt texte en italiqueltH1gtltH1gt texte tregraves grand ltH2gtltH2gt texte un peu moins grand ltH7gtltH7gt texte tregraves petitltFONTgtltFONTgt modifie la police de caractegravere la taille du texte et la couleur Toutes ces balises se mettent autour du texte concerneacute

Exemple Enregistrer le script ci-dessous dans un fichier lsquo change_textehtmlrsquopuis lancez le fichier

ltHTMLgt

ltHEADgt

ltTITLEgtMa page ltTITLEgt

ltHEADgt

ltBODYgt

ltPgtltUgtmon texte souligne balise ultUgtltPgt

ltPgtltSTRONGgtmon texte en gras balise strongltSTRONGgtltPgt

ltPgtltBgtmon texte en gras balise bltBgtltPgt

ltPgtltEMgtlth1gtmon texte en italique et titre balises h1et emlth1gtltEMgtltPgt

ltpgtltfont face=Times New Romansize=5 color=FF0000 gtmon texte en vertltfontgtltpgt

ltpgtet pour combiner les balises ltpgt

ltpgtltUgtltBgtltfont face=Arialsize=7 color=00FF00gtmon texteltfontgtltBgtltUgtltpgt

ltBODYgt

ltHTMLgt SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez en forme la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de page agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML

Les images Pour inseacuterer des images dans une page internet il faut tout drsquoabord disposer drsquoune image qui soit au format Gif ou JPEG ou PNGPour une simpliciteacute drsquoutilisation il vaut mieux placer cette image dans le mecircme dossier que le fichier scriptLe balise qui permet de charger une image est la balise ltimggt qui contient toujours un attribut src=rdquo rdquo (src comme source)

Enregistrer le script ci-dessous dans un fichier lsquo image1htmlrsquo puis le lancez

lthtmlgtltheadgt

lttitlegtImagelttitlegtltheadgtltbodygt ltpgtMon animale de compagnie ltpgt

ltimg src=ldquotigre1pnggtlttdgtltbodygt

lthtmlgt

SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez une image dans la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de preacutesentation agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML Les liens Les liens sont introduits gracircce agrave la balise ltagt et ltagt

Le balise ltagt contient TOUJOURS un attribut href= lsquopagepointeacuteehtmlrsquo

Enregistrer le script ci-dessous dans un fichier lsquo lien1htmlrsquo puis le lancez

NB les fichiers lien1html page1html et lienshtml doivent ecirctre placeacutes dans le mecircme reacutepertoire

lthtmlgtltheadgt

lttitlegtLienslttitlegtltheadgtltbodygt

ltpgtci dessous se trouve mon lien ltbrgtcliquez dessus pour voir la photo du tigre ltpgtlta href=image1htmlgtMa photoltagt

ltpgtci dessous se trouve mon second lien ltbrgtcliquez dessus pour voir mon tableau ltpgtlta href=mapage7htmlgtMon tableaultagt

ltpgtci dessous se trouve mon troisieme lien ltbrgtcliquez dessus pour voir mon site ltpgtlta href=httpwwwlapostenetgtMon siteltagt

ltbodygtlthtmlgt

SLoutfi

Principe de fonctionnementbull Un serveur est une machine sur laquelle sont installeacutes des

programmes speacutecifiques ( logiciels serveurs)bull Le serveur reccediloit une requecircte la traite et renvoie le reacutesultat aux

clients

Notion de clientserveur

Ouverture du navigateurSaisi de lrsquoadresse du site internetEnvoi de la requecircte au serveur

Traitement de la demande par le serveurEnvoi de la page html

Traduction par le navigateur de la page reccedilueAffichage agrave lrsquoeacutecran

SLoutfi

Principaux langages web

SLoutfi

bull LHTML (HyperText Markup Language) est un langage informatique qui permet de creacuteer des pages web

bull Cest un langage de balisage dhypertexte qui permet de mettre en forme du contenu et de reacutealiser des textes qui contiennent des liens permettant de passer dun document agrave un autre

bull Les balises permettent de mettre en forme le texte et de placer des eacuteleacutements interactif tel des liens des images ou bien encore des animations Ces eacuteleacutements ne sont pas dans le code source dune page codeacute en HTML mais agrave coteacute et la page en HTML ne fait que reprendre ces eacuteleacutements

Langages web HTMLCSS JAVASCRIPT PHP

SLoutfi

Le CSS permet de mettre en forme le contenu dune page codeacute en HTML

Langages web HTMLCSS JAVASCRIPT PHP

SLoutfi

bull La plupart du temps dautres langages informatiques sont associeacutes agrave une page codeacutee en HTML

Le Javascript est un langage de programmation qui permet dapporter des ameacuteliorations au langage HTML et de dynamiser des pages web en permettant dexeacutecuter des commandes du cocircteacute client cest-agrave-dire au niveau du navigateur et non du serveur

Le PHP est un langage de programmation qui permet de produire un site web dynamique Il est exeacutecuteacute du cocircteacute serveuril geacutenegravere puis envoi au client une page web

Langages web HTMLCSS JAVASCRIPT PHP

SLoutfi

Organisation drsquoune page HTML

SLoutfi

Quels sont les outils pour creacuteer une page html

Pour creacuteer une page html il faut

bull taper le script dans un eacutediteur de texte

bull puis enregistrer le fichier avec lrsquoextension html

Lrsquoeacutediteur de texte que lrsquoon utilisera dans la suite est Notepad++

Pour voir le rendu de la page html creacuteeacutee il faut ouvrir le fichier avec le navigateur de votre choix

Organisation drsquoune page HTML

SLoutfi

Organisation drsquoune page HTML

Texte brut

Enregistrer le script ci-dessous dans un fichier lsquo montextehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_textelttitlegtltheadgt

ltbodygtBonjour ceci est ma page internetligne1 ceci est la ligne 1ligne 2 ceci est la ligne 2Ma page est imparfaite

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

Saut de ligne

Pour indiquer au navigateur qursquoil faut retourner agrave la ligne il faut utiliser la balise ltbrgt

Enregistrer le script ci-dessous dans un fichier lsquo saut_lignehtmlrsquo

lthtmlgtltheadgt

lttitlegt Saut_de_lignelttitlegtltheadgtltbodygt

Bonjour ceci est ma page internet ltbrgtligne1 ceci est la ligne 1 ltbrgtligne 2 ceci est la ligne 2 ltbrgtMa page est parfaite

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

Paragraphe Pour indiquer au navigateur le deacutebut et la fin drsquoun paragraphe il faut utiliser les balises ltpgt etltpgt Le texte est compris entre ces deux balises

Enregistrer le script ci-dessous dans un fichier lsquo paragraphehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_paragraphelttitlegtltheadgtltbodygt

ltpgtBonjour ceci est ma page internet ltpgtltpgtligne1 ceci est la ligne 1 ltpgtltpgtligne 2 ceci est la ligne 2 ltpgtltpgtMa page est parfaite ltpgt

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

A vous de faire Reacutealiser la page suivante Pour cela vous pouvez utiliser le fichier tigredoc fourni dans le dossier laquo html raquo

SLoutfi

Organisation drsquoune page HTML

Changer lrsquoaspect du textePour afficher autrement un texte il faut donner plus drsquoinstructions au navigateurLes balises pour transformer le texte sont les suivantes ltUgtltUgt texte souligneacute ltBgtltBgt texte gras ltEMgtltEMgt texte en italiqueltH1gtltH1gt texte tregraves grand ltH2gtltH2gt texte un peu moins grand ltH7gtltH7gt texte tregraves petitltFONTgtltFONTgt modifie la police de caractegravere la taille du texte et la couleur Toutes ces balises se mettent autour du texte concerneacute

Exemple Enregistrer le script ci-dessous dans un fichier lsquo change_textehtmlrsquopuis lancez le fichier

ltHTMLgt

ltHEADgt

ltTITLEgtMa page ltTITLEgt

ltHEADgt

ltBODYgt

ltPgtltUgtmon texte souligne balise ultUgtltPgt

ltPgtltSTRONGgtmon texte en gras balise strongltSTRONGgtltPgt

ltPgtltBgtmon texte en gras balise bltBgtltPgt

ltPgtltEMgtlth1gtmon texte en italique et titre balises h1et emlth1gtltEMgtltPgt

ltpgtltfont face=Times New Romansize=5 color=FF0000 gtmon texte en vertltfontgtltpgt

ltpgtet pour combiner les balises ltpgt

ltpgtltUgtltBgtltfont face=Arialsize=7 color=00FF00gtmon texteltfontgtltBgtltUgtltpgt

ltBODYgt

ltHTMLgt SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez en forme la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de page agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML

Les images Pour inseacuterer des images dans une page internet il faut tout drsquoabord disposer drsquoune image qui soit au format Gif ou JPEG ou PNGPour une simpliciteacute drsquoutilisation il vaut mieux placer cette image dans le mecircme dossier que le fichier scriptLe balise qui permet de charger une image est la balise ltimggt qui contient toujours un attribut src=rdquo rdquo (src comme source)

Enregistrer le script ci-dessous dans un fichier lsquo image1htmlrsquo puis le lancez

lthtmlgtltheadgt

lttitlegtImagelttitlegtltheadgtltbodygt ltpgtMon animale de compagnie ltpgt

ltimg src=ldquotigre1pnggtlttdgtltbodygt

lthtmlgt

SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez une image dans la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de preacutesentation agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML Les liens Les liens sont introduits gracircce agrave la balise ltagt et ltagt

Le balise ltagt contient TOUJOURS un attribut href= lsquopagepointeacuteehtmlrsquo

Enregistrer le script ci-dessous dans un fichier lsquo lien1htmlrsquo puis le lancez

NB les fichiers lien1html page1html et lienshtml doivent ecirctre placeacutes dans le mecircme reacutepertoire

lthtmlgtltheadgt

lttitlegtLienslttitlegtltheadgtltbodygt

ltpgtci dessous se trouve mon lien ltbrgtcliquez dessus pour voir la photo du tigre ltpgtlta href=image1htmlgtMa photoltagt

ltpgtci dessous se trouve mon second lien ltbrgtcliquez dessus pour voir mon tableau ltpgtlta href=mapage7htmlgtMon tableaultagt

ltpgtci dessous se trouve mon troisieme lien ltbrgtcliquez dessus pour voir mon site ltpgtlta href=httpwwwlapostenetgtMon siteltagt

ltbodygtlthtmlgt

SLoutfi

Principaux langages web

SLoutfi

bull LHTML (HyperText Markup Language) est un langage informatique qui permet de creacuteer des pages web

bull Cest un langage de balisage dhypertexte qui permet de mettre en forme du contenu et de reacutealiser des textes qui contiennent des liens permettant de passer dun document agrave un autre

bull Les balises permettent de mettre en forme le texte et de placer des eacuteleacutements interactif tel des liens des images ou bien encore des animations Ces eacuteleacutements ne sont pas dans le code source dune page codeacute en HTML mais agrave coteacute et la page en HTML ne fait que reprendre ces eacuteleacutements

Langages web HTMLCSS JAVASCRIPT PHP

SLoutfi

Le CSS permet de mettre en forme le contenu dune page codeacute en HTML

Langages web HTMLCSS JAVASCRIPT PHP

SLoutfi

bull La plupart du temps dautres langages informatiques sont associeacutes agrave une page codeacutee en HTML

Le Javascript est un langage de programmation qui permet dapporter des ameacuteliorations au langage HTML et de dynamiser des pages web en permettant dexeacutecuter des commandes du cocircteacute client cest-agrave-dire au niveau du navigateur et non du serveur

Le PHP est un langage de programmation qui permet de produire un site web dynamique Il est exeacutecuteacute du cocircteacute serveuril geacutenegravere puis envoi au client une page web

Langages web HTMLCSS JAVASCRIPT PHP

SLoutfi

Organisation drsquoune page HTML

SLoutfi

Quels sont les outils pour creacuteer une page html

Pour creacuteer une page html il faut

bull taper le script dans un eacutediteur de texte

bull puis enregistrer le fichier avec lrsquoextension html

Lrsquoeacutediteur de texte que lrsquoon utilisera dans la suite est Notepad++

Pour voir le rendu de la page html creacuteeacutee il faut ouvrir le fichier avec le navigateur de votre choix

Organisation drsquoune page HTML

SLoutfi

Organisation drsquoune page HTML

Texte brut

Enregistrer le script ci-dessous dans un fichier lsquo montextehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_textelttitlegtltheadgt

ltbodygtBonjour ceci est ma page internetligne1 ceci est la ligne 1ligne 2 ceci est la ligne 2Ma page est imparfaite

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

Saut de ligne

Pour indiquer au navigateur qursquoil faut retourner agrave la ligne il faut utiliser la balise ltbrgt

Enregistrer le script ci-dessous dans un fichier lsquo saut_lignehtmlrsquo

lthtmlgtltheadgt

lttitlegt Saut_de_lignelttitlegtltheadgtltbodygt

Bonjour ceci est ma page internet ltbrgtligne1 ceci est la ligne 1 ltbrgtligne 2 ceci est la ligne 2 ltbrgtMa page est parfaite

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

Paragraphe Pour indiquer au navigateur le deacutebut et la fin drsquoun paragraphe il faut utiliser les balises ltpgt etltpgt Le texte est compris entre ces deux balises

Enregistrer le script ci-dessous dans un fichier lsquo paragraphehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_paragraphelttitlegtltheadgtltbodygt

ltpgtBonjour ceci est ma page internet ltpgtltpgtligne1 ceci est la ligne 1 ltpgtltpgtligne 2 ceci est la ligne 2 ltpgtltpgtMa page est parfaite ltpgt

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

A vous de faire Reacutealiser la page suivante Pour cela vous pouvez utiliser le fichier tigredoc fourni dans le dossier laquo html raquo

SLoutfi

Organisation drsquoune page HTML

Changer lrsquoaspect du textePour afficher autrement un texte il faut donner plus drsquoinstructions au navigateurLes balises pour transformer le texte sont les suivantes ltUgtltUgt texte souligneacute ltBgtltBgt texte gras ltEMgtltEMgt texte en italiqueltH1gtltH1gt texte tregraves grand ltH2gtltH2gt texte un peu moins grand ltH7gtltH7gt texte tregraves petitltFONTgtltFONTgt modifie la police de caractegravere la taille du texte et la couleur Toutes ces balises se mettent autour du texte concerneacute

Exemple Enregistrer le script ci-dessous dans un fichier lsquo change_textehtmlrsquopuis lancez le fichier

ltHTMLgt

ltHEADgt

ltTITLEgtMa page ltTITLEgt

ltHEADgt

ltBODYgt

ltPgtltUgtmon texte souligne balise ultUgtltPgt

ltPgtltSTRONGgtmon texte en gras balise strongltSTRONGgtltPgt

ltPgtltBgtmon texte en gras balise bltBgtltPgt

ltPgtltEMgtlth1gtmon texte en italique et titre balises h1et emlth1gtltEMgtltPgt

ltpgtltfont face=Times New Romansize=5 color=FF0000 gtmon texte en vertltfontgtltpgt

ltpgtet pour combiner les balises ltpgt

ltpgtltUgtltBgtltfont face=Arialsize=7 color=00FF00gtmon texteltfontgtltBgtltUgtltpgt

ltBODYgt

ltHTMLgt SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez en forme la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de page agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML

Les images Pour inseacuterer des images dans une page internet il faut tout drsquoabord disposer drsquoune image qui soit au format Gif ou JPEG ou PNGPour une simpliciteacute drsquoutilisation il vaut mieux placer cette image dans le mecircme dossier que le fichier scriptLe balise qui permet de charger une image est la balise ltimggt qui contient toujours un attribut src=rdquo rdquo (src comme source)

Enregistrer le script ci-dessous dans un fichier lsquo image1htmlrsquo puis le lancez

lthtmlgtltheadgt

lttitlegtImagelttitlegtltheadgtltbodygt ltpgtMon animale de compagnie ltpgt

ltimg src=ldquotigre1pnggtlttdgtltbodygt

lthtmlgt

SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez une image dans la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de preacutesentation agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML Les liens Les liens sont introduits gracircce agrave la balise ltagt et ltagt

Le balise ltagt contient TOUJOURS un attribut href= lsquopagepointeacuteehtmlrsquo

Enregistrer le script ci-dessous dans un fichier lsquo lien1htmlrsquo puis le lancez

NB les fichiers lien1html page1html et lienshtml doivent ecirctre placeacutes dans le mecircme reacutepertoire

lthtmlgtltheadgt

lttitlegtLienslttitlegtltheadgtltbodygt

ltpgtci dessous se trouve mon lien ltbrgtcliquez dessus pour voir la photo du tigre ltpgtlta href=image1htmlgtMa photoltagt

ltpgtci dessous se trouve mon second lien ltbrgtcliquez dessus pour voir mon tableau ltpgtlta href=mapage7htmlgtMon tableaultagt

ltpgtci dessous se trouve mon troisieme lien ltbrgtcliquez dessus pour voir mon site ltpgtlta href=httpwwwlapostenetgtMon siteltagt

ltbodygtlthtmlgt

SLoutfi

bull LHTML (HyperText Markup Language) est un langage informatique qui permet de creacuteer des pages web

bull Cest un langage de balisage dhypertexte qui permet de mettre en forme du contenu et de reacutealiser des textes qui contiennent des liens permettant de passer dun document agrave un autre

bull Les balises permettent de mettre en forme le texte et de placer des eacuteleacutements interactif tel des liens des images ou bien encore des animations Ces eacuteleacutements ne sont pas dans le code source dune page codeacute en HTML mais agrave coteacute et la page en HTML ne fait que reprendre ces eacuteleacutements

Langages web HTMLCSS JAVASCRIPT PHP

SLoutfi

Le CSS permet de mettre en forme le contenu dune page codeacute en HTML

Langages web HTMLCSS JAVASCRIPT PHP

SLoutfi

bull La plupart du temps dautres langages informatiques sont associeacutes agrave une page codeacutee en HTML

Le Javascript est un langage de programmation qui permet dapporter des ameacuteliorations au langage HTML et de dynamiser des pages web en permettant dexeacutecuter des commandes du cocircteacute client cest-agrave-dire au niveau du navigateur et non du serveur

Le PHP est un langage de programmation qui permet de produire un site web dynamique Il est exeacutecuteacute du cocircteacute serveuril geacutenegravere puis envoi au client une page web

Langages web HTMLCSS JAVASCRIPT PHP

SLoutfi

Organisation drsquoune page HTML

SLoutfi

Quels sont les outils pour creacuteer une page html

Pour creacuteer une page html il faut

bull taper le script dans un eacutediteur de texte

bull puis enregistrer le fichier avec lrsquoextension html

Lrsquoeacutediteur de texte que lrsquoon utilisera dans la suite est Notepad++

Pour voir le rendu de la page html creacuteeacutee il faut ouvrir le fichier avec le navigateur de votre choix

Organisation drsquoune page HTML

SLoutfi

Organisation drsquoune page HTML

Texte brut

Enregistrer le script ci-dessous dans un fichier lsquo montextehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_textelttitlegtltheadgt

ltbodygtBonjour ceci est ma page internetligne1 ceci est la ligne 1ligne 2 ceci est la ligne 2Ma page est imparfaite

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

Saut de ligne

Pour indiquer au navigateur qursquoil faut retourner agrave la ligne il faut utiliser la balise ltbrgt

Enregistrer le script ci-dessous dans un fichier lsquo saut_lignehtmlrsquo

lthtmlgtltheadgt

lttitlegt Saut_de_lignelttitlegtltheadgtltbodygt

Bonjour ceci est ma page internet ltbrgtligne1 ceci est la ligne 1 ltbrgtligne 2 ceci est la ligne 2 ltbrgtMa page est parfaite

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

Paragraphe Pour indiquer au navigateur le deacutebut et la fin drsquoun paragraphe il faut utiliser les balises ltpgt etltpgt Le texte est compris entre ces deux balises

Enregistrer le script ci-dessous dans un fichier lsquo paragraphehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_paragraphelttitlegtltheadgtltbodygt

ltpgtBonjour ceci est ma page internet ltpgtltpgtligne1 ceci est la ligne 1 ltpgtltpgtligne 2 ceci est la ligne 2 ltpgtltpgtMa page est parfaite ltpgt

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

A vous de faire Reacutealiser la page suivante Pour cela vous pouvez utiliser le fichier tigredoc fourni dans le dossier laquo html raquo

SLoutfi

Organisation drsquoune page HTML

Changer lrsquoaspect du textePour afficher autrement un texte il faut donner plus drsquoinstructions au navigateurLes balises pour transformer le texte sont les suivantes ltUgtltUgt texte souligneacute ltBgtltBgt texte gras ltEMgtltEMgt texte en italiqueltH1gtltH1gt texte tregraves grand ltH2gtltH2gt texte un peu moins grand ltH7gtltH7gt texte tregraves petitltFONTgtltFONTgt modifie la police de caractegravere la taille du texte et la couleur Toutes ces balises se mettent autour du texte concerneacute

Exemple Enregistrer le script ci-dessous dans un fichier lsquo change_textehtmlrsquopuis lancez le fichier

ltHTMLgt

ltHEADgt

ltTITLEgtMa page ltTITLEgt

ltHEADgt

ltBODYgt

ltPgtltUgtmon texte souligne balise ultUgtltPgt

ltPgtltSTRONGgtmon texte en gras balise strongltSTRONGgtltPgt

ltPgtltBgtmon texte en gras balise bltBgtltPgt

ltPgtltEMgtlth1gtmon texte en italique et titre balises h1et emlth1gtltEMgtltPgt

ltpgtltfont face=Times New Romansize=5 color=FF0000 gtmon texte en vertltfontgtltpgt

ltpgtet pour combiner les balises ltpgt

ltpgtltUgtltBgtltfont face=Arialsize=7 color=00FF00gtmon texteltfontgtltBgtltUgtltpgt

ltBODYgt

ltHTMLgt SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez en forme la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de page agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML

Les images Pour inseacuterer des images dans une page internet il faut tout drsquoabord disposer drsquoune image qui soit au format Gif ou JPEG ou PNGPour une simpliciteacute drsquoutilisation il vaut mieux placer cette image dans le mecircme dossier que le fichier scriptLe balise qui permet de charger une image est la balise ltimggt qui contient toujours un attribut src=rdquo rdquo (src comme source)

Enregistrer le script ci-dessous dans un fichier lsquo image1htmlrsquo puis le lancez

lthtmlgtltheadgt

lttitlegtImagelttitlegtltheadgtltbodygt ltpgtMon animale de compagnie ltpgt

ltimg src=ldquotigre1pnggtlttdgtltbodygt

lthtmlgt

SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez une image dans la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de preacutesentation agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML Les liens Les liens sont introduits gracircce agrave la balise ltagt et ltagt

Le balise ltagt contient TOUJOURS un attribut href= lsquopagepointeacuteehtmlrsquo

Enregistrer le script ci-dessous dans un fichier lsquo lien1htmlrsquo puis le lancez

NB les fichiers lien1html page1html et lienshtml doivent ecirctre placeacutes dans le mecircme reacutepertoire

lthtmlgtltheadgt

lttitlegtLienslttitlegtltheadgtltbodygt

ltpgtci dessous se trouve mon lien ltbrgtcliquez dessus pour voir la photo du tigre ltpgtlta href=image1htmlgtMa photoltagt

ltpgtci dessous se trouve mon second lien ltbrgtcliquez dessus pour voir mon tableau ltpgtlta href=mapage7htmlgtMon tableaultagt

ltpgtci dessous se trouve mon troisieme lien ltbrgtcliquez dessus pour voir mon site ltpgtlta href=httpwwwlapostenetgtMon siteltagt

ltbodygtlthtmlgt

SLoutfi

Le CSS permet de mettre en forme le contenu dune page codeacute en HTML

Langages web HTMLCSS JAVASCRIPT PHP

SLoutfi

bull La plupart du temps dautres langages informatiques sont associeacutes agrave une page codeacutee en HTML

Le Javascript est un langage de programmation qui permet dapporter des ameacuteliorations au langage HTML et de dynamiser des pages web en permettant dexeacutecuter des commandes du cocircteacute client cest-agrave-dire au niveau du navigateur et non du serveur

Le PHP est un langage de programmation qui permet de produire un site web dynamique Il est exeacutecuteacute du cocircteacute serveuril geacutenegravere puis envoi au client une page web

Langages web HTMLCSS JAVASCRIPT PHP

SLoutfi

Organisation drsquoune page HTML

SLoutfi

Quels sont les outils pour creacuteer une page html

Pour creacuteer une page html il faut

bull taper le script dans un eacutediteur de texte

bull puis enregistrer le fichier avec lrsquoextension html

Lrsquoeacutediteur de texte que lrsquoon utilisera dans la suite est Notepad++

Pour voir le rendu de la page html creacuteeacutee il faut ouvrir le fichier avec le navigateur de votre choix

Organisation drsquoune page HTML

SLoutfi

Organisation drsquoune page HTML

Texte brut

Enregistrer le script ci-dessous dans un fichier lsquo montextehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_textelttitlegtltheadgt

ltbodygtBonjour ceci est ma page internetligne1 ceci est la ligne 1ligne 2 ceci est la ligne 2Ma page est imparfaite

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

Saut de ligne

Pour indiquer au navigateur qursquoil faut retourner agrave la ligne il faut utiliser la balise ltbrgt

Enregistrer le script ci-dessous dans un fichier lsquo saut_lignehtmlrsquo

lthtmlgtltheadgt

lttitlegt Saut_de_lignelttitlegtltheadgtltbodygt

Bonjour ceci est ma page internet ltbrgtligne1 ceci est la ligne 1 ltbrgtligne 2 ceci est la ligne 2 ltbrgtMa page est parfaite

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

Paragraphe Pour indiquer au navigateur le deacutebut et la fin drsquoun paragraphe il faut utiliser les balises ltpgt etltpgt Le texte est compris entre ces deux balises

Enregistrer le script ci-dessous dans un fichier lsquo paragraphehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_paragraphelttitlegtltheadgtltbodygt

ltpgtBonjour ceci est ma page internet ltpgtltpgtligne1 ceci est la ligne 1 ltpgtltpgtligne 2 ceci est la ligne 2 ltpgtltpgtMa page est parfaite ltpgt

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

A vous de faire Reacutealiser la page suivante Pour cela vous pouvez utiliser le fichier tigredoc fourni dans le dossier laquo html raquo

SLoutfi

Organisation drsquoune page HTML

Changer lrsquoaspect du textePour afficher autrement un texte il faut donner plus drsquoinstructions au navigateurLes balises pour transformer le texte sont les suivantes ltUgtltUgt texte souligneacute ltBgtltBgt texte gras ltEMgtltEMgt texte en italiqueltH1gtltH1gt texte tregraves grand ltH2gtltH2gt texte un peu moins grand ltH7gtltH7gt texte tregraves petitltFONTgtltFONTgt modifie la police de caractegravere la taille du texte et la couleur Toutes ces balises se mettent autour du texte concerneacute

Exemple Enregistrer le script ci-dessous dans un fichier lsquo change_textehtmlrsquopuis lancez le fichier

ltHTMLgt

ltHEADgt

ltTITLEgtMa page ltTITLEgt

ltHEADgt

ltBODYgt

ltPgtltUgtmon texte souligne balise ultUgtltPgt

ltPgtltSTRONGgtmon texte en gras balise strongltSTRONGgtltPgt

ltPgtltBgtmon texte en gras balise bltBgtltPgt

ltPgtltEMgtlth1gtmon texte en italique et titre balises h1et emlth1gtltEMgtltPgt

ltpgtltfont face=Times New Romansize=5 color=FF0000 gtmon texte en vertltfontgtltpgt

ltpgtet pour combiner les balises ltpgt

ltpgtltUgtltBgtltfont face=Arialsize=7 color=00FF00gtmon texteltfontgtltBgtltUgtltpgt

ltBODYgt

ltHTMLgt SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez en forme la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de page agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML

Les images Pour inseacuterer des images dans une page internet il faut tout drsquoabord disposer drsquoune image qui soit au format Gif ou JPEG ou PNGPour une simpliciteacute drsquoutilisation il vaut mieux placer cette image dans le mecircme dossier que le fichier scriptLe balise qui permet de charger une image est la balise ltimggt qui contient toujours un attribut src=rdquo rdquo (src comme source)

Enregistrer le script ci-dessous dans un fichier lsquo image1htmlrsquo puis le lancez

lthtmlgtltheadgt

lttitlegtImagelttitlegtltheadgtltbodygt ltpgtMon animale de compagnie ltpgt

ltimg src=ldquotigre1pnggtlttdgtltbodygt

lthtmlgt

SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez une image dans la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de preacutesentation agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML Les liens Les liens sont introduits gracircce agrave la balise ltagt et ltagt

Le balise ltagt contient TOUJOURS un attribut href= lsquopagepointeacuteehtmlrsquo

Enregistrer le script ci-dessous dans un fichier lsquo lien1htmlrsquo puis le lancez

NB les fichiers lien1html page1html et lienshtml doivent ecirctre placeacutes dans le mecircme reacutepertoire

lthtmlgtltheadgt

lttitlegtLienslttitlegtltheadgtltbodygt

ltpgtci dessous se trouve mon lien ltbrgtcliquez dessus pour voir la photo du tigre ltpgtlta href=image1htmlgtMa photoltagt

ltpgtci dessous se trouve mon second lien ltbrgtcliquez dessus pour voir mon tableau ltpgtlta href=mapage7htmlgtMon tableaultagt

ltpgtci dessous se trouve mon troisieme lien ltbrgtcliquez dessus pour voir mon site ltpgtlta href=httpwwwlapostenetgtMon siteltagt

ltbodygtlthtmlgt

SLoutfi

bull La plupart du temps dautres langages informatiques sont associeacutes agrave une page codeacutee en HTML

Le Javascript est un langage de programmation qui permet dapporter des ameacuteliorations au langage HTML et de dynamiser des pages web en permettant dexeacutecuter des commandes du cocircteacute client cest-agrave-dire au niveau du navigateur et non du serveur

Le PHP est un langage de programmation qui permet de produire un site web dynamique Il est exeacutecuteacute du cocircteacute serveuril geacutenegravere puis envoi au client une page web

Langages web HTMLCSS JAVASCRIPT PHP

SLoutfi

Organisation drsquoune page HTML

SLoutfi

Quels sont les outils pour creacuteer une page html

Pour creacuteer une page html il faut

bull taper le script dans un eacutediteur de texte

bull puis enregistrer le fichier avec lrsquoextension html

Lrsquoeacutediteur de texte que lrsquoon utilisera dans la suite est Notepad++

Pour voir le rendu de la page html creacuteeacutee il faut ouvrir le fichier avec le navigateur de votre choix

Organisation drsquoune page HTML

SLoutfi

Organisation drsquoune page HTML

Texte brut

Enregistrer le script ci-dessous dans un fichier lsquo montextehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_textelttitlegtltheadgt

ltbodygtBonjour ceci est ma page internetligne1 ceci est la ligne 1ligne 2 ceci est la ligne 2Ma page est imparfaite

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

Saut de ligne

Pour indiquer au navigateur qursquoil faut retourner agrave la ligne il faut utiliser la balise ltbrgt

Enregistrer le script ci-dessous dans un fichier lsquo saut_lignehtmlrsquo

lthtmlgtltheadgt

lttitlegt Saut_de_lignelttitlegtltheadgtltbodygt

Bonjour ceci est ma page internet ltbrgtligne1 ceci est la ligne 1 ltbrgtligne 2 ceci est la ligne 2 ltbrgtMa page est parfaite

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

Paragraphe Pour indiquer au navigateur le deacutebut et la fin drsquoun paragraphe il faut utiliser les balises ltpgt etltpgt Le texte est compris entre ces deux balises

Enregistrer le script ci-dessous dans un fichier lsquo paragraphehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_paragraphelttitlegtltheadgtltbodygt

ltpgtBonjour ceci est ma page internet ltpgtltpgtligne1 ceci est la ligne 1 ltpgtltpgtligne 2 ceci est la ligne 2 ltpgtltpgtMa page est parfaite ltpgt

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

A vous de faire Reacutealiser la page suivante Pour cela vous pouvez utiliser le fichier tigredoc fourni dans le dossier laquo html raquo

SLoutfi

Organisation drsquoune page HTML

Changer lrsquoaspect du textePour afficher autrement un texte il faut donner plus drsquoinstructions au navigateurLes balises pour transformer le texte sont les suivantes ltUgtltUgt texte souligneacute ltBgtltBgt texte gras ltEMgtltEMgt texte en italiqueltH1gtltH1gt texte tregraves grand ltH2gtltH2gt texte un peu moins grand ltH7gtltH7gt texte tregraves petitltFONTgtltFONTgt modifie la police de caractegravere la taille du texte et la couleur Toutes ces balises se mettent autour du texte concerneacute

Exemple Enregistrer le script ci-dessous dans un fichier lsquo change_textehtmlrsquopuis lancez le fichier

ltHTMLgt

ltHEADgt

ltTITLEgtMa page ltTITLEgt

ltHEADgt

ltBODYgt

ltPgtltUgtmon texte souligne balise ultUgtltPgt

ltPgtltSTRONGgtmon texte en gras balise strongltSTRONGgtltPgt

ltPgtltBgtmon texte en gras balise bltBgtltPgt

ltPgtltEMgtlth1gtmon texte en italique et titre balises h1et emlth1gtltEMgtltPgt

ltpgtltfont face=Times New Romansize=5 color=FF0000 gtmon texte en vertltfontgtltpgt

ltpgtet pour combiner les balises ltpgt

ltpgtltUgtltBgtltfont face=Arialsize=7 color=00FF00gtmon texteltfontgtltBgtltUgtltpgt

ltBODYgt

ltHTMLgt SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez en forme la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de page agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML

Les images Pour inseacuterer des images dans une page internet il faut tout drsquoabord disposer drsquoune image qui soit au format Gif ou JPEG ou PNGPour une simpliciteacute drsquoutilisation il vaut mieux placer cette image dans le mecircme dossier que le fichier scriptLe balise qui permet de charger une image est la balise ltimggt qui contient toujours un attribut src=rdquo rdquo (src comme source)

Enregistrer le script ci-dessous dans un fichier lsquo image1htmlrsquo puis le lancez

lthtmlgtltheadgt

lttitlegtImagelttitlegtltheadgtltbodygt ltpgtMon animale de compagnie ltpgt

ltimg src=ldquotigre1pnggtlttdgtltbodygt

lthtmlgt

SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez une image dans la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de preacutesentation agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML Les liens Les liens sont introduits gracircce agrave la balise ltagt et ltagt

Le balise ltagt contient TOUJOURS un attribut href= lsquopagepointeacuteehtmlrsquo

Enregistrer le script ci-dessous dans un fichier lsquo lien1htmlrsquo puis le lancez

NB les fichiers lien1html page1html et lienshtml doivent ecirctre placeacutes dans le mecircme reacutepertoire

lthtmlgtltheadgt

lttitlegtLienslttitlegtltheadgtltbodygt

ltpgtci dessous se trouve mon lien ltbrgtcliquez dessus pour voir la photo du tigre ltpgtlta href=image1htmlgtMa photoltagt

ltpgtci dessous se trouve mon second lien ltbrgtcliquez dessus pour voir mon tableau ltpgtlta href=mapage7htmlgtMon tableaultagt

ltpgtci dessous se trouve mon troisieme lien ltbrgtcliquez dessus pour voir mon site ltpgtlta href=httpwwwlapostenetgtMon siteltagt

ltbodygtlthtmlgt

SLoutfi

Organisation drsquoune page HTML

SLoutfi

Quels sont les outils pour creacuteer une page html

Pour creacuteer une page html il faut

bull taper le script dans un eacutediteur de texte

bull puis enregistrer le fichier avec lrsquoextension html

Lrsquoeacutediteur de texte que lrsquoon utilisera dans la suite est Notepad++

Pour voir le rendu de la page html creacuteeacutee il faut ouvrir le fichier avec le navigateur de votre choix

Organisation drsquoune page HTML

SLoutfi

Organisation drsquoune page HTML

Texte brut

Enregistrer le script ci-dessous dans un fichier lsquo montextehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_textelttitlegtltheadgt

ltbodygtBonjour ceci est ma page internetligne1 ceci est la ligne 1ligne 2 ceci est la ligne 2Ma page est imparfaite

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

Saut de ligne

Pour indiquer au navigateur qursquoil faut retourner agrave la ligne il faut utiliser la balise ltbrgt

Enregistrer le script ci-dessous dans un fichier lsquo saut_lignehtmlrsquo

lthtmlgtltheadgt

lttitlegt Saut_de_lignelttitlegtltheadgtltbodygt

Bonjour ceci est ma page internet ltbrgtligne1 ceci est la ligne 1 ltbrgtligne 2 ceci est la ligne 2 ltbrgtMa page est parfaite

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

Paragraphe Pour indiquer au navigateur le deacutebut et la fin drsquoun paragraphe il faut utiliser les balises ltpgt etltpgt Le texte est compris entre ces deux balises

Enregistrer le script ci-dessous dans un fichier lsquo paragraphehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_paragraphelttitlegtltheadgtltbodygt

ltpgtBonjour ceci est ma page internet ltpgtltpgtligne1 ceci est la ligne 1 ltpgtltpgtligne 2 ceci est la ligne 2 ltpgtltpgtMa page est parfaite ltpgt

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

A vous de faire Reacutealiser la page suivante Pour cela vous pouvez utiliser le fichier tigredoc fourni dans le dossier laquo html raquo

SLoutfi

Organisation drsquoune page HTML

Changer lrsquoaspect du textePour afficher autrement un texte il faut donner plus drsquoinstructions au navigateurLes balises pour transformer le texte sont les suivantes ltUgtltUgt texte souligneacute ltBgtltBgt texte gras ltEMgtltEMgt texte en italiqueltH1gtltH1gt texte tregraves grand ltH2gtltH2gt texte un peu moins grand ltH7gtltH7gt texte tregraves petitltFONTgtltFONTgt modifie la police de caractegravere la taille du texte et la couleur Toutes ces balises se mettent autour du texte concerneacute

Exemple Enregistrer le script ci-dessous dans un fichier lsquo change_textehtmlrsquopuis lancez le fichier

ltHTMLgt

ltHEADgt

ltTITLEgtMa page ltTITLEgt

ltHEADgt

ltBODYgt

ltPgtltUgtmon texte souligne balise ultUgtltPgt

ltPgtltSTRONGgtmon texte en gras balise strongltSTRONGgtltPgt

ltPgtltBgtmon texte en gras balise bltBgtltPgt

ltPgtltEMgtlth1gtmon texte en italique et titre balises h1et emlth1gtltEMgtltPgt

ltpgtltfont face=Times New Romansize=5 color=FF0000 gtmon texte en vertltfontgtltpgt

ltpgtet pour combiner les balises ltpgt

ltpgtltUgtltBgtltfont face=Arialsize=7 color=00FF00gtmon texteltfontgtltBgtltUgtltpgt

ltBODYgt

ltHTMLgt SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez en forme la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de page agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML

Les images Pour inseacuterer des images dans une page internet il faut tout drsquoabord disposer drsquoune image qui soit au format Gif ou JPEG ou PNGPour une simpliciteacute drsquoutilisation il vaut mieux placer cette image dans le mecircme dossier que le fichier scriptLe balise qui permet de charger une image est la balise ltimggt qui contient toujours un attribut src=rdquo rdquo (src comme source)

Enregistrer le script ci-dessous dans un fichier lsquo image1htmlrsquo puis le lancez

lthtmlgtltheadgt

lttitlegtImagelttitlegtltheadgtltbodygt ltpgtMon animale de compagnie ltpgt

ltimg src=ldquotigre1pnggtlttdgtltbodygt

lthtmlgt

SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez une image dans la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de preacutesentation agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML Les liens Les liens sont introduits gracircce agrave la balise ltagt et ltagt

Le balise ltagt contient TOUJOURS un attribut href= lsquopagepointeacuteehtmlrsquo

Enregistrer le script ci-dessous dans un fichier lsquo lien1htmlrsquo puis le lancez

NB les fichiers lien1html page1html et lienshtml doivent ecirctre placeacutes dans le mecircme reacutepertoire

lthtmlgtltheadgt

lttitlegtLienslttitlegtltheadgtltbodygt

ltpgtci dessous se trouve mon lien ltbrgtcliquez dessus pour voir la photo du tigre ltpgtlta href=image1htmlgtMa photoltagt

ltpgtci dessous se trouve mon second lien ltbrgtcliquez dessus pour voir mon tableau ltpgtlta href=mapage7htmlgtMon tableaultagt

ltpgtci dessous se trouve mon troisieme lien ltbrgtcliquez dessus pour voir mon site ltpgtlta href=httpwwwlapostenetgtMon siteltagt

ltbodygtlthtmlgt

SLoutfi

Quels sont les outils pour creacuteer une page html

Pour creacuteer une page html il faut

bull taper le script dans un eacutediteur de texte

bull puis enregistrer le fichier avec lrsquoextension html

Lrsquoeacutediteur de texte que lrsquoon utilisera dans la suite est Notepad++

Pour voir le rendu de la page html creacuteeacutee il faut ouvrir le fichier avec le navigateur de votre choix

Organisation drsquoune page HTML

SLoutfi

Organisation drsquoune page HTML

Texte brut

Enregistrer le script ci-dessous dans un fichier lsquo montextehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_textelttitlegtltheadgt

ltbodygtBonjour ceci est ma page internetligne1 ceci est la ligne 1ligne 2 ceci est la ligne 2Ma page est imparfaite

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

Saut de ligne

Pour indiquer au navigateur qursquoil faut retourner agrave la ligne il faut utiliser la balise ltbrgt

Enregistrer le script ci-dessous dans un fichier lsquo saut_lignehtmlrsquo

lthtmlgtltheadgt

lttitlegt Saut_de_lignelttitlegtltheadgtltbodygt

Bonjour ceci est ma page internet ltbrgtligne1 ceci est la ligne 1 ltbrgtligne 2 ceci est la ligne 2 ltbrgtMa page est parfaite

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

Paragraphe Pour indiquer au navigateur le deacutebut et la fin drsquoun paragraphe il faut utiliser les balises ltpgt etltpgt Le texte est compris entre ces deux balises

Enregistrer le script ci-dessous dans un fichier lsquo paragraphehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_paragraphelttitlegtltheadgtltbodygt

ltpgtBonjour ceci est ma page internet ltpgtltpgtligne1 ceci est la ligne 1 ltpgtltpgtligne 2 ceci est la ligne 2 ltpgtltpgtMa page est parfaite ltpgt

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

A vous de faire Reacutealiser la page suivante Pour cela vous pouvez utiliser le fichier tigredoc fourni dans le dossier laquo html raquo

SLoutfi

Organisation drsquoune page HTML

Changer lrsquoaspect du textePour afficher autrement un texte il faut donner plus drsquoinstructions au navigateurLes balises pour transformer le texte sont les suivantes ltUgtltUgt texte souligneacute ltBgtltBgt texte gras ltEMgtltEMgt texte en italiqueltH1gtltH1gt texte tregraves grand ltH2gtltH2gt texte un peu moins grand ltH7gtltH7gt texte tregraves petitltFONTgtltFONTgt modifie la police de caractegravere la taille du texte et la couleur Toutes ces balises se mettent autour du texte concerneacute

Exemple Enregistrer le script ci-dessous dans un fichier lsquo change_textehtmlrsquopuis lancez le fichier

ltHTMLgt

ltHEADgt

ltTITLEgtMa page ltTITLEgt

ltHEADgt

ltBODYgt

ltPgtltUgtmon texte souligne balise ultUgtltPgt

ltPgtltSTRONGgtmon texte en gras balise strongltSTRONGgtltPgt

ltPgtltBgtmon texte en gras balise bltBgtltPgt

ltPgtltEMgtlth1gtmon texte en italique et titre balises h1et emlth1gtltEMgtltPgt

ltpgtltfont face=Times New Romansize=5 color=FF0000 gtmon texte en vertltfontgtltpgt

ltpgtet pour combiner les balises ltpgt

ltpgtltUgtltBgtltfont face=Arialsize=7 color=00FF00gtmon texteltfontgtltBgtltUgtltpgt

ltBODYgt

ltHTMLgt SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez en forme la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de page agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML

Les images Pour inseacuterer des images dans une page internet il faut tout drsquoabord disposer drsquoune image qui soit au format Gif ou JPEG ou PNGPour une simpliciteacute drsquoutilisation il vaut mieux placer cette image dans le mecircme dossier que le fichier scriptLe balise qui permet de charger une image est la balise ltimggt qui contient toujours un attribut src=rdquo rdquo (src comme source)

Enregistrer le script ci-dessous dans un fichier lsquo image1htmlrsquo puis le lancez

lthtmlgtltheadgt

lttitlegtImagelttitlegtltheadgtltbodygt ltpgtMon animale de compagnie ltpgt

ltimg src=ldquotigre1pnggtlttdgtltbodygt

lthtmlgt

SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez une image dans la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de preacutesentation agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML Les liens Les liens sont introduits gracircce agrave la balise ltagt et ltagt

Le balise ltagt contient TOUJOURS un attribut href= lsquopagepointeacuteehtmlrsquo

Enregistrer le script ci-dessous dans un fichier lsquo lien1htmlrsquo puis le lancez

NB les fichiers lien1html page1html et lienshtml doivent ecirctre placeacutes dans le mecircme reacutepertoire

lthtmlgtltheadgt

lttitlegtLienslttitlegtltheadgtltbodygt

ltpgtci dessous se trouve mon lien ltbrgtcliquez dessus pour voir la photo du tigre ltpgtlta href=image1htmlgtMa photoltagt

ltpgtci dessous se trouve mon second lien ltbrgtcliquez dessus pour voir mon tableau ltpgtlta href=mapage7htmlgtMon tableaultagt

ltpgtci dessous se trouve mon troisieme lien ltbrgtcliquez dessus pour voir mon site ltpgtlta href=httpwwwlapostenetgtMon siteltagt

ltbodygtlthtmlgt

SLoutfi

Organisation drsquoune page HTML

Texte brut

Enregistrer le script ci-dessous dans un fichier lsquo montextehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_textelttitlegtltheadgt

ltbodygtBonjour ceci est ma page internetligne1 ceci est la ligne 1ligne 2 ceci est la ligne 2Ma page est imparfaite

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

Saut de ligne

Pour indiquer au navigateur qursquoil faut retourner agrave la ligne il faut utiliser la balise ltbrgt

Enregistrer le script ci-dessous dans un fichier lsquo saut_lignehtmlrsquo

lthtmlgtltheadgt

lttitlegt Saut_de_lignelttitlegtltheadgtltbodygt

Bonjour ceci est ma page internet ltbrgtligne1 ceci est la ligne 1 ltbrgtligne 2 ceci est la ligne 2 ltbrgtMa page est parfaite

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

Paragraphe Pour indiquer au navigateur le deacutebut et la fin drsquoun paragraphe il faut utiliser les balises ltpgt etltpgt Le texte est compris entre ces deux balises

Enregistrer le script ci-dessous dans un fichier lsquo paragraphehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_paragraphelttitlegtltheadgtltbodygt

ltpgtBonjour ceci est ma page internet ltpgtltpgtligne1 ceci est la ligne 1 ltpgtltpgtligne 2 ceci est la ligne 2 ltpgtltpgtMa page est parfaite ltpgt

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

A vous de faire Reacutealiser la page suivante Pour cela vous pouvez utiliser le fichier tigredoc fourni dans le dossier laquo html raquo

SLoutfi

Organisation drsquoune page HTML

Changer lrsquoaspect du textePour afficher autrement un texte il faut donner plus drsquoinstructions au navigateurLes balises pour transformer le texte sont les suivantes ltUgtltUgt texte souligneacute ltBgtltBgt texte gras ltEMgtltEMgt texte en italiqueltH1gtltH1gt texte tregraves grand ltH2gtltH2gt texte un peu moins grand ltH7gtltH7gt texte tregraves petitltFONTgtltFONTgt modifie la police de caractegravere la taille du texte et la couleur Toutes ces balises se mettent autour du texte concerneacute

Exemple Enregistrer le script ci-dessous dans un fichier lsquo change_textehtmlrsquopuis lancez le fichier

ltHTMLgt

ltHEADgt

ltTITLEgtMa page ltTITLEgt

ltHEADgt

ltBODYgt

ltPgtltUgtmon texte souligne balise ultUgtltPgt

ltPgtltSTRONGgtmon texte en gras balise strongltSTRONGgtltPgt

ltPgtltBgtmon texte en gras balise bltBgtltPgt

ltPgtltEMgtlth1gtmon texte en italique et titre balises h1et emlth1gtltEMgtltPgt

ltpgtltfont face=Times New Romansize=5 color=FF0000 gtmon texte en vertltfontgtltpgt

ltpgtet pour combiner les balises ltpgt

ltpgtltUgtltBgtltfont face=Arialsize=7 color=00FF00gtmon texteltfontgtltBgtltUgtltpgt

ltBODYgt

ltHTMLgt SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez en forme la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de page agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML

Les images Pour inseacuterer des images dans une page internet il faut tout drsquoabord disposer drsquoune image qui soit au format Gif ou JPEG ou PNGPour une simpliciteacute drsquoutilisation il vaut mieux placer cette image dans le mecircme dossier que le fichier scriptLe balise qui permet de charger une image est la balise ltimggt qui contient toujours un attribut src=rdquo rdquo (src comme source)

Enregistrer le script ci-dessous dans un fichier lsquo image1htmlrsquo puis le lancez

lthtmlgtltheadgt

lttitlegtImagelttitlegtltheadgtltbodygt ltpgtMon animale de compagnie ltpgt

ltimg src=ldquotigre1pnggtlttdgtltbodygt

lthtmlgt

SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez une image dans la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de preacutesentation agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML Les liens Les liens sont introduits gracircce agrave la balise ltagt et ltagt

Le balise ltagt contient TOUJOURS un attribut href= lsquopagepointeacuteehtmlrsquo

Enregistrer le script ci-dessous dans un fichier lsquo lien1htmlrsquo puis le lancez

NB les fichiers lien1html page1html et lienshtml doivent ecirctre placeacutes dans le mecircme reacutepertoire

lthtmlgtltheadgt

lttitlegtLienslttitlegtltheadgtltbodygt

ltpgtci dessous se trouve mon lien ltbrgtcliquez dessus pour voir la photo du tigre ltpgtlta href=image1htmlgtMa photoltagt

ltpgtci dessous se trouve mon second lien ltbrgtcliquez dessus pour voir mon tableau ltpgtlta href=mapage7htmlgtMon tableaultagt

ltpgtci dessous se trouve mon troisieme lien ltbrgtcliquez dessus pour voir mon site ltpgtlta href=httpwwwlapostenetgtMon siteltagt

ltbodygtlthtmlgt

SLoutfi

Organisation drsquoune page HTML

Saut de ligne

Pour indiquer au navigateur qursquoil faut retourner agrave la ligne il faut utiliser la balise ltbrgt

Enregistrer le script ci-dessous dans un fichier lsquo saut_lignehtmlrsquo

lthtmlgtltheadgt

lttitlegt Saut_de_lignelttitlegtltheadgtltbodygt

Bonjour ceci est ma page internet ltbrgtligne1 ceci est la ligne 1 ltbrgtligne 2 ceci est la ligne 2 ltbrgtMa page est parfaite

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

Paragraphe Pour indiquer au navigateur le deacutebut et la fin drsquoun paragraphe il faut utiliser les balises ltpgt etltpgt Le texte est compris entre ces deux balises

Enregistrer le script ci-dessous dans un fichier lsquo paragraphehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_paragraphelttitlegtltheadgtltbodygt

ltpgtBonjour ceci est ma page internet ltpgtltpgtligne1 ceci est la ligne 1 ltpgtltpgtligne 2 ceci est la ligne 2 ltpgtltpgtMa page est parfaite ltpgt

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

A vous de faire Reacutealiser la page suivante Pour cela vous pouvez utiliser le fichier tigredoc fourni dans le dossier laquo html raquo

SLoutfi

Organisation drsquoune page HTML

Changer lrsquoaspect du textePour afficher autrement un texte il faut donner plus drsquoinstructions au navigateurLes balises pour transformer le texte sont les suivantes ltUgtltUgt texte souligneacute ltBgtltBgt texte gras ltEMgtltEMgt texte en italiqueltH1gtltH1gt texte tregraves grand ltH2gtltH2gt texte un peu moins grand ltH7gtltH7gt texte tregraves petitltFONTgtltFONTgt modifie la police de caractegravere la taille du texte et la couleur Toutes ces balises se mettent autour du texte concerneacute

Exemple Enregistrer le script ci-dessous dans un fichier lsquo change_textehtmlrsquopuis lancez le fichier

ltHTMLgt

ltHEADgt

ltTITLEgtMa page ltTITLEgt

ltHEADgt

ltBODYgt

ltPgtltUgtmon texte souligne balise ultUgtltPgt

ltPgtltSTRONGgtmon texte en gras balise strongltSTRONGgtltPgt

ltPgtltBgtmon texte en gras balise bltBgtltPgt

ltPgtltEMgtlth1gtmon texte en italique et titre balises h1et emlth1gtltEMgtltPgt

ltpgtltfont face=Times New Romansize=5 color=FF0000 gtmon texte en vertltfontgtltpgt

ltpgtet pour combiner les balises ltpgt

ltpgtltUgtltBgtltfont face=Arialsize=7 color=00FF00gtmon texteltfontgtltBgtltUgtltpgt

ltBODYgt

ltHTMLgt SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez en forme la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de page agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML

Les images Pour inseacuterer des images dans une page internet il faut tout drsquoabord disposer drsquoune image qui soit au format Gif ou JPEG ou PNGPour une simpliciteacute drsquoutilisation il vaut mieux placer cette image dans le mecircme dossier que le fichier scriptLe balise qui permet de charger une image est la balise ltimggt qui contient toujours un attribut src=rdquo rdquo (src comme source)

Enregistrer le script ci-dessous dans un fichier lsquo image1htmlrsquo puis le lancez

lthtmlgtltheadgt

lttitlegtImagelttitlegtltheadgtltbodygt ltpgtMon animale de compagnie ltpgt

ltimg src=ldquotigre1pnggtlttdgtltbodygt

lthtmlgt

SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez une image dans la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de preacutesentation agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML Les liens Les liens sont introduits gracircce agrave la balise ltagt et ltagt

Le balise ltagt contient TOUJOURS un attribut href= lsquopagepointeacuteehtmlrsquo

Enregistrer le script ci-dessous dans un fichier lsquo lien1htmlrsquo puis le lancez

NB les fichiers lien1html page1html et lienshtml doivent ecirctre placeacutes dans le mecircme reacutepertoire

lthtmlgtltheadgt

lttitlegtLienslttitlegtltheadgtltbodygt

ltpgtci dessous se trouve mon lien ltbrgtcliquez dessus pour voir la photo du tigre ltpgtlta href=image1htmlgtMa photoltagt

ltpgtci dessous se trouve mon second lien ltbrgtcliquez dessus pour voir mon tableau ltpgtlta href=mapage7htmlgtMon tableaultagt

ltpgtci dessous se trouve mon troisieme lien ltbrgtcliquez dessus pour voir mon site ltpgtlta href=httpwwwlapostenetgtMon siteltagt

ltbodygtlthtmlgt

SLoutfi

Organisation drsquoune page HTML

Paragraphe Pour indiquer au navigateur le deacutebut et la fin drsquoun paragraphe il faut utiliser les balises ltpgt etltpgt Le texte est compris entre ces deux balises

Enregistrer le script ci-dessous dans un fichier lsquo paragraphehtmlrsquo

lthtmlgtltheadgt

lttitlegt Mon_paragraphelttitlegtltheadgtltbodygt

ltpgtBonjour ceci est ma page internet ltpgtltpgtligne1 ceci est la ligne 1 ltpgtltpgtligne 2 ceci est la ligne 2 ltpgtltpgtMa page est parfaite ltpgt

ltbodygtlthtmlgt

Double cliquer dessus Que constatez- vous SLoutfi

Organisation drsquoune page HTML

A vous de faire Reacutealiser la page suivante Pour cela vous pouvez utiliser le fichier tigredoc fourni dans le dossier laquo html raquo

SLoutfi

Organisation drsquoune page HTML

Changer lrsquoaspect du textePour afficher autrement un texte il faut donner plus drsquoinstructions au navigateurLes balises pour transformer le texte sont les suivantes ltUgtltUgt texte souligneacute ltBgtltBgt texte gras ltEMgtltEMgt texte en italiqueltH1gtltH1gt texte tregraves grand ltH2gtltH2gt texte un peu moins grand ltH7gtltH7gt texte tregraves petitltFONTgtltFONTgt modifie la police de caractegravere la taille du texte et la couleur Toutes ces balises se mettent autour du texte concerneacute

Exemple Enregistrer le script ci-dessous dans un fichier lsquo change_textehtmlrsquopuis lancez le fichier

ltHTMLgt

ltHEADgt

ltTITLEgtMa page ltTITLEgt

ltHEADgt

ltBODYgt

ltPgtltUgtmon texte souligne balise ultUgtltPgt

ltPgtltSTRONGgtmon texte en gras balise strongltSTRONGgtltPgt

ltPgtltBgtmon texte en gras balise bltBgtltPgt

ltPgtltEMgtlth1gtmon texte en italique et titre balises h1et emlth1gtltEMgtltPgt

ltpgtltfont face=Times New Romansize=5 color=FF0000 gtmon texte en vertltfontgtltpgt

ltpgtet pour combiner les balises ltpgt

ltpgtltUgtltBgtltfont face=Arialsize=7 color=00FF00gtmon texteltfontgtltBgtltUgtltpgt

ltBODYgt

ltHTMLgt SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez en forme la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de page agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML

Les images Pour inseacuterer des images dans une page internet il faut tout drsquoabord disposer drsquoune image qui soit au format Gif ou JPEG ou PNGPour une simpliciteacute drsquoutilisation il vaut mieux placer cette image dans le mecircme dossier que le fichier scriptLe balise qui permet de charger une image est la balise ltimggt qui contient toujours un attribut src=rdquo rdquo (src comme source)

Enregistrer le script ci-dessous dans un fichier lsquo image1htmlrsquo puis le lancez

lthtmlgtltheadgt

lttitlegtImagelttitlegtltheadgtltbodygt ltpgtMon animale de compagnie ltpgt

ltimg src=ldquotigre1pnggtlttdgtltbodygt

lthtmlgt

SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez une image dans la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de preacutesentation agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML Les liens Les liens sont introduits gracircce agrave la balise ltagt et ltagt

Le balise ltagt contient TOUJOURS un attribut href= lsquopagepointeacuteehtmlrsquo

Enregistrer le script ci-dessous dans un fichier lsquo lien1htmlrsquo puis le lancez

NB les fichiers lien1html page1html et lienshtml doivent ecirctre placeacutes dans le mecircme reacutepertoire

lthtmlgtltheadgt

lttitlegtLienslttitlegtltheadgtltbodygt

ltpgtci dessous se trouve mon lien ltbrgtcliquez dessus pour voir la photo du tigre ltpgtlta href=image1htmlgtMa photoltagt

ltpgtci dessous se trouve mon second lien ltbrgtcliquez dessus pour voir mon tableau ltpgtlta href=mapage7htmlgtMon tableaultagt

ltpgtci dessous se trouve mon troisieme lien ltbrgtcliquez dessus pour voir mon site ltpgtlta href=httpwwwlapostenetgtMon siteltagt

ltbodygtlthtmlgt

SLoutfi

Organisation drsquoune page HTML

A vous de faire Reacutealiser la page suivante Pour cela vous pouvez utiliser le fichier tigredoc fourni dans le dossier laquo html raquo

SLoutfi

Organisation drsquoune page HTML

Changer lrsquoaspect du textePour afficher autrement un texte il faut donner plus drsquoinstructions au navigateurLes balises pour transformer le texte sont les suivantes ltUgtltUgt texte souligneacute ltBgtltBgt texte gras ltEMgtltEMgt texte en italiqueltH1gtltH1gt texte tregraves grand ltH2gtltH2gt texte un peu moins grand ltH7gtltH7gt texte tregraves petitltFONTgtltFONTgt modifie la police de caractegravere la taille du texte et la couleur Toutes ces balises se mettent autour du texte concerneacute

Exemple Enregistrer le script ci-dessous dans un fichier lsquo change_textehtmlrsquopuis lancez le fichier

ltHTMLgt

ltHEADgt

ltTITLEgtMa page ltTITLEgt

ltHEADgt

ltBODYgt

ltPgtltUgtmon texte souligne balise ultUgtltPgt

ltPgtltSTRONGgtmon texte en gras balise strongltSTRONGgtltPgt

ltPgtltBgtmon texte en gras balise bltBgtltPgt

ltPgtltEMgtlth1gtmon texte en italique et titre balises h1et emlth1gtltEMgtltPgt

ltpgtltfont face=Times New Romansize=5 color=FF0000 gtmon texte en vertltfontgtltpgt

ltpgtet pour combiner les balises ltpgt

ltpgtltUgtltBgtltfont face=Arialsize=7 color=00FF00gtmon texteltfontgtltBgtltUgtltpgt

ltBODYgt

ltHTMLgt SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez en forme la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de page agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML

Les images Pour inseacuterer des images dans une page internet il faut tout drsquoabord disposer drsquoune image qui soit au format Gif ou JPEG ou PNGPour une simpliciteacute drsquoutilisation il vaut mieux placer cette image dans le mecircme dossier que le fichier scriptLe balise qui permet de charger une image est la balise ltimggt qui contient toujours un attribut src=rdquo rdquo (src comme source)

Enregistrer le script ci-dessous dans un fichier lsquo image1htmlrsquo puis le lancez

lthtmlgtltheadgt

lttitlegtImagelttitlegtltheadgtltbodygt ltpgtMon animale de compagnie ltpgt

ltimg src=ldquotigre1pnggtlttdgtltbodygt

lthtmlgt

SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez une image dans la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de preacutesentation agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML Les liens Les liens sont introduits gracircce agrave la balise ltagt et ltagt

Le balise ltagt contient TOUJOURS un attribut href= lsquopagepointeacuteehtmlrsquo

Enregistrer le script ci-dessous dans un fichier lsquo lien1htmlrsquo puis le lancez

NB les fichiers lien1html page1html et lienshtml doivent ecirctre placeacutes dans le mecircme reacutepertoire

lthtmlgtltheadgt

lttitlegtLienslttitlegtltheadgtltbodygt

ltpgtci dessous se trouve mon lien ltbrgtcliquez dessus pour voir la photo du tigre ltpgtlta href=image1htmlgtMa photoltagt

ltpgtci dessous se trouve mon second lien ltbrgtcliquez dessus pour voir mon tableau ltpgtlta href=mapage7htmlgtMon tableaultagt

ltpgtci dessous se trouve mon troisieme lien ltbrgtcliquez dessus pour voir mon site ltpgtlta href=httpwwwlapostenetgtMon siteltagt

ltbodygtlthtmlgt

SLoutfi

Organisation drsquoune page HTML

Changer lrsquoaspect du textePour afficher autrement un texte il faut donner plus drsquoinstructions au navigateurLes balises pour transformer le texte sont les suivantes ltUgtltUgt texte souligneacute ltBgtltBgt texte gras ltEMgtltEMgt texte en italiqueltH1gtltH1gt texte tregraves grand ltH2gtltH2gt texte un peu moins grand ltH7gtltH7gt texte tregraves petitltFONTgtltFONTgt modifie la police de caractegravere la taille du texte et la couleur Toutes ces balises se mettent autour du texte concerneacute

Exemple Enregistrer le script ci-dessous dans un fichier lsquo change_textehtmlrsquopuis lancez le fichier

ltHTMLgt

ltHEADgt

ltTITLEgtMa page ltTITLEgt

ltHEADgt

ltBODYgt

ltPgtltUgtmon texte souligne balise ultUgtltPgt

ltPgtltSTRONGgtmon texte en gras balise strongltSTRONGgtltPgt

ltPgtltBgtmon texte en gras balise bltBgtltPgt

ltPgtltEMgtlth1gtmon texte en italique et titre balises h1et emlth1gtltEMgtltPgt

ltpgtltfont face=Times New Romansize=5 color=FF0000 gtmon texte en vertltfontgtltpgt

ltpgtet pour combiner les balises ltpgt

ltpgtltUgtltBgtltfont face=Arialsize=7 color=00FF00gtmon texteltfontgtltBgtltUgtltpgt

ltBODYgt

ltHTMLgt SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez en forme la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de page agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML

Les images Pour inseacuterer des images dans une page internet il faut tout drsquoabord disposer drsquoune image qui soit au format Gif ou JPEG ou PNGPour une simpliciteacute drsquoutilisation il vaut mieux placer cette image dans le mecircme dossier que le fichier scriptLe balise qui permet de charger une image est la balise ltimggt qui contient toujours un attribut src=rdquo rdquo (src comme source)

Enregistrer le script ci-dessous dans un fichier lsquo image1htmlrsquo puis le lancez

lthtmlgtltheadgt

lttitlegtImagelttitlegtltheadgtltbodygt ltpgtMon animale de compagnie ltpgt

ltimg src=ldquotigre1pnggtlttdgtltbodygt

lthtmlgt

SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez une image dans la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de preacutesentation agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML Les liens Les liens sont introduits gracircce agrave la balise ltagt et ltagt

Le balise ltagt contient TOUJOURS un attribut href= lsquopagepointeacuteehtmlrsquo

Enregistrer le script ci-dessous dans un fichier lsquo lien1htmlrsquo puis le lancez

NB les fichiers lien1html page1html et lienshtml doivent ecirctre placeacutes dans le mecircme reacutepertoire

lthtmlgtltheadgt

lttitlegtLienslttitlegtltheadgtltbodygt

ltpgtci dessous se trouve mon lien ltbrgtcliquez dessus pour voir la photo du tigre ltpgtlta href=image1htmlgtMa photoltagt

ltpgtci dessous se trouve mon second lien ltbrgtcliquez dessus pour voir mon tableau ltpgtlta href=mapage7htmlgtMon tableaultagt

ltpgtci dessous se trouve mon troisieme lien ltbrgtcliquez dessus pour voir mon site ltpgtlta href=httpwwwlapostenetgtMon siteltagt

ltbodygtlthtmlgt

SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez en forme la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de page agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML

Les images Pour inseacuterer des images dans une page internet il faut tout drsquoabord disposer drsquoune image qui soit au format Gif ou JPEG ou PNGPour une simpliciteacute drsquoutilisation il vaut mieux placer cette image dans le mecircme dossier que le fichier scriptLe balise qui permet de charger une image est la balise ltimggt qui contient toujours un attribut src=rdquo rdquo (src comme source)

Enregistrer le script ci-dessous dans un fichier lsquo image1htmlrsquo puis le lancez

lthtmlgtltheadgt

lttitlegtImagelttitlegtltheadgtltbodygt ltpgtMon animale de compagnie ltpgt

ltimg src=ldquotigre1pnggtlttdgtltbodygt

lthtmlgt

SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez une image dans la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de preacutesentation agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML Les liens Les liens sont introduits gracircce agrave la balise ltagt et ltagt

Le balise ltagt contient TOUJOURS un attribut href= lsquopagepointeacuteehtmlrsquo

Enregistrer le script ci-dessous dans un fichier lsquo lien1htmlrsquo puis le lancez

NB les fichiers lien1html page1html et lienshtml doivent ecirctre placeacutes dans le mecircme reacutepertoire

lthtmlgtltheadgt

lttitlegtLienslttitlegtltheadgtltbodygt

ltpgtci dessous se trouve mon lien ltbrgtcliquez dessus pour voir la photo du tigre ltpgtlta href=image1htmlgtMa photoltagt

ltpgtci dessous se trouve mon second lien ltbrgtcliquez dessus pour voir mon tableau ltpgtlta href=mapage7htmlgtMon tableaultagt

ltpgtci dessous se trouve mon troisieme lien ltbrgtcliquez dessus pour voir mon site ltpgtlta href=httpwwwlapostenetgtMon siteltagt

ltbodygtlthtmlgt

SLoutfi

Organisation drsquoune page HTML

Les images Pour inseacuterer des images dans une page internet il faut tout drsquoabord disposer drsquoune image qui soit au format Gif ou JPEG ou PNGPour une simpliciteacute drsquoutilisation il vaut mieux placer cette image dans le mecircme dossier que le fichier scriptLe balise qui permet de charger une image est la balise ltimggt qui contient toujours un attribut src=rdquo rdquo (src comme source)

Enregistrer le script ci-dessous dans un fichier lsquo image1htmlrsquo puis le lancez

lthtmlgtltheadgt

lttitlegtImagelttitlegtltheadgtltbodygt ltpgtMon animale de compagnie ltpgt

ltimg src=ldquotigre1pnggtlttdgtltbodygt

lthtmlgt

SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez une image dans la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de preacutesentation agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML Les liens Les liens sont introduits gracircce agrave la balise ltagt et ltagt

Le balise ltagt contient TOUJOURS un attribut href= lsquopagepointeacuteehtmlrsquo

Enregistrer le script ci-dessous dans un fichier lsquo lien1htmlrsquo puis le lancez

NB les fichiers lien1html page1html et lienshtml doivent ecirctre placeacutes dans le mecircme reacutepertoire

lthtmlgtltheadgt

lttitlegtLienslttitlegtltheadgtltbodygt

ltpgtci dessous se trouve mon lien ltbrgtcliquez dessus pour voir la photo du tigre ltpgtlta href=image1htmlgtMa photoltagt

ltpgtci dessous se trouve mon second lien ltbrgtcliquez dessus pour voir mon tableau ltpgtlta href=mapage7htmlgtMon tableaultagt

ltpgtci dessous se trouve mon troisieme lien ltbrgtcliquez dessus pour voir mon site ltpgtlta href=httpwwwlapostenetgtMon siteltagt

ltbodygtlthtmlgt

SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez une image dans la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de preacutesentation agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML Les liens Les liens sont introduits gracircce agrave la balise ltagt et ltagt

Le balise ltagt contient TOUJOURS un attribut href= lsquopagepointeacuteehtmlrsquo

Enregistrer le script ci-dessous dans un fichier lsquo lien1htmlrsquo puis le lancez

NB les fichiers lien1html page1html et lienshtml doivent ecirctre placeacutes dans le mecircme reacutepertoire

lthtmlgtltheadgt

lttitlegtLienslttitlegtltheadgtltbodygt

ltpgtci dessous se trouve mon lien ltbrgtcliquez dessus pour voir la photo du tigre ltpgtlta href=image1htmlgtMa photoltagt

ltpgtci dessous se trouve mon second lien ltbrgtcliquez dessus pour voir mon tableau ltpgtlta href=mapage7htmlgtMon tableaultagt

ltpgtci dessous se trouve mon troisieme lien ltbrgtcliquez dessus pour voir mon site ltpgtlta href=httpwwwlapostenetgtMon siteltagt

ltbodygtlthtmlgt

SLoutfi

Organisation drsquoune page HTML Les liens Les liens sont introduits gracircce agrave la balise ltagt et ltagt

Le balise ltagt contient TOUJOURS un attribut href= lsquopagepointeacuteehtmlrsquo

Enregistrer le script ci-dessous dans un fichier lsquo lien1htmlrsquo puis le lancez

NB les fichiers lien1html page1html et lienshtml doivent ecirctre placeacutes dans le mecircme reacutepertoire

lthtmlgtltheadgt

lttitlegtLienslttitlegtltheadgtltbodygt

ltpgtci dessous se trouve mon lien ltbrgtcliquez dessus pour voir la photo du tigre ltpgtlta href=image1htmlgtMa photoltagt

ltpgtci dessous se trouve mon second lien ltbrgtcliquez dessus pour voir mon tableau ltpgtlta href=mapage7htmlgtMon tableaultagt

ltpgtci dessous se trouve mon troisieme lien ltbrgtcliquez dessus pour voir mon site ltpgtlta href=httpwwwlapostenetgtMon siteltagt

ltbodygtlthtmlgt

SLoutfi

Organisation drsquoune page HTML

A vous de faire faites en sorte que lorsqursquoon click sur lrsquoimage dans la page que vous avez reacutealiseacute preacuteceacutedemment la page httpsfrwikipediaorgwikiTigre srsquoouvre

SLoutfi

Organisation drsquoune page HTML Les listes On creacutee une liste non ordonneacutee avec la balise ul (Unordered List) et une liste ordonneacutee avec ol (Ordered List)Chaque eacuteleacutement dune liste est deacutelimiteacute par la balise ltli gt(List Item)Exemple Enregistrer le script ci-dessous dans un fichier lsquo listeshtmlrsquopuis lancez le fichier

ltHTMLgtltHEADgt

ltTITLEgtListesltTITLEgtltHEADgt

ltBODYgtltulgt

ltligtitemltligtltligtitemltligtltligtitemltligt

ltulgtltolgt

ltligtelement 1ltligtltligtelement 2ltligtltligtelement 3ltligt

ltolgtltBODYgt

ltHTMLgtSLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez en forme la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de page agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML Les tableaux Pour indiquer au navigateur le deacutebut et la fin drsquoun tableau il faut utiliser les balises lttablegt etlttablegt Les lignes sont comprises entre les balises lttrgt et lttrgtLes donneacutees sont comprises entre les baliseslttdgt et lttdgtExemple Enregistrer les scripts ci-dessous dans deux fichier lsquo tableauxhtmlrsquo et lsquotablehtmlrsquopuis les lanceztableau simple tableau avec fusion de cellules

lthtmlgtltheadgt

lttitlegt Matablelttitlegtltheadgtltbodygtlttable border=1gt

lttrgtlttdgtC1lttdgtlttdgtC2lttdgtlttdgtC3lttdgt

lttrgtlttrgt

lttdgtC4lttdgtlttdgtC5lttdgtlttdgtC6lttdgt

lttrgtlttrgt

lttdgtC7lttdgtlttdgtC8lttdgtlttdgtC9lttdgt

lttrgtlttablegtltbodygt

lthtmlgt

lthtmlgtltheadgt

lttitlegt Montableaulttitlegtltheadgtltbodygtlttable border=1gt

lttrgtlttd colspan=2gtC1lttdgtlttdgtC2lttdgt

lttrgtlttrgt

lttdgtC4lttdgtlttdgtC5lttdgtlttd rowspan=2gtC6lttdgt

lttrgtlttrgt

lttdgtC7lttdgtlttdgtC8lttdgt

lttrgtlttablegtltbodygt

lthtmlgtSLoutfi

Organisation drsquoune page HTML

A vous de faire Reacutealiser le tableau ci-dessousAidelttable width=100 height=50gt le tableau occupe toute la largeur de lrsquoeacutecran et la moitieacute de la hauteurlttd align=center bgcolor=red width=50 gt texte centreacute couleur de fond rouge largeur eacutegale agrave la moitieacute de la largeur du tableau lttr width=20 gt hauteur de la ligne eacutegale 20 de la hauteur du tableau

SLoutfi

Organisation drsquoune page HTML Les divisions ltdivgt La balise ltdivgt (pour division) peut servir agrave structurer un document Elle permet de diviser un document en plusieurs sections qui seront aligneacutees chacune dune faccedilon diffeacuterenteElle peut contenir des paragraphes des titres des tableaux et mecircme dautres divisions Ce qui fait de ltdivgt la balise ideacuteale pour marquer diffeacuterents sortes de bloc tel quun chapitre un reacutesumeacute ou une noteExemple Enregistrer le script ci-dessous dans un fichier lsquo divisionhtmlrsquopuis lancez le fichier

lthtmlgtltheadgt

ltmeta charset=utf-8gtlttitlegtpositionnementlttitlegt

ltheadgtltbodygt

ltdiv style=background-coloryellow colorredgtltpgtMon premiegraver bloc ltpgtltpgtblabla blabla blabla blabla blablaltpgtltpgtblabla blabla blabla blabla blablaltpgtltdivgt

ltdiv style=background-colorred coloryellowgtltpgtMon deuxiegraveme bloc ltpgtltpgtblabla blabla blabla blabla blabla blabla blabla blabla blabla blablaltpgtltpgtblabla blabla blabla blabla blabla blabla blabla blabla blabla blablaltpgtltdivgt

ltdiv style=background-colorgrey colorblackgtltpgtMon troisiegraveme bloc ltpgtltpgtblabla blabla blabla blabla blablaltpgtltpgtblabla blabla blabla blabla blablaltpgtltdivgt

ltbodygtlthtmlgt SLoutfi

Organisation drsquoune page HTML Les listes On creacutee une liste non ordonneacutee avec la balise ul (Unordered List) et une liste ordonneacutee avec ol (Ordered List)Chaque eacuteleacutement dune liste est deacutelimiteacute par la balise ltli gt(List Item)Exemple Enregistrer le script ci-dessous dans un fichier lsquo listeshtmlrsquopuis lancez le fichier

ltHTMLgtltHEADgt

ltTITLEgtListesltTITLEgtltHEADgt

ltBODYgtltulgt

ltligtitemltligtltligtitemltligtltligtitemltligt

ltulgtltolgt

ltligtelement 1ltligtltligtelement 2ltligtltligtelement 3ltligt

ltolgtltBODYgt

ltHTMLgtSLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez en forme la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de page agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML Les tableaux Pour indiquer au navigateur le deacutebut et la fin drsquoun tableau il faut utiliser les balises lttablegt etlttablegt Les lignes sont comprises entre les balises lttrgt et lttrgtLes donneacutees sont comprises entre les baliseslttdgt et lttdgtExemple Enregistrer les scripts ci-dessous dans deux fichier lsquo tableauxhtmlrsquo et lsquotablehtmlrsquopuis les lanceztableau simple tableau avec fusion de cellules

lthtmlgtltheadgt

lttitlegt Matablelttitlegtltheadgtltbodygtlttable border=1gt

lttrgtlttdgtC1lttdgtlttdgtC2lttdgtlttdgtC3lttdgt

lttrgtlttrgt

lttdgtC4lttdgtlttdgtC5lttdgtlttdgtC6lttdgt

lttrgtlttrgt

lttdgtC7lttdgtlttdgtC8lttdgtlttdgtC9lttdgt

lttrgtlttablegtltbodygt

lthtmlgt

lthtmlgtltheadgt

lttitlegt Montableaulttitlegtltheadgtltbodygtlttable border=1gt

lttrgtlttd colspan=2gtC1lttdgtlttdgtC2lttdgt

lttrgtlttrgt

lttdgtC4lttdgtlttdgtC5lttdgtlttd rowspan=2gtC6lttdgt

lttrgtlttrgt

lttdgtC7lttdgtlttdgtC8lttdgt

lttrgtlttablegtltbodygt

lthtmlgtSLoutfi

Organisation drsquoune page HTML

A vous de faire Reacutealiser le tableau ci-dessousAidelttable width=100 height=50gt le tableau occupe toute la largeur de lrsquoeacutecran et la moitieacute de la hauteurlttd align=center bgcolor=red width=50 gt texte centreacute couleur de fond rouge largeur eacutegale agrave la moitieacute de la largeur du tableau lttr width=20 gt hauteur de la ligne eacutegale 20 de la hauteur du tableau

SLoutfi

Organisation drsquoune page HTML Les divisions ltdivgt La balise ltdivgt (pour division) peut servir agrave structurer un document Elle permet de diviser un document en plusieurs sections qui seront aligneacutees chacune dune faccedilon diffeacuterenteElle peut contenir des paragraphes des titres des tableaux et mecircme dautres divisions Ce qui fait de ltdivgt la balise ideacuteale pour marquer diffeacuterents sortes de bloc tel quun chapitre un reacutesumeacute ou une noteExemple Enregistrer le script ci-dessous dans un fichier lsquo divisionhtmlrsquopuis lancez le fichier

lthtmlgtltheadgt

ltmeta charset=utf-8gtlttitlegtpositionnementlttitlegt

ltheadgtltbodygt

ltdiv style=background-coloryellow colorredgtltpgtMon premiegraver bloc ltpgtltpgtblabla blabla blabla blabla blablaltpgtltpgtblabla blabla blabla blabla blablaltpgtltdivgt

ltdiv style=background-colorred coloryellowgtltpgtMon deuxiegraveme bloc ltpgtltpgtblabla blabla blabla blabla blabla blabla blabla blabla blabla blablaltpgtltpgtblabla blabla blabla blabla blabla blabla blabla blabla blabla blablaltpgtltdivgt

ltdiv style=background-colorgrey colorblackgtltpgtMon troisiegraveme bloc ltpgtltpgtblabla blabla blabla blabla blablaltpgtltpgtblabla blabla blabla blabla blablaltpgtltdivgt

ltbodygtlthtmlgt SLoutfi

Organisation drsquoune page HTML

A vous de faire Mettez en forme la page que vous avez reacutealiseacute preacuteceacutedemment

Exemple de page agrave reacutealiser

SLoutfi

Organisation drsquoune page HTML Les tableaux Pour indiquer au navigateur le deacutebut et la fin drsquoun tableau il faut utiliser les balises lttablegt etlttablegt Les lignes sont comprises entre les balises lttrgt et lttrgtLes donneacutees sont comprises entre les baliseslttdgt et lttdgtExemple Enregistrer les scripts ci-dessous dans deux fichier lsquo tableauxhtmlrsquo et lsquotablehtmlrsquopuis les lanceztableau simple tableau avec fusion de cellules

lthtmlgtltheadgt

lttitlegt Matablelttitlegtltheadgtltbodygtlttable border=1gt

lttrgtlttdgtC1lttdgtlttdgtC2lttdgtlttdgtC3lttdgt

lttrgtlttrgt

lttdgtC4lttdgtlttdgtC5lttdgtlttdgtC6lttdgt

lttrgtlttrgt

lttdgtC7lttdgtlttdgtC8lttdgtlttdgtC9lttdgt

lttrgtlttablegtltbodygt

lthtmlgt

lthtmlgtltheadgt

lttitlegt Montableaulttitlegtltheadgtltbodygtlttable border=1gt

lttrgtlttd colspan=2gtC1lttdgtlttdgtC2lttdgt

lttrgtlttrgt

lttdgtC4lttdgtlttdgtC5lttdgtlttd rowspan=2gtC6lttdgt

lttrgtlttrgt

lttdgtC7lttdgtlttdgtC8lttdgt

lttrgtlttablegtltbodygt

lthtmlgtSLoutfi

Organisation drsquoune page HTML

A vous de faire Reacutealiser le tableau ci-dessousAidelttable width=100 height=50gt le tableau occupe toute la largeur de lrsquoeacutecran et la moitieacute de la hauteurlttd align=center bgcolor=red width=50 gt texte centreacute couleur de fond rouge largeur eacutegale agrave la moitieacute de la largeur du tableau lttr width=20 gt hauteur de la ligne eacutegale 20 de la hauteur du tableau

SLoutfi

Organisation drsquoune page HTML Les divisions ltdivgt La balise ltdivgt (pour division) peut servir agrave structurer un document Elle permet de diviser un document en plusieurs sections qui seront aligneacutees chacune dune faccedilon diffeacuterenteElle peut contenir des paragraphes des titres des tableaux et mecircme dautres divisions Ce qui fait de ltdivgt la balise ideacuteale pour marquer diffeacuterents sortes de bloc tel quun chapitre un reacutesumeacute ou une noteExemple Enregistrer le script ci-dessous dans un fichier lsquo divisionhtmlrsquopuis lancez le fichier

lthtmlgtltheadgt

ltmeta charset=utf-8gtlttitlegtpositionnementlttitlegt

ltheadgtltbodygt

ltdiv style=background-coloryellow colorredgtltpgtMon premiegraver bloc ltpgtltpgtblabla blabla blabla blabla blablaltpgtltpgtblabla blabla blabla blabla blablaltpgtltdivgt

ltdiv style=background-colorred coloryellowgtltpgtMon deuxiegraveme bloc ltpgtltpgtblabla blabla blabla blabla blabla blabla blabla blabla blabla blablaltpgtltpgtblabla blabla blabla blabla blabla blabla blabla blabla blabla blablaltpgtltdivgt

ltdiv style=background-colorgrey colorblackgtltpgtMon troisiegraveme bloc ltpgtltpgtblabla blabla blabla blabla blablaltpgtltpgtblabla blabla blabla blabla blablaltpgtltdivgt

ltbodygtlthtmlgt SLoutfi

Organisation drsquoune page HTML Les tableaux Pour indiquer au navigateur le deacutebut et la fin drsquoun tableau il faut utiliser les balises lttablegt etlttablegt Les lignes sont comprises entre les balises lttrgt et lttrgtLes donneacutees sont comprises entre les baliseslttdgt et lttdgtExemple Enregistrer les scripts ci-dessous dans deux fichier lsquo tableauxhtmlrsquo et lsquotablehtmlrsquopuis les lanceztableau simple tableau avec fusion de cellules

lthtmlgtltheadgt

lttitlegt Matablelttitlegtltheadgtltbodygtlttable border=1gt

lttrgtlttdgtC1lttdgtlttdgtC2lttdgtlttdgtC3lttdgt

lttrgtlttrgt

lttdgtC4lttdgtlttdgtC5lttdgtlttdgtC6lttdgt

lttrgtlttrgt

lttdgtC7lttdgtlttdgtC8lttdgtlttdgtC9lttdgt

lttrgtlttablegtltbodygt

lthtmlgt

lthtmlgtltheadgt

lttitlegt Montableaulttitlegtltheadgtltbodygtlttable border=1gt

lttrgtlttd colspan=2gtC1lttdgtlttdgtC2lttdgt

lttrgtlttrgt

lttdgtC4lttdgtlttdgtC5lttdgtlttd rowspan=2gtC6lttdgt

lttrgtlttrgt

lttdgtC7lttdgtlttdgtC8lttdgt

lttrgtlttablegtltbodygt

lthtmlgtSLoutfi

Organisation drsquoune page HTML

A vous de faire Reacutealiser le tableau ci-dessousAidelttable width=100 height=50gt le tableau occupe toute la largeur de lrsquoeacutecran et la moitieacute de la hauteurlttd align=center bgcolor=red width=50 gt texte centreacute couleur de fond rouge largeur eacutegale agrave la moitieacute de la largeur du tableau lttr width=20 gt hauteur de la ligne eacutegale 20 de la hauteur du tableau

SLoutfi

Organisation drsquoune page HTML Les divisions ltdivgt La balise ltdivgt (pour division) peut servir agrave structurer un document Elle permet de diviser un document en plusieurs sections qui seront aligneacutees chacune dune faccedilon diffeacuterenteElle peut contenir des paragraphes des titres des tableaux et mecircme dautres divisions Ce qui fait de ltdivgt la balise ideacuteale pour marquer diffeacuterents sortes de bloc tel quun chapitre un reacutesumeacute ou une noteExemple Enregistrer le script ci-dessous dans un fichier lsquo divisionhtmlrsquopuis lancez le fichier

lthtmlgtltheadgt

ltmeta charset=utf-8gtlttitlegtpositionnementlttitlegt

ltheadgtltbodygt

ltdiv style=background-coloryellow colorredgtltpgtMon premiegraver bloc ltpgtltpgtblabla blabla blabla blabla blablaltpgtltpgtblabla blabla blabla blabla blablaltpgtltdivgt

ltdiv style=background-colorred coloryellowgtltpgtMon deuxiegraveme bloc ltpgtltpgtblabla blabla blabla blabla blabla blabla blabla blabla blabla blablaltpgtltpgtblabla blabla blabla blabla blabla blabla blabla blabla blabla blablaltpgtltdivgt

ltdiv style=background-colorgrey colorblackgtltpgtMon troisiegraveme bloc ltpgtltpgtblabla blabla blabla blabla blablaltpgtltpgtblabla blabla blabla blabla blablaltpgtltdivgt

ltbodygtlthtmlgt SLoutfi

Organisation drsquoune page HTML

A vous de faire Reacutealiser le tableau ci-dessousAidelttable width=100 height=50gt le tableau occupe toute la largeur de lrsquoeacutecran et la moitieacute de la hauteurlttd align=center bgcolor=red width=50 gt texte centreacute couleur de fond rouge largeur eacutegale agrave la moitieacute de la largeur du tableau lttr width=20 gt hauteur de la ligne eacutegale 20 de la hauteur du tableau

SLoutfi

Organisation drsquoune page HTML Les divisions ltdivgt La balise ltdivgt (pour division) peut servir agrave structurer un document Elle permet de diviser un document en plusieurs sections qui seront aligneacutees chacune dune faccedilon diffeacuterenteElle peut contenir des paragraphes des titres des tableaux et mecircme dautres divisions Ce qui fait de ltdivgt la balise ideacuteale pour marquer diffeacuterents sortes de bloc tel quun chapitre un reacutesumeacute ou une noteExemple Enregistrer le script ci-dessous dans un fichier lsquo divisionhtmlrsquopuis lancez le fichier

lthtmlgtltheadgt

ltmeta charset=utf-8gtlttitlegtpositionnementlttitlegt

ltheadgtltbodygt

ltdiv style=background-coloryellow colorredgtltpgtMon premiegraver bloc ltpgtltpgtblabla blabla blabla blabla blablaltpgtltpgtblabla blabla blabla blabla blablaltpgtltdivgt

ltdiv style=background-colorred coloryellowgtltpgtMon deuxiegraveme bloc ltpgtltpgtblabla blabla blabla blabla blabla blabla blabla blabla blabla blablaltpgtltpgtblabla blabla blabla blabla blabla blabla blabla blabla blabla blablaltpgtltdivgt

ltdiv style=background-colorgrey colorblackgtltpgtMon troisiegraveme bloc ltpgtltpgtblabla blabla blabla blabla blablaltpgtltpgtblabla blabla blabla blabla blablaltpgtltdivgt

ltbodygtlthtmlgt SLoutfi

Organisation drsquoune page HTML Les divisions ltdivgt La balise ltdivgt (pour division) peut servir agrave structurer un document Elle permet de diviser un document en plusieurs sections qui seront aligneacutees chacune dune faccedilon diffeacuterenteElle peut contenir des paragraphes des titres des tableaux et mecircme dautres divisions Ce qui fait de ltdivgt la balise ideacuteale pour marquer diffeacuterents sortes de bloc tel quun chapitre un reacutesumeacute ou une noteExemple Enregistrer le script ci-dessous dans un fichier lsquo divisionhtmlrsquopuis lancez le fichier

lthtmlgtltheadgt

ltmeta charset=utf-8gtlttitlegtpositionnementlttitlegt

ltheadgtltbodygt

ltdiv style=background-coloryellow colorredgtltpgtMon premiegraver bloc ltpgtltpgtblabla blabla blabla blabla blablaltpgtltpgtblabla blabla blabla blabla blablaltpgtltdivgt

ltdiv style=background-colorred coloryellowgtltpgtMon deuxiegraveme bloc ltpgtltpgtblabla blabla blabla blabla blabla blabla blabla blabla blabla blablaltpgtltpgtblabla blabla blabla blabla blabla blabla blabla blabla blabla blablaltpgtltdivgt

ltdiv style=background-colorgrey colorblackgtltpgtMon troisiegraveme bloc ltpgtltpgtblabla blabla blabla blabla blablaltpgtltpgtblabla blabla blabla blabla blablaltpgtltdivgt

ltbodygtlthtmlgt SLoutfi