หน่วยที่2HTML

Direction : กาํ หนดทศิ ทางการเคล่อื นทข่ี องตัวตัวอักษร - Direction Left : เคลือ่ นจากดานซา ยไปขวา - Direction Right : เคลอ่ื นจากดานขวาไปซาย Behavior : รูปแบบการแสดงผลของตวั อกั ษร - Behavior Alternate :แสดงตวั อกั ษรแบบเคลื่อนทไี่ ปกลับในบรรทดั เดียวกัน - Behavior Slide : แสดงตัวอักษรแบบสไลด - Behavior Continuous : แสดงตัวอกั ษรแบบตอ เนือ่ ง Bgcolor : เลอื กสพี นื้ หลงั ของตวั อักษร Width : ขอบเขตความกวา งท่ีตอ งการใหต วั อกั ษรเคลอื่ นท่จี ากดานซา ยไปขวา หรือจากดานขวาไปซา ย มีหนวยเปน Pixel Height : ขอบเขตความสูงทตี่ อ งการใหตัวอกั ษรเคล่อื นทจ่ี ากดา นบนลงลาง หรอื จากดา นลา งขึ้นบน มีหนวยเปน Pixel Speed Control : ความเร็วในการวง่ิ ของตวั อักษร - Scroll Amount : กาํ หนดความเรว็ ในการเคลื่อนทขี่ องตวั อกั ษร - Scroll Delay : กําหนดความตอเนอ่ื งในการเคล่ือนทข่ี องตวั อักษร

การแสดงขอความตามท่ีจดั จัดรูปแบบไวใ นไฟลต นฉบบั 52 <PRE>..........</PRE>  เปน การกําหนดตาํ แหนงการแสดงผลตามรูปแบบทเี่ ราไดท ําการจดั ในไฟล ตน ฉบบั โดยในคําส่งั นเ้ี ราสามารถจดั ตาํ แหนง ท่ีเราตอ งการใหแสดงผล โดย เรากําหนดดว ยคาํ สงั่ <PRE> แลว ปด </PRE> จะทาํ ใหเราสามารถ กาํ หนดตาํ แหนง การแสดงผลได  แตถ าเรากาํ หนดดวย <P ALING=\"LEFT / RIGHT / CENTER\"> การแสดงผลกจ็ ะอยแู คชดิ ซาย กึง่ กลาง และชดิ ขวาเทาน้นั รายรบั 20000 บาท ขายของ 30000 บาท ดอกเบย้ี 7000 บาท รวม

The HTML <pre> Element  <pre> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </pre>

การแสดงขอมูลแบบรายการ (Lists)  จะมรี ายการแบบมีลําดับ (ใชหมายเลขกาํ กบั ) หรือแบบไมม ลี าํ ดบั (ใช สัญลกั ษณกํากบั ) แตไ มวา จะเลือกใหมกี ารแสดงผลรายการแบบใดก็ตาม ทั้ง 2 แบบ กม็ ลี ักษณะการทาํ งานทเ่ี หมอื นกนั แตกตา งกนั เพยี งแบบหนึ่ง เปนตวั เลขและอกี แบบหน่งึ เปนสัญลกั ษณเ ทา นน้ั

<P>การจัดหัวขอ โดยใช OL <OL> <OL> <LI>ขอความท่ี 1 </LI> <LI>ขอ ความท่ี 2</LI> <LI>ขอความที่ 3</LI> </OL>

<P>การจัดหัวขอโดยใช OL TYPE=\"A“ <OL TYPE=\"A\"> <LI>ขอความท่ี 1 </LI> <LI>ขอ ความที่ 2</LI> <LI>ขอ ความท่ี 3</LI> </OL>

