วันจันทร์ที่ 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 กัน เจอกันพรุ่งนี้ครับ :)