c2b_default

Medieninformatik

VL

VL

382
0.0 (0)
E. B.
Étudier
E. B.
Diese Lernkarten behandeln auf Universitätsniveau die Grundlagen der Medieninformatik, mit Fokus auf HTML, Webseitenstrukturierung und Hypermedia. Sie decken Themen wie Elemente, Attribute, Formulare, Hyperlinks und Dokumentenstruktur ab, sowie die Einbindung von Bildern, Videos und Audio. Die Karteikarten sind ideal für Studierende und Entwickler, die ihr Verständnis von Webtechnologien vertiefen möchten, insbesondere in Bezug auf die Erstellung und Gestaltung von Webinhalten.
Cartes-fiches
382
Utilisateurs
1
Langue
Allemand
Catégorie
Marketing
Niveau
Université
Créé / Mis à jour
29.06.2022 / 30.06.2022
  • 1  / 382

Cartes-fiches

Wie ist das www entstanden?

  • Gründer: Sir Timothy John Berners Lee und Robert Caillau
  • Ziel: Wissen verbreiten und gegenseitig bearbeiten (Interaktivität)
  • entwickelten HTML und Anwendungsprotokoll HTTP (bis heute Standard)
  • erstmals erfunden, sehr schnell und stark weiterentwickelt
    • aber früher noch keine Interaktivität, daher Weiterentwicklungen

Definition WWW

  • über das Internet abrufbares System von elektronischen Hypertext und Hypermedia Dokumenten
  • werden mit Links miteinander verknüpft
  • im Internet über Protokolle übertragen
  • mittels Browser dargestellt

Welche 3 Grundkomponenten hat das WWW?

  1. URL (Uniform Resource Locator): einheitliche Adressierung im Internet
  2. http (Hypertext Transfer Protocol): Kommunikationsprotokoll
  3. html (Hypertext Markup Language): Seitenbeschreibungssprache für Dokumente

Was ist das http?

  • Protokoll in Anwendungsschicht des TCP/IP Modells
  • Grundprinzip beim Aufrufen von Webseiten:
    1. Identifizierung über DNS
    2. Aufbau mittels TCP/IP
    3. Datenaustausch mittels http
  • definiert, wie Webserver und -browser miteinander kommunizieren
    • Client-Server, bzw. Request-Response
  • Browser interpretiert html Code 
    • mit http Header und html Payload

Was ist der Browser?

  • Computerprogramm zur Darstellung von Webseiten (oder anderer Dokumente im WWW)
  • über http geladene html Code wird gerendert und interpretiert
    • Rendering: Prozess der Darstellung der Ausgangsdaten auf Rasterbildschirm
  • graphische Elemente in Bildschirmpixel geparst

Was ist html?

  • Markup Sprache 
    • d.h. kein Protokoll, sondern Webseite werden beschrieben
    • Auszeichnungssprache
    • Ergänzungen im Text, die die Logik und Struktur des Bereichs genauer beschreiben
  • Textdateien: .html/.htm
  • Startseite einer Homepage: index.html
  • erlaubt geräteunabhängige Mediendateien zu erstellen, die über einheitliches Verweissystem (Links) verbunden werden können
    • egal, ob Windows/Mac genutzt wird
    • Verweissystem verlinkt Hypertext Dokumente untereinander

Was sind Grundsätze von html?

  • Trennung von Inhalt und Darstellung
    • Darstellung durch bspw. CSS oder Browser
  • Syntax bestimmt formalen Aufbau einer Sprache ( < ... >)
  • Semantik beschreibt Bedeutungsinhalt 
    • Schlüsselworte
    • bescheiben Inhalt in den Klammern: <Text>

Was ist die Geschichte von html?

  • Generic Markup Language (GML): Vorläufer 1969
    • beinhaltete Möglichkeit, Dokumenttypen zu definieren und verfassen
  • 1978: ISO Standard = Standard Generic Markup Language
  • 1991: Berners-Lee und Caillau entwickeln html basierend auf SGML
  • 1993: erster Browser (Mosaic)
  • 1999: html4 von W3C als Standard empfohlen 
  • 2008: erste Version von html5 

Was sind Elemente bei html?

  • Textteile werden mittels Elementen gekennzeichnet (<...>)
    • Schlüsselworte = Inhalt (Konvention: Kleinbuchstaben)
      <schlüsselwort>
  • sind für Formatierung in Anzeige verantwortlich
    • aber: Formatierung in html Dokument hat keinen Einfluss auf Ausgabe
  • paarweise auftretende Elemente, die Beginn und Ende markieren
    p = Paragraph: <p> Hier steht ein eigener Paragraph. </p>
  • alleinstehende (leere) Elemente, die nur Beginn markieren
    z.B.: Zeilenumbruch (br = Break)
    • Dieser Satz enthält <br> einen Zeilenumbruch

Was sind Attribute?

  • beinhalten zusätzliche Infos für Elemente
  • werden nicht angezeigt
  • im Start Tag spezifiziert
  • als "Attribut-Wert-Paare" angegeben 
    • <tag attribute="value"> text </tag>
  • zuverlässige Attribute = abhängig vom konkreten Tag
    • bsp. Titelattribut für Paragraphen, wird angezeigt, wenn Maus sich über Element bewegt
      <p titel="mein allererster"> Hier steht ein eigener Paragraph. </p>

Wie wird der folgende Html Code in der Ausgabe angezeigt?

<p>
<!-- Kommentar: Dies hier ist sehr interessante Info. -->
Welche Sie
<!-- unbedingt -->
lesen sollten !!!
</p>

Welchen Sie lesen sollten !!!

