WordPress SEO

สอน HTML พื้นฐาน เรื่อง The Basic of HTML

Posted on by Nukrob Pradubjan
สอน HTML พื้นฐาน เรื่อง The Basic of HTML
22
เม.ย.
เนื้อหาสอน HTML พื้นฐาน เรียน seo
  1. HTML พื้นฐาน เรื่อง The Basics of HTML
  2. HTML พื้นฐาน เรื่อง DOCTYPES and markup styles
  3. HTML พื้นฐาน เรื่องการเช็ค validation
  4. HTML พื้นฐาน เรื่อง tag head
  5. HTML พื้นฐาน เรื่อง HTML text
  6. HTML พื้นฐาน เรื่อง lists
  7. HTML พื้นฐาน เรื่อง การใส่ภาพและการใช้ Webflow สร้างเว็บ

คอร์สเรียนออนไลน์ แนะนำ :วิธีสร้างเว็บ ด้วย WordPress โดยนักรบ

   

HTML พื้นฐาน เรื่อง The Basic Of HTML

สวัสดีครับ วันนี้ผมจะพูดเกี่ยวกับเรื่อง HTML Tutorial นะครับ ซึ่งมันเป็นเบสิกเลย  เนื่องจากผมเจอเว็บนี้ได้สักพักแล้ว คือ www.webplatform.org ซึ่งผมเคยแนะนำไปในคลิปก่อนๆนะครับ ว่าเป็น reference เกี่ยวกับเรื่อง HTML CSS อะไรต่างๆได้นะครับ แล้วก็มีการอัพเดทอยู่ค่อนข้างใหม่เลยทีเดียว วันนี้ผมจะมาพูดเกี่ยวกับเรื่องสิ่งทีเป็นเบสิคในสไตล์ที่ผมเข้าใจนะครับ แล้วผมอยากจะถ่ายทอดเพื่อเป็นพื้นฐานในการสอนในคลิปอื่นๆด้วย  เราจะได้คุยเรื่องเดียวกันนะครับ โอเค เรามาเริ่มกันที่ The basics of HTML นะครับ ก็คือพื้นฐานเลยแหละ HTML คืออะไรยังไง ถ้าเราคลิกเข้าไปเนี่ยมันก็จะมาลิงค์นี้ มันก็จะพูดว่า เรื่องนี้กลายเป็นเรื่องของ basics of HTML เลยนะครับ ตามหัวข้อเลย สำหรับคนที่เก่งภาษาอังกฤษอยู่แล้วนะครับ แนะนำให้อ่านและเรียนรู้และทำความเข้าใจมัน แต่สำหรับคนที่ภาษาอังกฤษยังไม่เก่งแต่อยากรู้ก็ไปด้วยกันกับผมละกัน ส่วนเรื่องของคอร์สภาษาอังกฤษถ้ามีโอกาส ผมก็จะสอนนะครับ ในเรื่องของการจับใจความภาษาอังกฤษ เหมาะสำหรับเว็บดีเวลลอปเปอร์ (web developer) หรือคนที่สนใจที่จะใช้ในการศึกษาหาความรู้เพิ่มเติมด้วยตัวเองนะครับ อันนี้มาเริ่มกันที่เรื่องของ Summary นะครับ summary ในส่วนของ basics of HTML เนี่ย เค้าจะพูดถึงเรื่องโครงสร้างของ HTML มีอะไรบ้าง นี่คือเรื่องของ Introduction นะครับ ว่ามันจะมีโครงสร้างของHTML เป็นยังไง รายละเอียดต่างๆตรงนี้น่าสนใจครับ What is HTML  HTML คืออะไร ในบทความนี้เขียนไว้ได้ดีนะครับ เค้าอธิบายว่า HTML ก็เหมือนกับนามสกุลภาษา  เราคุ้นชิ้นกับ .doc ไหมครับ ดอทดีโอซี ที่ microsoft word ใช้เปิดไงครับ .xls ที่ microsoft excel ใช้เปิดไงครับ คือโปรแกรม (programe) หรือพวกแอปพลิเคชัน (application) ที่อยู่บน PC ส่วนใหญ่มันจะเปิดไฟล์นามสกุลต่างๆของมัน คือ word ก็เปิด .doc Excel ก็เปิด .xls นามสกุลพวกนี้เป็นตัวบอกว่าเราควรใช้อะไรเปิดมันดู เพราะโปรแกรมที่ใช้เปิดมันจะมีตัวอ่านเพื่อออกมาเป็นรูปร่างหน้าตาที่มันต้องการ ที่เอาไว้ใช้สื่อสาร ไว้ทำงานต่างๆน่ะครับ HTML ก็เหมือนกัน  เป็นนามสกุลที่เวลาใส่ไปในไฟล์แล้วเอาเบราว์เซอร์ (Browser) เปิดขึ้นมาดูจะมีรูปร่างหน้าตาโผล่ขึ้นมา เป็นเว็บไซต์ต่างๆ แบบนี้ก็เป็นเว็บไซต์ตัวนึงนะครับ  HTML ย่อมาจาก Hyper Text Markup Language จะรู้หรือไม่รู้ก็ได้  โดยลักษณะโครางสร้าง HTML นี้ เอาง่ายๆ ยกตัวอย่างเช่น <p id=“example”>This is a paragraph.</p> P  ย่อง่ายๆว่าเป็นพารากราฟ (paragraph) ก็ได้ครับ เวลาที่เราพิมพ์ใน word เราก็จะมีตัวใหญ่ทีเป็นหัวข้อ ถ้าใน HTML เราก็จะใช้คำว่าเฮดดิ้ง (heading) ตัว h1-h6 ไล่ไป h1 ก็ใหญ่สุด h2 h3 h4 h5 h6 ใหญ่ลดหลั่นลงมา เราลองดู microsoft word ก็มี  heading นะครับ heading ใหญ่   headingรอง ใน HTML ก็เหมือนกันส่วนนี้ก็เป็น text นะครับ ส่วนที่เรียกว่า paragraph นะครับ นี่มองว่าเป็น paragraph ได้ เป็น paragraph นึงอะไรแบบนี้ ก็คือ tag p นั่นเองเวลาเค้าใช้ คุณมาดูโครงสร้าง HTML เวลาคนเขียน HTML เนี่ย ที่มีรูปดินสอไม่ต้องแปลกใจ เพราะว่ามันให้เราแก้ไขได้นะครับ มันเป็นวิกิพีเดียแบบนึง ในโครงสร้าง HTML เนี่ยมันก็จะมีแค่นี้ เขียนไว้ใน text file, notepad เลยก็ได้ครับ แล้วเซฟเป็นชื่ออะไรสักอย่าง .HTML ดับเบิ้ลคลิกเปิดมาด้วยเบราว์เซอร์ IE Firefox Safari มันก็จะขึ้นมา จะขึ้นมาตามด้านล่างนี่แหละ อย่างนี้ Hello world มันก็มีโครงสร้างแค่นี้ บรรทัดแรกก็คือ <!DOCTYPE html> เป็น HTML5 แล้วอันที่สองก็คือ HTML language เป็นภาษาที่มีเฮด <head> เข้ามา มีเมต้า <meta> มีไตเติ้ล <title>  มีบอดี้ <body> แล้วก็ </HTML> โครงสร้างมีอยู่เท่านี้ครับ พื้นฐานคือเท่านี้ อธิบายโครงสร้างแบบง่ายๆเลยครับ เราลองนึกถึงโครงสร้างของมันนะครับ โครงสร้างของมันจะมีแท็กเปิดแล้วก็แท็กปิดเสมอ ที่เขาเรียกว่ามาร์คอัพ (markup) มาร์คอัพก็คือการมาร์คเอาไว้ครับ มาร์คไฮไลท์ไว้หุ้มกับข้อมูลที่เราต้องการแสดงผล ถ้าสังเกตว่ามีแท็กเปิดแท็กปิด เราจะคุ้นกับพวกบีบีโค้ด (bb code) แต่แค่มันไม่ได้ใช้เครื่องหมายน้อยกว่า(<)  มากกว่า (>) มันใช้เป็นเครื่องหมายปีกกาแข็ง เห็นไหมครับใช้เทคนิกเดียวกันเลย เปิดปิดเป็น bb code  ถ้าเราเล่นเว็บบอร์ดบ่อยๆเราก็จะรู้ว่า bb code มันใช้ยังไง url อะไร แต่นี่ก็เป็นแค่ HTML มันก็ใช้มากกว่า  น้อยกว่า เรามองโครงสร้างมันนะครับ นี่ก็อธิบายโครงสร้างของมัน syntax outline ต่างๆ