<BR> การจดั หวั ขอ โดยใช OL TYPE=\"I\" <OL TYPE=\"I\"><BR> <OL TYPE=\"I\"> <LI>INPUT UNIT หรือหนว ยรบั ขอมูล ไดแ ก Keyboard, Mouse, Scanner</LI> <LI>CENTRAL PROCESSING UNIT (CPU) หรอื หนว ยประมวลผล กลาง </LI> <LI>OUTPUT UNIT หรอื หนวยแสดงผล ไดแก Monitor, Printer, Plotter</LI> </OL>

การแสดงขอ มูลรายการแบบมีหมายเลขกํากบั (Number/Order Lists)  จะใชแ ท็ก <OL> และ <ol type=\"A,a,I,i,1\" </OL> คือขอมูลรายการแบบ มหี มายเลข เรยี งลาํ ดบั จากนอ ย start=\"ตวั เลข\"> ไปหามากกํากับอยหู นา แตล ะ รายการ <li>  โดยมแี ทก็ ที่เปนสว นประกอบ <li value=\"ตัวเลขท่ีกาํ หนดคา\"> ภายในอีกทหี นึ่ง คอื แท็ก <LI> ทใ่ี ชกําหนดหวั เรือ่ ง <li> หรือรายละเอียดของรายการ </ol> ยอ ย

การแสดงขอ มูลรายการแบบมีหมายเลขกาํ กบั (Number/Order Lists) ตอ..  type= ชนดิ ของการแสดงผลแบบรายการ  I , i เปนการแสดงผลแบบโรมนั  A , a เปนการแสดงผลแบบภาษาองั กฤษ  1 เปนการแสดงผลลาํ ดับรายการปกติ (Default)  start= การเร่มิ ของคา ของการแสดงรายการ (สามารถกาํ หนดคาเรม่ิ ตน ได)  value= การกาํ หนดคาเฉพาะแตละคา ของการแสดงรายการ

การแสดงขอ มลู รายการแบบมสี ญั ลกั ษณก าํ กบั (Bulleted/Unordered Lists)  วธิ ีการใชแท็ก < UL > และ < /UL <ul type=\"circle,square,disc\"> > หรอื รายการแบบใชส ัญลกั ษณ <li> กํากับ (Unordered List) น้ีมี <li> สว นประกอบภายในคลา ย ๆ กับ <li> การเรียงรายการแบบใชหมายเลข กาํ กบั คอื มีสว นหรัวเรื่องและสว น </ul> รายการยอย  พรอมทั้งแอตทรบิ ิวต TYPE ท่ใี ช กําหนดสัญลักษณกํากบั หนา รายการยอย

การแสดงขอ มูลรายการแบบมสี ญั ลกั ษณกาํ กบั (Bulleted/Unordered Lists) ตอ... type= \"circle\" การกําหนดรายการแบบวงกลม type= \"square\" การกาํ หนดรายการแบบ สีเ่ หลยี่ มทบึ type= \"disc\" การกําหนดรายการแบบวงกลมทึบ (เปน Default)

การจัดลําดับหวั ขอและเนอ้ื หาโดยใช <UL>

<P>การจดั หวั ขอ โดยใช UL TYPE=\"disc\" <BR> <UL TYPE=\"disc\"> <LI>INPUT UNIT ไดแก Keyboard, Mouse, Scanner </LI> <LI>CENTRAL PROCESSING UNIT (CPU) </LI> <LI>OUTPUT UNIT ไดแ ก Monitor, Printer, Plotter</LI> </UL>

การจัดหวั ขอ โดยใช UL TYPE=\"square\" <BR> <UL TYPE=\"square\"> <LI>INPUT UNIT หรือหนว ยรับขอมูล ไดแ ก Keyboard, Mouse, Scanner </LI> <LI>CENTRAL PROCESSING UNIT (CPU) หรือหนว ยประมวลผลกลาง </LI> <LI>OUTPUT UNIT หรอื หนวยแสดงผล ไดแก Monitor, Printer, Plotter</LI> </UL>

