Html-Grundlagen

=HTML Grundlagen= HTML bedeutet Hypertext Markup Language. Ohne HTML würde es das World Wide Web (WWW) in seiner heutigen Form nicht geben. Alle Internetseiten, welche mit einem @Browser angezeigt werden können, basieren auf dieser so genannten Text-Auszeichnungssprache. Mit der Text-Auszeichnungssprache HTML und dem HTTP-Protokoll begann der Siegeszug des WWW in den 90er-Jahren. Eine erste Version von HTML wurde 1989 in der Schweiz am CERN entwickelt für den einfachen Austausch von Informationen zwischen den verschiedenen Standorten des Unternehmens. Es dauerte dann allerdings noch einige Jahre, bis die amerikanische Firma Netscape das Internet-Surfen populär machte. Die geringe Größe, eine hohe Fehlertoleranz und gute Streaming-Eigenschaften solcher in HTML geschriebenen Seiten sorgten für eine schnelle Verbreitung. Jeder Nutzer eines Internetbrowsers betrachtet heute täglich viele in HTML geschriebene Seiten.
 * @http://de.wikipedia.org/wiki/Hypertext_Markup_Language

Inzwischen wird HTML auch von der Fernsehindustrie verwendet (z.B. bei HbbTV und IPTV), siehe oder zur Erstellung der Webseiten der Mediatheken, welche inzwischen problemlos von Tablets und Smartphones genutzt werden können, siehe z.B.
 * @http://de.wikipedia.org/wiki/CE-HTML
 * @http://www.youtube.com/watch?v=Harinqmq6q0
 * @http://www.zdf.de/ZDFmediathek
 * @http://www.ardmediathek.de/

Wer HTML beherrscht, wird auch beim direkten Editieren von XML-Dateien (Ändern, Ergänzen, Löschen von Einträgen) keine Probleme haben, z.B. speichert der VLC-Player seine Wiedergabelisten (*.xspf) im XML-Format. XML ist leicht verständlich, wenn man Grundkenntnisse im Editieren von HTML-Seiten besitzt. code format="xml"   Wiedergabeliste  Sleepwalk.mp3 Sleepwalk Ultravox Dancing with Tears in My Eyes [Disky] 1 193860             1 ...

code Ein weiteres Beispiel einer XML-Playlist liefert der Windows Media Player (@http://de.wikipedia.org/wiki/WPL_%28Dateiformat%29): code format="xml" <?wpl version="1.0"?>   Unbenannte Liste code

**Lektion 1) Wie sieht eine HTML-Seite aus?** Eine einfache HTML-Seite sieht z.B. wie der folgende Text aus und kann mit jedem Editor geschrieben werden. Gespeichert werden muss der folgende Text in einer Datei mit der Dateiendung *.html, damit das Betriebssystem gleich den Browser startet, wenn Sie die Datei doppelklicken. Der Name der wichtigsten HTML-Seite in einem zusammengehörigen Set aus mehreren Seiten lautet index.html. Diese Seite wird vom Webserver gefunden und als erste angezeigt. Jede HTML-Seite besteht im Wesentlichen aus Tags. Tags sind Marken, mit denen der Text markiert bzw. ausgezeichnet wird. Die Marke H1 steht z.B. für Header Size 1. Das bedeutet, dass der zwischen den Marken und befindliche Text als Überschrift dargestellt werden soll. code format="html4strict" <!DOCTYPE html>

"Hallo Welt"-Seite!

