Webprogrammierung lernen

Ein Html Template programmieren

Jetzt gehts aber richtig los, wir machen jetzt mal eine richtige Html Seite, die wir dann als Template für eine komplette Homepage verwenden können.

Dafür habe ich in meinem Grafikprogramm ein Demodesign entworfen. Profiwebdesigner arbeiten mit Adobe Photoshop, was aber leider ziemlich teuer ist. Eine günstigere alternative ist Adobe Photoshop Elements. Wenn Du Dir ein kostenloses Grafikprogramm runterladen willst, dann nimm einfach Gimp, den Download findest Du hier:
http://www.gimp.org/downloads/

Hier also mein Demodesign:
Demodesign

Das Bild sieht etwas grieselig aus, weil es eigentlich 1024x786 Pixel groß ist und ich es aber damit es hier ganz angezeigt wird skaliert habe. Das sollte man eigentlich nicht machen, geht aber hier nicht anders. Wenn Du das Bild mal in der richtigen Größe sehen willst, dann mach mit Strg-N ein neues Browser Fenster auf und kopier Dir folgende Adresse in die Browser Adresszeile:
http://www.webprogrammierung-lernen.de/media/demo_homepage.jpg
Mit der rechten Maustaste und im Menü dann Grafik speichern unter... kannst Du Dir die Datei abspeichern.

Entweder Du speicherst Dir meine Demodatei ab, oder verwendest einfach ein eigenes Design. Als erstes brauchen wir für das Homepage Template die Bannergrafik. Dazu müssen wir den Banner mit dem Grafikprogramm ausschneiden und abspeichern.
Du kannst aber auch einfach meinen Banner verwenden:
Homepage Banner
Das Bild ist wieder skaliert und Du kannst es mit der rechten Maustaste und dann Grafik speichern unter abspeichern. Damit Du den Banner für die Homepage verwenden kannst, musst Du jetzt unter C:\xampp\htdocs\xampp einen neuen Ordner anlegen und den Banner dort reinkopieren.
Ich nenne den Ordner für Bilder immer images, bei mir ist der Pfad dann also:
C:\xampp\htdocs\xampp\images

Jetzt kannst Du Notepad++ aufmachen und es geht los mit Html.
Als erstes brauchen wir ein Grundgerüst für eine Html Seite. Das ist praktisch immer gleich und der Quelltext dafür sieht so aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Der Titel der Seite</title>
</head>
<body>


</body>
</html>


In der ersten Zeile von jedem Html Dokument steht immer das mit dem !DOCTYPE. Das sagt dem Browser um was für ein Dokument es sich handelt.

Dann kommen html, head und body. Alles was in einem Html Dokument in so spitzen Klammern steht nennt man Tags. Und meistenst gibt es zwei davon, einen Start- und Endtag.
Die Tags sagen dem Browser was er mit dem Quelltext zwischen den Tags machen soll.

Für Dich sind erstmal nur die zwei body Tags wichtig, da muss nämlich jetzt der eigentliche Quelltext rein. Schreib da jetzt mal folgenden Quelltext rein:

<img src="images/banner_homepage.jpg" border="0">

Das ist das Tag um ein Bild in einem Html Dokument darzustellen.

Jetzt kannst Du den Quelltext als template.html abspeichern und in Browser mit folgender Adresse aufrufen:
http://localhost/xampp/template.html

Das Ergebnis sollte dann so aussehen:

Webdesign Nürnberg