การจัดหวั ขอ โดยใช UL TYPE=\"circle\"<BR> <UL TYPE=\"circle\"> <LI>INPUT UNIT หรือหนว ยรับขอ มูล ไดแ ก Keyboard, Mouse, Scanner</LI> <LI>CENTRAL PROCESSING UNIT (CPU) หรอื หนว ยประมวลผลกลาง </LI> <LI>OUTPUT UNIT หรอื หนว ยแสดงผล ไดแก Monitor, Printer, Plotter</LI> </UL>

การเรยี งรายการแบบใชนยิ าม Definition List  นจ้ี ะคลายกนั กับรายการยอ ยแบบทใี่ ชหมายเลขหรือสญั ลกั ษณก ํากับ ตางกนั ทไี่ ม สัญลักษณใดๆ กาํ กบั หนา แตล ะรายการยอ ย  โดยมแี ทก็ ทเ่ี กย่ี วขอ งอยู 3 แท็กดว ยกนั คอื <DL> และ </DL> เพอื่ บอกวา รายการยอยมลี กั ษณะเปน แบบใชน ยิ าม สวนแทก็ <DT> นน้ั ใชบ อกสวนทเี่ ปน เรือ่ งของแตละรายการยอย และแท็ก <DD> ใชบ อกสวนท่เี ปนรายละเอียดใน รายการยอยน้นั <DL> <DT>ขอ ความ</DT> <DD>ขอความ</DD> </DL>

การจัดลําดบั หัวขอ และเน้ือหาโดยใช <DL>

<BODY> องคประกอบทีส่ าํ คญั ของคอมพิวเตอร มดี งั ตอ ไปน<้ี BR> <DL> <DT>INPUT UNIT</DT> <DD>หนวยรับขอ มลู ไดแก Keyboard, Mouse, Scanner</DD> <DT>CENTRAL PROCESSING UNIT<DT> <DD>CPU หรอื หนวยประมวลผลกลาง </DD> <DT>OUTPUT UNIT</DT> <DD>หนว ยแสดงผล ไดแก Monitor, Printer, Plotter</DD> </DL> </BODY>

การใสร ปู ภาพประกอบในเว็บเพจ

<BODY> <CENTER> นค่ี อื ภาพดาราคนโปรดของฉัน<BR><BR> <IMG SRC=\"full.jpg\" BORDER=0 WIDTH=250 HEIGHT=250 ALT=\"Super Star\"> <BR><BR> ลองทายดูซวิ าเธอคอื ใคร </CENTER> </BODY>

<IMG SRC=\"ชื่อไฟลร ูปภาพ\" > เปนการบอกใหรวู าน่ีคอื แท็ก รูปภาพ ช่ือของรูปภาพที่จะนาํ มาประกอบเวบ็ เพจ (ตองระบ)ุ BORDER=0 กาํ หนดใหม ีหรือไมมีเสน ขอบรอบรูปภาพ 0=ไมม ีเสน ขอบ (คาปกต)ิ WIDTH=120 กําหนดขนาดความกวางของรูปภาพ (Pixel) (ไมตอ งกาํ หนดก็ได) HEIGHT=120 กําหนดขนาดความสงู ของรปู ภาพ (Pixcel) (ไมต อ งกาํ หนดกไ็ ด) ALT=\"คาํ อธิบาย\" คาํ อธิบายนีจ้ ะแสดงในกรณที ่ไี มสามารถแสดงรปู ภาพได หรอื เม่อื วางเมาสบนรูปภาพ

การจดั ตาํ แหนง ของรปู ภาพรว มกบั ขอความ

<BODY> <CENTER> <IMG SRC=\" dog.gif\" BORDER=0 ALIGN=LEFT width=“300“ height=“400\"> <FONT COLOR=\"Blue\"> การ Chat คือแหลงรวมชมุ ชนคนออนไลน ที่กลมุ วัยรุน สมยั นม้ี ักจะนยิ มกันมาก...แตจะตอ งเปนผทู ช่ี า งคดิ ชา ง เจรจา และที่สําคญั จะตอ งพมิ พดดี คลองดว ย<BR> </FONT> </CENTER> </BODY>

