HomePage-Total.de Webseiten erstellen, optimieren und aufpeppen
HomePage-Total.de Webseiten erstellen, optimieren und aufpeppen
1) EinleitungWas ist HTML? HTML ist die Abkürzung für Hyper Text Markup
Language. HTML als
Programmiersprache zu bezeichnen wäre falsch. Es handelt sich viel eher um
eine Layoutsprache, das heißt, sie definiert das Aussehen einer Seite. Grundsätzlich sind HTML Dokumente (Datei Erweiterung entweder .htm oder
.html) Textfiles, deshalb kann sie auch jeder sehr leicht im primtivsten Text
Editor erstellen. Innerhalb dieser Dokumente kann man nun zwei unterschiedliche
Element-Gruppen erkennen. Zum Einen könnte man den ganz normalen Text, wie
er z.B. auf dieser Seite steht, auch aus dem HTML File herauslesen. Zum Anderen
die sogenannten "Tags" (sprich: Tägs). Was ist aber ein "Tag"?
Nun, als Tags bezeichnet man die Befehle, die den Browser (das ist z.B. Internet
Explorer) dazu veranlassen, das Text anders dargestellt wird (z.B. fett und groß
wie in der Überschrift).
So viel zu Beginn, gleich geht's weiter! 2) Die erweiterte Grundstruktur eines HTML DokumentsDa Computer nicht wirklich intelligent sind, müssen innerhalb eines HTML Dokuments einige Regeln befolgt werden. Um den gesamten Inhalt schlingt sich der <HTML>....</HTML> Tag. Erst dadurch erkennt der Browser, dass es sich um ein HTML Dokument handelt. Innerhalb dieses <HTML> Tags muss zuerst der <HEAD>....</HEAD> Tag folgen. In ihm sollten Information enthalten sein, auf die ich später eingehen werde. Dann folgt der <BODY>....</BODY> Tag. Dieser enthält alle sichtbaren Informationen (und auch noch ein paar andere).
3) Der <HEAD>...</HEAD> TagAlso, der <Head>...</Head> Tag beinhaltet normalerweise nur einen einzigen weiteren Tag, nämlich den <TITLE>...</TITLE> Tag. Dessen Inhalt wiederum gib an, was ganz oben am Fensterrand als Bezeichnung für die Seite steht. Im Falle dieses Dokuments ist das daher: <TITLE>HTML & mehr für Studenten</TITLE> 4) Der <BODY>...</BODY> TagHier beginnt nun die weite, weite Welt von HTML, total logisch und trotzdem manchmal schwierig zu durchschauen. Der Inhalt des <BODY>...</BODY> Tags ist verantwortlich für den gesamten Inhalt einer WWW Seite. Hier kann man Texte in den unterschiedlichsten Variationen, Bilder, Tables (darauf wird vielleicht noch viel, viel später eingegangen), Töne und natürlich die wesentlichen Links einfügen. Ein Link ist ein Art Wegweiser (im Browser meistens blau und unterstrichen) durch den man (durch draufdrücken) zu einem anderen Ort im Internet gebracht wird. Doch beginnen wir erst mal einfach: 4a) Einfache TagsWenn man innerhalb des <BODY>...</BODY> Tags einen schlichten Satz (z.B.: Ich bin Hans) setzt, dann würde im Browser in normaler Größe, weder dick noch schiefgestellt in der linken oberen Ecke Ich bin Hans stehen. Die folgenden einfachen Tags verändern das Aussehen des Satzes:
Na, das ist doch schon was! Den schlauen Füchsen und Füchsinnen unter Euch sind natürlich zwei Neuigkeiten aufgefallen:
Wie auch immer, der <BR> Tag leitet eine neue Zeile ein. Und jetzt aufgepaßt! Wichtig! Wenn Du innerhalb eines HTML Dokuments einen langen Text stehen hast, in dem kein <BR> Tag vorkommt, dann füllt der Browser jede Zeile voll und hüpft dann in die nächste Zeile. Durch den <BR> Tag kannst Du ihn dazu vorzeitig zwingen. Auch wenn im HTML Dokument jedes Wort Deines Textes in einer neuen Zeile stünde, würde der Browser die Zeile vollfüllen, denn das ist seine Pflicht, und er läßt sich nur durch den <BR> Tag davon abhalten. Es geht zwar auch schöner, aber wenn Du den Tag zweimal hintereinander stellst, kriegst Du eine Leerzeile. Was mir in diesem Zusammenhang auch noch wichtig erscheint: Der Browser akzeptiert zwischen zwei Wörtern höchstens einen Abstand. Das heißt, wenn Du ein Wort in Dein Dokument eintippst, dann zehn Mal auf die Space Taste hämmerst und dann noch ein Wort eintippst, so wird das Ganze im Browser trotzdem nur einen einzigen, ganz normalen Abstand haben. Weil wir gerade so bei den Abständen sind, einen Abstand mit einem Strich (auch Querbalken genannt), erreichst Du mit dem <HR> Tag. Ich mach jetzt einmal so einen Strich, dann geht's weiter mit komplizierteren HTML Tags. 4b) Komplizierte TagsNun wollen wir einmal ein Bild einfügen, und jetzt wird's ein bißchen schwieriger, denn unsere Tags bekommen so eine Art Erweiterung. Ich erkläre nun anhand eines Beispiels die genaue Funktion: <IMG SRC="hans.gif"> Diesen Tag könnte man so wie er hier steht in ein Dokument einfügen. IMG ist die Abkürzung für Image und kennzeichnet ein Bild. SRC ist die Abkürzung für Source. Innerhalb der Anführungszeichen wird der Name (also die Quelle = Source) des Grafik-Files angeführt (in diesem Fall hans.gif). Wie auch schon <BR> und <HR> ist der <IMG> Tag einteilig. Das Bild von Hans muss jetzt nur noch im selben Verzeichnis wie auch das Dokument sein, und schon sieht man es im Browser. Um mit den Erweiterungen noch mehr Verwirrung zu stiften, erwähne ich gleich jetzt die align="..." Erweiterung. Auch sie möchte ich anhand des etwas modifizierten Beispiels vorstellen: <IMG SRC="hans.gif" align="right"> Wenn mann jetzt das Beispiel betrachtet, kann man erkennen, das es nur "erweitert" wurde, nämlich um align="right". Diese Erweiterung veranlaßt den Browser, das Bild nicht am linken Rand, sondern am rechten darzustellen. Die align="..." Erweiterung wird auch von einigen anderen Tags aktzeptiert, und Probieren geht bekanntlich über studieren! (Du kannst auch nichts falsch machen, denn tust Du's doch, übersieht es der Browser, glaub mir!). So, jetzt wollen wir einmal einen heiß ersehnten Link einbauen. Noch einmal zur Wiederholung, ein Link kann ein Wort, ein Satz, ein Buchstabe oder ein Bild sein, der <A>...</A> Tag (eine Abkürzung für Anchor) ist vielfältig anwendbar. Wir wollen unseren lieben Hans nicht vergessen, und eben dieser wünscht sich, dass von seinem Namen ein Link zu einer Seite mit seinem Lebenslauf geht. Der <A>...</A> Tag umschließt also den Namen Hans. Freilich müssen wir auch irgendwo die Zielseite unterbringen , wir nennen sie der Einfachheit halber lebenslauf.htm. Das Ziel wird durch die Tag-Erweiterung HREF="..." definiert. So, unser Beispiel sieht also folgendermaßen aus: Ich bin <A HREF="lebenslauf.htm">Hans</A> Im Browser sieht das dann so aus: Ich bin Hans So, ich denke, das ist gar nicht so schwer, also kann ich gleich ein paar Worte zu der Adressierung der Zielseite verlieren. In unserem Beispiel bin ich davon ausgegangen, dass sich die Datei lebenslauf.htm im selben Verzeichnis (bei u:net z.B. das verzeichnis axxxxxxx/html/) befindet wie auch die Datei, aus der der Link herausführt. Wichtig!: Wenn ein Link auf eine Datei im selben Verzeichnis verweist, so darf auf keinen Fall http:// davorstehen. Verweist der Link allerdings ganz woanders hin, sagen wir mal zum Website von Sony, so muss der Link lauten (Und hier ist http:// davor wichtig!): Ich bin <A HREF="http://www.sony.com">Sony Entertainment</A> Will man ein Bild als Link benutzen, umschlingt man mit <A>...</A> ganz einfach den <IMG> Tag: <A HREF="http://www.sony.com"><IMG SRC="sony-logo.gif"></A>
Womit wir bei den sogenannten Listen wären. Listen geben dem HTML Autor die Möglichkeit, Ordnung in sein Dokument zu bringen. Ich möchte die drei wichtigsten Versionen vorstellen:
Du hast soeben die 2. Variante, nämlich eine Ordered List kennengelernt. Das 1.,2.,3. habe nicht ich zu den verschiedenen Arten von Listen dazugeschrieben, sondern das hat der Browser für mich gemacht. Schauen wir uns die Ordered List bzw. den dazugehörigen <OL>...</OL> Tag gleich genauer an. In einer Ordered List gibt es, wie auch bei den meisten anderen Arten von Listen sogenannte "List Items". Ein List Item ist ein Bestandteil meiner Liste, das heißt, jedes List Item erhält ein Pünktchen oder eine Zahl, abhängig von der Art der Liste. In der oberen Aufzählung hatte meine Ordered List drei List Items, nämlich "Unordered List", "Ordered List" und "Definition List". Jedes der drei Items erhielt seine eigene Zahl, da sie jedes für sich von einem eigenen <LI>...</LI> Tag umschlungen waren. Hier zum genauen Verständnis:
In der 2. Variante, der Unordered List, ändert sich bis auf den Tag gar nichts. Der neue Tag lautet <UL>...</UL>. Dementspreched das Original gleich auch mit dem Aussehen im Browser:
Die 3. Variante, die Definition List, sieht ein wenig anders aus. Eröffnet bzw. geschlossen wird sie mit dem <DL>...</DL> Tag. In einer Definition List gibt es allerdings zwei unterschiedliche Elemente:
Wie man schon erkennen kann, erleichtert einem eine Definition List z.B. die Gestaltung eines Glossars wesentlich. Auch die Beschreibung der zwei Worte wurde mit so einer Liste gelöst, hier wieder das Originaldokument neben der Anzeige im Browser.
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||
Das könnte Sie interessieren:
Farbnamen, Hexadezimal, Dezimal, Prozent, Negativ und mit einem Farbbeispiel.
Aufzählungslisten (und Nummerierte Listen) mit HTML und CSS formatieren
Favicon erstellen - Favoriten Icon - Ihr Logo in den Favoriten (Lesezeichen)
Bildergalerie mit iFrames - Diese Galerie benötigt kein JavaScript und ist sehr einfach anpassbar.
Alles Englisch?! - Eine Auflistung der wichtigsten HTML-Bezeichnungen ins deutsche übersetzt bzw. es wird deren Bedeutung erklärt.
Umlaute, Sonderzeichen, Unicode und ANSI-Code
Bilder nebeneinander stellen - Mit Hilfe einer HTML-Tabelle können Sie sehr einfach Bilder nebeneinander oder untereinander stellen.
Schriftfamilie
Alternativtext - Beim Attribut alt= geben Sie einen Alternativtext an, für den Fall, dass die Grafik nicht angezeigt werden kann. Der Alternativtext dient auch zur Information...
Einen Link zum Seitenanfang setzen - Ist die Webseite etwas lang geworden, kann man einen Link zum Seitenanfang setzen.
…mehr