คอร์สเรียนแนะนำ

  • เรียน SEO
  • เรียน WordPress
  HTML5 มันมี header มาใหม่  เมื่อก่อนมันไม่มีน่ะครับ ประเด็นมันอยู่ที่ว่า  header เอาไว้ทำอะไร header มันเอาไว้หุ้มส่วนที่เป็นเมนู โลโก้ ส่วนที่มันอยู่ด้านบนสุดของเว็บแล้วมันก็ไปโผล่ทุกๆหน้า อย่างนี้เป็นต้น  โลโก้ เมนู เป็นกราฟฟิก ล๊อกอิน สิ่งเหล่านี้ คือ header มันสร้างมาทีหลังเพราะว่าเวลาคนใช้เว็บมาเรื่อยๆ  มันเริ่มเป็นรูปแบบ เป็นแพลทฟอร์ม (platform)  คล้ายๆกัน คือโลโก้มันเริ่มอยู่ตำแหน่งที่เดิมทุกหน้าเลย เมนูก็มีตำแหน่งด้านบนทุกหน้า  log in,social network อะไรก็ว่าไปมีทุกหน้าเลย  มันเหมือนกันไปหมด  ก็เลยสร้าง tag header ขึ้นมาเพื่อคุม section  เพื่อที่จะเอาไปใช้งานก็ใช้งานง่าย เวลาเอาไปทำ seo search engine ปรับเปลี่ยนข้อมูลหรืออะไรก็ง่ายขึ้น จัดกลุ่มให้มันนะครับ เราก็จะใช้  header คลุม นี่ก็เป็น concept ที่มาคร่าวๆของ header นะครับ h1 ก็เป็นเหมือน heading น่ะครับ นี่ก็มาพูดถึง Block level and inline elements ในความหมายของ elements ก็คือส่วนประกอบหนึ่งของเว็บไซต์น่ะครับ เค้าก็จะมองว่าพวกนี้คือหนึ่ง element หลายๆ element รวมกันก็เป็น component ใน bootstrap ก็จะมีคำว่า component โผล่มานะครับ  อย่างเช่น ดิกิเวเตอร์ แท็บ  พวกนี้เขาจะเรียก component  พวกที่สามารถทำงานได้ด้วยตัวมันเอง มีคำสั่งนู่นนี่นั่นละเอียดมากขึ้น  ก็จะเรียกเป็น component  ถ้าส่วนประกอบเล็กๆน้อยๆเราจะเรียกพวกนี้ว่า element กัน  ทั้งนี้ถ้าให้เฉพาะเจาะจงขึ้นไปอีก  ก็จะแบ่งเป็น element ชนิดต่างๆ element paragraph ก็เรียก tag p  element ทีเป็น heading   heading อย่างนี้ ที่เป็น title  ตัวใหญ่เนี่ย  เราก็เชื่อม tag h  ก็เรียกให้มันเจาะจงลงไปอีกนะครับ  จะเรียกเป็น tag ก็ได้นะครับ เรียกรวมๆก็เรียก element element ใน HTML นี่จะมีแบ่งเป็น 2 ส่วนใหญ่ๆ  คือแบบ Block level  และ  inline elements  เข้าใจความหมายของ block level และ inline elements ไหมครับ  block เนี่ย ลองนึกภาพ block แปลตรงตัวอยู่แล้วครับ block นี่จะมีขอบความกว้าง ความยาว ความสูง element กับ inline ก็เป็นบรรทัดเดียวกัน  ส่วนใหญ่แล้ว block level นี่เราจะใช้เกี่ยวกับพวกโครงสร้างน่ะครับ  โครงสร้างของ HTML เช่น  header ซึ่ง header นี่เป็น block นะครับ  ส่วนใหญ่ inline นี่เราจะใช้เกี่ยวกับพวก text  ซึ่ง text ส่วนใหญ่ default มันจะเป็น inline  แต่เราก็เข้าใจ concept คร่าวๆ  เพราะถ้าเวลาเราไปปรับใน  web flow ที่ผมจะสอนเนี่ย  มันก็จะมีแบบ ให้เลือกได้นะ  เอาเลือกแบบ  display เป็นแบบ block  display เป็นแบบ inline  หรือ display เป็นแบบ inlineblock  เดี๋ยวเข้าไปดูอีกทีนึงนะครับ นี่เข้าใจ concept คร่าวๆก่อน  ต่างกันนิดหน่อยคือ  block level จะสามารถใส่ margin ได้  เว้น space ระหว่างตัวอักษรได้  เว้นระหว่างตัวหุ้มได้  แต่ถ้าเป็น inline มันใส่ไม่ได้  ไม่มี margin ให้ใส่ ถึงใส่ไปก็ไม่เห็นผล  อย่างนี้น่ะครับก็เป็นที่มาของมัน  ความแตกต่างของมัน Character  reference  จะพูดถึงคาแรกเตอร์  คือ html กับ equal html  มันจะมีบางตัวที่อยู่ใน html เช่นน้อยกว่า (<)  มากกว่า (>)  อย่างนี้ครับ  มันจะอยู่ในโค้ด เวลาใส่เข้าไปนั้น  มันก็จะไปเข้าโปรแกรมของมันแปลออกมาเป็นโค้ด  แต่เวลาที่เราอยากจะพิมพ์พวกสัญลักษณ์อย่างนี้ล่ะ  ที่มันอยู่ในโค้ดให้มันโผล่มาให้คนเค้าดู  เราก็จะใช้พวกคาแรกเตอร์  เค้าจะเรียกคำรวมๆว่า character reference  เช่น  ให้ดูตัวอย่าง อย่างเช่นคำนี้ &pound;  นี่คือคาแรกเตอร์  character reference  จะขึ้นต้นด้วยเครื่องหมายตัวนี้น่ะครับ (&)  เป็น literal ขึ้นต้นด้วยตัวนี้  แล้วก็เวลา html แปลมาก็จะเป็นคาแรกเตอร์ต่างๆ  แล้วเค้าก็สามารถเข้าไปดูคาแรกเตอร์ได้นะครับ อันนี้เป็นภาพรวมง่ายๆ  สรุปนะครับ html ก็คือนามสกุลไฟล์ตัวนึงเท่านั้นแหละ เหมือน document  เหมือน excel  เพียงแค่พอเป็น .html แล้วตัวที่ใช้เปิดจะเป็น browser ไว้เปิดอ่านขึ้นมาเพื่อแสดงข้อมูลนะครับ  แล้วก็เริ่มมีการพัฒนาเข้ามา  นี่ก็เป็นตัวอย่างของ p  นี่คือโครงสร้างของ html5 เริ่มมีการพัฒนา เริ่มมีการใช้ header เข้ามานะครับ  header ก็เก็บส่วนของโลโก้  เมนู อะไรต่างๆนะครับ  log in แถบด้านบนอะไรก็แล้วแต่ที่ปรากฎทุกหน้า  ดูดีๆนะครับพวก header  เนี่ยเราจะใช้บ่อยใน  wordpress ด้วยนะครับ wordpress ก็ใช้ส่วนของ header เลย  เดี๋ยวเราค่อยไปดูอีกทีในเรื่องของ wordpress นี่ก็เป็นโครงสร้างอธิบายการทำงานของ html  คร่าวๆนะครับ มันคือ markup language มีเปิดปิด tag บาง tag ก็อาจจะไม่มีเปิดปิด  เช่นแบบขึ้นบรรทัดใหม่ เส้นแนวนอน  ก็จะไม่ต้องมีเปิดปิด ก็จะเป็น tag ตัวเดียวเลย  โครงสร้างของ html มีแบบ block level และ inline  ก็ไปดูอีกทีในเรื่องของ webflow เดี๋ยวผมจะสอน  มันจะมีทั้ง block ทั้ง inline  ใช้งานต่างกันยังไง  ใช้งานยังไงนะครับ  Character reference  คือพวกอักขระพิเศษต่างๆ  เวลาที่เราจะพิมพ์เครื่องหมายน้อยกว่ามากกว่าหรือพิมพ์โค้ดอะไรต่างๆที่ปรากฎออกมาให้ผู้ใช้เห็น  ก็จะใช้คาแรกเตอร์  สัญลักษณ์รูปหัวใจที่เราเล่นตามเฟซบุ๊ค  รูปอะไรต่างๆที่มันไม่ได้อยู่บนคีย์บอร์ด  เป็นคาแรกเตอร์ที่มันไม่อยู่บนคีย์บอร์ดบางตัว  อย่างเช่นรูปหัวใจ รูปหมี รูปต้นไม้  เป็นต้น  พวกนี้อาจจะใช้คาแรกเตอร์ช่วย  ใน window เราก็มีคาแรกเตอร์นะครับ  ถ้าเราเคยเล่น  คาแรกเตอร์มันจะคล้ายๆกัน  ขึ้นอยู่กับฟอนต์นะครับ  อย่างเช่นถ้าไปที่ accessories > system tools >  character map  อย่างนี้ก็จะเรียกคาแรกเตอร์ได้นะครับ  นี่คือคาแรกเตอร์ของฟอนต์ต่างๆ  นี่ก็คาแรกเตอร์ นี่ก็คาแรกเตอร์แมพ  อยู่ที่ว่าจะเอามาใช้ยังไง  ก็คลิกมาใช้ ก๊อปปี้เอามาใช้ เอาล่ะ  ก็โอเคสำหรับคลิปนี้นะครับ 10 นาทีเป็นการอธิบายโครงสร้างของ html ง่ายๆนะครับ  แบบฉบับของ web platform  ตามความเข้าใจของผมเอง  สำหรับคลิปถัดไปจะพูดถึงเรื่องถัดไป  สำหรับคลิปนี้สวัสดีครับ

HTML เบื้องต้น เรื่อง DOCTYPES and markup styles

