Unterrichtswiki - Herr Pfeiffer - informatik:html-css
https://herr-pfeiffer.de/unterrichtswiki/
2026-05-07T11:07:07+00:00Unterrichtswiki - Herr Pfeiffer
https://herr-pfeiffer.de/unterrichtswiki/
https://herr-pfeiffer.de/unterrichtswiki/_media/wiki:logo.pngtext/html2025-03-08T14:01:14+00:00Anonymous (anonymous@undisclosed.example.com)box-modell
https://herr-pfeiffer.de/unterrichtswiki/informatik:html-css:box-modell?rev=1741442474&do=diff
Box-Modell
Eine HTML-Webseite besteht aus rechteckigen Kästchen (Box). Alle Texte und Grafiken einer Webseite liegen in solchen Kästchen oder Boxen.
Alle Boxen sind nach einem bestimmten Schema aufgebaut; das Box-Modell genannt wird.
Die Abbildung zeigt eine schematische Darstellung des Box-Modells.text/html2021-01-14T15:07:58+00:00Anonymous (anonymous@undisclosed.example.com)css
https://herr-pfeiffer.de/unterrichtswiki/informatik:html-css:css?rev=1610636878&do=diff
CSS
Grundlagen
HTML-Datei zum Video
<html>
<head>
<title>Yeah</title>
</head>
<body>
<h3>Hallo!</h3>
<p>Heute ist ein schöner Tag.</p>
<p>Morgen ist auch ein schöner Tag.</p>
<a href="https://herr-pfeiffer.de/">Hier findest du mehr ;)</a>
<br>
<hr>
<br>
<img src="berliner-dom.jpg" width="300">
<ul>
<li>Oper</li>
<li>Stadion</li>
<li>Th…text/html2021-03-25T08:56:35+00:00Anonymous (anonymous@undisclosed.example.com)google-fonts
https://herr-pfeiffer.de/unterrichtswiki/informatik:html-css:google-fonts?rev=1616662595&do=diff
Google Fonts einbinden
* <https://fontjoy.com/>text/html2021-02-09T18:17:37+00:00Anonymous (anonymous@undisclosed.example.com)grid
https://herr-pfeiffer.de/unterrichtswiki/informatik:html-css:grid?rev=1612894657&do=diff
CSS Grid-Layout
Grundlagen
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Beispiel CSS Grid</title>
<link rel="stylesheet" href="beispiel-style.css">
</head>
<body>
<div class="wrapper">
<div>
adipisicing an praesentibus coniunctione quae voluptatibus singulis nam de
summis sed voluptatibus duis doctrina offendit appellat transferrem noster legam
comprehenderit appellat adipisicing id ita praesentibus iudicem r…text/html2024-08-09T07:40:06+00:00Anonymous (anonymous@undisclosed.example.com)grundlagen-css
https://herr-pfeiffer.de/unterrichtswiki/informatik:html-css:grundlagen-css?rev=1723189206&do=diff
Grundlagen [CSS]
Was ist CSS?
Wie HTML ist CSS nicht wirklich eine Programmiersprache. Es ist auch keine Markup-Sprache, sondern eine Stylesheet-Sprache, die es erlaubt für Elementen auf einer Internetseite das Aussehen festzulegen. Zum Beispiel benötigt man folgendentext/html2020-06-10T16:59:26+00:00Anonymous (anonymous@undisclosed.example.com)html-css-bausteine
https://herr-pfeiffer.de/unterrichtswiki/informatik:html-css:html-css-bausteine?rev=1591808366&do=diff
Bausteine [HTML & CSS]
Internetpräsenz erstellen - Hilfreiche Links
Lernvideos
Menüleiste / Navigation Bar
<https://www.w3schools.com/css/css_navbar.asp>
<ul>
<li><a href="webseite1.html">Home</a></li>
<li><a href="webseite2.html">News</a></li>
<li><a href="webseite3.html">Contact</a></li>
<li><a href="webseite4.html">About</a></li>
</ul>text/html2021-01-14T15:07:36+00:00Anonymous (anonymous@undisclosed.example.com)html
https://herr-pfeiffer.de/unterrichtswiki/informatik:html-css:html?rev=1610636856&do=diff
HTML
Editoren
Brackets
* <http://brackets.io/>
* Code-Editor für Webdesign
* Live-Vorschau in Kombination mit google chrome
Glitch
* <https://glitch.com/>
* Online Editor, funktioniert vollständig im Browser und hat eine Live-Vorschau
* Registrierung mit deiner IServ-Email möglichtext/html2020-06-10T16:59:26+00:00Anonymous (anonymous@undisclosed.example.com)internetseiten-projektergebnisse
https://herr-pfeiffer.de/unterrichtswiki/informatik:html-css:internetseiten-projektergebnisse?rev=1591808366&do=diff
Internetseiten [Projektergebnisse]
[ ]
[ ]
[ ]
[ ]
[ ]
[ ]text/html2021-04-15T08:26:33+00:00Anonymous (anonymous@undisclosed.example.com)seiten-verlinken
https://herr-pfeiffer.de/unterrichtswiki/informatik:html-css:seiten-verlinken?rev=1618475193&do=diff
Seiten verlinkentext/html2021-04-15T08:25:28+00:00Anonymous (anonymous@undisclosed.example.com)start
https://herr-pfeiffer.de/unterrichtswiki/informatik:html-css:start?rev=1618475128&do=diff
Lernpfad HTML & CSS
Entwicklung von Internetseiten
* Internetseiten [Projektergebnisse]
* Bausteine [HTML & CSS]
HTML
CSS
CSS Grid-Layout
Google Fonts
Seiten verlinken
HTML-CSS-Kurs von Julian Dorn
Tutorial von freecodecamp.org
Grundlagen CSS
Box-Modell