En-tête d'un document HTML : l'élément <head> Balises dans. <head> Balise "meta" Balise "meta" Balise "meta" Balise "meta" Exemple :

Dimension: px

Commencer à balayer dès la page:

Download "En-tête d'un document HTML : l'élément <head> Balises dans. <head> Balise "meta" Balise "meta" Balise "meta" Balise "meta" Exemple :"

Pierre-Antoine Grégoire
il y a 7 ans
Total affichages :

1 Balises dans <head> En-tête d'un document HTML : l'élément <head> L'en-tête, head, d'un document HTML peut contenir 5 balises : title - titre du document link - pour importer un fichier script - pour insérer un programme JavaScript style - pour définir de styles meta - pour définir des méta-données associées au document : encodage, auteur, date, etc. 1 2 Plusieurs formes de meta : <meta charset="utf-8" /> <meta http-equiv="nom" content="contenu" /> <meta http-equiv="refresh" content="20" /> signifie que la page sera rafraîchit toutes les 20 secondes. <meta name="nom" content="contenu" /> Le contenu des attributs name, http-equiv et content sont libres. Ils ne sont pas fixés par la DTD. Certaines valeurs répandues sont définies par l'usage. <meta http-equiv="refresh" content="10; url=a2.html" /> 3 4 /meta/meta0_5.html <meta name="nom" content="contenu" /> Les attributs name et content de la balise meta fonctionnent en binôme : name nomme la méta-information et content fixe le contenu. On trouve par exemple : name="keywords" : fixe des mots-clés pour la page. name="description" : associe la page à une description. Essentiellement utilisé par les moteurs de recherche pour enrichir leur liste de résultats. name="robots" : indique au moteur de recherche s'il doit indexer les mots de la page et suivre les liens. Valeurs de content : "all" ou "none". 5 6 name="author" : indique l'auteur de la page. name="expires". Valeurs de content : "never" ou "date d'expiration"

favicon Un favicon est une icône pour enjoliver un document dans les navigateurs web. Code : 7 8 Le mode d'utilisation de ces balises évolue.

-- menu principal --> </nav> <section> <!-- partie principale --> </section> <footer> <!-- pied de page --> <p>copyright Jean Dupont</p> </footer> </body> 11 Exemple concret : <!

href="#">accueil</a></li> <li><a href="#">blog</a></li> <li><a href="#">cv</a></li> </ul> </nav> <section> <aside> <h1>à propos de l'auteur</h1> <p>je suis né un 23 novembre 2005.

