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

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