HTML Anfänger Kurs

Administrator Anmeldedatum: 15.04.2007 Beiträge: 100

Hier der Grundaufbau einer html-Seite. Er besteht aus dem Head und dem Body
Wir wollen nun das unser Inhalt zentriert im Browser erscheint. Dazu schliessen wir den zu zentrierenden Inhalt in den Tag <center> ein!

Code:

<DOCTYPE>
<html>
<head>
<title>Unsere eigene Homepage</title>
</head>
<body><center>Unser Seiteninalt der eigenen Homepage</center></body>
</html>

Unsere Homepage sieht nun so aus

Administrator Anmeldedatum: 15.04.2007 Beiträge: 100

Unsere Schrift soll nun fettgedruckt erscheinen. Dazu schiessen wir diesen Teil in den Tag ein.

Code:

<doctype>
<html>
<head>
<title>Unsere eigene Homepage</title>
</head>
<body><center>Unser Seiteninalt der eigenen Homepage</center></body>
</html>

Unsere Homepage sieht nun so aus

Administrator Anmeldedatum: 15.04.2007 Beiträge: 100

Nun soll der Text abschliessend noch unterstrichen erscheinen, da wir diesen Teil in den folgenden Schritten nur noch als Überschrift verwenden und weiteren Text hinzufügen wollen. Dazu schliessen wir in den Tag ein.

Code:

<doctype>
<html>
<head>
<title>Unsere eigene Homepage</title>
</head>
<body><center>Unser Seiteninalt der eigenen Homepage</center></body>
</html>

Unsere Homepage sieht jetzt so aus

Administrator Anmeldedatum: 15.04.2007 Beiträge: 100

Es wird nun ein Absatz eingefügt mit dem Tag (Dieser Tag muss nicht geschlossen werden!!) und ein Seitentext wieder zentriert darunter eingefügt.

Code:

<doctype>
<html>
<head>
<title>Unsere eigene Homepage</title>
</head>
<body><center>Unsere Seitenüberschrift der eigenen Homepage</center>

<center>Wir erstellen unsere eigene Homepage, mit Hilfe des Tutorials von www.eigene-homepage.de</center>

</body>
</html>

Unsere Homepage sieht jetzt so aus

Administrator Anmeldedatum: 15.04.2007 Beiträge: 100

Nun soll eine neue Zeile im Text vor "www.eigene-homepage.de beginnen. Dazu benutzen wie den Tag (dieser muss wie der Tag nicht geschlossen werden.)

Code:

<doctype>
<html>
<head>
<title>Unsere eigene Homepage</title>
</head>
<body><center>Unsere Seitenüberschrift der eigenen Homepage</center>

<center>Wir erstellen unsere eigene Homepage, mit Hilfe des Tutorials von www.eigene-homepage.de
und es ist garnicht so schwer.</center>

</body>
</html>

Unsere Homepage sieht nun so aus

Administrator Anmeldedatum: 15.04.2007 Beiträge: 100

Das sieht alles noch ziemlich langweilig aus, also bringen wir etwas Farbe ins Spiel. Die Überschrift soll blau und der Text grau erscheinen. Dazu benutzen wie den Tag für blau und für dunkelgrau. Eine Tabelle mit den Farben, findet Ihr hier.

Code:

<doctype>
<html>
<head>
<title>Unsere eigene Homepage</title>
</head>
<body><center>Unsere Seitenüberschrift der eigenen Homepage</center>

<center>Wir erstellen unsere eigene Homepage, mit Hilfe des Tutorials von www.eigene-homepage.de
und es ist garnicht so schwer.</center>

</body>
</html>

Unsere Homepage sieht nun so aus

Administrator Anmeldedatum: 15.04.2007 Beiträge: 100

Nachdem wir nun die Schrift "gefärbt" haben, können wir auch den Hintergrund farbig gestalten in dem wir dem <body>-Tag eine Eigenschaft zuordnen. Wir ändern <body> in<body> und der Hintergrund wird gelb.

Code:

<doctype>
<html>
<head>
<title>Unsere eigene Homepage</title>
</head>
<body><center>Unsere Seitenüberschrift der eigenen Homepage</center>