Wie sieht eine Dokumentenstruktur aus?

  1. DOCTYPE: Kopfzeile (Deklaration des Dokumententyps (html))
    • html Dokumente beginnen mit Kopfzeile
    • html5: <!DOCTYPE html>
  2. html-Hauptteil: Beginn der html-Datei
    1. <head>
    2. <body>

Wie sieht der Hauptteil der Dokumentenstruktur aus?

  • in html Element eingeschlossen
  • Kopfbereich
    • Titelangaben (zwingend)
    • Metainformationen (beschreiben Dokument genauer)
      • Autor, Ändeurngsdatum, Suchbegriffe
      • nicht auf Website dargestellt, aber ggf. von Suchmaschine ausgewertet
    • Bezug zu anderen Dateien, z.B. CSS oder JavaScript
  • Rumpfbereich (Body)
    • Inhalt und Struktur des Dokuments
    • sichtbarer Teil, der im Browser angezeigt wird
    • Standardelemente helfen bei Seitenstrukturierung 
      • Textauszeichnung, Hyperlinks, -media, Seitenstrukturierung

 Was sind logische Auszeichnungen zur Textstrukturierung?

  • logische Auszeichnungen, die die inhaltliche Funktion beschreiben
    1. Überschriften
    2. Listen (ordered/nummeriert vs. unordered/ungeordnet)
    3. Abschnitte (<section>)
    4. thematischer Wechsel mit Trennlinie (<hr>)
    5. Tabellen: teilen Fläche in Zeilen und Spalten
    6. betonter Text
    7. Zitate
    8. vorformatierter Text (dichtengleiche Schrift, Umbruch und Leerzeichen wie in der html Datei)
  • generell gilt:
    Text wird logisch ausgezeichnet, aber die konkrete Formatierung wird separat festgelegt

Was sind physische Auszeichnungen bei der Textstrukturierung?

  • fett oder kursiv
  • mittlerweile veraltet, bei html 5 nur noch logische Auszeichnungen

Was sind Hyperlinks?

  • geräteunabhängige Mediendateien erstellen, die über einheitliches Verweissystem (Links) verbunden werden können
  • html Verweise = unidirektional
  • Definition als Verweis (Link)
    • Element <a> (anchor): markierter Anker im Text
    • Attribut href (hyperreference): Referenz auf Ziel

Wie kann man das Ziel des Hyperlinks beschreiben?

  • absolute Adressierung: vollständige URL
  • relative Adressierung: im Verhältnis zum Speicherort der Quelldaten
    • z.B. bei untergeordneten oder übergeordneten Verzeichnissen
    • untergeordnet: "unterordner/name.html"
    • übergeordnet: "../name.html"

Wie kann man spezielle Stellen im Dokument adressieren (Bookmarks)?

  • Definition des Ankers: <a href = "..."> Übung </a>
    • zu bestimmten Absatz oder Überschrift springen

 

  • Deklaration der Zielstelle
    Zielstelle muss wissen, dass sie eine Zielstelle ist
    • falls Element vorhanden, zu dem man springen will: <p id="stelle">Text</p>
    • falls Element nicht vorhanden, kann es mithilfe von <span> definiert werden: <span id="stelle">Text</span>

Was sind Hypermedia und wie können sie eingebunden werden?

  • Multimedia = mehr als nur Text
    • Bilder, Audio, Videos
  • vor html5: Einbettung über Plugins
    • seit html5: Einbettung in allen gängigen Browsern unterstützt
  • Bilder
    • Element: <img>
    • Attribute: scr (Quelle), width, height (px oder %), alt (textuelle Alternativbeschreibung, falls Bild nicht angezeigt wird)
  • Audio
    • Element: <audio>
    • Attribute: scr (Quelle, unterstützte Formate: MP3, Wav, Ogg), Autoplay)
    • Kontrollelemente: controls (play, pause, ...)
    • Source Elemente: Angabe von alternativen Quellen und Angaben des Dateitypes
  • Video
    • vgl. Audio
    • Zusätzlich: Größe des Videos
    • unterstützte Formate: mp4, WebM, Ogg

Was sind Formulare?

  • erlauben es Anwendern Eingabefelder auszufüllen, Optionsfelder auszuwählen, Schaltflächen zu drücken, Listen aus Einträgen auszuwählen
    • Bsp. Name, Geschlecht angeben
  • <form>
  • jedes untergeordnete <input> Element besteht aus Attributen für Eingabetyp und Namen/Wert

Welche Eingabetypen gibt es?

  1. Text
    • text (Textfeld)
    • textarea (mehrzeiliges Textfeld)
    • password (Textfeld zur Passwortabfrage)
  2. Auswahlboxen
    • checkbox (Mehrfachauswahl möglich)
    • radio (Radioknöpfe für Alternativen)
  3. Schaltknöpfe
    • button (normale Schaltfläche)
    • submit (Schaltfläche zum Absenden)
    • reset (Schaltfläche zum Zurücksetzen des Inhalts)

ab html5: Eingabetypen, die korrekte Eingabe erzwingen und Möglichkeit, eigene Ausdrücke anzugeben

Wie kann man Webseiten strukturieren?

  • Layout
    • verschiedene Bestandteile, unterschiedliche Funktionen
    • Ziel: übergreifende logische Struktur für gesamten Webauftritt
  • Bsp.: 
    • Kopfbereich (header): alle Seiten gleich
    • Navigationsbereich: z.B. Linkliste, für alle Seiten gleich
    • Hauptteil: individuelle Inhalte
    • Fußzeile (footer): Impressum, für alle Seiten gleich
  • Realisierungsmöglichkeiten:
    • Blockelemente <div> id
    • html5 Strukturelemente

Étudier