1 00:00:00,000 --> 00:00:03,486 >> [MUSIC PLAYING] 2 00:00:03,486 --> 00:00:10,460 3 00:00:10,460 --> 00:00:14,250 >> DAVID J Malan: Ini adalah CS50 dan ini adalah awal minggu 7. 4 00:00:14,250 --> 00:00:15,060 Jadi selamat datang kembali. 5 00:00:15,060 --> 00:00:17,540 Dan Anda mungkin ingat bahwa di masalah menetapkan empat, 6 00:00:17,540 --> 00:00:21,510 ada sedikit perburuan untuk beberapa hadiah yang luar biasa dimana 7 00:00:21,510 --> 00:00:24,219 setelah Anda memulihkan foto Staf baik di sini dan di New Haven, 8 00:00:24,219 --> 00:00:27,468 Anda ditantang untuk menemukan banyak dari para ilmuwan komputer yang Anda bisa. 9 00:00:27,468 --> 00:00:29,550 Dan kita punya seluruh sekelompok kiriman. 10 00:00:29,550 --> 00:00:31,930 Pikir saya akan berbagi beberapa dengan Anda di sini hari ini. 11 00:00:31,930 --> 00:00:35,100 >> Dan kami akan posting semua ini secara online. 12 00:00:35,100 --> 00:00:39,310 Tapi secara khusus, saya ingin menarik perhatian Anda to-- baik satu, 13 00:00:39,310 --> 00:00:42,670 Sam di beberapa dari mereka umumnya berpose seperti ini. 14 00:00:42,670 --> 00:00:45,750 Tapi tampaknya pada pagi ini, pemenang 15 00:00:45,750 --> 00:00:51,170 itu seseorang tertentu bernama Ken dengan 24 staf ditangkap kamera 16 00:00:51,170 --> 00:00:54,600 atau beberapa saat Anda memperhitungkan rekening beberapa staf dalam gambar. 17 00:00:54,600 --> 00:00:58,300 Digambarkan di sini adalah Ken berikutnya Maria di New Haven. 18 00:00:58,300 --> 00:01:01,300 >> Sekarang, Ken, meskipun, ternyata keluar sedikit dari kasus sudut 19 00:01:01,300 --> 00:01:02,880 yang belum terjadi sebelumnya. 20 00:01:02,880 --> 00:01:05,713 Ternyata hal itu tidak terjadi saya menempatkan baik cetak di masalah 21 00:01:05,713 --> 00:01:09,710 menetapkan empat yang mengatakan bahwa staf tidak memenuhi syarat untuk hadiah yang luar biasa 22 00:01:09,710 --> 00:01:13,130 karena Ken, tentu saja, salah satu fotografer pada staf kami. 23 00:01:13,130 --> 00:01:16,820 Sekarang, dengan mengatakan bahwa, dia awalnya menulis saya untuk mengatakan 24 00:01:16,820 --> 00:01:19,180 jangan posting foto-foto ini secara online. 25 00:01:19,180 --> 00:01:21,630 Saya pikir sebagian besar karena sebagian besar foto 26 00:01:21,630 --> 00:01:24,499 bahwa fotografer ini mengambil melihat sedikit sesuatu seperti ini. 27 00:01:24,499 --> 00:01:25,040 Dan sejenisnya. 28 00:01:25,040 --> 00:01:28,990 >> Tapi Ken ingin saya untuk meyakinkan Anda bahwa dia seorang fotografer yang sangat baik, 29 00:01:28,990 --> 00:01:33,190 dia seorang profesional, ia mengambil Foto yang tidak kabur, 30 00:01:33,190 --> 00:01:37,270 yang lebih baik dalam fokus, dan dia mengambil beberapa staf kami sendiri. 31 00:01:37,270 --> 00:01:40,370 Namun, bukannya hanya mengakui Ken, apa yang kami pikir kami akan melakukan 32 00:01:40,370 --> 00:01:43,390 adalah pergi melalui daftar siswa yang sebenarnya yang diajukan. 33 00:01:43,390 --> 00:01:48,640 Dan ternyata bahwa Lance dengan 15 foto per pagi ini 34 00:01:48,640 --> 00:01:50,030 adalah pemenang kami. 35 00:01:50,030 --> 00:01:55,730 >> Dan digambarkan di sini adalah Lance dengan Colton, dengan Skaz, dengan diriku sendiri, dan dengan Sam. 36 00:01:55,730 --> 00:02:00,230 Tapi kemudian ternyata bahwa pada 11:46, sehingga hanya sedikit yang lalu, 37 00:02:00,230 --> 00:02:04,380 Aku kembali ke email saya dan menemukan bahwa kita belum satu pengajuan lebih 38 00:02:04,380 --> 00:02:08,300 oleh seorang mahasiswa bernama Bonnie email yang mengatakan hanya ini. 39 00:02:08,300 --> 00:02:10,800 Tidak akan berbohong, aku melakukan hal ini selama kelas. 40 00:02:10,800 --> 00:02:17,620 Dan kemudian melanjutkan untuk melampirkan hanya 14 foto, salah malu Lance 15. 41 00:02:17,620 --> 00:02:22,690 >> Tapi dalam foto Bonnie, ternyata out yang beberapa anggota staf, Sam 42 00:02:22,690 --> 00:02:25,960 di antara mereka, sehingga apa yang kami pikir kami akan lakukan adalah mengakui kedua. 43 00:02:25,960 --> 00:02:29,240 Jadi selain mendapatkan Dropbox ruang bahwa setiap orang yang berpartisipasi 44 00:02:29,240 --> 00:02:33,900 menerima, dua bagian ini juga akan menerima makan siang dipenuhi bagus untuk mereka 45 00:02:33,900 --> 00:02:36,100 dan bagian mereka Mates minggu mendatang ini. 46 00:02:36,100 --> 00:02:38,970 Dan sehingga Anda akan mendengar dari kami, Lance dan Bonnie, tentang itu. 47 00:02:38,970 --> 00:02:40,002 Congrats begitu besar kepada mereka. 48 00:02:40,002 --> 00:02:42,210 Sekarang, Anda yang akan seperti makan siang lebih umum 49 00:02:42,210 --> 00:02:45,320 tahu bahwa makan siang CS50 di Cambridge dan New Haven adalah hari Jumat ini. 50 00:02:45,320 --> 00:02:48,510 Pergi ke CS50 situs slash RSVP. 51 00:02:48,510 --> 00:02:49,800 Dan sekarang kata pada seminar. 52 00:02:49,800 --> 00:02:50,730 Lebih curricularly. 53 00:02:50,730 --> 00:02:52,490 Jadi kita mendekati titik semester 54 00:02:52,490 --> 00:02:55,200 di mana Anda harus mulai berpikir tentang proyek akhir. 55 00:02:55,200 --> 00:02:59,309 Dan pada kenyataannya, hanya sedikit, akan disebut-usulan pra disebabkan. 56 00:02:59,309 --> 00:03:01,850 Proposal sehingga pra dimaksudkan untuk dampak cukup rendah dan benar-benar 57 00:03:01,850 --> 00:03:04,109 hanya kesempatan bagi Anda untuk menulis catatan singkat 58 00:03:04,109 --> 00:03:06,900 mengajar sesama untuk memberitahukan dia apa yang Anda berpikir Anda 59 00:03:06,900 --> 00:03:09,140 mungkin ingin lakukan untuk proyek akhir Anda. 60 00:03:09,140 --> 00:03:11,730 >> Sekarang, banyak siswa berakhir melakukan web berbasis proyek akhir. 61 00:03:11,730 --> 00:03:13,800 Dan tentu saja, kami hanya minggu sekarang lalu di ini 62 00:03:13,800 --> 00:03:15,890 dan di luar menyelam ke dalam pemrograman web. 63 00:03:15,890 --> 00:03:18,200 Jadi tidak perlu khawatir jika Anda sama sekali tidak tahu bagaimana 64 00:03:18,200 --> 00:03:21,594 Anda akan membangun ide-ide yang Anda mungkin ada dalam pikiran Anda. 65 00:03:21,594 --> 00:03:24,510 Ini benar-benar hanya fungsi memaksa untuk membuat Anda berpikir dan berbicara 66 00:03:24,510 --> 00:03:25,650 dengan TF Anda tentang hal itu. 67 00:03:25,650 --> 00:03:28,810 Tapi untuk membantu Anda dengan itu, dan dengan proyek akhir akhirnya, 68 00:03:28,810 --> 00:03:31,750 tahu bahwa CS50 memiliki tradisi menawarkan seminar. 69 00:03:31,750 --> 00:03:36,084 >> Dan ini adalah opsional, tangan, atau kuliah berdasarkan peluang 70 00:03:36,084 --> 00:03:39,000 untuk mempelajari lebih lanjut tentang topik yang sebuah tambahan sedikit untuk kursus ini 71 00:03:39,000 --> 00:03:43,310 silabus, tapi tetap indah bahan untuk mendorong proyek akhir. 72 00:03:43,310 --> 00:03:46,840 Dan jadi ini adalah daftar yang Staf CS50 di sini di New Haven 73 00:03:46,840 --> 00:03:48,600 telah datang dengan untuk tahun ini sekitar iOS 74 00:03:48,600 --> 00:03:50,730 pemrograman, Android pemrograman, pengembangan game, 75 00:03:50,730 --> 00:03:54,480 dan tandan alat yang lebih dan bahasa dan teknik. 76 00:03:54,480 --> 00:03:56,780 >> Sehingga mengawasi di website CS50 ini. 77 00:03:56,780 --> 00:04:00,110 Dan sementara itu, jika Anda ingin mendaftarkan minat Anda di salah satu, 78 00:04:00,110 --> 00:04:02,510 pergi ke CS50 ini slash daftar. 79 00:04:02,510 --> 00:04:05,770 Dan kita kemudian akan menindaklanjuti mengenai hari dan waktu penerbangan dan lokasi 80 00:04:05,770 --> 00:04:09,090 dan Segalanya-hampir semua akan menjadi streaming dan juga tersedia pada permintaan 81 00:04:09,090 --> 00:04:11,750 setelah jika Anda tidak dapat benar-benar membuatnya. 82 00:04:11,750 --> 00:04:15,800 Jadi tanpa basa-basi lagi, kami tinggalkan terakhir kali dengan GET. 83 00:04:15,800 --> 00:04:19,610 >> Dan ini adalah seperti pesan yang dalam amplop virtual, ingat, 84 00:04:19,610 --> 00:04:23,960 bahwa kami melewati dari router ke router untuk router antara browser web dan web 85 00:04:23,960 --> 00:04:24,487 Server. 86 00:04:24,487 --> 00:04:26,695 Dan pesan yang tampak sedikit sesuatu seperti ini. 87 00:04:26,695 --> 00:04:29,700 Ini adalah pesan yang lebih misterius yang sebenarnya dalam amplop 88 00:04:29,700 --> 00:04:34,440 ditulis pada selembar kertas yang baris pertama kata harfiah, dapatkan slash. 89 00:04:34,440 --> 00:04:37,830 >> Dan seperti cek kewarasan, apa slash menunjukkan? 90 00:04:37,830 --> 00:04:40,455 Apa slash berarti bila meminta sebuah website? 91 00:04:40,455 --> 00:04:43,070 92 00:04:43,070 --> 00:04:44,250 Anda memintanya sepanjang waktu. 93 00:04:44,250 --> 00:04:47,333 Kebanyakan setiap kali Anda mengunjungi sebuah website, Anda tidak benar-benar ketik nama file. 94 00:04:47,333 --> 00:04:50,960 Anda mungkin hanya pergi ke Facebook.com, masukkan, gmail.com, atau sejenisnya. 95 00:04:50,960 --> 00:04:52,260 Dan apa slash mewakili? 96 00:04:52,260 --> 00:04:53,506 File apa? 97 00:04:53,506 --> 00:04:54,630 Atau apa halaman, khususnya? 98 00:04:54,630 --> 00:04:59,642 99 00:04:59,642 --> 00:05:00,720 >> Indeks, ya. 100 00:05:00,720 --> 00:05:01,810 Jadi halaman default. 101 00:05:01,810 --> 00:05:04,810 Jadi jika Anda tidak menentukan sebuah file nama seperti yang kita akan mulai melihat, 102 00:05:04,810 --> 00:05:07,750 Anda benar-benar hanya meminta memberi saya halaman default dari Facebook 103 00:05:07,750 --> 00:05:10,800 atau memberi saya inbox saya atau memberikan saya halaman default berita 104 00:05:10,800 --> 00:05:12,510 di website CNN atau sejenisnya. 105 00:05:12,510 --> 00:05:15,220 Dan server kemudian merespon bahwa pesan dengan sesuatu 106 00:05:15,220 --> 00:05:18,420 seperti ini, mengatakan ya, saya berbicara HTTP versi 1.1. 107 00:05:18,420 --> 00:05:21,130 >> 200, yang merupakan status kode yang kita manusia jarang 108 00:05:21,130 --> 00:05:22,790 pernah melihat karena itu baik. 109 00:05:22,790 --> 00:05:26,640 Karena itu berarti OK, permintaan telah diterima dan ditangani dengan benar. 110 00:05:26,640 --> 00:05:28,960 Dan jenis konten ternyata di respon 111 00:05:28,960 --> 00:05:31,170 cukup sering, namun tidak selalu, teks. 112 00:05:31,170 --> 00:05:32,580 Dan secara khusus, HTML. 113 00:05:32,580 --> 00:05:34,760 Dan itu benar-benar di mana kita melihat hari ini. 114 00:05:34,760 --> 00:05:37,140 >> Jadi sebenarnya, aku akan pergi depan dan membuka browser. 115 00:05:37,140 --> 00:05:40,410 Aku akan menggunakan Chrome, Anda dapat menggunakan kebanyakan browser apapun dalam minggu-minggu yang akan datang. 116 00:05:40,410 --> 00:05:42,410 Kami umumnya merekomendasikan Chrome karena itu sangat 117 00:05:42,410 --> 00:05:43,750 baik untuk pengembang perangkat lunak. 118 00:05:43,750 --> 00:05:46,070 Itu punya banyak dibangun di alat yang memudahkan 119 00:05:46,070 --> 00:05:49,800 untuk mengembangkan tidak hanya HTML dan CSS, hal yang kita akan mulai berbicara tentang hari ini, 120 00:05:49,800 --> 00:05:51,530 tetapi juga bahasa lain juga. 121 00:05:51,530 --> 00:05:55,530 >> Dan aku akan pergi ke depan dan pergi to-- Aku akan Kontrol klik atau kanan 122 00:05:55,530 --> 00:05:57,210 klik di mana saja pada halaman web. 123 00:05:57,210 --> 00:05:59,070 Dan aku akan pergi ke Inspect Element. 124 00:05:59,070 --> 00:06:03,850 Dan aku akan men-tweak saya Layar hanya sedikit di sini. 125 00:06:03,850 --> 00:06:05,790 Biarkan saya pindah ini ke bawah. 126 00:06:05,790 --> 00:06:08,140 Jadi ini adalah apa yang disebut Inspektur Chrome. 127 00:06:08,140 --> 00:06:11,010 Jadi ini seperti sebuah debugging alat dibangun ke Chrome. 128 00:06:11,010 --> 00:06:13,520 >> Semua dari Anda sudah memiliki ini jika Anda sudah menggunakan Chrome. 129 00:06:13,520 --> 00:06:17,169 Dan memungkinkan Anda untuk melihat apa yang terjadi di bawah kap beberapa halaman web. 130 00:06:17,169 --> 00:06:19,210 Jadi mari kita benar-benar mengambil melihat ini sebagai berikut. 131 00:06:19,210 --> 00:06:21,251 Ini memiliki cara yang lebih fitur dan kita peduli tentang hari ini. 132 00:06:21,251 --> 00:06:22,760 Tapi ada tab ini di sini. 133 00:06:22,760 --> 00:06:25,890 Elemen, jaringan, sumber, waktu, dan beberapa hal lainnya. 134 00:06:25,890 --> 00:06:27,800 Aku akan mengklik Jaringan sejenak. 135 00:06:27,800 --> 00:06:30,500 >> Dan itu sedikit berlebihan pada pandangan pertama di sini. 136 00:06:30,500 --> 00:06:34,190 Tapi apa yang akan saya lakukan adalah membiarkan saya menyederhanakannya sedikit. 137 00:06:34,190 --> 00:06:37,560 Aku akan menghidupkan merekam cahaya sehingga itu merah. 138 00:06:37,560 --> 00:06:39,140 Dan aku akan mengatakan melestarikan log. 139 00:06:39,140 --> 00:06:41,015 Dan ini hanya sedikit hal yang saya tahu 140 00:06:41,015 --> 00:06:44,120 dari waktu ke waktu yang akan menyelamatkan segala sesuatu yang terjadi dalam browser. 141 00:06:44,120 --> 00:06:50,030 Dan sekarang aku akan pergi untuk http://facebook.com. 142 00:06:50,030 --> 00:06:52,690 >> Sebenarnya, mari kita lakukan www untuk mengukur baik, memangkas. 143 00:06:52,690 --> 00:06:53,643 Masukkan. 144 00:06:53,643 --> 00:06:56,180 Jadi URL yang banyak Anda mungkin telah mengunjungi. 145 00:06:56,180 --> 00:06:58,830 Dan sekarang web Facebook Halaman muncul di bagian atas. 146 00:06:58,830 --> 00:07:02,350 Dan kemudian sejumlah besar hal terbang oleh di bagian bawah. 147 00:07:02,350 --> 00:07:04,830 Dan pada kenyataannya, ternyata bahwa ketika Anda mengunjungi Facebook.com, 148 00:07:04,830 --> 00:07:09,320 Anda tidak hanya membuat satu permintaan HTTP, ternyata akan Facebook.com 149 00:07:09,320 --> 00:07:14,320 mengirimkan 41 orang amplop, masing-masing dengan mendapatkan permintaan sendiri, 150 00:07:14,320 --> 00:07:18,360 seperti yang ditunjukkan, meskipun di belakang layar di sini, di bagian bawah layar, 151 00:07:18,360 --> 00:07:24,040 hal ini menunjukkan bahwa, memang, saya Browser dibuat 41 permintaan. 152 00:07:24,040 --> 00:07:29,689 >> Dan secara total, itu ditransfer 861 kilobyte dan butuh untuk beberapa alasan 153 00:07:29,689 --> 00:07:31,730 sebanyak delapan detik untuk men-download semua itu. 154 00:07:31,730 --> 00:07:33,790 Jadi itu sebenarnya agak aneh bahwa situs Facebook akan mengambil 155 00:07:33,790 --> 00:07:35,600 panjang, tapi begitu baik dalam hal ini. 156 00:07:35,600 --> 00:07:39,520 Sekarang, semua ini saya tidak benar-benar peduli tentang kecuali untuk permintaan paling atas. 157 00:07:39,520 --> 00:07:46,440 Jadi mari kita pergi ke satu ini di sini dan biarkan aku zoom out untuk sesaat. 158 00:07:46,440 --> 00:07:47,754 >> Dan biarkan aku memperbesar ini. 159 00:07:47,754 --> 00:07:50,670 Jadi apa yang saya lakukan di meninggalkan meskipun ada banyak hal yang terjadi di sini 160 00:07:50,670 --> 00:07:53,360 adalah saya sudah disorot Facebook.com dan kemudian 161 00:07:53,360 --> 00:07:56,540 melihat bahwa aku ke bawah, ke bawah, ke bawah, 162 00:07:56,540 --> 00:07:58,330 untuk meminta header. 163 00:07:58,330 --> 00:08:01,720 Dan Anda akan melihat bahwa Chrome menunjukkan saya pada dasarnya isi batin 164 00:08:01,720 --> 00:08:02,810 permintaan saya buat. 165 00:08:02,810 --> 00:08:06,130 Ini tidak format di persis sama cara, tapi melihat ada menyebutkan mendapatkan, 166 00:08:06,130 --> 00:08:09,481 melihat ada menyebutkan tuan rumah, Facebook.com, jalan, atau garis miring, 167 00:08:09,481 --> 00:08:10,730 yang merupakan file yang saya minta. 168 00:08:10,730 --> 00:08:12,930 >> Dan kemudian jika saya gulir cadangan, kita akan benar-benar 169 00:08:12,930 --> 00:08:17,270 melihat bahwa apa yang dikembalikan Facebook bagi saya adalah semua header ini. 170 00:08:17,270 --> 00:08:21,040 Jadi dalam amplop maya memang banyak pasangan nilai kunci. 171 00:08:21,040 --> 00:08:23,130 Sebuah kata, titik dua, dan kemudian nilai. 172 00:08:23,130 --> 00:08:25,050 Sebuah kata, titik dua, dan nilai. 173 00:08:25,050 --> 00:08:26,160 Ini disebut header. 174 00:08:26,160 --> 00:08:31,860 Dan ada cara yang lebih rinci di sini dari kita benar-benar peduli sekarang. 175 00:08:31,860 --> 00:08:33,750 >> Tapi ini adalah kedua yang terakhir di sana, 176 00:08:33,750 --> 00:08:38,809 melihat, bahwa server Facebook.com itu, memang mengatakan inilah beberapa teks HTML. 177 00:08:38,809 --> 00:08:41,409 Jadi semua ini adalah untuk mengatakan bahwa ketika Anda meminta web 178 00:08:41,409 --> 00:08:44,300 Halaman dari browser ke Server, server yang merespon 179 00:08:44,300 --> 00:08:47,630 dengan amplop sendiri dalam yang teks. 180 00:08:47,630 --> 00:08:49,020 Dengan kata lain, HTML. 181 00:08:49,020 --> 00:08:50,590 Hyper Text Markup Language. 182 00:08:50,590 --> 00:08:53,200 Yang merupakan bahasa lain bahwa kami memperkenalkan hari ini 183 00:08:53,200 --> 00:08:57,740 bahwa manusia atau komputer menghasilkan untuk melaksanakan halaman web. 184 00:08:57,740 --> 00:08:59,580 >> Secara khusus, mari kita lihat ini. 185 00:08:59,580 --> 00:09:03,277 Aku akan sekarang kembali ke website Facebook. 186 00:09:03,277 --> 00:09:05,360 Dan aku akan hanya Kendali klik atau klik kanan 187 00:09:05,360 --> 00:09:07,634 dan klik pada View Page Source. 188 00:09:07,634 --> 00:09:10,550 Dan bahkan jika Anda tidak menggunakan Chrome, IE dapat melakukan hal ini, Firefox bisa melakukan ini, 189 00:09:10,550 --> 00:09:14,060 Safari dapat melakukan hal ini, meskipun menu Pilihan mungkin terlihat sedikit berbeda. 190 00:09:14,060 --> 00:09:18,990 Dan ini adalah HTML yang Mark dan Perusahaan di Facebook telah ditulis. 191 00:09:18,990 --> 00:09:24,640 >> Dan untuk bersama, bahasa ini di sini mengimplementasikan biru dan halaman putih 192 00:09:24,640 --> 00:09:26,370 yang kita lihat saat yang lalu. 193 00:09:26,370 --> 00:09:28,030 Sekarang, ini agak luar biasa. 194 00:09:28,030 --> 00:09:31,400 Tetapi jika kita melihat ke kiri atas, kami akan mulai melihat beberapa pola. 195 00:09:31,400 --> 00:09:34,140 Sepertinya ada banyak ini terbuka braket sudut 196 00:09:34,140 --> 00:09:35,970 dan kemudian ada HTML kata kunci ini. 197 00:09:35,970 --> 00:09:38,330 Berikut terbuka lain angle bracket dan kepala. 198 00:09:38,330 --> 00:09:41,560 >> Berikut adalah, jika kita gulir ke bawah dan ke bawah dan ke bawah, aku 199 00:09:41,560 --> 00:09:43,820 akan pergi ke depan dan mencoba untuk mencari sesuatu. 200 00:09:43,820 --> 00:09:48,510 Ada cara di atas di sebelah kanan di sini adalah tubuh braket terbuka. 201 00:09:48,510 --> 00:09:50,800 Dan ingat dari terakhir waktu itu kami mengusulkan 202 00:09:50,800 --> 00:09:53,364 bahwa halaman web sederhana bahwa manusia mungkin menulis 203 00:09:53,364 --> 00:09:55,030 mungkin terlihat sedikit sesuatu seperti ini. 204 00:09:55,030 --> 00:09:58,430 Terbuka tag HTML, kepala terbuka tag, tag judul terbuka, 205 00:09:58,430 --> 00:10:03,230 kemudian judul tertutup, kepala tertutup, terbuka tag tubuh, beberapa teks, tubuh tertutup, 206 00:10:03,230 --> 00:10:04,720 HTML tertutup. 207 00:10:04,720 --> 00:10:06,290 >> Tapi jeda sini untuk sesaat. 208 00:10:06,290 --> 00:10:09,030 Kode ini, bahkan jika Anda sudah pernah menulis sebelumnya 209 00:10:09,030 --> 00:10:11,864 tapi masih tidak mengerti apa yang terjadi, terlihat cukup baik. 210 00:10:11,864 --> 00:10:12,821 Benar, itu sangat bersih. 211 00:10:12,821 --> 00:10:14,120 Ini sangat Gaya bagus. 212 00:10:14,120 --> 00:10:16,190 Banyak lekukan dan ruang putih. 213 00:10:16,190 --> 00:10:18,020 Facebook tidak. 214 00:10:18,020 --> 00:10:23,190 Jadi mengapa Facebook begitu banyak lebih buruk daripada saya di menulis HTML? 215 00:10:23,190 --> 00:10:24,310 Rupanya. 216 00:10:24,310 --> 00:10:26,899 >> Benar, ini adalah seperti dari lima untuk gaya. 217 00:10:26,899 --> 00:10:29,315 Ada alasan kuat bagi mereka untuk memotong sudut ini. 218 00:10:29,315 --> 00:10:31,069 219 00:10:31,069 --> 00:10:33,860 Baiklah, sehingga mereka tidak ingin membuat lebih mudah bagi Anda untuk membacanya. 220 00:10:33,860 --> 00:10:36,940 Jadi dalam arti, mereka obfuscating itu, semacam berebut itu 221 00:10:36,940 --> 00:10:40,260 setidaknya estetis sehingga bahwa itu sulit untuk Myspace 222 00:10:40,260 --> 00:10:42,705 untuk pergi dan merobek mereka homepage dan HTML untuk itu. 223 00:10:42,705 --> 00:10:45,080 Ternyata dengan program meskipun, termasuk Chrome, 224 00:10:45,080 --> 00:10:47,020 kita bisa membersihkan ini yang super mudah. 225 00:10:47,020 --> 00:10:49,420 Sehingga tidak cukup itu sebagai alasan. 226 00:10:49,420 --> 00:10:51,290 Apa lagi yang mungkin menjadi penyebabnya. 227 00:10:51,290 --> 00:10:51,790 Ya. 228 00:10:51,790 --> 00:10:54,680 229 00:10:54,680 --> 00:10:55,890 Ya, data biaya ruang putih. 230 00:10:55,890 --> 00:10:56,598 Apa maksudmu? 231 00:10:56,598 --> 00:11:02,250 232 00:11:02,250 --> 00:11:02,979 Ya, persis. 233 00:11:02,979 --> 00:11:06,020 Jika Anda menekan tombol Tab banyak atau spasi, mempertimbangkan implikasi. 234 00:11:06,020 --> 00:11:10,060 Jadi setiap tombol pada keyboard Anda adalah [Tidak terdengar] direpresentasikan sebagai satu byte. 235 00:11:10,060 --> 00:11:14,560 >> Jadi misalkan Mark atau salah satu devs hari ini memukul spasi hanya sekali 236 00:11:14,560 --> 00:11:17,899 di halaman HTML ini yang merupakan homepage Facebook. 237 00:11:17,899 --> 00:11:19,690 Dan Facebook memiliki banyak pengguna hari ini. 238 00:11:19,690 --> 00:11:24,030 Jadi misalkan homepage Facebook dikunjungi oleh satu miliar orang saat ini. 239 00:11:24,030 --> 00:11:27,020 Dan seseorang di Facebook memiliki memukul spasi hanya sekali. 240 00:11:27,020 --> 00:11:29,890 >> Jadi satu byte tambahan, satu miliar permintaan, 241 00:11:29,890 --> 00:11:32,790 berapa banyak lagi data Facebook mentransfer melalui internet 242 00:11:32,790 --> 00:11:37,160 karena seseorang memukul spasi pada keyboard-nya? 243 00:11:37,160 --> 00:11:41,660 Satu miliar byte, atau satu gigabyte Data sedang dikirim dari server Facebook 244 00:11:41,660 --> 00:11:43,626 kepada orang-orang di sekitar dunia tanpa alasan. 245 00:11:43,626 --> 00:11:44,750 Sekarang, itu hanya satu ruang. 246 00:11:44,750 --> 00:11:48,866 >> Bayangkan jika kita benar-benar membersihkan ini Hal up dan menjorok dan ditambahkan 247 00:11:48,866 --> 00:11:50,990 banyak ruang putih dan karakter tab dan ruang, 248 00:11:50,990 --> 00:11:53,656 Anda akhirnya menghabiskan gigabyte, jika tidak terra byte lagi ruang. 249 00:11:53,656 --> 00:11:56,640 Dan jadi super umum di dunia nyata pengembangan web 250 00:11:56,640 --> 00:11:58,950 adalah untuk mengecilkan kode Anda. 251 00:11:58,950 --> 00:12:01,280 Dan pada akhirnya kita akan melihat bagaimana Anda bisa melakukan hal ini. 252 00:12:01,280 --> 00:12:04,630 >> Tapi hari ini, kita akan mulai menulis kode yang sebenarnya dibaca oleh kita manusia. 253 00:12:04,630 --> 00:12:10,120 Ternyata, meskipun, jika Anda kembali untuk alat ini di Chrome Inspect Element, 254 00:12:10,120 --> 00:12:12,030 sebelumnya, kami berada di tab Jaringan. 255 00:12:12,030 --> 00:12:15,430 Ternyata bahwa jika Anda pergi ke tab elemen, apa yang sebenarnya Anda lihat 256 00:12:15,430 --> 00:12:19,230 adalah Chrome cukup dicetak versi yang HTML yang sama. 257 00:12:19,230 --> 00:12:20,640 Jadi kita sudah deobfuscated itu. 258 00:12:20,640 --> 00:12:22,472 Jadi itu tidak cocok untuk komputer. 259 00:12:22,472 --> 00:12:24,430 Dan sekarang Anda benar-benar bisa klik di sekitar dan mulai 260 00:12:24,430 --> 00:12:27,630 untuk melihat hirarki yang merupakan halaman web. 261 00:12:27,630 --> 00:12:28,780 Jadi mari kita benar-benar melakukan ini. 262 00:12:28,780 --> 00:12:32,120 Aku akan pergi ke depan dan membuka pada Mac saya sebuah program yang disebut teks edit. 263 00:12:32,120 --> 00:12:35,490 Dan ingat bahwa ini hanya program teks super sederhana. 264 00:12:35,490 --> 00:12:37,490 Windows memiliki notepad.exe. 265 00:12:37,490 --> 00:12:39,820 Dan aku akan Verbatim ketik berikut ini. 266 00:12:39,820 --> 00:12:44,650 Doc jenis HTML, terbuka braket HTML, ditutup braket HTML, 267 00:12:44,650 --> 00:12:49,000 kita memiliki kepala halaman di sini, akhir kepala halaman di sini, 268 00:12:49,000 --> 00:12:52,310 judul akan menjadi seperti, halo dunia. 269 00:12:52,310 --> 00:12:56,660 >> Dan kemudian di sini, kita perlu tubuh dari halaman web. 270 00:12:56,660 --> 00:12:58,050 Tubuh tertutup. 271 00:12:58,050 --> 00:13:00,700 Dan kemudian di sini, halo dunia. 272 00:13:00,700 --> 00:13:01,270 Baiklah. 273 00:13:01,270 --> 00:13:03,350 Jadi kami telah menulis halaman web super cepat. 274 00:13:03,350 --> 00:13:06,675 Aku akan menyimpannya sebagai hello.html pada desktop saya. 275 00:13:06,675 --> 00:13:09,050 Saya Mac akan mengeluh, berpikir bahwa, tunggu sebentar, 276 00:13:09,050 --> 00:13:11,091 ini adalah file teks, lakukan Anda ingin menyebutnya Txt? 277 00:13:11,091 --> 00:13:13,300 Tapi tidak, aku ingin menggunakan dot HTML. 278 00:13:13,300 --> 00:13:16,140 >> Dan kemudian apa yang bagus jika saya hanya klik dua kali file ini, 279 00:13:16,140 --> 00:13:18,600 hello.html, inilah halaman web saya. 280 00:13:18,600 --> 00:13:22,564 Sayangnya, Akulah -satunya orang di dunia 281 00:13:22,564 --> 00:13:23,980 yang dapat mengunjungi halaman ini sekarang. 282 00:13:23,980 --> 00:13:26,734 Karena mana itu hidup rupanya? 283 00:13:26,734 --> 00:13:27,650 Ini pada Mac saya, kan? 284 00:13:27,650 --> 00:13:28,470 Yang tidak berguna. 285 00:13:28,470 --> 00:13:30,390 Seperti tidak ada orang di ruangan ini apalagi di internet 286 00:13:30,390 --> 00:13:31,598 benar-benar dapat mengunjungi halaman tersebut. 287 00:13:31,598 --> 00:13:33,820 Jadi hari ini, kita perlu memperkenalkan elemen lain. 288 00:13:33,820 --> 00:13:36,720 >> Dan untuk melakukan hal ini, saya akan pergi ke depan dan membuka awan 9. 289 00:13:36,720 --> 00:13:40,090 Jadi awan 9 ini tentu saja cloud service-- berdasarkan CS50 290 00:13:40,090 --> 00:13:44,890 IDE-- Yang memiliki semua ruang kerja kami berjalan di suatu tempat di internet. 291 00:13:44,890 --> 00:13:48,330 Dan itu berarti bahwa semua file kami dapat diakses publik sudah. 292 00:13:48,330 --> 00:13:49,830 Jadi mari kita pergi ke depan dan melakukan hal ini. 293 00:13:49,830 --> 00:13:53,670 Aku akan pergi ke depan dan membuat file baru NCS50IDE. 294 00:13:53,670 --> 00:13:58,819 Aku akan menyimpannya sebagai sebelum sebagai hello.html dan klik simpan. 295 00:13:58,819 --> 00:14:01,860 Dan sekarang hanya untuk menghemat waktu, aku akan untuk terus maju dan copy paste kode ini 296 00:14:01,860 --> 00:14:03,470 daripada mengetik ulang. 297 00:14:03,470 --> 00:14:04,550 Dan menyimpannya. 298 00:14:04,550 --> 00:14:07,550 Dan sekarang aku punya file bernama hello.html. 299 00:14:07,550 --> 00:14:09,710 Tapi bagaimana aku benar-benar membukanya sebagai halaman web? 300 00:14:09,710 --> 00:14:14,120 Nah, ternyata dibangun untuk CS50 IDE tidak hanya compiler seperti dentang 301 00:14:14,120 --> 00:14:16,670 dan debugger seperti GDB dan tandan program lain, 302 00:14:16,670 --> 00:14:21,140 sebenarnya ada matang penuh web server berjalan dalam CS50 IDE. 303 00:14:21,140 --> 00:14:23,900 >> Kalian semua, yang mengatakan, memiliki server web Anda sendiri. 304 00:14:23,900 --> 00:14:26,850 Dan server web hanya sepotong perangkat lunak yang tujuan dalam hidup 305 00:14:26,850 --> 00:14:28,220 adalah untuk melayani sampai halaman web. 306 00:14:28,220 --> 00:14:32,490 Untuk mendengarkan permintaan dari browser dan merespon dengan sedikit amplop maya 307 00:14:32,490 --> 00:14:35,290 dalam yang merupakan konten yang telah ditulis. 308 00:14:35,290 --> 00:14:38,372 Sehingga server web ini sebenarnya gratis dan open source. 309 00:14:38,372 --> 00:14:40,830 Mana open source hanya berarti perangkat lunak yang orang lain memiliki 310 00:14:40,830 --> 00:14:43,480 ditulis bahwa kita semua bisa benar-benar melihat dan men-download dan bahkan 311 00:14:43,480 --> 00:14:44,780 mengubah kode sumber. 312 00:14:44,780 --> 00:14:46,150 Dan itu disebut Apache. 313 00:14:46,150 --> 00:14:51,450 >> Dan kami telah membuat sedikit lebih mudah untuk digunakan dalam CS50IDE dengan menyebutnya Apache 50. 314 00:14:51,450 --> 00:14:53,780 Sehingga benar-benar dapat memahami berikut ini. 315 00:14:53,780 --> 00:14:56,560 Aku akan mengatakan Apache 50 awal. 316 00:14:56,560 --> 00:14:58,910 Dan kemudian aku hanya akan mengatakan dot. 317 00:14:58,910 --> 00:15:01,080 Dan kita melihat beberapa agak pesan misterius mengatakan 318 00:15:01,080 --> 00:15:04,640 pengaturan Apache dokumen [? Kelompok?] untuk rumah, ubuntu, apa pun itu, 319 00:15:04,640 --> 00:15:05,770 memangkas ruang kerja. 320 00:15:05,770 --> 00:15:08,280 Mulai web server Apache 2 berhasil. 321 00:15:08,280 --> 00:15:11,330 >> Jadi cerita panjang pendek, saya baru saja menekan tombol 322 00:15:11,330 --> 00:15:18,000 dan menyalakan server web yang sekarang mendengarkan di internet pada port TCP 323 00:15:18,000 --> 00:15:20,587 80 pada alamat tertentu. 324 00:15:20,587 --> 00:15:22,420 Dan ia mengatakan di sini, dan ini akan berubah berdasarkan 325 00:15:22,420 --> 00:15:26,550 pada nama pengguna dan faktor lainnya, tapi perhatikan jika saya klik ini, 326 00:15:26,550 --> 00:15:30,211 IDE50 dot jharvard dan begitu dan sehingga, perhatikan bahwa selama ini 327 00:15:30,211 --> 00:15:31,960 untuk beberapa masa lalu minggu, Anda mungkin memiliki 328 00:15:31,960 --> 00:15:35,200 melihat bahwa nama pengguna sendiri tertanam di kanan atas 329 00:15:35,200 --> 00:15:37,130 sudut CS50IDE. 330 00:15:37,130 --> 00:15:41,050 >> Dan yang benar-benar telah semua ini mengatur waktu alamat di mana Anda dapat 331 00:15:41,050 --> 00:15:43,574 mengunjungi semua file Anda melalui web. 332 00:15:43,574 --> 00:15:45,990 Sampai saat ini, belum penting, karena dalam C, biasanya Anda 333 00:15:45,990 --> 00:15:48,073 ingin hal-hal berjalan dalam terminal, tidak di web. 334 00:15:48,073 --> 00:15:50,800 Tapi hari ini, kita mulai menulis kode berbasis web 335 00:15:50,800 --> 00:15:53,350 bahwa kita ingin diakses di URL publik. 336 00:15:53,350 --> 00:15:56,100 Jadi apa yang saya akan lakukan adalah klik URL ini. 337 00:15:56,100 --> 00:16:00,880 >> Dan melihat bahwa saya melihat cukup Indeks jelek, daftar direktori, 338 00:16:00,880 --> 00:16:04,090 tetapi file apa yang melompat keluar pada Anda mungkin? 339 00:16:04,090 --> 00:16:05,210 Hello.html. 340 00:16:05,210 --> 00:16:07,870 Itu karena aku menyelamatkan file di ruang kerja saya. 341 00:16:07,870 --> 00:16:12,310 Dan apa yang saya sudah bilang Apache web server adalah melihat di direktori kerja Daud. 342 00:16:12,310 --> 00:16:15,300 Dan membiarkan siapa pun di dunia melihat file-file. 343 00:16:15,300 --> 00:16:19,050 >> Dan memang, jika saya sekarang klik pada hello.html, 344 00:16:19,050 --> 00:16:22,180 Saya melihat dalam tab ini persis file itu. 345 00:16:22,180 --> 00:16:26,430 Sekarang perhatikan, awan 9 ini perbuatan sesuatu yang sedikit membantu bagi kita. 346 00:16:26,430 --> 00:16:29,480 Dalam CS50 IDE, melihat ada tiba-tiba sebuah address bar. 347 00:16:29,480 --> 00:16:33,690 Itu karena meskipun kita menggunakan Chrome untuk mengunjungi CS50IDE, 348 00:16:33,690 --> 00:16:37,940 dalam CS50IDE adalah sendiri versi browser web sekarang. 349 00:16:37,940 --> 00:16:40,820 Dan jadi daripada rumit seperti itu, 350 00:16:40,820 --> 00:16:42,955 Aku akan pergi ke depan dan hanya menyalin URL ini. 351 00:16:42,955 --> 00:16:45,330 Aku akan pergi ke depan dan hanya membuka jendela Chrome saya sendiri. 352 00:16:45,330 --> 00:16:47,800 Jadi tidak ada sihir di sini, tidak ada CS50IDE. 353 00:16:47,800 --> 00:16:51,800 Aku hanya akan benar-benar menyisipkan saya J Harvard URL dan tekan Enter. 354 00:16:51,800 --> 00:16:54,750 Dan voila, sekarang aku, dan dalam teori, setiap orang 355 00:16:54,750 --> 00:16:57,700 di internet, jika saya sudah dikonfigurasi izin tepat, 356 00:16:57,700 --> 00:16:58,720 dapat mengunjungi file ini. 357 00:16:58,720 --> 00:17:03,230 Dan jadi sekarang, jika saya mengatakan hello.html, voila, ada 358 00:17:03,230 --> 00:17:06,366 adalah halaman web sangat underwhelming saya. 359 00:17:06,366 --> 00:17:07,740 Jadi mari kita lakukan sebuah pemeriksaan cepat. 360 00:17:07,740 --> 00:17:09,710 Karena semua itu adalah konseptual set up. 361 00:17:09,710 --> 00:17:13,180 Dan kita sudah benar-benar tidak benar-benar mengajarkan Anda bagaimana menulis HTML per se. 362 00:17:13,180 --> 00:17:16,084 Pertanyaan sejauh pada apa yang baru saja terjadi? 363 00:17:16,084 --> 00:17:18,549 364 00:17:18,549 --> 00:17:19,049 Iya nih. 365 00:17:19,049 --> 00:17:24,290 366 00:17:24,290 --> 00:17:25,800 Apakah CS50 memiliki halaman web ini? 367 00:17:25,800 --> 00:17:26,460 Dalam arti apa? 368 00:17:26,460 --> 00:17:28,947 369 00:17:28,947 --> 00:17:29,530 Pertanyaan bagus. 370 00:17:29,530 --> 00:17:32,429 Jadi CS50 ini memiliki CS50.io. 371 00:17:32,429 --> 00:17:33,970 Kami sudah memang membeli nama domain. 372 00:17:33,970 --> 00:17:37,240 Dan dengan sifat kalian login ke CS50IDE, 373 00:17:37,240 --> 00:17:39,270 Anda semua mendapatkan apa yang disebut subdomain. 374 00:17:39,270 --> 00:17:46,840 >> Jadi IDE50-malan, atau IDE50-Rob.CS50.io, itu alamat unik Anda dalam 375 00:17:46,840 --> 00:17:47,730 nama domain kita. 376 00:17:47,730 --> 00:17:50,850 Jadi untuk tujuan kursus, Anda memiliki alamat unik Anda sendiri. 377 00:17:50,850 --> 00:17:55,150 Tapi kami sudah disederhanakan hal dengan membeli domain tingkat atas, CS50 dot 378 00:17:55,150 --> 00:17:58,050 I / O dan kemudian orang lain adalah dalam itu, sehingga untuk berbicara. 379 00:17:58,050 --> 00:17:59,890 Dan kami akan datang kembali ke dalam beberapa minggu mungkin, 380 00:17:59,890 --> 00:18:01,930 terutama pada proyek akhir waktu, ketika beberapa dari Anda 381 00:18:01,930 --> 00:18:03,596 mungkin ingin mendapatkan nama domain Anda sendiri. 382 00:18:03,596 --> 00:18:06,270 Ini sebenarnya relatif langsung. 383 00:18:06,270 --> 00:18:06,770 Baiklah. 384 00:18:06,770 --> 00:18:07,880 Jadi mari sekarang kita lakukan ini. 385 00:18:07,880 --> 00:18:11,910 Aku akan kembali ke CS50IDE, di mana file saya sekarang, 386 00:18:11,910 --> 00:18:14,710 hello.html, tidak semua yang menarik. 387 00:18:14,710 --> 00:18:17,130 Saya ingin melakukan sesuatu sedikit lebih baik dari itu. 388 00:18:17,130 --> 00:18:19,440 Jadi aku akan melakukan sesuatu seperti ini. 389 00:18:19,440 --> 00:18:21,510 Biarkan saya paragraphs.html terbuka. 390 00:18:21,510 --> 00:18:23,560 Jadi ini adalah file yang saya tulis di muka. 391 00:18:23,560 --> 00:18:26,480 Di bagian atas itu, seperti biasa, kami memiliki komentar. 392 00:18:26,480 --> 00:18:28,730 Namun dalam HTML, komentar terlihat sedikit berbeda. 393 00:18:28,730 --> 00:18:33,270 On line tiga dan jalur 14, Anda melihat sintaks untuk memulai komentar 394 00:18:33,270 --> 00:18:34,020 dan mengakhiri komentar. 395 00:18:34,020 --> 00:18:36,820 >> Tapi tak satu pun dari hal-hal yang di antara hal-hal fungsional. 396 00:18:36,820 --> 00:18:40,250 Ini hanya sebuah catatan untuk manusia apa yang terjadi di sini. 397 00:18:40,250 --> 00:18:43,040 Dan hanya sebagai kewarasan cepat periksa, jika saya gulir ke bawah, 398 00:18:43,040 --> 00:18:46,820 apa yang baru jelas tag yang kita sudah diperkenalkan? 399 00:18:46,820 --> 00:18:52,130 Tag sejauh yang kita lihat terbuka braket HTML, kepala, judul, dan tubuh. 400 00:18:52,130 --> 00:18:54,400 Tapi apa jelas baru sekarang? 401 00:18:54,400 --> 00:18:55,200 >> Ya, jadi p. 402 00:18:55,200 --> 00:18:57,320 P tag atau tag paragraf. 403 00:18:57,320 --> 00:19:01,182 Dan kemudian aku hanya meminjam beberapa standar Teks latin untuk membentuk paragraf saya. 404 00:19:01,182 --> 00:19:03,390 Karena apa yang saya ingin menunjukkan adalah bagaimana Anda mungkin 405 00:19:03,390 --> 00:19:05,859 mewakili paragraf teks dalam HTML. 406 00:19:05,859 --> 00:19:08,400 Dan apa yang mulai terjadi di sini adalah bahwa sudah ada 407 00:19:08,400 --> 00:19:09,657 pola berkembang. 408 00:19:09,657 --> 00:19:10,990 Dan biarkan aku pergi ke depan dan melakukan hal ini. 409 00:19:10,990 --> 00:19:12,760 Ijinkan saya mematikan Apache. 410 00:19:12,760 --> 00:19:17,340 Dan aku akan mengatakan itu untuk memulai sendiri lagi dalam sumber hari ini tujuh 411 00:19:17,340 --> 00:19:18,420 m direktori. 412 00:19:18,420 --> 00:19:20,100 Sehingga saya memiliki akses ke segala sesuatu. 413 00:19:20,100 --> 00:19:22,230 >> Dan sekarang, jika saya kembali ke daftar direktori ini, 414 00:19:22,230 --> 00:19:24,846 melihat saya melihat setiap file dari hari ini. 415 00:19:24,846 --> 00:19:26,720 Dan Anda akan melihat di selanjutnya set masalah, kita akan 416 00:19:26,720 --> 00:19:28,594 memberikan petunjuk untuk melakukan persis ini. 417 00:19:28,594 --> 00:19:35,210 Jika saya membuka paragraphs.html, ini mungkin serta terlihat seperti bahasa pemrograman 418 00:19:35,210 --> 00:19:36,970 untuk Anda jika Anda tidak berbicara atau membaca Latin. 419 00:19:36,970 --> 00:19:40,525 Tapi ini hanya tiga paragraf teks yang ditandai di HTML. 420 00:19:40,525 --> 00:19:43,100 >> Dan perhatikan ayat istirahat di antara mereka. 421 00:19:43,100 --> 00:19:46,400 Karena ternyata, dan meskipun Anda 422 00:19:46,400 --> 00:19:49,210 mungkin cenderung untuk melakukan hal ini, sedangkan di dunia nyata, 423 00:19:49,210 --> 00:19:51,370 jika Anda ingin menempatkan baris istirahat antara hal-hal, 424 00:19:51,370 --> 00:19:55,680 Anda mungkin cukup sederhana melakukan ini dan tekan Simpan. 425 00:19:55,680 --> 00:19:59,460 Dan sekarang, jika saya reload sini, pemberitahuan bahwa segala sesuatu hanya mengaburkan bersama-sama 426 00:19:59,460 --> 00:20:01,100 hanya dalam satu gumpalan teks. 427 00:20:01,100 --> 00:20:03,570 Karena HTML adalah jenis bahasa yang bodoh. 428 00:20:03,570 --> 00:20:07,230 >> Hal ini dimaksudkan untuk digunakan dalam seperti cara bahwa browser hanya akan 429 00:20:07,230 --> 00:20:09,920 melakukan secara eksplisit apa yang Anda katakan untuk dilakukan. 430 00:20:09,920 --> 00:20:12,890 Jadi jika Anda tidak menceritakannya memberi saya sebuah paragraf baru, 431 00:20:12,890 --> 00:20:14,569 Anda tidak akan melihat paragraf baru. 432 00:20:14,569 --> 00:20:16,360 Dan pada kenyataannya, apa yang Browser akan melakukan 433 00:20:16,360 --> 00:20:20,020 bahkan jika Anda tekan Enter, katakanlah lagi dan lagi 434 00:20:20,020 --> 00:20:23,190 dan lagi, bergerak dengan cara teks ini bawah pada layar dan kemudian simpan 435 00:20:23,190 --> 00:20:26,610 dan kemudian reload, browser akan runtuh semua itu ruang putih 436 00:20:26,610 --> 00:20:29,021 menjadi hanya satu, terlihat spasi. 437 00:20:29,021 --> 00:20:29,520 Baiklah. 438 00:20:29,520 --> 00:20:30,869 Jadi itulah tag paragraf. 439 00:20:30,869 --> 00:20:32,910 Dan jadi apa pola yang berkembang di sini? 440 00:20:32,910 --> 00:20:37,450 Nah, tampaknya menjadi kasus yang HTML adalah semua tentang memulai tag 441 00:20:37,450 --> 00:20:38,460 dan berakhir tag. 442 00:20:38,460 --> 00:20:39,300 Dan apa tag? 443 00:20:39,300 --> 00:20:41,160 Nah, itu hanya sepotong sintaks. 444 00:20:41,160 --> 00:20:44,400 Terbuka braket, kata kunci, braket tertutup, adalah tag. 445 00:20:44,400 --> 00:20:45,510 Atau mulai tag. 446 00:20:45,510 --> 00:20:48,590 Dan kemudian ketika Anda dilakukan mengekspresikan diri, 447 00:20:48,590 --> 00:20:52,300 seperti dalam Anda selesai dengan paragraf, Anda melakukannya untuk berbicara sebaliknya. 448 00:20:52,300 --> 00:20:55,480 Tetapi sebaliknya tidak cukup mundur. 449 00:20:55,480 --> 00:21:00,630 >> Anda hanya awalan tag yang sama ini nama dengan garis miring seperti ini. 450 00:21:00,630 --> 00:21:01,130 Baiklah. 451 00:21:01,130 --> 00:21:02,570 Jadi tidak semua yang menarik. 452 00:21:02,570 --> 00:21:05,270 Dan pada kenyataannya, kita tidak membuat web semua yang lebih menarik. 453 00:21:05,270 --> 00:21:07,630 Bagaimana jika saya ingin membuat hal yang lebih besar dan berani? 454 00:21:07,630 --> 00:21:11,780 Jadi ternyata bahwa di sini adalah contoh di headings.html, di mana dalam tubuh saya, 455 00:21:11,780 --> 00:21:17,280 Aku punya tag H1, H2, H3, empat, lima, atau enam, yang semuanya 456 00:21:17,280 --> 00:21:18,310 tampak cukup misterius. 457 00:21:18,310 --> 00:21:21,010 Tetapi jika aku pergi membuka ini Misalnya, mari kita lihat. 458 00:21:21,010 --> 00:21:22,490 Headings.html. 459 00:21:22,490 --> 00:21:27,030 >> Jadi browser secara default dapat memberikan teks yang besar dan tebal ukuran yang berbeda. 460 00:21:27,030 --> 00:21:28,070 H1 besar. 461 00:21:28,070 --> 00:21:31,240 H6 lebih kecil dan kemudian segala sesuatu yang lain di antara. 462 00:21:31,240 --> 00:21:34,170 Jadi itu menarik tapi masih tidak benar-benar web saya tahu. 463 00:21:34,170 --> 00:21:36,870 Bagaimana jika kita ingin saya miliki sesuatu seperti daftar. . 464 00:21:36,870 --> 00:21:40,190 Jadi, inilah daftar bullet dari tiga rumah Harvard. 465 00:21:40,190 --> 00:21:41,600 >> Bagaimana Anda pergi untuk melakukan ini? 466 00:21:41,600 --> 00:21:45,410 Nah, lihatlah list.html. 467 00:21:45,410 --> 00:21:47,870 Dan di sini, kita melihat sedikit dari funkiness 468 00:21:47,870 --> 00:21:49,630 tapi mari kita mempertimbangkan apa yang terjadi. 469 00:21:49,630 --> 00:21:56,182 Jadi berdasarkan pada apa yang Anda baru saja melihat, UL singkatan daftar unordered. 470 00:21:56,182 --> 00:21:57,640 Daftar unordered hanya berarti bullet. 471 00:21:57,640 --> 00:21:58,431 Tidak ada nomor. 472 00:21:58,431 --> 00:22:01,850 Ada juga sesuatu yang disebut memerintahkan daftar, yang merupakan OL di tag. 473 00:22:01,850 --> 00:22:05,350 Kemudian LI, daftar item semua itu berarti. 474 00:22:05,350 --> 00:22:07,790 >> Dan sehingga secara otomatis nomor segalanya untuk Anda. 475 00:22:07,790 --> 00:22:11,270 Tapi sekali lagi, semua lekukan saya dan ruang putih hanya demi saya. 476 00:22:11,270 --> 00:22:13,050 Browser tidak benar-benar akan peduli. 477 00:22:13,050 --> 00:22:16,670 Jadi meskipun Anda tidak bisa melakukan ini, hanya harus jelas, 478 00:22:16,670 --> 00:22:19,880 Anda tidak harus meratakan meskipun browser akan tetap 479 00:22:19,880 --> 00:22:22,130 dapat memahaminya dengan baik. 480 00:22:22,130 --> 00:22:24,590 Aku memukul ulang di saya Browser, saya mengklik isi ulang 481 00:22:24,590 --> 00:22:26,760 dan tidak ada perubahan yang terjadi karena browser masih 482 00:22:26,760 --> 00:22:29,550 melakukan apa yang saya katakan untuk dilakukan. 483 00:22:29,550 --> 00:22:30,050 >> Baiklah. 484 00:22:30,050 --> 00:22:31,340 Jadi ini semua hanya teks. 485 00:22:31,340 --> 00:22:33,730 Sekarang mari kita lakukan sesuatu yang lebih menarik. 486 00:22:33,730 --> 00:22:36,660 Aku akan pergi ke depan dan meminjam beberapa HTML ini. 487 00:22:36,660 --> 00:22:40,910 Aku akan pergi ke depan dan membuat file baru di sini. 488 00:22:40,910 --> 00:22:43,370 Dan kami akan menelepon rick.html ini. 489 00:22:43,370 --> 00:22:46,190 490 00:22:46,190 --> 00:22:48,916 Kami memiliki proporsional sesuatu yang digunakan 491 00:22:48,916 --> 00:22:51,290 disebut roll rick di ini kelas tahun ini, saya tidak tahu, 492 00:22:51,290 --> 00:22:53,880 itu hanya terjadi secara organik. 493 00:22:53,880 --> 00:22:55,397 >> Dan sekarang itu keluar dari kontrol. 494 00:22:55,397 --> 00:22:56,730 Jadi aku hanya akan pergi dengan itu. 495 00:22:56,730 --> 00:22:59,700 Dan jika saya pergi ke Google Gambar dan Rick Astley. 496 00:22:59,700 --> 00:23:02,450 497 00:23:02,450 --> 00:23:06,170 Jika Anda tidak tahu mengapa kita melakukan ini, hanya membaca di Wikipedia. 498 00:23:06,170 --> 00:23:11,520 Setiap kali Anda mengklik pada link, seseorang telah tertawa di suatu tempat. 499 00:23:11,520 --> 00:23:14,860 Dan biarkan aku pergi ahead-- ada kita pergi, mari kita melihat gambar ini. 500 00:23:14,860 --> 00:23:16,750 >> Jadi di sini kita memiliki gambar di Google Images. 501 00:23:16,750 --> 00:23:19,390 Dan mari kita asumsikan bahwa ini adalah cukup di mana-mana di internet. 502 00:23:19,390 --> 00:23:22,570 Jadi aku akan menganggap itu OK untuk saya untuk benar-benar menempatkan ini ke dalam halaman web saya. 503 00:23:22,570 --> 00:23:24,820 Aku akan pergi ke depan dan copy URL gambar. 504 00:23:24,820 --> 00:23:28,600 Dan jika saya kembali ke Cloud 9, mari kita lihat apa yang bisa saya lakukan di sini. 505 00:23:28,600 --> 00:23:30,630 Jadi di sini adalah hanya sebuah halaman web. 506 00:23:30,630 --> 00:23:39,020 Ini adalah Rick Astley, haha, Aku akan sekarang kembali 507 00:23:39,020 --> 00:23:43,510 untuk browser saya, reload, dan menarik. 508 00:23:43,510 --> 00:23:44,530 >> Dimana Rick? 509 00:23:44,530 --> 00:23:46,050 Jadi biarkan aku melihat apa yang terjadi. 510 00:23:46,050 --> 00:23:49,114 Sebenarnya, aku akan berpura-pura seperti saya tidak melakukan itu. 511 00:23:49,114 --> 00:23:50,280 [Tidak terdengar] menempatkan dia di sini. 512 00:23:50,280 --> 00:23:52,520 Kami akan datang kembali ke dalam sekejap. 513 00:23:52,520 --> 00:23:54,200 Jadi, inilah rick.html. 514 00:23:54,200 --> 00:23:56,070 Sehingga tidak Rick Astley. 515 00:23:56,070 --> 00:23:59,680 Jadi ternyata kita bisa benar-benar menambahkan dia di sini. 516 00:23:59,680 --> 00:24:00,830 Ini adalah Rick Astley. 517 00:24:00,830 --> 00:24:06,680 Aku akan mengatakan memberikan saya sebuah gambar yang Sumber adalah URL saya hanya disalin, yang 518 00:24:06,680 --> 00:24:09,110 rupanya adalah bahagia ulang tahun sesuatu atau lainnya. 519 00:24:09,110 --> 00:24:13,280 >> Dan sekarang aku akan menutup tag seperti ini. 520 00:24:13,280 --> 00:24:15,170 Jadi ini membungkus super panjang. 521 00:24:15,170 --> 00:24:17,740 Tapi perhatikan bahwa semua saya sudah dilakukan adalah gambar braket terbuka, 522 00:24:17,740 --> 00:24:20,270 sumber dengan atribut ini. 523 00:24:20,270 --> 00:24:21,530 Dan itu URL sangat panjang. 524 00:24:21,530 --> 00:24:23,720 Dan di akhir, perhatikan ini. 525 00:24:23,720 --> 00:24:29,530 Mengapa saya melakukan slash bracket siku bukan, seperti setiap tag lainnya, 526 00:24:29,530 --> 00:24:33,590 memiliki braket terbuka, IMG, braket ditutup? 527 00:24:33,590 --> 00:24:37,040 Hanya mengambil menebak bahkan jika Anda tidak memiliki keakraban apapun 528 00:24:37,040 --> 00:24:40,410 dengan HTML sebelumnya. 529 00:24:40,410 --> 00:24:42,710 >> Jadi bagaimana menutup perintah, tapi mengapa 530 00:24:42,710 --> 00:24:45,850 apakah itu benar-benar membuat intuitif akal untuk melakukan sesuatu yang sedikit lebih 531 00:24:45,850 --> 00:24:48,820 verbose seperti gambar di dekat? 532 00:24:48,820 --> 00:24:51,400 Ya. 533 00:24:51,400 --> 00:24:52,000 Ya. 534 00:24:52,000 --> 00:24:55,620 Hanya semantik, tidak ada rasa mulai gambar dan berakhir gambar, 535 00:24:55,620 --> 00:24:56,870 itu baik ada atau tidak. 536 00:24:56,870 --> 00:25:00,960 Sehingga tidak masuk akal untuk meninggalkan celah untuk hal lain dalam sebuah gambar. 537 00:25:00,960 --> 00:25:02,010 Anda tidak bisa melakukan itu. 538 00:25:02,010 --> 00:25:03,720 Dan sintaks akan umumnya hanya 539 00:25:03,720 --> 00:25:07,910 untuk melakukan garis miring dalam tag terbuka atau tag awal 540 00:25:07,910 --> 00:25:09,020 dan kemudian tekan Save. 541 00:25:09,020 --> 00:25:13,350 >> Jadi jika saya sekarang ulang file ini, sekarang Aku punya web yang baik halaman memasak di sini. 542 00:25:13,350 --> 00:25:15,100 Dan kita bisa pasti benar-benar mengganggu orang 543 00:25:15,100 --> 00:25:17,010 dengan menanamkan bukan seperti link YouTube. 544 00:25:17,010 --> 00:25:19,350 Dan pada kenyataannya, setiap saat Anda pernah pergi ke YouTube, 545 00:25:19,350 --> 00:25:22,190 dan biarkan aku benar-benar tidak sengaja rick menggulung diriku di sini. 546 00:25:22,190 --> 00:25:25,770 Jadi Rick roll. 547 00:25:25,770 --> 00:25:29,592 Jadi rick roll-- aku akan pergi di sini. 548 00:25:29,592 --> 00:25:31,900 >> [MUSIC PLAYING] 549 00:25:31,900 --> 00:25:33,730 >> OK, satu orang suka itu. 550 00:25:33,730 --> 00:25:37,270 Jadi perhatikan selama ini, jika Anda klik link Share, Anda tentu saja 551 00:25:37,270 --> 00:25:41,390 mendapatkan URL yang Anda benar-benar bisa menanamkan dalam email atau gambar forensik 552 00:25:41,390 --> 00:25:43,730 atau dalam masalah mengatur atau slide. 553 00:25:43,730 --> 00:25:49,055 Dan sekarang, jika saya bukan klik embed, melihat bahwa selama ini, hal ini 554 00:25:49,055 --> 00:25:49,680 telah ada. 555 00:25:49,680 --> 00:25:50,910 Aku akan pergi ke depan dan copy ini. 556 00:25:50,910 --> 00:25:54,000 >> Dan hanya supaya kita bisa melihat lebih baik, aku akan paste ke editor teks. 557 00:25:54,000 --> 00:25:55,860 Perhatikan bahwa ini apa YouTube telah memberitahu Anda. 558 00:25:55,860 --> 00:25:57,693 Setiap kali Anda mengunjungi Video YouTube, jika Anda 559 00:25:57,693 --> 00:26:00,410 ingin menanamkan video pada Anda Halaman web, cukup ambil ini. 560 00:26:00,410 --> 00:26:03,350 Jadi ini adalah satu lagi HTML tag disebut iframe. 561 00:26:03,350 --> 00:26:04,590 Atau dalam bingkai garis. 562 00:26:04,590 --> 00:26:08,680 Jadi juga terlihat sedikit lebih kompleks daripada yang lain. 563 00:26:08,680 --> 00:26:11,950 Jadi ternyata bahwa gambar tag dan tampaknya tag iframe 564 00:26:11,950 --> 00:26:13,370 mengambil apa yang disebut atribut. 565 00:26:13,370 --> 00:26:15,710 >> Dan ini adalah satu lagi sepotong sintaks di HTML. 566 00:26:15,710 --> 00:26:19,240 Selain tag Nama, terbuka braket nama tag, 567 00:26:19,240 --> 00:26:23,780 Anda dapat mengontrol perilaku tag dengan memiliki sejumlah besar atribut 568 00:26:23,780 --> 00:26:24,860 sama nilai. 569 00:26:24,860 --> 00:26:26,290 Atribut sama nilai. 570 00:26:26,290 --> 00:26:28,100 Dan misalnya, YouTube mengatakan kepada kita 571 00:26:28,100 --> 00:26:31,990 jika Anda ingin lebar video ini menjadi 420 pixel dan tinggi 572 00:26:31,990 --> 00:26:35,470 menjadi 315 pixel, itu bagaimana Anda mengungkapkannya dalam HTML. 573 00:26:35,470 --> 00:26:38,480 >> Sumber video akan menjadi URL YouTube panjang 574 00:26:38,480 --> 00:26:40,830 dan kemudian beberapa hal lain seperti bingkai perbatasan adalah nol, 575 00:26:40,830 --> 00:26:43,500 sehingga mungkin berarti ada tidak ada perbatasan di sekitar hal tersebut. 576 00:26:43,500 --> 00:26:45,450 Memungkinkan layar penuh mungkin berarti bahwa pengguna 577 00:26:45,450 --> 00:26:47,840 dapat mengklik tombol dan sebenarnya layar penuh video. 578 00:26:47,840 --> 00:26:52,870 Jadi jika saya benar-benar ingin menjadi mengesankan di sini di Rick dot HTML, 579 00:26:52,870 --> 00:26:58,490 daripada menggunakan tag gambar, biarkan saya menghapus itu, bukan paste. 580 00:26:58,490 --> 00:27:00,810 Dan sekarang reload. 581 00:27:00,810 --> 00:27:02,500 Dan sekarang di sini kita pergi lagi. 582 00:27:02,500 --> 00:27:04,979 583 00:27:04,979 --> 00:27:06,020 Baiklah, itu sudah cukup. 584 00:27:06,020 --> 00:27:08,970 Baiklah jadi saya akan mencoba Sulit untuk tidak melakukannya lagi. 585 00:27:08,970 --> 00:27:11,400 Jadi apa adalah beberapa takeaways di sini? 586 00:27:11,400 --> 00:27:15,130 Jadi HTML, seburuk halaman web ini adalah, sebenarnya cukup sederhana. 587 00:27:15,130 --> 00:27:16,467 Ini bukan bahasa pemrograman. 588 00:27:16,467 --> 00:27:17,550 Ia tidak memiliki fungsi. 589 00:27:17,550 --> 00:27:18,410 Ia tidak memiliki loop. 590 00:27:18,410 --> 00:27:19,535 Ia tidak memiliki kondisi. 591 00:27:19,535 --> 00:27:22,900 Semua itu adalah puluhan tag yang berbeda, masing-masing 592 00:27:22,900 --> 00:27:24,620 memiliki nol atau lebih atribut. 593 00:27:24,620 --> 00:27:27,320 Dan pada kenyataannya, apa yang menyenangkan tentang HTML saat Anda mulai menyelam ke 594 00:27:27,320 --> 00:27:29,560 adalah bahwa hal itu sangat mendidik diri. 595 00:27:29,560 --> 00:27:32,880 >> Yang dibutuhkan adalah pemahaman dari kerangka umum HTML. 596 00:27:32,880 --> 00:27:36,510 Apa tag, apa adalah atribut, bagaimana Anda benar-benar mengkonfigurasi halaman web 597 00:27:36,510 --> 00:27:37,250 mengikuti. 598 00:27:37,250 --> 00:27:40,720 Dan segala sesuatu yang lain benar-benar hasil mencari di referensi secara online 599 00:27:40,720 --> 00:27:43,080 atau googling bagaimana melakukan beberapa teknik atau seperti yang kita lihat, 600 00:27:43,080 --> 00:27:45,371 melihat sumber Facebook kode, melihat website 601 00:27:45,371 --> 00:27:48,710 yang Anda sukai di itu kode sumber dan memahami bagaimana pengembang ada 602 00:27:48,710 --> 00:27:50,550 sebenarnya meletakkan hal-hal. 603 00:27:50,550 --> 00:27:52,180 >> Jadi kita bisa melakukan gambar juga. 604 00:27:52,180 --> 00:27:53,994 Dan pada kenyataannya, kami melakukannya beberapa saat yang lalu. 605 00:27:53,994 --> 00:27:55,410 Biarkan aku pergi ke depan dan hanya menunjukkan. 606 00:27:55,410 --> 00:27:56,770 Berikut ini beberapa contoh kode. 607 00:27:56,770 --> 00:27:58,380 Jika Anda pernah ingin melihat kucing pemarah. 608 00:27:58,380 --> 00:28:00,620 Jadi melihat bahwa saya bisa memiliki tag gambar di sini. 609 00:28:00,620 --> 00:28:02,090 Dan aku punya komentar atas itu. 610 00:28:02,090 --> 00:28:04,490 Aku punya alternatif teks untuk aksesibilitas. 611 00:28:04,490 --> 00:28:07,250 Jadi seseorang yang menggunakan layar pembaca untuk alasan penglihatan 612 00:28:07,250 --> 00:28:10,172 benar-benar dapat memiliki mereka kemudian pembaca layar mengatakan grumpy cat. 613 00:28:10,172 --> 00:28:11,880 Karena jika mereka tidak bisa melihat gambar, mereka 614 00:28:11,880 --> 00:28:14,504 setidaknya dapat memiliki komputer mereka memberitahu mereka secara lisan apa itu. 615 00:28:14,504 --> 00:28:18,020 Dan sumber file yang cat.jpeg. 616 00:28:18,020 --> 00:28:22,472 Jadi sebenarnya, jika saya benar-benar ingin mendapatkan pintar, apa yang saya bisa memiliki done-- 617 00:28:22,472 --> 00:28:25,680 Saya berjanji untuk tidak pergi ke Rick Astley, sehingga Aku akan google untuk kucing sebagai gantinya. 618 00:28:25,680 --> 00:28:28,290 Dan jika saya pergi ke Google Images di sini, dan kami akan menganggap 619 00:28:28,290 --> 00:28:30,040 bahwa ini adalah gambar kucing saya. 620 00:28:30,040 --> 00:28:35,070 >> Misalkan saya memiliki kontrol diklik atau kanan diklik ini, sengaja 621 00:28:35,070 --> 00:28:35,630 menyeramkan. 622 00:28:35,630 --> 00:28:40,320 Dan cat.jpeg aku akan untuk menghemat desktop saya. 623 00:28:40,320 --> 00:28:44,700 Sekarang saya kembali ke cloud 9. 624 00:28:44,700 --> 00:28:48,150 Perhatikan bahwa di sini, aku bisa pergi untuk meng-upload file lokal. 625 00:28:48,150 --> 00:28:51,530 Dan jika saya ambil ini File, cat.jpeg, pemberitahuan 626 00:28:51,530 --> 00:28:54,674 bahwa saya bisa tarik dan drop ke awan 9 627 00:28:54,674 --> 00:28:56,090 dan itu akan berteriak padaku di sini. 628 00:28:56,090 --> 00:28:59,000 >> Karena kita sudah sudah diberikan Anda file cat.jpeg, 629 00:28:59,000 --> 00:29:01,430 tapi itu super mudah untuk ambil foto yang telah Anda 630 00:29:01,430 --> 00:29:03,220 diambil dari Facebook atau Flickr atau sejenisnya 631 00:29:03,220 --> 00:29:05,678 dan benar-benar drag dan drop ke dalam awan 9 dan kemudian membuatnya 632 00:29:05,678 --> 00:29:07,970 bagian dari pribadi Anda sendiri situs web atau masalah 633 00:29:07,970 --> 00:29:10,442 mengatur tujuh atau delapan seperti yang kita akan segera melihat. 634 00:29:10,442 --> 00:29:12,150 Dan kemudian ketika Anda akhirnya mengunjungi kucing itu, 635 00:29:12,150 --> 00:29:16,610 asumsi saya download bahwa kucing yang sama, pemberitahuan itu-- yang menggemaskan. 636 00:29:16,610 --> 00:29:19,160 >> Apa yang Anda akan melihat adalah sesuatu seperti wajah ini di sini. 637 00:29:19,160 --> 00:29:21,810 Jadi file yang Anda referensi dalam halaman web 638 00:29:21,810 --> 00:29:26,050 baik dapat lokal di Anda sendiri akun atau remote pada beberapa server lain 639 00:29:26,050 --> 00:29:29,670 seperti dalam kasus Rick Astley foto sedikit lalu. 640 00:29:29,670 --> 00:29:32,990 Jadi mana else-- apa lagi yang bisa kita lakukan di sini? 641 00:29:32,990 --> 00:29:34,890 Jadi mari kita lihat berikut ini. 642 00:29:34,890 --> 00:29:36,160 Anda tahu apa yang jenis dingin? 643 00:29:36,160 --> 00:29:39,330 >> Kami sejauh ini telah membuat halaman web yang sangat statis. 644 00:29:39,330 --> 00:29:41,830 Saya ingin hal bumbu sebagai berikut. 645 00:29:41,830 --> 00:29:44,344 Saya ingin membuat mesin pencari sendiri. 646 00:29:44,344 --> 00:29:47,010 Jadi untuk membuat mesin pencari, mari kita pergi ke depan dan mulai melakukan hal ini. 647 00:29:47,010 --> 00:29:52,570 Aku akan pergi ke depan dan menciptakan file baru yang disebut search.html. 648 00:29:52,570 --> 00:29:54,890 Dan kami telah prefabed versi online. 649 00:29:54,890 --> 00:29:56,027 Whoops. 650 00:29:56,027 --> 00:29:57,610 Jangan paste ke jendela terminal Anda. 651 00:29:57,610 --> 00:29:58,744 Versi cetakan online. 652 00:29:58,744 --> 00:30:00,160 Dan aku akan memulai sebagai berikut. 653 00:30:00,160 --> 00:30:04,490 Jadi, inilah awal file disebut search.html. 654 00:30:04,490 --> 00:30:07,510 Aku akan menyimpannya dalam direktori source hari ini. 655 00:30:07,510 --> 00:30:09,079 Aku akan memanggil Cari ini. 656 00:30:09,079 --> 00:30:10,370 Sebenarnya, kami akan membuatnya lebih baik. 657 00:30:10,370 --> 00:30:13,600 CS50 Cari dan benar-benar merek itu. 658 00:30:13,600 --> 00:30:17,500 Dan sekarang, aku akan mengatakan sesuatu seperti H1 CS50 Cari. 659 00:30:17,500 --> 00:30:20,930 Dan kemudian di sini, H2 datang segera. 660 00:30:20,930 --> 00:30:23,230 Dan hanya untuk rekap, H1 dan H2 berarti apa masing-masing? 661 00:30:23,230 --> 00:30:26,750 662 00:30:26,750 --> 00:30:30,320 >> Ya, begitu besar dan tebal, dan tidak besar, tapi masih berani. 663 00:30:30,320 --> 00:30:37,375 Jadi jika saya simpan ini dan pergi di sini, mari kita lihat file search.html. 664 00:30:37,375 --> 00:30:42,560 Baiklah, dan yang satu ini adalah right-- [tidak terdengar]. 665 00:30:42,560 --> 00:30:46,980 666 00:30:46,980 --> 00:30:49,110 Bersiaga. 667 00:30:49,110 --> 00:30:49,945 David bingung. 668 00:30:49,945 --> 00:30:52,610 669 00:30:52,610 --> 00:30:54,080 Oh, itu ada di sana. 670 00:30:54,080 --> 00:30:54,860 David idiot. 671 00:30:54,860 --> 00:30:55,420 OKE. 672 00:30:55,420 --> 00:30:56,660 Jadi ada itu. 673 00:30:56,660 --> 00:30:58,350 Jadi CS50 pencarian segera hadir. 674 00:30:58,350 --> 00:31:00,370 Jadi sekarang, mari kita mensintesis apa yang kami lakukan minggu lalu. 675 00:31:00,370 --> 00:31:03,400 >> Di mana kita berbicara tentang mekanik tingkat yang lebih rendah dari HTTP. 676 00:31:03,400 --> 00:31:05,780 Dan ide-ide baru HTML, yang hanya 677 00:31:05,780 --> 00:31:08,890 bahasa markup ini di mana Anda memberitahu browser apa yang harus dilakukan 678 00:31:08,890 --> 00:31:10,740 dan menerapkan mesin pencarian kami sendiri. 679 00:31:10,740 --> 00:31:12,520 Jadi bukan hanya mengatakan akan segera datang, saya 680 00:31:12,520 --> 00:31:14,810 akan memperkenalkan sesuatu yang disebut tag form. 681 00:31:14,810 --> 00:31:19,610 Dan dalam bentuk ini, saya akan memiliki sesuatu seperti sebuah field input. 682 00:31:19,610 --> 00:31:22,450 >> Dan nama masukan ini lapangan, aku akan menyebutnya Q. 683 00:31:22,450 --> 00:31:26,240 Dan jenis bidang ini masukan Aku akan mengatakan hanya "text". 684 00:31:26,240 --> 00:31:29,130 Dan bidang teks, seperti yang akan kita lihat, hanya kotak teks. 685 00:31:29,130 --> 00:31:32,830 Dan sehingga tidak merasakan di sini untuk memiliki apa di dalamnya pada saat ini. 686 00:31:32,830 --> 00:31:35,320 Dan jadi aku hanya akan untuk menutup tag dengan yang 687 00:31:35,320 --> 00:31:38,099 garis miring tepat di tag itu sendiri. 688 00:31:38,099 --> 00:31:39,890 Dan kemudian aku akan memiliki satu masukan lainnya. 689 00:31:39,890 --> 00:31:43,480 Input type sama kirimkan. 690 00:31:43,480 --> 00:31:45,320 Dan kemudian aku akan menutup satu ini juga. 691 00:31:45,320 --> 00:31:46,840 >> Dan sekarang aku akan kembali ke sini. 692 00:31:46,840 --> 00:31:49,520 Dan sudah kita lihat, meskipun cukup jelek, aku sudah 693 00:31:49,520 --> 00:31:52,460 mendapat awal Halaman pencarian saya sendiri di sini. 694 00:31:52,460 --> 00:31:55,150 Bahkan, saya mencoba untuk membersihkan ini sedikit. 695 00:31:55,150 --> 00:31:57,330 Ternyata pada masukan di sini, saya dapat memiliki 696 00:31:57,330 --> 00:31:59,910 atribut lain yang disebut pengganti. 697 00:31:59,910 --> 00:32:05,165 Dan aku mungkin melihat sesuatu seperti kata kunci, atau lebih khusus, permintaan untuk q. 698 00:32:05,165 --> 00:32:07,820 >> Dan perhatikan, sekarang, aku punya jenis teks abu-abu 699 00:32:07,820 --> 00:32:10,440 yang menghilang sebagai Begitu aku mulai mengetik, 700 00:32:10,440 --> 00:32:12,930 tapi mungkin sesuatu Anda pernah melihat di halaman web lain. 701 00:32:12,930 --> 00:32:14,650 Saya tidak benar-benar seperti tombol Submit. 702 00:32:14,650 --> 00:32:18,320 Jadi aku benar-benar akan memberikan Tombol submit nilai pencarian. 703 00:32:18,320 --> 00:32:21,680 Dan sekarang, jika saya reload, perhatikan bahwa tombol saya menjadi bernama pencarian. 704 00:32:21,680 --> 00:32:24,140 Kau tahu, aku tidak benar-benar seperti logo di sini. 705 00:32:24,140 --> 00:32:27,140 Jadi Google Font Generator. 706 00:32:27,140 --> 00:32:28,820 >> Saya ingin membumbui hal ini lebih lanjut. 707 00:32:28,820 --> 00:32:30,660 Pencari sehingga CS50. 708 00:32:30,660 --> 00:32:31,870 Biarkan saya membuat logo sendiri. 709 00:32:31,870 --> 00:32:33,080 Yang terlihat bagus. 710 00:32:33,080 --> 00:32:36,945 Jadi sekarang biarkan aku simpan ini as-- datang. 711 00:32:36,945 --> 00:32:40,710 712 00:32:40,710 --> 00:32:43,120 Mana itu akan pergi? 713 00:32:43,120 --> 00:32:43,620 Ada. 714 00:32:43,620 --> 00:32:44,160 OKE. 715 00:32:44,160 --> 00:32:44,980 Melewatkannya. 716 00:32:44,980 --> 00:32:47,740 Simpan sebagai. 717 00:32:47,740 --> 00:32:49,470 Browser bodoh. 718 00:32:49,470 --> 00:32:51,700 Stand by, kita akan memperbaiki ini sekali dan untuk semua. 719 00:32:51,700 --> 00:32:57,650 720 00:32:57,650 --> 00:32:58,590 Di sana kami pergi. 721 00:32:58,590 --> 00:32:59,090 Baiklah. 722 00:32:59,090 --> 00:32:59,600 Maaf. 723 00:32:59,600 --> 00:33:00,750 Hari cuti. 724 00:33:00,750 --> 00:33:02,310 Sekarang ini adalah funky. 725 00:33:02,310 --> 00:33:03,160 Keluar layar penuh. 726 00:33:03,160 --> 00:33:04,150 Baiklah. 727 00:33:04,150 --> 00:33:06,870 >> Sekarang, seperti biasa orang, simpan gambar sebagai. 728 00:33:06,870 --> 00:33:08,810 Logo.gif. 729 00:33:08,810 --> 00:33:13,194 Sekarang aku akan pergi ke CS50IDE dan Aku akan hanya mengambil logo, 730 00:33:13,194 --> 00:33:15,360 Aku akan menyeret ke dalam saya direktori sumber tujuh, 731 00:33:15,360 --> 00:33:17,002 file sudah ada, aku OK dengan itu. 732 00:33:17,002 --> 00:33:19,210 Jadi aku akan menimpanya karena saya sudah punya itu. 733 00:33:19,210 --> 00:33:20,630 Dan sekarang bagaimana cara menyingkirkan ini? 734 00:33:20,630 --> 00:33:24,670 >> Mari kita pergi ke depan di sini dan melakukan sumber gambar sama logo.gif. 735 00:33:24,670 --> 00:33:25,490 Tutup ini. 736 00:33:25,490 --> 00:33:26,050 Simpan. 737 00:33:26,050 --> 00:33:30,560 Dan jika saya kembali ke pencarian saya Halaman, sekarang itu tampak cukup baik. 738 00:33:30,560 --> 00:33:33,610 Baiklah, sehingga belum cukup melakukan sesuatu yang berguna. 739 00:33:33,610 --> 00:33:37,000 Bahkan, saya coba cari untuk kucing dan melihat apa yang terjadi. 740 00:33:37,000 --> 00:33:38,890 Kucing. 741 00:33:38,890 --> 00:33:39,420 Kurang ajar. 742 00:33:39,420 --> 00:33:41,400 Ini tidak hanya bekerja, rupanya. 743 00:33:41,400 --> 00:33:43,760 Jadi apa bagian kunci yang hilang di sini? 744 00:33:43,760 --> 00:33:49,100 >> Benar, bahkan jika Anda tidak tahu HTML, Aku sudah mulai menandai bentuk telepon 745 00:33:49,100 --> 00:33:54,130 dan saya sudah mengatakan itu bagaimana untuk mendapatkan input, memberi saya sebuah kotak teks dan tombol submit, 746 00:33:54,130 --> 00:33:55,730 apa piece tampaknya hilang? 747 00:33:55,730 --> 00:33:58,975 Misalkan kita ingin benar-benar mendapatkan Hal ini bekerja dengan benar. 748 00:33:58,975 --> 00:34:02,420 749 00:34:02,420 --> 00:34:05,360 Apa yang perlu kita lakukan? 750 00:34:05,360 --> 00:34:08,860 Kami memiliki kebutuhan untuk melaksanakan belakang database atau mesin pencari itu sendiri, 751 00:34:08,860 --> 00:34:11,210 dan itu akan mengambil banyak waktu, terus terang. 752 00:34:11,210 --> 00:34:13,380 >> Jadi ingat apa yang kita lakukan terakhir kali. 753 00:34:13,380 --> 00:34:18,230 Jadi jika Anda mencari sesuatu di Google dan Anda telah terlebih dahulu dimatikan, 754 00:34:18,230 --> 00:34:20,355 ingat, pencarian instan. 755 00:34:20,355 --> 00:34:22,230 Jadi biarkan aku menghidupkan yang mati sehingga sebenarnya ini 756 00:34:22,230 --> 00:34:26,650 berperilaku seperti browser sekolah tua, jika saya sekarang mencari sesuatu seperti kucing, 757 00:34:26,650 --> 00:34:28,190 mengingat apa URL yang tampak seperti. 758 00:34:28,190 --> 00:34:29,449 Ini cukup samar. 759 00:34:29,449 --> 00:34:33,000 Tetapi tertanam di sana, ingat, adalah pencarian slash. 760 00:34:33,000 --> 00:34:35,100 Tanda tanya q sama kucing. 761 00:34:35,100 --> 00:34:37,760 >> Dan itu tampaknya akan memberi saya sejumlah besar hasil pencarian. 762 00:34:37,760 --> 00:34:39,134 Jadi, Anda tahu apa yang akan saya lakukan? 763 00:34:39,134 --> 00:34:41,650 Aku akan meminjam Google hanya satu menit. 764 00:34:41,650 --> 00:34:43,670 Aku akan pergi di sini dan aku akan mengatakan 765 00:34:43,670 --> 00:34:47,850 bahwa ini merupakan tindakan atau tujuan, sehingga untuk berbicara, 766 00:34:47,850 --> 00:34:49,330 harus benar-benar menjadi Google. 767 00:34:49,330 --> 00:34:52,590 Dan metode yang saya inginkan penggunaan akan menjadi mendapatkan. 768 00:34:52,590 --> 00:34:53,560 >> Jadi apa tindakan? 769 00:34:53,560 --> 00:34:55,760 Tindakan ganjil bernama, tapi itu hanya berarti 770 00:34:55,760 --> 00:34:58,120 siapa yang akan menangani aksi formulir ini? 771 00:34:58,120 --> 00:35:00,820 Ketika saya klik Search, di mana harus hasilnya pergi? 772 00:35:00,820 --> 00:35:05,300 Dan jika saya sekarang kembali ke bentuk saya di sini dan kembali halaman web saya 773 00:35:05,300 --> 00:35:09,000 dan sekarang mencari sesuatu seperti anjing, melihat sekarang 774 00:35:09,000 --> 00:35:10,850 Saya telah kembali dilaksanakan Google. 775 00:35:10,850 --> 00:35:11,350 Benar? 776 00:35:11,350 --> 00:35:14,141 >> Jika saya ingin mencari sesuatu lain, ia bekerja untuk tidak hanya anjing, 777 00:35:14,141 --> 00:35:16,400 ia juga bekerja untuk kucing. 778 00:35:16,400 --> 00:35:21,930 Ia juga bekerja untuk CS50. 779 00:35:21,930 --> 00:35:24,310 Dan OK, ini hanya di bawah whelming, bukan? 780 00:35:24,310 --> 00:35:25,920 Baiklah, tetapi benar-benar bekerja. 781 00:35:25,920 --> 00:35:27,360 Jadi apa yang sebenarnya terjadi? 782 00:35:27,360 --> 00:35:31,340 Jadi saya sudah diajarkan browser saya, menggunakan HTML, untuk mengambil input dari user 783 00:35:31,340 --> 00:35:35,810 dan benar-benar mengirim masukan yang ke remote server menggunakan HTTP. 784 00:35:35,810 --> 00:35:39,120 >> Dan karena browser saya memahami HTTP, itu benar-benar 785 00:35:39,120 --> 00:35:43,500 membangun URL sehingga apa Saya akhirnya lebih di browser saya, 786 00:35:43,500 --> 00:35:45,660 perhatikan apa yang terjadi ketika saya mencari anjing. 787 00:35:45,660 --> 00:35:49,270 Jika saya klik Cari, melihat bahwa URL perubahan seperti yang saya dimaksudkan 788 00:35:49,270 --> 00:35:52,770 untuk google.com/search~~V permintaan sama dengan anjing. 789 00:35:52,770 --> 00:35:56,020 Dan itu karena bentuk tahu, karena metode ini mendapatkan, 790 00:35:56,020 --> 00:35:59,560 untuk hanya menambahkan ke URL ada. 791 00:35:59,560 --> 00:36:01,730 >> Sekarang, halaman web ini masih jelek. 792 00:36:01,730 --> 00:36:04,890 Jadi mari kita memperkenalkan satu lagi sepotong sintaks jika kita dapat hari ini. 793 00:36:04,890 --> 00:36:07,640 Dan ini adalah sesuatu yang diketahui sebagai cascading style sheets. 794 00:36:07,640 --> 00:36:10,720 Jadi biarkan aku lihatlah contoh ini di sini dan melihat 795 00:36:10,720 --> 00:36:12,380 jika kita dapat menyimpulkan apa yang terjadi. 796 00:36:12,380 --> 00:36:14,520 Ini adalah CSS0.html. 797 00:36:14,520 --> 00:36:16,532 Dan ini adalah di mana hal-hal mendapatkan sedikit jelek. 798 00:36:16,532 --> 00:36:18,490 Karena sayangnya, dalam dunia web, 799 00:36:18,490 --> 00:36:20,920 HTML sendiri tidak dapat melakukan segalanya. 800 00:36:20,920 --> 00:36:22,920 Dan jadi jika Anda ingin menyesuaikan dgn mode halaman web Anda, 801 00:36:22,920 --> 00:36:28,370 Anda benar-benar harus fokus pada estetika dengan cara yang berbeda. 802 00:36:28,370 --> 00:36:33,090 Jadi di sini, saya memiliki tubuh web saya Halaman dalam yang merupakan div besar. 803 00:36:33,090 --> 00:36:34,700 Dan div hanya berarti divisi. 804 00:36:34,700 --> 00:36:38,060 Jadi seperti sebuah paragraf tetapi tidak memiliki semantik yang sama 805 00:36:38,060 --> 00:36:39,180 dari paragraf teks. 806 00:36:39,180 --> 00:36:40,940 >> Ini hanya berarti untuk Browser, di sini datang 807 00:36:40,940 --> 00:36:45,210 wilayah persegi panjang besar web saya Halaman, saya ingin menanganinya secara khusus. 808 00:36:45,210 --> 00:36:47,420 Sekarang, line 21 adalah di mana div yang dimulai. 809 00:36:47,420 --> 00:36:48,770 Dan hanya mengambil menebak. 810 00:36:48,770 --> 00:36:53,080 Apa efek dari garis 21 pada sisa isi halaman? 811 00:36:53,080 --> 00:36:55,640 812 00:36:55,640 --> 00:36:56,311 Centering itu. 813 00:36:56,311 --> 00:36:56,810 Itu saja. 814 00:36:56,810 --> 00:36:58,830 Jadi kita belum melihat cara sebenarnya berpusat teks. 815 00:36:58,830 --> 00:37:00,996 >> Bahkan, mesin pencari saya, tidak seperti Google yang sebenarnya, 816 00:37:00,996 --> 00:37:03,040 itu semua dibenarkan ke kiri. 817 00:37:03,040 --> 00:37:07,430 Dan sekarang di line 21, saya katakan, hey Browser, membuat sebuah divisi dari halaman. 818 00:37:07,430 --> 00:37:09,450 Hanya memberi saya besar, persegi panjang tak terlihat. 819 00:37:09,450 --> 00:37:11,490 Itulah bagaimana saya ingin berpikir tentang halaman web. 820 00:37:11,490 --> 00:37:13,870 Dan kemudian menyesuaikan dgn mode sebagai berikut. 821 00:37:13,870 --> 00:37:16,900 Dalam kutipan tersebut, sekarang, adalah bahasa kedua 822 00:37:16,900 --> 00:37:19,969 yang kita diperkenalkan hari ini disebut Cascading style sheet. 823 00:37:19,969 --> 00:37:22,010 Untungnya, itu juga tidak bahasa pemrograman, 824 00:37:22,010 --> 00:37:26,470 sehingga sangat terbatas dalam sintaks tetapi juga sangat terbatas dalam fungsi 825 00:37:26,470 --> 00:37:30,670 sedangkan HTML adalah semua tentang menandai data dari halaman web 826 00:37:30,670 --> 00:37:32,130 dan struktur halaman web. 827 00:37:32,130 --> 00:37:35,320 CSS umumnya tentang mil terakhir, estetika, 828 00:37:35,320 --> 00:37:40,160 mendapatkan ukuran dan warna dan Penempatan tepat di halaman web. 829 00:37:40,160 --> 00:37:43,000 Dan memang, itu terbentuk dengan pasangan nilai kunci. 830 00:37:43,000 --> 00:37:46,290 >> Sebuah properti seperti ini, teks menyelaraskan, diikuti oleh titik dua, 831 00:37:46,290 --> 00:37:49,720 diikuti oleh nilai yang properti, yang dalam hal ini adalah pusat. 832 00:37:49,720 --> 00:37:51,910 Dan sekarang melihat Anda dapat sarang hal-hal ini. 833 00:37:51,910 --> 00:37:56,780 Jika saya ingin segala sesuatu dalam Aku sudah disorot berpusat, 834 00:37:56,780 --> 00:38:00,270 itulah mengapa saya memiliki line 21 dan garis yang sesuai 31. 835 00:38:00,270 --> 00:38:04,820 Tapi kira sekarang ingin mengatakan John Harvard, selamat datang untuk halaman rumah saya. 836 00:38:04,820 --> 00:38:06,530 >> Simbol hak cipta John Harvard. 837 00:38:06,530 --> 00:38:09,180 Dan kira saya ingin pertama garis menjadi cukup besar. 838 00:38:09,180 --> 00:38:10,450 36 piksel. 839 00:38:10,450 --> 00:38:11,530 Jadi itu ukuran yang layak. 840 00:38:11,530 --> 00:38:13,240 Dan saya ingin berat untuk menjadi berani. 841 00:38:13,240 --> 00:38:15,450 Tapi kemudian di bawah itu, Saya ingin teks yang lebih kecil. 842 00:38:15,450 --> 00:38:19,980 Dan di bawah itu, saya ingin teks bahkan lebih kecil. 843 00:38:19,980 --> 00:38:20,480 Maaf. 844 00:38:20,480 --> 00:38:24,490 845 00:38:24,490 --> 00:38:26,940 Hari ini terasa seperti off hari. 846 00:38:26,940 --> 00:38:29,840 >> Jadi sekarang, apa yang saya lakukan untuk mengungkapkan ini? 847 00:38:29,840 --> 00:38:34,580 Berikut on line 22 adalah tertanam div atau div bersarang, jika Anda mau. 848 00:38:34,580 --> 00:38:36,190 Juga memiliki tag gaya sendiri. 849 00:38:36,190 --> 00:38:38,160 Aku menentukan ukuran font 36. 850 00:38:38,160 --> 00:38:40,460 Aku menentukan berat font tebal. 851 00:38:40,460 --> 00:38:43,360 Di sini, saya hanya menentukan 24 piksel. 852 00:38:43,360 --> 00:38:45,960 Dan akhirnya, di baris 28, saya tentukan 12. 853 00:38:45,960 --> 00:38:49,070 Jadi hanya sebagai kewarasan cek cepat dan sebagai manusia membaca ini, 854 00:38:49,070 --> 00:38:52,545 yang kata-kata di layar adalah benar-benar akan menjadi berani? 855 00:38:52,545 --> 00:38:56,100 856 00:38:56,100 --> 00:38:58,760 Garis yang sebenarnya berani? 857 00:38:58,760 --> 00:38:59,570 >> Hanya John Harvard. 858 00:38:59,570 --> 00:39:00,070 Benar? 859 00:39:00,070 --> 00:39:05,940 Karena seperti garis 22 mengatakan hey Browser, inilah sebuah divisi dari halaman. 860 00:39:05,940 --> 00:39:07,920 Buatlah ukuran font 36 titik. 861 00:39:07,920 --> 00:39:09,460 Membuat berat huruf tebal. 862 00:39:09,460 --> 00:39:11,920 Segera setelah Anda mencapai sesuai tag akhir 863 00:39:11,920 --> 00:39:15,340 atau tag tertutup on line 24, yang berarti, hey peramban, 864 00:39:15,340 --> 00:39:17,640 berhenti melakukan apa pun yang Anda lakukan. 865 00:39:17,640 --> 00:39:21,020 Dan pemberitahuan harus jelas, meskipun baris 22 memiliki semua atribut ini 866 00:39:21,020 --> 00:39:24,430 seperti gaya, ketika Anda menutup tag sejalan 24, 867 00:39:24,430 --> 00:39:25,940 Anda hanya menyebutkan nama tag. 868 00:39:25,940 --> 00:39:29,990 >> Anda tidak mengulangi gaya kata atau apa pun yang ada di dalam mereka tanda kutip. 869 00:39:29,990 --> 00:39:32,860 Dan jadi jika saya melihat ini sekarang di browser saya, mari kita 870 00:39:32,860 --> 00:39:38,060 terlihat pada hasil akhir. Biarkan aku pergi depan untuk file ini, yang merupakan CSS 0. 871 00:39:38,060 --> 00:39:41,814 Dan itu masih cukup sederhana, tapi mendapatkan cukup menarik. 872 00:39:41,814 --> 00:39:43,980 Tapi ternyata ada yang hal-hal lain yang bisa saya lakukan di sini, 873 00:39:43,980 --> 00:39:46,490 dan pada risiko membuat ini benar-benar mengerikan, 874 00:39:46,490 --> 00:39:48,630 perhatikan di sini bahwa dalam saya badan halaman web saya, 875 00:39:48,630 --> 00:39:53,930 Aku bisa melakukan sesuatu yang lucu seperti bg atau warna latar belakang. 876 00:39:53,930 --> 00:39:56,670 >> Dan cepat, apa warna favorit Anda? 877 00:39:56,670 --> 00:39:57,720 Green saya mendengar. 878 00:39:57,720 --> 00:39:58,750 Baiklah. 879 00:39:58,750 --> 00:40:02,920 Jadi sekarang, jika aku memukul ulang sekarang, kami memiliki halaman web hijau. 880 00:40:02,920 --> 00:40:04,710 Baiklah, jadi itu tidak buruk. 881 00:40:04,710 --> 00:40:08,350 Dan sekarang, jika saya ingin membuat ini benar-benar keren, saya bisa membuat warna teks saya 882 00:40:08,350 --> 00:40:09,360 bahkan merah. 883 00:40:09,360 --> 00:40:10,870 Jadi mari kita lihat apa ini terlihat seperti. 884 00:40:10,870 --> 00:40:12,230 Sekarang itu tampak cukup baik. 885 00:40:12,230 --> 00:40:15,460 Dan di sini, jika Anda benar-benar ingin main-main dengan seseorang 886 00:40:15,460 --> 00:40:17,487 atau jika Anda ingin menjadi salah satu dari orang-orang yang 887 00:40:17,487 --> 00:40:20,570 mencoba untuk menipu Anda agar mengunjungi web Halaman karena mereka telah ditipu Google 888 00:40:20,570 --> 00:40:27,610 ke dalam pemikiran ada seluruh banyak kata-kata kunci like-- mari kita lihat, reload. 889 00:40:27,610 --> 00:40:29,020 890 00:40:29,020 --> 00:40:30,680 Mana hasilnya? 891 00:40:30,680 --> 00:40:31,530 Dan itu kita. 892 00:40:31,530 --> 00:40:32,030 Baiklah. 893 00:40:32,030 --> 00:40:34,905 Jadi saya mengatakan ini sebagai samping, kita akan berbicara tentang hal ini dalam beberapa minggu 894 00:40:34,905 --> 00:40:36,740 ketika kita berbicara tentang keamanan, jika Anda benar-benar 895 00:40:36,740 --> 00:40:38,852 menanamkan seluruh tandan kata kunci dalam halaman web, 896 00:40:38,852 --> 00:40:41,810 bahkan jika mereka tidak terlihat dengan manusia, seseorang seperti Google, tentu saja, 897 00:40:41,810 --> 00:40:43,250 masih dapat benar-benar menemukan ini. 898 00:40:43,250 --> 00:40:45,820 Baiklah, sehingga cukup mengerikan cukup cepat. 899 00:40:45,820 --> 00:40:48,420 >> Dan pada kenyataannya, itu tidak semua yang banyak tidak seperti web saya sendiri 900 00:40:48,420 --> 00:40:51,480 Halaman sebagai sarjana, yang Saya mulai googling sekitar untuk menemukan 901 00:40:51,480 --> 00:40:53,690 versi terakhir dari situs lama saya. 902 00:40:53,690 --> 00:40:54,500 Itu sangat buruk. 903 00:40:54,500 --> 00:40:56,650 Bahkan, aku menemukan satu hanya sebelum kelas. 904 00:40:56,650 --> 00:40:58,620 Tapi ada yang lebih buruk di luar sana. 905 00:40:58,620 --> 00:41:01,534 Ini rupanya adalah saya halaman rumah kembali pada tahun 1996. 906 00:41:01,534 --> 00:41:04,200 Rupanya aku pikir itu yang tepat untuk meminta orang nama mereka 907 00:41:04,200 --> 00:41:05,991 sebelum mereka bisa benar-benar melihat halaman web saya. 908 00:41:05,991 --> 00:41:09,380 909 00:41:09,380 --> 00:41:11,920 >> Dan kemudian saya menunjukkan mereka sesuatu yang bodoh, mungkin. 910 00:41:11,920 --> 00:41:13,450 Aku akan menggali lebih untuk waktu berikutnya. 911 00:41:13,450 --> 00:41:16,220 Tapi untuk saat ini, mari kita mempertimbangkan sedikit desain. 912 00:41:16,220 --> 00:41:17,444 Kami sudah berbicara tentang gaya. 913 00:41:17,444 --> 00:41:19,735 Dan halaman ini sejauh dan kebanyakan semua yang saya tulis 914 00:41:19,735 --> 00:41:21,890 cukup bersih Gaya. 915 00:41:21,890 --> 00:41:23,320 Tapi bagaimana desain? 916 00:41:23,320 --> 00:41:25,990 Nah, ada banyak redundansi dalam apa yang telah saya lakukan di sini. 917 00:41:25,990 --> 00:41:28,156 >> Saya sebutkan kata warna dalam beberapa tempat. 918 00:41:28,156 --> 00:41:31,630 Saya telah menyebutkan ukuran font dalam beberapa tempat dan berani dalam beberapa tempat. 919 00:41:31,630 --> 00:41:34,870 Dan fundamental, aku co berbaur dua bahasa. 920 00:41:34,870 --> 00:41:38,100 Aku punya HTML dengan tag saya dan saya atribut dan kemudian tiba-tiba, 921 00:41:38,100 --> 00:41:40,100 antara tanda kutip, saya harus bahasa kedua hari ini 922 00:41:40,100 --> 00:41:43,830 disebut CSS, yang lagi-lagi, hanya ini pasangan nilai kunci atau sifat ini 923 00:41:43,830 --> 00:41:45,280 dipisahkan oleh titik dua. 924 00:41:45,280 --> 00:41:47,700 >> Ternyata banyak seperti di C di mana kita 925 00:41:47,700 --> 00:41:50,550 dapat mulai untuk faktor luar beberapa kode ke dalam file header, 926 00:41:50,550 --> 00:41:53,520 sehingga bisa kita melakukan hal yang sama dalam HTML. 927 00:41:53,520 --> 00:41:56,030 Dan langkah menuju yang adalah sebagai berikut. 928 00:41:56,030 --> 00:42:02,230 Perhatikan bahwa versi ini, CSS1.html adalah Secara struktural halaman web yang sama persis. 929 00:42:02,230 --> 00:42:05,250 Jadi saya punya seluruh bunch divs, tapi kali ini, saya sudah 930 00:42:05,250 --> 00:42:07,220 sudah menyingkirkan bungkusnya div seperti yang Anda akan melihat. 931 00:42:07,220 --> 00:42:12,390 >> Dan saya sudah memberikan tiga divs atas, tengah, dan bawah, ID unik. 932 00:42:12,390 --> 00:42:14,760 Ini bagus, karena dengan memberikan divisi-divisi 933 00:42:14,760 --> 00:42:18,715 halaman pengidentifikasi unik, Saya dapat referensi mereka di tempat lain. 934 00:42:18,715 --> 00:42:19,215 Dimana? 935 00:42:19,215 --> 00:42:21,070 Nah, biarkan aku gulir ke atas. 936 00:42:21,070 --> 00:42:24,070 Dan sejauh ini, kapan saja kita telah melihat di kepala halaman web, apa 937 00:42:24,070 --> 00:42:28,560 hanya tag yang kami punya di kepala dari suatu halaman web? 938 00:42:28,560 --> 00:42:29,740 Sebuah sedikit lebih keras. 939 00:42:29,740 --> 00:42:30,799 Hanya judul sejauh ini. 940 00:42:30,799 --> 00:42:32,590 Tapi ternyata ada yang beberapa hal lainnya 941 00:42:32,590 --> 00:42:35,840 Anda dapat menempatkan di sana, salah satu yang disebut tag gaya. 942 00:42:35,840 --> 00:42:37,850 Jadi saat yang lalu, kita melihat pada atribut style. 943 00:42:37,850 --> 00:42:39,150 Ternyata ada tag gaya. 944 00:42:39,150 --> 00:42:41,200 Ini milik dalam kepala dari suatu halaman web. 945 00:42:41,200 --> 00:42:42,840 Dan sekarang melihat apa yang saya lakukan. 946 00:42:42,840 --> 00:42:46,540 Saya memiliki di dalam ini tag gaya berikut. 947 00:42:46,540 --> 00:42:51,190 Aku benar-benar menyebutkan pada baris 20 yang nama dari tag yang saya ingin menyesuaikan dgn mode. 948 00:42:51,190 --> 00:42:53,489 >> Kemudian saya memiliki penjepit keriting terbuka dan ditutup penjepit keriting. 949 00:42:53,489 --> 00:42:56,030 Jadi semangat yang sama C, tapi lagi, ini bukan fungsi, 950 00:42:56,030 --> 00:42:57,796 ini hanya detail sintaksis sini. 951 00:42:57,796 --> 00:43:00,170 Dan tentu saja, saya memberitahu browser, hey peramban, 952 00:43:00,170 --> 00:43:05,210 membuat seluruh tubuh halaman memiliki keselarasan teks pusat. 953 00:43:05,210 --> 00:43:06,930 Dan kemudian ini mengatakan berikut. 954 00:43:06,930 --> 00:43:12,600 Hey Browser, jika Anda melihat HTML elemen atau tag di halaman yang 955 00:43:12,600 --> 00:43:17,040 memiliki pengenal yang unik dari atas, sehingga simbol hash sini hanya berarti 956 00:43:17,040 --> 00:43:21,010 ide unik dari atas, silakan dan membuat ukuran font 36 957 00:43:21,010 --> 00:43:22,490 dan berat font tebal. 958 00:43:22,490 --> 00:43:26,840 >> Hey Browser, unsur yang ID adalah tengah, membuat 24 piksel. 959 00:43:26,840 --> 00:43:31,070 Dan hey Browser, jika Anda melihat Ide bawah, membuatnya 12 piksel. 960 00:43:31,070 --> 00:43:33,540 Efek pada akhirnya adalah persis sam. 961 00:43:33,540 --> 00:43:36,500 Jika saya pergi ke CSS 1, Halaman tampak sama. 962 00:43:36,500 --> 00:43:39,810 Tapi kami langkah menuju desain sedikit lebih baik. 963 00:43:39,810 --> 00:43:44,850 Sekarang saya kembali ke sini untuk CSS2 dan melihat apa lagi yang telah saya lakukan. 964 00:43:44,850 --> 00:43:48,030 >> Sekarang halaman ini benar-benar, benar-benar bersih. 965 00:43:48,030 --> 00:43:50,730 Bahkan, saya bisa cocok semua isi pada halaman di sini. 966 00:43:50,730 --> 00:43:54,270 Tapi apa tag baru yang harus saya diperkenalkan, jelas? 967 00:43:54,270 --> 00:43:54,770 Link. 968 00:43:54,770 --> 00:43:57,853 Dan itu bukan nama yang terbaik untuk tag, karena itu bukan link dalam arti 969 00:43:57,853 --> 00:44:00,780 yang kita tahu itu, tapi ini berarti link di beberapa file lain. 970 00:44:00,780 --> 00:44:02,890 Ini adalah jenis seperti tajam termasuk di C. 971 00:44:02,890 --> 00:44:06,280 >> Ini adalah cara di HTML mengatakan hey peramban, 972 00:44:06,280 --> 00:44:10,240 pergi mendapatkan isi file disebut css2.css. 973 00:44:10,240 --> 00:44:12,880 Hubungan, bagi saya, adalah bahwa itu adalah style sheet. 974 00:44:12,880 --> 00:44:17,980 Dan memang, itulah yang salah satu S di cascading style sheets berarti. 975 00:44:17,980 --> 00:44:20,350 Ini adalah style sheet. 976 00:44:20,350 --> 00:44:23,120 Ini hanya file teks yang berisi sejumlah besar properti. 977 00:44:23,120 --> 00:44:25,940 Ini sejumlah besar gaya yang Anda ingin menerapkan ke halaman. 978 00:44:25,940 --> 00:44:28,860 >> Dan jadi ini tampaknya adalah mengacu ke file kedua. 979 00:44:28,860 --> 00:44:32,970 Dan jika saya membuka itu, CSS2.css, melihat bahwa semua yang telah saya lakukan 980 00:44:32,970 --> 00:44:35,900 adalah copy dan paste semua ini ke dalam file ini. 981 00:44:35,900 --> 00:44:38,220 Dan sekarang, bahkan jika Anda belum pernah kode hal ini sebelumnya, 982 00:44:38,220 --> 00:44:40,700 hanya mempertimbangkan dengan hat rekayasa pepatah 983 00:44:40,700 --> 00:44:44,220 pada, mengapa adalah ini desain yang lebih baik mungkin? 984 00:44:44,220 --> 00:44:48,910 Anjak keluar properti-properti CSS, menempatkan mereka ke dalam file mereka sendiri. 985 00:44:48,910 --> 00:44:51,330 Meskipun kita dipecahkan ini Masalah seperti lima menit yang lalu 986 00:44:51,330 --> 00:44:52,600 dalam versi pertama. 987 00:44:52,600 --> 00:44:55,730 >> Kami sudah tidak meningkatkan Halaman Gaya, 988 00:44:55,730 --> 00:44:57,520 ini hanya lebih baik desain dalam arti. 989 00:44:57,520 --> 00:44:58,990 Mengapa kamu berpikir? 990 00:44:58,990 --> 00:45:01,510 Ya. 991 00:45:01,510 --> 00:45:02,260 Lebih fleksibel bagaimana? 992 00:45:02,260 --> 00:45:05,040 993 00:45:05,040 --> 00:45:05,540 Ya. 994 00:45:05,540 --> 00:45:07,373 Jadi jika Anda ingin pergi kembali dan mengubah hal-hal, 995 00:45:07,373 --> 00:45:09,540 sekarang, Anda memiliki satu tempat di mana Anda dapat mengubah hal-hal. 996 00:45:09,540 --> 00:45:11,622 Dan pada kenyataannya, untuk sesuatu seperti masalah set tujuh, 997 00:45:11,622 --> 00:45:13,690 di mana kita akan menerapkan situs perdagangan saham, 998 00:45:13,690 --> 00:45:15,523 itu akan memiliki Seluruh sekelompok halaman. 999 00:45:15,523 --> 00:45:17,620 Dan itu akan sangat menjengkelkan jika Anda memutuskan, hm, 1000 00:45:17,620 --> 00:45:21,630 Saya tidak benar-benar seperti 24 piksel, saya ingin itu menjadi 28 piksel atau sedikit lebih besar. 1001 00:45:21,630 --> 00:45:23,550 Dan kemudian harus melakukan global yang mencari dan mengganti 1002 00:45:23,550 --> 00:45:27,560 atau membuka semua file website Anda hanya untuk benar-benar mengubah satu nilai. 1003 00:45:27,560 --> 00:45:31,290 Dengan anjak keluar gaya ini menjadi satu tempat sentral, 1004 00:45:31,290 --> 00:45:34,720 sekarang Anda dapat membuka satu file teks di CS50IDE ke dalam program apapun, 1005 00:45:34,720 --> 00:45:36,479 mengubahnya, simpan, dan dilakukan. 1006 00:45:36,479 --> 00:45:38,270 Anda sudah disebarkan orang- perubahan di mana-mana. 1007 00:45:38,270 --> 00:45:42,450 Dan itu akan sama dalam file dot h juga. 1008 00:45:42,450 --> 00:45:46,697 Jadi pertanyaan demikian jauh di sintaks ini? 1009 00:45:46,697 --> 00:45:48,530 Baiklah, jadi kami sudah melakukan segalanya tampaknya 1010 00:45:48,530 --> 00:45:51,170 kecuali benar-benar menerapkan hyperlink. 1011 00:45:51,170 --> 00:45:52,740 Dan jadi mari kita pergi ke depan dan melakukan hal ini. 1012 00:45:52,740 --> 00:45:54,830 Biarkan aku pergi ke depan dan membuat file baru di sini. 1013 00:45:54,830 --> 00:45:59,970 Aku akan menyebutnya link.html, dimasukkan ke dalam kode hari ini. 1014 00:45:59,970 --> 00:46:03,000 >> Dan aku akan melakukan open braket tipe doc html. 1015 00:46:03,000 --> 00:46:05,970 Sebagai samping, hal ini di atas, doc ini deklarasi tipe, 1016 00:46:05,970 --> 00:46:08,420 itu satu-satunya yang aneh dengan tanda seru. 1017 00:46:08,420 --> 00:46:12,100 Anda hanya perlu melakukannya di sana dan itu berarti kita menggunakan HTML versi 5. 1018 00:46:12,100 --> 00:46:14,460 Versi bahasa memiliki lebih lama 1019 00:46:14,460 --> 00:46:16,400 string yang Anda butuhkan untuk diletakkan di sana. 1020 00:46:16,400 --> 00:46:18,620 Jadi di sini adalah contoh yang disebut penghubung. 1021 00:46:18,620 --> 00:46:20,950 >> Aku butuh badan halaman web saya di sini. 1022 00:46:20,950 --> 00:46:29,770 Dan di sini, sebuah equals href katakanlah HTTP://www.disney.com 1023 00:46:29,770 --> 00:46:35,420 dan website favorit saya, kita akan mengatakan. 1024 00:46:35,420 --> 00:46:38,550 Baiklah, jadi sangat berbahaya, user friendly halaman. 1025 00:46:38,550 --> 00:46:42,950 Jika saya sekarang pergi ke direktori saya daftar di sini dan membuka link.html, 1026 00:46:42,950 --> 00:46:44,780 kita memiliki teks hiper. 1027 00:46:44,780 --> 00:46:47,410 >> Dan memang, ini adalah di mana H di HTTP berasal dari. 1028 00:46:47,410 --> 00:46:51,580 Hypertext transfer protocol adalah tentang mentransfer teks 1029 00:46:51,580 --> 00:46:53,840 yang memiliki hyperlink ke sumber informasi lainnya. 1030 00:46:53,840 --> 00:46:58,210 Dan memang, di sini adalah akrab, jika retro link biru yang jika diklik, 1031 00:46:58,210 --> 00:47:02,607 benar-benar akan membawa saya ke Disney.com. 1032 00:47:02,607 --> 00:47:03,940 Sekarang, oh, yang segera keluar. 1033 00:47:03,940 --> 00:47:08,970 Baiklah, jadi sekarang, apa adalah beberapa implikasi dari ini? 1034 00:47:08,970 --> 00:47:11,610 >> Dan terus terang, dunia mulai untuk mendapatkan sedikit lebih akrab 1035 00:47:11,610 --> 00:47:15,090 dan juga menakutkan sedikit tetapi juga sedikit lebih 1036 00:47:15,090 --> 00:47:17,840 diri dipertahankan setelah Anda mulai untuk memahami hal-hal ini. 1037 00:47:17,840 --> 00:47:21,610 Karena kemungkinan besar, sebagian dari Anda, jika Anda pergi melalui folder Gmail spam atau bahkan 1038 00:47:21,610 --> 00:47:23,990 inbox Anda, Anda mungkin pernah mendapatkan semacam email 1039 00:47:23,990 --> 00:47:26,980 yang meminta Anda untuk mengubah Anda sandi mungkin atau mungkin memverifikasi 1040 00:47:26,980 --> 00:47:28,910 kredensial PayPal atau yang lainnya. 1041 00:47:28,910 --> 00:47:34,510 >> Dan pada kenyataannya, Anda mungkin telah menerima sesuatu yang mengatakan seperti klik disini 1042 00:47:34,510 --> 00:47:42,260 untuk mereset password PayPal Anda. 1043 00:47:42,260 --> 00:47:44,130 Dan sekarang, perhatikan, jika ini bukan Disney.com 1044 00:47:44,130 --> 00:47:51,600 tapi seperti badplace.com dan ulang, perhatikan bahwa teks di sini 1045 00:47:51,600 --> 00:47:53,710 bisa mengatakan apa-apa sama sekali. 1046 00:47:53,710 --> 00:47:55,260 Dan pada kenyataannya, ini hanya kata-kata. 1047 00:47:55,260 --> 00:48:04,610 Mengapa saya tidak benar-benar menjadi super berbahaya dan mengatakan http://www.paypal.com. 1048 00:48:04,610 --> 00:48:14,090 >> Klik di sini ulang PayPal Anda kata sandi dan sekarang reload. 1049 00:48:14,090 --> 00:48:16,220 Ini terlihat cukup sah, benar? 1050 00:48:16,220 --> 00:48:20,470 Maksudku, aku tidak akan mengklik email yang hanya mengatakan ini. 1051 00:48:20,470 --> 00:48:22,450 Tapi perhatikan dikotomi di sini. 1052 00:48:22,450 --> 00:48:26,880 Dikatakan www.paypal.com, dan pada kenyataannya, tunggu sebentar, 1053 00:48:26,880 --> 00:48:29,210 kita tahu bahwa Anda ingin s untuk keamanan. 1054 00:48:29,210 --> 00:48:35,450 Jadi sekarang, pergi ke www.paypal.com HTTPS, tetapi jika Anda belum pernah melakukan hal ini sebelumnya, 1055 00:48:35,450 --> 00:48:38,182 jangan biasakan dari melayang di atas link kecil di sini. 1056 00:48:38,182 --> 00:48:39,890 Dan sulit untuk melihat pada layar ada, 1057 00:48:39,890 --> 00:48:41,340 dan itu tidak semua yang mudah di sini. 1058 00:48:41,340 --> 00:48:43,615 Namun demikian di sini di sudut kecil kecil 1059 00:48:43,615 --> 00:48:45,740 melakukan browser sebenarnya memberitahu Anda bahwa kita akan 1060 00:48:45,740 --> 00:48:48,850 untuk badplace.com bukan Paypal.com. 1061 00:48:48,850 --> 00:48:51,620 Sekarang, di mana kita akan pergi dengan ini? 1062 00:48:51,620 --> 00:48:54,859 Semua contoh yang telah kami lakukan hari ini, kami telah dikodekan keras dan mengetik manual. 1063 00:48:54,859 --> 00:48:56,900 Web ini sangat menarik ketika Anda sulit 1064 00:48:56,900 --> 00:48:59,844 kode halaman web Anda sehingga konten yang statis dan tidak pernah berubah. 1065 00:48:59,844 --> 00:49:01,760 Tentu saja, semua kami situs web favorit saat ini, 1066 00:49:01,760 --> 00:49:04,470 apakah itu Gmail atau Twitter atau Facebook atau sejumlah orang lain 1067 00:49:04,470 --> 00:49:05,290 yang dinamis. 1068 00:49:05,290 --> 00:49:07,340 Mereka berubah Menanggapi masukan pengguna 1069 00:49:07,340 --> 00:49:08,840 seperti hasil pencarian Google. 1070 00:49:08,840 --> 00:49:12,415 >> Dan sebagainya Rabu, apa yang kita lakukan adalah kita meninggalkan HTML dan CSS pengenalan 1071 00:49:12,415 --> 00:49:14,290 di belakang kami dan kami mengambil begitu saja bahwa kita sekarang 1072 00:49:14,290 --> 00:49:16,640 tahu itu dan kami memperkenalkan bahasa pemrograman baru 1073 00:49:16,640 --> 00:49:19,050 disebut PHP, yang suka C, akan memberi kita 1074 00:49:19,050 --> 00:49:22,450 kekuatan untuk benar-benar membuat program bahwa diri mereka menghasilkan output. 1075 00:49:22,450 --> 00:49:25,900 Dalam hal ini, kita akan menggunakan PHP untuk menghasilkan dinamis web 1076 00:49:25,900 --> 00:49:27,340 halaman menggunakan bahasa baru ini. 1077 00:49:27,340 --> 00:49:28,989 Jadi lebih pada Rabu. 1078 00:49:28,989 --> 00:49:29,530 Lihat Anda kemudian. 1079 00:49:29,530 --> 00:49:33,130 1080 00:49:33,130 --> 00:49:37,380 >> [MUSIC PLAYING] 1081 00:49:37,380 --> 00:52:38,864