เดวิดเจลัน: สิทธิทั้งหมด พวกเรากลับมาแล้ว. ดังนั้นเป้าหมายของเซสชั่นสุดท้ายนี้ คือการแนะนำแนวคิดอีกไม่กี่ แต่ยังให้โอกาสทุกคน ชนิดของการยืดนิ้วมือข​​องคุณ และที่จริงทำอะไรบางอย่าง บนมือเล็ก ๆ น้อย ๆ เป้าหมายไม่ได้ที่จะเปิด พวกเราทุกคนเข้าไปในนักพัฒนาเว็บ โดยวิธีใด ๆ แต่จริงๆเพียงแค่ เพื่อให้คุณได้ลิ้มรสความบาง ของโครงสร้างพื้นฐานของสิ่งที่ จะเข้าสู่การเขียนโปรแกรมเว็บและเว็บนี้ การพัฒนาเพื่อให้ ด้านคงที่ของ things-- ไม่มีตรรกะการเขียนโปรแกรมไม่ ภาษาเนื้อหาเพียงแบบคงที่ และมันจะทำให้เรามีโอกาส จริงเห็นสิ่งที่เว็บเซิร์ฟเวอร์คือ เห็นสิ่งที่เป็นไฟล์ HTML คือเห็นสิ่งที่ มันเป็น HTTP ที่เป็นจริงให้บริการขึ้น แต่ก่อนที่เราดำน้ำในย้อนหลังใด ๆ คำถามเกี่ยวกับคอมพิวเตอร์เมฆ หรือการรักษาความปลอดภัยหรืออะไรก็ตามในระหว่าง? ไม่ได้หรือไม่ สิทธิทั้งหมดดีขอ ทำเช่นนี้เพียงในกรณีที่ ขั้นตอนการลงทะเบียนสำหรับ บางสิ่งบางอย่างต้องใช้เวลาไม่กี่นาที เราจะปล่อยให้มันทำมันในพื้นหลัง ไปข้างหน้าถ้าคุณทำได้ เพื่อ c9.io. URL นี้ here-- นี่คือบุคคลที่สาม service-- แพลตฟอร์มเป็นบริการถ้าคุณ will-- ที่จะเชิญชวนให้คุณ การลงทะเบียนสำหรับบัญชี และก็จะให้แต่ละท่าน บัญชีในระบบคลาวด์ที่เรียกว่า ในโครงสร้างพื้นฐานของคนอื่น บริษัท ที่เรียกว่า Cloud9 แต่สิ่งที่ดีเกี่ยวกับ นี้คือการที่พวกเขาให้คุณ ประมาณของ การพัฒนาโลกแห่งความจริงที่เกิดขึ้นจริง สภาพแวดล้อมแม้ว่าใน เมฆและในเว็บเบราเซอร์ และเราจะใช้วิธีนี้จริง ทดสอบบิตในวันนี้ แล้วไปข้างหน้าและเพียงแค่นำทาง วิธีการของคุณขั้นตอนการสมัครใช้งาน ถ้าคุณสามารถ. ดังนั้นเราจึงเกิดขึ้นที่จะใช้ในชั้นเรียน ผมสอนสำหรับนักเรียนทุกคนของเรา ทั้งในมหาวิทยาลัยและออกในขณะนี้และ มันแทนที่สิ่งในอดีต เป็นซอฟแวร์ที่สามารถดาวน์โหลดได้อย่างอื่น ดังนั้นสิ่งที่คุณได้รับการเข้าถึง เป็นหนึ่งในเครื่องเสมือนเหล่านี้ เป็นหลักที่ผมอธิบายไว้ก่อนหน้า ดังนั้น บริษัท นี้อาจ Cloud9 ค่าเช่าจาก party-- สามแน่นอน ในกรณีนี้ Google-- ทั้งหมด พวงของเครื่องเสมือน ว่าพวกเขาอย่างใดสับขึ้นไป ภาพลวงตาของเซิร์ฟเวอร์ของแต่ละบุคคล ว่าเราแต่ละคนมีการควบคุมเต็มรูปแบบผ่าน มันไม่ถูกต้องค่อนข้างที่จะพูด ว่าพวกเขากำลังเครื่องเสมือน แต่เพราะสิ่งที่ Cloud9 ใช้จริง เป็นเทคโนโลยีที่ค่อนข้างใหม่กว่า เรียกว่าตู้สินค้า และแจ้งให้เราคว้าภาพนี้ ที่นี่ในการวาดภาพนี้ 

ภาชนะคือถ้า คุณจำภาพ จากก่อนหน้านี้เล็กน้อยเบา น้ำหนักกว่าเครื่องเสมือน ในความเป็นจริงในขณะที่ที่ผ่านมา เวลาที่เราได้พูดคุยเกี่ยวกับการมี เป็นปฏิบัติการ และระบบไฮเปอร์ไวเซอร์ และจากนั้นระบบปฏิบัติการของแขกผู้เข้าพัก ระบบปฏิบัติการปฏิบัติการของแขก ระบบอยู่ด้านบนของคุณ ฮาร์ดแวร์ทางกายภาพ ความแตกต่างกับที่ใหม่กว่านี้ เทคโนโลยี containerization, คือว่าพวกเขาทุกอย่างใดแบ่งปัน ระบบปฏิบัติการเดียวกัน แต่พวกเขายังคงสร้าง ภาพลวงตาของทุกคน มี แต่เพียงผู้เดียวของเขาหรือเธอเอง สิทธิ์ในการดูแลและไฟล์ บนเซิร์ฟเวอร์ แต่มีน้อยกว่าในซอฟแวร์ ระหว่างคุณและฮาร์ดแวร์ ผลมาจากการที่มี ทฤษฎีผลการดำเนินงานที่สูงขึ้น เพราะคุณกำลังใช้หรือ การสูญเสียทรัพยากรน้อยลง ในที่ที่เรียกว่าชั้น virtualization ดังนั้นนี้จะเรียกว่า containerization โดยธรรมชาติ โดยวิธีการของเทคโนโลยีที่เรียกว่าหาง ซึ่งเป็นอย่างมากที่เข้ามาในตัวของมันเอง และนี่คือสิ่งที่ วิศวกรที่ บริษัท ของคุณ ชนิดของการจัดเรียงของอาจจะเริ่มต้นพูดคุย เกี่ยวกับเร็ว ๆ นี้ถ้าพวกเขาไม่ได้อยู่แล้ว แม้ว่าจะมีแน่นอนไม่มี เหตุผลที่จะกระโดดขึ้นไปบน bandwagons ใด ๆ 

ดังนั้นด้วยที่กล่าวว่าสิ่งที่ คุณอาจเห็นในขณะนี้ คือหน้าจอที่มีลักษณะบิตเช่นนี้ ตกลง. และเพียงแค่โทรหาฉันมากกว่าถ้าไม่ได้ และถ้า so-- ฉันจะมาถ้าไม่ได้ ไปข้างหน้าและคลิกที่ใหญ่ บวกกับการสร้างพื้นที่ทำงาน และคุณจะเห็นหน้าจอเช่นนี้ คุณสามารถโทรหาพื้นที่ทำงาน ชื่อสิ่งที่คุณต้องการสำหรับตอนนี้ และเพียงแค่จริงสำหรับความเรียบง่าย ไป and-- ดีบางส่วนของคุณ มีพื้นที่ทำงาน เรียกมันว่าสิ่งที่คุณ want-- ธุรกิจ ฮาร์วาร์วันพฤหัสบดีที่สิ่งที่คุณต้องการ คุณไม่จำเป็นต้องคำอธิบาย คุณสามารถปล่อยให้มันเป็นส่วนตัวเว้นแต่คุณ มีพวงของพื้นที่ทำงาน หากคุณกำลังบังคับให้มันสาธารณะ ที่ดีสำหรับวัตถุประสงค์ของว​​ันนี้ นี่ก็เป็นหนึ่งใน upsells คุณจะได้รับหนึ่งในพื้นที่ทำงานส่วนตัวโดย ค่าเริ่มต้น. แต่ถ้าคุณต้องการมากขึ้น คุณจะต้องจ่ายมากขึ้น มิฉะนั้นพวกเขาบังคับให้คุณ จะทำให้ประชาชนที่ทำงานของคุณ แต่ที่ดีเพราะพวกเขายัง เป้าหมายที่ชุมชนโอเพนซอร์ส เพื่อส่งเสริมให้ประชาชน ทำงานร่วมกันจริง 

และสิ่งสุดท้ายที่สำคัญ แต่เป็นหลังจากที่คุณเลือกชื่อ และหลังจากที่คุณเลือกส่วนตัวหรือสาธารณะ คลิก HTML5 ไอคอนสีส้มขนาดใหญ่ ที่สองจากซ้ายและ จากนั้นคลิกสร้างพื้นที่ทำงาน และมันอาจจะ ใช้เวลาเป็นนาทีหรือมากกว่านั้น แต่แล้วคุณจะมี สภาพแวดล้อมเมื่อคุณ ทำอย่างนั้นที่มีลักษณะที่ชวนให้นึกถึง สิ่งที่ฉันได้บนหน้าจอที่นี่ตอนนี้ แต่อีกครั้งมันอาจจะใช้เวลาสักครู่ หรือมากกว่าที่จะได้รับไปยังหน้าจอนี้ เมื่อคุณคลิกสร้างพื้นที่ทำงาน แต่เพียงธงฉันมากกว่าหากคุณต้องการฉัน ที่จะดูที่อะไรหรือให้คำแนะนำ ก็ดี ดังนั้นฉันจะพื้นหลังนี้สำหรับตอนนี้ โทรหาฉันมากกว่าถ้าคุณดูเหมือนจะ มีปัญหาทางเทคนิคใด ๆ แต่อีกครั้งมันอาจจะใช้เวลา นิด ๆ หน่อย ๆ เพื่อที่จะเปิด และให้ไปข้างหน้าและพูดคุยเกี่ยวกับสิ่งที่ จริง ๆ แล้วมันหมายถึงการทำหน้าเว็บ สิ่งที่ HTML และวิธีการทั้งหมดนี้ ตอนนี้ interconnects ในขณะที่เรากำลังเริ่มต้น ที่จริงการใช้บางส่วนของเทคโนโลยี ดังนั้นมันกลับกลายเป็นว่าฉันสามารถ ไปบน Mac เล็ก ๆ น้อย ๆ ของฉันที่นี่ เปิดโปรแกรมง่ายๆที่เรียกว่า TextEdit หรือบน Windows ที่จะทำได้ เปิดสิ่งที่เรียกว่า Notepad.exe และฉันจะเพียงแค่ทำอะไรบางอย่าง เช่น this-- "Hello, world." แล้วฉันจะบันทึกเป็น hello.txt จึงไม่มีเวทมนตร์มี นี้มีอะไรจะทำอย่างไรกับเว็บ การเขียนโปรแกรมอะไรจะทำอย่างไรกับ HTML เพียงแค่การสร้างไฟล์ข้อความที่เรียบง่าย แต่ปรากฎว่าเว็บ หน้าเป็นอักษรเพียงแค่ว่า มันเป็นไฟล์ข้อความข้อความที่มีง่าย ที่คุณอาจพิมพ์ที่แป้นพิมพ์ของคุณ แต่ก็มักจะ แต่ไม่เสมอไป จะสิ้นสุดลงในไม่ .txt แต่ .html หรือ .htm และคุณไม่เพียง ประเภทคำในไฟล์ จริงๆคุณต้องใช้สิ่งที่เรียกว่า แท็กหรือมากกว่าปกติบางสิ่งบางอย่าง เรียกว่าภาษามาร์กอัป 

ดังนั้นฉันจะพิมพ์ได้อย่างรวดเร็ว แล้วอธิบายต่อไปนี้ ฉันจะเป็นครั้งแรก ประเภทนี้ซึ่งกล่าวว่า Hey, เบราว์เซอร์มาที่นี่ หน้าเว็บที่เขียนในรูปแบบ HTML และทั้งสองสิ่งเข้าด้วยกันบอกว่าเดี๋ยวก่อน เบราว์เซอร์ต่อไปนี้เป็นจริง HTM​​L Hey, เบราว์เซอร์ที่นี่มา หัวหรือด้านบนของหน้าเว็บ Hey, เบราว์เซอร์ด้านในของด้านบนของ หน้าของฉันใส่ชื่อคือว่า "สวัสดี, โลก." Hey, เบราว์เซอร์หลังจากที่หัวของฉัน หน้านี่มาร่างกายของหน้าเว็บ และ Hey, เบราว์เซอร์, ร่างกายของฉัน หน้าก็ควรพูดว่า "Hello World." ดังนั้นสิ่งที่เป็นรายละเอียดที่สำคัญที่นี่? นี่คือสิ่งที่โดยทั่วไป เรียกว่าการประกาศ doc ชนิด และตรงไปตรงมาก็เพียงเล็กน้อย ยากที่จะจดจำนี้ในตอนแรก เพียงแค่ชนิดของคุณคัดลอกวางมัน วิธีนี้เป็นวิธีที่เป็นทางการ พูดว่า Hey, เบราว์เซอร์ ฉันกำลังใช้เวอร์ชัน HTML 5 ซึ่ง ออกมาค่อนข้างเร็ว ๆ นี้ มันเป็นคาถาวิเศษที่บาง มนุษย์มีความรู้สึกที่ไม่ดีของการออกแบบ ตัดสินใจที่จะใส่ใน ด้านบนสุดของไฟล์ แม้ว่ามันจะเป็น ความลับเล็ก ๆ น้อย ๆ ที่ทั้งหมด มัน means-- Hey, เบราว์เซอร์ที่นี่ มาพร้อมกับรุ่นที่ 5 ของ HTM​​L 

ส่วนที่เหลือนี้ได้รับกับเรา ตอนนี้บางเวลาประวัติศาสตร์ แต่จะได้รับการพัฒนาและเป็น อาจจะรับได้รับเพียงเล็กน้อยง่าย ขอให้สังเกตลักษณะไม่กี่ สิ่งที่ผมได้เน้น มีสิ่งเหล่านี้ด้วยมุมเป็น brackets-- วงเล็บซ้าย และวงเล็บขวา และแจ้งให้ทราบสมมาตรที่นี่ และโดยสมมาตรผมหมายถึงเช่นเดียวกับผม มีแท็กเริ่มต้นที่นี่หรือเปิดแท็ก ถ้าคุณจะลงที่นี่ฉันมี ใกล้แท็กหรือแท็กสิ้นสุดที่ แตกต่างกันเพียงตราบเท่าที่มันมีนี้ เฉือนที่จุดเริ่มต้นของคำว่า HTML และคุณอาจจะคิดว่า นี้ขณะที่ผมกำลังตั้งใจ เสนอก่อนเดี๋ยวก่อน เบราว์เซอร์ที่นี่มาบาง HTM​​L และตรงกันข้าม, Hey, เบราว์เซอร์ที่ มันเป็นจุดเริ่มต้นและจุดสิ้นสุด HTML-- 

ในขณะเดียวกัน Hey, เบราว์เซอร์ที่นี่ มาพร้อมหัวของหน้าเว็บ Hey, เบราว์เซอร์ที่มันสำหรับหัว Hey, เบราว์เซอร์ที่นี่เป็น ร่างกายของหน้าเว็บ Hey, เบราว์เซอร์ที่มันสำหรับร่างกาย และภายในที่เป็นบางส่วน ข้อความพลสำหรับตอนนี้ และภายในของหัวในขณะเดียวกัน เป็นบางส่วนโดยพลการ แต่ติดแท็ก เพื่อที่จะพูดข้อความที่บอกว่าชื่อ ในหน้าของฉันจะเป็น "Hello, world." ตอนนี้สำหรับตอนนี้คุณสามารถ สมมติว่าเบราว์เซอร์ มีเท่านั้นหากต้องการดูหรือค่อนข้างหน้าเว็บได้ เพียงสอง parts-- ศีรษะและร่างกาย และศีรษะโดยทั่วไปเพียง เช่นแถบเมนูสิ่งที่ จริงๆเพียงแค่ที่ด้านบนสุด และร่างกายเป็น guts ของหน้า ทุกอย่างในการที่สี่เหลี่ยมผืนผ้าขนาดใหญ่ ที่เติมหน้าจอ ดังนั้นฉันจะไปข้างหน้าและทำเช่นนี้ ฉันจะไปข้างหน้าและ คลิกบันทึกไฟล์บันทึก และฉันจะประหยัด นี้เป็น hello.html, และฉันแค่ไป วางไว้บนเดสก์ทอปของฉัน และฉันจะไป ข้างหน้าและคลิกบันทึก และ notice-- Mac ของฉันที่ อย่างน้อยจะตะโกนมาที่ผม คุณคุณแน่ใจว่าต้องการที่จะทำเช่นนี้? และฉันจะบอกว่าใช่ใช้ภาษา HTML ฉันรู้ดีในกรณีนี้ และตอนนี้ฉันจะไปที่เดสก์ทอปของฉัน ที่ฉันมีไฟล์นี้อย่างกระทันหัน และฉันจะดับเบิลคลิก และคุณจะสังเกตเห็นว่าโดย ค่าเริ่มต้น Chrome เปิดขึ้น นั่นเป็นเพราะนั่นคือ เบราว์เซอร์เริ่มต้นของฉัน และมันก็บอกว่า "Hello, world." แต่ก็กล่าวว่า "สวัสดี โลก "ในสองสถานที่ ขอให้สังเกตด้านบนซ้าย พริตตี้ยากที่จะพลาดว่า มันเป็นเรื่องใหญ่และหนา และที่อื่น ๆ ที่มันจะเป็น จะพูดว่า "สวัสดีโลก"? 

