[MUSIC PLAYING] DAVID J Malan: Baiklah, selamat datang kembali. Ini adalah CS50. Ini adalah akhir minggu ketujuh. Dan itu adalah akhir pemulung yang berburu dari masalah menetapkan empat Anda mungkin ingat. Setelah sembuh semua mereka JPEG staf, Anda ditantang, jika Anda ingin, untuk memotret diri sendiri dengan sebanyak dari orang-orang yang Anda bisa. Kami mendapat sejumlah besar kiriman selama beberapa minggu terakhir, memang, beberapa tepat sebelum tengah hari hari ini, beberapa di antaranya adalah mereka di sini, tertangkap di sini in-- terlihat like-- Annenberg Hall di jam kantor, satu di sini di Lowell rumah dengan Nick. Berikut ini Ramon tertangkap di telepon. Ini adalah pada siang CS50. Ini adalah Jason Skyping dengan teman sekelas yang lebih kreatif, yang menelepon dia dengan cara ini. Kita tidak tahu apa ini. 

[Tertawa] 

DAVID J Malan: Tapi yang layak gigabyte. Berikut ini adalah Chang, yang harfiah berlari dari panggung untuk menghindari difoto satu hari, namun akhirnya tertangkap. Berikut ini adalah Nick. Berikut ini adalah Nick. Berikut ini adalah Nick. Dan di sini adalah Alison turun oleh ladang. Dan Zamyla bahkan ditemukan di kompetisi ballroom. Jadi kita akan melalui foto-foto ini, mencari tahu yang mengajukan paling awal, dan reward satu hadiah yang luar biasa, sebagai dijanjikan dalam spec. Dan kami juga akan menindaklanjuti tentang ruang yang terlibat. 

Beberapa announcements-- jadi makan siang adalah, sekali lagi, Jumat ini di 1:15. Jika Anda ingin bergabung dengan kami, RSVP pada URL di sini. Jason muncul lagi di sini dari satu dari bagian beberapa tahun kembali, yang terjadi jatuh pada Halloween. Dan memang, ia berpakaian sebagai labu yang tahun tertentu. Jika Anda menonton bagian ini dari dari 2.011 bagian-Nya delapan, jika Anda ingin tahu, di CS50.tv, saya pikir ini adalah tahun di mana pompa udara nya bekerja. 

Jika Anda kemudian melihat bagian yang sama pada tahun 2012, Anda akan melihat Jason ini banyak kempes, karena gugatan tidak lagi berfungsi, yang hanya untuk mengatakan Jumat ini, jika Anda lebih ingin mengukir labu dengan Daven dan Gabe dan lain-lain, RSVP ke kepala di alamat cs50.harvard.edu. Menjanjikan untuk menjadi sangat menyenangkan. Daven, kami diberitahu, telah mengukir labu semua hidupnya. Gabriel dari Brazil tidak pernah mengukir labu untuk Halloween. Jadi berada di sana bersama mereka sambil belajar. 

Seminar, meanwhile-- sehingga Anda akan belajar segera tentang apa harapan kami adalah untuk proyek akhir, yang pada dasarnya akan mendidih ke merancang dan mengimplementasikan kebanyakan setiap proyek yang menarik bagi Anda, meskipun tunduk pada persetujuan dan bimbingan dari pengajaran sesama. Menjelang akhir semester, kami memperkenalkan nomor seminar, yang kelas opsional dipimpin oleh rekan-rekan mengajar dan Harvard staf, teman-teman tentu saja di kampus, tentang berbagai topik yang tangensial ke silabus yang mendasari program ini tapi tetap berlaku, menyenangkan, dan berbeda untuk proyek-proyek akhir yang potensial. 

Misalnya, pertama, jika Anda ingin untuk mendaftar, kepala ke URL di sana. Dan ini adalah lineup untuk seminar tahun ini saja. Tapi menyadari kami memiliki puluhan seminar dari masa lalu, yang semuanya terkait dalam menu Seminar pilihan website saja itu. Jadi, jika Anda berpikir tentang melampaui zona kenyamanan Anda atau mengambil beberapa keterampilan baru, misalnya, pemrograman iPhone aplikasi dengan Swift, bahasa baru dari Apple atau Objective-C atau aplikasi Android atau pemrograman [? isyarat?] bola lampu, atau salah satu topik di sini dan banyak lagi, karena cek keluar halaman pendaftaran. 

Jadi kita mulai dan berakhir pada Senin dengan melihat HTTP. Jadi HTTP refresher-- cepat, HyperText Transfer Protocol. Tapi apa yang benar-benar berarti? Apa yang benar-benar berarti? Apakah itu tangan? Aku tahu kau hanya menggaruk kepala Anda. Tapi Anda ingin mengusulkan apa HTTP adalah? 

AUDIENCE: Bagaimana komputer berkomunikasi dengan [tak terdengar]. DAVID J Malan: Saya melewatkan bagian terakhir. Bagaimana komputer berkomunikasi with-- 

Server Internet: AUDIENCE. DAVID J Malan: Good-- dengan internet server, dan secara khusus, server web. Karena ingat, ada sekelompok layanan di internet, beberapa di antaranya Anda menggunakan mungkin setiap hari antara obrolan dan pesan, chatting, dan web, dan email, dan sejenisnya. Dan HTTP hanyalah protokol yang web browser berbicara ketika berkomunikasi dengan server web, dan sebaliknya. Dan analog di dunia manusia mungkin, Saya mengulurkan tangan saya untuk menjabat beberapa manusia lainnya dan dia mengakui dengan memperluas atau tangannya juga. Jadi itu hanya protokol, seperangkat konvensi. 

Dan apa memang adalah mereka konvensi? Yah, itu hanya bermuara mengirim pesan bolak-balik, seperti yang kita digambarkan di sini. Dan ada beberapa cara di yang Anda dapat mengirimkan pesan tersebut. Dan mungkin yang paling umum dikenal sebagai get. Dan kita akan melihat kontras ini sebelum lama. 

Tapi permintaan get dari browser ke server hanya tampak seperti ini. Itu adalah sekumpulan teks yang menempatkan dalam amplop virtual. Di bagian luar amplop yang pergi beberapa potongan detail. Apa yang perlu untuk pergi pada amplop, sehingga untuk berbicara, untuk mendapatkan permintaan seperti ini dari saya ke server web? Ya. 

AUDIENCE: Alamat IP Anda. 

DAVID J Malan: alamat IP saya dalam field, sehingga untuk berbicara, dan tentu saja, alamat IP penerima. Tapi dalam kasus paket web, kita perlu sedikit lebih detail Hal ini tidak cukup hanya untuk mengirim amplop ke server, karena server yang mungkin mendengarkan untuk berbagai jenis lalu lintas internet. Jadi apa lagi yang kita butuhkan selain IP penerima? Ya? 

AUDIENCE: Apakah TCP? DAVID J Malan: Baik. TCP-- 

AUDIENCE: Alamat. 

DAVID J Malan: Alamat, atau port, seperti disebut. Dekat, tapi nomor port TCP. Dan ada sekelompok ini. Tapi tentunya yang paling akrab harus akhirnya 80, yang merupakan default yang digunakan untuk lalu lintas web. Dan akrab lain satu segera akan 443, yang digunakan untuk web yang aman lalu lintas, URL yang dimulai dengan https. 

Jadi ini adalah apa yang terjadi dalam amplop itu. Dan mendapatkan / hanya berarti, memberi saya halaman web default. Beri aku akar dari hard drive pada server web. Dan mudah-mudahan, web Server akan merespon dengan, OK dan nomor 200, yang hanya konvensi mengatakan, ya, semua memang OK. Berikut halaman. Jenis halaman web akan berupa teks, tetapi lebih khusus, HTML, yang kita akan menyelam kembali ke dalam. Dan dot dot dot hanya berarti, di sini adalah HTML. Dan di situlah kita mengambil cerita hari ini, benar-benar menulis HTML, HyperText Markup Language, yang adalah bahasa di mana halaman web yang ditulis. Ini bukan bahasa pemrograman. Tidak ada fungsi atau loop atau kondisi. Ini adalah bahasa markup, juga lagi lihat sekarang ini, yang memungkinkan Anda untuk menentukan bagaimana struktur dan menyesuaikan dgn mode estetis sebuah halaman web. 

