Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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 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
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 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
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 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
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 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 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 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
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 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 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
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