Lorsque vous accédez à des sites d'actualités, des réseaux sociaux, des systèmes bancaires, entre autres, nous avons plusieurs éléments disponibles à l'écran qui permettent l'interaction de l'utilisateur.
Mais avez-vous déjà réfléchi à la façon dont tout cela a été construit ?
L'un des professionnels responsables de la création d'un site Web est le développeur front-end, qui transforme une mise en page réalisée par l'équipe de conception UX/UI en code à l'aide de figma.
Techniquement, la création d'un site Web se fait à l'aide de plusieurs technologies, dont l'une est HTML.
Dans cet article, vous apprendrez ce qu'est le HTML, à quoi il sert et comment il peut être utilisé.
Comme il s'agit d'une technologie utilisée pour développer des sites Web, il est courant de penser que l'on programme en HTML. Une remarque importante est que HTML n'est pas un langage de programmation, mais un langage de balisage.
Les langages de programmation sont utilisés pour créer des algorithmes, manipuler des variables et des structures de données. HTML, acronyme anglais de Hypertext Markup Language, structure et formate le contenu des pages Web.
Pour pouvoir construire un projet avec cette technologie, vous avez besoin d'un fichier au format « .html », afin de pouvoir l'ouvrir dans un navigateur, qui interprétera le code source pour afficher les éléments à l'écran.
L'anatomie d'un fichier HTML peut être interprétée comme un arbre.
Nous avons la racine, qui est l'élément, et à partir de là nous pouvons déclarer de nouveaux éléments (qui sont comme des branches) qui peuvent être interprétés comme des enfants et par conséquent, il est également possible de créer des éléments parents. De plus, les éléments qui partagent la même ligne d'origine peuvent être appelés frères et sœurs.
L'anatomie d'un élément HTML est construite en ouvrant la balise entourée de crochets angulaires.
Par exemple, la balise paragraphe
est suivi du contenu qui sera affiché et enfin, il est fermé par une balise qui est la même que la balise d'ouverture, mais avec une barre oblique avant le nom de l'élément :
.Le résultat final est le suivant :
Ex.
O nome do meu cão é Retovem.
Avec HTML nous pouvons créer divers éléments pour construire une page web avec le thème de votre choix : Blogs, boutiques en ligne, pages d'actualités, etc.
Certains des principaux éléments que nous pouvons créer sont :
Ce langage de balisage nous offre un large éventail de ressources, dont seulement quelques-unes ont été évoquées, qui peuvent être utilisées selon les besoins du projet.
Tim Berners-Lee a développé HTML au CERN (Organisation européenne pour la recherche nucléaire) en utilisant l'environnement de développement NeXTSTEP. A l'origine, il s'agissait d'un ensemble d'outils permettant de gérer les recherches et la communication entre eux.
Avec l'évolution d'Internet, la solution a attiré l'attention du monde entier. Les premières versions étaient flexibles, ce qui aidait les débutants dans le domaine.
Au fil du temps, la structure est devenue plus rigide, mais à ce jour, les navigateurs peuvent interpréter les pages Web créées à l'ancienne grâce à la rétrocompatibilité.
Les spécifications ont été définies dans les années 1990. Puis l'évolution du HTML a commencé, avec la création d'un groupe de travail HTML qui, en 1995, a publié la version HTML 2.0.
Fin 1997, la version HTML 3.5 est sortie et avec elle, le groupe de travail du W3C a commencé à se concentrer sur le développement de XHTML en 2000, et nous sommes finalement arrivés en 2014, lorsque le HTML est sorti, qui est utilisé jusqu'à aujourd'hui.
Nous avons vu que plusieurs versions de HTML ont été publiées jusqu'à atteindre celle que nous utilisons aujourd'hui, mais quelle est la différence entre HTML et HTML5 ?
Dans les anciennes versions, la structuration du contenu se faisait principalement à l'aide d'éléments génériques, tels que
et .En HTML5, nous avons des balises sémantiques qui font référence au but de l'élément avec l'en-tête, le pied de page, les sections de séparation, entre autres.
De plus, aujourd'hui avec HTML5 nous avons un support natif pour l'audio, nous pouvons les intégrer directement sur la page.
Les formulaires peuvent également couvrir plus de types de champs dans la version : nous disposons désormais de champs d'e-mail, de numéro, de date et de spécification qui génèrent des validations natives sur les éléments.
Cependant, il est important de savoir que HTML est une version statique. Il est encore en cours de développement et d'amélioration aujourd'hui, avec des fonctionnalités et des fonctionnalités ajoutées de temps en temps.
Tanto o XML (Extensible Markup Language) quanto o HTML são linguagens de marcação utilizadas na web, mas apesar disso, possuem propósitos e estrutura diferentes.
O XML é projetado para representar informações hierárquicas e legíveis para humanos e máquinas. Não se preocupa com a apresentação visual e não possui estrutura pré-definida. Em vez disso, descreve a estrutura dos dados de forma consistente e portátil.
No Brasil, é o formato mais utilizado na emissão de notas fiscais.
O HTML, é usado para criar e exibir conteúdo em páginas web, é limitado devido à sua estrutura e elementos pré-definidos, focando na apresentação visual e exibição dos elementos no navegador. Ele é comumente utilizado na construção de sites.
Podemos considerar que as principais diferenças são: enquanto o XML é usado para armazenar e transportar dados, o HTML é utilizado para criar páginas web com conteúdo formatado e que possibilita a interação.
Como falamos anteriormente, o HTML é utilizado para estruturar e formatar o conteúdo de páginas web através de tags, que são interpretadas pelo navegador.
Para que seja possível essa interpretação, é importante declarar qual a versão do HTML será usada.
Essa declaração é feita através do, garantindo que o navegador interprete corretamente o código.
É importante observar que isso não é uma tag HTML, e sim uma instrução para o navegador que deve ser colocada no início do documento sem espaços entre ela.
A representação estruturada do conteúdo HTML de uma página web é feita através doDOM(Document Object Modal), que é uma interface de programação que permite o acesso e manipulação dos elementos.
É o DOM que faz a estruturação em forma de árvore dos elementos, em que cada um deles é representado por um nó organizado hierarquicamente de acordo com a estrutura do documento.
Podemos analisar um exemplo de código em HTML para a exibição de uma frase na tela:
Aprendendo HTML
Olá, mundo!
Este é o meu primeiro projeto HTML
A estrutura do DOM seria a seguinte:
: Constrói um parágrafo de texto de acordo com o conteúdo inserido dentro dele. Também está dentro do body, portanto é filho dele e irmão do
Assim, podemos visualizar que o DOM é uma representação em forma de árvore do conteúdo inserido no HTML e que, ao criar um nó para cada elemento, permite que eles sejam acessados por meio do JavaScript.
O HTML semântico é uma abordagem no desenvolvimento web que enfatiza o uso correto e significativo dos elementos, escolhendo aqueles que melhor descrevem o conteúdo que está sendo apresentado.
Em vez de usar uma
genérico para todo o conteúdo, podemos usar elementos mais específicos, como , , , , , , entre outros, de acordo com a estrutura e a natureza do conteúdo. isso é utilizado para melhorar o SEO ( Search Engine Optimization).Uma das principais características dessas abordagem é a importância dos cabeçalhos, que são representados pelos elementos
Os sites de pesquisas dão importância aos cabeçalhos, por isso é um ponto de foco.
O texto alternativo em imagens é crucial tanto para a acessibilidade quanto para o SEO. Tendo o cuidado de inserir o atributo “alt” nas tags de imagem, fornecendo um texto descritivo, isso permite que leitores de tela leiam o texto e que sites de pesquisas considerem esse texto ao classificar as páginas.
Toujours sur les textes dans le cadre de la sémantique, il est important d'utiliser des liens descriptifs plutôt que génériques. Par exemple, au lieu de créer un lien « cliquez ici », écrivez un texte qui indique clairement la destination de ce lien.
En appliquant ces pratiques, vous créez des pages conviviales pour les moteurs de recherche, comme Google, et accessibles à tous les utilisateurs. cela donne :
Les développeurs front-end utilisent diverses technologies lors du développement d'un site Web, mais qu'il s'agisse de frameworks ou de bibliothèques, la base est toujours la même : HTML, CSS et JavaScript.
HTML, comme nous l'avons vu dans cet article, est un langage de balisage utilisé pour structurer et organiser le contenu d'une page. mais avec HTML seul, il n'est pas possible de styliser des éléments ou de créer des interactions complexes.
C'est comme la structure d'un bâtiment, fournissant des murs, des portes et des fenêtres. Mais quelle est la différence entre le langage HTML et le langage CSS ?
Différent du HTML, CSS (Cascading Style Sheets) est un langage de style qui définit l'apparence et la disposition des éléments HTML sur une page Web.
Grâce à lui, nous pouvons placer des couleurs, des polices, des marges, des tailles, un positionnement et d'autres attributs sur les éléments.
C'est comme peindre, décorer et aménager l'intérieur d'un bâtiment, le rendre esthétiquement attrayant et agréable.
Bien que le HTML soit généralement utilisé dans le domaine du développement web, il est également possible de l'utiliser dans d'autres domaines de la programmation, tels que :
Il est important de noter que le HTML est souvent combiné avec d'autres technologies, telles que CSS et JavaScript, pour créer ces expériences et d'autres encore.
Dans cet article, vous avez découvert le HTML, son histoire, son fonctionnement et comment l'utiliser à travers des balises et des éléments. En plus de savoir où le HTML peut être appliqué et la relation entre HTML, CSS et JavaScript.
HTML est un langage de balisage, pas un langage de programmation. Il est utilisé pour créer des éléments et structurer des pages Web. Il s'agit d'une technologie utilisée par les développeurs front-end, généralement en conjonction avec CSS et JavaScript.
Si vous avez aimé ce contenu, laissez votre avis dans les commentaires, partagez-le pour que davantage de personnes puissent le voir et l'aimer aussi.
À plus tard !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
commande de recherche de fichier Linux
Apprenez le C# à partir de zéro
La différence entre les fonctions fléchées et les fonctions ordinaires
Patch d'adhésion Thunder
Comment utiliser l'ajout en python
Quelles sont les manières d'écrire une iframe ?
Quatre caractéristiques majeures de la blockchain
Introduction aux fonctions d'ordre supérieur de Python
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
