HTML-Sourcecode

HTML - Grundlagen und Listen


Autoren: A. Grella, D. Supper, Elektronikschule Tettnang.

HTML ist eine strukturierte Sprache für Internetseiten. Neben Links, lassen sich Bilder, Videos und andere Inhalte einbinden. HTML-Dokumente bilden die Basis des Internets.

In dieser Einheit lernst Du das HTML-Grundgerüst kennen, erfährst wie Du Absätze und Überschriften erstellst sowie Texte hervorheben kannst. Aufzählungen ermöglichen dir eine weitere Strukturierung Deines Inhaltes.

Das HTML-Grundgerüst



<html>
  <head>
    <meta charset="utf-8">
    <title>...</title>
    <meta name="description" content="...">
  </head>
  <body>
    <p>Welcome to my 1st website.</p>
  </body>
</html>

HTML (engl. Hyper Text Markup Language) ist eine strukturierte Sprache für Internetseiten mit Querverweisen (hyper links). HTML besteht aus sogenannten Tags (markup). Dies sind Befehle in dreieckigen Klammern. Als Grundgerüst steht in einem <html>-Tag, der <head>- und <body>-Tag.

Im Head-Bereich <head></head> wird der Zeichensatz bestimmt, der Seitentitel gesetzt, <meta>-Tags für Suchmaschinen vergeben und externe Dateien eingebunden.

Im Body-Bereich<body></body> steht der eigentliche Text der angezeigt werden soll. Dieser wird in Absatz-Bereiche (engl. paragraph) <p></p> geschrieben.

Layoutbereiche werden in <div>-Tags <div class="..."></div> geschrieben. Mit Ihnen wird zu einem späteren Zeitpunkt das Layout der Seite festgelegt.

Beachte: Einrücken erhöht die Lesbarkeit und minimiert die Fehlerrate.

Überschriften und Kommentare



Kommmentare werden wie folgt gekennzeichnet: <!-- Das ist ein Kommentar -->.

Überschriften werden in 5 verschiedenen Größen angeboten <h1></h1> - <h5></h5>:

<!-- 3 verschiedene Überschriften -->
<h1>Größte Überschrift</h1>
<h2>Zweitgrößte Überschrift</h2>
<h3>Drittgrößte Überschrift</h3>

Ein Zeilenumbruch (breakline) wird mit dem Tag<br> gekennzeichnet:

<p>Dies ist ein <br> Zeilenumbruch.<p>

Größte Überschrift

Zweitgrößte Überschrift

Drittgrößte Überschrift


Dies ist ein
Zeilenumbruch.

Text hervor­heben und verschach­teln



Ich bin ein normaler Absatz:
Ich bin fett gedruckt. Ich bin fett gedruckt und kursiv.
Ich bin nur kursiv.

Texte können mit <b></b> fett gedruckt (engl. bold) und mit <i></i> kursiv (engl. italic) geschrieben werden. Dabei ist eine Verschachtelung zulässig:
<p>Ich bin ein normaler Absatz:<br>
<b>Ich bin fett gedruckt.<i>Ich bin fett gedruckt und kursiv.</i></b><br>
<i>Ich bin nur kursiv.</i></p>

Übung 1 my 1st website

Erstelle eine erste Internetseite.

  1. Überlege Dir ein Thema für Deine Internetseite (z.B. Netzwerkmodelle, Tiere, Pizzeria, ...).
  2. Speichere Deine Seite unter /html/index.html ab und öffne die Datei mit Visual Studio Code oder einem anderen Editor.
  3. Erstelle das HTML-Grundgerüst. Verwende den Zeichensatz utf-8, wähle einen Titel und geeignete meta-Tags.
  4. Definiere innerhalb des <body>-Tags zwei verschiedene Layoutbereiche mit <div>-Tags, auch wenn diese erst im späteren Verlauf des Projekts benötigt werden.
  5. Verwende zwei verschiedene Überschriften.
  6. Die Inhalte werden als Absätze in <p>-Tags geschrieben. Verwende zusätzlich kursive und fette Wörter. Verwende alle vorgestellten Grundlagen.
  7. Kontrolliere Deine Seite im Browser.
    Hinweis: Mit Strg +    + I kannst Du das Entwicklertool des Browsers starten, um Deine Seite zu untersuchen.
Internetseite
<html>
  <head>
    <meta charset="utf-8">
    <title>Networking Models</title>
    <meta name="description" content="Diese Seite ...">
  </head>
  <body>
    <h1>Netzwerkmodelle</h1>
    <p>Grundlagen der Netzwerktechnik. Netzwerkmodelle verstehen.</p>
    <h2>...</h1>
    <p>...</p>
  </body>
</html>

Auf­zählungen



