Mr.Whisper

มาตรฐานการจัดหน้าเว็บด้วย <table> ตอนที่ 1
การสร้างตารางนั้นจะแบ่งออกเป็น 3 แท็กย่อยๆลงไปนะครับ  ซึ่งการเขียนโครงสร้างตารางจะใช้ดังนี้ครับ

ซึ่งการสร้างตารางแบบนี้จะเป็นเพียงแค่โครงสร้างพื้นฐานครับ  output ออกมาไม่ค่อยงามนักหรอก  ซึ่งแท็กต่างๆสามารถอธิบายได้ดังนี้ครับ  คือ

ซึ่งตารางที่ได้จากโค๊ดด้านบนนั้นจะไม่สวยงามนักอย่างที่บอกไป  ซึ่งเราสามารถกำหนดพารามิเตอร์เพิ่มเติมให้กับตารางได้อีกด้วย  เช่นขนาดเส้นขอบ  สีเส้นขอบ  สีพื้นหลัง  รูปภาพพื้นหลัง  ความกว้าง  ความสูง  หรือรูปแบบ(สไตล์)  รวมถึงระยะหว่างระหว่างเซลล์  และระยะห่างจากเซลล์อีกด้วยนะครับ

ส่วนพารามิเตอร์ที่เราจะใช้บ่อยๆนั้น  จะมีอยู่เพียงไม่กี่ตัวเท่านั้นครับ  คือ background , bgcolor , border , bordercolor , width , height , cellpadding , cellspacing , class และ style ครับ

ทีนี้จะเกิดคำถามกัน  ว่าแอตทริบิวต์ไหนใช้กับแท็กไหนบ้าง  ก็จะสามารถแยกได้ตามนี้ครับ(ตามที่ผมเคยใช้นะ)

คราวนี้ผมต้องขอจบเรื่องของตารางไว้แค่นี้ก่อนนะครับ  เดี๋ยววันหลังจะมาอัพต่อ  เพราะยังเหลือเรื่อง colspan และ cellspan อยู่อีก  ไม่ยาวมาก  แต่วันนี้ขี้เกียจแล้ว -*-  แล้วกันในตอนต่อไปครับ

หลังจากตอนที่แล้ว  เอาเรื่องโครงสร้างพื้นฐานกับการจัดการข้อความมาเสนอ  คราวนี้เลยเอาเรื่องต่อๆไปที่น่าจะได้ใช้มาเสนอครับ

คำสั่งต่อไปที่จะมาเสนอคือการสร้างลิงค์และ Anchor ครับ
การสร้างลิงค์และ Anchor นั้นก็คือการสร้างจุดเชื่อมต่อระหว่างเพจหรือในเพจนั้นเองครับ  สำหรับลิงค์ทั่วๆไปก็คือการกระโดดไปยังเพจอื่น  เช่นการเลือกกระทู้แล้วกดดูกระทู้นั่นเอง  ส่วนการสร้าง Anchor นั้นจะเป็นการกระโดดไปยังจุดต่างๆบนเว็บเพจ  เช่นระบบคำถามที่พบบ่อย(FAQ)นั่นล่ะครับ

สาเหตุที่นำมาเสนอพร้อมๆกันนั่นก็เพราะว่าทั้งสองอย่างนั้นใช้แท็กเดียวกันในการสร้างครับ  แต่ต่างกันที่พารามิเตอร์  ซึ่งผมจะพาไปดูการสร้างลิงค์ก่อนครับ

การสร้างลิงค์นั่นเราจะสร้างขึ้นมาในรูปแบบนี้ครับ

สำหรับในพารามิเตอร์ href นั้น  จะสามารถกำหนดได้สองแบบครับ  คือการอ้างจากไดเรคทอรี่ปัจจุบัน  กับการกำหนดเป็น Full Path ครับ  ซึ่งการอ้างจากไดเรคทอรี่ปัจจุบัน  จะยึดเอาไดเรคทอรี่ที่ไฟล์นั้นๆอยู่เป็นรูต(root)  ซึ่งถ้าสมมุติว่าไฟล์ index.htm อยู่ในไดเรคทอรี่ c:\html\index.htm แล้วเราต้องการที่จะสร้างลิงค์ไปยัง c:\html\articles\list.htm เราจะสามารถเขียนโค๊ดได้ตามนี้  คือ

หวังว่าคงจะเข้าใจกันนะครับ  อ้อ  สำหรับเครื่องหมาย / เราจะใช้ / นะครับ  ไม่ใช้ \ ตามแบบวินโดวส์

