บทเรียน HTML ออนไลน์ ง่ายๆ แต่ใช้ได้จริง

ผู้เขียน : เนยสด

 

ภาษา HTML ภาษาพื้นฐานแห่งการเขียนเว็บเพจ ใครใคร่เขียนเว็บอย่างเซียน ไม่รู้จัก HTML ไม่ได้แล้ว!!!

HTML ย่อมาจากคำว่า HyperText Markup Language ครับ เป็นภาษาสำหรับการเขียนเว็บไซท์ให้แสดงผลบนเว็บบราวเซอร์ นับว่าเป็นภาษาเขียนเว็บแรกๆ และเป็นภาษาพื้นฐานที่สุดเลยครับ

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

โปรแกรมที่ใช้เขียน HTML แบบบ้านๆ เลยก็คือ Notepad ครับ จะใช้ MS Word ก็ได้ แต่มันกินทรัพยากรเครื่องเยอะกว่าหน่อย Notepad จึงได้เปรียบที่เป็นโปรแกรมเล็ก โหลดเร็ว ใช้งานง่าย และยังแก้ไขไฟล์ใดๆ บนคอมพิวเตอร์ได้ (แต่ต้องเข้าใจภาษานั้น)


เริ่มกันเลยดีกว่า...

โครงสร้างของคำสั่ง HTML นั้น จะมีวงเล็บสามเหลี่ยม < และ > ตรงกลางเป็นคำสั่งต่างๆ โดยที่ไม่สนว่าเป็นตัวเล็กหรือตัวใหญ่ เช่น <marquee>, <MARQUEE>, <MaRqUeE> ไม่ต่างกัน แต่ถ้าจะให้ดูง่ายและเป็นมืออาชีพ เลือกใช้ตัวเล็ก/ใหญ่ล้วนดีกว่า สำหรับผมจะขอใช้ตัวเล็กตลอดทั้งบทเรียนนะครับ ^^

เมื่อมี Tag เปิดแล้วก็ต้องมี Tag ปิดครับ คือเพิ่ม / ไว้หลัง < เช่น <marquee>...(ข้อความระหว่างคำสั่ง)...</marquee> ถ้าไม่มี Tag ปิดจะทำให้การแสดงผลผิดพลาดครับ

สำหรับ Tag ที่มีคำอธิบายเพิ่ม เช่น <marquee width="20%"> เวลาปิด Tag ก็ใส่เฉพาะคำสั่งหลักเท่านั้นครับ คือ </marquee> ไม่ต้องปิดเต็มยศอย่างนี้นะครับ </marquee width="20%"> ^^"

แต่ว่าบางคำสั่งจะไม่มี Tag ปิดครับ เช่น <br>, <img> เป็นต้น ซึ่งถ้าเราเขียนเพื่อรองรับ XHTML แล้ว ให้เพิ่ม / ไว้ก่อน > ครับ เป็นการบอกว่า Tag นี้มีตัวมันโดดๆ ไม่มี Tag ปิดนะ เช่น <br/>

อุ้ย... ลืมบอกซะสนิท เราเรียกคำสั่งบน HTML ว่า Tag นะครับ

เมื่อกี้รู้จักโครงสร้าง Tag ไปแล้ว ก็รู้จักโครงสร้างภาษาต่อครับ ภาษา HTML จะต้องประกาศตัวเองทุกครั้ง ด้วย Tag <html> สำหรับส่วนที่จะแสดงผลบนเว็บบราวเซอร์ ให้ใช้ Tag <body> ฟังดูแล้วแล้วอาจงงๆ งั้นลองไปดูตัวอย่างกันเลยดีกว่าครับ

<html> <body> บทเรียนภาษา HTML </body> </html>


เมื่อแสดงผลบนเว็บบราวเซอร์ จะเห็นแค่ "บทเรียนภาษา HTML" แต่ถ้าขาด Tag ใด Tag หนึ่งไป ก็จะไม่สามารถแสดงผลได้ครับ

