From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/th/web/tutorials/index.html | 248 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 248 insertions(+) create mode 100644 files/th/web/tutorials/index.html (limited to 'files/th/web/tutorials') diff --git a/files/th/web/tutorials/index.html b/files/th/web/tutorials/index.html new file mode 100644 index 0000000000..44d392ebd9 --- /dev/null +++ b/files/th/web/tutorials/index.html @@ -0,0 +1,248 @@ +--- +title: Tutorials +slug: Web/Tutorials +tags: + - ผู้เริ่ม + - เบราว์เซอร์ +translation_of: Web/Tutorials +--- +

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

+ +

ทรัพยากรเหล่านี้ถูกสร้างขึ้นโดย บริษัท ที่มีความคิดก้าวหน้าและนักพัฒนาเว็บที่ยอมรับมาตรฐานแบบเปิดและแนวปฏิบัติที่ดีที่สุดสำหรับการพัฒนาเว็บและให้หรืออนุญาตการแปลผ่านใบอนุญาตเนื้อหาแบบเปิดเช่น Creative Commons

+ +

สำหรับผู้เริ่มต้นที่สามารถ​ติดต่อ​ขอ​ขอ​ขอ​ตมจบูรณ์บนเว็บ

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

บทเรียน HTML

+ +

ระดับเบื้องต้น

+ +
+
+
+
รู้เบื้องต้นเกี่ยวกับ HTML
+
โมดูลนี้ตั้งค่าขั้นตอนให้คุณคุ้นเคยกับแนวคิดและไวยากรณ์ที่สำคัญดูที่การใช้ HTML กับข้อความวิธีสร้างการเชื่อมโยงหลายมิติและวิธีการใช้ HTML เพื่อจัดโครงสร้างหน้าเว็บ
+
การอ้างอิงองค์ประกอบ MDN HTML
+
การอ้างอิงที่ครอบคลุมสำหรับองค์ประกอบ HTML และวิธีการที่เบราว์เซอร์ต่างๆสนับสนุนพวกเขา
+
+
+ +
+
+
การสร้างเว็บเพจอย่างง่ายด้วย HTML 
+
คำแนะนำ HTML สำหรับผู้เริ่มต้นที่มีคำอธิบายของแท็กทั่วไปรวมถึงแท็ก HTML5 นอกจากนี้ยังมีคำแนะนำทีละขั้นตอนในการสร้างหน้าเว็บพื้นฐานพร้อมตัวอย่างโค้ด
+
ความท้าทาย HTML 
+
ใช้ความท้าทายเหล่านี้เพื่อฝึกฝนทักษะ HTML ของคุณ (ตัวอย่างเช่น "ฉันควรใช้องค์ประกอบ <h2> หรือองค์ประกอบ <strong> หรือไม่") โดยเน้นที่มาร์กอัปที่มีความหมาย
+
+
+
+ +

ระดับกลาง

+ +
+
+
+
มัลติมีเดียและการฝัง
+
โมดูลนี้สำรวจวิธีการใช้ HTML เพื่อรวมมัลติมีเดียในหน้าเว็บของคุณรวมถึงวิธีการต่าง ๆ ที่สามารถรวมรูปภาพและวิธีฝังวิดีโอเสียงและแม้แต่หน้าเว็บอื่น ๆ ทั้งหมด
+
+
+ +
+
+
ตาราง HTML
+
Representing tabular data on a webpage in an understandable, {{glossary("Accessibility", "accessible")}} way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.
+
+
+
+ +

Advanced level

+ +
+
+
+
HTML forms
+
Forms are a very important part of the Web — these provide much of the functionality you need for interacting with websites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side parts of forms.
+
+
+ +
+
+
Tips for authoring fast-loading HTML pages
+
Optimize web pages to provide a more responsive site for visitors and reduce the load on your web server and Internet connection.
+
+
+
+ +

CSS Tutorials

+ +

Introductory level

