Schriften - How to Internet

howtointer.net
BEGINNER ADVANCED EXPERT DEVELOPER

Schriften

Nun werden wir anfangen unseren ersten Inhalt zu verfassen und dir daher die wichtigsten HTML Tags vorstellen.

Schriften

Als erstes betrachten wir uns, das tag für die Schrift.

<p> </p>

Das p steht hierbei für "Print" (drucken). Aber da Informatiker faul sind und nicht immer das ganze Wort schreiben wollen, hat man sich auf den Anfangsbuchstaben beschränkt.

Wenn wir nun unsere erste Nachricht verfassen wollen müssen wir diese einfach zwischen die beiden Tags schreiben.

<p> Aller Anfang ist schwer... </p>

Um daraus jetzt unsere erste Webseite zu erstellen, nehmen wir das HTML Grundgerüst und setzten unsere Nachricht in den body (da kommt schließlich der Inhalt rein). Der ganze Code sieht also so aus:

See the Pen EKXKeK by Marcel Deuter (@howtointernet) on CodePen.

Dies ist tatsächlich nicht mehr, als eine komplett leere Seite mit unseren Inhalt, welcher komplett oben links erscheint.

Wenn wir jetzt weiteren Text in eine neue Zeile schreiben wollen, reicht es leider nicht einfach nur die Enter-Taste im Code-Editor zu drücken. Stattdessen müssen wir das <br> (break) Tag benutzen. Dieses hat übrigens kein Closing-Tag, sodass wir es nur einmal setzen müssen.

Desweiteren können wir unseren Text mit <i> kursiv </i> und mit <b> fett </b> anzeigen lassen.

Wir halten also fest:

Schriften

Anzeige Code Kommentar
Normal <p>
Fett <b> Alternativ: <strong>
Kursiv <i>
Unterstrichen <u>
Zeilenumbruch <br> Kein Closing-Tag!

Überschriften

Wie du sehen kannst, ist der aktuelle Text ziemlich klein und sobald er etwas länger wird, schadet es sicher nicht etwas Struktur reinzubringen. Dies geht am besten mit Überschriften.

HTML hat dazu natürlich auch ein eigenes Tag, welches <h> heißt und in 5 verschiedenen Größen vorhanden ist.

<h1> Überschrift </h1>

h1 ist die größte Überschrift, dann h2, h3, h4 und h5. Wir setzen, dass nun einfach mal um: (Der Einfachheit halber lasse ich das Grundgerüst nun weg)

See the Pen qZjbye by Marcel Deuter (@howtointernet) on CodePen.

Anmerkung:

Weil der Code zurzeit so einfach ist und wir viele kleinere Änderungen machen werden, ist jetzt sicherlich der richtige Zeitpunkt um auf eine Online-Code Editor wie Mozilla Thimble oder Codepen.io umzusteigen. Damit können wir uns den Umweg über das speichern der Datei und den Browser sparen und bekommen unser Webseite direkt angezeigt.

Praktischerweise zeigen uns diese bei der Eingabe unserer Tags auch alle möglichen Vorschläge an und setzt automatisch das Closing-Tag.

Codepen.io wird eher von Entwicklern genutzt, welche dort ihre Code-Snippets veröffentlichen um sie mit anderen zu teilen. Thimble dagegen ist eher für Anfänger gedacht. Dort werden auch tolle Projekte zum erlernen von HTML und CSS angeboten.