Technologies du Web Master COMASIC Le langage HTML
|
|
|
- Élodie Labbé
- il y a 7 ans
- Total affichages :
Transcription
1 Technologies du Web Master COMASIC Le langage HTML Antoine Amarilli 1 27 novembre Matériel de cours inspiré de notes par Pierre Senellart. Merci à Marc Jeanmougin, Antonin Delpeuch et Pierre Senellart pour leur relecture. 1/35
2 Présentation générale HyperText Markup Language. Décrit une page Web. (Autres documents sur le Web...) Normalisé par le W3C (industriels et académiques) et WHATWG. Format ouvert et documenté : HTML 5 specification (548 pages, 2014) Langage à balises, structure et contenu du document. Pas de présentation (CSS). Pas de comportements dynamiques (JavaScript). 2/35
3 Versions Tentative complexe de langage général : SGML. HTML inspiré de SGML, versions 1 à 4. Tentative plus simple de langage général : XML. XHTML : HTML conforme à XML (1.0 et 1.1). HTML 5 : pas du XML, mais... XHTML 5. Autres formats dérivés de XML. Contrairement à HTTP : plusieurs versions dans la nature, et peu de respect pour les standards! 3/35
4 Table des matières 1 Généralités 2 Structure 3 Texte, listes et tableaux 4 Multimédia 5 Formulaires 4/35
5 Principes du balisage Balise ouvrante (<em>) et fermante (</em>) : Exemple <em>illustratif</em> La nature et répétition des espaces est ignorée : Peu importe! Balises sans fermeture : <br> pour un retour à la ligne. (Ou <br/> par compatibilité avec XML.) Attributs : <p>un <a href=" Commentaires : <!-- non affiché --> Entités HTML : caractères rares et échappement <p><p>c'est méta!</p></p> 5/35
6 Imbrication Il faut ouvrir et fermer les balises dans le bon ordre : <a><b></b></a> et non <a><b></a></b> Règles : pas possible de mettre n importe quelle balise n importe où. (En théorie du moins...) Interprétation arborescente. <table> <tr> <th>a1</th> <th>b1</th> </tr> <tr> <td>a2</td> <td>b2</td> </tr> </table> table tr tr th A1 th A2 td B1 td B2 6/35
7 Structure générale Le DOCTYPE précise la version de HTML utilisée. Cet exemple est en HTML5. L attribut lang (optionnel) précise la langue. <!DOCTYPE html> <html lang="fr"> <head> <!-- en-tête --> </head> <body> <!-- corps --> </body> </html> 7/35
8 Structure générale Le DOCTYPE précise la version de HTML utilisée. Cet exemple est en HTML5. L attribut lang (optionnel) précise la langue. <!DOCTYPE html> <html lang="fr"> <head> <!-- en-tête --> </head> <body> <!-- corps --> </body> </html> (Démo : afficher le source de 7/35
9 En-tête L en-tête contient les méta-données : <head> <meta charset="utf-8"> <title>titre de la page</title> <meta name="description" content="blah"> <! > </head> Indiquer l encodage. Indiquer le titre. Autres indications pour les moteurs de recherche, le cache... <script> : voir plus tard. 8/35
10 Soupe de balises Les gens écrivent souvent du HTML n importe comment. Compatibilité avec tous les sites depuis les débuts du Web. Les navigateurs sont très tolérants. Émulation non-standardisée des défauts d interprétations de certains anciens navigateurs! (quirks mode). 9/35
11 Soupe de balises Les gens écrivent souvent du HTML n importe comment. Compatibilité avec tous les sites depuis les débuts du Web. Les navigateurs sont très tolérants. Émulation non-standardisée des défauts d interprétations de certains anciens navigateurs! (quirks mode). (Démo : soupe de tags.) 9/35
12 Soupe de balises Les gens écrivent souvent du HTML n importe comment. Compatibilité avec tous les sites depuis les débuts du Web. Les navigateurs sont très tolérants. Émulation non-standardisée des défauts d interprétations de certains anciens navigateurs! (quirks mode). (Démo : soupe de tags.) (Démo : validateur W3C.) 9/35
13 Table des matières 1 Généralités 2 Structure 3 Texte, listes et tableaux 4 Multimédia 5 Formulaires 10/35
14 Texte Texte à mettre dans des paragraphes : Paragraphes délimités avec <p>... </p>. Pas de texte directement dans <body>! Retour à la ligne avec <br>. Mettre en valeur dans un paragraphe : <em>... </em> <strong>... </strong> <mark>... </mark> 11/35
15 Titres et structure Titres : de <h1> à <h6> (importance décroissante). Autres façons (purement sémantiques) de structurer la page : En-tête avec <header>. Pied-de-page avec <footer>. Élément de navigation avec <nav>. Article avec <article>. 12/35
16 Listes A B C <ul> <li>a</li> <li>b</li> <li>c</li> </ul> 1 A 2 B 3 C <ol> <li>a</li> <li>b</li> <li>c</li> </ol> X A Y B Z C <dl> <dt>x</dt> <dd>a</dd> <dt>y</dt> <dd>b</dd> <dt>z</dt> <dd>c</dd> </dl> 13/35
17 Tableaux <table> <tr> <th>x1</th> <th>x2</th> </tr> <tr> <td>a1</td> <td>a2</td> </tr> <tr> <td>b1</td> <td>b2</td> </tr> </table> X1 B1 C1 X2 B2 C2 14/35
18 Tableaux complexes <caption> Donner une légende au tableau. <thead> Délimiter l en-tête du tableau (en-têtes de colonnes). <tfoot> Délimiter le pied de page du tableau (somme...). <tbody> Délimiter le corps du tableau. <col> Délimiter les colonnes : <table> <colgroup> <col id="cle"> <col span="2" id="valeurs"> <tr> <td>k1</td> <td>va1</td> <td>vb1</td> </tr> <! > </table> 15/35
19 Liens Liens hypertexte, d où HTTP, HTML! <a href=" Peut contenir un URL absolu (comme avant), mais aussi relatif. Considérons la page Lien Résolution /quux bar2.html baz/toto.html #top L effet du fragment #top est de faire défiler jusqu à l élément portant l attribut id="top". Non transmis au serveur. 16/35
20 iframes Afficher une autre page dans la page courante : <iframe src=" <p>pas de support iframe!</p> </iframe> Parfois pratique, mais déconseillé : Peut être perturbant pour l utilisateur Pas toujours très flexible Complexe pour la sécurité Préférer des solutions côté serveur (ou avec JavaScript) 17/35
21 Table des matières 1 Généralités 2 Structure 3 Texte, listes et tableaux 4 Multimédia 5 Formulaires 18/35
22 Images Depuis la première spécification de HTML (1993) : <img src="logo_telecom.png" alt="logo Telecom"> src précise l URL où chercher l image (absolu ou relatif). alt indique un texte obligatoire pour remplacer l image : image non trouvée malvoyants navigateurs texte robots Note : l image peut se trouver sur un tout autre serveur! Requêtes multiples. Inline linking et risques. Vie privée? Pixel espion + Referer. Aussi : <figure> et <figcaption> pour légender. 19/35
23 Formats d image BMP Aucune compression, historique, à éviter. JPEG Compression appropiée aux photos. WebP Alternative plus récente (2010) par Google. PNG Compression sans perte adaptée aux dessins. GIF Comme PNG, moins bien, mais support pour des images animées. APNG PNG avec animation, alternative à GIF. Rare. SVG Images vectorielles : rendu calculé à partir de formes géométriques, zoomables sans pixelisation. 20/35
24 Audio et vidéo Nouveau en HTML5 : <audio src="audio.ogg"> <p>pas de support audio : <a href="audio.ogg">fichier audio.ogg</a>.</p> </audio> controls Afficher des contrôles de lecture (pas par défaut!). autoplay Lecture automatique (à éviter...). loop Lecture en boucle. preload Choisir le préchargement du fichier. <source> Plusieurs formats alternatifs. Élément <video> analogue pour la vidéo. 21/35
25 Formats audio Compliqué! Codecs versus conteneurs. WAV. Sans compression, à éviter. MID. Rendu logiciel d une partition : ne pas confondre. MP3. Format historique. Brevets, mauvaise qualité. FLAC. Compression audio sans perte. Speex. Compression audio optimisée pour la voix. Ogg Vorbis. Alternative libre à MP3. Opus. Alternative récente, IETF. 22/35
26 Formats vidéo H.264. Format le plus répandu, mais problèmes de brevets. Ogg Theora. Alternative libre, mais peu utilisée. WebM. Format proposé par Google, libre. VP8 et VP9. Le standard HTML5 ne privilégie plus Theora. IE et Safari supportent uniquement H.264. Firefox, Chrome, Android supportent tout. Controversé! Le standard doit-il préférer les formats répandus ou les formats sans brevets? 23/35
27 Table des matières 1 Généralités 2 Structure 3 Texte, listes et tableaux 4 Multimédia 5 Formulaires 24/35
28 Bases Structure générale d un formulaire : <form action="action.php" method="get"> <!-- contenu du formulaire ici --> <input type="submit"> </form> <input> Bouton pour valider le formulaire (ici). action URL vers lequel soumettre. method Quelle méthode utiliser pour la soumission. enctype Comment encoder les données du formulaire. Le navigateur effectuera la requête demandée en fournissant les données des champs du formulaire. Traitement effectué par le serveur. 25/35
29 Retour à HTTP GET : les paramètres sont transmis dans le chemin : GET action.php?nom=dupond&prenom=jean HTTP/1.1 Host: example.com POST et application/x-www-form-urlencoded (par défaut) : c est pareil, mais les données sont dans le corps : POST action.php HTTP/1.1 Host: example.com Content-Type: application/x-www-form-urlencoded nom=dupond&prenom=jean 26/35
30 Retour à HTTP (suite) POST et multipart/form-data : moins concis mais plus efficace pour de gros volumes : POST action.php HTTP/1.1 Host: example.com Content-Type: multipart/form-data; boundary=--e e06 Content-Disposition: form-data; name="nom" Dupond ----e06 Content-Disposition: form-data; name="prenom" Jean ----e /35
31 Champs texte Champ de base : le champ texte : <form action="action.php" method="get"> <label for="nom">nom</label> <input name="lastname" id="nom" type="text"><br> <label for="prenom">prénom</label> <input name="firstname" id="prenom" type="text"> <input type="submit"> </form> L élément <label> explique le champ et y est lié par son id. L attribut name définit le nom dans la requête HTTP : POST action.php HTTP/1.1 Host: example.com Content-Type: application/x-www-form-urlencoded lastname=dupond&firstname=jean 28/35
32 Attributs du champ texte autofocus Champ à sélectionner au chargement. placeholder Texte explicatif affiché quand le champ est vide. disabled Champ non modifiable. (Aussi readonly.) autocomplete Tenter d autocompléter avec valeurs passées. value Contenu par défaut. required Impose que le champ soit rempli. type Multiples valeurs : password (étoiles) range avec attributs min et max Autres : tel, number, color... pattern Valider avec une expression régulière : pattern="[0-9]{5}" pour un code postal). Validation plus complexe, compatibilité : JavaScript. Aucune garantie! À revalider côté serveur. 29/35
33 Boutons radio Sélectionner parmi plusieurs choix : <input type="radio" name="choix" id="oui" value="oui"> <label for="oui">oui</label><br> <input type="radio" name="choix" id="pe" value="pe"> <label for="pe">peut-être</label><br> <input type="radio" name="choix" id="non" value="non"> <label for="non">non</label><br> Partagent le même name mais ont des value différentes. Non exclusifs si name différents. 30/35
34 Cases à cocher Sélectionner des choix non exclusifs : <input type="checkbox" name="lu" id="lu"> <label for="lu">lu</label><br> <input type="checkbox" name="approuve" id="approuve"> <label for="approuve">approuvé</label> Autre possibilité : <input type="checkbox" name="c[]" value="lu" id="lu"> <label for="lu">lu</label><br> <input type="checkbox" name="c[]" value="ap" id="ap"> <label for="ap">approuvé</label> Attribut checked : coché par défaut. Le [] est pour indiquer que le nom contient plusieurs valeurs, nécessaire pour certains langages serveur (PHP...). 31/35
35 Listes déroulantes Sélectionner parmi une liste de choix : <label for="affiliation">affiliation</label> <select name="affiliation" id="affiliation"> <option value="ecp">école centrale de Paris</option> <option value="x">école polytechnique</option> <option value="ese">ese</option> <option value="instn">instn</option> <option value="telecom">télécom ParisTech</option> <option value="sud">université Paris-Sud</option> </select> selected Sélectionné par défaut. size Liste de hauteur fixe (non déroulante). multiple Sélectionner plusieurs éléments (utiliser []). <optgroup> Former des groupes d options. 32/35
36 Upload de fichiers Joindre un fichier au formulaire : <label for="fichier">fichier à soumettre</label> <input type="file" name="fichier" id="fichier"> Impérativement utiliser post et multipart/form-data! Spécifier le type de fichier attendu (MIME) avec accept. multiple pour plusieurs fichiers. Pas de garanties! À revalider. Taille maximale à imposer côté serveur. 33/35
37 Boutons <input type="submit"> Valide le formulaire. <input type="image" src="submit.png" alt="submit"> Valide le formulaire (image). <input type="reset"> Réinitialise le formulaire. <button> Ne fait rien (JavaScript). value="texte" Précise le texte du bouton. 34/35
38 Autres <fieldset> Regrouper des champs par groupes, annotés avec <legend>. <datalist> Spécifier des autocomplétions possibles. type="hidden" Champs cachés : Forcer l ajout d un champ à la requête. Pourquoi faire? Voir plus tard. À revalider côté serveur! <textarea> Champ texte multilignes : <textarea name="adresse" id="adresse" rows="3" cols="42"> (Valeur par défaut.) </textarea> 35/35
HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP
IFT1147 Programmation Serveur Web avec PHP Un bref survol du langage HTML HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,
www.evogue.fr SUPPORT DE COURS / HTML
L i a m T A R D I E U www.evogue.fr SUPPORT DE COURS / HTML Sommaire Sommaire... 2 Présentation... 3 Introduction... 3 Fonctionnement... 3 Historique... 4 Navigateurs... 6 Définition... 6 Historiquement...
Sana Sellami. sana.sellami@lsis.org Licence Professionnelle SIL 2011-2012
Sana Sellami sana.sellami@lsis.org Licence Professionnelle SIL 2011-2012 Connaître les principales techniques pour la création de sites web Se familiariser avec les langages du web Rendre dynamique le
Notice d accessibilité HTML, CSS et JavaScript
Notice d accessibilité HTML, CSS et JavaScript Date Version État / commentaires 10 sept. 2015 2.0 Cette version prend en compte WCAG 2.0 et RGAA 3.0. En partenariat avec : Air Liquide Atos BNP Paribas
TD HTML AVEC CORRECTION
TD HTML AVEC CORRECTION On utilisera Notepad++ comme éditeur sur Windows Vous créez un répertoire www sous vos répertoires personnels et vous mettrez vos pages dedans. Créez vos fichiers HTML et n oubliez
TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012
TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE
CREATION d UN SITE WEB (INTRODUCTION)
CREATION d UN SITE WEB (INTRODUCTION) Environnement : World Wide Web : ordinateurs interconnectés pour l échange d informations ( de données) Langages : HTML (HyperText Markup Language) : langages pour
NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web
NFA016 : Introduction O. Pons, S. Rosmorduc Conservatoire National des Arts & Métiers Pour naviguer sur le Web, il faut : 1. Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des
Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP
Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP Au cours de ce TP, vous allez voir comment PHP permet aux utilisateurs, une interaction avec
Programmation Internet Cours 4
Programmation Internet Cours 4 Kim Nguy ên http://www.lri.fr/~kn 17 octobre 2011 1 / 23 Plan 1. Système d exploitation 2. Réseau et Internet 3. Web 3.1 Internet et ses services 3.1 Fonctionnement du Web
HTML, CSS, JS et CGI. Elanore Elessar Dimar
HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML
Les outils de création de sites web
Tuto 1ère séance - p1 Les outils de création de sites web Sources : Réalisez votre site web avec HTML5 et CSS3 de Mathieu Nebra (Edition Le Livre du Zéro) site fr.openclassrooms.com (anciennement «site
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
SII Stage d informatique pour l ingénieur
SII Stage d informatique pour l ingénieur Création d un site Web École nationale supérieure de techniques avancées SII Stage d informatique pour l ingénieur 1 / 15 L informatique et le temps qui passe...
Programmation Web TP1 - HTML
Programmation Web TP1 - HTML Vous allez réaliser votre premier site Web dans lequel vous présenterez la société SC, agence spécialisée dans la conception des sites internet. 1 - Une première page en HTML
Gilles.Roussel univ-mlv.fr HTTP/1.1 RFC 2068
HTTP/1.1 RFC 2068 1 Caractéristiques Niveau application Sans état Tout transfert de données Au dessus du protocole TCP Largement utilisé dans le World Wide Web Utilise les normes : URI (Uniform Resource
Introduction. PHP = Personal Home Pages ou PHP Hypertext Preprocessor. Langage de script interprété (non compilé)
Introduction PHP = Personal Home Pages ou PHP Hypertext Preprocessor Langage de script interprété (non compilé) Plan Avantages Fonctionnement interne Bases du langage Formulaires Envoi d un email Avantages
IPHONE BANNIÈRE CLASSIQUE DIMENSIONS. Standard : 320 x 53 (portrait) 20Ko Jpeg/Gif/Png. HD : 640 x 106 (portrait) 20Ko Jpeg/Gif/Png DESCRIPTION
IPHONE BANNIÈRE CLASSIQUE DIMENSIONS Standard : 320 x 53 (portrait) 20Ko Jpeg/Gif/Png HD : 640 x 106 (portrait) 20Ko Jpeg/Gif/Png DESCRIPTION Format publicitaire très répandu et simple Permet une présence
Dans nos locaux au 98 Route de Sauve 30900 NÎMES. Un ordinateur PC par stagiaire, scanner, imprimante/copieur laser couleur
FORMATION FORFAIT WEB DEVELOPPEUR Qualification ISQ OPQF Formacode 46 125 Certification de titre professionnel Web Designer + modules optionnels : Développement PHP/MySQL avancé, Web App, CMS e-boutique
Présentation du Framework BootstrapTwitter
COUARD Kévin HELVIG-LARBRET Blandine Présentation du Framework BootstrapTwitter IUT Nice-Sophia LP-SIL IDSE Octobre 2012 Sommaire I. INTRODUCTION... 3 Définition d'un framework... 3 A propos de BootstrapTwitter...
Langage HTML (2 partie) <HyperText Markup Language> <tv>lt La Salle Avignon BTS IRIS</tv>
Langage HTML (2 partie) «Je n'ai fait que prendre le principe d - hypertexte et le relier au principe du TCP et du DNS et alors boum! ce fut le World Wide Web!» Tim Berners-Lee
Formation HTML / CSS. ar dionoea
Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations
Module http MMS AllMySMS.com Manuel d intégration
Module http MMS AllMySMS.com Manuel d intégration Objectif du document... 3 1 Envoi de MMS par requête http... 4 1.1 Format de la requête utilisée... 4 1.2 Arborescence et explication des balises du flux
Formation : WEbMaster
Formation : WEbMaster Objectif et Description : Centre Eclipse vous propose une formation complète WebMaster, vous permettant de : Utiliser dès maintenant les nouveautés du web2, ainsi alléger les besoins
Pack Fifty+ Normes Techniques 2013
Pack Fifty+ Normes Techniques 2013 Nos formats publicitaires par site 2 Normes techniques 2013 Display classique Pavé vidéo Footer Accueil panoramique Publi rédactionnel Quiz Jeu concours Emailing dédié
STID 2ème année : TP Web/PHP
STID 2ème année : TP Web/PHP Plan de travail et aide mémoire jean.arnaud@inria.fr Ce document est composé de cinq parties : Un aide mémoire sur les aspects pratiques de la création de sites Une introduction
Création de formulaires interactifs
SESSION 16 Création de formulaires interactifs Programme de la session Lancer un sondage en utilisant divers éléments d'entrée de formulaire Traiter les entrées utilisateur Activer un script à partir d'un
Activités HTML. Code: act-html
Activités HTML act-html Activités HTML Code: act-html Originaux url: http://tecfa.unige.ch/guides/tie/html/act-html/act-html.html url: http://tecfa.unige.ch/guides/tie/pdf/files/act-html.pdf Prérequis:
FORMATION / CREATION DE SITE WEB / 4 JOURNEES Sessions Octobre 2006
I. INTRODUCTION 1. Présentation du formateur et des élèves 2. Historique internet : d'où ça vient a. Historique général : 3 étapes majeures 1. l'histoire de l'informatique débute en 1942 avec la première
Module BD et sites WEB
Module BD et sites WEB Cours 8 Bases de données et Web Anne Doucet Anne.Doucet@lip6.fr 1 Le Web Architecture Architectures Web Client/serveur 3-tiers Serveurs d applications Web et BD Couplage HTML-BD
Bernard Lecomte. Débuter avec HTML
Bernard Lecomte Débuter avec HTML Débuter avec HTML Ces quelques pages ont pour unique but de vous donner les premiers rudiments de HTML. Quand vous les aurez lues, vous saurez réaliser un site simple.
Spétechs Mobile. D e r n i è r e m i s e à j o u r : a o û t 2014
Spétechs Mobile D e r n i è r e m i s e à j o u r : a o û t 2014 Généralités Envoi des créas à Amandine Canu, responsable traffic mobile : acanu@hi-media.com Mettre en copie de votre e-mail votre contact
Les services usuels de l Internet
Les services usuels de l Internet Services principaux (applications) disponibles sur l Internet Courrier électronique (mail) - protocole SMTP (Simple Mail Transfer Protocol) inclut maintenant tous types
SYSTÈMES D INFORMATIONS
SYSTÈMES D INFORMATIONS Développement Modx Les systèmes de gestion de contenu Les Content Management Système (CMS) servent à simplifier le développement de sites web ainsi que la mise à jour des contenus.
JPEG, PNG, PDF, CMJN, HTML, Préparez-vous à communiquer!
JPEG, PNG, PDF, CMJN, HTML, Préparez-vous à communiquer! 1 / Contexte L ordinateur La loi du nombre La numérisation = codage d une information en chiffres binaire : 0 1 («bit») 8 bits = 1 octet 1ko = 1024
Formulaire pour envoyer un mail
Formulaire pour envoyer un mail AVERTISSEMENT : Ce tuto est une compilation de plusieurs sources trouvées sur internet, dont les références sont données à la fin de cet article. Le but de ce tutoriel n'est
KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.
KompoZer Créer un site «simple» Composition du site : _ une page d'accueil : index.html _ une page pour la théorie : theorie.html _ une page pour les photos : photos.html _ une page avec la galerie : galerie.html
Attaques de type. Brandon Petty
Attaques de type injection HTML Brandon Petty Article publié dans le numéro 1/2004 du magazine Hakin9 Tous droits reservés. La copie et la diffusion de l'article sont admises à condition de garder sa forme
HTML/CSS - Travaux Pratiques 2
HTML/CSS - Travaux Pratiques 2 Le but de ces séances de TP est de se familiariser avec le format HTML et les feuilles de style CSS pour la création de pages web. Pour cela, vous utiliserez emacs sous Linux
Gestion Électronique de Documents et XML. Master 2 TSM
Gestion Électronique de Documents et XML Master 2 TSM I n t r o d u c t i o n Les formats de données F o r m a t s d e d o n n é e Format de donnée : manière de représenter des informations dans un document
Principales failles de sécurité des applications Web Principes, parades et bonnes pratiques de développement
Guillaume HARRY l Contenu sous licence Creative Commons CC-BY-NC-ND Principales failles de sécurité des applications Web Principes, parades et bonnes pratiques de développement P. 2 1. Introduction 2.
Internet. DNS World Wide Web. Divers. Mécanismes de base Exécution d'applications sur le web. Proxy, fire-wall
Internet DNS World Wide Web Mécanismes de base Exécution d'applications sur le web Divers Proxy, fire-wall 1 Les services usuels de l Internet Services principaux (applications) disponibles sur l Internet
Séance d ED n 5 : HTML et JavaScript
Séance d ED n 5 : HTML et JavaScript EXERCICE 1 1) le but de cet exercice est de construire l'interface suivante en html: une réponse : 1)
Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org
Les sites Internet dynamiques contact : Patrick VINCENT pvincent@erasme.org Qu est-ce qu un site Web? ensemble de pages multimédia (texte, images, son, vidéo, ) organisées autour d une page d accueil et
Programmation Web HTML
Programmation Web HTML Christophe Lecoutre lecoutre@cril.fr IUT de Lens - CRIL CNRS UMR 8188 Université d Artois France Département SRC Septembre 2014 1 Plan 1 Introduction 2 Éléments et attributs élémentaires
HTML. Notions générales
1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS
Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License,
Langage HTML Copyright 2010 tv Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.1 or any
INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)
CS WEB Ch 1 Introduction I. INTRODUCTION... 1 A. INTERNET INTERCONNEXION DE RESEAUX... 1 B. LE «WEB» LA TOILE, INTERCONNEXION DE SITES WEB... 2 C. L URL : LOCALISER DES RESSOURCES SUR L INTERNET... 2 D.
Normes techniques 2011
Normes techniques 2011 Display classique Formats Livrables Footer p 2 p 3 p 4 Opérations spéciales Publi-rédactionnel Jeu concours Quiz Lien partenaire Habillage Accueil panoramique Sponsoring de rubrique
Rapport de projet Site web pour une association
51, rue Barthélémy de Laffemas BP 29 26901 Valence Cedex 9 Rapport de projet Site web pour une association Année 2006-2007 Bruno SABOT 1ère année DUT R&T Mathieu ROGER 2ème année DUT R&T Rapport réalisé
TIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web
Réseau informatique TIC TC - IUT Montpellier Internet et le Web Ensemble d'ordinateurs reliés entre eux et échangeant des informations sous forme de données numériques But : Rendre disponible l information
Autour du web. Une introduction technique Première partie : HTML. Georges-André SILBER Centre de recherche en informatique MINES ParisTech
Autour du web Une introduction technique Première partie : HTML Georges-André SILBER Centre de recherche en informatique MINES ParisTech silber@cri.ensmp.fr http://www.cri.ensmp.fr/people/silber/cours/2010/web
Jean-Pierre VINCENT Consultant indépendant
Techniques d accélération des pages Web Jean-Pierre VINCENT Consultant indépendant @theystolemynick Braincracking.org Bonjour, je m appelle Jean-Pierre 13 ans de Web PHP, JavaScript, HTML5, CSS Ex : startups,
RAPPORT AUDIT SEO. Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado
- RAPPORT AUDIT SEO Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado 17 septembre 2013 Table des matières Optimisation structurelle 2 Optimisation des standards, performances et
Panel des technologies Web
Panel des technologies Web pierre.jean@mines-ales.fr version 0.14 Objectif Un panorama des technologies Web pour comprendre leurs positionnements et leurs utilisations Questions Evaluation Sommaire Avant
RESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGN Une approche pour concevoir des sites Web adaptatifs et une occasion d'inciter les étudiants à consulter des cours responsives Ivan MADJAROV Arnaud FÉVRIER Comment consulte-t-on le
Spétechs Mobile. D e r n i è r e m i s e à j o u r : s e p t e m b r e 2 0 1 4
Spétechs Mobile D e r n i è r e m i s e à j o u r : s e p t e m b r e 2 0 1 4 Généralités Envoi des créas à Amandine Canu, responsable traffic mobile : acanu@hi-media.com Mettre en copie de votre e-mail
Optimiser les e-mails marketing Les points essentiels
Optimiser les e-mails marketing Les points essentiels Sommaire Une des clés de succès d un email marketing est la façon dont il est créé puis intégré en HTML, de telle sorte qu il puisse être routé correctement
Spétechs Mobile. Octobre 2013
Spétechs Mobile Octobre 2013 Appli ios Appli Android Site Mobile Les clicks URL Appli ios Créa en dur HTML5 Créa en dur Banner Interstitiel Interstitiel Vidéo Bouncing / traveling Image Bouncing / traveling
CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING
CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING Durée : 3J / 21H Formateur : Consultant expert en PAO et Web-marketing. Groupe de : 4 max Formation au web marketing Objectifs : Mettre en oeuvre des
// HTML, Javascript XHTML & CSS
design graphique / web design // HTML, Javascript XHTML & CSS version 1.0 date 28 / 04 / 2010 auteur Loïc Swiny contact mr@sweeen.com // sommaire HTML 01. Introduction au langage HTML 02. Introduction
creer votre site internet en html/css
3 jours (21 heures) 1110 HT (Inter) 2670 HT (Intra) Toute personne (particulier ou professionnel) souhaitant créer son site Internet Créez son site Internet Assurez sa mise en ligne Gérer les mises à jour
Programmation Web. Madalina Croitoru IUT Montpellier
Programmation Web Madalina Croitoru IUT Montpellier Organisation du cours 4 semaines 4 ½ h / semaine: 2heures cours 3 ½ heures TP Notation: continue interrogation cours + rendu à la fin de chaque séance
Initiation à html et à la création d'un site web
Initiation à html et à la création d'un site web Introduction : Concevoir un site web consiste à définir : - l'emplacement où ce site sera hébergé - à qui ce site s'adresse - le design des pages qui le
Mettre en place un formulaire dans le site avec le module webform
Mettre en place un formulaire dans le site avec le module webform Dans la suite des documents de cette documentation Avertissement au lecteur Objectif de cette fiche Le module webform Ce petit symbole
E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE
E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE mcbenveniste@gmail.com 09/2013 E-MAILING & NEWSLETTER L e-mailing consiste à envoyer des emails simultanément à un nombre important de destinataires dont le
Projet PIL@E. Gestion des Formats de Fichier
Projet PIL@E Gestion des Formats de Fichier Version du 25 avril 2007 Ce document a été réalisé par le département de l innovation technologique et de la normalisation de la Direction des Archives de France
LES GRANDES ETAPES DE CREATION D UN WEB DESIGN
LES GRANDES ETAPES DE CREATION D UN WEB DESIGN PENSER LA STRUCTURE ET LE THEME DU SITE STRUCTURE ET THEME DU SITE Taille (le site sera-t-il extensible ou fixe?) Organisation Thème Couleurs Illustrations
les techniques d'extraction, les formulaires et intégration dans un site WEB
les techniques d'extraction, les formulaires et intégration dans un site WEB Edyta Bellouni MSHS-T, UMS838 Plan L extraction des données pour un site en ligne Architecture et techniques Les différents
La balise object incorporer du contenu en HTML valide strict
Qu'est ce que la balise object La balise object incorporer du contenu en HTML valide strict Beaucoup de monde insère des médias dans leur page web avec la balise non standard . Pourtant il existe
Atelier de Création de pages Web
Atelier de Création de pages Web par Stéphane Groleau SADC Société d aide au développement de la collectivité de Portneuf http://www.sadcportneuf.qc.ca http://www.reseau-sadc.qc.ca/ http://www.dec-ced.gc.ca/
Tutoriel : Feuille de style externe
Tutoriel : Feuille de style externe Vous travaillerez à partir du fichier cerise.htm que vous ouvrirez dans NVU. Commencez par remplacer le contenu de la balise Title par : Comment débuter une recherche?
4. SERVICES WEB REST 46
4. SERVICES WEB REST 46 REST REST acronyme de REpresentational State Transfert Concept introduit en 2000 dans la thèse de Roy FIELDING Est un style d architecture inspiré de l architecture WEB En 2010,
Petite définition : Présentation :
Petite définition : Le Web 2.0 est une technologie qui permet la création de réseaux sociaux, de communautés, via divers produits (des sites communautaires, des blogs, des forums, des wiki ), qui vise
XML par la pratique Bases indispensables, concepts et cas pratiques (3ième édition)
Présentation du langage XML 1. De SGML à XML 17 2. Les bases de XML 18 2.1 Rappel sur HTML 18 2.2 Votre premier document XML 19 2.3 Les avantages de XML 21 3. La syntaxe XML 21 3.1 La première ligne du
Sécurité des sites Web Pas un cours un recueil du net. INF340 Jean-François Berdjugin
Sécurité des sites Web Pas un cours un recueil du net INF340 Jean-François Berdjugin Vulnérabilité Définition (wikipédia) : Dans le domaine de la sécurité informatique, une vulnérabilité est une faiblesse
Failles XSS : Principes, Catégories Démonstrations, Contre mesures
HERVÉ SCHAUER CONSULTANTS Cabinet de Consultants en Sécurité Informatique depuis 1989 Spécialisé sur Unix, Windows, TCP/IP et Internet Séminaire 15 ans HSC Failles XSS : Principes, Catégories Démonstrations,
Installation d un serveur HTTP (Hypertext Transfer Protocol) sous Débian 6
Installation d un serveur HTTP (Hypertext Transfer Protocol) sous Débian 6 1 BERNIER François http://astronomie-astrophotographie.fr Table des matières Installation d un serveur HTTP (Hypertext Transfer
INFORMATIQUE & WEB. PARCOURS CERTIFICAT PROFESSIONNEL Programmation de sites Web. 1 an 7 MODULES. Code du diplôme : CP09
INFORMATIQUE & WEB Code du diplôme : CP09 Passionné par l informatique et le web, vous souhaitez obtenir une certification dans un domaine porteur et enrichir votre CV? PARCOURS CERTIFICAT PROFESSIONNEL
Echosgraphik. Ce document sert uniquement à vous donner une vision sur ma manière de travailler et d appréhender un projet
Echosgraphik Ce document sert uniquement à vous donner une vision sur ma manière de travailler et d appréhender un projet Présentation I. Echosgraphik Protocoles de travail I. Développement du site II.
Activité sur Meteor. Annexe 1 : notion de client-serveur et notion de base de données
Activité sur Meteor Annexe 1 : notion de client-serveur et notion de base de données Notion de client-serveur Que se passe-t-il lorsque vous tapez dans la barre d'adresse de votre navigateur «http://www.google.fr»?
20 techniques et bonnes pratiques d un positionnement visible gratuit et durable sur Internet
2 20 techniques et bonnes pratiques d un positionnement visible gratuit et durable sur Internet Edition 2010 3 Sommaire Conditions générales d utilisation...5 Si votre site est créé par un prestataire...6
02/02/2011. test 1. Communication visuelle & web. Pao. Principes fondamentaux. Les six principes de base. La mise en page. Module sur trois journées
Communication visuelle & web Module sur trois journées 1, 5 jour : communication print & visuelle 1.5 jour : communication web mise en pratique evaluation sur QCM Vous serez en mesure participer à la conception
Programmation Web. Introduction
Programmation Web Introduction 1 Introduction 10 séances 1 h cours + 1h TD Notes : contrôle continu DS 1 TP : note de groupe : rapport + code source + démo TD : note personnelle (=0 si 2 absences non justifiées)
3. RÉALISATION ET QUALIFICATION D UN PROTOTYPE 3.1 Réalisation d un prototype CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML
Page:1/20 CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML Objectifs de l activité pratique : Notions sur le HTML, le WEB et le W3C Créer une page web statique au format HTML : - les marqueurs ou balises
Techniques de Programmation pour Internet
Séance 7 Transactions par CGI Année Spéciale Informatique ENSIMAG 2002-2003 James L. Crowley Anullé Le but de l'exercice est d'introduire un certain nombre de constructions en PERL utiles pour la programmation
NAMEBAY PRO. votre site de revente de noms de domaine en marque blanche. Documentation technique
NAMEBAY PRO votre site de revente de noms de domaine en marque blanche Documentation technique SOMMAIRE 1. PRÉSENTATION... 3 2. FONCTIONNEMENT... 4 2.1. ETAPE 1 : Devenir revendeur de noms de domaine...
Le référencement naturel
Le référencement naturel Phases essentielles Choix des mots-clés Où se référencer : moteurs, annuaires Indexation des pages du site dans les moteurs Positionnement et trafic généré Optimisation des pages
Alors "Web" c'est le service Internet permettant de naviguer à travers des pages Web.
1. Langage HTML Cette chapitre explique ce qu'est un site Web et ainsi contient les information de base sur le langage HTML, langage qui permet la réalisation de pages Web. Quand on utilise le mot Internet,
Les Bases. Messaoudi Khaled, Boukelal Hanane (Etudiants Informatique ) 2015.
Référencer Mon SITE, BLOG Les Bases Messaoudi Khaled, Boukelal Hanane (Etudiants Informatique ) 2015. Le but de ce livre est de vous aider à bien positionné votre site web ou blog auprès des moteurs de
Quelques formats de fichiers courants
SCI6052 Information documentaire numérique Lucie Carmel, novembre 2007 Modifié novembre 2009 Quelques formats de fichiers courants 1 Fichiers en format texte (ou «fichiers texte») Extension habituelle
Cours CCNA 1. Exercices
Cours CCNA 1 TD3 Exercices Exercice 1 Enumérez les sept étapes du processus consistant à convertir les communications de l utilisateur en données. 1. L utilisateur entre les données via une interface matérielle.
Classe ClInfoCGI. Fonctions membres principales. Gestion des erreurs
Utilisation des classes de PourCGI par Michel Michaud, version 2002-11-23 Les fichiers PourCGI.h et PourCGI.cpp rendent disponibles deux classes et une fonction libre qui permettent de faire facilement
Application Web et J2EE
Application Web et J2EE Servlet, JSP, Persistence, Méthodologie Pierre Gambarotto Département Informatique et Math appli ENSEEIHT Plan Introduction 1 Introduction Objectfis
Google Adresses. Validez la fiche de votre entreprise ou organisation sur Google Maps
Google Adresses Validez la fiche de votre entreprise ou organisation sur Google Maps Le Réseau acadien des sites P@C de la Nouvelle Écosse Janvier 2011 Source : http://www.google.com/support/places/bin/static.py?page=guide.cs&guide=28247&topic=28292&answer=142902
Manuel d utilisation du module Liste de cadeaux PRO par Alize Web
Manuel d utilisation du module Liste de cadeaux PRO par Alize Web INSTALLER ET CONFIGURER LE MODULE (BACK OFFICE) 2 Réglages des performances 2 Télécharger le module 3 Installer le module 4 Configurer
Manuel d intégration API FTP SMS ALLMYSMS.COM
Manuel d intégration API FTP SMS ALLMYSMS.COM 29/01/2014 TABLE DES MATIERES 1. ENVOI DE SMS (SMS-MT PUSH)... 3 1.1. GENERALITES... 3 1.1.1. Adresse FTP... 3 1.1.2. Paramètres de connexion... 3 1.1.3. Remarques...
+33 (0)4 92 21 33 79 contact@social-box.fr www.social-box.fr. Sarl ISB Altipolis2 av. Du Général Barbot 05100 Briancon - France
Sarl ISB Altipolis2 av. Du Général Barbot 05100 Briancon - France SCHÉMA FONCTIONNEL * Projection vers smartphones et tablettes de votre interface en Appli par Wifi (10 à 100 mètres autour de la borne)