Ihre eigene Webseite erstellen

von Rodney A. Adkins

Rückblick: In der letzten Ausgabe der PCLinuxOS Zeitschrift erstellten wir eine sehr grundlegende Webseite. Wie bereits in der vorherigen Anleitung erwähnt, kommen nach den Öffnungszeichen immer Schließungszeichen. Auf der folgenden Seite sind die wesentlichen Kodierungszeichen:

<html></html>, <head></head>, <title></title>, und <body></body>.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title> Jerry-Lee Der Hund</title>

</head>

<body>

<h2>Willkommen zu Jerry-Lee's Webseite </h2> <br>

<p> <img src="jerry.jpg" height="200" width="150" alt="my dog" align="left"

hspace="5" vspace="5" border="3">

Ich bin ein zwölf Jahre alter Schäferhund, der nicht bellt.

Ich habe grosse braune Augen und weiss wirklich gut zu betteln. <br>

Ich habe ein angenehmes Leben und schlafe im Spielzimmer auf dem Sofa. Ich habe viel zu essen und bin glücklich.

Es ist wirklich ein Hundeleben!<br>

Ich weiß, dass Sie bald zurückkommen werden. </p>

<p>Jerry-Lee. </p>

</body>

</html>

Zwischen den body-Zeichen ist der Inhalt und der HTML-Code, der die Seite in der gewünschten Weise darstellt. Bis jetzt haben wir ein heading-, paragraph-, und img-Zeichen. Die einzige Formatierung, die wir bisher auf dieser Webseitenerstellung gemacht haben, ist der Zeilenumbruch, der Definition von Anfang und Ende des Paragrafen, sowie der Bildposition und wie weit es vom Text entfernt ist. Wie Sie im Bildquellcode sehen, gibt es dort Anführungszeichen um die Zahlen; diese müssen vorhanden sein. Wenn Sie diese vergessen, wird Ihre Seite falsch angezeigt.

Für eine gute Formatierung dieser Webseite geben wir jetzt die Fontgröße (Schriftgröße), Farbe und Stil sowie die Seitenränder des Textes und Paragrafen an.

tux
Geben Sie die Fontgröße nicht in pt oder anderen absoluten Längenmaßeinheiten an. Diese werden Plattformabhängig dargestellt und können vom Webbrowser in der Größe nicht angepasst werden. Verwenden Sie Größen wie x-small, small, medium, large.

Zuerst müssen wir die Webseite wie oben dargestellt abändern. Einen normalen Texteditor wie Kate öffnen, und den Code, wie oben gesehen kopieren. Dann öffnen Sie Ihr Basisverzeichnis und erstellen einen Ordner mit dem Namen website. Speichern Sie die in Kate eingefügte Webseite in diesen Ordner. Klicken Sie dazu auf Datei-Speichern als und geben im folgenden Fenster index.html ein; sicherstellen, dass der Dateifilter alle Dateiformate anzeigt. Dann öffnen Sie Ihren Firefox Webbrowser, gehen zum Ordner und klicken zur Ansicht Ihrer Webseite auf index.html. Ihre Webseite sollte wie folgt aussehen.

Willkommen zu Jerry-Lee's Webseite

my dog

Ich bin ein zwölf Jahre alter Schäferhund, der nicht bellt. Ich habe große braune Augen und weiß wirklich gut zu betteln.
Ich habe ein angenehmes Leben und schlafe im Spielzimmer auf dem Sofa. Ich habe viel zu essen und bin glücklich. Es ist wirklich ein Hundeleben!
Ich weiß, dass Sie bald zurückkommen werden.

Jerry-Lee.

HTML spezifizierte vorher die Fontgröße, Farbe und andere Attribute im Font-Zeichen, der so aussah:

<font size"2" color="#000000" face="verdana">

Heutzutage werden Webseiten anders kodiert. Heute verwenden die meisten Seiten CSS (Cascading Style Sheets). Es gibt zwei Arten von Style Sheets und sie sind intern und extern. Das interne Style Sheet ist dann geeignet, wenn Sie diesen Stil nur auf einer Seite verwenden werden. Das externe Style Sheet gibt mehr Flexibilität, wenn Sie den Stil über die ganze Webseite anwenden werden. Dieses erlaubt das Aussehen der Webseite mit nur einem Style Sheet zu ändern.

Und so sieht ein internes Style Sheet aus:

<html>
<head>
<title>Internal Style Sheet Example</title>
<style>
<!--
body {
   background:#C9F1C5;
   }
h1 {
   color:#54B24B; font:bold 14px Verdana, Arial, Helvetica;
   }
p {
   font:12px Verdana, Arial, Helvetica;
   }
-->
</style>
</head>
<body>
<h2>Willkommen zu Jerry-Lee's Webseite</h2>
<br>

<p><img src="jerry.jpg" height="100" width="75" alt="my dog" align="left" hspace="5" vspace="5" border="3"></p>

<p>Ich bin ein zwölf Jahre alter Schäferhund, der nicht bellt. Ich habe grosse braune Augen und weiss wirklich gut zu betteln .<br>Ich habe ein angenehmes Leben und schlafe im Spielzimmer auf dem Sofa. Ich habe viel zu essen und bin glücklich. Es ist wirklich ein Hundeleben !<br>Ich weiß, dass Sie bald zurückkommen werden</p>

<p>Jerry-Lee.</p>
</body>
</html>

Für unser Dokument werden wir ein externes Style Sheet verlinken. Das Style Sheet wird mit der Webseite verbunden, indem man einen Link (Verweis) zwischen den zwei header-Zeichen kodiert. Das Style Sheet für diese Webseite wird jerry.css genannt.
Denken Sie daran, den Link zwischen die beiden header-Zeichen in das Dokument einzusetzen. Der Link ist:

<link rel="stylesheet" type="text/css" href="jerry.css" />

Zur Erstellung eines Style Sheets brauchen Sie lediglich einen Texteditor. Diesen öffnen und ein leeres Dokument als jerry.css speichern. Da ich plane, im linken Teil der Webseite einen Hintergrund zu setzen, füge ich das Bild dem Hintergrund im Style Sheet hinzu. Der Code sieht so aus:

/* Erstellt von Rodney Adkins  */
body{
   background-image:url(bone.jpg);
   background-repeat:repeat-y;
   margin-bottom:15px;
   margin-left:100px;
   margin-right:80px;
   margin-top;2px;
   font-family:Verdana, Geneva, Arial, sans-serif;
   font-size:90%;
   color:#000000;
   }
p {
   margin-left:100px;
   margin-right:80px;
   font-family:Verdana, Geneva, Arial, sans-serif;
   font-size:medium;
   color:#000000;
   line-height:150%;
   }
h2 {
   text-align:middle;
   font-family:Verdana, Geneva, Arial, sans-serif;
   font-size:medium;
   color:#740000;
   line-height:150%;
   }
img {
   margin-left:1px;
   }

Announcement

EduPCLOS is a PCLOS community project which will create a customized PCLinuxOS distribution focused on classroom use.

According to Patred, the project lead of EduPCLOS, the LiveCD/DVD will include two parts - the desktop and the server.

The project is in need of volunteers with experience in script writing, mostly PHP, and database knowledge, most likely MySQL and PostgreSQL. EduPCLOS also needs designers with skills to give "the look and feel" of the desktop and server.

For more information, please visit
http://www.mypclinuxos.com/forumdisplay.php:fid=34 and help in any ways that you can.

You can also send the project lead an email addressed to:
edupclos@gmail.com.

Our children are the future. Let's bring them up to the spirit of PCLinuxOS. Let's give them freedom.

Beachten Sie in der Kodierung für den Hintergrund, dass die Kodierung repeat y hat. Wenn ich das Bild auf der ganzen Seite haben wollte, würde ich noch repeat x hinzufügen oder einfach repeat schreiben. Auch die Seitenränder sind an der von mir spezifizierten Stelle. Ich habe Seitenränder für den linken, rechten, oberen und unteren Seitenrand. Desweiteren habe ich die Textgröße auf 90% der Größe eingestellt, in der normalerweise Webseiten angesehen werden. Wenn die Leute die Fontgröße (Schriftgröße) vergrößern möchten, können sie dies weiterhin tun. Die zur Verfügung stehende Fontgrößen sind xxsmall, xsmall, small, medium, large, xlarge. Sie können die Größe auch in Prozent angeben. Versuchen Sie verschiedene Größen, Fontstile (Schriftarten) und Farben im CSS aus und sehen Sie sich die Änderungen auf Ihrer Webseite an. Die Seitenränder können Sie natürlich auch ändern.


tux
Browser arbeiten sehr einfach, wenn sie ein Zeichen nicht erkennen, ignorieren sie es. Wenn das passiert, überprüfen Sie dessen Schreibweise und stellen Sie sicher, dass es keine Extrabuchstaben in den Zeichen gibt. Wie das Zeichen <p align= "right" >ein Browser kann Schwierigkeiten mit der Erkennung haben <p align= "right>. Sie müssen sich an alle "" (Anführungszeichen) in den Zeichen erinnern.

Style Sheets werden wie HTML kodiert. Sie haben ein opening ({) und ein closing (}) Zeichen. Beachten Sie die Interpunktion im Style Sheet, denn wenn irgendetwas falsch ist wird der Browser es ignorieren. Studieren Sie das Style Sheet und erkennen Sie seine Struktur. Die Webseite sieht an diesem Punkt wie in der Abbildung unten aus.

Dem Dokument ein Footer hinzuzufügen ist ein netter Zusatz. Anders als der Textkörper und der Header ist der Footer kein markiertes Element in HTML. Dies bedeutet jedoch nicht, dass das Dokument das nicht benötigt. Es kann die Kontaktinformationen, den Namen des Autors und/oder der Firma und Copyright Informationen beinhalten. Fügen Sie das folgende hinzu:

Code für das HTML-Dokument

<address>Jerry-Lee<br>Doghouse Way, Dogpound, BC, Canada<br>BAR KS1</address>

Diese Kodierung zum CSS-Dokument

address {
   text-align:middle;
   font-family:Verdana, Geneva, Arial, sans-serif;
   font-size:medium;
   color:#740000;
   line-height:100%;
   font-style:italic;
   }

Mit diesen Zusätzen zum CSS-und HTML-Dokument sollte Ihre Webseite wie folgt aussehen.

tux
Die Überschriften sollten kleiner werden, wenn das Thema weiter aufgegliedert und spezifischer wird.

In der folgenden Ausgabe besprechen wir das Verlinken (Verweisen) von Dokumenten und internen Dokumenten und das Herumspringen innerhalb eines Dokuments unter Verwendung von jumps.

Bis jetzt hat das Dokument die Zeichen heading, paragraph und img verwendet. Die Formatierung, die bisher bei der Webseitenerstellung erfolgte, ist der Zeilenumbruch, die Start- und Endposition der Paragrafen, sowie die Position des Bildes und wie das Bild vom Text entfernt ist. Das Dokument hat jetzt exakte Fontgrößen, Seitenränder, einen Hintergrund und einen Footer.

Mehr dazu in der nächsten Ausgabe.

Top | Weiter