Teil 2 (siehe auch Teil 1
)
BilderBilder und Links einfügen geht natürlich genauso wieder mit spitzen Klammern (
tags).
<img> Image steht für Bild.
Aber das reicht nicht. Es fehlt zumindest die Angabe woher man das Bild bekommt, bzw hochlädt. Das <img>-tag erhält noch weitere Informationen/ Attribute. "
src" steht für source=Quelle gefolgt von der Adresse des Bildes in Anführungszeichen:
<img src="Bild01.jpg">
Das gilt, wenn das Bild01 (in diesem Fall ein .jpg) sich im gleichen Verzeichnis befindet, wie die html-Datei, in der es vorkommt, z.B. beides am Schreibtisch oder beides in gleichem Ordner liegt.
Unterschiedliche Ordner gibt man an mit "/" für Unterverzeichnisse, also z.B. am Schreibtisch hat man das html-Dokument und in einem Schreibtisch-Ordner "Bilder" hat man dann das Bild01:
<img src="Bilder/Bild01.jpg">
Wenn sich jedoch andersrum das html-Dokument in einem "tieferen" Verzeichnis befindet (z.B.Schreibtisch/Website) als das Bild (Schreibtisch), muß man zuerst "zurück"-adressieren mit "../" also:
<img src="../Bild01.jpg"> oder falls das Bild01 im Ordner "Bilder"liegt:
<img src="../Bilder/Bild01.jpg">
Wenn sich das Bild ganz woanders befindet, also auf einem anderen Server im Internet, dann brauchen wir die Internet-Adresse (http://www....) wie z.B.:
<img src="http://www.mactechnews.de/data/picture/root/site_logo.jpg"> oder
<img src="http://www.spiegel.de/static/sys/v8/headlines/spiegelonline.gif">
So, Bilder sind also erstmal im Kasten - zumindest rudimentär.
Links/Verweise werden mit <a> gesetzt und mit </a> geschlossen. A wie Anker. Dazwischen steht der Text , den man anklicken kann:
<a>Verweistext</a>
und in die spitzen Klammern zum <a> mit dazu kommt wieder die Adresse rein, mit "href" (Referenz) also so:
<a href="http://www.mactechnews.de"> meine Lieblings-Website</a>
Statt diesem Verweistext kann man aber auch ein ganzes Bild anklickbar machen, indem man das <img>-tag anstelle des Textes setzt:
<a href="http://www.mactechnews.de">
<img src="http://www.mactechnews.de/data/picture/root/site_logo.jpg"
</a>
Wie man sieht, haben manche tags noch mehr Informationen eingebaut, manche sind notwendig andere nicht. Welche tags bzw. html-Elemente welche "Attribute" haben können/müssen es gibt steht hier:
jeweils bei den einzelnen Elementen unter "Attribute".
Wie man auch dort sieht gibt es viele weitere Elemente zu erkunden: Listeneinträge, Formulare etc. Sehr wichtig war vor allem und ist immer noch die Tabelle
. Denn mit dieser kann man mehrspaltig gestalten. Aber die Gestaltung ist nun wirklich ein weiteres, eigenes Thema.
Umlaute etc.Und beinahe hätte ich es vergessen: Un-amerikanische Buchstaben müssen extra codiert werden:
Solche Spezial-Codes fangen mit & an und enden mit ;
z.B. das Ü, also U-Umlaut:
& U u m l ;
oder Eszett:
& s z l i g ;
(lig bedeutet wohl Ligatur o.ä.)
weitere:
& e u r o ; & c o p y ; & c l u b s ; ... € © ♣
sind hier zu finden:
Achtung bitte jeweils die Leerzeichen rauslöschen!Und hier der
html-code zum Analysieren und Ausprobieren, Spaß haben (mit Tabelle!
table):
<html>
<head>
<title>Meine erste Website</title>
</head>
<body bgcolor="yellow">
<h1>Es kann losgehen</h1>
Hallo Leser.
Meine <b>wichtigste</b> Website ist die Mactechnews.<br><br>
<a href="http://www.mactechnews.de"> Hier</a> ist der Link.<br>
Und da das anklickbare Logo:<br>
<a href="http://www.mactechnews.de">
<img src="http://www.mactechnews.de/data/picture/root/site_logo.jpg"
alt="Verweistext"></a>
<br><br>
Und hier noch ne Tabelle:<br>
<table border=2>
<tr><th colspan=3>Tabellen-& U u m l ; berschrift</th></tr>
<tr><td>Zelle 1 </td><td>und eine 2<br>
wobei <i>tr</i> das Ende einer Tabellenzeile einl& a u m l ;utet</td>
<td>Zelle 3 in Zeile 1</td></tr>
<tr><td>und man sollte immer gleichviele einzelne Zellen in jeder Zeile haben</td>
<td colspan=2>es sei denn, man verbindet welche mit <i>colspan</i>
</td></tr>
</table>
</body>
</html>
Soweit mal Teil 2. Soll ja keiner erschlagen werden.
Teil 3