การเขียนโฮมเพจด้วยภาษา HTML(Hyper Text Markup Language) เบื้องต้น

1.ผมขอนำเข้าการเขียนโฮมเพจ(Hompe Page)เบื้องต้น ผมจะขอกล่าว เกี่ยขวกับ การใช้ Notepad และ Wordpad ในการเขียนนะครับ เพราะทั้งสองโปรแกรมถือว่าเป็นโปรแกรมที่ติดมาพร้อม

โปรแกรม Text Editor ใช้สำหรับเขียนคำสั่งภาษาต่างๆ และบันทึก save file นามสกุลเป็น .html อาจเป็น Notepad หรือ Wordpad ที่ติดมากับ windows ก็ได้ โปรแกรม webbrowser ที่ใช้กันอยู่นี้ถ้าเป็น Explorer, Google Chrome, Firefox, Opera ในการสอนเขียนโฮมเพจต่อไปนี้ จะสอนเขียนโดยใช้โปรแกรม Text Editor ใดก็ได้ที่สามารถ save file เป็น .html หรือ .htm ได้ เมื่อ save แล้วสามารถ run ใน โปรแกรม webbrowser ได้เมื่อคุณ copy code ต่อไปนี้ ลงบน text editor ของคุณ แล้ว save เป็น index.html หรือ index.htm แล้ว ลอง run ดูได้แสดงว่าอุปกรณ์ที่คุณมีสามารถเขียนโฮมเพจได้แล้ว

Hello World

2. โครงสร้างของภาษา HTML(Hyper Text Markup Language Structure)

ข้อความและคำสั่ง ที่ต้องการแสดงบนเว็บเบราเซอร์

ภาษา HTML จะประกอบไปด้วย 2 ส่วนใหญ่ๆคือ ส่วนหัว คือส่วนที่จะ load เป็นอันดับแรก ใช้กำหนดชื่อเรื่อง และ คำสั่งที่ต้องการให้ load ก่อนส่วนอื่น
เนื้อหา คือส่วนที่เอาไว้ใส่ข้อความ และ คำสั่งต่างๆที่ต้องการให้แสดงในหน้าจอ Webbrowser ส่วนที่เป็น <คำสั่ง> คือ tag สำหรับ เปิดคำสั่ง และ คือ tag

ที่ใช้ปิดคำสั่งนั้น เช่น ก็ต้องปิดด้วย ด้วยเสมอ
3.คำสั่งพื้นฐาน

3.1 การกำหนดข้อความลงใน Title bar

ผลที่ได้ Example01.html

3.2 การกำหนด background

การกำหนดสีของ background ทำได้โดยการเพิ่มคำสั่ง bgcolor ลงใน ดังตัวอย่างด้านบน ส่วนตัวแปร color คือ ชื่อสีหรือ code สีที่จะใช้กำหนดสีของ background ชื่อสีเช่น black white blue green red ฯลฯ Code สี คือเลขฐาน16 คือ(0-9,A-F) 6 ตัวซึ่งแทนค่าในสีต่างๆ 2 ตัวแรกจะแทนค่าสีแดง 2 ตัวกลางจะแทนสีเขียว ส่วน 2 ตัวหลังจะแทนสีน้ำเงิน ดู code สี คลิกที่นี่

การใช้ภาพเป็น Background

การใช้รูปภาพเป็น background ใช้การแทรกคำสั่งเข้าไปใน เช่นเดียวกับการกำหนดสี background ตัวแปร URL คือ path ของ file รูปภาพเช่น http://www.siamclub.com/bg.gif หรือถ้าหาก อยู่ใน directory เดียวกัน สามารถกำหนดเป็น ชื่อ file ได้เลยเช่น หากต้องการกำหนดทั้งสีและภาพที่เป็น background ทำได้ดังตัวอย่าง
ไม่สามารถใช้ทั้ง
และ แยกกันได้ เพราะว่า ภาษา html จะเลือก body
เพียงอันเดียว ทำให้การ load อาจผิดพลาดได้
คำสั่งนี้จะใช้สำหรับ กรณีที่ภาพที่ใชัเป็น background มีขนาดใหญ่ browser จะ load สีพื้นหลังขึ้นมาก่อน

