เขียนเว็บ รู้จักกับ HTML HTML ย่อมาจากคำว่า Hypertext Language เป็นภาษาหลักที่ใช้ในการแสดงผลบนเว็บบราวเซอร์ในอินเทอร์เน็ต โดยเรา สามารถนำเสนอข้อมูลที่มีตัวอักษรและภาพ เสียง ภาพยนตร์ และสามารถเชื่อมโยงกับเอกสารอื่น ๆ ได้ง่าย ภาษา HTML ได้รับการพัฒนาตลอดเวลา จนปัจจุบันมาถึง เวอร์ชัน 4.0 HTML นั้นมีข้อดีในแง่การเขียนที่เราเรียนรู้ได้อย่างง่าย ๆ ภาษา HTML แบ่งออก 2 ส่วน คือ ส่วนที่เป็นข้อความทั่ว ๆ ไป และส่วนที่เป็นคำสั่งที่ใช้ในการกำหนดรูปแบบของข้อความที่แสดง ซึ่งเราเรียกว่า แท็ก (Tag) โดยคำสั่งของ HTML จะอยู่ในเครื่องหมาย < และ > โดยมีหลักในการเขียนดังนี้ รูปแบบของคำสั่งจะแยกเป็น 2 ส่วน โดยจะต้องมีส่วนเริ่มต้นของคำสั่งและส่วนจบของคำสั่ง โดยส่วนจบของคำสั่ง ส่วนจบจะต้องมีเครื่องหมาย Slash ( / ) ดังนี้ < คำสั่ง > ข้อความ < / คำสั่ง > เช่น ส่วนที่มีเนื้อหา และข้อมูลเกี่ยวกับ ภาพ Link ที่ปรากฏในเว็บเพจ เป็นคำสั่งแรกที่ต้องมีในภาษา HTML ซึ่งบ่งบอกว่านี้คือภาษา HTML โดยจะอยู่ที่จุดเริ่มต้นของเอกสารและท้ายเอกสารในแต่ละแฟ้ม เป็นส่วนที่กำหนดรายละเอียดหัวเรื่อง ภายในจะมีคำสั่งย่อยอีกหนึ่งคำสั่ง คือ ยินดีต้อนรับนักเรียนใหม่ รูปที่ 1-10 แสดงการเขียนเว็บเพจด้วย HTML ด้วยโปรแกรม Notepad เมื่อพิมพ์ข้อความแล้วให้บันทึกไฟล์ที่มีส่วนขยายหรือนามสกุล เป็น .HTML แล้วรันบนเว็บบราวเซอร์ ดังรูปที่ 1-11 รูปที่ 1-11 แสดงผลรันบนเว็บบราวเซอร์ 2.หน้าตาโปรแกรม Notepad -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- 3. จากนั้นลองพิมพ์ไฟล์ตัวอย่างลงไปดังนี้ -------------------------------------------------------------------------------- สวัสดีครับ คนอ่านหน้าตาดีจังเลย -------------------------------------------------------------------------------- 4. การบันทึก(save) -------------------------------------------------------------------------------- Click ที่นี่เพื่อดูวิธีการบันทึกข้อมูล(เป็นภาพเคลื่อนไหว) หากดูไม่ได้ให้ดูภาพด้านล่าง -------------------------------------------------------------------------------- Click ที่เมนู File > Save หลังจากนั้นในช่อง File name : ให้ใช่ชื่อไฟล์ลงไป ในตัวอย่างพิมพ์ลงไปว่า First.html ในช่องSave as type : ให้เลือกเป็น All Files (*.*) แล้ว Click ที่ save -------------------------------------------------------------------------------- 5.การดูผลลัพธ์โดยใช้โปรแกรม Internet Explorer -------------------------------------------------------------------------------- Click ที่นี่เพื่อดูวิธีการเปิดแฟ้มข้อมูล html โดยใช้โปรแกรม Internet Explorer(เป็นภาพเคลื่อนไหว) หากดูไม่ได้ให้ดูภาพด้านล่าง -------------------------------------------------------------------------------- การเปิดโปรแกรม Internet Explorer สามารถทำได้หลายวิธี ก็ลองเลือกเอาสักวิธีนะครับ 1) double click ที่ไอคอน(Icon) ของโปรแกรม Internet Explorer 2) ดับเบิ้ลคลิก(double click) ที่ไฟล์ของโปรแกรม Internet Explorer (ไฟล์นามสกุล html) 3) เลือกโปรแกรม Internet Explorer จากปุ่มสตาร์ท(start) 4) กรณีที่เป็น Windows 98 สามารถคลิก(click) เลือกโปรแกรม Internet Explorer ได้จาก ทาสก์บาร์(taskbar) เมื่อปรากฏหน้าต่างโปรแกรม Internet Explorer จะมีหน้าตา ดังนี้ -------------------------------------------------------------------------------- จากนั้นให้ Click ที่ File > open จะได้หน้าต่างดังนี้ -------------------------------------------------------------------------------- ให้ Click ที่ Browse เพื่อไปเลือกไฟล์ที่ต้องการจะดูผลลัพธ์ ในตัวอย่างเลือกไฟล์ชื่อ First.html จากนั้น Click ที่ Open -------------------------------------------------------------------------------- ภาพหลังจาก click ที่ Open -------------------------------------------------------------------------------- หลังจากนั้น click ที่ ok จะได้ผลลัพธ์ดังนี้ จะเห็นได้ว่าที่ title bar มีคำว่า "โฮมเพจแรกของกระผม" และมีข้อความว่า "สวัสดีครับ คนอ่านหน้าตาดีจังเลย" -------------------------------------------------------------------------------- Tip ! จะเห็นได้ว่าขั้นตอนไม่ยากเท่าไรนะครับ มีข้อเสนอคือ เมื่อเราเปิดไฟล์นี้ดูแล้วและหากไปแก้ไขข้อมูลใน Note Pad แล้วทำการบันทึก หากต้องการดูผลลัพธ์ หากเราใช้ Internet Explorer เปิดไฟล์นี้อยู่แล้ว ให้ Click ที่คำว่า "Refresh" ได้เลย ไม่จำเป็นต้องไป File > Open อีก color=ชื่อสีหรือ#รหัสสี : เป็นการกำหนดสีเส้น เช่น ผลลัพธ์ : -------------------------------------------------------------------------------- width=จำนวน% : เป็นการกำหนดความยาวของเส้น โดยปกติเป็น 100% เช่น ผลลัพธ์ : -------------------------------------------------------------------------------- size=ขนาดเส้น : เป็นการกำหนดขนาดของเส้น เช่น ผลลัพธ์ : -------------------------------------------------------------------------------- align=left หรือ center หรือ right :เป็นการกำหนดตำแหน่งของเส้นว่าจะให้อยู่ทางซ้ายหรือกลางหรือขวา เช่น ผลลัพธ์ : -------------------------------------------------------------------------------- noshade :เป็นการกำหนดให้เป็นเส้นทึบแบบไม่มีเงา เช่น ผลลัพธ์ : -------------------------------------------------------------------------------- ตัวอย่าง : เป็นการขีดเส้นในรูปแบบต่าง ๆ เส้นธรรมดา : เส้นสีแดง ยาว 20% : เส้นขนาน=10 สีน้ำเงิน : เส้นยาว 50% ชิดขวา สีชมพู : เส้นทึบ ยาว 50% สีน้ำเงิน : เส้นสีน้ำเงิน ยาว 20% ขนาด=6 : -------------------------------------------------------------------------------- Click เพื่อดูผลลัพธ์ -------------------------------------------------------------------------------- การขึ้นบรรทัดใหม่ -------------------------------------------------------------------------------- รูปแบบคำสั่ง : -------------------------------------------------------------------------------- คำอธิบาย : เป็นคำสั่งที่ใช้ในการบังคับให้ขึ้นบรรทัดใหม่ โดยข้อมูลที่อยู่หลังคำสั่งนี้จะขึ้นบรรทัดใหม่ คำสั่ง นี้จะไม่มี คำสั่งปิดคือ ปกติแล้วโปรแกรมอื่น ๆ เช่น microsoft word เมื่อเราขึ้นบรรทัดใหม่โดยการกด enter ผลลัพธ์ที่ออกมาก็จะขึ้นบรรทัดใหม่ให้ แต่ การเขียนโฮมเพจจะตรงกันข้ามคือ ถึงแม้ว่าเราจะขึ้นบรรทัดใหม่โดยการ enter แล้วแต่เมื่อดูผลลัพท์แล้ว ข้อความจะมาต่อกัน จะไม่ขึ้นบรรทัดใหม่ให้ -------------------------------------------------------------------------------- ตัวอย่าง : การขึ้นบรรทัดใหม่ สถาบันราชภัฏ นครราชสีมา สุระ วรรณแสง รูปแบบคำสั่ง : ...ข้อความ..... :คำสั่งตัวหนา ...ข้อความ..... :คำสั่งตัวเอียง ...ข้อความ..... :คำสั่งขีดเส้นใต้ คำอธิบาย : เมื่อเราต้องการทำให้ตัวอักษรหนา เอียง หรือขีดเส้นให้ ให้นำคำสั่งข้างต้นไปคร่อม ข้อความนั้นไว้ อย่างเช่น ต้องการแต่งคำว่า "สุระ วรรณแสง" ให้เอียงและหนา ให้ทำดังนี้ : สุระ วรรณแสง ผลลัพธ์ที่ได้คือ สุระ วรรณแสง ตัวอย่าง : ทดสอบการทำตัวอักษรหนา,เอียง,ขีดเส้นใต้ ข้อความหนา ข้อความเอียง ข้อความขีดเส้นใต้ ข้อความหนา+เอียง ข้อความหนา+เอียง+ขีดเส้นใต้ ข้อความเอียง+ขีดเส้นใต้ ข้อความขีดเส้นใต้+หนา การใส่สีอักษร -------------------------------------------------------------------------------- รูปแบบคำสั่ง : .....ข้อความ...... . -------------------------------------------------------------------------------- คำอธิบาย : เป็นคำสั่งที่ใช้ในการตกแต่งอักษรให้เป็นสีต่างๆ ตามชื่อสีหรือรหัสสี โดยนำคำสั่งนี้ไปคร่อมข้อความที่จะตกแต่ง ตัวอย่าง : การตกแต่งสีอักษร อักษรสีแดง อักษรสีน้ำเงิน อักษรสีฟ้า -------------------------------------------------------------------------------- Click เพื่อดูผลลัพธ์ -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- การใส่ขนาดอักษร -------------------------------------------------------------------------------- รูปแบบคำสั่ง : .....ข้อความ...... . -------------------------------------------------------------------------------- คำอธิบาย : เป็นคำสั่งที่ใช้ในการตกแต่งอักษรให้เป็นมีขนาดต่าง ๆ โดยที่ขนาดอักษรยิ่งมาก อักษรก็จะมีขนาดใหญ่ตามลำดับ โดยนำคำสั่งนี้ไปคร่อมข้อความที่จะตกแต่ง ตัวอย่าง : การตกแต่งขนาดอักษร อักษรขนาด=10 อักษรขนาด=3 อักษรขนาด=1 -------------------------------------------------------------------------------- Click เพื่อดูผลลัพธ์ -------------------------------------------------------------------------------- การใส่รูปแบบอักษร -------------------------------------------------------------------------------- รูปแบบคำสั่ง : .....ข้อความ...... . -------------------------------------------------------------------------------- คำอธิบาย : เป็นคำสั่งที่ใช้ในการตกแต่งอักษรให้เป็นมีรูปแบบต่าง ๆ ตาม font ที่กำหนด เช่า AngsanaUPC, MS sans serif Cordia New, โดยนำคำสั่งนี้ไปคร่อมข้อความที่จะตกแต่ง ตัวอย่าง : การตกแต่งรูปแบบอักษร อักษรแบบ Ms sans serif อักษรแบบ AngsanaUPC อักษรแบบ Cordia New -------------------------------------------------------------------------------- Click เพื่อดูผลลัพธ์ -------------------------------------------------------------------------------- นำคำสั่งทั้งหมดมาประยุกต์ใช้ผสมกัน -------------------------------------------------------------------------------- ตัวอย่าง : การตกแต่งรูปแบบอักษร+ใส่สี+ใส่ขนาด+หนา+เอียง+ขีดเส้นใต้ อักษรแบบ Ms sans serif ,สีแดง, ขนาด=2 อักษรแบบ AngsanaUPC ,สีน้ำเงิน อักษรแบบ Cordia New ,ขนาด=10,ขีดเส้นใต้ อักษรหนา, ขนาด=6,สีแดง อักษร ms sans serif ,หนา+เอียง,สีแดง HTML> ข้อมูลอยู่ตรงกลาง โดยใช้ center ข้อมูลอยู่ด้านซ้าย ข้อมูลอยู่ด้านขวา ข้อมูลอยู่ตรงกลางโดยใช้ P align=center การนำรูปภาพมาใส่โนโฮมเพจ -------------------------------------------------------------------------------- รูปแบบคำสั่ง : -------------------------------------------------------------------------------- คำอธิบาย : เป็นคำสั่งที่ใช้ในการใส่รูปภาพ โดยภาพที่แสดงจะมีขนาดเท่ากับรูปปกติ หากเราต้องการการจัดรูปแบบรูปภาพลักษณะต่าง ๆ ต้องมีคำสั่งเพิ่มเติมอีก คำสั่ง นี้จะไม่มี คำสั่งปิดคือ คำสั่งเพิ่มเติมที่ใช้ร่วมกับคำสั่งนี้อีกดังนี้ height=ความสูงของภาพ(Pixel) : เป็นการกำหนดความสูงของภาพ เช่น width=ความกว้างของภาพ (Pixel) : เป็นการกำหนดความกว้างของภาพ เช่น align=left หรือ center หรือ Right หรือ top หรือ bottom : เป็นการกำหนดตำแหน่งของรูปว่าจะให้อยู่ด้านซ้าย ขวา หรือ ตรงกลาง ส่วน top กับ bottom ใช้จัดตำแหน่งอักษร เช่น จัดรูปให้อยู่ด้านขวา ตารางแสดงคำสั่งการจัดตำแหน่งของภาพ การแสดงผล คำสั่งที่ใช้กำหนดตำแหน่งข้อความและรูปภาพ ตำแหน่งที่แสดงผลข้อความและรูปภาพ 1. แบบแนวตั้งเป็นคำสั่งที่ใช้กับรูปภาพ ALIGN = "LEFT" ตำแหน่งซ้ายของจอภาพ ALIGN = "RIGHT" ตำแหน่งขวาของจอภาพ 2. แบบแนวนอนเป็นคำสั่งที่ใช้กับข้อความ ALIGN = "TOP","TEXTTOP" ตำแหน่งบนสุดของรูปภาพ ALIGN = "MIDDLE","ABSMIDDLE" ตำแหน่งกึ่งกลางของรูปภาพ ALIGN = "BOTTOM","BASELINE","ABSBOTTOM" ตำแหน่งล่างสุดของรูปภาพ border=ความหนาของเส้นขอบ :เป็นการใส่ขอบให้รูปภาพ โดยขนาดของขอบเราสามารถกำหนดได้ เช่น ตัวอย่าง : การนำรูปภาพมาใส่ในโฮมเพจ * ก่อนจะทำลองตัวอย่างนี้ให้นำรูปภาพที่มีอยู่มาใส่ไว้ใน folder เดียวกันกับไฟล์ที่เราใช้งานอยู่ ในตัวอย่างนำไฟล์ชื่อ "WOW.JPG" มาทดสอบ* รูปธรรมดาที่ไม่ได้ตกแต่ง : กำหนดความกว้างของรูป=300 : กำหนดความสูงของรูป=200 : กำหนดเส้นของของรูป=5: กำหนดความกว้างของรูป=300 ยาว=300 เส้นขอบ=5 : -------------------------------------------------------------------------------- Click เพื่อดูผลลัพธ์ -------------------------------------------------------------------------------- ตัวอย่าง : การจัดตำแหน่งรูปภาพ * การจัดตำแหน่งรูปภาพที่จะสำพันธ์กับตำแหน่งของอักษรหรือข้อมูลที่อยู่ต่อจากคำสั่งนี้ เช่น เราต้องการจัดให้รูปอยู่ด้านซ้าย และมีข้อความอยู่ด้านขวาของรูป ดังตัวอย่าง ข้อความนี้อยู่ส่วนบนของรูปภาพ (TOP) แต่ถ้าข้อความยาวจะถูกตัดออกมาแสดงผลไว้ที่ส่วนล่างของรูป ถ้าต้องการแสดงผลให้ข้อความที่ยาวมากอยู่ในบรรทัดต่อมาโดยไม่ถูกตัดมาไว้ส่วนล่างให้เปลี่ยน ALIGN จาก TOP เป็น LEFT แทน ข้อความนี้อยู่ส่วนกลางของรูปภาพ (MIDDLE) ข้อความนี้อยู่ส่วนล่างของรูปภาพ (BOTTOM) เป็นการกำหนดรูปภาพให้ชิดซ้าย และ ข้อความนี้อยู่ส่วนบนของรูปภาพ (TOP) แต่ถ้าข้อความยาวไม่จะถูกตัดออกมาเหมือนกันการใช้ ALIGN = TOP , MIDDLE หรือ BOTTOM ข้อความจะแสดงออกมาในบรรทัดต่อไปโดยอัตโนมัติ เป็นการกำหนดรูปภาพให้ชิดขวา และ ข้อความนี้อยู่ส่วนบนของรูปภาพ (TOP) แต่ถ้าข้อความยาวไม่จะถูกตัดออกมาเหมือนกันการใช้ ALIGN = TOP ,MIDDLE หรือ BOTTOM ข้อความจะแสดงออกมาในบรรทัดต่อไปโดยอัตโนมัติ รูปแบบคำสั่ง : ..... ข้อความ ............. ..... ข้อความ ............. ..... ข้อความ ............. -------------------------------------------------------------------------------- โดยในส่วนของ "Option" มีให้เลือก 3 แบบคือ 1. Disc จะได้ผลลัพธ์เป็นรูปวงกลมทึบดังนี้ : . 2. Square จะได้ผลลัพธ์เป็นรูปสี่เหลี่ยมทึบดังนี้ : . 3. Circle จะได้ผลลัพธ์เป็นรูปวงกลมกลวงดังนี้ : . -------------------------------------------------------------------------------- คำอธิบาย : เป็นคำสั่งที่ใช้ในการใส่เครื่องหมายหน้าหัวข้อโดยมีให้เลือก 3 รูปแบบคือ Disc, Square และ Circle เวลาจะใช้งานจะใช้ควบคู่กับคำสั่ง ตามด้วยข้อความ ตัวอย่าง : การทำเครื่องหมายหน้าหัวข้อ สาขาที่เปิดสอน 3 สาขาดังนี้ ............แบบ Disc............. คอมพิวเตอร์ธุรกิจ บัญชี ภาษาต่างประเทศ ...........แบบ Square............. คอมพิวเตอร์ธุรกิจ บัญชี ภาษาต่างประเทศ ...........แบบ Circle............... คอมพิวเตอร์ธุรกิจ บัญชี ภาษาต่างประเทศ ...............หลาย ๆ แบบผสมกัน ............... คอมพิวเตอร์ธุรกิจ บัญชี ภาษาต่างประเทศ การใส่เครื่องหมายหน้าหัวข้อ -------------------------------------------------------------------------------- รูปแบบคำสั่ง : ..... ข้อความ ............. ..... ข้อความ ............. ..... ข้อความ ............. -------------------------------------------------------------------------------- โดยในส่วนของ "Option" มีให้เลือก 3 แบบคือ 1. Disc จะได้ผลลัพธ์เป็นรูปวงกลมทึบดังนี้ : . 2. Square จะได้ผลลัพธ์เป็นรูปสี่เหลี่ยมทึบดังนี้ : . 3. Circle จะได้ผลลัพธ์เป็นรูปวงกลมกลวงดังนี้ : . -------------------------------------------------------------------------------- คำอธิบาย : เป็นคำสั่งที่ใช้ในการใส่เครื่องหมายหน้าหัวข้อโดยมีให้เลือก 3 รูปแบบคือ Disc, Square และ Circle เวลาจะใช้งานจะใช้ควบคู่กับคำสั่ง ตามด้วยข้อความ ตัวอย่าง : การทำเครื่องหมายหน้าหัวข้อ สาขาที่เปิดสอน 3 สาขาดังนี้ ............แบบ Disc............. คอมพิวเตอร์ธุรกิจ บัญชี ภาษาต่างประเทศ ...........แบบ Square............. คอมพิวเตอร์ธุรกิจ บัญชี ภาษาต่างประเทศ ...........แบบ Circle............... คอมพิวเตอร์ธุรกิจ บัญชี ภาษาต่างประเทศ ...............หลาย ๆ แบบผสมกัน ............... คอมพิวเตอร์ธุรกิจ บัญชี ภาษาต่างประเทศ   Create Date : 03 กันยายน 2551     Last Update : 3 กันยายน 2551 12:25:02 น. Counter : 547 Pageviews.   0 comment Share Tweet

music ชอบร้องเพลงคะ   Create Date : 22 สิงหาคม 2550     Last Update : 3 กันยายน 2551 14:02:17 น. Counter : 378 Pageviews.   2 comment Share Tweet

ความรู้ทั่วไป คะก็ชื่อแอนนี่นะคะ เป็นมือใหม่หัดเขียน blog คะยังไม่เก่งเท่าไหร่ยังไงก็ comment ได้นะคะยินดีรับฟังคะ   Create Date : 22 สิงหาคม 2550     Last Update : 3 กันยายน 2551 15:42:18 น. Counter : 365 Pageviews.   0 comment Share Tweet