Anfänger - Kontrolle Quellcode HTML5/CCS3

Moritzilie · 10.07.2013

Hallo,

ich wollte Euch mal fragen ob ihr für mich Tipps habt was vielleicht nicht so gut in meinem Quelltext ist.

Die Verlinkungen funktionieren alle. Mir geht es rein um den Quellcode.

Z.B. schreibt man noch mit table oder nicht?!?

Ich danke Euch.

MfG

Code:

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <title>Beatles</title>
  
  <style>
    tr, td {
    vertical-align: top;
    text-align: center;    
    width: 150px
    }

    h1 {
    text-align: center;
    }
    
    div#fussbereich {
    float: right;
    }
    
    table.center{
        margin-left: auto;
        margin-right: auto;
    }
 
  </style>
</head>

<body>
  
  <div id="kopfbereich">
    <h1>THE BEATLES</h1>
  </div> <!-- Ende kopfbereich -->
  
  <div id="nav">
    <table class="center">
      <tr>
      <td><a href="lennon.html"><img src="bilder/lennon.jpg" alt="Bild John Lennon" title="John Lennon"></a></td>
      <td><a href="mccartney.html"><img src="bilder/mccartney.jpg" alt="Bild Paul McCartney" title="Paul McCartney"></a></td>
      <td><a href="harrison.html"><img src="bilder/harrison.jpg" alt="Bild George Harrison" title="George Harrison"></a></td>
      <td><a href="starr.html"><img src="bilder/starr.jpg" alt="Binl Ringo Starr" title="Ringo Starr"></a></td>
      </tr>
      <tr>
      <td><a href="lennon.html">John Lennon</a></td>
      <td><a href="mccartney.html">Paul McCartney</a></td>
      <td><a href="harrison.html">George Harrison</a></td>
      <td><a href="starr.html">Ringo Starr</a></td>
      </tr>
    </table>
  </div> <!-- Ende nav -->
  
  <div id="fussbereich">
    <a href="http://www.emimusic.de/"><img src="bilder/emi_dog.gif" alt="Bild EMI"></a>
  </div>
</body>

</html>

cythux · 10.07.2013

AW: Anfänger - Kontrolle Quellcode HTML5/CCS3

Tabellen sind total veraltet, genauso wie inline styles

Hier dies kannst du ja mal anschauen https://github.com/h5bp/html5-boilerplate

MyBad · 10.07.2013

AW: Anfänger - Kontrolle Quellcode HTML5/CCS3

Hi!

1. Lagere Styleanweisungen in eine eigene CSS-Datei aus
2. Verzichte für die Navigation auf Tabellen. Angebracht wäre hier eine Liste (Stichwort "Semantik")
3. Navigationsgrafiken am Besten als Hintergrundbilder per CSS einbinden
4. Wenn du schon HTML5 als Doctype verwendest, kannst du ruhig auch die passenden HTML-Tags einsetzen. <header><nav><footer>. (In älteren Browsern werden diese allerdings nicht unterstützt)

Moritzilie · 10.07.2013

AW: Anfänger - Kontrolle Quellcode HTML5/CCS3

MyBad schrieb:
1. Lagere Styleanweisungen in eine eigene CSS-Datei aus

Ok, werde ich so umsetzen.

MyBad schrieb:
2. Verzichte für die Navigation auf Tabellen. Angebracht wäre hier eine Liste (Stichwort "Semantik")

Meinst du mit <ul> <li> usw.

Hast vielleicht mal ein Bsp.?

MyBad schrieb:
3. Navigationsgrafiken am Besten als Hintergrundbilder per CSS einbinden

Hast mal ein Bsp.?

MyBad schrieb:
4. Wenn du schon HTML5 als Doctype verwendest, kannst du ruhig auch die passenden HTML-Tags einsetzen. <header><nav><footer>. (In älteren Browsern werden diese allerdings nicht unterstützt)

Meinst du im <body> eine Unterteilung in header, nav und footer.

Ich danke Euch!

MfG

patrick_l · 10.07.2013

AW: Anfänger - Kontrolle Quellcode HTML5/CCS3

MyBad schrieb:
3. Navigationsgrafiken am Besten als Hintergrundbilder per CSS einbinden

..und diese möglichst in einer Grafik zusammenfassen (Stickwort: CSS Sprites)

MyBad schrieb:
4. Wenn du schon HTML5 als Doctype verwendest, kannst du ruhig auch die passenden HTML-Tags einsetzen. <header><nav><footer>. (In älteren Browsern werden diese allerdings nicht unterstützt)

Was dich nicht davon abhalten sollte die neuen Elemente einzusetzen. Damit auch in älteren Browers deine Website korrekt dargestellt wird, mit JavaScript nachhelfen bzw. den älteren Browser die neuen Elemente »beibringen«.

- modernizr
- HTML5shiv
- HTML5 Boilerplate (Template)

Edit:

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5</title>
</head>
<body>
    <div id="wrapper">
      <header>
        <!-- header -->
    </header>
    <nav>
        <ul>
          <li><a href="#">page 1</a></li>
          <li><a href="#">page 2</a></li>
          <li><a href="#">page 3</a></li>
          <li><a href="#">page 4</a></li>
      </ul>
    </nav>
    <div id="main">
      <section>
          <!-- content -->
      </section>
      <aside>
          <!-- sidebar -->
      </aside>
    </div>
    <footer>
        <!-- footer content here! -->
    </footer>
  </div>
</body>
</html>

Liebe Grüße, Patrick

cythux · 10.07.2013

AW: Anfänger - Kontrolle Quellcode HTML5/CCS3

<main> <template>gibt es auch noch

@ll aus diesem Grund wie Patrick_L schon geschrieben hat, habe ich weiter oben HTML5 Boilerplate zum anschauen vorgeschlagen.

in der Dokumentation sind sogar noch ein paar nette Tipps enthalten

Moritzilie · 10.07.2013

AW: Anfänger - Kontrolle Quellcode HTML5/CCS3

Ich habe mal versucht einiges umzusetzen soweit ich es verstanden habe.

Ich möchte jetzt noch gern die nav mittig und auch die Namen mittig unter die Bilder.

Passt der Code jetzt?

MfG

cythux · 10.07.2013

AW: Anfänger - Kontrolle Quellcode HTML5/CCS3

so auf den ersten blick ja

patrick_l · 10.07.2013

AW: Anfänger - Kontrolle Quellcode HTML5/CCS3

Da ich gerade etwas zeit übrig hatte, dir mal fix die Navigation zusammen geschustert. Vom Aufbau her eigentlich ganz simple. Einfach Zip-Archiv herunterladen, entpacken und im Browser oder Editor deiner Wahl anschauen.

Beatle Navigation (Zip-Archiv)

Liebe Grüße, Patrick

Moritzilie · 10.07.2013

AW: Anfänger - Kontrolle Quellcode HTML5/CCS3

Ich danke dir!

Jetzt erst mal alles einzeln zerpflücken und verstehen lernen.

MfG

Moritzilie · 11.07.2013

AW: Anfänger - Kontrolle Quellcode HTML5/CCS3

Hallo,

ich habe jetzt mal weiter gearbeitet an der Seite.

Es ist jetzt eine Verlinkung zu den einzelnen Personen vorhanden, des Weiteren habe ich versucht CSS weiter anzupassen. Es gibt ein Resultat und ich hoffe es ist richtig?!?

Vielleicht könnt ihr mir weitere Tipps geben? DANKE

MfG