html tutorial - Layout (CSS) - html5 tutorial
Klar, aber wie?
- Um Ihrer Internetseite ein Layout zu geben, benutzen Sie Cascading Style Sheets (CSS).
- In dieser Lektion bekommen Sie eine kurze Einführung in das Thema CSS. Später können Sie anhand unseres CSS-Tutorials von Grund auf alles über CSS lernen.
- Bitte sehen Sie diese Lektion hier mehr als ‘Appetitanreger’.
- CSS ist der hübschere Partner von HTML.
- In Sachen Code gibt es nämlich keine Gemeinsamkeiten.
Learn html - html tutorial - html layout - html examples - html programs
- HTML kümmert sich um die grobe Struktur, während CSS dem ganzen ein hübsches Aussehen (Layout) verleiht.
- Z.B. können Sie Schriftart und Schriftgröße eines Absatzes festlegen:
Beispiel 1:
<p style="font-size:20px;">Dieser Text hat Schriftgröße 20</p>
<p style="font-family:courier;">Dieser Text hat die Schriftart Courier</p>
<p style="font-size:20px; font-family:courier;">Hier Schriftart Courier und Größe 20</p>
Klicken Sie auf "Code kopieren". Der Code wird in die Clipboard kopiert und durch Drücken von "Ctrl-V" wird der Code in das Zielfenster eingefügt.Von HTML-Tutorials, html5 Tutorials, HTML-Editor, lernen html. Mannschaft
sieht im Browser wie folgt aus:
Dieser Text hat Schriftgröße 20
sieht im Browser wie folgt aus:
Dieser Text hat Schriftgröße 20
Dieser Text hat die Schriftart Courier
Hier Schriftart Courier und Größe 20- Im obenstehenden Beispiel benutzen wir das style-Attribut um die Schriftart (mit font-family) und die Schriftgröße (mit font-size) anzugeben.
- Bitte beachten Sie, dass, wie beim letzten Beispielabsatz, beide Angaben von Schriftart und Schriftgröße mit einem Semikolon von einander angegrenzt werden.
Klingt nach jeder Menge Arbeit?
- Eine der cleveren Eigenarten von CSS ist die Möglichkeit, dass man das Layout zentral verwalten kann.
- Anstatt das style-Attribut in jedem Tag zu nutzen, kann man dem Browser einmal mitteilen, wie er den Text auf der Seite formatieren/layouten soll.
Beispiel 2:
<html>
<head>
<title>Meine erste CSS-Webseite</title>
<style type="text/css">
h1 {font-size: 30px; font-family: arial;}
h2 {font-size: 15px; font-family: courier;}
p {font-size: 8px; font-family: "times new roman";}
</style>
</head>
<body>
<h1>Meine erste CSS-Webseite</h1>
<h2>Willkommen auf meiner ersten CSS-Webseite!</h2>
<p>Hier können Sie sehen, wie CSS funktioniert. </p>
</body>
</html>Klicken Sie auf "Code kopieren". Der Code wird in die Clipboard kopiert und durch Drücken von "Ctrl-V" wird der Code in das Zielfenster eingefügt.Von HTML-Tutorials, html5 Tutorials, HTML-Editor, lernen html. Mannschaft
output
Learn html - html tutorial - output layout - html examples - html programs
- Im obigen Beispiel wurde das CSS in den head-Bereich eingefügt und gilt somit für die gesamte Seite.
- Dies wird mit dem Tag <style type="text/css"> gemacht, der dem Browser mitteilt, dass dies CSS-Anweisungen sind.
- In diesem Beispiel würden alle Überschriften auf der Seite in Arial mit der Größe 30 Pixel formatiert sein
- Sub-Überschriften wären in Courier in Größe 15. Text in Absätzen (<p></p>) würde in Times New Roman mit Schriftgröße 8 dargestellt.
- Eine andere Möglichkeit ist, das CSS in einer eigenständigen Datei zu speichern.
- Mit einer eigenständigen CSS-Datei können Sie das Layout von vielen Seiten auf einmal steuern.
- Ziemlich clever, wenn Sie die Schriftart oder -größe eines Internetauftrittes mit hunderten (oder gar tausenden) Seiten ändern möchten.
- Diese Möglichkeit sparen wir hier aus, aber Sie können sie später in unserem CSS-Tutorial lernen.
Was kann ich noch mit CSS machen?
- CSS kann für viel mehr verwendet werden, als nur Schriftarten und -größen einzustellen. Man kann z.B. auch Farben und Hintergründe festlegen. Hier ein paar Beispiele mit denen Sie herumprobieren können:
<p style="color:green;">Grüner text</p>
<h1 style="background-color: blue;">Überschrift auf blauem Hintergrund</h1>
<body style="background-image: url('http://www.wikitechy.com/logo.png');">Klicken Sie auf "Code kopieren". Der Code wird in die Clipboard kopiert und durch Drücken von "Ctrl-V" wird der Code in das Zielfenster eingefügt.Von HTML-Tutorials, html5 Tutorials, HTML-Editor, lernen html. Mannschaft
Fügen Sie die Beispiele in Ihre Seiten ein – sowohl die soeben gezeigte Möglichkeit, als auch das CSS im head-Bereich der Seite.
Geht es bei CSS nur um Farben und Schriftarten?
- Neben den Einstellungen für Farben und Schriftarten usw.
- kann mit CSS auch die Präsentation der Seite gesteuert werden (Ränder, Ausrichtungen, Höhe, Breite usw.).
- Mit dem Gebrauch von CSS sind Sie in der Lage, Ihre Seiten elegant und präzise zu gestalten.
Beispiel 3:
<p style="padding:25px;border:1px solid red;">Ich liebe wikitechy!</p>Klicken Sie auf "Code kopieren". Der Code wird in die Clipboard kopiert und durch Drücken von "Ctrl-V" wird der Code in das Zielfenster eingefügt.Von HTML-Tutorials, html5 Tutorials, HTML-Editor, lernen html. Mannschaft
sieht im Browser wie folgt aus
Ich liebe wikitechy!
- Mit float (engl. für Umfluß) kann ein Element links oder rechts ausgerichtet werden. Das nachfolgende Beispiel veranschaulicht das Prinzip:
Beispiel 4:
<img src="bill.jpg" alt="Bill Gates" style= "float:left;" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat ...</p>Klicken Sie auf "Code kopieren". Der Code wird in die Clipboard kopiert und durch Drücken von "Ctrl-V" wird der Code in das Zielfenster eingefügt.Von HTML-Tutorials, html5 Tutorials, HTML-Editor, lernen html. Mannschaft
sieht im Browser wie folgt aus:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat - Im Beispiel wird ein Element (das Bild) links ausgerichtet und ein anderes Element (der Text) rückt auf, füllt die ‘Lücke’ (umfließt das mit float ausgerichtete Bild).
- Mit der Eigenschaft position kann ein Element pixelgenau auf einer Webseite positioniert werden:
Beispiel 5:
<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />Klicken Sie auf "Code kopieren". Der Code wird in die Clipboard kopiert und durch Drücken von "Ctrl-V" wird der Code in das Zielfenster eingefügt.Von HTML-Tutorials, html5 Tutorials, HTML-Editor, lernen html. Mannschaft
- In diesem Beispiel ist das Bild 50 Pixel vom unteren und 10 Pixel vom rechten Rand des Browserfensters platziert. Sie können es natürlich auch überall anders hin setzen. Probieren Sie es aus! Ziemlich einfach und ganz schön cool oder?
Cool ja, aber einfach?
- Für den Moment konzentrieren wir uns wieder auf HTML und gehen weiter zur nächsten Lektion, wo wir lernen werden, wie man eine Internetseite ins Internet bekommt, so dass die ganze Welt sie sehen kann.