Anzeige

Anfänger - Kontrolle Quellcode HTML5/CCS3

Anfänger - Kontrolle Quellcode HTML5/CCS3 | PSD-Tutorials.de

Erstellt von Moritzilie, 10.07.2013.

  1. Moritzilie

    Moritzilie Nicht mehr ganz neu hier

    Dabei seit:
    19.09.2012
    Beiträge:
    55
    Geschlecht:
    männlich
    Software:
    Creative Suite CS6
    Anfänger - Kontrolle Quellcode HTML5/CCS3
    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 (Text):
    1.  
    2.  
    3. <!DOCTYPE HTML>
    4. <html>
    5.  
    6. <head>
    7.   <meta charset="UTF-8">
    8.   <title>Beatles</title>
    9.  
    10.   <style>
    11.     tr, td {
    12.     vertical-align: top;
    13.     text-align: center;    
    14.     width: 150px
    15.     }
    16.  
    17.     h1 {
    18.     text-align: center;
    19.     }
    20.    
    21.     div#fussbereich {
    22.     float: right;
    23.     }
    24.    
    25.     table.center{
    26.         margin-left: auto;
    27.         margin-right: auto;
    28.     }
    29.  
    30.   </style>
    31. </head>
    32.  
    33. <body>
    34.  
    35.   <div id="kopfbereich">
    36.     <h1>THE BEATLES</h1>
    37.   </div> <!-- Ende kopfbereich -->
    38.  
    39.   <div id="nav">
    40.     <table class="center">
    41.       <tr>
    42.       <td><a href="lennon.html"><img src="bilder/lennon.jpg" alt="Bild John Lennon" title="John Lennon"></a></td>
    43.       <td><a href="mccartney.html"><img src="bilder/mccartney.jpg" alt="Bild Paul McCartney" title="Paul McCartney"></a></td>
    44.       <td><a href="harrison.html"><img src="bilder/harrison.jpg" alt="Bild George Harrison" title="George Harrison"></a></td>
    45.       <td><a href="starr.html"><img src="bilder/starr.jpg" alt="Binl Ringo Starr" title="Ringo Starr"></a></td>
    46.       </tr>
    47.       <tr>
    48.       <td><a href="lennon.html">John Lennon</a></td>
    49.       <td><a href="mccartney.html">Paul McCartney</a></td>
    50.       <td><a href="harrison.html">George Harrison</a></td>
    51.       <td><a href="starr.html">Ringo Starr</a></td>
    52.       </tr>
    53.     </table>
    54.   </div> <!-- Ende nav -->
    55.  
    56.   <div id="fussbereich">
    57.     <a href="http://www.emimusic.de/"><img src="bilder/emi_dog.gif" alt="Bild EMI"></a>
    58.   </div>
    59. </body>
    60.  
    61. </html>
    62.  
    63.  
    64.  
     
    #1      
  2. cythux

    cythux Aktives Mitglied

    Dabei seit:
    10.01.2008
    Beiträge:
    1.489
    Geschlecht:
    männlich
    Ort:
    Waimes (Weismes), Belgien
    Software:
    PS CC 2014, Lightroom 5 Aptana Studio 3, ST2/3, SASS+COMPASS
    Kameratyp:
    Canon EOS 1200D
    Anfänger - Kontrolle Quellcode HTML5/CCS3
    #2      
  3. MyBad

    MyBad localhorst

    Dabei seit:
    18.12.2006
    Beiträge:
    1.977
    Geschlecht:
    männlich
    Anfänger - Kontrolle Quellcode HTML5/CCS3
    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)
     
    #3      
  4. Moritzilie

    Moritzilie Nicht mehr ganz neu hier

    Dabei seit:
    19.09.2012
    Beiträge:
    55
    Geschlecht:
    männlich
    Software:
    Creative Suite CS6
    Anfänger - Kontrolle Quellcode HTML5/CCS3
    AW: Anfänger - Kontrolle Quellcode HTML5/CCS3

    Ok, werde ich so umsetzen.
    Meinst du mit <ul> <li> usw.

    Hast vielleicht mal ein Bsp.?
    Hast mal ein Bsp.?
    Meinst du im <body> eine Unterteilung in header, nav und footer.

    Ich danke Euch! ;)


    MfG
     
    #4      
  5. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    Anfänger - Kontrolle Quellcode HTML5/CCS3
    AW: Anfänger - Kontrolle Quellcode HTML5/CCS3

    ..und diese möglichst in einer Grafik zusammenfassen (Stickwort: CSS Sprites)
    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:
    1.  
    2. <!doctype html>
    3. <meta charset="utf-8">
    4. <title>HTML5</title>
    5. </head>
    6.     <div id="wrapper">
    7.       <header>
    8.         <!-- header -->
    9.     </header>
    10.     <nav>
    11.         <ul>
    12.           <li><a href="#">page 1</a></li>
    13.           <li><a href="#">page 2</a></li>
    14.           <li><a href="#">page 3</a></li>
    15.           <li><a href="#">page 4</a></li>
    16.       </ul>
    17.     </nav>
    18.     <div id="main">
    19.       <section>
    20.           <!-- content -->
    21.       </section>
    22.       <aside>
    23.           <!-- sidebar -->
    24.       </aside>
    25.     </div>
    26.     <footer>
    27.         <!-- footer content here! -->
    28.     </footer>
    29.   </div>
    30. </body>
    31. </html>
    32.  
    Liebe Grüße, Patrick
     
    Zuletzt bearbeitet: 10.07.2013
    #5      
  6. cythux

    cythux Aktives Mitglied

    Dabei seit:
    10.01.2008
    Beiträge:
    1.489
    Geschlecht:
    männlich
    Ort:
    Waimes (Weismes), Belgien
    Software:
    PS CC 2014, Lightroom 5 Aptana Studio 3, ST2/3, SASS+COMPASS
    Kameratyp:
    Canon EOS 1200D
    Anfänger - Kontrolle Quellcode HTML5/CCS3
    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
     
    #6      
  7. Moritzilie

    Moritzilie Nicht mehr ganz neu hier

    Dabei seit:
    19.09.2012
    Beiträge:
    55
    Geschlecht:
    männlich
    Software:
    Creative Suite CS6
    Anfänger - Kontrolle Quellcode HTML5/CCS3
    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?

    http://www.ruegen-fussball.de/beatles/index.html


    MfG
     
    #7      
  8. cythux

    cythux Aktives Mitglied

    Dabei seit:
    10.01.2008
    Beiträge:
    1.489
    Geschlecht:
    männlich
    Ort:
    Waimes (Weismes), Belgien
    Software:
    PS CC 2014, Lightroom 5 Aptana Studio 3, ST2/3, SASS+COMPASS
    Kameratyp:
    Canon EOS 1200D
    Anfänger - Kontrolle Quellcode HTML5/CCS3
    AW: Anfänger - Kontrolle Quellcode HTML5/CCS3

    so auf den ersten blick ja
     
    #8      
  9. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    Anfänger - Kontrolle Quellcode HTML5/CCS3
    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
     
    #9      
  10. Moritzilie

    Moritzilie Nicht mehr ganz neu hier

    Dabei seit:
    19.09.2012
    Beiträge:
    55
    Geschlecht:
    männlich
    Software:
    Creative Suite CS6
    Anfänger - Kontrolle Quellcode HTML5/CCS3
    AW: Anfänger - Kontrolle Quellcode HTML5/CCS3

    Ich danke dir! ;)

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


    MfG
     
    #10      
  11. Moritzilie

    Moritzilie Nicht mehr ganz neu hier

    Dabei seit:
    19.09.2012
    Beiträge:
    55
    Geschlecht:
    männlich
    Software:
    Creative Suite CS6
    Anfänger - Kontrolle Quellcode HTML5/CCS3
    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

    beatles.zip



    MfG
     
    #11      
x
×
×