HTML - Einführung Teil 2

  • So, nachdem ich im Teil 1 die ersten Basisbefehle einer html-Seite beschrieben habe, soll es hier mal ein wenig weiter an die Details gehen. Ich hoffe, dass dann so langsam auch erste gestalterische Dinge realisiert werden können. Alles, was jetzt nachfolgend dargestellt wird, spielt sich zwischen <body> und </body> ab. Sofern die Seite unterschiedliche Absätze haben soll, wird der <p>-Befehl (paragraph) verwendet. Ein Absatz beinhaltet immer eine zusätzliche Leerzeile. <p>Meine erster Text</p><p>Mein weiterer Text</p> Soll der Text des Absatzes ausgerichtet werden - Standard ist linksbündig - dann wird das Attribut align (Ausrichtung) in den <p>-Befehl mit eingebaut. Es kann dann so aussehen: <p align="right">Der Text ist rechtsbündig</p><br /><p align="center">Der Text ist zentriert</p><br /><p align="justify">Der Text ist geblockt, es sollte allerdings ein entsprechend langer Text sein, denn sonst kann der Blocksatz nicht erkannt werden, denn nur bei einem längeren Text ist dies auch zu erkennen. Ich hoffe, das reicht an Textlänge, um den Effekt zu erkennen. Andernfalls schreiben Sie bitte einfach noch etwas Text dazu</p> Will man lediglich eine neue Zeile beginnen, dann verwendet man den <br>-Tag (brake), wobei dieser Befehl nicht beendet wird. Das sieht z. B. so aus: <p>Name<br /> <br>Anschrift<br /> <br>Telefon<br /> <br>eMail<br /></p> Hierbei wird keine Leerzeile erzeugt, es wird lediglich immer eine neue Zeile nach <br> begonnen. Der Zeilenumbruch mit der RETURN-Taste der Tastatur spielt im Editor im Prinzip keine Rolle, zumindest nicht die, die wir aus Word (oder so) kennen. Also jeder Umbruch benötigt einen Befehl. Sollen bestimmte Satzteile nicht durch einen möglichen Zeilenumbruch getrennt werden, dann setzen Sie einfach das feste Leerzeichen zwischen die entsprechenden Worte und schon wird zwischen diesen der Umbruch verhindert: Das feste Leerzeichen sieht so aus: <br /> <br /> Ein Beispiel: <br />Vorname Nachname Straße Hausnummer Postleitzahl <br />;Ort<br /><br /> Wenn Sie jetzt das Browserfenster verkleinern und immer weiter zusammenschieben, dann werden Sie sehen, dass eben kein Zeilenumbruch passiert, sondern der Text dann rechts verschwindet. Die Worte bleiben also zusammenhängend. Mit dem bisher Gezeigten sind also schon einfache Gestaltungen und Textausrichtungen möglich, ein grobes Seitenlayout entsteht. Sollen spezielle Teile als Überschriften fungieren, dann gibt es den <h1> bis <h6>-Tag (headline). <h1> ist die größte Überschrift, <h6> die kleinste. So sieht das aus: <br /><br />Text nach Belieben<br /><h2>Zwischenüberschrift</h2><br />weiterer Text nach Belieben<br /><br />Soll die Überschrift zentriert werden, dann auch hier wieder das Attribut 'align' verwenden:<br /><br /><h2 align="center">Überschrift</h2><br /><br />Um unsere vier Sonderbuchstaben überall lesbar zu machen, können diese wie folgt dargestellt werden: <br />ä = ä<br />Ä = Ä<br />ö = ö<br />Ö = Ö<br />ü = ü<br />Ü = Ü<br />ß = ß<br /><br /> Man schreibt z. B. Straße dann: Straße<br /><br />Einfach mal probieren! Soll der Text in einem Absatz zusätzlich formatiert werden (fett, kursiv und so), dann gibt es natürlich auch hierzu die entsprechenden Befehle: <br /><br /><b>fett</b> b = bold<br /><i>kursiv</i> i = italic<br /><u>unterstrichen</u> möglichst vermeiden, weil dieser Befehl einen Link <br />suggeriert. u = underline<br /><sub>tiefgestellt</sub><br /><sup>hochgestellt</sup><br /><br /> Hierbei können die Befehle natürlich auch kombiniert werden: <br /><br /><b><i>ein fetter und kursiver Satz</b></i><br /><br />Um die normale Schriftgröße anzugeben, gibt es den <basefont>-Tag, der durch das Attribut 'size' (Größe) definiert wird: <br /><br /><basefont size="5">Der Text ist dann immer relativ groß</basefont><br /><br /> Man setzt zum Beispiel am Anfang seiner Seite den <basefont>-Tag und dann am Ende wieder </basefont>, dann ist der gesamte Text dazwischen relativ groß. Die Werte von 'size' können 1 (klein) bis 7 (groß) sein. Soll innerhalb dieses Bereiches ein Text in einer anderen Größe erscheinen, so wird dieser einfach mit dem <font>-Tag geklammert: <br /><font>Text</font><br /><br /><basefont size="5">Der Text ist dann immer <font size="2">relativ</font> groß</basefont><br /><br /> Hierbei ist das Wort 'relativ' dann aber klein, denn font wurde mit size="2" festgelegt. Die Standardschriftgröße entspricht dem Wert 3. Zuletzt soll in diesem Teil noch auf die Festlegung der Schriftart und -farbe eingegangen werden: Der <font>-Tag wird dabei um das Attribut 'face' (Gesicht') erweitert, also um das Schriftgesicht (wie sieht die Schrift aus) oder aber um 'color' für die Farbe. Hierbei bitte immer gängige Schriften verwenden, denn die Schriften werden vom Rechner des Betrachters abgerufen und können sonst nicht richtig dargestellt werden, was unter Umständen das Design verändert. Am gängigsten sind Arial, Verdana und Times New Roman. Einfach alles mal ausprobieren, zum Beispiel so: <br /><br /><font size="5" face="Arial">Schrift Arial</font><br /><br><br /><font size="5" face="Verdana">Schrift Verdana</font><br /><br><br /><font size="5" face="Times New Roman">Schrift Times New Roman</font><br /><br /> Und wird der <font>-Tag dann noch mit dem Attribut 'color' erweitert, so kann gezielt die Schriftfarbe bestimmt werden: <br /><br /><font size="5" face="Arial" color="red">Schrift Arial</font><br /><br><br /><font size="5" face="Verdana" color="green">Schrift Verdana</font><br /><br><br /><font size="5" face="Times New Roman" color="gold">Schrift Times New<br />Roman</font><br /><br />So - das soll es dann mal wieder gewesen sein. Die Gestaltung nimmt weitere Formen an und der Quelltext wird immer durchschaubarer. So soll es ja auch sein.