Anzeige
Tutorialbeschreibung

Homepage Workshop #2 - Tag 3

Homepage Workshop #2 - Tag 3

In nur drei Tagen zur fertigen Homepage.

Endlich, es ist soweit; - der legendäre:
Homepage Workshop #2
von eFoX

- nach 9 Monaten ist er fertig!
Ihr lernt hier alles vom Aufbau über CSS + XHTML zur fertigen validen Seite.
Tag 1 - Aufbau
Tag 2 - CSS
Tag 3 - XHTML


Thema:
Die Homepage entsteht


Inhalt:
1. HTML schreiben
2. Die Box-Container einbauen und Text aufbereiten
3. Seiten organisieren


Hallo,

Tag 3, heute wird die Seite aufgebaut. Am Ende ist die Page dann fertig und kann online bestaunt werden, wenn ihr sie ins Netz stellt.
Ihr solltet bis heute euer CSS und die Grafiken von gestern fertig und arbeitsbereit haben.


1. HTML schreiben:

Da es sich um eine kleine Seite handeln wird, die relativ unkompliziert aufgebaut ist, schreibe ich meinen HTML-Quellcode wieder im Editor. Das hat natürlich den Nachteil, dass ich keine eingebaute Fehlerkontrolle habe, aber wer sich seine Page von den Grundzügen aufbauen will, sollte einmal alles ausprobiert haben. Ihr könnt natürlich auch auf andere WYSIWYG-Editoren zurückgreifen. Wichtig hierbei, eure Startseite muss den Namen „Index“ bekommen!


Anm. des Autors:

Mittlerweile benutze ich als Editor den Notepad++
Eigentlich fast schon ein „Muss“, ein Programm, das auf keinem System fehlen sollte!
Er hat zahlreiche Vorteile wie Syntax-Highlighting, Zeilennummerierung, integrierten FTP-Upload, Zeichenkodierung-Umwandlung uvm.


Bilder


Ich speichere also meine Startseite unter dem Namen „index.html“ und stelle die Codierung auf UTF-8; falls ihr darüber mehr wissen wollt: Wikipedia befragen J

Ihr seht, ich habe zwei Ordner angelegt:
- Im Ordner CSS befindet sich mein Stylesheet mit dem Namen „default.css“
- Im Ordner IMAGES befinden sich die zwei Grafiken „body.gif“ und „header.gif“

Jetzt kann es eigentlich losgehen...


1.1 DTD Deklaration

Zu Beginn jedes HTML Dokuments muss man den DTD (=Document Type Definition) festlegen. Diese bestimmt die Grammatik und Syntax der HTML Sprache. Das passiert durch eine sehr einfache Anweisung, die einfach kopiert werden kann und keinerlei Anpassung benötigt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

In Kurzform bedeutet das:
Doctype XHTML 1.1,
Angabe der DTD,
Namensraumdeklaration und Verweis auf diesen, Sprache des Dokumentes auf Englisch


1.2 Der Kopf

Hier können sämtliche Seiteninformationen erfasst werden. Unter anderem: Seitentitel, Autor, der Verweis auf die Zeichenkodierung (wir erinnern uns: UTF-8) und der Verweis auf unser CSS. Kurzum, das Ganze sieht bei mir so aus:

<head>
<title>Page-Workshop #2</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/default.css" type="text/css" media="screen" />
</head>

1 Kopf auf, Infos rein…
2 Seitentitel
3 Angabe, welchen Content die Seite enhält sowie Zeichenkodierung
4 CSS Aufruf und Angabe: Seite für Bildschirme (screen) geeignet
5 Kopf zu


2. Die Box-Container einbauen:

Es war einmal…

Wir müssen jetzt in unser HTML Dokument nur noch den Body einbauen und die HTML Anweisung schließen und schon sieht unsere Seite so aus:


Klick: Index 1.1


Wenn ihr euch an Tag 2 zurückerinnert, habe ich nach dem Body den Wrapper eingerichtet. Er zentriert unsere Seite und sorgt dafür, dass alles am richtigen Platz ist.

Wir fügen nun den Wrapper in den Body ein:

<div id="wrapper">
Hier müssen jetzt noch der Header, Seitenbox, Content und Footer rein!
</div>

Klick: Index 1.2


Hier kann man sehr schön sehen, wie unser Text schon in Verdana 10px dargestellt wird; das haben wir im CSS im Body-Element so festgelegt.


Jetzt fehlt noch der Header; dieser wird zwischen dem Wrapper eingefügt. Auf nachfolgendem Link ist dieser eingebaut und auch der Quellcode bis jetzt eingefügt. Einfach mal im Browser öffnen!

Klick: Index 1.3