ครับ สวัสดีครับ อันนี้จะเป็นภาคต่อนะครับในเรื่องของ HTML Tutorials  นะครับที่ผมเคยพูดไว้ในคลิปแรก ผมพูดคลิปแรกไปแล้วนะคลิปคือ basics of  HTML ไปแล้วนะครับ คลิปนี้ผมจะพูดเกี่ยงกับเรื่อง DOCTYPES and markup styles นะครับ ถ้าเรามาเปิดเว็บไซต์นะครับ คลิ๊กตัวนี้ครับ DOCTYPES and markup styles มันก็จะเปิดมาเว็บไซต์นี้ ก็จะพูดเกี่ยวกับเรื่องไฟล์นะครับ DOCTYPES เป็นหลัก สมมุติเราประกาศ HTML ขึ้นมาแล้ว มันจะเขียนโค้ดประมาณนี้ ขอให้ดูคลิปก่อนหน้านี้ก่อนนะครับ เดี๋ยวจะงงนะครับ พอเราเขียนHTML เราประกาศ Doctype  ประกาศแค่นี้นี่คือHTML ล่าสุด HTML 5 ใช่ไหมครับ  เราจะมีโครงสร้างเท่านี้แล้วก็จะอธิบายคร่าวๆ นะครับ แค่นี้ประกาศแค่นี้ HTML5 แล้ว ใช้ได้แล้ว คือพอเราประกาศ HTML5 หมายความว่าเราใช้ Tax ของ HTML5 ได้แล้วครับ  ผมเกริ่นให้คร่าวๆ นะครับ HTML5 แท็กที่มีมาใหม่ก็หลายตัวเลย เช่น header, footer, article, main, section  มีอะไรอีกละ Asize แล้วก็อาจจะมีอีก 2-3 ตัวประมาณนี้ จุดประสงค์ที่เขาประกาศเริ่มใช้ HTML5 เข้ามาก็เพราะว่าเขาต้องการเพิ่มแท็ก ที่ช่วยในการจัดโครงสร้างของเว็บใหม่ เพราะเราลองสังเกตเราทำเว็บกันตอนนี้หลังๆ ก่อนที่จะมีHTML5 คนจะใช้ DIV เยอะมากจะไม่ใช้ Table เพราะช่วยในการsearchได้ดีกว่า แล้วการเป็นว่ามันใช้ DIV ไปหมดเต็มไปทั้งหน้า เวลาคนไปคลิ๊กขวาดู Source นี่ DIV เต็มไปหมด D. I .V เต็มไปหมด เขาก็เกิดมีการพัฒนาให้โครงสร้างมันเอื้อต่อการsearch หรือการจัดลำดับข้อมูลได้ดีขึ้นนะครับว่า DIV ที่มันอยู่ด้วยบนสุดมันคุม menu มันคุม header คุมอยู่นะมันก็น่าจะตั้งชื่อว่า Header    DIV ที่คุมอยู่ข้างล่างสุดที่เป็น Second menu เป็นCopy write  เป็น Link site match มันก็ควรจะอยู่ footer ข้างล่างมันก็น่าจะตั้งว่า Footer อย่างนี้มีการตั้ง แท็กขึ้นมาใหม่  ข้อมูลที่มันเป็นส่วนตรงกลาง ที่มันเป็นใจความสำคัญเหมาะแก่การsearch มันก็ควรมีชื่อที่ไม่ใช่แค่ DIV เหมือนกันเขาก็เลยตั้งว่า Article อะไรอย่างนี้ครับ จุดประสงค์ก็เพื่อการsearch ข้อมูล การจัดข้อมูลที่มีมากมายมหาศาลในเว็บนี่ให้ง่ายขึ้นนะครับ ผ่านแท็กพวกนี้เป็นตัวช่วย ถ้าเราเล่น Dreamweaver นะครับ หรือโปรแกรมอื่นที่สร้างไฟล์ HTML ได้นะครับ เวอร์ชั่นเก่าๆ ก่อนที่จะเป็น HTML5  มันก็จะเป็นแบบนี้ HTML.4 .01 พอเปิดไฟล์ขึ้นมาก็จะสร้างนี่ให้อัตโนมัติเลยนะครับDreamweaver ไม่ใช่รุ่นใหม่นะครับอาจจะเป็น cs4, cs5-6 หรืออะไรประมาณนี้ครับ  จะมีใช้ HTML 4 อยู่เปิดมาก็จะเป็นไฟล์แบบนี้เลย ประกาศ Doctype แบบนี้นะครับ ถ้าHTML5 ก็จะประกาศ Doctype แบบนี้ ถ้าเป็น HTML4ก็จะประกาศ Doctypeแบบนี้ นี่ก็เป็น HTML4.01 transitional อันนี้แบบ strict นะครับ ผมก็ไม่ได้ดูนะครับว่ามันแตกต่างกันเท่าไรเพราะว่าไม่สนใจครับ ข้ามได้ อันไหนข้ามได้ผมก็ข้ามครับ อันนี้ XHTML  ทำไมมันเยอะแบบนี้มันทั้ง HTML5,  HTML4,  XHTML เยอะไปหมดเลย คือผมอธิบายคอนเซ็ปต์ง่ายๆก็ได้ครับ XHTML พัฒนามาเพื่อให้เหมาะกับการทำงานไฟล์ที่เป็น XML ดีขึ้น เริ่มงงหรือเปล่าว่า XML คืออะไร เยอะไปหมด เดี๋ยวค่อยๆอธิบายไป แล้วกันนะครับ นี่ก็เป็นการประกาศ Doctype อะไรต่างๆ นะครับอย่างพวกนี้เราอาจจะไม่ต้องจำก็ได้ครับใช้โปรแกรมสร้างขึ้นมามันก็จะสร้างให้นะครับ ตรงนี้มันมีการเปรียบเทียบระหว่าง HTML กับ versus XML syntax นะครับ  อันนี้ HTML อันนี้ XHTML มันแตกต่างกันอย่างไง เดี๋ยวผมยกตัวอย่างให้เข้าใจง่ายๆละกันนะครับ XML ถูกสร้างมาเพื่อที่เอาไว้สำหรับการแลกเปลี่ยนข้อมูลนะครับ  การแลกเปลี่ยนข้อมูลหรือ การbackup ข้อมูลหรือการโอนถ่ายข้อมูลอะไรอย่างนี้นะครับ  ถ้าเราเคยเล่น wordpress นี่เวลาเราexport จากwordpress ตัวหนึ่งมันจะ export ออกมาเป็น XML ได้นะครับ แล้วพอเราไป Import ในdatabase อีกตัวหนึ่ง เราก็ Import ผ่าน interfaceของwordpress เข้าไปจากไฟล์ XML นี่ล่ะ เราก็ Import เข้าไปนะครับ  มันก็จะเอาเข้าไปในฐานข้อมูลของ database ตัวใหม่แบบนี้ครับ  เป็นการแลกเปลี่ยนข้อมูล เป็นการbackupข้อมูล เป็นการโอนถ่ายข้อมูล โดยผ่านไฟล์นามสกุล XML ซึ่ง XML ก็จะพัฒนามาโดยทาง W3C เป็นผู้ควบคุมดูแลอย่างนี้นะครับ ถ้าเมื่อก่อนเราไม่มี XML แบบนี้เราก็ต้องใช้วิธี Dump Database อย่างนั้นละครับ แบบก่อนๆ ก็คือexport database  มา import database เข้าไปใน database ตัวใหม่ แล้วบางทีเวลาจะเลือกฟิวส์(Field)  เลือกข้อมูล เรื่องอะไรเราก็ต้องใช้ Select Query อะไรก็ว่าไป มันก็ยุ่งยากหน่อย XML มันก็มีส่วนช่วยให้ง่ายขึ้นนะครับ  หรือถ้าเมื่อก่อนเราก็จะฮิตกันช่วงหนึ่งคือพวกอ่านfeed เคยเห็นไหมครับ read feed, google reader พวก feed พวกอะไรพวกนี้ก็อยู่ในรูปของการใช้แลกเปลี่ยนข้อมูลแบบXML ได้ มีฮิตอยู่ช่วงหนึ่ง  XML ก็จะเป็นเรื่องของการแลกเปลี่ยนข้อมูล, การ backup ข้อมูล, การโอนถ่ายข้อมูลครับ แล้วโครงสร้างของ XML กับ HTML ต่างกันอย่างไง ผมมาที่HTML ปกติเลยนะครับ HTML ก็จะเป็นmarkup ในการนำเสนอข้อมูลนะครับ นี่ก็เป็น แท็ก h1 เวลาเราใช้ H1 ใหญ่,  h1 เล็กมีค่าเท่ากันมันไม่ซีเรียสครับแต่เวลามันเป็นXHTML มันต้องมีการแลกเปลี่ยนข้อมูลกันมันต้องมีการ strict แล้ว บางอย่างที่มันได้ก็ไม่ได้แล้วเพื่อที่จะกำหนดมาตรฐานให้เหมือนกัน แท็กจะต้องตัวเล็กหมด การbackslash () ของแท็กพวกนี้ก็ต้องเป็นมาตรฐานเดียวกันหมดจะใช้พร่ำเพรื่อไม่ได้คือพอมีการแลกเปลี่ยนกันระหว่างกันต้อง fixed ครับไม่งั้นมันจะเกิดความสับสนวุ่นวายมันจะไม่มีระบบไม่มีมาตรฐานและจะเกิดปัญหาอีก ปัญหาเยอะ error ยิ่งเยอะ ยิ่งผิดพลาดเยอะ มันก็เลยมี เหตุผลว่า XHTML จะมีรูปแบบการเขียนแท็กที่ fixed, ซีเรียส มากกว่าHTML นะครับ จุดประสงค์เพื่อใช้ในการแลกเปลี่ยนข้อมูล ใช้XML ได้ดีขึ้นแต่ถ้าเว็บของเราไม่ได้ออกแบบมาเพื่อทำงานแบบ XML มากมายนักก็ไม่ต้องซีเรียสมากครับ ก็HTML ธรรมดาได้นะครับ นี่ก็ข้ามมา อันนี้ก็เป็นไฟล์ XML นะครับ ข้อจำกัดไว้ชัดแบบนี้นะครับ โอเค คร่าวๆนะครับ นี่ก็พูดถึง Doctype เสียส่วนใหญ่ สรุปนะครับ Doctype HTML5 ประกาศ แค่นี้ ใช้ได้แล้วไม่ว่าจะเป็น tax main ,article, Asize, header, footerใช้ได้หมด navigator ก็ใช้ได้ เท่านี้เอง ถ้าเป็น HTML รุ่นเก่าๆ ก็เป็นแบบนี้ เป็นการDoctype นะครับ สำหรับเรื่องของ Doctype  ก็จบเพียงเท่านี้ครับ พบกันคลิปต่อไปครับ สวัสดีครับ

HTML เบื้องต้น เรื่องการเช็ค validation

สวัสดีครับผมจะพูดถึงหัวข้อถัดไปนะครับ คือ HTML Validation นะครับ ก็เป็นไล่เรียงหัวข้อกันมาตั้งแต่ basics, DOCTYPE และ HTML Validation นะครับ เป็นเรื่องของการ Validate  Validate คือเช็คให้มันถูกต้องนะครับ เท่านั้นเอง  เราเข้ามาเช็คให้มันถูกต้องเกี่ยวกับเรื่องของ HTML , Syntax, ไวยากรณ์ อะไรต่างๆนะครับ พอคลิ๊กเข้ามาหน้านี้ก็จะเป็น  หัวข้อนี้ไม่มีอะไรมากครับ เป็นเรื่องของการValidate อย่างเดียวเลย  ก็คือมันจะมีTool online  ที่ช่วยในการ Validate  เวลาเราเขียนเว็บไซต์มาแล้ว ไม่ว่าจะเป็น HTML เราเขียนแล้วบางทีเขียนมาแล้ว บางคนมันเขียนถูกเขียนผิด เขียนคร่อมแท็ก เขียนคร่อม เขียนเหลื่อมล้ำ  เขียนโค้ดผิดอะไรบ้าง  เราก็ใช้พวก Validate ช่วยก็มีหลาย Tool อย่างเช่นตัวนี้ ผมคลิ๊กเข้ามาเป็น W3C Markup Validate Service นะครับ ใส่ชื่อเว็บของเราเข้าไป  แล้วก็กดเช็ค ครับตัวนี้ก็เป็นตัว Validate ตัวหนึ่งของ W3C นะครับ ใส่ชื่อเว็บไซด์ไป กด Validate มันก็จะขึ้นมาว่ามี error เท่าไร  มี 5 warning เท่าไร เราก็อ่าน error ของมันไปแล้วก็ปรับดูนะครับ อย่างเช่นผมก็ลองไล่อ่านมันก็จะเตือนให้เรา บางทีมันมี Duplicate ID นะ ID มันคือบางทีคุณอาจจะตั้งIDซ้ำ 2 ตัว ซึ่ง ID มันควรจะมีแค่ตัวเดียว แต่ class มีหลายตัวได้นะครับ มันก็จะเตือนเราให้เราไปปรับแก้นะครับ แต่ตรงนี้ไม่ต้องไปซีเรียสไม่ต้องไปแปลหมดไม่ต้องไปสนใจมันถึง 100% ก็ได้ครับปรับที่สำคัญก็พอแล้วก็ดูว่ามันเป็นอย่างไง เพราะว่าเว็บดังๆ มันก็มี warning มันก็มี error บ้าง แต่มันก็ยังทำงานได้ปกติ จุดประสงค์ของการ Validation นะครับที่เขาValidated กัน เพื่อเพราะว่าถ้าเกิดเราเขียน Syntax ผิด ไม่ตรงกับ W3C แล้วเว็บหลายเบราเซอร์บางทีมันอาจจะแปลไม่เหมือนกันครับ  มันอาจจะแปลหน้าต่างมันผิดเพี้ยนไป หรือว่าข้อมูลผิดเพี้ยนไป จุดประสงค์ในการValidate จุดประสงค์หนึ่งคือในเรื่องของการ search engine เรื่องแรก  เรื่องที่2 คือการดูผลที่ถูกต้องในหลายๆ เบราว์เซอร์ ก็เป็นผลประโยชน์หนึ่งของการValidate ของ W3C นะครับ นี่เรื่องของการValidate นี่เรื่องของTool ในเรื่องของการเช็ค error ต่างๆ นะครับ วัตถุประสงค์ของมันนะครับทำไมต้อง Validate นะครับ มันก็มีจุดประสงค์ตามที่กล่าวมานะครับ ความจริงจุดประสงค์มันมีรายละเอียดเยอะนะครับแต่ผมอธิบายรายละเอียดคร่าวๆให้นะครับ อย่างเช่น Different browsers interpret invalid HTML differently แปลตรงตัวคือ เบราเซอร์ที่ต่างกันมันจะแปลความหมายของ HTMLที่เขียนไม่เหมือนกัน แตกต่างกัน อย่างเช่น อย่างนี้ แบบนี้เขามีการเขียน แท็กaใน p  คือแท็ก a แล้วปิดด้วย strong ครับคือมันมีการเหลื่อมล้ำแท็กกันมั่วแล้วล่ะ นี่ strongเปิดอยู่นี่ มาปิดอยู่นี่ p อยู่นี่  p อยู่นี่  a อยู่นี่ แล้ว a ปิดไม่รู้อยู่ไหนนะครับ อย่างนี้เขียนแล้วจะerror เวลาเราลองเข้าไปเช็คใน Validate ของ W3C แล้วมันจะเตือน เราก็ไปหาจุดที่แก้ไขแล้วก็ปรับTax ให้มันถูก เวลาเอาไปใช้เบราเซอร์มันจะได้แปลให้เหมือนกันนะครับ  นะครับ นี่เป็นจุดประสงค์การValidate นะครับ ก็จะมีการ Validate ต่างๆ นะครับ หนึ่งก็คือการValidate แล้วเขียนให้มันถูกนะครับ แท็กเปิด แท็กปิด  อย่าให้มันคร่อมกัน  อย่าให้มันเหลื่อมล้ำกันจนผิดนะครับ  แท็กLI ก็มีปิด LI แบบนี้นะครับ มันก็จะเป็นเขียน Validate ได้ถูกนะครับ นี่ก็เว็บที่ผมแนะนำไปครับอันนี้เลย markup ใส่เข้าไป  มี error อะไรก็แก้ปรับไปนะครับ มีวิธีการfixed นะครับ รายละเอียดอ่านได้ เท่านี้ครับคร่าวๆนะครับ เรื่องการ Validate และเรื่องการใช้ Tool ในการValidate นะครับสำหรับเรื่อง HTML Validation ก็จบเพียงเท่านี้ สั้นๆเลยนะครับ โอเค สำหรับคลิปนี้  สวัสดีครับ