Jadi ini adalah salah satu yang dan hanya halaman kita benar-benar memandang, jika sebentar, Senin. Dan melihat beberapa karakteristik yang menonjol. Ada banyak terbuka miring braket dan dekat braket siku. Dalam antara mereka miring kurung adalah kata-kata. Dan kita akan mulai memanggil kata-kata tag. Jadi terbuka kepala braket dan kepala braket tertutup adalah tag terbuka dan tertutup, atau awal dan akhir tag masing-masing, dari elemen HTML, seperti yang akan kita menyebutnya, yang disebut kepala. Dan jargon yang sama berlaku tubuh dalam HTML dan sebagainya. 

Dan apa yang baik adalah HTML-- dan memang, kami akan menghabiskan sangat sedikit waktu di atasnya, karena Anda akan kebanyakan hanya mengetahui fitur apa itu ketika Anda benar-benar memiliki masalah beton untuk solve-- Anda akan menemukan bahwa browser cukup bodoh. Ini hanya akan do-- tidak berbeda a computer-- apa yang Anda kirim dapat dilakukan. Dan ketika Anda memiliki terbuka braket HTML di bagian paling atas di sana, yang pada dasarnya hanya berarti, hei, browser, di sini datang sebuah halaman web yang ditulis dalam HTML. 

Ketika melihat braket terbuka kepala, itu hanya berarti, hei, browser, inilah kepala, atau bagian paling atas dari halaman web saya. Ketika melihat braket tertutup kepala, itu hanya berarti, hei, itu saja untuk kepala. Siaga untuk sesuatu yang lain. Dan itu sesuatu yang lain adalah tampaknya akan menjadi tubuh. Dan ketika Anda tidak memiliki tag, seperti Anda baru saja halo, koma, dunia, itu hanya akan menjadi teks baku yang akhirnya ditampilkan dalam layar. 

Sekarang, Anda akan melihat terlalu lekukan di sini. Anda mungkin dapat menyimpulkan bagaimana kita stylizing itu. Setiap kali saya membuka tag, sehingga untuk berbicara, saya indent. Dan setiap kali saya menutup tag, saya un-indent, memiliki semangat yang sama kurung kurawal. Dan di luar itu, aku jenis menggunakan penilaian saya. Perhatikan bahwa saya tidak repot-repot memukul Masukkan dalam tag judul. Mengapa? Yah, aku hanya memutuskan itu tampak sedikit bersih untuk saya, manusia, hanya tidak repot-repot melakukan hal itu. Jadi sekali lagi, ada beberapa penghakiman panggilan hanya seperti ada di C atau bahasa apapun. 

Tetapi perhatikan juga bahwa lekukan ini cocok untuk model mental, tidak lebih dari menyulitkan itu. Tapi pohon, kan? Jika Anda berpikir tentang web Halaman, tampaknya ditulis seperti ini, sebagai baik menjorok seperti itu, Anda hampir bisa memikirkan braket terbuka HTML tag braket tertutup demarkasi akar simpul, pohon keluarga gaya simpul dalam gaya pohon kami melihat Jumat lalu. 

Dan memang, kita harus di sebelah kanan disini apa yang akan kita sebut DOM, D-O-M, dokumen model objek, cara mewah untuk mengatakan pohon yang mewakili HTML itu. Dan perhatikan bahwa HTML memiliki, kita akan mengatakan, seperti pohon keluarga, dua anak. Di sebelah kiri adalah kepala. Di sebelah kanan tubuh. 

Dan hanya sebagai latihan berpikir ceroboh, Kepala, tentu saja, memiliki berapa banyak anak menurut struktur ini? Jadi hanya satu, title-- dan itulah mengapa kita memiliki panah pergi dari kepala sampai judul. Jadi seolah-olah orang itu di pohon keluarga memiliki hanya satu anak. Dan kemudian judulnya sendiri bisa dikatakan memiliki anak juga. 

Ingat bahwa HTML memiliki halo, koma, dunia bawahnya. Dan aku hanya ditarik itu dalam suatu oval bukan persegi panjang hanya untuk menyampaikan semantik bahwa meskipun itu adalah node di pohon, sehingga untuk berbicara, itu semacam fundamental berbeda. Ini bukan tag. Atau lebih tepat, itu bukan unsur. Ini hanya node teks, jika Anda mau. Tapi ini benar-benar konvensi manusia yang sewenang-wenang. Ini hanya sekarang cara saya mewakili apa yang aku akan sebagai agregat memanggil dokumen. 

Dan sebagai samping, hal di super pojok kiri, braket terbuka tanda seru doc Jenis HTML, ini tampak seperti tag, tapi itu kasus sudut bodoh mana yang hanya ada, disalin dan disisipkan untuk menunjukkan browser ini adalah HTML versi 5. Dunia terus berubah apa baris pertama kode dalam halaman harus. Ini hanya berarti versi 5. Sehingga tidak cukup terlihat seperti orang lain. 

Baiklah, jadi dengan itu kata, sekarang Anda akan menghargai ini cukup bodoh ini tattoo seseorang mendapat. 

[Tertawa] 

DAVID J Malan: Baiklah, dan sekarang mari kita benar-benar menyelam melakukan sesuatu dengan ini. Anda akan ingat bahwa terakhir kali Saya membuka Appliance CS50 dan aku melakukan sesuatu seperti sederhana seperti membuka gedit. Dan aku menyimpan file bahkan pada desktop-- saya tempat special-- sebagai hello.html. 

Jadi biarkan aku melakukan itu again-- hello.html Enter. Dan sekarang dalam file ini, aku akan pergi ke depan dan meniru apa yang kita hanya doc saw-- Jenis html Kemudian aku akan melakukan open braket html braket tertutup. Dan kemudian aku akan Terlebih Dahulu membuka dan menutup tag. Mengapa? Hanya supaya aku jangan lupa nanti. Hanya saja praktek yang baik, seperti pembukaan dan menutup kurung kurawal sekaligus. 

Dan kemudian apa yang terjadi selanjutnya? Anda dapat menganggap tato. 

AUDIENCE: Kepala. 

DAVID J Malan: Kepala. Dan kemudian di sini, saya memiliki judul, saya pikir. Dan judul itu sewenang-wenang, Halo, judul dekat dunia. Dan kemudian di sini, tubuh, dari course-- maka kita menutup tag body. Dan kemudian hanya agak berlebihan, Aku punya hal yang sama di sini. 

Jadi saya mengklaim bahwa ini adalah halaman web. Ini adalah sesuatu yang sekarang bisa hidup di web, meskipun tentu saja, itu benar-benar hidup pada desktop saya sekarang. Tapi memang, jika saya meminimalkan gedit, Saya akan melihat pada desktop saya ikonnya. Meskipun ini adalah alat, Anda bisa melakukan ini di Mac OS tanpa TextEdit atau Jendela dengan Notepad bahkan. 

Dan jika aku pergi ke depan dan klik ganda bahkan, dan select-- baik, mari kita tidak memilih itu karena Chrome tidak membuka. Mari kita pergi ke depan dan membuka Chrome. Dan kemudian melakukan Command-O untuk terbuka Dan arahkan ke desktop saya dan membuka file itu. Itu adalah bagaimana browser menafsirkan HTML, atas ke bawah, kiri ke kanan. Hei, peramban inilah HTML. Berikut kepala. Berikut judul. Berikut tubuh. Dan memang, ini adalah bagaimana mampu membuat halaman web. 

Tapi perhatikan URL. Tak satu pun dari Anda bisa menarik khusus ini halaman di laptop Anda sekarang, bahkan dalam Anda alat melalui URL tersebut, karena file: // menunjukkan itu sebenarnya pada sistem file saya, hard drive, bukan milikmu. Jadi ini bukan semua yang berguna. 

Mari kita sekarang bergerak ke arah menggunakan server web yang sebenarnya. Dan ternyata CS50 Appliance adalah lebih dari sekedar sebuah lingkungan di mana Anda dapat menulis kode C dan kompilasi dan menjalankannya seperti yang telah Anda lakukan. Hal ini juga telah dikonfigurasi oleh staf untuk mewakili web khas server yang ada di internet, salah satu yang mungkin Anda bayar untuk atau salah satu yang ada di apa yang disebut awan. 

Dan itu berjalan standar open source gratis software, misalnya, sesuatu disebut Apache, yang mungkin masih web yang paling populer perangkat lunak server di dunia bahwa ribuan website menggunakan hari ini. Dan itu juga bahkan memiliki perangkat lunak seperti MySQL, yang merupakan server database bahwa kita akhirnya akan mendapatkan, yang hanya untuk mengatakan Aku bisa mulai memperlakukan alat saya sebagai server penuh baku bahwa aku tidak membayar untuk tempat lain. Itu hanya hidup di laptop saya sendiri untuk pengembangan dan kenyamanan tujuan. 

Jadi mari kita pergi ke depan dan mengambil keuntungan dari ini. Aku akan pergi ke depan dan membuka jendela terminal. Dan aku akan pergi ke depan dan move-- sebenarnya, pertama aku akan menavigasi ke desktop saya. Jika saya melakukan ls, ada hello.html. Dan aku akan pergi depan dan mulai menggunakan direktori baru kita sudah tidak digunakan sebelum hari ini. 

hello.html-- Aku akan pindah untuk ../vhosts untuk hosts-- maya lebih pada bahwa dalam future-- dan kemudian ke dalam direktori yang disebut localhost, yang merupakan julukan yang diberikan kepada hampir komputer manapun, apakah itu Mac, PC, atau komputer Linux, dan kemudian khusus ke dalam direktori yang kita, staf sudah dibuat untuk Anda ketika Anda download alat yang disebut publik. Dan seperti namanya, apa pun Aku dimasukkan ke dalam folder ini, secara teori, akan sekarang menjadi publik, setidaknya untuk orang-orang yang memiliki secara langsung koneksi ke komputer saya. 

Jadi sekarang biarkan aku pergi ke depan dan melakukan cd ke direktori yang sama jadi saya bisa melihat apa yang terjadi dan jenis ls. Dan memang, itulah Satu-satunya hal di sana. Saya mengklaim sekarang bahwa karena saya telah menempatkan ini mengajukan hello.html dalam direktori disebut dalam publik direktori disebut localhost dalam direktori disebut vhosts, yang terima kasih kepada staf CS50 telah pra-dikonfigurasi untuk menjadi root server web Anda, Saya sekarang dapat mudah-mudahan melakukan hal ini. 

Aku akan membuka tab baru. Dan aku akan pergi untuk tidak mengajukan: //. Aku akan menggunakan aktual http / localhost, yang lagi, adalah nama panggilan untuk server sendiri. Dan kemudian aku akan pergi ke apa Nama file, hanya harus jelas? Dimana cerita ini mungkin akan? hello.html. 

Jadi dengan kata lain, saya ingin sekarang ini komputer saya sendiri, alat saya sendiri, seolah-olah itu adalah server yang sebenarnya. Julukan ini localhost. Tapi pikirkan localhost sebagai seperti Facebook.com google.com, apa pun. Hanya saja nama lokal saya. Dan kemudian akhir saya inginkan adalah di akar dari hard drive, sehingga untuk berbicara, atau akar server web, ergo garis miring dan kemudian yang hello.html nama file. 

Mari saya zoom out dan tekan Enter. Dan memang, sekarang ada halaman web saya. Jadi itu sedikit berbeda. Dan itu hanya sebagai underwhelming. Ini adalah versi lama. Mari saya mengecilkan font kembali. Ini adalah tua. Ini adalah baru. Tapi apa yang fundamental terjadi sekarang adalah bahwa HTTP sedang digunakan. 

Mari kita membuat ini sedikit lebih jelas atau, jika Anda mau, sedikit lebih rumit. Biarkan aku pergi ke kanan bawah pojok alat saya. Dan perhatikan bahwa semua ini waktu, sudah ada nomor. Itu adalah alamat unik Appliance CS50 Anda. Ini adalah alamat pribadi, seperti yang tersirat oleh 172,16, yang hanya berarti hanya Anda secara fisik dapat mengakses server web ini. Semuanya firewall dan baik dilindungi dari sisa dunia karena ini menangani. 

Dan sekarang melihat meskipun jika aku pergi ke alamat ini, bukan dalam alat saya, tapi di Mac OS-- aku akan untuk kembali ke sini. Ini adalah Mac saya sekarang. Dan sekarang aku akan membuka versi Chrome di sini. Dan aku akan pergi ke http: //172.16.25 / Dan aku lupa rest-- 133. 

Jadi aku akan mengunjungi dari Mac alamat IP /hello.html Enter. Dan sekarang saya melihat dari Mac bahwa CS50 Appliance saya, siapa Alamat IP adalah bahwa jumlah, memang berperilaku seperti server web di internet. Tidak memiliki bagus mudah ingat nama seperti Facebook.com, tapi itu menggunakan HTTP Rupanya, meskipun Chrome adalah jenis menyederhanakan dunia bagi kita tetapi tidak menunjukkan kita HTTP. Tapi ini memang persis seperti itu. Chrome hanya menyimpan beberapa keystrokes hari ini. Dan itulah yang sekarang kita lihat. 

Jadi itu semua baik dan bagus. Tapi itu halaman cukup underwhelming. Biarkan aku masuk dan melakukan sesuatu sedikit berbeda sekarang. Jadi biarkan aku kembali ke gedit. Dan bukannya halo, Situs, mari kita menempatkan gambar. Dan saya mengaku dari before-- biarkan aku pergi ke saya publik direktori localhost. Dan biarkan aku pergi ke depan dan menyalin Seluruh sekelompok file dari hari ini dari folder Dropbox saya ke sini. 

Sekarang jika saya ketik ls, terlihat sama sekali file-file ini bahwa saya telah didistribusikan oleh situs mata kuliah di muka hari ini, salah satunya adalah masih hello.html. Jadi ada satu itu. Dan ingat satu konyol ini dari cat.jpg time-- terakhir. Jadi saya mencoba untuk menanamkan cat.jpg dalam halaman web saya. 

Aku akan pergi ke depan dan melakukan cat.jpg, simpan. Biarkan aku kembali ke Chrome. Dan biarkan aku tampilannya di font dan sekarang reload. Ups, di mana saya menempatkan ini? Standby-- aku masih memiliki lama versi dari open desktop saya. Jadi biarkan aku pergi ke vhost saya, saya localhost, publik saya, dan hello.html. Jadi sekarang biarkan aku pergi ke depan dan mengatakan cat.jpg dalam tubuh di mana saya ingin menjadi ditampilkan dan reload. Tentu saja, ini tidak benar. 

Jadi saya harus memberitahu browser sedikit lebih sengaja apa yang saya ingin lakukan. Cukup mengetik nama adalah jelas tidak cukup. Jadi ingat bahwa ada yang lain tag, gambar, img untuk pendek. Itu hanya karena manusia tidak suka jenis kata-kata penuh. Dan kemudian kita dapat melakukan sumber = "cat.jpg". 

Dan sekarang aku akan melakukan satu hal yang berbeda di sini. Meskipun semua tag kami sejauh ini memiliki memiliki gagasan dari mulai tag dan tag akhir, itu tidak benar-benar membuat akal untuk gambar, kan? Sebuah gambar yang baik ada atau tidak ada. Dan manusia telah datang dengan konvensi sederhana. Bila Anda memiliki tag yang dapat baik memulai dan mengakhiri di time-- yang sama bisa kosong, sehingga untuk speak-- hanya menempatkan garis miring dalam tag di akhir. Sekarang biarkan aku kembali ke browser saya. Hit Reload Sialan, ada sesuatu yang salah. Anda mungkin pernah melihat ini kadang-kadang di web, bahkan jika itu tidak pernah salahmu. Ini kesalahan web server. Odes Apa ini tampaknya menunjukkan? Ini rusak. Di situlah gambar milik. Ya? 

AUDIENCE: Tapi itu tidak memiliki akses ke gambar. 

DAVID J Malan: Ini tidak memiliki akses ke gambar. Itu, atau bahkan lebih buruk, mungkin itu bahkan tidak ada. Mari kita lihat jika kita tidak dapat mendiagnosa itu. Ingat dari terakhir kali bahwa jika di Chrome, pada alat, atau bahkan pada Mac atau PC, Anda pergi ke menu Developer dan pergi ke Developer Tools pilihan, yang mungkin Anda sudah tidak banyak digunakan atau pernah. Dan jika saya pergi ke Jaringan dan kembali halaman tersebut, mari kita benar-benar melihat HTTP permintaan yang sedang dibuat. 

Sepertinya hello.html adalah memang OK, maka 200. Tapi cat.jpg adalah 403. Jadi bukan 404. File mungkin ada. 403 berarti terlarang. Jadi ini adalah sedikit membingungkan. Aku akan kembali ke jendela terminal saya. Biarkan aku memperbesar sini. Dan biarkan aku melakukan ls. Ada file-file yang sama. 

