[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:


(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.

Tipps zum Einrücken beim Visual Studio Code Editor
(1) Automatisches Formatieren des gesamten Listings
   * Kontextmenü
      - Rechte Maustaste an freier Stelle im Editor
      - Kontextmenü => "Dokument formatieren"
   * Tastenkombination
      - SHIFT + ALT + f
(2) Rechts einrücken / verschieben
   * eine Zeile
      - Cursor in einer Zeile vor den Text
      - TAB - Taste drücken
   * mehrere Zeilen
      - mehrere Zeilen markieren
      - TAB - Taste drücken
(3) links einrücken / verschieben
   * eine Zeile
      - Cursor in einer Zeile vor den Text
      - Tastenkombination SHIFT + TAB drücken
   * mehrere Zeilen
      - mehrere Zeilen markieren
      - Tastenkombination SHIFT + TAB drücken

Hier unten siehst du einen (hoffentlich :-) übersichtlichen Quelltext:
Der Code:

<!DOCTYPE html>
<html lang="de"><!-- Anfang der Webseite und Angabe der verwendeten Sprache-->

<head><!-- Anfang des head - Bereichs-->
    <!-- innerhalb des head - Bereichs wird eingerückt!-->
    <title>Titel</title><!-- Titel der Webseite-->
    <meta 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.12.2020 von der Open Clip Art Library heruntergeladen<br>
    - URL: https://openclipart.org/detail/307/cartoon-cat-face-by-gerald_g
</body>
</html><!-- Ende der Webseite-->

[Beispiel zur Lektion] - beachte dabei den Quelltext!

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!