[MUSIC PLAYING] Allison Buchholtz-AU: Baiklah, semua orang. Selamat datang kembali ke bagian. Jadi agenda kami untuk hari ini akan lebih banyak lagi web barang dev. Saya tidak tahu berapa banyak dari Anda telah melihat psets Anda sejak dirilis awal pagi ini. Saya akan berapa banyak orang telah membaca spec, tapi melihat bagaimana Anda telah memiliki semua dari, seperti, tujuh jam untuk melihat itu dan itu hari Senin dan Anda mungkin sudah kelas, Aku akan menganggap bahwa sebagian besar dari Anda belum. Jika Anda memiliki, pujian ekstra. Anda pada dasarnya membantu menerapkan web sederhana server C, yang merupakan pset merek baru, sehingga kalian bisa menjadi babi Guinea. Ini akan menjadi menyenangkan, minggu liar, tapi saya pikir itu akan sangat menyenangkan dan itu akan menjadi benar-benar pengalaman yang baik sebenarnya. Jadi untuk mempersiapkan Anda untuk bahwa, dalam bagian hari ini, kita akan pergi chmod, TCP / IP, dan maka sedikit HTML dan CSS. 

Pada akhirnya, kita akan benar-benar kode sebuah halaman web sederhana bersama-sama untuk membantu kalian mendapatkan semacam lebih akrab dengan itu. Dan kemudian jika Anda belum dijemput kuis Anda, mereka berada di depan, tapi aku cukup yakin semua orang di sini memiliki kuis mereka. Dan juga pada catatan itu, solusi yang belum bangun, tetapi segera setelah kami finish-- suka, beberapa orang lalu mengambil quizzes-- mereka mereka akan sampai. Jika Anda memiliki pertanyaan sementara itu, merasa bebas untuk email saya secara pribadi. Aku akan menjawab dengan individu pertanyaan, seperti saya selalu lakukan. 

Jadi pada catatan itu, chmod. Jadi pada dasarnya semua yang Anda perlu tahu tentang chmod adalah bahwa hal itu digunakan untuk mengubah hak akses file, kan? Jadi itu hanya beberapa sistem menyebutnya mengubah hak akses, seperti dikatakan di sini. Dan jika Anda pernah ingin melihat hak akses file memiliki, bukan hanya melakukan ls, Anda bisa melakukan ls-l. l singkatan panjang. 

Jadi Anda akan melakukan daftar panjang dari segala sesuatu, dan itu akan memberikan jauh lebih rinci informasi tentang setiap file Anda. Dan Anda akan melihat something-- Aku akan langsung beralih untuk second-- tetapi Anda akan melihat sesuatu yang mirip dengan bahwa garis atas ada untuk setiap file. Dan kita akan pergi melalui apa artinya. 

Jadi pada dasarnya, untuk mengubah hak akses file Anda, Anda hanya ingin menggunakan chmod. Anda dapat menganggap itu seperti yang lain UNIX panggilan seperti ls atau cd atau entah apa lagi. Ini hanya semacam panggilan seperti yang lain. 

Jadi kita lakukan chmod dan kemudian kita akan memiliki tiga digit biasanya. Ada beberapa cara yang dapat dilakukan itu, salah satunya kita akan pergi ke. Tapi biasanya, Anda akan memiliki tiga digit mulai 0-7 setiap kali. 

Jadi satu hal adalah bahwa ada tiga hak akses yang berbeda bahwa kita dapat memberikan setiap file. Dan itu dapat dibaca, yang diwakili oleh r, yang akan masuk akal dalam sedikit; w, yang ditulis; dan dieksekusi, yaitu x. Saya tahu bahwa e satu, executable, mungkin bukan yang paling masuk akal, tapi kami mewakilinya dengan x. 

Dan kemudian yang terjadi adalah masing-masing juga memiliki representasi nomor. Jadi kita memiliki 1, 2, dan 4. Dan pada dasarnya apa yang terjadi adalah masing-masing tiga angka ini di sini sesuai dengan yang berbeda pengguna bahwa mereka izin berkaitan dengan. 

Jadi Anda bisa memikirkan yang pertama nomor sesuai dengan pengguna yang sebenarnya atau pemilik file, yang kedua nomor akan sesuai dengan kelompok, dan yang terakhir merujuk kepada dunia, OK? Jadi apa yang terjadi adalah ingat mereka Numbers r adalah 4, w adalah 2, x adalah 1, kan? This-- jika Anda jumlah ini naik, yang memberikan Anda bahwa nomor pertama bahwa kita mungkin masukan dalam chmod kami. 

Jadi dalam hal ini, apa akan nomor ini menjadi? Ini akan menjadi 4 ditambah 2 ditambah 1, yang merupakan 7, kan? Dan dalam hal ini, ini tidak memiliki apa-apa, jadi ini di sini akan menerjemahkan chmod 700, OK? Dan apa yang dilakukannya itu memberikan semua izin ini untuk pengguna Anda. 

Jadi ini berarti pengguna kami dapat melakukan apapun yang mereka inginkan. Mereka dapat membaca file ini. Mereka dapat menjalankan file ini. Mereka dapat menulis ke berkas ini. Namun kelompok dan dunia, tidak ada izin apapun, OK? 

Jadi cara lain untuk menulis itu, kita bisa melakukan chmod dari tiga digit, yang masing-masing sesuai dengan apa pun jumlah atau kelompok tertentu adalah, bagian-bagian spesifik. Atau kita bisa lakukan sebenarnya hal lain. Tunggu. Kita bisa melakukan sesuatu dengan ini di sini. 

Berapa banyak dari Anda melihat contoh mana rasanya chmod plus x? Apakah Anda melihat bahwa dalam ceramah, saya pikir? Jadi berdiri untuk semua. Ini berarti memberikannya kepada semua pengguna, yang saya lupa untuk menempatkan di sini. 

Tapi plus x, jika kita perhatikan di sini, jika kita melakukan untuk chmod-- apa kelompok kami bicarakan ditambah izin kami ingin memberi mereka. Jadi ini bisa menjadi plus atau minus. Plus menambahkan izin. Minus menghapus izin. Cukup intuitif, saya pikir. 

Jadi plus x berarti chmod. Jadi mengubah hak akses dari semua orang jika ini adalah a-- izin add. Dan x-- itu berarti apa izin kita memberikan setiap orang. Membaca, menulis, atau mengeksekusi? 

AUDIENCE: Jalankan. 

Allison Buchholtz-AU: Jalankan. Jadi kami memberikan semua pengguna izin untuk menjalankan file ini, OK? Jadi bagaimana jika kita ingin lakukan bahwa dengan bentuk angka? Jadi ingat dengan angka, kami ingin tiga angka. 

AUDIENCE: 4. Allison Buchholtz-AU: Apa itu? AUDIENCE: 4. Allison Buchholtz-AU: Tidak 4. AUDIENCE: 0, 0, 4. Allison Buchholtz-AU: Yah, kita ingin untuk memberikannya kepada semua pengguna, kan? Jadi kita akan memiliki angka dalam setiap slot. Itu akan menjadi nomor yang sama di setiap slot karena kami hanya ingin memberikan hak akses executable semua orang. Jadi dieksekusi adalah 1, tapi di jalur yang benar. 

Jadi jika kita chmod 111 yang akan menjadi setara dengan chmod plus x. Apakah itu masuk akal untuk semua orang? Kita akan pergi melalui beberapa contoh. 

Jadi takeaway besar di sini adalah tidak di sini, tapi hanya berarti memberikannya kepada semua pengguna. u adalah jika Anda hanya ingin untuk memberikan atau mengambil izin dari pengguna atau pemilik. g adalah untuk grup, sehingga digit tengah. Dan kemudian orang lain yang dapat Anda pikirkan sebagai dunia, yang angka terakhir. 

Maka dengan itu, kita akan pergi ke sebuah contoh, karena saya merasa seperti contoh selalu membuat hal-hal ini lebih mudah dimengerti. Jadi rwx-- kami pergi melalui this-- juga bisa menjadi mewakili 700. Itulah contoh kita melihat di lebih dari gambar. Jadi chmod 444 pada beberapa berkas akan memberikan hak akses? Kau benar-benar dekat. AUDIENCE: Readable untuk semua. Allison Buchholtz-AU: Readable. Jadi dibaca untuk semua orang, kan? Dan lalu apa cara lain untuk melakukan itu? Jika kita ingin melakukan chmod dengan baik r atau w, ditambah dan minus, apa yang akan panggilan yang terlihat seperti? Ini akan chmod apa? 

AUDIENCE: plus r. 

Allison Buchholtz-AU: plus r pada 5. OK, jadi ini adalah sama seperti ini, hanya dua terjemahan yang berbeda dari hal yang sama. Maka dengan itu, kita harus ini. Jadi saya ingin kalian mencoba dan menulis semacam ini dengan cara yang berlawanan mereka. 

Jadi dengan chmod 555, apa rasanya? Apakah itu menjadi plus atau u plus atau yang lainnya? Untuk u ditambah x, memberi saya tiga angka. Dan kemudian ceritakan tentang perizinan apa kita benar-benar memberikan dan siapa? 

