htm l mit Adi Prinz

HTML Basic / Erste Schritte

Wenn sie vorhaben eine eigene Website (Homepage) zu erstellen, dann gibt es dafür unzählige Baukasten-Systeme mit denen sie ihren Internetauftritt gestalten können. Sie brauchen dabei in der Regel keine Kenntnisse von Script- und Programmiersprachen.

Diese Seiten hier beschäftigen sich ausschließlich mit Script- und Programmiersprachen für Personen, die den Aufbau und die Gestaltung von Webseiten selber lernen wollen und sogar damit Geld verdienen möchten.

Bevor wir uns mit dem Schreiben von HTML-Dokumenten beschäftigen, lernen wir einige Begriffe kennen, die wir als Web-Designer kennen sollten. Vorweg eine wichtige Information: HTML ist keine Programmiersprache und wird daher nicht programmiert sondern geschrieben.

HTML ist eine Auszeichnungssprache und dient in erster Linie zum strukturieren von Web-Seiten. Das heisst wir teilen dem Browser mit wo ein Element beginnt (z.B. ein Absatz) bzw. wo ein Element zu Ende ist. Das Aussehen oder Formatierung wird in sogenannten Stylesheets geschrieben. Die Sprache hierfür heisst CSS.

Was ist HTML

HTML (HyperText Markup Language) ist eine textbasierte Auszeichnungssprache, in der Webseiten geschrieben sind. Das HTML-Dokument enthält den Text und zusätzlich HTML-Kommandos (Tags, Attribute und Attributwerte). Ein HTML-Dokument kann u.a. folgende Inhalte aufnehmen:

  1. Text
  2. Verweise (Hyperlinks)
  3. Grafik
  4. Audio
  5. Video
  6. Tabellen
  7. Formulare

Browser führen die Befehle des HTML-Dokuments aus und zeigen es auf dem Bildschirm an.

Beispiel eines einfachen HTML-Dokuments

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>EDV mit Adi Prinz</title>
</head>
<body>
<h1>Das ist eine Überschrift</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod 	tempor invidunt ut labore et dolore 
magna aliquyam erat, sed diam voluptua. At vero eos et accu
et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
</body>
</html>

Was brauche ich?

Sie brauchen einen einfachen Text-Editor und einen Web-Browser, sonst nichts.

Es gibt eine Menge von Text-Editoren die sie für das Schreiben von HTML-Dokumenten verwenden können. Notfalls genügt der Text-Editor von Microsoft. Ich verwende seit einiger Zeit Visual Studio Code als Editor und bin damit sehr zufrieden.

In jedem Fall müssen sie das HTML-Dokument mit der Dateiendung .html (z.B. index.html) speichern. Das Dokument wird dann mit dem Standardbrowser ihres Computers geöffnet.

Was ist CSS

CSS steht für Cascading Style Sheets und bestimmt das Aussehen von Elementen in HTML. Ihr werden also nicht herumkommen, euch mit CSS zu beschäftigen. Während früher Formatierungen in HTML möglich waren, gelten diese Attribute in neueren Versionen als depricated.

Depricated

In den Anfangszeiten des Internet wurde die Auszeichnungssprache HTML auch verwendet, um die äußere Gestaltung der Seiten festzulegen. Heute werden Inhalt und Gestaltung voneinander getrennt. Deshalb sind einige Elemente und Attribute überflüssig geworden und sollten nicht mehr verwendet werden. In diesem Script lernt ihr welche Elemente (Tags) Attribute und Attributwerte ihr verwenden könnt.

WYSIWYG

WYSIWYG ist ein Akronym für "What You See Is What You Get". Bei einem WYSIWYG wird ein Dokument während der Bearbeitung am Bildschirm genauso angezeigt, wie es später bei der Ausgabe aussieht. Sie können mit WYSIWYG eine Website ohne Fachkenntnisse in den Bereichen HTML und CSS erstellen. Einer der bekanntesten Vertreter von WYSIWYG ist das Anwendungsprogramm Dreanweaver von Adobe. WYSIWYG wird in diesem Script nicht behandelt!

