Computer & Elektronik
Webseite mit HTML erstellen.
Um eine richtige Webseite professionell zu gestalten, kommt niemand darum herum die Webseite direkt mit dem Quellcode, als Grundlage HTML, der Hypertext Auszeichnungssprache zu schreiben. Dies ist sobald man ein wenig geübt ist kinderleicht.
Was ist HTML?
Mit HTML wird im Internet Text formatiert. Sie ist heute die meistervwendete Sprache im Web. Sie bewirkt beispielsweise, dass gewisser Text fett dargestellt wird. Die Schrift so gross ist wie sie ist, ein Bild zu sehen ist wo eins zu sehen ist, sie verlinkt Text auf einer Webseite usw. HTML verleiht einer Webseite das aussehen.
HTML wurde 1989 von Tim Berners Lee am Cern festgelegt. Heute wird die Sprache vom W3C, dem Gremium zur Standardisierung des World Wide Webs weiterentwickelt.
HTML ist keine Programmiersprache. Die Aufgabe von HTML ist es Text auszuzeichnen und ihr damit eine Struktur zu verleihen.
Die erste Seite aus HTML
Um HTML zu schreiben benötigen Sie einen Texteditor wie den Editor unter Windows oder, wie ich glaube Textedit unter Mac. Beide Programme sind bereits auf Ihrem PC vorhanden, damit sind Sie mit der Grundausrüstung versorgt. Natürlich gibt es noch andere Programme, vorallem auch bessere Texteditoren, doch dies reicht momentan volkommen aus.
Öffnen Sie Ihr Programm und schreiben folgendes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Titel</title> </head> <body> Inhalt </body> </html>HTML zeichnet den Text mithilfe von Tags aus. Meist umklammert so ein Tag den zu formatierenden Befehl mit einem Starttag und einem Endtag:
<title>Titel</title>Ein HTML-Dokument besteht aus 2 Teilen, den Bereichen Head und Body, bzw. Kopf und Körper. Im Kop-Bereich sind alle Informationen zum Dokument zu finden (beispielsweise Titel der Seite), im Körper ist der eigentliche Inhalt zu finden, der Teil der im Browser zu sehen ist.
"Titel" zwischen <title> und </title> können Sie beliebig ändern - Schreiben Sie dort den gewünschten Titel Ihrer Seite hinein. Dieser Titel wird im Browser beispielsweise auf den Tabs angezeigt.
Schreiben Sie anstelle von "Inhalt" Einen beliebigen Text, Beispiel:
Ich bin dabei HTML zu lernen. Dies ist mein erstes HTML Dokument.Speichern Sie Ihre Datei mit der Endung .htm oder .html ab (beides ist das Selbe).
Öffnen Sie Ihre Datei mit Ihrem Browser (Internet Explorer, Safari, Firefox, Chrome, Opera, ...)
Wirklich schwierig war dies wohl kaum, doch Sie haben soeben Ihre erste Internet-Fähige Seite erstellt. Theoretisch könnten Sie exakt diese Datei auf einen Server hochladen und alle können Ihre Datei zu Hause mit dem Browser betrachten.
Text formatieren
Sie haben zwar bereits eine Seite erstellt, jedoch beinhaltet diese bisher nur faden Text. Momentan sollte Ihre Seite beispielsweise so aussehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>HTML-Dokument</title> </head> <body> Ich bin dabei HTML zu lernen. Dies ist mein erstes HTML Dokument. </body> </html>Nun geht es darum den Text mit einfachen Mitteln zu formatieren. Speichern Sie zwischendurch Ihre Datei ab und betrachten Sie sie in Ihrem Browser um zu sehen was sich wie verändert.
Bei allen 3 Formatiotnen die hier behandelt werden gibt es je 2 unterschiedliche Tags, die für verschiedene Zwecke benutzt werden. Da wir in diesem Beispiel Text auszeichnen benutzen wir die semantisch-logischen und nicht physisch-visuellen Tags. Doch zerbrechen Sie sich damit noch nicht den Kopf, das sind Feinheiten die für Sie noch nicht so wichtig sind.
Schrift Fett gestalten. Um Schrift fett zu gestalten benötigen Sie den Tag "strong". Klammern Sie belibigen Text bei Ihnen in der Datei mit diesem Tag ein, dies kann dann beispielsweise so aussehen:
Ich bin dabei <strong>HTML</strong> zu lernen. Dies ist mein erstes HTML Dokument.Schrift Kursiv gestalten. Mit dem "em" Tag wird Schrift kursiv gestaltet, Beispiel:
<em>Ich</em> bin dabei <strong>HTML</strong> zu lernen. Dies ist mein erstes HTML Dokument.Schrift unterstreichen können Sie mithilfe des Tags "u" was für underline steht. Beispiel:
<u><em>Ich</em> bin dabei <strong>HTML</strong> zu lernen.</u> Dies ist mein erstes HTML Dokument.Mehr!
Um mehr HTML zu lernen gibt es im Internet diverse Tutorials. Einfach mal Onkel Google nach "HTML Tutorial" fragen.
gute Beispiele:
- html.net
- selfhtml.org
Vielleicht helfen Ihnen auch Bücher zum Thema:
Nachdem Sie HTML gelernt haben oder die Sprache bereits beherrschen gibt es noch jede Menge weitere Sprachen die im Web hilfreich sind.
CSS
Um CSS kommen Sie zumindest heutzutage nicht mehr herum. Denn HTML strukturiert die Webseite nur, während CSS der Webseite das Äusserliche verleiht.
- html.net
Javascript
JavaScript animiert eine Webseite und bringt Leben in die Geschichte.
- barmetler.de
PHP
PHP ist eine serverbasierte Programmiersprache. Man kann mit ihr sehr viel machen wie ein Forum, Formulare auswerten usw.
- Quakenet#php
Veröffentlichen
Um eine Seite zu veröffentlichen benötigen Sie einen Server, bzw. Webspace auf einem. Es gibt zahlreiche kostenpflichtige.
Sehr zu empfehlen und dazu noch gratis, doch leider ohne Topleveldomain (.de, .ch, .com, ...):
- bplaced.net
- square7.ch
Um dort die Dateien online zu stellen müssen Sie diese per FTP hochladen. Dazu benötigen Sie ein Programm wie beispielsweise Filezilla, das ebenfalls gratis angeboten wird:
- filezilla.de