<center>Wir erstellen unsere eigene Homepage, mit Hilfe des Tutorials von www.eigene-homepage.de
und es ist garnicht so schwer.</center>

</body>
</html>

Unsere Homepage sieht nun so aus

Administrator Anmeldedatum: 15.04.2007 Beiträge: 100

Wir haben nun zwar schon eine Seite, aber um verschiedene Elmente zu platzieren (wie z. B Bilder) müssen wir eine Tabelle einfügen .Der Code des Grundaufbaus einer Tabelle sieht immer so aus.

Zitat:

<table> = Die eigentliche Tabelle
<tr> = Die Tabellenzeile
<td> = Die Tabellenspalte
Diese Tags müssen immer geschlossen werden. Dabei ist auf die Reihenfolge zu achten. Also nicht so sondern wie oben.

Zitat:

]<table>
<tr>
<td></tr> -falsch
</td> -falsch
</table>

Wir fügen eine Tabelle mit zwei Zeilen und drei Spalten ein und setzen unseren Text in die obere Zeile mittlere Spalte. Um zu verdeutlichen wie die Tabelle aufgebaut ist habe ich in diesem Beispiel die einzelnen Zellen beschriftet. Zusätzlich wurde der Tabelle ein Rahmen zugefügt um zu zeigen wie die Tabelle aussieht , daß geschieht mit der border-Eigenschaft <table>
Setzen wir diese Eigenschaft auf 0 dann ist der Rahmen verschwunden.

Zudem geben wir mit der Eigenschaft width="100%" die Tabellenbreite vor. 100% vom Browserfenster. Verkleinert mal das Fenster des Browsers und Ihr seht wie die Tabelle in unserer Beispielhomepage, sich der Größe des Browserfensters anpasst.

Zitat:

<doctype>

<html>

<title>Unsere eigene Homepage</title>

</head>

<body>

<center>Unsere Seitenüberschrift der eigenen Homepage</center>

<table>
<tr>
<td>Zeile1/Spalte1</td>
<td><center>Wir erstellen unsere eigene Homepage, mit Hilfe des Tutorials von www.eigene-homepage.de
und es ist garnicht so schwer.</center></td>
<td>Zeile1/Spalte3</td>
</tr>
<tr>
<td>Zeile2/Spalte1</td>
<td><center>Zeile2/Spalte2</center></td>
<td>Zeile2/Spalte3</td>
</tr>
</table>

</body>

</html>

Unsere Homepage sieht jetzt so aus

Administrator Anmeldedatum: 15.04.2007 Beiträge: 100

Wir fügen nun ein Bild ein, in die mittlere Spalte, untere Zeile der Tabelle.

Das Bild laden wir zunächst auf unseren Webspace hoch und es befindet sich nun unter www.eigene-homepage.de im Ordner "tutorial" und heisst "Beispielbild.jpg"

Der Tag um es einzubinden sieht so aus.

Code:

<img>

Groß-und Kleinschreibung unbedingt beachten!!

Prüfen ob das Bild gefunden wird könnt Ihr indem Ihr auf den folgenden Link klickt

http://www.eigene-homepage.de/tutorial/Beispielbild.jpg

So sieht nun der gesamte Quelltext unserer Homepage aus.

Code:

<doctype>

<html>

<title>Unsere eigene Homepage</title>

</head>

<body>

<center>Unsere Seitenüberschrift der eigenen Homepage</center>

<table>
<tr>
<td>&nbsp</td>
<td><center>Wir erstellen unsere eigene Homepage, mit Hilfe des Tutorials von www.eigene-homepage.de
und es ist garnicht so schwer.</center></td>
<td>&nbsp</td>
</tr>
<tr>
<td>&nbsp</td>
<td><center><img></center></td>
<td>&nbsp</td>
</tr>
</table>

</body>

</html>

Unsere Homepage sieht nun so aus

Administrator Anmeldedatum: 15.04.2007 Beiträge: 100

Und nun fügen wir in die linke Spalte erste Zeile eine Navigationsleiste ein.

Wir verlinken dabei auf die vorangegangenen Ergebnisse unserer Homepage

Der Tag für einen Link sieht so aus

Code:

<a> Hier der Text des Links</a>

