Recommended
More Related Content
Similar to เริ่มต้นสร้างเอกสาร HTML
Similar to เริ่มต้นสร้างเอกสาร HTML (20)
More from ssuseraa96d2
More from ssuseraa96d2 (20)
เริ่มต้นสร้างเอกสาร HTML
- 2. Text และ Tag • ในการสร้างเอกสาร HTML นั้น จะต้องมีทั้ง Text และ Tag ถ้าหาก เรานาเอกสารที่มีแค่ Text มาแสดงใน Web Browser ผลลัพธ์ที่ได้ก็ จะไม่ถูกต้องตามเอกสารต้นฉบับ เนื่องจาก Browser ไม่เข้าใจ โครงสร้างของข้อมูล จึงแสดงออกมาเฉพาะ Text ที่เข้าใจเท่านั้น
- 3. ตัวอย่างที่ 1 <html> <head> </head> <body> ความรู้เบื้องต้นอินเตอร์เนต รหัสวิชา 32042108 จานวนคาบ/สัปดาห์ 4 คาบ/สัปดาห์ จานวนหน่วยกิต 3 หน่วยกิต </body> </html>
- 4. การจัดรูปแบบให้เป็น Paragraph และเป็นบรรทัด ในการจัดรูปแบบให้ขึ้นบรรทัดใหม่ หรือให้ขึ้นย่อหน้าใหม่ นั้น จะต้องมีการใส่คาสั่งเพิ่มเข้าไป เพื่อทาการควบคุมการแสดงผล ของ Browser โดยคาสั่งเหล่านั้นได้แก่ <br> ใช้กาหนดให้ข้อความที่อยู่หลังจากนี้ขึ้นบรรทัดใหม่ <p> ใช้กาหนดให้ข้อความที่อยู่หลังจากนี้ขึ้นย่อหน้าใหม่
- 5. ตัวอย่างที่ 2 <html> <head> </head> <body> ความรู้เบื้องต้นอินเตอร์เนต<p> รหัสวิชา 32042108<br> จานวนคาบ/สัปดาห์ 4 คาบ/สัปดาห์<br> จานวนหน่วยกิต 3 หน่วยกิต<br> </body> </html>
- 6. การจัดรูปแบบข้อความให้ตรงกับรูปแบบเดิม ในบางครั้งเราอาจจะมีข้อมูลอยู่แล้ว และไม่ต้องการจัดใหม่ และต้องการให้ข้อมูลอยู่ในรูปแบบเดิม เราอาจจะใช้คาสั่งดังต่อไปนี้ <pre> , </pre> ใช้กาหนดให้ข้อความอยู่ในรูปแบบที่ได้กาหนดไว้แล้ว
- 7. ตัวอย่างที่ 3 <html> <head> </head> <body> <pre> ความรู้เบื้องต้นอินเตอร์เนต รหัสวิชา 32042108 จานวนคาบ/สัปดาห์ 4 คาบ/สัปดาห์ จานวนหน่วยกิต 3 หน่วยกิต </pre> </body> </html>
- 8. การกาหนดชื่อเอกสารให้แสดงบน Title Bar ของ Browser เราสามารถให้ Browser แสดงชื่อเอกสารที่ Title Bar ได้ตาม ต้องการโดยการใส่คาสั่งไว้ระหว่างคาสั่ง <head> และ </head> <title> , </title> ใช้กาหนดให้Browser แสดงชื่อเอกสารที่กาหนด ไว้ที่แถบ Title Bar ของ Browser
- 10. การกาหนดขนาดตัวอักษรในรูปแบบของหัวข้อต่างๆ ในกรณีที่เอกสารนั้นมีข้อมูลต่างๆ อยู่มากมาย อาจจะมีหลาย หัวข้อ และเราต้องการกาหนดขนาดของหัวข้อให้แตกต่างกันออกไป <hn> , </hn> ใช้กาหนดขนาดตัวอักษรในรูปแบบของหัวข้อ โดย ที่ n แทนตัวเลข 1 ถึง 6 จาก 1 เป็นขนาดใหญ่สุดไป จนถึง 6 เป็นขนาดเล็ก สุด ข้อความที่กาหนดนี้จะเป็นตัวหนาและขึ้นต้นบรรทัดใหม่ทุกครั้ง
- 11. • H1จะมีขนาด 21pixel และตัวหนา • H2 จะมีขนาด 17 pixel และตัวหนา • H3 จะมีขนาด 14 pixel และตัวหนา • H4 จะมีขนาด 12 pixel และตัวหนา • H5 จะมีขนาด 11pixel และตัวหนา • H6 จะมีขนาด 9 pixel และตัวหนา
- 13. การใส่ที่อยู่ เป็นข้อความที่นิยมใส่ไว้ด้านล่างของเอกสาร เช่น อาจจะเป็น ที่อยู่ที่สามารถติดต่อได้ • <address> , </address> ใช้กาหนดข้อความให้อยู่ในรูปแบบ ของที่อยู่ โดยข้อความที่อยู่ระหว่างคาสั่งนี้จะถูกกาหนดให้เป็นตัว เอนโดยอัตโนมัติ
- 15. การสร้างเส้นตรงแนวนอน บางครั้งเอกสารอาจจะมีข้อมูลเป็นจานวนมาก และถูกแบ่ง ออกเป็นส่วนๆ ควรมีการใส่เส้นตรงแนวนอนเพื่อแบ่งเอกสาร ออกเป็นส่วนๆ เพื่อง่ายต่อการดูเอกสาร
- 16. <hr> ใช้กาหนดให้สร้างเส้นตรงแนวนอน โดยใช้ร่วมกับคาสั่ง ดังต่อไปนี้ noshade กาหนดให้เป็นเส้นทึบดา size กาหนดความหนาให้กับเส้น มีหน่วยเป็น pixel width กาหนดความยาวให้กับเส้น มีหน่วยเป็น pixcel หรือ percent align กาหนดตาแหน่งให้กับเส้น คือ center , left , right color กาหนดสีให้กับเส้น
- 17. ตัวอย่างที่ 7 <html> <head> <title>ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เนตEX</title> </head> <body> <hr> <hr noshade> <hr size=30> <hr size=50> <hr width=100> <hr width=500> <hr width=10%> <hr width=50%> <hr width=100 align=left> <hr color=aque> <hr size=30 width=400 align=center color="#ffooff"> </body> </html>
- 18. ตัวอักษรพิเศษ • ในบางครั้งเอกสารที่เราสร้างนั้นอาจจะมีการใสตัวอักษรพิเศษที่ไม่ มีบน Keyboard หรือใช้เป็น Tag ในคาสั่ง HTML แต่เราต้องการ ใส่ไว้ในเอกสาร HTML ก็สามารถทาได้โดยกาหนดรูปแบบ ต่อไปนี้ &n ใช้กาหนดรูปแบบตัวอักษรพิเศษ โดยที่ n คือ ข้อความที่ใช้แทน ตัวอักษรพิเศษ ยกตัวอย่างเช่น & & Ampersand < < Lass than > > Greater than
- 19. นอกจากนี้เรายังสามารถใช้รหัส ASCII (American Standard Code for Information Interchange) แทนได้ด้วย &#nใช้กาหนดรูปแบบตัวอักษรพิเศษ โดยที่ n คือ รหัส ASCII ที่ใช้แทน ตัวอักษรพิเศษ ยกตัวอย่างเช่น & & Ampersand < < Lass than > > Greater than
- 20. ตัวอย่างที่ 8 <html> <head> <title>ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เนตEX</title> </head> <body> & < > & < > </body> </html>
- 21. การใส่หมายเหตุ บางครั้งเราต้องการใส่หมายเหตุไว้เพื่ออธิบายบางส่วนของ เอกสาร เพื่อจะได้สะดวกในการค้นหาและแก้ไขในภายหลัง <!n-> ใช้อธิบายเกี่ยวกับเอกสารหรืออาจจะเป็นข้อความใดๆที่ใส่ ไว้กันลืม โดยจะมีรูปแบบต่างจาก Tag อื่นๆ คือ จะขึ้นต้นด้วย <! แล้วตาม ด้วย n หรือข้อความ ข้อมูลต่างๆ ที่ต้องการใส่ไว้แล้วปิดท้ายด้วย ->
- 22. ตัวอย่างที่ 9 <html> <head> <title>ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เนตEX</title> </head> <body> <! ส่วนนี้เป็นการทดสอบอักษรพิเศษ -> & < > & < > <! ส่วนนี้เป็นเส้นคั่นสีชมพูยาว 400 pixel -> <hr color=”#ff00ff” width=400> </body> </html>
- 23. การกาหนดสี • ในการกาหนดสี เราสามารถกาหนดค่าสีได้ 2 แบบ คือ • สี="#xxxxxx" ระบุเป็นเลขฐาน 16 (0-9 หรือ A-F โดย 0 มีค่า สีน้อยที่สุด และ F มีค่าสีมากที่สุด) มีตัวอักษรอยู่ด้วยกันทั้งหมด 3 ชุด 1 ชุดแทนด้วยตัวอักษร 2 ตัว แสดงค่าของแม่สี แดง เขียว น้า เงิน (RGB) ตามลาดับ โดยเขียนตามหลังเครื่องหมาย # เช่น"#FFFFFF" จะให้ สีขาว ,"#000000" จะให้ สีดา • สี=”color” ระบุสีลงไปเลย ซึ่งมีสีดังต่อไปนี้
- 24. ตัวอย่างที่ 10 <html> <head> <title>ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เนตEX</title> </head> <body> <font size=7><b> <font color="#00ffff">AQUA</font> <font color ="#000000">BLACK</font> <font color ="#0000ff">BLUE</font>
- 25. ตัวอย่างที่ 10 <font color ="#ff00ff">FUCHSIA</font> <font color ="#808080">GRAY</font> <font color ="#008000">GREEN</font> <font color ="#00ff00">LIME</font> <font color ="#800000">MAROON</font> <font color ="#000080">NAVY</font> <font color ="#808000">OLIVE</font> <font color ="#800080">PURPLE</font> <font color ="#ff0000">RED</font>
- 26. ตัวอย่างที่ 10 <font color ="#C0C0C0">SILVER</font> <font color ="#008080">TEAL</font> <font color ="#ffffff">WHITE</font> <font color ="#ffff00">YELLOW</font> <b></font> </body> </html>
- 27. การกาหนดสีให้กับพื้นเอกสาร เราสามารถกาหนดสีให้กับพื้นเอกสารได้โดยการกาหนดค่าที่ <body> , </body> <body bgcolor=”n”> , <body> กาหนดสีให้กับพื้นเอกสาร โดยที่ n คือ สีที่ต้องการ
- 29. การกาหนดรูปภาพให้กับพื้นเอกสาร เราสามารถกาหนดรูปภาพให้กับพื้นเอกสารได้ โดยการ กาหนดค่าที่ <body> , </body> <body background=”n”> , <body> กาหนดรูปภาพให้กับพื้นเอกสาร โดยที่ n คือ รูปภาพที่ต้องการ
- 30. ตัวอย่างที่ 11 <html> <head> <title>ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เนตEX</title> </head> <body bgcolor="#abcdef" background="images01.gif"> </body> </html>
- 31. ขอบคุณครับ