XHTML Fragen von einem Anfänger

Naruto123 schrieb:
Natürlich auch durch den Validator geschickt und verbessert. ;)
Zum Vergrößern anklicken....
Und warum meldet er dann bei der geposteten Version noch Fehler?

theHacker schrieb:
Vergiss das bitte ganz schnell wieder 8O
Ich sehe auf dem Screenshot keine Tabelle und dein Markup is voller <td>-Zeugs :sick:
Zum Vergrößern anklicken....
Sicher lässt sich das mit CSS eleganter und auch semantisch korrekter lösen, aber als Einstieg um einfach mal ein bisschen mit der Verwendung von HTML-Tags vertraut zu werden, finde ich die Tabellen-Variante gar nicht so verkehrt... Eigentlich haben wir doch alle mal mit Tabellen als Grundstruktur angefangen, du etwa nicht?

@Naruto123: Was theHacker meint, ist so in etwa wohl das hier...
 
Zuletzt bearbeitet:
theHacker schrieb:
Ziel ist es nicht, das ähnlich in den Browser zu bringen, sondern XHTML zu lernen. Oder hab ich dich missverstanden?
Zum Vergrößern anklicken....

Hast bestimmt recht, aber woher soll ich das als Anfänger wissen? :)

@marac: Die Fehler habe ich nicht verstanden und ergaben für mich auch irgendwie keinen Sinn, weil da irgendwas davon stand, dass der HTML-Tag oder so nicht geschlossen wäre und das Element "u" undefiniert ist, obwohl ich in diesen Tags keinen einzigen Fehler gefunden habe.

Wahrscheinlich hat der Validator auch recht, aber ich sehe da keinen Fehler.
Wenn du den Fehler siehst könntest du ihn mir bitte zeigen? ;)
 
marac schrieb:
Sicher lässt sich das mit CSS eleganter und auch semantisch korrekter lösen, aber als Einstieg um einfach mal ein bisschen mit der Verwendung von HTML-Tags vertraut zu werden, finde ich die Tabellen-Variante gar nicht so verkehrt...
Zum Vergrößern anklicken....
Ich lerne doch nicht jemanden was, was sich hinterher als falsch herausstellt. Danach ist es umso schwieriger, sich das wieder abzugewöhnen.

Das lernt man schon bei den Didaktik-Grundlagen: Schreib niemals was Falsches an die Tafel! Du kannst zwar sagen, dass es so und so falsch is, aber schreib das um Himmels Willen nicht an, sonst merkt sich das am Ende noch einer.
marac schrieb:
Eigentlich haben wir doch alle mal mit Tabellen als Grundstruktur angefangen, du etwa nicht?
Zum Vergrößern anklicken....
Das möchte ich nicht unterschreiben.
Ich persönlich hab das zwar auch so gelernt, aber nur deshalb, weil man das damals noch so gemacht hat. Zu dieser Zeit war grade HTML 4.01 draußen und ich hatte auch noch kein Internet als Referenz, sondern hab mir halt n Buch gekauft und offline am Internet Explorer gelernt.

Würde ich - oder stellvertretend jede andere Person - heute nochmal von Null ab anfangen, XHTML zu lernen, dann würde ich natürlich niemals mit <table>-Tags layouten.

Deswegen zweifle ich deine These auch an. Heutzutage hat jeder Internet, der XHTML lernen will. D.h. jeder kann - wenn er will! - gleich korrekt anfangen.

edit:
Naruto123 schrieb:
Hast bestimmt recht, aber woher soll ich das als Anfänger wissen? :)
Zum Vergrößern anklicken....
Du hast gefragt, deshalb hast du ne Antwort bekommen ;)

Alternativ hättest du auch selber im Internet suchen können und wärst zum selben Ergebnis gekommen. Die Referenz schlechthin für dich ist das W3C (merken!) und schon dort wird dir erklärt, wie du <table>-Tags zu nutzen hast.

