Einführungskurs HTML-CSS mit Buch

Größe: px
Ab Seite anzeigen:

Download "Einführungskurs HTML-CSS mit Buch"

Transkript

1 Einführungskurs HTML-CSS mit Buch Von Stand: Arbeitsblätter Blatt1: Grundlegendes, Software einrichten Blatt2: Link-Arten Blatt3: Wichtige HTML-Elemente Blatt4: Einführung CSS Blatt5: Wichtige CSS-Attribute Blatt6: Übung3: Webseite nach Vorgabe Blatt7: Provider & Co. Blatt8: Randgebiete Blatt9: Übung5: Einfache Website nach Vorgabe Legende o Im Skript werden Datei- und Verzeichnisnamen klein, ohne Leerzeichen und ohne Umlaute geschrieben. o Im Skript werden Menüführungen und Bedienungsabläufe mit Schrägstrich (Slash) dargestellt. Auswahlmöglichkeiten werden kleingeschrieben. Beispiel: Datei/ Öffnen/ datei auswählen o Windows-Pfade müssen mit Backslash geschrieben werden. Beispiel: c:\uebung1\bilder\2013 o Pfade in HTML und CSS oder beim Provider müssen mit Slash geschrieben werden. Beispiel: img src= bilder/2010/foto.jpg

2

3 Blatt1 Grundlegendes Webseiten: HTML: CSS: Editor: Browser: Website, Webseiten, Homepage Hypertext Markup Language besteht aus HTML-Elementen, HTML-Attributen, Sonderzeichen Cascading Style Sheets besteht aus CSS-Attributen z.b. Phase5 z.b. Internet Explorer Wichtige HMTL-Elemente (gruppiert) Textobjekt HTML-Elemente Technische Elemente html, head, body, link, style Dokument-Titel title Text h1-h6, p, br, strong, em, hr Bild img Link a Liste ul, ol, li Tabelle table, tr, td Sonderzeichen... Wichtige CSS-Attribute (gruppiert) Eigenschaften zu CSS-Attribute Hintergrund background-image, background-repeat, background-attachment Schrift font-family, font-size Farbe color, background-color Text text-align, font-weight, font-style, text-decoration Abstände, Rahmen, Höhe, Breite margin, padding, border height, width Liste list-style-type, list-style-image, list-style-position Link a:link, a:visited, a:hover

4 Software einrichten Kursdateien Das Kursverzeichnis auf den Teilnehmer-PC z.b. unter Eigene Dateien kopieren. Phase5 (Version5.6) Popup-Windows ausschalten: Projekt/ Einstellungen/ Optionen HTML/ Haken entfernen bei Benutzer-Tags, Attribute nach, End-Tag Zeilenumbruch erzwingen: Einstellungen/ Editor Einstellungen/ Editor / Haken setzen bei Zeilenumbruch, Zeilenumbruch am rechten Rand Keine Dateien bei Programmstart: Einstellungen/ Phase5 Programmstart/ Keine Datei laden Dateimanager ausblenden: Ansicht/ Dateimanager automatisch ausblenden Farbpalette anzeigen: Ansicht/ Farbpalette anzeigen Internet Explorer Anzeige aktualisieren: F5-Taste Menüleiste anzeigen: im Menübereich rechte Maustaste klicken/ Menüleiste Schriftgröße ändern: STRG-Taste und Mausrad bewegen Quelltext einsehen: Ansicht/ Quelle Zwei Arten eine Datei zu öffnen Innerhalb der Anwendung: Datei/ Öffnen/ datei auswählen/ Öffnen Im Windows-Explorer: datei markieren/ Rechte Maustaste klicken/ Öffnen mit/ programm auswählen, wenn Programm nicht in Liste: Durchsuchen/ ok

5 Blatt2 Link-Arten 1. Externer Link auf andere Website <a href= > linktext <a> 2. Link in neuem Browserfenster öffnen <a href= target= _blank > linktext <a> 3. Link auf Datei <a href= dokument.pdf > linktext <a> 4. Bild verlinken <a href= > <img src= foto.jpg /> <a> 5. Interner Link innerhalb der Webseite Beispiel1: Sprung zum Seitenanfang Anker am Seitenanfang: <a name= anker1 ></a> Link am Seitenende: <a href= #anker1 > zum Seitenanfang </a> Beispiel2: Inhaltsverzeichnis <a href= #anker1 > Punkt1 </a> <a href= #anker2 > Punkt2 </a> <a href= #anker3 > Punkt3 </a> <a name= anker1 ></a> lorem ipsum <a name= anker2 ></a> lorem ipsum <a name= anker3 ></a> lorem ipsum 6. Interner Link auf eigene Website <a href= vita.html > linktext <a> 7. Link ohne Auswirkung <a href= # > linktext </a>