Sekarang biarkan aku melakukan ls-l, yang Anda sudah mungkin digunakan sebelumnya untuk melihat berkas ukuran mungkin atau cap waktu. Dan kita melihat sejumlah besar informasi yang luar biasa. Tapi perhatikan beberapa rincian. Berikut hello.html dalam hal ini baris di sini dan inilah cat.jpg. Dan itu hanya alat yang user friendly dengan menyorot JPEG ungu seperti ini. Tapi apa lagi yang berbeda di samping ukuran file dan nama file? 

AUDIENCE: [tak terdengar]. DAVID J Malan: Ya, ada dua R di sini. Perhatikan apa yang hello.html telah terjadi. Jadi ternyata bahwa nama publik direktori ini penting. Apa pun dalam direktori ini dimaksudkan untuk umum. Tapi itu tidak cukup hanya untuk drop file di sana. Anda juga perlu mengubah modus dari file, mengubah hak akses dari file untuk secara proaktif tidak menjadi pengaturan default, yang hanya bisa saya baca dan menulis itu, saya menjadi pemilik. Saya ingin semua orang dunia secara keseluruhan untuk dapat membaca file saya, sehingga untuk berbicara. Baca hanya berarti melihatnya. 

Dan memang, seperti yang Anda lihat di masalah menetapkan tujuh, itulah yang berarti ini R. Kedua R berarti membiarkan semua orang lain di dunia juga membacanya, apalagi sekarang itu adalah di direktori ini. Jadi cara paling sederhana untuk memperbaiki ini adalah untuk pergi ke prompt saya dan melakukan chmod untuk perubahan Modus dan kemudian melakukan + r, sama sekali, semua orang, semua, ditambah r untuk membaca, dan kemudian cat.jpg Enter. Tidak ada yang tampaknya terjadi, yang biasanya berarti hal yang baik. Jadi ls-l again-- sekarang mari kita lihat cat.jpg. Dan izin ini tampaknya telah berubah. Sebagai samping, jika Anda membuat kesalahan dan Anda, misalnya, hanya membuat your-- saya tidak tahu-- esai publik dapat diakses oleh kecelakaan, Anda dapat melakukan hal yang sebaliknya, chmod a-r. Meskipun terus terang, seharusnya tidak berada di direktori publik pula jika itu perhatian. 

Jadi sekarang mari kita kembali ke browser saya dan reload. Dan aku akan klik Ghostbusters sedikit simbol untuk membersihkan bagian dari layar sehingga kita dapat melihat permintaan baru. Dan memang, di sini adalah Cat Grump dari sebelumnya. Tapi yang lebih penting, secara teknis, ada nomor 200, yang berarti kita mendapatkannya OK. Baiklah, jadi itu semua baik dan bagus. Tapi kami tidak membuat yang terbaik dari website, atau kita akan mencoba terlalu keras untuk membuat fanciest website hari ini. Tapi mari kita setidaknya melakukan sesuatu Super akrab sebelum berderak off beberapa tag lainnya. Jadi kira saya tidak hanya ingin kucing di sini. Misalkan saya benar-benar ingin ini kucing untuk link ke sesuatu. 

Aku mungkin, misalnya melakukan sesuatu seperti ini. untuk jangkar href untuk referensi equals-- hiper dan mari kita melakukan sesuatu seperti www.google.com dekat mengutip braket dekat. Dan sekarang mencari kucing. Tutup anchor tag. Jadi ini hanya memiliki satu jenis detail dari fundamental baru. Tag tentu saja, berbeda. Ini adalah nama untuk anchor href atau hiper referensi. 

Tapi yang lebih penting, ada fitur ini sintaksis sini. Ini adalah apa yang akan kita mulai memanggil tidak tag, tapi atribut. Dan atribut adalah sesuatu yang memodifikasi perilaku tag. Dan ini atribut, href, berarti memodifikasi perilaku jangkar ini sehingga ketika itu diklik, ia pergi ke URL ini di sini. Dan tentu saja, URL yaitu Google. 

Sementara itu, apa ini teks di sini akan menjadi? Nah, yang akan menjadi apa manusia sebenarnya lihat sebagai digarisbawahi Link, sesederhana itu. Jadi mari kita coba ini. Biarkan aku menyimpannya. Aku masih hello.html. Tapi dalam versi online, Anda akan melihat nama file yang sebenarnya kita pre-prepared. Biarkan aku pergi ke depan dan kembali. Dan sekarang ini adalah sangat Halaman underwhelming masih. Tapi kalau aku membawa lebih besar-- dan itu agak kecil, tapi-- Anda dapat melihat di bagian bawah pojok kiri layar Anda, itu memang akan google.com. Dan jika saya klik itu, akan mengocok saya jalan ke Google sebenarnya. 

Tapi perhatikan di sini kesempatan bagi eksploitasi, hanya sebagai samping. Dan kami akan kembali ke yang lain isu-isu keamanan sebelum lama. Karena ada dikotomi ini antara di mana Anda pergi dan apa yang Anda katakan, Anda bisa melakukan sesuatu seperti this-- http://www.google.com. OK, dan jika saya reload setelah menyimpan halaman tersebut, sepertinya aku akan pergi ke Google. Tapi tidak ada alasan saya harus pergi ke Google, kan? Aku benar-benar bisa pergi ke sesuatu seperti badguy.com, kembali halaman tersebut di sini. Dan pemberitahuan, masih terlihat seperti Google. Dan hanya jika aku tajam cukup untuk membawa lebih dari sini saya melihat itu bahkan akan pergi ke lokasi yang berbeda. 

Jadi jika Anda pernah mendapatkan email, terutama salah satu dari Paypal, atau tampaknya dari Paypal meminta Anda untuk login ke akun Anda, ini mengapa Anda harus tidak pernah pernah mengklik link dalam email, terus terang, setiap link dalam email. Jika Anda tahu Anda memiliki yang sebenarnya uang di Paypal atau Bank Amerika atau Fidelity atau situs, ketik manual dalam. Karena melihat betapa mudahnya untuk mengelabui seseorang menjadi menyajikan apa terlihat seperti link. Tapi itu benar-benar bisa pergi benar-benar di mana saja. 

Dan ada jauh lebih besar ancaman daripada ini. Bahkan, ini agak sedikit dari garis singgung sekarang, tapi satu satu yang terbaik yang pernah saya lihat yang sejak itu telah ditutup, adalah seseorang yang dipimpin orang to-- jadi ini mungkin mengatakan, klik di sini untuk login ke Anda rekening, rekening bank. Dan ini adalah Bank of the West. 

Jadi seseorang membeli ini. Dan itu sedikit lebih mudah untuk melihat dalam font mono spasi memperkecil di pada proyektor 30-kaki. Tapi ketika itu font kecil dalam email yang Anda terima, ini tampak seperti bankofthewest.com, tidak bankofthevvest.com, yang seseorang telah dibayar $ 10 untuk membeli. Dan kemudian ini membawa mereka ke setara dengan beberapa situs yang buruk. 

Dan Anda akan melihat too-- sebenarnya bisa kita lakukan this-- jika saya pergi ke situs yang sebenarnya, bankofthewest.com, sekali lagi, ingat dari terakhir kali bahwa jika ini adalah halaman web mereka dan Anda ingin tahu cara kerjanya, Anda pasti bisa pergi ke Alat pengembang Chrome. Dan Anda dapat melihat semua HTML baik diformat sana. 

Tetapi lebih penting lagi, Anda cam-- mari kita tutup this-- Anda dapat pergi ke Lihat Developer View Source. Bagaimana kalau saya hanya menyalin semua itu Dan kemudian saya bisa masuk ke jendela gedit kecilku di sini dan membuat halaman web sendiri. Simpan ini dalam hello.html. Dan mungkin ini akan istirahat, karena tidak mudah ini biasanya. Tapi sekarang jika saya reload halaman saya sendiri saya sendiri CS50 Appliance dan tekan isi ulang, OK, beberapa hal pecah. Tapi aku cukup dekat untuk memiliki situs perbankan saya sendiri, kan? Semua ini HTML-- 

[Tertawa] 

DAVID J Malan: -Saya tidak actually-- dan Anda tahu ada seseorang di luar sana yang akan benar-benar klik link ini juga. Jadi jelas, beberapa barang pecah. Tapi itu akan memimpin kita ke diskusi, tidak perlu sekarang, seperti apa CSS, Cascading style sheet, adalah, dan bagaimana Anda benar-benar download file lain HTML dan file JPEG file GIF yang website mungkin menggunakan. Namun semua itu adalah accomplishable. Tapi itu benar-benar bermuara ini heuristik yang sangat sederhana. 

