Appréhender le HTML

initiation au HTML < html >
< 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 - 19h30

CSS

Mardi - 19h30


Les 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 :
  1. Commentaires HTML
  2. Balises HTML
    • Balises en ligne
    • Balises Blocs et tables
    • Balises Autofermantes
    • Balises Déconseillées
    • Balises en ligne
  3. 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 >

Petit cours sur les tableaux HTML
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 >


Planning semaine de l'équipe Sky Net
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érique
   
Pour 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 >

Informations Principales Pour vous identifier



Informations Secondaires Vous êtes :


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 >
Sexe Homme :
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 >
Le Pays de vos Vacances

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 ^_^
Prénom
Nom
Mail
Téléphone
Adresse
Sexe Homme :
Femme :
Choisissez 2 choix de Vacances Message


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 balises
Maitriser le manguage des flux

CSS

Apprendre à appliquer un style à votre page Web
Approfondir 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 balises
Maitriser le manguage des flux

CSS

Apprendre à appliquer un style à votre page Web
Approfondir 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
Nous pouvons également rajouter des sous-listes. il faut imbriquer les balises les unes dans les autres comme ci dessous.Garder le reflexe de décaler chaque niveau à l'aide de tabulations=Bonne pratique.
< 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 >

  1. HTML
  2. CSS
  3. 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 boite
Cela 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