+ +
+
+
+
CSS basics
+
CSS (Cascading Style Sheets) เป็นรหัสที่คุณใช้เพื่อจัดรูปแบบหน้าเว็บของคุณ CSS Basicsนำคุณไปสู่สิ่งที่คุณต้องเริ่มต้น เราจะตอบคำถามเช่น: ฉันจะทำให้ข้อความของฉันเป็นสีดำหรือสีแดงได้อย่างไร ฉันจะทำให้เนื้อหาของฉันปรากฏในสถานที่เช่นนั้นบนหน้าจอได้อย่างไร ฉันจะตกแต่งเว็บเพจด้วยภาพพื้นหลังและสีได้อย่างไร
+
CSS เบื้องต้น
+
โมดูลนี้มีเนื้อหาเชิงลึกเกี่ยวกับวิธีการทำงานของ CSS รวมถึงตัวเลือกและคุณสมบัติการเขียนกฎ CSS การใช้ CSS กับ HTML วิธีการระบุความยาวสีและหน่วยอื่น ๆ ใน CSS การเรียงซ้อนและการสืบทอดข้อมูลพื้นฐานโมเดลโมเดลและการดีบัก CSS
+
+
+ +
+
+
กล่องใส่สไตล์
+
ต่อไปเราจะดูกล่องใส่สไตล์ซึ่งเป็นหนึ่งในขั้นตอนพื้นฐานในการวางหน้าเว็บ ในโมดูลนี้เราสรุปโมเดลของกล่องจากนั้นดูที่การควบคุมเลย์เอาต์ของกล่องโดยการตั้งค่าช่องว่างภายในขอบและระยะขอบการตั้งค่าสีพื้นหลังที่กำหนดเองรูปภาพและคุณสมบัติอื่น ๆ และคุณสมบัติแฟนซีเช่นเงาและตัวกรองบนกล่อง
+
ข้อความสไตล์
+
ที่นี่เราดูที่พื้นฐานการใส่สไตล์ข้อความรวมถึงการตั้งค่าแบบอักษรความหนาและตัวเอียงตัวเว้นบรรทัดและตัวอักษรและเงาและตัวอักษรและคุณสมบัติข้อความอื่น ๆ เราปัดเศษโมดูลโดยดูที่การใช้ฟอนต์ที่กำหนดเองกับหน้าของคุณและรายการจัดแต่งทรงผมและลิงค์
+
คำถาม CSS ทั่วไป
+
คำถามและคำตอบทั่วไปสำหรับผู้เริ่มต้น
+
+
+
+ +

ระดับกลาง

+ +
+
+
+
โครงร่าง CSS
+
ณ จุดนี้เราได้ดูพื้นฐาน CSS, วิธีจัดรูปแบบข้อความและวิธีจัดรูปแบบและจัดการกล่องที่เนื้อหาของคุณอยู่ภายใน ตอนนี้เป็นเวลาที่จะดูวิธีการวางกล่องของคุณในสถานที่ที่เหมาะสมในความสัมพันธ์กับวิวพอร์ตและอีกคนหนึ่ง เราได้ครอบคลุมข้อกำหนดเบื้องต้นที่จำเป็นเพื่อให้สามารถดำน้ำลึกลงในเค้าโครง CSS ได้โดยดูที่การตั้งค่าการแสดงผลที่แตกต่างกันวิธีการจัดวางแบบดั้งเดิมที่เกี่ยวข้องกับการลอยและการวางตำแหน่งและเครื่องมือเค้าโครงแบบใหม่
+
การอ้างอิง CSS
+
อ้างอิง CSS ทั้งหมดโดยมีรายละเอียดเกี่ยวกับการสนับสนุนโดย Firefox และเบราว์เซอร์อื่น ๆ
+
+
+ +
+
+
กริดของไหล
+
ออกแบบเลย์เอาต์ที่ปรับขนาดได้อย่างคล่องแคล่วกับหน้าต่างเบราว์เซอร์ในขณะที่ยังคงใช้ตารางตัวพิมพ์
+
ความท้าทาย CSS 
+
ยืดหยุ่นทักษะ CSS ของคุณและดูว่าคุณต้องการฝึกฝนอะไรมาก
+
+
+
+ +

ระดับสูง

