Crashkurs HTML und CSS

Größe: px
Ab Seite anzeigen:

Download "Crashkurs HTML und CSS"

Transkript

1 Crashkurs HTML und CSS

2 HTML und CSS Hinweis: Dieser Crashkurs liefert einen Überblick und Kriterien für die sachgerechte Verwendung von HTML und CSS. Zum Lernen, Nachschlagen und Ausprobieren verweise ich auf die Kapitel HTML und CSS von Q Außerdem sollten Sie die Webdeveloper-Werkzeuge Ihres Browsers aktivieren, um Die HTML- und CSS-Quellen der Seiten sehen zu können. (c) schmiedecke 2012 Crashkurs HTML und CSS 2

3 HTML und CSS HTML seit 1991 XHTML strenge Form, erweiterbar, seit 2000 HTML5 streng, seit 2012 Medientags erweiterte semantische Auszeichnung CSS seit 1994 "Style"-Sprache, eingebettet oder ausgelagert heute einziger Träger der Gestaltungsinformation (c) schmiedecke 2012 Crashkurs HTML und CSS 3

4 Trennung von Inhalt und Form Aufgabenteilung: Programmierer und Webdesigner Übertragbarkeit des Designs Mehrsprachigkeit Layoutvariationen für div. Endgeräte Accessability (c) schmiedecke 2012 Crashkurs HTML und CSS 4

5 Trennung funktioniert: CSS Zen Garden (c) schmiedecke 2012 Crashkurs HTML und CSS 5

6 HTML: Auszeichnung des Inhalts (c) schmiedecke 2012 Crashkurs HTML und CSS 6

7 HTML: Aspekte des Inhalts (c) schmiedecke 2012 Crashkurs HTML und CSS 7

8 HTML: Semantische Auszeichnung Print-Dokument Layout leistet Gliederung Gruppierung Differenzierung der Inhalte optische Aufbereitung Hervorhebung und Fokussierung Online-Dokument Semantik-Auszeichnung leistet Gliederung Gruppierung Differenzierung der Inhalte Layout leistet Unterstützung der Semantik optische Aufbereitung Hervorhebung und Fokussierung (c) schmiedecke 2012 Crashkurs HTML und CSS 8

9 HTML: Aspekte des Inhalts Gliederung title headings paragraph line break subject break <hr> Elemente links lists images, media forms Semantische Abschnitte div, span header, footer heading group section article aside Semantische Elemente abbreviation blockquote code, sample date progress strong, emphasize (c) schmiedecke 2012 Crashkurs HTML und CSS 9

10 HTML-Elemente Dokumentenbausteine, von Tags umschlossen <p>neuer Absatz mit viel Text und Bildern</p> Block-Elemente erzeugen einen Zeilenwechsel Inline-Elemente nicht Elemente können geschachtelt werden Leere Elemente haben nur ein Tag <br>, <hr>, <p/> öffnende Tags können Attribute haben <a href="http://www.beuth-hochschule.de">bht-homepage</a> (c) schmiedecke 2012 Crashkurs HTML und CSS 10

11 HTML-Elemente Blockelemente <p> <h1> <h6> <ul>, <ol>, <dl> <table> <blockquote> <fieldset> <hr /> <div> Inline-Elemente <a> <img> <object> <input>, <textarea> <select> <button> <label> <strong>, <em> <acronym>, <abbr> <q> <span> schmiedecke 11 HCI 11

12 HTML: Dokumentaufbau minimales HTML(5)-Dokument <!DOCTYPE> Angabe zur korrekten Behandlung durch den Browser, kann auch enthalten: DTD für XML, Angaben zur Sprachstrenge,... <head> enthält den Titel, der im Fensterkopf erscheint, zusätzlich ggf. <base/> für die Standard-Basisadresse für Links und Targets, <meta /> für Metainformationen wie Autor, Beschreibung, CMS,, <link /> zum Einbinden von CSS, Bibliotheken, Bildquellen <body> enthält den darzustellenden Inhalt (c) schmiedecke 2012 Crashkurs HTML und CSS 12

13 Die wichtigsten HTML-Tags am Beispiel <body> <h2>beispielseite</h2> <p>erster absatz</p> <h3>tabelle</h3> <table> <tr> <td></td> <th>spalte 1</th> <th>spalte 2</th> </tr> <tr> <th>zeile 1</th> <td>11</td> <td>12</td> </tr> </table> <br/> <h3>liste</h3> <ul> <li>1.zeile</li> <li>2.zeile</li> </ul> <p> <a href="http://www.beuthhochschule.de">beuth-hochschule</a> </p> <p> <img src="http://www.beuthhochschule.de/uploads/pics/logo_horizo ntal.gif" alt="bht-logo" /> </p> </body> schmiedecke 11 HCI 13

14 Darstellung ohne CSS schmiedecke 11 HCI 14

15 Beuth-Seite ohne CSS (c) schmiedecke 2012 Crashkurs HTML und CSS 15

16 HTML: Qualitätskriterien valide logische Gliederung semantische Auszeichnung ohne CSS verstehbar gute Navigation barrierefrei (c) schmiedecke 2012 Crashkurs HTML und CSS 16

17 HTML: Struktureller Aufbau 1. Gliedern Inhaltliche Struktur bestimmen Semantische Blöcke benennen Navigation anlegen 2. Linearisieren Lesereihenfolge bestimmen Überspringen und Ein/Ausblenden planen <body> <div id="header">. </div> <div id="navigation"> </div> <div id="content"> <div id="news"> </div> </div> <div id="main article"> </div> <p id="blog entries"> </p> <div id="footer"> </div> </body> 3. Auszeichnen HTML-Tags für Überschriften, Blöcke, semantische Elemente, etc. einsetzen ggf. <div>- und <span>-tags für benannte Blöcke verwednen "class" oder "id"-attribut für Blöcke entsprechend der Gliederung setzen. Alternativtext zu allen Bildinformationen 4. Testen Lesbarkeit und Verständlichkeit ohne CSS Navigation 5. Validieren (c) schmiedecke 2012 Crashkurs HTML und CSS 17

