HTML
Wir lernten folgende Dinge mit Hilfe von HTML zu erstellen oder einzufügen:
Tabellen
Code:
<table border=”1″>
<tr>
<td> Text Zeile eins linke Spalte </td>
<td> Text erste Zeile lrechte Spalte </td>
</tr>
<tr>
<td> Text in der zweiten Zeile und linken Spalte </td>
<td> Noch immer in der zweiten Zeile jedoch rechts </td>
</tr>
</table>
Erklärung:
<tr> “öffnet” die Spalte, </tr> schließt sie wieder. zwischen diesen befehlen können <td></td> elemente gesetzt werden um die Anzahl der Zeilen zu bestimmen. In jeder Spalte müssen gleich viele Zeilen vorhanden sein. Man kann jedoch Zeilen verschmelzen (siehe weiter unten). “border” steht für den Rahmen der Tabelle. Je höher die Zahl desto größer der Rahmen
Aussehen der Tabell mit dem obrigen Code:
| Text Zeile eins linke Spalte | Text erste Zeile lrechte Spalte |
| Text in der zweiten Zeile und linken Spalte | Noch immer in der zweiten Zeile jedoch rechts |
Wie schon angesprochen kann man Zeilen nun auch verschmelzen. Um es nun bei diesem Code zu zeigen, müsste man ihn wie folgt ändern (mein Ziel jetzt: das verschmelzen der oberen Zeilen)
<table border=”1″>
<tr>
<td colspan=”2″> ich bin nun eine Zeile </td>
</tr>
<tr>
<td> Text in der zweiten Zeile und linken Spalte </td>
<td> Noch immer in der zweiten Zeile jedoch rechts </td>
</tr>
</table>
Aussehen:
| ich bin nun eine Zeile | |
| Text in der zweiten Zeile und linken Spalte | Noch immer in der zweiten Zeile jedoch rechts |
Der fette Text (colspan=”2″) gibt an wieviele Zeilen verschmelzen sollen. Hier zwei, deswegen als Wer die Ziffer ‘2′.
Nun ist es noch möglich die Tabelle noch weiter mit “cellpadding” und “cellspacing” zu gestalten.
Hier zu eine Erklärungsbild (Quelle: SelfHTML)
<table border=”1″ cellpadding=”5″ cellspacing=”15″>
<tr>
<td colspan=”2″> ich bin nun eine Zeile </td>
</tr>
<tr>
<td> Text in der zweiten Zeile und linken Spalte </td>
<td> Noch immer in der zweiten Zeile jedoch rechts </td>
</tr>
</table>
Aussehen:
| ich bin nun eine Zeile | |
| Text in der zweiten Zeile und linken Spalte | Noch immer in der zweiten Zeile jedoch rechts |
Man kann jetzt noch Hintergrundfarben verändern, einfach mit dem Befehl ‘ bgcolor=”#HEXCODE” ‘:
<table border=”1″ cellpadding=”5″ cellspacing=”15″ bgcolor=”#440000″ (dunkelrot)>
<tr>
<td colspan=”2″ bgcolor=”#6699FF” (mittelblau)> ich bin nun eine Zeile </td>
</tr>
<tr>
<td bgcolor=”#FF9900″ (orange)> Text in der zweiten Zeile und linken Spalte </td>
<td bgcolor=”#FFFF33″ (gelb)> Noch immer in der zweiten Zeile jedoch rechts </td>
</tr>
</table>
[anmahlig: die kursiven Sachen dürfen nicht im Code stehen und sollen nur dazu dienen damit man weiß wo sich welche Farbe ändert]
Aussehen:
| ich bin nun eine Zeile | |
| Text in der zweiten Zeile und linken Spalte | Noch immer in der zweiten Zeile jedoch rechts |
Natürlich ist auch die Breite der Tabelle beeinflussbar:
<table border=”1″ cellpadding=”5″ cellspacing=”15″ bgcolor=”#440000″ width=“100%”>
<tr>
<td colspan=”2″ bgcolor=”#6699FF” > ich bin nun eine Zeile </td>
</tr>
<tr>
<td bgcolor=”#FF9900″ width=”30%”> Text in der zweiten Zeile und linken Spalte </td>
<td bgcolor=”#FFFF33″ width=”70%”> Noch immer in der zweiten Zeile jedoch rechts </td>
</tr>
</table>
Man kann das alles auch mit einre fixen Größe (z.B. ‘ width=”240px” ‘) angeben, allerdings reagieren nicht alle Browers gleich und verändern die Größe z.B. mit verkleinerung des Fensters trotz dieser eigentlich fixen Tabellenbreite. Man muss im table-tag 100% angeben damit sich die zeilen, wenn man zB. nur bei einer in Prozent die Breite definiert, die andere automatisch auf 100% ergänzt. sonst eben auf die anstatt 100% angegebene Zahl. Alle Zeilen werden gleich breit wenn man eine verändert. Gibt man keine Breite an, werden die Zeilen so groß wie der Text Platz braucht.
Aussehen:
| ich bin nun eine Zeile | |
| Text in der zweiten Zeile und linken Spalte | Noch immer in der zweiten Zeile jedoch rechts |
Genug von Tabellen…
Bild einfügen
Code:
<img src=”BILD-URL” alt=”nichts”>
Erklärung:
img….images
src…..source -> Quelle in dem Fall die “Grafikadresse”/Bild-URL
alt……erscheint wenn das Bild nicht angezeigt wird, eine kurze Beschreibung des Bildes -> Blinde können so erkennen welches Bidl dort abgebildet wäre, wenn man mit der Maus über das Bild fährt wird die jeweilige Beschreibung angezeigt
Beispiel:
Bild: Klick (Quelle: Bild von mir)
Code zum einfügen des Bildes:
<img src=”http://violaw.vi.ohost.de/pictures/sky/sky_1.jpg” alt=”Windrad”>
Bild:
Link einfügen
Code: <a href=”Link-Adresse” target=”wo soll sich der Link öffnen?”>LINK</a>
target gibt an wo der Link erscheint (in einem bestimmten Frame zB.) gibt man ihn nicht an öffnet er sich einfach in dem Fenster in dem man sich gerade befindet. nimmt man ‘ target=”0″ ‘ öffnet sich der Link in einem neuen Fenster.
Bsp.:
<a href=”http://google.at” target=”0″>Ich bin ein Link zu Google!</a>
Ergebnis:
HTML
Was ist beim Dateinmane zu beachten?
- nicht länger als 8 Zeichen
- keine Sonderzeichen (auch keine Umlaute)
- Kleinbuchstaben
- Endung .htm oder .html
Grundgerüst:
<html>
<head>
<title> Titel der Seite, die in der Fensterleiste steht </title>
</head>
<body>
“das was man sieht”
</body>
</html>
HTML – Editor (“Phase 5“)
Zum Erstellen von HTML-Dateien. Man kann leicht über verschiedene und leicht bedienbare Menüpunkte und Symbolleisten eine Internetseite erstellen.
Download: Hier klicken
FileZilla
Ein FTP-Programm (=File Transfer Protocol) Mit diesem Programm können, nach eingeben der jeweiligen Daten, Dateien auf einen Server geladen werden und somit zugänglich im Internet werden. Dabei werden Dateien vom Computer übers rüberziehen einzelner (oder mehrerer) Files z.B. in einen Ordner am Server übertragen.
Netzwelt
Eine Website auf der alle HTML-Codes gefunden werden können und auch zum kopieren bereiutgestellt sind. Gute Möglichkeit um um Codes kennenzulernen oder einfach zu benutzen
FireFox Web Developer
Toolbar im FireFox. Mit verschiedenen Funktionen kann eine Homepage “kontrolliert” werden bzw. einzelne Dinge getestet werden. Es ist möglich Bilder auszublenden oder in Full-Size anzuzeigen, falls diese durch einen Code verkleinert wurde. Auch ist möglich den Code zu überprüfen bzw. Fehler anzuzeigen. Es gibt auch noch viele weitere Funktionen mit denen man einzelne “Bauteile” einer Seite leichter oder genauer betrachten kann.
Letzte Kommentare