6

7 Blatt3 Wichtige HTML-Elemente Objekt HTML-Element HTML-Attribute/ Bemerkungen Gesamtdokument <html> </html> Dokument-Kopf <head> </head> Dokument-Titel <title> </title> Titel wird in Browser-Lasche angezeigt Dokument-Körper <body> </body> Technische Objekte <meta /> <link /> <style> </style> Meta: Metadaten für Suchmaschinen Link: Link zu externer CSS-Datei Style: interne CSS-Attribute Überschrift <h1> </h1> bis h steht für header <h6> </h6> Absatz <p> </p> p steht für paragraph Zeilenumbruch <br /> Inline-Element br steht für break Fett <strong> </strong> unterschiedliche Darstellung in Ausgabemedien Inline-Element Kursiv <em> </em> unterschiedliche Darstellung in Ausgabemedien Inline-Element em steht für emphasize Linie <hr /> hr steht für horizontal rule Bild <img /> src für Pfad und Bildname alt für Alternativtext title für Tooltipp-Text width für Breite in Pixel height für Höhe in Pixel Inline-Element img steht für image Link <a> </a> href für Verweis auf Internetadresse oder Datei target= _blank für neues Browserfenster title für Tooltipp-Text name für Ankername bei Skiplink Anker: <a name= anker1 > </a> Link: <a href= #anker1 > linktext </a> Link ohne Auswirkung: <a href= # > linktext </a> Inline-Element a steht für anchor ungeordnete Liste <ul> </ul> <li> </li> ul steht für unordered list li steht für listelement geordnete Liste <ol> </ol> <li> </li> start für numerischen Startwert ol steht für ordered list li steht für listelement Tabelle Tabellen-Zeile Tabellen-Zelle <table> </table> <tr> </tr> <td> </td> tr steht für table row td steht für table definition <span> </span> Inline-Element ohne vordefinierte Eigenschaften <div> </div> Block-Element ohne vordefinierte Eigenschaften Sonderzeichen " geschütztes Leerzeichen (non breakable space) Anführungszeichen Eurozeichen Copyrightzeichen Kommentar <!-- --> Kommentare werden nicht angezeigt

8

9 Blatt4 Einführung CSS Wo kann CSS definiert werden? Am HTML-Element.... <p style= color: red; > text </p> Im Head der HTML-Datei..... <style type= text/css > p {color: red;} </style> In externer CSS-Datei.. Link im Head der HTML-Datei notwendig <link href= datei.css rel= stylesheet type= text/css /> Regel: je näher am HTML-Element definiert, desto relevanter Mögliche Selektoren Selektor Anwendungsbeispiel Einfache Selektoren CSS: h1 {color: green;} HTML: <h1> überschrift </h1> Klassenselektoren Benutzt für die unterschiedliche Darstellung eines HTML-Elements. Beispiel: h1-überschrift soll grün und blau dargestellt werden. gebundene Klasse CSS: h1.blau {color: blue;} HTML: <h1 class= blau > überschrift </h1> ungebundene Klasse CSS:.blau {color: blue;} HTML: <h1 class= blau > überschrift </h1> <p class= blau > absatz </p> Pseudoklassen-Selektoren Benutzt bei HTML-Element A. Besonderheiten: o vorgegebene Klassennamen o Doppelpunkt bei Definition o Im HTML-Element nicht erwähnt o Reihenfolge wichtig ID-Selektoren Dürfen nur einmal auf einer Webseite verwendet werden. Oft benutzt für Container im Seitenlayout. CSS: HTML: CSS: HTML: a:link {color: red;} a:visited {color: blue;} a:hover {color: yellow;} a:active {color: silver;} <a href= > linktext </a> #header {background-color: yellow;} <div id= header > </div> Universal-Selektor Wirkt auf alle HTML-Elemente. Wird oft für das Zurücksetzen von Abständen benutzt. CSS: * {margin: 0; padding: 0;}

10

