ยินดีต้อนรับกลับ.
มาสร้างเว็บไซต์แรกของเรากันเถอะ
ตอนนี้ฉันได้สร้างโฟลเดอร์ชื่อ Web Server แล้ว เพราะนี่จะเป็นเว็บเซิร์ฟเวอร์ของเราในตอนนี้
และภายในเว็บเซิร์ฟเวอร์นี้ เรามีไฟล์ดัชนี HTML ซึ่งจะเป็นส่วนขยายสำหรับสร้างไฟล์
HTML
เรามีสคริปต์ JS ซึ่งเป็นส่วนขยายสำหรับการเขียน JavaScript เช่นเดียวกับที่เรามี py สำหรับการเขียน
Python จากนั้นเรามี CSS สไตล์สำหรับการเขียนสไตล์ CSS
ในส่วนนี้ ฉันจะใช้ข้อความประเสริฐและเทอร์มินัลคำศัพท์ AI ของฉัน แต่คุณสามารถใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์อะไรก็ได้ที่คุณต้องการ
ฉันชอบใช้สิ่งเหล่านี้เพื่อบันทึกหน้าจอเท่านั้น
พวกเขาช่วยได้เพราะดีและสะอาด
มันไม่ได้ให้คำแนะนำมากเกินไปแก่ฉัน เพื่อที่ฉันจะได้แสดงข้อผิดพลาดและแสดงให้คุณเห็นในขณะที่ฉันทำข้อผิดพลาดในวิธีแก้ไข
แต่อีกครั้ง คุณสามารถใช้โค้ด Visual Studio อะไรก็ได้ที่คุณต้องการ
ตอนนี้คุณเห็นที่นี่ว่าไฟล์เหล่านี้ว่างเปล่า
แต่โปรดจำไว้ว่า เว็บเซิร์ฟเวอร์เพียงแค่มอบไฟล์ทั้งสามนี้ให้กับเบราว์เซอร์ เพื่อให้เบราว์เซอร์สามารถแสดงหน้าเว็บได้
มาเริ่มกันที่ HTML กันก่อน
เราจะเขียน HTML ได้อย่างไร?
อันที่จริง ข้อความ Sublime ให้ฉันทำสิ่งที่น่าสนใจที่นี่ ถ้าฉันพิมพ์ HTML แล้วกด tab
มันเติมให้ฉันโดยอัตโนมัติ
ก็ได้ ก็ได้
ฉันค่อนข้างจะนอกใจนะ แต่ เฮ้ ฉันไม่ต้องการที่จะทำให้คุณเบื่อจนตาย
นี่เป็นไฟล์ HTML มาตรฐานเพราะฉันมีนามสกุล .html
ถ้าฉันมีไวยากรณ์ประเภทนี้ ฉันสามารถเขียน HTML ได้และก็ไม่ยาก
เรามีแท็กเปิดและปิดแท็กด้วยแบ็กสแลชที่นี่
ดังนั้นเราจึงมีหัวของเว็บไซต์ที่มีชื่อ
นี่คือสิ่งที่ปรากฏบนแท็บ
สมมติว่าของฉัน
เว็บไซต์.
สร้างสรรค์มาก
นั่นคือหัวแล้วร่างกาย
นี่คือสิ่งที่แสดงบนเว็บไซต์
ดังนั้นในที่นี้ ฉันสามารถพูดได้ว่าฉันเป็นผู้ดูแลเว็บ
เป็นแบบนั้น.
และเราได้สร้างไฟล์ HTML ของเราแล้ว
ตอนนี้ตรวจสอบออก
ถ้าตอนนี้ฉันเปิดดัชนี html หากฉันคลิกขวาที่นี่ และสมมุติว่าเปิดในหน้าต่างของคุณ หรือคุณสามารถไปและดับเบิลคลิกที่ไฟล์นี้ก็ได้
ถ้าผมดับเบิลคลิกนี่ ดูนั่นสิ
ฉันเป็นเว็บมาสเตอร์
แค่ข้อความธรรมดา
ไม่มีอะไรบ้าเกินไป
แต่ฉันเพิ่งสร้างเว็บไซต์แรกของฉัน
มาต่อกันที่ CSIS
CSS มีไวยากรณ์ที่แตกต่างจาก html css syntax
ไปแบบนี้บ้าง
เราสามารถให้องค์ประกอบ html ที่เราต้องการเพิ่มสไตล์ได้
ในกรณีของเรา สมมติว่าร่างกาย
และบอกได้เลยว่าร่างกาย
จากนั้นวงเล็บปีกกา
และในนี้ฉันต้องการพื้นหลัง สมมติว่าสี แล้วเราจะไปด้วย
อืม.
ไปกับกรีนกันเถอะ
ถ้าฉันบันทึกสิ่งนี้
และฉันรีเฟรชหน้า
อืม.
ไม่มีอะไรเกิดขึ้น.
และนี่คือรายละเอียดเล็กๆ น้อยๆ ที่นี่ไม่ใช่หลักสูตรการพัฒนาเว็บ ดังนั้นเราจึงไม่ต้องกังวลมากเกินไป
แต่โดยพื้นฐานแล้ว สิ่งแรกที่เกิดขึ้นก็คือ ไฟล์ HTML ถูกส่งไป และไฟล์ HTML จริงๆ แล้วเป็นสิ่งเดียวที่ทำให้เบราว์เซอร์อ่านได้
ดังนั้นภายในไฟล์ HTML ผมต้องพูดว่า เฮ้ HTML
อย่างไรก็ตาม เรามีไฟล์ CSS ด้วย
คุณสามารถใช้สิ่งนั้นในเว็บไซต์ได้หรือไม่?
เราสามารถทำได้ในแท็ก head?
โดยใช้สิ่งที่เรียกว่าแท็กลิงก์
ดังนั้นแท็กลิงค์
เราสามารถลบบางส่วนออกได้จริง
เราแค่ต้องบอกว่า เฮ้ มันเป็น CSS ข้อความประเภทหนึ่ง และมันมีสิ่งที่เรียกว่า H ref.
ผู้อ้างอิง H พูดง่ายๆ ว่า เฮ้ ไฟล์นี้อยู่ที่ไหน
ในกรณีของเรา เนื่องจากมันอยู่ในโฟลเดอร์เดียวกับ HTML ที่จัดทำดัชนี เราสามารถพูดง่ายๆ ว่ามันคือ style dot
CSS เพราะงั้น แค่มองหา Solidot CSS และนั่นคือที่มาของไฟล์สไตล์
และตอนนี้ ถ้าคุณจำได้ เราก็มีสไตล์ชีตความสัมพันธ์ที่เราต้องรวมไว้ด้วย
ฉันเพิ่งลบมันออกเพื่อให้เราเห็นว่าเรากำลังเขียนอะไรตรงนี้
ดังนั้นถ้าเราทำสไตล์ชีตและนี่เป็นเพียงบางอย่าง ไวยากรณ์ที่คุณต้องคุ้นเคยหากต้องการรวมไฟล์
CSS
ถ้าฉันบันทึกสิ่งนี้และย้อนกลับและรีเฟรช
เฮ้ ดูนั่นสิ
เว็บไซต์ที่น่าเกลียดของฉัน
มาทำให้มันใหญ่ขึ้นหน่อย
เว็บไซต์ที่น่าเกลียดของฉันที่มีสีพื้นหลังสีเขียวตอนนี้มีสไตล์บางอย่าง
ถ้าฉันเปิดเครื่องมือสำหรับนักพัฒนาอีกครั้ง
และฉันก็กดรีเฟรช
ดูนั่นสิ
ฉันได้รับไฟล์ HTML และไฟล์ CSS
สุดยอด.
ดังนั้นฉันจึงสร้างเว็บเซิร์ฟเวอร์ของตัวเอง
ถูกต้อง.
เราสามารถเขียน JavaScript ได้ที่นี่
แต่อีกครั้ง นี่ไม่ใช่หลักสูตร JavaScript เราจึงไม่จำเป็นต้องกังวลเกี่ยวกับเรื่องนี้ในกรณีนี้
เอาล่ะ.
ฉันเพิ่งเขียน JavaScript ซึ่งเหมือนกับการเขียนงานพิมพ์ใน Python
ถ้าฉันรีเฟรชหน้าอีกครั้ง
อีกครั้ง ไฟล์ JavaScript ไม่แสดงเพราะเราต้องบอกดัชนี HTML อีกครั้งว่าเราต้องการไฟล์
JavaScript และโดยปกติแล้วไฟล์ JavaScript จะอยู่ในแท็กสคริปต์ ซึ่งมักจะอยู่ด้านล่างของเนื้อหา
เลยปิดมันซะ
แล้วในนี้ แทนที่จะใช้ตัวอ้างอิง เราแค่ต้องบอกว่า CRC เป็นแหล่งที่มา
แล้วอีกครั้ง ไฟล์ JavaScript อยู่ที่ไหน
มันอยู่ที่สคริปต์ JS ดังนั้นถ้าฉันบันทึกสิ่งนี้และรีเฟรชหน้า
ดูนั่นสิ
ตอนนี้เรากำลังโหลดสคริปต์ ไฟล์ของ JJ และทั้งหมดที่ทำคือถ้าเราคลิกที่แท็บคอนโซล คุณจะพิมพ์อะไรบางอย่างในคอนโซล
และคอนโซลคือสิ่งที่ JavaScript ใช้
แต่สิ่งที่เราสนใจคือเราสามารถให้บริการไฟล์ทั้งสามนี้ได้
สิ่งที่เราได้ทำคือการสร้างเซิร์ฟเวอร์แรกของเรา
แต่คุณอาจสังเกตเห็นบางอย่าง
เมื่อคุณขึ้นไปที่นี่
ดูเส้นทาง URL ที่เรามี
นั่นไม่ใช่สิ่งที่คุณมักจะพิมพ์ลงในเว็บไซต์ใช่ไหม
ฉันหมายความว่าเราเห็นว่าเว็บไซต์ตรงนี้ xkcd dot com มี dot com ใช้ http
นั่นคือ URL จริงใช่ไหม
ฉันขอโทษที่ต้องบอกคุณว่าเราไม่ได้สร้างเว็บเซิร์ฟเวอร์จริง ๆ เพราะสิ่งที่เราทำคือเราได้ให้บริการไฟล์บางไฟล์ในเบราว์เซอร์จากคอมพิวเตอร์ของเราอย่างที่คุณเห็น
ทั้งหมดที่ทำคือเบราว์เซอร์บอกว่า เฮ้ ฉันจะแสดงไฟล์เหล่านี้ ซึ่งอยู่ที่นี่บนคอมพิวเตอร์ของคุณ
โดยพื้นฐานแล้วเรามีเว็บเซิร์ฟเวอร์ที่ใช้งานเบราว์เซอร์ด้วย แต่นั่นไม่ใช่วิธีการทำงานในชีวิตจริง
ทำไมถึงเป็นเช่นนั้น?
ลองนึกภาพถ้าคุณมีเว็บไซต์ของคุณเอง
คุณต้องการให้ผู้คนจากทั่วโลกเข้าถึงเว็บไซต์ของคุณโดยตรงผ่านคอมพิวเตอร์ โดยดึงไฟล์จากคอมพิวเตอร์ของคุณหรือไม่?
ฉันหมายความว่าไม่
ถูกต้อง.
มีปัญหาด้านความปลอดภัยมากมาย
มีปัญหามากมายเกี่ยวกับประสิทธิภาพ
คุณต้องเก็บแล็ปท็อปไว้ตลอดเวลาเพื่อให้ผู้คนสามารถเข้าถึงเว็บไซต์ของคุณได้
แต่เราต้องการเว็บเซิร์ฟเวอร์ที่ทำหน้าที่ไฟล์และเชี่ยวชาญในการให้บริการไฟล์ในเบราว์เซอร์
ตามที่ชื่อแนะนำ
ที่ไหนสักแห่งในโลกที่ฉันไม่ต้องกังวล
มันไม่ได้อยู่ในคอมพิวเตอร์ของฉัน
ใครบางคนเป็นเจ้าของเครื่องนั้น ใครบางคนเป็นเจ้าของคอมพิวเตอร์เครื่องนั้น และเปิดอยู่ตลอดเวลา ดังนั้นเมื่อใดก็ตามที่เราไปที่เว็บไซต์หรือลิงก์
เครื่องจะทำงานและส่งไฟล์เหล่านั้นออกไปเสมอ
ในที่สุดเราจะกลับไปที่ Python ที่นี่ เพราะสิ่งที่เราต้องการทำคือทำสิ่งที่ซับซ้อนกว่าแค่มีไฟล์เหล่านี้ในเครื่องของเรา
เราต้องการสร้างเซิร์ฟเวอร์จริงโดยใช้ Python ที่เราสามารถปรับใช้เพื่อให้ผู้คนสามารถเข้าถึงเว็บไซต์ของเราได้ทุกที่ในโลก
ตอนนี้คุณอาจจะยังสับสนอยู่
กระบวนการทั้งหมดนี้อาจไม่สมเหตุสมผลสำหรับคุณ เนื่องจากเราเพิ่งเริ่มต้น
แต่อย่ากังวล ท้ายที่สุดแล้ว ทุกอย่างจะสมเหตุสมผล
ตอนนี้ ลืมเบราว์เซอร์ไปเสียก่อน แล้วเริ่มสร้างเซิร์ฟเวอร์จริง บางอย่างที่ซับซ้อนกว่าที่เราเคยทำมาจนถึงตอนนี้ ซึ่งเป็นแค่โฟลเดอร์ที่มีไฟล์สามไฟล์นี้
และเราก็แค่ดับเบิลคลิกที่ดัชนี
.html
แล้วพบกันใหม่ในวิดีโอหน้าครับ
ลาก่อน.