[ Klick mal hier ]
und mach dir ein Lesezeichen von dieser Seite ...dann kannste schnell wieder hier her finden
und weiter lernen oder gucken ob ich schon was neues dazu gebastelt hab...
Diese Seite erhebt keinen Anspruch auf Vollständigkeit!
...wenn du wirklich alles über HTML wissen willst,
dann haste hier nen besonders interessanten Link: SelfHTML
SelfHTML ist die umfassenste OnlineDokumentation über HTML ...wirklich gut!
Was noch fehlt, ist ein Speicherplatz, auf den du dann später die fertige Seite hochladen kannst. Klar, es soll ein kostenloser sein... ich empfehle Angelfire.com ...damit kommt man prima zurecht. Klick da mal auf signup und mach dir nen Account (kostet ja nix). Wenn du das geschafft hast und im Webshell von deinem Account bist, dann klick mal obenrechts auf my account, in der erscheinenden Seite machste dann den Punkt bei -Banner ad- mal auf -in a popup- anstatt auf -on the page-.
Geschafft? Prima! Jetzt wird die olle Angelfire-Werbung nicht mehr auf deiner Seite angezeigt, sondern in einem Popup, das du wegklicken kannst! Jetzt kannste dich bei Angelfire ausloggen, weiter brauchste da nix zu machen.
Wenn du gern mal nen anderen Speicherplatz ausprobieren möchtest, dann schau doch mal bei Kostenlos.de vorbei..., oder versuchs mal hier!
Beim Netscapebrowser heisst es ein bissel anders:
Erst auf Anzeigen und dann auf Seitenquelltext...
oder die rechte Maustaste klicken und dann auf Seitenquelle...
ich versuch nochmal ein bisschen was zum Editor zu erklären:
du musst zuerst ne neue Seite beginnen, indem du auf das kleine weisse Blatt klickst...
im dann erscheinenden Dialog gehst du auf Leeres Dokument erstellen
Danach fügst du ein HTML-Grundgerüst ein:
und *schwupp*:
<html>
<head>
<title></title>
<meta name="author" content="Administrator">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
</body>
</html>
Mit dem html-Tag sagen wir dem Browser, daß das hier ein Dokument in der HyperTextMarkupLanguage ist..., am Ende der Seite schliessen wir das Tag dann auch wieder. Im Head also Kopf der Datei steht der Titel und ein paar Meta-Angaben für die Suchmaschinen. Wenn ihr lieb zu den Suchmaschinen seid und ihnen ein paar schöne Meta-Angaben mitbringt, dann stecken sie eure neue Seite fein in einen Index rein und dann kann man euch durch ne Suche mit dieser Suchmaschine vielleicht auch finden...
Jetzt kannst du dieser neuen Seite mal einen Namen geben in dem du zwischen den beiden Title-befehlen oben einen Namen eingibst... zB. hallihallo oder lustige seite ... irgendwas halt, das erscheint dann später oben in der blauen Zeile vom Browser als Titel deiner Seite..., guck mal oben! Diese Seite heisst HTML lernen mit Chrissi...
Alles was dann zwischen diesen beiden body-Tag's steht, das kann man später auch sehn...
Wie kriegt man denn anstatt sooner einfachen Farbe,
mal nen tollen Hintergrund in die Seite rein?
Nichts leichter als das!
Speichert euch nen tollen Hintergrund ab...
Wenn ihr noch keinen habt, dann schaut doch mal auf:
animiertegifs.de
da gibts kostenlos jede Menge davon.
...und dann schreibt ihr noch folgendes mit ins Body-tag rein:
<body background="meinbild.jpg">
Hier mal ein Beispiel:
So einen Link kannste ganz leicht zaubern..., wichtig ist das du zuerstmal den Cursor an die Stelle im Quelltext bringst wo der Link hin soll, dann einfach oben auf Einfügen und dann auf Hyperlink ...du brauchst dann nur noch den URL und den Titel vom Link anzugeben, also das was man später anklicken kann...
*schwupp*: <a href="URL">LinkTitel</a>
URL steht übrigens für Uniform Resource Locator
Das a bedeutet anchor, also der Anker von wo aus der Link ausgeht...
href bedeutet HypertextReferenz also ein anderes Dokument...
Ganz wichtig ist, das du das <a... nach dem Link auch wieder schliesst und zwar mit: </a> ...wenn du das vergißt, dann ist der ganze Rest deiner Seite ein Link, das sieht wirklich ziemlich doof aus *lach*
Es gibt lediglich zwei Tag's die man nicht schliessen muss,
und zwar <br> ...für einen Zeilenumbruch und <p> ...für einen Absatz.
Naguuut, beim <p> sollte man's eigentlich auch wieder schliessen, aber die Browser kommen halt alle damit zurecht.
Falls man dem <p> noch ein Attribut hinzufügt,
also zB: <p align="right"> oder <p align="justify"> muss mans auf jeden Fall wieder mit </p> schliessen, weil der Browser sonst meint, daß dieses Attribut für den gesamten Rest der Seite gilt... Solange das <p> ganz alleine ist und ihr niemandem was sagt, ist alles ok.
*schwupp*
Jetzt zaubern wir mal ne Tabelle:
<table border=1>
<tr>
<td>Erstes Feld, Erste Zeile</td>
<td>2. Feld, 1. Zeile</td>
</tr>
<tr>
<td>Erstes Feld, Zweite Zeile</td>
<td>2. Feld, 2. Zeile</td>
</tr>
</table>
Das Ergebniss kann dann in etwa so aussehn:
| Erstes Feld Erste Zeile |
2. Feld 1. Zeile |
| Erstes Feld Zweite Zeile |
2. Feld 2. Zeile |
Mit <table border=1> öffnen wir die Tabelle und sagen ihr das sie nen Rahmen von einem Pixel Breite haben soll, ne 0 würde den Rahmen unterdrücken.
Mit <tr> öffnen wir die erste Zeile...
Mit <td> öffnen wir das erste Feld in der ersten Zeile, da schreiben wir dann irgendwas feines rein und machen's mit </td> wieder zu.
Mit dem zweiten Feld das Gleiche und dann schliessen wir mal die erste Zeile mit </tr>.
Dann machen wir halt noch ne Zeile, genau wie die erste, nur schreiben wir mal was anderes lustiges rein...
Wie positioniert man denn nun die Inhalte in den Feldern?
So:
<td align="right">rechts</td>
<td align="center">mittig</td>
<td valign="top">oben</td>
<td valign="center">vertikal zentriert</td>
<td valign="bottom">unten</td>
Und woher kommen die tollen Hintergrundfarben??
Also die gehn so:
<td bgcolor="#FF0000">Inhalt...</td>
...da gehört dann also der 6stellige Hexadezimalcode für die Farbe rein...
du kannst auch mehrere Zellen innerhalb einer Zeile verbinden, so dass sich eine Spalte in dieser Zeile über mehrere Spalten hinweg erstreckt.
Hier gleich mal ein Beispiel:
<table border="1" width="400">
<tr>
<td colspan="2" bgcolor="#0000FF">
</td>
</tr>
<tr>
<td width="150" bgcolor="#00FF00">
</td>
<td bgcolor="#FFFF00">
</td>
</tr>
</table>
| Die Zeile erstreckt sich über beide Felder unten... | |
| linkes Feld |
rechtes Feld |
Wenn man also so ein Feld vertikal über andere Felder spannen möchte,
dann braucht man das Attribut colspan.
Das Gleiche geht natürlich auch vertikal:
| Dieses Feld spannt sich über die Höhe von 2 Feldern in der rechten Spalte | 1. Feld |
| 2. Feld | |
| Hier das Gleiche nochmal, aber schön bunt... | |
wenn's so aus sehn soll, braucht man das Attribut rowspan
dann erklär ich die Abkürzungen auch mal:
table = Tabelle
tr = table row = Tabellen-Zeile
td = table data = Datenzelle
dann gibts da noch das th, das steht für table header = Tabellen-Kopf
Probiers doch mal und benutz es in einer Tabelle, die Inhalte eines th-Feldes werden dann fett und mittig angezeigt, es sei denn man weisst der Zelle noch andere Attribute zu...
|
Ihr habt also zwei Möglichkeiten, eine Farbe anzugeben
einmal den 6-stelligen HexadezimalCode
oder den Farbnamen
Ich empfehle euch unbedingt den Hexadezimalcode, denn von diesen Farbnamen sind bisher erst die oben gezeigten 16 Stück Standard für alle Browser.
Anders sieht's bei den HexadezimalCodes aus: Da habt ihr die schier unbegrenzte Auswahl aus 16,7 Millionen Farben.
Der HTML-editor den ich oben empfohlen habe, der hilft euch prima mit diesen Farben, so daß ihr euch diese Zahlen garnicht unbedingt merken müsst..., probierts halt mal aus!
<font face="times new roman"> Times New Roman schreibsel schreibsel... </font>
<font face="courier new"> COURIER NEW schreibsel schreibsel... </font>
...das Attribut face bestimmt also die Schriftart.
<font color="#FF0000"> Rote Schrift
<font color="#FFFF00"> Gelbe Schrift
<font color="#00FF00"> Grüne Schrift
...das Attribut color bestimmt also die Schriftfarbe.
Dann gibt's noch den Blocksatz... so wie inner Zeitung.
Der geht dann so:
<p align="justify"> Text text Text Text Text </p>
|
Hier tipp ich einfach mal ein bissel Text, damit man sieht wie so ein Blocksatz aussieht..., ich hab diesen hier mal in eine 150 Pixel breite Tabelle gesteckt, damit ich nicht über die ganze Breite tippen muß... bin halt ein wenig faul manchmal *gg* |
<img src="https://www.angelfire.com/80s/didumm/images/htmlbutton.jpg" alt="HTML..." width="105" height="36" border="0">
dabei kommt dann das raus:
der URL (Uniform Resource Locator) kann zB. so aussehn: https://www.angelfire.com/80s/didumm/images/htmlbutton.jpg
das ist dann also der Pfad zu dem Bild so wie er auf dem Speicherplatz liegt...
als Alternativtext gibt man etwas erklärendes zum Bild ein, falls es mal nicht sofort geladen wird... geh mit der Maus übers Bild...
width und height bestimmen, in welcher Größe das Bild angezeigt wird... und das sollten natürlich auch die richtigen Werte sein, sonst wirds net so toll...
border="0" unterdrückt den Rahmen um das Bild, man kann natürlich auch ne Zahl eingeben, die dann die Pixelbreite des Rahmens bestimmt...
<hr> ...das wäre ne einfache Linie über die gesamte Bildschirmbreite in der im body-tag angegebenen Schriftfarbe und mit ner Dicke von einem Pixel:
<hr width="300"> ...das wäre ne 300 Pixel breite Linie:
<hr color="#FF00FF" width="350"> ...das wäre eine 350 Pixel breite Linie in der Farbe fuchsia:
<hr align="right" width="200" color="#0000FF" size="5"> ...rechts ausgerichtet, 200 Pixel breit, blau, und 5 Pixel dick:
Das Tag hr (horitontal row) hat also auch ne Reihe Attribute die einem helfen richtig schöne Linien zu zaubern...
Ach ja: Der Netscape-Browser zeigt die Linien leider nicht farbig an. Womit wir gleich ein neues Theman ansprechen können und zwar die unterschiedliche Darstellung der versch. Browser. Tja, die meisten Sachen klappen zwar mit beiden aber ein paar leider nich. Für manche kleinere Problemchen gibts dann noch Lösungen... für andere auch wieder nich... aber das wär jetzt ein bissel vorgegriffen. Lest mal einfach weiter! *gg*
Hier nochmal ne etwas andere, lustige Linie:
ΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞ
Wenn du wissen willst, wie man die macht, dann such mal im Quelltext!
Das ist sowieso eine echt tolle Sache! Sobald ihr mal was lustiges oder interessantes auf ner anderen Seite seht: guckt euch gleich mal den Quelltext an. So kommt man schnell auf neue Ideen und lernt tolle Sachen kennen die man auf der eigenen Seite bestimmt mal benutzen kann...
Folgender Quelltext würde zum Beispiel unsere Seite in zwei vertikale Bereiche unterteilen:
<frameset cols="100,*" border="0">
<frame src="links.html" name="links">
<frame src="rechts.html" name="rechts">
</frameset>
Der linke Bereich wäre 100 Pixel breit und rechte Bereich würde den Rest des Platzes ein nehmen...
...dann muss man noch angeben welche Seiten denn in die einzelnen Bereiche geladen werden sollen.
Das macht man mit frame src...
Das Ergebnis sähe dann etwa so aus:
Na klar, man kann die Bereiche auch horitontal unterteilen...:
<frameset rows="50,*" border="0" border="0">
<frame src="links.html" name="links">
<frame src="rechts.html" name="rechts">
</frameset>
...oben 50 Pixel, unten der Rest.
Das Ergebnis sähe dann etwa so aus:
Bei den beiden voran gegangenen Beispielen brauchen wir also jeweils 3 Seiten, damit unser Frameset funktioniert.
Jetzt machen wir mal beides zusammen, horitontale und vertikale Aufteilung so das wir 3 Seiten gleichzeitig anzeigen können...:
<frameset cols="40%,60%" border="0">
<frame src="links.html" name="links">
<frameset rows="20%,80%" border="0">
<frame src="oben.html" name="oben">
<frame src="unten.html" name="unten">
</frameset>
</frameset>
Das Ergebnis sähe dann etwa so aus:
Wie man sieht, kann man sowohl prozentual aufteilen, als auch die genaue Größe in Pixeln angeben und ein Sternchen * gilt für den übrig beibenden Platz.
border="0" bedeutet, das der Rahmen um die einzelnen Frames unterdrückt wird. Wenn man das nicht dazu schreibt, dann wird der Rahmen standardmäßig angezeigt...
...in den Kopf eurer Seite, also den head steckt ihr das da rein:
<bgsound src="Euer Lied" loop="infinite">
loop="infinite" heisst übrigens, daß euer Lied immer wiederholt werden soll...
Ihr könnt anstatt infinite auch ne beliebige Zahl eingeben...
Das sieht dann der MicrosoftExplorer und spielt brav die Musik...
...und in den Körper also den body schreibselt ihr dann noch das hier:
<embed src="Euer Lied" autostart="true" loop="true" hidden="true" height="0" width="0">
Und das ist für den NetscapeBrowser weil der das andere net so gerne mag...
Dem NetscapeBrowser könnt ihr nur die Wahl zwischen einer EndlosSchleife oder einmaligem Abspielen lassen. Wenn euer Lied nur einmal gespielt werden soll, dann lasst den Befehl loop="true" einfach weg...
Ihr müsst den Befehl für die Musik also gleich 2 mal angeben...
das is net so toll, aber so is das nunmal.
Euer Lied ersetzt ihr jeweils mit eurer Musikdatei...
Das kann eine MidiDatei(.mid) oder auch ne Mp3Datei(.mpg) sein...
Na klar, ihr müsst eure Musikdatei natürlich auch auf den Speicherplatz hochladen...
Und passt auf, daß ihr auch den richtigen Pfad zur Datei reinschreibselt!
Wie bekommst du dieses Banner auf deine Seite? Klick hier!
