CM01 HTML
Télécharger le CM01 HTML en pdf
Pages : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
Page 1 : Markup Languages HTML et FormulairesDéveloppement Web – INFO4Mussab ZneikaCY-Tech1
Page 2 : LANGAGES DE BALISAGELe balisage de documentUn langage de balisage est un langage informatique qui utilisedes balisestags pour définir des éléments dans un document.Les langages de balisage sont des moyens d'annoter un documentélectronique.le balisage spécifie comment quelque chose doit être affiché ouce que quelque chose signifie.Certains langages de balisage populaires sontle langage de balisage hypertexte HTML,le langage de balisage extensible XML etle langage de balisage hypertexte extensible XHTML.2
Page 3 : LANGAGES DE BALISAGEHTMLHypertexte désigne un texte stocké sous forme électroniqueavec des liens de renvoi entre les pages.Le langage de balisage hypertexte est utilisé pour faciliter lapublication de pages Web en fournissant une structure quidéfinit des éléments tels que des tableaux, des formulaires, deslistes et des en-têtes, et identifie où commencent et seterminent les différentes parties de notre contenu.Il peut être utilisé pour intégrer d'autres formats de fichiers telsque des vidéos, des fichiers audio, des documents tels que desPDF et des feuilles de calcul, entre autres.HTML est le langage le plus utilisé dans la création de sites Web.3
Page 4 : LANGAGES DE BALISAGEHTML Exemplehtmlhead/headbodyp This is a paragraph./p/body/html4
Page 5 : BALISES, ATTRIBUTSHTML repose sur la notion de Balises tags.les Balises permettent de structurer le contenu d’un document HTMLLes balises HTML peuvent être de deux types :balises qui sont ouvertes puis fermées, et encadrent du contenuExample: b gras texte /bbalises qui s’ouvrent et se ferment en même tempsExample: br / , hr /, meta, img 5h1 Exemple /h1hr /pbgras/b puis emitalique/em, puis bemgras et italique/em/b. /p5
Page 6 : BALISES, ATTRIBUTSLes balises HTML peuvent avoir des attributs qui configurent cesbalises ou ajustent leurs comportements de différentes manièresLes attributs sont déclarés au sein la balise ouvrante de l’élémentEn HTML, les noms de balise et d'attribut ne sont pas sensibles à lacasse.Il est important de fermer les balises dans l'ordre6B Valid Text./Bb valid Text./bp align = "right"C'est aligné à droite /pbemgras et italique/em/b6
Page 7 : HTML PAGE LAYOUTStructure globale du document !DOCTYPE htmlhtml lang="en"headtitle Web progrming Class /title/headbodyHello world/body/html7
Page 8 : BALISES EN HTML5 Structuration du document HTML5Entête : header /headerMenu de navigation : nav /navSection : section /sectionArticle : article /articleEncadré : aside /asidePied de page : footer /footerBoîte de dialogue : dialog /dialog8
Page 9 : CRÉATION DE FICHIERS HTMLFormat de fichierAvant de pouvoir créer notre première page Web, nous devons créer unfichier que notre service reconnaîtra comme une page Web.Pour ce faire, nous pouvons ouvrir notre éditeur de texte choisi voir unecourte liste de potentiels dans la section sur les environnements dedéveloppement intégrés, et créer un nouveau document s'il n'a pas étécréé automatiquement.Nous sélectionnerons immédiatement « Enregistrer sous » dans le menuFichier de votre éditeur et donnerons son nom à votre nouvelle page.Quelques éditeurs HTML gratuits :Notepad++Brackets.ioAtomVisual Studio CodeSublime Text 39
Page 10 : PAGE LAYOUTTête HeadC'estlàquenousmettonsdesinformationssurlapageelle-mêmeappeléesmétadonnées.Remarque : Il est important que vos balises head soient toujours le premier ensemblede balises après html.Il est très fortement conseillé de toujours spécifier :Le titreL’auteurLa descriptionLes mots-clés10headtitleOur First Page/titlemeta name=”author” content=”Your Name Here” /meta name=”description” content=”A beginning web page for CSIT-107 SUNY Fredonia” /meta name=”keywords” content=”beginning html, learning, CSIT-107″ //head10
Page 11 : PAGE LAYOUTTête HeadÉtant donné que notre contenu ne changera pas, et que nousn'avons pas encore de feuille de style, nous allons simplementajouter notre déclaration de type de contenu pour le moment.meta http-equiv=”content-type” content=”text/html” /META HTTP-EQUIV=”EXPIRES” CONTENT=”Mon, 22 Jul 2002 11:12:01 GMT”META HTTP-EQUIV=”CACHE-CONTROL” CONTENT=”NO-CACHE”11
Page 12 : PAGE LAYOUTCorps BodyTout le contenu que nous souhaitons avoir à l'écran doit être englobé par un ensemble de balises corporelles. bodya href="page2.html"Hello in Web progrming Class!/ap Teacher: DR Mussab Zneika /p/body12
Page 13 : PAGE LAYOUTCorps Body Attributs avant HTML5BGCOLOR="...“ La couleur de l'arrière-plan de la page . -body BGCOLOR="9999ff"BACKGROUND="...“Le nom ou l'URL de l'image à afficher sur l'arrière-plan de la page.TEXT="...“La couleur du texte de la page. la valeur par défaut est le noir.LINK="...“ La couleur des liens non suivis. la valeur par défaut est le bleu.ALINK="...“ La couleur des liens activés. la valeur par défaut est le rouge.VLINK="...“La couleur des liens visités. la valeur par défaut est le violet 13
Page 14 : PAGE LAYOUTCorps Body attributs!DOCTYPE htmlhtml lang="en"head title Web progrming Class /title/headbody bgcolor="blue" text="white" link="black"a href="page2.html"Hello in Web progrming Class!/ap Teacher: DR Mussab Zneika /p/body/html14
Page 15 : PAGE LAYOUTAttributs universels15Les attributs universels sont des attributs quipeuvent êtreajoutés sur tous les éléments.Certains des attributs couramment utilisés sont :• class Spécifie un ou plusieurs noms de classe pour un élémentfait référence à une classe dans une feuille de style CSS.• Id définit un identifiant, unique au sein de tout le document,pour un élément.• style Spécifie un style CSS en ligne pour un élément.• lang Spécifie la langue du contenu de l'élément.
Page 16 : PAGE LAYOUTAttributs universels• title Contient une présentation textuelle de l'informationauquel il est lié.• dir Spécifie la direction du texte pour le contenu d'unélément. Les valeurs autorisées pour cet attribut sont :ltr Left To Right indique que le contenu est écrit degauche à droite.rtl Right To Left indique que le contenu est écrit de droiteà gauche.auto : c'est l'utilisateur qui décide.• contenteditableSpécifiesilecontenud'unélémentestmodifiable ou non.16
Page 17 : PAGE LAYOUTAttributs universels : Exemplehtmlbodyp id="p1“ dir="rtl"Write this text right-to-left!/pp dir="ltr"Write this text left-to-right!/pp contenteditable="true"This is an editable paragraph./p/body/htmlDans cet exemple nous montrons comment utiliser l'attribut dirpour le sens des paragraphes de texte. Le premier de droite àgauche et le second de gauche à droite.17
Page 18 : MISE EN FORME DE TEXTEBalises de formatage des caractères B.../BTexte en gras. STRONG.../STRONG Emphase plus forte généralement en gras. I.../I Texte en italique.EM.../EM Emphase généralement en italique.SMALL.../SMALL Le texte est légèrement plus petit que la normale.18
Page 19 : PAGE LAYOUTBalises de formatage des caractères BTexte en gras./B brSTRONGEmphase plus forte généralement en gras./STRONG brITexte en italique./I brEMEmphase généralement en italique/EM brSMALLle texte est légèrement plus petit que la normale /SMALL19
Page 20 : MISE EN FORME DE TEXTEBalises de formatage des caractères SUB.../SUB Subscript.SUP.../SUP Superscript.U…/U Underlined text.TT.../TT Chaque lettre utilise la même quantité d'espace horizontal. 20
Page 21 : MISE EN FORME DE TEXTEBalises de formatage des caractères Test SUBSubscript./SUB brTest SUPSuperscript./SUP brUunderlined text./U brTT Chaque lettre utilise la même quantité d'espace horizontal/TT21
Page 22 : MISE EN FORME DE TEXTE PLUS Texte marquéL'élément mark est nouveau dans HTML5 et est utilisé pourmarquer ou surligner une section de texte dans un document.Couleur jaune par default.pThis is markmarked text/mark yellow/ppThis is mark style="background-color:red;" marked text/mark red/p22
Page 23 : MISE EN FORME DE TEXTE PLUS Abréviation Nous utilisons la balise abbr pour marquer une expression comme abréviationforme abrégée d'un mot ou d'une phrase.L'attribut title est utilisé pour spécifier le terme complet. pin our class we study the abbr title="Hypertext Markup Language"HTML/abbr/p23
Page 24 : MISE EN FORME DE TEXTE PLUS Modifications apportées au contenu La balise ins est utilisé pour afficher le contenu qui a étéinséré dans un document.La balise del est utilisé pour afficher du texte qui a étésupprimé d'un document.Le contenu d'un élément ins est généralement souligné, alorsque le contenu d'un élément del est généralement barré.pinsInserted text/ins/ppdelDeleted text/del/p24
Page 25 : MISE EN PAGE DU TEXTE TEXT LAYOUTParagraphesPour développer un peu notre structure de base, nous pouvons diviserune longue section de texte en paragraphes.Nous pouvons le faire en ajoutant des pauses br/ dans notre code.Si nous allons le faire plusieurs fois, et si nous voulons styliser nosparagraphes sur toute la ligne, nous devrions plutôt envelopper chacund'eux dans un ensemble de balises de paragraphe, p/p.L'utilisationdesbalisesdeparagraphenouspermetd'ajouterautomatiquement un espacement autour de notre contenu pour leséparer du reste de la page.bodyp This is some text. It is really long. We want to break this into paragraphs so it looks more like a document. This is some text. It is really long. We want to break this into paragraphs so it looks more like a document. This is some text. It is really long. /pp This is some text. It is really long. We want to break this into paragraphs so it looks more like a document. This is some text. It is really long. We want to break this into paragraphs so it looks more like a document. This is some text. /pp This is some text. It is really long. We want to break this into paragraphs so it looks more like a document. This is some text. It is really long. We want to break this into paragraphs so it looks more like a document. /p/bodybodyThis is some text. It is really long. We want to break this into paragraphs so it looks more like a document. This is some text. It is really long. We want to break this into paragraphs so it looks more like a document. This is some text. It is really long. This is some text. It is really long. We want to break this into paragraphs so it looks more like a document. This is some text. It is really long. We want to break this into paragraphs so it looks more like a document. This is some text. This is some text. It is really long. We want to break this into paragraphs so it looks more like a document. This is some text. It is really long. We want to break this into paragraphs so it looks more like a document. /bodyAvantAprès25
Page 26 : PAGE LAYOUTDiv/SpanAlors que p nous aide à diviser notre texte, nous avonségalementbesoind'unmécanismepourséparerdifférentséléments de contenu, comme nous le faisions lorsque nousutilisions l'en-tête et le pied de page.Cela nous permettra de définir plus qu'un simple haut, milieuet bas de notre page. Pour ce faire, nous pouvons envelopperces sections dans des balises div.L'élémentHTMLdivpermetderegrouperunensembled'éléments en un seul bloc.L'élément HTML span est très similaire à div, sauf qu'il doitidentifier le contenu en ligne, c'est-à-dire le matériel qui setrouve dans un bloc de texte.26
Page 27 : PAGE LAYOUTDiv/Span : Exemplebodyheaderh1This is our first page! /h1/headerdiv id=”left”some menu items/divdiv id=”content”Hello World/divdiv id=”right”and some content on the right/div//bodyL'attribut align est désormais obsolète et ne doit plus être appliqué pour un divVous remarquerez que la mise en page ne va pas à gauche ou à droite lorsque nous étiquetons nos « divs » tout s'organisera de haut en bas.C'est parce que nous devons ajouter CSS pour le plein effet. Nous reprendrons cet exemple plus tard pour ajouter le CSS nécessaire à la création de la mise en page souhaitée.27
Page 28 : PAGE LAYOUTDiv/Span : Exemple28htmlheadstyle.lefttext text-align: left; .righttexttext-align: right; .centertexttext-align: center; /style/headbodyh1This is our first page! /h1div id=”left” class="lefttext" some menu items /divdiv id=”content” class="centertext" Hello World /divdiv id=”right” class="righttext" and some content on the right /div/body/html CSSDans cet exemple, nous utilisons trois classes CSS righttext, lefttext, centertext pour définir l'alignement de trois éléments div gauche, centre, droite 28
Page 29 : MISE EN PAGE DU TEXTE TEXT LAYOUTÉléments de titres HTMLLes titres HTML sont des titres ou des sous-titres que vous souhaitez afficher sur une page Web :H1.../H1 Un titre de premier niveau. H2.../H2 Un titre de deuxième niveau.H3.../H3 Un titre de troisième niveau .H4.../H4 Un titre de quatrième niveau. H5.../H5 Un titre de cinquième niveau. H6.../H6 Un titre de sixième niveau. 29
Page 30 : MISE EN PAGE DU TEXTE TEXT LAYOUTÉléments de titres HTML: ExemplebodyH1A first-level heading./H1H2A second-level heading./H2H3A third-level heading./H3H4A fourth-level heading./H4H5A fifth-level heading./H5H6A sixth-level heading/H6/body30
Page 31 : MISE EN PAGE DU TEXTE TEXT LAYOUTListes ordonnées et non ordonnéesNous utilisons les balises ol listes ordonnées ou ul listes non ordonnées.Les listes ordonnées, en revanche, concernent les articles qui doivent être commandés pour une raison, comme des instructions qui doivent être suivies dans le bon ordre.Les listes ordonnées et non ordonnées sont respectivement des listes d'éléments alphanumériques et non ordonnées.En les utilisant, nous pouvons créer des listes pour les afficher à l'écran car nous sommes habitués à voir une liste d'éléments.L’affichage des listes peut être personnalisé par les feuilles de style CSS.Nous pouvons placer des balises li imbriquées dans les balises ol ou ul pour représenter chaque élément de la liste.31
Page 32 : MISE EN PAGE DU TEXTE TEXT LAYOUTListes ordonnées et non ordonnées : ExampleolliFirst/liliSecond/liliThird/li/olulliAn item/liliAnother item/liliYet another item/li/ul32
Page 33 : MISE EN PAGE DU TEXTE TEXT LAYOUTListes ordonnées et non ordonnées : Examplebodyh2A Nested List/h2pLists can be nested list inside list:/pulliDrinkulliBlack tea/liliGreen tea/liliMilk/li/ul/liliFoodulliChicken/liliMeat/li/ul/liliSweetmeats/li/ul33
Page 34 : MISE EN PAGE DU TEXTE TEXT LAYOUTListes de définitionsUn ensemble de balises associé peut être utilisé lorsque vous souhaitez répertorier des définitions.Ce sont dl pour la liste elle-même, avec dt imbriqué à l'intérieur pour les termes et dd également imbriqué, pour la définition, à la suite de son dt correspondant.dldtCoffee/dtddBean-based caffeinated beverage/dddtTea/dtddLeaf-based caffeinated beverage/dddtWater/dtddStandard H20/dd/dl34
Page 35 : MISE EN PAGE DU TEXTE TEXT LAYOUTEntitésDans les exemples de la section En-tête etpied de page, nous avons placé un symbolede droit d'auteur à l'écran à l'aide de« © »« © » a indiqué au navigateur quelsymbole nous voulions utiliser. Il s'agit d'unsymboleréservé,oud'uneentité,enHTML.Nouspouvonsappelerdesentitésenutilisant&nomdel'entitéici;ou&numéro d'entité iciPar exemple, signifie un espacestandard. C'est une façon d'insérer desespaces supplémentaires dans notre sortie.35
Page 36 : NAVIGATIONEnchaînement LinkingLes liens nous permettent de passer d'une page Web à une autre.Il existe généralement plusieurs types de liens :Liens d'une page à une autre sur le même site Web.Liens d'une partie d'une page Web vers une autre partie dumême page.Liens qui s'ouvrent dans une nouvelle fenêtre de navigateur.Liensquidémarrentvotreprogrammedemessagerieetadressent un nouvel e-mail à quelqu’un.Les liens en HTML peuvent prendre deux formes, toutes deuxcréées avec la balise d'ancrage a.36
Page 37 : NAVIGATIONEnchaînement Linking L’élément a permet de définir des liens hypertextesexternes ou internes au document.La valeur de l'attribut href est la page que les utilisateursretrouvent quand ils cliquent sur le lien.Le texte entre l'ouverture Balise a et balise de fermeture/a est connu sous le nom de texte de lien.Lorsque nous établissons un lien vers un site Web différent, lavaleur de l'attribut href sera l'adresse Web complète du site,connue sous le nom d'URL absolue.a href=https://www.w3.org/W3C /a37
Page 38 : NAVIGATIONEnchaînement Linking :Exemple H3 Useful Sites /H3ullia href="https://www.google.com/" google/a/lilia href="https://www.yahoo.com/" yahoo/a/lilia href="https://www.w3schools.com/" W3C/a/li/ul38
Page 39 : NAVIGATIONCible Target Attribut:Bien que la balise d'ancrage prenne en charge plusieursattributs, l'un des plus importants d'entre eux est « cible ».Cet attribut décrit où les liens seront chargés, comme unnouvel onglet ou la même fenêtre d'onglet/navigateur quenous utilisons déjà.L'attribut peut prendre l'une des valeurs suivantes pourdéfinir cet emplacement.blankAffiche le nouveau document dans une nouvelle fenêtre non nommée.selfLe nouveau document s'affiche dans le même cadre que l'ancre qui le charge ; c'est la valeur par défaut.parentAffiche le nouveau document dans le cadre parent ; si pas de parent, comme self.topAffiche le nouveau document dans toute la fenêtre ; s'il n'y a pas de cadres, comme self.nameUn cadre nommé dans l'attribut Name d'un élément FRAME.39
Page 40 : NAVIGATIONCible Target Exemple Ouvrir le lien dans un nouvel onglet/une nouvelle fenêtre 40bodya href="http://www.google.com" target="blank" Google/a/bodyDans cet exemple, nous utilisons l'attribut target sur labalise d'ouverture a avec la valeur blank pour dire aunavigateur d'ouvrir le lien google dans une nouvellefenêtre ou un nouvel onglet.40
Page 41 : NAVIGATIONLien vers un autre site Lorsque vous créez un lien vers un site Web différent, lavaleur de l'attribut href sera l'adresse Web complète du site,qui est connue sous le nom d'URL absolue.H3 Useful Sites /H3ullia href="https://www.google.com/" google/a/lilia href="https://www.yahoo.com/" yahoo/a/lilia href="https://www.w3schools.com/" W3C/a/li/ul41
Page 42 : NAVIGATIONLien vers d'autres pages sur le même site H1 Welcome to my home page /H1a href="about.html" About me/a a href="Teaching.html" My Teaching/a a href="publications.html" My Publications /a a href="CV.html" My Short CV /aSi les pages liées au site sont dans le même dossier, puis lavaleur de l'attribut href est juste.S'ils sont dans différents dossiers, alors nous utilisons leschemins relatifs.42
Page 43 : NAVIGATIONLien vers une spécificité partie de la même page H1 id="top" Welcome to my home page /H1a href="down"Click here to go further down./aSome more text. Even more text! a href="top" go to top of the page /ah1 id="down" This is where we want to "jump" to./h1La balise a peut pointer vers n'importe quel élément ayantun id attribut.La valeur de l'attribut href commence par le symbole , suivide la valeur de l'attribut id de l'élément auquel voussouhaitez établir un lien.43
Page 44 : NAVIGATIONLiens Adresse e-mail et numéro de téléphoneSi la valeur de l'attribut href commence par tel:, votre appareilcomposera le numéro lorsque vous cliquerez dessus. Celafonctionne sur appareils exécutant des logiciels permettant depasser des appels téléphoniques.Si la valeur de l'attribut href commence par mailto: il essaierad'ouvrirleprogrammedemessageriedel'utilisateuretadressera un e-mail à une adresse e-mail spécifiée.a href=“tel:0033xxxxxxx"Call us/aa href=“mailto:mussab.zneika@cyu.fr"Send email/a44
Page 45 : NAVIGATIONNavHTML5 définit un élément nav qui peut être utilisé pour contenirla navigation principale d'un site Web, qu'il s'agisse d'une liste deliens ou d'un élément de formulaire tel qu'un champ de recherche.Ceci est particulièrement utile pour les logiciels de lecture d'écran,car les balises indiquent à quoi servent les liens.nav ullia href="about.html"About Us/a/lilia href="clients.html"Our Clients/a/lilia href="services.html"Our Services/a/lilia href="contact.html"Contact Us/a/li/ul/nav45
Page 46 : GRAPHIQUESImages Traditionnellement, nous avons fait face à ce compromisen utilisant différents formats d'image dans différenteszones de notre site.Tout en réservant JPG pour nos images ou photos plusgrandes, nous pouvons utiliser GIF pour les icônes etindicateurs plus petits.Les GIF nous limitent à 256 couleurs, mais comme laplupart des icônes utilisent peu de couleurs, nous pouvonsici capitaliser sur les avantages de ce format.Il est important de noter que les images raster perdentrapidement en qualité lorsqu'elles sont rendues à destailles supérieures à la largeur ou à la hauteur de l'imaged'origine.46
Page 47 : GRAPHIQUESAjout d'images La balise d'image img est utilisées pour ajouter une image à unepage Web.La balises d'image img n'a pas de balises de fermeture.La balise d'image img doit comporter les deux attributs suivants :Src : Spécifie l'URL de l'imageAlt : Fournit une description textuelle de l'image qui décrit leimage si nous ne pouvons pas la voir.img src="images/hello.jpg" alt="Hello World"/imgsrc="https://www.cyu.fr/uas/cy/LOGOTAMPON/logotampon.png"alt="CYU University"47
Page 48 : GRAPHIQUESAjout d'imagesOutre les attributs universels, la balise img a les attributs suivants Src : spécifie l'URL de l'image.Alt : fournit une description textuelle de l'image qui décrit leimage si nous ne pouvons pas la voir.Sizes : tailles d'image entre les points d'arrêt.Usemap : nom de l'image cliquable à utiliser.Ismap : indique si l'image est une image cliquable côté serveur.Srcset : images à utiliser dans différentes situations parexemple, écrans haute résolution, petits moniteurs, etc..Width : Spécifie la largeur de l'image.Height : Spécifie la hauteur de l'image .48
Page 49 : NAVIGATIONAjout d'images : Exemple49centerimg src="TimBerners-Lee.png" alt="Sir Tim Berners-Lee" width="200"height="200"//centerp The inventor of the World Wide Web and one of Time Magazine’s ‘100 Most Important People of the 20th Century’, Sir Tim Berners-Lee is a scientist and academic whose visionary and innovative work has transformed almost every aspect of our lives.. /p49
Page 50 : TABLEAUXDéfinition d'un tableau Un tableau est défini en HTML comme le regroupement d’unensemble de lignes.Chaque ligne est composée d’un ensemble de cellules.Le début d’un tableau est défini par la balise table, labalise /table le termine. Alors pour créer un tableau,nous devons d'abord définir son début et sa fin avec desbalises :L'attribut déconseillé "border" définit la largeur de labordure entourant le tableau.table…………/table50
Page 51 : TABLEAUXDéfinition d'un tableauLa balise tr Table Row introduit une nouvelle ligne, elle estsuivi d'un ou plusieurs éléments td un pour chaque cellule surcette ligne. A la fin de la ligne, vous utilisez une balise defermeture /tr.Chaque ligne du tableau aura exactement la largeur du tableau.Toutes les lignes d’un tableau possèdent exactement le mêmenombre de cellules que la ligne qui en comporte le plus.Une cellule est définie par les balises td Table Data et /td.Une cellule peut contenir tout type d’information image, lien,liste,....LabalisethTableHeadingestutiliséejustecommel'élément td, mais son but est de représenter le titre pour unecolonne ou une ligne.51
Page 52 : TABLEAUXDéfinition d'un tableau ExempleDans cet exemple, nous créons un tableau avec une bordure de5 pixels.table border="5"trthColumn 1/ththColumn 2/ththColumn 2/th/trtrtdData 1/tdtdData 2/tdtdData 3/td/tr/table52
Page 53 : TABLEAUXcaption : légende d'un tableauL'élément caption définit la légende ou le titre d'un tableau.L'élément caption devrait être le premier élément enfant del'élément parent table.On peut utiliser les attributs universels sur cet élément.Nepasutiliseralignattribut.Ilaétédéprécié.L'élémentcaption devrait être mis en forme grâce au CSS. Afin d'obtenirdes effets similaires à cet attribut, on utilisera les propriétés CSScaption-side et text-align on vais voir ça plus tard en CSS.53
Page 54 : TABLEAUXcaption : légende d'un tableau Exempletable border="2"captionWeb programming: Grades/captiontrthFirst name/ththLast name/ththGrade/th/trtrtdMussab/tdtdZneika/tdtd15/20/td/tr/table54
Page 55 : TABLEAUXtable Attributs : Cet élément inclut les attributs universels. Les attributs listés ci-après sont désormais tous dépréciés.align : est utilisé pour spécifier l'alignement du tableau et de soncontenu.trois valeurs : “left”, “right” ou “center”. A éviter.width : la largeur du tableau, en pixels ou bien en pourcentage dela largeur de son environnement.cellspacing : espace en pixels qui existe entre chaque cellule dutableau.cellpadding : espace entre le bord de la cellule et son contenu enpixel.border : contrôle l’affichage des bordures du tableau. L’affichagede ces bordures est très différent d’un navigateur à l’autre. Pourdésactiver l’affichage des bordures : table border=”0”bgcolor : la couleur de fond du tableau.Nous le faisons généralement avec CSS.55
Page 56 : TABLEAUXtable Attributs Exampletable border="2"cellspacing="0"cellpadding="10"width="600 "bgcolor="lightyellow"table border="2"cellspacing=“10"cellpadding=“0"width="600 "bgcolor="lightyellow"table border="2"cellspacing=“10"cellpadding=“10"width="600 "bgcolor="lightyellow"56
Page 57 : TABLEAUXFusion de cellules Cell SpanningLe navigateur fait l’hypothèse que :toutes les lignes ont le même nombre de cellules.toutes les colonnes ont le même nombre de lignes.Certains tableaux ont des cellules qui doivent s'étendre sur plusieurs lignes et colonnes.Nous pouvons créer des cellules « extra-larges » en ajoutant :L'attribut rowSpan est utilisé pour créer une cellule qui s'étend sur plusieurs lignes.l'attribut colSpan est utilisé pour créer une cellule qui s'étend sur plusieurs colonnes.57
Page 58 : TABLEAUXFusion de cellules Cell Spanning : Exempletable border="2 " cellspacing="2" bgcolor="lightyellow"tr thID/th thFirst Name/th thMonday/th thTuesday/ththThursday/th thFriday/th /trtrtd1/tdtdJohn/tdtd colspan ="2"work/tdtd not work/tdtd rowspan="2"closed/td /trtrtd2/tdtdJane/tdtd not work /tdtd colspan ="2"work/td/tr/table58
Page 59 : TABLEAUXUtilisation des partiesLes balises thead, tfoot et tbody sont utilisées pourregrouper les parties du tableau En-tête, pied de page,corps.Notez que tfoot DOIT apparaître après tbody.Ce sont aussi des éléments logiques sémantiques plutôt quephysiques.59
Page 60 : TABLEAUXUtilisation des parties Exempletabletheadtr thFirst name/th thLast name/th /tr/theadtbodytr tdMussab/td tdZneika/td /trtr tdAlex/td tdZeno/td /tr/tbodytfoottr td colspan="2" align="center" Footer/td /tr/tfoot/table60
Page 61 : TABLEAUXRegroupement de colonnesLa balise col apparaît en tant qu'enfant de la balisetable ou colgroup et décrit le formatage de lacolonne entière.La balise colgroup permet d'appliquer une mise enforme à plusieurs colonnes.Par exemple, nous pouvons utiliser ces balises pourdéfinir la mise en forme des cellules entières d'une ouplusieurs colonnes, en une étape au lieu de définir lamise en forme de chaque cellule séparément.61
Page 62 : TABLEAUXRegroupement de colonnesDans cet exemple, nous définissons la couleur d'arrière-plan de la premièrecolonne en bleu clair, et la couleur d'arrière-plan des deux dernières colonnes enjaune.table border="1" cellspacing="0" cellpadding="0" width="600"colgroupcol style="background-color:lightblue"col span="2" style="background-color:yellow"/colgroup62
Page 63 : SUPPORT MÉDIAVidéoL'élément video intègre un contenu vidéo dans undocument.Les fichiers vidéo que nous souhaitons utiliser doivent êtreau format OGG, qui est un format vidéo open source.Nous définissons notre vidéo de manière très similaire auxautres éléments que nous prenons dans notre page.Une vidéo initiale qui est simplement lue lorsque la pageest chargée peut être complétée en ajoutant les élémentssuivants :video src="video.ogg" width="400" height="222"Ici la description alternative/video63
Page 64 : SUPPORT MÉDIAVidéo AttributsL'attribut controls pour ajouter les boutons « Lecture », « Pause » et « la barrede défilement ».L'attribut preload="auto" permet de spécifier au navigateur de débuter letéléchargement de la vidéo tout de suit.L'attribut autoplay="true" permet de lancer la lecture automatiquement.L'attribut poster="image.jpg" permet d'indiquer une image à afficher par défautdans l'espace réservé par la vidéo, avant que la lecture de celle-ci ne soitlancée.video controls width="400" height="222"src="20141001184503.mp4" preload="auto" poster="index.jpg"64
Page 65 : SUPPORT MÉDIAVidéoLes navigateurs ne prennent pas en charge l'ensemble des formatsvidéo, et il est possible de fournir plusieurs sources grâce à deséléments source. Le navigateur utilisera la première ressourcedont il connaît le format.video controlssource src="maVideo.mp4" type="video/mp4"source src="maVideo.webm" type="video/webm"pVotre navigateur ne prend pas en charge les vidéos HTML5/p/video65
Page 66 : SUPPORT MÉDIAAudioLes fichiers audio sont en fait identiques à l’approche vidéofichiers .ogg. A l'exception de la possibilité de définir la largeur etla hauteur.Tout ce que nous devons changer est notre vocabulaire, en utilisantle mot audio au lieu de vidéo dans notre tag.Il n’y a pas de codecs qui fonctionnent dans tous les navigateurs.Pour faire fonctionner votre document audio ou vidéo sur toutes lesplateformes, vous devrez encoder le même vidéo en de multiplescodecs.audio controls="controls"source src="song.mp3" type="audio/mpeg" /source src="song.ogg" type="audio/ogg" //audio66
Page 67 : LES FORMULAIRESIntroduction aux formulaires Traditionnellement,"formulaire"faitréférenceàundocumentimpriméquicontientdesespacespourremplircertainesinformations.HTML emprunte le concept de formulaire pour faire référence àdifférentsélémentsquivouspermettentdecollecterdesinformations auprès des visiteurs de nos sites.Les formulaires sont partout autour de nous login, formulaire decontact, sign up, etc….67
Page 68 : LES FORMULAIRESIntroduction aux formulaires Le formulaire est utilisé pour envoyer les données que l'utilisateursaisira au serveur qui les traitera.Comment fonctionnent les formulaires :1. Un utilisateur remplit un formulaire puis il appuie sur un boutonde soumission pour soumettre les informations au serveur.2. Le nom de chaque champ de formulaire est envoyé au serveuravec le valeur saisie ou sélectionnée par l'utilisateur.3. Le serveur traite les informations à l'aide d'un langage deprogrammation tel que PHP, ASP.net, JSP Java Server Pages ouPython.Les actions et les champs que vous autorisez dans votre formulairedéterminent ce que l'utilisateur est autorisé à faire et quellesinformations il est autorisé à voir.68
Page 69 : LES FORMULAIRESLa balise Formulaire FormPour créer une section de formulaire, nous fournissons auformulaireunnom,unidentifiant,uneactionetuneméthode. Un exemple avec des attributs vides ressemble àceci :Le nom et l'identifiant de notre formulaire sont la façon dontnous nous y référerons dans notre code lors de l'interactionavec lui en utilisant CSS, JavaScript ou d'autres langages.L'action est l'endroit où la page doit envoyer les informationsetoùlenavigateuriralorsquenousappuieronssurenvoyer.Notreméthodeestlafaçondontnousenverronsnosinformations, en utilisant GET ou POST.form action="xxxx" method="xxxx" /form69
Page 70 : LES FORMULAIRESLes attributs de formulaire : AttributDescriptionactionSa valeur est l'URL spécifiant où envoyer les données lorsque le bouton Soumettre est cliqué.methodLes formulaires peuvent être envoyés en utilisant l'un des deux méthodes : "get" : informations passées dans la barre d’adresse"post" : envoie les données dans le corps de la requêtetargetIndique où ouvrir la page envoyée à la suite de la demande target =blank signifie ouvrir dans une nouvelle fenêtre target =top signifie utiliser la même fenêtre idla valeur est utilisée pour identifier la forme distinctement de autres éléments de la page nameLe nom du formulaire70
Page 71 : LES FORMULAIRESMethod GET L'envoi des données à l'aide de la méthode GET, place tous les champsdu formulaire par nom et valeur appelée paire clé et valeur dans labarre d'adresse. Ceci allonge notre URL en ajoutant chaque élément àl'adresse de la page de réception.L'avantage d'utiliser la méthode GET est que les paramètres de l’URLpeuvent être enregistrés avec l’adresse du site Web. Cela permet demettre une requête de recherche en marque-page et de la récupérerplus tard.Bien que bénéfique, il existe deux cas dans lesquels nous ne voulons PASutiliser GET :nous ne voulons pas que l'utilisateur voit ce qui a été envoyécomme des mots de passe ou des informations confidentielles ;nous voulons envoyer beaucoup d'informations.https://www.google.com/search?q=cergy+université71
Page 72 : LES FORMULAIRESMethod POST Les données publiées sont envoyées du navigateur au serveur enarrière-plan, lorsque le client et le serveur commencent àcommuniquer.Lesdonnéessontenvoyéesdanslesen-têtesdelacommunication, et ne sont pas visibles pour l'utilisateur final.Les pages mises en signet avec la méthode de publicationn'auront plus accès auxinformationspar la suite, et cesinformations sont perdues si l'utilisateur quitte la page.La manière dont les données sont utilisées et les valeursrenvoyés nous amènent aux langages de script.72
Page 73 : LES FORMULAIRESGET VS POSTGET POST Visibilité Visible pour l’utilisateur dans le champ d’adresse Invisible pour l’utilisateur Marque-page et historique de navigation Les paramètres de l’URL sont stockés en même temps que l’URLL’URL est enregistrée sans paramètres URLCache et fichier log du serveur Les paramètres de l’URL sont stockés sans chiffrement Les paramètres de l’URL ne sont pas enregistrés automatiquementComportement lors de l’actualisation du navigateur / Bouton « précédent » Les paramètres de l’URL ne sont pas envoyés à nouveauLe navigateur avertit que les données du formulaire doivent être renvoyéesType de données Caractères ASCII uniquement. Caractères ASCII mais également données binairesLongueur des données Limitée - longueur maximale de l’URL à 2 048 caractèresIllimitée73
Page 74 : LES FORMULAIRESTypes de contrôles de formulaireIl existe plusieurs types de contrôles de formulaire.Radio Button Check BoxText BoxPasswordFile uploadSubmit buttons74
Page 75 : LES FORMULAIRESLa balise input La balise input est utilisée pour créer plusieurs formulairesdifférents.Le type d'attribut indique de quel type d'élément il s'agit.la valeur de l'attribut type peut être :o texto checkboxo radioo passwordo hiddeno submito reseto buttono fileo image75
Page 76 : LES FORMULAIRESLa balise inputLa balise input est utilisée pour créer plusieurs formulaires différents.Le type d'attribut indique de quel type d'élément il s'agit.La valeur de l'attribut type peut être :o text, checkbox, radio, password, hidden, submit, reset, button,file, imageAttributs communs de la balise input :o name : le nom de l'élément, chaque input élémentdoit avoir unnom pour que l'on peut récupérer sa valeur. Ce nom n'est pas visiblesur la page.o value : la valeurde l'élément ; utilisé de différentes manières pourdifférents valeurs de type.o readonly : la valeur ne peut pas être modifiée.o disabled : l'utilisateur ne peut rien faire avec cet élément.76
Page 77 : LES FORMULAIRESZone de texte TextboxLorsque l'attribut type a du text comme valeur, le navigateurcrée une zone de texte sur une seule ligne.La balise input est auto-fermante.L'attribut maxlength définit le nombre de caractères maximumacceptés dans le champ. Par exemple, si nous demandions uncode postal en France, l'attribut maxlength pourrait avoir unevaleur de 5.input type="text" name="text1" value="enter your name“/77
Page 78 : LES FORMULAIRESLe LabelChaque contrôle de formulaire doit avoir son propre élémentlabel qui décrit aux utilisateurs la fonctionnalité du champ.Il peut être utilisé de deux manières :Enroulé autour de la description textuelle et de l'élément decontrôle de formulaire.Séparé du contrôle de formulaire. Dans ce cas nous utilisonsle for pour indiquer au contrôle de formulaire qu’il s'agitd'une étiquette.labelFirst name: input type="text" name="fname"//labellabel for="lname"Last name:/labelinput type="text" id="lname"/78
Page 79 : LES FORMULAIRESPremier exemple :form action= "proce.php" method= "post"label for="fname"First name:/labelinput type="text" id= "fname" name="fname"/label for="lname"Last name:/labelinput type="text" id="lname" name="lname"/label for="age"Age:/labelinput type="text" id="age" name="age"//form79
Page 80 : LES FORMULAIRESZone de texte multiligne textareaL'élément textarea est utilisé pour créer une zone de textemultiligne.Une balise qu’il faut ouvrir et fermer.Pas de value= " ", le texte par défaut se met entre les deuxbalises ouvrante et fermante.L'attribut cols indique la largeur de la zone de texte.L'attribut rows indique combien de lignes la zone de texte doitoccuper verticalement.textarea name="comments" cols="50" rows="5"Enter your comments.../textarea80
Page 81 : LES FORMULAIRESChamp de mot de passe Password inputLa balise input avec une valeur de type "password" est utilisée pour créer une zone de texte dont ses caractères sont masqués.Même si le mot de passe est masqué à l'écran, les données d'un champ "mot de passe" ne sont pas nécessairement envoyées de manière sécurisée au serveur. Il peut également avoir les attributs size et maxlength commela zone de texte d'une seule ligne.input type="password" name="password" size="20" maxlength="15"/81
Page 82 : LES FORMULAIRESLes boutons radio input type="radio"Les boutons radio permettent aux utilisateurs de sélectionner uneseule option parmi plusieurs.La valeur est importante : c'est elle qui est renvoyée au serveur.La valeur de chacun des boutons dans un groupe devrait êtredifférente.Les boutons radio d'un groupe doivent avoir le même nom.L'attribut "checked" est utilisé pour indiquer quelle valeur doit êtresélectionnée lors du chargement de la page.Un seul bouton radio dans un groupe doit utiliser l'attribut "checked".pPlease select your favorite Drink: br /input type="radio" name="drink" value="tea" checked="checked"/ Tea input type="radio" name="drink" value="coffee"/ coffeeinput type="radio" name="drink" value="milk"/ Milk /p82
Page 83 : LES FORMULAIRESLes cases à cocher input type="checkbox"Les cases à cocher permettent aux utilisateurs de sélectionneretdésélectionnez un ou plusieurs options.L'attribut value indique la valeur envoyée au serveur si cela est lacase cochée.L'attribut "checked" est utilisé pour indiquer quelle valeur doitêtre sélectionnée lors du chargement de la page.pPlease select your favorite social media applications: br/input type="checkbox" name="media" value="facebook"/Facebook input type="checkbox" name="media" value="twitter" checked="checked"/twitter input type="checkbox" name="media" value="whatsup"/whatsapp/p83
Page 84 : LES FORMULAIRESLa liste déroulante Drop Down ListLa balise select est utilisée pour créer une liste déroulante.La balise select contient au moins deux option éléments.La balise option est utilisée pour spécifier les options que lel'utilisateur peut choisir.L'attribut value de l'élément option indique le valeur qui estenvoyée au serveur.L'attribut "selected" est utilisé pour indiquer l'option qui doit êtresélectionné lors du chargement de la page.84
Page 85 : LES FORMULAIRESLa liste déroulante Drop Down List : Exempleform action="page1.php"pSelect you country?/pselect name="country"option value="France"France/optionoption value="China"China/optionoption value="Italy"Italy/optionoption value="USA"USA/optionoption value="Germany"Germany/option/select/formSi l'utilisateur ne sélectionne pas d'option, alors la premièreoption France dans notre exemple sera envoyée au serveurcomme valeur de contrôle.85
Page 86 : LES FORMULAIRESLa liste déroulante Drop Down ListLes attributs «size» et «multiple» de la balise select peuttransformer une liste déroulante, en une liste d'options multiplesqui affiche plusieurs options à la fois.form action="page1.php"p You can select more than one option by holding down control./pselect name=“vistedcountries” size=“3" multiple="multiple"option value="France"France/optionoption value="China"China/optionoption value="Italy"Italy/optionoption value="USA"USA/optionoption value="Germany"Germany/option/select/form86
Page 87 : LES FORMULAIRESLa liste déroulante Drop Down ListLa balise optgroup, utilisé dans un formulaire, permet de créerun groupe d'options parmi lesquells on peut choisir dans un élémentselect.select name="city" id="city"optgroup label="France"option value="Paris"Paris/optionoption value="Lyon"Lyon/optionoption value="Marseille"Marseille/option/optgroupoptgroup label="German"option value=" Berlin"Berlin/optionoption value="Hamburg"Hamburg/option/optgroup/select87
Page 88 : LES FORMULAIRESZone d'entrée de fichier input type="file"La zone de saisie de fichier aide les utilisateurs à uploader leursfichiers vers le serveur.Utiliser les attributs suivants :AttributDescriptionacceptNous permet de définit les types de fichier qui doivent être acceptés. filesUn objet Filelist qui liste les fichiers choisis.captureLa source à utiliser pour capturer des images ou des vidéos.multipleUn attribut booléen qui, lorsqu'il est présent, indique que plusieurs fichiers peuvent être sélectionnés.88
Page 89 : LES FORMULAIRESZone d'entrée de fichier input type="file" : Exemples!--we can select only one file with all extensions --input type="file" id="myfile" name="myfile"/!--we can select multiple files with all extensions --input type="file" id="myfile" name="myfile" multiple /!--we can select multiple files with world and pdf formats -- input type="file" id="myfile" name="myfile"multiple accept=".doc,.docx,.pdf/!--we can select multiple files of all the formats of image, audio and video --input type="file" id="myfile" name="myfile" multipleaccept="image/, audio/, video/"/89
Page 90 : LES FORMULAIRESBouton d’envoie Submit ButtonLe bouton d’envoie input type="submit" est utilisé pourenvoyer les informations saisies dans les éléments de contrôledu formulaire au serveur.L’attribut value est obligatoire et permet de donner le «titre»du bouton.Les boutons de soumission peuvent être affichés de différentsmanières selon les navigateurs.CSS peut être utilisé pour contrôler l'apparence des boutons desoumission.input type="submit" value="send"90
Page 91 : LES FORMULAIRESBouton de reset Reset ButtonLe bouton de reset input type= "reset" est utilisé pourremettreàzérotouteslesinformationssaisiesdansleséléments de contrôle du formulaire.L’attribut value permet de donner le «titre» du bouton.Les boutons de soumission peuvent être affichés de différentsmanières selon les navigateurs.CSS peut être utilisé pour contrôler l'apparence des boutons dereset.input type=“reset" value="send"91
Page 92 : LES FORMULAIRESBouton image Image ButtonLe input type=" image" est utilisé pour ajouter une image pour lebouton d'envoie.Nous pouvons utiliser les attribues src, width, height, et alt tels quenous les utilisons avec les balise img.First name:input type="text" id= "fname" name="fname"/brLast name:input type="text" id= "lname" name="lname"/brinput type="image" src="submitb.jpg" width="100" height="50"92
Page 93 : LES FORMULAIRESBoutonUn bouton est similaire au bouton d'envoie, mais contrairement auxautres styles de saisie, il peut inclure du texte ou une image.Sa mise en forme par défaut lui donne un aspect de bouton biseauté.Trois types : button, reset, submitbutton type="button"Click Here!/buttonbrbutton type="submit"img src="submitb.jpg"width="50" height="25"/ /button brbutton type="reset"Reset all!/buttonbr93
Page 94 : LES FORMULAIRESChamp caché Hidden inputOn peut cacher un champ avec input type="hidden".Les données dans les contrôles cachés ne sont pas affichées sur lepage, mais nous pouvons les voir si nous utilisons l'option «Afficher lasource».Les données sont dans l'attribut value.input type="hidden" name="currentpage" value="orderpage"94
Page 95 : LES FORMULAIRESChamps de forme HTML5 Bon nombre des nouveaux éléments HTML5 que nous examinons nous aiderontégalement dans nos tâches de validation lorsque les utilisateurs remplissent desformulaires.Ces entrées tenteront de valider et/ou de limiter l'entrée de l'utilisateur auxseules données valides. En faisant cela immédiatement, nous créons unemeilleure expérience à la fois pour l'utilisateur et le programmeur.Traditionnellement, la validation devait être effectuée lors de l'envoie desdonnées au serveur, ce qui entraînait le rechargement de la page en cas d'erreurs.L'autre approche populaire consistait à effectuer une validation à l'aide deJavaScript côté client en évitant le rechargement, mais la validation devraittoujours être répétée sur le serveur au cas où l'utilisateur final aurait désactivéJavaScript.Certains des types d'entrée les plus utiles sont les suivants :input type="url" Tentera de formater le texte de l'utilisateur dans un lienapproprié, ou affichera une erreur.input type="email" S'assurera qu'un e-mail saisi est dans le bon format ouaffichera une erreur.95
Page 96 : LES FORMULAIRESChamps de forme HTML5input type="email" S'assurera qu'un e-mail saisi est dans le bon format ou affichera une erreur.Nous pouvons également créer une entrée qui limite lesvaleurs à une plage fixe et incrémente les limites, que nousdevions auparavant afficher à l'utilisateur sur la page, puisvalider après la saisie.Ces limites sur une plage affichées sous forme de curseur sont également valables sur un champ numérique affichées sous forme de flèches :email: input type="email" name="email"age: input type="number" name="age"min="18" max="62" value="30"step="1"age: input type=“range" name="age"min="18" max="62" value="30" step="1"96
Page 97 : LES FORMULAIRESChamps de forme HTML5HTML5 introduit également une multitude de contrôles de calendrier et d'heure. Nous pouvons spécifier une date, une semaine ou un mois ainsi qu'une heure, un jour et une heure et un jour et une heure locaux. Chacun de ces champs limitera l'entrée de l'utilisateur aux champs valides pour ce type.Birthday: input type="date" name="date" value="2021-11-08"On peut utiliser les attributs min etmax afin de restreindre les datesquipeuventêtresaisiesparl'utilisateur.Ladatequenouspouvonssélectionnerdoitêtrecomprise entre la date en valeurmin et la date en valeur max.97
Page 98 : LES FORMULAIRESChamps de forme HTML5Options de calendrier :Le input type="month" crée un contrôle de mois et d'annéeoù l'utilisateur peut entrer le format de date comme "AAAA-MM".On peut utiliser les attributs min et max afin de restreindre lesdates qui peuvent être saisies par l'utilisateur.input type="month" name="month" value="2021-07"min="2010-08" max="2021-08"98Cechampn'estimplémentéquesurChrome,OperaetEdgesurlesordinateurs. Pour les autres navigateursqui ne supportent pas ce champ, le champsera transformé en une simple Zone deTexte.
Page 99 : LES FORMULAIRESChamps de forme HTML5Options de calendrier :Le input type="week" définit un contrôle de semaine etd'année.L'apparence de ce champ est différente selon les navigateurs.Start Week: input type="week" name="week"value="2021-W12" min="2010-W11" max="2021-W44"99
Page 100 : LES FORMULAIRESChamps de forme HTML5Options de temps :L'apparence de ces champs est différente selon les navigateurs. Time: input type="time" name="time"value="14:30"Time input type="datetime-local"name="time2"100
Page 101 : LES FORMULAIRESChamps de forme HTML5Plus des Champs input type="color" input type="tel"input type="search"input type="url"101
Page 102 : LES FORMULAIRESBalises de jeu de champs et de légende La balise fieldset est utilisée pour regrouper les contrôles liésdans un formulaire qui dessine un cadre autour des contrôles duformulaire lié.L'attribut "formid" spécifie à quelle forme le "fieldset" appartient.La balise legend représente une légende pour le contenu de sonélément parent fieldset.L'attribut "disabled" spécifie qu'un groupe d'éléments de formulaireliés doit être désactivé.102
Page 103 : LES FORMULAIRESBalises de jeu de champs et de légende : Example:103
Page 104 : https://developer.mozilla.org/fr/docs/Learn/HTML/Tableshttps://developer.mozilla.org/en-US/docs/Learn/Formshttps://www.w3schools.com/html/htmlforms.asphttps://www.w3schools.com/html/htmltables.aspMENDEZ, MICHAEL. THE MISSING LINK: AN INTRODUCTION TO WEB DEVELOPMENT AND PROGRAMMING. 2014, CH14.MENDEZ, MICHAEL. THE MISSING LINK: AN INTRODUCTION TO WEB DEVELOPMENT AND PROGRAMMING. 2014, CH13MENDEZ, MICHAEL. THE MISSING LINK: AN INTRODUCTION TO WEB DEVELOPMENT AND PROGRAMMING. 2014, CH11,12MENDEZ, MICHAEL. THE MISSING LINK: AN INTRODUCTION TO WEB DEVELOPMENT AND PROGRAMMING. 2014, CH9,10SOURCES D'INFORMATIONS104
Pages : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104