18 Gestaltung durch CSS Cascading Stylesheets (CSS3) Gestaltungsangaben wie Farbe, Größe, Font, Position Selektoren beschreiben Gültigkeitsbereich: HTML-Element (Tag): h1 Klasse von Elementen (class-attribut):.rechtebox Benanntes Element (id-attribut): #quicklinks Selektoren können gelistet werden (alternativ) h1,.rechtebox Selektoren könne als Pfade angegeben werden #quicklinks ul Für Links gibt es Selektoren nach Zuständen a:link a:visited a:hover Kaskade: Der spezifischere Selektor überschreibt den allgemeineren <style> body: {color: #F00; } p: {color: #0F0; } ul: {color: #00F; } </style> (c) schmiedecke 2012 Crashkurs HTML und CSS 18

19 Einbindung von CSS CSS-Style-Angaben als style-attribut direkt in HTML-Tags als <style>-tag für das gesamte Dokument als Datei-Link im Header Kaskade: Attribut > Tag > Datei (c) schmiedecke 2012 Crashkurs HTML und CSS 19

20 Einbindung von CSS: Beispiele Stylesheet im Header spezifizieren: mit Link-Element einbinden: <link rel="stylesheet" media="screen" type="text/css" href="styles/standard.css" /> im Style-Element importieren <style type="text/css" 'styles/standard.css' weitere CSS-Anweisungen </ style> Inline-CSS mit dem Style-Attribut: <p style="color: #06F; text-align: center;"> </p> (c) schmiedecke 2012 Crashkurs HTML und CSS 20

21 CSS: Das Box-Modell Jedes Block-Element hat seine "Box" Für jede Box kann festgelegt werden: Breite, Höhe, Alignment Margin, Padding, Border Absolute Position oder Floatrichtung Boxen werden untereinander angeordnet es sei denn, Position oder Floating sind angegeben Beispiel: Bild rechtsbündig in den nachfolgenden Text integriert: img: { float:right; margin-left: 2em } (c) schmiedecke 2012 Crashkurs HTML und CSS 21

22 Layout gestalten #header { } #navigation { float:left; width:15em; } #blogs { float.right; width: 10em; font-size:60%; } navigation header news main article <body> <div id="header">. </div> <div id="navigation"> </div> <div id="content"> <div id="news"> </div> <div id="main article"> </div> <p id="blog entries"> </p> </div> <div id="footer"> </div> </body> blogs schmiedecke 11 HCI 22

