Thema: Aussehen, Code und Aufbau bewerten (WYSIWYG)

Zitat von MH223

Soll das heissen, dass ich auch z.B. einen h1-Tag oder einen img-Tag wie einen DIV positionieren kann ?????

Natürlich. Wie alle Elemente. Nur Block- und Inline-Elemente unterscheiden sich geringfügig.
Warum sollte es auch anders sein? Das ist ja der Witz an allem. HTML nur für die logische Inhaltsauszeichnung und allein CSS für das Aussehen. Niemals setzt Du ein HTML-Tag, weil Du damit ein bestimmtes Aussehen erreichen willst.

Auweia, da is was total an mir vorbeigegangen,

Das alles Entscheidende

OK, genehmigt

Danke untertänigst!

Da Efchen und die anderen schon fast alles gesagt haben, hier noch ein paar kleine Dinge die ich bisjetzt noch ungeändert vorfinde.

<META http-equiv="X-UA-Compatible" content="IE=8"/>
<META NAME="Title" CONTENT="Hobbies von Max Herla"/>
<META http-equiv="Language" content="de"/>
<META NAME="Author" CONTENT="Max Herla"/>
<META NAME="Description" CONTENT="private Webseite"/>
<META NAME="Robots" CONTENT="all, index, follow"/>

In allen neueren HTML versionen werden die Tags klein geschrieben. Ersetze also die Metas alle mit
<meta name=" und auch CONTENT sollte lieber klein geschrieben werden. Sowie alle anderen Tags. Bei /> macht man normal vorher ein leerzeichen. Also "Max Herla" />

<ul class="navlist">

<li><a class="selectable" href="index.php?seite=max herla&stil=1" onFocus='if(this.blur)this.blur()'>STARTSEITE</a></li>
<li><a class="selectable" href="index.php?seite=hobbies&stil=1" onFocus='if(this.blur)this.blur()'>HOBBIES</a></li>
<li><a class="selectable" href="index.php?seite=blog&stil=1" onFocus='if(this.blur)this.blur()'>BLOG</a></li>
<li><a class="selectable" href="index.php?seite=chronik max&stil=1" onFocus='if(this.blur)this.blur()'>MAX</a></li>
<li><a class="selectable" href="index.php?seite=chronik mary&stil=1" onFocus='if(this.blur)this.blur()'>MARY</a></li>
<li><a class="selectable" href="index.php?seite=linkseite&stil=1" onFocus='if(this.blur)this.blur()'>LINKS</a></li>
<li><a class="selectable" href="index.php?seite=impressum&stil=1" onFocus='if(this.blur)this.blur()'>IMPRESSUM</a></li>
<li><a class="selectable" href="index.php?seite=privat&stil=1" onFocus='if(this.blur)this.blur()'>PRIVAT</a></li>
<li><a class="selectable" href="phpbook" target="_blank" onFocus='if(this.blur)this.blur()'>G&Auml;STEBUCH</a></li>
</ul></div>

Versuch doch am besten noch einrückungen an deinem Quellcode vorzunehmen.
Die li's einfach etwas weiter mit der Tab taste einrücken, das macht das ganze Ordentlicher.

Außerdem:
Hier ein gutes Beispiel bei der liste.
Dein Aufbau ist so:

