Wenn man sich von der Norm abheben möchte und etwas höheren
Standard 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.
Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform,
sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc
zu kontaktieren.
Ihr 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 machst".
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 muss man im Quelltext arbeiten um eine anständige Page 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ären viel zu unübersichtlich. Mit der Zeit pumpt so ein Editor den Quelltext auch mit einer Menge Müll voll. Wenn ihr dann später etwas im Quelltext einbinden müsst werdet ihr euch kaum noch zurechtfinden.
Außerdem kann man den Quelltext mit einem ganz normalen Texteditor programmieren. Hier ist sogar Einfachheit gefragt. Irgendwelche Wordprogramme sind tabu. Erlaubt sind 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. Ihr findet es entweder auf dem Laufwerk C im Ordner Windows oder ihr klickt auf folgenden Link, um es zu starten.
Notepad starten([Nur unter Windows]-"Programm von diesem Ort ausführen" wählen, auf "OK" klicken, danach auf "Ja" klicken.)
Wenn man noch tiefer in die Materie vordringen möchte, dann wird man immer öfter mit Fachbegriffen, wie:
XML, XHTML, Javascript, DHTML, Cascading Style Sheets, Pearl, CGI und PHP
konfrontiert.
Macht euch nicht verrückt darum. Ihr müsst nicht gleich am Anfang
alles verstehen, wenn jemand euch anspricht. Oberstes Gebot in dieser Situation:
Fragt nach, was er meint, was es bedeutet. Wie heißt es doch so schön:
Wer nicht fragt bleibt dumm.
Die einzige Sprache, die ihr am Anfang lernen müsst 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 euch die ersten Schritte.
Startet 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:
<html>
Er sagt dem Browser (Internet Explorer, Netscape Navigator, Opera), dass es sich um ein HTML-Dokument handelt.
Danach kommt der <head>-Tag, der gibt an, dass sich jetzt etwas außerhalb des Hauptfensters vom Browser abspielt. Das Hauptfenster ist das, worin die Webseiten dargestellt werden, darin agiert der Surfer hauptsächlich. Hier sind Texte, Grafiken, Links.
Es folgt der <title>-Tag, da kann man reinschreiben, was in der Kopfleiste des Browsers erscheinen soll. Die Kopfleiste ist dieses blaue, längliche Feld oben am Rand des Browsers.
Jetzt gebt ihr noch einmal den <title>-Tag ein. Diesmal aber mit einem Slash hinter der ersten eckigen Klammer. Das ganze sieht dann so aus:
</title>
Damit beendet ihr den Spielraum dieses Tags.
Da wir jetzt im <head>-Bereich fertig sind, wird jetzt der </head>-Tag geschrieben.
Nun kommen wir zu dem Bereich, den ihr im Hauptfenster im Browser seht.
Ihr gebt folgende Tags ein:
<body>
und
</body>
Zwischen diesen beiden Tags kommen die Elemente, die im Hauptfenster agieren sollen, beispielsweise ein Text.
Nun schließt ihr das Dokument, indem ihr den letzten Tag, den </html>-Tag eingebt.
Nun klickt ihr auf "Datei", "Speichern unter".
Als Dateinamen gebt ihr "index.html" ein, weil die meisten Webserver (da speichert ihr später eure Website ab) als Startdatei (die Datei, die als erstes geladen werden soll, wenn man eure Internetadresse eingibt) den Namen: index.html
verlangen!
Beim Dateinamen sollte das erste Symbol ein Buchstabe sein. Die folgenden Symbole dürfen nur:
Aus Zahlen und Buchstaben, aus Binde- , Unterstrichen und Punkten sein.
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>
<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>
In HTML könnt ihr selbstverständlich auch eure Pages layouten. Es gibt zahlreiche Tags, mit denen ihr den Text formatieren könnt. Realistisch gesehen wird das designen der Page in den nächsten Teilen des Tutorials den meisten 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 solltet ihr darauf achten, dass man von den Buchstaben nicht gleich erschlagen wird, aber auch, dass man keine Tränen kriegt, wenn man den microskopisch kleinen Text lesen muss.
Es gibt 2 Arten, womit ihr eure Schriftgröße formatieren könnt. 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:
<font size="-3">Dieser Text ist sehr klein</font>
<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:
<h1>Diese Headline ist wirklich sehr groß</h1>
<h6>Diese Headline ist wirklich sehr klein</h6>
Schriftarten
Es gibt eine Menge Schriftarten und bei so manchem stürzt der halbe Rechner 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 vieleicht gar 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
So sieht es aus, wenn man eine Schriftart festlegt:
<font face="Verdana">Es wird die Schriftart Verdana verlangt.</font>
Mit mehreren Schriftarten sieht das wie folgt aus:
<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 machen.
Hier ist die Liste an Tags, womit man die Schrift noch weiter editieren kann:
<b></b>
Fett
<i></i>
Kursiv
<s></s>
Durchgestrichen
<code></code>
Formatieren von Listings
<samp></samp>
Formatierung von Beispieltexten
<cite></cite>
Formatierung von Zitaten
<big></big>
Größerer Text
<small></small>
kleinerer Text
<sub></sub>
Tiefergestellter Text
<sup></sup>
Hochgestellter Text
<pre></pre>
Text wird identisch wiedergegeben, wie er im Quelltext ist
<tt></tt>
Teletype
Schriftfarbe
Grundsätzlich sollte man vorab sagen, dass man eine dunkle Schrift auf hellem Hintergrund haben sollte. Man sollte darauf achten, dass die Farben einen guten Kontrast zueinander haben, sich aber auch nicht beißen.
Ihr solltet 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 Tutorial beschreiben werde, diese sind aber relativ kompliziert und am Anfang nicht nötig.
Den Text färbt ihr ein, indem ihr den Text in dem <font>-Tag einschließt und den Farbwert bestimmt. Das sieht wie folgt aus:
<font color="blue">Dieser Text ist blau</font>
Es gibt zahlreiche solcher Namen. Es folgt eine Liste, in der hoffentlich alle 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 richtig 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. Seht euch eure Farben lieber auch nochmal in anderen Browsern, als dem Internet Explorer an (z.B. Opera)
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.
Im letzten Kapitel habt ihr gelernt, wie man Schriften formatiert, jetzt wird gelernt, wie man Text richtig einrückt und ordentliche Absätze macht.
Dieses Kapitel ist relativ schwierig. Nicht vom verstehen her, sondern vom können. Es ist nämlich verdammt schwierig einen Text richtig zu formatieren. Gerade am Anfang einer Webmasterkarriere wird der Text weitestgehend unformatiert ins Web geschmissen. Wenn ihr euch nicht sicher seid, ob das bei euch zutrifft, dann seht euch eure Seite noch einmal genau an. Checkt dann 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.
Seht euch die Page mal in einem Abstand von 1-2 Metern an. Ist sie gut struckturiert 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 muss deine Page gleich gut aussehen.
Wenn eure Seiten solche Mankos haben, dann kann das zwei Gründe haben:
1. Ihr seid so faul wie ein Zwieback.
2. Ihr habt noch nicht genug Übung und Erfahrung.
Punkt 1 kann nicht zutreffen, wenn ihr euch durch dieses riesige Tutorial kämpft, also gehört ihr zu Punkt 2.
Punkt 2 soll keine Beleidigung sein und soll auch nicht arrogant rüberkommen, aber wie heißt es so schön:
Jeder hat mal klein angefangen.
Am Anfang weiß man halt noch nicht so recht, wohin der Text jetzt soll. Aber man entwickelt sich mit der Zeit weiter, man lernt neue Tags, man sieht andere Pages auf einmal mit ganz anderen Augen. Man bewundert den Webmaster, fragt sich, wie er das hingekriegt hat. Man versucht es mal selber ohne gleich das komplette Design der Page zu klauen und es klappt oder
auch nicht. Das macht aber auch nichts. Man lernt stetig dazu und dann will man in einem halben Jahr vieleicht wieder ein anderes Design. Vieleicht hat man auch in der Zwischenzeit eine Lösung für das Problem gefunden, weswegen das vor ein paar Monaten nicht klappe wollte.
Auf jedenfall versprech ich euch, dass ihr mit der Zeit immer größere Schritte machen werdet. Ihr kriegt ein Gefühl dafür, was gut aussieht, wann ihr Absätze machen müsst und wie groß die Schrift sein soll.
Es werden auch Zeiten kommen, in denen ihr so stolz auf euch sein werdet, weil ihr eben das o.g geschafft hast, dass ihr euch vor Freude glatt selbst befruchten könntet ;-).
Nun gut, los gehts, dass war jetzt das Wort zum Sonntag.
Zeilenumbruch
Also, ihr habt bestimmt schon gemerkt, dass sich Zeilenumbrüche im Quelltext nicht auf die Anzeige im Browser auswirken. Um einen Zeilenumbruch im Browser zu bewirken solltet ihr den <br>-Tag benutzen.
Das ganze sieht dann so aus:
Wenn dieser Satz beendet ist, gibt es noch keinen Zeilenumbruch.
Den gibt es erst nach
dem Tag für den Zeilenumbruch. <br> 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 <nobr>-Tag
Er wird wie folgt benutzt:
<nobr>Dieser Satz bleibt in einer Zeile</nobr>
Absätze
Man kann auch ganze Textabschnitte in einzelne Absätze packen. Dies geht mit dem <p>- , <div>- und blockquote-Tag. 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. Dies kann oft sehr praktisch sein.
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 eigeben) und relative Zahlen möglich (Prozent, einfach als Endung % nehmen).
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.
Hier ein Beispiel (es ist egal, welchen Tag ihr nehmt, nur der blockquote-Tag ist ein wenig anders, ich habe einfach den div-Tag genommen):
<div width="100%" height="40" align="right">
Dieser Absatz ist rechtsbündig.
</div>
Listen
Mit HTML kann man sehr leicht Listen erstellen. Wenn ihr also eine Menge aufzählen wollt, dann nehmt lieber Listen, denn die sehen übersichtlicher aus, als z.B. <br>-Tags.
Listen haben einen so genannten Kopf und einen Körper. Im Kopf bestimmt man, welche Art von Liste es ist. <ol> steht für eine nummerierte <ul> für eine Aufzählungsliste und <dl> dür eine Definitionsliste. Es folgt der Listenkörper, bei dem einfach nur der Inhalt der Liste hinzugefügt werden muss.
Numerierte Listen
Wenn ihr eine Numerierte Liste braucht, dann benutzt ihr den Tag <ol>.
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:
<ol type="A" start="3">
<li>
Der erste Punkt
<li>
Der zweite Punkt
</ol>
Aufzählungslisten
Wenn ihr eine Liste braucht, die einfach die Punkte ohne Zähler ausgibt solltet ihr den <ul>-Tag benutzen.
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:
<ul type="disc" compact>
<li>
Der erste Punkt
<li>
Der zweite Punkt
</ul>
Bei den 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 <dl> an. Doch dieser Tag ist dieses mal nicht so wichtig. Wichtiger sind die Tags <dt> und <dd>. Diesesmal ist <dt> sozusagen der Listenkopf und <dd> der Körper. Hier kann man sogar HTML-Code benutzen, man kann ja beispielsweise statt Text auch einen Link auf ein Bild machen.
Das ganze sieht am Ende wie folgt aus:
<dl>
<dt>pc-intern.com</dt>
<dd>Ist ne tolle Seite</dd>
<dt>pc-trickz.com</dt>
<dd>Ist genauso gut</dd>
</dl>
Interessant wird es, wenn man die verschiedenen Listentypen miteinander kombiniert, indem man sie verschachtelt.
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 Müll und kann nur noch als Deathlink bezeichnet werden.
Im Quelltext sieht der Verweis meistens so aus:
<a href="URL">Verweis<a>
Doch was bedeuten 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 muss. Sie sollte existieren, ansonsten wird der Anker ins leere geworfen.
Verweis steht für das Objekt, dass du hier einfügen kannst. Hier rauf 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 Datei machen.
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 E-Mailadresse
Verweise auf Dateien auf der Festplatte
Verweise innerhalb einer Datei
Verweise innerhalb einer Datei sind sehr praktisch. Man kann beispielsweise Menüs in einer Datei haben, die auf einzelne Bereiche einer Seite verweisen. So kann der User z.B. bei einer recht umfangreichen Seite (siehe Goldene Regeln des Webdesigns, hier habe ich diese Technik recht effizient genutzt) schneller navigieren.
Und wie funktioniert das?
Es gibt die Sprungmarke, dass ist der Link und den Anker und auch 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:
Ihr gebt einfach <a href="URL">Verweis</A> ein.
Statt URL schreibt ihr die Adresse der Datei rein, wo sie ist. 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 gebt ihr nur den Dateinamen an.
Ist die Datei in einem untergeordneten Ordner macht ihr den link folgerndermaßen:
<a href="ordner/dateiname.html">Verweis</a>
Ist die Datei in einem übergeordneten Ordner, muss man einen Ordner zurückspringen. Dies macht man mit ../
Links ins www fangen grundsätzlich mit http:// an. Manche Seiten brauchen auch ein www.(also http://www.), die meisten aber nicht.
Ein Link auf diese Seite würde dann so aussehen:
<a href="http://it-academy.cc" target="_new">
Man sollte grundsätzlich ein target="_new" 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 Windows Commander (wincommander.de).
Verweise auf eine E-Mailadresse
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 übrigenz auch die Betreffzeile vorgeben, indem man direkt hinter der Emailadresse ?subject=Hier Betreffzeile einfügen anhängt.
<a href="mailto:mail@pc-intern.com?subject=Hier Betreffzeile einfügen">Mail an Matthias</a>
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:
Ihr könnt selbstverständlich auch den Hintergrund formatieren. Hier könnt ihr wählen, ob ihr ihn einfach einfärbt oder ob ihr eine Hintergrundfarbe benutzt.
Die Hintergrundfarbe hat 2 Vorteile:
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 müsst ihr aber auf folgendes achten:
Der Hintergrund muss 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 un 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.
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.
Was sind Frames?
Frames sind einzelne Bereiche (Fenster) einer Homepage. Es werden mindestens 2 verschiedene HTML-Dateien dargestellt.
Ihr solltet euch erst überlegen, ob ihr Frames haben wollt. Klar, es ist eine Arbeitserleichterung, weil man z.B. das Menü nur einmal machen muss und der Surfer muss es nur einmal laden.
Leider kann man mit Frames nicht so gut die Seite designen (Grafiken und co). Ihr müsst euch entscheiden:
Wollt ihr Frames benutzen, dann ist es schwieriger etwas wirklich gutes zu designen. Das es aber trotzdem möglich ist, beweist die Seite se-ri.de.
Wollt ihr keine Frames benutzen sind Änderungen am Menü z.b. schwieriger, denn man muss das ja in jeder Seite aktualisieren.
Meine Seite 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 eure Page besucht, dann benennt sie bitte als 'index.htm' oder 'index.html'. Ansonsten könnt ihr die Dateien nennen, wie ihr wollt ('name.html').
Das schreibt ihr dann in die Datei:
<html>
<head>
<title>
</title>
</head>
</html>
In dieser Datei gibt es keinen <body>-Tag. Stattdessen gibt es die Tags <frameset>, <framename> und <noframes>, plus der Beendigungstags. <frameset> sagt dem Browser, dass jetzt die Beschreibung des Frames folgt.
Innerhalb des <frame> und <frameset>-Tags werden Größe, Name, Zieldatei, u.A. für den Frame beschrieben.
Zwischen den <noframes>-Tags schreibt ihr das hin, was die User lesen sollen, die Browser haben, die keine Frames unterstützen.
Das ganze sollte dann so aussehen:
<html>
<head>
<title>
</title>
</head>
<frameset>
<frame>
</frameset>
<noframes>
Dein Browser kann leider keine Frames darstellen.
</noframes>
</html>
Das Augenmerk liegt jetzt bei den <frameset> und <frame>-Tags, da man hier jetzt alles einstellen kann.
Hier die Tags und deren Bedeutung:
name : Bestimmt den Namen des Frames. Hierzu später mehr. Ich rate euch nur einfache Namen zu wählen. Für das Menü wählt ihr z.B. den Namen menu und für den Inhalt der Page z.B. den Namen inhalt. Der Framename muss aber nicht so heißen, wie die Datei, zu der der Frame führt.
src="#" : Da tippt ihr die Adresse ein, wo eure HTML-Datei (die werden dann wieder mit dem <body>-Tag und ohne dem <frameset>-Tag geschrieben) ist.
rows="#" : Legt die Anzahl und Größe des Frames fest. Hier wird der Bildschirm horizontal gespalten. [Als Werte kann man Prozent (Zahl plus Prozentzeichen(%) oder Pixel (Zahl, ohne Zeichen am Ende) oder * (Füllt den Rest des Bildschirmes) nehmen.]
cols="#" : Legt die Anzahl und Größe des Frames fest. Hier wird der Bildschirm vertikal gespalten. [Als Werte kann man Prozent(Zahl plus Prozentzeichen(%) oder Pixel(Zahl, ohne Zeichen am Ende) oder * (Füllt den Rest des Bildschirmes) nehmen.]
scrolling="#" : Legt fest, ob ein Scrollbalken erscheinen soll. Die Werte sind: "auto" (wenn nur ein Balken erscheinen soll, wenn er benötigt wird, weil die Seite größer ist als der Bildschirm.), "yes" (es erscheint zwingend ein Scrollbalken.), "no" (es erscheint kein Scrollbalken, egal wie groß die Seite ist.). [Dieser Tag muss nicht zwingend vorhanden sein.]
noresize : verhindert, dass die Größe des Frames vom Surfer verändert werden kann. [Dieser Tag muss nicht zwingend vorhanden sein.]
border="#" : Definiert den Abstand der Frames voneinander. [Dieser Tag muss nicht zwingend vorhanden sein.]
frameborder="No" : Es erscheint kein grauer Rahmen um die Frames. [Dieser Tag muss nicht zwingend vorhanden sein.]
bordercolor="#" : Man kann die Farbe des Rahmens ändern, indem man das englische Wort eingibt (soweit die Browser das Wort auch kennen und die Farbe darstellen) oder den Hexadezimalcode eintippt (wird in einem späteren Tutorial erklärt). [Dieser Tag muss nicht zwingend vorhanden sein.]
target="#" : Hier gebt ihr den Namen des Frames an, bei dem die Seite geöffnet werden soll, wenn ihr im Frame einen Link betätigt habt. Außerdem gibt es noch folgende Werte: "_blank" (Die Zielseite erscheint in einem neuen Fenster), "_self" (Die Zielseite erscheint im gleichen Frame), "_parent" (Die Zielseite erscheint in einem übergeordneten Frame),
"_top" (Die Zielseite erscheint in einem Fenster über dem Frame). [Diese Tags müßen nicht zwingend vorhanden sein.]
marginwidth="#" : Legt die grundsätzliche vertikale Entfernung des Inhaltes vom Rand des Frames fest. [Dieser Tag muss nicht zwingend vorhanden sein. Als Werte kann man Prozent (Zahl plus Prozentzeichen(%) oder Pixel (Zahl, ohne Zeichen am Ende) nehmen.]
marginheight="#" : Legt die grundsätzliche horizontale Entfernung des Inhaltes vom Rand des Frames fest. [Dieser Tag muss nicht zwingend vorhanden sein. Als Werte kann man Prozent (Zahl plus Prozentzeichen(%) oder Pixel (Zahl, ohne Zeichen am Ende) nehmen.]
Abschließend möchte ich die Inlineframes vorstellen.
Bis jetzt unterstützt nur der Internetexplorer Inlineframes, aber mit der Netscapeversion 6 wird sich das wohl ändern.
Ein Inlineframe wird direkt in die normale HTML-Seite mit eingefügt.
Im Inlineframe ist ein Link zu einer ganz normalen HTML-Datei, die dann dargestellt wird.
Hier eine Übersicht der Befehle im Inlineframe:
<iframe> : Der Tag sagt dem Browser, dass jetzt ein Inlineframe anfängt.
src="#" : Hier kommt der Link zur ganz normalen HTML-Seite rein, in der man auch kein Frameset sondern den body-Tag hat.
width="#" : Es wird die Breite des Inlineframes angegeben. Das kann in Pixel (ohne Endung) und in Prozent sein (als Endung das Symbol % )
height="#" : Es wird die Breite des Inlineframes angegeben. Das kann in Pixel (ohne Endung) und in Prozent sein (als Endung das Symbol % )
scrolling="#" : Soll der Inlineframe scrollbar sein? yes, no, auto
frameborder="#" : Gibt die Dicke des Rahmens an. In Pixel (keine Endung)
Das sollte dann so aussehen:
<html>
<head>
<title>
Inline Frame
</title>
</head>
<body>
<iframe src="deinehtmldatei.htm" width="400" height="150" scrolling="auto" frameborder="1">
Hier kommt der Text für die Leute hin, die mit Browsern surfen, die keine Inlineframes darstellen können.
</iframe>
</body>
</html>
Ich glaube nicht, dass das mit reinem HTML möglich ist. Mit Javascript aber sicher schon. Nur kenn ich mit damit leider nicht so sehr aus.
----------------------------------------------------- Es gibt nur 3 natürliche Feinde des Programmierers: Tageslicht, frische Luft und das unerträgliche Gebrüll der Vögel
--
http://pc-intern.com
http://straightvisions.com
wie baue ich eine adressleiste (wie im internet explorer) in meine html Seite ein????
ich hab’s nun fast 2 Monate gesucht aber nicht gefunden (geht das überhaupt??)
Der Artikel ist sehr umfangreich und informativ. Allerdings sollte man beachten dass viele dieser Sachen in Zukunft mit CSS gemacht werden sollen, und daher deprecated sind. HTML 4 Strict interpretiert diese eh nicht mehr.
wehr diesen Artikel hier durch- und Lust auf mehr Wissen zum Thema HTML (etc.) hat, dem empfehle ich hier und jetzt SELFHTML (http://selfhtml.teamone.de/).
Aber besten herunterladen (geZippt) und langsam durcharbeiten.
----------------------------------------------------- Warum besteht Zitronenlimonade größtenteils aus künstlichen Zutaten, während in Geschirrspülmittel richtiger Zitronensaft drin ist ?