ต่อไปคือการอ้างแบบ Full Path ซึ่งการอ้างแบบ Full Path นั้นจะเป็นการอ้างตั้งแต่ http:// หริอ file:// (ซึ่งที่จริงแล้วเราก็ใช้กันแค่ http:// กับ ftp:// แค่นั้นล่ะ)  อย่างเช่นเราต้องการที่จะสร้างลิงค์ไปยัง http://mail.live.com เราจะเขียนโค๊ดดังนี้

ให้ระวังด้วยนะครับ  ถ้าจะอ้างแบบ Full Path อย่าลืมเติมโปรโตคอลนำหน้า  ไม่อย่างนั้นมันจะเข้าใจว่าเป็นการอ้างจากไดเรคทอรี่ปัจจุบันครับ

ต่อไปเราจะมาดูการสร้าง Anchor กันครับ  การสร้าง Anchor นั้นก็ตามที่กล่าวไปแล้ว  ว่าเป็นการกระโดดไปยังจุดต่างๆบนเว็บเพจ  ซึ่งเวลาเราจะสร้าง Anchor นั้นเราจะเขียนอย่างนี้ครับ

จากข้างบน  จะสังเกตุได้ว่าเราไม่ได้ใส่ข้อความเข้าไปในระหว่าง <a> และ </a>  ซึ่งในกรณีเราไม่จำเป็นต้องใส่ก็ได้ครับ  เพราะว่าใส่เข้าไปก็ไม่มีอะไรเปลี่ยนเปลง  ส่วนการกระโดดไปยัง Anchor นั้นเราจะเขียนเป็นโค๊ดดังนี้ครับ

อย่างเช่นสมมุติว่าเรามี Anchor อยู่ตัวหนึ่ง  ชื่อ anchor1 เราจะกระโดดไปที่ Anchor ตัวนี้  ก็เพียงแค่เขียนโค๊ดดังนี้ครับ

นอกจากนี้แล้วยังมีพารามิเตอร์อีกตัวหนึ่งที่จะเพิ่มลูกเล่นให้กับแท็ก <a> ครับ  นั่นก็คือพารามิเตอร์ target  ซึ่งจะเป็นการกำหนดเป้าหมายของการเชื่อมโยง  ว่าจะให้เปิดหน้าต่างใหม่  เปิดในหน้าต่างเดิม  เปิดในเฟรม  หรือเปลี่ยนทั้งเพจ(กรณีใช้เฟรมเซต)  ตามข้อมูลข้างล่างนี้ครับ

นอกจากนี้เรายังสามารถยิงเป้าหมายไปยังเฟรมต่างๆได้ด้วย  โดยเราจะกำหนดค่าพารามิเตอร์ target ไว้เป็นชื่อเฟรม  เช่นเราสร้างเฟรมขึ้นมา(ทั้ง iframe และ framset นั่นล่ะ)  แล้วกำหนดชื่อให้ว่า  เอ่อ  body แล้วกัน  ถ้าเราต้องการที่จะเขียนลิงค์  แล้วให้แสดงเพจเป้าหมายในเฟรม body  เราจะเขียนโค๊ดดังนี้ครับ

แทรกรูปภาพลงเว็บเพจด้วย <img>
แท็ก <img> นั้นเป็นแท็กที่มีไว้สำหรับใช้ในการแทรกรูปภาพต่างๆลงไปในเว็บเพจครับ  ซึ่งแท็กนี้ไม่ต้องการแท็กปิดแต่อย่างใด  ซึ่งการใช้งานแท็กนี้จะเขียนเอาไว้ในรูปแบบนี้ครับ

และในส่วนของ URL ไฟล์ภาพนั้นเราสามารถใช้วิธีอ้างอิงได้แบบเดียวกับการอ้างอิงในแท็ก <a> ครับ  คือแบบอ้างจากไดเรคทอรี่ปัจจบัน  และแบบ Full Path

และนอกจากนี้เรา  ยังเรากำหนดเส้นขอบให้กับภาพได้อีกด้วย  ดังนี้ครับ

ซึ่งผลที่ออกมาจะเป็นภาพ  มีขอบหนา 2 พิกเซล  สีเส้นชอบเป็น #00FAFA  ดังนี้ครับดังรูปทางซ้าย  และไม่มีเส้นขอบดัวรูปทางขวาครับ

นอกจากการกำหนดขอบแล้ว  เรายังสามารถกำหนดขนาดภาพที่จะแสดงได้ด้วย  โดยการเพิ่มพารามิเตอร์เข้าไปในแท็ก  โดยใช้ width สำหรับความกว้าง  และพารามิเตอร์ height สำหรับความสูง  และถ้าเรากำหนดเพียง width หรือ height เพียงอย่างเดียว  ปกติแล้วเบราเซออร์จะทำการปรับขนาดภาพแบบ scale ให้โดยอัตโนมัติด้วยครับ(การปรับแบบ scale คือการคงสัดส่วน กว้าง/สูง ให้คงที่ครับ)

