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

1 Definition der Selektoren Einbinden der CSS 3 Möglichkeiten Farbangaben Schriftformatierung Abstände...

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...

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

Allgemeine Technologien II Wintersemester 2011 / November 2011 CSS

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-,

Mehr

Allgemeine Technologien II Sommersemester Mai 2011 CSS

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

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

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

Beschreibung Tags Schlüsselwort. Schriftart. Die Liste ist keineswegs erschöpfend.

  • 'Arial','Helvetica','Tahoma','Verdana'
  • Beschreibung Tags Schlüsselwort. Schriftart. Die Liste ist keineswegs erschöpfend. <p><h1...6 > <li><td> <body> 'Arial','Helvetica','Tahoma','Verdana' Die Liste ist keineswegs erschöpfend. Beschreibung Tags Schlüsselwort Werte Schriftart font-family: 'Arial','Helvetica','Tahoma','Verdana' serif = eine Schriftart mit Serifen,

    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

    4. Briefing zur Übung IT-Systeme

    4. Briefing zur Übung IT-Systeme 4. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde,, PC Pool Stand und Ausblick Einführung: 18.10.2016, 12.00 Uhr (c.t.), HS 4/PC Pool Fragestunde: 09.11.2016, 12.00

    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

    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

    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

    Ü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 Ü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:

    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

    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

    CSS Cascading Style Sheets

    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,

    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

    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

    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

    Ü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

    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

    3. Briefing zur Übung IT-Systeme

    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,

    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

    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

    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

    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

    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

    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

    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

    3. Briefing zur Übung IT-Systeme

    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

    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

    Praktikum im Grundstudium

    Praktikum im Grundstudium Praktikum im Grundstudium Teil 2: Layout mit CSS Zweck von Stylesheets Ergänzung zu XHTML XHTML legt Struktur des Dokuments fest Definiert Formateigenschaften Trennung von Inhalt und Layout Stylesheet

    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

    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

    Introduction to Technologies for Interaction Design. Stylesheets

    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

    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

    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

    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

    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

    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

    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

    ALLGEMEINES WOMIT KANN ICH WEBSITES ERSTELLEN?

    ALLGEMEINES WOMIT KANN ICH WEBSITES ERSTELLEN? HTML AG INHALT Allgemeines... 2 Womit kann ich Websites erstellen?... 2 Grundgerüst von HTML... 3 Tags und Attribute... 3 Links... 4 Links auf andere Seiten... 4 Bilder... 5 meta-tags... 5 Webseiten mit

    Mehr

    Cascading Style Sheets II (CSS)

    Cascading Style Sheets II (CSS) Cascading Style Sheets II (CSS) CSS ist ein Befehlssystem, das die Erscheinungsform von HTML-Elementen regelt. Bei modernen Websites ist der Inhalt der Site unabhängig vom Layout. HTML übernimmt den Inhalt,

    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

    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

    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 6+ w3studio GmbH info@w3studio.ch www.w3studio.ch T 056 288 06 29 Letzter Ausdruck: 14.09.2012

    Mehr

    <body> <header> <nav> <div> <article> <section> <footer> <aside> <a> <!DOCTYPE html> <header>logo</header> <body><main>... </body> logo ... beliebige Inhalte >Menu ...

    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

    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

    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

    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

    Introduction to Technologies. Stylesheets mit CSS

    Introduction to Technologies. Stylesheets mit CSS Introduction to Technologies Stylesheets mit CSS HTML-CSS enthält den Inhalt HTML- Datei *.html CSS- Datei *.css enthält die Layoutangaben ist austauschbar Darstellung des Seiteninhaltes im erstellten

    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

    Veranstaltung Systementwicklung. HTML und CSS. Uwe H. Suhl und Chris Bizer SS 2008

    Veranstaltung Systementwicklung. HTML und CSS. Uwe H. Suhl und Chris Bizer SS 2008 Veranstaltung 10033013 Systementwicklung HTML und CSS Uwe H. Suhl und Chris Bizer SS 2008 HTML - Hypertext Markup Language HTML ist eine Auszeichnungssprache für Web-Dokumente Auszeichnungssprachen Auszeichnen

    Mehr

    Tutorial zum erstellen einer Webseite

    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,

    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

    Webdesign-Multimedia HTML und CSS

    Webdesign-Multimedia HTML und CSS Webdesign-Multimedia HTML und CSS Thomas Mohr 1 HTML 1.1 Was ist HTML? HTML steht für Hypertext Markup Language und ist eine Auszeichnungssprache zur Strukturierung digitaler Dokumente. HTML-Dokumente

    Mehr

    Cascading Stylesheets (CSS)

    Cascading Stylesheets (CSS) Cascading Stylesheets (CSS) Cascading Stylesheets trennen Webdesign vom eigentlichen Inhalt. Die Vererbung, sprich Kaskadierung, von festgelegten Stilen wird allerdings erst bei fortgeschrittenen Programmierkenntnissen

    Mehr

    E-Commerce: IT-Werkzeuge. Web-Programmierung. Kapitel 3: Webdesign mit CSS Stand: Übung WS 2015/2016. Benedikt Schumm M.Sc.

    E-Commerce: IT-Werkzeuge. Web-Programmierung. Kapitel 3: Webdesign mit CSS Stand: Übung WS 2015/2016. Benedikt Schumm M.Sc. Übung WS 2015/2016 E-Commerce: IT-Werkzeuge Web-Programmierung Kapitel 3: Stand: 30.10.2015 Benedikt Schumm M.Sc. Lehrstuhl für ABWL und Wirtschaftsinformatik Katholische Universität Eichstätt-Ingolstadt

    Mehr

    qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq

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

    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

    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

    Die Programmiersprache des Webs. HTML HyperText Markup Language Hypertext - Auszeichnungssprache

    Die Programmiersprache des Webs. HTML HyperText Markup Language Hypertext - Auszeichnungssprache Was ist HTML? Die Programmiersprache des Webs HTML HyperText Markup Language Hypertext - Auszeichnungssprache Dateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie

    Mehr

    1. Einstieg 2. Selektoren 3. Schriften 4. Strukturen 5. Zwischenräume, Abstände 6. Bilder 7. Farben 8. Beispiel

    1. Einstieg 2. Selektoren 3. Schriften 4. Strukturen 5. Zwischenräume, Abstände 6. Bilder 7. Farben 8. Beispiel Inhalt 1. Einstieg 2. Selektoren 3. Schriften 4. Strukturen 5. Zwischenräume, Abstände 6. Bilder 7. Farben 8. Beispiel Einstieg - Eine Formatvorlage besteht aus mindestens einer Anweisung. - Eine Anweisung

    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

    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

    Digitale Medien. Übung zur Vorlesung. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid

    Digitale Medien. Übung zur Vorlesung. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid Übung zur Vorlesung Digitale Medien Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid Wintersemester 2016/17 Cascading Style Sheets HTML beschreibt nur den logischen Aufbau eines Dokuments. Die Gestaltung

    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

    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

    Umsetzen einer skalierbaren horizontalen Navigation:

    Umsetzen einer skalierbaren horizontalen Navigation: Umsetzen einer skalierbaren horizontalen Navigation: Erstelle im Dreamweaver eine neue HTML - Datei (navigation.html) und eine CSS Datei (navigation.css). Die Struktur dieser Navigation soll auf einer

    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

    CSS - Cascading Stylesheets

    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

    Mehr

    Abgabetermin: , 23:59 Uhr

    Abgabetermin: , 23:59 Uhr HTML 19.01.2016 Projektanforderungen Struktur: Zentrale (index-)seite Sinnvolle Ordnerstruktur von index.html aus verlinkte Seiten mit Querverweisen (insgesamt mindestens 3 Seiten) Elemente, die irgendwo

    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

    HTML. Hypertext Markup Language

    HTML. Hypertext Markup Language HTML Hypertext Markup Language Begriff Markup Begriff aus Druckindustrie: Layouter fügt Anmerkungen/Markierungen (Tags) hinzu Markup-Languge (ML) = Auszeichnungssprache Beispiele a) das Wort wird fett

    Mehr

    GRUNDLAGEN HTML + CSS

    GRUNDLAGEN HTML + CSS GRUNDLAGEN HTML + CSS Bitte beachten Sie mein Urheberrecht. Keine Veröffentlichung auch nicht in Auszügen - oder Weitergabe an Dritte ohne mein Einverständnis. alle Rechte vorbehalten: BüroSmart, Michaela

    Mehr

    Inhalt. Vorwort 13. Teil I CSS kennenlernen: Einstieg in XHTML und CSS

    Inhalt. Vorwort 13. Teil I CSS kennenlernen: Einstieg in XHTML und CSS Inhalt Vorwort 13 Teil I CSS kennenlernen: Einstieg in XHTML und CSS 1 Auf die Plätze 17 1.1 Wozu CSS lernen? 18 1.2 Wem nützt dieses Buch? 19 1.3 Wie funktioniert dieses Buch? 19 2 Was Sie wissen sollten

    Mehr

    HTML & CSS. Beispiele aus der Praxis

    HTML & CSS. Beispiele aus der Praxis HTML & CSS Beispiele aus der Praxis Übungsblatt 2 http://www.uni-koblenz.de/~ugotit Fragen? Wiederholung Beispiele von.../~ugotit/test/index.htm zu.../~ugotit/test2/html/index.htm Absoluter Pfad relativ

    Mehr

    CSS-Boxen. Hans Gell Schulungen & Dienstleistungen Übersicht der Schulungsinhalte

    CSS-Boxen. Hans Gell Schulungen & Dienstleistungen  Übersicht der Schulungsinhalte CSS-Boxen Übersicht der Schulungsinhalte Das Web ist nicht aus Papier enttäuschte Erwartungen Autor hat keine Kontrolle Webseiten sehen immer anders aus Webseiten sind flexibel - Papierseiten sind starr

    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

    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

    Selektoren in CSS. HTML/CSS 21. November 2013 E1. 1. Beispiel: Kinder und Enkel

    Selektoren in CSS. HTML/CSS 21. November 2013 E1. 1. Beispiel: Kinder und Enkel Selektoren in CSS 1. Beispiel: Kinder und Enkel universal Selektor body { font family: sans serif; color : #666; div { border:

    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

    <>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

    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

    Praktikum 8: CSS-Layout

    Praktikum 8: CSS-Layout WEB1 Web-Technologien 1 Praktikum 8: CSS-Layout Gerrit Burkert, 01.11.2014 Ziele In einem früheren Praktikum haben Sie den HTML-Code für eine Reisebüroseite gemacht. Ziel dieses Praktikums ist es, die

    Mehr

    Macromedia Dreamweaver 8 CS3

    <Trainingsinhalt> Macromedia Dreamweaver 8 CS3 Macromedia Dreamweaver 8 CS3 inhaltsverzeichnis EINFÜHRUNG 1 Was werden Sie lernen? 3 Minimale Systemanforderungen: Macintosh 4 Minimale Systemanforderungen: Windows 5 LEKTION 1 DREAMWEAVER-GRUNDLAGEN

    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

    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

    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

    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

    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

    HTML-Kurzübersicht 1. Die wichtigsten Elemente. HTML-Kurz-Übersicht

    HTML-Kurzübersicht 1. Die wichtigsten Elemente. HTML-Kurz-Übersicht HTML-Kurzübersicht 1 Alle HTML-Elemente können wie Kästen (little boxes) gedacht werden. Sie werden mit einem Etikett (tag) aufgemacht und mit einem Etikett desselben Namens geschlossen. Der

    Mehr

    Inhalt HTML 2. Applets Frames Formulare CSS cascading style sheets. Lehrveranstaltung Internet in AT Dr.-Ing. A. Braune TECHNISCHE UNIVERSITÄT DRESDEN

    Inhalt HTML 2. Applets Frames Formulare CSS cascading style sheets. Lehrveranstaltung Internet in AT Dr.-Ing. A. Braune TECHNISCHE UNIVERSITÄT DRESDEN Inhalt HTML 2 Applets Frames Formulare CSS cascading style sheets SS 06 1 Applets Das Applet Java Applets sind kleine Java-Programme mit deren Hilfe aktive Webseiten erstellt werden können. werden mit

    Mehr