Inhalt & Stichwörter
en Contents & Index
fr Table des matières & indexe

• A Stichwörter (Index)
• B Inhalt (Sitemap)
• C Interne Links
• D Suchen / Search / Recherche
• E Zeichenerklärung

-

⇧ A Stichwörter (Index)
en Index
fr Indexe

Stichwort  A  B  C  D  E  F  G  H  I  J  K  L  M  N  O  P  Q  R  S  T  U  V  W  X  Y  Z

Ⓖ Internet-Grundlagen Normen & Empfehlungens Datum & Zeit, Sprachen, Ländercodes, Zahlen, Währungen Maßeinheiten: Masseinheiten Umrechnung, Unit Converter Einheiten: l, g, m, W (Liter, Grammm, Meter, Watt) Präfixe: kg, km, kW (Kilogramm, Kilometer, Kilowatt) Präfixe: kCHF (Tausend Schweizer Franken) aber: MW, GW, TW ( Megawatt, Gigawatt), Terawatt) Watt=Leistung [W] ┃ Wattstunde=Energie [Wh] Internationales Einheitensystem Die Revision des Internationalen Einheitensystems Formatieren von Text Ⓗ HTML - Hypertext Markup Language Ⓒ CSS   Ⓟ PHP   Ⓙ JavaScript Ⓦ Webdesign (Webgestaltung) Codetabelle der Sonderzeichen HTML-Steuerzeichen &=&amp; <=&lt; >=&gt; Sonderzeichen / Umlaute ü=&uuml; ß=&szlig; é=&eacute; è=&egrave; â=&acirc; ç=&ccedil; æ=&aelig; œ=&oelig; ñ=&ntilde; ø=&oslash; Buchstaben mit Caron (Hatschek) Anführungszeichen "=&quot; '=&#39; Angewinkelt «=&laquo; »=&raquo; Auslassungszeichen …=&hellip; Gedankenstrich –=&ndash; —=&mdash; Punkt/Kreis •=&bull; ⚬=&#9900; Geboren/gestorben *=&#42; †=&dagger; Symbole Griechisches Alphabet α=&alpha; β=&beta; γ=&gamma; δ=&delta; ε=&epsilon; ζ=&zeta; η=&eta; ϑ=&thetasym; ι=&iota; κ=&kappa; λ=&lambda; μ=&#956; ν=&nu; ξ=&xi; ο=&omicron; π=&pi; ρ=&rho; σ=&sigma; τ=&tau; υ=&upsilon; Pi: ϖ=&piv; Mikro: µ=&micro; Omega: Ω=&Omega;/ω=&omega; Phi Φ=&Phi;/φ=&phi; Psi: Ψ=&Psi;/ψ=&psi; ypsilon mit Haken:ϒ=&#978; Grafik-Technik Bilder/Symbole/Icons Farbwähler (ink. Color-Mixer) Rahmen Tabellen Listen Automatische Weiterleitung Suchen,   Internet-Archiv (Wayback-Datenbank) Übersetzungen de/en/fr AltaVista Google Leo bab.la Collins Beolingus woerterbuch Linguee Internet-Vademecum: Verkürztes Suchen Nachschlagewerke (Deutsch)

HTML-Formatierungshilfen ⇒ aus der Codetabelle der Sonderzeichen Sonderzeichen Zeichensetzung Von Leerzeichen und Sonderzeichen Abbildungen und Tabellen Stolpersteine der deutschen Rechtschreibung Beispiel HTML-Code Beschreibung & # < > &amp; &#35; &lt; &gt; Ampersand, Doppel­kreuz Kleiner als, grösser als € $ £ ¢ &euro; &#36; &pound; &cent; Euro, Dollar, Pfund Sterling, Cent km2 m3 W⁄m2 km<sup>2</sup> m<sup>3</sup> W<&frasl;>m<sup>2</sup> Höher gestellt CO₂ NOx CO&#x2082; NO<sub>x</sub> Tiefer gestellt 5 MW 5&nbsp;MW Geschützter Abstand (kein Umbruch) 3 °C 5 K 3&#8239;°C 5&#8239;K Kleiner geschützter Abstand bei Kelvin ohne ° Trenn­beispiel Trenn&shy;beispiel Bedingte Trennung (Trennung erfolgt hier) ‑   ⁄ │ ┃ &#8209; &frasl; &#9474; &#9475; Geschützte Striche vertikale Trennstriche 5 < 8 > 6 x ≤ y y ≥ z 5 &lt; 8 &gt; 6 x &le; y y &ge; z Kleiner (als), grösser (als) Kleiner oder gleich, grösser oder gleich 5⁄8 ¼ ⅓ ½ ⅔ ¾ 1½ % ‰ ⁄ ∞ 5&frasl;8 &frac14; &#8531; &frac12; &frac32; &frac34; &1frac12; &#37; &permil; &frasl; &infin; Zahl 1 / Zahl 2 ein Viertel, ein Drittel, ein Halb, zwei Drittel, drei Viertel, eineinhalb (anderthalb) Prozent, Promille, Bruchstrich, Unendlich ± × ⁄ ÷ ⁒ ⋅ ~ ≈ ≅ ≡ ≙ ≠ &plusmn; &times; &frasl; &divide; &#8274; &#sdot; &#126; &asymp; &cong; &#8801; &#8793; &ne Plusminus, Mal Bruchstrich (Schrägstrich), geteilt abzüglich, Mittelpunkt Tilde/proportional, ungefähr, ungefähr gleich, identisch entspricht, ungleich ↑ → ⬆ ⬇ ⇑ ⇒ ⇧ ⇨ ▶ ▷ &uarr; &rarr; &#11014; &#11015; &uArr; &rArr;; &#8679; &#8680; &#9654; &#9655; Pfeile x Text y <p style="visibility: hidden">Text></span> Abstand horizontal (Abstand=Textlänge) Abschnitt 1 Abschnitt 2 <p style="visibility: hidden">Text></span> Abstand vertikal (in Pixel: px) A B C <hr size="3" style="margin‑top:0.3em; margin‑bottom:0.3em; background:black"> Trennstrich - verschiedene Stärken - Abstand oben & unten - Farben (z.B "blue")

-

⬆ A

Abkürzungen
Absatz
Ausrichtung und Abstände

→ Anfürungszeichen ⇒ Formatieren von Text [F]

→ Anzeige in einem Fenster ⇒ Übergrosser Inhalt (overflow) [P]

→ Internet-Archiv (Wayback-Datenbank) ⇒ Internet-Zugang: Internet-Archiv [Z]

→ Audio (hören) ⇒ Multimedia [M]

→ Aufzählungszeichen (Bullet/Puce) ⇒ Codetabelle der Sonderzeichen [S]

→ Auszeichnung (Fett, Italic, etc.) ⇒ Formatieren von Text [F]

-

⇧ Abkürzungen

• 1 Allgemein
• 2 Internet-Zugang, Webhosting und Fernwartung
• 3 Normen

⇦ Grundlagen-Websites [G]

-

⇧ Absatz

• Beispiel: <p> ... </p>

⇦ Text-Elemente [T]

-

⇧ Ausrichtung und Abstände

↓ Grundlagen

↓ Absatzkontrolle

↓ Horizontale Textausrichtung <text-align>

↓ Vertikale Textausrichtung <vertical-align>

↓ Aussenabstand margin:

↓ Innenabstandpadding:

⇦ HTML - Hypertext Markup Language [H]

-

↑ Grundlagen

• Grundlagen-Websites

-

↑ Absatzkontrolle

• Beispiel: Texteinrückung

• Beispiel: Textausrückung

-

↑ Horizontale Textausrichtung <text-align>

• Beispiel: Links Ausrichten von Text und Trennstrich mit align="left"

• Beispiel: Zentrieren von Text und Trennstrich mit align="center"

• Beispiel: Rechts Ausrichten von Text und Trennstrich mit align="right"

• Beispiel: Rechts Ausrichten von Text und Trennstrich mit align="right"

-

↑ Vertikale Textausrichtung <vertical-align>

• Bezeichnungen

• Beispiel

-

↑ Aussenabstand margin:

• Beispiel

-

↑ Innenabstandpadding:

• Beispiel

-

⬆ B

Begriffe und Definitionen
Block-Elemente
Browser

→ Bildlaufleiste (scrollbar) ⇒ Übergrosser Inhalt (overflow) [P]

→ Bilder ⇒ Bilder/Symbole/Icons [W]

→ Grafik ⇒ Grafik-Technik [G]

→ Das Boxmodell ⇒ Kasten (box) [P]

→ Breite & Höhe (width & height) ⇒ Positionierung [P]

→ Kasten (box) ⇒ Kasten (box) Rahmen (border) & Kontur (outline) [R]

→ Rahmen (border) ⇒ Kasten (box) Rahmen (border) & Kontur (outline) [R]

→ Opera-Buttons zum Wechseln des Browsers ⇒ Opera-Button [O]

-

⇧ Begriffe und Definitionen

• 1  Internet
• 2  Intranet
• 3  Extranet
• 4  World Wide Web
• 5  Webmaster
• 6  Internet-Zugang, Webhosting und Fernwartung
• 7  Norm, Norumung / Standard, Standardization
• 8  HTML = Hypertext Markup Language
• 9  CSS = Cascading Style Sheet
• 10 PHP = Hypertext Preprocessor
• 11 JavaScript
• 12 Cookies
• 13 Webdesign / Grafik
• 14 Quellen
• 15 Protokolle
• 16 Quelltext
• 17 Formale Sprachen
• 18 Datenbanken
• 19 Suchmaschinen

⇦ Grundlagen-Websites [G]

-

⇑ Block-Elemente

• Grundlagen

⇒ Block-Element div [D]

⇒ Block-Element pre [P]

⇦ HTML - Hypertext Markup Language [H]

-

⇧ Browser (Webbrowser)

• Allgemein (Begriffe, Websites etc.)

• Browser Kennung (User Agent)

• Browser-Sicherheit (mit Prüfprogramm)

• Browser-Support (mit Prüfprogramm)

• Opera

• Internet Explorer

• Firefox

• Netscape

• Weitere Browser

⇦ Internet-Grundlagen [G]

-

⬆ C

<code>
Computer Hard- & Software
CSS - Cascading Stylesheets

→ tabelle der Sonderzeichen ⇒ Codetabelle der Sonderzeichen [S]

→ Color-Mixer ⇒ Farbwähler [F]

→ Cookies ⇒ JavaScript [J]

-

⇧ <code> (Inline-Element)

• Beispiel: Im Text mit code

⇦ Inline-Elemente [I]

-

⇧ Computer Hard- & Software

• Verlage, Zeitschriften, Downloads

• Computer-Hardware

• Computer-Software Allgemein

• Betriebssysteme

• Editoren

• Web-Ladeprogramme (file transfer)

• Grafikprogramme

• Fotosoftware

• Sprachsoftware

• Player

• Freeware

• Open Source Software

⇦ Internet-Grundlagen [G]

-

⇧ CSS - Cascading Stylesheets

↓ Einleitung

↓ Grundlagen

↓ Erstellen und Einbinden von Stylesheets

↓ CSS-Spezifikation und Syntax

↓ Layouts mit CSS

↓ Beispiele

-

↑ Einleitung

• 3.1.1 Einleitung
• 3.1.2 Trennung von Inhalt und Aussehen
• 3.1.3 Dokumentstammbaum
• 3.1.4 Arten von Stylesheets
• 3.1.5 Kaskade-Anwendung von Stylesheets

-

↑ Grundlagen

• 3.2.1 Websites
• 3.2.2 Video-Tutorials
• 3.2.3 Glossars
• 3.2.4 Häufig gestellte Fragen (FAQ)
• 3.2.5 Suchen im Web

-

↑ Erstellen und Einbinden von Stylesheets

• 3.3.1 Art der Einbindung
• 3.3.2 Separates Stylesheet (external stylesheet)
• 3.3.3 CSS-Definitionen im Kopf der HTML-Datei (internal stylesheet)
• 3.3.4 CSS-Definitionen im Textbereich der HTML-Datei (inline styles)

-

↑ CSS-Spezifikation und Syntax

• 3.4.1 Prinzip
• 3.4.2 CSS-Kommentare (comments)
• 3.4.3 CSS-Eigenschaften
• 3.4.4 Selektoren
• 3.4.5 Spezifität (Specificity
• 3.4.6 Vererbung (Inheritance)
• 3.4.7 Attributbedingte Formate
• 3.4.8 Regel-Abkürzungen
• 3.4.9 Numerische Angaben
• 3.4.10 Sprachausgabe
• 3.4.11 Hinweise

-

↑ Layouts mit CSS

• 3.5.1 Einführung in CSS-basierte Layouts
• 3.5.2 Mehrspaltige CSS-basierte Layouts
• 3.5.3 Fixe Bereiche und Footer mit CSS-basierten Layouts
• 3.5.4 CSS-basierte Navigationsleisten

-

↑ Beispiele

• 3.6.1 Das Stylesheet dieser Website
• 3.6.2 Andere Stylesheets

-

⬆ D

Schreibweise von Datum und Zeit
<div>

→ Datenbank ⇒ PHP-Hypertext Preprocessor [P]

→ Internet-Archiv (Wayback-Datenbank) ⇒ Internet-Zugang: Internet-Archiv [Z]

→ Datenschutz ⇒ Recht & Datenschutz [R]

→ Dekoration (Unterstreichen etc.) ⇒ Formatieren von Text [F]

→ Diashow ⇒ Grafik-Technik [G]

→ Digitalkameras ⇒ Multimedia [M]

-

⇧ Schreibweise von Datum und Zeit

• Schreibweise von Datum und Zeit

-

⇧ <div> (Block-Element)

• Beispiel: Mehrere Kasten an verschiedenen Orten

⇦ Block-Elemente [B]

-

⬆ E

→ Internationales Einheitensystem (SI-Einheiten) ⇒ Text-Elemente [M]

→ Text-Elemente ⇒ Text-Elemente [T]

→ Zwei Elemente in einer Zeile (display:inline) ⇒ Positionierung [P]

→ E-Mails ⇒ E-Mails, Emoticons & Smileys [M]

→ Emoticons ⇒ E-Mails, Emoticons & Smileys [M]

→ Bilder/Symbole/Icons ⇒ Bilder/Symbole/Icons [W]

→ Grafik ⇒ Grafik-Technik [G]

→ Empfehlungen ⇒ Normen und Empfehlungen [N]

→ Erster Buchstabe und erste Zeile anders ⇒ Positionierung [P]

→ Externe Links mit einem Symbol ↗ ⇒ Verweis: Pseudoklassen [V]

-

⬆ F

Farben Farbwähler
Foren
Formatieren von Text
Häufig gestellte Fragen (FAQ)

→ Typische Fehler ⇒ Webdesign/Technik [W]

→ Fenster mit Bildlaufleiste (scrollbar) ⇒ Übergrosser Inhalt (overflow) [P]

→ Video, Fernsehen und Camcorder ⇒ Multimedia [M]

→ Fett (bold) ⇒ Formatieren von Text [F]

→ Formatierungs-Codes (Trennung etc.) ⇒ Codetabelle der Sonderzeichen [S]

→ Formulare ⇒ PHP-Hypertext Preprocessor [P]

→ Foto ⇒ Bilder/Symbole/Icons [W]

→ Foto ⇒ Grafik-Technik [G]

→ Fotografie/Digitalkameras ⇒ Multimedia [M]

-

⇧ Farben

↓ Grundlagen und Workshops

↓ Etwas Farbenlehre

↓ Farbwähler

↓ Hexadezimalformat / Hex-Umrechnung

↓ Standardisierte Farbnamen

↓ Websichere Farben

↓ Beispiele von Farben

↓ Hintergrund- und Schriftfarbe

⇦ HTML - Hypertext Markup Language [H]

-

↑ Grundlagen und Workshops

• Grundlagen-Websites

• Kurse und Workshops

-

↑ Etwas Farbenlehre

• a) Allgemein
• b) Additive und subtraktive Farbsynthese
• c) Farbmodelle RGB, CMYK und HSV
• d) Komplementärfarbe
• e) Psychologische Wirkung

-

↑ Farbwähler

• 1 Color-Mixer

• 2 Wählen nach Farbnamen

-

↑ Hexadezimalformat / Hex-Umrechnung

• Allgemein

• 216 Farbenpalette mit Hex-Zahlen

hexadecimal  00   33   66   99   CC   FF

    decimal   0   51  102  153  204  255
    
    percent   0   20   40   60   80  100

• Dez/Hex-Umrechner SELFHTML

• Umrechner von Raggett

-

↑ Standardisierte Farbnamen

• Netscape VGA - 16 Farben mit Namen

Entspricht der CSS 2.1 jedoch ohne Orange.

-

• CSS 2.1 - 17 Farben mit Namen

Entspricht Netscape VGA mit zusätzlich Orange.

Farben kann man in CSS als RGB-Wert oder Name angeben.

In der CSS 2.1-Spezifikation sind dafür 17 Namen festgelegt.

• Beispiel der Formatierung

-

• Netscape - 120 Farben mit Namen

• Beispiel der Formatierung

-

↑ Websichere Farben

• Allgemein

Bemerkung:

• Als die Palette der websicheren Farben entwickelt wurde, konnten Computer oft nur 256 verschiedene Farben anzeigen.
• Durch die Verbreitung von Grafikkarten und Monitoren, die 24 Bit oder mehr Farbtiefe darstellen können, verliert die Palette der websicheren Farben zunehmend an Bedeutung.

-

• Netscape und CSS - 216 Farben

Die browsersichere Palette setzt sich aus den Farben zusammen, bei denen Rot, Grün und Blau auf folgende Werte beschränkt sind:

Hex	00	33	66	99	CC	FF
RGB	00	51	102	153	204	255
%	0	20	40	60	80	100

Total sind dies also: 6 rote x 6 grüne x 6 blaue = 216 Farben

• Beispiel der Formatierung

-

↑ Beispiele von Farben

• a) Aus dem Stylesheet des Webseitenbaus

Webseitenbau & Vademecum
Farbe	Verwendung	Bezeichnung	Format
Grundfarbe	Hintergrund	$grund	#283A4B
	Schrift	$grund_ganzhell	#D7E1EA
Blau-Grün	Hintergrund	$grund_ganzhell	#D7E1EA
Blau	Hintergrund	$blau	#B3C5D6
Grau	Hintergrund	$grau	#E8EEF3
Rot	Hintergrund/Rahmen/Schrift	$rot	#D42B34
Gelb	Hintergrund	$gelb	#F5F08F
Grün	Hintergrund	$gruen	#D0E5CD
Braun	Hintergrund	$braun	#F0DBBD
Violett	Hintergrund	$violett	#E1C6C6
Violettblau	Hintergrund	$violettblau	#E9D6FF

• b) Aus Stylesheets von fremden Websites

Farben aus fremden Websites
Farbe	Verwendung	Format
SELFHTML	Heller Hintergrund der Titelboxen	#FFEEDD
	Dunkle Schriftfarbe der Titel	#AA5522
SNV	Logo (Orange)	#EE7D00
Louis Homepage	Hintergrund der Hauptseite	#751000
	Hintergrund Inhalt	#EFEFEF
Sterlingsangels	Hintergrund Hauptseite	#FFCC00

-

↑ Hintergrund- und Schriftfarbe

• 1 Allgemein
  • a) Bezeichnungen
  • b) Prinzip
  • c) Grundlagen Websites und Workshops

• 2 Hintergrundfarbe (background-color)
  • a) CSS-Tags
  • b) Beispiel 1: Hintergrund eines Abschnittes formatiert im HTML-Dokument
  • c) Beispiel 2: Hintergrund eines Abschnittes formatiert mit CSS
  • d) Grundlagen und Workshops

• 3 Schriftfarbe (color)
  • a) Attribute
  • b) Beispiel 1
  • c) Beispiel 2
  • d) Grundlagen und Workshops

• 4 Hintergrundfarbe und Schriftfarbe vom ganzen Dokument
  • a) Beispiel 1: Formatiert im HTML-Dokument mit HTML-Tags
  • b) Beispiel 2: Angabe im Stylesheet

• 5 Hintergrundfarbe und Schriftfarbe in einer Tabelle
  • a) Beispiel 1
  • b) Beispiel 2

• 6 Mit <span> formatierter Text mit Farbe hervorheben
  • a) Beispie 1: Angabe im Text (inline)
  • b) Beispiel 2: Formatierung mit Stylesheet

-

⇧ Foren

• 1 SELFHTML
• 2 Validome

⇦ Grundlagen-Websites [G]

-

⇧ Formatieren von Text

↓ Grundlagen

⇒ Zeichen [Z]

⇒ Worte [W]

⇒ Zeilen [Z]

↓ Auszeichnung (Fett, Italic, etc.)

↓ Dekoration (Unterstreichen etc.)

↓ Transformation (Gross, klein etc.)

↓ Schatten

↓ Sprache

↓ Anführungszeichen

⇦ HTML - Hypertext Markup Language [H]

-

↑ Grundlagen

• Grundlagen-Websites

-

↑ Auszeichnung (Fett, Italic, etc.)

• Elemente und Bedeutung der physischen Auszeichnungen im Text

• <b>...</b> = zeichnet einen Text als fett aus
• <i>...</i> = zeichnet einen Text als kursiv aus
• <tt>...</tt> = dicktengleich (tt = Teletyper = Fernschreiber)
• <u>...</u> = zeichnet einen Text als unterstrichen aus
• <strike>...</strike> = zeichnet einen Text als durchgestrichen aus
• <s>...</s> = zeichnet einen Text als durchgestrichen aus
• <big>...</big> = zeichnet einen Text grösser als normal aus
• <small>...</small> = zeichnet einen Text kleiner als normal aus
• ^... = zeichnet einen Text als hochgestellt aus
• _... = zeichnet einen Text als tiefgestellt aus

• Beispiel 1: Verschiedene Formate

• Beispiel 2: Formatierung im Text mit HTML

-

↑ Dekoration (Unterstreichen etc.)

• Prinzip

  Mit "text-decoration:..." kann eine zusätzliche Formatierung bestimmt werden.

• underline = unterstrichen
• overline =überstrichen
• line-through = durchgestrichen
• blink = blinkend
• none = normal (keine Text-Dekoration)

• Beispiel 1: ganzer Abschnitt

• Beispiel 2: nur ein Teil des Abschnittes

-

↑ Transformation (Gross, klein etc.)

• Prinzip

  Mit dieser Eigenschaft kann in einem Textbereich Klein- oder Grossbuchstaben oder Kapitälchen erzwungen werden, unabhängig davon, wie die einzelnen Buchstaben tatsächlich in der Datei stehen.

• capitalize = Wortanfänge als Grossbuchstabe (capitalizes first character of each word)
• uppercase = Nur Grossbuchstaben (capitalizes all characters of each word)
• lowercase = Nur Kleinbuchstaben (uses small letters for all characters of each word)
• none = normal = keine Text-Transformation (the initial value)

• Beispiel: Alles Grossbuchstaben (uppercase)

-

↑ Schatten

• text-shadow = Textschatten

  Diese Eigenschaft wird in CSS 2.1 voraussichtlich nicht mehr enthalten sein.

-

↑ Sprache

• :lang (Pseudoklasse für Sprachauszeichnung)

• Wahl der Sprache

-

↑ Anführungszeichen

• Beipiel von automatische Anführungszeichen

-

⇧ Häufig gestellte Fragen (FAQ)

• 1 Internet-Zugang
• 2 Internet-Sicherheit
• 3 Normen
• 4 HTML
• 5 CSS
• 6 PHP
• 7 JavaScript

⇦ Grundlagen-Websites [G]

-

⬆ G

Grafik-Technik
Internet-Grundlagen
Grundlagen-Websites Glossars
Geschichte.

→ Gästebuch ⇒ PHP-Hypertext Preprocessor [P]

→ Griechische Buchstaben ⇒ Codetabelle der Sonderzeichen [S]

→ Grossschreibung ⇒ Formatieren von Text [F]

→ Bilder/Symbole/Icons ⇒ Bilder/Symbole/Icons [W]

-

⇧ Grafik-Technik

↓ Grundlagen und Workshops

↓ Grafikformate

↓ Grafiken einbinden

↓ Grafiken skalieren und ausrichten

↓ Grafiken in Rahmen

↓ Grafik und Text

↓ Grafik mit Verweis

↓ Diashow

↓ Grafiksorten

↓ Rechtliche Aspekte

⇦ HTML - Hypertext Markup Language [H]

⇒ Bilder/Symbole/Icons [W]

-

↑ Grundlagen und Workshops

• 1 Bezeichnungen
• 2 Websites
• 3 Grafik-Technik
• 4 Grafikprogramme und Bildbearbeitung

-

↑ Grafikformate

• 1 Allgemein
  • a) Die wichtigsten Grafikformate
  • b) Die wichtigsten Eigenschaften von GIF und JPG
  • c) Allgemeine Websites
• 2 Das GIF-Format
• 3 Das JPEG-Format
• 4 Das PNG-Format
• 5 Das SVG-Format
• 6 Das LuraWave-Format

-

↑ Grafiken einbinden

• 1 Allgemein
  • a) HTML-Tags
  • b) HTML-Elementreferenz img
  • c) Attribute zum Element img
• 2 Grundlagen-Websites & Workshops
  • a) Allgemeines zu Grafiken einbinden
  • b) Grafikreferenz definieren
  • c) Namen für Grafiken
  • d) Langbeschreibung für Grafiken
• 3 Relative Adressierung
  • a) Beispiel: Das Bild ist im Ordner "grafiken" dieser Website
  • b) Workshop zu Relative Adressierung
• 4 Absulute Adressierung
  • Beispiel 1: Das Bild ist auf einer andern Website
  • Beispiel 2: Mit bestimmter Grösse und Rand der Grösse 1
  • Beispiel 3: Mit noch grösser und Rand der Grösse 5
  • Workshop zu Absulute Adressierung
• 5 Alternativer Text alt="..." (Angabe im Quelltext)

-

↑ Grafiken skalieren und ausrichten

• 1 Grafiken Skalieren
  • Grundlagen-Websites & Workshops
• 2 Grafiken ausrichten
  • a) Grundlagen-Websites & Workshops
  • b) Grafik zum umgebenden Text ausrichten
  • c) Text um Grafik fließen lassen
  • d) Grafik und andere Inhalte ausrichten mit Tabellen
  • e) Grafiken ausrichten mit CSS
• 3 Bilder zuschneiden (shape)
• 4 Bildlaufleiste (overflow)

-

↑ Grafiken in Rahmen

• 1 Rahmen um Grafiken
• 2 Grafiken in Tabellen-Rahmen

-

↑ Grafik und Text

• 1 Grafiken ausrichten
  • a) Grafik zum umgebenden Text ausrichten
  • b) Text um Grafik fließen lassen
  • c) Grafik und andere Inhalte ausrichten mit Tabellen
  • d) Grafiken ausrichten mit CSS
• 2 Grafik fliessend in den Text einbinden (float)
  • a) Bild ohne Rahmen, rechts vom Text
  • b) Bild mit punktiertem Rahmen, rechts vom Text
  • c) Bild mit Rahmen, rechts vom Text und eingefügter Bildlegende (caption)
  • d) Das Bild ist im Text und vertikal ausgerichtet
  • e) Der erste Buchstabe "schwimmt" links oben vom Abschnitt
• 3 Grafik hinter oder vor dem Text
  • a) Grafik hinter dem Text (Z-index ist -1, also niedriger und dadurch ist die Grafik hinten)
  • b) Grafik vor dem Text (Z-index ist 1, also höher und dadurch im Vordergrund)
• 4 Grafik mit Text in Tabellen

-

↑ Grafik mit Verweis

• 1 Anklickbare Grafiken
• 2 Beispiele mit Bildern
  • Beispiel 1: Kleines Bild nicht anklickbar (aus Wikipedia)
  • Beispiel 2: Grosses Bild nicht anklickbar (aus Wikipedia)
  • Beispiel 3: Bild mit Link auf eine fremde Website
  • Beispiel 4: Link im Bild auf das grosse Bild auf dem Server dieser Website
• 3 Beispiele mit Icons
  • Beispiel 1: Ikon ohne Verweis
  • Beispiel 2a: Link im Icon zum grossen Bild auf dem Server dieser Website
  • Beispiel 2b: Link im Icon zum grossen Bild auf dem Server dieser Website
  • Beispiel 3: Link im Icon zum grossen Bild in einer fremden Website
• 4 Beispiele mit Smileys
  • Beispiel 1: Smiley mit Link auf die Website des Herstellers
  • Beispiel 2: Smiley mit Link auf das Internet-Vademecum
  • Beispiel 3: Smileys mit Link auf das entsprechende Land im Internet-Vademecum/Erkunden
• 5 Verweis-sensitive Grafiken (Image Maps)
  • a) Verweis-sensitive Grafiken definieren
  • b) Server-seitige verweis-sensitive Grafiken
  • c) Referenzieren von sensitiven Bereichen
  • d) Grundlagen aus der Mathematik

-

↑ Diashow

• Diashow

-

↑ Grafiksorten

• 1 Typische Grafiksorten für Web-Seiten
  • a) Buttons (Schaltflächen)
  • b) Dots (Auflistungspunkte)
  • c) Bars (Trennleisten)
  • d) Wallpapers (Hintergrundbilder)
  • e) Symbole (Textergänzung oder Textersatz)
  • f) Cliparts (Illustrationen)
  • g) Thumbnails (Vorschaugrafiken)
  • h) Fotos
  • i) Blinde Pixel
  • j) Grafische Layout-Elemente

-

↑ Rechtliche Aspekte

• 1 Bilder-Klau
• 2 Traffic-Klau

-

⇧ Internet-Grundlagen

↓ Grundlagen-Websites

⇒ Normen & Empfehlungen [N]

⇒ Management & Handel [M]

⇒ Webmaster [W]

⇒ Computer Hard- & Software [C]

⇒ Internet-Zugang, Webhosting & Fernwartung [Z]

⇒ Browser [B]

⇒ E-Mails, Emoticons & Smileys [M]

⇒ RSS-Feeds & Postcasting [R]

⇒ Internet-Telefonie & SMS [T]

⇒ Multimedia [M]

⇒ Sicherheit [S]

⇒ Recht & Datenschutz [R]

↓ Geschichte [G]

-

↑ Grundlagen-Websites

⇒ Begriffe und Definitionen [B]

⇒ Websites [W]

⇒ Video-Tutorials [V]

↓ Glosssars [G]

⇒ Abkürzungen [A]

⇒ Häufig gestellte Fragen (FAQ) [F]

⇒ Foren [F]

⇒ Suchen im Web [S]

-

↑ Glosssars

• 1  Allgemeine Internet und Computer-Glossars
• 2  Normen
• 3  IP-Adresse
• 4  JavaScript
• 5  Cookies
• 6  Telekommunikation
• 7  Multimedia
• 8  EDV-Wörterbuch
• 9  Suchmaschinen
• 10 Internet-Zugang
• 11 Recht
• 12 Nutznetz

-

↑ Geschichte

• Computer

• Internet

• World Wide Web

⇦ Internet-Grundlagen [G]

-

⬆ H

