มาเรียนรู้ภาษา html จากศูนย์กันเถอะ

ขีดเส้นใต้บทความ

2009-06-07T20:55:00.000-07:00

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

<HR>

ไว้ตรงตำแหน่งที่เราจะขีดเส้นใต้ เพียงแค่นี้เอง

ลองเอาไปใช้กันดูนะเค๊อะ

การกำหนดขนาดตัวอักษร

2009-06-04T04:47:00.000-07:00

หวัดดีค๊าปเพ่น้อง ช่วงนี้อากาศเริ่มมีฝนฟ้า ตกเกือบทุกวันเลย ยังไงก็ระวังเป็นหวัดกันเน้อ รักษาสุขภาพกันด้วย เด๋วจะหาว่าไม่เตือนนะ อิอิ
เอาละ คราวที่แล้วเราได้ทำการใส่สีให้ตัวอักษรกันไปแล้ว คราวนี้ เราจะมาปรับขนาดกัน โดยยังคงใช้ TAG อันเดิมคือเจ้า ....

 ...... 

นั่นเอง แอบทริบิวท์ตอนใส่สีคราวที่แล้วคือ color ลองเดาดูว่า ถ้าเป็นปรับขนาดจะใช้คำว่าอ่ะไร ติ๊กต๊อกๆๆ
..................... ปิ๊งป่อง
ถูกต้องนะค๊าป!! SIZE นั่นเอง
คราวก่อนโน่น เราได้ทำการเพิ่มขนาดตัวอักษร กับ ลดขนาดตัวอักษร ได้แค่ 1 ระดับ โดยใช้คำสั่งว่า

<BIG>......</BIG>
......

แต่เจ้า ......
เราสามารถกำหนดขนาดของมันเองได้ถึง 7 ระดับ โดยกำหนดได้ด้วยตัวเลขเลย
หรือแบบที่2 กำหนดโดยใส่ค่า +/- แล้วกำหนดระดับอีกที อาจจะงง ลองมาดูตัวอย่างเช่น

......
......
......
......
......
......
...... เป็นต้น

ถ้าอยากรู้ว่าระดับที่ 1-7 มีขนาดเท่าไรบ้าง ลองมาเทียบกันเลย

ปรับแต่งตัวอักษรระดับ 7 <--ลองทำดู Blogger มันกำหนดสูงสุดได้แค่ 5ง่ะ ปรับแต่งตัวอักษรระดับ 6 <--ลองทำดู Blogger มันกำหนดสูงสุดได้แค่ 5ง่ะ
ปรับแต่งตัวอักษรระดับ 5
ปรับแต่งตัวอักษรระดับ 4
ปรับแต่งตัวอักษรระดับ 3
ปรับแต่งตัวอักษรระดับ 2
ปรับแต่งตัวอักษรระดับ 1

***หมายเหตุ***
ระดับ 7 , 6 ลองทำดูเองนะใน Blogger มันกำหนดสูงสุดได้แค่ 5ง่ะเพราะอาจจะเป็นที่เขียน CSS ไว้หรือเปล่าผมก็ไม่ทราบแต่อย่างใด -*- ไว้ถึงตอนนี้ (เรียนรู้ไปถึง) ก็ค่อยมาแก้เน๊าะ

เพื่อนๆ สามารถใส่ แอบทริบิวท์ ซ้อนกันได้ถ้าสมมุติว่า เราจะทำอักษรระดับ5 สีแดง ตัวหนา โดยหลักการเป็นดังนี้

ตัวอักษรระดับ 5 

ตัวอักษรระดับ 5

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

มาใส่สีตัวอักษรกันดีฝ่า

2009-06-03T00:58:00.000-07:00

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

การใส่สีตัวอักษรมีหลายวิธีการ แต่ที่จะนำเอามาบอก เล่าสู่กันฟังมีอยู่ 2 วิธีการคือ

