[Bermain muzik] 

DAVID MALAN J: Ini adalah CS50 dan ini adalah permulaan minggu 7. Jadi selamat datang kembali. Dan anda masih ingat bahawa dalam masalah menetapkan empat, terdapat sedikit memburu penyapu jalan untuk beberapa hadiah hebat mana selepas anda mendapatkan kembali gambar kakitangan di sini dan di New Haven, anda dicabar untuk mencari seberapa banyak orang ahli sains komputer seperti yang anda boleh. Dan kami mempunyai keseluruhan sekumpulan penghujahan. Pemikiran saya akan berkongsi beberapa tempat dengan anda di sini hari ini. 

Dan kami akan hantar semua ini dalam talian. Tetapi khususnya, saya mahu menarik perhatian anda supaya- juga satu, Sam adalah agak kecil dari mereka umumnya bergambar seperti ini. Tetapi ternyata bahawa pada pagi ini, pemenang telah ada seseorang yang bernama Ken dengan 24 kakitangan yang ditangkap pada kamera atau beberapa lagi apabila anda mengambil Akaun kakitangan berbilang dalam gambar. Gambar di atas Ken seterusnya kepada Maria di New Haven. 

Sekarang, Ken, walaupun, bertukar keluar ialah sedikit kes sudut itu tidak lagi berlaku sebelum ini. Ia ternyata bahawa ia tidak berlaku kepada saya untuk meletakkan cetakan halus dalam masalah menetapkan empat yang mengatakan bahawa kakitangan tidak layak untuk hadiah-hadiah hebat kerana Ken adalah, sudah tentu, salah satu daripada jurugambar pada kakitangan kami. Sekarang, dengan itu berkata, beliau asalnya menulis saya untuk mengatakan sila jangan hantar gambar-gambar ini dalam talian. Saya rasa sebahagian besar kerana kebanyakan gambar bahawa jurugambar ini mengambil melihat sesuatu yang kecil seperti ini. Dan sebagainya. 

Tetapi Ken ingin saya memberi jaminan kepada anda bahawa dia seorang jurugambar yang sangat baik, dia seorang profesional, dia mengambil gambar yang tidak kabur, yang lebih baik dalam fokus, dan dia mengambil banyak juga kakitangan kami sendiri. Tetapi bukan hanya mengakui Ken, apa yang kita fikir kita akan lakukan adalah pergi melalui senarai pelajar sebenar yang dikemukakan. Dan ternyata bahawa Lance dengan 15 gambar pada pagi ini adalah pemenang kami. 

Dan digambarkan di sini adalah Lance dengan Colton, dengan Skaz, dengan diri saya sendiri, dan dengan Sam. Tetapi kemudian ternyata bahawa pada 11:46, jadi hanya sedikit yang lalu, Saya kembali ke e-mel saya dan mendapati kalau kita ada lagi satu penyerahan lebih oleh seorang pelajar bernama Bonnie e-mel yang kata sahaja ini. Tidak akan berbohong, Saya melakukan ini semasa kelas. Dan kemudian meneruskan untuk melampirkan hanya 14 gambar, satu malu Lance ini 15. 

Tetapi dalam foto Bonnie, ternyata keluar adalah anggota kakitangan berbilang, Sam di antara mereka, jadi apa yang kita fikir kita akan lakukan ialah mengakui kedua-dua ini. Jadi di samping mendapatkan Dropbox ruang yang semua orang yang mengambil bahagian menerima, kedua-dua bahagian juga akan menerima makan tengah hari yang baik disediakan untuk mereka dan seksyen mereka Mates minggu ini akan datang. Dan supaya anda akan mendengar daripada kami, Tombak dan Bonnie, kira-kira itu. Congrats begitu besar kepada mereka. Sekarang, anda yang akan seperti makan tengah hari lebih umum tahu bahawa makan tengah hari CS50 di Cambridge dan New Haven ialah Jumaat ini. Pergi ke laman web slash RSVP CS50. Dan kini satu perkataan pada seminar. Lebih curricularly. Jadi, kita menghampiri titik semester di mana anda harus bermula berfikir tentang projek akhir. Dan sebenarnya, dalam hanya sedikit, akan kononnya cadangan pra dikenakan. Cadangan supaya pra adalah bertujuan untuk kesan cukup rendah dan benar-benar hanya satu peluang untuk anda untuk mengarang nota ringkas rakan-rakan pengajaran anda untuk memaklumkan dia atau dia apa yang anda fikirkan anda mungkin mahu lakukan untuk projek akhir anda. 

Sekarang, ramai pelajar berakhir melakukan web berasaskan projek akhir. Dan sudah tentu, kami hanya seminggu sekarang terakhir di dalam ini dan seterusnya terjun ke dalam pengaturcaraan web. Jadi tidak perlu bimbang jika anda sama sekali tidak tahu bagaimana anda akan membina idea-idea yang anda mungkin ada di dalam fikiran anda. Ini adalah benar-benar hanya satu fungsi memaksa untuk mendapatkan anda berfikir dan bercakap dengan TF anda mengenainya. Tetapi untuk membantu anda dengan itu, dan dengan projek akhir akhirnya, tahu bahawa CS50 mempunyai tradisi yang yang menawarkan seminar. 

Dan ini adalah pilihan, tangan ke atas, atau syarahan berdasarkan peluang mengetahui lebih lanjut mengenai topik yang yang sampingan sedikit untuk kursus ini sukatan pelajaran, tetapi tetap indah bahan untuk memandu projek akhir. Dan jadi ini adalah senarai itu Kakitangan CS50 di sini di New Haven telah datang dengan untuk tahun ini mengenai IOS pengaturcaraan, Android pengaturcaraan, pembangunan permainan, dan tandan lebih alat dan bahasa dan teknik. 

Jadi memerhatikan di laman web CS50. Dan dalam pada itu, jika anda ingin mendaftar minat anda dalam mana-mana, pergi ke slash daftar CS50. Dan kami akan membuat susulan tentang hari dan waktu penerbangan dan lokasi dan everything-- paling segala-galanya akan menjadi distrim dan juga boleh didapati atas permintaan selepas jika anda tidak boleh benar-benar membuat ia. Jadi tanpa berlengah-lengah lagi, kita berhenti masa lalu dengan GET. 

Dan ini adalah seperti mesej yang di di dalam sampul surat maya, masih ingat, yang kita lulus dari router ke router ke router antara pelayar web dan web yang pelayan. Dan mesej itu kelihatan sedikit sesuatu seperti ini. Ini adalah mesej yang lebih sukar difahami bahawa sebenarnya di dalam sampul surat ditulis pada sekeping kertas yang baris pertama kata literal, dapatkan slash. 

Dan sama seperti cek kewarasan, apa kata slash menandakan? Apakah slash maksudkan apabila meminta laman web? Anda memintanya sepanjang masa. Kebanyakan bila-bila masa anda melawat laman web, anda sebenarnya tidak menaip nama fail. Anda mungkin hanya pergi ke Facebook.com, memasuki, gmail.com, atau sebagainya. Dan apa yang palang mewakili? Apa fail? Atau halaman, secara khusus? 

Indeks itu, ya. Jadi halaman lalai. Jadi, jika anda tidak menentukan fail menamakan seperti yang kita akan mula melihat, anda sebenarnya hanya meminta memberi saya halaman lalai bagi Facebook atau memberi saya email saya atau memberi saya halaman lalai bagi berita di laman web CNN atau sebagainya. Dan pelayan kemudian bertindak balas kepada mesej itu dengan sesuatu seperti ini, dengan mengatakan ya, saya bercakap HTTP versi 1.1. 

200, yang status kod yang kita manusia jarang pernah melihat kerana ia baik. Kerana ia bermakna OK, permintaan telah diterima dan ditangani dengan baik. Dan jenis kandungan nampaknya dalam sambutan agak sering, tetapi tidak semestinya, teks. Dan secara khusus, HTML. Dan itulah sebenarnya di mana kita lihat sekarang ini. 

Jadi sebenarnya, saya akan pergi ke hadapan dan membuka pelayar. Saya akan menggunakan Chrome, anda boleh menggunakan paling mana-mana pelayar pada minggu-minggu akan datang. Kita biasanya mengesyorkan Chrome kerana ia adalah terutamanya baik untuk pembangun perisian. Ia mempunyai banyak dibina dalam alat-alat yang membuat ia lebih mudah untuk membangunkan bukan sahaja HTML dan CSS, perkara yang kita akan mula bercakap tentang hari ini, tetapi juga bahasa-bahasa lain juga. 