HTML - Hypertext Markup Language
Hintergrund

→ Hexadezimalformat / Hex-Umrechnung ⇒ Farben [F]

→ Hintergrundfarbe ⇒ Farben [F]

→ Breite & Höhe (width & height) ⇒ Positionierung [P]

→ Horizontale Textausrichtung ⇒ Ausrichtung und Abstände [A]

→ Handel ⇒ Management & Handel [M]

→ Hardware ⇒ Computer Hard- & Software [C]

-

⇧ HTML - Hypertext Markup Language

↓ Einleitung

↓ HTML-Grundlagen

↓ HTML-Dokument

⇒ Schriftzeichen [S]

⇒ Text-Elemente [T]

⇒ Block-Elemente [B]

⇒ Inline-Elemente [I]

⇒ Formatieren von Text [F]

⇒ Positionierung [P]

⇒ Ausrichtung und Abstände [A]

⇒ Listen [L]

⇒ Tabellen [T]

⇒ Kasten (box), Rahmen (border) & Kontur (outline) [R]

⇒ Hintergrund [H]

⇒ Verweise (Links) [V]

⇒ Grafik-Technik [G]

⇒ Farben [F]

-

↑ Einleitung

• Bezeichnungen
• HTML als "lingua franca" des Web
• HTML-Versionen
• HTML-Varianten

-

↑ HTML-Grundlagen

• HTML Grundlagen-Websites und Workshops

• Video-Tutorials

• Glossars

• Häufig gestellte Fragen (FAQ)

• Foren

• Suchen im Web

-

↑ HTML-Dokument

• Arten von Dokumenten

• HTML-Dokument erstellen

• Grundgerüst eines HTML-Dokumentes

• Struktur der Dokumente

• Struktur der Sprache

• Pseudoelemente und Pseudoklassen

• Kommentare im HTML-Quelltext

• HTML und/versus CSS

-

⇧ Hintergrund

↓ Grundlagen

↓ Angaben für den Hintergrund

↓ Angaben des Hintergrundes in einem Stylesheet

⇦ HTML - Hypertext Markup Language [H]

-

↑ Grundlagen

• 1 Prinzip: Hintergrund von was?
• 2 Bezeichnungen
• 3 Grundlagen-Websites & Workshops

-

↑ Angaben für den Hintergrund

• 1 Hintergrundfarbe (background color)
• 2 Hintergrundbild (background-image)
• 3 Fixierte Hintergrundgrafiken
• 4 Wiederholungs-Effekt (background-repeat)
• 5 Wasserzeichen-Effekt (background-attachment)
• 6 Hintergrundposition (background-position)

-

↑ Angaben des Hintergrundes in einem Stylesheet

• 1 Allgemein
• 2 Beispiel: Hintergrund und Schrift dieser Anleitung
• 3 Vorschrift des W3C-Validators

-

⬆ I

Inline-Elemente

→ Icons ⇒ Bilder/Symbole/Icons [W]

→ Informationstechnologie ⇒ Normen und Empfehlungen [N]

→ Zwei Elemente in einer Zeile (display:inline) ⇒ Positionierung [P]

→ Innenabstand ⇒ Ausrichtung und Abstände [A]

→ Internet-Archiv (Wayback-Datenbank) ⇒ Internet-Zugang: Internet-Archiv [Z]

→ Internet-Archiv (Wayback-Datenbank) ⇒ Internet-Zugang: Internet-Archiv [Z]

→ Internet-Grundlagen ⇒ Internet-Grundlagen [G]

→ Italic (kursiv) ⇒ Formatieren von Text [F]

-

⇧ Inline-Elemente

• Grundlagen

⇒ Inline-Element span [S]

⇒ Inline-Element code [C]

⇦ HTML - Hypertext Markup Language [H]

-

⬆ J

JavaScript

-

⇧ JavaScript

↓ Einleitung

↓ Grundlagen

↓ Anleitung

↓ Befehle

↓ Beispiele

↓ Cookies

-

↑ Einleitung

• 5.1.1 JavaScript
• 5.1.2 DOM
• 5.1.3 JScript
• 5.1.4 Java
• 5.1.5 Ajax

-

↑ Grundlagen

• 5.2.1 Websites
• 5.2.2 Video-Tutorials
• 5.2.3 Glossar
• 5.2.4 Fragen (FAQ)
• 5.2.5 Sicherheitsrisiko Javascript
• 5.2.6 Suchen im Web

-

↑ Anleitung

• 5.3.1 JavaScript in HTML definieren und einbinden
• 5.3.2 Einbinden mit Alert
• 5.3.3 Kommentar
• 5.3.4 Strings und Variablen

-

↑ Befehle

• 5.4.1 script
• 5.4.2 noscript

-

↑ Beispiele

• 5.5.1 Websites mit Beispielen
• 5.5.2 Javascript aktivieren
• 5.5.3 Taschenrechner
• 5.5.4 Uhr
• 5.5.5 Kalender
• 5.5.6 Diverse Beispiele

-

↑ Cookies

• 5.6.1 Einleitung
• 5.6.2 Grundlagen
• 5.6.3 Anleitung

-

⬆ K

→ Kasten (box) ⇒ Kasten (box), Rahmen (border) & Kontur (outline) [R]

→ Kleinschreibung ⇒ Formatieren von Text [F]

→ Kontaktformular ⇒ PHP-Hypertext Preprocessor [P]

→ Kontur (outline) ⇒ Kasten (box), Rahmen (border) & Kontur (outline) [R]

-

⬆ L

Ländercode,
Listen

→ Externe Links mit einem Symbol ↗ ⇒ Verweis: Pseudoklassen [V]

-

⇧ Ländercode

• Ländercode

-

⇧ Listen

↓ Grundlagen

↓ Unsortierte Listenpunkte (unsorted list) <li>

↓ Sortierte Listenpunkte (ordered list) <ol>

↓ Beschreibungsliste (descriptive list)

↓ Listeneinrückung

↓ Listenpunkte als Abschnitte

↓ Listenpunkte mit Grafik

↓ Horizontale Menüs mit Listen position:inline

⇦ HTML - Hypertext Markup Language [H]

-

↑ Grundlagen

• Prinzip

• Grundlagen-Websites & Workshops

-

↑ Unsortierte Listenpunkte (unsorted list) <li>

• Wahl des Listenzeichens oder kein Listenzeichen

• Unsortierte Liste mit <ul> ohne Attribut (Standard)

• Beispiel: Runder Punkt (disc) - Formatiert mit "disc"

• Beispiel: Kreis (cercle)

• Beispiel: Quadrat (square)

• Beispiel: Kein Listenzeichen (none)

-

↑ Sortierte Listenpunkte (ordered list) <ol>

• Bezeichnungen

• Sortierte Liste mit <ol> ohne Attribut (Standard)

• Wahl des Aufzählungszeichens

• Beispiel: Zahl (decimal) - Formatiert mit "decimal"

• Beispiel: Grossbuchstabe (upper-alpha)

• Beispiel: Kleinbuchstabe (lower-alpha)

• Beispiel: Grosse römische Zahl (upper-roman)

• Beispiel: Kleine römische Zahl (lower-roman)

-

↑ Beschreibungsliste (descriptive list)

• Bezeichnungen

• Beispiel 1

• Beispiel 2: Menüliste ohne linken Einzug

-

↑ Listeneinrückung

• Prinzip und Bezeichnungen

• Beispiel: Unsortierte Liste mit Einrückung - ul ohne Attribut (Standard)

• Beispiel: Unsortierte Liste mit Einrückung - mit Attribut "outside"

• Beispiel: Unsortierte Liste ohne Einrückung - mit Attribut "inside"

• Beispiel: Sortierte Liste mit Einrückung - ohne Attribut (Standard)

• Beispiel: Sortierte Liste mit Einrückung - mit Attribut "outside"

• Beispiel: Sortierte Liste ohne Einrückung - mit Attribut "inside"

-

↑ Listenpunkte als Abschnitte

• Beispiel: Ohne Abschnitt innerhalb des Listenpunktes

• Beispiel 2: Mit Abschnitt innerhalb des Listenpunktes

-

↑ Listenpunkte mit Grafik

• Workshops

-

↑ Horizontale Menüs mit Listen <position:inline

• Horizontale Menüs mit Listen <position:inline

-

⬆ M

E-Mails, Emoticons & Smileys
Management & Handel
Metrologie
Multimedia

→ Margin ⇒ Ausrichtung und Abstände [A]

→ Masseinheiten und deren Umrechnungen ⇒ Metrologie [M]

→ Mathematische Symbole ⇒ Codetabelle der Sonderzeichen [S]

→ Horizontale Menüs mit Listen position:inline ⇒ Listen [L]

→ Microsoft PowerPoint ⇒ Multimedia [M]

→ Bilder/Symbole/Icons ⇒ Bilder/Symbole/Icons [W]

-

⇧ E-Mails, Emoticons & Smileys

• E-Mail

• Emoticons

• Smileys

⇦ Internet-Grundlagen [G]

-

⇧ Management & Handel

• Management & Handel

⇦ Internet-Grundlagen [G]

-

⇧ Metrologie

• Allgemein

• Internationales Einheitensystem (SI-Einheiten)

• Masseinheiten und deren Umrechnungen

• Numerische Angaben bei Computern

-

⇧ Multimedia

• Allgemein

• Fotografie/Digitalkameras

• Microsoft PowerPoint

• Video, Fernsehen und Camcorder

• Audio (hören)

⇦ Internet-Grundlagen [G]

-

⬆ N

Normen und Empfehlungen

→ Navigation ⇒ PHP-Hypertext Preprocessor [P]

→ Numerische Angaben bei Computern ⇒ Metrologie [M]

-

⇧ Normen und Empfehlungen

↓ Allgemein

↓ Sektoren

⇒ Metrologie (Masse und Gewichte)

↓ Informationstechnologie

⇒ W3C-World Wide Web Consortium - Recommendations

↓ Organisationen

↓ Gesetze und Normen

↓ Globale Normen

↓ Recherche

⇦ Internet-Grundlagen [G]

-

↑ Allgemein

• 1 Einleitung
• 2 Begriffe
  • a) Norm, Normung / Standard, Standardization
  • b) Standard / De-facto-Standard
  • c) Unterscheidung zwischen "Norm" und "Standard" im Deutschen
  • d) "Norm" und "Standard" im Englischen
  • e) Technische Vorschriften
  • f) Technische Regeln
• 3 Websites
  • a) Wikipedia
  • b) Reglemente, Glossars und FAQ
  • c) Organisationen
  • d) W3C - World Wide Web Consortium
• 4 Reglemente, Glossars und FAQ
  • a) Reglemente zur Normungsarbeit
  • b) Leitfäden
  • c) Bezeichnung von Normen
  • d) Begriffe und Definitionen
  • e) Abkürzungen und Glossars
  • f) Fragen und Antworten (FAQ)
• 5 Internet-Dokumentationen
  • a) Allgemeines zu Dokumenten und Dokumentationen
  • b) Recommendations des W3-Konsortiums
  • c) Requests For Comments (RFCs)
  • d) Frequently Asked Questions (FAQs)
  • e) Anbieter-Dokumentationen
  • f) Freie Dokumentationen
  • g) Bücher

-

↑ Sektoren

⇒ Ländercode [L]

⇒ Sprachencode [S]

⇒ Währungs-Abkürzungen [W]

⇒ Datum und Zeit [D]

⇒ Papierformate [P]

-

↑ Informationstechnologie

• Allgemein

-

↑ Organisationen

• 1 Internationale Organisationen
  • a) Allgemeine Normen
  • b) Elektrotechnische Normen
  • c) Fernmeldewesen (Telekommunikation)
  • d) Empfehlungen
• 2 Regionale Organisationen
  • a) Europa
• 3 Nationale Organisationen
  • a) Deutschland
  • b) Frankreich
  • c) England
  • d) Österreich
  • e) Schweiz

-

↑ Gesetze und Normen

• 1 International
  • a) Referenzieren von ISO und IEC Normen in Vorschriften
• 2 Europäische Union (EU)
  • a) Die Union
  • b) Die Europäische Kommission
  • c) Die Beziehungen der Schweiz zur EU
• 3 Europäische Freihandelsassoziation
• 4 Schweiz
  • a) Technische Handelshemmnisse
  • b) Notifikation von technischen Vorschriften
  • c) New and Global Approach, Normierung, CE Kennzeichnung
• 5 Neues Konzept - Harmonisierte Normen
  • a) Neues Konzept/New Approach/La nouvelle approche
  • b) Harmonisierte Europäische Normen
• 6 Rechtsverbindlichkeit von Normen

Internet-Vademecum: Behörden, Gesetze

-

↑ Globale Normen

• 1 Verhinderung von Handelshemmnissen
  • a) WTO The World Trade Organization
• 2 Referenzieren von ISO und IEC Normen in Vorschriften
• 3 Internationale und Regionale Zusammenarbeit
  • a) Technische Zusammenarbeit zwischen ISO und CEN
  • b) Zusammenarbeit zwischen IEC und CENELEC
• 4 Weltweite Anwendbarkeit von Internationalen Normen
• 5 Globale Normen - Internationale Normen

-

↑ Recherche

• 1 Klassifikation der Normen
• 2 Internationale Normen
  • a) ISO Normen
  • b) IEC Normen
• 3 Europäische Normen
  • a) Europäische Normen
  • b) ETSI Normen
  • c) Harmonisierte europäische Normen
• 4 Recherchen
  • a) Deutschland
  • b) Schweiz
  • c) USA
  • d) Weitere Links zu Organisationen und Verlagen

-

⬆ O

Opera (Browser), Browser-Umschaltung

→ Kontur (outline) ⇒ Kasten (box) Rahmen (border) & Kontour (outline) [R]

-

⇧ Opera (Browser)

-

• Browser-Umschaltung
  (Opera-Buttons zum Wechseln des Browsers)

-

⬆ P

Papierformate
PHP-Hypertext Preprocessor
Positionierung
<pre>
Pseudoelemente & Pseudoklassen

→ Padding ⇒ Ausrichtung und Abstände [A]

→ Paragraph ⇒ Absatz [A]

→ Pfeile ⇒ Codetabelle der Sonderzeichen [S]

→ Pseudoelemente & Pseudoklassen ⇒ Text-Elemente [T]
→ Pseudoelemente & Pseudoklassen ⇒ Verweise [V]

→ RSS-Feeds & Postcasting ⇒ RSS-Feeds & Postcasting [R]

→ Microsoft PowerPoint ⇒ Multimedia [M]

-

⇧ Papierformate

• Papierformate

-

⇧ PHP-Hypertext Preprocessor

↓ Einleitung

↓ Grundlagen

↓ PHP-Einführung

↓ PHP-Befehle

↓ Formulare

↓ Formular-Beispiel

↓ Formulare verarbeiten

↓ Erstellung eines Kontaktformulars

↓ Erstellung eines Gästebuches

↓ Diverse Anwendungen

↓ Navigation mit PHP erstellen

↓ Datenbanken

↓ Session

-

↑ Einleitung

• 4.1.1 Bezeichnungen
• 4.1.2 Was ist PHP?
• 4.1.3 Voraussetzungen für das Programmieren in PHP
• 4.1.4 Ablauf
• 4.1.5 Beispiel eines PHP-Befehls
• 4.1.6 Orte an denen PHP-Codes stehen können
• 4.1.7 Dateiendung wenn PHP-Befehle verwendet werden
• 4.1.8 Test mit der Datei PHP-Info
• 4.1.9 PEAR
• 4.1.10 Mögliche Anwendungen

-

↑ Grundlagen

• 4.2.1 Websites
• 4.2.2 Video-Tutorials
• 4.2.3 Glossars
• 4.2.4 Fragen (FAQ)
• 4.2.5 Suchen im Web

