Page Title

25:["$","title",null,{"children":"Data-Driven Web Engineering: Einführung HTML | pmeschenmoser-hslu | Observable"}] 49:T468,- HTML Attribute, Aufgabe 1-3 - HTML Headings, Aufgabe 1-3 - HTML Paragraphs, Aufgabe 1-4 - HTML Comments, Aufgabe 1-2 - HTML Links, Aufgaben 1,3,4 und 5 - Mit Abschnitt 4 und 5: - HTML Formatting, Aufgabe 3-5 - HTML Tabellen, Aufgabe 1 und 4 - HTML Listen, Aufgabe 1 und 24a:[] 29:{"id":"55bf79bbbe217031","slug":null,"title":"Data-Driven Web Engineering: Einführung HTML","thumbnail":"7e2c821922d14571ffc2e82fb9600d0d6fb552f669ff177eeecc0153338dc2db","access_level":"public","create_time":"$D2023-03-29T10:15:35.551Z","update_time":"$D2023-03-29T10:15:35.551Z","view_time":null,"first_public_time":"$D2023-03-29T10:15:35.551Z","has_unpublished_edits":null,"fork":{"id":"f3f4d4b70fd1a3f6","slug":"htmlintro","title":"Data-Driven Web Engineering: Einführung HTML","owner":{"id":"d453c31c6f30f58d","login":"pmeschenmoser-hslu","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"d453c31c6f30f58d","login":"pmeschenmoser-hslu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/63655b833b666ab4131690b92aedce308446ed9468293aec56b2ee71db090aaa","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":396,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5a3b6ff689928461","login":"pmeschenmoser-hslu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/63655b833b666ab4131690b92aedce308446ed9468293aec56b2ee71db090aaa","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5a3b6ff689928461","login":"pmeschenmoser-hslu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/63655b833b666ab4131690b92aedce308446ed9468293aec56b2ee71db090aaa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Data-Driven Web Engineering: Einführung HTML","cells":[{"id":17,"value":"# Data-Driven Web Engineering: Einführung HTML","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"- Die **H**yper**t**ext **M**arkup **L**anguage ist eine sehr wichtige Sprache, um Webpages mit Texten, Links, Multimedia, uvm. zu **strukturieren**.\n- HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache (wie z.B. auch XML), die vom Browser interpretiert wird.\n- Nach den Bereichen *Bereitstellung von Webdaten* und *Zugriff auf Webdaten* sind wir nun im dritten Bereich *Präsentation von Webdaten* angekommen.\n- Diese Einführung basiert insbesondere auf dem sehr guten Tutorials von w3Schools und Kapitel 2 von Ackermanns *Webentwicklung - Das Handbuch für Fullstack-Entwickler*.\n- Mit den folgenden Zellen können Sie experimentieren, gerne können Sie aber auch ein HTML-Dokument wie *index.html* anlegen und editieren. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"## 1. Elemente, Tags und Attribute","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"- Grundkomponenten eines HTML-Dokuments sind *HTML-Elemente* (z.B. Überschriften), welche oftmals Text und selbst weitere HTML-Elemente beinhalten.\n- Ein Element wird typischerweise eingeleitet durch einen öffnenden *Tag* und beendet durch einen schliessenden Tag, siehe unten. Der Name des Tags befindet sich zwischen den spitzen Klammern. w3Schools dokumentiert die verfügbaren Tags. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"

Inhalt des Elements

Inhalt des \n Elements\n

","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"- Wir sehen schon: die Einrückung von Elementen via Tabulatoren wird nicht benötigt (vgl. Python-Code), führt aber natürlich zu besserer Lesbarkeit.\n- Es gibt auch *leere* Elemente ohne einen schliessenden Tag bzw. Inhalt. Beispiele: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":136,"value":"Dies ist ein
Zeilenumbruch.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":149,"value":"- Im vorletzten Beispiel ist auch schon ein Attribut enthalten, durch welches das img-Element parametrisiert wird (hier: Bildquelle).\n- Attributsnamen können vordefiniert oder selbst definiert sein. Attributswerte werden mit ' ' oder \" \" umschlossen. Weitere Beispiele: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":154,"value":"\n \n \n Klick mich\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":163,"value":"\n

Meine Überschrift

Überschrift mit Referenz

\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"## 2. Struktur eines HTML-Dokuments","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":170,"value":"- HTML-Dokumente folgen i.d.R. der unteren Grundstruktur:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":172,"value":"\n\n\nPage Title\n\n\n

This is a Heading

This is a paragraph.

\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":184,"value":"- Über den *DOCTYPE* wird die HTML-Version mitgegeben, hier: HTML5. Achtung: In Zeile 1 befindet sich kein HTML-Tag, sondern eine Information, die dem Browser für die Interpretation weitergereicht wird.\n- Im head-Element können bspw. der Titel und Metadaten der Webpage angegeben sowie andere Ressourcen (z.B. Skripte) eingebunden werden\n- Im body-Element folgt der eigentliche Hauptinhalt, der durch den Browser dargestellt wird. Hier sind es eine kleine Überschrift und ein Paragraph.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":179,"value":"- **Aufgabe 2.1**: Erstellen Sie eine Textdatei namens *index.html* und fügen Sie den obigen HTML-Code ein.\n- **Aufgabe 2.2**: Nutzen Sie Tabulatoren, um die HTML-Elemente einzurücken (vergleichbar mit Einrückung in Python). Tags eines Elements sollen sich dabei auf jeweils derselben Einrückungsebene befinden. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":396,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"## 3. div und span","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"- Mit span- und div-Elementen lassen sich Texte und Elemente gruppieren.\n- So könnte ein div-Element z.B. alle Elemente beinhalten, die am rechten Seitenrand angeordnet sind.\n- Mit einem div-Element erfolgt die Gruppierung standardmässig als Block. D.h. das div-Element initiiert eine neue Zeile in der Webpage. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":205,"value":"Klick mich \n

\n Mein Div Klick mich - Block \n

\nKlick mich2 ","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":223,"value":"- Anders sieht es bei der Gruppierung mit span aus, hier werden Textbestandteile und Elemente standardmässig *inline* gruppiert.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":230,"value":"Klick mich \n\n Mein Span Klick mich - Span \n\nKlick mich2 ","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"- Weitere inline- und block-Elemente finden Sie auf w3Schools.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"## 4. Textformatierung","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":247,"value":"- Mit formatting-Elementen kann die Darstellung umschlossener Textabschnitte angepasst werden. Natürlich können auch diese Elemente über IDs oder Klassennamen referenziert werden. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":252,"value":"Fetter Text
\n\nKursiver Text
\n\nMarkierter Text
\n\nKleiner Text
\n\n~~Durchgestrichener Text~~
\n\nInserted Text
\n\nCO₂
\n\nn²
","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"## 5. Weitere sehr beliebte Elemente","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":304,"value":"### 5.1 Listen","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":296,"value":"

Coffee
Tea
Milk

\n\n

Coffee
Tea
Milk

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":320,"value":"### 5.3 Diverses","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":274,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":281,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":289,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":330,"value":"

","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":334,"value":"## 6. Übungsaufgaben nach/während dieser Einführung","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":341,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null