[MUSIC PLAYING] 

DAVID J Malan: Ini adalah CS50 dan ini adalah awal minggu 7. Jadi selamat datang kembali. Dan Anda mungkin ingat bahwa di masalah menetapkan empat, ada sedikit perburuan untuk beberapa hadiah yang luar biasa dimana setelah Anda memulihkan foto Staf baik di sini dan di New Haven, Anda ditantang untuk menemukan banyak dari para ilmuwan komputer yang Anda bisa. Dan kita punya seluruh sekelompok kiriman. Pikir saya akan berbagi beberapa dengan Anda di sini hari ini. 

Dan kami akan posting semua ini secara online. Tapi secara khusus, saya ingin menarik perhatian Anda to-- baik satu, Sam di beberapa dari mereka umumnya berpose seperti ini. Tapi tampaknya pada pagi ini, pemenang itu seseorang tertentu bernama Ken dengan 24 staf ditangkap kamera atau beberapa saat Anda memperhitungkan rekening beberapa staf dalam gambar. Digambarkan di sini adalah Ken berikutnya Maria di New Haven. 

Sekarang, Ken, meskipun, ternyata keluar sedikit dari kasus sudut yang belum terjadi sebelumnya. Ternyata hal itu tidak terjadi saya menempatkan baik cetak di masalah menetapkan empat yang mengatakan bahwa staf tidak memenuhi syarat untuk hadiah yang luar biasa karena Ken, tentu saja, salah satu fotografer pada staf kami. Sekarang, dengan mengatakan bahwa, dia awalnya menulis saya untuk mengatakan jangan posting foto-foto ini secara online. Saya pikir sebagian besar karena sebagian besar foto bahwa fotografer ini mengambil melihat sedikit sesuatu seperti ini. Dan sejenisnya. 

Tapi Ken ingin saya untuk meyakinkan Anda bahwa dia seorang fotografer yang sangat baik, dia seorang profesional, ia mengambil Foto yang tidak kabur, yang lebih baik dalam fokus, dan dia mengambil beberapa staf kami sendiri. Namun, bukannya hanya mengakui Ken, apa yang kami pikir kami akan melakukan adalah pergi melalui daftar siswa yang sebenarnya yang diajukan. Dan ternyata bahwa Lance dengan 15 foto per pagi ini adalah pemenang kami. 

Dan digambarkan di sini adalah Lance dengan Colton, dengan Skaz, dengan diriku sendiri, dan dengan Sam. Tapi kemudian ternyata bahwa pada 11:46, sehingga hanya sedikit yang lalu, Aku kembali ke email saya dan menemukan bahwa kita belum satu pengajuan lebih oleh seorang mahasiswa bernama Bonnie email yang mengatakan hanya ini. Tidak akan berbohong, aku melakukan hal ini selama kelas. Dan kemudian melanjutkan untuk melampirkan hanya 14 foto, salah malu Lance 15. 

Tapi dalam foto Bonnie, ternyata out yang beberapa anggota staf, Sam di antara mereka, sehingga apa yang kami pikir kami akan lakukan adalah mengakui kedua. Jadi selain mendapatkan Dropbox ruang bahwa setiap orang yang berpartisipasi menerima, dua bagian ini juga akan menerima makan siang dipenuhi bagus untuk mereka dan bagian mereka Mates minggu mendatang ini. Dan sehingga Anda akan mendengar dari kami, Lance dan Bonnie, tentang itu. Congrats begitu besar kepada mereka. Sekarang, Anda yang akan seperti makan siang lebih umum tahu bahwa makan siang CS50 di Cambridge dan New Haven adalah hari Jumat ini. Pergi ke CS50 situs slash RSVP. Dan sekarang kata pada seminar. Lebih curricularly. Jadi kita mendekati titik semester di mana Anda harus mulai berpikir tentang proyek akhir. Dan pada kenyataannya, hanya sedikit, akan disebut-usulan pra disebabkan. Proposal sehingga pra dimaksudkan untuk dampak cukup rendah dan benar-benar hanya kesempatan bagi Anda untuk menulis catatan singkat mengajar sesama untuk memberitahukan dia apa yang Anda berpikir Anda mungkin ingin lakukan untuk proyek akhir Anda. 

Sekarang, banyak siswa berakhir melakukan web berbasis proyek akhir. Dan tentu saja, kami hanya minggu sekarang lalu di ini dan di luar menyelam ke dalam pemrograman web. Jadi tidak perlu khawatir jika Anda sama sekali tidak tahu bagaimana Anda akan membangun ide-ide yang Anda mungkin ada dalam pikiran Anda. Ini benar-benar hanya fungsi memaksa untuk membuat Anda berpikir dan berbicara dengan TF Anda tentang hal itu. Tapi untuk membantu Anda dengan itu, dan dengan proyek akhir akhirnya, tahu bahwa CS50 memiliki tradisi menawarkan seminar. 

Dan ini adalah opsional, tangan, atau kuliah berdasarkan peluang untuk mempelajari lebih lanjut tentang topik yang sebuah tambahan sedikit untuk kursus ini silabus, tapi tetap indah bahan untuk mendorong proyek akhir. Dan jadi ini adalah daftar yang Staf CS50 di sini di New Haven telah datang dengan untuk tahun ini sekitar iOS pemrograman, Android pemrograman, pengembangan game, dan tandan alat yang lebih dan bahasa dan teknik. 

Sehingga mengawasi di website CS50 ini. Dan sementara itu, jika Anda ingin mendaftarkan minat Anda di salah satu, pergi ke CS50 ini slash daftar. Dan kita kemudian akan menindaklanjuti mengenai hari dan waktu penerbangan dan lokasi dan Segalanya-hampir semua akan menjadi streaming dan juga tersedia pada permintaan setelah jika Anda tidak dapat benar-benar membuatnya. Jadi tanpa basa-basi lagi, kami tinggalkan terakhir kali dengan GET. 

Dan ini adalah seperti pesan yang dalam amplop virtual, ingat, bahwa kami melewati dari router ke router untuk router antara browser web dan web Server. Dan pesan yang tampak sedikit sesuatu seperti ini. Ini adalah pesan yang lebih misterius yang sebenarnya dalam amplop ditulis pada selembar kertas yang baris pertama kata harfiah, dapatkan slash. 

Dan seperti cek kewarasan, apa slash menunjukkan? Apa slash berarti bila meminta sebuah website? Anda memintanya sepanjang waktu. Kebanyakan setiap kali Anda mengunjungi sebuah website, Anda tidak benar-benar ketik nama file. Anda mungkin hanya pergi ke Facebook.com, masukkan, gmail.com, atau sejenisnya. Dan apa slash mewakili? File apa? Atau apa halaman, khususnya? 

Indeks, ya. Jadi halaman default. Jadi jika Anda tidak menentukan sebuah file nama seperti yang kita akan mulai melihat, Anda benar-benar hanya meminta memberi saya halaman default dari Facebook atau memberi saya inbox saya atau memberikan saya halaman default berita di website CNN atau sejenisnya. Dan server kemudian merespon bahwa pesan dengan sesuatu seperti ini, mengatakan ya, saya berbicara HTTP versi 1.1. 

200, yang merupakan status kode yang kita manusia jarang pernah melihat karena itu baik. Karena itu berarti OK, permintaan telah diterima dan ditangani dengan benar. Dan jenis konten ternyata di respon cukup sering, namun tidak selalu, teks. Dan secara khusus, HTML. Dan itu benar-benar di mana kita melihat hari ini. 

Jadi sebenarnya, aku akan pergi depan dan membuka browser. Aku akan menggunakan Chrome, Anda dapat menggunakan kebanyakan browser apapun dalam minggu-minggu yang akan datang. Kami umumnya merekomendasikan Chrome karena itu sangat baik untuk pengembang perangkat lunak. Itu punya banyak dibangun di alat yang memudahkan untuk mengembangkan tidak hanya HTML dan CSS, hal yang kita akan mulai berbicara tentang hari ini, tetapi juga bahasa lain juga. 

