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

1. HTML: Das Chassis

2. CSS: Die Karosserie

3. Javascript: Der Motor

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

<html>

</html>

1 | HTML

<h1>Dies ist ein Titel</h1>

<p>Dies ist ein Fließtext</p>

<p>Dieses Wort ist <strong>fett</strong></p>

<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>

</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>

<title>Meine erste Website</title>

</head>

<body>

<h1>Mein Titel</h1>

</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 />

einem <strong>Schlagwort</strong> sowie einem

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

Verschachteln

1 | HTML

Container, Block, Inline

HTML Stil Ergebnis

<strong>fettes</strong>

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.

<p>Zwei

<strong>fette</strong>

Wörter…</p>

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>

<a href="https://www.uni-mainz.de/">Uni Mainz</a>

<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

<li>Erstens</li>

<li>Zweitens</li>

<li>Drittens</li>

• Erstens• Zweitens• Drittens

<li>Erstens</li>

<li>Zweitens</li>

<li>Drittens</li>

1. Erstens2. Zweitens3. Drittens

1 | HTML

Layoutregeln

Zeichenstile (Inline) Absatzstile (Block) Container (Block)

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

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:

<aside>

<main>

<mark>

<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

(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

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

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

Annotation, Randnote: Inkunabel, 1498

5 | Links

Verweis: Der große Brockhaus, 1837

5 | Links

Fuß-, Endnote: Juristische Facharbeit, 2009

5 | 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

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

6 | Audio, Video

Audio-Tag

</audio>

6 | Audio, Video

Video-Tag

</video>

7 | Kommentare

Kommentare

Quelltext Ergebnis

<p>Zwei

Wörter…</p>

Absätzen.</p>

</div>

…in zwei Absätzen.

<p>Zwei

Wörter…</p>

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

Absätzen.</p>-->

</div>

8 | Hausaufgabe

Nachschlagewerke

8 | Hausaufgabe

Nachschlagewerke

w3schools.com (englisch)

de.selfhtml.org (deutsch)

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?

interaktive medien: diy - thomas weibel · html 2. semantik 3. dateien 4. bilder 5. links 6. audio,...

Documents

siebel interface erminology ook-up nglish erman ·...

freitag, den 20.4. hausaufgabe für montag den 23.4. unit 10...

analyse des filmes fight club. einleitung plot plothauptteil...

kommentare zum vorlesungsangebot · 2019-04-04 · the...

consulting · 2018. 4. 16. · september 2015 m2 kommentare...

wilfried huchzermeyer sri aurobindos kommentare zu krishna...

swiss public health conference 2017...

testex rundtest stoffeigenschaften fabric … ·...

guten tag! montag den 07.10 hausaufgabe für dienstag den...

montag, den 23.4. hausaufgabe für dienstag den 24.4. keine...

selbst - und fremdverständnishg0069/th.pdf · miriam js...

guten tag! mittwoch den 4.12. hausaufgabe für freitag den...

guten tag! freitag, den 15.11. hausaufgabe für monstag den...

programmfreitag 9. september 2016 uhrzeit anreise 15.00 -...

the effect of mergers kommentare welzelthe empirical...

ladm / interlis 13.6 · 2018-05-08 · curso ladm /...

management-institut dr. a. kitzmann...

montag den 2.2. hausaufgabe für dienstag den 3.2. lb...

swissmedic journal 03-2006 · zeit referat/thema...

saa s ecosystem-roadshow begrüssung köln