Vorbereitungen, Installation von Visual Studio Code, Erstellen einer HTML-Startseite
Vorbereitungen
Im Windows-Explorer (= Datei-Explorer = üblicher Datei-Manager unter Windows):
- Datei-Erweiterungen (= file extensions) anzeigen lassen
- Windows 11: Menüpunkt
View
/Ansicht
, dortShow
, dann Haken entsprechend setzen.
- Gehe ins Verzeichnis (= in den folder)
C:\Users\Vorname.Nachname
(oderC:\Benutzer\Vorname.Nachname
oder ähnliches) (unterThis PC
/Dieser PC
): Erstelle dort ein Verzeichnis mit dem Namen “informatik” und darin zwei Unterverzeichnisse mit den Namen “html” und “python”.1)
Installation von Visual Studio Code (oder kurz "VS Code" oder schlicht "Code")
Visual Studio Code ist ein weit verbreiteter und moderner Editor, der sich sehr gut zum Schreiben von Computer-Programmen (etwa in Python) und Webseiten (in HTML und CSS) eignet, vgl. https://de.wikipedia.org/wiki/Visual_Studio_Code.
Installiere diesen Editor auf eine der beiden folgenden Weisen:
- über den Microsoft Store
- per Download von https://code.visualstudio.com/Download
Erstellen einer HTML-Seite
Öffne Visual Studio Code.
Wir erstellen gemeinsam eine HTML-Seite mit VS Code. Insbesondere erkläre ich:
- Wie man ein Verzeichnis/einen Folder/einen Ordner in VS Code öffnet (wir öffnen das zuvor erstellte Verzeichnis
html
). - Wie man eine neue Datei anlegt (Namensvorschlag
meine-startseite.html
). - Wie man das HTML-Grundgerüst bekommt (per
!
+Enter
) - dafür muss die Datei die richtige Endunghtml
haben (beachte Syntax-Highlighting). - Sprache setzen (per
de
oderde-CH
) - Titel setzen (
Meine Startseite
) h1
-Überschrift (Meine Lieblingslinks
) - erkläre VS Code-Unterstützung (Syntaxvervollständigung)h2
-Überschrift (Schule
, späterFreizeit
etc.)- unordered list (per
ul
) - list items (per
li
), etwa Informatik, Mathematik, Englisch - Links (per
a
, danna:link
auswählen); Benennung nicht vergessen! z. B. auf DokuWiki-Seite oder Sharepoint - Dann “Freizeit”, etwa “Wetter”, “Reisen”, etc. (evtl.
target=“_blank”
)
Abspeichern mit Ctrl+s
.
Anzeigen lassen: Im Explorer Datei suchen, dann anklicken (evtl. “Öffnen mit”/“Open with” und dann Edge auswählen).
Bonus: Ausklappboxen
Lerne mit Hilfe von https://www.w3schools.com/tags/tag_details.asp, wie man eine Ausklappbox definiert.
Start- oder Home-Seite im Browser festlegen
Mache die gerade erstellte HTML-Seite zur Start- oder Home-Seite deines Browsers2)
Im Browser “Edge” geht das wie folgt:3)
- Kopiere den Inhalt der Adress-Seite in die Zwischenablage (Clipboard); das ist die URL, die du im nächsten Schritt benötigst.
- Öffne das Menü von Edge (die drei waagerechten Punkte rechts oben anklicken), klicke dann auf Settings (Zahnrad-Icon).
- Klicke links auf “Start, home, new tabs”.
- Die Startseite kann man nun unter “When Edge starts” ändern, die Home-Seite unter “Home button”.
Wenn du einen anderen Browser (etwa Firefox, Chrome, …) verwendest: Suche im Internet, wie man die Start- bzw. Home-Seite ändert.