DAVID J. Malan: Baiklah. Kami kembali. Jadi, tujuan dari sesi akhir ini adalah untuk memperkenalkan beberapa konsep yang lebih tetapi juga memberikan setiap orang kesempatan untuk jenis meregangkan jari-jari Anda dan benar-benar melakukan sesuatu hands-on kecil. Tujuannya bukan untuk mengubah kita semua menjadi pengembang web dengan cara apapun tapi benar-benar hanya untuk memberikan rasa dari beberapa dari konstruksi dasar apa masuk ke pemrograman web dan hari ini web pembangunan, sehingga sisi statis things-- ada logika, ada pemrograman bahasa, hanya konten statis. Dan itu akan memberi kita kesempatan untuk benar-benar melihat apa web server, lihat apa file HTML adalah, melihat apa itu adalah HTTP sebenarnya melayani sampai. Tapi sebelum kita menyelam di, retrospektif setiap pertanyaan tentang komputasi awan atau keamanan atau apa pun di antara? Tidak? Baiklah, baik, mari kita melakukan ini, hanya dalam kasus proses mendaftar untuk sesuatu yang membutuhkan waktu beberapa menit. Kami akan membiarkannya melakukan itu di latar belakang. Silakan, jika Anda bisa, untuk c9.io. URL ini di sini- Ini adalah pihak ketiga service-- platform sebagai layanan, jika Anda will-- yang akan mengundang Anda untuk mendaftar untuk sebuah account, dan itu akan memberi Anda masing-masing account di yang disebut cloud pada infrastruktur orang lain, sebuah perusahaan bernama Cloud9. Tapi apa yang baik tentang ini adalah bahwa mereka memberi Anda perkiraan dari pengembangan dunia nyata yang sebenarnya lingkungan, meskipun dalam awan dan di web browser, dan kami akan menggunakan ini untuk benar-benar bereksperimen sedikit hari ini. Dan kemudian pergi ke depan dan hanya menavigasi jalan ke proses sign-up jika Anda bisa. Jadi kita kebetulan menggunakan ini di kelas Saya mengajar untuk semua siswa kami, baik di kampus dan pergi sekarang, dan itu diganti apa historis adalah software jika download. Jadi apa yang Anda mendapatkan akses ke adalah salah satu mesin virtual, dasarnya, yang saya jelaskan sebelumnya. Jadi perusahaan ini Cloud9 mungkin sewa dari party-- ketiga memang dalam hal ini, Google-- keseluruhan sekelompok mesin virtual bahwa mereka entah bagaimana memotong menjadi ilusi setiap server bahwa masing-masing dari kita memiliki kontrol penuh atas. Ini tidak cukup akurat untuk mengatakan bahwa mereka mesin virtual, meskipun, karena apa Cloud9 benar-benar menggunakan adalah teknologi yang agak baru disebut containerization. Dan biarkan aku ambil gambar ini di sini untuk melukis gambar ini. 

Sebuah wadah, jika Anda ingat gambar dari sebelumnya, sedikit lebih ringan Berat dari mesin virtual. Bahkan, sedangkan lalu kali kami berbicara tentang ada menjadi operasi sistem dan hypervisor dan kemudian sistem operasi tamu, tamu sistem operasi, operasi tamu sistem, di atas Anda hardware fisik, perbedaan dengan ini baru teknologi, pengepakan, adalah bahwa mereka semua entah bagaimana berbagi sistem operasi yang sama. Tapi mereka masih membuat ilusi orang memiliki nya sendiri eksklusif hak administratif dan file di server. Tapi ada software kurang antara Anda dan perangkat keras. Hasil yang, di teori, kinerja yang lebih tinggi, karena Anda menggunakan atau membuang-buang sumber daya yang lebih sedikit pada yang disebut lapisan virtualisasi. Jadi ini disebut containerization oleh alam dengan cara teknologi yang disebut Docker, yang sangat banyak datang ke dalam sendiri. Dan ini adalah sesuatu yang insinyur di perusahaan Anda mungkin jenis jenis mulai berbicara tentang segera jika mereka belum melakukannya, meskipun ada tentu ada Alasan untuk melompat pada setiap bandwagons. 

Jadi dengan mengatakan bahwa, apa yang Anda mungkin melihat sekarang adalah layar yang terlihat sedikit seperti ini. BAIK. Dan panggil aku lebih jika tidak. Dan jika so-- Aku akan datang jika tidak. Cobalah dan klik yang besar ditambah untuk membuat ruang kerja, dan Anda akan melihat layar seperti ini. Anda dapat memanggil ruang kerja nama apa pun yang Anda inginkan untuk saat ini. Dan hanya benar-benar untuk kesederhanaan, pergi dan- baik, beberapa dari Anda sudah memiliki ruang kerja. Sebut saja apa pun yang Anda want-- bisnis, Harvard, Kamis, apa pun yang Anda inginkan. Anda tidak perlu deskripsi. Anda dapat meninggalkan itu pribadi, kecuali jika Anda sudah memiliki banyak ruang kerja. Jika Anda terpaksa membuat publik, yang baik untuk tujuan hari ini. Di sini, juga, adalah salah satu upsells. Anda mendapatkan satu ruang kerja pribadi oleh default. Tetapi jika Anda ingin lebih, Anda harus membayar lebih. Jika tidak, mereka memaksa Anda untuk membuat publik pekerjaan Anda. Tapi itu baik-baik saja, karena mereka juga menargetkan ini di komunitas open-source untuk mendorong orang untuk sebenarnya berkolaborasi. 

Dan hal terakhir yang penting, meskipun, adalah, setelah Anda memilih nama dan setelah Anda memilih swasta atau publik, klik HTML5, ikon oranye besar kedua dari kiri, dan kemudian klik Buat Workspace. Dan itu mungkin akan mengambil satu menit atau lebih, tetapi Anda kemudian akan memiliki lingkungan, setelah Anda melakukan itu, yang terlihat mengingatkan apa yang saya miliki di layar di sini sekarang. Tapi, sekali lagi, itu mungkin mengambil satu menit atau lebih untuk sampai ke layar ini setelah Anda mengklik Buat Workspace. Tapi hanya bendera saya lebih jika Anda ingin me untuk melihat pada sesuatu atau saran. Baiklah. Jadi aku akan latar belakang ini untuk saat ini. Menelepon saya lebih jika Anda tampaknya memiliki kesulitan teknis. Tapi, sekali lagi, itu mungkin mengambil sedikit untuk itu untuk membuka. Dan mari kita pergi ke depan dan berbicara tentang apa itu benar-benar berarti untuk membuat halaman web, apa HTML, dan bagaimana semua ini sekarang interkoneksi seperti yang kita mulai untuk benar-benar menggunakan beberapa teknologi. Jadi ternyata yang saya dapat pergi pada Mac sedikit saya di sini, membuka program sederhana yang disebut TextEdit, atau pada Windows aku bisa terbuka sesuatu yang disebut Notepad.exe. Dan aku bisa hanya cukup melakukan sesuatu seperti ini-- "halo, dunia." Dan kemudian saya bisa menyelamatkan ini sebagai hello.txt Jadi tidak ada sihir di sana. Ini tidak ada hubungannya dengan web pemrograman, tidak ada hubungannya dengan HTML. Hanya menciptakan file teks sederhana. Tapi ternyata web Halaman secara harfiah hanya itu. Ini adalah teks file teks yang berisi sederhana Anda mungkin mengetik di keyboard, tetapi biasanya tetapi tidak selalu berakhir di tidak Txt tapi Html atau .htm. Dan Anda tidak hanya mengetik kata-kata dalam file. Anda benar-benar harus menggunakan hal-hal yang disebut tag atau, lebih umum, sesuatu yang disebut bahasa markup. 

Jadi aku akan sangat cepat mengetik dan kemudian menjelaskan berikut. Aku akan pertama ketik ini, yang mengatakan, hey, browser, di sini datang Halaman web yang ditulis dalam HTML. Dan dua hal ini bersama-sama mengatakan, hey, Browser, berikut ini memang HTML. Hei, browser, di sini datang kepala atau bagian atas halaman saya. Hei, browser, dalam puncak halaman saya, menempatkan judul yang, "halo, dunia." Hei, browser, setelah kepala saya Halaman, inilah tubuh halaman saya. Dan, hey, browser, tubuh saya Halaman juga harus mengatakan, "Halo dunia." Jadi apa adalah rincian menonjol di sini? Ini adalah apa yang umumnya disebut doc-deklarasi tipe, dan, terus terang, itu sedikit sulit untuk menghafal ini pada awalnya. Anda hanya jenis copy-paste. Ini adalah cara yang formal mengatakan, hei, browser, Saya menggunakan HTML versi 5 yang keluar agak baru-baru. Ini adalah mantra ajaib bahwa beberapa manusia dengan rasa miskin desain memutuskan untuk menempatkan di paling atas dari file. Meskipun itu adalah sedikit misterius, itu saja itu means-- hey, browser, di sini dilengkapi dengan versi 5 dari HTML. 

Sisa ini telah bersama kami untuk beberapa waktu sekarang, secara historis, tapi sudah berkembang, dan itu mungkin telah mendapatkan sedikit lebih sederhana. Perhatikan beberapa karakteristik dari apa yang saya disorot. Ada hal-hal ini dengan siku brackets-- braket kiri dan braket yang tepat. Dan melihat simetri sini. Dan dengan simetri, maksud saya, sama seperti aku memiliki start tag ini di sini atau tag terbuka jika Anda mau, di sini saya memiliki tag dekat atau tag akhir yang yang berbeda hanya sejauh itu ini slash di awal kata HTML. Dan Anda bisa memikirkan ini karena aku santai mengusulkan sebelumnya, hey, Browser, di sini datang beberapa HTML. Dan, sebaliknya, hey, browser, itu itu untuk HTML-- awal dan akhir. 

Sementara itu hey, browser, di sini datang kepala halaman saya. Hei, browser, itu saja untuk kepala. Hei, browser, di sini adalah tubuh halaman saya. Hei, browser, itu saja bagi tubuh. Dan dalam yang beberapa teks yang sewenang-wenang untuk saat ini. Dan di dalam kepala, sementara itu, beberapa sewenang-wenang tetapi ditandai, sehingga untuk berbicara, teks yang mengatakan, judul halaman saya harus "halo, dunia." Sekarang, untuk saat ini, Anda bisa berasumsi browser yang memiliki only-- atau, lebih tepatnya, halaman web memiliki hanya dua bagian- kepala dan tubuh. Dan kepala umumnya hanya seperti menu bar, barang-barang benar-benar hanya di bagian paling atas. Dan tubuh adalah keberanian halaman, segala sesuatu dalam persegi panjang besar yang mengisi layar. Jadi aku akan pergi ke depan dan melakukan hal ini. Aku akan pergi ke depan dan klik Simpan, File Save. Dan aku akan menyimpan ini sebagai hello.html, dan aku hanya akan meletakkannya di desktop saya. Dan aku akan pergi Cobalah dan klik Simpan. Dan notice-- Mac saya di Setidaknya berteriak padaku. Apakah Anda yakin ingin melakukan ini? Dan aku akan mengatakan, ya, gunakan HTML. Aku tahu lebih baik dalam hal ini. Dan sekarang aku akan pergi ke desktop saya di mana saya memiliki file ini tiba-tiba. Dan aku akan klik dua kali-itu. Dan Anda akan melihat bahwa, dengan default, Chrome membuka. Itu karena itulah browser default saya. Dan ia hanya mengatakan, "Halo, dunia." Tetapi mengatakan "halo, dunia "di dua tempat. Perhatikan kiri atas. Cukup sulit untuk melewatkan itu. Ini besar dan tebal. Dan di mana lagi hal itu tampaknya mengatakan, "Halo, dunia"? 

AUDIENCE: Tab. 

DAVID J. Malan: Ya, tab itu sendiri. Jadi ketika saya mengatakan kepala Halaman ini semuanya top-- dan memang ini adalah judul. Hanya saja di tab sini. Dan saya dapat menarik tab ini keluar sehingga tidak membingungkan. Ini hanya satu tab sekarang, dan memang kita melihat "halo, dunia" di sini dan "halo, dunia" di sini. Jadi cukup sederhana. Tapi itu juga cukup sederhana. Dan, sebenarnya, aku diperbesar. Aku dapat mengubah ukuran font hanya untuk memperbesar untuk aksesibilitas. Tapi sekarang mari kita lakukan sesuatu sedikit lebih menarik. 