3.3 การกำหนด music background

การกำหนด music background ทำได้โดยการ tag คำสั่ง ลงใน โฮมเพจ ดังตัวอย่างด้านบน URL คือที่อยู่ของ file เช่น http://www.siamclub.com/sound.mid หรือ ถ้าอยู่ใน Directory เดียวกัน สามารถกำหนดเป็นชื่อ file ได้เลยเช่น
สำหรับตัวแปร จำนวนรอบ คำจำนวนรอบของการวนเพลง หากต้องการให้วนไปเรื่อยๆ ให้ใช้คำสั่ง หรือ ใช้ -1 แทน INFINITE ก็ได้
file เพลงต่างๆสามารถหาได้ที่
midi.com
Midiworld

3.4 การใส่ข้อความลงในโฮมเพจ

ข้อความที่ต้องการ

การใส่ข้อความลงในโฮมเพจสามารถใส่ลงไประหว่าง .... ได้เลย
ดังตัวอย่างด้านบน แต่โปรแกรม webbrowser จะไม่สามารถอ่านการเว้นวรรคของเราได้ เช่น ถ้าคุณพิมพ์ว่า

HTML คือภาษาที่ใช้เขียนโฮมเพจ

กับ

HTML
คือภาษาที่ใช้เขียนโฮมเพจ

โปรแกรม webbrowser จะแสดงผลออกมาเหมือนกัน คือ Example02.html
ไม่ว่าเราจะเว้นวรรคยาวเท่าใด โปรแกรม Webbrowser จะอ่านได้ว่าคือการเว้นวรรคเพียง 1 วรรคเท่านั้น ถ้าเราต้องการจัดหน้ากระดาษแบบต่างๆเช่น เว้นบรรทัด จำเป็นต้องใช้คำสั่งต่างๆอีกมากมาย ซึ่งจะกล่าวในบทต่อๆไปครับ

4. คำสั่งเริ่มต้น

4.1 การใช้ comment tag

Comment tag มีไว้เพื่อเตือนความจำ หรือไว้บันทึก เขียนไว้ที่ส่วนใดของ file ก็ได้ โดยใช้ เพราะเมื่อเราเขียนโฮมเพจไว้ มากๆ จะทำให้เราลืมได้ว่า จะแก้ code ตรงไหน หรือ file นี้ทำขึ้นมาเมื่อไหร่ โดยที่ webbrowser จะข้ามการอ่านข้อมูลตรงนี้ไป ทำให้ไม่แสดงผลใดๆใน
webbrowser ดังตัวอย่างด้านบน

4.2 คำสั่งขึ้นบรรทัดใหม่

HTML

DHTML

Java script

Java applet

คำสั่งสำหรับขึ้นบรรทัดใหม่ใช้คำสั่ง
วางไว้ท้ายข้อความที่ต้องการ Webrowser จะแสดงผลข้อความต่อจากนั้นในบรรทัดต่อไป ดังตัวอย่าง
ผลที่ได้ Example03

4.3 คำสั่งขึ้นย่อหน้าใหม่

HTML คือภาษาที่ใช้ในการเขียน โฮมเพจ ย่อมาจากคำว่า Hyper Text Makeup Language ซึ่งพัฒนามาจากภาษา SGML ซึ่งสามารถอ่านได้ด้วยโปรแกรม Web browser อย่างเช่น Internet Explorer หรือ Netscape Navigator
ในเพจนี้จะสอนการสร้าง โฮมเพจด้วย ภาษา HTML โดยใช้โปรแกรม Text Editer ใดก็ได้ เช่น Notepad , Wordpad , Microsoft Word หรือแม้แต่โปรแกรม Edit ของ DOS ก็สามารถสร้าง file HTML ขึ้นได้ ใน windows นิยม save เป็น file.html ส่วนใน dos นั้นนิยม save เป็น file.htm เพราะว่าใน dos นั้นไม่สามารถ save นามสกุล file เกิน 3 ตัวอักษรได้

......
คือคำสั่งที่ใช้สำหรับย่อหน้าใหม่
ผลที่ได้ Example04.html
คำสั่งสำหรับจัดตำแหน่งของย่อหน้า

