Zur Haupt­na­vi­ga­ti­on sprin­gen [Alt]+[0] Zum Sei­ten­in­halt sprin­gen [Alt]+[1]

Ei­ge­ne Web­sei­ten er­stel­len

Worum geht es hier?

Jeder von euch hat schon mal eine Web­sei­te aus dem In­ter­net ab­ge­ru­fen. Die Namen der Web­sei­ten enden oft auf "html". HTML ist eine Fest­le­gung, wie man eine Text­da­tei ge­stal­ten muss, damit ein Web­brow­ser sie an­zei­gen kann. Die Grund­prin­zi­pi­en hier­von lernst du hier.

Hier lernst du ...

  • ... wie man eine Web-Seite be­ar­bei­tet.

  • ... wie eine HTML-Seite auf­ge­baut ist.

  • ... was ein HTML-Tag ist und wel­che Stan­dard­tags es gibt.

  • ... wie man ein Bild in eine Web­sei­te ein­bin­det.

  • ... wie man Web­sei­ten ver­linkt.

Auf­bau einer Web­sei­te

Der Web-Ser­ver bie­tet die Mög­lich­keit ei­ge­ne Web­sei­ten zu er­stel­len. Dazu musst du ein biss­chen HTML (Hy­per­text Mark­up Lan­gua­ge) ler­nen:

HTML-Do­ku­men­te haben immer die glei­che Form: 

<html>
  <head>
    <title> Titel der Seite für die Titelleiste des Browsers </title>
  </head>
  <body>
    <h1>Angezeigter Titel</h1>
    <p>Hier steht alles, was angezeigt werden soll.</p>
    <p><a href='seite2.htm'>Dies</a> ist ein Link auf die Seite 2.</p>
   </body>
</html>

Im Body steht alles, was auf der Seite an­ge­zeigt wer­den soll. Die For­ma­tie­rung er­folgt durch so­ge­nann­te Tags. Tags sind in <> ein­ge­schlos­se­ne For­ma­tie­rungs­kür­zel.

Im Body kön­nen unter an­de­rem fol­gen­de For­ma­tie­rungs­an­wei­sun­gen (Tags) be­nutzt wer­den:

Über­schrift (Größe 1-3): <h1>…</h1>, <h2> … </h2>, <h3>… </h3> (hea­ding)
Ab­satz (nor­ma­ler Text): <p> … </p> (para­graph)
Schrift­schnitt fett:
un­ter­stri­chen:
kur­siv:		 <b> … </b>
<u> … </u>
<i> … </i> 		(bold)
(under­li­ne)
(italic)
Neue Zeile: <br> (break)
Ho­ri­zon­ta­le Linie: <hr> (hori­zon­tal ruler)
Bil­der: <img src=“rose.​jpg“>
<img src=“http://​www.​woher.​de/​rose.​jpg“ width=300 height=400>		 (image)
Links: <a href=“sei­te2.html“>Link zu an­de­rer Seite auf glei­chem Web­ser­ver</a>
<a href=“http://​www.​wohin.​de“>Link zu an­de­rem Web­ser­ver</a>
Auf­ga­be 8: Ei­ge­ne Web-Sei­ten (Video: run­_­fi­li­us_a8_ei­ge­ne­Web­sei­ten.mp4)

Schaue dir das Video an. Führe dann fol­gen­de Auf­ga­ben an der Fi­li­us-Datei von Auf­ga­be 7 durch:

  1. (a) Ver­än­de­re die Stan­dard­sei­te "index.​html" auf dem Web-Ser­ver mit Hilfe des Text­edi­tors. Kon­trol­lie­re, wie die Datei im Brow­ser eines an­de­ren Rech­ners an­ge­zeigt wird.
  2. (b) Suche im In­ter­net nach einem klei­nen (nicht grö­ßer als 400x300 Pixel) Bild, das zu dei­ner Web­sei­te passt. Achte dar­auf, dass du ein Bild aus­suchst, bei dem der Ur­he­ber der Ver­wen­dung zu­ge­stimmt hat. Lade das Bild mit dem Da­tei­ex­plo­rer in Fi­li­us auf den Web-Ser­ver hoch. Lasse das Bild auf dei­ner Web­sei­te an­zei­gen.
  3. (c) Er­stel­le auf dei­nem Web-Ser­ver eine zwei­te Web­sei­te. Er­stel­le auf der Stan­dard­sei­te einen Link auf deine neue Seite.
  4. (d) Er­stel­le einen kom­plett neuen Web-Ser­ver. Gib die­sem im DNS-Ser­ver einen Do­main-Namen dei­ner Wahl. Er­stel­le einen Link von den Web­sei­ten des ers­ten Web-Ser­vers auf die Web-Seite des zwei­ten Web-Ser­vers.
    Be­ob­ach­te den Da­ten­ver­kehr, wenn du den Link im Brow­ser an­klickst.

Nur für Ex­per­ten: Vir­tu­el­le Hosts

Viele Web­pro­vi­der (An­bie­ter von Web­ser­vern) haben die Web-Sei­ten von vie­len ver­schie­de­nen Fir­men oder Per­so­nen ge­spei­chert und bie­ten diese auf einem ein­zi­gen Web­ser­ver an. Die Daten jedes An­ge­bots lie­gen dabei in einem ei­ge­nen Ver­zeich­nis auf dem Ser­ver. Trotz­dem kön­nen die Sei­ten ohne An­ga­be eines Un­ter­ver­zeich­nis­ses ab­ge­ru­fen wer­den.

Dazu muss beim Web-Ser­ver ein­ge­tra­gen wer­den, in wel­chem Un­ter­ver­zeich­nis die Daten für An­fra­gen an einen be­stimm­ten Do­main-Namen lie­gen. Na­tür­lich müs­sen alle Do­main-Namen im DNS-Ser­ver ein­ge­tra­gen sein und auf die IP-Adres­se des Web-Ser­ver ver­wei­sen.

Wenn in jedem Un­ter­ver­zeich­nis eine Stan­dard­sei­te index.​html liegt, sieht es für den Be­nut­zer am Ende so aus, als gäbe es meh­re­re Web­ser­ver.

virtuelle Hosts

© Screen­shot des Pro­gramms FI­LI­US. Die Rech­te lie­gen bei den Ent­wick­lern.

Auf­ga­be 9: Vir­tu­el­le Hosts
  1. (a) Lege zwei Un­ter­ver­zeich­nis­se (z.B. achern und et­ten­heim) im Web­ser­ver-Ver­zeich­nis an. Er­stel­le in jedem eine klei­ne Be­grü­ßungs­sei­te und spei­che­re sie unter dem Namen index.​html.
  2. (b) Trage im DNS-Ser­ver zwei Do­main-Namen für Deine bei­den Web­sei­ten ein. Die IP-Adres­se ist bei­des mal die glei­che (die des Web-Ser­vers).
  3. (c) Weise die­sen Do­main-Namen im Web-Ser­ver die Un­ter­ver­zeich­nis­se zu.
  4. Teste mit dem Web­brow­ser, wel­che Sei­ten an­ge­zeigt wer­den, wenn du die bei­den neuen Do­main-Namen ein­gibst.

 

Fi­li­us – Si­mu­la­ti­on von Rech­ner­net­zen: Her­un­ter­la­den [odt][593 KB]

Fi­li­us – Si­mu­la­ti­on von Rech­ner­net­zen: Her­un­ter­la­den [pdf][505 KB]

 

Wei­ter zu Ping