Einführung: Grundlagen der Webentwicklung
Was ist Webentwicklung?
Bei Webentwicklung geht es darum, ein Programm zu erschaffen, welches im Internet (Web) aufrufbar und bedienbar ist. Dies kann beispielsweise ein Onlineshop, eine Webseite oder ein Tool sein. Bei der Webentwicklung können sehr verschiedene Techniken zum Einsatz kommen. In diesem Beitrag bekommst Du eine grobe Einführung in das Thema sowie einen kurzen Überblick über verschiedene Programmiersprachen, Techniken und was Du noch wissen musst.
Grundgerüst in HTML
Das Grundgerüst einer jeden Web-Applikation besteht aus HTML (Hypertext Markup Language). HTML ist eine Auszeichnungssprache auf Textbasis. Sie dient zur Strukturierung digitaler Dokumente und Webseiten und enthält verschiedene Komponenten wie Blöcke, Bilder, Fließtext, Tabellen oder Hyperlinks. Du kannst dir das HTML-Gerüst einer Webseite wie das menschliche Skelett vorstellen: Es hält alles zusammen. Eine vollständige Dokumentation zu HTML findest Du unter https://www.w3schools.com/html/
Beispiel: Wir definieren einen Block (div) der eine Liste (ul) von Links (a) enthält.
<html>
<body>
<div>
<ul>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Impressum</a></li>
<li><a href="#">AGB</a></li>
</ul>
</div>
</body>
</html>Optik und Design mit CSS
CSS steht für Cascading Style Sheets. Es ist eine Stylesheet-Sprache für elektronische Dokumente. Mit CSS wird die Auszeichnungssprache HTML um Gestaltungsanweisungen erweitert. So sind beispielsweise Anpassungen und Definitionen von Farben, Größen, Abständen, Schriftarten, Rahmen, Formen oder Hintergrundgrafiken möglich. Eine CSS-Anweisung besteht immer aus einem Selektor und einer Anweisung. Der Selektor bestimmt, welches HTML-Element angesprochen wird, während die Anweisung definiert, welche Styles das Element bekommen soll. Als Basis-Selektoren kennt CSS drei verschiedene Typen: IDs, Klassen und HTML-Elemente. Klassen und ID selbst können als HTML-Attribut dem jeweiligen Element gegeben werden.
Wenn wir beim Vergleich mit dem menschlichen Körper bleiben, kannst Du Dir CSS ergänzend zum Skelett als Haut, Fleisch und Haare vorstellen. Es macht also das ganze optische Erscheinungsbild aus. Eine vollständige Dokumentation zu CSS findest Du unter https://www.w3schools.com/css/
Beispiel: Wir möchten unserer Liste mit Links eine rote Textfarbe sowie einen schwarzen Rahmen verpassen. Außerdem möchten wir die einzelnen Listeneinträge einrücken.
Dazu müssen wir zuerst Klassen vergeben, damit wir die Elemente in CSS ansprechen können. Klassen (mit . notiert) sind nützlich, um mehrere Elemente des gleichen Typs anzusprechen. IDs (mit # notiert) hingegen sollten immer nur für ein einziges Element vergeben werden. Alle gleichen HTML-Elemente an sich können auch ohne Klasse oder ID angesprochen werden.
<div id="list-container">
<ul class="list">
<li class="list-element"><a href="#">Kontakt</a></li>
<li class="list-element"><a href="#">Impressum</a></li>
<li class="list-element"><a href="#">AGB</a></li>
</ul>
</div>Diese Klassen können nun in CSS angesprochen werden. Um Kind-Elemente einer Klasse anzusprechen, werden einfach die Selektoren hintereinander notiert:
#list-container {
border: 2px solid #000000; /* schwarzer Rahmen */
}
#list-container .list .list-element {
margin-left: 20px; /* einrücken von links um 20 Pixel */
}
#list-container .list .list-element a {
color: red; /* Textfarbe rot */
}Logiken mit JavaScript bzw. Frameworks/Bibliotheken wie jQuery
JavaScript oder kurz JS ist eine objektorientierte, dynamisch typisierte aber klassenlose Skriptsprache für dynamisches HTML. Mit ihr lassen sich Benutzerinteraktionen auswerten, Inhalte dynamisch nachladen, verändern oder generieren. Es stellt also eine Erweiterung zu HTML und CSS um logische Operationen dar. JavaScript bringt alle üblichen Kontrollstrukturen mit, die man von einer Programmiersprache erwartet (Auch wenn JavaScript keine Progammier-, sondern eine Skriptsprache ist). Dies sind bedingte Anweisungen mittels if – else if – else beziehungsweise mittels switch-Anweisung. Außerdem gibt es die Schleifentypen while, do-while und for. Natürlich können auch Variablen, Konstanten und Methoden (sog. functions) definiert werden. Zu guter Letzt gibt es in JavaScript noch Objekte von verschiedenen bereits eingebauten Typen wie Array, Number, Date oder String sowie auch die Möglichkeit, eigene Objekttypen festzulegen.
jQuery wiederum ist eine JavaScript-Bibliothek. Das heißt, jQuery basiert auf JavaScript, bringt aber viele eigene Funktionen mit. Diese erleichtern das Arbeiten für Dich als Webentwickler sehr, da jQuery getreu seinem Motto “write less, do more” viele neue Möglichkeiten mitbringt und das mit relativ wenigen Codezeilen (im Gegensatz zu reinem JavaScript). Typische Anwendungsgebiete für JavaScript bzw. jQuery sind beispielsweise Plausibilitätsprüfungen, Eingabevalidierung, Empfangen und Senden von Daten, ohne dass die Webseite neu geladen werden muss (bekannt aus AJAX), Verwendung von Cookies, Animationen, Anzeigen von Dialogfenstern, Verändern von angezeigtem HTML zur Laufzeit und ähnliches. Diese beiden Skriptsprachen bringen also Muskeln und quasi ein Gehirn in unseren menschlichen Körper alias Deine Webseite. Eine Dokumentation zu JavaScript und jQuery findest Du unter https://www.w3schools.com/js/ bzw. https://api.jquery.com/
Beispiel: Wir möchten beim Klick auf einen unserer Links nicht die neue Seite öffnen, sondern ein Popup-Fenster mit einer Nachricht.
var linkElementArray = document.getElementsByTagName("a");
for (var i = 0; i < linkElementArray .length; i++)
{
linkElementArray[i].addEventListener('click', clickAction);
}
function clickAction(event)
{
event.preventDefault();
alert("Du hast einen Link geklickt!");
}Viel Spaß beim Ausprobieren und viel Glück, junger Webentwickler!
Rückmeldungen