Webentwicklung - Ein Überblick

Webentwicklung – Ein Überblick

Veröffentlicht von Bastian - 16. März 2016

Um eine hybride App Entwickeln zu können werden verschiedene Sprachen eingesetzt. Grundlegend handelt es sich dabei um Sprachen, welche auch in der Erstellung von Webseiten zur Anwendung kommen. Es sollte also jeder Webentwickler bereits mit diesen Sprachen in Berührung gekommen sein. Konkreter gesagt handelt es sich dabei um die Auszeichnungssprache HTML5, die Formatierungssprache CSS3, die

Was ist eigentlich HTML5?

HTML steht für Hypertext Markup Language. Hierbei handelt es sich um eine plattformunabhängige Beschreibungssprache für Dokumente. Ein HTML Dokument kann von allen Browser interpretiert und anschließend entsprechend dargestellt werden. Das Dokument baut sich dabei durch sogenannte Tags auf. Diese Tags definieren die verschiedenen Elemente einer Webseite. Beispielsweise <h1></h1> für die Hauptüberschrift eines Dokumentes. Dieses Tag kann anschließend mit Inhalt befüllt werden. <h1>ÜBERSCHRIFT-TEXT</h1>. Einführung und Dokumentation zu HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h1>This is a Heading</h1>
        <p>This is a paragraph.</p>
    </body>
</html>

Ein einfaches Beispiel eines HMTL Dokumentes mit einem Webseiten-Titel, einer Überschrift und einem Text.

Was ist eigentlich CSS3?

CSS steht für Cascading Style Sheet. Mit hilfe dieser Formatierungssprachen können in HTML definierte Elemente gestyled werden. Die CSS Datei (oftmals style.css) ist meist eine eigene Datei und wird in das HTML Dokument eingebunden. Wird das HTML Dokument anschließend in einem Browser geöffnet so werden die einzelnen Elemente mit dem definierten Aussehen aus der style.css versehen und dargestellt. Dies dient vor allem der Übersichtlichkeit und sauberen Trennung von Inhalt und Formatierung. Einführung und Dokumentation zu CSS

body {
    background-color: #blue;
}

h1 {
    color: orange;
}

p {
    font-family: "Times New Roman";
    font-size: 20px;
}

Definiert die Hintergrundfarbe der Webseite in Blau, die Farbe der Überschrift als Orange und die Schriftart und Schriftgröße der Textes als Times New Roman 20px

Was ist eigentlich JavaScript?

JavaScript ist eine Scriptsprache, welche dazu eingesetzt wird Webseiten Leben einzuhauchen. Hierbei wird daher auch von dynamischen Webseiten gesprochen. Mit JavaScript lassen sich verschiedene Animationen und Bewegungen umsetzten und es kann auf Benutzereingaben oder auf das Benutzerverhalten eingegangen werden. Wird beispielsweise vom Benutzer ein Button geklickt oder gescrollt so kann ein neues Element eingeblendet und ein anderes ausgeblendet werden. Hierbei spricht man von einer dynamischen Manipulation von Webseiten. Einführung und Dokumentation zu JavaScript

<script>
    a = 1;
    b = 2;
    c = a + b;
    document.getElementById("result").innerHTML = c;
</script>

Dieses Beispiel addiert die Variablen a und b und gibt das Ergebnis im HTML Element (div) result aus.

Was ist eigentlich jQuery?

jQuery ist eine JavaScript-Bibliothek, welche Funktionen zur DOM-Navigation und -Manipulation bietet. Ähnlich wie bereits bei JavaScript angesprochen handelt es sich hierbei um eine dynamische Manipulation von Webseiten. jQuery bietet bereits viele Funktionen und Methoden mit welchen solche Manipulationen vorgenommen werden können. jQuery greift dabei auf Funktionen von JavaScript zurück, bildet dieser aber auf eine besser verständliche Weiße ab. Es ermöglicht somit Entwicklern komplexe JavaScript Funktionen mit nur wenigen Zeilen jQuery Code umzusetzen. Einführung und Dokumentation zu jQuery

$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});

Sobald das Dokument fertig geladen ist und p angeklickt wird, wird p ausblendet.

Was ist eigentlich PHP?

Bei PHP handelt es sich ebenfalls um eine Scriptsprache, allerdings wird diese lediglich auf Seitens des Server interpretiert und verarbeitet. PHP stand ursprünglich für Personal Homepage Tool, wird heute allerdings als Hypertext Preprocessor bezeichnet. PHP ermöglicht es beispielsweise Datenbankverbindungen mit in Webseiten zu integrieren. Da der Code ausschließlich auf dem Server verarbeitet wird können hier Passwörter und LogIn Daten mit in den Code integriert werden ohne das diese von Dritten ausgelesen werden können. Dies ist allerdings nur einer der vielen Anwendungsfälle für PHP. Einführung und Dokumentation zu jQuery

<?php
    echo "My first PHP script!";
?>

Dieses Beispiel gibt den Text My first PHP script! auf der Webseite aus Ähnliche Beiträge: Warum HTML5 geil ist Rey’s CSS Haxx Grundlagen PHP und wie man mit einem Formular umgeht jQuery