Wir wollen aber das der Link beim anklicken ein neues Fenster öffnet und fügen die Eigenschaft "Target" hinzu. In unserem Fall _blank (neues Fenster) Schreibweise bitte beachten!!

Code:

<a> Hier der Text des Links</a>

Der gesamte Quelltext sieht nun so aus

Code:

<doctype>

<html>

<title>Unsere eigene Homepage</title>

</head>

<body>

<center>Unsere Seitenüberschrift der eigenen Homepage</center>

<table>
<tr>
<td>
<a>Schritt 1</a> 
<a>Schritt 2</a> 
<a>Schritt 3</a> 
<a>Schritt 4</a> 
<a>Schritt 5</a> 
<a>Schritt 6</a> 
<a>Schritt 7</a> 
<a>Schritt 8</a> 
<a>Schritt 9</a> 
<a>Schritt 10</a> 
</td>
<td><center>Wir erstellen unsere eigene Homepage, mit Hilfe des Tutorials von www.eigene-homepage.de
und es ist garnicht so schwer.</center></td>
<td>&nbsp</td>
</tr>
<tr>
<td>&nbsp</td>
<td><center><img></center></td>
<td>&nbsp</td>
</tr>
</table>

</body>

</html>

[url=http://www.eigene-homepage.de/tutorial/index10.html]
Unsere Homepage sieht nun so aus[/url]

Administrator Anmeldedatum: 15.04.2007 Beiträge: 100

Wir haben nun schon einiges kennengelernt und ich hoffe das es einigermassen verständlich herübergekommen ist. Darum ist es vielleicht nicht schlecht, wenn Ihr mal folgende Hompage selber bastelt. Tippt dabei den gesamten Quelltext von Hand (z.B im Windows Notepad das Ihr unter Progamme-->Zubehör---> Editor auf Eurem Computer findet. Das ist zwar aufwendig aber nur so bekommt Ihr ein Gefühl dafür was Ihr macht und wo sich gerne Mal ein Fehler einschleicht.

Aufgabe

Erstellt eine Seite mit folgenden Eigenschaften
Überschrift zentriert und fett
Hintergrund schwarz
Schriftfarbe rot,
Layout mit einer Tabelle mit 3 Spalten und 6 Zeilen mit Rahmen und 50% des Browserfensters.
Das Beispielbild aus unserer Seite soll in driiten Zeile, dritte Spalte eingefügt werden.
In der Linken Spalte soll in jeder Zeile ein Link platziert werden der in einem neuen Fenster öffnet
und zwar
Link Zeile1 zu Ebay
Link Zeile2 zu Google
Link Zeile3 zu eigene-homepage.de
Link Zeile4 zu Lycos
Link Zeile5 zu Yahoo
Link Zeile6 zum Hilfeforum von eigene-homepage.de
In jeder leeren Zelle soll das Wort "Test" stehen

Wenn Ihr das gemacht habt, speichert die Datei auf Eurem Computer und benennt die Endung von .txt auf .htm oder .html um, ladet die fertige Datei hier auf meinen Webspace und kopiert den Link der nach dem hochladen erscheint in Euren Browser, um zu prüfen ob alles richtig ist. Ihr könnt die Datei ruhig mehrmals zum testen hochladen. Die Datei muss die Endung .html oder .htm haben z. B. beispiel.html

Bei Fragen postet immer den Link zu Eurer Datei mit, sonst kann ich nicht sehen was schiefgelaufen ist und zwar immer den des letzten Versuchs den Ihr hochgeladen habt.

Die Datei könnt Ihr hier hochladen der Link wird danach angezeigt.

Alle TAGs die Ihr benötigt wurden in diesem Tutorial behandelt. Es macht wenig Sinn weitere Tags kennenzulernen, ohne dieses Beispiel selber geschrieben zu haben. Wer das hinbekommt hat schon eine Menge gelernt und kann z.B bei Ebay bereits seine Auktionen besser gestalten. Alle Fragen dazu werde ich möglichst schnell beantworten.

Administrator Anmeldedatum: 15.04.2007 Beiträge: 100

So sollte das Ergebnis aussehen wenn Ihr alles richtig gemacht habt