เอเลเม็นท์ Grouping, Text-Level และเอเลเม็นท์เก่าฉบับปรับปรุงใหม่


หน้าแรก HTML5 เอเลเม็นท์ Grouping, Text-Level และเอเลเม็นท์เก่าฉบับปรับปรุงใหม่
ในบทที่แล้วคุณได้รู้จักกับเอเลเม็นท์ใหม่ๆ ใน HTML 5ไปแล้ว ซึ่งเอเลเม็นท์เหล่านั้นทำให้คุณวางโครงสร้างเพจได้ ในบทนี้คุณจะได้รู้จักเอเลเม็นท์ของ HTML 5 เพิ่มเติม (เช่น figure, time, details, mark เป็นต้น) รวมถึงเอเลเม็นท์เก่าบางตัวที่มีการปรับเปลี่ย น(เช่น address, s, cite, ol, dl, small, b, strong, i,em, abbr, hr เป็นต้น )

จัดการรูปภาพและบรรยายภาพด้วยเอเลเม็นท์ figure และ figcaption


เอเลเม็นทื figure จะช่วยจัดการภาพและใส่คำบรรยายภาพให้คุณ สมัยก่อนต้องใช้ Div หรืออะไรที่คล้ายๆ แล้วค่อยเพิ่มข้อความ figureไม่จำเป็นต้องเป็นภาพเสมอไป เป็น วีดีโอหรืออื่นๆได้
ชุดคำสั่งที่2.1 ภาพพร้อมคำบรรยายด้วย figure


  Code
<figure>
<img src="image/twitter.jpg" width="294" height="231">
<figcaption>
<p><strong> Twiitter</strong> </p>
</figcaption>
</figure>


รับทำเว็บ webUB.com

รูปที่ 2.1 ภาพพร้อมคำบรรยายด้วย figure


figureใช้กับหลายๆภาพ


ชุดคำสั่งที่ 2.2 การใช้figureบรรยายภาพหลายๆอัน


  Code
<figure>
<img src="image/twitter.jpg" width="348">
<img src="image/FB.jpg" width="479">
<figcaption><center>FB-TW</center></figcaption>
</figure>



รับทำเว็บ webUB.com

รูปภาพ 2.2 .2 การใช้figureบรรยายภาพหลายๆอัน

จัดการวันที่และเวลาด้วยเอเลเม็นท์ Time


เอเลเม็นท์time เปิดโอกาสให้คุณได้ใส่วันที่และเวลาด้วยภาษาที่คอมพิวเตอร์เข้าใจ แล้วแสดงผลในแบบที่ผุ็ใช้อ่านออก เอเลเม็นท์time มีแอทริบิวต์2ตัวให้เลือกใช้ คือ
datetime:ผู้ใช้จะเห็น้เนื้อหาที่อยู่ในแท็ก timeแต่คอมพิวเตอร์จะอ่านค่า datetime นั้นคือ dateatime="2011-04-01T16:00Z" ส่วนของเวลาในค่านี้(T16:00)มีหรือไม่มีก็ได้ และคุณสามารถเพิ่ม Time Zoneได้ด้วยตัวอย่างเช่น T16:00+04:00ส่วน Zนั้นแทน Universal Coordinated Time (UTC) ซึ่งเหมือนกับการเพิ่ม Time Zoneเป็น +00:00
pubdate: pubdate คือ แอททริบิวต์ Boolean เป็นตัวแสดงผลวันและเวลาในการเผยแพร่ข้อมูลของเอเลเม็นท์ article ตัวแม่ที่ใกล้ที่สุด ถ้าไม่มีเอเลเม็นท์ article ตัวแม่ pubdate ก็อ้างอิงถึงเอกสาร
ชุดคำสั่ง Time


  Code
<time pubdate datetime="2011-04-01T16:00">1st Aprit 2011 at 4pm</time> ชุดที่1
<time pubdate datetime="2012-04-25">Christmas Dat 2010</time>



สร้างเอฟเฟ็กต์การแสดง/ซ่อนเนื้อหาด้วยเอเลเม็นท์ details


เอเลเม็นท์details อันใหม่นี้จะสร้างเอฟเฟ็กต์การเปิด-ปิดเนื้อหาให้คุณโดยไม่พึงJavaScript/CSSเลย เอเลเม็นท์ summary สามารถซ้อนอยู่ในdetailsได้ เอเลเม็นท์details มีแอททริบิวต์ตัวหนึ่ง คือ open ถ้าเป็นTrueมันจะแสดงdetail แต่ถ้าไม่ใช่ details จะไม่เปิด
ชุดคำสั่ง ตัวอย่างการเขียนเอเลเม็นท์details


  Code
<details open>
<summary>header </summary>
boby
</details>



ใส่ข้อมูลติดต่อด้วยเอเลเม็นท์address


ในคุณลักษณะของHTML5 ได้ระบุไว้ว่าเอเลเม็นท์ addressอยู่กลุ่มเดียวหับ sectionเช่นเดียวกับ nav,article
ชุดคำสั่ง การใช้เอเลเม็นท์address
<address>Data Email,Tel,Facebook,Twitter</address>
ไฮไลท์ข้อความด้วยเอเลเม็นท์mark
เอเลเม็นท์mark มีไว้ไฮไลท์ข้อความหรือเน้นข้อความในเอกสาร
ชุดคำสั่ง 2.5 การใช้เอเลเม็นท์ mark


  Code
