[HTML] Code aufräumen

Dieses Thema im Forum "Webdesign" wurde erstellt von juppwatis, 7. Januar 2010 .

Schlagworte:
  1. 7. Januar 2010
    Code aufräumen

    Hallo zusammen,

    wie kann ich folgenden Code säubern und lesbarer machen für suchmaschinen usw.?

    Code:
    <p style="text-align: justify;"><span style="font-size: small;">Der klassische Saucengenuss -&nbsp; jetzt kalorienreduziert! Die ASAL Sauce Hollandaise ist ideal f&uuml;r alle, die bei einer bewussten Ern&auml;hrung auf eine Sauce Hollandaise zu Spargel, Blumenkohl oder Brokoli nicht verzichten wollen. Der Saucenklassiker eignet sich aber auch vorz&uuml;glich zu Fisch-, Fleisch- und Gefl&uuml;gelgerichten oder zum Gratinieren von Aufl&auml;ufen, Gem&uuml;sen oder Toasts.<br />
    <br />
    <table border="0" style="width: 100%;">
     <tbody>
     <tr>
     <td><span style="font-size: small;"><b>N&auml;hrwerte:</b><br />
     Jede Portion von 100 ml enth&auml;lt:<br />
     <br />
     <table cellspacing="0" border="1" style="width: 340px;">
     <tbody>
     <tr bgcolor="#ffff00" align="center" valign="top">
     <td><span style="font-size: small;">Brennwert</span></td>
     <td><span style="font-size: small;">Eiwei&szlig;</span></td>
     <td><span style="font-size: small;">Kohlenhydrate</span></td>
     <td><span style="font-size: small;">Fett</span></td>
     <td><span style="font-size: small;">Natrium</span></td>
     </tr>
     <tr bgcolor="#ffffff" align="center" valign="top">
     <td><span style="font-size: small;">306kJ / 73kcal</span></td>
     <td><span style="font-size: small;">2,6g</span></td>
     <td><span style="font-size: small;">5,6g</span></td>
     <td><span style="font-size: small;">4,5g</span></td>
     <td><span style="font-size: small;">???</span></td>
     </tr>
     <tr bgcolor="#ffffff" align="center" valign="top">
     <td><span style="font-size: small;">3,7%</span></td>
     <td><span style="font-size: small;">5,2%</span></td>
     <td><span style="font-size: small;">1,9%</span></td>
     <td><span style="font-size: small;">6,4%</span></td>
     <td><span style="font-size: small;">???</span></td>
     </tr>
     </tbody>
     </table>
     </span></td>
     <td><br />
     <span style="font-size: small;"> <img src="/out/fck_pictures/haken.png" style="width: 10px; height: 13px;" alt="" /> kalorienreduziert<br />
     <img src="/out/fck_pictures/haken.png" style="width: 10px; height: 13px;" alt="" /> mit jodiertem Salz<br />
     <img src="/out/fck_pictures/haken.png" style="width: 10px; height: 13px;" alt="" /> frei von geh&auml;rteten Fetten<br />
     <img src="/out/fck_pictures/haken.png" style="width: 10px; height: 13px;" alt="" /> ohne zugesetzten Zucker<br />
     <img src="/out/fck_pictures/haken.png" style="width: 10px; height: 13px;" alt="" /> ohne Konservierungsstoffe</span></td>
     </tr>
     </tbody>
    </table>
    <br />
    Die Prozentangaben stellen den prozentualen Anteil des Richtwertes f&uuml;r die Tageszufuhr basierend auf einer Ern&auml;hrung mit 2.000 kcal dar. Weitere Informationen zu den Richtwerten f&uuml;r die Tageszufuhr erhalten Sie <a href="http://www.asal-gesundernaehren.de/shop/Richtwerte-Tageszufuhr/"><span style="font-size: small;"><span style="color: rgb(0, 0, 128);">hier</span></span></a>.<br />
    <br />
    <b>Zubereitung:</b><br />
    Bei der Zubereitung wird keine Butter ben&ouml;tigt. Das Pulver in lauwarmes Wasser einr&uuml;hren, zum Kochen bringen und bei schwacher Hitze unter Umr&uuml;hren kurz aufkochen lassen.<br />
    <br />
    <b>Zutaten:</b><br />
    Weizenmehl, 23% Butterpulver, Magermilchpulver, Sahnepulver, modifizierte St&auml;rke, Geschmacksverst&auml;rker (Mononatriumglutamat, Dinatriuminosinat), jodiertes Salz, 5% Eigelbpulver, Hefeextrakt, Verdickungsmittel Xanthan, S&auml;uerungsmittel Citronens&auml;ure, Stabilitsator E450, nat&uuml;rliches Aroma, Farbstoff Beta-Carotin, Gew&uuml;rz, Antioxidationsmittel (E304, E307)</span></p>
    cheers
     
  2. 7. Januar 2010
    AW: Code aufräumen

    code säubern:
    - w3c validator -> http://validator.w3.org/
    - div - tags statt tabellen - use google, css4you, etc...

    besser auffindbar für suchmaschinen:
    Meta-Angaben - Suchmaschinenoptimierung

    hoffe das hilft ein bisl...
     
  3. 7. Januar 2010
    AW: Code aufräumen

    sry da muss mehr gemacht werden! Schonma was von CSS gehört? Du schreibst hier 100mal:
    Code:
    style="font-size: small
    sowas definiert man entweder im header der htmldatei oder in einer externen cascarding style sheet (kurz: in einer .css datei)

    diese methode würde dir einiges an arbeit ersparen. Für deine font-size würde der CSS Code etwas so aussehen:

    1. Methode:
    Code:
    body {
    font-size: small;
    }
    gut wäre auch wenn du gleich noch eine Schrift definieren würdest etwa so:

    Code:
    body {
    font-familiy: Verdana, Arial, Helvetica, sans-serif;
    font-size: smal;
    }
    2. Methode: Da du das alles in tabellen gepackt hast und alle gleich formatiert sind könntest du auch das td (attribut) als selektor benutzen:

    Code:
    td {
    font-familiy: font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: smal;
    }
    ----------------------------------------------------------
    diese 4 zeilen würden dir, sofern du oben im header noch einen verweiß zur styledatei einbaust (das geht damit: <link href="style.css" rel="stylesheet" type="text/css" media="screen" />) alle "font-size: small; in deiner html datei ersetzen.

    Zudem gehen Tabellenlayouts in der heutigen zeit gar nicht mehr. Tabellen hat man in den 90er Jahren benutzt weil man einfach nichts anderes hatte. Heute hat man CSS, DIV-Container und jede menge formatierungsmöglichkeiten.) Zum lernen kann ich »Little Boxes« - HTML und CSS lernen - als Buch und Videotraining - Little Boxes - Webseiten gestalten mit HTML und CSS (Peter Müller) ans herz legen, ist gut geschrieben und sollte auch für anfänger gut verständlich sein
     
  4. 7. Januar 2010
    AW: Code aufräumen

    alles klar danke. aber wie mache ich das denn, wenn es sich - wie bei mir - um einen onlineshop handelt (OXID)? Ich mein wo definiere ich da die css-befehle, weil da gibt es ja kein <head>...wo mach ich das ganze dann und wie? habe leider nicht soviel ahnung.

    cheers
     
  5. 8. Januar 2010
    AW: Code aufräumen

    in dem shop cms müsste es eigentlich .cssdatein und/oder templates (.tpl datein) geben. Genau kann ich dir das nicht sagen da ich das cms nicht kenne
     
  6. 8. Januar 2010
    AW: Code aufräumen

    irgendwo wird es auch einen head bereich geben! vllt gibt es eine index.php oder index.html und da wird ein head bereich drin sein, bzw ein teil included, der einen headbereich hat! Ein html-dokument enthält immer einen head-bereich!
     
  7. 8. Januar 2010
    AW: Code aufräumen

    und wie könnte ich das ganze nur in der CMS-Seite abändern? Also da nur mit css arbeiten? Geht das auch irgendwie? Ist das einfacher hoffentlich?
    Wäre nice, wenn mir jmd schnell helfen könnte.

    Cheers
     
  8. 9. Januar 2010
    AW: Code aufräumen

    ist der code oben, von deinem cms?
    wenn ja würd ich das cms wechseln, da es volkommen veraltet ist, es arbeitet mit tabellen und nicht mit divs, es hat nicht mal css...
    Also wenn du das alles ändern willst brauchst du viel Zeit und mehr Ahnung
     
  9. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.