Dan saya akan pergi ke hadapan dan pergi supaya- Saya akan Mengawal klik atau kanan klik di mana-mana laman web. Dan saya akan pergi ke Memeriksa Element. Dan saya akan untuk tweak saya skrin hanya sedikit di sini. Biar saya bergerak ini ke bawah. Jadi ini adalah apa yang dipanggil Inspektor Chrome. Jadi ini adalah seperti debugging yang alat yang dibina ke dalam Chrome. 

Anda semua sudah mempunyai ini jika anda telah menggunakan Chrome. Dan ia membolehkan anda untuk melihat apa yang berlaku di bawah bonet beberapa laman web. Jadi mari kita sebenarnya mengambil melihat ini seperti berikut. Ia mempunyai cara yang lebih ciri- dan kita mengambil berat tentang hari ini. Tetapi ada tab ini di sini. Unsur-unsur, rangkaian, sumber, garis masa, dan beberapa barangan lain. Saya akan klik pada Rangkaian untuk seketika. 

Dan ia sedikit hangat pada pandangan pertama di sini. Tetapi apa yang saya akan lakukan ialah membiarkan saya memudahkan ia sedikit. Saya akan menghidupkan cahaya rakaman supaya ia merah. Dan saya akan berkata mengekalkan log. Dan ini adalah hanya sedikit Perkara yang saya digambarkan dari masa ke masa yang akan menyelamatkan semua yang berlaku dalam pelayar. Dan sekarang saya akan pergi ke untuk http://facebook.com. 

Sebenarnya, mari kita buat www untuk menjadikannya lebih menarik, slash. Enter. Jadi URL bahawa banyak anda mungkin telah melawat. Dan kini web Facebook halaman datang di bahagian atas. Dan kemudian sejumlah besar barangan terbang oleh di bahagian bawah. Dan sebenarnya, ternyata bahawa apabila anda melawat Facebook.com, anda tidak hanya membuat satu permintaan HTTP, ternyata bahawa akan Facebook.com menghantar 41 orang sampul surat, masing-masing dengan mendapatkan permintaan sendiri, seperti yang dinyatakan, walaupun di belakang skrin di sini, di bahagian bawah skrin, ia menunjukkan bahawa, sesungguhnya, saya pelayar membuat 41 permintaan. 

Dan secara keseluruhan, ia dipindahkan 861 kilobytes dan ia mengambil masa untuk sebab-sebab tertentu seramai lapan saat untuk memuat turun semua itu. Jadi, itu sebenarnya sedikit pelik bahawa laman Facebook akan mengambil masa yang panjang, tetapi jadi dalam kes ini. Sekarang, semua ini saya tidak benar-benar mengambil berat kira-kira kecuali permintaan yang paling atas. Jadi mari kita pergi ke satu ini di sini dan biarlah saya zum keluar untuk seketika. 

Dan biarlah saya mengezum masuk pada ini. Jadi apa yang saya lakukan di sebelah kiri-walaupun ada banyak berlaku di sini yang saya telah menekankan Facebook.com dan kemudian notis bahawa saya menatal ke bawah, menatal ke bawah, menatal ke bawah, untuk meminta tajuk. Dan anda akan melihat bahawa Chrome menunjukkan saya dasarnya kandungan dalaman permintaan itu saya buat. Ia tidak pemformatan dalam agak yang sama cara, tetapi notis ada menyebut mendapatkan, perasan ada menyebut tuan rumah, Facebook.com, jalan, atau slash, yang merupakan fail yang saya minta. 

Dan kemudian jika saya tatal sandaran, kami akan benar-benar melihat bahawa apa yang Facebook kembali pada aku adalah pengepala ini. Jadi di dalam sampul surat maya memang banyak pasangan nilai utama. Satu perkataan, kolon, dan kemudian nilai. Satu perkataan, kolon, dan nilai. Ini adalah dipanggil tajuk. Dan ada cara yang lebih terperinci di sini daripada kita benar-benar mengambil berat tentang sekarang. 

Tetapi ini adalah kedua yang terakhir di bawah sana, notis, bahawa pelayan Facebook.com-kanak, sesungguhnya berkata di sini datang beberapa teks HTML. Jadi semua ini adalah untuk mengatakan bahawa apabila anda meminta web yang halaman dari pelayar kepada pelayan, pelayan yang bertindak balas dengan sampul surat yang tersendiri di dalam yang adalah teks. Dalam erti kata lain, HTML. Hiperteks Markup Language. Iaitu bahasa lain yang kami memperkenalkan hari ini bahawa manusia atau komputer menjana untuk melaksanakan laman web. 

Secara khusus, mari kita lihat ini. Saya akan kini kembali ke laman web Facebook. Dan saya akan hanya kawalan klik atau klik kanan dan klik pada View Page Source. Dan jika anda tidak menggunakan Chrome, IE boleh melakukan ini, Firefox boleh melakukan ini, Safari boleh melakukan ini, walaupun menu pilihan mungkin kelihatan sedikit berbeza. Dan ini adalah HTML yang Mark dan syarikat di Facebook telah menulis. 

Dan secara kolektif, bahasa ini di sini melaksanakan biru dan halaman putih yang kita lihat sebentar tadi. Sekarang, ini adalah agak keterlaluan. Tetapi jika kita melihat ke kiri atas, kami akan mula melihat beberapa corak. Ia kelihatan seperti ada banyak ini kurung sudut terbuka dan kemudian ada HTML kata kunci ini. Berikut adalah satu lagi terbuka tanda kurung sudut dan kepala. 

Di sini ialah, jika kita tatal ke bawah dan ke bawah dan ke bawah, Saya akan pergi ke hadapan dan cuba untuk mencari sesuatu. Ada cara lebih di sebelah kanan di sini adalah badan kurungan terbuka. Dan ingat dari lepas masa itu kami mencadangkan bahawa laman web yang paling mudah bahawa manusia mungkin menulis mungkin kelihatan sesuatu yang kecil seperti ini. Terbuka tag HTML, kepala terbuka tag, tag tajuk terbuka, kemudian tajuk tertutup, kepala tertutup, dibuka tag badan, teks, ditutup badan, HTML tertutup. 

Tetapi berhenti seketika di sini untuk hanya seketika. Kod ini, walaupun anda telah pernah menulis sebelum ini tetapi masih kurang faham apa yang berlaku, kelihatan cukup baik. Betul, ia adalah sangat bersih. Ia amat segi gaya bagus. Banyak lekukan dan ruang putih. Facebook tidak. Jadi mengapa Facebook begitu banyak lebih teruk daripada saya pada menulis HTML? Rupa-rupanya. 

Betul, ini adalah seperti satu daripada lima untuk gaya. Ada alasan yang menarik bagi mereka untuk mengambil jalan pintas ini. Baiklah, jadi mereka tidak mahu membuat lebih mudah bagi anda untuk membacanya. Jadi dalam erti kata lain, mereka obfuscating ia, jenis bergegas ia sekurang-kurangnya estetika supaya bahawa ia lebih sukar untuk Myspace pergi dan merobek mereka laman web dan HTML untuk itu. Ia ternyata bahawa dengan program-program walaupun, termasuk Chrome, kita boleh membersihkan sehingga ini super mudah. Oleh itu, ia tidak cukup itu sebagai alasan. Apa lagi yang mungkin menjadi punca. Yeah. Yeah, kos ruang putih data. Apa maksud awak? Ya, betul-betul. Jika anda memukul kekunci Tab banyak atau bar ruang, mempertimbangkan implikasi. Jadi setiap kekunci pada papan kekunci anda adalah [Didengar] diwakili sebagai satu bait. 

Jadi andaikan bahawa Mark atau mana-mana devs hari ini menjadi asas bar ruang hanya sekali dalam halaman HTML ini yang mewakili laman Facebook. Dan Facebook mempunyai banyak dari pengguna hari ini. Jadi andaikan bahawa laman Facebook dikunjungi oleh satu bilion orang hari ini. Dan seseorang di Facebook mempunyai memukul bar ruang hanya sekali. 

Jadi satu bait tambahan, satu bilion pertanyaan, apalagi data adalah Facebook memindahkan melalui internet kerana seseorang melanda bar ruang pada papan kekunci masing-masing? Satu bilion bait, atau salah satu gigabit data sedang dihantar dari pelayan Facebook kepada orang-orang di sekitar dunia tanpa sebab yang baik. Sekarang, itu hanya satu ruang. 

Bayangkan jika kita benar-benar membersihkan ini perkara dan dilekukan dan tambah banyak ruang putih dan Watak tab dan ruang, anda berakhir gigabait perbelanjaan, jika tidak terra byte lagi ruang. Dan sebagainya super biasa dalam dunia sebenar pembangunan web adalah untuk mengecilkan kod anda. Dan akhirnya kita akan melihat bagaimana anda boleh melakukan ini. 

