: intègre du code JavaScript pour ajouter de l'interactivité à la page Web.
  •  : contient le contenu qui sera visible par les utilisateurs sur la page Web.

  • Éléments HTML couramment utilisés

    Voici quelques éléments HTML de base que vous utiliserez fréquemment :


    Création de votre premier fichier HTML

    Pour créer un fichier HTML, vous pouvez utiliser n'importe quel éditeur de texte, tel que Notepad ou VS Code. Voici un exemple simple :

    1. Ouvrez votre éditeur de texte et tapez le code suivant :
      HTML Tutorial  

    Example Number 1

    Hello, world!

    1. Enregistrez le fichier avec une extension .html (par exemple, index.html)
    2. Ouvrez le fichier dans votre navigateur Web pour voir votre première page Web HTML en action !
    3. Pour inspecter votre code, appuyez sur Ctrl Maj C dans Google Chrome pour ouvrir les outils de développement et explorer la structure DOM.
    4. Accédez à l'onglet Réseau dans les outils de développement et actualisez l'onglet de votre navigateur.

    Vous pouvez constater qu'il y a une demande dans le nom que vous avez enregistré comme sur cette image.
    \\\"Develop

    Dans l'onglet réponse, vous trouverez le code que vous avez écrit comme dans l'image suivante
    \\\"Develop

    Maintenant, ce qui s'est passé, c'est qu'une fois que vous avez ouvert le fichier que vous avez enregistré au format HTML, l'ordinateur a commencé à exécuter le fichier dans le navigateur. Le navigateur voulait que quelque chose s'affiche, il a donc lancé un appel de requête au fichier à partir duquel il a été lancé. Le fichier a donné votre code au navigateur et celui-ci a été trouvé dans la section de réponse. Puisqu'il s'agit d'un fichier HTML, le navigateur commence à lire le code HTML de haut en bas. Ce processus est connu sous le nom d’analyse. Lors de l'analyse, le navigateur rencontre différentes balises HTML (comme , , , etc.) et commence à construire une structure appelée DOM basée sur ces balises. Au fur et à mesure que le navigateur crée le DOM, il affiche simultanément le contenu sur votre écran.


    Création d'un tableau

    Allons plus loin en créant un tableau simple en HTML :

    1. Ouvrez le même fichier HTML et ajoutez le code suivant dans la balise  :

    Table Example

    Name Power Is Kurama Present
    Naruto Rasengan Yes
    Sasuke Sharingan No
    1. Enregistrez le fichier et actualisez votre navigateur pour voir le tableau affiché.

    Notez que le titre est rendu par la balise de paragraphe. Alternativement, vous pouvez également utiliser la balise , qui centrera l'en-tête du tableau. Expérimentez avec la balise de légende et actualisez pour voir les modifications.

    Notez que la balise ne doit être utilisée qu'immédiatement après la balise d'ouverture

    .

    Vous avez maintenant créé avec succès un tableau de base en HTML. N'hésitez pas à expérimenter avec des lignes et des colonnes supplémentaires pour vous familiariser davantage avec la syntaxe HTML.


    Conclusion

    Félicitations pour avoir effectué vos premiers pas dans le développement Web avec HTML ! La clé pour maîtriser le HTML est la pratique. Expérimentez avec différents éléments, créez vos propres pages Web et n'ayez pas peur de faire des erreurs : chaque erreur est une opportunité d'apprentissage.

    N'oubliez pas que ce n'est que le début. En continuant à bâtir sur cette base, vous serez bientôt en mesure de créer des sites Web plus complexes et plus dynamiques. Rendons le Web meilleur, une ligne de code à la fois.

    Cet article est rédigé par Anantha Krishnan, un professionnel possédant une expérience en informatique et en génie mécanique. Avec une expérience en développement full stack et une passion pour les systèmes mécaniques et électriques, Anantha Krishnan se concentre désormais sur la création de contenu éducatif pour aider les débutants dans les domaines de son expertise.

    ","image":"http://www.luping.net/uploads/20240820/172415124366c475cb37fe7.png","datePublished":"2024-08-20T18:54:03+08:00","dateModified":"2024-08-20T18:54:03+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
    "Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
    Page de garde > La programmation > Développez-vous pour créer des interfaces utilisateur Web : partie Comprendre le HTML

    Développez-vous pour créer des interfaces utilisateur Web : partie Comprendre le HTML

    Publié le 2024-08-20
    Parcourir:675

    Le développement Web est l'une des compétences les plus demandées aujourd'hui. Il s’agit de créer des sites Web conviviaux et attrayants accessibles via un navigateur. La première étape pour devenir développeur Web consiste à comprendre le HTML.

    Develop yourself to build Web UIs: Part  Understanding HTML

    HTML (Hyper Text Markup Language) est l'épine dorsale de toute page Web. C'est le langage standard utilisé pour structurer une page Web, déterminant la manière dont le contenu est affiché dans le navigateur. Alors que l'apparence d'une page est décidée par CSS (Feuilles de style en cascade) et sa fonctionnalité par JS (Javascript), HTML est responsable du squelette ou de la structure fondamentale.

    Avant de plonger dans cette partie du cours, il est important de comprendre les jargons célèbres et récurrents qui seront utilisés tout au long de votre parcours. Ceux-ci vous aideront à comprendre les concepts au fur et à mesure de notre progression (et permettront également à l'auteur d'expliquer facilement les choses ;-) ).


    Comprendre les jargons

    1. Langage de programmation : ensemble d'instructions écrites dans une syntaxe spécifique (à la manière d'un langage de programmation) qu'un ordinateur peut exécuter. N'oubliez pas que l'ordinateur ne comprend que le code binaire (1 ou 0). Désormais, afin de lui faire comprendre la logique et également de trouver un compromis, nous (les humains) avons créé un langage de programmation tel qu'il soit facile pour à nous de coder et aussi à l'ordinateur de le comprendre.
    2. Compilateur : outil qui traduit le code écrit dans un langage de programmation en langage machine qu'un ordinateur peut comprendre et exécuter.
    3. Syntaxe : règles qui définissent la structure d'un langage de programmation. Considérez-le comme la façon dont les mots sont disposés dans une phrase pour avoir un sens.
    4. Commentaires : notes dans le code qui expliquent ce que font certaines parties du code. Les commentaires aident les autres développeurs (ou votre futur moi) à comprendre la logique derrière votre code.
    5. DOM (Document Object Model) : Le DOM est une représentation arborescente du document HTML. Chaque balise de votre HTML devient un nœud dans cette arborescence. Par exemple, si votre code HTML contient une balise contenant un

      (paragraphe), le navigateur crée un nœud de corps avec un nœud de paragraphe comme enfant.

    6. Enfants : Vous comprendrez cela au fur et à mesure de votre progression. Éléments imbriqués dans un autre élément. Par exemple, en HTML, une balise de paragraphe (

      ) dans une balise div (

      ) serait considérée comme un enfant du div.
    7. Élément de niveau bloc : vous découvrirez ce jargon au fur et à mesure de votre progression. Ce terme décrit généralement la caractéristique de l'élément selon laquelle il occupera toute la largeur disponible.

    8. Se lancer avec HTML

      HTML signifie Hyper Text Markup Language

      • Hyper Texte : fait référence à la capacité du HTML à relier différents documents entre eux.

      • Langage de balisage : utilise des balises pour annoter le texte, définissant ainsi la manière dont il doit être affiché dans un navigateur.

      Voici la structure de base d'un document HTML :

      
        
          HTML Tutorial

      Hello, world!

      • Balises : En HTML, les balises sont utilisées pour définir des éléments. Les balises sont placées entre crochets, comme ou

        .

      • Éléments : se composent d'une balise d'ouverture et d'une balise de fermeture, qui peuvent contenir du contenu. Par exemple,

        Bonjour tout le monde !

        est un élément de paragraphe.

      Structure des documents HTML

      Chaque document HTML suit une structure de base :

      1.  : Déclare le type de document et la version HTML.
      2.  : l'élément racine qui englobe tous les autres éléments HTML.
      3.  : contient des méta-informations sur le document, telles que le titre et les liens vers les feuilles de style.
      4.  : définit le titre de la page Web, affiché dans la barre de titre ou l'onglet du navigateur.
      5.  : fournit des métadonnées sur le document HTML, telles que les paramètres du jeu de caractères, de l'auteur et de la fenêtre d'affichage. C'est une balise à fermeture automatique.
      6.  : intègre le code CSS pour styliser les éléments HTML.
      7.  : intègre du code JavaScript pour ajouter de l'interactivité à la page Web.
      8.  : contient le contenu qui sera visible par les utilisateurs sur la page Web.

      Éléments HTML couramment utilisés

      Voici quelques éléments HTML de base que vous utiliserez fréquemment :

      •  : définit un paragraphe.
      •  : élément de niveau bloc utilisé pour regrouper d'autres éléments.
      •  : élément en ligne utilisé pour regrouper le texte à des fins de style.
      •  : représente le contenu d'introduction ou les liens de navigation d'une section.
      • à
         : titres,

        étant le niveau le plus élevé et

        le niveau le plus bas.

      •  : insère un saut de ligne (balise à fermeture automatique — ce qui signifie qu'il n'est pas nécessaire de fermer la balise).
      •  : utilisé pour créer un formulaire HTML pour la saisie de l'utilisateur.
      •  : crée un champ de saisie, généralement utilisé dans un formulaire.
      •  : Crée une liste déroulante.
      •  : associe une étiquette de texte à un élément de formulaire.
     : définit une table.
  •  : Définit une ligne dans un tableau.
  •  : définit une cellule dans une ligne de tableau.
  •  : définit une cellule d'en-tête dans une ligne de tableau.
  •  : définit une liste non ordonnée (à puces).
    1.  : définit une liste ordonnée (numérotée).
    2.  : définit un élément de liste.

      Création de votre premier fichier HTML

      Pour créer un fichier HTML, vous pouvez utiliser n'importe quel éditeur de texte, tel que Notepad ou VS Code. Voici un exemple simple :

      1. Ouvrez votre éditeur de texte et tapez le code suivant :
      
      
        HTML Tutorial

      Example Number 1

      Hello, world!

      1. Enregistrez le fichier avec une extension .html (par exemple, index.html)
      2. Ouvrez le fichier dans votre navigateur Web pour voir votre première page Web HTML en action !
      3. Pour inspecter votre code, appuyez sur Ctrl Maj C dans Google Chrome pour ouvrir les outils de développement et explorer la structure DOM.
      4. Accédez à l'onglet Réseau dans les outils de développement et actualisez l'onglet de votre navigateur.

      Vous pouvez constater qu'il y a une demande dans le nom que vous avez enregistré comme sur cette image.
      Develop yourself to build Web UIs: Part  Understanding HTML

      Dans l'onglet réponse, vous trouverez le code que vous avez écrit comme dans l'image suivante
      Develop yourself to build Web UIs: Part  Understanding HTML

      Maintenant, ce qui s'est passé, c'est qu'une fois que vous avez ouvert le fichier que vous avez enregistré au format HTML, l'ordinateur a commencé à exécuter le fichier dans le navigateur. Le navigateur voulait que quelque chose s'affiche, il a donc lancé un appel de requête au fichier à partir duquel il a été lancé. Le fichier a donné votre code au navigateur et celui-ci a été trouvé dans la section de réponse. Puisqu'il s'agit d'un fichier HTML, le navigateur commence à lire le code HTML de haut en bas. Ce processus est connu sous le nom d’analyse. Lors de l'analyse, le navigateur rencontre différentes balises HTML (comme ,

      , , etc.) et commence à construire une structure appelée DOM basée sur ces balises. Au fur et à mesure que le navigateur crée le DOM, il affiche simultanément le contenu sur votre écran.

      Création d'un tableau

      Allons plus loin en créant un tableau simple en HTML :

      1. Ouvrez le même fichier HTML et ajoutez le code suivant dans la balise  :

      Table Example

      Name Power Is Kurama Present
      Naruto Rasengan Yes
      Sasuke Sharingan No
      1. Enregistrez le fichier et actualisez votre navigateur pour voir le tableau affiché.

      Notez que le titre est rendu par la balise de paragraphe. Alternativement, vous pouvez également utiliser la balise

      , qui centrera l'en-tête du tableau. Expérimentez avec la balise de légende et actualisez pour voir les modifications.

      Notez que la balise

      ne doit être utilisée qu'immédiatement après la balise d'ouverture .

      Vous avez maintenant créé avec succès un tableau de base en HTML. N'hésitez pas à expérimenter avec des lignes et des colonnes supplémentaires pour vous familiariser davantage avec la syntaxe HTML.


      Conclusion

      Félicitations pour avoir effectué vos premiers pas dans le développement Web avec HTML ! La clé pour maîtriser le HTML est la pratique. Expérimentez avec différents éléments, créez vos propres pages Web et n'ayez pas peur de faire des erreurs : chaque erreur est une opportunité d'apprentissage.

      N'oubliez pas que ce n'est que le début. En continuant à bâtir sur cette base, vous serez bientôt en mesure de créer des sites Web plus complexes et plus dynamiques. Rendons le Web meilleur, une ligne de code à la fois.

      Cet article est rédigé par Anantha Krishnan, un professionnel possédant une expérience en informatique et en génie mécanique. Avec une expérience en développement full stack et une passion pour les systèmes mécaniques et électriques, Anantha Krishnan se concentre désormais sur la création de contenu éducatif pour aider les débutants dans les domaines de son expertise.

    3. Déclaration de sortie Cet article est reproduit sur : https://dev.to/marina_labs/develop-yourself-to-build-web-uis-part-1-understanding-html-4of9?1 En cas de violation, veuillez contacter study_golang@163 .com pour le supprimer
      Dernier tutoriel Plus>

      Étudier le chinois

      Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.

      Copyright© 2022 湘ICP备2022001581号-3