< body >
< h1 > Ici le premier Titre Hending en H1 < / h1 >
< p > Ici le premier Paragraphe < / p >
< p > Bravo, vous venez de créer votre premier site WEB. < / p >
< / body >
< / html >
A Retenir
Une page web est divisée en 3 parties; l'en tête aussi appelé "header"; le contenu aussi appelé "content" et le pied de page appelé "footer"Ne pas confondre la balise "head" et le "header".
Quelque que soit le "title" de votre page d'accueil, la première page d'un site est toujours enregistrée sous le nom index.html.
L'affichage de votre site sera différent selon le navigateur utilisé.
Les outils nécessaires pour bien débuter en HTML sont : un éditeur de texte (notepad++), plusieurs navigateurs,
un serveur local (Wamp,Xampp,Easyphp,etc..), et un logiciel de retouche d'images.(vaste..^^).
Il existe aussi des alternatives au code à la main, de types CMS (Content Management System = Service de gestion de contenu)
Le language HTML est un language de balisage qui sert à tous sites internet. Une page HTML est un document texte.
Les documents HTML sont composés de deux parties :
< head > (informations navigateurs/auteur/moteurs2rech/CSS/etc..). < body > (informations visibles de votre site depuis un navigateur).Le W3C (World Wide Web Consortium) édicte des standards et préconisations pour une évolution optimale et homogène de l'internet.
Une balise HTML se trouve toujours entre les symboles "<" et ">" .
Les balises HTML sont généralement par paires.La balise ouvrante marque le début d'un contenu et la balise fermante marque la fin par "/" .
Certaines balises sont "autofermantes" et fonctionnent toutes seules.
Les balises ouvrantes peuvent avoir des attributs(=fonctions).Les attributs sont constitués d'un nom et d'une valeur.
Pour apprendre à coder en HTML, il faut connaître la fonction des balises, leurs différents attributs possibilités ainsi que leurs positions valides.
Les 5 règles du HTML
1-Toute balise ouvrante doit être fermée " < p > ouvre et ferme < / p > " .2-Toute balise et attribut doivent être ecrits en minuscules .
3-Les valeurs des attributs doivent apparaitre entre apostrophes (quotes) ou guillemets (double quotes)
4-Chaque attribut doit avoir une valeur .
5-Les éléments doivent être correctement imbriqués .
Exemples:
< balise > TEXTE < / balise >
< balise ouvrante > TEXTE < / balise fermante >
< balise attibut='valeur' > TEXTE < / balise >
Les principales Balises en blocs
< div >< html > < body >< head >< style >< script >< noscript >< h1/h2/h3/.../h6 >
< blockquote >< p >< pre >< address >< hr >< dl >< dt >< dd >< li >< ol >< ul >
< optgroup >< option >< select >< map >< table >< thead >< tfoot >< tbody >< tr >< th >< td >< form >
Les principales Balises en Ligne
< span >< meta / > < title >< img / >< area / >< a >< link / >< caption >< input / >
< button >< textarea >< label >< legend >< fieldset >< object >< param / >< br / >< em >< sup >< sub >< strong >
Les principales Balises Autofermantes
< area / >< br / > < hr / >< img / >< input / >< link / >< meta / >< param / >
Les commentaires
Voir le code source de la page actuelle ^_^
blabla div
La partie "head"
Dans la partie "Head" nous retrouvont 2 balises indispensables aux navigateurs et moteurs de recherche:-meta = nous renseigne sur la norme adoptée pour traduire les caractères spéciaux, dans notre cas UTF-8
-title = Le titre donne aux navigateurs et moteurs de recherche le titre de la page en cours. A ne pas confondre avec le nom sous lequel on enregistre la page.(1 seul par page.)
Après ses deux balises indispensables, on peut rajouter les balises suivantes au besoins :
Une balise pour les mots cléfs, une balise pour indiquer le nom de l'auteur,une autre qui renseignera les moteurs de recherche, une autre pour indiquer ou se trouve la feuille CSS qui va générer le style et l'apparence de votre page et ainsi de suite.
Regardez le code source dans la partie head du document pour les exemples ^_^, comme jsuis sympa je vous le remet ici :).
J'ai volontairement éffacé une des deux premières barres de commentaires pour qu'ils s'affichent.
< !DOCTYPE HTML >
< html >
< head >
< title > initiation au HTML < / title >
< meta http-equiv="Content-Type" contents ="text/ html ; charset=UTF-8 " >
< ! - Commentaire INSERTION DE LA BALISE META DE DESCRIPTION DE VOTRE SITE INTERNET PAR LES MOTEURS DE RECHERCHES-->
< meta name="description" content="Ceci est une initiation au HTML.Ce résultat est celui qui apparait dans Google." / >
< ! - Commentaire INSERTION DES BALISES DE MOTS CLES (-de 10 mots)-->
< meta name = "keywords" content="HTML initiation; Apprendre le HTML; Comprendre le code source HTML" / >
< ! - Commentaire INSERTION DE LA BALISE META DE L'AUTEUR ( référencement naturel de votre NOM,Pseudo sur base e-réputation )-->
< meta name="author" content="michael berder" />
< meta name="author" content="michael berger" />
< meta name="author" content="mickael berder" />
< meta name="author" content="mickael berger" />
< meta name="author" content="ammilgaoul" />
< / head>
La partie "body"
Dans cette partie de votre code HTML se trouvent toutes les informations visibles à l'intérieur de votre site internet.Structurer le texte en HTML
Les Titres
Ce sont des balises de types bloc : h1,h2,..,h6.(heading en anglais)De 1 (pour le plus important ) à 6 (pour le moins important); il est essentiel de bien structurer votre document avec ces titres.
Pour ce qui est de la taille et du style les CSS s'en occuperont.
Voici quelques exemples :
h2=Exemples de titres HTML et CSS
h3=Détails des cours
h4=HTML
h5=CSS
h6=Donnez vie à vos pages web
HTML h4= Hyper Text Markup Language
CSS h3= Cascade Style Sheet
Les Paragraphes
La balise < p > est de type bloc et délimite les paragraphes. < p > Bonjour c'est moi < / p >< p > Cool comment vas-tu aujourd'hui ? < / p >
< p > bien et toi polo ? < / p >
Bonjour c'est moi
Cool comment vas-tu aujourd'hui?
bien et toi polo?
La balise < br / > elle, permet d'aller à la ligne suivante.
La balise < pre > de type bloc permet d'intégrer un texte préformaté ; utilisé pour insérer du texte de type "code" qui ne doit pas être interpreté par le navigateur; affiché tel qu'on l'a écrit; à l'endroit écrit.
< pre > < p > Bonjour c'est moi :) < / p > < p > oui et alors ? < / p > < p > bah rien, c'était juste pour le fun, rien de plus ^^ < / p > < / pre >
La balise < blockquote > de type bloc permet l'insertion d'une citation avec l'ajout d'un alinéa. A utiliser à bonne escient, pas comme un paragraphe.
"Quand je désespère, je me souviens que dans l'Histoire la voix de la Vérité et de l'Amour finit toujours par triompher, que même si pendant un temps, les tyrans et assassins semblent invincibles, à la fin ils tombent."
GANDHI ( l'homme dont l'esprit a grandi )
La balise < address > est prévue pour contacter le webmaster, évitez les espaces dans le texte du sujet, pas toujours très bien gérés.
< address >
< a href="mailto:votreadresse@mail?cc=adressemailsup1;adressemailsup2;adressemailsup3;subject=Sujet">Contact< / a >
< / address >
Contact
Pour plusieurs destinataires : Contactez notre support web
La balise < hr / > permet d'insérer une ligne de séparation dans votre code. N'oubliez pas l'espace avant le "/". Voici un exemple:
< hr / >
< h3 > HTML < / h3 >
< p > Mercredi - 19h30 < / p >
< hr / >
< h3 > CSS < / h3 >
< p > Mardi - 19h30 < / p >
< hr / >
HTML
Mercredi - 19h30CSS
Mardi - 19h30Les Listes
Les Listes de définition
La balise < dl > de type bloc, permet de déclarer une liste de définition, la balise < dt > permet d'identifier les entrées de la liste de définition et la balise < dd > permet d'identifier la définition.Elles sont toutes conjointement liées entre elles.
La version HTML :
< dl >
< dt > HTML < dt >
< dd > HyperText Markup Language < dd >
< dt > CSS < dt>
< dd > Cascade Style Sheet < dd>
< / dl >
La version visuelle :
- HTML
- HyperText Markup Language
- CSS
- Cascade Style Sheet
Les listes ordonnées (nombres, lettres,etc.) et non ordonnées (puces, tirets,etc.)
La balise de type < li > permet d'inserer un élément dans une liste.Elle peut être contenue dans une liste ordonnée < ol > ou non-ordonnée < ul >.La balise de type < ol > est une liste ordonnée qui contiendra les < li > et éventuellement des sous-listes.
La balise de type < ul > est une liste non ordonnée et bloc qui contiendra les < li > et eventuellement des sous-listes. Les éléments listés seront précédés d'une puce.
D'autres types de numérotations sont possible à l'aide de CSS; en chiffres romains par exemples.
< ol >
< li > Commentaires HTML < / li >
< li > Balises HTML < / li >
< ul >
< li > Balises en ligne < / li >
< li > Balises Blocs et tables < / li >
< li > Balises Autofermantes < / li >
< li > Balises Déconseillées < / li >
< li > Balises en ligne < / li >
< / ul >
< li > Les Doctypes < / li >
< ul >
< li > Transitional < / li >
< li > Frameset < / li >
< li > Strict < / li >
< / ul >
< / ol >
Voici le résultat :
- Commentaires HTML
- Balises HTML
- Balises en ligne
- Balises Blocs et tables
- Balises Autofermantes
- Balises Déconseillées
- Balises en ligne
- Les Doctypes
- Transitional
- Frameset
- Strict
Les Tableaux
Les tableaux ont une imbrication sur 3 niveaux contre deux pour le reste du code HTML. Plus simplement < table > déclare un tableau et contient < tbody > qui est la premiere balise imbriquée. Viennent ensuite en niveau 2 les < tr > qui déclarent le début des colonnes contenant elles-mêmes les < td > qui déclarent chaque colonne, situés en niveau 3.La balise bloc < table > permet de déclarer un tableau de données.
Les composant indispensables sont les éléments < tr > (ligne du tableau), < th > (cellule d'en tête) et < td > (cellule).
Les composants complémentaires sont < caption >(légende du tableau), < thead > (groupe de cellules dans l'en tête), < tbody > (groupe de cellules de corps) et < tfoot> (groupe de cellules de pied).
Il est recommandé d'utiliser l'attribut "summary" (résumé) pour des raisons d'accessibilité.
L'attribut " colspan " permet de fusionner les cellules.Dans mon exemple, nous avons 3 cellules fusionnées.
La balise de type en ligne < caption > affiche une légende associée à un tableau de données.Elle doit se situer tout de suite après la balise < table>.
La balise de type bloc < head > regroupe les cellules d'en tête du tableau de données.
La balise de type bloc < tfoot > permet de regrouper les cellules de pied du tableau de données.
Les balises < thead > et < tfoot > se placent toujours avant le < tbody >.
La balise de type bloc < tbody > regroupe les cellules du corps du tableau de données.
La balise de type bloc < tr > regroupe regroupe les celules d'une même ligne d'un tableau.
La balise de type bloc < th > désigne une cellule d'en tête "titre" d'un tableau.
La balise de type bloc < td > désigne une cellule d'un tableau.
Un petit tableau pour appréhender les imbrications:
Voici un tableau simplifié
< table >< tr >
< td > 1 < / td >
< td > 2 < / td >
< td > 3 < / td >
< td > 4 < / td >
< td > 5 < / td >
< tr / >
< / table >
1 | 2 | 3 | 4 | 5 |
Voici un tableau classique
Il doit avoir des infos supplémentaires et un niveau de plus que le tableau précédent. Il est souhaité de définir les balises avec le nombre de lignes et de colonnes en les remplissant simplement par une suite de nombres. Cela aide à repérer ensuite ou se trouve quoi et facilite le remplissage. Un tableau se remplit ligne à ligne. En HTML les lignes d'un tableau sont très importantes. La règle du W3C veut que l'on renseigne d'abord la ligne d'en tête < thead > puis la ligne de pied de tableau < tfoot > et seulement après les lignes intermédiares < tbody >.Pour un tableau de 5 lignes et une seule colonne nous aurons donc ceci:
< table >
< thead >
< tr >
< td > 1 < / td >
< / tr >
< / thead >
< tfoot >
< tr >
< td > 5 < / td >
< / tr >
< / tfoot >
< tbody >
< tr >
< td > 2 < / td >
< / tr >
< tr >
< td > 3 < / td >
< / tr >
< tr >
< td > 4 < / td >
< / tr >
< / tbody >
< / table >
1 |
5 |
2 |
3 |
4 |
Un tableau quelconque
< table summary = "Petit cours sur les tableaux" >< caption > Petit cours sur les tableaux < / caption >
< thead >
< tr >
< th coldspan = "3"> Titre en en-tête < / th>
< / tr >
< / thead >
< tfoot >
< tr >
< th >titre de pied 1< / th >
< th >titre de pied 2< / th >
< th >titre de pied 3< / th >
< / tr >
< / tfoot >
< tbody >
< tr >
< th >Colonne 1< / th>
< th >Colonne 2< / th>
< th >Colonne 3< / th>
< / tr>
< tr >
< th >Colonne 1 bis< / th>
< th >Colonne 2 bis< / th>
< th >Colonne 3 bis< / th>
< / tr >
< / tbody >
< / table >
Titre d'en-tête | ||
---|---|---|
titre de pied 1 | titre de pied 2 | titre de pied 3 |
Colonne 1 | Colonne 2 | Colonne 3 |
Colonne 1 bis | Colonne 2 bis | Colonne 3 bis |
Un tableau complet
Un tableau en HTML se construit ligne par ligne. Même si une cellule est vide et vous paraît inutile, il faut la représenter, autrement le tableau ne sera pas valide.La balise < th > a la même fonction que la balise < td > mais représente une en-tête de colonne ou de ligne et les navigateurs les affichent en gras.
Reprenons la balise < table >: ajoutons un attribut "summary" qui résumera le contenu du tableau, en conformité avec les règles d'accesssibilités web.
Juste après la balise < caption > permet de donner un titre au tableau.
Passons les balises < thead > , < tfoot > et les < tbody > pour voir à l'intérieur des < tr > :
On peut remplacer les balises de cellule < td > par des balises de cellule d'en-tête < th > (h comme head); cela aura pour effet de centrer le texte dans la cellule et de le mettre en gras.
table = déclare un tableau
tr = table raw (ligne de tableau)
td = table data (données du tableau)
th=table head (cellule d'en-tête)
< table summary="Cours sur les tableaux" >
< caption > Planning semaine de l'équipe Sky Net < / caption >
< thead >
< tr >
< th > < !--cellule non utilisée --> < / th >
< th > Lundi < / th >
< th > Mardi < / th >
< th > Mercredi < / th >
< th > Jeudi < / th >
< th > Vendredi < / th >
< / tr >
< / thead >
< tfoot >
< tr >
< th > Nuit < / th >
< th coldspan = "3" > Repos < / th >
< th coldspan = "2" > Fiesta < / th >
< / tr >
< / tfoot >
< tbody >
< tr >
< th > Matin < / th >
< td > Armand.O < / td >
< td > Fernand.Y < / td >
< td > Mickael.G < / td >
< td > Damien.A < / td >
< td > Roger.T < / td >
< / tr >
< tr >
< th > Midi < / th >
< td > Roger.T < / td >
< td > Armand.O < / td >
< td > Fernand.Y < / td >
< td > Damien.A < / td >
< td > Mickael.G < / td >
< / tr >
< tr >
< th > Soir < / th >
< td > Mickael.G < / td >
< td > Damien.A < / td >
< td > Armand.O < / td >
< td > Roger.T < / td >
< td > Intérimaire < / td >
< / tr >
< / tbody >
< / table >
Lundi | Mardi | Mercredi | Jeudi | Vendredi | |
---|---|---|---|---|---|
Nuit | Repos | Fiesta | |||
Matin | Armand.O | Fernand.Y | Mickael.G | Damien.A | Roger.T |
Midi | Roger.T | Armand.O | Fernand.Y | Damien.A | Mickael.G |
Soir | Mickael.G | Damien.A | Armand.O | Roger.T | Intérimaire |
Les Formulaires
La balise de type bloc < form > indique un ensemble de champs interactifs permettant de donner des informations utilisateur.Les champs sont souvent validés par l'élément < input / > de type submit. Elle ne peut contenir directement que des éléments de types bloc et ne peut contenir d'autres éléments < form >.
La balise en ligne < input / > est un élément intéractif dans un formulaire. Elle peut être de différents types:
text texte checkbox case à cocher multiple radiogroup case à cocher unique file fichier images soumission avec une images password mot de passe submit validation reset effacement des champs hidden champs masqué button bouton génériquePour obtenir des formulaires qui affichent un message en cas d'erreurs, il vous faudra HTML5. Grâce à l'attribut "required", cependant tous les navigateurs ne prennent pas encore en comptent la validation HTML5.
Pour affecter un type il faut écrire ainsi:
< input type="checkbox" id="nom" />
La balise en ligne < button > est l'élément qui créer un bouton étiqueté.
< button > valider < / button >
La balise de type en ligne < textarea > permet elle de créer une zone de texte.
< textarea type="text name="message" rows="10" cols="40" style="background-color:#FFC"> < / textarea>
La balise de type en ligne < label > permet de créer un texte associatif sur un formulaire.
La balise de type en ligne < legend > assigne une légende à un élément < fieldset >. Elle est recommandé pour l'accessibilité.
La balise de type en ligne < fieldset > regroupe les informations d'un même type au sein d'un formulaire. Elle est forcément accompagnée de < legend >.
< form action="-" method="post">
< fieldset >
< legend > Informations Principales < / legend >
Pour vous identifier
< br />
< label for="nom"> Votre Nom: < / label >
< br />
< input type="text" id="nom" / >
< br />
< label for="prenom"> Votre Prénom: < / label >
< br />
< input type="text" id="prenom" / >
< / fieldset >
< fieldset >
< legend > Informations Secondaires < / legend >
Vous êtes :
< br />
< label >< input type="radio" value="homme" name="un Homme" /> Un Homme < / label >
< label >< input type="radio" value="femme" name="une Femme" /> Une Femme < / label >
< br />
< textarea name="texte" cols="25" rows="5"> Votre Message ICI < / textarea >
< / fieldset>
< div >
< input value="envoyer" name="envoi" type="submit" />
< / div >
< / form >
Créer un lien vers une messagerie
< a href="mailto:votreadresse@mail.fr;adresse@mail2;adresse@mail3;adresse@mail4?subject=Mon Sujet">Envoyer un mail < / a >Envoyer un mail
Définir un formulaire
Il faut utiliser la balise < form > pour créer le début et la fin du formulaire et déterminer la façon dont seront transmises les données/ ici c'est par mail via l'attribut "action". Tout est inséré entre ses deux balises.< form method=post action="mailto:monadresse@mail.fr">
..... .... .... < / form >
Ajouter un champs de texte
Plusieurs types de champs sont utilisables pour un formulaire. Cela servira à récupérer les principales informations.< p > Nom < INPUT type=text name="nom"> < / p >
Ajouter des champs de texte supplémentaires
Nous pouvons rajouter plusieurs éléments.< p > Téléphone/ < INPUT type=text name="Téléphone">
< / p >
< p > Adresse
< INPUT type=text name="Adresse">
< / p >
Ajouter des champs avec cases à cocher
Nous pouvons rajouter un champs à choix multiples types QCM ou sondage en utilisant le type d'entrée "radio name".Ici nous allons demander de définir son sexe:
< TD >Sexe< / TD >
< TD >
< p > Homme :
< INPUT type=radio name="sexe" value="M">
< br >Femme :
< INPUT type=radio name="sexe" value="F">
< / p > < / TD >
Femme :
Ajouter un champ à choix multiples avec menu déroulant
Ce type de menu peut être utile si vous proposez beaucoups de choix. Notre exemple vous propose de choisir votre origine selon les pays proposés< TR >
< TD >Le Pays de vos Vacances < / TD >
< TD >
< SELECT name="AFRIQUE">
< OPTION VALUE="Gabon">Gabon< / OPTION>
< OPTION VALUE="Cameroun">Cameroun< / OPTION>
< OPTION VALUE="Tunisie">Tunisie< / OPTION>
< OPTION VALUE="Algérie">Algérie< / OPTION>
< OPTION VALUE="Mali">Mali< / OPTION>
< / SELECT >
< / TD >
< / TR >
Ajouter un champ de texte libre
Cela peut se révéler utile< p >Message
< TEXTAREA row="5" name="Message">
Tapez votre message< / TEXTAREA >
< / p >
Message
Envoyer le formulaire
Le formulaire étant défini, nous pouvons ajouter une entrée "submit" qui permettra de valider des données et activer l'envoi par mail défini précédemment.< p >
< INPUT type="submit" value="Envoyer">
< / p >
LE FORMULAIRE ACCUMULE ^_^
Les Listes de menu déroulant
La balise de type bloc < optgroup > permet de regrouper une liste d'options dans un menu déroulant (obligatoire avec l'attribut "label")La balise de type bloc < option > permet de désigner un élément qui se trouve dans la liste < select > du < optgroup >.
La balise de type bloc < select > permet de lister la série de choix contenue dans le menu déroulant.
< select name="Liste des Voitures disponible" >
< optgroup label="Voitures Ecologiques" >
< option >Electriques< / option >
< option >Autonome< / option >
< option >Solaires< / option >
< option >A Eau< / option >
< option >A Hydrogène< / option >
< / optgroup >
< optgroup label="Voitures Allemandes" >
< option >BMW< / option >
< option >Audi< / option >
< option >Opel< / option >
< option >Mercedes< / option >
< / optgroup >
< optgroup label="Voitures Françaises" >
< option >Peugeot< / option >
< option >Citroën< / option >
< option >Renault< / option >
< option >Oupsss 1 intrus...< / option >
< / optgroup >
< / select >
Hiérarchiser ses contenus
Utiliser une bonne hiérarchisation des titres
Eviter de ne mettre que des titres et des paragraphes.< h1 >Apprendre le HTML et le CSS < / h1 >
< h2 >Détails des cours< / h2 >
< h3 >HTML< / h3 >
< p >Apprendre le principe des balises < / p >
< p >Maitriser le manguage des flux < / p >
< h3 >CSS< / h3 >
< p >Apprendre à appliquer un style à votre page Web< / p >
< p >Approfondir ses connaissance en CSS< / p >
Apprendre le HTML et le CSS
Détails des cours
HTML
Apprendre le principe des balisesMaitriser le manguage des flux
CSS
Apprendre à appliquer un style à votre page WebApprofondir ses connaissance en CSS
Séparer et ajouter des espaces
On peut utiliser la balise < hr / > (crée une ligne de séparation) et la balise < br / > (permet de sauter une ligne)< h1 >Essayons de séparer à l'aide d'une ligne de séparation< / h1 >
< hr / >
< h2 >Maintenant et si on sautait une ligne ?< / h2 >
< br / >
< h3 >HTML< / h3 >
< p >Apprendre le principe des balises< / p >
< p >Maitriser le manguage des flux< / p >
< h3 >CSS< / h3 >
< p >Apprendre à appliquer un style à votre page Web< / p >
< p >Approfondir ses connaissance en CSS< / p >
Essayons de séparer à l'aide d'une ligne de séparation
Maintenant et si on sautait une ligne ?
HTML
Apprendre le principe des balisesMaitriser le manguage des flux
CSS
Apprendre à appliquer un style à votre page WebApprofondir ses connaissance en CSS
Ajouter des listes non ordonnées
Nous pouvons créer des listes simples à l'aide des balises < ul > et < li > . Il faut toujours fermer chaque balise que l'on ouvre!< ul >
< li > Liste 1 < / li >
< li > Liste 2 < / li >
< li > Liste 3 < / li >
< li > Liste 4 < / li >
< li > Liste 5 < / li >
< / ul >
- Liste 1
- Liste 2
- Liste 3
- Liste 4
- Liste 5
< ul >
< li >Liste 1< / li >
< li >Liste 2
< ul >
< li >Sous titre 1< / li >
< li >Sous titre 2< / li >
< li >Sous titre 3< / li >
< li >Sous titre 4< / li >
< li >Sous titre 5< / li >
< / ul >
< / li >
< li >Liste 3< / li >
< li >Liste 4< / li >
< li >Liste 5< / li >
< / ul >
- Liste 1
- Liste 2
- Sous titre 1
- Sous titre 2
- Sous titre 3
- Sous titre 4
- Sous titre 5
- Liste 3
- Liste 4
- Liste 5
Ajouter des listes ordonnées
Nous pouvons obtenir des listes numérotées. La seule différence avec les listes non ordonnées est la balise < ol > (au lieu de < ul <).< ol >
< li >HTML< / li >
< li >CSS< / li >
< li >JavaScript< / li >
< / ol >
- HTML
- CSS
- JavaScript
Ajouter des listes de définition
Les balises < dl >, < dt > et < dd > structurent des listes de mots et leur définition. Très utile et indiquées pour un glossaire.< dl >
< dt > HTML/HXTML < / dt >
< dd > "Hypertext Markup Language"Language de base de l'internet. < / dd >
< dt > CSS < / dt >
< dd > "Cascading Style Sheets"Appliquer un style à votre page Web. < / dd >
< dt > WC3 </ dt >
< dd > "World Wide Web Consortium" est un organisme de standardisation. < / dd >
< dl >
- HTML/HXTML
- "Hypertext Markup Language"Language de base de l'internet
- CSS
- "Cascading Style Sheets"Appliquer un style à votre page Web
- WC3
- "World Wide Web Consortium" est un organisme de standardisation
- JAVASCRIPT
- Language de programmation de scripts
- PHP
- "Hypertext Preprocessor"Language de programmation orienté object
- SQL
- "Structured Query Language" Language de requête structurée, orienté objet
- PYTHON
- Language de programmation orienté objet
- JAVA
- Language orienté object applet/appliquette
- C
- Language de programmation C
- C++
- Language de programmation compilé orienté objet
- RUBY
- Language de programmation interprété,orienté object et multi-paradigme
- AJAX
- "Asynchronous JavaScript and XML" construit des applications web et des sites web dynamiques intéractifs
Les liens Hypertextes
Créer des liens pointant vers une ancre, une page, un site internet ou une image
Insérer des liens sur une image
01 - Création de lien et balise HTML
<a href= "lien, fichier, id, etc…">….<a>
02 - Définir une ancre
< div id="Mon premier lien vers une ancre">ANCRE N°1< / div >
ANCRE N°1
03 - Créez le lien vers une ancre
< a href="#Mon premier lien vers une ancre">Lien vers une ancre< / a > < / p >
Lien vers une ancre
04 - Créez le lien vers une page de site précise
< a href="https://areyouecolo.blogspot.com/p/simulations.html"> Lien vers la page des "dégats climatiques" < / a > < / p >
Lien vers la page des "dégats climatiques"
05 - Créez le lien vers un site externe
< a href="https://www.google.fr"> Lien vers la page d’accueil de Google< / a >
Lien vers la page d’accueil de Google 06 - Créez le lien vers une image
< a href="http://www.presse-citron.net/wordpress_prod/wp-content/uploads/internet_2013_infographic.jpg"> Voir internet sous l'eau< / a > < / p >
Voir internet sous l'eau
07 - Créez le lien vers un fichier
< a href="https://drive.google.com/drive/folders/1Ikq6KaDdtY96nEl7MwxuUiWFPBMxuX4L?usp=sharing"> LIVRETS BLANC 2019< / a > < / p >
LIVRETS BLANC 2019
08 - Ouvrez un lien dans un nouvel onglet
< a href="https://www.youtube.com/user/ammilgaoul1" target="_blank" > Lien vers ma page Youtube < / a > < / p >
Lien vers ma page Youtube
09 - Créer un lien pour revenir en haut de votre page
< a href="#">Revenir tout en haut de la page< / a > < / p >
Revenir tout en haut de la page
10 - Créez un lien à partir d’une image
< a href ="https://picasaweb.google.com/100938962858142387321/HUBBLETOP#slideshow/6226057315797044242" target="_blank" >
< img height="100" src= "https: // lh3.googleusercontent.com/-HYq45y_jzyc/VocwuDOTIyI/AAAAAAAAD0s/8E5dRjj3eqk/s800-Ic42/VIGNETTE.png"
title = "Cliquez ici pour voir une diaporama HD" width="100" / > < / a > < br / >
Structurer votre page avec des boîtes
Préparer le HTML pour utiliser au mieux le CSS
Diviser et nommer L'intérêt de la balise < div >
Intéraction entre HTML et CSS
Toutes les balises ainsi que le texte contenus entre les balises < div > et < / div > seront comme une boiteCela facilite grandement l'organisation à l'aide de CSS. Nous avons la possibilité d'attribuer à cette boite des dimensions,fond,bordure et bien d'autres attributs.
Pour cela définir des zones avec des petits noms à vos balises est indispensable.
Donner un nom à une balise permet de mieux s'y retrouver entre les différentes pages et documents.
Cela permet une mutualisation entre votre HTML et votre CSS.
La balise de division < div > permet de regrouper d'autres éléments de types bloc et/ou en ligne.
Une balise < div > ne peut contenir du texte, il s'agit d'un conteneur générique.
Nous devons donc baliser notre texte alphanumérique dans une < div >. Passons en pratique :
< div >
< h4 > Citation du jour < / h4 >
< blockquote >
< p >En aidant les autres à réussir, on assure notre propre succès < / p >
< cite > William A.Feather< / cite >
< / blockquote >
< / div > < !-- end div -->
Citation du jour
En aidant les autres à réussir, on assure notre propre succès
William A.Feather
La balise de type < span > est l'équivalent en "ligne" de la balise < div >.
Il s'agit d'un conteneur et également d'un élément neutre.
Elément neutre :
< h3 >< span style="color:#f29400"> En aidant les autres à réussir, < / span >< span style="color:#009ee0"> on assure notre propre succès < / span> < / h3 > < h4 >< span style="color:#97bf0d"> William A.Feather < / span>En aidant les autres à réussir, on assure notre propre succès
William A.Feather
Conteneur générique :
< span >< h4 >Citation du jour< / h4 >
< blockquote>
< p >En aidant les autres à réussir, on assure notre propre succès< / p >
< cite >William A.Feather < / cite >
< / blockquote >
< / span > < !-- end span -->
Citation du jour
En aidant les autres à réussir, on assure notre propre succès
William A.Feather
Le nommage des balises
Pour nommer les balises il ne faut pas utiliser de majuscules, d'espaces, de points, de "/", "-" ni de caractères spéciaux.Deux cas de figures, on peut donner un "id" (une identité) ou une "classe" comme classification.
Les classes et les id fonctionnent comme des attributs normaux.Nous nous intéressons seulement aux "classes" dans cet exemple.
< div class="ma_citation">
< h4 >Citation du jour< / h4 >
< blockquote >
< p >En aidant les autres à réussir, on assure notre propre succès< / p >
< cite >William A.Feather< / cite >
< / blockquote >
< / div> < !-- end .div_3 -->
Citation du jour
En aidant les autres à réussir, on assure notre propre succès
William A.Feather
On peut maintenant attribuer des fonctions CSS spécifiques aux balises portant une "class" ou un "id".
Et si on apprivoisait le Css ?
Lien vers une archive de DEMOS HTML et CSS (24 mo)
Templates de Sites & Kits UI & ETC (551 mo)
Lien vers "Mes Créations" (5 mo)
TuTos Photoshop
Remonter en haut de la page