ถ้าลองเขียนแล้วเซฟเพื่อทดสอบ ให้ตั้งชื่อว่า index.html ครับ ส่วนเหตุผลนั้น ไว้คราวหน้าจะมาบอกครับ ^^

ก็ต้องขอจบตอนที่ 1 ก่อนที่จะยาวไปมากกว่านี้ก่อนนะครับ ติดตามอ่านตอนที่ 2 ได้เร็วๆ นี้ครับ

 

ขอพรรณาเรื่องพื้นฐานที่ยังไม่เกี่ยวกับคำสั่งก่อนเน้อ

ออกตัวก่อนนะครับ ว่าผมเขียนจากประสบการณ์ตรงล้วนๆ เพราะฉะนั้น บทเรียนจึงไม่เป็นไปตามการสอนของกระทรวงฯ และถ้าเกิดข้อผิดพลาดใด โปรดแจ้งให้ผมรับทราบด้วยครับ จะได้รีบแก้ไขข้อผิดพลาดอย่างเร็วที่สุดครับ ^^

คราวก่อนติดไว้ที่ว่าทำไมถึงต้องตั้งชื่อว่า index.html ด้วย? นั่นก็เพราะว่า เว็บบราวเซอร์จะวิ่งหาหน้า index เป็นหลักครับ เช่น ผมสร้างเว็บ www.neizod.com (ไม่มีจริครับ ไม่ต้องหา) ภายในเว็บมีไฟล์ชื่อว่า home.html, me.html, pic.jpg ฯลฯ แต่ภายในเว็บนั้น ไม่มีไฟล์ที่ชื่อว่า index.html อยู่เลย เวลาที่ผู้ชมพิมพ์ www.neizod.com เพื่อเข้าชมเว็บของผม เว็บบราวเซอร์จะหาไม่เจอครับ (หรืออาจเจอแบบโฟเดอร์แทน)

สรุปง่ายๆ คือ index.html เปรียบเสมือนประตูบ้านของเรา ถ้าแขกมาเยือนบ้าน แล้วหาประตูไม่เจอ เค้าก็ผิดหวังกลับไป เพราะฉะนั้นหน้า index จึงสำคัญมากๆ ครับ

ส่วนหน้าอื่นๆ นั้น จะตั้งชื่ออย่างไรก็ได้ครับ แล้วแต่ศรัทธา ^^ แต่ที่ควรทำคือ ตั้งชื่อด้วยภาษาอังกฤษและตัวเลขเท่านั้นนะครับ จะตั้งชื่อด้วยภาษาไทยได้ครับ แต่ถ้าเว็บพังผมไม่รับรู้ด้วยเน้อ

จุดที่น่าสังเกตอีกนิดนึงคือ นามสกุลไฟล์ .html กับ .htm อันนี้ผมก็ไม่ทราบแน่ชัดว่า .htm มันเกิดขึ้นอย่างไรเมื่อไหร่ แต่ทั้งสองนามสกุลนั้นสามารถใช้แทนกันได้ครับ ไม่มีปัญหา ทางที่ดี รักชอบนามสกุลไหนแล้ว ก็ใช้อันนั้นไปตลอดเถอะ เพราะผมเคยเจอปัญหาชื่อเดียวกันแต่คนละนามสกุลนี้ตีกัน สุดท้ายเว็บล่ม database หายเกลี้ยง ต้องเริ่มใหม่ทั้งหมด เหตุการณ์นั้นยังตราตรึงใจมาจนถึงทุกวันนี้~ T_T

ก่อนที่จะจบตอนนี้ อาจมีหลายคนสงสัยว่า ทำไมตอนที่แล้ว ผมพิมพ์ Tag HTML ได้ แต่มันไม่กลายเป็นค่ำสั่งไปซะก่อน คำตอบก็คือ ผมใช้ตัวอักษรพิเศษครับ โดยพิมพ์ &lt; จะได้ตัว < // พิมพ์ &gt; จะได้ตัว > (และสำหรับตอนนี้ พิมพ์ &amp; จะได้ตัว & ครับ)