<div id="menue">
<ul class="navlist">
[... Hier deine ganze Listenpunkte li's ...]
</ul>
</div>

Doch das ist falsch, und unnötig. Wieso nutzt du <div> um <ul>? Du kannst auch <ul id="menue" class="navlist"> schreiben. Das Div würde dann ganz wegfallen!

<div id="headline">
<h1>Nur eine Empfehlung</h1>
</div>

Nein nein nein. Das div fällt weg, und h1 bekommt die id "headline".
Außer, außer dem h1 kommt noch anderer text zwischen das div.

<div id="footline"><h2>W e b d e s i g n&nbsp;&nbsp;&nbsp; v o n&nbsp;&nbsp;&nbsp; M a x &nbsp;H e r l a</h2>

Das h2 kann die id "footline" bekommen. Div fällt weg.

<h1>
<br /><br />
Herzlich Willkommen auf meiner Webseite.<br /><br />
Sie ist im Eigenbau entstanden und somit nicht auf alle Eventualit&auml;ten vorbereitet.<br />
Getestet habe ich sie mit IE8 , Firefox 3.6 , SeaMonkey 2.0.2 , Opera 10.01 , Safari 3.1 und Google Chrome 4.1 .<br />
Da ich mich aber mit den Ungereimtheiten der einzelnen Browser (noch) nicht so auskenne, sollten meine Besucher einiges beachten:<br /><br />
... um Verzerrungen der Bilder zu vermeiden, sollte die Bildschirmaufl&ouml;sung optimalerweise auf 1440 x 900 eingestellt sein ( zumindest irgendwo bei 1,6:1 )<br /><br />... um in den vollen Genuss meiner Bilder zu kommen, sollte auch die Browseransicht auf Vollbild geschaltet werden, <br />
( an die weniger Versierten, das macht man mit der Taste F11 )<br /><br />
... auf verschiedene Designs kann man in der Fussleiste umschalten.<br />
<br /></h1>

Du zeichnest einen so lange Text als eine der allerwichtigsten überschriften der Seite aus? (h1)?
Falsch. Einen Text zeichnet man mit <p> aus. Genauer gesagt Absätze zeichnet man mit <p> aus.

Und die <br />'s sind schlecht. Willst du auf die nächste Zeile umspringen okay.
Aber fürwas 2 <br />'s?

<br /><br />

Falsch. Lieber den Zeilenabstand des Absatzes (das ein p werden soll) erhöhen.
Und soll nur eine einzige Zeile mehr abstand haben, machst du 2 absätze.
<p class="mabstand">Dein Text</p>
<p>Zeile unter dem Text</p>

Und der klasse mabstand gibst du nun ein padding nach unten.

HTML wird NIE für das Design verwendet. Wenn du die HTML schreibst, achtest du nur darauf
den Text deiner Seite, den KOMPLETTEN INHALT so auszuzeichnen, das er die
Tags bekommt, die dafür gedacht sind.
Und das DESIGN spielt KEINE ROLLE! Erst danach setzt du dich an die CSS dateien
und änderst dort, mithilfe von IDs und Klassen im HTML code das Design.

Und zum Design gehören auch abstände von absätzen oder Listen.

Danke an alle, die mir so geholfen haben,
Shrax, vlt. hast du ja mein Erstaunen registriert, dass man auch ein <h1> positionieren kann, meine Art und Weise, HTML zu lernen hat dieses Wissen bisher verhindert , aber man lernt ja...

Das mit dem <h1 id="headline"> hab ich mittlerweile schon begriffen und ausprobiert, ich werde das auch umsetzen, ich muss bloss vorsichtig zu Werke gehn, sonst versau ich mir meinen ganzen Code.

Das mit der Semantik hab mir auch schon mal verinnerlicht, bin dabei zu der Erkenntnis gelangt, dass eine darauf getrimmte Seite auch absolut ohne CSS verständlich funktionieren muss.

Das Formatieren des Quellcodes sehe ich als Problem, weil ich den über PHP erzeuge und da tu ich mir schwer, mit den vielen echos das Ganze in den Griff zu bekommen. Aber das sind glaub ich erst mal Nebensächlichkeiten.

Jetzt werd ich erst mal versuchen, Semantik rein- und DIV's rauszubekommen, da hab ich genug zu tun.

Hab mir sogar heute noch (endlich mal) ein Buch über Webprogrammierung gekauft und mich gewundert, was es so alles gibt

Ach ja, noch eine ganz andere Frage,
wenn ich das nun alles geändert habe, was ja bestimmt eine Weile dauert, muss ich dann einen neuen Thread hier einstellen oder kann ich diesen hier nur nochmal beantworten um ihn wieder aktuell zu machen. In den Vorschriften hier hab das nicht ganz begriffen.

Shrax, vlt. hast du ja mein Erstaunen registriert, dass man auch ein <h1> positionieren kann, meine Art und Weise, HTML zu lernen hat dieses Wissen bisher verhindert , aber man lernt ja...

Ja habe ich. Ich wollte dir, da ich vom Lernen für die Schule eh gerade Pause gemacht habe, nur noch ein paar direkte Beispiele geben was du ändern solltest/kannst. So hast du schonmal ein paar direkte Punkte, was du alles machen kannst.

Das Formatieren des Quellcodes sehe ich als Problem, weil ich den über PHP erzeuge und da tu ich mir schwer, mit den vielen echos das Ganze in den Griff zu bekommen. Aber das sind glaub ich erst mal Nebensächlichkeiten.

Da kann ich leider auch nicht helfen. Php kann ich (noch) nicht.

Ach ja, noch eine ganz andere Frage,
wenn ich das nun alles geändert habe, was ja bestimmt eine Weile dauert, muss ich dann einen neuen Thread hier einstellen oder kann ich diesen hier nur nochmal beantworten um ihn wieder aktuell zu machen. In den Vorschriften hier hab das nicht ganz begriffen.

Ich denke solange du die Website allgemein verbesserst kannst du jederzeit hier weiterschreiben. Denn nach deiner verbesserung, können wir dir hier natürlich auch gleich sagen, was danach noch verbessert werden kann.


Nur für sehr Spezielle fragen (Als beispiel würde mir einfallen, du möchtest jetzt ein LoginSystem in php einbauen und fragst wie man das realisiert) solltest du der Übersichtlichkeit halber ein neues Thema aufmachen.

Das mit dem <h1 id="headline"> hab ich mittlerweile schon begriffen und ausprobiert, ich werde das auch umsetzen, ich muss bloss vorsichtig zu Werke gehn, sonst versau ich mir meinen ganzen Code.

Da kann ich dir aus eigener Erfahung einen Tipp geben.
Wenn die Website nicht unbedingt sehr viel Speicherplatz auf dem PC braucht, mach ich immer ein Backup (Ordner mit heutigen Datum im namen) der ganzen Website, oder des Ordners in dem ich Dateien bearbeite.

Wenn dann was nichtmehr geht kann man mit den Backups vergleichen und dinge rückgängig machen.

Zitat von MH223

Shrax, vlt. hast du ja mein Erstaunen registriert, dass man auch ein <h1> positionieren kann

Es verwundert mich nur immer wieder, wieso jemand - und das machen ja viele - so lernt, wo geschrieben steht, dass das nicht geht. Es wäre doch bodenlos unlogisch, könnte man nur bestimmte Tags formatieren und würde dem Sinn von HTML widersprechen.

Das mit der Semantik hab mir auch schon mal verinnerlicht, bin dabei zu der Erkenntnis gelangt, dass eine darauf getrimmte Seite auch absolut ohne CSS verständlich funktionieren muss.

Richtig. Wobei das "darauf getrimmte Seite" sich so anhört, als wär das ein Bonbon, ein optionales Extra - aber das ist es ja nicht, es ist Pflicht. Das ist der Sinn von HTML!

wenn ich das nun alles geändert habe, was ja bestimmt eine Weile dauert, muss ich dann einen neuen Thread hier einstellen oder kann ich diesen hier nur nochmal beantworten um ihn wieder aktuell zu machen. In den Vorschriften hier hab das nicht ganz begriffen.

Keine Ahnung, was in den Vorschriften steht, aber ein Thread ist ja eine Diskussion zu einem bestimmten Thema. Allein die Logik dazu sagt, dass Du Bewertungen zur selöben Site problemlos hier einstellen kannst.

Zitat von Efchen

Es verwundert mich nur immer wieder, wieso jemand - und das machen ja viele - so lernt, wo geschrieben steht, dass das nicht geht. Es wäre doch bodenlos unlogisch, könnte man nur bestimmte Tags formatieren und würde dem Sinn von HTML widersprechen.

Moin,
wenn man, so wie ich, aus dem Nichts anfängt, Webseiten zu schreiben, dann guckt er, wie's die andern machen. Man lässt sich also den Quelltext irgendwelcher Seiten anzeigen und verwendet Teile davon, die verständlich aussehen zum Probieren und freut sich wenn was angezeigt wird.
Auf diese Art lernt man (bzw. ich) eine Programmiertechnik, die zugegebenermassen nicht unbedingt optimal sein muss, aber zu diesem Zeitpunkt kann man das absolut nicht einschätzen.

Erstaunlicherweise (oder ist das normal?) habe ich festgestellt, dass sich anscheinend die wenigsten einen hier angesprochenen Stil angewöhnt haben und die wildesten Techniken entwickelt haben um irgendwas am Bildschirm anzuzeigen. Es wimmelt nur so von <table> oder <div>, ein <h1 class="irgendwas"> hab ich zumindest bewusst noch nie gesehen.

So also gewöhnt man sich auch so einen Stil an, von dem man meint, er sei gut und ist verwundert, plötzlich was von z.B. Semantik zu hören.

Auch das Design der Webseiten folgt keiner Richtlinie, jeder macht's anders. Das ist auch gut so, sonst wär's ja langweilig. Was mir aber immer wieder stinkt, ist, wenn ich auf einer Seite nur noch per Zufall an die von mir gewünschte Stelle vortasten kann und in der Navigation keine Logik entdecken kann. Ein typisches Beispiel ist die Telekom-seite, ein Kraut- und Rübenacker an Links, die aber nie dahinführen, wo man denkt zu landen. Ich habe auf meiner Seite versucht, eine klare, reproduzierbare Logik einzuhalten, da hat man mir gesagt, man merkt mein Alter (heul).

NEIN, ich bin nicht beleidigt.

Ich weiss nicht, welche Typen von Programmierern hier im Forum vertreten sind, dazu bin ich zu kurz dabei, aber ich hab hier in der kurzen Zeit schon mehr gelernt, als ich erwartet habe. (das war ein Lob !!!)