WordPress.com



บทนำ Web - : ภาพรวมการสร้าง Web

โลกของ internet

การทำธุรกิจที่ค่อนข้างประหยัด และได้ผลเป็นที่ยอมรับกันทั่วโลก หนึ่งในหลาย ๆ วิธีคือ การทำธุรกิจผ่านช่องทาง internet หรือ หลายคนอาจได้ยินมาบ้างแล้วเกี่ยวกับ E-Commerce การเติบโตของ internte ค่อนข้างรวดเร็วมาก โดยเฉพาะการใช้บริการ Email ซึ่งถือได้ว่าเกือบทุกธุรกิจในปัจจุบัน จำเป็นจะต้องพึ่งพาการใช้งาน Email เนื่องจากเป็นบริการที่รวดเร็วที่สุด และประหยัดที่สุด...

อีกบริการทาง internet ที่เป็นที่แพร่หลายและนิยมมากที่สุดอีกอย่างคือ www (World Wide Web) คือบริการที่อาศัยเทคโนโลยี ไฮเปอร์เท็กซ์ (Hypertex) และ ไฮเปอร์มีเดีย (อย่าเพิ่งงงน่ะครับ อ่าน ๆ ไปก่อน) โดยจะแสดงในรูปแบบของเอกสาร มีข้อความ รูปภาพ ซึ่งรวมเรียกว่า เพจ (Page) อาจมีการเชื่อมโยงไปยังจุดอื่นๆ หรือหน้าอื่น ๆ ด้วยการลิงค์ (Link) ซึ่งทั้งหมดเรียกว่า โฮมเพจ (Home Page)

สำหรับภาษาพื้นฐานที่ทุก ๆ คนควรทราบเพื่อนำไปใช้ในการสร้าง Web Page ได้อย่างมืออาชีพ นั่นก็คือ HTML (Hyper Text Markup Language) ซึ่งคุณ ๆ จะได้ศึกษาในบทต่อ ๆ ไป และเราเชื่อมั่นว่า ถ้าคุณได้ลองศึกษาอย่างตั้งใจแล้ว คุณจะสามารถสร้าง Web ของคุณเอง ได้อย่างแน่นอน... โดยบุคคลที่สร้าง Web และคอยจัดการ เราเรียกว่า Webmaster

ลำดับการขั้นตอนโดยรวมในการสร้าง Web และแสดงผลงาน

1. จัดสร้าง Web Page ด้วยภาษา HTML ไฟล์ที่ได้ส่วนใหญ่มีนามสกุล .htm, .html

2. จด ทะเบียนชื่อ Web เช่น it- ปัจจุบันคุณสามารถจดชื่อ web site โดยใช้บริการในประเทศไทยได้ เช่น เป็นต้น คุณสามารถศึกษาข้อมูลเพิ่มเติมเกี่ยวกับ ชื่อ web หรือที่เราเรียกเป็นภาษาสากลว่า Domain Name ได้เพียง คลิกที่นี่ หรือ ตรวจสอบชื่อ domain ว่าถูกจองไว้แล้วหรือยังได้ เพียงพิมพ์ชื่อที่ต้องการ ด้านล่างนี้

3. เช่าพื้นที่ในการฝาก Web กับบริษัทที่ให้บริการ (Web Hosting) อาจหาบริการฝาก Web ฟรี ได้ ดูรายละเอียด คลิกที่นี่

4. โอนย้ายข้อมูลไปยัง Web Hosting หรือที่เราเรียกว่า Transfer ดูตัวอย่างได้โดย คลิกที่นี่

5. โฆษณา หรือแลกเปลี่ยน Link กับ Web Site อื่นๆ เพื่อเป็นการช่วยประชาสัมพันธ์ Web site

6. ปรับปรุง Web อย่างสม่ำเสมอ เพื่อให้คนเข้ามาเยี่ยมชมไม่รู้สึกเบื่อ

บทเรียนที่ 1 : โครงสร้างพื้นฐานภาษา HTML

ภาษา HTML คืออะไร ?

HTML (Hyper Text Markup Language) เป็นภาษาที่ใช้ในการพัฒนา web page เพื่อให้โปรแกรม web brower ต่างๆ (Internet Explorer, Netscape, Opera) สามารถแปลงคำสั่ง แสดงผลในลักษณะของรูปภาพ ตัวอักษร เสียง ภาพเคลื่อนไหว โดยไฟล์ที่สร้างจะมีนามสกุล .html หรือ .htm การสร้างและแก้ไขสามารถใช้โปรแกรม NotePad, WordPad ในวินโดวส์ ลักษณะของไฟล์จะเป็น Text ไฟล์ธรรมดา