Dan aku akan pergi ke depan dan pergi to-- Aku akan Kontrol klik atau kanan klik di mana saja pada halaman web. Dan aku akan pergi ke Inspect Element. Dan aku akan men-tweak saya Layar hanya sedikit di sini. Biarkan saya pindah ini ke bawah. Jadi ini adalah apa yang disebut Inspektur Chrome. Jadi ini seperti sebuah debugging alat dibangun ke Chrome. 

Semua dari Anda sudah memiliki ini jika Anda sudah menggunakan Chrome. Dan memungkinkan Anda untuk melihat apa yang terjadi di bawah kap beberapa halaman web. Jadi mari kita benar-benar mengambil melihat ini sebagai berikut. Ini memiliki cara yang lebih fitur dan kita peduli tentang hari ini. Tapi ada tab ini di sini. Elemen, jaringan, sumber, waktu, dan beberapa hal lainnya. Aku akan mengklik Jaringan sejenak. 

Dan itu sedikit berlebihan pada pandangan pertama di sini. Tapi apa yang akan saya lakukan adalah membiarkan saya menyederhanakannya sedikit. Aku akan menghidupkan merekam cahaya sehingga itu merah. Dan aku akan mengatakan melestarikan log. Dan ini hanya sedikit hal yang saya tahu dari waktu ke waktu yang akan menyelamatkan segala sesuatu yang terjadi dalam browser. Dan sekarang aku akan pergi untuk http://facebook.com. 

Sebenarnya, mari kita lakukan www untuk mengukur baik, memangkas. Masukkan. Jadi URL yang banyak Anda mungkin telah mengunjungi. Dan sekarang web Facebook Halaman muncul di bagian atas. Dan kemudian sejumlah besar hal terbang oleh di bagian bawah. Dan pada kenyataannya, ternyata bahwa ketika Anda mengunjungi Facebook.com, Anda tidak hanya membuat satu permintaan HTTP, ternyata akan Facebook.com mengirimkan 41 orang amplop, masing-masing dengan mendapatkan permintaan sendiri, seperti yang ditunjukkan, meskipun di belakang layar di sini, di bagian bawah layar, hal ini menunjukkan bahwa, memang, saya Browser dibuat 41 permintaan. 

Dan secara total, itu ditransfer 861 kilobyte dan butuh untuk beberapa alasan sebanyak delapan detik untuk men-download semua itu. Jadi itu sebenarnya agak aneh bahwa situs Facebook akan mengambil panjang, tapi begitu baik dalam hal ini. Sekarang, semua ini saya tidak benar-benar peduli tentang kecuali untuk permintaan paling atas. Jadi mari kita pergi ke satu ini di sini dan biarkan aku zoom out untuk sesaat. 

Dan biarkan aku memperbesar ini. Jadi apa yang saya lakukan di meninggalkan meskipun ada banyak hal yang terjadi di sini adalah saya sudah disorot Facebook.com dan kemudian melihat bahwa aku ke bawah, ke bawah, ke bawah, untuk meminta header. Dan Anda akan melihat bahwa Chrome menunjukkan saya pada dasarnya isi batin permintaan saya buat. Ini tidak format di persis sama cara, tapi melihat ada menyebutkan mendapatkan, melihat ada menyebutkan tuan rumah, Facebook.com, jalan, atau garis miring, yang merupakan file yang saya minta. 

Dan kemudian jika saya gulir cadangan, kita akan benar-benar melihat bahwa apa yang dikembalikan Facebook bagi saya adalah semua header ini. Jadi dalam amplop maya memang banyak pasangan nilai kunci. Sebuah kata, titik dua, dan kemudian nilai. Sebuah kata, titik dua, dan nilai. Ini disebut header. Dan ada cara yang lebih rinci di sini dari kita benar-benar peduli sekarang. 

Tapi ini adalah kedua yang terakhir di sana, melihat, bahwa server Facebook.com itu, memang mengatakan inilah beberapa teks HTML. Jadi semua ini adalah untuk mengatakan bahwa ketika Anda meminta web Halaman dari browser ke Server, server yang merespon dengan amplop sendiri dalam yang teks. Dengan kata lain, HTML. Hyper Text Markup Language. Yang merupakan bahasa lain bahwa kami memperkenalkan hari ini bahwa manusia atau komputer menghasilkan untuk melaksanakan halaman web. 

Secara khusus, mari kita lihat ini. Aku akan sekarang kembali ke website Facebook. Dan aku akan hanya Kendali klik atau klik kanan dan klik pada View Page Source. Dan bahkan jika Anda tidak menggunakan Chrome, IE dapat melakukan hal ini, Firefox bisa melakukan ini, Safari dapat melakukan hal ini, meskipun menu Pilihan mungkin terlihat sedikit berbeda. Dan ini adalah HTML yang Mark dan Perusahaan di Facebook telah ditulis. 

Dan untuk bersama, bahasa ini di sini mengimplementasikan biru dan halaman putih yang kita lihat saat yang lalu. Sekarang, ini agak luar biasa. Tetapi jika kita melihat ke kiri atas, kami akan mulai melihat beberapa pola. Sepertinya ada banyak ini terbuka braket sudut dan kemudian ada HTML kata kunci ini. Berikut terbuka lain angle bracket dan kepala. 

Berikut adalah, jika kita gulir ke bawah dan ke bawah dan ke bawah, aku akan pergi ke depan dan mencoba untuk mencari sesuatu. Ada cara di atas di sebelah kanan di sini adalah tubuh braket terbuka. Dan ingat dari terakhir waktu itu kami mengusulkan bahwa halaman web sederhana bahwa manusia mungkin menulis mungkin terlihat sedikit sesuatu seperti ini. Terbuka tag HTML, kepala terbuka tag, tag judul terbuka, kemudian judul tertutup, kepala tertutup, terbuka tag tubuh, beberapa teks, tubuh tertutup, HTML tertutup. 

Tapi jeda sini untuk sesaat. Kode ini, bahkan jika Anda sudah pernah menulis sebelumnya tapi masih tidak mengerti apa yang terjadi, terlihat cukup baik. Benar, itu sangat bersih. Ini sangat Gaya bagus. Banyak lekukan dan ruang putih. Facebook tidak. Jadi mengapa Facebook begitu banyak lebih buruk daripada saya di menulis HTML? Rupanya. 

Benar, ini adalah seperti dari lima untuk gaya. Ada alasan kuat bagi mereka untuk memotong sudut ini. Baiklah, sehingga mereka tidak ingin membuat lebih mudah bagi Anda untuk membacanya. Jadi dalam arti, mereka obfuscating itu, semacam berebut itu setidaknya estetis sehingga bahwa itu sulit untuk Myspace untuk pergi dan merobek mereka homepage dan HTML untuk itu. Ternyata dengan program meskipun, termasuk Chrome, kita bisa membersihkan ini yang super mudah. Sehingga tidak cukup itu sebagai alasan. Apa lagi yang mungkin menjadi penyebabnya. Ya. Ya, data biaya ruang putih. Apa maksudmu? Ya, persis. Jika Anda menekan tombol Tab banyak atau spasi, mempertimbangkan implikasi. Jadi setiap tombol pada keyboard Anda adalah [Tidak terdengar] direpresentasikan sebagai satu byte. 

Jadi misalkan Mark atau salah satu devs hari ini memukul spasi hanya sekali di halaman HTML ini yang merupakan homepage Facebook. Dan Facebook memiliki banyak pengguna hari ini. Jadi misalkan homepage Facebook dikunjungi oleh satu miliar orang saat ini. Dan seseorang di Facebook memiliki memukul spasi hanya sekali. 

Jadi satu byte tambahan, satu miliar permintaan, berapa banyak lagi data Facebook mentransfer melalui internet karena seseorang memukul spasi pada keyboard-nya? Satu miliar byte, atau satu gigabyte Data sedang dikirim dari server Facebook kepada orang-orang di sekitar dunia tanpa alasan. Sekarang, itu hanya satu ruang. 

Bayangkan jika kita benar-benar membersihkan ini Hal up dan menjorok dan ditambahkan banyak ruang putih dan karakter tab dan ruang, Anda akhirnya menghabiskan gigabyte, jika tidak terra byte lagi ruang. Dan jadi super umum di dunia nyata pengembangan web adalah untuk mengecilkan kode Anda. Dan pada akhirnya kita akan melihat bagaimana Anda bisa melakukan hal ini. 