11 Blatt5 Wichtige CSS-Attribute Eigenschaft CSS-Attribut Wert/ Einheit/ Beispiel Bedeutung Schriftart font-family Wert: arial, helvetica, sans-serif, serif Empfehlung: serifenlose Schrift Schriftgröße font-size Einheit: pt, px, %, em, px Empfehlung: pt Vordergrundfarbe color Wert: englisch oder hexadecimal. Bsp: red oder #ff0000 Hintergrundfarbe background-color Wert: englisch oder hexadecimal. Bsp: red oder #ff0000 pt = point (fixe Größe) px = Pixel (fixe Größe) % = % des Eltern-Elements em = em mal des Eltern-Elements Ausrichtung text-align Wert: left, right, center, justify links, rechts, zentriert, Blocksatz Fett font-weight Wert: bold, normal fett, nicht fett Kursiv font-style Wert: italic, oblique, normal kursiv, schräggestellt, nicht kursiv Unterstreichung text-decoration Wert: underline, none unterstrichen, nicht unterstrichen Hintergrundbild- Einbindung Hintergrundbild- Wiederholung Hintergrundbild- Fixierung Hintergrundbild- Positionierung backgroundimage backgroundrepeat backgroundattachment backgroundposition Wert: url Bsp: background-image: url(bild.gif); repeat, no-repeat, repeat-x, repeat-y Wert: fixed, scroll Wert: left, right, top, bottom, center, px Bsp: background-position: 100px 10px; Wiederholung, keine, horizontale, vertikale fixiert, Bildlauf links, rechts, oben, unten, zentriert, in Pixel Bsp: 100 Pixel von links, 10 Pixel von oben Außenabstand Innenabstand Rahmen margin margin-top margin-right margin-bottom margin-left padding padding-top padding-right padding-bottom padding-left border border-width border-style border-color Breite width Einheit: px, % Höhe height Einheit: px, % Einheit: px Kurzschreibweisen: margin: 10px 20px 30px 40px; margin: 10px 20px; margin: 10px; Wert: auto Bsp: margin: 10px auto; Einheit: px Kurzschreibweisen: padding: 10px 20px 30px 40px; padding: 10px 20px; padding: 10px; Einheit: px Einheit: px Wert: solid, dotted, none s.o. Kurzschreibweise: border: 1px solid black; top, right, bottom, left top+bottom, left+right top+right+bottom+left auto für horizontales Zentrieren top, right, bottom, left top+bottom, left+right top+right+bottom+left durchgezogen, gepunktet, kein Rahmen Aufzählzeichen ul list-style-type Wert: disc, circle, square, none Punkt, Kreis, Quadrat, nichts Aufzählzeichen ol list-style-type Wert: decimal, lower-alpha, upperalpha, lower-roman, upper-roman Zahl, Kleinbst, Großbst, kleine röm. Zahl, große röm. Zahl Aufzählzeichen list-style-image Wert: url

12 ist Grafik Bsp: list-style-image: url(bild.jpg); Texteinzug in Listen list-style-position Wert: outside, inside Aufzählzeichen außerhalb, innerhalb Textausrichtung in Tabellenzelle vertical-align Wert: top, middle, bottom Bsp: td {vertical-align: top;} oben, mittig, unten Link-Eigenschaften a:link a:visited a:hover a:active normaler Link besuchter Link mit Maus überfahrener Link gerade aktivierter Link Objektfluss des HTML-Elements float Wert: left, right Flussrichtung links, rechts. U.a. für Ausrichtung von Bildern. Objektfluss abbrechen clear Wert: both erzwingt Fortsetzung unterhalb des vorherigen Objekts Blockeigenschaft display Wert: block, inline Absatz, Fließtext HTML-Element Kommentar /* */ Kommentare nicht angezeigt

13 Blatt6 Übung3: Webseite nach Vorgabe Idee Berufsbeschreibung einer Floristin auf einer Webseite im Internet. Gestaltung mit HTML und internem CSS. Alle benötigten Dateien liegen unstrukturiert vor: o floristin.jpg o blindtext.pdf o html-gerüst-klein.html o weitere-infos.pdf Vorgehen Stammverzeichnis organisieren. html-gerüst-klein.html in index.html umbenennen. Je Abschnitt HTML-Elemente und dann CSS-Attribute erfassen. Vorgaben Die ganze Seite linksbündig ausrichten. Schriftgröße: 13pt. Hintergrundfarbe der Seite ist gelb. Einrückungen rechts, links vornehmen. Optional: H1-Überschriften in unterschiedlichen Farben. Seiteninhalt: Überschrift1: Was macht man in diesem Beruf? Überschrift2: Wo arbeitet man? Überschrift3: Was verdient man? Überschrift4: Weitere Informationen Link: zum Seitenanfang Ergebnis Überschrift1 Überschrift2 Überschrift3 Überschrift4

14

