INF1005 Praktische Informatik 1 Webseiten - Teil 1 PDF

INF1005 Praktische Informatik 1 WiSe 24/25 Webseiten - Teil 1 Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite Themenüberblick Webseiten Auszeichnungssprachen ▪ Wie kommt der Text in den Computer? Internet ▪ Was sind Auszeich...

INF1005 Praktische Informatik 1 WiSe 24/25 Webseiten - Teil 1 Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite Themenüberblick Webseiten Auszeichnungssprachen ▪ Wie kommt der Text in den Computer? Internet ▪ Was sind Auszeichnungssprachen (“Markup Languages”)? ▪ Markdown TypeScript Client-Server- HTML CSS Frameworks Kommunikation Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 2 Wie kommt der Text in den Computer? Computer sind Rechner ▪ Kein natürliches Verständnis von Text / Sprache ▪ Rechnen und verarbeiten Zahlen Wie können wir aus Text Zahlen machen? Jeder Buchstabe bekommt eine Zahl = Zeichenkodierung (“Character Encoding”) Text = Zahlen + Encoding Hierfür gibt es mehrere etablierte Encodings ▪ American Standard Code for Information Interchange ▪ ISO/IEC 8859: z.B. Latin-1 Western European ▪ Unicode (UTF-8 / UTF-16) ▪ … Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 3 ASCII (von 1963) Eine 7-Bit-Zeichenkodierung für: ▪ Textzeichen ▪ Satzzeichen ▪ Sonderzeichen ▪ Steuerzeichen Jedes Zeichen wird als eine Zahl zwischen 0 und 127 beschrieben Zum Beispiel: A = 01000001 = 65 B = 01000010 = 66 C = 01000011 = 67... [Bildquelle: https://de.wikipedia.org/wiki/American_Standard_Code_for_Information_Interchange] Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 4 Unicode Universelles Zeichenencoding: ▪ Schriftzeichen für verschiedene Sprachen, definiert vom Unicode Konsortium ▪ Aktuell Version 16 mit 154.998 Zeichen ▪ Emoji (Stand im Oktober 2024: 3.790 Stück) Kodierbar als: ▪ UTF-8 (Web und Dateien, kompatibel zu ASCII) ▪ UTF-16 (Java,.NET, Windows API) ▪ UTF-32 (selten) → #0000 – #007F: identisch mit 7-bit ASCII [Bildquelle: https://articles-images.sftcdn.net/wp-content/uploads/sites/3/2014/09/unicode-header.png] Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 5 Beispiel Erstellen von Text in einem Texteditor (hier Visual Studio Code) Speicherformat Zwischendarstellung Darstellung Binär Hexa- Dezimal ASCII dezimal 01001000 0x48 72 H Gewähltes Encoding 01100101 0x65 101 e 01110010 0x72 114 r...... … 00110001 0x31 49 1 00100000 0x20 32 SP (Leerzeichen) Darstellung in Hexadezimal 00001010 0x0a 10 LF (Zeilenvorschub) Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 6 Themenüberblick Webseiten Auszeichnungssprachen ▪ Wie kommt der Text in den Computer? Internet ▪ Was sind Auszeichnungssprachen (“Markup Languages”)? ▪ Markdown TypeScript Client-Server- HTML CSS Frameworks Kommunikation Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 7 Textformatierungen Das Encoding sagt uns nur was für ein Zeichen eine Zahl darstellt, nicht wie das Zeichen darzustellen ist Textformatierungen beschreiben, wie ein Text darzustellen ist: ▪ Schriftgröße ▪ Schriftart ▪ Farbe ▪ Absätze, Listen ▪ Schriftdicke ▪ Links ▪ … Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 8 Auszeichnungssprache (Markup Language) Auszeichnungssprachen sind von Menschen und Computern lesbare Sprachen zum Strukturieren, Formatieren und Darstellen von Texten z.B. README Dateien Auszeichnungssprache zur Dokumentation Lesen und Schreiben Darstellung von formatierten Inhalten (=Rendering) Lesen und Schreiben z.B. ChatGPT nutzt z.B. Webseiten oder Markdown zur Ausgabe WhatsApp Nachrichten, z.B. *Text* → Text Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 9 Beispiele für Auszeichungssprachen Praktische Informatik 1 Bachelorarbeit … [Bildquellen: Wikipedia und Wikimedia] Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 10 Themenüberblick Webseiten Auszeichnungssprachen ▪ Wie kommt der Text in den Computer? Internet ▪ Was sind Auszeichnungssprachen (“Markup Languages”)? ▪ Markdown TypeScript Client-Server- HTML CSS Frameworks Kommunikation Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 11  Markdown Vorschau Texte Überschriften: # Überschrift ## Unter-Überschrift ### Unter-Unter-Überschrift … Paragrafen: Trennung durch eine Leerzeile Hervorhebungen: Fett: **Text** Kursiv: *Text*, _Text_ Fett und Kursiv: ***Text*** Durchgestrichen: ~~Text~~ Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 12 Aufzählungen Aufzählungen mit Reihenfolge (Geordnete Listen): 1. Listenelement 1 2. Listenelement 2 3. Listenelement 3 Aufzählungen ohne Reihenfolge (Ungeordnete Listen): - Listenelement 1 - Listenelement 1.1 - Listenelement 1.2 - Listenelement 2 - Listenelement 3 Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 13 Links und Bilder Links: [Linktext](URL) Bilder:  → Es können sowohl relative, als auch absolute Pfade angegeben werden Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 14 Tabellen Spalten: Senkrechte Striche (`|`) Zeilen: Bindestriche (`-`) Kopfzeile Ausrichtung Einträge Doppelpunkte (`:`) Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 15 Escaping Wie können wir eines der Sonderzeichen (z.B. # * ` < >) als Text darstellen? Escaping mit einem vorangestellten Escape-Zeichen: \ # → \# * → \* ` → \` < → \< > → \> Und das Escape-Zeichen? \ → \\ z.B: “Alle Teilnehmer\*innen müssen die ID `#header-section` in einem passenden \-Tag verwenden.” Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite 16 Fragen? Prof. Prof.Dr. Dr.Weigel Dennis Priefer Seite