Tapi hari ini, kita akan mulai menulis kode yang sebenarnya dibaca oleh kita manusia. Ternyata, meskipun, jika Anda kembali untuk alat ini di Chrome Inspect Element, sebelumnya, kami berada di tab Jaringan. Ternyata bahwa jika Anda pergi ke tab elemen, apa yang sebenarnya Anda lihat adalah Chrome cukup dicetak versi yang HTML yang sama. Jadi kita sudah deobfuscated itu. Jadi itu tidak cocok untuk komputer. Dan sekarang Anda benar-benar bisa klik di sekitar dan mulai untuk melihat hirarki yang merupakan halaman web. Jadi mari kita benar-benar melakukan ini. Aku akan pergi ke depan dan membuka pada Mac saya sebuah program yang disebut teks edit. Dan ingat bahwa ini hanya program teks super sederhana. Windows memiliki notepad.exe. Dan aku akan Verbatim ketik berikut ini. Doc jenis HTML, terbuka braket HTML, ditutup braket HTML, kita memiliki kepala halaman di sini, akhir kepala halaman di sini, judul akan menjadi seperti, halo dunia. 

Dan kemudian di sini, kita perlu tubuh dari halaman web. Tubuh tertutup. Dan kemudian di sini, halo dunia. Baiklah. Jadi kami telah menulis halaman web super cepat. Aku akan menyimpannya sebagai hello.html pada desktop saya. Saya Mac akan mengeluh, berpikir bahwa, tunggu sebentar, ini adalah file teks, lakukan Anda ingin menyebutnya Txt? Tapi tidak, aku ingin menggunakan dot HTML. 

Dan kemudian apa yang bagus jika saya hanya klik dua kali file ini, hello.html, inilah halaman web saya. Sayangnya, Akulah -satunya orang di dunia yang dapat mengunjungi halaman ini sekarang. Karena mana itu hidup rupanya? Ini pada Mac saya, kan? Yang tidak berguna. Seperti tidak ada orang di ruangan ini apalagi di internet benar-benar dapat mengunjungi halaman tersebut. Jadi hari ini, kita perlu memperkenalkan elemen lain. 

Dan untuk melakukan hal ini, saya akan pergi ke depan dan membuka awan 9. Jadi awan 9 ini tentu saja cloud service-- berdasarkan CS50 IDE-- Yang memiliki semua ruang kerja kami berjalan di suatu tempat di internet. Dan itu berarti bahwa semua file kami dapat diakses publik sudah. Jadi mari kita pergi ke depan dan melakukan hal ini. Aku akan pergi ke depan dan membuat file baru NCS50IDE. Aku akan menyimpannya sebagai sebelum sebagai hello.html dan klik simpan. Dan sekarang hanya untuk menghemat waktu, aku akan untuk terus maju dan copy paste kode ini daripada mengetik ulang. Dan menyimpannya. Dan sekarang aku punya file bernama hello.html. Tapi bagaimana aku benar-benar membukanya sebagai halaman web? Nah, ternyata dibangun untuk CS50 IDE tidak hanya compiler seperti dentang dan debugger seperti GDB dan tandan program lain, sebenarnya ada matang penuh web server berjalan dalam CS50 IDE. 

Kalian semua, yang mengatakan, memiliki server web Anda sendiri. Dan server web hanya sepotong perangkat lunak yang tujuan dalam hidup adalah untuk melayani sampai halaman web. Untuk mendengarkan permintaan dari browser dan merespon dengan sedikit amplop maya dalam yang merupakan konten yang telah ditulis. Sehingga server web ini sebenarnya gratis dan open source. Mana open source hanya berarti perangkat lunak yang orang lain memiliki ditulis bahwa kita semua bisa benar-benar melihat dan men-download dan bahkan mengubah kode sumber. Dan itu disebut Apache. 

Dan kami telah membuat sedikit lebih mudah untuk digunakan dalam CS50IDE dengan menyebutnya Apache 50. Sehingga benar-benar dapat memahami berikut ini. Aku akan mengatakan Apache 50 awal. Dan kemudian aku hanya akan mengatakan dot. Dan kita melihat beberapa agak pesan misterius mengatakan pengaturan Apache dokumen [? Kelompok?] untuk rumah, ubuntu, apa pun itu, memangkas ruang kerja. Mulai web server Apache 2 berhasil. 

Jadi cerita panjang pendek, saya baru saja menekan tombol dan menyalakan server web yang sekarang mendengarkan di internet pada port TCP 80 pada alamat tertentu. Dan ia mengatakan di sini, dan ini akan berubah berdasarkan pada nama pengguna dan faktor lainnya, tapi perhatikan jika saya klik ini, IDE50 dot jharvard dan begitu dan sehingga, perhatikan bahwa selama ini untuk beberapa masa lalu minggu, Anda mungkin memiliki melihat bahwa nama pengguna sendiri tertanam di kanan atas sudut CS50IDE. 

Dan yang benar-benar telah semua ini mengatur waktu alamat di mana Anda dapat mengunjungi semua file Anda melalui web. Sampai saat ini, belum penting, karena dalam C, biasanya Anda ingin hal-hal berjalan dalam terminal, tidak di web. Tapi hari ini, kita mulai menulis kode berbasis web bahwa kita ingin diakses di URL publik. Jadi apa yang saya akan lakukan adalah klik URL ini. 

Dan melihat bahwa saya melihat cukup Indeks jelek, daftar direktori, tetapi file apa yang melompat keluar pada Anda mungkin? Hello.html. Itu karena aku menyelamatkan file di ruang kerja saya. Dan apa yang saya sudah bilang Apache web server adalah melihat di direktori kerja Daud. Dan membiarkan siapa pun di dunia melihat file-file. 

Dan memang, jika saya sekarang klik pada hello.html, Saya melihat dalam tab ini persis file itu. Sekarang perhatikan, awan 9 ini perbuatan sesuatu yang sedikit membantu bagi kita. Dalam CS50 IDE, melihat ada tiba-tiba sebuah address bar. Itu karena meskipun kita menggunakan Chrome untuk mengunjungi CS50IDE, dalam CS50IDE adalah sendiri versi browser web sekarang. Dan jadi daripada rumit seperti itu, Aku akan pergi ke depan dan hanya menyalin URL ini. Aku akan pergi ke depan dan hanya membuka jendela Chrome saya sendiri. Jadi tidak ada sihir di sini, tidak ada CS50IDE. Aku hanya akan benar-benar menyisipkan saya J Harvard URL dan tekan Enter. Dan voila, sekarang aku, dan dalam teori, setiap orang di internet, jika saya sudah dikonfigurasi izin tepat, dapat mengunjungi file ini. Dan jadi sekarang, jika saya mengatakan hello.html, voila, ada adalah halaman web sangat underwhelming saya. Jadi mari kita lakukan sebuah pemeriksaan cepat. Karena semua itu adalah konseptual set up. Dan kita sudah benar-benar tidak benar-benar mengajarkan Anda bagaimana menulis HTML per se. Pertanyaan sejauh pada apa yang baru saja terjadi? Iya nih. Apakah CS50 memiliki halaman web ini? Dalam arti apa? Pertanyaan bagus. Jadi CS50 ini memiliki CS50.io. Kami sudah memang membeli nama domain. Dan dengan sifat kalian login ke CS50IDE, Anda semua mendapatkan apa yang disebut subdomain. 

Jadi IDE50-malan, atau IDE50-Rob.CS50.io, itu alamat unik Anda dalam nama domain kita. Jadi untuk tujuan kursus, Anda memiliki alamat unik Anda sendiri. Tapi kami sudah disederhanakan hal dengan membeli domain tingkat atas, CS50 dot I / O dan kemudian orang lain adalah dalam itu, sehingga untuk berbicara. Dan kami akan datang kembali ke dalam beberapa minggu mungkin, terutama pada proyek akhir waktu, ketika beberapa dari Anda mungkin ingin mendapatkan nama domain Anda sendiri. Ini sebenarnya relatif langsung. Baiklah. Jadi mari sekarang kita lakukan ini. Aku akan kembali ke CS50IDE, di mana file saya sekarang, hello.html, tidak semua yang menarik. Saya ingin melakukan sesuatu sedikit lebih baik dari itu. Jadi aku akan melakukan sesuatu seperti ini. Biarkan saya paragraphs.html terbuka. Jadi ini adalah file yang saya tulis di muka. Di bagian atas itu, seperti biasa, kami memiliki komentar. Namun dalam HTML, komentar terlihat sedikit berbeda. On line tiga dan jalur 14, Anda melihat sintaks untuk memulai komentar dan mengakhiri komentar. 

