วันศุกร์ที่ 7 มีนาคม พ.ศ. 2551

การ Link ไปยังเว็บไซต์อื่น

เป็นยังไงกันบ้าง สบายดีไหมครับ มาต่อจากคราวที่แล้วกันดีกว่า วันนี้ผมจะมาแนะนำเรื่องการใส่ Links ไปยังเว็บไซต์อื่นๆด้วยคำสั่ง <a>...</a>


โดยปกติแล้วนักท่องเว็บทั้งหลายคงจะไม่มีใครไม่รู้จัก Links ลิงค์นั่นก็คือส่วนที่เราสามารถคลิกแล้ว เว็บบราวเซอร์จะเปิดเว็บเพจหรือเว็บไซต์ที่กำหนดไว้ขึ้นมา โดยวิธีการสร้างลิงค์มีหลายรูปแบบ แต่หลักๆเลยก็คือคำสั่ง <a>...</a> โดยรูปแบบการใช้จะอยู่ใน TAG <body>...</body> โดยมีแอทริบริวต์ href (น่าจะย่อมาจาก Hyperlink Reference เดาเอานะข้าน้อยไม่ขอยืนยัน)

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

<body>
<a href="http://www.google.com">google</a>
</body>

เมื่อเซฟแล้วเปิดออกมาก็จะเห็นเป็น Link แบบนี้
google

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

google</a> จะเป็นชื่อลิงค์ที่ปรากฏให้เราเห็นในที่นี้ผมใส่ว่า google เฉยๆ และ </a> ก็เป็นตัวปิดคำสั่งนี้

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

<body>
<a href="http://www.google.com">
<img src="ลิงค์รูปภาพ http://อะไรก็ว่าปาย"></img>
</a>
</body>

ผลลัพธ์ที่ออกมาก็จะเป็น


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

งงไหมเอ่ย พอดีอธิบายแบบบ้านๆอ่ะครับ ถ้าสงสัยตรงไหน ก็คอมเมนท์เอาไว้นะครับผมรับประกันว่าจะมาตอบให้อย่างแน่นอน(แต่ไม่แน่ใจว่านานแค่ไหนน้า-*-) คราวหน้าเราจะมาจัดรูปแบบการวางตำแหน่ง ไม่ว่าจะเป็นรูปภาพ ตัวอักษร หรือ Link ต่างๆกันนะครับ ค่อยๆเป็นค่อยๆไปกันน้า วันนี้ขอตัวล่ะคร๊าบบ

อ่อลืมไป เรื่องจานสีตกลงผมหาไม่เจอแล้ว แต่ไปเจอ addon ตัวหนึ่งของ Firefox ก็ใช้ง่ายดีนะครับ ยังไงก็ลองเข้าไปโหลดได้ในเรื่อง
ค่าสี RGB (<--- เอามาลองทำลิงค์ซะเลย)
นะครับใส่ไว้ให้แล้ว อุอุ

วันพฤหัสบดีที่ 28 กุมภาพันธ์ พ.ศ. 2551

ค่าสี RGB

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

R=Red

G=Green

B=Blue

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

#000000

โดยรหัสของสีเราสามารถกำหนดให้มีความ เข้มหรือ อ่อนได้ มีค่าของตัวเลขอยู่ที่ 0-15 โดยจะใช้ตัวเลข 0-9 และ A-F แทนตัวเลข 0-15 โดย 0จะเป็นค่าที่อ่อน(ขาว)ไล่ไปจน F(เข้ม) ยกตัวอย่างเช่นผมจะใช้สีแดงโค้ดที่ออกมาก็จะเป็น

#FF0000

หรือเราจะใส่ค่าสีมาตรฐานเช่น red, green, blue, violet, yellow, salmon, tomato แทนก็ได้นะครับ ไว้เด๋วผมจะทำตารางสี หรือเด๋วหาโหลดไฟล์แฟลชจานสีมาไว้ให้ใช้กัน หรือถ้าใครมี Photoshop เปิดขึ้นมาแล้วคลิกที่สีดูโค้ดเอาก็ได้นะครับ(ง่ายกว่า)

