Hypertext Markup Language ( HTML - Einsteiger ) gehört zu Web Technologien

Web Technologien, wie HTML, CSS, ECMAScript haben typische Verwendungsmöglichkeiten, wie z.B.

   HTML  Inhalt (content),                      meint "Was es ist"
   CSS    Design, Darstellung ( appearance ),    meint "Wie es ausschaut" 
   ECMAScript Verhalten (client-side behaviour), meint die "Seiten-Dynamik" 
Auszeichnungssprachen und HTML Unterschied?

Eine Auszeichnungssprache ( engl. Markup Language ) verwendet. Eine Auszeichnungssprache verwendet Strukturmerkmale, die Schrift-Teile auszeichnen. Textauszeichnungen werden engl. markup's genannt. Es gibt z.B. Überschriften, Absätze, Hervorhebungen, Fett- oder Kursivschrift, Literaturhinweise, Fußnoten, Inhaltsverzeichnis, Quellenangaben, usw.

Hypertext Markup Language ( kurz HTML ) ist eine textbasierte Auszeichnungssprache zur Strukturierung von Dokument-Inhalten ( Texte, Bilder, Hyperlinks ). HTML-Dokumente sind die Grundlage des World Wide Web. Webbrowser können HTML-Dokumente darstellen.

Werkzeuge für Webseiten Editor und FTP

Es gibt zahlreiche Werkzeuge, die dem Erstellen von Webdokumenten dienen, wie z.B. Notepad++ .

Es gibt zahlreiche FTP-Programme, die dem Übertragen von Dateien zwischen Client und Server ( upload/download ) dienen, wie z.B. FileZilla .

HTML ( Schnelleinstieg ) erstes HTML-Dokument erstellen

Ein HTML-Dokument besteht aus lesbaren Text, der mit Hilfe von eingefügten Tags stukturiert wird. Hier ist eine Übersicht zu den HTML5-Elementen und hier sind Hinweise zu dem a-Tag .

Bei XHTML oder HTML5 werden die Tag-Namen klein geschrieben.

Bei "Lightweight Markup Using" werden nur ein Teil der verfügbaren Tags verwendet, wie z.B.

Titel                 ( <title-Tag im Header-Tag )
Hautüberschrift       ( <h1-Tag                  )
Paragraphs            ( <p-Tags                  ),  
pre-formatierte Tags  ( <pre-Tags                ),
Weblinks              ( <a-Tags Hyperlinks       ), 
Zeilenumbruch         ( <br />                   ),

Aufzählungen          ( <ul - , <ol - , <dl - Lists ), 
Tabellen              ( <table - Tags             ),
Formulare             ( <form-Tags               ),
Bilder                ( <img-Tag  Images         ), 

Frames, iFrames, includierte Objekte
Scripts, Sounds, Kommentare ( <!-- ... --> ), usw.
HTML-Struktur ( header, body ) Webseite-Struktur

Ein Einstieg in die Erstellung und Gestaltung von Webseiten beginnt mit der ersten HTML-Datei ( z.B. willkommen.htm ), die selbst erstellt wird.

HTML-Tags haben ein ( voreingestelltes, browser-spezifische ) Aussehen. CSS wird für das grafische Seitendesign ( Farben, Textauszeichnungen, Abstände, usw. ) verwendet.

Grundgerüst ( HTML5 ohne CSS ) Grundgerüst

HTML-Dateien werden unter dateiname.htm oder dateiname.html gespeichert. Das Grundgerüst für eine einfache HTML5 - Webseite, die keine CSS-Styles verwendet sieht etwa so aus:

<!DOCTYPE html>
<html lang="de">
<head>
<title> HTML5- Grundgerüst ohne CSS </title>
<meta charset="utf-8" />
<meta name="robots" content="noindex" />
</head>
<body>

<h1> Seiten-Überschrift </h1>

<p> 
Sichtbarer Seiteninhalt ...
</p> 

</body>
</html>
Grundgerüst ( HTML5 mit intern-CSS ) Grundgerüst

HTML-Dateien werden unter dateiname.htm oder dateiname.html gespeichert. Das Grundgerüst für eine HTML5 - Webseite, die einen seiteninternen CSS-Styles verwendet sieht etwa so aus:

<!DOCTYPE html>
<html lang="de">
<head>
<title> HTML5- Grundgerüst mit intern-CSS </title>
<meta charset="utf-8" />
<meta name="robots" content="noindex" />
<style> 
  h1 { color:#ffffff; background:#191999; text-align:center; }
</style>
</head>
<body>

<h1> Seiten-Überschrift </h1>

<p> 
Sichtbarer Seiteninhalt ...
</p> 

</body>
</html>
Grundgerüst ( HTML5 mit externer CSS-Datei ) Grundgerüst

Jede Seite kann einen externen CSS-Style includieren. Wird bei jeder Seite die gleiche externen CSS-Style-Datei layout.css includiert, so erhalten alle Seiten ein einheitliches Corporate Design ( Corporate Identity ).

HTML-Dateien werden unter dateiname.htm oder dateiname.html gespeichert. Das Grundgerüst für eine HTML5 - Webseite, die einen externen CSS-Styles verwendet sieht etwa so aus:

<!DOCTYPE html>
<html lang="de">
<head>
<title> *** HTML5- Grundgerüst mit extern-CSS </title>
<meta charset="utf-8" />
<meta name="robots" content="noindex" />
<link type="text/css" rel="stylesheet" href="layout.css" />
</head>
<body>

<h1> *** Seiten-Überschrift </h1>

<p> 
Sichtbarer Seiteninhalt ...
</p> 

</body>
</html>
Liste der HTML-Tags ca. 100 HTML-Tags

Hier ist eine Liste der HTML-Tags .

HTML-Validierung

Zur Überprüfung des HTML-Quellcodes kann der W3C-Validator verwendet werden.