HTML-Grundlagen: was du als angehender Entwickler wissen musst
HTML-Grundlagen sind essenziell, wenn du Webentwickler werden möchtest. Das Aufbauen von Websites und Applikationen für das Web kann viel Spaß machen, aber dennoch für Kopfzerbrechen sorgen.
Es ist immens wichtig sich mit den Grundlagen auseinanderzusetzen, um spätere Fehler zu vermeiden und den Workflow zu verbessern – gerade im Hinblick auf responsive Webdesign ist das wichtig. Hier erfährst du alles was du wissen musst, um simple Websites mit HTML 5 aufbauen zu können.
Ist HTML eine Programmiersprache?
Die Hypertext Markup Language – kurz HTML. Wie es sich bei dem Namen bereits vermuten lässt, handelt es sich um eine Auszeichnungssprache. Bei der Frage, ob es sich hier um eine Programmiersprache handelt spalten sich so manche Geister. Um es konkret zu sagen: HTML ist keine Programmiersprache!
Unter einer Programmiersprache versteht man in der Regel eine formale Sprache, mit der Rechenvorschriften formuliert werden können und dabei einer bestimmten Syntax folgen.
Konkret bedeutet das, dass eine Sprache nur dann eine Programmiersprache ist, wenn mit ihr auch exakte Anweisungen mit einem Bezug auf bestimmte Daten unter der Verwendung von Algorithmen formuliert werden können.
Es gibt also eine bestimmte Sprache, die wohldefinierte Sprachelemente und Regeln besitzt, mit denen unter Beachtung von Syntax und Semantik Datensätze erstellt oder manipuliert werden können.
Nach dieser Definition und kurzer Überlegung ist eigentlich klar, dass HTML keine richtige Programmiersprache ist. Auch wenn das für dich momentan vielleicht noch nicht so klar ist… du wirst sehen, dass die Arbeit mit HTML halb so wild ist.
HTML Grundlagen: Das Grundgerüst
Jede Website braucht ein Grundgerüst. Eine HTML-Datei ist für die Darstellung und Strukturierung der Daten verantwortlich. Jede einzelne Unterseite einer Website hat eine eigene HTML-Datei, die es umzusetzen gilt.
Dabei bleiben bestimmte Elemente wie die Navigation, Sidebar oder der Footer auf jeder der Seiten beibehalten. Man kann sagen sie werden „kopiert“. Was es mit den einzelnen Bereichen einer Seite auf sich hat, wird später noch im Detail besprochen.
Warum wird ein HTML Grundgerüst benötigt?
Eine HTML-Datei kann nicht nur strukturelle Anweisungen und Elemente beinhalten, sondern auch Code anderer Sprachen.
Doch damit bspw. Frameworks wie jQuery überhaupt auf die Seite zugreifen können, um sie letztendlich manipulieren zu können, muss eine einheitliche und übersichtliche Seitenstruktur vorhanden sein. Hier gilt es natürlich den korrekten Syntax zu kennen.
Auch das Anpassen des Erscheinungsbildes bestimmter Elemente durch CSS Anweisungen benötigt eine klare Struktur. Außerdem lassen sich so bestimmte Bereiche einer Website unterschiedlich gestalten, was aus Sicht der Informationsarchitektur ebenfalls von hoher Wichtigkeit ist.
Auch für die Suchmaschinenoptimierung und eine adäquate Darstellung der Website auf mobilen Endgeräten ist eine gute Struktur von Nöten, weshalb du die HTML-Grundlagen beherrschen solltest.
Um Redundanzen und Fehler konsequent zu vermeiden solltest du dich außerdem an die neusten HTML 5 Standards halten, um einem weiteren Ausbau der Website nicht mit veralteter Technik im Weg zu stehen.
Ein solches HTML-Grundgerüst besteht grundsätzlich aus einem „Head“ und einem „Body“. Der Head enthält alle Informationen, die von Suchmaschinen gelesen werden können. Der Inhalt, der hier vermerkt wird, ist nicht für den User sichtbar.
Im Body hingegen befindet sich die gesamte Struktur und alle Inhalte der Website. Das kann Text sein oder Medien wie verschiedene Bilder, Videos und interaktive Elemente, die dann letztendlich auch auf der abrufbaren Website für jeden verfügbar und sichtbar sind.
Das Grundgerüst sieht wie folgt aus:
1 2 3 4 5 6 7 8 |
<html> <head> <!—hier stehen deine Meta Tags und globale Informationen --> </head> <body> <!—hier befindet sich der Content deiner Seite. --> </body> </html> |
Der Head Bereich eines HTML-Dokuments
Wie bereits oben erwähnt enthält der Head die Informationen des HTML-Dokuments, die primär nur von der Suchmaschine gelesen werden können und für diese relevant sind. Du solltest IMMER einen Head-Bereich in deinem Dokument definieren!
Auch wenn es sich nicht auf den Inhalt deiner Seite umfänglich auswirkt (zumindest sollte es das nicht), brauchen „Maschinen“ wie Google, Bing und Co. diese Informationen um deine Website einordnen zu können.
Der Head hält Informationen über die Sprache der Website, über deren Inhalt und ggf. Redirects. Das heißt auch Weiterleitungen können hier gesetzt oder eben auch entfernt werden.
Der Body-Bereich eines HTML-Dokuments
Im Body stellst du alle Informationen dar, die der User zu Gesicht bekommen soll. Die Suchmaschine hat übrigens auch hier vollen Zugriff und kann deine Website bis ins kleinste Detail crawlen, sprich untersuchen.
Du wirst später merken, wie wichtig es ist, dies der Suchmaschine zu „erleichtern“. Generell und optimalerweise hat ein gesamtes Webprojekt mit mehreren Seiten einen Head- und einen Body-Bereich pro Seite, die den jeweiligen Content definiert.
Die Unterteilung in Head- und Body-Bereich ist eine absolute HTML-Grundlage, die du auf jeden Fall beherrschen und niemals vergessen solltest.
Was ist ein Tag in HTML?
In HTML werden Elemente und Inhalte immer mit einem Kleiner-Zeichen „<“ eingeleitet. Gefolgt von dem Elementnamen (bspw. meta, li …) folgt letztendlich immer eine Kombination mit dem Größer-Zeichen „>“, um das Tag zu schließen.
In der Regel sieht das schließende Tag so aus: </ >. Es gibt jedoch auch Elemente, deren schließendes Tag nur aus einem Größer Zeichen besteht. Somit sehen manche Elemente wie folgt aus: < >, wobei sich der Inhalt natürlich zwischen den Klammern befindet.
Die fundamentale Struktur deiner HTML-Website
Du kannst und musst deine HTML-Site gut strukturieren. Dabei reicht es nicht aus, ein Head- und Body-Tag zu verwenden. Der meiste Inhalt befindet sich im Body deiner HTML-Site. Zu den Grundlagen gehören zusätzlich folgende Tags.
Das Header-Tag
Im Header ist der erste Content, der sich auf deiner Site befindet. Im Header-Bereich hast du in der Regel deine Navigation und dein Logo, wobei der Header nur einen Container definiert, in dem sich Logo, Navigation und Co. befinden.
1 2 3 |
<header> <!--Hier steht der Inhalt --> </header> |
Nav
Der Nav-Bereich ist, wie der Name vermuten lässt, extra für deine Navigationsleiste vorgesehen. Hier kannst du dein Menü definieren und ohne weitere Klassen oder IDs zu vergeben eine Navigation anlegen und diese leichter und global verändern. Verwende dieses Tag immer, um darin eine Navigationsleiste zu erstellen.
Für die Verlinkung der Menüpunkte bzw. der Seiten benötigst du Links. Mehr dazu findest du weiter unten in diesem Blogbeitrag. In dem Fall setzt du dann die Links einfach zwischen die Nav-Tags.
Ein Beispiel: die Navigation von Einstein1
|
Main
Zwischen den Main-Tags befindet sich der eigentliche, seitenspezifische Haupt-Inhalt der HTML-Site. Verwende hierfür das Main-Tag:
1 2 3 |
<main> <!--Hier steht der Inhalt --> </main> |
Article
Article Tags verwendest du für Bereiche deiner Website, die auch in sich selbst und alleinstehend Sinn ergeben. Beispiele können ein Slider für Bilder sein, oder ein bestimmter Bereich der Website wie bspw. Testimonials, Kontakt oder ein Blogbeitrag.
1 2 3 |
<article> <!--Hier steht der Inhalt --> </article> |
Section
Articles kannst du ohne Probleme weiter untergliedern. Du solltest hierfür das Tag <section></section> verwenden, um Content zu gliedern.
1 2 3 |
<section> <!--Hier steht der Inhalt --> </section> |
Footer
Als Footer einer Website wird grundsätzlich der „abschließende“ Inhalt einer Website genannt. Hier finden sich oft Kontaktmöglichkeiten, nützliche Links oder Social-Media-Verlinkungen wieder.
Wie auch im Header gilt es den Footer für die Gliederung von Inhalten zu verwenden, der sich von Seite zu Seite nicht verändert. Das sollte er übrigens auch aus einer User-Experience-Sicht nicht.
1 2 3 |
<footer> <!--Hier steht der Inhalt --> </footer> |
Ein gut aufgeräumter Code ist alles – sorge immer dafür, dass dein Code gut lesbar ist. (Quelle: https://bit.ly/2LJU5QI)
Responsive Webdesign
Responsive Webdesign ist heutzutage ein absolutes Muss! Eine Website ist responsive, wenn sie sich automatisch an die Bildschirmgröße anpasst und den Content neu anordnet. Und das muss so passieren, damit die Inhalte auf jedem Gerät gut lesbar sind. Du warst bestimmt schon einmal mit deinem Smartphone auf einer Website, die sehr klein dargestellt wurde.
Das Problem mit Websites, die sich nicht an die Bildschirmgröße anpassen können ist, dass sie sehr schlecht lesbar sind und eine gute Übersicht nicht möglich ist. Deine Website soll sich immer an verschiedene Größen anpassen können: Desktop, Tablet und Smartphone.
Du möchtest sichergehen, dass deine Website auf jedem Gerät optimal dargestellt wird. Das ist nicht nur gut für deine Bounce-Rate und die Zufriedenheit deiner Besucher, sondern auch für Suchmaschinen. Eine Website, die nicht responsive ausgelegt wurde, ist nicht mehr zeitgemäß.
Bereits bei der Auslegung der HTML-Struktur ist es wichtig, dass du obige Tags kennst. Denn unterteilst du deine Website nicht in Nav, Header, Main und Footer, hast du später deutlich mehr unnötige Arbeit bei der CSS-Formatierung.
Mit dieser Unterteilung sind die wichtigsten Bereiche deiner Website voneinander gekapselt und lassen sich so besser verwalten, manipulieren und an bestimmte Bildschirmgrößen anpassen.
Responsive Webdesign anhand der Website von Einstein1.
Weitere fundamentale HTML Tags:
Doctype
Deine HTML-Site benötigt die Anweisung <!doctype html>. Hiermit sagst du deinem Browser, dass es sich um ein HTML-Dokument handelt. Das ist wichtig, damit dieser die Seite richtig interpretieren kann.
Danach legst du in jeder HTML-Datei die Grundstruktur deiner Datei fest. Wie oben bereits erwähnt befinden sich im head alle Informationen, die primär für Suchmaschinen und andere „Roboter“ gemacht sind, und im Body der Content.
1 |
<!DOCTYPE html>
|
Meta-Tags
Meta-Tags in HTML zählen zu den absoluten Must-Haves und zählen zu den SEO-Grundlagen. Sie definieren Seitentitel, Auszüge und Sprache der Website. Folgende Tags solltest du auf jeden Fall kennen. Prinzipiell gibt es auch ein allgemeines Tag.
1 |
<meta <!-- Hier stehen die Attribute -->> |
Sprache
Damit Suchmaschinen und Kunden nicht verwirrt werden und deine Seite im Internet auch korrekt angezeigt wird, solltest du dringend die richtige Sprache festlegen. Die W3-Association empfiehlt die Sprache sofort im HTML-Tag anzugeben.
1 2 3 4 5 6 7 8 |
<meta lang=“de/de“> <!-- Empfehlung der W3-Association --> <html lang=“de“> <!-- Hier steht der Inhalt deines HTML Dokuments --> </html> |
Charset
Das UTF Tag legt fest, welche Zeichen die HTML Seite „verträgt“. Es gibt verschiedene Möglichkeiten, die hier angegeben werden können. Standard mit HTML 5 ist die Angabe des Charset UTF-8.
1 |
<meta charset=„UTF-8“> |
Meta Description
Die Meta Description ist vor allem für deine Suchmaschinenoptimierung (SEO) wichtig. Die Angabe in diesem Tag ist zwar kein Rankingfaktor (mehr) an sich. Durch eine gute und „klickwürdige“ Meta Description kannst du aber die Click-Through-Rate (CTR) deiner gesamten Domain signifikant steigern. Der Text wird auch in den Suchergebnissen von Suchmaschinen (immer noch) prominent gezeigt.
1 |
<meta name="description" content="Einstein1 - Digitales Gründerzentrum am Campus der Hochschule Hof. Für Hochfranken und die Region. Gründungsberatung und Events für Gründer und Startups."/> |
Mehr Informationen zur Meta Description und SEO findest du hier.
Mit den HTML Grundlagen gelingst du schnell an dein Ziel einer fertigen Website. (Quelle: https://bit.ly/2w0j3R2)
Überschriften
Überschriften in HTML zählen zu den absoluten Basics. Sie sind essenziell wichtig für SEO und Ranking bezüglich bestimmter Keywords. Es gilt jedoch eine gewisse Struktur einzuhalten, die nicht nur für Roboter gut lesbar und nachvollziehbar ist, sondern auch deinen Besuchern einen guten Anhaltspunkt bietet.
Besonders bei viel Inhalt oder auch bei Blogbeiträgen ist eine gute Gliederung absolut notwendig. Überschriften sind in sechs Hierarchien unterteilt, wobei es noch einige Regeln gibt, die es zu beachten gilt.
H1 – Die Mutter aller Überschriften
Die H1-Überschrift sollte (in den allermeisten Fällen) nur EINMAL auf jeder Site vorhanden sein. Sie sollte außerdem dein Focus-Keyword enthalten und wird oft dazu genutzt, den Inhalt deiner Website oder den Kundennutzen in einem Satz zusammen zu fassen. Gerade für Suchmaschinen ist dieser Aspekt wichtig.
Deshalb solltest du auch niemals Sätze wie „Willkommen auf meiner Homepage“ o. ä. verwenden. Statt „Herzlich Willkommen“ kannst du Sätze schreiben wie „Musterworks – deine Webagentur in Stuttgart“. Doch achte darauf, dass dein Focus-Keyword in diesem Satz enthalten ist.
Zumal eine Homepage übrigens nur die Seite ist, die auch als Startseite definiert ist. Beschreibe niemals eine Website als Homepage, da eine Website immer mehrere Seiten umfasst und eine Homepage nur eine spezifische Startseite einer Website ist. Merke also: Homepage ≠ Website!
1 |
<h1> <!-- Hier steht die Überschrift --> </h1> |
H2 – H6 Überschriften
Die restlichen Überschriften dienen zur Strukturierung des Inhalts des Dokuments. Du solltest aus Übersichts-Gründen alle 150 – 250 Wörter eine Unterüberschrift einsetzen, damit deine Website-Besucher sofort wissen, wo sie nach bestimmtem Content suchen müssen.
Außerdem kannst du auch hier wieder mit Keywords arbeiten, die nicht nur Usern, sondern auch Suchmaschinen die Informationen über den Inhalt der Website geben. Versuche auch bei Möglichkeit nicht zu sehr in die Tiefe zu strukturieren. Halte deine Überschriftenhierarchie übersichtlich und „flach“.
Anschaulich bedeutet das also, dass du auf die Verwendung von H4, H5 und H6 Überschriften verzichten solltest, wenn nicht unbedingt notwendig. Erstelle hierfür lieber einen neuen Textabschnitt, der mit einer H2 beginnt.
An der Stelle des Platzhalters im Beispiel unten schreibst du anstelle „_“ die passende numerische Hierarchie (1-6).
1 |
<h_> <!-- Hier steht die Überschrift --> </h1_ |
Text-Grundlagen in HTML
Bis jetzt weißt du, wie du Überschriften anlegst. Normaler Text jedoch hat ein eigenes Tag. Schreibe also niemals einen längeren Text in eine Überschrift, sondern in ein p-Tag. Das „p“ steht für das englische Wort Paragraph – ein Absatz.
Packe den Text zwischen die Tags <p> also hier rein </p> und schließe das schließende Tag aber erst, wenn wirklich der ganze Text zusammengefasst werden kann. Vermeide mehrere <p> Tags im selben Abschnitt.
1 |
<p> Hallo! Ich bin ein Paragraph! </p> |
Listen in HTML
Zu den Grundlagen von HTML zählen neben Überschrift und Text auch Listen. Mit ihnen lassen sich Inhalte gut strukturieren und darstellen. Prinzipiell gibt es zwei Arten von Listen in HTML.
Die „Unordered List“
Eine unordered list ist eine Liste, also eine Aufzählung, die keine „Ordnung“ besitzt. Die Elemente der Liste werden mit einem Bulletpoint eingeleitet. Ganz analog schreibst du hier für die Liste <ul> </ul>
Die „Ordered List“
Eine geordnete Liste, also ordered list, unterscheidet sich nur in der Symbolik, mit der die einzelnen Listenelemente eingeleitet werden. Für eine geordnete Liste nutzt das Tag <ol> </ol>.
1 2 3 4 5 6 7 8 9 |
<ul> <!-- Das hier ist eine ungeordnete Liste --> </ul> <ol> <!-- Das hier ist eine geordnete Liste --> </ol> |
Die Listenelemente li
Damit deine Liste nun Elemente enthält musst du diese der jeweiligen Liste zuordnen. Dabei ist es egal, ob es sich um eine geordnete oder ungeordnete Liste handelt. Du schreibst die einzelnen Elemente (<li> </li>) innerhalb der Tags deiner Liste. Also wie folgt:
1 2 3 4 |
<ul> <li> Stichpunkt 1 </li> <li> Stichpunkt 2 </li> </ul> |
Container <div>
Du kannst auch selbst jederzeit einen eigenen Container definieren, der bestimmte Inhalte enthält. Du hast die Möglichkeit diesen dann auch anderweitig zu manipulieren und deine Inhalte gewünscht darzustellen.
Ganz analog lautet das Tag <div> </div>
1 2 3 |
<div> <!-- Hier steht der Inhalt deines Containers --> </div> |
Table – Tabellengrundlagen HTML
Möchtest du bestimmte Inhalte in einer Grid- oder Gitterstruktur aufbauen empfiehlt sich die Verwendung eines Table. Das Tag lautet <table> </table>.
Table Caption
Du kannst deinem Table eine Beschriftung mitgeben, die als erstes Element des Table dargestellt wird. Das Tag lautet <caption> </caption>
Table-Row
Eine Matrize besteht ja bekanntlich aus Zeilen und Spalten. Das gibt es auch in HTML. Das Tag <tr> gibt dir die Möglichkeit verschiedene Zeilen in deiner Tabelle anzulegen.
Diesen kannst du auch einen Namen mitgeben, indem du Text zwischen das öffnende und das schließende Tag schreibst. Das kann bspw. so aussehen:
1 2 3 4 |
<table> <tr>Kontostand</tr> <tr>Ausgaben</tr> </table> |
Table-Data
Das Table Data Tag enthält konkret den Inhalt, den du bei einer bestimmten Zelle in deiner Tabelle stehen haben möchtest. Geschrieben wird das Tag mit <td> </td>, wobei du auch hier zwischen die beiden Tags den Inhalt schreiben kannst.
Damit du auch ein richtiges Grid bekommst steckst du in genau so viele <td> </td> Tags in ein <tr> </tr> Tag, wie du Spalten haben möchtest. Hier ein kleines Beispiel dazu: Links siehst du den exakten HTML-Code zu der rechts stehenden Tabelle. Bedenke jedoch, dass Schrift und Farbe anders aussehen kann, das kommt ganz auf deine CSS Einstellungen an. Mehr dazu findest du hier.
|
|
Bold- und Strong-Tags
Möchtest du bestimmten Text innerhalb eines Paragraphen besonders hervorheben empfiehlt sich die Verwendung von <bold> </bold> und <strong> </strong> Tags. Doch was genau ist der Unterschied?
Bold-Tags
Ein Bold-Tag verwendest du in der Regel nur, wenn du bestimmten Text fett anzeigen möchtest. Das kann beispielsweise ein Menüpunkt auf der Website sein oder ein Begriff im Fließtext, den du betonen möchtest. Das Bold-Tag hat ausschließlich eine Auswirkung auf das Erscheinungsbild des sich zwischen den Klammern befindlichen Inhaltes.
Strong-Tags
Die Strong Tags sind besonders wichtig, wenn du bestimmte Keywords, oder Text der inhaltlich wichtig ist, hervorheben möchtest. Ein Strong Tag sollte nur verwendet werden, wenn es sich um semantisch wichtigen Text handelt.
1 2 3 4 5 |
<bold> <!-- Hier steht der Inhalt --> </bold> <strong> <!-- Hier steht der Inhalt --> </strong> |
Span-Tag
Das Span-Tag <span> </span> wird genutzt, um bestimmte Bereiche eines Texts bspw. mit CSS manipulieren zu können. Anders als bei den Strong- und Bold-Tags verändert sich hier vorerst gar nichts. Erst wenn du dem span-Element in CCS einen bestimmten Stil mitgibst, ändert sich auch der Inhalt zwischen den Tags.
iFrames
Das iFrame ermöglicht es dir ein weiteres Dokument (bspw. von einer anderen Website) in deine HTML-Site einzubauen.
1 |
<iframe src=https://einstein1.net></iframe> |
Jedoch solltest du bei seiner Verwendung Obacht geben. Denn nicht jeder Inhalt sollte via iFrame dargestellt werden. Gerade bezüglich des Datenschutzes kann es hier auch häufiger zu Problemen kommen.
Hier gibt es noch mehr dazu (Achtung: keine Rechtsberatung)
HTML-Grundlagen: Bilder
Sicher hast du dich schon gefragt wie du nun Bilder in dein HTML-Dokument einbinden kannst. Doch keine Sorge, auch das ist ganz leicht. Du sagst dem Browser mit dem <img> – Tag (Achtung, es existiert kein schließendes Tag!), dass der Inhalt, der nun kommt, ein Bild ist.
Jetzt musst du nur noch die Quelle des Bildes angeben. Das kannst du mit absoluten, aber auch mit relativen Pfaden tun. Was es damit auf sich hat erfährst du hier.
Das kann dann wie folgt aussehen:
1 |
<img src=“./../images/einstein1-logo.png“ > |
Besonders wichtig ist auch das Setzen eines Alt-Attributs für dein Bild. Das Alt-Attribut sagt der Suchmaschine, was sich auf dem Bild befindet, da Google und Co. keine Pixel auswerten können. Der Inhalt des Alt-Attributs sollte eine relativ nüchterne Beschreibung des Abgebildeten darstellen.
Basiswissen Formulare
Wohl eines der wichtigsten Elemente in einem interaktiven HTML-Dokument ist ein Formular. Formulare zählen zu den absoluten Basics von Websites. Mit ihnen kannst du Daten aus einem Textfeld lesen, diese weiterverarbeiten und bspw. an einen Server schicken.
Sie (aber nicht nur sie) bilden die Grundlage der Interaktivität einer Website. Das Formular benötigt zudem immer folgende Attribute und Elemente, um ordnungsgemäß zu funktionieren.
Action
Das Attribut Action gibt dem Browser die Information, wie die Daten weiterverarbeitet werden sollen. Hier gibst du bspw. den Namen einer PHP-Datei an.
Input
Mit Input wird ein Bereich in deinem Formular definiert, in dem vom Benutzer Werte gesetzt werden können. Ein gutes Beispiel ist hier das Alter einer Person. Das Tag sieht wie folgt aus: <input type=“number“ step=“1“> In diesem Beispiel erlaubt das Input Feld nur ganze Zahlen.
Method
Mit dem Ausdruck method=“…“ definierst du innerhalb eines Input-Feldes die Methode, die benutzt werden soll, um die Daten an den Server zu übermitteln. Also bspw. „post“ und „get“.
Onsubmit
Onsubmit gibt dir die Möglichkeit direkt eine Methode aufzurufen, die bspw. die Daten weiterverarbeiten kann. Du Attribut kannst du so schreiben: onsubmit=“function()“.
Type
Mit type wird definiert, welche Eingaben in ein Feld grundsätzlich erlaubt sind und welche nicht. In HTML gibt es nämlich auch einige Elemente, die dir einiges an Arbeit abnehmen. Hier findest du eine vollständige Liste zu allen HTML Input Types.
Der Type „submit“ hat eine kleine Sonderstellung unter den Attributen. Er ist dafür verantwortlich, dass die Werte an den Server übermittelt werden können. Außerdem besitzt er als Standard das Aussehen eines Buttons.
Value
Value definiert einen Wert, der in dem Input-Feld stehen soll, der zudem auch nicht veränderbar ist. Schreibt man bspw. <input type=“text“ value=“Vorname“> steht in diesem Feld der Text „Vorname“.
Name
Mit dem Name-Attribut innerhalb eines Input-Feldes definierst du den Namen des Input-Feldes, der später benötigt wird, wenn du mit Javascript oder PHP die Daten aus diesem speziellen Feld vom Client auf den Server übertragen möchtest.
Ein vollständiges Beispiel könnte nun so aussehen:
1 2 3 4 5 |
<form action“functions.php“> Vorname: <input type=“text“ name=“username“> Alter: <input type =“number“ name=“userage“> <input type = „submit“ value=“Abschicken“> </form> |
Absolute Basics: Links in HTML
Wenn du zum Webentwickler werden möchtest ist es unabdingbar, dass du dich mit Links auseinandersetzt. Das Web und vor allem Internetseiten wären ohne Links total aufgeschmissen. Das Schema ist für fast alle HTML-Elemente gleich. Ob Bild oder Text spielt hierbei keine Rolle.
Das a-Tag
Möchtest du einen Link als solches in HTML definieren wirst du das <a> </a> Tag benötigen. So teilst du deinem Browser mit, dass der folgende Text ein richtiger Link ist, der auch ohne jegliche anderen Elemente existieren kann.
Zwischen dem öffnenden und dem schließenden Tag kannst du einen kleinen Text definieren, der auf der Website angezeigt werden soll.
Das Href-Attribut
Damit dein Link auch ein Ziel hat (Ziel-Url), muss diese natürlich eindeutig definiert werden. Das href-Attribut gibt dabei an was geschieht, wenn man auf das Element klickt. In dem Fall ist es natürlich ein Link der zu einer beliebigen Url leitet. Im folgenden Beispiel siehst du wieder den Code und die zugehörige Ausgabe – probiere den Link und das Bild zu klicken.
|
Das hier ist ein ganz normaler Link, der ebenfalls mit dem Tag verknüpft wurde.
Melde dich jetzt zur Gründungsberatung an!
Statt einem Link kann das href-Attribut alternativ auch eine E-Mail-Adresse enthalten. Das href-Attribut wird umgeschrieben zu:
1 |
<a href="mailto:info@einstein1.net" target="blank">Sende uns eine E-Mail!</a> |
Die Ausgabe sieht wie folgt aus: Auch hier siehst du, dass du durch Klicken uns eine E-Mail schreiben kannst.
Das Target-Attribut
Mit dem Attribut target=“…“ kannst du dem Link mitteilen, wo er geöffnet werden soll. Ein gutes und weit verbreitetes Beispiel ist der Ausdruck „_blank“. Hiermit wird garantiert, dass der angeklickte Link in einem neuen Browsertab geöffnet wird. Mit target=“_blank“ öffnet sich also der in href angegebene Link in einem neuen Tab.
Fazit: Die Vertiefung deiner HTML-Grundlagen macht dich zum besseren Entwickler
Webprogrammierung baut auf der Struktur von HTML auf. Jetzt kannst du nicht nur simple Websites erstellen, sondern besitzt auch die Grundlagen für spätere Manipulation und Animationen dieser. Doch in der Webentwicklung gibt es noch deutlich mehr zu entdecken.
Mit CSS kannst du deine Website optisch anpassen und dadurch deutlich aufwerten. Auch Animationen und Hover-Effekte sind möglich. Webentwickler zu werden braucht etwas Zeit, jedoch wirst du schnell merken, wie Javascript, jQuery, CSS, PHP und HTML miteinander funktionieren.
Doch es gilt wie immer: wenn du die Basis und Grundlagen nicht beherrscht, wird der Rest umso schwieriger umzusetzen. Lerne die Tags und ihre Attribute kennen und setze dich mit ihren Möglichkeiten auseinander.
In diesem Sinne: Happy Coding!
George
Hallo. Ein wirklich leerreicher Artikel für HTML Einsteiger. Ich werde diese Homepage wohl öfter besuchen müssen, da Ihr zahlreiche Artikel habt, die mich interessieren. Ich selbst befasse mich mit Existenzgründungen und bin wirklich sehr begeistert von eurem Gründerblog.
Niko Emran
Hallo, besten Dank für die Blumen 🙂 Freut uns sehr, wenn der Bolg gefällt.
Andrea
Danke für die Insights. Man(n) lernt nie aus. Weiter so bitte. Read you soon.
Klara
Ich suchte nach einem HTML-Kurs, den ich wirklich gut verstehe. Vielen DAnk für die detaillierten Informationen. Den Artikel habe ich im Browser gespeichert. Haben Sie Materiallien zur CSS-Sprache?