HTML-Tag: |
So wird's geschrieben: ( Kopiere die Code-Schnipsel in den BODY deiner Seite speichern - anzeigen lassen - fertig! ) |
So könnte es dann aussehen: (Wie's genau aussehen soll, kann man später noch festlegen!) |
||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Worte und Sätze | ||||||||||||||
Überschrift 1. Ordnung
|
|
Hauptüberschriftstyles
|
||||||||||||
Überschrift 2. Ordnung
|
|
Unterüberschriftstyles
|
||||||||||||
Überschrift 3. Ordnung
|
|
Unterüberschriftstyles
|
||||||||||||
Überschrift 4. Ordnung
|
|
Unterüberschriftstyles
|
||||||||||||
einfacher Text |
steht einfach so im BODY-Element
|
steht einfach so im BODY-Element
|
||||||||||||
betonter Text
|
|
Ich habe heute keine Lust.
|
||||||||||||
stark betonter Text
|
|
Ich habe heute überhaupt keine Lust.
|
||||||||||||
Inline-Element (Spanne) Klasse [Inline-Element]
|
|
Mit dem
span-Tag kann man
den Text genau so einstellen
wie man ihn haben möchte.
styles
|
||||||||||||
Abkürzung (Erklärung) Titel [Abkürzung]
|
|
Dies ist z.B. eine Abkürzung.
styles
|
||||||||||||
Akronym Erklärung (Titel) [Akronym]
|
|
Dies ist eine HTML-Seite.
styles
|
||||||||||||
Textrichtung ändern (überschreiben) Richtung rechts nach links
|
Achtung: arabischer Text:
|
normal: 123456789
verkehrt: 123456789 Achtung: arabischer Text:
Eingabe: غرب Anzeige: غرب |
||||||||||||
Zeilenumbruch
|
|
Das ist eine beliebige Zeile.
Und hier beginnt eine neue Zeile. |
||||||||||||
Absatz
|
|
blah blah blah
Dies ist ein neuer Absatz. blah blah blah |
||||||||||||
Listen und Tabellen | ||||||||||||||
Aufzählung (ungeordnete Liste)
|
|
|
||||||||||||
Nummerierung (geordnete Liste)
|
|
|
||||||||||||
Tabelle Rand [Tabelle] Zellinnenabstand [Tabelle] Tabellen-Zeile Tabellen-Kopf Tabellen-Daten HTML-Einheit
|
|
Geschützte Leerzeichen kann man verwenden um
|
||||||||||||
Grafik und Links | ||||||||||||||
Block-Element (Teilung) Klasse [Block-Element]
|
|
Dies ist ein Block-Element
styles
|
||||||||||||
horizontale Linie Klasse [horizontale Linie]
|
|
styles
|
||||||||||||
Anker (Sprungmarke) Anker-Name
|
|
|
||||||||||||
Verweis (Link) Adresse (URI) [Verweis]
Ziel
|
oder:
oder:
|
oder: oder:
|
||||||||||||
Bild Quelle [Bild]
Breite [Bild]
Höhe [Bild]
alternativer Text [Bild]
Titel [Bild]
|
oder:
|
![]()
oder:
|
||||||||||||
Eingabefelder und Buttons | ||||||||||||||
Text-Feld Eingabefeld Typ [Text-Feld]
|
|
Gib deinen Namen ein
|
||||||||||||
Text-Bereich Spalten [Text-Bereich]
Zeilen [Text-Bereich]
|
|
|
||||||||||||
Button Eingabefeld Typ [Button]
Wert
Ereignis: beim Klicken Alarm(-Meldung) |
|
|
||||||||||||
Radio-Buttons Eingabefeld Typ [Radio-Button]
Name [Radio-Button]
|
|
Ich finde diese Seite
sehr gut nicht so gut schlecht
|
||||||||||||
Checkboxen Eingabefeld Typ [Checkbox]
Name [Checkbox]
|
|
Ich esse gerne
Curry-Wurst Spaghetti Pizza Döner Salat
|
||||||||||||
Auswahlliste Größe [Auswahlliste] Wahlmöglichkeit [Auswahlliste]
(Option) |
|
Am meisten hasse ich
|
||||||||||||
last not least | ||||||||||||||
CSS-Stylesheets:
Stil-Angaben MIME-Typ [styles] Verweis [styles] Bezug [styles] Adresse (URI) [styles]
|
1. Style-Bereich:
2. separates Stylesheet:
|
Stil-Angaben (Styles) müssen am Anfang der HTML-Seite im HEAD bekannt gemacht werden. Es gibt 2 Möglichkeiten:
|
||||||||||||
Programmierung:
(JavaScript) Quelltext MIME-Typ [JavaScript] Quelle [JavaScript]
|
1. JavaScript-Bereich:
2. separate JavaScript-Datei:
Anmerkung: JavaScript wird hier z.Zt. nur am Rande behandelt. Siehe hierzu z.B.: |
JavaScript-Code kann im HEAD und auch im BODY der HTML-Seite eingefügt werden. Es gibt mehrere Möglichkeiten:
|
||||||||||||
eingebetteter Frame Quelle [Frame]
Breite [Frame]
Höhe [Frame]
|
|
|
||||||||||||
Kommentare |
<!-- das ist ein Kommentar -->
|
|
||||||||||||
Seiten-Titel
|
|
|
||||||||||||
Dokument-Typ
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
|
|
||||||||||||
zusätzliche (Angaben): ( griechisch: meta ) meta-Eigenschaft meta-Inhalt Inhaltstyp [meta] Zeichensatz [meta] |
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
|
|
Format (Style): | So wird eine Klasse mit dem Style geschrieben: | So könnte es dann aussehen: |
---|---|---|
Schriftformatierung | ||
Schriftart (Schrift-Familie)
|
|
Das ist eine Schrift ohne Serifen.
Das ist eine Schrift mit Serifen. (Voreinstellung bei "Windows")
|
Schrift-Stil
normal [Schrift-Stil]
schräg (kursiv)
|
|
Das ist der normale Schriftstil. (Voreinstellung)
Dies ist schräg oder kursiv.
|
Schrift-Größe
Bildschirmpunkt (Pixel) [Schrift] em
relative Maßangabe:1em ≅ Größe des Buchstaben "M" Achtung: Der englische Dezimaltrenner ist ein Punkt (kein Komma) |
|
Diese Schrift ist nur 9 Pixel hoch.
Dies ist jetzt 1,5 mal so hoch wie normal.
|
Schrift-Gewicht
normal [Schrift-Gewicht]
fett
|
|
Das ist normale Schrift. (Voreinstellung)
Das ist fette Schrift.
|
Text-Dekoration
keine unterstrichen
|
|
Hier gibt's keine Dekoration. (Voreinstellung)
Das ist alles unterstrichen.
|
Farbe
blau rgb
|
|
Der Text ist blau. (Voreinstellung: schwarz)
Dieser Text ist voll rot
Und dieser Text ist grün - aber dunkler
|
Textformatierung | ||
Text-Einrückung
|
|
Der Anfang dieses Textes ist 8mm (Millimeter) eingerückt.
|
Text (waagerecht) ausrichten
linksbündig zentriert [Text] rechtsbündig
|
|
Normalerweise ist ein Text linksbündig. (Voreinstellung)
Dieser Text ist zentriert.
Und dieser Text sitzt rechtsbündig.
|
senkrecht ausrichten
(höherstellen) über (tieferstellen) unter
|
|
Hier ist ein Wort höhergestellt
a2 + b2 = c2
Hier ist ein Wort tiefergestellt
A = A1 + A2 |
Zeilen-Höhe
em
relative Maßangabe:1em ≅ Größe des Buchstaben "M" Achtung: Der englische Dezimaltrenner ist ein Punkt (kein Komma) |
|
Dieser Text hat
normale Zeilenhöhe. (Voreinstellung) Dieser Text hat
1,5-fache Zeilenhöhe. |
Rahmen und Abstände | ||
Rahmen (Grenze)
Rahmen-Dicke
Rahmen-Stil
Rahmen-Farbe
Bildschirmpunkt (Pixel) [Rahmen]
durchgezogen (solide) [Rahmen]
rot
|
|
Hier ist ein Block-Element mit einem Rahmen: 1 Pixel durchgezogen rot.
|
Außen-Abstand
|
|
Hier ist das Block-Element mit einem Rahmen: 1 Pixel durchgezogen rot.
Zusätzlich: Außen-Abstand von 10 Pixeln.
|
Innen-Abstand
|
|
Hier ist das Block-Element mit einem Rahmen: 1 Pixel durchgezogen rot.
Zusätzlich: Innen-Abstand von 10 Pixeln.
|
Breite [Rahmen]
Höhe [Rahmen]
|
|
Hier ist das Block-Element mit einem Rahmen: 1 Pixel durchgezogen rot.
Zusätzlich: Innen-Abstand. Zusätzlich: Breite und Höhe
|
Hintergrund-Farbe [Rahmen]
Silber
|
|
Hier ist das Block-Element mit einem Rahmen: 1 Pixel durchgezogen rot.
Zusätzlich: Innen-Abstand. Zusätzlich: Breite. Zusätzlich: Hintergrundfarbe |
Rahmen-Stil [Arten]
(durchgezogen) solide [Stil] gepunktet [Rahmen-Stil] abgesenkt (3D-Effekt) hervorstehend (3D-Effekt)
|
|
|
Einzel-Seiten oben [Rahmen]
unten [Rahmen]
links [Rahmen]
rechts [Rahmen]
gepunktet [Unterstreichung] doppelt |
|
Was guckst du ?
Dies ist eine ganz besondere Unterstreichung.
Dieser Absatz sieht so ungeheuer wichtig aus, dass ich wohl nichts weiter sagen muss ... workaround für inset: workaround für outset: |
Einzel-Abstände oben [Abstand]
unten [Abstand]
links [Abstand]
rechts [Abstand]
automatisch
zentriert [Block]
|
|
Der graue Block steht in der Mitte!
Jetzt steht auch der Text in der Mitte vom Block!
|
Hintergrund-Bilder | ||
Hintergrund-Bild
Hintergrund wiederholen
Adresse (universelle Quellenbezeichnung - URI)
URL wiederhole nur in x-Richtung
|
|
div-Bereich mit Hintergrund-Bild.
|
Maus-Zeiger | ||
Maus-Zeiger
bewegen
West-(Ost)- vergrößern
Hilfe
|
Maus-Zeiger unter Windows |
Die Objekte können bewegt werden:![]() ![]() ![]()
|