-

↑ PHP-Einführung

• 4.3.1 PHP-Codes
• 4.3.2 Kommentare
• 4.3.3 Anführungszeichen
• 4.3.4 Ausgabe mit echo
• 4.3.5 Zeilenumbruch
• 4.3.6 Variablen & Konstanten
• 4.3.7 Berechnungen
• 4.3.8 Bedingungen
• 4.3.9 Include
• 4.3.10 Schleifen

-

↑ PHP-Befehle

• 4.4.1 Dateien
• 4.4.2 Zeichenketten
• 4.4.3 Kontrollstrukturen
• 4.4.4 Operatoren
• 4.4.5 Arrays
• 4.4.6 Mathematik
• 4.4.7 Datum und Zeit
• 4.4.8 URL und HTML
• 4.4.9 E-Mail

-

↑ Formulare

• 4.5.1 Dateityp-Deklaration
• 4.5.2 Stylesheet umschalten
• 4.5.3 Fusszeile
• 4.5.4 Browser
• 4.5.5 Weiterleitung

-

↑ Formular-Beispiel

• 4.6.1 Navigation Allgemein
• 4.6.2 Erstellung der Array-Liste menue.php
• 4.6.3 Anzeige von menue.php
• 4.6.4 Menü-Formel menue-formel.php
• 4.6.5 Einlesen der Strukturdaten in die HTML-Dokumente
• 4.6.6 Erstellen der Kopfdaten mit kopf-start.php
• 4.6.7 Einlesen des Menüs im body-start.php
• 4.6.8 Einlesen des Dokument-Endes mit ende.php
• 4.6.9 Anzeige von Inhaltsverzeichnissen
• 4.6.10 Erstellen der Sitemap

-

↑ Formulare verarbeiten

• 4.7.1 Einleitung
• 4.7.2 Bezeichnungen
• 4.7.3 Grundlagen-Websites & Workshops

-

↑ Erstellung eines Kontaktformulars

• 4.8.1 Allgemein
• 4.8.2 Die Formularbox
• 4.8.3 Beschriftungen
• 4.8.4 Labels
• 4.8.5 Eingabefelder definieren
• 4.8.6 Passwort
• 4.8.7 Auswahllisten
• 4.8.8 Druckknöpfe
• 4.8.9 Radio-Button
• 4.8.10 Checkboxen
• 4.8.11 Datei-Upload
• 4.8.12 Absenden
• 4.8.13 Klick-Button
• 4.8.14 Versteckte Elemente
• 4.8.15 Gruppierung von Elementen
• 4.8.16 Tabulator-Reihenfolge, Tastaturkürzel und Ausgrauen

-

↑ Erstellung eines Gästebuches

• 4.9.1 Formatieren von Formularen
• 4.9.2 Stylesheet der Formulare vom Webseitenbau
• 4.9.3 Stylesheet eines Beispiels von SELFHTML

-

↑ Diverse Anwendungen

• 4.10.1 Demonstration
• 4.10.2 W3C
• 4.10.3 JavaScript

-

↑ Navigation mit PHP erstellen

• 4.11.1 Website
• 4.11.2 Wikipedia
• 4.11.3 Google
• 4.11.4 SELFHTML-Wiki
• 4.11.5 PHPnet

-

↑ Datenbanken

• 4.12.1 Allgemein
• 4.12.2 Formulardaten überprüfen
• 4.12.3 Umwandeln der Variablen
• 4.12.4 Einlesen zur Anzeige der Variablen
• 4.12.5 Variablen anzeigen
• 4.12.6 Weiterleiten

-

↑ Session

• 4.13.1 Allgemein
• 4.13.2 Aufbau und Bestandteile des Kontakformulars
• 4.13.3 Quelltext des Formulars k-formular.php
• 4.13.4 Das Stylesheet des Formulars formular.css.php
• 4.13.5 Das Formular in ein HTML-Dokument einlesen
• 4.13.6 Formular anzeigen
• 4.13.7 Datei k-senden1.php
• 4.13.8 Datei k-senden2.php
• 4.13.9 Die Kontaktseite

-

⇧ Positionierung

↓ Grundlagen

↓ Positionsart (position)

↓ Breite & Höhe (width & height)

↓ Übergrosser Inhalt (overflow)

↓ Platzhalter

↓ Erster Buchstabe und erste Zeile anders

↓ Zwei Elemente in einer Zeile (display:inline)

↓ Textumfluss (float)

⇦ HTML - Hypertext Markup Language [H]

-

↑ Grundlagen

• Grundlagen-Websites

-

↑ Positionsart (position)

• Allgemein

-

↑ Breite & Höhe (width & height)

• Breite (width)

• Höhe (height)

-

↑ Übergrosser Inhalt (overflow)

• 1 Elementbereich mit übergrossem Inhalt (overflow)
  • a) Allgemein
  • b) Beispiel

  1) Angabe im Quelltext

  <div style="width:400px;height:180px;overflow:auto;
  border:1px solid #840;margin:1em;">
  <b>Anzeige in einem Fenster</b>
  Grosses Smiley:<br>
  <img src="./grafiken/smiley/gelb80.gif"
  width="80" height="80" border="0" 
  alt="Grosses Smiley
  80 x 80 Pixel animiert in 2 Frames"><br>
  Wenn der Inhalt zu gross ist: Fenster mit Bildlaufleiste (scrollbar).<br>
  Formatiert mit mit overflow: auto
  </div>
  

  2) Ausgabe im HTML-Dokument

  Anzeige in einem Fenster Grosses Smiley:
  
  Wenn der Inhalt zu gross ist: Fenster mit Bildlaufleiste (scrollbar).
  Formatiert mit mit overflow: auto
• 2 Richtung (direction)
• 3 Fortsetzung bei Textumfluss (clear)

-

↑ Platzhalter

• Anzeige bzw. Nichtanzeige mit Platzhalter (visibility)

-

↑ Erster Buchstabe und erste Zeile anders

• Erster Buchstabe grösser (first letter)

-

↑ Zwei Elemente in einer Zeile (display:inline)

• Zwei Abschnitte in der gleichen Zeile

-

↑ Textumfluss (float)

• Beispiel

-

⇧ <pre> (Block-Element)

• Beispiel: Monospace für ausgerichteten Text mit pre class="text"

⇦ Block-Elemente [B]

-

⇧ Text-Elemente: Pseudoelemente & Pseudoklassen

• 1 Allgemeines zu Pseudoelementen und Pseudoklassen
• 2 Grundlagen-Websites
• 3 Pseudoklassen für Verweise und andere Elemente
  :link, :visited, :focus, :hover, :active
• 4 Pseudoklasse und Pseudoelemente für Absätze
  :first-child, :first-line, :first-letter
• 5 Pseudoklasse für Sprachauszeichnung :lang
• 6 Pseudoelemente für automatisch generierten Inhalt
  :before, :after
• 7 Automatische Anführungszeichen
• 8 Automatische Nummerierung

⇦ Text-Elemente [T]

→ Pseudoelemente → & Pseudoklassen

⇒ HTML-Dokument: Pseudoelemente & Pseudoklassen [H] ⇒ Text-Elemente: Pseudoelemente & Pseudoklassen [P] ⇒ Verweise: Pseudoklassen a:link a:visited a:hover a:active [V]

-

⬆ Q

-

⬆ R

Kasten (box) Rahmen (border) & Kontur (outline),
Recht & Datenschutz
RSS-Feeds & Postcasting

→ Grafiken in Rahmen ⇒ Grafik-Technik [G]

→ Referenzieren ⇒ Verweise [V]

-

⇧ Kasten (box) Rahmen (border) & Kontur (outline)

↓ Allgemein/Prinzip

↓ Kasten (box)

↓ Rahmen (border)

↓ Kontur (outline)

↓ Beispiele

⇦ HTML - Hypertext Markup Language [H]

-

↑ Allgemein/Prinzip

• Prinzip

-

↑ Kasten (box)

• Das Boxmodell

-

↑ Rahmen (border)

• Allgemein

• Rahmenbreite (border-width)

• Rahmentyp (border-style)

• Rahmenfarbe (border-color)

-

↑ Kontur (outline)

• Prinzip

• Beispiel

-

↑ Beispiele

• 1 Rahmen mit dem Code div

• 1.1 Schwarze Box: div class="box-schwarz"

• 1.2 Box blau-grün: div class="box-blau-gruen"

• 1.3 Hintergrund blau-grün: div class="blau-gruen"

• 1.4 Box blau: div class="box-blau"

• 1.5 Hintergrund blau: div class="blau"

• 1.6 Box rot: div class="box-rot"

• 1.7 Box rot-dünn div class="box-rotduenn"

• 1.8 Box grün div class="box-gruen"

• 1.9 Box gelb: div class="box-gelb"

• 1.10 Hintergrund gelb: div class="gelb"

• 2 Rahmen mit dem Code code

• 2.1 Rahmen mit code class="box-grau"
• 2.2 Rahmen mitten im Satz mit code class="inlinebox-grau"

• 3 Rahmen mit dem Code pre

• 3.1 pre class="text-box"
• 3.2 pre class="code"
• 3.3 pre class="style"
• 3.4 pre class="quell"
• 3.5 pre class="php"

-

⇧ Recht & Datenschutz

• Allgemein

• Haftungsbeschränkung (Disclaimer)

• Urheberrecht & Copyright

• Traffic-Klau (Traffic Guards)

• Datenschutz

• Domain-Recht

• Recht im E-Business

• Newsletters und E-Mail Marketing

• Netiquette (oder Netikette)

⇦ Internet-Grundlagen [G]

-

⇧ RSS-Feeds & Postcasting

• RSS Feeds

• Podcasting

⇦ Internet-Grundlagen [G]

-

⬆ S

Schriftzeichen
Schriftsatz Codetabelle der Sonderzeichen
Schrift (font) Schriftart (font family)
Sicherheit
<span>
Sprachencode
Suche im Web

→ Satzzeichen (Interpunktion) ⇒ Codetabelle der Sonderzeichen [S]

→ Schriftfarbe ⇒ Farben [F]

→ Bildlaufleiste (scrollbar) ⇒ Übergrosser Inhalt (overflow) [P]

→ Session ⇒ PHP-Hypertext Preprocessor [P]

→ Smileys ⇒ E-Mails, Emoticons & Smileys [M]

→ SMS (Short Message Service) ⇒ Internet-Telefonie & SMS [T]

→ Sonderzeichen / Umlaute ⇒ Codetabelle der Sonderzeichen [S]

→ Software ⇒ Computer Hard- & Software [C]

→ Steuerzeichen ⇒ Codetabelle der Sonderzeichen [S]

→ Symbole/Sinnbilder ⇒ Codetabelle der Sonderzeichen [S]

→ Bilder/Symbole/Icons ⇒ Bilder/Symbole/Icons [W]

-

⇧ Schriftzeichen

↓ Grundlagen

↓ Schriftsatz (character set)

↓ Schrift (font)

↓ Schriftart (font-family)

↓ Schriftgrösse (font-size)

↓ Schriftstärke (font-weight)

↓ Schriftvariante (font-variant)

↓ Schriftstil (font-style)

↓ Schriftlaufweite (font-strech)

Weitere Schriftformatierungen:

→ Wortabstand (word-spacing) ⇒ Wort-Formatierung [W]

→ Zeichenabstand ⇒ Zeichen-Formatierung

→ Textdekoration (Unterstreichen etc.) ⇒ Formatieren von Text [F]

→ Text-Transformation (Gross, klein etc.) ⇒ Formatieren von Text [F]

→ Hintergrund- und Schriftfarbe ⇒ Farben [F]

→ Textschatten ⇒ Formatieren von Text [F]

⇦ HTML - Hypertext Markup Language [H]

-

↑ Grundlagen

• Grundlagen-Websites

-

↑ Schriftsatz (character set)

• ISO-Schriftsatz

• Umlaute

• Sonderzeichen

• Spezialschriftzeichen verschiedener Sprachen

• Formeln: Formeleditor

-

• Grundlagen-Websites

-

↑ Schrift (font)

• Prinzip der Formatierung mit separaten Attributen

• Kurzform der Schriftformatierung

-

↑ Schriftart (font-family)

• Beispiele von Schriftarten

• Generische Schriftfamilien

• Beispiel: Formatierung der Schriftart im HTML-Textbereich

-

↑ Schriftgrösse (font-size)

• Prinzip

• Angabe der Schriftgrösse in Punkten (pt)

• Angabe der Schriftgrösse in em

• Schriftgrösse in Schlüsselworten

-

↑ Schriftstärke (font-weight)

• Prinzip

• Beispiel: <... style="font-weight:bold">

-

↑ Schriftvariante (font-variant)

• Prinzip

• Beispiel 1: normale Schriftvariante

• Beispiel 2: style="font-variant:small-caps"

-

↑ Schriftstil (font-style)

• Prinzip

• Beispiel: Verschiedene Schriftstile

-

↑ Schriftlaufweite (font-strech)

Diese Eigenschaft wird von den verbreiteten Browsern nicht interpretiert
und daher in CSS 2.1 voraussichtlich nicht mehr enthalten sein.

-

⇧ Text formatieren mit <span>

• Beispiel: Schriftfarbe formatieren mit <span>...</span>

• Beispiel: Hintergrundfarbe einiger Worte in einem Abschnitt formatiert mit Stylesheet

• Beispiel: Ganzer Abschnitt Gelb hervorgehoben

⇦ Inline-Elemente [I]

-

⇧ Sprachencode

• Sprachencode

-

⇧ Sicherheit

• Begriffe und Definitionen

• Internetsicherheit

• Anonymität

• Antivirenprogramme

• Zertifizierung

⇦ Internet-Grundlagen [G]

-

⇧ Suche im Web

• 1 Suche im Webseitenbau und im Internet-Vademecum
• 2 Suche in Wikipedia und Suchmaschinen
• 3 Suche in Grundlagensites des Webseitenbaus
• 4 Suche in der Internet Archiv-Datenbank

⇦ Grundlagen-Websites [G]

-

⬆ T

Tabellen
Internet-Telefonie & SMS
Text-Elemetne
Trennlinie

→ Tastaturzeichen ⇒ Codetabelle der Sonderzeichen [S]

→ Grafik und Text ⇒ Grafik-Technik [G]

→ Texteinrückung/Textausrückung ⇒ Absatzkontrolle [A]

→ Textumfluss (float) ⇒ Positionierung [P]

→ Tipps und Tricks ⇒ Webdesign/Technik [W]

→ Transformation (Gross, klein etc.) ⇒ Formatieren von Text [F]

→ Typische Fehler ⇒ Webdesign/Technik [W]

-

⇧ Tabellen

↓ Grundlagen

↓ Tabelle mit Gitternetzlinien (table with border)

↓ Tabelle ohne Gitternetzlinien (table without border)

↓ Tabelle mit Tiltel in der ersten Spalte

↓ Tabelle mit bestimmten Breiten, Höhen und Farben

↓ Tabellenüberschrift

↓ Zellen miteinander verbinden

⇦ HTML - Hypertext Markup Language [H]

-

↑ Grundlagen

• Bezeichnungen

• Grundlagen-Websites

-

↑ Tabelle mit Gitternetzlinien (table with border)

• Beispiel 1: Tabellen mit Gitternetzlinien (Rahmen)

Titel 1	Titel 2	Titel 3	Bemerkungen
Zeile 2/Spalte 1	Zeile 2/Spalte 2	Zeile 2/Spalte 3	Zeile 2/Spalte 4
Zeile 3/Spalte 1	Zeile 3/Spalte 2	Zeile 3/Spalte 3	Zeile 3/Spalte 4

