SlideShare ist ein Scribd-Unternehmen logo
1 von 39
HTML+CSS
           GINO CREMER 2013



HTML+CSS                  www.
                                 ginocremer   .net
Was ist HTML?
HTML
...ist der Unterbau
HTML 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
Und CSS?
CSS definiert das Aussehen einer Website
                       CSS bedeutet Cascading StyleSheets
                       CSS ist wie eine Formatvorlage/Stilvorlage
                       CSS erlaubt konsequente Trennung zwischen
                       Struktur und Layout




                                     CSS
HTML+CSS
           ...ist der Lack!ginocremer        www.              .net
Web Basics
 Etwas Technik...
Webdesigner
                                                                      “Clients”
                                                                      (die Rechner der Besucher)


 Datenbank                            FTP
 (bei komplexeren Websites)
                                                                 HTTP

                                             H TML
                                                                      HTTP
                           Dateisystem                  HTTP
                           Ablageort der HTML-Dateien


Ruft 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 eine
Datenbank 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
Die populärsten Browser im Überblick
Neben 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: Statcounter

HTML+CSS                                                                   www.
                                                                                   ginocremer   .net
Die Browser-Weltkarte
Quelle: http://en.wikipedia.org/wiki/File:Countries_by_most_used_web_browser.svg




          Chrome                             Firefox
          Internet Explorer                  Opera




HTML+CSS                                                                           www.
                                                                                          ginocremer   .net
Große Herausforderungen für Webdesigner
Nach dem Browserkrieg der 90er, stellt die ungeheure Gerätevielfalt Webdesigner täglich auf die
Probe:
•	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
Konzept!
Vor dem Start: Köpfchen!
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)
 W


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

HTML+CSS                                                                       www.
                                                                                      ginocremer   .net
Das Layout skizzieren
Flotte Skizzierung der wichtigsten Inhaltsbereiche vor dem Start




                                        Kopfleiste




             Menüleiste
                                                         Inhalt




                                        Fussleiste

HTML+CSS                                                           www.
                                                                          ginocremer   .net
Los geht’s!
Unser erstes HTML Dokument
Ein erstes einfaches HTML(5)-Dokument
Siehe 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
Ein erstes einfaches HTML(5)-Dokument
Siehe 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
Ein erstes einfaches HTML(5)-Dokument
Siehe 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
Ein erstes einfaches HTML(5)-Dokument
Siehe 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
Ein erstes einfaches HTML(5)-Dokument
Siehe 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
Ein erstes einfaches HTML(5)-Dokument
Siehe 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
Ein erstes einfaches HTML(5)-Dokument
Siehe 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
Ein erstes einfaches HTML(5)-Dokument
Siehe 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
Ein erstes einfaches HTML(5)-Dokument
Siehe 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
Ein erstes einfaches HTML(5)-Dokument
Siehe 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
Ein erstes einfaches HTML(5)-Dokument
Siehe 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
Weitere
HTML-Tags
    im Body-Bereich

(TN: Pick-A-Tag / 3 Minuten - Recherche)
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
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 Zwei

HTML+CSS                                                            www.
                                                                            ginocremer   .net
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
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.html


HTML+CSS                                                              www.
                                                                             ginocremer   .net
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
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
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
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
Jetzt wird’s
    hübscher!
CSS haucht der Seite Leben ein

   Demo: CSS Zen Garden
Die bereits eingebundene CSS Datei erstellen
Siehe Beispiel 3
Wie man im HTML erkennen kann, wurde die CSS Datei zwar im
HTML-Code vorgesehen.
<link rel=”stylesheet” href=”style.css”>
Nun müssen wir diese erstellen. Wir erstellen eine einfache neue Datei
auf 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.jpg



HTML+CSS                                                    www.
                                                                   ginocremer   .net
Generelle Schreibweise von CSS
Siehe 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
Die geläufigsten CSS-Eigenschaften
ACTION: Teilnehmer suchen Erklärung raus (jeder 2). Anschließend wird jede Eigen-
schaft visuell veranschaulicht.
Schrift
font-family, font-size, color, font-weight, font-style
Textgestaltung
text-align, line-height, text-decoration, letter-spacing, text-transform
Bilder
background-image, background-repeat
Rahmen
border, border-radius
Abstände
padding, margin
Abmessungen
width, height
Positionierung
float, position

HTML+CSS                                                          www.
                                                                         ginocremer   .net
Außen- und Innenabstände begreifen
   Das BOX-MODELL

                     MARGIN
                     BORDER                              MARGIN
                     PADDING                             Beschreibt den Außenabstand
                                                         (Rand) rund um das gesamte
Andere Elemente




                                       Andere Elemente
                                                         Element
                  Inhalt (z.B. Text)                     BORDER
                                                         Beschreibt den Rahmen
                                                         PADDING
                  Andere Elemente                        Beschreibt den Innenabstand




HTML+CSS                                                               www.
                                                                              ginocremer   .net

Weitere ähnliche Inhalte

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

Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Noël Bossart
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009Felix Sasaki
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...Karionis
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Jens Grochtdreis
 
Anforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScriptAnforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScriptChristian Baranowski
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichPeter Rozek
 
Html Und Css
Html Und CssHtml Und Css
Html Und Cssborya
 
Webtechnologien - ein kurzer Überblick
Webtechnologien - ein kurzer ÜberblickWebtechnologien - ein kurzer Überblick
Webtechnologien - ein kurzer ÜberblickClaus Brell
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Jens Grochtdreis
 
1 dw-kv-baden
1 dw-kv-baden1 dw-kv-baden
1 dw-kv-badenzum
 
PHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-PerformancePHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-PerformanceNico Steiner
 
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021SEARCH ONE
 
Developing UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und ArgumenteDeveloping UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und ArgumenteDeveloping UXD
 
Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1Jens Grochtdreis
 

Ähnlich wie HTML+CSS für Einsteiger - Vom Doctype zum Style (20)

Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
Baustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-phpBaustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-php
 
CMS Kurs-Glossar
CMS Kurs-GlossarCMS Kurs-Glossar
CMS Kurs-Glossar
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
 
IT-Zertifikat: Advanced Web Basics - Handout HTML II
IT-Zertifikat: Advanced Web Basics - Handout HTML IIIT-Zertifikat: Advanced Web Basics - Handout HTML II
IT-Zertifikat: Advanced Web Basics - Handout HTML II
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)
 
Anforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScriptAnforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScript
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
Html Und Css
Html Und CssHtml Und Css
Html Und Css
 
Webtechnologien - ein kurzer Überblick
Webtechnologien - ein kurzer ÜberblickWebtechnologien - ein kurzer Überblick
Webtechnologien - ein kurzer Überblick
 
XHTML & CSS Workshop
XHTML & CSS WorkshopXHTML & CSS Workshop
XHTML & CSS Workshop
 
XHTML
XHTMLXHTML
XHTML
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
 
1 dw-kv-baden
1 dw-kv-baden1 dw-kv-baden
1 dw-kv-baden
 
PHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-PerformancePHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-Performance
 
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021
 
Developing UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und ArgumenteDeveloping UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und Argumente
 
Blank Template für Joomla!
Blank Template für Joomla!Blank Template für Joomla!
Blank Template für Joomla!
 
Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1
 

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

  • 1. HTML+CSS GINO CREMER 2013 HTML+CSS www. ginocremer .net
  • 3. HTML ...ist der Unterbau HTML 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
  • 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 CSS HTML+CSS ...ist der Lack!ginocremer www. .net
  • 6. Web Basics Etwas Technik...
  • 7. Webdesigner “Clients” (die Rechner der Besucher) Datenbank FTP (bei komplexeren Websites) HTTP H TML HTTP Dateisystem HTTP Ablageort der HTML-Dateien Ruft 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 eine Datenbank 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. Die populärsten Browser im Überblick Neben 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: Statcounter HTML+CSS www. ginocremer .net
  • 9. Die Browser-Weltkarte Quelle: http://en.wikipedia.org/wiki/File:Countries_by_most_used_web_browser.svg Chrome Firefox Internet Explorer Opera HTML+CSS www. ginocremer .net
  • 10. Große Herausforderungen für Webdesigner Nach dem Browserkrieg der 90er, stellt die ungeheure Gerätevielfalt Webdesigner täglich auf die Probe: • 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
  • 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) W Die 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 Impressum HTML+CSS www. ginocremer .net
  • 13. Das Layout skizzieren Flotte Skizzierung der wichtigsten Inhaltsbereiche vor dem Start Kopfleiste Menüleiste Inhalt Fussleiste HTML+CSS www. ginocremer .net
  • 14. Los geht’s! Unser erstes HTML Dokument
  • 15. Ein erstes einfaches HTML(5)-Dokument Siehe 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. Ein erstes einfaches HTML(5)-Dokument Siehe 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. Ein erstes einfaches HTML(5)-Dokument Siehe 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. Ein erstes einfaches HTML(5)-Dokument Siehe 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. Ein erstes einfaches HTML(5)-Dokument Siehe 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. Ein erstes einfaches HTML(5)-Dokument Siehe 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. Ein erstes einfaches HTML(5)-Dokument Siehe 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. Ein erstes einfaches HTML(5)-Dokument Siehe 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. Ein erstes einfaches HTML(5)-Dokument Siehe 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. Ein erstes einfaches HTML(5)-Dokument Siehe 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. Ein erstes einfaches HTML(5)-Dokument Siehe 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. Weitere HTML-Tags im Body-Bereich (TN: Pick-A-Tag / 3 Minuten - Recherche)
  • 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. 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 Zwei HTML+CSS www. ginocremer .net
  • 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. 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.html HTML+CSS www. ginocremer .net
  • 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. 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. 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. 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. Jetzt wird’s hübscher! CSS haucht der Seite Leben ein Demo: CSS Zen Garden
  • 36. Die bereits eingebundene CSS Datei erstellen Siehe Beispiel 3 Wie man im HTML erkennen kann, wurde die CSS Datei zwar im HTML-Code vorgesehen. <link rel=”stylesheet” href=”style.css”> Nun müssen wir diese erstellen. Wir erstellen eine einfache neue Datei auf 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.jpg HTML+CSS www. ginocremer .net
  • 37. Generelle Schreibweise von CSS Siehe 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. Die geläufigsten CSS-Eigenschaften ACTION: Teilnehmer suchen Erklärung raus (jeder 2). Anschließend wird jede Eigen- schaft visuell veranschaulicht. Schrift font-family, font-size, color, font-weight, font-style Textgestaltung text-align, line-height, text-decoration, letter-spacing, text-transform Bilder background-image, background-repeat Rahmen border, border-radius Abstände padding, margin Abmessungen width, height Positionierung float, position HTML+CSS www. ginocremer .net
  • 39. Außen- und Innenabstände begreifen Das BOX-MODELL MARGIN BORDER MARGIN PADDING Beschreibt den Außenabstand (Rand) rund um das gesamte Andere Elemente Andere Elemente Element Inhalt (z.B. Text) BORDER Beschreibt den Rahmen PADDING Andere Elemente Beschreibt den Innenabstand HTML+CSS www. ginocremer .net