HTML/Tutorials/Einstieg/Kapitel9

Aus SELFHTML-Wiki
< HTML‎ | Tutorials‎ | Einstieg
Wechseln zu: Navigation, Suche

„Unsere Leistungen“: besonders wichtig!

Ein DIV für alle Fälle

Unser Schreinermeister ist der Meinung, dass die Liste der Leistungen dermaßen wichtig ist, dass man diese angemessen hervorheben muss. Und wie so oft im Leben, fallen auch Herrn Meier die wichtigsten Sachen erst zum Schluss ein: Ziemlich cool wäre es doch, wenn seine Telefonnummer zusammen mit der Liste hervorgehoben werden könnte! Aber die Telefonnummer soll natürlich nicht in die Liste der Leistungen rein, sondern soll extra in einem normalen Absatz (p) stehen. Unmöglich, sagen Sie? Mitnichten! Es gibt ein Element, mit dem man Elemente gruppieren kann: div (Details zu diesem Element finden Sie unter Div). Packen wir die Liste und den Absatz also flugs in ein div ein:

Beispiel: Wie man mehrere Elemente in ein anderes „einpackt“
  <div id="leistungen">
    <ul>
      <li>Möbel nach Ihren Wünschen</li>
        <ul>
          <li>Küchenmöbel</li>
          <li>Regale und Schrankwände</li>
          <li>Badezimmermöbel</li>
        </ul>
      </li>
      <li>Haustüren</li>
      <li>Gartenzäune</li>
      <li>Reparaturen</li>
    </ul>
    <p>Telefon: 0049 1234 4711</p>
  </div>

Ein Spezial-div

Dieses div hat nun wieder ein Attribut, also eine zusätzliche Information: id="leistungen". leistungen ist ein Wort, das wir uns ausgedacht haben, also keine CSS-Bezeichnung.

Damit können wir die gewünschte Liste mit CSS gezielt ansprechen – unsere Hervorhebungen sollen ja schließlich nur für dieses eine div gelten, und nicht für andere divs, mit denen unser Schreiner vielleicht später noch andere Elemente gruppieren möchte. Nein, das nachfolgende Design gilt exklusiv für die Liste mit den Leistungen plus Telefonnummer.

Bitte wundern Sie sich nicht über die durchgehende Kleinschreibung bei leistungen – dies ist einfach üblich, aber nicht zwingend. Man könnte also auch Leistungen schreiben, wenn man wollte. Achten Sie aber auf jeden Fall darauf, dass Sie die einmal gewählte Schreibweise in HTML und CSS beibehalten, damit es keine Probleme gibt.

Und das Attribut id dient einfach der Identifikation, also dass wir im CSS direkt unsere Gestaltungswünsche für leistungen aufschreiben können und der Browser das gewünschte Element zweifelsfrei identifizieren kann (Einzelheiten dazu unter HTML/Universalattribute#id.)

Hier jedenfalls unsere neue vollständige Startseite index.html:

Beispiel: Neue Startseite mit „verpackter“ Liste
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Schreinerei Meier, Dingenskirchen</title>
    <link rel="stylesheet" href="formate.css">
  </head>
  <body>
    <ul>
      <li>Startseite</li>
      <li><a href="html/preise.html">Unsere Preise</a></li>
      <li><a href="html/bilder.html">Bilder von unseren Produkten</a></li>
    </ul>
    <h1>Willkommen bei der Schreinerei Meier im Internet!</h1>
    <p>Ma illo vostre instruction sed, …</p>
    <h2>Unsere Leistungen:</h2>
    <div id="leistungen">
      <ul>
        <li>Möbel nach Ihren Wünschen
          <ul>
            <li>Küchenmöbel</li>
            <li>Regale und Schrankwände</li>
            <li>Badezimmermöbel</li>
          </ul>
        </li>
        <li>Haustüren</li>
        <li>Gartenzäune</li>
        <li>Reparaturen</li>
      </ul>
      <p>Telefon: 0049 1234 4711</p>
    </div>
    <p>Web de major tentation primarimente, …</p>
    <p>Libro anglese denomination duo e. …</p>
  </body>
</html>

Jetzt brauchen wir nur noch einen Weg, unser als leistungen bezeichnetes Element mit CSS anzusprechen. Nichts leichter als das – wir brauchen nicht mal dazu zu sagen, dass wir das div-Element meinen, der Browser ist schlau genug, das selbst zu folgern. Im CSS schreiben wir einfach:

#leistungen

Wir können aber präziser sein, wenn wir das wollen. Soll zum Beispiel das p-Element innerhalb des Elements mit den leistungen angesprochen werden, dann schreiben wir:

#leistungen p

Der Sprung ins kalte Wasser

Nun haben wir gleich mal ganz viel da reingeschrieben:

Beispiel: Die hervorgehobene Liste mit den Leistungen
#leistungen {
  border-width: thin;
  border-style: solid;
  background-color: lime;
  padding-right: 1em;
  float: left;
  margin-right: 1em;
}
#leistungen p {
  font-family: serif;
  text-align: right;
}

