Zum Inhalt springen

HTML & CSS

Veröffentlicht am 14. März 2023

Achtung: Ich schreibe hier lediglich Notizen rein, die Seite ist im Aufbau. Sie eignet sich (derzeit) nicht als Lernseite für Anfänger.

Grundaufbau einer HTML-Seite

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

HTML ohne CSS? Langweilig!

HTML und CSS sind im Grunde nur zusammen zu denken. Das eine ohne das andere macht wenig (HTML ohne CSS bzw. CSS ohne HTML) Sinn. Good to know: CSS wird auch bei XML– und SVG-Dokumenten genutzt.

HTML ist eine Auszeichnungssprache (Markup-Sprache), die Dokumente strukturiert. Sie folgt damit dem DOM-Konzept, DOM steht für (Document Object Model). CSS ist ebenfalls eine Auszeichnungssprache, die für die Gestaltung von HTML-Dokumenten genutzt wird. Der Browser nutzt beide Dateien, um Inhalte strukturiert darzustellen. So viel oberflächliche Theorie genügt erst einmal, wir beginnen mit einem Beispiel:

Übung

  1. Kopiere die beiden Blöcke in zwei Dateien im selben Verzeichnis. Nenne die HTML-Datei “index.html” und die CSS-Datei “style.css”.
  2. Öffne “index.html” in einem Browser. Du solltest eine Seite wie im Bild sehen.
  3. Untersuche die Zusammenhänge, die du vermutest und mache dir Notizen dazu, besprich sie anschließend in deiner Gruppe. Wir besprechen deine Beobachtungen im Plenum.
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Beispiel</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Überschrift Ebene 1</h1>

<div class="my_div">
    <h2>Überschrift Ebene 2</h2>
    <p>Das ist ein Absatz. Er wird mithilfe der eingebundenen CSS-Datei formatiert.</p>
    <p>Das noch so ein Absatz. Er wird mithilfe der eingebundenen CSS-Datei formatiert.</p>
</div>

<div class="">
    <h2>Überschrift Ebene 2</h2>
    <p>Das ist ein Absatz. Er wird mithilfe der eingebundenen CSS-Datei formatiert.</p>
    <p>Das noch so ein Absatz. Er wird mithilfe der eingebundenen CSS-Datei formatiert.</p>
</div>
</body>
</html>
body{ /* Der gesamte Inhalt */
    font-family: 'Open Sans', sans-serif; /* Schriftart */
}

p { /* wähle alle Absätze */
    color: darkblue; /* Textfarbe */
    background-color: skyblue; /* Hintergrundfarbe */
    margin: 10px; /* Randabstand nach außen */
}

div{ /* alle div */
    margin-top: 10px;
}

div.my_div { /* alle div mit Klasse my_div*/
    background-color: lightyellow;
    padding: 5px; /* Randabstand von innen */
    border: #2f9782 solid 1px;
}

div:not(.my_div) { /* alle div außer div mit Klasse my_div*/
    background-color: lightpink;
    padding: 5px;
    border: #902f97 solid 1px;
}

Struktur und Tags

HTML-Dokumente

HTML-Dokumente werden mithilfe von sogenannten Tags strukturiert. Was damit gemeint ist, kannst du hier nachlesen: https://de.wikipedia.org/wiki/Hypertext_Markup_Language#Allgemeine_Struktur

CSS

Selektoren

  • Mit Selektoren werden Tags, Klassen oder IDs identifiziert, um sie dann “stylen” zu können, also gestalten zu können.
    • Tag: Jeder Tag identifiziert alle Elemente der gleichen Sorte. Wie du oben gesehen hast, ist mit p jedes Paragraph gemeint.
    • ID: In einem HTML-Dokument ist jede ID einzigartig und kann nur von einem Element genutzt werden.
    • Klasse: Mehrere Elemente können die gleiche Klasse haben.

Ein bisschen Syntax für die Selektoren und so passend zum HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="div_e1">
    <p>Absatz 1 direkt im ersten Div</p>
    <p>Absatz 2 direkt im ersten Div</p>
    <div class="div_e2 div_e2_1">
        <p class="block1"> Absatz Block 1 Nr. 1</p>
        <p class="block1"> Absatz Block 1 Nr. 2</p>
        <p class="block1"> Absatz Block 1 Nr. 3</p>
    </div>
    <div class="div_e2 div_e2_2">
        <p class="block2"> Absatz Block 2 Nr. 1</p>
        <p class="block2"> Absatz Block 2 Nr. 2</p>
        <p class="block2"> Absatz Block 2 Nr. 3</p>
    </div>
</div>
</body>
</html>
/* komplettes body */
body {
    font-family: 'Open Sans', sans-serif;
}

/* alle p*/
p {
    background-color: #bababa;
    margin-top: 5px;
    padding: 5px;
}

