ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
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>
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>
งานนำเสนอที่คล้ายกัน