+ +
+
+
+
การใช้การแปลง CSS
+
ใช้การหมุนการเอียงการปรับขนาดและการแปลโดยใช้ CSS
+
การเปลี่ยน CSS
+
การเปลี่ยน CSS ซึ่งเป็นส่วนหนึ่งของข้อกำหนด CSS3 แบบร่างให้วิธีในการสร้างการเปลี่ยนแปลงคุณสมบัติของ CSS แทนที่จะทำให้การเปลี่ยนแปลงมีผลทันที
+
+
+ +
+
+
คู่มือฉบับย่อเพื่อปรับใช้แบบอักษรบนเว็บ (ด้วย @ font-face) 
+
คุณลักษณะ @ font-face จาก CSS3 ช่วยให้คุณใช้แบบอักษรที่กำหนดเองบนเว็บในแบบที่เข้าถึงได้จัดการได้และปรับขนาดได้
+
เริ่มเขียน CSS 
+
การแนะนำเครื่องมือและวิธีการในการเขียน CSS ที่กระชับง่ายต่อการบำรุงรักษาและปรับขนาดได้
+
+
+
+ +
+
+
แบบฝึกหัด Canvas
+
เรียนรู้วิธีการวาดกราฟิกโดยใช้สคริปต์โดยใช้องค์ประกอบภาพวาด
+
HTML5 Doctor
+
บทความเกี่ยวกับการใช้ HTML5 ในขณะนี้
+
+
+ +

จาวาสคริปต์

+ +

ระดับเบื้องต้น

+ +
+
+
+
JavaScript ขั้นตอนแรก
+
ในโมดูล JavaScript แรกของเราเราจะตอบคำถามพื้นฐานบางอย่างเช่น "JavaScript คืออะไร", "มันมีลักษณะอย่างไร" และ "ทำอะไรได้บ้าง" ก่อนที่จะนำคุณไปสู่ประสบการณ์การใช้งานจริงครั้งแรกของคุณ ของการเขียน JavaScript หลังจากนั้นเราจะพูดถึงคุณสมบัติที่สำคัญของ JavaScript ในรายละเอียดเช่นตัวแปรสตริงตัวเลขและอาร์เรย์
+
การสร้างบล็อก JavaScript
+
ในโมดูลนี้เรายังคงให้ความสำคัญกับคุณสมบัติพื้นฐานที่สำคัญทั้งหมดของ JavaScript โดยหันความสนใจไปที่ประเภทของบล็อคโค้ดที่พบทั่วไปเช่นข้อความสั่งเงื่อนไขเงื่อนไขลูปฟังก์ชันและกิจกรรม คุณเคยเห็นสิ่งนี้มาแล้วในหลักสูตร แต่เมื่อผ่านไป - ที่นี่เราจะพูดถึงมันทั้งหมดอย่างชัดเจน
+
+
+ +
+
+
เริ่มต้นกับ JavaScript
+
JavaScript คืออะไรและจะช่วยคุณได้อย่างไร
+
Codecademy 
+
Codecademy เป็นวิธีที่ง่ายในการเรียนรู้วิธีการรหัส JavaScript มันเป็นแบบโต้ตอบและคุณสามารถทำได้กับเพื่อนของคุณ
+
freeCodeCamp
+
freeCodeCamp สอนภาษาและกรอบต่าง ๆ สำหรับการพัฒนาเว็บ นอกจากนี้ยังมี  ฟอรั่มการ  สถานีวิทยุอินเทอร์เน็ตและบล็อก
+
+
+
+ +

ระดับกลาง

