วิธีใช้เครื่องมือสำหรับลงเนื้อหา (HTML Editor)

เครื่องมือสำหรับลงเนื้อหา หรือ HTML Editor เป็นเครื่องมือที่ใช้ในการเขียน แก้ไข จัดวางเนื้อหา รวมไปถึงการใส่ภาพหรือวีดีโอประกอบเนื้อหา ที่คุณต้องการ ใน Tips & Ticks วันนี้ WebFaster จะสอนการใช้งานเครื่องมือสำหรับลงเนื้อหา  หรือ HTML Editor ในระบบหลังบ้านของ WebFaster จะมีเครื่องมือแบบไหนบ้างพร้อมแล้วไปดูกันเลย

การแสดงผลแถบเครื่องมือสำหรับลงเนื้อหา

 

เครื่องมือสำหรับการกำหนดหัวข้อ (Heading Tag)

รับชมวีดิโอ > เครื่องมือสำหรับการกำหนดหัวข้อ 

 

ความสำคัญของ Heading Tag

Heading Tag คือ HTML Tag ที่ใช้กำหนด หัวข้อหลัก และ หัวข้อรอง ของเนื้อหาในเพจเว็บไซต์

H1 คือ หัวข้อหลัก หรือ ชื่อเรื่องของบทความนั้น ๆ ซึ่ง WebFaster.online ได้กำหนด H1 ให้อยู่ในตำแหน่ง "หัวข้อ" ด้านบนสุดของทุกหน้าเพจ

การกำหนดหัวข้อ H2 - H6 ที่ใช้สำหรับเนื้อหาที่เป็นหัวข้อสำคัญ และ Paragraph ที่ใช้สำหรับเนื้อหาปกติ ข้อควรระวัง คือ ไม่แนะนำให้กำหนด Heading ข้ามลำดับ

 

1. คลิกเลือก "เครื่องมือสำหรับการกำหนดหัวข้อ (Heading)"  ในช่องรายละเอียด

 

2. เลือก "เครื่องมือสำหรับการกำหนดหัวข้อ (Heading)" ตามที่คุณต้องการ

 

---

เครื่องมือสำหรับการกำหนดรูปแบบตัวอักษร

รับชมวีดิโอ > เครื่องมือสำหรับการกำหนดรูปแบบตัวอักษร 

 

เป็นเครื่องมือสำหรับการกำหนดรูปแบบตัวอักษร ซึ่งประกอบไปด้วย

 

• รูปแบบตัวอักษรตัวหนา (Bold)

 

• รูปแบบตัวอักษรตัวเอียง (Italic)

 

• การขีดเส้นใต้ตัวอักษร (Underline)

 

• สัญลักษณ์แสดงหัวข้อย่อย (Bullet List)

คำแนะนำเพิ่มเติม : สัญลักษณ์แสดงหัวข้อย่อย คุณสามารถเลือกได้ถึง 3 รูปแบบ   

 

• ลำดับเลข (Numbered List)

คำแนะนำเพิ่มเติม : ลำดับเลข คุณามารถเลือกได้ถึง 6 รูปแบบ  

---

เครื่องมือสำหรับการเพิ่มและแก้ไขวีดีโอ (Insert/Edit Video)

รับชมวีดิโอ > เครื่องมือสำหรับการเพิ่มและแก้ไขวีดีโอ 

 

การเพิ่มวีดีโอในเนื้อหา สามารถ Insert วีดีโอได้ทั้งหมด 3 แบบ

 

1. แบบ General สามารถใส่ลิงก์วีดีโอจาก Youtube ได้เลย

 

2.แบบ Embed เป็นการนำ Code มาฝังไว้

คำแนะนำเพิ่มเติม : โค้ดที่สามารถนำมาวางได้ จะเป็นโค้ดที่ขึ้นต้นด้วย <iframe เท่านั้น และนอกจากลิงก์วีดีโอแล้ว ยังสามารถฝังโค้ดประเภท รูปภาพ วีดีโอ และ แผนที่ (Google Map) จากแหล่งอื่นๆได้อีกด้วย

 

3.แบบ Advanced

 

ตัวอย่างการแสดงผลเมื่อใส่ลิงก์จาก Youtube เรียบร้อยแล้ว

 

---

เครื่องมือสำหรับการเพิ่มและแก้ไขรูปภาพ (Insert/Edit Image)