Tapi tak satu pun dari hal-hal yang di antara hal-hal fungsional. Ini hanya sebuah catatan untuk manusia apa yang terjadi di sini. Dan hanya sebagai kewarasan cepat periksa, jika saya gulir ke bawah, apa yang baru jelas tag yang kita sudah diperkenalkan? Tag sejauh yang kita lihat terbuka braket HTML, kepala, judul, dan tubuh. Tapi apa jelas baru sekarang? 

Ya, jadi p. P tag atau tag paragraf. Dan kemudian aku hanya meminjam beberapa standar Teks latin untuk membentuk paragraf saya. Karena apa yang saya ingin menunjukkan adalah bagaimana Anda mungkin mewakili paragraf teks dalam HTML. Dan apa yang mulai terjadi di sini adalah bahwa sudah ada pola berkembang. Dan biarkan aku pergi ke depan dan melakukan hal ini. Ijinkan saya mematikan Apache. Dan aku akan mengatakan itu untuk memulai sendiri lagi dalam sumber hari ini tujuh m direktori. Sehingga saya memiliki akses ke segala sesuatu. 

Dan sekarang, jika saya kembali ke daftar direktori ini, melihat saya melihat setiap file dari hari ini. Dan Anda akan melihat di selanjutnya set masalah, kita akan memberikan petunjuk untuk melakukan persis ini. Jika saya membuka paragraphs.html, ini mungkin serta terlihat seperti bahasa pemrograman untuk Anda jika Anda tidak berbicara atau membaca Latin. Tapi ini hanya tiga paragraf teks yang ditandai di HTML. 

Dan perhatikan ayat istirahat di antara mereka. Karena ternyata, dan meskipun Anda mungkin cenderung untuk melakukan hal ini, sedangkan di dunia nyata, jika Anda ingin menempatkan baris istirahat antara hal-hal, Anda mungkin cukup sederhana melakukan ini dan tekan Simpan. Dan sekarang, jika saya reload sini, pemberitahuan bahwa segala sesuatu hanya mengaburkan bersama-sama hanya dalam satu gumpalan teks. Karena HTML adalah jenis bahasa yang bodoh. 

Hal ini dimaksudkan untuk digunakan dalam seperti cara bahwa browser hanya akan melakukan secara eksplisit apa yang Anda katakan untuk dilakukan. Jadi jika Anda tidak menceritakannya memberi saya sebuah paragraf baru, Anda tidak akan melihat paragraf baru. Dan pada kenyataannya, apa yang Browser akan melakukan bahkan jika Anda tekan Enter, katakanlah lagi dan lagi dan lagi, bergerak dengan cara teks ini bawah pada layar dan kemudian simpan dan kemudian reload, browser akan runtuh semua itu ruang putih menjadi hanya satu, terlihat spasi. Baiklah. Jadi itulah tag paragraf. Dan jadi apa pola yang berkembang di sini? Nah, tampaknya menjadi kasus yang HTML adalah semua tentang memulai tag dan berakhir tag. Dan apa tag? Nah, itu hanya sepotong sintaks. Terbuka braket, kata kunci, braket tertutup, adalah tag. Atau mulai tag. Dan kemudian ketika Anda dilakukan mengekspresikan diri, seperti dalam Anda selesai dengan paragraf, Anda melakukannya untuk berbicara sebaliknya. Tetapi sebaliknya tidak cukup mundur. 

Anda hanya awalan tag yang sama ini nama dengan garis miring seperti ini. Baiklah. Jadi tidak semua yang menarik. Dan pada kenyataannya, kita tidak membuat web semua yang lebih menarik. Bagaimana jika saya ingin membuat hal yang lebih besar dan berani? Jadi ternyata bahwa di sini adalah contoh di headings.html, di mana dalam tubuh saya, Aku punya tag H1, H2, H3, empat, lima, atau enam, yang semuanya tampak cukup misterius. Tetapi jika aku pergi membuka ini Misalnya, mari kita lihat. Headings.html. 

Jadi browser secara default dapat memberikan teks yang besar dan tebal ukuran yang berbeda. H1 besar. H6 lebih kecil dan kemudian segala sesuatu yang lain di antara. Jadi itu menarik tapi masih tidak benar-benar web saya tahu. Bagaimana jika kita ingin saya miliki sesuatu seperti daftar. . Jadi, inilah daftar bullet dari tiga rumah Harvard. 

Bagaimana Anda pergi untuk melakukan ini? Nah, lihatlah list.html. Dan di sini, kita melihat sedikit dari funkiness tapi mari kita mempertimbangkan apa yang terjadi. Jadi berdasarkan pada apa yang Anda baru saja melihat, UL singkatan daftar unordered. Daftar unordered hanya berarti bullet. Tidak ada nomor. Ada juga sesuatu yang disebut memerintahkan daftar, yang merupakan OL di tag. Kemudian LI, daftar item semua itu berarti. 

Dan sehingga secara otomatis nomor segalanya untuk Anda. Tapi sekali lagi, semua lekukan saya dan ruang putih hanya demi saya. Browser tidak benar-benar akan peduli. Jadi meskipun Anda tidak bisa melakukan ini, hanya harus jelas, Anda tidak harus meratakan meskipun browser akan tetap dapat memahaminya dengan baik. Aku memukul ulang di saya Browser, saya mengklik isi ulang dan tidak ada perubahan yang terjadi karena browser masih melakukan apa yang saya katakan untuk dilakukan. 

Baiklah. Jadi ini semua hanya teks. Sekarang mari kita lakukan sesuatu yang lebih menarik. Aku akan pergi ke depan dan meminjam beberapa HTML ini. Aku akan pergi ke depan dan membuat file baru di sini. Dan kami akan menelepon rick.html ini. Kami memiliki proporsional sesuatu yang digunakan disebut roll rick di ini kelas tahun ini, saya tidak tahu, itu hanya terjadi secara organik. 

Dan sekarang itu keluar dari kontrol. Jadi aku hanya akan pergi dengan itu. Dan jika saya pergi ke Google Gambar dan Rick Astley. Jika Anda tidak tahu mengapa kita melakukan ini, hanya membaca di Wikipedia. Setiap kali Anda mengklik pada link, seseorang telah tertawa di suatu tempat. Dan biarkan aku pergi ahead-- ada kita pergi, mari kita melihat gambar ini. 

Jadi di sini kita memiliki gambar di Google Images. Dan mari kita asumsikan bahwa ini adalah cukup di mana-mana di internet. Jadi aku akan menganggap itu OK untuk saya untuk benar-benar menempatkan ini ke dalam halaman web saya. Aku akan pergi ke depan dan copy URL gambar. Dan jika saya kembali ke Cloud 9, mari kita lihat apa yang bisa saya lakukan di sini. Jadi di sini adalah hanya sebuah halaman web. Ini adalah Rick Astley, haha, Aku akan sekarang kembali untuk browser saya, reload, dan menarik. 

Dimana Rick? Jadi biarkan aku melihat apa yang terjadi. Sebenarnya, aku akan berpura-pura seperti saya tidak melakukan itu. [Tidak terdengar] menempatkan dia di sini. Kami akan datang kembali ke dalam sekejap. Jadi, inilah rick.html. Sehingga tidak Rick Astley. Jadi ternyata kita bisa benar-benar menambahkan dia di sini. Ini adalah Rick Astley. Aku akan mengatakan memberikan saya sebuah gambar yang Sumber adalah URL saya hanya disalin, yang rupanya adalah bahagia ulang tahun sesuatu atau lainnya. 

Dan sekarang aku akan menutup tag seperti ini. Jadi ini membungkus super panjang. Tapi perhatikan bahwa semua saya sudah dilakukan adalah gambar braket terbuka, sumber dengan atribut ini. Dan itu URL sangat panjang. Dan di akhir, perhatikan ini. Mengapa saya melakukan slash bracket siku bukan, seperti setiap tag lainnya, memiliki braket terbuka, IMG, braket ditutup? Hanya mengambil menebak bahkan jika Anda tidak memiliki keakraban apapun dengan HTML sebelumnya. 