Wer natürlich einfach so drauflos macht, keine Ahnung hat und nur aufs Ergebnis achtet, wird das niemals merken und irgendwann mal gewaltig aufsitzen und viel viel Zeit investieren müssen, um das ganze Wissen zu "überarbeiten".
 
Zuletzt bearbeitet:
Werde es mir merken und habe mir auch den Artikel, den marac gepostet hat mir durchgelesen und jetzt erscheint es mir einigermaßen sinnvoll.

Eine Frage hätte ich noch wäre es für mich jetzt nur mit meinen HTML Kentnissen möglich diese Seite ohne die table-Tags überhaupt zu erstellen oder müsste ich dafür auch CSS lernen?
 
theHacker schrieb:
weil man das damals noch so gemacht hat.
Zum Vergrößern anklicken....
Dieses "damals" ist nicht wirklich lange her... Schau dir mal den Quelltext des Klamm-Forums an...
Es gibt immernoch Leute, die auf Tabellen-Layout schwören. Seis, weil sie nichts anderes kennen, oder weil sie die Gründe, die dagegen sprechen einfach nicht kapieren.
Aber darum ging es mir auch gar nicht, ich bin ja prinzipiell deiner Meinung, dass Tabellen in Layouts nicht das Mittel der Wahl sein sollten, aber wenn jemand von Null anfängt, muss er sich doch nicht von vorneherein mit (X)HTML und CSS rumschlagen, sondern kann sich doch ruhig erstmal auf eine Seite konzentrieren.
Was bewirken die einzelnen Tags? Wie ist der grundsätzliche Aufbau einer HTML-Seite (des Codes, nicht des Layouts)? Was sagen mir die Meldungen aus dem Validator?
Wenn man diese Fragen beantworten kann, kann man sich irgendwann auch an die Fragen machen, wie man seine Seiten anständig layoutet, aber wenn es vorher noch hakt, muss man seine Aufnahmefähigkeit nicht unbedingt mit zusätzlichem Lernstoff überbeanspruchen...
 
marac schrieb:
Dieses "damals" ist nicht wirklich lange her... Schau dir mal den Quelltext des Klamm-Forums an...
Zum Vergrößern anklicken....
und weil es irgendwer noch immer "falsch" macht, ist es ok?
Es hat ja wohl auch mit der Unterstützung von CSS zu tun, die war vor einigen Jahren noch so schlecht, dass es ohne Tabellen eben nicht in allen Browsern korrekt ging.

marac schrieb:
Es gibt immernoch Leute, die auf Tabellen-Layout schwören. Seis, weil sie nichts anderes kennen, oder weil sie die Gründe, die dagegen sprechen einfach nicht kapieren.
Zum Vergrößern anklicken....
wieder ein irrelevantes Argument.
Es mag vllt auch noch Menschen geben, die denken, dass sich die Sonne um die Erde dreht, richtiger wird es dadurch aber nicht.
 
Naruto123 schrieb:
Eine Frage hätte ich noch wäre es für mich jetzt nur mit meinen HTML Kentnissen möglich diese Seite ohne die table-Tags überhaupt zu erstellen oder müsste ich dafür auch CSS lernen?
Zum Vergrößern anklicken....
Nein. Zumindest nicht so, wie du dir das vorstellst, dass sie am Ende wie auf dem Bild aussieht.

(X)HTML struktiert eine Seite nur. Sie sieht danach niemals gut aus.
Erst danach kommt CSS zum Einsatz. Um dir diesen Fakt zu zeigen, bietet sich der Zen Garden als Veranschaulichung an.

XHTML-Markup: https://www.csszengarden.com/zengarden-sample.html
Mit CSS: https://www.csszengarden.com/tr/deutsch/?cssfile=/213/213.css&page=0