ผู้ชม: แท็บ 

เดวิดเจลัน: ใช่แท็บของตัวเอง ดังนั้นเมื่อผมกล่าวว่าหัวของ หน้าทุกอย่างขึ้น top-- และแน่นอนนี่คือชื่อเรื่อง มันเป็นเพียงแค่ในแท็บที่นี่ และผมสามารถดึงแท็บนี้ ออกมาเพื่อที่จะไม่ให้เกิดความสับสน นี่เป็นเพียงแท็บเดียวตอนนี้ และแน่นอนเราจะเห็น "Hello, world" ขึ้นที่นี่และ "Hello, world" ลงที่นี่ ดังนั้นตรงไปตรงสวย แต่มันก็ยังค่อนข้างง่าย และอันที่จริงผมซูม ฉันสามารถเปลี่ยนขนาดตัวอักษรเพียง เพื่อขยายสำหรับการเข้าถึง แต่ตอนนี้ขอทำอะไรบางอย่าง เล็ก ๆ น้อย ๆ ที่น่าสนใจมากขึ้น 

ฉันจะ go-- ขออภัยให้ ผมได้รับกลับไปยังแฟ้มข้อความของฉัน ฉันจะกลับไปของฉัน แฟ้มข้อความและฉันจะ การเปลี่ยนแปลงนี้และกล่าวว่า "สวัสดี Disney World." ประหยัด. และกลับไปของฉัน เบราว์เซอร์และคลิกโหลด และตอนนี้แน่นอนมัน บอกว่า "ดิสนีย์เวิลด์". และฉันจะเทียมซูม ในเวลาเพียงดังนั้นจึงเป็นเรื่องง่ายที่จะเห็น ดังนั้นตอนนี้โชคไม่ดีที่ชนิดของฉันต้องการ to-- จริงที่เป็นคุณลักษณะ Mac ฉันต้องการที่จะคลิกที่ดิสนีย์เวิลด์ และไปที่อื่นเช่น disney.com, แต่ที่ไม่ได้ทำงาน ดังนั้นทฤษฎีพื้นฐานของเว็บ เชื่อมโยงหลายมิติที่เชื่อมโยงไปที่อื่น ดังนั้นฉันจะทำเช่นนั้น? ดีฉันก็อาจจะพูดว่า "สวัสดี http://www.disney.com." บันทึกนี้ โหลด แต่นี้เกินไปไม่สามารถคลิกได้ และสิ่งที่เป็นเรื่องดีที่นี่แม้ว่า นี้ไม่ได้ทำงานเลย คือว่ามันดูเหมือนว่า เบราว์เซอร์ตัวอักษรเพียง แต่ สิ่งที่ผมบอกว่าจะทำอย่างไร ดังนั้นถ้าฉันเพียงแค่พิมพ์ URL เช่นนี้ มันเป็นเพียงแค่จะให้ผมดูที่ URL ฉันต้องใช้แท็กหรือมาร์กอัป ภาษาที่จะบอกจริง เบราว์เซอร์ที่จะทำมากยิ่งขึ้น ดังนั้นฉันจะไปข้างหน้าและ ลบเรื่องนี้สักครู่ และฉันจะบอกว่าเดี๋ยวก่อน เบราว์เซอร์เริ่มต้นสมอที่นี่ การเชื่อมโยงเพื่อที่จะพูด และ Hyper-อ้างอิงปลายทาง สมอที่ควรจะเป็น URL นี้ และแจ้งให้ทราบคำพูดของฉัน ฉันสามารถใช้ราคาเดียวมากเกินไป แต่คุณจะต้องมีความสอดคล้องกัน และฉันอยากจะเพียงแค่ใช้ทั่วไป ราคาคู่เพื่อให้มันง่าย ขอให้สังเกตฉันจะปิดแท็ก แล้วนี่ฉันจะ จะพูดว่า "ดิสนีย์เวิลด์". และตอนนี้ฉันต้อง symmetry-- บาง เปิดวงเล็บ / A, วงเล็บปิด 

ดังนั้นสิ่งที่เราได้แนะนำให้รู้จัก? เราได้มีไม่กี่แท็กเรียบร้อยแล้ว HTML, Head, ชื่อ, ร่างกาย, แท็กทั้งหมดเพื่อที่จะพูด กับคู่เปิดและปิด แต่สังเกตเห็นนี้คือการจัดเรียง ที่แตกต่างกันโดยพื้นฐาน นี่คือสิ่งที่เราจะเรียก ใน HTML แอตทริบิวต์ และแอตทริบิวต์ เพียงคู่ค่าคีย์ นี้เป็นสิ่งที่พบได้บ่อยใน คอมพิวเตอร์ science-- คู่ค่าคีย์ มันเรียงลำดับของเครื่องมือของการค้า สำคัญและมีค่า คำแล้วบางส่วน คำอื่น ๆ หรือคำพูด และในกรณีนี้ที่สำคัญคือ href, และความคุ้มค่าคือว่า URL แบบเต็ม และสิ่งที่แอตทริบิวต์ไม่สามารถจะ ที่มีอิทธิพลต่อพฤติกรรมของแท็กที่ และในกรณีนี้เราต้องมีอิทธิพลต่อ ลักษณะการทำงานของแท็กสมอที่ เพราะเราต้องยึด ที่ลิงค์นี้เพื่อที่ไหนสักแห่ง และวิธีที่คุณจะทำคือ โดยวิธีการของแอตทริบิวต์ 

ดังนั้นฉันจะไปข้างหน้า และบันทึกไฟล์ในขณะนี้ กลับไปที่เบราว์เซอร์และโหลด และ voila ตอนนี้เรามี จุดเริ่มต้นของหน้าเว็บที่ถูกต้องตามกฎหมาย Super-ง่าย แต่ถ้าผมเลื่อนเมาส์ไป แจ้งให้ทราบล่วงหน้า this-- ในมุมล่างซ้าย ก็สุดขนาดเล็ก แต่คุณจะเห็น www.disney.com และถ้าผมคลิกมันแน่นอนนี้ อุ้มฉันไป disney.com ตอนนี้สิ่งที่อยากรู้อยากเห็น ที่นี่ก็คือว่ามันไม่ได้เป็น best-- URL ที่ต้องการของตลาดมากที่สุด แต่ ที่ดีเพราะไฟล์นี้ไม่ได้ ที่มีอยู่บนเวิลด์ไวด์เว็บ มันมีอยู่เป็นไฟล์ในท้องถิ่นเห็นได้ชัด ผู้ใช้ของฉัน directory-- / jharvard-- สำหรับจอห์น Harvard-- / สก์ท็อป แต่มันก็มี URL ที่ มันก็จะเกิดขึ้นในท้องถิ่น แต่น่าเสียดายที่ไม่มีคุณสามารถเยี่ยมชม นี้เพราะถ้าคุณพิมพ์ URL นี้ คุณต้องการจะบอกเบราว์เซอร์ของคุณ มองหาไฟล์ที่เรียกว่า hello.html ในฮาร์ดดิสก์ของคุณ และแน่นอนเว้นแต่คุณได้ รับดังต่อไปพร้อมด้วยตนเอง มันไม่ได้ไปอยู่ที่นั่น 

ดังนั้นที่ดี เรายังคงต้องมีวิธีในที่สุด ที่จะได้รับไฟล์นี้ลงในเว็บ แต่ขอแซวออกจากกันของทั้งคู่ ผลกระทบการรักษาความปลอดภัยของสิ่งที่เราเป็นเพียงแค่ เห็นและผูกมันกลับไปก่อนหน้านี้ การอภิปรายจากเช้าวันนี้ แต่กลับกลายเป็นว่าถ้า เบราว์เซอร์ตัวอักษรก็ไม่ สิ่งที่ผมบอกว่าจะทำอย่างไรและดูเหมือนว่า จะเป็นกรณีที่แท็กสมอคือ ได้รับอิทธิพลจากค่าของ แอตทริบิวต์นี้เรียกว่า href แต่มันแสดงนี้ ข้อความนี้จะดูเหมือน จะบ่งบอกว่าฉันสามารถใส่ URL ไป ในสถานที่ทั้งสองแล้วโหลด และตอนนี้เห็น URL และไปยัง URL แจ้งให้ทราบล่วงหน้าถ้าผมเลื่อนเมาส์ไปที่ด้านล่างซ้าย แน่นอนฉันจะยังคง disney.com 

ดังนั้นถ้าคุณเคยได้ phished-- P-H-I-S-H-E-D-- กับหนึ่งในอีเมลปลอมเหล่านั้น จากเช่น PayPal ธนาคารของคุณ คุณได้รับอาจจะเชื่อมโยงภายใน ของอีเมลที่คุณกำลังอ่านว่า บอกให้คุณคลิกที่นี่เพื่อไปยืนยัน รหัสผ่านหรือยืนยันวันเกิดของคุณ หรือสังคมหรือสิ่งที่สังคม วิศวกรรมคุณที่จะเปิดเผย ข้อมูล. ดีชนิดของฉันอาจจะใช้เวลา ประโยชน์จากนี้ฉันไม่สามารถ? ฉันจะพูดอะไรบางอย่าง เหมือน www.paypal.com และแทนที่จะ disney.com ผม สามารถไปเช่น badguy.com โหลด และวิธีการที่ง่ายที่จะไปล่อ, โดยเฉพาะอย่างยิ่งผู้อ่านที่ไม่ใช่ด้านเทคนิค หรือลวกอ่าน ผู้อ่านมากกว่าที่จะคลิก การเชื่อมโยงเช่นนี้ซึ่งถ้าผมคลิก it-- ที่จริงผมไม่ต้องการที่จะไป badguy.com ผมไม่ทราบว่าสิ่งที่มีจริง ดังนั้น paypal.com แจ้งให้ทราบเป็น สิ่งที่มันบอกว่ามันเป็นไปได้, แต่แน่นอนถ้าผมมองลงมา ต่ำสุดก็พร่ามัวเล็กน้อย แต่ก็กล่าวว่า badguy.com นั่นเป็นเพียงคนเดียวที่บอกได้ในขณะนี้ ว่าฉันจะไปยังสถานที่ที่ไม่ถูกต้อง และเมื่อฉันกล่าวก่อนหน้านี้ว่าธนาคาร มันไม่ควรส่งเสริมหรือรถไฟ ให้ผู้ใช้คลิกที่ลิงค์นี้ เป็นเพียงหนึ่งในการประกาศของมัน และมันเป็นเรื่องง่ายที่ ขณะนี้คุณอยู่ฝ่ายตรงข้ามถ้า คุณทำอะไรเช่นนี้ และพยายามที่จะหลอกให้ผู้ใช้ เข้าไปเยี่ยมชมเว็บไซต์ของคุณ แต่ตอนนี้เราจะเก็บ สิ่งที่ดีและสะอาด เรากำลังจะไปข้างหน้า และย้อนกลับการเปลี่ยนแปลงเหล่านี้ โหลดหน้า และฉันกลับไป disney.com 

ลองมาดูว่าเราไม่สามารถหยอกล้อ นี้ออกจากกันเล็ก ๆ น้อย ๆ ดังนั้น "Hello, Disney World." ฉันจะบอกว่าลงที่นี่ บางทีฉันจะทำให้บางห้อง "เราหวังว่าคุณจะเพลิดเพลินไปกับการเข้าพักของคุณ!" ประหยัด. โหลด มันไม่ได้ rea-- ที่ไม่ สิ่งที่ฉันตั้งใจใช่มั้ย? ฉันหมายความว่าถ้าฉันรักษาข้อความของฉัน ไฟล์เช่นโปรแกรมประมวลผลคำ สิ่งที่คุณหวังว่าจะเกิดขึ้นที่นี่? ใช่ฉันรู้สึกเหมือนมี ควรจะมีเส้นแบ่งที่นี่ จึงรู้สึกรถในทางใดทางหนึ่ง แต่นั่นเป็นเจตนาจริง เพราะเพียงแค่เป็นมาก่อน เบราว์เซอร์เป็นเพียงจะ ทำในสิ่งที่คุณบอกว่าจะทำอย่างไร ผมยังไม่ได้บอกว่ามันจะทำลายเส้น ฉันไม่ได้บอกว่ามันจะย้ายลงแม้ แต่สังหรณ์ใจผมรู้สึกเหมือนผม ดังนั้นมันจะเปิดออกที่เราต้องการ มาร์กอัปน้อยมาก และฉันจะแก้ไขปัญหานี้ดังต่อไปนี้ ฉันจะคำนำสวัสดีนี้เป็นครั้งแรก กับสิ่งที่เรียกว่าแท็กวรรค แล้วฉันจะไปข้างหน้า และห่อประโยคอื่น ๆ ในแท็กวรรคอื่นแม้ว่า พวกเขากำลังวรรคซุปเปอร์สั้น ตอนนี้ผมกำลังจะประหยัด โหลด และตอนนี้เรามี พื้นที่และการจัดเรียงของเรา มีความหมายของ สองย่อหน้าที่แยกต่างหาก 

นั่นคือทั้งหมดที่ดีและดี แต่มันจะ เป็นการดีที่จะเพิ่มภาพในหน้านี้ ดังนั้นฉันจะไปมองหา มิกกี้เมาส์บน Google Images และเพียงเพื่อความสนุกสนานฉัน จะคว้ารูปภาพนี้ ฉันจะไปข้างหน้าในขณะนี้และ คว้า URL ของภาพนี้ แม้ว่าจะมีความแตกต่าง วิธีการที่จะทำเช่นนี้ สำหรับตอนนี้ฉันแค่จะไปคัดลอก URL ฉันจะกลับไปลงในข้อความของฉัน ไฟล์และฉันจะบอกว่าที่นี่ img src = อ้างนำมาอ้าง URL ที่สุดยาว และแล้วความคิดของนั้น ภาพที่แตกต่างกันเล็กน้อย มีจริงๆความคิดของการเริ่มต้นไม่มี ภาพและสิ้นสุดภาพ เหมือนการเริ่มต้นแท็กแท็กสิ้นสุด จึงรู้สึกแปลก ๆ ไป ฉันหมายการทำเช่นนี้ จะมีแท็กใกล้ภาพ มันไม่ถูกต้อง มันเป็นเรื่องที่ถูกต้องได้อย่างสมบูรณ์แบบ และจะได้รับการสนับสนุน แต่มีสัญกรณ์ชวเลข ฉันสามารถชนิดของพร้อมกัน เปิดและปิดแท็กเดียวกัน และที่จะทำให้เบราว์เซอร์ที่มีความสุข ดังนั้นจึงเป็นเพียงเล็กน้อย รวบรัดมากขึ้นสำหรับสิ่ง ว่าแนวคิดจริงๆไม่ ทำให้ความรู้สึกที่จะเริ่มต้นและสิ้นสุด พวกเขาก็จะมีหรือพวกเขาไม่ได้ 

ดังนั้นฉันจะบันทึกนี้และกลับไป เพื่อฉัน "Hello, world" หน้าและโหลด และมันเป็นเรื่องเล็ก ๆ น้อย ๆ ออกจากการควบคุม เพราะภาพที่เป็นจริง ที่มีขนาดใหญ่เล็ก ๆ น้อย ๆ แต่ที่ตกลง ฉันสามารถปรับขนาดในโปรแกรม หรือคุณรู้ว่าสิ่งที่ เพียงเพื่อแสดงให้เห็นถึงผม จะบอกว่าจริง ความกว้างของสิ่งนี้ควร เพียง แต่จะเป็น 200 พิกเซล, 200 จุด ให้ฉันไปข้างหน้าและบันทึก และโหลดและตอนนี้หน้า มีลักษณะเล็ก ๆ น้อย ๆ ที่เหมาะสมมากขึ้น แต่สังเกตเห็นรูปแบบ ดีฉันได้สอนชนิดของทุกท่าน ของ HTM​​L ในความรู้สึกบางอย่างน้อย แนวคิดเพราะ HTML ทั้งหมดคือ เหล่านี้ tags-- แท็กเปิดแท็กปิด และแอตทริบิวต์ที่ ปรับเปลี่ยนพฤติกรรมของพวกเขา และเห็นได้ชัดว่าทุก แท็กสามารถมีศูนย์หรือหนึ่ง หรือสองคนหรือมากกว่าคุณลักษณะของแต่ละคน ซึ่งทำบางสิ่งที่แตกต่างกันเล็กน้อย ตอนนี้วิธีที่คุณจะรู้ว่าสิ่งที่มีอยู่? คุณเพียงแค่ฟังคน เหมือนฉันบอกคุณในสิ่งที่มีอยู่แล้ว หรือคุณเพียง Google รอบสำหรับการกวดวิชา ใน HTML และจริงๆมันเป็นแบบนี้ 