• Beispiel 2: Tabellenrahmen mit Zellen-Innenabstand cellpadding="10"

Titel 1	Titel 2	Titel 3
Zeile 2/Spalte 1	Zeile 2/Spalte 2	Zeile 2/Spalte 3
Zeile 3/Spalte 1	Zeile 3/Spalte 2	Zeile 3/Spalte 3

• Beispiel 3: Tabenrahmen mit Zellen-Aussenabstand cellspacing="8"

Titel 1	Titel 2	Titel 3
Zeile 2/Spalte 1	Zeile 2/Spalte 2	Zeile 2/Spalte 3
Zeile 3/Spalte 1	Zeile 3/Spalte 2	Zeile 3/Spalte 3

• Beispiel 4: Dünner Rahmen mit cellpadding="10" und cellspacing="0"

Titel 1	Titel 2	Titel 3
Zeile 2/Spalte 1	Zeile 2/Spalte 2	Zeile 2/Spalte 3
Zeile 3/Spalte 1	Zeile 3/Spalte 2	Zeile 3/Spalte 3

• Beispiel 5: Dünner roter Rahmen border:1px solid:#f00, Breite="50%"

Tabelle mit dünnem Rahmen in Rot

• k) Dekorative Tabellenrahmen

-

↑ Tabelle ohne Gitternetzlinien (table without border)

• Prinzip

• Beispiel

Titel 1	Titel 2	Titel 3	Bemerkungen
Zeile 2/Spalte 1	Zeile 2/Spalte 2	Zeile 2/Spalte 3	Zeile 2/Spalte 4
Zeile 3/Spalte 1	Zeile 3/Spalte 2	Zeile 3/Spalte 3	Zeile 3/Spalte 4

-

↑ Tabelle mit Tiltel in der ersten Spalte

• Prinzip

• Beispiel 1

Titel 1	Zeile 1/Spalte 2	Zeile 1/Spalte 3
Titel 2	Zeile 2/Spalte 2	Zeile 2/Spalte 3

• Beispiel 2: Titel links, formatiert wie Überschrift 6

-

↑ Tabelle mit bestimmten Breiten, Höhen und Farben

• Attribute

• Beispiel 1: Tabelle mit Breite width="70%"

Titel 1	Titel 2	Titel 3
Zeile 2/Spalte 1	Zeile 2/Spalte 2	Zeile 2/Spalte 3
Zeile 3/Spalte 1	Zeile 3/Spalte 2	Zeile 3/Spalte 3

• Beispiel 2: Tabelle mit Farbe, ohne Rand

• Beispiel 3: Tabelle mit Randabstand (cellpadding) und mit Farbe, ohne Rand

• Beispiel 4: Tabelle mit Randabstand, ohne Rand, Zellen mit verschiedener Farbe

Text 1a Spalte 1 Text 1b Spalte 1

Text 2a Spalte 2 Text 2b Spalte 2

• Beispiel 5: Tabelle mit einer bestimmten Höhe und Breite der ersten Spalte

• Beispiel 6: Tabelle mit schwarzem Hintergrund und weisser Farbe

Irgendein Text in dieser Zelle

• Beispiel 7: Breite und Höhe mit HTML resp. CSS formatieren

• Beispiel 8: Farben in Tabellen

-

↑ Tabellenüberschrift

• Prinzip

• Beispiel: Titel über der Tabelle

Assoziationen

Berlin	Hamburg	München
Buletten	Frikadellen	Fleischpflanzerl

-

↑ Zellen miteinander verbinden

• Allgemein

• Beispiel 1: Nebeneinanderliegend Zellen verbinden (colspan)

• Beispiel 2: Übereinanderliegende Zellen verbinden (rowspan)

• Beipiel 3: Neben- und übereinanderliegende Zellen verbinden (colspan + rowspan)

• Beispiel 4: Zellen colspan="3" und rowspan="2"

Titel der 3 Spalten
Text der Zeilen 2 und 3 in Spalte 1	Zeile 2 in Spalte 2	Zeile 2 in Spalte 3
	Zeile 3 in Spalte 2	Zeile 3 in Spalte 3

-

⇧ Internet-Telefonie & SMS

• Von der Nachrichtentrommel bis zum Telefon

• Internet-Telefonie (VoIP Voice over IP)

• Skype

• JAJAH

• Andere VOIP-Systeme

• Bildtelefonie (Video-Calls)

• SMS - Short Message Service

• "gPhone"

⇦ Internet-Grundlagen [G]

-

⇑ Text-Elemente

• Grundlagen

⇒ Überschrift [U]

⇒ Absatz [A]

⇒ Zeile [Z]

⇒ Trennlinie [T]

⇒ Unsichtbare Elemente [U]

⇒ Pseudoelemente & Pseudoklassen [P]

⇦ HTML - Hypertext Markup Language [H]

→ Pseudoelemente & Pseudoklassen ⇒ Text-Elemente [T]
→ Pseudoelemente & Pseudoklassen ⇒ Verweise [V]

-

⇧ Trennlinie <hr> (horizontal ruler)

• Beispiel: Standard-Trennlinie <hr>

⇦ Text-Elemente [T]

-

⬆ U

Überschrift
Unsichtbar

→ Übergrosser Inhalt (overflow) ⇒ Positionierung [P]

→ Umkreiste Zeichen ⇒ Codetabelle der Sonderzeichen [S]

→ Umlaute ⇒ Codetabelle der Sonderzeichen [S]

→ Masseinheiten und deren Umrechnungen ⇒ Metrologie [M]

→ Unterstreichen (underline ) ⇒ Formatieren von Text [F]

-

⇧ Überschrift

• Darstellung der Überschriften dieser Website

⇦ Text-Elemente [T]

-

⇧ Unsichtbare Elemente

• Beispiel: Text unsichtbar

⇦ Text-Elemente [T]

-

⇧

-

⬆ V

Verweise, Externe Links mit einem Symbol ↗
Video-Tutorials

→ Vertikale Textausrichtung (vertical align) ⇒ Ausrichtung und Abstände [A]

→ Grafik mit Verweis ⇒ Grafik-Technik [G]

→ Video, Fernsehen und Camcorder ⇒ Multimedia [M]

-

⇧ Verweise

↓ Referenzieren (Internetadresse)

↓ Verweise (Links)

↓ Projekt-interne Verweise

↓ Projekt-externe Verweise

↓ Verweise auf beliebige Dateien und Dowwnload-Verweise

↓ Link zu E-Mail <mailto>

↓ Zielfenster, Tabulator-Reihenfolge und Tastarurkürzel

↓ Pseudoklassen a:link etc.

↓ Grafik mit Verweis

↓ Diverses

⇦ HTML - Hypertext Markup Language [H]

-

↑ Referenzieren (Internetadresse)

• 1 Was heisst "Referenzieren"?
• 2 Bezeichnungen
• 3 Adressen von Webseiten
• 4 Mit vollständigen URIs referenzieren
• 5 Relativ zum Basis-URI referenzieren
• 6 Grafiken referenzieren

-

↑ Verweise (Links)

• 1 Was ist ein Verweis?
• 2 Elemente und Attribute für Verweise
• 3 Beispiel: Erklärung von Link auf eine andere Website
• 4 Arten von Verweisen
• 5 Grundlagen-Websites & Workshops

-

↑ Projekt-interne Verweise

• 1 Prinzip
  • a) Projekt-interne Verweise
  • b) Im Gegensatzu zu Projekt-externen Verweise
• 2 Grundlagen-Websites & Workshops
• 3 Beispiele von internen Verweisen
  • Beispiel 1: Die Datei befindet sich im gleichen Verzeichnis
  • Beispiel 2: Link auf eine Datei in einem andern Verzeichnis
  • Beispiel 3: Link auf eine Datei im Stammverzeichnis dieser Website
  • Beispiel 4: Link auf das Stylesheet dieser Website
• 4 Anker definieren und Verweise zu Ankern
  • a) Prinzip
  • b) Beispiel: Link auf Color-Mixer im Abschnitt Farben
  • c) Workshops

-

↑ Projekt-externe Verweise

• 1 Beispiele
  • Beispiel 1: Veweis auf Wikipedia
  • Beispiel 2: Verweis auf SELFHTML
• 2 Grundlagen-Websites & Workshops

-

↑ Verweise auf beliebige Dateien und Dowwnload-Verweise

• 1 Allgemein
• 2 Beispiele
  • Beispiel 1: Verweis zu einer Tabellenkalkulation
  • Beispiel 2: Verweis zu einer wav-Audio-Datei
• 3 Grundlagen-Websites & Workshops
• 4 MIME-Typ des Verweisziels angeben
  • a) Beispiel mit Angabe des MIME-Typs: zu Tabellenkalkulation
  • b) Grundlagen und Workshops
• 5 Download-Verweise
  • a) Allgemein
  • b) Grundlagen und Workshops

-

↑ Link zu E-Mail <mailto>

• 1 Prinzip
• 2 Beispiele
  • Beispiel 1: Mail an den Webmaster und Autor dieser Website
  • Beispiel 2: Mail Mail mit Adressierungsschema (siehe Optionen)
• 3 Grundlagen-Websites & Workshops
• 3 Optionen bei E-Mail-Verweisen
  • Option 1: Mail mit Adressierungsschema
  • Option 2: Mail an zwei
  • Option 3: Mail mit Kopie
  • Option 4: Mail mit Geheimkopie
  • Option 5: Mail mit Betreff
  • Option 6: Mail mit Body
  • Option 7: Mail mit cc und Subject
  • Workshops: Optionen

-

↑ Zielfenster, Tabulator-Reihenfolge und Tastarurkürzel

• 1 Zielfenster für Verweise bestimmen (neues Fenster)
  • a) Prinzip
  • b) Beispiel 1: Öffnen im gleichen Fenster
  • c) Beispiel 2: Öffnen in einem neuen Fenster
  • d) Workshops
• 2 Tabulator-Reihenfolge für Verweise
• 3 Tastaturkürzel für Verweise

-

↑ Verweise: Pseudoklassen a:link a:visited a:hover a:active

• 1 Verweise optisch gestalten mit CSS
  • a) Zweck
  • b) Angabe im Stylesheet
  • c) Grundlagen-Websites & Workshops
• 2 Externe Links mit einem Symbol ↗

→ Pseudoelemente → & Pseudoklassen

⇒ Text-Elemente: Pseudoelemente & Pseudoklassen [P] ⇒ Verweise: Pseudoklassen a:link a:visited a:hover a:active [V]

-

↑ Grafik mit Verweis

• Grafik mit Verweis

-

↑ Diverses

• 1 Typisierte Verweise
  • a) Logische Beziehung zum Verweisziel angeben
  • b) Sprache und Zeichenkodierung des Verweisziels angeben

-

⇧ Video-Tutorials

• 1 Allgemeine Computer Video-Tutorials
• 2 HTML und CSS Video Tutorials
• 3 PHP Video Tutorials
• 4 JavaScript Video Tutorials
• 5 Webdesign Video Tutorials

⇦ Grundlagen-Websites [G]

-

⬆ W

Währungs-Abkürzungen
Webdesign (Webgestaltung)
Webmaster
Websites
W3C - World Wide Web Consortium Empfehlungen
Wort-Formatierung

→ Internet-Archiv (Wayback-Datenbank) ⇒ Internet-Zugang: Internet-Archiv [Z]

→ Währungssymbole ⇒ Codetabelle der Sonderzeichen [S]

→ Webbrowser ⇒ Browser [B]

→ Grafik ⇒ Grafik-Technik [G]

-

⇧ Währungs-Abkürzungen

• Währungs-Abkürzungen

-

⇧ Webdesign (Webgestaltung)

↓ Einleitung

↓ Grundlagen

↓ Design

↓ Bilder/Symbole/Icons

↓ Bildbearbeitung

↓ Technik

↓ Zusatzprogramme

↓ Diverses

-

↑ Einleitung

• Begriffe und Definitionen

-

↑ Grundlagen

• Grundlagen-Websites und Workshops

• Video-Tutorials

• Suchen im Web

-

↑ Design

• Gitterfreie Gestaltung

• Tabellenlose Websites

• Webdesign mit Tabellen (nicht zu empfehlen)

• Bestandteile einer Website

• Frames

• Multimedia

• Mauszeiger (cursor-symbol)

• Barrierefreies Webdesign

-

↑ Bilder/Symbole/Icons

• Allgemein und rechtliche Aspekte

• Bilderquellen, Fotos

• Symbole

Textilpflegesymbol

• Bildtafeln, Schilder

Baustelle

• Cliparts

Buch Meeting

• Piktogramme

Behindertengerecht

• Icons

Brief E-Mail Telefon Karte Kurs

Pfeil Lupe Lupe plus Lupe minus

Bleistift Telefon Baustelle

Schloss zu Schloss offen Passwort Bildsschirmsperre

New Neu Info Welt Wichtig Link Weiter

FAQ (Frequently asked questions) Suchen Buch Audio Video

Word Dokument PDF Dokument PowerPoint Dokument Flash Player

• Buttons (Schaltfläche)

• Dots (Auflistungspunkte)

• Bars (Trennleisten)

• Favicons

• Thumbnails (Vorschaubilder)

• Wallpaper (Hintergrundbild)

• Banner

• Emoticons

• Smileys

Grosses Smiley Telefon-Smiley Computer-Smiley

• Flaggen und Wappen

⇒ Grafik-Technik [G]

-

↑ Bildbearbeitung

• Grafikprogramme

• Bildbearbeitung

• Animierte Grafiken

-

↑ Technik

• Definitionen für verschiedene Ausgabemedien

• Website Online stellen

• Eine Webseite umleiten

• Typische Fehler

• Tipps und Tricks

• Geld verdienen mit der eigenen Homepage

-

↑ Zusatzprogramme

• Zugriffe zählen (Counter)

• Fraktale (Mandelbrot & Julia-Menge)

-

↑ Diverses

• Formatierungs-Vorlagen

• Websites und Tests für eventuelle Ergänzungen

• Temporär

-

⇧ Webmaster

• Begriffe ⇒ Begriffe und Definitionen [B]

• Websites ⇒ Websites [W]

• Anwendungssoftware (Tools & Programme)

• Anzeige- & Prüfprogramme

• Sonderzeichen

• Korrekturprogramme

• HTML- und CSS-Validierung

• Linkprüfer (von und zu diesen Seiten)

• Suchmaschinen-Optimierung (SEO)

• Rechtliche Aspekte von Web-Projekten

⇦ Internet-Grundlagen [G]

-

⇧ Websites

• 1 HTML - Hypertext Markup Language
• 2 CSS - Cascading Stylesheets
• 3 PHP - Hypertext Preprocessor
• 4 JavaScript
• 5 Cookies
• 6 Webdesign
• 7 Support-Websites
  • a) Webmaster
  • b) Internet-Zugang
  • c) Normen und Empfehlungen
  • d) Suchmaschinen

⇦ Grundlagen-Websites [G]

-

⇧ W3C - World Wide Web Consortium Empfehlungen

• W3C - World Wide Web Consortium

• HTML-Empfehlungen von W3C

• CSS-Empfehlungen von W3C

• Status der Dokumente

• Requests For Comments (RFCs)

-

⇧ Wort-Formatierung

• Beispiel: Wortabstand

⇦ Formatieren von Text [F]

⇔ Schriftzeichen [S]

-

⬆ X

-

⬆ Y

-

⬆ Z

Zeichen-Formatierung
Zeile (Text-Element)
Zeilen-Formatierung
Internet-Zugang, Webhosting und Fernwartung

→ Schreibweise von Datum und Zeit ⇒ Schreibweise von Datum und Zeit [D]

→ Zwei Elemente in einer Zeile (display:inline) ⇒ Positionierung [P]

