Themen

Projekte

Links

Software

Themen

Erste Schritte mit CSS

Theoretische Informatik

Die Websprache

besteht aus

HTML (HyperText Markup Language) [...zur Strukturierung des Inhalts...]
CSS (Cascading Style Sheets) [...zur Formatierung des Inhalts...]

Kommunikation im Internet

Aufgaben des Webservers

Webserver nehmen unentwegt Anfragen von Webbrowsern (Clients) entgegen. Was für Anfragen? Anfragen nach Webseiten, Bildern, Musik, vielleicht sogar nach einem Film. Wenn eine Anfrage für eine solche Ressource an den Server gestellt wird, findet er die Ressource und schickt sie an den Browser.

Aufgaben des Webbrowsers

Mit Hilfe des Browsers lassen sich Webseiten von einem Server anfordern, abrufen und schließlich im Browserfenster anzeigen.

Ein erster Blick auf HTML

<html>
  <head>
    <title>KopfüBar</title>
  </head>
  <body>
    <h1>Willkommen in der KopfüBar</h1>
    <img src="getraenke.gif">
    <p>
      Kommen Sie einfach mal vorbei. Bei uns finden Sie jeden
      Abend erfrischende Elixire, Unterhaltung, und 
      vielleicht interessiert Sie auch die eine oder andere
      Runde <em>Dance Dance Revolution</em>.
      Wireless-Zugang ist jederzeit verfügbar, aber -
      BSIEWSM (Bringen Sie Ihren eigenen Webserver mit).
    </p>
    <h2>Wegweiser</h2>
    <p>
      Sie finden uns unmittelbar im Zentrum der Altstadt
      von Webville. Kommen Sie mal vorbei!
    </p>
  </body>
</html>

bar.html

Grundlegende Tags und ihre Bedeutung

Element	Bedeutung
<html>...</html>	"Wurzelelement", umschließt jedes HTML-Dokument
<head>...</head>	"Seitenkopf"
<title>...</title>	Seitentitel, erscheint oben in der Fensterleiste
<body>...</body>	Textkörper, enthält alles, was auf der Seite angezeigt werden soll
<p>...</p>	Absatz
<h1>...</h1>	Überschrift 1. Ordnung
<h2>...</h2>	Überschrift 2. Ordnung (kleiner als Überschrift 1. Ordnung)
<img>	Bild
<em>...</em>	hebt Textstellen hervor, betont sie
<br>	Zeilenwechsel (benötigt wie img kein schließendes Tag)

HTML-Dateien erstellen

Schritt eins: Startmenü öffnen und den Editor starten
Der Editor findet sich unter "Zubehör". Am einfachsten gelangt man dort hin, indem man zunächst auf "Start", dann auf "Programme" und anschließend auf "Zubehör" klickt. Dort befindet sich der Editor.

Schritt zwei: Den Editor öffnen
Ein Klick auf den Editor im Zubehör-Ordner startet den Editor. Ein leeres Fenster wird geöffnet.

Schritt drei: Erweiterungen bei bekannten Dateitypen nicht ausblenden
Standardmäßig blendet der Explorer unter XP die Dateinamenserweiterungen bekannter Dateitypen aus. Wenn eine Datei beispielsweise den Namen "kopfbisfuss.html" trägt, wird sie ohne die Erweiterung "html" angezeigt. Ändern wir also die Ordneroptionen entsprechend.

In einem beliebigen Explorer wählt man im Menü "Extras" das Element "Ordneroptionen...". Auf der Registerkarte "Ansicht" unter "Erweiterte Einstellungen" scrollt man solange nach unten, bis die Option "Erweiterungen bei bekannten Dateitypen ausblenden" sichtbar wird und deaktiviert diese Option.

Mit einem Klick auf den OK-Button werden die Einstellungen gespeichert.

Arbeit speichern

Um ihre HTML-Datei zu speichern klickenn Sie im Datei-Menü des Editors auf "Speichern". Legen Sie zunächst einen Projektordner für die Dateien ihrer Webseite an. Nehmen Sie dazu den Button "Neuer Ordner". Klicken Sie anschließend auf den neu angelegten Ordner und geben Sie "index.html" als Dateinamen ein. Wählen Sie "Alle Dateien" als Dateityp aus, da der Editor sonst sie Erweiterung ".txt" an den Dateinamen hängt und schließen Sie den Vorgang durch einen Klick auf den Button "Speichern" ab.

Webseite im Browser öffnen

Wählen Sie im Datei-Menü Ihres Lieblingsbrowsers "Datei öffnen..." (oder "Öffnen...", wählen Sie Ihre Datei index.html aus und klicken Sie auf Öffnen.

Tags seziert

Nicht vergessen:

Element = Start-Tag + Inhalt + End-Tag

Eine Seite mit "Style"

Nachdem wir nun HTML als strukturgebende Auszeichnungssprache kennengelernt haben, ist es an der Zeit, einen ersten Blick auf den zweiten wichtigen Bestandteil der Websprache zu werfen: CSS. Mit Hilfe von CSS können wir eine Seite stylen (formatieren). Dies geschieht mit Hilfe von Stilregeln, die im Kopf des Dokumentes - eingeschlossen in style-Tags - notiert werden. Im öffnenden style-Tag legen wir uns durch die zusätzliche Angabe type=text/css auf CSS als Formatierungssprache fest.

Zum CSS an dieser Stelle nur so viel: Eine Stilregel ist z. B.

background-color: #d2b48c;

Jede Stilregel bezieht sich auf eine andere Eigenschaft. Im Beispiel wird die Hintergrundfarbe der Seite formatiert. Auf der linken Seite einer Stilregel steht immer die zu formatierende Eigenschaft, dann folgt ein Doppelpunkt und dann der Wert, den man der Eigenschaft zuweisen möchte.

<html>
  <head>
    <title>Sternback-Kaffee</title>
    <style type="text/css">
      body {
        background-color: #d2b48c;
        margin-left: 20%;
        margin-right: 20%;
        border: 1px dotted grey;
        padding: 10px 10px 10px 10px;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
  ...

Grundlegende CSS-Eigenschaften

Eigenschaft / Wert	Bedeutung
background-color: #d2b48c;	Setzt die Hintergrundfarbe auf einen Braunton.
margin-left: 20%;	Legt den linken Außenrand auf 20% der Seitenbreite fest.
margin-right: 20%;	Legt den rechten Außenrand auf 20% der Seitenbreite fest
border: 1px dotted grey;	Definiert einen grau gestrichelten Rahmen, der um den Textkörper herum angezeigt wird
padding: 10px 10px 10px 10px;	Erzeugt einen Innenabstand zwischen dem Textkörper und dem Rahmen.
font-family: sans-serif;	Definiert die Schriftart für den Text.
color: #ffffff;	Setzt die Schriftfarbe auf weiß.

» drucken: pdf | html