Jadi saya akan memberikan kalian dua menit untuk bekerja pada itu. Jangan ragu untuk berbicara dengan satu sama lain. Bagi Anda yang datang sedikit terlambat, ada permen dan kemeja. Kami telah tiga kemeja kiri, dan kita memiliki Kit Kats dan Starbursts. Jadi jangan ragu untuk datang ambil beberapa di selingan kecil ini. 

Juga, yang terakhir adalah rumit. Ini adalah dua chmods untuk yang terakhir. Sebenarnya, biarkan aku menutup pintu itu sementara kalian bekerja pada itu. Permen selalu diperlukan pada Senin sore. 

OK, jadi chmod 555. Apa cara lain kita bisa menulis itu? Ada gagasan? Ya. 

AUDIENCE: a rx plus. 

Allison Buchholtz-AU: r ditambah rx. Apakah Anda ingin menjelaskan mengapa itu akan menjadi rx? 

AUDIENCE: Karena Anda memiliki 5, jadi itu 4 ditambah 1, sehingga yang dibaca ditambah executable, dan itu untuk semua. Allison Buchholtz-AU: Benar. Jadi hanya untuk mengulangi, 5 di sini kita kenal sebagai jumlah dari 4 dan 1, karena setiap nomor dalam trio kita adalah jumlah izin untuk bagian itu, kan? Entah pengguna, kelompok, atau dunia. Jadi dalam hal ini, kita tahu bahwa 5 harus dibentuk oleh 4 dan 1. 

Dan 4 dan 1 sesuai dengan dibaca dan dieksekusi. Kami memberikan kepada semua orang, sehingga kami dapat melakukan chmod plus rx. Dan jelas, kami hanya pergi melalui pertanyaan-pertanyaan di sana, jadi sekarang file ini bisa dijalankan dan dibaca untuk semua orang. 

Jadi bagaimana dengan yang kedua? Apa yang mungkin nomor satu itu? Ada gagasan? Silakan. 

AUDIENCE: 100 [tak terdengar]. 

Allison Buchholtz-AU: 100. Tepat. Jadi jangan Anda ingin menjelaskan mengapa 100? AUDIENCE: Karena itu untuk pengguna, jadi di posisi pertama. Dan kemudian x dieksekusi adalah 1. Allison Buchholtz-AU: Tepat. Jadi kita memberikan executable izin untuk hanya pengguna. Jadi dalam hal ini, itu akan menjadi 100. Dan saya memiliki semua jawaban up pada slide berikutnya dalam kasus Anda sedang menulis banyak hal bawah. 

OK, jadi yang berikutnya ini sebenarnya dilakukan dengan dua chmods, Anda bisa melakukannya. Jadi apakah ada yang punya ide bagaimana Anda mungkin mendapatkan chmod 640 ditulis ulang dengan cara lain? Anda dapat mengubah pengguna pertama dan kemudian Anda dapat mengubah kelompok adalah petunjuk saya. 

Jadi jika kita hanya mengubah pengguna, yang merupakan salah satu pertama ini di sini, apa yang mungkin panggilan kita menjadi? Jadi pengguna u, kan? Jadi chmod u ditambah apa? Mmhmm? 

AUDIENCE: rw. Allison Buchholtz-AU: rw. Benar, untuk membaca dan menulis, karena membaca adalah 4, w adalah 2, jumlah mereka bersama-sama sebagai 6. Jadi kita mendapatkan chmod u ditambah rw, dan kami mendapatkan 6 pertama kami di sana. 

Jadi untuk mendapatkan 4, kita sekarang ingin untuk mengubah pengaturan kelompok kami. Jadi kita akan melakukan chmod g ditambah apa? Apa itu 4? 

AUDIENCE: r. Allison Buchholtz-AU: r. Tepatnya. Jadi kami memberikan pemilik membaca dan menulis izin dan kami memberikan kelompok membaca perizinan, yang kita semua di sini. Mmhmm? 

AUDIENCE: Jika Anda dapat menulis sesuatu, apakah itu berarti Anda bisa menjalankan itu? 

Allison Buchholtz-AU: Anda dapat menulis untuk something-- Saya tidak percaya bahwa itu berarti Anda dapat mengeksekusinya. Keren. Jadi itu saja yang baru saja kita pergi melalui. Jadi pada berikutnya ini, itu kasus hanya jenis umum bahwa Anda ingin menyimpan dalam pikiran untuk masalah Anda mengatur. Ini biasanya izin yang kita sukai Anda gunakan. 

Jadi untuk 711, yang memberikan kita, tentu saja, pengguna semua izin, yang cenderung masuk akal. Dan kemudian itu dieksekusi oleh kelompok di dunia, yang masuk akal jika Anda memiliki beberapa direktori, Anda ingin dapat melintasi ke dalamnya. Orang-orang membutuhkan akses. 

Untuk file non-PHP, Anda akan menggunakan 644, yang akan melakukan apa? Apa yang menyiratkan, atau apa izin apakah itu memberikan? Sehingga pemilik bisa apa? AUDIENCE: Membaca dan menulis. Allison Buchholtz-AU: Membaca dan menulis. Dan kemudian kelompok dan lain-lain hanya bisa membaca, kan? Dan kemudian chmod 600 untuk setiap File PHP yang Anda gunakan, pemilik Anda, sekali lagi, bisa membaca dan menulis untuk itu tapi tidak semua orang hanya jenis diblokir. 

Jadi ini benar-benar akan akan lebih berguna bila Anda bisa masalah Anda mengatur minggu depan di mana Anda benar-benar membangun sebuah situs web. Jadi jika Anda pernah mengalami masalah aneh mana itu tidak memuat benar, mungkin Anda perlu menambahkan executable izin, atau mungkin Anda perlu membaca sebuah atau menulis izin. Hal-hal kecil yang cenderung untuk perjalanan orang up, tapi itu jenis seperti go-to ketika Anda mulai minggu depan pset. Dan saya akan memberikan Anda lebih banyak petunjuk tentang minggu ini pset, tapi saya belum melihatnya sejak dirilis pagi ini. Tapi Anda email saya, saya akan telah melihat hal itu pada saat saya merespon besok. 

Jadi sekarang, semua orang baik dengan chmod? Setiap pertanyaan yang tersisa? Cukup sederhana. Hanya jenis melacak apa membaca, menulis, dan mengeksekusi jumlahnya mungkin adalah bagian tersulit. 

Jadi dengan TCP / IP, semua protokol ini, jenis seperti dengan struktur data Anda pekan lalu, itu jauh lebih penting untuk mendapatkan semacam intuisi tingkat yang lebih tinggi dari mereka. Ini bukan CS143 mana kita akan untuk meminta Anda untuk membuat jaringan, sehingga Anda akan baik-baik saja jika Anda tidak mengerti seluk beluk semua protokol. Yang penting untuk dipahami adalah jenis seperti apa yang mereka wakili dan mengapa mereka penting. 

Jadi TCP / IP, tentu saja, itu adalah Transmission Control Protocol atau Internet Protocol, yang pada dasarnya hanya satu set hukum pada dasarnya atau standar yang memberitahu Data bagaimana harus ditangani, bagaimana harus packetized, ditransmisikan, dan diterima. Jadi pada dasarnya, sama seperti mengatakan di sini, meningkatkan kemungkinan Data yang mendapat di mana Anda ingin mendapatkan. 

Saya yakin jika kalian pergi ke kuliah atau menonton secara online, ia has-- Saya tidak tahu jika ia melakukannya tahun ini, tapi aku tahu tahun lalu, ia memiliki demo di mana ia memiliki gambar Rob dan ia membaginya menjadi empat dan memasukkannya ke dalam amplop dan mencoba untuk mendapatkannya di Sanders. Dan Anda dapat jenis berpikir seperti itu. Ini hanya seperangkat aturan yang memberitahu Data bagaimana untuk mendapatkan tempat dan memungkinkan Anda mengetahui apakah Anda akan kehilangan data, dengan cara yang sama bahwa jika Anda mengambil beberapa halaman dari catatan dan Anda label mereka dengan halaman 104, halaman 204, dan Anda kembali untuk belajar nanti dan Anda kehilangan something-- Anda tidak dapat menemukan halaman 304-- Anda tahu ada sesuatu yang salah, sehingga Anda dapat melihat melalui catatan Anda lagi atau meminta seseorang untuk mengirim ulang Anda kuliah catatan dari hari itu. Cara yang sama dengan data di internet. Jika saya meminta sesuatu dari beberapa server yang dan perlu untuk mengirim dalam beberapa paket, mungkin akan nomor dalam beberapa cara, biarkan aku tahu berapa banyak saya harus menerima, dan katakan padaku, oh, ini adalah salah satu dari 10 atau ini adalah salah satu dari 10.000. Dengan begitu ketika saya pergi untuk berkumpul kembali semua potongan, Aku tahu jika ada sesuatu yang hilang dan aku bisa meminta itu lagi. Apakah itu masuk akal? Hanya satu set aturan. Pada dasarnya, seperangkat aturan, OK? 

