Zum Inhalt

Inhaltsverzeichnis • Teil 1 - Anfänger • Inhalte • Visitenkarte
⇦ Vorbereitung / Absatz und Umbrüche ⇨
30.07.2014 11:21:41

Visitenkarte

Aller Anfang …

Der einfachste Fall einer Webpräsenz ist eine Visitenkarte.

Brainstorming:

Was gehört auf eine Visitenkarte? Schreiben sie kurz ihre Gedanken auf einen Zettel.

(Beispiel Visitenkarte)

Wir setzten nun das Ergebnis des Brainstormings in die Praxis um. Dabei verfeinern wir die Ergebnisse suksessive.

Anmerkung: Lesen sie in der Wikipedia nach, was QR-Codes sind. Zum Erzeugen können sie einen Generator verwenden. Allerdings muss ich sie leider noch ein bisschen vertrösten, bis wir eine Grafik (wie einen QR-Code oder ein Passfoto) in unsere Webseite einbauen können, dauert es noch ein wenig.

Visitenkarte als Text

Übung:

Öffnen sie den Editor und schreiben sie jetzt ihre Visitenkarte. Speichern sie den Text unter dem Dateinamen „visitenkarte.txt“ in ihren Arbeitsordner. Öffnen sie Ihren Webbrowser und laden sie die Datei „visitenkarte.txt“.

(Beispiel 01_visitenkarte.txt)

Anhang: Tastaturkommandos

Sie haben gerade ihre erste Webseite geschrieben, die in etwa wie im Beispiel 1 aussehen sollte. Ich gebe zu, hier habe ich ein wenig gemogelt. Denn HTML-Seiten sollten auch die Endung .html haben. Nichtsdestotrotz können sie diese Seite auf einen Webserver legen und im Internet abrufen.

Umlaute?

Computer kodieren Umlaute durch Zahlen in einem Zeichensatz. Dafür existieren verschiedene Zeichensatzsysteme. Am Anfang werden die Umlaute deshalb noch falsch dargestellt. Dazu später mehr.

UTF-8!

Wenn sie die Zeichenkodierung im Browser unter „Ansicht / Zeichenkodierung“ auf „Unicode“ (UTF-8) stellen, sollten die Umlaute richtig dargestellt werden.

Visitenkarte als HTML

Übung:

Speichern sie die Datei visitenkarte.txt unter dem neuen Namen visitenkarte.html. Alternativ können sie sie auch kopieren und umbenennen. Öffnen sie die Datei dann mit ihrem Webbrowser.

(Beispiel 02_visitenkarte_txt.html)

Anhang: Tastaturkommandos

Sind sie nun enttäuscht? Diese Ausgabe hatten sie wohl nicht erwartet. Doch wie kommt diese zustande? Scheinbar hat der Webbrowser jegliche Formatierung (Zeilenumbrüche) übergangen und hat den Text an einem Stück ausgegeben.

Whitespaces

Generell kann man sagen, dass ein Webbrowser alle sogenannten Leerräume oder White­spaces (Tabulatoren, Zeilen­umbrüche und mehr als ein Leerzeichen) überliest und deshalb nicht ausgibt.

Anmerkung: Warum er das tut, lernen wir im Unterkapitel über die Formatierung von Quellcode.

Absätze

Denken sie an den Redakteur und den Setzer. Woher weiß der Setzer, ob ein bestimmter Textabschnitt zusammengehört und nicht auf die nächste Spalte oder Seite umgebrochen werden soll? Er braucht eine logische Formatierung: den Absatz. Dieser ist also ein logisch zusammen­gehöriger Textabschnitt.

In einer Textverarbeitung erzeugen sie einen Absatz mit Enter. Wenn sie die Steuerzeichen eingeblendet haben, erscheint an dieser Stelle ein Pi-Zeichen (¶). Auf jeden Fall behandelt die Textverarbeitung den Absatz als logische Einheit, auf die Formatierungen angewendet werden können (Absatzformate).

Da ein Texteditor eine solche logische Formatierung nicht kennt, simuliert man ihn normalerweise durch zweimaliges Enter drücken. Man erhält so eine Leerzeile zwischen den Absätzen; die logische Formatierung wird durch eine sichtbare ersetzt. Das Drücken der Taste Enter bewirkt das Einfügen eines unsichtbaren Zeichens (ASCII/Unicode: 13) in Mac OS, (ASCII/Unicode: 10) in Unix oder der Zeichenkombination (ASCII/Unicode: 13,10) in DOS/Windows.

Anmerkung: Die Zeichencodes 10 und 13 nennt man auch Linefeed (Zeilenvorschub) und Carriage return (Wagenrücklauf).

Speicherauszug

Im folgenden sehen wir die Datei 01_visitenkarte.txt (Windows-codiert) als Speicherauszug (sogenannter Hex-Dump). Hervorgehoben sind die Speicherzellen 013 010 (CR LF) für einen Zeilenumbruch und 013 010 013 10 (CR LF CR LF) für einen Absatz.

0000: 067 104 114 105 115 116 105 097 Christia
0008: 110 032 072 097 114 116 110 105 n Hartni
0010: 099 107 013 010 068 105 112 108 ck←↓Dipl
0018: 046 045 087 105 114 116 115 099 .-Wirtsc
0020: 104 046 045 073 110 102 046 013 h.-Inf.←
0028: 010 070 114 101 105 101 114 032 ↓Freier
0030: 066 101 114 097 116 101 114 013 Berater←
0038: 010 013 010 083 097 110 100 119 ↓←↓Sandw
0040: 101 103 032 049 048 013 010 049 eg 10←↓1
0048: 054 055 050 055 032 079 098 101 6727 Obe
0050: 114 107 114 195 164 109 101 114 rkrä_mer
0058: 032 079 084 032 066 195 164 114 OT Bä_r
0060: 101 110 107 108 097 117 013 010 enklau←↓
0068: 013 010 084 101 108 046 058 032 ←↓Tel.:
0070: 048 051 051 048 052 032 053 048 03304 50
0078: 056 049 054 050 048 013 010 070 81620←↓F
0080: 097 120 058 032 032 048 051 051 ax: 033
0088: 048 052 032 053 048 056 049 054 04 50816
0090: 050 049 013 010 077 111 098 105 21←↓Mobi
0098: 108 058 032 048 049 055 057 032 l: 0179
00A0: 050 049 048 050 051 053 052 013 2102354←
00A8: 010 013 010 104 105 108 102 101 ↓←↓hilfe
00B0: 064 104 097 114 116 110 105 099 @hartnic
00B8: 107 046 100 101 013 010 104 116 k.de←↓ht
00C0: 116 112 058 047 047 104 105 108 tp://hil
00C8: 102 101 046 104 097 114 116 110 fe.hartn
00D0: 105 099 107 046 100 101 013 010 ick.de←↓

Sie sehen also, dass auch in einer reinen Textdatei Umbrüche und Absätze über spezielle Steuerzeichen erstellt werden.

Zusammenfassung

⇦ Vorbereitung / Absatz und Umbrüche ⇨
Nach oben