|ตัวอย่างโครงสร้างภาษา HTML |

| |

| |

| |

| โปรแกรมแรกของดิฉัน |

| |

| |

| |

| |

|Sawasdee ค่ะ นี่คือ Web Page แรกของดิฉัน |

| |

| |

| |

|หมายเหตุ :- ตัวหนังสือสีแดง คือคำสั่งในภาษา HTML |

จากตัวอย่างจะเห็นได้ว่า แต่ละคำสั่งจะอยู่ในเครื่องหมาย "< >" ซึ่งเราเรียกว่า แทก "TAG" แต่ละคำสั่งจะเป็นการบอกจุดเริ่มต้นของคำสั่ง และจุดสิ้นสุดของคำสั่งจะมีสัญลักษณ์ ""

A. - หมายถึง คำสั่งที่ใช้กำหนดว่าเป็นเอกสาร HTML (คำสั่งนี้จะอยู่ตอนบนสุดและล่างสุดของไฟล์)

B. - หมายถึง คำสั่งที่ใช้กำหนดว่าชื่อเรื่องของไฟล์ HTML

C. - หมายถึง คำสั่งที่ใช้กำหนดว่าชื่อของเอกสาร (คำสั่งนี้จะอยู่ระหว่างคำสั่ง HEAD)

D. - หมายถึง คำสั่งที่ใช้กำหนดว่าเป็นส่วนของรายละเอียด (คำสั่งนี้จะอยู่หลังคำสั่ง HEAD)

ภาพตัวอย่างการเขียนโปรแกรมจาก Notepad

[pic]

โปรแกรม NotePad เป็น Text Editor (โปรแกรมที่ใส่ข้อมูลได้เฉพาะตัวอักษรและตัวเลข รูปภาพไม่สามารถบันทึกได้) ตัวหนึ่งที่มีมาพร้อมกับ Windows ทุกเวอร์ชั่น เราสามารถเรียกโปรแกรม Notepad ขึ้นมาใช้งานได้โดย

1. คลิกปุ่ม Start

2. เลือกโปรแกรม Programs

3. เลือก Accessories

4. และเลือก NotePad

หลังจากนั้นเวลาบันทึก ให้เลือกเมนู File เลือก Save เลือกตั้งชื่อไฟล์ ซึ่งชื่อไฟล์หลักของ Web Page มักจะใช้ชื่อว่า index.html หรือ index.htm หลังจากสร้างเสร็จแล้ว เราสามารถเลือกโปรแกรม browser ซึ่ง ณ ที่นี้เราจะเรียกโปรแกรม Microsoft Internet Explorer ซึ่งมีมาพร้อมกับ Windows เวอร์ชั่น 95 ขึ้นไป โดยการ...

1. คลิกปุ่ม Start

2. เลือก Programs

3. เลือก Internet Explorer

4. จากนั้นเลือกเมนู File เลือก Open

5. และเลือกชื่อไฟล์ ทีเราตั้งชื่อไว้ อาจะเป็น index.html หรือ index.htm

[pic]

| |

|ตัวอย่างการใช้คำสั่งเกี่ยวกับตัวอักษร |

| |

| |

| |

| โปรแกรมแรกของดิฉัน |

| |

| |

| |

| คำสั่งในการใช้ชื่อ font สี และกำหนดขนาด |

| คำสั่งในการปรับตัวอักษรให้หนาขึ้น |

| คำสั่งในการปรับตัวอักษรเอียง |

| คำสั่งในการขีดเส้นใต้ตัวอักษร |

| |

| |

| |

| |

| |

|หมายเหตุ :- ตัวหนังสือสีแดง คือคำสั่งในภาษา HTML |

ผลการรันด้วย Internet Explorer

[pic]

|จาก ตัวอย่างจะเห็นได้ว่า แต่ละคำสั่งจะอยู่ในเครื่องหมาย "< >" ซึ่งเราเรียกว่า แทก "TAG" แต่ละคำสั่งจะเป็นการบอกจุดเริ่มต้นของคำสั่ง และจุดสิ้นสุดของคำสั่งจะมีสัญลักษณ์ "" |

| |

|ความหมาย : - คำสั่งในการกำหนดรูปแบบตัวอักษร ชื่อว่า Tahoma กำหนดสีของตัวอักษรให้เป็นสีเขียว กำหนดขนาดของ font ให้เพิ่มขึ้น 3 (การกำหนดขนาดของตัวอักษรจะกำหนดได้ในระหร่าง -7 ถึง +7) |