Aku akan go-- whoops, biarkan saya kembali ke file teks saya. Aku akan kembali ke saya file teks, dan aku akan untuk mengubah ini dan mengatakan "Halo, Disney World." Menyimpan. Dan kembali ke saya Browser dan klik Reload. Dan sekarang, tentu saja, itu mengatakan "Disney World." Dan aku akan artifisial tampilannya hanya sehingga lebih mudah untuk melihat. Jadi sekarang, sayangnya, saya agak ingin to-- sebenarnya, itu fitur Mac. Saya ingin klik pada Disney World dan pergi ke suatu tempat seperti disney.com, tapi itu tidak bekerja. Jadi prinsip dasar dari web ini hyperlink, link yang pergi ke tempat lain. Jadi bagaimana saya melakukannya? Yah, aku hanya bisa mengatakan, "Halo, http://www.disney.com." Simpan ini. Reload. Tapi ini juga, tidak dapat diklik. Dan apa yang bagus di sini, meskipun ini bukan fungsional namun, adalah bahwa tampaknya bahwa Browser harfiah hanya melakukan apa yang saya katakan untuk dilakukan. Jadi jika saya hanya mengetik URL seperti ini, itu hanya akan menunjukkan URL. Saya perlu menggunakan tag atau markup bahasa untuk benar-benar memberitahu browser untuk berbuat lebih banyak lagi. Jadi aku akan pergi ke depan dan menghapus ini sejenak. Dan aku akan mengatakan, hey, Browser, mulai jangkar di sini, link sehingga untuk berbicara. Dan hiper-referensi, tujuan jangkar itu, harus URL ini. Dan perhatikan kutipan saya. Saya bisa menggunakan tanda kutip tunggal, juga, tetapi Anda harus konsisten, dan saya akan umumnya hanya menggunakan tanda kutip ganda untuk tetap sederhana. Perhatikan Aku akan menutup tag. Dan maka di sini saya akan mengatakan, "Disney World." Dan sekarang aku butuh symmetry-- terbuka braket, / a, ditutup braket. 

Jadi apa yang saya diperkenalkan? Kami punya beberapa tag sudah. HTML, Head, Judul, Body, semua tag, sehingga untuk berbicara, dengan rekan-rekan terbuka dan tertutup. Tapi pemberitahuan, ini adalah semacam dari dasarnya berbeda. Ini adalah apa yang akan kita sebut di HTML atribut. Dan atribut adalah hanya sepasang kunci-nilai. Ini adalah hal yang umum di komputer science-- pasangan kunci-nilai. Ini semacam alat perdagangan. Kunci dan nilai. Sebuah kata dan kemudian beberapa Dengan kata lain atau kata-kata. Dan dalam hal ini, kuncinya adalah href, dan nilai adalah bahwa URL lengkap. Dan apa atribut dilakukannya itu mempengaruhi perilaku tag. Dan dalam hal ini, kita perlu untuk mempengaruhi perilaku tag anchor, karena kita perlu jangkar link ini ke suatu tempat. Dan bagaimana Anda melakukannya adalah dengan cara atribut. 

Jadi aku akan pergi ke depan dan menyimpan file sekarang. Kembali ke browser dan reload. Dan, voila, kita sekarang memiliki awal dari sebuah halaman web yang sah. Super sederhana, tetapi jika aku membawa lebih pemberitahuan ini-- di sudut kiri bawah, itu super-kecil. Tapi Anda melihat www.disney.com. Dan jika saya klik, memang ini whisks saya pergi ke disney.com. Sekarang, hal penasaran di sini adalah bahwa hal itu tidak yang best-- URL yang paling berharga, tapi itu baik-baik saja karena file ini tidak ada di World Wide Web. Ini ada sebagai file lokal di rupanya Pengguna saya directory-- / jharvard-- untuk John Harvard-- / desktop yang. Tetapi memiliki URL. Itu hanya kebetulan lokal. Sayangnya, tak satu pun dari Anda dapat mengunjungi ini, karena jika Anda mengetik URL ini, Anda akan memberitahu browser Anda, mencari file yang bernama hello.html pada hard drive Anda. Dan, tentu saja, kecuali Anda telah telah mengikuti bersama secara manual, itu tidak akan ada di sana. 

Jadi itu baik-baik saja. Kami masih perlu cara, akhirnya, untuk mendapatkan file ini ke web, tapi mari kita menggoda terpisah beberapa implikasi keamanan dari apa yang kita hanya melihat dan mengikatnya kembali ke awal diskusi dari pagi ini. Ternyata, jika Browser harfiah hanya melakukan apa yang saya katakan itu untuk melakukan, dan tampaknya menjadi kasus bahwa tag anchor adalah dipengaruhi oleh nilai atribut yang disebut href ini tetapi menampilkan ini teks, ini akan tampak menyiratkan bahwa aku bisa meletakkan URL di kedua tempat dan kemudian kembali dan sekarang melihat URL dan pergi ke URL. Perhatikan, jika saya arahkan kursor ke kiri bawah, Aku memang akan masih disney.com. 

Jadi, jika Anda sudah pernah phished-- P-H-I-S-H-E-D-- dengan salah satu email palsu dari seperti PayPal bank Anda, Anda mungkin sudah mendapatkan link dalam dari email yang Anda membaca bahwa Ia minta agar Anda klik di sini untuk pergi confirm sandi atau konfirmasi tanggal lahir Anda atau sosial atau sesuatu yang secara sosial rekayasa Anda untuk mengungkapkan informasi. Yah, aku bisa jenis mengambil keuntungan dari ini, tidak bisa saya? Saya bisa mengatakan sesuatu seperti, www.paypal.com. Dan bukannya disney.com, saya bisa pergi ke, seperti, badguy.com. Reload. Dan bagaimana mudah untuk menipu, terutama pembaca non-teknis atau sepintas membaca pembaca daripada klik link seperti ini, yang jika saya klik itu-- Aku benar-benar tidak ingin pergi badguy.com. Aku tidak tahu apa yang sebenarnya ada. Jadi paypal.com, pemberitahuan, adalah apa yang dikatakan itu akan, tapi tentu saja, jika saya melihat ke bawah super-rendah, itu sedikit kabur, tetapi mengatakan badguy.com. Itulah satu-satunya memberitahu sekarang bahwa saya akan pergi ke tempat yang salah. Dan ketika saya mengatakan sebelumnya bahwa bank benar-benar tidak harus mendorong atau kereta pengguna ke link mengklik, ini adalah salah satu manifestasi dari itu. Dan itu yang sederhana. Anda sekarang musuh jika Anda melakukan sesuatu seperti ini dan mencoba untuk mengelabui pengguna ke mengunjungi website Anda. Tapi untuk saat ini, kami akan terus hal-hal baik dan bersih. Kita akan pergi ke depan dan mundur perubahan ini. Kembali halaman tersebut. Dan aku kembali ke disney.com. 

Mari kita lihat apakah kita tidak bisa menggoda ini terpisah sedikit lebih. So "Halo, Disney World." Aku akan mengatakan di sini. Mungkin aku akan membuat beberapa ruang. "Kami harap Anda menikmati masa tinggal Anda!" Menyimpan. Reload. Ini tidak rea-- itu tidak apa yang dimaksudkan, kan? Maksudku, jika saya memperlakukan teks saya file seperti pengolah kata, apa yang Anda harapkan akan terjadi di sini? Ya, saya merasa seperti ada harus satu baris di sini, jadi rasanya kereta dalam beberapa cara. Tapi itu benar-benar disengaja, karena sama seperti sebelumnya, browser hanya akan melakukan apa yang Anda katakan untuk dilakukan. Saya belum diberitahu itu untuk istirahat garis. Aku sudah tidak diberitahu itu bergerak turun, bahkan meskipun, intuitif, aku merasa seperti aku lakukan. Jadi ternyata kita perlu lebih markup sedikit, dan aku akan memperbaiki hal ini sebagai berikut. Aku akan Pendahuluan ini pertama halo dengan apa yang disebut tag paragraf. Dan kemudian aku akan pergi ke depan dan membungkus kalimat lainnya ini di tag paragraf lain, meskipun mereka paragraf super-pendek. Sekarang aku akan menyelamatkan. Reload. Dan sekarang kita memiliki ruang, dan kami semacam memiliki semantik dua paragraf terpisah. 

Itu semua baik dan bagus, tapi itu akan menyenangkan untuk menambahkan gambar ke halaman ini, jadi aku akan pergi mencari Mickey Mouse di Google Images. Dan hanya untuk bersenang-senang, aku akan ambil gambar ini. Aku akan pergi ke depan sekarang dan ambil URL dari gambar ini, meskipun ada yang berbeda cara untuk melakukan ini. Untuk saat ini, aku hanya akan menyalin URL. Aku akan kembali ke teks saya File, dan aku akan mengatakan di sini, img src = kutipan tanda kutip URL, super panjang. Dan kemudian gagasan tentang gambar sedikit berbeda. Ada benar-benar tidak ada gagasan awal gambar dan berakhir gambar, seperti sebuah awal tag tag akhir. Jadi rasanya sedikit aneh untuk saya semantik untuk melakukan hal ini, memiliki tag dekat-gambar. Ini tidak benar. Ini sangat benar, dan itu mendorong, tapi ada notasi singkat. Aku agak bisa secara simultan membuka dan menutup tag yang sama, dan yang akan membuat browser bahagia. Jadi itu hanya sedikit lebih ringkas untuk hal-hal yang secara konseptual benar-benar tidak masuk akal untuk memulai dan akhir. Mereka hanya berada di sana, atau mereka tidak. 

Jadi aku akan menyimpan ini dan kembali untuk saya "halo, dunia" halaman dan isi ulang. Dan itu sedikit di luar kendali, karena gambar yang sebenarnya sedikit besar, tapi itu OK. Aku bisa mengubah ukurannya dalam sebuah program. Atau Anda tahu apa. Hanya untuk menunjukkan, aku akan benar-benar mengatakan bahwa lebar hal ini harus hanya menjadi 200 pixel, 200 titik. Biarkan aku pergi ke depan dan menyimpan dan kembali, dan sekarang halaman terlihat sedikit lebih masuk akal. Tapi perhatikan pola. Yah, aku sudah jenis diajarkan semua HTML dalam arti, setidaknya konseptual, karena semua HTML adalah adalah ini tags-- tag terbuka, tag ditutup, dan atribut yang memodifikasi perilaku mereka. Dan, tampaknya, setiap tag dapat memiliki nol atau satu atau dua atau lebih atribut, masing-masing yang melakukan sesuatu yang sedikit berbeda. Sekarang, bagaimana Anda tahu apa yang ada? Anda hanya mendengarkan seseorang seperti saya memberitahu Anda apa yang ada, atau Anda hanya Google sekitar untuk tutorial pada HTML, dan itu benar-benar sederhana. 

Sesungguhnya, ketika saya masih undergrad tahun yang lalu dan belajar HTML, salah satu pengajaran matematika saya asisten hanya menghabiskan sedikit waktu les saya untuk seperti setengah jam, satu jam, dan kemudian aku sedang dalam perjalanan. Aku sedang dalam perjalanan menuju pembuatan situs yang paling mengerikan yang pernah, yang, tampaknya, saya belum benar-benar berkembang di luar. Tapi intinya adalah bahwa, sekali Anda memahami ini ideas-- sederhana jika misterius text-- tetapi ini sederhana ide untuk memulai sebuah pemikiran dan menutup pikiran, menjaga segala sesuatu baik seimbang, mencari sesuatu, memodifikasi perilaku tag itu, itu benar-benar semua ada untuk itu. Dan pada kenyataannya, jika kita sekarang pergi ke sesuatu seperti google.com-- sebenarnya, mari kita pergi tempat yang sedikit lebih reasonable-- stanford.edu. Dan aku akan pergi ke Lihat, Developer, View Source. Itu jelek, tapi notice-- dan aku akan memperbesar pemberitahuan beberapa hal yang familiar sudah. Ada ini di sini, yang merupakan browser. Di sinilah HTML5. Ada HTML. Rupanya, ada sebuah atribut yang saya tidak menggunakan yang menentukan bahasa halaman, dan ini dapat membantu dengan otomatis terjemahan dan hal-hal seperti itu. Berikut kepala halaman. Berikut judul halaman Stanford. Ada tag aku tidak berbicara tentang tag Meta yet--. Ini hanya semacam informasi latar belakang. Ini membantu dengan SEO, atau Optimisasi Mesin Pencari, atau Google-hasil pencarian atau sejenisnya. Tetapi jika kita terus mencari, terus mencari, inilah tag Tubuh. Dan ada tandan lainnya tag kita sudah tidak bicara tentang belum. Tapi Div adalah salah satu untuk pembagian halaman. Ini seperti sebuah persegi panjang tak terlihat jika Anda jenis ingin mental membagi halaman Anda ke dalam unit yang berbeda secara online. Dan kemudian banyak divs I lihat, sesuatu yang disebut Class, tapi kami akan kembali ke itu. 

Ini Bentuk interesting--. Formulir seluruh web. Setiap kotak pencarian Anda pernah digunakan adalah formulir. Dan, jadi, mari kita benar-benar melihat. Bentuk. Tindakan. Aksi formulir ini, untuk apa pun alasan historis, adalah URL itu. Metode adalah "post." Ternyata permintaan HTTP dapat menggunakan kata kerja "mendapatkan," seperti yang kita lihat sebelumnya, atau "post." Dan akan melihat perbedaan ini dalam sekejap. Mari kita benar-benar melihat apa ini. Biarkan aku kembali ke halaman Stanford. Bentuk apa yang mereka bicarakan tentang, menurut Anda? Apa yang melompat keluar pada Anda? 

AUDIENCE: Cari kotak. 

DAVID J. Malan: Ya. Jadi di bagian kanan atas di sini adalah kotak pencarian ini. Dan itulah bagaimana mereka menerapkan itu-- sebuah tag yang secara harfiah bentuk open-braket. Dan kemudian mari kita mencari sesuatu. Mari kita mencari seorang teman dari mine-- "Nick Parlante." Memasukkan. Dan tentu saja, ia pergi ke URL yang sedikit berbeda. Biarkan aku kembali ke sini. Mari kita cari "kursus." Sial. Pergi ke URL yang berbeda. Jadi, Stanford menambahkan beberapa sihir bahwa mereka tidak membawa saya ke URL yang kita lihat di tindakan atribut ada. Namun bentuk ini di sini diimplementasikan murni dengan cara markup ini di sini, tag ini. Bahkan, inilah masukan untuk jenis pencarian yang Anda inginkan. Berikut adalah masukan untuk jenis lain dari pencarian. Berikut adalah masukan untuk string itu sendiri. Dan tujuannya adalah tidak untuk membungkus pikiran kita sekitar semua tag tapi hanya untuk melihat. Itu hanya membuka dan menutup tag dan mencari hal-hal. Ya? Victoria? 

AUDIENCE: [tidak terdengar] DAVID J. Malan: Itu pertanyaan yang bagus. Itu sedikit rumit untuk melihat. Biarkan aku datang kembali ke Pertanyaan hanya dalam beberapa menit ketika kita melihat sesuatu yang disebut CSS, atau cascading style sheet, dan kita dapat mencoba untuk menyimpulkan banyak dari halaman. Jadi jika sekarang kita melihat di google.com, mari kita lihat apa halaman mereka terlihat seperti. Anda akan they're-- yang lucu hari ini. BAIK. Semua selesai. Baiklah, jadi View Source. Anda akan berpikir Google memiliki kode sumber yang benar-benar bagus. Jadi, tampaknya, apa yang terjadi di sini? Dan pada kenyataannya, ini bahkan tidak HTML. Ini adalah sesuatu yang disebut JavaScript. Dan mari kita terus dan pergi. Aku bahkan tidak tahu di mana halaman dimulai. Aku akan menggunakan Command F, terbuka braket HTML. Baiklah, itu dia. Saya menemukan awal halaman, dan ada begitu banyak hal di sini. 

Apa yang sebenarnya terjadi? Nah, Anda tahu apa, kita bisa membersihkan ini. Jika saya bukannya pergi ke ini Periksa toolbar, alat diagnostik khusus ini, dan pergi tidak Jaringan, di mana kita terus hari ini, tetapi jika aku pergi ke Elements, apa yang benar-benar baik adalah bahwa browser memiliki banyak mata jauh lebih baik daripada yang saya lakukan. Dan browser dapat membaca yang berantakan dari halaman web, bahwa HTML email kita hanya memandang, dan itu bisa mengurai atau membaca dan menganalisis dan memformat ulang dengan cara yang ramah-manusia yang bagus. Jadi apa yang saya lihat sekarang di layar ini di sini di bawah Elements, konten yang sama persis, tapi mereka sudah menjorok segalanya, mereka sudah berwarna itu, tapi itu adalah teks yang sama persis yang saya download dari server. 

Dan apa yang bagus saat ini adalah saya bisa melihat dalam tubuh, untuk pemberitahuan instance--, Halaman ini masih terdiri hanya kepala dan tubuh, dan saya hierarkis bisa menyelam di sini. Perhatikan bahwa Google tampaknya memiliki untuk divs-- ini satu dan yang satu ini. Saya dapat memperluas itu. Ada sejumlah besar divs lainnya. Jadi itu sedikit rumit. Tapi tunggu. Hal ini tampaknya jauh lebih dibaca, relatif, dari ini. Mengapa Google memalukan sendiri dengan hanya mengirimkan ini kekacauan besar dari kode beberapa semacam hanya untuk melaksanakan sesuatu yang terlihat begitu sederhana pada pandangan pertama? Seperti, mengapa tidak mereka menambahkan lebih banyak ruang? Mengapa mereka tidak tekan Enter seperti yang kulakukan? Lihatlah seberapa baik aku pada menulis halaman web. Saya tekan Enter begitu rajin. Aku menjorok jadi semuanya begitu cantik dan dibaca. Mengapa Google tidak berlatih sama? 

AUDIENCE: [tidak terdengar] DAVID J. Malan: Baik. Sangat adil. Mereka tidak memiliki beberapa Orang di Google secara manual memperbarui halaman rumah lagi. Ini bukan 1999 lagi. Sehingga mereka memiliki perangkat lunak. Mereka memiliki alat-alat lain yang menghasilkan dinamis mereka HTML. Tentu saja, bahwa kode itu sendiri ditulis oleh manusia, tetapi kenyataannya adalah, itu cukup adil untuk mengatakan, browser tentu tidak peduli bagaimana berantakan kode ini. Tapi ada bahkan lebih alasan teknis menarik bahwa Google mendistribusikan HTML mereka kode ceroboh seperti itu, tampaknya cara luar biasa semua dikemas bersama-sama dengan sangat sedikit way-- sangat sedikit di jalan format seperti yang kulakukan. 

AUDIENCE: [tidak terdengar] 

DAVID J. Malan: Lebih Cepat? Mengapa? Dan apa yang Anda katakan, Lydia? Lebih cepat? Mengapa lebih cepat? AUDIENCE: [tidak terdengar] DAVID J. Malan: Ada tidak ada ruang untuk membaca. Ya. Jadi berpikir tentang apa ruang adalah. Jadi masing-masing karakter pada keyboard mengambil beberapa jumlah ruang untuk mewakili, baik secara fisik, seperti itu memakan banyak ruang, atau entah bagaimana di bawah hood, yang membutuhkan memori. Dan sebagai aside-- dan kami akan berbicara lebih banyak tentang tomorrow-- ini setiap karakter pada keyboard biasanya membutuhkan 8 bit, atau satu byte. Jadi pola 8 nol atau yang, atau hanya 1 byte, seperti yang kita manusia biasanya akan mengatakan. Jadi itu kecil, tapi itu masih non-nol. Ini masih beberapa jumlah ruang. Jadi jika seorang insinyur atau Google hit spasi hanya sekali, dan anggaplah Google-- itu super-popular-- misalkan satu miliar orang kunjungi halaman rumah mereka sehari, atau jumlah orang kunjungi halaman rumah miliar kali sehari, berapa banyak byte tambahan memiliki yang software engineer hanya biaya Google dengan memukul atau ruang nya bar sekali? 

AUDIENCE: [tidak terdengar] DAVID J. Malan: Tidak cukup buruk. Hanya satu byte kali miliar. jadi a-- AUDIENCE: 8 miliar gigabyte. DAVID J. Malan: Tidak 8 miliar. 8 miliar byte. Tapi 1 gigabyte. 1 gigabyte akan menjadi satuan ukuran. Jika ia melakukan dua ruang, 2 gigabyte. Tiga gigabyte. Kanan? Sisik mahal. Dan dalam kasus-kasus seperti Google, yang diberikan, adalah kasus yang ekstrim, ada masalah lain yang muncul hanya dengan membuat keputusan yang sangat wajar atau mengambil tindakan manusia sangat sederhana, karena memiliki efek luar biasa ini. Jadi salah satu alasan ini terlihat begitu terkompresi adalah persis seperti Victoria said-- itu hanya dihasilkan oleh komputer pula. Jadi bukan masalah besar. Biarkan browser mengetahuinya. Tetapi juga sengaja tidak memiliki banyak ruang, karena ruang tidak diperlukan. Dan ruang benar-benar membutuhkan uang. 

Ini baik biaya waktu, karena hanya untuk mendorong bahwa lebih banyak data dari markas google.com saja telah mendapat untuk mengambil beberapa jumlah waktu, bahkan jika itu milidetik atau mikrodetik, namun yang menambahkan sampai lebih banyak pengguna, atau lebih mungkin, mungkin biaya uang. Google mungkin menghubungkan ke orang lain di dunia, salah satu dari mereka mengintip poin, dan jika mereka memiliki beberapa jenis hubungan keuangan dimana data mereka biaya uang, mereka mungkin juga meminimalkan jumlah data mereka menyemburkan di koneksi internet mereka. 

Jadi hal yang lucu, meskipun, pada akhirnya, atau mungkin hal meyakinkan, adalah bahwa meskipun ini terlihat sangat luar biasa, di akhir hari, itu masih prinsip yang sama persis seperti Halaman ini sangat sederhana di sini dari HTML halaman. Jadi hanya untuk meringkas dan sehingga Anda memiliki versi kanonik jika Anda tidak berikut bersama dengan pilihan di sini, di sini mungkin yang paling sederhana dari halaman web, jadi sesuatu untuk bermain dengan mungkin nanti. 

Nah, mari kita memperkenalkan beberapa ide lain sekarang. Kami akan memperkenalkan sesuatu yang disebut tag gaya. Kami bisa menyesuaikan dgn mode halaman ini dengan cara yang lebih menarik. Jadi sedangkan email HTML adalah semua tentang menandai data, semacam menentukan ke Browser bagaimana struktur data, di mana harus menaruhnya, CSS, atau cascading style sheet, adalah bahasa kedua yang umumnya akan bercampur dengan HTML karena kami akan see-- tapi kita bisa membersihkan yang di sebuah moment-- yang mengambil itu mil akhir, dan itu stylizes itu. Ia mendapat warna tepat, font ukuran tepat, positioning yang tepat. Ini semua tentang estetika atau memformat, bukan tentang data fundamental itu sendiri. Dan cara termudah untuk menunjukkan ini mungkin dengan contoh. Jadi aku akan pergi ke file teks sederhana saya. Dan hanya dalam beberapa saat, aku akan berjalan kita melalui proses melakukan hal ini diri kita sendiri. 

