1. Définition
1.1. HTML HyperText Markup Language ------------------ Langage de balisage conçu pour structurer une page web de manière sémantique et logique. le balisage permet de mettre en forme du contenu, d’inclure des outils (boutons, tableaux, formulaires, etc…) et différencier les éléments (text, image, audio, etc..). Ce balisage est représenté par les <>. exemple : <p>text</p> Cependant l’usage du HTML seul n’est pas suffisant. Une page HTML nécessite de faire appel au moins au CSS.
2. Les balises les plus courantes
2.1. Id et Class
2.1.1. Un Id s’applique a un objet unique, il ne peut y avoir deux meme id dans une page . Une class peut caractériser plusieur objets, il peut etre appeler plusieur fois.
2.2. Les liens <a>
2.2.1. Pour faire un lien, la balise que nous allons utiliser est très simple à retenir :<a>. Il faut cependant lui ajouter un attribut,href, pour indiquer vers quelle page le lien doit conduire.
2.3. H1-H6
2.3.1. On a six niveaux de titres différents. • <h1> </h1>: signifie « titre très important ». En général, on s'en sert pour afficher le titre de la page au début de celle-ci. • <h2> </h2>: signifie « titre important ». • <h3> </h3>: pareil, c'est un titre un peu moins important (on peut dire un « sous-titre » si vous voulez). • <h4> </h4>: titre encore moins important. • <h5> </h5>: titre pas important. • <h6> </h6>: titre vraiment, mais alors là vraiment pas important du tout.
2.4. Section
2.4.1. L'élément HTML <section> représente une section générique d'un document, par exemple un groupe de contenu thématique. Une section commence généralement avec un titre.
2.5. <audio> et <video>
2.5.1. Plus d'info
2.6. Type block et inline
2.6.1. Au contraire des éléments de type block, les éléments de type inline ne vont pas commencer sur une nouvelle ligne mais s’insérer dans la ligne actuelle. Les élément de type inline prennent uniquement la largeur qui leur est nécessaire (c’est-à-dire la largeur de leur contenu). Par exemple, l’élément HTML strong est un élément de type inline. Un élément de type block va toujours commencer sur une nouvelle ligne et prendre toute la largeur disponible dans la page. De plus, un élément de type block peut contenir d’autres éléments de type block ainsi que des éléments de type inline. Exemple : <div> <p> etc … La balise <div> C’est un conteneur qui est utilisé quand aucune autre balise n’est appropriée .Habituellement associé a une classe ou une id Les types d'éléments HTML block et inline
2.7. Les attributs
2.7.1. Un élément peut contenir des attributs. Les attributs se placent dans la balise ouvrante d’un élément et possèdent toujours une valeur (parfois implicite) . Exemple : pour la balise <img> l’attribut « src » est obligatoire pour insésrer une image.
3. Boîte à outils
3.1. VALIDATEUR Le validateur de code permet de corriger les erreurs que l’on a pu écrire.
3.1.1. The W3C Markup Validation Service
3.1.2. La console
3.1.2.1. La plupart des navigateurs vous permettent de lire le code HTML de la page que vous consultez.
3.2. EDITEUR DE TEXTE Ce sont des logiciels qui permettent de faciliter l’écriture du code en permettant à l'utilisateur de pouvoir ajouter des plugins et de les configurer afin d’être plus productif.
3.2.1. En ligne
3.2.1.1. CodePen
3.2.1.2. JS Bin
3.2.2. En local
3.2.2.1. Sublime Text - A sophisticated text editor for code, markup and prosePlayPause
3.2.2.2. A hackable text editor for the 21st Century
3.2.2.3. Visual Studio Code - Code Editing. Redefined
3.2.2.3.1. Raccourcis Windows https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
3.2.2.3.2. Raccourcis Linux https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf
3.2.2.3.3. Raccourcis Mac https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
3.2.2.4. A modern, open source code editor that understands web design
3.2.2.5. PLUGINS POUR VOS EDITEURS - 15 Essential Plugins for Visual Studio Code https://www.shopify.com/partners/blog/best-visual-studio-code-extensions-2017 https://dev.to/fbnlsr/10-essential-extensions-for-vscode-174i
3.3. LES RACCOURCIS clavier
3.3.1. Pour Mac
3.3.2. Pour linux/windows
3.3.2.1. Ctrl(+)+ , Ctrl(+)- ou Ctrl+roulette de la souris = un zoom avant (+) ou arrière (-) sur la page.
3.3.2.2. Ctrl+F4 Ferme le document actif dans une application.
3.3.2.3. Ctrl+C, Ctrl+X, Ctrl+V Ctrl+C est utilisé pour copier, Ctrl+X pour couper et Ctrl+V pour coller un élément sélectionné.
3.3.2.4. Ctrl+Z et Ctrl+Y Ctrl+Z va annuler la dernière action qui a été effectuée et Ctrl+Y va la reproduire.
3.3.2.5. Ctrl+K Permet d’ajouter rapidement un lien (par exemple vers une page web) au texte sélectionné.
3.3.2.6. Ctrl+F ouvre la barre de recherche de n’importe quel programme/application.
3.3.2.6.1. .C’est très utile, par exemple, si tu veux chercher une information précise dans un long texte. En utilisant ce raccourci, tu peux entrer un mot clef et le rechercher rapidement dans la page ou le document.
3.3.2.7. Ctrl+A permet de sélectionner tous les éléments d’un fichier ou d’un dossier.
3.3.2.8. F2 Cette touche permet de renommer rapidement le fichier/dossier sélectionné.
3.3.2.9. F5 permet d'actualiser la page de travail ou de navigation ouverte.
3.3.2.10. Alt+F4 ferme la fenêtre ou l’application en cours.
3.3.2.11. Alt+Enter affiche les propriétés du fichier/dossier sélectionné.
3.3.2.12. Ctrl+O permet d’ouvrir un fichier dans le programme en cours.
4. Bonnes pratiques
4.1. Squelette du HTML
4.1.1. doctype
4.1.2. html
4.1.3. head: contient : meta link title script
4.1.4. body
4.1.5. main
4.1.6. footer
4.2. Comment coder proprement ?
4.3. Syntaxe
4.3.1. Pour avoir un site qui fonctionne et qui représente bien ce que le développeur souhaite réaliser, il est important de respecter les règles et de veiller à la bonne syntaxe de son langage HTML. Une seule faute de syntaxe peut engendrer des problèmes.
4.4. Indentation
4.4.1. Pour que le document soit lisible et clairs , on utilise l’indentation et les commentaires.
5. Le référencement
5.1. Le référencement est l’ensemble des techniques visant à améliorer la visibilité/ position du site internet
5.1.1. SEO ( referencement naturel ) : Search Engine Optimization Technique qui permettent d’améliorer la position d’un site web sur les moteurs de recherche
5.1.1.1. COMMENT FAIRE
5.1.1.1.1. ACCESIBILITE : L'accessibilité est la mise à disposition de vos sites web au plus grand nombre ( handicap, accès via mobile, connexion internet à faible débit)
5.1.1.1.2. DANS LE HEAD
5.1.1.1.3. DANS LE BODY
5.1.1.1.4. DANS LES LINKS
5.1.2. SEA ( Référencement payant ): Search Engine Advertising
5.1.3. SEM ( combinaison du référencement naturel et payant ): Search Engine Marketing Combinaison de SEO + SEA = SEM 2019 - SEO Définition : Comment progresser en 2019 ? - SEO.fr