โปรแกรมแก้ไข HTML
ภาพรวม
โปรแกรมแก้ไข HTML ในตัวช่วยให้ผู้สอน ครู และผู้ดูแลระบบสามารถสร้างและแก้ไขเนื้อหาได้โดยตรงภายในหลักสูตร ข้อความ วิดเจ็ต และอื่นๆ
บทความนี้จะสอนวิธีเข้าถึงและใช้งานองค์ประกอบต่างๆ ของโปรแกรมแก้ไขข้อความ เพื่อสร้างเนื้อหาที่น่าสนใจและสวยงาม
โปรดทราบว่าแพลตฟอร์มธุรกิจจะใช้คำ ว่า "หลักสูตร " เป็นค่าเริ่มต้น และแพลตฟอร์มวิชาการจะใช้คำ ว่า "ชั้นเรียน" เป็นค่าเริ่มต้น ในบทความนี้ คำว่า "หลักสูตร" และ "ชั้นเรียน" สามารถใช้แทนกันได้
เมนูแถบเครื่องมือ
โปรแกรมแก้ไข HTML จะปรากฏขึ้นเมื่อแก้ไขเนื้อหาในหลักสูตร ข้อความ วิดเจ็ต และอื่นๆ แถบเครื่องมือประกอบด้วยแถบเมนูและไอคอนที่ช่วยให้คุณแก้ไขเนื้อหาในส่วนนั้นได้
โปรดทราบว่าภาพหน้าจอในบทความนี้แสดงอยู่ในส่วนของรายวิชา แต่แถบเครื่องมือทำงานเหมือนกันทั้งในรายวิชา ข้อความ และวิดเจ็ต ส่วนเครื่องมือสร้างเนื้อหาทางด้านซ้ายของแถบเครื่องมือจะใช้งานได้เฉพาะเมื่อกำลังแก้ไขรายวิชาเท่านั้น
แถบเมนูหลักประกอบด้วยเมนูย่อยเจ็ดเมนู ซึ่งจะอธิบายรายละเอียดเพิ่มเติมด้านล่าง
ไฟล์
เมนู ไฟล์ ประกอบด้วยการดำเนินการต่อไปนี้:
ชื่อ | คำอธิบาย |
เอกสารใหม่ | ล้างข้อความ/รูปภาพ/ลิงก์ทั้งหมดในหน้าต่างข้อความ |
ตัวอย่าง | เปิดหน้าต่างป๊อปอัพเพื่อดูตัวอย่างเนื้อหาที่เผยแพร่ |
พิมพ์ | พิมพ์เนื้อหาในช่องข้อความ |
แก้ไข
เมนู แก้ไข ประกอบด้วยการดำเนินการต่อไปนี้
ชื่อ | คำอธิบาย |
เลิกทำ | ยกเลิกการกระทำล่าสุดของคุณ |
ทำซ้ำ | ทำซ้ำการกระทำล่าสุดของคุณ |
ตัด | ลบข้อความ/รูปภาพที่เลือก แล้วบันทึกไว้ในคลิปบอร์ด |
สำเนา | คัดลอกข้อความ/รูปภาพที่เลือก แล้วบันทึกไว้ในคลิปบอร์ด |
แปะ | วางข้อความ/รูปภาพจากคลิปบอร์ด |
วางเป็นข้อความ | วางเนื้อหาจากคลิปบอร์ดเป็นข้อความธรรมดาเท่านั้น ไม่มีการจัดรูปแบบ |
เลือกทั้งหมด | เลือก/ไฮไลต์เนื้อหาทั้งหมดในหน้าต่างข้อความ |
ค้นหาและแทนที่ | ค้นหาคำหรือวลีที่ต้องการ แล้วแทนที่ด้วยคำ/วลีใหม่ (ถ้ามี) |
ดู
เมนู "มุมมอง" ประกอบด้วยการกระทำต่อไปนี้สำหรับการดูข้อความและตัวอักษรภายในหน้าต่างข้อความ
ชื่อ | คำอธิบาย |
ซอร์สโค้ด | ดู/แก้ไขซอร์สโค้ดในหน้าต่างข้อความ |
แสดงอักขระที่มองไม่เห็น | แสดงอักขระที่มองไม่เห็น เช่น ช่องว่างและอักขระขึ้นบรรทัดใหม่แบบนุ่มนวล |
แสดงบล็อก | แสดงบล็อกย่อหน้าภายในหน้าต่างข้อความ |
ตัวอย่าง | เปิดหน้าต่างป๊อปอัพเพื่อดูตัวอย่างเนื้อหาที่เผยแพร่แล้ว |
แทรก
เมนูแทรกประกอบด้วยคำสั่งต่อไปนี้สำหรับการแทรกรูปภาพ วิดีโอ ตาราง ลิงก์ และอื่นๆ
ชื่อ | คำอธิบาย |
ลิงก์ | แทรกไฮเปอร์ลิงก์ไปยัง URL |
| สื่อ | แทรก/ฝังสื่อลงไป |
| โต๊ะ | แทรกและสร้างตาราง |
| ตัวละครพิเศษ | ใส่ตัวอักษรพิเศษ |
| อิโมจิ | ใส่สัญลักษณ์อีโมจิ |
เส้นแนวนอน | แทรกเส้นแนวนอน |
ขึ้นหน้าใหม่ | ใส่ตัวแบ่งเพื่อขึ้นหน้าใหม่ |
พื้นที่ไม่แตกหัก | แทรกช่องว่างที่ไม่ทำให้หน้ากระดาษขาด |
แองเคอร์ | แทรกจุดอ้างอิง/บุ๊กมาร์กในตำแหน่ง/สถานที่ที่กำหนด |
แทรกแม่แบบ | แทรกเทมเพลตที่บันทึกไว้ |
บันทึกเป็นเทมเพลต | บันทึกข้อความที่ไฮไลต์ไว้เป็นแม่แบบ |
วันที่/เวลา | เลือกวันที่หรือเวลาจากเมนูแบบเลื่อนลง |
แก้ไขสมการ | คลิกเพื่อแก้ไขสมการที่ไฮไลต์ไว้ |
อัปโหลดรูปภาพ | คลิกเพื่ออัปโหลดรูปภาพ |
อัปโหลดไฟล์ | คลิกเพื่ออัปโหลดไฟล์ |
สร้างการประชุมทางเว็บ | คลิกเพื่อเพิ่มการประชุมทางเว็บลงในข้อความ* |
บันทึกเสียง | คลิกเพื่อบันทึกเสียงโดยตรงในช่องข้อความ |
บันทึกวิดีโอ | คลิกเพื่อบันทึกวิดีโอโดยตรงในช่องข้อความ |
* เพื่อให้ตัวเลือกการสร้างการประชุมผ่านเว็บแสดงขึ้น แอปพลิเคชันการประชุมผ่านเว็บจะต้องได้รับการติดตั้งจากศูนย์แอปพลิเคชันก่อน
รูปแบบ
เมนู "จัดรูปแบบ" ประกอบด้วยการดำเนินการต่อไปนี้สำหรับการจัดรูปแบบข้อความ
ชื่อ | คำอธิบาย |
ตัวหนา | ทำตัวหนาให้กับข้อความที่เลือก |
ตัวเอียง | ทำตัวเอียงข้อความที่เลือก |
ขีดเส้นใต้ | ขีดเส้นใต้ข้อความที่เลือก |
ขีดฆ่าข้อความ | ขีดฆ่าข้อความที่เลือก |
ตัวยก | จัดรูปแบบข้อความที่เลือกให้เป็นตัวยก |
ตัวห้อย | จัดรูปแบบข้อความที่เลือกให้เป็นตัวห้อย |
รหัส | จัดรูปแบบข้อความที่เลือกเป็นโค้ด |
บล็อก | เลือกรูปแบบการจัดบล็อกที่เหมาะสมจากเมนูแบบเลื่อนลง |
แบบอักษร | เลือกแบบอักษรอื่นจากเมนูแบบเลื่อนลง |
ขนาดตัวอักษร | เลือกขนาดตัวอักษรจากเมนูแบบเลื่อนลง |
จัดเรียง | เลือกรูปแบบการจัดแนวข้อความจากเมนูแบบเลื่อนลง |
ความสูงของเส้น | เลือกความสูงของเส้นจากเมนูแบบเลื่อนลง |
เพิ่มระยะเยื้อง | เว้นวรรคข้อความหรือย่อหน้าไปทางขวา |
ลดระยะห่าง | เลื่อนข้อความหรือย่อหน้าไปทางซ้าย |
สีตัวอักษร | เลือกสีข้อความที่ต้องการจากเมนูแบบเลื่อนลง |
สีพื้นหลัง | เลือกสีพื้นหลังจากเมนูแบบเลื่อนลง |
การจัดรูปแบบที่ชัดเจน | ล้างการจัดรูปแบบจากข้อความที่เลือก |
เครื่องมือ
เมนูเครื่องมือประกอบด้วยการกระทำต่อไปนี้
ชื่อ | คำอธิบาย |
ซอร์สโค้ด | ดู/แก้ไขซอร์สโค้ด |
| จำนวนคำ | ดูจำนวนคำและจำนวนตัวอักษร |
โต๊ะ
เมนูตารางประกอบด้วยการดำเนินการต่อไปนี้เพื่อแทรกตารางและแก้ไขโครงสร้างตาราง
ชื่อ | คำอธิบาย |
โต๊ะ | แทรกตาราง |
| เซลล์ | ตัวเลือกการแก้ไขสำหรับเซลล์ที่เลือกจากเมนูแบบดรอปดาวน์ |
แถว | แก้ไข ลบ และ/หรือเพิ่มตัวเลือกสำหรับแถวที่เลือกจากเมนูแบบดรอปดาวน์ |
คอลัมน์ | แก้ไข ลบ และ/หรือเพิ่มตัวเลือกสำหรับคอลัมน์ที่เลือกจากเมนูแบบดรอปดาวน์ |
คุณสมบัติของตาราง | ดูและแก้ไขคุณสมบัติของตาราง เช่น ความกว้าง ความสูง เส้นขอบ เป็นต้น |
ลบตาราง | ลบตารางที่เลือกไว้ |
เมนูรองของแถบเครื่องมือ
ด้านล่างเมนูหลัก แถบเครื่องมือประกอบด้วยตัวเลือกแบบดรอปดาวน์ที่เข้าถึงได้ง่าย และไอคอนสำหรับการจัดรูปแบบเพิ่มเติม
ยกเลิกและทำซ้ำ
- คลิก ไอคอน "เลิกทำ" เพื่อยกเลิกการกระทำก่อนหน้า
- คลิก ไอคอนทำซ้ำ เพื่อทำซ้ำไอคอนก่อนหน้า
รูปแบบย่อหน้าและหัวข้อ
- คลิกเมนูแบบเลื่อนลง สำหรับรูปแบบหัวเรื่อง เพื่อใช้รูปแบบและสไตล์กับข้อความ
รูปแบบตัวอักษร
- คลิกเมนู แบบ เลื่อนลงเพื่อเปลี่ยนแบบอักษรของข้อความของคุณ
ขนาดตัวอักษร
- คลิกเมนู แบบ เลื่อนลงเพื่อเปลี่ยนขนาดตัวอักษร
รูปแบบตัวอักษร
- คลิก ไอคอนตัวหนา เพื่อทำตัวหนา
- คลิก ไอคอนตัวเอียง เพื่อทำตัวเอียงให้กับข้อความ
- คลิก ไอคอนขีดเส้นใต้ เพื่อขีดเส้นใต้ข้อความ
สีตัวอักษร
- คลิกไอคอน สีข้อความ เพื่อเลือก/เปลี่ยนสีของแบบอักษร
จัดแนวข้อความ
- คลิกไอคอน จัดแนว เพื่อจัดแนวข้อความ
รายการแบบจุด
- คลิกไอคอน รายการ แบบมีจุดนำหน้าเพื่อสร้างและจัดรูปแบบรายการแบบมีจุดนำหน้า
รายการลำดับหมายเลข
- คลิกไอคอน รายการ ลำดับเลขเพื่อสร้างและจัดรูปแบบรายการแบบมีจุดนำหน้าหรือแบบมีลำดับเลข
อัปโหลดรูปภาพและอัปโหลดไฟล์
- คลิกไอคอน อัปโหลดรูปภาพ เพื่ออัปโหลดรูปภาพ
- คลิกไอคอน อัปโหลดไฟล์ เพื่ออัปโหลดไฟล์ใดๆ ก็ได้
การจัดรูปแบบที่ชัดเจน
- คลิกไอคอน ล้างการจัดรูปแบบ เพื่อล้างรูปแบบต่างๆ ที่อาจติดมาจากการคัดลอกและวางเนื้อหา
สีพื้นหลัง
- คลิกไอคอน สีพื้นหลัง เพื่อเพิ่มไฮไลต์ให้กับข้อความ/รูปภาพ
แถบเครื่องมือขั้นสูง
สำหรับการใช้งานเพิ่มเติม:
- คลิก เพิ่มเติม
ไอคอนเพื่อ แสดงแถบเครื่องมือขั้นสูง
แถบเครื่องมือขั้นสูงจะแสดงอยู่ด้านล่างแถบเครื่องมือรอง และมีตัวเลือกเพิ่มเติมซึ่งจะกล่าวถึงต่อไป
รอยเว้าและเส้นแนวนอน
- คลิก ไอคอนลดการเยื้อง เพื่อลดการเยื้องของข้อความ
- คลิก ไอคอนเพิ่มการเยื้อง เพื่อเยื้องข้อความ
- คลิก ไอคอนเส้นแนวนอน เพื่อแทรกเส้นแนวนอน
อิโมจิ
- คลิกที่ อีโมจิ
ไอคอนสำหรับเปิดแป้นพิมพ์อิโมจิ
- คลิกที่อิโมจิเพื่อแทรก
อักขระพิเศษ
- คลิก อักขระพิเศษ
กดไอคอนเพื่อเปิดหน้าต่างป๊อปอัพอักขระพิเศษ
- คลิกอักขระพิเศษเพื่อแทรก
ไอคอนขั้นสูง
- คลิก ไอคอนแทรก/แก้ไขลิงก์
เพื่อแทรกลิงก์ไปยัง URL ใดๆ ก็ได้
- คลิก ไอคอนแทรก/แก้ไขสื่อ
เพื่อแทรก/ฝังลิงก์ไปยัง URL ใดๆ
- คลิก ไอคอนแทรก/แก้ไขสมการ
เพื่อแทรก/ฝังลิงก์ไปยัง URL ใดๆ
- คลิก ไอคอน แทรกเทมเพลต
เพื่อแทรกเทมเพลต
- คลิก ไอคอนซอร์สโค้ด
เพื่อดูซอร์สโค้ดของหน้าปัจจุบัน
- คลิก ไอคอน บันทึกเสียง
เพื่อบันทึกเสียงลงในหน้าเว็บของหลักสูตรโดยตรง
- คลิก ไอคอน บันทึกวิดีโอ
เพื่อบันทึกวิดีโอลงในหน้าเว็บของหลักสูตรโดยตรง
- คลิกไอคอน สร้างการประชุมทางเว็บ
เพื่อสร้างลิงก์การประชุมทางเว็บโดยใช้ตัวเลือกแบบดรอปดาวน์
- หมายเหตุ - เฉพาะแอปพลิเคชันการประชุมทางเว็บที่คุณติดตั้งไว้บนแพลตฟอร์มของคุณเท่านั้นที่จะแสดงผล
แนวปฏิบัติที่ดีที่สุด
ใช้แนวทางปฏิบัติที่ดีที่สุดเหล่านี้เพื่อช่วยให้คุณใช้โปรแกรมแก้ไขได้อย่างเต็มประสิทธิภาพ
- หากต้องการแทรกการขึ้นบรรทัดใหม่แทนการขึ้นย่อหน้าใหม่ ให้กด Shift + Enter
- เมื่อฝังวิดเจ็ต HTML ให้ดูหน้าต่างข้อความในซอร์สโค้ดก่อน
- คลิกที่ เมนู แบบเลื่อนลง "ดู"
- คลิก < > โค้ดต้นฉบับ
- วางเนื้อหาจากแหล่งภายนอกในรูปแบบข้อความธรรมดาเพื่อหลีกเลี่ยงข้อผิดพลาดด้านการจัดรูปแบบ
- เพื่อให้เส้นขอบของตารางมองไม่เห็น:
- เลือกตาราง
- คลิกที่ คุณสมบัติของตาราง
- ในแท็บ ทั่วไป ของหน้าต่างป๊อปอัพ ให้ตั้งค่าความกว้างของเส้นขอบเป็น "0"
- ในแท็บ ขั้นสูง ให้เลือกรูปแบบเส้นขอบเป็น "ซ่อน" หรือ "ไม่มี"
โปรแกรมตรวจสอบการสะกดคำ
โปรแกรมแก้ไขข้อความนี้มีระบบตรวจสอบการสะกดคำ ซึ่งจะทำเครื่องหมายคำที่สะกดผิดด้วยเส้นสีแดง หากต้องการแก้ไขข้อผิดพลาดในการสะกดคำ:
- กดปุ่ม CTRL + คลิก ขวา
- เลือกคำสะกดที่ถูกต้องจากรายการคำแนะนำ
ตัวแปรฝังตัว
คุณสามารถแทรกตัวแปรลงในหน้าบทเรียนได้โดยใช้รูปแบบ {{ชื่อตัวแปร}} ซึ่งจะช่วยให้คุณปรับแต่งเนื้อหาสำหรับผู้ใช้และหลักสูตรได้
สามารถใช้ตัวแปรต่อไปนี้ในหน้าเนื้อหาได้:
- {{class_custom_field_1}}
- {{class_custom_field_2}}
- {{class_finish_date}}
- {{class_id}}
- {{ตำแหน่งคลาส}}
- {{class_name}}
- {{class_name_with_link}}
- {{class_start_date}}
- {{completed_at_utc}}
- {{รหัสวิชา}}
- {{เครดิต}}
- {{จำนวนวันเรียน}}
- {{จำนวนวันที่เหลือ}}
- {{deactivate_students_after}}
- {{organization_id}}
- {{organization_name}}
- {{section_code}}
- {{site_name}}
- {{site_name_with_url}}
- {{ชื่อครู}}
- {{ชื่อครูพร้อมลิงก์}}
- {{อีเมลผู้ใช้}}
- {{user_first_name}}
- {{user_full_name}}
- {{ชื่อผู้ใช้แบบเต็มพร้อมลิงก์}}
- {{user_id}}
- {{นามสกุลผู้ใช้}}
- {{วิธีการติดต่อที่ผู้ใช้ต้องการ}}
- {{user_ssn}}
- {{userid}}
- {{ทำไม}}
วิดีโอขนาดต่างๆ
หากคุณเพิ่มวิดีโอเป็นลิงก์ในโปรแกรมแก้ไข HTML คุณสามารถกำหนดขนาดของวิดีโอได้โดยใช้โค้ด HTML นี้:
<a width='100' height='700'>ลิงก์</a>
- หากต้องการให้วิดีโอปรับขนาดอัตโนมัติ คุณสามารถเว้นค่าใดค่าหนึ่ง (ความกว้างหรือความสูง) ไว้ได้
- คุณยังสามารถใช้ค่าเปอร์เซ็นต์เพื่อกำหนดขนาดของวิดีโอได้ เช่น <width='100%' >
การแก้ไขรูปภาพ
โปรแกรมแก้ไขภาพมีตัวเลือกต่างๆ มากมายสำหรับการแก้ไขภาพหลังจากที่อัปโหลดแล้ว วิธีการแก้ไขภาพ:
- คลิกที่รูปภาพ
- เมนูตัวเลือกจะปรากฏขึ้น
ไอคอน | คำอธิบาย |
| หมุนภาพทวนเข็มนาฬิกา | |
| หมุนภาพตามเข็มนาฬิกา | |
| พลิกภาพในแนวนอน | |
| พลิกภาพในแนวตั้ง | |
| ภาพที่ตัดแต่ง | |
| แก้ไขคุณสมบัติของรูปภาพ |
หากคุณเลือกไอคอน แก้ไขคุณสมบัติรูปภาพ หน้าต่าง ป๊อปอัพแทรก/แก้ไขรูปภาพจะปรากฏขึ้น
- แหล่งที่มา : แสดงแหล่งที่มาของภาพ
- คำอธิบายทางเลือก : คำอธิบายนี้ถูกอ่านโดยโปรแกรมอ่านหน้าจอเพื่อช่วยเหลือผู้ใช้ที่มีความบกพร่องทางสายตา
- ความกว้าง และ ความสูง : ปรับขนาดของภาพ
- หมายเหตุ: ใช้ไอคอนรูปกุญแจเพื่อให้แน่ใจว่าภาพยังคงรักษาอัตราส่วนความกว้าง/ความสูงไว้
เมื่อเพิ่มรูปภาพใหม่ คุณสามารถเพิ่มคำอธิบายสำหรับโปรแกรมอ่านหน้าจอได้ด้วย:
- กรอกคำอธิบายในช่อง คำอธิบายรูปภาพ
แม่แบบเนื้อหา
เทมเพลตเนื้อหาช่วยให้คุณบันทึกส่วนต่างๆ ของ HTML ลงในแคตตาล็อกทรัพยากร แล้วแทรกเข้าไปในพื้นที่เนื้อหาได้อย่างง่ายดายในอนาคต คุณสามารถใช้คุณสมบัตินี้เพื่อสร้างคลังองค์ประกอบเนื้อหาทั่วไปที่คุณใช้บ่อยในพื้นที่เนื้อหาของคุณได้
วิธีการเพิ่มส่วนของโค้ด HTML ลงในเทมเพลตเนื้อหา:
- เลือกข้อความและ/หรือรูปภาพในโปรแกรมแก้ไข HTML
- คลิกขวา
- เลือก "บันทึกเป็นเทมเพลต "
- ระบุชื่อเรื่องสำหรับเทมเพลต
- คลิก ตกลง
- แม่แบบเนื้อหาจะถูกบันทึกไว้ในคลังส่วนตัวของคุณ
วิธีเข้าถึงเทมเพลตเนื้อหาที่คุณบันทึกไว้:
- คลิก "แหล่งข้อมูล" จากแถบนำทางด้านซ้าย
- คลิก "แคตตาล็อก" จากเมนูย่อย
- กรองตามประเภททรัพยากร > แม่แบบเนื้อหา ในแผงการค้นหา
- คลิกเลือกเทมเพลตเนื้อหาของคุณ
แม่แบบเนื้อหาแสดงขึ้น หากต้องการดูรายละเอียดเพิ่มเติมเกี่ยวกับแม่แบบเนื้อหา:
- คลิก รายละเอียด
ตอนนี้คุณสามารถอัปเดตส่วนเนื้อหาได้แล้ว:
- คลิก แก้ไข เพื่อแก้ไข เนื้อหา
- คลิกปุ่ม "ลบ" เพื่อลบเทมเพลต
หากคุณคลิกแก้ไข คุณสามารถอัปเดตเนื้อหาและแชร์กับผู้ใช้รายอื่นได้
- เลือกไลบรารี ส่วนบุคคล องค์กร หรือ ธุรกิจ หากคุณต้องการให้เทมเพลตเนื้อหานี้สามารถใช้งานได้โดยผู้ใช้รายอื่น
- หลังจากแก้ไขเนื้อหาเสร็จแล้ว ให้คลิก บันทึก
วิธีการแทรกสำเนาของแม่แบบเนื้อหาลงในส่วนต่างๆ:
- เข้าสู่ส่วนนั้น
- คลิกขวา
- เลือก แทรกแม่แบบ
- เลือกเทมเพลตจากรายการแบบดรอปดาวน์
- คลิก บันทึก