Interaktive Medien: DIY - Thomas Weibel · HTML 2. Semantik 3. Dateien 4. Bilder 5. Links 6. Audio,...

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


1. HTML

2. Semantik

3. Dateien

4. Bilder

5. Links

6. Audio, Video

7. Kommentare

8. Hausaufgabe

0 | Begrüssung / Agenda


1 | HTML

HTML


1. HTML: Das Chassis

2. CSS: Die Karosserie

3. Javascript: Der Motor

1 | HTML


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


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).«


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.


1 | HTML

Tags

<html>

</html>


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>


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


1 | HTML

Dokument

<!doctype html>

<html>

<head>

<title>Seitentitel</title>

</head>

<body>

<p>Dies ist ein Text.</p>

</body>

</html>

{{

Metainformationen

Sichtbarer Seiteninhalt


1 | HTML

Übung

<!doctype html>


1 | HTML

Übung

<!doctype html>

<html>

</html>


1 | HTML

Übung

<!doctype html>

<html>

<head>

<title>Meine erste Website</title>

</head>

</html>


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>


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


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.


1 | HTML

Verschachteln






1 | HTML

Verschachteln





↵


1 | HTML

Verschachteln





↵ ▅


1 | HTML

Verschachteln





↵ ▅ ↵


1 | HTML

Verschachteln





↵ ▅ ↵ {


1 | HTML

Verschachteln





↵ ▅ ↵ { {


1 | HTML

Verschachteln


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.


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


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.


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.


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


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.


1 | HTML

Zeichenregeln

Quelltext Ergebnis

<p>unschön</p>

<p>schön</p> schön


1 | HTML

Zeichenregeln

Sonderzeichen Maskierung

ä ö ü ä ö ü

Ä Ö Ü Ä Ö Ü

ß ß

– & – &

» « « »

> < &lsaquo; &rsaquo;

Sonderzeichen (ä, ö, ü, ß…) müssen maskiert werden.

Vollständige Zeichenreferenztabelle

https://wiki.selfhtml.org/wiki/Referenz:HTML/Zeichenreferenz


2 | Semantik

Semantik


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>


2 | Semantik

Nicht-semantischer Aufbau


2 | Semantik

Semantischer Aufbau


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


2 | Semantik

Semantische Tags:

<article>

<aside>

<details>

<figcaption>

<figure>

<footer>

<header>

<main>

<mark>

<nav>

<section>

<summary>

<time>


2 | Semantik


3 | Dateien

Dateien


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


3 | Dateien

Dateipfade


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


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


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


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


4 | Bilder

Bilder


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

https://gimp.org/downloads/


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


4 | Bilder

Image-Tag (ohne End-Tag)

<img src="meinfoto.jpg" alt="Mein Foto" title=

"Dies ist mein Foto" width="525" height="350" />


4 | Bilder

Image-Tag (ohne End-Tag)

<img src="img/meinfoto.jpg" alt="Mein Foto" title=

"Dies ist mein Foto" width="525" height="350" />


5 | Links

Links


5 | Links

Links

Annotation, Randnote: Inkunabel, 1498


5 | Links

Links

Verweis: Der große Brockhaus, 1837


5 | Links

Links

Fuß-, Endnote: Juristische Facharbeit, 2009


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


5 | Links

Anchor-Tag (im selben Browserfenster)

Bitte <a href="https://www.meineseite.de">hier

klicken</a>!

Bitte hier klicken!


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!


6 | Audio, Video

Audio, Video


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

https://www.audacityteam.org/download/


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


6 | Audio, Video

Audio-Tag

<audio controls>

<source src="audio.ogg" type="audio/ogg">

<source src="audio.mp3" type="audio/mpeg">

</audio>


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>

7 | Kommentare

Kommentare

Quelltext Ergebnis

<div>

<p>Zwei


Wörter…</p>

<p>…in <em>zwei</em>

Absätzen.</p>

</div>


…in zwei Absätzen.

<div>

<p>Zwei


Wörter…</p>



</div>


8 | Hausaufgabe

Nachschlagewerke


8 | Hausaufgabe

Nachschlagewerke

w3schools.com (englisch)

de.selfhtml.org (deutsch)

https://www.w3schools.com/

https://wiki.selfhtml.org/wiki/Startseite


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?

https://developer.mozilla.org/de/docs/Learn/HTML

Interaktive Medien: DIY - Thomas Weibel · HTML 2. Semantik 3. Dateien 4. Bilder 5. Links 6. Audio,...

Documents

Transcript of Interaktive Medien: DIY - Thomas Weibel · HTML 2. Semantik 3. Dateien 4. Bilder 5. Links 6. Audio,...