Jadi sekarang mari kita skim melalui beberapa contoh lain dari HTML hanya untuk memberikan rasa apa lagi yang bisa Anda lakukan. Misalnya, ini list.html. Misalkan saya ingin membuat sebuah halaman web dengan daftar rumah di quad. Saya mungkin menggunakan tag ul untuk unordered daftar dan kemudian anak item daftar dan kemudian iterate over-- atau daftar, rather-- rumah yang bersangkutan. 

Dan jika saya membuka hal ini, mari kita lakukan ini. Mari kita tidak hello.html, tetapi untuk list.html. Sialan. Bagaimana cara mengatasinya? Ini masalah yang sama seperti sebelumnya, kan? Jadi biarkan aku melakukan oops-- chmod-- chmod a + r dari list.html. Dan jika aku kembali ke browser saya dan klik Reload, itu dia. Jadi jika Anda pernah ingin membuat daftar bullet, Anda bisa melakukan itu. Jika Anda ingin menjadi super mewah dan membuat daftar ordered, bukan daftar unordered, mengubah mereka untuk ol, kembali halaman tersebut, dan sekarang browser akan nomor untuk Anda. 

Apa lagi yang bisa kita lakukan? Nah, beberapa others-- jika Anda punya paragraf panjang text-- misalnya, beberapa Teks latin seperti this-- dan Anda ingin dalam paragraf terpisah, p terbuka, p dekat untuk tag paragraf. Dan melakukannya lagi dan lagi. Dan jika sekarang saya membuka file ini, paragraphs.html, baik, ini semakin menjengkelkan. Jadi sekarang mari kita kembali ke saya prompt, chmod a + r r bintang .html-- bagus sedikit wild card sehingga untuk berbicara. Ini harus memperbaiki semua masalah ini bagi saya. Mari kita ulang. Ada tiga paragraf. 

Dan sekarang mari kita pergi ke depan dan membuka yang lain. Bagaimana tentang meja? Anda akan melihat tabel terlihat sedikit lebih kompleks. Tapi itu idea-- sama tag terbuka, tag terbuka, terbuka, terbuka, terbuka, tag dekat, tag terbuka. Dan ini terjadi untuk berdiri untuk tabel, yang perbatasan tampaknya akan menjadi ketebalan 1-- apapun bahwa meja means-- baris, tabel Data, yang berarti sel. Dan jika aku kembali ke browser saya di sini dan pergi ke table.html, Anda dapat melihat sesuatu seperti ini, mengerikan. Tapi kita akan sampai ke titik di mana kita bisa benar-benar membuat hal-hal lebih cantik dari itu. 

Jadi biarkan aku menetapkan untuk saat ini. Ada tandan lebih tags. Dan HTML indah untuk mengambil karena, terus terang, semua yang perlu Anda lakukan adalah melihat halaman web yang ada dengan yang Anda kenal. Dan Anda seperti, oh, itu bagaimana mereka melakukan ini estetis. 

Atau Anda dapat mencari secara online apapun sumber daya bagaimana HTML bekerja, dan Anda akan melihat bahwa ada Seluruh kosakata tag lainnya. Tetapi dengan model mental sederhana saja bahwa hampir semua tag Anda membuka telah ditutup, itu benar-benar tidak cukup untuk mengajar diri sendiri HTML setelah memahami ide-ide dasar dari tag dan atribut dan sumur-formedness yang kita bicarakan, apa penutupan bahwa kita mungkin membuka sehingga kita tidak membingungkan browser. Jadi mari kita sekarang membawa ini ke tingkat yang lebih menarik dengan pergi ke sebenarnya. Dan mari kita pergi ke Mac saya sini, ke google.com. Dan sekarang notice-- mari kita lakukan ini. Aku gong untuk pergi ke Pengaturan, Pengaturan Pencarian. Saya ingin mematikan instan ini menjengkelkan Hasil hal mana segera mulai menanggapi mengetik Anda. Mari kita lakukan sekolah tua ini jadi kita benar-benar melihat apa yang terjadi. 

Jadi aku akan menyelamatkan saya Pengaturan Google di sini. Dan sekarang notice-- aku akan mencari sesuatu seperti kucing. Dan itu masih melakukan auto lengkap di sini, tapi berdasarkan hal-hal orang telah mengetik di masa lalu. Tapi perhatikan apa yang akan terjadi. 

Di URL saat ini adalah ini, hanya google.com. Dan secara teknis, itu slash. Google hanya menyimpan karakter dan tidak menunjukkan kepada kita bahwa. Mereka menunjukkan kepada kita https, hanya menjadi super meyakinkan bahwa kita pada halaman aman atau terenkripsi. 

Jadi biarkan aku pergi ke depan dan mencari kucing. Sekarang ini punya benar-benar luar biasa cepat. Lihatlah panjang URL ini. Tapi ternyata bahwa sebagian besar hal-hal ini dalam URL sebenarnya cukup berguna. Aku akan mulai menghapus hal yang saya tidak mengerti. Saya melihat kucing. Saya mengerti kucing. Aku tidak tahu mengapa kucing di sana lagi. Aku benar-benar tidak tahu apa omong kosong ini. Jadi aku hanya akan terus menyoroti dan menghapus hal-hal bahwa saya tidak mengerti, penyulingan URL ke dalam hal ini. 

Sekarang biarkan aku mendapatkan masukkan lagi. Sepertinya Google masih bekerja. Jadi untuk beberapa alasan, mereka menambahkan banyak hal untuk URL mereka secara default. Tapi itu tidak benar-benar diperlukan. Jadi apa yang baik tentang ini? Nah, biarkan aku pergi ke depan dan membuka Inspektur Chrome. Ada jalan pintas tikus kecil untuk itu. 

Buka tab Jaringan. Dan sekarang biarkan aku ulang Halaman ini sekali lagi. Dan aku menahan Shift. Sebagai samping, browser cenderung untuk cache atau menyimpan Informasi hanya demi efisiensi ini. Tapi biasanya, memegang Shift dan reload akan memaksa segala sesuatu untuk memulai kembali dari awal. Dan itulah yang ingin saya lakukan di sini. 

Dan melihat semua ini baris yang baru saja muncul. Ternyata bahwa dalam setiap web tertentu Halaman, mungkin ada hanya satu file involved-- hello.html-- atau ada mungkin 52, seperti dalam kasus ini. Ketika saya mengunjungi google.com, Rupanya, browser saya kicks off 52 permintaan HTTP terpisah. Mengapa demikian? 

Nah, melihat apa yang ada di dalamnya ini atas halaman web up. Ada tidak hanya teks, tapi ada gambar yang sebenarnya kucing ke kanan. Ada logo berwarna-warni di sini di sebelah kiri. Ada semua ikon ini untuk mikrofon dan sebagainya. Ada banyak potongan-potongan, membangun blok, potongan awal, jika Anda mau, ke halaman web ini. Dan apa browser yang dilakukan pada mendapatkan file pertama, yang adalah baris ini di sini, itu pada dasarnya iterasi atas HTML ke bawah, kiri ke kanan, mencari hal-hal seperti tag gambar atau tag lainnya yang menyebutkan file lain dan ketika melihat mereka, pergi dan mengambil mereka melalui HTTP, seluruh layak amplop metafora, dan kemudian menampilkannya dalam lokasi yang tepat di halaman web. 

Tapi perhatikan di sini jika saya fokus pada kucing lemparan, pencarian pertama, melihat bahwa, memang itu menggunakan HTTP 1.1. Dan sayangnya, Google Chrome sekarang dalam versi 39 adalah jenis hal dumbing turun dan tidak menunjukkan kita header yang sebenarnya. Tapi apa memang dikirim adalah permintaan karena tidak slash, tapi / search? q = kucing. 

Sekarang, mengapa begitu penting? Yah, aku akan menyimpulkan dari ini bahwa jika Anda Google mendukung permintaan formulir ini, mengapa saya tidak melaksanakan pencarian saya sendiri mesin untuk CS50, tetapi hanya bagian depan end, hanya antarmuka pengguna grafis. Dan kami akan melakukan outsourcing bagian belakang, pencarian yang sebenarnya hasil ke Google. 

Jadi bagaimana saya bisa melakukan ini? Nah, biarkan aku pergi ke gedit di sini. Dan biarkan aku pergi ke depan dan membuka up, katakanlah, sebuah file baru. Dan aku akan simpan ini sementara sebagai pencarian 0.html. Dan kemudian akhirnya, kita akan cepat ke depan untuk yang saya pre-prepared. 