Jadi kita juga berbicara sebuah sedikit tentang port. Ini benar-benar hanya standar yang memungkinkan Anda tahu apa jenis data sedang dikirim dalam paket ini. Jika kita pergi dengan kami contoh amplop, kita tidak tahu bahwa itu gambar Rob di sana kecuali kita menulis itu di luar amplop kami. Jadi port pada dasarnya hal yang sama. Ini hanya cara untuk mencari tahu apa Jenis data sedang dikirim. 

Jadi kita memiliki semua paling yang umum di sini. Jadi 21-- ini juga baik seperti hal-hal yang baik untuk mengetahui. Ini semacam pertanyaan kuis mudah. Seperti, apa port 80 lakukan? Atau, apa port 443 lakukan? Jadi hal-hal yang baik untuk tahu. 

Jadi kita miliki di sini, 21 adalah berkas Protokol transfer, jadi hanya peraturan yang mengatur transfer file. 25, sesuatu yang kita semua menggunakan terlalu banyak, adalah email. 53 adalah nama domain sistem, yang pada dasarnya adalah hanya jenis pencarian untuk Alamat IP dari sebuah nama domain. 

Jadi saya cukup yakin itu disebutkan dalam kuliah, jika Anda pergi ke sesuatu seperti google.com, ia memiliki alamat IP yang terkait dengan itu. Hal ini tidak benar-benar google.com. Dan 53 adalah port yang benar-benar membutuhkan perawatan jenis menerjemahkannya ke alamat IP untuk Anda. Dan kemudian 80 dan 443 adalah sangat umum. Anda juga memiliki halaman web Anda atau Anda memiliki halaman web yang aman Anda, yang banyak halaman web yang mentransfer lebih dari sekarang. 

Jadi itulah tingkat agak tinggi ikhtisar protokol transfer. Saya tidak melihat banyak lebih mendalam. Ini semacam hal-hal keren jika Anda tertarik. Ada banyak sumber daya. Wikipedia sebenarnya halaman cukup bagus. Jadi saya melihat itu hanya beberapa saat yang lalu, jadi saya akan sangat menyarankan melihat itu jika Anda tertarik atau mengambil 143 dalam dua tahun karena Saya pikir itu setiap tahun. 

Jadi pada akhir ini, kami berbicara tentang halaman web dan HTTP, yang sebenarnya topik kita berikutnya untuk hari ini sebelum kita masuk ke HTML dan CSS dan Anda benar-benar dapat kode sebuah halaman web. Ini akan menyenangkan. Kita akan memiliki gambar kelinci dan itu akan menjadi besar. 

Jadi HTTP, seperti yang Anda lihat di sini, adalah salah satu akronim yang indah untuk minggu ini, yang Protokol transfer hypertext. Jadi sekali lagi, itu hanya satu set aturan yang mengatur hypertext mentransfer, dalam kasus ini. Jadi cara terbaik untuk belajar tentang ini adalah hanya semacam untuk memecahnya menjadi kata-kata individu karena ada banyak kata-kata di layar sana. 

Jadi kita akan mulai dengan hypertext. Jadi "hiper," Anda bisa memikirkan "Di atas," seperti super-jenis hal. Jadi itu benar-benar hanya teks dibawa ke tingkat berikutnya, jadi seperti teks super, seperti teks berikutnya. Jadi itu pada dasarnya hanya teks yang memberi kita informasi lebih dari teks normal yang ada, OK? 

Jadi dalam hal ini di sini, ini adalah hypertext. Ini memberitahu kita bahwa kita memiliki beberapa link yang kita akan, yang cs50.net, yang sekarang cs50.harvard.edu. Slide ini agak tua. Dan itu akan menampilkan itu karena hal ini, sebagai hyperlink, dan kemudian sebuah website benar-benar keren. 

Jadi itu teks, yang sedikit sedikit hal yang benar-benar keren di sana. Sehingga Anda dapat menghubungkan hal-hal dan Anda bisa menyisipkan gambar dan Anda dapat gaya hal. Dan hal yang paling akrab bahwa Anda Orang-orang mungkin memiliki dengan hypertext adalah HyperText Markup Language, HTML, yang tentu saja semua web yang kita lihat di sekitar kita, yang diberikan dengan beberapa gaya CSS dilemparkan. 

Tapi apakah ada orang benar-benar besar dengan MySpace, Saya yakin Anda semua bekas HTML sepanjang waktu untuk membuat profil tersebut sempurna, kan? Saya merasa seperti itu mungkin menjadi usang referensi sekarang, tapi apa pun. Hanya little-- sebuah kalian tidak yang jauh lebih muda. Beberapa dari Anda yang lebih tua dari saya. MySpace masih hal ketika saya masih muda. Aku tidak setua itu. 

Anyways, HTML hanya bentuk hypertext. Jadi hypertext hanya teks dengan fitur yang ditambahkan. Jadi transfer protocol mungkin hal yang lebih rapuh untuk menjelaskan. Jelas, transfer-- hanya mentransfer data. Jadi baik antara klien, seperti saudara web Anda, dan server. Jadi pada dasarnya hanya cara internet bekerja. 

Jadi permintaan tepat bagaimana pekerjaan ini, kami benar-benar akan melihat sebuah contoh permintaan dan respon. Tapi bagaimana kita meminta informasi dari server dan bagaimana server merespon kita adalah apa protokol transfer ini mengatur. Jadi permintaan dan respon memiliki untuk ikuti set khusus aturan. Ini standar sehingga tidak peduli di mana Anda menggunakan internet, selalu bekerja sama, OK? 

Sekali lagi, protokol, seperangkat aturan. Ini hanya normal interaksi dengan cara yang sama Profesor Malan berbicara tentang jika seseorang meluas tangan mereka, Anda tahu bahwa itu milik umum untuk mencapai Anda dan berjabat tangan mereka. Itu protokol, kan? 

Jadi saya memberikan beberapa permintaan standar, yang saya ingin menjabat tangan Anda, dan Anda memberikan beberapa standar respon, yang merupakan salah tidak, terima kasih atau Anda bisa mencoba dan kocok saya tangan atau mungkin Anda akan mencoba dan tinju benjolan saya. Dan kita tidak memiliki protokol untuk itu. Itu rusak. Tetapi jika semua orang mengikuti protokol yang sama, tentu saja, ia pergi jauh lebih mulus. Orang mengenal satu sama lain. Semua orang senang. 

Jadi dalam dunia web, semua orang mengikuti rules-- sama sedikit lebih baik dari standar sosial. Tapi dengan itu, kita akan melihat pada permintaan contoh di sini. Jadi ada ini sedikit kunci di sini di bawah yang memberitahu Anda warna yang berbeda, apa yang mereka seharusnya berarti. 

Begitu putih adalah seperti metode Anda permintaan dan protokol version-- sehingga permintaan metode, versi. Dan maka ini adalah beberapa nama field dan nilai dari bidang itu, yang kita akan masuk ke sangat, sangat lama. Jadi ini adalah permintaan contoh. Ini seperti saya memperpanjang keluar, ingin memperkenalkan diri. 

Ini adalah apa yang klien atau apa browser web Anda akan mengirim ke server Anda. Jadi ini adalah permintaan get, sehingga meminta sesuatu dari server. Dan itu, tentu saja, HTTP dan itu versi 1.1. 

Jadi sisa ini di sini adalah apa yang kita sebut header, dan informasi tambahan yang yang memberi kita ide yang lebih baik dari apa yang kita benar-benar meminta, atau informasi yang kita ingin memberikan server yang mungkin berhubungan. Jadi User-Agent memberikan lagi deskripsi on-- misalnya, di sini, keriting / 7.24.0 sebenarnya akan memberitahu server yang kita sedang menggunakan Google Chrome sebagai browser kita. Jadi, jika Anda pernah mendengar tentang orang-orang yang berbicara tentang membuat sebuah aplikasi responsif untuk beberapa browser, ini adalah sesuatu yang mereka akan menggunakan karena jika Anda tidak tahu apa browser Permintaan tersebut datang dari, Anda tidak dapat menyesuaikan data itu. Jadi dalam hal ini, pengguna hanya memberikan semacam ini informasi mengidentifikasi tentang apa browser pengguna Anda saat ini menggunakan, OK? 

Jadi kami juga memiliki tuan, yang di mana kita benar-benar ingin pergi ke. Dalam hal ini, kami ingin pergi ke apple.com, membeli beberapa iPads baru yang keren atau sesuatu, mungkin lucu lampu di kamar asrama kami. Dan nilai nama di akhir hanya pengisi, hanya hal umum untuk kalian untuk melihat. Ini tidak benar-benar sesuai dengan apa pun di sini. 

Sehingga Anda dapat memiliki sebanyak atau sedikit yang Anda inginkan dalam setiap kasus. Sebagian besar waktu, ini adalah opsional. Itu hanya tergantung pada apa yang Anda butuhkan dari browser, dari pengguna Anda untuk benar memberikan permintaan tersebut. Atau itu tergantung pada apa yang pengguna Anda benar-benar ingin menyerah ke server. Jadi, Anda mungkin memiliki banyak, banyak nama kolom header ini atau Anda mungkin hanya memiliki beberapa. Seperti begitu banyak hal Aku sudah mengatakan dalam bagian ini, itu benar-benar tergantung pada konteks bagaimana Anda menggunakan ini. 

