Wenn Sie unter anderem Nachrichtenseiten, soziale Netzwerke, Bankensysteme betreten, stehen uns auf dem Bildschirm mehrere Elemente zur Verfügung, die eine Benutzerinteraktion ermöglichen.
Aber haben Sie jemals darüber nachgedacht, wie das alles gebaut wurde?
Einer der für die Erstellung einer Website verantwortlichen Fachleute ist der Front-End-Entwickler, der ein vom UX/UI-Designteam erstelltes Layout mithilfe von figma in Code umwandelt.
Technisch gesehen erfolgt die Erstellung einer Website mithilfe mehrerer Technologien, und eine davon ist HTML.
In diesem Artikel erfahren Sie, was HTML ist und wozu es dient und wie es verwendet werden kann.
Was ist HTML?
Da es sich um eine Technologie zur Entwicklung von Websites handelt, wird allgemein angenommen, dass wir in HTML programmieren. Ein wichtiger Hinweis ist, dass HTML keine Programmiersprache, sondern eine Auszeichnungssprache ist.
Programmiersprachen werden verwendet, um Algorithmen zu erstellen, Variablen und Datenstrukturen zu manipulieren. HTML, das englische Akronym für Hypertext Markup Language, strukturiert und formatiert den Inhalt von Webseiten.
Um ein Projekt mit dieser Technologie erstellen zu können, benötigen Sie eine Datei im Format „.html“, damit Sie sie in einem Browser öffnen können, der den Quellcode interpretiert, um die Elemente auf dem Bildschirm anzuzeigen.
Anatomie einer HTML-Datei
Die Anatomie einer HTML-Datei kann als Baum interpretiert werden.
Wir haben die Wurzel, die das Element ist, und von dort aus können wir neue Elemente (die wie Zweige sind) deklarieren, die als untergeordnete Elemente interpretiert werden können, und folglich ist es auch möglich, übergeordnete Elemente zu erstellen. Darüber hinaus können Elemente, die dieselbe Ursprungsreihe haben, als Geschwister bezeichnet werden.
Die Anatomie eines HTML-Elements
Die Struktur eines HTML-Elements wird durch Öffnen des Tags erstellt, das von spitzen Klammern umgeben ist.
Zum Beispiel das Absatz-Tag
Auf
folgt der Inhalt, der angezeigt wird, und abschließend wird es durch ein Tag geschlossen, das mit dem Eröffnungs-Tag identisch ist, jedoch mit einem Schrägstrich vor dem Elementnamen:
.
Das Endergebnis ist dieses:
Bsp.
<p> O nome do meu cão é Retovem. </p>
Nach dem Login kopieren
Was können wir mit HTML erstellen?
Mit HTML können wir verschiedene Elemente erstellen, um eine Webseite mit dem Thema Ihrer Wahl zu erstellen: Blogs, Online-Shops, Nachrichtenseiten usw.
Einige der Hauptelemente, die wir erstellen können, sind:
- Titel und Absätze
- Links und Schaltflächen
- Bilder
- Listen und Tabellen
- Formulare
- Videos und Audios
Diese Auszeichnungssprache bietet uns eine breite Palette an Ressourcen, von denen nur einige erwähnt wurden, die je nach den Anforderungen des Projekts verwendet werden können.
Die Entwicklung von HTML
Tim Berners-Lee hat HTML am CERN (Europäische Organisation für Kernforschung) mithilfe der NeXTSTEP-Entwicklungsumgebung entwickelt. Ursprünglich handelte es sich um eine Reihe von Tools zur Verwaltung von Suchen und zur Kommunikation zwischen ihnen.
Mit der Entwicklung des Internets erlangte die Lösung weltweite Aufmerksamkeit. Die ersten Versionen waren flexibel, was Anfängern auf diesem Gebiet geholfen hat.
Im Laufe der Zeit wurde die Struktur starrer, aber auch heute noch können Browser durch Abwärtskompatibilität Webseiten interpretieren, die auf die alte Art erstellt wurden.
Die Spezifikationen wurden in den 1990er Jahren definiert, als eine HTML-Arbeitsgruppe gegründet wurde, die 1995 die HTML 2.0-Version veröffentlichte.
Ende 1997 wurde die HTML 3.5-Version veröffentlicht und damit begann sich die W3C-Arbeitsgruppe im Jahr 2000 auf die Entwicklung von XHTML zu konzentrieren, und wir kamen schließlich im Jahr 2014 an, als HTML veröffentlicht wurde, das bis heute verwendet wird heute.
Wir haben gesehen, dass mehrere Versionen von HTML veröffentlicht wurden, bis wir die Version erreichten, die wir heute verwenden, aber was ist der Unterschied zwischen HTML und HTML5?
Unterschiede zwischen HTML und HTML5
In älteren Versionen erfolgte die Inhaltsstrukturierung hauptsächlich durch generische Elemente wie
und .
In HTML5 haben wir semantische Tags, die sich auf den Zweck des Elements beziehen, unter anderem mit der Kopfzeile, der Fußzeile und der Trennung von Abschnitten.
Darüber hinaus haben wir heute mit HTML5 native Unterstützung für Audio, wir können sie direkt auf der Seite einbetten.
Formulare können in der Version auch mehr Feldtypen abdecken: Wir haben jetzt E-Mail-, Nummern-, Datums- und Spezifikationsfelder zur Verfügung, die native Validierungen für die Elemente generieren.
Es ist jedoch wichtig zu wissen, dass HTML eine statische Version ist. Es wird auch heute noch weiterentwickelt und verbessert, wobei von Zeit zu Zeit Funktionen und Funktionen hinzugefügt werden.
HTML vs XML: Quais são suas diferenças?
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 funciona o HTML?
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.
Dom
A representação estruturada do conteúdo HTML de uma página web é feita através do DOM (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:
<span class="cp"><!DOCTYPE html>
<html>
<head>
<title>Aprendendo HTML</title>
</head>
<body>
<h1>Olá, mundo!</h1>
<p>Este é o meu primeiro projeto HTML</p>
</body>
</html>
Nach dem Login kopieren
A estrutura do DOM seria a seguinte:
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.
HTML semântico
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
a , sendo essenciais para indicar a hierarquia do conteúdo.
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.
Auch wenn man Texte im Kontext der Semantik betrachtet, ist es wichtig, beschreibende Links anstelle von generischen zu verwenden. Anstatt beispielsweise einen „Hier klicken“-Link zu erstellen, schreiben Sie einen Text, der das Ziel dieses Links deutlich macht.
Durch die Anwendung dieser Vorgehensweisen erstellen Sie Seiten, die für Suchmaschinen wie Google geeignet und für alle Benutzer zugänglich sind. das ergibt:
- Bessere Benutzererfahrung
- Größere Zielgruppenreichweite
- Mehr Web enthalten.
Welche Beziehung besteht zwischen HTML, CSS und JavaScript?
Front-End-Entwickler verwenden bei der Entwicklung einer Website verschiedene Technologien, aber unabhängig davon, ob sie Frameworks und Bibliotheken verwenden, ist die Basis immer dieselbe: HTML, CSS und JavaScript.
HTML ist, wie wir in diesem Artikel gesehen haben, eine Auszeichnungssprache, die zum Strukturieren und Organisieren von Seiteninhalten verwendet wird. aber mit HTML allein ist es nicht möglich, Elemente zu formatieren oder komplexe Interaktionen aufzubauen.
Es ist wie die Struktur eines Gebäudes mit Wänden, Türen und Fenstern. Aber was ist der Unterschied zwischen der HTML-Sprache und der CSS-Sprache?
Der Unterschied zwischen HTML und CSS
Im Gegensatz zu HTML ist CSS (Cascading Style Sheets) eine Stilsprache, die das Erscheinungsbild und Layout von HTML-Elementen auf einer Webseite definiert.
Damit können wir Farben, Schriftarten, Ränder, Größen, Positionierung und andere Attribute auf Elementen platzieren.
Es ist so, als würde man ein Gebäude streichen, dekorieren und innen gestalten und es ästhetisch ansprechend und ansprechend gestalten.
In welchen Bereichen wird HTML verwendet?
Obwohl HTML im Allgemeinen im Bereich der Webentwicklung verwendet wird, ist es auch möglich, es in anderen Bereichen der Programmierung zu verwenden, wie zum Beispiel:
- Bei der Entwicklung des E-Mail-Marketings
- In der mobilen Entwicklung
- In der Spieleentwicklung
- In der Entwicklung von Desktop-Anwendungen
Es ist wichtig zu beachten, dass HTML häufig mit anderen Technologien wie CSS und JavaScript kombiniert wird, um diese und andere Erlebnisse zu erstellen.
Abschluss
In diesem Artikel haben Sie etwas über HTML, seine Geschichte, seine Funktionsweise und die Verwendung durch Tags und Elemente erfahren. Zusätzlich zum Wissen, wo HTML angewendet werden kann und über die Beziehung zwischen HTML, CSS und JavaScript.
HTML ist eine Auszeichnungssprache, keine Programmiersprache. Es wird zum Erstellen von Elementen und zum Strukturieren von Webseiten verwendet. Es handelt sich um eine Technologie, die von Frontend-Entwicklern verwendet wird, normalerweise in Verbindung mit CSS und JavaScript.
Wenn Ihnen dieser Inhalt gefallen hat, hinterlassen Sie Ihre Meinung in den Kommentaren und teilen Sie sie, damit mehr Menschen ihn sehen und mögen.
Bis später!
Das obige ist der detaillierte Inhalt vonHTML: Was es ist und wie wichtig es für das Web ist.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
