Home-theater-designers
HTML ist ein wichtiger Bestandteil des Webs, wie wir es kennen. Und obwohl nur wenige Webdesigner Seiten durch manuelles Eingeben von HTML erstellen, ist es dennoch praktisch, ein wenig darüber zu wissen.
Wir werden uns einige Grundlagen der Sprache ansehen, einschließlich was HTML wirklich ist, einige grundlegende Konzepte und wie es mit anderen Sprachen interagiert. Betrachten Sie dies als einen Crashkurs 'HTML für Dummies'.
HTML-Grundlagen: Was ist HTML?
HTML steht für Hypertext-Markup-Sprache . Und obwohl es manchmal mit Programmiersprachen in einen Topf geworfen wird, ist dies nicht genau.
Als ein Auszeichnungssprache , Mit HTML können Sie nur das Anzeigelayout von Seiten erstellen. Ein wahrer Programmiersprache , wie Java oder C++, enthält Logik und Befehle, die ausgeführt werden.
Obwohl es einfach ist, bildet HTML das Rückgrat jeder Seite im Web. Es ist dafür verantwortlich, welcher Text fett dargestellt wird, Bilder hinzuzufügen und auf andere Seiten zu verlinken. Wir haben eine HTML-FAQ, die mehr erklärt.
Sie können auf die meisten Webseiten in Ihrem Browser mit der rechten Maustaste klicken und auswählen Seitenquelle anzeigen oder ähnlich, um den HTML-Code dahinter zu sehen. Dies wird wahrscheinlich auch viel Code enthalten, der kein HTML ist, aber Sie können ihn durchsehen.
Selbst wenn Sie keine Erfahrung mit Markup oder Programmiersprachen haben, werden Sie durch das Lernen ein wenig über HTML zu einem informierteren Webbenutzer. Lassen Sie uns fünf grundlegende Schritte durchgehen, damit Sie verstehen, wie HTML funktioniert. Wir werden Beispiele auf dem Weg zur Verfügung stellen.
Schritt 1: Das Konzept von Tags verstehen
HTML verwendet ein System von Stichworte um verschiedene Elemente des Dokuments zu kategorisieren.
Die meisten Tags werden paarweise geliefert, um den betroffenen Text darin einzuschließen. Hier ist ein einfaches Beispiel (die
Tag macht Text Fett gedruckt ; Wir werden dies gleich mehr besprechen.)
This is some bold text .Beachten Sie, wie das schließende Tag mit einem Schrägstrich (/) beginnt. Dies bedeutet ein schließendes Tag, was wichtig ist. Wenn Sie ein Tag nicht schließen, hat alles von Anfang an dieses Attribut.
So erstellen Sie Fotocollagen auf Facebook
Allerdings haben nicht alle Tags ein Paar. Einige HTML-Elemente, genannt leere Elemente , haben keinen Inhalt und existieren für sich allein. Ein Beispiel ist das
-Tag, bei dem es sich um einen Zeilenumbruch handelt. Sie können solche Tags 'schließen', indem Sie einen Schrägstrich hinzufügen (z
) ist aber nicht unbedingt erforderlich.
Schritt 2: Das Skelett-HTML-Layout
Für ein richtiges HTML-Dokument müssen bestimmte Tags definiert sein, damit es richtig angeordnet ist. Dies sind die wesentlichen Teile:
- Jedes HTML-Dokument muss mit |_+_| . beginnen sich als solche zu erklären. Daher ist sein schließendes Tag |_+_| , ist das letzte Element in einer HTML-Datei.
- Als nächstes die |_+_| Der Abschnitt enthält Informationen wie den Seitentitel, verschiedene Skripts, die auf der Seite ausgeführt werden, und ähnliches. Wie der Name schon sagt, kommt dies normalerweise direkt nach dem ersten |_+_| Schild. Der Endbenutzer sieht nicht viel von dem Inhalt dieser Tags.
- Schließlich die |_+_| -Tag enthält den Text der Seite, die der Leser sieht (und vieles mehr). Hier finden Sie Bilder, Links und mehr.
Seit der
Abschnitt macht den Großteil eines HTML-Dokuments aus, der Rest unserer exemplarischen Vorgehensweise befasst sich mit den dazugehörigen Elementen.
Schritt 3: Grundlegende HTML-Tags für die Formatierung
Sehen wir uns als Nächstes einige gängige Tags an, aus denen HTML-Dokumente bestehen. Natürlich ist es nicht möglich, jedes Element abzudecken, daher werden wir einige der wichtigsten überprüfen. Wir haben abgedeckt viele weitere HTML-Beispiele wenn diese Sie nicht zufriedenstellen.
Wenn diese Tags ziemlich einfach erscheinen, denken Sie daran, dass HTML bereits 1993 erstellt wurde. Das Web war damals in seinen frühen Stadien sehr textbasiert.
Einfache Textformatierung
HTML unterstützt grundlegende Textstile, wie Sie sie in Microsoft Word finden:
- |_+_| Tags machen Text Fett gedruckt .
- |_+_| Tags (was für 'Emphasis' steht) wird kursiv Text.
HTML unterstützt auch die älteren
Tag für fett und
für Kursivschrift. Es ist jedoch vorzuziehen, die oben genannten zu verwenden.
Zusamenfassend,
und
zeigen, wie etwas zu verstehen ist, während die letztgenannten Tags Ihnen nur sagen, wie es aussehen soll. Diese früheren Tags sind für Screenreader, die von Sehbehinderten verwendet werden, besser zugänglich.
Absatz und andere Unterteilungen
HTMLs
-Tag können Sie einen Abschnitt des Dokuments definieren. Normalerweise wird dies mit CSS (siehe unten) gepaart, um einen Abschnitt auf eine bestimmte Weise zu formatieren.
Die
-Tag können Sie Text in Absätze unterteilen. Browser setzen automatisch etwas Platz vor und nach diesen, sodass Sie Text auf natürliche Weise aufteilen können.
Sie können Ihrem Dokument Kopfzeilen hinzufügen und die Nachvollziehbarkeit mithilfe der
durch
Stichworte. H1 ist der wichtigste Header, während H6 am wenigsten wichtig ist. Fast jeder MakeUseOf-Artikel verwendet H2- und H3-Header, um Informationen zu organisieren.
Schlagen Eintreten Zeilenumbrüche in Ihrem HTML-Dokument hinzuzufügen, werden diese nicht wirklich anzeigen. Stattdessen können Sie
um einen Zeilenumbruch hinzuzufügen.
Hier ist ein Beispiel, das all dies verwendet:
Schritt 4: Bilder einfügen
Bilder sind ein wichtiger Bestandteil der meisten Webseiten. Sie können sie einfach mit HTML hinzufügen und sogar verschiedene Eigenschaften für sie festlegen.
Sie fügen ein Bild mit der
Schild. Kombinieren Sie dies mit dem
-Attribut können Sie angeben, von wo das Bild geladen werden soll.
Ein weiteres wichtiges Attribut von
So erscheinen Sie offline auf Facebook 2018
Tags ist
. Mit Alt-Text können Sie das Bild für Screenreader beschreiben oder falls das Bild nicht richtig geladen wird. Sie können mit der Maus über ein Bild fahren, um seinen Alternativtext anzuzeigen.
Verwenden Sie die
und
-Elemente, um die Anzahl der Pixel anzugeben, mit denen das Bild angezeigt wird.
Fügen Sie alles zusammen und ein Image-Tag sieht so aus:
Example Heading
This is one paragraph.
This is a second
paragraph split between two lines.
Schritt 5: Links hinzufügen
Das World Wide Web wäre ohne Links zu anderen Seiten kein großes Web. Verwendung der
![]()
Tag können Sie zu anderen Seiten in jedem beliebigen Text verlinken.
Innerhalb der
srctag, die
![]()
-Attribut gibt an, wo Sie verlinken. Das einfache Einfügen der URL funktioniert einwandfrei. Du kannst den ... benutzen
alt-Element, um ein wenig Text hinzuzufügen, der angezeigt wird, wenn jemand mit der Maus über den Link fährt.
Ein grundlegender Link sieht so aus:
widthDie
heighttag hat viele andere mögliche Elemente, aber wir werden hier nicht darauf eingehen.
Wie HTML mit CSS und JavaScript verbunden ist
Wir haben uns die Grundlagen von HTML angesehen und wie es eine Webseite erstellt. Aber wie Sie sich vorstellen können, reicht HTML allein nicht für das moderne Web. Einfache HTML-Webseiten waren in den Tagen des 'Web 1.0' üblich, als die meisten Websites nichts anderes als statischer Text waren.
Aber jetzt haben wir noch viel mehr. CSS (Cascading Style Sheets) ist eine Sprache, die verwendet wird, um zu beschreiben, wie der in HTML vorbereitete Text aussehen soll. Erinnere dich an die
Tag wir diskutierten? In diesem (und anderen Tags) können Sie a . definieren
Attribut. Dann können Sie in Ihrem begleitenden CSS-Dokument Anweisungen dazu schreiben
sollte aussehen.
Sie können diese Stilelemente in Ihrem HTML-Code inline definieren, dies gilt jedoch als schlechte Praxis, da es viel schwieriger zu verwalten ist. Erfahren Sie mehr mit diese einfachen CSS-Beispiele . Schaut auch vorbei So optimieren Sie Ihre CSS-Dateien .
JavaScript
Wir haben gesehen, dass HTML den Inhalt definiert und CSS das Aussehen bestimmt. JavaScript, das letzte Mitglied des Trios, das für das Web von entscheidender Bedeutung ist, ermöglicht es Webseiten, auf die Aktionen von Benutzern zu reagieren, ohne jedes Mal eine neue Seite laden zu müssen.
JavaScript ermöglicht es einer Website beispielsweise, Sie zu warnen, dass das von Ihnen eingegebene Passwort nicht den Anforderungen entspricht, bevor Sie versuchen, es zu übermitteln. Ein Webdesigner kann JavaScript verwenden, um durch Bilder in einer Diashow zu blättern oder den Benutzer zur Eingabe aufzufordern.
Dies sind nur einige elementare Beispiele. JavaScript ist eine Skriptsprache, die sehr viel kann und vergleichsweise viel komplizierter ist als HTML und CSS. Sehen unsere Übersicht über JavaScript für viel mehr.
Den gesamten Umfang des Webdesigns zu betrachten, würde den Rahmen dieses Artikels sprengen, aber es genügt zu sagen, dass HTML mit anderen Sprachen interagiert, um die Webseiten zu erstellen, die wir heute kennen.
Die Evolution von HTML
Es ist wichtig zu beachten, dass HTML nicht statisch ist. HTML hat mehrere Überarbeitungen durchlaufen, zuletzt HTML 5. Insbesondere unterstützt dieser Standard die native Videoeinbettung, anstatt sich auf proprietäre Formate wie Adobe Flash zu verlassen.
Neue HTML-Iterationen deklarieren von Zeit zu Zeit auch bestimmte archaische Tags als veraltet. Dazu gehören schreckliche Tags wie
hrefund
title(dieser Scroll- bzw. Flash-Text) wird häufig im Website-Design der 1990er Jahre verwendet. Denken Sie also daran, dass sich die Standards im Laufe der Zeit ändern.
Ein wenig HTML-Kenntnisse sind ein langer Weg
Wir haben eine kurze Tour durch die Funktionsweise eines HTML-Dokuments gemacht. Jetzt kennen Sie die Grundlagen der Strukturierung von Webseiten. Auch wenn Sie keine Webseiten erstellen, sind Sie sich des Webs, das Sie täglich nutzen, etwas bewusster.
So konvertieren Sie PDF in Word auf dem Mac
Um mehr zu erfahren, verbessern Sie Ihre Webentwicklungsfähigkeiten mit wichtigen Tools und sehen Sie sich dann an unsere Anleitung zur Gestaltung Ihrer ersten Website .
Bildquelle: Belyaevskiy/ Depositphotos
Teilen Teilen Tweet Email 5 Tipps zum Aufladen Ihrer VirtualBox-Linux-MaschinenHaben Sie genug von der schlechten Leistung virtueller Maschinen? Hier ist, was Sie tun sollten, um Ihre VirtualBox-Leistung zu steigern.
Weiter lesen Verwandte Themen- Programmierung
- HTML
- Web Entwicklung
- JavaScript
- Webmaster werkzeuge
- Programmierung
- HTML5
Ben ist stellvertretender Redakteur und Onboarding Manager bei MakeUseOf. Er hat seinen IT-Job 2016 aufgegeben, um Vollzeit zu schreiben, und hat es nie bereut. Seit über sieben Jahren berichtet er als professioneller Autor über technische Tutorials, Videospielempfehlungen und mehr.
Mehr von Ben StegnerAbonniere unseren Newsletter
Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!
Klicken Sie hier, um sich zu abonnieren