Glossar zu Webentwicklung und Design

Thema Erklärung/Beschreibung
utf-8 UTF-8 ist eine Zeichencodierung. Sie ordnet jedem existierenden Unicode-Zeichen genau eine bestimmte Bitfolge zu, die man auch als binäre Zahl lesen kann. Das heißt: Allen Buchstaben, Zahlen und Symbolen einer wachsenden Zahl an Sprachen weist UTF-8 jeweils eine feste, binäre Zahl zu. So kann die gleiche Website in mehreren Sprache ausgegeben werden, ohne den Code in mehreren Sprachen verfassen zu müssen.
HTML-Kopf <!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beschreibung der Seite</title>
</head>
<body>
<p>Inhalt der Seite</p>
</body>
</html>
Spezielle Zeichen Tabelle
Erzwungenes Leerzeichen &nbsp;
Tags Tabelle
Listen und Tabellen

Listen werden mit den Tags <ul>,</ul>(ungeordnete Liste) und <ol>,</ol>(geordnete Liste) erstellt. Die Tags für die einzelnen Listenpunkte lauten <li>,</li>.

Tabellen werden mit den Tags <table>,</table> angegeben. In der Tabelle schreibt man <tr>,</tr> für jede Zeile und <td>,</td> für die Spalten.
Verweise(Links)
  • Externe Verweise:
    <a href="https://www.example.com"> Name des Links auf der Website</a>
  • Interner Verweis von einer zu einer anderen Seite, die im selben Verzeichnis liegen:
    <a href="zeichen.html">Erklärung der HTML-Zeichen</a>
Die Begriffe Inhalt, Struktur, Aussehen
  • Inhalt: Der Seiteninhalt, der oft durch Text angegeben wird
  • Sruktur: Die Art und Weise, auf die, die Seite eingeteilt wird um die Seite möglichst gut zu ordnen.
  • Aussehen: Die Darstellung der Website mit zum Beispiel Kästen, Umrandungen oder Farben.
Seiteneinteilung mit <header> <nav> <main> <aside> <footer>
  • <header>: Überschrift
  • <nav>: Inhaltzverzeichnis zum navigieren
  • <main>: Hauptteil der Seite
  • <aside>: Informationen an der Seite der Website
  • <footer>: Impressum, Kontaktinformationen, etc.
CSS für Seiteneinteilung und Hintergrundfarbe
  • Seiteneinteilung:
    <style>
    body{
    display: flex;
    flex-flow: row wrap;
    }
    header, nav, footer {
    flex: 100%;
    }
    main {
    flex: 3;
    }
    aside {
    flex: 1;
    }
  • Hintergrundfarbe:
    header {
    background: #f1f3f4;
    }
    nav {
    background: #e6f2f7;
    }
    main {
    background: #ffede0;
    }
    aside {
    background: #ebf5d7;
    }
    footer {
    background: #e4ebf2;
    }
    </style>
  • In CSS werden Farben in "Codes" angegeben (zum Beispiel #00000f; = schwarz).
Regeln für die Formatierung des Quellcodes
  1. Pro Zeile sollte nur ein öffnendes Tag stehen, und zwar am Anfang.
  2. Falls innerhalb des HTML-Elements kein weiteres Tag aufgemacht wird, steht das zugehörige schließende Tag am Ende der Zeile(n).
  3. Falls innerhalb des HTML-Elements ein oder mehrere weitere Tags aufgemacht werden, steht das schließende Tag am Anfang einer neuen Zeile und dahinter steht nichts.
  4. Falls innerhalb eines HTML-Elements ein weiteres Tag definiert wird, wird dieses gegenüber dem umschließenden Tag eingerückt. Damit ergibt sich ein stufiges Bild gemäß der Hierarchie der enthaltenen HTML-Elemente.
  5. Nach einem schließenden Tag wird die Einrückung sozusagen rückgängig gemacht: Sofern öffnendes und schließendes Tag in verschiedenen Zeilen stehen, stehen sie untereinander, d.h. genauso weit eingerückt.
  6. Zur Erzeugung einer Einrückung wird vor der Zeile die Tabulator-Taste gedrückt.
  7. Alternativ können auch 2 oder 4 Leerzeichen verwendet werden (aber bitte einheitlich).
  8. Achtung: Wird ein Tag innerhalb eines HTML-Elements geöffnet, muss es auch innerhalb geschlossen werden.
  9. Füge eine Leerzeile ein, wenn danach eine größere Struktur begonnen wird, z.B. also vor und nach einer Tabelle oder Überschrift.