Dan aku akan cepat menyiapkan jenis doc html braket terbuka html dekat html braket. Lalu aku akan melakukan kepala kepala dekat judul terbuka CS50 Cari bukannya pencarian Google. Di sini aku akan memiliki tubuh, tubuh di sini dekat. Dan sekarang aku perlu CS50 Cari. Dan sebenarnya, mari kita membangun ini secara bertahap. Aku akan pergi ke depan dan menutup ini dan benar-benar memasukkannya ke dalam direktori publik saya. Jadi memberi saya hanya satu saat. pencarian 0.html-- aku akan temporal menyebutnya search.html. Aku akan chmod itu search.html + r. Dan sekarang aku akan membukanya. Baiklah, jadi itu cepat. Namun gol hanya itu untuk mendapatkan kita ke titik memiliki teks ini mengajukan disebut search.html. Jadi tidak banyak untuk melihat belum. Memang, jika saya pergi ke browser saya, dan pergi ke search.html, itu saja itu. Tapi kau tahu apa? Aku bisa menjadi sedikit lebih menarik. Saya membaca dalam sebuah buku bahwa ada heading tag yang disebut h1. Dan aku akan pergi ke depan dan menggunakan h1 terbuka dan h1 dekat. Reload halaman. Dan sekarang sudah lebih besar dan lebih berani, tidak semua yang menarik, tapi setidaknya itu secara struktural lebih menarik. Tapi sekarang biarkan saya memperkenalkan tag lain. Ternyata ada tag form. Dan biarkan aku menutup tag itu. Dan ternyata ada dunia tag masukan yang memiliki atribut yang disebut jenis, yang adalah tipe data dari lapangan, jika Anda mau. Dan akan menjadi tipe teks. Dan nilainya akan menjadi CS50 Cari. Tutup tag. Dan ada akan ada gagasan membuka dan menutup dengan tag terpisah. 

Biarkan aku kembali ke sini dan lihat apa yang terjadi, reload. Semakin menarik. Sepertinya itu adalah kolom teks. Dan sebenarnya, aku tidak ingin untuk menempatkan nilai di sana belum. Biarkan aku pergi kembali ke sini dan benar-benar mendapatkan menyingkirkan nilai ini untuk tetap sederhana. Alih-alih nilai, apa yang saya inginkan untuk memberikan hal ini adalah nama. Dan aku tidak tahu apa itu, jadi saya akan kembali ke itu. 

Tapi di bawah itu, saya ingin untuk melakukan input type = kirimkan. Dan nilai ini akan CS50 Cari. Dan kita akan melihat mengapa saya memindahkan nilai ini. Ketika saya reload, saya tampaknya sekarang memiliki awal dari pencarian saya sendiri mesin, super mengerikan, meskipun terus terang, itu tidak melempar jauh dari apa Halaman default Google terlihat seperti. 

Jika saya pergi di sini sekarang, saya dapat mengetikkan kucing dan mudah-mudahan klik Cari. Tapi aku tidak cukup dilakukan belum, karena saya belum diimplementasikan, jelas, database. Saya belum merangkak web untuk hasil pencarian. Jadi saya perlu untuk melakukan outsourcing itu ke Google. Jadi, bagaimana saya melakukan ini? 

Yah, pertama-tama saya perlu menambah dan tindakan atribut untuk tag form saya yang adalah http://www.google.com/search. Dan aku tahu bahwa hanya dari memiliki disimpulkan oleh mencermati di URL mereka. Dan sekarang mengambil menebak. Apa yang harus text field ini mungkin disebut, didasarkan pada tempat kami datang dari sebelumnya? 

AUDIENCE:? Q. 

DAVID J Malan:? Q. Dan kita tidak benar-benar perlu pertanyaan menandai ternyata, tapi q memang itu, q untuk kueri mungkin oleh default, hanya karena itu apa Larry dan Sergey datang dengan tahun lalu. Jadi sekarang biarkan aku kembali halaman ini. Tidak terlihat semua berbeda itu. Tapi sekarang menonton apa yang terjadi. 

Jika saya ketik kucing dan klik CS50 Cari dan pasrah, melihat saya mendapatkan dibawa pergi ke Google sebenarnya. Sekarang, Google sedang sedikit mengganggu dalam bahwa mereka menambahkan parameter tambahan, jika Anda mau, ke URL. Itu semua terjadi otomatis di sisi Google. 

Bagian yang penting adalah bahwa saya tampak telah menghasilkan permintaan ini di sini. Dan memang, itulah yang terjadi. Bila Anda memiliki HTML yang terlihat seperti ini, ini adalah semacam notasi pengembang web karena mengatakan, maju dan membuat formulir yang ketika itu diajukan, itu akan pergi ke URL ini. Dan ketika URL telah memberikan nilai untuk hal-hal seperti q, jangan pergi hanya untuk URL ini. Sebenarnya, lanjutkan ke pertanyaan mark dan kemudian q = kucing. Menambahkan parameter tersebut, Parameter HTTP seperti itu. 

Dan hanya untuk menjadi super tepat, apa yang sedang disimpulkan di sini- tapi aku akan lebih explicit-- adalah bahwa metode yang saya ingin menggunakan adalah mendapatkan, bukan sesuatu seperti pos, yang pada akhirnya kita akan melihat. Jadi singkatnya, hanya dengan pemahaman HTML dan menggunakan beberapa tag cukup sederhana, kita sekarang dapat mulai membuat pengguna akhir depan kita sendiri antarmuka dengan pencarian mesin di balik itu. 

Tapi ini tentu saja, cukup mengerikan. Jadi biarkan aku benar-benar membuka versi yang sedikit lebih baik. Ini adalah yang saya disiapkan memajukan yang memiliki beberapa komentar. Tapi Anda akan melihat bahwa saya cukup banyak diciptakan itu. Jadi ini sudah tersedia secara online. Dan aku kebetulan Terlebih Dahulu pergi ke https hanya untuk tetap sederhana. 

Dan sekarang mari kita membuka iterasi berikutnya dari ini. Apakah versi 1 bukan 0. Apa melompat keluar pada Anda sebagai sedikit berbeda dalam contoh ini? 

AUDIENCE: [tak terdengar]. 

Ya, ada ini pusat menyelaraskan teks. Ini sedikit aneh di sini. Tapi ini memang baru. Dan mungkin menebak apa yang akan terjadi. Jika saya pergi ke browser saya sekarang dan mengunjungi pencarian 1.html, itu hal yang hampir sama. Tapi itu langkah lebih dekat untuk menjadi sedikit lebih cantik. Ini masih jelek, tapi lebih cantik dalam setidaknya semuanya yang sekarang berpusat. 

Jadi ternyata bahwa apa yang saya gunakan adalah bahasa lain sama sekali disebut CSS, Cascading style sheet. Dan CSS, terus terang, adalah jenis dari, menurut pendapat pribadi saya, bahasa yang dirancang atrociously. Hal ini sangat mengganggu mengingat semua berbagai rincian. Tapi itu adalah apa yang stylizes Seluruh web di seluruh dunia saat ini. Saya menyinggung seseorang. Baik. Jadi mari kita kembali ke sini dan melihat bagaimana kita benar-benar menggunakan ini. Dan ternyata, setidaknya itu sebenarnya bahasa yang cukup sederhana. Hanya saja pasangan nilai kunci, sifat dan nilai-nilai, sifat dan nilai-nilai. Memang, di sini adalah salah satu properti dan nilai. 

Cukup dengan menggunakan gaya atribut pada tag tubuh saya dan memberikan nilai dari usus kata dan kata lain, atau properti dan nilai, Saya dapat mempengaruhi estetika dari halaman web, tidak tentu struktur belum, tapi estetika itu. Dan hanya dengan Googling sekitar, saya menyadari bahwa CSS, cascading style sheets, mendukung sifat yang disebut text-align, yang nilainya bisa akan ke kiri, kanan, atau tengah, misalnya. 

Jadi, sekarang ketika saya reload Halaman ini, apa yang saya dapatkan adalah halaman berpusat, tapi masih sangat jelek. Mari kita pergi ke depan dan membuka up versi 2 Search. Dan sekarang melihat saya sudah melakukan sedikit lebih. Perhatikan bahwa di sini di dalam kepala tag, ada bisa lebih dari judul. Bahkan, ada tag gaya. Dan ini adalah di mana ia hanya mendapat sedikit berantakan seeing CSS kadang-kadang. 