Jadi bagaimana menutup perintah, tapi mengapa apakah itu benar-benar membuat intuitif akal untuk melakukan sesuatu yang sedikit lebih verbose seperti gambar di dekat? Ya. Ya. Hanya semantik, tidak ada rasa mulai gambar dan berakhir gambar, itu baik ada atau tidak. Sehingga tidak masuk akal untuk meninggalkan celah untuk hal lain dalam sebuah gambar. Anda tidak bisa melakukan itu. Dan sintaks akan umumnya hanya untuk melakukan garis miring dalam tag terbuka atau tag awal dan kemudian tekan Save. 

Jadi jika saya sekarang ulang file ini, sekarang Aku punya web yang baik halaman memasak di sini. Dan kita bisa pasti benar-benar mengganggu orang dengan menanamkan bukan seperti link YouTube. Dan pada kenyataannya, setiap saat Anda pernah pergi ke YouTube, dan biarkan aku benar-benar tidak sengaja rick menggulung diriku di sini. Jadi Rick roll. Jadi rick roll-- aku akan pergi di sini. 

[MUSIC PLAYING] 

OK, satu orang suka itu. Jadi perhatikan selama ini, jika Anda klik link Share, Anda tentu saja mendapatkan URL yang Anda benar-benar bisa menanamkan dalam email atau gambar forensik atau dalam masalah mengatur atau slide. Dan sekarang, jika saya bukan klik embed, melihat bahwa selama ini, hal ini telah ada. Aku akan pergi ke depan dan copy ini. 

Dan hanya supaya kita bisa melihat lebih baik, aku akan paste ke editor teks. Perhatikan bahwa ini apa YouTube telah memberitahu Anda. Setiap kali Anda mengunjungi Video YouTube, jika Anda ingin menanamkan video pada Anda Halaman web, cukup ambil ini. Jadi ini adalah satu lagi HTML tag disebut iframe. Atau dalam bingkai garis. Jadi juga terlihat sedikit lebih kompleks daripada yang lain. Jadi ternyata bahwa gambar tag dan tampaknya tag iframe mengambil apa yang disebut atribut. 

Dan ini adalah satu lagi sepotong sintaks di HTML. Selain tag Nama, terbuka braket nama tag, Anda dapat mengontrol perilaku tag dengan memiliki sejumlah besar atribut sama nilai. Atribut sama nilai. Dan misalnya, YouTube mengatakan kepada kita jika Anda ingin lebar video ini menjadi 420 pixel dan tinggi menjadi 315 pixel, itu bagaimana Anda mengungkapkannya dalam HTML. 

Sumber video akan menjadi URL YouTube panjang dan kemudian beberapa hal lain seperti bingkai perbatasan adalah nol, sehingga mungkin berarti ada tidak ada perbatasan di sekitar hal tersebut. Memungkinkan layar penuh mungkin berarti bahwa pengguna dapat mengklik tombol dan sebenarnya layar penuh video. Jadi jika saya benar-benar ingin menjadi mengesankan di sini di Rick dot HTML, daripada menggunakan tag gambar, biarkan saya menghapus itu, bukan paste. Dan sekarang reload. Dan sekarang di sini kita pergi lagi. Baiklah, itu sudah cukup. Baiklah jadi saya akan mencoba Sulit untuk tidak melakukannya lagi. Jadi apa adalah beberapa takeaways di sini? Jadi HTML, seburuk halaman web ini adalah, sebenarnya cukup sederhana. Ini bukan bahasa pemrograman. Ia tidak memiliki fungsi. Ia tidak memiliki loop. Ia tidak memiliki kondisi. Semua itu adalah puluhan tag yang berbeda, masing-masing memiliki nol atau lebih atribut. Dan pada kenyataannya, apa yang menyenangkan tentang HTML saat Anda mulai menyelam ke adalah bahwa hal itu sangat mendidik diri. 

Yang dibutuhkan adalah pemahaman dari kerangka umum HTML. Apa tag, apa adalah atribut, bagaimana Anda benar-benar mengkonfigurasi halaman web mengikuti. Dan segala sesuatu yang lain benar-benar hasil mencari di referensi secara online atau googling bagaimana melakukan beberapa teknik atau seperti yang kita lihat, melihat sumber Facebook kode, melihat website yang Anda sukai di itu kode sumber dan memahami bagaimana pengembang ada sebenarnya meletakkan hal-hal. 

Jadi kita bisa melakukan gambar juga. Dan pada kenyataannya, kami melakukannya beberapa saat yang lalu. Biarkan aku pergi ke depan dan hanya menunjukkan. Berikut ini beberapa contoh kode. Jika Anda pernah ingin melihat kucing pemarah. Jadi melihat bahwa saya bisa memiliki tag gambar di sini. Dan aku punya komentar atas itu. Aku punya alternatif teks untuk aksesibilitas. Jadi seseorang yang menggunakan layar pembaca untuk alasan penglihatan benar-benar dapat memiliki mereka kemudian pembaca layar mengatakan grumpy cat. Karena jika mereka tidak bisa melihat gambar, mereka setidaknya dapat memiliki komputer mereka memberitahu mereka secara lisan apa itu. Dan sumber file yang cat.jpeg. Jadi sebenarnya, jika saya benar-benar ingin mendapatkan pintar, apa yang saya bisa memiliki done-- Saya berjanji untuk tidak pergi ke Rick Astley, sehingga Aku akan google untuk kucing sebagai gantinya. Dan jika saya pergi ke Google Images di sini, dan kami akan menganggap bahwa ini adalah gambar kucing saya. 

Misalkan saya memiliki kontrol diklik atau kanan diklik ini, sengaja menyeramkan. Dan cat.jpeg aku akan untuk menghemat desktop saya. Sekarang saya kembali ke cloud 9. Perhatikan bahwa di sini, aku bisa pergi untuk meng-upload file lokal. Dan jika saya ambil ini File, cat.jpeg, pemberitahuan bahwa saya bisa tarik dan drop ke awan 9 dan itu akan berteriak padaku di sini. 

Karena kita sudah sudah diberikan Anda file cat.jpeg, tapi itu super mudah untuk ambil foto yang telah Anda diambil dari Facebook atau Flickr atau sejenisnya dan benar-benar drag dan drop ke dalam awan 9 dan kemudian membuatnya bagian dari pribadi Anda sendiri situs web atau masalah mengatur tujuh atau delapan seperti yang kita akan segera melihat. Dan kemudian ketika Anda akhirnya mengunjungi kucing itu, asumsi saya download bahwa kucing yang sama, pemberitahuan itu-- yang menggemaskan. 

Apa yang Anda akan melihat adalah sesuatu seperti wajah ini di sini. Jadi file yang Anda referensi dalam halaman web baik dapat lokal di Anda sendiri akun atau remote pada beberapa server lain seperti dalam kasus Rick Astley foto sedikit lalu. Jadi mana else-- apa lagi yang bisa kita lakukan di sini? Jadi mari kita lihat berikut ini. Anda tahu apa yang jenis dingin? 

Kami sejauh ini telah membuat halaman web yang sangat statis. Saya ingin hal bumbu sebagai berikut. Saya ingin membuat mesin pencari sendiri. Jadi untuk membuat mesin pencari, mari kita pergi ke depan dan mulai melakukan hal ini. Aku akan pergi ke depan dan menciptakan file baru yang disebut search.html. Dan kami telah prefabed versi online. Whoops. Jangan paste ke jendela terminal Anda. Versi cetakan online. Dan aku akan memulai sebagai berikut. Jadi, inilah awal file disebut search.html. Aku akan menyimpannya dalam direktori source hari ini. Aku akan memanggil Cari ini. Sebenarnya, kami akan membuatnya lebih baik. CS50 Cari dan benar-benar merek itu. Dan sekarang, aku akan mengatakan sesuatu seperti H1 CS50 Cari. Dan kemudian di sini, H2 datang segera. Dan hanya untuk rekap, H1 dan H2 berarti apa masing-masing? 

Ya, begitu besar dan tebal, dan tidak besar, tapi masih berani. Jadi jika saya simpan ini dan pergi di sini, mari kita lihat file search.html. Baiklah, dan yang satu ini adalah right-- [tidak terdengar]. Bersiaga. David bingung. Oh, itu ada di sana. David idiot. OKE. Jadi ada itu. Jadi CS50 pencarian segera hadir. Jadi sekarang, mari kita mensintesis apa yang kami lakukan minggu lalu. 

Di mana kita berbicara tentang mekanik tingkat yang lebih rendah dari HTTP. Dan ide-ide baru HTML, yang hanya bahasa markup ini di mana Anda memberitahu browser apa yang harus dilakukan dan menerapkan mesin pencarian kami sendiri. Jadi bukan hanya mengatakan akan segera datang, saya akan memperkenalkan sesuatu yang disebut tag form. Dan dalam bentuk ini, saya akan memiliki sesuatu seperti sebuah field input. 

Dan nama masukan ini lapangan, aku akan menyebutnya Q. Dan jenis bidang ini masukan Aku akan mengatakan hanya "text". Dan bidang teks, seperti yang akan kita lihat, hanya kotak teks. Dan sehingga tidak merasakan di sini untuk memiliki apa di dalamnya pada saat ini. Dan jadi aku hanya akan untuk menutup tag dengan yang garis miring tepat di tag itu sendiri. Dan kemudian aku akan memiliki satu masukan lainnya. Input type sama kirimkan. Dan kemudian aku akan menutup satu ini juga. 

Dan sekarang aku akan kembali ke sini. Dan sudah kita lihat, meskipun cukup jelek, aku sudah mendapat awal Halaman pencarian saya sendiri di sini. Bahkan, saya mencoba untuk membersihkan ini sedikit. Ternyata pada masukan di sini, saya dapat memiliki atribut lain yang disebut pengganti. Dan aku mungkin melihat sesuatu seperti kata kunci, atau lebih khusus, permintaan untuk q. 

Dan perhatikan, sekarang, aku punya jenis teks abu-abu yang menghilang sebagai Begitu aku mulai mengetik, tapi mungkin sesuatu Anda pernah melihat di halaman web lain. Saya tidak benar-benar seperti tombol Submit. Jadi aku benar-benar akan memberikan Tombol submit nilai pencarian. Dan sekarang, jika saya reload, perhatikan bahwa tombol saya menjadi bernama pencarian. Kau tahu, aku tidak benar-benar seperti logo di sini. Jadi Google Font Generator. 

Saya ingin membumbui hal ini lebih lanjut. Pencari sehingga CS50. Biarkan saya membuat logo sendiri. Yang terlihat bagus. Jadi sekarang biarkan aku simpan ini as-- datang. Mana itu akan pergi? Ada. OKE. Melewatkannya. Simpan sebagai. Browser bodoh. Stand by, kita akan memperbaiki ini sekali dan untuk semua. Di sana kami pergi. Baiklah. Maaf. Hari cuti. Sekarang ini adalah funky. Keluar layar penuh. Baiklah. 

Sekarang, seperti biasa orang, simpan gambar sebagai. Logo.gif. Sekarang aku akan pergi ke CS50IDE dan Aku akan hanya mengambil logo, Aku akan menyeret ke dalam saya direktori sumber tujuh, file sudah ada, aku OK dengan itu. Jadi aku akan menimpanya karena saya sudah punya itu. Dan sekarang bagaimana cara menyingkirkan ini? 

Mari kita pergi ke depan di sini dan melakukan sumber gambar sama logo.gif. Tutup ini. Simpan. Dan jika saya kembali ke pencarian saya Halaman, sekarang itu tampak cukup baik. Baiklah, sehingga belum cukup melakukan sesuatu yang berguna. Bahkan, saya coba cari untuk kucing dan melihat apa yang terjadi. Kucing. Kurang ajar. Ini tidak hanya bekerja, rupanya. Jadi apa bagian kunci yang hilang di sini? 

Benar, bahkan jika Anda tidak tahu HTML, Aku sudah mulai menandai bentuk telepon dan saya sudah mengatakan itu bagaimana untuk mendapatkan input, memberi saya sebuah kotak teks dan tombol submit, apa piece tampaknya hilang? Misalkan kita ingin benar-benar mendapatkan Hal ini bekerja dengan benar. Apa yang perlu kita lakukan? Kami memiliki kebutuhan untuk melaksanakan belakang database atau mesin pencari itu sendiri, dan itu akan mengambil banyak waktu, terus terang. 

Jadi ingat apa yang kita lakukan terakhir kali. Jadi jika Anda mencari sesuatu di Google dan Anda telah terlebih dahulu dimatikan, ingat, pencarian instan. Jadi biarkan aku menghidupkan yang mati sehingga sebenarnya ini berperilaku seperti browser sekolah tua, jika saya sekarang mencari sesuatu seperti kucing, mengingat apa URL yang tampak seperti. Ini cukup samar. Tetapi tertanam di sana, ingat, adalah pencarian slash. Tanda tanya q sama kucing. 

Dan itu tampaknya akan memberi saya sejumlah besar hasil pencarian. Jadi, Anda tahu apa yang akan saya lakukan? Aku akan meminjam Google hanya satu menit. Aku akan pergi di sini dan aku akan mengatakan bahwa ini merupakan tindakan atau tujuan, sehingga untuk berbicara, harus benar-benar menjadi Google. Dan metode yang saya inginkan penggunaan akan menjadi mendapatkan. 

Jadi apa tindakan? Tindakan ganjil bernama, tapi itu hanya berarti siapa yang akan menangani aksi formulir ini? Ketika saya klik Search, di mana harus hasilnya pergi? Dan jika saya sekarang kembali ke bentuk saya di sini dan kembali halaman web saya dan sekarang mencari sesuatu seperti anjing, melihat sekarang Saya telah kembali dilaksanakan Google. Benar? 

Jika saya ingin mencari sesuatu lain, ia bekerja untuk tidak hanya anjing, ia juga bekerja untuk kucing. Ia juga bekerja untuk CS50. Dan OK, ini hanya di bawah whelming, bukan? Baiklah, tetapi benar-benar bekerja. Jadi apa yang sebenarnya terjadi? Jadi saya sudah diajarkan browser saya, menggunakan HTML, untuk mengambil input dari user dan benar-benar mengirim masukan yang ke remote server menggunakan HTTP. 

Dan karena browser saya memahami HTTP, itu benar-benar membangun URL sehingga apa Saya akhirnya lebih di browser saya, perhatikan apa yang terjadi ketika saya mencari anjing. Jika saya klik Cari, melihat bahwa URL perubahan seperti yang saya dimaksudkan untuk google.com/search~~V permintaan sama dengan anjing. Dan itu karena bentuk tahu, karena metode ini mendapatkan, untuk hanya menambahkan ke URL ada. 

Sekarang, halaman web ini masih jelek. Jadi mari kita memperkenalkan satu lagi sepotong sintaks jika kita dapat hari ini. Dan ini adalah sesuatu yang diketahui sebagai cascading style sheets. Jadi biarkan aku lihatlah contoh ini di sini dan melihat jika kita dapat menyimpulkan apa yang terjadi. Ini adalah CSS0.html. Dan ini adalah di mana hal-hal mendapatkan sedikit jelek. Karena sayangnya, dalam dunia web, HTML sendiri tidak dapat melakukan segalanya. Dan jadi jika Anda ingin menyesuaikan dgn mode halaman web Anda, Anda benar-benar harus fokus pada estetika dengan cara yang berbeda. Jadi di sini, saya memiliki tubuh web saya Halaman dalam yang merupakan div besar. Dan div hanya berarti divisi. Jadi seperti sebuah paragraf tetapi tidak memiliki semantik yang sama dari paragraf teks. 

Ini hanya berarti untuk Browser, di sini datang wilayah persegi panjang besar web saya Halaman, saya ingin menanganinya secara khusus. Sekarang, line 21 adalah di mana div yang dimulai. Dan hanya mengambil menebak. Apa efek dari garis 21 pada sisa isi halaman? Centering itu. Itu saja. Jadi kita belum melihat cara sebenarnya berpusat teks. 

Bahkan, mesin pencari saya, tidak seperti Google yang sebenarnya, itu semua dibenarkan ke kiri. Dan sekarang di line 21, saya katakan, hey Browser, membuat sebuah divisi dari halaman. Hanya memberi saya besar, persegi panjang tak terlihat. Itulah bagaimana saya ingin berpikir tentang halaman web. Dan kemudian menyesuaikan dgn mode sebagai berikut. Dalam kutipan tersebut, sekarang, adalah bahasa kedua yang kita diperkenalkan hari ini disebut Cascading style sheet. Untungnya, itu juga tidak bahasa pemrograman, sehingga sangat terbatas dalam sintaks tetapi juga sangat terbatas dalam fungsi sedangkan HTML adalah semua tentang menandai data dari halaman web dan struktur halaman web. CSS umumnya tentang mil terakhir, estetika, mendapatkan ukuran dan warna dan Penempatan tepat di halaman web. Dan memang, itu terbentuk dengan pasangan nilai kunci. 

Sebuah properti seperti ini, teks menyelaraskan, diikuti oleh titik dua, diikuti oleh nilai yang properti, yang dalam hal ini adalah pusat. Dan sekarang melihat Anda dapat sarang hal-hal ini. Jika saya ingin segala sesuatu dalam Aku sudah disorot berpusat, itulah mengapa saya memiliki line 21 dan garis yang sesuai 31. Tapi kira sekarang ingin mengatakan John Harvard, selamat datang untuk halaman rumah saya. 

Simbol hak cipta John Harvard. Dan kira saya ingin pertama garis menjadi cukup besar. 36 piksel. Jadi itu ukuran yang layak. Dan saya ingin berat untuk menjadi berani. Tapi kemudian di bawah itu, Saya ingin teks yang lebih kecil. Dan di bawah itu, saya ingin teks bahkan lebih kecil. Maaf. Hari ini terasa seperti off hari. 

Jadi sekarang, apa yang saya lakukan untuk mengungkapkan ini? Berikut on line 22 adalah tertanam div atau div bersarang, jika Anda mau. Juga memiliki tag gaya sendiri. Aku menentukan ukuran font 36. Aku menentukan berat font tebal. Di sini, saya hanya menentukan 24 piksel. Dan akhirnya, di baris 28, saya tentukan 12. Jadi hanya sebagai kewarasan cek cepat dan sebagai manusia membaca ini, yang kata-kata di layar adalah benar-benar akan menjadi berani? Garis yang sebenarnya berani? 

Hanya John Harvard. Benar? Karena seperti garis 22 mengatakan hey Browser, inilah sebuah divisi dari halaman. Buatlah ukuran font 36 titik. Membuat berat huruf tebal. Segera setelah Anda mencapai sesuai tag akhir atau tag tertutup on line 24, yang berarti, hey peramban, berhenti melakukan apa pun yang Anda lakukan. Dan pemberitahuan harus jelas, meskipun baris 22 memiliki semua atribut ini seperti gaya, ketika Anda menutup tag sejalan 24, Anda hanya menyebutkan nama tag. 

Anda tidak mengulangi gaya kata atau apa pun yang ada di dalam mereka tanda kutip. Dan jadi jika saya melihat ini sekarang di browser saya, mari kita terlihat pada hasil akhir. Biarkan aku pergi depan untuk file ini, yang merupakan CSS 0. Dan itu masih cukup sederhana, tapi mendapatkan cukup menarik. Tapi ternyata ada yang hal-hal lain yang bisa saya lakukan di sini, dan pada risiko membuat ini benar-benar mengerikan, perhatikan di sini bahwa dalam saya badan halaman web saya, Aku bisa melakukan sesuatu yang lucu seperti bg atau warna latar belakang. 

Dan cepat, apa warna favorit Anda? Green saya mendengar. Baiklah. Jadi sekarang, jika aku memukul ulang sekarang, kami memiliki halaman web hijau. Baiklah, jadi itu tidak buruk. Dan sekarang, jika saya ingin membuat ini benar-benar keren, saya bisa membuat warna teks saya bahkan merah. Jadi mari kita lihat apa ini terlihat seperti. Sekarang itu tampak cukup baik. Dan di sini, jika Anda benar-benar ingin main-main dengan seseorang atau jika Anda ingin menjadi salah satu dari orang-orang yang mencoba untuk menipu Anda agar mengunjungi web Halaman karena mereka telah ditipu Google ke dalam pemikiran ada seluruh banyak kata-kata kunci like-- mari kita lihat, reload. Mana hasilnya? Dan itu kita. Baiklah. Jadi saya mengatakan ini sebagai samping, kita akan berbicara tentang hal ini dalam beberapa minggu ketika kita berbicara tentang keamanan, jika Anda benar-benar menanamkan seluruh tandan kata kunci dalam halaman web, bahkan jika mereka tidak terlihat dengan manusia, seseorang seperti Google, tentu saja, masih dapat benar-benar menemukan ini. Baiklah, sehingga cukup mengerikan cukup cepat. 

Dan pada kenyataannya, itu tidak semua yang banyak tidak seperti web saya sendiri Halaman sebagai sarjana, yang Saya mulai googling sekitar untuk menemukan versi terakhir dari situs lama saya. Itu sangat buruk. Bahkan, aku menemukan satu hanya sebelum kelas. Tapi ada yang lebih buruk di luar sana. Ini rupanya adalah saya halaman rumah kembali pada tahun 1996. Rupanya aku pikir itu yang tepat untuk meminta orang nama mereka sebelum mereka bisa benar-benar melihat halaman web saya. 

Dan kemudian saya menunjukkan mereka sesuatu yang bodoh, mungkin. Aku akan menggali lebih untuk waktu berikutnya. Tapi untuk saat ini, mari kita mempertimbangkan sedikit desain. Kami sudah berbicara tentang gaya. Dan halaman ini sejauh dan kebanyakan semua yang saya tulis cukup bersih Gaya. Tapi bagaimana desain? Nah, ada banyak redundansi dalam apa yang telah saya lakukan di sini. 

Saya sebutkan kata warna dalam beberapa tempat. Saya telah menyebutkan ukuran font dalam beberapa tempat dan berani dalam beberapa tempat. Dan fundamental, aku co berbaur dua bahasa. Aku punya HTML dengan tag saya dan saya atribut dan kemudian tiba-tiba, antara tanda kutip, saya harus bahasa kedua hari ini disebut CSS, yang lagi-lagi, hanya ini pasangan nilai kunci atau sifat ini dipisahkan oleh titik dua. 

Ternyata banyak seperti di C di mana kita dapat mulai untuk faktor luar beberapa kode ke dalam file header, sehingga bisa kita melakukan hal yang sama dalam HTML. Dan langkah menuju yang adalah sebagai berikut. Perhatikan bahwa versi ini, CSS1.html adalah Secara struktural halaman web yang sama persis. Jadi saya punya seluruh bunch divs, tapi kali ini, saya sudah sudah menyingkirkan bungkusnya div seperti yang Anda akan melihat. 

Dan saya sudah memberikan tiga divs atas, tengah, dan bawah, ID unik. Ini bagus, karena dengan memberikan divisi-divisi halaman pengidentifikasi unik, Saya dapat referensi mereka di tempat lain. Dimana? Nah, biarkan aku gulir ke atas. Dan sejauh ini, kapan saja kita telah melihat di kepala halaman web, apa hanya tag yang kami punya di kepala dari suatu halaman web? Sebuah sedikit lebih keras. Hanya judul sejauh ini. Tapi ternyata ada yang beberapa hal lainnya Anda dapat menempatkan di sana, salah satu yang disebut tag gaya. Jadi saat yang lalu, kita melihat pada atribut style. Ternyata ada tag gaya. Ini milik dalam kepala dari suatu halaman web. Dan sekarang melihat apa yang saya lakukan. Saya memiliki di dalam ini tag gaya berikut. Aku benar-benar menyebutkan pada baris 20 yang nama dari tag yang saya ingin menyesuaikan dgn mode. 