body {     background-color:  #39E639; font-family :     Verdana, Arial, sans-serif; background-image: url(wall.jpg); text-align :      center; }

h1   { color: #008500; }

div {     color : white; font-size : 2em; font-weight : bold; }

Grosse Überschrift 1

Hier schwimmt eine schöne Meerjungfrau 

Super was?

und hier geht es jetzt weiter mit irgend etwas anderem z.B. einem Zeilenumbruch (break) und einem Link (anchor)

Das hier ist ein Link, wie Sie ihn aus beliebigen HTML-Seiten kennen.  Hier geht es zu Google 

code

Die aktuell besten Internetseiten zum Nachschlagen für die Arbeit mit HTML und CSS
Zum Schreiben einer einfachen HTML-Seite verwendet man am besten einen Editor wie Notepad++:
 * @http://www.chip.de/downloads/Notepad_12996935.html

Die beste Seite für genaue und verständliche Informationen über HTML und CSS: weitere:
 * @http://www.w3schools.com/
 * @https://www.codecademy.com/learn/web

Farbdesign:
 * @http://colorschemedesigner.com/
 * @http://www.youtube.com/watch?v=-snifsBQPak How to use Color Scheme Designer

Verständnisfragen und Übungen zu Lektion 1
> Skizzieren Sie den groben Aufbau einer HTML-Seite mit den Tags html, head und body! > code Test<\titel> zurück </hmtl code
 * 1) Welche Struktur bzw. welchen grundsätzlichen Aufbau hat jede HTML-Seite?
 * 1) Wird jede HTML-Seite auf jedem Browser gleich angezeigt?
 * 2) Welche der folgenden Aussagen bzgl. des Tags  sind zuftreffend?
 * 3) Head enthält u.a. technische Informationen über die Seite, aber keine Textbestandteile des sichtbaren Inhalts.
 * 4) Head enthält nur den Titel der Seite.
 * 5) Head enthält das Inhaltsverzeichnis der Seite.
 * 6) Was sind Tags? Erläutern Sie die Antwort anhand eines Tag-Beispiels für eine Überschrift in HTML!
 * 7) Wie ändert man den oben im Browser angezeigten Titel einer HTML-Seite?
 * 8) Wie schreibt man einen Kommentar im HTML-Text (nicht sichtbar in angezeigter Seite)?
 * 9) Welches Tag benutzt man, um ein Foto in eine HTML-Seite einzubinden? Notieren Sie das Tag mit allen Attributen (Eigenschaften)!
 * 10) Wie lautet der korrekte HTML-Quelltext für einen Hyperlink auf das Dokument test.htm im aktuellen Verzeichnis mit dem Linktext "Test"?
 * 11) 
 * 12) <a href="test.htm">Test</a>
 * 13) <a name="Test" link="test.htm"></a>
 * 14) Innerhalb welches Tags findet man in einer aktuellen HTML-Seite das Layout der Seite und z.B. die verwendeten Farben und Schrifteigenschaften?
 * 15) Was bedeutet CSS?
 * 16) Korrigieren Sie die Fehler im folgenden HTML-Quelltext:
 * 1) Welcher kostenlose Editor eignet sich besonders gut zum Schreiben von HTML-Seiten?
 * 2) Auf welcher Webseite finden Sie die besten Infos zu den Themen HTML und CSS?
 * 3) Auf welcher Webseite finden Sie die besten Infos zum Thema Farbgestaltung von HTML-Seiten?

HTML-Versionen
Ursprünglich genutzte HTML-Tags wurden in neueren Browsern stets um weitere Tags ergänzt. So entstanden verschiedene HTML-Versionen. Die aktuelle Version ist HTML5. Diese Version wird von allen neuen Browsern unterstützt. Gegenüber älteren Versionen von HTML gibt es im wesentlichen Ergänzungen:
 * @http://www.w3schools.com/html/html5_new_elements.asp
 * @http://www.w3schools.com/html/html5_semantic_elements.asp

In HTML-Seiten befindet sich in der ersten Zeile eine DOCTYPE-Angabe. Diese Angabe kennzeichnet, dass es sich um ein HTML-Dokument handelt. Die folgende Angabe steht für die aktuelle Version HTML5: code format="html4strict" <!DOCTYPE html> code

Zeichensätze, Umlaute (ü, ä, ö, Ü, Ä, Ö) und andere Sonderzeichen
Die ersten HTML-Seiten wurden in englischer Sprache verfasst und orientierten sich an den auf amerikanischen Tastaturen vorhandenen Zeichen. Daher gibt es bei deutschsprachigen Seiten hin und wieder Probleme mit Umlauten und anderen Zeichen, welche im amerikanischen Sprachraum unüblich sind. Europäische Seiten verwenden daher vorzugsweise die beiden folgenden Zeichensätze, welche natürlich auch im Editor eingestellt sein sollten, mit dem die Seiten verfasst werden. Die entsprechende Zeile wird als Information mit in den Header der HTML-Seite geschrieben.