Und selbstverständlich versäumen wir es nicht, Ihnen alles zu erläutern:

Ein Rahmen um die Liste

Beispiel
border-width: thin;

border-width heißt „Rahmendicke“, thin heißt „dünn“, wir legen also einen dünnen Rahmen um unsere Liste fest (was Sie außer „dünn“ sonst noch festlegen können und weitere Einzelheiten erfahren Sie unter Border-width).

Beispiel
border-style: solid;

border-style heißt „Rahmentyp“, solid heißt hier „durchgezogen“, also eine durchgezogene Linie und nicht etwa gestrichelt oder gepunktet. Einzelheiten dazu finden Sie unter Border-style.

Eine deutliche Hervorhebung: Hintergrundfarbe

Beispiel
background-color: lime;

legt als Hintergrundfarbe (background-color) für die Liste von Leistungen lime, also hellgrün fest. Eine unscheinbare Zeile, aber Sie werden staunen, wie stark das Element damit hervorgehoben wird.

Eine eigene Formatierung für die Telefonnummer

Wir sind der Meinung, dass sich eine ordentliche optische Gestaltung auch bei ein paar Ziffern lohnt und haben deswegen sogar der Telefonnummer der Schreinerei Meier ein paar Zeilen in der CSS-Datei spendiert. Zur Erinnerung: Mit #leistungen p beziehen Sie sich auf das p-Element innerhalb der leistungen. In unserem Fall ist das die Telefonnummer.

Beispiel
#leistungen p {
  font-family: serif;
  text-align: right;
}

Erstmal soll die Schrift bei der Telefonnummer nun eine Schrift mit Serifen sein (siehe auch Serife), damit die Schrift zu der Liste passt und sich von den sonstigen Absätzen auf der Seite unterscheidet.

Und text-align ist inzwischen sattsam bekannt. Blocksatz und Zentrierung kennen Sie ja bereits. text-align: right; heißt nun, dass der Text an die rechte Seite gerückt werden soll.

Noch zu gedrängt?

Wir hatten uns die Seite bis dahin angesehen und fanden, dass die Schrift innerhalb des Rahmens zumindest an der rechten Seite doch ziemlich eng am Rahmen klebte und haben deshalb – so ein bisschen nach Gefühl – einen Innenabstand (padding-right: rechter Innenabstand) festgelegt (Einzelheiten dazu finden Sie unter CSS/Eigenschaften/Abstand/padding):

Beispiel
padding-right: 1em;

Wir nehmen hier auch wieder die Einheit em, die wir ja eigentlich von der Schriftgröße her kennen. Nichts spricht dagegen, em auch für hier zu verwenden: Damit verändert sich der Innenabstand entsprechend der Standard-Schriftgröße des Browsers, was sicher nicht verkehrt ist, damit das Design unserer Seite auch in Bezug auf die Größenverhältnisse einigermaßen stimmig bleibt, auch wenn mal andere Schriftgrößen eingestellt sind.

Platzverschwendung – nein, danke!

