chichanan

วันอาทิตย์ที่ 14 กันยายน พ.ศ. 2551

โครงสร้าง HTML

HTML ย่อมาจากคำว่า Typertext Markup Languageเป็นภาษาหลักที่ใช้ในการแสดงผลบนเว็บบราวเซอร์ในอินเตอร์เน็ตภาษา HTML แบ่งออก 2 ส่วนคือ ส่วนที่เป็นข้อความทั่ว ๆ ไป และส่วนที่เป็นคำสั่งที่ใช้ในการกำหนดรูปแบบในการเขียน โครงสร้างเว็บเพจเว็บเพจทุก ๆ เว็บเพจต้องมีโครงสร้างภายใน ดังนี้ .............................. อินเตอร์เน็ต ปัจจุบันคอมพิวเตอร์ได้เข้ามามีบทบาทเป็นอย่างมาก เพราะสามารถทำงานได้สารพัด ตั้งแต่การจัดทำเอกสาร การช่วยทำบัญชี ไปจนถึงการดูหนังฟังเพลง เมื่อเครื่องคอมพิวเตอร์มีจำนวนมากขึ้น ก็ได้มีการนำมาเชื่อมโยงกันเพื่อให้เกิดการสื่อสารแลกเปลี่ยนข้อมูลได้ ซึ่งก่อให้เกิดประโยชน์เป็นอย่างมากเพราะเราสามารถรับส่งข้อมูลได้อย่างสะดวกรวดเร็ว เริ่มแรกคอมพิวเตอร์ได้ถูกทำมาเชื่อมต่อกันเป็นเครือข่ายเล็ก ๆ ภายในมหาวิทยาลัย หรือภายในองค์กร ต่อมาได้มีการนำเครือข่ายย่อย ๆ เหล่านั้นมาเชื่อมต่อกันจนเกิดเครือข่ายคอมพิวเตอร์ขนาดยักษ์ที่ถูกขนานนามว่า อินเตอร์เน็ต ซึ่งเชื่อมต่อมากกว่า 50 ล้านเครื่องทั่วโลก และได้มีประมาณการไว้ว่าจะเติบโตและขยายต่อไปเรื่อย ๆ โดยจะเชื่อมต่อคอมพิวเตอร์มากกว่า 300 ล้านเครื่องทั่วโลกในปี 2002 ประโยชน์ของอินเตอร์เน็ต เราสามารถใช้อินเตอร์เน็ตได้หลายด้าน ขึ้นกับลักษณะการใช้งานของเรา ซึ่งสามารถสรุปเป็นแนวทางได้ดังนี้สื่อสารกับผู้อื่น เราสามารถใช้อินเตอร์เน็ตสื่อสารกับผู้อื่นได้ไม่ว่าจะอยุ่ไหลเพียงใดก็ตาม ซึ่งนอกจากการส่งเป็นจดหมายอิเลคทรอนิกส์ (e-mail) การ์ดอวยพรที่มีเสียงและภาพเคลื่อนไหว หรืออาจใช้เสียง ภาพ และข้อความสื่อสารกันแบบทันทีได้ ซึ่งนอกจากจะติดต่อกับคนที่เรารู้จักอยู่แล้ว เราสามารถหาเพื่อใหม่ในอินเตอร์เน็ต และแลกเปลี่ยนความคิดเห็นกับเขาได้ด้วยแหล่งความรู้ อินเตอร์เน็ตเป็นเหมือนแหล่งความรุ้ ที่มีข้อมูลมากมายที่เราสามารถนำมาใช้ได้ ซึ่งไม่เป็นเพียงข้อความเท่านั้น แต่มีทั้งเสียง ภาพ ภาพยนตร์ แหล่งข่าวสารและความบันเทิง เราสามารถติดตามข่าวล่าสุด ดูหนังฟังเพลง และภาพยนตร์ล่าสุด จับจ่ายสินค้าและบริหาร อินเตอร์เน็ตเป็นแหล่งจับจ่ายสินค้า และบริการมากมาย ซึ่งปัจจุบันมีบริาัทนับหมื่นที่ได้หันมาประชาสัมพันธ์ตัวเอง และให้บริการลุกค้าบนอินเตอร์เน็ตตลอด 24 ชั่งโมง เราสามารถขอข้อมูลสินค้าและเปรียบเทียบราคาได้อย่างสะดวก และเมื่อชอบใจสินค้าใดก็สั่งซื้อทางอินเตอร์เน็ตได้เลยศูนย์รวมสารพัดโปรแกรมใช้งาน และเกม ในอินเตอร์เน็ตมีโปรแกรมใช้งาน และเกมมากมายที่เราสามารถนำมาใช้ได้ ซึ่ง มีตั้งแต่โปรแกรมประเภทฟรีแวร์ (freeware) ที่เรานำมาใช้ได้ฟรี หรือโปรแกรมประเภทแชร์แวร์ (shareware) ที่เราทดลองใช้ก่อน และซื้อมาใช้จริงหลังหมดเวลาทดลอง World Wide Web (WWW) World Wide Web (เรียกย่อ ๆ ว่าเว็บ) เป็นสิ่งที่ทำให้อินเตอร์เน็ตได้รับความนิยม จนมีผู้ใช้เพิ่มขึ้นอย่างทวีคูณ เพราะเป็นครั้งแรกที่ผู้ใช้อินเตอร์เน็ตไม่ต้องรุ้จักกับคำสั่งคอมพิวเตอร์ที่จดจำยาก แต่สามารถสื่อสารได้โดยการใช้ภาพ เสียง และภาพยนตร์ประกอบเนื้อหาที่เป็นข้อความ โฮมเพจ (Home Page) ในแต่ละเว็บไซต์จะประกอบด้วยเว็บเพจจำนวนหลายหน้า โดยจะมีการกำหนดเว็บเพจหน้าหนึ่งให้เป็นหน้าแรก เว็บเพจหน้านี้มีชื่อเรียกว่า "โฮมเพจ" ซึ่งทำหน้าที่เหมือนกับเป็นปกหนังสือ กล่าวคือโฮมเพจเป็นทางเข้าของเว็บเพจทั้งหมดในเว็บไซต์นั้น โดยโฮมเพจจะสรุปสิ่งที่น่าสนใจในเว็บไซต์ไปจนถึงหัวข้อที่เชื่อมต่อไปยังเว็บเพจอื่น โครงสร้าง HTML โครงสร้างของภาษา HTML แบ่งออกได้เป็น 4 ส่วนหลัก ดังนี้ <><><> ชื่อหัวเรื่อง < /TITLE >< /HEAD ><> ข้อมูลที่ต้องการแสดงผล< /BODY >< /HTML > 1. ... เป็นคำสั่งแรกที่ต้องมีในภาษา HTML ซึ่งบ่องบอกว่านี่คือภาษา HTML โดยจะอยู่ที่จุดเริ่มต้นของเอกสารและท้ายเอกสารในแต่ละแฟ้ม2. ... เป็นส่วนกำหนดรายละเอียดหัวข้อเรือง ภายในจะมีคำสั่งย่อยอีกหนึ่งคำสั่ง3. โดยข้อความภายในคำสั่งนี้ให้เราใส่ชื่อหัวเรื่องเว็บเพจที่ต้องการ4. ... ส่วนนี้เป็นส่วนของเนื้อหาเว็บเพจของเรา ไม่ว่าจะเป็นข้อความ รูปภาพ ตารางเสียง และการเชื่อมต่อไปยังเอกสารอื่น ๆ ที่จะไปแสดงผลที่เว็บบราวเซอร์ ตัวอย่างของการใช้คำสั่ง <><><> ชื่อหัวเรื่อง < /TITLE >< /HEAD ><> Hello ! เห็นผมไหม?< /BODY >< /HTML > การขึ้นบรรทัดใหม่ ใน HTML มีคำสั่งที่ใช้สำหรังจัดข้อความที่แสดงบนหน้าเว็บเพจได้แก่คำสั่ง ตัวอย่างการใช้คำสั่ง <><><> คำสั่งขึ้นบรรทัดใหม่ < /TITLE >< /HEAD ><> Hello ! <> เห็นผมไหม?< /BODY >< /HTML > คำสั่งการย่อหน้าใหม่ การย่อหน้าใหม่
คำสั่งนี้จะมีการเว้นบรรทัดว่างให้หนึ่งบรรทัด ตัวอย่างการใช้คำสั่ง <> <><> คำสั่งการย่อหน้าใหม่ < /TITLE >< /HEAD ><> Hello ! <> เห็นผมไหม?< /BODY >< /HTML > เส้นคั่นบรรทัด สร้างเส้นคั่นทางด้านแนวนอน
การใช้เส้นคั่นทางแนวนอน ในเว็บเพจของเรา จะช่วยแบ่งเนี้อหาออกเป็นส่วน ๆ ทำให้อ่านได้ง่าย เส้นคั่นแบบทึบ เส้นคั่นปกติจะมีลักษณะเป็น 3 มิติ แต่ถ้าเราต้องการเส้นคั่นทึบ ให้กำหนดรูปแบบของเส้นั่นเป็นแบบ NOSHADE ตัวอย่างการใช้คำสั่ง <><><> เส้นคั่นบรรทัด< /TITLE >< /HEAD ><> Hello ! <> เห็นผมไหม? เส้นคั่นแบบธรรมดา<> เส้นคั่นแบบทึบ
< /BODY >< /HTML> แสดงผลในลักษณะของเว็บเพจ ซึ่งสามารถแสดงผลได้ในรูปแบบต่างๆ ไม่ว่าเป็นภาพกราฟิก ภาพนิ่ง ภาพเคลื่อนไหว เสียง หรือการเชื่อมโยงไปยังเว็บไซต์อื่นๆ ภาษา HTML เป็นภาษาที่มีลักษณะของโค้ด กล่าวคือ จะเป็นไฟล์ที่เก็บข้อมูลที่เป็นตัวอักษรในมาตรฐานของรหัสแอสกี (ASCII Code) โดยเขียนอยู่ในรูปแบบของเอกสารข้อความ จึงสามารถกำหนดรูปแบบและโครงสร้างได้ง่าย การสร้างเว็บเพจ เราสามารถสร้างเว็บเพจได้ 2 ทาง คือ TextEditor โดยเราต้องรู้คำสั่งของภาษา HTML แล้วพิมพ์โปรแกรมเข้าไปทางTextEditor เช่น Notepad เป็นต้น ตัวช่วยสร้าง โดยใช้โปรแกรมที่มีความสามารถในการสร้างเว็บเพจโดยเราไม่จำเป็นต้องรู้ภาษา HTML เพราะโปรแกรมเหล่านี้จะทำการแปลงให้เราอัตโนมัติ ขั้นตอนในการสร้างเว็บเพจ เปิดโปรแกรม TextEditor แล้วทำการพิมพ์คำสั่ง HTML แล้วเซฟเป็นไฟล์นามสกุล .htm หรือ .html เปิดโปรแกรม WebBrowser เพื่อใช้ในการดูผลลัพธ์ที่ได้จากการเขียนภาษา HTML จากที่ได้เขียนจาก TextEditor โครงสร้างภาษา HTML การเขียนภาษา HTML นั้นมีส่วนประกอบหลักอยู่ 2 ส่วน คือ ส่วนที่เป็นเนื้อหา และส่วนที่เป็นคำสั่ง ส่วนที่เป็นคำสั่งนั้นจะอยู่ในรูปของ Tag ซึ่งจะเขียนอยู่ในเครื่องหมาย มากกว่า และ น้อยกว่า < > แต่ละ Tag มีหน้าที่ที่แตกต่างกันออกไป ซึ่งจะกล่าวในบทต่อไป Tag แบ่งออกเป็น 2 ประเภท คือ แท็กเดี่ยว คือ คำสั่งที่มีคำสั่งเพียงอย่างเดียว ซึ่งสามารถใช้และสิ้นสุดคำสั่งได้ด้วยตัวของมันเอง เช่น ข้อความ....
แท็กคู่ คือ คำสั่งที่ต้องมีส่วนเริ่มต้นและส่วนจุดจบของคำสั่งนั้นๆ โดยแท็กที่เป็นส่วนจบนั้นจะมีเครื่องหมาย slash / ติดเอาไว้ เช่น ส่วนของเนื้อหา .....
ข้อความ.....
ข้อความ.... *** ถ้าหากมีการใช้แท็กคู่หลายๆ คำสั่ง เช่น คำสั่งตัวขีดเส้นใต้ .... และตามด้วย คำสั่ง ตัวเอียง .... จะต้องปิดคำสั่งตัวเอียงก่อน แล้วจึงจะมาปิดคำสั่งตัวหนา*** U> ข้อความ.... เชื่อมโยงเว็บเพจด้วย Link การใช้ Link นี้เองทำให้เว็บเพจแตกต่างจากเอกสารธรรมดา เพราะมันทำให้เนื้อหาในเว็บเพจสามารถตอบสนองผู้ใช้ได้โดยที่ผู้ใช้ไม่ต้องอ่านเนื้อหาทั้งหมดในเอกสารเว็บแต่ละหน้าแต่สามารถ Click mouse เปิดดูเฉพาะเว็บเพจที่สนใจ ในบทนี้จะกล่าวถึงการสร้าง Linkรูปแบบต่าง ๆ เพื่อเชื่อมโยงข้อมูลในเว็บเพจเข้าด้วยกัน ขนาดตัวอักษร เป็นคำสั่งที่ใช้กำหนดขนาดตัวอักษรทั้งหมดในไฟล์ให้มีค่าตามที่เรากำหนด ซึ่งขนาดตัวอักษรมีได้ตั้งแต่ 1 ถึง 7 คือ ขนาด 1 เป็นขนาดเล็กที่สุด และ ขนาด7 เป็นขนาดที่ใหญ่ที่สุด ตัวอย่างการใช้คำสั่ง <><><> ขนาดตัวอักษร ( Fontsize & Basefontsize )< /TITLE >< /HEAD ><> ทดลองการกำหนดขนาด BASEFONT SIZE="3"ทดลองการกำหนดขนาด FONT SIZE="+2"ทดลองการกำหนดขนาด FONT SIZE="-1"< /BODY >< /HTML > การกำหนดลักษณะตัวอักษร การกำหนดลักษณะตัวอัการในเว็บเพจ มีอยู่ 2 วีธี ได้แก่- แบบ Physical ที่กำหนดรูปแบบตัวอักษรอย่างเจาะจง- แบบ Logical ที่ผู้ใช้บราวเซอร์สามารถกำหนดรูปแบบตัวอักษรได้ด้วยตนเอง รูปแบบคำสั่ง แบบอักษร คำสั่ง Bold (ตัวหนา)Italic (ตัวเอน)Typewriter Text (ตัวอัการพิมพ์ดีด)Strike (ตัวขีดฆ่า)Superscript (ตัวอักษรยกขึ้น)Subscript (ตัวอัการห้อยลง)Underline (ขีดเส้นใต้ข้อความ)Blink (ตัวอักษรกระพริบ) ........................ การกำหนดสีพื้น และสีตัวอักษร เราสามารถกำหนดสีให้กับเว็บเพจที่สร้างได้โดยมีสีให้เลือกมากกว่า 16.7 ล้านสี แต่เราควรใช้สีอย่างระมัดระวังเพราะการใช้สีที่ไม่เหมาะจะทำให้เว็บเพจของเราอ่านยาก และดูน่าปวดหัว สีที่ใช้ใน HTML นั้นเป็นค่าความเข้มระหว่างแม่สีสามสี ได้แก่ สีแดง สีเขียว และสีน้ำเงิน โดยระดับความเข้มของแต่ละสี มีค่าได้ตั้งแต่ 0-255ทำให้มีสีทั้งหมดที่เราสามารถเลือกใช้มีได้ถึง 16.7 ล้านสี การกำหนดสีของพื้นฉากหลัง เรากำหนดสีพื้น และสีตัวอักษรทั้งเว็บเพจที่แสดงได้ด้วย รูปแบบคำสั่ง...... ตัวอย่างการใช้คำสั่ง <><><>การกำหนดสีของพื้นฉากหลัง< /TITLE >< /HEAD >< bgcolor="#0000FF" text="#FFFFFF">กำหนดBACKGROUNDเป็นสีน้ำเงิน< /BODY >< /HTML > การแสดงผล กำหนดBACKGROUND เป็นสีน้ำเงิน การกำหนดสีของตัวอักษร ถ้าเราต้องการใช้ข้อความมีสีแตกต่างกันไปให้เราใช้คำสั่ง รูปแบบคำสั่ง...... ตัวอย่างการใช้คำสั่ง <><><>การกำหนดสีของตัวอักษร< /TITLE >< /HEAD >< text="#00ff00">กำหนดตัวอักษร เป็นสีเขียว< /BODY >< /HTML > ตัวอย่างของสี เราสามารถกำหนดสีได้ 2 วีธี คือ1. ใช้ชื่อของสีมาตรฐาน เช่น red blue2. ใช้รหัสเลขฐาน 16 เช่น #FF0000 #0000FF ตัวอย่างของเลขฐาน 16 เทียบกับสี color เลขฐาน 16 color เลขฐาน 16 color เลขฐาน 16 color เลขฐาน 16 FFFFFF B5A642 42426F 7093DB FF0000 238E68 5C4033 855E42 00FF00 D9D919 2F4F2F 856363 0000FF A62A2A 4A766E D19275 00FFFF 8C7853 4F4F2F 238E23 FFFF00 A67D3D 9932CD CD7F32 000000 5F9F9F 871F78 DBDB70 70DB93 D98719 6B238E C0C0C0 5C3317 B87333 2F4F4F 527F76 9F5F9F FF7F00 97694F 93DB70 ขนาดตัวอักษร เป็นคำสั่งที่ใช้กำหนดขนาดตัวอักษรทั้งหมดในไฟล์ให้มีค่าตามที่เรากำหนด ซึ่งขนาดตัวอักษรมีได้ตั้งแต่ 1 ถึง 7 คือ ขนาด 1 เป็นขนาดเล็กที่สุด และ ขนาด7 เป็นขนาดที่ใหญ่ที่สุด ตัวอย่างการใช้คำสั่ง <><><> ขนาดตัวอักษร ( Fontsize & Basefontsize )< /TITLE >< /HEAD ><> ทดลองการกำหนดขนาด BASEFONT SIZE="3"ทดลองการกำหนดขนาด FONT SIZE="+2"ทดลองการกำหนดขนาด FONT SIZE="-1"< /BODY >< /HTML >

posted by kpoona @ วันอาทิตย์, กันยายน 14, 2551 0 comments

ทดสอบแนะนำตัวเอง

ชื่อ	ชิชาณัณ แซ่ตั้ง
ชื่อเล่น	ปู
เบอร์โทร	084-0359113
อีเมล์	kpoona@hotmail.com

posted by kpoona @ วันอาทิตย์, กันยายน 14, 2551 0 comments

About Me

Name: kpoona
Home:
About Me:
See my complete profile