1 00:00:00,000 --> 00:00:00,127 2 00:00:00,127 --> 00:00:01,210 DAVID J. MALAN: Baiklah. 3 00:00:01,210 --> 00:00:02,160 Kita kembali. 4 00:00:02,160 --> 00:00:05,810 Jadi, matlamat sesi akhir ini adalah untuk memperkenalkan beberapa konsep 5 00:00:05,810 --> 00:00:09,290 tetapi juga memberi semua orang peluang yang untuk jenis menghulurkan jari anda 6 00:00:09,290 --> 00:00:11,270 dan benar-benar melakukan sesuatu sedikit hands-on. 7 00:00:11,270 --> 00:00:13,897 Matlamatnya tidak menjadikan adalah kita semua ke pemaju web 8 00:00:13,897 --> 00:00:16,230 dengan apa-apa tetapi benar-benar hanya untuk memberikan anda rasa beberapa 9 00:00:16,230 --> 00:00:21,750 daripada membina asas apa masuk ke dalam pengaturcaraan web dan web hari ini 10 00:00:21,750 --> 00:00:23,980 pembangunan, jadi sebelah statik things-- 11 00:00:23,980 --> 00:00:26,660 ada logik pengaturcaraan bahasa, hanya kandungan statik. 12 00:00:26,660 --> 00:00:29,660 Dan ia akan memberikan kita peluang untuk benar-benar melihat apa yang pelayan web adalah, 13 00:00:29,660 --> 00:00:34,140 lihat apa fail HTML, lihat apa yang ia adalah HTTP sebenarnya berkhidmat sehingga. 14 00:00:34,140 --> 00:00:38,600 Tetapi sebelum kita menyelam dalam, apa-apa kuasa ke belakang soalan tentang pengkomputeran awan 15 00:00:38,600 --> 00:00:43,922 atau keselamatan atau apa-apa diantara? 16 00:00:43,922 --> 00:00:44,890 >> Tidak? 17 00:00:44,890 --> 00:00:47,181 Baiklah, baik, mari kita melakukan ini, hanya dalam kes 18 00:00:47,181 --> 00:00:49,680 proses mendaftar untuk sesuatu yang mengambil masa beberapa minit. 19 00:00:49,680 --> 00:00:51,221 Kami akan biarkan ia melakukannya di latar belakang. 20 00:00:51,221 --> 00:00:56,860 Teruskan, jika anda boleh, ke URL ini sini-- c9.io. 21 00:00:56,860 --> 00:01:02,810 Ini adalah pihak ketiga service-- platform sebagai perkhidmatan, jika anda will-- 22 00:01:02,810 --> 00:01:05,190 yang akan menjemput anda untuk mendaftar untuk akaun, 23 00:01:05,190 --> 00:01:08,650 dan ia akan memberi kamu masing-masing akaun dalam awan yang dipanggil 24 00:01:08,650 --> 00:01:11,330 infrastruktur orang lain, syarikat bernama Cloud9. 25 00:01:11,330 --> 00:01:13,350 Tetapi apa yang baik tentang ini adalah bahawa mereka memberi anda 26 00:01:13,350 --> 00:01:15,990 perkiraan yang pembangunan dunia sebenar yang sebenar 27 00:01:15,990 --> 00:01:18,530 alam sekitar, walaupun dalam awan dan dalam pelayar web, 28 00:01:18,530 --> 00:01:21,175 dan kami akan menggunakan ini untuk benar-benar bereksperimen sedikit hari ini. 29 00:01:21,175 --> 00:01:27,116 30 00:01:27,116 --> 00:01:30,260 Dan kemudian pergi ke hadapan dan hanya mengemudi cara anda untuk proses pendaftaran 31 00:01:30,260 --> 00:01:32,630 jika anda boleh. 32 00:01:32,630 --> 00:01:36,080 Oleh itu, kita berlaku untuk menggunakan ini di dalam kelas Saya mengajar untuk semua pelajar-pelajar kita, 33 00:01:36,080 --> 00:01:39,140 di dalam kampus dan di luar sekarang, dan ia digantikan apa yang sejarah 34 00:01:39,140 --> 00:01:41,390 adalah perisian sebaliknya boleh dimuat turun. 35 00:01:41,390 --> 00:01:44,620 Jadi apa yang anda telah mendapat akses kepada adalah salah satu daripada mesin maya, 36 00:01:44,620 --> 00:01:46,460 pada dasarnya, yang saya diterangkan sebelum ini. 37 00:01:46,460 --> 00:01:50,260 Jadi syarikat ini Cloud9 mungkin sewa dari party-- ketiga sesungguhnya 38 00:01:50,260 --> 00:01:52,760 dalam kes ini, Google-- keseluruhannya sekumpulan mesin maya 39 00:01:52,760 --> 00:01:56,500 yang entah bagaimana mereka mencincang ke dalam ilusi pelayan individu 40 00:01:56,500 --> 00:01:58,610 bahawa setiap daripada kita mempunyai kawalan penuh ke atas. 41 00:01:58,610 --> 00:02:01,640 Ia tidak cukup tepat untuk mengatakan bahawa mereka mesin maya, 42 00:02:01,640 --> 00:02:04,550 walaupun, kerana apa yang Cloud9 sebenarnya menggunakan 43 00:02:04,550 --> 00:02:07,570 adalah teknologi yang agak baru dipanggil pengkontenaan. 44 00:02:07,570 --> 00:02:13,150 Dan biarlah saya merebut gambar ini di sini untuk cat gambar ini. 45 00:02:13,150 --> 00:02:16,540 >> bekas A, jika anda masih ingat gambar 46 00:02:16,540 --> 00:02:19,900 dari sebelum ini, sedikit lebih ringan berat daripada mesin maya. 47 00:02:19,900 --> 00:02:22,090 Malah, sedangkan lalu masa kita bercakap tentang terdapat 48 00:02:22,090 --> 00:02:25,170 menjadi operasi yang sistem dan hypervisor yang 49 00:02:25,170 --> 00:02:28,260 dan kemudian sistem operasi tetamu, tetamu sistem operasi, operasi tetamu 50 00:02:28,260 --> 00:02:30,940 sistem, di atas anda perkakasan fizikal, 51 00:02:30,940 --> 00:02:33,740 perbezaan dengan ini baru teknologi, pengkontenaan, 52 00:02:33,740 --> 00:02:37,290 adalah bahawa mereka semua entah bagaimana berkongsi sistem operasi yang sama. 53 00:02:37,290 --> 00:02:39,970 Tetapi mereka masih mencipta ilusi semua orang 54 00:02:39,970 --> 00:02:44,590 mempunyai mereka sendiri eksklusif hak pentadbiran dan fail 55 00:02:44,590 --> 00:02:45,400 pada pelayan. 56 00:02:45,400 --> 00:02:48,230 Tetapi ada perisian kurang dalam antara anda dan perkakasan. 57 00:02:48,230 --> 00:02:52,260 Hasil yang, dalam teori, prestasi yang lebih tinggi, 58 00:02:52,260 --> 00:02:55,470 kerana anda menggunakan atau membuang kurang sumber 59 00:02:55,470 --> 00:02:57,360 pada lapisan virtualisasi kononnya. 60 00:02:57,360 --> 00:02:59,420 Jadi ini dipanggil pengkontenaan oleh alam semula jadi 61 00:02:59,420 --> 00:03:02,920 melalui teknologi yang dipanggil buruh pelabuhan, yang sangat banyak datang ke sendiri. 62 00:03:02,920 --> 00:03:05,086 Dan ini adalah sesuatu yang jurutera di syarikat anda 63 00:03:05,086 --> 00:03:08,610 mungkin jenis jenis mula bercakap kira-kira tidak lama lagi jika mereka tidak mempunyai sudah, 64 00:03:08,610 --> 00:03:11,590 walaupun ada pasti tidak sebab untuk melompat ke atas apa-apa bandwagons. 65 00:03:11,590 --> 00:03:15,410 >> Maka dengan itu berkata, apa anda mungkin lihat sekarang 66 00:03:15,410 --> 00:03:22,670 adalah skrin yang kelihatan sedikit seperti ini. 67 00:03:22,670 --> 00:03:23,170 OKEY. 68 00:03:23,170 --> 00:03:25,260 Dan hanya memanggil saya lebih jika tidak. 69 00:03:25,260 --> 00:03:27,440 Dan jika so-- saya akan datang jika tidak. 70 00:03:27,440 --> 00:03:30,244 Teruskan dan klik yang besar ditambah untuk mewujudkan ruang kerja, 71 00:03:30,244 --> 00:03:31,660 dan anda akan dapat melihat skrin seperti ini. 72 00:03:31,660 --> 00:03:35,020 Anda boleh memanggil ruang kerja menamakan apa sahaja yang anda mahu sekarang. 73 00:03:35,020 --> 00:03:38,660 Dan hanya sebenarnya untuk kesederhanaan, pergi dan- baik, sebahagian dari kamu 74 00:03:38,660 --> 00:03:39,660 sudah mempunyai ruang kerja. 75 00:03:39,660 --> 00:03:47,050 Memanggilnya apa sahaja yang anda want-- perniagaan, Harvard, Khamis, apa sahaja yang anda suka. 76 00:03:47,050 --> 00:03:48,800 Anda tidak perlu keterangan. 77 00:03:48,800 --> 00:03:52,380 Anda boleh meninggalkan ia peribadi, melainkan anda sudah mempunyai sekumpulan ruang kerja. 78 00:03:52,380 --> 00:03:55,280 Jika anda terpaksa menjadikannya umum, itulah denda untuk tujuan hari ini. 79 00:03:55,280 --> 00:03:56,750 Di sini juga, adalah salah satu upsells. 80 00:03:56,750 --> 00:03:59,939 Anda akan mendapat satu ruang kerja swasta dengan lalai. Tetapi jika anda mahu lebih, 81 00:03:59,939 --> 00:04:00,980 anda perlu membayar untuk lebih. 82 00:04:00,980 --> 00:04:02,870 Jika tidak, mereka memaksa anda untuk membuat orang ramai kerja anda. 83 00:04:02,870 --> 00:04:05,600 Tetapi itu tidak mengapa, kerana mereka juga sasaran ini pada komuniti sumber terbuka 84 00:04:05,600 --> 00:04:07,700 untuk menggalakkan orang ramai sebenarnya bekerjasama. 85 00:04:07,700 --> 00:04:10,699 >> Dan perkara terakhir yang penting, walaupun, adalah, selepas anda pilih nama yang 86 00:04:10,699 --> 00:04:17,140 dan selepas anda memilih swasta atau awam, klik HTML5, ikon berwarna oren besar 87 00:04:17,140 --> 00:04:22,430 dua dari kiri, dan kemudian klik Buat Workspace. 88 00:04:22,430 --> 00:04:24,580 Dan ia akan mungkin mengambil satu minit atau lebih, 89 00:04:24,580 --> 00:04:26,540 tetapi anda kemudian akan mempunyai alam sekitar, sebaik sahaja anda 90 00:04:26,540 --> 00:04:30,544 berbuat demikian, yang kelihatan mengingatkan apa yang saya ada pada skrin di sini sekarang. 91 00:04:30,544 --> 00:04:33,210 Tetapi, sekali lagi, ia mungkin mengambil masa satu minit atau lebih untuk mendapatkan ke skrin ini 92 00:04:33,210 --> 00:04:34,770 sekali anda klik Cipta Workspace. 93 00:04:34,770 --> 00:04:37,936 Tetapi hanya tandakan saya lebih jika anda ingin saya untuk mengambil lihat pada apa-apa atau nasihat. 94 00:04:37,936 --> 00:04:40,191 95 00:04:40,191 --> 00:04:40,690 Baiklah. 96 00:04:40,690 --> 00:04:42,390 Jadi saya akan latar belakang ini buat masa ini. 97 00:04:42,390 --> 00:04:44,260 Telefon saya lebih jika anda seolah-olah mempunyai apa-apa masalah teknikal. 98 00:04:44,260 --> 00:04:46,210 Tetapi, sekali lagi, ia mungkin mengambil masa sedikit untuk untuk membuka. 99 00:04:46,210 --> 00:04:49,570 Dan mari kita pergi ke hadapan dan bercakap tentang apa yang ia sebenarnya bermaksud untuk membuat laman web, 100 00:04:49,570 --> 00:04:52,780 apa HTML, dan bagaimana semua ini sekarang interconnects kerana kita bermula 101 00:04:52,780 --> 00:04:54,730 untuk benar-benar menggunakan beberapa teknologi. 102 00:04:54,730 --> 00:04:58,310 Jadi ia ternyata bahawa saya boleh pergi pada Mac kecil saya di sini, 103 00:04:58,310 --> 00:05:01,650 membuka program mudah dipanggil TextEdit, atau pada Windows saya boleh 104 00:05:01,650 --> 00:05:04,480 sesuatu yang terbuka dipanggil Notepad.exe. 105 00:05:04,480 --> 00:05:08,260 Dan saya boleh hanya semata-mata melakukan sesuatu seperti this-- "hello, dunia." 106 00:05:08,260 --> 00:05:12,020 Dan kemudian saya boleh menyelamatkan ini sebagai hello.txt Jadi ada sihir di sana. 107 00:05:12,020 --> 00:05:15,200 Ini tidak ada kena mengena dengan web pengaturcaraan, tiada kaitan dengan HTML. 108 00:05:15,200 --> 00:05:16,790 Hanya membuat fail teks yang mudah. 109 00:05:16,790 --> 00:05:20,600 Tetapi ternyata bahawa web yang halaman adalah benar-benar hanya itu. 110 00:05:20,600 --> 00:05:24,020 Ia adalah satu teks fail teks yang mengandungi mudah bahawa anda mungkin menaip di papan kekunci anda, 111 00:05:24,020 --> 00:05:30,070 tetapi ia biasanya tetapi tidak semestinya berakhir dalam tidak .txt tetapi .html atau .htm. 112 00:05:30,070 --> 00:05:32,050 Dan anda tidak hanya menaip perkataan dalam fail. 113 00:05:32,050 --> 00:05:35,280 Anda sebenarnya perlu menggunakan perkara-perkara yang dipanggil tag atau, lebih umum, sesuatu 114 00:05:35,280 --> 00:05:37,190 dikenali sebagai bahasa markup. 115 00:05:37,190 --> 00:05:40,510 >> Jadi, saya akan sangat cepat menaip dan kemudian menjelaskan yang berikut. 116 00:05:40,510 --> 00:05:42,290 Saya akan pertama menaip ini, yang mengatakan, 117 00:05:42,290 --> 00:05:45,730 hey, pelayar, di sini datang halaman web yang ditulis dalam HTML. 118 00:05:45,730 --> 00:05:51,850 Dan kedua-dua perkara bersama-sama berkata, hey, pelayar, berikut adalah sesungguhnya HTML. 119 00:05:51,850 --> 00:05:55,790 Hey, pelayar, di sini datang kepala atau bahagian atas laman saya. 120 00:05:55,790 --> 00:05:59,900 Hey, pelayar, di dalam bahagian atas halaman saya, meletakkan tajuk iaitu, "hello, 121 00:05:59,900 --> 00:06:01,610 dunia. " 122 00:06:01,610 --> 00:06:08,370 Hey, pelayar, selepas ketua saya halaman, di sini datang badan halaman saya. 123 00:06:08,370 --> 00:06:12,170 Dan, hey, pelayar, badan saya halaman juga boleh berkata: "hello dunia." 124 00:06:12,170 --> 00:06:15,500 Jadi apa yang adalah butiran penting di sini? 125 00:06:15,500 --> 00:06:17,960 Ini adalah apa yang umumnya dipanggil pengisytiharan doc-jenis, 126 00:06:17,960 --> 00:06:20,190 dan, terus-terang, ia sedikit sukar untuk menghafal ini pada mulanya. 127 00:06:20,190 --> 00:06:21,481 Anda hanya jenis copy-paste. 128 00:06:21,481 --> 00:06:23,760 Ini adalah cara yang formal untuk mengatakan, hey, pelayar, 129 00:06:23,760 --> 00:06:28,030 Saya gunakan HTML versi 5 yang keluar agak baru-baru ini. 130 00:06:28,030 --> 00:06:31,380 Ia adalah satu mantera ajaib yang beberapa manusia dengan rasa miskin reka bentuk 131 00:06:31,380 --> 00:06:33,640 mengambil keputusan untuk meletakkan di paling atas fail. 132 00:06:33,640 --> 00:06:35,473 Walaupun ia adalah satu sedikit sukar difahami, itu sahaja 133 00:06:35,473 --> 00:06:38,250 ia ertinya- hey, pelayar, di sini datang dengan versi 5 HTML. 134 00:06:38,250 --> 00:06:41,741 >> Selebihnya ini telah bersama kami untuk beberapa waktu sekarang, sejarah, 135 00:06:41,741 --> 00:06:44,740 tetapi ia telah berkembang, dan ia mungkin telah mendapat sedikit lebih mudah. 136 00:06:44,740 --> 00:06:47,320 Perhatikan beberapa ciri-ciri daripada apa yang saya telah diserlahkan. 137 00:06:47,320 --> 00:06:49,890 Ada perkara-perkara ini dengan bersudut brackets-- kurungan kiri 138 00:06:49,890 --> 00:06:51,040 dan pendakap yang betul. 139 00:06:51,040 --> 00:06:52,490 Dan perhatikan simetri di sini. 140 00:06:52,490 --> 00:06:57,340 Dan dengan simetri, maksud saya, sama seperti saya mempunyai tag permulaan ini di sini atau tag terbuka 141 00:06:57,340 --> 00:07:01,560 jika anda akan, turun di sini saya mempunyai tag rapat atau tag penutup itulah 142 00:07:01,560 --> 00:07:06,460 yang berbeza hanya sejauh mana ia mempunyai ini slash pada awal perkataan 143 00:07:06,460 --> 00:07:07,360 HTML. 144 00:07:07,360 --> 00:07:09,360 Dan anda boleh berfikir ini kerana saya bersahaja 145 00:07:09,360 --> 00:07:12,280 mencadangkan sebelum ini, hey, pelayar, di sini datang beberapa HTML. 146 00:07:12,280 --> 00:07:16,060 Dan, sebaliknya, hey, pelayar, itu ia sebagai permulaan HTML-- dan akhir. 147 00:07:16,060 --> 00:07:18,440 >> Sementara itu hey, pelayar, di sini datang ketua halaman saya. 148 00:07:18,440 --> 00:07:20,140 Hey, pelayar, itu sahaja untuk kepala. 149 00:07:20,140 --> 00:07:22,240 Hey, pelayar, di sini adalah badan halaman saya. 150 00:07:22,240 --> 00:07:24,020 Hey, pelayar, itu sahaja untuk badan. 151 00:07:24,020 --> 00:07:26,940 Dan di dalam iaitu beberapa teks sewenang-wenangnya untuk sekarang. 152 00:07:26,940 --> 00:07:30,520 Dan di dalam kepala, sementara itu, beberapa sewenang-wenangnya tetapi tagged, 153 00:07:30,520 --> 00:07:34,410 jadi untuk bercakap, teks yang mengatakan, tajuk halaman saya akan "hello, dunia." 154 00:07:34,410 --> 00:07:37,470 Sekarang, buat masa ini, anda boleh menganggap pelayar yang 155 00:07:37,470 --> 00:07:41,762 mempunyai only-- atau, tetapi, laman web mempunyai hanya dua parts-- kepala dan badan. 156 00:07:41,762 --> 00:07:44,220 Dan kepala biasanya hanya seperti bar menu, barangan yang 157 00:07:44,220 --> 00:07:45,510 benar-benar hanya di bahagian paling atas. 158 00:07:45,510 --> 00:07:48,910 Dan badan adalah keberanian halaman, segala-galanya dalam yang segi empat tepat besar 159 00:07:48,910 --> 00:07:50,239 yang mengisi skrin. 160 00:07:50,239 --> 00:07:51,780 Jadi, saya akan pergi ke hadapan dan melakukan ini. 161 00:07:51,780 --> 00:07:54,400 Saya akan pergi ke hadapan dan klik Simpan, Fail Simpan. 162 00:07:54,400 --> 00:07:58,580 Dan saya akan menyelamatkan ini sebagai hello.html, 163 00:07:58,580 --> 00:08:00,870 dan saya hanya akan meletakkannya di desktop saya. 164 00:08:00,870 --> 00:08:03,520 Dan saya akan pergi ke Teruskan dan klik Simpan. 165 00:08:03,520 --> 00:08:05,806 Dan notice-- Mac saya di kurangnya adalah menjerit pada saya. 166 00:08:05,806 --> 00:08:07,180 Adakah anda pasti anda mahu melakukan ini? 167 00:08:07,180 --> 00:08:08,710 Dan saya akan berkata, ya, menggunakan HTML. 168 00:08:08,710 --> 00:08:10,400 Saya tahu yang lebih baik dalam kes ini. 169 00:08:10,400 --> 00:08:14,686 Dan sekarang saya akan pergi ke desktop saya di mana saya mempunyai fail ini tiba-tiba. 170 00:08:14,686 --> 00:08:16,060 Dan saya akan klik dua kali. 171 00:08:16,060 --> 00:08:18,268 Dan anda akan perasan bahawa, dengan lalai, Chrome dibuka. 172 00:08:18,268 --> 00:08:19,996 Ini kerana itulah penyemak imbas lalai saya. 173 00:08:19,996 --> 00:08:21,370 Dan ia hanya berkata, "hello, dunia." 174 00:08:21,370 --> 00:08:23,078 Tetapi ia berkata "hello, dunia "di dua tempat. 175 00:08:23,078 --> 00:08:23,979 Perhatikan bahagian atas kiri. 176 00:08:23,979 --> 00:08:25,020 Agak sukar untuk terlepas itu. 177 00:08:25,020 --> 00:08:26,180 Ia besar dan berani. 178 00:08:26,180 --> 00:08:30,690 Dan di mana lagi ia seolah-olah berkata, "hello, dunia"? 179 00:08:30,690 --> 00:08:31,470 >> PENONTON: Tab. 180 00:08:31,470 --> 00:08:33,100 >> DAVID J. MALAN: Ya, tab itu sendiri. 181 00:08:33,100 --> 00:08:35,159 Oleh itu, apabila saya berkata ketua halaman adalah segala-galanya top-- 182 00:08:35,159 --> 00:08:36,367 dan sesungguhnya ini adalah tajuk. 183 00:08:36,367 --> 00:08:37,710 Ia hanya dalam tab di sini. 184 00:08:37,710 --> 00:08:40,320 Dan saya boleh tarik tab ini keluar supaya tidak mengelirukan. 185 00:08:40,320 --> 00:08:43,360 Ini hanya satu tab single sekarang, dan sesungguhnya kami melihat "hello, dunia" 186 00:08:43,360 --> 00:08:45,970 di sini dan "hello, dunia" di sini. 187 00:08:45,970 --> 00:08:47,160 Jadi agak mudah. 188 00:08:47,160 --> 00:08:49,050 Tetapi ia juga agak mudah. 189 00:08:49,050 --> 00:08:50,440 Dan, sebenarnya, saya dizum masuk. 190 00:08:50,440 --> 00:08:53,272 Saya boleh menukar saiz fon hanya untuk membesarkan untuk akses. 191 00:08:53,272 --> 00:08:56,830 Tetapi mari sekarang kita buat sesuatu sedikit lebih menarik. 192 00:08:56,830 --> 00:08:59,760 >> Saya akan go-- whoops, mari saya kembali kepada fail teks saya. 193 00:08:59,760 --> 00:09:02,400 Saya akan kembali kepada saya fail teks, dan saya akan 194 00:09:02,400 --> 00:09:06,320 kepada perubahan ini dan mengatakan "Hello, Disney World." 195 00:09:06,320 --> 00:09:07,970 Simpan. 196 00:09:07,970 --> 00:09:10,919 Dan kembali kepada saya pelayar dan klik Reload. 197 00:09:10,919 --> 00:09:12,710 Dan kini, sudah tentu, ia berkata "Disney World." 198 00:09:12,710 --> 00:09:15,500 Dan saya akan buatan zum dalam hanya supaya lebih mudah untuk melihat. 199 00:09:15,500 --> 00:09:19,012 Jadi sekarang, malangnya, saya jenis mahu supaya- sebenarnya, itu adalah satu ciri Mac. 200 00:09:19,012 --> 00:09:21,720 Saya mahu klik pada Disney World dan pergi ke tempat seperti disney.com, 201 00:09:21,720 --> 00:09:23,290 tetapi itu tidak berfungsi. 202 00:09:23,290 --> 00:09:26,850 Jadi prinsip asas web adalah hiperpautan, pautan yang pergi ke tempat lain. 203 00:09:26,850 --> 00:09:28,390 Jadi bagaimana saya melakukannya? 204 00:09:28,390 --> 00:09:34,690 Well, saya hanya boleh mengatakan, "Hello, http://www.disney.com." 205 00:09:34,690 --> 00:09:36,110 Jimat ini. 206 00:09:36,110 --> 00:09:37,620 Tambah nilai. 207 00:09:37,620 --> 00:09:39,400 Tetapi ini juga, tidak boleh diklik. 208 00:09:39,400 --> 00:09:42,930 Dan apa yang baik di sini, walaupun ini tidak berfungsi lagi, 209 00:09:42,930 --> 00:09:45,930 adalah bahawa ia seolah-olah bahawa pelayar literal sahaja tidak 210 00:09:45,930 --> 00:09:46,950 apa yang saya beritahu kepada lakukan. 211 00:09:46,950 --> 00:09:50,110 Jadi, jika saya hanya menaip URL seperti ini, ia hanya akan menunjukkan kepada saya URL. 212 00:09:50,110 --> 00:09:54,270 Saya perlu menggunakan tag atau markup bahasa untuk benar-benar memberitahu 213 00:09:54,270 --> 00:09:55,621 pelayar untuk melakukan lebih banyak lagi. 214 00:09:55,621 --> 00:09:57,870 Jadi, saya akan pergi ke hadapan dan memadam ini untuk seketika. 215 00:09:57,870 --> 00:10:00,980 Dan saya akan berkata, hey, pelayar, mula berlabuh di sini, 216 00:10:00,980 --> 00:10:02,650 pautan jadi untuk bercakap. 217 00:10:02,650 --> 00:10:07,500 Dan hyper-rujukan, destinasi sauh itu, harus URL ini. 218 00:10:07,500 --> 00:10:08,750 Dan notis sebut harga saya. 219 00:10:08,750 --> 00:10:11,590 Saya boleh menggunakan petikan tunggal, juga, tetapi anda perlu konsisten, 220 00:10:11,590 --> 00:10:14,270 dan saya akan biasanya hanya menggunakan tanda petikan berganda untuk memastikan ia mudah. 221 00:10:14,270 --> 00:10:16,820 Perhatikan saya akan menutup tag. 222 00:10:16,820 --> 00:10:21,160 Dan maka di sini saya akan berkata, "Disney World." 223 00:10:21,160 --> 00:10:26,890 Dan sekarang saya memerlukan symmetry-- kurungan terbuka, / a, ditutup kurungan. 224 00:10:26,890 --> 00:10:28,090 >> Jadi apa yang saya diperkenalkan? 225 00:10:28,090 --> 00:10:30,100 Kami telah mempunyai tag Beberapa sudah. 226 00:10:30,100 --> 00:10:32,410 HTML, Ketua, Title, badan, semua tag, jadi untuk bercakap, 227 00:10:32,410 --> 00:10:34,280 dengan rakan-rakan terbuka dan tertutup. 228 00:10:34,280 --> 00:10:36,530 Tetapi notis, ini adalah jenis daripada berbeza. 229 00:10:36,530 --> 00:10:39,140 Ini adalah apa yang kita akan memanggil dalam HTML sifat. 230 00:10:39,140 --> 00:10:41,451 Dan sesuatu sifat itu hanya sepasang-nilai utama. 231 00:10:41,451 --> 00:10:43,950 Ini adalah satu perkara yang biasa dalam komputer science-- pasangan-nilai utama. 232 00:10:43,950 --> 00:10:45,770 Ia semacam alat perdagangan. 233 00:10:45,770 --> 00:10:47,040 Kunci dan nilai. 234 00:10:47,040 --> 00:10:49,390 perkataan A dan kemudian beberapa perkataan atau perkataan-perkataan lain. 235 00:10:49,390 --> 00:10:53,790 Dan dalam kes ini, yang penting adalah href, dan nilai ini adalah bahawa URL penuh. 236 00:10:53,790 --> 00:10:57,890 Dan apa atribut tidak adalah ia mempengaruhi tingkah laku tag. 237 00:10:57,890 --> 00:11:01,010 Dan dalam kes ini, kita perlu untuk mempengaruhi tingkah laku tag anchor, 238 00:11:01,010 --> 00:11:04,140 kerana kita perlu berlabuh link ini ke suatu tempat. 239 00:11:04,140 --> 00:11:06,960 Dan bagaimana anda melakukannya adalah melalui atribut. 240 00:11:06,960 --> 00:11:08,970 >> Jadi, saya akan pergi ke hadapan dan simpan fail sekarang. 241 00:11:08,970 --> 00:11:11,300 Kembali kepada pelayar dan tambah nilai saya. 242 00:11:11,300 --> 00:11:14,580 Dan, Voilà, kami kini mempunyai permulaan atas laman web yang sah. 243 00:11:14,580 --> 00:11:18,420 Super-mudah, tetapi jika saya pergi ke atas notis this-- di sudut bawah kiri, 244 00:11:18,420 --> 00:11:19,830 ia adalah super-kecil. 245 00:11:19,830 --> 00:11:21,730 Tetapi anda melihat www.disney.com. 246 00:11:21,730 --> 00:11:27,076 Dan jika saya klik, ini memang whisks aku pulang kepada disney.com. 247 00:11:27,076 --> 00:11:29,380 Sekarang, perkara yang ingin tahu di sini adalah bahawa ia tidak 248 00:11:29,380 --> 00:11:33,940 yang best-- URL yang paling dipasarkan, tetapi itulah denda kerana fail ini tidak 249 00:11:33,940 --> 00:11:35,360 wujud pada World Wide Web. 250 00:11:35,360 --> 00:11:39,740 Ia wujud sebagai fail setempat di nampaknya Pengguna saya directory-- / jharvard-- 251 00:11:39,740 --> 00:11:41,890 untuk John Harvard-- / desktop. 252 00:11:41,890 --> 00:11:42,634 Tetapi ia mempunyai URL. 253 00:11:42,634 --> 00:11:43,800 Ia hanya berlaku untuk menjadi tempatan. 254 00:11:43,800 --> 00:11:47,050 Malangnya, tiada seorang pun yang melawat ini, kerana jika anda menaip URL ini, 255 00:11:47,050 --> 00:11:49,980 anda akan dapat memberitahu pelayar anda, mencari hello.html fail dipanggil 256 00:11:49,980 --> 00:11:50,772 pada pemacu keras anda. 257 00:11:50,772 --> 00:11:53,271 Dan, sudah tentu, melainkan anda telah telah mengikuti bersama-sama secara manual, 258 00:11:53,271 --> 00:11:54,530 ia tidak akan wujud di sana. 259 00:11:54,530 --> 00:11:55,190 >> Jadi itulah denda. 260 00:11:55,190 --> 00:11:57,815 Kami masih memerlukan satu cara, akhirnya, untuk mendapatkan fail ini ke dalam web, 261 00:11:57,815 --> 00:12:01,180 tetapi mari kita mengusik selain beberapa implikasi keselamatan daripada apa yang kita hanya 262 00:12:01,180 --> 00:12:04,850 saw dan mengikatnya kembali ke awal perbincangan dari pagi ini. 263 00:12:04,850 --> 00:12:08,200 Ia ternyata bahawa, jika pelayar literal hanya melakukan 264 00:12:08,200 --> 00:12:12,560 apa yang saya beritahu kepada lakukan, dan ia seolah-olah menjadi kes bahawa tag anchor adalah 265 00:12:12,560 --> 00:12:17,380 dipengaruhi oleh nilai ini atribut href dipanggil 266 00:12:17,380 --> 00:12:20,810 tetapi ia memaparkan ini teks, ini seolah-olah 267 00:12:20,810 --> 00:12:26,520 membayangkan bahawa saya boleh meletakkan URL dalam kedua-dua tempat dan kemudian muat semula 268 00:12:26,520 --> 00:12:29,100 dan kini melihat URL dan pergi ke URL. 269 00:12:29,100 --> 00:12:32,680 Notis, jika saya pergi ke atas bahagian bawah kiri, sesungguhnya saya akan masih disney.com. 270 00:12:32,680 --> 00:12:38,340 >> Jadi, jika anda pernah phished-- P-H-I-S-H-E-D-- 271 00:12:38,340 --> 00:12:42,820 dengan salah satu daripada orang-orang e-mel palsu dari seperti PayPal bank anda, 272 00:12:42,820 --> 00:12:46,470 anda mungkin telah mendapat pautan di dalam e-mel yang anda membaca yang 273 00:12:46,470 --> 00:12:49,970 memberitahu anda untuk klik di sini untuk mengesahkan kata laluan atau mengesahkan tarikh lahir anda anda 274 00:12:49,970 --> 00:12:53,840 atau sosial atau sesuatu sosial kejuruteraan anda untuk mendedahkan 275 00:12:53,840 --> 00:12:54,920 maklumat. 276 00:12:54,920 --> 00:12:57,625 Well, saya jenis boleh mengambil kelebihan ini, tidak boleh saya? 277 00:12:57,625 --> 00:13:01,240 Saya boleh mengatakan sesuatu seperti, www.paypal.com. 278 00:13:01,240 --> 00:13:11,340 Dan bukannya disney.com, saya boleh pergi ke, seperti, badguy.com. 279 00:13:11,340 --> 00:13:12,850 Tambah nilai. 280 00:13:12,850 --> 00:13:16,620 Dan bagaimana mudah ialah ia untuk menipu, terutama pembaca bukan teknikal 281 00:13:16,620 --> 00:13:20,649 atau Sepintas lepas membaca pembaca daripada untuk klik 282 00:13:20,649 --> 00:13:23,940 link seperti ini, yang jika saya klik it-- Saya sebenarnya tidak mahu pergi badguy.com. 283 00:13:23,940 --> 00:13:25,398 Saya tidak tahu apa yang sebenarnya di sana. 284 00:13:25,398 --> 00:13:30,080 Jadi paypal.com, notis, adalah apa yang ia berkata ia akan, 285 00:13:30,080 --> 00:13:33,210 tetapi sudah tentu, jika saya melihat ke bawah super-rendah, ia sedikit kabur, 286 00:13:33,210 --> 00:13:34,230 tetapi ia mengatakan badguy.com. 287 00:13:34,230 --> 00:13:38,644 Itulah satu-satunya memberitahu sekarang bahawa saya akan ke tempat yang salah. 288 00:13:38,644 --> 00:13:41,560 Dan apabila saya berkata sebelum ini bahawa bank-bank benar-benar tidak perlu menggalakkan atau kereta api 289 00:13:41,560 --> 00:13:44,510 pengguna ke pautan klik, ini merupakan salah satu manifestasi daripadanya. 290 00:13:44,510 --> 00:13:45,430 Dan ianya mudah itu. 291 00:13:45,430 --> 00:13:48,120 Anda kini berada musuh jika anda melakukan sesuatu seperti ini 292 00:13:48,120 --> 00:13:51,000 dan cuba untuk menipu pengguna ke dalam melawat laman web anda. 293 00:13:51,000 --> 00:13:53,320 Tetapi buat masa ini, kami akan terus perkara yang baik dan bersih. 294 00:13:53,320 --> 00:13:55,640 Kami akan pergi ke hadapan dan putar balik perubahan ini. 295 00:13:55,640 --> 00:13:56,530 Muat semula halaman. 296 00:13:56,530 --> 00:13:57,740 Dan saya kembali ke disney.com. 297 00:13:57,740 --> 00:14:00,660 >> Mari kita lihat jika kita tidak boleh mengusik lebih ini selain sedikit. 298 00:14:00,660 --> 00:14:04,160 Jadi "hello, Disney World." 299 00:14:04,160 --> 00:14:05,950 Saya akan katakan di sini. 300 00:14:05,950 --> 00:14:08,220 Mungkin saya akan membuat beberapa bilik. 301 00:14:08,220 --> 00:14:12,730 "Kami berharap anda menikmati penginapan anda!" 302 00:14:12,730 --> 00:14:13,830 Simpan. 303 00:14:13,830 --> 00:14:15,850 Tambah nilai. 304 00:14:15,850 --> 00:14:19,010 Ia tidak rea-- itu bukan apa yang saya bertujuan, bukan? 305 00:14:19,010 --> 00:14:21,870 Maksud saya, jika saya merawat teks saya memfailkan seperti pemproses perkataan, 306 00:14:21,870 --> 00:14:24,894 apa yang kamu berharap akan berlaku di sini? 307 00:14:24,894 --> 00:14:27,060 Ya, saya rasa seperti ada perlu satu baris di sini, 308 00:14:27,060 --> 00:14:28,799 jadi ia berasa kereta dalam beberapa cara. 309 00:14:28,799 --> 00:14:31,090 Tetapi itu sebenarnya sengaja, kerana hanya seperti sebelum ini, 310 00:14:31,090 --> 00:14:33,381 pelayar hanya akan melakukan apa yang anda beritahu kepada lakukan. 311 00:14:33,381 --> 00:14:34,806 Saya tidak diceritakannya kepada mematahkan garis. 312 00:14:34,806 --> 00:14:37,930 Saya tidak memberitahu ia bergerak ke bawah, walaupun walaupun, intuitif, saya rasa seperti saya lakukan. 313 00:14:37,930 --> 00:14:39,805 Jadi ternyata kita perlu yang lebih markup sedikit, 314 00:14:39,805 --> 00:14:41,390 dan saya akan menetapkan ini seperti berikut. 315 00:14:41,390 --> 00:14:46,160 Saya akan kata pengantar ini pertama hello dengan apa yang dipanggil tag perenggan. 316 00:14:46,160 --> 00:14:48,920 Dan kemudian saya akan pergi ke hadapan dan balut hukuman lain ini 317 00:14:48,920 --> 00:14:54,370 di tag perenggan yang lain, walaupun mereka perenggan super pendek. 318 00:14:54,370 --> 00:14:55,930 Sekarang saya akan untuk menyelamatkan. 319 00:14:55,930 --> 00:14:57,160 Tambah nilai. 320 00:14:57,160 --> 00:14:59,070 Dan sekarang kita mempunyai yang ruang, dan kita semacam 321 00:14:59,070 --> 00:15:01,680 mempunyai semantik dua perenggan yang berasingan. 322 00:15:01,680 --> 00:15:05,290 >> Itu semua baik dan bagus, tetapi ia akan lebih baik untuk menambah imej ke laman ini, 323 00:15:05,290 --> 00:15:08,710 jadi saya akan pergi mencari Mickey Mouse pada Google Images. 324 00:15:08,710 --> 00:15:12,830 Dan hanya untuk keseronokan, Saya akan merebut imej ini. 325 00:15:12,830 --> 00:15:15,350 Saya akan pergi ke hadapan sekarang dan merebut URL imej ini, 326 00:15:15,350 --> 00:15:16,510 walaupun ada yang berbeza cara-cara untuk melakukan ini. 327 00:15:16,510 --> 00:15:18,520 Buat masa ini, saya hanya akan menyalin URL. 328 00:15:18,520 --> 00:15:24,770 Saya akan kembali ke dalam teks saya fail, dan saya akan katakan di sini, 329 00:15:24,770 --> 00:15:31,160 img src = quote unquote URL yang, super panjang. 330 00:15:31,160 --> 00:15:34,580 Dan kemudian kepercayaan kepada satu gambar adalah sedikit berbeza. 331 00:15:34,580 --> 00:15:38,640 Terdapat benar-benar ada tanggapan permulaan imej dan berakhir imej, 332 00:15:38,640 --> 00:15:40,630 seperti permulaan tag tag penutup. 333 00:15:40,630 --> 00:15:43,840 Jadi ia berasa sedikit pelik untuk saya semantik untuk melakukan ini, 334 00:15:43,840 --> 00:15:45,390 mempunyai tag penutup-imej. 335 00:15:45,390 --> 00:15:46,780 Ia bukan tidak betul. 336 00:15:46,780 --> 00:15:48,840 Ia sempurna betul, dan ia digalakkan, 337 00:15:48,840 --> 00:15:50,870 tetapi ada notasi trengkas. 338 00:15:50,870 --> 00:15:53,780 Saya boleh jenis serentak membuka dan menutup tag yang sama, 339 00:15:53,780 --> 00:15:55,510 dan yang akan membuat pelayar gembira. 340 00:15:55,510 --> 00:15:56,950 Jadi ia hanya sedikit lebih ringkas untuk perkara-perkara 341 00:15:56,950 --> 00:15:59,408 bahawa dari segi konsep benar-benar tidak melakukan masuk akal untuk bermula dan berakhir. 342 00:15:59,408 --> 00:16:01,190 Mereka hanya berada di sana, atau mereka tidak. 343 00:16:01,190 --> 00:16:06,020 >> Jadi, saya akan menyimpan ini dan kembali untuk "hello, dunia" halaman dan tambah nilai saya. 344 00:16:06,020 --> 00:16:09,880 Dan ia sedikit di luar kawalan, kerana imej yang sebenarnya 345 00:16:09,880 --> 00:16:12,210 sedikit besar, tetapi itu OK. 346 00:16:12,210 --> 00:16:13,710 Saya boleh mengubah saiz dalam program. 347 00:16:13,710 --> 00:16:14,900 Atau anda tahu apa. 348 00:16:14,900 --> 00:16:17,350 Hanya untuk menunjukkan, Saya akan benar-benar mengatakan 349 00:16:17,350 --> 00:16:21,760 bahawa lebar perkara ini perlu hanya menjadi 200 piksel, 200 titik. 350 00:16:21,760 --> 00:16:24,360 Biar saya pergi ke hadapan dan menyimpan dan tambah nilai, dan kini halaman 351 00:16:24,360 --> 00:16:25,690 kelihatan sedikit lebih munasabah. 352 00:16:25,690 --> 00:16:27,260 Tetapi perhatikan corak. 353 00:16:27,260 --> 00:16:30,030 Well, saya telah jenis mengajar kamu semua HTML dalam erti kata lain, sekurang-kurangnya 354 00:16:30,030 --> 00:16:33,531 dari segi konsep, kerana semua HTML adalah ini tags-- tag terbuka, tertutup tag, 355 00:16:33,531 --> 00:16:35,280 dan sifat-sifat yang mengubah suai tingkah laku mereka. 356 00:16:35,280 --> 00:16:38,380 Dan, nampaknya, setiap tag boleh mempunyai sifar atau satu 357 00:16:38,380 --> 00:16:43,005 atau dua atau lebih sifat-sifat, setiap yang melakukan sesuatu yang sedikit berbeza. 358 00:16:43,005 --> 00:16:44,380 Sekarang, bagaimana anda tahu apa yang wujud? 359 00:16:44,380 --> 00:16:46,800 Anda hanya mendengar seseorang seperti saya memberitahu anda apa yang wujud, 360 00:16:46,800 --> 00:16:50,860 atau anda hanya Google wujud tutorial pada HTML, dan ia benar-benar mudah ini. 361 00:16:50,860 --> 00:16:54,030 >> Sesungguhnya, apabila saya adalah undergrad yang tahun yang lalu dan belajar HTML, 362 00:16:54,030 --> 00:16:56,530 satu pengajaran matematik saya pembantu hanya menghabiskan 363 00:16:56,530 --> 00:16:59,600 sedikit masa ajar saya untuk seperti setengah jam, satu jam, 364 00:16:59,600 --> 00:17:00,660 dan kemudian saya dalam perjalanan saya. 365 00:17:00,660 --> 00:17:03,300 Saya dalam perjalanan saya ke arah membuat yang paling mengerikan laman web sebelum ini, 366 00:17:03,300 --> 00:17:05,549 yang, nampaknya, saya tidak mempunyai benar-benar berkembang di luar. 367 00:17:05,549 --> 00:17:09,849 Tetapi persoalannya adalah bahawa, sebaik sahaja anda memahami ini ideas-- mudah 368 00:17:09,849 --> 00:17:13,450 jika sukar difahami text-- tetapi ini mudah idea untuk memulakan pemikiran 369 00:17:13,450 --> 00:17:15,960 dan menutup pemikiran, menjaga segala-galanya baik seimbang, 370 00:17:15,960 --> 00:17:19,150 mencari sesuatu sehingga, mengubah tingkah laku tag itu, itu benar-benar semua 371 00:17:19,150 --> 00:17:20,079 ada padanya. 372 00:17:20,079 --> 00:17:28,140 Dan sebenarnya, jika kita pergi ke sesuatu seperti google.com-- sebenarnya, 373 00:17:28,140 --> 00:17:31,920 mari kita pergi tempat yang sedikit lebih reasonable-- stanford.edu. 374 00:17:31,920 --> 00:17:37,800 Dan saya akan pergi untuk Lihat, Pemaju, View Source. 375 00:17:37,800 --> 00:17:41,400 Ia hodoh, tetapi notice-- dan saya akan zum dalam notis 376 00:17:41,400 --> 00:17:43,432 beberapa perkara itu biasa sudah. 377 00:17:43,432 --> 00:17:45,140 Ada ini di sini, yang merupakan pelayar. 378 00:17:45,140 --> 00:17:46,800 Di sini datang HTML5. 379 00:17:46,800 --> 00:17:47,634 Ada HTML. 380 00:17:47,634 --> 00:17:49,550 Rupa-rupanya, ada satu menyifatkan bahawa saya tidak 381 00:17:49,550 --> 00:17:51,540 menggunakan yang menentukan bahasa halaman, 382 00:17:51,540 --> 00:17:54,380 dan ini boleh membantu dengan automatik terjemahan dan barangan seperti itu. 383 00:17:54,380 --> 00:17:55,546 Berikut adalah ketua halaman. 384 00:17:55,546 --> 00:17:57,790 Berikut adalah tajuk laman Stanford. 385 00:17:57,790 --> 00:17:59,832 Ada tag saya tidak bercakap tentang tag Meta YET. 386 00:17:59,832 --> 00:18:01,540 Ia hanya semacam maklumat latar belakang. 387 00:18:01,540 --> 00:18:04,210 Ia membantu dengan SEO, atau pengoptimuman enjin carian, 388 00:18:04,210 --> 00:18:06,320 atau Google-hasil carian atau sebagainya. 389 00:18:06,320 --> 00:18:09,029 Tetapi jika kita terus mencari, menyimpan mencari, di sini tag Badan. 390 00:18:09,029 --> 00:18:11,570 Dan ada tandan lain tag kami tidak bercakap tentang lagi. 391 00:18:11,570 --> 00:18:13,750 Tetapi Div adalah satu untuk Bahagian atas halaman. 392 00:18:13,750 --> 00:18:16,680 Ia seperti sebuah segi empat tepat yang tidak dapat dilihat jika anda jenis mahu mental 393 00:18:16,680 --> 00:18:20,160 membahagikan halaman anda ke dalam unit yang berbeza dalam talian. 394 00:18:20,160 --> 00:18:22,650 Dan kemudian banyak divs Saya lihat, sesuatu yang dinamakan Class, 395 00:18:22,650 --> 00:18:24,440 tetapi kita akan kembali kepada itu. 396 00:18:24,440 --> 00:18:26,200 >> Ini adalah Borang interesting--. 397 00:18:26,200 --> 00:18:27,730 Borang adalah seluruh web. 398 00:18:27,730 --> 00:18:30,310 Mana-mana petak carian anda pernah digunakan adalah borang. 399 00:18:30,310 --> 00:18:31,490 Dan, ya, mari kita sebenarnya melihat. 400 00:18:31,490 --> 00:18:32,790 Borang. 401 00:18:32,790 --> 00:18:33,910 Tindakan. 402 00:18:33,910 --> 00:18:37,660 Tindakan borang ini, atas apa jua sebab-sebab sejarah, adalah URL itu. 403 00:18:37,660 --> 00:18:38,840 Kaedah adalah "post". 404 00:18:38,840 --> 00:18:44,060 Ternyata bahawa permintaan HTTP boleh menggunakan kata kerja "mendapatkan," seperti yang kita lihat sebelum ini, 405 00:18:44,060 --> 00:18:45,070 atau "pos." 406 00:18:45,070 --> 00:18:47,030 Dan akan melihat perbezaan ini dalam seketika. 407 00:18:47,030 --> 00:18:48,363 Mari kita benar-benar melihat apa ini. 408 00:18:48,363 --> 00:18:49,830 Biar saya pergi semula ke laman Stanford. 409 00:18:49,830 --> 00:18:53,330 Apakah bentuk yang mereka cakapkan kira-kira, yang anda fikir? 410 00:18:53,330 --> 00:18:54,485 Apa yang melompat keluar pada anda? 411 00:18:54,485 --> 00:18:54,970 >> PENONTON: kotak Search. 412 00:18:54,970 --> 00:18:55,845 >> DAVID J. MALAN: Ya. 413 00:18:55,845 --> 00:18:58,410 Jadi sehingga di bahagian atas kanan di sini ialah kotak Carian ini. 414 00:18:58,410 --> 00:19:02,441 Dan itulah bagaimana mereka melaksanakan it-- yang tag itulah literal bentuk terbuka kurungan. 415 00:19:02,441 --> 00:19:03,940 Dan kemudian mari kita mencari sesuatu. 416 00:19:03,940 --> 00:19:09,220 Mari kita mencari teman yang daripada mine-- "Nick Parlante." 417 00:19:09,220 --> 00:19:11,380 Enter. 418 00:19:11,380 --> 00:19:13,750 Dan sudah tentu, ia pergi ke URL yang sedikit berbeza. 419 00:19:13,750 --> 00:19:15,140 Biar saya pergi ke sini. 420 00:19:15,140 --> 00:19:18,960 Mari kita mencari "kursus." 421 00:19:18,960 --> 00:19:19,460 Tak guna. 422 00:19:19,460 --> 00:19:20,484 Pergi ke URL yang berbeza. 423 00:19:20,484 --> 00:19:23,400 Jadi, Stanford menambah beberapa sihir bahawa mereka tidak menyerahkan aku kepada URL 424 00:19:23,400 --> 00:19:25,820 yang kita lihat dalam tindakan mengaitkan sana. 425 00:19:25,820 --> 00:19:32,480 Tetapi bentuk ini di sini dilaksanakan semata-mata dengan cara markup ini di sini, tag. 426 00:19:32,480 --> 00:19:35,710 Malah, di sini adalah input untuk jenis carian yang anda mahu. 427 00:19:35,710 --> 00:19:38,940 Berikut adalah input untuk satu lagi jenis carian. 428 00:19:38,940 --> 00:19:41,960 Berikut adalah input untuk rentetan itu sendiri. 429 00:19:41,960 --> 00:19:45,394 Dan supaya matlamat tidak untuk membalut fikiran kita sekitar semua tag 430 00:19:45,394 --> 00:19:46,060 tetapi hanya untuk melihat. 431 00:19:46,060 --> 00:19:48,300 Ia hanya membuka dan menutup tag dan mencari perkara. 432 00:19:48,300 --> 00:19:48,560 Yeah? 433 00:19:48,560 --> 00:19:48,920 Victoria? 434 00:19:48,920 --> 00:19:49,795 >> PENONTON: [didengar] 435 00:19:49,795 --> 00:19:51,925 436 00:19:51,925 --> 00:19:53,550 DAVID J. MALAN: Itu satu soalan yang baik. 437 00:19:53,550 --> 00:19:54,660 Itulah lebih sukar sedikit untuk melihat. 438 00:19:54,660 --> 00:19:56,300 Biar saya kembali kepada itu soalan dalam hanya beberapa minit 439 00:19:56,300 --> 00:19:59,000 apabila kita melihat sesuatu yang dinamakan cadar CSS, atau gaya melata, 440 00:19:59,000 --> 00:20:02,500 dan kita boleh cuba untuk membuat kesimpulan sebanyak dari halaman. 441 00:20:02,500 --> 00:20:08,090 Jadi, jika kita lihat pada google.com, mari kita lihat apa laman mereka kelihatan seperti. 442 00:20:08,090 --> 00:20:09,840 Anda akan they're-- yang comel hari ini. 443 00:20:09,840 --> 00:20:12,490 444 00:20:12,490 --> 00:20:12,990 OKEY. 445 00:20:12,990 --> 00:20:13,690 Semua dilakukan. 446 00:20:13,690 --> 00:20:15,260 Baiklah, jadi View Source. 447 00:20:15,260 --> 00:20:19,590 Anda akan berfikir Google mempunyai kod sumber benar-benar baik. 448 00:20:19,590 --> 00:20:24,970 Jadi, nampaknya, apa yang sedang berlaku di sini? 449 00:20:24,970 --> 00:20:27,880 Dan sebenarnya, ini tidak walaupun HTML. 450 00:20:27,880 --> 00:20:30,930 Ini adalah sesuatu yang dinamakan JavaScript. 451 00:20:30,930 --> 00:20:32,344 Dan mari kita terus pergi dan pergi. 452 00:20:32,344 --> 00:20:34,010 Saya tidak tahu di mana halaman bermula. 453 00:20:34,010 --> 00:20:37,240 Saya akan menggunakan Command F, terbuka kurungan HTML. 454 00:20:37,240 --> 00:20:38,200 Baiklah, ada ia. 455 00:20:38,200 --> 00:20:44,150 Saya mendapati permulaan halaman, dan terdapat begitu banyak barangan di sini. 456 00:20:44,150 --> 00:20:45,310 >> Apa yang sebenarnya berlaku? 457 00:20:45,310 --> 00:20:47,460 Nah, anda tahu apa, kita boleh membersihkan sehingga ini. 458 00:20:47,460 --> 00:20:52,109 Jika saya bukannya pergi ke ini Memeriksa bar alat, alat diagnostik khas ini, 459 00:20:52,109 --> 00:20:54,150 dan pergi untuk tidak Network, di mana kita terus pergi hari ini, 460 00:20:54,150 --> 00:20:56,420 tetapi jika saya pergi ke Elements, apa yang benar-benar baik 461 00:20:56,420 --> 00:20:59,990 adalah bahawa pelayar yang mempunyai banyak mata jauh lebih baik daripada saya. 462 00:20:59,990 --> 00:21:02,670 Dan pelayar boleh membaca bahawa keadaan huru-hara bagi sebuah laman web, 463 00:21:02,670 --> 00:21:04,700 bahawa mel HTML kita hanya melihat, dan ia boleh 464 00:21:04,700 --> 00:21:08,340 menghuraikan atau membaca dan menganalisis dan memformat semula 465 00:21:08,340 --> 00:21:09,910 dengan cara manusia mesra yang bagus. 466 00:21:09,910 --> 00:21:11,740 Jadi apa yang saya lihat sekarang dalam skrin ini di sini 467 00:21:11,740 --> 00:21:15,470 bawah Elements, kandungan yang sama, tetapi mereka telah berengsot segala-galanya, 468 00:21:15,470 --> 00:21:18,140 mereka telah berwarna, tetapi ia adalah teks yang sama 469 00:21:18,140 --> 00:21:19,620 yang saya muat turun dari pelayan. 470 00:21:19,620 --> 00:21:23,630 >> Dan apa yang baik ialah saya boleh melihat dalam badan, untuk notis instance--, 471 00:21:23,630 --> 00:21:26,480 halaman yang masih terdiri hanya kepala dan badan, 472 00:21:26,480 --> 00:21:28,660 dan saya secara hierarki boleh menyelam di sini. 473 00:21:28,660 --> 00:21:32,420 Perhatikan bahawa Google seolah-olah mempunyai untuk divs-- satu ini dan yang satu ini. 474 00:21:32,420 --> 00:21:33,310 Saya boleh berkembang itu. 475 00:21:33,310 --> 00:21:35,370 Ada sejumlah besar divs lain. 476 00:21:35,370 --> 00:21:36,900 Jadi ia adalah sebuah kompleks kecil. 477 00:21:36,900 --> 00:21:37,400 Tapi tunggu. 478 00:21:37,400 --> 00:21:40,970 Ini seolah-olah banyak lagi boleh dibaca, agak, daripada ini. 479 00:21:40,970 --> 00:21:43,840 Mengapa Google memalukan sendiri dengan hanya menghantar 480 00:21:43,840 --> 00:21:50,400 keadaan huru-hara yang besar ini kod beberapa jenis hanya untuk melaksanakan sesuatu 481 00:21:50,400 --> 00:21:53,640 yang kelihatan begitu mudah pada pandangan pertama? 482 00:21:53,640 --> 00:21:55,270 Seperti, mengapa mereka tidak menambah lebih banyak ruang? 483 00:21:55,270 --> 00:21:56,811 Mengapa mereka tidak tekan Enter seperti yang saya lakukan? 484 00:21:56,811 --> 00:21:59,110 Lihatlah bagaimana baik saya pada menulis laman web. 485 00:21:59,110 --> 00:22:00,680 Saya tekan Enter supaya bersungguh-sungguh. 486 00:22:00,680 --> 00:22:03,760 Saya berengsot jadi segala-galanya begitu cantik dan boleh dibaca. 487 00:22:03,760 --> 00:22:08,463 Mengapa Google tidak mengamalkan yang sama? 488 00:22:08,463 --> 00:22:11,409 >> PENONTON: [didengar] 489 00:22:11,409 --> 00:22:12,305 490 00:22:12,305 --> 00:22:13,180 DAVID J. MALAN: Baik. 491 00:22:13,180 --> 00:22:14,270 Sangat adil. 492 00:22:14,270 --> 00:22:16,650 Mereka tidak mempunyai beberapa orang di Google secara manual 493 00:22:16,650 --> 00:22:18,160 mengemas kini halaman rumah lagi. 494 00:22:18,160 --> 00:22:20,010 Ia bukan 1999 lagi. 495 00:22:20,010 --> 00:22:21,140 Jadi mereka mempunyai perisian. 496 00:22:21,140 --> 00:22:25,397 Mereka mempunyai alat-alat lain yang menjana dinamik mereka HTML. 497 00:22:25,397 --> 00:22:27,480 Sudah tentu, kod itu sendiri ditulis oleh manusia, 498 00:22:27,480 --> 00:22:30,220 tetapi realitinya adalah, ia agak adil untuk mengatakan, 499 00:22:30,220 --> 00:22:33,340 pelayar pasti tidak peduli bagaimana kemas kod adalah. 500 00:22:33,340 --> 00:22:35,940 Tetapi ada yang lebih sebab teknikal yang menarik 501 00:22:35,940 --> 00:22:42,580 bahawa Google mengedarkan HTML mereka kod dalam ceroboh itu, seolah-olah 502 00:22:42,580 --> 00:22:48,350 cara yang amat menggalakkan semua dibungkus bersama-sama dengan sangat sedikit way-- sangat sedikit 503 00:22:48,350 --> 00:22:51,274 di jalan format seperti yang saya lakukan. 504 00:22:51,274 --> 00:22:52,570 >> PENONTON: [didengar] 505 00:22:52,570 --> 00:22:53,528 >> DAVID J. MALAN: lebih cepat? 506 00:22:53,528 --> 00:22:54,040 Mengapa? 507 00:22:54,040 --> 00:22:55,680 Dan apa yang kamu katakan, Lydia? 508 00:22:55,680 --> 00:22:56,240 Lebih cepat? 509 00:22:56,240 --> 00:22:57,281 Mengapa lebih cepat? 510 00:22:57,281 --> 00:22:58,156 PENONTON: [didengar] 511 00:22:58,156 --> 00:23:00,522 512 00:23:00,522 --> 00:23:02,230 DAVID J. MALAN: Ada tiada ruang untuk membaca. 513 00:23:02,230 --> 00:23:02,730 Yeah. 514 00:23:02,730 --> 00:23:04,560 Jadi berfikir tentang apa yang ruang adalah. 515 00:23:04,560 --> 00:23:08,394 Jadi setiap aksara pada papan kekunci mengambil beberapa jumlah ruang untuk mewakili, 516 00:23:08,394 --> 00:23:10,560 sama ada secara fizikal, suka mengambil yang ruang yang banyak, 517 00:23:10,560 --> 00:23:13,250 atau entah bagaimana di bawahnya hood, yang memerlukan ingatan. 518 00:23:13,250 --> 00:23:15,740 Dan sebagai aside-- dan kami akan bercakap lebih lanjut mengenai tomorrow-- ini 519 00:23:15,740 --> 00:23:19,930 setiap watak pada papan kekunci biasanya memerlukan 8 bit, atau satu bait. 520 00:23:19,930 --> 00:23:23,360 Jadi corak 8 sifar atau orang-orang, atau hanya 1 bait, seperti yang kita 521 00:23:23,360 --> 00:23:24,720 manusia biasanya akan berkata. 522 00:23:24,720 --> 00:23:27,690 Jadi itu kecil, tetapi ia masih bukan sifar. 523 00:23:27,690 --> 00:23:29,940 Ia masih beberapa jumlah ruang. 524 00:23:29,940 --> 00:23:36,082 Jadi, jika seorang jurutera atau Google menjadi asas bar ruang hanya sekali, dan rasa 525 00:23:36,082 --> 00:23:38,540 Google-- ia super-popular-- menganggap bahawa satu bilion orang 526 00:23:38,540 --> 00:23:40,780 sila layari laman web mereka sehari, atau beberapa beberapa orang 527 00:23:40,780 --> 00:23:43,290 sila layari laman web yang bilion kali sehari, 528 00:23:43,290 --> 00:23:48,890 berapa banyak bait tambahan mempunyai yang jurutera perisian hanya kos Google 529 00:23:48,890 --> 00:23:51,310 dengan memukul bar atau ruang dia sekali? 530 00:23:51,310 --> 00:23:52,692 >> PENONTON: [didengar] 531 00:23:52,692 --> 00:23:54,150 DAVID J. MALAN: Tidak cukup yang buruk. 532 00:23:54,150 --> 00:23:57,070 Hanya satu kali bait bilion. 533 00:23:57,070 --> 00:23:57,871 jadi a-- 534 00:23:57,871 --> 00:23:59,120 PENONTON: 8 bilion gigabait. 535 00:23:59,120 --> 00:24:00,370 DAVID J. MALAN: Tidak 8 bilion. 536 00:24:00,370 --> 00:24:01,240 8 bilion bait. 537 00:24:01,240 --> 00:24:02,410 Tetapi 1 gigabit. 538 00:24:02,410 --> 00:24:04,080 1 gigabyte akan menjadi unit ukuran. 539 00:24:04,080 --> 00:24:08,240 Jika dia melakukan dua ruang, 2 gigabait. 540 00:24:08,240 --> 00:24:09,030 Tiga gigabait. 541 00:24:09,030 --> 00:24:09,530 Betul? 542 00:24:09,530 --> 00:24:11,860 Ia skala mahal. 543 00:24:11,860 --> 00:24:16,150 Dan sebagainya dalam kes-kes seperti Google, yang, diberikan, kes-kes yang melampau, 544 00:24:16,150 --> 00:24:21,450 terdapat isu-isu lain yang timbul hanya dengan membuat keputusan yang sangat berpatutan 545 00:24:21,450 --> 00:24:25,744 atau mengambil tindakan manusia sangat mudah, kerana ia mempunyai kesan dibesarkan ini. 546 00:24:25,744 --> 00:24:27,660 Jadi salah satu daripada sebab ini kelihatan begitu mampat 547 00:24:27,660 --> 00:24:30,660 adalah betul-betul seperti Victoria said-- ia hanya dihasilkan oleh komputer juga. 548 00:24:30,660 --> 00:24:31,900 Jadi ada masalah besar. 549 00:24:31,900 --> 00:24:33,309 Mari pelayar penyelesaiannya. 550 00:24:33,309 --> 00:24:35,350 Tetapi ia juga sengaja tidak mempunyai ruang yang banyak, 551 00:24:35,350 --> 00:24:36,766 kerana ruang tidak perlu. 552 00:24:36,766 --> 00:24:38,250 Dan ruang yang benar-benar memerlukan wang. 553 00:24:38,250 --> 00:24:40,670 >> Ia sama ada kos masa, kerana hanya untuk menolak 554 00:24:40,670 --> 00:24:44,670 yang lebih banyak data daripada ibu pejabat google.com kita hanya 555 00:24:44,670 --> 00:24:47,710 telah mendapat untuk mengambil beberapa jumlah masa, walaupun ia milisaat 556 00:24:47,710 --> 00:24:51,190 atau mikrosaat, tetapi yang menambah lebih banyak pengguna, atau lebih mungkin lagi, 557 00:24:51,190 --> 00:24:52,270 ia mungkin kos wang. 558 00:24:52,270 --> 00:24:54,690 Google mungkin bersambung dengan orang lain dalam dunia, satu 559 00:24:54,690 --> 00:24:56,398 dari orang-orang yang sedang melihat mata, dan jika mereka mempunyai 560 00:24:56,398 --> 00:24:59,880 beberapa jenis hubungan kewangan mana data mereka kos wang, 561 00:24:59,880 --> 00:25:01,730 mereka mungkin serta mengurangkan jumlah data 562 00:25:01,730 --> 00:25:04,530 mereka meludah pada sambungan internet mereka. 563 00:25:04,530 --> 00:25:07,630 >> Jadi perkara yang lucu, walaupun, akhirnya, atau mungkin perkara yang meyakinkan, 564 00:25:07,630 --> 00:25:11,030 adalah bahawa walaupun ini kelihatan betul-betul yang amat menggalakkan, pada akhir hari, 565 00:25:11,030 --> 00:25:16,750 ia masih prinsip-prinsip yang tepat sama seperti halaman ini sangat mudah di sini untuk HTML 566 00:25:16,750 --> 00:25:17,390 halaman. 567 00:25:17,390 --> 00:25:20,610 Jadi hanya untuk meringkaskan dan supaya anda mempunyai versi berkanun jika anda tidak 568 00:25:20,610 --> 00:25:25,900 berikut bersama-sama dengan pilihan di sini, sini mungkin yang paling mudah untuk membuat laman web, 569 00:25:25,900 --> 00:25:28,240 jadi sesuatu untuk bermain dengan mungkin kemudian. 570 00:25:28,240 --> 00:25:30,790 >> Nah, mari kita memperkenalkan beberapa idea-idea lain sekarang. 571 00:25:30,790 --> 00:25:33,420 Kita kira-kira untuk memperkenalkan sesuatu yang dipanggil tag gaya. 572 00:25:33,420 --> 00:25:38,110 Kami boleh menyesuaikan dgn mode halaman ini dengan cara yang lebih menarik. 573 00:25:38,110 --> 00:25:40,860 Jadi manakala e-mel HTML adalah tentang menandakan sehingga 574 00:25:40,860 --> 00:25:44,470 data, jenis menyatakan kepada pelayar bagaimana struktur data, 575 00:25:44,470 --> 00:25:48,110 mana untuk meletakkan ia, CSS, atau Cascading Style Sheets, 576 00:25:48,110 --> 00:25:52,640 adalah bahasa kedua yang umumnya mendapat berbaur dengan HTML 577 00:25:52,640 --> 00:25:55,670 seperti yang kita akan see-- tetapi kita boleh membersihkan bahawa sehingga dalam moment-- yang mengambil 578 00:25:55,670 --> 00:25:59,850 ia batu terakhir, dan ia stylizes ia. 579 00:25:59,850 --> 00:26:02,460 Ia mendapat warna tepat, fon saiz tepat, 580 00:26:02,460 --> 00:26:03,860 kedudukan yang tepat. 581 00:26:03,860 --> 00:26:06,510 Ia mengenai estetika atau memformat, bukan tentang 582 00:26:06,510 --> 00:26:08,330 data asas sendiri. 583 00:26:08,330 --> 00:26:11,390 Dan cara yang paling mudah untuk menunjukkan ini mungkin melalui teladan. 584 00:26:11,390 --> 00:26:15,320 Jadi, saya akan pergi ke atas ke fail teks yang mudah saya. 585 00:26:15,320 --> 00:26:17,970 Dan dalam hanya seketika, saya akan berjalan kita melalui proses 586 00:26:17,970 --> 00:26:19,360 untuk melakukan ini diri kita sendiri. 587 00:26:19,360 --> 00:26:23,310 >> Saya akan kembali ke fail saya di sini dan muat semula halaman hanya 588 00:26:23,310 --> 00:26:25,800 untuk mengesahkan apa yang kelihatan seperti. 589 00:26:25,800 --> 00:26:27,190 Itulah di mana kita berada di sekarang. 590 00:26:27,190 --> 00:26:31,170 Saya rasa seperti kanak-kanak akan menikmati mempunyai beberapa warna ke laman web ini. 591 00:26:31,170 --> 00:26:34,480 Jadi saya akan pergi ke sini ke dalam kepala halaman. 592 00:26:34,480 --> 00:26:38,130 Dan saya akan melakukan gaya, / gaya. 593 00:26:38,130 --> 00:26:44,060 Dan kemudian di dalam ini, saya akan untuk memberitahu badan page-- saya 594 00:26:44,060 --> 00:26:46,870 dan format ini, pada pandangan pertama, mungkin sedikit 595 00:26:46,870 --> 00:26:49,400 pelik tetapi konvensional. 596 00:26:49,400 --> 00:26:55,010 Saya akan mengatakan bahawa latar belakang warna halaman ini harus menjadi hijau. 597 00:26:55,010 --> 00:26:57,960 Dan ini adalah malangnya semacam tidak reka bentuk yang terbaik. 598 00:26:57,960 --> 00:27:00,710 Perhatikan bahawa sebelum ini dalam dunia HTML, 599 00:27:00,710 --> 00:27:03,190 Saya berkata bahawa sifat-sifat adakah ini pasangan nilai utama. 600 00:27:03,190 --> 00:27:05,760 Sesuatu yang sama quote unquote "sesuatu." 601 00:27:05,760 --> 00:27:08,810 Dalam dunia CSS, yang direka oleh beberapa orang yang berbeza, 602 00:27:08,810 --> 00:27:11,020 mereka mengambil keputusan bahawa, mereka dunia, pasangan kunci-nilai 603 00:27:11,020 --> 00:27:13,920 akan perkataan kolon sesuatu. 604 00:27:13,920 --> 00:27:15,220 Jadi ia adalah idea yang sama, walaupun. 605 00:27:15,220 --> 00:27:18,620 Ia mengaitkan nilai dengan beberapa utama yang entah bagaimana 606 00:27:18,620 --> 00:27:20,330 mempengaruhi kelakuan halaman ini. 607 00:27:20,330 --> 00:27:21,901 >> Dan anda mungkin boleh meneka. 608 00:27:21,901 --> 00:27:24,150 Apa ini mungkin akan lakukan walaupun anda tidak pernah 609 00:27:24,150 --> 00:27:27,867 melihat HTML atau CSS sebelum ini? 610 00:27:27,867 --> 00:27:29,450 PENONTON: Menukar warna latar belakang. 611 00:27:29,450 --> 00:27:30,560 DAVID J. MALAN: Ya, menukar warna latar belakang. 612 00:27:30,560 --> 00:27:33,280 Dan khususnya Warna latar belakang badan. 613 00:27:33,280 --> 00:27:36,290 Tetapi setakat yang badan sekarang adalah web 614 00:27:36,290 --> 00:27:38,870 page-- ia satu-satunya perkara bawah really-- bar tajuk 615 00:27:38,870 --> 00:27:40,870 ia mungkin akan mempengaruhi perkara yang sama. 616 00:27:40,870 --> 00:27:41,430 Jadi mari kita lihat. 617 00:27:41,430 --> 00:27:42,490 Mari kita menyimpan ini. 618 00:27:42,490 --> 00:27:44,310 Pergi di sini dan menambah nilai. 619 00:27:44,310 --> 00:27:46,140 Ia agak mengerikan. 620 00:27:46,140 --> 00:27:48,070 Dan apa yang berlaku di sini adalah kesan sampingan. 621 00:27:48,070 --> 00:27:49,850 Saya hanya memilih imej ini secara rawak. 622 00:27:49,850 --> 00:27:53,305 Mengapa tidak hijau meresapi belakang Mickey? 623 00:27:53,305 --> 00:27:54,180 PENONTON: [didengar] 624 00:27:54,180 --> 00:27:56,880 625 00:27:56,880 --> 00:27:57,880 DAVID J. MALAN: Tepat sekali. 626 00:27:57,880 --> 00:28:01,750 Ia ternyata bahawa imej, cantik banyak semua imej yang mungkin kita gunakan, 627 00:28:01,750 --> 00:28:03,670 semua rectangles-- segi empat tepat. 628 00:28:03,670 --> 00:28:07,710 Walaupun Mickey mempunyai beberapa keluk kepada dirinya sendiri dan mempunyai latar belakang, 629 00:28:07,710 --> 00:28:09,330 latar belakang yang telah menjadi sesuatu. 630 00:28:09,330 --> 00:28:10,280 Ia mempunyai untuk menjadi putih. 631 00:28:10,280 --> 00:28:11,910 Ia telah menjadi hitam atau sesuatu yang lain. 632 00:28:11,910 --> 00:28:13,650 Ia boleh menjadi telus. 633 00:28:13,650 --> 00:28:16,100 Dan sebenarnya, saya boleh membuka Mickey Mouse sini 634 00:28:16,100 --> 00:28:18,590 dalam program yang dikenali sebagai Photoshop atau sesuatu yang serupa 635 00:28:18,590 --> 00:28:21,176 dan mengubah semua putih yang latar belakang telus, 636 00:28:21,176 --> 00:28:22,550 jadi hijau itu akan bersinar melalui. 637 00:28:22,550 --> 00:28:25,980 Tetapi itu sesuatu yang saya perlu bertanya diri saya atau artis grafik 638 00:28:25,980 --> 00:28:28,130 atau seorang pereka pada saya syarikat, misalnya, 639 00:28:28,130 --> 00:28:31,490 yang perlu dilakukan, terutama kerana saya hanya dipinjam satu ini dari internet. 640 00:28:31,490 --> 00:28:33,030 Tetapi itu mengapa ini berlaku. 641 00:28:33,030 --> 00:28:34,980 >> Jadi apa lagi yang mungkin kita mahu lakukan? 642 00:28:34,980 --> 00:28:41,040 Well, kita mungkin mahu untuk mengatakan bahawa kita benar-benar berharap anda menikmati penginapan anda. 643 00:28:41,040 --> 00:28:44,150 Dan untuk penekanan, saya mahu untuk membuat ini kuat, 644 00:28:44,150 --> 00:28:48,310 dan saya akan berkata terbuka kuat dan menutup kuat dan kemudian menambah nilai. 645 00:28:48,310 --> 00:28:50,320 Dan ia adalah satu keras sedikit melihat pada projektor 646 00:28:50,320 --> 00:28:53,250 tetapi mungkin benar-benar sekarang melompat keluar pada anda sedikit lebih. 647 00:28:53,250 --> 00:28:56,180 Jadi anda boleh menambah huruf condong dalam ini cara, menghadap berani dengan cara ini. 648 00:28:56,180 --> 00:28:57,500 Kita boleh menukar warna. 649 00:28:57,500 --> 00:29:01,610 Malah, hanya untuk tendangan, Saya akan pergi ke hadapan dan melakukan ini. 650 00:29:01,610 --> 00:29:05,120 Saya tidak suka bagaimana saya perenggan dekat ini bersama-sama, 651 00:29:05,120 --> 00:29:06,870 jadi saya boleh melakukan sesuatu seperti ini. 652 00:29:06,870 --> 00:29:13,310 Saya akan memberitahu pelayar, berubah setiap tag perenggan untuk mempunyai, 653 00:29:13,310 --> 00:29:16,952 mari kita iaitu- sebenarnya, anda tahu apa, mari kita menyelaraskan teks-align, pusat. 654 00:29:16,952 --> 00:29:19,410 Dan sekali lagi, saya tahu ini hanya kerana seseorang yang diajar kepada saya 655 00:29:19,410 --> 00:29:21,118 atau saya melihat ia di dalam rujukan dalam talian. 656 00:29:21,118 --> 00:29:22,450 Jadi biarlah saya menyimpan ini. 657 00:29:22,450 --> 00:29:25,070 Dan, ah, sekarang saya telah berpusat imej di sana. 658 00:29:25,070 --> 00:29:28,490 Dan sebenarnya, anda tahu apa, jika Saya bergerak imej saya ke dalam perenggan yang 659 00:29:28,490 --> 00:29:34,510 tag-- supaya perenggan ketiga, walaupun ia tidak teks. 660 00:29:34,510 --> 00:29:36,917 Mari kita menyimpan itu dan menambah nilai. 661 00:29:36,917 --> 00:29:40,000 Sekarang halaman mula kelihatan jenis dengan- Maksud saya, ia masih cukup hodoh, 662 00:29:40,000 --> 00:29:43,180 tetapi sekurang-kurangnya ia kelihatan seperti saya menghabiskan dua minit dan bukannya satu minit 663 00:29:43,180 --> 00:29:43,950 menjadikannya. 664 00:29:43,950 --> 00:29:47,200 >> Dan sebagainya, secara berperingkat, boleh kita buat perubahan estetik sekarang untuk halaman? 665 00:29:47,200 --> 00:29:50,860 Saya tidak benar-benar mengubah data dalam halaman lain daripada menambah perkataan benar-benar. 666 00:29:50,860 --> 00:29:52,650 Saya telah menambah metadata, jika anda akan. 667 00:29:52,650 --> 00:29:54,830 Hey, pelayar, membuat perkataan "benar-benar" berani. 668 00:29:54,830 --> 00:29:56,940 Tetapi data yang tidak kukuh. 669 00:29:56,940 --> 00:29:57,830 Itulah metadata. 670 00:29:57,830 --> 00:29:59,410 data ini adalah "benar-benar." 671 00:29:59,410 --> 00:30:02,200 Oleh itu, kita masih mempunyai beberapa konsep yang sama seperti sebelum ini. 672 00:30:02,200 --> 00:30:05,990 Kini, sudah tentu, ini bukan di web, jadi saya akan melakukan satu langkah terakhir di sini. 673 00:30:05,990 --> 00:30:10,300 >> Saya akan pergi ke hello.html dan hanya menyerlahkan dan menyalin ini. 674 00:30:10,300 --> 00:30:12,285 Dan sekarang saya akan pergi ke Cloud9, yang 675 00:30:12,285 --> 00:30:13,910 Saya akan berjalan anda melalui dalam hanya seketika. 676 00:30:13,910 --> 00:30:17,080 Dan kemungkinan besar anda tidak lama lagi akan menjadi, jika belum, pada skrin seperti ini. 677 00:30:17,080 --> 00:30:21,080 Dan biarlah saya hanya memberikan yang cepat lawatan ke apa Cloud9 sebenarnya. 678 00:30:21,080 --> 00:30:26,590 Jadi sekali lagi awan 9 perkhidmatan berasaskan awan ini 679 00:30:26,590 --> 00:30:30,580 yang memberikan anda dan saya ilusi mempunyai mesin maya kita sendiri 680 00:30:30,580 --> 00:30:33,090 dalam awan, dari segi teknikal bekas dalam awan, 681 00:30:33,090 --> 00:30:35,160 yang kita ada penuh keistimewaan pentadbiran untuk. 682 00:30:35,160 --> 00:30:37,130 Jadi, dalam teori, tidak ada yang lain di dunia ini mempunyai 683 00:30:37,130 --> 00:30:39,152 akses ke skrin Saya melihat sekarang, 684 00:30:39,152 --> 00:30:40,860 kecuali mungkin rakyat yang menjalankan laman web ini, 685 00:30:40,860 --> 00:30:43,470 kerana teknikal mereka mempunyai akses fizikal dan sebagainya. 686 00:30:43,470 --> 00:30:44,740 >> Jadi, apa yang kita lihat dalam persekitaran ini? 687 00:30:44,740 --> 00:30:46,230 Saya akan zum keluar, kerana ia sedikit kecil. 688 00:30:46,230 --> 00:30:48,104 Dan biarlah saya menunjukkan lebih di sini hanya untuk seketika. 689 00:30:48,104 --> 00:30:53,210 Pada sebelah kiri saya dan anda skrin, ada pelayar fail di sebelah kiri. 690 00:30:53,210 --> 00:30:55,362 Jadi sama dalam semangat untuk Mac OS dan Windows. 691 00:30:55,362 --> 00:30:57,070 Ini semua adalah daripada fail dengan akaun saya. 692 00:30:57,070 --> 00:30:59,250 Dan secara lalai, jika anda akaun adalah seperti saya, 693 00:30:59,250 --> 00:31:05,090 anda akan melihat atau tidak lama lagi melihat helloworld.html dan readme.md. 694 00:31:05,090 --> 00:31:07,950 Di sini di sebelah kanan, ini adalah mana fail teks saya akan pergi. 695 00:31:07,950 --> 00:31:11,620 Jika anda pernah menggunakan Microsoft Word atau Notepad atau TextEdit, 696 00:31:11,620 --> 00:31:14,100 ini adalah perkataan editing saya fail akan pergi. 697 00:31:14,100 --> 00:31:16,540 Dan kemudian yang paling sukar difahami ciri persekitaran ini 698 00:31:16,540 --> 00:31:20,100 bahawa kita tidak akan benar-benar perlu untuk menggunakan adalah turun di sini dipanggil Window Terminal. 699 00:31:20,100 --> 00:31:23,390 Jika anda telah menggunakan DOS dari tadi, ini adalah Linux 700 00:31:23,390 --> 00:31:25,450 atau yang setaraf Linux DOS. 701 00:31:25,450 --> 00:31:28,190 Ia adalah satu interface-- berasaskan teks ada klik tetikus, tidak mengheret. 702 00:31:28,190 --> 00:31:30,770 Apa yang anda boleh lakukan adalah menaip arahan, tetapi mereka arahan 703 00:31:30,770 --> 00:31:34,400 boleh membuat fail, memindahkan fail, terbuka direktori, direktori yang dekat, 704 00:31:34,400 --> 00:31:35,740 melakukan apa-apa beberapa perkara. 705 00:31:35,740 --> 00:31:38,060 Tetapi untuk sekarang, kita akan hanya menghabiskan masa kami di sini. 706 00:31:38,060 --> 00:31:39,050 >> Dan jadi mari kita melakukan ini. 707 00:31:39,050 --> 00:31:41,008 Jika anda berada dalam ini alam sekitar, yang anda perlu 708 00:31:41,008 --> 00:31:45,900 menjadi jika anda mencipta ruang kerja sudah, teruskan dan hanya pergi ke atas 709 00:31:45,900 --> 00:31:48,690 ke Fail, New seketika. 710 00:31:48,690 --> 00:31:51,740 Dan yang akan memberi anda yang baru tab di sini di tengah-tengah. 711 00:31:51,740 --> 00:31:54,250 Dan saya just-- dan mari kita teruskan niat ini. 712 00:31:54,250 --> 00:31:59,910 Mari kita pergi ke hadapan dan jangan Fail, Simpan dan pergi ke depan dan memanggilnya hello.html, 713 00:31:59,910 --> 00:32:02,740 jangan dikelirukan dengan helloworld.html, yang 714 00:32:02,740 --> 00:32:06,910 datang dengan akaun percuma anda yang baru, yang hanya fail sampel. 715 00:32:06,910 --> 00:32:11,020 Anda akan melihat ia tiba-tiba muncul, kemungkinan besar di sebelah kiri, 716 00:32:11,020 --> 00:32:12,810 dan tab itu masih lagi terbuka. 717 00:32:12,810 --> 00:32:21,300 Dan biarlah saya menggalakkan anda sekarang untuk mencipta fail ini atau beberapa varian itu. 718 00:32:21,300 --> 00:32:24,607 Dan jika anda tidak boleh agak melihatnya pada skrin, ini adalah sama dengan slaid 719 00:32:24,607 --> 00:32:26,190 bahawa anda mungkin mempunyai dalam tab lain. 720 00:32:26,190 --> 00:32:29,296 >> Jadi ringkasnya, membuat laman web pertama anda, menyimpannya, dan kemudian dalam hanya seketika, 721 00:32:29,296 --> 00:32:31,170 Saya akan menunjukkan kepada anda bagaimana anda sebenarnya boleh melihat ini. 722 00:32:31,170 --> 00:32:32,970 Tetapi menukar sekurang-kurangnya satu perkara. 723 00:32:32,970 --> 00:32:35,400 Tukar helloworld untuk sesuatu pilihan anda sendiri, 724 00:32:35,400 --> 00:32:39,821 supaya anda yakin bahawa itu anda memfailkan dan tidak ada seorang pun yang saya buat. 725 00:32:39,821 --> 00:32:40,320 Baiklah. 726 00:32:40,320 --> 00:32:43,804 Dan apabila anda ready-- tidak rush-- apabila anda sudah bersedia, 727 00:32:43,804 --> 00:32:46,220 teruskan dan menyimpan fail setelah anda membuat perubahan ini. 728 00:32:46,220 --> 00:32:49,540 Dan jika anda klik butang up berjalan atas, ini 729 00:32:49,540 --> 00:32:53,610 perlu membuka tab baru yang akan memberitahu anda apa URL anda boleh melawat fail anda di, 730 00:32:53,610 --> 00:32:56,380 tetapi ia mungkin mengambil masa untuk quote unquote "mula Apache," yang 731 00:32:56,380 --> 00:32:58,820 adalah nama pelayan web. 732 00:32:58,820 --> 00:33:02,430 Jadi berhati-hati untuk melakukan perkara apa yang dalam fail akhirnya. 733 00:33:02,430 --> 00:33:04,610 Jadi sekarang, saya akan zum masuk. 734 00:33:04,610 --> 00:33:07,780 Jika saya mula menaip terbuka kurungan HTML, notis 735 00:33:07,780 --> 00:33:09,650 ia mendorong saya untuk menyelesaikan pemikiran saya. 736 00:33:09,650 --> 00:33:13,750 Dan jika saya selesai pemikiran saya, ia secara automatik memberikan saya tag penutup. 737 00:33:13,750 --> 00:33:17,190 Tetapi jangkaan itu adalah kemudian saya akan melanda Masukkan, dan kemudian bergerak dalam sana 738 00:33:17,190 --> 00:33:21,180 dan jangan pergi dalam dan di kemudian saya melakukan badan di dalam. 739 00:33:21,180 --> 00:33:24,430 Dan ia sedikit pelik pada mulanya, kerana ia melakukan kerja untuk anda, 740 00:33:24,430 --> 00:33:27,110 tetapi sedar bahawa akhirnya ia menjimatkan ketukan kekunci. 741 00:33:27,110 --> 00:33:30,500 Dan sebenarnya, ciri yang sangat biasa pengaturcaraan persekitaran teknologi maklumat hari ini 742 00:33:30,500 --> 00:33:33,260 kedua-dua untuk pembangunan web seperti ini manakala program sebenar, 743 00:33:33,260 --> 00:33:36,960 yang kita akan bercakap tentang esok, adalah ciri-ciri auto-lengkap, 744 00:33:36,960 --> 00:33:39,710 perkara-perkara yang hanya membenarkan pengaturcara atau pereka 745 00:33:39,710 --> 00:33:42,010 menaip lebih sedikit ketukan kekunci untuk mencapai perkara yang sama. 746 00:33:42,010 --> 00:33:43,176 Kadang-kadang ia adalah baik, walaupun. 747 00:33:43,176 --> 00:33:44,560 Kadang-kadang ia hanya menjengkelkan. 748 00:33:44,560 --> 00:33:49,290 749 00:33:49,290 --> 00:33:54,010 Dan, sekali lagi, apabila anda telah disalin slaid atau beberapa varian itu, 750 00:33:54,010 --> 00:33:57,360 anda boleh klik butang Run sehingga atas. 751 00:33:57,360 --> 00:33:59,910 Dan kemudian di bahagian bawah tingkap, anda akan dimaklumkan 752 00:33:59,910 --> 00:34:04,290 apa URL anda boleh melawat laman web anda. 753 00:34:04,290 --> 00:34:08,790 Mine, misalnya, adalah di business-daharvard.c9users.io 754 00:34:08,790 --> 00:34:11,480 dan sebagainya. 755 00:34:11,480 --> 00:34:14,580 Baiklah, jadi, mari me-- apa-apa soalan? 756 00:34:14,580 --> 00:34:19,460 Sebarang pertanyaan lain mengenai hanya mendapat ini bekerja sebelum kita menambah ciri-ciri? 757 00:34:19,460 --> 00:34:21,692 Dan biarlah saya mencadangkan, hanya untuk mendapatkan orang comfortable-- 758 00:34:21,692 --> 00:34:24,400 kerana ia adalah satu perkara yang hanya copy-paste membuta tuli apa yang saya lakukan. 759 00:34:24,400 --> 00:34:27,177 Tetapi hanya supaya orang bertumbuk dengan sekurang-kurangnya satu tugasan, 760 00:34:27,177 --> 00:34:28,510 Saya akan menghidupkan muzik beberapa. 761 00:34:28,510 --> 00:34:32,630 Saya akan mencadangkan senarai perkara yang anda berpotensi boleh menambah. 762 00:34:32,630 --> 00:34:34,086 Dan anda pasti boleh menggunakan Google. 763 00:34:34,086 --> 00:34:36,210 Dan mengapa tidak kita hanya mencadangkan bahawa anda cuba untuk menyelesaikan 764 00:34:36,210 --> 00:34:38,710 sekurang-kurangnya satu masalah tertentu di sini. 765 00:34:38,710 --> 00:34:45,090 Jadi dari segi tag, biarlah saya menggunakan semula ini di sini. 766 00:34:45,090 --> 00:34:48,280 >> Sebenarnya, saya meletakkan ia dalam bentuk teks. 767 00:34:48,280 --> 00:35:02,380 Katakan bahawa di antara kita mungkin tag digunakan di sini adalah beberapa tag di sini. 768 00:35:02,380 --> 00:35:06,090 Kami telah melihat tag perenggan. 769 00:35:06,090 --> 00:35:07,850 Sekarang ia akan auto-lengkap. 770 00:35:07,850 --> 00:35:12,220 tag perenggan, tag anchor. 771 00:35:12,220 --> 00:35:15,250 Katakan anda mahu membuat sesuatu yang lebih besar, 772 00:35:15,250 --> 00:35:19,480 jadi anda mungkin like-- tag span boleh membantu. 773 00:35:19,480 --> 00:35:23,010 Nah, anda mungkin memerlukan bantuan untuk itu dalam hanya seketika. 774 00:35:23,010 --> 00:35:24,830 Kami telah melihat div. 775 00:35:24,830 --> 00:35:26,170 Anda akan melihat ada meja. 776 00:35:26,170 --> 00:35:27,928 Terdapat sesuatu yang dinamakan tr, td. 777 00:35:27,928 --> 00:35:30,736 778 00:35:30,736 --> 00:35:32,860 Th, td. 779 00:35:32,860 --> 00:35:34,770 Kembali kepada itu dalam seketika. 780 00:35:34,770 --> 00:35:36,590 Apa lagi yang mungkin berguna? 781 00:35:36,590 --> 00:35:38,310 Ada yang kuat. 782 00:35:38,310 --> 00:35:43,640 Ada penekanan, atau sebaliknya em. 783 00:35:43,640 --> 00:35:50,110 There's-- apa lagi mungkin anda suka di sini? 784 00:35:50,110 --> 00:35:51,930 Nah, kita akan mengambil melihat bahawa bersama-sama. 785 00:35:51,930 --> 00:35:53,230 Bentuk, yang kita lihat. 786 00:35:53,230 --> 00:35:54,130 Ada bentuk. 787 00:35:54,130 --> 00:35:56,500 Ada input dan beberapa yang lain. 788 00:35:56,500 --> 00:35:58,924 789 00:35:58,924 --> 00:36:00,090 Baiklah, jadi mari kita buat ini. 790 00:36:00,090 --> 00:36:02,330 Untuk menjawab Victoria soalan, biarlah saya terlebih dahulu 791 00:36:02,330 --> 00:36:05,020 pastikan bahawa semua orang mampu untuk mendapatkan kerja hello mereka. 792 00:36:05,020 --> 00:36:06,900 Maka biarlah saya memperkenalkan pasangan idea lain. 793 00:36:06,900 --> 00:36:09,209 Kemudian kami akan memberitahu orang menyelesaikan beberapa masalah sendiri. 794 00:36:09,209 --> 00:36:11,500 Maka kita sebenarnya akan kembali itu tanggapan borang, 795 00:36:11,500 --> 00:36:14,950 dan kami akan benar-benar semula melaksanakan- bersama-sama antara muka depan, 796 00:36:14,950 --> 00:36:16,450 jadi untuk bercakap, untuk Google sendiri. 797 00:36:16,450 --> 00:36:19,700 Kami akan menggunakan Google sebagai hujung belakang dan membiarkan mereka bekerja keras, mencari, 798 00:36:19,700 --> 00:36:22,760 tetapi kami akan mencipta bahagian hadapan Google dan borang carian 799 00:36:22,760 --> 00:36:24,520 bahawa mereka ada di halaman rumah mereka sendiri. 800 00:36:24,520 --> 00:36:27,050 Dan dengan itu kita akan kembali kepada tag dalam hanya seketika. 801 00:36:27,050 --> 00:36:30,270 >> Jadi ini adalah apa yang saya dicadangkan hanya sebentar tadi. 802 00:36:30,270 --> 00:36:33,940 Kita boleh menambah penyesuaian dgn mode kepada halaman dalam tag gaya ini, 803 00:36:33,940 --> 00:36:36,950 dan kita boleh menyesuaikan dgn mode latar belakang warna, penjajaran teks, 804 00:36:36,950 --> 00:36:39,000 sama ada pusat atau kiri atau kanan. 805 00:36:39,000 --> 00:36:41,630 Tetapi dengan cepat yang anda lakukan mencari atau pereka web 806 00:36:41,630 --> 00:36:44,060 akan mendapati bahawa ini menjadi sedikit dikawal, 807 00:36:44,060 --> 00:36:48,330 kerana anda melakukan apa yang dipanggil kandungan mencampurkan 808 00:36:48,330 --> 00:36:50,120 dengan persembahan itu. 809 00:36:50,120 --> 00:36:53,756 Anda mencampurkan data anda dan estetika itu. 810 00:36:53,756 --> 00:36:56,380 Dan sebenarnya, jika anda menganggap apa yang akan berlaku dalam satu time-- 811 00:36:56,380 --> 00:36:58,350 ini adalah yang sangat kecil halaman web, sudah tentu. 812 00:36:58,350 --> 00:37:01,590 Tetapi jika saya menambah kandungan ke laman ini dan saya menambah gaya ke laman ini, 813 00:37:01,590 --> 00:37:04,650 halaman dengan cepat mendapat lagi dan lagi dan lagi. 814 00:37:04,650 --> 00:37:07,510 Dan menganggap bahawa saya mahu mempunyai laman web kedua yang 815 00:37:07,510 --> 00:37:09,010 berkongsi beberapa sifat-sifat ini. 816 00:37:09,010 --> 00:37:12,350 Katakan laman web kedua saya untuk saya site-- juga, saya mahu pusat segala-galanya, 817 00:37:12,350 --> 00:37:14,960 dan saya juga mahu segala-galanya dengan latar belakang hijau. 818 00:37:14,960 --> 00:37:17,940 Saya cukup banyak akan perlu menyalin dan tampal beberapa ayat-ayat ini 819 00:37:17,940 --> 00:37:20,730 ke dalam fail kedua, yang berasa halus. 820 00:37:20,730 --> 00:37:22,030 Ia akan menyelesaikan masalah tersebut. 821 00:37:22,030 --> 00:37:26,060 >> Tetapi bagaimana jika saya mahu halaman satu pertiga atau halaman 30 atau halaman yang ke-40? 822 00:37:26,060 --> 00:37:28,730 Sekarang saya akan menyalin dan menampal banyak kod salinan 823 00:37:28,730 --> 00:37:30,430 dalam berbilang fail. 824 00:37:30,430 --> 00:37:32,600 Dan supaya menganggap bahawa Saya membuat keputusan dan saya diberitahu, 825 00:37:32,600 --> 00:37:34,780 hey, kita tidak menggunakan latar belakang hijau lagi. 826 00:37:34,780 --> 00:37:36,380 Kita akan mula menggunakan oren. 827 00:37:36,380 --> 00:37:38,690 Apa yang anda perlu ubah? 828 00:37:38,690 --> 00:37:42,900 Nah, anda perlu mengubah gaya yang dari hijau kepada oren dalam berapa banyak tempat? 829 00:37:42,900 --> 00:37:44,920 Seperti 30 atau 40 tempat. 830 00:37:44,920 --> 00:37:45,900 Ia membosankan. 831 00:37:45,900 --> 00:37:47,039 Ia terdedah kepada kesilapan. 832 00:37:47,039 --> 00:37:49,580 Ada beberapa sebab di mana anda tidak akan mahu untuk mendorong 833 00:37:49,580 --> 00:37:51,840 yang jenis sakit untuk diri sendiri. 834 00:37:51,840 --> 00:37:54,760 Dan supaya ia tidak akan menjadi baik jika kita boleh mengambil apa yang saya hanya 835 00:37:54,760 --> 00:37:58,240 meletakkan antara kedua-dua kuning tag, tag gaya, 836 00:37:58,240 --> 00:38:04,050 faktor ia keluar, dan meletakkan semua saya penyesuaian dgn mode ke dalam satu fail pusat 837 00:38:04,050 --> 00:38:08,470 bahawa semua 30 atau 40 fail saya yang lain meminjam daripada atau entah bagaimana rujukan, 838 00:38:08,470 --> 00:38:11,640 tidak seperti rangkaian gambar rajah yang kami lakukan sebelum ini? 839 00:38:11,640 --> 00:38:15,030 >> Jadi, jika saya di sini, saya akan benar-benar mencadangkan 840 00:38:15,030 --> 00:38:17,880 yang kita menggantikan tag gaya dengan sesuatu 841 00:38:17,880 --> 00:38:21,620 dipanggil tag pautan, yang adalah teruk, teruk dinamakan, 842 00:38:21,620 --> 00:38:24,370 kerana anda tidak menggunakan link tag untuk mewujudkan apa yang 843 00:38:24,370 --> 00:38:26,380 kita manusia tahu sebagai pautan dalam laman web. 844 00:38:26,380 --> 00:38:29,750 Untuk itu, anda menggunakan yang tag? 845 00:38:29,750 --> 00:38:31,464 Bagaimana anda membuat pautan dalam laman web? 846 00:38:31,464 --> 00:38:32,130 PENONTON: a. 847 00:38:32,130 --> 00:38:34,870 DAVID J. MALAN: The, atau anchor tag, yang pergi ke Disney sebelum ini. 848 00:38:34,870 --> 00:38:39,090 Pautan tag sini mengatakan link this-- untuk fail yang dipanggil 849 00:38:39,090 --> 00:38:44,350 styles.css, hubungan yang akan menjadi bahawa itu lembaran gaya saya. 850 00:38:44,350 --> 00:38:48,290 Jadi ini adalah salah satu daripada S dalam CSS-- lembaran gaya melata. 851 00:38:48,290 --> 00:38:50,490 Style sheet-- dua daripada S dalam CSS. 852 00:38:50,490 --> 00:38:52,550 Cascading style sheet. 853 00:38:52,550 --> 00:38:58,640 Ini hanya bermakna, hey, pelayar, pergi mencari styles.css pada pelayan tempatan 854 00:38:58,640 --> 00:39:01,870 dan menggunakannya sebagai lembaran gaya anda, yang bermakna di dalam fail yang 855 00:39:01,870 --> 00:39:05,310 akan menjadi semua stylizations yang kita baru sahaja selesai. 856 00:39:05,310 --> 00:39:07,396 Dan jadi apa fail yang mungkin kelihatan seperti adalah ini. 857 00:39:07,396 --> 00:39:10,020 Dan saya hanya akan melakukan ini adalah yang cepat contoh, kerana kita tidak perlu 858 00:39:10,020 --> 00:39:12,000 untuk mendapatkan terlalu banyak ke dalam rumpai di sini. 859 00:39:12,000 --> 00:39:17,840 Tetapi jika saya menyalin ini, apa yang saya mencadangkan ialah seorang programmer mencipta fail baru, 860 00:39:17,840 --> 00:39:24,450 paste mereka lines-- whoops-- paste mereka garis, 861 00:39:24,450 --> 00:39:32,270 simpan sebagai styles.css, dan kemudian, dalam fail lain, memadam semua itu 862 00:39:32,270 --> 00:39:35,450 dan menggantikannya sebaliknya dengan tag pautan ini. 863 00:39:35,450 --> 00:39:43,090 Supaya jika saya membuat pautan href = "styles.css", hubungan itu adalah "stylesheet" 864 00:39:43,090 --> 00:39:44,170 tag penutup. 865 00:39:44,170 --> 00:39:45,250 Menyimpannya. 866 00:39:45,250 --> 00:39:47,000 Kembali ke helloworld saya. 867 00:39:47,000 --> 00:39:48,690 Tambah nilai. 868 00:39:48,690 --> 00:39:51,290 >> Secara literal tiada apa yang berlaku. 869 00:39:51,290 --> 00:39:54,710 Ini satu perkara yang baik, kerana ia bermakna ia sebenarnya semua kerja. 870 00:39:54,710 --> 00:39:58,860 Untuk membuktikan banyak, kira saya membuat kesilapan menaip, dan saya memanggil ini "styles.css" 871 00:39:58,860 --> 00:40:03,080 dengan modal S, yang tidak betul, dan kemudian muat semula. 872 00:40:03,080 --> 00:40:05,470 Sekarang anda boleh lihat ia hanya tidak berfungsi. 873 00:40:05,470 --> 00:40:06,362 Sekarang, mengapa? 874 00:40:06,362 --> 00:40:08,070 Nah, mari kita menggunakan teknik dari awal. 875 00:40:08,070 --> 00:40:10,153 Biar saya pergi ke hadapan dan, pelayar saya, dalam Chrome, Saya 876 00:40:10,153 --> 00:40:12,900 akan membuka yang khas tab rangkaian seperti sebelum ini, 877 00:40:12,900 --> 00:40:15,560 dan biarlah saya memuat semula halaman. 878 00:40:15,560 --> 00:40:19,341 Apa yang tidak kamu terkejut melihat sekarang? 879 00:40:19,341 --> 00:40:20,840 Atau mungkin anda terkejut melihatnya. 880 00:40:20,840 --> 00:40:23,225 Sama ada cara, apa yang anda lihat sekarang? 881 00:40:23,225 --> 00:40:24,100 PENONTON: [didengar] 882 00:40:24,100 --> 00:40:24,770 DAVID J. MALAN: Ia tidak dijumpai. 883 00:40:24,770 --> 00:40:25,680 Mengapa ia tidak dijumpai? 884 00:40:25,680 --> 00:40:28,480 Well, modal Styles.css-- S-- tidak wujud. 885 00:40:28,480 --> 00:40:29,230 Saya misnamed ia. 886 00:40:29,230 --> 00:40:30,430 typo mudah. 887 00:40:30,430 --> 00:40:33,816 Tetapi saya mendapat difahami kini merupakan 404, kerana pelayan itu berkata, hey, 888 00:40:33,816 --> 00:40:34,440 ia tidak dijumpai. 889 00:40:34,440 --> 00:40:36,300 Secara harfiah, saya tidak tahu mana fail yang. 890 00:40:36,300 --> 00:40:38,880 Jadi hasilnya, pelayar menunjukkan anda apa yang ia boleh, 891 00:40:38,880 --> 00:40:42,860 kandungan mentah halaman, yang merupakan 200, HTML, 892 00:40:42,860 --> 00:40:45,390 tetapi penyesuaian dgn mode yang tidak boleh ditambah selepas itu. 893 00:40:45,390 --> 00:40:47,120 Dan ini adalah apa yang dimaksudkan dengan melata. 894 00:40:47,120 --> 00:40:49,070 Anda boleh jenis menambahnya selepas, dan ia semacam 895 00:40:49,070 --> 00:40:50,874 menapis estetika laman web. 896 00:40:50,874 --> 00:40:53,790 Dan anda juga boleh mengatasi mereka gaya dengan fail lembaran gaya lagi yang lain 897 00:40:53,790 --> 00:40:54,700 jika anda mahu. 898 00:40:54,700 --> 00:40:57,780 Ia tidak ditemui, walaupun, dalam kes ini, kerana sudah tentu, saya misnamed ia. 899 00:40:57,780 --> 00:41:00,330 Jadi saya akan mempunyai untuk menetapkan bahawa pertama. 900 00:41:00,330 --> 00:41:04,667 >> Jadi mari kita pergi ke hadapan dan mencadangkan yang berikut. 901 00:41:04,667 --> 00:41:07,410 902 00:41:07,410 --> 00:41:11,140 Mari kita pergi ke hadapan dan melakukan ini. 903 00:41:11,140 --> 00:41:14,220 Bermula dengan mungkin fail helloworld anda, 904 00:41:14,220 --> 00:41:17,740 biar saya menjemput pasangan daripada menampilkan cadangan. 905 00:41:17,740 --> 00:41:20,400 Jadi, Victoria, anda mahu membuat beberapa teks yang lebih besar, bukan? 906 00:41:20,400 --> 00:41:24,555 Baiklah, jadi kita boleh jangan menjadikan teks lebih besar. 907 00:41:24,555 --> 00:41:26,860 Dan kita masing-masing akan memetik off hanya satu masalah untuk menyelesaikan. 908 00:41:26,860 --> 00:41:30,867 Membuat teks yang lebih besar. 909 00:41:30,867 --> 00:41:32,700 Saya tidak akan mengganggu menulis ini apabila kita 910 00:41:32,700 --> 00:41:35,600 mempunyai teknologi peluru betul di sini. 911 00:41:35,600 --> 00:41:39,970 Jadi beberapa masalah. 912 00:41:39,970 --> 00:41:44,670 Oleh itu, kita akan cuba untuk membuat teks yang lebih besar. 913 00:41:44,670 --> 00:41:45,170 Baiklah. 914 00:41:45,170 --> 00:41:48,360 Apa lagi yang akan seseorang mencadangkan? 915 00:41:48,360 --> 00:41:50,332 Apa lagi yang mungkin kita mahu lakukan pada laman web? 916 00:41:50,332 --> 00:41:52,040 Mari kita datang dengan senarai pendek perkara 917 00:41:52,040 --> 00:41:55,366 dan kemudian mewakilkan kepada kumpulan untuk memikirkan ini. 918 00:41:55,366 --> 00:41:56,270 >> PENONTON: [didengar] 919 00:41:56,270 --> 00:42:02,251 >> DAVID J. MALAN: OK, teks kedudukan di sisi berbeza halaman? 920 00:42:02,251 --> 00:42:02,750 Baiklah. 921 00:42:02,750 --> 00:42:04,620 Sesuatu yang lain. 922 00:42:04,620 --> 00:42:05,784 >> PENONTON: [didengar] 923 00:42:05,784 --> 00:42:06,700 DAVID J. MALAN: Ia adalah. 924 00:42:06,700 --> 00:42:08,720 Jadi gif adalah hanya format fail yang berbeza. 925 00:42:08,720 --> 00:42:12,830 Kami hanya digunakan, apa, yang png atau jpg mungkin? 926 00:42:12,830 --> 00:42:14,480 Kami menggunakan jpg a. 927 00:42:14,480 --> 00:42:16,780 Jika anda ingin tahu, yang berlebihan menjawab kepada soalan anda 928 00:42:16,780 --> 00:42:19,404 adalah jpg secara umumnya digunakan untuk gambar, kerana ia menyokong 929 00:42:19,404 --> 00:42:21,500 berjuta-juta warna atau 24-bit warna. 930 00:42:21,500 --> 00:42:26,930 gif A biasanya digunakan untuk, seperti, memes internet ini animasi days--, 931 00:42:26,930 --> 00:42:28,810 gifs animasi seperti. 932 00:42:28,810 --> 00:42:32,320 Tetapi ia berlaku untuk menggunakan warna yang lebih kecil palet, hanya 256 warna mungkin, 933 00:42:32,320 --> 00:42:35,230 tetapi ia menyokong ketelusan dan animasi. 934 00:42:35,230 --> 00:42:40,330 Dan kemudian ada png, yang menyokong ketelusan dan lebih banyak warna 935 00:42:40,330 --> 00:42:41,300 tetapi tidak animasi. 936 00:42:41,300 --> 00:42:42,133 Jadi ia adalah satu keseimbangan. 937 00:42:42,133 --> 00:42:44,144 938 00:42:44,144 --> 00:42:46,060 Jadi menambah gif, walaupun, akan berfungsi 939 00:42:46,060 --> 00:42:48,396 bersamaan dengan menambah png atau jpg a. 940 00:42:48,396 --> 00:42:49,110 Yeah. 941 00:42:49,110 --> 00:42:50,550 Sumber imej sama. 942 00:42:50,550 --> 00:42:51,590 Jadi sesuatu yang lain. 943 00:42:51,590 --> 00:42:57,288 Mari kita datang dengan sesuatu yang kami hantar ke Victoria lakukan di sini. 944 00:42:57,288 --> 00:42:59,209 >> PENONTON: Tambah butang untuk borang. 945 00:42:59,209 --> 00:43:00,000 DAVID J. MALAN: OK. 946 00:43:00,000 --> 00:43:02,179 Jadi menambah butang untuk borang. 947 00:43:02,179 --> 00:43:03,470 Dan kami akan melakukan salah satu yang bersama-sama. 948 00:43:03,470 --> 00:43:07,220 Supaya berada segue yang sempurna selepas cabaran ini. 949 00:43:07,220 --> 00:43:10,357 Apa-apa lagi? 950 00:43:10,357 --> 00:43:11,440 Apa yang mungkin anda suka lakukan? 951 00:43:11,440 --> 00:43:14,040 952 00:43:14,040 --> 00:43:16,516 web berasa sangat underwhelming jika ini adalah semua yang kita boleh lakukan. 953 00:43:16,516 --> 00:43:18,140 PENONTON: Menukar warna teks. 954 00:43:18,140 --> 00:43:19,500 DAVID J. MALAN: Tukar apa? 955 00:43:19,500 --> 00:43:20,666 PENONTON: warna teks. 956 00:43:20,666 --> 00:43:22,311 DAVID J. MALAN: Perubahan warna teks. 957 00:43:22,311 --> 00:43:22,810 Baiklah. 958 00:43:22,810 --> 00:43:23,790 Jadi, mari kita buat ini. 959 00:43:23,790 --> 00:43:27,209 Hanya lagi supaya anda tidak, hanya secara hafalan, melakukan apa yang saya lakukan, 960 00:43:27,209 --> 00:43:29,500 Saya akan menghidupkan muzik untuk mungkin lima minit di sini. 961 00:43:29,500 --> 00:43:30,450 Anda dialu-alukan untuk menggunakan Google. 962 00:43:30,450 --> 00:43:33,130 Anda dialu-alukan untuk bertanya kepada saya, dan Saya akan berbisik petunjuk dalam telinga anda. 963 00:43:33,130 --> 00:43:35,171 Anda dialu-alukan untuk melihat lebih di atas bahu-masing. 964 00:43:35,171 --> 00:43:37,340 Tetapi menyelesaikan salah satu daripada masalah-masalah ini. 965 00:43:37,340 --> 00:43:40,190 Tetapi kami akan melakukan yang terakhir, yang membentuk satu, jika kita boleh, bersama-sama. 966 00:43:40,190 --> 00:43:42,790 Jadi lima minit untuk menyelesaikan mana-mana satu daripada masalah-masalah ini 967 00:43:42,790 --> 00:43:46,780 menggunakan Google, gerak hati, atau mana-mana cara lain yang disediakan untuk anda. 968 00:43:46,780 --> 00:43:48,630 >> [MUZIK Bermain] 969 00:43:48,630 --> 00:43:49,130 Baiklah. 970 00:43:49,130 --> 00:43:50,838 Jangan bimbang jika anda mahu untuk menjaga tinkering, 971 00:43:50,838 --> 00:43:53,880 tetapi saya akan merosakkan pasangan jawapan ini. 972 00:43:53,880 --> 00:43:57,986 Jadi cadangan pertama dari Victoria adalah untuk menjadikan teks lebih besar. 973 00:43:57,986 --> 00:43:59,360 Jadi ada beberapa cara untuk melakukan ini. 974 00:43:59,360 --> 00:44:01,530 Saya kini dipulihkan skrin saya untuk saiz ini, 975 00:44:01,530 --> 00:44:04,310 walaupun saya telah dizum masuk buatan hanya untuk melihat sesuatu. 976 00:44:04,310 --> 00:44:07,470 Dan mari kita buat ini. 977 00:44:07,470 --> 00:44:11,380 Biar saya pergi ke hadapan dan merebut beberapa teks Latin generik 978 00:44:11,380 --> 00:44:19,540 hanya supaya kita mempunyai sesuatu untuk bekerja dengan. 979 00:44:19,540 --> 00:44:20,715 Maka berikanlah saya hanya satu masa. 980 00:44:20,715 --> 00:44:21,840 Saya akan membuat tiga perenggan. 981 00:44:21,840 --> 00:44:53,430 982 00:44:53,430 --> 00:44:53,930 OKEY. 983 00:44:53,930 --> 00:44:55,560 Ini akan menjadi contoh yang lebih baik. 984 00:44:55,560 --> 00:44:57,840 Jadi bagi yang ingin tahu, dalam hello.html saya, saya hanya 985 00:44:57,840 --> 00:45:01,645 ditampal tiga tidak masuk akal perenggan Latin 986 00:45:01,645 --> 00:45:03,270 hanya supaya kita mempunyai beberapa teks untuk bekerja dengan. 987 00:45:03,270 --> 00:45:06,720 Dan matlamat Victoria adalah untuk membuat beberapa teks yang lebih besar. 988 00:45:06,720 --> 00:45:09,879 Jadi saya boleh, seperti sebelum ini, pergi di sini. 989 00:45:09,879 --> 00:45:11,170 Dan biarlah saya melakukannya dengan cara yang betul. 990 00:45:11,170 --> 00:45:13,253 Saya akan mempunyai link tag yang menunjuk ke fail 991 00:45:13,253 --> 00:45:20,560 dipanggil "styles.css," hubungan yang sekali lagi "stylesheet." 992 00:45:20,560 --> 00:45:25,221 Dan kemudian saya akan menyelamatkan yang dan membuka ini "styles.css." 993 00:45:25,221 --> 00:45:28,940 >> Jadi, seperti sebelum ini, saya mempunyai keupayaan dalam fail CSS ini 994 00:45:28,940 --> 00:45:31,569 untuk benar-benar mengatasi lalai estetika laman web, 995 00:45:31,569 --> 00:45:33,860 dan estetika lalai, sudah tentu, adalah agak membosankan. 996 00:45:33,860 --> 00:45:36,943 Ia semacam saiz fon biasa, hitam teks, latar belakang putih, dan sebagainya. 997 00:45:36,943 --> 00:45:39,440 Jadi rasa saya ingin semua teks ini lebih besar. 998 00:45:39,440 --> 00:45:40,460 Saya boleh melakukan beberapa perkara. 999 00:45:40,460 --> 00:45:43,750 Dalam fail styles.css saya, saya boleh mengatakan, anda tahu apa, 1000 00:45:43,750 --> 00:45:46,950 memohon berikut untuk badan halaman saya. 1001 00:45:46,950 --> 00:45:51,390 Teruskan dan membuat saiz font 24 mata, 1002 00:45:51,390 --> 00:45:54,130 yang merupakan nombor yang saya mungkin digunakan dalam Microsoft Word. 1003 00:45:54,130 --> 00:45:57,620 Biar saya kembali ke web saya halaman di sini dan tambah nilai, 1004 00:45:57,620 --> 00:45:59,640 dan anda boleh melihat bahawa ia sudah lebih besar. 1005 00:45:59,640 --> 00:46:02,223 Dan kita boleh mendapat sedikit gila, seperti yang kita boleh di desktop-- yang 1006 00:46:02,223 --> 00:46:03,670 menjadikannya 96 mata. 1007 00:46:03,670 --> 00:46:04,950 Tambah nilai. 1008 00:46:04,950 --> 00:46:07,610 Dan ia semakin sedikit susah dipakai pada ketika ini. 1009 00:46:07,610 --> 00:46:09,500 >> Tetapi saya boleh menjadi sedikit lebih tepat. 1010 00:46:09,500 --> 00:46:14,530 Bukannya memohon ini stylesheet untuk badan halaman saya, 1011 00:46:14,530 --> 00:46:21,740 apa lagi yang mungkin saya memohon kepada sebaliknya, apa tag lain yang mungkin masih 1012 00:46:21,740 --> 00:46:25,445 berfungsi dengan cara yang sama? 1013 00:46:25,445 --> 00:46:26,444 >> PENONTON: p tag? 1014 00:46:26,444 --> 00:46:27,360 DAVID J. MALAN: P tag. 1015 00:46:27,360 --> 00:46:29,350 Jadi kepala itu tidak akan betul, kerana kepala, 1016 00:46:29,350 --> 00:46:31,300 anda tidak boleh benar-benar mengawal estetika. 1017 00:46:31,300 --> 00:46:32,700 Ada teks sama ada terdapat atau tidak. 1018 00:46:32,700 --> 00:46:36,760 Tetapi p tag-- Saya boleh menyelam dalam sedikit lebih mendalam, boleh dikatakan, kepada perenggan 1019 00:46:36,760 --> 00:46:37,350 tag. 1020 00:46:37,350 --> 00:46:41,600 Dan walaupun terdapat tiga, yang betul-betul halus, kerana dalam CSS, 1021 00:46:41,600 --> 00:46:44,900 apabila saya hanya mengatakan "p," ini ertinya memohon berikut 1022 00:46:44,900 --> 00:46:48,300 kepada mana-mana tag yang sepadan dengan ini pemilih, pemilih hanya 1023 00:46:48,300 --> 00:46:49,430 yang nama tag. 1024 00:46:49,430 --> 00:46:52,350 Jadi di mana sahaja anda melihat "P," memohon saiz fon, 1025 00:46:52,350 --> 00:46:55,222 dan mari kita membuat ia lebih munasabah again-- 24 mata. 1026 00:46:55,222 --> 00:46:56,930 Dan anda tahu apa, hanya untuk langkah yang baik, 1027 00:46:56,930 --> 00:46:59,810 mari kita membuat warna hanya merah buat masa ini. 1028 00:46:59,810 --> 00:47:03,740 Dan sekarang jika saya tambah nilai, sekarang kita melihat tiga perenggan hodoh. 1029 00:47:03,740 --> 00:47:07,180 >> Tetapi sekarang andaikan bahawa saya jenis dengan- Saya hendak perenggan pertama 1030 00:47:07,180 --> 00:47:08,210 melompat keluar pada pengguna. 1031 00:47:08,210 --> 00:47:11,150 Saya tidak mahu hanya meningkatkan saiz fon bagi segala-galanya. 1032 00:47:11,150 --> 00:47:16,105 Oleh itu, saya benar-benar mahu untuk mengenal pasti atau membezakan antara perenggan ini. 1033 00:47:16,105 --> 00:47:18,730 Jadi mari kita menghapuskan merah, kerana itulah hanya jenis lekat, 1034 00:47:18,730 --> 00:47:23,885 dan mari kita pergi ke hadapan dan membuat saiz font 12 perkara secara lalai, 1035 00:47:23,885 --> 00:47:26,260 supaya kita kembali kepada sesuatu sedikit lebih munasabah. 1036 00:47:26,260 --> 00:47:29,190 Dan sekarang saya hanya mahu untuk meningkatkan saiz font perenggan pertama. 1037 00:47:29,190 --> 00:47:31,440 Saya boleh melakukan ini dalam beberapa cara, tetapi salah satu cara itu 1038 00:47:31,440 --> 00:47:37,180 mungkin yang paling pengajaran di masa adalah untuk melakukan yang berikut. 1039 00:47:37,180 --> 00:47:43,280 Biar saya pergi ke hadapan dan berkata, ini perenggan mempunyai ID unik "pertama." 1040 00:47:43,280 --> 00:47:45,000 Saya boleh memanggil apa-apa ini yang saya mahu. 1041 00:47:45,000 --> 00:47:46,874 Saya boleh memanggil ini "foo" atau apa-apa perkataan lain, 1042 00:47:46,874 --> 00:47:49,290 tetapi saya akan memberikan beberapa nama semantik bermakna 1043 00:47:49,290 --> 00:47:50,320 seperti "pertama." 1044 00:47:50,320 --> 00:47:54,790 Ini adalah pengecam unik, ID, perenggan pertama saya. 1045 00:47:54,790 --> 00:47:59,360 >> Apa yang saya kini boleh melakukan dalam lembaran gaya saya adalah menjadi sedikit lebih tepat. 1046 00:47:59,360 --> 00:48:02,330 Daripada mengatakan, memohon berikut untuk tag p, 1047 00:48:02,330 --> 00:48:04,890 Saya boleh mengatakan following-- memohon yang berikut, 1048 00:48:04,890 --> 00:48:11,000 atau pilih, elemen HTML yang mempunyai ID unik "pertama." 1049 00:48:11,000 --> 00:48:12,350 Apa yang saya mahu untuk memohon kepadanya? 1050 00:48:12,350 --> 00:48:15,250 A saiz fon 24 mata. 1051 00:48:15,250 --> 00:48:16,640 Jadi saya mempunyai dua pemilih sekarang. 1052 00:48:16,640 --> 00:48:19,690 Seseorang membuat semua Perenggan 12 perkara. 1053 00:48:19,690 --> 00:48:24,960 Tetapi yang satu ini, terutama kerana ia datang second-- ia datang lalu di file-- yang 1054 00:48:24,960 --> 00:48:27,090 ini mempunyai kesan yang melata. 1055 00:48:27,090 --> 00:48:30,200 Saya baru sahaja membuat semua saya tag perenggan 12 perkara, 1056 00:48:30,200 --> 00:48:34,350 tetapi ini sekarang lata dan mengatasi bahawa bagi mana-mana elemen 1057 00:48:34,350 --> 00:48:38,800 di halaman, mana-mana tag dalam halaman yang ID unik adalah quote unquote "pertama." 1058 00:48:38,800 --> 00:48:41,720 Dan hashtag dalam konteks ini hanya bermaksud "pengecam unik." 1059 00:48:41,720 --> 00:48:43,750 Saya tidak memasukkannya ke dalam fail HTML. 1060 00:48:43,750 --> 00:48:46,880 I, di sini, hanya mengatakan quote unquote "pertama." 1061 00:48:46,880 --> 00:48:48,470 >> Jadi biarlah saya menambah nilai. 1062 00:48:48,470 --> 00:48:49,919 Dan sekarang saya lihat, ah, OK. 1063 00:48:49,919 --> 00:48:51,710 Maksud saya, ia bukan yang cantik, tetapi ia adalah jenis 1064 00:48:51,710 --> 00:48:53,600 daripada seperti kata pengantar kepada buku atau sesuatu seperti itu, 1065 00:48:53,600 --> 00:48:55,100 mana perenggan yang pertama adalah lebih besar. 1066 00:48:55,100 --> 00:48:57,933 Boleh menjadi lebih tepat dengan hanya huruf pertama, tetapi sekurang-kurangnya 1067 00:48:57,933 --> 00:48:59,110 Saya telah dijalankan lebih banyak kawalan. 1068 00:48:59,110 --> 00:49:04,760 Sekarang maybe-- mungkin saya mahu melakukan ini kadang-kadang apa jua sebab, 1069 00:49:04,760 --> 00:49:09,010 dan jadi saya tidak mahu perkara ini memohon kepada hanya satu tag HTML. 1070 00:49:09,010 --> 00:49:15,110 Sebaliknya, mari kita iaitu- mari juga melakukan yang berikut. 1071 00:49:15,110 --> 00:49:18,810 Class = "import." 1072 00:49:18,810 --> 00:49:23,970 Manakala ID digunakan untuk secara unik mengenal pasti satu perkara, satu tag, 1073 00:49:23,970 --> 00:49:30,190 dalam laman web anda, kelas yang dimaksudkan untuk menjadi di mana-mana beberapa elemen atau tag 1074 00:49:30,190 --> 00:49:30,950 pada halaman web anda. 1075 00:49:30,950 --> 00:49:31,710 Jadi ia boleh digunakan semula. 1076 00:49:31,710 --> 00:49:33,090 ID tidak boleh diguna semula. 1077 00:49:33,090 --> 00:49:34,450 kelas A boleh digunakan semula. 1078 00:49:34,450 --> 00:49:37,830 >> Dan anda tahu apa, atas apa jua reasons-- falsafah 1079 00:49:37,830 --> 00:49:40,180 Saya tidak menamatkan saya thought-- saya akan mengatakan 1080 00:49:40,180 --> 00:49:44,300 bahawa perenggan pertama dan perenggan kedua adalah penting. 1081 00:49:44,300 --> 00:49:48,600 Jadi, saya akan memohon kelas yang dipanggil "Penting," bahawa, jika saya menyimpan fail saya 1082 00:49:48,600 --> 00:49:51,510 dan tambah nilai, tidak mempunyai kesan berfungsi lagi. 1083 00:49:51,510 --> 00:49:53,780 Tetapi saya telah menambah beberapa metadata untuk fail, 1084 00:49:53,780 --> 00:49:56,610 semacam sesuatu berasingan daripada data teras fail, 1085 00:49:56,610 --> 00:50:02,300 supaya sekarang dalam lembaran gaya saya, jika saya sebaliknya ia akan berkata ".important" - anda tahu, 1086 00:50:02,300 --> 00:50:07,110 apa-apa yang penting, saya akan membuat font-warna, red-- 1087 00:50:07,110 --> 00:50:09,930 atau sebaliknya tidak font-warna, hanya warna. 1088 00:50:09,930 --> 00:50:12,930 Ada yang tidak konsisten dalam CSS malangnya. 1089 00:50:12,930 --> 00:50:14,120 Dan menambah nilai. 1090 00:50:14,120 --> 00:50:17,640 Sekarang notis pertama dua perenggan berwarna merah 1091 00:50:17,640 --> 00:50:20,880 tetapi tidak ketiga, kerana saya hanya memohon kelas "penting" 1092 00:50:20,880 --> 00:50:25,020 dua pertama perkara-perkara. 1093 00:50:25,020 --> 00:50:28,030 >> Jadi dalam ID, anda mempunyai kemampuan menetapkan secara tepat. 1094 00:50:28,030 --> 00:50:30,110 Dengan kelas, anda perlu boleh gunapakai. 1095 00:50:30,110 --> 00:50:33,800 Tetapi dalam kedua-dua kes, notis jenis prinsip yang baik reka bentuk 1096 00:50:33,800 --> 00:50:39,072 di mana saya kira semua daripada estetika ke fail styles.css saya. 1097 00:50:39,072 --> 00:50:40,280 Jadi tidak ada messiness sini. 1098 00:50:40,280 --> 00:50:44,490 Tidak ada menyebut merah atau berani menghadap atau saiz fon dalam fail ini. 1099 00:50:44,490 --> 00:50:49,430 Sebaliknya Saya mempunyai semantik, bermakna ciri-ciri data saya sebagai, 1100 00:50:49,430 --> 00:50:51,240 di sini adalah beberapa data penting. 1101 00:50:51,240 --> 00:50:52,800 Berikut adalah beberapa data yang lebih penting. 1102 00:50:52,800 --> 00:50:56,500 Selain itu, di sini adalah "Pertama" data penting saya. 1103 00:50:56,500 --> 00:51:01,050 Jadi HTML adalah tentang jenis daripada tagging, secara literal, kata-kata 1104 00:51:01,050 --> 00:51:05,270 dan perenggan dan konstruk dalam anda halaman dengan petua sedikit, jika anda 1105 00:51:05,270 --> 00:51:07,640 akan, bahawa anda boleh entah bagaimana memanfaatkan menggunakan 1106 00:51:07,640 --> 00:51:10,880 teknik-teknik lain seperti CSS dengan cara ini. 1107 00:51:10,880 --> 00:51:14,760 >> Jadi, dalam jawapan kepada soalan Victoria, kita boleh membuat teks yang lebih besar dengan cara itu. 1108 00:51:14,760 --> 00:51:18,380 Terdapat begitu banyak cara lain, tetapi fon tag-- kurungan terbuka "font" - 1109 00:51:18,380 --> 00:51:19,770 sebenarnya lama beberapa tahun. 1110 00:51:19,770 --> 00:51:21,410 Dan ini adalah masalah, juga, dengan bergantung hanya 1111 00:51:21,410 --> 00:51:23,485 pada resources-- talian mereka cenderung untuk ketinggalan zaman. 1112 00:51:23,485 --> 00:51:26,110 Dan sesungguhnya, yang sudah ditamatkan, kerana dunia sedar, 1113 00:51:26,110 --> 00:51:28,970 apa maksud "font-size = 7" bermakna? 1114 00:51:28,970 --> 00:51:29,670 Ia tidak. 1115 00:51:29,670 --> 00:51:32,770 Dan sebagainya untuk beberapa tahun dan ke ini day-- salah satu sisi 1116 00:51:32,770 --> 00:51:36,060 nota di sini adalah bahawa ia sebenarnya sangat menyakitkan masih kadang-kadang 1117 00:51:36,060 --> 00:51:38,900 untuk membangunkan tapak untuk web, kerana Microsoft 1118 00:51:38,900 --> 00:51:44,220 dan Google dan Mozilla dan orang lain sering tidak bersetuju tentang bagaimana 1119 00:51:44,220 --> 00:51:47,480 untuk mentafsir spesifikasi seperti HTML. 1120 00:51:47,480 --> 00:51:52,490 >> Terdapat rulebook untuk HTML yang umumnya mengatakan apa yang setiap tag bermakna. 1121 00:51:52,490 --> 00:51:55,690 Tetapi kadang-kadang ia diserahkan kepada budi pelaksanaan ini, 1122 00:51:55,690 --> 00:51:57,290 budi bicara dan Google Microsoft. 1123 00:51:57,290 --> 00:52:00,000 Dan supaya anda akan mempunyai sangat kerap lihat pada laman web sesuatu 1124 00:52:00,000 --> 00:52:04,954 kelihatan berbeza pada PC daripada ia pada Mac, 1125 00:52:04,954 --> 00:52:06,995 dan itu benar-benar kerana, pada akhir hari, 1126 00:52:06,995 --> 00:52:08,891 mereka tidak menguji baik pada kedua-dua platform. 1127 00:52:08,891 --> 00:52:11,390 Tetapi ia juga kerana yang munasabah, orang pintar akan tidak bersetuju 1128 00:52:11,390 --> 00:52:14,970 dan syarikat-syarikat yang tidak bersetuju, dan sebagainya salah satu cabaran pengaturcaraan 1129 00:52:14,970 --> 00:52:16,980 untuk web atau mereka bentuk perkara untuk web 1130 00:52:16,980 --> 00:52:21,700 menulis laman web anda dengan cara yang yang bekerja pada setiap pelayar web. 1131 00:52:21,700 --> 00:52:23,410 Tetapi itulah yang tidak munasabah, bukan? 1132 00:52:23,410 --> 00:52:27,807 Terdapat begitu banyak versi begitu banyak pelayar di luar sana yang, pada satu ketika, 1133 00:52:27,807 --> 00:52:30,890 anda juga perlu membuat panggilan penghakiman dan anda perlu membuat keputusan sebagai sebuah syarikat, 1134 00:52:30,890 --> 00:52:33,082 terutamanya untuk e-gaya-dagang laman web di mana anda berada 1135 00:52:33,082 --> 00:52:36,290 cuba untuk menggunakan yang terbaru dan terhebat teknologi untuk memberikan pengguna benar-benar baik 1136 00:52:36,290 --> 00:52:37,110 pengalaman. 1137 00:52:37,110 --> 00:52:41,019 Tetapi beberapa peratusan pengguna mungkin masih menggunakan Internet Explorer 6 atau 7 1138 00:52:41,019 --> 00:52:43,810 atau 8, terutamanya bergantung kepada negara bahawa mereka datang dari. 1139 00:52:43,810 --> 00:52:46,760 >> Dan sebagainya sangat biasa Dirunding adalah sesuatu 1140 00:52:46,760 --> 00:52:50,920 seperti "Statistik pelayar web." 1141 00:52:50,920 --> 00:52:56,560 Dan jika kita pergi supaya- mari kita lihat Wikipedia dan melihat bagaimana up-to-date carta ini adalah 1142 00:52:56,560 --> 00:52:59,320 jika ada satu. 1143 00:52:59,320 --> 00:53:02,420 Jadi di sini anda boleh melihat mana pelayar sebenarnya 1144 00:53:02,420 --> 00:53:06,160 adalah, menurut Disember 2015, mengikut kepada Kerajaan Amerika Syarikat. 1145 00:53:06,160 --> 00:53:11,170 Chrome adalah di bahagian pasaran 42%, diikuti oleh IE sebahagian besarnya dalam dunia korporat 1146 00:53:11,170 --> 00:53:14,490 atau tetapan PC, sudah tentu, diikuti oleh Firefox, 1147 00:53:14,490 --> 00:53:17,440 kemudian Safari, kemudian Opera tidak membuat peta di sini atas sebab tertentu, 1148 00:53:17,440 --> 00:53:18,210 dan kemudian Lain. 1149 00:53:18,210 --> 00:53:19,500 Mungkin ia adalah di bawah Lain. 1150 00:53:19,500 --> 00:53:27,700 Tetapi yang lebih bermasalah daripada itu is-- mari kita lihat jika Wikipedia juga mempunyai 1151 00:53:27,700 --> 00:53:35,194 versi pelayar version-- 1152 00:53:35,194 --> 00:53:36,160 1153 00:53:36,160 --> 00:53:39,190 >> Mari kita pergi ke statistik pelayar. 1154 00:53:39,190 --> 00:53:40,680 IE. 1155 00:53:40,680 --> 00:53:42,030 Walaupun itu tidak mencukupi. 1156 00:53:42,030 --> 00:53:44,854 Statistik Browser. 1157 00:53:44,854 --> 00:53:45,353 versi saya. 1158 00:53:45,353 --> 00:53:48,980 1159 00:53:48,980 --> 00:53:50,540 Itu tidak akan menjadi betul. 1160 00:53:50,540 --> 00:53:53,414 Mari kita lihat versi. 1161 00:53:53,414 --> 00:53:54,830 bahagian pasaran pelayar. 1162 00:53:54,830 --> 00:53:57,110 Mari kita lihat jika ini datang. 1163 00:53:57,110 --> 00:53:57,610 OKEY. 1164 00:53:57,610 --> 00:54:00,010 Sekarang ini semakin sedikit lebih berguna. 1165 00:54:00,010 --> 00:54:04,870 Jadi di sini, melihat bahawa kita mempunyai semua versi pelayar. 1166 00:54:04,870 --> 00:54:09,887 Dan, tuhan saya, jika anda look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. 1167 00:54:09,887 --> 00:54:12,970 Maksud saya, Pelayar semakin dikemaskini, dan kadang-kadang beberapa perubahan 1168 00:54:12,970 --> 00:54:16,430 adalah penting dalam segi fungsi. 1169 00:54:16,430 --> 00:54:20,630 Dan demikian pada satu ketika, pengurus produk atau jurutera 1170 00:54:20,630 --> 00:54:23,620 perlu membuat decision-- yang anda tahu apa, hanya 1% daripada dunia 1171 00:54:23,620 --> 00:54:24,740 masih menggunakan IE 7. 1172 00:54:24,740 --> 00:54:25,490 Pergi jahanam dengan mereka. 1173 00:54:25,490 --> 00:54:27,470 Kami hanya tidak akan menyokong pelayar itu. 1174 00:54:27,470 --> 00:54:28,740 Dan apa yang ia bermaksud untuk tidak menyokong? 1175 00:54:28,740 --> 00:54:31,170 Ia mungkin bermakna bahawa butang tidak berfungsi di laman web anda, 1176 00:54:31,170 --> 00:54:33,050 atau ia mungkin bermakna pemformatan adalah off. 1177 00:54:33,050 --> 00:54:35,091 Atau anda mungkin perlu membuat bahawa panggilan penghakiman sama 1178 00:54:35,091 --> 00:54:39,089 pada hari-hari mudah alih, di mana, kami tidak akan menyokong IOS 5 lagi. 1179 00:54:39,089 --> 00:54:40,380 Jadi orang hanya perlu untuk menaik taraf. 1180 00:54:40,380 --> 00:54:45,850 Atau kita tidak akan menyokong Cupcake pada Android OS untuk peranti Android, 1181 00:54:45,850 --> 00:54:48,629 kerana sebagai world-- sebagai dunia teknologi mahu bergerak ke hadapan, 1182 00:54:48,629 --> 00:54:51,170 ia jenis mahu mengheret dunia dengannya supaya mereka tidak 1183 00:54:51,170 --> 00:54:53,295 perlu terus menjadi serasi ke belakang supaya mereka 1184 00:54:53,295 --> 00:54:54,920 boleh menawarkan ciri-ciri baru dan baik. 1185 00:54:54,920 --> 00:54:57,878 Sesungguhnya ini adalah salah satu daripada sebab mengapa begitu banyak syarikat yang melancarkan 1186 00:54:57,878 --> 00:55:01,440 kemas kini automatik dan semacam memaksa versi terbaru perisian kepada kita. 1187 00:55:01,440 --> 00:55:04,010 Dan juga syarikat-syarikat seperti Apple akan menyusun daripada 1188 00:55:04,010 --> 00:55:07,280 memaksa anda hampir atau memaksa anda dari segi kuasa pasaran 1189 00:55:07,280 --> 00:55:11,164 untuk membeli telefon baru kerana mereka hanya tidak akan mengemas kini telefon lama anda lagi. 1190 00:55:11,164 --> 00:55:13,330 Jadi, anda ketinggalan terkini dan ciri-ciri besar, 1191 00:55:13,330 --> 00:55:17,520 kerana ia adalah mahal untuk mereka sebagai syarikat untuk mengekalkan tua, boleh dikatakan 1192 00:55:17,520 --> 00:55:19,330 versi lebih rendah daripada perisian. 1193 00:55:19,330 --> 00:55:23,660 Tetapi kesan yang bersih adalah bahawa kami juga mengalami ini juga. 1194 00:55:23,660 --> 00:55:26,550 >> Jadi mari kita lihat pada hanya beberapa perkara yang terakhir di sini. 1195 00:55:26,550 --> 00:55:29,740 Mari kita mengetuk sebenar cepat beberapa mereka peluru lain, jika ingin tahu. 1196 00:55:29,740 --> 00:55:33,440 Jadi jika anda telah cuba, misalnya, kedudukan 1197 00:55:33,440 --> 00:55:36,420 teks pada sisi yang berbeza daripada halaman, saya akan melakukan satu cara yang cepat, 1198 00:55:36,420 --> 00:55:38,360 tetapi ada yang berbeza cara untuk berbuat demikian. 1199 00:55:38,360 --> 00:55:42,610 Biar saya pergi ke hadapan dan eliminate-- memudahkan ini seperti berikut. 1200 00:55:42,610 --> 00:55:45,330 Biar saya kembali kepada saya mudah, perenggan mudah. 1201 00:55:45,330 --> 00:55:47,760 Biar saya kembali ke styles.css saya. 1202 00:55:47,760 --> 00:55:51,040 Dan saya hanya akan menggunakan simple-- yang yang anda mungkin telah melihat di Google 1203 00:55:51,040 --> 00:55:54,430 atau ingat dari earlier-- text-jajar kanan. 1204 00:55:54,430 --> 00:55:56,220 Dan muat semula laman ini. 1205 00:55:56,220 --> 00:55:58,470 Kini segala-galanya seolah-olah menjadi kanan sejajar, 1206 00:55:58,470 --> 00:56:00,770 seperti yang anda lihat di atas di sini. 1207 00:56:00,770 --> 00:56:04,470 >> Kita boleh membuat ia kelihatan lebih sedikit menempah-suka, dan kita boleh mengatakan "justify" 1208 00:56:04,470 --> 00:56:05,640 dan menambah nilai. 1209 00:56:05,640 --> 00:56:09,870 Kini ia adalah baik dan persegi di kedua-dua dua belah pihak, yang merupakan jenis yang bagus. 1210 00:56:09,870 --> 00:56:12,220 Satu lagi matlamat bahawa kita mempunyai di sini adalah perubahan warna teks. 1211 00:56:12,220 --> 00:56:13,650 Oleh itu, kita melihat bahawa dengan teks merah saya. 1212 00:56:13,650 --> 00:56:15,630 Dan kini menambah butang untuk borang. 1213 00:56:15,630 --> 00:56:19,390 Jadi mengapa tidak kita cuba untuk melakukan perkara ini? 1214 00:56:19,390 --> 00:56:23,656 Tetapi izinkanlah aku pergi ke laman web yang kebanyakan kita gunakan setiap day-- Google. 1215 00:56:23,656 --> 00:56:25,780 Dan mari kita lihat pada bagaimana Google sebenarnya berfungsi. 1216 00:56:25,780 --> 00:56:26,821 Tetapi saya akan melakukan ini. 1217 00:56:26,821 --> 00:56:31,930 Izinkanlah aku melakukannya dalam- yep, biarlah saya pergi ke Google pertama. 1218 00:56:31,930 --> 00:56:34,530 Saya akan perlu pergi ke dalam Tetapan Google, 1219 00:56:34,530 --> 00:56:40,660 kerana saya mahu untuk melumpuhkan sesuatu yang dinamakan Keputusan Segera. 1220 00:56:40,660 --> 00:56:43,580 >> Oleh itu, anda mungkin akan melihat dalam Google ini days-- biarlah saya kembali 1221 00:56:43,580 --> 00:56:44,850 dan menghidupkan ini. 1222 00:56:44,850 --> 00:56:47,900 Jadi, jika saya mula mencari untuk "kucing" seperti ini, 1223 00:56:47,900 --> 00:56:50,120 perhatikan bahawa bukan sahaja Saya mendapatkan auto-menyempurnakan sehingga 1224 00:56:50,120 --> 00:56:54,520 atas, tiba-tiba, page itu sendiri kelihatan berubah cantik dengan cepat juga, 1225 00:56:54,520 --> 00:56:58,750 dan itulah Google menggunakan bahasa yang dipanggil JavaScript cuba untuk membantu. 1226 00:56:58,750 --> 00:57:01,540 Tetapi malangnya, ia jenis daripada messes sehingga perbincangan kita 1227 00:57:01,540 --> 00:57:04,010 apa yang sebenarnya berlaku di bawah hood di sini. 1228 00:57:04,010 --> 00:57:09,070 Jadi saya hanya jenis cepat mematikan hasil yang segera. 1229 00:57:09,070 --> 00:57:11,510 Dan saya akan klik Simpan. 1230 00:57:11,510 --> 00:57:13,930 Dan sekarang saya akan membuka yang diagnostik toolbar bahawa saya 1231 00:57:13,930 --> 00:57:16,150 terus membuka di bawah tab Rangkaian. 1232 00:57:16,150 --> 00:57:17,720 Jadi mari kita buat ini. 1233 00:57:17,720 --> 00:57:21,960 Mari me-- whoops-- tatal ini turun sedikit. 1234 00:57:21,960 --> 00:57:24,410 Dan biarlah saya mencari "kucing." 1235 00:57:24,410 --> 00:57:26,790 >> Dan sekarang notice-- sebenarnya, ini adalah peluang yang baik 1236 00:57:26,790 --> 00:57:28,840 untuk membincangkan seketika. 1237 00:57:28,840 --> 00:57:32,460 Perhatikan masa ini saya type-- menghentikannya. 1238 00:57:32,460 --> 00:57:35,250 Berhenti. 1239 00:57:35,250 --> 00:57:35,790 OKEY. 1240 00:57:35,790 --> 00:57:40,870 Perhatikan masa ini saya menaip huruf C, menonton bahagian bawah skrin. 1241 00:57:40,870 --> 00:57:48,600 A- T- S. Apakah bahagian bawah skrin ini, tab Rangkaian saya, 1242 00:57:48,600 --> 00:57:53,320 mencadangkan yang berlaku setiap masa saya menaip surat? 1243 00:57:53,320 --> 00:57:57,700 Malangnya, katak adalah sangat mengganggu hari ini atau shamrock yang 1244 00:57:57,700 --> 00:58:00,339 atau apa sahaja yang dia. 1245 00:58:00,339 --> 00:58:01,880 Apa yang berlaku setiap kali saya menaip? 1246 00:58:01,880 --> 00:58:04,230 Dan biarlah saya membersihkan penampan dan menaip semula. 1247 00:58:04,230 --> 00:58:06,580 whoops So--. 1248 00:58:06,580 --> 00:58:13,280 Setiap kali saya menaip surat, C- A- T-- jadi baris baru jelas menyimpan muncul. 1249 00:58:13,280 --> 00:58:16,530 Apakah setiap orang-orang baris mewakili, berdasarkan apa yang kita lihat dan dibincangkan 1250 00:58:16,530 --> 00:58:17,339 setakat ini? 1251 00:58:17,339 --> 00:58:18,130 PENONTON: carian A? 1252 00:58:18,130 --> 00:58:21,770 DAVID J. MALAN: carian A, atau lebih secara umum, permintaan HTTP 1253 00:58:21,770 --> 00:58:23,125 dari pelayar saya untuk pelayan. 1254 00:58:23,125 --> 00:58:29,090 Nah, mengapa pelayar saya membuat HTTP meminta setiap kali saya menaip surat? 1255 00:58:29,090 --> 00:58:30,502 >> PENONTON: [didengar] 1256 00:58:30,502 --> 00:58:33,210 DAVID J. MALAN: Ya, ia memberi saya hasil yang auto-lengkap. 1257 00:58:33,210 --> 00:58:35,190 Seperti, di manakah ini hasil carian datang? 1258 00:58:35,190 --> 00:58:38,120 Well, setiap kali saya menaip surat, Google menghantar lebih 1259 00:58:38,120 --> 00:58:40,460 dan lebih dan lebih daripada perkataan saya menaip. 1260 00:58:40,460 --> 00:58:41,040 Mengapa? 1261 00:58:41,040 --> 00:58:44,540 Kerana mereka mahu memberi saya yang lebih baik dan lebih baik, cadangan yang lebih baik, 1262 00:58:44,540 --> 00:58:48,880 senarai cadangan, untuk apa perkataan Saya cuba untuk benar-benar lengkap. 1263 00:58:48,880 --> 00:58:53,030 Jadi ini adalah untuk mengatakan harfiah setiap aksara yang anda taip ke dalam Google 1264 00:58:53,030 --> 00:58:56,900 sedang dihantar, akhirnya dalam pukal, tetapi juga kadang-kadang satu 1265 00:58:56,900 --> 00:59:00,620 pada satu masa dalam usaha untuk melaksanakan ciri-ciri auto-lengkap apabila 1266 00:59:00,620 --> 00:59:03,000 data adalah, sudah tentu, di web. 1267 00:59:03,000 --> 00:59:08,780 >> Sekarang, mari kita lihat apa yang sebenarnya yang berlaku apabila saya klik Google Search. 1268 00:59:08,780 --> 00:59:10,420 Dan kemudian kita akan memanfaatkan ini diri kita sendiri. 1269 00:59:10,420 --> 00:59:15,320 Jadi jika saya tatal ke bawah sekarang untuk yang permintaan pertama yang hanya berlaku. 1270 00:59:15,320 --> 00:59:17,130 Perhatikan yang berikut. 1271 00:59:17,130 --> 00:59:25,550 Ia telah dihantar ke yang agak panjang URL-- https://www.google.com/search? 1272 00:59:25,550 --> 00:59:27,100 dan kemudian sejumlah besar barangan. 1273 00:59:27,100 --> 00:59:29,620 Mari kita lihat ini sebenarnya kini dalam tab pelayar itu sendiri. 1274 00:59:29,620 --> 00:59:31,310 Mari kita menghilangkan toolbar di sini. 1275 00:59:31,310 --> 00:59:33,140 Berikut adalah halaman hasil carian. 1276 00:59:33,140 --> 00:59:34,790 Dan notis di sini adalah URL. 1277 00:59:34,790 --> 00:59:37,430 Sekarang, anda mungkin boleh meneka apa yang berlaku di sini sebahagiannya. 1278 00:59:37,430 --> 00:59:39,090 Jadi pertama sekali, definisi. 1279 00:59:39,090 --> 00:59:42,570 Ini nampaknya adalah destinasi mana borang dihantar. 1280 00:59:42,570 --> 00:59:44,910 Oleh itu, apabila saya menaip dalam perkataan "kucing" dan tekan Enter, 1281 00:59:44,910 --> 00:59:48,460 nampaknya Google menghantar input teks saya ke URL ini 1282 00:59:48,460 --> 00:59:50,770 bahawa saya telah menekankan terdapat, slash carian. 1283 00:59:50,770 --> 00:59:56,530 Rupa-rupanya, dalam URL, apa-apa yang yang berlaku selepas tanda tanya adalah, 1284 00:59:56,530 --> 01:00:01,270 seperti yang kita terus mengatakan, sepasang-nilai utama yang ditaip ke dalam borang atau entah bagaimana 1285 01:00:01,270 --> 01:00:04,500 dihantar dari pelayar untuk pelayan. 1286 01:00:04,500 --> 01:00:07,180 >> Jadi bila-bila masa anda menaip input ke dalam bentuk di web 1287 01:00:07,180 --> 01:00:10,000 dan ia dihantar sebagai kami telah telah membincangkan, melalui get a, 1288 01:00:10,000 --> 01:00:12,400 salah satu maya sampul surat, kandungan 1289 01:00:12,400 --> 01:00:15,510 itu envelope-- ya, menjaga mendapat disumbat fizikal 1290 01:00:15,510 --> 01:00:19,010 ke dalam sampul surat di dalam kelas hari ini, tetapi teknologi 1291 01:00:19,010 --> 01:00:21,110 ia sebenarnya dimasukkan ke dalam URL. 1292 01:00:21,110 --> 01:00:22,940 Jadi sebenarnya, biarlah saya menapis melalui ini. 1293 01:00:22,940 --> 01:00:25,010 Di mana kamu melihat input pengguna? 1294 01:00:25,010 --> 01:00:27,490 Di mana kamu melihat sesuatu bahawa saya sendiri ditaip di sini? 1295 01:00:27,490 --> 01:00:32,100 1296 01:00:32,100 --> 01:00:33,491 Ya, jadi "kucing." 1297 01:00:33,491 --> 01:00:33,990 Betul? 1298 01:00:33,990 --> 01:00:36,380 Jadi biarlah saya menyuling ini menjadi sesuatu yang mudah. 1299 01:00:36,380 --> 01:00:39,917 Saya akan memadam segala-galanya tentang URL ini yang saya tidak faham, 1300 01:00:39,917 --> 01:00:42,250 dan saya hanya akan meninggalkan sebagai this-- / Mencari? q = kucing. 1301 01:00:42,250 --> 01:00:45,640 1302 01:00:45,640 --> 01:00:47,890 Kami akan melihat di mana q datang dari dalam seketika, 1303 01:00:47,890 --> 01:00:51,220 tetapi yang terasa seperti minimum Jumlah maklumat yang saya berikan. 1304 01:00:51,220 --> 01:00:53,050 Dan sekarang saya akan tekan Enter. 1305 01:00:53,050 --> 01:00:55,520 Dan perhatikan ia masih berfungsi. 1306 01:00:55,520 --> 01:00:57,950 Kita masih mendapatkan kembali sejumlah besar kucing. 1307 01:00:57,950 --> 01:01:00,340 Jadi Google adalah pelamun daripada ini hari ini. 1308 01:01:00,340 --> 01:01:01,934 Ia adalah 2016, bukan 1999. 1309 01:01:01,934 --> 01:01:04,600 Jadi ada barangan lain yang saya pelayar menghantar kepada pelayan. 1310 01:01:04,600 --> 01:01:07,100 Tetapi ini adalah minimum semua yang anda perlukan. 1311 01:01:07,100 --> 01:01:08,380 >> Jadi apa yang berlaku? 1312 01:01:08,380 --> 01:01:14,320 Well, izinkanlah aku pergi ke hadapan dan pergi kembali ke Cloud9 dan biarlah saya pergi ke hadapan 1313 01:01:14,320 --> 01:01:15,620 dan menutup tab saya sebelum ini. 1314 01:01:15,620 --> 01:01:18,230 Dan saya akan melakukan ini pada saya memiliki hanya untuk seketika. 1315 01:01:18,230 --> 01:01:20,730 Saya akan pergi ke hadapan dan buat fail baru. 1316 01:01:20,730 --> 01:01:23,739 Dan saya akan simpan sebagai google.html. 1317 01:01:23,739 --> 01:01:26,280 Dan saya akan sangat quickly-- Saya akan mencuri, sebenarnya, 1318 01:01:26,280 --> 01:01:28,510 beberapa teks ini hanya untuk menjimatkan masa. 1319 01:01:28,510 --> 01:01:30,610 Saya akan paste ini di sini. 1320 01:01:30,610 --> 01:01:33,850 Saya tidak akan mengganggu dengan apa-apa penyesuaian dgn mode masa ini. 1321 01:01:33,850 --> 01:01:38,340 Kami akan memanggil ini "My Google." 1322 01:01:38,340 --> 01:01:41,230 Dan saya akan menghilangkan segala-galanya di dalam badan. 1323 01:01:41,230 --> 01:01:42,740 Dan saya akan melakukan yang berikut. 1324 01:01:42,740 --> 01:01:45,690 Biar saya zum masuk. 1325 01:01:45,690 --> 01:01:50,620 Borang action-- dan seperti yang saya secara ringkas disebut earlier-- whoops-- kerana saya secara ringkas 1326 01:01:50,620 --> 01:01:54,130 yang dinyatakan sebelum ini, tindakan yang bentuk adalah di mana anda menghantar data ke. 1327 01:01:54,130 --> 01:01:56,620 Jadi google.com/search. 1328 01:01:56,620 --> 01:01:59,390 Dan kaedah yang saya mahu menggunakan boleh menjadi salah satu daripada dua perkara. 1329 01:01:59,390 --> 01:02:02,870 Ia sama ada boleh "mendapatkan," kerana kami menjaga membincangkan, atau ia boleh menjadi "pos." 1330 01:02:02,870 --> 01:02:05,340 Buat masa ini, asas perbezaan adalah, jika anda menggunakan "mendapatkan" 1331 01:02:05,340 --> 01:02:09,590 semua maklumat bahawa pengguna memberikan akan dihantar dalam URL. 1332 01:02:09,590 --> 01:02:13,530 >> Yang besar untuk perkara seperti mencari enjin dan beberapa aplikasi yang lain, 1333 01:02:13,530 --> 01:02:17,080 tetapi dalam keadaan tertentu akan anda tidak mahu mengisi borang 1334 01:02:17,080 --> 01:02:21,620 dan telah maklumat yang berakhir yang URL, seperti dalam bar alamat penyemak imbas anda? 1335 01:02:21,620 --> 01:02:25,470 1336 01:02:25,470 --> 01:02:26,605 Apakah jenis bentuk melakukan atasmu, 1337 01:02:26,605 --> 01:02:27,480 PENONTON: [didengar] 1338 01:02:27,480 --> 01:02:28,450 DAVID J. MALAN: Ya, seperti apa? 1339 01:02:28,450 --> 01:02:29,270 PENONTON: Kata Laluan. 1340 01:02:29,270 --> 01:02:31,936 DAVID J. MALAN: Ya, jadi anda log masuk masuk ke Facebook atau beberapa laman web. 1341 01:02:31,936 --> 01:02:34,395 Itulah input pengguna dari satu bentuk, kotak teks, 1342 01:02:34,395 --> 01:02:37,020 tetapi anda mungkin tidak mahu ia muncul dalam URL pelayar. 1343 01:02:37,020 --> 01:02:38,121 Mengapa? 1344 01:02:38,121 --> 01:02:40,870 Maksud saya, mungkin terdapat beberapa implikasi keselamatan pada rangkaian, 1345 01:02:40,870 --> 01:02:44,830 tetapi more-- suka, lebih mudah, bagaimana jika rakan sebilik anda, lain penting anda, 1346 01:02:44,830 --> 01:02:47,710 anak-anak anda, pasangan anda kelihatan melalui sejarah pelayar anda? 1347 01:02:47,710 --> 01:02:50,762 Terdapat betul kata laluan anda terdapat dalam sejarah penyemak imbas anda. 1348 01:02:50,762 --> 01:02:52,220 Yang tidak merasa seperti reka bentuk yang baik. 1349 01:02:52,220 --> 01:02:54,500 Atau lebih dari segi teknikal, andaikan anda cuba 1350 01:02:54,500 --> 01:02:59,180 untuk memuat naik gambar ke Flickr atau Facebook atau wherever-- 1351 01:02:59,180 --> 01:03:03,010 iaitu input pengguna, walaupun ia sedikit lebih interesting-- bagaimana 1352 01:03:03,010 --> 01:03:05,530 saya mengasak imej dalam bar URL? 1353 01:03:05,530 --> 01:03:06,730 Anda jenis jenis tidak boleh. 1354 01:03:06,730 --> 01:03:07,396 Anda jenis boleh. 1355 01:03:07,396 --> 01:03:10,210 Tetapi, benar-benar, saya tertekan untuk membayangkan melakukannya. 1356 01:03:10,210 --> 01:03:13,470 Jadi saya perlu kaedah lain untuk memuat naik foto ke laman web, 1357 01:03:13,470 --> 01:03:15,657 dan kaedah yang lain dipanggil "post". 1358 01:03:15,657 --> 01:03:18,740 Tetapi untuk sekarang, kita hanya akan bercakap tentang "Mendapatkan," yang lebih mudah daripada dua. 1359 01:03:18,740 --> 01:03:21,100 Ia hanya meletakkan semua input pengguna ke dalam URL. 1360 01:03:21,100 --> 01:03:22,830 >> Jadi di sini adalah bentuk yang saya mencipta. 1361 01:03:22,830 --> 01:03:24,070 Saya hendak input. 1362 01:03:24,070 --> 01:03:24,820 Dan anda tahu apa? 1363 01:03:24,820 --> 01:03:26,111 Saya akan mengambil tekaan di sini. 1364 01:03:26,111 --> 01:03:31,600 Saya akan ingat saya input "q" untuk "pertanyaan." 1365 01:03:31,600 --> 01:03:34,970 Dan saya rasa ini adalah salah satu daripada reka bentuk asal, mungkin, dari tahun 1999. 1366 01:03:34,970 --> 01:03:39,560 Dan kemudian jenis input ini hanya akan menjadi "teks." 1367 01:03:39,560 --> 01:03:43,040 Dan kemudian saya akan mempunyai input lain yang tidak memerlukan nama, seperti yang kita akan tidak lama lagi 1368 01:03:43,040 --> 01:03:45,120 lihat, jenis iaitu "selamat." 1369 01:03:45,120 --> 01:03:47,070 Dan ini akan memberi saya butang khas. 1370 01:03:47,070 --> 01:03:48,320 Dan itu sahaja. 1371 01:03:48,320 --> 01:03:50,790 >> Jadi biarlah saya pergi ke hadapan dan menyimpan fail ini. 1372 01:03:50,790 --> 01:03:54,910 Saya akan kembali kepada saya pelayar dan pergi ke google.html. 1373 01:03:54,910 --> 01:03:56,140 Enter. 1374 01:03:56,140 --> 01:03:59,680 Dan ia adalah jenis jarang untuk mengatakan sekurang-kurangnya. 1375 01:03:59,680 --> 01:04:03,110 Tetapi biarlah saya pergi ke hadapan dan mencari "kucing." 1376 01:04:03,110 --> 01:04:06,510 Dan perhatikan Saya kini di URL Cloud9 ini. 1377 01:04:06,510 --> 01:04:09,240 Tetapi buat masa ini saya klik ini, di manakah anda berharap saya akan berakhir? 1378 01:04:09,240 --> 01:04:10,160 >> PENONTON: Google. 1379 01:04:10,160 --> 01:04:11,118 >> DAVID J. MALAN: Google. 1380 01:04:11,118 --> 01:04:12,740 Jadi mari kita klik Serah. 1381 01:04:12,740 --> 01:04:15,200 Dan sesungguhnya saya telah melaksanakan semula Google. 1382 01:04:15,200 --> 01:04:15,700 Betul? 1383 01:04:15,700 --> 01:04:16,480 Ia adalah lebih mudah. 1384 01:04:16,480 --> 01:04:17,120 Ia adalah lebih ringan. 1385 01:04:17,120 --> 01:04:20,350 Maksud saya, kod saya adalah jelas lebih baik daripada mereka, daripada keadaan huru-hara yang kita lihat sebelum ini. 1386 01:04:20,350 --> 01:04:21,100 Dan anda tahu apa? 1387 01:04:21,100 --> 01:04:22,610 Saya akan memeriahkan ini sehingga sedikit. 1388 01:04:22,610 --> 01:04:23,860 Saya tidak menyebut ini lebih awal. 1389 01:04:23,860 --> 01:04:27,860 Terdapat tag seperti H1, untuk Tajuk 1, tajuk yang paling penting dalam halaman. 1390 01:04:27,860 --> 01:04:30,570 "Google saya," Saya akan memanggil ini. 1391 01:04:30,570 --> 01:04:31,940 Biar saya tambah nilai. 1392 01:04:31,940 --> 01:04:33,772 Ia kelihatan sedikit lebih baik sudah. 1393 01:04:33,772 --> 01:04:34,980 Dan, sebenarnya, anda tahu apa? 1394 01:04:34,980 --> 01:04:36,430 Saya telah already-- saya berbohong. 1395 01:04:36,430 --> 01:04:40,200 Saya kata saya tidak akan untuk gaya ini, tetapi saya akan untuk gaya ini seperti sebelum ini. 1396 01:04:40,200 --> 01:04:46,860 Dan badan saya akan menjadi, katakan, pusat text-align. 1397 01:04:46,860 --> 01:04:48,800 Ia kelihatan lebih seperti Google sudah. 1398 01:04:48,800 --> 01:04:51,090 >> Saya memerlukan satu baris, walaupun, untuk butang Submit. 1399 01:04:51,090 --> 01:04:52,798 Dan ternyata, anda boleh menggunakan perenggan, 1400 01:04:52,798 --> 01:04:57,320 atau anda boleh lebih literal hanya berkata, memberi saya garis rehat sini-- tag br itu. 1401 01:04:57,320 --> 01:04:59,319 Dan jika saya menambah nilai ini, kini ia pergi ke sana. 1402 01:04:59,319 --> 01:05:01,610 Ia sedikit hodoh, jadi saya boleh melakukan hentian baris, 1403 01:05:01,610 --> 01:05:03,310 tetapi jangan kita terlalu tamak di sini. 1404 01:05:03,310 --> 01:05:06,430 Jadi sekarang mari kita lihat jika ia berfungsi untuk "anjing." 1405 01:05:06,430 --> 01:05:08,640 Ia seolah-olah bekerja untuk "anjing," juga. 1406 01:05:08,640 --> 01:05:10,780 Jadi apa maklumat mengenai restoran yang menarik di sini? 1407 01:05:10,780 --> 01:05:13,600 One-- tidak membawa perubahan besar kepada memperkenalkan beberapa lagi tag, 1408 01:05:13,600 --> 01:05:15,370 seperti tag borang di dalam tag input. 1409 01:05:15,370 --> 01:05:17,120 Tetapi lebih asas adalah, semua yang kita lakukan 1410 01:05:17,120 --> 01:05:20,610 memanfaatkan pemahaman kita HTTP dan hakikat 1411 01:05:20,610 --> 01:05:24,900 bahawa bentuk-bentuk akhirnya mengubah apa yang ada di dalam URL pelayar, 1412 01:05:24,900 --> 01:05:28,540 dan sebagainya, oleh itu, kita boleh mekanikal memberi input kepada pelayan 1413 01:05:28,540 --> 01:05:33,600 dengan membuat bentuk HTML dan mengetahui bahawa pelayan itu memahami HTTP, 1414 01:05:33,600 --> 01:05:36,890 sama seperti badan kita memahami, seperti, berjabat tangan saya, protokol yang sama, 1415 01:05:36,890 --> 01:05:40,920 dan supaya kita kembali sambutan bahawa kita akhirnya harapkan. 1416 01:05:40,920 --> 01:05:44,050 >> Jadi mari kita cuba untuk melakukan satu Perkara terakhir yang kini dengan mudah alih, 1417 01:05:44,050 --> 01:05:47,052 dan saya akan make-- saya akan menambah kod ini untuk slaid. 1418 01:05:47,052 --> 01:05:49,760 Jadi, jika anda sedang bermain-main, anda pasti boleh mengambil dari sana. 1419 01:05:49,760 --> 01:05:51,551 Tetapi saya akan pergi ke hadapan dan melakukan satu perkara. 1420 01:05:51,551 --> 01:05:54,120 Saya akan pergi ke hadapan dan membuka page-- indeks saya 1421 01:05:54,120 --> 01:05:59,030 halaman hello saya seperti sebelum ini, yang mempunyai banyak teks palsu-Latin ini, 1422 01:05:59,030 --> 01:06:05,470 atau tidak bermakna teks Latin, dan has-- ia kelihatan seperti ini pada saiz font ini. 1423 01:06:05,470 --> 01:06:07,850 Tetapi biarlah saya pergi ke hadapan dan melakukan ini. 1424 01:06:07,850 --> 01:06:09,300 Saya akan pergi ke Cloud9. 1425 01:06:09,300 --> 01:06:10,380 Dan anda tidak perlu melakukan langkah ini. 1426 01:06:10,380 --> 01:06:11,420 Saya hanya akan melakukannya sendiri. 1427 01:06:11,420 --> 01:06:12,890 Saya akan klik Kongsi. 1428 01:06:12,890 --> 01:06:15,170 Dan ini adalah ciri-ciri yang adil Cloud9, di mana 1429 01:06:15,170 --> 01:06:17,710 Saya boleh membuat persekitaran saya ramai. 1430 01:06:17,710 --> 01:06:20,240 >> Dan hanya demi demonstrasi, saya melakukan ini. 1431 01:06:20,240 --> 01:06:22,870 Saya akan membuat orang ramai permohonan saya. 1432 01:06:22,870 --> 01:06:25,230 Perhatikan ia memberi amaran kepada saya, saya sedang Saya pasti saya mahu untuk melakukan ini, 1433 01:06:25,230 --> 01:06:28,438 kerana ini akan membuat semua orang di dunia, sama ada mereka berada di sini sekarang 1434 01:06:28,438 --> 01:06:33,560 atau menonton video terkemudian dalam internet dapat melihat apa yang saya lihat. 1435 01:06:33,560 --> 01:06:34,440 Tetapi itu OK. 1436 01:06:34,440 --> 01:06:37,870 Saya akan mengatakan "Selesai." 1437 01:06:37,870 --> 01:06:42,080 Dan biarlah saya menggalakkan anda, jika saya ini correctly-- biarlah saya menguji terlebih dahulu. 1438 01:06:42,080 --> 01:06:45,590 Teruskan, jika anda tidak mind-- dalam penyemak imbas pada komputer anda, 1439 01:06:45,590 --> 01:06:49,900 pergi ke URL ini, dan mudah-mudahan anda akan melihat teks Latin saya. 1440 01:06:49,900 --> 01:06:52,820 Dan untuk menjadi jelas, ia tidak berjalan pada komputer riba saya. 1441 01:06:52,820 --> 01:06:53,610 Ada dalam awan. 1442 01:06:53,610 --> 01:06:58,120 Ia pada Cloud9, secara literal, tetapi Saya telah membuat awam ruang kerja saya 1443 01:06:58,120 --> 01:07:03,450 supaya sesiapa sahaja di internet boleh mengakses halaman rumah Latin saya. 1444 01:07:03,450 --> 01:07:07,209 >> Pergi ke URL yang sama pada telefon anda, jika anda boleh. 1445 01:07:07,209 --> 01:07:09,750 Jika ia akan kos anda, walaupun, anda hanya boleh melihat ke atas bahu. 1446 01:07:09,750 --> 01:07:40,688 1447 01:07:40,688 --> 01:07:42,467 PENONTON: [didengar] 1448 01:07:42,467 --> 01:07:43,550 DAVID J. MALAN: Saya minta maaf? 1449 01:07:43,550 --> 01:07:45,390 PENONTON: [didengar] 1450 01:07:45,390 --> 01:07:47,710 DAVID J. MALAN: Hanya kata-kata Latin. 1451 01:07:47,710 --> 01:07:48,210 Itu sahaja. 1452 01:07:48,210 --> 01:07:49,250 Tetapi itulah apa yang anda akan dapat melihat. 1453 01:07:49,250 --> 01:07:49,875 >> PENONTON: Ya. 1454 01:07:49,875 --> 01:07:50,790 DAVID J. MALAN: Ya. 1455 01:07:50,790 --> 01:07:51,300 Yeah. 1456 01:07:51,300 --> 01:07:51,540 OKEY. 1457 01:07:51,540 --> 01:07:53,530 Jadi boleh saya pegang sehingga anda telefon hanya untuk seketika? 1458 01:07:53,530 --> 01:07:57,504 Jadi, mudah-mudahan, jika anda mengakses ia, ia perlu kelihatan hampir tidak boleh dibaca. 1459 01:07:57,504 --> 01:07:59,920 Ia wujud-- Maksud saya, ia adalah dibaca kerana Latin. 1460 01:07:59,920 --> 01:08:01,920 Tetapi ia juga boleh dibaca untuk apa sebab lain? 1461 01:08:01,920 --> 01:08:03,775 Seperti, apa yang jahat anda tentang perkara ini? 1462 01:08:03,775 --> 01:08:04,650 PENONTON: Ia kecil. 1463 01:08:04,650 --> 01:08:06,420 DAVID J. MALAN: Ia sangat, super kecil. 1464 01:08:06,420 --> 01:08:07,920 Jadi bagaimana kita boleh menetapkan ini? 1465 01:08:07,920 --> 01:08:09,730 Ia sangat, super kecil pada telefon Victoria 1466 01:08:09,730 --> 01:08:11,400 dan, jika anda telah ditarik ia sehingga diri anda, mungkin 1467 01:08:11,400 --> 01:08:14,660 kecil pada telefon anda juga, melainkan anda mempunyai tetapan kebolehcapaian yang aktif. 1468 01:08:14,660 --> 01:08:15,530 Apa itu? 1469 01:08:15,530 --> 01:08:18,497 Anda hanya boleh picit dan zoom, yang boleh dilaksanakan, 1470 01:08:18,497 --> 01:08:20,330 tetapi kemudian anda hanya melihat Beberapa fakta yang pada satu masa. 1471 01:08:20,330 --> 01:08:20,859 Jadi tunggu satu minit. 1472 01:08:20,859 --> 01:08:21,720 Saya tahu bagaimana untuk menetapkan ini. 1473 01:08:21,720 --> 01:08:22,219 Betul? 1474 01:08:22,219 --> 01:08:26,130 Saya boleh menggunakan CSS, dan saya boleh menukar saiz fon dari 12 mata kepada 24 mata. 1475 01:08:26,130 --> 01:08:29,020 Tetapi kesan sampingan itu, sudah tentu, akan menjadi sekarang, 1476 01:08:29,020 --> 01:08:32,630 pada desktop atau komputer riba, sekarang teks ini adalah dua kali ganda lebih besar. 1477 01:08:32,630 --> 01:08:35,810 Dan oleh itu jenis akan lebih baik untuk membezakan antara peranti, 1478 01:08:35,810 --> 01:08:37,840 dan ternyata ada adalah cara untuk melakukan itu. 1479 01:08:37,840 --> 01:08:39,590 Terdapat beberapa cara yang berbeza, sebenarnya, 1480 01:08:39,590 --> 01:08:44,189 mana menggunakan CSS dan ciri-ciri pelamun bahawa kita tidak akan masuk ke dalam dengan terperinci, 1481 01:08:44,189 --> 01:08:46,960 anda pada dasarnya boleh query pelayar dan berkata, 1482 01:08:46,960 --> 01:08:51,550 jika skrin anda adalah lebih kecil daripada ini banyak piksel, menggunakan saiz font ini. 1483 01:08:51,550 --> 01:08:55,180 Jika skrin anda adalah lebih besar daripada ini banyak piksel, menggunakan saiz fon lain ini. 1484 01:08:55,180 --> 01:08:57,080 >> Anda boleh menjadi lebih pelamun masih. 1485 01:08:57,080 --> 01:09:00,140 Jika anda pernah melawat Laman web itu, di atas meja, 1486 01:09:00,140 --> 01:09:04,404 mempunyai menu besar mungkin akan ke pihak, dan kemudian semua kandungan 1487 01:09:04,404 --> 01:09:07,029 adalah ke tepi yang menu-- itulah jenis paradigma biasa. 1488 01:09:07,029 --> 01:09:09,670 Menu di sebelah kiri, kandungan di sebelah kanan, atau sebaliknya. 1489 01:09:09,670 --> 01:09:13,569 Tidak benar-benar bekerja di telefon bimbit apabila anda skrin hanya ini banyak piksel lebar. 1490 01:09:13,569 --> 01:09:16,233 Jadi lebih biasa di telefon bimbit adalah, menu anda akan tiba-tiba mendapat 1491 01:09:16,233 --> 01:09:18,399 runtuh, dan anda perlu klik butang untuk melihat, 1492 01:09:18,399 --> 01:09:22,404 atau laman web akan meletakkan menu di atasnya dan meletakkan kandungan di bawahnya. 1493 01:09:22,404 --> 01:09:24,779 Dan anda boleh melaksanakan ini perkara-perkara dalam pelbagai cara juga. 1494 01:09:24,779 --> 01:09:28,340 Anda boleh meminta pengaturcara anda, hey, pasukan, bila-bila masa 1495 01:09:28,340 --> 01:09:34,450 anda melihat permintaan HTTP dari Android yang peranti, peranti Microsoft, Google 1496 01:09:34,450 --> 01:09:39,930 peranti, peranti Apple, gunakan ini saiz fon dan menggunakan susun atur menu ini, 1497 01:09:39,930 --> 01:09:42,670 atau lain menggunakan susun atur lalai ini lebih besar. 1498 01:09:42,670 --> 01:09:45,410 >> Kini, dengan menggunakan apa teknik asas hari ini 1499 01:09:45,410 --> 01:09:48,529 boleh jurutera menggunakan tahu sama ada ia 1500 01:09:48,529 --> 01:09:53,660 iPhone, telefon Android, komputer riba, desktop melawat server syarikat? 1501 01:09:53,660 --> 01:09:55,310 Di mana mereka mendapat maklumat itu? 1502 01:09:55,310 --> 01:09:56,080 >> PENONTON: Tandukan? 1503 01:09:56,080 --> 01:09:57,740 >> DAVID J. MALAN: Ya, header HTTP. 1504 01:09:57,740 --> 01:10:01,714 Jadi setiap permintaan HTTP datang dari pelanggan mereka untuk pelayan mereka 1505 01:10:01,714 --> 01:10:03,880 termasuk, di dalam yang maya sampul surat, sejumlah 1506 01:10:03,880 --> 01:10:08,260 pengepala HTTP, salah satu daripadanya ialah pelayar dan sistem operasi 1507 01:10:08,260 --> 01:10:10,290 walaupun, jika anda mengambil berat untuk bahawa tahap lanjut. 1508 01:10:10,290 --> 01:10:13,790 Sekarang, ia adalah satu rentetan samar-cari, tetapi wujud perisian yang akan hanya 1509 01:10:13,790 --> 01:10:18,530 memudahkan itu, dan anda hanya boleh meminta dalam pengaturcaraan code-- PHP, Java, C ++, 1510 01:10:18,530 --> 01:10:23,650 whatever-- apa yang telefon adalah this-- apa peranti user ini gunakan? 1511 01:10:23,650 --> 01:10:27,501 Dan kemudian anda boleh berkata, menunjukkan kepada mereka ini versi laman web jika ia adalah telefon. 1512 01:10:27,501 --> 01:10:30,250 Menunjukkan kepada mereka versi ini laman web jika ia adalah satu komputer riba atau desktop. 1513 01:10:30,250 --> 01:10:32,316 Tetapi anda tidak perlu server-side kerumitan. 1514 01:10:32,316 --> 01:10:33,940 Anda boleh melakukannya walaupun yang paling mudah perkara. 1515 01:10:33,940 --> 01:10:34,815 >> Saya akan melakukan ini. 1516 01:10:34,815 --> 01:10:38,995 Saya akan pergi ke hadapan ke dalam persekitaran Cloud9 saya, 1517 01:10:38,995 --> 01:10:41,370 dan saya akan menambah teg yang anda lihat dalam Google sebelum ini. 1518 01:10:41,370 --> 01:10:42,770 Ia dipanggil metatag ini. 1519 01:10:42,770 --> 01:10:45,520 Dan saya tidak pernah ingat satu ini, jadi Saya akan menyalin di sini. 1520 01:10:45,520 --> 01:10:50,552 nama Meta = "Viewport" dan kemudian content = "width = lebar peranti, intital 1521 01:10:50,552 --> 01:11:02,060 skala = 1 "dan itu sahaja. 1522 01:11:02,060 --> 01:11:06,230 >> Oleh itu, ia mungkin juga menjadi seperti suatu mantera ajaib. 1523 01:11:06,230 --> 01:11:11,300 Ia bukan semua yang jelas, tetapi ini mempunyai sesuatu untuk dilakukan dengan viewport, 1524 01:11:11,300 --> 01:11:15,070 dan viewport hanya mayat seorang halaman web, kawasan segi empat tepat yang 1525 01:11:15,070 --> 01:11:16,690 mentakrifkan paling atas halaman. 1526 01:11:16,690 --> 01:11:19,060 Dan ini hanya memberitahu penyemak imbas, anda tahu apa? 1527 01:11:19,060 --> 01:11:22,589 Membuat lebar halaman ini berkesan sama dengan lebar peranti. 1528 01:11:22,589 --> 01:11:25,380 Dalam erti kata lain, jangan menganggap bahawa anda mempunyai keadaan ruang yang tidak terhad. 1529 01:11:25,380 --> 01:11:29,920 Andaikan anda hanya mempunyai sebanyak ruang sebagai peranti itu sendiri adalah besar. 1530 01:11:29,920 --> 01:11:34,454 Dan sekarang, jika saya menambah nilai ini dalam pelayar saya, saya melihat tidak ada perubahan. 1531 01:11:34,454 --> 01:11:37,370 Tetapi jika saya correctly-- ini dan biarlah aku menyeberang fingers-- saya jika anda semua 1532 01:11:37,370 --> 01:11:42,920 tambah nilai telefon anda, adakah anda melihat perubahan menarik? 1533 01:11:42,920 --> 01:11:43,620 Ya, adalah bahawa- 1534 01:11:43,620 --> 01:11:45,067 >> PENONTON: [didengar] 1535 01:11:45,067 --> 01:11:45,900 DAVID J. MALAN: Ya. 1536 01:11:45,900 --> 01:11:46,400 OKEY. 1537 01:11:46,400 --> 01:11:47,850 Jadi boleh dikatakan lebih senang dibaca sekarang? 1538 01:11:47,850 --> 01:11:53,070 Masih kecil, untuk berlaku adil, tetapi tidak begitu kecil untuk menjadi tidak terurus. 1539 01:11:53,070 --> 01:11:56,920 Dan saya pasti boleh mengatasi ini lanjut dengan CSS atau di sebelah pelayan, 1540 01:11:56,920 --> 01:12:00,120 tetapi semakin apa yang anda melihat adalah lebih dan lebih banyak ciri 1541 01:12:00,120 --> 01:12:02,900 ditambah kepada klien environments-- 1542 01:12:02,900 --> 01:12:06,530 JavaScript, seperti yang kita akan membincangkan esok, CSS, dan HTML-- supaya 1543 01:12:06,530 --> 01:12:09,190 bahawa semua pertanyaan ini boleh dilakukan pada pelanggan 1544 01:12:09,190 --> 01:12:11,910 supaya dapat mengganggu server banyak yang kurang dan tidak 1545 01:12:11,910 --> 01:12:14,530 untuk mempunyai untuk bersaing dengan, untuk contoh, serangan yang berterusan 1546 01:12:14,530 --> 01:12:17,210 baru sistem operasi versi, versi pelayar baru. 1547 01:12:17,210 --> 01:12:20,190 Anda hanya boleh membiarkan pelayar meminta peranti, berapa besar yang anda, 1548 01:12:20,190 --> 01:12:22,890 dan kemudian membuat agak logik keputusan berdasarkan itu. 1549 01:12:22,890 --> 01:12:25,140 Tetapi kita akan melihat lebih banyak peluang untuk keputusan yang logik 1550 01:12:25,140 --> 01:12:27,223 esok dalam konteks daripada bahasa pengaturcaraan. 1551 01:12:27,223 --> 01:12:29,800 1552 01:12:29,800 --> 01:12:32,760 >> Jadi, apa-apa soalan, maka, kepada pembangunan web? 1553 01:12:32,760 --> 01:12:36,130 Hari ini bukan pengaturcaraan web, setiap se, kerana kebanyakan semua yang kita lakukan 1554 01:12:36,130 --> 01:12:38,370 sangat estetik, jika anda akan. 1555 01:12:38,370 --> 01:12:41,750 Tidak ada keputusan dalam kod yang kita telah menulis, 1556 01:12:41,750 --> 01:12:44,990 dan jadi itu sebabnya HTML markup bahasa, bukan bahasa pengaturcaraan. 1557 01:12:44,990 --> 01:12:47,140 Tetapi esok kita akan mengambil melihat cepat, akhirnya, 1558 01:12:47,140 --> 01:12:49,340 di JavaScript, yang pengaturcaraan sebenar 1559 01:12:49,340 --> 01:12:54,220 bahasa yang membolehkan kita melakukan sedikit lebih. 1560 01:12:54,220 --> 01:12:56,800 >> Ada soalan? 1561 01:12:56,800 --> 01:13:00,480 Baiklah, biar saya mencadangkan dua peluang pilihan untuk kerja rumah. 1562 01:13:00,480 --> 01:13:02,900 Satu is-- ini Cloud9 akaun tidak akan tamat. 1563 01:13:02,900 --> 01:13:04,669 Anda dialu-alukan untuk menggunakan mereka untuk bermain-main dengan. 1564 01:13:04,669 --> 01:13:05,960 Ia tahap bebas perkhidmatan. 1565 01:13:05,960 --> 01:13:08,754 Sedar bahawa, jika semasa membuat ruang kerja anda, anda membuat ia awam, 1566 01:13:08,754 --> 01:13:11,670 yang tidak bermakna bahawa sesiapa pada internet boleh melihat apa yang anda taip. 1567 01:13:11,670 --> 01:13:15,104 Jadi mungkin hanya menganggap tidak memalukan diri 1568 01:13:15,104 --> 01:13:18,020 jika anda meletakkan web pertama anda halaman di luar sana kepada umum tidak sengaja, 1569 01:13:18,020 --> 01:13:20,134 tetapi tiada siapa yang akan tahu untuk melihat di sana juga. 1570 01:13:20,134 --> 01:13:23,760 >> Dan two-- biarlah saya melambungkan sehingga URL ini juga, 1571 01:13:23,760 --> 01:13:28,250 terutamanya jika anda datang pada hari ini sedikit kurang selesa daripada yang lain, 1572 01:13:28,250 --> 01:13:30,430 pasti apa semua ini bermakna. 1573 01:13:30,430 --> 01:13:36,780 Sedar bahawa banyak lagi video ini, yang kedua-dua cara yang baik untuk tidur 1574 01:13:36,780 --> 01:13:39,380 dan juga untuk ketawa semasa berbuat demikian, juga mempunyai 1575 01:13:39,380 --> 01:13:44,300 banyak societally menarik dan perbincangan keselamatan berkaitan 1576 01:13:44,300 --> 01:13:47,370 dalamnya daripada John Oliver, walaupun pelawak. 1577 01:13:47,370 --> 01:13:55,456 >> Tetapi jika tidak ada pertanyaan lanjut, yang membawa kita ke majlis tersebut. 1578 01:13:55,456 --> 01:13:56,830 Jadi mengapa tidak saya menghidupkan muzik. 1579 01:13:56,830 --> 01:13:58,610 Perlu ada minuman dan makanan ringan di luar. 1580 01:13:58,610 --> 01:14:00,220 Saya gembira untuk bergaul sebagai selagi orang akan suka, 1581 01:14:00,220 --> 01:14:01,600 menjawab soalan yang lebih pada satu-satu. 1582 01:14:01,600 --> 01:14:03,330 Tetapi, jika tidak, anda dialu-alukan untuk berlepas pada bila-bila, 1583 01:14:03,330 --> 01:14:05,740 dan kami akan berjumpa lagi pagi esok untuk sedikit lebih. 1584 01:14:05,740 --> 01:14:07,290 Baiklah, terima kasih. 1585 01:14:07,290 --> 01:14:10,428