Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- faecher:informatik:oberstufe:html:eine_website_erstellen_-_die_html-dokumentstruktur [14.09.2020 16:45] – angelegt the
+++ faecher:informatik:oberstufe:html:eine_website_erstellen_-_die_html-dokumentstruktur [14.09.2020 20:15] – [Eine Website erstellen - die HTML-Dokumentstruktur] the
@@ Zeile 2: / Zeile 2: @@
 ====== HTML - Lektion 1 ======
-===== Einführung =====
+===== Eine Website erstellen - die HTML-Dokumentstruktur =====
-<box 90% round #f4ffc3 #e7f5aa #e7f5aa #e7f5aa |**Aufgabe**>
-{{  :hilfe:workshop:folder_tools.png|}}
-Lies dir die Einführung in die aktuellen Webtechniken unter der Adresse [[http://fwpf-webdesign.de/einfuehrung]] durch (alle Abschnitte) und beantworte die folgenden Fragen **in eigenen Worten**((Cut'n'Paste ist verboten!)):
-  - Wer war der "Erfinder" des "WWW"? Was bedeutet "Hypertext"? Wofür steht die Abkürzung "HTML"?
-  - Wofür steht die Abkürzung "DNS", welche Aufgabe hat dieser Dienst im Internet?
-  - Welches sind die zwei Ebenen des Webdesigns?
-  - Erkläre die Begriffe //Website//, //Webseite// und //Homepage//.
-\\
-</box>
-===== Textauszeichnung mit HTML =====
-  * Mit HTML wird die **inhaltliche Struktur** festgelegt – **nicht das Aussehen/Layout**.
-  * Die Auszeichnung des Inhalts erfolgt in HTML durch Anfangs- und Endmarkierungen (Tags): \\ ''<mstart>auszuzeichnender Text</mende>''
-  * Start-Tag, Inhalt und Ende-Tag bilden ein HTML-Element
-  * Elemente können verschachtelt werden, dürfen sich dabei aber nicht überschneiden.
 ===== Beispieldokument =====
@@ Zeile 38: / Zeile 23: @@
 </code>
-===== Übung =====
 <box 90% round #f4ffc3 #e7f5aa #e7f5aa #e7f5aa |**Übungen**>
 {{  :hilfe:workshop:folder_tools.png|}}
-  - Erstelle auf deinem Arbeitsrechner eine html-Datei mit Dokumenttyp-Deklaration, Head und Body und öffne diese in einem Browser ( -> Betrachte die datei lokal).
+  - Erstelle auf deinem Arbeitsrechner in einem **Texteditor** eine html-Datei mit Dokumenttyp-Deklaration, Head und Body. Speichere sie unter einem passenden Namen ab und öffne sie dann in einem Browser ( -> Betrachte die Datei lokal).
-  - Lade die Datei auf deinen Übungswebspace und öffne die URL deines Webspaces ( -> Betrachte die Datei übers Internet).
+  - Verändere den Inhalt deiner Datei (füge z.B. ein Wort hinzu) und betrachte deine Änderungen. Notiere detailliert die notwendigen Arbeitsschritte, um die Ausgabe einer HTML-Datei zu verändern.
-  - mach dir den Unterschied zwischen den beiden Betrachtungsweisen klar.
 </box>
-===== Übung =====
+===== Textauszeichnung mit HTML =====
+In einem html-Dokument wird also jeglicher Inhalt (content) mit einer "Bedeutung" versehen (man sagt, alle Inhalte werden **semantisch ausgezeichnet**). Eine Überschrift wird also nicht nur inhaltlich aufgeschrieben, sondern ihr wird auch ihre "Bedeutung" für das Dokument zugewiesen, z.B. wird sie semantisch als Überschrift erster Ordnung (Hauptüberschrift) ausgezeichnet. Kurz gesagt:
+  * Mit HTML wird die **inhaltliche Struktur** festgelegt – **nicht das Aussehen/Layout**.
+  * Die Auszeichnung des Inhalts erfolgt in HTML durch Anfangs- und Endmarkierungen (Tags): \\ ''<mstart>auszuzeichnender Text</mende>''
+  * Start-Tag, Inhalt und Ende-Tag bilden ein **HTML-Element**
+  * Elemente können verschachtelt werden, dürfen sich dabei aber nicht überschneiden.
 Die wichtigsten Strukturelemente für Texte sind:
@@ Zeile 57: / Zeile 50: @@
   * Aufzählungen ("Nummern")
-**Übung**\\
-Finde für jedes Strukturelement heraus, wie die zugehörige HTML Auszeichnung aussieht. Schreibe ein gültiges HTML-Beispieldokument, das alle Auszeichnungen enthält.
+<box 90% round #f4ffc3 #e7f5aa #e7f5aa #e7f5aa |**Übung**>
+Lies dir das Tutorial von [[https://wiki.selfhtml.org/wiki/HTML/Tutorials/Einstieg/Kapitel2|SelfHTML]] durch und mache die Aufgaben des hier verlinkten Kapitels.
+</box>