Ich lern Programmieren: November 2013

Freitag, 15. November 2013

HTML: ungeordnete Listen und Listen innerhalb von Listen

Manchmal möchte man ja gerne eine Liste haben, in der die einzelnen Punkte nur aufgezählt werden, ohne dass sie in einer bestimmten Reihenfolge stehen. Dafür gibt es das <ul> (=unordered list) Tag. Der Rest funktioniert wie beim erstellen einer geordneten Liste und das Ergebnis sieht dann so aus:

Äpfel
Birnen
Gurken
...

Hier eine ungeordnete Liste innerhalb einer geordnete Liste.

Möchte man eine Liste erstellen, die innerhalb einer Liste ist und damit das Ergebnis dann so aussieht...

Autos aus Deutschland

VW
Porsche

Autos aus Japan

Toyota
Mitsubishi

..., muss man wie folgt vorgehen: Innerhalb der geordneten Liste, die wir mit <ol> geöffnet und mit </ol> geschlossen haben, öffnen wir einfach eine <ul> ungeordnete Liste und schließen diese dann wieder mit einem </ul>. Das Prinzip bleibt dabei immer das gleiche. Man muss nur aufpassen, dass man die Listen auch immer wieder schließt. Das habe ich bei meinen ersten Versuchen gerne vergessen.

HTML: Einrücken für einen ordentlichen Überblück und geordnete Listen

<ol> steht für eine geordnete Liste.

Um einen übersichtlichen Code zu haben, rückt man für gewöhnlich die Tags, die in anderen Tags stehen (siehe oben die <li> Listenpunkte innerhalb der <ol> geordneten Liste) ein Stück ein.

Um eine geordnete Liste zu erstellen müssen wir zuerst einen <ol> (=ordered list) Tag erstellen (siehe Zeile 8 im Screenshot). Darin eingerückt werden dann pro Zeile die einzelnen Punkte auf der Liste mit einem <li> Tag eröffnet und mit einem </li> wieder jeweils geschlossen. Ist die Liste fertig müssen wir noch die Liste mit einem </ol> Tag schließen und fertig ist eine Liste, die dann in etwas so aussehen sollte:

Erste Punkt auf der Liste
Zweiter Punkt auf der Liste
Dritter Punkt auf der Liste
...

HTML: Absätze und Überschriften

Um einen Absatz innerhalb des <body> Tags zu setzen müssen wir einfach einen <p> am Anfang des Paragraphen und ein </p> zum abschließen des Paragraphen setzen.

Überschriften können wir nach dem gleichen Prinzip setzen. Am Beginn der Überschrift setzen wir ein <h1> und am Ende ein </h1> Tag. Es gibt insgesamt 6 verschieden Überschriftengrößen wobei <h1> die größte und <h6> die kleinste ist.

Montag, 11. November 2013

Bilder und Links einfügen

Bilder einfügen
Um ein Bild zu einer Internetseite hinzuzufügen benutzt man ein sogenanntes "image tag", das so aussieht: <img>. Direkt hinter dem "img" schreibt man (nach einer Leerstelle) "src" (=source/ Quelle) und gibt dann die Internetadresse von dem Bild an. Das Image Tag schließt sich selber und braucht kein zweites Tag, um es zu schließen. Am Ende sollte es dann so aussehen:

<img src="url" />

Die Web-Adresse oder URL (= Uniform Resource Locator) sagt dem <img> Tag wo es das entsprechende Bild finden kann. Jedes Bild was man im Internet sieht, hat seine eigene Web-Adresse.

Links einfügen

Man kann einzelne Wörter als Link markieren oder einen ganzen Text oder auch ein Bild. Ähnlich wie beim <img> Tag, sagt das <a> Tag dem Browser zu welcher Seite verlinkt werden soll. So würde man zum Beispiel den Text "André lernt Programmieren" auf die Adresse von diesem Blog wie folgt verlinken:

<a href="http://andrelerntprogrammieren.blogspot.de">André lernt Programmieren</a>

"href" seht dabei für "hypertext reference", sagt also dem Browser zu welcher Seite verlinkt werden soll.

Ich lern Programmieren

Seiten