Perhatikan bahwa saya tampaknya memiliki sesuatu yang secara struktural terlihat sangat berbeda. Tapi di sini adalah nama tag saya ingin bergaya. Berikut adalah teman-teman lama kita keriting kurung dan kurung kurawal tertutup. Dan kemudian di sini adalah bahwa properti dan nilainya. 

Jika saya memuat file ini, search2.html, hasil akhirnya adalah identik. Tapi itu langkah menuju desain yang lebih baik. Dengan anjak keluar CSS ini, saya sudah tidak bercampur dengan HTML saya. Dan memang, seperti yang akan kita lihat, aku bisa menggunakan kembali sifat-sifat dan nilai-nilai. Jika saya ingin membuat tandan bagian dari halaman web saya terpusat, Saya tidak perlu mengetik style = text-align pusat seluruh tempat. Saya dapat dimasukkan ke dalam satu tempat mungkin, seperti di atas. 

Tetapi bahkan ini bukan desain terbaik. Bahkan, salah satu hal yang Anda akan belajar Anda menghabiskan lebih banyak waktu dengan pemrograman web adalah bahwa semakin Anda dapat modules hal-hal dan faktor hal-hal seperti file H mari kita faktor barang keluar, seperti helpers.c mari kita faktor hal-hal beberapa psets lalu. Demikian pula, mungkin kita ingin mencapai hal ini. 

Jadi melihat di versi tiga search.html aku sudah dibersihkan kepala halaman dan hanya menempatkan dalam hal ini, tag link, yang bertentangan dengan nama, tidak memberikan hyperlink. Ini link ke file lain dengan cara href yang nilainya dalam hal ini, adalah pencarian 3.css Jadi saya menyadari kita akan cepat. Tapi semua saya lakukan adalah jenis bergerak hal di sekitar. Mari saya terbuka pencarian 3.css. Itu dia, tidak ada yang benar-benar untuk itu. Aku hanya disalin dan disisipkan ke dalam baru file, seperti kita diperhitungkan barang keluar ke file lain sebelumnya. Dan result-- yang benar-benar underwhelming-- akan menjadi persis sama. Tapi kami bergerak toward-- tidak, itu tidak. Oh, aku tahu mengapa. 

Jadi tampaknya menjadi bug. Dan dalam arti tertentu. Tapi biarkan aku membuka tab Jaringan saya. Biarkan aku kembali halaman tersebut. Ah, mengapa CSS tidak diterapkan? Nah, file CSS, sama, memiliki yang akan dibaca dunia, sehingga untuk berbicara. Dan juga saat ini dilarang. Jadi biarkan aku melakukan chmod a + r bintang dot CSS-- whoops-- kami dot CSS hanyalah ekstensi file untuk file CSS. Sekarang biarkan aku kembali ke browser saya dan reload. OK, sedikit lebih baik. 

Sekarang biarkan aku melakukan satu hal. Dalam pencarian 4.html. Saya memiliki versi yang saya hanya berpikir adalah cara dingin, meskipun cara yang lebih rumit. Mari kita lihat hasilnya dulu. Tutup ini untuk memberi kita lebih banyak ruang. Ubah ini untuk mencari-4, Enter. 

Dan sekarang banyak hal yang rusak. Aku akan kembali ke dalam direktori saya di sini. Dan sekarang aku hanya akan melakukan chmod dari + r pada file-- sebuah karena saya tahu itu exists-- disebut logo.gif, yang merupakan gambar. Dan sekarang reload. Dan Wow jadi sekarang aku cukup dekat, terus terang, seperti versi 1999 dari Google, dan terus terang, versi 2014 dari Google, kan? 

Jadi itu sekarang pergi ke website mereka, akhirnya, jika saya mencari kucing. Dan sesungguhnya adalah. Tapi apa yang saya lakukan secara berbeda dalam versi ini 4? Jadi kita tidak akan tinggal terlalu banyak tentang itu di sini. Anda akan melihat hal ini dalam masalah menetapkan tujuh akhirnya. Tapi perhatikan saya melakukan beberapa hal. 

Saya memperkenalkan div tag, yang merupakan divisi, memiliki semangat yang sama tag paragraf. Tapi divisi adalah seperti, inilah daerah tak terlihat persegi panjang layar. Mari kita memberikan yang unik identifier, footer, hanya sehingga kita dapat berbicara tentang dalam HTML kita di tempat lain. Berikut ini adalah div lain halaman ID yang akan menjadi konten. Ini adalah isi dari halaman. Dan di sini adalah header halaman. 

Dengan kata lain, saya sudah dasarnya di HTML am mental melihat halaman web ini sebagai tiga komponen, header di sini dengan persegi panjang tak terlihat ini, isi di tengah, dan kemudian footer bawah, bahkan meskipun kita tidak melihat hal-hal. Karena aku ingin di kepala saya Halaman di sini, atau di file css, Saya dapat menggunakan sintaks ini. 

Header tidak tag. Ini adalah ID sehingga ternyata bahwa dengan melakukan #header, Saya sekarang dapat menerapkan satu atau lebih properti untuk header. Saya dapat melakukan isi yang sama, sama untuk konten sini. 

Jadi misalnya, di footer, pemberitahuan semua sifat ini saya menambahkan. Dan aku tahu mereka ada hanya dengan membaca pada dokumentasi untuk CSS. Ukuran font akan menjadi smaller-- sehingga beberapa ukuran font relatif. Berat akan menjadi berani. Margin-- berapa banyak piksel sekitar itu-- adalah 20 piksel. Dan itu akan dipusatkan. 

Tapi sekarang, halaman terlihat seperti ini. Jika saya tidak senang dengan copy saya di sana, Aku bisa melakukan sesuatu seperti warna merah. Dan kemudian saya bisa simpan ini, reload, dan sekarang saya sudah bergaya footer. Jadi ini hanya mengisyaratkan kekuasaan dari apa yang dapat Anda lakukan di halaman web untuk mengubah hal-hal sekitar. 

Dan bahkan lebih dingin dari ini, jika Anda ingin untuk melihat-lihat dengan website yang sebenarnya, Anda tidak dapat secara permanen mengubah mereka. Tapi kalau aku membuka Inspektur Chrome lagi dan aku pergi tidak ke sisi kiri di sini, yang menunjukkan HTML Facebook, tetapi menunjukkan di sebelah kanan sisi semua CSS nya, Anda dapat dan mengubah keadaan dengan cepat. Jadi biarkan aku pergi ke depan dan melakukannya. 

Biarkan aku pergi ke depan dan kontrol klik pada kata acak ini di sini, menandatangani, dan klik Inspect Element. Chrome sangat nyaman melompat ke tag h1 bahwa Facebook menggunakan. Dan perhatikan di sini Facebook memiliki jenis malas sulit kode ukuran font sebagai properti di sini. 

Jadi hal yang keren meskipun adalah bahwa jika saya benar-benar pergi di sini dan berkata, oh, Facebook, aku tidak seperti itu 64 piksel, kita sekarang dapat mengubah Facebook. Tentu saja, kita hanya mengubahnya bagi saya pribadi saat ini. Tapi ini hanyalah alat dalam tool kit kami yang akan memungkinkan kita untuk men-tweak dan mencari tahu dan juga mendiagnosa masalah di halaman web kita sendiri. Dan kita bisa sama pergi di sini, yang merupakan hal yang sama. Jika Anda benar-benar ingin mendapatkan mewah, saya Maksudku, sekarang Anda benar-benar dapat bermutasi halaman dan melakukan hal-hal gila. 

Lalu mengapa ini semua berguna? Nah, pada akhirnya, kami akan ingin menjadi mampu membuat halaman web yang didorong oleh ujung belakang kita sendiri, tidak hanya dengan Google dan outsourcing end kembali ke sana. Kami benar-benar ingin nilai, misalnya, aksi mesin pencari kami atribut untuk pergi tidak kepada orang lain, tetapi untuk sesuatu seperti search.php, mana search.php ada di server kita sendiri, bukan pada orang lain. 

Dan untuk sampai ke sana, kita benar-benar perlu untuk memperkenalkan bahasa baru. Jadi kita sudah melihat yang baru bahasa di sini, atau dua benar-benar, HTML dan CSS. Tapi mereka benar-benar hanya struktural dan estetika bahasa. Mereka tidak pemrograman bahasa per se. Dan itu tentang sebanyak resmi waktu seperti yang kita akan menghabiskan pada mereka. Karena kita akan mulai sekarang untuk transisi ke PHP. 

