ผู้เขียน หัวข้อ: HTML5 +CSS3 กับการจัดหน้าเว็บด้วยอิลิเม็นต์ใหม่ (อ่าน 6143 ครั้ง)

B_O_Y · « **เมื่อ:** 13, พฤศจิกายน 2013, 12:51:20 PM »

[โค้ด HTML]

อ้างถึง

<!doctype html>
<html lang="th">
<head>
<meta charset="utf-8">
<title>เลย์เอาท์</title>
<link rel="stylesheet" href="main.css">
</head>

<body>
 <header>
 <center>header</center>
</header>
<nav>
 <center>nav</center>
</nav>
<section id="container">
 <article class="left">
 <center>article left</center>
  
  
  
  
  
  
  
  
  
  
</article>
<article class="right">
 <center>article right</center>
  
  
  
  
  
  
  
  
  
  
</article>

<aside>
 <center>aside</center>
  
  
  
  
  
  
  
  
  
  
</aside>
</section>
<footer>
 <center>footer</center>
  
  
</footer>

</body>
</html>

[โค้ด CSS]

อ้างถึง

[แอท]charset "utf-8";
/* CSS Document */
body{
   font-family: 12px Tahoma, Geneva, sans-serif;
background-image: url(); /*ใส่พื้นหลังรูปภาพ*/
   background-position: top center; /* วางตำแหน่งรูปภาพเป็นตรงกลาง*/
   margin-left: 0px;
margin-top: 4px;
margin-right: 0px;
margin-bottom: 0px;

}

header{
   margintop: ;
   background-color: #3FF;
   height: 200px;
   width: 1024px;
   margin: auto;

}

nav{
   width: 1024px;
   height: 25px;
   margin: auto;
   background: #F6F;


}

#container{
   background: #F6F;
   width: 1024px;
   margin: auto;


}

.left{
   float: left;
   clear: both;
   width: 180px;
   background-color: #F96;

}

.right{
   float: left;
   width: 644px;
   background-color: #9F6;

}

aside{
   float: right;
   width: 200px;
   background-color: #C69;


}

footer{
   width: 1024px;
   height: 80px;
   margin: auto;
   background-color: #C9F;
   clear: both;


}

สังเกตุเห็นได้ชัดว่าเราจะไม่ใช้ DIV เลยครับ และแต่ละอิลิเม็นต์ตรงตามวัตถุประสงค์ของความหมายอิลิเม็นต์ ซึ่งจะส่งผลดีต่อ SEO อีกทางหนึ่ง
ลองดูกันนะครับ เพื่อพัฒนาต่อๆไป

silvermeteor

มาตรฐานนี้โค้ดสะอาดตาขึ้นเยอะครับ

donutman

ทำแรกๆอย่างงง ทำไปทำมาดูเรียบร้อยสะอาดตาคับ

tiargomes

เป็นโค้ดที่ดีนะครับ ดูง่ายดี

aiboyba

html5 เป็นมิตรกับ search engine อย่างอากู๋ด้วยนะครับ ซึ่งมันจะต่อยอดไปเป็นข้อมูลที่มีโครงสร้างได้ครับ
เพิ่มเติมเกี่ยวกับ html5 ที่นี่เลย - boyeng3k.blogspot.com จะเป็นข้อมูลเกี่ยวกับ semantic element ต่างๆ ครับ เช่น aside footer header ลองดูจ้า

aimbestdesign

เมื่อก่อนผมก็ใช้ DIV เยอะ แต่เดี๋ยวนี้ก็เปลี่ยนมาใช้แบบนี้แทนเหมือนกันครับ
มีประโยชน์มากครับ

vilet224

ผมก็ใช้แบบนี้ครับ ดูง่ายครับ ถ้ามีแต่ div เหมือนมะก่อนนี้ดูยากไปนิด

smfjusthost.com	Simple Machines	computer	justusers.net
hosting	smf	FAQ	classic
domain	Configuration	knowledges	articles
smf service	modification	network	contact

HTML5 +CSS3 กับการจัดหน้าเว็บด้วยอิลิเม็นต์ใหม่