ชุดที่4

1 การกาหนดลักษณะของตัวอักษร TAG HTML คาชแี้ จงสาหรบั ครู การจัดกิจกรรมการเรียนรู้โดยใช้ชดุ การเรียนรู้การสรา้ งเว็บเพจด้วยภาษา HTML รายวชิ าเทคโนโลยี 3 รหสั วิชา ง23102 ชนั้ มธั ยมศกึ ษาปีท่ี 3 กลุม่ สาระการเรยี นรู้ การงานอาชพี และเทคโนโลยี ชุดท่ี 4 เรือ่ ง การกาหนดลักษณะของตวั อักษร TAG HTML ครูควรเตรียมความพร้อมและปฏิบตั ิตามคาแนะนา ดงั ต่อไปนี้ 1. ศกึ ษารายละเอียดเกยี่ วกับการใช้ชุดการเรยี นรกู้ ารสรา้ งเวบ็ เพจดว้ ยภาษา HTML รายวิชาเทคโนโลยี 3 รหัสวิชา ง23102 ชัน้ มัธยมศึกษาปีท่ี 3 กลุม่ สาระการเรยี นรู้ การงานอาชีพและเทคโนโลยี ชดุ ที่ 4 เรื่อง การกาหนดลักษณะของตัวอักษร TAG HTML และเตรยี มสื่อการเรยี นรทู้ ่ีใช้ 2. การจัดกจิ กรรมการเรียนรู้ ครูจะตอ้ งจดั กิจกรรมใหค้ รบตามทร่ี ะบไุ วใ้ น แผนการจดั การเรียนรู้ เพ่ือใหก้ จิ กรรมเป็นไปอย่างต่อเนอื่ งและบรรลุตามวัตถุประสงค์ 3. ก่อนทากิจกรรมทุกครงั้ ครูต้องอธบิ าย ชแี้ จง วิธกี ารปฏบิ ตั ใิ ห้ชดั เจน ให้นักเรยี น เข้าใจตรงกัน จงึ จะทาให้การจัดการเรียนรูบ้ รรลเุ ปาาหมายและมีประสิทธภิ าพ 4. ครคู วรกระตุ้นให้นกั เรยี นทกุ คนมสี ่วนร่วมในการทากิจกรรม เพื่อเปน็ การฝึกให้ นักเรียนร้จู กั การทางานร่วมกัน ช่วยเหลือซงึ่ กันและกัน รับผิดชอบตอ่ หนา้ ท่ีและกล้าแสดงออก สังเกตพฤติกรรมขณะท่ีทากิจกรรมและใหค้ วามช่วยเหลอื นักเรยี นดแู ลอยา่ งใกลช้ ิด

2 การกาหนดลักษณะของตัวอักษร TAG HTML บัตรคาสงั่ สาหรบั นกั เรียน ชุดการเรยี นรูก้ ารสรา้ งเวบ็ เพจด้วยภาษา HTML รายวิชาเทคโนโลยี 3 รหัสวชิ า ง23102 ชน้ั มัธยมศึกษาปีที่ 3 กล่มุ สาระการเรยี นรู้การงานอาชีพและเทคโนโลยี ชุดที่ 4 เรอื่ ง การกาหนด ลักษณะของตัวอักษร TAG HTML ใช้เวลาจานวน 2 ชว่ั โมง ใหน้ ักเรยี นปฏบิ ตั ิดงั น้ี 1. นกั เรยี นแบ่งกลมุ่ กล่มุ ละ 4 – 5 คน โดยคละกนั ระหว่างเกง่ ปานกลางและอ่อน แล้วเลือกประธานกลุ่ม และเลขานกุ ารกลุ่ม พร้อมต้งั ช่ือกล่มุ 2. นักเรยี นรบั ชุดการเรียนร้กู ารสรา้ งเวบ็ เพจด้วยภาษา HTML รายวชิ าเทคโนโลยี 3 รหัสวิชา ง23102 ชนั้ มัธยมศึกษาปที ี่ 3 กลมุ่ สาระการเรียนรู้การงานอาชพี และเทคโนโลยี ชดุ ที่ 4 เรื่อง การกาหนดลักษณะของตัวอักษร TAG HTML กล่มุ ละ 1 ชดุ 3. นักเรียนศึกษาบัตรคาสัง่ ให้เขา้ ใจอยา่ งละเอียด และปฏิบัติตามข้นั ตอนท่ีกาหนดให้ 4. นักเรยี นอา่ นมาตรฐานการเรยี นรู้ ตัวชว้ี ัด สาระสาคญั และ จุดประสงค์การเรยี นรู้ 5. นกั เรียนทาแบบทดสอบก่อนเรียนดว้ ยความซ่ือสตั ย์ไมเ่ ปดิ ดูเฉลยก่อน จานวน 10 ขอ้ เวลา 15 นาที ลงในกระดาษคาตอบก่อนเรยี น 6. ตรวจแบบทดสอบกอ่ นเรียนดว้ ยตนเอง และเขียนคะแนนท่ีได้ในช่องคะแนนทีไ่ ดใ้ น กระดาษคาตอบก่อนเรียน 7. นักเรียนศึกษาบัตรเนื้อหา ทาบัตรกจิ กรรม แลว้ ทาตามคาชแ้ี จงตามลาดบั ด้วยความตงั้ ใจ และความซ่ือสตั ย์ไมเ่ ปดิ ดูเฉลยก่อน 8. เม่ือเสร็จทุกข้ันตอน ใหเ้ ปดิ ดบู ตั รเฉลยกจิ กรรม และตรวจคาตอบ หากตอบผิด หรอื ไม่แน่ใจให้กลับไปศึกษาใหมอ่ กี ครงั้ 9. นักเรียนทาแบบทดสอบหลังเรียนด้วยความซื่อสัตย์ไม่เปดิ ดูเฉลย จานวน 10 ข้อ เวลา 15 นาที ลงในกระดาษคาตอบหลังเรียน 10. ตรวจแบบทดสอบหลงั เรยี นดว้ ยตนเอง และเขียนคะแนนที่ได้ในช่องคะแนนท่ไี ด้ใน กระดาษคาตอบหลงั เรียน 11. ส่งชุดการเรยี นรู้การสร้างเว็บเพจด้วยภาษา HTML รายวชิ าเทคโนโลยี 3 รหัสวชิ า ง23102 ชน้ั มธั ยมศึกษาปที ่ี 3 กลุม่ สาระการเรียนรู้การงานอาชพี และเทคโนโลยี ให้ครูผู้สอนเพ่ือตรวจคาตอบอกี คร้ัง และตรวจสอบคะแนนกอ่ นเรียน ระหว่างเรยี น และหลังเรยี น

