Transcript PPT file

HTML
้
1. รู ปแบบพืนฐานของ
เอชทีเอ็ม
แอล
What is HTML?
• HTML ย่อมาจาก Hypertext Markup Language
่ ในการเขียน Web Page
• HTML เป็ นภาษาทีใช้
• ซงึ่ สามารถสร ้างให ้แสดงผลให ้อยูใ่ นรูปของ
ตัวอักษร ภาพนิง่
ี ง และยังสามารถเชอ
ื่ มโยง
• ภาพเคลือ
่ นไหว เสย
ไปยังเว็บไซต์
• อืน
่ ๆในระบบ Internet
• เอกสาร HTML สามารถตัง้ นามสกุลเป็ น .htm
หรือ .html
การสร ้างเอกสาร HTML
• การสร ้างเอกสาร HTML ประกอบไปด ้วย
โปรแกรม 2 สว่ น
1. Text Editor
้
• เป็ นโปรแกรมทีใ่ ชในการเขี
ยนภาษา HTML เพือ
่
สร ้าง Web Page
่ Note Pad
• ตัวอย่า่ งเชน
2. Web browser
้ ยกเอกสาร HTML ออกมา
• เป็ นโปรแกรมทีใ่ ชเรี
แสดงผลบนจอภาพ
• ในระบบ Internet
การเขียนภาษา HTML
• การเขียนภาษา HTML ประกอบด ้วย 2 สว่ น คือ
่
1. ส่วนของคาสัง่ เขียนอยู ่ภายในเครืองหมาย
<
> เรียกว่า Tag เช่น <br>
่ องการ
2. ส่วนของข้อความทีต้
่
การเขียนภาษา HTML (ต่อ)
Tag มี 2 แบบ
่ Tag ทีมี
่ คาสังเดี
่ ยว สามารถใช้งาน
• 1. Tag เดียว
่
่ <br>
คาสังได้
ณ ตาแหน่ งที่ เราระบุ เชน
่ 2 ส่วน คือ Tag เปิ ด และ Tag
• 2. Tag คู ่ Tag ทีมี
ปิ ด
โดย Tag ปิ ดมีรป
ู แบบเหมือน Tag เปิ ด แต่ม ี
เครือ
่ งหมาย / นาหน้า
่ าสัง>
่ ข้อความทีต้
่ องการแสดง </ชือ
่
<ชือค
่
คาสัง>
่
เชน
่
โครงสร ้างภาษา HTML
• ในการเขียนภาษา HTML 1 หน้า จะต้องประกอบไปด้วย
่
คาสังหลั
กอยู ่ 4 คาสัง่
่ ท
่ าหน้าทีบอก
่
1. <HTML>…</HTML> เป็ นคาสังที
่ น และจุดสินสุ
้ ด ของเอกสาร HTML
จุดเริมต้
่ ท
่ าหน้าทีก
่ าหนดส่วน
2. <HEAD>…</HEAD> เป็ นคาสังที
่
หัวเรือง
่ ก
่ าหนดข้อความที่
3. <TITLE>…<TITLE> เป็ นคาสังที
ต้องการ แสดงผล
ื่ เรือ
บนแถบชอ
่ ง
่ ท
่ าหน้าทีก
่ าหนด
4. <BODY>…</BODY> เป็ นคาสังที
ข้อความและรู ปแบบ
คาสงั่ ใดๆ ทีต
่ ้องการปรับแต่งเอกสารบนสว่ นของจอภาพ
รู ปแบบมาตรฐานในการเขียนเว็บ
เพจ
่ ใช้
่ ในการกาหนดเอกสาร
คาาสังที
• การกาหนดหัวเรือ
่ ง (Heading Tag หรือ <Hn>)
• รูปแบบ <Hn ALIGN=“ตาแหน่ งการจัดวาง”>
่ </Hn>
ข้อความหัวเรือง
• โดยที่ n เป็ นหมายเลขกาหนดระดับของหัว
่ มีคา
้ั
เรือง
่ ตงแต
1 ถึง 6
่
<H1>…</H1> หัวเรืองมี
ขนาดใหญ่ทสุ
ี่ ด
่
<H4>…</H4> หัวเรืองมี
ขนาดปกติ
่
่ ด
<H6>…</H6> หัวเรืองมี
ขนาดเล็กทีสุ
่ <Hn> (ต่อ)
การกาหนดหัวเรือง
่
• ALIGN การกาหนดตาแหน่ งการจัดวางหัวเรือง
– left กาหนดการจัดวางชิดซ ้ายของบรรทัด (ค่า
ปกติ)
่
– center กาหนดการจัดวางกึงกลางของบรรทั
ด
– right กาาหนดการจัดวางชิดขวาของบรรทัด
การขีดเส้นแนวนอน <HR>
(Horizontal line)
• <HR SIZE=“ความหนาของเส้น”
WIDTH=“ความยาวของเส้น”
ALIGN=“ตาแหน่ งการวาง”
COLOR=“สีของเส้น” NOSHADE>
• SIZE เป็ นการกาหนดความหนาให้ก ับเส้น มี
หน่ วยเป็ นพิกเซล
• WIDTH เป็ นการกาหนดความยาวให้ก ับเส้น
สามารถกาหนดเป็ นเปอร ์เซ็นต ์ หรือ พิกเซล
ถ้าไม่ระบุต ัวเลขใดๆ จะได้ความยาวเต็ม
จอภาพ
การขีดเส้นแนวนอน <HR>
่
(Horizontal line) (ต่อ)
• ALIGN การกาหนดตาแหน่ งการจัดวางของเส้น
left กาหนดการจัดวางชิดซ ้ายของบรรทัด
่
center กาหนดการจัดวางกึงกลางของบรรทั
ด
right กาาหนดการจัดวางชิดขวาของบรรทัด
COLOR สีของเส้น
• สามารถกาหนดสีมาตรฐาน และสีจากรหัสเลข
ฐาน 16
• เช่น สีดา สีมาตรฐานคือ BLACK
• สีจากเลขฐาน 16 คือ #000000
• NOSHADE เป็ นการกาหนดแสดงเส้นทึบไม่มก
ี าร
แรเงาของเส้น
่ นบรรทั
้
คาสังขึ
ดใหม่่ <BR> (Break)
้
• คาสัง่ <BR> เป็ นการกาหนดจุดขึนบรรทั
ดใหม่
รู ปแบบ: ข้อความ<BR>
่
คาสังควบคุ
มการแสดงผลข้อความ
<NOBR>
(No Break)
่ ควบคุ
้
• คาสังนี
มการแสดงผลข้อความใน web
browser เป็ นบรรทัดเดียวโดยไม่มก
ี ารตัด
่ อความจะยาว
ข้อความให้ขนบรรทั
ึ้
ดใหม่ ซึงข้
เกินหน้าต่างของ web browser ผู ใ้ ช้สามารถ
้้
่
ใช้ Scroll Bar ในการเรียกดู ขอความที
ยาวเกิ
น
จากหน้าต่างได้้
• รู ปแบบ: <NOBR>ข้อความ</NOBR>
การกาหนดย่อหน้า <P>
(Paragraph)
• <P ALIGN=“ตาแหน่ งการวาง”> ข้อความ </P>
ALIGN การกาหนดตาแหน่ งการจัดวางย่อหน้า
– left กาหนดการจัดวางชิดซ ้ายของบรรทัด
่
– center กาหนดการจัดวางกึงกลางของบรรทั
ด
– right กาหนดการจัดวางชิดขวาของบรรทัด
่
การจัดวางข้อ ความกึงกลาง
บรรทัด <CENTER>
่ ใช้
่ ในการจัดวาง
• คาสัง่ <CENTER> เป็ นคาสังที
่ ให้
ไม่วา
่ เป็ นข้อความ รู ปภาพ ตาราง และอืนๆ
อยู ่กงกลางขอจอภาพ
ึ่
– รู ปแบบ <CENTER> ข้อความ </CENTER>
การจัดรู ปแบบเอกสารตามทีผูใ้ ช้
กาหนด<PRE>
่ ใช้
้ ในการกาหนดการแสดงข้อความ
• คาสังนี
่
และ ช่องว่างในเอกสารโดยทีบราวเซอร
์จะ
่
แสดงผลตามตาแหน่ งทีเราจัดวางไว้
ทเอกสาร
ี่
ต้นฉบับ (Source Document)
• รู ปแบบ <PRE> ข้อความ </ PRE >