HTML เบื้องต้น เรื่อง tag head

สวัสดีครับ วันนี้ผมก็จะพูดถึงหัวข้อถัดไปนะครับ ของ HTML head นะครับ กว่าจะมาหัวข้อนี้ก็ไล่ตามลำดับมาเลยนะครับ The Basics of HTML, DOCTYPES and markup styles, HTML validation แล้วก็มา HTML <head> นะครับ คลิ๊กเข้าไปนะครับ ก็จะเป็นเรื่องของ HTML ที่ชื่อว่า tag head นะครับ เป็น element ตัวหนึ่ง ถ้าเรียกแบบเฉพาะเจาะจงก็เป็น Tag ถ้าแปลเป็นภาษาไทยก็คือ “ป้าย” ป้ายแปะอะไรอย่างนี้นะครับ ในภาพรวมนะครับว่า Head เนี่ยทำอะไรบ้าง   Head เนี่ยก็จะเก็บรวบรวม ในส่วนหลักๆนะครับ เก็บ title เก็บ Tag title ก็คือเก็บ Tag ที่มันเป็นชื่อของหน้าเว็บเพจหน้านี้นะครับว่าเป็น title อะไร  เก็บพวก meta tag นะครับ meta data เราคุ้นคำว่า meta data ไหมครับ  meta data มองว่ามันเป็นข้อมูลเฉพาะนะครับเพื่ออธิบายไฟล์นั้นๆ อย่างเช่น ถ้าเรานึกถึง word ก็ได้ครับ ไฟล์เวิร์ดขึ้นมาเนี่ย คลิ๊กขวาขึ้นมา กด Properties มันจะมี created date วันที่สร้าง อะไรเงี้ย  วัน modify นะครับ ถ้าเป็นพวกไฟล์เสียง ไฟล์เพลง mp3 ก็จะมีแบบใครเป็นศิลปิน ใครเป็นคนร้อง ใครเป็นคนแต่ง อัลบั้มอะไร เอ้อข้อมูลพวกเนี๊ยะเขาเก็บในรูปอะไร? เขาเรียกรวมๆว่า meta data ครับ ซึ่ง meta data เนี่ย เราต้องให้ความสนใจมันนิดหนึ่งนะครับเพราะว่า meta data เนี่ยก็ถูกใช้ใน WordPress ด้วยนะครับ  meta data, meta data field ใน WordPress ก็มี database ที่เกี่ยวข้องกับ meta data เลยโดยเฉพาะเลยนะครับ ซึ่งเดี๋ยวผมขออธิบายเพิ่มเติมใน WordPress นะครับ เราก็ได้เข้าใจคร่าวๆว่า meta data เก็บอะไรนะครับ เก็บ title เก็บข้อมูลอะไรต่างๆนะครับที่ข้อมูลส่วนนี้ meta data ส่วนใหญ่ก็อาจจะไม่ได้โชว์โดยตรงในทางหน้าเว็บเพจ แต่อาจจะเป็นส่วนประกอบหลักในการที่จะทำให้เว็บเพจเนี่ยแสดงผลได้ดีขึ้นนะครับ ส่วนเราก็อาจจะเป็น CSS file ที่ link เข้ามา เก็บ javascript อะไรต่างๆนะครับ เก็บโค้ดอะไรต่างๆ เพื่อให้การทำงานเป็นไปอย่างราบรื่นนะครับ ก็จะอยู่ในส่วนของ Heading นะครับ ถ้าในส่วนที่แสดงผลออกมาทางข้อมูล ส่วนใหญ่ก็จะอยู่ในส่วนของ Body ถ้าเราไปดูโค้ดเนี่ย สมมุติ View source code หน้าเนี๊ยะปุ๊บ ก็จะอย่างเงี๊ยะ คือไล่จาก DOCTYPES ซึ่งผมอธิบายคร่าวๆไปแล้วนะครับในคลิปก่อนหน้านี้ HTML lang  เป็นภาษาอังกฤษนะครับ ละก็เนี่ย head คือตัวนี้ อย่าไปจำสับสนกับ header นะครับ  header มันจะเป็น HTML5 Text นะครับคนละตัว   head ตัวนี้มันจะใหญ่กว่า head ตัวนี้มันจะเก็บเยอะมากลองดูครับ เก็บ meta class เนี่ย character set UTF-8   character set เป็นเรื่องของการ encoding ของภาษาที่ใช้ในเว็บอะครับ ถ้าเราใช้ภาษาไทยเนี่ย ถ้าคนทำหรือเขียนเว็บรุ่นแรกๆเนี่ยก็จะใช้ WINDOWS-874 ใช่ไหมครับ รุ่นแรกๆถ้าทันรุ่นนั้น ถัดมาก็เป็น TIS-620 อย่างเงี้ย ละมันก็โหมี encoding กันไม่รู้กี่ตัวนะครับ ภาษาหนึ่งก็ encoding ตัวนึง อีกภาษานึงก็ encoding ตัวนึงเลยนะครับ มันยุ่งยากไปหมดเลย ตอนนี้ก็เริ่มใช้เป็นสากลเป็น Universal นะครับ ทั่วไปก็คือใช้ UTF-8 ใช้ตัวนี้เลย ภาษาไทยก็ใช้ตัวนี้ ภาษาอังกฤษก็ใช้ตัวนี้   ใน heading นะครับมันคลุมอยู่ สังเกตุว่ามันคลุมอยู่ คือ มันคลุม link   link favicon มันก็เป็น icon เล็กๆนะครับ ที่มันจะปรากฎตรงเนี๊ยะ เนี่ยเขาเรียก favicon ถ้าไม่มี favicon มันก็จะเป็นรูปแบบสี่เหลี่ยมกระดาษพับมุมเฉยๆนะครับ มีเก็บ search เก็บ copyright ข้อมูลเฉพาะเจาะจงของเว็บเพจตัวนี้นะครับ stylesheet เนี่ย style ต่างๆ script  javascript ต่างๆน่ะครับเนี่ยก็เก็บหมดเลยใน head ละก็มาปิดที่ </head> ตรงนี้ เห็นไหมครับว่ามันหุ้มอยู่ มัน mask up มันห่ออยู่ mask up ปิดหัวปิดท้ายอย่างนี้ครับอยู่ใน head ละพอจบ head ก็มา body เลย เป็นส่วนที่แสดงผลข้อมูลหลักๆ ที่เป็นโผล่หน้าจอส่วนใหญ่ก็จะอยู่ใน body ละก็ใช้ CSS javascript ช่วยในการปรับแต่งนะครับ เป็นการทำความเข้าใจเรื่อง head คร่าวๆครับ นี่ก็อธิบายถึง HTML lang นะครับ ภาษาต่างๆ อันนี้คือเรื่องของ character นะครับ อันนี้ที่ผมอธิบายไว้แล้วในเรื่องของการใช้ UTF-8 นะครับ  character encoding นะครับ ว่าทำไมถึงต้องใช้ UTF-8 นะครับ ก็มีการพัฒนามาเรื่อยๆ  อันนี้ก็เป็นโครงสร้างนะครับ โครงสร้างของ HTML สังเกตุว่า head จะอยู่เป็นบรรทัดที่ 3 ละ เราเริ่มเรียนมาถึงบรรทัดที่ 3 ละ คลุมนี่ปิดมาถึงนี่ เห็นไหมครับ คลุม title คือถ้าเกิดเขียนโค้ดบรรทัดนี้ เซฟใน HTML นะครับละกด preview กดให้มันคลิ๊กดูใน browser ก็จะหน้าตาแบบเนี๊ยะ คือมี title อย่างเงี๊ยะ I am a title example  อยู่ตรงเนี๊ยะเห็นไหมครับ tag title ซึ่งอยู่ใน head อีกทีนึง คลุมปิดด้วย head อีกทีนึง ตอนนี้ยังไม่เห็นอะไรขาวๆเพราะว่าในระหว่าง tag body เนี่ย ตรงนี้ ยังไม่ได้ใส่อะไรเลยก็เลยยังไม่เห็นอะไร ตรงนี้สำคัญมาก อะไรที่อยู่ใน head อ้า meta name description นะครับกับ meta name keywords ตรงเนี๊ยะสำคัญมาก คือถ้าในทาง search engine (SCO) นะครับ ต้องมีตัวนี้ช่วยนิดนึงนะครับ ก็หลักๆเลย meta name description เนี่ยเอาไว้อธิบายว่าหน้าเพจเนี่ยเกี่ยวกับอะไร ช่วยหน่อย ช่วยอธิบายเพจหน้านี้ว่าเกี่ยวกับอะไร ส่วน meta name keywords เนี่ยช่วยบอกว่าเอ้ย keywords สำคัญๆเนี่ย คือกด search แล้วจะเจอเว็บเนี๊ยะ ใช้ keyword อะไร เว็บรุ่นแรกๆที่เราพัฒนา เราใช้สองตัวนี้เป็นหลักนะครับในการแสดงผลและการจัดอันดับในการ search แต่พอมี google ละพัฒนากันมากขึ้นแล้วตัวนี้ก็จะใช้ในการโชว์ข้อมูลเฉยๆ นะครับ แต่ Google ก็ใช้เป็นส่วนหนึ่งในการ search นะครับ แต่ Google ก็ไม่ได้เชื่อม meta name description กับ keyword ทั้งหมดนะครับ เขาใช้ข้อมูลในหน้าเพจช่วยในการวิเคราะห์ผ่าน algorithm ของเขา ไม่ว่าจะเป็น backlink, Text H1 อะไรถึง H6 นะครับพวกนี้ ภาพเนี๊ยะช่วยหมดนะครับเพราะเขาพัฒนา algorithm ในการพัฒนาหน้าเพจไปไกลแล้วนะครับ แต่ meta name description กับ keyword  เราก็ควรต้องใส่อยู่นะครับเพื่อเป็นการบอก Google ในครั้งแรกที่เขาเข้ามาว่าเกี่ยวกับอะไรนะครับใน description  นี่ก็เป็นตัวอย่างของการเวลาเรา search ในหน้าเพจ ตรงส่วนบนนี้ก็จะเป็นส่วน title นะครับ มันก็จะเอา title มาโชว์  ส่วนตรงนี้ก็จะเป็น description สังเกตุไหมครับว่า “Latest sports news and live scores…” เนี่ยมันก็จะตรงกับตัวนี้เลย description “Latest sports news and live scores…” เห็นไหมครับ และเขาอาจจะ search คำว่า Eurosport ก็จะเป็น keyword ในนี้เห็นไหมครับ “eurosport,…  อย่างเนี๊ยะ มันก็ทำงานสอดคล้องกัน  เวลาเรา Add favorite Add อะไรเนี่ย ก็จะดึงส่วน title มาวางตรงนี้ URL มาวางตรงนี้ description ก็มาวางตรงนี้ ในเวลาเราAdd favorite อะไรต่างๆใส่ข้อมูลนะครับ มันก็เลยยังมีประโยชน์อยู่นะครับ meta name description และ keyword นะครับ คราวนี้มาบรรทัดนี้ เอ๊ะ! มันเริ่มมี style เข้ามาละ คราวนี้เริ่มเป็น css การเขียน css แบบนี้เขาเรียกว่าการเขียนแบบ in line style นะครับคือ เขียนแบบใส่เข้าไปใน HTML เลยนะครับ ก็เปิดด้วย tag style text/css แบบนี้นะครับ ละก็เขียน css ซึ่ง css ถ้าคนมีความรู้อยู่แล้วก็ไม่มีปัญหา ถ้าคนยังไม่มีความรู้ก็ซื้อหนังสือมาอ่านครับหรือ search หาข้อมูลเพิ่มเติมในเรื่องของ css กัน  วิธีการเขียนนะครับตัวนี้ก็จะเป็น tag HTML นะครับ สังเกตุ tag ง่ายๆนะครับ tag พวกเนี๊ยะมันจะติดกับเครื่องหมายน้อยกว่า ส่วนไอ้ที่อยู่ถัดมาเนี่ยเขาเรียก attribute    Attribute คือ ลักษณะของมันนะครับ attribute เป็นส่วนช่วยที่ทำให้เราปรับค่าของ tag ได้มากขึ้น concept มันคืออย่างงี้ เช่น tag image คือภาพแหละ จะโชว์ภาพเราจะมี attribute ที่ชื่อว่าความกว้างความสูง ใส่หรือไม่ใส่ก็ได้ ถ้าไม่ใส่ภาพไม่เห็นไม่รู้นะ อ้า! คือใส่ attribute ความกว้าง y อย่างเงี๊ยะ กว้างเท่าไหร่ใส่ความสูงเท่าไหร่   tag link มี tag คือ a  มี attribute คือ attribute ref   link ไปไหน มี target link ไปแล้วทำยังไง link แล้วเปิดหน้าใหม่หรือแทนที่หน้าเก่าอย่างเงี๊ยะเป็นการปรับแต่ง tag หรือว่าความสามารถของ tag เขาเรียกว่า attribute ละผมก็จะค่อยๆสอนไปเรื่อยๆนะครับ ซึ่งใน Webflow ก็มีการใส่ tag และการปรับ attribute ที่มันง่ายอยู่แล้วนะครับ มีการคลิ๊กลาก มีการใส่ค่าอะไรง่ายอยู่แล้ว ไม่ต้องมาเขียนโค้ดนะครับ แต่พอเราใช้ Webflow เราก็ขุด export โค้ดมาแล้ว เราก็สังเกตุว่ามัน tag อะไร attribute อะไร value ที่ใส่เป็นอะไรนะครับ เป็นวิธีการเรียนการภาพไปหาโค้ดซึ่งผมจะใช้เรียนและใช้สอนนะครับ แต่ผมจะไม่ใช้วิธีการสอนแบบโค้ดแล้วไปหาภาพ แล้วไปพรีวิวไปหาภาพแบบนั้นนะครับไม่เอา ผมรู้สึกไม่ work นะครับสำหรับส่วนตัว OK! มันก็จะมี อันนี้ก็จะอธิบายเรื่องของเวลาใช้ style ก็จะมี media คร่าวๆละกันครับ screen ก็ออกหน้าจอ print ก็ออกสิ่งพิมพ์ อย่างเงี๊ยะ style นี้จะใช้ก็เมื่อออกสิ่งพิมพ์เวลากด print มันก็จะใช้ css ชุดนี้ เพราะว่าเวลาที่เราอยู่ในเว็บเวลา print ออกไปเนี่ยเขาอยากจะให้มันไม่เหมือนกัน ในเว็บมันอาจจะมี Background นู้นนี่นั่นเยอะแยะเต็มไปหมดเลย แต่พอปริ๊นท์ออกไปเนี่ยอยากให้มัน plan plan ง่ายๆดูเป็นเอกสารเป็นทางการ เขาก็ตัด css บางตัวออกไปนะครับ เขาก็ปรับโค้ดใหม่แต่ก็ใช้ media ชื่อว่า print แทนนะครับเป็นเทคนิคในการทำงานของ css นะครับ มาดูนี่ก็เป็นรูปร่างหน้าตาการใช้งาน คราวนี้ก็มีการใส่ javascript เข้าไปละ บทเรียนนี้เริ่มเยอะนะครับมี css เข้ามานะครับ มีแบบ in line  มี javascript เข้ามาละ รู้ javascript กันหรือยังครับ ถ้ายังไม่รู้ก็เดี๋ยวเรียนรู้พื้นฐานกันอีกทีนึง อ่าเดี๋ยวเรื่อง javascript เนี่ยผมจะสอนในเรื่องของ jquery ด้วยนะครับ เพราะมันสำคัญเลย เดี๋ยวนี้ใครๆก็ใช้ jquery ทั้งนั้นเลยเพราะมันเป็น tools เป็น library นะครับที่ช่วยทำให้เราเขียนโค้ดละก็ทำงานได้ง่ายขึ้น คือ ถ้าเราเขียนเองเนี่ยคำสั่งๆนึงเนี่ย เราอาจจะเขียน 5-6 บรรทัดเเพื่อให้ทำงาน ใช้ jquery ช่วยนะครับ พิมพ์เข้าไปปุ๊บ เขียนบรรทัดเดียวจบเลยอย่างเงี๊ยะง่ายขึ้นเยอะเลยครับ มันก็เลยมีการใช้อย่างแพร่หลายนะครับ ท้าวความนิดนึงนะครับ jquery เนี่ยคนที่เป็นคนพัฒนาก็จะอยู่ในส่วนของ IBM อยู่ในส่วนของ WordPress ด้วย คนที่เป็นผู้พัฒนาก็อยู่ในกลุ่มนี้นี่แหละ อันนี้ก็จะเป็นโค้ดนะครับมีการเขียน style เข้ามานะครับ css เข้ามาละ มีการเขียน javascript เข้ามาละ เห็นไหมครับ ประกาศเป็น function อะไรเลยนี่เลย return, confirm อะไรก็มาเลยนะครับ เริ่มเป็น javascript ละนะครับ เริ่มมีการคลิ๊กการอะไร คราวเนี๊ยะเขาก็บอกว่าการเขียนแบบนี้เขาเรียกว่า in line คือเขียนฝังเข้าไปเลย Stop right there! Inline CSS and Javascript is not too clever!  ความหมายของมันก็คือ เอ้ย!อย่าเขียนแบบ in line ซิ มันดูไม่ smart มันดูไม่ฉลาดเลยนะ  เขาก็เลยเปลี่ยนวิธีการเขียนแบบ in line มาเป็นอีกแบบนี้ก็คือการ link สังเกตุว่าบรรทัดมันจะใช้น้อยลง บรรทัดมันใช้ยาวมากเลย คราวนี้มันก็จะ link เป็น file ข้างนอกแทนคือ link เป็นแบบ css ข้างนอกแทนอย่างเงี๊ยะ เห็นไหมครับ link ไปหา file ข้างนอกแทน    javascript ก็จะ link ไป file ข้างนอกแทน นี่คือวิธีการเขียนแบบ link นะครับเป็นการพัฒนามาเรื่อยๆ แต่ก็ไม่ได้แปลว่าการเขียนแบบ link แล้วเราเขียนแบบ link เป็นแล้วนะครับเราจะไม่เขียนแบบ in line   ใน WordPress เวลาที่เขามีการปรับแต่ง theme ปรับแต่งรายละเอียดต่างๆของ tag หรือว่าโค้ดบางโค้ดเนี่ยยังมีการใช้ in line หรือว่ามีการใช้เขียนเข้าไปเพราะว่าจุดประสงค์นึงเลยเนี่ยนะครับ ลำดับความสำคัญของ in line จะสำคัญมากที่สุดมากกว่าการเขียนแบบ link นะครับ คือสมมุติ เรามี body กำหนด Background ว่าเป็นสีแดงถ้าเราเขียนแบบ css link เข้ามาละใส่ body Background ว่าเป็นสีดำ กับเขียน in line css body background ที่เป็นสีเขียว   background สีเขียวชนะนะครับ ระดับ level ของ in line เขามองว่ามันใกล้กับ HTML มากกว่า เพราะฉะนั้นมันย่อมมาก่อน วิธีการเขียนของเขานะครับเราก็ทำความเข้าใจคร่าวๆเพื่อว่าเวลาใช้ในการเขียนโค้ดที่ซับซ้อนมากขึ้น โอเคจบ นี่ก็เป็น concept คร่าวๆนะครับของการเขียน tag head นะครับ ซึ่งจะประกอบด้วย มันก็จะห่อหุ้มด้วย meta tag ซึ่งมันเกี่ยวกับเรื่อง character เกี่ยวกับหุ้ม title นะครับที่แสดง title ตรงตัวนี้นะครับ ละก็หุ้มในส่วนของ meta name description และ keyword ซึ่งสอดคล้องกับ SCO และในเรื่องของการนำไป Add favorite ต่างๆนะครับ ปรากฎใน SCO นะครับหรือ Add อะไรต่างๆ หุ้ม Style css ละก็ javascript ด้วย ซึ่ง style แบบ css และ javascript จะเขียนแบบ in line เขียนโค้ดเข้าไปเลย หรือจะเขียนแบบ link เป็น file ข้างนอกออกมาก็ได้นะครับ นี่ก็เป็นการทำงานคร่าวๆของ tag head นะครับ สำหรับคลิปนี้พอเท่านี้ก่อนนะครับ สวัสดีครับ

