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

HTML und CSS: Unterschied zwischen den Versionen

Aus ZUM-Unterrichten
K (Textersetzung - „{{wpd|“ durch „{{wpde|“)
Markierung: Quelltext-Bearbeitung 2017
 
(5 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
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'''. <br>
 
<br>Dieser Lernpfad zeigt euch, wie ihr in 3 Doppelstunden eure eigene Webseite erstellt und erste Schritte im Webdesign mit schnellen Ergebnissen erreicht. <br>Zur Festigung gibt es interaktive Quizze. }}
'''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.
 
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}}


== Weblinks ==
== Weblinks ==
* W3C: [http://www.w3c.org '''Das WWW-Konsortium'''] ist für die Festlegung der HTML-Standards zuständig.
* W3C: [https://www.w3c.org '''Das WWW-Konsortium'''] ist für die Festlegung der HTML-Standards zuständig.
* {{wpde|Hypertext Markup Language}}
* {{wpde|Hypertext Markup Language}}


=== Tutorials ===
=== Tutorials ===
[[Datei:S-Logo Q.png|right|200px|link=https://wiki.selfhtml.org/wiki/HTML/Tutorials]]
[[Datei:S-Logo Q.png|right|200px|link=https://wiki.selfhtml.org/wiki/HTML/Tutorials]]
* [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<br>Viele Tutorials zu Webseitenerstellung, Barrierefreiheit und Responsivem Webdesign
*: Viele Tutorials zu Webseitenerstellung, Barrierefreiheit und Responsivem WebDesign
** [https://wiki.selfhtml.org/wiki/Einstieg_in_HTML '''Einsteiger-Seminar'''] am Beispiel einer Schreinerei-Webseite
** Selfhtml: [https://wiki.selfhtml.org/wiki/HTML/Tutorials/Einstieg '''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/HTML5-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/HTML5-Seitenstrukturierung HTML5-Seitenstrukturierung] mit den neuen HTML5-Elementen
 
=== Spickzettel ===
{{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}}


=== Farben und Farb-Codes ===


* [https://wiki.selfhtml.org/wiki/Grafik/Farbkonzept Farbkonzept] (SELFHTML)
* [https://wiki.selfhtml.org/wiki/Grafik/Farbpaletten Standard-Farbpaletten] (SELFHTML)


* [http://www.html-php-mysql.de/generatoren/colors.php HTML-Farbcode-Tabelle] (Online-HTML-Editor for .NET, ASP & PHP)
=== Farben und Farb-Codes ===
:umfangreiche, differenzierte Liste mit Farbcodes und angezeigten Farben


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




Aktuelle Version vom 12. Mai 2025, 14:23 Uhr

Lernpfad
HTML und CSS
Dies ist ein Lernpfad zur Einführung in HTML und CSS.

Dieser Lernpfad zeigt euch, wie ihr in 3 Doppelstunden eure eigene Webseite erstellt und erste Schritte im Webdesign mit schnellen Ergebnissen erreicht.
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=141371“