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

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

09 มี.ค. 2565   ผู้เข้าชม 458

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

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

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

 

สารบัญ

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

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

 

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

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

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

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

เครื่องมือการกำหนดหัวข้อ หรือ Heading

 

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

การใช้ Hearding Tag

 

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

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

 


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

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

 

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

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

 

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

รูปแบบตัวอักษรตัวหนา

 

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

รูปแบบตัวอักษรตัวเอียง

 

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

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

 

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

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

สัญลักษณ์แสดงหัวข้อย่อย

 

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

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

ลำดับเลข


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

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

 

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

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

 

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

General

 

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

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

Embed

 

3.แบบ AdvancedAdvance

 

การเพิ่มวีดีโอ

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

 


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

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

 

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

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

 

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

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

เพิ่มรูปภาพแบบ General

 

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

การเพิ่มรูปภาพด้วยการ Upload

 

 


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

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

 

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

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

 

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

จัดตำแหน่งชิดซ้ายขอยกระดาษ

 

 

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

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

 

 

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

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


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

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

 

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

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

 

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

เพิ่มสารบัญ Table of content

 

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

เพิ่มสารบัญ Table of content

 

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

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

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

สารบัญในบทความ

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


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

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

 

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

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

 

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

Horizontal Line

 

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

Horizontal line

 

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

 

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

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


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

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

 

 

เครื่องมือการใส่บล็อกข้อความ Blockquote

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

 

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

Blockquote หรือ ข้อความอ้างอิง 

 

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

Blockquote หรือ ข้อความอ้างอิง 

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

 

Blockquote หรือ ข้อความอ้างอิง 

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


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

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

 

 

เครื่องมือการใส่สีตัวอักษร (Text Color)

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

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

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

 

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

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

 

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

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

 

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

 

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

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

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

 

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

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

 

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

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

 

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

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

 


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

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

 

 

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

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

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

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

 

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

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

 

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

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

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

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

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

 

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

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

 

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

 

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

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

 


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

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

 

 

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

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

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

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

 

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

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

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

 

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

ตารางข้อมูล (Table)

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

 

ตารางข้อมูล (Table)

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

 

ตารางข้อมูล (Table)

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

 

ตารางข้อมูล (Table)

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

 

ตารางข้อมูล (Table)

  • Delete table ลบตาราง

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

 


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

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

 

 

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

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

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

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

 

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

 

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

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

 

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

 


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

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

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

 

 

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

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

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

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

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

 

  • Source code

Source code

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

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

 

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

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

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

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

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


สาระน่ารู้ที่เกี่ยวข้อง