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

HTML und CSS/HTML als Auszeichnungssprache: Unterschied zwischen den Versionen

Aus ZUM-Unterrichten
Markierung: Quelltext-Bearbeitung 2017
Markierung: Quelltext-Bearbeitung 2017
 
(4 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
Der Weg zur ersten Webseite ist denkbar einfach und bringt schnelle Ergebnisse!
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
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),   
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 vorher einen öffnenden Tag (<code><...></code>).
## Notiere danach einen schließenden Tag (<code></...></code>).}}
## Notiere danach einen schließenden Tag (<code></...></code>).}}
Zeile 63: Zeile 65:
</html>
</html>
</source>}}
</source>}}
== Meine erste, eigene Webseite ==
{{Aufgabe|#Erstelle Deine eigene Webseite!
## Kopiere den untenstehenden Code in einen [https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F/Der_richtige_Code-Editor Code-Editor] wie NotePad++.
## Speichere es als <code>meineSeite.html</code>
## Öffne es in einem Browser.
## Jetzt kannst Du den Inhalt der Seite nach Belieben ändern!
# Neue Elemente
## Kannst Du Deine Hobbys in einer Liste nach Priorität sortieren? Finde das richtige HTML-Element dafür!
## Kannst Du einen Verweis/Link zu Deinem Sportverein, Deiner Schule oder Deinem Hobby einbauen?
## Füge Bilder in Deine Webseite ein!
# Unten findest Du interaktive Übungen. Weißt Du schon alles?}}
== HTML5-Grundgerüst ==
'''Unsichtbar, aber nötig:''' Die '''Dokumentstruktur''' eines  HTML-Dokument besteht aus drei folgenden Teilen:
# Dokumenttyp-Deklaration (Angabe zur verwendeten HTML-Version)
# head (unsichtbare Kopfdaten. z.B. Angaben zu Titel, Metadaten oder auch [[../CSS|Stylesheet-Angaben]] u.ä.)
# body (Körper - anzuzeigender Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.)
<syntaxhighlight 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 Seite</title>
</head>
<body>
  <h1>Überschrift</h1>
  <p>Ich bin ...</p>
 
  <h2> Meine Hobbies</h2>
  <ul>
    <li><a href="https://unterrichten.zum.de/wiki/">Unterrichten-ZUM-Wiki</a></li>
  </ul>
</body>
</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.
Innerhalb des heads befinden sich zwei Meta-Tags.
* Der obere legt die Zeichenkodierung auf utf-8 fest. Damit können auch Umlaute, Sonderzeichen und Emojis (sofern sie vom Browser unterstützt werden, dargestellt werden.
* Der untere sorgt dafür, dass die Webseite auf mobilen Geräten skaliert werden kann.
Das title-Element beinhaltet einen aussagekräftigen Titel der Seite
Der sichtbarer Dokumentinhalt wird im body notiert.


{{HTML und CSS}}
{{HTML und CSS}}
Zeile 92: Zeile 145:
  &lt;header>
  &lt;header>
   &lt;h1>Name unserer Seite&lt;/h1>  
   &lt;h1>Name unserer Seite&lt;/h1>  
  '''&lt;header>'''
  '''&lt;/header>'''
  &lt;article>  
  &lt;article>  
   '''&lt;h2>'''Überschrift des Artikels '''&lt;/h2>'''
   '''&lt;h2>'''Überschrift des Artikels '''&lt;/h2>'''
Zeile 125: Zeile 178:
</div>
</div>


=== HTML-Tags ===
=== semantische Auszeichnung einer Webseite ===
<iframe src="//LearningApps.org/watch?app=2203170" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
<div class="zuordnungs-quiz">
Ordne die HTML-Elemente den Beschreibungen zu.
{|
| Überschrift erster Ordnung || &lt;h1>
|-
| Sidebar für zusätzliche Informationen || &lt;aside>
|-
| Textabsatz || &lt;p>
|-
| Verweis auf eine andere Seite || &lt;a href="">
|-
| Einbindung eines Bilds || &lt;img src="" alt="">
|-
| Kopfbereich || &lt;header>
|}
</div>


=== HTML Text und Tags ===
=== HTML Textauszeichung ===
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 216:
|}
|}
</div>
</div>
=== HTML-Tags ===
<iframe src="//LearningApps.org/watch?app=2203170" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
== Weblinks ==
* Selfhtml:
** [https://wiki.selfhtml.org/wiki/HTML/Tutorials/Grundger%C3%BCst HTML/Dokumentstruktur und Aufbau]
** [https://wiki.selfhtml.org/wiki/HTML/Tutorials/Element,_Tag_und_Attribut#Guter_HTML-Stil Guter HTML-Stil]
** [https://wiki.selfhtml.org/wiki/HTML/Tutorials/Seitenstrukturierung HTML5-Seitenstrukturierung]


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

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

Der Weg zur ersten Webseite ist denkbar einfach und bringt schnelle Ergebnisse!

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 Browser.
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)

Aufgabe
  1. Ändere nun die Dateiendung auf .html und lade die Datei erneut.
  2. 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
  1. Nimm meineDatei.html und zeichne die Textelemente entsprechend ihrer inhaltlichen Bedeutung mit HTML-Elementen aus.
    1. Notiere vorher einen öffnenden Tag (<...>).
    2. Notiere danach einen schließenden 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>

Meine erste, eigene Webseite

Aufgabe
  1. Erstelle Deine eigene Webseite!
    1. Kopiere den untenstehenden Code in einen Code-Editor wie NotePad++.
    2. Speichere es als meineSeite.html
    3. Öffne es in einem Browser.
    4. Jetzt kannst Du den Inhalt der Seite nach Belieben ändern!
  2. Neue Elemente
    1. Kannst Du Deine Hobbys in einer Liste nach Priorität sortieren? Finde das richtige HTML-Element dafür!
    2. Kannst Du einen Verweis/Link zu Deinem Sportverein, Deiner Schule oder Deinem Hobby einbauen?
    3. Füge Bilder in Deine Webseite ein!
  3. Unten findest Du interaktive Übungen. Weißt Du schon alles?


HTML5-Grundgerüst

Unsichtbar, aber nötig: Die Dokumentstruktur eines HTML-Dokument besteht aus drei folgenden Teilen:

  1. Dokumenttyp-Deklaration (Angabe zur verwendeten HTML-Version)
  2. head (unsichtbare Kopfdaten. z.B. Angaben zu Titel, Metadaten oder auch Stylesheet-Angaben u.ä.)
  3. body (Körper - anzuzeigender Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.)
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>meine Seite</title>
</head>
<body>
  <h1>Überschrift</h1>
  <p>Ich bin ...</p>
  
  <h2> Meine Hobbies</h2>
  <ul>
    <li><a href="https://unterrichten.zum.de/wiki/">Unterrichten-ZUM-Wiki</a></li>
  </ul>
</body>
</html>

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

Innerhalb des heads befinden sich zwei Meta-Tags.

  • Der obere legt die Zeichenkodierung auf utf-8 fest. Damit können auch Umlaute, Sonderzeichen und Emojis (sofern sie vom Browser unterstützt werden, dargestellt werden.
  • Der untere sorgt dafür, dass die Webseite auf mobilen Geräten skaliert werden kann.

Das title-Element beinhaltet einen aussagekräftigen Titel der Seite

Der sichtbarer Dokumentinhalt wird im body notiert.


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


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!

semantische Auszeichnung einer Webseite

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>

HTML Textauszeichung

Hier gibt es Elemente zur Textauszeichnung. Finde die passenden Paare.

Nicht länger richtig <s>
Text-Absatz <p>
hervorgehobener Text <em>
besonders wichtig <strong>

Überschrift

 <h2>
Link <a>
• Listenelement <li>

HTML-Tags

Weblinks

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