learn to code

Tutorial:




Impressum
Datenschutzerklärung

Einführung

Herzlich willkommen auf learntocode.de! Auf dieser Seite kannst du lernen, wie Webseiten von Grund auf erstellt werden. Die hier gebotenen Tutorials sind speziell auf Einsteiger zugeschnitten und umfassen die wichtigsten Grundlagen zu PHP, HTML, CSS, SQL und demnächst auch JavaScript. Es werden keine Vorkenntnisse im Programmieren vorausgesetzt.

Die Autoren sind ein erfahrener Webentwickler und eine absolute Einsteigerin. Somit wird dir fundiertes Fachwissen aus der Sicht eines Beginners verständlich näher gebracht. Dieses Projekt ist während der Einarbeitung in die verschiedenen Themen entstanden. Durch diese einmalige Sichtweise werden häufige Hürden, die für erfahrene Entwickler trivial sind, anschaulich erklärt und die Zusammenhänge der verschiedenen Themenbereiche und deren Nutzen näher gebracht.

Am Ende dieser Tutorials wirst du das nötige Wissen haben, eigene Projekte von Grund auf zu erstellen: von der Programmierung über die Einrichtung von Webservern bis zum Stylen deiner eigenen Website und einer Datenbankanbindung.


Im folgenden wird das Zusammenspiel der verschiedenen Technologien besprochen, die zur Erstellung einer Webseite relevant sind. Genauere Ausführungen zu den einzelnen Themenbereichen finden sich in den nachfolgenden Kapiteln.

Eine Information am Rande: Zur besseren Verständlichkeit werden Codebeispiele in den Tutorials farblich hinterlegt. Code für HTML wird grün, CSS wird orange und PHP wird blau hinterlegt. Bei längeren Erklärung mit vielen Teilschritten wird am Ende der Seite der gesamte Code erneut aufgeführt.


HTML

Wenn eine Webseite im Browser geöffnet wird, ruft der Computer ein Dokument von einem Server ab. Dieses besteht in der Regel aus reinem Text. Dieser Text wird vom Browser interpretiert und anschließend dem Benutzer angezeigt.

Die einzelnen Inhalte der Seite, wie Überschriften, Textblöcke oder eingefügte Bilder werden hierbei in Blöcken strukturiert. Einzelne Blöcke können wiederum andere Blöcke behinhalten, wodurch sich die Struktur der Webseite zusammensetzt.

Hier ist die Grundstruktur einer beispielhaften Webseite. Genauere Erläuterungen zum Aufbau und den einzelnen Elementen werden in dem Kapitel über HTML angeführt.

<!DOCTYPE html> <html> <head> <title>Hello World</title> </head> <body> <h1>Überschrift</h1> <p>Textblock</p> </body> </html>

Beispiel anzeigen

Nebenbei kann man sich den Quelltext (HTML-Code) jeder Webseite angucken, indem man einen Rechtsklick auf die Seite macht und "Seitenquelltext anzeigen" o.ä. auswählt. Alternativ auch über die Tastenkombination Strg+U.


CSS

Wirklich schön ist reines HTML jedoch nicht. Es definiert lediglich die Struktur einer Webseite. Um das Layout anzupassen und die Schrift zu formatieren kommt CSS zum Einsatz. Es kann z.B. die Farbe, Größe, Form und Positionierung einzelner Elemente näher bestimmen.

Kurze Beispiele für CSS Befehle sind die folgenden, welche den Hintergrund gelb und alle Überschriften rot einfärben. Wirklich schön ist das Ergebnis jetzt zwar immer noch nicht, aber die einfache Handhabung wird hoffentlich durch das Beispiel ersichtlich.

body { cover: yellow; } h1 { color: red; }

Beispiel anzeigen

Üblicherweise werden die CSS Befehle in eine seperate Datei geschrieben und eingebunden, können jedoch auch direkt im HTML eingebettet werden. Beispiele zu der genauen Verwendung und den einzelnen Befehlen folgen in dem Kapitel über CSS.


PHP

Bisher weißt du ganz grob wie statische Webseiten mit HTML erstellt werden. Statisch bedeutet hierbei, dass diese immer gleich aussehen werden. Das Gegenstück hierzu sind dynamische Webseiten, welche bei jedem Aufruf neu generiert werden. Sie können z.B. eingeloggten Nutzern private Informationen anzeigen oder auf Formulareingaben reagieren.

Hierzu kommen Webserver zum Einsatz, welche Anfragen entgegennehmen, dynamischen Code ausführen und personalisierten HTML-Code zurückschicken. Genauere Informationen zum Webserver gibt es auf der nächsten Tutorial-Seite.

PHP ist die zu diesem Zweck am meisten verwendete Skriptsprache. Mit ihr wird dynamisch HTML-Code generiert. Hierbei können PHP und HTML in einem Dokument kombiniert werden. Das folgende Beispiel gibt die aktuelle Uhrzeit zurück.

<?php echo date('G:i'); ?> Uhr

Beispiel anzeigen

Die aktuelle Uhrzeit wird mit PHP ermittelt und das Ergebnis als HTML an den Browser zurück gesendet. Das eigentliche PHP-Coding bleibt für den Benutzer der Seite verborgen. Für den Browser sieht die Antwort folgendermaßen aus:

19:47 Uhr

Bevor jedoch tiefer in PHP und die Programmierung eingestiegen wird, empfehlen wir, dich vertrauter mit HTML und CSS zu machen. Diese Einführung sollte nur einen kurzen Einblick in die wichtigsten Technologien bieten. JavaScript und SQL werden zu einem späteren Zeitpunkt im Verlauf des Tutorials eingeführt.


Allgemeines

Viele Wege führen nach Rom und gleiches gilt auch für die Programmierung! Wenn du eigene Ideen bzw. Ansätze hast, verfolge diese immer weiter und sei experimentierfreudig. Gerne bauen wir auch deine Anregungen in dieses Tutorial mit ein.

Wir wünschen dir viel Spaß und Erfolg bei dem Tutorial und hoffen, dir die nötigen Kenntnisse verständlich vermitteln zu können. Weiter geht es mit der Einrichtung des lokalen Webservers, um mit der Erstellung von Webseiten loslegen zu können.


Vorbereitung >