Nachricht für neue Nutzer.
Nachricht für engagierte Nutzer.

HTML und CSS: Unterschied zwischen den Versionen

Aus ZUM-Unterrichten
Markierung: Quelltext-Bearbeitung 2017
Keine Bearbeitungszusammenfassung
Markierung: Quelltext-Bearbeitung 2017
Zeile 1: Zeile 1:
{{Lernpfad|Dies ist ein Lernpfad zur '''Einführung in HTML und CSS'''. So können Schüler in wenigen Stunden erste Schritte im Webdesign mit schnellen Ergebnissen unternehmen. Zur Festigung gibt es interaktive Quizze.  
{{Lernpfad|Dies ist ein Lernpfad zur '''Einführung in HTML und CSS'''. '''HTML''' (engl. '''''H'''yper'''t'''ext '''M'''arkup '''L'''anguage'') ist eine Auszeichnungssprache für Dokumente. Unter '''Hypertext''' versteht man die Möglichkeit, mit Verweisen zu bestimmten Stellen innerhalb und außerhalb des Dokuments springen zu können. Diese Dokumente können im World Wide Web unabhängig von Betriebssystem als Webseiten in jedem Browser angezeigt werden.


'''HTML''' (engl. '''''H'''yper'''t'''ext '''M'''arkup '''L'''anguage'') ist eine Auszeichnungssprache für Dokumente. Unter '''Hypertext''' versteht man die Möglichkeit, mit Verweisen zu bestimmten Stellen innerhalb und außerhalb des Dokuments springen zu können. Diese können im World Wide Web unabhängig von Betriebssystem als Webseiten in jedem Browser angezeigt werden.
Dieser Lernpfad soll in 3 Doppelstunden zu einer eigenen Webseite führen und Schülern in wenigen Stunden erste Schritte im Webdesign mit schnellen Ergebnissen unternehmen. Zur Festigung gibt es interaktive Quizze. }}
 
Die Dateiendung ist '''.html''' oder '''.htm'''. HTML-Seiten können in jedem Texteditor oder in Code-Editor erstellt und bearbeitet werden.}}


{{HTML und CSS}}
{{HTML und CSS}}
Zeile 15: Zeile 13:
* [https://wiki.selfhtml.org/wiki/Startseite SELFHTML]: [https://wiki.selfhtml.org/wiki/HTML '''Portalseite HTML'''] mit umfangreicher, aktueller Dokumentation aller Elemente
* [https://wiki.selfhtml.org/wiki/Startseite SELFHTML]: [https://wiki.selfhtml.org/wiki/HTML '''Portalseite HTML'''] mit umfangreicher, aktueller Dokumentation aller Elemente
*: Viele Tutorials zu Webseitenerstellung, Barrierefreiheit und Responsivem WebDesign
*: Viele Tutorials zu Webseitenerstellung, Barrierefreiheit und Responsivem WebDesign
** Selfhtml: [https://wiki.selfhtml.org/wiki/HTML/Tutorials/Einstieg '''Einsteiger-Seminar'''] am Beispiel einer Schreinerei-Webseite
** Selfhtml: [https://wiki.selfhtml.org/wiki/Einstieg in HTML '''Einsteiger-Seminar'''] am Beispiel einer Schreinerei-Webseite
** [https://wiki.selfhtml.org/wiki/HTML/Tutorials/Grundger%C3%BCst HTML5-Grundgerüst] zum Aufbau einer Webseite
** [https://wiki.selfhtml.org/wiki/HTML/Tutorials/Grundger%C3%BCst HTML5-Grundgerüst] zum Aufbau einer Webseite
** [https://wiki.selfhtml.org/wiki/HTML/Tutorials/Seitenstrukturierung HTML5-Seitenstrukturierung] mit den neuen HTML5-Elementen
** [https://wiki.selfhtml.org/wiki/HTML/Tutorials/Seitenstrukturierung HTML5-Seitenstrukturierung] mit den neuen HTML5-Elementen
Zeile 22: Zeile 20:
{{Box|Download|[https://unterrichten.zum.de/images/a/ae/HTML-Spickzettel.pdf '''Cheat Sheet''' (Spickzettel)] für die ersten Schritte in HTML und CSS (pdf, 266k)|Download}}
{{Box|Download|[https://unterrichten.zum.de/images/a/ae/HTML-Spickzettel.pdf '''Cheat Sheet''' (Spickzettel)] für die ersten Schritte in HTML und CSS (pdf, 266k)|Download}}


* [https://unterrichten.zum.de/wiki/Datei:HTML-Spickzettel.pdf '''Cheat Sheet''' (Spickzettel)] für die ersten Schritte in HTML und CSS (pdf, 266k)
 


=== Farben und Farb-Codes ===
=== Farben und Farb-Codes ===
Zeile 28: Zeile 26:
* [https://wiki.selfhtml.org/wiki/Farbe/Farbkonzept Farbkonzept] (SELFHTML)
* [https://wiki.selfhtml.org/wiki/Farbe/Farbkonzept Farbkonzept] (SELFHTML)
* [https://wiki.selfhtml.org/wiki/Farbe/Farbangaben#Farbpaletten Standard-Farbpaletten] (SELFHTML)
* [https://wiki.selfhtml.org/wiki/Farbe/Farbangaben#Farbpaletten Standard-Farbpaletten] (SELFHTML)
* [http://html-color-codes.info/ HTML Color Codes]
:Hexadezimale Farbcodes durch einen Klick auf die gewünschte Farbe erzeugen.
:* [http://html-color-codes.info/webfarben_hexcodes/ Webfarben hexcodes - Tabelle der Webfarben] (auf Deutsch)




Version vom 11. Mai 2025, 16:28 Uhr

Lernpfad
HTML und CSS
Dies ist ein Lernpfad zur Einführung in HTML und CSS. HTML (engl. Hypertext Markup Language) ist eine Auszeichnungssprache für Dokumente. Unter Hypertext versteht man die Möglichkeit, mit Verweisen zu bestimmten Stellen innerhalb und außerhalb des Dokuments springen zu können. Diese Dokumente können im World Wide Web unabhängig von Betriebssystem als Webseiten in jedem Browser angezeigt werden. Dieser Lernpfad soll in 3 Doppelstunden zu einer eigenen Webseite führen und Schülern in wenigen Stunden erste Schritte im Webdesign mit schnellen Ergebnissen unternehmen. Zur Festigung gibt es interaktive Quizze.


Devicon-html5-plain-wordmark.svg

HTML und CSS

  1. HTML als Auszeichnungssprache
    • meine erste Webseite
    • unsichtbar, aber nötig: Dokumentstruktur
  2. Jetzt kommt Farbe ins Spiel: CSS
  3. responsives Mehrspaltenlayout
  4. von der Webseite zum Web-Projekt


Weblinks

Tutorials

S-Logo Q.png

Spickzettel

Download
Cheat Sheet (Spickzettel) für die ersten Schritte in HTML und CSS (pdf, 266k)


Farben und Farb-Codes

Abgerufen von „https://unterrichten.zum.de/index.php?title=HTML_und_CSS&oldid=141348“