Content-Management-Systeme (CMS)

Content-Management-Systeme lassen sich in der Regel schnell und einfach bedienen. Somit ist das Erstellen einer Website ohne Fachkenntnisse in den Bereichen HTML und CSS möglich. Contao, Joomla, Drupal, TYPO3 und WordPress zählen zu den bekanntesten Open Source Content Management Systeme. Der Umgang mit Open Source Content Management Systeme kommt in diesem Script nicht vor!

HTML Codeschnipsel

In diesem Script findet ihr viele HTML-Beispielcodes. Ihr könnt diese Codeschnipsel kopieren und testen. Ich übernehme allerdings keine Garantie auf Korrektheit, das müsst ihr selber entscheiden!

Die Syntax von HTML

Wie schon erwähnt werden wir uns in diesem Script ausschließlich mit HTML5 beschäftigen.

Tag Attribut Attributwert

Wenn der Browser ein HTML-Dokument öffnet, beginnt er in der Regel von oben und liest den Quellcode nach unten ein. Diesen Vorgang erledigt der sogenannte Parser des Browsers. Dabei erwartet er Tags die ihm mitteilen, wo ein neues Element beginnt. 

<p>Das ist ein Absatz</p>

Mit dem p-Tag beginnt ein neuer Absatz (p = Paragraph). Mit dem </p> teilen wir dem Browser das Absatzende mit. Öffnende Tag's werden in spitze Klammern eingeschlossen. Genauso sieht das Ende des Elements aus, nur bekommt der Tag einen Slash zusätzlich.

Das öffnende Tag darf auch noch Attribute und Attributwerte beinhalten. 

<p class='formatierung'>Das ist ein Absatz</p>

Der Absatz hat nun ein Attribut class bekommen. Mit dem Attributwert "formatierung" können wir nun diesen Absatz mit CSS eine spezifische Formatierung zuweisen.

Während in älteren HTML-Versionen Tag- und Attribute in Großbuchstaben geschrieben wurden, gilt für XHTML Kleinschreibung als Standard. In HTML5 ist es nun wiederum egal. Auch folgende Schreibweise ist gültiges HTML. 

<P CLASS='formatierung'>Das ist ein Absatz</P>

Achten sie darauf, dass Attributwerte immer in Anführungszeichen eingeschlossen werden. Wir unterscheiden zwischen einfachen und doppelten Anführungszeichen (single quotes, double quotes). Beide Varianten sind zulässig. 

<p class='formatierung'>Das ist ein Absatz</p>
<p class="formatierung">Das ist ein Absatz</p>

Der Quellcode von HTML

Theoretisch können sie den gesamten Quellcode in einer einzigen Zeile schreiben. Zeilenumbrüche haben in der Regel keine Auswirkung auf die Darstellung des HTML-Dokuments. Die folgenden Beispiele liefern dasselbe Ergebnis: 

<!DOCTYPE html>
<html lang="de"><head><meta charset="UTF-8"><title>EDV mit Adi Prinz</title>
</head><body><p>Das ist ein Absatz</p><p>Das ist noch ein Absatz</p>
</body></html>

<!DOCTYPE html>
<html lang="de">
<head>
 <meta charset="UTF-8">
 <title>EDV mit Adi Prinz</title>
</head>
<body>
 <p>Das ist ein Absatz</p>
 <p>Das ist noch ein Absatz</p>
</body>
</html>

Die Zeilenumbrüche und Einzüge im Quellcode dienen nur der besseren Lesbarkeit beim Überarbeiten des Dokuments.

Standalone-Tags

Ein Standalone-Tag beschreibt ein Element, bei dem kein schließender Tag vorgeschrieben ist. Ein Beispiel dafür ist der harte Zeilenumbruch. In HTML sieht das so aus: 

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>EDV mit Adi Prinz</title>
</head>
<body>
<p>Das ist die erste Zeile <br>
das ist die zweite Zeile
</p>
</body>
</html>

