HTML und CSS/HTML als Auszeichnungssprache - Versionsgeschichte

Matthias Scharwies: /* HTML5-Grundgerüst */

2025-05-12T14:43:04Z

HTML5-Grundgerüst

← Nächstältere Version		Version vom 12. Mai 2025, 14:43 Uhr
Zeile 87:		Zeile 87:
	# body (Körper - anzuzeigender Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.)		# body (Körper - anzuzeigender Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.)

	<~~source~~ lang="html5"~~><pre~~>		<syntaxhighlight lang="html5">
	<!DOCTYPE html>		<!DOCTYPE html>
	<html lang="de">		<html lang="de">
Zeile 104:		Zeile 104:
	</ul>		</ul>
	</body>		</body>
	</html></~~pre></source~~>		</html></syntaxhighlight>

	Dieses HTML5-Grundgerüst verwendet den kurzen Doctype <code><!DOCTYPE html></code>. Es gibt in älteren Codebeispielen im Netz längere Doctypes, die heute nicht mehr nötig sind.		Dieses HTML5-Grundgerüst verwendet den kurzen Doctype <code><!DOCTYPE html></code>. Es gibt in älteren Codebeispielen im Netz längere Doctypes, die heute nicht mehr nötig sind.

Matthias Scharwies am 12. Mai 2025 um 03:44 Uhr

2025-05-12T03:44:37Z

@@ Zeile 1: / Zeile 1: @@
 Mit '''HTML''' könnt Ihr Webseiten auszeichnen. Webseiten können von jedem Browser auf Computer und Handys dargestellt werden.
 __NOTOC__
-{{Aufgabe|Speichere folgenden Text als <code>meineDatei.txt</code> ab und öffne Sie in einem Browser.}}
+{{Aufgabe|Speichere folgenden Text als <code>meineDatei.txt</code> ab und öffne sie in einem Browser.}}
 <pre>Das ist eine Überschrift und gleichzeitig schon deine erste Webseite
@@ Zeile 28: / Zeile 30: @@
 Dabei werden die englischen Begriffe einfach abgekürzt: '''h1''' für ''headline 1'', ''h2''' für ''headline 2'', ''h3''' für ''headline 3'', '''p''' für ''paragraph'' (Absatz),
