HTML Past Paper - THM (WiSe 24/25)

Link: go.thm.de/eval Losung: ERSTI24.25 Sie haben nun 10 Minuten Zeit, um an der Befragung teilzunehmen. VIELEN DANK! Vorlesungsstart: 11:40 Uhr Prof. Prof.Dr. Dr.Weigel...

Link: go.thm.de/eval Losung: ERSTI24.25 Sie haben nun 10 Minuten Zeit, um an der Befragung teilzunehmen. VIELEN DANK! Vorlesungsstart: 11:40 Uhr Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 1  INF1005 Praktische Informatik 1 WiSe 24/25 Webseiten - Teil 2 Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite Anleitung für die Folien Ausprobieren! Dies ist praktische Informatik! HTML, CSS und TypeScript lernen Sie nicht durch Auswendiglernen! Probieren Sie nach der Vorlesung alle Beispiele selbst auf Ihrem Rechner aus! Überlegen Sie sich vielleicht ein kleines Seitenprojekt zum Üben: - Persönliche Webseite / Portfolio - Webseite für den Verein / Clan / Familie - Fan-Webseite (…müssen Sie auch nicht veröffentlichen) Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 3 Themenüberblick Webseiten HTML ▪ Einführung und Grundlagen Internet ▪ Wichtige HTML-Elemente ▪ Fehlertoleranz und Validatoren TypeScript Client-Server- Auszeichnungs- CSS Frameworks Kommunikation sprachen [Comicquelle: https://www.reddit.com/r/ProgrammerHumor/comments/juqtzd/html_isnt_a_programming_language_it_is_a_language/] Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 4 Woher kommt der Inhalt in meinem Browser? Was möchte ich sehen? (Eingabe) Inhalt (Ausgabe) Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 5 Woher kommt der Inhalt in meinem Browser? Was möchte ich sehen? (Eingabe) http:// → Name eines Protokolls www.thm.de → Name eines Rechners („Host“) /mni → Name einer Datei („Ressource) auf diesem Rechner ▪ Host und Ressource zusammen werden als URL („Uniform Resource Locator“) bezeichnet. ▪ Die URL bestimmt eindeutig, was der Benutzer sehen möchte. → Aber woher kommt der Inhalt und wie wird er formatiert? Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 6 Woher kommt der Inhalt in meinem Browser? Content Rapunzel Jacob Grimm (1785-1863) und Wilhelm Grimm (1786-1859) Es war einmal ein Mann und eine Frau, die wünschten sich schon lange vergeblich ein Kind, endlich machte sich die Frau Hoffnung der liebe Darstellung im Gott werde ihren Wunsch erfüllen. Browser Die Leute hatten in ihrem Hinterhaus ein kleines Fenster,[…] Kinder- und Hausmärchen, große Ausgabe, Band 1, 1850 HTML (Auszeichnungssprache) zur strukturierten Heute! Beschreibung der Webseiteninhalte (des Contents) CSS (Stylesheets) zur Beschreibung der Darstellung Nächste Woche Bootstrap als „Helfer“ (Frameworks) Übernächste Woche TS als Programmiersprache um Webseiten Themenblock „TypeScript“ Browser/Client-seitig mit Funktionalität auszustatten Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 7 Hypertext Markup Language ▪ HTML ist „Plain Text“ (Klartext) der mit Auszeichnungselementen (Tags) versehen ist. ▪ Hypertext = nichtlineare, netzartige Texte (Texte, die auf andere Texte verweisen/verlinken) ▪ Markup Language = Auszeichnungssprache ▪ Auszeichnen = hervorheben ▪ Zeichnet Struktur von Daten aus: Überschriften, Absätze, Listen, … HTML Rapunzel Jacob Grimm (1785-1863) und Wilhelm Grimm (1786-1859) Es war einmal ein Mann und eine Frau, die wünschten sich schon lange vergeblich ein Kind, endlich machte sich die Frau Hoffnung der liebe Gott werde ihren Wunsch erfüllen. Kinder- und Hausmärchen, große Ausgabe, Band 1, 1850 Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 8 Kurze Historie zu HTML Erfindung HTML 4.01 HTML5 Tim Berners-Lee Weiterentwicklung mit Native Multimedia-Inhalte, entwickelte HTML Strukturelementen, CSS, semantischere Strukturierung, am CERN (Schweiz) iFrames, Java Applets, neue APIs, wird kontinuierlich Flash und int. Zeichensätze weiterentwickelt 1989-91 1995 1999 2000 2014 HTML 2.0 XHTML 1.0 Erste Standardisierung Neuformulierung mit einfachen Strukturierungs- basierend auf XML und Formatierungsmöglichkeiten (wurde eingestellt) Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 9 Grundgerüst einer HTML-Datei ▪ HTML ist also ein spezielles Format, welches der Browser nutzt, um Texte und “Multimedia”-Inhalte anzuzeigen. ▪ HTML-Datei: Einfache Textdatei mit HTML als Inhalt und der Endung.html Metadaten Version Ein einfaches HTML5 Beispiel HTML - Grundgerüst Page Title Title Rapunzel Jacob Grimm (1785-1863) und Wilhelm Grimm (1786-1859) Es war einmal ein Mann und eine Frau, die wünschten sich schon lange vergeblich ein Kind, endlich machte sich die Frau Hoffnung der liebe Gott werde ihren Wunsch erfüllen. Inhalt Die Leute hatten in ihrem Hinterhaus ein kleines Fenster,[…] Kinder- und Hausmärchen, große Ausgabe, Band 1, 1850 Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 10 Grundgerüst einer HTML-Datei ▪ Header enthält Metadaten und Scripts → Metadaten = Informationen über Daten, die die Daten nicht selbst enthalten (Browser Einstellungen) HTML Browser: Tab-Titel Rapunzel Browser: Zeichenkodierung Für Suchmaschinen Browser (Spezialanweisung) ▪ Unterstützen den Browser dabei den Inhalt richtig darzustellen. → Falls diese fehlen, muss der Browser raten → Standard-Einstellung ▪ Beeinflussen das Suchmaschinen-Ranking und Verarbeitungsverhalten. Bsp: Seite nicht indexieren: Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 11 HTML Tags HTML-Tags strukturieren die Inhalte. Der Browser übersetzt diese in teils unterschiedliche Style-Formatierungen Es gibt zwei Formen: Start-Tag End-Tag 1. Tag-Paare mit Start- und End-Tag: Inhalt Weitere Beispiele: …, …, … Tag-Paaren können weitere Tags als Inhalt besitzen (=Kinder) Beispiel eine Liste mit zwei Einträgen: Item1Item 2 2. Selbstschließende Tags: Werden auch „leere Elemente“ genannt, da Sie keine Kinder oder eingeschlossene Inhalte besitzen Weitere Beispiele: , , Komplette Tag-Referenz: https://www.w3schools.com/tags/default.asp Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 12 Wie können wir “” darstellen? – Escaping! Tag-Zeichen: < wird zu &lt; (less than) > wird zu &gt; (greater than) Escape-Zeichen: & wird zu &amp; (ampersand) Beispiel: Everyone &lt;3 Cats &amp; Dogs wird dargestellt als: Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 13 HTML Attribute Ein Attribut ist ein Schlüssel-Wert Paar, das einem HTML-Tag zugeordnet ist. Tags können ein oder mehrere Attribute enthalten: Dabei gilt: ▪ Jeder Attributschlüssel soll nur einmal vorkommen ▪ Welche Attributschlüssel zulässig sind hängt vom HTML-Tag ab ▪ Manche Attribute sind in jedem Tag verfügbar (universell) ▪ Manche Attribute sind nur für bestimmte Element zugelassen (speziell) Einige Attributwerte müssen eindeutig sein: ▪ z.B. “time” darf nicht mehr woanders als Wert für id benutzt werden Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 14 HTML Attribute - Beispiele Link zur MNI-Seite Alternativtext, z.B wenn Bild nicht vorhanden Eine etwas andere Überschrift CSS → später dazu mehr Standard-Überschrift (h1) Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 15 Häufig verwendete HTML-Attribute Attribut Beschreibung alt Alternativtext für Bilder, wenn Bild nicht vorhanden disabled Deaktiviert Input-Elemente href Definiert die Ziel-Adresse eines Links id Eindeutiger Bezeichner für ein Element class Eine oder mehrere CSS-Klassen des Elements src Definiert den Pfad (URL) zu einem Bild style Style-Angaben (CSS) für ein Element title Weitere Informationen zu einem Element (wird als Tooltip angezeigt) Komplette Attribut-Referenz: http://www.w3schools.com/tags/ref_attributes.asp Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 16 Document Object Model (DOM) ▪ Der Browser muss ein HTML-Dokument parsen und anschließend darstellen ▪ Der Parser liest die Zeichen des Dokuments und erstellt daraus einen Baum → Document Object Model (DOM) HTML Rapunzel Parser Rapunzel......... Programm, das speziellen Text (HTML) in einen Baum aus Objekten transformiert (Document Object Model)... → Bestandteil des Browsers → Auf diesen Baum kann man mit TypeScript zugreifen und ihn manipulieren DOM-Standard: https://dom.spec.whatwg.org/ Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 17 Themenüberblick Webseiten HTML ▪ Einführung und Grundlagen Internet ▪ Wichtige HTML-Elemente ▪ Fehlertoleranz und Validatoren TypeScript Client-Server- Auszeichnungs- CSS Frameworks Kommunikation sprachen Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 18 Block- und Inline-Elemente HTML ▪ Blöcke werden alleine in eine Zeile mit voller Breite positioniert ▪ dürfen in der Regel verschachtelt werden Rapunzel ▪ Beispiele: div, h1 - h6, p, … ▪ Inline: positionieren sich nicht in eine extra Zeile und nehmen nur so viel Platz ein, wie Rapunzel Block Jacob Grimm (1785-1863) Inline sie brauchen Wilhelm Grimm (1786-1859) Inline ▪ sind Bestandteil des Textes Es war einmal ein... Block Die Leute hatten... Block ▪ Beispiele: span, a, img, … Rapunzel Jacob Grimm (1785-1863) Wilhelm Grimm (1786-1859) Es war einmal ein... Die Leute hatten... Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 19 Wichtige Block- und Inline-Elemente Block Inline Element Beschreibung Element Beschreibung div Block Container a Link (Anker) p Paragraf span Inline Container h1–h6 Überschriften em Kursiv und hervorgehoben (emphasize) address Kontaktinformation strong Wichtig und Fett ul Unsortierte Liste (unordered) img Bild ol Sortierte Liste (ordered) code Quellcode form Formular button Knopf table Tabelle time Datums- oder Uhrzeitangabe hr Trennlinie (horizontal rule) q Zitate Komplette Referenz: https://www.w3schools.com/html/html_blocks.asp und https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 20 Hypertext braucht Hyperlinks Das Tag definiert einen Hyperlink (für Anker, bzw. anchor) ▪ zu externer Seite ▪ innerhalb der Seite ▪ zu einem Programm Attribut href enthält entweder: ▪ eine absolute URI: www.thm.de/mni/ öffnet die Seite des Fachbereichs MNI ▪ eine relative URI: /übung2/studienplan.html öffnet die HTML-Datei im Ordner “übung2“../Hausübungen/HÜ1/portfolio.html öffnet die HTML-Datei im Ordner “Haus…“ ▪ eine E-Mail-Adresse: mailto:[email protected] öffnet E-Mail-Client ▪ eine Sprungadresse: # spring zum Seitenanfang #ziel spring zum Element mit der id “ziel” Beispiele ▪ Name entspricht Name ▪ E-Mail-Kontakt Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 21 Listen Ungeordnete Liste Geordnete Liste Definitions Liste Luke Hören P1Programmieren 1 Leia Denken PI1Praktische Informatik 1 Chewbacca Sprechen Te1Technische Informatik 1 Ergebnis: Ergebnis: Ergebnis: Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 22 Tabellen Deprecated! Tags: Stundenplan Table Row (Zeile) Block Table Header Mo Di Table Data Mi Do Fr Ergebnis 1 Frei TI1 - Übung P1 - Vorlesung Frei PI1 - Übung … Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 23 Zeit für ein Quiz! arsnova.thm.de 2240 0789 arsnova.thm.de 2240 0789 Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 24 Semantische Elemente Semantische Elemente haben eine klar-definierte Bedeutung (Semantik) und können die Entwicklung vereinfachen und die Lesbarkeit verbessern Früher: Heute: Folgende Elemente stehen zur Verfügung: ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ [Quelle: http://www.w3schools.com/html/html5_semantic_elements.asp] Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 25 Einbinden von Medien Seit HTML 5 kann auf Medien-Elemente zurückgegriffen werden, diese sind Teil der HTML 5-Sprachreferenz und werden von aktuellen Browsern unterstützt (vorher konnten Medien nur über Browser-Plugins ausgeführt werden): Audio: HTML 5-Audio wird von deinem Browser nicht unterstützt! Video: HTML 5-Videos werden von deinem Browser nicht unterstützt! https://www.w3schools.com/html/html_media.asp Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 26 Formulare Label (bei Klick auf das Label wird das passende Inputfeld ausgewählt) Vorname: Eingabefeld Nachname: Eingabefeld