Page 1

บทที่ 2 โครงสร้ างและรู ปแบบภาษา รหัสวิชา : 2201 - 2414

1


เรื่องทีจ่ ะศึกษา 1. แท็กของภาษา HTML 2. โครงสร้างของภาษา HTML 3. การกาหนดแอตทริ บิวต์ 4. การขึ้นบรรทัดใหม่ 5. การจัดตาแหน่งของข้อความ 6. การย่อหน้าและการเยื้อง 7. การทาเส้นคัน่ แนวนอน 8. การกาหนดให้ขอ้ ความอยูบ่ รรทัดเดียวกัน 9. การจัดเอกสารโดยใช้แท็ก < PRE> ….. < /PRE>

2


1. แท็กของภาษา HTML คาสั่งที่ใช้ภาษา HTML จะถูกเรี ยกว่า “แท็ก” ซึ่ งใช้ควบคุมการทางานของ โปรแกรม คาสั่ งแท็กเปิ ดคือเครื่องหมายน้ อยกว่ าและมากกว่ าประกอบกัน “< >” เป็ นคาสั่ งที่ ใช้ ในการเริ่มเขียนโปรแกรมภาษา HTML ส่ วนการปิ ดแท็กจะใช้ เครื่องหมายน้ อยกว่ าตามด้ วยสแล็ทและเครื่องหมาย มากกว่ า “< / >” ใช้ ในการจบคาสั่ งของภาษา HTML <HTML> ………………… ………………… </HTML> 3


1. แท็กของภาษา HTML ( ต่ อ ) แท็กของภาษา HTML แบ่ งได้ เป็ น 2 ลักษณะ คือ 1. แท็กเปิ ด <คาสั่ ง> ทีต่ ้ องใช้ คู่กบั แท็กปิ ด </คาสั่ ง> มีอยู่หลาย คาสั่ ง ตัวอย่าง เช่ น ใช้ กาหนดแบบขนาด สี ของตัวอักษร เป็ นต้ น

2. ส่ วนแท็กเปิ ดอย่างเดียวไม่ ตนั้ อกงปิศึดกษาคิ <คาสัด ่ ง>ว่ตัาวมีอย่ แท็างกเช่คนาสัการ่ ง กาหนดเส้ น การวางรู ปภาพ

ใดบ้ างที่ใช้ แท็กเปิ ดอย่ าง เดียวไม่ ต้องมีแท็กปิ ด ?????

4


2. โครงสร้ างของภาษา HTML โครงสร้ างของภาษา HTML ประกอบด้ วย 2 ส่ วนสาคัญ คือ 1. ส่ วนหัวของโปรแกรม ( HEADER FILE ) 2. ตัวโปแกรม ( BODY ) การเริ่ มต้นเขียนโปรแกรมจะต้องเริ่ มด้วยแท็ก <HTML> และปิ ด ท้ายด้วย </HTML> เสมอ แท็กคู่น้ ีจะแสดงให้ทราบว่าเป็ นไฟล์ HTML ให้ เว็บบราวเซอร์ แปลความหมายตามที่ได้รับการกาหนดที่เขียนไว้บนสุ ดและ ล่างสุ ดของโปรแกรม

5


2. โครงสร้ างของภาษา HTML ( ต่ อ ) แสดงโครงสร้ างของภาษา HTML

<HTML> <HEAD> <TITLE>ชื่อโปรแกรมที่ต้องการแสดง</TITLE> </HEAD> <BODY> คาสั่ งหรือข้ อความที่ต้องการแสดง </BODY> </HTML> 6

แท็กเปิ ด 1. HEADER

2. BODY แท็กปิ ด


2. โครงสร้ างของภาษา HTML ( ต่ อ ) <HTML>….. </HTML>

แสดงให้ ทราบว่ าเป็ นเอกสาร HTML ให้ เว็บบราวเซอร์ แปล ความหมายตามทีไ่ ด้ รับการกาหนดวางไว้ บนสุ ดและท้ ายสุ ดของหน้ า

<HEAD>… …..</HEAD>

เป็ นส่ วนหัวของเอกสาร แสดงให้ ทราบถึงรายละเอียดของหน้ า เว็บเพจ

<TITLE>….. </ TITLE>

แสดงชื่อของเว็บเพจหรือส่ วนทีต่ ้ องการให้ แสดงบนเว็บบราวเซอร์

