5 étapes pour comprendre le code HTML de base
Publicité
Le HTML est une partie vitale du Web tel que nous le connaissons. Et bien que peu de concepteurs de sites Web créent des pages en saisissant manuellement le code HTML, il est toujours utile d’en savoir un peu plus à ce sujet.
Nous allons examiner quelques notions de base du langage, notamment le langage HTML, certains concepts de base et son interaction avec d'autres langages. Considérez cela comme un cours intensif «HTML pour les nuls».
Bases HTML: Qu'est-ce que HTML?
HTML signifie Hypertext Markup Language . Et bien que les langages de programmation soient parfois assimilés à des langages de programmation, ce n'est pas exact.
En tant que langage de balisage, HTML vous permet uniquement de créer la disposition d'affichage des pages. Un vrai langage de programmation, tel que Java ou C ++, contient une logique et des commandes exécutées.
Bien que ce soit simple, le HTML est l’élément central de toutes les pages du Web. Il est responsable du texte en gras, de l'ajout d'images et du lien vers d'autres pages. Nous avons une FAQ HTML La FAQ Essential HTML que vous devriez mettre en signet La FAQ Essential HTML que vous devriez mettre en signet HTML existe depuis un moment, il est donc temps que vous en appreniez les bases. Voici ce que c'est, comment ça marche et comment vous pouvez écrire des éléments communs en HTML aujourd'hui! Lire plus qui explique plus.
Vous pouvez cliquer avec le bouton droit sur la plupart des pages Web de votre navigateur et choisir Afficher la source de la page ou similaire pour voir le code HTML derrière elles. Cela contiendra probablement aussi beaucoup de code qui n'est pas HTML, mais vous pouvez passer au crible.
Même si vous n'avez aucune expérience des langages de balisage ou de programmation, vous en apprendrez un peu plus sur le langage HTML vous permettra de mieux connaître le Web. Parcourons les cinq étapes de base pour vous aider à comprendre le fonctionnement du HTML. Nous fournirons des exemples en cours de route.
Étape 1: Comprendre le concept des étiquettes
HTML utilise un système de balises pour classer différents éléments du document.
La plupart des balises viennent par paires pour englober le texte affecté. Voici un exemple simple (la balise met le texte en gras ; nous en discuterons plus dans un instant.)
This is some bold text . Notez que la balise de fermeture commence par une barre oblique (/). Cela signifie une balise de fermeture, ce qui est important. Si vous ne fermez pas une balise, tout depuis le début aura cet attribut.
Cependant, toutes les étiquettes n'ont pas une paire. Certains éléments HTML, appelés éléments vides, n'ont pas de contenu et existent par eux-mêmes. Un exemple est le
Étape 2: La mise en page HTML squelette
Certaines balises doivent être définies dans un document HTML approprié pour être correctement présentées. Ce sont les parties essentielles:
- Chaque document HTML doit commencer par
se déclarer comme tel. Ainsi, sa balise de fermeture,, est le dernier élément d'un fichier HTML. - Ensuite, le
Cette section contient des informations telles que le titre de la page, divers scripts s’exécutant sur la page, etc. Comme son nom l’indique, cela intervient généralement juste après la premièreétiquette. L'utilisateur final ne voit pas beaucoup de contenu dans ces balises. - Finalement, le
balise contient le texte de la page que le lecteur voit (plus beaucoup plus). Vous trouverez ici des images, des liens et plus encore.
Depuis le Cette section constitue l'essentiel d'un document HTML. Le reste de notre procédure pas à pas examine les éléments qui le concernent.
Étape 3: balises HTML de base pour le formatage
Ensuite, examinons quelques balises courantes constituant les documents HTML. Bien sûr, il n’est pas possible de couvrir tous les éléments, nous allons donc passer en revue certains des plus importants. Nous avons couvert de nombreux autres exemples HTML. 17 Exemples de codes HTML simples, que vous pouvez apprendre en 10 minutes 17 Exemples de codes HTML, que vous pouvez apprendre en 10 Minutes Vous voulez créer une page Web de base? Apprenez ces exemples HTML et essayez-les dans un éditeur de texte pour voir à quoi ils ressemblent dans votre navigateur. Lisez plus si cela ne vous satisfait pas.
Si ces balises semblent assez basiques, rappelez-vous que le HTML a été créé complètement en 1993. Le Web était à l’origine très textuel.
Formatage de texte simple
HTML prend en charge les styles de texte de base comme dans Microsoft Word:
- les balises rendent le texte en gras .
- les balises (qui signifie «accent») met le texte en italique .
HTML prend également en charge les balises plus anciennes en gras et en italique. Cependant, il est préférable d’utiliser celles ci-dessus.
En bref, montrez comment comprendre quelque chose, alors que les dernières balises vous indiquent uniquement à quoi cela devrait ressembler. Ces anciennes balises sont plus accessibles aux lecteurs d'écran utilisés par les malvoyants.
Paragraphe et autres divisions
HTML balise vous permet de définir une section du document. Généralement, cela est associé à CSS (voir ci-dessous) pour formater une section d’une certaine manière.
le
balise vous permet de diviser le texte en paragraphes. Les navigateurs insèrent automatiquement de l'espace avant et après, vous permettant de séparer le texte naturellement.
Vous pouvez ajouter des en-têtes à votre document et le rendre plus facile à suivre à l'aide du bouton
par Mots clés. H1 est l'en-tête le plus important, tandis que H6 est le moins important. Presque tous les articles MakeUseOf utilisent les en-têtes H2 et H3 pour organiser les informations.
Appuyer sur Entrée pour ajouter des sauts de ligne dans votre document HTML ne les affichera pas. Au lieu de cela, vous pouvez utiliser
Voici un exemple qui utilise tous ces éléments:
Exemple de titre
Ceci est un paragraphe.
C'est une seconde
paragraphe divisé en deux lignes.
Étape 4: Insérer des images
Les images sont une partie essentielle de la plupart des pages Web. Vous pouvez les ajouter facilement avec HTML et même leur définir différentes propriétés.
Vous insérez une image en utilisant le src vous permet de spécifier l'emplacement de chargement de l'image.
Un autre attribut important de alt . Le texte alternatif vous permet de décrire l'image pour les lecteurs d'écran ou au cas où l'image ne se chargerait pas correctement. Vous pouvez passer la souris sur une image pour voir son texte alternatif.
Utilisez les éléments width et height pour spécifier le nombre de pixels de l'image.
Rassemblez tout cela, et une balise d'image ressemblera à ceci:
Étape 5: Ajout de liens
Le World Wide Web ne serait pas vraiment un site Web sans liens vers d'autres pages. En utilisant le balise, vous pouvez créer un lien vers d'autres pages sur n'importe quel texte.
À l'intérieur de balise, l'attribut href indique à quel endroit vous liez. Il vous suffit de coller l'URL. Vous pouvez utiliser l'élément title pour ajouter un morceau de texte qui apparaît lorsque quelqu'un survole le lien.
Un lien de base ressemble à ceci:
Visit Google le La balise a beaucoup d’autres éléments possibles, mais nous n’y plongerons pas ici.
Comment HTML se connecte avec CSS et JavaScript
Nous avons examiné les bases du HTML et la manière dont il crée une page Web. Mais comme vous pouvez l’imaginer, HTML seul ne suffit pas pour le Web moderne. Les pages Web HTML simples étaient courantes au cours des journées «Web 1.0», lorsque la plupart des sites Web n'étaient rien d'autre que du texte statique.
Mais maintenant, nous en avons beaucoup plus. CSS (feuilles de style en cascade) Cheat Sheet des propriétés essentielles de CSS3 Cheatheet des propriétés essentielles de CSS3 Maîtrisez la syntaxe CSS essentielle avec notre aide-mémoire des propriétés CSS3. Read More est un langage utilisé pour décrire l'aspect du texte que vous avez préparé en HTML. Se souvenir du tag nous avons discuté? À l'intérieur de cette balise (et d'autres), vous pouvez définir un attribut de class . Ensuite, dans votre document CSS d'accompagnement, vous pouvez écrire des instructions indiquant à quoi cette class devrait ressembler.
Vous pouvez définir ces éléments de style en ligne dans votre code HTML, mais ceci est considéré comme une mauvaise pratique car il est beaucoup plus difficile à maintenir. Apprenez-en plus avec ces exemples CSS simples. 10 exemples de code CSS simples à apprendre en 10 minutes. 10 exemples de code CSS simples à apprendre. En 10 minutes. Nous verrons comment créer une feuille de style intégrée pour que vous puissiez exercer vos compétences en CSS. Nous passerons ensuite à 10 exemples CSS de base. A partir de là, votre imagination est la limite! Lire la suite .
JavaScript
Nous avons vu que HTML définit le contenu et que CSS détermine l'apparence. JavaScript, dernier membre du trio essentiel pour le Web, permet aux pages Web de réagir aux actions des utilisateurs sans charger une nouvelle page à chaque fois.
Par exemple, JavaScript permet à un site Web de vous avertir que le mot de passe que vous avez entré ne répond pas à ses exigences avant que vous essayiez de le soumettre. Un concepteur de sites Web peut utiliser JavaScript pour parcourir les images d’un diaporama ou inviter l’utilisateur à le saisir.
Ce ne sont que quelques exemples élémentaires. JavaScript est un langage de script capable de faire beaucoup de choses et est comparativement beaucoup plus compliqué que HTML et CSS. Voir notre aperçu de JavaScript Qu'est-ce que JavaScript et comment ça marche? Qu'est-ce que JavaScript et comment ça marche? Qu'est ce que le Javascript? C'est un langage de programmation utilisé pour améliorer les pages Web. Il comprend la mise à jour dynamique de pages Web, d'interfaces utilisateur, etc. Nous allons plonger dans ce que Javascript est tout au sujet. Lisez plus pour beaucoup plus.
L'examen complet de la conception Web dépasse le cadre de cet article, mais il suffit de dire que le HTML interagit avec d'autres langues pour créer les pages Web que nous connaissons aujourd'hui.
L'évolution du HTML
Il est important de noter que HTML n'est pas statique. HTML a fait l'objet de plusieurs révisions, la plus récente étant HTML 5. Il convient de noter que cette norme prend en charge l'intégration vidéo native au lieu de s'appuyer sur des formats propriétaires tels qu'Adobe Flash.
De nouvelles itérations de HTML déclarent également certaines balises archaïques comme obsolètes de temps en temps. Ceux-ci incluent des balises terribles comme et (défilement et texte flash respectivement) fréquemment observés dans la conception de sites Web des années 1990. Alors gardez à l'esprit que les normes changent avec le temps.
Un peu de connaissances HTML va un long chemin
Nous avons brièvement décrit le fonctionnement d’un document HTML. Vous connaissez maintenant les bases de la structure des pages Web. Même si vous ne construisez pas de pages Web, vous êtes un peu plus au courant du Web que vous utilisez tous les jours.
Pour en savoir plus, mettez à niveau vos compétences en développement Web avec des outils essentiels. Mettez à niveau vos compétences en développement Web avec ces 10 outils essentiels. Mettez à niveau vos compétences en développement Web avec ces 10 outils essentiels. Prêt à commencer à développer des sites Web? Ces outils en ligne pour les développeurs Web débutants et experts sont assurés de booster vos compétences! Lisez plus puis consultez notre guide sur la conception de votre premier site Web. Comment créer un site Web: pour les débutants Comment créer un site Web: pour les débutants aujourd'hui, je vous guiderai tout au long du processus de création d'un site Web complet. Ne vous inquiétez pas si cela semble difficile. Je vous guiderai à chaque étape. Lire la suite .
Crédit d'image: Belyaevskiy / Depositphotos
En savoir plus sur: HTML, HTML5, JavaScript, programmation, développement Web, outils pour les webmasters.
