| 1. HTML - Grundlagen der Programmierung |
| Artikel - HTML - Grundlagen und Praxis | ||||||||||
|
HTML - Erklärung und Grundfunktionen Was ist HTML? HTML bedeutet Hypertext Markup Language. Es ist eine Scriptsprache die über einen Browser (=Client) (zb.: Internet Explorer, Netscape,..) aufgerufen werden. Da die HTML Dateien reine Textfiles sind, können sie fast mit jedem Editor erstellt und abgeändert werden.HTML Befehle: Die Befehle um die jeweilige Funktion auszuführen nennt man Tags. Ein Tag besteht aus zwei Klammern: < und > . Zwischen diesen zwei Teilen steht der eigentliche Befehl, der ausgeführt werden soll. Ein Tag sieht folgendermaßen aus:<start> Befehl </start> Jeder Tag wird mit „ </> “ beendet. Durch das „ / “ erkennt HTML, dass es das Ende des Tags ist. Wie sieht HTML aus? Das HTML – Grundgerüst einer jeden HTML Datei wird in Bereiche aufgeteilt:Die Datei beginnt mit <HTML> und endet wie jeder Tag mit </HTML> . Dieser Tag teilt dem Browser mit, das es sich hierbei um eine HTML Datei handelt. Anschließend folgt der <HEAD> Bereich der wieder mit </HEAD> endet. Zwischen den HEAD Tags werden meistens der Titel der Homepage, Angaben die für Suchmaschinen wichtig sind oder Javascripte. Darauf folgt der <TITLE> Tag. In diesem Tag wird nur der Seitenname der Homepage angegeben. Zwischen den <BODY> und </BODY> Tag stehen alle Befehle die für den Inhalt und für das Layout einer Seite zuständig sind. Im <BODY> Tag werden allgemein die Hintergrund und Textfarben angegeben. Das ganze Grundgerüst einer HTML Datei sieht so aus: <HTML> !! Tipp : In HTML darf Groß und Kleinschreibung verwechselt werden! 1.1 Unsere Erste Homepage mit HTML Um zu sehen, was das oben beschriebene Grundgerüst anzeigen würde, kopiert den kommenden Code in einen Editor wie Notepad. Dieser Editor wird z.B. mit Windows mitinstalliert. Um ihn zu öffnen macht folgendes: Drückt auf die START Taste..... Dann auf Ausführen.... Nun gebt Ihr NOTEPAD ein... Es öffnet sich Notepad. Der Quellcode einer Jeden Seite, oben beschrieben als das Grundgerüst würde nur den Titel anzeigen. Hier ein kleines Beispiel: <html> Dieser Code würde den Titel "Meine Erste Homepage mit HTML" anzeigen und Meine Erste Homepage die ich mit HTML gebastelt habe im Browserfenster anzeigen.
1.2 Text Formatierungen Da unsere erste Homepage ziemlich fad aussieht bietet HTML einige Möglichkeiten, eine Seite schöner zu gestalten. Die Wichtigsten und eigentlich die einfachsten sind:
Wichtig hierbei ist nur, das jede Formatierung mit einem Backslash also mit einem / beendet wird. Ohne diesen Schrägstrich weiß HTML nicht, wann der Text nicht mehr zb. kursiv dargestellt werden soll. Die Anwendung solcher Formatierungen sieht so aus:
Natürlich können diese Formatierungen auch verbunden werden:
Somit wird der Text Fett und Unterstrichen dargestellt.
1.3 Text Ausrichten Wenn man mal den Text zentriert (in der Mitte) dargestellt haben will, z.B. Für eine Überschrift, so kann man das mit HTML leicht realisieren:
1.4 Ein Bild einfügen Nun können wir eigentlich schon richtig schöne Homepages erstellen. Um sie richtig schön zu machen wäre aber noch ein Bild passend.
Sieht irgendwie kompliziert aus, ist es aber nicht. img src bedeute nichts anderes als WO IST DAS BILD? Mit diesem Befehl sagst du HTML, wo sich die Bilddatei bild.jpg befindet. align="right" bedeutet so viel wie, dass das Bild rechtsbündig dargestellt werden soll. width="21" & height="26" sind die Breiten (width) und die Höhen (height) Angaben. Diese verkleinern bzw. vergrößern das Bild. border="0" ... Border heißt übersetz Grenzen, in HTML meint man damit aber die Bildumrandung. Ist sie 0, so wird kein Rahmen angezeigt. alt="Bild" .... Alt steht hier für Alternative. Während das Bild am Laden ist bzw. wenn das Bild nicht vorhanden ist wird dieser Text angezeigt. Ebenso wird bei einem Mausover (Mit der Maus über das Bild fahren) der Text angezeigt.
1.5 Links Unter Links versteht man nicht die Ausrichtung, sondern eine Verknüpfung zu einer anderen Seite im Internet. Ein Link wird meistens per Bild oder über einen unterstrichenen Text aufgerufen, der entsprechend formatiert wurde. Ein Link kann auch innerhalb einer Seite sein. Wenn man auf einen Link klickt öffnet sich die Seite und wird im Browser geladen und angezeigt.
Der Befehl, einen Link zu erstellen wird mit einem "A" abgekürzt. Das "A" kommt aus dem Englische und steht für Anchor, zu Deutsch Anker. Weiteres wird ein Link mit HREF erstellt. HREF ist eine Ruffunktion. Zwischen den Anführungszeichen " befindet sich die Url (UniformResourceLocator) zur Homepage. Diese kann auch wie oben genant innerhalb einer Homepage verlinkt werden. Dies sieht dann z.B. so aus:
1.6 Farben Um eine Homepage lebendiger zu machen kann man mit HTML auch einen Text mit Farben versehen.
Der Grund für 2. Varianten ist einfach. Die neue Version von HTML hat auch neue Funktionen. Funktionieren tun aber beide. Bevorzugt sollte aber die Moderne bzw. Neuere werden. Nun zur Erklärung: Das P bedeutet so viel ich weiß Paragraph (deutsch=absatz). Der Unterbefehl style beeinflußt das Aussehen eines Textes. Im Unterbefehl style könnte man mehrere Unterbefehle verwenden, ist jedoch zu diesem Zeitpunkt noch nicht nötig. Der Befehl color:Farbe verändert die Farbe eines Textes. Statt Farbe können viele englische Wörter für Farben verwendet werden. Es können aber auch RGB Farben wie #FFFFFF oder #000000 benutzt werden. Die Alte Variante scheint für den Anfang leichter zu sein. Es enthält den englischen Namen für Schrift. Durch den Befehl FONT werden also Schriften formatiert. Weiters wird COLOR verwendet, auf Deutsch Farbe. Hier können ebenfalls entweder die Englischen Wörter für Farben oder die RBG Farben verwendet werden.
Um ein Hintergrundbild in einer Homepage einzufügen wird folgender Befehl verwendet:
Wie Ihr seht wurde diese Formatierung im BODY Bereich durchgeführt. Bisher hatten wird den <BODY> Tag nicht verändert. Wie Ihr aber sehen könnt, kann und wird er viel verändert. Den Befehl für den Hintergrund lautet BACKGROUND="hintergrund.jpg". Ist das Bild nicht im gleichen Ordner wie die HTML Datei, muss die vollständige URL angegeben werden.
Kurzhaarfrisuren |
||||||||||
| weiter > |
|---|