Seite wird geladen...

HTML - HyperText Markup Language

Eine Einführung für die Schule

Warum schon wieder eine neue HTML-Anleitung ...

Man braucht nur einen Editor ...

Was ist HTML ...

Grundgerüst einer HTML-Seite ...

Aufbau einer HTML-Seite ...

Kopiervorlage: Eine (fast) leere HTML-Seite ...

Was sind Stylesheets ...

Was sind Stylesheets?

Stylesheets (Stil-Seiten) sind besondere Bereiche, die zu einer HTML-Seite gehören und das Layout - das Aussehen der Seite - bestimmen.
Für HTML-Seiten wurde die Stil-Sprache CSS entwickelt, mit der Formate (die Stile) für alle HTML-Elemente festgelegt werden können.
Durch CSS können die Farben der Seite, Hintergrundbilder, die Größe der Schriften und viele weitere Eigenschaften der HTML-Elemente gesetzt werden.
Diese CSS-Stile können direkt in den einleitenden HTML-Tags stehen, aber ...
Man sollte CSS-Stile besser zu einem Stylesheet zusammenfassen und in einem besonderen Stil-Bereich im HEAD der Seite unterbringen:

<style type="text/css"> /* Hier stehen die einzelnen CSS-Stile ... */ </style>
Oder man schreibt sie in eine getrennte CSS-Datei (z.B.: "meinStyle.css" im gleichen Verzeichnis wie die HTML-Seite), die beim Laden der HTML-Seite automatisch mit geladen wird, wenn man im HEAD der Seite folgendes einfügt:
<link rel="stylesheet" href="meinStyle.css" type="text/css" />
Die einzelnen Stile eines Stylesheets bestehen aus einem Selektor (Auswähler) mit einem oder mehreren Formaten.
- Der Selektor gibt an, für welche Elemente die Formate gelten, z.B.:
  
  h1 gilt für alle Überschriften 1. Ordnung <h1>Überschrift...</h1>
  .wichtig gilt für alle HTML-Tags <... class="wichtig" ... >, die zur Klasse "wichtig" gehören.
- Ein Format hat immer die Form: Eigenschaft: Wert;
  Alle Formate stehen in einem Paar geschweifter Klammern { ... }
  Schreibweise z.B.:
  h1 { font-size: 2em; color: red; }
Durch ein solches Stylesheet kann man erreichen, dass mehrere Internetseiten ohne zusätzliche Mühe automatisch ein gemeinsames Aussehen erhalten.
Man kann für seine Seiten auch unterschiedliche Stylesheets anlegen und den Benutzer entscheiden lassen, wie er die Seite sehen möchte.

Kopiervorlage: Eine HTML-Seite mit Style-Bereich ...

Hinweise zu Benutzung der Seite ...

Die Tooltips in den kleinen Popup-Fenstern können auch markiert und kopiert werden:
Vor dem Loslassen der Maustaste "Strg + C" drücken (Windows).

Die wichtigsten HTML-Elemente zum Aufbau einer Internetseite:

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überschrift

styles

Überschrift 2. Ordnung

Unterüberschrift

styles

Überschrift 3. Ordnung

Unterüberschrift

styles

Überschrift 4. Ordnung

Unterüberschrift

styles

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

Die entsprechenden CSS-Klassen müssen im Style-Bereich im HEAD definiert werden.

Abkürzung

(Erklärung) Titel [Abkürzung]

Dies ist z.B. eine Abkürzung.

styles

Wenn man mit der Maus über die Abkürzung fährt, wird die Bedeutung in einem kleinen Tooltip-Fenster erklärt!
Der Internet Explorer kennt dieses Tag nicht! Ersatzweise kann acronym benutzt werden!

Akronym

Erklärung (Titel) [Akronym]

Dies ist eine HTML-Seite.

styles

Wenn man mit der Maus über das Akronym fährt, wird die Bedeutung in einem kleinen Tooltip-Fenster erklärt!

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)

erster Eintrag ...
zweiter Eintrag ...

