Was ist HTML?
Du brauchst HTML, wenn du im Netz Webseiten gestalten möchtest. Es ist sehr einfach zu erlernen. Die Abkürzung steht für Hypertext Markup Language. Das ist eine textbasierte Auszeichnungssprache zur Strukturierung von Inhalten wie z.B. Text, Bilder, Videos und Links auf Webseiten. Anhand der HTML-Dokumente können Browser die Inhalte darstellen. Wenn du wissen willst, wie das HTML-Dokument aussieht, das hinter einer Website steckt, dann kannst du mal Folgendes probieren: Öffne die Seite im Browser. Durch einen Rechtsklick mit der Maus kannst du ein Menü aufrufen. Hier wählst du „Seitenquelltext anzeigen“ aus.
Der Seitenquelltext
Die Inhalte in dem Seitenquelltext unterscheiden sich von Webseite zu Webseite. Der Aufbau ist jedoch stets einheitlich. Am Anfang steht die verwendete Version und dass es sich um ein HTML-Dokument handelt. Darauf folgen dann Beschreibungen der Seite, sogenannte Metadaten, die beispielsweise Hinweise auf die Verantwortlichen der Seite enthalten können. Danach werden dann die Inhalte der Seite wiedergegeben.
Was ist CSS und wozu braucht man es?
Um HTML-Seiten ein gewisses Aussehen zu geben, wird die Zutat CSS benötigt.
CSS steht für Cascading Stylesheet und ist eine beschreibende Ergänzungssprache. CSS verbindet sich nahtlos mit HMTL und hilft dir, Inhalte zu formatieren und Webseiten zu gestalten. Es erlaubt dir, wichtige Bereiche wie Überschriften, Texte, Tabellen, Hintergründe und vieles mehr optisch sowie in der Ausrichtung zu verändern. Diese CSS-Anweisungen können dabei in einer extra Datei ausgelagert werden oder aber auch in das HTML-Dokument abgelegt werden.
Erste HTML-Befehle
Damit bei den Texten immer klar ist, was wie dargestellt werden soll (also z.B. ob ein Text eine Überschrift ist oder als normaler Text verwendet werden soll), gibt es verschiedene Kommandos, die vor dem eingegeben Text genannt werden und dann nach dem Text durch ein „/“ und die Wiederholung des Kommandos beendet werden. Um dir einen ersten Eindruck von HTML zu geben, haben wir hier ein paar wichtige Kommandos für dich aufgelistet:
- <div>Der Grundbaustein</div>
Das div-Tag ist nahezu der Grundbaustein für alle weiteren HTML-Kommandos. Denn alles, was auf die Seite soll, muss in einen div-Container gepackt werden. Dabei ist die Anzahl der div-Container völlig dir überlassen. Diese div-Container kannst du dann später mit CSS optisch anpassen und ausrichten. - <h1>Überschrift</h1>
h1 sagt aus, dass der Text eine Hauptüberschrift sein soll. Wenn du weitere (untergeordnete) Überschriften einfügen möchtest, musst du einfach nur bei den nächsten Überschriften h2, h3 und so weiter verwenden. - <p>Dein Textabsatz</p>
Um Texte einbauen zu können, muss das Paragraph-Tag <p>…</p> benutzt werden. Mit dem kannst du wunderbar einfach deine Texte in div-Containern ablegen und später mit CSS anpassen. - <a href=“Link“>Wort, das verlinkt werden soll</a>
a besagt, dass es sich hier um einen Link handelt. Der Text, der vor dem </a> steht, ist der, den du auf Webseiten anklicken kannst. - <img src=“Name der Bilddatei“ alt=“Kurzbeschreibung“>
Hierbei handelt es sich um ein Bild, das auf der Seite eingebunden ist. Hinter dem „alt=“ sollte immer eine kurze Beschreibung des Bildes stehen, da so auch sehbehinderte Personen die Inhalte des Bildes verstehen können.