3 การกาหนดลักษณะของตัวอกั ษร TAG HTML แผนผงั แสดงขัน้ ตอนการใช้ ชุดการเรียนรู้การสรา้ งเว็บเพจด้วยภาษา HTML มดี ังนี้ อ่านคาชีแ้ จง / บตั รคาสั่ง ศกึ ษาตัวชีว้ ดั และจุดประสงค์การเรียนรู้ ทาแบบทดสอบก่อนเรยี น ศกึ ษาบัตรเน้ือหา และทากจิ กรรมตามบัตรกจิ กรรม ทาแบบทดสอบหลงั เรียน ผ่านเกณฑ์ 80% ไม่ผา่ นเกณฑ์ ศกึ ษาชดุ การเรยี นรูก้ ารสรา้ งเว็บเพจดว้ ยภาษา HTML ชุดต่อไป

4 การกาหนดลักษณะของตัวอกั ษร TAG HTML มาตรฐานการเรยี นรู้ / ตวั ชวี้ ัด มาตรฐาน ง 3.1 เขา้ ใจ เห็นคณุ ค่า และใชก้ ระบวนการเทคโนโลยสี ารสนเทศใน การสบื คน้ ข้อมลู การเรยี นรู้ การสื่อสาร การแก้ปญั หา การทางาน และอาชีพอย่างมี ประสิทธิภาพ ประสิทธิผล มีคณุ ธรรม ตวั ช้วี ดั ง 3.1 ม.3/1 อธิบายหลักการทาโครงงานท่ีมีการใชเ้ ทคโนโลยีสารสนเทศ ง 3.1 ม.3/2 เขียนโปรแกรมภาษาขั้นพืน้ ฐาน สาระสาคญั จากเนื้อหาในหน่วยที่ผ่านมาท่ีไดก้ ลา่ วถงึ เร่ืองท่วั ไปเกย่ี วกับภาษาเอชทีเอ็มแอล คาสั่งเบ้ืองต้นของภาษาเอชทเี อม็ แอลทใี่ ชใ้ นการสร้างเวบ็ เพจ ในหนว่ ยนจ้ี ะกล่าวถึงคาสัง่ เพิม่ เติมทเ่ี ก่ยี วกับการจดั ย่อหนา้ การจัดรูปแบบของข้อความหัวเรือ่ ง การกาหนดรปู แบบ ของตัวอกั ษร และการกาหนดลกั ษณะของตัวอักษร เพอ่ื ให้สามารถทาการจดั รูปแบบ การแสดงผลของเอกสารเว็บให้เปน็ รูปแบบตามต้องการ จุดประสงคก์ ารเรยี นรู้ 1. บอกคาสั่งสาหรบั การทาหวั เรอ่ื งของเอกสาร และบอกคาสั่งสาหรบั การจดั ย่อ หน้าและการขึ้นบรรทดั ใหม่ได้ 2. บอกคาส่งั สาหรับการจดั รปู แบบอักษรและบอกคาสง่ั สาหรับการกาหนด ลกั ษณะตัวอักษรได้ 3. ปฏิบัติทกั ษะในการใช้งานคาสงั่ สาหรับจัดการหนา้ เอกสารและตัวอักษรได้ ถูกต้อง 4. มีความซอ่ื สตั ย์ ความใฝ่ร้ใู ฝ่เรยี น มคี วามรับผดิ ชอบ ความมรี ะเบยี บวนิ ยั

5 การกาหนดลกั ษณะของตัวอักษร TAG HTML แบบทดสอบก่อนเรยี น เรอื่ ง การสรา้ งเว็บเพจดว้ ยภาษา HTML รายวชิ าเทคโนโลยี 3 รหัสวิชา ง23102 ช้ันมัธยมศึกษาปที ี่ 3 กลมุ่ สาระการเรยี นรู้การงานอาชพี และเทคโนโลยี ชุดที่ 4 เร่อื ง การกาหนดลกั ษณะของตัวอกั ษร TAG HTML คาชีแ้ จง นักเรยี นเลือกคาตอบท่ีถูกต้องท่สี ดุ เพียงคาตอบเดยี ว แลว้ ทาเคร่ืองหมาย  ลงในกระดาษคาตอบ (10 คะแนน) 1. คาส่งั ในการกาหนดข้อความหัวเรอ่ื งในข้อใด เปน็ การกาหนด หัวเรอ่ื งใหม้ ีขนาดน้อยท่สี ุด ก. <h1> หวั เร่ือง </h1> ข. <h2> หวั เรอ่ื ง </h2> ค. <h4> หวั เรอื่ ง </h4> ง. <h6> หวั เร่ือง </h6> 2. ข้อใดกลา่ วไม่ถกู ต้องเก่ียวกับการใช้แทก็ <hn> ก. n ทีใ่ ช้มีค่าต้งั แต่ 1 ถงึ 6 ข. รูปแบบของแท็กทใี่ ช้ </hn> ค. แบง่ ข้อความโดยการใชห้ วั เรือ่ งท่ีมขี นาดต่างกนั ง. <h1> จะมตี ัวอกั ษรน้อยทส่ี ุดใชก้ บั ขอ้ ความหลกั 3. ถ้าต้องการกาหนดสพี น้ื หลังของเอกสารเวบ็ เปน็ สชี มพู จะตอ้ งใช้คาสัง่ ในขอ้ ใด ก. < Body bgcolor=\"Pink\" > ข. < Html bgcolor=\" Pink\" > ค < Body background=\"Pink\" > ง. < Html background=\"Pink\" >

