วันศุกร์ที่ 13 มกราคม พ.ศ. 2555

CSS - รู้จัก HTML


ปัจจุบัน HTML ได้พัฒนาขีดความสามารถในการทำงานให้มีประสิทธิภาพมากขึ้น คือ
1. HTML เป็นภาษามาร์คอัพมาตรฐานที่ถูกกำหนด เพื่อให้เวบบราวเซอร์รุ่นใหม่ที่พัฒนาขึ้นสามารถสนับสนุนการทำงานของ HTML ได้อย่างมีประสิทธิภาพ
2. HTML ถูกออกแบบมาเพื่อสนับสนุนการทำงานร่วมกับแอพพลิเคขั่น และโปรโตคอลของภาษา XML
3. HTML สามารถตรวจสอบข้อผิดพลาดจากการกำหนดแท็กคำสั่ง และแจ้งเตือน เหมือนคุณสมบัติหนึ่งของ XML
4. HTML สามารถทำงานร่วมกับอุปกรณ์ไร้สาย และอุปกรณ์แสดงผลข้อมูลชนิดต่างๆ ได้เป็นอย่างดี และยังมีเครื่องพิเศษช่วยให้เวบได้กับบราวเซอร์รุ่นเก่าได้อีกด้วย
5. HTML ช่วยให้นักพัฒนาเวบไม่ต้องกังวลกับการแสดงผลบนคอมพิวเตอร์ที่ต่างกัน เนื่องจากนักพัฒนาเวบสามารถจัดรูปแบบการนำเสนอด้วย CSS ได้
แท็กคำสั่ง HTML ใหม่ๆ
1. แท็ก <code>
     ใช้แสดงผลโค้ดคำสั่งของคอมพิวเตอร์
      html01.htm
      <p>
      <code>
      # open the listing file<br/> unless (open (MYDATA, "data.txt"))<br/> (die "countn't open data file\n")
      </code>
      </p>
       เป็นการกำหนดโค้ดคำสั่งแท็ก <code> แทรกไว้ในแท็ก <p> เพื่อจัดแบ่งโครงสร้างเนื้อหาให้เป็นระเบียบ
2. แท็ก <div>
    หรือเรียกว่า "division" ใช้จัดกลุ่มเนื้อหาหรือขอบเขตของเนื้อหาในลักษณะบล็อก นิยมใช้คูกับ CSS เพื่อกำหนดการแสดงผลแบบกลุ่ม และสามารถแทรกข้อความแบบขีดเส้นใต้ พารากราฟ และสัญญลักษณ์ (bullet) ภายในบล็อกได้ นอกจากนี้ยังใช้เป็นวิธีจัดแบ่งโครงสร้างส่วนที่เป็นเนื้อหาและส่วนที่เป็นพื้นที่เวบ คือช่วยเวบเพจบรรจุรายละเอียดต่างๆ ได้สวยงามมากขึ้น เช่น branner, footer และ sidebar
      html02.htm
      <div>
           <p>รายชื่อหนังสือ</p>
           <ul type "square">
                <li>เทคโนโลยีเชิงวัตถุ</li>
                <li>Web Programming ด้วย Dramweaver CS3, PHP และ AJAX </li>
                <li>การออกแบบ พัฒนา และดูแลระบบฐานข้อมูล</li>
                <li>PHP</li>
                <li>โครงสร้างข้อมูลและอัลกอริทึ่ม</li>
            </lu>
3. แท็ก <span>
     ใช้จัดกลุ่มเนื้อหาในพารากราฟไม่ให้ขึ้นบรรทัดใหม่ นอกจากนี้ยังสามารถแทรกแท็ก <a> เชื่อมโยงข้อความในพารากราฟ หรือแท็ก <storng> เน้นคำหรือข้อความ
      html03.htm
      <span style="color:#90c">
      <storng>หนังสือออกใหม่</storng>
      <a href="www.ktpbook.com">เทคโนโลยีเชิงวัตถุ</a></span>
