Wenn man Zeilenumbrüche im HTML-Dokument macht, werden diese nicht automatisch auch auf der Webseite gemacht. Dafür braucht man einen extra Tag am Ende der Zeile:
<p>
Zeile 1<br>
Zeile 2<br>
Zeile 3<br>
</p>
Aufbau eines Tags
Das folgende Bild zeigt den Aufbau eines HTML-Tags:
Quelle: KhanAcademy
Text formatieren
Um einen Text hervorzuheben oder kursiv zu stellen, gibt es zwei Tags, die man um die Wörter herumschreibt:
<p>Dieses Wort ist <strong>dick</strong> und dieses <em>kursiv</em>.</p>
Listen
Es gibt numerierte und unnumerierte Listen:
<ol>
<li>Listenpunkt in einer nummerierten Liste</li>
<li>Listenpunkt in einer nummerierten Liste</li>
</ol>
<ul>
<li>Listenpunkt in einer unnummerierten Liste</li>
<li>Listenpunkt in einer unnummerierten Liste</li>
</ul>
Bilder
Auch Bilder können auf einer Webseite eingebunden werden. Wenn das Bild sich auf einer anderen Webseite des Internets befindet wird die URL des Bildes eingefügt:
Das alt-Attribut legt einen Bildtitel fest, der angezeigt wird falls, das Bild gelöscht wurde oder für Leute, die nicht sehen können. Es ist also, wichtig immer ein Alt-Attribut festzulegen, damit jeder deine Webseite versteht. Das width-Attribut left die Breite des Bildes fest. Hier kann mit Pixeln (500px) oder mit Prozentzahlen (50%) gearbeitet werden.
Wenn Bilder in dem selben Ordner, wie die HTML-Datei liegen, kann das Bild auch so eingefügt werden:
CSS ist eine Programmiersprache, die genutzt wird, um das Aussehen der Webseite zu verändern. Die Style-Informationen werden standardmäßig im Style-Tag des Headers eingefügt.
Um alle Elemente desselben Tags zu verwenden, wird der Name des Tags verwendet:
p {
color: blue;
}
ID's
ID's werden verwendet, um ein bestimmtes Element anzusprechen. Diese werden folgenderweiße festgelegt:
<p id="großer-text">...</p>
In CSS werden ID's mit einer vorgestellten Raute angesprochen:
#großer-text {
color: red;
}
Klassen
Wenn man mehrere Elemente ansprechen möchte, können Klassen verwendet werden. Dabei wird jedes Element folgendermaßen angesprochen:
Um Klassen in CSS anzusprechen werden vorangestellte Punkte verwendet:
.kleine-texte {
color: green;
}
Farben
Mit folgendem Tag kann die Farbe der Schrift verändert werden:
p {
color: orange;
}
Auch die Hintergrundfarbe von Schrift kann verändert werden:
p {
background-color: blue;
}
Wenn man die Hintergrundfarbe der ganzen Webseite verändern möchte, gibt man body (hier: anstelle von p) als Element an.
Wenn man nicht nur die wenigen Standardfarben (wie red, blue, green, orange ...) verwenden will, kann man auch den RGB-Farbecode verwenden. Auf dieser Webseite findet man ein Tool um den Farbcode von anderen Farben herauszufinden:
p {
rgb(193, 66, 66)
}
Weitere HTML Tags
Links
Um andere Webseiten zu verlinken, wird der a-Tag verwendet:
<a href="http://wikipedia.org">Wikipedia</>
Wenn man möchte kann man auch auch auf eine andere HTML-Datei verlinken, die sich im selben Ordner befindet:
<a href="über-mich.html">Über mich</a>
Außerdem ist es auch möglich, dass man zu einer anderen ID im selben Dokument springt
<a href="#großer-text">Springe zu großer Text</a>
Kommentare
Kommentare sind sehr sinnvoll, um das Dokument zu gliedern und weitere Angaben für Teamkollegen zu machen. Sie werden vom Browser ignoriert und nicht auf der Webseite angezeigt
<!-- Hier steht der Kommentar -->
Tabellen
Tabellen können sinnvoll sein, um Informationen übersichtlich darzustellen:
<table>:
<tr>
<td<>Inhalt</td>
</tr>
</table>
Das folgende Bild erklärt die Wirkung einer Tabelle:
Quelle: selfhtml
Text formatieren mit CSS
Schriftart
Mit CSS kann man alle Schriftarten, die auf dem Computer installiert sind verwenden. Es sollten mehrere Schriftarten angegeben werden, damit falls eine Schriftart nicht geladen werden, noch eine Schriftart, auf die dann zurückgegriffen werden kann vorhanden ist:
p {
font-family: "Arial", sans-serif;
}
Außerdem kann man aber auch noch externe Schriftarten von Google Fonts verwenden. Dafür muss die Schriftart noch im Head-Bereich importiert werden:
Wenn ihr mit der rechten Maustaste auf eine Webseite klickt, findet ihr den Punkt "Element untersuchen". Hier seht ihr den HTML-Code der Webseite und auch unter "Style Editor" auch die CSS-Regeln. Dies kann nützlich sein, um herauszufinden, wie ein Freund (oder jemand anderes) seine Webseite erstellt hat.
Fehler-Suche
Auf dieser Webseite könnt ihr eure Webseite auf Richtigkeit überprüfen.
Container
Was ist ein Container?
Ein Kontainer dient zur Gliederung und Gruppierung von verschiedenen Elementen (z. B. Überschrift, Text oder Bild) auf einer Webseite.
Sinnvoll wäre es zum Beispiel, wenn man einen Container für den Header-Teil, einen für den Hauptteil und einen für den Footer-Teil erstellt.
Container können auch ineinander verschachtelt sein. So kann man zum Beispiel den Hauptteil in einzelne Abschnitte einteilen:
<div id="meincontainer">
<p>...</p>
<img>
</div>
Container formatieren
Für einen Container kann man zum Beispiel die Hintergrundfarbe verändern:
#meincontainer {
background-color: green;
}
Außerdem kann man auch alle anderen CSS-Tags verwenden: Zum Beispiel die Schriftart:
#meincontainer {
font-family: sans-serif;
}
Größe von Containern
Mit folgenden CSS-Tags, kann man die Breite (width) und die Höhe (height) eines Containers festlegen:
#meincontainer {
width: 100px;
height: 50px;
}
Die Breite kann man nicht nur in Pixeln, sondern auch in Prozent angeben:
#meincontainer {
width: 50%;
}
Wenn man hier 50% auswählt, hat der Container genau die Hälfte des Fensters.
Abstand zur Kante
Wenn man den Inhalt des Containers nicht direkt an den Rand pressen möchte, kann man einen Innenabstand (padding) festlegen:
#meincontainer {
padding: 5px;;
}
Aber auch den Abstand vom Rand zum nächsten Container kann man festlegen. Das ist dann der Außenabstand (margin):
#meincontainer {
margin: 10px;
}
Quelle: selfhtml
Weiteres
Externe Stylesheets einbinden
Oft kann ist es sinnvoll, die CSS-Information in eine externe Datei zu verschieben. Wenn wir jetzt zum Beispiel mehrere Unterseiten haben, die alle gleich aussehen sollen, müssen wie die CSS-Information nicht in jede einzelne Datei schreiben.
Dafür erstellen wir eine neue Datei mit dem Namen style.css im gleichen Ordner, wie auch unsere Webseite liegt. Alles, was zwischen den beiden <style>-Tags liegt verschieben wir jetzt in diese Datei.
Nun müssen wir in unsere HTML-Datei noch folgende Zeile in den <head>-Bereich einfügen:
