Step 2: Create with me the sexiest website from scratch- your own!

tut-zwei

. Heute teilen wir dem Browser mit mit welchem Html er zu rechnen hat. Lernen das Box Modell kennen. Erkennen den Unterschied zwischen einer CSS class und ID. Und ganz nebenbei erkennen wir die Wichtigkeit von Semantik – ohne dieses semantische Denken ist Webstandard schwer machbar.

Du brauchst heute wie beim 1. Mal:

  1. einen Texteditor.
  2. Deine Ordner auf dem Desktop und die index.html (siehe 1. Artikel Link ist ganz unten)

Zur Erinnerung die Ordnerstruktur muss so aussehen.

Hauptordner mit dem Namen:sexy-website.
»» 1.Unterordner heißt: images
»» 2.Unterordner heißt: css.

HTML schafft den Browser an, was er zu tun hat.

Da es mehrere Arten von dieser Auszeichnungssprache gibt, muss der Browser wissen welche da auf ihn zukommt. Viele Browserhersteller haben dies implementiert und der Browser tut dann das was er laut dem HTMLoder laut XHTML etc tun sollte. Viele – nicht alle. Es gibt wie meist eine sehr große Ausnahme, der derzeit noch am öftestens genutzte. 😉 .

Wenn ich Websites für mich selber mache, dann immer nur in der sogenannten *strict* Variante der Auszeichnungssprache. So auch jetzt.

4. Deine Website bekommt den richtigen Doc Type

Öffne Deine index.html mit dem Texteditor und tippe folgendes hinein- kopieren dürfte auch funktionieren.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  lang="de" xml:lang="de">

Doc Type sagt dem Browser welches html verwendet wird.

Das einfache <html> bekommt jetzt eben noch was dazugeschrieben. Solltest Du dies je selber tippen, dann beachte die Schreibweise. Groß und Kleinschreibung ist hier nicht willkürlich, sondern hat einen eigenen Sinn. Ich kopiere dies immer, gebe ich unumwunden zu. 😉

XHTML Strict und accessibility

In jeder der unterschiedlichen html Sprachen sind unterschiedliche Dinge erlaubt oder verpönt. Die strict Variante ist heikler. Accessibility bedeutet Zugänglichkeit. Es gibt weltweit Browser, die diese Sprache einfach noch nicht verstehen. Daher sagen einige : nimm kein strict.

Mag sein, wenn sich die Experten streiten misch ich mich nicht ein. Nur- kommt jemand aus dem Tschad (nur ein Beispiel) auf webdesign-in.de ist die html Sprache das geringste Problem. 😉

Nur der Vollständigkeit halber erwähnt. Das Thema hat an anderer Stelle mehr Platz.

Die Struktur Deiner Website erkennen

In diesem großen Screenshot des geplanten Designs habe ich die großen Struktureinheiten anders eingefärbt. Sexiest Website mit Struktur. Für alle Nichtsehenden und zur Erinnerung: Der Top-Mittel und Fußbereich haben einen schwarzen Rahmen. Im Mittelbereich ist der Inhalt / blau umrahmt, die Menüs und Navigationen Magenta und die drei Bereiche innerhalb dieser sind in Grün.

html tags sind Abkürzungen englischer Worte

In Englisch heißt dies: Header – Content- Sidebar – Footer. Wer html und css für sich nutzen mag, muss zumindest einige Worte English verstehen. Alle html tags sind Abkürzungen aus dem Englischen. Unten gibts einen Link zu einem Wörterbuch. 😉

Beschreibung eines DIV

Ein div hat für sich keine Eigenschaften, außer dass es ein Blocklevel Element ist. Blocklevel bedeutet immer:es fängt nachher eine neue Zeile an.

Ein div kann unterschiedliche html tags in sich behergen und diese somit gruppieren.

Was ist eine ID und eine class?

Eine id oder eine class kann (fast) jedem html tag zugewiesen werden und transportiert Stylesheet-Eigenschaften.

Unterschied zwischen ID und class

Eine ID zeichnet ein besonders Element aus und darf pro .html Seite nur ein einziges Mal verwendet werden.

Eine class ist für eine Gruppe gedacht.

ID kann es nur einmal geben

class ist für die Masse

Jetzt kann man generell nicht sagen. Hier ist die ID falsch, dort ist sie richtig. Dies kommt auf die Struktur der Website an.

Semantik bedeutet die html tags und Stylesheet-Eigenschaften-Transporteure so zu verwenden wofür sie gedacht sind.

Wenn eine ID nur einmal vorkommen soll und wenn sie Struktur schafft, dann kann man bei Deiner Website ganz strenge betrachtet nur die Schwarz umrandeten Boxen mit einer ID versehen. Alles andere – egal wo im ganzen Dokument bekommt nur eine class.

Man kann einer ID oder einer class einen Namen geben wie man mag. Sinnvoll ist es sie so zu bezeichnen, dass man Monate später – nach dem 3. Redesign auch noch weiß was man damit auszeichnen wollte. 😉

vergib sinnvolle Namen

Sinnvolle Namen sind für die drei Schwarzen Rahmen für mich: top-middle-bottom. Es ist mehr als unwahrscheinlich, dass Du das Logo Deiner Website je in den Fußbereich geben wirst. Auch wirst Du extremst selten die Fußzeile vor dem Inhalt anzeigen.

5. Deine Website bekommt ihre ersten divs.

Da ich das Box Modell vorstelle und einige Boxen floaten /fließen werden tippen wir gleich die dafür nötigen divs hinein und außerdem siehst Du gleich wie man html Kommentare schreibt.

Das da

&amp;amp;amp;amp;amp;lt;!--top end--&amp;amp;amp;amp;amp;gt;

Ist ein html Kommentar, der ist unsichtbar, aber er erleichtert den Durchblick sehr.


&amp;amp;amp;amp;amp;lt;body&amp;amp;amp;amp;amp;gt;
  &amp;amp;amp;amp;amp;lt;div id=&amp;amp;amp;amp;amp;quot;top&amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt;
    
          &amp;amp;amp;amp;amp;lt;h1&amp;amp;amp;amp;amp;gt;Titel&amp;amp;amp;amp;amp;lt;/h1&amp;amp;amp;amp;amp;gt;
       
     &amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;!--top end--&amp;amp;amp;amp;amp;gt;
  &amp;amp;amp;amp;amp;lt;div id=&amp;amp;amp;amp;amp;quot;middle&amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt;
    &amp;amp;amp;amp;amp;lt;div class=&amp;amp;amp;amp;amp;quot;middle-inner&amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt;
         &amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;gt; Hi, ich bin die Deine. &amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;gt;
      &amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;gt;
   &amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;!--middle end--&amp;amp;amp;amp;amp;gt;

&amp;amp;amp;amp;amp;lt;div id=&amp;amp;amp;amp;amp;quot;bottom&amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt;
    
     &amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;gt;Fusszeile&amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;gt;
    
&amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;!--bottom end--&amp;amp;amp;amp;amp;gt;


Speichern. Deine index.html im Browser öffnen und Du siehst eine große Überschrift und sonst keine Veränderung. 😉

Es fehlen die Eigenschaften.

6. Deine Website bekommt ihre erstes Style.css

Ein Cascading StyleSheet ist ein einfaches Textdokument. Öffne in Deinem Texteditor ein leeres Dokument. Speichere es unter style.css in den Unterordner „css“.

Man kann viele CSS Dokumente nutzen. Hier auf WebDesign-in.de gibt es eine für den Bildschirm, eine für den Ausdruck und eines für PDA Nutzer. Darum sammelt man diese CSS Dokumente in einen eigenen Ordner- bewahrt den Überblick.

7. Das style.css verlinken

Zwischen head und /head werden Kommandos geben. Bildschirmeigenschaften sind Kommandos daher wird das style.css zwischen head und /head angegeben und zwar so.

&amp;amp;amp;amp;amp;lt;link rel=&amp;amp;amp;amp;amp;quot;stylesheet&amp;amp;amp;amp;amp;quot; type=&amp;amp;amp;amp;amp;quot;text/css&amp;amp;amp;amp;amp;quot;  media=&amp;amp;amp;amp;amp;quot;screen&amp;amp;amp;amp;amp;quot;  href=&amp;amp;amp;amp;amp;quot;css/style.css&amp;amp;amp;amp;amp;quot; /&amp;amp;amp;amp;amp;gt;

Dies bedeutet der Reihe nach:

  1. Link ist bekannt ein Link verweist auf etwas.
  2. rel =relationship gibt eine logische Beziehung zwischen Daten an – es kommt ein Stylesheet.
  3. Danach kommt der Typ der Daten: Text und dieser Text ist ein css.
  4. Das Medium wofür der Text ist: screen= Bildschirm.
  5. Der Link zu dem Medium ist.. href Angabe.

das Box Modell

Mit der CSS Angabe margin beschreibt man den Außenabstand von Elementen. „Komm mir nicht zu nahe“.

Mit padding wird der Innenabstand beschrieben. „Der Tisch steht 3m vom Fenster weg.“

Mit border gibt man einen Rahmen an. „der Verputz macht alles irgendwie wohnlicher…“