HTML เบื้องต้น เรื่อง HTML text

หัวข้อนี้จะพูดในเรื่องของ Html body หลังจากที่เราได้ศึกษาความรู้เบื้องต้นเกี่ยวกับ HTML ได้แก่ Basic of HTML , DOCTYPE and markup style , HTML Validation, HTML head ในส่วนของ More about the HTML head สังเกตว่าจะไม่ค่อยมีการใช้งานสักเท่าไร ขออนุญาตไม่พูดถึงส่วนนี้ ซึ่งในบทความนี้เราจะมาเน้นในส่วนที่เรียกว่า HTML text ซึ่งเป็นส่วนที่ควบคุม Body ของ Website หากพูดถึงส่วน Body คือส่วนที่เราสามารถใช้เพื่อแสดงผลกับคำสั่งต่างๆ ในบริเวณที่เป็นพื้นที่ของ Browser เป็นส่วนใหญ่ เมื่อเข้ามาดูในส่วน Html text จะมีหัวข้อจะอธิบายการใช้งานต่างๆของ text ต่างๆซึ่งเป็นส่วนหนึ่งของ Body หรือ Html page หน้านี้นั่นเอง ก่อนอื่นเลยเราจะมาทำความเข้าใจถึงเรื่อง Tag <h> สังเกตว่า Tag <h> จะมีความสำคัญเป็นอันดับต้นๆ  เพราะว่า Tag <h> ก็คือ Heading บางครั้งถูกเรียกว่า Hero text ซึ่ง Heading จะแบ่งได้อย่างง่ายคือ ส่วนแรกคือ Heading หลัก หรือ <h1> มีหน้าที่คุมความหมายของ Page ทั้งหมดว่ามีเนื้อหาเกี่ยวกับอะไร รองลงมาก็เป็น Heading sub หรือ Heading อันดับที่สองคือ <h2> ลงมา ซึ่ง Heading นี้จะทำหน้าที่แบ่ง section ของเนื้อหาว่ามีเนื้อหาอะไร ต้องการพูดถึงอะไร เช่น Heading Introduction แบ่ง section แบ่งเนื้อหาลงมาเป็นการอธิบายคร่าวๆ หากสังเกตว่าใน Page นั้นมี heading ที่มีขนาดใกล้เคียงกับ <h2> แต่จะมีลักษณะเป็นตัวหนังสือสีจางกว่า หรือขนาดเล็กกว่า เรียกว่า Heading อันดับที่ 3 เราจะ tag ที่ชื่อว่า <h3> เป็น section ย่อยที่ถูกใช้ใน <h2> อีกที เมื่อถูกนำไปใช้งานใน wordpress ผู้ใช้งานก็จะรู้ว่าใช้งานได้ง่ายยิ่งขึ้น จากใหญ่ไปเล็กหรือจากสำคัญที่สุดไปสำคัญน้อยที่สุด ซึ่ง Google Search เองก็ให้ความสำคัญกับ Heading เป็นอันดับต้นๆ มี Link, Back-link, Image และ Heading นั่นเอง Quoting other source หรือ blockqoute คือการอ้างอิงข้อมูลหรือคำพูดจาก website อื่นๆ แต่ก่อนแล้ว  blockqoute ทมักจะไม่ค่อยมีบทบาทสักเท่าไรแต่เนื่องจากในปัจจุบัน Social Media เข้ามามีอิทธิพลเป็นอย่างมาก คนเริ่มไม่ค่อยเชื่อโฆษณาหลักจากเว็บหลักๆ หรือข้อมูลจาก website ทั่วไปซึ่งถ้าเป็นประเทศไทยเองก็มี เช่น pantip หรือจาก social media ของคนที่มีชื่อเสียง จึงมีการใช้ blockqoute หรือการใช้การอ้างอิงคำพูดของคนอื่นมากขึ้นไปใน website เพื่อสร้างแรงจูงใจให้คนเข้าไปดูใน website ว่าผลิตภัณฑ์หรือเว็บไซต์ของตนเองมีคนพูดถึงในทางที่ดี เช่น เราจะได้เห็นได้จาก website ในต่างประเทศว่าจะมีการอ้าง blockqoute ซึ่งอาจจะใช้คำว่า Testimonial รับรองมาจากคนที่มีชื่อเสียงจากอาชีพอื่นหรือที่เกี่ยวข้อง จะช่วยบอกว่า website ของคุณดี มีการบริการที่ดี รู้สึกดีกับการใช้งาน เป็นต้น เพื่อตอบรับกับทิศทางของผู้บริโภคที่เริ่มเปลี่ยนไปในทิศทางมักจะเชื่อจากคนที่สนิท คนที่รู้จัก หรือคนที่มีชื่อเสียง ก่อนการตัดสินใจในเรื่องของสินค้าและบริการ ซึ่งการ  blockqoute  หรือการอ้างอิงคำพูดก็ถูกหยิบมาใช้ในเว็บไซต์มากขึ้นเพื่อสอดคล้องกับพฤติกรรมของผู้ใช้ ซึ่งเวลาเราหยิบมาใช้จะใช้เป็นพวก Double qoute ซึ่งใน WordPress ก็มักจะใช้ blockqoute หรือการอ้างอิงคำพูด หรือ Testimonial มาใช้มากขึ้น Inline element คือการนำ text มาซ้อนกันไว้ ส่วนมากแล้วจะมีใช้ดังต่อไปนี้
  • Emphasis <em> คือเรื่องของกานเน้นตัวอักษร
  • Itaric <i> คือการทำให้ตัวหนังเอียงจะถูกใช้งานเยอะ
  • Strong <strong> คือการทำให้ตัวหนังสือเข้มขึ้น
  • Bold <b> ลักษณะจะคล้ายกัน Strong คือทำให้ตัวหนาขึ้นหรือเข้มขึ้น
  • Tag <p> จำนวน text ที่มีจำนวนข้อมูลจำนวนหนึ่งสามารถตั้งค่าให้เป็น Paragraph ได้