ISO-8859-1:
code format="html4strict" <meta charset="ISO-8859-1"> code UTF-8: code format="html4strict" <meta charset="utf-8"> code Alternativ bzw. ergänzend ist es sinnvoll, Umlaute und weitere Sonderzeichen in HTML-Notation in den Text der Seite einzufügen, z.B.: D.h. die auf der jeweils linken Seite des Gleichheitszeichens befindlichen Zeichen werden in der HTML-Seite durch die rechts stehenden Zeichen ersetzt. Weitere Zeichen siehe hier:
 * ä = &auml; || Ä = &Auml; || ß = &szlig; || > = &gt; ||
 * ö = &ouml; || Ö = &Ouml; || & = &amp; || © = &copy; ||
 * ü = &uuml; || Ü = &Uuml; || < = &lt; || " = " ||
 * @http://www.designerzone.de/webdesign-tipps-html-sonderzeichen-liste.php
 * @http://de.selfhtml.org/html/allgemein/zeichen.htm
 * @http://de.selfhtml.org/html/referenz/zeichen.htm

Metatags
Neben dem eben kennengelernten Metatag für Zeichensätze gibt es eine Menge an weiteren Informationen, die man als Beschreibung der HTML-Seite hinzufügen kann. Diese beschreibenden Informationen zur Seite nennt man Metadaten und die zugehörigen Tags Metatags, siehe hier:
 * @http://de.selfhtml.org/html/kopfdaten/meta.htm

Validatortest
Ist meine Seite korrekt geschrieben? Es macht für den Browser einen Unterschied, ob ein fehlerhafter HTML-Text angezeigt werden soll oder eine korrekte Seite. Eine einwandfrei geschriebene Seite kann vom Browser sehr viel schneller und vor allem korrekt angezeigt werden, während fehlerhafte Seiten Probleme verursachen können. Einen Test der syntaktischen Korrektheit von Webseiten finden Sie unter folgender Adresse: Die Seite wird wie folgt getestet:
 * @http://validator.w3.org/
 * Klicken Sie den Menüpunkt "File Upload" an
 * Laden Sie die zu prüfende Datei ("Durchsuchen")
 * Klicken Sie auf den Button "Check"

Bild zentrieren
Es gibt verschiedene Möglichkeiten, ein Bild innerhalb einer Seite zu plazieren. Eine davon ist die hier folgende: code format="css" img {   position:absolute; left:50%; top:50%; width:300px; /* Breite des Bildes */ height:200px; /* Höhe des Bildes */ margin:-100px 0 0 -150px; /* Erster Wert: -Höhe des Bildes/2; letzter Wert: -Breite des Bildes/2 */ border:0; } code

Absatz (div-Tag) zentrieren
Fügen Sie in den CSS-Attributen des div-Tags in der oben abgebildeten Beispiel-HTML-Seite folgende Eigenschaft hinzu: code format="css" margin: auto; code

Absätze positionieren
z.B. so ... code format="css" #diveins {     color: #00ff00; background-color: red; position: absolute; top: 50px; left: 50px; height: 200px; width: 200px; } code Im Body der HTML-Seite findet sich entsprechend ein Absatz welcher wie folgt über eine ID identifiziert wird, deren Name wie oben abgebildet bei den CSS-Formtierungen wieder auftaucht. code format="html4strict" Tri tra trullala code

Mehrere Seiten miteinander verlinken
Am einfachsten ist es, diese Seiten zusammen in ein Verzeichnis zu kopieren. Mit dem Link -Tag und z.B. als href="seite2.html" bzw. "seite2.html" gelangen Sie dann auf die anderen Seiten. code format="html4strict" <a href="seite2.html>Seite 2</a> code

Details zu HTML5-Tags siehe z.B. hier

 * @https://www.mediaevent.de/tutorial/html-video.html
 * @https://www.mediaevent.de/xhtml/video-audio.html

embedding, iFrame
Beispiel: Vimeo Einfach folgenden Code von der Vimeo-Seite kopieren und in die eigene Seite an eine geeignete Stelle einfügen. code format="html4strict" <iframe src="//player.vimeo.com/video/78921928" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen> code

media type="custom" key="24379650"
Der MS Internet Explorer ist darüber hinaus in der Lage, WMV-Dateien direkt im Browser abzuspielen. Beispiel: code format="html4strict" <embed src='MVI3643.wmv' width='400' height='300' autostart='false' align='center'> code