*** หมายเหตุ ***

สีที่ใช้แสดงผลใน Browser นั้นจะมีด้วยกัน 216 สี โดยจะกำหนดด้วยตัวเลข 00 33 66 99 CC และ FF เท่านั้น ไม่เหมือนกับใน Photoshop ที่กำหนดค่าได้ 16ล้านสี แต่เราสามารถใส่ค่าที่เอามาจาก Photoshop เมื่อนำมาใช้กับเว็บแล้วก็ใช้ได้ แต่สีอาจจะเพี้ยนๆไปเพราะ Browser จะหาสีที่ใกล้เคียงกันมาแทนครับ

ฝากเรื่องจานสี แฟลชไว้ก่อนนะไว้เด๋วหาเจอแล้วจะเอามาลงไว้ให้ ม่ายลืมหรอกน่าาา อุอุ



*** มาอัพเดตครับ*** จานสีตกลงหาไม่เจอ แต่ไปเจอเจ้า Addons ของ บราวเซอร์ ของ หมาไฟ Firefox มาแทน มานมีชื่อว่า Colorzilla ใช้ง่ายครับรูปแบบการใช้ก็จะเป็นหลอดสีเหมือน Photoshop เลย แต่เราสามารถชี้ไปที่จุดใดของหน้าเพ็จก็ได้ มันจะแสดงค่าสีออกมาให้เห็นครับ (ใช้แก้ขัดไปก่อนละกานเน้อ) ไว้ค้นเจอจะเอามาอัพเดตให้ครับ


สำหรับคนที่มี Firefox อยู่แล้ว โหลด Addons ได้เลย ที่นี่

ถ้ายังไม่มี Firefox ต้องลงก่อนนะครับโหลดเอาจากที่ไหนก็ได้ครับฟรี (ในนี้ก็มีนะลองมองดูดีๆ อุอุ)

การใส่ Background หรือ พื้นหลัง

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



เพื่อนๆทุกคนยังคงจำแท็ก <BODY> ได้ใช่ไหมครับ แต่จำเรื่องแอตทริบริวได้ด้วยหรือเปล่า
รูปแบบการใส่สีพื้นให้กับ Background คือ

<BODY bgcolor="ค่าสี"></BODY>

ว่าแต่ค่าสีที่ได้นั้นเอามาจากไหนกันหล่ะ เรามาทำความรู้จักกับค่าสีกันดีก่า ค่าสี RGB
ตามนี้เลย คลิก

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

<BODY bgcolor="red"></BODY>

หรือ

<BODY bgcolor="#FF0000"></BODY>

นั่นเองครับ ลองเซฟเป็น .html ดูครับพอเปิดมาก็จะพบว่าพื้นหลังได้เปลี่ยนสีไปแล้ว

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

รูปแบบ

<BODY background="ชื่อไฟล์ภาพ.นามสกุล"></BODY>

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

<BODY background="image.gif"></BODY>

แต่ถ้าอยู่ต่างแฟ้มกันเราจะต้องอ้างถึง แฟ้มนั้นก่อนด้วย ยกตัวอย่างเช่น เราเก็บไฟล์ภาพไว้ในแฟ้ม /picture/image.gif รูปแบบก็จะเปลี่ยนไปเป็น

<BODY background="picture/image.gif"></BODY>

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

สมมุตติว่าผมจะเอาภาพ Background โดยค้นหาจากกูเกิ้ล เจ้าเก่า โดยเลือกขนาด 800*600 แล้วผมนำไปฝากไฟล์ไว้กับผู้ให้บริการหนึ่ง(uppic) ได้ Link มาดังนี "http://www.uppic.net/if/ffvii08l.jpg"

ทีนี้ผมก็เอาโค้ทที่ได้ไปใส่แทนที่ชื่อภาพ.นามสกุลเลย รูปแบบที่ได้ก็จะเป็น

<BODY background="http://www.uppic.net/if/ffvii08l.jpg"></BODY>

แล้วเซฟไฟล์เป็น .html แล้ว Run ดูก็จะพบว่าพื้นหลังเราได้เปลี่ยนไปแล้วโดยจะมีรูปนาย could(เกม Final Fantasy VII) ที่ผมอัพโหลดเอาไว้แทนครับ

*** หมายเหตุ ***

1.ภาพที่เราฝากไฟล์ไว้ อย่างใน ต.ย.นี้ http://www.uppic.net/if/ffvii08l.jpg วันดีคืนดีอาจจะหายไปได้ถ้าเว็บ Uppic ที่ผมใช้บริการเกิดลบไฟล์นี้ออกไป

2.การทำภาพพื้นหลังจะทำให้หน้าเพจนั้นโหลดช้ากว่าปกตินะครับ อันนี้เป็นข้อเสียสำหรับคนเน็ตช้ามาก

3.เมื่อหน้าเพจเรายาวลงมาเรื่อยๆ จะพบว่า เมื่อเราเลื่อน ScrollBar ด้านขวามือเราลงไปเนี๊ยะ ภาพจะเลื่อนขึ้นไปด้วย ถ้าใครไม่อยากให้ภาพเลื่อนนะครับก็ให้เพิ่ม แอทริบริวต์ bgproperties="fixed" เข้าไป

<BODY background="http://www.uppic.net/if/ffvii08l.jpg" bgproperties="fixed"></BODY>

ภาพที่ออกมาก็จะไม่เลื่อนใหลไปตามแล้วครับ ***และฟังก์ชั่นนี้ใช้ได้ในเฉพาะ Browser ของ IE(Internet Explorer)เท่านั้นนะครับ ถ้าเปิดด้วย Firefox หรือ Opera ก็จะเลื่อนตาม ScorllBar ครับ

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

วันจันทร์ที่ 28 มกราคม พ.ศ. 2551

ใส่ภาพด้วยคำสั่ง < IMG >

สวัสดีครับ วันหยุดที่ผ่านมาเป็นอย่างไรกันบ้างครับ ได้ไปเที่ยวไหนกันมั่งป่าวเอ่ย ส่วนตัวผมเองก็ไม่ได้ไปไหนครับ ก็ผักผ่อนอยู่กับบ้านและเตรียมบทความเกี่ยวกับ ภาษา HTML ที่จะมาเสนอต่อในส่วนของวันนี้ครับ จากครั้งที่แล้วผมได้สัญญาเอาไว้ว่าจะมาเริ่มทะยอยคำสั่งในส่วนของ <BODY> ค่อยๆทำความเข้าใจไปทีละส่วนครับ ไม่ยาก(มั่ง)อย่างที่คิด อิอิ

คำสั่งที่ 1
เป็น TAG ที่ใช้แสดงรูปภาพบนเว็บเพจคือ <img> รูปแบบการใช้งานจะเป็นแบบนี้ครับ


<img src="ชื่อไฟล์รูปภาพหรือLinkรูปภาพที่เราจะนำมาแสดง"></img>


หลายท่านคงสงสัย(เหมือนผมตอนแรก)ว่า src มาไง และเอาไปใส่ไว้เพื่ออะไร ในส่วนนี้ เราเรียกมันว่า แอทริบิว(attribute) เป็นการกำหนดรูปแบบหรือลักษณะเพิ่มเติมให้กับ <TAG> คำสั่งนั้นๆ อย่าง src ย่อมาจาก "source" เป็นการอ้างอิงไฟล์ภาพของเราว่ามาจากที่ไหนครับ โดยรวมในส่วนของ แอทริบิวเนี๊ยะ มันมีเยอะมากพอสมควร แต่เอามาใช้จริงๆตามสไตล์ของแต่ละคนจะใช้ไม่กี่อันเองครับ ผมขอแนะนำว่า ใช้จด-และ-จำ ในบางส่วนก็พอครับ เพราะอีกหน่อยเมื่อเราเขียนโค้ด html เรื่อยๆแล้ว เราจะจำได้เองครับ รับประกันเลย เพราะตอนที่ผมเขียน Blog นี้ผมก็ไม่ได้มีความรู้ด้าน HTML มาก่อนครับ พิมพ์มันไปเรื่อยๆก็จำได้ครับ
รูปแบบการใช้ของเพื่อนในตอนนี้คงพอนึกออกไหมครับว่า ในBlog หรือ เวปบอร์ดบางอันเค้าจะมีให้เราใส่ HTML ได้เราก็สามารถนำรูปไปลงได้ครับ โดยที่เราเขียนรูปแบบของ IMG ดังตัวอย่างข้างบน แล้วอ้างอิงไฟล์ภาพจากเว็บที่เราจะเอามาแสดงครับ

ในตัวอย่างแรกผมจะอ้างไฟล์ที่อยู่ในเว็บของคนอื่นก่อน
ตัวอย่างเช่น ผมจะเอาภาพ โลโก้ของ yahoo มาใส่ ผมก็เปิดเว็บ Yahoo แล้วคลิกขวาที่ภาพ เลือก Properties ถ้าใครใช้ บราวเซอร์ของ FireFox ให้ดูตรง Location ถ้าใครเปิดผ่าน IE(Internet Explorer) ก็ให้ดูตรง Address(URL)ครับ ให้ copy Link อันนั้นมาใส่ใน TAG HTML ของเรา ดังนี้ครับ
<img src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif"><img>
ผลที่ได้เมื่อเซฟ NotePad เป็น .html แล้วเปิดออกมาจะเป็น



555 ผมลงรูปใน Blog ผมด้วยการเขียนโค้ด HTML แล้วเย้ๆ แต่ แต่! ขอเสียของมันก็คือ ภาพนั้นเราควบคุมไม่ได้เพราะภาพนั้นไม่ได้อยู่ในโฮส Host เรานั่นเอง วันดีคืนดี yahoo เค้าเอาภาพโลโก้นี้ออกจาก HOST ของเค้า แล้วเอาภาพใหม่ขึ้นมาแทน(โดยใช้ชื่อภาพคนละชื่อกับของเดิม)Links ที่เราเคยทำไว้ก็จะกลายเป็น Link เสีย ไม่โชว์ภาพ แล้วก็จะทำให้เว็บเราดูไม่สวยงามครับ

แบบที่สองก็เป็นการนำภาพมาจากเว็บที่รับฝากไฟล์ภาพ แบบนี้จะง่ายเพราะเราอัพโหลดไฟล์เสร็จเค้าก็จะทำ links HTML มาให้เราเสร็จเลย ไม่ต้องมาใส่โค้ดเอง แต่จะมี Links แอบแฝงไว้ในกรณีที่เราคลิกที่ภาพนั้น(ส่วนใหญ่ ไม่มีใครให้ฝากไฟล์ฟรีๆหรอกครับ)แต่ก็ไม่เสียหายแต่อย่างใด โดยถ้าเราจะเลือกใช้บริการแบบนี้ก็ควรเลือกเว็บที่ มั่นคง ไม่ล่มบ่อย และไม่ลบภาพเราออกจากระบบ ที่ผมเคยโดนก้เค้าแจ้งมาว่าระบบมีปัญหา แล้วก็ทำการล้างระบบใหม่เลยครับ ตัวอย่างเว็บฝากไฟล์ไว้เดี๋ยววันหลังผมจะหาแล้วนำมาลงไว้ให้นะครับ แต่ที่มีภาษีน่าเชื่อถือก็ Blogger นี่ก็ได้ครับไม่มีลบ ไม่มีล่ม แน่นอน เอิ๊กๆ

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

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