หากเราดูเนื้อหาของ Website หนึ่งแล้วจะสามารถแยกแบบกว้างๆจะเห็นได้ว่า Website หนึ่งมีส่วนประกอบอยู่ไม่กี่อย่างเช่น Heading, รูปภาพ, Paragraph, Link, Graphic, เส้น และ สี จึงค่อยมาแยกย่อยอีก เช่น Table, blockqoute, ตัวหนา, วันที่ ต่างๆเป็นต้น ในส่วนอื่นๆที่สามารุนำมาใช้งานได้
  • Small print <small> เป็นเรื่องของการทำให้เล็กลง tag นี้สามารถซ้อนอยู่ใน tag อื่นๆได้
  • Telling the time <time datetime = “”> ใช้ระบุเวลาต่างๆ เพราะว่า Google มีฟังก์ชั่นที่สามารถปรับ Search option เพื่อหาข้อมูลที่อยู่ในช่วงเวลานั้นๆได้ เช่น ต้องการหา ข้อมูลเกี่ยวกับ show result wordpress ภายใน 1 อาทิตย์, Show result ย้อนหลัง 1 เดือน หรือ Show result ข้อมูลข่าวล่าสุด เป็นต้น  จึงใช้ datetime เพื่อเป็นการแบ่ง section ในการแสดงผล
เราสามารถนำ code ต่างๆมา test ดูได้ ด้วยการนำมาวางลงบนส่วนของ Body <body>….</body> แล้วทำการ preview ดูจะเห็นการแสดงผลตามที่เราวาง code ลงไป สังเกตว่าในคำสั่งทั่วไปของ HTML เรามักจะคุ้นเคยจากการใช้ Microsoft Word เช่น Bold, Underline หรือ Italic ซึ่งใน HTML เราสามารถใช้งานแบบนั้นเพียงแค่เขียน code คลุมลงไปในข้อความนั้นๆแทน แต่ในปัจจุบันมี Program ต่างๆ เช่น Web-flow หรือ Dreamweaver สามารถใช้ tools ในการเพิ่มคำสั่งลงไปแทนการเขียน code ได้ ซึ่ง Interface ของ Program ดั่งกล่าวสามารถใช้งานได้ง่ายคล้ายคลึงกับ Microsoft Word และเมื่อทำการใส่คำสั่งเสร็จจึงทำการ Export ดู code ต่างๆได้ภายหลัง

HTML เบื้องต้น เรื่อง lists

