Hochschule Darmstadt Fachbereich Informatik
|
|
|
- Valentin Straub
- vor 6 Jahren
- Abrufe
Transkript
1 Hochschule Darmstadt Fachbereich Informatik Entwicklung webbasierter Anwendungen 1 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
2 Hochschule Darmstadt Fachbereich Informatik Wiederholung 2 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
3 Marktanteile und Trend der Web-browser mobile / responsive Source: svg/600px-usage_share_of_web_browsers_%28source_statcounter%29.svg.png 3 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
4 1.2 Ergonomie für webbasierte Anwendungen In Deutschland Barrierefreie Webseiten gilt die BITV (Barrierefreie Informationstechnik-Verordnung) Webseiten sollen auch für Menschen mit einer Behinderung zugänglich sein Sehschwächen (z.b. Rot-Grün-Blindheit) aber auch Hör-, Lern-, Lese-, motorische Schwächen uvm. insbesondere soll eine Webseite vorgelesen werden können - Screenreader lesen die Seite mit Text2Speech vor - Braille-Zeilen geben Blindenschrift zeilenweise aus - Tabellen werden von links nach rechts und von oben nach unten gelesen - Bilder und Videos sind als solche nicht darstellbar - Der Inhalt muss logisch gruppiert und angeordnet sein und nicht nach der Anordnung auf dem Bildschirm Textausgabe mit Braille-Zeile Bild: SBV Die Bedienung muss mit vereinfachten Tastaturen möglich sein 4 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
5 HTML5 und ordentlicher Code HTML5 wurde abwärtskompatibel und browserfreundlich definiert für viele Sprachkonstrukte, die unter HTML4 einen Fehler erzeugten, ist jetzt das Browserverhalten definiert und es sind keine Fehler mehr - viele fehlende Tags werden automatisch erkannt - schließende Tags können oft weggelassen werden - Groß/Kleinschreibung der Tags ist nicht festgelegt usw. Praktische Konsequenzen - Code der gegen viele Regeln eines sauberen Entwurfs verstößt, kann trotzdem HTML5-konform sein - um HTML5-Code auf einen ordentlichen Stil zu überprüfen, reicht der normale Konformitätscheck (HTML-Validator) nicht mehr aus Lösung - HTML5 sollte in professionellen Projekten zusätzlich mit einem statischen Code-Analyse-Tool auf die Einhaltung von Implementierungsrichtlinien geprüft werden (vgl. Lint für C++) 5 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
6 Hochschule Darmstadt Fachbereich Informatik HTML Grundlagen 6 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
7 1. Einleitung Einsatz der Technologien im Zusammenhang Es ist enorm wichtig zu verstehen, welche Inhalte in welchem Kontext erzeugt werden! Webclient Webserver PHP HTML Seite (Eingabe- Formular) 1.Eingabe übermitteln PHP-Datei 2.PHP-Script ausführen HTML Seite (Ausgabe) 4. Ausgabe übermitteln HTML Seite (evtl. mit Script-Anteil) 3. erzeugte HTML-Seite DB HTML CSS ECMA-Script DOM AJAX HTTP Server-Konfiguration CGI PHP MySQL 7 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
8 Tags & Attribute Source: 8 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
9 Grundgerüst einer (ordentlichen) HTML5-Datei <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>text des Titels</title> </head> <body> <p>eigentlicher Inhalt</p> </body> </html> Dokumenttyp Zeichensatz Titel für Browserfenster 9 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
10 Schreibregeln Leerzeichen, Tabulator und Zeilenvorschub sind Trenner Anzahl spielt keine Rolle, außer in Attributwerten Ausnahme: in <pre> Abschnitten (=preformatted) Einrückung dient nur der Lesbarkeit wird vom Browser ignoriert Kommentare <!-- das ist ein Kommentar --> Sonderzeichen und Umlaute können kodiert werden < < > > & & " " ä ä Ä Ä ö ö Ö Ö ü ü Ü Ü ß ß 10 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
11 Tags (Marken) und Attribute Tags (Marken) markieren Abschnitte im Text Tag-Name steht in spitzen Klammern gleicher Name für öffnendes und schließendes Tag schließendes Tag kenntlich an zusätzlichem / Der Name des Tags wird kleingeschrieben <h2>willkommen in unserem Hotel</h2> öffnende Tags können zusätzliche Attribute enthalten Nice HTML Attribute haben einen Namen und in der Regel einen Wert Attributwerte werden in Anführungszeichen geschrieben <h2 id="hallo">willkommen in unserem Hotel</h2> mit Tags markierte Abschnitte können verschachtelt sein <h2><em>willkommen</em> in unserem Hotel</h2> Nice HTML 11 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
12 Sonderfall Standalone-Tags es gibt einige wenige "Standalone-Tags" leere Elemente = Abschnitte ohne Inhalt werden durch einen / vor der schließenden Klammer des öffnenden Tags hervorgehoben Willkommen <br /> auf unserer Homepage Nice HTML oder <meta charset="utf-8" /> alternative Schreibweisen (HTML5) <br> oder <br></br> 12 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
13 Strukturierung von Text Überschriften <h1> <h6> Abschnitte <p>textabsatz <div> Überschrift der höchsten Gliederungsebene Überschrift der niedrigsten Gliederungsebene allgemeiner Block <span> Inline-Element Aufzählungen (nummeriert oder auch nicht) <ol>, <ul>, <li> Zeilenumbruch erzwingen und verhindern <br /> expliziter Zeilenumbruch (standalone tag) kein Block geschütztes Leerzeichen verhindert Zeilenumbruch kein Block soft hyphen Bindestrich bei Bedarf alle außer <span> und <br /> erzeugen einen Block heading1 heading6 div = division = Bereich "Aufhänger" für CSS ordered list, unordered list, list item z.b. 3. Kapitel 13 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
14 Strukturierung von Webseiten Der Text innerhalb des <body>-tags kann gegliedert werden <section> Abschnitt - ein logischer Bereich einer Webseite (z.b. der News Bereich) <article> Artikel ein Textabschnitt, der eigenständig einen Inhalt abdeckt (z.b. eine einzelne News) <section>s und <article>s haben eine Überschrift (<h2>...<h6>)! <body> kann mehrere <section>s und <article>s enthalten auch verschachtelt <nav> Navigationsbereich enthält Verknüpfungen zur Navigation <header> und <footer> Kopf- / Fußzeilenbereich ein Bereich mit Überschriften bzw. Logos, Datum usw. für das Gesamtdokument (im <body>) oder <section>s und <article>s <aside> Blöcke an der Seite z.b. für Seitenleisten (außer Navigation), Zitate, Anmerkungen 14 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
15 Strukturierung von Webseiten am Beispiel body heading der section (<h2>) section heading von body section nav heading des article (<h3>) article heading des article (<h3>) article article footer von section footer (von body) 15 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
16 Welches Strukturelement ist das Richtige? Hauptnavigation? ja nav Separierbar? ja article Widget, Blog-/Forumseintrag, Kommentar, Notwendig nein aside Werbung, Glossar, Überschrift sinnvoll? ja section Seitenabschnitt, Kapitel eines Artikels Irgendeine Bedeutung? ja p, address, div Quelle: 16 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
17 Vergleich HTML4 und HTML5 HTML4 HTML5 Quelle: 17 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
18 Universalattribute können zu jedem Tag hinzugefügt werden id dateiweit eindeutiger Bezeichner für Scripte class Name der zugehörigen Style Sheet Klasse title Erläuterung zum Element, erscheint als Tooltip style eingebettete Style Sheet Attribute (siehe CSS) lang, dir Landessprache und Textlaufrichtung 18 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
19 Weitere HTML5-Attribute Oft genutzt: das data-* attribut, um eigene Datentypen zu generieren mit einem Namen ohne Großbuchstaben Bsp.: data-preis, data-key, data-xxx In HTML oder auch über das DOM Wird wichtig, wenn man z.b. HTML Daten per JavaScript auslesen möchte Pizza-Service Beispiel: 19 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
20 Logische Formatierung markiert Bedeutung von Textabschnitten macht keine Aussage über visuelles Erscheinungsbild das wird erst per CSS definiert für Sprachausgabe muss stattdessen das akustische Erscheinungsbild definiert werden... ein paar Beispiele: <em> emphatisch (betont) <strong> <samp> <dfn> <cite> Beispiel stark betont Definition inline-zitat (z.b. für Eigennamen; oft kursiv) <q cite="url"> Zitat mit Quellenangabe <blockquote> Zitat als Block gesetzt Block 20 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
21 Grenzfall: physische Formatierung definiert das visuelle Erscheinungsbild nicht verpönt, aber besser zu vermeiden es gibt oft andere Tags mit einer echten Bedeutung! ein paar Beispiele: <b> fette Schrift (bold) <i> kursive Schrift (italic) <sup> <sub> <pre> Schrift hochgestellt Schrift tiefgestellt vorformatierter Text (nur für Quellcode) Block 21 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
22 Struktur einer Tabelle (1) Grundidee: <table> <tr> <th> </th> <th> </th> <th> </th> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> nach S. Münz: SELFHTML 22 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
23 Struktur einer Tabelle (2) <table> nur zur Darstellung tabellarischer Daten Tabellen-Überschrift <caption>meine Tabelle</caption> <tr> zeilenweise (tr = table row) <th>kopfzelle: 1. Zeile, 1. Spalte</th> <th>kopfzelle: 1. Zeile, 2. Spalte</th> </tr> <tr> <td>datenzelle: 2. Zeile, 1. Spalte</td> <td>datenzelle: 2. Zeile, 2. Spalte</td> </tr> <tr> <td>datenzelle: 3. Zeile, 1. Spalte</td> <td>datenzelle: 3. Zeile, 2. Spalte</td> </tr> </table> beliebig viele Zeilen und Spalten 23 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
24 Struktur einer Tabelle (3) Spaltenbreite definieren falls der Browser die Spaltenbreite nicht automatisch bestimmen soll, kann über CSS die Breite festgelegt werden Zellen verbinden Spalten verbinden <td colspan="3">...</td> Zeilen verbinden <td rowspan="2">...</td> 24 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
25 Grafiken einbinden Das <img>-tag erlaubt das Einbinden von Bildern für Bilddateien der Formate GIF, PNG, JPG und seit HTML5 SVG notwendige Attribute: src Quelldatei alt Ersatztext, der ausgegeben wird, wenn die Grafik nicht angezeigt werden kann (Screenreader, Ladeprobleme) Dient die Grafik nur zur Veranschaulichung (z.b. Bild einer Pizza neben dem Namen der Pizza) wird alt="" gesetzt optionale Attribute width, height Breite und Höhe in Pixeln title Text, der als Tooltip angezeigt wird standalone tag Beispiel <img src="bilder/pizzasalami.gif" width="250" height="250" alt="" title="salami Pizza" /> 25 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
26 Bilddateien GIF oder PNG für Grafiken (z.b. Screenshots, ClipArts) GIF: 256 Farben Palette, komprimiert Nun: PNG: komprimiert, verlustfrei Freistellen (transparenter Hintergrund) möglich JPEG für Fotos Echtfarben, komprimiert, verlustbehaftet Freistellen nur bei PNG SVG (Scalable Vector Graphics) für technische Zeichnungen XML-basiertes Format für 2D-Vektorgrafiken ohne Qualitätsverlust skalierbar Möglichkeiten zur Speicherplatzersparnis Hintergrund mit kleiner Grafik "kacheln" Größe und Farbtiefe reduzieren Beschränkung auf wenige Grafiken Per JavaScript gezeichnete Grafiken mit <canvas> Hauptproblem Übertragungszeit! 26 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
27 Audio und Video Audio und Video gehören erst seit HTML5 zum Standard Vor HTML5 waren Multimediadateien nur über Plugins (z.b. FlashPlayer) abspielbar (und die Plugins waren nicht betriebssystemübergreifend verfügbar) Seit HTML5 gibt es "nur noch" Uneinigkeit über die vom Browser zu unterstützenden Formate (wegen Lizenzrechten) Damit die AV-Datei von allen Browsern abgespielt wird, müssen derzeit 2 Formate bereitgestellt werden - mp3 und ogg für Audio bzw. ogv und mp4 für Video <audio autoplay controls> <source src="myaudio.mp3" /> <source src="myaudio.ogg" /> Der Browser wählt </audio> ein Format, das er <video width="320" height="240" poster="bild.jpg" controls autoplay> unterstützt! <source src="myvideo.mp4" /> <source src="myvideo.ogv" /> Ihr Browser unterstützt leider kein Video-Tag </video> Abspielen erfolgt im "streaming mode" wegen der Übertragungszeit 27 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
28 Meta-Angaben Anweisungen für WWW-Server, WWW-Browser und automatische Suchprogramme ("Robots") eine kleine Auswahl von Meta-Angaben: <meta name="description" content="autovermietung" /> <meta name="author" content="b. Kreling" /> <meta name="keywords" content="hotel,urlaub,meer" /> <meta name="robots" content="noindex" /> <meta name="date" content=" " /> <meta name="language" content="de" /> <meta http-equiv="refresh" content="5"> Setzen des verwendeten Zeichensatzes <meta charset="utf-8"> lädt die aktuelle Seite nach 5 Sekunden erneut 28 Entwicklung webbasierter Anwendungen, SS 2016, Christopher Dörge / David Müller / Thomas Sauer
Hochschule Darmstadt Fachbereich Informatik. Entwicklung webbasierter Anwendungen
Hochschule Darmstadt Fachbereich Informatik Entwicklung webbasierter Anwendungen 1 Entwicklung webbasierter Anwendungen, WS 2016/2017, Stefan Zander / Thomas Sauer / Maximilian Madl 14.10.2017 Hochschule
Hochschule Darmstadt Fachbereich Informatik
Hochschule Darmstadt Fachbereich Informatik Entwicklung webbasierter Anwendungen 1 Entwicklung webbasierter Anwendungen, WS2015/2016, Christopher Dörge / David Müller 19.10.2015 Hochschule Darmstadt Fachbereich
Übung zur Vorlesung Digitale Medien. Hanna Schneider Ludwig-Maximilians-Universität München Wintersemester 2014/2015
Übung zur Vorlesung Digitale Medien Hanna Schneider Ludwig-Maximilians-Universität München Wintersemester 2014/2015 1 Hyper Text Markup Language Beschreibungssprache von WWW-Seiten: Enthält die Struktur
Hochschule Darmstadt Fachbereich Informatik
Hochschule Darmstadt Fachbereich Informatik Entwicklung webbasierter Anwendungen 1 Entwicklung webbasierter Anwendungen, SS2016, Christopher Dörge / David Müller / Thomas Sauer 19.04.2016 Hochschule Darmstadt
Hochschule Darmstadt Fachbereich Informatik
Hochschule Darmstadt Fachbereich Informatik Entwicklung webbasierter Anwendungen 1 Entwicklung webbasierter Anwendungen, WS2015/2016, Christopher Dörge / David Müller 20.10.2015 Hochschule Darmstadt Fachbereich
Hochschule Darmstadt Fachbereich Informatik. Entwicklung webbasierter Anwendungen
Hochschule Darmstadt Fachbereich Informatik Entwicklung webbasierter Anwendungen 1 Entwicklung webbasierter Anwendungen, WS2016/2017, Stefan Zander / Thomas Sauer / Maximilian Madl 07.10.2016 Hochschule
12. Jgst. 3. Kursarbeit Datum: Fach: Informationsverarbeitung (Leistungskurs) & )!!*+,!- -.!-
12. Jgst. 3. Kursarbeit Datum: 26.03.2007 Klasse: GY 05 c Fach: Informationsverarbeitung (Leistungskurs) Themen: XHTML; CSS Name: Bitte speichern Sie Ihre Ergebnisse regelmäßig. Punkte:!" # Note: 8 $ %!&'(
Übung zur Vorlesung. Digitale Medien. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid, Hanna Schneider
Übung zur Vorlesung Digitale Medien Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid, Hanna Schneider Wintersemester 2015/16 Hyper Text Markup Language Beschreibungssprache von WWW-Seiten: Enthält
Digitale Medien. Übung zur Vorlesung. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid
Übung zur Vorlesung Digitale Medien Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid Wintersemester 2016/17 Hyper Text Markup Language Beschreibungssprache von WWW-Seiten: Enthält die Struktur eines
Inhaltsverzeichnis. Florian Bauer HTML Seite 2 von 10
HTML Inhaltsverzeichnis HTML Grundlagen... 3 Was ist HTML... 3 URL... 3 HTTP... 3 WWW Funktionsweise... 3 HTML Grundgerüst... 4 Grobes Grundgerüst... 4 Feines Grundgerüst... 4 HTML-Elemente... 5 Tags...
1 Einführung Die Sprachen HTML und XHTML Struktur einer HTML Seite Webseiten speichern... 2
HTML GRUNDLAGEN 1 Einführung.. 1 2 Die Sprachen HTML und XHTML. 1 3 Struktur einer HTML Seite 1 4 Webseiten speichern.. 2 5 Elemente für die Seitenstruktur 2 6 Seiten und Inhalte verlinken. 4 7 Sonderzeichen
Hochschule Darmstadt Fachbereich Informatik. Hochschule Darmstadt Fachbereich Informatik. Entwicklung webbasierter Anwendungen. 1.
Hochschule Darmstadt Fachbereich Informatik Hochschule Darmstadt Fachbereich Informatik Entwicklung webbasierter Anwendungen 1. Einleitung 1 2 1. Einleitung Zielsetzung 1. Einleitung Aufgabe im Praktikum:
Digitale Medien. Übung
Digitale Medien Übung HTML Heute Hyper Text Markup Language Beschreibungssprache von WWW-Seiten: Enthält die Struktur eines Dokuments und teilweise die Darstellung. ich bin eine Überschrift
Kennen, können, beherrschen lernen was gebraucht wird
Inhaltsverzeichnis Inhaltsverzeichnis... 1 Tags (Befehle)... 1 Erste Texte im Browser... 2 Das HTML Grundgerüst... 2 Ihre erste echte Webseite... 2 Texte... 3 Textabsatz und Zeilenumbruch... 3 Einen Zeilenumbruch
Seminar DWMX DW Session 002
Seminar DWMX 2004 DW Session 002 Mit Dreamweaver starten (1) Coder oder Designer eine Frage der Einstellung Bearbeiten/Voreinstellungen Kategorie Allgemein Arbeitsbereich ändern Bedienfelder und Bedienfeldgruppen
Webdesign-Multimedia HTML und CSS
Webdesign-Multimedia HTML und CSS Thomas Mohr 1 HTML 1.1 Was ist HTML? HTML steht für Hypertext Markup Language und ist eine Auszeichnungssprache zur Strukturierung digitaler Dokumente. HTML-Dokumente
HTML. HyperText Markup Language. von Nico Merzbach
HTML HyperText Markup Language von Nico Merzbach Kapitel 1 Was ist HTML? Was ist HTML? Einführung: HTML ist eine (Hypertext-)Auszeichnungssprache. Mit Hilfe von HTML strukturiert man Inhalte wie Text,
Inhaltsverzeichnis. jetzt lerne ich. Willkommen 13
Inhaltsverzeichnis jetzt lerne ich Willkommen 13 1 Einstieg Nützliche Hintergründe zum Einlesen 15 1.1 Warum eigentlich noch HTML lernen? 16 1.1.1 Eigene Webdokumente per Hand schreiben 16 1.1.2 HTML-Code
Die Programmiersprache des Webs. HTML HyperText Markup Language Hypertext - Auszeichnungssprache
Was ist HTML? Die Programmiersprache des Webs HTML HyperText Markup Language Hypertext - Auszeichnungssprache Dateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie
Computergrundlagen HTML Hypertext Markup Language
Computergrundlagen HTML Hypertext Markup Language Axel Arnold Institut für Computerphysik Universität Stuttgart Wintersemester 2014/15 Ausgabemedien und Beschreibungssprachen Papier: L A T E X feste Seitengröße
HTML und CSS. Eine kurze Einführung
HTML und CSS Eine kurze Einführung Begriff Markup Begriff aus Druckindustrie: Layouter fügt Anmerkungen/Markierungen (Tags) hinzu Markup-Languge (ML) = Auszeichnungssprache Beispiele a) das Wort wird fett
Einführung in HTML. Hui Dai
Einführung in HTML Hui Dai Grundgerüst einer HTML-Datei HTML-Dateien bestehen aus Text. Der Inhalt von HTML-Dateien steht in HTML-Elementen. HTML-Elemente werden durch so genannte Tags markiert. Fast alle
1 HTML - Einstieg und Hintergrund 13 ) 1.1 Wer braucht eigentlich noch HTML? Hintergrundwissen zu HTML 17
Inhaltsverzeichnis 1 HTML - Einstieg und Hintergrund 13 ) 1.1 Wer braucht eigentlich noch HTML? 13 1.2 Hintergrundwissen zu HTML 17 1.2.1 Die Entwicklung von HTML 17 1.2.2 Der Umstieg von HTML4 zu HTML5
XML light. XML bearbeiten. Jörn Clausen
XML light XML bearbeiten Jörn Clausen joern@techfak.uni-bielefeld.de Übersicht Formen von XML Nutzen von Grammatiken XML-Mode des Emacs Beispiel-Sprache: XHTML XML light XML bearbeiten 2/25 Daten Daten?
Erste Schritte mit XHTML
Sascha Frank SS 2005 www.saschafrank.de 3.3.05 Eigene Homepage Rechte am $HOME ändern Eigene Homepage Rechte am $HOME ändern chmod 701 /home/login Eigene Homepage Rechte am $HOME ändern chmod 701
Web-basierte Anwendungssysteme XHTML-Tabellen und Bilder
Web-basierte Anwendungssysteme XHTML-Tabellen und Bilder Prof. Dr. Sergej Alekseev (alekseev@fb2.fra-uas.de) Prof. Dr. Armin Lehmann (lehmann@e-technik.org) Fachbereich 2 Informatik und Ingenieurwissenschaften
XHTML und CSS. Marco Skulschus Daniel Winter Alexander Muß
XHTML und CSS Marco Skulschus Daniel Winter Alexander Muß 1 2 XHTML und CSS Marco Skulschus Daniel Winter Alexander Muß Webseite zum Buch: www.comelio-medien.com/dedi3_568.php 2008 Comelio Medien 3 Alle
Übung: Bootstrap - Navbar
Übung: Bootstrap - Navbar Angaben befinden sich im Ordner: 5_Übung_nav. Darin befinden sich die Bootstrap-Ordner und die dazu passende index.html, die bereits die Links zu den Ordnern enthält. Aufgabe:
Grundlagen zu HTML. Vortrag im Rahmen der BTK-Vorlesung von Herrn Professor Kärger
Grundlagen zu HTML Vortrag im Rahmen der BTK-Vorlesung von Herrn Professor Kärger Folie: 1 Gliederung Folie: 2 Was ist HTML Die Sprache HTML Aufbau von HTML-Tags Das HTML-Grundgerüst Hintergrundformatierungen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd">
HTML Theoriefragen 1. Wofür steht die Abkürzung HTML? 2. Warum ist HTML keine Programmier sprache? 3. Wofür steht die Abkürzung DTD? 4. Beantworten Sie die Fragen zur folgenden DTD:
Einführung in HTML. Tutorium. Präsentation der Sitzung vom 2./9. Juni 2004 Martin Stricker
Tutorium Einführung in HTML Präsentation der Sitzung vom 2./9. Juni 2004 Martin Stricker martin.stricker@rz.hu-berlin.de Programm Grundlagen von HTML Objekte, Elemente, Tags Grundaufbau eines HTML-Dokuments
Web-basierte Anwendungssysteme XHTML-Grundlagen
Web-basierte Anwendungssysteme XHTML-Grundlagen Prof. Dr. Sergej Alekseev (alekseev@fb2.fra-uas.de) Prof. Dr. Armin Lehmann (lehmann@e-technik.org) Fachbereich 2 Informatik und Ingenieurwissenschaften
Ergänzungen zum HTML - Grundkurs
Ergänzungen zum HTML - Grundkurs Ein HTML - Dokument besteht grundsätzlich aus zwei Teilen; HEADER (Kopf, enthält allg. Angaben zu Titel und ähnlich) BODY (Körper, enthält den eigentlichen Text mit Überschriften,
Hochschule Darmstadt Fachbereich Informatik
Hochschule Darmstadt Fachbereich Informatik Entwicklung webbasierter Anwendungen 1 Hochschule Darmstadt Fachbereich Informatik Wiederholung 2 1. Einleitung Einsatz der Technologien im Zusammenhang Webserver
HTML Spielend gelingt die Website
HTML Spielend gelingt die Website TOBIAS HAUSER CHRISTIAN WENZ HTML - PDF HTML - Spielend gelingt die Website Impressum Liebe Leserin, lieber Leser! 9 Wir legen los 11 Was ist HTML? 12 Browser 14 Editoren
HTML - Grundbegriffe. Informatik 1 für Nebenfachstudierende Grundmodul. Kai-Steffen Hielscher Folienversion: 23. November 2016
Informatik 1 für Nebenfachstudierende Grundmodul HTML - Grundbegriffe Kai-Steffen Hielscher Folienversion: 23. November 2016 Informatik 7 Rechnernetze und Kommunikationssysteme Inhaltsübersicht Kapitel
HTML-Grundlagen (X)HTML:
HTML-Grundlagen (X)HTML: < > beginnender HTML Tag schließender HTML Tag < /> leere HTML Elemente Attribute und Werte &.; Sonderzeichen, HTML Entities Aufbau einer Datei Ein
Praxisbeispiel 01:18 Webformulare 07:39 Flexibles zweispaltiges Layout 05:24 Image-Replacement-Techniken 04:02
Einfach mehr können. HTML/CSS Einstieg für Anspruchsvolle Bonusmaterial Praxisbeispiel 01:18 Webformulare 07:39 Flexibles zweispaltiges Layout 05:24 Image-Replacement-Techniken 04:02 Inhaltsverzeichnis
Crashkurs Webseitenerstellung mit HTML
Ziel Crashkurs Webseitenerstellung mit HTML Das Ziel dieser Einführung in die Webseitenerstellung ist das Kennenlernen der Seitenbeschreibungssprache HTML und die Nutzung für einfach strukturierte Seiten,
Inhaltsverzeichnis. Einleitung 1. Teil I Workshop Schritt für Schritt zum professionellen HTML-CSS-Design. 1 So geht der Workshop vor 6
ix Einleitung 1 Teil I Workshop Schritt für Schritt zum professionellen HTML-CSS-Design 1 So geht der Workshop vor 6 2 Vorbereitungen 8 2.1 Anlegen einer sinnvollen Ordnerstruktur... 9 2.2 Das brauchen
U6: Webgerechte Bilder
Konzeption Gestaltung U6: Webgerechte Bilder BILDAUFLÖSUNG UND GRÖSSE Auflösung bestimmt die Anzahl an Punkten (dots), die pro Längeneinheit (cm oder inch) zur Verfügung steht und wird demzufolge n der
Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) <!DOCTYPE HTML> <html> <head>
Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) name Ihres HTML-Dokumentes
Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) <!doctype html> <html lang="de"> <head>
Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) name Ihres HTML-Dokumentes
Hypertext Markup Language HTML. Stefan Szalowski Internet-Technologien HTML
Hypertext Markup Language HTML Hypertext Markup Language HTML Cascading Style Sheets CSS Zwei Sprachen, mit denen Webseiten erstellt werden HTML: Strukturieren von Inhalten durch Elemente Überschriften,
Hypertext Markup Language (HTML)
Hypertext Markup Language (HTML) 1. Einleitung HTML steht für Hypertext Markup Language. HTML ist keine Programmiersprache. Programmierung im Web erfordert zusätliche Hilfmittel. HTML besteht aus sogenannten
Eine Schnelleinführung in CSS
Eine Schnelleinführung in CSS Michael Dienert 11. September 2013 Inhaltsverzeichnis 1 Was ist CSS? 1 2 Verwenden der CSS-Stylesheets 2 3 Struktur eines CSS-Stylesheets 2 4 Selektoren im Detail 3 4.1 Verwandschaftsbeziehungen:
DATENFORMATE IM INTERNET
DATENFORMATE IM INTERNET Steffen Petermann Projekt reisefieber:// BILDFORMATE JPG / GIF / PNG / SVG MULTIMEDIA FLASH / SHOCKWAVE TEXT-BASIERTE FORMATE HTMP / CSS / JS / CGI / PHP AUDIO & VIDEO MP3 / MOV
1. Seminar Multimediale Werkzeuge Sommersemester 2011
1. Seminar Multimediale Werkzeuge Sommersemester 2011 Marco Niehaus marco.niehaus@tu-ilmenau.de 12.04.2011 Page 1 Organisatorisches Terminplanung? Übungs- & Hausaufgaben Gehen zu 30 % in die Endnote ein
HTML - Die Sprache des Internets. Grundlagen und Kurzprojekt
- Die Sprache des Internets Grundlagen und Kurzprojekt aus der Presse: Definition : Hypertext Markup Language Sprache des WWW definiert: Text- und Absatzformate Links Bild- und Tonelemente Farben offener
HTML & CSS. GIMP > Bild > Bild skalieren Unter diesem Menüpunkt kannst du die Bildgröße verändern. Beachte die Bildproportionen
Übung 1 HTML & CSS Bildbearbeitung in Hinblick auf HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.jpg Lehrziel: Bilder auf Ansichtsbasis
WS4 - Wichtige Informationen
WS4 - Wichtige Informationen 1 Einführung in HTML zur Erstellung einer Homepage In diesem Abschnitt zeigen wir Ihnen den Souce Code einer einfachen HTML Webseite. Wie diese Webseite im Browser aussieht,
Wir studieren HTML-Tags
Abb. 1: Word-Dokument Abb. 2: Das Dokument aus Abb. 1 mit einem Editor betrachtet Wir studieren HTML-Tags Wenn man ein Word-Dokument wie in Abb. 1 mit einem Editor anschaut, erkennt man den Quelltext des
Internet-Technologien
Internet-Technologien PHP Workshop Bau eines Gästebuches Bisher: Heute: Clientseitiges Skripting (Bsp.: JavaScript) Ausführung von Programm-Code auf dem Client-Rechner Entlastung des Server-Rechners ++
HTML5 2 1 / 6. Doing Web Apps HTML5 2. Letzte Änderung: 2014-10-24 Version: 1.1
1 / 6 Doing Web Apps HTML5 2 Autor: Rüdiger Marwein Letzte Änderung: 2014-10-24 Version: 1.1 Dieses Dokument darf mit Nennung des Autoren - frei vervielfältigt, verändert und weitergegeben werden. Der
Frontend- technologien HTML. B04 Einführung in Softwaretechnologien
Frontend- technologien HTML B04 Einführung in Softwaretechnologien Ihre Erwartungen an die Vorlesung Verknüpfung von Wirtschaft und digitaler Technologie Grundlagen, um mit Programmierern, Informatikern
Webdesign im Tourismus
Übung Prof. Dr. Markus Landvogt Zur Vorlesung 2.3. Feinheiten in Jimdo 2.4. HTML in Jimdo 03 HTML - GRUNDLAGEN DER ERSTELLUNG VON WEBSEITEN 3.1 Aufbau einer Seite in HTML 3.2 HTML in Jimdo WEB 03 1 2.3.
Allgemeine Technologien II Sommersemester Mai 2011 CSS
Allgemeine Technologien II Sommersemester 2011 02. Mai 2011 CSS Kursthemen Designparadigmen Framesets Tabellenbasierte Layouts -basierte Layouts: CSS & Co. Cascading Style Sheets CSS CSS einbinden
Article Widgets für Publisher
Anleitung zur Integration des JavaScripts Article Widgets für Publisher 2 / 5 plista Article Widgets für Publisher basieren auf der Einbindung eines kleinen JavaScripts in den HTML-Code Ihrer Webseite.
Allgemeine Technologien II Wintersemester 2010/ Oktober 2010 HTML II
Allgemeine Technologien II Wintersemester 2010/11 25. Oktober 2010 HTML II Hausaufgaben 18.10.2010 Hausaufgaben 18.10.2010 Hausaufgaben 18.10.2010 Aufgabe 2 HTML II Kursthemen HTML Hyperlinks href
PHP & HTML. Kurzeinstieg HTML. Zellescher Weg 12 Willers-Bau A109 Tel Michael Kluge
Zentrum für Informationsdienste und Hochleistungsrechnen (ZIH) PHP & HTML Kurzeinstieg HTML Zellescher Weg 12 Willers-Bau A109 Tel. +49 351-463 - 32424 Michael Kluge (michael.kluge@tu-dresden.de) HTML
Bootstrap4 Layout Komponenten
Bootstrap4 Layout Komponenten Inhalt: 1.)media object 2.)list group 3.)Navigation mit tabs und pills 1.)Media Object Style Dieses Design wird oft eingesetzt, wenn man Tweeds oder Blog-Kommentare erstellt.
Suchmaschinen-Optimierung
Suchmaschinen, Google & Co. Suchroboter der Suchmaschinen suchen das Web ab von Link zu Link Inhalte der Seiten werden registriert bzw. indexiert riesengrosse Datenbanken 11.10.2016 2 Search Engine Optimization,
Informatik und Programmiersprachen
Informatik und Programmiersprachen Einschub: HTML Wintersemester 2004/2005 Prof. Dr. Thomas Wieland HTML HTML = Hypertext Markup Language HTML beschreibt Inhalt, Struktur und Darstellung eines Dokumentes.
<html> <head> <title> Die Welt der Bäume </title> </head> <body> Hier ensteht eine Seite über Bäume. </body> </html> Abb. 2
Dieser html-kurs soll die Informatik-SchülerInnen meines Info-Kurses auf den Info-Quali vorbereiten. Das Werkzeug html soll einen in die Lage versetzten, die Programmierung von Web-Seiten zu verstehen
Der doppelte Zeilenumbruch ist ebenfalls eine rein visuelle Kennzeichnung von Absätzen (vgl. Listing 9 7).
D3kjd3Di38lk323nnm 9.2 Maßstäbe für verständliche Texte 339 Der doppelte Zeilenumbruch ist ebenfalls eine rein visuelle Kennzeichnung von Absätzen (vgl. Listing 9 7). ein Absatz Fortsetzung
Barrierefreiheit im Internet. PHP UserGroup Würzburg 01.12.2009 Jason Easter
Barrierefreiheit im Internet PHP UserGroup Würzburg 01.12.2009 Jason Easter Was ist Barrierefreiheit? Barrierefreiheit bedeutet, dass Gegenstände, Medien und Einrichtungen so gestaltet werden, dass sie
DML Befehl: UPDATE II
HTML HTML-Datei HTML-Datei: Textdatei, die tags enthält Die Tags zeigen dem Webbrowser an, wie die Seite anzuzeigen ist Eine HTML Datei muss eine htm oder html Endung haben Eine HTML Datei kann man mit
Vorwort. Tag 1 Von der Idee zum eigenen Web. Tag 2 Am Anfang war... HTML
Vorwort Tag 1 Von der Idee zum eigenen Web 1.1 Idee und Design 1.2 Aufsetzen des Codes - der HTML-Editor 1.3 Webseiten im Browser testen 1.4 Testen auf einem lokalen Webserver 1.5 Der Schritt in die Öffentlichkeit
E-Commerce: IT-Werkzeuge. Web-Programmierung. Kapitel 3: Webdesign mit CSS Stand: Übung WS 2015/2016. Benedikt Schumm M.Sc.
Übung WS 2015/2016 E-Commerce: IT-Werkzeuge Web-Programmierung Kapitel 3: Stand: 30.10.2015 Benedikt Schumm M.Sc. Lehrstuhl für ABWL und Wirtschaftsinformatik Katholische Universität Eichstätt-Ingolstadt
Start ohne Vorwissen CHRISTOPH PREVEZANOS
jetzt lerne ich Start ohne Vorwissen CHRISTOPH PREVEZANOS Jetzt lerne ich HTML5 - PDF Inhaltsverzeichnis Jetzt lerne ich HTML5 - Start ohne Vorwissen Übersicht Inhaltsverzeichnis Willkommen 1 Einstieg
Musterlösung Klausur Kommunikation I. Sommersemester 2004. Dipl.-Ing. T. Kloepfer
Kommunikation I 1 Musterlösung Klausur Kommunikation I Sommersemester 2004 Dipl.-Ing. T. Kloepfer Bearbeitungsinformationen Aufbau der Klausur Die Klausur ist wie folgt aufgebaut: Die Klausur ist in 18
1 Definition der Selektoren Einbinden der CSS 3 Möglichkeiten Farbangaben Schriftformatierung Abstände...
CSS GRUNDLAGEN 1 Definition der Selektoren... 2 2 Einbinden der CSS 3 Möglichkeiten... 2 3 Farbangaben... 4 4 Schriftformatierung... 4 5 Abstände... 4 6 Box Modell... 5 7 Links... 5 8 Eigene Klasse definieren...
HTML Tutorial Part I - Einführung und erste Texte schreiben
HTML Tutorial Part I - Einführung und erste Texte schreiben Hallo und Herzlich Willkommen auf meiner Seite. Hier dreht sich alles um das Thema HTLML Programmierung. Das ganze beginnt bei den einfachsten
HTML = Hyper Text Markup Language
HTML Was ist das? Allgemeines Kopf HTML = Hyper Text Markup Language - ist eine Auszeichnungssprache, also KEINE Programmiersprache Navigation Inhalt - erstellbar mit jedem beliebigen Texteditor - dient
Nachbau der Website 1.)Hintergrundbild einfügen eigene CSS-Datei
Nachbau der Website http://www.lake-festival.at/ Erstelle eine neue Bootstrapsite im Ordner lakefestival. Es soll alle Ordner bereits enthalten, back für diverse backgrounds, img mit vielen Bildern usw.
Last update: :39 hilfe:grundlagen https://intern.hoelderlin.hd.schule-bw.de/hilfe:grundlagen
redaktion, hilfe Textstrukturierung Prinzipiell müssen Texte im Wiki logisch ausgezeichnet werden. Eine Überschrift hat die Funktion einer Abschnittsgliederung und sollte entsprechend ausgezeichnet werden
ALLGEMEINES WOMIT KANN ICH WEBSITES ERSTELLEN?
HTML AG INHALT Allgemeines... 2 Womit kann ich Websites erstellen?... 2 Grundgerüst von HTML... 3 Tags und Attribute... 3 Links... 4 Links auf andere Seiten... 4 Bilder... 5 meta-tags... 5 Webseiten mit
HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 1. Ausgabe, Dezember 2011 HTML5
Linda York, Tina Wegener HTML5 Grundlagen der Erstellung von Webseiten 1. Ausgabe, Dezember 2011 HTML5 2 HTML5 - Grundlagen der Erstellung von Webseiten 2 Die erste Webseite mit HTML erstellen In diesem
HTML. Hypertext Markup Language
HTML Hypertext Markup Language Begriff Markup Begriff aus Druckindustrie: Layouter fügt Anmerkungen/Markierungen (Tags) hinzu Markup-Languge (ML) = Auszeichnungssprache Beispiele a) das Wort wird fett
Abgabetermin: , 23:59 Uhr
HTML 19.01.2016 Projektanforderungen Struktur: Zentrale (index-)seite Sinnvolle Ordnerstruktur von index.html aus verlinkte Seiten mit Querverweisen (insgesamt mindestens 3 Seiten) Elemente, die irgendwo
Die Zeile, in das Foto angegeben wird, heißt dann z. B. <a href="grafik/fotos/foto1.jpg"><img src="grafik/fotos/foto1_kl.
7.1 Vorschaugrafiken verwenden Der Aufbau einer Seite geht schneller vonstatten, wenn man zunächst kleinere Vorschaugrafiken verwendet, die erst bei Bedarf auf die richtige Größe gebracht werden. Der Befehl
Inhalt HTML 2. Applets Frames Formulare CSS cascading style sheets. Lehrveranstaltung Internet in AT Dr.-Ing. A. Braune TECHNISCHE UNIVERSITÄT DRESDEN
Inhalt HTML 2 Applets Frames Formulare CSS cascading style sheets SS 06 1 Applets Das Applet Java Applets sind kleine Java-Programme mit deren Hilfe aktive Webseiten erstellt werden können. werden mit
Angewandte Informatik
Angewandte Informatik Teil 9.1 Web Seiten V1.3 12.03.2011 1 von 37 Inhaltsverzeichnis 3... Welche Browser werden verwendet? 4... Mit welchen Browser surft die Welt? 5... Wie kommt der Browser zur Seite?
Erstellen von Web-Seiten HTML und mehr...
Erstellen von Web-Seiten HTML und mehr... SS 2002 Duffner: Interaktive Web-Seiten 1 Themen! Was ist das WWW?! Client-Server-Konzept! URL! Protokolle und Dienste! HTML! HTML-Editoren! Ergänzungen und Alternativen
CSS-Boxen. Hans Gell Schulungen & Dienstleistungen Übersicht der Schulungsinhalte
CSS-Boxen Übersicht der Schulungsinhalte Das Web ist nicht aus Papier enttäuschte Erwartungen Autor hat keine Kontrolle Webseiten sehen immer anders aus Webseiten sind flexibel - Papierseiten sind starr
1 DynWeb Entwicklung mobiler Webseiten
1 DynWeb Entwicklung mobiler Webseiten Quelle: http://winzerapp.com/infografik-nutzung-mobiler-endgeraete-und-mobile-shopping-in-deutschland jquery Mobile 2 DynWeb Entwicklung mobiler Webseiten Entwicklung
HTML-Grundlagen. Die Layout- und Formatierungsanweisungen heißen Tags, z.b.
HTML-Grundlagen HTML (Hypertext Markup Language) -Dokumente sind einfache Textdateien, die neben dem eigentlichen Text zusätzliche Anweisungen enthalten, wie das Dokument von einem Browser auf dem Bildschirm
Hochschule Darmstadt Fachbereich Informatik
Hochschule Darmstadt Fachbereich Informatik Entwicklung webbasierter Anwendungen 1 Entwicklung webbasierter Anwendungen, SS2016, Christopher Dörge / David Müller / Thomas Sauer 21.04.2015 Hochschule Darmstadt
HTML5. Wie funktioniert HTML5? Tags: Attribute:
HTML5 HTML bedeutet Hypertext Markup Language und liegt aktuell in der fünften Fassung, also HTML5 vor. HTML5 ist eine Auszeichnungssprache mit der Webseiten geschrieben werden. In HTML5 wird festgelegt,
Meine erste Homepage - Beispiele
Meine erste - Beispiele 1. Beispiel meine Willkommen auf meiner Befehle nicht über Hier ist ein Senior, der noch fit für's Internet ist. Probieren wir
33 CSS in HTML einbinden
D3kjd3Di38lk323nnm 256 33 CSS in HTML einbinden Damit CSS auf HTML wirken kann, muss eine Verknüpfung hergestellt werden. Dafür stehen verschiedene Möglichkeiten zur Verfügung, die in diesem Kapitel beschrieben
Wintersemester Maschinenbau und Kunststofftechnik. Informatik. Tobias Wolf Seite 1 von 29
Kapitel 2 Einführung in C++ Seite 1 von 29 C++ Zeichensatz - Buchstaben: a bis z und A bis Z. - Ziffern: 0 bis 9 - Sonderzeichen: ; :,. # + - * / % _ \! < > & ^ ~ ( ) { } [ ]? Seite 2 von 29 Höhere Elemente
Tabellenfreies Layout in HTML
Tabellenfreies Layout in HTML 0. Inhaltsverzeichnis Philipp Wahle 12.12.12 2 von 40 Seiten 3 von 40 Seiten 0. Inhaltsverzeichnis 1. Sematischer Code 2. Box Modell 3. Classes & IDs 4. Statischer Seitenaufbau
Kennen, können, beherrschen lernen was gebraucht wird
Inhaltsverzeichnis Inhaltsverzeichnis... 1 Zeichen formatieren... 1 Physische Formatierungen... 1 Zitate auszeichnen... 2 Schrift ändern... 2 Die Schriftgröße einstellen... 2 Die Schriftart einstellen...
CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 1: GRUNDLAGEN DER WEBENTWICKLUNG
CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 1: GRUNDLAGEN DER WEBENTWICKLUNG Von Markus Stauffiger / 4eyes GmbH DOZENTENTEAM FÜR JEDES THEMA EIN SPEZIALIST ANDI KELLER andi@4eyes.ch Mitgründer von 4eyes
Praktikum zur Veranstaltung XML-Technologie: Übung 09
Fachhochschule Wiesbaden - Fachbereich Informatik Praktikum zur Veranstaltung XML-Technologie: Übung 09 XSLT Eine HTML-Tabelle 06.01.2005 (c) 2004 H. Werntges, FB Informatik, FH Wiesbaden 1 Organisatorisches
Web Technologien HTML & CSS
Web Technologien HTML & CSS Univ.-Prof. Dr.-Ing. Wolfgang Maass Chair in Information and Service Systems Department of Law and Economics WS 2011/2012 Wednesdays, 8:00 10:00 a.m. Room HS 021, B4 1 Themen