วันศุกร์ที่ 25 มกราคม พ.ศ. 2551

โครงสร้างของภาษา HTML


25/01/2008

วันที่ 2 แต๊น แตน แต๊นน หายไปวันหนึ่ง -*- พอดีไปหาวิธีการเขียนโค้ดลงเวปครับ แบบว่าพอเขียนใส่ TAG ล้วพอแสดงหน้าเว็บแล้วมันไม่ขึ้น อิอิ วันนี้มารู้จักโครงสร้าง ส่วนประกอบของเว็บ และ tag สำหรับเขียนเว็บกัน คิคิ


โครงสร้างภาษา HTML

เว็บแต่ละหน้านั้น จะมี <TAG> หลักๆอยู่3อันคือ

ส่วนขอบเขต <html>

ส่วนหัว <head>

ส่วนเนื้อหา<body>

โดยรูปแบบจะออกมาเป็นดังนี้



<HTML> ส่วนขอบเขต
<HEAD> ส่วนหัว
......
</HEAD> สิ้นสุดส่วนหัว
<BODY> ส่วนเนื้อหา
......
</BODY> สิ้นสุดส่วนเนื้อหา
</HTML> ปิดส่วนขอบเขต


*หลักการใช้ tag ทั่วไปนั้น เราจำเป็นจะต้องมี tag ตัวปิดด้วยเสมอ เช่น <html> จำเป็นจะต้องมี </html> เป็นตัวปิด (แต่มีพวกบาง <tag> ทีสามารถใช้ได้โดดเลย ไว้เด๋วจะบอกครับ งุงิ)


เอาล่ะทีนี้เราจะมาเริ่มเขียนโค้ดกันแล้ว!

TAG ที่ 1 <Title>

เคยสังเกตไหมว่า เวลาเปิดเว็บขึ้นมาตรงแถบสีน้ำเงิน (บนสุดของ Browser) จะแสดงเป็นชื่อเว็บต่างๆ เราสามารถใช้ <Title> กำหนดหรือใส่คำจำกัดความของเว็บนั้นๆ โดยรูปแบบ จะใช้อยู่ระหว่าง <HEAD>...</HEAD> ยกตัวอย่างเช่น



<HTML>
<HEAD>
<Title> สัวสดีครับ ยินดีต้อนรับ ^o^ </Title>
</HEAD>
</HTML>

(อ่ะๆ ผมลืมบอกไปนิดหนึ่ง เวลาเราพิมพ์โค้ดใส่ลงบน Program Notepad แล้ว ถ้าจะให้สามารถเปิดดูได้แบบเว็บเพจ เวลาเซฟก็ให้ใส่นามสกุลเป็น .html ด้วยนะครับ เช่น test.html แล้วเซฟครับ แล้วถ้าเราอยากจะแก้ไขโค้ดก็คลิกขวาที่ไฟล์ test.html แล้วเลือก OpenWith --> Notepad ได้เลยครับ)
ทีนี้รอง เปิดไฟล์ test.html ขึ้นมาก็จะพบว่า
Tital Bar ของเราได้เปลี่ยนไปแล้ว



การกำหนดชื่อตรงส่วน Title นี้เราไม่สามารถใส่พวกตัวเอียง ตัวหนา ลงสี หรือ ตัวขีดเส้นใต้ได้ แต่เราก็สามารถทำให้มันสะดุดตาได้โดย ทำการจัดเรียงตัวอักษรใหม่ เช่น <Title> W e l e c o m e T o M y F i r s t S i t e ! ^o^ </Title> อะไรประมาณเนี๊ยะ
โดยปกติแล้วส่วน Title นี้ ถ้าเราไม่ได้ทำการกำหนดเอาไว้ เวลาเปิด Browser ขึ้นมา ตรงส่วน TitleBar นี้ก็จะแสดงเป็นชื่อไฟล์ .html ขึ้นมาแทนครับ