23 Skalierbarkeit Größenänderungen ohne Informationsverlust für unterschiedliche Geräte für sehbehinderte Nutzer (Textvergrößerung) Maßnahmen Keine absoluten Größenangaben für Text und Box 55 % - Relativ zur aktuellen Größe/Breite/Höhe 0.5em - Relativ zur aktuellen Breite des "M" Tabellen: Breite den <td>-elementen in Prozent zuordnen, auf keinen Fall Scrolling=NO oder Noresize angeben! Texte: Maximalbreite begrenzen (max-width=35em (c) schmiedecke 2012 Crashkurs HTML und CSS 23

24 Fehlermöglichkeiten gibt's genug (c) schmiedecke 2012 Crashkurs HTML und CSS 24

25 Ein kleines Beispiel: <body> <div id="header"> <p>titel</p> <h1>raamattu </h1> </div> <div id="navigation"> <h4>navigation</h4> <ul> <li>alussa </li> <li>loi </li> <li>jumala </li> <li>taivaan </li> <li>ja </li> <li>maan.</li>... </ul> </div> <div id="content"> <h2>haupttext</h2> <p id="text1">blindtext</p> <p id="text2">blindtext</p> <p id="adam"><img src="michelangeloadam.jpg" alt="adam, painting by Michelangelo. Painting depicts Godly inspiration of Man" width="264" height="180" /></p> </div> <div id="footer"> <p>impressum: schmiedecke 11 - HTML- CSS-Demo</p> </div> </body> HCI 25

26 Layout ohne CSS schmiedecke 11 HCI 26

27 "utf-8"; /* CSS Document */ <style type="text/css"> body { font-family: Verdana, Geneva, sans-serif; max-width: 60em;} #header { } width:100%; background-image: url(http://...jpg); #headertext { } margin-left:15em; color: #CCC; #center { background-color: #C97 } #navigation { float: right; width:14em; max-width:20em; padding: 0.4em; } #navigation li { list-style:none; } #content { background-color: #CC9; margin-left:0em; margin-right:15em; max-width:40em; padding: 0.5em; } schmiedecke 11 HCI 27

28 CSS ctd. #footer { width:100%; display: block; float:left; font-size: small; background-color: #999; } #adam { float:right; margin-left: 2em; } </style> schmiedecke 11 HCI 28

29 Layout mit CSS schmiedecke 11 HCI 29

30 Zu Besuch im CSS Zen Garden (c) schmiedecke 2012 Crashkurs HTML und CSS 30

31 HTML <body id="css-zen-garden"> <div id="container"> <div id="intro"> <div id="pageheader"> <h1> <span>css Zen Garden</span> </h1> <h2> <span> The Beauty of <acronym title="cascading Style Sheets">CSS</acronym> Design </span> </h2> </div> <div id="quicksummary"> <p class="p1"> <span> A demonstration of what can be accomplished visually through <acronym title="cascading Style Sheets">CSS</acronym> -based design. Select any style sheet from the list to load it into this page. </span> </p> (c) schmiedecke 2012 Crashkurs HTML und CSS 31

32 CSS: Fahrner Image Replacement (FIR) #intro, #supportingtext { padding: 0 69px 0 86px; width: 545px; } #intro { background: url("images/logo.gif") no-repeat scroll left top transparent; padding-top: 230px; } [.] #preamble, #explanation, #participation, #benefits, #requirements { border-bottom: 1px solid #E4E1DB; padding-bottom: 20pt; } #pageheader, #pageheader h1, #pageheader h2, #quicksummary.p1, #linklist2 h3 span { display: none; } FIR: Bekannter Trick, um Trotz Text-Design als Bild die CSS-freie Fassung korrekt zu halten. Leider Screenreader-Probleme (c) schmiedecke 2012 Crashkurs HTML und CSS 32

33 Soviel zur Einführung in HTML und CSS nächstes Mal geht es um Barrierefreiheit. (c) schmiedecke 2012 Crashkurs HTML und CSS 33

Aufbau einer HTML Seite:

Aufbau einer HTML Seite: 1 Aufbau einer HTML Seite: Grundstruktur: Head Bereich: "nicht sichtbar" Er enthält grundlegende Informationen wie: Title, Charset, Ansichtsgröße,

Mehr

HTML und CSS. Eine kurze Einführung

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

Mehr

Information und ihre Darstellung: XHTML & CSS

Information und ihre Darstellung: XHTML & CSS Information und ihre Darstellung: XHTML & CSS IFB Speyer Daniel Jonietz 2009 XHTML Extensible Hypertext Markup Language Unter besonderer Berücksichtigung von XHTML 1.1. 1 Was ist XHTML? Textbasierte Auszeichnungssprache

Mehr

Webdesign-Multimedia HTML und CSS

Webdesign-Multimedia HTML und CSS Webdesign-Multimedia HTML und CSS Thomas Mohr HTML Definition ˆ HTML (Hypertext Markup Language) ist eine textbasierte Auszeichnungssprache (engl. markup language) zur Strukturierung digitaler Dokumente

Mehr

Cascading Style Sheets

Cascading Style Sheets CSS Cascading Style Sheets von Carsten Euwens CSS Vortragsgliederung Grundlagen Bedeutung Wie binde ich CSS überhaupt ein Wie weise ich Styles den einzelnen Elementen zu Was kann man damit machen Text

Mehr

Einführung in die Webentwicklung

Einführung in die Webentwicklung Einführung in die Webentwicklung Mit HTML5 und CSS3 auf dem Weg zur eigenen Website Kerstin Blumenstein EXPOSEE Dieses Script beinhaltet alle in dem Kurs durchgenommenen - Teile mit Erklärungen von Tag

Mehr

Inhalt. Hintergrund HTML CSS. JavaScript und das Document Object Model

Inhalt. Hintergrund HTML CSS. JavaScript und das Document Object Model Andreas Heß Inhalt Hintergrund HTML CSS JavaScript und das Document Object Model Netz-Protokolle Schichtenmodell OSI DoD Beispiele 7 Anwendung 6 Darstellung 5 Sitzung Anwendungen HTTP, HTTPS, SMTP,

Mehr

Vorlesungsinhalte. Internet und Webseiten-Gestaltung. Ausblick. Entwicklungsschritte

Vorlesungsinhalte. Internet und Webseiten-Gestaltung. Ausblick. Entwicklungsschritte Vorlesungsinhalte Internet und Webseiten-Gestaltung Wirtschaftsinformatik 3 Vorlesung 2005-05-13 Dipl.-Inf. (FH) T. Mättig Stylesheets (CSS) Das CSS Box-Modell Fotos, Bilder, Grafiken Tabellen 2005-05-13

Mehr

Publizieren im Internet

Publizieren im Internet Publizieren im Internet Eine eigene Homepage erstellen Teil 2 Margarita Esponda esponda@inf.fu-berlin.de Ein Bild als Hintergrund Webseite mit einen Bild als Hintergrund

Mehr

HTML5 2 1 / 6. Doing Web Apps HTML5 2. Letzte Änderung: 2014-10-24 Version: 1.1

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

Mehr

Responsive Webdesign

Responsive Webdesign ebusiness Praxistag Thüringen 2014 Responsive Webdesign BASISWISSEN UND MÖGLICHKEITEN DER UMSETZUNG Maik Grunitz Geschäftsführer Forward Marketing GbR Inhalte 1. Warum Responsive Design? 2. Geschichte

Mehr

Seiten gestalten mit CSS. Die wichtigsten HTML-Elemente. ,CSS gestaltet dynamisch die HTML-Elemente (Boxen)

Seiten gestalten mit CSS. Die wichtigsten HTML-Elemente. ,CSS gestaltet dynamisch die HTML-Elemente (Boxen) Wichtige Grundlagen Cascading Style Sheets, gestaltet dynamisch die HTML-Elemente (Boxen),Mit legen Sie Schriften und Farben einheitlich fest,über das Box-Modell layouten Sie die Seite,Navigation und Effekte

Mehr

CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG

CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG Von Markus Stauffiger / 4eyes GmbH STRUKTUR UND ZIELE DES HEUTIGEN TAGES Repetition CSS Grundlagen CSS Eigenschaften Wie komme

Mehr

Hypertext Markup Language HTML. Stefan Szalowski Internet-Technologien HTML

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,

Mehr

Internet und Webseiten-Gestaltung

Internet und Webseiten-Gestaltung Internet und Webseiten-Gestaltung Wirtschaftsinformatik 3 Vorlesung 5. Mai 2004 Dipl.-Inf. T. Mättig 2004-04-28 Internet und Webseiten-Gestaltung - T. Mättig 1 Vorbemerkungen Dipl.-Inf. T. Mättig E-Mail:

Mehr

Internet und Webseiten-Gestaltung

Internet und Webseiten-Gestaltung Internet und Webseiten-Gestaltung Wirtschaftsinformatik 3 Vorlesung 12. Mai 2004 Dipl.-Inf. T. Mättig 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 1 Vorbemerkungen Dipl.-Inf. T. Mättig E-Mail:

Mehr

Fachbereich Wirtschaftswissenschaften Klausur: Übung 1 zur Vorlesung E-Business und Web-Site-Engineering Sommersemester 2007 Deckblatt Hinweise

Fachbereich Wirtschaftswissenschaften Klausur: Übung 1 zur Vorlesung E-Business und Web-Site-Engineering Sommersemester 2007 Deckblatt Hinweise Klausur Übung 1 E-Business und WSE: HTML/XHTML SS 2007 Seite 1 von 4 Fachbereich Wirtschaftswissenschaften Klausur: Übung 1 zur Vorlesung E-Business und Web-Site-Engineering Sommersemester 2007 Deckblatt

Mehr

IT- und Medientechnik

IT- und Medientechnik IT- und Medientechnik Vorlesung 4: 2.11.2015 Wintersemester 2015/2016 h_da, Lehrbeauftragter Teil 1: IT- und Medientechnik Themenübersicht der Vorlesung Hard- und Software Hardware: CPU, Speicher, Bus,

Mehr

Erstellung von dynamischen Webseiten mit Cascading StyleSheets

Erstellung von dynamischen Webseiten mit Cascading StyleSheets Planerische Informationssysteme Erstellung von dynamischen Webseiten mit Cascading StyleSheets Rolf Sonderegger FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung

Mehr

HTML, CSS und Responsive Design Selina Mohtaj und Laura Menze

HTML, CSS und Responsive Design Selina Mohtaj und Laura Menze HTML, CSS und Responsive Design Selina Mohtaj und Laura Menze Hilfreiche Links und Bücher http://holdirbootstrap.de/ (deutsch) bzw. http://getbootstrap.com (englisch) https://www.youtube.com/playlist?list=pl41lfr-

Mehr

Literatur. [7-1] Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, 2011. [7-2] Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003

Literatur. [7-1] Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, 2011. [7-2] Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003 Literatur [7-1] Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, 2011 [7-2] Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003 [7-3] Münz, Stefan: . Addison-Wesley, 2005 [7-4]

Mehr

Seminar DWMX 2004. DW Session 004

Seminar DWMX 2004. DW Session 004 Seminar DWMX 2004 DW Session 004 Eigene Site aufbauen Aufbau einer persönlichen Site: Auswahl einer bestimmten Dateiorganisation Statische HTML Site Vorlagenbasierte Site Framebasierte Site Erstellen der

Mehr

Responsive Web Design

Responsive Web Design Responsive Web Design mit APEX Theme 25 Christian Rokitta APEX UserGroup NRW Treffen 20.01.2014 Oracle DB & APEX Entwickler (selbstständig) Deutschland ( 1996) Niederlanden ( 1996) themes4apex: APEX UI

Mehr

SASS für Einsteiger. WordCamp Köln 2015. 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1

SASS für Einsteiger. WordCamp Köln 2015. 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1 SASS für Einsteiger WordCamp Köln 2015 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1 Wer bin ich? Bernhard Kau Wahlberliner PHP-Entwickler WordPress-Plugin Hobby-Entwickler CSS-Tüftler Organisator der

Mehr

TYPOlight-Usertreffen 2009. Barrierefreiheit?

TYPOlight-Usertreffen 2009. Barrierefreiheit? Barrierefreiheit? Das ist doch nur für Blinde! Zu kompliziert. Zu teuer. Unsere Kunden sind nicht behindert. Müssen wir machen *seufz* sind verpflichtet Wir haben schon eine NurText-Version. Barrierefreiheit!

Mehr

CSS. Cascading Stylesheets

CSS. Cascading Stylesheets CSS Cascading Stylesheets Themen Was sind Cascading Stylesheets? Vorteile von CSS Nachteile von CSS CSS: Versionen Regelsyntax für Stylesheets Einem HTML-Dokument Styles hinzufügen und Numerische

Mehr

Aufbau eines Klassen-Selektors: selektor.klasse { css-eigenschaft1:wert1; css-eigenschaft2:wert2;...}

Aufbau eines Klassen-Selektors: selektor.klasse { css-eigenschaft1:wert1; css-eigenschaft2:wert2;...} Cascading StyleSheets (CSS) Allgemein CSS (aufeinander aufbauende Stilvorlagen) wurden 1996 vom W3C standardisiert. dienen der Ergänzung strukturierter Dokumente wie HTML oder XML. Ermöglichen die Trennung

Mehr

Best Practices für HTML & CSS. Johannes Eschrig

Best Practices für HTML & CSS. Johannes Eschrig Best Practices für HTML & CSS. Johannes Eschrig Gliederung. 2 1. Best Practices i. Standards ii. Standardfreundlichkeit iii. Grundlegende Regeln 2. Best Practices für HTML i. class & id ii. HTML & CSS

Mehr

Digitale Medien. Übung

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

Mehr

HTML-Grundlagen (X)HTML:

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

Mehr

Web-Technologien. Fachbereich AI, Web-Technologien 1

Web-Technologien. Fachbereich AI, Web-Technologien 1 Web-Technologien Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm Hochschule Harz FB Automatisierung und Informatik mwilhelm@hs-harz.de http://www.miwilhelm.de Raum 2.202 Tel. 03943 / 659 338 Fachbereich AI,

Mehr

HTML5, CSS3 und JavaScript 1.8. Fortgeschrittene Entwicklung von Webseiten. Isolde Kommer. 1. Ausgabe, 2. Aktualisierung, Dezember 2013 HTML5F

HTML5, CSS3 und JavaScript 1.8. Fortgeschrittene Entwicklung von Webseiten. Isolde Kommer. 1. Ausgabe, 2. Aktualisierung, Dezember 2013 HTML5F HTML5, CSS3 und JavaScript 1.8 Isolde Kommer 1. Ausgabe, 2. Aktualisierung, Dezember 2013 Fortgeschrittene Entwicklung von Webseiten HTML5F 2 HTML5, CSS3 und JavaScript 1.8 - Fortgeschrittene Entwicklung

Mehr

Seitengestaltung mit HTML und CSS. Stefan Rothe, Thomas Jampen

Seitengestaltung mit HTML und CSS. Stefan Rothe, Thomas Jampen Seitengestaltung mit HTML und CSS Stefan Rothe, Thomas Jampen 2013 09 12 Rechtliche Hinweise Dieses Werk von Stefan Rothe steht unter einer Attribution-NonCommercial-ShareAlike 3.0 License. Zudem verzichtet

Mehr

Aufgabenbereich 3: Layoutgestaltung mit CSS

Aufgabenbereich 3: Layoutgestaltung mit CSS Aufgabenbereich 3: Layoutgestaltung mit CSS Wichtige Begriffe und Zusammenhänge: Website: Gesamtheit eines Internet-Auftrittes (alle Webseiten, die dazu gehören) Webseite: Eine einzelne Seite, ein HTML-Dokument

Mehr

5. Barrierefreie GUI-Gestaltung

5. Barrierefreie GUI-Gestaltung 5. Barrierefreie GUI-Gestaltung Prinzipen Barrierefreie Webseiten Barrierefreie Webapplikationen Barrierefreie Software-GUIs Prüfprogramme Ilse Schmiedecke 2008 Motivationsvideo des Schweizer Fernsehens:

Mehr

11 Publizieren im Web

11 Publizieren im Web 11 Publizieren im Web Für ein modernes Unternehmen ist es heute kaum vorstellbar, nicht im Internet vertreten zu sein. Laut Statistik Austria 7 haben 97 % aller österreichischen Unternehmen ab 10 Beschäftigten

Mehr

Responsive Webdesign. IHK-Arbeitskreis Software. Prof. Dr. Manfred Wojciechowski 18.02.2014

Responsive Webdesign. IHK-Arbeitskreis Software. Prof. Dr. Manfred Wojciechowski 18.02.2014 IHK-Arbeitskreis Software Prof. Dr. Manfred Wojciechowski 18.02.2014 Aufbau Vorstellung Responsive Webdesign Motivation Technologien Frameworks 2 Vorstellung Zur Person 1991 1996: Studium Informatik an

Mehr

Webdesign mit (X)HTML und CSS

Webdesign mit (X)HTML und CSS Webdesign mit (X)HTML und CSS Das Praxisbuch zum Einsteigen, Auffrischen und Vertiefen Deutsche Ausgabe der 3. englischen Auflage Jennifer Niederst Robbins Übersetzung von Kathrin Lichtenberg O'REILLY*

Mehr

Einführungskurs HTML-CSS mit Buch

Einführungskurs HTML-CSS mit Buch Einführungskurs HTML-CSS mit Buch Von Stand: 01.11.2013 Arbeitsblätter Blatt1: Grundlegendes, Software einrichten Blatt2: Link-Arten Blatt3: Wichtige HTML-Elemente Blatt4: Einführung CSS Blatt5: Wichtige

Mehr

HTML / CSS. Hans Gell Schulungen & Dienstleistungen www.hans-gell.de. Übersicht der Schulungsinhalte

HTML / CSS. Hans Gell Schulungen & Dienstleistungen www.hans-gell.de. Übersicht der Schulungsinhalte HTML / CSS Übersicht der Schulungsinhalte Grundlagen Einleitung HTML-Historie Java Script, XML, PHP, Flash Webstandards und Browser Werkzeuge und Tools UltraEdit und Dreamweaver TopStyle, Web Developer

Mehr

Online-Publishing mit HTML und CSS für Einsteigerinnen

Online-Publishing mit HTML und CSS für Einsteigerinnen Online-Publishing mit HTML und CSS für Einsteigerinnen Dipl. Math. Eva Dyllong, Universität Duisburg Dipl. Math. Maria Oelinger, spirito GmbH IF MYT 07 2002 CSS-Einführung Vorschau CSS Was ist das? Einbinden

Mehr

Frontend- technologien HTML. B04 Einführung in Softwaretechnologien

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

Mehr

Die wichtigsten HyperTextMarkupLanguage tags 1(6)

Die wichtigsten HyperTextMarkupLanguage tags 1(6) Die wichtigsten HyperTextMarkupLanguage tags 1(6) HTML ist entgegen vielen Gerüchten keine Programmiersprache, sondern lediglich ein Hilfsmittel um Text und Bild zu formatieren, welche in einem Browser

Mehr

Erste Schritte mit XHTML

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

Mehr

Inhalt. Einleitung... 13

Inhalt. Einleitung... 13 Inhalt Einleitung... 13 1. Der Einstieg in CSS... 17 1.1 Die Grundlagen von (X)HTML... 18 Anatomie eines (X)HTML-Elements... 19 Der Unterschied zwischen XHTML und HTML... 19 1.2 Was ist CSS, und was kann

Mehr

Das TYPOlight CSS-Framework

Das TYPOlight CSS-Framework Das TYPOlight CSS-Framework Aufgaben eines CSS-Frameworks CSS-Reset Vereinheitlichung der Darstellung in allen Browsern Zurücksetzen der proprietären Abstände und Formatierungen Cross-Browser-Formatierung

Mehr

CSS zur Gestaltung von HTML-Seiten nutzen

CSS zur Gestaltung von HTML-Seiten nutzen CSS zur Gestaltung von HTML-Seiten nutzen Handbuch und Literatur Handbuch des RRZNs: CSS Cascading Style Sheet; Level 2 Charles Wyke-Smith: Stylin with CSS; Addison-Wesley Tommy Olsson & Paul O'Brien:

Mehr

Eine wirklich große Hilfe war die Typo3-Dokumentation der Firma Mittwald: https://www.mittwald.de/fileadmin/pdf/dokus/typo3-dokumentation.

Eine wirklich große Hilfe war die Typo3-Dokumentation der Firma Mittwald: https://www.mittwald.de/fileadmin/pdf/dokus/typo3-dokumentation. Die neue Internetseite mit Typo3 (Stand vom 25.12.2015) Ein Anfang Also, ich habe längst nicht alles verstanden, einige Befehlsketten einfach rein kopiert und deshalb sicher auch sinnlose Programmteile

Mehr

Web Technologien HTML & CSS

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

Mehr

Einführungskurs HTML-CSS ohne Buch Von Norbert Willimsky Stand: 01.11.2015

Einführungskurs HTML-CSS ohne Buch Von Norbert Willimsky Stand: 01.11.2015 Einführungskurs HTML-CSS ohne Buch Von Stand: 01.11.2015 Inhalt Grundlegendes... 2 Einführung in HTML... 4 Übung1: HTML und einfaches CSS anwenden... 5 Einführung in CSS... 6 Übung2: CSS anwenden... 8

Mehr

CSS-Tutorial. Grundlegende CSS-Kenntnisse

CSS-Tutorial. Grundlegende CSS-Kenntnisse 2008 CSS-Tutorial Grundlegende CSS-Kenntnisse Dieses Tutorial gibt Ihnen verschiedene CSS-Kenntnisse mit an die Hand, damit Sie Ihre Webseite ansprechend gestalten können. Webmasterparadies.de Vertraulich

Mehr

HTML Teil 2. So kann man HTML-Seiten mit

HTML Teil 2. So kann man HTML-Seiten mit <div> und CSS gestalten. So sehen einfache Formulare aus HTML Teil 2 So kann man HTML-Seiten mit und CSS gestalten So sehen einfache Formulare aus Wie könnte ein komplexer Internetauftritt aussehen? Trennung Inhaltsbereich und Navigationsbereich 2 Beispiel:

Mehr

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) CSS sind eine unmittelbare Ergänzung zu HTML. Es handelt sich um einen firmenunabhängigen, offen dokumentierten und frei verwendbaren Standard. Es ist eine Sprache zur Formatierung

