-
Homepage Workshop #2 - Tag 3
16.07.2009 in HTML/CSS von eFoX
- Zum Downloadmanager hinzufügen
- PDF-Datei herunterladen
- Arbeitsmaterialien herunterladen
- Kommentare ansehen (49)
- Kategorie: HTML/CSS
- Erstellt mit Programmversion: CS 3
- Dateigröße (PDF): 1.2 MB
- Dateigröße (Arbeitsmaterial): 57 KB
- Bisherige Zugriffe: 4110
Lieber Gast …
… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.
Vorteile der kostenlosen Mitgliedschaft
Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:
- PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
- Über 2200 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
- Mehr als 500 Video-Trainings als Stream zur Direktanzeige und zum Download
- Abruf von über 1000 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
- Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
- Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.
Reinschnuppern als Gast
Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.
- Download: Spiegelungen 2
- Download: Vektor-Logo (Eidechse)
- Download: Sepia-Vintage-Effekt-Aktion
- Tutorial: Neue Pinsel erstellen leicht gemacht
- Tutorial: Kommerzielle Fotografie 01: Berufswunsch Fotografie
- Tutorial: Linien zum Glühen bringen
- Tutorial: Ballons aus einer Schublade
- Videotraining: CorelDRAW X6 Grundlagen - Hilfsmittel Freihand, 2-Punkt-Linie, Bezier, B-Spline, Polylinie, Stift, 3-Punkt-Kurve
- Videotraining: CorelDRAW X6 Grundlagen: Hilfsmittel Form - Heranziehen, Zurückweisen
- Videotraining: Die Programmoberfläche und der Arbeitsbereich von Adobe InDesign
- Videotraining: Lichtscheinkontureneffekt mit Animation
Das Punktesystem
Einen winzigen Haken gibt es noch. Es gibt bei uns ein Punktesystem. Damit soll erreicht werden, dass Mitglieder sich aktiv in unserer Community beteiligen. Sobald du im Forum schreibst oder Tutorials kommentierst, bekommst du Punkte. Mit diesen Punkten kannst du wiederum Tutorials anschauen oder Downloads herunterladen. Mit der Registrierung bei PSD-Tutorials.de erhältst du ein Startguthaben von 100 Punkten, womit du schon ein gutes Stück weit kommst.
Passend zum Inhalt empfehlen wir unsere:
Photoshop-Workshop-DVD - Webdesign
- Webdesign mit Photoshop: alle erstellten Layouts mit Arbeitsdatei (PSD)!
- Umsetzung erstellter Weblayouts in HTML/CSS
- Tipps & Tricks zum Webdesign in Photoshop und zur Webentwicklung
Kommentare
Weitere KommentareAchtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Tutorial empfehlen
Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)
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.
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> <code> blubb </code> </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 = &lt; (<) UND Klammer zu = &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> &
<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:
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> <code> blubb </code> </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 = &lt; (<) UND Klammer zu = &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> &
<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.
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…
-
Reklame
-
-
- Farbe ins Gesicht
- Hallo erstmal ne
- [CONTEST] CSS-Contests: Worauf habt ihr Lust?
- Wacom Bamboo zu verkaufen!
- InDesign/CS5 unsichtbare €-Zeichen ersetzen
- Fotobüchern
- Umrandung um Textfeld
- Kanten glätten bei meinem Bild oder Vektor?
- After Effects Ram-Vorschau - Problem mit Cache (aktualisert nicht)
- blender render stürzt ständig ab
- jQuery - Größe von einem Frameset ändern?
- [CS5] "Löschen-Mitteilung"
- Zerissenes Foto
- Biete Programmierung Ihres PSD-Designs
- Fehler beim Platzieren von Bildern
- Zeilenumbruch CS4
- Gestaltung eines Logos
- Kaufberatung Drucker
- Dynamische Auswahlliste: Name und ID übergeben
- Adobe Encore - Probleme Schaltflächen Unterbild
-
-
Aktuelles Commag
Anzeige
-
DarkSide
-
Anzeige
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!
geändert von Abendsegler am 05.12.2011 - 20:09
apeljuice
01.12.2011 - 06:21
Das Tutuorial ist echt super!
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
geändert von Estielle am 23.10.2011 - 15:23
Slyzza
14.07.2011 - 11:45
ist sehr interessant geschrieben und durchaus für anfänger verständlich
haribo_
20.06.2011 - 09:17
Danke für das super Tutorial!
Speeedy86
28.04.2011 - 21:28
Vielen Dank für deine Mühe, sehr verständlich erklärt.
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 ^^
Nazzradam
20.03.2011 - 19:29
Also sehr gutes Tut einfach gut struckturiert, Danke !!!
mcmoneysack
11.03.2011 - 16:11
Sehr schön... alles sauber erklärt und leicht verständlich.
Shianni
03.03.2011 - 12:57
Jetzt hab ich echt schon an einem Tag alles gelernt xD
Kloppy
26.02.2011 - 22:56
Super Tutorials....danke
nichtvorhanden
26.02.2011 - 17:28
Super gemacht! Vielen dank!
Hundefreund88
25.01.2011 - 16:47
Endlich mal ein tutorial, das alles schön strukturiert und klar zusammenfasst. vielen Dank!
Iflis
02.09.2010 - 18:19
erschlägt mich als Einsteiger nicht gleich... macht Mut und Lust auf weiter tüfteln...Danke!
tourischreck
16.08.2010 - 15:06
Vielen Dank für de Mühe!
daunman
06.08.2010 - 15:23
Gefällt mir, einfach super :-)
Janine17
25.06.2010 - 12:13
Super Tutorials....danke
UltimateX
20.06.2010 - 13:53
Echt brilliant, danke für die Publikation hat mich weitergebracht ;-)
Beedee1308
21.05.2010 - 13:32
Großartig...vielen Dank für die viele Mühe!
Zicco
02.05.2010 - 16:39
Auch teil 3 ist wieder sauber beschrieben und klasse mit ildern bestückt. vielen dank für die mühe !