[html5.wirlernen.at] [Aufgaben zur Lektion] [Video zur Lektion]

Lektion 16: Übersichtlich HTML programmieren

Hier erhältst du Hinweise wie man ein HTML - Listing möglichst übersichtlich gestalten sollte...
(1) Man sollte in den Quelltext Kommentare einfügen - Nicht vergessen:
<!-- Kommentar, einzeilig-->
<!-- Kommentar, mehrzeilig
(2) Man sollte den Quelltext übersichtlich gliedern:
* Anfangtags und Endtags immer mit dem GLEICHEN Abstand vom linken Rand einrücken.
* Ineinander verschachtelte Tags sollten schrittweise immer mehr eingerückt werden.
Hier unten siehst du einen (hoffentlich :-) übersichtlichen Quelltext:
Der Code:
<!DOCTYPE html>
<html><!-- Anfang der Webseite-->

<head><!-- Anfang des head - Bereichs-->
    <!-- innerhalb des head - Bereichs wird eingerückt!-->
    <title>Titel</title><!-- Titel der Webseite-->
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>

<body><!-- Anfang des body - Bereichs-->
    <!-- innerhalb des body - Bereichs wird eingerückt!-->
    <!-- Grafik als Hyperlink-->
    <a href="http://openclipart.org/" target="_blank">
        <!-- der <img  > - tag wird eingerückt-->
        <img src="images/Gerald_G_Cartoon_Cat_Face.jpg" width="400" height="296" alt="Cartoon">
    </a><br>
    <!-- Hinweis auf den Ursprung der Grafik-->
    Die obige Grafik wurde am 19.7.2012 von der Open Clip Art Library heruntergeladen<br>
    - URL: http://openclipart.org/detail/307/cartoon-cat-face-by-gerald_g
</body>
</html><!-- Ende der Webseite-->
[Beispiel zur Lektion]


Für mehr Infos klicke hier OBEN auf der Seite auf das Video - Symbol...
Augabenstellung:
1. Erkläre was man (also nicht irgendwo abschreiben :-)) unter dem übersichtlichen HTML - Programmieren versteht!
2. Erzeuge in einem Editor ein HTML5 - Grundgerüst! Füge dort im Grundgerüst an der richtigen Stelle eine Tabelle mit beliebig vielen Zellen, 3 mit HTML - Tags erzeugte Überschriften, 2 horizontale Trennlinien und eine geordnete Liste mit 8 Elementen ein! Sorge dafür dass du besonders übersichtlich programmierst - achte darauf was alles dazu gehört und mach es dir beim Programmieren nicht zu leicht!!! Speichere diese Datei als 016.html. Wähle für diese Webseite mit dem entsprechenden Tag einen aussagekräftigen Titel!