Ausgewählte HTML-Sprachelemente
Aus der Vielzahl der Möglichkeiten, mit HTML Dokumente zu erstellen, sollen hier einige exemplarisch vorgestellt werden.Überschriften
| <H1> Mein erstes Web-Dokument! </H1> | Mein erstes Web-Dokument! |
| <H4> Eine mittelgrosse Überschrift </H4> | Eine mittelgroße Überschrift |
| <H6> Etwas Klitzekleines zum Schluss. </H6> | Etwas Klitzekleines zum Schluss. |
- 6 verschiedene Skalierungen
- <H1> wird mit der höchsten, <H6> mit der niedrigsten verfügbaren Dicke und Größe dargestellt
 |
uS: Absatzformat wählen -> Überschrift n |
 |
uS: Vorlage anwenden -> Überschrift bzw. Überschrift 1 |
Hypertextlinks
- Synonyme: Hyperlinks, Links, Verweise, Referenzen, . . .
- Anzahl und Plazierung der Links hat großen Einfluss auf Lesbarkeit des Dokumentes
| <A href="http://www.eplus.de" title="zur E-Plus-Homepage"> Homepage von E-Plus</A> | Homepage von E-Plus | |
| <A href="mailto:support@hrz.tu-chemnitz.de" title="E-Mail an URZ-Support schreiben">Email</A> |
- Hinweis: Bei mailto
bitte keine persönliche E-Mail-Adresse angeben! - Spam-Gefahr!
Ausweg: "Verschleiern" der E-Mail-Adresse - siehe Spam-Schutz für E-Mail-Adressen
| <A href="url" title="kurzinfo"> Verweistext im Dokument </A> |
- URL enthält die Adresse der referenzierten Information
- title-Attribut (optional) enthält eine beim Überstreichen mit der Maus eingeblendete Kurzinfo
| protokoll:[//]ressource |
- der Verweistext enthält den Hyperlink
- Darstellung: meist in blauer Schrift (änderbar)
- Klick auf diese Stelle lädt als Nächstes die referenzierte Information in den Browser
- auch Sound, Video u.a.m. werden auf diese Weise ins Dokument eingebunden!
- Protokoll: meist http (für Web-Dokumente) oder mailto (für eine E-Mail-Adresse)
|
|
oS: Neuen Link einfügen, oder M: Einfügen -> Link |
|
|
oS: Hyperlink-Dialog, oder M: Einfügen -> Hyperlink |
(Animierte) Grafiken
- Grafiken dienen z.B. der Illustration von Text, als Hyperlink (anstelle Verweistext), als Hintergrundbild
- allgemeiner Hinweis: Grafiken anderer Web-Dokumente nicht kopieren, wenn Autor das verbietet - Copyright beachten!
- empfohlene Grafikformate: GIF, JPEG oder PNG (Vorteil: "komprimierte" Speicherformate - sparen Platz und Ladezeit
| <IMG src="http://www.tu-chemnitz.de/tu/logo/deutsch_home.gif" width=128 height=65 alt="Logo der TU Chemnitz"> |  |
| <IMG src="cup.gif" width=40 height=37 alt="A cup of coffee, please!"> |  |
| <IMG src="URL_der_Grafikdatei"> [width="x"] [height="y"] [alt="Textinformation"]> |
- src: Speicherort (URL) der Grafik
- Angabe von Breite und Höhe der Grafik verkürzt deren Ladezeit
- alt: verbaler Text, der bei nicht ladbarem Bild (alternativ) angezeigt wird
- es gibt viele weitere Attribute!
Grafiken und Farben
- farbliche Abstimmung der (Hintergrund-) Grafiken mit der Farbe der Schrift und vor allem der Hyperlinks!
- Farben auch passend zum "Thema" der Website wählen
- mehr zu Einsatz, Harmonie und Wirkung von Farben: siehe zum Beispiel www.metacolor.de
- Farbtöne bestimmen bzw. herausfinden:
Farbton eines Pixels auf Desktop bestimmen: z.B. mit RGB-Farbwert
die meisten Web-Editoren oder CMS bieten eine Farbauswahl für Schrift
→ Farbton aussuchen; Hexcode einer Farbe dort einfach ablesbar!
Erstellen des ersten Dokumentes mit einigen der gezeigten Features zeigt:
HTML hat noch etliche "Grenzen", vor allem bezüglich Design!
Nützliche Links:
