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

คำสั่งต่อไปที่จะมาเสนอคือการสร้างลิงค์และ 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 คือการคงสัดส่วน กว้าง/สูง ให้คงที่ครับ)