สวัสดีครับวันนี้ผมจะพูดถึงในหัวข้อถัดไปในเรื่องของ HTML Lists นะครับ ก่อนที่จะมีดูหัวข้อนี้ ก็ต้องไล่มาตั้งแต่ ดูหัวข้อ basics ก่อนนะครับ มา DOCTYPES  HTML validation , HTML head,  HTML Text แล้วก็เป็น HTML Lists นะครับ  HTML Lists นี่เรามานึกภาพถึง microsoft word ก่อนละกัน เพื่อเข้าใจตรงกัน อย่างนี้ครับ อย่างนี้ list แบบนี้ครับ นี่คือ HTML List ก็คือมีลักษณะเป็น lists แบบนี้ครับ  lists 1,  lists 2 , lists3 ข้อมูลอะไรต่างๆ ที่เราจะแสดงข้อมูลได้ง่ายขึ้น เป็น lists เป็นรายการนะครับ มีทั้งแบบวงกลม แบบเป็นตัวเลข  ถ้าแบบวงกลมเราจะเรียกว่า unorder lists  คือorder แปลว่าเรียบลำดับได้ un คือ ไม่เรียงลำดับ คือไม่มีเลขเรียงลำดับ เป็นจุดๆๆ เป็นสัญลักษณ์ เป็นอะไรก็แล้วแต่ เป็นวงกลม เป็นสี่เหลี่ยม เป็นอะไรแบบนี้ เขาเรียกว่า unorder lists ตัวย่อ คือ UL นะครับ ใน HTML ตัวย่อคือ UL แต่ถ้าเป็นแบบมีเรียงมีเลข 1,2,3,4,5,6,7,8 พอเรายิ่งพิมพ์ตัวเลขก็จะเพิ่มขึ้น เราจะเรียกว่า order lists คือมีตัวเลขเรียงลำดับ  ถ้าตัวอย่างในแท็กก็เรียกว่า OL คราวนี้เราก็มาดู lists ต่างๆ ในหัวข้อนะครับ นี่ก็จะมี unorder lists  มี order list พอคลิ๊กเข้าไปอ่าน order lists ก็จะมีตัวอย่าง เราก็อาจจะcopy ตัวอย่างมาดูได้ ก็จะเขียนแบบนี้ ขึ้นต้นด้วย UL ปิดด้วย UL มี LI    LI ย่อมาจาก Lists item ก็คือเป็นบล็อคๆ ของ LI ถ้าเราไม่เห็นภาพ copy code ไปดูนะครับ ไปอยู่ใน Dream ก็ได้ครับ ก็ copy วาง ก็เป็น UL กด design ดูเปิดออกมาก็จะเป็นแบบนี้นะครับ  LI ก็ คือนั่นครับ 1 LI,   LIที่2,   LIที่3 เราก็เลือกแท็กเป็นแบบ UL  Unorder lists มันก็เลยไม่มีเลขนะครับ ถ้าเราจะเปลี่ยนให้เป็นอีกแบบ เป็นแบบorder lists ก็คือมีแบบเรียงลำดับให้ เรียงลำดับโค้ดก็จะต่างกันนิดเดียวก็คือมันจะเป็น OL เท่านั้นเอง ข้างบนเป็น UL ข้างล่างเป็น OL นะครับ LI นี่เหมือนกัน Lists item อย่างนี้ครับ กดenter มาก็เพิ่มlists นี่ไงครับ มันก็คือ lists มันก็สอดคล้องกับword ละครับก็เป็น lists แบบหนึ่ง ลองเอาแบบ lists อีกแบบก็คือ lists แบบไม่มีเรียงลำดับ เห็นไหมครับมันก็คือการทำงานที่สอดคล้องกัน แต่เพียงแค่วิธีการเขียนใน HTML เขียนอีกอย่างหนึ่ง ในword จะมี interface ให้คลิ๊กให้นะครับ นี่คือในเรื่อง lists listsใช้งานเยอะนะครับในเรื่องของการนำเสนอข้อมูลที่ทำให้เข้าใจง่ายนะครับและมีตัวอย่างหลายๆ อย่าง เช่นพวก type ก็จะเป็นพวก attribute ของมันในการปรับแต่ง เรื่องของ lists มีเท่านี้ครับ สั้นๆ ง่ายๆ ในการใช้งานนะครับ สำหรับเรื่องlists สามารถหาข้อมูลเพิ่มเติมได้จากในนี้ก็ได้ครับ มีอีกอันหนึ่งให้ดู DL  DL นะครับ DL เป็นเรื่องของ definition นะครับคือเราไม่ค่อยเห็นการใช้ DL ซักเท่าไรนะครับแต่ก็สามารถเรียนรู้ได้นะครับ DL เราลองมาเข้า DL โค้ดมาดู ดูเรื่องหน้าต่าง คือ term1 คือหัวข้อหลัก definition1คือความหมายของterm1 ว่าอย่างนั้นละครับ  สังเกตตามตำแหน่งของการวางนะครับ term1 definition1 คือการอธิบายความหมายของterm1 นะครับ ตัวนี้ก็จะเป็นคำอธิบายของterm2 เป็นเรื่องของการให้ความหมายและก็คำนิยามในหัวข้อที่เกี่ยวข้องกันนะครับ เรื่องของชื่อและก็ความหมาย name และ value อย่างนี้ครับที่เกี่ยวข้องกัน นะครับ  โอเค นี่เป็นตัวอย่างที่จะนำมาใช้งาน คือ unorder lists จะเป็นวงกลมลงมาอะไรก็ว่าไป  นี่ก็เป็นโค้ดนะครับ โค้ดunorder lists นะครับ นี่เป็น order lists แบบเรียงลำดับก็จะมีเลข ตั้งชื่อมันให้มันว่าเลข อันนี้สามารถใส่ได้มากกว่า 1 เลเวลได้นะครับ under lists ซ้อนกันอะไรแบบนี้ lists ซ้อน lists แบบนี้ ซึ่งในเวิร์ดก็ทำได้ครับ lists ซ้อน lists นะครับ มันก็มีวิธีการเขียน มีการแทรกของlists ด้านบน มีการแทรก Text p ตรงกลางแล้วก็มี lists ก็อยู่ที่การออกแบบข้อมูลครับ  เขาก็แทรก Text p มา แต่ Text p เขาก็ Modify  css ให้มีกรอบและมี background สีอะไรก็ว่าไป อันนี้ก็เป็น description lists ที่ถูกใช้ในนิยามของพวกของดิกชินารีด้วยนะครับ milk คืออะไร A white, liquid dairy product. อะไรแบบนี้ แล้วก็มีในเรื่องของการให้คำนิยามนะครับ นี่ก็เป็น lists ต่างๆ นี่คือตัวอย่างของการใช้งานนะครับ ของ lists นะครับ  อันนี้คือ Nesting lists นะครับ  Nesting lists ก็คือ lists ซ้อน lists ละครับ มี lists ในนี้ ซ้อน lists ตัวนอกอีกทีหนึ่ง ทั้งหมดนี้เป็น Nesting lists วิธีการเขียนก็จะเป็นแบบนี้ อันนี้คือ lists สังเกตนะครับนี่เป็น lists ก้อนนึง ซ้อนอยู่ใน OL ก้อนนึง ซ้อนอยู่ใน OL ก้อนใหญ่อีกก้อนนึง ก็จะเป็น lists ซ้อน lists แน่นอนครับ โอเค จบนะครับ เรื่องของlists นะครับทวนมันก็คือเรื่องของการนำเสนอข้อมูลรูปแบบหนึ่งที่ทำให้เรียบง่าย แบ่งเนื้อหาเป็นบรรทัดๆ เข้าใจง่ายแล้วก็อยู่ในรูปของโค้ด ถ้าเป็นรูป HTML ก็จะมีแบบ unorder lists คือ UL และ Order list ก็คือ OL แล้วก็จะมีคนใช้แบบ description เป็นแบบ DT  description lists อะไรก็แล้วแต่ สำหรับเรื่องlist,  HTML lists สำหรับวันนี้  สวัสดีครับ

พื้นฐานการใช้งาน Webflow

