HTML+CSS für Einsteiger - Vom Doctype zum Style

2.703 Aufrufe

Veröffentlicht am

Slideshow zum Kurs HTML+CSS - Vom Doctype zum Style. Wie man als Einsteiger mit HTML und CSS erstaunliche Ergebnisse in kurzer Zeit erreichen kann.

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.703
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
30
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

HTML+CSS für Einsteiger - Vom Doctype zum Style

  1. 1. HTML+CSS GINO CREMER 2013HTML+CSS www. ginocremer .net
  2. 2. Was ist HTML?
  3. 3. HTML...ist der UnterbauHTML steht für Hypertext Markup Language und ist die “Auszeichnungssprache” für Websites.HTML steckt hinter jeder Website und definiert deren “Aufbau” bzw. “Chassis” (Fahrgestell)HTML definiert NICHT das Aussehen einer Website, sondern lediglich die Struktur.HTML besteht aus so genannten “HTML-Tags” in eckigen Klammern z.B. <p>Text</p>HTML+CSS www. ginocremer .net
  4. 4. Und CSS?
  5. 5. CSS definiert das Aussehen einer Website CSS bedeutet Cascading StyleSheets CSS ist wie eine Formatvorlage/Stilvorlage CSS erlaubt konsequente Trennung zwischen Struktur und Layout CSSHTML+CSS ...ist der Lack!ginocremer www. .net
  6. 6. Web Basics Etwas Technik...
  7. 7. Webdesigner “Clients” (die Rechner der Besucher) Datenbank FTP (bei komplexeren Websites) HTTP H TML HTTP Dateisystem HTTP Ablageort der HTML-DateienRuft ein Besucher eine Website auf, wird bei statischen Websites direkt das HTML-Dokument aus dem Dateisys-tem (Festplatte des Servers) ausgeliefert (über HTTP). Bei komplexeren Websites wird die Anfrage erst an eineDatenbank durchgereicht, die das HTML-Dokument “dynamisch” zusammenstellt und dem Besucher ausliefert.Die Daten selber kann der Webdesigner z.B. über FTP in das Dateisystem überspielen.HTML+CSS www. ginocremer .net
  8. 8. Die populärsten Browser im ÜberblickNeben diesen Browsern gibt es noch zahlreiche andere (Prozentwerte = Verteilung weltweit) Google Mozilla Opera Softw. Apple Microsoft Chrome Firefox Opera Safari Internet Explorer 18,04% 19.82% 1,71% 5,24% 54,77%Chrome ist der populärste Browser in Asien, Europa und Südamerika.Internet Explorer in Nordamerika, in Teilgebieten Chinas, sowie in Japan und Südkorea.Firefox ist der beliebteste Browser in Deutschland und Afrika.Opera in Weissrussland.Safari spielt eine sehr wichtige Rolle auf mobilen Endgeräten (iPad, iPhone,...)Quelle für alle Daten: StatcounterHTML+CSS www. ginocremer .net
  9. 9. Die Browser-WeltkarteQuelle: http://en.wikipedia.org/wiki/File:Countries_by_most_used_web_browser.svg Chrome Firefox Internet Explorer OperaHTML+CSS www. ginocremer .net
  10. 10. Große Herausforderungen für WebdesignerNach dem Browserkrieg der 90er, stellt die ungeheure Gerätevielfalt Webdesigner täglich auf dieProbe:• Viele unterschiedliche Geräte (Smartphones, Tablets, Notebooks, Desktops,...)• Viele unterschiedliche Systeme (Windows, Mac, Linux, Android, iOS, Windows Phone,...)• Viele unterschiedliche Bildschirm-Auflösungen (Retina)• Man nutzt das Internet mobil und fix gleichermaßen (immer stärker mobil)• Websites müssen entsprechend für mobile Endgeräte aufbereitet sein (Eile, kurze La- dezeiten, schlechte Lichtverhältnisse,...)HTML+CSS www. ginocremer .net
  11. 11. Konzept!Vor dem Start: Köpfchen!
  12. 12. Die 4 “W” der Website-Konzeption• AS will man mit der Website erreichen? (Konkrete Zielsetzungen!) W• EN will man mit der Website erreichen? (Zielgruppe!) W• IE will man die Zielgruppe erreichen (Fotos, Video, Text, Offline, Online?) W• OMIT will man die Zielgruppe erreichen? (Website, Facebook, Newsletter) WDie Seitenstruktur (Beispiel)Erstellung eines Baumdiagrammes mit den Inhalten (geordnet im Sinne der Nutzer!!)Faustregel: 7 +- 2 (Maximal 9) Startseite (Sprachauswahl) Über Uns Produkte Kontakt Team Kategorie A Anfahrt Filialen Kategorie B Öffungszeiten Geschichte ImpressumHTML+CSS www. ginocremer .net
  13. 13. Das Layout skizzierenFlotte Skizzierung der wichtigsten Inhaltsbereiche vor dem Start Kopfleiste Menüleiste Inhalt FussleisteHTML+CSS www. ginocremer .net
  14. 14. Los geht’s!Unser erstes HTML Dokument
  15. 15. Ein erstes einfaches HTML(5)-DokumentSiehe Beispiel 1<!DOCTYPE html><html lang=”de”> <head> <meta charset=”utf-8”> Gut zu wissen <title>Titel der Seite</title> Eine HTML-Datei ist eine ganz normale Text- <link rel=”stylesheet” href=”style.css”> Datei und kann mit jedem Text-Editor geöffnet <script src=”script.js”></script> und geändert werden. Einzig die Dateiendung „.html“ unterscheidet sie von einer Textdatei. </head> <body> <!-- page content --> </body></html>HTML+CSS www. ginocremer .net
  16. 16. Ein erstes einfaches HTML(5)-DokumentSiehe Beispiel 1 Jedes HTML Dokument startet mit einem “Doctype” Dieser ist dank des abwärtskompatiblen HTML5 sehr<!DOCTYPE html> einfach gestrickt. Der Doctype teilt dem Browser mit,<html lang=”de”> dass es sich um ein HTML-Dokument handelt. Der Da- teiname (Dateiendung) wäre nicht ausreichend. <head> <meta charset=”utf-8”> <title>Titel der Seite</title> <link rel=”stylesheet” href=”style.css”> <script src=”script.js”></script> </head> Gut zu wissen <body> Die wichtigste Datei trägt in einem Ordner im- <!-- page content --> Hallo Welt mer den Namen „index.html“. Diese bildet die Hauptseite und wird als erstes aufgerufen </body> noch vor allen anderen.</html>HTML+CSS www. ginocremer .net
  17. 17. Ein erstes einfaches HTML(5)-DokumentSiehe Beispiel 1<!DOCTYPE html> Anschließend folgt ein HTML-Element. Da HTML per<html lang=”de”> se “sprachunabhängig” ist, sollte eine Sprache defi- <head> niert werden. In diesem HTML-Element (html) stoßen <meta charset=”utf-8”> wir das erste mal auf ein so genanntes “Attribut” (lang) mit einem “Wert” (de). <title>Titel der Seite</title> Das „html“-Element besteht aus einem „Start-Tag“ <link rel=”stylesheet” href=”style.css”> und einem „End-Tag“. <script src=”script.js”></script> </head> <body> <!-- page content --> Hallo Welt </body> Gut zu wissen</html> „Tag“ ist Englisch und bedeutet „Markierung“HTML+CSS www. ginocremer .net
  18. 18. Ein erstes einfaches HTML(5)-DokumentSiehe Beispiel 1<!DOCTYPE html> Das „head“-Element besteht auch aus einem „Start- Tag“ (öffnet den Kopf) und einem „End-Tag“<html lang=”de”> (schließt den Kopf). Hier werden Informationen in <head> den „Header“ des Dokuments eingetragen. Dieser Bereich wird nicht dem Besucher angezeigt. <meta charset=”utf-8”> <title>Titel der Seite</title> <link rel=”stylesheet” href=”style.css”> <script src=”script.js”></script> </head> <body> <!-- page content --> Hallo Welt </body></html>HTML+CSS www. ginocremer .net
  19. 19. Ein erstes einfaches HTML(5)-DokumentSiehe Beispiel 1<!DOCTYPE html> Ein „Meta-Tag“ bietet weiterreichende Informationen. In unserem Fall definieren wir UTF-8 als Standard-Ko-<html lang=”de”> dierung (Charset-Attribut) der Website (gilt als Stan- <head> dard im Internet). Mit dem „Description-Attribut“ lässt sich für jede einzelne Seite eine Beschreibung defi- <meta charset=”utf-8”> nieren. Es gibt aber auch andere: <title>Titel der Seite</title> <meta name=“description“ content=“Beschreibung“> <meta name=“keywords“ content=“Wort,Begriff,...“> <link rel=”stylesheet” href=”style.css”> <meta name=“author“ content=“Name Autor“> <meta name=“generator“ content=“Dreamweaver“> <script src=”script.js”></script> <meta name=“robots“ content=“index,follow“> </head> ... <body> <!-- page content --> Hallo Welt </body></html>HTML+CSS www. ginocremer .net
  20. 20. Ein erstes einfaches HTML(5)-DokumentSiehe Beispiel 1<!DOCTYPE html> Ein „Title-Element“ definiert den Seitentitel einer Ein- zelseite. Er ist von großer Bedeutung, sowohl für<html lang=”de”> Suchmaschinen als auch für den Besucher. Der Titel <head> sollte passend für jede Unterseite definiert werden. Auch der „Title“ hat ein „Start-Tag“ und ein „End-Tag“. <meta charset=”utf-8”> <title>Titel der Seite</title> <link rel=”stylesheet” href=”style.css”> <script src=”script.js”></script> </head> Gut zu wissen <body> <!-- page content --> Hallo Welt N.B. Da sich das „Title-Element“ innerhalb des „Head“ befindet, kann man es auch als „Kind-Ele- </body> ment“ des „Eltern-Elementes“ Head bezeichnen.</html>HTML+CSS www. ginocremer .net
  21. 21. Ein erstes einfaches HTML(5)-DokumentSiehe Beispiel 1<!DOCTYPE html><html lang=”de”> Mittels eines „Link-Elementes“ können z.B. externe CSS-Dateien eingebunden <head> werden. Was CSS genau ist und wie <meta charset=”utf-8”> man es nutzt, erfahren wir später. <title>Titel der Seite</title> <link rel=”stylesheet” href=”style.css”> <script src=”script.js”></script> </head> <body> <!-- page content --> Hallo Welt </body></html>HTML+CSS www. ginocremer .net
  22. 22. Ein erstes einfaches HTML(5)-DokumentSiehe Beispiel 1 Mittels eines „Script-Elementes“ können<!DOCTYPE html> z.B. Javascript-Dateien eingebunden wer-<html lang=”de”> den. Diese reichern die Website um er- weiterte Funktionalitäten an. Javascript <head> wird direkt im Browser des Besuchers <meta charset=”utf-8”> ausgeführt. Die Anwendungsgebiete sind vielfältig. Oftmals stößt man in diesem Zu- <title>Titel der Seite</title> sammenhang heutzutage auf JQUERY <link rel=”stylesheet” href=”style.css”> <script src=”script.js”></script> </head> <body> <!-- page content --> Hallo Welt </body></html>HTML+CSS www. ginocremer .net
  23. 23. Ein erstes einfaches HTML(5)-DokumentSiehe Beispiel 1<!DOCTYPE html><html lang=”de”> <head> <meta charset=”utf-8”> <title>Titel der Seite</title> <link rel=”stylesheet” href=”style.css”> Im so genannten „Body-Bereich“ befindet <script src=”script.js”></script> sich alles, was direkt an den Browser/ Besucher ausgegeben wird. Es ist der </head> sichtbare Bereich (Körper). Hier wird der <body> Seitenaufbau betrieben, die Texte und Fo- tos integriert und alle Links aufgeführt. Mit <!-- page content --> Hallo Welt diesem Bereich beschäftigen wir uns am </body> meisten.</html>HTML+CSS www. ginocremer .net
  24. 24. Ein erstes einfaches HTML(5)-DokumentSiehe Beispiel 1<!DOCTYPE html><html lang=”de”> Interessant: Mittels so genannter „HTML- <head> Kommentare“ lassen sich Informationen <meta charset=”utf-8”> im Quellcode platzieren, die nicht direkt auf der Seite ausgegeben werden. Inte- <title>Titel der Seite</title> ressant für den Entwickler, um Bereiche <link rel=”stylesheet” href=”style.css”> im Code auszuzeichnen. Nicht geeignet für sensible Daten. Mit Einsicht des Quell- <script src=”script.js”></script> codes ist ja doch alles lesbar und sicht- </head> bar. Mit <!-- startet man einen Kommen- <body> tar. Man beendet ihn mit --> <!-- Ein HTML-Kommentar --> Hallo Welt </body></html>HTML+CSS www. ginocremer .net
  25. 25. Ein erstes einfaches HTML(5)-DokumentSiehe Beispiel 1<!DOCTYPE html><html lang=”de”> <head> <meta charset=”utf-8”> <title>Titel der Seite</title> <link rel=”stylesheet” href=”style.css”> <script src=”script.js”></script> Nur „Hallo Welt“ wird dem Besucher ausgeben. </head> <body> <!-- Ein HTML-Kommentar --> Hallo Welt </body></html>HTML+CSS www. ginocremer .net
  26. 26. WeitereHTML-Tags im Body-Bereich(TN: Pick-A-Tag / 3 Minuten - Recherche)
  27. 27. Titel im Body-Bereich definieren (Headings) Siehe Beispiel 2 H1-H6 Titel werden als “Headings” bezeichnet und von 1 bis 6 absteigend (Wichtigkeit) defi- niert. Rein von der “Semantik” ist es wichtig die Reihenfolge einzuhalten von 1 bis 6. Niemals ein Element nur aufgrund der optischen Werte auswählen. Dazu gibt es CSS! <body> <h1>Übertitel (am Wichtigsten)</h1> <h2>Untertitel</h2> <h3>Untertitel</h3> <h4>Untertitel</h4> <h5>Untertitel</h5> <h6>Untertitel (am Unwichtigsten)</h6> </body>HTML+CSS www. ginocremer .net
  28. 28. Geordnete und ungeordnete Listen Siehe Beispiel 2 UL / OL UL = Unordered List (mit Aufzählungszeichen und ungeordnet) OL = Ordered List (Nummeriert und geordnet) UL- und OL-Elemente sind immer umschließende Elemente, die “Listenelemente” beinhal- ten. Diese „Listenelemente“ werden mit <li> (List Item) </li> umschlossen. <body> <body> <ul> <ol> <li>Listenpunkt etwas</li> <li>Listenpunkt Eins</li> <li>Listenpunkt anderes</li> <li>Listenpunkt Zwei</li> </ul> </ol> </body> </body> • Listenpunkt etwas 1. Listenpunkt Eins • Listenpunkt anderes 2. Listenpunkt ZweiHTML+CSS www. ginocremer .net
  29. 29. Links und Querverweise Siehe Beispiel 2 A (Wie Anchor, Anker) Links sind das Salz in der HTML-Suppe. Doch alleine steht ein <a>-Tag nie. Es bedarf der notwendigen Attribute, um dem Link Leben einzuhauchen! href (Definiert das Link-Ziel) • „Absolute“ Links führen oftmals zu externen Websites: <a href=“http://www.google.com“> Link zur Google Website </a> • „Relative“ Links funktionieren nur intern (relativ zum Ablageort der HTML-Datei): <a href=“kontakt.html“> Kontaktieren Sie uns </a> „Mailto“ Links öffnen bei Klick direkt das Mailprogramm des Besuchers um eine E-Mail zu senden: • <a href=“mailto:mail@mail.com“> Schreiben Sie uns </a> title (Beschreibt den Link) <a href=“http://www.google.com“ title=“Linkbeschreibung“> Link zur Google Website </a> target (Erlaubt u.a. das Öffnen in neuem Fenster) <a href=“http://www.google.com“ target=“_blank“> In neuem Fenster öffnen (Google) </a>HTML+CSS www. ginocremer .net
  30. 30. Arbeiten mit relativen Links Siehe Beispiel 2 Relative Links haben gegenüber absoluten Links den Vorteil der Unabhängigkeit gegen- über „festgelegten“ Webadressen (absolute Verlinkungen). Relativ verknüpfte HTML-Seiten funktionieren immer untereinander (insofern nicht die Hi- erarchie) ändert, auch wenn der Ablageort ändert (oder keine Verbindung zum Internet besteht). 3 Möglichkeiten für einen korrekten relativen Link-Pfad 1. Liegt das Ziel im gleichen Verzeichnis wie das HTML-Dokument: <a href=“zieldatei.html“>Ziel</a> 2. Liegt das Ziel in einem Unterverzeichnis: <a href=“verzeichnis/zieldatei.html“>Ziel</a> 3. Liegt das Ziel in einem Verzeichnis oberhalb des Verzeichnisses des HTML-Dokuments: <a href=“../zieldatei.html“>Ziel</a> N.B. Liegt die Zieldatei noch ein Verzeichnis drüber, lässt sich das beliebig wiederho- len: ../../zieldatei.htmlHTML+CSS www. ginocremer .net
  31. 31. Paragraphen und Zeilenumbrüche Siehe Beispiel 2 P Text kann und sollte in Paragraphen unterteilt sein. Der entsprechende Text muss mit einem <p>-Element umschlossen sein: <p> Paragraph 1 </p> <p> Paragraph 2 </p> BR Mittels eines „Breaks“ generiert man einen erzwungenen Zeilenumbruch. Dieser Text <br> bricht um!HTML+CSS www. ginocremer .net
  32. 32. Grafiken und Fotos Siehe Beispiel 2 IMG Auch das <img>-Tag ist ohne die richtigen Attribute nutzlos. Wir benö- tigen sowohl die Quelle des Bildes („src“) als auch einen aufschlussrei- chen Alternativtext („alt“), welcher angezeigt wird, wenn das Bild nicht geladen werden kann. Zudem ist dieser Text wichtig damit Suchma- schinen und „Screenreadern“ (für Blinde) das Bild umschrieben werden kann (können nur den Quelltext lesen). <img src=“bild.jpg“ alt=“Unsere freundlichen Mitarbeiter“> Gut zu wissen Bilder können sowohl relativ als auch absolut ein- gebunden sein. So ist es möglich über src=“http:// www.link.com/bild.jpg“ ein externes Foto einzu- binden (technisch machbar, rechtlich oft bedenklich)HTML+CSS www. ginocremer .net
  33. 33. Den Inhaltsbereich “einteilen” (DIV) Siehe Beispiel 3 DIV Um eine Website zu strukturieren, können DIV-Elemente genutzt werden. Diese „Container“ können dann im CSS angesteuert und formatiert wer- den. <div> Kopfleiste </div> <div> Menüleiste Gut zu wissen </div> Zu Beginn einer jeden Website-Konzeption sollte <div> man mit Stift und Papier die groben Bereiche skiz- Hauptinhalt zieren. So erhält man einen guten Überblick, wie </div> die DIV-Container aufgebaut werden könnten. <div> Fußleiste </div>HTML+CSS www. ginocremer .net
  34. 34. DIV ist DIV. Und wie machen wir den Unterschied? Siehe Beispiel 3 ID Jedem DIV-Element kann eine so genannte „ID“ vergeben wer- den. Diese darf pro Seite nur EINMAL verteilt werden und ist somit einzigartig. Mit einer ID kann ein DIV gezielt im CSS angesteuert werden. Beispiel: <div id=“kopfleiste“>Kopfleiste</div> CLASS Jedem DIV kann auch eine Klasse „CLASS“ zugewiesen werden. Diese können mehrfach genutzt werden und sollten einer einmali- gen ID vorgezogen werden. So kann man mit einer einzigen CSS- Anweisung alle Elemente gleichzeitig steuern, die im HTML die gleiche Klasse zugewiesen bekommen haben. Praktisch! Beispiel: <div class=“info“>Infobereich</div>HTML+CSS www. ginocremer .net
  35. 35. Jetzt wird’s hübscher!CSS haucht der Seite Leben ein Demo: CSS Zen Garden
  36. 36. Die bereits eingebundene CSS Datei erstellenSiehe Beispiel 3Wie man im HTML erkennen kann, wurde die CSS Datei zwar imHTML-Code vorgesehen.<link rel=”stylesheet” href=”style.css”>Nun müssen wir diese erstellen. Wir erstellen eine einfache neue Dateiauf gleicher Ebene wie die HTML-Datei und nennen sie nicht “style.html”sondern “style.css”. Fertig. Gut zu wissen Der Einfachheit halber legen wir hier Bilder, CSS und HTML in den gleichen Ordner ab. Besser wäre es aber getrennte Ordner zu erstellen (Ordnung). index.html L CSS/style.css L IMG/foto.jpgHTML+CSS www. ginocremer .net
  37. 37. Generelle Schreibweise von CSSSiehe Datei “style.css”div { background-color: red; }Selektor { Eigenschaft : Wert ; }Wie spreche ich im CSS welche Elemente an?Eine ID: #kopfleiste { ... }Eine KLASSE: .info { ... }Einen HTML-TAG alleine: div { ... }HTML+CSS www. ginocremer .net
  38. 38. Die geläufigsten CSS-EigenschaftenACTION: Teilnehmer suchen Erklärung raus (jeder 2). Anschließend wird jede Eigen-schaft visuell veranschaulicht.Schriftfont-family, font-size, color, font-weight, font-styleTextgestaltungtext-align, line-height, text-decoration, letter-spacing, text-transformBilderbackground-image, background-repeatRahmenborder, border-radiusAbständepadding, marginAbmessungenwidth, heightPositionierungfloat, positionHTML+CSS www. ginocremer .net
  39. 39. Außen- und Innenabstände begreifen Das BOX-MODELL MARGIN BORDER MARGIN PADDING Beschreibt den Außenabstand (Rand) rund um das gesamteAndere Elemente Andere Elemente Element Inhalt (z.B. Text) BORDER Beschreibt den Rahmen PADDING Andere Elemente Beschreibt den InnenabstandHTML+CSS www. ginocremer .net

×