1 / 26

โครงสร้าง ภาษา HTML

โครงสร้าง ภาษา HTML. โครงสร้างภาษา HTML. ภาษา HTML สามารถสร้างขึ้นได้ จากโปรแกรมสร้างไฟล์ข้อความ (Text Editor) ทั่วๆไป เช่น “ Notepad” สามารถเรียนรู้ได้ง่าย และยังมีขนาดเล็กอีก ด้วย ประเภทของไฟล์ HTML จะเป็นประเภท .html. คำสั่งในภาษา HTML.

kasa
Télécharger la présentation

โครงสร้าง ภาษา 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

  2. โครงสร้างภาษาHTML ภาษา HTMLสามารถสร้างขึ้นได้ จากโปรแกรมสร้างไฟล์ข้อความ (Text Editor) ทั่วๆไป เช่น “Notepad” สามารถเรียนรู้ได้ง่าย และยังมีขนาดเล็กอีก ด้วย ประเภทของไฟล์ HTML จะเป็นประเภท .html

  3. คำสั่งในภาษา HTML หรือที่ เรียก ว่า “Tag” จะเขียนอยู่ในเครื่อง < และ >Tag จะ แบ่งได้อยู่ 2 กลุ่ม หลักๆคือ 1.Tag เดี่ยว เป็นแท็กที่ไมต้องใช้ เครื่องหมาย /(Slash) เช่น <br> , <img> 2.Tag คู่ เป็นแท็กที่ต้องใช้เครื่องหมาย / (Slash) เช่น <html>….</html>

  4. โครงสร้างหลัก เป็นรูปแบบ มาตรฐานในการสร้างเว็บเพจ ประกอบด้วยคำสั่งหลักอยู่ 4 คำสั่ง ดังนี้ <html>…..</html> <head>…..</head> <title>…..</title> <body>….</body>

  5. <HTML>…..</HTML> เป็นคำสั่งที่บอกจุดเริ่มต้นและจุดสิ้นสุดของเว็บเพจ <HEAD>…..</HEAD> เป็นคำสั่งในส่วนหัวเรื่องของเว็บเพจ <TITLE>…..</TITLE> อยู่ภายใต้คำสั่งของ HEAD ทำหน้าที่ กำหนดข้อความแสดงบน Titlebar สามารถกำหนด ความยาว ได้ 64 ตัวอักษร

  6. รูปแบบการเขียนมีดังนี้รูปแบบการเขียนมีดังนี้ <HTML> <HEAD> <TITLE> titlebar </TITLE> </HEAD> <BODY> เนื้อหา รายละเอียด </BODY> </HTML>

  7. ตัวอย่าง

  8. การประมวลผลจากตัวอย่างที่1การประมวลผลจากตัวอย่างที่1 คำสั่ง <Title> คำสั่ง <body>

  9. คำสั่งในการกำหนดหัวเรื่อง (Heading) เป็นการกำหนดหัวเรื่อง จะใช้คำสั่ง <H> เพื่อ ให้ตัวอักษรขนาดใหญ่กว่า ปกติ เช่น ชื่อ บท ชื่หัวข้อ เป็นต้น ซึ่งคำสั่ง <H> มี 6 ระดับ โดย ระดับ ที่ 1 จะ มี ขนาดตัวอักษร ใหญ่ที่สุด ส่วน ระดับที่ 6 จะมี ขนาดตัวอักษรเล็กที่สุด

  10. รูปแบบของคำสั่ง <H> <H1> …... </H> <H2> ….. </H> <H3> ….. </H> <H4> ….. </H> <H5> ….. </H> <H6> ….. </H>

  11. ตัวอย่าง <HTML> <HEAD> <Title>Heading</Title> </HEAD> <H1> Heading </H> <H2> Heading </H> <H3> Heading </H> <H4> Heading </H> <H5> Heading </H> <H6> Heading </H> </HTML>

  12. การประมวลผลจากตัวอย่างที่ 2 ผลของคำสั่ง <H1> ผลของคำสั่ง <H6>

  13. คำสั่งขึ้นบรรทัดใหม่ (Line Break) ในเอกสารทั่วไป เราจะขึ้นบรรทัดใหม่ โดยการกด Enter แต่ในการสร้างเอกสร้าง HTML เว็บบราวเซอร์จะถือว่า เป็นการเว้นวรรค 1 ช่องและใช้เป็นจุดตัดคำขึ้นบรรทัดใหม่ถ้ายาวเกินขนาดบรรทัด แต่ถ้าต้องการให้ เอกสารHTML ตัดข้อความ ณ ตำแหน่งที่ เรากำหนด จะใช้คำสั่ง <BR> โดย มีรูปแบบดังนี้

  14. คำสั่งย่อหน้าบรรทัดใหม่ <BR> ใช้คำสั่งโดย <HTML> <HEAD> <TITLE> Break Line </TITLE> </HEAD> <BODY> มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร <BR> วิทยาเขตเทเวศ </BODY> </HTML>

  15. การประมวลผลตัวอย่างที่ 3

  16. ยิ่ง เพิ่ม คำสั่ง <BR> บรรทัดยิ่งเว้นมากขึ้น เช่น HTML> <HEAD> <TITLE> Break Line </TITLE> </HEAD> <BODY> มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร <BR><BR><BR>วิทยาเขตเทเวศ </BODY> </HTML>

  17. ผลที่ได้ ผลของคำสั่ง <BR><BR><BR>

  18. คำสั่ง <P> คำสั่ง <P>เป็นคำสั่งจัดวางย่อหน้าข้อความ การใช้ คำสั่ง <P> <body> ข้อความ<P>ข้อความ </body>

  19. ตัวอย่างการใช้ คำสั่ง <P> HTML> <HEAD> <TITLE> Break Line </TITLE> </HEAD> <BODY> มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร<P>วิทยาเขตเทเวศ </BODY> </HTML>

  20. ผลที่ได้จาก คำสั่ง <P> ผลคำสั่ง ของ <P>

  21. คำสั่งเสริมช่วยของ <P> คำสั่งเสริมที่ช่วยในการจัดตำแหน่งของย่อหน้า คือ Alignment โดยมีรูปแบบดังนี้ <P Align=ตำแหน่ง>….ข้อความ….</p> ตำแหน่งที่ใช้ในการจัดย่อหน้า มีด้วยกันสามลักษณะ คือ Left จัดข้อความชิดซ้ายบรรทัด Center จัดข้อความกึ่งกลางบรรทัด Right จัดข้อความชิดขวาบรรทัด

  22. ก่อนใช้คำสั่ง <P Align=Center> <HTML> <HEAD> <TITLE> :: ยินดีต้อนรับ ::</TITLE> </HEAD> <BODY> มหาวิทยาลัยเทคโนโลยีราชมงคลพระนครวิทยาเขตเทเวศ</BODY> </HTML>

  23. ก่อนใช้คำสั่ง <P Align=Center>

  24. ตัวอย่าง การใช้คำสั่ง HTML> <HEAD> <TITLE> :: ยินดีต้อนรับ ::</TITLE> </HEAD> <BODY> <P Align=Center>มหาวิทยาลัยเทคโนโลยีราชมงคลพระนครวิทยาเขตเทเวศ</P> </BODY> </HTML>

  25. ผลที่ได้จากคำสั่ง <P Align=Center>

More Related