ครับ ! หลังจากที่เราพูดเกี่ยวกับรายละเอียดคร่าวๆในเรื่องของ Basic  ไปแล้ว dot type ไปแล้ว validation ไปแล้ว head ไปแล้ว text,list,Image  คราวนี้เป็นเรื่องของImage หละครับ  คือในเรื่องของการใส่ภาพเนี่ยบางทีพวกนี้จะไม่ค่อยเห็นภาพ ไม่มีอะไรอธิบายมากมายแปลการใส่ขนาดภาพเฉยๆ ผมจะใช้ webflow  เข้ามาช่วยอธิบายเลยแล้วกัน Webflowเนี่ย สมมุติผม Create Pageเข้ามาสำหรับImageตรงนี้ใส่ Page nameได้ URLได้ ใส่ SEO Titleได้เหมือนที่ผมเคยพูดก่อนหน้านี้ในเรื่องของ Tag Title เราก็ใส่เป็นฟิวส์แบบนี้แล้วใส่ข้อมูลมันก็จะไปอยู่ที่ Tag Titleให้อยู่ในเรื่องของ Meta Description,Meta Keyword ที่ผมพูดในคลิปก่อนหน้านี้ ก็จะใส่ช่องนี้ ก็จะปรากฏให้ โอเค ส่วนต่อไปคือเรื่องของImage Imageใน webflowจะทำง่ายครับ คือใส่ค่าได้เลย  เนี่ยคือช่องแล้วเลือกใส่ Imageได้เลย แล้วก็เลือกอับโหลดภาพที่เราต้องการได้เลย ผมเลือกอับโหลดภาพ Imageเข้าไปเลย คือเวลาเราเขียนโค๊ดเนี่ยมันจะยากนิดหนึ่ง เราต้องรู้โค๊ด รู้ค่าอะไรต่างๆ รู้เรื่องสคริปต่างๆเราถึงจะเข้าใจการทำงานของมัน แต่เราใช้โปรแกรมนี้ช่วยแล้วเราก็มาแกะโค๊ดทีหลังนี่ แล้วโปรแกรมที่ใช้เนี่ยมันจะอ้างอิงเทคโนโลยีใหม่ล่าสุด ก็จะทำให้เราเรียนรู้เทคโนโลยีใหม่ไปในตัวทำให้เราทันเทคโนโลยีมากขึ้น เราอับโหลดแปบหนึ่ง ไฟล์ภาพใหญ่ไปนิด พออับโหลดมาเราก็สามารถปรับอะไรต่างๆได้มากมาย เราใส่ Classให้มัน ตั้งชื่อClass ตามของเราเอง ปรับขนาด ปรับ spaceของมันได้ ปรับPagedingของมันได้ ปรับขนาดให้เล็ก-ใหญ่ ของมันได้ ปรับ float left-rightตำแหน่งของการวาง คราวนี้เป็นเรื่องของ CSSแล้วพวกนี้จะอยู่ในนี้ ไม่ว่าจะเป็นการปรับลักษณะต่างๆเช่น float left-right ,display,clear,blogถ้าเราเล่นCSSจะรู้ว่ามันต้องมีคำสั่งที่เราต้องเรียนรู้ทั้งหมดเยอะแยะเต็มไปหมด แต่ถ้าเราใช้ผ่านอินเตอร์เฟสก็จะช่วยให้เราปรับแต่งได้ง่ายขึ้นแล้ว export codeออกมาดูเอา overflowต่างๆนี้background ถ้าเรามีbackgroundสีแล้วbackground ภาพมันอาจจะทับอยู่ทำให้มีภาพอยู่ ปรับborderอะไรได้ มันเป็นเรื่องของอินเตอร์เฟสคลิกแล้วก็ปรับ เพื่อทำงานให้ง่ายขึ้น แล้วก็พิกเซลมันเปะมาก สามารถใส่ลิ้งค์ได้ก็จะครอบไปใน textอีกที ในเรื่องของImageนะคัรบ Image ก็จะลากใส่ซ๊อสที่อยู่ของภาพใส่อะไรปรับแต่งใส่ Border อะไรพวกนี้ได้ด้วย โดยปกติถ้าเราจะใส่ boader หรือ shadowอะไรสักอย่าง เราจะเขียนโค๊ดที 3-4 บรรทัด ถ้าเราใช้โปรแกรมช่วยอย่างที่ webflowที่ผมเล่นเนี่ยก็จะใช้โค๊ดนิดเดียวเอง ทำให้เราทำงานง่ายขึ้นซึ่งบางที dreamwaverยังไม่มีคำสั่งในส่วนของพวก shadowนี่เลยdreamweverยังทำตามไม่ทันอยู่ในส่วนของ gradient  ก็ยังแสดงผลได้ไม่ดีพอ แต่ส่วนอื่นโอเคแล้วหล่ะ โดย dreamweverก็มีจุดเด่นในแบบของเค้า คือทำงานกับไฟล์ PHPได้ ส่วน webflow ทำงานในเรื่องของไฟล์ HTML ,Java script แล้วก็ CSS เป็นหลัก เวลาเราทำงานด้าน PHPเราค่อย export  ไปใช้ใน dreamweverได้ อันนี้คือการทำงานในส่วน Image คร่าวๆ คราวนี้เรามาลอง exportออกมา มันก็จะ export codeออกมา เนื่องจากตัวนี้มันจะมีหลายหน้า มันจะมี codeเก่าๆด้วยเวลา export codeออกมาก็จะมีรวมหน้าเก่าๆมาด้วยเห็นไมครับ export codeออกมาก็จะบอกว่ามีImageอะไรบ้างที่เราใช้ และก็มี HTMLทางด้านซ้าย CSSทางด้านขวามันก็จะมี โค๊ด ออกมาด้วย อันนี้จะเป็นโค๊ดหน้าแรกที่ผมใช้ อ้าว ! โอเค นี้ก็จะเป็นโค๊ด ผมปรับนิดหนึ่งให้มันดูง่ายขึ้น โอเค อันนี้โค๊ดหน้าแรกมันจะมีภาพ มีอะไรอยู่ มีวีดิโอ ใส่ headingได้หลายขนาด ปรับไซส์อะไรได้คือก่อนหน้านี้เราเรียนเรื่องHeadingมาก็จะปรับไซส์ headingปรับมาจิน ปรับอะไรต่างๆที่ว่าง ปรับfont,ปรับสี อะไรพวกนี้ครับปรับสี headingปรับ capitalปรับตัวใหญ่-ตัวเล็ก เรื่องของภาพ ใส่ที่อยู่ภาพอะไรต่างๆ เรื่องของ text ,paragraph paragraph ก็สามารถเปลี่ยน font เปลี่ยนชนิดของมันได้ พอเปลี่ยน fontก็จะเปลี่ยนหมดเลย พอเราเปลี่ยนมันจะกระทบหมดเลย เพราะว่าถูกออกแบบมาให้สามารถแก้ไขครั้งเดียวกระทบทั้งหน้า มันก็จะง่ายในการแก้ไข ปรับสีต่างๆอะไรก็แล้วแต่ เห็นไมครับก็จะง่ายมาก ก็มีปุ่ม buttonใส่ลิ้งค์ ใส่สี ใส่อะไรได้ เปลี่ยนสีtext linkต่างๆเวลาเอาเม้าท์ชี้ไป overมันก็จะเปลี่ยนสีหรือเพิ่มสีพวกนี้ปรับได้หมดครับเป็นตัวอย่างของการใส่ภาพและ text ,paragraphต่างๆ นี้คือlistที่ผมเคยพูดมาก่อนหน้านี้ นี้คือ listก็ปรับได้ จะเป็นแบบ nonorder listคือแบบกลมๆ หรือเลข 1 นี้คือ order list ถ้าไม่มี ก็ตัดออกไปเลยก็ได้ไม่มี ไม่มีกลมๆข้างหน้านี้คือเรื่องของ listเรื่องของ formนี่ก็เรื่องของ ฟอร์มต่างๆก็สามารถปรับขนาดfontได้ ปรับเพียงแค่เราใส่classให้มันเข้าไป เราจะสามารถปรับขนาด fontที่อยู่ในฟอร์มได้ เปลี่ยนขนาด เปลี่ยนตำแหน่งอะไรต่างๆ สามารถขยับได้ อันนี้ผมขยับบริเวณอินเตอร์เฟส อินเตอร์เฟสอาจจะอยู่นอกจอนิดหนึ่งก็อาจจะไม่เห็น มี check ,check box , เรดิโอ สามารถทำ form-contran mailแล้วก็พิมพ์ข้อมูลเข้าไปให้คนพิมพ์ใส่ฟอร์มแล้วส่งกลับมาที่เราได้โดยที่เราไม่ต้องเขียน PHPเลย สามารถตอบรับ อันนี้เรื่องของ เอ่อ… เราสามารถใช้ทักษะของการ..เรียกว่า ”อินแฮริก” คือเป็นลักษณะของมรดก การรับช่วงต่อคือ ”อินแฮริก” แปลว่า มรดกก็ได้ครับคือ backgroundตรงนี้สีเข้ม background ด้านนอกสีเข้ม boxสีเข้มเราแค่ปรับสี font นิดเดียว ปรับขนาดสีของ fontหรือของbackground มันจะมีผลกระทบทั้งหมด สมมุติผมเปลี่ยนเป็นสีอื่น เห็นไมครับ มันก็เปลี่ยนแต่ H1ไม่เปลี่ยนเพราะผมกำหนดเฉพาะเจาะจงไป แต่ส่วนอื่นๆ Hต่างๆที่ไม่ได้กำหนดเฉพาะเจาะจงก็จะเปลี่ยนไปตามสีที่ผมเปลี่ยน paragraph ผมกำหนดเฉพาะเจาะจงไว้แล้ว ผมก็จะเปลี่ยนสี ทีนี้ผมคืนค่าเดิมก่อนมันก็จะเปลี่ยนสีเป็น backgroundให้ตามสีที่เราเลือก แบบนี้จะทำให้แก้ไขงานได้ง่ายนะคัรบการเปลี่ยน theme สีอะไรต่างๆหรือเขียนสคริปเพื่อรองรับการเปลี่ยนthemeสีมันก็จะใช้ทักษะของ อินแฮริก นี้แหละในการแก้ไข themeสี เวลาที่เปลี่ยน theme สีเป็นสีเขียว สีแดง สีฟ้า สีอะไรต่างๆก็จะใช้วิธีการเหล่านี้ในการแก้ไข เห็นไมครับว่าเป็นการเปลี่ยนสีทั้งหน้าในคลิกเดียวง่ายมาก ภาพอะไรต่างๆสามารถเปลี่ยนรายละเอียดได้ วีดิโอสามารถนำมาใช้งานรันได้ ปุ่มก็มีหลายขนาดเราก็ออกแบบให้มีหลายขนาด เราออกแบบไว้หลายขนาดเพื่อเวลาเราเอาไปใช้กับ wordpressจึงต้องออกแบบหลายขนาด ใน theme forestก็มีการออกแบบปุ่มไว้หลายขนาดมีขนาด medium ,last , smallคือขนาด เล็ก กลาง ใหญ่แล้วสีของ link ต่างๆ นี่คือตัวอย่างการใช้งานในเรื่องของ heading ที่มีขนาดต่างๆเราก็กำหนดไซส์ได้ headingเราก็กำหนดเป็นชนิดEMก็ได้เห็นไมครับ EM ถ้าคนที่ถนัดใช้ EMจะชอบคือกำหนดเป็นกี่เท่าของ Bodyความสูงระหว่างตัวอักษร ไลน์Hideก็กำหนดได้ กำหนด fontตัวหนา ตัวเอียง ชนิดการเรียง ตัวพิมพ์ใหญ่ พิมพ์เล็ก กำหนดได้ค่อยข้างละเอียดเลยทีเดียว ครอบคลุมการใช้งานมากพอสมควร นี่คือคร่าวๆในการใช้งาน เวลาเราอยากสร้างหน้าขึ้นมาใช้งานหน้าหนึ่ง เราแค่เพียง create pageขึ้นมาหนึ่งหน้าแล้วก็ตั้งชื่อ page nameของเราเป็นอะไรก็ได้ครับ ใส่ SEO Description, ใส่ SEO Keywordช่องนี้เพื่อให้ Googleช่วยการค้นหา แล้วก็สร้างหน้าขึ้นมามันก็จะได้หน้ามาหนึ่งหน้าครับ เวลาใช้งานเราก็…จะสาธิตการใช้งาน webflowง่ายๆ เพียงคาลากมาวาง เราก็ลากsectionมาวาง ลากcontainerมาวาง มันก็จะเป็นกล่องcontainer แล้ว เราจะแบ่ง columnก็ลาก column  มาวางแล้วก็เลือกว่าจะเอากี่ columnเวลาใช้เราก็เอา headingมาเริ่มแรกเราเปิดด้วย heading ก่อน สมมุติเราเลือก heading 3 เราอยากมี paragraphdetailของ headingไมจับเลื่อนได้เลยถ้าใส่ผิดช่อง อยากใส่ภาพไม ก็ใส่ภาพเข้าไปเลือกอับโหลดภาพ สมมุติผมใส่โลโก้มันก็จะทำการอับโหลดภาพไปให้ คาวมเร็วอินเตอร์เน็ตเค้าค่อยข้างเร็ว เค้าใช้ CDNคือ content delivery network คือไม่ว่าอยู่ที่ไหนก็จะใช้ความเร็วของเครือข่าย networkช่วย เห็นไมครับว่าง่ายนิดเดียวเองสมมุติว่าผมต้องการ copyอีกอันก็ทำได้ ก็ copy ไป เห็นไมครับ ก็ทำได้ เราก็ทำการเปลี่ยนภาพนิดหนึ่งเป็นการทำ webที่รองรับ Responsiveแบบง่ายๆซึ่งมันค่อยข้างหยืดหยุ่นด้วย ลองเล่นดู เราจะรู้ว่าเราสามารถตั้งชื่อ classตั้งชื่อID ได้แล้ว exportมาเป็นโครงสร้างในการทำ wordpressต่อซึ่งผมจะสอนในหลักสูตรถัดไป นี่ก็เป็นพื้นฐาน แต่พวกนี้มันจะมี ทริค คือว่าการตั้งชื่อต่างๆต้องรู้โครงสร้างของ wordpressด้วยแล้วก็นำไปใช้ต้องรู้โครงสร้างของwordpress ด้วยว่าเราจะเปลี่ยน wordpressได้ไง แล้วก็เราควรออกแบบเพื่อสอดคล้องยังไงเพื่อเวลาใช้ทำ theme wordpressแม้ว่าถึงจนขนาดที่เราสนใจทำ theme wordpress ขาย เราต้องดูเรื่องเทคนิคต่างๆเหล่านี้ด้วย ซึ่งเหล่านี้ผมก็ใช้ webflow ศึกษามาระดับหนึ่งแล้ว เอาหล่ะ..เรามาดูtagต่างๆ tagต่างๆพวกนี้ก็รองรับ HTML5 สังเกตว่าจะมี HTML5Tag มีDiv,Header,Footer,Nav,Main.Section,Article,Askle,BQuote,Address,Figure เยอะมากเลย แต่เราใช้หลักๆจะเป็น Header,Footerแล้วก็ Navi,Article,Sectionหลักๆเท่านั้นครับ Slidebarก็จะใช้ Askle ก็หมดแล้ว เราค่อยๆเรียนรู้ไป เรื่องรองรับ Responsiveต่างๆเหล่านี้เราก็กดรีวิวต่างๆดู เปลี่ยนขนาดไซส์ เปลี่ยนเป็นไอแพดเปลี่ยนเป็นไอโฟนแนวนอน-แนวตั้งและสามารถจัดภาพให้ตรงกลางได้ก็ปรับเป็นรูปร่างหน้าตาให้ดู สมมุติว่าเราปรับขอบ ปรับ Column สมมุติเป็นไอโฟน แนวนอนเราอยากปรับให้แสดงผลแบบ 3 columnแบบนี้ก็ได้หรือแบบนี้ก็ได้ นี่คือรายละเอียดของการใช้ webflowคร่าวๆ ในการที่เราจะเรียนรู้ HTMLพอเราเริ่มเรียรรู้แล้ว เราก็จะเริ่มสังเกตมันแล้วก็ export codeมา ว่าตัวนี้เขียนอย่างไร สคริป นี้เขียนอย่างไร เป็นการเรียนรู้ที่สนุกกว่าแล้วทำให้เราติดตามเทคโนโลยีอย่างสม่ำเสมอเพราะเค้าใช้เทคโนโลยีใหม่ล่าสุด ทำให้เราใช้งานได้ดี เรียนรู้ที่เร็วขึ้น สำหรับ Clipอธิบายเรื่องของการใส่ภาพและจนถึงครอบคลุมการใช้งาน webflowจบเพียงเท่านี้