Tetapi hari ini, kita akan mula menulis kod yang sebenarnya boleh dibaca oleh kita manusia. Ternyata, walaupun, jika anda kembali kepada alat ini dalam Chrome Memeriksa Element, sebelum ini, kita berada di tab Rangkaian. Ia ternyata bahawa jika anda pergi ke tab unsur-unsur, apa yang anda benar-benar melihat adalah Chrome cantik dicetak versi HTML yang sama. Oleh itu, kita deobfuscated ia. Jadi ia tidak setanding dengan komputer. Dan sekarang anda boleh sebenarnya klik sekeliling dan mula untuk melihat hierarki iaitu laman web. Jadi mari kita benar-benar melakukan ini. Saya akan pergi ke hadapan dan membuka pada Mac saya program yang dikenali sebagai sunting teks. Dan ingat bahawa ini adalah hanya program teks super mudah. Windows mempunyai notepad.exe. Dan saya akan kata demi kata taip yang berikut. Doc jenis HTML, kurungan terbuka HTML, ditutup kurungan HTML, kita mempunyai kepala halaman di sini, akhir kepala halaman di sini, tajuk yang akan menjadi seperti, hello dunia. 

Dan kemudian turun di sini, kita perlu badan halaman web. Badan tertutup. Dan kemudian di sini, hello dunia. Baiklah. Oleh itu, kita telah menulis laman web yang super cepat. Saya akan simpan sebagai hello.html di desktop saya. My Mac ini akan mengadu, memikirkan bahawa, tunggu satu minit, ini adalah fail teks, melakukan anda mahu panggil ia .txt? Tetapi tidak, saya mahu menggunakan dot HTML. 

Dan kemudian apa yang baik jika saya hanya klik dua kali fail ini, hello.html, di sini adalah laman web saya. Malangnya, aku adalah satunya orang di dunia yang boleh melawat laman ini buat masa ini. Kerana di mana ia tinggal nampaknya? Ia pada Mac saya, bukan? Yang tidak berguna. Seperti tidak ada orang di dalam bilik ini apatah lagi di internet sebenarnya boleh melawat laman itu. Jadi hari ini, kita perlu memperkenalkan elemen lain. 

Dan untuk melakukan ini, saya akan pergi ke depan dan membuka awan 9. Jadi awan 9 adalah kursus awan service-- berdasarkan CS50 IDE-- Yang mempunyai semua ruang kerja kami berjalan di suatu tempat di internet. Dan ini bermakna bahawa semua fail kami boleh diakses oleh umum sudah. Jadi mari kita pergi ke depan dan melakukan ini. Saya akan pergi ke depan dan mencipta fail baru NCS50IDE. Saya akan menyimpannya seperti sebelum ini sebagai hello.html dan klik simpan. Dan kini hanya untuk menjimatkan masa, saya akan pergi ke hadapan dan menyalin tampal kod ini bukannya menaip semula. Dan menyimpannya. Dan sehingga kini saya mempunyai fail dipanggil hello.html. Tetapi bagaimana saya benar-benar membukanya sebagai laman web? Nah, ternyata dibina dalam untuk CS50 IDE bukan sahaja pengkompil seperti dilafaz dan penyahpepijat seperti GDB dan tandan program lain, ada sebenarnya yang lengkap pelayan web berjalan dalam CS50 IDE. 

Anda semua, iaitu, mempunyai pelayan web anda sendiri. Dan pelayan web hanya sekeping perisian yang tujuan dalam hidup adalah untuk menyampaikan laman web. Untuk mendengar permintaan daripada pelayar dan bertindak balas dengan sampul surat maya kecil di dalam yang adalah kandungan yang saya telah menulis. Jadi pelayan web ini adalah sumber sebenarnya bebas dan terbuka. Di mana sumber terbuka hanya bermakna perisian yang orang lain mempunyai menulis bahawa kita semua boleh benar-benar melihat dan memuat turun dan juga menukar kod sumber. Dan ia dipanggil Apache. 

Dan kita telah membuat ia sedikit lebih mudah untuk digunakan dalam CS50IDE dengan memanggil ia Apache 50. Supaya ia boleh sebenarnya memahami berikut. Saya akan mengatakan Apache 50 bermula. Dan kemudian saya hanya akan mengatakan titik. Dan kita melihat beberapa agak mesej yang sukar difahami berkata menetapkan Apache dokumen [? kumpulan?] dengan rumah, ubuntu, apa sahaja iaitu, mengurangkan ruang kerja. Bermula pelayan web Apache 2 dengan jayanya. 

Jadi cerita panjang pendek, saya baru sahaja menolak butang dan berpaling pada pelayan web yang kini mendengar di internet pada port TCP 80 di alamat tertentu. Dan ia mengatakan di sini, dan ini akan berubah berdasarkan pada nama pengguna anda dan faktor-faktor lain, tetapi notis sekarang jika saya klik ini, IDE50 dot jharvard dan sebagainya dan jadi, melihat bahawa selama ini sejak beberapa lalu minggu, anda mungkin mempunyai perasan bahawa nama pengguna anda sendiri tertanam di tangan kanan atas sudut CS50IDE. 

Dan yang benar-benar telah semua ini kalanya alamat di mana anda boleh melawat semua fail anda melalui web. Sehingga kini, ia tidak yang penting, kerana dalam C, biasanya anda mahu perkara berjalan dalam terminal, tidak di web. Tetapi hari ini, kita bermula menulis kod berasaskan web bahawa kita mahu boleh diakses di URL awam. Jadi apa yang saya akan lakukan adalah klik URL ini. 

Dan notis yang saya lihat yang agak indeks hodoh, senarai direktori, tetapi apa fail yang melompat keluar pada anda mungkin? Hello.html. Ini kerana saya diselamatkan fail dalam ruang kerja saya. Dan apa yang saya telah memberitahu Apache pelayan web adalah melihat di dalam direktori ruang kerja Daud. Dan biarkan orang dalam dunia melihat fail-fail. 

Dan sesungguhnya, jika saya sekarang klik pada hello.html, Saya lihat dalam tab ini betul-betul fail itu. Sekarang perhatikan, awan perbuatan 9. sesuatu yang berguna untuk kita. Dalam CS50 IDE, perasan ada tiba-tiba sebuah bar alamat. Ini kerana walaupun kita menggunakan Chrome untuk melawat CS50IDE, bahagian dalam CS50IDE adalah sendiri versi pelayar web sekarang. Dan sebagainya dan bukan merumitkan perkara-perkara seperti itu, Saya akan pergi ke hadapan dan hanya menyalin URL ini. Saya akan pergi ke depan dan hanya membuka tetingkap Chrome saya sendiri. Jadi tidak ada sihir di sini, tidak CS50IDE. Saya hanya akan benar-benar paste saya J Harvard URL dan tekan Enter. Dan Voilà, sekarang saya dan dalam teori, semua orang di internet, jika saya telah dikonfigurasikan kebenaran dengan sewajarnya, boleh melawat fail ini. Dan sekarang, jika saya berkata hello.html, voila, terdapat adalah laman web yang sangat underwhelming saya. Jadi mari kita buat pemeriksaan kewarasan cepat. Kerana semua itu adalah set konsep up. Dan kami telah sebenarnya tidak benar-benar mengajar anda bagaimana untuk menulis HTML per se. Sebarang pertanyaan setakat ini mengenai apa yang berlaku? Ya. Adakah CS50 memiliki laman-laman web? Dalam apa rasa? Soalan yang baik. Jadi ini CS50 memiliki CS50.io. Sesungguhnya Kami telah membeli nama domain. Dan secara semula jadi daripada anda semua log masuk ke CS50IDE, anda semua mendapatkan apa yang dipanggil subdomain. 

Jadi IDE50-Malan, atau IDE50-Rob.CS50.io, itulah alamat unik anda dalam masa nama domain kami. Demikian bagi maksud kursus ini, anda mempunyai alamat anda sendiri yang unik. Tetapi kita telah dipermudahkan yang ada dengan membeli domain peringkat atas, CS50 dot I / O dan kemudian orang lain adalah dalam itu, jadi untuk bercakap. Dan kami akan kembali kepada itu dalam beberapa minggu mungkin, terutama pada projek akhir masa, apabila ada di antara kamu mungkin mahu mendapatkan nama domain anda sendiri. Ini sebenarnya agak terus-terang. Baiklah. Jadi mari kita buat sekarang ini. Saya akan kembali ke dalam CS50IDE, di mana fail saya sekarang, hello.html, tidak semua yang menarik. Saya ingin melakukan sesuatu sedikit lebih bagus daripada itu. Jadi, saya akan melakukan sesuatu seperti ini. Biar saya paragraphs.html terbuka. Jadi ini adalah satu fail yang saya tulis terlebih dahulu. Di bahagian atas itu, seperti biasa, kami mempunyai komen. Tetapi dalam HTML, komen kelihatan sedikit berbeza. New tiga dan garis 14, anda melihat sintaks untuk mula komen dan berakhir komen. 