Nun folgt die Navigation, und diese war gar nicht so einfach umzusetzen. Habe selbst etwas dran kniffeln müssen, bis sie so funktioniert hat. Im CSS habe ich dafür drei Divs. erstellt, Rückblick:

#nav li {
list-style:none;
display:inline;
padding:7px 0;
}

#nav li a {
padding:7px;
color:#EBEAEA;
text-decoration:none;
}

#nav li a:hover {
background:#333;
border-bottom: 4px solid #E70565;
color:#E70565;
}

Durch (display:inline) wird meine Navigation in einer horizontalen Reihe angezeigt, es erfolgt kein Zeilenumbruch. In den beiden anderen Divs. könnt ihr eigene Farbparameter angeben usw…
Für das Menü benutze ich im Quellcode eine unsortierte Liste (ul) und für jeden Hyperlink beginne ich einen neuen Listeneintrag (li).
Vor der Navigation habe ich noch die Homepage-Überschrift in den Header eingefügt; die Formatierung kommt natürlich aus dem CSS:

<h1>Homepage<strong>Workshop #2</strong></h1>

Warum wird hier (strong) benutzt und nicht (b)? Berechtigte Frage, in Kurzform: Beide Elemente stellen den Text standardmäßig in Fettschrift im Browser dar. Das kann man bei (strong) im CSS ändern, jedoch wird es dazu benutzt, um Text zu betonen, während man (b) dazu benutzt Text einfach nur fetter zu schreiben. Da HTML aber eine Auszeichnungssprache ist und wir den puren Code auch immer so interpretieren können, ist grundsätzlich (strong) die bessere Wahl. Einen interessanten Blog-Beitrag zu diesem Thema findet ihr hier:

http://www.psd-tutorials.de/modules/Forum/blogs/efox/100-b-oder-strong.html

In diesem Schritt habe ich also eine Überschrift eingefügt und das Navigationsmenü in einer horizontalen Reihe angebracht; nun sieht die Seite so aus:

Klick: Index 1.4


<div id="header">
<h1>Homepage<strong>Workshop #2</strong></h1>

<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="#">Seite 2</a></li>
<li><a href="#">Seite 3</a></li>
<li><a href="#">Seite 4</a></li>
<li><a href="#">Seite 5</a></li>
<li><a href="#">Seite 6</a></li>
</ul>
</div>

Oben seht ihr den geänderten Quellcode aus Schritt 4.

Wenn ihr nun ins CSS schaut, sollte als Nächstes die Seitenbox folgen. Deren Einbau ist auch einfach. Ihr müsst den Div. Aufruf innerhalb des Wrappers, nach dem Header einfügen. Wichtig: Im CSS habe ich extra eine Überschrift formatiert (seitenbox_links h2), der restliche, normale Text wird immer innerhalb eines Absatzes (p) geschrieben.

Klick: Index 1.5


Wenn ihr in eurem Browser auf „Quelltext anzeigen“ (Rechtsklick > … ) geht, ich habe probiert den Code klar lesbar zu kommentieren. Kleines Beispiel:

<div id="seitenbox_links">
<h2>Überschrift einfügen</h2>

<p>
Zwischen den Absatzmarken (p), also genau hier soll euer Text hinein. <br />
Benutzt einen neuen Absatz um euren Text zu gestalten oder andere Inhalte darzustellen!
</p>
</div>
Die Seite sieht leider etwas entstellt aus, kommt daher, dass noch Text im Content fehlt! Also binden wir als Nächstes den Content-Div. ein.
Klick: Index 1.6

Hier habe ich euch schon relativ viel in die Seite geschrieben, einfach zur bisherigen Erklärung gedacht und um den Content mit Text zu füllen. Ihr könnt wieder in den Seitenquellcode schauen; anbei ein kleiner Beispielcode:

<!-- Beginn Content, Mitteilung dass Content neben der Seitenbox erscheint -->
<div id="content" class="mit_seitenbox">

<h2>Begrüßende Überschrift</h2>

<p>
Ein kleiner einführender Satz zur Homepage
</p>

<p>
Hier kann ausführlicher Text ggf. zur Erklärung der Homepage hinein
</p>

<h2>Eine weitere Überschrift</h2>

<p>
Wall of Text
</p>

<code>
Zitat
</code>
Hier beispielsweise eine Erklärung zum Zitat <br />
Für „Bildunterschrift-ähnliche“ Erklärungen kein Absatz nach code erstellen!!

<h3>SUB-Unterschrift, ideal um Text aufzulockern</h3>

<p>
Wall of Text
</p>

<code>
Zitat
</code>