รับชมวีดิโอ > เครื่องมือสำหรับการเพิ่มและแก้ไขรูปภาพ 

 

การเพิ่มรูปภาพในเนื้อหา สามารถ Insert รูปภาพได้ทั้งหมด 2 แบบ

 

1.แบบ General สามารถ Copy Image Address มาวางได้

ข้อควรระวัง : ไม่แนะนำให้ Copy ลิงก์มาวางเนื่องจาก อาจมีวันหมดอายุ เช่น ลิงก์รูปภาพจาก facebook อาจส่งผลให้ภาพไม่แสดงผลบนเว็บไซต์

 

2.แบบ Upload สามารถ Upload ได้จากอุปกรณ์คอมพิวเตอร์ของคุณ

 

 

---

เครื่องมือการจัดเรียงตำแหน่งข้อความ (Text Alignment)

รับชมวีดิโอ > เครื่องมือสำหรับการจัดเรียงตำแหน่งข้อความ

 

การจัดเรียงตำแหน่งข้อความ สามารถทำได้ทั้งหมด 3 ตำแหน่งดังนี้

 

• จัดตำแหน่งชิดซ้ายขอบกระดาษ (Align Left)

 

 

• จัดตำแหน่งข้อความกึ่งกลางหน้ากระดาษ (Align Center)

 

 

• จัดตำแหน่งข้อความชิดขวาขอบกระดาษ (Align Right)

---

เครื่องมือการเพิ่มสารบัญ (Table of content)

รับชมวีดิโอ > เครื่องมือสำหรับการเพิ่มสารบัญ

 

การ เพิ่มสารบัญ จะทำได้ก็ต่อเมื่อคุณ กำหนดหัวข้อบทความให้เป็น H2 หรือ H3 หากคุณต้องการให้หัวข้อนั้นเป็น หัวข้อหลัก ในสารบัญ ให้กำหนดเป็น H2 และหากคุณต้องการให้หัวข้อนั้นเป็น หัวข้อรอง ในสารบัญ ให้กำหนดเป็น H3

 

1. ครอปเลือกหัวข้อให้เป็น "H2" หรือ "H3" ตามที่คุณต้องการ

 

2. เลือกตำแหน่งที่ต้องการให้เพิ่มสารบัญ

 

3. คลิกเลือก "สารบัญ"

คำแนะนำเพิ่มเติม : กรณีที่มีหัวข้อบทความใหม่เพิ่มเติมและต้องการให้ปรากฎอยู่ในส่วนของสารบัญ ให้กด รีเฟรช 1 ครั้ง

 คำแนะนำเพิ่มเติม : หัวข้อ  สามารถแก้ไขคำได้ เช่น สารบัญ หัวข้อสารบัญ หรือ เลือกหัวข้อที่ต้องการอ่าน เป็นต้น

ตัวอย่างการแสดงผลเมื่อเพิ่มสารบัญในบทความ

---

เครื่องมือเส้นคั่นเนื้อหา (Horizontal line)

รับชมวีดิโอ > เครื่องมือเส้นคั่นเนื้อหา 

 

เป็นเส้นคั่นแนวนอนสำหรับการปิดท้ายเนื้อหามื่อจบหรือต้องการแบ่งแยกส่วนของข้อความนั้น ๆ

 

1.คลิกเลือกตำแหน่งที่ต้องการให้ใส่เส้นคั่นเนื้อหา

 

2.คลิก "เส้นคั่นเนื้อหา (Horizontal line)"

 

3.เมื่อคลิกเส้นคั่นเนื้อหาแล้ว คุณก็สามารถเริ่มหัวข้อใหม่ที่ต้องการได้เลย

 

ตัวอย่างการแสดงผลของ บทความ เมื่อใช้เครื่องมือเส้นคั่นเนื้อหา (Horizontal line)

---

เครื่องมือการใส่ข้อความอ้างอิง (Blockquote)

รับชมวีดิโอ > เครื่องมือสำหรับการใส่ข้อความอ้างอิง 

 

 

Blockquote หรือ ข้อความอ้างอิง เป็นการใส่ข้อความสำคัญ หรือ ข้อความอ้างอิงสั้น ๆ เพื่อเน้นคำพูดและประโยคสำคัญในบทความนั้น ๆ ที่นิยมเรียกว่า "โควท (Quote)"

 

1. ครอบประโยคที่ต้องการให้เป็น Blockquote หรือ ข้อความอ้างอิง

 