<BODY>… …..</BODY> ส่ วนทีพ่ มิ พ์เนือ้ หาของโปรแกรมที่ต้องการให้ แสดงบนเว็บบราวเซอร์ 7


2. โครงสร้ างของภาษา HTML ( ต่ อ ) ตัวอย่างที่ 2.1

<HTML> <HEAD> <TITLE>การเขียนโปรแกรมภาษาHTML</TITLE> </HEAD> <BODY> โครงสร้ างของภาษา HTML </BODY> </HTML> 8


2. โครงสร้ างของภาษา HTML ( ต่ อ ) การกาหนดขนาดตัวอักษรหัวเรื่อง จะใช้แท็กคาสัง่ <H1>…..</H1> โครงสร้ างของภาษา HTML <H2>…..</H2> โครงสร้างของภาษา HTML <H3>…..</H3> โครงสร้างของภาษา HTML <H4>…..</H4> โครงสร้างของภาษา HTML <H5>…..</H5> โครงสร้างของภาษา HTML

9


2. โครงสร้ างของภาษา HTML ( ต่ อ ) ตัวอย่างที่ 2.2 <HTML> <HEAD> TITLE>การเขียนโปรแกรมภาษาHTML</TITLE> </HEAD> <BODY> <H1>โครงสร้ างของภาษา HTML</H1> <H2>โครงสร้ างของภาษา HTML</H2> <H3>โครงสร้ างของภาษา HTML</H3> <H4>โครงสร้ างของภาษา HTML</H4> <H5>โครงสร้ างของภาษา HTML</H5> </BODY> </HTML> 10


3. การกาหนดแอตทริบิวต์ แอตทริบิวต์ ( ATTRIBUTE ) คือ คุณสมบัติหรื อลักษณะของแท็ก เช่น สี ตวั อักษร สี ของพิน้ หลัง การจัดระยะข้อความ โดยมีรูปแบบการกาหนดดังนี้ < ELEMENT ATTRIBUTE = VALUE > ELEMENT ATTRIBUTE VALUE

11

ส่ วนที่บอกชื่อแท็ก ที่ใช้บ่อย ๆ เช่น แท็ก BODY คือ ชื่อคุณสมบัติที่ตอ้ งการ เช่น สี ตวั อักษร สี พ้นื หลัง เป็ นต้น ค่าที่ตอ้ งการ


3. การกาหนดแอตทริบิวต์ ( ต่ อ ) 3.1 แอตทริบิวต์ สาหรับกาหนดพืน้ หลัง

แอตทริบิวต์ ที่ใช้ในการกาหนดพื้นหลัง คือ “BGCOLOR” โดยมีวิธีการ กาหนดตามรู ปแบบของการกาหนดแอตทริ บิวต์ BGCOLOR = “ชื่อสี ” หรื อ BGCOLOR = “#ค่ าสี รูปแบบเลขฐาน16” <BODY BGCOLOR = “CYAN”> กาหนดสี พ้นื หลังเป็ นสี ฟ้าโดยกาหนดเป็ นชื่อของสี <BODY BGCOLOR = “#00FFFF”> กาหนดสี พ้นื หลังเป็ นสี ฟ้าโดยกาหนดเป็ นเลขฐาน 16 <BODY BACKGROUND = “Apple.jpg”> กาหนดสี พ้นื เป็ นรู ปภาพ

12


3. การกาหนดแอตทริบิวต์ ( ต่ อ ) ตัวอย่างที่ 2.3 การกาหนดสีพนหลั ื้ ง

<HTML> <HEAD> <TITLE>การเขียนโปรแกรมภาษาHTML</TITLE> </HEAD> <BODY BGCOLOR = CYAN> <H2>โครงสร้ างของภาษา HTML</H2> </BODY> </HTML> 13


3. การกาหนดแอตทริบิวต์ ( ต่ อ ) ตัวอย่างที่ 2.4 การกาหนดพื้ นหลังเป็ นรูปภาพ

<HTML> <HEAD> <TITLE>การเขียนโปรแกรมภาษาHTML</TITLE> </HEAD> <BODY BACKGROND = sonic.gif > <H1>โครงสร้ างของภาษา HTML</H1> </BODY> ในกรณีทใี่ ช้ รูปภาพเป็ นพืน้ หลัง จะต้ องทาการสาเนาไฟล์ รูปภาพมาเก็บไว้ ใน </HTML> โฟลเดอร์ เดียวกับไฟล์ .html ด้ วยมิเช่ นนั้นจะไม่ สามารถใช้ งานได้

14


3. การกาหนดแอตทริบิวต์ ( ต่ อ ) 3.2 แอตทริบิวต์ สาหรับกาหนดสี ตัวอักษร

แอตทริบิวต์ นี้มีไว้สาหรับการกาหนดสี ตวั อักษรทั้งหมดบนเว็บเพจ ยกเว้นแต่จะระบุเป็ นสี อื่นด้วยแท็ก <FONT> ดังตัวอย่างต่อไปนี้ <BODY TEXT = “BLUE”> <BODY TEXT = “#00FFFF”>

15

กาหนดสี ตวั อักษรเป็ นสี ฟ้าโดยกาหนดเป็ นชื่อของสี กาหนดสี ตวั อักษรเป็ นสี ฟ้าโดยกาหนดเป็ นเลขฐาน 16


3. การกาหนดแอตทริบิวต์ ( ต่ อ ) ตัวอย่างที่ 2.5 การกาหนดสีตวั อักษร

<HTML> <HEAD> <TITLE>การเขียนโปรแกรมภาษาHTML</TITLE> </HEAD> <BODY TEXT = BLUE> <H2>โครงสร้ างของภาษา HTML</H2> </BODY> </HTML> 16


3. การกาหนดแอตทริบิวต์ ( ต่ อ ) 3.3 แอตทริบิวต์ TOPMARGIN และ LEFTMARGIN

เราสามารถกาหนดการเว้นระยะจากขอบบนและขอบซ้ายได้ตามต้องการ โดยทาการกาหนดแอตทริ บิวต์ TOPMARGIN และ LEFTMARGIN แต่ถา้ เราไม่ กาหนดโปรแกรมจะเว้นด้านซ้ายและด้านบนอย่างละ 10 พิกเซล แอตทริบิวต์ การกาหนดระยะห่ างจากขอบ จะมีรูปแบบดังนี้ <BODY TOPMARGIN = “0” LEFTMARGIN = “0”>

17


3. การกาหนดแอตทริบิวต์ ( ต่ อ ) ตัวอย่างที่ 2.6 การระยะห่างจากขอบ

<HTML> <HEAD> <TITLE>การเขียนโปรแกรมภาษาHTML</TITLE> </HEAD> <BODY TOPMARGIN =“0” LEFTMARGIN =“0”> เราสามารถกาหนดการเว้ นระยะจากขอบบนและซ้ ายได้ ตามต้ องการโดย ทาการกาหนดค่ าของแอตทริบิวต์ แต่ ถ้าเราไม่ ได้ กาหนดจะทาการเว้ น ระยะให้ โดยอัตโนมัติ คือ 10 พิกเซล </BODY> </HTML> 18


4. การขึน้ บรรทัดใหม่ คาสัง่ ที่ใช้ในการขึ้นบรรทัดใหม่มีดงั นี้คือ <BR>, <P>, <P>&nbsp;</P> แต่ ละคาสั่ง หมายถึง <BR> เป็ นคาสั่งให้ขอ้ ความขึ้นบรรทัดใหม่ <P> เป็ นคาสัง่ ให้ขอ้ ความขึ้นบรรทัดใหม่และเว้นอีก 1 บรรทัด <P>&nbsp;</P> เป็ นคาสั่งให้ขอ้ ความขึ้นบรรทัดใหม่และเว้นอีกหลายบรรทัด

19


4. การขึน้ บรรทัดใหม่ ( ต่ อ ) ตัวอย่างที่ 2.7 การขึ้ นบรรทัดใหม่ <HTML> <HEAD> <TITLE>การเขียนโปรแกรมภาษาHTML</TITLE> </HEAD> <BODY> BR เป็ นคาสั่ งให้ ข้อความขึน้ บรรทัดใหม่ <BR> P เป็ นคาสั่ งให้ ข้อความขึน้ บรรทัดใหม่ และเว้ นอีก 1 บรรทัด <P> nbsp; เป็ นคาสั่ งให้ ข้อความขึน้ บรรทัดใหม่ และเว้ นอีกหลายบรรทัด <P>&nbsp;</P> บรรทัดนีอ้ ยู่ห่างจากบรรทัดอืน่ เพราะว่ าคาสั่ ง nbsp; </BODY> </HTML> 20