ใส่สีทั้งหน้าเพจ
ใส่สีให้ตัวอักษรบางกลุ่ม

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

ขั้นตอนต่อมาคือการเพิ่ม แอทริบิว(attribute) TEXT="#ค่าสี" เข้าไปใน TAG BODY ลองมาดูวิธีการเขียนจริงๆกัน

<BODY Text="#ค่าสี">
......
<BODY>

แล้วค่าสีนั้นเอามาจากที่ไหน

ตารางค่าสี (ซื้อมาก็ได้)
โปรแกรมแต่งภาพต่างๆ Photoshop, Illustrator (เข้าที่โหมดเลือกสี)
Add-on ของ FireFox ColorZilla
เขียนชื่อแทนโค้ทสี เช่น สีแดงก็ red, darkred, maroon, crimson etc.
และอีกหลายวิธีการ ฯลฯ

อ่ะลืมถาม ยังจำเรื่องค่าสี RGB กันได้ไหมเนี๊ยะถ้าลืมก็กลับไปอ่านก่อน เด๋วจะไม่เข้าใจนะจ๊ะ

ค่าสี RGB

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

การใส่สีให้ตัวอักษรบางกลุ่มด้วย + Attribute Color

เช่นการที่เราจะเน้นข้อความให้มีสีสันที่ หัวข้อ/บทความ/ชื่อผู้แต่ง ฯลฯ
สมมุติผมเขียนบทความมาอันนุง และจะให้เน้นสีเฉพาะคำว่า โค้งอันตราย

รูปแบบจะออกมาเป็นแบบนี้

 โค้งอันตราย 
หรือ
 โค้งอันตราย 

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

โค้งอันตราย

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

Blogger กับ iPhone

2009-05-31T06:42:00.000-07:00

สนุกกับการปรับแต่งตัวอักษร HTML เบื้องต้น

2009-05-29T07:45:00.000-07:00

สวัสดีเพื่อนๆ เบื่อกันอ่ะยาง วันนี้เรามาสนุกกับการปรับแต่งตัวอักษรกันดีกว่า
เนื้อหาเหมือนจะเยอะนิดนุงนะวันนี้ แต่ไม่ยากเลยเพราะหลักการเหมือนกัน (มั่ง) อิอิ

แฮ่มๆ เอาละมาเข้าเรื่องกันเลยดีกว่ามาลองดูเนื้อหาที่จะมาร่ำมาเรียนพร้อมๆกันก่อนดีกว่า

ตัวอักษรปกติ
ตัวหนา
ตัวเอียง
ตัวขีดเส้นใต้
ตัวอักษรใหญ่ขึ้น 1 ระดับ
ตัวอักษรเล็กลง 1 ระดับ
ตัวอักษรขีดฆ่า
ตัวอักษรยกกำลัง
ตัวอักษรห้อย (มันเรียกแบบนี้ป่าวอ่ะ -*-)

โห้วววว แล้วจะจำกันหมดไหมเนี๊ยะ !! ทำใจไว้ก่อนเลย ก่อนอื่นมาลองดูหลักการอันเยอะแยะมากมายกันก่อน

ใส่โค้ทคร่อมช่วงที่ต้องการปรับแต่งตัวอักษร

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

แบบตัวอักษร	โค้ท
ตัวอักษรปกติ	ไม่ต้องใส่โค้ท
ตัวหนา	<B>.....</B>
ตัวเอียง	<i>.....</i>
ตัวขีดเส้นใต้	<U>.....</U>
ตัวอักษรใหญ่ขึ้น 1 ระดับ	<BIG>.....</BIG>
ตัวอักษรเล็กลง 1 ระดับ	<SMALL>.....</SMALL>
~~ตัวอักษรขีดฆ่า~~	<STRIKE>.....</STRIKE>
ตัวอักษร^{ยกกำลัง}	<SUP>.....</SUP>
ตัวอักษร_ห้อย	<SUB>.....</SUB>

