Dein letzter Login ist schon eine Weile her.

Bitte überprüfe, ob alle Angaben in Deinem Profil noch aktuell sind.


12.05.2018
von Jan-Dirk
in IT-Talents

Einführung: Grundlagen der Webentwicklung

x
Für Unternehmen:
IT-Nachwuchs kennenlernen!
Jetzt starten

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.

Lesezeit: ca. 3 Min.

Bewerten

Themen auf dieser Seite:

IT-Talents.de ist Deine Plattform für Förderung und Weiterbildung während des IT-Studiums!
Fördermöglichkeiten ansehen


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 */
}
Auf IT-Talents.de kannst Du Dich mit dem Who-is-Who der IT-Branche vernetzen!
Jetzt Top-Unternehmen anschauen


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!

Aktuelle Aktionen:

IT-Stipendium Oktober 2020

1200€ Förderung für IT-Talente!


Sei dabei und sichere Dir beim IT-Stipendium Oktober 2020 bis zu 1200€ Förderung.
Jetzt bewerben!

IT-Talents ist ein Netzwerk nur für IT'ler. Auf unserer Plattform kannst Du Dich als registriertes Mitglied mit wenigen Klicks auf die Jobs unserer Partnerunternehmen oder auf IT-Projekte für Studierende bewerben. Darüberhinaus führen wir Wettbewerbe durch und vergeben IT-Stipendien.

Jetzt Mitglied werden.

Schnell-Login für unsere Mitglieder

Tipp: Halte Dein Profil aktuell.

Lass' uns wissen, falls sich etwas Neues bei Dir ergibt.

Tipp: Vervollständige Dein Profil für noch bessere Karrierechancen.

Bist Du Schüler, Student oder bereits berufstätig? Teile uns Deinen aktuellen Status mit, damit wir Dir sinnvolle Aufgaben anbieten können.

Jetzt Status angeben

Wann stehst Du der IT-Branche zur Verfügung?

Bitte Monat und Jahr angeben.

{{ perspectiveForm.availableFrom.$error.dynamic }}

Neuer Versuch

Wo möchtest Du durchstarten?

{{ location.geolocation.name }}×
Bitte mindestens ein Ort angeben.

Als {{currentUser.status.title}} bist Du bereit für:


Lade Beschäftigungsarten

Bitte wähle den Zeitpunkt, Ort und min. eine Beschäftigungsart aus.

You have voted!
Schliessen
Vote for:
stars
Vote
You have not rated!