Mehr

Design anpassen eine kurze Einführung

Design anpassen eine kurze Einführung Design anpassen eine kurze Einführung Das gesamte Layout von Papoo basiert auf modernen CSS Layouts die vollständig ohne Layout Tabellen funktionieren. Um schnell vorhandene Designs anpassen zu können

Mehr

Die eigene Website. Zusatzkapitel CSS mobile Geräte & Ausdruck

Die eigene Website. Zusatzkapitel CSS mobile Geräte & Ausdruck Die eigene Website Zusatzkapitel CSS mobile Geräte & Ausdruck Im Folgenden finden Sie einige Zusatztipps zu Kapitel 6 des Buchs Die eigene Website. Mehr Infos zum Buch auf der Website zum Buch. CSS für

Mehr

Inhaltsverzeichnis. Einführung... 1. Kapitel 1 Die Bausteine einer Webseite... 13. Kapitel 2 Die Arbeit mit Webseitendateien... 39

Inhaltsverzeichnis. Einführung... 1. Kapitel 1 Die Bausteine einer Webseite... 13. Kapitel 2 Die Arbeit mit Webseitendateien... 39 Inhaltsverzeichnis Einführung....................................... 1 HTML und CSS im Überblick............................ 2 Browser........................................ 3 Webstandards und Webspezifikationen......................

