เปิดตัวบน HN: HTML สำหรับทุกคน

 (htmlforpeople.com)
4 คะแนน โดย GN⁺ 2024-10-11 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • HTML for People คือเว็บบุ๊กสำหรับผู้เริ่มต้นที่ช่วยให้แม้แต่คนที่อยู่นอกวงการเทคโนโลยีก็สามารถสร้างเว็บไซต์ด้วย HTML ได้ด้วยตนเอง
  • มอง HTML เป็น รูปแบบเอกสารของเว็บ ที่ทุกคนสามารถใช้งานได้ และใช้เป็นจุดเริ่มต้นของการสร้างเว็บไซต์
  • จัดโครงสร้างให้สามารถทำตามการ สร้างเว็บไซต์ตั้งแต่เริ่มต้น ได้ แม้ไม่มีประสบการณ์ทำเว็บไซต์หรือเขียนโค้ดมาก่อน
  • Blake Watson สร้างเว็บไซต์มาตั้งแต่ช่วงต้นทศวรรษ 2000 และเขียนหนังสือเล่มนี้จากความเชื่อว่าทุกคนควรได้เรียนรู้ HTML
  • เน้นการนำเสนอสิ่งที่จำเป็นใน รูปแบบที่เข้าถึงง่ายและเป็นมิตร เพื่อลดกำแพงในการเริ่มต้นสำหรับผู้เริ่มเรียน

HTML ที่ใคร ๆ ก็ใช้งานได้

  • HTML ไม่ใช่เครื่องมือเฉพาะสำหรับคนทำงานสายเทคโนโลยี แต่เป็นรูปแบบที่เปิดให้ทุกคนที่อยากสร้างเว็บไซต์ด้วยตนเองใช้งานได้
  • เมื่อเข้าใจ HTML ในฐานะ ประเภทเอกสาร ที่ประกอบกันเป็นเว็บ ก็สามารถเริ่มสร้างเว็บไซต์ได้โดยไม่ต้องพึ่งเครื่องมือซับซ้อน