-

⇧ Zeichen-Formatierung

• Zeichenabstand

⇦ Formatieren von Text [F]

⇔ Schriftzeichen [S]

-

⇧ Zeile (Text-Element)

• Beispiel: Zeilenumbruch erzwingen <br> (break)

• Textumbruch white-space (white space)

• Geschützte Leerzeichen   (nonbraking space)

• Zeilenumbruch erlauben
  ­ (mit Trennstrich, falls notwendeig),
  <wbr> (sollte nicht verewndet werden),
  ​ (zero width space = Leerzeichen ohne Breite:
  trennt also falls notwendig in einem Leerzeichen ohne Trennstrich)

⇦ Text-Elemente [T]

-

⇧ Zeilen-Formatierung

• Beispiel: Formatierung der Zeilenhöhe im HTML-Dokument style="line-height:..."

⇦ Formatieren von Text [F]

-

⇧ Internet-Zugang, Webhosting und Fernwartung

• Allgemein (Begriffe, Websites etc.)

• Domains suchen & registrieren

• Web-Anbieter (Provider/Host/Server)

• Domain und Domain Name System (DNS)

• IP-Adresse

• Prüfung des Internetzugangs

• Fernwartung - Desktop Sharing - Remote Support

• Kurzlink

• Internet-Archiv (Wayback-Datenbank)

⇦ Internet-Grundlagen [G]

 

-

⇧ B Inhalt (Sitemap)
en Contents
fr Table des matières

Home Link zur Startseite

•    Einleitung
• 1 Internet-Grundlagen
• 2 HTML- Hypertext Markup Language
• 3 CSS - Cascading Stylesheets
• 4 PHP - Hypertext Preprocessor
• 5 JavaScript, Cookies
• 6 Webdesign
•    Beilagen (Kontakt, Gästebuch)

-

⇧ Einleitung

• Inhalt / Contents / Sommaire
• Stichwörter (Index)
• Interne Links / Internal Links / Liens internes
• Suchen / Search / Recherche
• Zeichenerklärung
• Bemerkungen
• Referenzen / References / Références
• Einstieg ins Web
• Profi-Nachschlagewerke
• Das Spezielle an der Einführung in HTML, CSS und PHP
• Haben Sie auch schon festgestellt...
• Danksagung
• Impressum

-

⇧ 1 Internet-Grundlagen

• 1.1 Web-Grundlagen
• 1.1.1 Begriffe
• 1.1.2 Websites
• 1.1.3 Video-Tutorials
• 1.1.4 Glossars
• 1.1.5 Abkürzungen
• 1.1.6 Häufig gestellte Fragen (FAQ)
• 1.1.7 Foren
• 1.1.8 Suchen im Web
• 1.2 Normen und Empfehlungen
• 1.2.1 Allgemein
• 1.2.2 Sektoren
• 1.2.3 Normen
• 1.2.4 Metrologie (Masse und Gewichte)
• 1.2.5 Info-Technologie
• 1.2.6 W3C-World Wide Web Consortium - Recommendations
• 1.2.7 Organisationen
• 1.2.8 Gesetze und Normen
• 1.2.9 Globale Normen
• 1.2.10 Recherchen
• 1.3 Management & Handel
• 1.3.1 Allgemein
• 1.3.2 Managementsysteme
• 1.3.3 Marketing
• 1.3.4 Handel
• 1.3.5 Semantik Grid Computing (Bedeutungslehre)
• 1.4 Webmaster
• 1.4.1 Begriffe & Websites
• 1.4.2 Tools- und Programmsammlungen
• 1.4.3 Suchfeld erstellen
• 1.4.4 Weitere Anzeige- und Prüfprogramme
• 1.4.5 Sonderzeichen
• 1.4.6 Korrekturprogramme
• 1.4.7 HTML- und CSS-Validierung
• 1.4.8 Linkprüfer (von und zu diesen Seiten)
• 1.4.9 Suchmaschinen-Optimierung (SEO)
• 1.4.10 Benutzerfreundlichkeit
• 1.4.11 Rechtliche Aspekte von Web-Projekten
• 1.5 Computer Hard- und Software
• 1.5.1 Allgemein, Websites, Verlage, Zeitschriften, Downloads
• 1.5.2 Computer-Hardware
• 1.5.3 Computer-Software Allgemein
• 1.5.4 Betriebssysteme
• 1.5.5 Editoren
• 1.5.6 Web-Ladeprogramme (file transfer)
• 1.5.7 Grafikprogramme
• 1.5.8 Fotosoftware
• 1.5.9 Sprachsoftware
• 1.5.10 Player
• 1.5.11 Freeware
• 1.5.12 Open Source Software
• 1.6 Internet-Zugang, Webhosting und Fernwartung
• 1.6.1 Allgemein (Begriffe, Websites etc.)
• 1.6.2 Domain Register
• 1.6.3 Web-Anbieter (Provider/Host/Server)
• 1.6.4 Domain und Domain Name System (DNS)
• 1.6.5 IP-Adresse
• 1.6.6 Prüfung des Internetzugangs
• 1.6.7 Fernwartung - Desktop Sharing - Remote Support
• 1.6.8 Kurzlink
• 1.6.9 Internet-Archiv
• 1.7 Browser
• 1.7.1 Allgemein (Begriffe & Websites etc.)
• 1.7.2 Browser Kennung (User Agent)
• 1.7.3 Browser-Sicherheit
• 1.7.4 Browsersupport (mit Prüfprogramm)
• 1.7.5 Internet Explorer
• 1.7.6 Google Chrome
• 1.7.7 Firefox
• 1.7.8 Vivaldi
• 1.7.9 Opera
• 1.7.10 Weitere Browser
• 1.8 E-Mail, Emoticons und Smileys
• 1.8.1 E-Mail
• 1.8.2 Smileys
• 1.8.3 Emoticons
• 1.9 RSS Feeds und Podcasting
• 1.9.1 RSS Feeds
• 1.9.2 Podcasting
• 1.10 Internet-Telefonie und SMS
• 1.10.1 Von der Nachrichtentrommel zum Telefon
• 1.10.2 Internet-Telefonie
• 1.10.3 Bildtelefonie (Video-Calls)
• 1.10.4 SMS - Short Message Service
• 1.11 Multimedia
• 1.11.1 Allgemein
• 1.11.2 Fotografie/Digitalkameras
• 1.11.3 Miclrosoft PowerPoint
• 1.11.4 Video, Fernsehen und Camcorder
• 1.11.5 Audio/Tonaufnahme
• 1.12 Sicherheit
• 1.12.1 Begriffe
• 1.12.2 Internetsicherheit
• 1.12.3 Anonymität
• 1.12.4 Antivirenprogramme
• 1.12.5 Zertifizierung
• 1.13 Recht & Datenschutz
• 1.13.1 Allgemein
• 1.13.2 Haftungsausschluss (Disclaimer)
• 1.13.3 Urheberrecht und Copyright
• 1.13.4 Inhalt-, Bilder- & Traffic-Klau
• 1.13.5 Datenschutz
• 1.13.6 Domain-Recht
• 1.13.7 Recht im E-Business
• 1.13.8 Netiquette (oder Netikette)
• 1.14 Geschichte

-

⇧ 2 HTML- Hypertext Markup Language

• 2.1 Einleitung
• 2.2 Web-Grundlagen
• 2.2.1 Websites
• 2.2.2 Video-Tutorials
• 2.2.3 Glossars
• 2.2.4 Fragen (FAQ)
• 2.2.5 Foren
• 2.2.6 Suchen im Web
• 2.3 HTML-Dokument
• 2.3.1 Dokument-Arten
• 2.3.2 HTML-Dokument erstellen
• 2.3.3 Grundgerüst eines HTML-Dokumentes
• 2.3.4 Struktur der Dokumente
• 2.3.5 Struktur der Sprache
• 2.3.6 Pseudoelemente und Pseudoklassen
• 2.3.7 Kommentare im HTML-Quelltext
• 2.3.8 HTML versus CSS
• 2.4 Schriftzeichen (Characters)
• 2.4.1 Grundlagen
• 2.4.2 Schriftsatz (character set)
• 2.4.3 Schrift (font)
• 2.4.4 Schriftart (font-family)
• 2.4.5 Schriftgrösse (font-size)
• 2.4.6 Strichstärke (font-weight)
• 2.4.7 Schriftvariante (font-variant)
• 2.4.8 Schriftstil (font-style)
• 2.4.9 Schriftlaufweite (font-strech)
• 2.5 Text-Elemente
• 2.5.1 Grundlagen
• 2.5.2 Überschrift (heading)
• 2.5.3 Absatz (paragraph)
• 2.5.4 Zeile (line)
• 2.5.5 Trennlinie (horizontal ruler)
• 2.5.6 Unsichtbare Elemente (invisible elements)
• 2.5.7 Pseudoelemente und Pseudoklassen
• 2.6 Block & Inline
• 2.6.1 Grundlagen
• 2.6.2 Block-Element <div>
• 2.6.3 Block-Element <pre>
• 2.6.4 Inline-Element <span>
• 2.6.5 Inline-Element <code>
• 2.7 Formatieren von Text
• 2.7.1 Grundlagen
• 2.7.2 Zeichen
• 2.7.3 Worte
• 2.7.4 Zeilen
• 2.7.5 Auszeichnung
• 2.7.6 Dekoration
• 2.7.7 Transformation
• 2.7.8 Schatten
• 2.7.9 Sprache
• 2.7.10 Anführungszeichen
• 2.8 Position
• 2.8.1 Grundlagen
• 2.8.2 Positionsart (position)
• 2.8.3 Breite (width) und Höhe (height)
• 2.8.4 Übergrosser Inhalt (overflow)
• 2.8.5 Platzhalter
• 2.8.6 Erster Buchstabe und erste Zeile anders
• 2.8.7 Zwei Elemente in einer Zeile <display:inline>
• 2.8.8 Textumfluss <float>
• 2.9 Ausrichten und Abstände
• 2.9.1 Grundlagen
• 2.9.2 Absatzkontrolle
• 2.9.3 Horizontale Textausrichtung <text-align>
• 2.9.4 Vertikale Textausrichtung <vertical-align>
• 2.9.5 Aussenabstand <margin>
• 2.9.6 Innenabstand <padding>
• 2.10 Listen & Tabellen
• 2.10.1 Liste (list)
• 2.10.2 Tabelle (table)
• 2.11 Kasten & Rahmen
• 2.11.1 Allgemein
• 2.11.2 Kasten (box) / Das Box-Modell
• 2.11.3 Rahmen (border)
• 2.11.4 Kontur <outline>
• 2.11.5 Beispiele
• 2.12 Hintergrund
• 2.12.1 Grundlagen und Workshops
• 2.12.2 Angaben für den Hintergrund
• 2.12.3 Angaben im Stylesheet
• 2.13 Verweise (Links)
• 2.13.1 Referenzieren (Internetadresse)
• 2.13.2 Verweis (Hyperlink)
• 2.13.3 Projekt-interne Verweise
• 2.13.4 Projekt-externe Verweise
• 2.13.5 Verweise auf beliebige Dateien und Dowwnload-Verweise
• 2.13.6 Link zu E-Mail (mailto)
• 2.13.7 Zielfenster, Tabulator-Reihenfolge und Tastarurkürzel
• 2.13.8 Pseudoklassen a:link a:visited a:hover a:active
• 2.13.9 Grafik mit Verweis
• 2.13.10 Diverses
• 2.14 Grafik-Technik
• 2.14.1 Grundlagen und Workshops
• 2.14.2 Grafikformate
• 2.14.3 Grafiken einbinden
• 2.14.4 Grafiken skalieren und ausrichten
• 2.14.5 Grafik in Rahmen
• 2.14.6 Grafik und Text
• 2.14.7 Grafik mit Verweis
• 2.14.8 Diashow
• 2.14.9 Grafiksorten
• 2.14.10 Recht
• 2.15 Farben (color)
• 2.15.1 Grundlagen und Workshops
• 2.15.2 Etwas Farbenlehre
• 2.15.3 Farbwähler
• 2.15.4 Hexadezimalformat / Hex-Umrechnung
• 2.15.5 Standardisierte Farbnamen
• 2.15.6 Websichere Farben
• 2.15.7 Beispiele von Farben
• 2.15.8 Hintergrund- und Schriftfarbe

-

⇧ 3 CSS - Cascading Stylesheets