Mehr

Gestalten von WebPoint-Anwendungen mit Hilfe von Struts-Tiles. Torsten Walter

Gestalten von WebPoint-Anwendungen mit Hilfe von Struts-Tiles. Torsten Walter Gestalten von WebPoint-Anwendungen mit Hilfe von Struts-Tiles Torsten Walter 1 Tutorial In dem Tutorial zu WebPoint wurde exemplarisch die Realisierung eines Videoautomaten erklärt. Dieses Dokument beschreibt

Mehr

Meine erste Homepage - Beispiele

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

Mehr

Webbasierte Programmierung

Webbasierte Programmierung Webbasierte Programmierung Eine Einführung mit anschaulichen Beispielen aus der HTML5-Welt apl. Prof. Dr. Achim Ebert Inhalt Kapitel 4: CSS (Cascading Style Sheets) Einbindung von CSS CSS-Grammatik Boxmodell

Mehr

Start. HTML Crash-Kurs. HTML Crashkurs Bernd Blümel Christian Metzger

Start. HTML Crash-Kurs. HTML Crashkurs Bernd Blümel Christian Metzger Start HTML Crash-Kurs Basics HyperText Markup Language logische Auszeichnungssprache Einfache Syntax Sehr einfach zu erlernen Dateiendungen und Startseite Dateiendungen.htm.html Startseite: index default