<p>
Wall of Text <br />
Hier HTML-Code Angabe mit dem <code> &lt;code&gt; blubb &lt;/code&gt; </code> Element <br />
<b>Im Zitat </b> (im code-Tag) <u>immer</u> die eckigen HTML-Klammern als htmlentity angeben! <br />
Sonst wird der HTML Code nämlich ausgeführt… <br />
Klammer auf = &amp;lt; (<) UND Klammer zu = &amp;gt; (>)
</p>

<h2>Überschrift für Blindtext</h2>

<p>
Blindtext
</p>

</div>

Dieser Code oben sieht dann im Browser so aus:

Klick: Index 1.7


Ihr könnt den Code von oben nun einfach abkopieren oder probieren, ein Stück davon selbständig zu schreiben.
Die wichtigen Sachen habe ich erwähnt, wiederhole es aber noch mal:

- Im Code-Tag immer auf die richtige Klammer-Darstellung achten, bei einzeiligen Zitatunterschriften direkt danach ohne Absatz weiterschreiben, für längeren Text immer einen Absatz nehmen.
- Um HTML-Code anzuzeigen, ohne ihn auszuführen, könnt ihr ihn im (code) schreiben und dabei die Klammern nicht vergessen, umzuwandeln!

Als Letztes wird die Seite noch mit einer Fußnote versehen…

Der Footer wird nach dem Content eingefügt:

Klick: Index 1.8l

<div id="footer">

<p style="float:right;">
Validiertes <a href="http://validator.w3.org/check?uri=referer">HTML</a> &amp;
<a href="http://jigsaw.w3.org/css-validator/">CSS</a>
</p>
<p>
Copyright Verweis mit Datum <a href="#">Hier Homepage-Name eintragen</a>
</p>
</div>

Ihr seht, ich benutze hier wieder (float). Ist ein kleiner Trick an dieser Stelle;, ich möchte die Validation nach rechts ausgerichtet haben und den Copyright-Verweis auf der linken Seite. Durch die (style) Angabe bezieht sich der (float) nur auf diesen einen Absatz!


3. Seiten organisieren:

Einen Grund zum Aufatmen gibt es jetzt! Das Seitengrundgerüst steht!

Aber jetzt kommt der verwaltungsintensivste Teil einer Homepage: die Organisation der einzelnen Unterseiten. An dieser Stelle sei gesagt, der frühere Seitenaufbau mit Frames hatte einen Vorteil, dass man nicht jedes Mal sein Menü komplett neu verlinken muss, wie wir es jetzt machen werden. Klar gibt es auch hierbei andere, einfachere und saubere Möglichkeiten. Im Hintergrund könnte beispielsweise eine CMS laufen („Cushy CMS“). Auch könnte die Navigation in einer Textdatei hinterlegt sein und jedes Mal mit PHP ausgelesen und angezeigt werden. Ist ähnlich simpel wie eine CSS-Datei einzubinden, verlangt allerdings Webspace, der PHP unterstützt.

Ich möchte das für den Einstieg so einfach wie möglich gestalten und verlinke von Hand.

Schön wäre es, jetzt noch die Seite einmal ohne Seitenbox zu sehen. Ich habe schon die Anleitung dazu auf:

Klick: Index 1.6

geschrieben.

Also öffnen wir im Editor unsere index.html und ändern im Navigationsmenü unter „Seite 2“ den Namen auf à Ohne Seitenbox, die # ersetzen wir durch à ohnebox.html, abschließend speichern, index.html nun kopieren und in ohnebox.html ändern.
Die entsprechenden Stellen wie in der Anleitung anpassen und ihr habt eine Seite ohne Seitenbox.

Nachteil: Wie schon oben erwähnt, für jede weitere Seite, die angelegt wird, müssen in allen Seiten die Adressen der Navigationspunkte angepasst werden.
Daher erstellt erst weitere Seiten und Navigationspunkte, wenn ihr sicher wisst, was für Seiten/Rubriken ihr haben wollt!


3.1 Die Validierung

Nachdem ihr nun fleißig eine Seite angelegt habt, wird es Zeit, diese auf Validität zu prüfen. Das W3-Konsortium hat auf seiner Seite den sog. „HTML Validator“, den findet ihr hier:

http://validator.w3.org/

Über die Option Validate by Direct Input könnt ihr euren Quellcode direkt einfügen und prüfen lassen; sollte alles syntaktisch gültig sein, bekommt ihr eine grüne Meldung:

This document was successfully checked as XHTML 1.1!

Im Footer habe ich schon auf die beiden Validatoren für HTML und CSS verlinkt. Ihr könnt jedoch auch kleine Grafiken einbinden, diese werden dann vorgeschlagen.


3.2 Den Tod reit’