<!doctype html>
<html>
<head>
<meta charset="windows-874">
<title>HTML 5</title>
<style>
mark {background-color:#06F; font-weight:bold;}
</style>
</head>
<body>
<mark>HTML5</mark>
</body>
</html>



แสดงผลข้อมูลที่ไม่ถูกต้องและไม่เกี่ยวข้องด้วยเอเลเม็นท์ s


เดิมทีเอเลเม็นท์ x ใช้เพื่อขีดฒ่าข้อความ แต่ในHTML5มีการเปลียนแปลงให้ใช้ s
ชุดคำสั่งที่ 2.6 เอเลเม็นท์ s


  Code
<body>
<p><s>HTML4</s></p>
</body>



เอเลเม็นท์ cite


ในHTML 5 citeได้รับปรับปรุงใหม่ สมัยยังเป็น HTML 4จะใช้ citeกับชื่อเจ้าของ Quote หรือคำพูดอื่นๆ
ชุดคำสั่ง 2.7การใช้เอเลเม็นท์ cite


  Code
<body>
<p><cite>HTML4</cite></p>
</body>




เอเลเม็นท์ ol


เอลเลเม็นท์ol ที่เคยใช้สร้างรายการเรียงลำดับ ตอนนี้มีการปรับปรุงโดยมี 3 แอททรบิวต์
- Start
- Reversed
- Type

ชุดคำสั่ง การใช้เอเลเม็นท์ol


  Code
<ol แอททรบิวต์(start,reversed,type)ฬ
<li> </li>
<li> </li>
</ol>



เอเลเม็นท์ dl


ใน HTML 4 เอลเลม็นท์ dlใช้กับคำนิยามแต่ใน HTML 5ได้นำมาปรับเปผลียนใหม่ให้เข้าใจง่ายขึ้น
ชุดคำสั่ง การใช้เอเลเม็นท์ dl


  Code
<dl>
<dt> </dt>
<dd> </dd>
</dl>



เอลเม็นท์ small


ในHTML 4เอเลเม็นท์ smallช้วยลดขนาดของข้อความ แต่ในHTML 5 เอเลเม็นท์ small ใช้แสดงข้อความจำพวก ข้อมูลลิขสิทธิ์มเงื่อนไข เป็นต้น
ชุดคำสั่งการใช้ เอเลเม็นท์ small


  Code
<small> </small>



เอเลเม็นท์ bและ strong


ใน HTML 4 เอเลเม็นท์bใช้เพื่อเน้นข้อควา แต่ใน HTML 5 ใช้เพื่อตกแต่งข้อความเฉยๆ
ชุดคำสั่ง การเขียนเอลเม็นท์ bและstrong


  Code
<b> </b>
<strong> </strong>



เอเลเม็นท์ i และ em


ในHTML 4 iใช้เป็นตัวเอียง แต่ในHTML 5 จะใช้กับข้อความที่เกี่ยวข้องกับเสียงของอารมณ์ และ emใช้ในการเปลียนควาหมายของข้อความ
ชุดคำสั่ง การเขียนเอเม็นท์ iและ em


  Code
<i>Text.................</i>
<em>Text...............</em>





เอเลเม็นท์ addr


เอเลเม็นท์addr ไม่ใช่ของใหม่ในHTML 5 addr ย่อมาจาก Addreviation สามารถใช้ แอททริบิวต์ titleได้ด้วย
ชุดคำสั่ง การเขียนเอลเม็นท์ addr


  Code
<addr title="">Text........................</addr>



เอเลเม็นท์ hr


เดิมทีเอลบเม็นท์ hrเป้นการใช้สร้างเส้นแนวนอน มาตอนนี้ถูกใช้เพื่อแทนการคันหน้า
ชุดคำสั่ง การเขียนเอเลเม็นท์
<hr>

เอเลเม็นท์ที่หายไปในHTML5


- acronym(ใช้ addr แทน)
- applet(ใช้ object แทน)
- basefont(ใช้ CSS แทน)
- big(ใช้ CSS แทน)
- cenetr(ใช้ CSS แทน)
- frame(แต่iframeยังอยู่)
- frameset
- noframes
- font(ใช้ CSS แทน)
- scrike(ใช้ s หรือ del แทน)
- tt(ใช้ CSS แทน)
- u(ใช้ CSS แทน)

ใช้WAI-ARIA กับHTML 5


Web Accessibility Initiatives Accesible Rich Internet Appication(WAI-ARIA) เรียกสั้นๆว่า ARIA เป็นสิ่งที่ช่วยให้เว็บแอพพิเคชัน กับ เว็บเพจสามารถเข้าถึงได้ในวงกว้าง เนื้อหาในที่นั้จะครอบคลุมถึง Landmark Roles ของ ARIA
Landmark Roles คือ ส่วนต่างๆของเพจที่ถูกกำหนดให้เป็นแลนด์มาร์ค สำหรับการใช้ดูเพจซึ้งแลนด์มาร์คมีมากกว่า 50รายการ เราได้คัดเฉพาะที่พบมากและใช้ทั่ไป
- role="article"
- role="banner"
- role="contentinfo"
- role="form"
- role="heading"
- role="main"
- role="navigation"
- role="search"
คุณสามารถหยิบเอาไปใส่ในโค็ดของคุณได้ง่ายๆดังนี้
<form role="search">.........................................</form>


สรุป


ในบททนี้ คุณได้เรียนรู้เกี่ยวกับเอเลเม็นท์ใหม่ๆ และเอเลเม็นท์เก่าๆ ที่ได้รับการปรับปรุงใหม่ในHTML 5 โดเอเลเม็นท์ใหม่ๆ อย่างเช่น figureและdetailsนั้น มั่นใจได้เลยว่าเอเลเม็นท์นี้จะช่วยให้นักพัฒนาทำงานได้ง่ายๆขึ้นในอนาคต

refer: http://html5.orgfree.com/HTML_Teach2_4.html

ขึ้นไปด้านบน