5. การจัดตาแหน่ งข้ อความ การจัดตาแหน่งข้อความสามารถกาหนดได้โดยแท็ก <P> หรื อ <DIV> ร่ วมกับแอตทริ บิต์ ALIGN ให้ขอ้ ความปรากฏในตาแหน่งชิดซ้าย ชิดขวา หรื อตรง กลาง ดังตัวอย่างต่อไปนี้ <P ALIGN=“CENTER”> จัดตาแหน่งข้อความกึ่งกลาง </P> <P ALIGN=“LEFT”> จัดตาแหน่งข้อความชิดซ้าย </P> <P ALIGN=“RIGHT”> จัดตาแหน่งข้อความชิดขวา </P> <DIV ALIGN=“CENTER”> จัดตาแหน่งข้อความกึ่งกลาง </DIV> <DIV ALIGN=“LEFT”> จัดตาแหน่งข้อความชิดซ้าย </DIV> การใช้<DIV แท็ก <P> หรื อ <DIV> มีความแตกต่ เฉพาะเรืด่ขวา องของระยะห่ ALIGN=“RIGHT”> จัดตาแหน่างงกัข้อนความชิ </DIV> างของบรรทัด เท่านั้น กรณี ที่ใช้แท็ก <P> จะมีการเว้นระยะบรรทัดห่ างมากกว่าการใช้แท็ก <DIV> 21


5. การจัดตาแหน่ งข้ อความ ( ต่ อ ) ตัวอย่างที่ 2.8 การจัดตาแหน่งข้อความ <HTML> <HEAD> <TITLE>การเขียนโปรแกรมภาษาHTML</TITLE> </HEAD> <BODY>

<P ALIGN=“CENTER”> จัดตาแหน่ งข้ อความกึง่ กลาง </P> <DIV ALIGN=“LEFT”> จัดตาแหน่ งข้ อความชิดซ้ าย </DIV> <P ALIGN=“RIGHT”> จัดตาแหน่ งข้ อความชิดขวา </P> ไม่ ได้ จัดตาแหน่ งข้ อความ </BODY> </HTML> 22


6. การย่ อหน้ าและการเยือ้ ง การย่อหน้าจะใช้แท็ก <DD> ส่ วนการเยื้องจะใช้แท็ก <BLOCKQUOTE> ตัวอย่างที่ 2.9 การย่อหน้าและการเยื้ อง <HTML> <HEAD> <TITLE>การเขียนโปรแกรมภาษาHTML</TITLE> </HEAD> <BODY> <BLOCKQUOTE><DD>ตัวอย่ างต่ อไปนี้ เป็ นการแสดงการพิมพ์แล้ วมีการย่ อหน้ าเพือ่ ความ สวยงามโดยการใช้ แท็ก DD ในการย่ อหน้ าและมีการใช้ แท็ก BLOCKQUOTE ในการทาการเยือ้ ง </BLOCKQUOTE></DD> </BODY> </HTML> 23


7. การทาเส้ นคัน่ แนวนอน การทาเส้นคัน่ แนวนอนจะใช้แท็ก <HR> เป็ นตัวควบคุมให้แสดงผลต่างๆ ตามต้องการ แบ่งออกเป็ น 2 ส่ วนหลัก ได้แก่ 1. การทาเส้นแนวนอน โดยไม่ใช้ แอตทริ บิวต์ 2. การทาเส้นคัน่ แนวนอน โดยใช้ แอตทริ บิวต์

ตัวอย่าง แท็กคาสั่ งโดยใช้ แอตทริบิวต์ และไม่ ใช้ แอตทริบิวต์ นาย มานะ รักเรี ยน <HR> นาย มานะ รักเรี ยน <HR SIZE = “3PX”> นาย มานะ รักเรี ยน <HR WIDTH =“50%”> 24


