1 00:00:00,000 --> 00:00:03,486 >> [MUSIC CHƠI] 2 00:00:03,486 --> 00:00:10,460 3 00:00:10,460 --> 00:00:14,250 >> DAVID Malan J: Đây là CS50 và đây là khởi đầu của tuần thứ 7. 4 00:00:14,250 --> 00:00:15,060 Vì vậy, chào mừng trở lại. 5 00:00:15,060 --> 00:00:17,540 Và bạn có thể nhớ lại rằng trong vấn đề thiết lập bốn, 6 00:00:17,540 --> 00:00:21,510 đã 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 đó 7 00:00:21,510 --> 00:00:24,219 sau khi bạn khôi phục các bức ảnh của Nhân viên ở đây và ở New Haven, 8 00:00:24,219 --> 00:00:27,468 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ể. 9 00:00:27,468 --> 00:00:29,550 Và chúng tôi đã có một toàn bộ bó đệ trình. 10 00:00:29,550 --> 00:00:31,930 Nghĩ rằng tôi muốn chia sẻ một vài với bạn ở đây ngày hôm nay. 11 00:00:31,930 --> 00:00:35,100 >> Và chúng tôi sẽ gửi tất cả các tuyến. 12 00:00:35,100 --> 00:00:39,310 Nhưng đặc biệt, tôi muốn hút sự chú ý của bạn đối với: cũng một, 13 00:00:39,310 --> 00:00:42,670 Sam đã ở khá một vài trong số họ thường đặt ra như thế này. 14 00:00:42,670 --> 00:00:45,750 Nhưng có vẻ như của Sáng nay, người chiến thắng 15 00:00:45,750 --> 00:00:51,170 đượ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 16 00:00:51,170 --> 00:00:54,600 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. 17 00:00:54,600 --> 00:00:58,300 Hình ở đây là Ken tiếp theo Mẹ Maria ở New Haven. 18 00:00:58,300 --> 00:01:01,300 >> Bây giờ, Ken, mặc dù, quay ra là bit của một trường hợp góc 19 00:01:01,300 --> 00:01:02,880 đó là chưa từng xảy ra trước. 20 00:01:02,880 --> 00:01:05,713 Nó chỉ ra rằng nó đã không xảy ra với tôi để đặt in nhỏ trong vấn đề 21 00:01:05,713 --> 00:01:09,710 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 22 00:01:09,710 --> 00:01:13,130 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. 23 00:01:13,130 --> 00:01:16,820 Bây giờ, với những gì đã nói, ông ban đầu được viết cho tôi để nói 24 00:01:16,820 --> 00:01:19,180 xin vui lòng không gửi các hình ảnh trực tuyến. 25 00:01:19,180 --> 00:01:21,630 Tôi nghĩ rằng một phần lớn bởi vì hầu hết các bức ảnh 26 00:01:21,630 --> 00:01:24,499 mà nhiếp ảnh gia này đã tìm một chút gì đó như thế này. 27 00:01:24,499 --> 00:01:25,040 Và như thế. 28 00:01:25,040 --> 00:01:28,990 >> 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, 29 00:01:28,990 --> 00:01:33,190 ông là một chuyên gia, ông mất hình ảnh mà không bị mờ, 30 00:01:33,190 --> 00:01:37,270 đượ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. 31 00:01:37,270 --> 00:01:40,370 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 32 00:01:40,370 --> 00:01:43,390 được đi qua danh sách các sinh viên thực tế đã nộp. 33 00:01:43,390 --> 00:01:48,640 Và nó chỉ ra rằng Lance với 15 ảnh như sáng nay 34 00:01:48,640 --> 00:01:50,030 là người chiến thắng của chúng tôi. 35 00:01:50,030 --> 00:01:55,730 >> Và hình ở đây là Lance với Colton, với Skaz, với bản thân mình, và với Sam. 36 00:01:55,730 --> 00:02:00,230 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, 37 00:02:00,230 --> 00:02:04,380 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 38 00:02:04,380 --> 00:02:08,300 bởi một sinh viên tên là Bonnie email mà chỉ này cho biết. 39 00:02:08,300 --> 00:02:10,800 Không nói dối, tôi làm điều này trong lớp học. 40 00:02:10,800 --> 00:02:17,620 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. 41 00:02:17,620 --> 00:02:22,690 >> Nhưng trong bức ảnh của Bonnie, nó quay ra được nhiều nhân viên, Sam 42 00:02:22,690 --> 00:02:25,960 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. 43 00:02:25,960 --> 00:02:29,240 Vì vậy, ngoài việc nhận được Dropbox không gian mà tất cả những người tham gia 44 00:02:29,240 --> 00:02:33,900 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ọ 45 00:02:33,900 --> 00:02:36,100 và phần của họ giao phối trong tuần tới. 46 00:02:36,100 --> 00:02:38,970 Và như vậy bạn sẽ nghe từ chúng tôi, Lance và Bonnie, về điều đó. 47 00:02:38,970 --> 00:02:40,002 Congrats quá lớn đối với họ. 48 00:02:40,002 --> 00:02:42,210 Bây giờ, những người bạn của những người sẽ như ăn trưa chung hơn 49 00:02:42,210 --> 00:02:45,320 biết rằng CS50 ăn trưa tại Cambridge và New Haven là thứ Sáu này. 50 00:02:45,320 --> 00:02:48,510 Tới trang web của slash RSVP CS50 của. 51 00:02:48,510 --> 00:02:49,800 Và bây giờ là một lời về hội thảo. 52 00:02:49,800 --> 00:02:50,730 Curricularly hơn. 53 00:02:50,730 --> 00:02:52,490 Vì vậy, chúng ta đang ở gần điểm của học kỳ 54 00:02:52,490 --> 00:02:55,200 nơi bạn nên bắt đầu suy nghĩ về dự án cuối cùng. 55 00:02:55,200 --> 00:02:59,309 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. 56 00:02:59,309 --> 00:03:01,850 Vì vậy, đề nghị trước có nghĩa là để tác động được khá thấp và thực sự 57 00:03:01,850 --> 00:03:04,109 chỉ là một cơ hội cho bạn soạn một ghi chú ngắn 58 00:03:04,109 --> 00:03:06,900 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 59 00:03:06,900 --> 00:03:09,140 có thể muốn làm cho dự án cuối cùng của bạn. 60 00:03:09,140 --> 00:03:11,730 >> 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. 61 00:03:11,730 --> 00:03:13,800 Và tất nhiên, chúng tôi chỉ tuần nay cuối cùng trong này 62 00:03:13,800 --> 00:03:15,890 và xa hơn nữa lặn vào lập trình web. 63 00:03:15,890 --> 00:03:18,200 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 64 00:03:18,200 --> 00:03:21,594 bạn sẽ xây dựng những ý tưởng đó bạn có thể có trong tâm trí của bạn. 65 00:03:21,594 --> 00:03:24,510 Đ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 66 00:03:24,510 --> 00:03:25,650 với TF của bạn về nó. 67 00:03:25,650 --> 00:03:28,810 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, 68 00:03:28,810 --> 00:03:31,750 biết rằng CS50 có một truyền thống của việc đưa ra hội thảo. 69 00:03:31,750 --> 00:03:36,084 >> 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 70 00:03:36,084 --> 00:03:39,000 để 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 71 00:03:39,000 --> 00:03:43,310 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. 72 00:03:43,310 --> 00:03:46,840 Và vì vậy đây là danh sách đó là Nhân viên CS50 đây ở New Haven 73 00:03:46,840 --> 00:03:48,600 đã đưa ra cho năm nay về iOS 74 00:03:48,600 --> 00:03:50,730 lập trình, Android lập trình, phát triển game, 75 00:03:50,730 --> 00:03:54,480 và chùm của nhiều công cụ hơn và các ngôn ngữ và kỹ thuật. 76 00:03:54,480 --> 00:03:56,780 >> Vì vậy, giữ một mắt trên website của CS50. 77 00:03:56,780 --> 00:04:00,110 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, 78 00:04:00,110 --> 00:04:02,510 đi đến slash đăng ký CS50 của. 79 00:04:02,510 --> 00:04:05,770 Và sau đó chúng tôi sẽ theo dõi để các ngày và giờ bay và các địa điểm 80 00:04:05,770 --> 00:04:09,090 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 81 00:04:09,090 --> 00:04:11,750 sau khi nếu bạn không thực sự có thể làm cho nó. 82 00:04:11,750 --> 00:04:15,800 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. 83 00:04:15,800 --> 00:04:19,610 >> Và điều này giống như thông điệp đó là bên trong phong bì ảo, nhắc lại, 84 00:04:19,610 --> 00:04:23,960 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 85 00:04:23,960 --> 00:04:24,487 máy chủ. 86 00:04:24,487 --> 00:04:26,695 Và thông điệp mà nhìn một chút gì đó như thế này. 87 00:04:26,695 --> 00:04:29,700 Đây là thông điệp phức tạp hơn đã thực sự bên trong một phong bì 88 00:04:29,700 --> 00:04:34,440 đượ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. 89 00:04:34,440 --> 00:04:37,830 >> 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ị? 90 00:04:37,830 --> 00:04:40,455 Không gạch chéo có nghĩa là gì khi yêu cầu một trang web? 91 00:04:40,455 --> 00:04:43,070 92 00:04:43,070 --> 00:04:44,250 Bạn yêu cầu tất cả các thời gian. 93 00:04:44,250 --> 00:04:47,333 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. 94 00:04:47,333 --> 00:04:50,960 Bạn có thể chỉ cần đi đến Facebook.com, nhập, gmail.com, hoặc tương tự. 95 00:04:50,960 --> 00:04:52,260 Và những gì hiện dấu gạch chéo đại diện? 96 00:04:52,260 --> 00:04:53,506 Tập tin gì? 97 00:04:53,506 --> 00:04:54,630 Hoặc những gì trang, cụ thể? 98 00:04:54,630 --> 00:04:59,642 99 00:04:59,642 --> 00:05:00,720 >> Các chỉ số, yeah. 100 00:05:00,720 --> 00:05:01,810 Vì vậy, các trang mặc định. 101 00:05:01,810 --> 00:05:04,810 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, 102 00:05:04,810 --> 00:05:07,750 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 103 00:05:07,750 --> 00:05:10,800 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 104 00:05:10,800 --> 00:05:12,510 trên trang web của CNN hoặc tương tự. 105 00:05:12,510 --> 00:05:15,220 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ì đó 106 00:05:15,220 --> 00:05:18,420 như thế này, nói rằng có, tôi nói HTTP phiên bản 1.1. 107 00:05:18,420 --> 00:05:21,130 >> 200, mà là một trạng thái code mà chúng ta hiếm khi con người 108 00:05:21,130 --> 00:05:22,790 bao giờ nhìn thấy bởi vì nó là tốt. 109 00:05:22,790 --> 00:05:26,640 Bởi vì nó có nghĩa là OK, yêu cầu đã nhận và xử lý đúng cách. 110 00:05:26,640 --> 00:05:28,960 Và các loại nội dung rõ ràng trong các phản ứng 111 00:05:28,960 --> 00:05:31,170 là khá thường xuyên, nhưng không phải lúc nào, văn bản. 112 00:05:31,170 --> 00:05:32,580 Và đặc biệt, HTML. 113 00:05:32,580 --> 00:05:34,760 Và đó là thực sự nơi chúng ta nhìn vào ngày hôm nay. 114 00:05:34,760 --> 00:05:37,140 >> Vì vậy, trong thực tế, tôi sẽ đi trước và mở một trình duyệt. 115 00:05:37,140 --> 00:05:40,410 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. 116 00:05:40,410 --> 00:05:42,410 Chúng tôi thường khuyên Chrome vì nó đặc biệt 117 00:05:42,410 --> 00:05:43,750 tốt cho các nhà phát triển phần mềm. 118 00:05:43,750 --> 00:05:46,070 Nó có rất nhiều trong xây dựng công cụ mà làm cho nó dễ dàng hơn 119 00:05:46,070 --> 00:05:49,800 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, 120 00:05:49,800 --> 00:05:51,530 mà còn các ngôn ngữ khác. 121 00:05:51,530 --> 00:05:55,530 >> 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 122 00:05:55,530 --> 00:05:57,210 nhấp vào bất cứ nơi nào trên một trang web. 123 00:05:57,210 --> 00:05:59,070 Và tôi sẽ đi đến Kiểm tra Element. 124 00:05:59,070 --> 00:06:03,850 Và tôi sẽ tinh chỉnh của tôi màn hình chỉ là một chút ở đây. 125 00:06:03,850 --> 00:06:05,790 Hãy để tôi di chuyển này để phía dưới. 126 00:06:05,790 --> 00:06:08,140 Vì vậy, đây là những gì được gọi là Thanh tra của Chrome. 127 00:06:08,140 --> 00:06:11,010 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. 128 00:06:11,010 --> 00:06:13,520 >> Tất cả các bạn đã có này nếu bạn đã sử dụng Chrome. 129 00:06:13,520 --> 00:06:17,169 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. 130 00:06:17,169 --> 00:06:19,210 Vì vậy, hãy thực sự mất một xem xét điều này như sau. 131 00:06:19,210 --> 00:06:21,251 Nó có tính năng cách hơn và chúng tôi quan tâm hiện nay. 132 00:06:21,251 --> 00:06:22,760 Nhưng có những tab này ở đây. 133 00:06:22,760 --> 00:06:25,890 Elements, mạng, nguồn tin, thời gian, và một số thứ khác. 134 00:06:25,890 --> 00:06:27,800 Tôi sẽ bấm vào Mạng cho một thời điểm. 135 00:06:27,800 --> 00:06:30,500 >> Và đó là một chút áp đảo ở cái nhìn đầu tiên ở đây. 136 00:06:30,500 --> 00:06:34,190 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. 137 00:06:34,190 --> 00:06:37,560 Tôi sẽ bật ghi lại ánh sáng để nó là màu đỏ. 138 00:06:37,560 --> 00:06:39,140 Và tôi sẽ nói bảo log. 139 00:06:39,140 --> 00:06:41,015 Và đây chỉ là một chút điều tôi đã tìm ra 140 00:06:41,015 --> 00:06:44,120 qua thời gian đó sẽ tiết kiệm mọi thứ xảy ra trong trình duyệt. 141 00:06:44,120 --> 00:06:50,030 Và bây giờ tôi sẽ đi để http://facebook.com. 142 00:06:50,030 --> 00:06:52,690 >> 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. 143 00:06:52,690 --> 00:06:53,643 Vào. 144 00:06:53,643 --> 00:06:56,180 Vì vậy, một URL mà nhiều người trong bạn có thể đã đến thăm. 145 00:06:56,180 --> 00:06:58,830 Và bây giờ web của Facebook trang xuất hiện ở đầu trang. 146 00:06:58,830 --> 00:07:02,350 Và sau đó một bó toàn bộ thứ trôi qua ở phía dưới. 147 00:07:02,350 --> 00:07:04,830 Và trên thực tế, nó chỉ ra rằng khi bạn truy cập vào Facebook.com, 148 00:07:04,830 --> 00:07:09,320 bạn không chỉ làm cho một yêu cầu HTTP, nó chỉ ra rằng sẽ Facebook.com 149 00:07:09,320 --> 00:07:14,320 gửi 41 của những phong bì, mỗi nhận được yêu cầu riêng của mình, 150 00:07:14,320 --> 00:07:18,360 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, 151 00:07:18,360 --> 00:07:24,040 nó chỉ ra rằng, quả thật, tôi trình duyệt thực hiện 41 yêu cầu. 152 00:07:24,040 --> 00:07:29,689 >> Và trong tổng số, nó được chuyển 861 kilobyte và nó mất vì một lý do 153 00:07:29,689 --> 00:07:31,730 như nhiều như tám giây để tải về tất cả điều đó. 154 00:07:31,730 --> 00:07:33,790 Vì vậy, đó thực sự là một chút lạ rằng trang web của Facebook sẽ mất rằng 155 00:07:33,790 --> 00:07:35,600 dài, nhưng như vậy có thể là trong trường hợp này. 156 00:07:35,600 --> 00:07:39,520 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. 157 00:07:39,520 --> 00:07:46,440 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. 158 00:07:46,440 --> 00:07:47,754 >> Và hãy để tôi phóng to này. 159 00:07:47,754 --> 00:07:50,670 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 160 00:07:50,670 --> 00:07:53,360 là tôi đã nêu bật Facebook.com và sau đó 161 00:07:53,360 --> 00:07:56,540 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, 162 00:07:56,540 --> 00:07:58,330 yêu cầu tiêu đề. 163 00:07:58,330 --> 00:08:01,720 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 164 00:08:01,720 --> 00:08:02,810 các yêu cầu tôi thực hiện. 165 00:08:02,810 --> 00:08:06,130 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, 166 00:08:06,130 --> 00:08:09,481 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, 167 00:08:09,481 --> 00:08:10,730 đó là file tôi yêu cầu. 168 00:08:10,730 --> 00:08:12,930 >> Và sau đó nếu tôi di chuyển sao lưu, chúng tôi sẽ thực sự 169 00:08:12,930 --> 00:08:17,270 thấy rằng những gì Facebook trở lại với tôi là tất cả các tiêu đề. 170 00:08:17,270 --> 00:08:21,040 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. 171 00:08:21,040 --> 00:08:23,130 Một chữ, dấu hai chấm, và sau đó là một giá trị. 172 00:08:23,130 --> 00:08:25,050 Một chữ, dấu hai chấm, và một giá trị. 173 00:08:25,050 --> 00:08:26,160 Đây là gọi là các header. 174 00:08:26,160 --> 00:08:31,860 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ờ. 175 00:08:31,860 --> 00:08:33,750 >> Nhưng đây là lần thứ hai người cuối cùng xuống đó, 176 00:08:33,750 --> 00:08:38,809 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. 177 00:08:38,809 --> 00:08:41,409 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 178 00:08:41,409 --> 00:08:44,300 trang từ một trình duyệt đến một máy chủ, máy chủ có thể đáp 179 00:08:44,300 --> 00:08:47,630 với một phong bì riêng của mình bên trong đó là văn bản. 180 00:08:47,630 --> 00:08:49,020 Nói cách khác, HTML. 181 00:08:49,020 --> 00:08:50,590 HyperText Markup Language. 182 00:08:50,590 --> 00:08:53,200 Đó là một ngôn ngữ khác mà chúng tôi giới thiệu hôm nay 183 00:08:53,200 --> 00:08:57,740 rằng con người hay máy tính tạo ra để thực hiện các trang web. 184 00:08:57,740 --> 00:08:59,580 >> Cụ thể, chúng ta hãy nhìn vào điều này. 185 00:08:59,580 --> 00:09:03,277 Tôi sẽ quay trở lại với doanh nghiệp vào trang web của Facebook. 186 00:09:03,277 --> 00:09:05,360 Và tôi sẽ chỉ kiểm soát nhấp chuột hoặc click chuột phải 187 00:09:05,360 --> 00:09:07,634 và click vào View Page Source. 188 00:09:07,634 --> 00:09:10,550 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, 189 00:09:10,550 --> 00:09:14,060 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. 190 00:09:14,060 --> 00:09:18,990 Và đây là HTML mà Mark và Công ty tại Facebook đã viết. 191 00:09:18,990 --> 00:09:24,640 >> Và chung, ngôn ngữ này ở đây thực hiện các màu xanh và màu trắng trang 192 00:09:24,640 --> 00:09:26,370 mà chúng ta đã thấy một chút thời gian trước đây. 193 00:09:26,370 --> 00:09:28,030 Bây giờ, đây là một chút áp đảo. 194 00:09:28,030 --> 00:09:31,400 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. 195 00:09:31,400 --> 00:09:34,140 Dường như có rất nhiều các khung góc mở 196 00:09:34,140 --> 00:09:35,970 và sau đó có HTML từ khóa này. 197 00:09:35,970 --> 00:09:38,330 Đây là một mở khung góc và đầu. 198 00:09:38,330 --> 00:09:41,560 >> Dưới đây là, nếu chúng ta di chuyển xuống và xuống và xuống, tôi 199 00:09:41,560 --> 00:09:43,820 sẽ đi trước và thử để tìm kiếm một cái gì đó. 200 00:09:43,820 --> 00:09:48,510 Có cách trên bên phải đây là mở cơ khung. 201 00:09:48,510 --> 00:09:50,800 Và nhớ lại từ cuối cùng thời gian đó, chúng tôi đề xuất 202 00:09:50,800 --> 00:09:53,364 rằng các trang web đơn giản rằng một con người có thể viết 203 00:09:53,364 --> 00:09:55,030 có thể nhìn một chút gì đó như thế này. 204 00:09:55,030 --> 00:09:58,430 Mở thẻ HTML, mở đầu thẻ, mở thẻ tiêu đề, 205 00:09:58,430 --> 00:10:03,230 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ể, 206 00:10:03,230 --> 00:10:04,720 HTML kín. 207 00:10:04,720 --> 00:10:06,290 >> Nhưng tạm dừng ở đây một lát. 208 00:10:06,290 --> 00:10:09,030 Mã này, thậm chí nếu bạn đã không bao giờ viết nó trước 209 00:10:09,030 --> 00:10:11,864 nhưng vẫn không hoàn toàn hiểu những gì đang xảy ra, có vẻ khá tốt. 210 00:10:11,864 --> 00:10:12,821 Phải, nó rất sạch sẽ. 211 00:10:12,821 --> 00:10:14,120 Nó rất phong cách tốt đẹp. 212 00:10:14,120 --> 00:10:16,190 Rất nhiều thụt đầu dòng và khoảng trắng. 213 00:10:16,190 --> 00:10:18,020 Facebook không phải là. 214 00:10:18,020 --> 00:10:23,190 Vì vậy, tại sao Facebook quá nhiều tồi tệ hơn tôi tại văn bản HTML? 215 00:10:23,190 --> 00:10:24,310 Rõ ràng. 216 00:10:24,310 --> 00:10:26,899 >> Đúng, điều này cũng giống như một trong số năm cho phong cách. 217 00:10:26,899 --> 00:10:29,315 Có một lý do thuyết phục cho họ phải cắt giảm các góc. 218 00:10:29,315 --> 00:10:31,069 219 00:10:31,069 --> 00:10:33,860 Đượ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ó. 220 00:10:33,860 --> 00:10:36,940 Vì vậy, trong một nghĩa nào đó, họ obfuscating nó, loại xáo trộn nó 221 00:10:36,940 --> 00:10:40,260 ít nhất là về mặt thẩm mỹ như vậy rằng nó khó khăn hơn cho Myspace 222 00:10:40,260 --> 00:10:42,705 đi và rip off của họ trang chủ và HTML cho nó. 223 00:10:42,705 --> 00:10:45,080 Nó chỉ ra rằng với chương trình mặc dù, bao gồm Chrome, 224 00:10:45,080 --> 00:10:47,020 chúng ta có thể làm sạch này lên siêu dễ dàng. 225 00:10:47,020 --> 00:10:49,420 Vì vậy, nó không hoàn toàn mà là lý do. 226 00:10:49,420 --> 00:10:51,290 Những gì người khác có thể là nguyên nhân. 227 00:10:51,290 --> 00:10:51,790 Yeah. 228 00:10:51,790 --> 00:10:54,680 229 00:10:54,680 --> 00:10:55,890 Yeah, chi phí khoảng trắng dữ liệu. 230 00:10:55,890 --> 00:10:56,598 Ý anh là gì? 231 00:10:56,598 --> 00:11:02,250 232 00:11:02,250 --> 00:11:02,979 Vâng, chính xác. 233 00:11:02,979 --> 00:11:06,020 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. 234 00:11:06,020 --> 00:11:10,060 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. 235 00:11:10,060 --> 00:11:14,560 >> 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 236 00:11:14,560 --> 00:11:17,899 trong trang HTML này đại diện trang chủ của Facebook. 237 00:11:17,899 --> 00:11:19,690 Và Facebook có rất nhiều của người sử dụng những ngày này. 238 00:11:19,690 --> 00:11:24,030 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. 239 00:11:24,030 --> 00:11:27,020 Và ai đó ở Facebook có nhấn thanh không gian chỉ một lần. 240 00:11:27,020 --> 00:11:29,890 >> Vì vậy, một byte bổ sung, một tỉ yêu cầu, 241 00:11:29,890 --> 00:11:32,790 làm thế nào nhiều dữ liệu hơn là Facebook chuyển qua internet 242 00:11:32,790 --> 00:11:37,160 vì có người trúng spacebar trên bàn phím của mình? 243 00:11:37,160 --> 00:11:41,660 Một tỷ byte, hoặc một gigabyte dữ liệu đang được gửi từ máy chủ Facebook 244 00:11:41,660 --> 00:11:43,626 cho những người xung quanh thế giới không có lý do tốt. 245 00:11:43,626 --> 00:11:44,750 Bây giờ, đó chỉ là một không gian. 246 00:11:44,750 --> 00:11:48,866 >> 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 247 00:11:48,866 --> 00:11:50,990 rất nhiều không gian màu trắng và ký tự tab và không gian, 248 00:11:50,990 --> 00:11:53,656 bạn kết thúc gigabyte chi tiêu, nếu không terra byte nữa của không gian. 249 00:11:53,656 --> 00:11:56,640 Và như vậy siêu phổ biến ở thế giới thực tế của phát triển web 250 00:11:56,640 --> 00:11:58,950 là để giảm bớt mã của bạn. 251 00:11:58,950 --> 00:12:01,280 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. 252 00:12:01,280 --> 00:12:04,630 >> 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. 253 00:12:04,630 --> 00:12:10,120 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, 254 00:12:10,120 --> 00:12:12,030 trước đây, chúng tôi đã vào tab Network. 255 00:12:12,030 --> 00:12:15,430 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 256 00:12:15,430 --> 00:12:19,230 là Chrome của khá in phiên bản của cùng một HTML. 257 00:12:19,230 --> 00:12:20,640 Vì vậy, chúng tôi đã deobfuscated nó. 258 00:12:20,640 --> 00:12:22,472 Vì vậy, nó không phù hợp cho một máy tính. 259 00:12:22,472 --> 00:12:24,430 Và bây giờ bạn có thể thực sự nhấp vào xung quanh và bắt đầu 260 00:12:24,430 --> 00:12:27,630 để xem các hệ thống cấp bậc đó là một trang web. 261 00:12:27,630 --> 00:12:28,780 Vì vậy, hãy thực hiện điều này. 262 00:12:28,780 --> 00:12:32,120 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. 263 00:12:32,120 --> 00:12:35,490 Và nhớ rằng đây chỉ là một chương trình văn bản siêu đơn giản. 264 00:12:35,490 --> 00:12:37,490 Windows có notepad.exe. 265 00:12:37,490 --> 00:12:39,820 Và tôi sẽ Verbatim gõ như sau. 266 00:12:39,820 --> 00:12:44,650 Doc kiểu HTML, mở khung HTML, đóng khung HTML, 267 00:12:44,650 --> 00:12:49,000 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, 268 00:12:49,000 --> 00:12:52,310 một tiêu đề sẽ như thế nào, xin chào thế giới. 269 00:12:52,310 --> 00:12:56,660 >> Và sau đó xuống đây, chúng ta cần cơ thể của trang web. 270 00:12:56,660 --> 00:12:58,050 Cơ thể khép kín. 271 00:12:58,050 --> 00:13:00,700 Và sau đó ở đây, xin chào thế giới. 272 00:13:00,700 --> 00:13:01,270 Được rồi. 273 00:13:01,270 --> 00:13:03,350 Vì vậy, chúng tôi đã viết một trang web siêu nhanh. 274 00:13:03,350 --> 00:13:06,675 Tôi sẽ lưu nó như là hello.html trên máy tính để bàn của tôi. 275 00:13:06,675 --> 00:13:09,050 My Mac của than phiền, nghĩ rằng, chờ một phút, 276 00:13:09,050 --> 00:13:11,091 này là một tập tin văn bản, làm bạn muốn gọi nó .txt? 277 00:13:11,091 --> 00:13:13,300 Nhưng không, tôi muốn sử dụng dấu chấm HTML. 278 00:13:13,300 --> 00:13:16,140 >> 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, 279 00:13:16,140 --> 00:13:18,600 hello.html, đây là trang web của tôi. 280 00:13:18,600 --> 00:13:22,564 Thật không may, tôi là người duy nhất trong thế giới 281 00:13:22,564 --> 00:13:23,980 những người có thể truy cập trang này ngay bây giờ. 282 00:13:23,980 --> 00:13:26,734 Bởi vì nơi nào nó sống rõ ràng? 283 00:13:26,734 --> 00:13:27,650 Đó là trên máy Mac của tôi, phải không? 284 00:13:27,650 --> 00:13:28,470 Đó là vô ích. 285 00:13:28,470 --> 00:13:30,390 Giống như không có ai trong phòng này hãy để một mình trên internet 286 00:13:30,390 --> 00:13:31,598 thực sự có thể truy cập vào trang đó. 287 00:13:31,598 --> 00:13:33,820 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. 288 00:13:33,820 --> 00:13:36,720 >> Và để làm được điều này, tôi sẽ đi trước và mở đám mây 9. 289 00:13:36,720 --> 00:13:40,090 Vì vậy, đám mây 9 của khóa học là một đám mây dựa service-- CS50 290 00:13:40,090 --> 00:13:44,890 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. 291 00:13:44,890 --> 00:13:48,330 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. 292 00:13:48,330 --> 00:13:49,830 Vì vậy, chúng ta hãy đi trước và làm điều này. 293 00:13:49,830 --> 00:13:53,670 Tôi sẽ đi trước và tạo ra một tập tin mới NCS50IDE. 294 00:13:53,670 --> 00:13:58,819 Tôi sẽ lưu nó như trước như hello.html và bấm vào lưu. 295 00:13:58,819 --> 00:14:01,860 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 296 00:14:01,860 --> 00:14:03,470 chứ không phải nhập lại nó. 297 00:14:03,470 --> 00:14:04,550 Và lưu nó. 298 00:14:04,550 --> 00:14:07,550 Và vì vậy bây giờ tôi có một tập tin gọi là hello.html. 299 00:14:07,550 --> 00:14:09,710 Nhưng làm cách nào để thực sự mở nó như là một trang web? 300 00:14:09,710 --> 00:14:14,120 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 301 00:14:14,120 --> 00:14:16,670 và một trình gỡ lỗi như GDB và bó của các chương trình khác, 302 00:14:16,670 --> 00:14:21,140 có thực sự là một chính thức đầy đủ máy chủ web chạy trong CS50 IDE. 303 00:14:21,140 --> 00:14:23,900 >> Tất cả các bạn, đó là để nói, có máy chủ web của riêng bạn. 304 00:14:23,900 --> 00:14:26,850 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 305 00:14:26,850 --> 00:14:28,220 là để phục vụ lên các trang web. 306 00:14:28,220 --> 00:14:32,490 Để lắng nghe yêu cầu từ trình duyệt và đáp ứng với chút phong bì ảo 307 00:14:32,490 --> 00:14:35,290 trong số đó là nội dung mà tôi đã viết. 308 00:14:35,290 --> 00:14:38,372 Vì vậy, máy chủ web này là thực sự miễn phí và mã nguồn mở. 309 00:14:38,372 --> 00:14:40,830 Trường hợp nguồn mở này có nghĩa phần mềm mà người khác có 310 00:14:40,830 --> 00:14:43,480 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í 311 00:14:43,480 --> 00:14:44,780 thay đổi mã nguồn. 312 00:14:44,780 --> 00:14:46,150 Và nó được gọi là Apache. 313 00:14:46,150 --> 00:14:51,450 >> 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. 314 00:14:51,450 --> 00:14:53,780 Vì vậy, nó có thể thực sự hiểu sau đây. 315 00:14:53,780 --> 00:14:56,560 Tôi sẽ nói Apache 50 bắt đầu. 316 00:14:56,560 --> 00:14:58,910 Và sau đó tôi chỉ cần đi để nói dot. 317 00:14:58,910 --> 00:15:01,080 Và chúng ta thấy một số phần nào tin phức tạp nói 318 00:15:01,080 --> 00:15:04,640 thiết lập Apache của tài liệu [? nhóm ?] đến nhà, ubuntu, bất kể đó là, 319 00:15:04,640 --> 00:15:05,770 giảm không gian làm việc. 320 00:15:05,770 --> 00:15:08,280 Bắt đầu từ máy chủ web Apache 2 thành công. 321 00:15:08,280 --> 00:15:11,330 >> Vì vậy, câu chuyện dài ngắn, tôi vừa đẩy một nút 322 00:15:11,330 --> 00:15:18,000 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 323 00:15:18,000 --> 00:15:20,587 80 tại một địa chỉ cụ thể. 324 00:15:20,587 --> 00:15:22,420 Và nó nói ở đây, và điều này sẽ thay đổi dựa 325 00:15:22,420 --> 00:15:26,550 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, 326 00:15:26,550 --> 00:15:30,211 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 327 00:15:30,211 --> 00:15:31,960 cho một số quá khứ tuần, bạn có thể có 328 00:15:31,960 --> 00:15:35,200 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 329 00:15:35,200 --> 00:15:37,130 góc của CS50IDE. 330 00:15:37,130 --> 00:15:41,050 >> Và đó thực sự đã được tất cả điều này thời gian các địa chỉ mà bạn có thể 331 00:15:41,050 --> 00:15:43,574 thăm tất cả các tập tin của bạn thông qua web. 332 00:15:43,574 --> 00:15:45,990 Cho đến bây giờ, nó đã không quan trọng, bởi vì trong C, bạn thường 333 00:15:45,990 --> 00:15:48,073 muốn mọi thứ đang chạy trong một thiết bị đầu cuối, không có trên web. 334 00:15:48,073 --> 00:15:50,800 Nhưng hôm nay, chúng ta bắt đầu viết code dựa trên web 335 00:15:50,800 --> 00:15:53,350 mà chúng ta muốn truy cập tại URL nào. 336 00:15:53,350 --> 00:15:56,100 Vì vậy, những gì tôi sẽ làm là bấm vào URL này. 337 00:15:56,100 --> 00:16:00,880 >> 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, 338 00:16:00,880 --> 00:16:04,090 nhưng những gì tập nhảy ra lúc bạn có thể? 339 00:16:04,090 --> 00:16:05,210 Hello.html. 340 00:16:05,210 --> 00:16:07,870 Đó 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. 341 00:16:07,870 --> 00:16:12,310 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. 342 00:16:12,310 --> 00:16:15,300 Và để cho bất cứ ai trong thế giới thấy những file này. 343 00:16:15,300 --> 00:16:19,050 >> Và quả thực, nếu bây giờ tôi click vào hello.html, 344 00:16:19,050 --> 00:16:22,180 Tôi thấy trong tab này chính xác tập tin đó. 345 00:16:22,180 --> 00:16:26,430 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. 346 00:16:26,430 --> 00:16:29,480 Trong vòng CS50 IDE, nhận thấy có đột nhiên một thanh địa chỉ. 347 00:16:29,480 --> 00:16:33,690 Đó là bởi vì mặc dù chúng tôi sử dụng Chrome để truy cập CS50IDE, 348 00:16:33,690 --> 00:16:37,940 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ờ. 349 00:16:37,940 --> 00:16:40,820 Và như vậy hơn những điều phức tạp như vậy, 350 00:16:40,820 --> 00:16:42,955 Tôi sẽ đi trước và chỉ cần sao chép URL này. 351 00:16:42,955 --> 00:16:45,330 Tôi sẽ đi trước và chỉ mở cửa sổ Chrome của riêng tôi. 352 00:16:45,330 --> 00:16:47,800 Vì vậy, không có phép thuật ở đây, không CS50IDE. 353 00:16:47,800 --> 00:16:51,800 Tôi chỉ cần đi đến nghĩa đen dán J Harvard URL và tôi nhấn Enter. 354 00:16:51,800 --> 00:16:54,750 Và đây rồi, bây giờ tôi, và trong lý thuyết, tất cả mọi người 355 00:16:54,750 --> 00:16:57,700 trên internet, nếu tôi đã cấu hình quyền một cách thích hợp, 356 00:16:57,700 --> 00:16:58,720 có thể truy cập tập tin này. 357 00:16:58,720 --> 00:17:03,230 Và vì vậy bây giờ, nếu tôi nói hello.html, thì đấy, có 358 00:17:03,230 --> 00:17:06,366 là trang web vô underwhelming của tôi. 359 00:17:06,366 --> 00:17:07,740 Vì vậy, chúng ta hãy làm một kiểm tra sự tỉnh táo nhanh chóng. 360 00:17:07,740 --> 00:17:09,710 Bởi vì tất cả điều đó là khái niệm thiết lập. 361 00:17:09,710 --> 00:17:13,180 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. 362 00:17:13,180 --> 00:17:16,084 Bất kỳ câu hỏi vậy, đến nay về những gì đang xảy ra? 363 00:17:16,084 --> 00:17:18,549 364 00:17:18,549 --> 00:17:19,049 Vâng. 365 00:17:19,049 --> 00:17:24,290 366 00:17:24,290 --> 00:17:25,800 Có CS50 sở hữu các trang web? 367 00:17:25,800 --> 00:17:26,460 Trong ý nghĩa gì? 368 00:17:26,460 --> 00:17:28,947 369 00:17:28,947 --> 00:17:29,530 Câu hỏi hay. 370 00:17:29,530 --> 00:17:32,429 Vì vậy, CS50 của sở hữu CS50.io. 371 00:17:32,429 --> 00:17:33,970 Chúng tôi đã thực sự đã mua tên miền đó. 372 00:17:33,970 --> 00:17:37,240 Và bởi bản chất của các bạn đăng nhập vào CS50IDE, 373 00:17:37,240 --> 00:17:39,270 tất cả các bạn có được những gì được gọi là một tên miền phụ. 374 00:17:39,270 --> 00:17:46,840 >> Vì vậy IDE50-Malan, hoặc IDE50-Rob.CS50.io, đó là địa chỉ duy nhất của bạn trong vòng 375 00:17:46,840 --> 00:17:47,730 Tên miền của chúng tôi. 376 00:17:47,730 --> 00:17:50,850 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. 377 00:17:50,850 --> 00:17:55,150 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 378 00:17:55,150 --> 00:17:58,050 I / O và sau đó tất cả mọi người khác là bên trong đó, vì vậy để nói chuyện. 379 00:17:58,050 --> 00:17:59,890 Và chúng tôi sẽ trở lại mà trong một vài tuần có lẽ, 380 00:17:59,890 --> 00:18:01,930 đặc biệt là tại dự án cuối cùng thời gian, khi một số bạn 381 00:18:01,930 --> 00:18:03,596 có thể muốn có được tên miền riêng của bạn. 382 00:18:03,596 --> 00:18:06,270 Đó là thực tế tương đối đơn giản. 383 00:18:06,270 --> 00:18:06,770 Được rồi. 384 00:18:06,770 --> 00:18:07,880 Vì vậy, bây giờ chúng ta làm điều này. 385 00:18:07,880 --> 00:18:11,910 Tôi sẽ quay trở lại vào CS50IDE, nơi tập tin của tôi ngay bây giờ, 386 00:18:11,910 --> 00:18:14,710 hello.html, không phải là tất cả những gì thú vị. 387 00:18:14,710 --> 00:18:17,130 Tôi muốn làm điều gì đó một chút đẹp hơn đó. 388 00:18:17,130 --> 00:18:19,440 Vì vậy, tôi sẽ làm một cái gì đó như thế này. 389 00:18:19,440 --> 00:18:21,510 Hãy để tôi mở paragraphs.html. 390 00:18:21,510 --> 00:18:23,560 Vì vậy, đây là một tập tin tôi đã viết trước. 391 00:18:23,560 --> 00:18:26,480 Ở phía trên của nó, giống như mọi khi, chúng tôi có ý kiến. 392 00:18:26,480 --> 00:18:28,730 Nhưng trong HTML, nhận xét nhìn một chút khác nhau. 393 00:18:28,730 --> 00:18:33,270 On line ba và dòng 14, bạn thấy cú pháp cho khởi động một bình luận 394 00:18:33,270 --> 00:18:34,020 và kết thúc nhận xét. 395 00:18:34,020 --> 00:18:36,820 >> 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. 396 00:18:36,820 --> 00:18:40,250 Nó chỉ là một lưu ý đến một con người những gì đang xảy ra ở đây. 397 00:18:40,250 --> 00:18:43,040 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, 398 00:18:43,040 --> 00:18:46,820 mới rõ ràng là những gì tag mà chúng tôi đã giới thiệu? 399 00:18:46,820 --> 00:18:52,130 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ể. 400 00:18:52,130 --> 00:18:54,400 Nhưng điều rõ ràng là mới bây giờ? 401 00:18:54,400 --> 00:18:55,200 >> Yeah, vì vậy p. 402 00:18:55,200 --> 00:18:57,320 Thẻ p hoặc tag đoạn. 403 00:18:57,320 --> 00:19:01,182 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. 404 00:19:01,182 --> 00:19:03,390 Bởi vì những gì tôi muốn chứng minh là làm thế nào có lẽ bạn 405 00:19:03,390 --> 00:19:05,859 đại diện cho đoạn văn bản trong HTML. 406 00:19:05,859 --> 00:19:08,400 Và vì vậy những gì bắt đầu xảy ra ở đây là có đã 407 00:19:08,400 --> 00:19:09,657 một mô hình phát triển. 408 00:19:09,657 --> 00:19:10,990 Và hãy để tôi đi trước và làm điều này. 409 00:19:10,990 --> 00:19:12,760 Hãy để tôi đầu tắt Apache. 410 00:19:12,760 --> 00:19:17,340 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 411 00:19:17,340 --> 00:19:18,420 m thư mục. 412 00:19:18,420 --> 00:19:20,100 Vì vậy mà tôi có quyền truy cập vào tất cả mọi thứ. 413 00:19:20,100 --> 00:19:22,230 >> Và bây giờ, nếu tôi trở lại danh sách thư mục này, 414 00:19:22,230 --> 00:19:24,846 thông báo tôi thấy tất cả các file từ ngày hôm nay. 415 00:19:24,846 --> 00:19:26,720 Và bạn sẽ thấy trong Vấn đề tiếp theo, chúng tôi sẽ 416 00:19:26,720 --> 00:19:28,594 cung cấp cho bạn hướng dẫn để làm chính xác này. 417 00:19:28,594 --> 00:19:35,210 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 418 00:19:35,210 --> 00:19:36,970 cho bạn nếu bạn không nói hoặc đọc Latin. 419 00:19:36,970 --> 00:19:40,525 Nhưng đây chỉ là ba đoạn của văn bản được đánh dấu trong HTML. 420 00:19:40,525 --> 00:19:43,100 >> Và thông báo các đoạn nghỉ giải lao giữa chúng. 421 00:19:43,100 --> 00:19:46,400 Vì thực ra, và mặc dù bạn 422 00:19:46,400 --> 00:19:49,210 có thể được nghiêng để làm điều này, trong khi ở thế giới thực, 423 00:19:49,210 --> 00:19:51,370 nếu bạn muốn đặt hàng nghỉ giữa các sự vật, 424 00:19:51,370 --> 00:19:55,680 khá có lẽ bạn chỉ đơn giản làm điều này và nhấn Save. 425 00:19:55,680 --> 00:19:59,460 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 426 00:19:59,460 --> 00:20:01,100 chỉ trong một blob của văn bản. 427 00:20:01,100 --> 00:20:03,570 Bởi vì HTML là loại ngôn ngữ câm. 428 00:20:03,570 --> 00:20:07,230 >> Nó có nghĩa là để được sử dụng trong đó một cách mà trình duyệt sẽ chỉ 429 00:20:07,230 --> 00:20:09,920 làm rõ những gì bạn nói với nó để làm. 430 00:20:09,920 --> 00:20:12,890 Vì vậy, nếu bạn không nói với nó cho tôi một đoạn mới, 431 00:20:12,890 --> 00:20:14,569 bạn sẽ không nhìn thấy một đoạn mới. 432 00:20:14,569 --> 00:20:16,360 Và trên thực tế, những gì trình duyệt sẽ làm gì 433 00:20:16,360 --> 00:20:20,020 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 434 00:20:20,020 --> 00:20:23,190 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 435 00:20:23,190 --> 00:20:26,610 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 436 00:20:26,610 --> 00:20:29,021 vào chỉ là một duy nhất, khoảng trắng có thể nhìn thấy. 437 00:20:29,021 --> 00:20:29,520 Được rồi. 438 00:20:29,520 --> 00:20:30,869 Vì vậy, đó là các thẻ đoạn. 439 00:20:30,869 --> 00:20:32,910 Và do đó, các mô hình là những gì đó là phát triển ở đây? 440 00:20:32,910 --> 00:20:37,450 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 441 00:20:37,450 --> 00:20:38,460 và kết thúc một thẻ. 442 00:20:38,460 --> 00:20:39,300 Và một từ khóa là gì? 443 00:20:39,300 --> 00:20:41,160 Vâng, nó chỉ là một đoạn của cú pháp. 444 00:20:41,160 --> 00:20:44,400 Mở khung, một từ khóa, khung khép kín, là một thẻ. 445 00:20:44,400 --> 00:20:45,510 Hoặc bắt đầu tag. 446 00:20:45,510 --> 00:20:48,590 Và sau đó khi bạn đang thực hiện thể hiện chính mình, 447 00:20:48,590 --> 00:20:52,300 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. 448 00:20:52,300 --> 00:20:55,480 Nhưng ngược lại không phải là khá ngược. 449 00:20:55,480 --> 00:21:00,630 >> 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. 450 00:21:00,630 --> 00:21:01,130 Được rồi. 451 00:21:01,130 --> 00:21:02,570 Vì vậy, không phải tất cả những gì thú vị. 452 00:21:02,570 --> 00:21:05,270 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. 453 00:21:05,270 --> 00:21:07,630 Nếu tôi muốn làm những điều lớn hơn và đậm? 454 00:21:07,630 --> 00:21:11,780 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, 455 00:21:11,780 --> 00:21:17,280 Tôi đã có một thẻ H1, H2, H3, bốn, năm, sáu, tất cả đều 456 00:21:17,280 --> 00:21:18,310 có vẻ khá phức tạp. 457 00:21:18,310 --> 00:21:21,010 Nhưng nếu tôi đi mở này Ví dụ, chúng ta hãy có một cái nhìn. 458 00:21:21,010 --> 00:21:22,490 Headings.html. 459 00:21:22,490 --> 00:21:27,030 >> 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. 460 00:21:27,030 --> 00:21:28,070 H1 là lớn. 461 00:21:28,070 --> 00:21:31,240 H6 là nhỏ hơn và sau đó mọi thứ khác ở giữa. 462 00:21:31,240 --> 00:21:34,170 Vì vậy, đó là thú vị nhưng vẫn không thực sự trên web tôi biết. 463 00:21:34,170 --> 00:21:36,870 Nếu chúng ta muốn có tôi một cái gì đó giống như một danh sách. . 464 00:21:36,870 --> 00:21:40,190 Vì vậy, đây là một danh sách gạch đầu dòng các ba nhà của Harvard. 465 00:21:40,190 --> 00:21:41,600 >> Làm thế nào bạn đi về việc này? 466 00:21:41,600 --> 00:21:45,410 Vâng, hãy nhìn vào list.html. 467 00:21:45,410 --> 00:21:47,870 Và ở đây, chúng ta thấy một chút chút funkiness 468 00:21:47,870 --> 00:21:49,630 nhưng chúng ta hãy xem xét những gì đang xảy ra. 469 00:21:49,630 --> 00:21:56,182 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ự. 470 00:21:56,182 --> 00:21:57,640 Danh sách không có thứ tự chỉ có nghĩa là gạch đầu dòng. 471 00:21:57,640 --> 00:21:58,431 Không có con số. 472 00:21:58,431 --> 00:22:01,850 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. 473 00:22:01,850 --> 00:22:05,350 Sau đó, LI, mục danh sách là tất cả các nghĩa của nó. 474 00:22:05,350 --> 00:22:07,790 >> Và do đó, nó sẽ tự động số tất cả mọi thứ cho bạn. 475 00:22:07,790 --> 00:22:11,270 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. 476 00:22:11,270 --> 00:22:13,050 Trình duyệt không thực sự sẽ quan tâm. 477 00:22:13,050 --> 00:22:16,670 Vì vậy, mặc dù bạn có thể không làm điều này, chỉ để được rõ ràng, 478 00:22:16,670 --> 00:22:19,880 bạn không nên ngay cả mặc dù trình duyệt sẽ vẫn 479 00:22:19,880 --> 00:22:22,130 có thể hiểu nó chỉ tốt. 480 00:22:22,130 --> 00:22:24,590 Tôi nhấn tải lại trong tôi trình duyệt, tôi nhấn reload 481 00:22:24,590 --> 00:22:26,760 và không có sự thay đổi đang diễn ra vì trình duyệt vẫn 482 00:22:26,760 --> 00:22:29,550 làm chính xác những gì tôi nói với nó để làm. 483 00:22:29,550 --> 00:22:30,050 >> Được rồi. 484 00:22:30,050 --> 00:22:31,340 Vì vậy, đây là tất cả chỉ là văn bản. 485 00:22:31,340 --> 00:22:33,730 Bây giờ chúng ta hãy làm một cái gì đó thú vị hơn. 486 00:22:33,730 --> 00:22:36,660 Tôi sẽ đi trước và mượn một số tập tin HTML này. 487 00:22:36,660 --> 00:22:40,910 Tôi sẽ đi trước và tạo ra một tập tin mới ở đây. 488 00:22:40,910 --> 00:22:43,370 Và chúng ta sẽ gọi rick.html này. 489 00:22:43,370 --> 00:22:46,190 490 00:22:46,190 --> 00:22:48,916 Chúng tôi có không tương xứng sử dụng một cái gì đó 491 00:22:48,916 --> 00:22:51,290 được gọi là một cuộn rick trong này lớp năm nay, tôi không biết, 492 00:22:51,290 --> 00:22:53,880 nó chỉ xảy ra cách hữu cơ. 493 00:22:53,880 --> 00:22:55,397 >> Và bây giờ nó đã ra khỏi tầm kiểm soát. 494 00:22:55,397 --> 00:22:56,730 Vì vậy, tôi chỉ đi với nó. 495 00:22:56,730 --> 00:22:59,700 Và nếu tôi đi đến Google Hình ảnh và Rick Astley. 496 00:22:59,700 --> 00:23:02,450 497 00:23:02,450 --> 00:23:06,170 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. 498 00:23:06,170 --> 00:23:11,520 Mỗi khi bạn đã nhấp vào liên kết, ai đó được cười đâu đó. 499 00:23:11,520 --> 00:23:14,860 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. 500 00:23:14,860 --> 00:23:16,750 >> Vì vậy, ở đây chúng ta có một hình ảnh trong Google Images. 501 00:23:16,750 --> 00:23:19,390 Và chúng ta hãy giả định rằng đây là hợp lý ở khắp mọi nơi trên internet. 502 00:23:19,390 --> 00:23:22,570 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. 503 00:23:22,570 --> 00:23:24,820 Tôi sẽ đi trước và sao chép URL hình ảnh. 504 00:23:24,820 --> 00:23:28,600 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. 505 00:23:28,600 --> 00:23:30,630 Vì vậy, đây chỉ là một trang web. 506 00:23:30,630 --> 00:23:39,020 Đây là Rick Astley, haha, Tôi sẽ quay trở lại với doanh nghiệp 507 00:23:39,020 --> 00:23:43,510 để trình duyệt của tôi, tải lại, và thú vị. 508 00:23:43,510 --> 00:23:44,530 >> Nơi Rick là? 509 00:23:44,530 --> 00:23:46,050 Vì vậy, hãy để tôi nhìn thấy những gì đang xảy ra. 510 00:23:46,050 --> 00:23:49,114 Trên thực tế, tôi sẽ giả vờ như tôi không làm điều đó. 511 00:23:49,114 --> 00:23:50,280 [Không nghe thấy] đưa anh vào đây. 512 00:23:50,280 --> 00:23:52,520 Chúng tôi sẽ trở lại trong một khoảnh khắc. 513 00:23:52,520 --> 00:23:54,200 Vì vậy, đây là rick.html. 514 00:23:54,200 --> 00:23:56,070 Vì vậy, đó không phải là Rick Astley. 515 00:23:56,070 --> 00:23:59,680 Vì vậy, hóa ra chúng ta có thể thực sự thêm anh ở đây. 516 00:23:59,680 --> 00:24:00,830 Đây là Rick Astley. 517 00:24:00,830 --> 00:24:06,680 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à 518 00:24:06,680 --> 00:24:09,110 rõ ràng là một hạnh phúc một cái gì đó sinh nhật hay khác. 519 00:24:09,110 --> 00:24:13,280 >> Và bây giờ tôi sẽ đến đóng thẻ như thế này. 520 00:24:13,280 --> 00:24:15,170 Vì vậy, đây là gói siêu dài. 521 00:24:15,170 --> 00:24:17,740 Nhưng cần chú ý rằng tất cả tôi đã thực hiện là hình ảnh mở khung, 522 00:24:17,740 --> 00:24:20,270 nguồn với một thuộc tính của điều này. 523 00:24:20,270 --> 00:24:21,530 Và đó là một URL thực sự lâu dài. 524 00:24:21,530 --> 00:24:23,720 Và ở cuối, nhận thấy điều này. 525 00:24:23,720 --> 00:24:29,530 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, 526 00:24:29,530 --> 00:24:33,590 có một khung mở, IMG, đóng khung? 527 00:24:33,590 --> 00:24:37,040 Chỉ cần lấy một đoán ngay cả khi bạn không có sự quen thuộc nào 528 00:24:37,040 --> 00:24:40,410 HTML với trước. 529 00:24:40,410 --> 00:24:42,710 >> Vì vậy, nó là như thế nào nó sẽ đóng lại lệnh, nhưng tại sao 530 00:24:42,710 --> 00:24:45,850 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 531 00:24:45,850 --> 00:24:48,820 Verbose giống như hình ảnh gần gũi? 532 00:24:48,820 --> 00:24:51,400 Yeah. 533 00:24:51,400 --> 00:24:52,000 Yeah. 534 00:24:52,000 --> 00:24:55,620 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, 535 00:24:55,620 --> 00:24:56,870 nó hoặc là có hoặc nó không phải. 536 00:24:56,870 --> 00:25:00,960 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. 537 00:25:00,960 --> 00:25:02,010 Bạn chỉ có thể làm điều đó. 538 00:25:02,010 --> 00:25:03,720 Và do đó, các cú pháp nói chung sẽ chỉ 539 00:25:03,720 --> 00:25:07,910 để làm dấu gạch chéo bên trong của thẻ mở hay bắt đầu từ khóa 540 00:25:07,910 --> 00:25:09,020 và sau đó nhấn Save. 541 00:25:09,020 --> 00:25:13,350 >> 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. 542 00:25:13,350 --> 00:25:15,100 Và chúng ta có thể chắc chắn thực sự làm phiền người 543 00:25:15,100 --> 00:25:17,010 bằng cách nhúng thay như một liên kết YouTube. 544 00:25:17,010 --> 00:25:19,350 Và trên thực tế, bất cứ lúc nào bạn đã từng đi đến YouTube, 545 00:25:19,350 --> 00:25:22,190 và cho tôi thực sự vô tình rick cuộn thân mình ở đây. 546 00:25:22,190 --> 00:25:25,770 Vì vậy, Rick roll. 547 00:25:25,770 --> 00:25:29,592 Vì vậy, rick roll-- tôi sẽ đi đây. 548 00:25:29,592 --> 00:25:31,900 >> [MUSIC CHƠI] 549 00:25:31,900 --> 00:25:33,730 >> OK, một người thích điều đó. 550 00:25:33,730 --> 00:25:37,270 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 551 00:25:37,270 --> 00:25:41,390 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 552 00:25:41,390 --> 00:25:43,730 hoặc trong một vấn đề thiết lập hoặc trong một slide. 553 00:25:43,730 --> 00:25:49,055 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 554 00:25:49,055 --> 00:25:49,680 đã có. 555 00:25:49,680 --> 00:25:50,910 Tôi sẽ đi trước và sao chép này. 556 00:25:50,910 --> 00:25:54,000 >> 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. 557 00:25:54,000 --> 00:25:55,860 Chú ý rằng điều này những gì YouTube đã từng nói với bạn. 558 00:25:55,860 --> 00:25:57,693 Mỗi khi bạn truy cập một Video YouTube, nếu bạn 559 00:25:57,693 --> 00:26:00,410 muốn nhúng video trên của bạn trang web, đơn giản là lấy này. 560 00:26:00,410 --> 00:26:03,350 Vì vậy, đây là có khác Tag HTML được gọi là một khung nội tuyến. 561 00:26:03,350 --> 00:26:04,590 Hoặc một trong khung dòng. 562 00:26:04,590 --> 00:26:08,680 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. 563 00:26:08,680 --> 00:26:11,950 Vì vậy, nó chỉ ra rằng hình ảnh tag và dường như thẻ iframe 564 00:26:11,950 --> 00:26:13,370 lấy tên là thuộc tính là gì. 565 00:26:13,370 --> 00:26:15,710 >> Và đây là một mảnh cú pháp trong HTML. 566 00:26:15,710 --> 00:26:19,240 Ngoài các tag của tên, khung mở thẻ tên, 567 00:26:19,240 --> 00:26:23,780 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 568 00:26:23,780 --> 00:26:24,860 bằng giá trị. 569 00:26:24,860 --> 00:26:26,290 Thuộc tính bằng giá trị. 570 00:26:26,290 --> 00:26:28,100 Và do đó, ví dụ, YouTube là nói cho chúng tôi 571 00:26:28,100 --> 00:26:31,990 nếu bạn muốn chiều rộng của video này là 420 pixel và chiều cao 572 00:26:31,990 --> 00:26:35,470 là 315 pixels, đó là cách bạn thể hiện nó trong HTML. 573 00:26:35,470 --> 00:26:38,480 >> Nguồn gốc của video là gì để được rằng URL YouTube dài 574 00:26:38,480 --> 00:26:40,830 và sau đó một số công cụ khác như biên giới khung là số không, 575 00:26:40,830 --> 00:26:43,500 do đó có thể có nghĩa là có không có biên giới xung quanh điều. 576 00:26:43,500 --> 00:26:45,450 Cho phép màn hình có thể có nghĩa là người sử dụng 577 00:26:45,450 --> 00:26:47,840 có thể bấm vào một nút và thực sự đầy đủ màn hình video. 578 00:26:47,840 --> 00:26:52,870 Vì vậy, nếu tôi thực sự muốn được ấn tượng ở đây trong Rick dot HTML, 579 00:26:52,870 --> 00:26:58,490 thay vì sử dụng các thẻ hình ảnh, cho phép tôi xóa, thay vì dán này. 580 00:26:58,490 --> 00:27:00,810 Và bây giờ tải lại. 581 00:27:00,810 --> 00:27:02,500 Và giờ đây chúng tôi đi một lần nữa. 582 00:27:02,500 --> 00:27:04,979 583 00:27:04,979 --> 00:27:06,020 Được rồi, thế là đủ. 584 00:27:06,020 --> 00:27:08,970 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. 585 00:27:08,970 --> 00:27:11,400 Vì vậy, một số các takeaways ở đây là gì? 586 00:27:11,400 --> 00:27:15,130 Vì vậy, HTML, xấu xí như các trang web là, thực sự là khá đơn giản. 587 00:27:15,130 --> 00:27:16,467 Nó không phải là một ngôn ngữ lập trình. 588 00:27:16,467 --> 00:27:17,550 Nó không có chức năng. 589 00:27:17,550 --> 00:27:18,410 Nó không có vòng. 590 00:27:18,410 --> 00:27:19,535 Nó không có điều kiện. 591 00:27:19,535 --> 00:27:22,900 Tất cả nó đã là hàng chục thẻ khác nhau, mỗi trong số đó 592 00:27:22,900 --> 00:27:24,620 có không hoặc nhiều thuộc tính. 593 00:27:24,620 --> 00:27:27,320 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 594 00:27:27,320 --> 00:27:29,560 là nó rất tự có thể dạy dỗ. 595 00:27:29,560 --> 00:27:32,880 >> Tất cả phải mất là một sự hiểu biết các khuôn khổ chung của HTML. 596 00:27:32,880 --> 00:27:36,510 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 597 00:27:36,510 --> 00:27:37,250 như sau. 598 00:27:37,250 --> 00:27:40,720 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 599 00:27:40,720 --> 00:27:43,080 hoặc googling làm thế nào để làm một số kỹ thuật hoặc như chúng ta đã thấy, 600 00:27:43,080 --> 00:27:45,371 nhìn vào mã nguồn của Facebook mã, nhìn vào một trang web 601 00:27:45,371 --> 00:27:48,710 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ó 602 00:27:48,710 --> 00:27:50,550 thực sự đặt những điều trên. 603 00:27:50,550 --> 00:27:52,180 >> Vì vậy, chúng ta có thể làm hình ảnh là tốt. 604 00:27:52,180 --> 00:27:53,994 Và trên thực tế, chúng tôi đã làm cho nó một thời gian trước đây. 605 00:27:53,994 --> 00:27:55,410 Hãy để tôi đi trước và chỉ cho bạn thấy. 606 00:27:55,410 --> 00:27:56,770 Dưới đây là một số mẫu mã. 607 00:27:56,770 --> 00:27:58,380 Nếu bạn đã bao giờ muốn nhìn thấy con mèo gắt gỏng. 608 00:27:58,380 --> 00:28:00,620 Vì vậy, nhận thấy rằng tôi có thể có một thẻ hình ảnh ở đây. 609 00:28:00,620 --> 00:28:02,090 Và tôi đã có một bình luận trên nó. 610 00:28:02,090 --> 00:28:04,490 Tôi đã có một sự thay thế văn bản cho người khuyết tật. 611 00:28:04,490 --> 00:28:07,250 Vì vậy, một ai đó sử dụng một màn hình đọc cho lý do của thị giác 612 00:28:07,250 --> 00:28:10,172 thực sự có thể sau đó có mình đọc màn hình nói Grumpy Cat. 613 00:28:10,172 --> 00:28:11,880 Bởi vì nếu chúng không thể xem hình ảnh, họ 614 00:28:11,880 --> 00:28:14,504 í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ì. 615 00:28:14,504 --> 00:28:18,020 Và nguồn gốc của tập tin đó là cat.jpeg. 616 00:28:18,020 --> 00:28:22,472 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-- 617 00:28:22,472 --> 00:28:25,680 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ế. 618 00:28:25,680 --> 00:28:28,290 Và nếu tôi đi đến hình ảnh của Google ở đây, và chúng tôi sẽ giả định 619 00:28:28,290 --> 00:28:30,040 rằng đây là một hình ảnh của con mèo của tôi. 620 00:28:30,040 --> 00:28:35,070 >> 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 621 00:28:35,070 --> 00:28:35,630 đáng sợ. 622 00:28:35,630 --> 00:28:40,320 Và cat.jpeg tôi sẽ lưu trên máy tính của tôi. 623 00:28:40,320 --> 00:28:44,700 Bây giờ hãy để tôi quay lại với đám mây 9. 624 00:28:44,700 --> 00:28:48,150 Chú ý rằng ở đây, tôi có thể đi để tải lên các tập tin địa phương. 625 00:28:48,150 --> 00:28:51,530 Và nếu tôi lấy này file, cat.jpeg, thông báo 626 00:28:51,530 --> 00:28:54,674 mà tôi có thể kéo nó và thả nó vào đám mây 9 627 00:28:54,674 --> 00:28:56,090 và nó sẽ hét vào mặt tôi ở đây. 628 00:28:56,090 --> 00:28:59,000 >> Bởi vì chúng tôi đã đã đưa cho bạn một tập tin cat.jpeg, 629 00:28:59,000 --> 00:29:01,430 nhưng đó là siêu dễ lấy một bức ảnh mà bạn đã 630 00:29:01,430 --> 00:29:03,220 lấy từ Facebook hoặc Flickr hoặc các loại tương tự 631 00:29:03,220 --> 00:29:05,678 và thực sự kéo và thả nó vào đám mây 9 và sau đó làm cho nó 632 00:29:05,678 --> 00:29:07,970 một phần của riêng cá nhân của bạn trang web hay vấn đề 633 00:29:07,970 --> 00:29:10,442 thiết lập bảy hay tám như chúng ta sẽ sớm thấy. 634 00:29:10,442 --> 00:29:12,150 Và sau đó khi bạn cuối cùng ghé thăm con mèo đó, 635 00:29:12,150 --> 00:29:16,610 giả sử tôi tải về mà cùng con mèo, thông báo that-- đó là đáng yêu. 636 00:29:16,610 --> 00:29:19,160 >> Những gì bạn sẽ thấy là một cái gì đó giống như khuôn mặt này ở đây. 637 00:29:19,160 --> 00:29:21,810 Vì vậy, các tập tin mà bạn tài liệu tham khảo trong một trang web 638 00:29:21,810 --> 00:29:26,050 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 639 00:29:26,050 --> 00:29:29,670 như trong trường hợp của Rick Ảnh Astley một chút trước. 640 00:29:29,670 --> 00:29:32,990 Vì vậy, nơi else-- gì Chúng ta có thể làm ở đây? 641 00:29:32,990 --> 00:29:34,890 Vì vậy, chúng ta hãy nhìn vào những điều sau đây. 642 00:29:34,890 --> 00:29:36,160 Bạn biết những gì loại mát? 643 00:29:36,160 --> 00:29:39,330 >> Chúng tôi đã vậy, đến nay đã làm cho trang web rất tĩnh. 644 00:29:39,330 --> 00:29:41,830 Tôi muốn để gia vị lên những điều như sau. 645 00:29:41,830 --> 00:29:44,344 Tôi muốn làm cho công cụ tìm kiếm của riêng tôi. 646 00:29:44,344 --> 00:29:47,010 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. 647 00:29:47,010 --> 00:29:52,570 Tôi sẽ đi trước và tạo ra một tập tin mới gọi search.html. 648 00:29:52,570 --> 00:29:54,890 Và chúng tôi đã prefabed phiên bản trực tuyến. 649 00:29:54,890 --> 00:29:56,027 Lỗi chính. 650 00:29:56,027 --> 00:29:57,610 Đừng dán vào cửa sổ terminal. 651 00:29:57,610 --> 00:29:58,744 Phiên bản lắp ghép trực tuyến. 652 00:29:58,744 --> 00:30:00,160 Và tôi sẽ bắt đầu như sau. 653 00:30:00,160 --> 00:30:04,490 Vì vậy, đây là sự khởi đầu của một tập tin gọi là search.html. 654 00:30:04,490 --> 00:30:07,510 Tôi sẽ lưu nó trong thư mục mã nguồn của ngày hôm nay. 655 00:30:07,510 --> 00:30:09,079 Tôi sẽ gọi tìm kiếm. 656 00:30:09,079 --> 00:30:10,370 Trên thực tế, chúng tôi sẽ làm cho nó tốt hơn. 657 00:30:10,370 --> 00:30:13,600 CS50 Tìm kiếm và thực sự thương hiệu của nó. 658 00:30:13,600 --> 00:30:17,500 Và bây giờ, tôi sẽ nói một cái gì đó giống như H1 CS50 Search. 659 00:30:17,500 --> 00:30:20,930 Và sau đó xuống đây, H2 đến sớm. 660 00:30:20,930 --> 00:30:23,230 Và chỉ để tóm tắt lại, H1 và H2 có nghĩa là những gì tương ứng? 661 00:30:23,230 --> 00:30:26,750 662 00:30:26,750 --> 00:30:30,320 >> 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. 663 00:30:30,320 --> 00:30:37,375 Vì vậy, nếu tôi lưu này và đi qua đây, chúng ta hãy xem search.html file. 664 00:30:37,375 --> 00:30:42,560 Tất cả các quyền, và điều này là right-- [không nghe được]. 665 00:30:42,560 --> 00:30:46,980 666 00:30:46,980 --> 00:30:49,110 Stand by. 667 00:30:49,110 --> 00:30:49,945 David là bối rối. 668 00:30:49,945 --> 00:30:52,610 669 00:30:52,610 --> 00:30:54,080 Oh, nó phải có. 670 00:30:54,080 --> 00:30:54,860 David là một thằng ngốc. 671 00:30:54,860 --> 00:30:55,420 ĐƯỢC. 672 00:30:55,420 --> 00:30:56,660 Vì vậy, có nó được. 673 00:30:56,660 --> 00:30:58,350 Vì vậy, CS50 tìm kiếm đến sớm. 674 00:30:58,350 --> 00:31:00,370 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. 675 00:31:00,370 --> 00:31:03,400 >> Nơi mà chúng tôi đã nói chuyện về cơ khí cấp thấp hơn của HTTP. 676 00:31:03,400 --> 00:31:05,780 Và những ý tưởng mới của HTML, mà chỉ là 677 00:31:05,780 --> 00:31:08,890 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ì 678 00:31:08,890 --> 00:31:10,740 và thực hiện các công cụ tìm kiếm của riêng của chúng tôi. 679 00:31:10,740 --> 00:31:12,520 Vì vậy, thay vì chỉ nói đến sớm, tôi 680 00:31:12,520 --> 00:31:14,810 sẽ giới thiệu một cái gì đó gọi là một thẻ hình thức. 681 00:31:14,810 --> 00:31:19,610 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. 682 00:31:19,610 --> 00:31:22,450 >> Và tên của đầu vào này lĩnh vực, tôi sẽ gọi nó là Q. 683 00:31:22,450 --> 00:31:26,240 Và các loại trường nhập này Tôi sẽ nói chỉ là "văn bản". 684 00:31:26,240 --> 00:31:29,130 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. 685 00:31:29,130 --> 00:31:32,830 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. 686 00:31:32,830 --> 00:31:35,320 Và do đó, tôi chỉ đơn giản là đi để đóng thẻ với 687 00:31:35,320 --> 00:31:38,099 dấu gạch chéo ngay trong chính bản thân thẻ. 688 00:31:38,099 --> 00:31:39,890 Và sau đó tôi sẽ có một đầu vào khác. 689 00:31:39,890 --> 00:31:43,480 Loại đầu vào bằng trình. 690 00:31:43,480 --> 00:31:45,320 Và sau đó tôi sẽ đóng một trong những quá. 691 00:31:45,320 --> 00:31:46,840 >> Và bây giờ tôi sẽ quay trở lại đây. 692 00:31:46,840 --> 00:31:49,520 Và đã được chúng ta thấy, mặc dù khá xấu xí, tôi đã 693 00:31:49,520 --> 00:31:52,460 có sự khởi đầu của trang tìm kiếm của riêng của tôi ở đây. 694 00:31:52,460 --> 00:31:55,150 Trong thực tế, chúng ta hãy để tôi cố gắng sạch này lên một chút. 695 00:31:55,150 --> 00:31:57,330 Nó chỉ ra rằng trên đầu vào ở đây, tôi có thể có 696 00:31:57,330 --> 00:31:59,910 một thuộc tính được gọi giữ chỗ. 697 00:31:59,910 --> 00:32:05,165 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. 698 00:32:05,165 --> 00:32:07,820 >> Và thông báo, bây giờ, tôi có loại văn bản màu xám 699 00:32:07,820 --> 00:32:10,440 mà biến mất như Ngay sau khi tôi bắt đầu đánh máy, 700 00:32:10,440 --> 00:32:12,930 nhưng nó là một cái gì đó có thể bạn đã thấy trong các trang web khác. 701 00:32:12,930 --> 00:32:14,650 Tôi không thực sự thích các nút Submit. 702 00:32:14,650 --> 00:32:18,320 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. 703 00:32:18,320 --> 00:32:21,680 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. 704 00:32:21,680 --> 00:32:24,140 Bạn biết đấy, tôi không thực sự như logo ở đây. 705 00:32:24,140 --> 00:32:27,140 Vì vậy, máy phát điện Google Font. 706 00:32:27,140 --> 00:32:28,820 >> Tôi muốn thêm gia vị này lên hơn nữa. 707 00:32:28,820 --> 00:32:30,660 Vì vậy, tìm kiếm CS50. 708 00:32:30,660 --> 00:32:31,870 Hãy để tôi tạo logo của riêng tôi. 709 00:32:31,870 --> 00:32:33,080 Điều đó có vẻ tốt đẹp. 710 00:32:33,080 --> 00:32:36,945 Vì vậy, bây giờ hãy để tôi tiết kiệm này as-- đi vào. 711 00:32:36,945 --> 00:32:40,710 712 00:32:40,710 --> 00:32:43,120 Là nó sẽ đi đâu? 713 00:32:43,120 --> 00:32:43,620 Chỗ đó. 714 00:32:43,620 --> 00:32:44,160 ĐƯỢC. 715 00:32:44,160 --> 00:32:44,980 Bỏ lỡ nó. 716 00:32:44,980 --> 00:32:47,740 Lưu. 717 00:32:47,740 --> 00:32:49,470 Trình duyệt ngu ngốc. 718 00:32:49,470 --> 00:32:51,700 Stand by, chúng ta sẽ sửa lỗi này một lần và cho tất cả. 719 00:32:51,700 --> 00:32:57,650 720 00:32:57,650 --> 00:32:58,590 Hiện chúng tôi đi. 721 00:32:58,590 --> 00:32:59,090 Được rồi. 722 00:32:59,090 --> 00:32:59,600 Lấy làm tiếc. 723 00:32:59,600 --> 00:33:00,750 Ngay nghỉ. 724 00:33:00,750 --> 00:33:02,310 Bây giờ đây là funky. 725 00:33:02,310 --> 00:33:03,160 Thoát khỏi màn hình đầy đủ. 726 00:33:03,160 --> 00:33:04,150 Được rồi. 727 00:33:04,150 --> 00:33:06,870 >> Bây giờ, như một bình thường người, lưu hình ảnh như. 728 00:33:06,870 --> 00:33:08,810 Logo.gif. 729 00:33:08,810 --> 00:33:13,194 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, 730 00:33:13,194 --> 00:33:15,360 Tôi sẽ kéo nó vào nguồn bảy thư mục của tôi, 731 00:33:15,360 --> 00:33:17,002 tập tin đã tồn tại, tôi là OK với điều đó. 732 00:33:17,002 --> 00:33:19,210 Vì vậy, tôi sẽ ghi đè lên nó bởi vì tôi đã có nó. 733 00:33:19,210 --> 00:33:20,630 Và bây giờ làm thế nào để tôi nhận được thoát khỏi điều này? 734 00:33:20,630 --> 00:33:24,670 >> Chúng ta hãy đi trước đây và làm nguồn hình ảnh bằng logo.gif. 735 00:33:24,670 --> 00:33:25,490 Đóng này. 736 00:33:25,490 --> 00:33:26,050 Lưu lại. 737 00:33:26,050 --> 00:33:30,560 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. 738 00:33:30,560 --> 00:33:33,610 Tất cả các quyền, do đó, nó không có khá làm bất cứ điều gì hữu ích. 739 00:33:33,610 --> 00:33:37,000 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. 740 00:33:37,000 --> 00:33:38,890 Mèo. 741 00:33:38,890 --> 00:33:39,420 Chết tiệt. 742 00:33:39,420 --> 00:33:41,400 Nó không chỉ là công việc, rõ ràng. 743 00:33:41,400 --> 00:33:43,760 Vì vậy, các mảnh quan trọng là những gì đó là mất tích ở đây? 744 00:33:43,760 --> 00:33:49,100 >> 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 745 00:33:49,100 --> 00:33:54,130 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, 746 00:33:54,130 --> 00:33:55,730 những mảnh rõ ràng là mất tích? 747 00:33:55,730 --> 00:33:58,975 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. 748 00:33:58,975 --> 00:34:02,420 749 00:34:02,420 --> 00:34:05,360 Những gì chúng ta cần phải làm gì? 750 00:34:05,360 --> 00:34:08,860 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, 751 00:34:08,860 --> 00:34:11,210 và rằng sẽ mất một toàn bộ rất nhiều thời gian, thẳng thắn. 752 00:34:11,210 --> 00:34:13,380 >> Vì vậy, hãy nhớ những gì chúng tôi đã làm thời gian qua. 753 00:34:13,380 --> 00:34:18,230 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, 754 00:34:18,230 --> 00:34:20,355 thu hồi, tìm kiếm tức thời. 755 00:34:20,355 --> 00:34:22,230 Vì vậy, hãy để tôi bật mà tắt để điều này thực sự 756 00:34:22,230 --> 00:34:26,650 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, 757 00:34:26,650 --> 00:34:28,190 nhớ lại những gì trông giống như URL. 758 00:34:28,190 --> 00:34:29,449 Nó khá khó hiểu. 759 00:34:29,449 --> 00:34:33,000 Nhưng nhúng trong đó, thu hồi, là tìm kiếm dấu gạch chéo. 760 00:34:33,000 --> 00:34:35,100 Câu hỏi đánh dấu q bằng mèo. 761 00:34:35,100 --> 00:34:37,760 >> Và đó dường như để cho tôi một bó toàn bộ các kết quả tìm kiếm. 762 00:34:37,760 --> 00:34:39,134 Vì vậy, bạn biết những gì tôi sẽ làm gì? 763 00:34:39,134 --> 00:34:41,650 Tôi sẽ mượn Google cho chỉ một phút. 764 00:34:41,650 --> 00:34:43,670 Tôi sẽ đi qua ở đây và tôi sẽ nói 765 00:34:43,670 --> 00:34:47,850 rằng điều này tạo thành hành động hay đích, có thể nói, 766 00:34:47,850 --> 00:34:49,330 nghĩa đen nên được Google. 767 00:34:49,330 --> 00:34:52,590 Và phương pháp tôi muốn để sử dụng là có được có được. 768 00:34:52,590 --> 00:34:53,560 >> Vì vậy, hành động này là gì? 769 00:34:53,560 --> 00:34:55,760 Hành động được đặt tên thật là thú vị, nhưng điều đó chỉ có nghĩa là 770 00:34:55,760 --> 00:34:58,120 ai sẽ là người xử lý các hành động của hình thức này? 771 00:34:58,120 --> 00:35:00,820 Khi tôi bấm vào Tìm kiếm, nơi nên kết quả đi? 772 00:35:00,820 --> 00:35:05,300 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 773 00:35:05,300 --> 00:35:09,000 và bây giờ tìm kiếm cái gì giống như con chó, chú ý hiện nay 774 00:35:09,000 --> 00:35:10,850 Tôi đã đang triển khai Google. 775 00:35:10,850 --> 00:35:11,350 Bên phải? 776 00:35:11,350 --> 00:35:14,141 >> 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ó, 777 00:35:14,141 --> 00:35:16,400 nó cũng làm việc cho mèo. 778 00:35:16,400 --> 00:35:21,930 Nó cũng làm việc cho CS50. 779 00:35:21,930 --> 00:35:24,310 Và OK, đây chỉ là dưới whelming, không phải là nó? 780 00:35:24,310 --> 00:35:25,920 Tất cả các quyền, nhưng nó thực sự hoạt động. 781 00:35:25,920 --> 00:35:27,360 Vì vậy, những gì thực sự đã diễn ra? 782 00:35:27,360 --> 00:35:31,340 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 783 00:35:31,340 --> 00:35:35,810 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. 784 00:35:35,810 --> 00:35:39,120 >> Và bởi vì trình duyệt của tôi hiểu HTTP, nó thực sự 785 00:35:39,120 --> 00:35:43,500 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, 786 00:35:43,500 --> 00:35:45,660 thông báo những gì sẽ xảy ra khi tôi tìm kiếm con chó. 787 00:35:45,660 --> 00:35:49,270 Nếu tôi bấm Tìm kiếm, nhận thấy rằng URL thay đổi như tôi dự định 788 00:35:49,270 --> 00:35:52,770 để google.com/search~~V truy vấn bằng con chó. 789 00:35:52,770 --> 00:35:56,020 Và đó là bởi vì hình thức biết, bởi vì phương pháp này là có được, 790 00:35:56,020 --> 00:35:59,560 để đơn giản là gắn nó với URL đó. 791 00:35:59,560 --> 00:36:01,730 >> Bây giờ, các trang web vẫn còn xấu xí. 792 00:36:01,730 --> 00:36:04,890 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. 793 00:36:04,890 --> 00:36:07,640 Và đây là một cái gì đó được biết đến như kiểu trình bày. 794 00:36:07,640 --> 00:36:10,720 Vì vậy, hãy để tôi đi xem một Ví dụ này ở đây và thấy 795 00:36:10,720 --> 00:36:12,380 nếu chúng ta có thể suy ra những gì đang xảy ra. 796 00:36:12,380 --> 00:36:14,520 Đây là CSS0.html. 797 00:36:14,520 --> 00:36:16,532 Và đây là nơi mà mọi thứ có được một chút xấu xí. 798 00:36:16,532 --> 00:36:18,490 Bởi vì không may, trong thế giới của các web, 799 00:36:18,490 --> 00:36:20,920 HTML một mình không thể làm tất cả mọi thứ. 800 00:36:20,920 --> 00:36:22,920 Và vì vậy nếu bạn muốn phong cách hóa trang web của bạn, 801 00:36:22,920 --> 00:36:28,370 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. 802 00:36:28,370 --> 00:36:33,090 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. 803 00:36:33,090 --> 00:36:34,700 Và một div chỉ có nghĩa là phân chia. 804 00:36:34,700 --> 00:36:38,060 Vì vậy, nó giống như một đoạn nhưng nó không có cùng một ngữ nghĩa 805 00:36:38,060 --> 00:36:39,180 của một đoạn văn bản. 806 00:36:39,180 --> 00:36:40,940 >> Điều này chỉ có nghĩa là để các trình duyệt, ở đây có 807 00:36:40,940 --> 00:36:45,210 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. 808 00:36:45,210 --> 00:36:47,420 Bây giờ, dòng 21 là nơi div bắt đầu. 809 00:36:47,420 --> 00:36:48,770 Và chỉ mất một đoán. 810 00:36:48,770 --> 00:36:53,080 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? 811 00:36:53,080 --> 00:36:55,640 812 00:36:55,640 --> 00:36:56,311 Chỉnh cho nó. 813 00:36:56,311 --> 00:36:56,810 Đó là tất cả. 814 00:36:56,810 --> 00:36:58,830 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. 815 00:36:58,830 --> 00:37:00,996 >> 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, 816 00:37:00,996 --> 00:37:03,040 được tất cả biện minh trên bên trái. 817 00:37:03,040 --> 00:37:07,430 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. 818 00:37:07,430 --> 00:37:09,450 Chỉ cần cho tôi một lớn, hình chữ nhật vô hình. 819 00:37:09,450 --> 00:37:11,490 Đó là cách tôi muốn suy nghĩ về trang web. 820 00:37:11,490 --> 00:37:13,870 Và sau đó gọi tên nó như sau. 821 00:37:13,870 --> 00:37:16,900 Bên trong những dấu ngoặc kép, bây giờ, là một ngôn ngữ thứ hai 822 00:37:16,900 --> 00:37:19,969 mà chúng tôi giới thiệu hôm nay gọi là style sheets tầng. 823 00:37:19,969 --> 00:37:22,010 Rất may, nó cũng không phải là một ngôn ngữ lập trình, 824 00:37:22,010 --> 00:37:26,470 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ó 825 00:37:26,470 --> 00:37:30,670 trong khi HTML là tất cả về đánh dấu lên các dữ liệu của một trang web 826 00:37:30,670 --> 00:37:32,130 và cấu trúc của một trang web. 827 00:37:32,130 --> 00:37:35,320 CSS nói chung là về dặm cuối cùng, tính thẩm mỹ, 828 00:37:35,320 --> 00:37:40,160 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. 829 00:37:40,160 --> 00:37:43,000 Và quả thực, nó được hình thành với các cặp giá trị quan trọng. 830 00:37:43,000 --> 00:37:46,290 >> 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, 831 00:37:46,290 --> 00:37:49,720 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. 832 00:37:49,720 --> 00:37:51,910 Và bây giờ chú ý đến bạn có thể lồng những điều này. 833 00:37:51,910 --> 00:37:56,780 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, 834 00:37:56,780 --> 00:38:00,270 đó là lý do tại sao tôi có dòng 21 và dòng tương ứng 31. 835 00:38:00,270 --> 00:38:04,820 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. 836 00:38:04,820 --> 00:38:06,530 >> Biểu tượng quyền tác giả John Harvard. 837 00:38:06,530 --> 00:38:09,180 Và giả sử tôi muốn là người đầu tiên của những dòng để được khá lớn. 838 00:38:09,180 --> 00:38:10,450 36 pixels. 839 00:38:10,450 --> 00:38:11,530 Vì vậy, đó là một kích thước phù hợp. 840 00:38:11,530 --> 00:38:13,240 Và tôi muốn trọng lượng của nó được in đậm. 841 00:38:13,240 --> 00:38:15,450 Nhưng sau đó ngay dưới, Tôi muốn văn bản nhỏ hơn. 842 00:38:15,450 --> 00:38:19,980 Và dưới đây là, tôi muốn văn bản thậm chí nhỏ hơn. 843 00:38:19,980 --> 00:38:20,480 Lấy làm tiếc. 844 00:38:20,480 --> 00:38:24,490 845 00:38:24,490 --> 00:38:26,940 Hôm nay cảm thấy như một ngày nghỉ. 846 00:38:26,940 --> 00:38:29,840 >> Vì vậy, bây giờ, những gì tôi làm để thể hiện điều này? 847 00:38:29,840 --> 00:38:34,580 Ở đây trên dòng 22 là một nhúng div hoặc div lồng nhau, nếu bạn sẽ. 848 00:38:34,580 --> 00:38:36,190 Nó cũng có từ khóa phong cách riêng của mình. 849 00:38:36,190 --> 00:38:38,160 Tôi chỉ định kích thước font chữ của 36. 850 00:38:38,160 --> 00:38:40,460 Tôi chỉ định một trọng lượng của phông chữ đậm. 851 00:38:40,460 --> 00:38:43,360 Xuống đây, tôi chỉ xác định 24 pixels. 852 00:38:43,360 --> 00:38:45,960 Và cuối cùng, trong dòng 28, tôi chỉ định 12. 853 00:38:45,960 --> 00:38:49,070 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, 854 00:38:49,070 --> 00:38:52,545 mà chữ trên màn hình thực sự sẽ được in đậm? 855 00:38:52,545 --> 00:38:56,100 856 00:38:56,100 --> 00:38:58,760 Những dòng này là thực sự táo bạo? 857 00:38:58,760 --> 00:38:59,570 >> Chỉ cần John Harvard. 858 00:38:59,570 --> 00:39:00,070 Bên phải? 859 00:39:00,070 --> 00:39:05,940 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. 860 00:39:05,940 --> 00:39:07,920 Làm cho nó font size 36 điểm. 861 00:39:07,920 --> 00:39:09,460 Làm cho các font đậm. 862 00:39:09,460 --> 00:39:11,920 Ngay khi bạn đạt đến thẻ kết thúc tương ứng 863 00:39:11,920 --> 00:39:15,340 hoặc thẻ đóng trên dòng 24, đó có nghĩa, hey trình duyệt, 864 00:39:15,340 --> 00:39:17,640 ngừng làm bất cứ điều gì nó là bạn đang làm. 865 00:39:17,640 --> 00:39:21,020 Và thông báo rõ ràng, mặc dù dòng 22 có tất cả các thuộc tính 866 00:39:21,020 --> 00:39:24,430 như phong cách, khi bạn đóng thẻ trong dòng 24, 867 00:39:24,430 --> 00:39:25,940 bạn chỉ đề cập đến tên của tag. 868 00:39:25,940 --> 00:39:29,990 >> 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. 869 00:39:29,990 --> 00:39:32,860 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 870 00:39:32,860 --> 00:39:38,060 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. 871 00:39:38,060 --> 00:39:41,814 Và nó vẫn còn khá đơn giản, nhưng nhận được khá thú vị. 872 00:39:41,814 --> 00:39:43,980 Nhưng hóa ra có của những thứ khác tôi có thể làm ở đây, 873 00:39:43,980 --> 00:39:46,490 và có nguy cơ làm này hoàn toàn ghê tởm, 874 00:39:46,490 --> 00:39:48,630 ý ở đây rằng trong tôi cơ thể của trang web của tôi, 875 00:39:48,630 --> 00:39:53,930 Tôi có thể làm gì đó buồn cười như bg hoặc màu nền. 876 00:39:53,930 --> 00:39:56,670 >> Và nhanh chóng, màu sắc yêu thích của bạn là gì? 877 00:39:56,670 --> 00:39:57,720 Màu xanh lá cây tôi nghe. 878 00:39:57,720 --> 00:39:58,750 Được rồi. 879 00:39:58,750 --> 00:40:02,920 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. 880 00:40:02,920 --> 00:40:04,710 Tất cả các quyền, do đó không phải là xấu. 881 00:40:04,710 --> 00:40:08,350 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 882 00:40:08,350 --> 00:40:09,360 thậm chí màu đỏ. 883 00:40:09,360 --> 00:40:10,870 Vì vậy, chúng ta hãy xem những gì trông giống như. 884 00:40:10,870 --> 00:40:12,230 Bây giờ nó đang tìm kiếm khá tốt. 885 00:40:12,230 --> 00:40:15,460 Và ở đây, nếu bạn thực sự muốn gây rối với một người nào đó 886 00:40:15,460 --> 00:40:17,487 hoặc nếu bạn muốn được một trong những người 887 00:40:17,487 --> 00:40:20,570 cố gắng lừa bạn truy cập vào một trang web vì họ đã bị lừa Google 888 00:40:20,570 --> 00:40:27,610 vào suy nghĩ có cả một bó của các từ khóa like-- để xem, tải lại. 889 00:40:27,610 --> 00:40:29,020 890 00:40:29,020 --> 00:40:30,680 Nơi nào rồi? 891 00:40:30,680 --> 00:40:31,530 Và vì thế, chúng ta. 892 00:40:31,530 --> 00:40:32,030 Được rồi. 893 00:40:32,030 --> 00:40:34,905 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 894 00:40:34,905 --> 00:40:36,740 khi chúng ta nói về an ninh, nếu bạn thực sự 895 00:40:36,740 --> 00:40:38,852 nhúng cả chùm từ khóa trong một trang web, 896 00:40:38,852 --> 00:40:41,810 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, 897 00:40:41,810 --> 00:40:43,250 vẫn có thể thực sự tìm thấy này. 898 00:40:43,250 --> 00:40:45,820 Tất cả các quyền, vì vậy đó là khá gớm guốc khá nhanh chóng. 899 00:40:45,820 --> 00:40:48,420 >> 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 900 00:40:48,420 --> 00:40:51,480 trang như là một đại học, trong đó Tôi bắt đầu googling xung quanh để tìm 901 00:40:51,480 --> 00:40:53,690 phiên bản trước đây của trang web cũ của tôi. 902 00:40:53,690 --> 00:40:54,500 Nó là khá xấu. 903 00:40:54,500 --> 00:40:56,650 Trong thực tế, tôi đã tìm thấy một ngay trước lớp. 904 00:40:56,650 --> 00:40:58,620 Nhưng có tồi tệ ra khỏi đó. 905 00:40:58,620 --> 00:41:01,534 Điều này dường như là của tôi trang chủ trở lại vào năm 1996. 906 00:41:01,534 --> 00:41:04,200 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ọ 907 00:41:04,200 --> 00:41:05,991 trước khi họ có thể thực sự thấy trang web của tôi. 908 00:41:05,991 --> 00:41:09,380 909 00:41:09,380 --> 00:41:11,920 >> Và sau đó tôi chỉ cho họ một cái gì đó ngu ngốc, có lẽ. 910 00:41:11,920 --> 00:41:13,450 Tôi sẽ đào lên nhiều hơn cho thời gian tiếp theo. 911 00:41:13,450 --> 00:41:16,220 Nhưng hiện nay, chúng ta hãy xem xét một chút về thiết kế. 912 00:41:16,220 --> 00:41:17,444 Chúng tôi đã nói chuyện về phong cách. 913 00:41:17,444 --> 00:41:19,735 Và trang này cho đến nay và hầu hết tất cả mọi thứ tôi đã viết 914 00:41:19,735 --> 00:41:21,890 là khá sạch sẽ phong cách. 915 00:41:21,890 --> 00:41:23,320 Nhưng những gì về thiết kế? 916 00:41:23,320 --> 00:41:25,990 Vâng, có rất nhiều dự phòng trong những gì tôi đã làm ở đây. 917 00:41:25,990 --> 00:41:28,156 >> Tôi đã đề cập đến từ màu sắc trong một vài chỗ. 918 00:41:28,156 --> 00:41:31,630 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ỗ. 919 00:41:31,630 --> 00:41:34,870 Và căn bản, tôi đồng hòa hai thứ tiếng. 920 00:41:34,870 --> 00:41:38,100 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, 921 00:41:38,100 --> 00:41:40,100 giữa dấu ngoặc kép, tôi có ngôn ngữ thứ hai hôm nay 922 00:41:40,100 --> 00:41:43,830 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 923 00:41:43,830 --> 00:41:45,280 cách nhau bằng dấu hai chấm. 924 00:41:45,280 --> 00:41:47,700 >> Nó chỉ ra rằng nhiều giống như trong C, nơi chúng tôi 925 00:41:47,700 --> 00:41:50,550 có thể bắt đầu yếu tố ra một số mã vào tập tin tiêu đề, 926 00:41:50,550 --> 00:41:53,520 vì vậy chúng tôi có thể làm điều tương tự trong HTML. 927 00:41:53,520 --> 00:41:56,030 Và một bước về phía đó là như sau. 928 00:41:56,030 --> 00:42:02,230 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. 929 00:42:02,230 --> 00:42:05,250 Vì vậy, tôi đã có cả một bó divs, nhưng lần này, tôi đã 930 00:42:05,250 --> 00:42:07,220 gạt bỏ các wrapper div như bạn sẽ thấy. 931 00:42:07,220 --> 00:42:12,390 >> Và tôi đã đưa ra những ba divs đầu, giữa và cuối, ID duy nhất. 932 00:42:12,390 --> 00:42:14,760 Điều này là tốt đẹp, bởi vì theo cho những bộ phận 933 00:42:14,760 --> 00:42:18,715 của trang định danh duy nhất, Tôi có thể tham khảo ở một nơi khác. 934 00:42:18,715 --> 00:42:19,215 Ở đâu? 935 00:42:19,215 --> 00:42:21,070 Vâng, hãy để tôi di chuyển lên. 936 00:42:21,070 --> 00:42:24,070 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ì 937 00:42:24,070 --> 00:42:28,560 thẻ duy nhất chúng ta đã có trong người đứng đầu của một trang web? 938 00:42:28,560 --> 00:42:29,740 A to hơn chút. 939 00:42:29,740 --> 00:42:30,799 Chỉ tiêu đề cho đến nay. 940 00:42:30,799 --> 00:42:32,590 Nhưng hóa ra có của một số những thứ khác 941 00:42:32,590 --> 00:42:35,840 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. 942 00:42:35,840 --> 00:42:37,850 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. 943 00:42:37,850 --> 00:42:39,150 Hóa ra có một từ khóa phong cách. 944 00:42:39,150 --> 00:42:41,200 Nó thuộc về bên trong người đứng đầu của một trang web. 945 00:42:41,200 --> 00:42:42,840 Và bây giờ nhận thấy những gì tôi đang làm. 946 00:42:42,840 --> 00:42:46,540 Tôi có bên trong này từ khóa phong cách sau đây. 947 00:42:46,540 --> 00:42:51,190 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. 948 00:42:51,190 --> 00:42:53,489 >> Sau đó, tôi có ngoặc móc mở và đóng ngoặc móc. 949 00:42:53,489 --> 00:42:56,030 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, 950 00:42:56,030 --> 00:42:57,796 đây chỉ là một chi tiết cú pháp ở đây. 951 00:42:57,796 --> 00:43:00,170 Và dĩ nhiên, tôi nói trình duyệt, trình duyệt hey, 952 00:43:00,170 --> 00:43:05,210 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. 953 00:43:05,210 --> 00:43:06,930 Và sau đó điều này được nói những điều sau đây. 954 00:43:06,930 --> 00:43:12,600 Hey trình duyệt, nếu bạn thấy một HTML nguyên tố hoặc tag trong trang đó 955 00:43:12,600 --> 00:43:17,040 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à 956 00:43:17,040 --> 00:43:21,010 ý 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 957 00:43:21,010 --> 00:43:22,490 và trọng lượng phông chữ của nó đậm. 958 00:43:22,490 --> 00:43:26,840 >> Hey trình duyệt, một yếu tố mà ID là trung bình, làm cho nó 24 pixels. 959 00:43:26,840 --> 00:43:31,070 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. 960 00:43:31,070 --> 00:43:33,540 Hiệu quả cuối cùng là chính xác sam. 961 00:43:33,540 --> 00:43:36,500 Nếu tôi đi vào CSS 1, trang trông giống nhau. 962 00:43:36,500 --> 00:43:39,810 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. 963 00:43:39,810 --> 00:43:44,850 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. 964 00:43:44,850 --> 00:43:48,030 >> Bây giờ trang thực sự, thực sự sạch sẽ. 965 00:43:48,030 --> 00:43:50,730 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. 966 00:43:50,730 --> 00:43:54,270 Nhưng những gì tôi có tag mới giới thiệu, rõ ràng? 967 00:43:54,270 --> 00:43:54,770 Link. 968 00:43:54,770 --> 00:43:57,853 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 969 00:43:57,853 --> 00:44:00,780 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. 970 00:44:00,780 --> 00:44:02,890 Đây là loại giống như bao gồm sắc nét trong C. 971 00:44:02,890 --> 00:44:06,280 >> Đây là cách trong HTML để nói hey trình duyệt, 972 00:44:06,280 --> 00:44:10,240 đi được nội dung của các tập tin gọi là css2.css. 973 00:44:10,240 --> 00:44:12,880 Các mối quan hệ, với tôi, là nó là một style sheet. 974 00:44:12,880 --> 00:44:17,980 Và quả thực, đó là những gì một trong những Của S trong cascading style sheets phương tiện. 975 00:44:17,980 --> 00:44:20,350 Đây là một style sheet. 976 00:44:20,350 --> 00:44:23,120 Nó chỉ là tập tin văn bản có chứa một bó toàn bộ tài sản. 977 00:44:23,120 --> 00:44:25,940 Đó là một bó toàn bộ phong cách mà bạn muốn áp dụng cho một trang. 978 00:44:25,940 --> 00:44:28,860 >> Và do đó, đây rõ ràng là đề cập đến một tập tin thứ hai. 979 00:44:28,860 --> 00:44:32,970 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 980 00:44:32,970 --> 00:44:35,900 là sao chép và dán tất cả điều này vào trong tập tin này. 981 00:44:35,900 --> 00:44:38,220 Và bây giờ, ngay cả khi bạn chưa bao giờ mã hóa công cụ này trước khi, 982 00:44:38,220 --> 00:44:40,700 chỉ xem xét với các hat kỹ thuật ngôn 983 00:44:40,700 --> 00:44:44,220 trên, tại sao là một này thiết kế tốt hơn có lẽ? 984 00:44:44,220 --> 00:44:48,910 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ọ. 985 00:44:48,910 --> 00:44:51,330 Mặc dù chúng tôi đã giải quyết này vấn đề như năm phút trước 986 00:44:51,330 --> 00:44:52,600 trong phiên bản đầu tiên. 987 00:44:52,600 --> 00:44:55,730 >> Chúng tôi đã không cải thiện trang phong cách, 988 00:44:55,730 --> 00:44:57,520 đây chỉ là tốt hơn thiết kế trong một nghĩa nào đó. 989 00:44:57,520 --> 00:44:58,990 Tại sao bạn nghĩ rằng? 990 00:44:58,990 --> 00:45:01,510 Yeah. 991 00:45:01,510 --> 00:45:02,260 Linh hoạt hơn như thế nào? 992 00:45:02,260 --> 00:45:05,040 993 00:45:05,040 --> 00:45:05,540 Yeah. 994 00:45:05,540 --> 00:45:07,373 Vì vậy, nếu bạn muốn đi trở lại và thay đổi mọi thứ, 995 00:45:07,373 --> 00:45:09,540 Hiện tại, bạn có một nơi nơi bạn có thể thay đổi mọi thứ. 996 00:45:09,540 --> 00:45:11,622 Và trên thực tế, cho một cái gì đó như vấn đề thiết lập bảy, 997 00:45:11,622 --> 00:45:13,690 mà chúng ta sẽ thực hiện một trang web kinh doanh chứng khoán, 998 00:45:13,690 --> 00:45:15,523 đó là sẽ có một bó toàn bộ các trang. 999 00:45:15,523 --> 00:45:17,620 Và nó sẽ thực sự gây phiền nhiễu nếu bạn quyết định, hm, 1000 00:45:17,620 --> 00:45:21,630 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. 1001 00:45:21,630 --> 00:45:23,550 Và sau đó phải làm một toàn cầu tìm và thay thế 1002 00:45:23,550 --> 00:45:27,560 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ị. 1003 00:45:27,560 --> 00:45:31,290 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, 1004 00:45:31,290 --> 00:45:34,720 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, 1005 00:45:34,720 --> 00:45:36,479 thay đổi nó, lưu nó, và thực hiện. 1006 00:45:36,479 --> 00:45:38,270 Bạn đã nhân giống những thay đổi ở khắp mọi nơi. 1007 00:45:38,270 --> 00:45:42,450 Và đó sẽ là như nhau trong một file dot h là tốt. 1008 00:45:42,450 --> 00:45:46,697 Vì vậy, bất kỳ câu hỏi như vậy, xa về cú pháp này? 1009 00:45:46,697 --> 00:45:48,530 Được rồi, vì vậy chúng tôi đã thực hiện tất cả mọi thứ có vẻ như 1010 00:45:48,530 --> 00:45:51,170 ngoại trừ thực sự thực hiện các siêu liên kết. 1011 00:45:51,170 --> 00:45:52,740 Và như vậy chúng ta hãy đi trước và làm điều này. 1012 00:45:52,740 --> 00:45:54,830 Hãy để tôi đi trước và tạo ra một tập tin mới ở đây. 1013 00:45:54,830 --> 00:45:59,970 Tôi sẽ gọi nó link.html, đặt trong mã ngày nay. 1014 00:45:59,970 --> 00:46:03,000 >> Và tôi sẽ làm mở khung loại doc html. 1015 00:46:03,000 --> 00:46:05,970 Là một sang một bên, điều này tại top, doc khai báo kiểu này, 1016 00:46:05,970 --> 00:46:08,420 nó chỉ có một mà là lạ với dấu chấm than. 1017 00:46:08,420 --> 00:46:12,100 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. 1018 00:46:12,100 --> 00:46:14,460 Các phiên bản cũ hơn của ngôn ngữ có nhiều thời gian hơn 1019 00:46:14,460 --> 00:46:16,400 dây mà bạn cần phải đặt ở đó. 1020 00:46:16,400 --> 00:46:18,620 Vì vậy, đây là một ví dụ được gọi là liên kết. 1021 00:46:18,620 --> 00:46:20,950 >> Tôi cần một cơ thể của trang web của tôi ở đây. 1022 00:46:20,950 --> 00:46:29,770 Và ở đây, một equals href hãy nói HTTP://www.disney.com 1023 00:46:29,770 --> 00:46:35,420 và trang web yêu thích của tôi, chúng tôi sẽ nói. 1024 00:46:35,420 --> 00:46:38,550 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. 1025 00:46:38,550 --> 00:46:42,950 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, 1026 00:46:42,950 --> 00:46:44,780 chúng tôi có văn bản siêu. 1027 00:46:44,780 --> 00:46:47,410 >> Và quả thực, đây là nơi mà H trong HTTP đến từ. 1028 00:46:47,410 --> 00:46:51,580 Giao thức truyền siêu văn bản là về việc chuyển văn bản 1029 00:46:51,580 --> 00:46:53,840 mà có các liên kết đến các tài nguyên khác. 1030 00:46:53,840 --> 00:46:58,210 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, 1031 00:46:58,210 --> 00:47:02,607 sẽ thực sự đưa tôi đến với Disney.com. 1032 00:47:02,607 --> 00:47:03,940 Bây giờ, oh, đó là sắp ra sớm. 1033 00:47:03,940 --> 00:47:08,970 Đượ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? 1034 00:47:08,970 --> 00:47:11,610 >> 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 1035 00:47:11,610 --> 00:47:15,090 và cũng có một chút đáng sợ nhưng cũng nhiều hơn một chút 1036 00:47:15,090 --> 00:47:17,840 tự bảo vệ được khi bạn bắt đầu để hiểu những điều này. 1037 00:47:17,840 --> 00:47:21,610 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í 1038 00:47:21,610 --> 00:47:23,990 hộp thư đến của bạn, bạn đã có thể nhận được một số loại email 1039 00:47:23,990 --> 00:47:26,980 đó 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 1040 00:47:26,980 --> 00:47:28,910 chứng chỉ PayPal của bạn hoặc có điều gì. 1041 00:47:28,910 --> 00:47:34,510 >> Và trong thực tế, bạn có thể đã nhận cái gì mà nói như bấm vào đây 1042 00:47:34,510 --> 00:47:42,260 để thiết lập lại mật khẩu của bạn PayPal. 1043 00:47:42,260 --> 00:47:44,130 Và bây giờ, thông báo, nếu đây không phải là Disney.com 1044 00:47:44,130 --> 00:47:51,600 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 1045 00:47:51,600 --> 00:47:53,710 có thể nói bất cứ điều gì nào. 1046 00:47:53,710 --> 00:47:55,260 Và trên thực tế, đây chỉ là lời nói. 1047 00:47:55,260 --> 00:48:04,610 Tại sao tôi không thực sự là siêu độc hại và nói http://www.paypal.com. 1048 00:48:04,610 --> 00:48:14,090 >> 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. 1049 00:48:14,090 --> 00:48:16,220 Điều này có vẻ khá chính đáng, phải không? 1050 00:48:16,220 --> 00:48:20,470 Ý tôi là, tôi sẽ không bấm vào một email mà chỉ nói điều này. 1051 00:48:20,470 --> 00:48:22,450 Nhưng nhận thấy sự phân đôi ở đây. 1052 00:48:22,450 --> 00:48:26,880 Nó nói www.paypal.com, và trong thực tế, chờ một phút, 1053 00:48:26,880 --> 00:48:29,210 chúng tôi biết rằng bạn muốn s để bảo mật. 1054 00:48:29,210 --> 00:48:35,450 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, 1055 00:48:35,450 --> 00:48:38,182 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. 1056 00:48:38,182 --> 00:48:39,890 Và thật khó để xem trên màn hình đó, 1057 00:48:39,890 --> 00:48:41,340 và nó không phải là tất cả những gì dễ dàng hơn ở đây. 1058 00:48:41,340 --> 00:48:43,615 Nhưng cách xuống đây ở góc nhỏ nhỏ 1059 00:48:43,615 --> 00:48:45,740 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 1060 00:48:45,740 --> 00:48:48,850 để badplace.com thay vì Paypal.com. 1061 00:48:48,850 --> 00:48:51,620 Bây giờ, chúng ta đi đâu với điều này? 1062 00:48:51,620 --> 00:48:54,859 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. 1063 00:48:54,859 --> 00:48:56,900 Các web là vô cùng không thú vị khi bạn cứng 1064 00:48:56,900 --> 00:48:59,844 mã trang web của bạn để nội dung là tĩnh và không bao giờ thay đổi. 1065 00:48:59,844 --> 00:49:01,760 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, 1066 00:49:01,760 --> 00:49:04,470 cho dù đó là Gmail hay Twitter hay Facebook hoặc bất kỳ số nào của người khác 1067 00:49:04,470 --> 00:49:05,290 năng động. 1068 00:49:05,290 --> 00:49:07,340 Họ đang thay đổi trong phản ứng để người dùng nhập vào 1069 00:49:07,340 --> 00:49:08,840 giống như các kết quả tìm kiếm Google. 1070 00:49:08,840 --> 00:49:12,415 >> 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 1071 00:49:12,415 --> 00:49:14,290 phía sau chúng tôi và chúng tôi cho cấp mà chúng tôi hiện nay 1072 00:49:14,290 --> 00:49:16,640 biết điều đó và chúng tôi giới thiệu một ngôn ngữ lập trình mới 1073 00:49:16,640 --> 00:49:19,050 gọi là PHP, mà thích C, sẽ cung cấp cho chúng tôi 1074 00:49:19,050 --> 00:49:22,450 sức mạnh để thực sự tạo ra các chương trình mà mình tạo ra. 1075 00:49:22,450 --> 00:49:25,900 Trong trường hợp này, chúng ta sẽ sử dụng PHP để tạo ra động web 1076 00:49:25,900 --> 00:49:27,340 các trang bằng cách sử dụng ngôn ngữ mới này. 1077 00:49:27,340 --> 00:49:28,989 Vì vậy, thêm vào đó hôm thứ Tư. 1078 00:49:28,989 --> 00:49:29,530 Gặp lại sau. 1079 00:49:29,530 --> 00:49:33,130 1080 00:49:33,130 --> 00:49:37,380 >> [MUSIC CHƠI] 1081 00:49:37,380 --> 00:52:38,864