Ihre eigene Webseite erstellen

von Rodney A. Adkins

minime93

Um Webseiten zu erstellen, benötigen Sie einen Browser (vorzugsweise Firefox) und einen Texteditor. Unter keinen Umständen würde ich einen WYSIWYG Editor benutzen (wysiwyg). Bei der Erstellung einer Webseite müssen Sie die Grundlagen von HTML kennen. Wenn Sie diese verstehen und Ihre Seite falsch angezeigt wird, können Sie die Ursachen dieses Problems finden.

HTML steht für Hyper Text Markup Language. Es ist vielseitige Sprache und wird von allen möglichen Internet-Browsern verwendet. Ein HTML-Dokument ist im Wesentlichen eine ASCll (amerikanischer Standard-Code für Informations-Austausch) Textdatei, die spezielle Codes enthält, die die Formatierung der Dokumente und der Links (Verweise) zu anderen Quellen (Webseiten, Video, Bilder, etc.) darstellen.

WWW oder W3 steht für World Wide Web. Das Projekt W3 wurde durch das europäische Labor für Partikel-Physik (CERN) in Genf die Schweiz begonnen. In 1989 schlugen sie vor, dass das Projekt Forschungsinformationen und -ideen effizient innerhalb der Organisation übertragen sollte. Dies war für CERN sehr wichtig, da die Mitglieder weltweit verstreut waren.

Das Projekt schlug zuerst vor, ein einfaches Netzwerksystem zu benutzen, um Hypertextdokumente zu seinen Mitgliedern zu tragen. Ende 1990 wurde Internet-Software auf einem Computer demonstriert. Diese Software erlaubte den Benutzern, Hypertextdokumente zu bearbeiten und diese an andere Mitgliedern im Netzwerk zu übertragen.

1992 begann CERN die Ideen seiner eigenen Organisation auch außerhalb der Organisation zu fördern. Zur Förderung des Internets gab CERN den Quellcode für W3 Server und Browser frei. Die Freigabe des Codes und die fortschreitende Entwicklung in der Technologie und in den Dateiformaten hat das Internet auf den heutigen Stand gebracht.

Die Informationen im W3 Internet wurden für eine Klienten/Server Architektur entworfen. Der Klient (Webbrowser) fordert Informationen vom Server (Webserver) an. Der Server reagiert auf diesen Antrag, indem er die Informationen sendet. Der Server ist für die Speicherung des Dokuments verantwortlich und der Webbrowser für das Anzeigen dieses Dokuments.

Browser- und Plattform-Eigenschaften müssen in Erwägung gezogen werden, wenn man eine Webseite entwirft. Die Seiten-Wiedergabe wird durch die verschiedenen Browser, deren Versionen, verschiedene Computermonitore, Bildschirmauflösungen, und die Computerplattform beeinflußt; diese alle beeinflussen die Weise, wie der HTML-Code angezeigt wird. Die meisten diesen Problemen können überwunden werden, indem man die Webseite mit verschiedenen Browsern, Auflösungen und, wenn Sie können, auf einer anderen Plattform ansieht.

CSS steht für Cascading Style Sheets. CSS ist ein einfacher Mechanismus für das Hinzufügen von Schrifttypen (die z.B. Fonts, Farben, Leerzeichen), zu den Internet Dokumenten.

Ihre erste Webseite erfordert einen Inhalt. Entscheiden, was Sie in Ihre Webseite setzen wollen oder folgen Sie dem, was ich verwende:


Willkommen zu Jerry-Lee's Webseite. Ich bin ein zwölf Jahre alter Schäferhund, der nicht bellt. Ich habe große braune Augen und weiss 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.


Für dieses Projekt benutzen wir den Editor KEdit (in Synaptic vorhanden).