Begitu juga yang masuk akal bagi semua orang? Ini hanyalah sebuah contoh permintaan, header, entah apa lagi. OK, jadi dengan itu, kami memiliki beberapa respon. 

Sekali lagi, kita memiliki kode status kita, protokol versi, dan kemudian nama field dan lapangan nilai seperti biasa. Jadi versi protokol kami dan kode status kita adalah 200. OK, yang berarti bahwa, ya, semuanya berjalan baik. Berikut adalah apa yang Anda inginkan. 

Jenis server, isi type-- itu memberitahu kita, OK, kau akan mendapatkan beberapa teks HTML. Berikut adalah panjang dan inilah apa yang harus Anda lakukan dengan koneksi. OK, jadi sekali lagi, tergantung pada data Anda meminta, tergantung pada apa yang Server ingin kembali ke Anda, Anda mungkin memiliki lebih dari lapangan ini nama, Anda mungkin memiliki lebih sedikit. Benar-benar tergantung konteks. 

Dan sejauh status ini kode di sini, tentu saja, 200 adalah bukan satu-satunya Anda bisa memiliki, kan? Kami memiliki banyak kode status. Apakah ada yang ingat salah satu orang lain yang kami sebutkan dalam kuliah? Banyak dari mereka mulai dengan 4. 

AUDIENCE: 404. 

Allison Buchholtz-AU: 404, yang? 

AUDIENCE: File tidak ditemukan? 

Allison Buchholtz-AU: File tidak ditemukan. Tepat. Jadi bagaimana dengan 403? AUDIENCE: Terlarang. Allison Buchholtz-AU: Terlarang. Jadi apa yang Anda pikirkan yang berarti dengan chmods? 

AUDIENCE: Ini berarti bahwa Anda tidak memiliki izin untuk membacanya. 

Allison Buchholtz-AU: Tepat. Dalam beberapa cara, Anda tidak perlu izin untuk mengaksesnya, kan? Jadi 404, 403. Ada benar-benar lucu salah satu yang kita selalu memperkenalkan setiap tahun yang Aku harus meletakkan di sini, seperti 413, yang aku teko. Anda dapat google ini. Ini lucu seperti, itu adalah kode 413 dan itu aku teko. Yang saya tidak tahu mengapa Anda akan merasa perlu bahwa di internet, tapi saya ngelantur. AUDIENCE: Mungkin Anda pot teh. Allison Buchholtz-AU: Mungkin server adalah pot teh. Siapa yang tahu? Baiklah, jadi kita akan transisi ke coding nyata. Saya merasa seperti kalian akan keluar dari sini cukup cepat. 

AUDIENCE: Mengapa itu mengatakan "server: dua kali? 

Allison Buchholtz-AU: Hm? Server dua kali? Itu adalah pertanyaan yang bagus. Saya tidak yakin. Aku akan mencari tahu dan Saya akan mengirimkan email kepada Anda semua. 

OK, pertanyaan lain selain itu? Baik? Keren. 

HTML dan CSS, dan sekarang kami sampai ke semua bagian yang menyenangkan. Jadi seperti yang saya sebutkan sebelumnya, HTML mungkin salah satu hal kalian yang paling akrab dengan. Jadi kita memiliki HyperText Markup Language. 

Cara terbaik untuk belajar this-- aku tidak memiliki slide disiapkan atau apa pun untuk kalian dengan HTML. Ini benar-benar tentang belajar sintaks. Dan jika Anda berada di MySpace hari, Anda akan memiliki ini turun. 

Jadi benar-benar, yang terbesar adalah hanya untuk berlatih dan bereksperimen. Salah satu sumber daya yang besar saya akan sangat menyarankan menggunakan adalah W3Schools. Jadi hanya W, 3, dan kemudian Sekolah. Mereka memiliki banyak sumber daya pada HTML, CSS, dan mereka benar-benar memiliki layar terbelah semacam itu di mana mereka akan memberikan contoh kode. Anda dapat bermain-main dengan hal itu, mengubahnya, dan tekan Update, dan itu akan menunjukkan kepada Anda apa yang sebenarnya ke halaman web. 

Jadi saya akan sangat menyarankan menggunakan itu. Hal ini cukup keren. Anda tidak akan mendapatkan kesalahan seg di sini bila ada yang salah. Jika Anda berhasil mendapatkan kesalahan seg dengan HTML, biarkan aku tahu karena aku akan nyata tertarik. Tapi itu benar-benar keren karena Anda dapat mengubah hal-hal, Anda dapat melihat mereka diperbarui hidup. Dan saya pikir Anda akan mendapatkan banyak pegang lebih intuitif dari HTML jika Anda benar-benar hanya menghabiskan waktu bereksperimen dengan itu. Jadi itu sebabnya aku berkata, praktek dan eksperimen. 

Google, dari sini keluar, mungkin akan salah satu sumber daya terbaik Anda dan teman-teman. Atau Bing-- Aku sedang bekerja di Microsoft, jadi mungkin aku harus mengatakan Bing. Tapi apa pun cukup banyak hanya akan menjadi sintaks, sehingga memahami apa yang tag, understanding-- setidaknya dengan CSS-- cara mengubah atribut tertentu. Ini akan menjadi super berguna. 

Jadi meskipun kita tidak memiliki hal-hal siap, kami memiliki jenis beberapa praktek terbaik bahwa kami ingin kalian untuk mencoba dan mematuhi by-- atau lebih tepatnya, Anda harus mematuhi sampai pemberitahuan lebih lanjut. Jadi menutup semua tag Anda. Mudah-mudahan semua orang has-- Anda tahu apa, jika hal ini tidak masuk akal sekarang, Aku janji akan masuk akal ketika kita pengkodean halaman. Tapi menutup semua tag Anda. Jadi jika Anda pernah memiliki beberapa Header itu braket, H1, braket, pastikan bahwa setiap kali Anda selesai dengan itu, Anda menutup header yang. Validasi halaman Anda dengan W3 Validator. Jika Anda tidak menutup tag Anda, Anda bisa mendapatkan perilaku tak terduga. Ini akan mengatakan bahwa halaman Anda tidak valid jika Anda menjalankannya melalui validator ini. Jadi ketika di doubt-- dan terutama pada minggu ini dan minggu depan pset-- dengan cara yang sama yang kita minta Anda untuk menggunakan memeriksa 50 dan gaya 50, Anda bisa memikirkan ini sebagai salah satu cek Anda, OK? 

Jadi jika tidak lulus W3 Validator. Itu adalah sesuatu yang kita akan dermaga Anda pada. Atau aku bilang benar sekarang, aku akan dermaga Anda pada. Jadi pastikan memvalidasi. Ini tidak sulit. Anda hanya sisipkan dalam kode Anda dan itu akan baik mengatakan pekerjaan yang baik atau Anda kehilangan sesuatu dengan cara yang sama bahwa gaya 50 memberitahu Anda di mana Anda mengacaukan. 

Dan kemudian satu hal adalah Anda ingin memisahkan markup Anda, yang adalah semua HTML yang atau teks Anda, dan styling Anda. Jadi kami akan melakukan contoh itu setelah ini. Jadi HTML dan CSS harus terpisah. Dan kita akan berbicara tentang MVC, yang merupakan Model View Controller, minggu depan. Kalian mungkin harus belajar tentang itu dalam kuliah besok jika Anda memiliki sudah belajar hari ini. 

Dan itu hanya semacam paradigma yang kita cenderung untuk digunakan saat membuat web halaman untuk memisahkan hal-hal. Anda dapat menganggap itu dengan cara yang sama bahwa kita cenderung fungsi terpisah di C di mana kita hash untuk menemukan hal-hal. Ini hanya cara untuk membuat hidup Anda lebih mudah. Ini memisahkan keluar atribut atau kode yang Anda akan menggunakan berulang-ulang, tapi dengan cara ini, itu jenis dari terus itu bagus dan rapi. Dan jika Anda ingin mengubah satu hal, Anda mengubahnya sekali dan itu berubah di tempat lain. Jadi itu lebih untuk Anda kemudahan dan fleksibilitas. 

Jadi dengan CSS, itu sangat mirip untuk HTML, tapi bukannya tag yang saya sebutkan tadi, kita menggunakan apa yang disebut penyeleksi. Dan mereka pada dasarnya hanya jenis dari mengasosiasikan tag tertentu dalam HTML dengan atribut yang berbeda. Dan ketika saya mengatakan atribut, maksudku hal-hal seperti warna font, gaya font, warna latar belakang, warna teks Anda. Orang-orang macam hal. Seperti jika itu berpusat, apakah itu ke kanan, jika inverted-- semua dari hal-hal keren. Apa saja hal-hal gaya yang Anda lakukan untuk teks Anda, ini adalah apa yang saya maksud dengan atribut. 

Dan kemudian dua hal utama yang harus tahu adalah bahwa selectors-- dua factors-- utama adalah ID, yang unik. Anda hanya dapat menggunakannya untuk satu hal. Jika tidak, itu akan berteriak pada Anda. Dan ketika kita mendefinisikannya dalam file CSS, itu akan menjadi hash ID dan kemudian apa atribut yang kita inginkan. Aku berjanji kita akan melalui contoh. Itu akan membuat banyak lebih masuk akal. 

Kelas dapat merujuk ke beberapa blok. Sehingga Anda dapat memiliki Anda pertama dan ketiga ayat memiliki jenis yang sama atribut jika Anda mengasosiasikan mereka dengan kelas yang sama. Dan ketika kita mendefinisikan mereka di CSS, kita melakukan kelas dot, dengan class menjadi apa pun Anda ingin disebutkan namanya. 

Jadi saya tahu ini benar sekarang sangat abstrak. Itu sebabnya kita akan kode. Aku tahu kalian cinta itu, dan Anda semua akan membantu saya karena ini adalah halaman web Anda. Ini adalah halaman web bagian kita, guys. Jadi apakah ada pertanyaan sebelum saya mematikan PowerPoint, atau apa pun Anda ingin saya untuk menggulir kembali sebelum kita mulai coding? 

AUDIENCE: Ketika Anda mengatakan tag pertandingan, maksudmu penyeleksi atau tag? Allison Buchholtz-AU: Anda dapat menganggap mereka sebagai hal yang sama. Ini kata-kata hanya berbeda. Maksudku, seperti penyeleksi. Tapi pemilih juga memetakan tag. Sehingga Anda dapat menganggap mereka sebagai efektif hal yang sama. Aku berjanji itu akan membuat lebih masuk akal ketika kita kode. Apa pun dari PowerPoint atau pertanyaan sekarang sebelum kita benar-benar membuat halaman bagian kita? Semua orang sudah siap? Keren. 

Jadi saya punya satu mulai. Mari saya meningkatkan font untuk kalian. OK, jadi sekarang, kita hanya memiliki tulang telanjang halaman web di sini. 

Kami memiliki beberapa HTML. Kami memiliki beberapa header, yang kita lihat di sini sebagai halaman contoh web. Beberapa judul, beberapa font. Ini adalah tag, OK? Jadi ketika aku berarti menutup tag Anda, kita lihat di sini kepala bracket ini adalah pembukaan Anda tag, dan braket ini / Head menutup itu, OK? 

Jadi Anda bisa menganggap ini sebagai kawat gigi Anda jika kondisi Anda atau untuk loop. Jika Anda memiliki satu di awal, Anda ingin satu di akhir. Ini akan tetap bekerja sebagian besar waktu jika Anda tidak memiliki tag tertutup, tapi praktek terbaik adalah menutup tag Anda. 

Jadi dalam hal ini, mari kita mengubah ini. Kita akan memiliki bagian tujuh. "Bagian Webpage." Jadi aku hanya akan mengubah ini. 

Dan jika kita pergi ke sini dan kami Harus reload-- menyimpan dan reload-- kita melihat bahwa di sini itu berubah, kan? Keren. Jadi ini mengubah judul. Ini adalah ini apa pun pada tab Anda. 

Jadi ini adalah jenis mencari jenis membosankan. Aku tidak tahu tentang orang-orang. Saya pikir kita ingin sesuatu yang lain di sini. 

Jadi apa yang bisa kita lakukan adalah header hanya ada. Mari kita melakukan semacam tubuh. Jadi kita memiliki beberapa tubuh di sini. Saya selalu melakukan terbuka dan menutup tag saya untuk memulai, dengan cara yang sama yang saya lakukan kawat gigi. Ah. Tunggu, apa? 

AUDIENCE: [tak terdengar]. Allison Buchholtz-AU: Ah. Kalian punya aku. Good job. Bintang emas. 

OK, jadi kami memiliki beberapa tubuh di sini. Dan sekarang mari kita mulai menambahkan beberapa teks. Jadi Anda memiliki pasangan yang berbeda Pilihan untuk menambahkan teks. Kami memiliki hal-hal seperti header. Kami memiliki teks biasa saja. Jadi mari kita mulai dengan sebuah sundulan. Sebenarnya, jika kalian ingin untuk menarik W3 School HTML, Anda dapat jenis melihat-lihat dan jika ada sesuatu terutama bahwa Anda ingin mencoba dengan halaman web ini, kita bisa melakukan itu. Jadi dalam hal ini, mari kita melakukan beberapa h1. Jadi h1 seperti header tertinggi. Ini akan memberi Anda sesuatu yang sangat besar dan tebal. 

Dan dalam hal ini, apa yang kita inginkan untuk teks pertama pada halaman web kami? Apa pun. Kalian akan membuat ini. Aku hanya akan mengetik. AUDIENCE: Welcome. 

Allison Buchholtz-AU: Welcome. OK, jadi jika kita simpan dan kita kembali, kami memiliki besar besar menyambut. Jadi hanya sehingga Anda dapat melihat perbedaan, mari kita lakukan sesuatu pada H6. Apa yang kita inginkan di sini? Benar? 

OK, jadi hanya sehingga Anda dapat melihat perbedaannya. Ya, Sublime. Jadi jika Anda perhatikan, h1, sangat, sangat besar. h6, seperti tebal, tetapi jauh lebih kecil, dan Anda memiliki segala sesuatu di antaranya. Jadi Anda bisa memiliki h2, h3, h4. Dan ini hanya header, jadi jika Anda mencoba untuk membuat sebuah halaman web yang memiliki bagian yang berbeda, mungkin Anda ingin menggunakan header di sana di suatu tempat. 

Keren. Jadi kita akan menambahkan beberapa lagi hal dalam tubuh kita. Saya melihat bahwa itu akan baik keren jika kita memiliki gambar. Aku merasa seperti orang bisa menggunakan mungkin gambar kelinci lucu benar tentang sekarang, jadi kita akan menemukan gambar kelinci pertama. 

Aku tidak tahu apakah kalian punya preferensi mana yang kita inginkan. Apakah Anda memiliki preferensi apapun? Satu ini di sini? Down. OK. Yang satu itu. Pilihan yang baik. 

OK, jadi kita akan melihat gambar kita. Lihat itu. Lihat itu hal menggemaskan. Bagaimana kau bisa sedih pada hari Senin dengan ini? 

Jadi kita hanya akan untuk menyalin URL gambar. Dan apa yang ingin kita lakukan adalah, mari kita mengatakan bahwa kita memiliki beberapa p untuk paragraf. Kita akan mengatakan "Lihatlah melihat kelinci lucu. d'awwww. " Saya suka kelinci saya. Aku punya kelinci di rumah. Aku rindu kelinci saya. Jadi apa yang kita akan do-- Aku tidak tahu apakah kalian ingin google this-- tetapi dengan HTML, bagaimana mungkin Anda menyertakan gambar? Secara harfiah, jika Anda google "Termasuk gambar HTML," kenapa tidak kalian katakan padaku apa tag ini harus? 

AUDIENCE: img source-- 

Allison Buchholtz-AU: img source-- AUDIENCE: --equals-- Allison Buchholtz-AU: --equals-- AUDIENCE: --quote-- ya. Allison Buchholtz-AU: Perfect. Indah. Lihat, MySpace generasi, kan? AUDIENCE: Neopets. Allison Buchholtz-AU: Neopets. Oh, OK. Wow. Sudah gila. OK. 

Jadi pastikan saya mendapatkan hak ini. Keren. Jadi ini harus berada di sini. Dan kemudian jika kita kembali, kita memiliki kami kelinci pada halaman Bukankah ini menggemaskan? 

Ini sangat lucu. Anda memilih besar, foto besar. Aku menggali itu. 

OK, jadi kita memiliki kelinci menggemaskan ini sekarang. Kami mampu untuk menambahkan gambar, hanya seperti itu. Jadi pada dasarnya jika ada gambar apapun Anda ingin menambahkan ke halaman web Anda, Anda dapat menambahkannya seperti ini. Hal lain akan jika Anda memiliki gambar yang disimpan dalam folder yang sama dengan file ini, Anda hanya dapat menulis apa pun nama gambar yang adalah alih-alih memiliki link web. 

Itu akan tetap dalam tanda kutip. Itu hanya akan seperti jika kita telah bernama this-- jika gambar ini telah diselamatkan dalam folder dengan file HTML ini bahwa aku mengedit dan disebut bunny.jpg. Kita juga bisa melakukan itu dan itu akan muncul. Namun, saya tidak memiliki ini disimpan dalam file dan saya ingin menyimpan kelinci, jadi kita akan terus link. 

AUDIENCE: Apa itu rabbit.org? 

Allison Buchholtz-AU: rabbit.org. Ini adalah appropriate-- melihat, Anda dapat mengadopsinya. Adopsi. bunny.jpg. Saya ingin mengadopsi kelinci ini. Oh, Tuhan, itu sangat lucu. 

OK, jadi kami telah menambahkan header. Kami telah menambahkan gambar. Jelas, kami menambahkan beberapa teks di sini, kan? Jika kita ingin menambahkan lain teks, kita akan pergi seperti ini. Jadi ini adalah ayat lain. 

Dan kita mengatakan "ini adalah paragraf lain." Juga, aku ejaan yang mengerikan, jadi saya mungkin misspell hal. Hanya FYI. 