Nummerierung (geordnete Liste)

erster Eintrag ...
zweiter Eintrag ...

Tabelle

Rand [Tabelle]

Zellinnenabstand [Tabelle]

Tabellen-Zeile

Tabellen-Kopf

Tabellen-Daten

HTML-Einheit

Name	Zeichen	HTML-Entity
Euro	€	€
Copyright	©	©
geschütztes Leerzeichen

Geschützte Leerzeichen kann man verwenden um

zusätzlichen Abstand zwischen zwei Worten einzufügen
zu verhindern, dass zwei Worte beim Zeilenumbruch getrennt werden (vgl. Beispiel unter "iframe")

Grafik und Links

Block-Element (Teilung)

Klasse [Block-Element]

Dies ist ein Block-Element

styles

Die CSS-Klasse "extra" muss im Style-Bereich im HEAD definiert werden.

horizontale Linie

Klasse [horizontale Linie]

styles

Die CSS-Klasse "linie" muss im Style-Bereich im HEAD definiert werden.

Anker (Sprungmarke)

Anker-Name

Dies ist nur ein Anker

Ein Anker kann keine Aktion auslösen, aber man kann von einem Verweis mit einem Klick zu diesem Anker springen.
(siehe Beispiel in der nächsten Zeile)

Verweis (Link)

Adresse (URI) [Verweis]

Ziel

oder:

oder:

Sprung zum Seitenanfang

oder:

hier geht's zur Testseite

oder:

zur Website der OHO

<a href="#top"> bedeutet: Sprung zum Anker "top" (hier am Seitenanfang).
Das Verweis-Ziel "_blank" bedeutet, dass zur Anzeige ein neues Browser-Fenster geöffnet wird.

Bild

Quelle [Bild]

Breite [Bild]

Höhe [Bild]

alternativer Text [Bild]

Titel [Bild]

oder:

Der alt-Text wird statt des Bildes angezeigt, wenn man im Browser die Bild-Anzeige ausschaltet!
Der title-Text wird zusätzlich angezeigt, wenn man mit der Maus über das Bild fährt!

oder:

<a href="#top"> bedeutet: Sprung zum Anker "top" (hier am Seitenanfang).
s.o. unter Verweis.

Eingabefelder und Buttons

Text-Feld
Eingabefeld

Typ [Text-Feld]

Gib deinen Namen ein

Das Attribut size gibt die Länge des Feldes an.
Wenn man die Eingabe weiter verarbeiten möchte, dann benötigt man zusätzlich ggf. das input-Attribut name

Text-Bereich

Spalten [Text-Bereich]

Zeilen [Text-Bereich]

Das Attribut cols gibt die Länge, das Attribut rows die Anzahl der Zeilen des Bereichs an.
Wenn man die Eingabe weiter verarbeiten möchte, dann benötigt man zusätzlich ggf. das Attribut name.

Button
Eingabefeld

Typ [Button]

Wert

Ereignis: beim Klicken

Alarm(-Meldung)

onclick ist ein sog. Event-Handler ....
alert(' ... ') ist ein JavaScript-Befehl und bedeutet: Gib eine Meldung aus.

Radio-Buttons
Eingabefeld

Typ [Radio-Button]

Name [Radio-Button]

Ich finde diese Seite
sehr gut
nicht so gut
schlecht

Wenn man die Eingabe weiter verarbeiten möchte, dann benötigt man zusätzlich ggf. das input-Attribut value.

Checkboxen
Eingabefeld

Typ [Checkbox]

Name [Checkbox]

Wenn man die Eingabe weiter verarbeiten möchte, dann benötigt man zusätzlich ggf. das input-Attribut value.

Auswahlliste

Größe [Auswahlliste]

Wahlmöglichkeit [Auswahlliste]
(Option)

Am meisten hasse ich

Das Attribut size gibt an, wieviele Optionen aufgeklappt sichtbar sind.
Wenn man die Eingabe weiter verarbeiten möchte, dann benötigt man zusätzlich ggf. das option-Attribut value.

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:

