HTML - Grundlagen erarbeiten!

Hinweis:
Legen Sie vorzugsweise für jede Aufgabe einen neuen Ordner an
(innerhalb Ihres P_GP-Ordners auf Ihrem Home-Laufwerk, z.B. Aufgabe1, Aufgabe2, Aufgabe3, usw.)!

Aufgabe 1: Erstellen Sie sich eine HTML-Vorlage!

Eine HTML-Vorlage ist eine HTML-Seite, die Sie für alle weiteren HTML-Seiten - welche Sie erstellen werden - als Vorlage benutzen können.
Eine gute Vorlage sieht wie folgt aus:
HtmlVorlage.png
Geben Sie den obigen Quelltext in Ihren Editor ein. Speichern Sie die Datei unter dem Namen "Vorlage.html" in Ihrem Home-Verzeichnis als auch zur persönlichen Sicherung auf Ihrem Stick!
Vergessen Sie auf keinen Fall die Endung ".html" an Ihrer Datei! Denn ansonsten weiss ja niemand (und auch kein Computerprogramm, z.B. der Browser), dass das eine HTML-Datei sein soll.
Überprüfen Sie die farbige Anzeige der verschiedenen Bestandteile Ihrer Seite (Kommentare, Tags, Text, ...). Sollten die Bestandteile Ihrer Seite nicht farbig angezeigt werden, so haben Sie vergessen, in Ihrem Editor das Syntax.-Highlighting einzuschalten - im Proton z.B. unter Menüpunkt 'Syntaxschema' die Einstellung HTML auswählen!
Hinweis:
  • Diese Aufgabe ist natürlich keine Strafarbeit, sondern eine Übung zum Kennenlernen der ersten Tags!
  • Denken Sie bei allen weiteren Aufgaben daran, dass neue Tags entweder in den Header oder den Body gehören! Zwischen html-Tag und head-Tag, /head-Tag und body-Tag, /body-Tag und /html-Tag gibt es keine Tags!

Aufgabe 2: Prüfen Sie Ihre Seite auf Einhaltung der Programmier-Richtlinien!

Der obige Quelltext erfüllt die Forderungen allgemein gültiger Programmier-Richtlinien, siehe Programmier-Richtlinien.
Überprüfen Sie, ob auch Ihr abgetippter Quelltext diesen Programmier-Richtlinien genügt!
Nicht oder falsch angewandte Programmier-Richtlinien führen im Unterricht und in Praxistests zu Punktabzug und schlechteren Noten.
Hinweis:
  • Achten Sie bei der Gestaltung von Internetseiten stets auf Einrückungen, Leerzeilen usw.. Nur so kann eine Zusammenarbeit im Team, mit dem Chef und dem Kunden auf Dauer funktionieren. Nicht lesbarer Quelltext ist annähernd wertlos. Eine Korrektur von Fehlern in schlecht geschriebenen Quelltexten ist sehr schwer.

Aufgabe 3: Prüfen Sie Ihre Seite auf syntaktische Korrektheit!

HTML-Browser haben eine Eigenschaft, welche für manche Menschen ein Segen und für andere Menschen ein Fluch darstellt: Browser zeigen eine "HTML-Seite" immer "irgendwie" an. Manchmal sieht das angezeigte Ergebnis dann ganz anders aus, als es sich der Programmierer gedacht hat.
Damit solche Fehler möglichst frühzeitig gefunden und eliminiert werden können, sollte man stets die syntaktische Korrektheit der Seiten überprüfen.
Syntaktische Korrektheit bedeutet, dass die Seite einem vorgegebenen HTML-Standard entspricht. Das wollen wir jetzt prüfen!
In der ersten Zeile Ihres Browsers finden Sie den entsprechenden Hinweis zum verwendeten HTML-Standard für den Browser.
Die Seite wird wie folgt überprüft:
  • Laden Sie die Seite http://validator.w3.org/
  • Klicken Sie auf "Validate by File Upload"
  • Klicken Sie auf "Datei auswählen"
  • Wählen Sie Ihre Vorlage-Datei aus.
  • Klicken Sie den Check-Button.
Wenn Sie alles richtig gemacht haben, dann erscheint die Meldung "Document checking completed. No errors or warnings to show.".
Ansonsten suchen Sie jetzt bitte sofort Ihre Fehler. Korrigieren Sie die Fehler. Machen Sie bitte erst dann weiter, wenn die obige Meldung beim Prüfen erscheint!
Hinweis:
  • Sie werden feststellen, dass man sich beim Abschreiben sehr schnell vertippt - egal wie viel Mühe man sich gibt. Entsprechend viele Fehler befinden sich dann auf Ihrer Seite. Menschen sind in der Wahrnehmung von Texten stark eingeschränkt. Wir sehen immer nur Teile dessen, was tatsächlich als Text vorliegt. Bitten Sie doch einfach mal einen Mitschüler auf den Text zu sehen, um den Fehler zu finden. Das klappt häufig!

Aufgabe 4: Meta-Tag am Beispiel Author

Meta-Tags stehen im Kopf (innerhalb der head-Tags) der HTML-Seite und enthalten Metadaten. Metadaten sind Ihre HTML-Seite beschreibende Informationen, z.B. "gültig bis", "Inhaltsbeschreibung", "Autor", ...
Finden Sie heraus, wie man sich mit einem Meta-Tag als Author in einer Seite verewigt!
  • Suchen Sie z.B. nach "meta author"
  • Fügen Sie das Author-Meta-Tag in Ihre Vorlage ein und speichern Sie diese entsprechend der bereits mitgeteilten Vorgaben (Home, Stick) ab!