Aku akan kembali ke file saya di sini dan kembali halaman tersebut hanya untuk mengkonfirmasi apa yang tampak seperti. Di situlah kita berada di saat ini. Saya merasa seperti anak-anak akan menikmati memiliki beberapa warna untuk halaman web ini. Jadi aku akan pergi ke sini ke kepala halaman. Dan aku akan melakukan gaya, / gaya. Dan kemudian di dalam ini, saya akan untuk memberitahu tubuh page-- saya dan format ini, di Sepintas, mungkin sedikit aneh tapi konvensional. Aku akan mengatakan bahwa latar belakang warna halaman ini harus hijau. Dan ini sayangnya semacam bukan desain terbaik. Perhatikan bahwa sebelumnya dalam dunia HTML, Saya mengatakan bahwa atribut apakah ini pasangan kunci-nilai. Sesuatu sama kutipan tanda kutip "sesuatu." Dalam dunia CSS, yang dirancang oleh beberapa orang yang berbeda, mereka memutuskan bahwa, dalam mereka dunia, kunci-nilai pasangan akan menjadi kata usus sesuatu. Jadi itu ide yang sama, meskipun. Ini menghubungkan nilai dengan beberapa kunci yang entah bagaimana mempengaruhi perilaku halaman ini. 

Dan Anda mungkin bisa menebak. Apa ini mungkin akan untuk melakukan bahkan jika Anda belum pernah dilihat HTML atau CSS sebelumnya? AUDIENCE: Mengubah warna latar belakang. DAVID J. Malan: Ya, mengubah warna latar belakang. Dan khususnya warna latar belakang dari tubuh. Tapi sejauh yang tubuh untuk saat ini adalah web page-- itu satu-satunya hal yang di bawah judul bar really-- itu mungkin akan mempengaruhi hal yang sama. Jadi mari kita lihat. Mari kita simpan ini. Pergi di sini dan reload. Ini cukup mengerikan. Dan apa yang terjadi di sini adalah efek samping. Aku hanya memilih gambar ini secara acak. Mengapa hijau tidak menyerap belakang Mickey? AUDIENCE: [tidak terdengar] DAVID J. Malan: Tepat. Ternyata gambar, cukup banyak semua gambar yang mungkin kita gunakan, semua rectangles-- persegi panjang. Bahkan jika Mickey memiliki beberapa kurva untuk dirinya sendiri dan memiliki latar belakang, latar belakang yang harus menjadi sesuatu. Itu harus putih. Itu harus hitam atau sesuatu yang lain. Hal ini dapat transparan. Dan pada kenyataannya, aku bisa membuka Mickey Mouse di sini dalam program yang disebut Photoshop atau yang serupa dan mengubah semua putih yang latar belakang transparan, begitu hijau akan bersinar. Tapi itu sesuatu yang saya perlu untuk meminta dari diri sendiri atau seorang seniman grafis atau desainer di saya perusahaan, misalnya, untuk dilakukan, terutama karena saya hanya meminjam satu ini dari internet. Tapi itulah mengapa hal ini terjadi. 

Jadi apa lagi yang mungkin ingin kita lakukan? Yah, kita mungkin ingin mengatakan kami sangat berharap Anda menikmati masa tinggal Anda. Dan untuk penekanan, saya ingin untuk membuat ini kuat, dan jadi saya akan mengatakan terbuka yang kuat dan menutup kuat dan kemudian kembali. Dan itu agak sulit untuk melihat pada proyektor tapi mungkin benar-benar sekarang melompat keluar pada Anda sedikit lebih. Sehingga Anda dapat menambahkan huruf miring dalam hal ini cara, menghadap berani dengan cara ini. Kita bisa mengubah warna. Bahkan, hanya untuk iseng, aku akan pergi ke depan dan melakukan hal ini. Aku tidak benar-benar suka bagaimana saya paragraf yang dekat ini bersama-sama, jadi saya mungkin melakukan sesuatu seperti ini. Aku akan memberitahu browser, mengubah setiap tag paragraf untuk memiliki, mari say-- sebenarnya, Anda tahu apa, mari kita sejajarkan teks-align, center. Dan lagi, aku tahu ini hanya karena seseorang mengajarkan kepada saya atau saya mencarinya di referensi online. Jadi biarkan aku menyimpan ini. Dan, ah, sekarang aku sudah berpusat gambar di sana. Dan sebenarnya, Anda tahu apa, jika Aku memindahkan gambar saya ke sebuah paragraf tag-- jadi sebuah paragraf ketiga, meskipun itu tidak teks. Mari kita simpan itu dan reload. Sekarang halaman mulai terlihat baik of-- Maksudku, itu masih sangat jelek, tapi setidaknya itu terlihat seperti aku menghabiskan dua menit, bukan satu menit membuat. 

Dan, secara bertahap, bisa kita buat perubahan estetika sekarang ke halaman? Aku tidak benar-benar mengubah data dalam Halaman selain menambahkan kata benar-benar. Saya telah menambahkan metadata, jika Anda mau. Hei, browser, membuat Kata "benar-benar" berani. Namun data tersebut tidak kuat. Itu metadata. Data adalah "benar-benar." Jadi kita masih memiliki beberapa konsep yang sama seperti sebelumnya. Sekarang, tentu saja, ini bukan di web, jadi saya akan melakukan satu langkah terakhir di sini. 

Aku akan pergi ke hello.html dan hanya menyorot dan copy ini. Dan sekarang aku akan pergi ke Cloud9, yang Saya akan memandu Anda melalui hanya dalam beberapa saat. Dan kemungkinan besar Anda akan segera, jika belum, di layar seperti ini. Dan biarkan aku hanya memberikan cepat tur apa yang sebenarnya Cloud9 adalah. Jadi sekali lagi awan 9 adalah layanan berbasis cloud ini yang memberi Anda dan saya ilusi memiliki mesin virtual kita sendiri di awan, secara teknis wadah di awan, bahwa kita memiliki penuh hak akses administratif untuk. Jadi dalam teori, tidak ada lain di dunia memiliki Akses ke layar saya melihat sekarang, kecuali mungkin orang-orang yang menjalankan situs, karena secara teknis mereka memiliki akses fisik dan sebagainya. 

Jadi apa yang kita lihat di lingkungan ini? Aku akan zoom out, karena itu agak kecil. Dan biarkan saya menunjukkan lebih di sini untuk sesaat. Di sisi kiri dan Anda layar, ada file browser di sebelah kiri. Sangat mirip dalam roh untuk Mac OS dan Windows. Ini semua dari file dalam akun saya. Dan secara default, jika Anda account seperti saya, Anda akan melihat atau segera melihat helloworld.html dan readme.md. Di sini di sebelah kanan, ini adalah di mana file teks saya akan pergi. Jika Anda pernah menggunakan Microsoft Word atau Notepad atau TextEdit, ini adalah kata editing saya file akan pergi. Dan kemudian yang paling misterius Fitur lingkungan ini bahwa kita tidak akan benar-benar perlu menggunakan adalah di sini disebut Window Terminal. Jika Anda telah menggunakan DOS dari tadi, ini adalah Linux atau setara Linux dari DOS. Ini adalah interface-- berbasis teks tidak ada klik mouse, tidak ada menyeret. Semua dapat Anda lakukan adalah ketik perintah, tetapi perintah-perintah tersebut dapat membuat file, memindahkan file, terbuka direktori, direktori dekat, melakukan banyak hal. Tapi untuk saat ini, kita hanya akan menghabiskan waktu kita di sini. 

Dan jadi mari kita melakukan hal ini. Jika Anda berada di ini lingkungan, yang Anda harus jika Anda membuat ruang kerja sudah, pergi ke depan dan hanya pergi File, New sejenak. Dan itu akan memberi Anda baru tab di sini di tengah. Dan aku hanya-- dan mari pergi ke depan dan melakukan hal ini. Mari kita pergi ke depan dan sekarang jangan Berkas, Simpan dan pergi ke depan dan menyebutnya hello.html, tidak menjadi bingung dengan helloworld.html, yang datang dengan akun gratis yang baru Anda, yang hanya file sampel. Anda akan melihatnya tiba-tiba muncul, kemungkinan besar di sisi kiri, dan tab masih akan terbuka. Dan biarkan aku mendorong Anda sekarang untuk menciptakan file ini atau beberapa varian daripadanya. Dan jika Anda tidak bisa melihat itu pada layar, ini identik dengan slide Anda mungkin memiliki di tab lain. 

Jadi singkatnya, membuat halaman web pertama Anda, simpan, dan kemudian hanya dalam beberapa saat, Saya akan menunjukkan bagaimana Anda benar-benar dapat melihat ini. Tapi mengubah setidaknya satu hal. Ubah helloworld untuk sesuatu pilihan Anda sendiri, sehingga Anda yakin bahwa itu Anda mengajukan dan tidak yang saya buat. Baiklah. Dan ketika Anda ready-- ada rush-- ketika Anda siap, pergi ke depan dan menyimpan file setelah Anda membuat perubahan ini. Dan jika Anda mengklik tombol up menjalankan atas, ini harus membuka tab baru yang akan memberitahu Anda apa URL Anda dapat mengunjungi file Anda di, tapi mungkin butuh waktu untuk kutipan tanda kutip "mulai Apache," yang adalah nama dari web server. Jadi hati-hati untuk melakukan hal apa yang ada di file akhirnya. Jadi sekarang, saya akan memperbesar. Jika saya mulai mengetik open-braket HTML, pemberitahuan itu mendorong saya untuk menyelesaikan pikiran saya. Dan jika saya selesai pikiran saya, itu otomatis memberi saya tag penutup. Tapi harapan tersebut maka saya akan memukul Masukkan, dan kemudian bergerak di dalam sana dan jangan kepala di dalam dan maka saya melakukan tubuh dalam. Dan itu sedikit aneh pada awalnya, karena itu melakukan pekerjaan untuk Anda, tapi menyadari bahwa pada akhirnya menghemat keystrokes. Dan sebenarnya, fitur yang sangat umum pemrograman lingkungan hari ini baik untuk pengembangan web seperti ini dan pemrograman yang sebenarnya, yang akan kita bicarakan besok, adalah fitur auto-complete ini, hal-hal yang hanya memungkinkan programmer atau desainer mengetik lebih sedikit keystrokes untuk mencapai hal yang sama. Kadang-kadang itu baik, meskipun. Kadang-kadang itu hanya mengganggu. Dan, sekali lagi, setelah Anda ditranskrip slide atau beberapa varian daripadanya, Anda dapat mengklik tombol Run di bagian atas. Dan kemudian di bagian bawah jendela, Anda akan diberitahu apa URL Anda dapat mengunjungi halaman web Anda. Tambang, misalnya, adalah pada business-daharvard.c9users.io dan seterusnya. Baiklah, jadi, biarkan me-- pertanyaan? Pertanyaan lain tentang hanya mendapatkan ini kerja sebelum kita menambahkan fitur? Dan biarkan aku mengusulkan, hanya untuk mendapatkan orang-orang comfortable-- karena itu salah satu hal yang hanya copy-paste membabi buta apa yang saya lakukan. Tapi hanya supaya orang bergulat dengan setidaknya satu to-do, Aku akan menyalakan musik. Aku akan mengusulkan daftar hal yang berpotensi dapat menambahkan. Dan Anda pasti dapat menggunakan Google. Dan kenapa tidak kita hanya mengusulkan bahwa Anda mencoba untuk memecahkan setidaknya satu masalah tertentu di sini. Jadi dalam hal tag, biarkan aku menggunakan kembali ini di sini. 

Sebenarnya, saya menempatkan dalam bentuk tekstual. Katakanlah bahwa di antara tag kita mungkin gunakan di sini adalah beberapa tag di sini. Kami telah melihat tag paragraf. Sekarang itu akan auto-complete. tag paragraf, tag anchor. Katakanlah Anda ingin membuat sesuatu yang lebih besar, sehingga Anda mungkin like-- tag span dapat membantu. Nah, Anda mungkin perlu bantuan untuk itu hanya dalam beberapa saat. Kami telah melihat div. Anda akan melihat ada meja. Ada sesuatu yang disebut tr, td. Th, td. Kembali ke suatu saat. Apa lagi yang mungkin berguna? Ada yang kuat. Ada penekanan, atau lebih tepatnya em. There's-- apa lagi Anda mungkin suka di sini? Yah, kami akan mengambil lihat itu bersama-sama. Bentuk, yang pernah kita lihat. Ada bentuk. Ada masukan dan beberapa orang lainnya. Baiklah, jadi mari kita melakukan hal ini. Untuk menjawab Victoria pertanyaan, biarkan aku pertama hanya memastikan bahwa setiap orang bisa mendapatkan kerja halo mereka. Lalu biarkan saya memperkenalkan beberapa ide lain. Kemudian kita akan membiarkan orang memecahkan beberapa masalah pada mereka sendiri. Kemudian kita benar-benar akan kembali itu gagasan formulir, dan kami akan benar-benar kembali melaksanakan bersama-sama antarmuka front-end, sehingga untuk berbicara, untuk Google sendiri. Kami akan menggunakan Google sebagai akhir kembali dan membiarkan mereka melakukan kerja keras, pencarian, tapi kami akan menciptakan ujung depan Google dan form pencarian yang mereka miliki di halaman rumah mereka sendiri. Dan jadi kita akan kembali ke tag ini hanya sesaat. 

