IT-Academy Logo
Sign Up Login Help
Home - Programmieren - HTML - HTML Tutorial - Grundkenntnisse



HTML Tutorial - Grundkenntnisse

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.


Autor: Matthias Reuter (no_comment)
Datum: 20-02-2002, 17:44:39
Referenzen: PC-Intern.com
Schwierigkeit: Anfänger
Ansichten: 10533x
Rating: 9 (4x bewertet)

Hinweis:

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.

[Druckansicht] [Als E-Mail senden] [Kommentar verfassen]



Wozu braucht man HTML-Kenntnisse?

Homepagegestaltung im Quelltext



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>




Formatierung des Textes-Kapitel 01

Macht was aus euren Schriften



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.

    Wenn alles zusammen ist, sieht es so aus:

    <font face="Verdana" size="4" color="black">



Formatierung des Textes-Kapitel 02

Absätze, Zeilenumbrüche, Listen und mehr



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.

      <ol>
      <li>Erster Listeneintrag
      <li>Zweiter Listeneintrag
      <ul>
      <li>Unterlisteneintrag
      <li>Unterlisteneintrag
      <li>Unterlisteneintrag
      </ul>
      <li>Dritter Listeneintrag
      </ol>







Links

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 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:

      <a href="#variable">nach unten>


      Der Anker sieht dann wie folgt aus:

      <a name="variable">Da bist du ja</a>


      Und so funktioniert der Link:
      wieder nach ganz oben

    Verweise auf eine HTML-Datei
    • 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 ../

      <a href="../dateiname.html">Verweis</a>


    Grafikdateien, die angezeigt werden sollen
    • Dies geht ganz einach mit folgendem Tag:

      <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 muss eingetragen werden, wie breit das Bild ist, das verkürzt die Ladezeiten"
      • height="Genauso, wie mit width, nur, dass es hier um die Höhe geht"

    Grafikdateien als Links benutzen
    • Das ist ganz einfach, siehe Beispiel:

      <a href="URL"><img src="URL" border="0" width="468" height="60"></a>


    Links ins www
    • 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>


      So sieht es im Browser aus:

      Mail an Matthias

    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:

      <a href="file://c:\windows\notepad.exe">Notepad starten</a>


      Im Browser sieht es dann so aus:
      Notepad starten




Hintergrund

Das da ganz hinten



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.

Der Hintergrund wird im <body>-Tag gesetzt.

Die Hintergrundfarbe setzt man wie folgt:

<body bgcolor="blue">


Das Hintergrundbild so:

<body background="URL">


Kombiniert sieht es so aus:

<body bgcolor="blue" backround="URL">



Frames

Einzelne Seiten verbinden



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.]




Das ganze sieht dann so aus:
<html>
<head>
<title>
Meine Frameseite, vertikal geteilt.
</title>
</head>
<frameset cols="200,*" frameborder="No" border="0" bordercolor="gold">
<frame src="menu.htm" noresize name="menu" scrolling="auto" target="inhalt" marginwidth="10" marginheight="1">
<frame src="inhalt.htm" noresize name="inhalt" scrolling="auto" marginwidth="10" marginheight="1">
</frame>
</frameset>
<noframes>
Dein Browser kann leider keine Frames darstellen.
</noframes>
</html>



Oder so:
<html>
<head>
<title>
Meine Frameseite, horizontal und vertikal geteilt.
</title>
</head>
<frameset cols="20%,*" frameborder="No" border="0" bordercolor="gold">
<frame src="menu.htm" noresize name="menu" scrolling="auto" target="inhaltoben" marginwidth="10" marginheight="1">
<frameset rows="80%,*" frameborder="No" border="0" bordercolor="gold">
<frame src="inhaltoben.htm" noresize name="inhaltoben" scrolling="auto" marginwidth="10" marginheight="1">
<frame src="inhaltunten.htm" noresize name="inhaltunten" scrolling="auto" target="inhaltoben" marginwidth="10" marginheight="1">
</frame>
</frameset>
<noframes>
Dein Browser kann leider keine Frames darstellen.
</noframes>
</html>




Jetzt müsst ihr auch im Menü von eurer Page bei den Links den Target-Befehl einfügen.
Das sieht dann so aus:
<html>
<head>
<title>
Mein Menu
</title>
</head>
<body>
<a href="#" target="inhalt"> # </a>
</body>
</html>




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>




no_comment
Professonial
Beitrag vom:
03-05-2005, 17:18:19

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


Blacknoise
Rookie
Beitrag vom:
03-05-2005, 12:32:17

PROBLEM!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

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??)


-----------------------------------------------------


paedubucher
Professonial
Beitrag vom:
15-05-2004, 17:00:10

Sehr gut, alles was ein Einsteiger braucht. Klar, verwendet man heute css, aber hier geht es ja um html und das wurde super beschrieben! Eine 9!

-----------------------------------------------------


dreamer
Expert
Beitrag vom:
23-02-2004, 18:24:10

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.

-----------------------------------------------------


Feeela
Rookie
Beitrag vom:
18-11-2003, 21:03:45

eine weitere sehr umfangreiche Referenz

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 ?


[back to top]



Userdaten
User nicht eingeloggt

Gesamtranking
Werbung
Datenbankstand
Autoren:04378
Artikel:00815
Glossar:04117
News:13567
Userbeiträge:16545
Queueeinträge:06051
News Umfrage
Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?
Mobile Nutzung möglich (Ipone, Android)
Externe API Schnittstelle/Plugins dritter
Zeiterfassung meiner Mitarbeiter
Exportieren in CSV/XLS
Siehe Kommentar



[Results] | [Archiv] Votes: 633
Comments: 0