>> [MUSIK BERMAIN]
DAVID MALAN J: Baiklah, selamat datang kembali.
Ini adalah CS50.
Ini adalah akhir minggu tujuh.
Dan ini adalah akhir dari penyapu jalan yang memburu dari permasalahan yang empat
yang mungkin anda ingat.
Setelah sembuh semua mereka JPEG kakitangan,
anda menghadapi cabaran, jika anda ingin, untuk mengambil gambar diri anda dengan seberapa banyak
dari orang-orang yang anda boleh.
Kami mendapat sejumlah besar permohonan yang sejak beberapa minggu terakhir,
memang cukup hak beberapa sebelum tengah hari hari ini, beberapa di antaranya adalah orang-orang di sini,
ditangkap di sini dalam- kelihatan like-- Annenberg Dewan pada waktu pejabat, satu di sini
di Lowell Rumah dengan Nick.
Berikut ini Ramon ditangkap di telefon.
Ini adalah pada makan siang CS50.
Ini adalah Jason Skyping dengan rakan sekelas yang lebih kreatif,
yang menelefonnya cara ini.
Kita tidak tahu apa ini.
>> [Ketawa]
>> DAVID MALAN J: Tetapi yang patut gigabyte.
Berikut adalah Chang, yang benar-benar berlari pentas
untuk mengelak daripada diambil gambar satu hari, tetapi akhirnya tertangkap.
Berikut adalah Nick.
Dan di sini adalah Alison oleh ladang.
Dan Zamyla bahkan ditemui di pertandingan tarian.
Oleh itu, kita akan melalui gambar-gambar ini, memikirkan
yang disampaikan paling yang paling awal, dan ganjaran
satu hadiah yang hebat, sebagai dijanjikan dalam spec.
Dan kami juga akan membuat susulan tentang ruang yang terlibat.
>> Beberapa announcements-- sehingga makan tengah hari adalah, sekali lagi, Jumaat ini di 1:15 PM.
Jika anda ingin menyertai kami, RSVP di URL itu di sini.
Jason muncul sekali lagi di sini dari satu satu bahagian beberapa tahun
belakang, yang berlaku jatuh pada Halloween.
Dan sesungguhnya, dia berpakaian seperti labu tahun tersebut.
Jika anda menonton seksyen ini dari dari tahun 2011 catatannya
delapan, jika anda ingin tahu, di CS50.tv, saya rasa
ini adalah tahun di mana pam udara sedang bekerjasama.
>> Jika kemudian menonton seksyen yang sama pada tahun 2012,
Anda akan melihat Jason ini lebih kempis, sejak saman itu tidak lagi berfungsi,
yang hanya untuk mengatakan Jumaat ini, jika Anda lebih
suka mengukir labu dengan Daven dan Gabe dan lain-lain, RSVP kepada ketua-ketua
di alamat cs50.harvard.edu.
Ia berjanji untuk menjadi menyeronokkan.
Daven, kita diberitahu, telah mengukir labu semua hidupnya.
Gabriel dari Brazil tidak pernah mengukir labu untuk Halloween.
Jadi berada di sana dengan mereka seperti yang dia belajar.
>> Seminar, meanwhile-- jadi anda akan belajar tidak lama lagi
tentang apa harapan kami adalah untuk projek akhir, yang pada dasarnya
akan mendidih ke merancang dan melaksanakan
mana-mana projek yang paling menarik bagi anda, walaupun tertakluk kepada kelulusan
dan bimbingan dari rakan-rakan pengajaran anda.
Menjelang akhir semester, kami memperkenalkan sebilangan
seminar, yang kelas pilihan dipimpin oleh felo pengajaran dan Harvard
kakitangan, rakan-rakan kursus ini di kampus, mengenai pelbagai topik yang
adalah tangen kepada sukatan pelajaran asas kursus ini
tapi tetap berlaku, menyenangkan, dan yang berbeza untuk potensi projek akhir.
>> Sebagai contoh, pertama, jika anda ingin untuk mendaftar, pergi ke URL yang ada.
Dan ini adalah akhir untuk seminar pada tahun ini sahaja.
Tetapi menyadari kita mempunyai berpuluh-puluh seminar dari tahun-tahun yang lalu, yang semuanya
terkait dalam menu Seminar yang pilihan untuk laman web kursus ini.
Jadi, jika anda berfikir tentang melampaui zon selesa anda
atau mengambil beberapa kemahiran baru, misalnya, pengaturcaraan iPhone
aplikasi dengan Swift, bahasa baru dari Apple atau Objektif-C
atau aplikasi Android atau pengaturcaraan [? isyarat?] mentol lampu, atau mana-mana topik
di sini dan banyak lagi, cek kerana halaman pendaftaran.
>> Oleh itu, kita mulai dan berakhir pada Isnin dengan melihat HTTP.
Jadi HTTP refresher-- cepat, HyperText Transfer Protocol.
Tapi apa yang benar-benar bermakna?
Apa yang benar-benar bermakna?
Adakah itu tangan?
Aku tahu kau hanya menggaruk kepala anda.
Tetapi anda ingin mencadangkan apa HTTP adalah?
>> PENONTON: Bagaimana komputer berkomunikasi dengan [terdengar].
DAVID MALAN J: Saya terlepas bahagian akhir.
Bagaimana komputer berkomunikasi with--
>> Pelayan Internet: PENONTON.
DAVID MALAN J: Good-- dengan internet pelayan, dan secara khusus, pelayan web.
Kerana ingat, ada sekumpulan perkhidmatan di internet, ada yang
mungkin anda menggunakan setiap hari di antara perbualan dan mesej, chat, dan web, dan e-mel,
dan sebagainya.
Dan HTTP hanyalah protokol yang pelayar web
bercakap ketika berkomunikasi dengan pelayan web, dan sebaliknya.
Dan analog dalam dunia manusia mungkin,
Saya menghulurkan tangan saya untuk berjabat beberapa manusia lain dan dia
mengakui dengan memperluas atau tangannya juga.
Jadi itu hanya protokol, satu set konvensyen.
>> Dan apa yang sesungguhnya adalah orang-orang konvensyen?
Yah, itu hanya bermuara menghantar mesej bolak-balik,
seperti yang kita digambarkan di sini.
Dan ada beberapa cara dalam yang anda boleh menghantar mesej-mesej ini.
Dan mungkin yang paling biasa dikenali sebagai get.
Dan kita akan melihat satu perbezaan yang ini tidak lama lagi.
>> Tetapi permintaan mendapatkan dari browser kepada pelayan hanya kelihatan seperti ini.
Ini adalah sekumpulan teks yang menempatkan dalam sampul surat yang maya.
Di luar sampul surat yang pergi beberapa keping maklumat.
Apa yang perlu ada pada sampul surat, boleh dikatakan,
untuk mendapatkan permintaan seperti ini dari saya untuk pelayan web?
Yeah.
>> PENONTON: Alamat IP anda.
>> DAVID MALAN J: Alamat IP Saya Dari dalam bidang itu, boleh dikatakan,
dan sudah tentu, Alamat IP penerima.
Tetapi dalam hal suatu paket web, kita harus lebih detail sedikit
Ia tidak cukup hanya untuk menghantar sampul surat ke server,
kerana pelayan yang mungkin mendengar untuk pelbagai jenis
lalu lintas internet.
Jadi apa lagi yang kita perlu selain IP penerima?
Ya?
>> PENONTON: Apakah TCP?
DAVID MALAN J: Bagus.
TCP--
>> PENONTON: Alamat.
>> DAVID MALAN J: Alamat, atau pelabuhan, seperti disebut.
Dekat, tetapi beberapa port TCP.
Dan ada sekumpulan ini.
Tapi tentunya yang paling biasa harus akhirnya
80, yang lalai yang digunakan untuk lalu lintas web.
Dan satu lagi yang biasa satu tidak lama lagi akan menjadi 443,
yang digunakan untuk web aman lalu lintas, URL yang bermula dengan https.
>> Jadi, ini adalah apa yang berlaku di dalam sampul surat itu.
Dan mendapatkan / hanya berarti, memberi saya laman web yang lalai.
Berikan saya akar keras memandu di pelayan web.
Dan mudah-mudahan, web pelayan akan bertindak balas dengan, OK
dan nombor 200, yang hanya konvensyen mengatakan, ya, semua
memang OK.
Berikut adalah halaman.
Jenis laman web yang akan berupa teks, tetapi lebih khusus lagi, HTML,
yang kami akan menyelam semula ke dalam.
Dan dot dot dot sahaja cara, di sini adalah HTML.
Dan di situlah kita mengambil cerita hari ini,
benar-benar menulis HTML, HyperText Markup Language, yang
adalah bahasa yang laman web yang tertulis.
Ia bukan satu bahasa pengaturcaraan.
Tidak ada fungsi atau gelung atau keadaan.
Ini adalah bahasa markup, juga lagi lihat hari ini,
yang membolehkan anda untuk menentukan bagaimana struktur dan menyesuaikan dgn mode
estetika laman web.
>> Jadi ini adalah salah satu yang dan hanya halaman yang kami benar-benar
melihat, jika secara ringkas, pada Isnin.
Dan perhatikan beberapa ciri-ciri yang menonjol.
Ada banyak terbuka bersudut kurungan dan kurungan siku dekat.
Di antara mereka yang bersudut kurung adalah kata-kata.
Dan kita akan mula memanggil kata-kata tag.
Kepala pendakap begitu terbuka dan kepala kurungan tertutup
adalah tag terbuka dan tertutup, atau awal dan akhir tag
masing-masing, dari suatu elemen HTML, seperti yang akan kita menyebutnya, yang disebut kepala.
Dan jargon yang sama berlaku kepada badan dalam HTML dan lain-lain.
>> Dan apa yang baik adalah HTML-- dan memang, kita akan
menghabiskan waktu yang sangat kecil di atasnya, kerana anda akan kebanyakan hanya memikirkan
apa ciri-ciri ia mempunyai apabila anda benar-benar mempunyai masalah konkrit
untuk solve-- anda akan mendapati bahawa pelayar yang cukup bodoh.
Ia hanya akan do-- tidak berbeza yang computer-- apa yang anda katakan itu lakukan.
Dan ketika anda telah buka braket HTML di bahagian paling atas
sana, yang pada dasarnya hanya bermaksud, hey, browser,
di sini datang laman web yang ditulis dalam HTML.
>> Apabila Neraka itu melihat kurungan terbuka kepala, itu hanya berarti,
hey, pelayar, di sini datang kepala, atau bahagian yang paling atas dari halaman web saya.
Apabila Neraka itu melihat braket tertutup kepala, itu hanya berarti, hey,
itu sahaja untuk kepala.
Siap sedia untuk sesuatu yang lain.
Dan sesuatu yang lain adalah nampaknya akan menjadi badan.
Dan apabila anda tidak mempunyai tag, seperti anda mempunyai hanya hello, koma, dunia,
yang hanya akan menjadi teks baku yang akhirnya dipaparkan di skrin.
>> Sekarang, anda akan melihat terlalu lekukan di sini.
Anda mungkin boleh membuat kesimpulan bagaimana kita stylizing itu.
Setiap kali saya membuka tag, boleh dikatakan, saya digantung.
Dan setiap kali saya menutup tag, aku un-indent,
semangat yang sama pendakap kerinting.
Dan lebih dari itu, saya jenis menggunakan penilaian saya.
Perhatikan bahawa saya tidak mengganggu memukul Masukkan dalam tag tajuk.
Mengapa?
Well, saya hanya membuat keputusan itu tampak sedikit lebih bersih kepada saya, manusia,
hanya tidak mengganggu melakukan hal itu.
Jadi sekali lagi, ada beberapa penghakiman panggilan hanya
seperti ada dalam C atau apa-apa bahasa.
>> Tapi perhatikan juga bahawa lekukan ini cocok untuk model mental,
untuk tidak terlalu merumitkan itu.
Tetapi pokok, kan?
Jika anda fikirkan web halaman, nampaknya ditulis
seperti ini, sebagai baik menjorok cara itu,
Anda hampir bisa memikirkan pendakap terbuka HTML kurungan tertutup tag-batas
akar simpul, pohon keluarga nod gaya dalam gaya pokok
kami melihat pada Jumaat lepas.
>> Dan sesungguhnya, kita mempunyai di sini yang betul apa yang kita akan memanggil DOM, D-O-M, dokumen
model objek, cara yang mewah untuk mengatakan pokok yang mewakili HTML yang.
Dan perhatikan bahawa HTML memiliki, kita akan berkata, seperti pohon keluarga, dua orang anak.
Di sebelah kiri adalah kepala.
Di sebelah kanan adalah badan.
>> Dan hanya sebagai latihan pemikiran yang tidak wajar, kepala, tentu saja, telah berapa ramai kanak-kanak
mengikut struktur ini?
Jadi hanya satu, title-- dan sebab itulah kita mempunyai
anak panah pergi dari kepala ke tajuk.
Jadi seolah-olah orang itu dalam Pohon keluarga baru saja satu keturunan.
Dan kemudian tajuk itu sendiri boleh dikatakan mempunyai seorang anak juga.
>> Ingat bahawa HTML mempunyai hello, koma, dunia di bawahnya.
Dan aku hanya disediakan dalam masa satu bujur dan bukannya persegi panjang yang adil
untuk menyampaikan semantik bahawa walaupun ia adalah satu nod dalam pokok itu, boleh dikatakan,
itu semacam berbeza.
Ia bukan tag.
Atau lebih tepat, ia bukan unsur.
Ia hanya nod teks, jika anda akan.
Tetapi ini adalah benar-benar konvensyen manusia sewenang-wenang.
Ini tadi cara saya yang mewakili apa yang saya akan sebagai agregat
memanggil dokumen.
>> Dan sebagai samping, perkara yang di super atas sebelah kiri,
kurungan terbuka tanda seru doc Jenis HTML, ini kelihatan seperti tag,
tapi itu kes sudut bodoh mana yang hanya ada, disalin dan ditampal
untuk menunjukkan pelayar ini adalah versi HTML 5.
Dunia terus berubah apa baris pertama kod dalam halaman yang seharusnya.
Ini hanya berarti versi 5.
Oleh itu, ia tidak cukup kelihatan seperti yang lain.
>> Baiklah, jadi dengan itu berkata, kini anda akan menghargai
ini cukup bodoh ini tatu seseorang punya.
>> [Ketawa]
>> DAVID MALAN J: Baiklah, dan sekarang mari kita sebenarnya menyelam
melakukan sesuatu dengan hal ini.
Anda akan ingat bahawa masa lalu Saya membuka Appliance CS50 ini
dan saya melakukan sesuatu yang semudah membuka gedit.
Dan saya menyimpan fail bahkan pada desktop-- saya di mana-mana special--
sebagai hello.html.
>> Jadi, saya melakukan itu again-- hello.html Enter.
Dan sekarang dalam fail ini, saya akan pergi ke depan dan meniru apa yang kita hanya
doc Saw jenis html Kemudian saya akan melakukan open kurungan html kurungan tertutup.
Dan kemudian saya akan preemptively membuka dan menutup tag.
Mengapa?
Supaya aku tidak lupa nanti.
Ia hanya amalan yang baik, seperti pembukaan dan menutup pendakap kerinting sekaligus.
>> Dan kemudian apa yang selanjutnya?
Anda boleh memikirkan tato.
>> PENONTON: Kepala.
>> DAVID MALAN J: Kepala.
Dan kemudian di sini, saya mempunyai tajuk, saya rasa.
Dan gelar itu sewenang-wenangnya, hello, tajuk dekat dunia.
Dan kemudian di sini, badan, dari course-- maka kita menutup tag badan.
Dan kemudian hanya agak berlebihan, Saya mempunyai perkara yang sama di sini.
>> Jadi saya menuntut bahawa ini adalah satu laman web.
Ini adalah sesuatu yang kini boleh hidup di web,
walaupun sudah tentu, itu benar-benar hidup pada desktop saya sekarang.
Tetapi sesungguhnya, jika saya mengurangkan gedit, Aku akan melihat pada desktop saya ikonnya.
Walaupun ini adalah alat, Anda boleh melakukan ini pada Mac OS
tanpa TextEdit atau Windows Notepad dengan rata.
>> Dan jika saya pergi ke depan dan klik dua kali bahawa walaupun, dan select-- baik, mari kita
tidak memilih itu kerana Chrome tidak membuka.
Mari kita pergi ke depan dan membuka Chrome.
Dan kemudian melakukan perintah-O untuk terbuka Dan arahkan ke desktop saya
dan membuka fail itu.
Itu adalah bagaimana pelayar yang menafsirkan HTML, atas ke bawah, kiri ke kanan.
Hei, pelayar inilah HTML.
Berikut adalah kepala.
Berikut adalah tajuk.
Berikut badan.
Dan sesungguhnya, ini adalah bagaimana mampu membuat halaman web.
>> Tetapi perhatikan URL.
Tiada antara kamu yang dapat menarik khusus ini halaman pada komputer riba anda sekarang,
bahkan di dalam anda alat melalui URL itu,
kerana file: // menunjukkan ia sebenarnya pada sistem fail saya, cakera keras saya,
bukan milikmu.
Jadi ini tidak semua yang bermanfaat.
>> Sekarang mari kita bergerak ke arah menggunakan pelayan web sebenar.
Dan ternyata Appliance CS50 adalah lebih daripada sekadar persekitaran di mana
Anda boleh menulis kod C dan menyusun dan menjalankannya seperti anda telah lakukan.
Ia juga telah dikonfigurasi oleh kakitangan untuk mewakili web khas
server yang ada di internet, salah satu yang anda mungkin membayar untuk
atau yang dalam awan yang dipanggil.
>> Dan itu berjalan standard sumber terbuka percuma
perisian, contohnya, sesuatu disebut Apache, yang mungkin
masih web yang paling popular perisian pelayan di dunia
bahawa beribu-ribu laman web yang menggunakan hari ini.
Dan ia juga juga mempunyai perisian seperti MySQL,
yang merupakan pelayan pangkalan data bahawa pada akhirnya kita akan mendapatkan,
yang hanya untuk mengatakan Saya boleh mula merawat
alat saya sebagai pelayan yang lengkap bahawa saya tidak membayar untuk tempat lain.
Ia hanya tinggal di komputer riba sendiri untuk pembangunan dan kemudahan tujuan.
>> Jadi, mari kita pergi ke depan dan mengambil kesempatan daripada ini.
Saya akan pergi ke depan dan membuka tetingkap terminal.
Dan saya akan pergi ke depan dan move-- sebenarnya, mula-mula saya
akan arahkan ke desktop saya.
Jika saya lakukan ls, ada hello.html.
Dan saya akan pergi ke depan dan mula menggunakan
direktori baru kami telah tidak digunakan sebelum hari ini.
>> hello.html-- saya akan bergerak untuk ../vhosts untuk hosts-- maya
lebih pada di future-- dan kemudian ke dalam direktori yang dipanggil localhost,
yang merupakan nama samaran yang diberikan kepada hampir mana-mana komputer, sama ada Mac, PC,
atau Linux komputer, dan kemudian secara khusus ke dalam direktori yang kita,
kakitangan telah dibuat untuk anda apabila anda memuat turun alat yang dipanggil
awam.
Dan seperti namanya, apa-apa Saya dimasukkan ke dalam folder ini, dalam teori,
akan sekarang menjadi awam, sekurang-kurangnya kepada orang-orang
yang mempunyai langsung sambungan ke komputer saya.
>> Jadi sekarang biarlah saya pergi ke depan dan melakukan cd ke direktori yang sama
jadi saya dapat melihat apa yang berlaku dan ls jenis.
Dan sesungguhnya, itulah Satu-satunya perkara di sana.
Saya menuntut sekarang kerana saya telah meletakkan ini memfailkan hello.html dalam direktori
disebut di dalam awam dari direktori dipanggil localhost dalam direktori
disebut vhosts, yang terima kasih kepada staf CS50
telah pra-konfigurasi untuk menjadi akar pelayan web anda,
Saya kini boleh diharapkan melakukan hal ini.
>> Saya akan membuka tab baru.
Dan saya akan pergi bukan ke file: //.
Saya akan menggunakan sebenar http / localhost, yang
lagi, adalah nama panggilan untuk server sendiri.
Dan kemudian saya akan pergi ke apa mengajukan nama, hanya untuk menjadi jelas?
Di mana cerita ini mungkin akan pergi?
hello.html.
>> Jadi dengan kata lain, saya mahu sekarang ini komputer saya sendiri, alat sendiri,
seolah-olah ia adalah pelayan yang sebenarnya.
Nama julukannya adalah localhost.
Tetapi memikirkan localhost sebagai seperti Facebook.com google.com, apa pun.
Ia hanya nama tempatan saya.
Dan kemudian yang terakhir yang saya mahu ialah dalam akar dari cakera keras, boleh dikatakan,
atau akar pelayan web, ergo garis italik dan kemudian
yang hello.html nama fail.
>> Biar saya memperkecil dan tekan Enter.
Dan memang, kini terdapat laman web saya.
Jadi ia sedikit berbeza.
Dan itu hanya sebagai underwhelming.
Ini adalah versi lama.
Biar saya mengecut fon belakang.
Ini adalah lama.
Ini adalah baru.
Tetapi apa yang berlaku pada asasnya sekarang ialah HTTP sedang digunakan.
>> Mari kita membuat ini sedikit lebih jelas atau, jika anda akan, sedikit lebih rumit.
Biar saya pergi ke kanan bawah sudut alat saya.
Dan perhatikan bahawa semua ini masa, sudah ada nombor.
Itulah alamat yang unik Appliance CS50 anda.
Ini adalah alamat persendirian, seperti yang tersirat oleh 172,16,
yang hanya berarti hanya anda dari segi fizikal boleh mengakses pelayan web ini.
Semuanya firewall dan baik dilindungi dari yang lain
di dunia kerana ini menangani.
>> Dan kini melihat walaupun jika saya pergi ke alamat ini, tidak dalam alat saya,
tetapi pada Mac OS-- saya akan untuk kembali ke sini.
Ini adalah Mac saya sekarang.
Dan sekarang saya akan membuka versi Chrome sini.
Dan saya akan pergi ke http: //172.16.25 / Dan aku lupa rest-- 133.
>> Jadi, saya akan melawat dari Mac bahawa alamat IP /hello.html Enter.
Dan sekarang saya melihat dari Mac yang Appliance CS50 saya, yang
Alamat IP adalah bahawa nombor, memang berkelakuan
seperti pelayan web di internet.
Ia tidak mempunyai baik mudah untuk ingat nama seperti Facebook.com,
tetapi ia menggunakan HTTP nampaknya, walaupun Chrome
adalah jenis menyederhanakan dunia bagi kita tetapi tidak menunjukkan kepada kita HTTP.
Tapi ini memang betul-betul itu.
Chrome hanya menyimpan beberapa keystrokes hari ini.
Dan itulah yang kita lihat sekarang.
>> Jadi itu semua baik dan bagus.
Tetapi ia adalah halaman cantik underwhelming.
Biarkan saya masuk dan melakukan sesuatu sedikit berbeza sekarang.
Jadi, saya kembali ke gedit.
Dan bukannya hello, dunia, mari kita meletakkan imej.
Dan saya dituntut daripada before-- membiarkan aku pergi ke dalam akaun saya awam direktori localhost.
Dan biarlah saya pergi ke depan dan menyalin sejumlah besar fail dari hari ini
dari folder Dropbox saya ke sini.
>> Sekarang jika saya taip ls, melihat di semua fail-fail
yang saya telah diedarkan oleh laman web kursus ini sebelum hari ini,
salah satu yang masih hello.html.
Jadi ada satu itu.
Dan ingat satu bodoh ini dari cat.jpg time-- lepas.
Jadi, saya cuba untuk menanamkan cat.jpg di dalam laman web saya.
>> Saya akan pergi ke depan dan melakukan cat.jpg, menyimpan.
Mari kita kembali ke Chrome.
Dan biarkan aku zum dalam font dan sekarang reload.
Oops, di mana saya meletakkan ini?
Standby-- saya masih mempunyai lama versi dari terbuka desktop saya.
Jadi, saya pergi ke vhost saya, saya localhost, orang ramai, dan hello.html.
Jadi sekarang biarlah saya pergi ke depan dan mengatakan cat.jpg dalam tubuh
di mana saya mahu ia menjadi dipaparkan dan reload.
Sudah tentu, ini tidak betul.
>> Jadi saya perlu memberitahu browser sedikit lebih sengaja apa yang saya ingin lakukan.
Hanya menaip nama adalah jelas tidak mencukupi.
Jadi ingat bahawa terdapat satu lagi tag, imej, img untuk pendek.
Itu hanya kerana manusia tidak suka jenis kata-kata yang penuh.
Dan kemudian kita boleh buat source = "cat.jpg".
>> Dan sekarang aku akan lakukan satu hal yang berbeza di sini.
Meskipun semua tag kami setakat ini mempunyai
mempunyai gagasan ini dari memulakan tag dan tag akhir,
yang tidak benar-benar membuat akal bagi imej, kan?
Imej baik ada atau tidak ada.
Dan sehingga manusia telah dengan konvensyen yang lebih mudah.
Apabila anda mempunyai tag yang boleh kedua-dua bermula dan berakhir di time-- yang sama
ia boleh kosong, sehingga untuk speak-- hanya meletakkan garis italik dalam tag
pada akhir sangat.
Sekarang, saya akan kembali ke browser.
Hit Reload Damn, sesuatu yang salah.
Anda mungkin pernah melihat ini kadang-kadang di web,
walaupun ia tidak salah anda.
Ini kesalahan pelayan Web.
Apa Odes ini seolah-olah menunjukkan?
Ia patah.
Itulah di mana imej tersebut dimiliki.
Ya?
>> PENONTON: Tetapi ia tidak mempunyai akses kepada imej.
>> DAVID MALAN J: Ia tidak mempunyai akses kepada imej.
Itu, atau lebih teruk lagi, mungkin itu tidak pernah ada.
Mari kita lihat apakah kita tidak boleh mendiagnosis itu.
Ingat dari masa lalu bahawa jika pada Chrome, perkakas,
atau bahkan pada Mac atau PC anda, Anda pergi ke menu Pemaju
dan pergi ke Alat Pembangun pilihan, yang mungkin anda sudah ada
tidak banyak digunakan atau pernah.
Dan jika saya pergi ke Jaringan dan memuatkan semula halaman,
mari kita benar-benar melihat HTTP permintaan yang dibuat.
>> Ia kelihatan seperti hello.html adalah memang OK, oleh itu 200.
Tetapi cat.jpg adalah 403.
Jadi ia bukan satu 404.
Fail mungkin ada.
403 bermakna terlarang.
Jadi, ini adalah sedikit mengelirukan.
Saya akan kembali untuk tetingkap terminal saya.
Biar saya mengezum masuk di sini.
Dan biarkan aku melakukan ls.
Ada fail-fail yang sama.
>> Sekarang, saya akan melakukan ls-l, yang anda mungkin pernah
sebelum digunakan untuk melihat fail saiz mungkin atau cap waktu.
Dan kita melihat sejumlah besar maklumat yang amat sangat.
Tetapi perhatikan beberapa perincian.
Berikut hello.html dalam ini baris di sini dan di sini cat.jpg.
Dan ia hanya alat yang ramah dengan menyorot JPEG pengguna
ungu seperti ini.
Tetapi apa lagi yang berbeza di samping saiz fail dan nama fail?
>> PENONTON: [didengar].
DAVID MALAN J: Ya, ada dua lagi R di sini.
Perhatikan apa hello.html telah berlaku.
Jadi ternyata bahawa nama ini direktori awam adalah penting.
Apa-apa sahaja di dalam direktori ini dimaksudkan untuk menjadi awam.
Tetapi ia tidak cukup hanya untuk lepaskan fail di sana.
Anda juga perlu mengubah mod fail,
mengubah hak akses fail untuk secara proaktif tidak
menjadi tetapan lalai, dimana hanya saya boleh membaca
dan menulis, saya menjadi pemilik.
Saya mahu dunia semua orang secara keseluruhan untuk dapat membaca fail saya, jadi untuk bercakap.
Baca hanya bermakna melihatnya.
>> Dan memang, seperti yang anda akan lihat dalam masalah ditetapkan tujuh, itulah yang rata-rata ini R.
Min kedua-dua R membiarkan semua orang lain di dunia ini juga membacanya,
apalagi sekarang itu dalam direktori ini.
Jadi cara yang paling mudah untuk menetapkan ini adalah untuk pergi ke segera saya dan melakukan chmod untuk perubahan
mod dan kemudian melakukan + r, sama sekali, semua orang, semua, ditambah r untuk membaca,
dan kemudian cat.jpg Enter.
Tiada apa-apa seolah-olah berlaku, yang biasanya bermaksud sesuatu yang baik.
Jadi ls-l again-- sekarang mari kita lihat cat.jpg.
Dan kebenaran ini seolah-olah telah berubah.
Sebagai samping, jika anda membuat kesalahan dan anda, sebagai contoh,
hanya membuat your-- Saya tidak tahu-- esei dapat diakses orang ramai secara tidak sengaja,
Anda boleh melakukan sebaliknya, chmod a-r.
Walaupun terus terang, ia tidak boleh berada dalam direktori awam
pula jika itu kebimbangan.
>> Jadi sekarang mari kita kembali kepada pelayar dan tambah nilai saya.
Dan saya akan klik Ghostbusters sedikit
simbol untuk membersihkan bahawa sebahagian daripada skrin sehingga kita dapat melihat permintaan baru.
Dan sesungguhnya, di sini adalah Cat Grump dari sebelumnya.
Tetapi yang lebih penting, secara teknikal, ada
bilangan 200, yang bermakna kita mendapatkannya OK.
Baiklah, jadi itu semua baik dan bagus.
Tetapi kita tidak membuat yang terbaik dari laman web,
tidak pula kami akan cuba terlalu sukar untuk membuat fanciest laman web hari ini.
Tetapi mari kita sekurang-kurangnya melakukan sesuatu super biasa sebelum suara ketuk-ketuk
dari beberapa tag lain.
Jadi kira saya tidak hanya mahu kucing di sini.
Katakan saya benar-benar mahu ini kucing untuk menghubungkan kepada sesuatu.
>> Aku mungkin, misalnya melakukan sesuatu seperti ini.
untuk href utama untuk rujukan equals-- hyper
dan mari kita hanya melakukan sesuatu seperti www.google.com dekat
mengutip kurungan dekat.
Dan kini mencari kucing.
Tutup anchor tag.
Jadi ini hanya mempunyai satu jenis terperinci daripada dasar baru.
Tag sudah tentu, adalah berbeza.
Ia adalah nama yang utama untuk rujukan href atau hiper.
>> Tetapi yang lebih penting, ada Ciri sintaksis ini di sini.
Ini adalah apa yang kita akan berkata tidak tag, tetapi sesuatu sifat.
Dan sesuatu sifat adalah sesuatu yang mengubah perilaku dari tag.
Dan ini atribut, href, cara mengubah perilaku anchor
supaya apabila ia diklik, ia pergi ke URL ini di sini.
Dan sudah tentu, URL yang Google.
>> Sementara itu, apa ini teks di sini akan menjadi?
Nah, yang akan menjadi apa yang manusia yang benar-benar
lihat sebagai digarisbawahi pautan, semudah itu.
Jadi mari kita cuba ini.
Biar saya simpan.
Aku masih dalam hello.html.
Tetapi dalam versi dalam talian, anda akan melihat nama-nama fail yang sebenarnya kita pra-disediakan.
Biar saya pergi ke hadapan dan kembali.
Dan sekarang ini adalah sangat Laman underwhelming masih.
Tetapi jika Aku berdiri di atas besar-- dan ia adalah agak kecil,
tapi-- anda boleh lihat di bahagian bawah sebelah kiri skrin anda,
itu memang akan google.com.
Dan jika saya klik, ia akan mengocok saya cara untuk Google sebenarnya.
>> Tetapi perhatikan di sini peluang untuk eksploitasi, hanya sebagai samping.
Dan kami akan kembali ke lain isu-isu keselamatan tidak lama lagi.
Karena ada dikotomi ini antara di mana anda pergi dan apa yang kamu katakan,
Anda boleh melakukan sesuatu seperti this-- http://www.google.com.
OK, sekarang jika saya menambah nilai selepas menyimpan laman tersebut,
ia kelihatan seperti saya akan pergi ke Google.
Tetapi tidak ada sebab saya perlu pergi ke Google, bukan?
Saya benar-benar boleh pergi ke sesuatu seperti badguy.com, muat semula halaman di sini.
Dan notis, ia masih kelihatan seperti Google.
Dan hanya jika saya tajam cukup untuk membawa lebih di sini
saya melihat ia bahkan akan pergi ke tempat lain.
>> Jadi jika anda pernah mendapat e-mel, khususnya
satu dari Paypal, atau seolah-olah dari Paypal
meminta anda untuk log masuk ke akaun anda, ini
sebabnya mengapa anda tidak boleh pernah mengklik pautan dalam e-mel,
terus terang, mana-mana pautan dalam e-mel.
Jika anda tahu anda mempunyai sebenar wang di Paypal atau Bank
Amerika atau Fidelity atau mana-mana laman web, ketik manual dalam.
Kerana melihat bagaimana mudahnya untuk menipu orang ke dalam menyampaikan apa yang
kelihatan seperti pautan.
Tetapi ia benar-benar boleh pergi benar-benar di mana saja.
>> Dan ada yang jauh lebih besar ancaman daripada ini.
Malah, ini adalah sedikit tangen sekarang, tetapi satu
dari orang-orang yang terbaik yang pernah melihat yang sejak itu telah ditutup,
adalah seseorang menyebabkan orang ramai yang supaya- jadi ini mungkin berkata,
klik di sini untuk log masuk ke dalam akaun, akaun bank.
Dan ini adalah Bank of the West.
>> Jadi seseorang membeli ini.
Dan ia sedikit lebih mudah untuk melihat dalam fon mono jarak dizum
dalam pada projektor 30 kaki.
Tetapi ketika itu Font kecil di sebuah e-mel yang anda terima,
ini kelihatan seperti bankofthewest.com, tidak bankofthevvest.com,
yang seseorang telah dibayar $ 10 untuk membeli.
Dan itu, ini menyebabkan mereka ke sama dengan beberapa laman web yang tidak baik.
>> Dan anda akan melihat too-- sebenarnya yang boleh kita lakukan this-- jika saya pergi ke laman web sebenar,
bankofthewest.com, sekali lagi, penarikan balik dari semasa lepas
bahawa jika ini adalah laman web mereka dan Anda ingin tahu bagaimana ia berfungsi,
Anda pasti boleh pergi ke Alat pengembang Chrome.
Dan anda boleh melihat semua HTML diformat sana.
>> Tetapi yang lebih penting lagi, Anda cam-- mari kita menutup
this-- anda boleh pergi ke Lihat Pemaju View Source.
Mengapa saya tidak hanya menyalin semua itu dan apabila saya
boleh pergi ke dalam tetingkap gedit kecil saya di sini dan membuat halaman web sendiri.
Simpan ini dalam hello.html.
Dan mungkin ini akan memecahkan, kerana ia bukan ini biasanya mudah.
Tetapi jika saya memuat semula halaman saya sendiri di saya CS50 Appliance dan tambah nilai memukul sendiri,
OK, beberapa barang pecah.
Tapi aku cukup dekat untuk memiliki laman web perbankan saya sendiri, bukan?
Semua ini HTML--
>> [Ketawa]
>> DAVID MALAN J: I. tidak actually-- dan anda
tahu ada seseorang di luar sana yang sebenarnya akan klik link ini juga.
Jadi jelas, beberapa barang pecah.
Tetapi itu akan membawa kita ke dalam perbincangan,
tidak perlu sekarang, tentang apa yang CSS, style sheet melata, adalah,
dan bagaimana anda sebenarnya memuat turun fail HTML yang lain
file JPEG dan fail GIF yang laman web mungkin menggunakan.
Tetapi semua itu adalah accomplishable.
Tetapi ia benar-benar bermuara ini heuristik sangat mudah.
>> Jadi sekarang mari kita hanya skim melalui Beberapa contoh lain dari HTML
hanya untuk memberikan rasa apa lagi yang boleh anda lakukan.
Sebagai contoh, ini adalah reihani.jpg.
Penulis ingin membuat halaman web dengan senarai rumah-rumah di quad.
Saya mungkin menggunakan tag ul untuk tidak tertib senarai dan kemudian anak item senarai
dan kemudian beralih over-- atau senarai, rather-- rumah-rumah yang bersangkutan.
>> Dan jika saya membuka ini, mari kita lakukan ini.
Mari kita pergi untuk tidak hello.html, tetapi untuk launcha_boy.jpg.
Sialan.
Bagaimana cara mengatasinya?
Ini isu yang sama seperti sebelum ini, kan?
Jadi, saya melakukan oops-- chmod-- chmod a + r dari reihani.jpg.
Dan jika saya kembali ke browser saya dan klik Muat semula, itu dia.
Jadi jika anda pernah ingin membuat senarai bullet, anda boleh berbuat demikian.
Jika anda ingin menjadi super mewah dan membuat senarai yang teratur dan tidak senarai tidak tertib,
mengubah orang-ol, muat semula halaman, dan sekarang browser akan nombor untuk anda.
>> Apa lagi yang boleh kita lakukan?
Nah, beberapa others-- jika Anda punya perenggan panjang text--
misalnya, beberapa Teks Latin seperti this--
dan anda mahu ia dalam perenggan yang berasingan, p terbuka, p dekat untuk tag perenggan.
Dan melakukannya lagi dan lagi.
Dan jika saya kini membuka fail ini, paragraphs.html, baik, ini
semakin menjengkelkan.
Jadi sekarang mari kita kembali kepada saya segera, chmod a + r r bintang .html--
bagus sedikit kad liar sehingga untuk berbicara.
Ia harus memperbaiki semua masalah-masalah bagi saya.
Mari kita reload.
Ada tiga perenggan.
>> Dan sekarang mari kita pergi ke depan dan membuka yang lain.
Bagaimana dengan jadual?
Anda akan melihat penampilan meja sedikit lebih kompleks.
Tapi itu idea-- yang sama terbuka tag, tag terbuka,
terbuka, terbuka, terbuka, berhampiran tag, tag terbuka.
Dan ini berlaku untuk berdiri untuk meja, yang sempadan nampaknya
akan menjadi ketebalan yang 1-- apa sahaja bahawa baris jadual ertinya-, jadual
data, yang bermaksud sel.
Dan jika saya kembali ke browser saya sini dan pergi ke table.html,
Anda dapat melihat sesuatu seperti ini, mengerikan.
Tapi kita akan sampai ke titik di mana kita benar-benar dapat
membuat perkara yang lebih cantik dari itu.
>> Jadi, saya menetapkan untuk saat ini.
Ada tandan lebih tag.
Dan HTML indah untuk mengambil kerana, terus-terang, semua yang perlu anda lakukan
adalah melihat laman web yang ada dengan yang anda sudah biasa.
Dan anda seperti, oh, itu bagaimana mereka melakukan ini estetis.
>> Atau anda boleh mencari mana-mana talian sumber tentang bagaimana HTML berfungsi,
dan anda akan melihat bahawa terdapat perbendaharaan kata seluruh tag lain.
Tetapi dengan model mental yang sederhana sendiri yang hampir semua tag anda membuka
telah ditutup, ia benar-benar tidak cukup untuk mengajar diri sendiri
HTML setelah memahami idea-idea asas tag
dan sifat-sifat dan formedness baik bahawa kami telah bercakap tentang,
menutup apa-apa yang kita boleh membuka supaya kita tidak mengelirukan browser.
Sekarang, mari kita mengambil ini untuk tahap yang lebih menarik
dengan pergi ke sebenarnya.
Dan mari kita pergi ke Mac saya di sini, untuk google.com.
Dan sekarang notice-- mari kita lakukan ini.
Saya gong untuk pergi ke Tetapan, Tetapan Carian.
Saya ingin mematikan segera yang menyakitkan hati keputusan perkara di mana ia segera
bermula menanggapi menaip anda.
Mari kita buat sekolah yang lebih tua ini sehingga kita benar-benar melihat apa yang sedang berlaku.
>> Jadi, saya akan menyelamatkan saya Tetapan Google di sini.
Dan sekarang notice-- saya akan mencari sesuatu seperti kucing.
Dan ia masih melakukan auto lengkap di sini, namun berdasarkan kepada perkara-perkara
orang telah ditaip di masa lalu.
Tetapi perhatikan apa yang akan berlaku.
>> Dalam URL pada masa ini adalah ini, hanya google.com.
Dan dari segi teknikal, ia adalah garis miring.
Google hanya menyimpan karakter dan tidak menunjukkan kepada kita bahawa.
Mereka menunjukkan kepada kita https, hanya menjadi super meyakinkan bahawa kita
di halaman yang selamat atau disulitkan.
>> Jadi, saya pergi ke depan dan mencari kucing.
Sekarang ini dapat benar-benar luar biasa cepat.
Lihatlah panjang URL ini.
Tetapi ternyata bahawa kebanyakan barangan ini dalam URL sebenarnya cukup berguna.
Saya akan mula memotong perkara yang saya tidak faham.
Saya melihat kucing.
Saya faham kucing.
Saya tidak tahu mengapa kucing di sana lagi.
Saya benar-benar tidak tahu apa yang tidak masuk akal ini.
Jadi, saya hanya akan terus menyoroti dan memotong hal-hal
yang saya tidak faham, penyulingan URL ke dalam hal ini.
>> Sekarang mari saya mendapatkan masuk lagi.
Ia kelihatan seperti Google masih bekerja.
Jadi atas sebab tertentu, mereka menambah banyak hal untuk secara default URL mereka.
Tetapi ia tidak benar-benar diperlukan.
Jadi apa yang baik tentang ini?
Baiklah, biar saya pergi ke depan dan membuka Inspektor Chrome.
Ada jalan pintas tikus kecil untuk itu.
>> Pergi ke tab Rangkaian.
Dan sekarang mari saya menambah nilai Laman ini sekali lagi.
Dan aku memegang Shift.
Sebagai mengetepikan, pelayar cenderung untuk cache atau menyimpan
maklumat hanya untuk kepentingan kecekapan ini.
Tetapi biasanya, Shift induk dan reload akan memaksa semua
hendaklah bermula dari awal.
Dan itulah yang saya ingin lakukan di sini.
>> Dan perhatikan semua ini baris yang baru saja muncul.
Ia ternyata bahawa dalam mana-mana web yang diberikan halaman, anda mungkin hanya satu fail
involved-- hello.html-- atau ada mungkin 52, seperti dalam kes ini.
Ketika melawat google.com, nampaknya, browser saya
bermula 52 permintaan HTTP berasingan.
Mengapa demikian?
>> Nah, melihat apa yang di dalam dari ini Bahagian atas halaman web ke atas.
Tidak hanya teks, tapi ada gambar sebenar
kucing ke kanan.
Ada logo yang berwarna-warni di sini di sebelah kiri.
Ada semua ikon ini untuk mikrofon dan sebagainya.
Ada banyak keping, membina blok, potongan awal, jika anda akan,
ke laman web ini.
Dan apa browser demikian atas mendapatkan fail yang pertama, yang
adalah baris ini di sini, ia pada dasarnya iterasi bahagian atas HTML
ke bawah, kiri ke kanan, mencari hal-hal seperti tag gambar atau tag lain
yang menyebut fail lain dan ketika ia melihat mereka, pergi dan mengambil mereka
melalui HTTP, seluruh yang berdaya maju metafora sampul surat,
dan kemudian memaparkannya di lokasi yang sesuai di laman web.
>> Tetapi perhatikan di sini jika saya memberi tumpuan kepada kucing melempar, pencarian pertama,
perhatian bahawa, memang ia menggunakan HTTP 1.1.
Dan malangnya, Google Chrome sekarang dalam versi 39
adalah jenis perkara dumbing turun dan tidak menunjukkan kepada kita header yang sebenarnya.
Tetapi apa yang memang dikirim adalah permintaan untuk tidak mengurangkan, tetapi / search? q = kucing.
>> Sekarang, kenapa begitu penting?
Well, saya akan membuat kesimpulan daripada ini bahawa jika anda Google
menyokong pertanyaan borang ini, mengapa saya tidak melaksanakan pencarian saya sendiri
mesin untuk CS50, tetapi hanya bahagian hadapan end, hanya antara muka pengguna grafik.
Dan kami akan melakukan outsourcing akhir belakang, carian sebenar hasil kepada Google.
>> Jadi bagaimana saya boleh melakukan ini?
Baiklah, biar saya pergi ke gedit di sini.
Dan biarlah saya pergi ke depan dan membuka atas, mari kita berkata, fail baru.
Dan saya akan menyimpan ini sementara sebagai pencarian 0.html.
Dan kemudian akhirnya, kita akan cepat ke hadapan untuk yang saya pra-disediakan.
>> Dan saya akan cepat menyiapkan jenis doc
html kurungan terbuka html dekat kurungan html.
Kemudian saya akan melakukan kepala kepala dekat tajuk terbuka CS50
Cari dan bukannya carian Google.
Di sini saya akan mempunyai badan, badan turun di sini dekat.
Dan sekarang aku perlu CS50 Cari.
Dan sebenarnya, mari kita membina ini secara berperingkat.
Saya akan pergi ke depan dan menutup ini dan sebenarnya memasukkannya ke dalam direktori awam saya.
Jadi beri aku satu saat.
pencarian 0.html-- saya akan temporal menyebutnya search.html.
Saya akan chmod a + r search.html.
Dan sekarang saya akan membukanya.
Baiklah, jadi yang cepat.
Tetapi matlamatnya semata-mata adalah untuk mendapatkan kita ke titik
mempunyai teks ini memfailkan dipanggil search.html.
Jadi tidak banyak untuk melihat lagi.
Sesungguhnya, kalau saya pergi ke browser saya, dan pergi ke Search.html, itu sahaja ia.
Tetapi anda tahu apa?
Saya boleh menjadi sedikit lebih menarik.
Saya membaca dalam sebuah buku bahawa ada heading tag h1 disebut.
Dan saya akan pergi ke depan dan menggunakan h1 terbuka dan h1 dekat.
Muat semula halaman.
Dan kini ia lebih besar dan lebih berani, tidak semua yang menarik,
tetapi sekurang-kurangnya ia struktural lebih menarik.
Tetapi sekarang biarlah saya memperkenalkan tag lain.
Ternyata ada tag form.
Dan biarkan aku menutup tag itu.
Dan ternyata ada yang tag input yang
mempunyai atribut yang disebut jenis, yang adalah jenis data lapangan,
jika anda akan.
Dan akan menjadi jenis teks.
Dan nilainya akan menjadi CS50 Cari.
Tutup tag.
Dan ada akan menjadi tidak ada tanggapan membuka dan menutup dengan tag yang berasingan.
>> Mari kita kembali ke sini dan melihat apa yang berlaku, reload.
Semakin menarik.
Ia kelihatan seperti ia adalah satu medan teks.
Dan sebenarnya, saya tidak mahu untuk meletakkan nilai di sana lagi.
Biar saya pergi ke sini dan benar-benar mendapatkan menghilangkan nilai ini untuk memastikan ia mudah.
Daripada nilai, apa yang saya mahu untuk memberikan hal ini adalah nama.
Dan saya tidak tahu apa itu, jadi saya akan datang kembali untuk itu.
>> Tetapi di bawah itu, saya ingin untuk melakukan input type = submit.
Dan nilai ini akan menjadi CS50 Cari.
Dan kita akan melihat mengapa saya pindah nilai ini.
Ketika saya kembali, saya seolah-olah kini mempunyai awal dari carian saya sendiri
mesin, super mengerikan, walaupun terus terang, itu
tidak melempar jauh dari apa yang Halaman default Google kelihatan seperti.
>> Jika saya pergi di sini sekarang, saya boleh menaip kucing dan mudah-mudahan klik Cari.
Tetapi saya tidak cukup dilakukan lagi, kerana saya telah tidak dilaksanakan,
jelas, database.
Saya belum merangkak web untuk hasil carian.
Jadi saya perlu menggunakan khidmat yang ke Google.
Jadi bagaimana saya melakukan ini?
>> Well, pertama sekali saya perlu menambah dan tindakan
atribut untuk tag form saya yang adalah http://www.google.com/search.
Dan saya tahu bahawa hanya daripada mempunyai disimpulkan dengan melihat lebih dekat
di URL mereka.
Dan kini mengambil menebak.
Apakah yang perlu medan teks ini mungkin dipanggil, berdasarkan di mana kami datang
dari sebelumnya?
>> PENONTON: q.
>> DAVID MALAN J: q.
Dan kita tidak benar-benar perlu soalan menandakan ternyata, tapi q memang ia,
q untuk pertanyaan mungkin oleh lalai, hanya kerana itu
apa Larry dan Sergey datang dengan tahun yang lalu.
Jadi sekarang biarlah saya muat semula laman ini.
Ia tidak melihat semua yang berbeza itu.
Tetapi sekarang menonton apa yang berlaku.
>> Jika saya menaip pada kucing dan klik CS50 Cari dan melepaskan,
melihat saya akan dibawa diri ke sebenar Google.
Kini, Google menjadi sedikit mengganggu dalam bahawa mereka
menambahkan parameter tambahan, jika anda akan, ke URL.
Itu semua berlaku secara automatik di sisi Google.
>> Bahagian yang penting ialah saya seolah-olah telah menghasilkan permintaan ini di sini.
Dan sesungguhnya, itulah yang berlaku.
Apabila anda mempunyai HTML yang seperti ini, ini
adalah semacam notasi pemaju web kerana mengatakan, pergi ke depan dan membuat bentuk yang
bahwa ketika ia dikemukakan, ia akan pergi ke URL ini.
Dan apabila URL telah menyediakan Nilai untuk perkara-perkara seperti q,
tidak pergi hanya untuk URL ini.
Sebenarnya, terus ke soalan tanda dan kemudian q = kucing.
Menambah parameter, yang Parameter HTTP seperti itu.
>> Dan hanya untuk menjadi super tepat, apa yang sedang disimpulkan di sini-
tapi aku akan lebih explicit-- adalah bahawa kaedah yang saya mahu menggunakan
adalah mendapatkan, bukan sesuatu seperti pos, yang akhirnya kita akan lihat.
Jadi singkatnya, cukup dengan pemahaman HTML dan menggunakan beberapa tag yang agak mudah,
sekarang kita boleh mula membuat pengguna akhir depan kita sendiri
antara muka dengan pencarian mesin di belakangnya.
>> Tetapi ini sudah tentu, adalah cukup mengerikan.
Jadi, saya benar-benar membuka versi yang lebih baik sedikit.
Ini adalah salah satu yang saya disediakan maju yang mempunyai beberapa ulasan.
Tetapi anda akan melihat bahawa saya cukup banyak diciptakan kembali.
Jadi ini sudah boleh didapati dalam talian.
Dan aku berlaku kepada preemptively pergi ke https hanya untuk memastikan ia mudah.
>> Dan sekarang mari kita membuka lelaran berikutnya ini.
Adakah versi 1 bukan 0.
Apa yang melompat keluar pada anda sebagai sedikit berbeza dalam contoh ini?
>> PENONTON: [didengar].
>> Ya, ada ini pusat align teks.
Ini adalah sedikit aneh di sini.
Tapi ini memang baru.
Dan mungkin meneka apa yang akan berlaku.
Jika saya pergi ke browser saya sekarang dan melawat pencarian 1.html,
ia hampir perkara yang sama.
Tapi itu selangkah lebih dekat untuk menjadi sedikit lebih cantik.
Ia masih jelek, tetapi lebih cantik dalam sekurang-kurangnya segala-galanya kini terpusat.
>> Jadi ternyata bahawa apa yang saya gunakan adalah bahasa yang lain sama sekali dipanggil
CSS, style sheet melata.
Dan CSS, terus-terang, adalah jenis dari, pada pendapat peribadi saya,
bahasa atrociously dirancang.
Hal ini sangat menjengkelkan untuk mengingat semua berbagai maklumat lanjut.
Tetapi ia adalah apa yang stylizes seluruh web di seluruh dunia hari ini.
Saya menyinggung seseorang.
Baik.
Jadi, mari kita pergi ke sini dan melihat bagaimana kita benar-benar menggunakan ini.
Dan ternyata, sekurang-kurangnya ia sebenarnya bahasa yang cukup mudah.
Ia hanya pasangan nilai utama, sifat dan nilai-nilai, sifat dan nilai-nilai.
Malah, di sini adalah salah satu harta dan apa-apa nilai.
>> Cukup dengan menggunakan gaya atribut pada tag badan saya
dan memberikan nilai yang kolon kata dan kata yang lain,
atau harta dan nilai, Saya boleh mempengaruhi estetika
halaman web, tidak semestinya struktur lagi,
tetapi estetika itu.
Dan hanya dengan Googling di sekitar, saya sedar bahawa lembaran CSS, cascading style,
menyokong hartanah yang dikenali sebagai text-align, yang nilainya boleh
akan ke kiri, kanan, atau pusat, misalnya.
>> Jadi sekarang apabila saya menambah nilai halaman ini, apa yang saya lakukan mendapatkan
adalah halaman berpusat, tapi masih cukup hodoh.
Mari kita pergi ke depan dan membuka sehingga versi 2 Cari.
Dan kini melihat saya telah melakukan lebih sedikit.
Perhatikan di sini dalam kepala tag, ada boleh menjadi lebih daripada tajuk.
Malah, ada tag gaya.
Dan ini adalah di mana ia hanya mendapat sedikit yang melihat CSS kemas kadang-kadang.
>> Perhatikan bahawa saya seolah-olah mempunyai sesuatu yang secara struktural kelihatan sangat berbeza.
Tetapi di sini adalah nama tag yang saya ingin bergaya.
Berikut adalah teman-teman lama kami keriting kawat gigi, dan pendakap kerinting tertutup.
Dan kemudian di sini ialah harta dan nilainya.
>> Jika saya memuatkan fail ini, search2.html, keputusan akhir adalah sama.
Tetapi ia adalah satu langkah ke arah reka bentuk yang lebih baik.
Dengan membuat keluar CSS ini, saya telah tidak berbaur dengan HTML saya.
Dan memang, seperti yang akan kita lihat, saya boleh menggunakan semula sifat-sifat dan nilai-nilai.
Jika saya ingin membuat tandan bahagian dari halaman web saya berpusat,
Saya tidak perlu menaip style = text-align pusat di seluruh tempat.
Saya boleh meletakkan di satu tempat mungkin, seperti di atas.
>> Tetapi walaupun ini bukan reka bentuk yang terbaik.
Malah, salah satu perkara yang anda akan belajar kerana anda menghabiskan lebih banyak dan lebih banyak masa dengan
pengaturcaraan web adalah bahawa lebih banyak anda boleh modularize benda dengan benda faktor keluar
seperti H file membiarkan kita hal-hal faktor keluar, suka helpers.c membiarkan kita hal-hal faktor keluar
yang pşet yang lalu.
Begitu juga, mungkin kita ingin mencapai hal ini.
>> Jadi melihat di versi tiga daripada search.html saya telah
dibersihkan kepala laman dan hanya meletakkan
dalam hal ini, link tag, yang bertentangan dengan nama,
tidak memberikan hyperlink.
Ini link ke fail lain dengan cara href yang nilainya dalam kes ini,
adalah pencarian 3.css
Jadi saya sedar kita akan dengan cepat.
Tetapi semua yang saya lakukan adalah jenis bergerak keadaan.
Biar saya terbuka pencarian 3.css.
Itu dia, tidak ada yang benar-benar kepadanya.
Saya hanya disalin dan ditampal ke dalam baru fail, sama seperti kita kira barang-barang keluar
ke dalam fail lain sebelumnya.
Dan result-- yang sepenuhnya underwhelming--
akan menjadi persis sama.
Tetapi kita bergerak toward-- tidak, tidak.
Oh, aku tahu mengapa.
>> Oleh itu, ia seolah-olah menjadi bug.
Dan ia adalah dalam erti kata lain.
Tetapi saya membuka tab Rangkaian saya.
Biar saya memuat semula halaman.
Ah, mengapa CSS tidak diterapkan?
Nah, fail CSS, sama, mempunyai agar dapat dibaca dunia, jadi untuk bercakap.
Dan ia juga adalah saat dilarang.
Jadi, saya melakukan chmod a + r bintang dot CSS-- whoops--
kami CSS dot hanyalah sambungan fail untuk fail CSS.
Sekarang, saya akan kembali ke pelayar dan tambah nilai saya.
OK, sedikit lebih baik.
>> Sekarang, saya akan melakukan satu perkara lepas.
Dalam mencari-4.html.
Saya mempunyai versi yang saya hanya berpikir adalah cara yang lebih sejuk, walaupun cara yang lebih
rumit.
Mari kita lihat hasil yang pertama.
Tutup untuk memberikan lebih banyak ruang.
Perubahan ini untuk mencari-4, Enter.
>> Dan kini banyak hal yang rusak.
Saya akan kembali ke dalam direktori saya di sini.
Dan sekarang saya hanya akan melakukan chmod a + r pada file-- yang
kerana saya tahu ia dipanggil exists-- logo.gif, yang merupakan imej.
Dan kini reload.
Dan Wow jadi sekarang aku cukup dekat, terus-terang,
seperti versi 1999 dari Google, dan terus terang, versi 2014 dari Google,
kan?
>> Jadi ia sekarang akan ke laman web mereka, akhirnya, jika saya mencari kucing.
Dan sesungguhnya ia.
Tetapi apa yang saya lakukan berbeza dalam versi ini 4?
Oleh itu, kita tidak akan diam terlalu banyak di sana sini.
Anda akan melihat ini dalam masalah memisahkan tujuh akhirnya.
Tetapi perhatikan saya lakukan beberapa perkara.
>> Saya memperkenalkan div tag, yang merupakan bahagian,
semangat yang sama tag perenggan.
Tetapi pembahagian yang sama seperti, inilah kawasan yang tidak dapat dilihat yang segi empat tepat
skrin.
Mari kita memberikan yang unik pengecam, footer, hanya
supaya kita boleh bercakap tentang dalam HTML di tempat lain.
Di sini adalah satu lagi div halaman ID yang akan menjadi kandungan.
Ini adalah kandungan halaman.
Dan di sini adalah header halaman.
>> Dalam erti kata lain, saya telah dasarnya dalam HTML berasa mental
melihat halaman web ini sebagai tiga komponen, header
di sini dengan segi empat tepat yang tidak dapat dilihat ini, kandungan yang di tengah, dan kemudian
kaki ke bawah di bawah, bahkan walaupun kita tidak melihat perkara-perkara.
Kerana saya mahu dalam kepala saya dari Laman di sini, atau dalam fail css,
Saya boleh menggunakan sintaks ini.
>> Tandukan bukan tag.
Ini ID jadi ternyata bahawa dengan melakukan # header,
Saya kini boleh memohon satu atau lebih hartanah untuk header.
Yang boleh saya lakukan kandungan yang sama, yang sama untuk kandungan di sini.
>> Jadi misalnya, di footer, notis semua sifat ini saya menambahkan.
Dan saya tahu mereka wujud hanya dengan membaca pada dokumentasi untuk CSS.
Saiz fon akan menjadi smaller-- sehingga beberapa saiz font relatif.
Berat akan menjadi berani.
Margin-- berapa banyak piksel sekitar itu-- adalah 20 piksel.
Dan ia akan berpusat.
>> Tetapi sekarang, laman itu adalah seperti ini.
Jika saya tidak gembira dengan salinan saya di sana,
Saya boleh melakukan sesuatu seperti warna merah.
Dan kemudian saya boleh menyimpan ini, memuat semula, dan sekarang saya telah bergaya footer.
Jadi, ini adalah hanya mengisyaratkan pada kuasa apa yang anda boleh lakukan di laman web
untuk mengubah keadaan.
>> Dan bahkan lebih sejuk daripada ini, jika anda mahu untuk melihat-dengan laman web yang sebenarnya,
Anda tidak dapat kekal mengubahnya.
Tetapi jika saya membuka Inspektor Chrome lagi
dan saya tidak pergi ke sebelah kiri di sini, yang menunjukkan HTML Facebook,
tetapi menunjukkan di sebelah kanan sebelah semua CSS,
sama ada anda boleh dan mengubah keadaan dengan cepat.
Jadi, saya teruskan niat saya ini.
>> Biar saya pergi ke hadapan dan kawalan klik pada perkataan ini secara rawak di sini,
menandatangani, dan klik Periksa Elemen.
Chrome sangat mudah melompat ke tag h1 yang menggunakan Facebook.
Dan perhatikan di sini Facebook mempunyai jenis malas
keras berkod saiz fon sebagai harta di sini.
>> Jadi perkara yang sejuk walaupun adalah bahawa jika saya benar-benar pergi di sini
dan berkata, oh, Facebook, saya tidak seperti itu 64 piksel, kita kini boleh menukar Facebook.
Sudah tentu, kita hanya mengubahnya bagi saya secara peribadi pada masa ini.
Tetapi ini adalah hanya satu lagi alat dalam kit alat kami
yang akan membolehkan kita untuk tweak dan memikirkan dan juga mendiagnosis
isu-isu dalam laman-laman web kita sendiri.
Dan kita juga boleh pergi ke atas di sini, yang adalah perkara yang sama.
Jika anda benar-benar ingin mendapatkan mewah, saya bermakna, kini anda benar-benar boleh berubah halaman
dan melakukan perkara-perkara gila.
>> Lalu mengapa ini semua kepada?
Nah, akhirnya, kami tidak akan mahu menjadi
mampu untuk membuat laman web yang didorong oleh hujung belakang kita sendiri,
bukan dengan hanya Google dan penyumberan luar akhirnya kembali ke sana.
Kami benar-benar mahu nilai, misalnya,
tindakan enjin carian kami di atribut untuk tidak pergi kepada orang lain,
tetapi untuk sesuatu seperti search.php, mana search.php adalah di dalam server kami sendiri,
bukan pada orang lain.
>> Dan sebagainya untuk sampai ke sana, kita benar-benar perlu untuk memperkenalkan bahasa baru.
Oleh itu, kita sudah melihat yang baru bahasa di sini, atau dua benar-benar, HTML
dan CSS.
Tetapi mereka benar-benar hanya bahasa struktural dan estetik.
Mereka tidak pemrograman bahasa per se.
Dan itu kira-kira sebanyak rasmi masa seperti yang kita akan menghabiskan pada mereka.
Kerana kita akan mulai sekarang untuk beralih kepada PHP.
>> Jadi PHP adalah sebenarnya bahasa pengaturcaraan.
Ini adalah bahasa skrip dalam erti kata bahawa itu
dimaksudkan untuk menjadi lebih ringan daripada sesuatu seperti C.
Dan itu bahasa yang ditafsirkan, yang bermakna ia tidak disusun.
Jadi singkatnya, apa artinya apabila kita menggunakan bahasa seperti c
dan kami harus compile?
Apa yang dimaksud dengan mengkompilasi C kod sumber?
PENONTON: [didengar].
DAVID MALAN J: Katakanlah lagi?
PENONTON: [didengar].
DAVID MALAN J: Perfect.
Ia mengubahnya menjadi binari.
Ia mengubahnya menjadi sifar dan orang-orang dari kod sumber bahasa Inggeris seperti yang sebenarnya.
Dan kemudian kita boleh sebenarnya menjalankan mereka sifar dan orang-orang
dengan melepaskan mereka melalui CPU dengan mengklik dua kali pada ikon
atau menjalankan perintah.
>> PHP dan Python dan Ruby dan Perl dan JavaScript
dan tandan lain bahasa diinterpretasikan
bahasa, atau dengan kata lain Anda tidak kompilasi mereka.
Sebaliknya, anda memberi mereka makan sebagai input untuk program yang dikenali sebagai seorang jurubahasa.
Dan jurubahasa itu, yang orang lain menulis,
membaca kod sumber anda atas ke bawah, kiri ke kanan dan hanya mentafsir
garis itu dan melakukan apa yang kamu katakan.
>> Jadi, jika anda menghadapi baris yang mengatakan cetak,
ia tidak semestinya menukar cetak kepada sifar dan orang-orang yang sesuai.
Ia hanya mempunyai jurubahasa ini seperti jika keadaan besar yang mengatakan,
jika arahan programmer adalah cetak, kemudian melakukan hal berikut.
Jadi ia menafsirkan ia hanya oleh jenis penalaran
melalui apa yang anda memberitahu untuk dilakukan.
>> Dan PHP adalah salah satu bahasa tersebut.
Dan PHP tahun yang lalu dirancang tepat untuk pengaturcaraan web.
Dan ia pada awalnya bahasa tidak kemas sangat ceroboh.
Dan memang, ada yang besar jumlah kod PHP buruk di luar sana.
Tetapi bahasa itu sendiri telah berkembang selama bertahun-tahun,
sehingga kini ia sebenarnya satu langkah seterusnya yang indah
pedagogis dari C kerana ia begitu terkutuk akrab dengan semua
Anda baru saja dilihat dalam beberapa minggu terakhir.
>> Satu perbezaan awal kita akan melihat adalah tidak ada fungsi utama lagi.
Apabila anda mula menulis kod, ia hanya akan dijalankan tidak kira apa,
seperti yang akan kita lihat sebentar lagi.
Sementara itu, inilah yang yang ubah kelihatan seperti dalam PHP.
Ini agak berbeza, tetapi hanya hampir tidak.
>> Dalam PHP, tidak ada menaip kuat.
Ada minggu menaip, yang hanya berarti ada
adalah jenis data seperti string dan nombor dan lain-lain.
Tetapi anda tidak mengganggu menyatakan apa yang mereka lagi.
PHP angka itu keluar untuk anda.
Tanda dolar hanya keputusan yang bahwa orang-orang PHP dibuat tahun
lalu itu bahawa mana-mana pembolehubah dalam PHP hanya bermula dengan tanda dolar.
Ini sebenarnya jenis yang berguna dalam melompat keluar pada anda sedikit lebih.
>> Tetapi selepas itu, ini adalah suatu keadaan di PHP.
Apa yang berbeza berbanding C?
Trick question-- apa-apa, yang sebenarnya benar-benar baik.
Ungkapan Boolean dalam PHP-- yang sama.
Ungkapan Boolean dengan dan berbanding atau, suis, gelung, gelung, loops-- OK,
yang satu ini adalah berbeza.
>> Jadi ternyata ada beberapa ciri-ciri lain dalam PHP.
Salah seorang daripada mereka adalah benar-benar ini, yang sangat mudah.
Jika $ nombor adalah array bahawa anda telah dinyatakan sebelum ini dalam sebuah program,
anda mempunyai mewah ini bagi setiap konstruk yang bukannya melakukan semua itu
Saya menjengkelkan sama dengan 0, I adalah kurang daripada ini, [? Saya ++?],
untuk setiap nombor nombor, di mana masing-masing nilai-nilai tanda dolar hanya
berubah, dan yang terakhir Anda boleh anggap sebagai I.
Anda boleh memanggil ia apa sahaja yang anda mahu.
Saya menyebutnya nombor.
Ini akan beralih di atas array disebut nombor.
Dan pada setiap iterasi, itu akan mengemaskini secara automatik
untuk anda jumlah tanda dolar ubah supaya anda sentiasa
mempunyai akses kepada pembolehubah yang anda mahu tanpa perlu melakukan apa-apa braket persegi
notasi atau pengindeksan ke dalam array.
>> Selain itu, kami juga mempunyai perkara-perkara seperti array, yang kelihatan hampir sama,
kecuali itu sangat umum, seperti yang akan kita lihat, kedua-dua dalam PHP dan JavaScript
untuk pra memulakan array menggunakan tanda kurung siku.
C menggunakan pendakap kerinting.
Jadi ia sedikit berbeza, walaupun kita tidak benar-benar menggunakan trik yang banyak.
>> Namun, yang lebih kuat, PHP mempunyai array bersekutu,
yang adalah cara yang mewah mengatakan jadual hash.
Malah, jika anda mahu untuk menyatakan hash meja dalam PHP, tidak seperti di C-- berapa banyak
baris kod masa yang diambil untuk benar-benar melaksanakan jadual hash di C?
Atau berapa banyak baris kod itu mengambil untuk melaksanakan jadual hash di C?
Jadi mungkin banyak, kan?
Ini adalah beberapa dozen, mungkin 100 atau 200.
Ini trivial.
Atau ia akan menjadi, sebagai Anda akan segera melihat, trivial
untuk melaksanakan jadual hash [Didengar] dan juga dicoba.
Tetapi dalam PHP-- dan terus terang, saya mungkin tidak harus mengatakan ini
sehingga Monday-- dalam PHP, jika Anda ingin meja, dilakukan.
Itu hash table-- jadi dengan satu baris kod.
Dan
>> Banyak bahasa melakukannya.
Bersenang-senang dengan Serangga lima.
Jadi banyak Bahasa apa ini.
Mereka memberikan abstraksi ini bahawa orang lain, pengaturcara lain,
telah dibuat untuk anda supaya Anda boleh berdiri di atas bahu mereka
dan mula menggunakan idea-idea yang super menarik, seperti jadual hash dan pokok-pokok
dan cuba.
Tetapi anda tidak perlu harus melaksanakan hal-hal diri sendiri.
>> Dan begitu pada akhirnya, apa yang kita akan menggunakan PHP untuk
berpotensi menulis program garis yang dipanggil perintah.
Kita boleh mencipta setiap program kami telah menulis semester ini setakat ini,
kecuali mungkin Breakout yang menggunakan SPL, yang khusus untuk C pada masa ini.
Tapi setiap masalah lain yang ditetapkan, pasti Mario dan Caesar
dan Vigenere dan [? Retak?] Dan seterusnya, kita
melaksanakan semula boleh dengan PHP, mungkin sedikit lebih mudah.
>> Tetapi apa yang kita akhirnya akan menggunakan PHP adalah pengaturcaraan web.
Dan kami akan memperkenalkan seterusnya seminggu model mental, paradigma yang dipanggil
MVC, pandangan model pengawal, yang jika anda telah melakukan pengaturcaraan
sebelum Python atau Ruby atau di tempat lain, anda
mengetahui pasukan ini dengan Rel dan Django dan sebagainya.
Tetapi jika anda baru kepada ini juga, anda akan melihat
bahawa ini adalah benar-benar sangat semula jadi lanjutan pemfaktoran
dan jenis reka bentuk kod yang kami telah
lakukan di C. Kita akan sekarang menerapkan beberapa pelajaran-pelajaran ke PHP
sehingga pada akhirnya, kami melaksanakan laman web kami sendiri.
Dan jika anda jenis terpesona atau kagum
bahawa kita akan melakukan semua begitu cepat,
menyedari bahawa hampir setiap semester, hampir 90%
pelajar CS50, termasuk yang yang tidak pernah diprogram sebelumnya,
akhirnya membuat projek akhir yang adalah berdasarkan kepada pengaturcaraan web.
Dan itu anda akan melihat pulangan adalah tinggi dalam beberapa minggu akan datang.
Oleh itu, kita akan melihat anda kemudian pada hari Isnin.
>> SPEAKER 1: Dan kini, Deep Pemikiran oleh Daven Farnham.
Jadual hash.
>> [Ketawa]