HTML5-Code Korrektur

Yeyo187 · 20. Juli 2014

Hallo liebe Community,

bin neu in Sachen HTML und CSS.

Will mir einen Seite erstellen und habe schon mal einen ganzen HTML code für meine Homepage erstellt.

Könnte jemand drüber lesen und mir sagen, wie man es vielleicht besser schrieben könnte?
Habe hier auch schon das Bild von der Homeopage hochgeladen, damit Ihr eine Vorstellung habe, wie meine Seite aussehen soll, wenn Sie fertig ist.

Hier der Link zu dem Bild;

http://image-upload.de/image/3yB8Ut/40b0db5691.jpg

Hier ist der Quellcode der HTML

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
</head>

<body>
 <div id="top_nav">
 <img id="logo" src="Homepage/img/logo.png" alt="Parkett-Expert" title="Parkett-Expert">
 <nav id="navi">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Service</a></li>
 <li><a href="#">Referenzen</a></li>
 <li><a href="#">Angebote</a></li>
 <li><a href="#">Kontakt</a></li>
 </ul>
 </nav> <!-- ends nav -->
 </div> <!-- ends top_nav -->
 <div id="wrapper">
 <header>
 <h1> Slideshow in here </h1>
 </header> <!-- ends header -->
 <article id="content">
 <h1>Willkommen auf Parkett-Expert</h1>
 <section class="frist"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis libero ac leo condimentum dignissim. Donec at pellentesque libero. Morbi at massa varius, vehicula felis nec, elementum lorem. Sed tincidunt interdum viverra. Integer porttitor ante consectetur enim ullamcorper, quis placerat enim ornare. Nam sem turpis, ullamcorper quis mollis et, egestas nec leo. Fusce rhoncus, sapien euismod bibendum pharetra, ligula ante dapibus ligula, a tristique sapien dui et metus. Ut eget purus tempus, tempus dolor ultrices, consectetur felis. Quisque tellus ipsum, aliquet quis tempus gravida, commodo vel enim.</p>
<p>Nunc luctus diam neque, eget vestibulum urna sodales vel. Mauris mauris urna, lobortis sed feugiat ac, volutpat imperdiet nunc. Nulla facilisi. Phasellus tempor varius elementum. Donec a felis quis lacus faucibus tincidunt sit amet sit amet torto.</p>
 </section> <!-- frist section ends -->
 <h1>Unsere Leistungen</h1>
 <section id="second">
 <ul id="list">
 <li><img class="checkbox" src="Homepage/img/mini.png"><h3>Beratung<h3></li>
 <li><img class="checkbox" src="Homepage/img/mini.png"><h3>Planung<h3></li>
 <li><img class="checkbox" src="Homepage/img/mini.png"><h3>Verlegung<h3></li>
 <li><img class="checkbox" src="Homepage/img/mini.png"><h3>Schleifservice<h3></li>
 <li><img class="checkbox" src="Homepage/img/mini.png"><h3>Oberflächenbehandlung<h3></li>
 <li><img class="checkbox" src="Homepage/img/mini.png"><h3>Estrichsanierung<h3></li>
 <li><img class="checkbox" src="Homepage/img/mini.png"><h3>Parkettpflege<h3></li>
 <li><img class="checkbox" src="Homepage/img/mini.png"><h3>Wasserschäden<h3></li>
 </ul> <!-- ul list ends -->
 </section> <!-- second section ends -->
 </article> <!-- article content ends -->
 <aside id="aside">
 <section id="aside_section">
 <a href="#"><h1>Bildergalerie</h1></a>
 <div class="picz">
 <h5>Parkett, Fertigparkett</h5>
 <img class="bilder" src="Homepage/img/Unbenannt-2.jpg">
 <p><span class="pic_quallery">» zur Bildergalerie</span></p>
 </div> <!-- ends picz -->
 <div class="picz">
 <h5>Parkett, Fertigparkett</h5>
 <img class="bilder" src="Homepage/img/Unbenannt-2.jpg">
 <p><span class="pic_quallery">» zur Bildergalerie</span></p>
 </div> <!-- ends picz -->
 <div class="picz">
 <h5>Parkett, Fertigparkett</h5>
 <img class="bilder" src="Homepage/img/Unbenannt-2.jpg">
 <p><span class="pic_quallery">» zur Bildergalerie</span></p>
 </div> <!-- ends picz -->
 <div class="picz">
 <h5>Parkett, Fertigparkett</h5>
 <img class="bilder" src="Homepage/img/Unbenannt-2.jpg">
 <p><span class="pic_quallery">» zur Bildergalerie</span></p>
 </div> <!-- ends picz -->
 </section> <!-- aside section end -->
 <section class="call">
 <div class="ja_bg">
 <div id="beratung">
 <h3>Beratung? 0163-2406489</h3>
 <div class="ja">
 <h3>JA</h3>
 </div> <!-- ends ja -->
 </div> <!-- beratung end -->
 </div> <!-- ja_bg div ends -->
 <div class="ja_bg">
 <div id="beratung">
 <h3>Beratung? 0163-2406489</h3>
 <div class="ja">
 <h3>JA</h3>
 </div> <!-- ends ja -->
 </div> <!-- beratung end -->
 </div> <!-- ja_bg div ends -->
 </section> <!-- call section ends -->
 </aside> <!-- ends aside -->
 </div> <!-- ends wrapper -->
 <footer id="footer">
 <ul>
 <li><img id="footer_logo" src="Homepage/img/footer_logo.png"></li>
 <li>Dürerstrasse 3a</li>
 <li>76149 KA-Neureut</li>
 <li>Tel: 0721-569876</li>
 <li>Fax: 0721-569873</li>
 <li>Mobil: 0163-2406498</li>
 <li class="watermarks"><img src="Homepage/img/twitter.png"></li>
 <li class="watermarks"><img src="Homepage/img/twitter.png"></li>
 <li id="footer_nav"><a href="#">Home</a> | <a href="#">Kontakt</a> | <a href="#">Impressum</a> | <a href="#">Sitemap</a></li>
 </ul>
 </footer> <!-- footer ends -->
