von Andreas Kalt
~~SLIDESHOW~~
Firefox | Chrome | Safari | Internet Explorer |
HTML: Hypertext Markup Language
Prinzip erkannt?
<h1></h1>
für eine Überschrift 1. Ordnung<p> </p>
— das Schlusstag enthält einen Schrägstrich vor dem TagelementDurch (Hyper)-Links.
<a>
kennzeichnet Linksin diesem Satz <a href="/pfad/zur/datei.html">ist dies ein Link</a>
<p>
und </p>
Text wird mit HTML-Tags markiert, beides zusammen heißt „Markup“
<h1></h1>
bis <h6></h6>
<p></p>
<strong></strong>
(in der Regel fett)<em></em>
(in der Regel kursiv)<ul></ul>
und nummeriert <ol></ol>
<ul>
und <ol>
umfassen alle <li>
<ul> <li>erster Listenpunkt</li> <li>zweiter Listenpunkt</li> </ul>
Dokumententyp—DOCTYPE
<!DOCTYPE html>
für HTML 5 — gibt dem Browser die Art des zu erwartenden Dokuments an und ermöglicht damit, dieses korrekt zu parsen (»durchzugehen und darzustellen«)
<html></html>
umfasst alles außer den DOCTYPE
Kopf und Körper: <head></head>
und <body></body>
<head></head>
: Titel des Dokuments, zusätzliche Informationen (Stichwörter, Kurzbeschreibung usw.), u.a. in sog. Meta-Tags: <meta>
<body></body>
: der eigentliche Inhalt → Ist für den Benutzer sichtbar
Unsere Arbeit mit HTML-Dokumenten wird sich fast ausschließlich zwischen den <body>
-Tags abspielen
<img src="/pfad/zum/bild1.jpg">
img
hat immer das Attribut src
: Angabe, wo das Bild gespeichert ist (src
von source = Quelle)img
-Element besteht nur aus einem einzelnen Tag, kein Schlusstagalt
sollte immer vorhanden sein: Kurze Beschreibung des Bildinhalts<img src="/pfad/bild.jpg" alt="Urlaub 2004, Strand">
root
(engl.: Wurzel). Zwei grundsätzliche Möglichkeiten für die Gestaltung von Pfaden
<a href="/material/biologie/"></a>
<a href="biologie/index.html"></a>
oder<a href="../englisch/index.html"></a>
http://www.herr-kalt.de/fotos/
verweist auf den Unterordner fotos
, der auf dem Rechner dieser Website liegtEine Website besteht aus Webseiten.
.gif
: 256 Farben, eine davon transparent möglich, verlustfreie Komprimierung → für einfache Grafiken.jpg
: über 16 Mio. Farben, keine Transparenz, Komprimierung einstellbar, je höher, desto mehr Qualitätsverluste → meist für Fotos.png
: Mio. Farben, verlustfreie Komprimierung, Transparenz möglich → für Grafiken/Fotos, im Einzelfall Dateigröße vergleichenDarstellungsprinzip
Typische Bildgrößen verschiedener Geräte und eines Fotos (Stand 2013)
Details: Digitale Abbildungen verstehen und ihre Größe bearbeiten
6 x 6 = 36 Pixel | 12 x 12 = 244 Pixel |