.div_e1{
    border: #902f97 solid 1px;
    padding: 2px;
    margin: 4px;
    background-color: #ebbdef;
}

.div_e2{
    border: #38cfe3 solid 1px;
    padding: 2px;
    margin: 4px;
    background-color: #bfece4;
}

/* alle p div_e1: spezifisch, überschreibt andere!*/
.div_e1 p {
    color: #0D47A1;
}

/* direkte Abkömmlinge in div_e1: spezifisch, überschreibt andere!*/
.div_e1 > p {
    color: red;
}

/* universeller selector: gut für resets. font etc nicht hier machen! lieber in body --> vererbung*/
*{
    margin: 0;
}

Ein paar Begriffe und Grundlagen

  1. Begriffe (Quellen sind im Begriff verlinkt)
    1. Client: “Computerprogramm, das auf dem Endgerät eines Netzwerks ausgeführt wird”
    2. Server: ein Computerprogramm oder ein Gerät, welches Funktionalitäten, Dienstprogramme, Daten oder andere Ressourcen bereitstellt
    3. Browser sind Computerprogramme zur Darstellung von Webseiten im World Wide Web oder allgemein von Dokumenten und Daten.
    4. URL identifiziert und lokalisiert eine Ressource, beispielsweise eine Webseite, über die zu verwendende Zugriffsmethode (zum Beispiel das verwendete Netzwerkprotokoll wie HTTP oder FTP) und den Ort (engl. location) der Ressource in Computernetzwerken
    5. HTTP ist ein zustandsloses Protokoll zur Übertragung von Daten auf der Anwendungsschicht über ein Rechnernetz
    6. HTTPS ist ein Kommunikationsprotokoll im World Wide Web, mit dem Daten abhörsicher übertragen werden können. Es stellt eine Transportverschlüsselung dar.
  2. Was ist zu beobachten (Schrift, Abstände)? Was bewirkt den Unterschied zwischen den beiden Versionen?
    In der ersten Version sind keine Markups sichtbar. In der zweiten Version greift das HTML-Markup und der Text ist geordnet. Dadurch sind Typografie und Absätze angepasst. Unhter anderem sind Schriftgrößen, Schriftschnitt und Umbrüche integriert.
  3. HTML-Grundgerüst
    1. Kommentare in HTML werden so eingegeben: <!-- Das ist ein Kommentar --> Sie beginnen mit <!-- und enden mit -->. Alles zwischen diesen Zeichen wird als Kommentar aufgefasst. Die Kommentare können sogar über mehrere Zeilen verteilt sein.
    2. Nein, das funktioniert in HTML nicht. Dann wird die erste äußere öffnende Klammer mit der ersten inneren schließenden Klammer kombiniert und es gibt ein großes Durcheinander. Daher sollte man in HTML entweder mit Kommentaren sparsam sein oder nur über Codezeilen kommentieren, damit man Codezeilen schnell ausklammern kann …
    3. In der Titelleiste. Das ist in der Regel der Name der Website.
  4. HTML-Text validieren: Die Seite verbietet mir den Test: 403 Forbidden. Request forbidden by administrative rules.
  5. Überschriften:
    1. Die Reihenfolge der Überschriften ignoriert die sinnvolle Abfolge von Stufen. Nach h1 kommt direkt h3, dann wieder h2. Eine sinnvolle Gliederung beinhaltet immer auch eine sinnvolle lexikalische Gliederung.
    2. In diesem Fall wird eine Stufe übersprungen. Nach der 1. Stufe folgt direkt die 3. Stufe.
  6. Horizontale und vertikale Abstände
    1. Die Buchstaben haben unterschiedliche Breiten, &nbsp aber steht für einen festen Abstand.
    2. Der Anfangsbuchstabe W ist breiter als die übrigen kleinen Buchstaben. Dadurch wird das Wort breiter, deshalb braucht man mehr geschützte Leerzeichen &nbsp.
    3. Wenn man es so wie unten macht, ganz ohne “normale” Leerzeichen, sondern immer nur mit dem geschützten Leerzeichen &nbsp, dann bekommt jedes Zeichen durch den tt-Tag eine feste Breite.
<!-- zu 6.1 -->
Webprogrammierung <br>
* &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp *

<!-- zu 6.3 -->
<tt> Webprogrammierung </tt><br>
<tt>*&nbsp&nbsp&nbsp&nbsp*</tt>

Formulare nutzen

Um funktionale Formulare nutzen zu können, wird – neben CSS für die Gestaltung – vor allem PHP benötigt, damit Formulardaten übermittelt werden. Hierzu ein Beispiel, an dem einige Konzepte verdeutlicht werden.

Formular anlegen