อธบิ ายคาํ ส่งั ALIGN=LEFT กาํ หนดใหรูปภาพอยูท างดานซายของ ขอความ (Default) ALIGN=RIGHT กําหนดใหรปู ภาพอยทู างดานขวาของ ขอความ ALIGN=TEXTTOP กําหนดใหข อบบนของรูปภาพในอยู ระดบั เดียวกนั กบั ขอบบนของขอความ (ไมค อยไดใ ช) ALIGN=BOTTOM กาํ หนดใหข อบลางของรูปภาพในอยู ระดับเดยี วกนั กับขอบบนของขอ ความ (ไมค อยไดใช)

การกําหนดระยะหา งของรูปภาพ

<BODY> <CENTER> <IMG SRC=\"BlueMoon.jpg\" BORDER=0 ALIGN=LEFT HSPACE=10> <FONT COLOR=\"Blue\"> ภาพพระจนั ทรสีนํา้ เงนิ สวยมากๆ <BR> </FONT> </CENTER> </BODY>

การเขียนระบุตาํ แหนงไฟล

กรณภี าพอยใู นโฟลเดอร images ชอ่ื ไฟล 13.jpg <html> <head><title></title></head> <body background=\"images/13.jpg\"> <center><img src=\"images/13.jpg\" border=5 width=300 height=400></center><br> </body></html>

อธิบายคาํ สั่ง <--- สังเกตุระยะหา งของรปู ภาพกบั ขอ ความ (10 Pixel) HSPACE=10 กําหนดระยะหา ง (ทางแนวนอน) ของรปู ภาพ คาท่กี าํ หนดมีหนว ยเปน Pixel VSPACE=10 กําหนดระยะหาง (ทางแนวตั้ง) ของรปู ภาพ คาท่ีกาํ หนดมีหนว ยเปน Pixel

การทําภาพฉากหลังในหนาเว็บเพจ

<BODY BACKGROUND=\"bg.jpg\"> อธิบายคาํ ส่งั BACKGROUND=\"ช่ือรูปภาพ\" เปน การกําหนดให นาํ รปู ภาพมาเปน ฉากหลงั ในหนาเวบ็ เพจ

การสรา งจุดเช่ือมโยง (A)

เชื่อมไปยงั ไฟลต า งๆ ในโฟลเดอรเดยี วกัน กรณใี ช ขอความเปนตัว Link  <body> <a href=“p01.html“>Click Here</a> </body>

คาํ อธบิ าย ทาํ หนา ทก่ี ําหนดขอ ความหรือภาพกราฟฟกทอี่ ยู ภายในใหท ําหนา ทีเ่ ปน จุดเช่ือมโยงไปยังเว็บเพจ อืน่ หรือขอ มลู ชนิดตา งๆ รูปแบบ<a href=\"url\"> .... </a>

การทําลิง้ คโดยใชรูปภาพแทนขอ ความ

เชือ่ มไปยงั ไฟลตางๆ ในโฟลเดอรเ ดยี วกัน กรณใี ชร ปู ภาพเปน Link  <body> <a href=“p01.html\"> <img src=“13.jpg“></a> </body>

<BODY> <!-- ลง้ิ คโ ดยใชรูปภาพทีม่ ีอยูในเวบ็ ไซตข องเราเอง --> <A HREF=\"index.html\"><IMG SRC=\"home.gif\"></A> <A HREF=\"music.html\" ><IMG SRC=“music.gif\"></A> <!-- ลงิ้ คโ ดยใชร ูปภาพจากเว็บไซตอื่นที่เปนเว็บไซต ปลายทาง --> <A HREF=\"http://www.mthai.com\"> <IMG SRC=\"http://www.mthai.com/mthai.gif\"></A> <A HREF=\"http://www.happy-box.com\"> <IMG SRC=http://www.happy-box.com/box.gif\"></A> </BODY>