Weiterhin fanden wir es ziemlich verschwenderisch, den Platz rechts neben unserer Liste mit den Leistungen frei zu lassen. Wäre es nicht klasse, wenn dort auch etwas stehen würde? Nichts leichter als das:

Beispiel
float: left;

float heißt in etwa „fließen“ oder „umfließen“. Damit wird unsere Liste nach links (left) gerückt und von den folgenden Elementen (also den Elementen, die in der HTML-Datei index.html als nächstes kommen – in unserem Fall sind das zwei p-Elemente) „umflossen“. Der Platz rechts neben unserer Liste wird also ausgenutzt, und was dort nicht hinpasst, wird darunter ganz normal fortgesetzt. Man kann als CSS-Autor also nicht viel falsch machen. Trotzdem möchten Sie vielleicht die Details dazu lesen: Float.

Damit es nun rechts neben der Liste nicht zu eng wird, haben wir für den rechten Außenabstand (margin-right) einfach den gleichen Abstand wie vorhin beim Innenabstand festgelegt:

Beispiel
margin-right: 1em;

Einzelheiten zum Außenabstand finden Sie unter CSS/Eigenschaften/Abstand/margin.

Alles zusammen!

Hier nun also unsere vollständige CSS-Datei:

Beispiel: für die vollständige CSS-Datei ansehen …
p { font-size: 1.5em; text-align: justify; font-family: sans-serif; }
h1 { font-size: 2.5em; font-family: cursive; background-color: orange; text-align: center; }
h2 { font-size: 2.2em; font-family: cursive; background-color: yellow; text-align: center; }
li { font-size: 1.7em; }
li li { font-size: 1em; }
tr { font-size: 1.7em; }

#leistungen {
  border-width: thin;
  border-style: solid;
  background-color: lime;
  padding-right: 1em;
  float: left;
  margin-right: 1em;
}

#leistungen p {
  font-family: serif;
  text-align: right;
}

Sehen Sie sich bitte das Ergebnis an! Die Liste mit den Leistungen der Schreinerei Meier ist deutlich hervorgehoben. Ziel erreicht. Oder etwa nicht? Die optische Gestaltung ist selbstverständlich Geschmackssache. Vielleicht finden Sie dieses hellgrün auch einfach nur scheußlich. Das ist Ihr gutes Recht. Aber Sie wissen ja jetzt, wo Sie nachsehen können, wenn Sie z.B. die Farbe ändern wollen: Unter Grafik/Farbpaletten#Farbnamen finden Sie die bei CSS erlaubten Farbnamen. Setzen Sie also bei background-color schlichtweg eine andere Farbe als lime (hellgrün) ein. Ja! So einfach ist das!

Wie geht es weiter?

Ja, nun haben Sie uns tapfer durch diesen Kurs begleitet, und wir hoffen, Ihnen einen ersten Einstieg in HTML vermittelt zu haben.

Vieles haben wir aber auch weggelassen. Anderes vereinfacht. Die HTML- und CSS-Dateien, die wir Ihnen präsentiert haben, sind zwar formal korrekt, aber nicht unbedingt in jeder Hinsicht ideal und praxistauglich, und sie reizen keineswegs alle Möglichkeiten aus, die es gibt – weder technisch noch ästhetisch.

Und gar nicht erwähnt haben wir bislang JavaScript, eine Programmiersprache, mit der Sie – genügend Zeit, Wissen und Motivation vorausgesetzt – nahezu beliebige interaktive Anwendungen schreiben können, die dann im Browser ausgeführt werden.

Wir hätten also noch viel, viel mehr schreiben können; natürlich hatten wir noch zahlreiche Ideen, wie man die Seiten der Schreinerei Meier noch weiter hätte verbessern können, aber irgendwo muss man eine Grenze ziehen. Schließlich sind Sie jetzt schon kein völliger Anfänger mehr und können sich nach und nach weiter in die Thematik einlesen. Und mit SELFHTML haben Sie ein großartiges Mittel dafür an der Hand.

In diesem Sinne hoffen wir, dass wir Sie anregen konnten, sich mit diesem Thema eingehender zu befassen und womöglich einmal selbst im Internet zu publizieren.