[XHTML] Wie beginne ich richtig?

[moep.at]

Hallo,
also ich fang direkt mal an

Und zwar würd ich mir gern ne komplette kleine Seite selbst machen, also Design udn halt den XHTML-Code dazu.

Nur wie beginne ich richtig? zuerst das Design machen? oder zumindest mal grob bzgl der Größe?
oder direkt mal ein css mit Seiten Aufbau usw?

Wie das design aussehen wird hab ich schon im Kopf und ich könnte das css auch schon dementsprechend beginnen?!

Was ist geschickter?
(hab noch nie ne komplette page selbst gemacht immer mit fertigen templates usw gearbeitet)


Danke schonmal im voraus!

mfg
moep.at

 

[Kasn]

mit XHTML wuerde ich nicht anfangen. sondern gleich auf HTML5 gehen.

Das wichtigste ist die Semantik, also dass der HTML den Inhalt strukturiert. Wann nehme ich eine Tabelle, wann eine OL und wann eine UL. Welches Element beschreibt den Inhalt am besten.

Am besten erstmal nackt anfangen, ohne CSS und alles und den Aufbau strukturieren. Was soll denn alles auf die Seite?

 

[moep.at]

Soll nur ne ganz einfache Seite werden, meine Vorstellung:

Oben ein Banner, darunter die Navigationsleiste mit 4 Buttons und darunter Text.

ich brauch das ganze für mein Studium im Text wird einfach nur ein Thema abgearbeitet, also vlt bissl mit Auflistungen usw aber ansonsten werd ich wohl nicht über Überschriften und paar kursive und fett gedruckte elemente drüber kommen

Wenn ich ganz motiviert bin bau ich mir noch eine kleine Bildgalerie rein(selbstgemacht natürlich).


Also sollte ich wirklich einfach mal mit dem html Code beginnen und danach erst mit formatierung und layout rumspielen?


mfg
moep.at

 

[Vermillion]

Ich würd so machen:

Mit HTML ein Grundgerüst bauen.(Das Bannerbild eibinden, einen Div-Container für die Navi, einen Für den Text, Eine Fusszeile, usw.)
Dann fügst du einen Text (ein Beispieltext irgenwoher oder vielleicht schon der richtige Inhalt. Spielt ja keine Rolle).

Und dann beginnst du das ganze mit CSS "schön aussehen" zu lassen. (Schriftart anpassen, Position der Container Festlegen, Hover Effekte, etc.)

 

[moep.at]

Ok, Danke schonmal!


vlt hat ja noch jemand iwelche tipps wie man an die Sache so rangeht


mfg
moep.at

 

[A R 9 9]

Einfach und schneller: eine dir zusagende Homepage downloaden, vorhandene Grafiken löschen (evtl. durch eigene ersetzen) und der Seite DEINEN Feinschliff geben.

 

[moep.at]

:P

hehe, das wär natürlich das einfachste

würds aber gern selber machen, komplett, hab eh mehr als genug zeit dafür
diese 3 Seiten muss ich erst im Jänner fertig haben

 

[Kasn]

Mit HTML ein Grundgerüst bauen.(Das Bannerbild eibinden, einen Div-Container für die Navi, einen Für den Text, Eine Fusszeile, usw.)
Dann fügst du einen Text (ein Beispieltext irgenwoher oder vielleicht schon der richtige Inhalt. Spielt ja keine Rolle).

das ist leider so ziemlich komplett falsch. da ist null Semantik dabei.

Also: <h1> als uebeschrifft mit dem Seitentitel. per CSS wird dann der text ausgeblendet (text-ident auf -10000); und das Bannerbild wird der Hintergrund. Das Menue mit den Links wird eine <ol> Ordered List. Den Hauptbereich wuerde ich das neue <section> Tag packen. Dort den Inhalt mit <h2> und <h3> struktuieren und die einzelnen absaetze per <p> umschliessen. Und gut guter letzt unten noch ein <footer>

 

[fast forward]

Kleine Anmerkung: Beginne bitte nicht mit "Tabellen", sondern nutze immer div's!

 

[pajaa]

@Kasn,
eine ol fürs Menü und die Durchnummerierung per CSS ausblenden? ist das semantisch richtig? Das war mir nicht bekannt.

edit>
Eine Tabelle macht Sinn, wenn man eine Tabelle braucht. Die mit Divs nachzubauen ist schlicht falsch.

 

[Kasn]

Kleine Anmerkung: Beginne bitte nicht mit "Tabellen", sondern nutze immer div's!

halbrichtig. Benutze immer das passende HTML Tag fuer alle Zwecke. Immer <div> ist auch keine Loesung

@Kasn,
eine ol fürs Menü und die Durchnummerierung per CSS ausblenden? ist das semantisch richtig? Das war mir nicht bekannt.

ja. OL sagt ja ansich nur dass die Reihenfolge der Elemente in der Liste so beabsichtigt ist wie sie im Quellcode steht.

 

[moep.at]

Also die Navigationsleiste würde ich, nach meinem jetzigen wissenstand über eine

<ul id="nav">
<li>....

machen... und dann per css die breite der einzelnen Spalten definieren und dann dort meine Buttons drin platzieren mit nem hover....


bin ich da komplett auf nem holzweg?

mfg
moep.at

 

[Kasn]

sollte IMHO ol statt ul sein, sonst passt das

 

[moep.at]

hmm man möge mich jetzt schlagen, aber is es für ne Navigationsleiste nicht egal ob ich ne unsortierte oder sortierte Liste benutze?

Ich will jetzt keine kritik oder sontas ausüben mich intressiert einfach der Hintergrund, warum du dich für ne ol entscheidest?


mfg
moep.at

 

[Kasn]

die Reihenfolge der Menuepunkte ist doch bewusst so gewaehlt, also wurde sie sortiert.

 

[moep.at]

gutes argument
Danke!

mfg
moep.at

 

[Vermillion]

das ist leider so ziemlich komplett falsch. da ist null Semantik dabei.

Das mag sein ist aber eine einfache Methode um sich schnell eine Webseite zu bauen. Wobei es natürlich schöner ist wenn man gleich alles richtig baut.

Also: <h1> als uebeschrifft mit dem Seitentitel. per CSS wird dann der text ausgeblendet (text-ident auf -10000); und das Bannerbild wird der Hintergrund.

Wieso das? SEO? Sonst gäbs ja noch das "alt" Attribut für Bilder... Die Frage ist nicht provokativ. ich verstehe es nicht.

 

[Kasn]

Wieso das? SEO? Sonst gäbs ja noch das "alt" Attribut für Bilder... Die Frage ist nicht provokativ. ich verstehe es nicht.

maschinenlesbarkeit. Die Headergrafik hat ja keinerlei inhaltliche Relevanz fuer die Seite. Warum das nicht mit dem richtigen Seitentitel kombinieren den man schon dabei haben sollte.
"alt" ist ja dafuer gedacht um Inhaltsbilder beschreiben zu koennen.

 

[moep.at]

Hallo,
ich hab mir mal erlaubt meine Pag ezu zippen und hier anzuhängen, vlt kann ja mal jemand drüber schaun und mir noch paar tipps geben (is auch nur eine seite inklusive css) würd gern meinen stil verbessern!

zudem hab ich ein kleines probelm mit meinem css, anscheinend, und zwar hab ich unten, über dem footer, einen schwarzen balken der für mich nicht wirklich eine daseinsberechtigung hat und ich hab leider keinen plan woher der kommt, bzw warum er da is...

hab schon mit firebug versucht jede einzelne Zeile im css zu sperren der balken war immer da!


mfg
moep.at