Wenn man nur wenige Styles hat, erzeugt man einen Style-Bereich, in den man nach und nach seine Styles einträgt.
Man trägt alle benötigten Styles in eine separate CSS-Datei "meinStil.css" ein.
Dieses Stylesheet wird durch einen Verweis im HEAD der HTML-Seite automatisch mitgeladen.

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:

Wenn man nur wenige Code-Zeilen hat, erzeugt man einen JavaScript-Bereich, in den man nach und nach seinen Code einträgt.
Man trägt alle benötigten Anweisungen und Prozeduren - den Quelltext - in eine separate JavaScript-Datei "meinCode.js" ein. Durch eine "script"-Anweisung wird dieser Quelltext dann automatisch mitgeladen.
JavaScript-Anweisungen können auch direkt in HTML-Tags eingebunden werden insbesondere mit Hilfe sog. Event-Handler. (vgl. das Button-Beispiel).

eingebetteter Frame

Quelle [Frame]

Breite [Frame]

Höhe [Frame]

Wenn man auf den Inhalt des eingebetteten Frames zugreifen möchte, dann benötigt man zusätzlich ggf. das Attribut name oder besser das Attribut id.

Kommentare


				<!-- das ist ein Kommentar -->
				


				<!-- ******* hier beginnt Absatz 1 ******* -->
				


				<!-- nicht vergessen: Copyright überprüfen !!! -->

Kommentare sind eine Hilfe für den Programmierer.
Sie werden im Browser nicht angezeigt.
Man kann sie an beliebigen Stellen der HTML-Seite einfügen.

Seiten-Titel

Dieses Element steht im Seiten-Kopf (HEAD).
Es wird nur in der Titel-Zeile des Browsers angezeigt!

Dokument-Typ


			<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
			"http://www.w3.org/TR/html4/loose.dtd">
			


			oder:

			<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
			"http://www.w3.org/TR/html4/strict.dtd">

Dieses Element muss ganz am Anfang einer HTML-Seite stehen.
Es wird im Browser nicht angezeigt.
Ein fehlender oder falscher DOCTYPE kann aber dazu führen, dass eine Seite in manchen Browsern nicht korrekt dargestellt wird!

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



			oder:

			<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

meta-Angaben stehen im Seiten-Kopf (HEAD).
Dieses meta-Element ist u.a. zuständig für die richtige Darstellung aller Sonderzeichen (ä, ö, ü, ß ...)!
Wenn man eine HTML-Seite "normal" speichert, dann sollte man den Zeichensatz ISO-8859-1 wählen.
Empfehlung:
Wähle die 2. Möglichkeit mit dem Zeichensatz UTF-8 und achte beim Speichern deiner Seite darauf, dass dort die Codierung UTF-8 eingestellt ist!
Dann kannst du (einigermaßen) sicher sein, dass alle Buchstaben und Zeichen in allen Ländern der Welt korrekt angezeigt werden.

Die Tooltips in den kleinen Popup-Fenstern können auch markiert und kopiert werden:
Vor dem Loslassen der Maustaste "Strg + C" drücken (Windows).