15 Blatt7 Provider & Co. Erläuterungen o Begriffe: Domain, Subdomain, Stammverzeichnis o Providersuche: googlen, allinkl-startseite o Login-Bereich beim Provider: Bereiche Domain, Subdomain, FTP o Filezilla: Funktionsweise und Dateien beim Provider anschauen Empfehlung: Bei mehreren Webseiten mit Subdomains arbeiten Übung4: Website online stellen o Einfache Website mit Filezilla hochladen o Subdomain beim Provider anlegen und mit Stammverzeichnis verbinden o Website mit Subdomain aufrufen

16

17 Blatt8 Randgebiete Bildbearbeitung JPEG o Geeignet für Fotos und Farbverläufe o 16 Mio Farben o Komprimierung mit Verlusten GIF o Geeignet für Grafiken, Text, wenigfarbige Bilder o 256 Farben o Verlustfreie Komprimierung o Transparenz möglich o Animation möglich Gebräuchliche Funktionen o Bilder komprimieren bzw. fürs Web speichern o Bildgröße anpassen o Bilder ausschneiden o Objekte freistellen o Farbermittlung o Farbverläufe o Hintergrund transparent machen SEO (Search Engine Optimization) Ziel: Website soll weit vorne bei Suchergebnissen platziert werden. Wichtige Begriffe: Suchwörter, Pagerank, Metatags, Backlinks, Linkkampagne Vorgehen bei Website-Erstellung o SEO von Anfang an berücksichtigen o Suchwörter finden o Konkurrenzseiten anschauen o Suchwörter verwenden in: Domain, Startseite, Head-Title, H1-Überschriften, Navigation, im Title-Attribut bei href, img o 4% des Seiteninhalts sollen Suchwörter sein Was wertet eine Website auf? o Die Startseite ist die wichtigste Seite für SEO o Backlinks auf anderen Seiten setzen: Stadtwiki, Linktausch, Foren, Blogs o Website regelmäßig aktualisieren o SEO ist ein langfristiger Prozess

18 o Metatags haben keine Bedeutung mehr (außer description) o SEO Cheat-Sheet: o Anmeldung der Website bei Google: Wichtige Adressen o HTML-Referenz auf deutsch: o CSS-Referenz auf deutsch: o HTML-Validator: o CSS-Validator: o Beispiele für CSS-Gestaltung: Nützliche Tools o Farbwähler: o Browsershots: o Impressumsassistent: Kostenloses Gästebuch: o Kostenloser Counter: o Slimbox für Fotogalerie: o Kostenloses Fotoarchiv: Empfohlene Literatur o Little Boxes 0, I und II, Peter Müller, Markt+Technik o Der CSS-Problemlöser, Rachel Andrew, dpunkt o Gelungenes Webdesign, Jason Beaird, dpunkt o Homepages mit HTML und CSS, Johann-Christian Hanke, Knowware o HTML Spielend gelingt die Website, Tobias Hauser, Markt+Technik

19 Blatt9 Übung5: Einfache Website nach Vorgabe Idee Es soll eine Website bestehend aus 3 Webseiten erstellt werden (siehe Grafik). Titel und Menüpunkte: Meine Homepage, Meine Familie, Meine Hobbies. Eine Verzeichnisstruktur mit Bildern liegt vor. Es soll eine externe CSS-Datei verwendet werden. index.html familie.html hobbies.html Vorgehen Schritt1: 3 HTML-Dateien und 1 CSS-Datei erstellen und mit Link-Element verbinden Schritt2: allgemeingültige Attribute in CSS-Datei definieren Schritt3: Menü in index.html erstellen. In restliche HTML-Dateien kopieren und testen Schritt4: Inhalt der index.html erstellen. Layout in CSS-Datei definieren. Schritt5: Inhalt der familie.html erstellen. Layout in CSS-Datei definieren. Schritt6: Inhalt der hobbies.html erstellen. Layout in CSS-Datei definieren. Für Schritt2 bis 6 gilt: Kommentare aus Vorgabe in HTML- und CSS-Datei kopieren und anschließend codieren. Vorgaben Schritt1: Dateien erstellen index.html, familie.html, hobbies.html, attribute.css Im link-element der HTML-Dateien den CSS-Dateinamen aktualisieren. Im title-element der HTML-Dateien einen Titel eintragen.