Jadi kita memiliki lain ayat di sini, kan? Jadi mungkin Anda ingin melakukan sesuatu sedikit lebih menarik daripada hanya memiliki semua teks Anda, seperti selaras tepat. Mungkin Anda ingin pusat teks Anda, OK? 

Jadi jika seseorang ingin menggunakan mereka komputer berguna di depan Anda dan memberitahu saya bagaimana Anda akan pusat teks ini, 

AUDIENCE: p align. 

Allison Buchholtz-AU: Jadi p align sama dengan "pusat." Dia membunuh itu, guys. Kalian perlu untuk meningkatkan. Dan kami memiliki "ini berpusat." Dan sekarang kami telah sesuatu berpusat. 

Dengan cara yang sama, jika Anda ingin rata kiri, Anda bisa melakukan equals menyelaraskan kiri, menyelaraskan sama dengan benar. Benar-benar terserah Anda. Jika saya melakukan di sini, maka ini should-- sekarang itu benar selaras. 

AUDIENCE: Allison? Dengan sumber gambar, mengapa tidak ada dekat sumber img? Allison Buchholtz-AU: Maaf. Yang satu ini harus ada Sekarang Anda baik. Sekarang kita baik. AUDIENCE: Apa kau tidak punya untuk menutupnya ada, atau tidak? Allison Buchholtz-AU: Nah, agar img sumber, yang satu ini hanya-- dengan gambar, itu hanya dilihat sebagai salah satu elemen, sedangkan jika Anda perhatikan untuk sisa ini, kami memiliki beberapa tag maka informasi yang berkaitan dengan dan kemudian tag penutup. Tapi dengan gambar, semuanya hanya semacam mandiri. Keren. Jadi kalian tahu cara membuat header, Anda tahu bagaimana untuk memasukkan teks, Anda tahu bagaimana untuk menempatkan gambar sekarang, Anda dapat menyelaraskan hal. 

Hal lain yang Anda mungkin ingin dapat melakukan adalah untuk membuat daftar di CS-- kami jenis masuk ke minggu depan pset. Hal-hal yang kita biasanya mengajarkan minggu ini akan sangat baik dengan minggu depan pset, jadi kita jenis pencampuran, tumpang tindih hal di sini. Tapi itu akan berguna untuk minggu depan. 

Jadi jika kita ingin membuat beberapa daftar, bagaimana kita bisa melakukan itu? Anda tidak dapat menjawab kali ini. Orang lain harus. Ini tidak sulit, guys, janji. Google "unordered list HTML." Apa itu? 

AUDIENCE: [tak terdengar]. Allison Buchholtz-AU: Benar. Jadi kita ingin memesan atau unordered? Mari kita melakukan unordered. Jadi kita memiliki beberapa ul, yang singkatan Unordered List. Dan apa yang kita miliki untuk setiap elemen? Apakah perlu tag sendiri? Bisakah kita mulai menulis hal-hal? 

AUDIENCE: li. 

Allison Buchholtz-AU: li. Jadi apa yang daftar kami akan? Apa yang kita inginkan di sini? Kami hanya melakukan nama. Lakukan saja Jacob. 

AUDIENCE: Kelinci makanan. 

Allison Buchholtz-AU: makanan Kelinci. OK Saya suka ini. Kelinci makanan. 

OK, jadi kita harus wortel. Saya suka kelinci tema ini. Aku menggali banyak. AUDIENCE: Sebenarnya, saya pikir bahwa Yakub akan menjadi legit. Allison Buchholtz-AU: Jacob? Yakub makanan kelinci. Jika Anda melihat Yakub foto dari jam kantor, Anda mungkin berpikir dia mendapat diserang oleh kelinci pembunuh. 

AUDIENCE: Aku punya kelinci sekarang. Aku punya kelinci pembunuh sekarang. 

Allison Buchholtz-AU: Are you kidding me? 

AUDIENCE: Aku akan membawanya bagian berikutnya. Saya memilikinya. 

Allison Buchholtz-AU: Ini konyol. Pokoknya. 

AUDIENCE: [tidak terdengar] 

AUDIENCE: Ya, proctor saya memiliki kelinci juga. 

Allison Buchholtz-AU: Saya ingin kelinci. OK, siapa pun membawa kelinci nyata untuk Pada bagian berikutnya, jumlah poin brownies. AUDIENCE: [tidak terdengar] AUDIENCE: Oh, itu tidak nyata. Ini adalah boneka kelinci. 

Allison Buchholtz-AU: Oh yeah, kita bisa menutup ini. Tampak rad. AUDIENCE: Apakah itu benar-benar penting? Allison Buchholtz-AU: Tidak. Dengan sebagian besar hal-hal ini, Anda tidak menutup tag, 99% dari waktu tidak ada hal buruk yang terjadi terjadi, tapi itu gaya yang baik, juga. Jadi Yakub. Dan kami memiliki selada. AUDIENCE: Untuk link, itu benar-benar penting. Allison Buchholtz-AU: Hm? AUDIENCE: Untuk hyperlink. Allison Buchholtz-AU: Untuk hyperlink. Ya, hyperlink membutuhkannya. OK, jadi mari kita lihat di sini. Dan kami memiliki penutupan daftar kami. Dan kita melihat itu. Kami telah all-- Yakub, di sana. Makanan kelinci. Mengingatkan saya pada Bunnicula. 

AUDIENCE: [tidak terdengar] Allison Buchholtz-AU: Aku akan membawa kembali semua referensi sekolah tua hari ini, bukan? Hanya semua referensi sekolah tua. Seharusnya membawa seperti Gogurts atau sesuatu untuk makanan ringan. 

AUDIENCE: Atau Gushers. Allison Buchholtz-AU: Oh. OK. Aku akan melihat apakah saya dapat melacak bawah Gushers untuk minggu depan. Saya pikir saya bisa melakukan itu. Saya pikir kita mungkin memiliki beberapa di kantor. 

OK, jadi kita telah membahas banyak berbeda hal yang dapat Anda lakukan dengan HTML, kan? Dan seperti yang Anda mungkin dapat melihat, itu nothing-- mudah-mudahan, tidak terlalu intim-- jika sudah, saya tidak berarti untuk meremehkan siapa pun. Jika Anda mengalami kesulitan, silahkan datang bicara padaku. 

Tapi sebagian besar itu hanya melihat sintaks, kan? Jika Anda ingin daftar unordered, jika Anda ingin semacam daftar, jika Anda ingin menyelaraskan sesuatu atau Format sesuatu, itu semua tentang hanya jenis mendongak sintaks untuk HTML, kan? Dan satu hal yang cukup keren sebenarnya adalah jika Anda pergi to-- mari kita lihat, apa website yang bagus yang kita sukai? Ada yang punya situs web favorit yang OK untuk membuka secara online? Kau tahu apa, mari kita lakukan CS50. Itu bagus dan aman, kan? 

OK, jadi CS50 sini. Oh, lihat, ada bagian yang sekarang. Jika Anda suka dengan cara terlihat. 

AUDIENCE: [tak terdengar]. Allison Buchholtz-AU: Kami tidak akan melakukan meta bagian, guys. Ini tidak terjadi. Ini akan menjadi dingin, tapi kami tidak akan melakukannya. 

Jadi apa yang Anda bisa dilakukan jika Anda suka jalan ini bekerja adalah Anda bisa selalu benar klik pada setiap halaman web yang Anda sukai dan Anda dapat melakukan View Page Source. Ini akan memunculkan semua HTML. Dan ini sebenarnya benar-benar baik cara untuk gaya halaman web Anda sendiri. Pergi ke halaman web yang Anda benar-benar suka dan melihat HTML dan mencari tahu bagaimana mereka melakukannya. 

Dan secara harfiah, selama Anda mengutip hal, selama Anda tidak hanya mencuri dari orang-orang, itu OK. Khusus untuk CS50 [? membiayai?], kita jenis mengharapkan Anda untuk mendapatkan inspirasi dari website lain. Jadi merasa bebas. Lihat melalui website yang Anda berpikir benar-benar cantik dan mencari tahu bagaimana mereka menggunakan HTML dan CSS untuk melakukan hal-hal ini. 

Jadi seperti yang Anda lihat di sini, ada jelas seperti link dan kami memiliki kelas di sini. Kami memiliki link di sini. Kami memiliki daftar. Kami mungkin memiliki beberapa gambar di sini. 

Kami punya beberapa gaya keren di sini. Ini adalah hal berikutnya kita akan lakukan. Jadi gaya, setiap kali Anda melihat ini gaya kurung, itu CSS pada dasarnya. Ben, apakah Anda memiliki pertanyaan? 

AUDIENCE: Apa itu div? 

Allison Buchholtz-AU: div hanya a-- apa div? AUDIENCE: Divisi. Allison Buchholtz-AU: Divisi. Ya, itu hanya seperti memisahkan unsur-unsur yang berbeda. OK, jadi di sini adalah apa yang kita akan pergi ke depan. Jadi ini mungkin tidak menjadi yang terbaik gaya karena, jika Anda perhatikan kami memiliki HTML dan gaya halaman yang sama, dan kita benar-benar ingin memisahkan mereka, OK? Dan sebenarnya, biarkan aku membuka satu kananku karena ini seharusnya PDF, jadi kita memiliki style.css. 