แท็ก HTML ที่ถูกลืม
1. แท็ก <font> ใช้แสดงผลควบคุมการแสดงผลข้อความ
2. แท็ก <b> ใช้แสดงผลตัวหนา ถูกแทนที่ด้วย <storng> ใน CSS และ <i> ใช้แสดงตัวเอียง ถูกแทนที่ด้วย <em> ใน CSS
3. แท็ก <table> ใช้สร้างตารางบนเวบเพจ ใช้ CSS กำหนด layout แทน เพื่อการโหลดเวบที่รวดเร็ว และโครงสร้างคำสั่งไม่ซับซ้อน
4. แท็ก <body>ใช้บรรจุ element และเนื้อหาต่างๆ บนเวบ ใช้ CSS กำหนดแอททริบิ้วต่างๆ ให้กับเนื้อหาบนเวบเพจ เช่น background, bgcolor, text, link, alink, vlink, left-margin, top-margin, margin-width และ margin-height
5. แท็ก <br/> ใช้ขึ้นบรรดทัดใหม่ให้กับข้อความ โดยไม่มีการสร้างพารากราฟใหม่ ใช้ CSS ควบคุม margin
เทคนิคการใช้งาน HTML
1. เวบเพจแต่ละหน้าควรใช้ <h1> ในการกำหนดหัวข้อเพียงแท็กเดียวเท่านั้น เพราะการกำหนด <h1> จะช่วยให้ search engine อ้างอิงไปยัง element ต่างๆ ได้เร็วยิ่งขึ้น
2. การกำหนดหัวข้อให้กับเวบเพจมีความสำคัญ เพราะเป็นส่วนแสดงถึงเนื้อหาของเวบ ต้องกำหนดหัวข้อให้สัมพันธ์กับเนื้อหาของเวบให้มากที่สุด <h1> และกำหนดหัวข้อลำดับถัดไป <h2> เป็นต้น
3. ใช้แท็ก <p> จัดข้อความในพารากราฟ
4. ใช้แท็ก <ul> แสดงผลข้อมูลแบบไม่เรียงลำดับ โดยใช้สัญญลักษณ์ในการกำหนดรายการ
5. ใช้แท็ก <ol> แสดงผลข้อมูลแบบเรียงลำดับ โดยใช้ตัวเลขในการเรียงลำดับ
6. สร้างอภิธานศัพท์ (Glossary) ประกอบด้วย คำศัพท์ (term) นิยาม (Definition) หรือคำอธิบาย (Description) โดยใช้ <dl> กำหนดรายชื่อนิยามของคำศัพท์ โดยใช้ร่วมกับแท็ก <dt> ใช้กำหนดนิยาม และแท็ก <dd>ใช้กำหนดคำอธิบายศัพท์
7. การใส่ Quotation Link ให้กับข้อความเพื่อเชื่อมโยงไปยังเวบไซต์อื่น และต้องใช้แท็ก <blockquote> สำหรับข้อความยาวมากๆ แต่หากไม่เกิน 1 บรรทัด สามารถใช้แท็ก <q> ได้เลย
8. ใช้แท็ก <cite> เพื่อกำหนดข้อมูลที่ใช้อ้างอิงชื่อหนังสือ, บทความหนังสือพิมพ์ หรือเวบไซต์และใช้แท็ก <address> เพื่อระบุข้อมูลที่ใช้ติดต่อสื่อสาร ข้อมูลผู้พัฒนาเวบ หรือข้อมูลลิขสิทธิ์
9. ใช้แท็ก HTML และ CSS เพื่อควบคุมการแสดงผลข้อความหรือภาพบนเวบเพจ
10. หากไม่กำหนดแท็ก HTML บนเวบ ให้แท็ก <div> และ <span> ก็ได้
11. สร้าง Navigation bar โดยใช้แท็ก <div> สร้างรายชื่อลิงค์เชื่อมโยงไปยังส่วนที่ต้องการ ใช้แท็ <ul> เพื่อแสดงสัญญลักษณ์ไว้หน้ารายชื่อลิงค์
12. กำหนดแท็กปิดทุกครั้ง ยกเว้นแท็กเดี่ยว เช่น <br />, <img /> เป็นต้น
13. ตรวจสอบเวบไซต์โดยใช้ W3C Validator เพื่อตรวจสอบแสดงข้อผิดพลาดของเวบให้เราทราบ
ความสำคัญ Doctype
Doctype หรือ Document Type Definition (DTD) เป็นตัวกำหนดโครงสร้างของเวบเพจ เพื่อบอกให้เวบบราวเซอร์ทราบว่า เวบเพจสร้างขึ้นใช้ภาษาและคำสั่งของ HTML รุ่นใด ชนิดใด หากต้องการแสดงผลเวบได้อย่างถูกต้อง เราต้องประกาศ Doctype ในส่วนเริ่มต้นของเพจ หรือกำหนดไว้ที่บรรทัดแรกของเอกสาร
HTML สามารถประกาศ Doctype ได้ 3 ลักษณะ คือ
1. Transitional ประกาศให้บราวเซอร์เวอร์ชั่นเก่าเข้าใจภาษา HTML เพราะอาจมีบางแท็กไม่สามารถแสดงผลกับบราวเซอร์เวอร์ชั่นเก่าได้
2. Strict ประกาศเพื่อให้สามารถตรวจสอบความถูกต้องของไวยกรณ์ตามโครงสร้างของ XML  และกำหนดให้จัดรูปแบบนำเสนอด้วย CSS ในเอกสาร HTML จะใช้เป็นเวอร์ชั่น 4.01
3. Frameset ประกาศให้รู้ว่าเอกสารนี้ใช้ <frameset> ในการแบ่งหน้าต่างของบราวเซอร์เป็นเฟรมย่อย โดยเอกสารที่จะประกาศจะเป็น HTML 4.01 Frameset

ไม่มีความคิดเห็น:

แสดงความคิดเห็น