• 3.1 Einleitung
• 3.1.1 Einleitung
• 3.1.2 Trennung von Inhalt und Aussehen
• 3.1.3 Dokumentstammbaum
• 3.1.4 Arten von Stylesheets
• 3.1.5 Kaskade-Anwendung von Stylesheets
• 3.2 Web-Grundlagen
• 3.2.1 Websites
• 3.2.2 Video-Tutorials
• 3.2.3 Glossars
• 3.2.4 Häufig gestellte Fragen (FAQ)
• 3.2.5 Suchen im Web
• 3.3 Erstellen und Einbinden von Stylesheets
• 3.3.1 Art der Einbindung
• 3.3.2 Separates Stylesheet (external stylesheet)
• 3.3.3 CSS-Definitionen im Kopf der HTML-Datei (internal stylesheet)
• 3.3.4 CSS-Definitionen im Textbereich der HTML-Datei (inline styles)
• 3.4 CSS-Spezifikation und Syntax
• 3.4.1 Prinzip
• 3.4.2 CSS-Kommentare (comments)
• 3.4.3 CSS-Eigenschaften
• 3.4.4 Selektoren
• 3.4.5 Spezifität (Specificity
• 3.4.6 Vererbung (Inheritance)
• 3.4.7 Attributbedingte Formate
• 3.4.8 Regel-Abkürzungen
• 3.4.9 Numerische Angaben
• 3.4.10 Sprachausgabe
• 3.4.11 Hinweise
• 3.5 CSS-basierte Layouts
• 3.5.1 Einführung in CSS-basierte Layouts
• 3.5.2 Mehrspaltige CSS-basierte Layouts
• 3.5.3 Fixe Bereiche und Footer mit CSS-basierten Layouts
• 3.5.4 CSS-basierte Navigationsleisten
• 3.6 Stylesheet
• 3.6.1 Das Stylesheet dieser Website
• 3.6.2 Andere Stylesheets
• 3.7 Anwendungen
• 3.7.1 Formatierung <body>
• 3.7.2 Umschalten auf verschiedene Stylesheets
• 3.7.3 Anwendung von CSS in HTML
• 3.7.4 Anwendung von CSS in PHP
• 3.7.5 Anwendung von CSS in Webdesign

-

⇧ 4 PHP - Hypertext Preprocessor

• 4.1 Einleitung
• 4.1.1 Bezeichnungen
• 4.1.2 Was ist PHP?
• 4.1.3 Voraussetzungen für das Programmieren in PHP
• 4.1.4 Ablauf
• 4.1.5 Beispiel eines PHP-Befehls
• 4.1.6 Orte an denen PHP-Codes stehen können
• 4.1.7 Dateiendung wenn PHP-Befehle verwendet werden
• 4.1.8 Test mit der Datei PHP-Info
• 4.1.9 PEAR
• 4.1.10 Mögliche Anwendungen
• 4.2 Web-Grundlagen
• 4.2.1 Websites
• 4.2.2 Video-Tutorials
• 4.2.3 Glossars
• 4.2.4 Fragen (FAQ)
• 4.2.5 Suchen im Web
• 4.3 PHP-Anleitung (Codes & Basis-Befehle)
• 4.3.1 PHP-Codes
• 4.3.2 Kommentare
• 4.3.3 Anführungszeichen
• 4.3.4 Ausgabe mit echo
• 4.3.5 Zeilenumbruch
• 4.3.6 Variablen & Konstanten
• 4.3.7 Berechnungen
• 4.3.8 Bedingungen
• 4.3.9 Include
• 4.3.10 Schleifen
• 4.4 PHP-Befehle (Befehlsreferenzen)
• 4.4.1 Dateien
• 4.4.2 Zeichenketten
• 4.4.3 Kontrollstrukturen
• 4.4.4 Operatoren
• 4.4.5 Arrays
• 4.4.6 Mathematik
• 4.4.7 Datum und Zeit
• 4.4.8 URL und HTML
• 4.4.9 E-Mail
• 4.5 PHP-Anwendungen
• 4.5.1 Dateityp-Deklaration
• 4.5.2 Stylesheet umschalten
• 4.5.3 Fusszeile
• 4.5.4 Browser
• 4.5.5 Weiterleitung
• 4.6 Navigation mit PHP erstellen
• 4.6.1 Navigation Allgemein
• 4.6.2 Erstellung der Array-Liste menue.php
• 4.6.3 Anzeige von menue.php
• 4.6.4 Menü-Formel menue-formel.php
• 4.6.5 Einlesen der Strukturdaten in die HTML-Dokumente
• 4.6.6 Erstellen der Kopfdaten mit kopf-start.php
• 4.6.7 Einlesen des Menüs im body-start.php
• 4.6.8 Einlesen des Dokument-Endes mit ende.php
• 4.6.9 Anzeige von Inhaltsverzeichnissen
• 4.6.10 Erstellen der Sitemap
• 4.7 Formulare
• 4.7.1 Einleitung
• 4.7.2 Bezeichnungen
• 4.7.3 Grundlagen-Websites & Workshops
• 4.8 Formular-Elemente
• 4.8.1 Allgemein
• 4.8.2 Die Formularbox
• 4.8.3 Beschriftungen
• 4.8.4 Labels
• 4.8.5 Eingabefelder definieren
• 4.8.6 Passwort
• 4.8.7 Auswahllisten
• 4.8.8 Druckknöpfe
• 4.8.9 Radio-Button
• 4.8.10 Checkboxen
• 4.8.11 Datei-Upload
• 4.8.12 Absenden
• 4.8.13 Klick-Button
• 4.8.14 Versteckte Elemente
• 4.8.15 Gruppierung von Elementen
• 4.8.16 Tabulator-Reihenfolge, Tastaturkürzel und Ausgrauen
• 4.9 Formular-Stylesheet
• 4.9.1 Formatieren von Formularen
• 4.9.2 Stylesheet der Formulare vom Webseitenbau
• 4.9.3 Stylesheet eines Beispiels von SELFHTML
• 4.10 Formular-Beispiele
• 4.10.1 Demonstration
• 4.10.2 W3C
• 4.10.3 JavaScript
• 4.11 Such-Formulare
• 4.11.1 Website
• 4.11.2 Wikipedia
• 4.11.3 Google
• 4.11.4 SELFHTML-Wiki
• 4.11.5 PHPnet
• 4.12 Formulare verarbeiten
• 4.12.1 Allgemein
• 4.12.2 Formulardaten überprüfen
• 4.12.3 Umwandeln der Variablen
• 4.12.4 Einlesen zur Anzeige der Variablen
• 4.12.5 Variablen anzeigen
• 4.12.6 Weiterleiten
• 4.13 Erstellung eines Kontaktformulars
• 4.13.1 Allgemein
• 4.13.2 Aufbau und Bestandteile des Kontakformulars
• 4.13.3 Quelltext des Formulars k-formular.php
• 4.13.4 Das Stylesheet des Formulars formular.css.php
• 4.13.5 Das Formular in ein HTML-Dokument einlesen
• 4.13.6 Formular anzeigen
• 4.13.7 Datei k-senden1.php
• 4.13.8 Datei k-senden2.php
• 4.13.9 Die Kontaktseite
• 4.14 Erstellung eines Gästebuches
• 4.14.1 Allgemeines zu Gästebüchern
• 4.14.2 Aufbau und Bestandteile des Gästebuches
• 4.14.3 Quelltext des Formulars include/gb-formular.php
• 4.14.4 Stylesheet des Formulars formular.css
• 4.14.5 Formular in ein HTML-Dokument einlesen
• 4.14.6 Formular anzeigen
• 4.14.7 Vorschau gb-vorschau.php
• 4.14.8 Verarbeiten include/gb-verarbeiten.php
• 4.14.9 Speichern gb-speichern.php
• 4.14.10 Datenbank gb-daten.dat
• 4.14.11 Daten einlesen include/gb-einlesen.php
• 4.14.12 Gästebuch-Datei /gaestebuch/

-

⇧ 5 JavaScript, Cookies

• 5.1 Einleitung
• 5.1.1 JavaScript
• 5.1.2 DOM
• 5.1.3 JScript
• 5.1.4 Java
• 5.1.5 Ajax
• 5.2 Web-Grundlagen
• 5.2.1 Websites
• 5.2.2 Video-Tutorials
• 5.2.3 Glossar
• 5.2.4 Fragen (FAQ)
• 5.2.5 Sicherheitsrisiko Javascript
• 5.2.6 Suchen im Web
• 5.3 Anleitung
• 5.3.1 JavaScript in HTML definieren und einbinden
• 5.3.2 Einbinden mit Alert
• 5.3.3 Kommentar
• 5.3.4 Strings und Variablen
• 5.4 Befehle
• 5.4.1 script
• 5.4.2 noscript
• 5.5 Beispiele
• 5.5.1 Websites mit Beispielen
• 5.5.2 Javascript aktivieren
• 5.5.3 Taschenrechner
• 5.5.4 Uhr
• 5.5.5 Kalender
• 5.5.6 Diverse Beispiele
• 5.6 Cookies
• 5.6.1 Einleitung
• 5.6.2 Grundlagen
• 5.6.3 Anleitung

-

⇧ 6 Webdesign

• 6.1 Web-Grundlagen
• 6.1.1 Begriffe und Definitionen
• 6.1.2 Websites
• 6.1.3 Video-Tutorials
• 6.1.4 Suchen im Web
• 6.2 Design
• 6.2.1 Gitterfreie Gestaltung
• 6.2.2 Tabellenlose Websites
• 6.2.3 Webdesign mit Tabellen (nicht zu empfehlen)
• 6.2.4 Bestandteile einer Website
• 6.2.5 Frames
• 6.2.6 Multimedia
• 6.2.7 Mauszeiger (cursor-symbol)
• 6.2.8 Barrierefreies Design
• 6.3 Bilder, Symbole
• 6.3.1 Allgemein und rechtliche Aspekte
• 6.3.2 Bilderquellen, Fotos
• 6.3.3 Symbole
• 6.3.4 Bildtafeln, Schilder
• 6.3.5 Cliparts
• 6.3.6 Piktogramme
• 6.3.7 Icons
• 6.3.8 Buttons (Schaltflächen)
• 6.3.9 Dots (Auflistungspunkte)
• 6.3.10 Bars (Trennleisten)
• 6.3.11 Favicons
• 6.3.12 Thumbnail (Vorschaubild)
• 6.3.13 Wallpaper (Hintergrund)
• 6.3.14 Logo
• 6.3.15 Banner
• 6.3.16 Smileys
• 6.3.17 Emoticons
• 6.4 Bildbearbeitung
• 6.4.1 Grafikprogramme
• 6.4.2 Bildbearbeitung
• 6.4.3 Animierte Grafiken
• 6.5 Technik
• 6.5.1 Definitionen für verschiedene Ausgabemedien
• 6.5.2 Website Online stellen
• 6.5.3 Eine Webseite umleiten
• 6.5.4 Typische Fehler
• 6.5.5 Tipps und Tricks
• 6.5.6 Geld verdienen mit der eigenen Homepage
• 6.6 Zusatzprogramme
• 6.6.1 Zugriffe zählen
• 6.6.2 Fraktale (Mandelbrot & Julia-Menge)
• 6.7 Diverses
• 6.7.1 Vorlagen
• 6.7.2 Vorlage_xxx
• 6.7.3 Vorlage_xxx_111
• 6.7.4 Verzeichnis_drei
• 6.7.5 Verzeichnis_jahr
• 6.7.2 Websites und Tests für eventuelle Ergänzungen

-

⇧ Beilagen

• Kontakt / Contact / Contact

• Gästebuch / Guestbook / Livre d’or

-

⇧ C Interne Links
en Internal Links
fr Liens internes

• 1  Webseitenbau / Einleitung
• 2  Internet-Grundlagen
  • a Grundlagen / Basics
  • b Normen und Empfehlungen / Standards and recommendations
  • c Webmaster
  • d Internet-Zugang
  • e Computer Hard- & Software
  • f Browser
  • g Sicherheit
  • h Recht und Datenschutz
  • i Geschichte / History / Histoire
• 3  HTML - Hypertext Markup Language
• 4  CSS - Cascading Stylesheets
• 5  PHP - Hypertext Preprocessor
• 6  JavaScript
• 7  Webdesign
• 8  Kontaktseite
• 9  Gästebuch
• 10 Internet-Vademecum

-

⇧ 1 Webseitenbau / Einleitung Link zum Webseitenbau
en Web Design Guide / Introduction
fr Création de sites web / Introduction

Einleitung: Danksagung

-

⇧ 2 Internet-Grundlagen Link zum Webseitenbau
en Basics ot the the Internet
fr Bases de l'Internet

• a Grundlagen / Basics
• b Normen und Empfehlungen / Standards and recommendations
• c Webmaster
• d Internet-Zugang
• e Computer Hard- & Software
• f Browser
• g Sicherheit
• h Recht und Datenschutz
• i Geschichte / History / Histoire

-

↑ a) Grundlagen
en Basics
fr Bases

de	en	fr
Internet-Grundlagen	Basics ot the the Internet	Bases de l'Internet
Grundlagen-Sites	Basic Sites	Sites des bases
Begriffe und Definitionen	Terms and definitions	Termes et définitions
Grundlagen-Websites und Workshops	Basic Websites and Workshops	Sites web de bases et workshops
Video-Tutorials	Video-Tutorials	Video-Tutorials
Glossars	Glossaries	Glossaires
Abkürzungen, Akronyme	Abbreviations, acronyms	Abréviations, acronymes
Häufig gestellte Fragen (FAQ)	Frequently asked questions	Foire aux questions (FAQ)

Internet-Grundlagen: Begriffe und Definitionen / Terms and definitions

Internet-Grundlagen: Grundlagen-Websites & Workshops

Internet-Grundlagen: Video-Tutorials

Internet-Grundlagen: Glossars

Internet-Grundlagen: Abkürzungen und Akronyme / Abbreviations, acronyms

Internet-Grundlagen: Häufig gestellte Fragen (FAQ) / Frequently asked questions [FAQ]

Internet-Grundlagen: Foren

Internet-Grundlagen: E-Mails, Emoticons & Smileys

-

↑ b) Normen und Empfehlungen
en Standards and recommendations
fr Normes et recommandations

• Allgemein
• Normen / Standards / Normes
• Empfehlungen / Recommandations / Recommendations

-

← Allgemein
en General
fr Générale

Normen: Unterschied zwischen Norm und Standard

Normen: Begriffe

Normen: Grundsätze der Normung

Normen: Reglemente, Glossars und FAQ

Normen: Referenzieren von ISO und IEC Normen in Vorschriften

Normen: EU: Neues Konzept & Harmonisierte Europäische Normen

Normen: Schweiz: New and Global Approach / Normierung / CE Kennzeichnung

Normen: Rechtsverbindlichkeit von Normen

Normen: Verhinderung von Handelshemmnissen

Normen: Weltweite Anwendbarkeit von Internationalen Normen

Normen: Organisationen

Normen: Gesetze und Normen

Normen: Zeichenkodierungen (Character sets)

Normen: Wie entsteht eine Norm

-

← Normen
en Standards
fr Normes

Normen: Recherche

Normen: Sektoren

Normen: Ländercodes, Zeitzonen, Datum und Zeit

Normen: Sprachencodes

Normen: Bankwesen , Währungen

Normen: Tastaturbelegungatur / Keyboard layouts / Disposition des claviers

Normen: Metrologie (Masse und Gewichte)

Normen: Elektrostecker

Normen: Informationstechnologie

-

← Empfehlungen (Industriestandards)
en Recommandations (De-facto-Standards)
fr Recommendations (Standards de facto).

W3C: Empfehlungen / Recommandations / Recommendations

-

↑ c) Webmaster
en Webmaster
fr Webmestre

de	en	fr
Webmaster	Webmaster	Webmestre
Begriffe und Definitionen	Terms and definitions	Termes et définitions
Grundlagen-Websites und Workshops	Basic Websites and Workshops	Sites web de bases et workshops
Tools- und Programmsammlungen
Sonderzeichen
Korrekturprogramme
HTML- und CSS-Validierung
Linkprüfer (von und zu diesen Seiten)

Internet-Grundlagen: Webmaster

Webmaster: HTML- und CSS-Validierung

Webmaster: Google Suchfeld erstellen

-

↑ d) Internet-Zugang
en Internet Access
fr Accès à lInternet

de	en	fr
Internet-Zugang	Internet Access	Accès à lInternet
Begriffe und Definitionen	Terms and definitions	Termes et définitions
Grundlagen-Websites und Workshops	Basic Websites and Workshops	Sites web de bases et workshops
IP-Adresse	IP-Address	Adresse IP
Prüfung des Internetzugangs	Speed of your Internet connection	Testez votre ligne
Kurzlink	TinyURL	TinyURL
(URL that will not break in email postings)
Internet-Archiv	Wayback	Wayback
(Aus der Wayback-Datenbank: Aufruf von alten oder gelöschten Websites)

Internet-Zugang: Allgemein (Begriffe, Websites etc.)

Internet-Zugang: Domain und Domain Name System (DNS)

Internet-Zugang: IP-Adresse

Internet-Zugang: Eigene IP-Adresse anzeigen

Internet-Zugang: Geschwindigkeit der DSL-Verbindung

Internet-Zugang: Ladezeiten und Serverspeed

Internet-Zugang: Internet-Archiv (Wayback-Datenbank)

-

↑ e) Computer Hard- & Software
de Computer Hard- & Software
fr Matériel et logiciels informatique

de	en	fr
Computer Hard- & Software	Computer Hard- & Software	Matériel et logiciels informatique

Hardware: Tastatur / Keyboard / Clavier

Software: Editoren

Software: Player

-

↑ f) Webbrowser
en Web browser
fr Navigateur web

de	en	fr
Webbrowser	Web browser	Navigateur web
Begriffe und Definitionen	Terms and definitions	Termes et définitions
Grundlagen-Websites und Workshops	Basic Websites and Workshops	Sites web de bases et workshops
Browser Kennung (User Agent)	User Agent	User-Agent
Browser-Sicherheit (mit Prüfprogramm)	Browser-Security (with Check)	Sécurité du Browser (avec programme de contrôle)
Browser-Support (mit Prüfprogramm)	Browser-Support (with Check)	Support du navigateur (avec programme de contrôle)

Browser: Browser Kennung (User Agent)

Browser: Browser-Sicherheit (z.B. JavaScript-Einstellung)

Browser: Browser-Support

-

↑ g) Sicherheit
en Security
fr Sûreté

de	en	fr
Sicherheit	Security	Sûreté
Begriffe und Definitionen	Terms and definitions	Termes et définitions
Internetsicherheit	Internet-Security	Sûreté de l'Internet
Zertifizierung	Certification	Certification

Internet-Grundlagen: Sicherheit

Internet-Grundlagen: Zertifizierung

-

↑ h) Recht und Datenschutz
en Law & Information privacy
fr Droit & données personnelles

