Arbeitsumgebung

tl;dr

• Installiere Visual Studio Code
• Installiere einen oder mehrere Browser die einen Code-Inspector haben (Firefox und Chrome)

Technischer Hintergrund

Um HTML und CSS zu schreiben, benötigen wir kein komplexes oder teures Programm. Denn HTML-Dateien sind reine Text-Dateien.

Text-Dateien sind eines der ältesten Dateiformate der Computergeschichte. Den ASCII-Standard gibt es seit 1963, er definiert 128 verschiedene Zeichen, davon 34 Steuerzeichen und 94 Schriftzeichen

(inkl. Leerzeichen wie Tabulator und Zeilenumbruch).

!"#$%&'()*+,-./0123456789:;<=>?

@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_

`abcdefghijklmnopqrstuvwxyz{|}~

Alle Computerprogramme werden mit diesen wenigen Zeichen geschrieben und danach in von einem Compiler in ein ausführbares Programm kompiliert.

(Das ist nur die halbe Geschichte über Textdateien, später dazu mehr.)

HTML müssen wir nicht kompilieren. Damit das Betriebssystem weiss, dass es das HTML-Dokument mit dem Browser öffnen soll, reicht es die Dateiendung anzupassen. Aus .txt wird .html.

Texteditoren

Trotzdem benötigen wir natürlich ein Programm um Textdateien zu bearbeiten.

Word und TextEdit fallen als Optionen weg, da Sie Texte in einem eigenen Format abspeichern, in dem auch Formatierungen enthalten sind.

Auf Windows gibt es als einfachsten Texteditor Notepad vorinstalliert. TextEdit auf dem Mac ist leider kein reiner Texteditor, es werden auch Formatierungen mitabgespeichert. Dies kann man in den Einstellungen anpassen.

Es lohnt sich einen modernen TextEditor zu installieren. Diese bieten viele Hilfsmittel beim editieren von Text, z.B. das farbliche Auszeichnen von Schlüsselwörter von HTML, Auto-Vervollständigung usw.

Ihr könnt euch gerne einen Texteditor eurer Wahl installieren, meine aktuelle Empfehlung ist Visual Studio Code. Weitere beliebte Texteditoren waren in den letzten Jahren: Atom, TextWrangler, Brackets, Sublime Text 2, Coda 2. An der Rechnern der SfG ist jnd. Adobe Dreamweaver der einzige vorhandene Texteditor. Auf Windows ist (neben Visual Studio Code) Notepad++ sehr beliebt. Arbeitet man mit grösseren Projekten, kann es auch sinnvoll sein, sich eine Entwicklungsumgebung mit noch mehr Funktionen zu installieren.

Visual Studio Code

Download: Visual Studio Code

Zwei Tips:

• Lange Code-Zeilen werden nicht umgebrochen. Diese Einstellung kann man ändern. Entweder im Menü "Anzeigen" > "Zeilenumbruch". Oder in den Einstellungen
• Die Grundstruktur eines HTML-Dokuments kann man sich bereitstellen lassen, indem man die leere Datei mit der Endung .html abspeichert und danach html:5 eintippt + Enter drückt.

Browser

Für den Unterricht solltet ihr die aktuellste Version von Firefox oder Chrome, am besten beide, installiert haben.