Die Seite ist fertig. Nun fehlt nur noch der Upload auf euren Webspace. Das geschieht eigentlich durch FTP, manche Anbieter haben aber auch einen Web-Upload.


Als FTP-Client benutze ich ein Addon für den Firefox: FireFTP
Ihr könnt natürlich jedes x-beliebige Programm dafür nehmen, es gibt praktisch keine Unterschiede und ich möchte kein Glaubenskrieg verursachen.


Ihr solltet irgendwo einen ähnlichen Eintrag wie Connect vorfinden und müsst dann folgende Daten eintragen:
- Die genaue Host-Angabe (erhaltet ihr vom Anbieter), meistens: ftp.anbieter.de
- Login
- Password

Verbindet euch mit dem Webspace, und ihr solltet eine Explorer-ähnliche Ansicht vorfinden. Nun einfach per Drag&Drop eure Ordner und Dateien von der Festplatte auf euren Webspace ziehen. Der Upload beginnt…
Sollte alles hochgeladen sein, könnt ihr euer Werk nun im Browser begutachten. Die genaue Adresse ist euch entweder bekannt oder ihr erfahrt sie durch den Anbieter.


Sollte euch dieses letzte Kapitel zu allgemein formuliert sein, eine große Suchmaschine, die alles weiß, hilft auch gerne weiter.




Ende


Vielen Dank für eure Aufmerksamkeit!
Lob und Kritik könnt ihr mir gerne zukommen lassen auf meiner Statusseite. Bitte Fragen in das Forum stellen, ich komme kaum dazu, so viele Nachrichten zu beantworten!


Spoiler: Homepage Workshop #3 (DTD à XML à XSLT à XHTML)
Den gibt’s aber wahrscheinlich nicht so schnell…

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von rabbitdesign
  • 22.12.2013 - 19:47

Spitze! Vielen Dank dafür!

Portrait von shenja91
  • 05.04.2013 - 00:16

vielen Dank für das aufschlussreiche Tutorial!

Portrait von Abendsegler
  • 05.12.2011 - 20:07

Das Tutorial hat mir endlich weitergeholfen, v.a. bei den Boxen, deren Anordnung usw... Habe mir auch die anderen 2 Tutorials runtergeladen. Sind einige wertvolle Tricks dabei! Vielen Dank!

Portrait von apeljuice
  • 01.12.2011 - 06:21

Das Tutuorial ist echt super!

Portrait von Estielle
  • 23.10.2011 - 15:22

:( Bei mir klappt es nicht. Dabei habe ich doch versucht alle Schritte richtig zu befolgen. Habe die CSS Datei auch im richtigen Ordner abgespeichert, die Website wird trotzdem nur als HTML angezeigt :( Verstehe nicht, was ich falsch mache.
Trotzdem danke für das Tutorial

Portrait von Slyzza
  • 14.07.2011 - 11:45

ist sehr interessant geschrieben und durchaus für anfänger verständlich

Portrait von haribo_
  • 20.06.2011 - 09:17

Danke für das super Tutorial!

Portrait von Speeedy86
  • 28.04.2011 - 21:28

Vielen Dank für deine Mühe, sehr verständlich erklärt.

Portrait von Feddmund
  • 16.04.2011 - 17:01

Danke für die 3 tuts, haben mir sehr geholfen und jetzt kann ich endlich mal an einer HP arbeiten ^^

Portrait von Nazzradam
  • 20.03.2011 - 19:29

Also sehr gutes Tut einfach gut struckturiert, Danke !!!

Portrait von mcmoneysack
  • 11.03.2011 - 16:11

Sehr schön... alles sauber erklärt und leicht verständlich.

Portrait von Shianni
  • 03.03.2011 - 12:57

Jetzt hab ich echt schon an einem Tag alles gelernt xD

Portrait von Kloppy
  • 26.02.2011 - 22:56

Super Tutorials....danke

Portrait von nichtvorhanden
Portrait von Hundefreund88
  • 25.01.2011 - 16:47

Endlich mal ein tutorial, das alles schön strukturiert und klar zusammenfasst. vielen Dank!

Portrait von Iflis
  • 02.09.2010 - 18:19

erschlägt mich als Einsteiger nicht gleich... macht Mut und Lust auf weiter tüfteln...Danke!

Portrait von tourischreck
  • 16.08.2010 - 15:06

Vielen Dank für de Mühe!

Portrait von daunman
  • 06.08.2010 - 15:23

Gefällt mir, einfach super :-)

Portrait von Janine17
  • 25.06.2010 - 12:13

Super Tutorials....danke

Portrait von UltimateX
  • 20.06.2010 - 13:53

Echt brilliant, danke für die Publikation hat mich weitergebracht ;-)

x
×
×