อย่างแท้จริงเมื่อฉันเป็นปริญญาตรี ปีที่ผ่านมาและได้เรียนรู้ HTML, หนึ่งในการเรียนการสอนคณิตศาสตร์ของฉัน ผู้ช่วยเพียงแค่ใช้เวลา นิด ๆ หน่อย ๆ เวลาสอนฉัน เหมือนครึ่งชั่วโมงหนึ่งชั่วโมง และจากนั้นผมกำลังอยู่บนทางของฉัน ผมกำลังอยู่บนทางของฉันต่อการทำ เว็บไซต์น่าเกลียดที่สุดเท่าที่เคย ซึ่งเห็นได้ชัดว่าฉันไม่ได้ จริงๆก้าวหน้าเกิน แต่ประเด็นก็คือว่าเมื่อคุณ เข้าใจ ideas-- ง่ายๆเหล่านี้ ถ้าเป็นความลับ แต่ text-- ง่ายๆเหล่านี้ ความคิดของการเริ่มต้นความคิด และปิดความคิดในการรักษา ทุกอย่างมีความสมดุลอย่างดี มองหาบางสิ่งบางอย่างขึ้นการปรับเปลี่ยน ลักษณะการทำงานของแท็กนั้นว่าเป็นจริงทั้งหมด ที่มีให้มัน และในความเป็นจริงถ้าเราตอนนี้ไป สิ่งที่ต้องการ google.com-- จริง ให้เป็นไปสถานที่เล็ก ๆ น้อย ๆ reasonable-- stanford.edu และฉันจะไปดู, นักพัฒนามาดู มันน่าเกลียด แต่ notice-- และฉันจะซูมเข้าแจ้งให้ทราบล่วงหน้า บางสิ่งที่คุ้นเคยอยู่แล้ว นอกจากนี้ที่นี่ ซึ่งเป็นเบราว์เซอร์ ที่นี่มา HTML5 มีเป็น HTML เห็นได้ชัดว่ามีการ แอตทริบิวต์ที่ฉันไม่ได้ ใช้ที่ระบุ ภาษาของหน้า และนี้สามารถช่วยด้วยโดยอัตโนมัติ แปลและสิ่งที่ชอบ นี่คือหัวของหน้า นี่คือชื่อของเพจของ Stanford มีแท็กที่ผมทำไม่เป็น พูดคุยเกี่ยวกับแท็ก Meta yet-- มันเป็นเพียงการเรียงลำดับของ ข้อมูลเบื้องหลัง. มันจะช่วยให้กับ SEO หรือ เพิ่มประสิทธิภาพการค้นหาเครื่องยนต์ หรือผลลัพธ์ของ Google ค้นหาหรือชอบ แต่ถ้าเราให้มองให้ มองว่านี่คือแท็กร่างกาย และมีที่อัดแน่นของอื่น ๆ แท็กเราไม่ได้พูดคุยเกี่ยวกับเลย แต่ Div เป็นหนึ่งสำหรับ ส่วนของหน้า มันเหมือนสี่เหลี่ยมผืนผ้าที่มองไม่เห็น ถ้าคุณต้องการชนิดของจิตใจ แบ่งหน้าของคุณให้เป็น หน่วยงานต่างๆออนไลน์ แล้วจำนวนมาก divs ฉัน เห็นสิ่งที่เรียกว่าชั้น แต่เราจะกลับมาที่ 

นี่คือรูปแบบ interesting-- รูปแบบที่มีอยู่ทั้งหมดผ่านเว็บ กล่องค้นหาใด ๆ ที่คุณ เคยใช้เป็นรูปแบบ และเพื่อให้ของจริงเห็น ฟอร์ม การกระทำ การกระทำของแบบฟอร์มนี้สำหรับสิ่งที่ เหตุผลทางประวัติศาสตร์คือ URL ที่ วิธีการคือ "โพสต์". ปรากฎว่าการร้องขอ HTTP สามารถใช้ คำกริยา "ได้รับ" เหมือนที่เราเห็นมาก่อน หรือ "โพสต์". และจะเห็นความแตกต่าง นี้ในช่วงเวลาที่ Let 's จริงเห็นว่านี่คืออะไร ให้ฉันกลับไปที่หน้าของ Stanford รูปแบบสิ่งที่พวกเขาพูด เกี่ยวกับคุณคิดว่า? สิ่งที่กระโดดออกจากที่คุณ? 

ผู้ชม: การค้นหากล่อง 

เดวิดเจลัน: ใช่ ดังนั้นขึ้นที่ด้านบนขวา นี่คือช่องค้นหานี้ และนั่นคือวิธีที่พวกเขาดำเนินการ it-- แท็กที่ตัวอักษรรูปแบบเปิดวงเล็บ แล้วลองค้นหาบางสิ่งบางอย่าง ลองค้นหาเพื่อน ของ mine-- "นิค Parlante." เข้าสู่ และแน่นอนมันจะไป URL ที่แตกต่างกันเล็กน้อย ให้ฉันกลับไปที่นี่ ลองค้นหา "หลักสูตร". ประณามมัน เดินไปยัง URL ที่แตกต่างกัน ดังนั้นสแตนฟอเพิ่มความมหัศจรรย์บางอย่าง ที่พวกเขาไม่ได้พาผมไปยัง URL ที่เราเห็นใน การกระทำที่มีแอตทริบิวต์ แต่รูปแบบนี้ที่นี่จะดำเนินการอย่างหมดจด โดยวิธีการนี​​้มาร์กอัปที่นี่แท็กเหล่านี้ ในความเป็นจริงนี่คือการป้อนข้อมูลสำหรับ ประเภทของการค้นหาที่คุณต้องการ นี่คือการป้อนข้อมูลสำหรับ ประเภทของการค้นหาอีกครั้ง นี่คือการป้อนข้อมูลสตริงตัวเอง และเพื่อให้เป้าหมายไม่ได้ที่จะตัด จิตใจของเราทั่วทั้งหมดของแท็กเหล่านี้ แต่เพียงเพื่อดู มันเป็นเพียงแค่เปิดและปิด แท็กและสิ่งที่มองถึง ใช่? วิคตอเรีย? 

ผู้ชม: [ไม่ได้ยิน] เดวิดเจลัน: นั่นเป็นคำถามที่ดี นั่นเป็นเพียงเล็กน้อย trickier เพื่อดู ผมขอกลับมาว่า คำถามในเวลาเพียงไม่กี่นาที เมื่อเรามองไปที่สิ่งที่เรียกว่า แผ่น CSS หรือ Cascading Style, และเราสามารถพยายามที่จะสรุป เท่าจากหน้าเว็บ ดังนั้นถ้าตอนนี้เราจะดูที่ google.com, เรามาดูสิ่งที่หน้าของพวกเขาดูเหมือนว่า คุณจะ they're-- ที่น่ารักในวันนี้ ตกลง. ทุกอย่างเสร็จเรียบร้อย. ขวาทั้งหมดเพื่อให้มาดู คุณจะคิดว่า Google มี รหัสที่มาดีจริงๆ ดังนั้นเห็นได้ชัดว่าสิ่งที่เกิดขึ้นที่นี่? และในความเป็นจริงนี้ไม่ได้ HTML นี่คือสิ่งที่เรียกว่า JavaScript และขอให้ไปและไป ผมไม่ทราบว่าหน้าเริ่มต้น ฉันจะใช้คำสั่ง F วงเล็บเปิด HTML สิทธิทั้งหมดมีเ​​ป็น ผมพบว่าจุดเริ่มต้นของหน้าและ มีสิ่งที่มากดังนั้นในที่นี่ 

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

และสิ่งที่ดีในขณะนี้คือผมสามารถมองเห็น ในร่างกายสำหรับการแจ้งให้ทราบล่วงหน้า instance--, หน้าจะยังคงประกอบด้วย เพียงศีรษะและร่างกาย และฉันลำดับชั้นสามารถดำน้ำที่นี่ ขอให้สังเกตว่า Google ดูเหมือนว่าจะมี เพื่อ divs-- นี้และหนึ่งนี้ ฉันสามารถขยายว่า มีทั้งกลุ่มของ divs อื่น ๆ ดังนั้นจึงเป็นเรื่องเล็ก ๆ น้อย ๆ ที่มีความซับซ้อน แต่รอ นี้ดูเหมือนมากขึ้น สามารถอ่านได้ค่อนข้างกว่านี้ ทำไม Google ที่น่าอาย ตัวเองโดยเพียงแค่ส่ง ระเบียบนี้ใหญ่ของรหัสของบางส่วน การจัดเรียงเพียงในการดำเนินการบางสิ่งบางอย่าง ที่มีลักษณะเพื่อให้ง่ายได้อย่างรวดเร็วก่อน? เช่นทำไมพวกเขาไม่เพิ่มช่องว่างมากขึ้น? พวกเขาไม่ได้ตีทำไมใส่เหมือนผม? ดูวิธีการที่ดีผมเป็น ที่เขียนหน้าเว็บ ผมกด Enter เพื่อความขยันหมั่นเพียร ฉันเยื้องเพื่อให้ทุกอย่าง เพื่อให้สวยและสามารถอ่านได้ Google ไม่ทำไมไม่ปฏิบัติเดียวกันได้หรือไม่ 

ผู้ชม: [ไม่ได้ยิน] เดวิดเจลัน: ดี ยุติธรรมมาก. พวกเขาไม่ได้มีบางส่วน คนที่ Google ด้วยตนเอง ปรับปรุงหน้าบ้านอีกต่อไป มันไม่ได้อีกต่อไป 1999 ดังนั้นพวกเขาจึงมีซอฟต์แวร์ พวกเขามีเครื่องมืออื่น ๆ ที่ สร้างแบบไดนามิกที่พวกเขากำลัง HTM​​L แน่นอนรหัสที่ตัวเอง ถูกเขียนขึ้นโดยมนุษย์ แต่ในความเป็นจริง มันค่อนข้างยุติธรรมที่จะพูดว่า เบราว์เซอร์แน่นอนไม่ได้ วิธีการดูแลที่ยุ่งรหัสเป็น แต่มีมากยิ่งขึ้น ด้วยเหตุผลทางเทคนิคที่น่าสนใจ ว่า Google จำหน่าย HTML ของพวกเขา รหัสดังกล่าวในเลอะเทอะดูเหมือน วิธีครอบงำบรรจุทั้งหมดเข้าด้วยกัน กับ way-- น้อยมากน้อยมาก ในทางของการจัดรูปแบบเหมือนที่ผมทำ 

ผู้ชม: [ไม่ได้ยิน] 

เดวิดเจลัน: ได้เร็วขึ้น? ทำไม? และสิ่งที่คุณพูดว่าลิเดีย? เร็วขึ้น? ทำไมได้เร็วขึ้น? ผู้ชม: [ไม่ได้ยิน] เดวิดเจลัน: มี ไม่มีช่องว่างในการอ่าน ใช่. ดังนั้นคิดเกี่ยวกับสิ่งที่มีพื้นที่ ดังนั้นตัวอักษรบนแป้นพิมพ์ในแต่ละเวลา จำนวนของพื้นที่บางส่วนเพื่อเป็นตัวแทน ทั้งทางร่างกายเช่นนั้น จะขึ้นที่พื้นที่มาก หรืออย่างใดที่อยู่ภายใต้ เครื่องดูดควันที่ต้องใช้หน่วยความจำ และเป็น aside-- และเราจะ พูดคุยเกี่ยวกับ tomorrow-- นี้ ตัวอักษรบนแป้นพิมพ์ทุก มักจะต้องใช้ 8 บิตหรือไบต์ ดังนั้นรูปแบบของศูนย์หรือ 8 คนหรือเพียงแค่ 1 ไบต์ที่เรา มนุษย์โดยทั่วไปจะบอกว่า ดังนั้นที่มีขนาดเล็ก แต่ ก็ยังคงไม่เป็นศูนย์ ก็ยังคงจำนวนของพื้นที่บางส่วน ดังนั้นถ้าเป็นวิศวกรหรือ Google ฮิต แถบพื้นที่เพียงครั้งเดียวและคิดว่า Google-- มันเป็นซุปเปอร์ popular-- สมมติว่าพันล้านคน ไปที่หน้าบ้านของพวกเขาวัน หรือจำนวนของคนบางคน ไปที่หน้าบ้าน พันล้านครั้งต่อวัน วิธีการหลายไบต์มีเพิ่มเติมว่า วิศวกรซอฟต์แวร์เพียงค่าใช้จ่ายของ Google โดยการกดปุ่มบาร์ของเขาหรือพื้นที่ของเธอครั้ง? 

ผู้ชม: [ไม่ได้ยิน] เดวิดเจลัน: ไม่เชิงว่าไม่ดี เพียงหนึ่งไบต์ครั้งพันล้าน ดังนั้น a-- ผู้ชม: 8 พันล้านกิกะไบต์ เดวิดเจลัน: ไม่ได้ 8 พันล้าน 8 พันล้านไบต์ แต่ 1 กิกะไบต์ 1 กิกะไบต์จะเป็นหน่วยวัด ถ้าเขาหรือเธอไม่สอง ช่องว่าง 2 กิกะไบต์ สามกิกะไบต์ ขวา? เครื่องชั่งน้ำหนักมันแพง และดังนั้นในกรณีเช่น Google, ซึ่งได้รับอนุญาตเป็นกรณีที่รุนแรง มีปัญหาอื่น ๆ ที่เกิดขึ้นเพียง โดยการตัดสินใจที่เหมาะสมมาก หรือการกระทำของมนุษย์ที่ง่ายมาก เพราะมันมีผลต่อขยายนี้ ดังนั้นหนึ่งในเหตุผลที่ นี้มีลักษณะการบีบอัดเพื่อให้ ตรงตามที่วิกตอเรีย said-- มันเป็น เพียงแค่สร้างโดยคอมพิวเตอร์อยู่แล้ว ดังนั้นไม่มีเรื่องใหญ่ เบราว์เซอร์ให้คิดออก แต่มันก็ยังจงใจ ไม่ได้มีพื้นที่มาก เพราะพื้นที่ที่ไม่จำเป็น และพื้นที่จริงค่าใช้จ่ายเงิน 

มันทั้งค่าใช้จ่ายเวลา เพราะเพียงที่จะผลักดัน ว่าข้อมูลมากขึ้นจาก สำนักงานใหญ่ google.com เพียง ได้มีการใช้ปริมาณของบางอย่าง เวลาแม้ว่าจะเป็นมิลลิวินาที หรือ microseconds แต่ที่เพิ่มขึ้น มากกว่าผู้ใช้จำนวนมากหรือมีโอกาสมากขึ้น มันอาจมีค่าใช้จ่ายเงิน Google อาจจะเชื่อมต่อกับ คนอื่นในโลกคนหนึ่ง ของผู้ที่ peering คะแนนและถ้าพวกเขามี ชนิดของความสัมพันธ์ทางการเงินบางส่วน โดยข้อมูลของพวกเขาเงินค่าใช้จ่าย พวกเขาอาจจะเป็นอย่างดี ลดข้อมูลเท่าใด พวกเขากำลังคายออกบน การเชื่อมต่ออินเทอร์เน็ตของพวกเขา 

ดังนั้นสิ่งที่ตลก แต่ในท้ายที่สุด หรืออาจจะเป็นสิ่งที่มั่นใจ คือแม้ว่าลักษณะนี้ชะมัด ครอบงำในตอนท้ายของวัน ก็ยังคงเป็นหลักการเดียวกันกับ หน้านี้ง่ายมากที่นี่ของ HTM​​L หน้า. ดังนั้นเพียงเพื่อสรุปและเพื่อให้คุณ มีรุ่นที่เป็นที่ยอมรับถ้าคุณไม่ได้ ไปพร้อมโดยทางเลือกที่นี่ที่นี่ อาจจะง่ายที่สุดของหน้าเว็บ ดังนั้นสิ่งที่จะเล่นกับทีหลัง 

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

ฉันจะกลับไปยังไฟล์ของฉัน นี่และโหลดหน้าเว็บเพียง เพื่อยืนยันสิ่งที่ดูเหมือนว่า นั่นคือสิ่งที่เรากำลังที่ตอนนี้ ฉันรู้สึกเหมือนเด็ก ๆ จะสนุกกับการ มีบางสีที่หน้าเว็บนี้ ดังนั้นฉันจะไปขึ้นที่นี่ เข้ามาในหัวของหน้า และฉันจะทำรูปแบบ / รูปแบบ และจากนั้นภายในนี้ฉันจะ ที่จะบอกร่างกายของ Page-- ของฉัน และการจัดรูปแบบนี้เป็นที่ แวบแรกอาจจะเล็ก ๆ น้อย ๆ แปลก แต่เดิม ฉันจะบอกว่าพื้นหลัง สีของหน้านี้ควรเป็นสีเขียว และนี่เป็นที่น่าเสียดาย การจัดเรียงของไม่ได้ออกแบบที่ดีที่สุด ขอให้สังเกตว่าก่อนหน้านี้ ในโลกของ HTM​​L ได้ ผมบอกว่าแอตทริบิวต์ เหล่านี้เป็นคู่ค่าคีย์ สิ่งที่มีค่าเท่ากับคำพูด ได้นำมาอ้าง "บางสิ่งบางอย่าง." ในโลกของ CSS ซึ่งเป็น ออกแบบโดยคนที่แตกต่างกันบางอย่าง พวกเขาจึงตัดสินใจว่าในพวกเขา โลกคู่ค่าคีย์ จะเป็นคำพูดบางสิ่งบางอย่างลำไส้ใหญ่ ดังนั้นจึงเป็นความคิดเดียวกันแม้ว่า มันเชื่อมโยงค่า กับที่สำคัญบางอย่างที่ใด ที่มีอิทธิพลต่อพฤติกรรมของหน้านี้ 

