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

Transkript

1 Einführungskurs HTML-CSS ohne Buch Von Stand: Inhalt Grundlegendes... 2 Einführung in HTML... 4 Übung1: HTML und einfaches CSS anwenden... 5 Einführung in CSS... 6 Übung2: CSS anwenden... 8 Übung3: Webseite nach Vorgabe... 9 Provider & Co Übung4: Website online stellen Übung5: Einfache Website nach Vorgabe Randgebiete Legende zum Skript 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 Einführungskurs HTML-CSS ohne Buch Seite 1

2 Grundlegendes Wichtige Begriffe Webseiten: Website, Webseiten, Homepage HTML: Hypertext Markup Language besteht aus HTML-Elementen, HTML-Attributen, Sonderzeichen CSS: Cascading Style Sheets besteht aus CSS-Attributen Editor: z.b. Phase5 Browser: 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 Einführungskurs HTML-CSS ohne Buch Seite 2

3 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 Übung0: Erstes HTML und CSS Einführungskurs HTML-CSS ohne Buch Seite 3

4 Einführung in HTML HTML heißt Hypertext Markup Language. Eine Auszeichnungsprache für Seiteninhalte. Die im Kurs verwendete Version ist XHTML (extensible HTML). HTML besteht aus Elementen, Attributen und Entitäten. Elemente enthalten den Inhalt, Attribute das Layout und Entitäten sind Sonderzeichen. HTML-Elemente Beispiel: <h1> überschrift </h1> Anfangs-Tag, Inhalt, Ende-Tag (sprich: TÄK). Es gibt auch HTML-Elemente ohne Ende-Tag. Es gibt Block- und Inline-Elemente. Diese unterscheiden sich im Absatzverhalten. HTML-Attribute Beispiel: <img src= foto1.jpg /> Attribute stehen im Anfangs-Tag des HTML-Elements. Der Attributswert steht in Hochkomma. Keine Leerzeichen zwischen Attributsname, Gleichheitszeichen und Wert. Mehrere Attribute werden durch Leerzeichen getrennt. Die Attributsreihenfolge ist irrelevant. Anmerkung: In diesem Kurs werden keine HTML-Attribute zur Layouterstellung verwendet, da veraltet. Das Layout wird immer mit CSS gestaltet. HTML-Attribute ohne CSS- Entsprechnung werden weiterhin verwendet. (vgl. Liste Wichtige HTML-Elemente ) Entitäten Sie dienen der Maskierung von Sonderzeichen im Text und zur Erzwingung der Anzeige. Beispiele: " Weiterhin gilt: o Grundgerüst einer HTML-Datei: DOCTYPE-Zeile, HTML-, HEAD-, BODY-Element. o Im HEAD stehen Meta-Tags und das Title-Tag. Alles was im BODY steht, wird im Browser angezeigt. o Bei Verschachtelung von HTML-Elementen gilt: zuerst geöffnet, zuletzt geschlossen. Beispiel: <p> <strong> text </strong> </p> o Inline-Elemente müssen immer in Blockelementen stehen. Inline-Elemente dürfen keine Blockelemente enthalten. Blockelemente dürfen keine Blockelemente enthalten. o Kommentare werden im Browser nicht angezeigt. Syntax: <!- - kommentar -- > Einführungskurs HTML-CSS ohne Buch Seite 4

5 Übung1: HTML und einfaches CSS anwenden Vorgehen o Eine Index-Datei mit unstrukturiertem Text und ein Bilder-Verzeichnis sind vorhanden o Den Text mit HTML auszeichnen o Hierfür die Liste Wichtige HTML-Elemente verwenden Anzuwendende HTML-Elemente o Seitentitel o Überschriften o Absatz, Textausrichtung, Zeilenumbruch o Schriftgröße, Schriftfarbe o Inline-Elemente strong, em o Bild, Bildattribute, Pfadproblematik o Bild mit umfließendem Text o Links (auf Internetadresse, Datei, Bild, Skiplink) o Link auf zweite Webseite o ungeordnete und geordnete Liste (mit CSS) o einfache Tabelle Übung1a: HTML-Diktat Einführungskurs HTML-CSS ohne Buch Seite 5

6 Einführung in CSS Grundlegendes CSS = Cascading Style Sheets, Formatvorlagen, CSS-Regeln, CSS-Attribute. Gestaltung von Schrift, Farben, Text, Abständen, Rändern, Positionierungen. Trennung von Inhalt und Layout ist erst mit CSS effektiv möglich. Syntax einer CSS-Attributs: selektor {attribut: wert;} 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;} Einführungskurs HTML-CSS ohne Buch Seite 6

7 Weiterhin gilt: o Zwischen Attributswert und Maßeinheit kein Leerzeichen o Klassennamen ohne Umlaute, keine Zahl am Anfang o Mehrere Klassen mit Leerzeichen trennen o Selektoren gruppieren: h1, h2 {color: black;} o Selektoren verschachteln: #header h1 {color: black;} o Kurzschreibweisen: padding: 10px 20px 30px 40px; border: 1px solid black; CSS-Boxmodell Quelle: Collapsing margins: bei sich berührenden vertikalen Außenabständen zweier Boxen entfällt der kleinere Wert Einführungskurs HTML-CSS ohne Buch Seite 7

8 Übung2: CSS anwenden Vorgehen o Eine Index-Datei mit ausgezeichnetem Inhalt ist vorhanden o CSS-Attribute werden im style-element deklariert o Hierfür die Liste Wichtige CSS-Attribute verwenden Anzuwendende CSS-Attribute o Überschrift: text-align, color, font-size, font-weight o Absatz: font-size, color, background-color o Klassen: bei Absätzen mit unterschiedlchen Eigenschaften verwenden o Absätze und Abstände: Boxmodell erläutern, Boxen farblich sichtbar machen, o margin, padding, width, height o Body: Hintergrundbild einbauen, mit Wiederholung (Kachelung), mit Positionierung o Listen: Listenattribute (optional: Bild als Aufzählzeichen) o Links: Pseudoklassen beim A-Selektor Übung2a: CSS-Diktat Einführungskurs HTML-CSS ohne Buch Seite 8

9 Ü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 Einführungskurs HTML-CSS ohne Buch Seite 9

10 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 Einführungskurs HTML-CSS ohne Buch Seite 10

11 Ü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. Schritt2: allgemeingültige Attribute definieren Attribute in CSS-Datei erfassen: /* Attribute im Body-Selektor: Einführungskurs HTML-CSS ohne Buch Seite 11

12 - 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 --> Attribute in CSS-Datei erfassen: /* Ungebundene Klasse mit Attribut zentriert */ /* Attribute für Absatz Fußzeile: - zentriert Einführungskurs HTML-CSS ohne Buch Seite 12

13 - 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 Attribute in CSS-Datei erfassen: /* Attribute für h2-überschrift: - Schriftgröße: 20 Point - Innenabstand alle Seiten: 10 Pixel - normale Schrift dh. nicht fett */ Einführungskurs HTML-CSS ohne Buch Seite 13

14 Danach: Rechtsbündig-Klasse in Überschrift und Absätze einfügen. 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 Einführungskurs HTML-CSS ohne Buch Seite 14

15 o SEO ist ein langfristiger Prozess 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 Einführungskurs HTML-CSS ohne Buch Seite 15