Html-code IsolierenArtikel
Wenn man sich von der Norm abheben möchte und etwas höheren Standart im Webdesign erreichen möchte, kommt man am Quelltext nicht vorbei, weil man da mit allen HTML-Tags arbeiten kann. HTML steht für "HyperText Markup Language" und ist die Sprache, mit der eine Homepage geschrieben wird. Sie ist eigentlich sehr einfach und lässt sich nicht mit "echten" Programmiersprachen, wie z.B. c++, Perl, PHP, usw. vergleichen. In diesem Tutorial sollen die Grundkenntnisse Schritt für Schritt vermittelt werden.
Wozu braucht man HTML-Kenntnisse?
Formatierung des Textes-Kapitel 01
Formatierung des Textes-Kapitel 02
Links
Hintergrund
Frames
Homepagegestaltung im Quelltext
Man braucht sie zum Bauen von Webseiten, ohne einen "What you see is what you get"(WYSIWYG)-Editor einsetzen zu müssen. WYSIWYG heißt auf Deutsch "Du siehst, was du bekommst". Du hast also ein Programm(z.B. Frontpage Express, Netscape Composer, Macromedia Dreamweaver, AOL-Press, um nur einige zu nennen), das dir sofort zeigt, wie das soeben gemachte in Browser-Sicht aussieht.
Du siehst also nicht den Quelltext, sondern "klebst" praktisch alle Komponenten zusammen.Das Programm schreibt für dich den Quelltext.
Das erleichtert die Arbeit natürlich erheblich, doch es hat auch seine Nachteile, denn früher oder später muß man im Quelltext arbeiten um eine anständige Website zu erstellen, weil man zum Beispiel Gästebücher oder Counter nur im Quelltext einfügen und bearbeiten kann.
Außerdem bietet so ein WYSIWYG-Editor nicht die gesamte Bandbreite an Befehlen, die verfügbar sind. Sie währen viel zu unübersichtlich. Mit der Zeit pumpt so ein Editor den Quelltext auch mit einer Menge Code-Müll voll. Wenn du dann später etwas im Quelltext einbinden musst wirst du dich kaum noch zurechtfinden.
Außerdem kann man den Quelltext mit einem ganz normalen Texteditor programmieren. Hier ist sogar Einfachheit gefragt. Selbst umfangreiche Office-Suiten, die angeblich ein Abspeichern der Dokumente im HTML-Format ermöglichen, sind zum Scheitern verurteilt: Das benutzte Pseudo-HTML hat nur noch wenig mit dem fest deifnierten Standard zu tun, vielmehr wird man stark nach tatsächlich existenten Tags suchen müssen.
Erlaubt sind also nur einfache Programme, die den Text im ascii-Format und nicht im binär-Format schreiben. Ein solches Programm ist schon in Windows integriert und heißt Notepad. Gebt dazu unter Start>Ausführen->Notepad ein und drückt Enter.
Wenn man noch tiefer in die Marterie vordringen möchte, dann wird man immer öfter mit Fachbegriffen, wie XML, XHTML, javascript, DHTML, Cascading Style Sheets, Pearl, CGI und PHP konfrontiert. Man sollte sich von so viel Kauderwelsch nicht verrückt machen. Man muss am Anfang nicht gleich alles verstehen, was einem von Experten an den Kopf geworfen wird. Oberstes Gebot in dieser Situation: Nachfragen, was gemeint ist und was es bedeutet.
Die einzige Sprache, die man am Anfang lernen muss ist HTML. Diese Bezeichnung stammt natürlich aus dem Englischen und ist die die Abkürzung für Hypertext Markup Language.
Nun erkläre ich die ersten Schritte.
Starte einen Ascii-Texteditor(wie oben beschrieben). Es gibt in HTML Befehle, sogenannte Tags. Diese stehen grundsätzlich in eckigen Klammern. Ein HTML-Dokument wird mit folgendem Tag eingeläutet:
Er sagt dem Browser(Mozilla Firefox, Internet Explorer, Opera), dass es sich um ein HTML-Dokument handelt.
Danach kommt der -Tag, der gibt an, daß sich jetzt etwas außerhalb des Hauptfensters vom Browser abspielt.
Es folgt der-Tag, in demf estgelegt wird, was in der Kopfleiste des Browsers erscheinen soll. Die Kopfleiste ist dieses blaue, längliche Feld oben am Rand des Browsers.<br /><br />Jetzt gibst du noch einmal den <title>-Tag ein. Diesmal aber mit einem Schrägstrich (Slash) hinter der ersten eckigen Klammer. Das ganze sieht dann so aus:
Damit beendet man den Spielraum dieses Tags.
Da wir jetzt im -Bereich fertig sind, wird jetzt der -Tag geschrieben.
Nun kommen wir zu dem Bereich, den ihr im Hauptfenster im Browser seht.
Das Hauptfenster ist das, worin die Webseiten dargestellt werden, darin agiert der Surfer hauptsächlich. Im Hauptfenster werden später Texte, Grafiken, Links, etc. eingefügt.
Du gibst folgende Tags ein: und
Zwischen diesen beiden Tags kommen die Elemente, die im Hauptfenster agieren sollen, beispielsweise ein Text.
Nun schließt du das Dokument, indem du den letzten Tag, den -Tag eingibst. Jetzt klickst du auf Datei>Speichern unter. Als Dateinamen gibst du index.html ein, weil die meisten Webserver(da lädst du später deine Website hoch) als Startdatei(die Datei, die als erstes geladen werden soll, wenn man deine Internetadresse eingibt) den Namen index.html verlangen.
Beim Dateinamen sollte das erste Zeichen ein Buchstabe sein. Die folgenden Zeichen dürfen nur aus Zahlen und Buchstaben, aus Binde- , Unterstrichen und Punkten bestehen. Man sollte grundsätzlich alles in Kleinschrift bennen.
Folgende Zeichen sind also erlaubt:
a-z
0-1
.
-
_
Es dürfen keine Leerzeichen und Umlaute und andere Sonderzeichen im Namen vorhanden sein. Der ganze HTML-Text sollte am Ende in etwa so aussehen:
weiter
Wozu braucht man HTML-Kenntnisse?
Formatierung des Textes-Kapitel 01
Formatierung des Textes-Kapitel 02
Links
Hintergrund
Frames
Mach was aus den Schriften
In HTML kann man selbstverständlich auch eure Pages layouten. Es gibt zahlreiche Tags, mit denen man den Text formatieren kann. Prophetisch gesehen wird das designen der Page in den nächsten Teilen des Tutorails den meißten Platz beanspruchen, denn alles, was man in die Page eingebaut wird lässt sich nach den eigenen Wünschen umstylen.
Fangen wir hier einfach mal mit dem Text an.
Schriftgröße
Bei der Schriftgröße sollte man darauf achten, dass man von den Buchstaben nicht gleich erschlagen wird, aber auch, dass man keine Tränen kriegt, wenn man den mikroskopisch kleinen Text lesen muss.
Es gibt 2 Arten, womit man seine Schriftgröße formatieren kann. Zum einen mit dem font size-Tag, zum anderen mit dem h-Tag. Der font size-Tag ist für den normalen Text gedacht. Hier hat man die Auswahl zwischen 2 Attributen, mit denen man die Größe bestimmten kann.
Entweder man bestimmt die Größe von -3 bis +3, wobei -3 am kleinsten und +3 am größten ist, oder man bestimmt die Größe mit einer Zahl zwischen 1 und 7, wobei 1 die kleinste und 7 die größte Formatierung ist.
Das sieht dann wie folgt aus:
Der h-Tag ist für Überschriften gedacht. Bei dem h-Tag gibt es nur einen Attribut und zwar die Zahlen 1 bis 6, wobei 1 die größte und 6 die kleinste Formatierung ist.
Das ganze sieht dann wie folgt aus:
Schriftarten
Es gibt eine Menge Schriftarten und bei so manchem stürzt der Rechner fast ab, wenn man nur den font-Ordner öffnet. Da gibt es so viele tolle Schriften und man gerät leicht in Versuchung. Aber zu sowas kann ich nur sagen: Finger weg. Im Web hat man unterschiedliche Plattformen auf denen diese Schriften sicher nicht laufen. Außerdem sollte man bei den Schriften darauf achten, dass sie serifenlos sind, also nicht die kleinen Häkchen haben.
Folgende Schriften können bedenkenlos eingesetzt werden:
Arial
Verdana
Comic Sans MS
MS Sans Serif
Man kann auch ein sogenanntes Schriftenbundle benutzen. Dazu macht man einfach nach der letzten Schrift ein Komma und setzt die Alternativschrift ein, die genommen werden soll, falls die Schrift davor nicht auf dem Rechner vorhanden ist.
Folgendes Bundle hat sich bewährt:
Verdana, Arial, Helvetica, Sans-Serif
So sieht es aus, wenn man eine Schriftart festlegt:
Mit mehreren Schriftarten sieht das wie folgt aus:
Man kann Schriftarten auch noch durch Tags verändern. Man kann sie fetter, kursiv oder durchgestrichen darstellen.
Hier ist die Liste an Tags, womit man die Schrift noch weiter editieren kann:
Schriftfarbe
Grundsätzlich sollte man vorab sagen, dass eine dunkle Schrift auf hellem Hintergrund den besten Kontrast für das Auge bietet. Zusätzlich ist zu beachten, dass sich die Farben durch zu hohe Kontraste beißen.
Man sollte am Anfang die Schriftfarbe mit den englischen Ausdrücken definieren. Es gibt zwar auch präzisere Methoden, die ich auch in einem späterem Kapitel im Tutorail beschreiben werde, diese sind aber relativ kompliziert und am Anfang nicht nötig.
Den Text färbt man ein, indem der Text in einem -Tag eingeschlossen und ein Farbwert bestimmt wird. Das sieht wie folgt aus:
Es gibt zahlreiche solcher Namen. Es folgt eine Liste, in der reichlich Namen mit den zugehörigen Farben aufgelistet sind. Links sind die Namen und rechts die Farben.
Alle Schriftformatierungen in einem Tag
Man kann diese ganzen Formatierungen auch in einem Tag zusammenfassen. Es ist ja eigentlich auch nur der font-Tag mit den Attributen Schriftgröße, Schriftart und Schriftfarbe.
Wenn alles zusammengefasst ist, sieht es so aus:
zurück weiter
Wozu braucht man HTML-Kenntnisse?
Formatierung des Textes-Kapitel 01
Formatierung des Textes-Kapitel 02
Links
Hintergrund
Frames
Absätze, Zeilenumbrüche, Listen und mehr
Im letzten Kapitel hast du gelernt, wie man Schriften formatiert. Jetzt erfährst du, wie man Text richtig einrückt und ordentliche Absätze macht.
Dieses Kapitel ist relativ schwierig. Nicht vom Verstehen, sondern vom Können. Es ist verdammt schwierig einen Text richtig zu formatieren. Gerade am Anfang einer Webmasterkarriere wird der Text weitestgehend unformatiert ins Web geschmissen. Wenn du dir nicht sicher bist, ob das auch auf dich zutrifft, dann sie dir deine Website noch einmal genau an. Check folgende Punkte:
Wenn deine Website solche Mankos hat, solltest du gute Gründe parat haben um dies zu begründen. Möchtest du dich genauer mit Usability befassen findest du unter PC-Intern.com weitere interessante Artikel zu dem Thema.
Zeilenumbruch
Du hast sicher schon gemerkt, dass sich Zeilenumbrüche im Quelltext nicht auf die Anzeige im Browser auswirken. Um einen Zeilenumbruch im Browser zu bewirken solltest du den
-Tag benutzen.
Das ganze sieht dann so aus:
So sieht es im Browser aus:
Zeilenumbruch verhindern
Wenn der Text das Ende des Browserfensters erreicht hat, gibt normalerweise automatisch einen Zeilenumbruch. Man kann diesen aber auch verhindern, und zwar durch den-Tag
Er wird wie folgt benutzt:
So sieht es im Browser aus:
Dieser Satz bleibt in einer Zeile
Absätze
Man kann auch ganze Textabschnitte in einzelne Absätze packen. Dies geht mit den
Wozu braucht man HTML-Kenntnisse?
Formatierung des Textes-Kapitel 01
Formatierung des Textes-Kapitel 02
Links
Hintergrund
Frames
Wozu braucht man HTML-Kenntnisse?
Homepagegestaltung im Quelltext
Man braucht sie zum Bauen von Webseiten, ohne einen "What you see is what you get"(WYSIWYG)-Editor einsetzen zu müssen. WYSIWYG heißt auf Deutsch "Du siehst, was du bekommst". Du hast also ein Programm(z.B. Frontpage Express, Netscape Composer, Macromedia Dreamweaver, AOL-Press, um nur einige zu nennen), das dir sofort zeigt, wie das soeben gemachte in Browser-Sicht aussieht.
Du siehst also nicht den Quelltext, sondern "klebst" praktisch alle Komponenten zusammen.Das Programm schreibt für dich den Quelltext.
Das erleichtert die Arbeit natürlich erheblich, doch es hat auch seine Nachteile, denn früher oder später muß man im Quelltext arbeiten um eine anständige Website zu erstellen, weil man zum Beispiel Gästebücher oder Counter nur im Quelltext einfügen und bearbeiten kann.
Außerdem bietet so ein WYSIWYG-Editor nicht die gesamte Bandbreite an Befehlen, die verfügbar sind. Sie währen viel zu unübersichtlich. Mit der Zeit pumpt so ein Editor den Quelltext auch mit einer Menge Code-Müll voll. Wenn du dann später etwas im Quelltext einbinden musst wirst du dich kaum noch zurechtfinden.
Außerdem kann man den Quelltext mit einem ganz normalen Texteditor programmieren. Hier ist sogar Einfachheit gefragt. Selbst umfangreiche Office-Suiten, die angeblich ein Abspeichern der Dokumente im HTML-Format ermöglichen, sind zum Scheitern verurteilt: Das benutzte Pseudo-HTML hat nur noch wenig mit dem fest deifnierten Standard zu tun, vielmehr wird man stark nach tatsächlich existenten Tags suchen müssen.
Erlaubt sind also nur einfache Programme, die den Text im ascii-Format und nicht im binär-Format schreiben. Ein solches Programm ist schon in Windows integriert und heißt Notepad. Gebt dazu unter Start>Ausführen->Notepad ein und drückt Enter.
Wenn man noch tiefer in die Marterie vordringen möchte, dann wird man immer öfter mit Fachbegriffen, wie XML, XHTML, javascript, DHTML, Cascading Style Sheets, Pearl, CGI und PHP konfrontiert. Man sollte sich von so viel Kauderwelsch nicht verrückt machen. Man muss am Anfang nicht gleich alles verstehen, was einem von Experten an den Kopf geworfen wird. Oberstes Gebot in dieser Situation: Nachfragen, was gemeint ist und was es bedeutet.
Die einzige Sprache, die man am Anfang lernen muss ist HTML. Diese Bezeichnung stammt natürlich aus dem Englischen und ist die die Abkürzung für Hypertext Markup Language.
Nun erkläre ich die ersten Schritte.
Starte einen Ascii-Texteditor(wie oben beschrieben). Es gibt in HTML Befehle, sogenannte Tags. Diese stehen grundsätzlich in eckigen Klammern. Ein HTML-Dokument wird mit folgendem Tag eingeläutet:
Er sagt dem Browser(Mozilla Firefox, Internet Explorer, Opera), dass es sich um ein HTML-Dokument handelt.
Danach kommt der -Tag, der gibt an, daß sich jetzt etwas außerhalb des Hauptfensters vom Browser abspielt.
Es folgt der
Damit beendet man den Spielraum dieses Tags.
Da wir jetzt im -Bereich fertig sind, wird jetzt der -Tag geschrieben.
Nun kommen wir zu dem Bereich, den ihr im Hauptfenster im Browser seht.
Das Hauptfenster ist das, worin die Webseiten dargestellt werden, darin agiert der Surfer hauptsächlich. Im Hauptfenster werden später Texte, Grafiken, Links, etc. eingefügt.
Du gibst folgende Tags ein: und
Zwischen diesen beiden Tags kommen die Elemente, die im Hauptfenster agieren sollen, beispielsweise ein Text.
Nun schließt du das Dokument, indem du den letzten Tag, den -Tag eingibst. Jetzt klickst du auf Datei>Speichern unter. Als Dateinamen gibst du index.html ein, weil die meisten Webserver(da lädst du später deine Website hoch) als Startdatei(die Datei, die als erstes geladen werden soll, wenn man deine Internetadresse eingibt) den Namen index.html verlangen.
Beim Dateinamen sollte das erste Zeichen ein Buchstabe sein. Die folgenden Zeichen dürfen nur aus Zahlen und Buchstaben, aus Binde- , Unterstrichen und Punkten bestehen. Man sollte grundsätzlich alles in Kleinschrift bennen.
Folgende Zeichen sind also erlaubt:
a-z
0-1
.
-
_
Es dürfen keine Leerzeichen und Umlaute und andere Sonderzeichen im Namen vorhanden sein. Der ganze HTML-Text sollte am Ende in etwa so aussehen:
HTML
<html>
<head>
<title>Hier kommt der Text rein, der in der Kopfleiste des Browsers erscheinen soll.</title>
</head>
<body>
Hier kommt der Text für das Haupfenster des Browsers rein.
</body>
</html>
<head>
<title>Hier kommt der Text rein, der in der Kopfleiste des Browsers erscheinen soll.</title>
</head>
<body>
Hier kommt der Text für das Haupfenster des Browsers rein.
</body>
</html>
weiter
Wozu braucht man HTML-Kenntnisse?
Formatierung des Textes-Kapitel 01
Formatierung des Textes-Kapitel 02
Links
Hintergrund
Frames
Formatierung des Textes-Kapitel 01
Mach was aus den Schriften
In HTML kann man selbstverständlich auch eure Pages layouten. Es gibt zahlreiche Tags, mit denen man den Text formatieren kann. Prophetisch gesehen wird das designen der Page in den nächsten Teilen des Tutorails den meißten Platz beanspruchen, denn alles, was man in die Page eingebaut wird lässt sich nach den eigenen Wünschen umstylen.
Fangen wir hier einfach mal mit dem Text an.
Schriftgröße
Bei der Schriftgröße sollte man darauf achten, dass man von den Buchstaben nicht gleich erschlagen wird, aber auch, dass man keine Tränen kriegt, wenn man den mikroskopisch kleinen Text lesen muss.
Es gibt 2 Arten, womit man seine Schriftgröße formatieren kann. Zum einen mit dem font size-Tag, zum anderen mit dem h-Tag. Der font size-Tag ist für den normalen Text gedacht. Hier hat man die Auswahl zwischen 2 Attributen, mit denen man die Größe bestimmten kann.
Entweder man bestimmt die Größe von -3 bis +3, wobei -3 am kleinsten und +3 am größten ist, oder man bestimmt die Größe mit einer Zahl zwischen 1 und 7, wobei 1 die kleinste und 7 die größte Formatierung ist.
Das sieht dann wie folgt aus:
HTML
<font size="-3">Dieser Text ist sehr klein</font>
HTML
<font size="7">Dieser Text ist sehr groß</font>
Der h-Tag ist für Überschriften gedacht. Bei dem h-Tag gibt es nur einen Attribut und zwar die Zahlen 1 bis 6, wobei 1 die größte und 6 die kleinste Formatierung ist.
Das ganze sieht dann wie folgt aus:
HTML
<h1>Diese Headline ist wirklich sehr groß</h1>
HTML
<h6>Diese Headline ist wirklich sehr klein</h6>
Schriftarten
Es gibt eine Menge Schriftarten und bei so manchem stürzt der Rechner fast ab, wenn man nur den font-Ordner öffnet. Da gibt es so viele tolle Schriften und man gerät leicht in Versuchung. Aber zu sowas kann ich nur sagen: Finger weg. Im Web hat man unterschiedliche Plattformen auf denen diese Schriften sicher nicht laufen. Außerdem sollte man bei den Schriften darauf achten, dass sie serifenlos sind, also nicht die kleinen Häkchen haben.
Folgende Schriften können bedenkenlos eingesetzt werden:
Arial
Verdana
Comic Sans MS
MS Sans Serif
Man kann auch ein sogenanntes Schriftenbundle benutzen. Dazu macht man einfach nach der letzten Schrift ein Komma und setzt die Alternativschrift ein, die genommen werden soll, falls die Schrift davor nicht auf dem Rechner vorhanden ist.
Folgendes Bundle hat sich bewährt:
Verdana, Arial, Helvetica, Sans-Serif
So sieht es aus, wenn man eine Schriftart festlegt:
HTML
<font face="Verdana">Es wird die Schriftart Verdana verlangt.</font>
Mit mehreren Schriftarten sieht das wie folgt aus:
HTML
<font face="Verdana, Arial, Helvetica">Diese Website wird auf jeder Plattform eine halbwegs gleiche Schriftart haben.</font>
Man kann Schriftarten auch noch durch Tags verändern. Man kann sie fetter, kursiv oder durchgestrichen darstellen.
Hier ist die Liste an Tags, womit man die Schrift noch weiter editieren kann:
HTML
<b>Fett</b>
<i>Kursiv</i>
<u>Unterstrichen</u>
<s>Durchgestrichen</s>
<code>Formatieren von Listings</code>
<samp>Formatierung von Beispieltexten</samp>
<cite>Formatierung von Zitaten</cite>
<big>Größerer Text</big>
<small>kleinerer Text</small>
<sub>Tiefergestellter Text</sub>
<sup>Hochgestellter Text</sup>
<pre>Text wird identisch wiedergegeben, wie er im Quelltext ist</pre>
<tt>Teletype</tt>
<i>Kursiv</i>
<u>Unterstrichen</u>
<s>Durchgestrichen</s>
<code>Formatieren von Listings</code>
<samp>Formatierung von Beispieltexten</samp>
<cite>Formatierung von Zitaten</cite>
<big>Größerer Text</big>
<small>kleinerer Text</small>
<sub>Tiefergestellter Text</sub>
<sup>Hochgestellter Text</sup>
<pre>Text wird identisch wiedergegeben, wie er im Quelltext ist</pre>
<tt>Teletype</tt>
Schriftfarbe
Grundsätzlich sollte man vorab sagen, dass eine dunkle Schrift auf hellem Hintergrund den besten Kontrast für das Auge bietet. Zusätzlich ist zu beachten, dass sich die Farben durch zu hohe Kontraste beißen.
Man sollte am Anfang die Schriftfarbe mit den englischen Ausdrücken definieren. Es gibt zwar auch präzisere Methoden, die ich auch in einem späterem Kapitel im Tutorail beschreiben werde, diese sind aber relativ kompliziert und am Anfang nicht nötig.
Den Text färbt man ein, indem der Text in einem -Tag eingeschlossen und ein Farbwert bestimmt wird. Das sieht wie folgt aus:
HTML
<font color="blue">Dieser Text ist blau</font>
Es gibt zahlreiche solcher Namen. Es folgt eine Liste, in der reichlich Namen mit den zugehörigen Farben aufgelistet sind. Links sind die Namen und rechts die Farben.
| Die ersten 16 Farben sind mit allen Browsern kompatibel und können bedenkenlos eingesetzt werden. Sie werden in jedem Browser identisch interpretiert. | |
|---|---|
| black | |
| maroon | |
| green | |
| olive | |
| navy | |
| purple | |
| teal | |
| silver | |
| gray | |
| red | |
| lime | |
| yellow | |
| blue | |
| fuchsia | |
| aqua | |
| white | |
| Manche von den folgenden Farben werden von den verschiedenen Browsern falsch bis garnicht interpretiert. Sieh dir die von dir daraus gewählten Farben lieber auch nochmal in anderen Browsern, als dem Internet Explorer an(z.B. Opera und Mozilla Firefox) | |
| darkblue | |
| darkslateblue | |
| darkturquoise | |
| darkcyan | |
| darkslategray | |
| darkgray | |
| deepskyblue | |
| mediumblue | |
| mediumturquoise | |
| mediumaquamarine | |
| mediumslateblue | |
| lightskyblue | |
| lightblue | |
| lightsteelblue | |
| lightslategray | |
| lightcyan | |
| lightgrey | |
| midnightblue | |
| dodgerblue | |
| royalblue | |
| steelblue | |
| indigo | |
| slateblue | |
| aquamarine | |
| skyblue | |
| powderblue | |
| aliceblue | |
| cadetblue | |
| slategray | |
| turquoise | |
| dimgray | |
| darkolivegreen | |
| darkseagreen | |
| darkgreen | |
| mediumspringgreen | |
| mediumseagreen | |
| lightseagreen | |
| paleturquoise | |
| palegreen | |
| springgreen | |
| forestgreen | |
| seagreen | |
| limegreen | |
| chartreuse | |
| lawngreen | |
| lightgreen | |
| yellowgreen | |
| greenyellow | |
| olivedrab | |
| darkred | |
| darkmagenta | |
| darkviolet | |
| darkorchid | |
| darkgoldenrod | |
| darksalmon | |
| darkorange | |
| deeppink | |
| mediumpurple | |
| mediumorchid | |
| mediumvioletred | |
| lightcoral | |
| lightgoldenrodyellow | |
| lightsalmon | |
| lightpink | |
| lightyellow | |
| palevioletred | |
| indianred | |
| tomato | |
| crimson | |
| orangered | |
| salmon | |
| violet | |
| thistle | |
| orchid | |
| hotpink | |
| pink | |
| coral | |
| lavenderblush | |
| lavender | |
| blueviolet | |
| saddlebrown | |
| sandybrown | |
| rosybrown | |
| brown | |
| chocolate | |
| sienna | |
| firebrick | |
| darkkhaki | |
| peru | |
| tan | |
| palegoldenrod | |
| goldenrod | |
| gainsboro | |
| burlywood | |
| khaki | |
| honeydew | |
| azure | |
| wheat | |
| beige | |
| whitesmoke | |
| mintcream | |
| linen | |
| ghostwhite | |
| antiquewhite | |
| papayawhip | |
| orange | |
| gold | |
| peachpuff | |
| navajowhite | |
| moccasin | |
| mistyrose | |
| floralwhite | |
| seashell | |
| cornsilk | |
| lemonchiffon | |
| snow | |
| ivory | |
Alle Schriftformatierungen in einem Tag
Man kann diese ganzen Formatierungen auch in einem Tag zusammenfassen. Es ist ja eigentlich auch nur der font-Tag mit den Attributen Schriftgröße, Schriftart und Schriftfarbe.
Wenn alles zusammengefasst ist, sieht es so aus:
HTML
<font face="Verdana" size="4" color="black">
zurück weiter
Wozu braucht man HTML-Kenntnisse?
Formatierung des Textes-Kapitel 01
Formatierung des Textes-Kapitel 02
Links
Hintergrund
Frames
Formatierung des Textes-Kapitel 02
Absätze, Zeilenumbrüche, Listen und mehr
Im letzten Kapitel hast du gelernt, wie man Schriften formatiert. Jetzt erfährst du, wie man Text richtig einrückt und ordentliche Absätze macht.
Dieses Kapitel ist relativ schwierig. Nicht vom Verstehen, sondern vom Können. Es ist verdammt schwierig einen Text richtig zu formatieren. Gerade am Anfang einer Webmasterkarriere wird der Text weitestgehend unformatiert ins Web geschmissen. Wenn du dir nicht sicher bist, ob das auch auf dich zutrifft, dann sie dir deine Website noch einmal genau an. Check folgende Punkte:
- Ist alles proportional? Wenn sich z.B. die Überschrift nicht richtig abhebt, weil der normale Text zu groß ist, kann da was nicht stimmen.
- Schau dir die Page mal in einem Abstand von 1-2 Metern an. Ist sie gut strukturiert oder hat sie an einige Stellen "Löcher" oder ist der Text unproportional an manchen Stellen komprimiert? Manchmal ist auch nur ein Zeilenumbruch zu viel oder es fehlt einer.
- Sieh dir die Page mal mit den Auflösungen 800x600 und 1024x768 an, bei beiden Auflösungen sollte deine Page gleich gut aussehen.
Wenn deine Website solche Mankos hat, solltest du gute Gründe parat haben um dies zu begründen. Möchtest du dich genauer mit Usability befassen findest du unter PC-Intern.com weitere interessante Artikel zu dem Thema.
Zeilenumbruch
Du hast sicher schon gemerkt, dass sich Zeilenumbrüche im Quelltext nicht auf die Anzeige im Browser auswirken. Um einen Zeilenumbruch im Browser zu bewirken solltest du den
-Tag benutzen.
Das ganze sieht dann so aus:
HTML
Wenn dieser Satz beendet ist, gibt es noch keinen Zeilenumbruch.
Den gibt es erst nach <br> dem Tag für den Zeilenumbruch. <br> Dieser Satz wird im<br>Browser in einer neuen Zeile erscheinen.
Den gibt es erst nach <br> dem Tag für den Zeilenumbruch. <br> Dieser Satz wird im<br>Browser in einer neuen Zeile erscheinen.
So sieht es im Browser aus:
Wenn dieser Satz beendet ist, gibt es noch keinen Zeilenumbruch.
Den gibt es erst nach
dem Tag für den Zeilenumbruch.
Dieser Satz wird im
Browser in einer neuen Zeile erscheinen.
Den gibt es erst nach
dem Tag für den Zeilenumbruch.
Dieser Satz wird im
Browser in einer neuen Zeile erscheinen.
Zeilenumbruch verhindern
Wenn der Text das Ende des Browserfensters erreicht hat, gibt normalerweise automatisch einen Zeilenumbruch. Man kann diesen aber auch verhindern, und zwar durch den
Er wird wie folgt benutzt:
HTML
<nobr>Dieser Satz bleibt in einer Zeile</nobr>
So sieht es im Browser aus:
Absätze
Man kann auch ganze Textabschnitte in einzelne Absätze packen. Dies geht mit den
- ,
- und blockquote-Tags. Mit Hilfe dieser Tags ist es zum ersten mal möglich bestimmte Textabschnitte unterschiedlich zu formatieren. Man kann z.B. bestimmen, dass der Abschnitt maximal 400 Pixel breit ist und so automatisch kürzere Zeilen hat. Eine gute Absatzformatierung ist unabdingbar für ein herausragendes Design.
Man kann bei beiden mit width="" und height="" Breite und Höhe des Absatzes bestimmen. Hier sind absolute Zahlen(Pixel, einfach eine Zahl ohne Endung eingeben) und relative Zahlen möglich(Prozent, einfach als Endung % benutzen).
Mit align="" lässt sich bestimmen, ob der Absatz links, rechts, mittig oder im Blocksatz auf dem Bildschirm sein soll. Dies geht mit den Attributen left, right, center und justify. Da bisher aber kein Browser Silbentrennung unterstützt sieht der Blocksatz oft sehr unglücklich aus und sollte nicht bei zu schmalen Absätzen benutzt werden.
Hier ein Beispiel:
So sieht es im Browser aus:
Listen
Mit HTML kann man sehr leicht Listen erstellen. Wenn man also eine Menge aufzuzählen hat, dann sollte man lieber Listen benutzen, denn die sehen übersichtlicher aus.
Listen haben einen so genannten Kopf und einen Körper. Im Kopf bestimmt man, welche Art von Liste es ist.
Man kann bei beiden mit width="" und height="" Breite und Höhe des Absatzes bestimmen. Hier sind absolute Zahlen(Pixel, einfach eine Zahl ohne Endung eingeben) und relative Zahlen möglich(Prozent, einfach als Endung % benutzen).
Mit align="" lässt sich bestimmen, ob der Absatz links, rechts, mittig oder im Blocksatz auf dem Bildschirm sein soll. Dies geht mit den Attributen left, right, center und justify. Da bisher aber kein Browser Silbentrennung unterstützt sieht der Blocksatz oft sehr unglücklich aus und sollte nicht bei zu schmalen Absätzen benutzt werden.
Hier ein Beispiel:
HTML
<div width="100%" height="40" align="right">Dieser Absatz ist rechtsbündig.</div>
So sieht es im Browser aus:
Dieser Absatz ist rechtsbündig.
Listen
Mit HTML kann man sehr leicht Listen erstellen. Wenn man also eine Menge aufzuzählen hat, dann sollte man lieber Listen benutzen, denn die sehen übersichtlicher aus.
Listen haben einen so genannten Kopf und einen Körper. Im Kopf bestimmt man, welche Art von Liste es ist.
- steht für eine nummerierte
- Der erste Punkt
- Der zweite Punkt
- Der erste Punkt
- Der zweite Punkt
- und
- . Hierbei ist
- sozusagen der Listenkopf und
- der Körper. Hier kann man sogar HTML-Code benutzen, man kann ja beispielsweise statt Text auch ein Bild anzeigen oder einen Link definieren.
Das ganze sieht am Ende wie folgt aus:HTML<dl>
<dt>pc-intern.com</dt>
<dd>Ist ne tolle Seite</dd>
<dt>the-cube.cc</dt>
<dd>Ist genauso gut</dd>
</dl>
So sieht es im Browser aus:- pc-intern.com
- Ist ne tolle Seite
- the-cube.cc
- Ist genauso gut
Interessant wird es, wenn man die verschiedenen Listentypen miteinander kombiniert, indem man sie verschachtelt.HTML<ol>
<li>Erster Listeneintrag</li>
<li>Zweiter Listeneintrag</li>
<ul>
<li>Unterlisteneintrag</li>
<li>Unterlisteneintrag</li>
<li>Unterlisteneintrag</li>
</ul>
<li>Dritter Listeneintrag</li>
</ol>
So interpretiert es der Browser:- Erster Listeneintrag
- Zweiter Listeneintrag
- Unterlisteneintrag
- Unterlisteneintrag
- Unterlisteneintrag
- Dritter Listeneintrag
zurück weiter
Wozu braucht man HTML-Kenntnisse?
Formatierung des Textes-Kapitel 01
Formatierung des Textes-Kapitel 02
Links
Hintergrund
FramesLinks
Erst mit ihnen wurde das World Wide Web lebendig
Woraus besteht eigentlich ein Link?
Ein Link besteht aus einer Quellseite, von der der Link verweist. Diese Seite ist die, bei der du auf den Link klickst.
Dann gibt es noch die Zielseite, auf diese verweist der Link. Im besten Fall existiert die Seite, ansonsten ist der Link nahezu wertlos und kann nur noch als Deathlink bezeichnet werden.
Im Quelltext sieht der Verweis meistens so aus:HTML<a href="URL">Verweis<a>
Doch was bedeute diese einzelnen Zeichen?
Das a ist die Abkürzung für Anker.
href heißt soviel, dass der Anker praktisch in das zwischen den Anführungszeichen stehende Ziel geworfen werden soll.
URL steht für die Adresse, die angegeben werden muß. Sie sollte existieren, ansonsten wird der Anker ins Leere geworfen.
Verweis steht für das Objekt, dass du hier einfügen kannst. Darauf muss der Surfer klicken, wenn er den Link benutzen möchte. Dies kann Text, oder auch ein Bild sein. Man kann auch Verweise innerhalb einer HTML-Datei setzen.
Nun gibt es 8 verschiedene Arten von Links.- Verweise innerhalb einer Datei
- Verweise auf eine HTML-Datei
- Grafikdateien, die angezeigt werden sollen.
- Grafikdateien als Link benutzen.
- Links ins www
- Downloadverweise
- Verweise auf eine Emailadresse
- Verweise auf Dateien auf der Festplatte
Verweise innerhalb einer Datei
Verweise innerhalb einer Datei sind sehr praktisch. Man kann beispielsweise Mini-Menüs in einer HTML-Datei haben, die auf einzelne Bereiche einer Seite verweisen. So kann der User z.B. bei einer recht umfangreichen Seite schneller navigieren.
Und wie funktioniert das?
Es gibt die Sprungmarke, dass ist der Link und der Anker ist das Ziel.
Bei der Sprungmarke benutzt man das Rautezeichen, also #, um dem Browser klar zu machen, dass es sich um einen Verweis innerhlab einer Datei handelt.
Die Sprungmarke sieht wie folgt aus:HTML<a href="#variable">nach unten</a>
Der Anker sieht dann wie folgt aus:HTML<a name="variable">Da bist du ja</a>
Und so funktioniert der Link:
wieder nach ganz oben
Verweise auf eine HTML-Datei
Du gibst einfach Verweis ein.
Statt URL schreibst die die Adresse der Zieldatei hinein. Wenn sie später auf einen Server sollen, dann gebt ihr relative Adressen an. Der Ordner, in dem die HTML-Datei ist, ist so zu sagen das Wurzelverzeichnis. Der Ordner, in dem die HTML-Datei ist, auf die der Link verweist, ist der Zielordner. Wenn die Zieldatei im selben Ordner ist gibst du nur den Dateinamen an. Ist die Datei in einem untergeordneten Ordner machst du den Link folgerndermaßen:HTML<a href="ordner/dateiname.html">Verweis</a>
Ist die Datei in einem übergeordneten Ordner, muß man eine Ebene zurückspringen. Dies macht man mit ../HTML<a href="../dateiname.html">Verweis</a>
Grafikdateien, die angezeigt werden sollen
Dies ist ganz einfach mit folgendem Tag möglich:HTML<img src="URL" border="0" width="400" height="200">- Bei URL kommt die Adresse hin. Wie die gemacht wird, habe ich ja schon oben geschrieben.
- border="0" macht diesen hässlichen blauen Rand weg, der sonst automatisch um jedes Bild gelegt wird.
- width="" Hier muß eingetragen werden, wie breit das Bild ist, das verkürzt die Aufbauzeiten
- height="" Genauso, wie mit width, nur, dass es hier um die Höhe geht
Grafikdateien als Links benutzen
Das ist ganz einfach, siehe Beispiel:HTML<a href="URL"><img src="URL" border="0" width="468" height="60"></a>
Links ins world wide web
Links ins www fangen grundsätzlich mit http:// an. Manche Seiten brauchen auch ein www.(also ), die meisten aber nicht.
Ein Link auf diese Website würde dann so aussehen:HTML<a href="http://pc-intern.com</span>" target="_blank">
Man sollte grundsätzlich ein einbinden, wenn man auf fremde Seiten verweist, denn
1. Ist das alte Fenster von der eigenen Seite noch vorhanden.
2. Macht man sich strafbar, wenn man z.B. in einem Frame fremde Seiten anzeigt und somit als das eigene Angebot vortäuscht.
Downloadverweise
Das sind meistens Links auf Dateien mit folgenden Endungen: .zip, .rar, .tar, .gz, .tar.gz, .exe
Diese werden gedownloadet. Wenn man also Dateien zum Download anbietet, sollte man sie vorher packen. Ein FTP-Programm, genialer Dateimanager und Packer/Entpacker ist der Total-Commander.
Verweise auf eine Emailadresse
Das ist recht einfach. Es ist ein normaler Link, nur mit einem mailto:Email@anbieter.de, statt der Website URL. Außerdem gibt es hier kein target-Attribut.
Man kann übrigens auch die Betreffzeile vorgeben, indem man direkt hinter der Emailadresse ?subject=Hier Betreffzeile anhängt.HTML<a href="mailto:Email@anbieter.de?subject=Hier Betreffzeile einfügen">Linktext</a>
Link auf eine Datei auf der Festplatte
Auch dies ist recht simpel. Man fängt mit file:// statt mit http:// an und gibt den absoluten Pfad an. Um z.B. Notepad zu öffnen, gibt man folgendes an:HTML<a href="file://c:\windows\notepad.exe">Notepad starten</a>
Aktuelle Browser erlauben mitlerweile weder das aufrufen, noch das anzeigen von Dateien, die auf der lokalen Festplatte liegen. Sicherheitsprobleme waren nicht der Grund, vielmehr wurden viele Surfer getäuscht sie wurden gehackt, da ihr Festplatteninhalt angezeigt werden konnte. Das ganze kann aber immer nur der Surfer selbst sehen, der Server nie.
zurück weiter
Wozu braucht man HTML-Kenntnisse?
Formatierung des Textes-Kapitel 01
Formatierung des Textes-Kapitel 02
Links
Hintergrund
FramesHintergrund
Das da ganz hinten
Du kannst selbstverständlich auch den Hintergrund formatieren. Hier kannst du wählen, ob du ihn einfach einfärbst oder ob du eine Hintergrundfarbe benutzt.
Die Hintergrundfarbe hat folgenden Vorteil: Sie braucht keinen Speicherplatz und lässt sich auch bei abgeschalteter Grafikanzeige anzeigen.
So ein Hintergrund kann aber auch langweilig sein, deswegen werden auch gerne Grafiken benutzt. Hier muss allerdings folgendes beachtet werden:
Der Hintergrund muß einen guten Kontrast zur Schrift bilden, darf sich mit der aber auch nicht beißen oder von dem eigentlichen Text ablenken.
Das Bild verbraucht Speicherplatz, also braucht es je nach Größe unterschiedlich lange zum laden. Wenn es ein dunkles Hintergrundbild ist und die Schrift hell, kann der Surfer solange es nicht geladen wurde erstmal recht wenig erkennen. Wenn die Grafikanzeige ausgeschaltet wurde(schnelleres surfen) sieht der Surfer nur noch helle Schrift auf weißem Hintergrund, außer es wurde geschickterweise vorher eine dem Hintergrundbild ähnliche Hintergrundfarbe definiert.
Deswegen solltet ihr, wenn ihr ein Hintergrundbild benutzt auch die Hintergrundfarbe setzen, die angezeigt wird, wenn das Bild noch nicht geladen wurde oder wenn man die Grafikanzeige ausgeschaltet hat.
Der Hintergrund wird im -Tag gesetzt.
Die Hintergrundfarbe setzt man wie folgt:HTML<body bgcolor="blue">
Das Hintergrundbild so:HTML<body background="URL">
Kombiniert sieht es so aus:HTML<body bgcolor="blue" backround="URL">
zurü weiter
Wozu braucht man HTML-Kenntnisse?
Formatierung des Textes-Kapitel 01
Formatierung des Textes-Kapitel 02
Links
Hintergrund
FramesFrames
Was sind Frames?
Frames sind einzelne Bereiche(Fenster) einer Homepage. Es werden mindestens 2 verschiedene HTML-Dateien dargestellt.
Du solltest dir erst überlegen, ob du Frames unbedingt benötigst. Klar, es ist eine Arbeitserleichterung, weil man z.B. das Menü nur einmal abspeichern muss und der Surfer muss es nur einmal laden. Leider kann man mit Frames nicht so gut die Seite designen(Grafiken und co) und auch Suchmaschinen stehen Frames negativ gegenüber. Du musst dich entscheiden:
Willst du Frames benutzen, dann ist es schwieriger etwas wirklich gutes zu designen, die rechteckigen Rahmen schränken einfach zu sehr ein.
Willst du keine Frames benutzen, sind Änderungen am Menü zeitaufwändiger, denn man muß das ja in jeder Seite aktualisieren.
PC-Intern.com benutzt übrigens keine Frames
Wenn man jetzt auch Frames auf seiner Seite haben möchte, dann legt man ersteinmal eine neue HTML-Datei an. Wenn es die erste Datei sein soll, die geladen werden soll, wenn man deine Page besucht, dann benenne sie bitte als index.html. Ansonsten kannst du die Dateien nennen, wie du willst (name.html).
Folgendes schreibst du dann in die Datei:HTML<html>
<head>
<title></title>
</head>
</html>
In dieser Datei gibt es keinen -Tag. Stattdessen gibt es die Tags
- für eine Aufzählungsliste und
- dür eine Definitionsliste. Es folgt der Listenkörper, bei dem einfach nur der Inhalt der Liste hinzugefügt wird.
Numerierte Listen
Wenn man eine Numerierte Liste braucht, dann benutzt man den Tag
- .
Hier kann man auch noch Typen bestimmen:
type="A" zählt in Großbuchstaben von A hoch.
type="a" zählt in Kleinbuchstaben von a hoch.
type="I" zählt in Großbuchstaben römischen Zeichen von I hoch
type="i" zählt in Kleinbuchstaben römischen Zeichen von i hoch
Mit start="" kann man festlegen, wie der Startwert der Aufzählung sein soll.
Das ganze sieht anschließend so aus:
HTML
<ol type="A" start="3">
<li>Der erste Punkt</li>
<li>Der zweite Punkt</li>
</ol>
<li>Der erste Punkt</li>
<li>Der zweite Punkt</li>
</ol>
So sieht es im Browser aus:
Aufzählungslisten
Wenn du eine Liste brauchst, die einfach die Punkte ohne Zähler ausgibt, ist der
- -Tag der richtige.
Hier kann man auch noch Typen bestimmen:
type="circle" Ein leerer Kreis.
type="disc" Ein gefülltes Quadrat.
type="square" Ein gefüllter Kreis.
Das ganze sieht anschließend so aus:
HTML
<ul type="disc" compact>
<li>Der erste Punkt</li>
<li>Der zweite Punkt</li>
</ul>
<li>Der erste Punkt</li>
<li>Der zweite Punkt</li>
</ul>
So sieht es im Browser aus:
Die beiden oben genannten Listen können mit dem Attribut compact kompakter gemacht werden.
Definitionslisten
Die Definitionsliste kann recht Praktisch sein, wenn man einzelne Punkte genauer erläutern möchte. Auch bei einer Sitemap werde sie gerne benutzt.
Eine Definitionsliste fängt mit
- an. Doch dieser Tag ist dieses mal nicht so wichtig. Wichtiger sind die Tags