Tetapi tiada barangan dalam antara perkara-perkara yang berfungsi. Ia hanya satu komen kepada manusia apa yang sedang berlaku di sini. Dan hanya sebagai kewarasan cepat menyemak, jika saya tatal ke bawah, apa yang baru yang jelas tag yang kami telah diperkenalkan? Tag yang setakat ini kami telah lihat dibuka kurungan HTML, kepala, tajuk, dan badan. Tetapi apa yang jelas baru sekarang? 

Ya, jadi p. P tag atau perenggan tag. Dan kemudian saya hanya dipinjam beberapa lalai Teks Latin untuk membentuk perenggan saya. Oleh kerana apa yang saya mahu menunjukkan adalah bagaimana anda mungkin mewakili perenggan teks dalam HTML. Dan supaya apa yang mula berlaku di sini ialah ada sudah corak yang membangun. Dan biarlah saya pergi ke hadapan dan melakukan ini. Terlebih dahulu saya mematikan Apache. Dan saya akan beritahu kepada bermula sendiri lagi di dalam sumber hari ini tujuh m direktori. Supaya saya mempunyai akses kepada segala-galanya. 

Dan kini, jika saya kembali ke senarai direktori ini, perasan yang saya lihat setiap fail dari hari ini. Dan anda akan melihat dalam set masalah akan datang, kita akan memberi anda arahan-arahan untuk berbuat betul-betul ini. Jika saya membuka paragraphs.html, mungkin ini dan juga kelihatan seperti bahasa pengaturcaraan kepada anda jika anda tidak bercakap atau membaca Latin. Tetapi ini hanya tiga perenggan teks yang ditandakan dalam HTML. 

Dan perhatikan perenggan rehat antara mereka. Kerana ia ternyata, dan walaupun anda mungkin cenderung untuk melakukan ini, manakala dalam dunia sebenar, jika anda mahu meletakkan talian rehat antara perkara-perkara, anda mungkin cukup hanya melakukan ini dan tekan Simpan. Dan kini, jika saya menambah nilai di sini, notis segala-galanya yang hanya mengaburkan bersama-sama hanya dalam satu gumpalan teks. Kerana HTML adalah jenis bahasa dalam keadaan sihat. 

Ia bertujuan untuk digunakan dalam apa-apa cara yang bahawa pelayar akan hanya melakukan dengan jelas apa yang anda beritahu ia lakukan. Jadi, jika anda tidak beritahu memberi saya perenggan baru, anda tidak akan melihat perenggan baru. Dan sebenarnya, apa yang pelayar akan melakukan adalah walaupun anda tekan Enter, katakan lagi dan lagi dan sekali lagi, bergerak dengan cara teks ini ke bawah pada skrin dan kemudian simpan dan kemudian muat semula, pelayar akan runtuh semua itu ruang putih ke dalam hanya satu, ruang kosong yang boleh dilihat tunggal. Baiklah. Jadi itulah tag perenggan. Dan jadi apa corak yang yang membangun di sini? Well, ia seolah-olah menjadi kes yang HTML adalah semua tentang memulakan tag dan berakhir tag. Dan apa yang tag? Nah, ia hanya sebahagian daripada sintaksis. Kurungan terbuka, kata kunci, kurungan tertutup, adalah tag. Atau memulakan tag. Dan kemudian apabila anda berada dilakukan menyatakan diri, seperti dalam anda selesai dengan perenggan itu, anda berbuat demikian untuk bercakap bertentangan. Tetapi sebaliknya tidak cukup ke belakang. 

Anda hanya awalan tag yang sama ini menamakan dengan miring seperti ini. Baiklah. Jadi tidak semua yang menarik. Dan sebenarnya, kami tidak membuat web semua yang lebih menarik. Bagaimana jika saya ingin perkara yang lebih besar dan berani? Jadi, ternyata bahawa di sini adalah contoh dalam headings.html, di mana dalam badan saya, Saya telah mendapat tag H1, H2, H3, empat, lima atau enam, semua yang terasa agak sukar difahami. Tetapi jikalau Aku pergi membuka ini Sebagai contoh, mari kita lihat. Headings.html. 

Jadi pelayar secara lalai boleh memberikan teks itulah besar dan berani saiz berbeza. H1 adalah besar. H6 adalah lebih kecil dan kemudian segala sesuatu yang lain di antaranya. Jadi, itu menarik tetapi masih tidak benar-benar web saya tahu. Bagaimana jika kita mahu Saya mempunyai sesuatu seperti senarai. . Jadi di sini adalah senarai berbulet daripada tiga rumah Harvard. 

Bagaimana anda pergi tentang melakukan ini? Nah, kita lihat pada list.html. Dan di sini, kita lihat sedikit sedikit funkiness tetapi mari kita mempertimbangkan apa yang berlaku. Jadi berdasarkan kepada apa yang anda baru sahaja dilihat, UL bermaksud senarai tidak tertib. Senarai tidak tertib hanya bermaksud berbulet. Tidak ada nombor. Ada juga sesuatu yang dipanggil senarai, yang merupakan OL di tag diperintahkan. Kemudian LI, item senarai adalah semua yang bermakna. 

Dan maka ia secara automatik nombor segala-galanya untuk anda. Tetapi sekali lagi, semua lekukan saya dan ruang putih hanya demi Aku. Penyemak imbas tidak sebenarnya akan peduli. Jadi, walaupun anda tidak boleh melakukan ini, hanya perlu jelas, anda tidak perlu walaupun pelayar akan masih dapat memahaminya dengan baik. Saya memukul tambah nilai dalam saya pelayar, saya klik tambah nilai dan tiada perubahan yang berlaku kerana pelayar masih melakukan apa yang saya beritahu yang perlu dilakukan. 

Baiklah. Jadi ini semua hanya teks. Sekarang mari kita melakukan sesuatu yang lebih menarik. Saya akan pergi ke depan dan meminjam beberapa HTML ini. Saya akan pergi ke depan dan membuat fail baru di sini. Dan kita akan memanggil rick.html ini. Kami mempunyai tidak seimbang sesuatu yang digunakan dipanggil roll rick dalam ini kelas tahun ini, saya tidak tahu, ia hanya berlaku secara organik. 

Dan kini ia menjadi di luar kawalan. Jadi, saya hanya akan pergi bersamanya. Dan jika saya pergi ke Google Imej dan Rick Astley. Jika anda tidak tahu mengapa kami melakukan ini, hanya membaca di Wikipedia. Setiap kali anda klik pada pautan, seseorang sedang ketawa di suatu tempat. Dan biarlah saya pergi ahead-- terdapat kita pergi, mari kita melihat imej ini. 

Jadi di sini kita mempunyai imej dalam Google Images. Dan mari kita menganggap bahawa ini adalah munasabah mana-mana di internet. Jadi, saya akan menganggap ia OK untuk saya untuk benar-benar meletakkan ini ke dalam laman web saya. Saya akan pergi ke hadapan dan menyalin URL imej. Dan kini jika saya kembali ke Cloud 9, mari kita lihat apa yang boleh saya lakukan di sini. Jadi di sini adalah hanya satu laman web. Ini adalah Rick Astley, haha, Saya akan kini kembali untuk pelayar saya, tambah nilai, dan menarik. 

Di mana Rick? Jadi biarlah saya melihat apa yang berlaku. Sebenarnya, saya akan berpura-pura seperti saya tidak berbuat demikian. [Didengar] meletakkan dia di sini. Kami akan kembali kepada itu dalam seketika. Jadi di sini adalah rick.html. Jadi itu bukan Rick Astley. Jadi ternyata kita boleh benar-benar menambah dia di sini. Ini adalah Rick Astley. Saya akan mengatakan saya memberi imej yang sumber adalah URL yang saya hanya disalin, yang nampaknya adalah yang bahagia sesuatu hari jadi atau lain-lain. 

Dan sekarang saya akan menutup tag seperti ini. Jadi ini membungkus super panjang. Tetapi notis bahawa semua yang saya telah dilakukan adalah imej kurungan terbuka, sumber dengan sifat ini. Dan ia URL yang benar-benar panjang. Dan bagi mereka yang terkemudian, notis ini. Slash Mengapa kuperbuat kurungan bersudut bukannya, seperti setiap tag lain, yang mempunyai kurungan terbuka, IMG, ditutup kurungan? Hanya mengambil tekaan walaupun anda mempunyai kebiasaan jua dengan HTML sebelum ini. 