และคุณอาจจะสามารถคาดเดา อะไรคือสิ่งที่นี้อาจจะ จะทำแม้ว่าคุณจะไม่เคย เห็น HTML หรือ CSS มาก่อนหรือไม่ ผู้ชม: เปลี่ยนสีพื้นหลัง เดวิดเจลัน: ใช่ เปลี่ยนสีพื้นหลัง และโดยเฉพาะอย่างยิ่ง สีพื้นหลังของร่างกาย แต่ตราบเท่าที่คน ร่างกายตอนนี้เป็นเว็บ Page-- มันเป็นสิ่งเดียว ด้านล่างแถบชื่อ really-- มันอาจจะ มีอิทธิพลต่อสิ่งเดียวกัน ดังนั้นเรามาดู Let 's บันทึกนี้ ไปที่นี่และโหลด มันน่าเกลียดสวย และสิ่งที่เกิดขึ้น นี่คือผลข้างเคียง ฉันเพียงแค่เลือกภาพนี้แบบสุ่ม ทำไมเป็นสีเขียวไม่ได้ น้ำซับอยู่เบื้องหลังมิกกี้? ผู้ชม: [ไม่ได้ยิน] เดวิดเจลัน: แน่นอน ปรากฎว่าภาพสวย มากภาพทั้งหมดที่เราอาจจะใช้ มี rectangles-- ทั้งหมดของรูปสี่เหลี่ยม แม้ว่ามิกกี้มีเส้นโค้งบาง ให้กับตัวเองและมีพื้นหลัง พื้นหลังที่จะต้องมีบางสิ่งบางอย่าง มันจะต้องมีสีขาว มันจะต้องมีสีดำหรือสิ่งอื่นใด มันอาจจะมีความโปร่งใส และในความเป็นจริงที่ฉันสามารถทำได้ เปิดมิกกี้เมาส์ที่นี่ ในโปรแกรมที่เรียกว่า Photoshop หรือสิ่งที่คล้ายกัน และการเปลี่ยนแปลงทั้งหมดของสีขาวที่ พื้นหลังโปร่งใส เพื่อให้สีเขียวจะส่องผ่าน แต่นั่นคือสิ่งที่ฉันจะต้อง ที่จะถามตัวเองหรือศิลปินกราฟิก หรือนักออกแบบที่ของฉัน บริษัท ตัวอย่างเช่น จะทำโดยเฉพาะอย่างยิ่งนับตั้งแต่ฉันเพียงแค่ ที่ยืมมาจากอินเทอร์เน็ตนี้ แต่ที่ว่าทำไมนี้เกิดขึ้น 

ดังนั้นอะไรที่เราอาจต้องการที่จะทำอย่างไร? ดีเราอาจต้องการที่จะบอกว่าเรา หวังว่าคุณจะเพลิดเพลินไปกับการเข้าพักของคุณ และเน้นที่ฉันต้องการ เพื่อให้แข็งแรง และดังนั้นฉันจะบอกว่าเปิดที่แข็งแกร่งและ ปิดที่แข็งแกร่งและแล้วโหลด และมันเป็นเรื่องยากที่เล็ก ๆ น้อย ๆ เพื่อดูโปรเจ็กเตอร์ แต่บางทีอาจจะจริงในขณะนี้ กระโดดออกจากที่คุณมากขึ้นอีกนิด เพื่อให้คุณสามารถเพิ่มตัวเอียงในครั้งนี้ วิธีที่หันหน้าไปทางตัวหนาในลักษณะนี้ เราสามารถเปลี่ยนสี ในความเป็นจริงเพียงเพื่อลูกผม จะไปข้างหน้าและทำเช่นนี้ ฉันไม่ชอบวิธีการของฉัน ย่อหน้านี้มีความใกล้ชิดกัน ดังนั้นฉันอาจทำอะไรเช่นนี้ ฉันจะบอกเบราว์เซอร์ เปลี่ยนแท็กวรรคทุกคนที่จะมี ขอ say-- จริงคุณรู้ว่าสิ่งที่ ขอจัดมัน text-align, ศูนย์ และอีกครั้งที่ฉันรู้ว่านี้เท่านั้น เพราะมีคนสอนให้ฉัน หรือผมมองมันได้ใน การอ้างอิงออนไลน์ เพื่อให้ฉันบันทึกนี้ และ ah, ตอนนี้ฉัน ศูนย์กลางภาพที่มี และอันที่จริงคุณรู้ว่าถ้า ผมย้ายภาพของฉันเข้าไปในย่อหน้า tag-- ดังนั้นวรรคที่สาม แม้ว่ามันจะไม่ได้เป็นข้อความ Let 's ประหยัดและโหลด ตอนนี้หน้าจะเริ่มที่จะมองชนิด of-- ฉันหมายความว่ามันยังคงน่าเกลียดสวย แต่อย่างน้อยก็ดูเหมือนว่าผมใช้เวลา สองนาทีแทนหนึ่งนาที ทำให้มันเป็น 

และเพื่อเพิ่มขึ้นเราสามารถทำให้ การเปลี่ยนแปลงความงามเหล่านี้ไปยังหน้า? ฉันไม่ได้เปลี่ยนจริงๆข้อมูลใน หน้าอื่น ๆ ที่นอกเหนือจากการเพิ่มคำว่าจริงๆ ฉันได้เพิ่มเมตาดาต้าถ้าคุณจะ Hey, เบราว์เซอร์ให้ คำว่า "จริงๆ" ตัวหนา แต่ข้อมูลที่ไม่แข็งแรง นั่นคือเมตาดาต้า ข้อมูลคือ "จริงๆ." ดังนั้นเราจึงยังคงมีบางส่วนของ แนวคิดเช่นเดียวกับก่อน ตอนนี้ของหลักสูตรนี้ไม่ได้อยู่บนเว็บ ดังนั้นฉันจะทำอย่างใดอย่างหนึ่งขั้นตอนสุดท้ายที่นี่ 

ฉันจะไป hello.html และเพียงแค่เน้นและคัดลอกนี้ และตอนนี้ฉันกำลังจะไป ไปลงใน Cloud9 ซึ่ง ฉันจะเดินคุณผ่านในเวลาเพียงสักครู่ และราคาที่คุณเร็ว ๆ นี้จะถ้า ไม่ได้อยู่ที่หน้าจอเช่นนี้ และแจ้งให้เราเพียงแค่ให้คุณได้อย่างรวดเร็ว การท่องเที่ยวของสิ่งที่ Cloud9 เป็นจริง ดังนั้นอีกครั้ง Cloud 9 คือ นี้บริการ Cloud-Based ที่จะช่วยให้คุณและฉันภาพลวงตา ของการมีเครื่องเสมือนของเราเอง ในเมฆในทางเทคนิค ภาชนะในเมฆ ว่าเรามีเต็มรูปแบบ สิทธิ์ของผู้ดูแลระบบเพื่อ ดังนั้นในทางทฤษฎีไม่มีใคร อื่น ๆ ในโลกได้ การเข้าถึงหน้าจอฉัน กำลังมองหาที่ในขณะนี้ อาจจะยกเว้นคน ที่ใช้เว็บไซต์ เพราะพวกเขามีเทคนิค การเข้าถึงทางกายภาพและอื่น ๆ 

ดังนั้นสิ่งที่เราเห็นในสภาพแวดล้อมเช่นนี้? ฉันจะซูมออก เพราะมันเป็นเรื่องเล็ก ๆ น้อย ๆ ที่มีขนาดเล็ก และให้ฉันจุดมากกว่า ที่นี่เพื่อรอสักครู่ ทางด้านซ้ายมือของฉันและของคุณ หน้าจอมีเบราเซอร์ไฟล์ที่ด้านซ้าย ดังนั้นที่คล้ายกันในจิตวิญญาณ กับ Mac OS และ Windows เหล่านี้ล้วนเป็นของ ไฟล์ในบัญชีของฉัน และโดยค่าเริ่มต้นถ้าคุณ บัญชีเป็นเหมือนระเบิด คุณจะเห็นหรือเร็ว ๆ นี้เห็น helloworld.html และ readme.md มากกว่าที่นี่ด้านขวานี้เป็น ที่ไฟล์ข้อความของฉันกำลังจะไป หากคุณเคยใช้ไมโครซอฟท์ Word หรือ Notepad หรือ TextEdit, นี้คือคำว่าการแก้ไขของฉัน ของไฟล์ที่จะไป และแล้วความลับที่สุด คุณลักษณะของสภาพแวดล้อมเช่นนี้ ว่าเราจะไม่ได้จริงๆต้องใช้คือ ลงที่นี่เรียกว่าหน้าต่าง terminal หากคุณเคยใช้ DOS จาก ปีกลายนี้เป็นลินุกซ์ หรือเทียบเท่าในลินุกซ์ของ DOS มันเป็น interface-- ข้อความตาม ไม่มีการคลิกเมาส์ลากไม่มี ทั้งหมดที่คุณสามารถทำได้คือการพิมพ์ คำสั่ง แต่คำสั่งดังกล่าว สามารถสร้างไฟล์ย้ายไฟล์เปิด ไดเรกทอรีไดเรกทอรีใกล้ชิด ทำจำนวนของสิ่งใด ๆ แต่ตอนนี้เราจะเป็นเพียงแค่ ใช้เวลาของเราได้ที่นี่ 

และเพื่อให้ทำเช่นนี้ ถ้าคุณอยู่ในนี้ สภาพแวดล้อมที่คุณควร ถ้าคุณสร้างพื้นที่ทำงาน แล้วไปข้างหน้าและเพียงแค่ขึ้นไป ที่ File, New สักครู่ และนั่นจะทำให้คุณใหม่ แท็บขวาที่นี่ที่อยู่ตรงกลาง และฉัน just-- และขอ ไปข้างหน้าและทำเช่นนี้ Let 's ไปข้างหน้าและตอนนี้จะยื่นบันทึก และไปข้างหน้าและเรียกว่า hello.html, เพื่อไม่ให้สับสนกับ helloworld.html ซึ่ง มาพร้อมกับบัญชีฟรีใหม่ของคุณ ซึ่งเป็นเพียงตัวอย่างไฟล์ คุณจะเห็นมันก็จะปรากฏขึ้น, ส่วนใหญ่มีแนวโน้มที่อยู่ด้านซ้ายมือ และแท็บจะยังคงเปิดให้บริการ และแจ้งให้เราแนะนำให้คุณในขณะนี้ที่จะสร้าง ไฟล์นี้หรือบางสายพันธุ์ดังกล่าว และถ้าคุณไม่สามารถค่อนข้างเห็นมันใน หน้าจอนี้เป็นเหมือนภาพนิ่ง ที่คุณอาจจะมีในแท็บอื่น 

ดังนั้นในระยะสั้นให้หน้าเว็บแรกของคุณ บันทึกไว้แล้วในเวลาเพียงชั่วครู่หนึ่ง ฉันจะแสดงวิธีการคุณ จริงสามารถดูนี้ แต่การเปลี่ยนแปลงอย่างน้อยสิ่งหนึ่ง เปลี่ยน HelloWorld ไป บางสิ่งบางอย่างของทางเลือกของคุณเอง เพื่อให้คุณมั่นใจว่ามันเป็นของคุณ ยื่นและไม่หนึ่งที่ผมเพิ่งสร้าง ก็ดี และเมื่อคุณ ready-- ไม่มี rush-- เมื่อคุณพร้อม ไปข้างหน้าและบันทึกแฟ้ม เมื่อคุณได้ทำการเปลี่ยนแปลงเหล่านี้ และถ้าคุณคลิก ปุ่มวิ่งด้านบนนี้ ควรเปิดแท็บใหม่ที่จะบอก คุณว่า URL ที่คุณสามารถเยี่ยมชมไฟล์ของคุณได้ที่ แต่มันอาจใช้เวลาสักครู่ไป อ้างนำมาอ้าง "เริ่มต้นอาปาเช่" ซึ่ง เป็นชื่อของเว็บเซิร์ฟเวอร์ ดังนั้นต้องระมัดระวังในการทำตรง สิ่งที่อยู่ในไฟล์ในท้ายที่สุด ดังนั้นตอนนี้ฉันจะซูมเข้า ถ้าฉันเริ่มพิมพ์ เปิดวงเล็บ HTML, แจ้งให้ทราบล่วงหน้า มันกระตุ้นให้ผมที่จะจบความคิดของฉัน และถ้าฉันเสร็จแล้วความคิดของฉันมัน โดยอัตโนมัติทำให้ผมแท็กปิด แต่คาดหวังก็คือแล้วฉันจะตี ใส่และจากนั้นย้ายภายในมี และมุ่งหน้าภายในและ แล้วฉันจะทำร่างกายภายใน และมันเป็นเรื่องเล็ก ๆ น้อย ๆ ที่แปลกในตอนแรก เพราะทำผลงานให้กับคุณ แต่รู้ว่าในท้ายที่สุด มันช่วยให้คุณประหยัดการกดแป้นพิมพ์ และในความเป็นจริงมีลักษณะทั่วไปมาก การเขียนโปรแกรมสภาพแวดล้อมวันนี้ ทั้งสำหรับการพัฒนาเว็บเช่น นี้และการเขียนโปรแกรมที่เกิดขึ้นจริง ซึ่งเราจะพูดคุยเกี่ยวกับวันพรุ่งนี้ เป็นคุณลักษณะอัตโนมัติสมบูรณ์เหล่านี้ สิ่งที่เพิ่งอนุญาตให้ โปรแกรมเมอร์หรือนักออกแบบ พิมพ์กดแป้นพิมพ์น้อยลงไป ประสบความสำเร็จในสิ่งเดียวกัน บางครั้งก็เป็นสิ่งที่ดี แต่ บางครั้งมันก็น่ารำคาญเพียง และอีกครั้งเมื่อคุณได้คัดลอก สไลด์หรือตัวแปรบางดังกล่าว คุณสามารถคลิกที่ปุ่มด้านบนวิ่งขึ้น และจากนั้นในด้านล่าง หน้าต่างคุณจะได้รับแจ้ง สิ่งที่ URL ที่คุณสามารถไปที่หน้าเว็บของคุณ เหมืองแร่เช่นที่ business-daharvard.c9users.io เป็นต้น ขวาทั้งหมดเพื่อให้คำถาม me-- ใด ๆ คำถามอื่น ๆ เกี่ยวกับเพียงแค่ได้รับ นี้ทำงานก่อนที่เราจะเพิ่มคุณสมบัติ? และแจ้งให้เรานำเสนอเพียง คนที่จะได้รับ comfortable-- เพราะมันเป็นสิ่งหนึ่งที่จะเป็นเพียงแค่ copy-paste สุ่มสี่สุ่มห้าสิ่งที่ผมทำ แต่เพียงเพื่อให้คนต่อสู้ อย่างน้อยหนึ่งที่ต้องทำ ฉันจะเปิดเพลงบาง ผมจะนำเสนอรายการ สิ่งที่คุณอาจจะสามารถเพิ่ม และแน่นอนคุณสามารถใช้ Google และทำไมเราไม่เพียง เสนอว่าคุณพยายามที่จะแก้ปัญหา อย่างน้อยหนึ่งปัญหาเฉพาะที่นี่ ดังนั้นในแง่ของแท็ก ให้ฉันนำมาใช้ใหม่ได้ที่นี่ 

ที่จริงให้ฉันใส่ มันในรูปแบบต้นฉบับเดิม สมมติว่าในหมู่แท็กเราอาจจะ ใช้ที่นี่เป็นแท็กบางกว่าที่นี่ เราได้เห็นแท็กวรรค ตอนนี้มันเป็นไปอัตโนมัติสมบูรณ์ แท็กวรรคแท็กสมอ สมมติว่าคุณต้องการที่จะ ทำอะไรบางอย่างที่ใหญ่กว่า ดังนั้นคุณอาจ like-- แท็กช่วงสามารถช่วย ดีคุณอาจต้องการความช่วยเหลือบางส่วน สำหรับว่าในสักครู่ เราได้เห็น div คุณจะเห็นมีตาราง มีสิ่งที่เรียกว่า TR, TD TH, TD กลับไปยังที่มาในช่วงเวลาที่ สิ่งที่คนอื่นอาจจะมีประโยชน์? มีความแข็งแรง มีความสำคัญหรือค่อนข้าง em There's-- สิ่งอื่น คุณอาจจะอยากอยู่ที่นี่? ดีที่เราจะใช้เวลา ดูร่วมกันว่า รูปแบบที่เราเคยเห็น มีรูปแบบเป็น มีการป้อนข้อมูลและอื่น ๆ ไม่กี่เรื่อง ขวาทั้งหมดเพื่อให้ทำเช่นนี้ ที่จะตอบวิกตอเรีย คำถามให้ฉันก่อน เพียงให้แน่ใจว่าทุกคนมีความ สามารถที่จะได้รับการทำงานของพวกเขาทักทาย จากนั้นให้ฉันแนะนำ คู่ความคิดอื่น ๆ แล้วเราจะปล่อยให้คนแก้ ปัญหาบางอย่างได้ด้วยตัวเอง จากนั้นเราจริงจะกลับมา กับความคิดของฟอร์มที่ และเราจะเป็นจริงอีกครั้งใช้ ร่วมกันอินเตอร์เฟซแบบ Front-end, เพื่อที่จะพูดสำหรับ Google เอง เราจะใช้ Google เป็นปลายด้านหลังและปล่อยให้ พวกเขาจะทำงานหนักในการค้นหา แต่เราจะสร้างปลายด้านหน้า ของ Google และแบบฟอร์มการค้นหา ว่าพวกเขามีในหน้าแรกของตัวเอง และเพื่อให้เราจะได้กลับมา แท็กเหล่านี้เพียงสักครู่ 