HTML คือภาษาที่ใช้ในการเขียน โฮมเพจ ย่อมาจากคำว่า Hyper Text Makeup Language ซึ่งพัฒนามาจากภาษา SGML ซึ่งสามารถอ่านได้ด้วยโปรแกรม Web browser อย่างเช่น Internet Explorer หรือ Netscape Navigator

ในเพจนี้จะสอนการสร้าง โฮมเพจด้วย ภาษา HTML โดยใช้โปรแกรม Text Editer ใดก็ได้ เช่น Notepad , Wordpad , Microsoft Word หรือแม้แต่โปรแกรม Edit ของ DOS ก็สามารถสร้าง file HTML ขึ้นได้ น windows นิยม save เป็น file.html ส่วนใน dos นั้นนิยม save เป็น file.htm เพราะว่าใน dos นั้นไม่สามารถ save นามสกุล file เกิน 3 ตัวอักษรได้

การกำหนดตำแหน่งของย่อหน้าทำได้โดยการเพิ่มคำสั่งลงใน
ดังตัวอย่าง ตัวแปร
ตำแหน่ง คือ ตำแหน่งที่ต้องการ มีอยู่ 3 อย่างคือ
left = ชิดขอบซ้าย
right = ชิดขอบขวา
center = กลางหน้ากระดาษ
ผลที่ได้ Example05.html

4.4 คำสั่งขีดเส้นใต้

HTML คือภาษาที่ใช้ในการเขียน โฮมเพจ ย่อมาจากคำว่า Hyper Text Makeup Language ซึ่งพัฒนามาจากภาษา SGML ซึ่งสามารถอ่านได้ด้วยโปรแกรม Web browser อย่างเช่น Internet Explorer หรือ Netscape Navigator

ในเพจนี้จะสอนการสร้าง โฮมเพจด้วย ภาษา HTML โดยใช้โปรแกรม Text Editer ใดก็ได้ เช่น Notepad , Wordpad , Microsoft Word หรือแม้แต่โปรแกรม Edit ของ DOS ก็สามารถสร้าง file HTML ขึ้นได้ ใน windows นิยม save เป็น file.html ส่วนใน dos นั้นนิยม save เป็น file.htm เพราะว่าใน dos นั้นไม่สามารถ save นามสกุล file เกิน 3 ตัวอักษรได้

คือคำสั่งที่ใช้สำหรับขีดเส้นใต้
ผลที่ได้ Example06.html
การกำหนดความยาวของเส้น

HTML

เราสามารถกำหนดความยาวของเส้นคั่นโดยใส่ค่าตัวเลข ความยาวที่ต้องการโดยหน่วยเป็น pixel หรือใส่เป็นขนาด % ต่อหน้าจอ ในตัวแปร ความยาว ดังตัวอย่างด้านบน
ผลที่ได้ Example07.html
การกำหนดความหนาของเส้น

HTML

เราสามารถกำหนดความหนาของเส้นคั่นโดยใส่ค่าตัวเลข ความยาวที่ต้องการโดยหน่วยเป็น pixel ในตัวแปร ความหนา ดังตัวอย่างด้านบน
ผลที่ได้ Example08.html
การกำหนดเส้นทึบ

ตัวอย่าง เช่น

การตำแหน่งของของเส้นคั่น

ทำได้โดยการเติมตำแหน่งที่ต้องการ left right center เช่นเดียวกับ คำสั่ง
ตัวอย่าง เช่น

การกำหนดสีของเส้นคั่น (เฉพาะ IE)

ทำได้โดยการเติม code สีที่ต้องการลงไปได้เลย Code สี
ตัวอย่าง เช่น

5. คำสั่งกำหนดตัวอักษร

5.1 การกำหนดหัวเรื่อง

HTML

คือคำสั่งที่ใช้สำหรับกำหนดหัวเรื่องโดยการเติมตัวเลข 1-6 ลงในตัวแปร n โดย เลข 1 จะเป็นตัวใหญ่ที่สุด และ 2,3,4 รองลงมา จนถึง 6 จะเป็นหัวข้อที่เล็กที่สุด
ผลที่ได้ Example09.html

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

HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML