ช่ือวิชา การสรางเวบ็ เพจดว ยภาษาเอชทีเอ็มแอล หนวยท่ี 3 ชื่อหนวย การจดั วางเนอ้ื หาและขอ ความบนหนา เวบ็ รหสั วิชา 20901-2004 ชื่อเรอื่ ง การตดั คำขน้ึ บรรทดั ใหม / การตดั คำขึน้ ยอหนา ใหม / การจดั วางตำแหนง ขอความในยอหนา / รปู แบบเอกสารตามท่กี ำหนด 1. สาระสำคญั โดยสว นใหญท ุกเว็บเพจมกั จะมขี อความยาวๆ บางหนา กย็ าวเปนพารากราฟ ดงั นนั้ จงึ ตองใชค ำสั่งทีเ่ กี่ยวขอ ง กบั การจัดยอหนา การตัดคำ การคนั่ หนา เพ่ือใหไ ดลกั ษณะของขอความเอกสารตามทีต่ องการ ขอ ความในเวบ็ เพจ จะดู นาสนใจ จูงใจใหผูใ ชเขามาอาน โดยการตกแตงดวยแทก็ ตาง ๆ ในภาษา HTML เชน รูปแบบของตัวอกั ษร สขี อง ตัวอักษร สีพนื้ ของเวบ็ เพจ ตัวอกั ษรเคลื่อนไหว 2. สมรรถนะประจำหนวย 1. การตดั คำข้นึ บรรทัดใหม<br/> 2. การตดั คำข้นึ ยอ หนา ใหม <p> 3. การจัดวางตำแหนง ขอความในยอหนา 4. การจัดรปู แบบเอกสารตามท่ีกำหนด 3. จุดประสงคการเรยี นรู 1. สามารถแสดงความรูความเขา ใจเก่ียวกบั หลกั การออกแบบเว็บเพจ 2. บอกขั้นตอนในการพัฒนาเว็บเพจ 3. สามารถแสดงความรใู นการกำหนดไฟลและโฟลเดอร 4. สาระการเรยี นรู 1. หลกั การออกแบบเว็บเพจ 2. ขนั้ ตอนการพัฒนาเว็บเพจ 3. การกำหนดไฟลและโฟลเดอร
ใบความรู หนว ยที่ 3 ช่ือวชิ า การสรา งเวบ็ เพจดวยภาษาเอชทเี อม็ แอล รหัสวิชา 20901-2004 ชอ่ื หนวย การจดั วางเน้อื หาและขอ ความบนหนาเว็บ สปั ดาหท ่ี 6-7 ชื่อเรือ่ ง การตัดคำขน้ึ บรรทดั ใหม / การตดั คำขนึ้ ยอหนาใหม / การจัดวางตำแหนง ขอความในยอหนา / รปู แบบเอกสารตามท่กี ำหนด การตดั คำข้นึ บรรทัดใหม โดยปกตเิ มื่อเราเขยี นขอมลู ตาง ๆ ใน Text Editor เม่อื นำไปแสดงผลท่ีบราวเซอรจ ะไมเหมอื นกับรปู แบบท่ีเรา เขียนใน Text Editor เพราะวา การจัดรูปแบบเอกสารตองใชคำส่ังภาษา HTML เพอ่ื กำหนดใหเอกสารมีรปู แบบตาม ตอ งการ เม่อื แสดงผลในเว็บบราวเซอร 1. การตดั คำขึน้ บรรทดั ใหม<br /> แท็ก <br /> เปน คำส่ังท่ีกำหนดจดุ สน้ิ สดุ ของบรรทดั (break rule) แลว ทำการขึน้ บรรทัดใหมเ พือ่ แสดง ขอ ความสวนท่ีเหลอื ในบรรทัดถัดไป คำสง่ั น้จี งึ ใหผ ลเสมอื นการกดคีย ENTER บนคยี บอรดนั่นเอง ขอสังเกต แทก็ <br /> สว นใหญมักนยิ มจะวางไวใ นตำแหนงสดุ ทายของประโยค โดยตอ งการใหแสดงผลประโยคใหมใน บรรทัดตอ มา ตวั อยางการใชแท็ก <br /> <!DOCTYPE HTML> <html> <head> <title>การตัดคำข้นึ บรรทดั ใหม</title> </head> <body> การใชงานคำสง่ั br <br />ซึ่งเปนคำส่งั ทท่ี ำใหข อความขึน้ บรรทัดใหม </body> </html> ผลลัพธทไี่ ด ภาพแสดงผลลพั ธท่ไี ดจ ากการใชคำสง่ั <br />
ใบความรู หนวยท่ี 3 ชื่อวชิ า การสรา งเว็บเพจดว ยภาษาเอชทีเอม็ แอล รหัสวิชา 20901-2004 ชอ่ื หนว ย การจัดวางเนื้อหาและขอ ความบนหนา เวบ็ สัปดาหที่ 6-7 ชอ่ื เรอ่ื ง การตดั คำข้นึ บรรทัดใหม / การตดั คำขนึ้ ยอ หนา ใหม / การจดั วางตำแหนง ขอ ความในยอ หนา / รูปแบบเอกสารตามที่กำหนด การตัดคำขนึ้ ยอหนาใหม 2. การตัดคำขน้ึ ยอหนา ใหม <p> แท็ก <p> เปนแท็กที่สั่งใหโปรแกรมเว็บบราวเซอรขึ้นยอหนาใหม (paragraph) โดยจะมีการเวนบรรทัด วางไว 1 บรรทดั รปู แบบแท็ก <p>ขอความท่ตี องการขนึ้ ยอ หนา ใหม< /p> ตวั อยางการใชงานแทก็ <p> <!DOCTYPE HTML> <html> <head> <title>การตัดคำขึน้ ยอหนา ใหม< /title> </head> <body> การใชง านคำสงั่ p <p>ซึ่งเปน คำสง่ั ที่ทำใหข อ ความข้ึนยอหนา ใหม< /p> </body> </html> ผลลพั ธท ไี่ ด ภาพแสดงผลลพั ธท่ไี ดจากการใชค ำสั่ง <p> ขอ สังเกต จะเห็นไดว า การขน้ึ บรรทดั ใหมของคำสงั่ <br> และ <p> น้นั การเวน วา งระหวางบรรทดั ของทง้ั สองมีความ แตกตางกัน โดยที่คำสงั่ <br> ชอ งวางระหวา งบรรทัดจะนอ ยกวา คำสั่ง <p>
ใบความรู หนวยที่ 3 ชอ่ื วิชา การสรา งเว็บเพจดว ยภาษาเอชทเี อม็ แอล รหัสวชิ า 20901-2004 ชือ่ หนว ย การจัดวางเนือ้ หาและขอความบนหนาเวบ็ สปั ดาหที่ 6-7 ชื่อเรอื่ ง การตดั คำขึ้นบรรทัดใหม / การตดั คำขึ้นยอ หนาใหม / การจดั วางตำแหนงขอความในยอหนา / รปู แบบเอกสารตามท่ีกำหนด การจัดวางตำแหนง ขอความในยอ หนา 3. การจดั วางตำแหนง ขอความในยอหนา เราสามารถจัดเรียงขอความในแตละยอหนาของเวบ็ เพจได โดยการกำหนดตำแหนง ในแอตทรบิ วิ ต align (Alignment) ของแทก็ p ดงั นี้ รูปแบบของแทก็ <p align= “ตำแหนง ”>ขอความ</p> คาที่กำหนดตำแหนง ของการจัดวางขอความไดแ ก left (ซา ย), center (ตรงกลาง), right (ขวา) และ justify (จัดเต็มพืน้ ท่ี) ตวั อยางการใชงานแทก็ <!DOCTYPE HTML> <html> <head> <title>การจัดตำแหนง การตัดคำขน้ึ ยอ หนาใหม< /title> </head> <body> <p align=”left”>การจดั วางตำแหนง ขอ ความในยอหนา ดานซาย</p> <p align=”center”>การจดั วางตำแหนง ขอความในยอ หนา ตรงกลาง</p> <p align=”right”>การจดั วางตำแหนงขอ ความในยอหนาดานขวา</p> <p align=”justify”>การจัดวางตำแหนง ขอ ความในยอหนา แบบจดั เตม็ พน้ื ท่ี ซึ่งขอความจะมี ลกั ษณะเทา กนั ทง้ั ดา นซา ยและดานขวา</p> </body> </html> ผลลัพธท ี่ได ภาพแสดงผลลัพธท ่ไี ดจ ากการใชคำสงั่ align ในรปู แบบตาง ๆ
ใบความรู หนวยท่ี 3 ชอ่ื วชิ า การสรา งเว็บเพจดวยภาษาเอชทีเอม็ แอล รหสั วิชา 20901-2004 ชอื่ หนว ย การจดั วางเน้ือหาและขอความบนหนาเว็บ สปั ดาหท่ี 6-7 ช่ือเรอ่ื ง การตดั คำขน้ึ บรรทัดใหม / การตดั คำข้นึ ยอหนา ใหม / การจัดวางตำแหนงขอความในยอหนา / รปู แบบเอกสารตามทีก่ ำหนด การจัดวางตำแหนงขอ ความในยอ หนา 4. การจัดรปู แบบเอกสารตามทีก่ ำหนด <pre> เปน การกำหนดใหแ สดงขอความทอี่ ยูในยอ หนาท่ีอยูในชุดคำสง่ั ดังกลาว เหมอื นกบั ทีพ่ ิมพไ มว าจะเปน การเวน วรรค หรอื ขึ้นบรรทัดใหม แตจะบงั คับใช fixed width fonts รูปแบบแท็ก <pre>ขอความ</pre> ตวั อยา งการใชแทก็ pre (Preformatted) <!DOCTYPE HTML> <html> <head> <title>การใชแท็ก pre (Preformatted)</title> </head> <body> <pre> HTML ยอ มาจาก Hyper Text Markup Language คอื ภาษาคอมพิวเตอรท่ใี ชในการแสดงผลของเอกสารบน website หรือที่เราเรยี กกันวา เวบ็ เพจ ถูกพฒั นาและกำหนดมาตรฐานโดยองคกร World Wide Web Consortium </pre> </body> </html> ผลลพั ธท ี่ได ภาพแสดงผลลพั ธทีไ่ ดจ ากการใชแท็ก pre (Preformatted)
ใบความรู หนว ยที่ 3 ชอื่ วชิ า การสรา งเวบ็ เพจดวยภาษาเอชทเี อม็ แอล รหสั วชิ า 20901-2004 ชือ่ หนว ย การจัดวางเน้ือหาและขอ ความบนหนา เวบ็ สปั ดาหที่ 6-7 ชื่อเร่ือง การตดั คำข้ึนบรรทดั ใหม / การตัดคำขนึ้ ยอ หนา ใหม / การจัดวางตำแหนงขอ ความในยอ หนา / รปู แบบเอกสารตามท่กี ำหนด การสรา งเสน ค่ัน 5. การสรา งเสนค่ัน<hr> แทก็ <hr> เปน แท็กที่แสดงเสนขีดค่นั ทางแนวนอน (horizontal rule) โดยอาจใชเ ปน เสน แบงเนื้อหาระหวาง บท หรอื เปนเสน ขดี คนั่ เพื่อความสวยงามและเปนระเบยี บของเน้ือหา เปน การกำหนดเสนคั่นซึ่งเปนคำสง่ั ท่ไี มตอ งมี คำสัง่ ปด (Single Tag) รปู แบบแท็ก <hr /> (เปนแทก็ วา งตอ งปด แท็กดว ย / หลงั จากแท็กคำสัง่ ) แอตทริบิวต (Attribute) คำอธิบาย รปู แบบการใชง าน width กำหนดความยาวของเสน ค่ัน มหี นวยเปนพกิ เซล หรอื % <hr width=“50” /> หรือ <hr width=“50%” /> size กำหนดความหนาของเสน ค่ัน มีหนวยเปน พกิ เซล หรือ % <hr size=“50”> หรอื <hr size=“50%”> noshade กำหนดใหเ สนค่นั เปนเสนทึบ <hr noshade=“noshade”> align กำหนดตำแหนงของเสนคน่ั ใหต ำแหนง ของการจดั วาง <hr align=“left” /> color ขอ ความไดแก left (ซา ย), <hr align=“right” /> center (ตรงกลาง) , right (ขวา) <hr align=“center” /> การระบสุ เี สน คั่น แสดงผลเฉพาะ IE โดยสามารถใสช่อื สี <hr color=“red” /> หรือ หรือ #รหสั สีอยางใดอยางหนึง่ <hr color=“#f0f8ff” /> ตัวอยางการใชแท็ก hr (Horizontal Rule) <!DOCTYPE HTML> <html> <head> <title>การใชแทก็ hr (Horizontal Rule)</title> </head> <body> เสน คัน่ ยาว=50% ความหนา=5 พกิ เซล ตำแหนง =ซา ย สเี สน คัน่ =สีแดง เสน ทึบ <hr width=”50%” size=”5″ align=”left” color=”red” noshade=”noshade” /> เสน คน่ั ยาว=50% ความหนา=5 พิกเซล ตำแหนง =ขวา สีเสน คน่ั =สีเหลือง เสนทบึ <hr width=”50%” size=”5″ align=”right” color=”yellow” noshade=”noshade” /> เสน คนั่ ยาว=50% ความหนา=5 พิกเซล ตำแหนง =ขวา สีเสน ค่นั =สีน้ำเงนิ เสน ทบึ <hr width=”50%” size=”5″ align=”center” color=”blue” noshade=”noshade” /> </body> </html>
ผลลพั ธท ี่ได ภาพแสดงผลลัพธท ่ไี ดจาก การใชแทก็ hr (Horizontal Rule)
Search
Read the Text Version
- 1 - 8
Pages:
