×  
 ⎙  

Eine Webseite erstellen

Was ist HTML?

Tim Berners Lee Bevor Tim Berners Lee am CERN in Genf den Brow­ser (=Blät­terer) er­fand, be­stand das Inter­net vor allem aus kryp­ti­schen Tex­ten an Schwarz­weiß-Bild­schir­men. Durch den gra­fischen Auf­satz WWW (World Wide Web) gelang dem In­ter­net der Durch­bruch. Das Auf­rufen von Sei­ten er­folg­te nun nicht mehr durch die Ein­gabe von sich schwie­rig zu mer­kenden Be­fehlen auf der Tas­tatur, son­dern durch das An­klicken von Links (=An­ker, Ver­knüpfun­gen) mit der Maus. Der Brow­ser (z.B. Inter­net Ex­plorer, Mozilla / Sea­Mon­key, Chrome) über­nimmt die Dar­stellung der In­hal­te und das Über­setzen der Netz­werk-Be­fehle.

Dazu hat man eine spe­zielle Sei­ten­be­schrei­bungs­sprache ent­wickelt: HTML (Hyper­text Mark-up Lan­guage). Die Web-Sei­ten be­stehen aus ganz ge­wöhn­lichen Text­dateien, welche be­son­dere Be­feh­le in spit­zen Klam­mern ent­halten. Die­se Be­fehle nennt man Tags:

<!DOCTYPE html>
<html>
 <head>
   <title>Meine Homepage</title>
 </head>
 <body>
  <h1>Seitenüberschrift  </h1>
  ← Hier kommt der Inhalt der Seite hin!
 </body>
</html>

Einen guten Überblick über die HTML-Sprache findet man bei SelfHTML oder bei w3schools (Englisch). Mit dem Markup Validation Service von W3C kann man Seite auf HTML-Konformität prüfen lassen.

Häufig verwendete Tags und Sonderzeichen:

Tag      Beispiel
<h1><h1>Große Überschrift</h1>
<h2><h2>Kleinere Überschrift</h2>
<h6><h6>Kleinste Überschrift</h6>
<b>Hallo <b>fette</b> Welt
<i>Hallo <i>kursive</i> Welt
<big>Hallo <big>große</big> Welt
<small>Hallo <small>kleine</small> Welt
<center><center>Zentrierte</center> Welt
&shy;Com&shy;pu&shy;ter → Com|pu|ter (bedingtes Trennzeichen)
&hearts;I &hearts; html →  I ♥ html!
&rarr;Hier kommt ein Pfeil →
<font...<font color=red>rot</font>
<br>neue<br>
Zeile
<a><a href="https://www.bing.com/"> Bing</a>
<img<img alt="Hund" src="dog.jpg">

Bild mit Link und Bubble Help ↓
<a href="https://de.wikipedia.org/wi​ki/Tim_Berners_Lee">
 <img alt="Tim" title="Tim Ber­ners Lee" src="tbl.jpg">
</a>
<audio><audio controls="controls">
 <source src="blues.mp3" />
</audio>
<video><video controls="controls">
 <source id="mp4" src="candle.mp4">
</video>

Einige Tags gelten unter HTML5 als veraltet, z.B. <font …> </font>. Sie werden zwar von den meisten Browsern noch richtig in­ter­pre­tiert, kön­nen aber un­er­wünsch­te Ne­ben­effek­te ha­ben. Es gilt das Prin­zip, Inhalt und Format strikt zu tren­nen. Wir ver­wen­den des­halb für die Forma­tie­rung CSS.

Ein Mini-HTML-Kurs

(Unbedingt Quellcode lesen!!!)
  1. Schritt: Das HTML-Grundgerüst
  2. Schritt: Textauszeichnungen
  3. Schritt: Links
  4. Schritt: Bilder
  5. Schritt: JavaScript
  6. Schritt: Sonderzeichen
  7. Schritt: CSS
  8. Schritt: Dieser CSS-Menügenerator erstellt ein Grundgerüst.

Eigene Homepage bei Gratis-Webhoster

Die Suche nach einem ge­eig­ne­ten Web­space-An­bie­ter ist nicht ge­rade ein­fach, da man ent­weder viel be­zahlen muss oder von Wer­bung überflutet wird. Ich habe mich aus diesem Grund für www.bplaced.net ent­schieden

Vorgehen

Die Seite(n) er­stellen wir am be­sten mit einem Text­edi­tor, z.B. Notepad oder Notepad++. Von Micro­soft gibt es den aus­ge­zeich­ne­ten Edi­tor Visual Studio Code https://code.visualstudio.com/. Als WYSIWYG-Prog­ramm (What you see is what you get) bietet sich die Open­Source-Lö­sung Mo­zilla-Sea­Monkey an (https://seamonkey.at//). Als Gra­fik-Kon­ver­ter hat sich das Free­ware-Programm Irfan­View (https://www.irfanview.com/) be­stens be­währt.

Tipps:

Nach­dem du die Seite off­line (alle Dateien in einem Ord­ner auf deinem Com­puter) ge­spei­chert hast, er­öffnest du ein Kon­to bei www.bplaced.net.
Der frei wählbare Benutzername wird später Teil der URL (Web-Adresse):
http://benutzername.bplaced.net/

Aus diesem Grund sind inner­halb des Benut­zer­namens keine Son­der­zeichen erlaubt. Das Pass­wort sollte man sich auf­schrei­ben(!). Ohne Pass­wort ist das spä­tere Än­dern oder Lö­schen der Home­page nicht mehr mög­lich.
Bei einigen Free­hostern kann man mit einem be­lie­bigen Brow­ser die Sei­ten hoch­laden, wir ver­wen­den dazu das ftp-Protokoll.

FTP-Upload

Das ftp (File Transfer Protocol) er­laubt das be­queme Hoch­laden von vie­len Da­teien „in einem Auf­wasch“. Wer häu­fig an seiner Seite herum­bastelt, fährt da­mit sicher besser. Ich ver­wende dafür den aus­ge­zeich­neten Total Commander (eine Art Schwei­zer Taschen­messer für den PC):

FTP:Wert (Eintrag):
Host/Server:bigler.bplaced.net
Benutzer/User:ftp-benutzername
ftp-Kennwort:normales PWD
Entf. Verzeichnis:www
Lokales Verz.:Mein Verzeichnis mit *.html
ftp mit dem TotalCommander
ftp-Einstellungen (hier: TotalCommander)

Wie weiter?

Aus dem Informatik-Unterricht der Schule Jegenstorf
© Thomas Bigler 2005-2022