Alles braucht Platz. Pixel ist der kleinste Platz, aber irgendwann ist auch das letzte Pixel verbraucht. 😉

Hast Du jetzt ein Bild, das genau 200px breit ist. Und magst Du, dass dieses Bild nicht am Text klebt, und vielleicht noch einen hübschen Rahmen drumherum – damit es stylish wird. Dann noch eine andere Hintergrundfarbe damit es sich auch wirklich gut von allen anderen Sachen abhebt.

Dann muss das Div die Breite: 200px +plus Abstand zum Text(margin) + Breite des Rahmens+Innabstand (padding) damit man die andere Hintergrundfarbe sieht haben.

Alle tun dies – bis auf den IE. Der berechnet alles nach innen. Anschauliche Links am Ende des Artikels.

Dieses Boxmodell muss Dir gedanklich in Fleisch und Blut übergehen. Du verzweifelst sonst. Spätestens beim nächsten pixelgenauen Layout. 😉

Ich habe mir daher *mein Box Modell* mal entworfen. So konnte ich es mir vorstellen. Nachfolgendes Bild zeigt es. Erfinde Du Dir Deines und sieh Dir die rein technische Erklärung auch an.

tut-boxmodel

Box Modell Self HTML

2. Doc Type kennen gelernt. Struktur eines Layouts definiert. Cascading Stylesheet im head Bereich angegeben. H1 macht eine Schrift automatisch größer. Das Box Modell kennen gelernt. Margin=Aussenabstand. Padding=Innenabstand. Border=Rahmen. Differenz zwischen ID und class beschrieben. Div beschrieben.

Das nächste Mal füllen wir die Style.css. Dann gibt es Erklärungen zu den Überschriften, semantisch korrekt. Es wird Farbe und Hintergrundbilder verteilt.
Es wird die grundsätzliche Breite der Website festgelegt und der IE bekommt sein eigenes Cascading StyleSheet, weil der immer eine Extrawurst braucht.

weiterführende Links

Ich freue mich auf Kommentare – Rückmeldungen jeder Art.
Wenn dies hilfreich ist für Dich, dann erzähle es bei einem Social Bookmark Dienst weiter und abonniere den Beitrag.

Ebenfalls informativ und lesenswert

5 Kommentare zu “Step 2: Create with me the sexiest website from scratch- your own!

  1. Benjamin Wingerter

    ich bin mit step 2 sehr gut zurecht gekommen, auch das box-modell-bild hat mir sofort klar werden lassen, wie sich die 3 bezeichnungen zueinander in beziehung stehen.

    nun wäre noch toll zu wissen, ob link sich auf den inhalt der link-klammern bezieht oder auf den nachfolgenden inhalt, weil der tatsächliche verweis (link) ist ja eigentlich mit href beschrieben.

    außerdem interessiert mich, wofür „h“ bei schriftgröße steht. hight?
    oh und medien gibt es neben screen noch? ist die bezeichnung beliebig oder muss es immer „screen“ heißen? kann ich auch „bildschirm“ schreiben?
    wären die anderen: print, handy, pda oder ist auch das willkürlich wählbar?

  2. mts

    Hi toonfish,
    das *link* steht da, weil es irgendwelche Leute, die diese Vorgaben machten, dies so bestimmt haben,
    man kann dabei keine deutschen Worte verwenden, screen muss screen heißen, darf nicht Bildschirm heißen, auch die anderen wie print etc sind nicht willkürlich wählbar.

    h bei Schriftgröße habe ich nirgendwo stehen, ich habe wo

    <h1>Titel</h1> 

    stehen, darum versteh ich die Frage nicht

    Schriftgröße gibt man mit height an

    es werden da immer englische Worte genommen, die Browser müßten sonst weltweit andere Sprachen ständig übersetzen, 😉 selbst die Japaner, Chinesen schreiben da englisch

    lg

  3. Nogge

    Moin mts,
    wann schreibste die weiteren steps oder habe ich die >2 nur übersehen?

    mfg
    Nogge

  4. Frank Topel

    Hmm. Du weißt aber schon, dass Du völlig legitim und valide durchaus mit hunderten IDs pro Seite arbeiten kannst? Diese IDs müssen nur dokumentweit eindeutig sein, d.h. Du darfst eine bestimmte id nicht zweimal vergeben, z.b. id=“main-menu“. Kein Problem ist aber auf der gleichen Seiten noch ein Element mit der id=“sub-menu“ oder id=“footer“ zu haben.

  5. mts

    Hi Frank, ja das weiß ich aber id main-menu und id sub-menu sind ja 2 ids aber EINE ID darf es nur einmal geben 😉

    danke fürs Klarstellen

    lg