20 Schritt2: allgemeingültige Attribute definieren Attribute in CSS-Datei erfassen: /* Attribute im Body-Selektor: - Außenabstand links, rechts: 300 Pixel - Schriftgröße: 14 Point - Hintergrundbild mit Wiederholung: verlauf.jpg */ Schritt3: Menü erstellen Inhalt in index.html erfassen: <!-- Absatz mit den Links Meine Homepage, Meine Familie, Meine Hobbies --> <!-- Horizontale Linie --> Attribute in CSS-Datei erfassen: /* Attribute für Absatz Menü: - zentriert - Schriftgröße: 16 Point - fette Schrift - Innenabstand oben, unten: 20 Pixel */ /* Linkverhalten: - Link: grün, nicht unterstrichen - Besuchter Link: grün, nicht unterstrichen - Hover: unterstrichen */ /* Abstand zwischen Menüpunkten: - Innenabstand links, rechts: 10px */ /* Optional: aktuellen Menüpunkt hervorheben: - Farbe: weiß - Hintergrundfarbe: grün - Innenabstand links, rechts: 10px */ Danach: Klasse in Absatz einfügen. Menü in index.html testen. Danach in restliche HTML-Dateien kopieren und testen. Schritt4: Seite Meine Homepage erstellen Inhalt in index.html erfassen: <!-- h1-überschrift --> <!-- Absatz mit Bild --> <!-- Absatz mit Zeilenumbrüchen --> <!-- Horizontale Linie --> <!-- Absatz für Fußzeilentext. Mit Sonderzeichen für Copyright -->

21 Attribute in CSS-Datei erfassen: /* Ungebundene Klasse mit Attribut zentriert */ /* Attribute für Absatz Fußzeile: - zentriert - Schriftgröße: 9 Point - Innenabstand oben: 20 Pixel */ Danach: Zentriert-Klasse in Überschrift und Absätze einfügen. Schritt5: Seite Meine Familie erstellen Inhalt in familie.html erfassen: <!-- Absatz mit Blindtext und Bild ich.jpg --> <!-- Absatz mit Blindtext und Bild mama.jpg --> <!-- Absatz mit Blindtext und Bild papa.jpg --> Horizontale Linie und Absatz für Fußzeilentext aus index.html kopieren Attribute in CSS-Datei erfassen: /* Ungebundene Klasse mit Attribut rechtsbündig */ /* Attribute für linksbündiges Bild: - Außenabstand rechts: 20 Pixel - Außenabstand unten: 10 Pixel - Ausrichtung mit Attribut float */ /* Attribute für rechtsbündiges Bild: - Außenabstand links: 20 Pixel - Außenabstand unten: 10 Pixel - Ausrichtung mit Attribut float */ Danach: Linksbündig-Bildklasse in Bild in Absatz1 einfügen. Rechtsbündig-Klasse in Absatz2 einfügen. Rechtsbündig-Bildklasse in Bild in Absatz2 einfügen. Linksbündig-Bildklasse in Bild in Absatz3 einfügen. Schritt6: Seite Meine Hobbies erstellen Inhalt in hobbies.html erfassen: Je Hobby: <!-- h2-überschrift --> <!-- Absatz mit Hobby-Bild --> <!-- Absatz mit Blindtext --> <!-- Optional: Link zum Seitenanfang einfügen --> Horizontale Linie und Absatz für Fußzeilentext aus index.html kopieren

22 Attribute in CSS-Datei erfassen: /* Attribute für h2-überschrift: - Schriftgröße: 20 Point - Innenabstand alle Seiten: 10 Pixel - normale Schrift dh. nicht fett */ Danach: Rechtsbündig-Klasse in Überschrift und Absätze einfügen.

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

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

Mitschrift HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.

Mitschrift HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01. 1. Stunde Mitschrift HTML Bildbearbeitung in Hinblick auf HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.jpg Verstehen des Unterschiedes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Farb-, Text- und Schriftgestaltung mit CSS3

Farb-, Text- und Schriftgestaltung mit CSS3 CT» LPE 05» 03 Textgestaltung» Hintergrundgestaltung Farb-, Text- und Schriftgestaltung mit CSS3 Eine HTML5-Datei ist reine Textdatei. In dieser Datei wird lediglich der Inhalt und die Stuktur einer Webseite

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

Über den Link Inhalte bearbeiten in der Navigation erreichen Sie den Online Editor.

Über den Link Inhalte bearbeiten in der Navigation erreichen Sie den Online Editor. Homepage bearbeiten mit dem ezillo.com Online Editor Bei ezillo.com können Sie für Ihre kostenlose Erotik Homepage eigene Unterseiten erstellen und bearbeiten. Dazu steht Ihnen mit dem Online Editor ein

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

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

Format- oder Stilvorlagen

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

Mehr

Crashkurs HTML und CSS

Crashkurs HTML und CSS Crashkurs HTML und CSS 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