ดังนั้นนี่คือสิ่งที่ผม เสนอสักครู่ที่ผ่านมา เราสามารถเพิ่ม stylization ไปยัง หน้าภายในของแท็กรูปแบบนี้ และเราสามารถปรับสไตล์พื้นหลัง สีการจัดตำแหน่งข้อความ ไม่ว่าจะเป็นศูนย์หรือทางซ้ายหรือขวา แต่อย่างรวดเร็วคุณจะ หาหรือนักออกแบบเว็บไซต์ จะพบว่า กลายเป็นเทอะทะเล็กน้อย เพราะคุณกำลังทำในสิ่งที่เป็น เรียกว่าเนื้อหาผสม ด้วยการนำเสนอดังกล่าว คุณกำลังผสมข้อมูลของคุณ และความสวยงามของมัน และในความเป็นจริงถ้าคุณพิจารณา สิ่งที่จะเกิดขึ้นในช่วง time-- นี้มีขนาดเล็กมาก หน้าเว็บของหลักสูตร แต่ถ้าเราเพิ่มเนื้อหาในหน้านี้ และผมเพิ่มรูปแบบไปยังหน้านี้ หน้าอย่างรวดเร็วได้รับ อีกต่อไปและอีกต่อไปและอีกต่อไป และคิดว่าฉันต้องการ มีหน้าเว็บที่สองที่ หุ้นบางส่วนของคุณสมบัติเหล่านี้ สมมติว่าหน้าเว็บของฉันที่สองสำหรับฉัน site-- ยังผมต้องการที่ศูนย์ทุกอย่าง และฉันยังต้องการทุกอย่าง กับพื้นหลังสีเขียว ผมสวยมากจะต้อง คัดลอกและวางบางส่วนของเส้นเหล่านี้ เข้าว่าไฟล์ที่สองซึ่งให้ความรู้สึกที่ดี มันจะแก้ปัญหาได้ 

แต่สิ่งที่ถ้าฉันต้องการหน้าสาม หรือหน้าวันที่ 30 หรือ 40 ปีหน้า? ตอนนี้ผมกำลังจะได้รับการคัดลอกและ วางมากรหัสที่ซ้ำกัน ในหลายไฟล์ และอื่น ๆ คิดว่า ฉันตัดสินใจหรือผมบอกว่า เดี๋ยวก่อนเราไม่ได้ใช้ พื้นหลังสีเขียวอีกต่อไป เรากำลังจะเริ่มใช้สีส้ม คุณมีอะไรที่จะเปลี่ยน? ทางที่ดีคุณต้องเปลี่ยนสไตล์ที่ จากสีเขียวเป็นสีส้มในวิธีการที่หลายสถานที่? เช่น 30 หรือ 40 ตำแหน่ง มันน่าเบื่อ มันมีแนวโน้มที่จะเกิดข้อผิดพลาด มีเหตุผลหลายประการคือ ที่คุณจะไม่ต้องการที่จะทำให้เกิด ชนิดของความเจ็บปวดที่สำหรับตัวคุณเอง ดังนั้นมันจะไม่ดี ถ้าเราสามารถนำสิ่งที่ฉันเพียงแค่ ใส่ระหว่างทั้งสองสีเหลือง แท็ก, แท็กสไตล์เหล่านี้ ปัจจัยที่ออกและใส่ทั้งหมดของฉัน stylization ลงในไฟล์หนึ่งกลาง ว่าทุก 30 หรือ 40 ไฟล์อื่น ๆ ของฉัน ยืมจากหรืออย่างใดอ้างอิง ไม่แตกต่างจากเครือข่าย แผนภาพที่เรากำลังทำมาก่อนหรือไม่ 

ดังนั้นถ้าเราไปในที่นี่ผม จะนำเสนอจริง ว่าเรามาแทนที่ แท็กรูปแบบที่มีบางสิ่งบางอย่าง ที่เรียกว่าแท็ก link ซึ่ง เป็นที่น่ากลัวชื่อน่ากลัว เพราะคุณไม่ได้ใช้ แท็กเชื่อมโยงไปสร้างสิ่งที่ มนุษย์เรารู้ว่าเป็นลิงก์ในหน้าเว็บ เพื่อที่คุณจะใช้งานง่ายซึ่งแท็ก? คุณจะสร้างการเชื่อมโยงในหน้าเว็บหรือไม่? ผู้ชม: ที่ผู้ เดวิดเจลัน: A, หรือสมอ แท็กที่ไปดิสนีย์ก่อน แท็ก link ที่นี่ไม่ว่าจะเป็น การเชื่อมโยงไปยังแฟ้ม this-- ที่เรียกว่า styles.css ความสัมพันธ์ที่ เป็นไปได้ว่ามันเป็นสไตล์ชีทของฉัน ดังนั้นนี่คือหนึ่งใน S ใน สไตล์ชี cascading CSS-- สไตล์ sheet-- สอง S ของใน CSS สไตล์ชีต Cascading เพียงแค่นี้ก็หมายความว่า Hey, เบราว์เซอร์ไป พบ styles.css บนเซิร์ฟเวอร์ท้องถิ่น และใช้เป็นสไตล์ชีตของคุณ ซึ่งหมายความว่าภายในของแฟ้มที่ เป็นไปได้ทั้งหมดของ stylizations ว่าเราได้ทำเพียงแค่ และเพื่อให้สิ่งที่แฟ้มที่ อาจมีลักษณะเช่นนี้มี และฉันก็จะทำเช่นนี้เป็นวิธีที่รวดเร็ว เช่นเพราะเราไม่จำเป็นต้อง ที่จะได้รับมากเกินไปในวัชพืชที่นี่ แต่ถ้าผมคัดลอกนี้สิ่งที่ผมเสนอ คือว่าโปรแกรมสร้างไฟล์ใหม่ วางใน lines-- เหล่านั้น whoops-- วางในสายนั้น บันทึกเป็น styles.css แล้วใน ไฟล์อื่น ๆ ลบทุกที่ และแทนที่มันแทน ที่มีแท็กที่ลิงค์นี้ เพื่อที่ว่าถ้าฉันเชื่อมโยง href = "styles.css" ความสัมพันธ์จะเป็น "สไตล์ชีต" ใกล้แท็ก บันทึก กลับไปที่ HelloWorld ของฉัน โหลด 

แท้จริงไม่มีอะไรเกิดขึ้น นั่นเป็นสิ่งที่ดีเพราะมัน หมายความว่ามันเป็นจริงการทำงานทั้งหมด เพื่อพิสูจน์ว่าเป็นมากคิดว่าฉันทำ พิมพ์ผิดและฉันเรียกสิ่งนี้ว่า "Styles.css" มีทุน S ซึ่งเป็น ไม่ถูกต้องและแล้วโหลด ตอนนี้คุณสามารถเห็นมันก็ไม่ทำงาน ตอนนี้ทำไม? ดีขอใช้ เทคนิคจากก่อนหน้านี้ ให้ฉันไปข้างหน้าและใน เบราว์เซอร์ของฉันใน Chrome ฉัน จะเปิดขึ้นที่พิเศษ แท็บเครือข่ายเป็นมาก่อน และแจ้งให้เราโหลดหน้าเว็บ สิ่งที่คุณไม่ได้มีความแปลกใจที่เห็นตอนนี้หรือไม่ หรือบางทีคุณประหลาดใจที่จะเห็นมัน ทั้งสองวิธีทำในสิ่งที่คุณเห็นในตอนนี้? ผู้ชม: [ไม่ได้ยิน] เดวิดเจลัน: มันไม่พบ เพราะเหตุใดจึงไม่พบ? ดีทุน Styles.css-- S-- ไม่อยู่ ผมเรียกไม่ถูกมัน typo ง่าย แต่ฉันได้รับความเข้าใจในขณะนี้ 404 เพราะเซิร์ฟเวอร์จะบอกว่าเดี๋ยวก่อน ก็ไม่พบ แท้จริงผมไม่ทราบว่า ที่ไฟล์ที่เป็น ดังนั้นเป็นผลให้เบราว์เซอร์ แสดงให้คุณเห็นสิ่งที่มันสามารถจะทำได้ เนื้อหาดิบของหน้า ซึ่งเป็น 200, HTML ได้ แต่ stylization ไม่สามารถ หลังจากนั้นจะมีการเพิ่ม และนี่คือสิ่งที่หมายโดย Cascading การจัดเรียงของคุณสามารถเพิ่ม หลังจากและการเรียงลำดับของ กลั่นความสวยงามของหน้าเว็บ และคุณยังสามารถแทนที่เหล่านั้น รูปแบบไฟล์สไตล์ชีต ๆ อื่น ๆ ถ้าคุณต้องการ. มันไม่ได้พบ แต่ในกรณีนี้ เพราะแน่นอนผมเรียกไม่ถูกมัน ดังนั้นผมจึงจะต้องมีการแก้ไขปัญหาที่แรก 

ดังนั้นขอให้ไปข้างหน้าและ นำเสนอต่อไปนี้ Let 's ไปข้างหน้าและทำเช่นนี้ บางทีอาจจะเริ่มต้นด้วย ไฟล์ HelloWorld ของคุณ ให้ฉันเพียงแค่เชิญคู่ ของมีข้อเสนอแนะ ดังนั้นวิกตอเรียคุณต้องการ ทำให้ข้อความบางอย่างที่ใหญ่กว่าใช่มั้ย? ทั้งหมดขวาเพื่อให้เราสามารถ จะทำให้ข้อความที่ใหญ่กว่า และเราแต่ละคนจะถอนออก เป็นเพียงปัญหาหนึ่งที่จะแก้ปัญหา ทำให้ข้อความที่ใหญ่กว่า ฉันจะไม่ไปรบกวน เขียนนี้เมื่อเรา มีเทคโนโลยีที่เหมาะสมกระสุนมากกว่าที่นี่ ดังนั้นปัญหาบางอย่าง ดังนั้นเราจะพยายาม เพื่อให้ข้อความที่ใหญ่กว่า ก็ดี สิ่งที่คนอื่นจะเสนอ? อะไรที่เราอาจต้องการ จะทำอย่างไรในหน้าเว็บหรือไม่ ลองมากับ รายชื่อของสิ่ง และจากนั้นตัวแทนไป กลุ่มที่จะคิดออก 

ผู้ชม: [ไม่ได้ยิน] 

เดวิดเจลัน: OK ข้อความตำแหน่ง ในด้านที่แตกต่างกันของหน้า? ก็ดี อื่น ๆ อีก. 

ผู้ชม: [ไม่ได้ยิน] เดวิดเจลัน: มันเป็น ดังนั้น GIF เป็นเพียง รูปแบบไฟล์ที่แตกต่างกัน เราเพียงแค่ใช้สิ่งที่เป็น PNG หรือ JPG อาจ? เราใช้ไฟล์ JPG ถ้าคุณอยากรู้ที่มากเกินไป ตอบคำถามของคุณ เป็น JPG โดยทั่วไปจะใช้สำหรับ ภาพเพราะสนับสนุน ล้านสีหรือสี 24 บิต GIF ไฟล์ที่ใช้โดยทั่วไปชอบ, อินเทอร์เน็ตมีมเหล่านี้ภาพเคลื่อนไหว days--, GIF ภาพเคลื่อนไหวเช่น แต่มันเกิดขึ้นที่จะใช้สีที่มีขนาดเล็ก จานเพียง 256 สีที่เป็นไปได้ แต่สนับสนุน ความโปร่งใสและภาพเคลื่อนไหว แล้วมี PNG ซึ่งสนับสนุน โปร่งใสและสีมากขึ้น แต่ไม่นิเมชั่น ดังนั้นจึงเป็นค้าปิด ดังนั้นการเพิ่ม GIF แม้ว่า จะเป็นหน้าที่ เทียบเท่ากับการเพิ่ม PNG หรือไฟล์ JPG ใช่. ที่มาของภาพเท่ากับ ดังนั้นสิ่งอื่น ลองมากับสิ่งที่ เราส่งไปวิกตอเรียจะทำที่นี่ 

ผู้ชม: เพ​​ิ่มปุ่มสำหรับฟอร์ม เดวิดเจลัน: OK ดังนั้นเพิ่มปุ่มสำหรับฟอร์ม และเราจะทำอย่างใดอย่างหนึ่งร่วมกัน เพื่อที่จะทำต่อที่สมบูรณ์แบบ ทันทีหลังจากที่ท้าทายนี้ อะไรอีกหรือไม่ สิ่งที่คุณอาจต้องการทำอะไร? เว็บ underwhelming รู้สึกมาก ถ้านี่เป็นสิ่งที่เราสามารถทำได้ ผู้ชม: เปลี่ยนสีของข้อความ เดวิดเจลัน: เปลี่ยนอะไร? ผู้ชม: สีของข้อความ เดวิดเจลัน: การเปลี่ยนแปลงสีของข้อความ ก็ดี ดังนั้นขอทำเช่นนี้ เพียงแค่อีกครั้งเพื่อที่คุณไม่ได้เพียงแค่ โดยการท่องจำทำสิ่งที่ฉันทำ ฉันจะเปิดเพลง สำหรับอาจจะห้านาทีที่นี่ คุณสามารถใช้ Google คุณสามารถถามฉันและ ฉันจะกระซิบคำใบ้ในหูของคุณ เรายินดีให้คุณดู ไปบนไหล่อื่น ๆ แต่แก้เพียงหนึ่งในปัญหาเหล​​่านี้ แต่เราจะทำอย่างใดอย่างหนึ่งที่ผ่านมา รูปแบบหนึ่งถ้าเราสามารถร่วมกัน ดังนั้นห้านาทีในการแก้ปัญหา หนึ่งในปัญหาเหล​​่านี้ โดยใช้ Google ปรีชาหรือใด ๆ วิธีการอื่น ๆ ที่มีให้คุณ 

[เสียงเพลง] ก็ดี ไม่ต้องกังวลถ้าคุณต้องการ เพื่อให้ tinkering, แต่ฉันจะทำให้เสียคู่ คำตอบเหล่านี้ ดังนั้นคำแนะนำแรกจาก วิคตอเรียคือการทำให้ข้อความที่ใหญ่กว่า ดังนั้นจึงมีกี่วิธีที่จะทำเช่นนี้ ฉันได้รับการบูรณะในขณะนี้ หน้าจอของฉันขนาดนี้ แม้ว่าฉันได้ซูม เทียมเพียงเพื่อดูสิ่งที่ และขอให้ทำเช่นนี้ ให้ฉันไปข้างหน้าและคว้า บางข้อความภาษาละตินทั่วไป เพียงเพื่อให้เรามีสิ่งที่จะทำงานร่วมกับ เพื่อให้ฉันเป็นเพียงแค่ช่วงเวลาหนึ่ง ฉันจะทำให้สามย่อหน้า ตกลง. นี้จะเป็นตัวอย่างที่ดี ดังนั้นสำหรับอยากรู้อยากเห็นใน hello.html ของฉันฉันเพียงแค่ วางสามไร้สาระ ย่อหน้าละติน เพียงเพื่อให้เรามีข้อความบางส่วนที่จะทำงานกับ และเป้าหมายของวิคตอเรียคือการ ทำให้บางส่วนของข้อความที่ใหญ่กว่า ดังนั้นฉันจะเป็นก่อนที่จะไปในที่ที่นี่ และให้ฉันทำมันทางขวา ฉันจะมีการเชื่อมโยง แท็กที่ชี้ไปยังแฟ้ม เรียกว่า "styles.css" ความสัมพันธ์ ซึ่งเป็นอีกครั้งที่ "สไตล์ชีต." แล้วฉันจะบันทึกว่า และเปิดนี้ "styles.css." 

ดังนั้นเมื่อก่อนผมมี ความสามารถในไฟล์ CSS นี้ จริงแทนที่ค่าเริ่มต้น ความสวยงามของหน้าเว็บ และความงามเริ่มต้น แน่นอนน่าเบื่อสวย มันเรียงลำดับของขนาดตัวอักษรปกติสีดำ ข้อความพื้นหลังสีขาวและอื่น ๆ ดังนั้นคิดว่าฉันต้องการที่จะทำให้ ข้อความทั้งหมดนี้มีขนาดใหญ่ ฉันจะทำบางสิ่ง ในแฟ้ม styles.css ของฉันฉัน อาจจะบอกว่าคุณรู้ว่าสิ่งที่ นำไปใช้ต่อไปนี้ ร่างกายของหน้าเว็บ ไปข้างหน้าและทำให้ ขนาดตัวอักษร 24 คะแนน ซึ่งเป็นตัวเลขที่ผมอาจจะ ใช้ใน Microsoft Word ให้ฉันกลับไปที่เว็บของฉัน หน้านี่และโหลด และคุณสามารถเห็นได้ว่า มันมีอยู่แล้วที่ยิ่งใหญ่กว่า และเราสามารถได้รับน้อยบ้า เช่นเดียวกับที่เราทำได้ใน desktop-- ทำให้มัน 96 จุด โหลด และจะได้รับเพียงเล็กน้อย เทอะทะที่จุดนี้ 

แต่ผมอาจจะเป็นเพียงเล็กน้อยที่แม่นยำมากขึ้น แทนที่จะใช้นี้ สไตล์ชีตให้กับร่างกายของหน้าของฉัน อะไรที่ฉันอาจจะนำมันไปใช้แทน สิ่งที่แท็กอื่น ๆ ที่อาจจะยังคง ฟังก์ชั่นในลักษณะเดียวกันได้หรือไม่ 

ผู้ชม: แท็ก P หรือไม่ เดวิดเจลัน: Tag P ดังนั้นหัวจะไม่เป็น ที่ถูกต้องเพราะหัว คุณไม่สามารถจริง ควบคุมความงามของ มีข้อความอย่างใดอย่างหนึ่งอยู่ที่นั่นหรือไม่ แต่พี tag-- ฉันสามารถดำน้ำในเล็ก ๆ น้อย ๆ ลึกเพื่อที่จะพูดวรรค แท็ก และแม้ว่าจะมีสาม ที่สมบูรณ์ดีเพราะใน CSS, เมื่อฉันเพียงแค่พูดว่า "P" นี้ หมายถึงการใช้ความต่อไปนี้ ไปยังแท็กที่ตรงนี้ เลือก, เลือกเพียง เป็นชื่อของแท็ก ดังนั้นทุกที่ที่คุณเห็น "P" ใช้ขนาดตัวอักษร และขอให้มันมากขึ้น ที่เหมาะสม again-- 24 จุด และคุณรู้ว่าสิ่งที่ เพียงสำหรับการวัดที่ดี ขอให้สี เพียงแค่สีแดงในขณะนี้ และตอนนี้ถ้าผมโหลดตอนนี้เรา เห็นสามย่อหน้าน่าเกลียด 

แต่ตอนนี้คิดว่าฉันจัดเรียง of-- ฉันต้องการวรรคแรก ที่จะกระโดดออกจากที่ผู้ใช้ ฉันไม่ได้ต้องการเพียงแค่เพิ่ม ขนาดตัวอักษรของทุกอย่าง และอื่น ๆ ที่จริงผมต้องการที่จะระบุตัวตนหรือ เห็นความแตกต่างในหมู่ย่อหน้านี้ ดังนั้นขอให้ได้รับการกำจัดของสีแดง เพราะนั่นเป็นเพียงแค่ชนิดของไม่มีรสนิยมที่ดี และขอให้ไปข้างหน้าและทำให้ ขนาดตัวอักษร 12 จุดโดยค่าเริ่มต้น เพื่อที่เราจะกลับไปที่บางสิ่งบางอย่าง เล็ก ๆ น้อย ๆ ที่เหมาะสม และตอนนี้ผมแค่อยากจะเพิ่ม ขนาดตัวอักษรของย่อหน้าแรก ฉันสามารถทำเช่นนี้ในไม่กี่ วิธี แต่วิธีหนึ่งที่เป็น บางทีการเรียนการสอนมากที่สุดที่ ช่วงเวลาที่จะทำต่อไปนี้ ให้ฉันไปข้างหน้าและพูดนี้ วรรคมีรหัสเฉพาะของ "ครั้งแรก." ฉันจะเรียกอะไรฉันต้องการ ฉันจะเรียกสิ่งนี้ว่า "ฟู" หรือคำอื่น ๆ แต่ฉันจะให้มันบาง ชื่อที่มีความหมายความหมาย เช่น "ครั้งแรก." นี่คือตัวระบุที่ไม่ซ้ำกัน รหัสสำหรับวรรคแรกของฉัน 

ตอนนี้สิ่งที่ฉันสามารถทำได้ในสไตล์ชีตของฉัน คือจะเป็นเพียงเล็กน้อยที่แม่นยำมากขึ้น แทนที่จะพูดว่าใช้ ต่อไปนี้ไปยังแท็ก P ที่ ฉันสามารถพูด following-- นำไปใช้ต่อไปนี้ หรือเลือกองค์ประกอบของ HTM​​L ที่มีรหัสเฉพาะของ "ครั้งแรก." อะไรที่ฉันต้องการที่จะนำไปใช้กับมันได้หรือไม่ ขนาดตัวอักษร 24 จุด ดังนั้นผมจึงมีสองเตอร์ในขณะนี้ หนึ่งที่ทำให้ทั้งหมดของ ย่อหน้า 12 จุด แต่คนนี้โดยเฉพาะอย่างยิ่งตั้งแต่มันมา second-- มันมาสุดท้ายใน file-- นี้มีผลซ้อน ผมได้ทำเพียงแค่ทั้งหมดของฉัน แท็กวรรค 12 จุด แต่ในตอนนี้และน้ำตก แทนที่ว่าองค์ประกอบใด ๆ ในหน้าแท็กใด ๆ ในหน้าเว็บที่มี ID ที่ไม่ซ้ำกันคืออ้างนำมาอ้าง "ครั้งแรก." และ hashtag ในบริบทนี้ ก็หมายความว่า "ระบุที่ไม่ซ้ำ." ผมไม่ได้ใส่ไว้ในไฟล์ HTML ฉันมากกว่าที่นี่เพียงแค่พูดว่า อ้างนำมาอ้าง "ครั้งแรก." 

เพื่อให้ฉันโหลด และตอนนี้ฉันเห็น ah, OK ฉันหมายความว่ามันไม่ได้ว่า สวย แต่มันเป็นชนิด เช่นคำนำไป หนังสือหรือสิ่งที่ต้องการที่ ที่วรรคแรกมีขนาดใหญ่ อาจจะมีความแม่นยำมากยิ่งขึ้นด้วย เพียงแค่ตัวอักษรตัวแรก แต่อย่างน้อย ฉันได้ใช้มาตรการควบคุมเพิ่มเติม ตอนนี้ maybe-- บางทีฉันต้องการทำเช่นนี้ บางครั้งด้วยเหตุผลใดก็ตาม และดังนั้นผมจึงไม่อยากให้เรื่องนี้ นำไปใช้กับแท็กเพียงหนึ่ง แต่ขอ say-- ขอ นอกจากนี้ยังทำต่อไปนี้ class = "นำเข้า". ในขณะที่ ID ที่ใช้ในการที่ไม่ซ้ำกัน ระบุสิ่งหนึ่งหนึ่งแท็ก ในหน้าเว็บของคุณชั้นหมายถึงการเป็น ใช้ในจำนวนขององค์ประกอบหรือแท็กใด ๆ บนหน้าเว็บของคุณ ดังนั้นจึงนำมาใช้ใหม่ ID ที่ไม่ได้นำมาใช้ใหม่ ชั้นนำมาใช้ใหม่ 

และคุณรู้ว่าสิ่งที่สำหรับสิ่งที่ reasons-- ปรัชญา ฉันยังพูดไม่จบของฉัน thought-- ฉันจะบอกว่า ว่าวรรคแรกและ วรรคสองมีความสำคัญ ดังนั้นฉันจะใช้ระดับที่เรียกว่า "ที่สำคัญ" ว่าถ้าฉันบันทึกแฟ้มของฉัน และโหลดไม่มี ส่งผลกระทบต่อการทำงานเลย แต่ฉันได้เพิ่มบางส่วน เมตาดาต้าไปยังแฟ้ม การจัดเรียงของบางสิ่งบางอย่างที่แยกต่างหาก จากข้อมูลหลักของแฟ้ม เพื่อที่ว่าในขณะนี้ในสไตล์ชีตของฉันถ้าฉัน แทนที่จะพูดว่า ".important" - คุณรู้ว่า อะไรที่เป็นสิ่งสำคัญที่ผม จะทำให้ตัวอักษรสี red-- หรือมากกว่าไม่ได้ตัวอักษรสีสีเพียง มีความไม่สอดคล้องกันคือ แต่น่าเสียดายที่ใน CSS และโหลด ตอนนี้สังเกตเห็นเป็นครั้งแรก วรรคสองจะเป็นสีแดง แต่ไม่สามเพราะผมเท่านั้น นำไปใช้ในชั้นเรียนของ "สำคัญ" สองคนแรกของสิ่งเหล่านั้น 

ดังนั้นในรหัสคุณมีความสามารถ เพื่อระบุได้อย่างแม่นยำมาก กับการเรียนที่คุณต้องนำมาใช้ แต่ในทั้งสองกรณีแจ้งให้ทราบล่วงหน้า การจัดเรียงของหลักการที่ดีการออกแบบ ที่ผมเอาเรื่องออกทั้งหมดของ ความสวยงามไปยังแฟ้ม styles.css ของฉัน จึงไม่มีสกปรกที่นี่ มีการกล่าวถึงสีแดงไม่ได้หรือ หันหน้าไปทางตัวหนาหรือขนาดตัวอักษรในแฟ้มนี้ แต่ฉันมีความหมาย, ความหมายลักษณะข้อมูลของฉันเป็น นี่คือบางส่วนข้อมูลที่สำคัญ นี่คือบางส่วนของข้อมูลที่สำคัญมากขึ้น นอกจากนี้ที่นี่เป็น "ครั้งแรก" ของข้อมูลที่สำคัญของฉัน ดังนั้น HTML คือทั้งหมดที่เกี่ยวกับการจัดเรียง แท็กตัวอักษรคำ และย่อหน้าและโครงสร้างในของคุณ หน้าเว็บที่มีคำแนะนำเล็ก ๆ น้อย ๆ เหล่านี้ถ้าคุณ จะให้คุณสามารถ อย่างใดใช้ประโยชน์จากการใช้ เทคนิคอื่น ๆ เช่น CSS ในลักษณะนี้ 

ดังนั้นในการตอบคำถามของวิกตอเรีย เราสามารถทำให้ข้อความที่ใหญ่กว่าในทางที่ มีวิธีการอื่น ๆ อีกมากมายเพื่อให้มี แต่ ตัวอักษร tag-- เปิดวงเล็บ "ตัวอักษร" - เป็นจริงหลายปี และนี่คือปัญหาที่เกิดขึ้น เกินไปกับอาศัยเฉพาะ ใน resources-- ออนไลน์ พวกเขามีแนวโน้มที่จะล้าสมัย และแน่นอนที่ถูกเลิก เพราะโลกตระหนัก สิ่งที่ไม่ "font-size = 7" หมายความว่าอย่างไร มันไม่ได้ และเพื่อให้เป็นเวลาหลายปีและ นี้ day-- หนึ่งด้าน ข้อสังเกตที่นี่ก็คือว่ามันเป็นจริง เจ็บปวดอย่างไม่น่าเชื่อบางครั้งยัง ในการพัฒนาเว็บไซต์สำหรับ เว็บเพราะไมโครซอฟท์ และ Google และ Mozilla และ คนอื่น ๆ มักจะไม่เห็นด้วยกับวิธีการ การตีความข้อกำหนดเช่น HTML 

มีกฎหมายเพื่อใช้ HTML คือว่า โดยทั่วไปกล่าวว่าสิ่งที่แต่ละแท็กหมายถึง แต่บางครั้งก็เหลือไป ดุลยพินิจการดำเนินงานของ ดุลยพินิจของ Microsoft และ Google และดังนั้นคุณจะบ่อยมาก เห็นในสิ่งที่เว็บไซต์ มีลักษณะแตกต่างบนเครื่องพีซี กว่ามันจะบน Mac และที่จริงเพราะ ในตอนท้ายของวัน, พวกเขาไม่ได้ทดสอบ ได้ดีบนทั้งสองแพลตฟอร์ม แต่มันก็ยังเพราะเหมาะสม คนฉลาดจะไม่เห็นด้วย และ บริษัท จะไม่เห็นด้วยและอื่น ๆ หนึ่งในความท้าทายของการเขียนโปรแกรม สำหรับเว็บหรือการออกแบบ สิ่งสำหรับเว็บ คือการเขียนเว็บไซต์ของคุณในทางที่ ที่ทำงานบนเว็บเบราเซอร์ทุก แต่แม้ที่ไม่มีเหตุผลใช่มั้ย? มีหลายรุ่นจำนวนมากดังนั้น เบราว์เซอร์ออกมีที่ในบางจุด นอกจากนี้คุณยังจะต้องทำให้สายการตัดสิน และคุณจะต้องตัดสินใจเป็น บริษัท โดยเฉพาะอย่างยิ่งสำหรับ e-Commerce สไตล์ เว็บไซต์ที่คุณกำลัง พยายามที่จะใช้ล่าสุดและยิ่งใหญ่ที่สุด เทคโนโลยีที่จะให้ผู้ใช้ดีจริงๆ ประสบการณ์. แต่เปอร์เซ็นต์ของผู้ใช้ของคุณบางคนอาจจะ ยังคงใช้ Internet Explorer 6 หรือ 7 หรือ 8 โดยเฉพาะอย่างยิ่งทั้งนี้ขึ้นอยู่กับ ประเทศที่พวกเขามาจาก 

และมักมากเลย ได้รับการพิจารณาเป็นบางสิ่งบางอย่าง เช่น "สถิติเว็บเบราว์เซอร์." และถ้าเราไป to-- เรามาดูวิกิพีเดีย และดูว่าขึ้นไปวันที่แผนภูมินี้คือ หากมีหนึ่ง ดังนั้นที่นี่คุณสามารถดู เบราว์เซอร์ที่จริง จะตามถึงเดือนธันวาคมปี 2015 ตามที่รัฐบาลสหรัฐ โครเมี่ยมที่ส่วนแบ่งการตลาด 42% ตามมา โดย IE ส่วนใหญ่ในการตั้งค่าขององค์กร หรือการตั้งค่าเครื่องคอมพิวเตอร์ของหลักสูตร ตามด้วย Firefox, แล้ว Safari แล้ว Opera ไม่ได้ ทำให้แผนที่ที่นี่ด้วยเหตุผลบางอย่าง และแล้วคนอื่น ๆ บางทีมันอาจจะอยู่ภายใต้การอื่น ๆ แต่มีปัญหามากขึ้นกว่าที่ is-- ขอดูว่าวิกิพีเดียยังมี รุ่นของเบราว์เซอร์ version-- 

Let 's go สถิติเบราว์เซอร์ IE แม้ที่ไม่เพียงพอ สถิติเบราว์เซอร์ รุ่นของฉัน ว่าจะไม่ได้รับสิทธิ ลองมาดูรุ่น ส่วนแบ่งการตลาดเบราว์เซอร์ ลองมาดูว่านี้ขึ้นมา ตกลง. ตอนนี้จะได้รับ เล็ก ๆ น้อย ๆ มีประโยชน์มากขึ้น ดังนั้นที่นี่แจ้งให้ทราบว่าเรามีทั้งหมด รุ่นต่างๆของเบราว์เซอร์ และพระเจ้าของฉันถ้าคุณ look-- Chrome 48, Chrome 47, Chrome 31 Chrome 45 ผมหมายถึงเบราว์เซอร์การปรับปรุงมากขึ้น และบางครั้งบางส่วนของการเปลี่ยนแปลงเหล่านั้น มีความสำคัญใน แง่ของการทำงาน และอื่น ๆ ในบางจุดที่ ผู้จัดการผลิตภัณฑ์หรือวิศวกร ต้องทำให้ decision-- คุณ รู้ว่าสิ่งที่มีเพียง 1% ของโลก ยังคงใช้ IE 7 ไปนรกกับพวกเขา เราเพียงแค่ไม่ได้ไป สนับสนุนเบราว์เซอร์ที่ และสิ่งที่ไม่ได้หมายความว่าจะไม่สนับสนุน? มันอาจหมายความว่าปุ่ม ไม่ทำงานบนหน้าเว็บของคุณ หรืออาจหมายถึง การจัดรูปแบบเป็นสมบูรณ์ออก หรือคุณอาจจะต้องทำ ที่สายการตัดสินเดียวกัน ในวันนี้โทรศัพท์มือถือที่เรา ไม่ได้ไปสนับสนุน iOS 5 ได้อีกต่อไป ดังนั้นคนที่เพิ่งมีการปรับรุ่น หรือเราจะไม่ให้การสนับสนุน Cupcake บนระบบปฏิบัติการ Android สำหรับอุปกรณ์ Android, เพราะเป็น world-- เป็น โลกเทคโนโลยีต้องการที่จะก้าวไปข้างหน้า ชนิดของมันต้องการที่จะลาก โลกก​​ับมันเพื่อที่ว่าพวกเขาไม่ได้ มีจะยังคงเป็น เข้ากันได้ย้อนหลังเพื่อให้พวกเขา สามารถนำเสนอคุณสมบัติใหม่และดี นี่เป็นหนึ่งในเหตุผลที่ ทำไมหลาย บริษัท จะกลิ้งออก อัปเดตอัตโนมัติและการเรียงลำดับของการบังคับ รุ่นล่าสุดของซอฟแวร์ให้กับพวกเรา และแม้กระทั่ง บริษัท เช่น Apple จะเรียงลำดับของ บังคับให้คุณเกือบหรือบังคับ คุณในแง่ของกลไกตลาด ที่จะซื้อโทรศัพท์ใหม่เพราะพวกเขาเพียงแค่ จะไม่ปรับปรุงโทรศัพท์เก่าของคุณอีกต่อไป เพื่อให้คุณพลาดโอกาสในการ ใหม่ล่าสุดและคุณลักษณะที่ยิ่งใหญ่ที่สุด เพราะมันเป็นค่าใช้จ่ายให้กับพวกเขาเป็น บริษัท จะรักษาที่มีอายุมากกว่าเนื้อหา รุ่นที่ด้อยกว่าของซอฟต์แวร์ แต่ผลกำไรเป็นที่ เรายังต้องทนทุกข์ทรมานนี้ด้วยเช่นกัน 