Es gibt einige Tags, die für ein korrektes Anzeigen einer HTML-Seite absolut notwendig sind. Diese Tags sind die grundlegenden Zeichen der HTML Seite. Erinnern Sie sich bitte auch daran, dass jede Tag-Umgebung einen öffnendes Tag und ein schliessendes Tag hat. Den Code bitte nicht in Großbuchstaben eingeben. Alle Codes werden mit amerikanischer Rechtschreibung buchstabiert. Das Dokument benötigt auch eine Dokumententyp; wir verwenden das folgende doc.type und Codes, beachten Sie die öffnenden und die schliessendes Tags:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Die Seite in KEdit speichern, indem Sie auf „Speichern als“ klicken und im darauf foldenden Fenster den Namen „myweb.html“ eingeben. Stellen Sie den „Filter“ auf „allen Dateien anzeigen“ ein.

Wie Sie im oben gezeigten Code sehen können, haben alle Tags einen öffnenden und einen schliessenden Tag. Nun wollen wir der Seite etwas Inhalt hinzuzufügen und das geschieht zwischen den body-Tags, zum Beispiel so:

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

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

</head>

<body>

Willkommen zu Jerry-Lee's Webseite. Ich bin ein zwölf Jahre alter Schäferhund, der nicht bellt. Ich habe große braune Augen und weiss 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

</body>

</html>

Diesen Inhalt sehen wir uns nun in Firefox an.


Willkommen zu Jerry-Lee's Webseite. Ich bin ein zwölf Jahre alter Schäferhund, der nicht bellt. Ich habe große braune Augen und weiss 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.


Wie Sie sehen können, wird der Text angezeigt, jedoch ohne Formatierung. Im folgenden Schritt werden wir diese hinzuzufügen. Dazu verwenden wir einen Heading-Tag, der verschiedene Größen von h1 zu h6 hat, einen Paragraph-Tag und eine Zeilenumbruch-Tag.

<!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>

<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>

<br />

<p>Jerry-Lee.</p>

</body>

</html>

In Firefox geladen sehen Sie, dass die Seite nun wie von uns gewünscht forrmatiert ist. Dies ist der Anfang einer sehr einfachen Webseite.


Willkommen zu Jerry-Lee's Webseite.

Ich bin ein zwölf Jahre alter Schäferhund, der nicht bellt. Ich habe große braune Augen und weiss 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.


Nach der Formatierung wird es Zeit, mit den folgenden Tags eine Abbildung hinzuzufügen:

<img>, <h1>, <span>

Wir werden auch die folgenden Attribute in den img Tag einfügen.

src=, talt=, talign=, vspace=, hspace=, and border=

Der img Tag wird zum Hinzufügen einer Abbildung verwendet, align erklärt dem Dokument die Position dieser Abbildung, hspace und vspace erklären dem Browser den Abstand zwischen der Abbildung und dem Text. Der alt-Tag beschreibt die Abbildung für die Leute, die das Anzeigen von Grafiken im Browser deaktiviert haben. Der border-Tag definiert die Grösse des Bildrandes. Sie sollten die Höhe und Breite sowie die alt-Tags immer mit einschließen.

<!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>

<img src="images/03-01.png" height="160" width="120" alt="mein Hund" align="left" />

<p>Ich bin ein zwölf Jahre alter Schäferhund, der nicht bellt. Ich habe große braune Augen und weiss 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 .</p>

<br />

<p>Jerry-Lee</p>

</body>

</html>

Die Abbildung unten von Firefox und der Webseite zeigt diese einfache Webseite.


Welcome zu Jerry-Lee's Webseite

Mein Hund

Ich bin ein zwölf Jahre alter Schäferhund, der nicht bellt. Ich habe große braune Augen und weiss 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


Dies ist ein sehr grundlegender Anfang einer Webseite. Jeden Monat fügen wir mehr Code hinzu. Dieser Artikel soll dem Leser ein eingehendes Verständnis von HTML vermitteln, damit er eine Seite mit einer Kombination von HTML-und CSS kodieren kann.


Rodney

Über den Autor:

Rodney interessierte sich seit 1997 für Web-Design. Universität nahm er Kurse in grundlegender und fortgeschrittener HTML-Programmierung, sowie einen Kurs in Javascript. Er arbeitet als Freiwilliger und liebt es, individuellen Pensionären den Umgang mit Computer zu lehren.


Top Weiter