Mehr

Hochschule Darmstadt Fachbereich Informatik

Hochschule Darmstadt Fachbereich Informatik Hochschule Darmstadt Fachbereich Informatik Entwicklung webbasierter Anwendungen 1 Entwicklung webbasierter Anwendungen, WS2015/2016, Christopher Dörge / David Müller 03.11.2015 Hochschule Darmstadt Fachbereich

Mehr

Angewandte Informatik

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?

Mehr

E-Mail Editor Vorlagen Programmier-Richtlinien

E-Mail Editor Vorlagen Programmier-Richtlinien E-Mail Editor Vorlagen Programmier-Richtlinien 1 Inhaltsverzeichnis 1. Einleitung... 3 2. Code erstellen für Vorlagen... 4 3. Code für mobile Vorlagen (Responsive Design)... 5 4. Editor Klassen (Tags)

Mehr

Dokumentation für Popup (lightbox)

Dokumentation für Popup (lightbox) Dokumentation für Popup (lightbox) Für das Popup muss eine kleine Anpassung im wpshopgermany Plugin vorgenommen werden und zwar in der Datei../wp-content/plugins/wpshopgermany/controllers/WarenkorbController.class.php

Mehr

WEBSITE ERSTELLEN mit DREAMWEAVER MX

WEBSITE ERSTELLEN mit DREAMWEAVER MX WEBSITE ERSTELLEN mit DREAMWEAVER MX Inhalt: WEBSITE ERSTELLEN mit DREAMWEAVER MX... 1 Neue Site anlegen... 2 Neue HTML-Seite erstellen... 2 Seiteneigenschaften... 2 Webseite speichern... 2 CSS (Cascading

Mehr

HTML5. Wie funktioniert HTML5? Tags: Attribute:

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,

Mehr

Der transparente Look. Die Struktur, die oben angegeben wurde, ist im Anwendungsdesigner, wie in der nächsten Grafik ersichtlich, abgebildet.

Der transparente Look. Die Struktur, die oben angegeben wurde, ist im Anwendungsdesigner, wie in der nächsten Grafik ersichtlich, abgebildet. Intrapact Layout Allgemeines Das Layout einer Firma wird im Intrapact Manager, und dort im Layout Designer erstellt. Alle Eingaben im Layout Designer dienen dazu um die CSS/ASP Dateien zu generieren, die

Mehr

HTML5 / CSS3. 19.10.2009 - Webtreff - Konstanz Lars Messmer - COMSOLIT GmbH

HTML5 / CSS3. 19.10.2009 - Webtreff - Konstanz Lars Messmer - COMSOLIT GmbH HTML5 / CSS3 19.10.2009 - Webtreff - Konstanz Lars Messmer - COMSOLIT GmbH Seite / 68 COMSOLIT GmbH Fullservice Agentur die erfolgreich professionelle Gesamtlösungen umsetzt. Zu den Kernkompetenzen zählen:

Mehr

FULLSCREEN. ShoPWArE VollBIlD-PluGIn. handbuch

FULLSCREEN. ShoPWArE VollBIlD-PluGIn. handbuch FULLSCREEN ShoPWArE VollBIlD-PluGIn handbuch FULLSCREEN ShoPWArE PluGIn Inhaltsverzeichnis Bildgröße für Vollbildansicht konfigurieren 04 Variante 1: Thumbnail in der Shopware Medienverwaltung anlegen

Mehr

2 HTML & CSS der Schnelleinstieg *

2 HTML & CSS der Schnelleinstieg * 5 2 HTML & CSS der Schnelleinstieg * Diese Einführung ist für Leser gedacht, die noch keinerlei Kenntnisse in HTML oder CSS besitzen. Wenn Sie bereits Grundkenntnisse besitzen, dann können Sie mit dem

Mehr

HTML & Co. Ein kurzer Einblick

HTML & Co. Ein kurzer Einblick HTML & Co Ein kurzer Einblick 1 Was ist HTML? HTTP= Datenübertragungsprotokoll HTML (Hypertext Markup Language) = Formatiersystem für Textdokumente Entwickelt in Genf (CH) am CERN Befehle zur Formatierung,

Mehr

Web-Programmierung (WPR)

Web-Programmierung (WPR) Web-Programmierung (WPR) TFH-Berlin Sommer Semester 2008 Manfred Gruner mailto:wpr@gruner.org Web-Programmierung (WPR) Literatur: Web-Technologien (Heiko Wöhr) Konzepte Programmiermodelle - Architekturen

Mehr

Kurs-Serie: Wordpress Themes erstellen

Kurs-Serie: Wordpress Themes erstellen Kurs-Serie: Wordpress Themes erstellen Die HTML-Vorlage für das Wordpress-Theme von Vladimir Simovic akademie.de asp GmbH & Co. Betriebs- & Service KG Lehrter Straße 16-17, 10557 Berlin Tel: (030) 61655-0

Mehr

Björn Seibert Manuela Hoffmann. Professionelles Webdesign I mit (X)HTML und CSS [

Björn Seibert Manuela Hoffmann. Professionelles Webdesign I mit (X)HTML und CSS [ Björn Seibert Manuela Hoffmann Professionelles Webdesign I mit (X)HTML und CSS [ Inhalt Vorwort 11 Über das Buch 11 Über die Autoren 12 Teil I Bevor es losgeht... 15 1 Einfach moderne Websites 19 1.1 Auf

Mehr

Projektarbeit Multimedia-Technologien Erstellung eines E-Learnings zum Online-Tool WireWax

Projektarbeit Multimedia-Technologien Erstellung eines E-Learnings zum Online-Tool WireWax Projektarbeit Multimedia-Technologien Erstellung eines E-Learnings zum Online-Tool WireWax 5.11.2015 bis 21.01.2016 Carolin Schneider (Matrikelnummer: 40127) Inhaltsverzeichnis Ziel des Projekts... 3 Projektverlauf...

Mehr

Um CSS-Formatierungen in einem HTML-Dokument einzubinden gibt es 3 Möglichkeiten.

Um CSS-Formatierungen in einem HTML-Dokument einzubinden gibt es 3 Möglichkeiten. CSS-SCHULUNG TEIL A: ALLGEMEINE EINFÜHRUNG IN CSS TEIL B: CSS IM LOKALEN INFORMATIONS-SYSTEM Dozentin: Dipl. Ing.(FH) Nicole Hartmann Rhoen-Saale.net GmbH Oktober 2009 TEIL A: ALLGEMEINE EINFÜHRUNG IN

Mehr

Leseprobe. »HTML und CSS im SchnelldurchlaufDas Box-ModellMedia Queries« Inhaltsverzeichnis. Index. Der Autor. www.galileocomputing.

Leseprobe. »HTML und CSS im SchnelldurchlaufDas Box-ModellMedia Queries« Inhaltsverzeichnis. Index. Der Autor. www.galileocomputing. Know-how Wissen, wie s für geht. Kreative. Leseprobe Erfahren Sie zu Beginn in Kürze das Zusammenspiel von HTML und CSS. Anschließend lernen Sie das Box-Modell von CSS kennen, und wie Sie Media Queries

Mehr

Responsive Webdesign

Responsive Webdesign Responsive Webdesign Anlass sind 2 Probleme: 1. Darstellung der HU-Homepage auf mobilen Geräten ist nicht optimal (Überprüfung der Anzeige mit Strg+Shift+M oder Simulatoren www.responsinator.com) 2. Summe

Mehr

jetzt lerne ich Webseiten programmieren und gestalten Einfache Beispiele mit HTML, CSS, Javascript, ASP und PHP

jetzt lerne ich Webseiten programmieren und gestalten Einfache Beispiele mit HTML, CSS, Javascript, ASP und PHP jetzt lerne ich Webseiten programmieren und gestalten Einfache Beispiele mit HTML, CSS, Javascript, ASP und PHP CHRISTIAN WENZ TOBIAS HAUSER KAPITEL 3 CSS anwenden jetzt lerne ich Style-Sheets sind heute

Mehr

HTML- und CSS-Einführung Rusalka Offer Isabella Nagy

HTML- und CSS-Einführung Rusalka Offer Isabella Nagy Grundelemente der Hypertext Markup Language (HTML) und Cascading StyleSheets (CSS) Allgemeines: HTML steht für Hypertext Markup Language aktueller Standard ist HTML 4.1 bzw. XHTML 1.0 (s.a. unter http://www.w3c.org)

Mehr

1 Was sind Cascading Stylesheets?

1 Was sind Cascading Stylesheets? Im ersten Kapitel erkläre ich Ihnen, was sich hinter dem Begriff»Cascading Stylesheets«verbirgt und welche Vorteile Sie davon haben, mit Stylesheets zu arbeiten. Außerdem sehen Sie das erste Stylesheet

Mehr

Erstellen eines HTML-Templates mit externer CSS-Datei

Erstellen eines HTML-Templates mit externer CSS-Datei Erstellen eines HTML-Templates mit externer CSS-Datei Eigenschaften der Lösung Menü mit 2 Ebenen ohne Bilder, Menü besteht aus Text (Links) Durch CSS kann das Menü aber auch die Seite angepasst werden

Mehr

HTML5, CSS3 und JavaScript 1.8. Isolde Kommer. Fortgeschrittene Entwicklung von Webseiten. 1. Ausgabe, Februar 2013 HTML5F

HTML5, CSS3 und JavaScript 1.8. Isolde Kommer. Fortgeschrittene Entwicklung von Webseiten. 1. Ausgabe, Februar 2013 HTML5F Isolde Kommer 1. Ausgabe, Februar 2013 HTML5, CSS3 und JavaScript 1.8 Fortgeschrittene Entwicklung von Webseiten HTML5F Impressum Matchcode: HTML5F Autorin: Isolde Kommer Redaktion: Andreas Dittfurth,

Mehr

Dokumentation Kapitel 1. Dokumentation Kapitel 2

Dokumentation Kapitel 1. Dokumentation Kapitel 2 Dokumentation Kapitel 1 Das Web ist nicht aus Papier. Wenn man eine Webseite gestalten will an man das Papierdenken anwendet kommt man nicht weit oder es wird nicht so wie man es sich Vorgestellt hatte.

Mehr

CSS für Einsteiger... Seite

CSS für Einsteiger... Seite Inhaltsverzeichnis CSS für Einsteiger... Seite Vorwort von Friedel...1 Vorwort von Sejuma...1 Dankadresse...2 1. Grundsätzliches...3 1.1 Was ist CSS und warum man es verwenden sollte...3 1.2 Vorbereitende

Mehr

1. Bilder aus img Ordner importieren

1. Bilder aus img Ordner importieren Oxid Eshop Design - Modifikation Promoslider / Slideshow "Anythingslider" vom Azure Template integrieren im Basic Template: 1. Bilder aus img Ordner importieren 2. Slider Code in der _header.tpl einbinden

Mehr

Teil I: Das Design. 1 Webdesign und Webstandards... 17. 2 Gestaltung und Layout... 51. 3 Typografie... 105. 4 Farbe 129. 5 Medien...

Teil I: Das Design. 1 Webdesign und Webstandards... 17. 2 Gestaltung und Layout... 51. 3 Typografie... 105. 4 Farbe 129. 5 Medien... Teil I: Das Design 1 Webdesign und Webstandards... 17 2 Gestaltung und Layout... 51 3 Typografie... 105 4 Farbe 129 5 Medien... 145 AUF EINEN BLICK 6 Werkzeugkasten... 159 Teil II: Die Technik 7 (X)HTML

Mehr

Webseiten erstellen für Einsteiger

Webseiten erstellen für Einsteiger Daniel Mies Webseiten erstellen für Einsteiger Schritt für Schritt zur eigenen Website Galileo Press Vorbemerkungen 15 1 Vordem Start 21 1.1 Wie kommt die Seite aus dem Internet auf meinen Computer? 21

Mehr

CAS Webdesign und Webpublishing

CAS Webdesign und Webpublishing CAS Webdesign und Webpublishing Kurs 2: Fortgeschrittenes CSS Ausgabe 2014 Dozent Andi Keller andi@4eyes.ch 4eyes GmbH Falknerstrasse 52 4001 Basel +41 61 261 43 48 info@4eyes.ch CHE-112.759.842 MWST Seite

Mehr

CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 1: GRUNDLAGEN DER WEBENTWICKLUNG

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

Mehr

Kapitel 3. Wichtige HTML-Elemente (1)

Kapitel 3. Wichtige HTML-Elemente (1) Kapitel 3 Wichtige HTML-Elemente (1) Worin Sie die wichtigsten HTML-Elemente kennenlernen. Sie teilen die Webseite zunächst in Bereiche ein und beginnen dann mit der Erstellung eines sinnvoll strukturierten

Mehr

44 2CSS* Basistext. 2.1 Was ist CSS? *

44 2CSS* Basistext. 2.1 Was ist CSS? * 44 2CSS* fohlen. Alle offiziellen Informationen zu CSS finden Sie auf der W3C-Website (http://www.w3.org) und der Cascading Style Sheets Home Page (http://www.w3.org/style/css) des W3C. 2.1 Was ist CSS?

Mehr

Manuela Hoffmann. Modernes Webdesign. Gestaltungsprinzipien, Webstandards, Praxis. Galileo Press

Manuela Hoffmann. Modernes Webdesign. Gestaltungsprinzipien, Webstandards, Praxis. Galileo Press Manuela Hoffmann Modernes Webdesign Gestaltungsprinzipien, Webstandards, Praxis Galileo Press Einleitung 11 TEIL I: Das Design 1 Webdesign und Webstandards 17 1.1 Webdesign, was ist das eigentlich? 17

Mehr

Aufgaben der Klasse FTI33 HTML: 1. Durch welchen Befehl wird ein Hyperlink in einem Bestimmten Frame angezeigt?

Aufgaben der Klasse FTI33 HTML: 1. Durch welchen Befehl wird ein Hyperlink in einem Bestimmten Frame angezeigt? Hinweis: Verstehen Sie folgende Aufgaben als mögliche Bestandteile für die anstehende Klausur. Betrachten Sie die Lösungen nicht von vorne herein als richtig, sondern beantworten Sie nochmals die Fragen

Mehr

Evaluation der Barrierefreiheit mit der Firefox Web Developer Toolbar

Evaluation der Barrierefreiheit mit der Firefox Web Developer Toolbar Evaluation der Barrierefreiheit mit der Firefox Web Developer Toolbar Viele Betreiber von Webseiten sind sich unsicher, wie sie die Barrierefreiheit ihrer Webseite evaluieren können. Der Vortrag soll praktikable

Mehr

Erste Schritte in NVU

Erste Schritte in NVU NVU (http://www.nvu-composer.de/) ist ein leicht zu bedienender HTML-Editor. Nach dem Start von NVU sieht der Bildschirm wie folgt aus: Lasse dich von dieser Anzeige nicht irritieren, es ist alles halb

Mehr

VideoPlus. Shopware Video-Plugin. Handbuch

VideoPlus. Shopware Video-Plugin. Handbuch VideoPlus Shopware Video-Plugin Handbuch VideoPLUS SHOPWARE PlugIn Inhaltsverzeichnis Wo erhalte ich den Code des von mir gewünschten Videos 04 Youtube MyVideo vimeo Sevenload Yahoo! Screen Netzr Allg.

Mehr

Websiteentwicklung auf Basis vontypo3 HTML/CSS. Unterlagen zur Vorlesung WS 14/15-3- 1. Geschichte des Internets. 2. TYPO3 Designvorlage 3.

Websiteentwicklung auf Basis vontypo3 HTML/CSS. Unterlagen zur Vorlesung WS 14/15-3- 1. Geschichte des Internets. 2. TYPO3 Designvorlage 3. Websiteentwicklung auf Basis vontypo3 /CSS Unterlagen zur Vorlesung WS 14/15-3- 1. Geschichte des Internets 2. TYPO3 Designvorlage 3. 4. CSS 1 Geschichte des Internets Geschichte des Internets Die Ursprünge

Mehr

Vorwort. http://www.css-einfach.de/leserbereich. Viel Spaß beim Scripten!

Vorwort. http://www.css-einfach.de/leserbereich. Viel Spaß beim Scripten! Vorwort Detailwissen ist beim Erlernen von CSS zweitrangig. Deswegen sind anfangs weder dicke Bücher hilfreich, die alle erdenklichen Befehle durchkauen, noch Internetseiten, die Lösungen für Spezialprobleme

Mehr