Jadi apa yang bisa kita lakukan di sini adalah ini hal-hal keren seperti beberapa fade dan kami bisa mencoba dan melakukan itu, tapi aku merasa seperti aku akan mengacaukan yang on the fly, jadi saya mendorong kalian untuk pergi mencoba bahwa pada Anda sendiri, tapi aku tidak akan melakukannya sekarang. Jadi jika kalian, ingat, jika Anda pernah terkena masalah set, sesuatu menyapu dari samping. Ini ada hubungannya dengan memudar dan transisi dan yang lainnya. 

AUDIENCE: Dan itu semua CSS dan HTML? 

Allison Buchholtz-AU: Semua CSS dan HTML. Ya. Sehingga Anda dapat melakukan banyak yang benar-benar hal keren dengan CSS dan HTML. Jadi dengan mengagumkan kami Halaman web kelinci di sini, kita akan melakukan sedikit sedikit CSS styling dengan itu. 

Jadi jika Anda pernah memiliki gaya lembar, yang kita miliki di sini, Anda hanya dapat memanggil style.css. Anda dapat menyebutnya apa pun yang Anda inginkan. Yang penting adalah bahwa kita akan untuk referensi dalam web.html kami di sini. 

Jadi apa yang akan kita lakukan adalah we-- jadi saya tidak main-main ini up-- kita akan menghubungkan dua file ini bersama-sama. Jadi dalam way-- yang sama aku akan menggambar analogi C di sini. Dengan cara yang sama bahwa jika Anda memiliki beberapa library-- dan kami memiliki cs50.h-- compiler kami link itu. Ini hanyalah sebuah eksplisit link pada bagian kita. Jadi dengan cara yang sama yang kita lakukan hash mencakup beberapa berkas, apa Aku akan menulis adalah hanya HTML / CSS setara dengan itu. 

Kami hanya mengatakan, OK, halaman web ini akan menggunakan stylesheet ini, OK? Jadi kita memiliki link rel sama dengan stylesheet. Dan kemudian kita memiliki jenis, css. Dan kemudian href sama. 

OK. Jadi semua ini lakukan di sini adalah Anda dapat menganggap ini sebagai hal yang sama sebagai hash termasuk. Jelas terlihat sedikit lebih rumit, tetapi dalam semua kasus, itu efektif hal yang sama. Jadi ini hanyalah beberapa menghubungkan dari style sheet, itu jenis text / css, dan nama itu adalah style.css. 

Yang penting untuk mengetahui adalah bahwa halaman web bahwa aku bekerja tepat sekarang-- web.html dan style.css-- berada dalam folder yang sama. Karena dalam folder yang berbeda, Anda perlu memberikan akar yang sebenarnya untuk itu atau jalan untuk itu. Tapi dalam kasus ini, kita menjaganya agar tetap super sederhana dan itu akan berada di sini. Jadi jika kita melakukan itu, saya memiliki beberapa hal yang sudah antri di sini. 

Jadi kita memiliki beberapa tubuh, yang akan untuk memiliki warna latar belakang kami, yang saat ini adalah biru muda. Kita dapat mengubahnya jika kita ingin, tapi jika saya ingat ini dengan benar, itu hanya harus mengubahnya ke biru muda. Dan sekarang kita memiliki latar belakang biru muda. Dan kami memiliki di sini-bisa ada yang ingat mana yang ID hash atau kelas? 

AUDIENCE: ID. 

Allison Buchholtz-AU: ID. Keren. Jadi apa yang ingin kita lakukan adalah yang font ini atau which-- kita ingin "Lihatlah kelinci lucu "menjadi ungu? Saya pikir kita ingin hal itu menjadi ungu. Aku cukup turun dengan bahwa menjadi ungu. 

Jadi apa yang Anda lakukan adalah Anda lakukan ID equals-- dalam hal ini Aku berkata, apa, warna cantik di sini. Kami reload. Tiba-tiba, itu ungu. OK, jadi dengan ID, ingat itu harus unik, jadi aku tidak pernah harus menggunakan ID ini di tempat lain. Tapi dengan kelas, seperti yang telah kita di sini dengan font cantik, Aku harus bisa menggunakan bahwa di mana saja saya ingin. 

Jadi mari kita lakukan satu ini di sini. Jadi kita dapat mengatakan kelas sama cantik font. Dan jika kita melihat sekarang, kami memiliki ini cukup font yang keren di sini. Jadi mungkin saya ingin melakukan keduanya. OK, saya benar-benar tidak tahu apakah ini adalah akan bekerja tapi aku ingin mencobanya. Dan ini adalah bagaimana Anda belajar CSS dan HTML. Kau seperti, Anda tahu apa, saya ingin mencoba ini. Saya tidak yakin apakah itu akan bekerja. Mari kita lihat apakah ia bekerja. 

Dan lihat itu. Sekarang ungu dan itu font cantik. OK, jadi Anda memiliki semua ini hal yang berbeda yang dapat Anda lakukan. Apakah Anda memiliki pertanyaan? 

AUDIENCE: Ya. Nah, sama seperti warna Anda menggunakan kata-kata. Apakah ada cara untuk melakukan warna dengan heksadesimal RGB? Allison Buchholtz-AU: Anda juga bisa melakukannya dengan heksadesimal, saya percaya. Ya. Tapi itu jenis yang baik jika Anda tidak ingin melihat mereka. Anda hanya bisa seperti, ungu atau biru. AUDIENCE: Mari kita berharap mereka tahu apa artinya. Allison Buchholtz-AU: Benar. Jadi mari kita buat membaca ini atau kekuning-kuningan. Mengapa Anda pernah memilih hijau kekuning-kuningan? Ini adalah warna yang menarik. 

OK, jadi jelas kita dapat melihat kita dapat mengubah hal namun kita inginkan. Jika Anda ingin create-- katakanlah kami ingin membuat kelas lain. Apa yang mungkin kalian ingin mengubah? Jika Anda menarik W3Schools ' Dokumentasi CSS, Aku meninggalkan lantai untuk kalian. Kita bisa mencoba dan melakukan sesuatu yang keren dengan ini di beberapa menit terakhir. Karena aku sudah semacam Anda kecelakaan saja pada banyak hal keren yang dapat Anda lakukan. Tapi pada akhirnya, seperti yang saya katakan, jika Anda hanya percobaan, Anda akan belajar banyak. 

AUDIENCE: Apakah Anda mencari font yang? 

Allison Buchholtz-AU: Yeah, Aku mendongak font yang. Jadi seperti harfiah, saya pergi to-- apa yang saya lakukan? Saya melakukan CSS daftar font, dan maka aku tumpukan font, dan kemudian aku seperti, lihat, di sini semua font keren yang dapat Anda lakukan. Dan ada satu ini, jadi Saya menyalin ke clipboard saya. Dan kemudian aku seperti, OK, keren, di sana kita pergi. Semua dilakukan. 

AUDIENCE: Jadi Anda harus memastikan CSS yang tahu apa font yang. 

Allison Buchholtz-AU: Ya. 

AUDIENCE: Apa isinya di akhir? Kursif? 

Allison Buchholtz-AU: Kursif. Ya. 

AUDIENCE: Gambar latar belakang. 

Allison Buchholtz-AU: Gambar latar belakang. OK. Jadi, Anda ingin memberitahu saya bagaimana untuk melakukan hal ini. Saya meninggalkan ini untuk Anda. Aku hanya mengetik di sini sekarang. Roda adalah di tangan Anda. 

AUDIENCE: OK 

Allison Buchholtz-AU: OK. Apa yang saya lakukan? 

AUDIENCE: Doing-- Aku tahu apa muncul setelah kurung kurawal. Allison Buchholtz-AU: OK. Jadi mungkin di dalam tubuh, aku akan menganggap, karena kita lakukan dengan gambar latar belakang. 

AUDIENCE: Yeah, mari kita lakukan itu. 

Allison Buchholtz-AU: OK. AUDIENCE: OK, jadi latar belakang usus, dan kemudian kita membutuhkan alamat URL gambar tersebut. Mungkin pseudo-kode yang untuk saat ini, mungkin. 

Allison Buchholtz-AU: Apa Anda ingin saya to-- AUDIENCE: Aku berpikir seperti GIF. Allison Buchholtz-AU: A GIF? Itu akan menjadi menarik. OK, apa yang saya googling di sini? 

AUDIENCE: Tidak, itu pilihan Anda. 

Allison Buchholtz-AU: Mengapa tidak we-- jika kelinci, Saya merasa seperti kita harus memiliki rumput berumput bagus atau sesuatu. 

AUDIENCE: Meadow. Sebuah padang rumput. 

Allison Buchholtz-AU: A padang rumput? OK. AUDIENCE: Atau Rachel Maddow. Allison Buchholtz-AU: Yang satu ini terlihat cantik. Oh, itu kecil, meskipun. Kami membutuhkan ukuran gambar yang baik. Mari kita lihat. Oh, lihat. Itu padang rumput yang cukup. Kau tahu apa, aku seperti ini. Mari kita menyalin satu ini. 

