Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- gf1:html [2024/11/07 21:54] – marroc
+++ gf1:html [2024/12/12 13:59] (aktuell) – marroc
@@ Zeile 87: / Zeile 87: @@
 ==Bild==
 <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 188: / Zeile 188: @@
   - 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:
+  - Verändern Sie mit Hilfe des CSS die Grösse und Farbe der Überschriften.
-    - die Grösse und Farbe der Überschriften,
+  - Verändern Sie mit Hilfe des CSS die Hintergrundfarbe der Seite.
-    - die Hintergrundfarbe der Seite,
+  - Zentrieren Sie mit Hilfe des CSS  Sie das Bild
-    - zentrieren Sie das Bild
+  - Verändern Sie mit Hilfe des CSS den Zeichenabstand (letter-spacing) der Aufzählung auf 3 px.
-  - verändern Sie den Zeichenabstand (letter-spacing) der Aufzählung auf 3 px
+  - Verändern Sie mit Hilfe des CSS die Tabelle (Linien in der Tabelle etc...)
-  - verändern Sie 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>
-  - 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]].
+==DIV-CONTAINER ==
-  - 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]].
+Was ist ein Div-Container?
+Schauen Sie das folgende Lernvideo!
-**Links für Tipps sind:**
+{{youtube>7ZOz0aHbqsY}}
-  * https://www.w3schools.com/html/
+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.
-  * https://wiki.selfhtml.org/wiki/HTML
+Weitere Informationen finden Sie [[https://www.w3schools.com/html/html_div.asp |hier]].
+== Unterseiten - Seiten verlinken ==
+<code html>
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>...</title>
+		<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>
-**SPICK**\\
+**Auftrag**:
-Erstellen Sie ein Spick mit allen wichtigen HTML - Befehlen (Auf OneNote oder in einem Word)
+  - Erstellen Sie zwei im Moment noch leere Datei namens ''seite2.html'' und ''seite3.html'' im gleichen Ordner wie die Datei ''aufgabe1.html''.
-**wer Probleme mit Replit hat, soll [[https://codepen.io/pen/|codepen]] benutzen!**
+  - 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>
-<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>
+<WRAP nicebox green>
+**SPICK**\\
+Erstellen Sie ein Spick mit allen wichtigen HTML - Befehlen.
+</WRAP>
 [[gf1:start|Start]]