 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
|
บทเรียนนี้จะเข้าไปในรายละเอียดของส่วนเนื้อหาที่อยู่ระหว่างคำสั่ง <body> ... </body> กันเลย ในตัวคำสั่ง body เองสามารถระบุส่วนขยายที่เป็นสี/ภาพพื้นหลัง และเทคนิคการเชื่อมโยงได้
โดยปกติเมื่อไม่มีการกำหนดอะไรเป็นพิเศษในคำสั่ง body บราวเซอร์จะแสดงผลหน้าเว็บเพจเป็นพื้นหลังสีขาว ตัวอักษรสีดำเสมอ ในคำสั่ง body เราสามารถระบุค่าสีของพื้นหลัง ตัวอักษร และจุดเชื่อมโยงได้ตามต้องการ ดังนี้ <body bgcolor="#000099" text="#FFFFFF" link="#00FFFF" alink="#00FF00" vlink="#FF99FF">
การกำหนดค่าสีนั้น สามารถกำหนดโดยระบุชื่อสีโดยตรง เช่น black, white, blue, green,... เป็นต้น แต่การกำหนดแบบนี้ จะไม่สามารถระบุความเข้มแบบไล่เฉดสีอ่อนแก่ได้ จึงได้ใช้ค่าสีเป็นตัวเลขฐานสิบหก (hexadecimal format) โดยกำหนดเป็นค่าสีของแสง RGB แต่ละสีประกอบด้วยเลข 2 หลัก ในแต่ละสีจะมีค่าของสีจากมืดไปสว่างดังนี้ 0 1 2 3 4 5 6 7 8 9 A B C D E F เลข 2 หลักของแต่ละสีจึงมีค่าได้ตั้งแต่ 00 – FF หรือแปลงค่าเป็นตัวเลขได้ตั้งแต่ 0 – 255 ดังนั้นเมื่อเรากำหนดค่าสีเป็น 00FF00 (red=0, green=255, blue=0) ดังนั้นผลลัพธ์ที่ได้คือ สีเขียวสด ไฟล์ตัวอย่างแสดงการกำหนดสีพื้นหลัง ตัวอักษร และการเชื่อมโยงในหน้าเว็บเพจ ในตัวอย่างนี้ได้เพิ่มเติมการใช้ภาพเป็นพื้นหลัง ด้วยคำสั่ง Background และระบุชื่อรูปภาพที่ใช้นั้นชื่อ bgimage.gif
การกำหนดรูปแบบตัวอักษรให้มีความแตกต่าง เพื่อการเน้นข้อความสำคัญ สามารถทำได้ง่ายๆ ด้วยการใช้คำสั่งกำกับข้อความ หรือคำที่ต้องการได้ดังนี้
เพื่อให้การจัดวางรูปแบบของหน้าเว็บเพจดูน่าสนใจ เราสามารถกำหนดขนาด สี และแบบของตัวอักษรได้ในทุกๆ ตำแหน่งที่ต้องการ ด้วยการระบุคำสั่งลงไปกำกับคำ หรือข้อความนั้น  การกำหนดหัวเรื่อง
หัวเรื่อง (Heading) ของเว็บเพจสามารถกำหนดได้ ด้วยการใช้คำสั่ง <Hx> ... </Hx> เมื่อ x คือค่าตัวเลขตั้งแต่ 1 - 7 ซึ่งจะกำหนดให้ตัวอักษรที่อยู่ภายในคำสั่งนี้มีขนาดใหญ่ไปจนถึงเล็ก เรียงตามลำดับ จากตัวเลข 1 มีขนาดใหญ่สุด และ ตัวเลข 7 จะมีขนาดเล็กที่สุด (คำสั่งนี้จะทำให้คำ หรือข้อความนี้เป็นตัวหนา และตัดคำขึ้นบรรทัดใหม่เสมอ) ดังตัวอย่าง
การกำหนดขนาดตัวอักษร
การใช้คำสั่งกำหนดขนาดแบบหัวเรื่องนั้น มีข้อเสียคือ ไม่สามารถจะนำอักษรต่างขนาดกัน มาวางไว้บนบรรทัดเดียวกันได้ เราสามารถกำหนดขนาดฟอนต์ด้วยคำสั่ง <FONT SIZE="n"> ...</FONT> เมื่อ n เป็นค่าตัวเลขตั้งแต่ 1 - 7 เช่นเดียวกันกับหัวเรื่อง แต่การแสดงผลจะเป็นตรงกันข้ามคือ ตัวเลข 7 จะขนาดใหญ่สุด และตัวเลข 1 มีขนาดเล็กที่สุด ดังตัวอย่าง
การกำหนดสี/แบบตัวอักษร
การกำหนดสี แบบตัวอักษรจะใช้คำสั่งฟอนต์เช่นเดียวกัน แต่จะใช้คุณสมบัติขยายของฟอนต์เป็น COLOR="color name" และ FACE="font name" และยังสามารถผสมผสานกับคำสั่งขนาดเดิมได้ เพื่อให้คำสั่งสั้นลง ดังตัวอย่าง <font size="4" color="#006600" face="LilyUPC">ฟอนต์แบบ LilyUPC</font>
คุณสามารถจะระบุฟอนต์พิเศษใดๆ ก็ได้ แต่ต้องระวังว่า หากผู้ชมเว็บของคุณไม่ได้ติดตั้งฟอนต์เหล่านั้น ในระบบปฏิบัติการที่เขาใช้ เขาก็จะไม่มีโอกาสได้เห็นฟอนต์ที่สุดสวยของคุณ ตามที่ระบุไว้ จะเป็นการดีที่เราจะระบุฟอนต์ที่คาดว่า ผู้ชมจะมีในเครื่องของเขา ด้วยการระบุฟอนต์มาตรฐานหลายๆ แบบลงไป เพื่อให้การแสดงผลทำได้ถูกต้อง โดยเฉพาะเว็บเพจภาษาไทย ต่อไปนี้คือฟอนต์มาตรฐานที่ควรใช้กับเว็บเพจภาษาไทย โดยกำหนดไว้ในบรรทัดต่อจากคำสั่ง <body> <font face="MS Sans Serif, Tahoma, Thonburi, CordiaUPC, AngsanaUPC, FixedDB ThaiText New, DB ThaiTextFixed">
เพราะคำสั่ง Font Face นี้ จะสามารถทำให้ผู้เข้าชมเว็บเพจของเรา อ่านภาษาไทยได้ โดยการเรียกเอา Font ในเครื่องของผู้ใช้ ที่เข้ามาชมเว็บไซต์ของเราออกมาใช้ จะค้นหา Font เรียงตามลำดับที่เราเขียนไว้ ถ้าไม่พบก็จะไปใช้ฟอนต์ตามคำสั่งของผู้ชมที่กำหนดไว้ในบราวเซอร์ใน ส่วนของ View > Encoding > User define ต่อไป ในปัจจุบันนี้มีฟอนต์ภาษาไทยสวยๆ จากเว็บไซต์ของ Google ที่เราสามารถนำมาใช้ให้แสดงผลในเว็บไซต์เรา ด้วยการเข้าไปเลือกแบบตัวอักษรได้จากเว็บไซต์ Google Fonts แล้วเลือกค้นหาอักษรภาษาไทย (ตำแหน่งลูกศรชี้ในภาพ) ซึ่งมีหลายตัวดังนี้  เมื่อเลือกฟอนต์ตามที่ต้องการแล้ว ก็สามารถคลิกที่วงกลมเครื่องหมายบวก เพื่อเข้าไปนำโค้ดฟอนต์ดังกล่าวมาใช้งานในหน้าเว็บของเราได้เลย ดังภาพเลือกฟอนต์ชื่อ Chonburi จะปรากฏกล่องสีดำด้านล่างว่า เราเลือกฟอนต์นี้แล้ว  เมื่อคลิกที่กล่องดำจะขยายออกให้เห็นคำสั่งต่างๆ ที่เราจะนำฟอนต์ดังกล่าวมาใช้ได้  การนำไปใช้ในหน้าเว็บไซต์ HTML หน้าใดๆ ก็เพียงแต่นำคำสั่งด้านล่างนี้ไปไว้ในระหว่างส่วน <head> ... </head> ของหน้านั้นเช่นในหน้านี้ ดังตัวอย่าง <link href="https://fonts.googleapis.com/css?family=Chonburi" rel="stylesheet">
แล้วเรียกใช้โดยกำหนด Font face ใบรรทัดที่ต้องการใช้งาน ดังนี้ <h1><font color="#0000FF" face="Chonburi">การเลือกใช้ฟอนต์ Chonburi</font></h1>
ผลของการเรียกใช้ดังด้านล่างนี้ การเลือกใช้ฟอนต์ Chonburiหากต้องการนำไปใช้แสดงผลในทุกๆ หน้า เราจะใช้การกำหนดคำสั่งใน Stylesheet ซึ่งจะได้ศึกษาในหัวข้อถัดไป (บทที่ 6)
บทนี้มีเทคนิคค่อนข้างมาก และมีส่วนสำคัญในการทำให้หน้าเว็บเพจของเราน่าสนใจขึ้น อ่านง่าย เอาชนะข้อจำกัดต่างๆ ได้มากขึ้น ถึงตอนนี้คุณก็สามารถจะเพิ่มเติมข้อความใดๆ ลงในหน้าเว็บเพจของคุณได้แล้ว ไม่มีวิธีการใดที่จะช่วยให้คุณจดจำคำสั่งที่หลากหลายเหล่านี้ได้ นอกจากจะใช้งานมันบ่อยๆ ซ้ำแล้วซ้ำอีก คำสั่งในภาษา HTML นั้นจะเขียนด้วยตัวอักษรตัวใหญ่ หรือตัวเล็ก หรือผสมกันก็ได้ มีเงื่อนไขที่ต้องระวังคือ
การพิมพ์โค๊ดคำสั่งเองนั้น อาจมีการผิดพลาดได้ง่ายจึงต้องระมัดระวัง ช่างสังเกตให้มาก เมื่อทดสอบแล้วการแสดงผลผิดพลาด จะต้องใจเย็นในการตรวจสอบโค๊ด ซึ่งจะช่วยให้เราจดจำคำสั่งต่างๆ ได้ดียิ่งขึ้นด้วย
|
BODY : เทคนิคการนำเสนอในส่วนเนื้อหาAuthor : KruMontree Kotkanta e-M@il : webmaster at krumontree.com