HTML ist die Kurzform für „Hypertext Markup Language“ und wird benötigt, um eine Website zu erstellen. Er sogt dafür, dass der Browser die Informationen erhält, um die Seite anzuzeigen.
HTML ist über sog. Tags organisiert. Die Tags sogen für die richtige Struktur und ordnet dem Code eine Bedeutung zu. Die Abschnitte zwischen zwei Tags werden mit einem „<…>“ (dabei sind die Punkte der Tagname) angekündigt und mit einem „</…>“ wieder geschlossen. Zwischen dem „Start-Tag“ und dem „End-Tag“ ist dann der relevante Code (Inhalt) zu finden. Start- und End-Tag bilden zusammen ein sog. Tag-Paar; natürlich nur, wenn sie auch zueinander gehören. Zusammen mit dem Inhalt entsteht dann mit dem Start- und End-Tag ein Element. Start-Tags können Attribute wie z.B. type und id enthalten.
Zu den wichtigsten Tags zählen:
- <!DOCTYPE> definiert die den Typ des Dokuments und steht ganz oben
- <html> definiert ein HTML Dokument
- <head> enthält alle relevanten Informationen zur Website wie z.B. den Titel
- <title> steht zwischen dem eröffnenden und dem schließenden head-Tag; der Titel wird in der Regel am oberen Rand des Browserfensters angezeigt
- <body> definiert den Textkörper, dieser wird dann im Browserfenster dargestellt
- <h1> bis <h6> bietet die Möglichkeit sechs hierarchisch absteigender Überschriften
- <p> ist der Paragraph, hier wird der Text eingegeben
- <br> ist ein Break, fügt einen Zeilenumbruch ein
- <!– … –> definiert einen Kommentar in HTML
- <input> definiert einen Input
- <button> definiert einen Button
- <img> fügt Bilder ein (hier ist kein schließender Tag nötig)
- <a> definiert einen Hyperlink
- <style> definiert den Style-Tag mit Verweis auf eine .css-Datei
- <em> hebt eingeschlossenen Text hervor
Sehr einfach und von Vorteil ist die Tatsache, dass im Texteditor, mit welchem man die HTML-Datei bearbeitet, so viele Tabulatoren und Zeilenumbrüche eingefügt werden können, wie man möchte. Das bietet die Möglichkeit einer besseren Strukturierung und Lesbarkeit. Leerzeichen, Zeilenumbrüche und Tabulatoren werden bei der Ausführung des HTML-Codes nicht berücksichtigt.
Im Folgenden nochmal HTML-Befehle in der Übersicht, unterteilt in ihre jeweiligen Aufgaben
Text strukturieren
| <h1> … </h1> | Hauptüberschrift – sollte i.d.R. auf jeder einzelnen Seite vorkommen (engl. h = headline = Überschrift) |
| <h2> … </h2> bis <h6> … </h6> | Unterüberschriften – sollten i.d.R. in logischer Reihenfolge verwendet werden |
| <p> … </p> | Absatz – nach dem Absatz wird automatisch Platz gehalten (engl. p = paragraph = Absatz) |
| <br> | erzwungener Zeilenumbruch (Zeilenende) (engl. br = break = Umbruch) |
| <hr> | Trennlinie – trennt unterschiedliche Inhalte (engl. hr = horizontal ruler = horizontale Linie) |
Textstellen hervorheben
| <b> … </b> | Schrift wird fett angezeigt (engl. b = bold = fett) |
| <i> … </i> | Schrift wird kursiv angezeigt (engl. i = italic = kursiv, schräg) |
| <sup> … </sup> | hochgestellte Schrift, z.B. Fußnote2 (engl. sup = superscript, zu Deutsch hochstellen) |
| <sub> … </sub> | tiefgestellte Schrift, z.B. H2O (engl. sub = subscript, zu Deutsch tiefstellen) |
| <del> … </del> | durchstrichener Text, sprich Inhalt gilt nicht mehr (engl. del = deleted = gelöscht) |
| <ins> … </ins> | neuer Inhalt im Text (engl. ins = inserted = neu eingefügt) |
Links & Verweise
| <a href=“URL“>BESCHREIBUNG</a> | für interne und externe Links. „Beschreibung“ wird später im Browser als Link (blau unterstrichen) angezeigt und kann angeklickt werden. Die URL innerhalb des Attributs href wird aufgerufen. (engl. a = anchor = Anker) (engl. href = hyper reference = Hypertext-Referenz) |
| <a href=“index.htm„>STARTSEITE</a> <a href=“index.html„>STARTSEITE</a> | interner Link (als Endung kann sowohl .html wie auch .htm genutzt werden) |
| <a href=“https://www.google.de/„> …</a> | externer Link |
| <a href=“mailto:elena.w@bsp.de„>elena.w@bsp.de</a> | So kann eine E-Mail-Adresse eingegeben werden. Durch Anklicken öffnet sich ein E-Mail-Programm (sofern installiert) und die E-Mail-Adresse ist bereits eingegeben. (engl. mailto = sende E-Mail an) |
Aufzählungen
| <li>AUFZÄHLUNGSPUNKT</li> | Jeder einzelne Punkt bei einer Aufzählungen muss von diesem HTML-Befehl umschlossen werden. (engl. li = list item = Listeneintrag) |
| <ul> … </ul> | Art der Auflistung. Umschließt alle einzelnen <li> Wird für Aufbau der Seitennavigation benötigt und andere Aufzählungen (engl. ul = unordered list = unsortierte Liste) |
| <ol> … </ol> | Art der Auflistung. Umschließt alle einzelnen <li> Die einzelnen Listenpunkte bekommen dann entsprechende Nummerierung 1., 2., 3. usw. (engl. ol = ordered list = nummerierte Liste) |
Bereiche definieren
| <div id=“NAME“>BEREICH</div> | Über DIV wird ein Bereich definiert. Diesen Bereich kann man über CSS dann ein Design „überstülpen“. Angesprochen wird der Bereich über seinen ID-Namen. Bei DIV handelt es sich um ein Blockelement – das Blockelement nutzt die komplette Bildschirmbreite. (engl. div = division = Bereich, Gruppierung von Elementen) |
| <div class=“NAME“>BEREICH</div> | Der DIV-Bereich kann per CSS über seinen Klassen-Namen angesprochen werden. (engl. class = Klasse) |
| <span id=“NAME“>BEREICH</span> | Mit SPAN können Textstellen markiert werden und diese dann über CSS mit Design versehen werden. Das SPAN-Element ist ein Inline-Element, was den Unterschied zum DIV-Element ausmacht. (engl. span = Abgrenzung, Bereich) |
| <span class=“NAME“>BEREICH</span> | Kann über den Klassennamen und CSS mit Design versehen werden. |
CSS – Cascading Style Sheets
HTML-Code enthält bereits Informationen über die Struktur und das Aussehen des Website. Der Browser verwendet seinerseits einen integrierten Standardstil, um diese Struktur dann darzustellen. Allerdings bietet der Standardstil nur sehr eingeschränkte Möglichkeiten.
Mit CSS kann man beschreiben, wie der Inhalt dargestellt werden soll. CSS ist eine eigene Sprache, aber dadurch, dass sie eng mit HTML in Verbindung steht, ist sie in diesem Kapitel zu finden. Für CSS verwendet man den sog. Style-Tag, welcher auf eine .css-Datei verweist, aus welcher dann die Styleinformationen geladen werden. Der Style-Tag steht immer im Head des HTML-Codes. Im Code sieht das wie folgt aus:
<html>
<head>
<title>Style-Tag</title>
<style type="text/css"> <!--"type" ist ein Attribut, welches angibt, welche Art von Stil verwendet werden soll. Hier wird auf css verwiesen-->
<!--Hier können Stilregeln definiert werden-->
</style>
</head>
.........
</html>
Beispiel für Stilregeln:
<html>
<head>
<title>Style-Tag</title>
<style type="text/css">
body {
backgroud-color: #d2b48c;<!--verändert Hintergrundfarbe-->
margin-left: 20%;<!--Abstand linker Rand in %-->
margin-right: 20%;<!--Abstand rechter Rand in %-->
border: 1px dotted gray;<!--Grauer gepunkteter Rand-->
padding: 10px 10px 10px;<!--Abstand Text-Rahmen-->
font-family: sans-serif;<!--Text mit Serifen-->
}
</style>
</head>
.........
</html>
Links in HTML
Oben sind schon die wichtigsten Befehle für Verlinkungen aufgeführt. In diesem Kapitel werden Links näher behandelt.
Zunächst ist es sinnvoll zu wissen, was Hypertext (HTML) bedeutet. Hypertext ist die wichtigste Grundlage des Web, hiermit kann innerhalb von einer Seite auf eine andere verwiesen werden. Genutz hierfür wird der a-Tag.
Mit dem a-Tag wird ein Link auf eine andere Seite erstellt. Der Inhalt des a-Elementes dient als Beschriftung für den Link. Im Browser wird die Beschriftung meist blau unterstrichen dargestellt. Nachdem die Links eine Beschriftung haben, wird ein HTML-Code benötigt, welcher die Information enthält, wohin der Link führt. Mit dem href-Attribut wird das Ziel des Links angegeben.
Beispiel:
<a href=“elixir.html“>Elixire</a> <!-Elixire wird im Text blau unterstrichen dargestellt-->
Attribute
Kommen wir im diesen Zuge zu Attributen.
Mit Hilfe von Attributen können zusätzliche Informationen zu einem Element hinzugefügt werden.
Zum Beispiel:
- <style type=“text/css“>
Das type-Attribut gibt an, welche Sprache für den Stil verwendet wird, in diesem Fall CSS - <a href=“elixir.html“>
Das href-Attribut zeigt wie bereits erwähnt das Ziel eines Hyperlinks an - <img src=“blaubeersaft.png“>
Der Dateiname des Bildes, das für ein <img>-Tag angezeigt werden soll, wird im scr-Attribut angegeben
Ordnerstrukturen, Pfade und Verlinkungen
Die Beispiele oben referenzieren immer nur auf Dateien, wie im selben Ordner wie der HTML-Code gespeichert sind. In der Vorlesung haben wir für die KopfÜBar Unterordner für eine bessere Organisation erstellt. Die betroffenen Dateien liegen nun nicht mehr im selben Ordner sondern in einem „Parallelordner“. Nun muss von der HTML-Datei auf die Quelldateien über einen relativen Pfad zugegriffen werden. Dieser Pfad wird im href-Attribut hinterlegt.
Verlinken in einen Unterordner
Im folgeden nochmal unsere gewählte Ordnerstruktur:
Um also von „bar.html“ zu „elixir.html“ zu kommen, muss man zuerst in den Ordner „getraenke“.
Der neue Attributwert sieht dann wie folgt aus:
Verlinken in einen übergeordneten Ordner
Um in den übergeordneten Ordner zu gelangen geht man wie folgt vor:
Will man also in der Ordnerstruktur nach unten, gibt man den Ordnernamen und nach einem Schrägstrich den Dateinamen an.
Will man in der Struktur nach oben, gibt man „ .. “ und nach einem Schrägstrich den Dateinamen an. „ .. “ bedeutet in der Browsersprache also „ein Verzeichnis höher“. Möchte man z.B. zwei Verzeichnisse höher, würde man „../../dateiname.html“ schreiben.
ePortfolio Webprogrammierung 