Transcript CHAPTER 1
HTML1 Week 1 - HTML 1 Basic HTML List Image เนื้อหา วิธีการสร้างเอกสาร HTML Tag and Attribute โครงสร้างภาษา HTML การจัดรู ปแบบอักษร การเว้นบรรทัด การจัดตาแหน่ง การใช้สี การแสดงรู ปแบบรายการ (List) การนารู ปภาพมาใส่ ในเอกสาร HTML วิธีการสร้ างเอกสาร HTML • เนื่องจาก HTML Document หรื อที่เราเรี ยกกันว่า Web Page นั้น สามารถ แสดงได้ในทุกระบบปฏิบตั ิการ ดังนั้น ต้องมีการกาหนดรู ปแบบมาตรฐาน เพื่อให้ทุกระบบเข้าใจ และสามารถแสดงผลออกมาได้เหมือน หรื อใกล้เคียง กัน รู ปแบบมาตรฐานที่วา่ นี้กค็ ือคาสัง่ ในการจัดรู ปแบบของ HTML Document โดยการใช้ภาษา HTML นัน่ เอง •HTML (Hypertext Markup Language) เป็ นภาษาที่ใช้สาหรับการสร้าง เว็บขึ้นมา โดยจะมีคาสัง่ ต่างๆ เพื่อที่จะทาการจัดรู ปแบบเอกสารให้เป็ นไป ตามที่เรากาหนด วิธีการสร้ างเอกสาร HTML การสร้าง HTML Document นั้นสามารถสร้างได้หลายวิธี เช่น 1. ใช้โปรแกรม Text Editor อย่างเช่น Notepad , Editplus ที่รับข้อมูล ของ Text เป็ นรหัส ASCII สร้างเอกสาร HTML ขึ้นมาแล้ว save file ด้วยนามสกุล .html 2. ใช้โปรแกรมสร้างเว็บสาเร็ จรู ป (Web Authoring Tools) สร้าง ขึ้นมา โดยโปรแกรมเหล่านี้จะมีองค์ประกอบต่างๆ ของ Web Page มาให้แล้ว ผูใ้ ช้เพียงแค่เลือกใช้งานเท่านั้น เช่น Dream Weaver , Frontpage , Go Live วิธีการสร้ างเอกสาร HTML 3. ใช้โปรแกรมอย่างเช่น Microsoft Office สร้างเอกสาร แล้วทาการ save file ให้เป็ น HTML Document ก็ได้ การแสดง HTML Document นั้นไม่จาเป็ นที่จะต้องมี คาสัง่ HTML ในเอกสารนั้นเลยก็ได้ มีเพียงข้อความแล้ว save file ให้เป็ น .HTML แค่น้ นั ก็ สามารถใช้งานได้แล้ว เพียงแต่วา่ รู ปแบบการแสดงอาจจะไม่ถูกต้องตามที่ ต้องการ วิธีการสร้ างเอกสาร HTML ตัวอย่างการใช้ notepad สร้าง เอกสาร HTML ขึ้นมาโดยยังไม่ มีคาสัง่ HTML Tag and Attribute TAG คือคาสัง่ ในภาษา HTML ซึ่งใช้ในการแสดงรู ปแบบของเอกสาร โดยที่ TAG จะมีลกั ษณะดังนี้ ใช้ วงเล็บ < > เป็ นการประกาศ Tag มีรูปแบบคือ <คาสั่ ง> เช่น tag <B> ใช้สาหรับทาให้ตวั อักษรเป็ นตัวหนา Tag จะมีท้ งั Tag เปิ ด และ Tag ปิ ด โดยที่ Tag ปิ ด จะมีรูปแบบ ดังนี้ </คาสั่ ง> เช่น </B> ข้อความจะอยูร่ ะหว่าง Tag เปิ ด และ Tag ปิ ด โดยรู ปแบบจะเป็ นดังนี้ <tag เปิ ด>ข้อความ</tag ปิ ด> Tag and Attribute Attribute เป็ นส่ วนขยายของ Tag เป็ นการเพิ่มคุณสมบัติของ Tag HTML ให้เป็ นไปตามที่กาหนด เช่นการใส่ สี <FONT COLOR=“BLUE”>ข้อความ </FONT> โดยให้ใส่ Attribute ที่ตอ้ งการไว้ที่ Tag เปิ ด -Attribute ใน Tag หนึ่งสามารถมีได้หลาย Attribute ก็ได้ -รู ปแบบจะเป็ นดังนี้ <TAG_NAME Attribute_1 Attribute_2 ...> </TAG_NAME> โครงสร้ างของภาษา HTML โครงสร้ างหลักของภาษาจะมี Tag ที่ประกอบจากวงเล็บ <TAG name> เป็ นตัวเปิ ดการควบคุม และปิ ดการควบคุมอักษรด้ วย </TAG> เค้ าโครงของภาษา HTML โครงสร้ างหลักจะประกอบไปด้ วย 2 ส่ วน คือ 1. ส่ วน Head เป็ นส่ วนที่ให้ รายละเอียดกับเอกสารนี้ 2. ส่ วน Body เป็ นส่ วนที่ใช้ สาหรับการแสดงข้ อความต่ างๆ HTML Structure <HTML> และ </HTML> เป็ น Tag ที่ใช้เพื่อกาหนดว่าเอกสารที่ใช้ภาษา HTML เป็ น Markup Language <HEAD> และ </HEAD> เป็ น Tag ที่ใช้กาหนดส่ วนหัวของเอกสาร HEAD ไม่ได้เป็ นส่ วนของเอกสาร ภายใน แต่จะให้รายละเอียดเกี่ยวกับเอกสารฉบับนี้ <TITLE> และ </TITLE> เป็ นการระบุขอ้ ความที่ตอ้ งการให้เป็ นส่ วนหัวของเอกสาร TITLE เป็ น ส่ วน หนึ่งของ HEAD HTML Structure <BODY> และ </BODY> เป็ น Tag ที่บอกถึงลักษณะต่างๆ ของเอกสารฉบับนี้ ซึ่ งใน BODY จะมี Attribute ต่างๆเช่น BGCOLOR แทนสี พ้นื หลัง TEXT แทนสี ของตัวหนังสื อ ตัวอย่างนี้จะเป็ นการแสดงการกาหนดพื้นหลังและตัวอักษร <HTML> <HEAD> <TITLE> TEST </TITLE> </HEAD> <BODY BGCOLOR=“BLACK” TEXT=“YELLOW”> HELLO WORLD !!! </BODY> </HTML> * ให้นกั ศึกษาทดลองพิมพ์ Code ข้างต้น แล้ว save file เป็ น .html จากนั้นลองเปิ ด file นี้ดูใน Internet Explorer HTML Structure <body text="#000000" bgcolor="#FFFFFF" link="#0000FF" vlink="#0000FF" alink="#FFFFFF" background="image_name"> ข้างบนนี้คือ Attribute ของ TAG body ใช้สาหรับกาหนดค่าต่าง ๆ ที่ จาเป็ น ความหมายของ Attribute ต่ างๆ เป็ นดังนี้ text ใช้สาหรับกาหนดสี ของข้อความทัว่ ไป bgcolor กาหนดสี พ้นื แต่ถา้ มีการกาหนดภาพ background เอาไว้ดว้ ยจะไม่มีผลอะไร HTML Structure link กาหนดสี ของข้อความที่มีการเชื่อมโยงไปยัง page อื่น (ก่อนเชื่อม) vlink กาหนดสี ของข้อความที่มีการเชื่อมโยงไปยัง page อื่นที่เคย ไปมาแล้ว (หลังเชื่อม) alink กาหนดสี ของข้อความที่มีการเชื่อมโยงไปยัง page อื่น ในขณะที่กาลังกดปุ่ มบนเมาส์คา้ งอยู่ (ขณะเลือก) background กาหนดรู ปภาพที่จะใช้เป็ นฉากหลัง กฎในการใช้ HTML ที่ควรทราบ Tag ต้องอยูใ่ นเครือ่ งหมาย < > เท่านัน้ Tag ใช้ตวั พิมพ์เล็กหรือใหญ่ก็ได้ ความหมายเดียวกัน เช่น <title>, <Title>, <TITLE> มีความหมายเท่ากัน แทบท ุก Tag เปิด และ Tag ปิด จะมี / รวมอยูด่ ว้ ย ยกเว้น บาง Tag เช่น <BR>, <P> เป็นต้น ในการพิมพ์เอกสาร HTML สามารถพิมพ์แยกบรรทัดหรือ เคาะช่องว่าง หรือพิมพ์ติดกันก็ได้ การจัดรู ปแบบอักษร การกาหนดขนาดของตัวอักษรในแต่ ละ Section (Headline) <Hn> และ </Hn> โดย n แทนตัวเลข 1 – 6 1 คือขนาดใหญ่ส ุด และ 6 คือขนาดเล็กส ุด ร ูปแบบคาสัง่ <Hn [Align = left : center : right]> … Heading Text … </Hn> การจัดรู ปแบบอักษร Align เป็ นค่ าเสริม (Attribute) เพือ่ กาหนดตาแหน่ งหัวเรื่องบน เพจ เช่น <h1>...</h1> <h2>...</h2> <h3>...</h3> <h2 align=center> ข้อความ</h2> ก็จะให้ผลเท่ากับการ ใช้ <center><h2>ข้อความ</h2></center> การจัดรู ปแบบอักษร ตัวอย่ างรูปแบบคาสั่ ง HEADER <H1>COMPUTER</H1> <H2>COMPUTER</H2> <H3>COMPUTER</H3> <H4>COMPUTER</H4> <H5>COMPUTER</H5> <H6>COMPUTER</H6> การจัดรู ปแบบอักษร ผลลัพธ์ ที่ได้ COMPUTER COMPUTER COMPUTER COMPUTER COMPUTER COMPUTER จะเห็นว่าขนาดของหัวข้อจะมีขนาดใหญ่และเล็กลงตามลดับ การจัดรู ปแบบอักษร กาหนดรูปแบบอักษรอืน่ ๆ <I>…</I> เป็นตัวเอียง <B>…</B> เป็นตัวหนา <U>…</U> เป็นตัวเอียง <SUP>…</SUP> เป็นตัวยก <SUB>…</SUB> เป็นตัวห้อย การจัดรู ปแบบอักษร การกาหนดขนาดของตัวอักษร ร ูปแบบ <FONT SIZE = N> … </FONT> N = ขนาดของตัวอักษรมีค่าตัง้ แต่ 1 ถึง 7 1 คือขนาดเล็กส ุด และ 7 คือขนาด ใหญ่ ส ุด การจัดรู ปแบบอักษร การกาหนดรู ปแบบอักษรด้ วย Face Attribute Face ช่ วยในการระบุรูปแบบตัวอักษรทีต่ ้ องการลงไปได้ เลย เช่ น AngsanaUPC , MS Sans Serif , CordiaUPC วิธีการกาหนดเป็ นดังนี้ <font face=“ชื่อ Font”>ข้ อความ</font> ถ้ าต้ องการแสดงผลเป็ นภาษาไทยอย่ างถูกต้ อง ควรเลือกใช้ แบบ อักษรทีล่ งท้ ายด้ วย UPC ซึ่งเป็ นแบบอักษรทีส่ นับสนุนภาษาไทย กาหนดสี เฉพาะให้ กบั ตัวอักษรด้ วย color นอกเหนือจากการกาหนดสีให้กบั ตัวอักษรทัว่ ไป โดยใช้ Attribute text ของ TAG body แล้ว เราสามารถกาหนดสีเฉพาะให้กบั ตัวอักษร หรือข้อความบางช ุดที่ตอ้ งการให้มีความแตกต่างได้ดว้ ย โดยใช้ Attribute color Here is RED color Here is GREEN color Here is BLUE color วิธีการกาหนดเป็นดังนี้ <font color="สีที่ตอ้ งการ">ข้อความ</font> การเว้ นบรรทัด <P> เป็นการขึ้นย่อหน้าใหม่ซึ่งจะทาให้มีการเว้นบรรทัดเพิ่มขึ้นจากเดิม <BR> เป็นการขึ้นบรรทัดใหม่ โปรแกรมตัวอย่าง <body>Client-side Programming <br>by Java Script<p>Server-side Programming<br>by ASP</body> ผลลัพธ์คือ Client-side Programming Java Script Server-side Programming ASP การจัดตาแหน่ ง จัดชิดซ้ าย โดยทัว่ ไปตัวอักษรหรื อประโยคจะถูกจัดชิดซ้ายโดยอัตโนมัติอยูแ่ ล้ว แต่ถา้ ต้องการระบุจริ งๆ ก็ทาได้ดว้ ยการใช้ TAG div โดยระบุ Attribute align ให้ เป็ น left ลองดูตวั อย่าง <div align="left">ข้อความ</div> ผลที่ได้คือ ข้ อความนีถ้ ูกจัดชิดซ้ าย การจัดตาแหน่ ง จัดกลางหน้ า ใช้คาสัง่ ง่ายๆ ข้างล่างนี้ <div align=“center”>ข้อความ</div>หรื อ<center>ข้อความ</center> ผลที่ได้คือ ข้ อความนีถ้ ูกจัดกลางหน้ า จัดชิดขวา ใช้คาสัง่ คล้ายกับการจัดชิดซ้าย ดังนี้ <div align="right">ข้อความ</div> ผลที่ได้คือ ข้ อความนีถ้ ูกจัดชิดขวา การจัดตาแหน่ ง การขีดเส้ นคัน่ แบ่งข้อความหน้าจอ เส้นคัน่ ที่ไม่ใช่การขีดเส้นใต้ตวั อักษร Horizontal Rule <HR> ตัวอย่าง <body>It has been<hr>Information technology</body> ผลลัพธ์คือ It has been Information technology การกาหนดสี การใช้สีใน HTML นอกจากจะใช้สีแบบที่เป็นคาพูดเช่น Red , Green , Yellow เราสามารถใช้สีแบบที่แทนค่าด้วย เลขฐานสิบหก (0 – F) ได้อีกด้วย เป็นการใช้เลขฐานสิบหกจานวน 3 ช ุด ช ุดละ 2 ตัว โดย ใช้หนักการ RGB ซึ่งจะทาการผสมสีได้ถึง 16.7 ล้านสี (256 * 256 * 256 สี = 16777216 สี) การกาหนดสี เราจะมีเลขทัง้ หมด 6 ตัว โดยแบ่งเป็น 3 ช ุด ช ุดละ 2 ตัว ชุดที่ 1 แทน สีแดง (R) 200 0 ชุดที่ 2 แทน สีเขียว (G) 80 ชุดที่ 3 แทน สีนำ้ เงิน (B) ตัวอย่างการผสมสี “FF0000” ผลลัพธ์ที่ได้จะออกมาเป็นสีแดงเข้ม เพราะว่าเรา กาหนดความเข้มของช ุดที่ 1 (สีแดง) มากที่ส ุด (FF) และช ุดที่ 2 กับ 3 ให้มีความเข้มน้อยที่ส ุด (00) จึงทาให้ค่าสีเป็นสีแดง เข้ม การแสดงผลเป็ นรายการการ (List) • ในการสร้างเอกสาร HTML นั้นข้อมูลบางอย่างต้องมีการแสดงในรู ปแบบ ของรายการ ไม่วา่ จะเป็ นรายการที่ไม่เรี ยงลาดับ หรื อว่ารายการที่ตอ้ งมีลาดับ ก่อนหลัง ถ้าหากว่าใช้ TAG ทัว่ ๆ ไปในการสร้างรายการ (LIST) ก็สามารถ ทาได้เช่นกัน เพียงแต่วา่ รู ปแบบของ Bullet หรื อตัวเลข อาจจะถูกจากัดหรื อ ว่าใช้ได้นอ้ ยแบบ •HTML จึงมี Tag ที่สามารถใช้ในการแสดงรายการรวมถึงการจัดการและ ควบคุมรู ปแบบของรายการที่นาเสนอได้ การแสดงผลเป็ นรายการการ (List) • โดยทัว่ ไปจะมี List ที่นิยมให้กนั อยู่ 3 รู ปแบบ คือ •1. Ordered List หรื อ รายการแบบเรี ยงลาดับ •2. Unordered List หรื อ รายการแบบไม่เรี ยงลาดับ •3. Definition List หรื อ รายการแบบมีคานิยาม Ordered List • เป็ นการแสดงรายการแบบที่เรี ยงลาดับ ลาดับของรายการมีความสาคัญ มี การแสดงรู ปแบบย่อหน้าโดยมีหมายเลขเรี ยงลาดับจาก 1,2,3, ..... • รู ปแบบ Tag ที่ใช้ คือ <OL> <LI> <LI> </OL> • โดยที่ <LI> เป็ น TAG ที่ใช้ สาหรับแสดงรายการแต่ละรายการ Ordered List • ตัวอย่างเช่น <OL>My Ordered List <LI>Item 1 <LI>Item 2 <LI>Item 3 </OL> ผลลัพธ์ที่ได้คือ My Ordered List 1. Item 1 2. Item 2 3. Item 3 Ordered List •รายการแบบมีลาดับจะมีเลขลาดับนาหน้ารายการทุกๆ รายการโดย อัตโนมัติ ซึ่งสามารถจะใช้ลาดับรู ปแบบอื่นๆ แทนตัวเลข โดยใช้ Attribute ได้ •เพิม่ Attribute TYPE เข้าไป โดยถ้าต้องการให้ทุกรายการของ List เป็ น รู ปแบบตัวเลขตามที่ตอ้ งการก็ให้ใส่ TYPE ไว้ที่ <OL TYPE=“….”> แต่ถา้ ต้องการเฉพาะ List ตัวใดตัวหนึ่ง ก็ให้ใส่ ไว้ที่ <LI TYPE=“….”> Ordered List รู ปแบบ TYPE ของ Ordered List มีดงั นี้ 1. Arabic <OL TYPE=1> ซึ่งตรงนี้เป็ นค่า Default อยูแ่ ล้ว 2. Capital Letters <OL TYPE=A> จะมีรูปแบบ คือ A,B,C, … 3. Small Letters <OL TYPE=a> จะมีรูปแบบ คือ a , b , c , … 4. Large Roman <OL TYPE=I> จะมีรูปแบบ คือ I , II , III , … 5. Small Roman <OL TYPE=i> จะมีรูปแบบ คือ i , ii , iii , iv , ... Unordered List • เป็ นการแสดงรายการแบบที่ไม่ได้เรี ยงลาดับ มีการแสดงรู ปแบบย่อหน้า โดยมี Bullet นาหน้า • รู ปแบบ Tag ที่ใช้ คือ <UL> <LI> <LI> </UL> • โดยที่ <LI> เป็ น TAG ที่ใช้ สาหรับแสดงรายการแต่ละรายการ Unordered List • ผลลัพธ์ที่ได้คือ • ตัวอย่างเช่น My Unordered List <UL>My Unordered List • Item 1 <LI>Item 1</LI> • Item 2 <LI>Item 2</LI> • Item 3 <LI>Item 3</LI> </UL> Unordered List • การใช้ Bullet ให้กบั รายการที่ไม่มีลาดับ สามารถกาหนด Bullet รู ปแบบ อื่นๆ ได้อีก ดังนี้ oType = Circle Type = Square •Type = Disc • เพิ่ม Attribute TYPE เข้าไป โดยถ้าต้องการให้ทุกรายการของ List เป็ น Bullet ตามที่ตอ้ งการก็ให้ใส่ TYPE ไว้ที่ <UL TYPE=“….”> แต่ถา้ ต้องการ เฉพาะ List ตัวใดตัวหนึ่ง ก็ให้ใส่ ไว้ที่ <LI TYPE=“….”> Definition List • เป็ นการแสดงรายการแบบที่มีหวั ข้อใหญ่ หรื อชื่อเรื่ องก่อน แล้วหลังจาก นั้นจะมีคาอธิบายรายละเอียดสาหรับชื่อเรื่ องหรื อหัวข้อนั้นๆ •รู ปแบบ Tag ที่ใช้ คือ <DL> <DT>….</DT> <DD>….</DD> <DT>….</DT> <DD>….</DD> </DL> Definition List • ตัวอย่างเช่น <DL>แผนกในห้างสรรพสิ นค้า <DT>แผนกเสื้ อผ้า</DT> <DD>เป็ นแผนกที่มีเสื้ อผ้าเครื่ องแต่งกายของทั้งสุ ภาพบุรุษและ สุ ภาพสตรี ไม่วา่ จะเป็ นเสื้ อผ้า รองเท้า กางเกงกระโปรง</DD> <DT>แผนกเครื่ องกีฬา</DT> <DD>เป็ นแผนกที่มีอุปกรณ์กีฬาต่างๆ มากมาย รวมถึงเกมส์ สันทนาการต่าง และเสื้ อผ้าชุดกีฬาด้วย</DD> </DL> Definition List • ผลลัพธ์ที่ได้คือ แผนกในห้างสรรพสิ นค้า แผนกเสื้ อผ้า เป็ นแผนกที่มีเสื้ อผ้าเครื่ องแต่งกายของทั้งสุ ภาพบุรุษและ สุ ภาพสตรี ไม่วา่ จะเป็ นเสื้ อผ้า รองเท้า กางเกงกระโปรง แผนกเครื่ องกีฬา เป็ นแผนกที่มีอุปกรณ์กีฬาต่างๆ มากมาย รวมถึงเกมส์สนั ทนาการ ต่าง และเสื้ อผ้าชุดกีฬาด้วย การนารูปภาพมาใส่ ในเอกสาร HTML เราสามารถนาภาพกราฟิ กตามที่ได้กล่าวมาข้างต้นมาใส่ รวมเข้ากับเอกสาร HTML ได้ โดยใช้ Tag ดังนี้ <img src=“ที่อยู/่ ชื่อรู ปภาพ" > โดยจะต้องทาการอ้างอิงชื่อรู ปภาพ พร้อมทั้งที่อยูข่ องรู ปภาพนั้นให้ถูกต้อง ด้วย ซึ่ง Attribute SRC หรื อ Source นั้น เป็ น Attribute ที่ใช้สาหรับการ กาหนดที่อยูข่ องรู ปภาพ ซึ่งโดยปกติจะใช้คู่กบั Tag <IMG> เสมอ รู ปแบบการนาภาพมาใส่ ในเอกสาร HTML แบบนี้เราเรี ยกว่า Inline Graphic