งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

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

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "โครงสร้าง ภาษา HTML."— ใบสำเนางานนำเสนอ:

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

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

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

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

8 ตัวอย่าง

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

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

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

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

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

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

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

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

17 <TITLE> Break Line </TITLE> </HEAD> <BODY>
HTML> <HEAD> <TITLE> Break Line </TITLE> </HEAD> <BODY> มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร <BR><BR><BR> วิทยาเขตเทเวศ </BODY> </HTML>

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

19 คำสั่ง <P> คำสั่ง <P> เป็นคำสั่งจัดวางย่อหน้าข้อความ
<body> ข้อความ<P>ข้อความ </body>

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

21 ผลที่ได้จาก คำสั่ง <P>

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

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

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

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

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


ดาวน์โหลด ppt โครงสร้าง ภาษา HTML.

งานนำเสนอที่คล้ายกัน


Ads by Google