Die wichtigsten Style-Elemente:

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") Ein Browser kann den Text nur dann korrekt anzeigen, wenn die angegebene Schriftart auch auf dem Rechner des "Surfers" installiert ist. Auf anderen Rechnern (mit anderen Betriebssystemen) oder in anderen Ländern sind andere Schriftarten installiert. Daher sollte man niemals nur eine bestimmte Schriftart angeben, sondern immer eine Schrift-Familie!
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. Alle Schriftgrößen können (sollten) in em angegeben werden. Man erhält dadurch ein sehr flexibles Layout. Die Seite wird barrierefreier (für Leute mit Sehschwäche besser lesbar!) s.u.
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 rgb(Rotwert,Grünwert,Blauwert) Die Werte sind jew. Zahlen zwischen 0 und 255. rgb(0,0,0) bedeutet: keine Farbe (schwarz). rgb(255,255,255) bedeutet: alle Grundfarben voll aufgeblendet (weiß). Es gibt daher 256 · 256 · 256 = 16.777.216 verschiedene Kombinationen - über 16 Mill. Farben
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. Das Block-Element ist hier ein div-Bereich, der den Text enthält. (s.o.) Die Größe des Rahmens passt sich automatisch dem Text an.
Außen-Abstand		Hier ist das Block-Element mit einem Rahmen: 1 Pixel durchgezogen rot. Zusätzlich: Außen-Abstand von 10 Pixeln. Die Größe des Rahmens passt sich automatisch dem Text an.
Innen-Abstand		Hier ist das Block-Element mit einem Rahmen: 1 Pixel durchgezogen rot. Zusätzlich: Innen-Abstand von 10 Pixeln. Die Größe des Rahmens passt sich automatisch dem Text an.
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 Hier ist die Größe des Rahmens festgelegt ... und der Text muss sich anpassen.
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)		Der Internet Explorer hat Probleme mit inset und outset! Vgl. den "workaround" in der nächsten Zeile, der in allen Browsern funktioniert.
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. Die Hintergrund-Bilder "WB02115_.gif" und "black-feet.gif" müssen im Verzeichnis der HTML-Seite liegen. Parkettierung ...
Maus-Zeiger
Maus-Zeiger bewegen West-(Ost)- vergrößern Hilfe	Maus-Zeiger unter Windows	Die Objekte können bewegt werden: Klick ruft eine Hilfe auf: Ein anderes Bild des Maus-Zeigers hat immer eine besondere Bedeutung. Man sollte den Cursor nur ändern, wenn die Maus eine neue Funktion bekommen hat! Diese neuen Funktionen entstehen nicht durch die Änderung des Cursors, sie müssen vorher programmiert werden (z.B. mit JavaScript) Hier wurden diese Effekte mit Hilfe einer DHTML-Bibliothek erreicht: siehe hierzu Walter Zorn: DHTML Drag&Drop

Ergänzungen:

Was man nicht (mehr) benutzen sollte ...

Was man nicht (mehr) benutzen sollte:

... aber viele HTML-Editoren leider immer noch machen

HTML-Tags (und Attribute)	zeitgemäßer Ersatz	So sieht's aus:	Bemerkungen
Einige unerwünschte (deprecated), varaltete HTML-Tags und -Attribute
unterstreichen ...		styles unterstreichen	Diese Tags sind "Megaout" und werden von neuen Browsern in Zukunft wohl nicht mehr unterstützt. Außerdem bewirken diese Tags nur eine physische (graphische) Text-Auszeichnung. Besser: logische Auszeichnung, die Struktur und Gliederung der Seite erkennen lässt und von verschiedenen (zukünftigen) Ausgabegeräten verstanden wird (Screenreader, Braillezeile ...). Ein Text mit font-Tags lässt sich nachträglich nur sehr schwer ändern und verbessern. Style-Angaben gehören in ein Stylesheet - und nicht in den BODY der HTML-Seite! Es gibt schon jetzt Probleme bei einigen Browsern bzgl. der Schreibweise (bgcolor - bgColor)
zentrieren ...	Elemente im Block: den Block selbst:	styles Text mittig styles Block mittig
Schriftart ...		styles andere Schrift
body-Attribut Hintergrund-Farbe	oder einfach:	styles oder einfach: styles
Nur physische (graphische) Text-Auszeichnung
schräge Schrift ...	einfach schräg: oder wichtig: oder Zitat: oder Adresse:	styles schräg wichtig Zitat Adresse	Barrierefreie Seiten erfordern eine logische Auszeichnung, die Struktur und Gliederung der Seite erkennen lässt. Ein Screenreader möchte z.B. den Grund der Hervorhebung wissen: Ist dieser Text einfach nur schräg oder ist er wirklich wichtig (em, strong) oder handelt es sich um ein Zitat (cite), eine Adresse (address), eine Tastaturangabe (kbd) ...?
fette Schrift ...	einfach fett: oder sehr wichtig:	styles fett sehr wichtig

