| 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 Seite in mehreren Sprachen ausgegeben werden, ohne den Code neu zu schreiben |
| HTML-Kopf zum kopieren |
<!doctype html>
<html lang=";de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
lt;title>Beschreibung der Seite
</head>
<body>
</body> |
| Sonderzeichen |
Liste für Sonderzeichen |
| erzwungenes Leerzeichen |
|
| Tags |
Beispiele |
| Listen und Tabellen |
Listen werden mit den Tags <ul>,</ul> (ungeordnete Liste) und <ol>(geordnete Liste) erstellt. Die Tags für die einzelnen Listen sind <li></li>
Um eine Tabelle zu erstellen brauch man die Tags <table> und </table>. Zeilen werden mit den Tags <tr> und </tr>. Die Spalten der Zeilen werden mit den Tags <td> und </td> und um den Text in den Spalten größer zu machen nutzt man die Tags <th> und </th> |
| Verweise (links) |
<a href="Link hier"> Name der auf der Seite angezeigt wird </a> |
| Inhalt,Struktur,Aussehen |
- Inhalt: Der Seiteninhalt der meist ein Text ist
- Struktur:Die Art und Weise, auf die, die Seite eingeteilt wird um die die Seite möglichst gut zu ordnen
- Aussehen:Die Darstellung der Webseite z.B. Farben
|
| Seiteneinteilung mit <header> <nav> <main> <aside> <foot> |
- <header>: Seitenkopf Für z.B. die Überschrift oder Logo
- <nav>: Ein Inhaltsverzeichnis, oft mit Links verknüpft
- <main>: Der richtige Inhalt der Seite
- <aside>:Randlist mit ergänzendem Inhalt
- <footer>: Impressum
|
| CSS für Seiteneinteilung und Hintergrundfarbe |
- CSS-Code schreiben: <style></style>
- Seiteneinteilung:
body {
display: flex;
flex-flow: row wrap;
}
header, nav, main, aside, footer {
border: 1px solid;
padding: 1em;
margin: .5em;
}
header, nav, footer {
flex: 100%;
}
main {
flex: 3;
}
aside {
flex: 1;
}
- Hintergrundfarbe:
body {
}
header {
background: #f1f3f4;
}
nav {
background: #e6f2f7;
}
main {
background: #ffede0;
}
aside {
background: #ebf5d7;
}
footer {
background: #e4ebf2;
}
|
| Regeln für eine gute Formatierung des Quellcodes |
- Pro Zeile sollte nur ein öffnendes Tag stehen, und zwar am Anfang.
- Falls innerhalb des HTML-Elements kein weiteres Tag aufgemacht wird, steht das
zugehörige schließende Tag am Ende der Zeile(n).
- 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.
- 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.
- 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.
- Zur Erzeugung einer Einrückung wird vor der Zeile die Tabulator-Taste
gedrückt.
Alternativ können auch 2 oder 4 Leerzeichen verwendet werden (aber bitte einheitlich).
- Achtung: Wird ein Tag innerhalb eines HTML-Elements geöffnet, muss es auch
innerhalb geschlossen werden.
- Füge eine Leerzeile ein, wenn danach eine größere Struktur begonnen wird, z.B. also
vor und nach einer Tabelle oder Überschrift.
|