Fremde Seiten integrieren (iFrame)
code format="html4strict" <iframe src="http://www.songlab.de" width="300" height="200" frameborder="0" > code media type="custom" key="24379658"

Tabellen in HTML
Der Quelltext für Tabellen in HTML sieht z.B. folgendermaßen aus für eine Tabelle von 3 Zeilen und 3 Spalten: code format="html4strict" code Das Tag tr steht für table row (Zeile), das Tag td für table data (Spalte), das Tag th für table header (Spalten Überschriften)

MP3 einbinden
Probieren Sie doch mal dieses hier:
 * @http://www.hintergrundmusik.astroklang.de/musik/musik-einbinden.html
 * @http://aktuell.de.selfhtml.org/artikel/grafik/flashmusik/
 * []

Verständnisfragen und Übungen zu Lektion 2
> Speichern Sie das obige HTML-Beispiel in einer Datei namens test.html z.B. auf dem Desktop Ihres Computers und beseitigen Sie die angezeigten Fehler (2 Errors, 5 Warnings)! Folgende Arbeiten sind hierfür zu erledigen: > Skalieren Sie ein Bild mittels CSS auf das Doppelte bzw. die Hälfte seiner Originalgröße und zeigen Sie es mittig (vertikal und horizontal) an! > Teilen Sie eine HTML-Seite sinnvoll in verschiedene Bereiche "Kopf", "Navigation", "Information" und "Werbung" auf. Nutzen Sie hierfür das div-Tag und CSS-IDs sowie den folgenden Quelltext: > code format="html4strict" <style type="text/css"> div#test {     position: absolute; top: 200px; left: 350px; background-color: lightgreen; //margin: 20; //padding: 20; height: 80px; width: 80px; }     1         2           3         4      Nur ein Beispiel-Text code
 * 1) Was ist ein Validator?
 * 2) Wie kann man feststellen, ob eine HTML-Seite syntaktisch korrekt geschrieben wurde?
 * 3) Warum ist es wichtig, dass eine Seite syntaktisch korrekt geschrieben wird?
 * 4) Was ist ein Metatag?
 * 5) Wie kann man einen Absatz zentrieren?
 * 6) **Übung 1:**
 * Ergänzen Sie eine DOCTYPE-Angabe am Anfang der Seite!
 * Fügen Sie das Metatag für einen Zeichensatz im Head ein!
 * Ergänzen Sie das 'alt'-Attribut im IMG-Tag!
 * 1) **Übung 2:**
 * 1) **Übung 3:**

Mögliche weitere Themen von Interesse

 * Navigationsleiste, Tabs, ...
 * Animiertes Logo (Photoshop?)
 * Ausblick Javascript
 * Cookies

Zur Vertiefung des Themas HTML geht es hier weiter ...

 * http://htmlbasics.wikispaces.com/
 * http://javascriptbasics.wikispaces.com/

Interessante Links
Websites erstellen mit Tools
 * @http://webmasterparadies.de/scripting/css/242-skalierendes-hintergrundbild.html
 * @http://www.miracletutorials.com/howto-embed-vimeo/
 * @http://vimeo.com/help/faq/sharing-videos/embedding-videos
 * @http://www.adobe.com/de/products/muse.html
 * @http://muse.adobe.com/
 * @http://tv.adobe.com/de/watch/lerne-muse-cs6/was-ist-muse/
 * @https://helpx.adobe.com/de/muse/how-to/create-website.html

Hier können Sie nachsehen, wenn Sie zuvor versucht haben, eigene Lösungen zu erarbeiten.

Lösungen:
Welche Struktur bzw. welchen grundsätzlichen Aufbau hat jede HTML-Seite? Skizzieren Sie den groben Aufbau einer HTML-Seite mit den Tags html, head und body! code format="html4strict"