6 การกาหนดลกั ษณะของตัวอักษร TAG HTML 4. เมอ่ื กาหนดรหัสสมี าตรฐาน RGB เป็น #44BBFF แมส่ ีแต่ละสีจะถูกกาหนดให้มคี า่ เป็นเท่าใด ในระบบเลขฐาน 16 ก. สีแดง = BB , สนี า้ เงิน = FF , สเี ขยี ว = 44 ข. สีแดง = FF , สนี า้ เงิน = BB , สเี ขยี ว = 44 ค. สแี ดง = 44 , สีน้าเงนิ = BB , สีเขียว = FF ง. สแี ดง = 44 , สีน้าเงิน = FF , สเี ขยี ว = BB 5. คาส่ังในข้อใดเป็นคาสัง่ ทใี่ ช้สาหรับขึ้นบรรทดั ใหมใ่ นการแสดงผลข้อมลู ก. <B> ข. <BR> ค. <TR> ง. <INS> 6. ข้อใดคอื รปู แบบของการเพิ่มหมายเหตุเตือนความจา (แต่โปรแกรมจะไม่อ่าน) ก. //หมายเหตุ ข. /*หมายเหตุ*/ ค. <!--หมายเหตุ--> ง. <!--หมายเหตุ--!> 7. ข้อใดคอื การใช้แท็ก <HR> แสดงเส้นคั่นแนวนอนยาว 30% ของความกวา้ งหนา้ จอ ก. <30%:HR/> ข. <HR=\"30\"/> ค. width=\"30%\":HR/> ง. <HR width=\"30%\"> 8. ข้อใดคือคาส่ังสาหรบั กาหนดข้อความใหเ้ ป็นตัวหนา ก. <I>กาหนดให้ตวั อักษรเปน็ ตัวหนา</I> ข. <B>กาหนดให้ตวั อักษรเปน็ ตวั หนา</B> ค. <U>กาหนดใหต้ วั อักษรเป็นตัวหนา</U> ง. <BR>กาหนดให้ตัวอักษรเป็นตวั หนา</BR>

7 การกาหนดลกั ษณะของตัวอักษร TAG HTML 9. คาสงั่ ใดเปน็ คาสั่งปรบั แต่งตวั อกั ษรทง้ั หมด ก. <b> <i> <u> ข. <b> <i> <p> ค. <u> <p> <sup> ง. <b> <sub> <br> 10. คาส่งั ใดทีก่ าหนดรูปแบบตวั อักษรได้ถกู ต้องที่สดุ ก. <font=\"TH SarabunPSK\" Size=\"3\"> ข. <face =\"TH SarabunPSK\" Size=\"3\"> ค. <font face=\"TH SarabunPSK\" Size=\"3\"> ง. <face font=\"TH SarabunPSK\" Size=\"3\">

8 การกาหนดลักษณะของตัวอกั ษร TAG HTML กระดาษคาตอบแบบทดสอบก่อนเรียน เรอ่ื ง การสรา้ งเว็บเพจด้วยภาษา HTML รายวชิ าเทคโนโลยี 3 รหัสวิชา ง23102 ชั้นมัธยมศึกษาปีท่ี 3 กลมุ่ สาระการเรยี นรู้การงานอาชพี และเทคโนโลยี ชุดที่ 4 เร่ือง การกาหนดลักษณะของตัวอกั ษร TAG HTML ช่ือ – นามสกลุ ........................................................................ช้ันมธั ยมศกึ ษาปที ี่ 3 เลขท่ี ........ ขอ้ ก ข ค ง คะแนนเต็ม 10 1 คะแนนได้ 2 3 ผลการประเมนิ 4  ดมี าก 5  ดี 6  ปานกลาง 7  ปรบั ปรงุ 8 9 (ลงชอื่ ).....................................ผู้ประเมนิ 10 (นายณฐั วุฒิ ณรงค์เดชา) วันท่ี ........เดือน.....................พ.ศ.......... เกณฑก์ ารประเมนิ อยู่ในเกณฑ์ ดีมาก คะแนนระหวา่ ง 9 - 10 อย่ใู นเกณฑ์ ดี คะแนนระหว่าง 7 - 8 อย่ใู นเกณฑ์ ปานกลาง คะแนนระหว่าง 5 - 6 อยใู่ นเกณฑ์ ปรบั ปรงุ คะแนนระหวา่ ง 0 - 4

9 การกาหนดลกั ษณะของตัวอักษร TAG HTML บตั รเนอื้ หา การกาหนดลักษณะของตัวอักษร TAG HTML Tag HTML ประเภทของ Tag คาสัง่ การพมิ พ์ 1. การจัดรปู แบบย่อหน้าในลกั ษณะของหวั ขอ้ (HEADING)  การจัดรูปแบบให้กับหัวเรื่องจะมีทัง้ หมด 6 รูปแบบดว้ ยกนั เรยี งตามลาดบั ขนาดใหญไ่ ปหาเลก็ ดงั น้ี  Heading 1  Heading 2  Heading 3  Heading 4 รปู แบบ <H1>ข้อความ</H1>  Heading 5  Heading 6

10 การกาหนดลักษณะของตัวอกั ษร TAG HTML <html> <head> <title>Heading</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html> 2. การขึ้นบรรทดั ใหม:่ <BR> ในการเขยี น HTML การกดปุ่ม Enter เพอ่ื ข้ึนบรรทดั ใหมน่ ั้น จะไม่มีผลใดๆกบั ขอ้ มูลท่ีแสดงต่อ ผชู้ มเว็บเพจ ถา้ ต้องการให้ข้อความขน้ื บรรทดั ใหม่ใหใ้ ช้ <BR> แทนท่ี การกดป่มุ Enter รูปแบบคาสง่ั ข้อความ.... <BR> ขอ้ ความ

