HTML und CSS/HTML als Auszeichnungssprache: Unterschied zwischen den Versionen
Aus ZUM-Unterrichten
Markierung: 2017-Quelltext-Bearbeitung |
(typo) Markierung: 2017-Quelltext-Bearbeitung |
||
| 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>''' | ||
Version vom 31. Juli 2020, 18:13 Uhr
Mit HTML könnt Ihr Webseiten auszeichnen. Webseiten können von jedem Browser auf Computer und Handys dargestellt werden.
Aufgabe
Speichere folgenden Text als
meineDatei.txt" ab und öffne Sie in einem BrowserDas 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)
Aufgabe
- Ändere nun die Dateiendung auf
.htmlund lade die Datei erneut. - Was kannst du beobachten?
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:
<h1>Überschrift</h1>
<p>Absatz></p>
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 (
<...>). - Notiere danach einen schließenden Tag (
</...>).
- Notiere vorher einen öffnenden Tag (
<!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>
- HTML als Auszeichnungssprache
- meine erste Webseite
- unsichtbar, aber nötig: Dokumentstruktur
- Jetzt kommt Farbe ins Spiel: CSS
- responsives Mehrspaltenlayout
- von der Webseite zum Web-Projekt
Interaktive Übungen
Diese interaktiven Übungen eignen sich, um die Fachbegriffe zu lernen und zu wiederholen.
semantische Auszeichnung einer Webseite
Ordne die HTML-Elemente den Beschreibungen zu.
| Überschrift erster Ordnung | <h1> |
| Sidebar für zusätzliche Informationen | <aside> |
| Textabsatz | <p> |
| Überschrift zweiter Ordnung | <h2> |
| Einbindung eines Bilds | <img src="" alt=""> |
| Kopfbereich | <header> |
Seitenstrukturierung
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>
Tabelle
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!
HTML Textauszeichung
Hier gibt es Elemente zur Textauszeichnung. Finde die passenden Paare.
| <s> | |
| Text-Absatz | <p> |
| hervorgehobener Text | <em> |
| besonders wichtig | <strong> |
Überschrift |
<h2> |
| Link | <a> |
| • Listenelement | <li> |
HTML-Tags
