Tipps für ihre Website:

HTML-Kurs: Eine praxisnahe Einführung (Teil 2)
Im zweiten Teil der Einführung behandeln wir die Formatierung von Texten sowie die Möglichkeit, Bilder einzubinden. Dabei zeigen wir wiederum nur grundsätzliche Möglichkeiten auf - einen Überblick über alle Möglichkeiten von HTML finden Sie unter SelfHTML.

Textbefehle in HTML

HTML ist kinderleicht - wie wir gesehen haben, ist eine einfache Webseite mit nur sieben Zeilen Code erstellt. Hinzu gehört bei jeder Website auch Text, welcher natürlich gut überlegt strukturiert sein sollte (siehe dazu auch unsere Inhaltstipps). Der Text wird einfach zwischen die <body> und </body> Tags geschrieben. Wird der Text ohne Schriftangabe eingefügt, sieht man im Browser den Text in der Schriftart "Times New Roman" und der Schriftgröße "10" dargestellt. Um z.B. den Text in Arial auszugeben, benutzt man den Tag "font" sowie das Attribut "face": Um den anders darzustellenden Text muss <font face Arial> hinzugefügt werden. Face ist der englische Begriff für das Aussehen, also die Textart, der Schrift. Die Schriftgröße wird mit dem Zusatz size skaliert. Hierzu muss man wissen, dass jedes Tag beliebig viele Attribute besitzen kann. Jedes neue Attribut wird mit einem Leerzeichen nach dem letzten Attribut getrennt und vor das abschließen > gehängt. Da der Text standardmäßig nur in Schwarz ausgegeben wird, kann man den Inhalt auf einem schwarzen Hintergrund schlecht lesen. Durch das Einfügen des Befehls color kann die Schriftfarbe variiert werden. Um den Text kursiv zu legen, muss man den Tag <i> ... </i<> am Anfang sowie am Ende des Textes einfügen. Dasselbe gilt für einen unterstrichenen und fetten Text. Für den unterstrichenen Text gilt der Befehl <u> ... </u> und für den fetten <b> ... </b>. Folgendes Codebeispiel kombiniert die hier erwähnten Darstellungsmöglichkeiten;
<font face="Arial" size="-1" color="#0000FF">
<i><u><b>
Programmieren macht Spass
</i></u></b></font>


Um den Text zentriert darzustellen muss der Tag <center> ... </center> benutzt werden. Natürlich ist es wichtig, auch Zeilenumbrüche oder neue Absätze zu erstellen. Der Zeilenumbruch wird durch ein <br> angegeben, einen neuen Absatz öffnet und schliesst man mit einem <p> und </p>.

Am Besten ist es, wenn Sie mit den nun neu erlernten Befehlen, Tags und Attributen ein wenig herumprobieren und schauen, wie Sie verschiedene Texte bearbeiten können. Beachten Sie, dass Textgrößen nicht wie in Word Werte über 10 haben, sondern stadardisierte Werte benutzt werden. Normalerweise ist die dargestellte Schrift "2" groß. In unserem Beispiel haben wir bei size -1 verwendet. Dies verkleinert die Schrift. Andererseits können Sie mit +1 die Schrift um einen Schritt vergrößern. Das Prinzip funktioniert im Grunde beliebig (es ist denkbar +5 zu zählen), sollte aber durch das Benutzen von absoluten Werten ersetzt werden (size="X"). Zur Einführung können Sie folgenden Code in Ihrem Editor einfügen und herumbasteln...

<html>
<head>
<title>Meine erste Website</title>
</head>
<body bgcolor="#FFFFFF">
<font face="Arial" size="-1" color="#0000FF">
<i><u><b>
Programmieren macht<br> Spaß
</i></u></b>
<p>Euch auch?</p>
</font>
</body>
</html>


Bilder einbauen in HTML


Alle heutzutage aktuellen Browser können Bilder in den Formaten .gif, .jpg und .png darstellen. Sie müssen also ein Bilddokument in diesem Format speichern. Ist dies nicht der Fall (und sie haben zum Beispiel ein .bmp-Dokument) gibt es die Möglichkeit Bilder unter einem anderen Dateiformat zu speichern. In neueren Windowsversionen öffnen Sie hierzu bitte Start/Programme/Zubehör/Paint, öffnen nun in dem Programm Ihre Bilddatei und wählen im Speichern-Dialog unten eines der drei genannten Dateiformate. Dabei gilt: Ist es ein Bild mit vielen Farben verwendet man .jpg, ist es ein Logo mit wenigen (~64) Farben nimmt man .gif. Wenn Sie sich nicht sicher sind, wie und zu was Sie ihr Dokument speichern sollen, fragen Sie doch in unserem Forum nach. Versuchen Sie, ein anderes Bildformat zu verwenden, können Ihre Besucher die Bilder wahrscheinlich nicht betrachten - dies hängt mit den verwendeten programmen beim Betrachten zusammen. Achten Sie darauf, dass die Grafiken nicht zu groß werden (damit meinen wir nicht die Ausmaße, sondern die Dateigröße) Im Internet benötigt man für das Laden eines einzelnen kleinen Fotos (10 mal 10 cm, gute Qualität, .jpg-Format) rund 5 (bei DSL) bis 25 Sekunden (ISDN). Daher sind Grafiken zumeist der Knackpunkt an Internetseiten - zu grosse Bilder verärgern Ihre Besucher, sie brechen die Übertragung ab und verlassen die Seite.

Doch zur Einbindung: Um eine Grafik einzubauen, benutzt man das Attribut SRC und den Tag IMG: <IMG SRC="IhrBild.gif">. Beachten Sie, dass man Grafiken im Internet mit ihrer korrekten und vollständigen Adresse anzgeben muss: <IMG SRC="http://www.Ihre-Domain.de/bildname.gif"> Durch zusätzliche Attribute lässt sich noch die Positionierung und Darstellung beeinflussen. Wichtig sind die Attribute align welches die horizontale Position im Vergleich zum Text angibt, valign für die vertikale Ausrichtung und noch das Attribut border, mit dem eine Umrandung eingestellt werden kann. Auch hierzu noch ein vollständiges Beispiel zum Ausprobieren und Nachmachen:
<html>
<head>
<title>Meine erste Website</title>
</head>
<body bgcolor="#FFFFFF">
<font face="Arial" size="-1" color="#0000FF">
<i><u><b>
<IMG SRC="http://www.MEINE-Domain/IhrBild.gif" align="left" valign="top" border="1">
Erster Text mit einem Bild oben links mit Umrandung....<br>
<IMG SRC="http://www.MEINE-Domain/IhrBild.gif" align="right" border="3">
Zweiter Text mit Bild rechts mit dicker Umrandung
</i></u></b>
<IMG SRC="http://www.MEINE-Domain/IhrBild.gif" align="center" valign="middle" border="0">
<p>Dritter Text mit zentriertem Bild in der Mitte ohne Rand</p>
</font>
</body>
</html>


Finden Sie diese Webseite gut ? Dann empfehlen Sie uns doch einem Freund oder Bekannten.

[an error occurred while processing this directive]