HTML Tutorial - So, you want to make a Web Page!

สอนคนงี่เง่าบัดซบ..เรียนรู้วิธีสร้างเว็บเพจ !

เอาละ ท่านอยากจะทำเว็บเพจ !

บทที่ 6

คราวนี้ เรามาเรียนรู้วิธีสร้างตัวเชื่อมหรือที่เรียกว่า Link

เป็นเรื่องกล้วยๆ เราจะลองมาทำ Link ไปยัง Yahoo.
ขั้นแรก ให้พิมพ์อย่างนี้..ลงไป

<BODY>
ไปยัง Yahoo!
</BODY>

ไปยัง Yahoo!

ขั้นต่อไปให้ใส่แท็ก <A>เปิด และ </A> ปิด ครอบเข้าไป
(A ย่อมาจาก Anchor แปลว่าสมอเรือ หรือทอดสมอ) ดูข้างล่าง...

<BODY>
ไปยัง <A>Yahoo!</A>
</BODY>

ไปยัง Yahoo!

คราวนี้ใส่รหัส URL ของ yahoo ลงไปในแท็ก <A> ( URL ย่อมาจากคำว่า Universal Resource Locator ) อันเป็นรหัส address หรือที่อยู่ของ yahoo..(HREF ตัว H ย่อมาจาก HTML .. REF ย่อมาจาก Referenceแปลว่า อ้างถึง หรืออ้างอิง)

<BODY>
ไปยัง <A HREF="http://www.yahoo.com/">Yahoo!</A>
</BODY>

ไปยังYahoo!

มาลองทำอีกอันหนึ่ง.

<BODY>
ไปยัง Netscape!
</BODY>

ไปยัง Netscape!

<BODY>
ไปยัง<A HREF="http://home.netscape.com/">Netscape!</A>
</BODY>

ไปยัง Netscape!

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

<BODY>
โปรดติดต่อผมทาง <A HREF="mailto:forrest@bubbagump.com">E-Mail!</A>
</BODY>

ผลที่ออกมาจะเป็นอย่างนี้...

โปรดติดต่อผมทาง E-Mail!

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

<BODY>
Go to <A HREF="http://home.netscape.com/"><IMG SRC="chef.gif" WIDTH=130 HEIGHT=101></A>
</BODY>

Go to

คำถาม: ผมมีทางจะเอากรอบสีฟ้าที่เห็นในรูปข้างบนซึ่งดูไม่สวยออกได้อย่างไร ?
คำตอบ: อ๋อ..ง่ายนิดเดียว ให้คุณเติมคำ BORDER=0เข้าไปในแท็ก IMG ลองเลื่อนจอดูตัวอย่างที่แสดงข้างล่าง..( border แปลว่าขอบกรอบรูป)

คำถาม: ทำอย่างไรผมจึงจะเชื่อมต่อไปยังไฟล์ชื่อ _____ เพื่อว่าผู้ชมสามารถที่จะดาวน์โหลด ไฟล์ของผมไปดูได้

คำตอบ: ง่ายมากสมมุติว่าคุณมีเอกสารที่ทำจากโปรแกรม Word และคุณอัพโหลดขึ้นไปไว้บนเว็บเรียบร้อยแล้ว คุณก็เพียงแต่สร้างตัวเชื่อมไปยังเอกสารนั้น สมมุติเอาว่า คุณประกาศหางานทำทางอินเตอร์เนต และต้องการให้ผู้สนใจเอาประวัติการทำงานของคุณ(Resume)ไปดู หรือเอาชีวประวัติของคุณ(Autobiography)ไปอ่าน คุณก็ทำอย่างนี้

<A HREF="myresume.doc">Download my resume</A>
<BR><A HREF="mybio.doc">Download my autobiography</A>

Download my resume
Download my autobiography

คุณคงข้องใจว่า เมื่อผู้อ่านคลิกเข้าไปแล้ว ไฟล์มันจะดาวน์โหลดเข้าไปในเครื่องคอมพ์ของผู้อ่านได้อย่างไร ? อ๋อ..อันนี้มันมีวิธีการบังคับของมันเองครับ ผู้อ่านบางท่านจะใช้วิธีคลิกขวาที่ตัวเชื่อมของคุณ แล้วคลิกอีกทีที่คำสั่งพิเศษที่ผุดขึ้นว่า Save To Disk.(หรือเครื่องบางรุ่นคลิกที่ Save Target AS...) ผู้อ่านอีกส่วนหนึ่งจะมีโปรแกรมสำหรับดาวน์โหลดงานอยู่ในเครื่องอยู่แล้ว (เช่นโปรแกรม Get Right) ดังนั้นในทันทีที่คลิกที่ตัวเชื่อมข้างบน โปรแกรมพวกนี้จะเข้าสวมหน้าที่ทำการดาวน์โหลดของมูลมาเก็บไว้ในดิสค์ในเครื่องของผู้อ่าน หน้าที่ของคุณคือทำการเสนอให้ผู้สนใจทำการดาวน์โหลดไปดู หน้าที่ของผู้ที่สนใจจะจัดการดาวน์โหลดเอาเอง ไม่ต้องห่วง

ถ้าไฟล์ของคุณที่เสนอให้ดาวน์โหลดมีความยาวมากกว่า 200 Kb หรือมีไฟล์แตกออกเป็นไฟล์ย่อยๆหลายไฟล์ คุณอาจจะพิเคราะห์ที่จะทำการ zip ไฟล์เหล่านี้ ให้ผู้สนใจไปทำการดาวน์โหลดแล้วไปทำการถอด zip เอาเอง

คำถาม: ทำอย่างไร เมื่อผู้อ่านคลิกตัวเชื่อมหรือ Link ที่ผมทำไว้ เครื่องจะเปิดกรอบหน้าต่างใหม่ขึ้นมาให้ ผมว่าวิธีนี้ดี เมื่อผู้อ่าน อ่านเรื่องราวจบ ก็ปิดหน้าต่างใหม่ด้วยการคลิก close เครื่องจะพากลับไปสู่หน้าต่างเดิมซึ่งซ่อนอยู่ข้างล่างแล้วได้อย่างฉับไว ไม่เสียเวลา

คำตอบ: อ้า..ก่อนอื่น ผู้อ่านที่ท่องเข้าไปในเว็บที่ช่ำชองแล้ว สามารถจัดการเรียกหน้าต่างใหม่ขึ้นมาได้เอง ทำได้สองวิธีคือ คลิกขวาที่ตัวเชื่อม แล้วคลิกอีกทีที่คำสั่งพิเศษที่ผุดขึ้น "Open In New Window" อีกวิธีหนึ่งที่ผมชอบใช้คือกดปุ่ม Shift เอาไว้แล้วคลิกที่ตัวเชื่อม ก็จะได้หน้าต่างใหม่ขึ้นมาเช่นเดียวกัน

เอาเป็นว่า คุณต้องการเป็นเจ้ากี้เจ้าการ ให้เครื่องเปิดหน้าต่างใหม่ให้กับท่านผู้อ่าน ก็ทำได้ โดยให้คุณต่อเติมข้อความที่ผมแสดงข้างล่างนี้เข้าไปในแท็ก <A> ดังนี้..
TARGET="_blank"

Go to <A HREF="http://home.netscape.com/" TARGET="_blank">Netscape!</A>

<BODY>
Go to <A HREF="http://home.netscape.com/"><IMG SRC="chef.gif" WIDTH=130 HEIGHT=101 BORDER=0></A>
</BODY>

Go to

มีเรื่องหนึ่งที่จะบอกกับท่าน เป็นเรื่องไม่ผิดมารยาท ที่ท่านจะทำการต่อเชื่อมหรือสร้าง Link ไปยังหน้าเว็บเพจของคนอื่นโดยไม่ต้องบอกกล่าว หรือขออนุญาต การสร้างตัวเชื่อม คือการสร้างเครือข่ายไยแมงมุมให้โยงไยถึงกัน และนั่นก็คือสิ่งที่เราเรียกว่า เว็บ หรือไยแมงมุงไง

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

สวัสดีปีใหม่ล่วงหน้าครับ ผมได้เข้าไปเยี่ยมชม บทความสอนเขียนโฮมเพจของลุง แล้วครับ ได้เห็นความตั้งใจที่จะถ่ายทอดความรู้ด้วยความนับถืออย่างสูง และได้ทำ บุ๊คมาร์คไว้แล้ว ทุกวันนี้ ยังมีน้องๆที่เพิ่งจะใช้อินเตอร์เนตใหม่ๆ มาขอคำแนะนำเรื่องการเขียน เวบเพจกับผมอยู่เสมอ ผมก็แนะนำให้ไปอ่าน "เวบเพจแรกของฉัน" ซึ่งทำไว้นาน แล้วอยู่ที่ http://www.geocities.com/CollegePark/Library/1887 บางคนก็อ่านตาม แล้วทำได้ บางคนก็อ่านแล้วยังงง เพราะผมเขียนไว้ไม่ละเอียดแบบของลุง ดังนั้นผมขออนุญาต แนะนำมือใหม่มาอ่านเรื่องของลุงดีกว่า เพราะเขียนละเอียด กว่าที่ผมเคยทำไว้มาก อ่านสนุกตามสไตล์ลุงโอภาสด้วย ผมชอบมากครับ ขอบพระคุณที่ส่งให้ผมอ่านเป็นคนแรก นับเป็นเกียรติยศมากครับ ผมจะทำลิงก์ มายังเพจนี้ทันทีที่อัพเดทโฮมเพจของผม รักและนับถืออย่างสูงครับ ลุงเปี๊ยก ปล. ปีที่ผ่านมานี้ ผมทำเวบไซท์ใหม่ชื่อ ด.เด็ก http://dordek.org ขอเรียนเชิญ ลุงโอภาสแวะเยี่ยมเยียนหน่อยนะครับ // คิดถึงลุงอยู่เสมอ เมลฉบับนี้ส่งมาจาก :
ลุงเปี๊ยก ศาลานกน้อย
25 ธันวาคม 2543
email = uncle-piak@noknoi.com
url = http://noknoi.th.com

<--BACK NEXT-->

บทที่ 6