Jadi ini adalah apa yang saya mengusulkan beberapa saat yang lalu. Kita dapat menambahkan stilisasi yang ke Halaman dalam tag gaya ini, dan kami dapat menyesuaikan dgn mode latar belakang warna, perataan teks, apakah itu pusat atau kiri atau kanan. Tapi sangat cepat Anda akan menemukan atau desainer web akan menemukan bahwa ini menjadi sedikit berat, karena Anda melakukan apa yang disebut konten pencampuran dengan presentasi daripadanya. Anda mencampur data Anda dan estetika daripadanya. Dan pada kenyataannya, jika Anda mempertimbangkan apa yang akan terjadi atas time-- ini adalah sangat kecil Halaman web, tentu saja. Tapi jika saya menambahkan konten ke halaman ini dan saya menambah gaya ke halaman ini, Halaman sangat cepat mendapat lagi dan lagi dan lagi. Dan anggaplah bahwa saya ingin memiliki halaman web kedua yang saham beberapa atribut ini. Misalkan halaman web kedua saya untuk saya site-- juga, saya ingin pusat segalanya, dan saya juga ingin semuanya dengan latar belakang hijau. Aku cukup banyak akan harus copy dan paste beberapa baris ke dalam file kedua, yang terasa baik-baik saja. Ini akan memecahkan masalah. 

Tapi bagaimana jika saya ingin halaman ketiga atau halaman 30 atau halaman 40? Sekarang aku akan menyalin dan menyisipkan banyak duplikat kode dalam beberapa file. Dan anggaplah bahwa Saya memutuskan atau aku diberitahu, hey, kita tidak menggunakan latar belakang hijau lagi. Kita akan mulai menggunakan jeruk. Apa yang Anda harus mengubah? Nah, Anda harus mengubah gaya yang dari hijau ke oranye di berapa tempat? Seperti 30 atau 40 tempat. Ini membosankan. Ini rawan kesalahan. Ada sejumlah alasan di mana Anda tidak ingin mendorong bahwa jenis rasa sakit untuk diri sendiri. Sehingga tidak akan menyenangkan jika kita bisa mengambil apa yang saya hanya menempatkan antara dua kuning ini tag, gaya tag ini, faktor itu, dan meletakkan semua saya stilisasi ke dalam satu file sentral bahwa semua 30 atau 40 file saya yang lain meminjam dari atau entah bagaimana referensi, tidak seperti jaringan yang diagram yang kami lakukan sebelumnya? 

Jadi jika saya pergi di sini, aku akan benar-benar mengusulkan bahwa kita mengganti tag gaya dengan sesuatu disebut tag link, yang adalah mengerikan, mengerikan bernama, karena Anda tidak menggunakan tag link untuk membuat apa kita manusia tahu sebagai link dalam sebuah halaman web. Untuk itu, Anda gunakan yang tag? Bagaimana Anda membuat link di halaman web? AUDIENCE: a. DAVID J. Malan: a, atau jangkar tag, yang pergi ke Disney sebelumnya. Link tag di sini mengatakan ini-- link ke file yang disebut styles.css, hubungan yang akan menjadi bahwa itu stylesheet saya. Jadi ini adalah salah satu S di CSS-- cascading style sheet. Gaya sheet-- dua dari S di CSS. Lembar bergaya susun. Ini hanya berarti, hey, browser, pergi menemukan styles.css di server lokal dan menggunakannya sebagai stylesheet Anda, yang berarti dalam file yang akan menjadi semua stilisasi yang baru saja kita lakukan. Dan jadi apa file yang mungkin terlihat seperti yaitu ini. Dan aku hanya akan melakukan ini cepat Misalnya, karena kita tidak perlu untuk mendapatkan terlalu banyak ke dalam gulma sini. Tetapi jika saya copy ini, apa yang saya usulkan adalah bahwa programmer membuat file baru, tempelkan pada mereka lines-- whoops-- tempelkan di garis, simpan sebagai styles.css, dan kemudian, di file lain, menghapus semua itu dan menggantinya sebaliknya dengan tag link ini. Sehingga jika saya menghubungkan href = "styles.css", hubungan harus "stylesheet" tag dekat. Simpan itu. Kembali ke helloworld saya. Reload. 

Secara harfiah tidak ada yang terjadi. Itu adalah hal yang baik, karena berarti itu benar-benar semua kerja. Untuk membuktikan sebagai banyak, kira saya membuat typo, dan saya menyebutnya "styles.css" dengan modal S, yang merupakan tidak benar, dan kemudian kembali. Sekarang Anda bisa melihat hal itu tidak bekerja. Sekarang, mengapa? Nah, mari kita gunakan Teknik dari sebelumnya. Biarkan aku pergi ke depan dan, di browser saya, di Chrome, aku akan membuka yang khusus tab jaringan seperti sebelumnya, dan biarkan aku kembali halaman tersebut. Apa yang Anda tidak terkejut melihat sekarang? Atau mungkin Anda terkejut melihatnya. Either way, apa yang Anda lihat sekarang? AUDIENCE: [tidak terdengar] DAVID J. Malan: Ini tidak ditemukan. Mengapa tidak ditemukan? Nah, modal Styles.css-- S-- tidak ada. Saya misnamed itu. ketik sederhana. Tapi aku mendapatkan dimengerti sekarang 404, karena server mengatakan, hei, itu tidak ditemukan. Secara harfiah, saya tidak tahu di mana file yang. Jadi sebagai hasilnya, browser menunjukkan apa yang bisa, isi baku halaman, yang merupakan 200, HTML, tapi stilisasi yang tidak bisa ditambahkan setelahnya. Dan ini adalah apa yang dimaksud dengan Cascading. Anda dapat semacam menambahkannya setelah, dan itu semacam memurnikan estetika halaman web. Dan Anda bahkan dapat menimpa mereka gaya dengan file stylesheet belum lainnya jika kamu mau. Itu tidak ditemukan, meskipun, dalam hal ini, karena tentu saja, saya misnamed itu. Jadi saya harus memperbaikinya dulu. 

Jadi mari kita pergi ke depan dan mengusulkan berikut. Mari kita pergi ke depan dan melakukan hal ini. Dimulai dengan mungkin File helloworld Anda, saya hanya mengundang pasangan dari fitur saran. Jadi, Victoria, Anda ingin membuat beberapa teks lebih besar, kan? Baiklah, jadi kita bisa jangan membuat teks lebih besar. Dan kami akan setiap memetik off hanya satu masalah untuk memecahkan. Membuat teks lebih besar. Aku tidak akan repot-repot menulis ini ketika kita memiliki teknologi peluru tepat di sini. Jadi beberapa masalah. Jadi kita akan mencoba untuk membuat teks lebih besar. Baiklah. Apa lagi yang akan seseorang mengusulkan? Apa lagi yang kita inginkan dilakukan di halaman web? Mari kita datang dengan daftar singkat dari hal-hal dan kemudian mendelegasikan ke kelompok untuk memikirkan hal ini. 

AUDIENCE: [tidak terdengar] 

DAVID J. Malan: OK, teks posisi pada sisi yang berbeda dari halaman? Baiklah. Sesuatu yang lain. 

AUDIENCE: [tidak terdengar] DAVID J. Malan: Ini adalah. Jadi gif hanyalah sebuah format file yang berbeda. Kami hanya menggunakan, apa, yang png atau jpg mungkin? Kami menggunakan jpg. Jika Anda penasaran, suatu yang berlebihan menjawab pertanyaan Anda adalah jpg umumnya digunakan untuk foto, karena mendukung jutaan warna atau warna 24-bit. Sebuah gif umumnya digunakan untuk, seperti, meme internet ini animasi days--, seperti gifs animasi. Tapi itu terjadi untuk menggunakan warna yang lebih kecil palet, hanya 256 mungkin warna, tapi mendukung transparansi dan animasi. Dan kemudian ada png, yang mendukung transparansi dan warna yang lebih tapi tidak animasi. Jadi itu adalah trade-off. Jadi menambahkan gif, meskipun, akan fungsional setara dengan menambahkan png atau jpg. Ya. sumber gambar sama. Jadi sesuatu yang lain. Mari kita datang dengan sesuatu yang kami dikirim ke Victoria untuk dilakukan di sini. 

AUDIENCE: Tambahkan tombol untuk formulir. DAVID J. Malan: OK. Jadi menambahkan tombol untuk formulir. Dan kami akan melakukan yang bersama-sama. Sehingga akan menjadi Shalawat sempurna tepat setelah tantangan ini. Ada yang lain? Apa yang mungkin Anda lakukan? web terasa sangat underwhelming jika ini adalah semua yang bisa kita lakukan. AUDIENCE: Mengubah warna teks. DAVID J. Malan: Mengubah apa? AUDIENCE: Warna teks. DAVID J. Malan: Perubahan warna teks. Baiklah. Jadi, mari kita lakukan ini. Hanya lagi sehingga Anda tidak, hanya di luar kepala, melakukan persis apa yang saya lakukan, Aku akan menyalakan musik untuk mungkin lima menit di sini. Anda dipersilakan untuk menggunakan Google. Anda dipersilakan untuk bertanya kepada saya, dan Aku akan berbisik petunjuk di telinga Anda. Anda dipersilakan untuk melihat lebih pada bahu lain. Tapi memecahkan salah satu masalah ini. Tapi kami akan melakukan yang terakhir, membentuk satu, jika kita bisa, bersama-sama. Jadi lima menit untuk memecahkan salah satu dari masalah ini menggunakan Google, intuisi, atau cara lain yang tersedia untuk Anda. 

[MUSIC PLAYING] Baiklah. Jangan khawatir jika Anda ingin untuk menjaga bermain-main, tapi aku akan merusak pasangan jawaban ini. Jadi saran pertama dari Victoria adalah untuk membuat teks lebih besar. Jadi ada beberapa cara untuk melakukan hal ini. Aku saat ini dipulihkan layar saya untuk ukuran ini, meskipun aku sudah diperbesar artifisial hanya untuk melihat hal-hal. Dan mari kita lakukan ini. Biarkan aku pergi ke depan dan ambil beberapa teks Latin generik hanya supaya kita memiliki sesuatu untuk bekerja dengan. Jadi beri aku satu saat. Aku akan membuat tiga paragraf. BAIK. Ini akan menjadi contoh yang lebih baik. Jadi bagi yang penasaran, di hello.html saya, saya hanya disisipkan tiga masuk akal paragraf latin hanya supaya kita memiliki beberapa teks untuk bekerja dengan. Dan tujuan Victoria adalah untuk membuat beberapa teks lebih besar. Jadi saya bisa, seperti sebelumnya, pergi di sini. Dan biarkan aku melakukannya dengan cara yang benar. Aku akan memiliki link tag yang menunjuk ke file disebut "styles.css," hubungan dari yang lagi "stylesheet." Dan kemudian aku akan menyimpan yang dan membuka ini "styles.css." 

