การสร้างเวบ็ อยา่ งง่าย ๆ ดว้ ยภาษา HTML
การสร้างเวบ็ อย่างง่าย ๆ ด้วยภาษา HTML ก่อนที่เราจะไดส้ ร้างเวบ็ ดว้ ยภาษา html น้นั เราจะตอ้ งทาความรู้จกั กบั มนั เสียก่อน เพ่ือจะไดม้ ีความรู้พ้ืนฐานเกี่ยวกบั ภาษา html ภาษา html เป็นพ้นื ฐานของการทาเวบ็ ไซต์ เขียนง่าย แทบจะไม่มีความรู้เรื่อง html ก็สามารถเขียนไดแ้ ลว้ เพราะแค่พมิ พข์ อ้ ความที่ตอ้ งการ โดยไมต่ อ้ งมีฟอร์ม แลว้ เซฟเป็ น .htm หรือ.html ก็ใชไ้ ด้ แลว้ อีกอยา่ งสามารถเปิ ดกบั Browser ไดเ้ ลย ไม่เหมือนกบั ภาษา php หรือ asp ท่ีตอ้ งมีเซิร์ฟเวอร์มารองรับ จึงสามารถเปิ ดได้ เพราะถา้ ไม่มีเซิร์ฟเวอร์มารองรับ ผลท่ีไดม้ นั จะเป็นโคด้โผล่ข้ึนมาแทน และอีกอยา่ งที่สาคญั ภาษา html น้นั สามารถใชร้ ่วมกบั ภาษา php และ asp ไดโ้ ดยไมม่ ีปัญหา โดยส่วนมาก ถา้ เป็นเวบ็ ที่มีการแสดงผลธรรมดา หรือ ไม่มี Application คือหมายความวา่ ที่ไม่มีระบบสมาชิก ระบบคน้ หา เวบ็ บอร์ด จะเขียนดว้ ยภาษา html ท้งั สิ้น เพราะเหตุผลที่วา่ ไวข้ า้ งตน้ ก็ คือ เขียนง่าย ถึงแมภ้ าษา html จะเขียนง่าย แต่การที่เขียนง่ายนี่แหละที่ทาใหไ้ ม่มีลูกเล่นอะไรเลย จึงตอ้ งใช้ Java Script เขา้ มาช่วย ซ่ึงเจา้ ตวั น้ีแหละท่ีทาใหเ้ วบ็ ที่สร้างดว้ ยภาษา html ดูเด่นเป็นประกายข้ึนมาเยอะเลย เพราะสามารถแสดงลูกเล่นไดห้ ลายอยา่ งคาสั่งพนื้ ฐานของการทาเวบ็ ด้วย ภาษา HTML1. คาส่ังพนื้ ฐานทบี่ ังคับต้องมี คาสั่งแรก เป็นคาส่งั พ้นื ฐานจริง ๆ เพราะเป็ นรูปแบบของการเขียนภาษาแบบ html ที่จริงตรงน้ีไม่ตอ้ งมีก็ไดอ้ ยา่ งที่ไดบ้ อกไวใ้ น รู้จกั กบั ภาษา html แลว้ เพราะเพยี งแคเ่ ซฟเป็ น .htm หรือ .htmlมนั ก็จะแสดงผลออกมา แตเ่ พอื่ ใหเ้ กิดความสวยงามเราก็คงจะเขียนดีกวา่ นะ ไปดูกนั เลย <html> <head> <title> </title> </head>
<body> </body> </html> นี่คือ เป็ นรูปแบบของภาษา html ถา้ สังเกตใหด้ ี ถา้ เร่ิมตน้ คาสัง่ จะมีคาสงั่ อยใู่ นเคร่ืองหมาย<> และเมื่อจบคาส่งั จะมีเคร่ืองหมาย / อยใู่ น <> ดว้ ย ก็คือ อยใู่ นรูป </> เป็นการปิ ดคาส่ังน้นั ๆอนั ท่ีจริงการปิ ดคาสัง่ น้นั ไม่ตอ้ งมีกไ็ ดแ้ ต่ที่มีก็เพ่ือสวยงาม (อีกและ) และกเ็ พ่ือจะไดร้ ู้วา่ ปิ ดคาส่ังอะไรไป <html> </html> เป็นรูปแบบให้เรารู้วา่ ตอนน้ีไดใ้ ชภ้ าษา html อยโู่ ดยใส่คาส่ังตา่ ง ๆ เขา้ ไปในช่องวา่ งที่เวน้ ไวใ้ ห้ คาส่ังต่าง ๆ ท่ีกล่าวมาในส่วนน้ีกจ็ ะประกอบไปดว้ ย 1. ส่วนของ <head> </head> ในส่วนน้ีชื่อก็ คือ \"หวั \" หมายความวา่ ถา้ เราใส่คาส่งัไปในส่วนน้ีมนั จะไปแสดงในส่วนอ่ืน ๆ ท่ีไม่ใช่ในส่วนเน้ือหา ส่วนท่ีไมใ่ ช่เน้ือหากจ็ ะมี ไตเติ้ลบาร์ ก็คือ บริเวณท่ีอยขู่ า้ งบนของขอบหนา้ ต่าง สกอลบาร์ กค็ ือ ที่เลื่อน และสุดทา้ ย สเตตสั บาร์ ก็คือ บริเวณที่อยขู่ า้ งล่างของหนา้ ต่าง ในส่วนน้ีกจ็ ะใส่คาสงั่ พ้นื ฐานก็คือ 1.1 <title> </title> ในช่องวา่ งใหใ้ ส่ช่ือท่ีคุณตอ้ งการ มนั จะไปแสดงที่ไตเติล้บาร์ 1.2 ในส่วน head น้ี เราสามารถจะใส่ Java Script เพือ่ ให้เวบ็ เราดูโดดเด่นได้ 2. ส่วนของ <body> </body> ในส่วนน้ีก็ใหใ้ ส่เน้ือหา คาสัง่ แสดงผลต่าง ๆ ลงในช่องวา่ ง มนั จะไปแสดงผลในส่วนของเน้ือหา2. คาส่ังพนื้ ฐานทจี่ าเป็ น การทาพนื้ หลงั พ้ืนหลงั ท่ีเป็นสีตา่ ง ๆ ใชค้ าสั่ง <body bgcolor=\"ใส่ช่ือสีหรือรหสั สี\"></body> ตอ้ งใส่ไวใ้ นแทก็ ของ <body> สาหรับชื่อสีก็ใส่ไป อยา่ งเช่น red ก็คือสีแดง สาหรับรหสั สีน้นั จะเขียนอยใู่ นรูป#xxxxxx ตรง xxxxxx กใ็ หใ้ ส่ตวั เลขหรืออกั ษรภาษาองั กฤษ อกั ษรองั กฤษใหใ้ ช้ A-F
ส่วนพ้ืนหลงั ท่ีเป็นรูปภาพ ใชค้ าสั่ง <body background=\"ท่ีอยขู่ องไฟลร์ ูปภาพครับ\"></body> ตอ้ งใส่ไวใ้ นแทก็ <body> เช่นเดียวกบั พ้ืนหลงั ที่เป็นสี การใส่ที่อยขู่ องไฟลถ์ า้ จะใหใ้ ส่แบบส้ัน ๆ ก็ควรใหอ้ ยใู่ นโฟลเดอร์เดียวกบั เวบ็ เพจของเรา เช่น เวบ็ เพจอยทู่ ่ี C:\ กค็ วรเซฟรูปภาพท่ี C:\ เวลาเขียนคาสัง่ ก็จะเขียนไดด้ งั น้ี <body background=\"ช่ือรูปภาพ\"></body> โดยส่วนมากจะเกบ็ รูปภาพไวใ้ นโฟลเดอร์ image ซ่ึง image น้ีจะอยใู่ นโฟลเดอร์เดียวกบั ไฟลเ์ วบ็ เพจเวลาเขียนก็แคพ่ มิ พ์ image/ช่ือรูปภาพ ตัวอกั ษร ใชค้ าสง่ั <font face=\"ใส่ชื่อฟอนตข์ องตวั อกั ษร\" size=\"ใส่ขนาดของตวั อกั ษร\"color=\"ใส่ชื่อสีหรือรหสั สี\">ใส่ขอ้ ความ</font> face คือ ชื่อฟอนตส์ ามารถดูไดจ้ ากโปรแกรมที่ใชพ้ ิมพ์ เช่น MS Word ครับ size คือ ขนาดตวั อกั ษร ในเวบ็ จะไม่เหมือนกบั โปรแกรมทว่ั ไปท่ีใชพ้ มิ พง์ านนะครับ คือถา้ ใส่ 1 ขนาดจะประมาณ 8 ในโปรแกรมท่ีใชพ้ ิมพง์ านอะครับ ใส่ 2 = 10 ใส่ 3 = 12 ลองใส่ไปเรื่อย ๆ ครับ ถา้ ใส่ 7 ก็ประมาณ 72 แลว้ ครับใหญม่ ากครับ color คือ สีตวั อกั ษรน้นั ก็เหมือนพ้ืนหลงั ใส่ไดท้ ้งั ชื่อและรหสั สีรูปแบบตัวอกั ษร ตวั หนา ใชค้ าสง่ั <b>ใส่ขอ้ ความ</b> ตวั เอียง ใชค้ าส่ัง <i>ใส่ขอ้ ความ</i> ขีดเส้นใต้ ใชค้ าสั่ง <u>ใส่ขอ้ ความ</u> ถา้ จะใหม้ ีท้งั ตวั หนา ตวั เอียง และขีดเส้นใต้ ใหใ้ ส่ท้งั หมดไปก็จะเป็นดงั น้ี <b><i><u>ใส่ขอ้ ความ</u></i></b>การจัดรูปแบบ ซา้ ย ใชค้ าสั่ง <p align=\"left\">ใส่ขอ้ ความหรือชื่อท่ีอยขู่ องรูปภาพ</p> ก่ึงกลาง ใชค้ าส่งั <p align=\"center\">ใส่ขอ้ ความหรือชื่อท่ีอยขู่ องรูปภาพ</p> ขวา ใชค้ าส่ัง <p align=\"right\">ใส่ขอ้ ความหรือชื่อที่อยขู่ องรูปภาพ</p>
ชิดขอบ ใชค้ าส่ัง <p align=\"justify\">ใส่ขอ้ ความหรือช่ือท่ีอยขู่ องรูปภาพ</p>เว้นช่องไฟ ใช้คาสั่ง ใช้ 1คร้ังจะเวน้ ได้ 1 ช่องเวน้ บรรทดั ใชค้ าสั่ง <br>ใช้ <br> 1 คร้ัง จะเวน้ ได้ 1 บรรทดัการทากรอบ (Frame) ใชค้ าส่งั <ifram name=\"ชื่อเฟรม\" src=\"ชื่อเพจหรือ URL เวบ็ ที่ตอ้ งการใหแ้ สดง\"width=\"ความกวา้ ง\" height=\"ความสูง\" frameborder=\"จะใหม้ ีกรอบหรือเปล่า\" scolling=\"จะใหม้ ีแถบเล่ือนหรือเปล่า\"></iframe> name คือ ช่ือของเฟรม ถา้ ในเพจน้นั ๆ มีหลายเฟรมกค็ วรต้งั ชื่อใหไ้ ม่ซ้ากนั src คือ ชื่อของเพจ หรือ URL ของเวบ็ ที่ตอ้ งการใหม้ าแสดงในกรอบ width คือ ความกวา้ งของเฟรม จะใส่เป็น pixels หรือ เปอร์เซ็นต์ ก็ได้ height คือ ความสูงของเฟรม จะใส่เป็น pixels หรือ เปอร์เซ็นต์ กไ็ ด้ framborder คือ กรอบของเฟรม ถา้ ไมใ่ หม้ ี ใส่ 0 ถา้ มี ใส่ 1 scolling คือ แถบเลื่อน จะใหม้ ีหรือเปล่า ถา้ ไมใ่ หม้ ี ใส่ no ถา้ มี ใส่ yesการเชื่อมโยง (Link) Link ไปยงั อีกเพจนึงของเรษหรืออีกเวบ็ ใชค้ าส่งั <a href=\"ช่ือท่ีอยเู่ พจ หรือ URL ของเวบ็ ท่ีตอ้ งการไป\" target=\"ตอ้ งการใหแ้ สดงผลยงั ไง\" target=\"เวลาเอาเมาส์ไปช้ีจะใหม้ ีขอ้ ความอะไรแสดงข้ึนมา\">ใส่ขอ้ ความหรือชื่อที่อยขู่ องรูปภาพ</a>
href คือ ท่ีอยขู่ องท่ีที่เราจะไป ถา้ เป็นเพจของเราใหใ้ ส่ช่ือไฟลไ์ ปเลยเหมือนกบั ทารูปภาพใหเ้ ป็นพ้ืนหลงั ถา้ เป็น URL กใ็ หใ้ ส่ชื่อเวบ็ ไป target คือ เป้ าหมาย หรือลกั ษณะการแสดงผล วา่ เวลาเรากดลิ้งคแ์ ลว้ จะเป็นลกั ษณะอยา่ งไร ดูไดจ้ ากขา้ งล่าง ถา้ ไม่ใส่ จะลิ้งคไ์ ปโดยใชห้ นา้ ตา่ งเดิมท่ี ใส่ ชื่อเฟรม จะลิ้งคไ์ ปโดยแสดงที่เฟรมน้นั ๆ ตามช่ือท่ีไดต้ ้งั ไว้ ใส่ _blank จะลิ้งคไ์ ปโดยเปิ ดหนา้ ตา่ งใหม่ ใส่ _parent จะใชก้ บั เพจที่มีเฟรมอยู่ ซ่ึงเฟรมน้นั จะมีลิ้งค์ พอกดลิ้งคไ์ ปกจ็ ะแสดงที่เพจแม่ กค็ ือเพจท่ีมีเฟรมอยเู่ ลย ถา้ ไมใ่ ส่มนั กจ็ ะแสดงในเฟรมน้นั เทา่ น้นั title คือ ขอ้ ความท่ีพอเราเอาเมาส์ไปวางไวแ้ ลว้ จะแสดงขอ้ ความออกมาLink E-Mailใชค้ าสงั่ <a href=\"mailto:ใส่ E-Mail Address ครับ\">ใส่ขอ้ ความครับหรือช่ือที่อยขู่ องรูปภาพ</a>การนารูปภาพมาแปะใชค้ าสั่ง <img src=\"ช่ือท่ีอยขู่ องรูปภาพ\" width=\"ความกวา้ ง\" height=\"ความสูง\" border=\"มีขอบหรือไม\"่ > src คือ ที่อยขู่ องรูปภาพ ถา้ อยใู่ นโฟลเดอร์เดียวกนั ใหใ้ ส่ชื่อรูปภาพไดเ้ ลย อยา่ งกบั ที่อธิบายไวแ้ ลว้ ตอนนตน้ width คือ ความกวา้ งของรูป จะใส่เป็น pixels หรือ เปอร์เซ็นต์ กไ็ ด้ height คือ ความสูงของรูป จะใส่เป็น pixels หรือ เปอร์เซ็นต์ กไ็ ด้
border คือ ขอบของรูป ถา้ ไมใ่ หม้ ี ใส่ 0 ถา้ มี ใส่ 1การทาตาราง ใชค้ าส่งั <table border=\"มีขอบหรือไม่\" cellpadding=\"ความสูงของเซลล\"์cellspacing=\"ระยะห่างเซลลจ์ ากขอบของตาราง\" bordercolor=\"สีของขอบตาราง\" width=\"ความกวา้ ง\" height=\"ความสูง\">ใส่เซลลต์ าราง</table> border คือ ขอบของตารางมีหรือไม่ ถา้ มีใส่ 1 ถา้ ไมม่ ี ใส่ 0 cellpadding คือ ความสูงของเซลลใ์ ส่เป็น Pixels cellspacing คือ ระยะห่างของเซลลจ์ ากขอบตาราง ใส่เป็น Pixels bordercolor คือ สีของขอบตาราง ใส่เป็นช่ือสี หรือรหสั ก็ไดค้ รับ ถา้ ไม่ไดใ้ หม้ ีขอบตารางไมต่ อ้ งใส่กไ็ ด้ width คือ ความกวา้ งของตาราง ใส่เป็น Pixels หรือ เปอร์เซ็นต์ กไ็ ด้ height คือ ความสูงตารางของตาราง ใส่เป็น Pixels หรือ เปอร์เซ็นต์ ไม่ตอ้ งใส่กไ็ ด้ สาหรับเซลล์ตารางสร้างได้ดงั นี้ เซลลต์ ารางแบบคอลมั น์ ใชค้ าสั่ง <td width=\"ความกวา้ ง\" bgcolor=\"สีพ้นื หลงั \">ใส่ขอ้ ความหรือที่อยขู่ องรูปภาพ</td> เซลลต์ ารางแบบแถว ใชค้ าสั่ง <tr width=\"ความกวา้ ง\" bgcolor=\"สีพ้ืนหลงั \">ใส่ขอ้ ความหรือท่ีอยขู่ องรูปภาพ</tr> ใหใ้ ส่เซลลต์ ารางลงไปใน <table> </table> น้ีเลย width คือ ความกวา้ งของเซลล์ ใส่เป็น Pixels หรือ เปอร์เซ็นต์ ก็ได้
bgcolor คือ สีพ้ืนหลงั ถา้ ใส่เป็นรูปภาพกท็ าแบบเดียวกบั ทาพ้ืนหลงั ดว้ ยรูปภาพ อยา่ งที่ไดบ้ อกเมื่อตอนตน้ เมื่อรู้จกั คาสง่ั ตา่ ง ๆ ของภาษา html กนั แลว้ ก็มาเริ่มตน้ ทางานไดเ้ ลยเริ่มสร้างเวบ็ ด้วยภาษา HTML 1. สาหรับโปรแกรมท่ีใชน้ ้นั ก็คือ Notepad เป็นโปรแกรมท่ีมีอยใู่ น Windows ทุกรุ่นอยู่ โปรแกรมน้ีเป็นโปรแกรมท่ีใชว้ ธิ ีเขียนโคด้ คาส่ัง สาหรับการเรียกน้นั กค็ ือเริ่มท่ี Start -> Programs -> Accessories -> Notepad2. ลองมาสร้างโฮมเพจดู โดยใชค้ าส่งั พ้ืนฐานตา่ ง ๆ ท่ีจาเป็นในการสร้างเวบ็ อยา่ งที่ไดเ้ ขียนอธิบายไวใ้ นส่วนของ คาสง่ั พ้นื ฐานในการสร้างเวบ็โดยพิมพต์ ามขา้ งล่าง หรือ Copy ไปไดเ้ ลย <html> <head> <title>ทดลองสร้างเวบ็ </title> </head> <body bgcolor=\"pink\"> <p align=\"center\"><font face=\"AngsanaUPC\" size=\"5\" color=\"red\"> <b>นี่ คือ หนา้ ตาเวบ็ ของเรา</b><br>
<u>สวยละซ่ี</u><br><i>ขอบคุณที่ชมนะ</i><br> <a href=\"http://www.createwebsite.cjb.net\" target=\"blank\" title=\"คลิกเลย\">น่ีคือเวบ็ของเรา</a><br> <a href=\"mailto:[email protected]\">ติดต่อเราไดท้ ี่น่ีนะ!</a><br> <hr width=\"80%\" color=\"yellow\"> </font></p> </body> </html>3. เมื่อใส่ขอ้ ความ ภาพ ตา่ ง ๆ จนเป็นที่น่าพอใจแลว้ ตอ้ งการจะดูตวั อยา่ งงานที่สร้างข้ึน ใหท้ าการเซฟงานก่อนโดยเลือกไปที่ File > save4. ในการเซฟเม่ือต้งั ช่ือเวบ็ แลว้ ใหพ้ ิมพค์ าวา่ .html ต่อทา้ ยชื่อเวบ็ ท่ีไดต้ ้งั ไวด้ งั ตวั อยา่ ง
5. หลงั จากทาการบนั ทึกเรียบร้อย กใ็ หเ้ ปิ ดไฟลท์ ี่บนั ทึก โดยการดบั เบิล้ คลิกที่ตวั ไฟลไ์ ดเ้ ลย พอดบั เบิล้ คลิกเสร็จ Web Browser จะถูกเปิ ดออกมาพร้อมกบั มีผลงานของเรามาแสดงดว้ ย6. เมื่อสร้างเวบ็ ข้ึนมาแลว้ แต่ตอ้ งการใหม้ ีลูกเล่นและตอ้ งการจะตกแต่งใหส้ วยงามก็ตอ้ งใช้ JAVAScript มาช่วย สาหรับการใส่ Java Script ในภาษา html น้นั จะใส่ไดใ้ น 3 ส่วนดว้ ยกนั คือ 1. ในส่วนของ <head> </head> 2. ในส่วนของ <body> </body> 3. ในส่วนของ <head> </head> และ <body> </body> ก็แลว้ แต่ Java Script วา่ คาสั่งไหนจะใส่ไวท้ ่ีใด สาหรับเวบ็ ท่ีแจก Java Script ก็มีดงั น้ี 1. http://www.codetukyang.com 2. http://www.javafile.com 3. http://www.free-javascript.com เมื่อไดโ้ คด้ ที่ถูกใจก็ Copy ใส่ใน html ไดเ้ ลย
ชดุ คำสง่ั หลกั สำหรบั สรำ้ งเว็บเพจ ตามปกตเิ ว็บเพจจะสรา้ งขนึ้ ดว้ ยภาษา HTML (Hyper Text Markup Language ) ซงึ่ มคี าสงั่ พนื้ ฐาน ดังตอ่ ไปน้ี <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> และสงิ่ ทตี่ อ้ งการใหแ้ สดงผลเมอ่ื ผา่ นโปรแกรมเบราเซอร์ ทัง้ ขอ้ ความ(Text) ภาพ(Image) การแสดงรายการ(List) และ การเชอื่ มโยง(Link) จะเพมิ่ คาสง่ั อน่ื ๆ ไวภ้ ายใตค้ าสงั่ <BODY> เกอื บทัง้ สนิ้ ซง่ึ จะไดศ้ กึ ษาในโอกาสตอ่ ไป ขนำด ลกั ษณะ และสขี องตวั อกั ษรขนำดของตวั อกั ษรเราสามารถกาหนดขนาดของตัวอักษรได ้ 2 วธิ ี 1. ในกรณที เ่ี ป็ นหัวขอ้ (Heading) สามารถใชค้ าสงั่ ตอ่ ไปนี้ <H1>ขนาดใหญส่ ดุ </H1> <H2>ขนาดใหญ<่ /H2> <H3>ขนาดกลาง</H3> <H4>ขนาดปกต<ิ /H4> <H5>ขนาดเล็ก</H5> <H6>ขนาดเล็กสดุ <H6> 2. ในกรณีทั่วไป จะใชค้ าสง่ั <FONT SIZE=คา่ ตวั เลข> เชน่ <FONT SIZE=3>ตัวอักษรขนาด 3</FONT> หรอื <FONT SIZE=5>ตวั อักษรขนาด 5</FONT>ลกั ษณะของตวั อกั ษรลักษณะของตวั อกั ษร สามารถกาหนดได ้ 3 แบบคอื<B>ตวั หนำ</B><I>ตวั เอยี ง</I>
<U>ขดี เสน้ ใตต้ ัวอักษร</U> ชนดิ (Font) ของตวั อกั ษร การเลอื ก Font ของตัวอกั ษร สามารถทาไดโ้ ดยใชค้ าสงั่ ดังนี้ <FONT FACE=\"ชอื่ FONT\"> เชน่ <FONT FACE=\"Ms Sans Serif\"> สขี องตวั อกั ษร สขี องตัวอักษร สามารถกาหนดได ้ 2 แนวทางคอื 1. ใชค้ าสง่ั <FONT COLOR=ชอ่ื ส>ี เชน่ <FONT COLOR=red>ตวั อักษรสแี ดง</FONT> หรอื <FONT COLOR=green>ตวั อกั ษรสเี ขยี ว</FONT> 2. ใชค้ าสงั่ <FONT COLOR=รหัสส>ี เชน่ <FONT COLOR=#FF00FF>ตัวอกั ษรสชี มพ<ู /FONT> หรอื <FONT COLOR=#0000FF>ตวั อกั ษรสนี ้าเงนิ </FONT>ชอื่ สที ใี่ ชแ้ ทนรหสั สไี ด ้ กำรกำหนดสขี องตวั อกั ษร (เพม่ิ เตมิ ) ตามปกตสิ ขี องตัวอกั ษรสามารถกาหนดโดยใชค้ าสง่ั <FONT COLOR=\"ชอ่ื ส\"ี > ไดอ้ ยแู่ ลว้ แตย่ ังมวี ธิ กี าหนดสขี องตวั อกั ษรใน กรณอี น่ื ๆ อกี ดงั น้ี กรณีที่ 1 กำหนดสขี องตวั อกั ษรใหเ้ ป็ นสเี ดยี วกนั ทง้ั หนำ้ ทาไดโ้ ดยการเพมิ่ เตมิ คาสงั่ TEXT ใน <BODY> ดังน้ี <BODY TEXT=\"ชอ่ื ส\"ี > เชน่ <BODY TEXT=green> เป็ นการกาหนดใหต้ วั อกั ษรมสี เี ขยี วทัง้ เอกสาร กรณีท่ี 2 กำหนดสใี หก้ บั ตวั อกั ษรทใี่ ชใ้ นกำรเชอื่ มโยง (Link) ตามปกตสิ ขี องตัวอกั ษรทถ่ี กู กาหนดใหเ้ ป็ นจดุ เชอื่ มโยงจะมสี ดี ังนี้ กอ่ นคล๊กิ จดุ เชอ่ื มโยง (เรยี กวา่ link) ตัวอักษรจะมสี นี ้าเงนิ (blue) ขณะคล๊กิ ทจ่ี ดุ เชอื่ มโยง (เรยี กวา่ active link หรอื alink) ตัวอกั ษรจะมสี แี ดง (red) เมอ่ื คล๊กิ ทจี่ ดุ เชอ่ื มโยงไปแลว้ (เรยี กวา่ visisted link หรอื vlink) ตวั อกั ษรจะมสี มี ว่ ง (purple) อยา่ งไรก็ตามเราสามารถเปลย่ี นสขี องกรณตี า่ ง ๆ ขา้ งตน้ ได ้ โดยใชค้ าสง่ั LINK, ALINK และ VLINK เพม่ิ เตมิ ไวท้ ี่ <BODY> ดังน้ี <BODY LINK=\"ชอื่ ส\"ี ALINK=\"ชอ่ื ส\"ี VLINK=\"ชอ่ื ส\"ี >
เชน่ <BODY LINK=green ALINK=blue VLINK=brown> เป็ นการกาหนดสขี องตวั อกั ษรกอ่ นคล๊กิ มสี เี ขยี ว ขณะคล๊กิ มสี นี ้า เงนิ และเมอ่ื คล๊กิ แลว้ จะเปลย่ี นเป็ นสนี ้าตาล ชดุ คำสง่ั ในกำรกำหนดพนื้ หลงั (Background)พน้ื หลัง หรอื Background ของเวบ็ เพจแตล่ ะหนา้ สามารถกาหนดในคาสง่ั <BODY> หรอื ในตารางสามารถกาหนดในคาสงั่ <TABLE>หรอื <TR> หรอื <TD> มวี ธิ กี ารกาหนดได ้ 2 แบบดังนี้แบบที่ 1 กำรกำหนดพน้ื หลงั เป็ นสี ใชช้ ดุ คาสงั่ ตอ่ ไปนี้ bgcolor=\"ชอื่ ส\"ี หรอื bgcolor=\"รหัสส\"ี เชน่ <BODY bgcolor=red> หรอื <TABLE bgcolor=FF00FF> เป็ นตน้แบบที่ 2 กำรกำหนดพนื้ หลงั เป็ นรปู ภำพ ใชช้ ดุ คาสงั่ ตอ่ ไปน้ี background=\"ชอื่ ไฟล\"์ เชน่ <BODY background=\"tree.gif\"> หรอื <TABLE background=\"marble.jpg\"> เป็ นตน้ กำรแทรกภำพ (Image)กำรแทรกภำพ ตามปกตภิ าพทจี่ ะใชแ้ สดงในเว็บเพจ นยิ มใชภ้ าพทม่ี ชี อื่ สกลุ ของภาพเป็ น .JPG หรอื .GIF เพราะเป็ นไฟลภ์ าพทม่ี ขี นาด เล็ก สามารถแสดงผลไดร้ วดเร็ว จงึ ไมต่ อ้ งเสยี เวลาในการรอ ใหภ้ าพปรากฏนานเกนิ ไป การแทรกภาพใชค้ าสง่ั ดงั น้ี <IMG SRC=\"ชอ่ื ภาพ\" WIDTH=ขนาดความกวา้ ง HEIGHT= ขนาดความสงู > เชน่ ภาพชอื่ girl.jpg มขี นาดความกวา้ ง 80 และความสงู 100 จะใชค้ าสง่ั แสดงภาพเป็ น <IMG SRC=\"girl.jpg\" WIDTH=80 HEIGHT=100>
หรอื ในกรณที ตี่ อ้ งการแสดงภาพทม่ี ขี นาดเทา่ กบั ตน้ ฉบบั ก็จะ ใชค้ าสง่ั เพยี งสนั้ ๆ ดงั น้ี <IMG SRC=\"ชอ่ื ภาพ\"> เชน่ <IMG SRC=\"girl.jpg\">คำสง่ั ทใี่ ชป้ ระกอบกบั คำสง่ั แสดงภำพ 1. กาหนดใหภ้ าพอยทู่ างซา้ ยและขอ้ ความ(ทต่ี ามมา) อยู่ ทางขวา เพมิ่ คาสง่ั ALIGN=LEFT ไวใ้ นคาสงั่ แสดงภาพ เชน่ <IMG SRC=\"boy.jpg\" ALIGN=LEFT> 2. กาหนดใหภ้ าพอยทู่ างขวาและขอ้ ความ(ทตี่ ามมา) อยู่ ทางซา้ ย เพม่ิ คาสง่ั ALIGN=RIGHT ไวใ้ นคาสง่ั แสดงภาพ เชน่ <IMG SRC=\"boy.jpg\" ALIGN=RIGHT> 3. กาหนดขนาดของชอ่ งวา่ งระหวา่ งภาพกบั ขอ้ ความ(ที่ ลอ้ มรอบ) ในแนวนอน ใชค้ าสงั่ HSPACE=คา่ ตัวเลข(pixel) เชน่ <IMG SRC=\"boy.jpg\" HSPACE=20> 4. กาหนดขนาดของชอ่ งวา่ งระหวา่ งภาพกบั ขอ้ ความ(ท่ี ลอ้ มรอบ) ในแนวดง่ิ ใชค้ าสงั่ VSPACE=คา่ ตวั เลข(pixel) เชน่ <IMG SRC=\"boy.jpg\" VSPACE=20> 5. สามารถเขยี นคาสงั่ ในขอ้ 1-4 ประกอบกันได ้ เชน่ <IMG SRC=\"boy.jpg\" ALIGN=RIGHT VSPACE=20> ชดุ คำสง่ั พนื้ ฐำนในกำรสรำ้ งตำรำงตวั อยำ่ งที่ 1คาสง่ั สาหรับการสรา้ งตารางทม่ี ี 1 แถว 1 คอลมั นป์ ระกอบดว้ ยคาสง่ัดงั ตอ่ ไปน้ี<TABLE BORDER=1> คาสงั่ เปิดสาหรับการสรา้ ง คาสง่ั เปิดสาหรับการตาราง<TR> คาสง่ั สรา้ งคอลมั นท์ ่ี 1สรา้ งแถว คาสงั่ ปิดสาหรับการ<TD>ขอ้ มลู ในคอลัมน์ 1</TD></TR> คาสงั่ ปิดสาหรับการสรา้ งสรา้ งแถว</TABLE>
ตารางจะไดต้ ารางลกั ษณะน้ีขอ้ มลู ในคอลัมน์ 1ตวั อยำ่ งที่ 2คาสง่ั สาหรับการสรา้ งตารางทมี่ ี 1 แถว 2 คอลัมนป์ ระกอบดว้ ยคาสงั่ดงั ตอ่ ไปนี้<TABLE BORDER=1> คาสง่ั เปิดสาหรับการสรา้ งตาราง คาสงั่ เปิดสาหรับการ<TR>สรา้ งแถว คาสง่ั สรา้ งคอลมั นท์ ่ี 1<TD>ขอ้ มลู ในคอลมั น์ 1</TD> คาสง่ั สรา้ งคอลัมนท์ ี่ 2<TD>ขอ้ มลู ในคอลมั น์ 2</TD></TR> คาสง่ั ปิดสาหรับการสรา้ งแถว คาสง่ั ปิดสาหรับการสรา้ ง</TABLE>ตารางจะไดต้ ารางลักษณะน้ีขอ้ มลู ในคอลัมน์ 1 ขอ้ มลู ในคอลัมน์ 2ตวั อยำ่ งที่ 3คาสง่ั สาหรับการสรา้ งตารางทมี่ ี 2 แถว 2 คอลมั นป์ ระกอบดว้ ยคาสงั่ดังตอ่ ไปน้ี<TABLE BORDER=1> คาสงั่ เปิดสาหรับการสรา้ งตาราง คาสง่ั เปิดสาหรับการ<TR>สรา้ งแถวที่ 1<TD>ขอ้ มลู ในแถว 1 คอลัมน์ 1</TD> คาสงั่ สรา้ งคอลัมนท์ ี่ 1<TD>ขอ้ มลู ในแถว 1 คอลมั น์ 2</TD> คาสงั่ สรา้ งคอลัมนท์ ่ี 2 คาสง่ั ปิดสาหรับการ</TR>สรา้ งแถวที่ 1 คาสง่ั เปิดสาหรับการ<TR>สรา้ งแถวที่ 2<TD>ขอ้ มลู ในแถว 2 คอลัมน์ 1</TD> คาสงั่ สรา้ งคอลมั นท์ ี่ 1<TD>ขอ้ มลู ในแถว 2 คอลมั น์ 2</TD> คาสง่ั สรา้ งคอลมั นท์ ี่ 2 คาสงั่ ปิดสาหรับการ</TR>สรา้ งแถวท่ี 2 คาสง่ั ปิดสาหรับการสรา้ ง</TABLE>ตารางจะไดต้ ารางลักษณะน้ี
ขอ้ มลู ในแถว 1 คอลมั น์ 1 ขอ้ มลู ในแถว 1 คอลัมน์ 2ขอ้ มลู ในแถว 2 คอลมั น์ 1 ขอ้ มลู ในแถว 2 คอลัมน์ 2 กำรใชต้ ำรำงชว่ ยนำเสนองำนนอกจากตารางจะใชใ้ นการนาเสนอขอ้ มลู แลว้ เรายังสามารถใชช้ ดุ คาสง่ั ของตารางชว่ ยนาเสนองานในรปู แบบอน่ื ๆ ไดอ้ กีเชน่ตวั อยำ่ งที่ 1 ชว่ ยสรำ้ งหวั ขอ้ เรอื่ งใชห้ ลักการสรา้ งตารางทมี่ ี 1 แถว และ 1 คอลัมน์ ประกอบดว้ ยชดุ คาสงั่ ดงั ตอ่ ไปนี้<TABLE width=50% border=5><TR bgcolor=brown><TD align=center><font color=white>ของฝากจากเชยี งใหม่</font></TD></TR></TABLE>จะไดง้ านลักษณะนี้ ของฝำกจำกเชยี งใหม่ตวั อยำ่ งท่ี 2 กำรนำเสนองำนทม่ี ลี กั ษณะเป็ นคอลมั น์เชน่ 2 คอลัมน์ ก็ใชห้ ลักการสรา้ งตารางทมี่ ี 1 แถว และ 2 คอลมั น์ ไม่ตอ้ งมเี สน้ ตาราง แลว้ นาขอ้ มลู ไปบรรจไุ วใ้ นแตล่ ะสว่ นก็จะไดง้ านตามตอ้ งการ ชดุ คาสงั่ มดี งั ตอ่ ไปนี้<TABLE BORDER=0><TR><TD>ขอ้ มลู ในคอลัมน์ 1</TD><TD>ขอ้ มลู ในคอลัมน์ 2</TD></TR></TABLE>จะไดผ้ ลงานลักษณะน้ี คณะกรรมการนักเรยี นจัด กจิ กรรมแขง่ ขนั กรฑี าสี ระหวา่ งคณะ ประจาปี การศกึ ษา 2547 ประกอบดว้ ยคณะเทอด จรรยา คณะสามคั คี คณะ ศรวี ฒั นา คณะการณุ รักษ์ และคณะภักดพิ์ ริ ยี ์ เมอ่ื วนั ศกุ รท์ ่ี 5 พฤศจกิ ายน 2547 ณ สนามโรงเรยี น
ยพุ ราชวทิ ยาลยั โดยมี ผอู ้ านวยการประดษิ ฐ์ จันทรแ์ สนตอ เป็ น ประธานในพธิ เี ปิดและพธิ ี ปิดการแขง่ ขนั ชุดคำสง่ั ในกำรเชอ่ื มโยง (Link) มอี ยู่ 3 แบบ ดังนค้ี อืแบบท่ี 1 กำรเชอ่ื มโยงไปยงั ขอ้ มลู สว่ นอน่ื ๆ ในไฟลเ์ ดยี วกนัประกอบดว้ ยชดุ คาสง่ั ดังตอ่ ไปนี้ <A HREF=\"ชอ่ื ไฟลเ์ ดมิ #ชอื่ สว่ นทเี่ ชอ่ื มโยง\">ขอ้ ความ</A> เชน่ <A HREF=\"resume.html#education\">แนะนาตวั เอง</A> หมายเหตุ จะตอ้ งมกี ารกาหนดชอื่ education ไวต้ น้ บรรทัดท่ี ตอ้ งการเชอื่ มโยงไป (ในไฟล์ resume.html) ดว้ ยคาสง่ั <A NAME=\"education\">แบบท่ี 2 กำรเชอ่ื มโยงไปยงั ไฟลอ์ น่ื ทอี่ ยใู่ นเครอ่ื งเดยี วกนัประกอบดว้ ยชดุ คาสง่ั ดงั ตอ่ ไปนี้ <A HREF=\"ชอ่ื ไฟล\"์ >ขอ้ ความ</A> เชน่ <A HREF=\"name.html\">แนะนาตวั เอง</A>แบบท่ี 3 กำรเชอ่ื มโยงไปยงั ไฟลอ์ น่ื ทอี่ ยคู่ นละเครอ่ื งประกอบดว้ ยชดุ คาสงั่ ดังตอ่ ไปนี้ <A HREF=\"ชอื่ URL และไฟล\"์ >ขอ้ ความ</A> เชน่ <A HREF=\"http://www.hotmail.com\">www.hotmail.com</A> ชุดคำสง่ั ในกำรแสดงรำยกำร 1. กำรแสดงรำยกำรแบบมลี ำดบั (Order List) ใชแ้ สดงรายการสง่ิ ของทต่ี อ้ งแสดงไปตามลาดับ ประกอบดว้ ย
ชดุ คาสงั่ ดงั ตอ่ ไปน้ี <OL> <LI>คณะเทอดจรรยา <LI>คณะสามคั คี <LI>คณะศรวี ฒั นา <LI>คณะการณุ รักษ์ <LI>คณะภักดพ์ิ ริ ยี ์ </OL> ผลลัพธท์ ไ่ี ดม้ ลี กั ษณะดังนี้ 1. คณะเทอดจรรยา 2. คณะสามคั คี 3. คณะศรวี ฒั นา 4. คณะการณุ รักษ์ 5. คณะภกั ดพ์ิ ริ ยี ์2. กำรแสดงรำยกำรแบบไมม่ ลี ำดบั (Unorder List)ใชก้ ับรายการสง่ิ ของทไ่ี มต่ อ้ งมลี าดบั หรอื ลาดับไมส่ าคัญประกอบดว้ ยชดุ คาสง่ั ดังตอ่ ไปน้ี <UL> <LI>เชยี งใหม่ <LI>ขอนแกน่ <LI>อยธุ ยา <LI>เพชรบรุ ี <LI>ภเู ก็ต </UL> ผลลพั ธท์ ไ่ี ดม้ ลี กั ษณะดงั นี้ เชยี งใหม่ ขอนแกน่ อยธุ ยา เพชรบรุ ี ภเู ก็ต แนวทำงในกำรสรำ้ งเมนู1. ดาวนโ์ หลดภาพแบ็คกราวนด์ bg17.gif และภาพตกึ ยพุ ราชyupparaj.jpg ไวใ้ น My Documents
2. สรา้ งเมนู ตัง้ ชอื่ วา่ menu.html โดยใชค้ าสงั่ สรา้ งตาราง ดังน้ี สรา้ งตารางที่ 1 (กาหนดความกวา้ ง 100%) ประกอบดว้ ย บรรทัดจานวน 2 บรรทัด และ 1 คอลัมน์ ดังนี้ <table width=100% border=1> <tr> <td>ขอ้ มลู ในบรรทัดที่ 1</td> </tr> <tr> <td>ขอ้ มลู ในบรรทัดท่ี 2</td> </tr> </table> ในบรรทัดแรกหรอื บรรทดั บน ใหบ้ รรจภุ าพแบ็คกราวนดแ์ ละ ขอ้ ความตามทโ่ี จทยก์ าหนด ในบรรทัดท่ี 2 ใหบ้ รรจคุ าสงั่ สรา้ ง ตารางอกี 1 ตาราง (เรยี กวา่ ตารางที่ 2) ตารางที่ 2 มี 1 บรรทัด แตม่ ี 2 คอลัมน์ กาหนดความกวา้ ง คอลมั นแ์ รกเป็ น 30% ดังชดุ คาสง่ั คอื <table width=100% border=1> <tr> <td width=30%>ขอ้ มลู ในบรรทัดท่ี 1 คอลัมนท์ ่ี 1</td> <td>ขอ้ มลู ในบรรทัดที่ 1 คอลมั นท์ ี่ 2</td> </tr> </table> ขอ้ มลู ในคอลัมนท์ ี่ 1 ซง่ึ อยซู่ า้ ยมอื บรรจคุ าสงั่ สรา้ งตาราง (เรยี กวา่ ตารางที่ 3) สว่ นคอลมั นท์ ่ี 2 ทอ่ี ยขู่ วามอื บรรจภุ าพ อาคารตกึ ยพุ ราช ตารางที่ 3 มี 9 บรรทัดและ 1 คอลัมน์ กาหนดความกวา้ งเป็ น 100% ดงั ชดุ คาสงั่ คอื <table width=100% border=1> <tr> <td>ขอ้ มลู ในบรรทัดที่ 1</td> </tr> <tr> <td>ขอ้ มลู ในบรรทัดที่ 2</td> </tr> <tr> <td>ขอ้ มลู ในบรรทัดท่ี 3</td> </tr> <tr> <td>ขอ้ มลู ในบรรทัดที่ 4</td> </tr> <tr>
<td>ขอ้ มลู ในบรรทัดที่ 5</td> </tr> <tr> <td>ขอ้ มลู ในบรรทัดที่ 6</td> </tr> <tr> <td>ขอ้ มลู ในบรรทัดที่ 7</td> </tr> <tr> <td>ขอ้ มลู ในบรรทัดท่ี 8</td> </tr> <tr> <td>ขอ้ มลู ในบรรทัดที่ 9</td> </tr> </table> ในแตล่ ะบรรทัดกาหนดสพี นื้ และขอ้ ความตามทก่ี าหนดในใบ งานภาษา html คอื ภาษาคอมพวิ เตอรท์ ใ่ี ชใ้ นการสรา้ งโฮมเพจเนือ่ งจากสามารถ Run คาสงั่ ตา่ งๆ ไดบ้ นโปรแกรม Web Browser ทว่ั ไป โรงเรยี นพระกมุ ารรอ้ ยเอ็ดไดก้ าหนดหลกั สตู รภาษา html ใหก้ บันักเรยี นชนั้ ม.2 ซง่ึ ในปีการศกึ ษา 2546 น้ี นักเรยี นจะสามารถใชค้ าสงั่ ตา่ งๆ ไดเ้ พอ่ื เป็ นพน้ื ฐานในการสรา้ ง โฮมเพจทวั่ ไป และพฒั นาถงึ ขนั้ Dynamic Page ความหมายของ HTML โครงสร้างของภาษา HTML คาส่ังพนื้ ฐานทวั่ ไปของภาษา html ตัวอย่าง code html แสดงความคิดเห็นเกย่ี วกบั การใช้ภาษา HTMLความหมายของ HTMLHTML หรือ HyperText Markup Language เป็นภาษาคอมพวิ เตอร์รูปแบบหน่ึง ที่มีโครงสร้างการเขียนโดยอาศยั ตวั กากบั (Tag)ควบคุมการแสดงผลขอ้ ความ, รูปภาพ หรือวตั ถุอื่นๆ ผา่ นโปรแกรมเบราเซอร์ แตล่ ะ Tag อาจจะมีส่วนขยายท่ีเรียกวา่ Attribute สาหรับระบุ หรือควบคุมการแสดงผล ของเวบ็ ไดด้ ว้ ยHTML เป็นภาษาที่ถูกพฒั นาโดย World Wide Web Consortium (W3C) จากแม่แบบของภาษาSGML (Standard Generalized Markup Language) โดยตดั ความสามารถบางส่วนออกไป เพอื่ ใหส้ ามารถทาความเขา้ ใจและเรียนรู้ไดง้ ่าย และดว้ ยประเดน็ ดงั กลา่ ว ทาใหบ้ ริการ WWW เตบิ โตขยายตวั อยา่ งกวา้ งขวางตามไปดว้ ย TagTag เป็ นลักษณะเฉพาะของภาษา HTML ใชใ้ นการระบรุ ปู แบบคาสง่ั หรอื การลงรหสั คาสงั่ HTMLภายในเครอื่ งหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยท่ี Tag HTML แบง่ ได ้ 2ลักษณะ คอื Tag เดย่ี วเป็ น Tag ทไ่ี มต่ อ้ งมกี ารปิดรหสั เชน่ <HR>, <BR> เป็ นตน้Tag เปิด/ปิดเป็ น Tag ทป่ี ระกอบดว้ ย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมเี ครอ่ื งหมาย slash
( / ) นาหนา้ คาสงั่ ใน Tag นัน้ ๆ เชน่ <B>…</B>, <BLINK>…</BLINK> เป็ นตน้ กลบั ขา้ งบนโครงสร้างของภาษา HTMLไฟลเ์ อกสาร HTML ประกอบดว้ ยส่วนประกอบสองส่วนคอื Head กบั Body โดยสามารถเปรียบเทียบไดง้ ่ายๆ กค็ ือ ส่วน Head จะคลา้ ยกบัส่วนที่เป็น Header ของหนา้ เอกสารทว่ั ไป หรือบรรทดั Title ของหนา้ ตา่ งการทางานในระบบ Windows สาหรับส่วน Body จะเป็นส่วนเน้ือหาของเอกสารน้นั ๆ โดยท้งั สองส่วนจะอยภู่ ายใน Tag <HTML>…</HTML><html> <head> <tag คาสงั่ > </head> <body> <tag คาสงั > </body></html> กลบั ขา้ งบนคาสั่งพนื้ ฐานทวั่ ไปของภาษา html คาสง่ั ความหมาย รูปแบบ กาหนดขอ้ ความ <head><title> บนไตเติลบา เป็น <title>ขอ้ ความ</title><background> คาสงั่ ในในส่วน </head> <head> ใชร้ วมกบั <body> หรือ <table> เพ่อื <body background=\"ช่ือ.นามสกลุ รูปภาพ\"> กาหนดพ้ืนหลงั เป็ นรูปภาพ<bgcolor> ใชร้ วมกบั <body> หรือ <table> เพ่ือ <body bgcolor=ช่ือสี> กาหนดสีของพ้นื หลงั แสดงขอ้ ความ<font กาหนดสีของ <font color=ช่ือสี size=\"ขนาดกาหนดไดต้ ้งั แต่ 1 ถึง 7\"colorsize ขอ้ ความ face=\"ชนิดของตวั อกั ษรเช่น Angsana new เป็นตน้ \">face> กาหนดขนาดของ ขอ้ ความ</font> ขอ้ ความ
กาหนดชนิดของ ขอ้ ความ<b> ขอ้ ความหนา <b>ขอ้ ความ</b><i> ขอ้ ความเอียง <i>ขอ้ ความ</i><u> ขอ้ ความขดี เสน้ ใต้ <u>ขอ้ ความ</u><marquee> ทาใหข้ อ้ ความ <marquee>ขอ้ ความ</marquee><marquee เล่ือนจากซา้ ยไป <marquee behavior=alternate>ขอ้ ความbehavior=alternate> ขวา </marquee> ทาใหข้ อ้ ความ<br> เล่ือนจากซา้ ยไป<hr> ขวาแลว้ ยอ้ นกลบั<img ข้ึนบรรทดั ใหม่ <br>srcalt ขีดเสน้ <hr>widthheight> แสดงรูปภาพ<a กาหนดรูปภาพhreftarget> กาหนดขอ้ ความ เมื่อเอาเมาส์วาง <img src=\"ชื่อ.นามสกลุ ของภาพ\" width=\"ความกวา้ ง\"<table height=\"ความยาว\" alt=\"ขอ้ ความ\"> เช่น <imgwidth บนภาพbgcolor src=\"pic1.jpg width=\"80\" height=\"250\"border กาหนดความกวา้ งbordercolor> ของภาพ alt=\"ภาพหมอู รเอย้ หมอู ว้ น\"><tr><td> กาหนดความยาว ของภาพ กาหนดการ <a href=\"จดุ เชอื่ มโยง\" target=\"ลักษณะการ เชื่อมโยง เปิดหนา้ ตา่ ง\">ขอ้ ความ</a> เชน่ กาหนดจุดเชื่อม <a href=\"http://www.holy.ac.th\" โยง target=\"_blank\">โฮมเพจโรงเรยี นพระกมุ าร กาหนดการเปิ ด รอ้ ยเอ็ด</a> หนา้ ต่างใหม่ สร้างตาราง เช่น <table width=\"80%\" bgcolor=blue กาหนดความกวา้ ง border=\"2\" bordercolor=red> ของตาราง <tr> กาหนดสีพ้ืนของ <td>ฟตุ บอล</td> ตาราง <td>วอลเลบ่ อล</td> กาหนดความหนา <tr> ของเสน้ ขอบ จะได้ ตาราง 1 แถว 2 สดมน์ ความยาว 80% ของหนา้ จอ สี
กาหนดสีของเสน้ น้าเงิน และขอบ 2 pixel สีแดง สดมนท์ ี่ 1 มีขอ้ ความ ขอบ ฟตุ บอล สดมน์ท่ี 2 มีขอ้ ความวา่ วอลเลบ่ อล กาหนดจานวน แถว(แนวนอน) กาหนดจานวน สดมน(์ แนวต้งั )rowspan รวมแถว <td rowspan=\"จานวน cell ที่จะรวม\">colspan รวมสดมน์ <td colspan=\"จานวน cell ที่จะรวม\">ตวั อย่าง code html กลบั ขา้ งบน<html><head><title>ทดสอบการสร้างตาราง</title></head><body background=\"Picforweb/04_2.jpg\"><center><table width=\"80%\" border=\"1\" bordercolor=blue><tr><td colspan=\"4\" bgcolor=black><font size=\"5\" color=yellow><b><marqueebehavior=\"alternate\">โรงเรียนพระกมุ ารร้อยเอด็ </marquee></b></font></td></tr><tr><td rowspan=\"3\" bgcolor=blue border=\"1\" bordercolor=blackwidth=\"33%\"><center><img src=\"Picforweb/b_1.jpg\" widht=\"80\" height=\"100\"alt=\"อาคารมีคาแอล\"></center></td><td bgcolor=pink ><center><font size=\"5\" color=red face=\"AngsanaUPC\"><b><ahref=\"history.htm\" target=\"_blank\">ประวตั โิ รงเรียน</a></b></font></center></td><td bgcolor=gold><center><font size=\"5\" color=red face=\"AngsanaUPC\"><b><ahref=\"menager.htm\" target=\"_blank\">ผู้บริหาร</a></b></font></center></td></tr><tr><td bgcolor=pink><center><font size=\"5\" color=red face=\"AngsanaUPC\"><b><ahref=\"menager2.htm\" target=\"_blank\">แผนผงั การบริหารงาน</a></b></font></center></td><td bgcolor=gold><center><font size=\"5\" color=red face=\"AngsanaUPC\"><b><ahref=\"map.htm\" target=\"_blank\">แผนผงั โรงเรียน</a></b></font></center></td></tr><tr><td bgcolor=pink><center><font size=\"5\" color=red face=\"AngsanaUPC\"><b><ahref=\"vision.htm\" target=\"_blank\">ปรัชญา-คาขวญั </a></b></font></center></td><td bgcolor=gold><center><font size=\"5\" color=red face=\"AngsanaUPC\"><b><ahref=\"taecher.htm\" target=\"_blank\">บุคลกร</a></b></font></center></td></tr>
</table></center><br><hr><center><a href=\"http://www.holy.ac.th\" target=\"_blank\"><b>โฮมเพจโรงเรียนพระกมุ ารร้อยเอด็ </b></a></center><hr></body></html>ผลลพั ธ์ ประวตั โิ รงเรียน ผู้บริหารแผนผงั การบริหารงาน แผนผงั โรงเรียน ปรัชญา-คาขวญั บุคลกรโฮมเพจโรงเรียนพระกมุ ารร้อยเอด็แสดงความคดิ เห็นเกย่ี วกับการใช้ภาษา HTML กลบั ขา้ งบน
Search
Read the Text Version
- 1 - 24
Pages:
