Crashkurs HTML und CSS
|
|
|
- Kristin Krüger
- vor 8 Jahren
- Abrufe
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=" (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=" </p> <p> <img src=" 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( #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
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
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,
Aufbau einer HTML Seite:
1 Aufbau einer HTML Seite: Grundstruktur: Head Bereich: "nicht sichtbar" Er enthält grundlegende Informationen wie: Title, Charset, Ansichtsgröße,
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
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
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
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
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
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
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:
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
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...
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
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
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
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
CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS
CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS Sören Elvers, Julia Polner, Max Weller, Moritz Willig T-Doku, Werner-von-Siemens-Schule, Wetzlar 2010-2011 INHALT DIESES VORTRAGS 1. Kurze Einführung
Tutorial zum erstellen einer Webseite
Tutorial zum erstellen einer Webseite 2. Teil das Aussehen mit CSS bestimmen Vorbereitungen: Die HTML Grundlage anpassen, Änderungen sind fett geschrieben. Ab sofort werden wir mit zwei Dateien arbeiten,
Inhaltsverzeichnis. Florian Bauer CSS Seite 2 von 10
CSS Inhaltsverzeichnis Gestaltung mit CSS... 3 CSS einbinden... 3 On the fly... 3 Im Header... 3 In einer externen Datei... 3 Aufbau einer CSS Anweisung... 4 Wichtige CSS Eigenschaften... 4 Pseudoelemente...
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
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
Allgemeine Technologien II Wintersemester 2011 / November 2011 CSS
Allgemeine Technologien II Wintersemester 2011 / 2012 28. November 2011 CSS Themen 28.11.2011 Cascading Style Sheets CSS CSS einbinden Inline-Styles CSS im Dokumentkopf Externe Stylesheets Konzepte Typen-,
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
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
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
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
http://www.therealgang.de/
http://www.therealgang.de/ Titel : Author : Kategorie : Vorlesung HTML und XML (Einführung) Dr. Pascal Rheinert Sonstige-Programmierung Vorlesung HTML / XML: Grundlegende Informationen zu HTML a.) Allgemeines:
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*
Einführung Responsive Webdesign
Einführung Responsive Webdesign Aktuelle Situation Desktop Webseiten Umsetzungen auch heute noch in den meisten Fällen Pixelbasiert JavaScript schafft Dynamik CSS schafft Trennung von Inhalt und Layout
WEBSEITEN ENTWICKELN MIT ASP.NET
jamal BAYDAOUI WEBSEITEN ENTWICKELN MIT ASP.NET EINE EINFÜHRUNG MIT UMFANGREICHEM BEISPIELPROJEKT ALLE CODES IN VISUAL BASIC UND C# 3.2 Installation 11 Bild 3.2 Der Webplattform-Installer Bild 3.3 IDE-Startbildschirm
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
HTML5 & SCC3. PC-Treff-BB VHS Aidlingen. Lothar R. Krukowski. Ein Überblick
HTML5 & SCC3 Ein Überblick 13.10.201 Agenda Neue Strategie HTML5 CSS3 Besonderheiten Anwendungen Beispiele - ( how to start? ) Literatur Neue Strategie Letzte Version von HTML und CSS HTML5 Erstellen der
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
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
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
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
Klausurteilnehmer. Wichtige Hinweise. Note: Klausur Informatik Programmierung, 17.09.2012 Seite 1 von 8 HS OWL, FB 7, Malte Wattenberg.
Klausur Informatik Programmierung, 17.09.2012 Seite 1 von 8 Klausurteilnehmer Name: Matrikelnummer: Wichtige Hinweise Es sind keinerlei Hilfsmittel zugelassen auch keine Taschenrechner! Die Klausur dauert
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
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
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
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
Format- oder Stilvorlagen
Vorraussetzung Sie sollten Grundkenntnisse der HTML-Sprache besitzen, um die Ausbildungseinheit Formatvorlagen, auch Stilvorlagen genannt, ohne Probleme verstehen zu können. Ist dies nicht der Fall, empfehlen
Schiller-Gymnasium Hof 20.12.2004
Erstellen eines HTML-Dokumentes Zum Erstellen einer Homepage benötigen wir lediglich einen Editor. Zum Ansehen der fertigen Site benötigen wir wir natürlich auch einen Browser, z.b. Firefox oder Netscape
Netzwerkworkshop der deutschsprachigen OJS-Dienstleister 3./4. Dezember 2015, Berlin DOKUMENTATION
Netzwerkworkshop der deutschsprachigen OJS-Dienstleister 3./4. Dezember 2015, Berlin DOKUMENTATION DFG-Projekt Nachhaltige OJS-Infrastruktur zur elektronischen Publikation wissenschaftlicher Zeitschriften
AdOps Technische Spezifikationen
AdOps Technische Spezifikationen HTML5-Werbemittel (Desktop) Bei der Verwendung von Redirects müssen diese Spezifikationen nicht beachtet werden. Physische Anlieferung von HTML5-Werbemitteln + Trackings.
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
Webseiten sind keine Gemälde. Webstandards für ein besseres Web. Webstandards für ein besseres Web
Webseiten sind keine Gemälde Webkrauts Die Initiative für die Webkrauts ging von einem Blogeintrag im August 2005 aus. Nach dem Aufruf fanden sich innerhalb von etwa drei Tagen über 60 Interessierte zusammen.
Beleg 1/HTML: Erstellen einer Beispiel-Webseite
Beleg 1/HTML: Erstellen einer Beispiel-Webseite Als Beleg und zur Vertiefung der Kenntnisse in HTML ist eine Beispielwebseite zu erstellen, die die kennengelernten Tags und Attribute verwendet. Arbeiten
3. Briefing zur Übung IT-Systeme
3. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde, 30.11.2016, PC Pool Stand und Ausblick Einführung: 18.10.2016, 12.00 Uhr (c.t.), HS 4/PC Pool Fragestunde: 09.11.2016,
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,
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
Layoutmodelle. Steffen Schwientek Große Klostergasse 5 61169 Friedberg Email:schwientek@web.de Web :schlaukopp.org
Layoutmodelle HTML wurde von ihren Erfindern nicht als Layoutsprache entworfen, sondern zur Informationsübermittlung entworfen Es gab verschiedene Modelle, welche das Web populär machten und. Bei Erstellung
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!
HTML Programmierung. Aufgaben
HTML Programmierung Dr. Leander Brandl BRG Keplerstraße - A-8020 Graz Universität Graz - Institut für Experimentalphysik Fachdidaktik der Physik http://w4.brgkepler.asn-graz.ac.at 1. Die erste Web-Seite
Bedienungsanleitung Homepage Customer Interface (HCI)
Bedienungsanleitung Homepage Customer Interface (HCI) Inhalt Inhalt... 1 Startseite des HCI... 1 Konfiguration Ihres HCI... 3 Einbindung auf Ihrer Website... 5 Design... 5 Startseite des HCI Sie können
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
Mini-Dokumentation zur Bearbeitung der Website massweiler.de
Mini-Dokumentation zur Bearbeitung der Website massweiler.de 10. März 2015 Die Website massweiler.de Die Website massweiler.de wird mit dem Content Management System (CMS) Joomla betrieben. Joomla ist
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,
CSS - Formatierung. CSS Formatdefinition außerhalb des style-attributes
CSS - Formatierung CSS Formatdefinition außerhalb des style-attributes Definition von Formatierungen im Dokumenten-Kopf...... oder externer Datei Festlegung von CSS-Eigenschaften für HTML-Elemente Syntax:
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
Informationen zu den regionalen Startseiten
Informationen zu den regionalen Startseiten Inhaltsverzeichnis Informationen zu den regionalen Startseiten 1 1. Grundlegende Regeln 2 1.1. Was wird angezeigt? 2 1.2. Generelle Anzeigeregeln 2 2. Anpassbare
Magento Theming Ein Einstieg Rainer Wollthan
Magento Theming Ein Einstieg Rainer Wollthan Überblick Vorbereitung Datei Struktur Adminbereich Layout XML Block Template Magento Theming macht Spaß! Vorbereitung Produkte Marketingmaßnahmen Design Länder
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
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
WebCT-Kurse müssen nicht immer gleich aussehen. Design und Integration grafischer Elemente in WebCT-Kurse
WebCT-Kurse müssen nicht immer gleich aussehen Design und Integration grafischer Elemente in WebCT-Kurse Grundsätzliches zu diesem Handout Die folgenden Seiten waren Begleitmaterial zu einem Workshop,
responsive-web 31.10.2012 giordano.ch Oktober 31, 2012 1
responsive-web 31.10.2012 giordano.ch Oktober 31, 2012 1 perspektiven bruno giordano. // giordano.ch online.ch Oktober 31, 2012 2 giordano.ch Oktober 31, 2012 3 www.leo.org giordano.ch Oktober 31, 2012
Introduction to Technologies for Interaction Design. Stylesheets
Introduction to Technologies for Interaction Design Stylesheets Syntax Selektor und Eigenschaften Selektor bezieht sich auf ein HTML-Element ID-Selektoren dürfen in jeder HTML-Datei nur einmal vorkommen
Übung zur Vorlesung Digitale Medien. Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012
Übung zur Vorlesung Digitale Medien Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012 1 Pfadangaben (1) Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte per URL:
Erste HTML-Übungen einfache Seiten. Bearbeiten Sie die folgenden Aufgaben...
1 Erste HTML-Übungen einfache Seiten. Bearbeiten Sie die folgenden Aufgaben... Möglichst in Zweierteams! 1. Aufgabe: Notepad++ als Editor einrichten (für Windows) 2 Notepad++ für zuhause: Download von
4 Aufzählungen und Listen erstellen
4 4 Aufzählungen und Listen erstellen Beim Strukturieren von Dokumenten und Inhalten stellen Listen und Aufzählungen wichtige Werkzeuge dar. Mit ihnen lässt sich so ziemlich alles sortieren, was auf einer
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
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,
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
Signatur mit Formatierung
Bedienungstip: Signatur mit Formatierung Seite 1 Signatur mit Formatierung Es können Signaturen hinterlegt werden, die beim Erstellen von Nachrichten automatisch angehängt werden. Das ist sehr praktisch,
Responsive Webdesign Bootstrap und co. Pierre Hein & Benjamin Stein Stuttgart 7. Mai 2015
Responsive Webdesign Bootstrap und co. Pierre Hein & Benjamin Stein Stuttgart 7. Mai 2015 Agenda 1. Einführung Was ist Responive Webdesign, Media Queries und CSS preprocessing 2. Frameworks Bootstrap,
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
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 $ %!&'(
Softwaretechnik Teil Webprogrammierung (HTML, PHP) SS2011
Softwaretechnik Teil Webprogrammierung (HTML, PHP) SS2011 Studiengang: Semester: 3. Gruppe: Wirtschaftsinformatik A & B Datum: 29.06.2011 Dozent: LfbA Dipl.-Hdl. Andreas Heß Hilfsmittel: alle Unterlagen/Bücher
Übungsaufgaben zu XML:
Übungsaufgaben zu XML: Aufgabe 1 Allgemeine Fragen zu XML: (Benutzen Sie zum Lösen der Aufgaben die Online-Hilfen, welche wir erwähnt haben.) a) Was ist eine DTD? DTD steht für Document Type Definition.
Referenz Frontend: Responsive Webdesign
Stand: Dezember 2014 Diese Referenzliste bezieht sich auf eine Webseite, von der es zwei Versionen gibt. Diese Version ist mit Hilfe des Twitter Bootstrap Frameworks für mobile Endgeräte optimiert. - Startseite
Ablauf. Festigung des Gelernten Login und Struktur. Umgang mit Plugins: Ändern persönl. Einstellungen. Fachgebietslogo einfügen Anlegen neuer Seiten
Ablauf Erste Woche: Zweite Woche: Organisatorisches Festigung des Gelernten Login und Struktur Umgang mit Plugins: Ändern persönl. Einstellungen Fachgebietslogo einfügen Anlegen neuer Seiten Teaser/Quicklink
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
Barrierefreie Webseiten erstellen mit TYPO3
Barrierefreie Webseiten erstellen mit TYPO3 Alternativtexte Für jedes Nicht-Text-Element ist ein äquivalenter Text bereitzustellen. Dies gilt insbesondere für Bilder. In der Liste der HTML 4-Attribute
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 und Bearbeiten von Inhalten (Assets)
Wichtig! Beachten Sie die Designrichtlinien im Kapitel Darstellung und Vorgaben zur Erstellung der Inhalte Ein Linkset erstellen Sie, wenn Sie mehrere Links gruppiert ausgeben möchten. Sie sollten diesem
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:
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
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:
Benutzerhandbuch. Gästebuch Software - YellaBook v1.0 http://www.yellabook.de. Stand: 01.08.2012. by YellaBook.de - Alle Rechte vorbehalten.
Benutzerhandbuch Gästebuch Software - YellaBook v1.0 http://www.yellabook.de Stand: 01.08.2012 Inhalt 1 Funktionen... 3 2 Systemanforderungen... 4 3 Installation... 4 4 Einbinden des Gästebuchs... 5 5
3. Briefing zur Übung IT-Systeme
3. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde, 30.11.2016, PC Pool Stand und Ausblick Einführung: 18.10.2016, 12.00 Uhr (c.t.), HS 4/PC Pool Fragestunde:, 12.00
CSS Cascading Style Sheets
XML light CSS Cascading Style Sheets Jörn Clausen joern@techfak.uni-bielefeld.de Übersicht Wieso Cascading Style Sheets? HTML und CSS XML und CSS Ausblick XML light CSS Cascading Style Sheets 2/24 Probleme,
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
CSS - Cascading Stylesheets
CSS - Cascading Stylesheets Alfred Beringer HTBLVA für Textilindustrie und Datenverarbeitung Alfred Beringer 1 Überblick Kurze Einführung Deklarationen Selektoren Beispiele Alfred Beringer 2 CSS Formatierungssprache
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
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
Webseitenintegration. Dokumentation. v1.0
Webseitenintegration Dokumentation v1.0 bookingkit Webseitenintegration Einleitung bookingkit ermöglicht es einfach eigene Freizeiterlebnisse und Gutscheine einfach online zu verkaufen. Dazu müssen nur
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