In allen künftigen Abgaben Ihrer Lösungen erwarte ich, dass das Autor-Meta-Tag enthalten ist!
Hinweis:
  • Meta-Informationen werden gerne in Datenbanken verwendet, z.B. von Google. So können dann z.B. alle entsprechend markierten Seiten eines Programmierers gefunden werden.
  • Eine gute Quelle: http://www.w3schools.com/tags/tag_meta.asp

Aufgabe 5: Kommentare

In den Quelltext einer HTML-Seite kann man beliebige Kommentare einfügen, welche in der angezeigten Seite nicht erscheinen.
  • Finden Sie heraus, wie man einen HTML-Kommentar schreibt!
  • Fügen Sie einen Kommentar in Ihre Vorlage ein, welcher erläutert, was ein meta-Tag ist
    (am besten in der Zeile vor dem meta Tag, welches den verwendeten Zeichensatz angibt)!
HTML-Kommentare:
Hinweis:
  • Es gibt verschiedene Arten von Kommentaren. HTML-Kommentare sind gesucht!

Aufgabe 6: Wichtige HTML-Tags (h1,h2,h3, ..., br, div, span, img)

HTML-Tags sind Markierungen von Text, welche durch die Zeichen '<' und '>' eingeschlossen werden. Das Tag wird benannt nach dem umschlossenen Text. Das Tag <head> heisst daher z.B. head-Tag.
Wir wollen jetzt weitere wichtige Tags kennen lernen.:
  • Wie schreibt man HTML-Überschriften in verschiedenen Größen? (siehe h1, h2, h3, ...)
  • Wie schreibt man einen Zeilenumbruch, z.B. für eine Adressenangabe? (siehe br)
  • Wozu dient das div-Tag und wie wendet man es an?
  • Wozu dient das span-Tag und wie wendet man es an?
  • Wie bekommt man ein Foto auf die eigene Seite? (siehe img)
Hinweis:
<!-- Mit dem Tag <br> kann man einen Zeilenumbruch erzeugen -->
lala<br>haha
  • Alle Tags werden heutzutage vorzugsweise klein geschrieben!
  • Alle genannten Tags dieser Aufgabe (h1,h2,h3, ..., br, div, span, img) befinden sich im body, d.h. irgendwo zwischen <body> und </body>. Überprüfen Sie Ihre Seite nach Einfügen der neuen Tags mit dem Validator!
  • Achten Sie auch hier auf die Einhaltung der vorgegebenen Programmier-Richtlinien!

Aufgabe 7: Hyperlinks

Wie schreibt man Hyperlinks? Überlegen Sie sich, was die Bestandteile des folgenden Quelltextes bewirken!
<a href="seite1.html">Seite 1</a>
<a href="mailto:mueller@gmx.de">Müller</a>
  • Erstellen Sie eine einfache HTML-Seite, mit dem Dateinamen "seite1.html", die folgende Links enthält:
    1. Link auf eine Webseite mit dem Dateinamen "seite2.html" im gleichen Verzeichnis.
    2. Email-Link mit der Email-Adresse "borrmann@oszkim.de"
    3. Durch Anklicken des Logos des OSZ KIM wird ein neues Fenster mit der Webseite des OSZ http://www.oszkim.de geöffnet
      (Tipp: An die Stelle des anzuklickenden Textes wird einfach ein img-Tag eingefügt).
      Sie können folgende Grafik verwenden (Anklicken mit rechter Maustaste, Grafik anzeigen auswählen, Speichern im gleichen Verzeichnis wie die HTML-Seite): oszkim.jpg
    4. Link auf eine Datei "info.rtf", welche Sie mit mit Word erstellen.
  • Erstellen Sie eine zweite Webseite im gleichen Verzeichnis mit dem Dateinamen "seite2.html", die einen Link zur Seite "seite1.html" enthält.
  • Auf beiden Seiten ist das Logo des OSZ KIM oben links anzuzeigen.

Aufgabe 8: Eine Aufzählung

Ergänzen Sie Ihre Seite um eine Aufzählung. Dafür verwendet man in HTML das Listenelement. Dieses sieht wie folgt aus:
<ul>
  <li>Thema Eins</li>
  <li>Thema Zwei</li>
  <li>Thema Drei</li>
</ul>

Aufgabe 9: Ein Foto und Text nebeneinander

Um ein Foto und Texte nebeneinander anzeigen zu können, verwendet man (irgendwo zwischen den body-Tags) zweimal das Tag <div> - ergänzt um das Attribut class für die Formatierung, z.B. wie folgt:
<div class="links">
 Text
</div>
 
<div class="rechts">
 Foto
</div>
 
Formatierungsanweisungen stehen im Kopf der HTML-Datei (d.h. zwischen den head-Tags) innerhalb des style-Tags. Der folgende Text kann identisch in Ihre HTML-Datei übernommen werden.
Mit diesen so genannten CSS-Formatierungen "links" und "rechts" können wir die Ausrichtungen der <div>-Tags innerhalb der Seite festlegen.
<style type="text/css">
 
  .links
  {
    position: absolute;
    top:  50px;
    left: 100px;
    background-color: green;
  }
 
  .rechts
  {
    position: absolute;
    top:  50px;
    left: 500px;
    background-color: blue;
  }
 
</style>
Hinweis:
  • Überprüfen Sie nach der Bearbeitung, ob die Formatierungsanweisungen jetzt auch wirklich innerhalb des style-Tags im Header (zwischen den head-Tags) Ihrer Datei stehen!
  • Prüfen Sie erneut die Korrektheit Ihrer Seite mit dem Validator!