|การกำหนดรูปแบบตัวอักษรแบบนี้ สามารถเลือกกำหนดเฉพาะอย่างได้ เช่น เป็นต้น แต่ที่สำคัญก่อนจบจะต้องกำหนด Tag ปิดด้วย ทุกครั้ง... |

| |

|ความหมาย : - คำสั่งในการกำหนดตัวอักษรให้หนา อย่าลืมใส่คำสั่ง Tag ปิดด้วย ทุกครั้ง... |

| |

|ความหมาย : - คำสั่งในการกำหนดตัวอักษรเอียง อย่าลืมใส่คำสั่ง Tag ปิดด้วย ทุกครั้ง... |

| |

|ความหมาย : - คำสั่งในการกำหนดตัวอักษรขีดเส้นใต้ อย่าลืมใส่คำสั่ง Tag ปิดด้วย ทุกครั้ง... |

|พิเศษ คำสั่ง |

|เป็นคำสั่งในการเลื่อนบันทึกใหม่ ไม่จำเป็นต้องมีคำสั่ง Tag ในการปิด เหมือนคำสั่งอื่น ๆ |

 

| |

|ตัวอย่างการใช้คำสั่งแสดงผลแบบรายการ |

| |

| |

| |

| โปรแกรมแรกของดิฉัน |

| |

| |

| |

| |

| บทเรียนที่ 1 |

| บทเรียนที่ 2 |

| บทเรียนที่ 3 |

| |

| |

| |

| บทเรียนที่ 1 |

| บทเรียนที่ 2 |

| บทเรียนที่ 3 |

| |

| |

| |

| |

| |

| |

|หมายเหตุ :- ตัวหนังสือสีแดง คือคำสั่งในภาษา HTML |

ผลการรันด้วย Internet Explorer

[pic]

|รายละเอียดความหมายของแต่ละคำสั่ง |

| |

|ความหมาย : - คำสั่งในการแสดงข้อมูลแบบรายการ ชนิดมีหมายเลขกำกับ ส่วนคำว่า "Type" เป็นการกำหนดว่าจะให้รันแบบใด ถ้าไม่ใส่ จะแสดงตัวเลขให้ตั้งแต่ 1,2,3,4... เรื่อยไป ถ้ากำหนดเป็นตัวอักษร เช่น "A" |

|จะรันเป็นแบบ A,B,C,D... เป็นต้น ระหว่างหัวข้อจะต้องเริ่มต้นด้วย เสมอ |

| |

|ความหมาย : - คำสั่งในการแสดงข้อมูลแบบรายการ ชนิดมีสัญลักษณ์กำกับ ส่วนคำว่า "Type" เป็นการกำหนดว่าจะให้รันแบบใด ถ้าไม่ใส่ วงกลมทึบสีดำ ถ้ากำหนด Type = "circle" จะแสดงสัญลักษณ์ วงกลมโปร่ง ถ้ากำหนด|

|Type = "square" จะแสดงสัญลักษณ์ สี่เหลี่ยมทึบ ระหว่างหัวข้อจะต้องเริ่มต้นด้วย เสมอเช่นเดียวกับข้อแรก |

 

| |

|ตัวอย่างการใช้คำสั่งสำหรับการใส่รูปภาพ |

| |

| |

| |

| โปรแกรมแรกของดิฉัน |

| |

| |

| |

| |

| |

| |

| |

| |

| |

|หมายเหตุ :- ตัวหนังสือสีแดง คือคำสั่งในภาษา HTML |

ผลการรันด้วย Internet Explorer

[pic]

|รายละเอียดความหมายของแต่ละคำสั่ง |

| |

|ความหมาย : - คำสั่งในการแสดงรูปภาพ ไม่ว่าจะเป็นรูปภาพเคลื่อนไหว (gif animation) )หรือรูปภาพธรรมดา ก็ใช้คำสั่งเดียวกัน และไม่จำเป็นจะต้องมี Tag ปิดท้ายเหมือนคำสั่งอื่น ๆ |

| |

|สำหรับตัวอย่างนี้ไฟล์ thaithai.gif จะเก็บอยู่ใน folder ที่ชื่อว่า banner |

 

| |

|ตัวอย่างการใช้คำสั่งสร้างจุดเชื่อมโยง |

| |

| |

| |

| โปรแกรมแรกของดิฉัน |

| |

| |

| |

|Dance Music |

|Visit Web |

| |

| |

| |

| |

| |

| |

|หมายเหตุ :- ตัวหนังสือสีแดง คือคำสั่งในภาษา HTML |

ผลการรันด้วย Internet Explorer

[pic]

|รายละเอียดความหมายของแต่ละคำสั่ง |