Jadi, seperti sebelumnya, saya memiliki kemampuan dalam file CSS ini untuk benar-benar menimpa default estetika dari halaman web, dan estetika default, tentu saja, cukup membosankan. Ini semacam ukuran font normal, hitam teks, latar belakang putih, dan sebagainya. Jadi misalkan saya ingin membuat semua teks ini lebih besar. Aku bisa melakukan beberapa hal. Dalam file styles.css saya, saya bisa mengatakan, Anda tahu apa, menerapkan berikut untuk tubuh halaman saya. Pergi ke depan dan membuat ukuran font 24 poin, yang merupakan nomor saya mungkin digunakan dalam Microsoft Word. Biarkan aku kembali ke web saya Halaman sini dan kembali, dan Anda dapat melihat bahwa itu sudah jauh lebih besar. Dan kita bisa mendapatkan sedikit gila, seperti yang kita dapat pada desktop-- sebuah membuat 96 poin. Reload. Dan itu semakin sedikit berat pada saat ini. 

Tapi aku bisa sedikit lebih tepat. Alih-alih menerapkan ini stylesheet ke tubuh halaman saya, apa lagi yang mungkin saya menerapkannya ke sebaliknya, apa tag lain yang mungkin masih fungsi dalam cara yang sama? 

AUDIENCE: The p tag? DAVID J. Malan: tag P. Jadi kepala tidak akan benar, karena kepala, Anda tidak dapat benar-benar mengontrol estetika. Ada baik teks ada atau tidak. Tapi p tag-- saya dapat menyelam dalam sedikit lebih dalam, sehingga untuk berbicara, untuk paragraf tag. Dan meskipun ada tiga, itu baik-baik saja, karena dalam CSS, ketika saya hanya mengatakan "p," ini berarti menerapkan berikut untuk setiap tag yang cocok ini pemilih, pemilih hanya menjadi nama tag. Jadi di mana pun Anda melihat "P," menerapkan ukuran font, dan mari kita membuatnya lebih wajar again-- 24 titik. Dan kau tahu apa, hanya untuk mengukur baik, mari kita membuat warna hanya merah untuk saat ini. Dan jika saya reload, sekarang kita melihat tiga paragraf jelek. 

Tapi sekarang anggaplah bahwa aku semacam of-- Saya ingin paragraf pertama untuk melompat keluar pada pengguna. Saya tidak ingin hanya meningkatkan ukuran font dari segala sesuatu. Dan jadi saya benar-benar ingin mengidentifikasi atau membedakan antara paragraf tersebut. Jadi mari kita menyingkirkan merah, karena itu hanya jenis norak, dan mari kita pergi ke depan dan membuat ukuran font 12-point secara default, sehingga kita kembali ke sesuatu sedikit lebih masuk akal. Dan sekarang saya hanya ingin meningkatkan ukuran font dari paragraf pertama. Aku bisa melakukan ini dalam beberapa cara, tapi salah satu cara yang mungkin yang paling instruksional di saat ini untuk melakukan hal berikut. Biarkan aku pergi ke depan dan berkata, ini paragraf memiliki ID unik "pertama." Aku bisa menelepon apa ini yang saya inginkan. Saya bisa menyebutnya "foo" atau kata lainnya, tapi aku akan memberikan beberapa Nama semantik bermakna seperti "pertama." Ini adalah pengenal unik, ID, untuk paragraf pertama saya. 

Apa yang bisa saya lakukan sekarang di stylesheet saya adalah sedikit lebih tepat. Alih-alih mengatakan, berlaku berikut dengan tag p, Saya dapat mengatakan following-- berlaku berikut ini, atau pilih, elemen HTML yang memiliki ID unik "pertama." Apa yang saya ingin berlaku untuk itu? Sebuah ukuran 24-point. Jadi saya memiliki dua penyeleksi sekarang. Salah satu yang membuat semua paragraf 12-point. Tapi yang satu ini, terutama karena datang second-- datang terakhir di file-- yang ini memiliki efek cascading. Saya baru saja membuat semua saya tag paragraf 12-point, tapi ini sekarang terjun dan mengabaikan bahwa untuk setiap elemen di halaman, setiap tag di halaman yang ID unik adalah kutipan tanda kutip "pertama." Dan hashtag dalam konteks ini hanya berarti "identifier unik." Saya tidak memasukkannya ke dalam file HTML. Aku, di sini, hanya mengatakan quote tanda kutip "pertama." 

Jadi biar ulang. Dan sekarang saya melihat, ah, OK. Maksudku, bukan itu cantik, tapi agak seperti kata pengantar untuk buku atau sesuatu seperti itu, mana paragraf pertama lebih besar. Bisa lebih tepat dengan hanya huruf pertama, tapi setidaknya Aku sudah dilaksanakan lebih banyak kontrol. Sekarang maybe-- mungkin aku ingin melakukan ini kadang-kadang untuk alasan apapun, dan jadi saya tidak ingin ini berlaku untuk hanya satu tag HTML. Sebaliknya, mari kita say-- mari juga melakukan hal berikut. Class = "impor." Sedangkan ID digunakan untuk unik mengidentifikasi satu hal, satu tag, di halaman web Anda, kelas ini dimaksudkan untuk menjadi digunakan pada sejumlah elemen atau tag pada halaman web Anda. Jadi itu dapat digunakan kembali. ID tidak dapat digunakan kembali. Sebuah kelas dapat digunakan kembali. 

Dan kau tahu apa, untuk apa pun reasons-- filosofis Aku tidak menyelesaikan saya thought-- Aku akan mengatakan bahwa paragraf pertama dan paragraf kedua yang penting. Jadi aku akan menerapkan kelas yang disebut "Penting," bahwa, jika saya menyimpan file saya dan kembali, tidak memiliki dampak fungsional belum. Tapi aku telah menambahkan beberapa metadata untuk file, semacam sesuatu yang terpisah dari data inti file, sehingga sekarang di stylesheet saya, jika saya bukannya mengatakan ".important" - Anda tahu, sesuatu yang penting, aku akan membuat font-warna, red-- atau lebih tepatnya tidak font yang warna, hanya warna. Ada inkonsistensi di CSS sayangnya. Dan reload. Sekarang perhatikan pertama dua paragraf merah tapi tidak ketiga, karena saya hanya menerapkan kelas "penting" untuk dua pertama dari hal-hal. 

Jadi di ID, Anda memiliki kemampuan untuk menentukan sangat tepat. Dengan kelas, Anda memiliki usabilitas. Tetapi dalam kedua kasus, perhatikan semacam prinsip yang baik-desain di mana saya keluar faktor semua estetika ke file styles.css saya. Jadi tidak ada kekacauan di sini. Tidak ada menyebutkan merah atau berani menghadap atau ukuran font dalam file ini. Sebaliknya Saya memiliki semantik, arti ditandai data saya sebagai, di sini adalah beberapa data penting. Berikut adalah beberapa data lebih penting. Selain itu, di sini adalah "Pertama" dari data penting saya. Jadi HTML adalah semua tentang semacam penandaan, secara harfiah, kata dan paragraf dan konstruksi di Anda Halaman dengan petunjuk ini sedikit, jika Anda akan, bahwa Anda dapat entah bagaimana memanfaatkan menggunakan teknik lain seperti CSS dengan cara ini. 

Jadi dalam menjawab pertanyaan Victoria, kita dapat membuat teks lebih besar dengan cara itu. Ada begitu banyak cara lain, tapi font tag-- terbuka braket "Font" - sebenarnya beberapa tahun. Dan ini adalah masalah, juga, dengan hanya mengandalkan pada resources-- secara online mereka cenderung menjadi usang. Dan memang, yang sudah tidak digunakan lagi, karena dunia menyadari, apa "font-size = 7" berarti? Tidak. Dan selama bertahun-tahun dan untuk ini day-- salah sisi mencatat di sini adalah bahwa sebenarnya sangat menyakitkan masih kadang-kadang untuk mengembangkan situs untuk web, karena Microsoft dan Google dan Mozilla dan orang lain sering tidak setuju bagaimana menafsirkan spesifikasi seperti HTML. 

Ada buku aturan untuk HTML yang umumnya mengatakan apa artinya setiap tag. Tapi kadang-kadang itu diserahkan kepada kebijaksanaan pelaksanaan ini, kebijaksanaan Microsoft dan Google. Dan begitu Anda akan sangat sering melihat pada sesuatu situs terlihat berbeda pada PC daripada yang dilakukannya pada Mac, dan itu benar-benar karena, pada akhir hari, mereka tidak mengujinya baik pada kedua platform. Tapi itu juga karena wajar, orang pintar akan tidak setuju dan perusahaan akan setuju, dan sebagainya salah satu tantangan pemrograman untuk web atau merancang hal untuk web menulis situs web Anda dengan cara yang bekerja pada setiap web browser. Tetapi bahkan itu tidak masuk akal, kan? Ada begitu banyak versi begitu banyak browser di luar sana yang, di beberapa titik, Anda juga harus membuat panggilan penilaian dan Anda harus memutuskan sebagai perusahaan, terutama untuk e-commerce-gaya situs mana Anda mencoba untuk menggunakan terbaru dan terbesar teknologi untuk memberikan pengguna benar-benar baik pengalaman. Tetapi beberapa persentase pengguna Anda mungkin masih menggunakan Internet Explorer 6 atau 7 atau 8, terutama tergantung pada negara yang mereka berasal. 

Dan sangat umum berkonsultasi adalah sesuatu seperti "statistik web browser." Dan jika kita pergi to-- mari kita lihat Wikipedia dan melihat bagaimana up-to-date grafik ini jika ada satu. Jadi di sini Anda bisa melihat di mana browser sebenarnya yang, menurut Desember 2015, menurut Pemerintah AS. Chrome adalah di pangsa pasar 42%, diikuti oleh IE sebagian besar dalam pengaturan perusahaan atau pengaturan PC, tentu saja, diikuti oleh Firefox, kemudian Safari, maka Opera tidak membuat peta di sini untuk beberapa alasan, dan kemudian Lainnya. Mungkin di bawah Lainnya. Tapi lebih bermasalah dari itu is-- mari kita lihat apakah Wikipedia juga memiliki versi browser version-- 

Mari kita pergi ke statistik browser. YAITU. Bahkan itu tidak cukup. statistik browser. versi saya. Itu tidak akan menjadi benar. Mari kita lihat versi. pangsa pasar browser. Mari kita lihat apakah ini muncul. BAIK. Sekarang ini semakin sedikit lebih berguna. Jadi di sini, melihat bahwa kita memiliki semua versi yang berbeda dari browser. Dan, Tuhan, jika Anda look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. Maksudku, browser semakin diperbarui, dan kadang-kadang beberapa dari perubahan itu yang signifikan dalam hal fungsi. Dan di beberapa titik, yang manajer produk atau insinyur perlu membuat decision-- kamu tahu apa, hanya 1% dari dunia masih menggunakan IE 7. Persetan dengan mereka. Kami hanya tidak akan mendukung browser. Dan apa artinya untuk tidak mendukung? Ini mungkin berarti bahwa tombol tidak bekerja pada halaman web Anda, atau mungkin berarti format benar-benar off. Atau Anda mungkin harus membuat bahwa panggilan pengadilan yang sama di ponsel hari ini, di mana, kami tidak akan mendukung iOS 5 lagi. Jadi orang hanya perlu meng-upgrade. Atau kita tidak akan mendukung Cupcake pada OS Android untuk perangkat Android, karena sebagai dunia-- sebagai dunia teknologi ingin bergerak maju, itu jenis ingin menyeret dunia dengan itu sehingga mereka tidak harus terus menjadi kompatibel sehingga mereka dapat menawarkan fitur-fitur baru dan baik. Ini memang salah satu alasan mengapa begitu banyak perusahaan yang menggelar update otomatis dan semacam memaksa versi terbaru dari perangkat lunak pada kami. Dan bahkan perusahaan seperti Apple akan mengurutkan dari memaksa Anda hampir atau memaksa Anda dalam hal kekuatan pasar untuk membeli ponsel baru karena mereka hanya tidak akan memperbarui ponsel lama Anda lagi. Jadi Anda lewatkan pada terbaru dan fitur terbesar, karena itu mahal untuk mereka sebagai perusahaan untuk mempertahankan lebih tua, bisa dibilang versi lebih rendah dari software. Tapi efek bersih adalah bahwa kami juga menderita ini juga. 