Du kannst bei "select a design" weitere Designs ausprobieren. Bemerke, dass sich das XHTML-Markup niemals ändert. Alles, was du an Veränderung siehst, wird mit CSS gemacht.
marac schrieb:
Dieses "damals" ist nicht wirklich lange her... Schau dir mal den Quelltext des Klamm-Forums an...
Zum Vergrößern anklicken....
Du hast auch die Meinung der Entwickler des vB-Forums in deren Blog gelesen? ;)
marac schrieb:
[...] aber wenn jemand von Null anfängt, muss er sich doch nicht von vorneherein mit (X)HTML und CSS rumschlagen, sondern kann sich doch ruhig erstmal auf eine Seite konzentrieren.
Zum Vergrößern anklicken....
Wieso? Kostet doch nix? Ob jemand den depricated <font>-Tag lernt oder gleich font-size in das style-Attribut schreibt - macht vom Lernaufwand keinen Unterschied.

Im Gegenteil: Bei Letzterem bekommt derjenige automatisch das Feeling, dass das Aussehen in das style-Attribut kommt und der Rest nur strukturiert.
Beschäftigt man sich dann in einer späteren Phase richtig mit CSS, sieht man, dass alle style-Attribut-Werte in ein CSS-File kommen und eignet sich relativ schnell die Selektoren an und staunt, was man mit so wenig zusätzlichen Lernaufwand alles meistern kann.

Die ganzen CSS-Eigenschaften hat derjenige ja so nebenbei mit den Tags gelernt.
 
Jetzt verstehe ich es besser.
Werde heute wahrscheinlich auch schon anfangen mich mit CSS zu befassen...
 
Habe eine Seite gefunden, wo zuerst die CSS-Tags erklärt werden und es Aufgaben gibt, die man dann selber lösen soll und meine Aufgabe ist es folgendes herzustellen.
https://www.html-seminar.de/bilder/css-design-rahmen-farben-und-art.gif

Aber ich kriege es nicht hin. Die Farben passen zwar und der HTML Code ist auch richtig, aber es will nicht klappen.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://www.w3.org/1999/xhtml" lang="de">
    
    <head>
        <title>bla bla</title>
        <link href="style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <h1>wichtigste Überschrift h1</h1>
        <h2>Überschrift h2</h2>
        <p>
        Und nun ein normaler Absatz mit mehreren Zeilen, damit die Texteinrückung
        <br />
        in der ersten Zeile gut zur Geltung kommt.
        </p>
        <h2>Überschrift h2</h2>
        <p>
        Noch ein normaler Absatz
        </p>
    </body>

</html>

Code: 
h1 {
    border-color: #ff00ff;
    border-width: 1px;
    border-style: solid;
}

h2 {
    border-color: #d3d3d3;
    border-right-style: none;
    border-bottom-style: none;
    border-width: 10px;
    border-style: solid;
}

p {
    border-color: orange;
    border-top-style: none;
    border-left-style: none;
    border-style: dotted;
}

Habe es genauso gemacht, wie ich es verstanden habe, damit teile des Rahmens unsichtbar werden, aber sie werden nicht unsichtbar.
Wo ist mein Fehler?
Habe es auch mal mit "hidden" statt "none" versucht, aber hat nicht geklappt.
 
Code: 
h2 {
    border-color: #d3d3d3;
[COLOR=SeaGreen]     border-right-style: none;
    border-bottom-style: none;[/COLOR]
    border-width: 10px;
[B][COLOR=Red]     border-style: solid;[/COLOR][/B]
}
Die rote Zeile überschreibt die Eigenschaften der grünen Zeilen.
Entweder Reihenfolge ändern (wär mir aber zu unsicher, ob jeder Browser das so macht) oder besser explizit angeben, dass nur für links und oben der Rahmen solid sein soll.

edit:
Wenn du mit Firefox arbeitest, installiere dir Firebug. Der zeigt genau an, welche CSS-Zeile auf welches Element aktiv ist und falls nicht, welche andere Zeile die Eigenschaft überschrieben hat.
 
Zuletzt bearbeitet:
Vielen dank.
Ich habe es hinbekommen und danke für den Tipp mit Firebug. :)

Edit: Kann man statt die div-Tags in den <body> Bereich im HTML Code zu schreiben nicht in einer anderen eigenen *.css Datei reinmachen?
Ich habe es probiert, aber anscheinend klappt es nicht.
Mache ich was falsch oder kann man die gar nicht in eine *.css Datei machen und im <head> Bereich darauf "verweisen"?
 
