Ich lern Programmieren: 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.

Dienstag, 22. Oktober 2013

Die ersten Schritte: Warum HTML? Was ist HTML?

Warum lerne ich HTML? Ich denke und hoffe, dass es ein guter Einstieg ist. Nachdem ich schon mal einen anderen Kurs angefangen hatte, der mir dann aber sehr schnell zu Abstrakt wurde, bin ich mit "Web Fundamentals" bisher ganz zufrieden. Das Niveau steigert sich nach und nach uns so kommt man gut mit und bleibt motiviert. Hier nun was ich ich bisher gelernt habe:

Jede Seite im Netz die man sich anschaut ist in HTML geschrieben. HTML ist kurz für "HyperText Markup Language". Ein Hypertext ist ein Text mit einem Link. Wenn man also irgendwo im Netz auf eine Wort klickt und man danach auf einer anderen Seite landet, hat man einen Hypertext angeklickt. HTML bildet sowas wie das Skelett der Internetseite, gibt ihr die Struktur. Wie jede Sprache verfügt auch HTML über eine eigene Syntax (= Regeln für die Kommunikation). Eine "markup language" ist eine Programmiersprache die dafür sorgt, dass es auf der Internetseite nicht nur Text zu sehen gibt, sonder auch Bilder, Links, Listen und vieles mehr.

HTML code kann man eigentlich in jedem einfachen Textprogramm schreiben. Am besten eignet sich auf Windows der Text Editor, der auf jeden Windows Rechner unter Zubehör zu finden ist. Für Mac-Nutzer HIER eine Liste mit unterschiedlichen Texteditoren. Da ich zur Zeit selber keinen Mac habe, kann ich leider nicht sagen, welcher davon nun der beste ist.

Hallo Browser! Ich bin ein HTML Dokument.

Wenn man einem HTML Code anfängt sollte man immer <!DOCTYPE html> in die erste Zeile setzen. Dadurch weiß der Browser dann später, dass es sich bei dem Code um HTML handelt. In die nächste Zeile kommt dann <html> und in die unterste Zeile </html>. Ersteres zeigt den Beginn des HTML Dokuments an und letzteres das Ende. Alles was innerhalb von diesen Klammern <> steht, nennt man "tag". Dabei muss man beachten, dass es immer einen Tag am Anfang gibt und einen der am Ende steht, wie zum Beispiel im Bild oben (<html> und </html>). Diese Tags kommen immer in Paaren vor. Wo also einer aufgemacht wurde, muss er auch wieder geschlossen werden.

Montag, 21. Oktober 2013

Und los gehts...

Aller Anfang ist in diesen Fall nicht besonders schwer.

Vorgehabt, hatte ich es ja schon Ewigkeiten. Sogar ein Buch hatte ich mir gekauft. Ebenso vor Ewigkeiten. Reingeguckt habe ich dann nie wirklich, weil es einfach unsagbar langweilig und schlecht geschrieben war. Mittlerweile gibt es ja diverse Seiten, auf denen man das ganze umsonst und online lernen kann. Ein Vorteil: man kann das gelernte direkt praktisch erproben. Daher wage ich nun einen erneuten Versuch. Ich werde jetzt erstmal mit folgendem Kurs anfangen: Web Fundamentals (auf der Seite Codeacademy). Das scheint mir für Anfänger, wie ich einer bin, der passende Kurs zu sein. Wenn alles so läuft, wie ich es mir vorgenommen habe, möchte ich im nächsten Jahr zumindest einen Einblick in die (für mich noch gerade so erscheinende) Zauberwelt HTML und Programmieren haben.

Wer auch Interesse an einem Code Year hat, dem empfehle ich diese Seite. Dort kann man sich auf nette Art und Weise selber verpflichten: http://www.codeyear.com

Ich lern Programmieren

Seiten