FRFAM.COM >> Famille >> Technologie &Innovation >> Informatique

5 étapes pour comprendre le code HTML de base

HTML est une partie essentielle du Web tel que nous le connaissons. Et bien que peu de concepteurs Web créent des pages en tapant manuellement du code HTML, il est toujours utile d'en savoir un peu plus à ce sujet.

Nous allons examiner certaines bases du langage, y compris ce qu'est vraiment HTML, certains concepts fondamentaux et comment il interagit avec d'autres langages. Considérez cela comme un cours intensif "HTML pour les nuls".

Principes de base du HTML :Qu'est-ce que le HTML ?

HTML signifie langage de balisage hypertexte . Et bien qu'il soit parfois regroupé avec les langages de programmation, ce n'est pas exact.

En tant que langage de balisage , HTML vous permet uniquement de créer la mise en page d'affichage des pages. Un vrai langage de programmation , comme Java ou C++, contient la logique et les commandes qui sont exécutées.

Bien qu'il soit simple, le HTML est à la base de chaque page sur le Web. Il est responsable du texte affiché en gras, de l'ajout d'images et des liens vers d'autres pages. Nous avons une FAQ HTML 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 HTML derrière eux. Cela contiendra probablement aussi beaucoup de code qui n'est pas du HTML, mais vous pouvez le parcourir.

5 étapes pour comprendre le code HTML de base

Même si vous n'avez aucune expérience avec le balisage ou les langages de programmation, en apprendre un peu sur le HTML fera de vous un utilisateur Web plus informé. Passons en revue 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 balises

HTML utilise un système de balises pour catégoriser les différents éléments du document.

La plupart des balises sont fournies par paires pour envelopper le texte affecté à l'intérieur. Voici un exemple simple (le

la balise met le texte en gras; nous en discuterons plus en détail dans un instant.)

Ceci est du texte en gras.

Remarquez comment la balise de fermeture commence par une barre oblique (/). Cela signifie une balise fermante, ce qui est important. Si vous ne fermez pas une balise, tout à partir du début aura cet attribut.

Cependant, toutes les balises 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

tag, qui est un saut de ligne. Vous pouvez "fermer" ces balises en ajoutant une barre oblique (telle que

) mais ce n'est pas strictement nécessaire.

Étape 2 :La mise en page HTML squelette

Un document HTML approprié doit avoir certaines balises définies afin qu'il soit correctement mis en page. Voici les parties essentielles :

  • Chaque document HTML doit commencer par
    se déclarer comme tel. Ainsi, sa balise fermante,
    , est le dernier élément d'un fichier HTML.
  • Ensuite, le
    La section inclut des informations telles que le titre de la page, divers scripts qui s'exécutent sur la page, etc. Comme son nom l'indique, cela vient généralement juste après le premier
    étiqueter. L'utilisateur final ne voit pas grand-chose du contenu de ces balises.
  • Enfin, le
    tag contient le texte de la page que le lecteur voit (et bien plus encore). Vous y trouverez des images, des liens et plus encore.

Depuis le

constitue l'essentiel d'un document HTML, le reste de notre procédure pas à pas examine les éléments qui s'y rapportent.

Étape 3 :Balises HTML de base pour le formatage

Examinons ensuite certaines balises courantes qui composent 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 si ceux-ci ne vous satisfont pas.

Si ces balises semblent assez basiques, rappelez-vous que le HTML a été créé en 1993. Le Web était alors essentiellement basé sur du texte à ses débuts.

Formatage de texte simple

HTML prend en charge les styles de texte de base comme ceux que vous trouveriez dans Microsoft Word :

  •
    les balises mettent le texte en gras . 
  •
    les balises (qui signifient "emphase") seront en italique texte.

HTML prend également en charge l'ancien

balise pour gras et

pour les italiques. Cependant, il est préférable d'utiliser ceux ci-dessus.

Bref,

et

montrent comment quelque chose doit être compris, tandis que les dernières balises vous disent seulement à quoi cela doit ressembler. Ces anciennes balises sont plus accessibles pour les lecteurs d'écran utilisés par les malvoyants.

Paragraphe et autres divisions

HTML

La balise vous permet de définir une section du document. Habituellement, cela est associé à CSS (voir ci-dessous) pour formater une section d'une certaine manière.

Le

La balise vous permet de diviser le texte en paragraphes. Les navigateurs mettront automatiquement un espace avant et après ceux-ci, vous permettant de diviser naturellement le texte.

Vous pouvez ajouter des en-têtes à votre document et le rendre plus facile à suivre en utilisant le

par

Mots clés. H1 est l'en-tête le plus important, tandis que H6 est le moins important. Presque tous les articles de MakeUseOf utilisent les en-têtes H2 et H3 pour organiser les informations.

Appuyez sur Entrée ajouter des sauts de ligne dans votre document HTML ne les affichera pas réellement. Au lieu de cela, vous pouvez utiliser

pour ajouter un saut de ligne.

