Was ist eine Website
Eine Website zu schreiben ist grundlegend sehr einfach. Wenn man in eine Textdatei etwas Schreibt und in einen beliebigen Browser öffnet, dann ist es schon eine Website. Um es professioneller und anschaulicher zu machen, gibt es HTML. Mit HTML lässt sich eine Website Sortieren und Designen. Später wurde das recht umständliche Designen mit html (z.B. bei Farben) mit CSS ersetzt. Mit Javascript kam auch die Logik hinter einer Website hinzu (Bspw. die Aktionen bei Buttons). In HTML wurde das Grundgerüst als Grundaufbau des HTML Quellcodes implementiert. Dieser Aufbau ist bei allen Webseiten vorhanden und ist für viele Programmierer eine Art Orientierungspunkt für die Abschnitte einer Website
Das Grundgerüst von HTML
Das Grundgerüst sieht wie volgt aus:
<html>
<body>
<head>
<title>Eine coole Website</title>
</head>
<body>
<h1>Hallo</h1>
</body>
</html>
- Der html-Tag ist der Tag, womit die Website beginnt und womit sie endet
- Der Bereich im head-Tag ist für alles Logische der Website gedacht. Darin kommt z.B. CSS- oder Javascript Code. Außerdem kommen dort auch Metadaten der Website hinein.
- Der body-Tag umfasst den Bereich, welcher für die ganzen Elemente einer Website vorgesehen ist. Darin kommen z.B. Tabellen, Texte oder Listen.
- der title-Tag ist Bestandteil des Heads der Website. Dieser Tag sorgt für die Bennenung der Website. Der Text wird z.B. im Tab eines Browsers angezeigt.
- Der h1-Tag ist einer von 6 Tags. Dies ist ein Tag für Überschriften. Dabei ist h1 die größte Schriftgröße und h6 die kleinste.
Die Grundelemente für die Gestaltung von Text
Es gibt ein paar HTML Tags, welche sehr nützliche für die Gestaltung von Text sind.
Webseiten verlinken
Webseiten lassen sich mit <a href="http://website.de/"></a> verlinken. Wenn man ein Bild als
Linkbereich haben will, setzt man den <img>-Tag in den Textbereich des <a>-Tags.
Das
sieht anschließend so aus: <a href=" "><img src=" "></a>
Tabelle erstellen
In einer Tabelle kann man Daten Anschaulich in HTML angeben. Der Quelltext sieht wie folgt aus:
<table>
<tr>
<th<Schüler</th>
<th<Klasse</th>
<th<Lehrer</th>
</tr>
<tr>
<td<Max Bauer</td>
<td<11. Klasse</td>
<td<Frau Schmidt</td>
</tr>
<tr>
<td<Lisa Müller</td>
<td<10. Klasse</td>
<td<Herr Jahn</td>
</tr>
<tr>
<td<Moritz Holl</td>
<td<12. Klasse</td>
<td<Herr Schulze</td>
</tr>
<tr>
<td<Kai Ignatz</td>
<td<11. Klasse</td>
<td<Frau Naumann</td>
</tr>
</table>
Eine Tabelle wird im Quelltext in die einzelnen Zeilen gespalten.
-
Der <table>-Tag definiert die Tabelle im Quelltext
-
Der <tr>-Tag gibt eine neue Zeile der Tabelle an
-
Der <th>-Tag ist für Überschriften gedacht. Er wird z.B. für die Kopfzeile verwendet. Die Menge der Tags in einer Zeile bestimmt die Anzahl der Spalten. (siehe Beispiel)
-
Der <td>-Tag wird für die Daten verwendet. Die Menge der Tags in einer Zeile bestimmt die Anzahl der Spalten. (siehe Beispiel)
Listen mit HTML erstellen
Eine Liste besteht aus einem Element, welches die Art der Liste angibt und einem Element, welches Die einzelnen Punkte der Liste angibt.
<li>Ich bin Info 1</li>
<li>Ich bin Info 2</li>
</ul>
<ol>
<li>Ich bin die erste Info</li>
<li>Ich bin die zweite Info</li>
</ol>
-
Der <ul>-Tag definiert in HTML eine ungeordnete Liste. Das bedeutet, dass die einzelnen Punkte der Liste standartmäßig mit einem Punkt am Anfang stehen.
-
Der <ol>-Tag definiert in HTML eine geordnete Liste. Das bedeutet, dass die einzelnen Punkte der Sortierung im Quelltext nach von standartmäßig von 1 bis Unendlich gehen.
-
Der <li>-Tag definiert in HTML einen neuen Punkt einer Liste
Das Aussehen der Liste kann mit Hilfe von CSS angepasst werden.
DIV Container verstehen
DIV Container sind Blockelemente. Diese lassen sich mit CSS in verschiedenen Positionen anpassen.
Man kann sie für die Sortierung von Elementen anwenden. Beispiel dafür wäre ein DIV COntainer, in dem Codebeispiele enthalten sind oder man teilt einzelne Abschnitte der Webseite in DIV Container