Home Webboard ArticlesKnowledges  

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

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

ออฟไลน์ B_O_Y

  • ถ้าเราเปลี่ยนความคิดได้ เราก็เปลี่ยนชีวิตได้
  • Just Member
  • *****
  • กระทู้: 170
  • เห็นด้วย&ขอบคุณ: 64
  • เพศ: ชาย
[โค้ด HTML]

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

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

<aside>
       <p><center>aside</center></p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
</aside>
</section>
    <footer>
       <p><center>footer</center></p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
    </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

  • Ju
  • *
  • กระทู้: 4
  • เห็นด้วย&ขอบคุณ: 0
    • webONE studio
Re: HTML5 +CSS3 กับการจัดหน้าเว็บด้วยอิลิเม็นต์ใหม่
« ตอบกลับ #1 เมื่อ: 19, ธันวาคม 2013, 02:48:12 PM »
มาตรฐานนี้โค้ดสะอาดตาขึ้นเยอะครับ :smiley:

ออฟไลน์ donutman

  • Ju
  • *
  • กระทู้: 4
  • เห็นด้วย&ขอบคุณ: 0
  • เพศ: ชาย
    • เครื่องเป่ามือ
Re: HTML5 +CSS3 กับการจัดหน้าเว็บด้วยอิลิเม็นต์ใหม่
« ตอบกลับ #2 เมื่อ: 12, กุมภาพันธ์ 2014, 04:58:44 PM »
ทำแรกๆอย่างงง ทำไปทำมาดูเรียบร้อยสะอาดตาคับ
ตามหา เครื่องเป่ามือ

ออฟไลน์ tiargomes

  • tiargomes
  • Ju
  • *
  • กระทู้: 1
  • เห็นด้วย&ขอบคุณ: 0
    • sbobet asia
Re: HTML5 +CSS3 กับการจัดหน้าเว็บด้วยอิลิเม็นต์ใหม่
« ตอบกลับ #3 เมื่อ: 26, มิถุนายน 2014, 06:23:02 PM »
เป็นโค้ดที่ดีนะครับ ดูง่ายดี

ออฟไลน์ aiboyba

  • Just
  • **
  • กระทู้: 21
  • เห็นด้วย&ขอบคุณ: 4
    • รับจำนำโน๊ตบุ๊ค
Re: HTML5 +CSS3 กับการจัดหน้าเว็บด้วยอิลิเม็นต์ใหม่
« ตอบกลับ #4 เมื่อ: 29, มิถุนายน 2014, 01:00:10 PM »
html5 เป็นมิตรกับ search engine อย่างอากู๋ด้วยนะครับ ซึ่งมันจะต่อยอดไปเป็นข้อมูลที่มีโครงสร้างได้ครับ
เพิ่มเติมเกี่ยวกับ html5 ที่นี่เลย - boyeng3k.blogspot.com จะเป็นข้อมูลเกี่ยวกับ semantic element ต่างๆ ครับ เช่น aside footer header ลองดูจ้า
jumnum2go

ออฟไลน์ aimbestdesign

  • Just Mem
  • ****
  • กระทู้: 92
  • เห็นด้วย&ขอบคุณ: 33
  • รับทำเว็บไซต์ รับออกแบบเว็บไซต์
    • AimBestDesign รับทำเว็บไซต์
Re: HTML5 +CSS3 กับการจัดหน้าเว็บด้วยอิลิเม็นต์ใหม่
« ตอบกลับ #5 เมื่อ: 11, สิงหาคม 2014, 10:55:09 PM »
เมื่อก่อนผมก็ใช้ DIV เยอะ แต่เดี๋ยวนี้ก็เปลี่ยนมาใช้แบบนี้แทนเหมือนกันครับ
มีประโยชน์มากครับ
รับทำเว็บไซต์ รับออกแบบเว็บไซต์ เว็บไซต์รองรับบนมือถือ

ออฟไลน์ vilet224

  • -Mod SMF-
  • *
  • กระทู้: 270
  • เห็นด้วย&ขอบคุณ: 123
    • รับทำเว็บบอร์ด
Re: HTML5 +CSS3 กับการจัดหน้าเว็บด้วยอิลิเม็นต์ใหม่
« ตอบกลับ #6 เมื่อ: 12, สิงหาคม 2014, 02:03:16 AM »
ผมก็ใช้แบบนี้ครับ ดูง่ายครับ ถ้ามีแต่ div เหมือนมะก่อนนี้ดูยากไปนิด

 

Sitemap 1 2 3 4 5 6 7 8 9 10 
Back to top