-{{Aufgabe|#Nimm Deine Webseite und zeichne die Textelemente entsprechend ihrer inhaltlichen Bedeutung mit HTML-Elementen aus.
+{{Aufgabe|#Nimm <code>meineDatei.html</code> und zeichne die Textelemente entsprechend ihrer inhaltlichen Bedeutung mit HTML-Elementen aus.
 ## Notiere vorher einen öffnenden Tag (<code><...></code>).
 ## Notiere danach einen schließenden Tag (<code></...></code>).}}
@@ Zeile 63: / Zeile 65: @@
 </html>
 </source>}}
 {{HTML und CSS}}
@@ Zeile 123: / Zeile 176: @@
   '''&lt;/table>'''
 Beachte, eine Tabelle sollte nur für tabellarische Daten, nicht jedoch zum Layouten verwendet werden!
 </div>
@@ Zeile 148: / Zeile 219: @@
 === HTML-Tags ===
 <iframe src="//LearningApps.org/watch?app=2203170" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
 [[Kategorie:Informatik]]
 [[Kategorie:Interaktive Übung]]

Matthias Scharwies: typo

2020-08-25T05:02:39Z

typo

← Nächstältere Version		Version vom 25. August 2020, 05:02 Uhr
Zeile 1:		Zeile 1:
	Mit '''HTML''' könnt Ihr Webseiten auszeichnen. Webseiten können von jedem Browser auf Computer und Handys dargestellt werden.		Mit '''HTML''' könnt Ihr Webseiten auszeichnen. Webseiten können von jedem Browser auf Computer und Handys dargestellt werden.
	__NOTOC__		__NOTOC__
	{{Aufgabe\|Speichere folgenden Text als <code>meineDatei.txt"</code> ab und öffne Sie in einem Browser}}		{{Aufgabe\|Speichere folgenden Text als <code>meineDatei.txt</code> ab und öffne Sie in einem Browser.}}

	<pre>Das ist eine Überschrift und gleichzeitig schon deine erste Webseite		<pre>Das ist eine Überschrift und gleichzeitig schon deine erste Webseite

Matthias Scharwies: typo

2020-07-31T18:13:07Z

typo

← Nächstältere Version		Version vom 31. Juli 2020, 18:13 Uhr
Zeile 92:		Zeile 92:
	<header>		<header>
	<h1>Name unserer Seite</h1>		<h1>Name unserer Seite</h1>
	'''<header>'''		'''</header>'''
	<article>		<article>
	'''<h2>'''Überschrift des Artikels '''</h2>'''		'''<h2>'''Überschrift des Artikels '''</h2>'''

Matthias Scharwies: /* Interaktive Übungen */

2019-08-12T06:47:42Z

Interaktive Übungen

← Nächstältere Version		Version vom 12. August 2019, 06:47 Uhr
Zeile 125:		Zeile 125:
	</div>		</div>

	=== HTML~~-Tags ===~~		=== HTML Textauszeichung ===
	~~<iframe src="//LearningApps.org/watch?app=2203170" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>~~

	~~=== HTML Text und Tags~~ ===
	Hier gibt es Elemente zur Textauszeichnung. '''Finde die passenden Paare.'''		Hier gibt es Elemente zur Textauszeichnung. '''Finde die passenden Paare.'''
	<div class="memo-quiz">		<div class="memo-quiz">
Zeile 148:		Zeile 145:
	\|}		\|}
	</div>		</div>

			=== HTML-Tags ===
			<iframe src="//LearningApps.org/watch?app=2203170" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>

	[[Kategorie:Informatik]]		[[Kategorie:Informatik]]
	[[Kategorie:Interaktive Übung]]		[[Kategorie:Interaktive Übung]]

Matthias Scharwies: /* HTML Text und Tags */

2019-08-12T06:38:19Z

HTML Text und Tags

← Nächstältere Version		Version vom 12. August 2019, 06:38 Uhr
Zeile 137:		Zeile 137:
	\| Text-Absatz\|\| <span style="font-size:2em"><p></span>		\| Text-Absatz\|\| <span style="font-size:2em"><p></span>
	\|-		\|-
	\| <em>hervorgehobener Text</em>\|\| <span style="font-size:2em"><p></span>		\| <em>hervorgehobener Text</em>\|\| <span style="font-size:2em"><em></span>
	\|-		\|-
	\| <strong>besonders wichtig</strong>\|\| <span style="font-size:2em"><strong></span>		\| <strong>besonders wichtig</strong>\|\| <span style="font-size:2em"><strong></span>

Matthias Scharwies: +quiz

2019-08-12T06:36:31Z

+quiz

← Nächstältere Version		Version vom 12. August 2019, 06:36 Uhr
Zeile 1:		Zeile 1:
	Mit [[HTML]] könnt Ihr Webseiten auszeichnen. Webseiten können von jedem Browser auf Computer und Handys dargestellt werden.		Mit '''HTML''' könnt Ihr Webseiten auszeichnen. Webseiten können von jedem Browser auf Computer und Handys dargestellt werden.
	__NOTOC__		__NOTOC__
	{{Aufgabe\|Speichere folgenden Text als <code>meineDatei.txt"</code> ab und öffne Sie in einem Browser}}		{{Aufgabe\|Speichere folgenden Text als <code>meineDatei.txt"</code> ab und öffne Sie in einem Browser}}
Zeile 78:		Zeile 78:
	\| Textabsatz \|\| <p>		\| Textabsatz \|\| <p>
	\|-		\|-
	\| ~~Verweis auf eine andere Seite~~ \|\| <~~a href=""~~>		\| Überschrift zweiter Ordnung\|\| <h2>
	\|-		\|-
	\| Einbindung eines Bilds \|\| <img src="" alt="">		\| Einbindung eines Bilds \|\| <img src="" alt="">
Zeile 125:		Zeile 125:
	</div>		</div>

	== HTML-Tags ==		=== HTML-Tags ===
	~~=== Zuordnungsübung~~ ===
	<iframe src="//LearningApps.org/watch?app=2203170" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>		<iframe src="//LearningApps.org/watch?app=2203170" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>

	~~=== Quiz ===~~
	~~<iframe src="//LearningApps.org/watch?app=540054" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>~~

	~~=== HTML-Syntax - Zuordnung ===~~
	~~<iframe src="//LearningApps.org/watch?app=235834" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>~~

	=== HTML Text und Tags ===		=== HTML Text und Tags ===
	<~~iframe src~~="//~~LearningApps.org~~/~~watch?app~~=~~236936~~" style="~~border~~:~~0px~~;~~width~~:~~100%~~;~~height~~:~~400px~~" ~~webkitallowfullscreen~~="~~true~~" ~~mozallowfullscreen~~="~~true~~"></~~iframe~~>		Hier gibt es Elemente zur Textauszeichnung. '''Finde die passenden Paare.'''
			<div class="memo-quiz">
			{\|
			\|-
			\| <s>Nicht länger richtig</s>\|\| <span style="font-size:2em"><s></span>
			\|-
			\| Text-Absatz\|\| <span style="font-size:2em"><p></span>
			\|-
			\| <em>hervorgehobener Text</em>\|\| <span style="font-size:2em"><p></span>
			\|-
			\| <strong>besonders wichtig</strong>\|\| <span style="font-size:2em"><strong></span>
			\|-
			\| <h2>Überschrift</h2>\|\| <span style="font-size:2em"><h2></span>
			\|-
			\| <span style="text-decoration:underline;color:blue;">Link</span> \|\|<span style="font-size:2em"><a></span>
			\|-
			\| • Listenelement \|\| <span style="font-size:2em"><li></span>
			\|}
			</div>

	[[Kategorie:Informatik]]		[[Kategorie:Informatik]]
	[[Kategorie:Interaktive Übung]]		[[Kategorie:Interaktive Übung]]

Matthias Scharwies: N - Zwischenstand

2019-08-12T05:40:57Z

N - Zwischenstand

Neue Seite

Mit [[HTML]] könnt Ihr Webseiten auszeichnen. Webseiten können von jedem Browser auf Computer und Handys dargestellt werden.
__NOTOC__
{{Aufgabe|Speichere folgenden Text als <code>meineDatei.txt"</code> ab und öffne Sie in einem Browser}}

<pre>Das ist eine Überschrift und gleichzeitig schon deine erste Webseite
Natürlich möchtest du auch längere Texte zeigen. Das geht auch ganz einfach. Funktionieren tut das schon mal problemlos in jedem Browser aber nur weil die Browser auch fehlerhaften Code akzeptieren, denn so ist das noch nicht ganz richtig. Es fehlen die Grundbausteine. Für diesen Moment reicht es schon mal zu wissen, dass das was du auf deiner Seite sehen möchtest, hier in diesem Text irgendwo zwischen sogenannten TAGS (Elemente), also zb. h1 = Überschrift oder zb. p = text, geschrieben wird.
Ich bin auch wieder eine,etwas kleinere, Überschrift
Beispiel für einen 2. Absatz. Du kannst dich hier auch austoben, ändere oder schreibe was neues und schau zu, wie das deine Webseite verändert.
Wichtig zu wissen
Das was du hier siehst und testest, geht natürlich auch mit deinen eigenen Mitteln, anstatt hier. Alles was du brauchst, und bereits hast, ist ein Texteditor (z.B. Notepad)
Es kommt nur darauf an wie du die Textdatei dann abspeicherst (welche Endung), also nicht "meineDatei.txt" , sondern "meineDatei.html". Das ist gerade bei notepad verwirrend, weil man keine Auswahl beim Speichern hat, sondern manuell erst alle Dateien und dann selbst dieses .html schreiben muss.(geht bei anderen Editoren, kommen wir später zu, einfacher)</pre>

{{Aufgabe|#Ändere nun die Dateiendung auf <code>.html</code> und lade die Datei erneut.
# Was kannst du beobachten?}}

{{Lösung versteckt|Der Text ist nun nicht mehr formatiert. Alle Zeichen sind hintereinander - ohne Zeilenumbrüche - dargestellt.}}

== HTML als Auszeichnungssprache ==
'''HTML''' ist eine Markup Language zur Auszeichnung des Inhalts. Alle Inhalte einer Webseite werden nach ihrer Bedeutung ausgezeichnet.

Dafür verwendet man HTML-Elemente. Diese bestehen z.B. für eine Überschrift aus einem öffnenden und schließendem Tag, in dem der Name des Elements in spitzen Klammern notiert wird:

<source lang="html5">
<h1>Überschrift</h1>
<p>Absatz></p>
</source>

Dabei werden die englischen Begriffe einfach abgekürzt: '''h1''' für ''headline 1'', ''h2''' für ''headline 2'', ''h3''' für ''headline 3'', '''p''' für ''paragraph'' (Absatz),

{{Aufgabe|#Nimm Deine Webseite und zeichne die Textelemente entsprechend ihrer inhaltlichen Bedeutung mit HTML-Elementen aus.
## Notiere vorher einen öffnenden Tag (<code><...></code>).
## Notiere danach einen schließenden Tag (<code></...></code>).}}

{{Lösung versteckt|
<source lang="html5">
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>meine Webseite</title>
</head>

<body>
<h1>Das ist eine Überschrift und gleichzeitig schon deine erste Webseite</h1>

<p>
Natürlich möchtest du auch längere Texte zeigen. Das geht auch ganz einfach. Funktionieren tut das schon mal problemlos in jedem Browser aber nur weil die Browser auch fehlerhaften Code akzeptieren, denn so ist das noch nicht ganz richtig. Es fehlen die Grundbausteine. Für diesen Moment reicht es schon mal zu wissen, dass das was du auf deiner Seite sehen möchtest, hier in diesem Text irgendwo zwischen sogenannten TAGS (Elemente), also zb. h1 = Überschrift oder zb. p = text, geschrieben wird.
</p>

<h2>Ich bin auch wieder eine,etwas kleinere, Überschrift</h2>
<p>Beispiel für einen 2. Absatz. Du kannst dich hier auch austoben, ändere oder schreibe was neues und schau zu, wie das deine Webseite verändert</p>

<h3>Wichtig zu wissen</h3>
<p>Das was du hier siehst und testest, geht natürlich auch mit deinen eigenen Mitteln, anstatt hier. Alles was du brauchst, und bereits hast, ist ein Texteditor (z.B. Notepad)
Es kommt nur darauf an wie du die Textdatei dann abspeicherst (welche Endung), also nicht "meineDatei.txt" , sondern "meineDatei.html". Das ist gerade bei notepad verwirrend, weil man keine Auswahl beim Speichern hat, sondern manuell erst alle Dateien und dann selbst dieses .html schreiben muss.(geht bei anderen Editoren, kommen wir später zu, einfacher)
</p>

</body>
</html>
</source>}}

{{HTML und CSS}}

== Interaktive Übungen ==
Diese interaktiven Übungen eignen sich, um die Fachbegriffe zu lernen und zu wiederholen.
=== semantische Auszeichnung einer Webseite ===
<div class="zuordnungs-quiz">
Ordne die HTML-Elemente den Beschreibungen zu.
{|
| Überschrift erster Ordnung || <h1>
|-
| Sidebar für zusätzliche Informationen || <aside>
|-
| Textabsatz || <p>
|-
| Verweis auf eine andere Seite || <a href="">
|-
| Einbindung eines Bilds || <img src="" alt="">
|-
| Kopfbereich || <header>
|}
</div>

=== Seitenstrukturierung ===
<div class="lueckentext-quiz">
Setze die passenden Tags ein. Beachte, alle geöffneten Tags müssen auch wieder geschlossen werden!

<header>
<h1>Name unserer Seite</h1>
'''<header>'''
<article>
'''<h2>'''Überschrift des Artikels '''</h2>'''
<section>
'''<h3>'''Kapitel 1 '''</h3>'''
<p>...</p>
</section>
<aside>
<h3>Quellenangabe</h3>
<ul>...</ul>
'''</aside>'''
'''</article>'''
</div>

=== Tabelle ===
<div class="lueckentext-quiz">
Setze die passenden Tags und Elemente ein:.
<table>
'''<thead>'''
<tr>
'''<th>Überschrift</th>'''
</tr>
'''</thead>'''
<tbody>
'''<tr>'''
<td>Inhalt1 '''</td>'''
'''<td>'''Inhalt</td>
</tr>
'''</tbody>'''
'''</table>'''
Beachte, eine Tabelle sollte nur für tabellarische Daten, nicht jedoch zum Layouten verwendet werden!
</div>

== HTML-Tags ==
=== Zuordnungsübung ===
<iframe src="//LearningApps.org/watch?app=2203170" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>

=== Quiz ===
<iframe src="//LearningApps.org/watch?app=540054" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>

=== HTML-Syntax - Zuordnung ===
<iframe src="//LearningApps.org/watch?app=235834" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>

=== HTML Text und Tags ===
<iframe src="//LearningApps.org/watch?app=236936" style="border:0px;width:100%;height:400px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>

[[Kategorie:Informatik]]
[[Kategorie:Interaktive Übung]]