11 การกาหนดลักษณะของตัวอกั ษร TAG HTML <html> <head> <title>My first page...</title> </head> <body> Hello....<BR>This is my first HTML page. </body> </html> 3. การขึ้นย่อหนา้ ใหม่: <P> ถา้ ตอ้ งการให้ข้นึ ยอ่ หนา้ ใหม่ ใช้ <P> ผลลพั ธท์ ไ่ี ด้จาก การใช้ <P> นั้นเสมอื นการกดป่มุ Enter 2 ครง้ั รูปแบบคาสัง่ ข้อความใน Paragraph… <P> ข้อความใน Paragraph... <html> <head> <title>My first page...</title> </head> <body> This is the first paragraph. It will show up in the first paragraph..... It will show up in the first paragraph.....It will show up in the first paragraph <p>This is the second paragraph. Does it show in the second paragraph?.... Does it show in the second paragraph?.... Does it show in the second paragraph? </body> </html>

12 การกาหนดลกั ษณะของตัวอกั ษร TAG HTML 4. การกาหนดเสน้ คนั่ บนหนา้ เวบ็ เพจ ช่ือแทก็ : Hr รปู แบบ : <Hr color=\"#รหสั สี/ชอื่ สี\" width=\"ความกว้าง\"(pixels/percent) > </Hr> ตาแหนง่ ทใี่ ช:้ อยูร่ ะหว่าง <Body>...</Body> การขีดเสน้ ค่นั ตามแนวนอน HR  Hr หรือ Horizontal line  ใชเ้ พอ่ื แบ่งพ้ืนท่ีของเอกสารให้ดเู ปน็ สดั ส่วน รปู แบบ <hr width=\"x\" size=\"y\">

13 การกาหนดลักษณะของตัวอกั ษร TAG HTML โดยที่ x คอื ความกว้างของ Horizontal line สามารถระบุท้งั แบบ pixel หรอื เป็น เปอรเ์ ซน็ ต์ (percent of window) ก็ได้ y คือความสูงของ Horizontal line ระบุเป็น pixel เทา่ น้ัน <html> <head> <title>My first page...</title> </head> <body> This is the first paragraph. It will show up in the first paragraph..... <hr width=\"60%\" size=\"3\"> <p>This is the second paragraph. Does it show in the second paragraph?.... </body>

14 การกาหนดลกั ษณะของตัวอกั ษร TAG HTML 5. การกาหนด FONT, ขนาด และสขี องตัวอกั ษร  ระบดุ ว้ ย Tag font <font>...ขอ้ ความ...</font>  ปรบั รปู แบบ font โดยการระบุ attribute ดังน้ี  face =\"x\" โดย x คือรปู แบบ font ทต่ี ้องการเชน่ “Tahoma”  color = \"x\" โดย x คอื สที ี่ต้องการ สามารถระบุได้ 2 แบบคือระบดุ ้วยช่ือสี เชน่ “red” หรอื ระบุดว้ ย RGB color เช่น “#c41200”  size =\"x\" โดย x คือขนาดตัวอักษรที่ต้องการ สามารถกาหนดขนาดตวั อักษรได้ 7 ระดบั (ตง้ั แต่ 1 ถงึ 7) เพ่มิ / ลดขนาดได้ ตง้ั แต่ -4 ถงึ + 4 6. TAG อ่นื ๆ ท่ใี ชป้ รับแต่งตวั อักษร  ตวั เอียง (italic)  <I> ตัวเอยี ง (Italic) </I>  ตัวหนา (Bold)  <B> ตวั หนา (Bold)</B>  ขีดเสน้ ใต้  <U> ขดี เส้นใตต้ ัวอักษร (Underline) </U>

15 การกาหนดลักษณะของตัวอักษร TAG HTML ลกั ษณะของตัวอกั ษร ตวั อกั ษรปกติ ตัวหนา ตัวเอียง ตวั ขดี เสน้ ใต้ และการขีดเส้นทับกลางตัวอักษร ชือ่ แท็ก : B , I , U, S รูปแบบ : <B>ข้อความแบบตวั หนา</B> <I>ขอ้ ความแบบตวั เอยี ง</I> <U>ขอ้ ความแบบขีดเส้นใต้</U> <S>ขอ้ ความแบบขดี เสน้ ทับกลางตัวอักษร</S> <Sup>ตัวอักษร</Sup> ตัวอักษรให้ตัวอักษรยกขนึ้ (Superscript) <Sub>ตวั อกั ษร</Sub> ให้ตวั อักษรหอ้ ยลง (Subscript)  ตัวอักษรกระพริบ(Blink)  <BLINK> ตัวอักษรกะพริบ (Blink) </BLINK>  ตัวอักษรวงิ่ (Marquee) ->  <MARQUEE> ตัวอกั ษรวิง่ (Marquee) </MARQUEE> เลอื กฟอนต์ให้กบั ตัวอักษร การเปล่ยี นชนิดของฟอนต์ให้กบั ตัวอักษร สามารถใช้แอตทริบิวต์ FACE ของแทก็ <FONT> ช่อื แทก็ : FONT ช่อื แอตทริบิวต์ : FACE รปู แบบ : <Font Face = \" ช่ือฟอนต์ \" >ข้อความ </Font> ตาแหน่งท่ีใช้ : อยู่ระหวา่ ง <Body>...</Body>

16 การกาหนดลกั ษณะของตัวอกั ษร TAG HTML การแกป้ ญั หาการใช้งานฟอนต์ สามารถทาไดโ้ ดยค่ันชอื่ ฟอนตแ์ ต่ละช่ือดว้ ยเครื่องหมายคอมมา่ ( , ) ตัวอยา่ งเชน่ <body> <font face = \" TH SarabunPSK\" > แก้ปญั หาการใชง้ านฟอนต์ไม่มีในเครื่องคอมพิวเตอร์ </font> </Body> การปรบั ขนาดตัวอกั ษร สามารถเปลย่ี นได้ 7 ขนาด ตงั้ แต่ขนาดท่ี 1 ถงึ ขนาดที่ 7 ตวั อกั ษร ขนาดมาตรฐานใชข้ นาด 3 ชอ่ื แอตทริบวิ ต์ : Size รปู แบบ : <Font Size= \" 1-7 \" > พิมพต์ วั อักษรท่ตี ้องการ </Font> ตาแหนง่ ท่ใี ช้ : ภายในแท็กเปดิ ของ <Font>