Für Aufzählungen werden geordnete Listen mit dem <ol>-Tag (engl. ordered list) verwendet. Einzelne Aufzählung­einträge werden in <li>-Tags (engl. list item) angegeben:
<ol>
  <li>Ich bin eine geordnete Liste.</li>
  <li>Man erkennt mich an der Nummerierung.</li>
</ol>

Der Startwert und das Aufzählungszeichen können mit Attributen manipuliert werden:
<ol type="a" start="5">
  <li>Meine Startposition und mein Aufzählungszeichen wurden manipuliert.</li>
</ol>

Darüber hinaus gibt es ungeordnete Listen mit dem ul-Tag (engl. unordered list):
<ul>
  <li>Ich bin eine ungeordnete Liste.</li>
</ul>

  1. Ich bin eine geordnete Liste.
  2. Man erkennt mich an der Nummerierung.

  1. Meine Startposition und mein Aufzählungszeichen wurde manipuliert.

  • Ich bin eine ungeordnete Liste.

Übung 2 Aufzählungen

Erweitere Deine Internetseite mit einer Aufzählung.

  1. Die Aufzählung beinhaltet eine geordnete und ungeordnete Liste.
  2. Die Listen sollen verschachtelt sein.
Internetseite mit Aufzählung
<ol>
    <li>physical layer</li>
    <li>data link layer</li>
    <li>...</li>
<ol>
<ul>
    <li>http</li>
    <li>ftp</li>
    <li>...</li>
<ul>

Übung 3 Welche Aussage ist wahr?

Wähle die korrekten Aussagen aus.

Nenne zwei Tags die zum HTML-Grundgerüst gehören.
Wähle zwei Antworten.

  1. <head>
  2. <h1>
  3. <html>
  4. <div>


Nenne die Bedeutung des <div>-Tags.
Wähle eine Antwort.

  1. dividend
  2. division
  3. diversity
  4. divinity

Programmiere
diesen Text.
Wähle eine Antwort.

  1. <p>Programmiere <div> diesen Text.</p>
  2. <p>Programmiere </p> </p>diesen Text.<p>
  3. <p>Programmiere <b> diesen Text.</p>
  4. <p>Programmiere <br> diesen Text.</p>


Programmiere diesen Text.
Wähle eine Antwort.

  1. <p><i>Programmiere <b>diesen</i> Text.</b><p>
  2. <p><b>Programmiere <i>diesen</i> Text.</b><p>
  3. <p><b>Programmiere </b>diesen<i> Text.</i><p>
  4. <p><i>Programmiere </i>diesen</b> Text.</b><p>

Ein Anwender möchte folgende Liste:

  1. Bäume

Er programmiert:
<ol type="1" start="2"><li>Bäume</li></ol>
Nenne die Anzahl der Fehler. Wähle eine Antwort.

  1. null
  2. eins
  3. zwei
  4. drei


Ein Anwender möchte folgende Liste:

  1. Elemente

Er programmiert:
<ul type="i" start="2"><li>Elemente</li></ul>
Nenne die Anzahl der Fehler. Wähle eine Antwort.

  1. null
  2. eins
  3. zwei
  4. drei

Wortliste und Satzbausteine



HTML engl. Hyper Text Markup Language
das HTML-­Grundgerüst besteht aus dem Tag <html>...</html>, zwischen welchem das Tag <head>...</head> und das Tag <body>...</body> steht
der Header Im Tag <head>...</head> stehen Einträge wie: Titel der Seite, Zeichensatz, <meta>-Tags für Suchmaschinen sowie Pfadangaben für externe Dateien, welche eingebunden werden.
der Body Im Tag <body>...</body> stehen alle Einträge, welche angezeigt werden sollen.
der Para­graph, -en Das Tag <p>...</p>, steht für einen Absatz.
der Zeilen­umbruch, -"e Das <br>-Tag sorgt dafür, dass der Text in einer neuen Zeile weitergeschrieben wird.
die Über­schrift, -en Es gibt fünf verschiedene Überschrifts­größen <h1></h1> bis <h5></h5>
kursiver Text Kursiver Text <i>...</i> (engl. italic) ist schräg nach rechts geneigt.
fett gedruckter Text Fett gedruckter Text <b>...</b> (engl. bold) ist durch eine stärkere Linien­breite hervor­gehoben.
die ge­ordnete Liste, -n Eine geordnete Liste <ol>...</ol> (engl. ordered list) ist eine nummerierte Aufzählung. Einzelne Aufzählungspunkte werden mit <li>...</li> eingetragen.
die unge­ordnete Liste, -n Eine ungeordnete Liste <ul>...</ul> (engl. unordered list) ist eine nicht nummerierte Aufzählung. Einzelne Aufzählungspunkte werden mit <li>...</li> eingetragen.
© mylime.info