Die häufigsten Pannen beim Schreiben einer Internetseite ...

Die häufigsten Pannen beim Schreiben einer Internetseite:

Problem:	mögliche Ursache:	merke:
Teile von HTML-Tags werden angezeigt: h1> oder /h1>	Bei einem Tag wurde die erste spitze Klammer vergessen: _h1> _/h1>	Jedes HTML-Tag muss mit einer spitzen Klammer beginnen und mit einer spitzen Klammer enden. Schreibe alle Klammern immer gleich als Pärchen: < ... >
Ein Element ist plötzlich verschwunden	Bei einem Tag wurde die zweite spitze Klammer vergessen: <h1_ </h1_
Plötzlich wird der ganze Seiten-Text groß oder fett angezeigt.	Ein HTML-Tag wurde nicht geschlossen: <h1>Überschrift___	Schreibe das schließende Tag immer sofort mit: <h1> ... </h1>
	Bei einem schließenden Tag wurde der Slash vergessen: <h1>Überschrift<_h1>
	Bei einem schließenden Tag wurde die zweite spitze Klammer vergessen: <h1>Überschrift</h1_
Ein Bild wird nicht angezeigt	Der Datei-Name wurde falsch geschrieben. Der Pfad zum Bild ist nicht korrekt: <img src="Bilder/meinBild.jpg" ... >	Kopiere den Dateinamen der Original-Datei. Kontrolliere, ob das Bild wirklich in dem angegebenen Verzeichnis ist.
	Die Quelle (engl.: source) des Bildes wurde falsch geschrieben: scr statt src.	Kleiner Fehler - große Wirkung !
	Bei der Quelle wurde das zweite Anführungszeichen vergessen: <img src="Bilder/meinBild.jpg_ ... >	Schreibe Anführungszeichen immer gleich als Pärchen: " ... "
Ein neu eingefügtes Element wird nicht angezeigt	Das Element steht außerhalb des BODY-Bereichs	Kontrolliere vor dem Einfügen, ob der Cursor an der richtigen Stelle im BODY steht!
Es wird die "falsche" Farbe angezeigt	Der Name der Farbe wurde falsch geschrieben oder der Browser kennt diesen Farbnamen nicht: color: dark−blue;	Die (englischen) Farbnamen gehören nicht zum Pflichtprogramm der Browser. Zu jedem Farbnamen gibt es aber RGB-Zahlenkombinationen, die jeder Browser erkennt! z.B. dunkles Blau: darkblue = #00008B = rgb(0, 0, 139) Vergleiche hierzu bei SELFHTML: VGA-Farbpalette (16 Farben) mit Farbnamen Netscape-Farbpalette (216 Farben) Netscape-Farbnamen (120 zusätzliche Farben)

Was man immer beachten sollte ...

Was man immer beachten sollte:

Bitte beachten:	Erklärung:
Bilder
Zu jedem Bild gehört das Attribut alt: `<img src="z-dino2.gif" ... alt="Dino-Bild" />`	Wenn der Browser ein Bild nicht finden kann oder wenn man im Browser die Bildanzeige abgeschaltet hat, dann zeigt er zumindest den Inhalt des alt-Attributs als Text an. So weiß man, dass da eigentlich ein Bild auf der Seite ist. Barrierefreie Seiten müssen einen Eintrag im alt-Attribut haben, damit ein Screen Reader diesen Text vorlesen kann oder eine Braile-Zeile diesen Text ausgeben kann.
Zu jedem Bild gehören die Attribute width und height: `<img src="z-dino2.gif" ... width="152" height="48" />`	Der Browser kann ein Bild auch dann richtig anzeigen, wenn die Höhe und Breite des Bildes nicht angegeben werden. Es entsteht aber ein unschöner Seitenaufbau. Die Texte der Seite werden schneller geladen als die Bilder. Wenn man die Größe der Bilder angibt, dann lässt der Browser den Platz für die Bilder frei und nach und nach werden die Bilder dann an ihrem richtigen Platz angezeigt. Wenn man die Größe nicht angibt, kann kein Platz für die Bilder reserviert werden und der Text wird erst mal hintereinander angezeigt. Immer wenn dann ein Bild geladen ist, wird der dort stehende Text nach unten oder zur Seite weggeschoben bis endlich alle Bilder geladen sind: Die Seite "ruckelt" bei jedem Bild!
Dateinamen und Verzeichnisnamen
Bei Namen von Dateien und Verzeichnissen für Internetseiten sind einige Besonderheiten zu beachten: Außer Buchstaben und Zahlen sind nur folgende Zeichen erlaubt: Punkt (.) vor der Dateiendung Minus (-) oder der Unterstrich ( _ ) Leerzeichen sind verboten: falsch: meine Seite.html Bild 1.jpg /meine Bilder/ richtig: meineSeite.html meine_Seite.html meine-Seite.html Bild1.jpg Bild_1.jpg Bild-1.jpg /meineBilder/ /meine_Bilder/ Alle anderen Sonderzeichen wie: , ; : + ( ) = ? ! usw. sind verboten! Auch die (deutschen) Sonderzeichen funktionieren in der Regel nicht: falsch: Ärgern.jpg Ögün_1.gif meineStraße.html /Blödsinn/ richtig: Aergern.jpg Oeguen_1.gif meineStrasse.html /Bloedsinn/	Webseiten erzeugt man (meistens noch) auf dem eigenen Rechner. Um sie ins Internet zu stellen, müssen sie auf einen anderen Rechner - den Server des Internet-Providers - übertragen werden. Von dort holen sich die Surfer diese Seiten dann auf ihren Rechner zu Hause: Manches was auf dem eigenen Rechner erlaubt ist, funktioniert aber auf den anderen Rechnern nicht! Z.B. lange Dateinamen mit Leerzeichen oder deutschen Sonderzeichen: Das Bild "meine Bilder/Glücklich 2.jpg" kann im Internet niemals angezeigt werden!
Der Dateiname eines Bildes "Bild_1.jpg" im Unterverzeichnis "alle_meine_Bilder" heißt unter "Windows": "alle_meine_Bilder\Bild_1.jpg" Auf einer HTML-Seite heißt der Dateiname dieses Bildes aber: "alle_meine_Bilder/Bild_1.jpg"
Tabellen
Tabellen sollten auch auf Webseiten nur so verwendet werden, wie man es mit einem Textprogramm machen würde: zur übersichtlichen Darstellung einer Adressliste zum Anzeigen eines Termin- oder Stundenplans zur geordneten Darstellung von beliebigen Datensammlungen Leider werden Tabellen von (schlechten) HTML-Editoren noch immer für das Seiten-Layout (Ordnen der verschiedenen Inhalte der Seite: Überschriften, Texte, Bilder ...) missbraucht. Solche Programme sind veraltet und sollten nicht mehr benutzt werden!	Alles, was man mit Hilfe von Tabellen gestalten kann, geht auch ohne Tabellen! Ein Tabellen-Layout widerspricht den Anforderungen der Barrierefreiheit:

Rechtliches ...

Rechtliches:

Bitte beachten:	Erklärung:
Inhalt der Webseite
Das Internet ist kein rechtsfreier Raum! In Deutschland gilt das Grundrecht der freien Meinungsäußerung. Dieses Grundrecht gilt aber nur soweit dadurch keine anderen Grundrechte eingeschränkt werden. Dies gilt auch für deutsche Webseiten. So ist es u.a. verboten: andere zu verleumden oder zu verunglimpfen zu Gewalttaten oder anderen Straftaten aufzurufen geklaute Dateien zu zeigen oder anzubieten nationalsozialistische Propaganda zu betreiben ... Jeder Besitzer einer Webseite (Webmaster) ist für den Inhalt seiner Seite voll verantwortlich und ggf. haftbar.	Sätze wie: Alle Deutschen sind Nazis. Alle Italiener sind in der Mafia. ... sind nicht nur dumm sondern strafbare Verleumdungen! Manche Parolen, die in Fußballstadien gegrölt werden, sind eindeutig Aufrufe zur Gewalt. So etwas ist primitiv und auch strafbar. Eine fremde Webseite ganz oder teilweise zu kopieren und selbst ins Internet zu stellen ist Diebstahl und damit verboten und strafbar. Bilder, Filme, MP3-Songs, gecrackte Programme zu kopieren und auf seiner Seite anzubieten ist natürlich nicht erlaubt. (s.u.)
Bilder aus dem Internet: Das Internet ist kein Selbstbedienungsladen! Die Webseiten, die Texte und Bilder, die Videos und Musiktitel - alles hat einen rechtmäßigen Besitzer. Er hat das Copyright). Für den privaten Gebrauch zu Hause darf man vieles benutzen und auch für Internetseiten, die in der Schule bleiben und im Internet nicht zu sehen sind. Auf die eigene Homepage* oder die Webseite der Schule darf man ein Bild nur stellen wenn der Besitzer des Copyrights die Benutzung erlaubt Falls eine Privatperson abgebildet ist: wenn diese Person selbst damit einverstanden ist. Wenn man dieses Copyright nicht beachtet, dann ist das Diebstahl und das kann sehr teuer werden (mehrere Hundert oder sogar Tausend EURO pro Woche!!!) Bevor man ein Foto von einer Webseite klaut, sollte man dort unter Copyright, Rechtliches, rechtlicher Hinweis, Nutzungsbedingungen ... (notfalls unter Impressum, Haftungsbeschränkung, Disclaimer) nachsehen, was erlaubt und was verboten ist!!!	Zu jedem Bild gibt es ein Original, das von einem "Künstler" gezeichnet oder fotografiert worden ist. Er ist der Urheber und besitzt das Copyright) Er bestimmt, was man mit seinem Bild machen darf und was nicht. Das Foto eines Popstars oder eines Autos* gehört meistens nicht dem Star oder der Autofirma sondern dem Fotografen oder einer Agentur. Diese Fotos enthalten oft ein - unsichtbares - digitales Wasserzeichen, durch das der Besitzer seine Fotos erkennen kann. Es gibt Computer-Programme, die Tag und Nacht Millionen von Webseiten kontrollieren und nach solchen Fotos suchen. Wenn sie ein geklautes Foto entdecken, bekommt der Besitzer der Webseite ein unfreundliches Schreiben ... und oft eine dicke Rechnung ... *) Streng genommen gibt es in Deutschland kein Copyright, hier gilt das (vergleichbare) Urheberrecht.
Verweise (Links) auf andere Webseiten: Wenn man einen Link zu einer Webseite setzt, die strafbare Inhalte hat, macht man sich selber strafbar!	Mach sowas lieber nicht: Hier könnt ihr eure Lieblings-Songs kostenlos runterladen: www.MP3-Hacker.com
Markennamen und Markenzeichen - Logos Hier gelten das Markenrecht und das Urheberrecht: Benutze ein fremdes Logo nie für eigene Zwecke! Benutze niemals einen Markennamen ohne Hinweis auf die Firma, der dieser Name gehört!	Viele Betriebe verstehen auf diesem Gebiet keinen Spaß! Beauftragte Rechtsanwälte verschicken sog. Abmahnungen mit der Aufforderung, diese Inhalte unverzüglich von der Webseite zu entfernen. Sie berechnen dafür eine Aufwandspauschale und ggf. einen Schadensersatzbetrag Oft geht es hierbei um vierstellige Beträge!
Pflichten des Webmasters
Jede Homepage sollte ein Impressum haben, das die Anschrift und eine gültige eMail-Adresse enthält leicht erkennbar ist von jeder Seite aus unmittelbar erreichbar ist vergleiche: Internetfallen: Anbieterkennzeichnung / Impressum	Ein Impressum ist für private (nicht gewerbliche) Homepages zwar nicht vorgeschrieben, aber schon ein vom Provider geschaltetes Werbebanner könnte die Seite zu einer gewerblichen Website machen! ... und dann könnte ein fehlendes Impressum teuer werden! (Abzocke durch Abmahnungen) Adressen-Sammler nutzen dieses Impressum gerne, indem sie Robot-Programme durchs Internet schicken, um an Hunderttausende gültige eMail-Adressen zu gelangen. Dies kann man verhindern (zumindest erschweren), wenn man die eMail-Adresse nicht als Text sondern als Bild in die Seite stellt.
Jede Homepage sollte - zur eigenen Sicherheit - einen Haftungsausschluss (Disclaimer) haben vergleiche: meinen kurzen Disclaimer am Ende dieser Seite Disclaimer / Haftungsauschluss	Ob ein Disclaimer in Deutschland bei Streitigkeiten wirklich hilft, ist z.Zt. (2007) noch nicht geklärt. Die meisten Webmaster gehen aber noch davon aus, dass ein Disclaimer auch vor Gericht eher nützt als schadet.

