Text = Zahl Eine HTML-Einführung für Wissenschaftlerinnen in Geisteswissenschaften CC 4.0-BY, 2016.

Präsentation zum Thema: "Text = Zahl Eine HTML-Einführung für Wissenschaftlerinnen in Geisteswissenschaften CC 4.0-BY, 2016."—  Präsentation transkript:

1 Text = Zahl Eine HTML-Einführung für Wissenschaftlerinnen in Geisteswissenschaften CC 4.0-BY, joseph.wang@uibk.ac.at 2016

2 Allgemeine Bemerkungen Wozu erzählt er mir das? Hier das Bild „Liebesbotschaft der Delfine“.

3 Wozu gibt es diese Einführung? Es gibt genügende Einführung in HTML: o https://selfhtml.org/ https://selfhtml.org/ o http://www.w3schools.com/html/ http://www.w3schools.com/html/ Spezieller Fokus in dieser Einführung: o Wozu ist HTML gut? Wozu nicht? o Wo kommt HTML her? Wie entwickelt sie sich weiter? o Wo kann eine Geisteswissenschaftlerin HTML einsetzen?

4 Empfohlene Tools Browser o Chrome oder Firefox mit „Entwickler-Tools“ HTML- und CSS-Editor o Jetbrains Webstorm (https://www.jetbrains.com/webstorm/)https://www.jetbrains.com/webstorm/ o Sublime Text (https://www.sublimetext.com/)https://www.sublimetext.com/ o Atom Editor (https://atom.io)https://atom.io Server-Stack o Node.js (https://nodejs.org/en/)https://nodejs.org/en/

5 HTML (1): Geschichte HTML steht für Hypertext Markup Language und ist eine Daten- Sprache. Geschichtliche Entwicklung o 1969: IBM entwickelte GML (General Markup Language). Idee: Unabhängig von der Anwendung "text-lastige" Daten zu modellieren. o GML wurde 1986 zu SGML "erweitert". o 1989 entwickelte Tim Berners-Lee in CERN HTM. SGML wird stark vereinfacht und um das Feature "Verlinken" erweitert. o HTML wird im Laufe der Zeit ständig verbessert / erweitert. Die letzte Fassung: HTML 5.0, 2014.

6 HTML (2): Zweck HTML o Ursprüngliches Ziel: Wissenschaftliche Texte über das Netz zu senden, mit Verweis auf andere Texte, die im Netz verfügbar sind. o Heute: Alle möglichen Medien über Internet zu wiedergeben. Applikationsplattform für Computerprogramme o Syntax von HTML basiert auf Text HTML (im Gegensatz zu z.B. TIFF) kann von Menschen und von Maschinen gelesen werden. HTML kann man mit herkömmlichen Text-Editoren erstellen.

7 CSS: Sinn und Zweck CSS = Cascading Style Sheet o Eine Computersprache (genauer: eine Stylesheet-Sprache). o Anweisungen, wie bestimmte HTML-Elemente dargestellt / formatiert werden sollen, werden heute meistens in CSS geschrieben. o CSS findet aber auch bei anderen XML- Datenmodellierung Anwendung.

8 JavaScript (Exkurs) JavaScript ist auch bekannt unter dem Namen ECMAScript. Zweck: o HTML und CSS sind Datenmodellierungssprachen, die nur Daten festhalten. o Javascript wurde entwickelt, um Programme im Browser auch ausführen zu können. Anfangs wird JS eingesetzt, um Webseiten dynamischer zu gestalten. Heute wird JS eingesetzt, um aus Browser gar eine Applikationsplattform zu machen.

9 Bedenkenswert… Wie mächtig ist HTML? o Kann ich meine Seminararbeit in HTML schreiben? o Ist sie eine Programmier-Sprache? o Kann man wirklich ALLES mit HTML darstellen? Was kann man aus der Entwicklung von HTML lernen?

10 HTML Was ist davon heute übrig geblieben?

11 XML XML = Extensible Markup Language o Eigentlicher Nachfolger von SGML, standardisiert im Jahre 1999. o Eliminiert einige Probleme in SGML, Datenmodell basiert nun auf Bäumen. o HTML hat(te) einen Ableger in XML: XHTML o XML ist heute die wichtigste Datensprache. o Heute löst JSON (Javascript Object Notation) in einigen Bereichen XML als Daten- Austauschformat ab.

12 XML-Struktur Ein XML-Dokument o fängt mit dem xml-prologue an: o hat genau ein XML-Element als Inhalt. o kann zusätzlich noch XML-Comments und XML- Processing-Instructions beinhalten. Ein XML-Element o hat ein Start- und ein Endtag, o kann Attribute im Starttag tragen, o kann weitere Elemente und Texte beinhalten. o Wichtig: Bevor das nächste Element anfängt, muss das vorige abgeschlossen sein. Keine überlappende Elemente!

13 Element? Attribute? Text? Element o Kann Attribut, andere Elemente und/oder Text beinhalten. o Start mittels Start-Tag:, ended mittels End-Tag o Kurzschreibweise: Attribute o Besteht aus einem Key (lang) und einem Value ("en"). o Steht im Start-Tag von Elementen. Ein Element kann beliebige Anzahl von Attributes beinhalten, die alle unterschiedlichen Keys haben müssen. o Kurzschreibweise: @attributName Text o Normaler Text mit einigen Besonderheiten o Alle aneinanderreihenden Leerzeichen (inkl. Neue-Zeile und Tabulator) zählen als ein Leerzeichen. o Entities: < = < & = & etc..

14 XML Namespace (Exkurs) Ausgangspunkt: o Man kann mehrere XML-Daten miteinander kombinieren. So kann man in einer HTML-Seite SVG-Graphiken einbinden. o Unterschiedliche XML-Vokabel können aber den gleichen Namen (localname) haben. in HTML bezeichnet den Titel einer Seite. in SVG bezeichnet den Titel eines Graphen. Der Namensraum (namespace) in XML dient der Unterscheidung der unterschiedlichen Vokabeln. o Ein Element, das @xmlns trägt, nennt seinen Namensraum. Wert von @xmlns soll ein URI sein. o Alle seiner Nachfahren sind demselben Namensraum zugeordnet, es sei denn, sie haben ein anderes @xmlns zugewiesen bekommen. Namensraum für HTML o

15 HTTP (Exkurs) HTTP steht für Hypertext Transfer Protocol o Es ist das Protokoll, mit dem HTML-Daten, aber auch andere Inhalte, über Internet verschickt werden. Es gibt auch andere Protokolle im Internet: z.B. SMTP zum Verschicken von Emails, FTP für Datei-Operationen. o Der Client startet ein „HTTP-Request“, und der Server antwortet mit „HTTP-Response“.

16 URL URL = Universal Resource Locator. o URLs beschreiben, wie auf bestimmte Daten zugegriffen werden kann. o URL "http://www.uibk.ac.at/index.html.de" = 1. Protokoll: HTTP 2. Server: www.uibk.ac.at 3. Pfad: /index.html.de o Kommen Zeichen in URL vor, die in URL eine besondere Bedeutung haben oder nicht in ASCII vorkommen, werden diese url-enkodiert. Statt Ä: %C3%84

17 Kritik an HTML HTML bietet zu wenige Funktionen o HTML modelliert eine Papier-Seite (oder eher: eine Schriftrolle). Aber wir brauchen auch Navigationsleiste, AV-Medien und andere Elemente, die in Schriftrollen nicht auftauchen. HTML ist inkonsistent o kann man verschachteln, und nicht. o dient(e) sowohl der Darstellung von Tabellen als auch der tabellarischen Layout. HTML (bzw. HTTP, Browser) ist ein Sicherheitsrisiko.

18 und und HTML-Daten startet mit o (Zeigt an, dass ein HTML Dokument startet) o ist das Root-Element eines HTML- Dokuments. o hat @lang: Sprache Header-Daten Eigentliche Seite

19 <head> wird nicht dargestellt o Titel der Seite, wird an der Titelleiste dargestellt o Angabe von Metadaten o Angabe von verlinkten Dateien, meist CSS- Dateien o Skript-Anweisungen. Kann auch in vorkommen.

20 <body> In wird die eigentliche Seite kodiert. o Kann eine Vielzahl von Elementen und Texten beinhalten, die v.a. dazu dienen, Inhalte der Seite darzustellen. o Alles Text in Body wird dargestellt, außer er steht in einem Element, das versteckt / verdeckt wird.

21 Strukturierung vom Text Generell: Überschriften:... Absatz: Listen: oder mit Tabelle: Einbindung von Bildern: Link: Hervorgehobener Text:

22 Formulare HTML bietet auch Elemente für HTML-Formulare o o mit o

23 HTML5 Elemente HTML5 führt weitere Elemente ein, die Struktur einer Webseite noch besser beschreiben: o : Navigationsleiste o,,, : Diese Elemente werden wie dargestellt, haben aber mehr semantischen Gehalt als.

24 Hand anlegen Websites anschauen o W3C HTML Spezifikation o Website für ein kleines Restaurant in Innsbruck o Facebook Eine Webseite erstellen o aus eigener Seminararbeiten o aus vorhandenen Seiten

25 Allgemeine Attribute Allgemeine Attribute kommen (fast) überall vor: o @id: eine eindeutige Bezeichnung für das Element, zwei Elemente auf derselben Seite dürfen nicht die gleiche @id haben. o @style:

26 HTML Element HTML Element steht für "anchor" o @href: Wohin wird verlinkt? o @name: Name von diesem Ankerpunkt. Hierher darf verlinkt werden o @target: Wo soll die Seite angezeigt werden. _self: Auf der selben Seite _blank: Auf einer neuen Seite name: Auf der Seite mit dem Namen "name".

27 CSS Ich weiß zwar wie, aber nicht was ich formatiere…

28 Syntax (1) HTML-Elementen kann man mittels CSS-Regeln formatieren. Eine CSS-Regel besteht aus zwei Teilen: o Name: z.B. "font-size" oder "text-align" o Wert: z.B. "16px" oder "center" o Schreibweise: Name: Wert Mehrere CSS-Regel können – mittels ";" voneinander getrennt – zusammengefasst werden. o Z.B.: "font-size: 16px; text-align: center"

29 Syntax (2) Zuweisung von CSS-Regeln an einem HTML-Element: o Mittels @style: blah... Man kann mehreren Elementen mittels Selector "zentral" formatieren. o Methode 1: In die CSS-Anweisungen mit vorangestelltem Selektor: em {font-weight:bold} o Methode 2: Die CSS-Anweisungen in einer separaten Datei festhalten und in einbinden:

30 Selektor-Syntax Syntax o selector {CSS-Regel21; CSS-Regel 2} Selector o Wahl aller Elemente: "*" o Wahl aller Elemente mit dem Namen p: "p" o Wahl aller Elemente mit @class="mass": ".mass" o Wahl des Elements mit @id="mele": #mele o Mit Leerzeichen kann man Selektoren aneinander reihen: div p = Wahl aller p die innerhalb von div stehen.

31 Überschreibungen Wenn mehrere CSS-Regeln zutreffen: o Je präziser ein Selektor auf das Element zutrifft, umso wichtiger wird er: @style überschreibt alle Regeln #id ist wichtiger als.class.class ist wichtiger als ist wichtiger als o Spätere Regel überschreiben frühere. o Mit "important!" hinter dem Regel kann die Überschreibung verhindert werden "font-size: 1em important!" wird von keinem Regel ohne "important!" überschrieben. Dies ist allerdings schlechte Praxis!

32 Längen-Angaben Absolute Längenangaben o cm, mm o pt: 1 pt = 1/12 Zoll o px: 1 Pixel, abhängig vom Bildschirm bzw. Drucker. Relative Längenangaben o ch, em, ex: Angaben relativ zu Font-Größe o rem: Angabe relativ zu Wurzel-Element-Font-Größe Im Prinzip: Relative Angaben sind besser für Webseiten. Absolute Angaben sind besser für

33 Box-Modell Jedes Element ist aus CSS-Sicht eine Box: o margin (Außenabstand) o border (Rand) o padding (Innenabstand) o width (Breite) o height (Höhe)

34 CSS für unterschiedliche Medien CSS für unterschiedliche Medien / Fensterbreite o Voraussetzung: o Regeln: @media @media print { … }: Zusätzliche CSS für Printmedien @media (max-width: 1200px): Zusätzliche CSS für Fenster mit über 1200px Breite.

35 CSS Präprozessor (Exkurs) CSS ist schwer zu pflegen… o "Wo habe ich diesen Regel hingeschrieben?" o "Wenn ich den Regel für ändere, muss ich auch die Regeln für ändern?" o "Ich will die Farbschema ändern…" CSS-Präprozessoren: LESS (http://lesscss.org/)http://lesscss.org/ SASS (http://sass-lang.com/)http://sass-lang.com/ o In LESS und SASS kann man CSS-Blöcke verschachteln, Längen berechnen lassen und Variable für CSS- Konstanten verwenden.

36 CSS-Frameworks (Exkurs) Sinn o Frameworks liefern einige Funktionalitäten bereit, die von vielen Webseiten benötigt werden aber schwer zu schreiben sind. o Z.B.: Responsive Webseiten. Seiten, die ihre Inhalte der Fenster-Größe entsprechend platzieren. Beispiele für CSS-Frameworks o Twitter Bootstrap (http://getbootstrap.com/)http://getbootstrap.com/ o Zurb Foundation (http://foundation.zurb.com/)http://foundation.zurb.com/

37 Und jetzt? "Wie geht es jetzt weiter? Wohin sollen wir gehen?"

38 Zum Nachdenken… Fragen: o Wozu ist HTML gut? Wozu nicht? o Wo kann eine Geisteswissenschaftlerin HTML einsetzen? o Wie kann man HTML missbrauchen?

39 Zum Weiterlernen Web-Technologien: o HTML5 o Web-Design o JavaScript o Server-Stack Digitale Geisteswissenschaften o Text Encoding Initiative Guideline o XML-Technologien (XPath, XQuery, XSLT) o Semantic Web o Library Information System und Authority Files

40 Literatur und Weblinks Buch Website o SelfHTML (http://selfhtml.org/)http://selfhtml.org/ Video o Crockford on Javascript: Episode IV: The Metamorphosis of AJAX https://www.youtube.com/watch?v=Fv9qT9joc0 M https://www.youtube.com/watch?v=Fv9qT9joc0 M