Html ed

html5!

Table of Contents

Syntax ed

Grundgerüst ed

<!DOCTYPE html>
<html>
  <head>
    <title>Titel</title>
  </head>
<body>
...
</body>
</html>

Text ed

Überschriften
<h1>Große Überschrift</h1>
<h2>Mittlere Überschrift</h2>
<h3>Kleinere Überschrift</h3>

Abschnitte
<p>Text Abschnitt</p>

Auszeichnungen
<b>fetter Text</b>
<i>kursiver Text</i>
<small>kleiner Text</small>
<sub>tiefgestellter Text</sub>
<sup>hochgestellter Text</sup>
<tt>Schreibmaschinen Text</tt>
<span>wenn man eigene Styles anwenden will (siehe unten)</span>

Vor-Formatierter Text
<pre> A B  alle Leerzeichen/Zeilenumbrüche sind sichtbar
   C D
X         Y</pre>

Links ed

<a href="#Anker">Titel (selbe Seite)</a>
<a href="lokale-url.html">Titel</a>
<a href="https://weit-weg.com/url.html">Titel</a>
<a href="mailto:ich@mail.com">E-Mail</a>

Bilder ed

<img src="image.jpg" alt="Alternativer Text">
<img src="image.jpg" alt="Alternativer Text" width="100" height="200">

Listen ed

ungeordnete Liste (Punkte)
<ul>
    <li>aaa</li>
    <li>bbb</li>
</ul>

geordnete Liste (durchnummeriert)
<ol>
    <li>aaa</li>
    <li>bbb</li>
</ol>

Tabellen ed

<table>
    <tr>
        <td>Zeile 1 - Spalte 1</td>
        <td>Zeile 1 - Spalte 2</td>
    </tr>
    <tr>
        <td>Zeile 2 - Spalte 1</td>
        <td>Zeile 2 - Spalte 2</td>
    </tr>
</table>

mit Titel
<table>
    <tr>
        <th>Titel Spalte 1</th>
        <th>Titel Spalte 2</th>
    </tr>
    <tr>
        <td>Zeile 1 - Spalte 1</td>
        <td>Zeile 1 - Spalte 2</td>
    </tr>
    ...
</table>

mehrere Zellen zusammenfassen

<table>
    <tr>
        <td rowspan="2">2 Zeilen hoch</td>
        <td colspan="2">2 Spalten breit</td>
    </tr>
</table>

CSS ed

einfügen ed

3 Möglichkeiten:

externe Datei
alles in eine .css Datei schreiben und dann in der html Datei (im head) einbinden:
<link rel="stylesheet" href="https://www.example.com/bla/datei.css">
<link rel="stylesheet" href="lokale-datei.css">

direkt in die Html Datei (global):
<style>
  ...
</style>

direkt in die Html Datei (lokal):
<table style="...bla...">...

Selektoren ed

alle html Elemente vom selben Typ
p { color: red; } /* gilt für alle <p> Blöcke */
h1 { color: red; } /* gilt für alle <h1> Überschriften */
b, i, tt { color: red; } /* gilt für alle <b>, sowie für alle <i> und <tt> Texte */

nur "Klassen" (markierte Elemente)
html:
<table class="mein-klassen-name"> ... </table>
...<b class="mein-klassen-name">...</b>...
css:
.mein-klassen-name { color: red; }

nur "IDs" (auch markierte Elemente, aber nur ein einzelnes)
html:
<table id="meine-id"> ... </table>
css:
#meine-id { color: red; }

direkte Kinder
p > b { color: red; } /* nur <b> Elemente direkt in <p> */

Kinder und Kindes-Kinder
p b { color: red; } /* erlaubt auch <p><i><b>...</b></i></p> */

direkte Nachbarn
i + b { color: red; } /* <b>, wenn es direkt nach einem <i>...</i> kommt */

Abstände ed

padding

Innenabstand: Abstand zwischen Text und Rand

Wird von Mozilla zu width hinzu addiert, was das Objekt vergrößert, wärend InternetExplorer6 width festhält und das Objekt nach innen hin verkleinert.

margin

Außenabstand: Abstand zwischen Rand und umgebenden Elementen

border-spacing

Rahmenabstand: Abstand zwischen Zellen einer Tabelle (nur Tabelle!)

Wir von InternetExplorer6 ignoriert!!! Man sollte border-collapse: collapse; verwenden!

Ränder ed

border-width

Rand: Dicke der Randlinien

border-color

Randfarbe

border-style

Randtyp (none, hidden, solid, dotted, dashed, double, groove, ridge, inset, outset)

border-collapse

Randverbindung (collapse, seperate)

Categories: Computer, Programmieren