Webentwicklung - sggtgi/webdev GitHub Wiki

HTML

Eine Website kann in einer .html Datei gespeichert werden. Diese könnt ihr dann einfach auf eurem Rechner in einem Browser öffnen. Mit einem Texteditor oder fortgeschritteneren Tools lässt sich diese HTML Datei öffnen und verändern.

Tags

Tags werden genutzt um den Code einer Website zu strukturieren. Meistens gibt es jeweils einen Start- und Endtag die ein Element umschließen. Die Grundstruktur einer Website besteht mindestens aus den Elementen <html>, <head> und <body>. Der Code sieht dann wie folgt aus:

<!DOCTYPE html>
<html>

<head>

    <title>Titel der Webseite</title>

</head>

<body>

    <h1>Überschrift</h1>
    <p>Das ist ein Paragraph</p>

</body>

</html>

Diesen Code könntet ihr nun in einen Texteditor kopieren, als .html-Datei speichern und diese Datei dann im Browser öffnen. Schon habt ihr eure erste Webseite erstellt.

First webpage

<body>

Im <body> eurer Webseite könnt ihr die dargestellten Inhalte anpassen. Zum Beispiel können Paragraphen, Überschriften, Bilder oder Links hinzugefügt werden. Die Inhalte können dabei verschachtelt sein. Beispielsweise könnte Code der eine Überschrift, Text mit Link und ein Bild darstellt wie folgt aussehen:

    <h2>Überschrift 2</h2>

    <p>
        Das hier ist ein Paragraph. Und ein Link zur Webseite <a href="https://www.w3schools.com/">W3Schools.com</a> auf
        der es gute Erklärungen und "Try it yourself" Elemente gibt.
    </p>

    <img src="image.jpg" width="500" height="333">

webpage with image and link

Beachtet, dass in diesem Fall das Bild "image.jpg" an der selben Stelle wie eure .html-Datei gespeichert sein muss, um angezeigt werden zu können. Weitere Elemente werden z.B. auf der Seite W3Schools genauer und mit zahlreichen Beispielen erläutert.

<head>

Im Head sind die Metadaten der Webseite gespeichert. Diese werden nicht im Browser angezeigt aber können zum Beispiel Suchmaschinen dabei helfen die Webseite besser zu kategorisieren. Außerdem können im head tags wie <script> und <style> angegeben werden, die dabei helfen die Webseite zu gestalten und interaktive Elemente hinzuzufügen. Diese werden im Folgenden genauer erläutert.

CSS

CSS steht für Cascading Style Sheets und wird dafür genutzt das Layout einer Webseite zu formatieren. Es können unter anderem Farben, Schriftarten und die Position von Elementen angepasst werden. Es gibt verschiedene Möglichkeiten den style von Elementen zu verändern:

  • Inline - style Attribut innerhalb des HTML Elements

<h1 style="color:blue;">A Blue Heading</h1>

  • Internal - <style> im header
<head>

    ...
    <style>
        h1 {
            color: blue;
        }
    </style>
    ...

</head>
  • External - externe .css-Datei die über einen <link> im <head> geladen wird
<head>
     ...
     <link rel="stylesheet" href="style.css">
     ...
</head>
  • Der Code wird genau so wie zuvor strukturiert, jedoch in der Datei style.css gespeichert, die in diesem Beispiel an der selben Stelle wie die .html-Datei abgelegt ist.

JavaScript

Mit JavaScript können Webseiten dynamisch und interaktiv gestaltet werden. Es können zum Beispiel Buttons oder Formulare hinzugefügt oder Inhalte dynamisch geändert werden. Skripte werden häufig von extern über den tag <script> geladen. Das kann dann zum Beispiel wie folgt aussehen, wenn man wie hier Leaflet laden möchte: <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> Dieser tag wird dann im head des HTML Dokuments geladen und daraufhin können die Leaflet-Funktionen für deine Webseite genutzt werden. Bei Leaflet handelt es sich um eine sogenannte library von denen es viele verschiedene gibt, die diverse Funktionalitäten bereitstellen. Wir nutzen hier Leaflet als Beispiel, da es uns als Open Source ermöglicht interaktive Karten in unsere Webseite einzubinden. Auf dieser Wiki-Seite werden die Funktionen von Leaflet genauer beschrieben.

Neben der Möglichkeit externe libraries zu nutzen, kann man auch eigene JS Funktionen erstellen. Dazu erstellt man in der Regel eine .js-Datei, die man dann mit entsprechenden (Text)-Editoren bearbeiten kann. Die Datei könnte zum Beispiel meinSkript.js heißen und würde durch <script src="meinSkript.js"></script> im head in eure Webseite eingebunden.

Neben dem Laden externer Skripte kann man auch den JavaScript-Code auch direkt innerhalb des <script> Tags im header erstellen. Hier ein kurzes Beispiel wie ein Button erstellt wird, der beim Klicken das aktuelle Datum anzeigt:

<html>

<head>

    <script>
        function myFunction() {
            document.getElementById('demo').innerHTML = Date()
        }
    </script>

</head>

<body>

    <h2>Mein erster Button</h2>

    <button type="button" onclick="myFunction()">
        Datum und Uhrzeit
    </button>

    <p id="demo"></p>

</body>

</html>

First webpage

Auf der Webseite sind dann die Elemente <h2>, also die Überschrift, der Button (<button>) und ein paragraph, mit der id "demo" (<p id="demo">), der zunächst noch keinen Inhalt hat. Dem button-Event onclick wird dann die Funktion myFunction() zugwiesen, die oben im head definiert wurde. Das bedeutet, beim klicken auf den button, wird die Funktion ausgeführt. Die Funktion spricht dann das Element "demo" über seine id an (document.getElementById('demo').innerHTML) und ordnet diesem das Datum (Date()) zu. Damit erscheint, wie auf dem Bild zu sehen, unter dem Button beim Paragraph das aktuelle Datum.

So kann man die eigene Webseite selber mit dynamischen Inhalten füllen indem man eigene Funktionen erstellt oder vorgefertigte Funktionen aus libraries wie Leaflet nutzt. Wie das funktioniert zeigen wir auf dieser Wiki-Seite: Leaflet.

⚠️ **GitHub.com Fallback** ⚠️