Jadi mari kita lihat hanya beberapa hal akhir sini. Mari knock off sangat cepat beberapa mereka peluru lain, jika penasaran. Jadi, jika Anda mencoba untuk, misalnya, posisi teks pada sisi yang berbeda dari Halaman, aku akan melakukan satu cara cepat, tapi ada yang berbeda cara untuk melakukan hal ini. Biarkan aku pergi ke depan dan eliminate-- menyederhanakan ini sebagai berikut. Saya hanya kembali ke saya sederhana, paragraf sederhana. Biarkan aku kembali ke styles.css saya. Dan aku hanya akan menggunakan simple-- yang yang Anda mungkin telah melihat di Google atau ingat dari earlier-- text-rata kanan. Dan muat ulang laman ini. Sekarang semuanya terlihat untuk menjadi benar-blok, seperti yang mungkin Anda lihat di atas sini. 

Kita bisa membuatnya terlihat sedikit lebih buku-seperti, dan kita dapat mengatakan "membenarkan" dan reload. Sekarang itu bagus dan persegi pada kedua sisi, yang merupakan jenis yang baik. Tujuan lain yang kami punya di sini adalah perubahan warna teks. Jadi kita melihat bahwa dengan teks merah saya. Dan sekarang menambahkan tombol untuk formulir. Jadi kenapa tidak kita mencoba untuk melakukan hal ini? Tapi pertama-tama biarkan aku pergi ke sebuah situs yang kebanyakan dari kita menggunakan setiap day-- Google. Dan mari kita lihat bagaimana Google benar-benar bekerja. Tapi aku akan melakukan hal ini. Pertama-tama saya melakukannya in-- yep, biarkan aku pergi ke Google pertama. Aku akan harus pergi ke Google Setelan, karena saya ingin menonaktifkan sesuatu yang disebut Hasil Instan. 

Jadi Anda mungkin telah memperhatikan di Google ini days-- membiarkan saya kembali dan mengaktifkannya. Jadi jika saya mulai mencari untuk "kucing" seperti ini, melihat bahwa tidak hanya Saya mendapatkan auto-selesai up atas, tiba-tiba, halaman itu sendiri tampaknya mengubah cukup cepat juga, dan itulah Google menggunakan bahasa disebut JavaScript mencoba untuk membantu. Namun sayangnya, jenis dari mengacaukan diskusi kita dari apa yang sebenarnya terjadi bawah kap sini. Jadi saya hanya jenis cepat mematikan hasil instan. Dan aku akan klik Simpan. Dan sekarang aku akan membuka bahwa toolbar diagnostik yang saya tetap membuka di bawah tab Jaringan. Jadi mari kita lakukan ini. Mari me-- whoops-- gulir ini turun sedikit. Dan biarkan aku mencari "kucing." 

Dan sekarang notice-- sebenarnya, ini adalah kesempatan yang baik untuk membahas sejenak. Perhatikan saat aku jenis usaha-- menghentikannya. Hentikan. BAIK. Perhatikan saat saya ketik huruf C, menonton bawah layar. A- T- S. Apa bagian bawah layar ini, tab Jaringan saya, sarankan yang terjadi setiap Waktu saya ketik surat? Sayangnya, katak ini sangat mengganggu hari ini atau shamrock atau apa pun dia. Apa yang terjadi setiap kali saya mengetik? Dan biarkan aku menghapus buffer dan ketik lagi. whoops So--. Setiap kali saya mengetik surat, C- A- T-- jadi baris baru jelas terus muncul. Apa masing-masing baris mewakili, berdasarkan apa yang telah kita lihat dan bahas sejauh ini? AUDIENCE: Sebuah pencarian? DAVID J. Malan: Sebuah pencarian, atau lebih umum, permintaan HTTP dari browser saya ke server. Nah, mengapa browser saya membuat HTTP meminta setiap kali saya ketik surat? 

AUDIENCE: [tidak terdengar] DAVID J. Malan: Ya, itu memberi saya hasil auto-lengkap ini. Seperti, di mana ini hasil pencarian berasal? Nah, setiap kali saya ketik surat, Google mengirimkan lebih dan lebih dan lebih dari kata aku mengetik. Mengapa? Karena mereka ingin memberi saya lebih baik dan lebih baik, saran yang lebih baik, daftar saran, untuk apa kata Saya mencoba untuk benar-benar lengkap. Jadi ini adalah untuk mengatakan secara harfiah setiap Karakter yang diketik dalam Google sedang dikirim, akhirnya di massal, tetapi juga kadang-kadang salah satu pada waktu untuk melaksanakan fitur auto-complete ini ketika Data ini, tentu saja, di web. 

Sekarang, mari kita lihat apa yang sebenarnya terjadi ketika saya klik Google Search. Dan kemudian kita akan memanfaatkan ini diri kita sendiri. Jadi jika saya gulir ke bawah sekarang untuk sangat Permintaan pertama yang baru saja terjadi. Perhatikan berikut ini. Itu dikirim ke cukup panjang URL-- https://www.google.com/search? dan kemudian seluruh banyak hal. Mari kita lihat ini benar-benar sekarang di tab browser itu sendiri. Mari kita menyingkirkan toolbar di sini. Berikut halaman hasil pencarian. Dan pemberitahuan inilah URL. Sekarang, Anda mungkin bisa menebak apa yang terjadi di sini di bagian. Jadi pertama-tama, definisi. Ini tampaknya adalah tujuan mana formulir dikirimkan. Jadi ketika saya mengetik di kata "kucing" dan tekan Enter, rupanya Google mengirim input teks saya untuk URL ini bahwa saya telah disorot ada, memangkas pencarian. Ternyata, dalam URL, apa pun yang terjadi setelah tanda tanya adalah, seperti yang kita terus mengatakan, sepasang kunci-nilai yang diketik ke dalam formulir atau entah bagaimana ditransmisikan dari browser untuk server. 

Jadi setiap kali Anda mengetik masukan menjadi bentuk di web dan itu dikirim karena kami sudah mendiskusikan, melalui get a, salah maya ini amplop, isi itu envelope-- ya, tetap mendapatkan diisi secara fisik ke dalam amplop di kelas hari ini, namun teknologi itu benar-benar dimasukkan ke dalam URL. Jadi sebenarnya, biarkan aku menyaring ini. Di mana Anda melihat input pengguna? Di mana Anda melihat sesuatu bahwa saya sendiri diketik di sini? Ya, jadi "kucing." Kanan? Jadi biar menyaring ini menjadi sesuatu yang sederhana. Aku akan menghapus segala sesuatu tentang URL ini yang saya tidak mengerti, dan aku hanya akan meninggalkan sebagai ini-- / search? q = kucing. Kami akan melihat di mana q berasal dari dalam sekejap, tapi yang terasa seperti minimum Jumlah informasi yang saya berikan. Dan sekarang aku akan tekan Enter. Dan melihat itu masih bekerja. Kami masih mendapatkan kembali sejumlah besar kucing. Jadi Google adalah pengujian dari ini hari ini. Ini 2016, tidak 1999. Jadi ada hal-hal lain yang saya browser mengirimkan ke server. Tapi ini minimal semua yang diperlukan. 

Jadi apa yang terjadi? Nah, pertama-tama saya pergi ke depan dan pergi kembali ke Cloud9 dan biarkan aku pergi ke depan dan menutup tab saya sebelumnya. Dan saya akan melakukan ini pada saya memiliki hanya sesaat. Aku akan pergi ke depan dan membuat file baru. Dan aku akan menyimpannya sebagai google.html. Dan aku akan sangat quickly-- Aku akan mencuri, sebenarnya, beberapa teks ini hanya untuk menghemat waktu. Aku akan paste di sini. Aku tidak akan repot-repot dengan setiap stilisasi saat ini. Kita akan menyebutnya "My Google." Dan aku akan menyingkirkan segala sesuatu dalam tubuh. Dan aku akan melakukan hal berikut. Biarkan aku memperbesar. Bentuk action-- dan sesingkat yang saya sebutkan earlier-- whoops-- seperti yang saya singkat disebutkan sebelumnya, aksi dari Formulir adalah di mana Anda mengirim data ke. Jadi google.com/search. Dan metode yang saya ingin menggunakan dapat menjadi salah satu dari dua hal. Itu baik bisa menjadi "mendapatkan," seperti yang kita terus mendiskusikan, atau bisa "post." Untuk saat ini, fundamental perbedaan adalah, jika Anda menggunakan "mendapatkan," semua informasi yang pengguna menyediakan akan dikirim dalam URL. 

Yang sangat bagus untuk hal-hal seperti pencarian mesin dan beberapa aplikasi lainnya, tetapi dalam keadaan apa akan Anda tidak ingin mengisi formulir dan telah informasi berakhir pada URL, seperti di address bar browser Anda? Apa jenis bentuk lakukan you-- AUDIENCE: [tidak terdengar] DAVID J. Malan: Ya, seperti apa? AUDIENCE: Sandi. DAVID J. Malan: Ya, jadi Anda log ke Facebook atau situs. Itu masukan pengguna dari bentuk, kotak teks, tapi Anda mungkin tidak ingin muncul di URL browser. Mengapa? Maksudku, mungkin ada beberapa implikasi keamanan pada jaringan, tapi more-- suka, lebih sederhana, bagaimana jika teman sekamar Anda, penting lainnya Anda, anak-anak Anda, pasangan Anda terlihat melalui sejarah browser Anda? Ada sandi Anda tepat ada dalam sejarah browser Anda. Itu tidak merasa seperti desain yang baik. Atau bahkan lebih teknis, misalkan Anda mencoba untuk meng-upload foto ke Flickr atau Facebook atau wherever-- yang input pengguna, meskipun itu sedikit lebih interesting-- bagaimana saya menjejalkan gambar di bar URL? Anda jenis semacam tidak bisa. Anda jenis bisa. Tapi, sungguh, aku kesulitan membayangkan melakukan hal itu. Jadi saya perlu metode lain untuk upload foto ke sebuah situs web, dan bahwa metode lain disebut "post." Tapi untuk saat ini, kita hanya akan berbicara tentang "Dapatkan," yang merupakan sederhana dari dua. Itu hanya menempatkan semua input pengguna ke URL. 

Jadi, inilah bentuk aku menciptakan. Saya ingin masukan. Dan kau tahu apa? Aku akan mengambil menebak di sini. Aku akan mengingat saya masukan "q" untuk "query." Dan saya pikir ini adalah salah satu desain asli, mungkin, dari tahun 1999. Dan kemudian jenis masukan ini hanya akan menjadi "teks." Dan kemudian aku akan memiliki masukan lain yang tidak perlu nama, karena kami akan segera lihat, jenis yang "submit." Dan ini akan memberikan tombol khusus. Dan hanya itu. 

Jadi biarkan aku pergi ke depan dan menyimpan file ini. Aku akan kembali ke saya Browser dan pergi ke google.html. Memasukkan. Dan itu semacam jarang untuk sedikitnya. Tapi biarkan aku pergi ke depan dan mencari "kucing." Dan melihat aku saat ini di URL Cloud9 ini. Tapi saat saya klik ini, di mana Anda berharap saya akan berakhir? 

AUDIENCE: Google. 

DAVID J. Malan: Google. Jadi mari kita klik Submit. Dan memang saya sudah kembali dilaksanakan Google. Kanan? Ini sederhana. Ini lebih ringan. Maksudku, kode saya jelas lebih baik daripada mereka, dari kekacauan yang kita lihat sebelumnya. Dan kau tahu apa? Aku akan rempah-rempah ini up sedikit. Saya tidak menyebutkan ini sebelumnya. Ada tag seperti H1, untuk Heading 1, judul yang paling penting dalam sebuah halaman. "Google saya," Aku akan menyebutnya. Mari saya ulang. Itu tampak sedikit lebih baik sudah. Dan, sebenarnya, Anda tahu apa? Saya sudah already-- aku berbohong. Aku bilang aku tidak akan gaya ini, tapi aku akan gaya ini seperti sebelumnya. Dan tubuh saya akan menjadi, katakanlah, pusat text-align. Itu tampak lebih seperti Google sudah. 

