interaktive medien: diy - thomas weibel · html 2. semantik 3. dateien 4. bilder 5. links 6. audio,...
TRANSCRIPT
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
Prof. Thomas Weibel, lic. phil. hist., Journalist BR
Interaktive Medien: DIY
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1. HTML
2. Semantik
3. Dateien
4. Bilder
5. Links
6. Audio, Video
7. Kommentare
8. Hausaufgabe
0 | Begrüssung / Agenda
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
HTML
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1. HTML: Das Chassis
2. CSS: Die Karosserie
3. Javascript: Der Motor
1 | HTML
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Website, Web-App
Quellcode universell
Compiler universell (Webbrowser), kostenlos
Software universell (HTML)
Kauf, Installation kostenlos
HTML 5 Struktur und Inhalt
CSS 3 Formatierung und Layout
Javascript Programmierung
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Definition
»HTML (Akronym für »Hypertext Markup Language«) ist die Beschreibungssprache des Web und legt Struktur und Inhalt fest. Die Hierarchie wird mit sogenannten »Tags« angegeben (z.B. <p> für einen Textabschnitt, <h1> für eine große Überschrift).«
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Aufbau
HTML gibt Struktur und Inhalt einer Website wieder
Inhalt (Fließtext, Titel) wird von Strukturelementen (oder »Markup Tags«) umgeben. Der Browser übersetzt die Tags in Formatierungen. Beispiel:
<h1>Dies ist ein Titel</h1>
<p>Dies ist ein Fließtext</p>
HTML-, CSS- und Javascript-Dateien bestehen aus reinem Text ohne Formatierung.
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Tags
<html>
</html>
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Tags
<h1>Dies ist ein Titel</h1>
<p>Dies ist ein Fließtext</p>
<p>Dieses Wort ist <strong>fett</strong></p>
<img src="bild.jpg" />
<a href="http://www.zieladresse.com">Website</a>
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Dateinamen
HTML-Seiten tragen immer die Endung .html
Die Startseite liegt immer im Stammverzeichnis (»Root«) und heißt index.html
Dateinamen bestehen ausschließlich aus Kleinbuchstaben und enthalten keine Umlaute, Leer- und Sonderzeichen
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Dokument
<!doctype html>
<html>
<head>
<title>Seitentitel</title>
</head>
<body>
<p>Dies ist ein Text.</p>
</body>
</html>
{{
Metainformationen
Sichtbarer Seiteninhalt
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Übung
<!doctype html>
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Übung
<!doctype html>
<html>
</html>
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Übung
<!doctype html>
<html>
<head>
<title>Meine erste Website</title>
</head>
</html>
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Übung
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Meine erste Website</title>
</head>
<body>
<h1>Mein Titel</h1>
<p>Dies ist mein Text.</p>
</body>
</html>
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Wichtige Tags
Inhalts-Tag Beschreibung Layout-Tag Beschreibung
<p> Absatz, Fließtext <section> Abschnitt
<h1> bis <h6> Überschriften <article> Artikel
<img src...> Bild <nav> Navigation
<a href...> Hyperlink <header> Kopfzeile
<br /> Zeilenumbruch <footer> Fußzeile
<b>, <strong> Fettschrift <main> Hauptinhalt
<i>, <em> Kursivschrift <aside> Marginalie
<ul><li> Liste mit Bullets <div> Absatzcontainer
<audio src...> Audiodatei <span> Zeichencontainer
<video src...> Videodatei
<button> Button
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Verschachteln
<p>Dies ist ein Textabsatz mit einem<br />
<img src="bild.jpg" /><br />
einem <strong>Schlagwort</strong> sowie einem
<a href= "https://www.linkziel.de">Link</a>.</p>
Dies ist ein Textabsatz mit einem
einem Schlagwort sowie einem Link.
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Verschachteln
<p>Dies ist ein Textabsatz mit einem<br />
<img src="bild.jpg" /><br />
einem <strong>Schlagwort</strong> sowie einem
<a href= "https://www.linkziel.de">Link</a>.</p>
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Verschachteln
<p>Dies ist ein Textabsatz mit einem<br />
<img src="bild.jpg" /><br />
einem <strong>Schlagwort</strong> sowie einem
<a href= "https://www.linkziel.de">Link</a>.</p>
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Verschachteln
<p>Dies ist ein Textabsatz mit einem<br />
<img src="bild.jpg" /><br />
einem <strong>Schlagwort</strong> sowie einem
<a href= "https://www.linkziel.de">Link</a>.</p>
↵
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Verschachteln
<p>Dies ist ein Textabsatz mit einem<br />
<img src="bild.jpg" /><br />
einem <strong>Schlagwort</strong> sowie einem
<a href= "https://www.linkziel.de">Link</a>.</p>
↵ ▅
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Verschachteln
<p>Dies ist ein Textabsatz mit einem<br />
<img src="bild.jpg" /><br />
einem <strong>Schlagwort</strong> sowie einem
<a href= "https://www.linkziel.de">Link</a>.</p>
↵ ▅ ↵
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Verschachteln
<p>Dies ist ein Textabsatz mit einem<br />
<img src="bild.jpg" /><br />
einem <strong>Schlagwort</strong> sowie einem
<a href= "https://www.linkziel.de">Link</a>.</p>
↵ ▅ ↵ {
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Verschachteln
<p>Dies ist ein Textabsatz mit einem<br />
<img src="bild.jpg" /><br />
einem <strong>Schlagwort</strong> sowie einem
<a href= "https://www.linkziel.de">Link</a>.</p>
↵ ▅ ↵ { {
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Verschachteln
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Container, Block, Inline
HTML Stil Ergebnis
Ein
<strong>fettes</strong>
Wort.
Inline-Tag (Zeichenstil) Ein fettes Wort.
<p>Ein
<strong>fettes</strong>
Wort in einem
Absatz.</p>
Block-Tag (Absatzstil) Ein fettes Wort in einem Absatz.
<div>
<p>Zwei
<strong>fette</strong>
Wörter…</p>
<p>…in <em>zwei</em>
Absätzen.</p>
</div>
Container (mehrere Absätze oder Blöcke)
Zwei fette Wörter…
…in zwei Absätzen.
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Inline, Block
Inhalts-Tag Beschreibung Layout-Tag Beschreibung
<p> Absatz, Fließtext <section> Abschnitt
<h1> bis <h6> Überschriften <article> Artikel
<img src=...> Bild <nav> Navigation
<a href=...> Hyperlink <header> Kopfzeile
<br /> Zeilenumbruch <footer> Fußzeile
<b>, <strong> Fettschrift <main> Hauptinhalt
<i>, <em> Kursivschrift <aside> Marginalie
<ul><li> Liste mit Bullets <div> Absatzcontainer
<audio src...> Audiodatei <span> Zeichencontainer
<video src...> Videodatei
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Inline-Tags
Das ist ein <i>kursiver</i> Text mit
<b>fetten</b> Wörtern. Es gibt
<strong>starke</strong> oder <em>betonte</em>
Auszeichnungen. Texte können
<sub>tiefgestellt</sub>,
<del>durchgestrichen</del> oder
<sup>hochgestellt</sup> sein.
Das ist ein kursiver Text mit fetten Wörtern. Es gibt auch starke oder betonte Auszeichnungen. Texte können tiefgestellt, durchgestrichen oder hochgestellt sein.
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Inhalts-Tags mit und ohne End-Tag
<h1>Haupttitel</h1>
<p>Fliesstext</p>
<img src="logo.jpg" />
<a href="https://www.uni-mainz.de/">Uni Mainz</a>
<video src="video.mp4"></video>
<audio src="audio.mp3"></audio>
<br />
<b>fett</b>, <strong>stark</strong>
<i>kursiv</i>, <em>betont</em>
Teil <span>soll verschieden formatiert</span>
werden.
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Listen
HTML Ergebnis HTML Ergebnis
<ul>
<li>Erstens</li>
<li>Zweitens</li>
<li>Drittens</li>
</ul>
• Erstens• Zweitens• Drittens
<ol>
<li>Erstens</li>
<li>Zweitens</li>
<li>Drittens</li>
</ol>
1. Erstens2. Zweitens3. Drittens
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Layoutregeln
Zeichenstile (Inline) Absatzstile (Block) Container (Block)
<b>, <strong> <p> <section>
<i>, <em> <h1> bis <h6> <article>
<img src=...> <header>
<ul><li> <main>
<footer>
<span> <div>
1. Zeichenstile gehören in Absatzstile.
2. Absatzstile gehören in Container.
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Zeichenregeln
Quelltext Ergebnis
<p>unschön</p>
<p>schön</p> schön
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
1 | HTML
Zeichenregeln
Sonderzeichen Maskierung
ä ö ü ä ö ü
Ä Ö Ü Ä Ö Ü
ß ß
– & – &
» « « »
> < ‹ ›
Sonderzeichen (ä, ö, ü, ß…) müssen maskiert werden.
Vollständige Zeichenreferenztabelle
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
2 | Semantik
Semantik
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
2 | Semantik
Definition
Semantik: Bedeutungslehre; Teilgebiet der Linguistik, das sich mit den Bedeutungen sprachlicher Zeichen und Zeichenfolgen befasst
Semantische Tags: <img>, <form>, <table>
Nicht-semantische Tags: <div>, <span>
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
2 | Semantik
Nicht-semantischer Aufbau
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
2 | Semantik
Semantischer Aufbau
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
2 | Semantik
Beispiele:
<main>: Haupt-Inhaltsabschnitt eines Dokuments
» Nur einmal in einem Dokument
» Nicht innerhalb eines anderen semantischen Tags
<article>: In sich geschlossenes Ganzes
<section>: Inhaltlicher Abschnitt, Teil eines Ganzen
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
2 | Semantik
Semantische Tags:
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
2 | Semantik
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
3 | Dateien
Dateien
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
3 | Dateien
1. Dateinamen ausschließlich klein
2. Dateinamen ohne Leerzeichen
3. Dateinamen ohne Sonderzeichen
falsch richtig
Porträt Jörg Müller.jpg joerg_mueller.jpg
Gespräch Cem Çavuşoğlu.mp3 cem_cavusoglu.mp3
DSC_8504.jpg berggipfel.jpg
Dateiregeln
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
3 | Dateien
Dateipfade
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
3 | Dateien
Dateipfade
<img src=https://www.meineseite.de/img/foto.jpg />
(absoluter URI)
foto.jpg Bild im selben Verzeichnis
/foto.jpg Bild im Stammverzeichnis
img/foto.jpg Bild im Verzeichnis img
../foto.jpg Bild ein Verzeichnis höher
../img/foto.jpg Bild ein Verzeichnis höher, im Verzeichnis img
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
3 | Dateien
Medium falsch richtig
Foto .NEFF, .RAW, .TIFF .jpg
Grafik (.jpg) .png
Transparente Grafik .jpg .png, (.gif)
Icon, Animation .jpg .gif
Ton .wav .mp3, .ogg
Video .MOV, .AVI, .wmv, .flv, .3gp .mp4
Dateiformate
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
3 | Dateien
1. Fotos: Immer auf die tatsächlich benötigte Größe skalieren
2. Audios: Immer in Webformaten speichern
3. Videos: Immer via Youtube oder Vimeo ausspielen
Datei falsch richtig
bild.jpg Maße: 4.885px × 3.664px Maße: 750px × 500px
bild.jpg Dateigröße: 27,2 MB Dateigröße: 100,7 kB
sprache.mp3 Bitrate: 320 kbps Bitrate: 128 kbps
sprache.mp3 Dateigröße: 7,8 MB Dateigröße: 3,2 MB
sprache.mp3 Kanalmodus: stereo Kanalmodus: mono
musik.mp3, atmo.mp3 Kanalmodus: mono Kanalmodus: stereo
video.mp4 <video></video> Youtube, Vimeo
Dateigrößen
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
3 | Dateien
Format falsch
.jpg > Für Web speichern, Wert: 60 (80)
.png > Für Web speichern, Wert: 3 (4)
.mp3 > Einstellungen:Abtastrate: 44,1 kHzBittiefe: 16Bitrate: 128 (192) kbps
Speichereinstellungen
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
4 | Bilder
Bilder
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
4 | Bilder
Bilder
Bilder richtig skalieren und fürs Web optimieren(Software-Tipp: Gimp – Bild exportieren > Qualität: 60-80%)Grundsatz: Kein Bild >1 MB
Dateiformate:*.jpg (*.jpeg), *.png, *.gif
*.tiff, *.eps, *.bmp, *.nef
Bilder immer in Projekt-Unterordner /img
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
4 | Bilder
Bildformate
Eigenschaft *.tiff *.jpg *.png *.gif
Anzahl Farben 16.78 Millionen 16.78 Millionen 16.78 Millionen 256
Transparent nein nein ja(Alpha-Kanal) Jein (Alpha-Bit)
Animation nein nein jein ja
Kompression nein verlustbehaftet verlustfrei verlustbehaftet
Einsatz Printprodukte Fotos Logos, Zeichnungen, Dokumente
Logos, Animationen
Webkompatibel nein ja ja ja
Bemerkungen sehr große Dateien
hohe Verbreitung
hohe Verbreitung
veraltet
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
4 | Bilder
Image-Tag (ohne End-Tag)
<img src="meinfoto.jpg" alt="Mein Foto" title=
"Dies ist mein Foto" width="525" height="350" />
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
4 | Bilder
Image-Tag (ohne End-Tag)
<img src="img/meinfoto.jpg" alt="Mein Foto" title=
"Dies ist mein Foto" width="525" height="350" />
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
5 | Links
Links
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
5 | Links
Links
Annotation, Randnote: Inkunabel, 1498
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
5 | Links
Links
Verweis: Der große Brockhaus, 1837
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
5 | Links
Links
Fuß-, Endnote: Juristische Facharbeit, 2009
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
5 | Links
Links
Tim Berners-Lee (1989)
Verknüpfung zwischen einem Begriff und einem anderen Dokument
Verknüpfung zwischen einem Begriff und einer anderen Stelle im selben Dokument
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
5 | Links
Anchor-Tag (im selben Browserfenster)
Bitte <a href="https://www.meineseite.de">hier
klicken</a>!
Bitte hier klicken!
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
5 | Links
Anchor-Tag (in einem neuen Browserfenster)
Bitte <a href="https://www.meineseite.de"
title="Dies ist meine Seite" target="_blank">
hier klicken</a>!
Bitte hier klicken!
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
6 | Audio, Video
Audio, Video
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
6 | Audio, Video
Audios
Audios richtig fürs Web optimieren(Software-Tipp: Audacity – Audio exportieren > Kompression: mp3)Grundsatz: Für Sprachaufnahmen 128 kbps (mono/joint stereo),für Atmo- und Musikaufnahmen 192 kbps stereo
Dateiformate:*.mp3, *.ogg
*.wav, *.flac
Audios immer in Projekt-Unterordner /audio
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
6 | Audio, Video
Audioformate
Eigenschaft *.wav *.mp3 *.ogg *.flac
Lizenz nein ja (Fraunhofer-Institut)
nein nein
Kompression keine verlustbehaftet verlustbehaftet verlustfrei
Webkompatibel ja ja ja nein
Bemerkungen sehr große Dateien
hohe Verbreitung
geringe Verbreitung
geringe Verbreitung
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
6 | Audio, Video
Audio-Tag
<audio controls>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
</audio>
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
6 | Audio, Video
Video-Tag
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
</video>
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
7 | Kommentare
Kommentare
Quelltext Ergebnis
<div>
<p>Zwei
<strong>fette</strong>
Wörter…</p>
<p>…in <em>zwei</em>
Absätzen.</p>
</div>
Zwei fette Wörter…
…in zwei Absätzen.
<div>
<p>Zwei
<strong>fette</strong>
Wörter…</p>
<!--<p>…in <em>zwei</em>
Absätzen.</p>-->
</div>
Zwei fette Wörter…
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
8 | Hausaufgabe
Nachschlagewerke
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
8 | Hausaufgabe
Nachschlagewerke
w3schools.com (englisch)
de.selfhtml.org (deutsch)
12. Mai 2020 | Journalistisches Seminar | B.A.-Beifach Audiovisuelles Publizieren | Johannes Gutenberg-Universität Mainz
8 | Hausaufgabe
Hausaufgabe: developer.mozilla.org
HTML – Webseiten strukturieren, Kapitel »Einführung in HTML« (ohne Aufgaben)
Eigene Onlinereportage:Video bereitstellen (Format: mp4)Titel, Lead und Text verfassen
Weiteres Material bereitstellen:Bilder? Dokumente? Illustrationen? Töne?