ตอนนี้เหมือนคุยกันเล่นๆ มากกว่าเนาะ ^^" ไม่เป็นไรครับ คราวหน้าจะเริ่มด้วยคำสั่งเกี่ยวกับตัวอักษรแล้ว เตรียมตัวให้พร้อมนะครับ จะได้ลุยกันรวดเดียวจบ

แล้วพบกันใหม่ตอนหน้าครับ ^^

 

ลองมาเล่นกับตัวอักษรขั้นพื้นฐานกันก่อนนะครับ

เอาหละครับ ผ่านมาได้ 2 ตอน คราวนี้จะเป็นคำสั่งแล้วนะ คำสั่งที่ใช้เล่นกับตัวอักษรนั้นมีอยู่ไม่ค่อยมากเท่าไหร่ครับ แถมแบบที่ต้องขยายความนั้น ยิ่งน้อยลงไปใหญ่เลย เลยทำให้คำสั่งชุดนี้ศึกษาง่ายกว่าชุดอื่นๆ ทั้งหมดครับ เตรียมตัวพร้อมอยู่แล้วก็ลุยกันเลยครับ! คำสั่งที่ใช้ทำตัวหนา <b>...</b> เช่น Bold คำสั่งที่ใช้ทำตัวเอียง <i>...</i> เช่น Italic คำสั่งที่ใช้ขีดเส้นใต้คำ <u>...</u> เช่น Underline สามคำสั่งนี้เป็นคำสั่งพื้นฐานครับ ต้องรู้จักไว้ ในกรณีที่มีการใส่คำสั่งมากกว่า 1 คำสั่งบนคำที่ต้องการ เช่น ทำให้คำนี้เป็นตัวหนาและเอียง ซึ่งใช้ <b> กับ <i> จะเรียงยังไงก็ได้ แต่ควรจะเรียงลำดับให้ถูกต้อง คือ

 

<b><i>ทำให้คำนี้เป็นตัวหนาและเอียง</i></b>

 

(เริ่มต้นด้วย <b> ก็ควรลงท้ายด้วย </b>) ไม่ควรเขียนเป็น

 

<b><i>ทำให้คำนี้เป็นตัวหนาและเอียง</b></i>

 

ต่อด้วยคำสั่งที่จำเป็น แต่ไม่ค่อยได้ใช้ ^^" คำสั่งที่ใช้ขีดทับคำ <s>...</s> เช่น neizod คำสั่งที่ใช้ทำตัวยก <sup>...</sup> เช่น eπi คำสั่งที่ใช้ทำตัวห้อย <sub>...</sub> เช่น H2O ตรงตัวยกกับตัวห้อยนั้น ไม่ควรใช้กับ <u> นะครับ เพราะว่ามันจะออกมายึกยือๆ ไม่ค่อยสวย แบบนี้ตัวยก ปิดท้ายด้วยคำสั่งชุดที่ต้องการคำอธิบายเพิ่ม <font size="เลข">...</font> กำหนดขนาดตัวอักษร โดยที่ตัวเลขมีค่าระหว่าง 1-7 ครับ (ค่าปรกติคือ 3) <font color="สี">...</font> กำหนดสีของตัวอักษร ชื่อสีนั้น สามารถใส่ได้ทั้งภาษาอังกฤษและรหัสสีครับ <font face="ฟอนท์">...</font> กำหนดฟอนท์อักษร ใส่ฟอนท์ได้มากกว่า 1 โดยถ้าตัวแรกไม่มีก็จะใช้ต่วต่อไป คำสั่งหมวดนี้สามารถรวมเป็น Tag เดียวได้ครับ เช่น ให้คำว่า สีน้ำเงินตัวโตๆ มีขนาด 7 และสีน้ำเงิน ได้

 

