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 >