เอาล่ะ อัพเดทบล็อกครั้งแรก ขอเป็นสาระแล้วกันนะ เรามารู้จักกับ HTML กับดีกว่า

จะเขียน HTML ต้องมีอะไรบ้าง?
ก็มีแค่โปรแกรม Text Editor สักตัว  ถ้าไม่อยากสรรหาก็ใช้ NotePad ที่มากับวินโดวส์ก็ได้ครับ  ง่ายดี  นอกจากนี้ก็มีความรู้เรื่องภาษา html แล้วก็  เอ่อ  เอ่อ  อ้อใช่!  ขาดไมได้เลยกับ Web Browser สักตัว  เพื่อใช้ในการพรีวิวไฟล์ html ที่เราเขียนขึ้นมา  ซึ่งบนวินโดวส์นั้นจะมี Internet Explorer ติดตั้งมาให้อยู่แล้ว  ส่วนบนลีนุกซ์ก็เห้นจะมี Konquerer กับ Mozilla ครับ  ส่วนทางแมคอินทอชก็จะเป็น Safari  ส่วนตอนบันทึกไฟล์ก็อย่าลืมตั้งนามสกุลเป็น .htm หรือ .html ล่ะ

เรามารู้จักโครงสร้างของภาษา html กันก่อนดีกว่า
ในการเขียนภาษา html  เราจะพิมพ์เป็นข้อความดิบๆลงไปเลยก็ได้ครับ  เว็บเบราเซอร์ก็จะประมวลผลแล้วก็แสดงข้อความพวกนั้นออกมาเลย

แต่อย่างนั้นมันก็ทุเรศล่ะสิ?

ถูกต้องครับ - -"  เราก็เลยมีการจัดรูปแบบ html เกิดขึ้น  คือพวกแท็กต่างๆครับ  ซึ่งโครงสร้างพื้นฐานของไฟล์ html จะมีตามนี้ครับ

จากข้างบน  จะสั่งเกตุได้ว่าเวลาเรามีการเปิดแท็ก  เราจะมีแท็กปิดด้วยเสมอ  แต่ว่ามันก็ไม่ใช่ทุกแท็กนะครับที่จำเป็นต้องมีแท็กปิด(ไว้ศึกษาพวก XHTML น่ะ  ถึงจะต้องปิดแท็กทุกๆแท็ก)  เช่นพวก <br> , <meta> , <img>  ซึ่งเราจะกล่าวกันในตอนต่อๆไปครับ

การจัดรูปแบบข้อความ  เปลี่ยนสี  ขนาด  หรือฟอนต์
สำหรับการจัดรูปแบบข้อความนั้น  เรามักจะใช้แท็ก <font> ในการจัดการ  ซึ่งจะมีการใช้งานดังนี้ครับ

จากตังอย่างข้างบน  เมื่อแสดงผลออกทางเบราเซอร์  จะได้ผลดังนี้ครับ

ซึ่งจากในแท็ก font ที่ผ่านมา  พารามิเตอร์ต่างๆจะมีหน้าที่ตามนี้ครับ

แล้วให้ระวังเรื่องพารามิตเตอร์ face ด้วยนะครับ  คือว่าฟอนต์มันจะเรียกเอาจากเคืร่องฝ่ายที่ดูนะครับ  จึงควรจะเลือกฟ้อนต์ที่มีสามัญอยู่ในเคืร่องส่วนใหญ่ครับ  นอกจากนี้จะยังมีพารามิเตอร์ style อีกอันหนึ่ง  ซึ่งเราจะไปพูดกันในครั้งอื่นนะครับ

และสำหรับการจัดรูปแบบข้อความอย่างอื่น  เช่นการทำตัวหนา  ตัวเอียง  หรือขีดเส้นใต้  เราจะใส่แท็กข้างล่างนี้ครอบข้อความเอาไว้ครับ

นอกจากที่เราจะใช้แยกแท็กเป็นเดียวๆแล้ว  เรายังสามารถนำแท็กเหล่านั้นมาใช้รวมกันได้  อย่างนี้ครับ

ซึ่งผลที่ได้นั้นก็คือเป็นฟอนต์ tahoma ขนาด 2 พ็อยต์  สีเขียว  ตัวหนา  ตัวเอียง  และขีดเส้นใต้  ตามนี้ครับ

เดี๋ยวไว้จะอัพต่อในเรื่องอื่นนะครับ  เช่นพวกรูปภาพและตาราง  แล้วเจอกันครับ