[MUSIK BERMAIN] Allison Buchholtz-AU: Baiklah, semua orang. Selamat kembali ke bahagian. Jadi agenda kami untuk hari ini akan lebih banyak lagi hal web dev. Saya tidak tahu berapa banyak dari Anda telah melihat pşet anda sejak dirilis awal pagi ini. Saya akan berapa banyak orang telah membaca spec, tapi melihat bagaimana anda telah mempunyai semua , seperti, tujuh jam untuk melihatnya dan itu adalah hari Isnin dan Anda mungkin telah mempunyai kelas, Saya akan menganggap bahawa kebanyakan kamu tidak mempunyai. Jika anda mempunyai, pujian tambahan. Anda pada dasarnya membantu melaksanakan web yang mudah pelayan di C, yang merupakan Serangga jenama baru, sehingga kalian bisa menjadi babi Guinea. Ia akan menjadi seronok, seminggu liar, tetapi saya fikir ia akan menjadi banyak keseronokan dan ia akan menjadi benar-benar pengalaman yang baik sebenarnya. Jadi untuk menyediakan anda untuk itu, dalam bahagian hari ini, kita akan pergi chmod, TCP / IP, maka sedikit HTML dan CSS. Pada akhirnya, kita akan benar-benar kod halaman web yang mudah bersama-sama untuk membantu anda semua jenis mendapatkan lebih berjinak dengan itu. Dan kemudian jika anda masih belum mendapatkan kuiz anda, mereka di depan, tapi aku cukup yakin semua orang di sini mempunyai kuiz mereka. Dan juga pada masa yang sama, penyelesaian yang tidak sampai lagi, tetapi sebaik sahaja kami finish-- suka, beberapa orang lalu mengambil quizzes-- mereka mereka akan sampai. Jika anda mempunyai sebarang pertanyaan sementara itu, berasa bebas untuk e-mel saya secara peribadi. Saya akan bertindak balas dengan individu anda soalan, seperti yang saya selalu lakukan. Maka pada catatan itu, chmod. Jadi pada dasarnya semua yang anda perlu tahu tentang chmod ialah ia digunakan untuk mengubah file permission, kan? Jadi itu hanya beberapa sistem menyebutnya ubah keizinan, seperti yang dikatakan di sini. Dan jika anda pernah mahu melihat hak akses yang fail, daripada hanya melakukan ls, anda boleh melakukan ls-l. l berdiri lama. Jadi, anda akan do list panjang dari segala-galanya, dan ia akan memberikan lebih terperinci maklumat tentang setiap fail anda. Dan anda akan melihat something-- Saya akan melangkau ke depan untuk second-- tetapi anda akan melihat sesuatu yang serupa dengan garis atas ada bagi setiap fail. Dan kita akan pergi melalui apa yang bermakna. Jadi, pada asasnya, untuk mengubah kebenaran fail anda, anda hanya ingin menggunakan chmod. Anda boleh memikirkan hal ini dengan yang lain UNIX memanggil seperti ls atau cd atau entah apa lagi. Ia adalah jenis baru yang lain seperti panggilan. Jadi kita chmod dan kemudian kita akan mempunyai tiga digit biasanya. Terdapat beberapa cara untuk melakukan itu, salah satu yang kita akan pergi ke. Tapi biasanya, anda akan mempunyai tiga digit mulai dari 0 hingga 7 masing-masing semasa. Jadi, satu hal adalah bahawa terdapat tiga kebenaran berlainan kami dapat memberikan setiap fail. Dan itu boleh dibaca, yang diwakili oleh r, yang akan masuk akal dalam sedikit; w, yang ditulis; dan executable, yang x. Saya tahu bahawa e satu, boleh laku, mungkin bukan arti yang paling, tetapi kita mewakilinya dengan x. Dan kemudian yang terjadi adalah masing-masing juga mempunyai jumlah perwakilan. Jadi kita mempunyai 1, 2, dan 4. Dan pada dasarnya apa yang berlaku ialah masing-masing tiga nombor di sini sepadan dengan set yang berbeza dari pengguna bahawa kebenaran tersebut berkaitan dengan. Jadi, anda boleh memikirkan yang pertama jumlah sepadan dengan pengguna sebenar atau pemilik fail tersebut, yang kedua jumlah akan sesuai dengan kumpulan, dan yang terakhir merujuk kepada dunia, OK? Jadi apa yang berlaku adalah mengingat mereka r Numbers adalah 4, w adalah 2, x adalah 1, kan? This-- jika anda jumlah ini ke atas, yang memberikan anda bahawa angka pertama bahawa kita mungkin input dalam chmod kami. Jadi dalam hal ini, apa yang nombor ini akan menjadi? Ia akan menjadi 4 ditambah 2 ditambah 1, yang merupakan 7, kan? Dan dalam hal ini, ini tidak mempunyai apa-apa, jadi ini di sini akan diterjemahkan kepada chmod 700, OK? Dan apa yang dilakukan adalah ia memberikan semua hak akses ini kepada pengguna anda. Jadi ini bermakna pengguna kami boleh melakukan apa sahaja yang mereka mahu. Mereka boleh membaca fail ini. Mereka boleh menjalankan fail ini. Mereka boleh menulis ke fail ini. Tetapi kumpulan dan dunia, tidak ada kebenaran apa pun, OK? Jadi cara lain untuk menulis itu, kita boleh melakukan chmod tiga digit, yang masing-masing sepadan dengan apa sahaja jumlah wang atau yang kumpulan tertentu adalah, subset tertentu. Atau boleh kita lakukan benar-benar perkara lain. Tunggu. Kita boleh melakukan sesuatu dengan ini di sini. Berapa ramai daripada anda melihat contoh di mana ia adalah seperti chmod plus x? Adakah anda melihat bahawa dalam kuliah, saya rasa? Jadi yang bermaksud semua. Ini bermakna memberikan kepada semua pengguna, yang saya lupa untuk meletakkan di sini. Tetapi plus x, jika kita perhatikan di sini, jika kita melakukan untuk chmod-- apa yang kumpulan kami bercakap tentang ditambah kebenaran kita ingin berikan kepada mereka. Jadi ini dapat plus atau minus. Plus menambahkan kebenaran. Minus menghilangkan kebenaran. Cukup intuitif, saya fikir. Jadi plus x bermakna chmod. Jadi tukar kebenaran dari semua orang jika ini adalah kebenaran add a--. Dan x-- itu bererti apa kebenaran kita memberikan semua orang. Membaca, menulis, atau melaksanakan? PENONTON: Execute. Allison Buchholtz-AU: Execute. Jadi kami memberikan semua pengguna izin untuk menjalankan fail ini, OK? Jadi apa jika kita ingin melakukan bahawa dengan bentuk numerik? Jadi ingat dengan angka, kami mahu tiga nombor. PENONTON: 4. Allison Buchholtz-AU: Apa itu? PENONTON: 4. Allison Buchholtz-AU: Tidak 4. PENONTON: 0, 0, 4. Allison Buchholtz-AU: Baik, kami ingin untuk memberikan kepada semua pengguna, kan? Jadi, kita akan mempunyai nombor dalam setiap slot. Itu akan menjadi Bilangan yang sama di setiap slot kerana kita hanya ingin memberikan semua orang boleh laku kebenaran. Jadi boleh laku adalah 1, tetapi di landasan yang betul. Jadi jika kita chmod 111 yang akan menjadi setara dengan chmod plus x. Adakah ini masuk akal untuk semua orang? Kita akan pergi melalui beberapa contoh. Jadi takeaway besar di sini adalah tidak ada di sini, tetapi hanya bererti memberikan kepada semua pengguna. u adalah jika anda hanya mahu untuk memberi atau mengambil kebenaran khusus daripada pengguna atau pemilik. g adalah bagi kumpulan, sehingga angka tengah. Dan kemudian orang lain yang boleh anda fikirkan kerana dunia ini, sehingga angka terakhir. Maka dengan itu, kami akan pergi ke contoh, kerana saya merasa seperti contoh selalu membuat perkara-perkara ini lebih mudah untuk difahami. Jadi rwx-- kami pergi melalui this-- juga boleh menjadi mewakili 700. Itulah contoh yang kita melihat di lebih dari gambar. Jadi chmod 444 pada beberapa fail akan memberikan hak akses? Anda benar-benar dekat. PENONTON: dibaca untuk semua. Allison Buchholtz-AU: dibaca. Jadi yang boleh dibaca oleh semua orang, kan? Kemudian apa lagi yang berbuat demikian? Jika kita ingin melakukan chmod dengan sama ada r atau w, ditambah dan kemudaratan, apa yang akan panggilan yang kelihatan seperti? Ia akan chmod apa? PENONTON: plus r. Allison Buchholtz-AU: plus r pada 5. OK, jadi ini adalah sama seperti ini, hanya dua terjemahan yang berbeza dari perkara yang sama. Maka dengan itu, kita mempunyai ini. Jadi saya mahu anda semua untuk mencuba dan menulis semacam ini dengan cara bertentangan mereka. Jadi dengan chmod 555, apa yang ia akan menjadi seperti? Ia akan menjadi nilai tambah atau u ditambah atau entah apa lagi? For u ditambah x, memberi saya tiga nombor. Dan kemudian memberitahu saya tentang apa kebenaran kita sebenarnya sedang memberi dan untuk siapa? Jadi saya akan memberikan kalian dua minit untuk berusaha ke arah itu. Jangan ragu untuk bercakap dengan satu sama lain. Bagi anda yang datang dalam sedikit an, ada gula-gula dan kemeja. Kami telah tiga baju kiri, dan kita mempunyai Kit Kats dan Starbursts. Jadi berasa bebas untuk datang ambil beberapa di selingan kecil ini. Juga, yang terakhir adalah rumit. Itu dua chmods untuk yang terakhir. Sebenarnya, izinkan saya menutup pintu itu sementara kalian kerjakan itu. Gula-gula sentiasa perlu pada petang Isnin. OK, jadi chmod 555. Apa lagi yang kita boleh menulis itu? Apa-apa idea? Ya. PENONTON: a rx plus. Allison Buchholtz-AU: r ditambah rx. Adakah anda ingin menjelaskan mengapa ia akan akan rx? PENONTON: Kerana anda mempunyai 5, sehingga 4 campur 1, supaya yang membaca ditambah laku, dan itu untuk semua. Allison Buchholtz-AU: Benar. Jadi, untuk mengulangi, 5 di sini kita tahu sebagai jumlah dari 4 dan 1, kerana setiap nombor dalam ketiga-tiga kami adalah jumlah dari kebenaran untuk subset itu, kan? Sama ada pengguna, kumpulan, atau dunia. Jadi dalam hal ini, kita tahu bahawa 5 mempunyai yang akan dibentuk oleh 4 dan 1. Dan 4 dan 1 sesuai dengan mudah dibaca dan boleh laku. Kami memberikan kepada semua orang, sehingga kami dapat melakukan chmod plus rx. Dan jelas, kami hanya pergi melalui soalan-soalan yang ada, jadi sekarang fail ini boleh laksana dan boleh dibaca oleh semua orang. Jadi, bagaimana dengan yang kedua? Apa yang mungkin jumlah untuk satu itu? Apa-apa idea? Pergi ke depan. PENONTON: 100 [terdengar]. Allison Buchholtz-AU: 100. Tepat. Jadi adakah anda ingin menjelaskan mengapa 100? PENONTON: Kerana itu untuk pengguna, jadi ia di posisi pertama. Dan kemudian x laku adalah 1. Allison Buchholtz-AU: Tepat sekali. Jadi kita memberikan laku hak akses kepada hanya pengguna. Jadi dalam kes ini, ia akan menjadi 100. Dan saya mempunyai semua jawapan pada slaid seterusnya dalam kes Anda sedang menulis banyak perkara turun. OK, jadi yang berikutnya ini sebenarnya yang telah dilakukan dengan dua chmods, anda boleh melakukannya. Jadi apakah ada yang punya apa-apa idea bagaimana anda mungkin mendapatkan chmod 640 ditulis ulang dengan cara yang lain? Anda boleh mengubah pengguna terlebih dahulu dan kemudian anda boleh menukar kumpulan itu adalah petunjuk saya. Jadi jika kita hanya mengubah pengguna, yang merupakan salah satu yang pertama ini di sini, apa yang mungkin panggilan kita? Jadi pengguna adalah u, bukan? Jadi chmod u campur apa? Mmhmm? PENONTON: rw. Allison Buchholtz-AU: rw. Benar, untuk membaca dan menulis, kerana membaca adalah 4, w adalah 2, jumlah wang yg ada dan 6. Jadi kita mendapatkan chmod u ditambah rw, dan kita akan mendapat 6 pertama kami di sana. Demikian maka untuk mendapatkan 4, kami kini mahu untuk menukar tetapan kumpulan kami. Oleh itu, kita akan melakukan chmod g ditambah apa? Apakah yang dimaksudkan dengan 4? PENONTON: r. Allison Buchholtz-AU: r. Tepat. Jadi kami memberikan pemilik membaca dan menulis kebenaran dan kami memberikan baca kumpulan kebenaran, yang kita mempunyai semua di sini. Mmhmm? PENONTON: Jika anda boleh menulis sesuatu, tidak menyiratkan anda boleh melaksanakannya? Allison Buchholtz-AU: Anda boleh menulis kepada something-- Saya tidak percaya bahawa ia bermakna anda boleh melaksanakannya. Sejuk. Jadi itu sahaja yang kita alami. Sebagainya yang berikutnya ini, itu kes hanya jenis umum yang anda hendak simpan dalam keberatan untuk masalah anda ditetapkan. Ini biasanya kebenaran yang kita suka anda untuk digunakan. Jadi untuk 711, yang memberikan kita, tentu saja, pengguna semua kebenaran, yang cenderung masuk akal. Dan maka itu boleh laku oleh kumpulan di dunia, yang masuk akal jika anda mempunyai beberapa direktori, anda ingin dapat melintasi ke dalamnya. Orang ramai perlu akses. Bagi mana-mana fail yang bukan-PHP, anda akan menggunakan 644, yang akan melakukan apa? Apakah yang dinyatakannya, atau apa kebenaran adakah itu berikan? Jadi pemilik bisa apa? PENONTON: Membaca dan menulis. Allison Buchholtz-AU: Membaca dan menulis. Kemudian kumpulan dan lain-lain hanya boleh membaca, kan? Kemudian chmod 600 bagi apa-apa PHP fail yang anda gunakan, pemilik anda, sekali lagi, boleh membaca dan menulis untuk itu tapi tidak semua orang hanya jenis disekat. Jadi ini akan benar-benar lebih berguna apabila Anda mendapatkan untuk masalah anda ditetapkan minggu depan di mana anda sebenarnya sedang membina sebuah laman web. Jadi jika anda pernah mengalami masalah pelik di mana ia tidak memuatkan dengan betul, mungkin anda perlu menambah laksana izin, atau mungkin anda perlu dibaca atau menulis kebenaran. Hal-hal kecil yang cenderung untuk perjalanan orang sehingga, tetapi itu jenis seperti pergi ke apabila anda mula Serangga minggu depan. Dan saya akan memberikan anda lebih banyak petunjuk tentang Serangga minggu ini, tetapi saya belum melihatnya sejak ia telah dibebaskan pagi ini. Tetapi anda e-mel saya, saya akan telah melihat dalam hal itu dengan masa yang saya bertindak balas esok. Jadi sekarang, semua orang yang baik dengan chmod? Apa-apa pertanyaan yang tersisa? Cukup sederhana. Hanya jenis mencatat apa membaca, menulis, dan melaksanakan nombor adalah mungkin bahagian yang paling sukar. Jadi dengan TCP / IP, semua protokol ini, jenis seperti dengan struktur data anda minggu lepas, ia lebih penting untuk mendapatkan semacam intuisi yang lebih tinggi daripada mereka. Ini bukan CS143 di mana kita akan untuk meminta anda untuk membuat jaringan, jadi anda akan baik-baik jika Anda tidak faham cekal seluk semua protokol. Apa yang penting untuk difahami adalah jenis seperti apa yang mereka wakili dan mengapa mereka penting. Jadi TCP / IP, sudah tentu, ia adalah Protokol Kawalan Penghantaran atau Protokol Internet, yang merupakan pada dasarnya hanya satu set undang-undang pada dasarnya atau standard yang memberitahu data bagaimana harus dikendalikan, bagaimana harus packetized, dihantar, dan diterima. Jadi pada dasarnya, sama seperti yang mengatakan di sini, meningkatkan kemungkinan data yang mendapat di mana anda mahu untuk sampai ke. Saya yakin jika kalian pergi ke kuliah atau menonton secara online, ia has-- saya tidak tahu jika dia berbuat demikian tahun ini, tetapi saya tahu tahun lalu, dia mempunyai demo di mana dia mempunyai gambar Rob dan ia membaginya menjadi empat dan memasukkannya ke dalam sampul surat dan cuba untuk mendapatkannya di Sanders. Dan anda boleh jenis memikirkan dengan cara itu. Ia hanya satu set peraturan yang memberitahu data bagaimana untuk mendapatkan tempat dan membolehkan anda tahu jika Anda kehilangan data, dengan cara yang sama bahawa jika anda mengambil beberapa halaman catatan dan anda melabelkan mereka dengan halaman 104, halaman 204, dan anda kembali bersekolah nanti dan anda telah hilang something-- anda tidak dapat mencari halaman yang anda tahu 304-- ada sesuatu yang salah, jadi anda dapat melihat melalui nota anda lagi atau meminta seseorang untuk menghantar semula anda kuliah nota dari hari itu. Dengan cara yang sama dengan data di internet. Jika saya meminta sesuatu dari beberapa pelayan dan perlu menghantar dalam beberapa paket, mungkin akan jumlah dalam beberapa cara, mari saya tahu berapa banyak yang perlu saya terima, dan beritahu saya, oh, ini adalah salah satu dari 10 atau ini adalah salah satu daripada 10,000. Dengan cara itu apabila saya pergi ke memasang semula semua serpihan bersama-sama, Saya tahu jika sesuatu yang hilang dan saya boleh meminta untuk itu lagi. Adakah ini masuk akal? Hanya satu set peraturan. Pada dasarnya, set kaedah-kaedah, OK? Oleh itu, kita juga bercakap yang sedikit tentang pelabuhan. Ini sebenarnya adalah standard yang membolehkan anda tahu jenis data apa yang sedang dihantar dalam paket ini. Jika kita pergi dengan kami contoh sampul surat, kita tidak tahu bahawa itu gambar Rob di sana kecuali kita menulis itu pada bahagian luar sampul surat kami. Jadi pelabuhan pada dasarnya perkara yang sama. Ia hanya satu cara untuk mencari tahu apa yang jenis data sedang dihantar. Jadi kita mempunyai semua yang umum yang paling di sini. Jadi 21-- ini juga jenis seperti perkara-perkara yang baik untuk tahu. Ini semacam satu soalan kuiz mudah. Jadilah seperti, apa port 80 lakukan? Atau, apa port 443 lakukan? Jadi hal-hal yang baik untuk tahu. Oleh itu, kita ada di sini, 21 adalah fail protokol pemindahan, jadi peraturan yang mengatur pemindahan fail. 25, sesuatu yang kita semua menggunakan terlalu banyak, adalah e-mel. 53 adalah nama domain sistem, yang pada dasarnya jenis hanya dari pencarian untuk Alamat IP nama domain. Jadi saya cukup yakin ia adalah yang disebut dalam kuliah, jika anda pergi ke sesuatu seperti google.com, ia mempunyai alamat IP yang berkaitan dengannya. Ia tidak benar-benar google.com. Dan sehingga 53 adalah pelabuhan yang benar-benar mengambil mengurus jenis menterjemahkannya ke dalam alamat IP untuk anda. Dan kemudian 80 dan 443 yang sangat biasa. Anda sama ada mempunyai laman web anda atau Anda mempunyai laman web anda selamat, yang banyak halaman web memindahkan ke sekarang. Jadi itulah tahap agak tinggi gambaran keseluruhan protokol pemindahan. Saya tidak melihat banyak lebih mendalam. Ini semacam barangan sejuk jika anda tidak berminat. Ada banyak sumber. Wikipedia sebenarnya adalah halaman yang cukup baik. Jadi saya melihat itu hanya beberapa saat yang lalu, jadi saya sangat akan mengesyorkan melihat itu jika anda berminat atau mengambil 143 dalam tempoh dua tahun kerana Saya rasa ia setiap tahun. Maka pada akhir ini, kami tidak bercakap tentang laman web dan HTTP, yang sebenarnya topik berikutnya untuk hari ini sebelum kita pergi ke dalam HTML dan CSS dan anda benar-benar dapat kode sebuah laman web. Ini akan menyenangkan. Kami akan mempunyai gambar-gambar kelinci dan ia akan menjadi besar. Jadi HTTP, seperti yang anda lihat di sini, adalah salah satu daripada akronim indah untuk minggu ini, yang Protokol Pemindahan Hiperteks. Jadi sekali lagi, ia hanya satu set peraturan yang mengatur hiperteks memindahkan, dalam kes ini. Jadi cara terbaik untuk belajar tentang ini adalah hanya jenis untuk memecahnya menjadi kata-kata individu kerana terdapat banyak kata-kata pada skrin di sana. Jadi, kita akan bermula dengan hiperteks. Jadi "hiper," yang boleh anda fikirkan "Di atas," seperti super-jenis hal. Oleh itu, ia benar-benar hanya teks dibawa ke tingkat berikutnya, jadi seperti teks super, seperti teks seterusnya. Jadi itu pada dasarnya hanya teks yang memberikan kita maklumat lanjut daripada teks normal yang ada, OK? Jadi dalam kes ini di sini, ini adalah hiperteks. Ini memberitahu kita bahawa kita mempunyai beberapa link yang kita akan, yang cs50.net, yang kini cs50.harvard.edu. Ini slaid yang agak tua. Dan ia akan memaparkan itu kerana ini, sebagai hyperlink, dan kemudian laman web yang benar-benar sejuk. Jadi itu teks, yang sedikit sedikit perkara-perkara yang benar-benar sejuk di sana. Jadi, anda boleh menghubungkan perkara-perkara dan anda boleh memasukkan imej dan anda boleh mendandan hal. Dan perkara yang paling biasa bahawa anda orang mungkin mempunyai dengan hiperteks adalah HyperText Markup Language, HTML, yang tentu saja semua web yang kita lihat di sekeliling kita, yang diberikan dengan beberapa gaya CSS yang dilemparkan. Tetapi jika ada orang yang sangat besar dengan MySpace, Saya pasti anda semua digunakan HTML setiap masa untuk membuat profil tersebut sempurna, bukan? Saya rasa seperti yang mungkin menjadi rujukan ketinggalan zaman sekarang, tapi apa pun. Hanya little-- yang kalian tidak yang jauh lebih muda. Sebahagian dari kamu lebih tua daripada saya. MySpace masih hal ketika saya masih muda. Saya bukan yang lama. Anyways, HTML hanya satu bentuk hiperteks. Jadi hiperteks hanya teks dengan ciri-ciri tambahan. Jadi protokol pemindahan mungkin perkara yang lebih rapuh untuk menjelaskan. Jelas sekali, transfer-- hanya memindahkan data. Jadi baik antara klien, seperti abang web anda, dan server. Jadi, pada asasnya hanya cara internet bekerja. Jadi permintaan sebenar bagaimana kerja ini, kami tidak benar-benar akan melihat sebuah permintaan contoh dan tindak balas. Tetapi bagaimana kita meminta maklumat dari pelayan dan bagaimana pelayan bertindak balas kepada kita adalah apa protokol pemindahan ini mengatur. Jadi permintaan dan respon yang mempunyai mengikuti set ini khusus aturan. Ia diselaraskan sehingga tidak peduli di mana anda menggunakan internet, itu selalu bekerja sama, OK? Sekali lagi, protokol, set aturan. Ia hanya biasa interaksi dengan cara yang sama Profesor Malan bercakap tentang jika seseorang mengulurkan tangan mereka, Anda tahu bahawa itu kesopanan yang umum untuk mencapai Anda keluar dan menjabat tangan mereka. Itu protokol, kan? Jadi saya memberikan beberapa permintaan standard, yang saya mahu untuk berjabat tangan anda, dan anda memberikan beberapa standard respon, yang adalah sama ada tidak, terima kasih atau anda boleh cuba dan goncang saya tangan atau mungkin anda akan cuba dan tangan bertemu saya. Dan kita tidak mempunyai protokol untuk itu. Ia rosak. Tetapi jika semua orang mengikut protokol yang sama, sudah tentu, ia pergi lebih lancar. Orang-orang saling mengenal satu sama lain. Semua orang gembira. Jadi dalam dunia web, semua orang mematuhi kaedah-kaedah- yang sama sedikit lebih baik daripada standard sosial. Tetapi dengan itu, kita akan melihat pada permintaan contoh di sini. Jadi ada ini sedikit kunci di sini di bahagian bawah yang memberitahu anda warna-warna yang berbeza, apa yang mereka sepatutnya bermakna. Jadi putih adalah sama seperti kaedah anda permintaan dan protokol version-- itu memintanya kaedah, versi. Dan maka ini adalah beberapa nama bidang dan nilai dari bidang itu, yang kita akan masuk ke dalam sangat, sangat tidak lama lagi. Jadi, ini adalah permintaan contoh. Ini adalah seperti saya melanjutkan keluar, ingin memperkenalkan diri. Inilah yang pelanggan atau apa yang pelayar web anda akan menghantar ke pelayan anda. Jadi, ini adalah permintaan mendapatkan, jadi meminta sesuatu dari pelayan. Dan itu, tentu saja, HTTP dan ia adalah versi 1.1. Jadi sisa ini di sini adalah apa yang kita panggil header, dan maklumat tambahan yang yang memberikan kita idea yang lebih baik dari apa yang kita benar-benar minta, atau maklumat yang kami ingin memberikan pelayan yang mungkin berkaitan. Jadi User-Agent memberikan lagi gambaran on-- contohnya, di sini, curl / 7.24.0 sebenarnya akan memberitahu pelayan yang kami gunakan Google Chrome sebagai pelayar kami. Jadi jika anda pernah mendengar tentang orang-orang yang bercakap tentang membuat aplikasi responsif untuk beberapa browser, ini adalah sesuatu yang mereka akan menggunakan kerana jika anda tidak tahu apa yang pelayar permintaan itu datang dari, Anda tidak boleh menyesuaikan data untuk itu. Jadi dalam kes ini, pengguna hanya memberikan jenis ini maklumat mengenal pasti tentang apa browser pengguna anda sedang menggunakan, OK? Jadi kita juga mempunyai tuan rumah, yang merupakan di mana kita benar-benar mahu pergi ke. Dalam hal ini, kami ingin pergi ke apple.com, membeli iPad baru yang sejuk atau sesuatu, mungkin comel lampu di bilik asrama kami. Dan nilai nama di akhir adalah hanya pengisi, hanya satu perkara yang umum untuk kalian untuk melihat. Ia tidak benar-benar sesuai dengan apa-apa di sini. Jadi, anda boleh mempunyai sebanyak atau sedikit yang anda mahu dalam setiap kes. Kebanyakan masa, ini adalah pilihan. Ia hanya bergantung kepada apa yang anda perlukan dari penyemak imbas, daripada pengguna anda untuk benar memberikan permintaan itu. Atau ia bergantung kepada apa yang pengguna anda sebenarnya mahu memberi sehingga pelayan. Jadi, anda mungkin mempunyai banyak, banyak nama-nama medan pengepala atau anda mungkin mempunyai pasangan. Seperti begitu banyak perkara Yang telah saya katakan dalam seksyen ini, ia benar-benar bergantung kepada konteks bagaimana anda menggunakan ini. Begitu juga yang masuk akal untuk semua orang? Ini hanyalah satu contoh permintaan, header, barang kecil. OK, jadi dengan itu, kami mempunyai beberapa jawapan. Sekali lagi, kita mempunyai kod status kita, protokol versi, dan kemudian nama lapangan dan bidang nilai seperti biasa. Jadi versi protokol kami dan kod status kita adalah 200. OK, yang bermaksud bahawa, ya, segala-galanya berjalan lancar. Berikut adalah apa yang anda inginkan. Jenis pelayan, kandungan type-- ia memberitahu kita, OK, anda akan mendapatkan beberapa teks HTML. Di sini adalah panjang dan inilah apa yang anda perlu lakukan dengan sambungan. OK, sehingga sekali lagi, bergantung pada data anda meminta, bergantung kepada apa yang pelayan ingin kembali kepadamu, Anda mungkin mempunyai lebih dari bidang ini nama, anda mungkin mempunyai kurang. Benar-benar konteks bergantung. Dan sejauh status ini kod di sini, sudah tentu, 200 tidak adalah satu-satunya anda boleh mempunyai, bukan? Kami mempunyai banyak kod status. Apakah ada yang ingat mana-mana lain-lain yang telah disebutkan dalam ceramah? Banyak dari mereka mulai dengan 4. PENONTON: 404. Allison Buchholtz-AU: 404, yang? PENONTON: File tidak dijumpai? Allison Buchholtz-AU: Fail tidak dijumpai. Tepat. Jadi bagaimana pula dengan 403? PENONTON: Larangan. Allison Buchholtz-AU: Larangan. Jadi, apa yang anda berfikir artinya dengan chmods? PENONTON: Ini bermakna bahawa anda tidak mempunyai kebenaran untuk membacanya. Allison Buchholtz-AU: Tepat sekali. Dalam beberapa cara, anda tidak perlu izin untuk mengaksesnya, kan? Jadi 404, 403. Ada yang benar-benar lucu salah satu yang kita selalu memperkenalkan setiap tahun yang Seharusnya aku diletakkan di sini, seperti 413, yang saya teko. Anda boleh google ini. Ia agak melucukan seperti, iaitu kod 413 dan itu saya teko. Yang saya tidak tahu mengapa anda akan merasa perlu bahawa di internet, tetapi saya menyimpang. PENONTON: Mungkin anda seorang periuk teh. Allison Buchholtz-AU: Mungkin server adalah periuk teh. Siapa yang tahu? Baiklah, jadi kita hendak beralih ke pengekodan yang nyata. Saya rasa seperti kalian akan keluar dari sini cukup cepat. PENONTON: Mengapa ia mengatakan "Pelayan: dua kali? Allison Buchholtz-AU: Hm? Server dua kali? Itu adalah soalan yang baik. Saya tidak pasti. Aku akan mencari tahu dan Saya akan email anda semua. OK, apa-apa soalan yang lain dari itu? Baik? Sejuk. HTML dan CSS, dan sekarang kita sampai ke semua bahagian-bahagian yang menyeronokkan. Jadi seperti yang saya sebutkan sebelum ini, HTML mungkin salah satu daripada perkara-perkara yang kalian yang paling akrab dengan. Jadi kita mempunyai HyperText Markup Language. Cara yang terbaik untuk belajar this-- saya tidak mempunyai slaid yang disediakan atau apa-apa untuk kalian dengan HTML. Ia benar-benar belajar sintaks. Dan jika anda berada di MySpace hari, anda akan mempunyai ini ke bawah. Jadi benar-benar, perkara yang paling besar adalah hanya untuk berlatih dan percobaan. Salah satu sumber yang besar saya akan sangat mengesyorkan menggunakan adalah W3Schools. Jadi, W, 3, dan kemudian Sekolah. Mereka mempunyai banyak sumber HTML, CSS, dan mereka benar-benar mempunyai semacam skrin berpecah perkara di mana mereka akan memberikan anda kod contoh. Anda boleh bermain-main dengan itu, mengubahnya, dan tekan Update, dan ia akan menunjukkan kepada anda apa yang ia sebenarnya ke laman web. Jadi saya sangat akan mengesyorkan menggunakan itu. Ia agak sejuk. Anda tidak akan mendapatkan kesalahan seg di sini bila ada sesuatu yang salah. Jika anda berjaya mendapatkan kesalahan seg dengan HTML, jangan beritahu saya kerana saya akan tertarik sebenar. Tetapi ia benar-benar sejuk kerana Anda boleh mengubah keadaan, Anda dapat melihat mereka dikemaskini secara langsung. Dan saya fikir anda akan mendapat banyak pemahaman yang lebih intuitif HTML jika anda benar-benar hanya menghabiskan masa bereksperimen dengannya. Jadi sebab itu saya berkata, amalan dan eksperimen. Google, mulai sekarang keluar, mungkin akan salah satu daripada sumber terbaik dan rakan-rakan anda. Atau Bing-- saya bekerja di Microsoft, jadi mungkin saya tidak mengatakan Bing. Tetapi apa-apa cukup banyak hanya akan menjadi sintaks, begitu memahami apa yang tag, understanding-- sekurang-kurangnya dengan CSS-- bagaimana untuk menukar sifat-sifat tertentu. Ia akan menjadi super berguna. Jadi, walaupun kita tidak mempunyai apa-apa perkara yang bersedia, kami mempunyai beberapa jenis amalan terbaik yang kami mahu anda semua untuk mencuba dan mematuhi oleh- atau lebih tepat, anda perlu mematuhi sehingga diberitahu kelak. Jadi menutup semua tag anda. Mudah-mudahan semua orang has-- anda tahu apa, jika ini tidak masuk akal pada masa ini, Saya berjanji ia akan masuk akal ketika kita sedang pengekodan atas halaman. Tetapi menutup semua tag anda. Jadi jika anda pernah mempunyai beberapa kepala itu kurungan, H1, braket, memastikan bahawa setiap kali anda selesai dengan itu, Anda menutup kepala yang. Mengesahkan halaman anda dengan W3 Validator. Jika anda tidak menutup tag anda, Anda boleh mendapatkan perilaku yang tidak diharapkan. Itu akan mengatakan bahawa laman anda adalah tidak sah jika anda menjalankannya melalui validator ini. Oleh itu, apabila di doubt-- dan terutama pada minggu ini dan minggu depan pset-- dengan cara yang sama yang kita doakan anda menggunakan memeriksa 50 dan gaya 50, Anda boleh memikirkan ini sebagai salah satu cek anda, OK? Jadi, jika ia tidak lulus W3 Validator. Itu adalah sesuatu yang kita akan berlabuh pada anda. Atau saya memberitahu anda tepat sekarang, saya akan berlabuh pada anda. Jadi, pastikan ia mengesahkan. Ia tidak sukar. Anda hanya tampal kod anda dan ia akan mengatakan sama ada kerja yang baik atau kau hilang sesuatu dalam cara yang sama gaya yang 50 memberitahu anda mana anda hendak pergi bermain-main ke atas. Dan kemudian satu hal yang anda mahu untuk memisahkan markup anda, yang semua HTML yang atau teks anda, dan gaya anda. Oleh itu, kita akan melakukan contoh itu selepas ini. Jadi HTML dan CSS harus terpisah. Dan kita akan bercakap tentang MVC, iaitu Model View Controller, minggu depan. Kalian harus mungkin belajar tentang bahawa dalam syarahan besok jika anda mempunyai yang telah dipelajari hari ini. Dan ia hanya jenis paradigma yang kita cenderung untuk digunakan saat membuat web halaman untuk memisahkan perkara-perkara. Anda boleh berfikir dengan cara yang sama bahawa kita cenderung untuk fungsi yang terpisah di C di mana kita hash untuk mencari sesuatu. Ia hanya satu cara untuk menjadikan kehidupan anda lebih mudah. Ia memisahkan keluar sifat-sifat atau kod yang Anda akan menggunakan lagi dan lagi, tetapi dengan cara ini, ia semacam dari menyimpan bagus dan rapi. Dan jika anda mahu untuk menukar satu perkara, anda mengubahnya sekali dan ia berubah-tempat lain. Jadi itu lebih untuk anda kemudahan dan fleksibiliti. Jadi dengan CSS, itu sangat mirip ke HTML, tetapi bukan tanda yang saya sebutkan tadi, kita menggunakan apa yang disebut pemilih. Dan mereka pada dasarnya hanya jenis dari mengaitkan tag tertentu dalam HTML dengan sifat-sifat yang berbeza. Dan apabila saya mengatakan sifat-sifat, maksud saya hal-hal seperti warna font, gaya fon, warna latar belakang, warna teks anda. Orang-orang macam hal. Seperti jika ia berpusat, jika itu ke sebelah kanan, jika itu inverted-- semua perkara-perkara yang sejuk. Apa-apa perkara yang gaya yang anda lakukan untuk teks anda, ini adalah apa yang saya maksudkan dengan sifat-sifat. Dan kemudian dua perkara utama yang perlu tahu ialah selectors-- dua daripada factors-- utama adalah ID, yang unik. Anda hanya boleh menggunakannya untuk satu perkara. Jika tidak, ia akan berteriak pada Anda. Dan ketika kita mendefinisikannya dalam fail CSS, ia akan menjadi ID hash dan kemudian apa ciri-ciri yang kita mahu. Saya berjanji kita akan melalui satu contoh. Ini akan masuk akal lebih banyak. Kelas boleh merujuk kepada beberapa blok. Jadi, anda boleh mempunyai anda perenggan pertama dan ketiga mempunyai jenis yang sama dari sifat-sifat jika Anda mengaitkan mereka dengan kelas yang sama. Dan ketika kita mendefinisikan mereka dalam CSS, kita melakukan kelas titik, dengan kelas menjadi apa sahaja Anda mahu ia dikenali. Jadi saya tahu ini adalah hak sekarang sangat abstrak. Itulah sebabnya kita akan kod. Aku tahu kalian suka itu, dan anda semua adalah akan membantu saya kerana ini adalah laman web anda. Ini adalah laman web seksyen kami, orang-orang. Jadi ada apa-apa soalan sebelum saya mematikan PowerPoint, atau apa-apa anda mahu saya untuk skrol kembali sebelum kita mula coding? PENONTON: Apabila kamu berkata pertandingan tag, maksudmu pemilih atau tag? Allison Buchholtz-AU: Anda boleh menganggap mereka sebagai perkara yang sama. Ini kata-kata hanya berbeda. Maksud saya, seperti pemilih. Tetapi pemilih juga peta ke tag. Jadi, anda boleh menganggap mereka sebagai berkesan perkara yang sama. Saya berjanji ia akan membuat pengertian yang lebih apabila kita kode. Apa pun dari PowerPoint atau mana-mana soalan sekarang sebelum kita benar-benar membuat halaman seksyen kita? Semua orang bersedia? Sejuk. Jadi saya mempunyai satu bermula. Biar saya meningkatkan fon bagi kalian. OK, jadi sekarang, kita hanya mempunyai tulang-tulang laman web di sini. Kami mempunyai beberapa HTML. Kami mempunyai beberapa header, yang kita lihat di sini sebagai contoh halaman web. Beberapa tajuk, font beberapa. Ini adalah tag, OK? Oleh itu, apabila saya maksudkan menutup tag anda, kita lihat di sini kepala pendakap ini adalah pembuka tag, dan golongan ini / Head adalah menutupnya, OK? Jadi, anda boleh menganggap ini sebagai kawat gigi anda jika keadaan anda atau anda untuk gelung. Jika anda mempunyai satu di awal, Anda ingin satu di akhir. Ia akan tetap bekerja pada kebanyakan masa jika anda tidak mempunyai tag tertutup, tetapi amalan yang terbaik ialah menutup tag anda. Jadi dalam hal ini, mari kita mengubah hal ini. Kita akan mempunyai seksyen tujuh. "Seksyen Web." Jadi, saya hanya akan perubahan ini. Dan jika kita pergi ke sini dan kami Harus reload-- menyimpan dan reload-- kita dapati bahawa di sini ia berubah, kan? Sejuk. Jadi ini mengubah tajuk. Ini adalah apa pun pada tab anda. Jadi ini adalah jenis mencari jenis membosankan. Saya tidak tahu tentang lelaki. Saya rasa kita ingin sesuatu yang lain di sini. Jadi apa yang boleh kita lakukan adalah kepala hanya ada di sana. Mari kita buat beberapa jenis badan. Oleh itu, kita mempunyai beberapa badan di sini. Aku sentiasa melakukan terbuka dan menutup tag saya untuk memulakan, dengan cara yang sama seperti saya penyokong gigi. Ah. Tunggu, apa? PENONTON: [didengar]. Allison Buchholtz-AU: Ah. Kalian punya aku. Pekerjaan yang baik. Bintang emas. OK, jadi kita mempunyai beberapa badan di sini. Dan sekarang mari kita mula menambah beberapa teks. Jadi, anda mempunyai pasangan yang berbeza pilihan untuk menambahkan teks. Kami mempunyai hal-hal seperti header. Kami mempunyai hanya teks biasa. Jadi mari kita mulakan dengan tandukan. Sebenarnya, jika anda semua ingin untuk menarik HTML W3 School, Anda jenis boleh melihat-lihat dan jika ada apa-apa terutama yang anda mahu untuk mencuba dengan laman web ini, kita boleh melakukannya. Jadi dalam hal ini, mari kita hanya melakukan beberapa h1. Jadi h1 adalah seperti header yang tertinggi. Ia akan memberikan sesuatu yang sangat besar dan berani. Dan dalam kes ini, apa yang kita mahu untuk teks yang pertama pada halaman web kami? Apa-apa. Kalian akan membuat ini. Saya hanya akan menaip. PENONTON: Selamat datang. Allison Buchholtz-AU: Selamat datang. OK, jadi jika kita simpan dan kita kembali, kami mempunyai sambutan yang besar besar. Jadi, supaya anda boleh melihat perbedaan, mari kita buat sesuatu di H6. Apa yang kita mahu di sini? Betul? OK, jadi hanya supaya anda boleh melihat perbezaan. Ya, Sublime. Jadi, jika anda perhatikan, h1, sangat, sangat besar. h6, seperti berani, tetapi jauh lebih kecil, dan anda mempunyai segala sesuatu di antara. Jadi, anda boleh mempunyai h2, h3, h4. Dan ini hanya header, jadi jika anda cuba untuk membuat halaman web yang mempunyai bahagian yang berbeza, mungkin anda ingin menggunakan header di sana di suatu tempat. Sejuk. Oleh itu, kita akan menambahkan lagi perkara dalam badan kita. Aku melihat bahwa ia akan berbuat baik yang sejuk jika kita mempunyai gambar. Saya rasa seperti semua orang boleh menggunakan mungkin kelinci gambar lucu benar tentang sekarang, jadi kita akan mencari gambar kelinci pertama. Saya tidak tahu jika anda mempunyai sebarang pilihan mana yang kita mahu. Adakah anda mempunyai apa-apa pilihan? Yang ini? Down. OK. Yang satu itu. Pilihan yang baik. OK, jadi kita akan melihat gambar kita. Lihat itu. Melihat bahawa perkara manis. Bagaimana anda boleh menjadi sedih pada hari Isnin dengan ini? Oleh itu, kita hanya akan untuk menyalin URL imej. Dan apa yang kami mahu lakukan adalah, anggap saja mengatakan bahawa kita mempunyai beberapa p perenggan. Kita akan berkata "Lihatlah melihat kelinci lucu. d'awwww. " Saya suka kelinci saya. Saya mempunyai arnab di rumah. Aku rindu bunny saya. Jadi apa yang kita akan do-- Saya tidak tahu jika anda semua ingin to google this-- tetapi dengan HTML, bagaimana mungkin anda termasuk imej? Secara harfiah, jika anda google "Termasuk gambar HTML," mengapa tidak kalian beritahu saya apa tag ini seharusnya? PENONTON: img source-- Allison Buchholtz-AU: img source-- PENONTON: --equals-- Allison Buchholtz-AU: --equals-- PENONTON: --quote-- yeah. Allison Buchholtz-AU: Perfect. Lovely. Lihat, penjanaan MySpace, kan? PENONTON: Neopets. Allison Buchholtz-AU: Neopets. Oh, OK. Wow. Sudah gila. OK. Jadi pastikan saya mendapat hak ini. Sejuk. Jadi ini harus berada di sini. Dan kemudian jika kita kembali, kami telah kami kelinci di muka Bukankah ini comel? Ini begitu lucu. Anda pilih yang hebat, besar foto. Aku menggali itu. OK, jadi kita harus bunny comel ini sekarang. Kami mampu untuk menambahkan gambar, begitu saja. Jadi, pada asasnya jika ada apa-apa imej Anda mahu untuk menambah ke laman web anda, Anda boleh menambah ia hanya seperti ini. Satu lagi perkara yang akan menjadi jika Anda telah imej yang disimpan di dalam folder yang sama dengan gambar ini, anda boleh hanya menulis apa sahaja nama satu imej yang adalah bukan memiliki pautan web. Ia masih lagi dalam tanda kutip. Ia hanya akan menjadi seperti jika kita menamakan this-- jika gambar ini telah diselamatkan dalam folder dengan fail HTML ini yang saya mengedit dan dipanggil bunny.jpg. Kita juga boleh melakukannya dan ia akan muncul. Namun, saya tidak mempunyai ini disimpan dalam file dan saya mahu menyimpan kelinci, jadi kita akan terus link. PENONTON: Apakah rabbit.org? Allison Buchholtz-AU: rabbit.org. Ini appropriate-- sebuah melihat, anda boleh menggunakannya. Adopsi. bunny.jpg. Saya mahu menggunakan kelinci ini. Oh, Tuhan, ia begitu comel. OK, jadi kami telah menambah header. Kami telah menambah gambar. Jelas sekali, kami telah menambah beberapa teks di sini, kan? Jika kita mahu menambah lain teks, kita akan pergi seperti ini. Jadi, ini adalah ayat lain. Dan kita mengatakan "ini adalah ayat yang lain." Juga, saya ejaan mengerikan, jadi saya mungkin salah ejaan hal. Untuk diketahui. Jadi kita mempunyai satu lagi ayat di sini, kan? Jadi mungkin anda mahu melakukan sesuatu sedikit lebih menarik daripada hanya memiliki semua teks anda, seperti hak sejajar. Mungkin anda ingin pusat teks anda, OK? Jadi, jika seseorang ingin menggunakan mereka komputer berguna di hadapan anda dan beritahu saya bagaimana anda akan pusat teks ini, PENONTON: p align. Allison Buchholtz-AU: Jadi p align sama dengan "pusat." Dia membunuh itu, orang-orang. Kalian perlu meningkatkan. Dan kita mempunyai "ini berpusat." Dan sekarang kami telah sesuatu berpusat. Dengan cara yang sama, jika anda menginginkannya rata kiri, Anda boleh melakukan sama dengan align kiri, align bermakna kebenaran. Benar-benar terpulang kepada anda. Jika saya lakukan di sini, maka ini should-- kini ia tepat sejajar. PENONTON: Allison? Dengan sumber gambar, mengapa tidak ada dekat sumber img? Allison Buchholtz-AU: Maaf. Yang satu ini harus Sekarang ada kau baik. Sekarang kita baik. PENONTON: Apa kau tidak punya untuk menutupnya di sana, atau tidak? Allison Buchholtz-AU: Nah, agar img sumber, yang satu ini hanya-- dengan imej, ia hanya dilihat sebagai satu elemen, manakala jika anda melihat untuk sisa ini, kita mempunyai beberapa tag maka maklumat yang berkaitan dengan dan kemudian tag penutup. Tetapi dengan gambar, semuanya hanya semacam serba lengkap. Sejuk. Jadi kalian tahu bagaimana untuk membuat header, anda tahu bagaimana untuk memasukkan teks, Anda tahu bagaimana untuk meletakkan imej sekarang, anda boleh menyelaraskan perkara. Satu lagi perkara yang anda mungkin ingin dapat melakukan ialah untuk mewujudkan suatu daftar menurut CS-- kami seperti hendak pergi ke Serangga minggu depan. Hal-hal yang kita biasanya mengajar minggu ini akan sangat baik dengan Serangga minggu depan, jadi kita jenis pencampuran, bertindih perkara di sini. Tetapi ia akan menjadi berguna untuk minggu depan. Jadi, jika kita mahu untuk membuat beberapa senarai, bagaimana kita boleh berbuat demikian? Anda tidak boleh menjawab kali ini. Orang lain harus. Ia tidak keras, lelaki, janji. Google "senarai tidak tertib HTML." Apa itu? PENONTON: [didengar]. Allison Buchholtz-AU: Benar. Jadi kita mahu yang diarahkan atau yang tidak tertib? Mari kita lakukan yang tidak tertib. Oleh itu, kita mempunyai beberapa ul, yang singkatan Unordered List. Dan apa yang kita ada untuk setiap elemen? Adakah ia perlu tag sendiri? Bolehkah kita hanya mula menulis sesuatu? PENONTON: li. Allison Buchholtz-AU: li. Jadi apa senarai kami akan menjadi? Apa yang kita mahu di sini? Kami hanya melakukan nama. Hanya melakukan Yakub. Makanan arnab: PENONTON. Allison Buchholtz-AU: Makanan Arnab. OK Saya menyukainya. Makanan arnab. OK, jadi kita harus wortel. Saya suka tema arnab ini. Aku menggali banyak. PENONTON: Sebenarnya, saya fikir bahwa Yakub akan menjadi legit. Allison Buchholtz-AU: Yakub? Yakub adalah makanan arnab. Jika anda melihat Jacob foto dari waktu pejabat, Anda mungkin berfikir dia mendapat diserang oleh arnab pembunuh. PENONTON: Saya arnab sekarang. Saya mempunyai arnab pembunuh sekarang. Allison Buchholtz-AU: Adakah anda bergurau saya? PENONTON: Aku akan membawanya bagian berikutnya. Saya memilikinya. Allison Buchholtz-AU: Ini adalah tidak masuk akal. Pula. PENONTON: [didengar] PENONTON: Ya, saya pengawas mempunyai arnab juga. Allison Buchholtz-AU: Saya ingin kelinci. OK, sesiapa yang datang membawa kelinci nyata untuk bahagian seterusnya, jumlah mata brownies. PENONTON: [didengar] PENONTON: Oh, ia bukan sebenar. Ini arnab boneka. Allison Buchholtz-AU: Oh ya, kita boleh menutup ini. Kelihatan rad. PENONTON: Adakah ia benar-benar penting? Allison Buchholtz-AU: Ia tidak. Dengan kebanyakan perkara-perkara ini, Anda tidak menutup tag, 99% daripada apa-apa masa yang buruk yang berlaku berlaku, tetapi ia adalah gaya yang baik juga. Jadi Yakub. Dan kami mempunyai salad. PENONTON: Untuk pautan, ia benar-benar penting. Allison Buchholtz-AU: Hm? PENONTON: Untuk hyperlink. Allison Buchholtz-AU: Untuk hyperlink. Ya, hyperlink memerlukannya. OK, jadi mari kita lihat di sini. Dan kita mempunyai penutupan senarai kami. Dan kita lihat itu. Kami telah all-- Yakub, di sana. Makanan arnab. Mengingatkan saya tentang Bunnicula. PENONTON: [didengar] Allison Buchholtz-AU: Saya membawa kembali rujukan sekolah lama semua hari ini, tidak saya? Hanya semua rujukan sekolah lama. Sepatutnya membawa seperti Gogurts atau sesuatu untuk makanan ringan. PENONTON: Atau Gushers. Allison Buchholtz-AU: Oh. OK. Saya akan melihat apakah saya boleh menjejaki turun Gushers untuk minggu depan. Saya rasa saya boleh melakukan itu. Saya fikir kita mungkin mempunyai beberapa di pejabat. OK, jadi kami telah membahas banyak berbeza perkara yang boleh anda lakukan dengan HTML, kan? Dan seperti yang anda mungkin dapat melihat, itu nothing-- mudah-mudahan, tidak terlalu intim-- jika ia adalah, saya tidak bermaksud memperkecilkan sesiapa. Jika anda mengalami masalah, sila datang bercakap dengan saya. Tetapi kebanyakan ia hanya melihat sintaks, kan? Jika anda ingin senarai tidak tertib, jika anda ingin semacam senarai, jika anda mahu untuk menyelaraskan sesuatu atau format sesuatu, itu semua tentang hanya jenis melihat ke atas Sintaks untuk HTML, kan? Dan satu hal yang cukup sejuk sebenarnya adalah jika anda pergi kepada- mari kita lihat, apa website yang bagus yang kita suka? Ada yang punya laman web kegemaran yang OK untuk membuka talian? Anda tahu apa, mari kita hanya melakukan CS50. Itulah yang baik dan aman, bukan? OK, jadi CS50 sini. Oh, lihat, ada bahagian yang sekarang. Jika anda suka cara ia kelihatan. PENONTON: [didengar]. Allison Buchholtz-AU: Kami tidak akan melakukan bahagian meta, guys. Ini tidak berlaku. Ia akan menjadi sejuk, tetapi kita tidak akan melakukannya. Jadi apa yang anda boleh dilakukan jika anda suka cara kerja-kerja ini adalah anda boleh sentiasa betul klik pada mana-mana laman web yang anda suka dan anda boleh melakukannya View Page Source. Ia akan membawa semua HTML. Dan ini sebenarnya adalah benar-benar baik cara untuk gaya laman web anda sendiri. Pergi ke laman web yang anda benar-benar suka dan melihat HTML dan memikirkan bagaimana mereka melakukannya. Dan benar-benar, selama kerana anda memetik sesuatu, selagi anda tidak hanya mencuri dari rakyat, tidak apa-apa. Khusus untuk CS50 [? membiayai?], kami agak mengharapkan anda untuk mendapatkan inspirasi dari laman web lain. Jadi jangan ragu. Lihat melalui laman web yang anda berfikir benar-benar cantik dan memikirkan bagaimana mereka menggunakan HTML dan CSS untuk melakukan perkara-perkara ini. Jadi seperti yang anda lihat di sini, tidak jelas seperti link dan kami mempunyai kelas di sini. Kami mempunyai link di sini. Kami mempunyai senarai. Kita mungkin mempunyai beberapa gambar di sini. Kami telah mendapat beberapa gaya yang menarik di sini. Ini adalah perkara yang akan datang kita akan lakukan. Jadi gaya, setiap kali anda melihat ini kurungan gaya, itu CSS pada dasarnya. Ben, adakah anda mempunyai soalan? PENONTON: Apakah div? Allison Buchholtz-AU: div hanya a-- apa div? PENONTON: Bahagian. Allison Buchholtz-AU: Bahagian. Ya, itu hanya seperti memisahkan unsur-unsur yang berbeza. OK, jadi di sini adalah apa yang kita akan masuk ke depan. Jadi ini tidak boleh menjadi yang terbaik gaya kerana, jika anda notis kita mempunyai HTML dan kemudahan seperti di muka surat yang sama, dan kita benar-benar ingin memisahkan mereka, OK? Dan sebenarnya, biarlah saya membuka satu hak saya kerana hal ini seharusnya menjadi PDF, jadi kami mempunyai style.css. Jadi apa yang boleh kita lakukan di sini adalah ini adalah perkara-perkara yang sejuk seperti beberapa pudar dan kita boleh cuba melakukan hal itu, tetapi saya rasa seperti aku akan mengacaukan yang dengan cepat, jadi saya menggalakkan anda semua untuk pergi cuba yang pada anda sendiri, tetapi saya tidak akan melakukannya sekarang. Jadi jika anda semua, ingat, jika anda pernah memukul set masalah, sesuatu swoops dari samping. Ia mempunyai kaitan dengan pudar dan peralihan dan barang kecil. PENONTON: Dan itu semua CSS dan HTML? Allison Buchholtz-AU: Semua CSS dan HTML. Yeah. Jadi, anda boleh melakukan banyak benar-benar perkara yang sejuk dengan CSS dan HTML. Jadi dengan kami awesome Laman web kelinci di sini, kita akan melakukan sedikit sedikit gaya CSS dengannya. Jadi jika anda pernah mempunyai gaya lembaran, yang kita ada di sini, Anda hanya boleh memanggil style.css. Anda boleh memanggil ia apa sahaja yang anda mahu. Apa yang penting ialah bahawa kita akan rujukan dalam web.html kami di sini. Jadi apa yang kita akan lakukan adalah we-- jadi saya tidak melakukan kekacauan ini up-- kita akan menghubungkan kedua-dua fail bersama-sama. Jadi dalam way-- yang sama saya akan untuk menarik analogi kepada C di sini. Dengan cara yang sama bahawa jika anda mempunyai beberapa library-- dan kami mempunyai cs50.h-- pengkompil kami menghubungkan ia. Ini hanyalah sebuah eksplisit link di pihak kita. Jadi dengan cara yang sama yang kita lakukan hash termasuk beberapa fail, apa yang Saya akan menulis adalah hanya HTML / CSS sama dengan itu. Kami hanya berkata, OK, laman web ini akan menggunakan stylesheet ini, OK? Jadi kita mempunyai link rel sama dengan stylesheet. Dan kemudian kita mempunyai jenis, css. Dan kemudian href sama. OK. Jadi semua ini lakukan di sini ialah anda boleh menganggap ini sebagai perkara yang sama sebagai hash termasuk. Jelas sekali ia kelihatan lebih sedikit rumit, tetapi dalam semua kes, itu berkesan perkara yang sama. Jadi, ini adalah hanya beberapa pautan dari lembaran gaya, itu jenis text / css, dan nama itu adalah style.css. Apa yang penting untuk mengetahui adalah bahawa laman web bahawa saya bekerja dengan baik sekarang-- web.html dan style.css-- berada dalam folder yang sama. Kerana dalam folder yang berbeza, Anda perlu memberikan akar sebenar kepadanya atau laluan kepadanya. Tetapi dalam kes ini, kita menjaganya agar tetap super mudah dan ia akan berada di sini. Jadi jika kita melakukan itu, saya mempunyai beberapa hal yang sudah beratur di sini. Oleh itu, kita mempunyai beberapa badan, yang akan mempunyai warna latar belakang kita, yang sekarang ialah biru muda. Kita boleh mengubahnya jika kami mahu, tetapi jika saya ingat ini dengan betul, ia hanya perlu mengubahnya ke biru muda. Dan sekarang kita mempunyai latar belakang biru muda. Dan kita mempunyai di sini-boleh ada yang ingat mana yang ID hash atau kelas? PENONTON: ID. Allison Buchholtz-AU: ID. Sejuk. Jadi apa yang ingin kita lakukan adalah yang dari font ini atau yang- kita ingin "Lihatlah bunny comel "menjadi ungu? Saya rasa kita ingin hal itu menjadi ungu. Saya agak ke bawah dengan itu menjadi ungu. Jadi apa yang anda lakukan adalah anda lakukan ID equals-- dalam hal ini Saya berkata, apa yang, warna cantik di sini. Kami reload. Tiba-tiba, ia adalah ungu. OK, jadi dengan ID, ingat ia perlu menjadi unik, jadi saya tidak boleh menggunakan ID ini di tempat lain. Tetapi dengan kelas, seperti yang telah kita di sini dengan font yang cantik, Saya harus dapat menggunakan bahawa mana-mana sahaja saya mahu. Jadi mari kita buat satu ini di sini. Jadi kita boleh mengatakan kelas sama fon cantik. Dan jika kita melihat sekarang, kita mempunyai font cukup sejuk ini di sini. Jadi mungkin saya mahu lakukan kedua-duanya. OK, saya benar-benar tidak tahu jika ini adalah akan bekerja tetapi saya mahu mencubanya. Dan ini adalah bagaimana anda belajar CSS dan HTML. Kau seperti, anda tahu apa, saya mahu cuba ini. Saya tidak pasti jika ia akan bekerja. Mari kita lihat apakah ia bekerja. Dan lihat itu. Sekarang ia dalam ungu dan itu adalah font yang cantik. OK, jadi anda mempunyai semua ini perkara yang berbeza yang boleh anda lakukan. Adakah anda mempunyai soalan? PENONTON: Ya. Yah, hanya suka warna Anda menggunakan kata-kata. Apakah ada cara untuk melakukan warna dengan perenambelasan RGB? Allison Buchholtz-AU: Anda juga boleh melakukannya dengan heksadesimal, saya percaya. Yeah. Tapi itu jenis yang baik jika anda tidak mahu melihat mereka. Anda hanya boleh menjadi seperti, ungu atau biru. PENONTON: Mari kita berharap mereka tahu apa yang bermakna. Allison Buchholtz-AU: Benar. Jadi mari kita membuat membaca ini atau hijau kekuning-kuningan. Mengapa Anda pernah memilih minuman keras manis? Ini adalah warna yang menarik. OK, jadi jelas kita dapat melihat kita boleh mengubah keadaan tetapi kami mahu. Jika anda ingin create-- katakanlah kami ingin membuat kelas lain. Apa yang mungkin anda semua ingin berubah? Jika anda menarik W3Schools ' Dokumentasi CSS, Saya meninggalkan lantai untuk kalian. Kita boleh mencuba dan melakukan sesuatu yang sejuk dengan ini dalam beberapa minit terakhir. Kerana saya sudah semacam anda crash kursus banyak perkara yang sejuk yang boleh anda lakukan. Tetapi pada akhirnya, seperti yang saya katakan, jika anda hanya percubaan, anda akan belajar banyak. PENONTON: Adakah anda mencari font yang? Allison Buchholtz-AU: Ya, Saya melihat ke atas font. Jadi seperti benar-benar, saya pergi kepada- apa yang saya lakukan? Saya lakukan daftar font CSS, dan kemudian saya lakukan tumpukan fon, dan kemudian aku seperti, melihat, di sini semua font sejuk yang boleh anda lakukan. Dan ada satu ini, jadi Saya menyalin ke clipboard saya. Dan kemudian aku seperti, OK, sejuk, di sana kita pergi. Semua dilakukan. PENONTON: Jadi anda perlu memastikan CSS yang tahu apa font yang. Allison Buchholtz-AU: Ya. PENONTON: Apa yang ia katakan di akhir? Kursif? Allison Buchholtz-AU: Cursive. Yeah. PENONTON: Imej latar belakang. Allison Buchholtz-AU: Imej latar belakang. OK. Jadi, anda mahu untuk memberitahu saya bagaimana untuk melakukan ini. Saya meninggalkan ini kepada anda. Saya hanya menaip di sini sekarang. Roda adalah di tangan anda. PENONTON: OK Allison Buchholtz-AU: OK. Apa yang saya lakukan? PENONTON: Doing-- saya tahu apa yang datang selepas brace keriting. Allison Buchholtz-AU: OK. Jadi mungkin dalam tubuh, saya akan mengambil alih, kerana kami lakukan dengan imej latar belakang. PENONTON: Ya, mari kita lakukan itu. Allison Buchholtz-AU: OK. PENONTON: OK, jadi latar belakang usus besar, dan kemudian kita memerlukan alamat URL imej itu. Mungkin pseudo-kod yang buat masa ini, mungkin. Allison Buchholtz-AU: Apa Anda ingin saya supaya- PENONTON: Saya berfikir seperti GIF. Allison Buchholtz-AU: GIF A? Itu akan menjadi menarik. OK, apa yang saya Googling di sini? PENONTON: Tidak, itu pilihan anda. Allison Buchholtz-AU: Mengapa tidak we-- jika itu kelinci, Saya rasa seperti kita harus mempunyai rumput berumput yang bagus atau sesuatu. PENONTON: Meadow. Padang rumput. Allison Buchholtz-AU: padang rumput A? OK. PENONTON: Atau Rachel Maddow. Allison Buchholtz-AU: Yang ini kelihatan cantik. Oh, itu kecil, walaupun. Kita perlu gambar saiz yang baik. Mari kita lihat. Oh, lihat. Itu merupakan padang rumput yang cantik. Anda tahu apa, saya seperti ini. Mari kita menyalin satu ini. PENONTON: OK, jadi saya rasa ia URL, kurungan terbuka. Allison Buchholtz-AU: OK, URL. PENONTON: Kemudian alamat. Allison Buchholtz-AU: OK. Adakah itu yang kita perlukan? PENONTON: Tutup kurungan koma, dan kemudian ruang, latar belakang sempang lampiran kolon tetap, dan pendakap kerinting. Allison Buchholtz-AU: OK. Mari kita lihat apakah yang bekerja. Ia akan menjadi cukup keren jika itu terjadi. Saya teruja sebenar di sini. Ia tidak berjaya. Saya tertanya-tanya mengapa. PENONTON: Mungkin URL harus dalam kutipan. Allison Buchholtz-AU: Mungkin. Dan ini adalah bagaimana kita belajar, guys. PENONTON: Bolehkah kita mempunyai latar belakang warna dan imej latar belakang? PENONTON: No. Salah satu menggantikan yang lain. Allison Buchholtz-AU: Saya tak tahu. Mari kita lihat. Mari kita check it out dan melihat. PENONTON: Oh, mungkin, ya. [Interposing SUARA] Allison Buchholtz-AU: OK, ini adalah obviously-- saya [didengar] di sini. Jadi OK. PENONTON: alat Latar Belakang. Allison Buchholtz-AU: Ah. PENONTON: OK, saya tidak tahu. Allison Buchholtz-AU: Ia kelihatan seperti ia harus bekerja. Adakah anda yakin itu usus selepas URL? PENONTON: Tidak, itu titik koma. Allison Buchholtz-AU: Ini titik koma. PENONTON: Adakah saya katakan usus besar? Allison Buchholtz-AU: Anda mengatakan titik dua. PENONTON: Oh tidak. Allison Buchholtz-AU: Terdapat anda pergi. PENONTON: Oh, tunggu, sekarang kita tidak boleh membaca teks. Allison Buchholtz-AU: Sekarang Anda tidak boleh membaca teks, tetapi kita mempunyai imej latar belakang. Mmhmm? PENONTON: Adakah HTML menyokong kandungan dinamik? Seperti, anda boleh menukar saiz gambar yang bergantung kepada saiz tingkap, atau ialah CSS-- yang Allison Buchholtz-AU: Jadi CSS mempunyai untuk melakukan itu. Oleh itu, jika kalian berminat dalam belajar CSS maju, Saya bersama-mengajar seminar mengenai CSS pada 7. Dan saya berjanji ia akan jauh lebih mendalam dan melakukan lebih banyak lagi sejuk perkara di bahagian ini. Dan bersama-guru saya adalah seperti jumlah akhir hadapan web master Dev. Jadi ia akan menjadi cukup keren jika anda mahu untuk belajar tentang semua perkara-perkara yang sejuk CSS yang boleh dilakukan. Tetapi apa yang kita ada di sini dengan lampiran latar belakang fixed-- sehingga beberapa Size-- tetap tetapi anda sebenarnya boleh dynamically-- jika anda pernah lihat halaman web, sebagai laman web yang paling baik yang akan dilakukan, apabila anda melaraskan saiz pelayar anda, ia akan menyesuaikan latar belakang atau berapa banyak menunjukkan atau memformat perkara, bukan? Jadi itulah yang kita panggil kedudukan relatif. Dan CSS sebenarnya boleh merebut seberapa besar anda lebar browser atau berapa tinggi itu adalah, dan anda boleh meletakkan perkara-perkara sesuai dengan ukuran yang relatif berbanding ukuran mutlak. Dan itu jelas lebih maju CSS, tetapi itu adalah sesuatu yang boleh anda lakukan. Jika anda mahu belajar lanjut, datang ke seminar saya. Jadi itu adalah sesuatu yang boleh anda lakukan. Dan CSS boleh sebenarnya do-- CSS dan JavaScript, yang kita akan masuk ke depan week-- boleh membenarkan anda untuk menukar dinamik halaman tanpa harus kembali mereka sepanjang masa. Dan anda boleh melakukan beberapa hal yang cukup sejuk. Jadi apakah ada perkara lain yang kalian mungkin ingin melakukan atau apa sahaja yang anda ingin menjelajahi? Kami mempunyai 10 minit kiri. Kita juga boleh pulang awal, tetapi jika Anda ingin melakukan hal-hal lagi web, kita boleh, tetapi saya tidak akan memaksa anda. Tetapi kita boleh juga hanya makan gula-gula. PENONTON: Serlahkan teks putih supaya anda boleh membacanya. Allison Buchholtz-AU: OK. Jadi dalam hal ini, kami ingin beberapa hal. PENONTON: Haruskah kita melakukannya di badan sehingga berlaku untuk seluruh halaman? Allison Buchholtz-AU: Ya, kami benar-benar dapat. Itu idea yang baik. Oleh itu, kita have-- adakah anda tahu apa yang kita perlu? Saya tidak tahu apakah yang boleh kita lakukan warna teks. Saya akan cuba membuat kelas lain di sini. PENONTON: Bagaimana anda mendapat begitu bahawa ia mempunyai cadangan? Allison Buchholtz-AU: Jadi jika kalian berminat, ini adalah teks lain editor dipanggil Sublime. Anda harus dapat memasangnya pada alat anda. Kadang-kadang ia menjadi sedikit rumit. Jika anda ingin membantu dengan itu, Aku super gembira untuk membantu anda dengan itu, kerana gedit besar dan ia menggerunkan kerana anda boleh compile di bahagian bawah, tetapi saya benar-benar seperti Sublime kerana ia cukup dan ia melakukan perkara-perkara seperti auto-lengkap. Jadi, anda pasti dapat merasa bebas untuk beritahu saya jika anda mahu melakukan itu. Jika anda hanya google "Sublime teks, "ia biasanya mempunyai arahan mengenai cara untuk memasang pada berbagai sistem operasi. Ia adalah benar-benar sejuk, saya berfikir, pada pendapat saya. Jadi hal. Saya rasa saya hanya boleh melakukan text-- atau kita hanya boleh melakukan warna "putih." Ada. Jadi apa yang saya lakukan di sini adalah saya yang tidak berubah semua teks. Tetapi p di sini hanyalah sebuah tag yang kita ada, kan? Tag ayat. Jadi saya hanya mencipta elemen CSS yang berkata, OK, apa-apa dengan tag ini p, membuat warna putih. Jadi, jika anda perhatikan, ia dibuat putih dan putih ini. Ia tidak membuat senarai putih kerana ia tidak berkaitan dengan itu. Anda boleh pergi melalui dan anda boleh say-- PENONTON: Apakah warna latar belakang. Allison Buchholtz-AU: Warna latar belakang? PENONTON: Latar belakang paip di warna di mana anda meletakkan p tag. Allison Buchholtz-AU: OK. Anda inginkan kulit putih? PENONTON: Mmhmm. Allison Buchholtz-AU: OK. Terdapat anda pergi. PENONTON: Itu yang pelik. Allison Buchholtz-AU: Cukup sejuk, kan? Jadi jika anda hanya main-main, Anda akan belajar banyak. Dan ia boleh menjadi cukup sejuk. Saya rasa ia pasti lebih menyenangkan daripada kadang-kadang kerana anda tidak perlu menunggu untuk program anda untuk menyusun. Anda hanya boleh memukul Muat semula dan anda seperti, oh, lihat, ia bekerja, atau oh, saya mungkin kehilangan sesuatu. Dan itu adalah sesuatu yang benar-benar sejuk tentang bahagian ini seterusnya kelas, adalah ia pasti, saya fikir, lebih mudah untuk memeriksa seperti yang anda pergi bersama-sama dengan cara yang berbanding harus menulis program-program lama dan berharap dan berdoa bahawa ia berfungsi di akhir. Maka dengan itu, saya fikir kalian semua kelihatan baik. Jika anda mempunyai sebarang soalan, seperti biasa, datang bercakap dengan saya, datang beritahu saya. Saya akan tepat di luar selama 15 minit akan datang jika anda mahu untuk berbual mengenai apa-apa dan segala-galanya. Jadi saya harap anda guys-- semoga berjaya dengan Serangga ini. Tarikh akhir ialah Jumaat di tengah hari kerana ia telah dibebaskan lewat. Jadi saya mungkin akan melihat banyak dari kalian pada hari Khamis, tapi mudah-mudahan tidak. Mungkin anda akan mempunyai ia dilakukan pada masa itu. Saya akan super bangga. Tetapi jika tidak, saya akan melihat anda hari ini. Anda juga boleh menggunakan tarikh akhir, yang meluas hingga Sabtu pada siang hari. Tetapi saya don't-- ya? PENONTON: Halloween. Allison Buchholtz-AU: Ia adalah Halloween, a, dan b, Saya tidak fikir akan ada menjadi waktu pejabat pada hari Jumaat. Jadi benar-benar cuba menyelesaikannya dengan Jumaat supaya kita semua dapat merayakan Hujung minggu keramat. Baiklah, saya akan melihat kalian minggu depan.