Oleh itu, ia adalah bagaimana ia menutup arahan, tetapi mengapa ia tidak benar-benar membuat intuitif masuk akal untuk melakukan sesuatu yang lebih berjela-jela seperti imej rapat? Yeah. Yeah. Hanya semantik, tidak ada rasa bermula imej dan berakhir imej, ia sama ada terdapat atau tidak. Oleh itu, ia tidak masuk akal untuk meninggalkan jurang yang untuk apa-apa lagi di dalam imej. Anda tidak boleh berbuat demikian. Dan sebagainya sintaks biasanya akan hanya untuk melakukan garis italik dalam tag terbuka atau tag permulaan dan kemudian memukul Simpan. 

Jadi, jika saya menambah nilai kini fail ini, sekarang Saya telah mendapat web yang baik memasak halaman di sini. Dan kita boleh pasti benar-benar menyakitkan hati orang dengan menerapkan sebaliknya seperti pautan YouTube. Dan sebenarnya, bila-bila masa anda pernah pergi ke YouTube, dan biarlah saya sebenarnya sengaja rick roll diri saya di sini. Jadi Rick roll. Jadi rick roll-- saya akan pergi di sini. 

[Bermain muzik] 

OK, satu orang suka bahawa. Jadi notis selama ini, jika anda klik pautan Kongsi, anda sudah tentu mendapatkan URL yang anda boleh sebenarnya menanamkan dalam e-mel atau imej forensik atau dalam masalah menetapkan atau dalam slaid. Dan kini, jika saya sebaliknya klik pada embed, melihat bahawa selama ini, barangan ini telah ada. Saya akan pergi ke hadapan dan menyalin ini. 

Dan hanya supaya kita boleh melihat lebih baik, Saya akan tampalkannya ke dalam editor teks saya. Perhatikan bahawa ini apa YouTube telah memberitahu anda. Setiap kali anda melawat Video YouTube, jika anda mahu membenamkan video pada anda laman web, hanya merebut ini. Jadi ini merupakan satu lagi Tag HTML dipanggil iframe. Atau dalam rangka garis. Oleh itu, ia juga kelihatan lebih sedikit kompleks daripada yang lain. Jadi ternyata bahawa imej tag dan nampaknya tag iframe mengambil apa yang dipanggil sifat-sifat. 

Dan ini adalah satu lagi sekeping sintaks dalam HTML. Selain tag ini nama, terbuka kurungan nama tag, anda boleh mengawal tingkah laku tag dengan mempunyai sejumlah besar sifat sama nilai. Sifat sama nilai. Dan sebagainya misalnya, YouTube memberitahu kita jika anda mahu lebar video ini menjadi 420 piksel dan ketinggian menjadi 315 piksel, itu bagaimana anda menyatakan ia dalam HTML. 

Sumber video yang sedang berlaku untuk menjadi bahawa URL YouTube lama dan kemudian beberapa barangan lain seperti rangka sempadan adalah sifar, supaya mungkin bermakna ada tiada sempadan sekitar perkara itu. Benarkan skrin penuh mungkin bermakna bahawa pengguna boleh klik butang dan sebenarnya skrin penuh video. Jadi, jika saya benar-benar mahu menjadi menarik di sini di Rick dot HTML, daripada menggunakan tag imej, mari saya memadamkannya, bukannya paste ini. Dan kini menambah nilai. Dan kini di sini kita pergi lagi. Baiklah, itu sudah cukup. Baiklah, jadi saya akan cuba sukar untuk tidak berbuat demikian lagi. Jadi apa yang adalah beberapa bawa pulang di sini? Jadi HTML, sebagai hodoh seperti laman-laman web adalah, sebenarnya agak mudah. Ia bukan bahasa pengaturcaraan. Ia tidak mempunyai fungsi. Ia tidak mempunyai gelung. Ia tidak mempunyai syarat-syarat. Semua ia adalah berpuluh-puluh tag yang berbeza, setiap yang mempunyai sifar atau lebih sifat-sifat. Dan sebenarnya, apa yang seronok tentang HTML anda mula untuk menyelam ke dalam adalah bahawa ia adalah sangat boleh diajar diri. 

Apa yang diperlukan adalah pemahaman rangka kerja umum HTML. Apakah tag, apa yang atribut, bagaimana anda sebenarnya mengkonfigurasi laman web seperti berikut. Dan segala-galanya adalah benar-benar keputusan melihat ke atas merujuk dalam talian atau Googling bagaimana untuk melakukan teknik atau seperti yang kita lihat, melihat sumber Facebook kod, melihat laman web yang anda suka pada itu kod sumber dan memahami bagaimana pemaju terdapat sebenarnya meletakkan perkara-perkara. 

Oleh itu, kita boleh lakukan imej juga. Dan sebenarnya, kami melakukannya sebentar tadi. Biar saya pergi ke hadapan dan hanya menunjukkan kepada anda. Berikut adalah beberapa contoh kod. Jika anda pernah mahu melihat kucing marah-marah. Jadi notis bahawa saya boleh mempunyai tag imej di sini. Dan saya telah mendapat satu komen di atasnya. Saya ada alternatif teks untuk kemudahan. Jadi seseorang yang yang menggunakan skrin yang pembaca atas sebab-sebab penglihatan boleh benar-benar maka perlu mereka pembaca skrin mengatakan kucing marah-marah. Kerana jika mereka tidak boleh melihat imej ini, mereka sekurang-kurangnya boleh mempunyai komputer mereka memberitahu mereka secara lisan apa yang ada. Dan sumber fail yang cat.jpeg. Jadi sebenarnya, jika saya benar-benar mahu mendapatkan pandai, apa yang saya boleh mempunyai done-- Saya berjanji tidak akan pergi ke Rick Astley, jadi Saya akan google untuk kucing sebagai ganti. Dan jika saya pergi ke Google Images sini, dan kami akan menganggap bahawa ini adalah gambar kucing saya. 

Katakan saya mempunyai kawalan diklik atau kanan klik pada ini, secara tidak sengaja menyeramkan. Dan cat.jpeg saya akan untuk menjimatkan desktop saya. Kini saya akan kembali ke awan 9. Perhatikan bahawa di sini, saya boleh pergi untuk memuat naik fail tempatan. Dan jika saya merebut ini fail, cat.jpeg, notis yang saya boleh tarik dan menjatuhkannya ke dalam awan 9 dan ia akan menjerit pada saya di sini. 

Oleh kerana kami telah pun berikan kepadamu fail cat.jpeg, tetapi ia sangat mudah untuk dapatkan foto yang anda telah diambil dari Facebook atau Flickr atau sebagainya dan benar-benar seret dan lepaskan ke dalam awan 9 dan kemudian membuat ia sebahagian daripada peribadi anda sendiri laman web atau masalah menetapkan tujuh atau lapan seperti yang kita tidak lama lagi akan melihat. Dan kemudian apabila anda akhirnya melawat kucing itu, dengan andaian saya turun kucing yang sama, notis bahawa- itu adalah comel. 

Apa yang akan anda lihat adalah sesuatu seperti muka ini di sini. Jadi fail yang anda rujukan dalam halaman web boleh sama ada tempatan anda sendiri akaun atau jauh pada beberapa pelayan lain seperti dalam kes daripada Rick Astley gambar sedikit lalu. Jadi di mana else-- apa lagi yang kita boleh lakukan di sini? Jadi mari kita lihat yang berikut. Anda tahu apa yang jenis sejuk? 

Kami setakat ini telah membuat laman web yang sangat statik. Saya mahu perkara-perkara rempah sehingga seperti berikut. Saya hendak membuat enjin carian saya sendiri. Jadi untuk membuat enjin carian, mari kita pergi ke hadapan dan mula melakukan ini. Saya akan pergi ke hadapan dan mewujudkan fail baru yang dikenali sebagai search.html. Dan kami telah prefabed versi dalam talian. Alamak. Jangan paste ke dalam tetingkap terminal anda. Versi cetakan dalam talian. Dan saya akan bermula seperti berikut. Jadi di sini adalah awal fail yang dipanggil search.html. Saya akan menyimpannya di dalam direktori sumber hari ini. Saya akan memanggil Cari. Sebenarnya, kami akan menjadikannya lebih baik. CS50 Cari dan benar-benar jenama itu. Dan sekarang, saya akan berkata sesuatu seperti H1 CS50 Cari. Dan kemudian turun di sini, H2 akan datang tidak lama lagi. Dan hanya untuk recap, H1 dan H2 bermaksud apa yang masing-masing? 

Ya, begitu besar dan berani, dan tidak seperti yang besar, tetapi masih berani. Jadi, jika saya menyimpan ini dan pergi ke sini, mari kita lihat search.html fail. Baiklah, dan yang satu ini adalah right-- [didengar]. Bersedia. Daud adalah keliru. Oh, itu di sana. David yang bodoh. OKAY. Lalu jadilah ia. Jadi carian CS50 akan datang tidak lama lagi. Oleh sebab itu, mari kita mensintesis apa yang kita lakukan pada minggu lepas. 

Di mana kita bercakap tentang mekanik tahap yang lebih rendah daripada HTTP. Dan idea-idea baru HTML, yang hanya bahasa penanda ini di mana anda memberitahu pelayar apa yang perlu dilakukan dan melaksanakan enjin carian kami sendiri. Jadi, daripada hanya mengatakan akan datang, Saya akan memperkenalkan sesuatu yang dinamakan tag bentuk. Dan dalam borang ini, saya akan mempunyai sesuatu seperti medan input. 

Dan nama input ini lapangan, saya akan memanggilnya Q. Dan jenis medan input ini Saya akan katakan adalah hanya "teks". Dan medan teks, kerana kita akan lihat, hanya kotak teks. Dan supaya ia tidak merasakan di sini untuk mempunyai apa-apa yang di dalamnya pada ketika ini. Dan jadi saya hanya akan untuk menutup tag dengan yang ke hadapan slash betul-betul di tag itu sendiri. Dan kemudian saya akan mempunyai satu input lain. Jenis input sama hantar. Dan kemudian saya akan menutup ini kepadaku. 

Dan sekarang saya akan pergi ke sini. Dan sudah kita lihat, walaupun agak hodoh, saya telah mendapat permulaan halaman carian saya sendiri di sini. Malah, saya cuba untuk membersihkan ini sehingga sedikit. Ia ternyata bahawa pada input di sini, saya boleh mempunyai atribut lain yang dikenali sebagai pemegang tempat. Dan saya mungkin melihat sesuatu seperti kata kunci, atau lebih khusus, bertanyakan q. 

Dan perhatikan, sekarang, saya mempunyai ini jenis teks kelabu yang hilang sebagai Sebaik sahaja saya mula menaip, tetapi ia mungkin sesuatu anda telah lihat dalam laman web lain. Saya tidak benar-benar suka butang Submit. Jadi, saya sebenarnya akan memberikan Butang Hantar nilai carian. Dan kini, jika saya menambah nilai, melihat bahawa butang saya menjadi bernama carian. Anda tahu, saya tidak benar-benar seperti logo di sini. Jadi penjana Google fon. 

Saya hendak membubuh ini naik lagi. Carian supaya CS50. Biar saya mencipta logo sendiri. Yang kelihatan baik. Jadi sekarang mari saya menyimpan ini as-- datang pada. Di mana ia akan pergi? Ada. OKAY. Terlepas. Simpan sebagai. Pelayar bodoh. Berdiri, kita akan menetapkan ini sekali dan untuk semua. Di sana kami pergi. Baiklah. Maaf. Hari cuti. Sekarang ini adalah funky. Keluar dari skrin penuh. Baiklah. 

Sekarang, seperti biasa seorang, menyimpan imej sebagai. Logo.gif. Sekarang saya akan pergi ke CS50IDE dan Saya akan hanya merebut logo, Saya akan tarik ke saya direktori sumber tujuh, fail sudah ada, saya OK dengan itu. Jadi saya akan mengatasinya kerana saya sudah mempunyai ia. Dan sekarang bagaimana saya menghilangkan ini? 

Mari kita pergi ke hadapan di sini dan melakukan sumber imej sama logo.gif. Tutup. Menyelamatkan. Dan kini jika saya kembali ke carian saya halaman, kini ia kelihatan cukup baik. Baiklah, jadi ia tidak mempunyai agak melakukan apa-apa yang berguna. Malah, saya cuba mencari untuk kucing dan lihat apa yang berlaku. Kucing. Tak guna. Ia bukan sahaja berfungsi, nampaknya. Jadi apa yang sekeping utama yang yang hilang di sini? 

Betul, walaupun anda tidak tahu apa-apa HTML, Saya telah memulakan menandakan borang telefon dan saya telah diberitahu ia bagaimana untuk mendapatkan input, memberi saya kotak teks dan butang hantar, apa bahagian nampaknya hilang? Katakan kita mahu benar-benar mendapatkan Perkara ini berfungsi dengan betul. Apa yang perlu kita lakukan? Kami mempunyai keperluan untuk melaksanakan hujung belakang pangkalan data atau enjin carian itu sendiri, dan itu akan mengambil banyak masa, terus-terang. 

Jadi ingat apa yang kita lakukan kali terakhir. Jadi, jika anda mencari sesuatu di Google dan anda telah terlebih dahulu dimatikan, ingat, carian segera. Jadi, saya akan beralih yang luar supaya ini sebenarnya berkelakuan seperti pelayar sekolah yang lebih tua, jika saya kini mencari sesuatu seperti kucing, ingat apa URL yang kelihatan seperti. Ia agak samar. Tetapi tertanam di sana, ingat, adalah carian slash. Tanda tanya q sama kucing. 

Dan itu seolah-olah memberikan saya sejumlah besar hasil carian. Jadi, anda tahu apa yang saya akan lakukan? Saya akan meminjam Google hanya satu minit. Saya akan pergi ke di sini dan saya akan mengatakan ini membentuk tindakan atau destinasi, boleh dikatakan, benar-benar perlu Google. Dan kaedah yang saya mahu penggunaan akan menjadi dapat. 

Jadi apa tindakan? Tindakan weirdly dinamakan, tetapi itu hanya bermakna siapa yang akan mengendalikan tindakan borang ini? Apabila saya klik Search, di mana sekiranya keputusan mana sahaja? Dan jika saya kini kembali ke bentuk saya di sini dan muat semula halaman web saya dan kini mencari sesuatu seperti anjing, perhatikan sekarang Saya telah dilaksanakan semula Google. Betul? 

Jika saya mahu mencari sesuatu lain, ia berfungsi untuk bukan sahaja anjing, ia juga berfungsi untuk kucing. Ia juga berfungsi untuk CS50. Dan OK, ini adalah hanya bawah whelming, bukan? Baiklah, tetapi ia sebenarnya berfungsi. Jadi apa yang sebenarnya telah berlaku? Jadi saya telah diajar pelayar saya, menggunakan HTML, untuk mengambil input daripada pengguna dan benar-benar menghantar input yang ke pelayan jauh menggunakan HTTP. 

Dan kerana pelayar saya memahami HTTP, ia sebenarnya membina URL yang sehingga yang Saya akhirnya lebih dalam pelayar saya, melihat apa yang berlaku apabila saya mencari anjing. Jika saya klik Search, melihat bahawa URL perubahan seperti yang saya dimaksudkan untuk google.com/search~~V pertanyaan sama dengan anjing. Dan itu kerana borang tahu, kerana kaedah ini dapat, untuk hanya menambah kepada URL yang di sana. 

Kini, laman-laman web masih hodoh. Jadi mari kita memperkenalkan satu lagi sekeping sintaks jika kita buat hari ini. Dan ini adalah sesuatu yang diketahui sebagai lembaran gaya melata. Jadi biarlah saya lihat di contoh ini di sini dan melihat jika kita boleh membuat kesimpulan apa yang sedang berlaku. Ini adalah CSS0.html. Dan ini adalah di mana perkara mendapatkan sedikit hodoh. Kerana malangnya, dalam dunia web, HTML sahaja tidak boleh melakukan segala-galanya. Dan jadi jika anda mahu menyesuaikan dgn mode laman web anda, anda benar-benar perlu untuk memberi tumpuan kepada estetika dalam cara yang berbeza. Jadi di sini, saya mempunyai tubuh web saya halaman dalam yang merupakan div besar. Dan div yang hanya bermakna bahagian. Jadi ia seperti satu ayat tetapi ia tidak mempunyai semantik sama satu perenggan teks. 

Ini hanya bermakna kepada pelayar, di sini datang sebuah kawasan besar segi empat tepat web saya halaman, saya ingin mengendalikan khas. Sekarang, line 21 adalah di mana div yang bermula. Dan hanya mengambil tekaan. Apakah kesan garis 21 pada seluruh kandungan halaman? Berpusat itu. Itu sahaja. Oleh itu, kita tidak pernah melihat cara sebenarnya berpusat teks. 

