/mein-webserver

Mein Webserver

Herzlich willkommen!

In diesem Kapitel wirst du lernen, wie du deine eigene Webseite erstellen kannst. Wir werden mit HTML (der Sprache des Internets) arbeiten und sogar einen einfachen Webserver mit dem Programm PHP aufsetzen.

Lass uns zusammen durchstarten!

HTML-Hilfe

Hier findest du einige Seiten, die dir beim Schreiben in der HTML-Sprache helfen können.

Grundlegendes

In dieser Tabelle findest du die grundlegensten HTML-Elemente zum nachschlagen:

Tabelle: Grundlegende HTML-Elemente
<a>Das Anker-Element generiert einen <a href="/einheiten">Link</a> zu einer anderen Seite oder URL.
<b>Das Bold-Element macht einen Teil des Textes <b>fett</b>.
<bgsound> Das Bgsound-Element fügt deiner Seite Hintergrundsmusik hinzu (plaziere es im Kopf der Seite): <head> <bgsound src="musik.wav" loop="3"> </head>
<big>Das Big-Element macht deinen Text <big>grösser</big>.
<body><body>Das Body-Element enthält den ganzen Inhalt (Körper) deiner Webseite.</body>
<br>Das Br-Element fügt einen<br>
Zeilenumbruch ein.
<button>Das Button-Element fügt einen <button></button> ein.
<center>
<center>Das Center-Element zentriert den Text.</center>
<div> Das Div-Element enthält einzelne Abschnitte in deinem Dokument: <div> <h1>Das ist ein neuer Abschnitt.</h1> <p>Mit einem Paragraphen.</p> </div>
<embed>Das Embed-Element signalisiert dem Browser ein Medium (Video / Audio) in die Seite einzubetten. <embed src="video.mp4">
<h1> - <h6>Die Header-Elemente formatieren deinen Text zu einer Überschrift in verschiedenen Grössen.
<h6>Das ist zum Beispiel die kleinste Überschrift</h6>
<head>Das Head-Element beinhaltet den Kopf deiner Seite und enthält generelle Informationen über das Dokument: Seitentitel, Metadaten, Skripte und vieles mehr, über das du dir jetzt nicht zu viele Gedanken machen musst.
<hr>Das HR-Element fügt eine horizontale Linie ein.
<html>Das Html-Element enthält alle anderen HTML-Elemente, also auch Kopf und Körper der Seite.
<img>Das Img-Element fügt ein Bild in die Seite ein: <img src="tux.gif" />
<i>Das Italic-Element formatiert deinen Text <i>kursiv</i>.
<li>Das List-Element definiert eine Liste mit sortierten oder unsortierten Elementen. <ol>
  1. <li>erstes</li>
  2. <li>zweites</li>
  3. <li>drittes</li>
</ol> <ul>
  • <li>rot</li>
  • <li>gelb</li>
  • <li>blau</li>
</ul>
<ol>Das OL-Element definiert eine sortierte Liste.
<p>Das P-Element definiert einen neuen Paragraphen

<p>auf einer neuen Zeile.</p>
<s>Das S-Element <s>streicht Text durch</s>.
<u>Das U-Element <u>unterstreicht deinen Text</u>.
<ul>Das UL-Element definiert eine unsortierte Liste.
Diese Inhalte sind von der Seite Fillster.com, auf welcher auch noch alle weiteren Elemente beschrieben sind.

Lustiges

Mit HTML kannst du die Dinge auch in Bewegung setzen.

Tabelle: Bewegte HTML-Elemente
<marquee><marquee>Dieser Text bewegt sich von rechts nach links.</marquee>
<marquee behavior="slide"><marquee behaviour="slide">Dieser Text rutsch von rechts herein.</marquee>
<marquee behavior="alternate"><marquee behavior="alternate">Dieser Text wechselt die Richtung.</marquee>
<marquee direction="right"><marquee direction="right">Dieser Text bewegt sich nach rechts.</marquee>
<marquee direction="up"><marquee direction="up">Dieser Text bewegt sich nach oben.</marquee>
<marquee direction="down"><marquee direction="down">Dieser Text bewegt sich nach unten.</marquee>
<marquee loop="5"><marquee loop="5">Dieser Text kommt nur fünf mal.</marquee>
<marquee scrollamount="20"><marquee scrollamount="20">Dieser Text bewegt sich schneller.</marquee>
<marquee scrolldelay="500"><marquee scrolldelay="500">Dieser Text bewegt sich verzögert.</marquee>
<marquee bgcolor="#ff8800"><marquee bgcolor="#ff8800">Dieser Text hat eine andere Hintergrundfarbe.</marquee>
Du kannst auch verschidene Marquees miteinander kombinieren.
Probiere das doch einfach einmal aus.
Oder Bilder in den Marquee einfügen.
Solche sich bewegenden Bilder (wie das des Männchens oben) nennt man Gifs. Früher war das Internet voll mit diesen Bildern, doch vielleicht gefallen sie dir und du erweckst sie zu neuem Leben. Auf dieser Seite findest du viele Gifs, die irgendwo im Internet zuhause waren: GifCities.org