Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- gf1:html [2024/11/07 21:22] – marroc
+++ gf1:html [2024/12/12 13:59] (aktuell) – marroc
@@ Zeile 54: / Zeile 54: @@
 ==Absatz ==
-Beispiel 1: <code>
+<code>
 <p> Hier steht ein Absatz (paragraph), der immer auf einer neuen Zeile beginnt.</p>
 </code>
@@ Zeile 64: / Zeile 64: @@
 ==Titel im Body-Tag, unterschiedlich grosse Überschriften (headers) ==
-Beispiel:
 <code html>
  <h1>Dies ist ein Titel</h1>
@@ Zeile 73: / Zeile 72: @@
 **Auftrag**:  Erstellen Sie einen Titel im Body-Bereich der Datei.
 </WRAP>
-===Aufzählungen===
+==Aufzählungen==
-Beispiel:
 <code html>
 <ul>
@@ Zeile 88: / Zeile 86: @@
 </WRAP>
 ==Bild==
-Beispiel:
 <code html>
-<img src="bildname.jpg" alt="alternativer Text hier schreiben" hight="Höhe angeben" >
+<img src="bildname.jpg" alt="alternativer Text hier schreiben" height="Höhe angeben" >
 </code>
 Mit dem Tag <img> wird zum einbinden von Bildern benutzt. Ein img-Tag beinhaltet den alle Informationen, wie der Name und optional auch die Grösse oder einen alternativen Text, falls das Bild nicht geladen werden kann. Auch andere Angaben können gemacht werden. Siehe [[https://www.w3schools.com/html/html_images.asp|hier]].
@@ Zeile 106: / Zeile 103: @@
 == Tabellen==
-Beispiel:
 <code html>
 <table>
@@ Zeile 138: / Zeile 134: @@
 </code>
 Im obigen Beispiel sind einige verschiedene Textdekorationen aufgelistet, so zum Beispiel <em>-kursiv, oder <strong>-fett,  oder auch <sup>-hochgestellt... etc.
+<WRAP nicebox green>
+**Auftrag**:  Nutzen Sie diese kleinen Formatierungselemente, um in Ihrer Übungsseite einiges übersichtlicher und besser zu gestalten.
+</WRAP>
 === Head-Tags==
 Neben den Tags im Body können auch einige Head-Tags sehr wichtig werden.
 ==Title==
 Dieser Tag kann genutzt werden, um den Titel der Seite zu definieren. //Dieser steht nicht in der Webseite selbst, sondern wird bei den meisten Browsern im „Tab“ angezeigt.// Der Title-Tag gehört immer in den Head-Teil des Dokumentes.
 == Meta==
@@ Zeile 156: / Zeile 153: @@
 Diese Tags helfen dabei, die Webseite korrekt darzustellen, ihre Funktionalität zu gewährleisten und sie für Suchmaschinen und Benutzer zugänglicher zu machen.
+<WRAP nicebox green>
+**Auftrag**:  Fügen Sie im head mindestens die Sonderzeichendarstellung ein.
+</WRAP>
 ====CSS====
-CSS, oder Cascading Style Sheets, ist ein wesentlicher Bestandteil der Webentwicklung, da es das Design und Layout von Webseiten ermöglicht. Es trennt die Präsentation vom Inhalt, indem HTML für die Struktur und CSS für das Design zuständig ist. Dies sorgt für ein konsistentes Erscheinungsbild und erleichtert die Wartung, da einheitliche Stile für mehrere Seiten einer Website festgelegt werden können.
+Da nun für jede Unterseite hier das Layout und das Design der Seite wieder neu eingefügt werden müsste in jeder html-Datei, ist man dazu übergegangen, eine Trennung von Stil und Inhalt vorzunehmen. Dadurch erhöht sich unter anderem die Effizienz.
+Diese Layout-Dateien werden CSS, oder **Cascading Style Sheets** genannt und sind ein wesentlicher Bestandteil der Webentwicklung, der Ausdruck **Cascading Style Sheets** kann mit stufenförmig, geschachtelte Stilvorlage. Eine CSS-Datei enthält das Design und Layout von Webseiten. Die HTML-Datei ist nur noch für die Struktur und den Inhalt zuständig und CSS für das Design zuständig. Dadurch erreichen wir ein konsistentes Erscheinungsbild und erleichtert die Wartung, da einheitliche Stile für mehrere Seiten festgelegt werden können.
+\\
+Um nun die CSS-DAtei einzubinden, sollte wie schon weiter oben erwähnt, eine Verlinkung von der HTML-Seite zur CSS-Seite passieren.
+<code html>
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" type="text/css" href="styling.css" media="screen" />
+    </head>
+    <body>
+    </body>
+</html>
+</code>
-Darüber hinaus ermöglicht CSS responsives Design, sodass Webseiten auf verschiedenen Geräten und Bildschirmgrößen gut aussehen. Mit Media Queries können spezifische Stile für unterschiedliche Geräte definiert werden. Ein weiterer Vorteil von CSS ist die Wiederverwendbarkeit, da einmal erstellte CSS-Dateien auf mehreren Seiten oder Projekten wiederverwendet werden können, was Zeit und Aufwand spart.
+Dabei muss das CSS nun ''styling.css'' heissen und am gleichen Ort abgespeichert sein wie die Seite, die auf dieses Stylesheet verweist.
+Das Stylesheet selbst sieht anders aus. Es enthält keine html-Elemente.
+<code css>
+h1{
+  color:blue;
+  font-size: 35px;
+}
+p{
+  color: green;
+}
+</code>
+<WRAP nicebox green>
+**Auftrag**:
+  - Erstellen Sie eine im Moment noch leere Datei namens ''styling.css'' im gleichen Ordner wie die Datei ''aufgabe1.html''.
+  - Fügen Sie anschliessend eine Verlinkung zum Stylesheet ein wie oben beschrieben. Kopieren Sie den Inhalt des obigen Beispiels in die CSS-Datei. Was passiert mit der Datei ''aufgabe1.html'' in der Browseransicht?
+  - Verändern Sie mit Hilfe des CSS die Grösse und Farbe der Überschriften.
+  - Verändern Sie mit Hilfe des CSS die Hintergrundfarbe der Seite.
+  - Zentrieren Sie mit Hilfe des CSS  Sie das Bild
+  - Verändern Sie mit Hilfe des CSS den Zeichenabstand (letter-spacing) der Aufzählung auf 3 px.
+  - Verändern Sie mit Hilfe des CSS die Tabelle (Linien in der Tabelle etc...)
+  - Werden Sie kreativ! ;)
+Um diese und noch weitere Erweitungen des Layouts Ihrer Beispielseite im CSs durchzuführen, nutzen Sie [[https://www.w3schools.com/css/ |diese Seite]].
+</WRAP>
-CSS trägt auch zur Zugänglichkeit von Webseiten bei, indem es die visuelle Darstellung verbessert und Anpassungen für Benutzer mit Behinderungen ermöglicht. Schließlich kann gut geschriebenes CSS die Ladezeiten von Webseiten verbessern, da es die Menge an HTML reduziert und die Trennung von Stil und Inhalt die Effizienz erhöht.
+==DIV-CONTAINER ==
+Was ist ein Div-Container?
+Schauen Sie das folgende Lernvideo!
+{{youtube>7ZOz0aHbqsY}}
+Mit dem Div-Tag können Sie Block-Elemente ein, in das Sie mehrere andere Elemente einschließen können. Alles, was zwischen diesem Start-Tag und dem abschließenden End-Tag steht, wird als Teil des Bereichs interpretiert.
+Weitere Informationen finden Sie [[https://www.w3schools.com/html/html_div.asp |hier]].
-  - Bearbeiten Sie von der Wiki-Seite von Herrn Schaller auch die [[https://www.info.we-tea.ch/doku.php?id=wiki:html_css:html_css_1#grundgeruest_von_html|Aufgabe 3]].
+== Unterseiten - Seiten verlinken ==
-  - Studieren Sie die Informationen zu  [[https://www.info.we-tea.ch/doku.php?id=wiki:html_css:html_css_2|CSS]] von Herrn Schaller bearbeiten Sie die [[https://www.info.we-tea.ch/doku.php?id=wiki:html_css:html_css_1#grundgeruest_von_html |Aufgabe 4]].
+<code html>
-  - Als letzte Aufgabe müssen wir uns noch um die div-Containter kümmern, diese beinhalten auch die Menueliste. Bearbeiten Sie die [[https://www.info.we-tea.ch/doku.php?id=wiki:html_css:html_css_2 |Aufgabe 5]].
+<!DOCTYPE html>
+<html>
-**Links für Tipps sind:**
+	<head>
-  * https://www.w3schools.com/html/
+		<title>...</title>
-  * https://wiki.selfhtml.org/wiki/HTML
+		<meta charset="UTF-8"/>
+                <link rel="stylesheet" type="text/css" href="styling.css" media="screen" />
+	</head>
+	<body>
+		<div id="menu">
+                    <a href="Seite1.html">Hautpseite</a><br/>
+		    <a href="Seite2.html">Seite 2</a><br/>
+		    <a href="Seite3.html">Seite 3</a><br/>
+		</div>
+                <div id="main">
+		    <h1>Hauptseite</h1>
+		    <p>...</p>
+                </div>
+	</body>
+</html>
+</code>
+Wie kann nun eine Website mit einer anderen Unterseite verlinkt werden? Im obigen Beispiel ist ein Menubereich definiert, welcher auf zwei Unterseiten (Seite2.html und Seite3.html) verweist. Hier ist es wichtig, dass diese beiden Unterseiten existieren und sich diese html-Dateien im gleichen Ordner befinden wie die Hauptseite, ansonsten muss der Pfad (Name der Seite zwischen den Anführungszeichen) angepasst werden.
+<WRAP nicebox green>
+**Auftrag**:
+  - Erstellen Sie zwei im Moment noch leere Datei namens ''seite2.html'' und ''seite3.html'' im gleichen Ordner wie die Datei ''aufgabe1.html''.
+  - Kopieren Sie anschliessend den Div-Teil des Menues wie oben angegeben ein.
+  - Gestalten Sie mit weiteren Div-Elementen (Main oder Header oder Right ...) die Seiten.
+Wenn Sie das Menue noch weiter gestalten möchten, finden Sie viel Hilfe auf [[https://www.w3schools.com/css/css_navbar.asp |dieser Seite]].
+\\
+Zu Div-Elementen allgemein finden Sie Rat [[https://www.w3schools.com/html/html_div.asp | hier]].
 </WRAP>
+Ob jetzt das Div-Element ein Menue beinhaltet oder einen header- oder footer-Teil der Website als Bereich speziell formatiert werden soll, kann dann für jedes div-Element einzeln erfolgen. Beispielsweise kann im div-Element jeweils im CSS Länge, Breite, Position, Hintergrund, Textfarbe oder -position und vieles mehr festgelegt werden.
+<code css>
+#meindivElement {
+  border: 5px outset red;
+  background-color: lightblue;
+  text-align: center;
+  margin-left:30%;
+}
+</code>
+In der html-Datei muss dann entsprechend nur ein <''div id="meindivElement"''> <''/div''> um die entsprechende Textstelle oder <color #ed1c24>Text-Bild -Tabellen...-Stelle</color> gepackt werden.
+<code html>
+<div id="meindivElement ">
+  Text-Bild -Tabellen...-Stelle: hier schreiben Sie alles, was innerhalb dieses div-Elements formatiert werden muss. Ein div-Tag umfasst diese Stelle.
+</div>
+</code>
 <WRAP nicebox green>
 **SPICK**\\
-Erstellen Sie ein Spick mit allen wichtigen HTML - Befehlen (Auf OneNote oder in einem Word)
+Erstellen Sie ein Spick mit allen wichtigen HTML - Befehlen.
-**wer Probleme mit Replit hat, soll [[https://codepen.io/pen/|codepen]] benutzen!**
 </WRAP>
-<accordion>
-<panel title = "Lösungen">
-</panel>
-</accordion>
-<accordion>
-<panel title = "Lernziele">
-  * Ich kann grob aufzeigen, wie sich das Internet bis heute entwickelt hat.
-  * Ich weiss, was die Abkürzungen HTML udn CSS bedeuten und wofür diese verwendet werden.
-  * Ich kenne die Struktur einer html-Datei und kann mit HTML-Tags  eine einfache Webseite erstellen. Ich kann dabei die wichtigsten Elemente einsetzten und kenne die notwendige Syntax dafür: Doctype, Grundstruktur: <html>,<head>, <body>, Text-Encoding (Unicode): <meta charset=„UTF-8“/>, Überschriften <h1>, <h2>, …, <h6>, Aufzählungen: <ul>, <li>, Tabelle: <table> <tr> <th> <td>, Listen: <ol> <ul> <li>, Text-Formatierung: <br> <hr> <b> <i> <p>, Links: <a href>, Bilder: <img src>, Umbrüche: <br> und <hr>
-  * Ich weiss was ein CSS ist und kann dieses zum Designen einer Website nutzen und kenne das Zusammenspiel zwischen html und CSS.
-  * Ich kann eine CSS Datei, Befehle davon verändern und kenne die wichtigsten Elemente wie beispielsweise die div-Container oder andere... (Menueleiste ...)
-</panel>
-</accordion>
 [[gf1:start|Start]]