2 favicon Un favicon est une icône pour enjoliver un document dans les navigateurs web. Code : 7 8 Le mode d'utilisation de ces balises évolue. 9 Balises structurantes HTML5 10 Structure sémantique d'une page : header, footer, nav, section, article, aside. <body> <header>  <h1>document minimal </h1> </header> <nav>  </nav> <section>  </section> <footer>  <p>copyright Jean Dupont</p> </footer> </body> 11 Exemple concret : <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>zozor - Le Site Web</title> </head> <body> <header> <h1>zozor</h1> <h2>carnets de voyage</h2> </header> <nav> <ul><li><a href="#">accueil</a></li> <li><a href="#">blog</a></li> <li><a href="#">cv</a></li> </ul> </nav> <section> <aside> <h1>à propos de l'auteur</h1> <p>je suis né un 23 novembre 2005.</p> </aside> <article> <h1>je suis un grand voyageur</h1> <p>bla bla bla bla (texte de l'article)</p> </article> </section> <footer> <p>copyright Zozor - Tous droits réservés</p> </footer> </body> </html> exempleconcret.html 12 Positionnement avec CSS. Importation du fichier "mon_style.css" : <link rel="stylesheet" href="mon_style.css" /> fichier "mon_style.css" : body { width:90%; margin-left:5%; border:1px solid gray; line-height:150%; header {text-size:150%; padding:0.5cm; color:white; background-color:gray;

$suite fichier "mon_style.css" : footer { padding:0.$

3 suite fichier "mon_style.css" : footer { padding:0.2cm; color:white; background-color:gray; clear:left; nav { float:left; width:140px; margin:0px; padding:1em; /* marge interne : taille d'un caractère */ font-size:80%; section {margin-left:160px; border-left:1px solid gray; padding:1em; aside { float:right; width:200px; background-color:#ffdada; border:1px solid gray; 13 exempleconcret2.htm 14 3ème positionnement Nouveautés Glisser-déposer. L'attribut draggable permet de rendre un élément déplaçable. Autres nouvelles balises de html5 contenteditable. Cet attribut indique qu'une zone est éditable. L'utilisateur peut en changer le contenu. Médias et applications web <audio> et <video>. Ces balises sont utilisés pour les contenus multimédia. Source : Canvas (zone dessin). <canvas> permet de créer des éléments graphiques 2D en Javascript à la volée Balise <audio> de HTML5. Exemple de code : audio <audio controls="controls"> <source src="audio/horse.ogg" type="audio/ogg"> <source src="audio/horse.mp3" type="audio/mpeg"> Votre navigateur ne supporte pas le format audio. </audio> audio.html video La balise <video> (cousine de <audio>) offre en HTML5 une solution simple, pour l'intégration d'une vidéo. Exemple de code : <video width="400" height="220" controls="controls"> <source src="ter.mp4" type="video/mp4" /> <source src="ter.webm" type="video/webm" /> <source src="ter.theora.ogv" type="video/ogg" /> Alternative en cas de pb </video> video.html 17 18

HTTP: hypertext transfert protocol Formulaires Source pour html5 : http://html5demo.braincracking.org/demo/input.

.. </form> Balise input : Balise de type Bloc précédée et suivie d'un saut de ligne.

4 HTTP: hypertext transfert protocol Formulaires Source pour html5 : Formulaires Exemple formulaire Balise form Création de formulaire <form action="url" method="post">... </form> Balise input : Balise de type Bloc précédée et suivie d'un saut de ligne. Attributs de form : <form action="traitement.php" method="post"> Votre pseudo <input type="text" name="pseudo" /> <input type="submit" value="envoyer" /> </form>

HTML5 apporte de nombreuses fonctionnalités nouvelles permettant de contraindre les valeurs saisis dans un input. Tous les navigateurs n'acceptent pas toutes ces fonctionnalités.

5 HTML5 apporte de nombreuses fonctionnalités nouvelles permettant de contraindre les valeurs saisis dans un input. Tous les navigateurs n'acceptent pas toutes ces fonctionnalités. Exemple "date" et "time" 25 Possibles valeurs de type : text : Texte submit : Pour envoyer le formulaire date : Calendrier perpétuel. time : Saisir une heure. number : Saisir un nombre. range : Slider. color : Saisir une couleur. Saisir une adresse mail. url : Saisir une URL. file : Fichier. 26 <form action="testdate.php" method="post"> <input type="date" name="madate" value=" " /> <input type="time" name="monheure" value="08:16" /> <input type="submit" value="envoyer" /> </form> inputdate.html 27 Exemple "date" et "time" <form action="testnumero.php" method="post"> <input type="number" name="n1" value="10" min="8" max="12" step="2" /> 0 <input type="range" name="n2" value="0" min="0" max="10" step="2"/> 10 <input type="submit" value="envoyer" /> </form> inputnumber.html 28 Autres possibles valeurs de type : Pour saisir un mot de passe : type="password" Pour avoir un bouton : type="button" Pour effacer : type="reset" Pour avoir un bouton à cocher : type="checkbox" Pour les boutons multiples : type="radio" <button>...</button> La balise button c'est une alternative à <input type="button" /> Les autres balises Texte libre sur plusieurs lignes : <textarea> </textarea> Menu déroulant : <select> <option> </option> </select> Exemples : form5.html 29 valeurs possibles : button, submit, reset form3_1.html 30

6 Exploitation des formulaires Un formulaire sert à saisir des données pour être exploitées par : 1) Un programme JavaScript exécuté par le navigateur, 2) Un programme externe exécuté par un serveur http. 31 1) Programme JavaScript : Le navigateur comporte un interpréteur de JavaScript. Vous pouvez faire appel à un programme défini dans la même page pour un traitement local des informations saisies dans le formulaire.

Documents pareils

Initiation aux techniques du Web. Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr

Initiation aux techniques du Web Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr La balise Intégrer un élément ou un fichier externe (video, audio, flash, pdf ). Le support