Mehr

http://www.therealgang.de/

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:

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

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

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

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

Einführung in HTML. Tutorium. Präsentation der Sitzung vom 2./9. Juni 2004 Martin Stricker

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

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

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

Inhalte mit DNN Modul HTML bearbeiten

Inhalte mit DNN Modul HTML bearbeiten Einführung Redaktoren Content Management System DotNetNuke Inhalte mit DNN Modul HTML bearbeiten DotNetNuke Version 7+ w3studio GmbH info@w3studio.ch www.w3studio.ch T 056 288 06 29 Letzter Ausdruck: 15.08.2013

Mehr

Tab. Seitenverwaltung Dokumentansichten

Tab. Seitenverwaltung Dokumentansichten Einstieg Hauptbildschirm Menuleiste Symbolleiste Bearbeiten Symbolleisten Format Tab Tab schliessen Tab, nicht gespeichert Seitenverwaltung Dokumentansichten Bearbeitungsfenster Pfad zum aktuellen HTML-Tag

Mehr

Textverarbeitung 1. 1. Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung

Textverarbeitung 1. 1. Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung Informatik - Text / HTML 1 Textverarbeitung 1 1. Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung Leistungsmerkmale Textverarbeitung ist Standardsoftware - nutzerorientiert,

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

Crashkurs Webseitenerstellung mit HTML

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,

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

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

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

Informatik und Programmiersprachen

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.

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

<>Mini HTML-Kurs<>

<>Mini HTML-Kurs<> <!- - Das ist ein Kommentar- -> Mini HTML-Kurs Dieser Mini HTML-Kurs soll Ihnen genau soviel HTML-Wissen vermitteln, wie Sie brauchen, um meine Homepage-Vorlagen nach Ihren Wünschen anpassen zu können. Ich werde Ihnen also genau

Mehr

HTML Programmierung. Aufgaben

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

Mehr

Zeile 3-7: Der Kopf der HTML-Datei. Hier werden unsichtbare Einstellungen für das ganze Dokument vorgenommen.

Zeile 3-7: Der Kopf der HTML-Datei. Hier werden unsichtbare Einstellungen für das ganze Dokument vorgenommen. Inhalt: Grundgerüst, Tags, Zeichensatz, Meta-Tags, Farben 1 2 3 4 titel der Datei 5 6

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

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

Grundlegende Webtechnologien

Grundlegende Webtechnologien Stefan Rothe 5. April 2011 Dieses Werk steht unter einer Attribution-NonCommercial-ShareAlike 3.0 License (CC BY-NC-SA). Inhaltsverzeichnis 1 Grundlagen 1 1.1 Webtechnologien... 1 1.1.1 Einleitung... 1

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

Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken.

Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken. Seite erstellen Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken. Es öffnet sich die Eingabe Seite um eine neue Seite zu erstellen. Seiten Titel festlegen Den neuen

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

Fachcurriculum ITG Albert-Schweitzer-Gemeinschaftsschule Klassenstufe 9/10 H. Bauer. Thema Inhalte/Umsetzung Programme Lehrplanbezug.

Fachcurriculum ITG Albert-Schweitzer-Gemeinschaftsschule Klassenstufe 9/10 H. Bauer. Thema Inhalte/Umsetzung Programme Lehrplanbezug. Fachcurriculum ITG Albert-Schweitzer-Gemeinschaftsschule Klassenstufe 9/10 H. Bauer Thema Grundlagen der Erstellung von Webseiten Maximalplan 1 Was man wissen sollten 2 Die erste Webseite mit HTML erstellen

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

Webseiten gestalten. Formulare und Urheberrecht. Arbeitsheft. Frank Braun, Christoph Rauber 1. Auflage, 2013 ISBN: 978-3-86249-237-4

Webseiten gestalten. Formulare und Urheberrecht. Arbeitsheft. Frank Braun, Christoph Rauber 1. Auflage, 2013 ISBN: 978-3-86249-237-4 Frank Braun, Christoph Rauber 1. Auflage, 2013 ISBN: 978-3-86249-237-4 Webseiten gestalten Grundlagen HTML5 und CSS, Formulare und Urheberrecht Bluefish, CSS, CMSimple Arbeitsheft RS-WEB-HTML5 1.2 grundstruktur

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

3 WEBSEITEN GESTALTEN

3 WEBSEITEN GESTALTEN Webseiten gestalten FrontPage effektiv 3 WEBSEITEN GESTALTEN 3.1 Textformatierung Um einen Text formatieren zu können, müssen Sie ihn zuvor markieren. Anschließend hilft Ihnen die Format-Symbolleiste dabei,