Zuletzt bearbeitet:
Naruto123 schrieb:
Kann man statt die div-Tags in den <body> Bereich im HTML Code zu schreiben nicht in einer anderen eigenen *.css Datei reinmachen?
Zum Vergrößern anklicken....
Die Frage versteh ich nicht wirklich... Die <div>-Tags selbst gehören natürlich ins HTML, sind ja auch HTML-Tags. Oder meinst du, die Style-Informationen für den <div>-Tag? Also das, was du im letzten Beispiel schon für h1, h2 und p gemacht hast? Die können natürlich genauso ausgelagert werden, wie alle anderen Style-Definitionen auch...
 
marac schrieb:
Die Frage versteh ich nicht wirklich... Die <div>-Tags selbst gehören natürlich ins HTML, sind ja auch HTML-Tags. Oder meinst du, die Style-Informationen für den <div>-Tag? Also das, was du im letzten Beispiel schon für h1, h2 und p gemacht hast? Die können natürlich genauso ausgelagert werden, wie alle anderen Style-Definitionen auch...
Zum Vergrößern anklicken....

War ein Denkfehler von mir.
Habe es jetzt verstanden. Trotzdem danke. :)

Edit: Ich wollte mich mal an mein erstes Layout ranwagen und versuchen es zu erstellen, aber ich kriege es irgendwie nicht hin.
Hier ist der Code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://www.w3.org/1999/xhtml" lang="de">
    
    <head>
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
        <title>Design über CSS pur - Beispiel</title>
    </head>

    <body>
        <div id="kopfbereich">
        <p>
        Säulenbauten des 20. Jahrhunderts
        </p>
        </div>

        <div id="steuerung">
        Steuerung
        </div>
        
        <div id="schatten">
        Hier kommt der Schatten später
        </div>

        <div id="inhalte">
        Der eigentliche Inhaltsbereich
        </div>
    </body>

</html>
Der HTML-Code ist richtig. Habe ihn auch durch den Validator geschickt und da waren 0 Fehler drin.

Code: 
#kopfbereich {
    background: url(bilder/saeulen.jpg) no-repeat left top;
    height: 150px;
}

#steuerung {
    background-color: yellow;
}

#schatten {
    background-color: green;
}

#inhalte {
    background-color: orange;
}
Und die CSS-Datei ist doch auch richtig, oder nicht?
Wo liegt mein Fehler?
 
Zuletzt bearbeitet:
marac schrieb:
Ich schon... Wo ist denn der Verweis auf die CSS-Datei?
Zum Vergrößern anklicken....

Ich bin mir 100% sicher, dass ich den Verweis reingemacht habe.
Aber ich muss dann wohl den Verweis ausversehen gelöscht haben als ich diesen "meta" Teil reingemacht habe. :roll.
Danke. :)

Edit: Nächstes Layout, nächstes Problem.
Diesmal sollte es ein 2-Spalten Layout werden, aber ich bekomme den Text in der 2. Spalte, also in der Spalte wo der Inhalt steht einfach nicht von der Steuerung weg.
Ich habe es mit padding versucht, mit margin versucht, aber es will nicht klappen.
Der HTML-Code ist soweit auch in Ordnung.

Code: 
#navi {
    background: url(bilder/beispiel-2-spalten-layout-steuerung.jpg);
    width: 150px;
    height: 300px;
    float: left;
    margin-left: 150px;
}

#navi ul {
    list-style: none;
}

#kopfzeile {
    background: url(bilder/beispiel-2-spalten-layout-kopf.jpg);
    width: 1000px;
    height: 205px;
    margin-left: 150px;
}

#inhalt {
    text-align: left;
}

#inhalt h1, p {
    padding-left: 0.7em;
}

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://www.w3.org/1999/xhtml" lang="de">

    <head>
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
        <title>Eigener Versuch</title>
        <link rel="stylesheet" type="text/css" href="design.css" />
    </head>

    <body>
    
    <div id="kopfzeile">
    </div>    

    <div id="navi">
        <ul>
            <li>Startseite</li>
            <li>Impressumg</li>
            <li>usw.</li>
        </ul>
    </div>

    <div id="inhalt">
    <h1>Tübingen anders sehen</h1>
    <p>
    Jetzt würde hier ein langer Text hinkommen, aber ich habe gerade keine Lust einen langen Text zu schreiben.
    </p>
    </div>

    </body>

</html>
 
Zuletzt bearbeitet:
Naruto123 schrieb:
ich bekomme den Text in der 2. Spalte, also in der Spalte wo der Inhalt steht einfach nicht von der Steuerung weg.
Ich habe es mit padding versucht, mit margin versucht, aber es will nicht klappen.
Zum Vergrößern anklicken....
Verpass deinen drei Blöcken doch einfach mal unterschiedliche Hintergrund-Farben und spiel dann ein bisschen mit margin-Einstellungen. Dann siehst du, was diese bewirken... Im Moment überlappt sich dein Inhalts-Block mit dem Navi-Block und deine margin-Einstellung bezieht sich auf den linken Rand des Fensters. Wenn dein Navi-Block 150px vom linken Rand entfernt und 150px breit ist, muss der Inhalts-Block in dem Fall mehr als 300px Abstand vom linken Rand bekommen, damit du davon etwas merkst...
Insgesamt sollte man aber absolute Breiten in Pixeln eher vermeiden, da du dem Betrachter deiner Seite dann die Möglichkeit nimmst, im Browser die Schrift zu vergrößern oder zu verkleinern...
 
Danke marac. Jetzt hat es geklappt.

Ich will die Seite auch noch mittig positionieren, aber es klappt nicht.
Hiermal die Codes:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://www.w3.org/1999/xhtml" lang="de">

    <head>
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
        <title>Eigener Versuch</title>
        <link rel="stylesheet" type="text/css" href="design.css" />
    </head>

    <body>
    
    <div id="kopfzeile">
    </div>    

    <div id="navi">
        <ul>
            <li>Startseite</li>
            <li>Impressumg</li>
            <li>usw.</li>
        </ul>
    </div>

    <div id="inhalt">
    <h1>Tübingen anders sehen</h1>
    <p>
    Jetzt würde hier ein langer Text hinkommen, aber ich habe gerade keine Lust einen langen Text zu schreiben.
    </p>
    </div>
    
    <div id="footer">
    2009 - Tübingen anders sehen!
    </div>

    </body>

</html>

Code: 
* {
    margin: 0;
    padding: 0;
}

html, body {
    background-color: #92c6ed;
    background-image: url(bilder/beispiel-2-spalten-layout-hintergrund.gif);
}

#kopfzeile {
    background: url(bilder/beispiel-2-spalten-layout-kopf.jpg);
    width: 1000px;
    height: 205px;
    margin-left: 150px;
}

#navi {
    background: url(bilder/beispiel-2-spalten-layout-steuerung.jpg);
    width: 150px;
    height: 300px;
    float: left;
    margin-left: 150px;
}

    #navi ul {
        list-style: none;
        padding: 1em;

    }


#inhalt {
    background-color: white;
    width: 826px;
    height: 276px;
    text-align: left;
    margin-left: 300px;
    padding-left: 1.5em;
    padding-top: 1.5em;
}

#footer {
    background-color: #4b677d;
    height: 20px;
    width: 1000px;
    margin-left: 150px;
}

Habe versucht so gut es geht alles relativ anzugeben, aber bei manchen hat es nicht geklappt.
Könnte ich manche Sachen vielleicht auch noch relativ angeben, die ich nicht relativ angegeben habe?
 
Mittig machst du mit einem Div, den du
Code: 
div {
  width: 8888px; /* Breite vorgeben */
  margin: 0 auto; /* auto sorgt für links/rechts selben Abstand */
}
formatierst.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

C
Welche Fotobearbeitungs-App ist am besten für Anfänger geeignet?
Antworten
1
Aufrufe
9K
k570046
K
Zurück
Oben