Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- planung:hypertextmarkuplanguage [2022/11/13 15:33] – marroc
+++ planung:hypertextmarkuplanguage [2022/11/13 18:01] (aktuell) – marroc
@@ Zeile 1: / Zeile 1: @@
 ====HTML - eine Beschreibungssprache für Dokumente im Web====
+=== Was ist HTML ===
-===Was ist HTML?===
+HTML (//Hyper Text Markup Language//) ist also eine Art Sprache, mit der wir einfache Webseiten erstellen und in einem Browser anzeigen können. Wir wollen uns nun ein bisschen anschauen, wie HTML genau funktioniert und als Produkt eine kleine Webseite erstellen. Diese werden wir aber nur lokal auf unserem Computer und nicht im Internet speichern.\\
-HTML (**Hyper Text Markup Language**//) ist also eine Art Sprache, mit welcher einfache Webseiten erstellen und in einem Browser angezeigt werden können. Diese Sprache ist eine Beschreibungssprache (WYSIWYM = What you see is what you mean), um Inhalte fürs Web darzustellen. Aber HTML ist keine Programmiersprache, denn HTML hat keine Befehle, es werden auch keine Schleifen oder Bedingungen, sprich kein Algorithmus programmiert. Dies ist ein erheblicher Unterschied.
-Typisch an HTML ist, dass sogenannte Tags (sprich «täg», englisch für Etiketten) verwendet werden, um die Inhalte einer Webseite zu kennzeichnen, sodass der Browser weiss, wie diese dargestellt werden sollten. Dies bedeutet, dass die darzustellende Seite strukturiert wird in header, navigation, main, footer etc. und in diesen Strukturelementen unter anderem noch mit Tags der Inhalt der Website dargestellt werden kann.
+HTML ist eine **Beschreibungssprache** (//WYSIWYM = What you see is what you mean//). Aber HTML ist keine Programmiersprache, denn HTML hat keine Befehle, es werden auch keine Schleifen oder Bedingungen, sprich kein Algorithmus programmiert. Diese Sprache wird genutzt, um ähnlich wie ein «Worddokument fürs Netz», Inhalt fürs Web darzustellen. Dies ist ein erheblicher Unterschied. \\
-Ein Tag hat immer einen Namen (zum Beispiel p für Paragraph) und wird in spitzen Klammern (< und >) dargestellt. Einige Tags fungieren als eine Art Behälter, die Elemente enthalten. Jeder Tag hat ein Anfangselement (beispielsweise <p>) und dann beginnt der Absatz (Paragraph), danach wird der Inhalt des Abschnitts dargestellt und darauf folgt zwingend ein Endelement, welches mit einem Schrägstrich gekennzeichnet ist (beispielsweise </p>) und das Ende des Abschnitt kennzeichnet. Im folgenden Beispiel wird der Tag <p> eingesetzt, um dem Browser mitzuteilen, dass alles zwischen dem öffnenden Tag <p> und dem schliessenden Tag </p> zum selben Paragraphen gehört:
+Typisch an HTML ist, dass sogenannte **Tags** verwendet werden, um die Inhalte einer Webseite zu kennzeichnen, sodass Ihr Browser weiss, wie diese darzustellen. Dies bedeutet, dass die darzustellende Seite strukturiert wird in header, navigation, main, footer etc. und in diesen Strukturelementen unter anderem noch mit Tags der Inhalt der Website dargestellt werden kann. \\
+Ein Tag (sprich «täg», englisch für Etiketten) hat immer einen Namen (zum Beispiel p für Paragraph) und wird in spitzen Klammern (< und >) dargestellt.
+Einige Tags fungieren als eine Art Behälter, die Elemente enthalten. \\
+Jeder Tag hat ein Anfangselement (beispielsweise <p>) und dann beginnt der Absatz, es folgt darauf zwingend ein Endelement, welches mit einem Schrägstrich gekennzeichnet ist (beispielsweise </p>). Zwischen diesen Tags wird er Inhalt des Absatzes dargestellt.  \\
+Im folgenden Beispiel wird der Tag <p> eingesetzt, um dem Browser mitzuteilen, dass alles zwischen dem öffnenden Tag <p> und dem schliessenden Tag </p> zum selben Paragraphen gehört: \\
+<code>
+<p>Hier steht ein Absatz (paragraph), der immer auf einer neuen Zeile beginnt.</p>
+</code>
+=== Die ersten Schritte in HTML. ===
-<p> Hier steht ein Absatz (paragraph), der immer auf einer neuen Zeile beginnt. </p>
+Der Einstieg zu HTML und die ersten Aufgaben dazu arbeiten Sie mit dem Material von Georg Schaller - Kollegium Gambach durch.
+<WRAP center round todo 80%>
+**Auftrag**\\
+  - Lesen und bearbeiten Sie [[https://www.info.we-tea.ch/doku.php?id=wiki:html_css:html_css_1#grundgeruest_von_html | Material Schaller Gambach]]
+  - Lösen Sie die Aufgaben 1 bis 3.
+  - Erstellen Sie ein Spick mit allen wichtigen HTML - Befehlen (Papierform)
+</WRAP>
-Grundstruktur eines HTML Dokuments
-    Repl.it
-    Grundgerüst von HTML
-    Die wichtigsten HTML-Tags
-    Grundgerüst von HTML
-    Überschriften
-    Textabsätze (Paragraphen)
-    Zeilenumbrüche
-    Aufzählungen
-    Nummerierungen
-    Horizontale Linie
-    Tabellen
-    Links
-    Bilder
-    Textdekorationen
-    Div-Elemente
-    Cheatsheet
-    HTML für den Inhalt und CSS für das Design
-    Einbinden einer CSS-Datei
-    CSS-Referenz
-    Texte formatieren
-    Farben
-    ID- und Class-Attribute
-    Position
-    Projekt:
-    Bootstrap
-    Projektrahmen
-    Beispiel