2. คลิกเลือกเครื่องมือการใส่ข้อความอ้างอิง (Blockquote)

คำแนะนำเพิ่มเติม : สามารถจัดรูปแบบตัวอักษรได้ ไม่ว่าจะเป็น ตัวหนา ตัวบาง ขีดเส้นใต้ การจัดตำแหน่งการวาง รวมไปถึงการเปลี่ยนสีและการสีพื้นหลังของตัวอักษร

 

ตัวอย่างการแสดงผล ของ Blockquote หรือ ข้อความอ้างอิง 

---

เครื่องมือการกำหนดสีตัวอักษรและการเน้นข้อความ (Text Color / Background Color)

รับชมวีดิโอ > เครื่องมือสำหรับการกำหนดสีตัวอักษรและการเน้นข้อความ 

 

 

• การกำหนดสีตัวอักษร (Text Color)

1. เลือกข้อความที่ต้องการกำหนดสีตัวอักษร (Text Color)

 

2. คลิกเลือกเครื่องมือกำหนดสีตัวอักษร (Text Color)

 

3. คลิกเลือกสีตัวอักษร (Text Color)

 

ตัวอย่างการแสดงผล เมื่อได้ทำการกำหนดสีตัวอักษร (Text Color) เรียบร้อยแล้ว

 

• การเน้นข้อความ (Background Color)

1. เลือกข้อความที่ต้องการเน้นข้อความ (Background Color)

 

2. คลิกเลือกเครื่องมือการเน้นข้อความ (Background Color)

 

3. คลิกเลือกเน้นข้อความ (Background Color)

 

ตัวอย่างการแสดงผล เมื่อได้ทำการเน้นข้อความ (Background Color) เรียบร้อยแล้ว

 

---

เครื่องมือสำหรับเพิ่มลิงก์ (Insert/Edit Link)

รับชมวีดิโอ > เครื่องมือสำหรับเพิ่มลิงก์ 

 

 

เป็นการสร้างลิงก์โดยใช้เครื่องมือสำหรับเพิ่มลิงก์ (Insert/Edit Link) สามารถผูกลิงก์ ได้ทั้งข้อมูลตัวอักษรและรูปภาพ

• ช่อง URL คือ ใช้สำหรับวางลิงก์ที่เราต้องการ
• ช่อง Text to display คือ ข้อความที่ต้องการให้แสดงผล
• ช่อง Title คือ กล่องข้อความที่แสดงผล
• Open link in... คือ การเลือกให้ลิงก์นั้น ๆ แสดงผลในหน้าต่างปัจจุบัน หรือ แสดงผลในหน้าต่างใหม่

 

1. ครอปข้อความที่คุณต้องการผูกลิงก์ และคลิกเครื่องมือสำหรับเพิ่มลิงก์ (Insert/Edit Link) 

 

2. วางลิงก์ที่คุณต้องการ

คำแนะนำเพิ่มเติม : เมื่อครอบข้อความที่ต้องการผูกลิงก์ ระบบจะแสดงข้อความนั้นในช่อง Text to display อัตโนมัติ

3. ใส่ข้อความที่คุณต้องการให้แสดงในกล่องข้อความ Title

 

4. เลือกการแสดงผล ให้กับลิงก์ ว่าต้องการให้แสดงผลในหน้าต่างปัจจุบัน หรือ แสดงผลในหน้าต่างใหม่

 

5. หลังจากนั้นคลิก Save

 

ตัวอย่างการแสดงผลเมื่อ ลากเม้าส์ไปชี้ที่ข้อความที่ได้ทำการผูกลิงก์เรียบร้อยแล้ว

 

---

เครื่องมือการสร้างตารางข้อมูล (Table)

รับชมวีดิโอ > เครื่องมือการสร้างตารางข้อมูล 

 

 

เครื่องมือการสร้างตารางข้อมูล (Table) เป็นการสร้างตารางข้อมูล โดยสามารถเลือกจำนวนแถว จำนวนลัมน์ ตามความต้องการ นอกจากนั้นแล้วยังสามารถปรับแต่งหรือกำหนดรูปแบบตัวอักษรเพิ่มเติมได้อีกด้วย

คำแนะนำเพิ่มเติม : สามารถ Copy ตารางอื่น ๆ มาใส่ได้ เช่น Word Excel เป็นต้น

1. คลิกเลือกตำแหน่งที่ต้องการสร้างตารางข้อมูล (Table)

 