TAG ที่ 2 <BODY>

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



<HTML>
<HEAD>
<Title> สัวสดีครับ ยินดีต้อนรับ ^o^ </Title>
</HEAD>
<BODY>
โอ้ว ว้าว เรานี่ก็เก่งเหมือนกันนะนี่ อิอิ :-P
</BODY>
</HTML>

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

วันพุธที่ 23 มกราคม พ.ศ. 2551

HTML Basic ใครว่ายาก

Blog นี้เขียนขึ้นมาเพื่อฝึกฝนตัวเอง และให้ความรู้ในด้านการเขียนภาษา html ตั้งแต่พื้นฐาน โดยจุดประสงค์หลักก็เพื่อเอาไว้ดูพวกโค้ดต่างๆที่มือใหม่อยากจะรู้ เป็นพื้นฐานการใช้ภาษา html ก่อนที่จะนำไปประยุกต์ใช้กับภาษาอื่นๆต่อไป

โดยส่วนตัวแล้วผมเป็นคนชอบซื้อหนังสือเกี่ยวกับคอมพิวเตอร์มาอ่านอยู่เป็นประจำ แต่เพิ่งจะสนใจและเริ่มศึกษาเกี่ยวกับการทำเว็บไซต์ก็ไม่มานมานี้เองครับ โดยเริ่มแรก ผมลองใช้โปรแกรมยอดฮิตอย่าง Dreamwever (ที่ใครหลายๆคนรู้จัก) โดยหลักการก็จะเหมือนโปรแกรมกราฟฟิกเลย(ฟามคิดส่วนตัว :P) แต่มีปัญหาตรงที่ว่าผมเป็นพวกอยากรู้อะไรต้องรู้ให้หมด (เหมือนตอนเล่นเกมพวก RPG Roaling Player Game) อะไรประมาณนั้น เลยอยากที่จะลองเข้ามาศึกษาภาษา html แบบเน้นๆดู เพราะโดยส่วนตัวผมเองนั้นคิดว่า ถ้าจะทำเว็บไซต์ที่ดีนั้นเราต้องเข้าใจสิ่งที่เราทำมันเองขึ้นมาทั้งหมด แม้กระทั่ง ViewSource ขึ้นมาแล้วสามารถบอกรายละเอียดตั้งแต่บรรทัดแรกจนบรรทัดสุดท้ายไปเลย(ซะงั้น) แต่ไม่รู้ว่าจะไปถึงไหน และเพื่อเป็นการกระตุ้นตัว(ผม)เอง ก็เลยคิดว่ามันจำเป็นที่จะต้องมีอะไรที่อัพเดตตามความรู้ของเราในแต่ละวัน ก็เลยคิดว่า เอาที่เรากำลังศึกษานั้นลง Blog ไปเลยสิจะได้เป็นการเทสต์การใช้ภาษา html ไปในตัวด้วย (ที่จริงแล้วเป็นพวกชอบเรียนรู้ แต่แรงใจไม่ค่อยมี พวกไฟในใจม๊อดเร็วนะครับ -*- ) เก็บไว้ดูว่าตั้งแต่แรกเริ่มเลยเราจะสามารถพัฒนาไปได้มากน้อยแค่ไหน แหะๆ อธิบายมาซะยืดยาวเลย
แต่ก็ขอบคุณที่ทุกๆท่านอ่านมาจนถึงบรรทัดนี้ และสำหรับใครที่กำลังจะเรียนรู้เรื่องภาษา html ก็มาลองก้าวไปพร้อมๆกันนะครับ ขอบคุณครับ เอาละมาเริ่มกันเลยดีกว่า Start! 23/01/2008 (hanami7)