Kemudian saya memiliki penjepit keriting terbuka dan ditutup penjepit keriting. Jadi semangat yang sama C, tapi lagi, ini bukan fungsi, ini hanya detail sintaksis sini. Dan tentu saja, saya memberitahu browser, hey peramban, membuat seluruh tubuh halaman memiliki keselarasan teks pusat. Dan kemudian ini mengatakan berikut. Hey Browser, jika Anda melihat HTML elemen atau tag di halaman yang memiliki pengenal yang unik dari atas, sehingga simbol hash sini hanya berarti ide unik dari atas, silakan dan membuat ukuran font 36 dan berat font tebal. 

Hey Browser, unsur yang ID adalah tengah, membuat 24 piksel. Dan hey Browser, jika Anda melihat Ide bawah, membuatnya 12 piksel. Efek pada akhirnya adalah persis sam. Jika saya pergi ke CSS 1, Halaman tampak sama. Tapi kami langkah menuju desain sedikit lebih baik. Sekarang saya kembali ke sini untuk CSS2 dan melihat apa lagi yang telah saya lakukan. 

Sekarang halaman ini benar-benar, benar-benar bersih. Bahkan, saya bisa cocok semua isi pada halaman di sini. Tapi apa tag baru yang harus saya diperkenalkan, jelas? Link. Dan itu bukan nama yang terbaik untuk tag, karena itu bukan link dalam arti yang kita tahu itu, tapi ini berarti link di beberapa file lain. Ini adalah jenis seperti tajam termasuk di C. 

Ini adalah cara di HTML mengatakan hey peramban, pergi mendapatkan isi file disebut css2.css. Hubungan, bagi saya, adalah bahwa itu adalah style sheet. Dan memang, itulah yang salah satu S di cascading style sheets berarti. Ini adalah style sheet. Ini hanya file teks yang berisi sejumlah besar properti. Ini sejumlah besar gaya yang Anda ingin menerapkan ke halaman. 

Dan jadi ini tampaknya adalah mengacu ke file kedua. Dan jika saya membuka itu, CSS2.css, melihat bahwa semua yang telah saya lakukan adalah copy dan paste semua ini ke dalam file ini. Dan sekarang, bahkan jika Anda belum pernah kode hal ini sebelumnya, hanya mempertimbangkan dengan hat rekayasa pepatah pada, mengapa adalah ini desain yang lebih baik mungkin? Anjak keluar properti-properti CSS, menempatkan mereka ke dalam file mereka sendiri. Meskipun kita dipecahkan ini Masalah seperti lima menit yang lalu dalam versi pertama. 

Kami sudah tidak meningkatkan Halaman Gaya, ini hanya lebih baik desain dalam arti. Mengapa kamu berpikir? Ya. Lebih fleksibel bagaimana? Ya. Jadi jika Anda ingin pergi kembali dan mengubah hal-hal, sekarang, Anda memiliki satu tempat di mana Anda dapat mengubah hal-hal. Dan pada kenyataannya, untuk sesuatu seperti masalah set tujuh, di mana kita akan menerapkan situs perdagangan saham, itu akan memiliki Seluruh sekelompok halaman. Dan itu akan sangat menjengkelkan jika Anda memutuskan, hm, Saya tidak benar-benar seperti 24 piksel, saya ingin itu menjadi 28 piksel atau sedikit lebih besar. Dan kemudian harus melakukan global yang mencari dan mengganti atau membuka semua file website Anda hanya untuk benar-benar mengubah satu nilai. Dengan anjak keluar gaya ini menjadi satu tempat sentral, sekarang Anda dapat membuka satu file teks di CS50IDE ke dalam program apapun, mengubahnya, simpan, dan dilakukan. Anda sudah disebarkan orang- perubahan di mana-mana. Dan itu akan sama dalam file dot h juga. Jadi pertanyaan demikian jauh di sintaks ini? Baiklah, jadi kami sudah melakukan segalanya tampaknya kecuali benar-benar menerapkan hyperlink. Dan jadi mari kita pergi ke depan dan melakukan hal ini. Biarkan aku pergi ke depan dan membuat file baru di sini. Aku akan menyebutnya link.html, dimasukkan ke dalam kode hari ini. 

Dan aku akan melakukan open braket tipe doc html. Sebagai samping, hal ini di atas, doc ini deklarasi tipe, itu satu-satunya yang aneh dengan tanda seru. Anda hanya perlu melakukannya di sana dan itu berarti kita menggunakan HTML versi 5. Versi bahasa memiliki lebih lama string yang Anda butuhkan untuk diletakkan di sana. Jadi di sini adalah contoh yang disebut penghubung. 

Aku butuh badan halaman web saya di sini. Dan di sini, sebuah equals href katakanlah HTTP://www.disney.com dan website favorit saya, kita akan mengatakan. Baiklah, jadi sangat berbahaya, user friendly halaman. Jika saya sekarang pergi ke direktori saya daftar di sini dan membuka link.html, kita memiliki teks hiper. 

Dan memang, ini adalah di mana H di HTTP berasal dari. Hypertext transfer protocol adalah tentang mentransfer teks yang memiliki hyperlink ke sumber informasi lainnya. Dan memang, di sini adalah akrab, jika retro link biru yang jika diklik, benar-benar akan membawa saya ke Disney.com. Sekarang, oh, yang segera keluar. Baiklah, jadi sekarang, apa adalah beberapa implikasi dari ini? 

Dan terus terang, dunia mulai untuk mendapatkan sedikit lebih akrab dan juga menakutkan sedikit tetapi juga sedikit lebih diri dipertahankan setelah Anda mulai untuk memahami hal-hal ini. Karena kemungkinan besar, sebagian dari Anda, jika Anda pergi melalui folder Gmail spam atau bahkan inbox Anda, Anda mungkin pernah mendapatkan semacam email yang meminta Anda untuk mengubah Anda sandi mungkin atau mungkin memverifikasi kredensial PayPal atau yang lainnya. 

Dan pada kenyataannya, Anda mungkin telah menerima sesuatu yang mengatakan seperti klik disini untuk mereset password PayPal Anda. Dan sekarang, perhatikan, jika ini bukan Disney.com tapi seperti badplace.com dan ulang, perhatikan bahwa teks di sini bisa mengatakan apa-apa sama sekali. Dan pada kenyataannya, ini hanya kata-kata. Mengapa saya tidak benar-benar menjadi super berbahaya dan mengatakan http://www.paypal.com. 

Klik di sini ulang PayPal Anda kata sandi dan sekarang reload. Ini terlihat cukup sah, benar? Maksudku, aku tidak akan mengklik email yang hanya mengatakan ini. Tapi perhatikan dikotomi di sini. Dikatakan www.paypal.com, dan pada kenyataannya, tunggu sebentar, kita tahu bahwa Anda ingin s untuk keamanan. Jadi sekarang, pergi ke www.paypal.com HTTPS, tetapi jika Anda belum pernah melakukan hal ini sebelumnya, jangan biasakan dari melayang di atas link kecil di sini. Dan sulit untuk melihat pada layar ada, dan itu tidak semua yang mudah di sini. Namun demikian di sini di sudut kecil kecil melakukan browser sebenarnya memberitahu Anda bahwa kita akan untuk badplace.com bukan Paypal.com. Sekarang, di mana kita akan pergi dengan ini? Semua contoh yang telah kami lakukan hari ini, kami telah dikodekan keras dan mengetik manual. Web ini sangat menarik ketika Anda sulit kode halaman web Anda sehingga konten yang statis dan tidak pernah berubah. Tentu saja, semua kami situs web favorit saat ini, apakah itu Gmail atau Twitter atau Facebook atau sejumlah orang lain yang dinamis. Mereka berubah Menanggapi masukan pengguna seperti hasil pencarian Google. 

Dan sebagainya Rabu, apa yang kita lakukan adalah kita meninggalkan HTML dan CSS pengenalan di belakang kami dan kami mengambil begitu saja bahwa kita sekarang tahu itu dan kami memperkenalkan bahasa pemrograman baru disebut PHP, yang suka C, akan memberi kita kekuatan untuk benar-benar membuat program bahwa diri mereka menghasilkan output. Dalam hal ini, kita akan menggunakan PHP untuk menghasilkan dinamis web halaman menggunakan bahasa baru ini. Jadi lebih pada Rabu. Lihat Anda kemudian. 

[MUSIC PLAYING]