Code:
<html>
<head>
Beispiel
</head>
<body link = "#000000"; vlink = "#000000"; alink = "#FF0000";>
Beispiel
</body>
</html>
Das Grundgerüst eines jeden HTML-Codes. Die Tags <html></html> bestimmen, dass das Dokument ein HTML-Dokument ist. Die Tags <head></head> bilden den Kopfbereich. In diesem werden allgemeine Funktionen der Website festgelegt und es wird z.B. auf CSS Dokumente verwiesen. Die Tags <body></body> bilden den Hauptbereich. In diesem steht der nachher tatsächlich sichtbare Inhalt der Seite.
link =“…“ legt die Farbe des Link-Textes fest.
alink=“…“ legt die Farbe eines bereits besuchten Links fest.
Vlink=“…“ legt die Farbe eines links, der gerade angeklickt wird fest.
Code:
<title>Gymnasium</title>
Gibt einen Titel für die Seite an der im Tab erscheint.
Fügt einen Zeilenumbruch ein.
Ein Div-Container (Name: main) wird erstellt. (noch hat dieser keinen nutzen, da er weder eine Breite, Höhe oder sonst was hat.
Code:
<div id="main" style="width: 1000; margin: auto; height: auto; min-height:500; background-color: #F2F5A9; margin-top: 10; float: right; overflow-y: scroll;">
Style=”…” ist ein Parameter, mit dem eine genaueres Design des Div Containers festgelegt werden kann.
-Width: 1000 macht den div Container 1000 Pixel Breit.
-height: auto Die Höhe des Div Containers wird automatisch an den Inhalt angepasst.
-min-height: 500px Die Höhe des Div Containers wird nie weniger als 500 Pixel
-margin: auto legt die vertikale Position des Containers fest. „auto“ bedeutet, dass er genau in die Mitte gelegt wird.
-background-color: #F2F5A9 Legt die Hintergrundfarbe des Containers fest. Das #F2F5A9 ist ein Farbcode und wäre in diesem Fall ein blasses Gelb.
-margin-top: 10 legt den Abstand zu dem Websiterand oder zu dem Objekt über dem Div Container fest.
-float:right legt fest, dass der Container rechtsbündig ist. Overflow-y:scroll macht, dass man horizontal scrollen kann.
Code:
<a href=“http://www.beispiel.de“ target="_blank">Hier steht ein Text</a>
Mit diesem Tag kann man Links einfügen. Klick man auf „Hier steht ein Text“ wird man zu der Seite „
weitergeleitet.
Target=“_blank“ bewirkt, dass die Seite in einem neuem Tab geöffnet wird!
Code:
<img src=“test.png“>
Mit diesem Tag können Bilder hinzugefügt werden. Der Pfad des Bildes steht in dem Tag, src(für source = Quelle) =“[hier dem Pfad]“.
Code:
<b>Ich bin fett</b>
Mit dem Tab <b> kann das Schriftformat auf Fett ändern.
Code:
<h1>Ich bin Groß!</h1>
<h6>Ich bin klein</h6>
Mit diesem Tag kann man eine Überschrift erstellen. <h1> ist die Größte und <h6> die kleinste.
Code:
<center>zentriert</center>
Mit diesem Tag kann man die Ausrichtung eines Textes oder anderen Objektes zentrieren.
Code:
<marquee scrollamount=3 scrolldelay=5>
<marquee> erzeugt einen sich bewegenden Text. Scrolldelay legt die Geschwindigkeit fest und scrollamount legt fest, wie weit sich der Text Pro delay bewegen soll.
Code:
<font size="6p" color="yellow">Gelb</font>
<font> an sich bewirkt erst mal nichts, aber die Parameter, die man dahinter schreibt, verändern die Textformatierung bis zum </font>
Size=“6“ ändert die Schriftgröße und color=“Yellow“ macht den Text gelb.
Markiert in HTML ein Kommentar, dass beliebig lang sein kann und nicht in den Quellcode mit einbezogen wird.
Code:
<a name=”ich bin ein name”> </a>
[…]
<a href=“#ich bin ein name“>zu name springen</a>
Wenn man auf „zu name springen“ klickt, scrollt man automatisch zu der stelle auf der Seite, wo „ <a name=”ich bin ein name”> </a> “ im Quellcode steht.
Code:
<link rel="shortcut icon" href= "https://de.gravatar.com/userimage/URL" type="image/x-icon" />
(im head Bereich)
Der Link führt zu einem Bild, welches durch den Tag neben dem Tab zu sehen ist. Ein shortcut icon.
Code:
title="Ich bin ein Tipp"
Title ist ein Parameter, dass man hinter fast alle Tags setzen kann. Es fügt die Funktion eines Tooltipps hinzu. Das heißt, dass ein Text („Ich bin ein Tipp“) erscheint, wenn man mit der Maus auf dem entsprechenden Objekt ist.
Code:
<ul>
<li>Ich bin eine Auflistung</li>
<ul>
Der Befehl <ul> erstellt eine Auflistung die durch Punkte gegliedert ist. Jeder neue Punkt der Auflistung wird mit einem <li></li> umrahmt.
Code:
ß
ä
ü
ö
Fügt ein Leerzeichen ein.
Fügt ein scharfes s ein.
Fügt ein ä ein. Je nach Großschreibung ä/Ä
Fügt ein ü ein. Je nach Großschreibung ü/Ü
Fügt ein ö ein. Je nach Großschreibung ö/Ö
Danke für diene Hilfe.