<font size="7" color="blue">สีน้ำเงินตัวโตๆ</font>

 

จะแสดงผลออกมาเป็น

 

สีน้ำเงินตัวโตๆ

 

ก่อนจบ ถ้าลองเขียนเว็บดูแล้ว พบว่าขึ้นบรรทัดใหม่ไม่ได้ ไม่ต้องตกใจครับ เพราะ HTML คิดค่า Enter คือเว้นวรรค ถ้าต้องการขึ้นบรรทัดใหม่ สามารถทำได้ 2 วิธี (หลักๆ) คือ ใช้คำสั่ง <br> เพื่อขึ้นบรรทัดใหม่ (ควรพิมพ์ <br/> ให้ชิน) ใช้คำสั่ง <p>...</p> เพื่อประกาศเป็น 1 ย่อหน้าครับ

 

<p>ย่อหน้าแรก<br/>ขึ้นบรรทัดใหม่</p><p>ขึ้นย่อหน้าใหม่</p>

 

แสดงผลออกมาดังนี้

 

ย่อหน้าแรก
ขึ้นบรรทัดใหม่

ขึ้นย่อหน้าใหม่

 

พอจะเข้าใจกันนะครับ ^^ แล้วพบกันต่อในตอนหน้าครับ

 

เล่นกับการจัดย่อหน้า & การใส่รูปลงในเว็บเพจ

คราวก่อนเล่นกับตัวอักษรกันจนสนุกแล้ว ก็ต้องต่อด้วยการจัดย่อหน้า ถึงจะครบชุด

จัดข้อความอยู่ทางซ้าย <div align="left">...</div> แทบไม่มีความจำเป็น เพราะปรกติจะจัดชิดซ้ายอยู่แล้ว

จัดข้อความอยู่กลาง <div align="center">...</div> โค๊ดอีกอันนึงที่ง่ายกว่าคือ <center>...</center>

จัดข้อความอยู่ทางขวา <div align="right">...</div>

บางครั้ง การขึ้นบรรทัดใหม่ก็ไม่แสดงความแตกต่าง จึงต้องมีการนำเส้นแบ่งย่อหน้ามาใช้เพื่อให้เห็นชัดเจน โดยคำสั่งที่ใช้สร้างเส้นแบ่งย่อหน้าก็คือ <hr/> สิ่งที่น่าสนใจกำคำสั่งนี้ ก็คือมันมีออฟชันเยอะมากๆ ได้แก่ noshade ทำให้เส้นทึบ, color="สี" สีของเส้น align="ตำแหน่ง" กำหนดตำแหน่งเมื่อเส้นไม่เต็มจอ size="ความสูง" ความสูงของเส้นในหน่วยพิกเซล width="ความกว้าง" ตรงนี้กำหนดได้ทั้งพิกเซลและ % ตัวอย่างนี้ ผมจะสร้างปิรามิดนะครับ

 

<hr noshade color="#EE9900" size="10px" width="3%"/><hr noshade color="#EE9900" size="10px" width="8%"/><hr noshade color="#EE9900" size="10px" width="13%"/><hr noshade color="#EE9900" size="10px" width="18%"/><hr noshade color="#EE9900" size="10px" width="23%"/><hr noshade color="#EE9900" size="10px" width="28%"/><hr noshade color="#EE9900" size="10px" width="33%"/><hr noshade color="#EE9900" size="10px" width="38%"/><hr noshade color="#EE9900" size="10px" width="43%"/><hr noshade color="#EE9900" size="10px" width="48%"/>

 

ผลลัพท์ที่ได้...

 

 











 


 

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

ก่อนเข้าเรื่อง ก็ต้องเกริ่นก่อนว่า รูปภาพมี 2 แบบ ไม่ใช่ .gif กับ .jpg แน่นอนครับ (ทายผิดกันใหญ่)

อย่างแรกคือแบบ Raster (Bitmap) ครับ หลักการคือ บันทึกจุดสีทีละพิกเซล แล้วรวมเป็นภาพ ข้อดีคือสร้างง่ายใช้ง่าย ข้อเสียคือขยายภาพแล้วแตก รูปที่ใช้วิธีนี้ส่วนใหญ่เป็นพวกรูปถ่าย รูปที่แสกนมา นามสกุลที่คุ้นๆ ก็มี .gif .jpg .bmp เป็นต้น

อย่างที่สองคือแบบ Vector graphics ครับ หลักการคือ กำหนดภาพด้วยสมการทางคณิตศาสตร์ ข้อดีคือขยายเท่าไหร่ก็ไม่แตก ข้อเสียคือทำรูปได้ยาก รูปที่ใช้วิธีนี้ส่วใหญ่เป็นฟอนต์ รูปที่วาดขึ้นในคอมฯ นามสกุลที่คุ้นๆ มีอยู่อันเดียว คือ .png ครับ

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

คำสั่งที่ใช้แทรกรูปภาพคือ <img src="/รูป"/> ครับ ตรงส่วนที่เป็นชื่อไฟล์นั้น ต้องระบุให้ถูกต้องนะครับ และต้องเป็นไฟล์ที่มีอยู่บนอินเตอร์เน็ตด้วยนะครับ! ไม่งั้นเครื่องเราก็จะเห็นรูปนั้นอยู่คนเดียวครับ

เช่น ผมจะอวดรูปพระจันทร์ที่ผมถ่ายมาในเว็บของผม ผมเขียนคำสั่งนี้ขึ้นมา <img src="D:\moon.jpg"/> คนที่จะเห็นรูปนี้ได้ต้องมีไฟล์ moon.jpg ไว้ก่อนแล้ว และยังต้องอยู่ในตำแหน่งเดียวกัน (คือไดรฟ D) ด้วย

วิธีเขียนที่ถูกต้องคือ ระบุตามที่อยู่เว็บครับ คือแบบนี้ <img src="http://www.vcharkarn.com/uploads/22/22386.jpg"/> จึงจะแสดงรูปที่เราต้องการให้ผู้ชมเห็นได้ทุกคนครับ

อีกหน่อยก่อนจบ กับออฟชันรูปภาพครับ

alt="ข้อความ" ใช้แทนรูปภาพเมื่อโหลดรูปไม่ได้

title="ข้อความ" ชื่อของรูปภาพนั้น

width="ความกว้าง" ความกว้างของรูปเป็นพิกเซล

height="ความสูง" ความสูงของรูปเป็นพิกเซล

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

 

<center><img src="http://www.vcharkarn.com/uploads/22/22386.jpg" width="300px" title="Moon"/></center>

 

แสดงผลออกมา ดังนี้...

 

 

จบก่อนดีกว่าครับ ยาวเกินจะอ่านแล้วทุกข์เอาเปล่าๆ ดูเหมือนยังมีหลายๆ จุดที่ยังอธิบายได้ไม่เคลียร์เลย ไว้จะมาเพิ่มให้ในคราวหน้านะครับ ^^

 

พบปัญหาน่าปวดหัว เมื่อตัวอักษรแต่งงานกับรูปภาพ!

ได้ทดลองเขียนโค๊ด HTML บ้างหรือยังครับ? ประสบพบเจอมีปัญหาอะไรบ้างหรือเปล่าเอ่ย (ถ้าไม่เจอปัญหานี้แปลว่าใช้ไม่ได้นะครับ ^^")

ปัญหาผมที่ว่าไปนั้น คงไม่พบง่ายๆ หรอกครับ ถ้าเล่นกับรูปภาพหรือตัวอักษรเพียงอย่างเดียว แต่จะเจอกับมันแน่นอน ถ้าเล่นทั้งรูปและอักษร เป็นปัญหาเกี่ยวกับการขึ้นย่อหน้า ดังตัวอย่างนี้

 

อึ่ม... แอปเปิลตก
คิดออกแล้ว! F=ma

 

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

ทางแก้มีอยู่ 2 ทางครับ

1. รู้จักกับตาราง เพื่อแบ่งส่วนรูปกับคำไปเลย

2. ใช้โค๊ดที่เกี่ยวกับการจัดรูปและคำมาแก้ปัญหา

สำหรับตอนนี้จะสอนโค๊ดก่อนละกันนะครับ ^^

ที่โค๊ดใส่รูป ให้ใส่ออฟชันนี้เพิ่ม align="ตำแหน่ง" โดยตรงส่วนตำแหน่งนั้น ให้ใส่ค่าเป็น left ครับ

 

<img src="http://www.vcharkarn.com/uploads/10/10106.jpg" align="left"/>อึ่ม... แอปเปิลตก<br/>คิดออกแล้ว! F=ma

 

ทีนี้ รูปก็จะลงไปกลมกลืนกับข้อความแล้วครับ

 

อึ่ม... แอปเปิลตก
คิดออกแล้ว! F=ma

 

ตรงส่วนตำแหน่งรูปนั้น ผมยกตัวอย่างให้อันเดียว เพราะมันเป็นตัวที่ได้ใช้อยู่บ่อยที่สุดแล้วหละครับ ถ้าอยากลองเล่นแบบอื่นๆ ให้เปลี่ยนจาก left เป็น rigt, top, middle, buttom, abmiddle, abbuttom ลองเล่นดูนะครับ ^^

ปัญหาที่ตามมาติดๆ อีกคือ ถ้าจะขึ้นบรรทัดใหม่หละ อย่างนี้ก็ต้องใส่โค๊ด <br/> ไปเรื่อยๆ เลยหละสิ? คำตอบคือ ให้ใช้โค๊ด <br clear="left"/> แทนครับ

 

<img src="http://www.vcharkarn.com/uploads/44/44282.jpg" align="left"/>ไวน์แดงเอาไว้กินกับเนื้อ<br/>ส่วนไวน์ขาวนั้นกินกับปลา<br clear="left"/><b>ประวัติของไวน์</b><br/>บลาๆๆ...

 

ได้ผลลัพท์ออกมาดังนี้...

 

ไวน์แดงเอาไว้กินกับเนื้อ
ส่วนไวน์ขาวนั้นกินกับปลา
ประวัติของไวน์
บลาๆๆ...

 

เหมือนจะหมดปัญหาแล้ว แต่บางคนยังไม่ชอบครับ เพราะระยะระหว่างรูปกับตัวอักษรมันน้อยเหลือเกิน ทำให้อ่านตัวอักษรที่อยู่ใกล้ๆ กับรูปภาพได้ลำบาก ก็ให้ใช้ออฟชันต่อไปนี้เสริมลงไปในโค๊ดรูปภาพครับ vspace="ระยะ" ระยะห่างแนวตั้งในหน่วยพิกเซล hspace="ระยะ" ระยะห่างแนวนอนในหน่วยพิกเซล ดังเช่นตัวอย่างนี้

 

<img src="http://www.vcharkarn.com/uploads/46/46481.jpg" width="125px" hspace="50px" align="middle"/>อยู่ห่างๆ การพนันไว้เป็นอันดีที่สุด

 

ซึ่งจะได้ผลลัพท์ดังนี้แหละครับ ^^"

 

อยู่ห่างๆ การพนันไว้เป็นอันดีที่สุด

 

ก่อนจาก ก็ขอแนะนำเกี่ยวกับ .jpg กับ .gif ซักหน่อย .jpg เป็นไฟล์รูปที่เก็บรายละเอียดสีได้ 16.7 ล้านสี จึงเหมาะกับรูปถ่ายที่มีสีเยอะๆ หรือรูปที่มีการไล่สี

ส่วน .gif เป็นไฟล์รูปที่เก็บรายละเอียดสีได้ 256 สี เหมาะสำหรับรูปที่วาดในคอมพิวเตอร์แล้วใช้สีน้อยๆ ถึงจะเก็บสีได้น้อย แต่ทีเด็ดคือสร้างภาพเคลื่อนไหวได้ และยังทำให้พื้นหลังโปรงแสงได้อีกด้วย

ตอนต่อไปจะแนะนำการทำลิงก์ครับ ^^ แล้วติดตามอ่านกันต่อนะครับ

 

มาดูวิธีทำลิง เอ้ย! ทำลิงก์กันเถอะครับ (แถมตัววิ่ง)

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

คราวนี้มาต่อที่การทำลิงก์ครับ คำสั่งที่ใช้คือ <a href="/ปลายทาง">...</a> โดยปลายทางจะเป็นเพจหรือไฟล์ก็ได้ครับ แต่ว่าต้องเขียนที่อยู่ไฟล์ให้ถูกต้องนะครับ (เหมือนกับคราวก่อนที่แทรกรูปภาพไงครับ)

ในกรณีที่เป็นเพจ บราวเซอร์จะเปิดหน้านั้น ส่วนกรณีที่เป็นไฟล์ ก็จะดาว์โหลดไฟล์นั้น (แต่บางทีก็จะเปิดไฟล์ให้ด้วยโปรแกรมอื่น)

ต่อมาคือ การทำลิงก์ภายในหน้าเดียวกัน จากคำสั่งเดิม <a href="/ตำแหน่ง">...</a> เปลี่ยนวิธีเขียนตรงส่วนปลายทางดังนี้

1. ใส่ # นำหน้า

2. ใส่ชื่อตำแหน่งลงไป

3. ตรงจุดที่เป็นจะให้ลิงก์ไปนั้น เขียนโค๊ด <a name="ตำแหน่ง">...</a> ครับ

ดูตัวอย่างกันงงกันดีกว่า

 

<a href="#hop">โดดลงไป</a><br/><br/><a name="hop"><font color="#DDDD00"><b>ณ จุดนี้</b></font></a>

 

ผลลัพท์ (กดลิงก์ประกอบเพื่อความเข้าใจ)

 

โดดลงไป

ณ จุดนี้

 

ข้อจำกัดนิดหน่อย คือถ้าหน้านั้นสูงไม่พอ เวลาโดดไปแล้วส่วนนั้นจะไม่อยู่บนสุดครับ

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

ออฟชันเดียวที่ผมนึกออกเกี่ยวกับลิงก์ ได้แก่ target="_blank" ครับ จะเป็นการกำหนดให้เปิดลิงก์ในหน้าใหม่ คือ ไม่เปิดทับหน้าที่เรากำลังดูอยู่ครับ


ก่อนจบ มาแทรกด้วยคำสั่งสนุกๆ กันเนาะ ซึ่งก็คือคำสั่ง <marquee>...</marquee> เป็นคำสั่งที่ทำให้ข้อความ (และรูป) วิ่งไปมา ออฟชันประกอบก็มีอยู่ไม่น้อยทีเดียวครับ width="ความกว้าง" ทั้งหน่วย % และ px direction="ทิศ" มีแค่ left กับ right behavior="alternate" ให้เด้งไปกลับ bgcolor="สี" กำหนดสีให้กับฉากหลัง scrollamount="ความเร็ว" ปรกติคือ 6

เพิ่ม: เนื่องจากเจอโค๊ดหยุดเมื่อวางเมาส์ เห็นว่าน่าจะมีประโยชน์ เลยลงไว้ให้ครับ onmouseover="this.stop()" onmouseout="this.start()"

~¿ตัวอย่างที่รวมทุกอย่าง?~

มาถึงตรงนี้ก็จบไปอีกหนึ่งตอนแล้วครับ โค๊ดก็มีมากขึ้นและจำได้ยากขึ้นเรื่อยๆ แล้ว ถ้าไม่อยากลืม ก็ต้องลับฝีมือบ่อยๆ นะครับ แล้วพบกันอีกทีหลังปีใหม่ครับ ^^

 

Table ไม่ได้แปลว่าโต๊ะเพียงอย่างเดียวนะครับ 

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

โค๊ดที่เรียกใช้ตารางคือ <table>...</table> ความยุ่งยากของโค๊ดนี้คือคำสั่งย่อยใน ... นั่นหละ ไว้เดี๋ยวค่อยลุย ตอนนี้ดูอ๊อฟชันของตารางก่อน bgcolor="สี" กำหนดสีพื้นหลังของตาราง background="รูป" กำหนดรูปพื้นหลังตาราง border="ขอบ" บอกความหนาของขอบตาราง width="ความกว้าง" ทั้งพิกเซลและเปอร์เซนต์ height="ความสูง" ก็ทั้งพิกเซลและเปอร์เซนต์ cellpadding="ระยะห่าง" ระยะห่างขอบตาราง cellspacing="ขอบกว้าง" ความกว้างของขอบ *border กับ cellspacing นั้นต่างกันนะครับ ^^

ต่อไปเป็นโค๊ดย่อยภายในโค๊ดตาราง <tr>...</tr> ขึ้นแถว (แนวนอน) ใหม่ <td>...</td> ขึ้นคอลัมน์ (แนวตั้ง) ใหม่ โดยลำดับการใส่ต้องเริ่มด้วยขึ้นแถวใหม่ <tr> ตามด้วยขึ้นคอลัมน์ <td>...</td> กี่อันก็ได้ แล้วจึงปิดท้ายด้วย </tr> เสมอ

อ๊อฟชันของ <tr> ไม่ค่อยมีที่น่าสนใจซักเท่าไหร่ ส่วนอ๊อฟชันของ <td> นั้นลอกมาจาก <table> ยกเว้น cellspacing กับ cellpadding ครับ

ตอนนี้ไม่มีตัวอย่างไม่ได้จริงๆ ^^"

 

<table border="1"><tr><td>1 1</td><td>1 2</td><td>1 3</td></tr><tr><td>2 1</td><td>2 2</td><td>2 3</td></tr></table>

 

ผลลัพท์ที่ได้

 

1 1 1 2 1 3
2 1 2 2 2 3

 

สำหรับการรวมแถว/คอลัมน์นั้นก็ทำได้โดยอ๊อฟชัน rowspan="จำนวน" และ colspan="จำนวน" ที่คำสั่ง <td> แต่ผมไม่ค่อยอยากจะแนะนำเท่าไหร่ เพราะผลที่แสดงต่างบราวเซอร์กันจะผิดพลาด ทางออกก็คือสร้างตารางซ้อนในตารางอีกทีครับ

เปรียบเทียบความแตกต่างระหว่างการรวมแถวกับการสร้างตารางซ้อน

 

<table cellspacing="0" cellpadding="0"><tr><td rowspan="2" bgcolor="ffff88">left </td><td colspan="2" bgcolor="ccccff">head </td></tr><tr><td bgcolor="ffbbbb">center </td><td bgcolor="bbffbb">right </td></tr></table>
left head
center right
<table cellspacing="0" cellpadding="0"><tr><td bgcolor="ffff88">left </td><td><table cellspacing="0" cellpadding="0" width="100%"><tr><td bgcolor="ccccff">head </td></tr></table><table cellspacing="0" cellpadding="0"><tr><td bgcolor="ffbbbb">center </td><td bgcolor="bbffbb">right </td></tr></table></td></tr></table>
left
head
center right

 

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

จบกันไปแล้วกับเนื้อหาการสร้างตารางให้เป็นครับ ที่ต้องหาความรู้กันต่อเองคือการสร้างตารางให้สวย ฝึกฝนกันเยอะๆ นะครับ ^^