code Wird jede HTML-Seite in jedem Browser gleich angezeigt? code format="html4strict" Wenn der Quelltext korrekt geschrieben ist, dann stimmt der größte Teil überein. code Welche der folgenden Aussagen bzgl. des Tags sind zuftreffend? code Nur Aussage 1 ist richtig. code Was sind Tags? Erläutern Sie die Antwort anhand eines Tag-Beispiels für eine Überschrift in HTML! Wie ändert man den oben im Browser angezeigten Titel einer HTML-Seite? code format="html4strict" Zwischen dem öffnenden und dem schliessenden title-Tag steht der Titel einer Seite (ggf. Tab-Überschrift) code Wie schreibt man einen Kommentar im HTML-Text (nicht sichtbar in angezeigter Seite)? code format="html4strict"
 * 1) Head enthält u.a. technische Informationen über die Seite, aber keine Textbestandteile des sichtbaren Inhalts.
 * 2) Head enthält nur den Titel der Seite.
 * 3) Head enthält das Inhaltsverzeichnis der Seite.

code Welches Tag benutzt man, um ein Foto in eine HTML-Seite einzubinden? Notieren Sie das Tag mit allen Attributen (Eigenschaften)! code format="html4strict" <img src="foto.jpg" alt="Baum" width="100" heigth="100"> Das img-Tag besitzt kein schliessendes Tag code Wie lautet der korrekte HTML-Quelltext für einen Hyperlink auf das Dokument test.htm im aktuellen Verzeichnis mit dem Linktext "Test"? code Aussage 2 ist richtig, siehe obiges Beispiel. code Innerhalb welches Tags findet man in einer aktuellen HTML-Seite das Layout der Seite und z.B. die verwendeten Farben und Schrifteigenschaften? code format="html4strict" <style type="text/css">
 * 1) <link url="test.htm" caption="Test"/>
 * 2) <a href="test.htm">Test</a>
 * 3) <a name="Test" link="test.htm"></a>

code Was bedeutet CSS?

siehe z.B. http://htmlbasics.wikispaces.com/UebungenCSS code Cascading Style Sheets, d.h. Schriftarten, Farben, Größen etc.   -> Layout der Seite

code Korrigieren Sie die Fehler im folgenden HTML-Quelltext: code vorher:

Test<\titel> zurück</a> </hmtl

-

nachher:

Test

<a href="index.html">zurück</a>

code Welcher kostenlose Editor eignet sich besonders gut zum Schreiben von HTML-Seiten? code Notepad++, Proton, Phase5, Eclipse, ... code Auf welcher Webseite finden Sie die besten Infos zu den Themen HTML und CSS? code w3schools.com code Auf welcher Webseite finden Sie die besten Infos zum Thema Farbgestaltung von HTML-Seiten? code http://colorschemedesigner.com/

code =Prüfungsfragen zum Thema HTML und CSS= z.B. oder
 * 1) Beschreiben Sie den groben Aufbau einer HTML-Seite!
 * 2) Was ist ein Hyperlink? Woraus besteht ein Hyperlink?
 * 3) Wie lautet das Tag für die größte Überschrift?
 * 4) Was sind Cascading Style Sheets?
 * 5) Warum trennt man vorzugsweise Formatierungen und Inhalte in HTML-Seiten?
 * 6) Warum ist die Angabe des vom Editor verwendeten Zeichensatzes wichtig für die korrekte Anzeige von Umlauten?
 * 7) Wie heisst der heute vorzugsweise in HTML-Dateien verwendete Zeichensatz?
 * 1) Erstellen Sie eine minimale Vorlage für eine fehlerfreie HTML-Seite!
 * 2) Wie stellt man sicher, dass beliebige Zeichen auf der HTML-Seite vom Browser korrekt angezeigt werden?
 * 3) Welche Inhalte findet man im HEAD-Tag einer HTML-Seite?
 * 4) Welches HTML-Tag nutzt man für die Einteilung der Seite in verschiedene Bereiche?
 * 5) Wie lautet das HTML-Tag für die größte Überschrift?
 * 6) Welches HTML-Tag nutzt man für die Darstellung von Tabellen?
 * 7) Wie bindet man ein Bild in eine HTML-Seite ein?
 * 8) Was sind Cascading Style Sheets (CSS)?
 * 9) Wie zentriert man alle Inhalte einer HTML-Seite in CSS?
 * 10) Nennen Sie drei Eigenschaften von HTML-Tags, welche man mit CSS formatieren kann!
 * 11) Welchen Service stellt die Seite validator.w3.org bereit?