Saya perlu satu baris, meskipun, untuk itu tombol Submit. Dan ternyata, Anda dapat menggunakan paragraf, atau Anda bisa lebih harfiah hanya mengatakan, memberi saya satu baris di sini-tag br. Dan jika saya reload ini, sekarang pergi ke sana. Ini sedikit jelek, jadi saya bisa melakukan istirahat beberapa line, tapi jangan terlalu serakah sini. Jadi sekarang mari kita lihat apakah ia bekerja untuk "anjing." Tampaknya bekerja untuk "anjing," juga. Jadi apa takeaway menarik di sini? Satu-- bukan lompatan besar untuk memperkenalkan beberapa tag yang lebih, seperti tag form di tag input. Tapi yang lebih mendasar adalah, semua yang kita lakukan adalah meningkatkan pemahaman kita HTTP dan fakta bahwa bentuk-bentuk akhirnya mengubah apa yang ada di URL browser, dan sebagainya, oleh karena itu, kita bisa mekanis memberikan masukan ke server dengan membuat bentuk HTML dan mengetahui bahwa server mengerti HTTP, sama seperti tubuh kita mengerti, seperti, menjabat tangan saya, bahwa protokol yang sama, dan begitu kita kembali respon bahwa kita akhirnya harapkan. 

Jadi mari kita coba untuk melakukan satu Hal terakhir yang sekarang dengan ponsel, dan aku akan make-- saya akan menambahkan kode ini ke slide. Jadi jika Anda ingin bermain-main, Anda pasti bisa mengambilnya dari sana. Tapi aku akan pergi ke depan dan melakukan satu hal. Aku akan pergi ke depan dan membuka page-- Indeks saya Halaman halo saya seperti sebelumnya, yang memiliki banyak teks faux-Latin ini, atau berarti teks Latin, dan has-- sepertinya ini pada ukuran font ini. Tapi biarkan aku pergi ke depan dan melakukan hal ini. Aku akan pergi ke Cloud9. Dan Anda tidak perlu melakukan langkah ini. Aku hanya akan melakukannya sendiri. Aku akan klik Share. Dan ini adalah fitur hanya dari Cloud9, dimana Aku bisa membuat lingkungan saya publik. 

Dan hanya untuk kepentingan demonstrasi, biarkan aku melakukan ini. Aku akan membuat publik aplikasi saya. Perhatikan itu peringatan saya, saya Saya yakin saya ingin melakukan ini, karena ini akan membuat semua orang di dunia, apakah mereka ada di sini sekarang atau menonton video kemudian pada internet dapat melihat apa yang saya lihat. Tapi itu OK. Aku akan mengatakan "Selesai." Dan biarkan aku mendorong Anda, jika saya lakukan ini correctly-- biarkan aku mengujinya pertama. Silakan, jika Anda tidak mind-- di browser pada komputer Anda, pergi ke URL ini, dan mudah-mudahan Anda akan melihat teks Latin saya. Dan harus jelas, itu berjalan tidak di laptop saya. Ini di awan. Itu di Cloud9, secara harfiah, tapi Saya telah membuat ruang kerja saya publik sehingga siapa pun di internet dapat mengakses halaman rumah Latin saya. 

Pergi ke URL yang sama pada telepon Anda, jika Anda bisa. Jika itu akan dikenakan biaya, meskipun, Anda hanya dapat melihat di pundak. AUDIENCE: [tidak terdengar] DAVID J. Malan: Maaf? AUDIENCE: [tidak terdengar] DAVID J. Malan: Hanya kata-kata Latin. Itu saja. Tapi itulah yang harus Anda lihat. 

AUDIENCE: Ya. DAVID J. Malan: Ya. Ya. BAIK. Jadi dapat saya pegang sampai Anda telepon untuk sesaat? Jadi, mudah-mudahan, jika Anda mengakses itu, seharusnya terlihat hampir tidak terbaca. Ini still-- Maksudku, itu terbaca karena Latin. Tapi itu juga terbaca untuk apa alasan lain? Seperti, apa yang tidak menyenangkan Anda tentang hal ini? AUDIENCE: Ini kecil. DAVID J. Malan: Ini super, super kecil. Jadi bagaimana kita bisa memperbaiki ini? Ini super, super kecil di telepon Victoria dan, jika Anda telah ditarik itu sendiri, mungkin kecil pada ponsel Anda juga, kecuali jika Anda memiliki pengaturan aksesibilitas diaktifkan. Apa itu? Anda hanya bisa mencubit dan zoom, yang bisa diterapkan, tapi kemudian Anda hanya melihat beberapa kata pada suatu waktu. Jadi tunggu sebentar. Aku tahu bagaimana memperbaikinya. Kanan? Saya bisa menggunakan CSS, dan aku bisa mengubah ukuran font dari 12-point ke 24-point. Tapi efek samping dari itu, tentu saja, akan menjadi sekarang, pada desktop atau laptop, sekarang teks dua kali lebih besar. Dan sehingga akan jenis menyenangkan untuk membedakan antara perangkat, dan ternyata ada cara melakukan hal itu. Ada beberapa cara yang berbeda, pada kenyataannya, dimana menggunakan CSS dan fitur yang lebih menarik bahwa kita tidak akan masuk ke dalam detail, Anda pada dasarnya dapat query browser dan berkata, jika layar lebih kecil dari ini banyak piksel, menggunakan ukuran font ini. Jika layar Anda lebih besar dari ini banyak piksel, menggunakan ukuran font lain ini. 

Anda bahkan bisa lebih menarik masih. Jika Anda pernah mengunjungi Halaman web yang, pada desktop, memiliki menu besar mungkin pergi ke sisi, dan kemudian semua konten adalah sisi yang menu-- itu semacam paradigma umum. Menu di sebelah kiri, konten di sebelah kanan, atau sebaliknya. Tidak benar-benar bekerja pada ponsel ketika Anda layar hanya ini luas banyak piksel. Jadi lebih umum pada ponsel adalah, menu Anda tiba-tiba akan mendapatkan runtuh, dan Anda harus klik tombol untuk melihatnya, atau website akan menempatkan menu di atas itu dan menempatkan konten di bawahnya. Dan Anda dapat menerapkan ini hal dalam berbagai cara, juga. Anda dapat meminta programmer Anda, hey, tim, setiap saat Anda melihat permintaan HTTP dari Android perangkat, perangkat Microsoft, Google perangkat, perangkat Apple, gunakan ini ukuran font dan menggunakan tata letak menu ini, atau yang lain menggunakan layout default ini lebih besar. 

Sekarang, dengan menggunakan apa Teknik fundamental hari ini bisa para insinyur menggunakan untuk mengetahui apakah itu iPhone, ponsel Android, laptop, desktop mengunjungi server perusahaan? Dimana mereka mendapatkan informasi itu? 

AUDIENCE: Sundulannya? 

DAVID J. Malan: Ya, header HTTP. Jadi setiap permintaan HTTP yang berasal dari pelanggan mereka ke server mereka termasuk, dalam yang maya amplop, sejumlah besar header HTTP, salah satunya adalah browser dan sistem operasi bahkan, jika Anda peduli untuk bahwa tingkat detail. Sekarang, itu string samar-cari, tapi terdapat software yang hanya akan menyederhanakan itu, dan Anda hanya dapat meminta dalam pemrograman code-- PHP, Java, C ++, whatever-- apa telepon ini-- apa perangkat pengguna ini menggunakan? Dan kemudian Anda bisa mengatakan, menunjukkan kepada mereka ini versi website jika telepon. Tampilkan mereka versi ini situs apakah itu laptop atau desktop. Tapi Anda bahkan tidak perlu kompleksitas server-side. Anda dapat melakukan bahkan yang paling sederhana hal. 

Aku akan melakukan hal ini. Aku akan pergi ke depan ke lingkungan Cloud9 saya, dan aku akan menambahkan tag Anda lihat di Google sebelumnya. Ini disebut metatag. Dan saya tidak pernah ingat satu ini, sehingga Aku akan menuliskan di sini. Meta name = "viewport" dan kemudian content = "width = lebar perangkat, intital skala = 1 "dan hanya itu. 

Jadi mungkin juga menjadi seperti mantra magis. Ini tidak semua yang jelas, tapi ini memiliki ada hubungannya dengan viewport, dan viewport hanya tubuh dari Halaman web, wilayah persegi panjang yang mendefinisikan sebagian halaman. Dan ini hanya memberitahu browser, Anda tahu apa? Membuat lebar halaman ini efektif sama dengan lebar perangkat. Dengan kata lain, jangan menganggap bahwa Anda memiliki semacam ruang terbatas. Asumsikan Anda hanya memiliki sebanyak ruang sebagai perangkat itu sendiri besar. Dan sekarang, jika saya reload ini di browser saya, saya melihat tidak ada perubahan. Tapi jika saya melakukan correctly-- ini dan biarkan aku menyeberangi fingers-- saya jika Anda semua ulang ponsel Anda, apakah Anda melihat perubahan yang menarik? Ya, adalah itu-- 

AUDIENCE: [tidak terdengar] DAVID J. Malan: Ya. BAIK. Jadi bisa dibilang lebih mudah dibaca sekarang? Masih kecil, untuk menjadi adil, tapi tidak sangat kecil untuk menjadi tidak terkendali. Dan saya pasti bisa menimpa ini lebih lanjut dengan CSS atau pada sisi server, tapi semakin apa yang Anda melihat lebih banyak fitur ditambahkan ke client-side environments-- JavaScript, karena kami akan mendiskusikan besok, CSS, dan HTML-- sehingga bahwa semua pertanyaan ini dapat dilakukan pada klien sehingga mengganggu Server jauh lebih sedikit dan tidak harus bersaing dengan, untuk Misalnya, serangan konstan dari sistem operasi baru versi, versi browser baru. Anda hanya bisa membiarkan browser meminta perangkat, seberapa besar Anda, dan kemudian membuat agak logis keputusan berdasarkan itu. Tapi kita akan melihat lebih banyak kesempatan untuk keputusan logis besok dalam konteks dari bahasa pemrograman. 

Jadi, pertanyaan, kemudian, pada pengembangan web? Hari ini tidak pemrograman web, per se, karena hampir semua yang kita lakukan sangat estetika, jika Anda mau. Tidak ada pengambilan keputusan di kode yang kita tulis, dan jadi itu sebabnya HTML adalah markup bahasa, bukan bahasa pemrograman. Tapi besok kami akan mengarahkan sekilas, akhirnya, di JavaScript, yang merupakan pemrograman yang sebenarnya bahasa yang memungkinkan kita melakukan sedikit lebih. 

Ada pertanyaan? Nah, biarkan aku mengusulkan dua Kesempatan opsional untuk pekerjaan rumah. Satu is-- Cloud9 ini account tidak akan berakhir. Anda dipersilakan untuk menggunakan mereka untuk bermain-main dengan. Ini tingkat gratis layanan. Sadarilah bahwa, jika saat membuat ruang kerja Anda, Anda membuatnya publik, yang tidak berarti bahwa siapa pun di internet dapat melihat apa yang Anda mengetik. Jadi mungkin hanya mempertimbangkan tidak mempermalukan diri sendiri jika Anda menempatkan web pertama Anda Halaman luar sana publik sengaja, tapi tidak ada yang akan tahu untuk mencari di sana pula. 

Dan two-- biarkan aku melemparkan up URL ini juga, terutama jika Anda datang di hari ini sedikit kurang nyaman daripada yang lain, yakin apa artinya semua ini. Sadarilah bahwa lebih dari video ini, yang merupakan sebuah cara yang baik untuk tertidur dan juga tertawa sementara melakukannya, juga memiliki banyak societally menarik dan diskusi keamanan yang relevan di dalamnya dari John Oliver, meskipun pelawak. 

Tapi jika tidak ada pertanyaan lebih lanjut, yang membawa kita ke resepsi. Jadi kenapa tidak saya nyalakan musik. Harus ada minuman dan makanan ringan di luar. Saya senang untuk berbaur untuk sebagai Selama orang ingin, menjawab pertanyaan lebih satu-satu. Tapi, jika tidak, Anda dipersilakan lepas landas pada setiap titik, dan kami akan bertemu lagi besok pagi untuk sedikit lebih. Baiklah, terima kasih.