ง่ายมากเลยใช่ไหมครับ แค่จำโค้ทได้ก็สามารถปรับแต่งตัวอักษรกันได้อย่างสนุกสนานเลยทีเดียว
ขอแถมโค้ทอีก 2 TAG ที่สามารถใช้ได้เฉพาะเมื่อเปิดดูด้วย IE (Internet Explorer Browser) เท่านั้น
~~FireFox และ Safari เปิดดูจะไม่เห็นผลนะจ๊ะ~~
แก้ไขจ้า ตะกี้เปิดกับ FireFox 3.0.10 แล้วมันใช้ได้อ่ะ แหะๆ

<BLINK>ตัวอักษรกระพริบ</BLINK>
<MARQUEE>ตัวอักษรข้อความเลื่อน </MARQUEE>

ลองเอาไปเล่นกันดูนะ คราวหน้าเราจะมาลงสีให้ตัวอักษรกัน โอ้วว มีสีสันสวยงามมั๊กๆ อ่ะแจ๋วใจร้ายจบพอดีเลย ขอตัวไปอาบน้ำก่อนนะคร๊าบ แล้วเจอกัน

Enter เว้นบรรทัดด้วย TAG BR

2009-05-28T08:58:00.000-07:00

แต๊น แตนน!!
สวัสดีจ้า คราวที่แล้ว ได้รู้จักกับ <CENTER> ไปแล้ว คราวนี้ผมจะพาเพื่อนๆไปรู้จักกับ TAG ง่ายๆ สักอันนุง เพื่อเป็นการเรียกน้ำลาย เอ้ย น้ำย่อยก่อนที่จะไปเรื่องตัวอักษรในคราวหน้า

นั่นคือ 

โดยปกติแล้วเพื่อนๆ พิมพ์ข้อความแล้วเซฟเป็นไฟล์ HTML เลย เวลาเปิดผ่าน บราวเซอร์ขึ้นมาก็จะปรากฎข้อความนั้นๆ ยาวเป็นพรืดดดดติดกัน ถึงแม้ว่าเวลาพิมพ์ข้อความย๊าววว ยาวว เพื่อนๆจะกด ENTER เว้นบรรทัดแล้วก็ตาม ชิมิ O_o

แต่ แต่ แต่ ปัญหานั้นจะหมดไป โอ้ววว ซาร่ามันยอดมาก *-*
เพียงแค่คุณพิมพ์ ต่อท้ายแทนการกด ENTER
สมมุติ นะค่ะ สมมุติ สมมุติว่า ผมจะพิมพ์ ว่า
"ชื่อ นามสกุล บ้านเลขที่ ตำบล/แขวง อำเภอ/เขต จังหวัด"
ให้แยกอยู่คนละบรรทัด จะต้องพิมพ์อย่างไร มาดูกัน

ชื่อ นามสกุล บ้านเลขที่ ตำบล/แขวง อำเภอ/เขต จังหวัด

เมื่อลองเซฟแล้วเปิดดูจะพบว่า ผลที่ได้จะเป็นแบบนี้

ชื่อ
นามสกุล
บ้านเลขที่
ตำบล/แขวง
อำเภอ/เขต
จังหวัด

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

ชื่อ 
นามสกุล 
บ้านเลขที่ 
ตำบล/แขวง 
อำเภอ/เขต 
จังหวัด

อันนี้แล้วแต่ความถนัดส่วนตัวนะครับ อิอิ

คราวหน้าผมจะเอาเรื่องการ ปรับแต่งตัวอักษรมาเรียนรู้กับเพื่อนๆพร้อมกัน รับรองสนุกแน่นอนครับ
วันนี้ขอตัวไปดู "เป็นต่อ" ก่อนนะคร๊าบบบบบ *-*

การจัดข้อมูลให้อยู่กึ่งกลาง

2009-05-27T07:33:00.000-07:00