| |

|ความหมาย : - คำสั่งในการสร้างจุดเชื่อมโยงใน web ของเราเอง "page1.html" คือไฟล์เอกสาร HTML อีกไฟล์หนึ่ง สำหรับคำว่า "Dance Music" คือชื่อของลิงค์ ซึ่งเราสามารถเปลี่ยนเป็นชื่ออะไรก็ได้ |

| |

|ความหมาย : - คำสั่งในการสร้างจุดเชื่อมโยงในไปยังอีก web site หนึ่ง |

| |

|ความหมาย : - คำสั่งในการสร้างจุดเชื่อมโยงในไปยังอีก web site หนึ่ง แต่ใช้รูปภาพแทนข้อความในการสร้างลิงค์ |

 

บทเรียนที่ 6 : การสร้างตาราง หรือ Table

Table คำสั่งสำคัญในการสร้าง Web page

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

|ตัวอย่างการสร้างตาราง |

| |

| |

| |

| โปรแกรมแรกของดิฉัน |

| |

| |

| |

| |

| ข้อความส่วนบนของตาราง |

|คอลัมภ์ ที่ 1 คอลัมภ์ที่ 2 |

|ข้อมูลแถว ที่ 1/1 ข้อมูลแถวที่ 1/2 |

|ข้อมูลแถว ที่ 2/1 ข้อมูลแถวที่ 2/2 |

| |

| |

| |

| |

| |

| |

|หมายเหตุ :- ตัวหนังสือสีแดง คือคำสั่งในภาษา HTML |

ผลการรันด้วย Internet Explorer

[pic]

|รายละเอียดความหมายของแต่ละคำสั่ง |

| |

|ความหมาย : - คำสั่งในการสร้างตาราง จะต้องใส่ tag "/" เสมอทุกครั้ง สำหรับคำสั่ง border คือคำสั่งในการกำหนดเส้นขอบของตารางว่ามีความหนาเท่าใด ถ้าใส่ "0" จะไม่แสดงขอบของตาราง |

| |

|ความหมาย : - คำสั่งในการแสดงข้อความ อธิบายเนื้อหาของตาราง เพื่อให้ผู้อ่านเข้าใจว่าเราต้องการแสดงเกี่ยวกับเรื่องอะไร (เราสามารถตัดคำสั่งนี้ caption ออกก็ได้) |

| |

|ความหมาย : - คำสั่งในการกำหนดแถวในตาราง TR หมายถึง Table Row ส่วนคำสั่ง TH หมายถึง Table Head ใช้เพื่อกำหนดหัวเรื่องในแต่ละคอลัมภ์ในตาราง และที่สำคัญจะต้องมี tag "/" ปิดด้วยเสมอ |

|ดูตัวอย่างประกอบให้ดี ๆ |

| |

|ความหมาย : - คำสั่งในการกำหนดแถวในตาราง TR หมายถึง Table Row ส่วนคำสั่ง TD หมายถึง Table Data ใช้เพื่อกำหนดข้อมูลในตาราง และที่สำคัญจะต้องมี tag "/" ปิดด้วยเสมอ ดูตัวอย่างประกอบให้ดี ๆ |

 

| |

|ตัวอย่างการสร้างฟอร์ม ตอนที่ 1 |

| |

| |

| |

| โปรแกรมแรกของดิฉัน |

| |

| |

| |

| กรุณาบันทึกคำแนะนำที่นี่ |

| |

| Your Comments |

| |

| |

| |

| |

| |

| |

| |

|หมายเหตุ :- ตัวหนังสือสีแดง คือคำสั่งในภาษา HTML |

ผลการรันด้วย Internet Explorer

[pic]

|รายละเอียดความหมายของแต่ละคำสั่ง |

| |

|ความหมาย : - คำสั่งเริ่มต้นและปิดท้ายในการกำหนดว่าเป็น Form |

| |

|ความหมาย : - คำสั่งในการสร้างฟอร์มสำหรับป้อนข้อมูล สามารถกำหนดจำนวนบรรทัด (rows) จำนวนคอลัมภ์ (cols) ดูตัวอย่างประกอบด้านบน |

| |

|ความหมาย : - คำสั่งนี้ไม่เกี่ยวกับการสร้างฟอร์ม แต่เป็นคำสั่งในการแสดงตัวอักษรที่เกี่ยวกับหัวเรื่อง (เพื่อเน้นข้อความ) เราสามารถกำหนดขนาดได้ตั้งแต่ h1,h2,h3.. h6 (h1 จะมีขนาดใหญ่สุด และ h6 ขนาดเล็กสุด) | ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download