โครงสร้าง ภาษา html
DESCRIPTION
โครงสร้าง ภาษา HTML. โครงสร้างภาษา HTML. ภาษา HTML สามารถสร้างขึ้นได้ จากโปรแกรมสร้างไฟล์ข้อความ (Text Editor) ทั่วๆไป เช่น “ Notepad” สามารถเรียนรู้ได้ง่าย และยังมีขนาดเล็กอีก ด้วย ประเภทของไฟล์ HTML จะเป็นประเภท .html. คำสั่งในภาษา HTML. - PowerPoint PPT PresentationTRANSCRIPT
โครงสร�าง ภาษา HTML
ภาษา HTML สามารถสร�างขึ้��นได้� จากโปรแกรมสร�างไฟล์�ขึ้�อความ (Text Editor) ทั่��วๆไป เช่"น “Notepad” สามารถเร#ยนร%�ได้�ง"าย แล์ะย�งม#ขึ้นาด้เล์'กอ#ก ด้�วย ประเภทั่ขึ้องไฟล์� HTML จะเป(นประเภทั่ .html
โครงสร�างภาษาHTML
ค)าส��งในภาษา HTML
หร,อทั่#� เร#ยก ว"า “Tag” จะเขึ้#ยนอย%"ในเคร,�อง < แล์ะ > Tag จะ แบ่"งได้�อย%" 2 กล์."ม หล์�กๆค,อ1.Tag เด้#�ยว เป(นแทั่'กทั่#�ไมต้�องใช่� เคร,�องหมาย / (Slash) เช่"น <br> , <img>2.Tag ค%" เป(นแทั่'กทั่#�ต้�องใช่�เคร,�องหมาย / (Slash) เช่"น <html>….</html>
โครงสร�างหล์�ก
เป(นร%ปแบ่บ่ มาต้รฐานในการสร�างเว'บ่เพจ ประกอบ่ด้�วยค)าส��งหล์�กอย%" 4 ค)าส��งด้�งน#�
<html>…..</html><head>…..</head><title>…..</title><body>….</body>
<HTML>…..</HTML> เป(นค)าส��งทั่#�บ่อกจ.ด้เร2�มต้�นแล์ะจ.ด้ส2�นส.ด้ขึ้องเว'บ่เพจ
<HEAD>…..</HEAD> เป(นค)าส��งในส"วนห�วเร,�องขึ้องเว'บ่เพจ
<TITLE>…..</TITLE> อย%"ภายใต้�ค)าส��งขึ้อง HEAD ทั่)าหน�าทั่#�ก)าหนด้ขึ้�อความแสด้งบ่น Titlebar สามารถก)าหนด้ ความยาว ได้� 64 ต้�วอ�กษร
ร%ปแบ่บ่การเขึ้#ยนม#ด้�งน#�<HTML><HEAD><TITLE> titlebar </TITLE></HEAD><BODY>
เน,�อหา รายล์ะเอ#ยด้
</BODY></HTML>
ต้�วอย"าง
การประมวล์ผล์จากต้�วอย"างทั่#�1
ค)าส��ง<Title>
ค)าส��ง<body>
ค)าส��งในการก)าหนด้ห�วเร,�อง (Heading)
เป(นการก)าหนด้ห�วเร,�อง จะใช่�ค)าส��ง <H> เพ,�อ ให�ต้�วอ�กษรขึ้นาด้ใหญ่"กว"า ปกต้2เช่"น ช่,�อ บ่ทั่ ช่,�ห�วขึ้�อ เป(นต้�น ซึ่��งค)าส��ง <H> ม# 6 ระด้�บ่โด้ย ระด้�บ่ ทั่#� 1 จะ ม# ขึ้นาด้ต้�วอ�กษร ใหญ่"ทั่#�ส.ด้ส"วน ระด้�บ่ทั่#� 6 จะม# ขึ้นาด้ต้�วอ�กษรเล์'กทั่#�ส.ด้
ร%ปแบ่บ่ขึ้องค)าส��ง <H>
<H1> …... </H><H2> ….. </H><H3> ….. </H><H4> ….. </H><H5> ….. </H><H6> ….. </H>
ต้�วอย"าง<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>
การประมวล์ผล์จากต้�วอย"างทั่#� 2
ผล์ขึ้องค)าส��ง <H1>
ผล์ขึ้องค)าส��ง <H6>
ค)าส��งขึ้��นบ่รรทั่�ด้ใหม" (Line Break)
ในเอกสารทั่��วไป เราจะขึ้��นบ่รรทั่�ด้ใหม" โด้ยการกด้ Enter แต้"ในการสร�างเอกสร�าง HTML เว'บ่บ่ราวเซึ่อร�จะถ,อว"า เป(นการเว�นวรรค 1 ช่"องแล์ะใช่�เป(นจ.ด้ต้�ด้ค)าขึ้��นบ่รรทั่�ด้ใหม"ถ�ายาวเก2นขึ้นาด้บ่รรทั่�ด้ แต้"ถ�าต้�องการให� เอกสารHTML ต้�ด้ขึ้�อความ ณ ต้)าแหน"งทั่#� เราก)าหนด้ จะใช่�ค)าส��ง <BR> โด้ย ม#ร%ปแบ่บ่ด้�งน#�
ค)าส��งย"อหน�าบ่รรทั่�ด้ใหม" <BR>ใช่�ค)าส��งโด้ย<HTML><HEAD><TITLE> Break Line </TITLE></HEAD><BODY>มหาว2ทั่ยาล์�ยเทั่คโนโล์ย#ราช่มงคล์พระนคร <BR> ว2ทั่ยาเขึ้ต้เทั่เวศ</BODY></HTML>
การประมวล์ผล์ต้�วอย"างทั่#� 3
ย2�ง เพ2�ม ค)าส��ง <BR> บ่รรทั่�ด้ย2�งเว�นมากขึ้��น เช่"นHTML>
<HEAD><TITLE> Break Line </TITLE></HEAD><BODY>มหาว2ทั่ยาล์�ยเทั่คโนโล์ย#ราช่มงคล์พระนคร <BR><BR><BR> ว2ทั่ยาเขึ้ต้เทั่เวศ</BODY></HTML>
ผล์ทั่#�ได้�
ผล์ขึ้องค)าส��ง <BR><BR><BR>
ค)าส��ง <P> เป(นค)าส��งจ�ด้วางย"อหน�าขึ้�อความการใช่� ค)าส��ง <P> <body>ขึ้�อความ<P>ขึ้�อความ </body>
ค)าส��ง <P>
HTML><HEAD><TITLE> Break Line </TITLE></HEAD><BODY>มหาว2ทั่ยาล์�ยเทั่คโนโล์ย#ราช่มงคล์พระนคร <P> ว2ทั่ยาเขึ้ต้เทั่เวศ</BODY></HTML>
ต้�วอย"างการใช่� ค)าส��ง <P>
ผล์ทั่#�ได้�จาก ค)าส��ง <P>
ผลคำ��สั่��ง ของ <P>
ค)าส��งเสร2มช่"วยขึ้อง <P>
ค)าส��งเสร2มทั่#�ช่"วยในการจ�ด้ต้)าแหน"งขึ้องย"อหน�า ค,อ Alignment โด้ยม#ร%ปแบ่บ่ด้�งน#�
<P Align=ต้)าแหน"ง>….ขึ้�อความ….</p> ต้)าแหน"งทั่#�ใช่�ในการจ�ด้ย"อหน�าม#ด้�วยก�นสามล์�กษณะ ค,อ
Left จ�ด้ขึ้�อความช่2ด้ซึ่�ายบ่รรทั่�ด้Center จ�ด้ขึ้�อความก��งกล์างบ่รรทั่�ด้Right จ�ด้ขึ้�อความช่2ด้ขึ้วาบ่รรทั่�ด้
ก"อนใช่�ค)าส��ง <P Align=Center>
<HTML><HEAD><TITLE> :: ย2นด้#ต้�อนร�บ่ ::</TITLE></HEAD><BODY>มหาว2ทั่ยาล์�ยเทั่คโนโล์ย#ราช่มงคล์พระนคร ว2ทั่ยาเขึ้ต้เทั่เวศ</BODY></HTML>
ก"อนใช่�ค)าส��ง <P Align=Center>
ต้�วอย"าง การใช่�ค)าส��งHTML><HEAD><TITLE> :: ย2นด้#ต้�อนร�บ่ ::</TITLE></HEAD><BODY><P Align=Center>มหาว2ทั่ยาล์�ยเทั่คโนโล์ย#ราช่มงคล์พระนคร ว2ทั่ยาเขึ้ต้เทั่เวศ</P></BODY></HTML>
ผล์ทั่#�ได้�จากค)าส��ง <P Align=Center>