7. การทาเส้ นคัน่ แนวนอน ( ต่ อ ) ตัวอย่างที่ 2.10 การทาเส้นคัน่ แนวนอน <HTML> <HEAD> <TITLE>การเขียนโปรแกรมภาษาHTML</TITLE> </HEAD> <BODY> การทาเส้ นคัน่ โดยไม่ ใช้ แอตทริบวิ ต์ <HR> การทาเส้ นคัน่ แนวนอนกาหนดความหนาด้ วยแอตทริบวิ ต์ SIZE = “10PX”<HR SIZE =“10PX”> การทาเส้ นคัน่ แนวนอนกาหนดความกว้ างด้ วยแอตทริบวิ ต์ WIDTH =“50PX”<HR WIDTH = “50%”> </BODY> </HTML> 25


8. การกาหนดให้ ข้อความอยู่บรรทัดเดียวกัน การกาหนดให้ขอ้ ความอยูบ่ รรทัดเดียวกันสามารถกาหนดด้วยแท็ก <NOBR>…..</NOBR> โดยมีจุดประสงค์เพื่อให้ขอ้ ความต่อเนื่องและได้ ใจความสมบูรณ์ สามารถกาหนดได้ดงั ต่อไปนี้ ตัวอย่างที่ 2.11 การทาเส้นคัน่ แนวนอน <HTML> <HEAD><TITLE>การเขียนโปรแกรมภาษาHTML</TITLE> </HEAD> <BODY> <DD>การกาหนดให้ ข้อความอยู่บรรทัดเดียวกัน<NOBR>ต้ องใช้ แท็ก NOBR เพือ่ ให้ ข้อความ ต่ อเนื่อง </NOBR> ได้ ใจความสมบูรณ์ เพราะฉะนั้นจะทาให้ ไม่ มปี ัญหาเรื่องความสมบูรณ์ ของ ข้ อความ </BODY> </HTML> 26


9. การจัดเอกสารด้ วยแท็ก <PRE>…..</PRE> การจัดเอกสารโดยใช้แท็ก <PRE>…..</PRE> ตัวอักษรจะเล็กลง มาหนึ่งระดับแต่เราสามารถเว้นวรรค <!-วรรค-> ได้มากกว่าหนึ่งครั้งและ ข้อความจะไม่อยูร่ ่ วมบรรทัดเดียวกับแท็กอื่นการใส่ เครื่ องหมายตกใจแล้ว ตามด้วยข้อความ ถือ เป็ นการ Comment <!-หมายเหตุ->

27


9. การจัดเอกสารด้ วยแท็ก <PRE>…..</PRE> ( ต่ อ ) ตัวอย่างที่ 2.12 การจัดเอกสารด้ วยแท็ก <PRE>…..</PRE> <HTML> <HEAD> <TITLE>การเขียนโปรแกรมภาษาHTML</TITLE> </HEAD> <BODY> การจัดเอกสารโดยใช้ แท็ก PRE <PRE> ตัวอักษรจะเล็กลงมาหนึ่งระดับแต่ เรา สามารถเว้ นวรรค <!-วรรค-> ได้ มากกว่ าหนึ่งครั้ง </PRE> ส่ วนการใส่ เครื่องหมาย ตกใจแล้ วตามด้ วยข้ อความเป็ นการ Comment <!-หมายเหตุ-> หรือหมายเหตุเพือ่ กัน ลืมเวลาแก้ ไขโปรแกรมในภายหลัง </BODY> </HTML> 28


สรุป คาสั่งที่ใช้ในภาษา HTML จะถูกเรี ยกว่า “แท็ก” ซึ่ งใช้ควบคุมการทางานของ โปรแกรม แท็กเปิ ด < > , แท็กปิ ด < / > โครงสร้างและรู ปแบบของภาษา HTML จะใช้แท็กเปิ ดและแท็กปิ ดในการควบคุม โปรแกรม โครงสร้างของภาษา HTML ประกอบด้วย 2 ส่ วนสาคัญ คือ 1. ส่ วนหัวของ โปรแกรม (HEADER FILE) 2. ส่ วนของตัวโปรแกรม (BODY) แอตทริ บิวต์ คือ คุณสมบัติหรื อลักษณะของแท็ก เช่น ตัวอักษร สี ของตัวอักษรและ ลิงค์ สี ของพื้นหลัง การจัดระยะข้อความ การขึ้นบรรทัดใหม่จะใช้แท็กคาสั่ง <BR> การทาเส้นคัน่ แนวนอนจะใช้แท็กคาสั่ง <HR> 29


30

lesson2  

Structure and Language

Read more
Read more
Similar to
Popular now
Just for you