การสร้างเวบ็ เพจ รหัสวชิ า 2201-2414 เนือ้ หา : ความรู้พนื้ ฐานเกย่ี วกบั การสร้างเวบ็ ไซต์ 1
ศัพท์เบอื้ งต้นเกย่ี วกบั เวบ็ ไซต์ • Internet คือ ระบบเครือข่ายคอมพิวเตอร์ท่ีใหญ่ที่สุดในโลกเกิดจากการเช่ือมโยง ของคอมพิวเตอร์หลายลา้ นเคร่ืองท่ีกระจายอยตู่ ามท่ีต่าง ในโลก อินเตอร์เน็ตเป็นแหล่งท่ีรวมของขอ้ มลู มหาศาลและเป็นช่องทางติดต่อส่ือสาร เพอื่ แลกเปลี่ยนขอ้ มูลท่ีสะดวกและรวดเร็วบริการยอดนิยมบนอินเตอร์เน็ต ไดแ้ ก่ เวบ็ เพจ (www) อีเมล์ และ Instant Messageing เช่น MSN Messenger, Yahoo Messenger, ICQ เป็นตน้ • www (World Wide Web) เป็นบริการขอ้ มูล โดยขอ้ มลู ของ www จะอยใู่ น รูปเอกสารแบบ Hypertext ซ่ึงภายในเอกสารจะมีจุดเชื่อมโยง (link) ไปยงั เอกสาร อ่ืน ที่เกี่ยวขอ้ ง เอกสารต่าง ท่ีเชื่อมโยงกนั เหมือนใยแมงมุม เป็นท่ีมาของคาวา่ Web. • HTTP เป็นโปรโตคอลสาหรับเปิ ดดูขอ้ มลู จาก www เรียกใชง้ านไดโ้ ดยระบุ http:// และตามดว้ ย URL ในช่องกรอก Address ดา้ นบนของโปรแกรมเวบ็ บราวเซอร์ 2
ศัพท์เบือ้ งต้นเกยี่ วกบั เวบ็ ไซต์ (ต่อ) • URL (Uniform Resource Locator) คือ ขอ้ ความที่บอก ตปารแะหเภนท่งตข่าองงขเอ้ชม่นลู รใูปนภIาnพteเสrียnงet ไม่วา่ จะเป็น Web page, File (UdRireLctปoรrะyกอทบ่ีเดกว้บ็ ยไฟโปลร)์ โชตื่อคไอฟลล+์ เชd่นomain name + http://www.enjoyday.net/webtutorial/css/index.ht ml http://www.enjoyday.net/images/logo.jpg • Dเช่นogmoaoignlen.caomme,คeือnชjื่อoเวyบ็ dไaซyต.์ (nทeี่ไtม่มีการซ้ากนั กบั เวบ็ ไซตอ์ ่ืน ) 3
ศัพท์เบอื้ งต้นเกย่ี วกบั เวบ็ ไซต์ (ต่อ) • Webpage คือ หนา้ เอกสารของบริการ www ที่อยใู่ นรูปแบบ HTML ภายในประกอบดว้ ยขอ้ ความ ภาพ ลิงค์ Web page แต่ ละหนา้ จะเชื่อมโยงกนั เพ่อื ใหเ้ ราเรียกดูเอกสารหนา้ อื่น ที่เก่ียวขอ้ งได้ อยา่ งสะดวก ไม่ตอ้ งระบุ URL เองทุกคร้ัง • Homepage คือ Web page หนา้ แรกที่ผใู้ ชเ้ ห็นเม่ือเขา้ มายงั Web site มกั ถูกออกแบบใหโ้ ดดเด่น น่าสนใจ และมีลิงคเ์ ช่ือมโยง ไปเวบ็ เพจหนา้ อื่น • Website คือ Web page หลาย หนา้ ที่มีเน้ือหาเก่ียวขอ้ งกนั ประกอบเขา้ ดว้ ยกนั 4
5
ศพั ทเ์ บ้ืองตน้ เก่ียวกบั เวบ็ ไซต์ (ต่อ) • Web browser คอื โปรแกรมสาหรับเรียกดูเวบ็ เพจ โดยจะแปลคาส่ัง HTML แล้วประมวลผล เพอ่ื แสดงผลออกมาเป็ น Web page เช่น Internet Explorer (IE), Mozilla Firefox, Safari, Opera, และ Netscape Navigator เป็ นต้น • Web server คอื เครื่องคอมพวิ เตอร์ทีท่ าหน้าทใี่ ห้บริการข้อมูลใน www ซ่ึงเกบ็ Web page bแลrะoโปwรแsกeรrมจเรัดียกกาขรอบขร้ิอกมารูลเโมดื่อยผร้ะูใชบ้ตุท้อี่องยกู่ขาอรดงขู W้อมูลeใbนลpกั aษณgะeททีเ่ ร่ีอียยกู่ใวน่าเคUร่ือRงLServer กจ็ ะใช้ Web • Upload คอื การส่งข้อมูลจากเคร่ืองของเราไปยงั Web Server เม่อื เราสร้าง Web page แต่ละหน้าแล้ว ต้องส่งข้อมูลไปเกบ็ ไว้ที่ Web Server ที่เป็ นเคร่ือง คอมพวิ เตอร์ทใ่ี ห้บริการข้อมูล www โดยอาศัยโปรแกรม FTP • Search engine เป็ นเครื่องมอื หรือโปรแกรมในการค้นหาเวบ็ ต่างๆ โดยมีการเกบ็ รายช่ือเวบ็ ไซต์ แแลสะดขง้อผมลไูลดท้สเ่ี กะย่ีดววขก้อรงวตด่าเรง็วๆ ของเวบ็ ไซต์ และนามาจัดเกบ็ ไว้ใน server เพอ่ื ให้สามารถค้นหาและ เช่น google.com, yahoo.com, bing.com, altavista.com, sanook.com เป็ นต้น 6
รูปแบบของเวบ็ ไซต์ แบ่งได้เป็ น 2 รูปแบบหลกั ๆ คอื 1. Static Website 2. Dynamic Website 7
รูปแบบของเวบ็ ไซต์ 1. Static Website หมายถงึ เวบ็ ไซต์ทสี่ ร้างด้วยภาษา HTML ธรรมดา และบนั ทกึ เป็ นไฟล์นามสกลุ .html เนือ้ หาข้อความ รูปภาพในหน้าเวบ็ เพจน้ันจะเป็ นไปตามทเี่ ราเขยี นกาหนดไว้ Static Website เหมาะกบั เวบ็ ไซต์ทมี่ ขี นาดไม่ใหญ่ จานวนหน้าเวบ็ เพจไม่มาก ไม่มกี ารเปลยี่ นแปลงข้อมูลบ่อยๆ และไม่มกี ารตดิ ต่อฐานข้อมูล 2. Dynamic Website หมายถงึ เวบ็ ไซต์ทหี่ น้าเวบ็ เพจสามารถเปลย่ี นแปลงข้อมูลเองได้ โดยไม่ต้อง เขยี นแต่ละหน้าเวบ็ เพจเอง เช่น กระดานข่าว (Webboard), ระบบสืบค้นข้อมูล เวบ็ ไซต์รูปแบบนีจ้ ะถูกสร้างด้วยภาษา Script แบบ Server Side Script เช่น PHP, ASP, ASP.Net, JSP และอนื่ ๆ ไฟล์เอกสารทไี่ ด้จะมนี ามสกลุ .php, .asp เป็ นต้น และมกั จะมกี ารตดิ ต่อกบั ฐานข้อมูลเพอ่ื บนั ทกึ ข้อมูลลงในฐานข้อมูล หรือนาข้อมูลจากฐานข้อมูลขนึ้ มาแสดงผลเป็ นหน้าเวบ็ เพจ 8
การเขยี นเวบ็ ไซต์ด้วยภาษา HTML 9
HTML คอื อะไร HTML ยอ่ มาจากคาวา่ HyperText Markup Language เป็น ภาษาที่ใชใ้ นการแสดงผลของเอกสารบนเวบ็ ไซต์ หรือเวบ็ เพจ เป็น ภาษาท่ีพฒั นาโดย World Wide Web Consortium (W3C) HTML เป็นภาษาท่ีสาคญั มากกบั เทคโนโลยบี นเวบ็ ไซต์ ไม่วา่ คุณจะเขียนโปรแกรมบนเวบ็ ไซตด์ ว้ ยภาษาใด เช่น PHP, ASP, Perl หรืออ่ืน คุณกต็ อ้ งมีความจาเป็นในการแสดงผลขอ้ มูลออกมา ยงั Web Browser ดว้ ยภาษา HTML เป็นหลกั หรือใหเ้ รามองวา่ HTML คือ Output ในการแสดงผลสู่จอภาพของ Web Browser 10
HTML คอื อะไร (ต่อ) ภาษา HTML เป็นภาษาพ้นื ฐานหรือเป็นเรื่อง BASIC ท่ี ผตู้ อ้ งการจดั ทาเวบ็ ไซตจ์ าเป็นตอ้ งรู้ ปัจจุบนั มีโปรแกรมอยา่ ง Dreamweaver ถกู พฒั นาข้ึนมาเพอ่ื อานวยความสะดวกใหเ้ รา ไม่ตอ้ งเรียนรู้ภาษา HTML กส็ ามารถสร้างเวบ็ เพจได้ แต่กวา่ 80 % ที่มีปัญหาเก่ียวกบั การออกแบบเวบ็ ส่วนใหญ่เกิดจากการ ไม่มีความเขา้ ใจในเรื่องของภาษาพ้นื ฐาน HTML น้ี พอมีปัญหา กไ็ ม่อาจจะแกไ้ ขได้ จึงคิดวา่ โปแกรม Dreamweaver ใชง้ านยาก ในบทเรียนน้ีจะทาใหเ้ รามีความเขา้ ใจในพ้นื ฐานของภาษา HTML มากข้ึน 11
ทาความเข้าใจ HTML HTML เป็น Script ที่เรียงลาดบั Tag (คาสงั่ ) ไว้ เป็น file ไฟลห์ น่ึง เพอ่ื เป็นตวั บอก Browser วา่ จะตอ้ งแสดง อะไร ลกั ษณะอยา่ งไร Tag จะประกอบดว้ ยเคร่ืองหมาย < ตามด้วยชื่อ Tag และ เครื่องหมาย > ซ่ึงโดยทวั่ ไป Tag จะมีเป็นคู่ เพอ่ื เปิ ดและปิ ดคาสงั่ โดย Tag เปิ ดจะมีลกั ษณะดงั ขา้ งตน้ แต่ Tag ปิ ดจะเพิม่ Slash (/) หนา้ Tag เท่าน้นั ตวั อยา่ งเช่น คาสงั่ body <body>…………….</body> Tag จะพิมพด์ ว้ ยตวั อกั ษรใหญ่ หรือเลก็ กไ็ ด้ 12
โครงสร้างพนื้ ฐานของ HTML 13
โครงสร้างพนื้ ฐานของภาษา HTML โครงสร้างของ HTML น้นั ถือวา่ เป็นโครงสร้างท่ีเป็นมาตรฐาน ซ่ึงหากวา่ วนั หน่ึง เราไดฝ้ ึกเขียนภาษาอ่ืน เรากอ็ าจจะทาความ เขา้ ใจกบั ภาษาเหล่าน้นั ไดด้ ี เพราะวา่ มีความรู้ และความเขา้ ใจใน โครงสร้างของ HTML เป็นพ้นื ฐานมาก่อน สิ่งท่ีจะตอ้ งจดจากค็ ือ ทุกคร้ังท่ีจะเขียน Script กจ็ ะตอ้ ง เปิ ด แทก็ เสมอ < >เช่น <html> และเมื่อจบ script หรือคาสงั่ ต่าง กจ็ ะ ตอ้ งปิ ดแทก็ ดว้ ยเครื่องหมายน้ีเสมอ </ > เช่น </html> ซ่ึงแทก็ เปิ ด และปิ ดน้นั กจ็ ะเขียนในรูปแบบน้ีโดยตลอดนนั่ เอง แต่วา่ คาสง่ั ใน แทก็ เปิ ดและปิ ดน้นั จะเป็นอยา่ งไรน้นั กข็ ้ึนอยกู่ บั คาสง่ั ต่าง 14
โครงสร้างพนื้ ฐานของภาษา HTML (ต่อ) ไฟลเ์ อกสาร HTML ประกอบดว้ ยส่วนประกอบสอง ส่วนคือ Head กบั Body โดยสามารถเปรียบเทียบไดง้ ่าย กค็ ือ ส่วน Head จะคลา้ ยกบั ส่วนท่ีเป็น Header ของหนา้ เอกสารทวั่ ไป หรือบรรทดั Title ของหนา้ ต่างการทางานใน ระบบ Windows สาหรับส่วน Body จะเป็นส่วนเน้ือหาของ เอกสารน้นั โดยท้งั สองส่วนจะอยภู่ ายใน Tag <HTML>…</HTML> 15
โครงสร้างพนื้ ฐานภาษา HTML <html> <head><title>……</title> </head> ส่วนหวั <body> … ….. ….. .. ส่วน body ท่แี สดงผล </body> </html> <คาส่ัง> เป็ นลักษณะTag เปิ ด เช่น <html> <head> <title> <body> </คาส่ัง> เป็ นลักษณะTag ปิ ด เช่น </html> </head> </title> </body> 16
โครงสร้างคาส่ังมาตรฐานในการสร้างเวบ็ เพจต่างๆ • <html>........</html> วางไวท้ ่ีตน้ และทา้ ยของไฟล์ เพื่อให้ Browser รู้วา่ โคด๊ ที่กาลงั จะอ่าน และนาออกมาแสดงผล เป็นโคด๊ ของ html • <head>.......</head> ใชส้ าหรับกาหนดช่ือเร่ืองของเวบ็ เพจ แต่จะ ไม่ปรากฏใหเ้ ห็นผา่ นทาง Browser ซ่ึง บางคร้ังการแทรก script ของ java script กม็ กั จะแทรกไวร้ ะหวา่ ง <head>นนั่ เอง • <title>..........</title> ใชแ้ สดงขอ้ ความดา้ นบนของโปรแกรม browser จะตอ้ งเขียนไวร้ ะหวา่ ง <head>......</head> เสมอ • <body>……..</body> ใชแ้ สดงส่วนของเน้ือหาภายในเวบ็ เพจ 17
ตวั อย่างการเขียนโค๊ดของ Html 18
ตวั อย่างการบนั ทึกไฟล์ Html 1. ต้งั ชื่อลงทา้ ยดว้ ย. html 2. คลิกเลือก All Files 3. กด Save เพื่อบนั ทึก 19
ลองดูผลลพั ธ์ทไ่ี ด้ ขอ้ ความที่อยใู่ นแทก็ Title ขอ้ ความที่อยใู่ นแทก็ Body 20
ข้อความลกั ษณะหัวเร่ือง (Heading) ข้อความลกั ษณะหัวเร่ือง จะกากบั ด้วยแทก็ <Hn> โดย <Hn>....Heading Text ... </Hn> n คอื ตวั เลขแสดงขนาดของตัวอกั ษร ค่าของ n น้ันจะมคี ่าอยู่ที่ 1-6 n = 1 จะมีขนาดตวั อกั ษรหัวเรื่องใหญ่สุด n = 6 จะมขี นาดตวั อกั ษรหัวเร่ืองเลก็ สุด สามารถเพม่ิ /ลดขนาดโดยใช้เครื่องหมาย + หรือ - นาหน้า ตัวเลขได้ เช่น -1 หรือ +5 เป็ นต้น 21
•การกาหนดขนาดของตวั อกั ษร • <FONT SIZE=\"ค่ากาหนดขนาดของตวั อกั ษร\">..........</FONT> กาหนดเป็นตวั เลขซ่ึงจะมีคา่ 1 - 7 โดย * ค่ามาตรฐานจะมีค่าจะอยทู่ ี่ 3 * ค่าตวั เลขท่ีเป็น 1 และ 2 น้นั จะเป็นการยอ่ ขนาดของตวั อกั ษร * คา่ ตวั เลข 4 ถึง 7 น้นั จะเป็นการขยายขนาดของตวั อกั ษร 22
การใส่สีพนื้ หลงั ให้กบั เวบ็ เพจ 23
การใส่สีพนื้ หลงั ให้กบั เวบ็ เพจ ในบทเรียนน้ี เราจะมาดูโคด๊ ท่ี ใส่สีพ้นื หลงั ให้ Background กนั ดูนะครับ แต่ขอแนะนาวา่ เราควรเลือกสีใหเ้ หมาะสมกบั ตวั หนงั สือ หรือไม่กภ็ าพประกอบต่าง ภายในเวบ็ เพจดว้ ย มิฉะน้นั อาจจะออกมาไม่สวยงาม 24
การใส่สีให้กบั พนื้ หลงั มคี าส่ังดงั ต่อไปนี้ 25
ผลลพั ธ์ท่ีได้ 26
การใส่สีพนื้ หลงั ให้กบั เวบ็ เพจ นอกเหนือจากการกาหนดโคด๊ ของสีพ้ืนหลงั ใหเ้ ป็น โคด๊ แบบ รหสั ค่าสี(เช่น #FFCCFF) แลว้ คุณยงั สามารถที่จะกาหนดค่าสีเป็น แบบตวั อกั ษรแทนชื่อสีไดโ้ ดยตรง 27
การใส่สีพนื้ หลงั ให้กบั เวบ็ เพจโดยใช้ชื่อสีโดยตรง 28
ผลลพั ธ์ทไ่ี ด้ 29
การจดั รูปแบบตวั อกั ษร 30
การจัดรูปแบบตวั อกั ษร ในบทน้ีเรามาดูเร่ือง รูปแบบต่าง ของตวั อกั ษรกนั ลองดูซิวา่ มีคาสง่ั อะไรเก่ียวกบั ตวั อกั ษรบา้ ง เวลาที่ เราทาเวบ็ ไซดเ์ ราจะได้ เลือกใชใ้ หเ้ หมาะสมได้ 31
การกาหนดลกั ษณะตวั อกั ษร <B>…….</B> ตวั หนา <I>……..</I> ตวั เอยี ง <U>…….</U> ตวั ขดี เส้น ใต้ <S>….…</S> ตวั ขีดฆ่า <TT>……. </TT> ตัว พมิ พ์ดดี <SUP>…</ SUP > ตวั ยก 32
การจัดรูปแบบตวั อกั ษร 33
ผลลพั ธ์ทไ่ี ด้ 34
สร้ างเส้ นใต้ พารากราฟ • รูปแบบ <HR> • <HR> ตีเสน้ • <HR NOSHADE> ตีเสน้ สีดา • <HR SIZE = 10> กาหนดความหนาของยาวเสน้ ใชห้ น่วย pixel • <HR SIZE = 300> กาหนดความยาวเส้น ใชห้ น่วย pixel • <HR ALIGN=CENTER>ใชใ้ นกรณีเส้นมีความยาวไม่เตม็ จอ และจดั ไวก้ ่ึงกลาง 35
ตัวอกั ษรวงิ่ • คาสง่ั <Marquee> • รูปแบบ <Marquee> ขอ้ ความ </Marquee> • <Marquee direction=“ทิศทางว่งิ ” • scrollamount=“ความเร็วในการวิง่ ” • scrolldelay=“เวลาหน่วง” color=“สี” > ขอ้ ความ </Marquee> • ทิศทาง = up down left right ตวั อย่าง Marquee 36
การใส่รูปภาพภายในเวบ็ เพจ 37
การใส่รูปภาพภายในเวบ็ เพจ การใส่ภาพภายในเวบ็ เพจ ตรงน้ีกม็ ีส่วนสาคญั สาหรับดึงดดู ตา ดึงดูดใจ ใหผ้ ทู้ ่ีผา่ นเขา้ มาในเวบ็ ไซดข์ องเรา ตวั อย่างโค๊ดการใส่รูปภาพภายในเวบ็ เพจ 38
ผลลพั ธ์ทไ่ี ด้ 39
การใส่ ตาราง 40
การสร้างตาราง โครงสร้างตารางโดยทว่ั ไปจะประกอบไปดว้ ยแถวและคอลมั น์ โดยช่องขอ้ มลู ท่ี อยใู่ น แนวนอนเดียวกนั กค็ ือแถว และช่องขอ้ มูลที่อยตู่ รงกนั ในแนวต้งั กค็ ือ คอลมั นน์ น่ั เอง <TABLE> CAPTION>.........</CAPTION>> <TR> <TH>.........</TH> <TH>.........</TH> </TR> <TR> <TD>.........</TD> <TD>.........</TD> </TR> <TR> <TD>.........</TD> <TD>.........</TD> </TR> <<TABLE 41
• <TABLE> กาหนดการสร้างตาราง และมีคาสงั่ ปิ ดคือ </TABLE> • <CAPTION> เป็นการกาหนดคา หรือขอ้ ความอธิบายตาราง และ มีคาสง่ั ปิ ดคือ </CAPTION> • <TR> (Table Row) เป็นการกาหนดแถวของตาราง และ มีคาสง่ั ปิ ดคือ </TR> • <TH> (Table Head) เป็นการกาหนดหวั เรื่องในคอลมั น์ และ มีคาสงั่ ปิ ดคือ </TH> • <TD> (Table Data) เป็นการกาหนดขอ้ มูลในตาราง และมีคาสง่ั ปิด คือ </TD> 42
ตัวอย่างการสร้างตาราง 12 34 <TABLE> <TR><TD>1</TD><TD>2</TD></TR> A <TR><TD>3</TD><TD>4</TD></TR> BC </TABLE> A B C <TABLE> <TR ALIGN=CENTER> <TD COLSPAN=2>A</TD></TR> <TR><TD>B</TD><TD>C</TD></TR> </TABLE> <TABLE> <TR><TD ROWSPAN=2>A</TD> <TD>B</TD></TR> <TR><TD>C</TD></TR> </TABLE> 43
การเช่ือมโยง 44
การเช่ือมโยง (Link) การเช่ือมโยงหรือ Link เป็นการกาหนดจุดท่ีเราจะ เคลื่อนยา้ ยไปยงั ปลายทางหรือจุดหมายท่ีเราตอ้ งการ ในการเขียนคาสง่ั เช่ือมโยงขอ้ มลู น้นั จะตอ้ งทราบ “จุดหมาย” และ “ปลายทาง” ถึงจะสามารถทาการเชื่อมโยงได้ สาเร็จ การเช่ือมโยงทาได้ 2 แบบ • เช่ือมโยงดว้ ยขอ้ ความ • เชื่อมโยงดว้ ยรูปภาพ 45
ตวั อย่างโค๊ดการเช่ือมโยง (Link) 46
ผลลพั ธ์ทไ่ี ด้ จุดหมายปลายทาง จุดที่ทาการเช่ือมโยง 47
การสรา้ ง Frame • Frame คือ กรอบรายการทมี่ ีประโยชน์ ในการแบ่งเนือ้ ที่ใน page มีผลทาให้ 1 page แสดงไดห้ ลายเอกสาร โดยท่ี แต่ละเอกสารไม่จาเป็นต้อง เปล่ยี นพร้อมกัน 48
ส่วนประกอบการทา FRAME • <FRAMESET > - แทนส่วน Body • <FRAME > ………... • <FRAME > ………... • </FRAMSET> 49
คาสง่ั FRAMESET • <FRAMESET • BORDER = ความกวา้ งของขอบ • FRAMEBORDER= YES|NO • ROWS = ค่าของแถว (Pixel) หรือ % แถว,…,* • COLS = คา่ ของคอลมั น์ (Pixel) หรือ คอลมั น์,…,*> • …….. • </FRAMSET> 50
Search
