LES BALISAGES DU LANGAGE HTML

« COURS HTML ET CSS HTML Le HTML n'est pas un langage de programmation.

On parle plutôt de balisage de texte.

HTML est l'acronyme de Hyper Text Mark-up Language.

HyperText est un système qui contient des hyperliens ( pouvoir accéder à des documents externes via un lien externe ) Créer une page web Créer un fichier .html Pour créer une page HTML ouvrez votre éditeur de texte préféré ( Notepad++ par exemple ) ; créez un nouveau fichier et copiez coller le code suivant: Titre de ma page Bienvenue sur mon site Enregistrez ensuite le fichier dans le dossier que vous voulez en cliquant sur "Fichier Enregistrer sous".

Nommez le accueil.html L’extension .html permet au système d'exploitation de savoir que le fichier sur lequel vous travaillez est une page web, assurez-vous donc que l'extension soit bien enregistrée. Résumé Pour créer une page web, il faut créer un fichier avec une extension .html Le balisage de base On remarque dans le code HTML ci-dessus qu'il existe déjà 3 balises : html head body La balise est obligatoire et permet d'indiquer qu'on code en HTML. La balise permet de donner des précisions au navigateur sur le contenu de la page. On y stock par exemple les meta données dont les moteurs de recherche ont besoin pour le référencement du site comme la description du site, les mots clé qu'on souhaite lui associer ou tout simplement le type d'encodage de la page ou sa langue. La balise quant à elle reçoit tout le le visuel, c'est dans cette balise qu'on construira la structure du site. LES BALISES Pour donner une valeur à une balise on encadre la valeur de sa balise comme ci-dessous : Texte GRAS Texte ITALIQUE Texte SOULIGNE Dans certains cas, par exemple pour , , il ne faut pas fermer la balise. Les balises les plus utilisées sont les suivantes : Balise Fonction Commentaire Lien hypertext 1 COURS HTML ET CSS Texte en gras Corps de la page Permet de sauter une ligne Titre d'un tableau Citation Division Emphase ( italique ) Permet de regrouper des éléments d'un formulaire Formulaire Frame Titre d'importance 1 Titre d'importance 2 Titre d'importance 3 Titre d'importance 4 Titre d'importance 5 Titre d'importance 6 Entête d'un fichier Séparateur horizontal Balise obligatoire pour déclarer le debut du code html Italique Image Elément du formulaire Description d'un champ Composant d'une liste ( ul ou ol ) Légende d'un tableau Information sur la page Le texte indiqué sera affiché dans le cas où le navigateur n'accepte pas les scripts Element multimédia Liste numéroté, associé à la balise li Entrée de la base select Respecte le contenu HTML pour les espaces. Insertion de script Division comme la balise div l'affichage est différent Texte en gras Insertion de style ( CSS ) Texte en indice Texte en exposant Tableau Cellule de tableau Champ composé de plusieurs lignes Cellule d'entête d'un tableau Titre de la page Nouvelle ligne d'un tableau Liste non numéroté Cours sur les attributs HTML Les balises peuvent avoir des propriétés, on les appelle des attributs. 2 COURS HTML ET CSS Titre de ma page ...

Bienvenue sur mon site Dans l'exemple ci-dessus, l'attribut "name" de la base "meta" a pour valeur "description".

Cela permet de dire au navigateur que la balise meta - qui est une balise d'information - nous informe de la description du site.

Pour cette balise la valeur se met dans l'attribut "content". Liste attributs HTML Attribut accept accept-charset accesskey action align Alt async autocomplete autofocus autoplay charset checked class cols colspan data-* Dir disabled Elément , TOUS Description Le type de fichier accepté par le serveur Type d'encodage supporté Définit un raccoucrci clavier pour activer ou sélectionner un élément L'URL du script qui traitera les valeurs du formulaire , , , Définit l'alignement horizontal de , , , l'élément.

Exemple : left, right, center et justify. , , Texte alternatif lorsque l'élément ne peut être affiché. Exécute le script en asynchrone , , Propriété qui permet d'afficher ou non des propositions de complétion de texte à l'utilisateur , , L'élement est sélectionné au chargement de la page , Chargement automatique de l'élement multimédia. , Définit le type de codage de l'élement Indique si l'élément est coché TOUS Permet d'associer une classe à un élément Indique le nombre de colonne de l'élément , Permet de fusionner x cellule d'un tableau horizontalement TOUS Permet de créer ses propres attributs. Exemple data-user="1" TOUS Indique le sens de lecture.