เว็บบุ๊กสำหรับผู้เริ่มต้น

  • HTML for People คือเว็บบุ๊กที่เป็นมิตรกับผู้เริ่มต้น ซึ่งแม้แต่คนที่ไม่มีประสบการณ์สร้างเว็บไซต์หรือเขียนโค้ดก็สามารถทำตามได้
  • Blake Watson สร้างเว็บไซต์มาตั้งแต่ช่วงต้นทศวรรษ 2000 และแม้จะทำงานในสายอาชีพเฉพาะทาง เขาก็มองว่าทุกคนควรสามารถสร้างเว็บไซต์ด้วย HTML ได้
  • หนังสือนำทางเนื้อหาที่จำเป็นต่อการเริ่มต้นใน รูปแบบที่เข้าถึงง่ายและเป็นมิตร

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-10-11
ความคิดเห็นบน Hacker News

  • ชอบการเลือกพึ่งพา https://simplecss.org/ แทนที่จะจัดการ CSS เองโดยตรง CSS เป็นคนละโลกกันเลย และถ้าวางทับบน HTML พื้นฐานก็อาจกลายเป็นภาระไม่น้อย
    แต่ “ขั้นตอนที่ 1. สร้างโฟลเดอร์บนคอมพิวเตอร์” ใน https://htmlforpeople.com/zero-to-internet-your-first-websit... น่ากังวลอยู่นิดหน่อย เพราะทุกวันนี้ดูเหมือนมีคนจำนวนมากที่ไม่เข้าใจเรื่องไฟล์และโฟลเดอร์เลย: https://www.theverge.com/22684730/students-file-folder-direc...
    แต่จะใช้หนังสือทั้งบทมาอธิบายไฟล์กับโฟลเดอร์ก็รู้สึกซ้ำซ้อน ถ้ามีสื่อปูพื้นฐานดี ๆ ให้ลิงก์ไปแทนได้ก็คงดี

    • น่าตกใจว่า โรคระบาดจากมือถือ ลุกลามไปไกลแค่ไหนแล้ว แม้แต่นักศึกษาที่เข้ามาเรียนสาขาวิทยาการคอมพิวเตอร์ ก็ยังมีกรณีที่ไม่รู้วิธีแตกไฟล์ zip หรือหาไม่เจอว่าไฟล์ที่ดาวน์โหลดมาอยู่ตรงไหน
      อนึ่ง นักศึกษาลักษณะนั้นที่ผมรู้จักลาออกก่อนขึ้นปี 2
    • ไม่รู้จักไฟล์กับโฟลเดอร์เหรอ ทางนี้กำลังโบกกำปั้นแล้วเถียงว่ามันไม่ใช่ “โฟลเดอร์” แต่คือ ไดเรกทอรี ต่างหาก ;)
    • ผมผิดหวังนิด ๆ มาตลอดกับวิธีที่เว็บเบราว์เซอร์ส่วนใหญ่เรนเดอร์หน้า HTML ที่ไม่มีข้อมูลสไตล์ระบุไว้อย่างชัดเจน
      ไม่ได้หมายความว่าค่าเริ่มต้นของเบราว์เซอร์ควรมีรสนิยมจัดจ้านเท่า simple.css แต่ระยะขอบ, padding, สไตล์ตัวอักษร, หัวข้อ ฯลฯ แบบค่าเริ่มต้นก็ไม่ได้ดูน่าดึงดูดเท่าไร
      นักพัฒนาเว็บที่มีรสนิยมชัดเจนย่อมเขียนทับค่าเริ่มต้นไม่ว่ามันจะเป็นอะไร แต่ก็อดสงสัยไม่ได้ว่า ถ้าค่าเริ่มต้นที่ดูดีกว่านี้เป็นธรรมเนียมกันมา อาจมี เว็บส่วนตัวและบล็อกแบบ HTML ล้วน เกิดขึ้นมากกว่านี้หรือเปล่า
    • จุดเริ่มต้นของจุดจบคือการที่เวลาเปิดแอปหรือเว็บแอปแล้วเริ่มแสดง รายการเอกสารล่าสุด แทนที่จะเปิดเอกสารใหม่
      ถ้าต้องการไฟล์ไหน ก็แค่เปิดแอปสำหรับไฟล์นั้นแล้วเลื่อนลงไปหา จึงไม่จำเป็นต้องเข้าใจโมเดลที่ว่าไฟล์มีอยู่เป็นอิสระจากแอป และสามารถสร้างหรือดูได้ภายในแอป
      ผมมองว่าการที่ iOS ไม่มีตัวจัดการไฟล์ยิ่งทำให้แนวโน้มนี้ฝังแน่นขึ้น
    • ผมไม่คิดว่านี่เป็นปัญหาของเจเนอเรชัน มันใกล้เคียงกับ ความขี้เกียจ ล้วน ๆ ที่แพร่เหมือนโรคระบาดมากกว่า
      โมเดลความคิดแบบ “โยนทุกอย่างรวม ๆ ลงตะกร้าผ้า แล้วค่อยหยิบออกมาตอนต้องใช้” หรือคำพูดว่า “พยายามจัดระเบียบแล้ว แต่พอไฟล์เยอะเกินไปก็กลายเป็นกองรก” แสดงให้เห็นเรื่องนี้ได้ดี
      ผมคุ้นเคยกับคอมพิวเตอร์มากเหมือนคนจำนวนมากใน HN และเคยพยายามเลี่ยงโมเดลไฟล์/โฟลเดอร์ด้วย แต่สุดท้ายก็หาวิธีไม่ได้ ไม่ว่าจะดู “ล้ำหน้า” แค่ไหน วิธีอื่นก็พัง
      LLM อาจเปลี่ยนเรื่องนี้ได้ แต่จนถึงตอนนี้ยังไม่มีวิธีให้คอมพิวเตอร์คาดเดาได้ว่าผมต้องการหรือไม่ต้องการอะไร แล้วจัดระเบียบให้เอง

  • ผมคิดว่าแนวทางพื้นฐานของโปรเจกต์นี้มีคุณค่ามากต่อโลก
    การศึกษาเรื่อง มาตรฐานเปิด แบบนี้อาจเป็นเครื่องมือทรงพลังที่จะพาเราหลุดจากบริษัทขนาดใหญ่ที่ทึบแสง และกลับไปสู่อินเทอร์เน็ตในฐานะระบบที่ตั้งอยู่บนมาตรฐานเปิดอย่างในจุดเริ่มต้น
    หวังว่าจะมีการอัปเดตต่อเนื่อง และมีคนเห็นและร่วมสนับสนุนมากขึ้น ถ้าคิดเหมือนกัน อย่างน้อยก็ไปกดดาว GitHub ให้ก็ดี: https://github.com/blakewatson/htmlforpeople
    อนึ่ง จนถึงตอนนี้ผมไม่มีส่วนเกี่ยวข้องใด ๆ กับโปรเจกต์นี้ และไม่ได้อะไรจากการพูดแบบนี้

    • Mozilla มีเอกสารยอดเยี่ยมมาหลายปีแล้ว
      มีส่วนบทเรียน HTML พื้นฐานด้วย: https://developer.mozilla.org/en-US/docs/Learn/HTML
      ไม่ใช่ว่ามีใครไปขวางไม่ให้ผู้คนเรียน HTML เสียหน่อย
    • หวังว่าจะเป็นแบบนั้นจริง ๆ ผมสงสัยว่าจะเกิดอะไรขึ้นถ้าคนทั่วไปเริ่มรู้สึกว่า การเรียน HTML ก็เป็นทางเลือกที่ใช้ได้จริงและมีประโยชน์ในการบรรลุเป้าหมาย แทนที่จะใช้เวลาหลายสิบชั่วโมงเรียนวิธีใช้ WordPress หรือ MS Word
    • OP เองครับ ขอบคุณสำหรับคำพูดดี ๆ หวังว่าสื่อนี้จะไปถึงมือ ผู้ที่ไม่ใช่ผู้เชี่ยวชาญ

  • ทำได้ดีมาก ผมชอบจริง ๆ กับวิธีที่เริ่มจากการแสดงให้เห็นก่อนว่าแค่เขียนข้อความธรรมดาแล้วเผยแพร่ก็ใช้งานได้ทันที จากนั้นค่อย ๆ เปลี่ยนไปสู่ HTML อย่างเป็นธรรมชาติ
    งานเขียนก็ชัดเจน เป็นมิตร และมีโครงสร้างดี ทำให้อ่านง่ายและดูน่าสนุก ผมเชื่อว่าการเอา HTML ไปไว้ในมือผู้ที่ไม่ใช่ผู้เชี่ยวชาญเป็นเป้าหมายที่ดี
    ถ้าจะให้ฟีดแบ็กสักเล็กน้อย เนื้อหาเกี่ยวกับการเข้ารหัสอักขระดูเหมือนจะมาค่อนข้างช้า คนที่คุ้นกับภาษาอังกฤษแต่ต้องการเขียนเว็บไซต์เป็นภาษาของตัวเอง หรือคนที่มีชื่อซึ่งมีเครื่องหมายกำกับเสียง อาจตกใจได้ น่าจะบอกว่าเรื่องนี้จำเป็นสำหรับภาษาส่วนใหญ่ที่ไม่ใช่ ASCII ล้วน มากกว่าจะบอกว่าเป็นแค่สำหรับอักขระพิเศษอย่างอีโมจิ
    แท็ก body, head, html ส่วนใหญ่ไม่มีก็ได้ แต่ html มีประโยชน์เพราะแอตทริบิวต์ lang ช่วยด้านการเข้าถึง และช่วยป้องกันข้อเสนอแปลภาษาที่ผิดพลาดจากเบราว์เซอร์บางตัว
    VS Code น่าเสียดายนิดหน่อยเพราะมี telemetry และดูหนักกับซับซ้อนเกินงาน บน Windows นั้น Notepad++ เป็นตัวเลือกที่ดี ส่วนบน Linux โปรแกรมแก้ไขข้อความที่ติดตั้งมาเป็นค่าเริ่มต้นก็เพียงพอแล้ว ยังมี Codium ซึ่งตัดส่วนแย่ ๆ ออกไปด้วย กลุ่มผู้อ่านเป้าหมายไม่รู้เรื่องส่วนแย่ ๆ เหล่านี้ จึงอาจลงสปายแวร์โดยไม่รู้ตัว
    ผมไม่เคยรู้จักฟีเจอร์ aria-current="page" มาก่อน แต่คิดว่าต่อไปคงเริ่มใช้

    • ถ้าจะใส่แท็กนั้น ไม่ใช่ว่าต้องตั้งค่าให้โปรแกรมแก้ไขข้อความ บันทึกเป็น UTF-8 ตั้งแต่แรกหรือ? เช่น Notepad ไม่ได้ใช้ UTF-16 เป็นค่าเริ่มต้นเหมือนอย่างอื่น ๆ บน Windows เหรอ?
    • ความซับซ้อนใหญ่ตรงนี้คือผู้คนไม่รู้จัก การเข้ารหัสอักขระ เองเลย ดังนั้นจึงคาดหวังยากว่า index.html จะถูกบันทึกเป็น UTF-8 ตั้งแต่แรก
      ตัวอย่างเช่น Windows Notepad น่าจะใช้ active code page เป็นค่าเริ่มต้น ถ้าสามารถพูดถึงปัญหาการบันทึกไปพร้อมกันได้ ผมเห็นด้วยว่าเนื้อหานี้ควรถูกทำให้เด่นขึ้น

  • แนวคิดดีมาก และก็ดีใจที่มีเว็บไซต์แบบนี้มากขึ้น แต่ผมมองว่ามันตั้งอยู่บนสมมติฐานเรื่อง ทักษะการใช้คอมพิวเตอร์ ในระดับที่คาดหวังจากผู้ใช้ทั่วไปที่ไม่ใช่สายเทคนิคได้ยาก
    ขั้นแรกเริ่มด้วย “เลือกตำแหน่งในคอมพิวเตอร์แล้วสร้างโฟลเดอร์ ตั้งชื่อประมาณ my-site” ซึ่งแค่นี้ก็อาจทำให้คนส่วนใหญ่หลุดไปแล้ว
    มีคนจำนวนมากจนน่าตกใจที่ใช้คอมพิวเตอร์ทุกวันแต่ไม่รู้ว่าต้องทำสิ่งนี้อย่างไร

    • ผมรู้สึกแปลกที่ประเด็นนี้ถูกย้ำอยู่เรื่อย ๆ ในเธรดนี้
      ยากจะเชื่อว่าคนที่ใช้คอมพิวเตอร์ทุกวันจะไม่รู้วิธีสร้างโฟลเดอร์ แม้แต่แม่ผมที่แทบไม่ใช้คอมพิวเตอร์ก็ยังน่าจะรู้ว่าโฟลเดอร์กับไฟล์คืออะไร
      คนที่ไม่รู้ว่าไฟล์กับโฟลเดอร์คืออะไร ก็คงยังไม่ใช่ผู้ได้รับประโยชน์โดยตรงจากไกด์นี้ไม่ใช่หรือ? ก่อนหน้านั้นต้องเรียนรู้เรื่องพื้นฐานกว่านี้มากก่อน
    • ผู้ใช้ HN จำนวนไม่น้อยก็น่าจะเปิดดูหน้าจาก อุปกรณ์มือถือ และคงไม่ได้อยู่ในสถานการณ์ที่จะทำตามคำสั่งได้ทันที
    • ถ้าเป็นเรื่องจริงก็น่าเศร้ามาก ผู้คนถดถอยกันถึงขนาดนี้แล้วหรือ? ตอนผมยังเป็นเด็กเล็กก็ทำตามคำสั่งแบบนี้ได้ และจริง ๆ แล้วผมสร้างเว็บไซต์ของตัวเองตอนอายุ 10 ขวบ
      มันร้ายแรงขนาดนั้นจริง ๆ หรือว่าเราเริ่มต้นด้วยการไม่เชื่อใจผู้คนมากเกินไป? เป็นเพราะทุกอย่างถูกทำผ่านแอปบนคลาวด์หรือเปล่า?
    • ผมคือ OP เอง ผมก็กังวลเรื่องนี้อยู่บ้าง และในบทนำก็พูดถึงไว้ระดับหนึ่งแล้ว แต่คิดว่าน่าจะต้องพูดให้มากกว่านี้
      กำลังคิดอยู่ว่าจะเขียนและโฮสต์เอกสารปูพื้นฐานเรื่องการสร้างไฟล์กับโฟลเดอร์เอง หรือจะลิงก์ไปยังเอกสารพื้นฐานแบบนั้นแทน

  • ผมเคยพยายามโน้มน้าวคนที่ไม่ใช่สายเทคนิคหลายครั้งว่าเขาสร้างเว็บไซต์ของตัวเองได้ง่ายมาก แต่ส่วนใหญ่จะคิดว่าเป็นเรื่องล้อเล่น หรือคิดว่าต้องใช้ความพยายามมหาศาล
    ครั้งหน้าผมตั้งใจจะให้เขาดูเว็บไซต์นี้ แล้วให้ลองใช้เวลาแค่ 30 นาทีดูว่าในเวลานั้นสร้างอะไรได้บ้าง ผมรู้ว่ามีคนจำนวนมากที่จะติดใจทันทีที่ได้ลิ้มรสครั้งแรกว่า “ว้าว ฉันเอาอะไรบางอย่างขึ้นเว็บจริง ๆ แล้ว!”
    @blakewatson: มีแผนจะเพิ่ม การรองรับหลายภาษา ให้เว็บไซต์และรับ pull request แปลภาษาหรือเปล่า?

    • มี! อยากทำมากจริง ๆ ต้องอัปเดต README ก่อน แต่กำลังคิดกลยุทธ์ว่าจะวางบทที่แปลแล้วไว้ใน โฟลเดอร์ย่อย อย่าง /es
      สามารถตั้งค่าให้ Eleventy สร้างเมนูนำทางต่างกันตามพาธย่อยได้
    • โรงเรียนควรสอนเรื่องแบบนี้จริง ๆ ผมเคยทำเว็บไซต์ส่วนตัวหลายเว็บตอนมัธยมปลายและมหาวิทยาลัย ซึ่งก็แค่ HTML กับ CSS นิดหน่อย
      ผมคิดว่านี่ควรเป็นก้าวแรกของทุกคน เป็นวิธีที่ยอดเยี่ยมในการเขียนอะไรบางอย่างแล้วเห็นผลลัพธ์ได้รวดเร็วและง่ายดาย ไม่ต้องมีเซิร์ฟเวอร์ด้วยซ้ำ

  • ทำไมต้องเป็น “Start coding already!” ด้วยล่ะ? ใช้สำนวนอย่าง “Start writing already?” น่าจะดีกว่าไหม?
    ครึ่งหนึ่งของกำแพงที่ทำให้คนรู้สึกว่าสร้างเว็บยาก คือความคิดว่าต้องรู้การเขียนโค้ด ซึ่งฟังดูน่ากลัว ในขณะที่เขารู้อยู่แล้วว่าตัวเองอยากเขียนอะไร จึงเข้าถึงได้ง่ายกว่ามาก

    • เปลี่ยนเป็น “Get started already” แล้ว :)
    • ผมคือ OP เอง โอ้ เป็นข้อเสนอที่ดีมาก การถอดตัวตนของเว็บเดเวลลอปเปอร์ออกแล้วมองด้วยสายตาใหม่เป็นเรื่องยาก ถึงจะพยายามทำอย่างมีสติแล้วก็ยังเป็นแบบนั้น

  • ชอบที่เริ่มจากไฟล์ HTML เล็ก ๆ และไม่ได้บอกให้ติดตั้ง NodeJS, VS Code และ สารพัดของจุกจิกสายเว็บเดฟ ทันที

    • นี่เป็นบทเรียนที่ผู้เชี่ยวชาญจำนวนมากต้องกลับมาเรียนรู้อีกครั้ง การแสดงข้อความและรูปภาพพื้นฐานไม่จำเป็นต้องใช้ JavaScript หลายร้อย MB จริง ๆ
      การเข้าถึง และการล้มเหลวอย่างสง่างามถูกมองข้ามบ่อยเกินไป

  • ชอบลำดับของบทเรียนที่ให้ลอง deploy แบบง่าย ๆ ก่อน
    สร้าง index.html แบบข้อความธรรมดาด้วย Notepad/TextEdit, deploy ไปที่อย่าง Neocities แล้วค่อยเพิ่มเนื้อหาด้วยหัวข้อและรูปภาพ
    จากนั้นจึงใส่ head และ body เป็นต้น เพื่อทำให้เป็น HTML ที่ถูกต้อง และค่อยอัปเกรดจาก Notepad/TextEdit เป็น Visual Studio Code

    • คงรู้อยู่แล้ว แต่ใน HTML5 นั้น html, head, body เป็นส่วนที่ไม่บังคับ ดังนั้นแม้ไม่มีสิ่งเหล่านี้ก็ยังเป็น เอกสารที่ถูกต้อง

  • เป็นความพยายามที่ยอดเยี่ยมและทำออกมาได้ดีมาก ผมตั้งใจจะบุ๊กมาร์กไว้เพื่อแชร์ให้คนอื่น
    ช่วงหลังผมตัดสินใจเพิ่มเนื้อหาในเว็บไซต์ของตัวเองด้วย HTML ที่เขียนด้วยมือเท่านั้น และค่อย ๆ ย้ายบทความเก่า ๆ มาด้วย ผมชอบที่ HTML ตรงไปตรงมา ปรับแต่งเฉพาะหน้าได้ง่าย และทนทาน
    หลังจากใช้ระบบแทบทุกแบบสำหรับการเผยแพร่บนเว็บแล้ว ผมสรุปว่าแม้ช่วงแรกจะต้องทำงานเพิ่มนิดหน่อย แต่ HTML คือเครื่องมือที่เหมาะกับงานนี้
    ในฐานะนักพัฒนาที่เกษียณแล้ว เวลามีอารมณ์ก็ยังไปแตะ Rust, SQL หรือ embedded บ้าง แต่เวลาต้องการเขียน ผมก็แค่อยากเขียน HTML ช่วยให้ทำแบบนั้นได้ในระดับหนึ่ง
    ถ้าคนจำนวนมากขึ้นมอง HTML เป็น เอกสารสำหรับเขียน ไม่ใช่แค่เป้าหมายของ build ระบบต่าง ๆ น่าจะเรียบง่ายขึ้นมาก วิธีคิดในตอนนี้ทำให้ผู้ใช้คอมพิวเตอร์/เว็บทั่วไปช้าลงอย่างมาก และยังสร้างเรื่องปวดหัวใหญ่ให้กับนักพัฒนาด้วย
    ผมไม่รู้ว่าความซับซ้อนที่เรานำเข้ามาในโลกนี้ช่วยใครได้ใน 99% ของกรณี เอกสารนี้อาจเป็นหนึ่งในแรงผลักที่ช่วยพาเรากลับเข้าที่เข้าทางได้