ดังนั้นลองมาดูที่เพียง สองสิ่งสุดท้ายที่นี่ Let 's เราะรวดเร็วจริงบางส่วนของ ผู้กระสุนอื่น ๆ ถ้าอยากรู้อยากเห็น ดังนั้นถ้าคุณกำลังพยายามที่จะ ตัวอย่างเช่นตำแหน่ง ข้อความในด้านที่แตกต่างกันของ หน้าผมจะไปทำวิธีที่รวดเร็วหนึ่ง แต่มีความแตกต่างกัน วิธีการทำเช่นนี้ ให้ฉันไปข้างหน้าและ eliminate-- ลดความซับซ้อนนี้ดังนี้ ผมขอกลับไปของฉัน ง่ายย่อหน้าที่เรียบง่าย ผมขอกลับไป styles.css ของฉัน และฉันแค่จะใช้ simple-- ที่คุณอาจได้เห็นใน Google หรือเรียกคืนจาก earlier-- text-align ขวา และโหลดหน้านี้ ตอนนี้ทุกอย่างดูเหมือนว่า จะต้องมีสิทธิชิด ที่คุณอาจจะเห็นในค่าใช้จ่ายที่นี่ 

เราสามารถทำให้มันดูเล็ก ๆ น้อย ๆ หนังสือที่ชอบและเราสามารถพูดว่า "ปรับ" และโหลด ตอนนี้มันเป็นเรื่องดีและตารางทั้งสอง ด้านซึ่งเป็นชนิดของความสุข เป้าหมายอีกประการหนึ่งที่เรามีที่นี่ ก็เปลี่ยนสีของข้อความ ดังนั้นเราจึงเห็นว่ามีข้อความสีแดงของฉัน และตอนนี้เพิ่มปุ่มสำหรับฟอร์ม ดังนั้นทำไมเราไม่พยายามที่จะทำตรงนี้หรือไม่? แต่แรกให้ฉันไปที่เว็บไซต์ที่ ส่วนใหญ่ของเราใช้ทุก day-- Google และให้ดูที่ วิธีการที่ Google ใช้งานได้จริง แต่ฉันจะทำเช่นนี้ แรกให้ฉันทำมัน in-- ครับ ให้ฉันไปที่ Google ครั้งแรก ฉันจะต้องไป เข้าสู่การตั้งค่า Google เพราะผมต้องการที่จะปิดการใช้งาน สิ่งที่เรียกว่าผลทันที 

ดังนั้นคุณอาจจะสังเกตเห็นใน เหล่านี้ของ Google days-- ให้ฉันกลับไป และเปิดการทำงานนี้ ดังนั้นถ้าฉันเริ่มต้นการค้นหา สำหรับ "แมว" เช่นนี้ แจ้งให้ทราบว่าไม่เพียง แต่ ฉันได้รับอัตโนมัติสมบูรณ์ขึ้น ด้านบนทั้งหมดในทันทีที่หน้าตัวเอง ดูเหมือนว่าจะมีการเปลี่ยนแปลงอย่างรวดเร็วเช่นกัน และที่ Google โดยใช้ภาษา เรียกว่า JavaScript พยายามที่จะเป็นประโยชน์ แต่น่าเสียดายที่มันชนิด ของ messes up การสนทนาของเรา ของสิ่งที่เกิดขึ้นจริง ใต้ฝากระโปรงที่นี่ ดังนั้นฉันเพียงแค่ชนิดของได้อย่างรวดเร็ว ปิดผลทันที และฉันจะคลิกบันทึก และตอนนี้ฉันกำลังจะไปเปิด ที่แถบเครื่องมือวินิจฉัยที่ฉัน ให้เปิดภายใต้แท็บเครือข่าย ดังนั้นขอให้ทำเช่นนี้ ให้ me-- whoops-- เลื่อนนี้ลงเล็กน้อย และแจ้งให้เราค้นหา "แมว". 

และตอนนี้ notice-- จริง นี้เป็นโอกาสที่ดี เพื่อหารือเกี่ยวกับสักครู่ แจ้งให้ทราบขณะที่ผม type-- หยุดมัน หยุดนะ. ตกลง. แจ้งให้ทราบขณะที่ผมพิมพ์ตัวอักษร C, ดูด้านล่างของหน้าจอ A- T- เอสอะไรด้านล่าง ของหน้าจอนี้แท็บเครือข่ายของฉัน แนะนำที่เกิดขึ้นในแต่ละ เวลาที่ฉันพิมพ์ตัวอักษรหรือไม่? แต่น่าเสียดายที่กบเป็นอย่างมาก เสียสมาธิวันนี้หรือแชมร็อก หรือสิ่งที่เขาเป็น สิ่งที่เกิดขึ้นในแต่ละครั้งที่ผมพิมพ์? และแจ้งให้เราล้าง กันชนและพิมพ์อีกครั้ง ขออภัย So-- ทุกครั้งที่ผมพิมพ์ตัวอักษร, C- A- T-- เพื่อให้แถวใหม่อย่างเห็นได้ชัดช่วยให้ปรากฏ อะไรแต่ละแถวแทน ขึ้นอยู่กับสิ่งที่เราได้เห็นและพูดคุยกัน ป่านนี้? ผู้ชม: ค้นหา? เดวิดเจลัน: การค้นหาหรือ อื่น ๆ ทั่วไป, การร้องขอ HTTP จากเบราว์เซอร์ของฉันไปยังเซิร์ฟเวอร์ ดีทำไมเป็นเบราว์เซอร์ของฉันทำ HTTP ขอให้ทุกครั้งที่ผมพิมพ์ตัวอักษรหรือไม่? 

ผู้ชม: [ไม่ได้ยิน] เดวิดเจลัน: ใช่มันให้ ฉันเหล่านี้ผลอัตโนมัติสมบูรณ์ เช่นเดียวกับที่ทำเหล่านี้ ผลการค้นหามาจากไหน? ดีทุกครั้งที่ผมพิมพ์ ตัวอักษร Google จะส่งเพิ่มเติม และการเพิ่มขึ้นของ คำว่าฉันพิมพ์ ทำไม? เพราะพวกเขาต้องการให้ฉัน ดีและดีกว่าข้อเสนอแนะที่ดีกว่า รายการของคำแนะนำสำหรับสิ่งที่คำ ฉันพยายามที่จะดำเนินการจริง ดังนั้นนี่คือการพูดทุกตัวอักษร ตัวอักษรที่คุณพิมพ์ลงใน Google จะถูกส่งไปในท้ายที่สุด จำนวนมาก แต่ยังบางครั้งหนึ่ง ได้ตลอดเวลาเพื่อที่จะดำเนินการ คุณสมบัติเหล่านี้อัตโนมัติสมบูรณ์เมื่อ ข้อมูลเป็นของหลักสูตรบนเว็บ 

ตอนนี้ลองมาดูสิ่งที่จริง เกิดขึ้นเมื่อฉันคลิกค้นหาของ Google และจากนั้นเราจะยกระดับตัวเองนี้ ดังนั้นถ้าฉันเลื่อนลงมาตอนนี้ไปมาก คำขอแรกที่เพิ่งเกิดขึ้น สังเกตต่อไปนี้ มันถูกส่งไปนานพอสมควร URL-- https://www.google.com/search? และจากนั้นทั้งกลุ่มของสิ่ง ลองดูตอนนี้จริง ในเบราว์เซอร์แท็บตัวเอง ขอได้รับการกำจัดของแถบเครื่องมือที่นี่ นี่คือหน้าของผลการค้นหา และแจ้งให้ทราบ URL นี้ ตอนนี้คุณอาจจะสามารถคาดเดา สิ่งที่เกิดขึ้นที่นี่ในส่วนหนึ่ง ดังนั้นครั้งแรกของทุกคำนิยาม นี้เห็นได้ชัดว่าเป็นปลายทาง ที่การส่งแบบฟอร์ม ดังนั้นเมื่อผมพิมพ์ลงใน คำว่า "แมว" และกด Enter, เห็นได้ชัดว่า Google ส่ง ป้อนข้อความของฉันไปยัง URL นี้ ที่ผมได้เน้น มีเฉือนค้นหา ปรากฎใน URL อะไรที่ ที่เกิดขึ้นหลังจากเครื่องหมายคำถามคือ ในขณะที่เราพูดว่าคู่ค่าคีย์ ที่ถูกพิมพ์ลงในแบบฟอร์มหรืออย่างใด ส่งจาก เบราว์เซอร์ไปยังเซิร์ฟเวอร์ 

ดังนั้นเวลาที่คุณพิมพ์การป้อนข้อมูล ลงในแบบฟอร์มบนเว็บ และก็ส่งไปตามที่เราได้ ได้คุยผ่านทางได้รับ หนึ่งในเหล่านี้เสมือน ซองจดหมายเนื้อหา ที่ envelope-- ใช่เก็บ ได้รับการยัดร่างกาย เข้าไปในซองจดหมายในชั้นเรียน วันนี้ แต่เทคโนโลยี มันจริงใส่ใน URL ดังนั้นในความเป็นจริงให้ฉันลอดผ่านนี้ ที่คุณเห็นการป้อนข้อมูลของผู้ใช้? ที่คุณเห็นบางสิ่งบางอย่าง ที่ตัวผมเองพิมพ์ขึ้นที่นี่? ใช่ว่า "แมว". ขวา? เพื่อให้ฉันกลั่นนี้ เป็นสิ่งที่ง่าย ฉันจะลบทุกอย่างเกี่ยวกับ URL นี้ที่ฉันไม่เข้าใจ และฉันแค่ไปที่จะออกจาก มันเป็น this-- / search? q = แมว เราจะดูว่า Q มาจากในช่วงเวลาที่ แต่ที่รู้สึกเหมือนขั้นต่ำ ปริมาณของข้อมูลที่ฉันมีให้ และตอนนี้ฉันกำลังจะไปกด Enter และแจ้งให้ทราบก็ยังคงทำงาน เรายังคงได้รับกลับมาทั้งกลุ่มของแมว ดังนั้น Google เป็นนักเล่น กว่านี้วันนี้ มันเป็นปี 2016 ไม่ได้ 1999 ดังนั้นจึงมีสิ่งอื่น ๆ ที่ของฉัน เบราว์เซอร์จะส่งไปยังเซิร์ฟเวอร์ แต่นี้เป็นอย่างน้อยที่สุด ทั้งหมดที่จำเป็น 

เกิดอะไรขึ้น? ดีแรกให้ฉันไปข้างหน้าและไป กลับไป Cloud9 และแจ้งให้เราไปข้างหน้า และปิดแท็บของฉันก่อนหน้านี้ และฉันจะทำเช่นนี้ของฉัน เพียงแค่ตัวเองสักครู่ ฉันจะไปข้างหน้า และสร้างไฟล์ใหม่ และฉันจะบันทึกเป็น google.html และฉันจะมาก quickly-- ฉันจะขโมยจริง บางส่วนของข้อความนี้ก็เพื่อประหยัดเวลา ฉันจะไปวางในที่นี่ ฉันจะไม่รำคาญกับ stylization ใด ๆ ในเวลานี้ เรากำลังจะเรียกสิ่งนี้ว่า "My Google." และฉันจะได้รับการกำจัด ของทุกอย่างในร่างกาย และฉันจะทำต่อไปนี้ ผมขอซูมเข้า รูปแบบ action-- และที่ผมพูดสั้น ๆ earlier-- whoops-- เป็นผมสั้น กล่าวก่อนหน้านี้การกระทำของการให้ รูปแบบเป็นที่ที่คุณจะส่งข้อมูลไปยัง ดังนั้น google.com/search และวิธีการที่ฉันต้องการใช้ สามารถเป็นหนึ่งในสองสิ่ง มันสามารถเป็นได้ทั้ง "ได้รับ" ในขณะที่เราให้ พูดคุยปรึกษาหรืออาจจะ "โพสต์". สำหรับตอนนี้พื้นฐาน ความแตกต่างคือถ้าคุณใช้ "ได้รับ" ข้อมูลทั้งหมดที่ว่า ผู้ใช้งานจะได้รับส่งใน URL 

นั่นคือที่ดีสำหรับสิ่งที่ต้องการค้นหา เครื่องมือและโปรแกรมอื่น ๆ ไม่กี่ แต่ในสิ่งที่สถานการณ์จะ คุณไม่ต้องการที่จะกรอกแบบฟอร์ม และมีข้อมูลที่จบขึ้น URL เช่นในแถบที่อยู่ของเบราว์เซอร์ของคุณ? สิ่งที่ชนิดของรูปแบบการทำ you-- ผู้ชม: [ไม่ได้ยิน] เดวิดเจลัน: ใช่เหมือนอะไร? ผู้ชม: รหัสผ่าน เดวิดเจลัน: ใช่เพื่อให้คุณเข้าสู่ระบบ ในที่ Facebook หรือเว็บไซต์บาง นั่นคือการป้อนข้อมูลของผู้ใช้จาก รูปแบบกล่องข้อความ แต่คุณอาจไม่ต้องการมัน การแสดงขึ้นใน URL เบราว์เซอร์ ทำไม? ฉันหมายความว่าอาจจะมีบางส่วน ผลกระทบการรักษาความปลอดภัยบนเครือข่าย แต่ชอบ more-- เพิ่มเติมเพียงสิ่งที่ถ้า เพื่อนร่วมห้องของคุณสำคัญอื่น ๆ ของคุณ เด็ก ๆ ของคุณคู่สมรสของคุณดู ผ่านประวัติศาสตร์เบราว์เซอร์ของคุณหรือไม่ มีสิทธิรหัสผ่านของคุณ มีในประวัติศาสตร์ของเบราเซอร์ แต่นั่นไม่ได้รู้สึกเหมือนการออกแบบที่ดี หรือมากขึ้นทางเทคนิค สมมติว่าคุณกำลังพยายาม การอัปโหลดภาพไปยัง Flickr หรือ Facebook หรือ wherever-- ที่เป็นผู้ใช้ป้อนแม้ว่า มันเป็นเรื่องเล็ก ๆ น้อย ๆ interesting-- วิธี ฉันจะอัดภาพในแถบ URL แล้ว? คุณชนิดของการจัดเรียงของไม่ได้ คุณสามารถชนิดของ แต่จริงๆผมยากกด ที่จะคิดว่าทำ ดังนั้นผมจึงต้องมีวิธีการอีก การอัปโหลดภาพไปยังเว็บไซต์ และวิธีการอื่น ๆ เรียกว่า "โพสต์". แต่ตอนนี้เราก็จะพูดคุยเกี่ยวกับ "ได้รับ" ซึ่งเป็นที่เรียบง่ายของทั้งสอง มันก็ทำให้ทั้งหมด ผู้ใช้ป้อนใน URL 

ดังนั้นนี่คือรูปแบบที่ผมกำลังสร้าง ฉันต้องการการป้อนข้อมูล และคุณรู้อะไรไหม ฉันจะใช้การคาดเดาที่นี่ ฉันจะจำของฉัน การป้อนข้อมูล "Q" สำหรับ "แบบสอบถาม". และผมคิดว่านี่เป็นหนึ่งใน การออกแบบเดิมบางทีจาก 1999 แล้วพิมพ์ของท่านนี้ เป็นเพียงการไปเป็น "ข้อความ". แล้วฉันจะต้องป้อนข้อมูลอื่น ที่ไม่จำเป็นต้องเป็นชื่อที่เราจะเร็ว ๆ นี้ ดูประเภทของซึ่งคือ "ส่ง". และนี้เป็นไปได้ ให้ฉันปุ่มพิเศษ และที่มัน 

เพื่อให้ฉันไปข้างหน้าและบันทึกไฟล์นี้ ฉันจะกลับไปของฉัน เบราว์เซอร์และไป google.html เข้าสู่ และมันเป็นชนิดของเบาบาง ที่จะพูดน้อย แต่ให้ฉันไปข้างหน้า และค้นหา "แมว". และแจ้งให้ทราบผมในปัจจุบัน ที่ URL นี้ Cloud9 แต่ช่วงเวลาที่ฉันคลิกที่นี้ ที่คุณหวังว่าฉันจะจบลง? 

ผู้ชม: Google 

เดวิดเจลัน: Google ดังนั้นขอให้คลิกส่ง และแน่นอนฉันได้อีกครั้งใช้งาน Google ขวา? มันเป็นเรื่องง่าย มันมีน้ำหนักเบา ผมหมายถึงรหัสของฉันเป็นอย่างชัดเจนดีกว่า พวกเขาจากการรับประทานอาหารที่เราเห็นก่อนหน้านี้ และคุณรู้อะไรไหม ฉันจะเครื่องเทศนี้ขึ้นเล็กน้อย ผมไม่ได้พูดถึงก่อนหน้านี้ มีแท็กเช่น H1, สำหรับเดินทาง 1, หัวข้อที่สำคัญที่สุดในหน้าเว็บ "My Google" ฉันจะเรียกสิ่งนี้ว่า ผมขอโหลด มันมองดีขึ้นเล็กน้อยแล้ว และที่จริงแล้วคุณรู้อะไรไหม ฉัน already-- ฉันโกหก ผมบอกว่าผมไม่ได้ไปรูปแบบนี้ แต่ฉันจะรูปแบบนี้เหมือนก่อน และร่างกายของฉันเป็นไปได้, สมมติว่า text-align ศูนย์ มันมองมากขึ้นเช่น Google อยู่แล้ว 