17 การกาหนดลกั ษณะของตัวอักษร TAG HTML การกาหนดสใี ห้กบั ตัวอกั ษร สามารถกาหนดได้ 2 วิธีคอื กาหนดดว้ ยชื่อสี และดว้ ยคา่ สี RGB ช่อื แอตทริบิวต์ : Color รปู แบบ :<Font Color= \" ชอ่ื สีหรอื ค่าสี \" >ข้อความ </Font> ตาแหน่งท่ใี ช้ : ภายในแทก็ เปดิ ของ <Font> <html> <head> <title>Font</title> </head> <body> <FONT FACE= \" TH SarabunPSK \" COLOR=\"Red\" SIZE= \" 5 \" >อักษรสีแดง ขนาด 5</FONT><br> <b><u><i><FONT FACE= \" TH SarabunPSK \" COLOR=\"Red\" SIZE= \" 5 \" >อักษรขีดเสน้ ใต้ ตัวหนา, เอยี ง </FONT></i></u></b> <MARQUEE> ตัวอกั ษรวงิ่ (Marquee) </MARQUEE> </body> </html>

18 การกาหนดลกั ษณะของตัวอักษร TAG HTML 7. การกาหนดรปู แบบของพ้ืนหลัง สามารถทาได้ 2 ลักษณะ ได้แก่ การกาหนดพ้ืนหลังดว้ ยสพี นื้ และการกาหนดพนื้ หลังดว้ ย รปู ภาพ ช่อื แอตทรบิ วิ ต์ : Bgcolor , Background รูปแบบ : <Body Bgcolor= \" ชอื่ สหี รอื คา่ สี \" ></Body> < Body background= \" ชอื่ ไฟลร์ ูปภาพ \" ></Body> ตาแหน่งที่ใช:้ ภายในแทก็ เปดิ ของ <Body> 8. สขี องข้อความทเ่ี ปน็ จุดลิงค์ ชือ่ แอตทริบวิ ต์ : Link, VLink, ALink รปู แบบ :<Body Link= \" ช่ือสีหรอื คา่ สี \" VLink= \" ชือ่ สหี รอื คา่ สี \" > </Body> ตาแหนง่ ท่ีใช้: ภายในแท็กเปิดของ <Body> 9. การกาหนดตาแหนง่ เร่มิ ต้นของการแสดงผล รปู แบบการแสดงผล ช่อื แอตทรบิ ิวต์ : TopMargin, LeftMargin , MarginHeight, MarginWidth รูปแบบ: <Body topmargin= \" ระยะห่างเป็นพิกเซล \" leftmargin= \" ระยะห่าง เปน็ พิกเซล \" ></Body> <Body marginheight= \" ระยะหา่ งเป็นพกิ เซล \" marginleft = \"ระยะห่างเป็นพิกเซล \" ></Body> ตาแหน่งทใ่ี ช:้ ภายในแท็กเปิดของ <Body>

19 การกาหนดลกั ษณะของตัวอกั ษร TAG HTML คำส่งั (แท็กต่ำง ๆ ) แท็ก <Br> ข้นึ บรรทดั ใหม่ แทก็ <P> แสดงข้อมูลแบบพารากราฟ แท็ก <Pre> แสดงข้อมูลตามรูปแบบท่กี าหนดไว้ แท็ก <blockquote> การย่อหน้าข้อความ แท็ก <Center> การจัดข้อความอยกู่ ึง่ กลาง แทก็ &nbsp; การเว้นวรรคตัวอักษร

20 การกาหนดลกั ษณะของตัวอกั ษร TAG HTML บัตรกิจกรรมท่ี 1 คาชี้แจง ใหต้ อบคาถามต่อไปนีใ้ หถ้ ูกต้อง (10 คะแนน) 1. Tag HTML มที งั้ หมดกปี่ ระเภท อะไรบ้าง (5 คะแนน) ........................................................................................................................ ........................................................................................................................ ................................................................................................................ ........ ........................................................................................................................ .................................................................................................. ...................... ........................................................................................................................ .................................................................................... .................................... ........................................................................................................................ ........................................................................................................................ ........................................................................................................................ ........................................................................................................................ 2. การแก้ปญั หาการใชง้ านฟอนต์ ทาได้โดย (2 คะแนน) ............................................................................................................................. .... ................................................................................................... .............................. ............................................................................................................................. .... 3. ให้นักเรยี นเขยี นคาส่ัง (แท็กตา่ งๆ) (3 คะแนน) ............................................................................................................................. .... ................................................................................................... .............................. ............................................................................................................................. .... ................................................................................................................................. ............................................................................................................................. ....

21 การกาหนดลกั ษณะของตัวอักษร TAG HTML บัตรกจิ กรรมที่ 2 คาส่งั ให้นักเรียนใชค้ าสง่ั HTML ตามเน้ือหาท่เี รียนมาประยกุ ต์ใช้โดยให้ แสดงผลทางหน้าจอ (เน้ือหาเกย่ี วกับพรรณไม้พฤกษศาสตร์) (10 คะแนน) ประกอบดว้ ย 1. ข้อความหวั เร่ือง 2. การขนึ้ บรรทดั ใหม่ 3. การยอ่ หน้าใหม่ 4. เสน้ คั่น 5. การจดั รูปแบบตัวอักษร รูปภาพ 6. การกาหนดลักษณะของตวั อกั ษร บันทึกช่ือไฟล์ : Ex4-เลขทช่ี ื่อ.html (Ex4-01nattawut.html) สง่ งานมาท่ี E-mail: : https://classroom.google.com หอ้ งเรยี นของตนเอง พิมพ์หัวขอ้ สง่ งาน Ex4 ชือ่ นักเรียน ชนั้ .. เลขที.่ .... หรอื ส่ง ทาง Googel Drive

