Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- gf1:html [2024/11/08 10:25] – 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 201: / Zeile 201: @@
 Schauen Sie das folgende Lernvideo!
 {{youtube>7ZOz0aHbqsY}}
-Mit  können Sie Block-Elemente ein, in das Sie mehrere andere Elemente einschließen können. Alles, was zwischen diesem Tag und dem abschließenden  steht, wird als Teil des Bereichs interpretiert.
+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]].
@@ Zeile 237: / Zeile 237: @@
 </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>
@@ Zeile 242: / Zeile 258: @@
 Erstellen Sie ein Spick mit allen wichtigen HTML - Befehlen.
 </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]]