2. คลิกสร้างตารางข้อมูล (Table)

เลือกสร้างตารางอัตโนมัติได้สูงสุด 10x10 (แถวxคอลัมน์) และสามารถแทรกตารางเพิ่มได้ไม่จำกัด โดยใช้เครื่องมือดังต่อไปนี้

•   การจัดการคุณสมบัติของตาราง
•   ลบตาราง
•   แทรกตารางด้านบน
•   แทรกตารางด้านล่าง
•   ลบแถว
•   แทรกตารางด้านซ้าย
•   แทรกตารางด้านขวา
•   ลบคอลัมน์

 

3. เลือกหรือกำหนดรูปแบบตารางข้อมูล (Table) ตามที่คุณต้องการ

• Cell properties คุณสมบัติของเซลล์
• Merge cells การรวมเซลล์ที่คุณเลือกให้เป็นเซลล์เดียว
• Split cell แยกเซลล์

 

• Insert row before แทรกแถวก่อนหน้าช่องนั้น
• Insert row after แทรกแถวหลังจากช่องนั้น
• Delete row ลบแถว
• Row properties คุณสมบัติของแถว
• Cut row คัดลอกและลบแถว
• Copy row คัดลอกแถว
• Paste row before วางแถวก่อนหน้าช่องนั้น
• Paste row after วางแถวหลังจากช่องนั้น

 

• Insert column before แทรกคอลัมน์ก่อนหน้าช่องนั้น
• Insert column after แทรกคอลัมน์หลังจากช่องนั้น
• Delete column ลบคอลัมน์
• Cut column คัดลอกและลบคอลัมน์
• Copy column คัดลอกคอลัมน์
• Paste column before วางคอลัมน์ก่อนหน้าช่องนั้น
• Paste column after วางคอลัมน์หลังจากช่องนั้น

 

• Table Properties คุณสมบัติของตาราง

 

• Delete table ลบตาราง

ตัวอย่างการแสดงผล เมื่อได้ทำการสร้างตราราง (Table) เรียบร้อยแล้ว

 

---

เครื่องมือการสร้างคอลัมน์บทความ (Insert Template)

รับชมวีดิโอ > เครื่องมือการสร้างคอลัมน์บทความ

 

 

เป็นเครื่องมือสำหรับการสร้างคอลัมน์บทความ (Insert Template) ซึ่งสามารถสร้างเทมเพลต ได้ทั้งหมด 2 แบบ คือ

• สร้างเทมเพลต แบบ 2 คอลัมน์ 

 

ตัวอย่างการแสดงผลเมื่อ สร้างคอลัมน์บทความ (Insert Template) แบบ 2 คอลัมน์

 

• สร้างเทมเพลต แบบ 3 คอลัมน์

 

ตัวอย่างการแสดงผลเมื่อ สร้างคอลัมน์บทความ (Insert Template) แบบ 3 คอลัมน์ 

 

---

เครื่องมือพิเศษ

เครื่องมือพิเศษที่เสริมเข้ามาในระบบหลังบ้าน WebFaster.online

รับชมวีดิโอ > เครื่องมือพิเศษ 

 

 

• การขยายหน้าต่างเนื้อหา

เป็นเครื่องมือสำหรับขยายหน้าต่างของเนื้อหาน้ัน ๆ  ให้กว้างและใหญ่ขึ้น

ตัวอย่างการแสดงผลเมื่อ คลิกขยายหน้าต่างเนื้อหา

 

• Source code

เป็นเครื่องมือชุดคำสั่งหรือโค้ดโปรแกรม ที่เป็นเนื้อหาของข้อมูลนั้นๆ
หมายเหตุ: ไม่แนะนำให้ปรับเปลี่ยนชุดคำสั่งหรือโค้ดโปรแกรม หากไม่จำเป็น เนื่องจากอาจส่งผลต่อการแสดงผลของหน้าเว็บเพจนั้น ๆ ได้

ตัวอย่างการแสดงผลเมื่อคลิกดู Source code

 

• ดูตัวอย่างเนื้อหา (Preview)

เป็นเครื่องมือสำหรับการดูตัวอย่างเนื้อหา (Preview) ที่เราได้ลงข้อมูลไป ซึ่งแสดงตัวอย่างคล้ายหน้าเว็บไซต์

ตัวอย่างการแสดงผลเมื่อคลิก ดูตัวอย่างเนื้อหา (Preview)