1 / 112

HTML

HTML. (Hypertext Markup Language). รูปแบบของ HTML. 1. Text หมายถึงข้อความทั่วไป 2. Tag , Element หรือ คำสั่ง หมายถึงคำสั่งที่ใช้ใน การกำหนดรูปแบบของ Text 3. Attribute หมายถึงตัวเลือกที่คำสั่งของ HTML สามารถใช้ได้. กฏในการใช้งาน HTML.

carney
Download Presentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML (Hypertext Markup Language)

  2. รูปแบบของ HTML 1. Text หมายถึงข้อความทั่วไป2.Tag , Element หรือ คำสั่ง หมายถึงคำสั่งที่ใช้ใน การกำหนดรูปแบบของ Text3.Attribute หมายถึงตัวเลือกที่คำสั่งของ HTML สามารถใช้ได้

  3. กฏในการใช้งาน HTML • แต่ละคำสั่ง จะต้องอยู่ในเครื่องหมาย < และ > เท่านั้น • สามารถใช้ตัวอักษรพิมพ์เล็ก หรือ ใหญ่ ก็ได้เพราะได้ความหมายเหมือนกัน • สามารถพิมพ์เอกสาร HTML จัพิมพ์ติดต่อกัน หรือ พิมพ์แยกบันทัดกันก็ได้

  4. การใส่คำอธิบาย(Comment) การใส่คำอธิบายบางส่วนของ HTML ที่เราเขียนมาเพื่อจะได้สะดวกในการติดตามในภายหลัง Comment จะไม่แสดงผลบน Browser รูปแบบของคำสั่งจะแตกต่างจาก HTML ทั่วไป คือเริ่มต้นด้วยคำสั่ง <!- และ ปิดด้วยคำสั่ง->

  5. เริ่มต้นกับการสร้าง Web Page!!! ในเอกสาร HTML นั้นจะต้องขึ้นต้นด้วยคำสั่ง(Tags.) <HTML> และปิดท้ายด้วย </HTML> ดังนี้<HTML> ……….. </HTML>

  6. ทุกเอกสาร HTML จะต้องมี HEAD tag ซึ่งบอกว่าส่วนนี้เป็น Head ของเอกสารนี้ <HTML><HEAD> …………………... </HEAD></HTML>

  7. ใน HEAD tags เราจะบอกหน้าปัจจุบันของ Home Page ของเราด้วย TITLE tag <HTML><HEAD><TITLE>……………….</TITLE></HEAD></HTML>

  8. ส่วนรายละเอียดของหน้าเอกสารจะอยู่ในส่วนของ BODY tags. ซึ่งจะเป็นส่วนที่อยู่ถัดไปจาก HEAD tags.<HTML><HEAD><TITLE> ……… </TITLE></HEAD><BODY> ……………. </BODY></HTML>

  9. Attribute ของคำสั่ง <BODY>

  10. เริ่มเขียน Page แรกกัน <HTML><HEAD><TITLE>My First Page.</TITLE></HEAD><BODY>Hello.........World.</BODY></HTML>

  11. พิมพ์ข้อความ ทดสอบการแสดงผล <BODY> ทดสอบการแสดงผล</BODY>

  12. เปลี่ยนสีพื้นหลังของหน้าต่างได้โดยใช้คำสั่ง <BODY BGCOLOR="#FF0000"> ทดสอบการแสดงผล </BODY>

  13. ใช้รูปภาพมาเป็น Background ได้ด้วย <BODY BACKGROUND=”bgg.gif"> ทดสอบการแสดงผล </BODY>

  14. กลับสู่หน้าจอสีขาวตามเดิม <BODY BGCOLOR="#FFFFFF"> ทดสอบการแสดงผล </BODY>

  15. การกำหนดหัวข้อด้วย Tag <Hn> รูปแบบ <Hn> ………………… </Hn> n = ค่าของขนาดเป็นตัวเลข เช่น <h1>…….</h1> โดยค่าของ n จะมีค่าตั้งแต่ 1- 6 เรียงจากมากไปน้อย

  16. <h1> ข้อความ </h1> <h2> ข้อความ </h2> <h3> ข้อความ </h3> <h4> ข้อความ </h4> <h5> ข้อความ </h5> <h6> ข้อความ </h6>

  17. การจัดรูปแบบของตัวอักษรการจัดรูปแบบของตัวอักษร

  18. การทำตัวอักษรหนา (Bold) <BODY BGCOLOR="#FFFFFF"> ตัวปกติ <B>ตัวหนา</B></BODY>

  19. การทำตัวอักษรเอียง (Italics)<BODY BGCOLOR="#FFFFFF"> ตัวปกติ <I>ตัวเอียง</I></BODY>

  20. การทำตัวอักษรขีดเส้นใต้ (Underlining)<BODY BGCOLOR="#FFFFFF"> ตัวปกติ <U>ตัวขีดเส้นใต้</U></BODY>

  21. เราสามารถใช้ Tags หลายอย่างปนกันได้ตามต้องการ <BODY BGCOLOR="#FFFFFF"> ตัวปกติ <I><B>ตัวเอียงและหนา</B></I></BODY>

  22. ในการใช้ Tags หลายอันปนกันจะต้องจัดเรียงลำดับโดยตัวที่ใช้ก่อนจะต้องถูกปิดทีหลังและตัวอยู่ทีหลังจะต้องปิดก่อน <ก่อน><หลัง></ก่อน></หลัง> ผิดหลักการ<ก่อน><หลัง></หลัง></ก่อน> ถูกหลักการ

  23. เปลี่ยนขนาดของอักษร(Font) ได้ด้วยวิธีการง่ายๆ อันดับแรกต้องเพิ่ม <FONT> tags... <BODY BGCOLOR="#FFFFFF"> ทดสอบขนาดตัวอักษร <FONT>ขนาด</FONT></BODY> จากนั้นจึงกำหนดค่าของขนาดด้วย SIZE <BODY BGCOLOR="#FFFFFF"> ทดสอบขนาดตัวอักษร<FONT SIZE=6>ขนาด</FONT> </BODY>

  24. ขนาดของอักษรทั้งหมด 7 ขนาด 1-teeny tiny 2-small3-regular4-extra medium5-large 6-real big7-yelling!

  25. การกำหนดชื่อ Font ที่ใช้แสดงผล <BODY BGCOLOR="#FFFFFF"> ทดสอบการแสดงผล <FONT FACE="ARIAL">ARIAL</FONT> </BODY>

  26. เราสามารถที่จะใส่ชื่อ Font มากกว่า 1 ชื่อได้ลงไปใน Tags ของ <FONT> ได้เพื่อที่เราจะใช้ Font ตัวที่สองหรือสามแทนเมื่อ ใน Browser ไม่มี Font ตัวแรกๆ ถ้ารายชื่อ Font ที่เราใส่ไว้ไม่มีเลย Browser จะใช้ Default Font แทน <FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">ชื่อ Font </FONT>

  27. เปลี่ยนสีอักษรเป็นสีที่เราชอบ <BODY BGCOLOR="#FFFFFF"> ทดสอบการแสดงผล <FONT COLOR="#FFOOOO">สีแดง</FONT> </BODY>

  28. เราสามารถใช้หลายๆ ATTRIBUTE ใน <TAG>... <BODY BGCOLOR="#FFFFFF"> ทดสอบการแสดงผล <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">Font</FONT> </BODY>

  29. <BODY BGCOLOR="#FFFFFF"> ทดสอบการแสดงผล <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">Font</FONT></B></I></U> </BODY>

  30. การทำงานของ Browser <BODY BGCOLOR="#FFFFFF"> สวัสดีลองดูซิว่ามีการจัดเรียงบรรทัดเป็นอย่างไร ?</BODY>

  31. จะขึ้นบรรทัดใหม่จะต้องเพิ่ม Tags <BR> ลงไปเพื่อเป็นการบอกให้ขึ้นบรรทัดใหม่ <BODY BGCOLOR="#FFFFFF"> สวัสดี <BR>ลองดูซิ <BR>ว่ามีการจัดเรียงบรรทัด <BR>เป็นอย่างไร ?</BODY>

  32. <BODY BGCOLOR="#FFFFFF"> ทดสอบ การแสดงผล ของ Browser.</BODY>

  33. จะต้องใส่รหัสช่องว่าง(Space) ใช้ &nbsp; <BODY BGCOLOR="#FFFFFF"> ทดสอบ&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;การแสดงผล&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ของ Browser.</BODY>

  34. Special Character ที่มี ; ปิดท้าย &nbsp; ( non-breaking space) &lt; (< less-than symbol) &gt; (> greater-than symbol) &amp; (& ampersand) &quot; (" quotation mark)

  35. การสั่งให้เว้นบรรทัดที่ละหลายๆบรรทัดกัน <BODY BGCOLOR="#FFFFFF"> ทดสอบ <BR>&nbsp;<BR>&nbsp;<BR>&nbsp;<BR>การแสดงผล</BODY>

  36. เรื่องของเส้นกั้น หรือ "Horizontal Rule." <BODY BGCOLOR="#FFFFFF"> <HR></BODY>

  37. การกำหนดความกว้าง WIDTH - กำหนดเป็น % ของ Windows - กำหนดเป็น Pixel ของจอภาพ

  38. <BODY BGCOLOR="#FFFFFF"> <HR WIDTH=20%><HR WIDTH=50%><HR WIDTH=100%><HR WIDTH=20><HR WIDTH=50><HR WIDTH=100></BODY>

  39. การกำหนดตำแหน่งของเส้น <BODY BGCOLOR="#FFFFFF"> <HR WIDTH=60% ALIGN=LEFT> <HR WIDTH=60% ALIGN=RIGHT> <HR WIDTH=60% ALIGN=CENTER> </BODY>

  40. สามารถที่จะกำหนด Thickness... ได้ <BODY BGCOLOR="#FFFFFF"> <HR WIDTH=60% SIZE=1> <HR WIDTH=60% SIZE=3> <HR WIDTH=60% SIZE=8> <HR WIDTH=60% SIZE=15> </BODY>

  41. สามารถกำหนดให้เป็น Solid Line. ได้ด้วย <BODY BGCOLOR="#FFFFFF"> <HR WIDTH=60% SIZE=1 NOSHADE> <HR WIDTH=60% SIZE=3 NOSHADE> <HR WIDTH=60% SIZE=8 NOSHADE> <HR WIDTH=60% SIZE=15 NOSHADE> </BODY>

  42. การจัดเอกสาร ด้วย tag <p> และ <pre> รูปแบบ <p>………..</p> ใช้ในการจัดย่อหน้าของข้อความ รูปแบบ <pre>……………</pre> ใช้ในการรูปแบบของข้อความให้อยู่ในรูปแบบที่พิมพ์

  43. <HTML> <HEAD> <TITLE>Testing Tag</TITLE> </HEAD> <BODY> <p> การเขียนโฮมเพจ<br> ด้วยภาษา html </p> <p> เรื่อง <br> การทดสอบการใช้<br> คำสั่งจัดย่อหน้า </p> </BODY> </HTML> ตัวอย่างการจัดย่อหน้าด้วย <p>

  44. <HTML> <HEAD> <TITLE>Testing Tag</TITLE> </HEAD> <BODY> <p align=center> การเขียนโฮมเพจ<br> ด้วยภาษา html </p> <p align=right> เรื่อง <br> การทดสอบการใช้<br> คำสั่งจัดย่อหน้า </p> </BODY> </HTML> ตัวอย่างการใช้คำสั่ง จัดย่อหน้าและวางตำแหน่ง

  45. <HTML> <HEAD> <TITLE>Testing Tag</TITLE> </HEAD> <BODY> <p > การเขียนโฮมเพจ ด้วยภาษา html </p> <pre > เรื่อง การทดสอบการใช้ คำสั่งจัดย่อหน้า </pre> </BODY> </HTML> ตัวอย่างการจัดรูปแบบข้อความด้วย<pre>

More Related