วันที่ 1 Start! html Basic! html คืออะไร?
HTML ย่อมาจาก Hyper Text Markup Language เป็นภาษาสากลที่ใช้สื่อสารกันแพร่หลายใน internet เช่นเดียวกับคำสั่งใน UNIX หรือ DOS ในเครื่องคอมพิวเตอร์แบบ PC
พูดง่ายๆHTML ก็คือเอกสารข้อความที่มี ชุดคำสั่ง tag กำกับแต่ละส่วนของเอกสารเพื่อบอกให้โปรแกรมสำหรับอ่านซึ่งเราเรียกว่า Web browser รู้ว่า แต่ละส่วนของเอกสารจะต้องแสดงผลออกมาอย่างไร หรือจะต้องทำอย่างไรหากมีการเลือก(ด้วยการคลิกเมาส์หรือกด Enter) ตรงบริเวณที่กำหนด เป็นต้น


นักพัฒนาเว็บทุกคนต้องมีความรู้เกี่ยวกับภาษา html เป็นภาษาเริ่มแรกๆ จนกระทั่งปัจจุบันนี้ แม้จะมีเครื่องไม้เครื่องมือทำให้เราไม่ต้องจดจำภาษา html ให้ยุ่งยากแต่ในความเป็นจริงแล้วถ้าจะทำเว็บในระยะยาวนั้น ทุกๆคนที่ทำเว็บไซต์จำเป็นที่จะต้องเข้าใจภาษา html เป็นอย่างดี แล้วค่อศึกษาและเพิ่มเติมความสามารถด้วยการศึกษาภาษาอื่นๆเช่น PHP JavaScript ASP JSP สคริปภาษาต่างๆ Flash ฯลฯ
ภาษา html เป็นภาษาสำหรับเขียนโปรแกรม แต่เป็นภาษาที่ง่ายซึ่งคนที่ไม่มีพื้นฐานด้านภาษามาเลยก็สามารถเรียนด้วยตัวเองได้ (จะง่ายเหมือนตอนผมเรียนเทอรโบปาสคาลป่าวไม่รู้ ไว้ต้องรอดู อิอิ)
เว็บเพจแต่ละเว็บจะมีหน้าตาต่างๆกันออกไป แต่เว็บทุกเว็บนั้นมีองค์ประกอบพื้นฐานเหมือนๆกัน (อ่ะเห็นคำว่า เว็บ เว็บเพจ เว็บไซต์ โฮมเพจ ไรพวกเนี๊ยะ มันต่างกันอย่างไร) ผมก็ไปเสาะหามาแล้วได้ความดังนี้



เว็บเพจ (WebPage) คือหน้าเว็บหน้าหนึ่งที่เราเปิดมานั่นแหละครับ เช่นBlog ที่ผมกำลังเขียนอยู่เนี๊ยะก็เป็น เว็บเพจ หน้าหนึ่งครับ โดยจะเซฟเป็นไฟล์ที่มีนามสกุล *.htm หรือ *.html

เว็บไซต์ (WebSite) คือการเอาหน้าเว็บเพจที่เราทำๆขึ้นมามารวมกันครับ ก็เปรียบได้กับเว็บพวก sanook.com, yahoo.com ฯลฯ ทั่วๆไปนี่แหละครับ หรือจะเป็น Blogger.com อันนี้ก็ได้

โฮมเพจ(HomePage) คือเว็บเพจนั่นแหละครับ แค่มันได้อยู่หน้าแรกเป็นหน้าเป็นตาของบ้าน(เว็บไซต์)ของเรานั่นเองครับ

บราวเซอร์(Browser) คือเครื่องมือในการอ่านภาษา html มีหน้าที่ติดต่อกับ เว็บเซิฟเวอร์ แปลงภาษาhtml เป็นหน้าเว็บเพจ