Voici un exemple qui utilise tout cela :

 
 
Exemple de titre
 
 

Ceci est un paragraphe.

 
 

Ceci est un deuxième
paragraphe divisé entre deux lignes.

Étape 4 :Insertion d'images

Les images sont une partie essentielle de la plupart des pages Web. Vous pouvez les ajouter facilement avec HTML, et même définir différentes propriétés pour eux.

Vous insérez une image à l'aide de

étiqueter. En combinant cela avec le 

src

L'attribut vous permet de spécifier d'où vous voulez que l'image soit chargée.

Un autre attribut important de

balises est 

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 le 

largeur

et 

hauteur

éléments pour spécifier le nombre de pixels auquel l'image apparaît.

Mettez tout cela ensemble, et une balise d'image ressemble à ceci :

5 étapes pour comprendre le code HTML de base

Le World Wide Web ne serait pas vraiment un site Web sans liens vers d'autres pages. Utilisation de

balise, vous pouvez créer un lien vers d'autres pages sur n'importe quel texte.

À l'intérieur du

balise, le 

href

L'attribut indique où vous créez un lien. Coller simplement l'URL fonctionnera bien. Vous pouvez utiliser le 

titre

élément pour ajouter un peu de texte qui apparaît lorsque quelqu'un survole le lien.

Un lien de base ressemble à ceci :

Visitez Google

Le

tag a de nombreux autres éléments possibles, mais nous ne les aborderons pas ici.

Comment HTML se connecte avec CSS et JavaScript

Nous avons examiné les bases du HTML et comment il établit 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 à l'époque du "Web 1.0", lorsque la plupart des sites Web n'étaient rien de plus que du texte statique.

5 étapes pour comprendre le code HTML de base

Mais maintenant, nous en avons beaucoup plus. CSS (Cascading Style Sheets) est un langage utilisé pour décrire à quoi devrait ressembler le texte que vous avez préparé en HTML. N'oubliez pas le

tag dont nous avons discuté ? À l'intérieur de ceci (et d'autres balises), vous pouvez définir un 

classe

attribut. Ensuite, dans votre document CSS d'accompagnement, vous pouvez écrire des instructions sur la façon dont 

classe

devrait ressembler.

Vous pouvez définir ces éléments de style en ligne dans votre code HTML, mais cela est considéré comme une mauvaise pratique car il est beaucoup plus difficile à maintenir. Apprenez-en plus avec ces exemples CSS simples. Découvrez également comment optimiser vos fichiers CSS.

JavaScript

Nous avons vu que HTML définit le contenu et CSS détermine l'apparence. JavaScript, le dernier membre du trio vital pour le Web, permet aux pages Web de répondre aux actions des utilisateurs sans avoir à 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 n'essayiez de le soumettre. Un concepteur Web peut utiliser JavaScript pour parcourir les images d'un diaporama ou inviter l'utilisateur à effectuer une saisie.

Ce ne sont là que quelques exemples élémentaires. JavaScript est un langage de script qui est capable de faire beaucoup de choses et qui est comparativement beaucoup plus compliqué que HTML et CSS. Consultez notre présentation de JavaScript pour en savoir plus.

Examiner la portée complète de la conception Web dépasse le cadre de cet article, mais il suffit de dire que HTML interagit avec d'autres langages pour créer les pages Web que nous connaissons aujourd'hui.

L'évolution du HTML

Il est important de noter que le HTML n'est pas statique. HTML a subi plusieurs révisions, la plus récente étant HTML 5. Notamment, cette norme prend en charge l'intégration vidéo native au lieu de s'appuyer sur des formats propriétaires comme 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 
 
 
 

 (qui défilent et clignotent respectivement) couramment observés dans la conception de sites Web des années 1990. Gardez donc à l'esprit que les normes changent avec le temps.
 
 Un peu de connaissance HTML va loin
 

 Nous avons fait un bref tour d'horizon du fonctionnement d'un document HTML. Vous connaissez maintenant les principes fondamentaux de la structure des pages Web. Même si vous ne construisez pas de pages Web, vous êtes un peu plus conscient du Web que vous utilisez au quotidien.
 

 Pour en savoir plus, améliorez vos compétences en développement Web avec des outils essentiels, puis consultez notre guide sur la conception de votre premier site Web.
 

 Crédit image :Belyaevskiy/Depositphotos 
 

[]
            

            


                
            


            

                        
                      
             


		




             


		  

                     
                     

                         Installation dappareils sanitaires : les 3 étapes de base
                     

                 
  

                     
                     

                         4 étapes pour nettoyer les ventilateurs de plafond
                     

                 
  

                     
                     

                         50 indicateurs pour comprendre l'économie américaine en ce moment 
                     

                 
  

                     
                     

                         10 conseils de productivité essentiels pour Visual Studio Code 
                     

                 
  

                     
                     

                         8 étapes pratiques pour lutter contre l'obsolescence programmée 
                     

                 
  

                     
                     

                         Les dernières étapes pour se lancer