ฉันต้องการแบ่งบรรทัดแม้ว่า สำหรับปุ่มส่งที่ และมันจะเปิดออกคุณ สามารถใช้ย่อหน้า หรือคุณสามารถมากขึ้นอย่างแท้จริงเพียงแค่พูดว่า ให้ฉันแบ่งบรรทัด here-- แท็ก br และถ้าผมโหลดนี้ตอนนี้ก็ไปที่นั่น มันเป็นเรื่องเล็ก ๆ น้อย ๆ ที่น่าเกลียดดังนั้นฉัน สามารถทำแบ่งบรรทัดหลาย แต่ขอไม่ได้รับความโลภมากเกินไปนี่ ดังนั้นตอนนี้เรามาดูว่ามันเหมาะกับ "สุนัข". ดูเหมือนว่าการทำงานสำหรับ "สุนัข" เช่นเดียว ดังนั้นสิ่งที่น่าสนใจ Takeaway ที่นี่? One-- ไม่ได้ก้าวกระโดดครั้งใหญ่ไป แนะนำแท็กอีกไม่กี่ เช่นแท็กรูปแบบในแท็กการป้อนข้อมูล แต่พื้นฐาน คือทุกสิ่งที่เรากำลังทำ จะใช้ประโยชน์จากความเข้าใจของเรา ของ HTTP และความเป็นจริง รูปแบบที่เปลี่ยนแปลงในท้ายที่สุด สิ่งที่อยู่ใน URL ของเบราว์เซอร์ และเพื่อให้ดังนั้นเราจึงสามารถ กลไกให้การป้อนข้อมูลไปยังเซิร์ฟเวอร์ โดยการทำให้รูปแบบ HTML และรู้ ว่าเซิร์ฟเวอร์เข้าใจ HTTP, เช่นเดียวกับร่างกายของเราเข้าใจเช่น เขย่ามือของเราแล้วโปรโตคอลเดียวกัน และเพื่อให้เราได้รับกลับมาตอบสนอง ในท้ายที่สุดว่าเราคาดหวัง 

ดังนั้นขอให้พยายามที่จะทำอย่างใดอย่างหนึ่ง สิ่งสุดท้ายที่ตอนนี้มีมือถือ และฉันจะ make-- ฉันจะเพิ่ม รหัสนี้เพื่อภาพนิ่ง ดังนั้นหากคุณต้องการให้คนจรจัดคุณ แน่นอนสามารถใช้มันมาจากที่นั่น แต่ฉันจะไป ข้างหน้าและทำสิ่งหนึ่ง ฉันจะไปข้างหน้าและ เปิด Page-- ดัชนีของฉัน หน้าสวัสดีฉันเป็นมาก่อนซึ่ง มีจำนวนมากของข้อความมารยาทละตินนี้ หรือข้อความภาษาละตินหมายและ has-- มันมีลักษณะเช่นนี้ในขนาดตัวอักษรนี้ แต่ให้ฉันไปข้างหน้าและทำเช่นนี้ ฉันจะไปลงใน Cloud9 และคุณไม่ต้องทำตามขั้นตอนนี้ ฉันเพิ่งจะทำมันเอง ฉันจะคลิกแชร์ และนี่คือคุณลักษณะ เพียงของ Cloud9 โดย ฉันสามารถทำให้ประชาชนสภาพแวดล้อมของฉัน 

และเพียงเพื่อประโยชน์ของ สาธิตให้ฉันทำเช่นนี้ ฉันจะทำให้ประชาชนใบสมัครของฉัน แจ้งให้ทราบก็เตือนฉัน am ผมแน่ใจว่าผมต้องการที่จะทำเช่นนี้ เพราะนี้เป็นไปเพื่อให้ทุกคน ในโลกที่ไม่ว่าจะอยู่ที่นี่ตอนนี้ หรือดูวิดีโอในภายหลัง อินเทอร์เน็ตสามารถมองเห็นสิ่งที่ฉันเห็น แต่ที่ตกลง ฉันจะพูดว่า "ทำ." และแจ้งให้เราขอแนะนำให้คุณถ้าผมทำ นี้ correctly-- ให้ฉันทดสอบครั้งแรก ไปข้างหน้าถ้าคุณไม่ mind-- ในเบราว์เซอร์บนคอมพิวเตอร์ของคุณ ไปที่ URL นี้และหวังว่า คุณจะเห็นข้อความภาษาละตินของฉัน และต้องมีความชัดเจนก็ ทำงานไม่ได้อยู่บนแล็ปท็อปของฉัน มันอยู่ในระบบคลาวด์ มันอยู่ใน Cloud9 แท้จริง แต่ ฉันได้ทำให้ประชาชนในพื้นที่ทำงานของฉัน เพื่อให้ทุกคนบนอินเทอร์เน็ต สามารถเข้าถึงหน้าบ้านของฉันละติน 

ไปที่ URL เดียวกันบน โทรศัพท์ของคุณถ้าคุณสามารถ ถ้ามันจะเสียค่าใช้จ่าย แต่คุณ ก็สามารถมองข้ามไหล่ ผู้ชม: [ไม่ได้ยิน] เดวิดเจลัน: ฉันขอโทษ? ผู้ชม: [ไม่ได้ยิน] เดวิดเจลัน: เพียงแค่คำภาษาละติน นั่นคือทั้งหมดที่ แต่นั่นคือสิ่งที่คุณควรจะเห็น 

ผู้ชม: ใช่ เดวิดเจลัน: ใช่ ใช่. ตกลง. ดังนั้นผมจึงสามารถถือได้ของคุณ โทรศัพท์เพื่อรอสักครู่? ดังนั้นหวังว่าถ้าคุณเข้าถึง มันควรมีลักษณะไม่สามารถอ่านได้เกือบ มัน still-- ฉันหมายความว่ามันเป็น อ่านไม่ได้เพราะภาษาละติน แต่มันก็ยังไม่สามารถอ่านได้ สำหรับสิ่งที่เหตุผลอื่น? เช่นเดียวกับสิ่งที่ displeases คุณเกี่ยวกับเรื่องนี้? ผู้ชม: มันมีขนาดเล็ก เดวิดเจลัน: มันเป็นซุปเปอร์ขนาดเล็กสุด ดังนั้นวิธีที่เราสามารถแก้ไขปัญหานี้อย่างไร ก็สุดขนาดเล็กสุด บนโทรศัพท์มือถือของรัฐวิกตอเรีย และถ้าคุณได้ดึง มันขึ้นมาด้วยตัวเองอาจจะ เล็ก ๆ บนโทรศัพท์ของคุณเป็นอย่างดีจนกว่าคุณ มีการตั้งค่าเปิดใช้งานการเข้าถึง นั่นอะไร? คุณก็สามารถหยิกและ ซูมซึ่งเป็นที่สามารถทำงานได้ แต่แล้วคุณจะเห็นเพียง คำไม่กี่คำในเวลา ดังนั้นรอสักครู่ ฉันรู้วิธีการแก้ไขปัญหานี้ ขวา? ฉันสามารถใช้ CSS และฉันจะเปลี่ยน ขนาดตัวอักษรจาก 12 จุด 24 จุด แต่ผลข้างเคียงจากการที่ แน่นอนเป็นไปได้ตอนนี้ บนเดสก์ทอปหรือแล็ปท็อป ตอนนี้ข้อความที่เป็นสองเท่าของขนาดใหญ่ และอื่น ๆ ชนิดของมันจะดี ที่จะแยกแยะระหว่างอุปกรณ์ และมันจะเปิดออกมี มีวิธีการทำที่ มีหลาย วิธีการที่แตกต่างกันในความเป็นจริง โดยใช้ CSS และคุณสมบัตินักเล่น ว่าเราจะไม่ไปลงในรายละเอียดมาก คุณเป็นหลักสามารถสอบถาม เบราว์เซอร์และพูดว่า ถ้าหน้าจอของคุณมีขนาดเล็กกว่านี้ จำนวนพิกเซลใช้ขนาดตัวอักษรนี้ ถ้าหน้าจอของคุณมีขนาดใหญ่กว่านี้ จำนวนพิกเซลใช้ขนาดตัวอักษรอื่น ๆ 

คุณสามารถแม้แต่นักเล่นยังคง หากคุณเคยเข้าเยี่ยมชม หน้าเว็บที่บนเดสก์ทอป มีเมนูขนาดใหญ่อาจจะออกไป ด้านข้างแล้วเนื้อหาทั้งหมด เป็นไปทางด้านข้างของที่ menu-- ว่าเป็นชนิดของกระบวนทัศน์ร่วมกัน เมนูด้านซ้ายเนื้อหา ทางด้านขวาหรือในทางกลับกัน ไม่ได้จริงๆทำงานบนมือถือของคุณเมื่อ หน้าจอเป็นเพียงแค่นี้จำนวนพิกเซลกว้าง เพื่อร่วมกันเพิ่มเติมเกี่ยวกับโทรศัพท์มือถือคือ เมนูของคุณก็จะได้รับ ทรุดตัวลงและคุณจะต้อง คลิกที่ปุ่มที่จะเห็นมัน หรือเว็บไซต์จะนำเมนู ข้างต้นนั้นและใส่เนื้อหาด้านล่างนี้ค่ะ และคุณสามารถใช้เหล่านี้ สิ่งที่อยู่ในหลายวิธีที่มากเกินไป คุณสามารถขอให้โปรแกรมเมอร์ของคุณ เดี๋ยวก่อนทีมตลอดเวลา คุณเห็นการร้องขอ HTTP จาก Android อุปกรณ์อุปกรณ์ Microsoft ของ Google อุปกรณ์อุปกรณ์ Apple ใช้นี้ ขนาดตัวอักษรและใช้รูปแบบเมนูนี้ หรืออื่น ๆ ที่ใช้รูปแบบเริ่มต้นที่ใหญ่กว่านี้ 

ตอนนี้ใช้สิ่งที่ เทคนิคพื้นฐานในวันนี้ วิศวกรสามารถใช้ ที่จะรู้ว่าไม่ว่าจะเป็น มี iPhone, โทรศัพท์ Android, แล็ปท็อป เยี่ยมชมสก์ท็อปเซิร์ฟเวอร์ของ บริษัท หรือไม่ ประเด็นที่พวกเขาได้รับข้อมูลที่? 

ผู้ชม: หัว? 

เดวิดเจลัน: ใช่ส่วนหัวของ HTTP เพื่อให้ทุกคำขอ HTTP มาจาก ลูกค้าของพวกเขาไปยังเซิร์ฟเวอร์ของพวกเขา รวมถึงภายในเสมือนที่ ซองจดหมายทั้งกลุ่ม ของส่วนหัว HTTP ซึ่งหนึ่งในนั้นคือ เบราว์เซอร์และระบบปฏิบัติการ แม้ถ้าคุณสนใจที่จะ ระดับของรายละเอียดที่ ตอนนี้มันเป็นความลับสตริงมอง แต่ มีอยู่ซอฟต์แวร์ที่จะเพียงแค่ ลดความซับซ้อนนั้นและคุณก็สามารถขอ ในการเขียนโปรแกรม code-- PHP, Java, C ++ whatever-- สิ่งที่โทรศัพท์เป็น this-- สิ่งอุปกรณ์ที่เป็นผู้ใช้รายนี้ใช้? และจากนั้นคุณสามารถพูดได้แสดงให้พวกเขานี้ รุ่นของเว็บไซต์ถ้าหากมันเป็นโทรศัพท์ แสดงให้พวกเขารุ่นนี้ เว็บไซต์ถ้าเป็นแล็ปท็อปหรือคอมพิวเตอร์ตั้งโต๊ะ แต่คุณไม่จำเป็นต้อง ความซับซ้อนด้านเซิร์ฟเวอร์ คุณสามารถทำได้แม้กระทั่งการที่ง่ายที่สุดของสิ่งที่ 

ฉันจะทำเช่นนี้ ฉันจะไปข้างหน้าเข้า สภาพแวดล้อม Cloud9 ของฉัน และฉันจะเพิ่มแท็ก ที่คุณเห็นใน Google ก่อน มันเรียกว่าเมตาแท็ และฉันไม่เคยจำได้ว่าหนึ่งในนี้เพื่อให้ ฉันจะถ่ายได้ที่นี่ ชื่อ Meta = "วิวพอร์ต" และจากนั้น เนื้อหา = "width = ความกว้างของอุปกรณ์ intital ขนาด = 1 "และที่มัน 

ดังนั้นมันจึงเป็นอย่างดีอาจจะมี เหมือนคาถามนต์ขลัง มันไม่ได้เป็นสิ่งที่ชัดเจน แต่นี้มี บางสิ่งบางอย่างจะทำอย่างไรกับวิวพอร์ต และวิวพอร์ตเป็นเพียงร่างของการให้ หน้าเว็บภูมิภาคสี่เหลี่ยมที่ กำหนดมากที่สุดของหน้า และนี่เป็นเพียงการบอก เบราว์เซอร์ที่คุณรู้ว่าอะไร? ทำให้ความกว้างของหน้านี้ ได้อย่างมีประสิทธิภาพเท่ากับความกว้างของอุปกรณ์ ในคำอื่น ๆ ไม่คิดว่า คุณมีการเรียงลำดับของพื้นที่ไม่ จำกัด สมมติคุณมีเพียงเท่า พื้นที่เป็นอุปกรณ์ที่ตัวเองเป็นใหญ่ และดังนั้นตอนนี้ถ้าผมโหลดหน้านี้ใหม่ ในเบราว์เซอร์ของฉันฉันไม่เห็นการเปลี่ยนแปลง แต่ถ้าฉันไม่ correctly-- นี้และ ให้ฉันข้าม fingers-- ของฉันถ้าคุณทุกคน โหลดโทรศัพท์ของคุณคุณ เห็นการเปลี่ยนแปลงที่น่าสนใจ? ใช่เป็นปัจจุบันผู้ 

ผู้ชม: [ไม่ได้ยิน] เดวิดเจลัน: ใช่ ตกลง. ดังนั้นเนื้อหาที่อ่านได้มากขึ้นตอนนี้หรือไม่ ยังมีขนาดเล็กเพื่อความเป็นธรรม แต่ไม่ได้ จึงเป็นขนาดเล็กที่สุดเท่าที่จะเป็นไม่สามารถจัดการได้ และแน่นอนฉันสามารถแทนที่นี้ เพิ่มเติมด้วย CSS หรือบนฝั่งเซิร์ฟเวอร์ แต่มากขึ้นสิ่งที่คุณกำลัง เห็นเป็นคุณสมบัติมากขึ้น ที่เพิ่มเข้ามา environments-- ฝั่งไคลเอ็นต์ จาวาสคริปต์ที่เราจะพูดถึง ในวันพรุ่งนี้, CSS และ HTML-- ดังนั้น ว่าทุกคำสั่งเหล่านี้ สามารถทำได้บนไคลเอนต์ เพื่อให้เป็นไปรำคาญ เซิร์ฟเวอร์มากน้อยและไม่ได้ ที่จะมีการให้ทันกับการสำหรับ ตัวอย่างเช่นการโจมตีอย่างต่อเนื่อง ของระบบปฏิบัติการใหม่ รุ่นรุ่นเบราว์เซอร์ใหม่ คุณก็สามารถปล่อยให้เบราว์เซอร์ ขออุปกรณ์วิธีการใหญ่เป็นคุณ แล้วทำให้ค่อนข้างตรรกะ การตัดสินใจขึ้นอยู่กับว่า แต่เราจะเห็นโอกาสมากขึ้น สำหรับการตัดสินใจเชิงตรรกะ วันพรุ่งนี้ในบริบท ของการเขียนโปรแกรมภาษา 

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

มีคำถามอะไรไหม? ดีให้ฉันเสนอสอง โอกาสในการเป็นตัวเลือกสำหรับการบ้าน หนึ่ง is-- Cloud9 เหล่านี้ บัญชีจะไม่หมดอายุ คุณสามารถใช้ พวกเขาไปกับคนจรจัด มันเป็นระดับของการให้บริการฟรี ตระหนักดีว่าหากเมื่อมีการสร้าง พื้นที่ทำงานของคุณคุณทำให้มันเป็นที่สาธารณะ ที่ไม่ได้หมายความว่าทุกคนในที่ อินเทอร์เน็ตสามารถมองเห็นสิ่งที่คุณกำลังพิมพ์ ดังนั้นอาจจะแค่พิจารณา ไม่อายตัวเอง ถ้าคุณกำลังวางเว็บแรกของคุณ หน้าออกมีต่อสาธารณชนโดยไม่ได้ตั้งใจ แต่ไม่มีใครจะไป รู้ที่จะมองมีอยู่แล้ว 

และ two-- ให้ฉันโยน ขึ้น URL นี้เช่นกัน โดยเฉพาะอย่างยิ่งถ้าคุณเดินเข้ามาในวันนี้ เล็ก ๆ น้อย ๆ ที่สะดวกสบายน้อยกว่าคนอื่น ๆ ไม่แน่ใจว่าทั้งหมดนี้สิ่งที่หมายถึง ตระหนักดีว่ามากขึ้นของวิดีโอนี้ ซึ่งเป็นทั้งเป็นวิธีที่ดีที่จะหลับ และยังจะหัวเราะในขณะที่ การทำเช่นนี้นอกจากนี้ยังมี จำนวนมากที่น่าสนใจ societally และการอภิปรายที่เกี่ยวข้องการรักษาความปลอดภัย ในนั้นจากจอห์นโอลิเวอร์ แม้ว่านักแสดงตลก 

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