| การเขียน HTML 2007-11-11 22:38:46 1.การเขียนโฮมเพจเบื้องต้น Text Editor ใช้สำหรับเขียนคำสั่งต่างๆลงไป และ save file นามสกุลเป็น .html อาจเป็น Notepad หรือ Wordpad ที่ติดมากับ windows ก็ได้ โปรแกรม webbrowser ที่ใช้กันอยู่นี้ถ้าเป็น Netscape หรือ Explorer ไม่ควรต่ำกว่า V.2 ในการสอนเขียนโฮมเพจต่อไปนี้ จะสอนเขียนโดยใช้โปรแกรม Text Editor ใดก็ได้ที่สามารถ save file เป็น .html หรือ .htm ได้ เมื่อ save แล้วสามารถ run ใน โปรแกรม webbrowser ได้เมื่อคุณ copy code ต่อไปนี้ ลงบน text editor ของคุณ แล้ว save เป็น index.html แล้ว ลอง run ดูได้แสดงว่าอุปกรณ์ที่คุณมีสามารถเขียนโฮมเพจได้แล้ว <html> <head> <title>Hello World</title> </head> <body> <h1>Hello World</h1> </body> </html> copy ข้อความลงบน Notepad ดังนี้ กด save as แล้วเลือก all file save ชื่อเป็น hello.html ผลที่ได้ 2. โครงสร้างของภาษา HTML <html> <head> <title> ชื่อเรื่อง </title> </head> <body> ข้อความและคำสั่ง ที่ต้องการให้ปรากฎบนหน้าจอ </body> </html> ภาษา HTML จะประกอบไปด้วย 2 ส่วนใหญ่ๆคือ ส่วนหัว <head> คือส่วนที่จะ load เป็นอันดับแรก ใช้กำหนดชื่อเรื่อง และ คำสั่งที่ต้องการให้ load ก่อนส่วนอื่น เนื้อหา <body> คือส่วนที่เอาไว้ใส่ข้อความ และ คำสั่งต่างๆที่ต้องการให้แสดงในหน้าจอ Webbrowser ส่วนที่เป็น <คำสั่ง> คือ tag สำหรับ เปิดคำสั่ง และ </คำสั่ง> คือ tag ที่ใช้ปิดคำสั่งนั้น เช่น <head> ก็ต้องปิดด้วย </head> ด้วยเสมอ 3.คำสั่งพื้นฐาน 3.1 การกำหนดข้อความลงใน Title bar <head> <title> ข้อความที่ต้องการให้ปรากฏลงบน Title Bar </title> </head> ผลที่ได้ Example01.html 3.2 การกำหนด background <html> <head> <title>การกำหนด background ให้ Homepage</title> </head> <body bgcolor="color"> </body> </html> การกำหนดสีของ background ทำได้โดยการเพิ่มคำสั่ง bgcolor ลงใน <body> ดังตัวอย่างด้านบน ส่วนตัวแปร color คือ ชื่อสีหรือ code สีที่จะใช้กำหนดสีของ background ชื่อสีเช่น black white blue green red ฯลฯ Code สี คือเลขฐาน16 คือ(0-9,A-F) 6 ตัวซึ่งแทนค่าในสีต่างๆ 2 ตัวแรกจะแทนค่าสีแดง 2 ตัวกลางจะแทนสีเขียว ส่วน 2 ตัวหลังจะแทนสีน้ำเงิน ดู code สี คลิกที่นี่ การใช้ภาพเป็น Background <html> <head> <title>การกำหนด background ให้ Homepage</title> </head> <body background="URL"> </body> </html> การใช้รูปภาพเป็น background ใช้การแทรกคำสั่งเข้าไปใน <body> เช่นเดียวกับการกำหนดสี background ตัวแปร URL คือ path ของ file รูปภาพเช่น http://www.siamclub.com/bg.gif หรือถ้าหาก อยู่ใน directory เดียวกัน สามารถกำหนดเป็น ชื่อ file ได้เลยเช่น <body background="bg.gif"> หากต้องการกำหนดทั้งสีและภาพที่เป็น background ทำได้ดังตัวอย่าง <body bgcolor="color" background="URL"> ไม่สามารถใช้ทั้ง <body bgcolor> และ <body background> แยกกันได้ เพราะว่า ภาษา html จะเลือก body เพียงอันเดียว ทำให้การ load อาจผิดพลาดได้ <body bgcolor="color" background="URL"> คำสั่งนี้จะใช้สำหรับ กรณีที่ภาพที่ใชัเป็น background มีขนาดใหญ่ browser จะ load สีพื้นหลังขึ้นมาก่อน 3.3 การกำหนด music background <html> <head> <title>การกำหนด music background</title> </head> <body> <bgsound src="URL" loop="จำนวนรอบ"> </body> </html> การกำหนด music background ทำได้โดยการ tag คำสั่ง <bgsound> ลงใน โฮมเพจ ดังตัวอย่างด้านบน URL คือที่อยู่ของ file เช่น http://www.siamclub.com/sound.mid หรือ ถ้าอยู่ใน Directory เดียวกัน สามารถกำหนดเป็นชื่อ file ได้เลยเช่น <body bgsound="sound.mid"> สำหรับตัวแปร จำนวนรอบ คำจำนวนรอบของการวนเพลง หากต้องการให้วนไปเรื่อยๆ ให้ใช้คำสั่ง <bgsound src="URL" loop="INFINITE">หรือ ใช้ -1 แทน INFINITE ก็ได้ file เพลงต่างๆสามารถหาได้ที่ midi.com Midiworld 3.4 การใส่ข้อความลงในโฮมเพจ <html> <head> <title>การใส่ข้อความลงในโฮมเพจ</title> </head> <body> ข้อความที่ต้องการ </body> </html> การใส่ข้อความลงในโฮมเพจสามารถใส่ลงไประหว่าง <body> .... </body> ได้เลย ดังตัวอย่างด้านบน แต่โปรแกรม webbrowser จะไม่สามารถอ่านการเว้นวรรคของเราได้ เช่น ถ้าคุณพิมพ์ว่า <html> <head> <title>การใส่ข้อความลงในโฮมเพจ</title> </head> <body> HTML คือภาษาที่ใช้เขียนโฮมเพจ </body> </html> กับ <html> <head> <title>การใส่ข้อความลงในโฮมเพจ</title> </head> <body> HTML คือภาษาที่ใช้เขียนโฮมเพจ </body> </html> โปรแกรม webbrowser จะแสดงผลออกมาเหมือนกัน คือ Example02.html ไม่ว่าเราจะเว้นวรรคยาวเท่าใด โปรแกรม Webbrowser จะอ่านได้ว่าคือการเว้นวรรคเพียง 1 วรรคเท่านั้น ถ้าเราต้องการจัดหน้ากระดาษแบบต่างๆเช่น เว้นบรรทัด จำเป็นต้องใช้คำสั่งต่างๆอีกมากมาย ซึ่งจะกล่าวในบทต่อๆไปครับ 4. คำสั่งเริ่มต้น 4.1 การใช้ comment tag <html> <head> <title>Comment tag</title> </head> <body> <!-- ตั้งแต่ 2-2-95---> </body> </html> Comment tag มีไว้เพื่อเตือนความจำ หรือไว้บันทึก เขียนไว้ที่ส่วนใดของ file ก็ได้ โดยใช้ <!ข้อความ> เพราะเมื่อเราเขียนโฮมเพจไว้ มากๆ จะทำให้เราลืมได้ว่า จะแก้ code ตรงไหน หรือ file นี้ทำขึ้นมาเมื่อไหร่ โดยที่ webbrowser จะข้ามการอ่านข้อมูลตรงนี้ไป ทำให้ไม่แสดงผลใดๆใน webbrowser ดังตัวอย่างด้านบน 4.2 คำสั่งขึ้นบรรทัดใหม่ <html> <head> <title>คำสั่งขึ้นบรรทัดใหม่</title> </head> <body> HTML<br> DHTML<br> Java script<br> Java applet<br> </body> </html> คำสั่งสำหรับขึ้นบรรทัดใหม่ใช้คำสั่ง <br> วางไว้ท้ายข้อความที่ต้องการ Webrowser จะแสดงผลข้อความต่อจากนั้นในบรรทัดต่อไป ดังตัวอย่าง ผลที่ได้ Example03 4.3 คำสั่งขึ้นย่อหน้าใหม่ <html> <head> <title>คำสั่งขึ้นย่อหน้าใหม่</title> </head> <body> <p>HTML คือภาษาที่ใช้ในการเขียน โฮมเพจ ย่อมาจากคำว่า Hyper Text Makeup Language ซึ่งพัฒนามาจากภาษา SGML ซึ่งสามารถอ่านได้ด้วยโปรแกรม Web browser อย่างเช่น Internet Explorer หรือ Netscape Navigator</p> <p>ในเพจนี้จะสอนการสร้าง โฮมเพจด้วย ภาษา HTML โดยใช้โปรแกรม Text Editer ใดก็ได้ เช่น Notepad , Wordpad , Microsoft Word หรือแม้แต่โปรแกรม Edit ของ DOS ก็สามารถสร้าง file HTML ขึ้นได้ ใน windows นิยม save เป็น file.html ส่วนใน dos นั้นนิยม save เป็น file.htm เพราะว่าใน dos นั้นไม่สามารถ save นามสกุล file เกิน 3 ตัวอักษรได้ </p> </body> </html> <p>......</p> คือคำสั่งที่ใช้สำหรับย่อหน้าใหม่ ผลที่ได้ Example04.html คำสั่งสำหรับจัดตำแหน่งของย่อหน้า <p align="ตำแหน่ง"> <html> <head> <title>คำสั่งขึ้นย่อหน้าใหม่</title> </head> <body> <p align="right">HTML คือภาษาที่ใช้ในการเขียน โฮมเพจ ย่อมาจากคำว่า Hyper Text Makeup Language ซึ่งพัฒนามาจากภาษา SGML ซึ่งสามารถอ่านได้ด้วยโปรแกรม Web browser อย่างเช่น Internet Explorer หรือ Netscape Navigator</p> <p align="center">ในเพจนี้จะสอนการสร้าง โฮมเพจด้วย ภาษา HTML โดยใช้โปรแกรม Text Editer ใดก็ได้ เช่น Notepad , Wordpad , Microsoft Word หรือแม้แต่โปรแกรม Edit ของ DOS ก็สามารถสร้าง file HTML ขึ้นได้ น windows นิยม save เป็น file.html ส่วนใน dos นั้นนิยม save เป็น file.htm เพราะว่าใน dos นั้นไม่สามารถ save นามสกุล file เกิน 3 ตัวอักษรได้ </p> </body> </html> การกำหนดตำแหน่งของย่อหน้าทำได้โดยการเพิ่มคำสั่งลงใน <p> ดังตัวอย่าง ตัวแปร ตำแหน่ง คือ ตำแหน่งที่ต้องการ มีอยู่ 3 อย่างคือ left = ชิดขอบซ้าย right = ชิดขอบขวา center = กลางหน้ากระดาษ ผลที่ได้ Example05.html 4.4 คำสั่งขีดเส้นใต้ <html> <head> <title>คำสั่งขีดเส้นใต้</title> </head> <body> HTML คือภาษาที่ใช้ในการเขียน โฮมเพจ ย่อมาจากคำว่า Hyper Text Makeup Language ซึ่งพัฒนามาจากภาษา SGML ซึ่งสามารถอ่านได้ด้วยโปรแกรม Web browser อย่างเช่น Internet Explorer หรือ Netscape Navigator<hr> ในเพจนี้จะสอนการสร้าง โฮมเพจด้วย ภาษา HTML โดยใช้โปรแกรม Text Editer ใดก็ได้ เช่น Notepad , Wordpad , Microsoft Word หรือแม้แต่โปรแกรม Edit ของ DOS ก็สามารถสร้าง file HTML ขึ้นได้ ใน windows นิยม save เป็น file.html ส่วนใน dos นั้นนิยม save เป็น file.htm เพราะว่าใน dos นั้นไม่สามารถ save นามสกุล file เกิน 3 ตัวอักษรได้ <hr> </body> </html> <hr> คือคำสั่งที่ใช้สำหรับขีดเส้นใต้ ผลที่ได้ Example06.html การกำหนดความยาวของเส้น <hr width="ความยาว"> <html> <head> <title>การกำหนดความยาวของเส้น</title> </head> <body> HTML <hr width="200"> HTML <hr width="400"> HTML <hr width="600"> HTML <hr width="800"> HTML <hr width="20%"> HTML <hr width="60%"> </body> </html> เราสามารถกำหนดความยาวของเส้นคั่นโดยใส่ค่าตัวเลข ความยาวที่ต้องการโดยหน่วยเป็น pixel หรือใส่เป็นขนาด % ต่อหน้าจอ ในตัวแปร ความยาว ดังตัวอย่างด้านบน ผลที่ได้ Example07.html การกำหนดความหนาของเส้น <hr size="ความหนา"> <html> <head> <title>การกำหนดความยาวของเส้น</title> </head> <body> HTML <hr size="2"> HTML <hr size="4"> HTML <hr size="6"> HTML <hr size="8"> </body> </html> เราสามารถกำหนดความหนาของเส้นคั่นโดยใส่ค่าตัวเลข ความยาวที่ต้องการโดยหน่วยเป็น pixel ในตัวแปร ความหนา ดังตัวอย่างด้านบน ผลที่ได้ Example08.html การกำหนดเส้นทึบ <hr noshade> ตัวอย่าง เช่น <hr noshade size="10"> การตำแหน่งของของเส้นคั่น <hr align="ตำแหน่ง"> ทำได้โดยการเติมตำแหน่งที่ต้องการ left right center เช่นเดียวกับ คำสั่ง <p> ตัวอย่าง เช่น <hr noshade size="10" align="center"> การกำหนดสีของเส้นคั่น (เฉพาะ IE) <hr color="Code สี"> ทำได้โดยการเติม code สีที่ต้องการลงไปได้เลย Code สี ตัวอย่าง เช่น <hr noshade size="10" align="center" color="cc66cc"> 5. คำสั่งกำหนดตัวอักษร 5.1 การกำหนดหัวเรื่อง <html> <head> <title>กำหนดหัวเรื่อง</title> </head> <body> <h1>HTML</h1> <h2>HTML</h1> <h3>HTML</h1> <h4>HTML</h1> <h5>HTML</h1> <h6>HTML</h1> </body> </html> <hn> คือคำสั่งที่ใช้สำหรับกำหนดหัวเรื่องโดยการเติมตัวเลข 1-6 ลงในตัวแปร n โดย เลข 1 จะเป็นตัวใหญ่ที่สุด และ 2,3,4 รองลงมา จนถึง 6 จะเป็นหัวข้อที่เล็กที่สุด ผลที่ได้ Example09.html 5.2 การกำหนดขนาดตัวอักษร <html> <head> <title>คำสั่งขีดเส้นใต้</title> </head> <body> <font size="-1">HTML</font> <font size="-3">HTML</font> <font size="-5">HTML</font> <font size="-7">HTML</font> <font size="1">HTML</font> <font size="3">HTML</font> <font size="5">HTML</font> <font size="7">HTML</font> <font size="+1">HTML</font> <font size="+3">HTML</font> <font size="+4">HTML</font> <font size="+7">HTML</font> </body> </html> <font size="number"> คือคำสั่งที่ใช้สำหรับกำหนดขนาดตัวอักษร โดยการเติมตัวเลข -1 ถึง +7 โดยเลข -1 จะเล็กที่สุด และ +7 จะมีขนาดใหญ่ที่สุด ผลที่ได้ Example10.html 5.3 การกำหนดรูปแบบตัวอักษร การกำหนดชื่อตัวอักษร <font face="ชื่อตัวอักษร"> <html> <head> <title>การกำหนดขนาดตัวอักษร</title> </head> <body> <font face="Cordiaupc">HTML</font><br> <font face="Ms sans serif">HTML</font><br> <font face="AngsanaUPC">HTML</font><br> <font face="arial">HTML</font><br> </body> </html> <font face="ชื่อตัวอักษร"> ....... </font> คือคำสั่งที่ใช้สำหรับกำหนดชื่อตัวอักษรโดยการเติมชื่อตัวอักษรลงไปใน <font> ดังตัวอย่าง หากท่านต้องการกำหนดทั้งชื่อตัวอักษรและ ขนาดตัวอักษรพร้อมกัน สามารถเขียนคำสั่งได้ดังนี้ <font size="ขนาดตัวอักษร" face="ชื่อตัวอักษร">HTML</font> ผลที่ได้ Example11.html การกำหนดตัวเอียง ตัวหนา และ ตัวขีดเส้นใต้ <b> = ตัวหนา <i> = ตัวเอียง <u> = ตัวขีดเส้นใต้ <b>HTML</b><br> <i>HTML</i><br> <u>HTML</u><br> <b><i><u>HTML</b></i></u><br> ผลที่ได้ Example12.html 5.4 การใช้ preformatted text <pre>.....</pre> <pre> HTML = Hyper Text Markup Language -------------------------------------------------- Java Script Java Applet DHTML </pre> <pre> ....... </pre> preformatted text เป็นการจัดตัวอักษรที่ จะมีความกว้างเท่ากันทุกตัวโดยจะแสดงผลในรูปแบบของ fix font เราสามารถจัดหน้าจออย่างไรก็ได้ โดยไม่ต้องใช้ คำสั่ง HTML ใดๆเลย แต่จะสามารถแสดงได้แต่ ภาษาอังกฤษ และใน font ของ fix font เท่านั้น ผลที่ได้ Example13.html 5.5 การทำตัวอักษรกระพริบ (เฉพาะ Netscape) <blink> blink text </blink> การทำตัวอักษรกระพริบ นั้นทำให้เพิ่มความสนใจในข้อความนั้น แต่ต้องระวังว่า ถ้าทำตัวอักษรกระพริบมากเกินไป จะทำให้คนเข้ารำคาญได้ note คำสั่ง blink นี้ถ้าไม่ปิดคำสั่ง จะแสดงผลทั้งบรรทัด ผลที่ได้ Example14.html 5.6 การจัดหน้ากระดาษ <center> text </center> <center> ใช้สำหรับ จัดกึ่งกลางหน้ากระดาษ ผลที่ได้ Example15.html การจัดกั้นหน้า และ กั้นหลัง <blockquote><blockquote><blockquote> 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 ตัวอักษรได้ ในเพจนี้จะสอนการใช้ภาษา HTML ทุกขั้นตอน รวมถึงการสมัคร free homepage และการ upload file อย่างละเอียดทุกขั้นตอน รับรองว่าถ้าท่านตั้งใจจะเขียนโฮมเพจจริง อ่านที่นี่สามารถเขียนโฮมเพจได้แน่นอนครับ </blockquote></blockquote></blockquote> <blockquote> ใช้สำหรับตั้งกั้นหน้า และกั้นหลัง โดยทั้ง 2 ฝั่งจะห่างจากขอบเท่ากัน หากต้องการให้กั้น หน้า และ หลัง แคบลงก็สามารถใช้ <blockquote> หลายๆครั้งซ้อนกันได้ครับถ้าอ่านแล้วยังไม่เข้าใจก็ลองดูตัวอย่างนะครับ ผลที่ได้ Example16.html การย่อหน้า <dd>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 ตัวอักษรได้ <dd>ในเพจนี้จะสอนการใช้ภาษา HTML ทุกขั้นตอน รวมถึงการสมัคร free homepage และการ upload file อย่างละเอียดทุกขั้นตอนรับรองว่าถ้าท่านตั้งใจจะเขียนโฮมเพจจริงอ่านที่นี่สามารถเขียนโฮมเพจได้แน่นอนครับ <dd> ใช้สำหรับย่อหน้า ผลที่ได้ Example17.html 5.7 การกำหนดสีตัวอักษร <font color="color"> text </font> <font color="code สี"> ใช้สำหรับ กำหนดสีให้ตัวอักษร โดยการใช้ code สี กำหนดสีของตัวอักษร อ้างอิงจาก http://grimmjow.212cafe.com |
วันอาทิตย์ที่ 14 สิงหาคม พ.ศ. 2554
การเขียน HTML
สมัครสมาชิก:
ส่งความคิดเห็น (Atom)
ไม่มีความคิดเห็น:
แสดงความคิดเห็น