22 การกาหนดลกั ษณะของตัวอกั ษร TAG HTML แบบทดสอบหลังเรยี น เรอื่ ง การสร้างเว็บเพจด้วยภาษา HTML รายวิชาเทคโนโลยี 3 รหัสวิชา ง23102 ชนั้ มัธยมศกึ ษาปที ี่ 3 กลุม่ สาระการเรียนรู้การงานอาชพี และเทคโนโลยี ชุดท่ี 4 เร่ือง การกาหนดลกั ษณะของตัวอักษร TAG HTML คาชแี้ จง นักเรยี นเลอื กคาตอบท่ีถูกต้องที่สดุ เพยี งคาตอบเดียว แล้วทาเคร่ืองหมาย  ลงในกระดาษคาตอบ (10 คะแนน) 1. ข้อใดคือรูปแบบของการเพ่ิมหมายเหตเุ ตอื นความจา (แต่โปรแกรมจะไม่อา่ น) ก. //หมายเหตุ ข. /*หมายเหตุ*/ ค. <!--หมายเหตุ--> ง. <!--หมายเหตุ--!> 2. ถา้ ต้องการกาหนดสีพนื้ หลงั ของเอกสารเว็บเป็น สชี มพู จะตอ้ งใชค้ าส่งั ในขอ้ ใด ก. < Body bgcolor=\"Pink\" > ข. < Html bgcolor=\" Pink\" > ค < Body background=\"Pink\" > ง. < Html background=\"Pink\" > 3. คาสง่ั ใดที่กาหนดรูปแบบตัวอกั ษรได้ถูกต้องทส่ี ุด ก. <font=\"TH SarabunPSK\" Size=\"3\"> ข. <face =\"TH SarabunPSK\" Size=\"3\"> ค. <font face=\"TH SarabunPSK\" Size=\"3\"> ง. <face font=\"TH SarabunPSK\" Size=\"3\">

23 การกาหนดลักษณะของตัวอักษร TAG HTML 4. เม่อื กาหนดรหสั สีมาตรฐาน RGB เปน็ #44BBFF แมส่ แี ต่ละสจี ะถูกกาหนดใหม้ คี ่าเปน็ เท่าใด ในระบบเลขฐาน 16 ก. สีแดง = BB , สีน้าเงิน = FF , สเี ขยี ว = 44 ข. สีแดง = FF , สีนา้ เงิน = BB , สีเขียว = 44 ค. สีแดง = 44 , สนี า้ เงนิ = BB , สเี ขียว = FF ง. สแี ดง = 44 , สีน้าเงิน = FF , สีเขียว = BB 5. ข้อใดกลา่ วไม่ถกู ต้องเก่ียวกับการใชแ้ ท็ก <hn> ก. n ทใ่ี ชม้ คี า่ ตั้งแต่ 1 ถึง 6 ข. รปู แบบของแท็กที่ใช้ </hn> ค. แบง่ ขอ้ ความโดยการใช้หัวเรื่องที่มีขนาดตา่ งกัน ง. <h1> จะมตี วั อักษรน้อยทส่ี ดุ ใชก้ ับข้อความหลัก 6. ข้อใดคือการใชแ้ ท็ก <HR> แสดงเสน้ คั่นแนวนอนยาว 30% ของความกวา้ งหน้าจอ ก. <30%:HR/> ข. <HR=\"30\"/> ค. width=\"30%\":HR/> ง. <HR width=\"30%\"> 7. ขอ้ ใดคอื คาสั่งสาหรับกาหนดข้อความใหเ้ ปน็ ตวั หนา ก. <I>กาหนดให้ตัวอักษรเป็นตัวหนา</I> ข. <B>กาหนดให้ตวั อกั ษรเปน็ ตวั หนา</B> ค. <U>กาหนดให้ตัวอักษรเป็นตวั หนา</U> ง. <BR>กาหนดให้ตวั อักษรเป็นตัวหนา</BR> 8. คาสง่ั ในการกาหนดข้อความหวั เรอ่ื งในข้อใด เป็นการกาหนด หัวเร่ืองใหม้ ขี นาดนอ้ ยท่สี ดุ ก. <h1> หัวเร่ือง </h1> ข. <h2> หัวเร่อื ง </h2> ค. <h4> หวั เรื่อง </h4> ง. <h6> หัวเรอ่ื ง </h6>

24 การกาหนดลกั ษณะของตัวอักษร TAG HTML 9. คาส่ังใดเป็นคาส่ังปรบั แตง่ ตวั อกั ษรทง้ั หมด ก. <b> <i> <u> ข. <b> <i> <p> ค. <u> <p> <sup> ง. <b> <sub> <br> 10. คาสง่ั ในข้อใดเปน็ คาสง่ั ท่ีใช้สาหรบั ขน้ึ บรรทัดใหมใ่ นการแสดงผลข้อมูล ก. <B> ข. <BR> ค. <TR> ง. <INS>

25 การกาหนดลักษณะของตัวอักษร TAG HTML กระดาษคาตอบแบบทดสอบหลังเรียน เร่ือง การสรา้ งเว็บเพจด้วยภาษา HTML รายวชิ าเทคโนโลยี 3 รหัสวิชา ง23102 ชัน้ มธั ยมศึกษาปีท่ี 3 กล่มุ สาระการเรียนรู้การงานอาชีพและเทคโนโลยี ชดุ ท่ี 4 เรอ่ื ง การกาหนดลักษณะของตัวอกั ษร TAG HTML ชื่อ – นามสกลุ ........................................................................ชั้นมธั ยมศกึ ษาปที ่ี 3 เลขที่ ........ ขอ้ ก ข ค ง คะแนนเต็ม 10 1 คะแนนได้ 2 3 ผลการประเมนิ 4  ดมี าก 5  ดี 6  ปานกลาง 7  ปรับปรุง 8 9 (ลงช่อื ).....................................ผู้ประเมนิ 10 (นายณฐั วฒุ ิ ณรงคเ์ ดชา) วันท่ี ........เดือน.....................พ.ศ.......... เกณฑ์การประเมนิ อยู่ในเกณฑ์ ดมี าก คะแนนระหว่าง 9 - 10 อยูใ่ นเกณฑ์ ดี คะแนนระหวา่ ง 7 - 8 อยู่ในเกณฑ์ ปานกลาง คะแนนระหว่าง 5 - 6 อยู่ในเกณฑ์ ปรับปรงุ คะแนนระหวา่ ง 0 - 4

26 การกาหนดลักษณะของตัวอักษร TAG HTML เฉลยแบบทดสอบก่อนเรียน เรอ่ื ง การสร้างเว็บเพจดว้ ยภาษา HTML รายวิชาเทคโนโลยี 3 รหัสวิชา ง23102 ชัน้ มัธยมศกึ ษาปีที่ 3 กลุม่ สาระการเรียนรู้การงานอาชีพและเทคโนโลยี ชดุ ที่ 4 เรอื่ ง การกาหนดลกั ษณะของตัวอกั ษร TAG HTML 1. ง 2. ง 3. ก 4. ง 5. ข 6. ค 7. ง 8. ข 9. ก 10. ค

27 การกาหนดลักษณะของตัวอักษร TAG HTML เฉลยแบบทดสอบหลงั เรยี น เรื่อง การสรา้ งเว็บเพจด้วยภาษา HTML รายวิชาเทคโนโลยี 3 รหัสวิชา ง23102 ชน้ั มธั ยมศกึ ษาปีที่ 3 กลุ่มสาระการเรียนรู้การงานอาชีพและเทคโนโลยี ชดุ ท่ี 4 เร่อื ง การกาหนดลกั ษณะของตัวอกั ษร TAG HTML 1. ค 2. ก 3. ค 4. ง 5. ง 6. ง 7. ข 8. ง 9. ก 10. ข

28 การกาหนดลักษณะของตัวอักษร TAG HTML

29 การกาหนดลักษณะของตัวอกั ษร TAG HTML บัตรเฉลยกิจกรรมท่ี 1 คาชี้แจง ให้ตอบคาถามตอ่ ไปนี้ให้ถูกต้อง (10 คะแนน) 1. Tag HTML มที ้งั หมดกปี่ ระเภท อะไรบา้ ง (5 คะแนน) ทั้งหมด มี 9 ประเภท 1) การจดั รูปแบบย่อหน้าในลกั ษณะของหวั ขอ้ (HEADING) 2) การข้นึ บรรทดั ใหม:่ <BR> 3) การขึ้นยอ่ หน้าใหม่: <P> 4) การกาหนดเส้นคัน่ บนหนา้ เวบ็ เพจ 5) การกาหนด FONT, ขนาด และสีของตัวอักษร 6) TAG อืน่ ๆ ที่ใช้ปรับแต่งตัวอักษร 7) การกาหนดรปู แบบของพนื้ หลงั 8) สขี องขอ้ ความท่ีเปน็ จดุ ลงิ ค์ 9) การกาหนดตาแหนง่ เร่มิ ตน้ ของการแสดงผล 2. การแกป้ ัญหาการใชง้ านฟอนต์ ทาไดโ้ ดย (2 คะแนน) สามารถทาได้โดยคนั่ ชอ่ื ฟอนต์แต่ละชอื่ ดว้ ยเคร่ืองหมายคอมม่า ( , ) 3. ใหน้ ักเรยี นเขียนคาสง่ั (แท็กตา่ งๆ) (3 คะแนน) แทก็ <Br> ขน้ึ บรรทัดใหม่ แทก็ <P> แสดงขอ้ มูลแบบพารากราฟ แท็ก <Pre> แสดงขอ้ มูลตามรปู แบบทก่ี าหนดไว้ แทก็ <blockquote> การย่อหนา้ ข้อความ แทก็ <Center> การจัดข้อความอยูก่ ึง่ กลาง แท็ก &nbsp; การเวน้ วรรคตัวอักษร

30 การกาหนดลักษณะของตัวอกั ษร TAG HTML บตั รเฉลยกจิ กรรมที่ 2 คาส่งั ให้นกั เรยี นใชค้ าสง่ั HTML ตามเน้ือหาท่เี รยี นมาประยกุ ตใ์ ช้โดยให้ แสดงผลทางหน้าจอ (เน้ือหาเกี่ยวกับพฤกษศาสตร์) (10 คะแนน) ประกอบด้วย 1. ขอ้ ความหวั เรื่อง 2. การข้ึนบรรทัดใหม่ 3. การย่อหนา้ ใหม่ 4. เส้นคัน่ 5. การจัดรปู แบบตวั อักษร รูปภาพ 6. การกาหนดลักษณะของตัวอักษร แนวคาตอบ บตั รเฉลยกิจกรรมท่ี 2 (ตวั อยา่ งผลงานนกั เรยี น)

31 การกาหนดลกั ษณะของตัวอกั ษร TAG HTML บรรณานุกรม กระทรวงศึกษาธิการ,สานักงานคณะกรรมการการศึกษาขัน้ พ้ืนฐาน. (2551). ตวั ชีว้ ัดและ สาระการเรยี นรแู้ กนกลาง กลมุ่ สาระการเรยี นรู้การงานอาชพี และเทคโนโลยี ตามหลักสตู รแกนกลางการศึกษาขน้ั พื้นฐาน พทุ ธศกั ราช 2551. สานกั วชิ าการ และมาตรฐานการศึกษา กรุงเทพฯ จันทร์เพญ็ เช้ือพานชิ . (2549). “นวัตกรรมการศึกษาไทย :รปู แบบการเรียนการสอน” นวัตกรรม การจัดการเรยี นรู้ตามแนวปฏริ ูปการศกึ ษา. ศนู ย์ตาราและเอกสารทาง วชิ าการ คณะศกึ ษาศาสตร์ จฬุ าลงกรณ์มหาวิทยาลัย. ชัยวัฒน์ สุทธริ ัตน์ . (2552). 80 นวัตกรรมการจัดการเรยี นรูท้ ีเ่ นน้ ผู้เรยี นเป็นสาคัญ. กรงุ เทพฯ: บริษัท แดเน็กซ์ อนิ เตอร์คอร์ปปอเรชัน่ . สวุ ทิ ย์ มูลคา และ อรทัย มูลคา (2545). 19 วธิ ีจดั การเรยี นรู้ : เพื่อพฒั นาความรทู้ กั ษะ. พิมพค์ ร้ังที่ 3. กรงุ เทพฯ : โรงพิมพภ์ าพพิมพ์ ศูนยส์ ง่ เสริมวชิ าการ. 231/4 ซอยวดั กระสังข์กระจาย เขตบางกอกใหญ่ กรงุ เทพ. เวบ็ ครูณฐั วฒุ ิออนไลน์ web : https://sites.google.com/a/snr.ac.th/nattawut/home

32 การกาหนดลกั ษณะของตัวอกั ษร TAG HTML คานา ชุดการเรียนรู้การสร้างเว็บเพจด้วยภาษา HTML รายวิชาเทคโนโลยี 3 รหัสวิชา ง23102 ชั้นมัธยมศึกษาปีที่ 3 กลุ่มสาระการเรียนรู้การงานอาชีพและเทคโนโลยี ชุดที่ 4 เร่ือง การกาหนด ลักษณะของตัวอักษร TAG HTML เป็นเครื่องมือสาคัญในกระบวนการจัดการเรียนการสอน ซ่ึงจะช่วย กระตุ้นกระบวนการเรียนรู้และตรวจสอบคุณภาพการเรียนรู้ของนักเรียน ผู้จัดทาได้ศึกษาวิเคราะห์ หลักสูตรแกนกลางการศึกษาขั้นพ้ืนฐาน พุทธศักราช 2551 อีกท้ังได้ศึกษาค้นคว้าหาความรู้ ทักษะการปฏิบัติ ทักษะด้านการคิด เพ่ือนาข้อมูลมาประกอบการจัดทาชุดการเรียนรู้การสร้างเว็บเพจ ด้วยภาษา HTML ให้สอดคล้องกับมาตรฐานการเรียนรู้ ที่มุ่งให้นักเรียนได้รับการพัฒนาทั้งด้านความรู้ คณุ ธรรม ค่านิยมทถ่ี กู ตอ้ งเหมาะสม ชุดการเรียนรู้การสร้างเว็บเพจด้วยภาษา HTML รายวิชาเทคโนโลยี 3 รหัสวิชา ง23102 ช้ันมัธยมศึกษาปีท่ี 3 กลุ่มสาระการเรียนรู้การงานอาชีพและเทคโนโลยี ชุดที่ 4 เร่ือง การกาหนด ลักษณะของตัวอักษร TAG HTML มีจุดประสงค์การเรียนรู้ คือ บอกคาสั่งสาหรับการทาหัวเร่ือง ของเอกสาร และบอกคาส่ังสาหรับการจัดย่อหน้าและการขึ้นบรรทัดใหม่ได้ บอกคาสั่งสาหรับ การจัดรูปแบบอักษรและบอกคาส่ังสาหรับการกาหนดลักษณะตัวอักษรได้ ปฏิบัติทักษะในการใช้งาน คาสั่งสาหรับจัดการหน้าเอกสารและตัวอักษร ได้ถูกต้อง มีความซื่อสัตย์ ความใฝ่รู้ใฝ่เรียน มคี วามรบั ผิดชอบ ความมรี ะเบยี บวินัย ผจู้ ัดทาหวังเปน็ อยา่ งย่งิ ว่าชดุ การเรยี นร้กู ารสร้างเว็บเพจดว้ ยภาษา HTML รายวิชาเทคโนโลยี 3 รหัสวิชา ง23102 ชั้นมัธยมศึกษาปีท่ี 3 กลุ่มสาระการเรียนรู้การงานอาชีพและเทคโนโลยี ชุดท่ี 4 เรื่อง การกาหนดลักษณะของตัวอักษร TAG HTML เล่มนี้จะเป็นประโยชน์ต่อผู้เรียน ในการเรียนรู้ อย่างมีประสิทธิภาพ มีความเข้าใจ ผลสัมฤทธ์ิทางการเรียนสูงข้ึน ขอบคุณผู้ให้ข้อเสนอแนะตลอดจน ใหก้ ารสนับสนุนทุกทา่ นไว้ ณ โอกาสนี้ ณฐั วฒุ ิ ณรงค์เดชา

33 การกาหนดลกั ษณะของตัวอักษร TAG HTML สารบัญ เรือ่ ง หน้า คาชีแ้ จงสาหรับคร.ู .................................................................................................................. 1 บตั รคาส่งั สาหรบั นักเรยี น..................................................................................................... 2 แผนผงั แสดงขั้นตอนการใช้ชุดการเรียนรู้การสร้างเวบ็ เพจดว้ ยภาษา HTML........................ 3 มาตรฐานการเรียนรู้ / ตวั ชี้วัด. ............................................................................................. 4 สาระสาคญั / จุดประสงค์การเรยี นรู.้ ..................................................................................... 4 แบบทดสอบกอ่ นเรยี น............................................................................................................ 5 กระดาษคาตอบแบบทดสอบกอ่ นเรยี น.................................................................................. 8 บตั รเนอ้ื หา ........................................................................................................................... 9 บัตรกจิ กรรมที่ 1 .................................................................................................................. 20 บัตรกิจกรรมท่ี 2 .................................................................................................................. 21 แบบทดสอบหลงั เรียน............................................................................................................. 22 กระดาษคาตอบแบบทดสอบหลังเรียน................................................................................... 25 เฉลยแบบทดสอบก่อนเรียน.................................................................................................... 26 เฉลยแบบทดสอบหลังเรยี น.................................................................................................... 27 ภาคผนวก............................................................................................................................... 28 บรรณานุกรม.......................................................................................................................... 31