Mehr

Inhaltsübersicht. I Die Einleitung 25. VI Nützliche Werkzeuge 363. readme.txt zur zweiten Auflage 21. 1 Das Web st nicht aus Papier 27

Inhaltsübersicht. I Die Einleitung 25. VI Nützliche Werkzeuge 363. readme.txt zur zweiten Auflage 21. 1 Das Web st nicht aus Papier 27 Inhaltsübersicht readme.txt zur zweiten Auflage 21 I Die Einleitung 25 1 Das Web st nicht aus Papier 27 il HTML-Kästchen erstellen 39 2 So funktioniert HTML 41 3 Wichtige HTML-Elemente (1) 57 4 Wichtige

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

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

qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq

qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq Konzept für die e Learning Fortbildung wertyuiopasdfghjklzxcvbnmqwertyui

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

Der Editor und seine Funktionen

Der Editor und seine Funktionen Der Editor und seine Funktionen Für die Eingabe und Änderung von Texten steht Ihnen im Pflegemodus ein kleiner WYSIWYG-Editor zur Verfügung. Tinymce 1 ist ein Open Source Javascript-Editor, der mittlerweile

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

INDEXHIBIT 1. Voraussetzung: Serverunterstützung: Linux/Apache server* PHP4+ MySQL 3.23+

INDEXHIBIT 1. Voraussetzung: Serverunterstützung: Linux/Apache server* PHP4+ MySQL 3.23+ INDEXHIBIT 1 Download: www.bgames.ch/hibit.zip Voraussetzung: Serverunterstützung: Linux/Apache server* PHP4+ MySQL 3.23+ Datenbank einrichten: Anleitung zum einrichten einer Datenbank sollten sich auf

Mehr

Webseiten-Erstellung mit Mini-CMS Von Norbert Willimsky 01.04.2015

Webseiten-Erstellung mit Mini-CMS Von Norbert Willimsky 01.04.2015 Webseiten-Erstellung mit Mini-CMS Von 01.04.2015 Persönliche Voraussetzungen Einfache HTML-Kenntnisse Umgang mit einem FTP-Tool Todos im Überblick Einmalig: Webseite planen Einmalig: Vorlage herunterladen

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

RÖK Typo3 Dokumentation

RÖK Typo3 Dokumentation 2012 RÖK Typo3 Dokumentation Redakteur Sparten Eine Hilfe für den Einstieg in Typo3. Innpuls Werbeagentur GmbH 01.01.2012 2 RÖK Typo3 Dokumentation Inhalt 1) Was ist Typo3... 3 2) Typo3 aufrufen und Anmelden...

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

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

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

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

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

Diese Seite kann auch als pdf-file heruntergeladen werden.

Diese Seite kann auch als pdf-file heruntergeladen werden. Kleines Vademecum für cms 3.0 (artmedic) Trifles-Kleinigkeiten Diese Seite kann auch als pdf-file heruntergeladen werden. Bearbeitungsprogramm starten Browser starten In Browserfenster der Website.ch/cms_index.php

Mehr

Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere.

Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere. 1.0.0 Allgemeine Informationen Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere. Wir werden uns hauptsächlich mit HTML beschäftigen, weil

Mehr

Inhalte mit DNN Modul HTML bearbeiten

Inhalte mit DNN Modul HTML bearbeiten Einführung Redaktoren Content Management System DotNetNuke Inhalte mit DNN Modul HTML bearbeiten DNN Version ab 5.0 w3studio GmbH info@w3studio.ch www.w3studio.ch T 056 288 06 29 Letzter Ausdruck: 22.08.2011

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

Seiten für das WWW selber gestalten. html. Kopf. Körper. Beispiel

Seiten für das WWW selber gestalten. html. Kopf. Körper. Beispiel Seiten für das WWW selber gestalten Eine Seite im WWW ist in einer Programmiersprache geschrieben. Wir werden nicht die Details einer Programmierung anschauen. Es wird uns nützlich sein, zu wissen, wie

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

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

Stichpunkte zum Aufbau einer HTML-Website

Stichpunkte zum Aufbau einer HTML-Website Stichpunkte zum Aufbau einer HTML-Website Aufbau eines HTML-Dokumentes: HTML = Hyper Text Markup Language Texteditor zur Befehlseingabe oder im Browser (MIE) Ansicht Quellcode Tags = HTML-Befehle - immer

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

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

-Wählen Sie die gewünschten Kriterien für die Selektion und klicken Sie anschließend auf OK um die Datensätze zu selektieren.

-Wählen Sie die gewünschten Kriterien für die Selektion und klicken Sie anschließend auf OK um die Datensätze zu selektieren. HowTo: Personalisierte Serienemails aus Selektion (ggf. mit Anhang) Versionen: CRM 5, CRM SIX I. Vorbereitung a) Erstellen einer Selektion -Grundlage für alle Serienbriefe oder Serienemails mit SuperOffice

Mehr

Leseprobe. »CSS kennenlernenselektoren, Einheiten und Farben in CSSDas Box-ModellOrdnung halten und aufräumen« Inhaltsverzeichnis. Index.

Leseprobe. »CSS kennenlernenselektoren, Einheiten und Farben in CSSDas Box-ModellOrdnung halten und aufräumen« Inhaltsverzeichnis. Index. Wissen, wie s geht. Leseprobe In seinem Buch erklärt Ihnen Peter Müller unterhaltsam und kurzweilig die Grundlagen und Raffinessen von CSS. In dieser Leseprobe legen Sie die Basis für ein umfangreiches

Mehr

Herzlich Willkommen bei der Seitenadministration von page control

Herzlich Willkommen bei der Seitenadministration von page control Herzlich Willkommen bei der Seitenadministration von page control Webadresse: Administration: Benutzername: Passwort: 1. Anmelden am Content Management System (CMS) 2. Startseite 3. Seiten bearbeiten Neue

Mehr

Suchmaschinenoptimierung - 16 Tuning-Tipps wie Sie Ihre Website selber auf Platz 1 in allen Suchmaschinen katapultieren

Suchmaschinenoptimierung - 16 Tuning-Tipps wie Sie Ihre Website selber auf Platz 1 in allen Suchmaschinen katapultieren Suchmaschinenoptimierung - 16 Tuning-Tipps wie Sie Ihre Website selber auf Platz 1 in allen Suchmaschinen katapultieren Sie möchten die Positionierung Ihrer Internetseiten verbessern? Dann sollten Sie

Mehr

CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS

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

Mehr

Kapitel 8 HTML. Copyright by Worldsoft AG, 2014, Pfäffikon SZ, Switzerland. Version: 02.10.2014 Seite 1

Kapitel 8 HTML. Copyright by Worldsoft AG, 2014, Pfäffikon SZ, Switzerland. Version: 02.10.2014 Seite 1 Kapitel 8 Notwendige Voraussetzungen für diese Schulung: Internetfähiger Computer mit aktuellem Browser (z.b. Firefox, Internet Explorer) Bild- und Textvorlagen: Diese Vorlagen finden Sie auf der CC-Website

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

Kurzeinführung in HTML

Kurzeinführung in HTML Kurzeinführung in HTML (Grundlage: SelfHTML: http://de.selfhtml.org/) Autor: Jan-Willem Waterböhr (webmaster-geschichte@uni-bielefeld.de) Stand: 23.12.2011 Inhaltsverzeichnis Kurzeinführung in HTML...1

Mehr

Seiten und Inhalte verlinken

Seiten und Inhalte verlinken Seiten und Inhalte verlinken 70 Seiten verlinken Erstellen Sie zwei HTML-Seiten und speichern Sie sie unter den Namen seite.html und seite.html. Fügen Sie in seite.html ein -tag ein, um auf Seite zu

Mehr

Dreamweaver 8 Homepage erstellen Teil 2

Dreamweaver 8 Homepage erstellen Teil 2 Dreamweaver 8 Homepage erstellen Teil 2 Voraussetzungen Das vorliegende Skriptum knüpft an folgende Skripten an und setzt voraus, dass du diese bereits durchgearbeitet hast. Dreamweaver_Einführung.pdf

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

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

HILFE ZUM ÄNDERN VON INHALTEN

HILFE ZUM ÄNDERN VON INHALTEN HILFE ZUM ÄNDERN VON INHALTEN Erste Schritte - Loggen Sie sich mit dem Benutzernamen und dem Passwort ein. Bestätigen mit Enter-Taste oder auf den grünen Button klicken. hier bestätigen - Wählen Sie den

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

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

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

Wiederholung float+clear. Grundlagen Webgestaltung Seite 136

Wiederholung float+clear. Grundlagen Webgestaltung Seite 136 Wiederholung float+clear Grundlagen Webgestaltung Seite 136 float und clear clear kann für mehrspaltige Layouts verwenden werden. Jedoch kann das auch zu ungewollten Effekten führen. Angenommen eine Webseite

Mehr