บทที่ 1 HTML5 เบื้องต้น

       ประเดิมด้วย HTML5 กันเลยครับ บทนีจะนำเสนอรูปแบบการเขียนแบบใหม่ ที่ถูกปรับปรุงจาก HTML มาเริ่มกันเลยครับ
Support Browser


การพัฒนาจาก HTML เป็น HTML5
      การเขียน HTML ในสมัยก่อน จะต้องเปิดแท็ก เยอะและยุ่งยาก ดังตัวอย่าง


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//
EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
           <meta http-equiv="Content-Type" content="text/html;  charset=UTF-8" />
           <title>Old</title>
           <link type="text/css" rel="stylesheet" href="style.css" />
           <script type="text/javascript" src="scripts.js"></script>
    </head>
    <body>
            <h1> My Old Site </h1>
    </body>
</html>
       ปัญหาที่พบ นั้นก็คือ หลายๆ คนจำแท็กของ HTML ไม่ได้ บางคนก็ประกาศแท็กครบ หรือบางคนก็ประกาศแท็กไม่ครบ ซึ่งทำให้เกิดปัญหาในการ Run บนเว็บ ทำให้ไม่เป็นมาตรฐานตายตัว
มาเจอะลึกทีละแท็กเลยครับ

DOCTYPE

การประกาศแท็ก ของ HTML  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//
EN" "http://www.w3.org/TR/html4/loose.dtd">
เมื่อเป็น HTML5 ได้ตัดโค้ดให้เหลือน้อยลง เอาเฉพาะส่วนที่ใช้งานจริงๆ เท่านั้น
<!DOCTYPE html>

META

การประกาศแท็ก ของ HTML
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
รูปแบบ HTML5
<meta charset="utf-8">
SCRIPT AND LINK TYPES

การเรียกไฟล์ หรือสคริปจากภายนอก ซึ่ง HTML จะเรียกใช้แบบนี้
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="scripts.js"></script>
ซึ่ง HTML5 ได้ตัดให้สั้นลง 
<link rel="stylesheet" href="style.css">
<script src="scripts.js">
สรุปโค้ด HTML5 แบบเต็มๆ ครับ
<!DOCTYPE html>
<html lang="en">
               <head>
                        <meta charset="utf-8"><title>New</title>
                        <link rel="stylesheet" href="style.css">
               </head>
                <body>
                          <h1> My New Site </h1>
                          <script src="scripts.js"></script>
                </body>
</html>
จะเห็นได้ว่า โค้ดมีความสั้นลง ดูเรียบง่าย เป็นระเบียบ ไม่เยอะเหมือนแต่ก่อนเลย !



1 comments:

Anonymous said...

Thanks a lot...

Post a Comment