</body>
</html>

Würde mich echt sehr freuen, wenn mir jemand helfen würde.

mit Freundlichen Grüßen
Crunyk187

BTW; Ihr braucht nicht den HTML code umzuschrieben. Würde mich einfach nur um verbesserungsvorschläge freuen.

Anzeige

Murdoc · 20. Juli 2014

AW: HTML code für meine Seite gut?

Du hast bereits hier schon mal nach Vorschlägen/Kritik gebeten, dich aber nicht mehr dazu geäußert und (wenn man das verlinkte Bild ansieht) diese auch nicht angenommen.

Das Ganze sieht mir mehr nach billiger Werbung für deinen Parkett-Service aus.

Wenn dem nicht so ist kannst du dich gerne per PN an mich wenden.

~ geschlossen

Yeyo187 · 28. Juni 2015

Meine Seite und brauche Hilfe

Hallo liebe CC,

übe mich zur zeit an HTML und CSS und würde gerne meine eigene Seite machen. Habe auch schon mit anfangen und würde euch gerne darum zu bitten kurz über den Code zu gucken und mir sagen was da falsch ist.

Hier mal ein Bild

so soll meine Seite zum Schluss aussehen. Soll dann noch ein Content Div geben wo man dann ins Sichtfeld scrollen kann

Das habe ich schon gemacht

Parkett Expert

Hier ist mal der HTML code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Parkett Expert</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>
<div id="wrapper">
<div id="upper_line">
<div id="partner"><h5><a href="#"> www.bretthauer-raumgestaltung.de</a></h5></div>
<div id="data"><h5><a href="#">»Impressum</a><a href="#"> »Datenschutz</a></h5></div>
</div>
<header>
<a href="#"><img id="logo" src="img/logo.png" title="Startseite"></a>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Service</a>
<ul>
<li><a href="#">Verlegung</a></li>
<li><a href="#">Schleifservice</a></li>
<li><a href="#">Oberflächenbehandlung</a></li>
<li><a href="#">Estrichsanierung</a></li>
<li><a href="#">Wasserschaden</a></li>
<li><a href="#">Leisten</a></li>
</ul>
</li>
<li><a href="#">Referenzen</a></li>
<li><a href="#">Angebote</a></li>
<li><a href="#">Kontakt</a>
<ul>
<li><a href="#">Angebot</a></li>
<li><a href="#">Beratungsterming</a></li>
</ul>
</li>
</ul>
</nav> 
</header> 
<div id="slider">
</div> 

</div> 
</body>
</html>

Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Das hier ist der CC

@charset "utf-8";

* { margin:0; padding:0; }

body { font-family:Verdana; background:#FFFFFF; }

#wrapper { width:100%; height:100%; }

#upper_line { width:100%; height:35px; border-bottom:1px solid #000000; }

#partner { float:left; margin:15px 0 0 15px; }
#partner a { color:#000000; text-decoration:none; }
#partner a:hover { text-decoration:underline; }

#data { float:right; margin:15px 15px 0 0; }
#data a { color:#000000; text-decoration:none; padding:0 0 0 5px; font-size:12px; font-weight:normal; }
#data a:hover { text-decoration:underline; }

header { width:1365px; height:135px; margin:0 auto; clear:both; position:relative; }

#logo { position:absolute; top:40px; left:15px; }

nav { position:absolute; left:613px; }
nav li { position:relative; list-style:none; float:left; width:150px; height:135px; text-align:center; line-height:135px; }
nav li a { text-decoration:none; color:#000000; font-family:Verdana; font-weight:bold; font-size:14px; display:block; }
nav li a:hover { color:#000000; background:#e3e3e3; transition:all 500ms; border-bottom:2px solid #7e0000; }

nav ul li ul { position:absolute; }
nav ul li ul li { display:none; }
nav ul li:hover ul li { display:block; }
nav ul li ul li { width:250px; height:30px; line-height:30px; background:#e3e3e3; text-align:left; text-indent:40px; border-top:1px solid #f5f3f3; }
nav ul li ul li a:hover { width:250px; height:30px; text-decoration:underline; }
nav ul li ul li:first-child{ border:none; }

#slider { width:100%; height:640px; background:url(../img/slide_2.jpg); }

Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

könntet Ihr mich bitte dabei unterstützen und mir sagen was bei den codes nicht stimm und wie ich es besser machen kann?

danke schon mal im Vorraus für eure Hilde...bin euch echt sehr sehr sehr dankbar

Nützliche Suchen

HTML5-Code Korrektur

Videos zum Themenbereich