จากบทความที่แล้วเราได้เรียนรู้เรื่อง Semantic HTML ไปแล้ว บทความนี้เราจะมาเรียนรู้คำสั่งการจัดรูปแบบเอกสารหรือการจัดข้อความกันบ้าง ซึ่งการใช้งาน Tags ต่างๆ จะทำให้ข้อมูลในเว็บไซต์ดูน่าสนใจและทำให้ User รู้สึกว่าเว็บไซต์ของเราน่าอ่านมากขึ้น ดังนั้นเราจึงต้องเข้าใจคำสั่งในการจัดรูปแบบข้อความว่ามีคำสั่งอะไรบ้าง Show คำสั่ง HTML ในการจัดรูปแบบข้อความคำสั่ง HTML ที่เราจะกล่าวถึงนี้ เป็นคำสั่ง (Tag) ที่นิยมใช้ในปัจจุบันและบางคำสั่งก็มีความสำคัญอย่างมากที่จำเป็นต้องใช้งานบนหน้าเว็บไซต์ แต่จะมีบางคำสั่งที่ต้องใช้งานตามความเหมาะสมและตามความต้องการของผู้พัฒนา เราไปดูกันเลยว่าจะมี Tag อะไรบ้าง
1. คำสั่งการกำหนดหัวเรื่อง (Headings)เป็นการกำหนดหัวข้อให้กับข้อความที่ต้องการ คือ หัวข้อที่มีลำดับสำคัญที่สุดตามด้วยหัวข้อย่อยๆ ที่มีความสำคัญรองลงมา โดยมีรูปแบบดังนี้ รูปแบบ
ตัวเลขที่กำหนดขนาดและระดับความสำคัญของหัวเรื่องอยู่ในช่วงตัวเลข 1 ถึง 6 เช่น <h2> คือหัวข้อที่สำคัญที่สุด และ <h6> คือหัวข้อที่สำคัญน้อยที่สุด หรือ <h2> ขนาดของตัวอักษรจะมีขนาดใหญ่สุด และ <h6> ขนาดของตัวอักษรจะมีขนาดเล็กสุด ดังตัวอย่างด้านล่าง ตัวอย่างโค้ด See the Pen คำสั่งการกำหนดหัวเรื่อง (Heading) by supaporn (@asria) on CodePen. ความสำคัญของการกำหนดหัวเรื่อง (Headings) อย่างที่บอกไปแล้วว่าช่วงตัวเลข 1 ถึง 6 มีความสำคัญที่ต่างกัน ซึ่งจะมีผลกับเรื่องของการจัดอันดับของ Search engine ดังนั้นการใช้ <h2> จึงมีความสำคัญมากที่สุด เพราะฉะนั้นในหนึ่งเพจจะใส่ <h2> ได้แค่หนึ่งจุดเท่านั้น ส่วน <h2> ถึง <h6> ก็ใช้เป็นหัวข้อย่อยตามความเหมาะสม 2. คำสั่งการขึ้นย่อหน้าใหม่ (Paragraphs)โดยปกติการจัดการข้อความเอกสาร HTML บนเว็บ Browser ข้อความจะถูกพิมพ์ต่อเนื่องไปเรื่อยๆ จนสุดบรรทัดแล้วจึงขึ้นบรรทัดใหม่ ทำให้ข้อความที่ปรากฏบนจอภาพไม่ได้ถูกจัดวางในตำแหน่งที่เหมาะสม จากตรงนี้เราสามารถที่จะกำหนดส่วนของข้อความในเอกสาร ให้ถูกจัดเป็นย่อหน้าใหม่ โดยใช้คำสั่ง HTML ต่างๆ ในการจัดย่อหน้าได้หลายคำสั่งดังนี้
เราลองมาดูทีละรูปแบบกันว่าการใช้งานจะแตกต่างกันยังไง Paragraphs หรือแท็ก <p>คือคำสั่งที่ใช้ในการกำหนดย่อหน้า เมื่อมีแท็กครอบที่ข้อความจะทำให้ขึ้นบรรทัดใหม่เสมอ และเบราว์เซอร์จะเพิ่มช่องว่าง (ระยะขอบ) ก่อนและหลังย่อหน้าให้โดยอัตโนมัติ รูปแบบ
ตัวอย่างโค้ด See the Pen คำสั่งการขึ้นย่อหน้าใหม่ (Paragraph) by supaporn (@asria) on CodePen. Horizontal Rules หรือแท็ก <hr>คือคำสั่งที่ใช้ในการขีดเส้นคั่น สำหรับคำสั่งนี้ไม่มีแท็กปิด มีรูปแบบดังนี้ รูปแบบ
ตัวอย่างโค้ด See the Pen คำสั่งที่ใช้ในการขีดเส้นคั่น <hr> (Horizontal Line) by supaporn (@asria) on CodePen. Line Break หรือแท็ก <br>คือคำสั่งที่ใช้ในการขึ้นบรรทัดใหม่ การขึ้นบรรทัดใหม่นั้นปกติ web browser จะทำการตัดบรรทัดให้เองอยู่แล้ว แต่การตัดคำของเว็บ Browser จะตัดเมื่อแสดงผลไม่ได้ตามขนาดหน้าจอ แต่ถ้าเราใส่คำสั่ง tag <br> เข้าไปเว็บ Browser จะตัดข้อความที่เราต้องการให้ขึ้นบรรทัดใหม่ให้ทันที เราจะใช้ Tag <br> ดังนี้ รูปแบบ
ตัวอย่างโค้ด See the Pen คำสั่งการขึ้นบรรทัดใหม่ (Line Break) by supaporn (@asria) on CodePen. จากตัวอย่างด้านบน หากต้องการให้ข้อความไหนขึ้นบรรทัดใหม่ ก็ใส่ Tag <br> ด้านหน้าข้อความนั้นๆ จากนั้นลองรันผลลัพธ์จะเห็นว่าข้อความที่ใส่แท็กได้ขึ้นบรรทัดใหม่ตามที่เราต้องการแล้ว Pre-formatted หรือแท็ก <pre>คือคำสั่งในการจัดรูปแบบข้อความตามที่เราต้องการ โดยที่การแสดงผลของข้อความจะคงที่ จะคงรูปแบบเดิมไม่ตัดเว้นวรรคส่วนเกินและการเว้นบรรทัดออก เช่น เราเคาะเว้นวรรคหรือบรรทัดใหม่เท่าไหร่ก็จะแสดงผลอย่างนั้น รูปแบบ
ตัวอย่างโค้ด See the Pen คำสั่งในการจัดรูปแบบข้อความ (Pre-formatted) by ASRIA (@asria) on CodePen. 3. คำสั่งการเพิ่มสไตล์ให้กับข้อความ (Styles)คือคำสั่งในการเพิ่มสไตล์ให้กับข้อความโดยกำหนด Attribute ที่ชื่อว่า style เข้าไปที่แท็กต่างๆ เช่น แท็ก p, div, h เป็นต้น ซึ่งปกติแล้วเราจะกำหนดสไตล์ผ่านทาง Stylesheet แต่คำสั่งคำสั่งการเพิ่มสไตล์ให้กับข้อความในครั้งนี้เราจะเรียกว่าการกำหนดแบบ inline คือการเพิ่มเข้าไป HTML Tgas นั่นเอง ซึ่งใน Attribute ชื่อ style เราจะกำหนดคุณลักษณะเดียวกันกับการใช้ภาษา CSS (เดี๋ยวจะมาแนะนำในบทความต่อๆ ไป) เข้าไปใน Elemments นั้นๆ จะขอยกตัวอย่างที่ใช้งานกันบ่อยๆ ดังนี้
รูปแบบ
ตัวอย่างโค้ด See the Pen คำสั่งการเพิ่มสไตล์ให้กับข้อความ (Styles) by ASRIA (@asria) on CodePen. 4. คำสั่งการจัดรูปแบบข้อความ (Text Formatting)การจัดรูปแบบข้อความให้เว็บเพจเพื่อเพิ่มความน่าสนใจ มีความสวยงาม น่าอ่าน หรือการเน้นข้อมูลที่ทำให้ผู้อ่านโฟกัสข้อมูลนั้นๆ ก็นับว่าเป็นสิ่งที่สำคัญมาก การใช้คำสั่งในการจัดรูปแบบข้อความเหล่านี้มีให้เลือกใช้อยู่หลากหลายรูปแบบดังนี้
รูปแบบ
ตัวอย่างโค้ด See the Pen คำสั่งการจัดรูปแบบข้อความ (Text Formatting) by ASRIA (@asria) on CodePen. 5. คำสั่งการอ้างถึง (Quotations)คำสั่ง HTML ที่ใช้ในการอ้างถึงมีอยู่ด้วยกันหลายแบบ ซึ่งแต่ละแบบก็มีความแตกต่างกันและให้ความหมายที่แตกต่างกันดังนี้
เราลองมาดูทีละรูปแบบกันว่าการใช้งานจะแตกต่างกันยังไงบ้าง Blockquote หรือแท็ก <blockquote>คือการกำหนดข้อความที่อ้างอิงจากแหล่งอื่น จะเป็นการแยกเนื้อหาออกมาใหม่อีกหนึ่งบรรทัดและย่อหน้าให้เอง เพิ่มเติมอีกส่วนหนึ่งคือ เราอาจจะเพิ่ม Attribute ที่ชื่อ cite เข้าไปเพื่อบ่งบอกว่าชิ้นงานนี้มีชื่อว่าอะไร รูปแบบ
ตัวอย่างโค้ด See the Pen กำหนดส่วนที่อ้างอิงจากแหล่งอื่น (Blockquote) by ASRIA (@asria) on CodePen. Short quotation หรือแท็ก <q>คือการกำหนดข้อความที่อ้างอิงแบบสั้นๆ หรือที่ส่วนมากเรียกอีกอย่างหนึ่งว่า “Quote” หากเพิ่ม Tag และจะมีสัญลักษณ์ Double-Quote (“”) ขึ้นมาแสดงที่ด้านหน้าและหลังข้อความ รูปแบบ
ตัวอย่างโค้ด See the Pen การกำหนดข้อความที่อ้างอิงแบบสั้นๆ (Short quotation) by ASRIA (@asria) on CodePen. Abbreviations หรือแท็ก <abbr>คือการกำหนดคำย่อหรือตัวย่อให้กับเนื้อหา เช่น เนื้อหามีการใช้ตัวย่อของหน่วยงาน องค์กร บรษัท หรือชื่อของสถานที่ หากเรานำเมาส์ไปวางจะมีข้อความที่เป็นชื่อเต็มยาวๆ แสดงขึ้นมานั่นเอง ซึ่งเราจะต้องเพิ่ม Attribute ที่ชื่อ Title เข้ามาช่วยในการใช้งาน รูปแบบ
ตัวอย่างโค้ด See the Pen กำหนดคำย่อหรือตัวย่อ (Abbreviations) by ASRIA (@asria) on CodePen. Address หรือแท็ก <address>คือการกำหนดข้อมูลติดต่อสื่อสารในแท็กนั่นเอง โดยปกติแล้วข้อมูลด้านในแท็กจะแสดงผลเป็นตัวอักษรเอียงให้อัตโนมัติ รูปแบบ
ตัวอย่างโค้ด See the Pen กำหนดข้อมูลติดต่อ (Address) by ASRIA (@asria) on CodePen. Cite หรือแท็ก <cite>คือการกำหนดชื่องานของเนื้อหา เช่น หากเป็นเนื้อหาเกี่ยวกับ Bloger หรือนักเขียนก็สามารถใส่ชื่อเรื่องหรือชื่อนักเขียนที่แท็กได้เลย และข้อมูลด้านในแท็กจะแสดงผลเป็นตัวอักษรเอียงให้อัตโนมัติ รูปแบบ
ตัวอย่างโค้ด See the Pen กำหนดชื่องานของเนื้อหา (Cite) by ASRIA (@asria) on CodePen. Bi-Directional Override หรือแท็ก <bdo>คือการกำหนดทิศทางของข้อความแบบสลับข้าง ถ้าให้เปรียบง่ายๆ คือการวางตัวหนังสือด้านหน้ากระจกนั่นเอง หากต้องการสลับข้างของตัวข้อความจะต้องเพิ่ม Attribute ที่ชื่อ dir เข้าไปด้วย เช่น dir=”rtl” (rtl คือ Right to Left แปลว่าให้เรียงสลับจากขวาไปซ้ายนั่นเอง) รูปแบบ
ตัวอย่างโค้ด See the Pen กำหนดทิศทางของข้อความแบบสลับข้าง (Bi-Directional Override) by ASRIA (@asria) on CodePen. 6. คำสั่งการจัดตำแหน่งข้อความ (Positions)คือคำสั่งการจัดตำแหน่งข้อความ เป็นการจัดตำแหน่งให้ตัวอักษรหรือข้อความให้ชิดซ้าย ชิดขวา อยู่กึ่งกลาง หรือให้มีความกว้างที่เท่ากัน โดยจะเพิ่ม Attribute ที่ชื่อ align หรือ Alignment เข้าไปเพื่อกำหนดตำแหน่งของข้อความได้ดังนี้
รูปแบบ
ตัวอย่างโค้ด See the Pen คำสั่งการจัดตำแหน่งข้อความ (Positions) by ASRIA (@asria) on CodePen. ข้อกำหนดการใช้งาน Attribute ที่ชื่อ align หรือ Alignment ของแท็ก <p> จะไม่สนับสนุนใน HTML5 ซึ่งเราต้องใช้ Attribute ที่ชื่อ style แทน ตัวอย่างเช่น <p style=”text-align:left|center|right| justify”>ตำแหน่งข้อความ</p> สรุป
สิ่งที่ได้รับ และสำหรับใครที่ยังไม่ได้อ่านบทความก่อนหน้าของเรา อย่าลืมไปอ่านด้วยนะ Semantic HTML |