Show pageOld revisionsBacklinksBack to top This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong. {{backlinks>.}} ====== Hello World in HTML, CSS, JavaScript ====== <WRAP center round tip 60%> Zu dieser Lerneinheit gibt es einen [[https://fginfo.ksbg.ch/~ivo/videos/informatik/ffprog23/01-hello-world-html-css-js.mp4|Screencast]], oder auch auf [[https://bldsg-my.sharepoint.com/:v:/g/personal/ivo_bloechliger_ksbg_ch/EeO_XhfTrUpEhnbQFzAP3rsBosErkXDGBoD4VJ65rD2vSg?e=c5jj7X|Sharepoint]]. </WRAP> <WRAP todo> Führen Sie folgende Dinge auf der Kommandozeile (git-bash) aus: * Im Ihrem Freifach-Programmieren Vezeichnis, legen Sie einen Ordner ''hello'' an. * Wechseln Sie in den Ordner ''hello'' * Starten Sie ''code .'' um den aktuellen Ordner zu öffnen. In Visual Code * Legen Sie eine neue Datei ''hello.html'' an. Geben Sie dazu möglich effizient, ohne Copy-Paste, folgenden Code ein (siehe auch das Video dazu) <code html> <html> <head> <meta charset="utf8"> <title>Hallo HTML Fenstertitel</title> </head> <body> <h1>Hallo HTML Seitentitel</h1> Wie geht's? </body> </html> </code> * Hinweis: Wenn Sie in Visual Studio Code in einer leeren .html-Datei ein ''!'' eingeben, wird eine komplette leere Seite angelegt. * Speichern Sie die Datei ''Ctrl-S''. * Wechseln Sie zur Kommandozeile zurück und geben Sie ''start hello.html'' ein, um die Seite im Browser zu öffnen. * Gratuliere, Ihre erste HTML-Seite (oder das war alles schon bekannt). </WRAP> Aber bitte mit Stil! Wir fügen eine CSS-Datei hinzu, die beschreibt, wie Dinge auf der Seite formatiert und dargestellt werden sollen: <WRAP todo> * In der Datei ''hello.html'', im ''head'' der Seite, fügen Sie folgende Zeile hinzu: <code html> <link rel="stylesheet" href="hallo.css"> </code> * Durch Ctrl-Klick auf hallo.css legen Sie diese Datei neu an und legen darin fest, dass grosse Titel ''h1'' auf dieser Seite rot sein sollen: <code css> h1 { color:red; } </code> * Speichern Sie alle Dateien mit ''Ctrl-K S'' (d.h. ''Ctrl'' gedrückt halten und ''k'' drücken, alles loslassen und dann noch ''s'' drücken). * Laden Sie Ihre Seite im Browser neu (z.B. mit ''Ctrl-Shift-R''). Geht erst mal auch ohne Shift, aber so wird sicher alles neu geladen und nicht noch alte Dinge aus dem Browsercache geladen. * Gratuliere, Sie haben Ihre erste CSS-Datei geschrieben. </WRAP> Und jetzt noch JavaScript: <WRAP todo> * In der Datei ''hello.html'', im ''head'' der Seite, fügen Sie folgende Zeile hinzu: <code html> <script src="hallo.js"></script> </code> * Durch Ctrl-Klick auf hallo.js legen Sie diese Datei neu an und schreiben Sie folgenden JavaScript-Code: <code js> console.log("Hello world from JavaScript!"); </code> * Speichern Sie alle Dateien mit ''Ctrl-K S'' (d.h. ''Ctrl'' gedrückt halten und ''k'' drücken, alles loslassen und dann noch ''s'' drücken). * Laden Sie Ihre Seite im Browser neu (z.B. mit ''Ctrl-Shift-R''). Geht erst mal auch ohne Shift, aber so wird sicher alles neu geladen und nicht noch alte Dinge aus dem Browsercache geladen. * Das "Hello world from JavaScript!" ist nirgends zu sehen.\ * Öffnen Sie dazu die Developper-Tools mit F12 (Funktionstaste, oberste Reihe). * Öffnen Sie dort den Tab «Console». Eventuell müssen Sie die Web-Seite im Browser neu laden. * Tip top! Ihr erstes JavaScript Programm. </WRAP> <hidden Dateien vom Video> <code html hello.html> <!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>Hallo HTML Fenstertitel</title> <link rel="stylesheet" href="hallo.css"> <script src="hallo.js"></script> </head> <body> <h1>Hallo HTML Seitentitel</h1> Wie geht's? </body> </html> </code> <code css hello.css> h1 { color:red; } </code> <code js hello.js> console.log("Hello world from JavaScript!"); </code> </hidden> lehrkraefte/blc/informatik/ffprg1-2023/hello-html.txt Last modified: 2023/02/07 12:41by Ivo Blöchliger