HTML-GRUNDLAGEN | Überblick

Stefan Tussler

Medienfachwirt Digitalmedien

2001

Mediengestalter für Digital- und Printmedien

Fachrichtung Medienoperating


2003

Firmengründung

medienplanung | beratung | design


Zertifiziert Datenbanken/PHP Programmierung

Fachrichtung Relationale Datenbanken (MySQL, SQL)

und Webprogrammierung


2010

Geprüfter Medienfachwirt (IHK)

Fachrichtung Digitalmedien


Zertifiziert Online Marketing Manager (IHK)


Mitglied im IHK-Prüfungsausschuss

  • Mediengestalter/in Digital- und Printmedien
  • Geprüfter Medienfachwirt/in
  • Geprüfter Industriemeister/in


Dozent Macromedia

HTML5  |  CSS3  |  PHP  |  Datenbanken  |  WordPress  |  Joomla!  |  Typo3

HTML-GRUNDLAGEN     | Überblick

Die wichtigsten HTML-Befehle


Allgemeine Regeln von HTML


Texte, Bilder und Grafiken in HTML strukturieren


Allgemeiner Seitenaufbau der Dokumentenkopf

TITLE, META, LINK und mehr


Relative oder absolute Pfade


Arbeiten mit Text

Text gliedern und formatieren

Absatz und Zeichenformatierung, Listen


Arbeiten mit Grafiken

Grafiken in Text einbinden, Grafiken als Hintergrund

HTML-GRUNDLAGEN | Websitetypen

HTML-GRUNDLAGEN | Geschichte von HTML

HTML-GRUNDLAGEN | Sprachen

HTML-GRUNDLAGEN | Die Bearbeitung

Der Editor

• Adobe Brackets

• Notepad++

• Eclipse

• Editor (Windows)

• Dreamweaver (Adobe)*


*kostenpflichtige Software


Warum per Editor?

Zunächst ist es wichtig die Grunzüge von HTML zu verstehen um die Funktionsweise nachvollziehen zu können. Des Weiteren unterliegen wir so nicht der Eingeschränktheit der grafischen Software.


HTML-GRUNDLAGEN | Die Bearbeitung

Erstellen einer „index.html“

• Datentyp auf „.html“ setzten

• Dateinamen: nur Kleinbuchstabe a-z;

   Ziffern 0-9 sowie Unterstrich und Bindestrich

• Kodierung auf UTF-8 setzen


UTF-8 ist die am weitesten verbreitete Kodierung für Unicode-Zeichen.

Dieser Zeichensatz umfasst die gängisten Schriftzeichen aller Sprachen.


Dateibenennung

Die Startseite wird immer „index.html“ oder „index.htm“

genannt. Dies ist wichtig, da fast alle Webserver nach der

Eingabe der URL-Adresse (z. B. www.musterseite.de) automatisch nach der „index.html“ oder „index.htm“ suchen.

HTML-GRUNDLAGEN | Syntax und Aufbau

HTML-GRUNDLAGEN | Syntax und Aufbau

HTML-GRUNDLAGEN | Syntax und Aufbau

HTML-GRUNDLAGEN | Syntax und Aufbau

HTML-Dokumententyp

(Beispiel Zeile 1)

Bei dieser Anweisung handelt es sich nicht um einen HTML-Tag, sondern um eine Anweisung für den Webbrowser, die beschreibt, in welcher HTML-Version die Webseite erstellt wurde.


Alte HTML4-Deklaration:

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01//EN“

„http://www.w3.org/TR/html4/strict.dtd“>

1  <!doctype html>

2  <html lang=“de“>

3       <head>

4          <meta charset=“UTF-8“>

5          <title>Fenstertitel</title>

6       </head>

7       <body>

8          <!-- sichtbarer Seitenbereich -->

9         </body>

10  </html>

HTML-GRUNDLAGEN | Syntax und Aufbau

Kopfbereich mit Informationen zum Dokument

werden auf der Webseite nicht dargestellt

(Beispiel Zeile 3-6)


In diesem Bereich werden Definitionen hinterlegt, welche nicht nicht im Browser dargestellt werden, aber für den Browser wichtige Informationen enthalten.

Eine Ausnahme bildet der Title, welcher für den User im Seitentab sichtbar ist.


z. B.

  • UTF-8 = Zeichensatz
  • Einbindung von CSS-Dateien
  • Scripte
  • Styles

1  <!doctype html>

2  <html lang=“de“>

3    <head>

4    <meta charset=“UTF-8“>

5    <title>Fenstertitel</title>

6    </head>

7       <body>

8          <!-- sichtbarer Seitenbereich -->

9         </body>

10  </html>

HTML-GRUNDLAGEN | Syntax und Aufbau

Dokumentenkörper mit Webseiteninhalt

Im Browser angezeigter Inhalt

(Beispiel Zeile 7-9)


Enthält Texte, Hyperlinks, Bilder, Audio- und Videodateien, Tabellen und andere Elemente.

1  <!doctype html>

2  <html lang=“de“>

3       <head>

4          <meta charset=“UTF-8“>

5          <title>Fenstertitel</title>

6       </head>

7    <body>

8    <!-- sichtb. Seitenbereich -->

9    </body>

10  </html>

HTML-GRUNDLAGEN | Syntax und Aufbau

HTML-Tags und HTML-Elemente

Ein HTML-Element setzt sich aus einzelnen Bestandteilen zusammen.

  • Start-Tag
  • Elementinhalt
  • Ende-Tag (beide Tags besitzten den selben Namen)

Verschachtelte HTML-Elemente

Elemente können ineinander verschachtelt werden und andere Eemente enthalten. Dadurch entsteht eine hierarchische Struktur.


Beispiel:

<p> Das ist ein <b> Fließtext, </b> in dem ein Wort fett geschrieben ist. </p>


Ausgabe:

Das ist ein Fließtext, in dem ein Wort fett geschrieben ist.

HTML-GRUNDLAGEN | Texte

HTML5 unterscheidet 6 verschiedenen Überschriftebenen. h1 bis h6


Überschrift in h

<h1>Überschrift 1</h1>

<h2>Überschrift 2</h2>

...

...

<h6>Überschrift 2</h6>


Die Standardschriftgröße beträgt im Firefox 16px (Pixel)

Die h- und p-Tags gehen von dieser Größe aus und stufen sich in folgende Prozentwerte ab.

p 100%               h3 117%            h6 67%

h1 200%             h4 112%

h2 150%             h5   83%



Das p-Element (p=paragraph = Absatz)

Dieses Element darf keine Blockerzeugenden Elemente enthalten. (Tabellen, ul ...)

<p>Hier steht der erste Absatz</p>

<p>Hier steht der zweite Absatz</p>

HTML-GRUNDLAGEN | Texte

Übersicht der wichtigsten Zeichenmaskierungen


&ensp;          Leerzeichen Breite n


&emsp;         Leerzeichen Breite m


&thinsp;        Schmales Leerzeichen


&ndash;        – Gedankenstrich Breite n


&mdash;       — Gedankenstrich Breite m


&dagger;       † Kreuz


&bull;             • Bullet-Zeichen


&euro;           € Bullet-Zeichen

 



&copy; © Copyright-Zeichen


&reg; ® Registriermarke-Zeichen


&radic; √ Wurzel

HTML-GRUNDLAGEN | Attribute von HTML-Elemente

Ein HTML-Element kann zusätzlich Attribute (Eigenschaften)

enthalten. In den Attributen können zusätzliche

Informationen zu einem HTML-Element angegeben werden.


Attribute können nur bei Start-Tags, sowie alleinstehenden Tags verwendet werden.

HTML-GRUNDLAGEN | Attribute von HTML-Elemente

HTML-GRUNDLAGEN | Strukturen und Verzeichnisse

Hierarchischer Aufbau einer HTML-Datei mit Artikeln


Das div-Element ist dazu gedacht, mehrere Elemente wie Text, Grafiken, Tabellen usw., in einen gemeinsamen Bereich einzuschließen.


Dieses allgemeine Element bewirkt nichts weiter als dass es in einer neuen Zeile des Fließtextes beginnt. Ansonsten hat es keine Eigenschaften. Es ist dazu gedacht, Bereiche zu erzeugen, die mit Hilfe von CSS formatiert werden können. div bedeutet division, etwa Abteilung oder Bereich.


<div>...</div>


Neben dem div-Element bietet HTML5 eine Reihe weiterer Elemente zur Seitenstrukturierung. (siehe Abbildung)

HTML-GRUNDLAGEN | Verschachtelung

Eltern-Element

Ein Eltern-Element schliesst das Kind-Element immer in

sich ein. Eltern-Elemente können ihre Eigenschaften auf

Kind-Elemente vererben.


Geschwister-Element

Die beiden Listen-Elemente (li) sind Geschwister-Elemente,

wenn sie vom selben Eltern-Element abstammen.


Alleinstehendes-Element

Sind Elemente, die keinen Inhalt haben und daher auch

kein End-Tag besitzen z. B. <br> oder <link>

Create a presentation like this one
Share it on social medias
Share it on your own
Share it on social medias
Share it on your own

How to export your presentation

Please use Google Chrome to obtain the best export results.


How to export your presentation

HTML Grundkurs

by tussler

25 views

Public - 6/6/16, 9:42 PM