Exemple ltr pour (left to right) et rtl ( right to left ) TOUS Permet de bloquer l'édition de l'élément et rend l'élement illisible pour la validation du formulaire. 3 COURS HTML ET CSS download draggalbe dropable dropzone enctype For Form Href Id maxlength method name placeholder readonly selected Size Src Style target Title Type type , Indique que l'hyperlien doit être utilisé pour télécharger la ressource TOUS Indique si l'élement peut être déplacé par l'utilisateur TOUS Indique si l'élement peut receptionner un élément draggable. TOUS Indique si l'élement peut receptionner un élément draggable. Définit le type d'encodage des données du formulaire quand la method est POST , Décris l'élement qui lui est associé , , , Indique le formulaire qui est propriétaire , , , de l'élément , , , , , L'url de la ressource associée TOUS Permet d'associer un identifiant à un élément , Définit le nombre de caractère maximum pour l'élément Indique quel méthode HTTP doit être utilisé quand le formulaire est envoyé. Peux être GET (défaut) ou POST. TOUS Lors de la soumission d'un formulaire, on récupère les valeurs et les noms des champs. , Ajoute un texte informatif pour l'utilisateur , Indique si l'élément peut être édité par l'utilisateur Permet de sélectionner une valeur dans un , Définit la taille d'un élément par un nombre de caractères , , , Indique la source de l'élément.

Pour , , , l'image par exemple on indique où elle , , se trouve sur le serveur. TOUS Définit les styles CSS qui primeront sur les styles précédemment définis. , Indique où charger le script: nouvelle page, page nommé ou la même page. TOUS Permet d'indiquer à l'utilisateur une information, visible lors du survol de la souris sur celui-ci. , , , Indique le type de l'élément. , , , , , Indique la valeur de l'élément. 4 COURS HTML ET CSS Les tableaux Aujourd'hui les tableaux HTML ne sont utilisés que pour des tableaux de données.

Il est plutôt conseillé de faire la mise en page en CSS.

Plus souple, plus précis, plus facile et surtout plus évolutif, misez tout ce qui est visuel sur le CSS.

Un tableau HTML ne doit servir que de base d'un tableau. Créer un tableau avec la balise Cellule 1 de la ligne 1 Cellule 2 de la ligne 2 Cellule 1 de la ligne 2 Cellule 2 de la ligne 2 Résultat: Cellule 1 de la ligne 1 Cellule 2 de la ligne 1 Cellule 1 de la ligne 2 Cellule 2 de la ligne 2 Les entêtes Entete 1 Entete 2 Cellule 1 de la ligne 2 Cellule 2 de la ligne 2 En tête 1 Cellule 1 de la ligne 2 Entête 2 Cellule 2 de la ligne 2 Colspan, fusionner des cellules horizontalement Vous pouvez fusionner des cellules horizontalement avec l'attribut colspan. Cellule 1 de la ligne 1 Cellule 2 de la ligne 1 5 COURS HTML ET CSS FUSION de cellule Cellule 1 de la ligne 3 Cellule 2 de la ligne 3 Cellule 1 de la ligne 1 Cellule 2 de la ligne 1 FUSION de celulle Cellule 1 de la ligne 3 Cellule 2 de la ligne 3 Rowspan, fusionner des cellules verticalement Cellule 1 de la ligne 1 Cellule 2 de la ligne 1 FUSION cellule Cellule 2 de la ligne 2 Cellule 2 de la ligne 3 Cellule 2 de la ligne 1 Cellule 1 de la ligne 1 Cellule 2 de la ligne 2 FUSION cellule Cellule 2 de la ligne 3 Légende en haut des tableaux HTML Legende en haut Cellule 1 de la ligne 1 Cellule 2 de la ligne 1 Cellule 1 de la ligne 2 Cellule 2 de la ligne 2 6 COURS HTML ET CSS Légende en haut Cellule 1 de la ligne 1 Cellule 1 de la ligne 2 Cellule 2 de la ligne 1 Cellule 2 de la ligne 2 Légende en bas des tableaux HTML Legende en bas Cellule 1 de la ligne 1 Cellule 2 de la ligne 1 Cellule 1 de la ligne 2 Cellule 2 de la ligne 2 Cellule 1 de la ligne 1 Cellule 2 de la ligne 1 Cellule 1 de la ligne 2 Cellule 2 de la ligne 2 Légende en bas Mise en forme du tableau HTML Il est possible de faire de la mise en forme en HTML pour les tableaux, mais je vous conseille plutot de le faire en CSS.

Vous pouvez donc définir la taille d'une cellule ou la taille de.... »