texte (plain text) écrit dans dans un langage de description de contenu (textes, images, liens, tableaux, etc) appelé HTML. Une page Web ou un fichier HTML porte généralement l’extension .htm ou .html mais pas nécessairement. Le fichier HTML peut être ouvert avec n’importe quel éditeur de texte; dans ce cas, on est en mode édition, (C’est ce que font généralement les développeurs). Le fichier HTML peut être ouvert également avec navigateur Web (Browser); dans ce cas, la page Web est ouverte pour consultation, comme quand on va sur n’ importe quel site Internet.
Web reliées entre elles par des liens hyperliens, stocké sur une machine connecté au réseau mondial (internet) et accessible à partir d’une adresse Internet.
Internet que l’on achète chez des bureaux d’ enregistrements (registrar) et qui permet d’associer à une ressource Internet, une adresse unique. Exemple : gdg-lome.org, rfi.fr, google.com, beluga.tg
adresse Internet complète permettant d’identifier de façon unique, une ressource (ou un document) sur Internet. Elle est de la forme : http://www.appsland.com/references/2016/index.php? orderby=title&order=ASC - http : protocole d’accès. Généralement utilisé pour le Web; existe aussi en https - www : sous domaine - appsland.com : le domaine - /references/2016/index.php : chemin - ?orderby=title&order=ASC : query string
logiciel dont le rôle est de “servir” des pages HTML et ses ressources (feuilles de styles, javascript, images, vidéos, sons, etc) à partir d’une adresse Internet. Exemple de Serveur Web : Apache, LightHttp, Cheroke, Microsoft IIS... Hébergement Web : Héberger un site Web, c’est télé-transmettre, l’ensemble des fichiers de son site Web sur un serveur (machine) disposant d’un logiciel serveur web et connecté à Internet 24h/24, 7J/7. Il existe des prestaires de ce service d’hébergement Web : APPSLAND est hébergeur de sites Web au Togo depuis 2005.
de description de page Web. Avec le HTML, on décrira le contenu, le fonds, sans se préoccuper de la forme ou de la mise en page. Grâce à ces balises, il offre un ensemble d’outils sémantiques forts et de description pour une consultation aussi bien par les humains (navigateur Web classique), les synthéseurs vocaux (pour les malvoyants) que des programmes (extraction de données par exemple).
styles en cascade. C’est un langage qui permet de définir les mises en page et les mise en forme d’une page Web et quelques animations. C’est le CSS qui “apporte les couleurs” à une page Web fade et moche ;-)
avec Java, un autre langage de programmation. Le Javascript, utilisé dans une page Web, permet d’apporter - de l’animation - du contrôle des données saisies par les utilisateurs (interactivités) - de déssiner, de créer des espaces de jeux, etc. Le Javascript peut aussi être utilisé, côté serveur (NodeJs), pour remplacer des langages de programmation Web classiques comme le PHP, Python, Java ou C Sharp (C#).
langage à balise. Le HTML étant un langage à balise, il convient de noter qu’il existe deux sortes de balises : - les balises complètes composées d’une balise ouvrante et d’une balise fermante - les balises orphélines comportant uniquement une balise ouvrante.
à contenir d’autres éléments, comme un trait de séparation horizontal, une image, un retour à la ligne, etc. La balise orphéline - <hr /> - <img /> - <br />
est un paramètre supplémentaire pour une balise tendant à modifier ou à préciser certaines propriétés de cette-ci. Les attributs - <img src=”chemin-vers-mon- vichier/belleImage.jpg” height=”200” width=”300” alt=” André Bellemart” > - <table border=”2” cellspacing=” 2”></table>
dans la barre des titres, parfois des éléments non visibles (méta balises) mais qui déterminent le fonctionnement de la page Le code minimal <!DOCTYPE html> <HTML> <HEAD> <TITLE>Greeting</TITLE> </HEAD <BODY> Hello World ! </BODY> </HTML>
y a 6 niveau de titres Les titres <h1>Titre de niveau 1</h1> <h2>Titre de niveau 2</h2> <h3>Titre de niveau 3</h3> <h4>Titre de niveau 4</h4> <h5>Titre de niveau 2</h5> <h6>Titre de niveau 2</h6>
Paragraphes <p>Un paragraphe commence ici et se poursuit jusqu’à la deuxième puis une troisième et enfin une quatrième et dernière ligne.</p> <p>Un second paragraphe recommence et continue son chemin tranquillement jusqu’à la fin décidé par son créateur</p>
avec les paragraphes Retour charriot <p>Un paragraphe commence ici et se poursuit jusqu’à la deuxième puis une troisième et enfin une quatrième et dernière ligne. <BR /> Un second paragraphe recommence et continue son chemin tranquillement jusqu’à la fin décidé par son créateur</p>
valeur (encart) des parties importantes d’un texte. Citation <BLOCKQUOTE> <p>Ceci est une citation extrait du livre Les fleurs de mal de Beaudelaire. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> </BLOCKQUOTE>
Trait de séparation <p>Un paragraphe commence ici et se poursuit jusqu’à la deuxième puis une troisième et enfin une quatrième et dernière ligne.</p> <HR /> <p>Un second paragraphe recommence et continue son chemin tranquillement jusqu’à la fin décidé par son créateur</p>
numérotée (OL) et la liste non numérotée (UL). Chaque élément de la liste est introducte par <li> (Liste Item) Les listes <OL> <li>Lundi</li> <li>Mardi</li> <li>Mercredi</li> </OL> <HR> <UL> <li>HTML 5</li> <li>CSS 3</li> <li>Javascript</li> </UL>
Bitmap (comme Photoshop) ou un logiciel de création vectoriel (comme Illustrator). Vous pouvez aussi télécharger sur le net une image en faisant attention au droit d’auteur. Choisir le format : le format Web est généralement le jpg, png ou le gif. La taille : elle doit être raisonnable et prendre en compte les débits de nos visiteurs. Quelques kilo-octets suiffisent largement. Comment créer ou choisir son image. Les images
format : le format Web est généralement le mp4. La taille : elle doit être raisonnable et prendre en compte les débits de nos visiteurs. Quelques kilo-octets ou mega-octet suiffisent largement.
prénoms. Les balises <label> servent à indiquer les étiquettes des contrôles Zone de saisie simple <FORM action=”” method=””> <p> <label for="nom">Nom nom</label> <INPUT type=”TEXT” id=" nom" valeur="nom" placeholder=" Robert Dupond" /> </p> </FORM>
de saisie large : textarea <form> <p> <label for="message" >Votre message</label> <textarea name=" message" id="message" cols="30" rows="10"> Ceci est un contenu par défaut, modifiable par l'utilisateur </textarea> </p> </f orm>
seul choix possible Liste déroulante - Choix unique <form> <p> <label for="major">Le major de la classe</label> <select name="major" id="major"> <option>Robert</option> <option>Rachid</option> <option>Rachelle</option> </select> </p> </form>
n’ont aucun sens sémantique. DIV & SPAN DIV est un conteneur plat, c’est à dire qu’il n’a aucun effet visuel sur le rendu dans le navigateur. C’est un conteneur de type “Block”. SPAN est quant à lui de type “inline”. Ils sont cependant, fort utiles, pour organiser les élements HTML pour une future mise en page avec les feuilles de styles (CSS). Ils n’ont d’intérêt que si on leur ajoute les attributs génériques ID, Class ou Style.
leur mise en page avec CSS ou leur manipulation dynamique avec Javascript. ID & Class Chaque élément HTML peut porter l’ attribut ID dont la valeur doit être unique dans le document. Exemple : <h1 id=”entete”>Formation HTML 5</h1> -------------------- Plusieurs éléments peuvent partager une même étiquette, une même classe. Dans ce cas, on utilise l’attribut CLASS. Exemple. <p class=”code”>Ceci est un code informatique</p> <div class=”code”>Ceci est un autre code informatique</div>
une future mise à en page. “Zonage” Le zonage permet de découper la page en autant de zones que nécessaire. Cela permet de positionner les zones de navigation, les contenus, le logo, le pied de page, le moteur de recherche, ou le fil d'Ariane...
en cascade), servent à mettre en forme des documents web, type page HTML ou XML Grâce aux propriétés d’apparence (couleurs, bordures, polices, etc) et de placement (largeur, hauteur, côte-à-côte, dessous-dessus, etc), le rendu d’une page peut être intégralement modifiée sans aucun code supplémentaire dans le HTML.
page de son apparence visuelle. - Eviter de répéter le même code dans toutes les pages Web - utiliser des styles génériques - changer l’apprence complet d’ un site en ne modifiant qu’un seul fichier - facilite la lecture des codes (HTML et CSS étant séparés)
Les CSS ne sont pas sensible à la casse - Mise en forme du code : Les CSS ne prennent pas en compte les espaces et retours à la ligne - Identifiants : les ID et les classes ne peuvent contenir que des caractères A-Z, a-z, 0-9 et ne peuvent commencer par un nombre - Commentaire : /* --- */
selecteur{propriete:valeur;} Un déclaration CSS est composé au minimum de deux éléments : - l’élément de la page auquel on applique une mise en forme (sélecteur) - le groupe de règle définissant le style Exemple : h1{ color: red; }
fichiers de styles différents afin de les organiser de façon modulaire. Pratiques possibles : - séparer les éléments de la mises en page (placement des éléents) des éléments de la mises en forme (typographie) - les CSS global pour le site et d’ autres plus spécifiques pour certaines pages @import “mon-fichier.css”;
à deux endroits possibles. - Dans une balise <style> placé dans l’entête <head> - Dans un fichier CSS et lié à la page Web en utilisant la balise de liaison <link>
Si plusieurs feuilles de styles sont liés à la page, elles sont interprétées au fur et à mesure de leur lecture. Si des règles contradictoires apparaissent, c’est la dernière règles lue qui est appliquée.
priorité est importante. Un style de moindre priorité ne peut jamais modifier un style priorité supérieur. Priorités des règles 1. Elément Html, par exemple « h1 {color: black} » 2. Imbrication d'éléments, par exemple « div h1 {color: black} » 3. Utilisation d'une classe, par exemple « h1.noir {color: black} » 4. Utilisation d'un identifiant, par exemple « h1#nom-du-site {color: black} » 5. style dans la balise Html, par exemple « <h1 style="color: black">...</h1> »
catégorie d’élement de la page éventuellement de nature différente ou une relation entre deux éléments de la page. Les sélecteurs 1. Sélecteurs généraux 2. Sélecteur de classes 3. Sélecteur d’identifiant 4. Sélecteur de déscendant
les balises de la page. C’est le sélecteur universel - Sélecteur de type : c’est le nom d’une balise HTML. Sélectionne tous les éléments de ce type. h2{}
typiquement aux élements redondants dans la page. Il concerne tous les élements HTML qui porte un attribut class. Il est spécifié par un POINT (.) suivi du nom de la classe. Exemple : .couleur_rouge{} .couleur_noire{}
amenophis1er
ahus1
flyunitedhelp
ttccddtoki
delta_tech
shoheimitani
espresso3389
plaidtech
siromi
odasho
sansantech
kazukiadachi
shinya337
chriscoyier
matthewcrist
lauravandoore
smashingmag
jeffersonlam
erikaheidi
chrisshort
productmarketing
lara
rocio
bryan