Das HTML-Grundgerüst

Das HTML-Grundgerüst beschreibt den Teil eines Dokuments, der immer derselbe ist. Sie teilen dem Browser mit, welche HTML.Version sie verwenden (mit DTD). Sie geben ihrem Dokument einen Titel (für das Register und Favoriten), und sie teilen das Dokument in wichtige Bereiche auf.

Das HTML-Dokument

Eine HTML-Datei besteht aus folgenden Teilen:

  • Dokumenttyp-Deklaration (DTD) für die HTML-Version
  • Das HTML-Wurzelelement <html> </html>
  • Head <head> </head>
  • Body <body> </body>
<!DOCTYPE html>
<html lang="de">
<head>
<title></title>
</head>
<body>
</body>
</html>

Dokumenttypdeklaration (DTD)

Mit der Dokumenttyp-Deklaration bestimmen sie, welche Version Sie verwenden. Ein Web-Browser kann sich an dieser Angabe orientieren. Für HTML5 sieht das wie folgt aus: 

<!DOCTYPE html>

Das HTML-Wurzelelement

Das html-Tag informiert den Browser, dass eine HTML-codierte Seite vorliegt. Die öffnenden und schließenden <html>-Tags stellen den Anfang und das Ende des HTML-Dokuments dar. Weil es das oberste Element der HTML-Seite ist, wird das html-Tag auch als Wurzel – root – bezeichnet. Das Attribut lang="de" teilt dem Browser mit, welche Sprache sie im Dokument verwenden. Laut W3C-Spezifikation kann das auch entfallen. 

<html lang="de">
Quellcode
</html>

Der Head

Im head-Element liegen die HTML-Tags, die Inhalt und Darstellung der Webseite steuern und den Browser über Beziehungen zu anderen Dateien und HTML-Seiten informieren. Der Inhalt des head-Tags wird nicht auf der Webseite angezeigt, die einzige Ausnahme ist das title-Tag, das von den Browsern im oberen Fensterrahmen gezeigt wird. 

<head>
<title>EDV mit Adi Prinz</title>
</head>

Der Body

HTML body kennzeichnet den Anfang und das Ende des sichtbaren Inhalts der Webseite. Browser stellen nur den Inhalt zwischen dem öffnenden und schließenden body-Tag im Browserfenster sichtbar dar.

Der HTML-Head

Zwischen dem öffnenden und schließenden head-Element liegen die HTML-Tags, welche Inhalt und Darstellung der Webseite steuern. Der Inhalt des head-Tags wird nicht auf der Webseite angezeigt, die einzige Ausnahme ist das title-Tag. Der Inhalt des title-Tags wird im Registerfenster des Browsers gezeigt.

Elemente im HTML-Head

Das head-Element kann die folgenden HTML-Tags in beliebiger Reihenfolge enthalten.

  • title: Titel des Dokuments – das einzige Tag, das unterhalb des head-Tags erforderlich ist.
  • base: setzt die Basis-URL
  • link: setzt die Links des Dokuments zu Dateien, die eingebunden werden – meist zu CSS-Dateien
  • meta: setzt Meta-Informationen wie Schlüsselwörter und Beschreibungen, den Zeichensatz für die Webseite
  • script: Früher wurden auch Scripte grundsätzlich innerhalb des head-Tags geladen. Heute können Scripte überall in HTML vorkommen.
  • style: setzt lokale CSS-Regeln für das aktuelle Dokument
<!DOCTYPE html>
<html lang="de">
<head>
<title>EDV mit Adi Prinz</title>
<base href="http://www.adiprinz.at"> 
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Stylesheets/css.css">
<script src="jquery/jquery.min.js"></script>
<script>
alert("Hallo Welt!");  
</script>
<style>
p {
font-size:16px;
}
</style>
</head>
<body>

</body>
</html>

Titel