+ +
+
+
+
แนะนำวัตถุ JavaScript
+
ใน JavaScript สิ่งต่าง ๆ ส่วนใหญ่เป็นวัตถุตั้งแต่คุณสมบัติหลักของ JavaScript เช่นสตริงและอาร์เรย์ไปจนถึง API ของเบราว์เซอร์ที่สร้างขึ้นจาก JavaScript คุณสามารถสร้างวัตถุของคุณเองเพื่อแค็ปซูลฟังก์ชั่นและตัวแปรที่เกี่ยวข้องลงในแพ็คเกจที่มีประสิทธิภาพ ลักษณะเชิงวัตถุของ JavaScript นั้นมีความสำคัญที่จะต้องเข้าใจหากคุณต้องการเพิ่มเติมความรู้ภาษาและเขียนโค้ดที่มีประสิทธิภาพมากขึ้นดังนั้นเราจึงได้จัดเตรียมโมดูลนี้เพื่อช่วยคุณ ที่นี่เราสอนทฤษฎีของวัตถุและไวยากรณ์อย่างละเอียดดูที่วิธีสร้างวัตถุของคุณเองและอธิบายว่าข้อมูล JSON คืออะไรและทำงานอย่างไรกับมัน
+
APIs เว็บฝั่งไคลเอ็นต์
+
เมื่อเขียน JavaScript ฝั่งไคลเอ็นต์สำหรับเว็บไซต์หรือแอปพลิเคชันคุณจะไม่ไปไกลมากนักก่อนที่คุณจะเริ่มใช้ API - ส่วนต่อประสานสำหรับจัดการกับแง่มุมต่าง ๆ ของเบราว์เซอร์และระบบปฏิบัติการที่เว็บไซต์ทำงานอยู่หรือแม้แต่ข้อมูลจากเว็บไซต์หรือบริการอื่น ๆ . ในโมดูลนี้เราจะสำรวจว่า API คืออะไรและวิธีใช้ API ทั่วไปที่คุณพบเจอบ่อยครั้งในงานพัฒนาของคุณ 
+
+
+ +
+
+
บทนำสู่ JavaScript
+
บทสรุปของภาษาการเขียนโปรแกรม JavaScript มุ่งเป้าไปที่นักพัฒนาระดับกลาง
+
ฝีปากจาวาสคริปต์
+
คู่มือที่ครอบคลุมถึงวิธีการใช้งาน JavaScript ระดับกลางและระดับสูง
+
การพูดจาวาสคริปต์ 
+
สำหรับโปรแกรมเมอร์ที่ต้องการเรียนรู้ JavaScript อย่างรวดเร็วและถูกต้องและสำหรับโปรแกรมเมอร์ JavaScript ที่ต้องการเพิ่มพูนทักษะและ / หรือค้นหาหัวข้อเฉพาะ
+
รูปแบบการออกแบบ JavaScript ที่สำคัญ 
+
คำแนะนำเกี่ยวกับรูปแบบการออกแบบ JavaScript ที่สำคัญ
+
+
+
+ +

ระดับสูง

+ +
+
+
+
คู่มือการใช้งาน JavaScript
+
คู่มือที่ครอบคลุมและอัปเดตเป็นประจำเพื่อ JavaScript สำหรับการเรียนรู้ทุกระดับตั้งแต่เริ่มต้นจนถึงขั้นสูง
+
คุณไม่รู้ JS 
+
ชุดของหนังสือดำน้ำลึกเข้าไปในกลไกหลักของภาษาจาวา
+
จาวาสคริปต์การ์เด้น
+
เอกสารของส่วนที่แปลกประหลาดที่สุดของ JavaScript
+
สำรวจ ES6 
+
ข้อมูลที่เชื่อถือได้และในเชิงลึกเกี่ยวกับ ECMAScript 2015
+
+
+ +
+
+
รูปแบบ JavaScript
+
รูปแบบ JavaScript และคอลเลกชัน antipattern ที่ครอบคลุมรูปแบบการทำงานรูปแบบ jQuery รูปแบบปลั๊กอิน jQuery รูปแบบการออกแบบรูปแบบทั่วไปตัวอักษรและรูปแบบตัวสร้างรูปแบบการสร้างวัตถุรูปแบบการใช้รหัสซ้ำ DOM
+
เบราว์เซอร์ทำงานอย่างไร
+
บทความวิจัยโดยละเอียดที่อธิบายถึงเบราว์เซอร์ที่ทันสมัยเครื่องมือการแสดงผลหน้า ฯลฯ
+
วิดีโอ JavaScript 
+
คอลเลกชันวิดีโอ JavaScript เพื่อดู
+
+
+
+ +

การพัฒนาเสริม

+ +
+
+
+
WebExtensions
+
WebExtensions เป็นระบบข้ามเบราว์เซอร์สำหรับการพัฒนาโปรแกรมเสริมของเบราว์เซอร์ ในระดับใหญ่ระบบสามารถทำงานร่วมกับAPI ส่วนขยายที่รองรับโดย Google Chrome และ Opera ส่วนใหญ่ที่เขียนไว้สำหรับเบราว์เซอร์เหล่านี้ส่วนใหญ่จะทำงานใน Firefox หรือMicrosoft Edgeโดยมีการเปลี่ยนแปลงเล็กน้อย API ที่ยังเป็นอย่างเข้ากันได้กับmultiprocess Firefox
+
+
+
-- cgit v1.2.3-54-g00ecf