PPT file

Report
HTML
1. รูปแบบพืน้ ฐานของ เอชทีเอ็มแอล
What is HTML?
•
•
•
•
•
•
HTML ย่ อมาจาก Hypertext Markup Language
HTML เป็ นภาษาที่ใช้ ในการเขียน Web Page
ซึง่ สามารถสร้ างให้ แสดงผลให้ อยูใ่ นรูปของตัวอักษร ภาพนิ่ง
ภาพเคลื่อนไหว เสียง และยังสามารถเชื่อมโยงไปยังเว็บไซต์
อื่นๆในระบบ Internet
เอกสาร HTML สามารถตังนามสกุ
้
ลเป็ น .htm หรือ .html
การสร้ างเอกสาร HTML
• การสร้ างเอกสาร HTML ประกอบไปด้ วยโปรแกรม 2 ส่วน
1. Text Editor
• เป็ นโปรแกรมที่ใช้ ในการเขียนภาษา HTML เพื่อสร้ าง Web Page
• ตัวอย่า่ งเช่่น Note Pad
2. Web browser
• เป็ นโปรแกรมที่ใช้ เรี ยกเอกสาร HTML ออกมาแสดงผลบนจอภาพ
• ในระบบ Internet
• ตัวอย่างเช่น Internet Explorer
การเขียนภาษา HTML
• การเขียนภาษา HTML ประกอบด้ วย 2 ส่วน คือ
1. ส่ วนของคาสั่ง เขียนอยู่ภายในเครื่องหมาย < > เรียกว่ า Tag
เช่ น <br>
2. ส่ วนของข้ อความที่ต้องการ
การเขียนภาษา HTML (ต่่ อ)
Tag มี 2 แบบ
• 1. Tag เดี่ยว Tag ที่มีคาสั่งเดียว สามารถใช้ งานคาสั่งได้ ณ
ตาแหน่ งที่ เราระบุ เช่น <br>
• 2. Tag คู่ Tag ที่มี 2 ส่ วน คือ Tag เปิ ด และ Tag ปิ ด
โดย Tag ปิ ดมีรูปแบบเหมือน Tag เปิ ด แต่มีเครื่ องหมาย / นาหน้ า
<ชื่อคาสั่ง> ข้ อความที่ต้องการแสดง </ชื่อคาสั่ง>
เช่น
<HTML>… ข้ อความที่ต้องการ... </HTML>
โครงสร้ างภาษา HTML
• ในการเขียนภาษา HTML 1 หน้ า จะต้ องประกอบไปด้ วยคาสั่งหลักอยู่ 4
คาสั่ง
1. <HTML>…</HTML> เป็ นคาสั่งที่ทาหน้ าที่บอกจุดเริ่มต้ น และ
จุดสิน้ สุด ของเอกสาร HTML
2. <HEAD>…</HEAD> เป็ นคาสั่งที่ทาหน้ าที่กาหนดส่ วนหัวเรื่ อง
3. <TITLE>…<TITLE> เป็ นคาสั่งที่กาหนดข้ อความที่ต้องการ แสดงผล
บนแถบชื่อเรื่ อง
4. <BODY>…</BODY> เป็ นคาสั่งที่ทาหน้ าที่กาหนดข้ อความและรู ปแบบ
คาสัง่ ใดๆ ที่ต้องการปรับแต่งเอกสารบนส่วนของจอภาพ และจะแสดงผล
บนจอภาพเมื่อถูกเรี ยกใช้ จาก Web Browser
รูปแบบมาตรฐานในการเขียนเว็บเพจ
คาาสั่ งที่ใช้ ในการกาหนดเอกสาร
• การกาหนดหัวเรื่ อง (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 >

similar documents