Malah, enjin carian saya, tidak seperti Google yang sebenar, itu semua dibenarkan ke kiri. Dan sehingga kini selaras 21, saya berkata, hey pelayar, mewujudkan satu bahagian atas halaman. Tetapi berilah besar, segi empat tepat yang tidak dapat dilihat. Itulah bagaimana saya mahu fikir tentang laman web. Dan kemudian menyesuaikan dgn mode ia seperti berikut. Dalam orang-orang sebut harga, sekarang, adalah bahasa kedua yang diperkenalkan hari ini dipanggil melata gaya helaian. Syukurlah, ia juga tidak bahasa pengaturcaraan, jadi ia sangat terhad dalam sintaks tetapi juga sangat terhad dalam fungsinya sedangkan HTML adalah tentang menandakan sandaran data bagi sebuah laman web dan struktur laman web. CSS umumnya kira-kira yang sambungan akhir, estetika, mendapatkan saiz dan warna dan penempatan betul-betul tepat di laman web. Dan sesungguhnya ia dibentuk dengan pasangan nilai utama. 

Satu yang seperti ini, teks menyelaraskan, diikuti dengan noktah bertindih, diikuti dengan nilai yang hartanah, yang dalam kes ini adalah pusat. Dan kini melihat anda dapat bersarang perkara-perkara ini. Jika saya mahu segala-galanya dalam yang Saya telah diketengahkan kepada berpusat, sebab itu saya mempunyai talian 21 dan garis yang berkaitan 31. Tetapi rasa sekarang mahu mengatakan John Harvard, selamat datang ke laman rumah saya. 

Simbol hak cipta John Harvard. Dan rasa saya mahu pertama mereka garis untuk menjadi agak besar. 36 piksel. Jadi itulah saiz yang baik. Dan saya mahu berat badan untuk menjadi berani. Tetapi di bawah itu, Saya mahu teks yang lebih kecil. Dan di bawah itu, saya ingin teks lebih kecil. Maaf. Hari ini terasa seperti hari cuti. 

Oleh sebab itu, apa yang saya lakukan untuk menyatakan ini? Di sini di talian 22 adalah terbenam div atau div bersarang, jika anda akan. Ia juga mempunyai tag gaya sendiri. Saya menentukan saiz fon 36. Saya nyatakan berat fon berani. Turun di sini, saya hanya nyatakan 24 piksel. Dan akhirnya, sejajar 28, saya nyatakan 12. Jadi hanya sebagai cek kewarasan cepat dan sebagai bacaan manusia ini, yang perkataan pada skrin adalah sebenarnya akan berani? Yang baris sebenarnya berani? 

Hanya John Harvard. Betul? Kerana hanya sebagai garis 22 kata hey pelayar, di sini adalah satu bahagian atas halaman. Jadikan ia saiz fon 36 mata. Membuat berat badan fon berani. Sebaik sahaja anda sampai ke tag penutup berkaitan atau tag ditutup pada baris 24, cara itu, hey pelayar, berhenti melakukan apa sahaja yang anda lakukan. Dan notis perlu jelas, walaupun garis 22 mempunyai semua sifat-sifat ini seperti gaya, apabila anda menutup tag selaras 24, anda hanya menyebut nama tag ini. 

Anda tidak mengulangi gaya perkataan itu atau apa-apa yang dalam orang-orang sebut harga. Dan jadi jika saya melihat ini sekarang dalam pelayar saya, mari kita yang melihat hasil akhir. Biar saya pergi hadapan untuk fail ini, yang merupakan CSS 0. Dan ia masih cukup jelas, tetapi mendapat cukup menarik. Tetapi ternyata ada yang perkara-perkara lain yang boleh saya lakukan di sini, dan pada risiko membuat ini benar-benar mengerikan, perhatikan di sini bahawa dalam saya badan halaman web saya, Yang boleh saya lakukan sesuatu yang lucu seperti bg atau warna latar belakang. 

Dan cepat, apa yang warna kegemaran anda? Green saya dengar. Baiklah. Jadi sekarang, jika saya memukul tambah nilai sekarang, kita mempunyai laman web hijau. Baiklah, jadi itu bukan tidak baik. Dan kini, jika saya ingin ini benar-benar sejuk, saya boleh membuat warna teks saya merah. Jadi mari kita lihat apa ini kelihatan seperti. Sekarang ia kelihatan cukup baik. Dan turun di sini, jika anda benar-benar mahu keadaan huru-hara dengan seseorang atau jika anda mahu salah satu daripada orang-orang yang cuba untuk menipu anda ke dalam melawat web yang halaman kerana mereka telah ditipu Google ke dalam pemikiran ada sejumlah kata-kata kunci like-- mari kita lihat, menambah nilai. Di manakah ia pergi? Dan di sana ia kita. Baiklah. Jadi saya katakan ini sebagai diketepikan, kita akan bercakap tentang perkara ini dalam beberapa minggu apabila kita bercakap mengenai keselamatan, jika anda benar-benar menanamkan tandan keseluruhan kata kunci dalam laman web, walaupun mereka tidak boleh dilihat kepada manusia, seseorang seperti Google, sudah tentu, masih boleh benar-benar mencari ini. Baiklah, jadi yang cukup mengerikan cukup cepat. 

Dan sebenarnya, bukan semua yang banyak tidak seperti laman web saya sendiri halaman sebagai mahasiswa, yang Saya mula Googling di sekitar untuk mencari versi masa lalu laman web lama saya. Ia adalah cukup buruk. Malah, saya tidak mendapati salah sebelum kelas. Tetapi ada yang lebih buruk di luar sana. Ini nampaknya adalah saya halaman rumah pada tahun 1996. Rupa-rupanya saya fikir ia adalah sesuai untuk meminta orang ramai nama mereka sebelum dapat benar-benar melihat laman web saya. 

Dan kemudian saya menunjukkan kepada mereka sesuatu yang bodoh, mungkin. Saya akan menggali lebih masa akan datang. Tetapi untuk sekarang, mari kita mempertimbangkan sedikit reka bentuk. Kami telah berbincang tentang gaya. Dan halaman ini setakat ini dan segala-galanya yang saya telah menulis agak bersih segi gaya. Tetapi bagaimana pula dengan reka bentuk? Nah, ada banyak lebihan dalam apa yang saya telah lakukan di sini. 

Saya sebutkan perkataan warna dalam beberapa tempat. Saya telah menyebut tentang saiz font dalam beberapa tempat-tempat dan berani dalam beberapa tempat. Dan asasnya, saya bersama beramah mesra dua bahasa. Saya telah mendapat HTML dengan tag saya dan saya sifat-sifat dan kemudian tiba-tiba, antara petikan, saya mempunyai bahasa kedua hari ini dipanggil CSS, yang sekali lagi, hanya ini pasangan nilai utama atau sifat-sifat ini dipisahkan oleh titik bertindih. 

Ia ternyata bahawa banyak seperti dalam C di mana kita boleh mula untuk faktor keluar beberapa kod ke dalam fail header, supaya kita boleh melakukan perkara yang sama dalam HTML. Dan satu langkah ke arah yang adalah seperti berikut. Perhatikan bahawa versi ini, CSS1.html adalah struktur laman web yang sama yang tepat. Jadi saya telah mendapat sejumlah besar daripada divs, tetapi kali ini, saya telah mendapat menghapuskan pembalut div kerana anda akan melihat. 

Dan saya telah memberikan ketiga-tiga divs atas, tengah, dan bawah, ID unik. Ini bagus, kerana dengan memberi mereka bahagian halaman pengenalan diri, Saya boleh rujukan mereka di tempat lain. Di mana? Baiklah, biar saya tatal ke atas. Dan setakat ini, bila-bila masa kita telah melihat di kepala laman web, apa yang satu-satunya tag kita telah mempunyai dalam ketua laman web? A lebih kuat sedikit. Hanya tajuk ini setakat ini. Tetapi ternyata ada yang beberapa perkara lain anda boleh meletakkan di sana, salah satu daripada yang ia dipanggil tag gaya. Jadi masa yang lalu, kita melihat pada atribut gaya. Ternyata ada tag gaya. Ia tergolong di dalam ketua laman web. Dan kini melihat apa yang saya lakukan. Saya mempunyai di dalam ini gaya tag berikut. Saya benar-benar menyebut pada baris 20 menamakan daripada tag yang saya mahu untuk menyesuaikan dgn mode. 