เชือ่ มไปยงั ไฟลตางๆ ในโฟลเดอรเ ดยี วกนั กรณี Link ไปยังไฟลต างๆ  <body> <a href=“001.docx“> เอกสาร HTML</a> <a href=“002.pptx“> นําเสนอ HTML</a> <a href=“003.mp4“> วีดโี อ HTML</a> </body>

อธบิ ายคําสั่ง <A แท็กคาํ สั่งเรมิ่ ตน เพอ่ื บอกเบราสเ ซอรใหร ูวา นคี่ ือลงิ้ ค HREF=\"ชื่อไฟล/ทอ่ี ยู URL\" ช่ือไฟล/ทอี่ ยูเวบ็ ไซต ปลายทางทีต่ อ งการเช่อื มโยงไปถึง (ตอ งระบุ) </A> แทก็ ปด ทายขอ ความลิ้งค

เชือ่ มไปยงั ไฟลตางๆ ในโฟลเดอรเ ดยี วกัน กรณใี ชร ปู ภาพเปน Link  <body> <a href=“p01.html\"> <img src=“13.jpg“></a> </body>

การทําลงิ้ คเชอ่ื มโยงภายในหนา เวบ็ เพจเดยี วกัน

<BODY BACKGROUND=\"blobkgde.gif\" > <FONT COLOR=\"#cc9999“>รายการสินคา (คลกิ เพ่ือดู รายละเอยี ด)<br> 1. <A HREF=\"#one\">Computer Notebook Dell </A><br> 2. <A HREF=\"#two\"> Computer Notebook Asus </A><br> 3. <A HREF=\"#three\"> Computer Notebook HP </A><br> <br><br><br><br><br><br><br><br><br><br><br> 1. <A NAME=\"one\"> CPU : INTEL ATOM X5-Z8350 RAM : 4 GB DDR3L HDD : 64 GB e.MMC DISPLAY : 10.1\" WXGA LED IPS MULTI- TOUCH VGA </A> <br> <br><br><br><br><br><br><br><br><br><br> 2. <A NAME=\"two\"> CPU : INTEL CORE I3-6006U RAM : 4 GB DDR4 HDD : 2 TB 5400 RPM DISPLAY : 14\" HD VGA : GEFORCE 920MX 2 GB OS </A> <br> <br><br><br><br><br><br><br><br><br><br> 3. <A NAME=\"three\"> CPU : INTEL CORE I5-8250U RAM : 4 GB DDR4 HDD : 1 TB 5400 RPM DISPLAY : 14\" HD TN GL (SLIM) VGA : AMD RADEON </A> </FONT></BODY>

อธิบายคําส่ัง สวนท่ี 1 กาํ หนดขอความลง้ิ ค (ตนทาง) <A แท็กคําสง่ั เริม่ ตนเพื่อบอกเบราสเซอรใ หรูวา นคี่ อื ล้ิงค HREF=\"#ชอ่ื หัวขอ\" ชอ่ื หัวขอหรอื ตําแหนง ของขอความที่ตอ งการลงิ้ ค (ตองระบ)ุ > อยา ลืมปด ทายดว ยเคร่อื งหมาย \">\" น้ีทุกครั้ง ขอความ ขอความที่ใชแ สดงวา นี่คอื ลงิ้ ค </A> แทก็ ปด ทายขอ ความล้ิงค สวนท่ี 2 กําหนดชอ่ื หรอื ตําแหนง ของล้งิ ค (ปลายทาง) <A แทก็ คําสั่งเร่มิ ตนเพื่อบอกเบราสเซอรใ หรูวาน่คี ือลง้ิ ค NAME=\"ชอ่ื หวั ขอ \" ช่ือหวั ขอหรอื ตาํ แหนงปลายทางของลิ้งค (ตองระบ)ุ > อยา ลืมปด ทา ยดว ยเคร่ืองหมาย \">\" นี้ทกุ ครง้ั ขอ ความ ขอความทใี่ ชแสดงเปนหวั ขอและตําแหนง ปลายทาง </A> แท็กปดทายขอ ความล้ิงค

การทาํ ลิ้งคไปยังเวบ็ เพจหนา อนื่ หรือเวบ็ ไซต อน่ื

<BODY> กรณุ าเลือกหวั ขอ ที่ทา นตองการ<BR> <UL> <!-- ล้ิงคไ ปยงั เวบ็ เพจหนาอน่ื ภายในเวบ็ ไซตข องเรา --> <LI><A HREF=\"index.html\">คุยกนั กอนหนา แรก</A></LI> <LI><A HREF=\"music.html\" >วัตถปุ ระสงคก ารกอ ต้งั ฯ</A></LI> <!-- ลิ้งคไ ปยงั หนาเว็บเพจ ของเว็บไซตอืน่ --> <LI><A HREF=\"http://wsabstract.com/cutpastejava.shtml\">Free JavaScripts!</A></LI> <LI><A HREF=\"http://www.scriptsolutions.com/home.html\">Script Solutions</A></LI> </UL> </BODY>

อธิบายคาํ สงั่ <A แท็กคาํ สง่ั เร่มิ ตนเพอ่ื บอกเบราสเซอรใหรูว า นค่ี อื ลงิ้ ค HREF=\"ชือ่ ไฟล/ทีอ่ ยู URL\" ช่ือไฟล/ที่อยเู ว็บไซต ปลายทางทีต่ องการเช่ือมโยงไปถงึ (ตองระบุ) > อยา ลมื ปด ทา ยดวยเครื่องหมาย \">\" นที้ ุกคร้ัง ขอ ความ ขอ ความท่ใี ชแ สดงวาน่ีคอื ลง้ิ ค </A> แท็กปดทายขอ ความลงิ้ ค

การทําลิง้ คแ บบเปดเปนวินโดวใหม

<BODY> กรณุ าเลอื กหวั ขอ ท่ีทา นตอ งการ<BR> <UL> <LI><A HREF= \"music.html\" TARGET=\"_blank\">ฟง เพลง IRC</A></LI> <LI><A HREF=\"picture.html\" TARGET=\" _parent \"> ภาพสวยๆ</A></LI> <LI><A HREF=\"http://www.youtube.com\" TARGET=\" _self “>Youtube.Com</A></LI> <LI><A HREF=\"http://www.mthai.com\" TARGET=\" _top “>Mthai.Com</A></LI> </UL> </BODY>

Attribute target เปาหมายในการลิง้ ค โดยในแอททรบิ วิ target จะมีคาอยดู ว ยกนั 4 คา นน่ั กค็ อื  1. target=\"_blank\"  ตวั อยา งโคด : <a href=\"\" target=\"_blank\">  อธบิ าย _blank : เปด เอกสารในหนา ตา งใหม หรอื แท็บใหม (Opens the linked document in a new window or tab)  2. target=\"_parent\"  ตัวอยา งโคด : <a href=\"\" target=\"_parent\">  อธบิ าย _parent : เปดเอกสารในเฟรมเดยี วกบั ทลี่ ้ิงคถูกคลกิ คานีจ้ ะเปน คาเรม่ิ ตน (Opens the linked document in the same frame as it was clicked (this is default))

Attribute target เปาหมายในการลงิ้ ค โดยในแอททรบิ ิว target จะมคี า อยดู ว ยกัน 4 คา น่ันกค็ ือ  3. target=\"_self\"  ตวั อยา งโคด : <a href=\"\" target=\"_self\">  อธบิ าย _self : เปดเอกสารในเฟรมหลัก (Opens the linked document in the parent frame)  4. target=\"_top\"  ตัวอยา งโคด : <a href=\"\" target=\"_top\">  อธบิ าย _top : เปด เอกสารในสวน body ของวนิ โดว(Opens the linked document in the full body of the window)