Info E1: HTML - Kurs

Tags zum Start

Tags für den Anfang

Mit Tags bestimmst du, wie der Inhalt einer Webseite dargestellt wird.
  • Absatz: <p>paragraph-Tag</p>
  • kursiv: <em>italic-Tag</em>
  • fett: <strong>bold-Tag</strong>
  • Überschrift: Von <h1>sehr groß</h1> bis <h6>sehr klein</h6> (→ Beispiel)
  • neue Zeile: <br />break-Tag
  • thematische Unterteilung: <hr />horizontale Linie-Tag

Struktur

Struktur einer Webseite 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> Dieser Titel erscheint oben im Browser-Fenster </title>
    </head>
    <body>
               Hier darfst du deinen Text eingeben!
               HTML steht übrigens für Hypertext-Markup-Language 
    </body>
</html>
Diese HTML-Datei im Browser

Listen

Listen

(Unordentliche) Listen haben wir schon benutzt!
  • kursiv: <em>italic-Tag</em> →
    <ul>
    <li>kursiv: ...</li>
    </ul>
  • Bei ordentlichen Listen wird durchgezählt: Verwende ol statt ul

Bilder

Image

Bilder → <img src="./hubble.jpg">

Quelle: https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2022/09/hubble_spies_a_stately_spiral_galaxy/24477032-1-eng-GB/Hubble_spies_a_stately_spiral_galaxy_pillars.jpg

Links

Verweise

Links sind das Herzstück von HTML, Beispiele:  
  • Link zu einer anderen Webseite → <a href="http://nawi.wspnet.de/#!info_e1_html_einf03.md">einer anderen Webseite</a>
  • Link zu einer Datei in diesem Verzeichnis → <a href="./webseite.html">Datei in diesem Verzeichnis</a>
  • Link auf dieser Seite: Struktur → <a href="#id2" ...>Struktur</a>

Tabellen

Tabellen

Für Tabellen gibt es das <table>-Tag. Das reicht aber nicht, da eine Tabelle ja aus Zeilen und Spalten besteht. Also gibt es ein weiteres Tag für eine neue Zeile, das <tr>-Tag (steht für table row = Zeile). Statt eines Tags für eine neue Spalte (= column) gibt es jedoch ein Tag für eine neue Zelle: das <td>-Tag (steht für table data). Das bedeutet: Die Tabelle im Beispiel unten hat 2 Spalten und 3 Zeilen, also gibt es 2 ⋅ 3 = 6 Zellen, demnach steht im HTML-Code insgesamt 6-mal das <td>-Tag, Beispiel: <td>Wirkung</td>

HTML-Skript Wirkung
<h1>große Überschrift</h1>

große Überschrift
<h6>kleine Überschrift</h6>
kleine Überschrift

Im Quellcode: (→ im Browser)
      <table>
        <tr><td>HTML-Skript</td>
            <td >Wirkung</td>
        </tr>
        <tr><td>&lt;h1&gt;große  Überschrift&lt;/h1&gt;</td>
            <td><h1>große  Überschrift</h1></td>
        </tr>
        <tr><td>&lt;h6&gt;kleine Überschrift&lt;/h6&gt;</td>
            <td><h6>kleine Überschrift</h6></td>
        </tr>
      </table>
(→ nach oben)

CSS

CSS

Mit CSS lässt sich die Optik (= Form) einer Webseite verändern.  Mehr findet sich hier

HTML-Links

Links zu HTML

Info

HowTo

Diese HTML-Seite wurde erstellt mit einer alten Version des CSS-Frameworks Bootstrap sowie mit dem (selbstgeschriebenen) Python-Skript md2tabs3.py.

Version

wsp, 2024-11-15, Vers. 009  

Mail

walter [dot] spiegel [at] web [dot] de

History

Der Urgroßvater dieser Seite ...

Lizenz

Lizenzmodell

Der Inhalt dieses HTML-Kurses steht unter der Creative Commons-Lizenz – bis auf den HTML Editor von Morteza Mirmojarabian, der unter der MIT-Lizenz steht.