Maka saya mempunyai kerinting terbuka dan ditutup kerinting. Jadi sama dalam semangat kepada C, tetapi lagi, ini bukan fungsi, ini hanyalah detail sintaksis di sini. Kemudian sudah tentu, saya memberitahu pelayar, hey pelayar, membuat seluruh badan halaman mempunyai penjajaran teks pusat. Dan kemudian ini mengatakan yang berikut. Hey pelayar, jika anda melihat HTML elemen atau tag dalam halaman yang mempunyai pengecam unik atas, jadi simbol hash di sini hanya bermakna idea yang unik teratas, teruskan dan membuat saiz fon yang 36 dan berat fon yang berani. 

Pelayar Hey, satu perkara yang ID adalah pertengahan, menjadikannya 24 piksel. Dan hey pelayar, jika anda melihat idea bawah, menjadikannya 12 piksel. Kesan pada akhirnya betul-betul sam. Jika saya pergi ke CSS 1, halaman kelihatan sama. Tetapi kami satu langkah ke arah reka bentuk yang lebih baik sedikit. Kini saya kembali di sini untuk CSS2 dan lihat apa lagi yang saya lakukan. 

Sekarang halaman adalah benar-benar, benar-benar bersih. Malah, saya boleh memuatkan semua kandungan di laman di sini. Tetapi apa new tag aku diperkenalkan, jelas? Link. Dan ia bukan nama terbaik tag, kerana ia bukan satu pautan dalam erti kata yang kita tahu, tetapi ini bermakna pautan dalam beberapa fail lain. Ini adalah jenis seperti tajam termasuk dalam C. 

Ini adalah cara yang dalam HTML untuk mengatakan hey pelayar, pergi mendapatkan kandungan fail yang bernama css2.css. Hubungan, kepada saya, adalah bahawa ia adalah lembaran gaya. Dan sesungguhnya, itulah yang salah satu daripada S dalam gaya melata cadar cara. Ini adalah lembaran gaya. Ia hanya fail teks yang mengandungi sejumlah harta. Ia adalah sejumlah besar gaya yang anda mahu untuk memohon kepada halaman. 

Dan hal ini nampaknya adalah merujuk kepada fail kedua. Dan jika saya membuka itu, CSS2.css, melihat bahawa semua yang saya lakukan adalah copy dan paste semua ini ke dalam fail ini. Dan sekarang, walaupun anda tidak pernah berkod barangan ini sebelum ini, hanya mempertimbangkan dengan topi kejuruteraan pepatah pada, mengapa yang ini reka bentuk yang lebih baik mungkin? Faktor daripada orang-orang hartanah CSS, meletakkan mereka ke dalam fail mereka sendiri. Walaupun kita ini diselesaikan masalah seperti lima minit yang lalu dalam versi yang pertama. 

Kami tidak meningkatkan segi gaya halaman, ini hanya lebih baik reka bentuk dalam erti kata lain. Mengapa anda berfikir? Yeah. Lebih fleksibel bagaimana? Yeah. Jadi, jika anda mahu pergi belakang dan mengubah keadaan, sekarang, anda mempunyai satu tempat di mana anda boleh mengubah keadaan. Dan sebenarnya, untuk sesuatu seperti masalah menetapkan tujuh, di mana kita akan melaksanakan laman web perdagangan saham, yang akan mempunyai sejumlah besar halaman. Dan ia akan menjadi benar-benar menjengkelkan jika anda membuat keputusan, hm, Saya tidak benar-benar suka 24 piksel, saya mahu ia menjadi 28 piksel atau lebih besar sedikit. Dan kemudian perlu melakukan global mencari dan menggantikan atau membuka semua fail laman web anda semata-mata untuk benar-benar mengubah satu nilai. Oleh faktor daripada gaya ini ke dalam satu tempat pusat, anda kini boleh membuka satu fail teks dalam CS50IDE ke dalam mana-mana program, mengubahnya, menyimpannya, dan dilakukan. Anda dibiakkan mereka perubahan mana-mana. Dan itu akan sama di titik h fail berkenaan. Jadi mana-mana soalan itu jauh di sintaks ini? Baiklah, jadi kami telah melakukan segala-galanya ia seolah-olah kecuali benar-benar melaksanakan hiperpautan. Dan jadi mari kita pergi ke depan dan melakukan ini. Biar saya pergi ke hadapan dan membuat fail baru di sini. Saya akan memanggilnya link.html, dimasukkan ke dalam kod hari ini. 

Dan saya akan lakukan terbuka kurungan jenis doc html. Sebagai mengetepikan, perkara ini di bahagian, ini jenis perisytiharan doc, ia adalah satu-satunya yang pelik dengan tanda seru. Anda hanya perlu melakukannya di sana dan ia bermakna kita menggunakan HTML versi 5. Versi yang lebih lama bahasa mempunyai lebih lama tali yang diperlukan untuk meletakkan di sana. Jadi di sini adalah satu contoh yang dikenali sebagai pautan. 

Saya memerlukan badan halaman web saya di sini. Dan di sini, sama rata href katakan HTTP://www.disney.com dan laman web kegemaran saya, kami akan berkata. Baiklah, jadi yang sangat berbahaya, mesra pengguna halaman. Jika saya kini pergi ke dalam direktori saya penyenaraian di sini dan membuka link.html, kita mempunyai teks hyper. 

Dan sesungguhnya, ini adalah di mana H dalam HTTP datang dari. Protokol pemindahan hiperteks adalah mengenai memindahkan teks yang mempunyai pautan kepada sumber-sumber lain. Dan sesungguhnya, di sini adalah yang biasa, jika retro, pautan biru yang jika diklik, sebenarnya akan membawa saya ke Disney.com. Sekarang, oh, yang akan datang tidak lama lagi. Baiklah, jadi sekarang, apakah beberapa implikasi ini? 

Dan terus terang, dunia mula untuk mendapatkan sedikit lebih biasa dan juga menakutkan sedikit tetapi juga lebih sedikit diri dipertahankan sebaik sahaja anda mula untuk memahami perkara-perkara ini. Kerana kemungkinan adalah, sebahagian daripada anda, jika anda pergi melalui folder spam Gmail anda atau peti masuk anda, anda mungkin mendapat beberapa jenis e-mel yang yang meminta anda untuk menukar anda kata laluan mungkin atau mungkin mengesahkan kelayakan PayPal anda atau barang kecil. 

Dan sebenarnya, anda telah menerima sesuatu yang mengatakan seperti klik sini untuk menetapkan semula kata laluan PayPal anda. Dan sekarang, notis, jika ini tidak Disney.com tetapi seperti badplace.com dan tambah nilai, ambil perhatian bahawa teks di sini boleh berkata apa-apa sekalipun. Dan sebenarnya, ini adalah hanya kata-kata. Kenapa saya tidak benar-benar menjadi super berniat jahat dan berkata http://www.paypal.com. 

Klik di sini menetapkan semula PayPal anda kata laluan dan kini menambah nilai. Ini kelihatan agak sah, bukan? Maksud saya, saya tidak akan klik pada e-mel yang hanya berkata ini. Tetapi notis dikotomi di sini. Ia mengatakan www.paypal.com, dan sebenarnya, tunggu satu minit, kita tahu bahawa anda mahu s untuk keselamatan. Jadi sekarang, pergi ke www.paypal.com HTTPS, tetapi jika anda tidak pernah dilakukan sebelum ini, jangan masuk ke dalam tabiat berlegar pautan sedikit di sini. Dan ia adalah sukar untuk melihat pada skrin di sana, dan ia tidak semua yang mudah di sini. Tetapi cara turun di sini di sudut kecil kecil melakukan pelayar sebenarnya memberitahu anda bahawa kita akan untuk badplace.com bukannya Paypal.com. Sekarang, di mana kita akan pergi dengan ini? Semua contoh-contoh yang telah kami lakukan hari ini, kami telah dikodkan dan ditaip secara manual. Web ini adalah sangat tidak menarik apabila anda keras kod laman web anda supaya kandungan yang statik dan tidak berubah-ubah. Sudah tentu, semua kami laman web kegemaran hari ini, sama ada Gmail atau Twitter atau Facebook atau apa-apa bilangan orang lain yang dinamik. Mereka berubah tindak balas kepada input pengguna sama seperti hasil carian Google. 

Dan sebagainya Rabu, apa yang kita lakukan adalah kita meninggalkan HTML dan pengenalan CSS di belakang kami dan kami mengambil untuk diberikan bahawa kita kini tahu dan kita memperkenalkan bahasa pengaturcaraan baru dipanggil PHP, yang suka C, akan memberikan kita kuasa untuk benar-benar mewujudkan program-program yang diri mereka menjana output. Dalam kes ini, kita akan menggunakan PHP untuk menjana dinamik web halaman menggunakan bahasa baru ini. Jadi lebih kepada yang pada hari Rabu. Jumpa lagi. 

[Bermain muzik]