Im Rahmen der Qualifizierungsmaßnahme Informatik in der Sekundarstufe 1 bietet das InfoLab am Samstag, den 11.02.02023, eine Fortbildung zu HTML&CSS an.

Links

Das Internet

• https://inf-schule.de/rechnernetze/filius/clientserver/konzept_clientserver
• https://infolab.cs.uni-saarland.de
• https://infolab.cs.uni-saarland.de/index.php
• https://infolab.cs.uni-saarland.de/liesmich.html
• https://inf-schule.de/information/informationsdarstellunginternet

HTML&CSS anschauen

1. https://hallowelt.infolabsaar.repl.co/
von https://replit.com/@InfoLabSaar/hallowelt

2. https://webseite.infolabsaar.repl.co/
von https://replit.com/@InfoLabSaar/webseite

3. https://vp45j3.csb.app/ (Kopie von 2.)
von https://codesandbox.io/s/webseite-vp45j3

HTML&CSS schreiben

Mit installiertem Editor auf dem eigenen Computer:

• Mit einfachem Text-Editor auf dem eigenen Computer („lokal“)
  • Textedit (MacOS)
  • Notepad (Windows)
• Zu installierende IDE (Integrated Development Environment)
  • Notepad++ (Windows)
  • VSCodium (mit Erweiterung CodeTogether)
  • Visual Studio Code
  • CuDaText (Editor zum Lernen)

Auf dem iPad:

HTML-Editor HTML5Viewer Pro

Online-Editoren:

• codesandbox.io (auch ohne Anmeldung)
• repl-it.com (nur mit Anmeldung)
• CodePen (von AppCamps verwendet, ohne Anmeldung)
• JSFiddle.net (ohne Anmeldung)
• SoloLearn HTML Online Compiler & Playground (ohne Anmeldung)

HTML&CSS nachschlagen

• Selfhtml (Deutsch)
  Farbpalette: wiki.selfhtml.org/wiki/Grafik/Farbe/Farbpaletten
• W3Schools (Englisch)
• https://developer.mozilla.org/en-US/docs/Learn 
• https://web.dev/learn/ 

Weitere Links

• Inf-schule.de

Grafische Entwicklungsumgebung:

• http://blocklyhtml.zgtm.de/ (Englisch)
  http://htmlbausteine.zgtm.de/ (Deutsch)
  https://bwinf.de/jugendwettbewerb/unterrichtsmaterial/html/ 

Aufgaben für Schüler*innen:

• Appcamps (mit CodePen)
  https://appcamps.de/2020/03/21/schulschliessungen-unterrichtsmaterialien-fuer-zuhause/ 
• https://projects.raspberrypi.org/en/pathways/web-intro (Englisch)
• https://projects.raspberrypi.org/de-DE/projects?software%5B%5D=html-css-javascript 
• https://www.khanacademy.org/computing/hour-of-code/hour-of-code-lessons/hour-of-html/v/making-webpages-intro (Englisch)
• https://studio.code.org/s/csd2-2022 (Englisch)

Selbstlernkurse:

• https://open.hpi.de/courses/webtech2021/ (MOOC)
• https://open.hpi.de/courses/webtech2017 (MOOC)

Learning Apps:

• HTML-Tags: https://learningapps.org/2203170 
• HTML&CSS: https://learningapps.org/12492097 
• Seitenstruktur: https://learningapps.org/18522311
• https://learningapps.org/14620280