ถ้ามีติดเครื่องตอนลงโปรแกรมวินโดวส์มาเลยก็เช่น Internet Exploer หรือตัว e สีฟ้าๆเวลาจะเล่นอินเตอร์เนตนั่นแหละครับ และก็มีอิกตัวที่ผมใช้อยู่ก็ FireFox น้องใหม่มาแรงมีระบบป้องกันพวกไวรัส adware มาให้ในระดับนึงครับ ยังมีพวก Netscape Navigator และ Opera อื่นๆอีก (เยอะแฮะ เอาเป็นว่าใช้ตัว e ที่มากับเครื่องหรือไม่ก็ Firefox ก็พอครับ- -")
ยังมีศัพท์ที่จำเป็นต้องรู้อิกเช่น พวก URL, Domian Name, Web Server, HyperLink ฯลฯ ไว้เมื่อมีศัพท์พวกนี้ในเนื้อหาผมจะอธิบายกำกับไว้ให้(ไม่อยากให้มัน อัดๆจำๆกันเกินไปเด๋วจะพาลลืมและเบื่อเปล่าๆ ซะงั้น)


นอกจากศัพท์ที่จะต้องรู้แล้ว ก็ยังมีพวกประวัติความเป็นมาต่างๆ อันนี้ถ้าเรารู้ก็จะเป็นการดีครับและถือว่าเป็นการเคารพเจ้าของคนคิดค้นภาษาขึ้นมา และจะรู้ด้วยว่าเค้าปัต-ตะ-นา กันไปถึงไหนแล้ว แต่ผมจะไม่เอามาลงใน Blog หรอกครับ มันยาววมาก แหะๆ ใครอยากอ่านก็ลองหาใน WiKipedia สารานุกรมโลก(อินเตอร์เนต)ดูนะครับ
รู้ไหมครับว่าขนาดของหน้าเว็บเพจที่เราทำขึ้นมานั้น ถ้านำไปเปิดผ่าน เครื่องคอมพิวเตอร์ที่ตั้งความละเอียดของหน้าจอต่างกัน หรือเปิดผ่านเว็บบราวเซอร์คนละตัวกัน ผลลัพธ์ที่ออกมานั้นก็อาจจะแตกต่างกันไปด้วย แล้วเราควรจะกำหนดขนาดของหน้าเว็บเท่าไหร่ดีหล่ะ? อันนี้ขอตอบว่าต้องลองทำตามที่เครื่องเราใช้ก่อนครับ ไม่ต้องไปกำหนดกฎเกณฑ์มัน เพราะอย่างน้อย คนที่ใช้บราวเซอร์ กับความละเอียดแบบเราก็ยังมีเยอะครับ(คิดง่าย :P) ซึ่งถ้าตั้งความละเอียดไม่ต่างกันมากผลที่ออกมาก็จะเหมือนๆกันครับ แต่มันจะมีคำสั่งในการจัดรูปแบบการแสดงผลทางจอภาพ ไม่ว่าจะตั้งค่าต่างๆไว้เท่าไร ผลที่ออกมาจะทำให้เราใกล้เคียงกับที่เราสร้างไว้ ไว้เด๋วเรียบเรียงบทความแล้วจะนำมาลงอีกทีครับ
โปรกแกรมที่ผมจะนำมาใช้เขียนภาษา html ในตอนนี้เป็นโปรแกรมที่มีมาให้ใน วินโดวส์ทุกๆเครื่องอยู่แล้วครับ ลองเปิดขึ้นมาเลยก็ได้ โปรแกรม Notepad นั่นเอง

(ตายหล่ะหว่าพิมพ์มาตั้งนานเพิ่งจะรู้ว่าตัวเองเขียนคำว่าเว็บผิดขอแก้ก่อนนะครับ (เวป <--ผิด))
วันแรกเอาแค่นี้ก่อนนะครับ ไว้มาต่อกันพรุ่งนี้ เราจะเริ่มเขียนเว็บของเราเองแบบ พิมพ์ๆๆโค้ดลงใน Notepad กัน เจอกันพรุ่งนี้ครับ :)