de	en	fr
Recht & Datenschutz	Law & Information privacy	Droit & données personnelles
Haftungsbeschränkung (Disclaimer)	Limited liability (Disclaimer)	Avertissements généraux (Responsabilité limitée)
Urheberrecht & Copyright	Copyright	Copyright
Begriffe und Definitionen	Terms and definitions	Termes et définitions

Internet-Grundlagen: Recht und Datenschutz

Recht: Haftung (Disclaimer)

Recht & Datenschutz: Urheberrecht & Copyright

Recht & Datenschutz: Inhalt-, Bilder- & Traffic-Klau

Recht & Datenschutz: Domain-Recht

Recht & Datenschutz: Datenschutz

Recht & Datenschutz: Datenschutz und Cookies

Recht & Datenschutz: Netiquette (oder Netikette)

-

↑ i) Geschichte
de History
fr Histoire

de	en	fr
Computer Geschichte	Computer History	Histoire de l'ordinateur

Computer: Geschichte / History / Histoire

-

⇧ 3 HTML - Hypertext Markup Language
de Hypertext-Auszeichnungssprache
fr Langage de balisage d'hypertexte

de	en	fr
HTML	HTML	HTML
Einleitung	Introduction	Introduction
Grundlagen-Websites und Workshops	Basic Websites and Workshops	Sites web de bases et workshops
Video-Tutorials	Video-Tutorials	Video-Tutorials
HTML-Dokument	HTML-Document	Document HTML

de	en	fr
HTML-Elemente	HTML-Elements	Éléments HTML
Schriften, Text-Elemente, Block & Inline, Hintergrund	Characters, Text Elements, Block & Inline, Background	Caractères, Élements du texte, Blocs & En ligne, Fond
Listen, Tabellen, Grafiken, Kasten & Rahmen, Farben	Lists, Tables, Graphics, Boxes & Borders, Colors	Listes, Tableaux, Graphiques, Boxes & Cadres, Couleurs
Formatierung	Formatting	Format
Zeichen, Wort, Zeilen	Characters, Word, Line	Caractères, Mots, Lignes
Auszeichnung, Dekoration, Transformation	Emphasis , Decoration, Transformation	Graisse, Décoration, Transformation
Darstellung	Presentation	Présentation
Position, Ausrichten, Verweise	Position, Align, Links	Position, Align, Liens

de	en	fr
HTM Schriftzeichen	HTM Characters	HTM Caractères
Schriftsatz	Character set	Jeu de caractères
Codetabelle der Sonderzeichen	Codes of Characters	Codes des caractères

de	en	fr
HTM Schriftzeichen	HTM Characters	HTM Caractères
Schriftgrösse	Font-size	Taille de police des caractères
Schriftgrössen in em	Font-size in em	Taille de police en em

de	en	fr
HTML Farben	HTML Colors	HTML Couleurs
Grundlagen / Workshops	Basics / Workshops	Bases / Workshops
Farbwähler	Color-Mixer	Mélangeur de couleurs
Beispiele von Farben	Color Exempels	Exemple de couleurs

Einleitung

HTML: HTML als "lingua franca" des Web

Grundlagen

HTML: Websites & Workshops

HTML-Dokument

HTML: HTML-Dokument erstellen

HTML-Dokument: Grundgerüst

HTML: Dokumenttyp-Deklaration

HTML: Meta-Angaben

HTML: Start- oder Index-Datei index.htm oder index.php

HTML: Körper body

HTML: Meta-Zeichensatzkodierung

HTML: HTML versus CSS

Schriftzeichen

Schriftzeichen: ISO-Schriftsatz

Schriftzeichen: Codetabelle der Sonderzeichen

Schriftzeichen: Schriftart (font-family)

Schriftzeichen: Schriftgrösse (font-size)

Text-Element

HTML: Text-Elemente

Text-Elemente: Überschrift (heading)

Text-Elemente: Absatz (paragraph)

Text-Elemente: Zeile, Zeilenumbruch (line, break)

Text-Elemente: Trennlinie (horizontal ruler)

Text-Elemente: Unsichtbar (hidden)

Text-Elemente: Pseudoelemente & Pseudoklassen

Block & Inline-Elemente

HTML: Block & Inline-Elemente

Block-Element: div

Block-Element: pre

Inline-Element: span

Inline-Element: code

Formatieren

HTML: Text-Formatierung

Text-Formatierung: Zeile, Zeilenhöhe

Position

HTML: Bildlaufleiste (overflow)

HTML: Position: display:inline

HTML: Position: float

Ausrichten

HTML: Horizontale Textausrichtung text-align:...

HTML: Vertikale Textausrichtung vertical-align:...

HTML: Aussenabstand margin

HTML: Innenabstand padding

Listen & Tabellen

HTML: Listen (list)

HTML: Tabellen (table)

Kasten, Rahmen, Kontur

HTML: Das Box-Modell

HTML: Kasten (box)

HTML: Rahmen (border)

HTML: Kontur (outline)

HTML Boxen: Beispiele

Hintergrund

Hintergrund: Angabe des Hintergrundes in einem Stylesheet

Verweise

HTML: Verweise (Links)

HTML: Externe Verweise (Links)

HTML: Interne Verweise (Links)

HTML: Anker definieren und Verweise zu Ankern

Verweise: Öffnen eines Links in einem neuen Fenster

Verweise: Link zu Audio Start Wav start.wav3

Verweise: Link zu E-Mailmailto

Verweise: Pseudoklassen a:link a:visited a:hover a:active

Verweise: Externe Links mit einem Symbol ↗

Grafik-Technik

HTML: Grafik-Technik

HTML: Grafiken in HTML-Seiten einbinden

HTML: Grafiken skalieren und ausrichten

HTML: Grafik mit Verweis

HTML: Grafikformate

HTML: Grafiksorten

Farben

HTML: Farben

Farben: Hintergrund- und Schriftfarbe

Farben: Farbwähler (Color-Mixer)

-

⇧ 4 CSS - Cascading Stylesheets

de	en	fr
CSS	CSS	CSS
Einleitung	Introduction	Introduction
Grundlagen-Websites und Workshops	Basic Websites and Workshops	Sites web de bases et workshops
Video-Tutorials	Video-Tutorials	Video-Tutorials

Einleitung

CSS: Prinzip

CSS: Einführung in CSS-basierte Layouts

CSS: Trennung von Inhalt und Aussehen

Grundlagen

CSS: Websites & Workshops

Erstellen und Einbinden

CSS: External Stylesheet

CSS: Internal Stylesheet

CSS: Inline Stylesheet

Syntax

CSS: Spezifikation und Syntax

Beispiele

CSS: Formatierung von <body>

-

⇧ 5 PHP - Hypertext Preprocessor

de	en	fr
PHP	PHP	PHP
Einleitung	Introduction	Introduction
Grundlagen-Websites und Workshops	Basic Websites and Workshops	Sites web de bases et workshops
Video-Tutorials	Video-Tutorials	Video-Tutorials

Einleitung

PHP-Einleitung: Was ist PHP?

PHP-Einleitung: Beispiel eines PHP-Befehls

PHP-Einleitung: Orte an denen PHP-Codes stehen können

PHP-Websites

PHP Web-Grundlagen: Websites & Workshops

PHP-Anleitungen

PHP: PHP-Anleitung

PHP-Anleitung: PHP-Code <?php...?>

PHP-Anleitung: Ausgabe mit echo

PHP-Anleitung: Berechnungen $summe = $x + $y

PHP-Anleitung: Include include

PHP-Anleitung: Schleifen for while do...while

PHP-Befehle (Befehlsreferenzen & Operatoren)

PHP: PHP-Befehle

PHP-Befehle: Schliessen einer offenen Datei fclose

PHP-Befehle: Zeichenketten

PHP-Befehle: Kontrollstrukturen if else for include

PHP-Befehle: Zuweisungs Operator =

PHP-Befehle: Vergleichs-Operatoren == === != > >= < <=

PHP-Befehle: Logische Operatoren and or xor

PHP-Befehle: Arithmetische Operatoren + - * /

PHP-Befehle: Mathematik

PHP-Befehle: Array

PHP-Befehle: Kontrollstruktur for

PHP-Befehle: Kontrollstruktur foreach

PHP-Befehle: Kontrollstruktur while

PHP-Befehle: Kontrollstruktur do...while

Navigation

PHP: Navigation mit PHP erstellen

PHP-Navigation: Allgemein

PHP-Navigation: Einlesen der Strukturdaten

PHP-Navigation: Menü-Liste erstellen

PHP-Navigation: Menü-Liste anzeigen

PHP-Navigation: Inhaltsverzeichnisse

PHP-Navigation: Sitemap erstellen

PHP-Navigation: Include-Datei kopf-start.php

PHP-Navigation: Include-Datei body-start.php

PHP-Navigation: Include-Datei ende.php

Formulare

PHP: Formulare

Formulare: Formularbox

Formulare: Beschriftung

Formulare: Beschriftung mit Labels

Formulare: Eingabefelder definieren

Formulare: Druckknöpfe (Buttons)

Formulare: Radio Button

Formulare: Checkboxen

Formulare: Klick Buttons

Formulare: Absenden & Verwerfen

Formulare: Stylesheet

Formulare: Beschriftung mit Labels

Diverse Anwendungen

PHP: Diverse Anwendungen

PHP-Anwendungen: Automatische Weiterleitung

PHP: Dateityp-Deklaration

PHP-Anwendungen: Automatische Weiterleitung

Gästebuch: Erstellen Link zum Gästebuch

Kontaktformular: Erstellen Kontaktseite

-

⇧ 6 JavaScript

de	en	fr
JavaScript	JavaScript	JavaScript
Einleitung / Begriffe	Introduction / Terms	Introduction / Termes
Grundlagen-Websites und Workshops	Basic Websites and Workshops	Sites web de bases et workshops
Video-Tutorials	Video-Tutorials	Video-Tutorials

Beispiele von PHP und JavaScript

en Examples of PHP and JavaScript   fr Examples avec PHP et JavaScript

Browser: Browser-Sicherheit (z.B. JavaScript-Einstellung)

de	en	fr
Cookies	Cookies	Cookies
Einleitung/Begriffe	Introduction/Terms	Introduction/Termes
Grundlagen-Websites und Workshops	Basic Websites and Workshops	Sites web de bases et workshops

Einleitung

JavaScript: Was ist und was kann JavaScript?

JavaScript: Begriffe

Grundlagen

JavaScript: Grundlagen-Websites und Workshops

Anwendungen

JavaScript: Anleitung der Anzeige ob JavaScript aktiviert ist

Cookies

Cookies: Was sind Cookies?

Cookies: Grundlagen-Websites und Workshops

-

⇧ 7 Webdesign

de	en	fr
Webdesign	Web Design	Web design
Einleitung/Begriffe	Introduction/Terms	Introduction/Termes
Grundlagen-Sites und Workshops	Basics Websites and Workshops	Sites des bases et workshops
Video-Tutorials	Video-Tutorials	Video-Tutorials
Grafik, Bilder, Symbole	Graphics, Pictures, Symbols	Graphiques, images, symboles
Design	Design	Design
Gitterfreie Gestaltung	Thinking Outside the Grid	Construire un site sans tableaux
Technik	Technology	Technique
Tipps und Tricks	Tipps und Tricks	Tipps und Tricks

Bilder/Symbole/Icons en Pictures/Symbols/Icons fr Images/symboles/icônes
Grafik mit Verweis Bordeaux, Miroir d'eau place de la Bourse	E-Mail - Smileys	Mit Verweis auf die entsprechenden Länder im Internet-Vadenecum Smileys
Bildtafeln, Schilder	Symbole	Cliparts
Piktogramme	Icons	Emoticons :-)

Grundlagen

Webdesign: Grundlagen-Websites und Workshops

Design

Webdesign: Bestandteile einer Website

Webdesign: Gitterfreie Gestaltung

Webdesign: Tabellenlose Websites

Webdesign: Barrierefreies Webdesign

Webdesign: Frames

Bilder, Symbole, Icons

Webdesign: Bilder, Symbole, Icons

Webdesign: Lupe

Webdesign: Smiley

Webdesign: Button (Schaltfläche)

Webdesign: Dot (Auflistungspunkt)

Webdesign: Bar (Trennleiste)

Webdesign: Wallpaper (Hintergrundbild)

Webdesign: Symbole

Webdesign: Bildtafeln & Schilder

Webdesign: Icons

Webdesign: Cliparts

Webdesign: Logos

Webdesign: Thumbnail (Vorschaubild)

Webdesign: Bilderquellen, Fotos

Bildbearbeitung

Webdesign: Bildbearbeitung

Technik

Webdesign: Barrierefreies Webdesign

Webdesign: Definitionen für verschiedene Ausgabemedien

Webdesign: Automatische Umleitung

Webdesign: Typische Fehler

Webdesign: Tipps und Tricks

-

⇧ 8 Kontaktseite

Webseitenbau: Kontaktseite

-

⇧ 9 Gästebuch

Webseitenbau: Gästebuch

-

⇧ 10 Internet-Vademecum

Internet-Vademecum

Internet-Vademecum: Sitemap

Internet-Vademecum: Suchen

Internet-Vademecum: Behörden, Gesetze

Internet-Vademecum: Posttarife

Internet-Vademecum: Suchmaschinen

-

⇧ D Suchen / Search / Recherche

• 1 Suche im Webseitenbau und im Internet-Vademecum
• 2 Suche in Wikipedia und Suchmaschinen
• 3 Suche in Grundlagensites des Webseitenbaus
• 4 Suche im Internet-Archiv (Wayback-Datenbank)

-

⇧ 1 Suche im Webseitenbau und im Internet-Vademecum

Webseitenbau   Web Webseitenbau Webseitenbau Webseitenbau: Sitemap Webseitenbau: Stichwortverzeichnis Suchen / Search / Recherche Referenzen / References / Références

Internet-Vademecum   Web Internet-Vademecum Internet-Vademecum Internet-Vademecum: Sitemap Internet-Vademecum: Stichwortverzeichnis

Internet-Grundlagen: Begriffe und Definitionen / Terms and definitions

Internet-Grundlagen: Grundlagen-Websites & Workshops

-

⇧ 2 Suche in Wikipedia und Suchmaschinen

-

⇧ 3 Suche in Grundlagensites des Webseitenbaus

PHP.net

-

⇧ 4 Suche im Internet-Archiv (Wayback-Datenbank)

-

⇧ E Zeichenerklärung

- Zeichenerklärung		Lupe: Wird bei Bildern zur Vergrösserung des Bildes verwendet.
		Buch: Öffnet zum Beispiel bei einem Bild das Dokument der Herkunft.
		Verweis: Link zu einem Text im Internet-Vademecum.
		Öffnet den Link in einem neuen Fenster. ( Beispiel) Normale externe Links dieser Website öffnen im gleichen Fenster. Mit <Ctrl+Enter> oder dem Kontextmenü (rechte Maustaste) kann auch jeder Link in einem neuen Fenster geöffnet werden.
		Pfeil: Weist auf ein Dokument hin.
		New: Neu in dieser Website
		Neu in dieser Website
		Information: Verweist auf ein Dokument mit wichtigen Informationen
		Weltkugel: Verweist auf externe Websites
		Weiter: Öffnet ein Dokument in der ganzen Grösse.
		Wichtig
		Suchen
		Audio
		Video
		Microsoft Word Dokument
		Adobe PDF Dokument
		PowerPoint Präsentation
		Flash Player
		Post (Briefe)
		E-Mail
		Telefon
		Karten (Landkarten, Stadtpläne)
		Wechselkurse
		Baustelle (in Bearbeitung)
	Mit Verweis auf die entsprechenden Länder im Internet-Vadenecum

↑