[MUSIC CHƠI] DAVID Malan J: Đây là CS50 và đây là khởi đầu của tuần thứ 7. Vì vậy, chào mừng trở lại. Và bạn có thể nhớ lại rằng trong vấn đề thiết lập bốn, đã có một chút của một scavenger hunt đối với một số giải thưởng tuyệt vời đó sau khi bạn khôi phục các bức ảnh của Nhân viên ở đây và ở New Haven, bạn đã được thử thách để tìm càng nhiều những nhà khoa học máy tính như bạn có thể. Và chúng tôi đã có một toàn bộ bó đệ trình. Nghĩ rằng tôi muốn chia sẻ một vài với bạn ở đây ngày hôm nay. Và chúng tôi sẽ gửi tất cả các tuyến. Nhưng đặc biệt, tôi muốn hút sự chú ý của bạn đối với: cũng một, Sam đã ở khá một vài trong số họ thường đặt ra như thế này. Nhưng có vẻ như của Sáng nay, người chiến thắng được một người nào đó tên là Ken với 24 của các nhân viên bị bắt trên máy ảnh hoặc một vài chi tiết khi bạn đưa vào chiếm nhiều nhân viên trong các hình ảnh. Hình ở đây là Ken tiếp theo Mẹ Maria ở New Haven. Bây giờ, Ken, mặc dù, quay ra là bit của một trường hợp góc đó là chưa từng xảy ra trước. Nó chỉ ra rằng nó đã không xảy ra với tôi để đặt in nhỏ trong vấn đề thiết lập bốn mà nói rằng nhân viên không đủ điều kiện cho các giải thưởng tuyệt vời vì Ken là, tất nhiên, một trong những các nhiếp ảnh gia về nhân viên của chúng tôi. Bây giờ, với những gì đã nói, ông ban đầu được viết cho tôi để nói xin vui lòng không gửi các hình ảnh trực tuyến. Tôi nghĩ rằng một phần lớn bởi vì hầu hết các bức ảnh mà nhiếp ảnh gia này đã tìm một chút gì đó như thế này. Và như thế. Nhưng Ken muốn tôi để trấn an bạn rằng ông là một nhiếp ảnh gia rất tốt, ông là một chuyên gia, ông mất hình ảnh mà không bị mờ, được tốt hơn trong tập trung, và ông mất khá một vài trong số nhân viên của chúng tôi. Nhưng thay vì chỉ thừa nhận Ken, những gì chúng tôi nghĩ rằng chúng tôi sẽ làm được đi qua danh sách các sinh viên thực tế đã nộp. Và nó chỉ ra rằng Lance với 15 ảnh như sáng nay là người chiến thắng của chúng tôi. Và hình ở đây là Lance với Colton, với Skaz, với bản thân mình, và với Sam. Nhưng sau đó nó quay ra rằng khi các 11:46, vì vậy chỉ cần một chút trước, Tôi quay trở lại vào email của tôi và tìm thấy mà chúng tôi đã nêu ra một trình hơn bởi một sinh viên tên là Bonnie email mà chỉ này cho biết. Không nói dối, tôi làm điều này trong lớp học. Và sau đó tiến hành để đính kèm chỉ 14 bức ảnh, một nhút nhát của Lance của 15. Nhưng trong bức ảnh của Bonnie, nó quay ra được nhiều nhân viên, Sam trong số đó, vì vậy những gì chúng tôi nghĩ chúng tôi sẽ làm là thừa nhận cả hai. Vì vậy, ngoài việc nhận được Dropbox không gian mà tất cả những người tham gia nhận, hai phần này cũng sẽ nhận được một bữa ăn trưa phục vụ tốt đẹp cho họ và phần của họ giao phối trong tuần tới. Và như vậy bạn sẽ nghe từ chúng tôi, Lance và Bonnie, về điều đó. Congrats quá lớn đối với họ. Bây giờ, những người bạn của những người sẽ như ăn trưa chung hơn biết rằng CS50 ăn trưa tại Cambridge và New Haven là thứ Sáu này. Tới trang web của slash RSVP CS50 của. Và bây giờ là một lời về hội thảo. Curricularly hơn. Vì vậy, chúng ta đang ở gần điểm của học kỳ nơi bạn nên bắt đầu suy nghĩ về dự án cuối cùng. Và trên thực tế, chỉ trong một chút, sẽ cái gọi là kiến ​​nghị trước là do. Vì vậy, đề nghị trước có nghĩa là để tác động được khá thấp và thực sự chỉ là một cơ hội cho bạn soạn một ghi chú ngắn giáo viên giảng dạy của bạn để thông báo cho nhóm anh ta hoặc cô ấy những gì bạn đang suy nghĩ bạn có thể muốn làm cho dự án cuối cùng của bạn. Bây giờ, nhiều sinh viên kết thúc làm web dựa trên các dự án cuối cùng. Và tất nhiên, chúng tôi chỉ tuần nay cuối cùng trong này và xa hơn nữa lặn vào lập trình web. Vì vậy, không phải lo lắng nếu bạn hoàn toàn không có ý tưởng như thế nào bạn sẽ xây dựng những ý tưởng đó bạn có thể có trong tâm trí của bạn. Điều này thực sự chỉ là một chức năng buộc để bạn suy nghĩ và nói chuyện với TF của bạn về nó. Nhưng để giúp bạn với điều đó, và với các dự án chính thức cuối cùng, biết rằng CS50 có một truyền thống của việc đưa ra hội thảo. Và đây là những tùy chọn, tay trên, hoặc bài giảng dựa trên cơ hội để tìm hiểu thêm về các chủ đề mà một chút phụ trợ cho các khóa học của giáo trình, nhưng dù sao tuyệt vời vật liệu để đẩy các dự án chính thức. Và vì vậy đây là danh sách đó là Nhân viên CS50 đây ở New Haven đã đưa ra cho năm nay về iOS lập trình, Android lập trình, phát triển game, và chùm của nhiều công cụ hơn và các ngôn ngữ và kỹ thuật. Vì vậy, giữ một mắt trên website của CS50. Và trong khi chờ đợi, nếu bạn muốn đăng ký quan tâm của bạn trong bất kỳ trong số này, đi đến slash đăng ký CS50 của. Và sau đó chúng tôi sẽ theo dõi để các ngày và giờ bay và các địa điểm và tất cả mọi thứ sẽ everything-- nhất được xem trực tiếp và cũng có sẵn theo yêu cầu sau khi nếu bạn không thực sự có thể làm cho nó. Vì vậy, không có thêm ado, chúng tôi rời đi lần cuối cùng với GET. Và điều này giống như thông điệp đó là bên trong phong bì ảo, nhắc lại, rằng chúng ta đã chuyển từ router với router để bộ định tuyến giữa một trình duyệt web và web máy chủ. Và thông điệp mà nhìn một chút gì đó như thế này. Đây là thông điệp phức tạp hơn đã thực sự bên trong một phong bì được viết trên một mảnh giấy mà Dòng đầu tiên nói theo nghĩa đen, có dấu gạch chéo. Và cũng giống như một kiểm tra sự tỉnh táo, những gì đã gạch chéo biểu thị? Không gạch chéo có nghĩa là gì khi yêu cầu một trang web? Bạn yêu cầu tất cả các thời gian. Hầu hết bất cứ lúc nào bạn truy cập một trang web, bạn không thực sự gõ một tên tập tin. Bạn có thể chỉ cần đi đến Facebook.com, nhập, gmail.com, hoặc tương tự. Và những gì hiện dấu gạch chéo đại diện? Tập tin gì? Hoặc những gì trang, cụ thể? Các chỉ số, yeah. Vì vậy, các trang mặc định. Vì vậy, nếu bạn không chỉ định một tập tin đặt tên như chúng tôi sẽ bắt đầu nhìn thấy, bạn đang thực sự chỉ yêu cầu cung cấp cho tôi những trang mặc định của Facebook hay đưa cho tôi hộp thư của tôi hoặc cung cấp cho tôi trang mặc định của tin tức trên trang web của CNN hoặc tương tự. Và một máy chủ sau đó phản ứng với rằng thông điệp với một cái gì đó như thế này, nói rằng có, tôi nói HTTP phiên bản 1.1. 200, mà là một trạng thái code mà chúng ta hiếm khi con người bao giờ nhìn thấy bởi vì nó là tốt. Bởi vì nó có nghĩa là OK, yêu cầu đã nhận và xử lý đúng cách. Và các loại nội dung rõ ràng trong các phản ứng là khá thường xuyên, nhưng không phải lúc nào, văn bản. Và đặc biệt, HTML. Và đó là thực sự nơi chúng ta nhìn vào ngày hôm nay. Vì vậy, trong thực tế, tôi sẽ đi trước và mở một trình duyệt. Tôi sẽ sử dụng Chrome, bạn có thể sử dụng hầu hết bất kỳ trình duyệt trong tuần tới. Chúng tôi thường khuyên Chrome vì nó đặc biệt tốt cho các nhà phát triển phần mềm. Nó có rất nhiều trong xây dựng công cụ mà làm cho nó dễ dàng hơn phát triển không chỉ HTML và CSS, điều chúng ta sẽ bắt đầu nói chuyện về ngày hôm nay, mà còn các ngôn ngữ khác. Và tôi sẽ đi trước và đi đối với: Tôi sẽ kiểm soát nhấp chuột hoặc phải nhấp vào bất cứ nơi nào trên một trang web. Và tôi sẽ đi đến Kiểm tra Element. Và tôi sẽ tinh chỉnh của tôi màn hình chỉ là một chút ở đây. Hãy để tôi di chuyển này để phía dưới. Vì vậy, đây là những gì được gọi là Thanh tra của Chrome. Vì vậy, điều này giống như một gỡ lỗi công cụ tích hợp vào Chrome. Tất cả các bạn đã có này nếu bạn đã sử dụng Chrome. Và nó cho phép bạn xem những gì đang xảy ra trên dưới mui xe của một số trang web. Vì vậy, hãy thực sự mất một xem xét điều này như sau. Nó có tính năng cách hơn và chúng tôi quan tâm hiện nay. Nhưng có những tab này ở đây. Elements, mạng, nguồn tin, thời gian, và một số thứ khác. Tôi sẽ bấm vào Mạng cho một thời điểm. Và đó là một chút áp đảo ở cái nhìn đầu tiên ở đây. Nhưng những gì tôi sẽ làm giống như vậy tôi đơn giản hóa nó một chút. Tôi sẽ bật ghi lại ánh sáng để nó là màu đỏ. Và tôi sẽ nói bảo log. Và đây chỉ là một chút điều tôi đã tìm ra qua thời gian đó sẽ tiết kiệm mọi thứ xảy ra trong trình duyệt. Và bây giờ tôi sẽ đi để http://facebook.com. Trên thực tế, chúng ta hãy làm www cho biện pháp tốt, dấu gạch chéo. Vào. Vì vậy, một URL mà nhiều người trong bạn có thể đã đến thăm. Và bây giờ web của Facebook trang xuất hiện ở đầu trang. Và sau đó một bó toàn bộ thứ trôi qua ở phía dưới. Và trên thực tế, nó chỉ ra rằng khi bạn truy cập vào Facebook.com, bạn không chỉ làm cho một yêu cầu HTTP, nó chỉ ra rằng sẽ Facebook.com gửi 41 của những phong bì, mỗi nhận được yêu cầu riêng của mình, như được chỉ ra, mặc dù phía sau màn hình ở đây, ở dưới cùng của màn hình, nó chỉ ra rằng, quả thật, tôi trình duyệt thực hiện 41 yêu cầu. Và trong tổng số, nó được chuyển 861 kilobyte và nó mất vì một lý do như nhiều như tám giây để tải về tất cả điều đó. Vì vậy, đó thực sự là một chút lạ rằng trang web của Facebook sẽ mất rằng dài, nhưng như vậy có thể là trong trường hợp này. Bây giờ, tất cả những điều này tôi không thực sự quan tâm về ngoại trừ các yêu cầu trên cùng. Vì vậy, chúng ta hãy đi đến một này ngay tại đây và cho tôi thu nhỏ chỉ trong một khoảnh khắc. Và hãy để tôi phóng to này. Vì vậy, những gì tôi đã thực hiện ở bên trái mặc dù có rất nhiều đang xảy ra ở đây là tôi đã nêu bật Facebook.com và sau đó nhận thấy rằng tôi đang di chuyển xuống, di chuyển xuống, kéo xuống dưới, yêu cầu tiêu đề. Và bạn sẽ thấy rằng Chrome đang hiển thị tôi về cơ bản các nội dung bên trong các yêu cầu tôi thực hiện. Nó không phải định dạng trong khá giống nhau cách, nhưng thông báo có đề cập đến được, nhận thấy có đề cập đến các máy chủ, Facebook.com, các đường dẫn, hoặc dấu gạch chéo, đó là file tôi yêu cầu. Và sau đó nếu tôi di chuyển sao lưu, chúng tôi sẽ thực sự thấy rằng những gì Facebook trở lại với tôi là tất cả các tiêu đề. Vì vậy, bên trong phong bì mà ảo thực sự là rất nhiều các cặp giá trị key. Một chữ, dấu hai chấm, và sau đó là một giá trị. Một chữ, dấu hai chấm, và một giá trị. Đây là gọi là các header. Và có cách chi tiết hơn ở đây hơn chúng tôi thực sự quan tâm về ngay bây giờ. Nhưng đây là lần thứ hai người cuối cùng xuống đó, thông báo, rằng máy chủ của Facebook.com, thực sự cho biết ở đây có một số văn bản HTML. Vì vậy, tất cả những điều này là để nói rằng khi bạn yêu cầu một trang web trang từ một trình duyệt đến một máy chủ, máy chủ có thể đáp với một phong bì riêng của mình bên trong đó là văn bản. Nói cách khác, HTML. HyperText Markup Language. Đó là một ngôn ngữ khác mà chúng tôi giới thiệu hôm nay rằng con người hay máy tính tạo ra để thực hiện các trang web. Cụ thể, chúng ta hãy nhìn vào điều này. Tôi sẽ quay trở lại với doanh nghiệp vào trang web của Facebook. Và tôi sẽ chỉ kiểm soát nhấp chuột hoặc click chuột phải và click vào View Page Source. Và thậm chí nếu bạn không sử dụng Chrome, IE có thể làm được điều này, Firefox có thể làm được điều này, Safari có thể làm được điều này, mặc dù thực đơn Các tùy chọn có thể nhìn một chút khác nhau. Và đây là HTML mà Mark và Công ty tại Facebook đã viết. Và chung, ngôn ngữ này ở đây thực hiện các màu xanh và màu trắng trang mà chúng ta đã thấy một chút thời gian trước đây. Bây giờ, đây là một chút áp đảo. Nhưng nếu chúng ta nhìn lên phía trên bên trái, chúng tôi sẽ bắt đầu để xem một số mẫu. Dường như có rất nhiều các khung góc mở và sau đó có HTML từ khóa này. Đây là một mở khung góc và đầu. Dưới đây là, nếu chúng ta di chuyển xuống và xuống và xuống, tôi sẽ đi trước và thử để tìm kiếm một cái gì đó. Có cách trên bên phải đây là mở cơ khung. Và nhớ lại từ cuối cùng thời gian đó, chúng tôi đề xuất rằng các trang web đơn giản rằng một con người có thể viết có thể nhìn một chút gì đó như thế này. Mở thẻ HTML, mở đầu thẻ, mở thẻ tiêu đề, sau đó tiêu đề khép kín, gần đầu, mở tag cơ thể, một số văn bản, đóng cửa cơ thể, HTML kín. Nhưng tạm dừng ở đây một lát. Mã này, thậm chí nếu bạn đã không bao giờ viết nó trước nhưng vẫn không hoàn toàn hiểu những gì đang xảy ra, có vẻ khá tốt. Phải, nó rất sạch sẽ. Nó rất phong cách tốt đẹp. Rất nhiều thụt đầu dòng và khoảng trắng. Facebook không phải là. Vì vậy, tại sao Facebook quá nhiều tồi tệ hơn tôi tại văn bản HTML? Rõ ràng. Đúng, điều này cũng giống như một trong số năm cho phong cách. Có một lý do thuyết phục cho họ phải cắt giảm các góc. Được rồi, vì vậy họ không muốn làm cho nó dễ dàng hơn cho bạn để đọc nó. Vì vậy, trong một nghĩa nào đó, họ obfuscating nó, loại xáo trộn nó ít nhất là về mặt thẩm mỹ như vậy rằng nó khó khăn hơn cho Myspace đi và rip off của họ trang chủ và HTML cho nó. Nó chỉ ra rằng với chương trình mặc dù, bao gồm Chrome, chúng ta có thể làm sạch này lên siêu dễ dàng. Vì vậy, nó không hoàn toàn mà là lý do. Những gì người khác có thể là nguyên nhân. Yeah. Yeah, chi phí khoảng trắng dữ liệu. Ý anh là gì? Vâng, chính xác. Nếu bạn nhấn phím Tab nhiều hoặc thanh không gian, hãy xem xét các ý nghĩa. Vì vậy, tất cả các phím trên bàn phím của bạn là một [Không nghe thấy] biểu diễn như là một byte. Vì vậy, giả sử rằng Mark hoặc bất kỳ của các nhà phát triển những ngày chạm phím cách chỉ một lần trong trang HTML này đại diện trang chủ của Facebook. Và Facebook có rất nhiều của người sử dụng những ngày này. Vì vậy, giả sử rằng trang web của Facebook được viếng thăm bởi một tỷ người hiện nay. Và ai đó ở Facebook có nhấn thanh không gian chỉ một lần. Vì vậy, một byte bổ sung, một tỉ yêu cầu, làm thế nào nhiều dữ liệu hơn là Facebook chuyển qua internet vì có người trúng spacebar trên bàn phím của mình? Một tỷ byte, hoặc một gigabyte dữ liệu đang được gửi từ máy chủ Facebook cho những người xung quanh thế giới không có lý do tốt. Bây giờ, đó chỉ là một không gian. Hãy tưởng tượng nếu chúng ta thực sự làm sạch này điều lên và thụt vào nó và thêm vào rất nhiều không gian màu trắng và ký tự tab và không gian, bạn kết thúc gigabyte chi tiêu, nếu không terra byte nữa của không gian. Và như vậy siêu phổ biến ở thế giới thực tế của phát triển web là để giảm bớt mã của bạn. Và cuối cùng chúng ta sẽ thấy làm thế nào bạn có thể làm điều này. Nhưng hôm nay, chúng ta sẽ bắt đầu viết mã đó là thực sự có thể đọc được bởi con người chúng ta. Hóa ra, tuy nhiên, nếu bạn quay trở lại để công cụ này trong Chrome Kiểm tra Element, trước đây, chúng tôi đã vào tab Network. Nó chỉ ra rằng nếu bạn đi đến tab yếu tố, những gì bạn thực sự thấy là Chrome của khá in phiên bản của cùng một HTML. Vì vậy, chúng tôi đã deobfuscated nó. Vì vậy, nó không phù hợp cho một máy tính. Và bây giờ bạn có thể thực sự nhấp vào xung quanh và bắt đầu để xem các hệ thống cấp bậc đó là một trang web. Vì vậy, hãy thực hiện điều này. Tôi sẽ đi trước và mở lên trên Mac của tôi một chương trình gọi là chỉnh sửa văn bản. Và nhớ rằng đây chỉ là một chương trình văn bản siêu đơn giản. Windows có notepad.exe. Và tôi sẽ Verbatim gõ như sau. Doc kiểu HTML, mở khung HTML, đóng khung HTML, chúng tôi có những người đứng đầu của trang ở đây, kết thúc của người đứng đầu các trang ở đây, một tiêu đề sẽ như thế nào, xin chào thế giới. Và sau đó xuống đây, chúng ta cần cơ thể của trang web. Cơ thể khép kín. Và sau đó ở đây, xin chào thế giới. Được rồi. Vì vậy, chúng tôi đã viết một trang web siêu nhanh. Tôi sẽ lưu nó như là hello.html trên máy tính để bàn của tôi. My Mac của than phiền, nghĩ rằng, chờ một phút, này là một tập tin văn bản, làm bạn muốn gọi nó .txt? Nhưng không, tôi muốn sử dụng dấu chấm HTML. Và sau đó những gì là tốt đẹp nếu tôi chỉ cần nhấp đúp chuột vào tập tin này, hello.html, đây là trang web của tôi. Thật không may, tôi là người duy nhất trong thế giới những người có thể truy cập trang này ngay bây giờ. Bởi vì nơi nào nó sống rõ ràng? Đó là trên máy Mac của tôi, phải không? Đó là vô ích. Giống như không có ai trong phòng này hãy để một mình trên internet thực sự có thể truy cập vào trang đó. Vì vậy, ngày hôm nay, chúng ta cần phải giới thiệu các yếu tố khác. Và để làm được điều này, tôi sẽ đi trước và mở đám mây 9. Vì vậy, đám mây 9 của khóa học là một đám mây dựa service-- CS50 IDE-- đó có tất cả các không gian làm việc của chúng tôi chạy một nơi nào đó trên internet. Và điều đó có nghĩa rằng tất cả các tập tin của chúng tôi có thể truy cập công khai rồi. Vì vậy, chúng ta hãy đi trước và làm điều này. Tôi sẽ đi trước và tạo ra một tập tin mới NCS50IDE. Tôi sẽ lưu nó như trước như hello.html và bấm vào lưu. Và bây giờ chỉ để tiết kiệm thời gian, tôi sẽ đi trước và sao chép và dán đoạn mã này chứ không phải nhập lại nó. Và lưu nó. Và vì vậy bây giờ tôi có một tập tin gọi là hello.html. Nhưng làm cách nào để thực sự mở nó như là một trang web? Vâng, nó quay ra được xây dựng trong để CS50 IDE không chỉ là một trình biên dịch như vang và một trình gỡ lỗi như GDB và bó của các chương trình khác, có thực sự là một chính thức đầy đủ máy chủ web chạy trong CS50 IDE. Tất cả các bạn, đó là để nói, có máy chủ web của riêng bạn. Và một máy chủ web chỉ là một mảnh của phần mềm có mục đích trong cuộc sống là để phục vụ lên các trang web. Để lắng nghe yêu cầu từ trình duyệt và đáp ứng với chút phong bì ảo trong số đó là nội dung mà tôi đã viết. Vì vậy, máy chủ web này là thực sự miễn phí và mã nguồn mở. Trường hợp nguồn mở này có nghĩa phần mềm mà người khác có viết rằng tất cả chúng ta có thể thực sự thấy và tải về và thậm chí thay đổi mã nguồn. Và nó được gọi là Apache. Và chúng tôi đã thực hiện nó một chút dễ dàng hơn để sử dụng trong CS50IDE bằng cách gọi nó Apache 50. Vì vậy, nó có thể thực sự hiểu sau đây. Tôi sẽ nói Apache 50 bắt đầu. Và sau đó tôi chỉ cần đi để nói dot. Và chúng ta thấy một số phần nào tin phức tạp nói thiết lập Apache của tài liệu [? nhóm ?] đến nhà, ubuntu, bất kể đó là, giảm không gian làm việc. Bắt đầu từ máy chủ web Apache 2 thành công. Vì vậy, câu chuyện dài ngắn, tôi vừa đẩy một nút và bật một máy chủ web, những người bây giờ lắng nghe trên internet trên cổng TCP 80 tại một địa chỉ cụ thể. Và nó nói ở đây, và điều này sẽ thay đổi dựa vào tên người dùng của bạn và các yếu tố khác, nhưng nhận thấy bây giờ nếu tôi bấm này, IDE50 dot jharvard và như vậy và vì vậy, hãy chú ý rằng tất cả các thời gian này cho một số quá khứ tuần, bạn có thể có nhận thấy rằng tên người dùng của riêng bạn được nhúng vào trong tay trên bên phải góc của CS50IDE. Và đó thực sự đã được tất cả điều này thời gian các địa chỉ mà bạn có thể thăm tất cả các tập tin của bạn thông qua web. Cho đến bây giờ, nó đã không quan trọng, bởi vì trong C, bạn thường muốn mọi thứ đang chạy trong một thiết bị đầu cuối, không có trên web. Nhưng hôm nay, chúng ta bắt đầu viết code dựa trên web mà chúng ta muốn truy cập tại URL nào. Vì vậy, những gì tôi sẽ làm là bấm vào URL này. Và nhận thấy rằng tôi thấy một khá chỉ số xấu xí, một danh sách thư mục, nhưng những gì tập nhảy ra lúc bạn có thể? Hello.html. Đó là bởi vì tôi đã lưu các tập tin trong không gian làm việc của tôi. Và những gì tôi đã nói với Apache web server được tìm trong thư mục không gian làm việc của David. Và để cho bất cứ ai trong thế giới thấy những file này. Và quả thực, nếu bây giờ tôi click vào hello.html, Tôi thấy trong tab này chính xác tập tin đó. Bây giờ nhận thấy, đám mây đang làm 9 một chút gì đó hữu ích cho chúng ta. Trong vòng CS50 IDE, nhận thấy có đột nhiên một thanh địa chỉ. Đó là bởi vì mặc dù chúng tôi sử dụng Chrome để truy cập CS50IDE, bên trong của CS50IDE là của riêng mình phiên bản của một trình duyệt web ngay bây giờ. Và như vậy hơn những điều phức tạp như vậy, Tôi sẽ đi trước và chỉ cần sao chép URL này. Tôi sẽ đi trước và chỉ mở cửa sổ Chrome của riêng tôi. Vì vậy, không có phép thuật ở đây, không CS50IDE. Tôi chỉ cần đi đến nghĩa đen dán J Harvard URL và tôi nhấn Enter. Và đây rồi, bây giờ tôi, và trong lý thuyết, tất cả mọi người trên internet, nếu tôi đã cấu hình quyền một cách thích hợp, có thể truy cập tập tin này. Và vì vậy bây giờ, nếu tôi nói hello.html, thì đấy, có là trang web vô underwhelming của tôi. Vì vậy, chúng ta hãy làm một kiểm tra sự tỉnh táo nhanh chóng. Bởi vì tất cả điều đó là khái niệm thiết lập. Và chúng tôi đã thực sự không thực sự dạy bạn làm thế nào để viết HTML cho mỗi gia nhập. Bất kỳ câu hỏi vậy, đến nay về những gì đang xảy ra? Vâng. Có CS50 sở hữu các trang web? Trong ý nghĩa gì? Câu hỏi hay. Vì vậy, CS50 của sở hữu CS50.io. Chúng tôi đã thực sự đã mua tên miền đó. Và bởi bản chất của các bạn đăng nhập vào CS50IDE, tất cả các bạn có được những gì được gọi là một tên miền phụ. Vì vậy IDE50-Malan, hoặc IDE50-Rob.CS50.io, đó là địa chỉ duy nhất của bạn trong vòng Tên miền của chúng tôi. Vì vậy, đối với các mục đích của khóa học, bạn có địa chỉ duy nhất của riêng bạn. Nhưng chúng tôi đã đơn giản hóa mọi thứ bằng mua các tên miền cấp cao nhất, CS50 dot I / O và sau đó tất cả mọi người khác là bên trong đó, vì vậy để nói chuyện. Và chúng tôi sẽ trở lại mà trong một vài tuần có lẽ, đặc biệt là tại dự án cuối cùng thời gian, khi một số bạn có thể muốn có được tên miền riêng của bạn. Đó là thực tế tương đối đơn giản. Được rồi. Vì vậy, bây giờ chúng ta làm điều này. Tôi sẽ quay trở lại vào CS50IDE, nơi tập tin của tôi ngay bây giờ, hello.html, không phải là tất cả những gì thú vị. Tôi muốn làm điều gì đó một chút đẹp hơn đó. Vì vậy, tôi sẽ làm một cái gì đó như thế này. Hãy để tôi mở paragraphs.html. Vì vậy, đây là một tập tin tôi đã viết trước. Ở phía trên của nó, giống như mọi khi, chúng tôi có ý kiến. Nhưng trong HTML, nhận xét nhìn một chút khác nhau. On line ba và dòng 14, bạn thấy cú pháp cho khởi động một bình luận và kết thúc nhận xét. Nhưng không ai trong số các công cụ trong giữa các vấn đề về mặt chức năng. Nó chỉ là một lưu ý đến một con người những gì đang xảy ra ở đây. Và cũng giống như một sự tỉnh táo nhanh kiểm tra, nếu tôi di chuyển xuống, mới rõ ràng là những gì tag mà chúng tôi đã giới thiệu? Các thẻ vậy, đến nay chúng tôi đã nhìn thấy đang mở khung HTML, đầu, tiêu đề, và cơ thể. Nhưng điều rõ ràng là mới bây giờ? Yeah, vì vậy p. Thẻ p hoặc tag đoạn. Và sau đó tôi chỉ mượn một số mặc định Văn bản Latin để tạo thành đoạn văn của tôi. Bởi vì những gì tôi muốn chứng minh là làm thế nào có lẽ bạn đại diện cho đoạn văn bản trong HTML. Và vì vậy những gì bắt đầu xảy ra ở đây là có đã một mô hình phát triển. Và hãy để tôi đi trước và làm điều này. Hãy để tôi đầu tắt Apache. Và tôi sẽ nói cho nó để bắt đầu bản thân một lần nữa bên trong mã nguồn của ngày hôm nay bảy m thư mục. Vì vậy mà tôi có quyền truy cập vào tất cả mọi thứ. Và bây giờ, nếu tôi trở lại danh sách thư mục này, thông báo tôi thấy tất cả các file từ ngày hôm nay. Và bạn sẽ thấy trong Vấn đề tiếp theo, chúng tôi sẽ cung cấp cho bạn hướng dẫn để làm chính xác này. Nếu tôi mở paragraphs.html, đây có thể cũng như trông giống như một ngôn ngữ lập trình cho bạn nếu bạn không nói hoặc đọc Latin. Nhưng đây chỉ là ba đoạn của văn bản được đánh dấu trong HTML. Và thông báo các đoạn nghỉ giải lao giữa chúng. Vì thực ra, và mặc dù bạn có thể được nghiêng để làm điều này, trong khi ở thế giới thực, nếu bạn muốn đặt hàng nghỉ giữa các sự vật, khá có lẽ bạn chỉ đơn giản làm điều này và nhấn Save. Và bây giờ, nếu tôi lại ở đây, thông báo rằng tất cả mọi thứ chỉ làm mờ đi với nhau chỉ trong một blob của văn bản. Bởi vì HTML là loại ngôn ngữ câm. Nó có nghĩa là để được sử dụng trong đó một cách mà trình duyệt sẽ chỉ làm rõ những gì bạn nói với nó để làm. Vì vậy, nếu bạn không nói với nó cho tôi một đoạn mới, bạn sẽ không nhìn thấy một đoạn mới. Và trên thực tế, những gì trình duyệt sẽ làm gì là ngay cả khi bạn nhấn Enter, chúng ta hãy nói một lần nữa và một lần nữa và một lần nữa, di chuyển cách văn bản này xuống trên màn hình và sau đó lưu và sau đó tải lại, trình duyệt sẽ sụp đổ tất cả các không gian màu trắng vào chỉ là một duy nhất, khoảng trắng có thể nhìn thấy. Được rồi. Vì vậy, đó là các thẻ đoạn. Và do đó, các mô hình là những gì đó là phát triển ở đây? Vâng, nó có vẻ là các trường hợp đó HTML là tất cả về việc bắt đầu một tag và kết thúc một thẻ. Và một từ khóa là gì? Vâng, nó chỉ là một đoạn của cú pháp. Mở khung, một từ khóa, khung khép kín, là một thẻ. Hoặc bắt đầu tag. Và sau đó khi bạn đang thực hiện thể hiện chính mình, như trong bạn đang thực hiện với đoạn văn, bạn làm như vậy để nói chuyện ngược lại. Nhưng ngược lại không phải là khá ngược. Bạn chỉ đơn giản là tiền tố của thẻ cùng đặt tên với một dấu gạch chéo như thế này. Được rồi. Vì vậy, không phải tất cả những gì thú vị. Và trong thực tế, chúng tôi không thực hiện các web tất cả những gì thú vị hơn. Nếu tôi muốn làm những điều lớn hơn và đậm? Vì vậy, nó chỉ ra rằng đây là một ví dụ trong headings.html, nơi trong cơ thể của tôi, Tôi đã có một thẻ H1, H2, H3, bốn, năm, sáu, tất cả đều có vẻ khá phức tạp. Nhưng nếu tôi đi mở này Ví dụ, chúng ta hãy có một cái nhìn. Headings.html. Vì vậy, trình duyệt mặc định có thể cung cấp cho bạn văn bản đó là lớn và đậm của các kích cỡ khác nhau. H1 là lớn. H6 là nhỏ hơn và sau đó mọi thứ khác ở giữa. Vì vậy, đó là thú vị nhưng vẫn không thực sự trên web tôi biết. Nếu chúng ta muốn có tôi một cái gì đó giống như một danh sách. . Vì vậy, đây là một danh sách gạch đầu dòng các ba nhà của Harvard. Làm thế nào bạn đi về việc này? Vâng, hãy nhìn vào list.html. Và ở đây, chúng ta thấy một chút chút funkiness nhưng chúng ta hãy xem xét những gì đang xảy ra. Vì vậy, dựa trên những gì bạn đã thấy, UL là viết tắt của danh sách không có thứ tự. Danh sách không có thứ tự chỉ có nghĩa là gạch đầu dòng. Không có con số. Ngoài ra còn có một cái gì đó gọi là một ra lệnh danh sách, đó là một CV tại tag. Sau đó, LI, mục danh sách là tất cả các nghĩa của nó. Và do đó, nó sẽ tự động số tất cả mọi thứ cho bạn. Nhưng một lần nữa, tất cả các indentation của tôi và không gian màu trắng chỉ là vì tôi. Trình duyệt không thực sự sẽ quan tâm. Vì vậy, mặc dù bạn có thể không làm điều này, chỉ để được rõ ràng, bạn không nên ngay cả mặc dù trình duyệt sẽ vẫn có thể hiểu nó chỉ tốt. Tôi nhấn tải lại trong tôi trình duyệt, tôi nhấn reload và không có sự thay đổi đang diễn ra vì trình duyệt vẫn làm chính xác những gì tôi nói với nó để làm. Được rồi. Vì vậy, đây là tất cả chỉ là văn bản. Bây giờ chúng ta hãy làm một cái gì đó thú vị hơn. Tôi sẽ đi trước và mượn một số tập tin HTML này. Tôi sẽ đi trước và tạo ra một tập tin mới ở đây. Và chúng ta sẽ gọi rick.html này. Chúng tôi có không tương xứng sử dụng một cái gì đó được gọi là một cuộn rick trong này lớp năm nay, tôi không biết, nó chỉ xảy ra cách hữu cơ. Và bây giờ nó đã ra khỏi tầm kiểm soát. Vì vậy, tôi chỉ đi với nó. Và nếu tôi đi đến Google Hình ảnh và Rick Astley. Nếu bạn không biết lý do tại sao chúng tôi làm này, chỉ cần đọc lên trên Wikipedia. Mỗi khi bạn đã nhấp vào liên kết, ai đó được cười đâu đó. Và hãy để tôi đi ahead-- có chúng tôi đi, chúng ta hãy xem những bức ảnh này. Vì vậy, ở đây chúng ta có một hình ảnh trong Google Images. Và chúng ta hãy giả định rằng đây là hợp lý ở khắp mọi nơi trên internet. Vì vậy, tôi sẽ giả sử nó là OK cho tôi để thực sự đưa điều này vào trang web của tôi. Tôi sẽ đi trước và sao chép URL hình ảnh. Và bây giờ nếu tôi quay trở lại với Cloud 9, chúng ta hãy xem những gì tôi có thể làm ở đây. Vì vậy, đây chỉ là một trang web. Đây là Rick Astley, haha, Tôi sẽ quay trở lại với doanh nghiệp để trình duyệt của tôi, tải lại, và thú vị. Nơi Rick là? Vì vậy, hãy để tôi nhìn thấy những gì đang xảy ra. Trên thực tế, tôi sẽ giả vờ như tôi không làm điều đó. [Không nghe thấy] đưa anh vào đây. Chúng tôi sẽ trở lại trong một khoảnh khắc. Vì vậy, đây là rick.html. Vì vậy, đó không phải là Rick Astley. Vì vậy, hóa ra chúng ta có thể thực sự thêm anh ở đây. Đây là Rick Astley. Tôi sẽ nói cho tôi một hình ảnh mà nguồn là URL tôi chỉ cần sao chép, mà rõ ràng là một hạnh phúc một cái gì đó sinh nhật hay khác. Và bây giờ tôi sẽ đến đóng thẻ như thế này. Vì vậy, đây là gói siêu dài. Nhưng cần chú ý rằng tất cả tôi đã thực hiện là hình ảnh mở khung, nguồn với một thuộc tính của điều này. Và đó là một URL thực sự lâu dài. Và ở cuối, nhận thấy điều này. Slash Tại sao tôi lại làm khung góc cạnh thay vì, giống như mỗi thẻ khác, có một khung mở, IMG, đóng khung? Chỉ cần lấy một đoán ngay cả khi bạn không có sự quen thuộc nào HTML với trước. Vì vậy, nó là như thế nào nó sẽ đóng lại lệnh, nhưng tại sao nó không thực sự làm cho trực quan tinh thần để làm một cái gì đó nhiều hơn một chút Verbose giống như hình ảnh gần gũi? Yeah. Yeah. Chỉ cần ngữ nghĩa, không có cảm giác bắt đầu từ một hình ảnh và kết thúc một hình ảnh, nó hoặc là có hoặc nó không phải. Vì vậy, nó không có ý nghĩa để lại một khoảng cách cho bất cứ điều gì khác bên trong của một hình ảnh. Bạn chỉ có thể làm điều đó. Và do đó, các cú pháp nói chung sẽ chỉ để làm dấu gạch chéo bên trong của thẻ mở hay bắt đầu từ khóa và sau đó nhấn Save. Vì vậy, nếu bây giờ tôi lại tập tin này, bây giờ Tôi đã có một web tốt trang nấu ăn ở đây. Và chúng ta có thể chắc chắn thực sự làm phiền người bằng cách nhúng thay như một liên kết YouTube. Và trên thực tế, bất cứ lúc nào bạn đã từng đi đến YouTube, và cho tôi thực sự vô tình rick cuộn thân mình ở đây. Vì vậy, Rick roll. Vì vậy, rick roll-- tôi sẽ đi đây. [MUSIC CHƠI] OK, một người thích điều đó. Vì vậy, nhận thấy tất cả thời gian này, nếu bạn nhấp vào liên kết Chia sẻ, bạn tất nhiên có được URL mà bạn có thể thực sự nhúng trong một email hoặc một hình ảnh pháp y hoặc trong một vấn đề thiết lập hoặc trong một slide. Và bây giờ, nếu tôi thay vì nhấp chuột vào địa chỉ mạng, nhận thấy rằng tất cả các thời gian này, công cụ này đã có. Tôi sẽ đi trước và sao chép này. Và chỉ như vậy chúng ta có thể nhìn thấy nó tốt hơn, tôi sẽ dán nó vào trình soạn thảo văn bản của tôi. Chú ý rằng điều này những gì YouTube đã từng nói với bạn. Mỗi khi bạn truy cập một Video YouTube, nếu bạn muốn nhúng video trên của bạn trang web, đơn giản là lấy này. Vì vậy, đây là có khác Tag HTML được gọi là một khung nội tuyến. Hoặc một trong khung dòng. Vì vậy, nó quá trông nhiều hơn một chút phức tạp hơn so với tất cả những người khác. Vì vậy, nó chỉ ra rằng hình ảnh tag và dường như thẻ iframe lấy tên là thuộc tính là gì. Và đây là một mảnh cú pháp trong HTML. Ngoài các tag của tên, khung mở thẻ tên, bạn có thể kiểm soát hành vi của thẻ bởi có một bó toàn bộ các thuộc tính bằng giá trị. Thuộc tính bằng giá trị. Và do đó, ví dụ, YouTube là nói cho chúng tôi nếu bạn muốn chiều rộng của video này là 420 pixel và chiều cao là 315 pixels, đó là cách bạn thể hiện nó trong HTML. Nguồn gốc của video là gì để được rằng URL YouTube dài và sau đó một số công cụ khác như biên giới khung là số không, do đó có thể có nghĩa là có không có biên giới xung quanh điều. Cho phép màn hình có thể có nghĩa là người sử dụng có thể bấm vào một nút và thực sự đầy đủ màn hình video. Vì vậy, nếu tôi thực sự muốn được ấn tượng ở đây trong Rick dot HTML, thay vì sử dụng các thẻ hình ảnh, cho phép tôi xóa, thay vì dán này. Và bây giờ tải lại. Và giờ đây chúng tôi đi một lần nữa. Được rồi, thế là đủ. Tất cả các quyền vì vậy tôi sẽ cố gắng không khó để làm điều đó một lần nữa. Vì vậy, một số các takeaways ở đây là gì? Vì vậy, HTML, xấu xí như các trang web là, thực sự là khá đơn giản. Nó không phải là một ngôn ngữ lập trình. Nó không có chức năng. Nó không có vòng. Nó không có điều kiện. Tất cả nó đã là hàng chục thẻ khác nhau, mỗi trong số đó có không hoặc nhiều thuộc tính. Và trên thực tế, vui vẻ là những gì về HTML khi bạn bắt đầu đi sâu vào là nó rất tự có thể dạy dỗ. Tất cả phải mất là một sự hiểu biết các khuôn khổ chung của HTML. Một thẻ là gì, một thuộc tính là gì, làm thế nào để bạn có thể cấu hình một trang web như sau. Và mọi thứ khác thực sự là kết quả nhìn lên trong một tài liệu tham khảo trực tuyến hoặc googling làm thế nào để làm một số kỹ thuật hoặc như chúng ta đã thấy, nhìn vào mã nguồn của Facebook mã, nhìn vào một trang web mà bạn thích vào đó là mã nguồn và sự hiểu biết làm thế nào các nhà phát triển có thực sự đặt những điều trên. Vì vậy, chúng ta có thể làm hình ảnh là tốt. Và trên thực tế, chúng tôi đã làm cho nó một thời gian trước đây. Hãy để tôi đi trước và chỉ cho bạn thấy. Dưới đây là một số mẫu mã. Nếu bạn đã bao giờ muốn nhìn thấy con mèo gắt gỏng. Vì vậy, nhận thấy rằng tôi có thể có một thẻ hình ảnh ở đây. Và tôi đã có một bình luận trên nó. Tôi đã có một sự thay thế văn bản cho người khuyết tật. Vì vậy, một ai đó sử dụng một màn hình đọc cho lý do của thị giác thực sự có thể sau đó có mình đọc màn hình nói Grumpy Cat. Bởi vì nếu chúng không thể xem hình ảnh, họ ít nhất có thể có máy tính của họ nói cho họ biết đó là lời nói gì. Và nguồn gốc của tập tin đó là cat.jpeg. Vì vậy, trong thực tế, nếu tôi thực sự muốn có được thông minh, những gì tôi có thể có done-- Tôi hứa sẽ không đi đến Rick Astley, vì vậy Tôi sẽ google cho một con mèo thay thế. Và nếu tôi đi đến hình ảnh của Google ở đây, và chúng tôi sẽ giả định rằng đây là một hình ảnh của con mèo của tôi. Giả sử rằng tôi có quyền kiểm soát nhấp hoặc phải nhấp vào này, vô tình đáng sợ. Và cat.jpeg tôi sẽ lưu trên máy tính của tôi. Bây giờ hãy để tôi quay lại với đám mây 9. Chú ý rằng ở đây, tôi có thể đi để tải lên các tập tin địa phương. Và nếu tôi lấy này file, cat.jpeg, thông báo mà tôi có thể kéo nó và thả nó vào đám mây 9 và nó sẽ hét vào mặt tôi ở đây. Bởi vì chúng tôi đã đã đưa cho bạn một tập tin cat.jpeg, nhưng đó là siêu dễ lấy một bức ảnh mà bạn đã lấy từ Facebook hoặc Flickr hoặc các loại tương tự và thực sự kéo và thả nó vào đám mây 9 và sau đó làm cho nó một phần của riêng cá nhân của bạn trang web hay vấn đề thiết lập bảy hay tám như chúng ta sẽ sớm thấy. Và sau đó khi bạn cuối cùng ghé thăm con mèo đó, giả sử tôi tải về mà cùng con mèo, thông báo that-- đó là đáng yêu. Những gì bạn sẽ thấy là một cái gì đó giống như khuôn mặt này ở đây. Vì vậy, các tập tin mà bạn tài liệu tham khảo trong một trang web hoặc có thể là địa phương của riêng bạn tài khoản hoặc từ xa trên một số máy chủ khác như trong trường hợp của Rick Ảnh Astley một chút trước. Vì vậy, nơi else-- gì Chúng ta có thể làm ở đây? Vì vậy, chúng ta hãy nhìn vào những điều sau đây. Bạn biết những gì loại mát? Chúng tôi đã vậy, đến nay đã làm cho trang web rất tĩnh. Tôi muốn để gia vị lên những điều như sau. Tôi muốn làm cho công cụ tìm kiếm của riêng tôi. Vì vậy, để tạo ra một công cụ tìm kiếm, chúng ta hãy đi trước và bắt đầu làm điều này. Tôi sẽ đi trước và tạo ra một tập tin mới gọi search.html. Và chúng tôi đã prefabed phiên bản trực tuyến. Lỗi chính. Đừng dán vào cửa sổ terminal. Phiên bản lắp ghép trực tuyến. Và tôi sẽ bắt đầu như sau. Vì vậy, đây là sự khởi đầu của một tập tin gọi là search.html. Tôi sẽ lưu nó trong thư mục mã nguồn của ngày hôm nay. Tôi sẽ gọi tìm kiếm. Trên thực tế, chúng tôi sẽ làm cho nó tốt hơn. CS50 Tìm kiếm và thực sự thương hiệu của nó. Và bây giờ, tôi sẽ nói một cái gì đó giống như H1 CS50 Search. Và sau đó xuống đây, H2 đến sớm. Và chỉ để tóm tắt lại, H1 và H2 có nghĩa là những gì tương ứng? Yeah, quá lớn và táo bạo, và không phải là lớn, nhưng vẫn còn in đậm. Vì vậy, nếu tôi lưu này và đi qua đây, chúng ta hãy xem search.html file. Tất cả các quyền, và điều này là right-- [không nghe được]. Stand by. David là bối rối. Oh, nó phải có. David là một thằng ngốc. ĐƯỢC. Vì vậy, có nó được. Vì vậy, CS50 tìm kiếm đến sớm. Vì vậy, bây giờ, chúng ta hãy tổng hợp những gì chúng ta đã làm tuần trước. Nơi mà chúng tôi đã nói chuyện về cơ khí cấp thấp hơn của HTTP. Và những ý tưởng mới của HTML, mà chỉ là ngôn ngữ đánh dấu này, nơi bạn nói với một trình duyệt chính xác phải làm gì và thực hiện các công cụ tìm kiếm của riêng của chúng tôi. Vì vậy, thay vì chỉ nói đến sớm, tôi sẽ giới thiệu một cái gì đó gọi là một thẻ hình thức. Và trong hình thức này, tôi sẽ có một cái gì đó giống như một trường đầu vào. Và tên của đầu vào này lĩnh vực, tôi sẽ gọi nó là Q. Và các loại trường nhập này Tôi sẽ nói chỉ là "văn bản". Và một trường văn bản, như chúng ta sẽ nhìn thấy, chỉ là một hộp văn bản. Và do đó, nó không cảm nhận được ở đây có bất cứ điều gì bên trong của nó vào thời điểm này. Và do đó, tôi chỉ đơn giản là đi để đóng thẻ với dấu gạch chéo ngay trong chính bản thân thẻ. Và sau đó tôi sẽ có một đầu vào khác. Loại đầu vào bằng trình. Và sau đó tôi sẽ đóng một trong những quá. Và bây giờ tôi sẽ quay trở lại đây. Và đã được chúng ta thấy, mặc dù khá xấu xí, tôi đã có sự khởi đầu của trang tìm kiếm của riêng của tôi ở đây. Trong thực tế, chúng ta hãy để tôi cố gắng sạch này lên một chút. Nó chỉ ra rằng trên đầu vào ở đây, tôi có thể có một thuộc tính được gọi giữ chỗ. Và tôi có thể nhìn thấy một cái gì đó giống như từ khoá, hay cụ thể hơn, truy vấn q. Và thông báo, bây giờ, tôi có loại văn bản màu xám mà biến mất như Ngay sau khi tôi bắt đầu đánh máy, nhưng nó là một cái gì đó có thể bạn đã thấy trong các trang web khác. Tôi không thực sự thích các nút Submit. Vì vậy, tôi thực sự sẽ cung cấp cho các Nút gửi một giá trị tìm kiếm. Và bây giờ, nếu tôi tải lại, nhận thấy rằng nút của tôi trở nên có tên là tìm kiếm. Bạn biết đấy, tôi không thực sự như logo ở đây. Vì vậy, máy phát điện Google Font. Tôi muốn thêm gia vị này lên hơn nữa. Vì vậy, tìm kiếm CS50. Hãy để tôi tạo logo của riêng tôi. Điều đó có vẻ tốt đẹp. Vì vậy, bây giờ hãy để tôi tiết kiệm này as-- đi vào. Là nó sẽ đi đâu? Chỗ đó. ĐƯỢC. Bỏ lỡ nó. Lưu. Trình duyệt ngu ngốc. Stand by, chúng ta sẽ sửa lỗi này một lần và cho tất cả. Hiện chúng tôi đi. Được rồi. Lấy làm tiếc. Ngay nghỉ. Bây giờ đây là funky. Thoát khỏi màn hình đầy đủ. Được rồi. Bây giờ, như một bình thường người, lưu hình ảnh như. Logo.gif. Bây giờ tôi sẽ đi vào CS50IDE và Tôi sẽ chỉ đơn giản là lấy các biểu tượng, Tôi sẽ kéo nó vào nguồn bảy thư mục của tôi, tập tin đã tồn tại, tôi là OK với điều đó. Vì vậy, tôi sẽ ghi đè lên nó bởi vì tôi đã có nó. Và bây giờ làm thế nào để tôi nhận được thoát khỏi điều này? Chúng ta hãy đi trước đây và làm nguồn hình ảnh bằng logo.gif. Đóng này. Lưu lại. Và bây giờ nếu tôi quay trở lại để tìm kiếm của tôi trang, bây giờ nó đang tìm kiếm khá tốt. Tất cả các quyền, do đó, nó không có khá làm bất cứ điều gì hữu ích. Trong thực tế, để tôi thử tìm kiếm cho một con mèo và xem những gì sẽ xảy ra. Mèo. Chết tiệt. Nó không chỉ là công việc, rõ ràng. Vì vậy, các mảnh quan trọng là những gì đó là mất tích ở đây? Phải, ngay cả khi bạn không biết bất kỳ HTML, Tôi đã bắt đầu đánh dấu lên các mẫu điện thoại và tôi đã nói với nó như thế nào để có được đầu vào, cho tôi một hộp văn bản và một nút gửi, những mảnh rõ ràng là mất tích? Giả sử chúng ta muốn thực sự có được Điều này làm việc một cách chính xác. Những gì chúng ta cần phải làm gì? Chúng tôi có một nhu cầu để thực hiện các kết thúc trở lại cơ sở dữ liệu hoặc các công cụ tìm kiếm riêng của mình, và rằng sẽ mất một toàn bộ rất nhiều thời gian, thẳng thắn. Vì vậy, hãy nhớ những gì chúng tôi đã làm thời gian qua. Vì vậy, nếu bạn tìm kiếm một cái gì đó trên Google và bạn đã ở trước tắt, thu hồi, tìm kiếm tức thời. Vì vậy, hãy để tôi bật mà tắt để điều này thực sự hoạt động như một trình duyệt học cũ, nếu bây giờ tôi tìm kiếm một cái gì đó giống như mèo, nhớ lại những gì trông giống như URL. Nó khá khó hiểu. Nhưng nhúng trong đó, thu hồi, là tìm kiếm dấu gạch chéo. Câu hỏi đánh dấu q bằng mèo. Và đó dường như để cho tôi một bó toàn bộ các kết quả tìm kiếm. Vì vậy, bạn biết những gì tôi sẽ làm gì? Tôi sẽ mượn Google cho chỉ một phút. Tôi sẽ đi qua ở đây và tôi sẽ nói rằng điều này tạo thành hành động hay đích, có thể nói, nghĩa đen nên được Google. Và phương pháp tôi muốn để sử dụng là có được có được. Vì vậy, hành động này là gì? Hành động được đặt tên thật là thú vị, nhưng điều đó chỉ có nghĩa là ai sẽ là người xử lý các hành động của hình thức này? Khi tôi bấm vào Tìm kiếm, nơi nên kết quả đi? Và nếu bây giờ tôi trở lại hình thức của tôi ở đây và tải lại trang web của tôi và bây giờ tìm kiếm cái gì giống như con chó, chú ý hiện nay Tôi đã đang triển khai Google. Bên phải? Nếu tôi muốn tìm một cái gì khác, nó hoạt động cho không chỉ những con chó, nó cũng làm việc cho mèo. Nó cũng làm việc cho CS50. Và OK, đây chỉ là dưới whelming, không phải là nó? Tất cả các quyền, nhưng nó thực sự hoạt động. Vì vậy, những gì thực sự đã diễn ra? Vì vậy, tôi đã dạy cho trình duyệt của tôi, sử dụng HTML, để có đầu vào từ người sử dụng và thực sự gửi đầu vào đến một máy chủ từ xa bằng cách sử dụng HTTP. Và bởi vì trình duyệt của tôi hiểu HTTP, nó thực sự xây dựng các URL để những gì Tôi kết thúc hơn trong trình duyệt của tôi, thông báo những gì sẽ xảy ra khi tôi tìm kiếm con chó. Nếu tôi bấm Tìm kiếm, nhận thấy rằng URL thay đổi như tôi dự định để google.com/search~~V truy vấn bằng con chó. Và đó là bởi vì hình thức biết, bởi vì phương pháp này là có được, để đơn giản là gắn nó với URL đó. Bây giờ, các trang web vẫn còn xấu xí. Vì vậy, hãy giới thiệu một khác mảnh cú pháp nếu chúng ta có thể ngày hôm nay. Và đây là một cái gì đó được biết đến như kiểu trình bày. Vì vậy, hãy để tôi đi xem một Ví dụ này ở đây và thấy nếu chúng ta có thể suy ra những gì đang xảy ra. Đây là CSS0.html. Và đây là nơi mà mọi thứ có được một chút xấu xí. Bởi vì không may, trong thế giới của các web, HTML một mình không thể làm tất cả mọi thứ. Và vì vậy nếu bạn muốn phong cách hóa trang web của bạn, bạn thực sự cần phải tập trung vào các tính thẩm mỹ trong một cách khác nhau. Vì vậy, ở đây, tôi có cơ thể của web của tôi trang bên trong đó là một div lớn. Và một div chỉ có nghĩa là phân chia. Vì vậy, nó giống như một đoạn nhưng nó không có cùng một ngữ nghĩa của một đoạn văn bản. Điều này chỉ có nghĩa là để các trình duyệt, ở đây có một khu vực hình chữ nhật lớn của web của tôi trang, tôi muốn xử lý nó đặc biệt. Bây giờ, dòng 21 là nơi div bắt đầu. Và chỉ mất một đoán. Tác dụng của dòng 21 trên là gì phần còn lại của các nội dung của trang web? Chỉnh cho nó. Đó là tất cả. Vì vậy, chúng tôi đã không nhìn thấy một cách thực sự tập trung vào văn bản. Trong thực tế, công cụ tìm kiếm của tôi, không giống như thực tế của Google, được tất cả biện minh trên bên trái. Và vì vậy bây giờ ở dòng 21, tôi đang nói, hey trình duyệt, tạo ra một bộ phận của trang. Chỉ cần cho tôi một lớn, hình chữ nhật vô hình. Đó là cách tôi muốn suy nghĩ về trang web. Và sau đó gọi tên nó như sau. Bên trong những dấu ngoặc kép, bây giờ, là một ngôn ngữ thứ hai mà chúng tôi giới thiệu hôm nay gọi là style sheets tầng. Rất may, nó cũng không phải là một ngôn ngữ lập trình, vì vậy nó rất hạn chế trong cú pháp của nó nhưng cũng rất hạn chế trong chức năng của nó trong khi HTML là tất cả về đánh dấu lên các dữ liệu của một trang web và cấu trúc của một trang web. CSS nói chung là về dặm cuối cùng, tính thẩm mỹ, nhận được các kích thước và màu sắc và vị trí chính xác ngay trong một trang web. Và quả thực, nó được hình thành với các cặp giá trị quan trọng. Một tài sản như thế này, văn bản sắp xếp, theo sau bởi một dấu hai chấm, tiếp theo là các giá trị mà tài sản, mà trong trường hợp này là trung tâm. Và bây giờ chú ý đến bạn có thể lồng những điều này. Nếu tôi muốn tất cả mọi thứ trong đó Tôi đã nêu bật được làm trung tâm, đó là lý do tại sao tôi có dòng 21 và dòng tương ứng 31. Nhưng giả sử bây giờ muốn nói John Harvard, chào mừng bạn đến trang chủ của tôi. Biểu tượng quyền tác giả John Harvard. Và giả sử tôi muốn là người đầu tiên của những dòng để được khá lớn. 36 pixels. Vì vậy, đó là một kích thước phù hợp. Và tôi muốn trọng lượng của nó được in đậm. Nhưng sau đó ngay dưới, Tôi muốn văn bản nhỏ hơn. Và dưới đây là, tôi muốn văn bản thậm chí nhỏ hơn. Lấy làm tiếc. Hôm nay cảm thấy như một ngày nghỉ. Vì vậy, bây giờ, những gì tôi làm để thể hiện điều này? Ở đây trên dòng 22 là một nhúng div hoặc div lồng nhau, nếu bạn sẽ. Nó cũng có từ khóa phong cách riêng của mình. Tôi chỉ định kích thước font chữ của 36. Tôi chỉ định một trọng lượng của phông chữ đậm. Xuống đây, tôi chỉ xác định 24 pixels. Và cuối cùng, trong dòng 28, tôi chỉ định 12. Vì vậy, chỉ là một kiểm tra sự tỉnh táo nhanh và như một sự hiểu con người này, mà chữ trên màn hình thực sự sẽ được in đậm? Những dòng này là thực sự táo bạo? Chỉ cần John Harvard. Bên phải? Bởi vì cũng giống như dòng 22 nói hey trình duyệt, đây là một bộ phận của trang. Làm cho nó font size 36 điểm. Làm cho các font đậm. Ngay khi bạn đạt đến thẻ kết thúc tương ứng hoặc thẻ đóng trên dòng 24, đó có nghĩa, hey trình duyệt, ngừng làm bất cứ điều gì nó là bạn đang làm. Và thông báo rõ ràng, mặc dù dòng 22 có tất cả các thuộc tính như phong cách, khi bạn đóng thẻ trong dòng 24, bạn chỉ đề cập đến tên của tag. Bạn không lặp lại các phong cách từ hoặc bất cứ điều gì đó là bên trong những dấu ngoặc kép. Và do đó, nếu tôi nhìn vào điều này bây giờ trong trình duyệt của tôi, chúng ta hãy một nhìn vào kết quả cuối cùng. Hãy để tôi đi trước để tập tin này, đó là CSS 0. Và nó vẫn còn khá đơn giản, nhưng nhận được khá thú vị. Nhưng hóa ra có của những thứ khác tôi có thể làm ở đây, và có nguy cơ làm này hoàn toàn ghê tởm, ý ở đây rằng trong tôi cơ thể của trang web của tôi, Tôi có thể làm gì đó buồn cười như bg hoặc màu nền. Và nhanh chóng, màu sắc yêu thích của bạn là gì? Màu xanh lá cây tôi nghe. Được rồi. Vì vậy, bây giờ, nếu tôi nhấn tải lại bây giờ, chúng tôi có một trang web màu xanh lá cây. Tất cả các quyền, do đó không phải là xấu. Và bây giờ, nếu tôi muốn làm điều này thực sự mát mẻ, tôi có thể làm cho màu sắc của văn bản của tôi thậm chí màu đỏ. Vì vậy, chúng ta hãy xem những gì trông giống như. Bây giờ nó đang tìm kiếm khá tốt. Và ở đây, nếu bạn thực sự muốn gây rối với một người nào đó hoặc nếu bạn muốn được một trong những người cố gắng lừa bạn truy cập vào một trang web vì họ đã bị lừa Google vào suy nghĩ có cả một bó của các từ khóa like-- để xem, tải lại. Nơi nào rồi? Và vì thế, chúng ta. Được rồi. Vì vậy, tôi nói điều này như một sang một bên, chúng tôi sẽ nói về công cụ này trong một vài tuần khi chúng ta nói về an ninh, nếu bạn thực sự nhúng cả chùm từ khóa trong một trang web, ngay cả khi họ không thể nhìn thấy một con người, một người như Google, tất nhiên, vẫn có thể thực sự tìm thấy này. Tất cả các quyền, vì vậy đó là khá gớm guốc khá nhanh chóng. Và trên thực tế, nó không phải là tất cả rằng không giống như cấp web của riêng tôi trang như là một đại học, trong đó Tôi bắt đầu googling xung quanh để tìm phiên bản trước đây của trang web cũ của tôi. Nó là khá xấu. Trong thực tế, tôi đã tìm thấy một ngay trước lớp. Nhưng có tồi tệ ra khỏi đó. Điều này dường như là của tôi trang chủ trở lại vào năm 1996. Rõ ràng tôi nghĩ rằng nó là phù hợp với yêu cầu người dân tên của họ trước khi họ có thể thực sự thấy trang web của tôi. Và sau đó tôi chỉ cho họ một cái gì đó ngu ngốc, có lẽ. Tôi sẽ đào lên nhiều hơn cho thời gian tiếp theo. Nhưng hiện nay, chúng ta hãy xem xét một chút về thiết kế. Chúng tôi đã nói chuyện về phong cách. Và trang này cho đến nay và hầu hết tất cả mọi thứ tôi đã viết là khá sạch sẽ phong cách. Nhưng những gì về thiết kế? Vâng, có rất nhiều dự phòng trong những gì tôi đã làm ở đây. Tôi đã đề cập đến từ màu sắc trong một vài chỗ. Tôi đã đề cập đến kích thước phông chữ trong một vài địa điểm và táo bạo trong một vài chỗ. Và căn bản, tôi đồng hòa hai thứ tiếng. Tôi đã có HTML với thẻ của tôi và của tôi thuộc tính và sau đó tất cả của một đột ngột, giữa dấu ngoặc kép, tôi có ngôn ngữ thứ hai hôm nay gọi là CSS, mà một lần nữa, chỉ là những cặp giá trị hoặc các đặc tính này cách nhau bằng dấu hai chấm. Nó chỉ ra rằng nhiều giống như trong C, nơi chúng tôi có thể bắt đầu yếu tố ra một số mã vào tập tin tiêu đề, vì vậy chúng tôi có thể làm điều tương tự trong HTML. Và một bước về phía đó là như sau. Chú ý rằng phiên bản này, CSS1.html là Về mặt cấu trúc trang web chính xác như nhau. Vì vậy, tôi đã có cả một bó divs, nhưng lần này, tôi đã gạt bỏ các wrapper div như bạn sẽ thấy. Và tôi đã đưa ra những ba divs đầu, giữa và cuối, ID duy nhất. Điều này là tốt đẹp, bởi vì theo cho những bộ phận của trang định danh duy nhất, Tôi có thể tham khảo ở một nơi khác. Ở đâu? Vâng, hãy để tôi di chuyển lên. Và cho đến nay, bất cứ lúc nào chúng tôi đã nhìn ở phần đầu của một trang web, những gì thẻ duy nhất chúng ta đã có trong người đứng đầu của một trang web? A to hơn chút. Chỉ tiêu đề cho đến nay. Nhưng hóa ra có của một số những thứ khác bạn có thể đặt vào đó, một trong những mà nó được gọi là một từ khóa phong cách. Vì vậy, một thời gian trước đây, chúng tôi đã xem tại một thuộc tính phong cách. Hóa ra có một từ khóa phong cách. Nó thuộc về bên trong người đứng đầu của một trang web. Và bây giờ nhận thấy những gì tôi đang làm. Tôi có bên trong này từ khóa phong cách sau đây. Tôi đang nói đến nghĩa đen trên dòng 20 các tên của một thẻ mà tôi muốn gọi tên. Sau đó, tôi có ngoặc móc mở và đóng ngoặc móc. Vì vậy, tinh thần tương tự C, nhưng một lần nữa, đây không phải là một chức năng, đây chỉ là một chi tiết cú pháp ở đây. Và dĩ nhiên, tôi nói trình duyệt, trình duyệt hey, làm cho toàn bộ cơ thể của trang có một sự liên kết văn bản của trung tâm. Và sau đó điều này được nói những điều sau đây. Hey trình duyệt, nếu bạn thấy một HTML nguyên tố hoặc tag trong trang đó có một định danh duy nhất của top, do đó, các biểu tượng băm ở đây chỉ có nghĩa là ý tưởng độc đáo của đầu, đi trước và làm cho kích thước phông chữ của nó 36 và trọng lượng phông chữ của nó đậm. Hey trình duyệt, một yếu tố mà ID là trung bình, làm cho nó 24 pixels. Và hey duyệt, nếu bạn nhìn thấy một ý tưởng của phía dưới, làm cho nó 12 pixels. Hiệu quả cuối cùng là chính xác sam. Nếu tôi đi vào CSS 1, trang trông giống nhau. Nhưng chúng tôi một bước tiến tới một thiết kế tốt hơn một chút. Bây giờ hãy để tôi quay lại đây để CSS2 và xem những gì khác tôi đã thực hiện. Bây giờ trang thực sự, thực sự sạch sẽ. Trong thực tế, tôi có thể phù hợp với tất cả các các nội dung trên một trang ở đây. Nhưng những gì tôi có tag mới giới thiệu, rõ ràng? Link. Và nó không phải là tên tốt nhất cho một thẻ, bởi vì nó không phải là một liên kết trong ý nghĩa mà chúng ta biết điều đó, nhưng điều này có nghĩa là một liên kết trong một số tập tin khác. Đây là loại giống như bao gồm sắc nét trong C. Đây là cách trong HTML để nói hey trình duyệt, đi được nội dung của các tập tin gọi là css2.css. Các mối quan hệ, với tôi, là nó là một style sheet. Và quả thực, đó là những gì một trong những Của S trong cascading style sheets phương tiện. Đây là một style sheet. Nó chỉ là tập tin văn bản có chứa một bó toàn bộ tài sản. Đó là một bó toàn bộ phong cách mà bạn muốn áp dụng cho một trang. Và do đó, đây rõ ràng là đề cập đến một tập tin thứ hai. Và nếu tôi mở rằng, CSS2.css, nhận thấy rằng tất cả tôi đã thực hiện là sao chép và dán tất cả điều này vào trong tập tin này. Và bây giờ, ngay cả khi bạn chưa bao giờ mã hóa công cụ này trước khi, chỉ xem xét với các hat kỹ thuật ngôn trên, tại sao là một này thiết kế tốt hơn có lẽ? Bao thanh toán ra những thuộc tính CSS, đưa chúng vào tập tin riêng của họ. Mặc dù chúng tôi đã giải quyết này vấn đề như năm phút trước trong phiên bản đầu tiên. Chúng tôi đã không cải thiện trang phong cách, đây chỉ là tốt hơn thiết kế trong một nghĩa nào đó. Tại sao bạn nghĩ rằng? Yeah. Linh hoạt hơn như thế nào? Yeah. Vì vậy, nếu bạn muốn đi trở lại và thay đổi mọi thứ, Hiện tại, bạn có một nơi nơi bạn có thể thay đổi mọi thứ. Và trên thực tế, cho một cái gì đó như vấn đề thiết lập bảy, mà chúng ta sẽ thực hiện một trang web kinh doanh chứng khoán, đó là sẽ có một bó toàn bộ các trang. Và nó sẽ thực sự gây phiền nhiễu nếu bạn quyết định, hm, Tôi không thực sự thích 24 pixels, tôi muốn nó là 28 pixels hoặc lớn hơn một chút. Và sau đó phải làm một toàn cầu tìm và thay thế hoặc mở tất cả các tập tin trang web của bạn chỉ đơn giản là để thực sự thay đổi một giá trị. Bằng cách phân ra các phong cách thành một trong những địa điểm trung tâm, bây giờ bạn có thể mở một tập tin văn bản trong CS50IDE vào bất kỳ chương trình, thay đổi nó, lưu nó, và thực hiện. Bạn đã nhân giống những thay đổi ở khắp mọi nơi. Và đó sẽ là như nhau trong một file dot h là tốt. Vì vậy, bất kỳ câu hỏi như vậy, xa về cú pháp này? Được rồi, vì vậy chúng tôi đã thực hiện tất cả mọi thứ có vẻ như ngoại trừ thực sự thực hiện các siêu liên kết. Và như vậy chúng ta hãy đi trước và làm điều này. Hãy để tôi đi trước và tạo ra một tập tin mới ở đây. Tôi sẽ gọi nó link.html, đặt trong mã ngày nay. Và tôi sẽ làm mở khung loại doc html. Là một sang một bên, điều này tại top, doc khai báo kiểu này, nó chỉ có một mà là lạ với dấu chấm than. Bạn chỉ cần có để làm điều đó ở đó và nó nghĩa là chúng ta đang sử dụng HTML phiên bản 5. Các phiên bản cũ hơn của ngôn ngữ có nhiều thời gian hơn dây mà bạn cần phải đặt ở đó. Vì vậy, đây là một ví dụ được gọi là liên kết. Tôi cần một cơ thể của trang web của tôi ở đây. Và ở đây, một equals href hãy nói HTTP://www.disney.com và trang web yêu thích của tôi, chúng tôi sẽ nói. Tất cả các quyền, do đó, một rất vô hại, thân thiện với người sử dụng trang. Nếu bây giờ tôi đi vào thư mục của tôi liệt kê ở đây và mở ra link.html, chúng tôi có văn bản siêu. Và quả thực, đây là nơi mà H trong HTTP đến từ. Giao thức truyền siêu văn bản là về việc chuyển văn bản mà có các liên kết đến các tài nguyên khác. Và quả thực, đây là quen thuộc, nếu retro, liên kết màu xanh mà nếu click vào, sẽ thực sự đưa tôi đến với Disney.com. Bây giờ, oh, đó là sắp ra sớm. Được rồi, vậy bây giờ, là những gì một số những ý nghĩa của điều này? Và thẳng thắn mà nói, thế giới bắt đầu để có được nhiều hơn một chút quen thuộc và cũng có một chút đáng sợ nhưng cũng nhiều hơn một chút tự bảo vệ được khi bạn bắt đầu để hiểu những điều này. Bởi vì tỷ lệ cược là, một số bạn, nếu bạn đi thông qua các thư mục thư rác Gmail của bạn hoặc thậm chí hộp thư đến của bạn, bạn đã có thể nhận được một số loại email đó là yêu cầu bạn thay đổi của bạn mật khẩu có lẽ hoặc có thể xác minh chứng chỉ PayPal của bạn hoặc có điều gì. Và trong thực tế, bạn có thể đã nhận cái gì mà nói như bấm vào đây để thiết lập lại mật khẩu của bạn PayPal. Và bây giờ, thông báo, nếu đây không phải là Disney.com nhưng cũng giống như badplace.com và tải lại, lưu ý rằng các văn bản ở đây có thể nói bất cứ điều gì nào. Và trên thực tế, đây chỉ là lời nói. Tại sao tôi không thực sự là siêu độc hại và nói http://www.paypal.com. Nhấn vào đây thiết lập lại PayPal của bạn mật khẩu và bây giờ tải lại. Điều này có vẻ khá chính đáng, phải không? Ý tôi là, tôi sẽ không bấm vào một email mà chỉ nói điều này. Nhưng nhận thấy sự phân đôi ở đây. Nó nói www.paypal.com, và trong thực tế, chờ một phút, chúng tôi biết rằng bạn muốn s để bảo mật. Vì vậy, bây giờ, đi vào www.paypal.com HTTPS, nhưng nếu bạn đã không bao giờ làm điều này trước, không nhận được vào các thói quen lơ lửng trên các liên kết nhỏ ở đây. Và thật khó để xem trên màn hình đó, và nó không phải là tất cả những gì dễ dàng hơn ở đây. Nhưng cách xuống đây ở góc nhỏ nhỏ hiện các trình duyệt thực sự nói với bạn rằng chúng tôi đang đi để badplace.com thay vì Paypal.com. Bây giờ, chúng ta đi đâu với điều này? Tất cả các ví dụ chúng tôi đã làm ngày hôm nay, chúng tôi đã cứng mã hoá và đánh ra tay. Các web là vô cùng không thú vị khi bạn cứng mã trang web của bạn để nội dung là tĩnh và không bao giờ thay đổi. Tất nhiên, tất cả chúng tôi các trang web ưa thích của ngày hôm nay, cho dù đó là Gmail hay Twitter hay Facebook hoặc bất kỳ số nào của người khác năng động. Họ đang thay đổi trong phản ứng để người dùng nhập vào giống như các kết quả tìm kiếm Google. Và như vậy vào hôm thứ Tư, những gì chúng tôi làm là chúng tôi rời khỏi HTML và CSS giới thiệu phía sau chúng tôi và chúng tôi cho cấp mà chúng tôi hiện nay biết điều đó và chúng tôi giới thiệu một ngôn ngữ lập trình mới gọi là PHP, mà thích C, sẽ cung cấp cho chúng tôi sức mạnh để thực sự tạo ra các chương trình mà mình tạo ra. Trong trường hợp này, chúng ta sẽ sử dụng PHP để tạo ra động web các trang bằng cách sử dụng ngôn ngữ mới này. Vì vậy, thêm vào đó hôm thứ Tư. Gặp lại sau. [MUSIC CHƠI]