Jadi PHP adalah sebenarnya bahasa pemrograman. Ini adalah bahasa scripting dalam arti bahwa itu dimaksudkan untuk menjadi bobot yang lebih ringan dari sesuatu seperti C. Dan itu adalah bahasa ditafsirkan, yang berarti itu tidak dikompilasi. Jadi singkatnya, apa artinya ketika kita menggunakan bahasa seperti c dan kita harus melakukan kompilasi? Apa artinya mengkompilasi kode sumber C? AUDIENCE: [tak terdengar]. DAVID J Malan: Katakan lagi? AUDIENCE: [tak terdengar]. DAVID J Malan: Perfect. Ternyata menjadi biner. Ternyata menjadi nol dan orang-orang dari kode sumber bahasa Inggris-seperti yang sebenarnya. Dan kemudian kita benar-benar dapat menjalankan mereka nol dan orang-orang dengan melewatkan mereka melalui CPU dengan mengklik ganda ikon atau menjalankan perintah. 

PHP dan Python dan Ruby dan Perl dan JavaScript dan tandan lainnya bahasa ditafsirkan bahasa, yang berarti Anda tidak mengkompilasi mereka. Sebaliknya, Anda memberi mereka makan sebagai masukan untuk Program yang disebut penerjemah. Dan penafsir itu, yang orang lain menulis, membaca kode atas sumber Anda ke bawah, kiri ke kanan dan hanya menafsirkan garis dan melakukan apa yang Anda katakan. 

Jadi, jika Anda menemukan baris yang mengatakan cetak, tidak selalu mengkonversi cetak ke nol yang sesuai dan yang. Itu hanya memiliki interpreter ini seperti jika kondisi besar yang bertuliskan, jika instruksi programmer adalah cetak, kemudian melakukan hal berikut. Jadi menafsirkannya hanya oleh jenis penalaran melalui apa yang Anda mengatakan hal itu untuk dilakukan. 

Dan PHP adalah salah satu bahasa tersebut. Dan PHP tahun lalu dirancang tepatnya untuk pemrograman web. Dan itu awalnya bahasa berantakan sangat ceroboh. Dan memang, ada besar jumlah kode PHP yang buruk di luar sana. Tapi bahasa itu sendiri telah matang selama bertahun-tahun, begitu banyak sehingga sekarang ini sebenarnya langkah berikutnya yang indah pedagogis dari C karena begitu terkutuk akrab dengan segala sesuatu Anda baru saja melihat dalam beberapa minggu terakhir. 

Satu perbedaan awal kita akan melihat adalah tidak ada fungsi utama lagi. Ketika Anda mulai menulis kode, itu hanya akan dijalankan tidak peduli apa, seperti yang akan kita lihat sebentar lagi. Sementara itu, inilah apa variabel seperti di PHP. Ini sedikit berbeda, tapi hanya nyaris. 

Dalam PHP, tidak ada mengetik kuat. Ada minggu mengetik, yang hanya berarti ada adalah tipe data seperti string dan angka dan hal-hal lain. Tapi Anda tidak repot-repot menentukan apa yang mereka lagi. PHP angka itu keluar untuk Anda. Tanda dolar hanya keputusan bahwa orang-orang PHP dibuat tahun lalu sehingga setiap variabel dalam PHP hanya dimulai dengan tanda dolar. Ini sebenarnya semacam berguna dalam bahwa melompat keluar pada Anda sedikit lebih. 

Tapi setelah itu, ini adalah suatu kondisi di PHP. Apa yang berbeda dibandingkan C? Trik question-- apa-apa, yang benar-benar benar-benar baik. Ekspresi Boolean di PHP-- sama. Ekspresi Boolean dengan dan terhadap atau, switch, loop, loop, loops-- OK, yang satu ini berbeda. 

Jadi ternyata ada beberapa fitur lain di PHP. Salah satunya adalah benar-benar ini, yang luar biasa nyaman. Jika $ angka adalah sebuah array yang telah Anda menyatakan sebelumnya dalam sebuah program, Anda memiliki mewah ini untuk masing-masing membangun bahwa alih-alih melakukan semua itu mengganggu saya sama dengan 0, I adalah kurang dari ini, [? Saya ++?], untuk setiap nomor sebagai nomor, di mana setiap dari nilai-nilai tanda dolar hanya variabel, dan yang terakhir Anda bisa memikirkan sebagai I. Anda bisa menyebutnya apa pun yang Anda inginkan. Aku menyebutnya nomor. Ini akan iterate atas array disebut angka. Dan pada setiap iterasi, itu akan secara otomatis memperbarui untuk Anda nomor tanda dolar variabel sehingga Anda terus-menerus memiliki akses ke variabel yang Anda inginkan tanpa harus melakukan apapun braket persegi notasi atau pengindeksan ke dalam array. 

Di luar itu, kami bahkan memiliki hal-hal seperti array, yang terlihat hampir sama, kecuali itu sangat umum, seperti yang akan kita lihat, baik di PHP dan JavaScript untuk pra menginisialisasi array menggunakan tanda kurung siku. C menggunakan kurung kurawal. Jadi itu sedikit berbeda, meskipun kita tidak benar-benar menggunakan trik yang banyak. 

Tetapi bahkan lebih kuat, PHP memiliki array asosiatif, yang merupakan cara mewah mengatakan tabel hash. Bahkan, jika Anda ingin mendeklarasikan hash tabel dalam PHP, tidak seperti di C-- berapa banyak baris kode yang dibutuhkan untuk benar-benar menerapkan tabel hash di C? Atau berapa banyak baris kode itu mengambil untuk mengimplementasikan tabel hash di C? Jadi mungkin banyak, kan? Ini adalah beberapa lusin, mungkin 100 atau 200. Ini trivial. Atau itu akan menjadi, seperti Anda akan segera melihat, trivial untuk menerapkan tabel hash [Tak terdengar] dan juga mencoba. Namun dalam PHP-- dan terus terang, saya mungkin tidak harus memberitahu Anda ini sampai Monday-- di PHP, jika Anda ingin meja, dilakukan. Itu hash table-- jadi dengan satu baris kode. Dan 

Banyak bahasa melakukannya. Bersenang-senang dengan pset lima. Jadi banyak bahasa melakukannya. Mereka memberikan abstraksi ini bahwa orang lain, programmer lain, telah diciptakan untuk Anda sehingga Anda dapat berdiri di bahu mereka dan mulai menggunakan ide-ide yang super menarik, seperti tabel hash dan pohon dan mencoba. Tapi Anda tidak perlu harus melaksanakan hal-hal sendiri. 

Dan pada akhirnya, apa yang kita akan menggunakan PHP untuk berpotensi menulis program dari apa yang disebut baris perintah. Kita bisa menciptakan setiap program kami telah menulis semester ini sejauh ini, kecuali mungkin Breakout yang menggunakan SPL, yang spesifik untuk C saat ini. Tapi setiap masalah lainnya yang ditetapkan, tentu Mario dan Caesar dan Vigenere dan [? Crack?] Dan seterusnya, kita bisa kembali menerapkan dengan PHP, mungkin sedikit lebih mudah. 

Tapi apa yang kita akhirnya akan menggunakan PHP adalah pemrograman web. Dan kita akan memperkenalkan berikutnya seminggu model mental, paradigma yang disebut MVC, model view controller, yang jika Anda sudah melakukan pemrograman sebelum di Python atau Ruby atau di tempat lain, Anda mungkin tahu tim ini dengan Rails dan Django dan sejenisnya. Tetapi jika Anda baru untuk ini juga, Anda akan melihat bahwa ini adalah benar-benar sangat alami perpanjangan faktorisasi dan jenis desain kode yang kami telah lakukan di C. Kita akan sekarang menerapkan beberapa dari mereka pelajaran untuk PHP sehingga pada akhirnya, kita mengimplementasikan website kita sendiri. Dan jika Anda semacam terpesona atau kagum bahwa kita akan melakukan semua begitu cepat, menyadari bahwa hampir setiap semester, hampir 90% siswa CS50, termasuk mereka yang belum pernah diprogram sebelumnya, akhirnya membuat proyek akhir yang didasarkan pada pemrograman web. Dan sehingga Anda akan melihat bahwa pengembalian tinggi dalam minggu-minggu yang akan datang. Jadi kita akan melihat Anda kemudian pada hari Senin. 

SPEAKER 1: Dan sekarang, Deep Pikiran oleh Daven Farnham. Tabel hash. 

[Tertawa]