Weiterführende Links zu diesen Themen:

Urheberrecht und Internet
Fallbeispiele: Abmahnungen und Urheberrechtsverletzungen bei Homepage, Foren und Ebay
Internetrecht - Abmahnung-Bilder-Fotos
Internetfallen: Anbieterkennzeichnung / Impressum
Impressumspflicht
Disclaimer / Haftungsauschluss

Todo-Liste ...

Haftungsausschluss (Disclaimer):

Alle Inhalte dieser Seite wurden gründlich recherchiert und nach bestem Wissen dargestellt. Die hier vorliegende Zusammenstellung erhebt aber keinen Anspruch auf Vollständigkeit. Für etwaige Schäden, die durch falsche oder unvollständige Informationen entstehen könnten, übernimmt der Autor keinerlei Haftung.

Ich behalte mir ausdrücklich vor, Inhalte dieser Seite - ohne Vorankündigung - zu verändern, zu ergänzen oder gänzlich aus dem Netz zu nehmen.

Copyright:

Diese Seite darf an allgemeinbildenden Schulen für Unterrichtszwecke beliebig kopiert und genutzt werden.
Die kommerzielle Nutzung in jeder Form - auch auszugsweise - ist verboten.
© M. Schoettler, Berlin 2007

Impressum:

Michael Schoettler, Schirpitzer Weg 22, 12355 Berlin

HTML - HyperText Markup Language

Eine Einführung für die Schule

Warum schon wieder eine neue HTML-Anleitung ...

Warum schon wieder eine neue HTML-Anleitung ?

Man braucht nur einen Editor ...

Man braucht nur einen Editor:

Was ist HTML ...

Was ist HTML?

Grundgerüst einer HTML-Seite ...

Grundgerüst einer HTML-Seite:

Aufbau einer HTML-Seite ...

Aufbau einer HTML-Seite:

Kopiervorlage: Eine (fast) leere HTML-Seite ...

Kopiervorlage: Eine (fast) leere HTML-Seite:

Was sind Stylesheets ...

Was sind Stylesheets?

Kopiervorlage: Eine HTML-Seite mit Style-Bereich ...

Kopiervorlage: Eine HTML-Seite mit Style-Bereich:

Hinweise zu Benutzung der Seite ...

Hinweise zu Benutzung der Seite:

Die wichtigsten HTML-Elemente zum Aufbau einer Internetseite:

Hauptüberschrift

Unterüberschrift

Unterüberschrift

Unterüberschrift

Die wichtigsten Style-Elemente:

Ergänzungen:

Was man nicht (mehr) benutzen sollte ...

Was man nicht (mehr) benutzen sollte:

Die häufigsten Pannen beim Schreiben einer Internetseite ...

Die häufigsten Pannen beim Schreiben einer Internetseite:

Was man immer beachten sollte ...

Was man immer beachten sollte:

Rechtliches ...

Rechtliches:

Todo-Liste ...

Todo-Liste: