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 */

Ränder ed

praktisch jedes html Element kann mit Rändern umhüllt werden

Das "Box-Model"

Größen
p {
  padding: 10px; /* 10 Pixel dicke in alle Richtungen */
  margin: 10px;
}
b {
  padding-top: 10px; /* nur oben */
  padding-right: 10px; /* nur rechts */
  padding-bottom: 10px; /* nur unten */
  padding-left: 10px; /* nur links */
  margin: 10px 20px 30px 40px; /* 10 oben, 20 rechts, 30 unten, 40 links */
}

Ränder
p {
  border: 5px solid black;
  /* oder */
  border-width: 5px;
  border-style: solid;
  border-color: black;

  /* styles */
  border-style: solid;   /* durchgezogene Linie */
  border-style: dotted;  /* punktiert */
  border-style: dashed;  /* gestrichelt */
  border-style: double;  /* doppelte Linie */
  border-style: hidden;  /* unsichtbar */
  border-style: none;    /* gar kein Rand */

  /* pro Seite */
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;

  /* runde Ecken */
  border-radius: 10px;
}

Größen ed

betrifft den "Inhalt"! Ränder, padding, margin sind zusätzlich

absolute Größe
span {
  width: 200px; /* Pixel */
  height: 100px;

  width: 5cm;  /* centimenter, milimeter */
  height: 13mm;
}

relativ
span {
  width: 50%;  /* 50% des umgebenden Elements */
  max-width: 800px;
  min-width: 100px;
}

Farben ed

Text, Vordergrund
p {
  color: black;
  color: red;
  color: #00ff00; /* "hexadezimal" grün */
  color: rgb(0,255,0); /* rot, grün, blau (0-255) */
  color: hsl(200, 50%, 50%);  /* Farbton (0-360), Sättigung, Helligkeit */
}
weitere Farb-Namen unter https://www.w3schools.com/colors/colors_names.asp

Hintergrund
p { background-color: black; }

Categories: Computer, Programmieren