Der Titel ist das einzige Element Im Head, das zwingend vorgeschrieben ist. 

<title>Dokument Titel</title>

Attribute im title-Tag

  • Universalattribute

Base

Bei relativen Verweisen zu anderen HTML-Dateien und bei Referenzen von Multimedia oder Grafiken gilt die hier definierbare Basis als Bezug. 

<base href="http://www.adiprinz.at/myFolder/">

Ein Veweis zu einer Datei mit dem Namen home.html im Ordner myFolder könnte so aussehen: 

<a href="home.html">Home</a>

Derselbe Verweis ohne base-Tag muss dann wie folgt aussehen: 

<a href="http://www.adiprinz.at/myFolder/home.html">Home</a>

Mit dem target-Attribut base-Tag können sie auch ein Verweisziel definieren: 

<base href="http://www.adiprinz.at/myFolder/" target=_blank">

In diesem Fall wird die Seite home.html in einem neuen Browserfenster geöffnet.
Verweisziele werden im Kapitel Verweise behandelt.

Attribute im base-Tag

  • Universalattribute
  • href - Basisverweisadresse (URL)
  • target - Zielfenster

Link

Das link-Tag erzeugt einen Link zum Einbinden externer Dokumente. Wenn Stylesheets in einer .css-Datei gespeichert sind, wird die CSS-Datei durch ein link-Tag in das aktuelle Dokument eingebunden.

Das link-Tag kann mehrmals vorkommen. Jedes Vorkommen des Tags muss dabei innerhalb des head-Elements liegen. Der Wert für das href-Attribut ist erforderlich. 

<link rel="stylesheet" href="Stylesheets/style.css">

Ein anderes Beispiel für das link-Tag ist der Link zum Favicon (Icon Symbol im Browserregister) 

<link rel="shortcut icon" href="Images/favicon.ico sizes="16x16" type="image/x-icon">

Attribute im link-Tag

  • Universalattribute
  • href - Adresse zum verlinkten Dokument (URL)
  • hreflang - Sprache des verlinkten Dokument
  • media - Definiert das Ausgabemedium (z.B. screen oder print)
  • rel - Definiert das Verhältnis zum Dokument (z.B. Stylesheet)
  • sizes - Definiert die Grösse (icons)
  • type - MIME-Typ (z.B. text/css)

Script

Im Gegensatz zu den anderen Kopfdaten können Scriptbereiche auch innerhalb des Dokumentkörpers notiert werden (body). Bei Scriptbereichen ist das sogar häufig der Fall. Mit dem script-Tag können sie sowohl externe JavaScript-Dateien einbinden, als auch JavaScript-Code im Dokument schreiben.

Link zu einer externen Javascript-Datei könnte so aussehen: 

<script src="JavScript/jquery.min.js"></script>

Javascript-Code könnte so aussehen: 

<script>
alert("Hallo Welt!"); 
</script>

Attribute im script-Tag

  • Universalattribute
  • async - Script wird ausgeführt, sobald es geladen ist
  • charset - Kodierung, nach der die externe Quelle verarbeitet werden soll
  • defer - Script wird ausgeführt, wenn die Seite geladen ist
  • src - Verweis zum Speicherort
  • type - MIME-Typ (Standardwert = text/javascript)

Style

CSS bestimmt das Aussehen von Elementen in HTML. CSS wird in sogenannten Stylesheets geschrieben, die sie mit dem link-Tag implementieren können. Sie können Styles auch im aktuellen Dokument schreiben, dafür stellt ihnen HTML das style-Tag zur Verfügung. Das style-Tag wird normalerweise im head-Element des Dokuments geschrieben, seit HTML5 kann style auch im Body vorkommen. 

<style>
h1 {color:red;}
p {color:blue;}
</style>

Attribute im style-Tag

  • Universalattribute
  • media - bestimmt das Ausgabemedium
  • type - MIME-Typ (text/css)
  • scoped - Für Styles außerhalb des head-Elements (wird von den meisten Brosern noch nicht unterstützt)

Meta

Meta-Angaben können verschiedene Anweisungen für Webserver, Browser und Suchmaschinen enthalten. Meta-Angaben können Angaben zum Autor, Inhalt oder Zeichencodierung der Webseite enthalten. Sie können aber auch HTTP-Kommandos einsetzen, zum Beispiel zum automatischen Weiterleiten des Web-Browsers zu einer anderen Adresse. 

<meta http-equiv="refresh" content="5; URL=http://www.adiprinz.at/">

Ein Meta-Tag hat in der Regel zwei Attribute. Das eine Attribut lautet entweder name oder http-equiv, und das andere content. Ein Sonderfall ist die Angabe zur Zeichencodierung. 

<meta charset="UTF-8">

Attribute im meta-Tag

  • Universalattribute
  • name - Name des meta-Tags
  • content - Inhalt des meta-Tags
  • charset - Für die Zeichencodierung
  • http-equiv - Für HTTP-header

Das meta-Element mit dem Attribut name ist ein unendliches Thema. Die Informationen haben unterschiedkiche Aufgaben. Sie können Informationen für Suchmaschinen, über Autor, Copyright und Herausgeber einer Webseite geben. Auskunft über die Software, mit der die Webseite erstellt wurde, ob Suchmaschinen die Seite sectionieren sollen oder dienen als Möglichkeit, den Eigentümer von Webseiten zu verifizieren. Welche Angaben für das Attribut name wirklich notwendig sind, ist von daher eine schwer zu beantwortende Frage. An dieser Stelle seien einige meta-Angaben vorgestellt, die auf keiner Homepage fehlen sollten.

Meta-Element, das den Autor des Dokuments bzw. der Web-Site beschreibt. 

<meta name="author" content="Adi Prinz">

Meta-Element, das Keywords für Suchmaschinen beinhaltet. 

<meta name="keywords" content="Adi Prinz, HTML, CSS, PHP, JavaScript">

Meta-Element, für eine Inhaltsbeschreibung des Dokuments. 

<meta name="description" content="Coaching für Web Design und Programmierung">

Meta-Element für Suchmaschinen die nicht nur die erste Seite, sondern auch die hinten liegenden Seiten durchsuchen sollen. 

<meta name="robots" content="section, follow">
oder
<meta name="robots" content="all">

Weitere Kombinationen

<meta name='robots' content='section, follow' >  - Seite wird sectioniert und den Links wird gefolgt
<meta name='robots' content='section, nofollow' >  - Seite wird sectioniert, aber den Links wird nicht gefolgt
<meta name='robots' content='nosection, follow' >  - Seite wird nicht sectioniert, aber den Links wird gefolgt
<meta name='robots' content='nosection, nofollow' >  - Seite wird weder sectioniert noch wird den Links gefolgt

Für responsive Web-Seiten sollten Sie das folgende <meta>-Element in allen Webseiten einfügen: 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Mit der Taste ! (Rufzeichen) und Tabulatortaste wird in Visual Studio Code automatisch ein HTML-Grundegerüst erzeugt.
Folgende Meta-Tags werden dabei generiert: 

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

IE vor Version 11 verwendet nicht unbedingt den Edge-Modus, wenn Sie ihn nicht angeben. Wenn Sie also ältere Versionen von IE unterstützen möchten, ist das Meta-Tag http-equiv="X-UA-Compatible" erforderlich.
Bei den Beispielen dieser Übungen können sie das Meta-Tag entfernen.

meta-Infos W3Schools

Der HTML-Body

Im HTML-body befindet sich der sichtbare Inhalt der Webseite. Browser stellen nur den Inhalt zwischen dem öffnenden und schließenden body-Tag im Browserfenster sichtbar dar. Innerhalb des body-Tags sollten keine Inhalte (character data) direkt stehen. Alle Inhalte sollten in div-, p-, ul- oder ol-Tags, in table- oder andere Block-Tags geschrieben werden.