สวัสดีครับ วันนี้ขอแนะนำ TAG สุดฮิตสำหรับมือใหม่อย่างผม นั่นคือ แต๊น แต๊นๆ
แท็ก <CENTER> </CENTER>นั่นเอง
ลองมาดูกันว่าเจ้า TAG ตัวนี้มันใช้ยังไง แล้วมันจะสำคัญและใช้เยอะจริงๆสำหรับมือใหม่อย่างที่ผมว่าหรือเปล่า อุอุ

เริ่มด้วย เห็นเจ้ากระต่าย (น่าจะใช่นะ) ที่อยู่ด้านบนของบทความวันนี้ไหมครับ วันนี้เราจะย้ายมันให้มาอยู่กึ่งกลางของบทความกัน เริ่มด้วย การใส่รูปภาพปกติด้วย แท็ก <IMG> </IMG> ถ้าลืมเรื่องใส่ภาพกันไปแล้วกลับไปทบทวนซะดีๆ
>> คลิกที่นี่ <<
ปกติแล้วเมื่ออ้างอิงจากรูปน้องกระต่าย จะเป็น
<IMG> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh49wAZxJf26_TNPq1vMKm5UpbPwkqI3d-2pjH9-32m50JE-nugxX5mWPyXQGbVaS_qRoGAvxc41pLjXKSO9T0NvAJArAGSl73wYy9eY1bpWgULts9KS0djyNl9uexUlrxriZAcmFnzLg0/s220/0015543.gif </IMG>

แต่คราวนี้เราลองเพิ่ม TAG <CENTER> </CENTER> ไปคร่อม TAG รูปภาพจะเป็น
<CENTER><IMG> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh49wAZxJf26_TNPq1vMKm5UpbPwkqI3d-2pjH9-32m50JE-nugxX5mWPyXQGbVaS_qRoGAvxc41pLjXKSO9T0NvAJArAGSl73wYy9eY1bpWgULts9KS0djyNl9uexUlrxriZAcmFnzLg0/s220/0015543.gif </IMG></CENTER>

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

แอ๊น แอน แอ๊นนน น้องกระต่ายไปโดดเล่นอยู่ตรงกลางแล้ว
ง่ายใช่ไหมครับ ซึ่งเจ้า <CENTER> </CENTER> นี้สามารถใช้ได้ครอบจักรวาล ทั้งข้อความ รูปภาพ ตาราง ลิงค์ ฯลฯ โดยหลักการก็เหมือนเดิมคือ เอา <CENTER> </CENTER> ไปคร่อมช่วงที่เราจะจัดให้อยู่กึ่งกลาง เท่านั้นเองครับ

ลองไปทำให้น้องกระต่ายกระโดดอยู่ กึ่งกลางหน้ากันดูนะครับ
วันนี้แค่นี้ก่อน พบกันพรุ่งนี้ จ้า

HTML Language Blogspot Return

2009-05-27T07:14:00.000-07:00

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

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

2008-03-07T11:10:00.000-08:00

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

ค่าสี RGB

2008-02-28T04:53:00.000-08:00

เรื่อค่าสี 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 หรือ พื้นหลัง

2008-02-28T03:00:00.000-08:00

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

เพื่อนๆทุกคนยังคงจำแท็ก <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 ครับ

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

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

2008-01-28T01:45:00.000-08:00

สวัสดีครับ วันหยุดที่ผ่านมาเป็นอย่างไรกันบ้างครับ ได้ไปเที่ยวไหนกันมั่งป่าวเอ่ย ส่วนตัวผมเองก็ไม่ได้ไปไหนครับ ก็ผักผ่อนอยู่กับบ้านและเตรียมบทความเกี่ยวกับ ภาษา 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 กันนะครับ

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

2008-01-25T00:27:00.000-08:00

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 กันครับตื่นเต้นจางง เยยยย

HTML Basic ใครว่ายาก

2008-01-23T00:57:00.000-08:00

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