Zusammenfassung SA1

<sub class="descriptionSection">01-12-2024 12:28:pm // #Tag // [[Internetanwendungen]]</sub> ____ ## Emmet Syntax Emme ist eine Sprache zum schnellen erstellen von großen HTML Seiten. Gutes Emmet Cheatsheet in der Prüfung: ![[Emmet Cheat Sheet & Quick Reference.pdf]] Komplette Emmet Doku: [[cheatsheet-a5.pdf]] ### Grundlegender Syntax Ein Emmet Syntax sieht grundlegend so aus: ```emmet htmlElement(operator) ``` Also konkret: ```emmet div*5 ``` Output: ```html <div></div> <div></div> <div></div> <div></div> <div></div> ``` Um Text innerhalb eines Elements einzufügen: ```emmet div{Hello!} // output: <div>Hello!</div> ``` Um einem Element eine ID zu vergeben: ```emme div#Hello // output: <div id="Hello"></div> ``` Um einem Element eine ID und eine Klasse zu vergeben: ```emmet div#Hello.Mom.Dad // output: <div id="Hello" class="Mom Dad" ``` Etwas verboser kann man auch schreiben: ```emmet p[title="Hello Mom and Dad"] //output: <p title="Hello Mom and Dad"></p> ``` In die Eckigen Klammern kann man jedes HTML Attribut schreiben ### Zähler in Emmet In Emmet können mehrere Elemente Gleichzeitig erstellt werden in dem man `*<anzahl>` Schreibt: ```emmet div*5 //Erstellt 5 Lehre Divs ``` Diese Zähler können innerhalb der Elemente verwendet werden: ```emmet div{Zahl: $}*5 ``` Output: ```html <div>Zahl: 1</div> <div>Zahl: 2</div> <div>Zahl: 3</div> <div>Zahl: 4</div> <div>Zahl: 5</div> ``` Startpunkt des Zählers setzt man mit einem `@<zahl>` fest: ```emmet ul>li.item$@2*3 ``` Output: ```html <ul> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> </ul> ``` Die Zähler kann man auch in der ID oder Klasse nehmen: ```emmet ul>li.item$*3 ``` Output: ```html <ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> </ul> ``` Von oben runterzählen kann man so: ```emmet ul>li.item$@-*3 ``` Output: ```html <ul> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul> ``` ### Kombinieren von Elementen Um Child Elemente hinzuzufügen wird das `>` symbol genutzt: ``` div*2>p*5 ``` Output: ```html <div> <p></p> <p></p> <p></p> <p></p> <p></p> </div> <div> <p></p> <p></p> <p></p> <p></p> <p></p> </div> ``` Führ mehr komplexe ausdrücke lohnt es sich die Child Elemente in eine `()` Runde klammer zu schreiben (selber output wie oben): ```emmet div*2>(p*5) ``` Wenn man in der Ebene wieder eins nach oben gehen möchte, nimmt man den `^` operator: ```emmet div*2>(p*5)^li*2 ``` Output: ```html <div> <p></p> <p></p> <p></p> <p></p> <p></p> </div> <div> <p></p> <p></p> <p></p> <p></p> <p></p> </div> <li></li> <li></li> ``` ## Grundstrucktur einer HTML 5 Seite ```html <!DOCTYPE html>  <html> <head> <title>Titel der Seite</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>Hier kommt der Inhalt der Seite hin</h1> </body> </html> ``` ## CSS Files CSS Files können eingebunden werden via: ```html <link rel="stylesheet" type="text/css" href="formate.css"> ``` im Head. ### Aufbau einer CSS Formatierung: Jede CSS Anweisung besteht immer aus einem Selektor, der bestimmt welche HTML-Tags formatiert werden sollen. Es gibt diese Selektoren: | Typ | Beschreibung | | --------------------------- | ---------------------------------------------------------------------------------------- | | Universalselektor: `*` | Formatiert alle HTML Elemente im Dokument | | Klassenselektoren: `.class` | Erstellt eine Klasse die mehrfach verwendet werden kann in verschiedenen HTML Elementen: | | Typeselektoren: `tagname` | Formatiert alle bestimmten HTML-Tags: `h1 {font-size: 20px}` | | ID-Selektoren: `#id` | Formatiert nur die Elemente mit zugewiesener ID | ### Hirarchie der CSS Anweisungen Je nachdem wie genau die CSS Anweisung geschrieben ist (also ob nur ein, zwei, oder drei Selektoren vorhanden sind) gilt eine andere Anweisung. Es gilt nur die Anweisung, die am genauesten formuliert ist (also die die meisten tags kombiniert hat). ```css div{ background-color: white; } div#IDMoment{ background-color: green; } div.helloWorld#IDMoment{ background-color: purple; } ``` In dem Beispiel gilt für jede `div` im Dokument: Hintergrundfarbe Weiß. Für die div mit der ID `IDMoment` würde gelten background-color: green, allerdings **nur wenn** die letzte Anweisung nicht da stehen würde, die die zweite überschreibt da sie spezifischer ist. ### Kombinieren von CSS Anweisungen Siehe auch: [[06_CSSKombinationVonSelektoren.pdf]] CSS Anweisungen können kombiniert werden | Selektor | Beschreibung | | --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | | Nachfahrselektor: `selektor1 selektor2`(z.B: `.class ul`) | Wählt alle spezifizierten Unterelemente aus. | | Kindselektor: `selektor1>selektor2` | Wählt alle **direkten Kindelemente** aus. (Also nur die Stufe drunter => Kindelemente der Kindelemente sind nicht affected) | | Nachbarselektor:<br>`selektor1+selektor2` | Wählt das Element **direkt nach** selektor1 aus. | | Geschwisterselektor:<br>`selektor1~selektor2` | Wählt alle **Nachbarelemente** aus (Diese können aber nur **nach diesem Element** kommen. | ## HTML-Links HTML Links werden per diesem Syntax hier definiert: ```html <a href="https://Ziel.der.URL/path">Link zum Ziel </a> ``` ### URLs Eine URL (Uniform Resource Locator) besteht aus 4 Teilen: ``` protokoll://ziel/pfad/dateiname ``` Eine URL kann als Ziel in einem HTML Link verwendet werden ### Relative Pfade In einem HTML Link kann man auch relative pfade verweden: ``` ./pfad/zu/dateiname ``` Um eine Ebene im Dateibaum hochzugehen nutzt man `..`: ``` ../pfad/zu/dateinamen/der/jetzt/länger/ist ``` ## Bilder Bilder im Web kann man aufteilen in zwei Kategorien: - Pixelgrafiken - .gif - .jpg - .png - .webp - Vektorgrafiken - .svg ### Performance im Web Im web muss ständig auf Performance geachtet werden und man kann bilder tweaken damit die website schneller lädt: - Auflösung von Bildern - Punktdichte (Detailgenauigkeit, wird gemessen in ppi, dpi, lpi) - Lazy-Loading ### Farbmodelle Es gibt zwei Main Farbmodelle: - RGB (Normal im Web und bei Computern generell) - CMYK (Normal bei Druckern, steht für Cyan, Magenta, Yellow und Key (Schwarz oder Weiß))