<!--
In diesem Fall verweist dieses Formular auf die form_sent.php in einem Unterordner formulare. Das liegt an der Projektstruktur.
Zieldateien sind PHP-Dateien, weil mithilfe von php ausgewertet wird.
Die Wahl der Methode ist wichtig: Die Methode post sendet anonym, get hängt die Attributwerte an die URL. Mehr dazu an anderer Stelle.
-->
<form action="formulare/form_sent.php" method="post">
    <label for="vorname"> Vorname <!-- label für den Input -->
        <input type="text" id="vorname" name="vorname"> <!-- id für CSS, WICHTIG: name für php-->
    </label>
    <label for="nachname"> Nachname
        <input type="text" id="nachname" name="nachname">
    </label>
    <input class="btn" type="submit" value="senden">
</form>

Formular auswerten

Auf der PHP-Seite wird wie folgt ausgewertet:

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../style.css">
</head>
<body>
<?php
echo "Das sind die Formulardaten: <br><br> Vorname:  {$_POST['vorname']} <br> Nachname: ", $_POST['nachname'];
?>
<a href="../index.php" class="btn">zurück</a>
</body>
</html>

Bevor man die Übergabewerte direkt ausgibt, sind natürlich vielerlei Operationen damit möglich. In der Regel werden übergeben Werte mithilfe von PHP weiter ausgewertet und dafür genutzt, um Daten in eine Datenbank zu schreiben. In das Frontend werden nur die für Nutzer:innen relevante Informationen gesendet. PHP arbeitet nämlich im sogenannten Backend und verarbeitet die Prozesse anonym.

CSS dazu:

form {
    background-color: #cfe3ff;
    padding: 10px;
    border: #0D47A1 1px solid;
    border-radius: 5px;
}

/* all button elements within all form elements are selected*/
form > .btn, form>.btn:active { /*multiple selections are separated by comma*/
    background-color: #206658;
    color: white;
    border: none;
    padding: 5px 10px 5px 10px;
    border-radius: 3px;
}

form > .btn:hover {
    background-color: #2f9782;
}

.btn{
    background-color: orange;
}

Formulareingaben prüfen

E-Mail-Check ab HTML5 automatisch

Wenn du dich irgendwo anmeldest, wirst du nach einer Mailadresse gefragt. Die Betreiber merken in der Regel, ob du eine Mailadresse eingegeben hast, viele prüfen sogar noch, ob bereits eine Person mit dieser Mailadresse registriert ist. Letzteres ist etwas aufwendiger (wenn du es direkt bei der Eingabe überprüfen möchtest, nach der Eingabe kann man das mit PHP und etwas SQL aber auch prüfen). Mit JavaScript könnte man das Format zwar recht einfach prüfen, doch das ist seit HTML5 nicht mehr notwendig. Das übernimmt nun HTML direkt selbst:

<input id="email" type="email" placeholder="" name="email">

Exkurs: Mit regulären Ausdrücken (regulär expressions, RegEx) kannst du sogar Passwortfelder so konfigurieren, dass deine Vorgaben eingehalten werden:

<input id="password" type="password"
pattern="^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=\S+$).{8,}$"
name="password"/>

Auf diesen Seiten kannst du deine RegEx testen: https://regexr.com oder https://regex101.com. Für den Ausdruck oben erhältst du beispielsweise folgende Rückmeldung (blau hinterlegte Werte passen):

Ein recht gutes Erklärvideo zu dem Thema:

Was könnten wir machen?

In unserem Beispiel checken wir einfach mal, ob eine Rechenaufgabe richtig gelöst wurde und haben damit ein einfaches Captcha erstellt, was vermutlich von jedem guten Bot geknackt wird:

"use strict";

let form = document.querySelector("form"); /* Formular: Für submit benötigt! */
let math_input = form.querySelector("#math"); /* Eingabefeld: Für die Eingabe der Zahl */
let math_warn = document.querySelector("#warn-math"); /* Warntext: Wird bei Fehleingabe angezeigt */

/* Falsche Eingabe: Warnung sichtbar machen! */
form.addEventListener("submit", function (e) {
    let num = form.querySelector("#math").value;
    if (num != 35) {
        console.log(num);
        math_warn.hidden = false;
        e.preventDefault();
    }
});

/* Sobald man das Feld auswählt, verschwindet die Warnung wieder. Man möchte offenbar einen neuen Wert eingeben.*/
math_input.addEventListener("focus", function (e) { /* focus statt click, weil man ja auch per Tab reinkommt */
    math_warn.hidden = true;
});

Das Formular muss um diese Felder ergänzt werden:

<label for="math"> Was ergibt 12+23?
    <input id="math" type="number" name="math"/>
</label>
<p class="warning" id="warn-math" hidden> Deine Eingabe ist leider falsch!</p>

So verhält sich das Formular dann. Beobachte, wie sich die Attribute des Feldes ändern.

Man könnte das Script oben um weitere Funktionen erweitern und damit jedes Mal zufällige Summanden für die Aufgabe wählen.

Veröffentlicht in edu-notes

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert