Index von HTML Lehrling

Auf dieser Seite:

Diese Seite ist das Inhaltsverzeichnis für den Teil HTML Lehrling. Ich verlinke hier alle Einzelseiten des Teils HTML mit deren Teaser und den dort behandelten Sprachelementen.

HTML - Updates

Ich lerne weiter, dies sind die letzten 10 überarbeiteten Dateien im Teil HTML
von www.lehrling.biefer.com:
tabellen26.10.2016
snippets26.10.2016
server26.10.2016
quellcode26.10.2016
medien26.10.2016
logical26.10.2016
listen26.10.2016
links26.10.2016
image_map26.10.2016
iframe26.10.2016

Suche HTML

Nutzen Sie hier die Suche nach einem Sprachelement (oben rechts).

einfuehrung.php

Ein Weltweites netzartiges Geflecht (www = World Wide Web) verknüpfter Dokumente unterschiedlichster Herkunft ermöglicht den Austausch von Daten; man springt von Knoten zu Knoten und knüpft laufend eigene.

Sprachelemente in einfuehrung.php:

Hyper Text Markup Language

einfuehrung.php ansehen

quellcode.php

Der Quellcode wird in einer Datei gespeichert und auf dem Server bereit gelegt. Den Code sieht man nachher nicht, sondern nur seine Interpretation durch den Browser, der die Datei vom Server abruft. Der Code ist in der HTML-Sprache geschrieben, diese verwendet Sprachelemente 'Tags', welche der Browser interpretiert. Der www-Lehrling beginnt mit dem Verstehen und Schreiben dieser Tags.

Sprachelemente in quellcode.php:

<html>...</html>
<head>...</head> <body>...</body>
 
<pre></pre>

quellcode.php ansehen

logical.php

Bei den Tags handelt es sich vor allem um eine logische Auszeichnung, welche ein Dokument in elementare Abschnitte unterteilt, die durch gewisse Inhalte bestimmt wird: Ist dieser Text ein Titel, ein normaler Absatz, etwas zu Betonendes, ein Zitat, eine Liste, befindet er sich in der Navigation, im Artikel oder in einer extra Spalte? Das Konzept der logischen Tags macht Inhalte auffindbar.

Sprachelemente in logical.php:

<p>...</p>
<h3>...</h3>
<blockquote>...</blockquote>
<address>...</address>
<div>...</div>
<hr />
<br /> und <wbr />
<span>...</span>
<abbr>...</abbr>
<cite>...</cite>
<samp>...</samp>
<code>...</code>
<dfn>...</dfn>
<var>...</var>
<kbd>...</kbd>
<del>...</del>
<ins>...</ins>
<bdo>...</bdo>
<em>...</em>
<strong>...</strong>
<element attributname='attributwert'>
title='...'
Verschachtelte Tags
<a>...</a>
<img>...</img>

logical.php ansehen

text.php

Zu einer Zeit, in der es noch keine CSS (cascading style sheets) gab, gab es noch HTML-Tags zur Formatierung. Viele davon sind als veraltet (deprecated) eingestuft, sie werden aus dem HTML 5 Standard entfernt oder umgestuft und sollen nicht mehr benutzt werden. Vor allem das font-Tag muss aufgegeben werden.

Sprachelemente in text.php:

<i>...</i> <b>...</b> <s>...</s>
<u>...<u>
<sup>...<sup> <sub>...</sub>
<big>...<big> <small>...</small>
<tt>...<tt>
<font> ...</font>
size="..."
face="..."
color="..."
<marquee>...</marquee>
<blink>...</blink>

text.php ansehen

links.php

Mit Links werden Verknüpfungen zu anderen Dateien erstellt. Das Prinzip des Verlinkens ist das, was eigentlich das word wide web ausmacht. Niemand springt aber irgendwo hin, sonder nach einem Klick auf einen Link lade ich eine Datei von einem Server zur Darstellung in meinen Browser. Hier beschreibe ich: wie erstelle ich einen Link, was ist ein Pfad, was ist ein Anker und was ist ein Link-Target, wie übermittle ich Variablen an eine andere Seite und wie erstelle ich einen E-Mail-Link.

Sprachelemente in links.php:

<a href="..."></a>
<a name="anchor_down"></a>Hier ist der Anker
<base>
<a href="mailto:...">

links.php ansehen

bilder.php

Nebst Text können auch Bilder in HTML-Seiten dargestellt werden. In den Anfangszeiten des www mussten Bilder klein sein, je nach Modem und Kabelverbindung benötigten grosse Bilder sehr viel Zeit, bis sie heruntergeladen waren. Aber auch die heutigen kabellosen (mobilen) Verbindungen laden leichte Dateien schneller.

Sprachelemente in bilder.php:

<img src=" " ... />
alt="..."
title="..."
border="..."
name="...", id="..." class="..."

bilder.php ansehen

image_map.php

Die Image Map erstellt auf einem Bild sensible Areale, deren Flächen als Links genutzt werden. Es gibt rechteckige Flächen, Kreise und Polygone.

Sprachelemente in image_map.php:

<map name="myMap" id="map"> <area />
coords="..."
<img usemap="#myMap"> <area />

image_map.php ansehen

medien.php

Das Pixelbild war lange das einzigen Medium welches nebst Text im www zu sehen war. Vectorgrafiken, Töne, Musik, dann Videos und bald interaktive 3D Räume in Webseiten zu integrieren war in HTML 4 nicht vorgesehen. Nach und nach fanden unterschiedliche Lösungen ihre Anwendungen.

Sprachelemente in medien.php:

.mid, .mp3 und .wav files
<a href="..." target="_blank"
embed
bgsound
embed
object
.swf
youtube
.wmf
.mov
.avi
<video>
<audio>

medien.php ansehen

listen.php

Listen werden unterschieden in nummerierte Listen (orderd list), unnummerierte Listen (unnumbered list) und definitions Listen.

Sprachelemente in listen.php:

<ol><li></li ></ol> oder <ul><li></li ></ul>
type="...", start="...", value="..."
<dl><dt>...</dt> <dd>...</dd> </dl>

listen.php ansehen

tabellen.php

Tabellen sind komplexere Listen, sie bieten eine strenge, zweidimensionale Struktur für Inhalt, der in koordinierten Zellen (Zeilen und Kolonnen) gefasst werden möchte. Zusätzlich können für eine Tabelle Überschriften, Kopf- und Fuss-Zeilen und dergleichen mehr festgelegt werden.

Sprachelemente in tabellen.php:

<table>...</table>, <tr>..</tr> und <td>...</td>
summary='...'
<caption>...</caption>
<th>...</th>
scope='col' / 'row'
abbr='...'
style='speak-header:always'
<thead>...</thead>, <tfoot>...</tfoot>, <tbody>..</tbody>
<colcroup><col /></colcroup>
Attribut width="..."
rowspan="..." colspan="..."
border=, cellspacing=, cellpadding=
align="left/center/right", valign="top/middle/bottom"

tabellen.php ansehen

frame.php

Das Frameset ist eine Art Tabelle, ein unterteilter Fensterrahmen, in welches mehrere Dateien als feste Bestandteile (Frames) geladen werden. Beim Navigieren wird nur nur die Datei im Fenster mit dem wechselnden Inhalt ausgetauscht. In HTML 5 wurde das Frameset und die Frames abgeschafft!

Sprachelemente in frame.php:

<frameset><frame /><frame /></frameset>
<noframes>...</noframes>

frame.php ansehen

iframe.php

Durch ein Inlineframe kann eine externe Datei in die Seite geladen werden ohne Frameset. Das iframe verhält sich in der Seite wie ein Absatz (inline subwindow). Das iframe ist ein HTML Tag, als Inhalt wird ihm eine URL übergeben.

Sprachelemente in iframe.php:

<iframe>

iframe.php ansehen

formulare.php

Mit einem Formular können Nutzer mit Anbieter Kontakt aufnehmen. Formulare dienen einem Websitebetreiber zum Einholen von Informationen, und dem Surfer zum Stellen von Fragen und abgeben von Kommentaren und um sich einzuloggen. Hier erstelle ich ein Formular mit unterschiedlichen Feldern und schreibe über die Möglichkeiten und Regeln zum Versenden.

Sprachelemente in formulare.php:

<form>...</form>
method= "get" / "post"
action="scripts/meinformularprozessor.php"
enctype=
lang="de"
<input type="...">...</input>
<textarea>...</textarea>
<select><option>...</option></select>
tabindex="..."
<label for="..."
<fieldset><legend>...</legend>hier die Felder</fieldset>
type="file"
type="reset"
type="submit"
type="button"
<button type="button"></button>
type="image"
checked, selected
disabled

formulare.php ansehen

doctype.php

HTML hat verschiedene Generationen, typisierte Versionen und Derivate gezeitigt. Browser müssen wissen nach welchen Regeln der Quelltext geschrieben wurde und also interpretiert werden soll. Am Seitenanfang des Quellcodes steht darum eine DOCTYPE Deklaration.

Sprachelemente in doctype.php:

<!DOCTYPE ... >
HTML 4.01 transitional versus XHTML 1.0 strict

doctype.php ansehen

head.php

In den Head werden Tags gepackt, welche vom Browser nicht direkt als Inhalt angezeigt werden (im Gegensatz zu dem, was zwischen den Body-Tags steht). Dennoch sind es wichtige Informationen für den User oder seinen Browser bzw. die Suchroboter.

Sprachelemente in head.php:

<head>...</head>
<meta />
<title>...</title>
<link rel="shortcut icon" />
<base />
<style>...</style>
<link rel="stylesheet" />
<style> @import ...</style>
<script type="text/JavaScript">...</script>
<script src="javascriptbibliothek/meinscript.js"></script>

head.php ansehen

barrierefreiheit.php

Die WCAG (Web Content Accessibility Guidelines) sind Regeln zum Erstellen von Websites ohne Grenzen. Die WCAG bieten mir Erfolgskriterien und ganz konkrete Umsetzungstechniken an, damit ich alle Nutzer und Nutzerinnen erreiche. Besonders beachtet wird das Browsen von Sehbehinderten und Blinden und von Usern, die keine Maus nutzen bzw. den Cursor ausschliesslich via Tastatur oder einem mechanischen Ersatz steuern. Dadurch werden aber auch die besonders Eiligen und leicht Begriffsstutzigen bestens bedient.

Sprachelemente in barrierefreiheit.php:

wahrnehmbar, bedienbar, verständlich, robust
WAI-ARIA role='...'

barrierefreiheit.php ansehen

server.php

Um eine Site überhaupt im www zu publizieren, brauche ich einen Host (Gastgeber). Das ist ein gelüfteter Raum, bei dem der Server steht. Der Server (Diener) ist ein Komputer bzw. ein spezielles Dienst-und Betriebs-Programm mit Anschluss ans Netz unter einer bestimmten Adresse. Dort miete ich einen Teil auf der Festplatte eines jener Komputers und lade meine Site hinauf.

Sprachelemente in server.php:

Chmod
robots.txt
URL / URI
SWITCH
XAMPP
.htaccess Dateien

server.php ansehen

snippets.php

Snippets sind Code Teile, hier als Tag Sammlung, die mir zum Kopieren und Einfügen dienen.

Sprachelemente in snippets.php:

Code Schnippsel

snippets.php ansehen

Check den Code.

>> <<

Ich bin hier: > HTML Lehrling