AUDIENCE: OK, jadi saya pikir itu URL, kurung terbuka. 

Allison Buchholtz-AU: OK, URL. 

AUDIENCE: Lalu alamat. 

Allison Buchholtz-AU: OK. Apakah itu semua yang kita butuhkan? 

AUDIENCE: Tutup kurung titik koma, dan kemudian ruang, latar belakang tanda hubung lampiran usus tetap, dan brace keriting. 

Allison Buchholtz-AU: OK. Mari kita lihat apakah yang bekerja. Ini akan menjadi keren jika itu terjadi. Aku sebenarnya senang di sini. Tidak berhasil. Aku bertanya-tanya mengapa. AUDIENCE: Mungkin URL harus dalam kutipan. Allison Buchholtz-AU: Mungkin. Dan ini adalah bagaimana kita belajar, guys. 

AUDIENCE: Dapatkah kita memiliki latar belakang warna dan gambar latar belakang? 

AUDIENCE: No. Satu menggantikan yang lain. 

Allison Buchholtz-AU: Aku tak tahu. Mari kita lihat. Mari kita check it out dan melihat. 

AUDIENCE: Oh, mungkin, ya. [Interposing SUARA] 

Allison Buchholtz-AU: OK, ini adalah obviously-- Aku [tak terdengar] di sini. Jadi OK. AUDIENCE: lampiran Latar Belakang. Allison Buchholtz-AU: Ah. 

AUDIENCE: OK, saya tidak tahu. Allison Buchholtz-AU: Ini terlihat seperti itu harus bekerja. Apakah Anda yakin itu usus setelah URL? 

AUDIENCE: Tidak, itu titik koma. Allison Buchholtz-AU: Ini titik koma. AUDIENCE: Apakah saya mengatakan usus? Allison Buchholtz-AU: Kau bilang titik dua. AUDIENCE: Oh tidak. Allison Buchholtz-AU: Ada Anda pergi. AUDIENCE: Oh, tunggu, sekarang kita tidak bisa membaca teks. Allison Buchholtz-AU: Sekarang Anda tidak dapat membaca teks, tapi kami memiliki gambar latar belakang. Mmhmm? 

AUDIENCE: Apakah HTML mendukung konten dinamis? Seperti, bisa Anda mengubah ukuran gambar yang tergantung pada ukuran jendela, atau adalah bahwa CSS-- sebuah 

Allison Buchholtz-AU: Jadi CSS harus melakukan itu. Jadi jika kalian tertarik dalam belajar CSS maju, Saya co-mengajar seminar tentang CSS pada 7. Dan aku berjanji itu akan jauh lebih mendalam dan melakukan lebih banyak lagi keren hal dalam bagian ini. Dan rekan-guru seperti Total front end web master dev. Sehingga akan cukup keren jika Anda ingin untuk belajar tentang semua hal keren CSS yang dapat dilakukan. 

Tapi apa yang kita miliki di sini dengan lampiran latar belakangnya fixed-- sehingga beberapa size-- tetap tapi Anda benar-benar dapat dynamically-- jika Anda pernah melihat halaman web, seperti sebagian besar halaman web yang baik akan lakukan, ketika Anda menyesuaikan ukuran browser Anda, ia akan menyesuaikan latar belakang atau berapa banyak menunjukkan atau memformat ulang hal, kan? Jadi itulah yang kita sebut posisi relatif. 

Dan CSS sebenarnya bisa ambil seberapa besar Anda lebar browser atau seberapa tinggi itu, dan Anda dapat memposisikan hal menurut ukuran relatif dibandingkan ukuran mutlak. Dan itu jelas lebih maju CSS, tapi itu adalah sesuatu yang dapat Anda lakukan. Jika Anda ingin belajar lebih, datang ke seminar saya. 

Jadi itu adalah sesuatu yang dapat Anda lakukan. Dan CSS sebenarnya bisa do-- CSS dan JavaScript, yang akan kita masuk ke berikutnya week-- dapat memungkinkan Anda untuk mengubah secara dinamis halaman tanpa harus kembali mereka sepanjang waktu. Dan Anda bisa melakukan beberapa hal yang cukup keren. 

Jadi apakah ada hal lain bahwa kalian mungkin ingin melakukan atau apa pun yang Anda ingin menjelajahi? Kami memiliki 10 menit tersisa. Kami juga dapat pergi lebih awal, tetapi jika Anda ingin melakukan lebih banyak barang web, kita bisa, tapi aku tidak akan memaksa Anda untuk. Tapi kita juga bisa hanya makan permen. AUDIENCE: Sorot teks putih sehingga Anda dapat membacanya. Allison Buchholtz-AU: OK. Jadi dalam hal ini, kita ingin beberapa hal. AUDIENCE: Haruskah kita melakukannya di tubuh sehingga berlaku untuk seluruh halaman? Allison Buchholtz-AU: Ya, kita bisa benar-benar. Itu ide yang baik. Jadi kita have-- apakah Anda tahu apa yang kita harus? Saya tidak tahu apakah kita bisa melakukan warna teks. Saya akan mencoba dan membuat kelas lain di sini. 

AUDIENCE: Bagaimana Anda mendapatkan begitu bahwa ia memiliki saran? Allison Buchholtz-AU: Jadi jika kalian tertarik, ini adalah teks lain Editor disebut Sublime. Anda harus dapat menginstalnya pada alat Anda. Kadang-kadang menjadi sedikit rumit. Jika Anda ingin membantu dengan itu, Aku super senang untuk membantu Anda dengan itu, karena gedit besar dan itu mengagumkan karena Anda dapat compile di bagian bawah, tapi aku benar-benar seperti Sublime karena itu cukup dan itu tidak melakukan hal-hal seperti auto-lengkap. 

Sehingga Anda pasti dapat merasa bebas untuk beritahu saya jika Anda ingin melakukan itu. Jika Anda hanya google "Sublime teks, "biasanya memiliki petunjuk tentang cara menginstal pada berbagai sistem operasi. Ini benar-benar keren, saya Menurut opini saya. Jadi hal. Saya pikir saya hanya bisa melakukan text-- atau kita hanya bisa melakukan warna "putih." Ada. 

Jadi apa yang saya lakukan di sini adalah bahwa saya tidak mengubah semua teks. Tapi p di sini adalah hanya tag yang kita miliki, kan? Tag paragraf ini. Jadi saya baru saja membuat sebuah elemen CSS yang kata, OK, apa-apa dengan tag ini p, membuat warna putih. 

Jadi, jika Anda perhatikan, itu membuat putih ini dan putih ini. Itu tidak membuat daftar kami putih karena itu tidak terkait dengan itu. Anda bisa pergi melalui dan Anda bisa say-- 

AUDIENCE: Apakah warna latar belakang. 

Allison Buchholtz-AU: Warna latar belakang? 

AUDIENCE: Latar belakang pipa di warna di mana Anda meletakkan tag p. 

Allison Buchholtz-AU: OK. Anda ingin putih? AUDIENCE: Mmhmm. Allison Buchholtz-AU: OK. Di sana Anda pergi. AUDIENCE: Itu aneh. Allison Buchholtz-AU: Cukup keren, kan? Jadi jika Anda hanya main-main, Anda akan belajar banyak. Dan itu bisa sangat keren. Saya pikir itu pasti lebih menyenangkan daripada kadang-kadang karena Anda tidak harus menunggu untuk program Anda untuk compile. Anda hanya dapat menekan Segarkan dan Anda seperti, oh, lihat, itu bekerja, atau oh, aku mungkin kehilangan sesuatu. Dan itu adalah sesuatu yang benar-benar keren tentang ini bagian berikutnya dari kelas, itu pasti, saya berpikir, lebih mudah untuk memeriksa sambil jalan jalan vs harus menulis program-program lama dan berharap dan berdoa bahwa ia bekerja di akhir. 

Jadi dengan itu, saya pikir kalian semua tampak baik. Jika Anda memiliki pertanyaan, seperti biasa, datang bicara padaku, datang beritahu saya. Aku akan tepat di luar selama 15 menit berikutnya jika Anda ingin chatting tentang apa saja dan segalanya. 

Jadi saya harap Anda guys-- good luck dengan pset ini. Batas waktu adalah Jumat pada siang hari karena dirilis akhir. Jadi saya mungkin akan melihat banyak dari kalian pada hari Kamis, tapi mudah-mudahan tidak. Mungkin Anda akan memiliki itu dilakukan pada saat itu. Aku akan menjadi super bangga. 

Tapi jika tidak, saya akan melihat Anda Kamis. Anda juga dapat menggunakan tanggal akhir, yang meluas sampai Sabtu pada siang hari. Tapi aku don't-- ya? 

AUDIENCE: Halloween. 

Allison Buchholtz-AU: Ini Halloween,, dan b, Saya tidak berpikir akan ada menjadi jam kantor pada hari Jumat. Jadi benar-benar mencoba dan mendapatkannya dilakukan oleh Jumat sehingga kita semua dapat merayakan Akhir pekan Hallow. Baiklah, aku akan melihat kalian minggu depan.