DAVID J. MALAN: Baiklah. Kita kembali. Jadi, matlamat sesi akhir ini adalah untuk memperkenalkan beberapa konsep tetapi juga memberi semua orang peluang yang untuk jenis menghulurkan jari anda dan benar-benar melakukan sesuatu sedikit hands-on. Matlamatnya tidak menjadikan adalah kita semua ke pemaju web dengan apa-apa tetapi benar-benar hanya untuk memberikan anda rasa beberapa daripada membina asas apa masuk ke dalam pengaturcaraan web dan web hari ini pembangunan, jadi sebelah statik things-- ada logik pengaturcaraan bahasa, hanya kandungan statik. Dan ia akan memberikan kita peluang untuk benar-benar melihat apa yang pelayan web adalah, lihat apa fail HTML, lihat apa yang ia adalah HTTP sebenarnya berkhidmat sehingga. Tetapi sebelum kita menyelam dalam, apa-apa kuasa ke belakang soalan tentang pengkomputeran awan atau keselamatan atau apa-apa diantara? Tidak? Baiklah, baik, mari kita melakukan ini, hanya dalam kes proses mendaftar untuk sesuatu yang mengambil masa beberapa minit. Kami akan biarkan ia melakukannya di latar belakang. Teruskan, jika anda boleh, ke URL ini sini-- c9.io. Ini adalah pihak ketiga service-- platform sebagai perkhidmatan, jika anda will-- yang akan menjemput anda untuk mendaftar untuk akaun, dan ia akan memberi kamu masing-masing akaun dalam awan yang dipanggil infrastruktur orang lain, syarikat bernama Cloud9. Tetapi apa yang baik tentang ini adalah bahawa mereka memberi anda perkiraan yang pembangunan dunia sebenar yang sebenar alam sekitar, walaupun dalam awan dan dalam pelayar web, dan kami akan menggunakan ini untuk benar-benar bereksperimen sedikit hari ini. Dan kemudian pergi ke hadapan dan hanya mengemudi cara anda untuk proses pendaftaran jika anda boleh. Oleh itu, kita berlaku untuk menggunakan ini di dalam kelas Saya mengajar untuk semua pelajar-pelajar kita, di dalam kampus dan di luar sekarang, dan ia digantikan apa yang sejarah adalah perisian sebaliknya boleh dimuat turun. Jadi apa yang anda telah mendapat akses kepada adalah salah satu daripada mesin maya, pada dasarnya, yang saya diterangkan sebelum ini. Jadi syarikat ini Cloud9 mungkin sewa dari party-- ketiga sesungguhnya dalam kes ini, Google-- keseluruhannya sekumpulan mesin maya yang entah bagaimana mereka mencincang ke dalam ilusi pelayan individu bahawa setiap daripada kita mempunyai kawalan penuh ke atas. Ia tidak cukup tepat untuk mengatakan bahawa mereka mesin maya, walaupun, kerana apa yang Cloud9 sebenarnya menggunakan adalah teknologi yang agak baru dipanggil pengkontenaan. Dan biarlah saya merebut gambar ini di sini untuk cat gambar ini. 

bekas A, jika anda masih ingat gambar dari sebelum ini, sedikit lebih ringan berat daripada mesin maya. Malah, sedangkan lalu masa kita bercakap tentang terdapat menjadi operasi yang sistem dan hypervisor yang dan kemudian sistem operasi tetamu, tetamu sistem operasi, operasi tetamu sistem, di atas anda perkakasan fizikal, perbezaan dengan ini baru teknologi, pengkontenaan, adalah bahawa mereka semua entah bagaimana berkongsi sistem operasi yang sama. Tetapi mereka masih mencipta ilusi semua orang mempunyai mereka sendiri eksklusif hak pentadbiran dan fail pada pelayan. Tetapi ada perisian kurang dalam antara anda dan perkakasan. Hasil yang, dalam teori, prestasi yang lebih tinggi, kerana anda menggunakan atau membuang kurang sumber pada lapisan virtualisasi kononnya. Jadi ini dipanggil pengkontenaan oleh alam semula jadi melalui teknologi yang dipanggil buruh pelabuhan, yang sangat banyak datang ke sendiri. Dan ini adalah sesuatu yang jurutera di syarikat anda mungkin jenis jenis mula bercakap kira-kira tidak lama lagi jika mereka tidak mempunyai sudah, walaupun ada pasti tidak sebab untuk melompat ke atas apa-apa bandwagons. 

Maka dengan itu berkata, apa anda mungkin lihat sekarang adalah skrin yang kelihatan sedikit seperti ini. OKEY. Dan hanya memanggil saya lebih jika tidak. Dan jika so-- saya akan datang jika tidak. Teruskan dan klik yang besar ditambah untuk mewujudkan ruang kerja, dan anda akan dapat melihat skrin seperti ini. Anda boleh memanggil ruang kerja menamakan apa sahaja yang anda mahu sekarang. Dan hanya sebenarnya untuk kesederhanaan, pergi dan- baik, sebahagian dari kamu sudah mempunyai ruang kerja. Memanggilnya apa sahaja yang anda want-- perniagaan, Harvard, Khamis, apa sahaja yang anda suka. Anda tidak perlu keterangan. Anda boleh meninggalkan ia peribadi, melainkan anda sudah mempunyai sekumpulan ruang kerja. Jika anda terpaksa menjadikannya umum, itulah denda untuk tujuan hari ini. Di sini juga, adalah salah satu upsells. Anda akan mendapat satu ruang kerja swasta dengan lalai. Tetapi jika anda mahu lebih, anda perlu membayar untuk lebih. Jika tidak, mereka memaksa anda untuk membuat orang ramai kerja anda. Tetapi itu tidak mengapa, kerana mereka juga sasaran ini pada komuniti sumber terbuka untuk menggalakkan orang ramai sebenarnya bekerjasama. 

Dan perkara terakhir yang penting, walaupun, adalah, selepas anda pilih nama yang dan selepas anda memilih swasta atau awam, klik HTML5, ikon berwarna oren besar dua dari kiri, dan kemudian klik Buat Workspace. Dan ia akan mungkin mengambil satu minit atau lebih, tetapi anda kemudian akan mempunyai alam sekitar, sebaik sahaja anda berbuat demikian, yang kelihatan mengingatkan apa yang saya ada pada skrin di sini sekarang. Tetapi, sekali lagi, ia mungkin mengambil masa satu minit atau lebih untuk mendapatkan ke skrin ini sekali anda klik Cipta Workspace. Tetapi hanya tandakan saya lebih jika anda ingin saya untuk mengambil lihat pada apa-apa atau nasihat. Baiklah. Jadi saya akan latar belakang ini buat masa ini. Telefon saya lebih jika anda seolah-olah mempunyai apa-apa masalah teknikal. Tetapi, sekali lagi, ia mungkin mengambil masa sedikit untuk untuk membuka. Dan mari kita pergi ke hadapan dan bercakap tentang apa yang ia sebenarnya bermaksud untuk membuat laman web, apa HTML, dan bagaimana semua ini sekarang interconnects kerana kita bermula untuk benar-benar menggunakan beberapa teknologi. Jadi ia ternyata bahawa saya boleh pergi pada Mac kecil saya di sini, membuka program mudah dipanggil TextEdit, atau pada Windows saya boleh sesuatu yang terbuka dipanggil Notepad.exe. Dan saya boleh hanya semata-mata melakukan sesuatu seperti this-- "hello, dunia." Dan kemudian saya boleh menyelamatkan ini sebagai hello.txt Jadi ada sihir di sana. Ini tidak ada kena mengena dengan web pengaturcaraan, tiada kaitan dengan HTML. Hanya membuat fail teks yang mudah. Tetapi ternyata bahawa web yang halaman adalah benar-benar hanya itu. Ia adalah satu teks fail teks yang mengandungi mudah bahawa anda mungkin menaip di papan kekunci anda, tetapi ia biasanya tetapi tidak semestinya berakhir dalam tidak .txt tetapi .html atau .htm. Dan anda tidak hanya menaip perkataan dalam fail. Anda sebenarnya perlu menggunakan perkara-perkara yang dipanggil tag atau, lebih umum, sesuatu dikenali sebagai bahasa markup. 

Jadi, saya akan sangat cepat menaip dan kemudian menjelaskan yang berikut. Saya akan pertama menaip ini, yang mengatakan, hey, pelayar, di sini datang halaman web yang ditulis dalam HTML. Dan kedua-dua perkara bersama-sama berkata, hey, pelayar, berikut adalah sesungguhnya HTML. Hey, pelayar, di sini datang kepala atau bahagian atas laman saya. Hey, pelayar, di dalam bahagian atas halaman saya, meletakkan tajuk iaitu, "hello, dunia. " Hey, pelayar, selepas ketua saya halaman, di sini datang badan halaman saya. Dan, hey, pelayar, badan saya halaman juga boleh berkata: "hello dunia." Jadi apa yang adalah butiran penting di sini? Ini adalah apa yang umumnya dipanggil pengisytiharan doc-jenis, dan, terus-terang, ia sedikit sukar untuk menghafal ini pada mulanya. Anda hanya jenis copy-paste. Ini adalah cara yang formal untuk mengatakan, hey, pelayar, Saya gunakan HTML versi 5 yang keluar agak baru-baru ini. Ia adalah satu mantera ajaib yang beberapa manusia dengan rasa miskin reka bentuk mengambil keputusan untuk meletakkan di paling atas fail. Walaupun ia adalah satu sedikit sukar difahami, itu sahaja ia ertinya- hey, pelayar, di sini datang dengan versi 5 HTML. 

Selebihnya ini telah bersama kami untuk beberapa waktu sekarang, sejarah, tetapi ia telah berkembang, dan ia mungkin telah mendapat sedikit lebih mudah. Perhatikan beberapa ciri-ciri daripada apa yang saya telah diserlahkan. Ada perkara-perkara ini dengan bersudut brackets-- kurungan kiri dan pendakap yang betul. Dan perhatikan simetri di sini. Dan dengan simetri, maksud saya, sama seperti saya mempunyai tag permulaan ini di sini atau tag terbuka jika anda akan, turun di sini saya mempunyai tag rapat atau tag penutup itulah yang berbeza hanya sejauh mana ia mempunyai ini slash pada awal perkataan HTML. Dan anda boleh berfikir ini kerana saya bersahaja mencadangkan sebelum ini, hey, pelayar, di sini datang beberapa HTML. Dan, sebaliknya, hey, pelayar, itu ia sebagai permulaan HTML-- dan akhir. 

Sementara itu hey, pelayar, di sini datang ketua halaman saya. Hey, pelayar, itu sahaja untuk kepala. Hey, pelayar, di sini adalah badan halaman saya. Hey, pelayar, itu sahaja untuk badan. Dan di dalam iaitu beberapa teks sewenang-wenangnya untuk sekarang. Dan di dalam kepala, sementara itu, beberapa sewenang-wenangnya tetapi tagged, jadi untuk bercakap, teks yang mengatakan, tajuk halaman saya akan "hello, dunia." Sekarang, buat masa ini, anda boleh menganggap pelayar yang mempunyai only-- atau, tetapi, laman web mempunyai hanya dua parts-- kepala dan badan. Dan kepala biasanya hanya seperti bar menu, barangan yang benar-benar hanya di bahagian paling atas. Dan badan adalah keberanian halaman, segala-galanya dalam yang segi empat tepat besar yang mengisi skrin. Jadi, saya akan pergi ke hadapan dan melakukan ini. Saya akan pergi ke hadapan dan klik Simpan, Fail Simpan. Dan saya akan menyelamatkan ini sebagai hello.html, dan saya hanya akan meletakkannya di desktop saya. Dan saya akan pergi ke Teruskan dan klik Simpan. Dan notice-- Mac saya di kurangnya adalah menjerit pada saya. Adakah anda pasti anda mahu melakukan ini? Dan saya akan berkata, ya, menggunakan HTML. Saya tahu yang lebih baik dalam kes ini. Dan sekarang saya akan pergi ke desktop saya di mana saya mempunyai fail ini tiba-tiba. Dan saya akan klik dua kali. Dan anda akan perasan bahawa, dengan lalai, Chrome dibuka. Ini kerana itulah penyemak imbas lalai saya. Dan ia hanya berkata, "hello, dunia." Tetapi ia berkata "hello, dunia "di dua tempat. Perhatikan bahagian atas kiri. Agak sukar untuk terlepas itu. Ia besar dan berani. Dan di mana lagi ia seolah-olah berkata, "hello, dunia"? 

PENONTON: Tab. 

DAVID J. MALAN: Ya, tab itu sendiri. Oleh itu, apabila saya berkata ketua halaman adalah segala-galanya top-- dan sesungguhnya ini adalah tajuk. Ia hanya dalam tab di sini. Dan saya boleh tarik tab ini keluar supaya tidak mengelirukan. Ini hanya satu tab single sekarang, dan sesungguhnya kami melihat "hello, dunia" di sini dan "hello, dunia" di sini. Jadi agak mudah. Tetapi ia juga agak mudah. Dan, sebenarnya, saya dizum masuk. Saya boleh menukar saiz fon hanya untuk membesarkan untuk akses. Tetapi mari sekarang kita buat sesuatu sedikit lebih menarik. 

Saya akan go-- whoops, mari saya kembali kepada fail teks saya. Saya akan kembali kepada saya fail teks, dan saya akan kepada perubahan ini dan mengatakan "Hello, Disney World." Simpan. Dan kembali kepada saya pelayar dan klik Reload. Dan kini, sudah tentu, ia berkata "Disney World." Dan saya akan buatan zum dalam hanya supaya lebih mudah untuk melihat. Jadi sekarang, malangnya, saya jenis mahu supaya- sebenarnya, itu adalah satu ciri Mac. Saya mahu klik pada Disney World dan pergi ke tempat seperti disney.com, tetapi itu tidak berfungsi. Jadi prinsip asas web adalah hiperpautan, pautan yang pergi ke tempat lain. Jadi bagaimana saya melakukannya? Well, saya hanya boleh mengatakan, "Hello, http://www.disney.com." Jimat ini. Tambah nilai. Tetapi ini juga, tidak boleh diklik. Dan apa yang baik di sini, walaupun ini tidak berfungsi lagi, adalah bahawa ia seolah-olah bahawa pelayar literal sahaja tidak apa yang saya beritahu kepada lakukan. Jadi, jika saya hanya menaip URL seperti ini, ia hanya akan menunjukkan kepada saya URL. Saya perlu menggunakan tag atau markup bahasa untuk benar-benar memberitahu pelayar untuk melakukan lebih banyak lagi. Jadi, saya akan pergi ke hadapan dan memadam ini untuk seketika. Dan saya akan berkata, hey, pelayar, mula berlabuh di sini, pautan jadi untuk bercakap. Dan hyper-rujukan, destinasi sauh itu, harus URL ini. Dan notis sebut harga saya. Saya boleh menggunakan petikan tunggal, juga, tetapi anda perlu konsisten, dan saya akan biasanya hanya menggunakan tanda petikan berganda untuk memastikan ia mudah. Perhatikan saya akan menutup tag. Dan maka di sini saya akan berkata, "Disney World." Dan sekarang saya memerlukan symmetry-- kurungan terbuka, / a, ditutup kurungan. 

Jadi apa yang saya diperkenalkan? Kami telah mempunyai tag Beberapa sudah. HTML, Ketua, Title, badan, semua tag, jadi untuk bercakap, dengan rakan-rakan terbuka dan tertutup. Tetapi notis, ini adalah jenis daripada berbeza. Ini adalah apa yang kita akan memanggil dalam HTML sifat. Dan sesuatu sifat itu hanya sepasang-nilai utama. Ini adalah satu perkara yang biasa dalam komputer science-- pasangan-nilai utama. Ia semacam alat perdagangan. Kunci dan nilai. perkataan A dan kemudian beberapa perkataan atau perkataan-perkataan lain. Dan dalam kes ini, yang penting adalah href, dan nilai ini adalah bahawa URL penuh. Dan apa atribut tidak adalah ia mempengaruhi tingkah laku tag. Dan dalam kes ini, kita perlu untuk mempengaruhi tingkah laku tag anchor, kerana kita perlu berlabuh link ini ke suatu tempat. Dan bagaimana anda melakukannya adalah melalui atribut. 

Jadi, saya akan pergi ke hadapan dan simpan fail sekarang. Kembali kepada pelayar dan tambah nilai saya. Dan, Voilà, kami kini mempunyai permulaan atas laman web yang sah. Super-mudah, tetapi jika saya pergi ke atas notis this-- di sudut bawah kiri, ia adalah super-kecil. Tetapi anda melihat www.disney.com. Dan jika saya klik, ini memang whisks aku pulang kepada disney.com. Sekarang, perkara yang ingin tahu di sini adalah bahawa ia tidak yang best-- URL yang paling dipasarkan, tetapi itulah denda kerana fail ini tidak wujud pada World Wide Web. Ia wujud sebagai fail setempat di nampaknya Pengguna saya directory-- / jharvard-- untuk John Harvard-- / desktop. Tetapi ia mempunyai URL. Ia hanya berlaku untuk menjadi tempatan. Malangnya, tiada seorang pun yang melawat ini, kerana jika anda menaip URL ini, anda akan dapat memberitahu pelayar anda, mencari hello.html fail dipanggil pada pemacu keras anda. Dan, sudah tentu, melainkan anda telah telah mengikuti bersama-sama secara manual, ia tidak akan wujud di sana. 

Jadi itulah denda. Kami masih memerlukan satu cara, akhirnya, untuk mendapatkan fail ini ke dalam web, tetapi mari kita mengusik selain beberapa implikasi keselamatan daripada apa yang kita hanya saw dan mengikatnya kembali ke awal perbincangan dari pagi ini. Ia ternyata bahawa, jika pelayar literal hanya melakukan apa yang saya beritahu kepada lakukan, dan ia seolah-olah menjadi kes bahawa tag anchor adalah dipengaruhi oleh nilai ini atribut href dipanggil tetapi ia memaparkan ini teks, ini seolah-olah membayangkan bahawa saya boleh meletakkan URL dalam kedua-dua tempat dan kemudian muat semula dan kini melihat URL dan pergi ke URL. Notis, jika saya pergi ke atas bahagian bawah kiri, sesungguhnya saya akan masih disney.com. 

Jadi, jika anda pernah phished-- P-H-I-S-H-E-D-- dengan salah satu daripada orang-orang e-mel palsu dari seperti PayPal bank anda, anda mungkin telah mendapat pautan di dalam e-mel yang anda membaca yang memberitahu anda untuk klik di sini untuk mengesahkan kata laluan atau mengesahkan tarikh lahir anda anda atau sosial atau sesuatu sosial kejuruteraan anda untuk mendedahkan maklumat. Well, saya jenis boleh mengambil kelebihan ini, tidak boleh saya? Saya boleh mengatakan sesuatu seperti, www.paypal.com. Dan bukannya disney.com, saya boleh pergi ke, seperti, badguy.com. Tambah nilai. Dan bagaimana mudah ialah ia untuk menipu, terutama pembaca bukan teknikal atau Sepintas lepas membaca pembaca daripada untuk klik link seperti ini, yang jika saya klik it-- Saya sebenarnya tidak mahu pergi badguy.com. Saya tidak tahu apa yang sebenarnya di sana. Jadi paypal.com, notis, adalah apa yang ia berkata ia akan, tetapi sudah tentu, jika saya melihat ke bawah super-rendah, ia sedikit kabur, tetapi ia mengatakan badguy.com. Itulah satu-satunya memberitahu sekarang bahawa saya akan ke tempat yang salah. Dan apabila saya berkata sebelum ini bahawa bank-bank benar-benar tidak perlu menggalakkan atau kereta api pengguna ke pautan klik, ini merupakan salah satu manifestasi daripadanya. Dan ianya mudah itu. Anda kini berada musuh jika anda melakukan sesuatu seperti ini dan cuba untuk menipu pengguna ke dalam melawat laman web anda. Tetapi buat masa ini, kami akan terus perkara yang baik dan bersih. Kami akan pergi ke hadapan dan putar balik perubahan ini. Muat semula halaman. Dan saya kembali ke disney.com. 

Mari kita lihat jika kita tidak boleh mengusik lebih ini selain sedikit. Jadi "hello, Disney World." Saya akan katakan di sini. Mungkin saya akan membuat beberapa bilik. "Kami berharap anda menikmati penginapan anda!" Simpan. Tambah nilai. Ia tidak rea-- itu bukan apa yang saya bertujuan, bukan? Maksud saya, jika saya merawat teks saya memfailkan seperti pemproses perkataan, apa yang kamu berharap akan berlaku di sini? Ya, saya rasa seperti ada perlu satu baris di sini, jadi ia berasa kereta dalam beberapa cara. Tetapi itu sebenarnya sengaja, kerana hanya seperti sebelum ini, pelayar hanya akan melakukan apa yang anda beritahu kepada lakukan. Saya tidak diceritakannya kepada mematahkan garis. Saya tidak memberitahu ia bergerak ke bawah, walaupun walaupun, intuitif, saya rasa seperti saya lakukan. Jadi ternyata kita perlu yang lebih markup sedikit, dan saya akan menetapkan ini seperti berikut. Saya akan kata pengantar ini pertama hello dengan apa yang dipanggil tag perenggan. Dan kemudian saya akan pergi ke hadapan dan balut hukuman lain ini di tag perenggan yang lain, walaupun mereka perenggan super pendek. Sekarang saya akan untuk menyelamatkan. Tambah nilai. Dan sekarang kita mempunyai yang ruang, dan kita semacam mempunyai semantik dua perenggan yang berasingan. 

Itu semua baik dan bagus, tetapi ia akan lebih baik untuk menambah imej ke laman ini, jadi saya akan pergi mencari Mickey Mouse pada Google Images. Dan hanya untuk keseronokan, Saya akan merebut imej ini. Saya akan pergi ke hadapan sekarang dan merebut URL imej ini, walaupun ada yang berbeza cara-cara untuk melakukan ini. Buat masa ini, saya hanya akan menyalin URL. Saya akan kembali ke dalam teks saya fail, dan saya akan katakan di sini, img src = quote unquote URL yang, super panjang. Dan kemudian kepercayaan kepada satu gambar adalah sedikit berbeza. Terdapat benar-benar ada tanggapan permulaan imej dan berakhir imej, seperti permulaan tag tag penutup. Jadi ia berasa sedikit pelik untuk saya semantik untuk melakukan ini, mempunyai tag penutup-imej. Ia bukan tidak betul. Ia sempurna betul, dan ia digalakkan, tetapi ada notasi trengkas. Saya boleh jenis serentak membuka dan menutup tag yang sama, dan yang akan membuat pelayar gembira. Jadi ia hanya sedikit lebih ringkas untuk perkara-perkara bahawa dari segi konsep benar-benar tidak melakukan masuk akal untuk bermula dan berakhir. Mereka hanya berada di sana, atau mereka tidak. 

Jadi, saya akan menyimpan ini dan kembali untuk "hello, dunia" halaman dan tambah nilai saya. Dan ia sedikit di luar kawalan, kerana imej yang sebenarnya sedikit besar, tetapi itu OK. Saya boleh mengubah saiz dalam program. Atau anda tahu apa. Hanya untuk menunjukkan, Saya akan benar-benar mengatakan bahawa lebar perkara ini perlu hanya menjadi 200 piksel, 200 titik. Biar saya pergi ke hadapan dan menyimpan dan tambah nilai, dan kini halaman kelihatan sedikit lebih munasabah. Tetapi perhatikan corak. Well, saya telah jenis mengajar kamu semua HTML dalam erti kata lain, sekurang-kurangnya dari segi konsep, kerana semua HTML adalah ini tags-- tag terbuka, tertutup tag, dan sifat-sifat yang mengubah suai tingkah laku mereka. Dan, nampaknya, setiap tag boleh mempunyai sifar atau satu atau dua atau lebih sifat-sifat, setiap yang melakukan sesuatu yang sedikit berbeza. Sekarang, bagaimana anda tahu apa yang wujud? Anda hanya mendengar seseorang seperti saya memberitahu anda apa yang wujud, atau anda hanya Google wujud tutorial pada HTML, dan ia benar-benar mudah ini. 

Sesungguhnya, apabila saya adalah undergrad yang tahun yang lalu dan belajar HTML, satu pengajaran matematik saya pembantu hanya menghabiskan sedikit masa ajar saya untuk seperti setengah jam, satu jam, dan kemudian saya dalam perjalanan saya. Saya dalam perjalanan saya ke arah membuat yang paling mengerikan laman web sebelum ini, yang, nampaknya, saya tidak mempunyai benar-benar berkembang di luar. Tetapi persoalannya adalah bahawa, sebaik sahaja anda memahami ini ideas-- mudah jika sukar difahami text-- tetapi ini mudah idea untuk memulakan pemikiran dan menutup pemikiran, menjaga segala-galanya baik seimbang, mencari sesuatu sehingga, mengubah tingkah laku tag itu, itu benar-benar semua ada padanya. Dan sebenarnya, jika kita pergi ke sesuatu seperti google.com-- sebenarnya, mari kita pergi tempat yang sedikit lebih reasonable-- stanford.edu. Dan saya akan pergi untuk Lihat, Pemaju, View Source. Ia hodoh, tetapi notice-- dan saya akan zum dalam notis beberapa perkara itu biasa sudah. Ada ini di sini, yang merupakan pelayar. Di sini datang HTML5. Ada HTML. Rupa-rupanya, ada satu menyifatkan bahawa saya tidak menggunakan yang menentukan bahasa halaman, dan ini boleh membantu dengan automatik terjemahan dan barangan seperti itu. Berikut adalah ketua halaman. Berikut adalah tajuk laman Stanford. Ada tag saya tidak bercakap tentang tag Meta YET. Ia hanya semacam maklumat latar belakang. Ia membantu dengan SEO, atau pengoptimuman enjin carian, atau Google-hasil carian atau sebagainya. Tetapi jika kita terus mencari, menyimpan mencari, di sini tag Badan. Dan ada tandan lain tag kami tidak bercakap tentang lagi. Tetapi Div adalah satu untuk Bahagian atas halaman. Ia seperti sebuah segi empat tepat yang tidak dapat dilihat jika anda jenis mahu mental membahagikan halaman anda ke dalam unit yang berbeza dalam talian. Dan kemudian banyak divs Saya lihat, sesuatu yang dinamakan Class, tetapi kita akan kembali kepada itu. 

Ini adalah Borang interesting--. Borang adalah seluruh web. Mana-mana petak carian anda pernah digunakan adalah borang. Dan, ya, mari kita sebenarnya melihat. Borang. Tindakan. Tindakan borang ini, atas apa jua sebab-sebab sejarah, adalah URL itu. Kaedah adalah "post". Ternyata bahawa permintaan HTTP boleh menggunakan kata kerja "mendapatkan," seperti yang kita lihat sebelum ini, atau "pos." Dan akan melihat perbezaan ini dalam seketika. Mari kita benar-benar melihat apa ini. Biar saya pergi semula ke laman Stanford. Apakah bentuk yang mereka cakapkan kira-kira, yang anda fikir? Apa yang melompat keluar pada anda? 

PENONTON: kotak Search. 

DAVID J. MALAN: Ya. Jadi sehingga di bahagian atas kanan di sini ialah kotak Carian ini. Dan itulah bagaimana mereka melaksanakan it-- yang tag itulah literal bentuk terbuka kurungan. Dan kemudian mari kita mencari sesuatu. Mari kita mencari teman yang daripada mine-- "Nick Parlante." Enter. Dan sudah tentu, ia pergi ke URL yang sedikit berbeza. Biar saya pergi ke sini. Mari kita mencari "kursus." Tak guna. Pergi ke URL yang berbeza. Jadi, Stanford menambah beberapa sihir bahawa mereka tidak menyerahkan aku kepada URL yang kita lihat dalam tindakan mengaitkan sana. Tetapi bentuk ini di sini dilaksanakan semata-mata dengan cara markup ini di sini, tag. Malah, di sini adalah input untuk jenis carian yang anda mahu. Berikut adalah input untuk satu lagi jenis carian. Berikut adalah input untuk rentetan itu sendiri. Dan supaya matlamat tidak untuk membalut fikiran kita sekitar semua tag tetapi hanya untuk melihat. Ia hanya membuka dan menutup tag dan mencari perkara. Yeah? Victoria? 

PENONTON: [didengar] DAVID J. MALAN: Itu satu soalan yang baik. Itulah lebih sukar sedikit untuk melihat. Biar saya kembali kepada itu soalan dalam hanya beberapa minit apabila kita melihat sesuatu yang dinamakan cadar CSS, atau gaya melata, dan kita boleh cuba untuk membuat kesimpulan sebanyak dari halaman. Jadi, jika kita lihat pada google.com, mari kita lihat apa laman mereka kelihatan seperti. Anda akan they're-- yang comel hari ini. OKEY. Semua dilakukan. Baiklah, jadi View Source. Anda akan berfikir Google mempunyai kod sumber benar-benar baik. Jadi, nampaknya, apa yang sedang berlaku di sini? Dan sebenarnya, ini tidak walaupun HTML. Ini adalah sesuatu yang dinamakan JavaScript. Dan mari kita terus pergi dan pergi. Saya tidak tahu di mana halaman bermula. Saya akan menggunakan Command F, terbuka kurungan HTML. Baiklah, ada ia. Saya mendapati permulaan halaman, dan terdapat begitu banyak barangan di sini. 

Apa yang sebenarnya berlaku? Nah, anda tahu apa, kita boleh membersihkan sehingga ini. Jika saya bukannya pergi ke ini Memeriksa bar alat, alat diagnostik khas ini, dan pergi untuk tidak Network, di mana kita terus pergi hari ini, tetapi jika saya pergi ke Elements, apa yang benar-benar baik adalah bahawa pelayar yang mempunyai banyak mata jauh lebih baik daripada saya. Dan pelayar boleh membaca bahawa keadaan huru-hara bagi sebuah laman web, bahawa mel HTML kita hanya melihat, dan ia boleh menghuraikan atau membaca dan menganalisis dan memformat semula dengan cara manusia mesra yang bagus. Jadi apa yang saya lihat sekarang dalam skrin ini di sini bawah Elements, kandungan yang sama, tetapi mereka telah berengsot segala-galanya, mereka telah berwarna, tetapi ia adalah teks yang sama yang saya muat turun dari pelayan. 

Dan apa yang baik ialah saya boleh melihat dalam badan, untuk notis instance--, halaman yang masih terdiri hanya kepala dan badan, dan saya secara hierarki boleh menyelam di sini. Perhatikan bahawa Google seolah-olah mempunyai untuk divs-- satu ini dan yang satu ini. Saya boleh berkembang itu. Ada sejumlah besar divs lain. Jadi ia adalah sebuah kompleks kecil. Tapi tunggu. Ini seolah-olah banyak lagi boleh dibaca, agak, daripada ini. Mengapa Google memalukan sendiri dengan hanya menghantar keadaan huru-hara yang besar ini kod beberapa jenis hanya untuk melaksanakan sesuatu yang kelihatan begitu mudah pada pandangan pertama? Seperti, mengapa mereka tidak menambah lebih banyak ruang? Mengapa mereka tidak tekan Enter seperti yang saya lakukan? Lihatlah bagaimana baik saya pada menulis laman web. Saya tekan Enter supaya bersungguh-sungguh. Saya berengsot jadi segala-galanya begitu cantik dan boleh dibaca. Mengapa Google tidak mengamalkan yang sama? 

PENONTON: [didengar] DAVID J. MALAN: Baik. Sangat adil. Mereka tidak mempunyai beberapa orang di Google secara manual mengemas kini halaman rumah lagi. Ia bukan 1999 lagi. Jadi mereka mempunyai perisian. Mereka mempunyai alat-alat lain yang menjana dinamik mereka HTML. Sudah tentu, kod itu sendiri ditulis oleh manusia, tetapi realitinya adalah, ia agak adil untuk mengatakan, pelayar pasti tidak peduli bagaimana kemas kod adalah. Tetapi ada yang lebih sebab teknikal yang menarik bahawa Google mengedarkan HTML mereka kod dalam ceroboh itu, seolah-olah cara yang amat menggalakkan semua dibungkus bersama-sama dengan sangat sedikit way-- sangat sedikit di jalan format seperti yang saya lakukan. 

PENONTON: [didengar] 

DAVID J. MALAN: lebih cepat? Mengapa? Dan apa yang kamu katakan, Lydia? Lebih cepat? Mengapa lebih cepat? PENONTON: [didengar] DAVID J. MALAN: Ada tiada ruang untuk membaca. Yeah. Jadi berfikir tentang apa yang ruang adalah. Jadi setiap aksara pada papan kekunci mengambil beberapa jumlah ruang untuk mewakili, sama ada secara fizikal, suka mengambil yang ruang yang banyak, atau entah bagaimana di bawahnya hood, yang memerlukan ingatan. Dan sebagai aside-- dan kami akan bercakap lebih lanjut mengenai tomorrow-- ini setiap watak pada papan kekunci biasanya memerlukan 8 bit, atau satu bait. Jadi corak 8 sifar atau orang-orang, atau hanya 1 bait, seperti yang kita manusia biasanya akan berkata. Jadi itu kecil, tetapi ia masih bukan sifar. Ia masih beberapa jumlah ruang. Jadi, jika seorang jurutera atau Google menjadi asas bar ruang hanya sekali, dan rasa Google-- ia super-popular-- menganggap bahawa satu bilion orang sila layari laman web mereka sehari, atau beberapa beberapa orang sila layari laman web yang bilion kali sehari, berapa banyak bait tambahan mempunyai yang jurutera perisian hanya kos Google dengan memukul bar atau ruang dia sekali? 

PENONTON: [didengar] DAVID J. MALAN: Tidak cukup yang buruk. Hanya satu kali bait bilion. jadi a-- PENONTON: 8 bilion gigabait. DAVID J. MALAN: Tidak 8 bilion. 8 bilion bait. Tetapi 1 gigabit. 1 gigabyte akan menjadi unit ukuran. Jika dia melakukan dua ruang, 2 gigabait. Tiga gigabait. Betul? Ia skala mahal. Dan sebagainya dalam kes-kes seperti Google, yang, diberikan, kes-kes yang melampau, terdapat isu-isu lain yang timbul hanya dengan membuat keputusan yang sangat berpatutan atau mengambil tindakan manusia sangat mudah, kerana ia mempunyai kesan dibesarkan ini. Jadi salah satu daripada sebab ini kelihatan begitu mampat adalah betul-betul seperti Victoria said-- ia hanya dihasilkan oleh komputer juga. Jadi ada masalah besar. Mari pelayar penyelesaiannya. Tetapi ia juga sengaja tidak mempunyai ruang yang banyak, kerana ruang tidak perlu. Dan ruang yang benar-benar memerlukan wang. 

Ia sama ada kos masa, kerana hanya untuk menolak yang lebih banyak data daripada ibu pejabat google.com kita hanya telah mendapat untuk mengambil beberapa jumlah masa, walaupun ia milisaat atau mikrosaat, tetapi yang menambah lebih banyak pengguna, atau lebih mungkin lagi, ia mungkin kos wang. Google mungkin bersambung dengan orang lain dalam dunia, satu dari orang-orang yang sedang melihat mata, dan jika mereka mempunyai beberapa jenis hubungan kewangan mana data mereka kos wang, mereka mungkin serta mengurangkan jumlah data mereka meludah pada sambungan internet mereka. 

Jadi perkara yang lucu, walaupun, akhirnya, atau mungkin perkara yang meyakinkan, adalah bahawa walaupun ini kelihatan betul-betul yang amat menggalakkan, pada akhir hari, ia masih prinsip-prinsip yang tepat sama seperti halaman ini sangat mudah di sini untuk HTML halaman. Jadi hanya untuk meringkaskan dan supaya anda mempunyai versi berkanun jika anda tidak berikut bersama-sama dengan pilihan di sini, sini mungkin yang paling mudah untuk membuat laman web, jadi sesuatu untuk bermain dengan mungkin kemudian. 

Nah, mari kita memperkenalkan beberapa idea-idea lain sekarang. Kita kira-kira untuk memperkenalkan sesuatu yang dipanggil tag gaya. Kami boleh menyesuaikan dgn mode halaman ini dengan cara yang lebih menarik. Jadi manakala e-mel HTML adalah tentang menandakan sehingga data, jenis menyatakan kepada pelayar bagaimana struktur data, mana untuk meletakkan ia, CSS, atau Cascading Style Sheets, adalah bahasa kedua yang umumnya mendapat berbaur dengan HTML seperti yang kita akan see-- tetapi kita boleh membersihkan bahawa sehingga dalam moment-- yang mengambil ia batu terakhir, dan ia stylizes ia. Ia mendapat warna tepat, fon saiz tepat, kedudukan yang tepat. Ia mengenai estetika atau memformat, bukan tentang data asas sendiri. Dan cara yang paling mudah untuk menunjukkan ini mungkin melalui teladan. Jadi, saya akan pergi ke atas ke fail teks yang mudah saya. Dan dalam hanya seketika, saya akan berjalan kita melalui proses untuk melakukan ini diri kita sendiri. 

Saya akan kembali ke fail saya di sini dan muat semula halaman hanya untuk mengesahkan apa yang kelihatan seperti. Itulah di mana kita berada di sekarang. Saya rasa seperti kanak-kanak akan menikmati mempunyai beberapa warna ke laman web ini. Jadi saya akan pergi ke sini ke dalam kepala halaman. Dan saya akan melakukan gaya, / gaya. Dan kemudian di dalam ini, saya akan untuk memberitahu badan page-- saya dan format ini, pada pandangan pertama, mungkin sedikit pelik tetapi konvensional. Saya akan mengatakan bahawa latar belakang warna halaman ini harus menjadi hijau. Dan ini adalah malangnya semacam tidak reka bentuk yang terbaik. Perhatikan bahawa sebelum ini dalam dunia HTML, Saya berkata bahawa sifat-sifat adakah ini pasangan nilai utama. Sesuatu yang sama quote unquote "sesuatu." Dalam dunia CSS, yang direka oleh beberapa orang yang berbeza, mereka mengambil keputusan bahawa, mereka dunia, pasangan kunci-nilai akan perkataan kolon sesuatu. Jadi ia adalah idea yang sama, walaupun. Ia mengaitkan nilai dengan beberapa utama yang entah bagaimana mempengaruhi kelakuan halaman ini. 

Dan anda mungkin boleh meneka. Apa ini mungkin akan lakukan walaupun anda tidak pernah melihat HTML atau CSS sebelum ini? PENONTON: Menukar warna latar belakang. DAVID J. MALAN: Ya, menukar warna latar belakang. Dan khususnya Warna latar belakang badan. Tetapi setakat yang badan sekarang adalah web page-- ia satu-satunya perkara bawah really-- bar tajuk ia mungkin akan mempengaruhi perkara yang sama. Jadi mari kita lihat. Mari kita menyimpan ini. Pergi di sini dan menambah nilai. Ia agak mengerikan. Dan apa yang berlaku di sini adalah kesan sampingan. Saya hanya memilih imej ini secara rawak. Mengapa tidak hijau meresapi belakang Mickey? PENONTON: [didengar] DAVID J. MALAN: Tepat sekali. Ia ternyata bahawa imej, cantik banyak semua imej yang mungkin kita gunakan, semua rectangles-- segi empat tepat. Walaupun Mickey mempunyai beberapa keluk kepada dirinya sendiri dan mempunyai latar belakang, latar belakang yang telah menjadi sesuatu. Ia mempunyai untuk menjadi putih. Ia telah menjadi hitam atau sesuatu yang lain. Ia boleh menjadi telus. Dan sebenarnya, saya boleh membuka Mickey Mouse sini dalam program yang dikenali sebagai Photoshop atau sesuatu yang serupa dan mengubah semua putih yang latar belakang telus, jadi hijau itu akan bersinar melalui. Tetapi itu sesuatu yang saya perlu bertanya diri saya atau artis grafik atau seorang pereka pada saya syarikat, misalnya, yang perlu dilakukan, terutama kerana saya hanya dipinjam satu ini dari internet. Tetapi itu mengapa ini berlaku. 

Jadi apa lagi yang mungkin kita mahu lakukan? Well, kita mungkin mahu untuk mengatakan bahawa kita benar-benar berharap anda menikmati penginapan anda. Dan untuk penekanan, saya mahu untuk membuat ini kuat, dan saya akan berkata terbuka kuat dan menutup kuat dan kemudian menambah nilai. Dan ia adalah satu keras sedikit melihat pada projektor tetapi mungkin benar-benar sekarang melompat keluar pada anda sedikit lebih. Jadi anda boleh menambah huruf condong dalam ini cara, menghadap berani dengan cara ini. Kita boleh menukar warna. Malah, hanya untuk tendangan, Saya akan pergi ke hadapan dan melakukan ini. Saya tidak suka bagaimana saya perenggan dekat ini bersama-sama, jadi saya boleh melakukan sesuatu seperti ini. Saya akan memberitahu pelayar, berubah setiap tag perenggan untuk mempunyai, mari kita iaitu- sebenarnya, anda tahu apa, mari kita menyelaraskan teks-align, pusat. Dan sekali lagi, saya tahu ini hanya kerana seseorang yang diajar kepada saya atau saya melihat ia di dalam rujukan dalam talian. Jadi biarlah saya menyimpan ini. Dan, ah, sekarang saya telah berpusat imej di sana. Dan sebenarnya, anda tahu apa, jika Saya bergerak imej saya ke dalam perenggan yang tag-- supaya perenggan ketiga, walaupun ia tidak teks. Mari kita menyimpan itu dan menambah nilai. Sekarang halaman mula kelihatan jenis dengan- Maksud saya, ia masih cukup hodoh, tetapi sekurang-kurangnya ia kelihatan seperti saya menghabiskan dua minit dan bukannya satu minit menjadikannya. 

Dan sebagainya, secara berperingkat, boleh kita buat perubahan estetik sekarang untuk halaman? Saya tidak benar-benar mengubah data dalam halaman lain daripada menambah perkataan benar-benar. Saya telah menambah metadata, jika anda akan. Hey, pelayar, membuat perkataan "benar-benar" berani. Tetapi data yang tidak kukuh. Itulah metadata. data ini adalah "benar-benar." Oleh itu, kita masih mempunyai beberapa konsep yang sama seperti sebelum ini. Kini, sudah tentu, ini bukan di web, jadi saya akan melakukan satu langkah terakhir di sini. 

Saya akan pergi ke hello.html dan hanya menyerlahkan dan menyalin ini. Dan sekarang saya akan pergi ke Cloud9, yang Saya akan berjalan anda melalui dalam hanya seketika. Dan kemungkinan besar anda tidak lama lagi akan menjadi, jika belum, pada skrin seperti ini. Dan biarlah saya hanya memberikan yang cepat lawatan ke apa Cloud9 sebenarnya. Jadi sekali lagi awan 9 perkhidmatan berasaskan awan ini yang memberikan anda dan saya ilusi mempunyai mesin maya kita sendiri dalam awan, dari segi teknikal bekas dalam awan, yang kita ada penuh keistimewaan pentadbiran untuk. Jadi, dalam teori, tidak ada yang lain di dunia ini mempunyai akses ke skrin Saya melihat sekarang, kecuali mungkin rakyat yang menjalankan laman web ini, kerana teknikal mereka mempunyai akses fizikal dan sebagainya. 

Jadi, apa yang kita lihat dalam persekitaran ini? Saya akan zum keluar, kerana ia sedikit kecil. Dan biarlah saya menunjukkan lebih di sini hanya untuk seketika. Pada sebelah kiri saya dan anda skrin, ada pelayar fail di sebelah kiri. Jadi sama dalam semangat untuk Mac OS dan Windows. Ini semua adalah daripada fail dengan akaun saya. Dan secara lalai, jika anda akaun adalah seperti saya, anda akan melihat atau tidak lama lagi melihat helloworld.html dan readme.md. Di sini di sebelah kanan, ini adalah mana fail teks saya akan pergi. Jika anda pernah menggunakan Microsoft Word atau Notepad atau TextEdit, ini adalah perkataan editing saya fail akan pergi. Dan kemudian yang paling sukar difahami ciri persekitaran ini bahawa kita tidak akan benar-benar perlu untuk menggunakan adalah turun di sini dipanggil Window Terminal. Jika anda telah menggunakan DOS dari tadi, ini adalah Linux atau yang setaraf Linux DOS. Ia adalah satu interface-- berasaskan teks ada klik tetikus, tidak mengheret. Apa yang anda boleh lakukan adalah menaip arahan, tetapi mereka arahan boleh membuat fail, memindahkan fail, terbuka direktori, direktori yang dekat, melakukan apa-apa beberapa perkara. Tetapi untuk sekarang, kita akan hanya menghabiskan masa kami di sini. 

Dan jadi mari kita melakukan ini. Jika anda berada dalam ini alam sekitar, yang anda perlu menjadi jika anda mencipta ruang kerja sudah, teruskan dan hanya pergi ke atas ke Fail, New seketika. Dan yang akan memberi anda yang baru tab di sini di tengah-tengah. Dan saya just-- dan mari kita teruskan niat ini. Mari kita pergi ke hadapan dan jangan Fail, Simpan dan pergi ke depan dan memanggilnya hello.html, jangan dikelirukan dengan helloworld.html, yang datang dengan akaun percuma anda yang baru, yang hanya fail sampel. Anda akan melihat ia tiba-tiba muncul, kemungkinan besar di sebelah kiri, dan tab itu masih lagi terbuka. Dan biarlah saya menggalakkan anda sekarang untuk mencipta fail ini atau beberapa varian itu. Dan jika anda tidak boleh agak melihatnya pada skrin, ini adalah sama dengan slaid bahawa anda mungkin mempunyai dalam tab lain. 

Jadi ringkasnya, membuat laman web pertama anda, menyimpannya, dan kemudian dalam hanya seketika, Saya akan menunjukkan kepada anda bagaimana anda sebenarnya boleh melihat ini. Tetapi menukar sekurang-kurangnya satu perkara. Tukar helloworld untuk sesuatu pilihan anda sendiri, supaya anda yakin bahawa itu anda memfailkan dan tidak ada seorang pun yang saya buat. Baiklah. Dan apabila anda ready-- tidak rush-- apabila anda sudah bersedia, teruskan dan menyimpan fail setelah anda membuat perubahan ini. Dan jika anda klik butang up berjalan atas, ini perlu membuka tab baru yang akan memberitahu anda apa URL anda boleh melawat fail anda di, tetapi ia mungkin mengambil masa untuk quote unquote "mula Apache," yang adalah nama pelayan web. Jadi berhati-hati untuk melakukan perkara apa yang dalam fail akhirnya. Jadi sekarang, saya akan zum masuk. Jika saya mula menaip terbuka kurungan HTML, notis ia mendorong saya untuk menyelesaikan pemikiran saya. Dan jika saya selesai pemikiran saya, ia secara automatik memberikan saya tag penutup. Tetapi jangkaan itu adalah kemudian saya akan melanda Masukkan, dan kemudian bergerak dalam sana dan jangan pergi dalam dan di kemudian saya melakukan badan di dalam. Dan ia sedikit pelik pada mulanya, kerana ia melakukan kerja untuk anda, tetapi sedar bahawa akhirnya ia menjimatkan ketukan kekunci. Dan sebenarnya, ciri yang sangat biasa pengaturcaraan persekitaran teknologi maklumat hari ini kedua-dua untuk pembangunan web seperti ini manakala program sebenar, yang kita akan bercakap tentang esok, adalah ciri-ciri auto-lengkap, perkara-perkara yang hanya membenarkan pengaturcara atau pereka menaip lebih sedikit ketukan kekunci untuk mencapai perkara yang sama. Kadang-kadang ia adalah baik, walaupun. Kadang-kadang ia hanya menjengkelkan. Dan, sekali lagi, apabila anda telah disalin slaid atau beberapa varian itu, anda boleh klik butang Run sehingga atas. Dan kemudian di bahagian bawah tingkap, anda akan dimaklumkan apa URL anda boleh melawat laman web anda. Mine, misalnya, adalah di business-daharvard.c9users.io dan sebagainya. Baiklah, jadi, mari me-- apa-apa soalan? Sebarang pertanyaan lain mengenai hanya mendapat ini bekerja sebelum kita menambah ciri-ciri? Dan biarlah saya mencadangkan, hanya untuk mendapatkan orang comfortable-- kerana ia adalah satu perkara yang hanya copy-paste membuta tuli apa yang saya lakukan. Tetapi hanya supaya orang bertumbuk dengan sekurang-kurangnya satu tugasan, Saya akan menghidupkan muzik beberapa. Saya akan mencadangkan senarai perkara yang anda berpotensi boleh menambah. Dan anda pasti boleh menggunakan Google. Dan mengapa tidak kita hanya mencadangkan bahawa anda cuba untuk menyelesaikan sekurang-kurangnya satu masalah tertentu di sini. Jadi dari segi tag, biarlah saya menggunakan semula ini di sini. 

Sebenarnya, saya meletakkan ia dalam bentuk teks. Katakan bahawa di antara kita mungkin tag digunakan di sini adalah beberapa tag di sini. Kami telah melihat tag perenggan. Sekarang ia akan auto-lengkap. tag perenggan, tag anchor. Katakan anda mahu membuat sesuatu yang lebih besar, jadi anda mungkin like-- tag span boleh membantu. Nah, anda mungkin memerlukan bantuan untuk itu dalam hanya seketika. Kami telah melihat div. Anda akan melihat ada meja. Terdapat sesuatu yang dinamakan tr, td. Th, td. Kembali kepada itu dalam seketika. Apa lagi yang mungkin berguna? Ada yang kuat. Ada penekanan, atau sebaliknya em. There's-- apa lagi mungkin anda suka di sini? Nah, kita akan mengambil melihat bahawa bersama-sama. Bentuk, yang kita lihat. Ada bentuk. Ada input dan beberapa yang lain. Baiklah, jadi mari kita buat ini. Untuk menjawab Victoria soalan, biarlah saya terlebih dahulu pastikan bahawa semua orang mampu untuk mendapatkan kerja hello mereka. Maka biarlah saya memperkenalkan pasangan idea lain. Kemudian kami akan memberitahu orang menyelesaikan beberapa masalah sendiri. Maka kita sebenarnya akan kembali itu tanggapan borang, dan kami akan benar-benar semula melaksanakan- bersama-sama antara muka depan, jadi untuk bercakap, untuk Google sendiri. Kami akan menggunakan Google sebagai hujung belakang dan membiarkan mereka bekerja keras, mencari, tetapi kami akan mencipta bahagian hadapan Google dan borang carian bahawa mereka ada di halaman rumah mereka sendiri. Dan dengan itu kita akan kembali kepada tag dalam hanya seketika. 

Jadi ini adalah apa yang saya dicadangkan hanya sebentar tadi. Kita boleh menambah penyesuaian dgn mode kepada halaman dalam tag gaya ini, dan kita boleh menyesuaikan dgn mode latar belakang warna, penjajaran teks, sama ada pusat atau kiri atau kanan. Tetapi dengan cepat yang anda lakukan mencari atau pereka web akan mendapati bahawa ini menjadi sedikit dikawal, kerana anda melakukan apa yang dipanggil kandungan mencampurkan dengan persembahan itu. Anda mencampurkan data anda dan estetika itu. Dan sebenarnya, jika anda menganggap apa yang akan berlaku dalam satu time-- ini adalah yang sangat kecil halaman web, sudah tentu. Tetapi jika saya menambah kandungan ke laman ini dan saya menambah gaya ke laman ini, halaman dengan cepat mendapat lagi dan lagi dan lagi. Dan menganggap bahawa saya mahu mempunyai laman web kedua yang berkongsi beberapa sifat-sifat ini. Katakan laman web kedua saya untuk saya site-- juga, saya mahu pusat segala-galanya, dan saya juga mahu segala-galanya dengan latar belakang hijau. Saya cukup banyak akan perlu menyalin dan tampal beberapa ayat-ayat ini ke dalam fail kedua, yang berasa halus. Ia akan menyelesaikan masalah tersebut. 

Tetapi bagaimana jika saya mahu halaman satu pertiga atau halaman 30 atau halaman yang ke-40? Sekarang saya akan menyalin dan menampal banyak kod salinan dalam berbilang fail. Dan supaya menganggap bahawa Saya membuat keputusan dan saya diberitahu, hey, kita tidak menggunakan latar belakang hijau lagi. Kita akan mula menggunakan oren. Apa yang anda perlu ubah? Nah, anda perlu mengubah gaya yang dari hijau kepada oren dalam berapa banyak tempat? Seperti 30 atau 40 tempat. Ia membosankan. Ia terdedah kepada kesilapan. Ada beberapa sebab di mana anda tidak akan mahu untuk mendorong yang jenis sakit untuk diri sendiri. Dan supaya ia tidak akan menjadi baik jika kita boleh mengambil apa yang saya hanya meletakkan antara kedua-dua kuning tag, tag gaya, faktor ia keluar, dan meletakkan semua saya penyesuaian dgn mode ke dalam satu fail pusat bahawa semua 30 atau 40 fail saya yang lain meminjam daripada atau entah bagaimana rujukan, tidak seperti rangkaian gambar rajah yang kami lakukan sebelum ini? 

Jadi, jika saya di sini, saya akan benar-benar mencadangkan yang kita menggantikan tag gaya dengan sesuatu dipanggil tag pautan, yang adalah teruk, teruk dinamakan, kerana anda tidak menggunakan link tag untuk mewujudkan apa yang kita manusia tahu sebagai pautan dalam laman web. Untuk itu, anda menggunakan yang tag? Bagaimana anda membuat pautan dalam laman web? PENONTON: a. DAVID J. MALAN: The, atau anchor tag, yang pergi ke Disney sebelum ini. Pautan tag sini mengatakan link this-- untuk fail yang dipanggil styles.css, hubungan yang akan menjadi bahawa itu lembaran gaya saya. Jadi ini adalah salah satu daripada S dalam CSS-- lembaran gaya melata. Style sheet-- dua daripada S dalam CSS. Cascading style sheet. Ini hanya bermakna, hey, pelayar, pergi mencari styles.css pada pelayan tempatan dan menggunakannya sebagai lembaran gaya anda, yang bermakna di dalam fail yang akan menjadi semua stylizations yang kita baru sahaja selesai. Dan jadi apa fail yang mungkin kelihatan seperti adalah ini. Dan saya hanya akan melakukan ini adalah yang cepat contoh, kerana kita tidak perlu untuk mendapatkan terlalu banyak ke dalam rumpai di sini. Tetapi jika saya menyalin ini, apa yang saya mencadangkan ialah seorang programmer mencipta fail baru, paste mereka lines-- whoops-- paste mereka garis, simpan sebagai styles.css, dan kemudian, dalam fail lain, memadam semua itu dan menggantikannya sebaliknya dengan tag pautan ini. Supaya jika saya membuat pautan href = "styles.css", hubungan itu adalah "stylesheet" tag penutup. Menyimpannya. Kembali ke helloworld saya. Tambah nilai. 

Secara literal tiada apa yang berlaku. Ini satu perkara yang baik, kerana ia bermakna ia sebenarnya semua kerja. Untuk membuktikan banyak, kira saya membuat kesilapan menaip, dan saya memanggil ini "styles.css" dengan modal S, yang tidak betul, dan kemudian muat semula. Sekarang anda boleh lihat ia hanya tidak berfungsi. Sekarang, mengapa? Nah, mari kita menggunakan teknik dari awal. Biar saya pergi ke hadapan dan, pelayar saya, dalam Chrome, Saya akan membuka yang khas tab rangkaian seperti sebelum ini, dan biarlah saya memuat semula halaman. Apa yang tidak kamu terkejut melihat sekarang? Atau mungkin anda terkejut melihatnya. Sama ada cara, apa yang anda lihat sekarang? PENONTON: [didengar] DAVID J. MALAN: Ia tidak dijumpai. Mengapa ia tidak dijumpai? Well, modal Styles.css-- S-- tidak wujud. Saya misnamed ia. typo mudah. Tetapi saya mendapat difahami kini merupakan 404, kerana pelayan itu berkata, hey, ia tidak dijumpai. Secara harfiah, saya tidak tahu mana fail yang. Jadi hasilnya, pelayar menunjukkan anda apa yang ia boleh, kandungan mentah halaman, yang merupakan 200, HTML, tetapi penyesuaian dgn mode yang tidak boleh ditambah selepas itu. Dan ini adalah apa yang dimaksudkan dengan melata. Anda boleh jenis menambahnya selepas, dan ia semacam menapis estetika laman web. Dan anda juga boleh mengatasi mereka gaya dengan fail lembaran gaya lagi yang lain jika anda mahu. Ia tidak ditemui, walaupun, dalam kes ini, kerana sudah tentu, saya misnamed ia. Jadi saya akan mempunyai untuk menetapkan bahawa pertama. 

Jadi mari kita pergi ke hadapan dan mencadangkan yang berikut. Mari kita pergi ke hadapan dan melakukan ini. Bermula dengan mungkin fail helloworld anda, biar saya menjemput pasangan daripada menampilkan cadangan. Jadi, Victoria, anda mahu membuat beberapa teks yang lebih besar, bukan? Baiklah, jadi kita boleh jangan menjadikan teks lebih besar. Dan kita masing-masing akan memetik off hanya satu masalah untuk menyelesaikan. Membuat teks yang lebih besar. Saya tidak akan mengganggu menulis ini apabila kita mempunyai teknologi peluru betul di sini. Jadi beberapa masalah. Oleh itu, kita akan cuba untuk membuat teks yang lebih besar. Baiklah. Apa lagi yang akan seseorang mencadangkan? Apa lagi yang mungkin kita mahu lakukan pada laman web? Mari kita datang dengan senarai pendek perkara dan kemudian mewakilkan kepada kumpulan untuk memikirkan ini. 

PENONTON: [didengar] 

DAVID J. MALAN: OK, teks kedudukan di sisi berbeza halaman? Baiklah. Sesuatu yang lain. 

PENONTON: [didengar] DAVID J. MALAN: Ia adalah. Jadi gif adalah hanya format fail yang berbeza. Kami hanya digunakan, apa, yang png atau jpg mungkin? Kami menggunakan jpg a. Jika anda ingin tahu, yang berlebihan menjawab kepada soalan anda adalah jpg secara umumnya digunakan untuk gambar, kerana ia menyokong berjuta-juta warna atau 24-bit warna. gif A biasanya digunakan untuk, seperti, memes internet ini animasi days--, gifs animasi seperti. Tetapi ia berlaku untuk menggunakan warna yang lebih kecil palet, hanya 256 warna mungkin, tetapi ia menyokong ketelusan dan animasi. Dan kemudian ada png, yang menyokong ketelusan dan lebih banyak warna tetapi tidak animasi. Jadi ia adalah satu keseimbangan. Jadi menambah gif, walaupun, akan berfungsi bersamaan dengan menambah png atau jpg a. Yeah. Sumber imej sama. Jadi sesuatu yang lain. Mari kita datang dengan sesuatu yang kami hantar ke Victoria lakukan di sini. 

PENONTON: Tambah butang untuk borang. DAVID J. MALAN: OK. Jadi menambah butang untuk borang. Dan kami akan melakukan salah satu yang bersama-sama. Supaya berada segue yang sempurna selepas cabaran ini. Apa-apa lagi? Apa yang mungkin anda suka lakukan? web berasa sangat underwhelming jika ini adalah semua yang kita boleh lakukan. PENONTON: Menukar warna teks. DAVID J. MALAN: Tukar apa? PENONTON: warna teks. DAVID J. MALAN: Perubahan warna teks. Baiklah. Jadi, mari kita buat ini. Hanya lagi supaya anda tidak, hanya secara hafalan, melakukan apa yang saya lakukan, Saya akan menghidupkan muzik untuk mungkin lima minit di sini. Anda dialu-alukan untuk menggunakan Google. Anda dialu-alukan untuk bertanya kepada saya, dan Saya akan berbisik petunjuk dalam telinga anda. Anda dialu-alukan untuk melihat lebih di atas bahu-masing. Tetapi menyelesaikan salah satu daripada masalah-masalah ini. Tetapi kami akan melakukan yang terakhir, yang membentuk satu, jika kita boleh, bersama-sama. Jadi lima minit untuk menyelesaikan mana-mana satu daripada masalah-masalah ini menggunakan Google, gerak hati, atau mana-mana cara lain yang disediakan untuk anda. 

[MUZIK Bermain] Baiklah. Jangan bimbang jika anda mahu untuk menjaga tinkering, tetapi saya akan merosakkan pasangan jawapan ini. Jadi cadangan pertama dari Victoria adalah untuk menjadikan teks lebih besar. Jadi ada beberapa cara untuk melakukan ini. Saya kini dipulihkan skrin saya untuk saiz ini, walaupun saya telah dizum masuk buatan hanya untuk melihat sesuatu. Dan mari kita buat ini. Biar saya pergi ke hadapan dan merebut beberapa teks Latin generik hanya supaya kita mempunyai sesuatu untuk bekerja dengan. Maka berikanlah saya hanya satu masa. Saya akan membuat tiga perenggan. OKEY. Ini akan menjadi contoh yang lebih baik. Jadi bagi yang ingin tahu, dalam hello.html saya, saya hanya ditampal tiga tidak masuk akal perenggan Latin hanya supaya kita mempunyai beberapa teks untuk bekerja dengan. Dan matlamat Victoria adalah untuk membuat beberapa teks yang lebih besar. Jadi saya boleh, seperti sebelum ini, pergi di sini. Dan biarlah saya melakukannya dengan cara yang betul. Saya akan mempunyai link tag yang menunjuk ke fail dipanggil "styles.css," hubungan yang sekali lagi "stylesheet." Dan kemudian saya akan menyelamatkan yang dan membuka ini "styles.css." 

Jadi, seperti sebelum ini, saya mempunyai keupayaan dalam fail CSS ini untuk benar-benar mengatasi lalai estetika laman web, dan estetika lalai, sudah tentu, adalah agak membosankan. Ia semacam saiz fon biasa, hitam teks, latar belakang putih, dan sebagainya. Jadi rasa saya ingin semua teks ini lebih besar. Saya boleh melakukan beberapa perkara. Dalam fail styles.css saya, saya boleh mengatakan, anda tahu apa, memohon berikut untuk badan halaman saya. Teruskan dan membuat saiz font 24 mata, yang merupakan nombor yang saya mungkin digunakan dalam Microsoft Word. Biar saya kembali ke web saya halaman di sini dan tambah nilai, dan anda boleh melihat bahawa ia sudah lebih besar. Dan kita boleh mendapat sedikit gila, seperti yang kita boleh di desktop-- yang menjadikannya 96 mata. Tambah nilai. Dan ia semakin sedikit susah dipakai pada ketika ini. 

Tetapi saya boleh menjadi sedikit lebih tepat. Bukannya memohon ini stylesheet untuk badan halaman saya, apa lagi yang mungkin saya memohon kepada sebaliknya, apa tag lain yang mungkin masih berfungsi dengan cara yang sama? 

PENONTON: p tag? DAVID J. MALAN: P tag. Jadi kepala itu tidak akan betul, kerana kepala, anda tidak boleh benar-benar mengawal estetika. Ada teks sama ada terdapat atau tidak. Tetapi p tag-- Saya boleh menyelam dalam sedikit lebih mendalam, boleh dikatakan, kepada perenggan tag. Dan walaupun terdapat tiga, yang betul-betul halus, kerana dalam CSS, apabila saya hanya mengatakan "p," ini ertinya memohon berikut kepada mana-mana tag yang sepadan dengan ini pemilih, pemilih hanya yang nama tag. Jadi di mana sahaja anda melihat "P," memohon saiz fon, dan mari kita membuat ia lebih munasabah again-- 24 mata. Dan anda tahu apa, hanya untuk langkah yang baik, mari kita membuat warna hanya merah buat masa ini. Dan sekarang jika saya tambah nilai, sekarang kita melihat tiga perenggan hodoh. 

Tetapi sekarang andaikan bahawa saya jenis dengan- Saya hendak perenggan pertama melompat keluar pada pengguna. Saya tidak mahu hanya meningkatkan saiz fon bagi segala-galanya. Oleh itu, saya benar-benar mahu untuk mengenal pasti atau membezakan antara perenggan ini. Jadi mari kita menghapuskan merah, kerana itulah hanya jenis lekat, dan mari kita pergi ke hadapan dan membuat saiz font 12 perkara secara lalai, supaya kita kembali kepada sesuatu sedikit lebih munasabah. Dan sekarang saya hanya mahu untuk meningkatkan saiz font perenggan pertama. Saya boleh melakukan ini dalam beberapa cara, tetapi salah satu cara itu mungkin yang paling pengajaran di masa adalah untuk melakukan yang berikut. Biar saya pergi ke hadapan dan berkata, ini perenggan mempunyai ID unik "pertama." Saya boleh memanggil apa-apa ini yang saya mahu. Saya boleh memanggil ini "foo" atau apa-apa perkataan lain, tetapi saya akan memberikan beberapa nama semantik bermakna seperti "pertama." Ini adalah pengecam unik, ID, perenggan pertama saya. 

Apa yang saya kini boleh melakukan dalam lembaran gaya saya adalah menjadi sedikit lebih tepat. Daripada mengatakan, memohon berikut untuk tag p, Saya boleh mengatakan following-- memohon yang berikut, atau pilih, elemen HTML yang mempunyai ID unik "pertama." Apa yang saya mahu untuk memohon kepadanya? A saiz fon 24 mata. Jadi saya mempunyai dua pemilih sekarang. Seseorang membuat semua Perenggan 12 perkara. Tetapi yang satu ini, terutama kerana ia datang second-- ia datang lalu di file-- yang ini mempunyai kesan yang melata. Saya baru sahaja membuat semua saya tag perenggan 12 perkara, tetapi ini sekarang lata dan mengatasi bahawa bagi mana-mana elemen di halaman, mana-mana tag dalam halaman yang ID unik adalah quote unquote "pertama." Dan hashtag dalam konteks ini hanya bermaksud "pengecam unik." Saya tidak memasukkannya ke dalam fail HTML. I, di sini, hanya mengatakan quote unquote "pertama." 

Jadi biarlah saya menambah nilai. Dan sekarang saya lihat, ah, OK. Maksud saya, ia bukan yang cantik, tetapi ia adalah jenis daripada seperti kata pengantar kepada buku atau sesuatu seperti itu, mana perenggan yang pertama adalah lebih besar. Boleh menjadi lebih tepat dengan hanya huruf pertama, tetapi sekurang-kurangnya Saya telah dijalankan lebih banyak kawalan. Sekarang maybe-- mungkin saya mahu melakukan ini kadang-kadang apa jua sebab, dan jadi saya tidak mahu perkara ini memohon kepada hanya satu tag HTML. Sebaliknya, mari kita iaitu- mari juga melakukan yang berikut. Class = "import." Manakala ID digunakan untuk secara unik mengenal pasti satu perkara, satu tag, dalam laman web anda, kelas yang dimaksudkan untuk menjadi di mana-mana beberapa elemen atau tag pada halaman web anda. Jadi ia boleh digunakan semula. ID tidak boleh diguna semula. kelas A boleh digunakan semula. 

Dan anda tahu apa, atas apa jua reasons-- falsafah Saya tidak menamatkan saya thought-- saya akan mengatakan bahawa perenggan pertama dan perenggan kedua adalah penting. Jadi, saya akan memohon kelas yang dipanggil "Penting," bahawa, jika saya menyimpan fail saya dan tambah nilai, tidak mempunyai kesan berfungsi lagi. Tetapi saya telah menambah beberapa metadata untuk fail, semacam sesuatu berasingan daripada data teras fail, supaya sekarang dalam lembaran gaya saya, jika saya sebaliknya ia akan berkata ".important" - anda tahu, apa-apa yang penting, saya akan membuat font-warna, red-- atau sebaliknya tidak font-warna, hanya warna. Ada yang tidak konsisten dalam CSS malangnya. Dan menambah nilai. Sekarang notis pertama dua perenggan berwarna merah tetapi tidak ketiga, kerana saya hanya memohon kelas "penting" dua pertama perkara-perkara. 

Jadi dalam ID, anda mempunyai kemampuan menetapkan secara tepat. Dengan kelas, anda perlu boleh gunapakai. Tetapi dalam kedua-dua kes, notis jenis prinsip yang baik reka bentuk di mana saya kira semua daripada estetika ke fail styles.css saya. Jadi tidak ada messiness sini. Tidak ada menyebut merah atau berani menghadap atau saiz fon dalam fail ini. Sebaliknya Saya mempunyai semantik, bermakna ciri-ciri data saya sebagai, di sini adalah beberapa data penting. Berikut adalah beberapa data yang lebih penting. Selain itu, di sini adalah "Pertama" data penting saya. Jadi HTML adalah tentang jenis daripada tagging, secara literal, kata-kata dan perenggan dan konstruk dalam anda halaman dengan petua sedikit, jika anda akan, bahawa anda boleh entah bagaimana memanfaatkan menggunakan teknik-teknik lain seperti CSS dengan cara ini. 

Jadi, dalam jawapan kepada soalan Victoria, kita boleh membuat teks yang lebih besar dengan cara itu. Terdapat begitu banyak cara lain, tetapi fon tag-- kurungan terbuka "font" - sebenarnya lama beberapa tahun. Dan ini adalah masalah, juga, dengan bergantung hanya pada resources-- talian mereka cenderung untuk ketinggalan zaman. Dan sesungguhnya, yang sudah ditamatkan, kerana dunia sedar, apa maksud "font-size = 7" bermakna? Ia tidak. Dan sebagainya untuk beberapa tahun dan ke ini day-- salah satu sisi nota di sini adalah bahawa ia sebenarnya sangat menyakitkan masih kadang-kadang untuk membangunkan tapak untuk web, kerana Microsoft dan Google dan Mozilla dan orang lain sering tidak bersetuju tentang bagaimana untuk mentafsir spesifikasi seperti HTML. 

Terdapat rulebook untuk HTML yang umumnya mengatakan apa yang setiap tag bermakna. Tetapi kadang-kadang ia diserahkan kepada budi pelaksanaan ini, budi bicara dan Google Microsoft. Dan supaya anda akan mempunyai sangat kerap lihat pada laman web sesuatu kelihatan berbeza pada PC daripada ia pada Mac, dan itu benar-benar kerana, pada akhir hari, mereka tidak menguji baik pada kedua-dua platform. Tetapi ia juga kerana yang munasabah, orang pintar akan tidak bersetuju dan syarikat-syarikat yang tidak bersetuju, dan sebagainya salah satu cabaran pengaturcaraan untuk web atau mereka bentuk perkara untuk web menulis laman web anda dengan cara yang yang bekerja pada setiap pelayar web. Tetapi itulah yang tidak munasabah, bukan? Terdapat begitu banyak versi begitu banyak pelayar di luar sana yang, pada satu ketika, anda juga perlu membuat panggilan penghakiman dan anda perlu membuat keputusan sebagai sebuah syarikat, terutamanya untuk e-gaya-dagang laman web di mana anda berada cuba untuk menggunakan yang terbaru dan terhebat teknologi untuk memberikan pengguna benar-benar baik pengalaman. Tetapi beberapa peratusan pengguna mungkin masih menggunakan Internet Explorer 6 atau 7 atau 8, terutamanya bergantung kepada negara bahawa mereka datang dari. 

Dan sebagainya sangat biasa Dirunding adalah sesuatu seperti "Statistik pelayar web." Dan jika kita pergi supaya- mari kita lihat Wikipedia dan melihat bagaimana up-to-date carta ini adalah jika ada satu. Jadi di sini anda boleh melihat mana pelayar sebenarnya adalah, menurut Disember 2015, mengikut kepada Kerajaan Amerika Syarikat. Chrome adalah di bahagian pasaran 42%, diikuti oleh IE sebahagian besarnya dalam dunia korporat atau tetapan PC, sudah tentu, diikuti oleh Firefox, kemudian Safari, kemudian Opera tidak membuat peta di sini atas sebab tertentu, dan kemudian Lain. Mungkin ia adalah di bawah Lain. Tetapi yang lebih bermasalah daripada itu is-- mari kita lihat jika Wikipedia juga mempunyai versi pelayar version-- 

Mari kita pergi ke statistik pelayar. IE. Walaupun itu tidak mencukupi. Statistik Browser. versi saya. Itu tidak akan menjadi betul. Mari kita lihat versi. bahagian pasaran pelayar. Mari kita lihat jika ini datang. OKEY. Sekarang ini semakin sedikit lebih berguna. Jadi di sini, melihat bahawa kita mempunyai semua versi pelayar. Dan, tuhan saya, jika anda look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. Maksud saya, Pelayar semakin dikemaskini, dan kadang-kadang beberapa perubahan adalah penting dalam segi fungsi. Dan demikian pada satu ketika, pengurus produk atau jurutera perlu membuat decision-- yang anda tahu apa, hanya 1% daripada dunia masih menggunakan IE 7. Pergi jahanam dengan mereka. Kami hanya tidak akan menyokong pelayar itu. Dan apa yang ia bermaksud untuk tidak menyokong? Ia mungkin bermakna bahawa butang tidak berfungsi di laman web anda, atau ia mungkin bermakna pemformatan adalah off. Atau anda mungkin perlu membuat bahawa panggilan penghakiman sama pada hari-hari mudah alih, di mana, kami tidak akan menyokong IOS 5 lagi. Jadi orang hanya perlu untuk menaik taraf. Atau kita tidak akan menyokong Cupcake pada Android OS untuk peranti Android, kerana sebagai world-- sebagai dunia teknologi mahu bergerak ke hadapan, ia jenis mahu mengheret dunia dengannya supaya mereka tidak perlu terus menjadi serasi ke belakang supaya mereka boleh menawarkan ciri-ciri baru dan baik. Sesungguhnya ini adalah salah satu daripada sebab mengapa begitu banyak syarikat yang melancarkan kemas kini automatik dan semacam memaksa versi terbaru perisian kepada kita. Dan juga syarikat-syarikat seperti Apple akan menyusun daripada memaksa anda hampir atau memaksa anda dari segi kuasa pasaran untuk membeli telefon baru kerana mereka hanya tidak akan mengemas kini telefon lama anda lagi. Jadi, anda ketinggalan terkini dan ciri-ciri besar, kerana ia adalah mahal untuk mereka sebagai syarikat untuk mengekalkan tua, boleh dikatakan versi lebih rendah daripada perisian. Tetapi kesan yang bersih adalah bahawa kami juga mengalami ini juga. 

Jadi mari kita lihat pada hanya beberapa perkara yang terakhir di sini. Mari kita mengetuk sebenar cepat beberapa mereka peluru lain, jika ingin tahu. Jadi jika anda telah cuba, misalnya, kedudukan teks pada sisi yang berbeza daripada halaman, saya akan melakukan satu cara yang cepat, tetapi ada yang berbeza cara untuk berbuat demikian. Biar saya pergi ke hadapan dan eliminate-- memudahkan ini seperti berikut. Biar saya kembali kepada saya mudah, perenggan mudah. Biar saya kembali ke styles.css saya. Dan saya hanya akan menggunakan simple-- yang yang anda mungkin telah melihat di Google atau ingat dari earlier-- text-jajar kanan. Dan muat semula laman ini. Kini segala-galanya seolah-olah menjadi kanan sejajar, seperti yang anda lihat di atas di sini. 

Kita boleh membuat ia kelihatan lebih sedikit menempah-suka, dan kita boleh mengatakan "justify" dan menambah nilai. Kini ia adalah baik dan persegi di kedua-dua dua belah pihak, yang merupakan jenis yang bagus. Satu lagi matlamat bahawa kita mempunyai di sini adalah perubahan warna teks. Oleh itu, kita melihat bahawa dengan teks merah saya. Dan kini menambah butang untuk borang. Jadi mengapa tidak kita cuba untuk melakukan perkara ini? Tetapi izinkanlah aku pergi ke laman web yang kebanyakan kita gunakan setiap day-- Google. Dan mari kita lihat pada bagaimana Google sebenarnya berfungsi. Tetapi saya akan melakukan ini. Izinkanlah aku melakukannya dalam- yep, biarlah saya pergi ke Google pertama. Saya akan perlu pergi ke dalam Tetapan Google, kerana saya mahu untuk melumpuhkan sesuatu yang dinamakan Keputusan Segera. 

Oleh itu, anda mungkin akan melihat dalam Google ini days-- biarlah saya kembali dan menghidupkan ini. Jadi, jika saya mula mencari untuk "kucing" seperti ini, perhatikan bahawa bukan sahaja Saya mendapatkan auto-menyempurnakan sehingga atas, tiba-tiba, page itu sendiri kelihatan berubah cantik dengan cepat juga, dan itulah Google menggunakan bahasa yang dipanggil JavaScript cuba untuk membantu. Tetapi malangnya, ia jenis daripada messes sehingga perbincangan kita apa yang sebenarnya berlaku di bawah hood di sini. Jadi saya hanya jenis cepat mematikan hasil yang segera. Dan saya akan klik Simpan. Dan sekarang saya akan membuka yang diagnostik toolbar bahawa saya terus membuka di bawah tab Rangkaian. Jadi mari kita buat ini. Mari me-- whoops-- tatal ini turun sedikit. Dan biarlah saya mencari "kucing." 

Dan sekarang notice-- sebenarnya, ini adalah peluang yang baik untuk membincangkan seketika. Perhatikan masa ini saya type-- menghentikannya. Berhenti. OKEY. Perhatikan masa ini saya menaip huruf C, menonton bahagian bawah skrin. A- T- S. Apakah bahagian bawah skrin ini, tab Rangkaian saya, mencadangkan yang berlaku setiap masa saya menaip surat? Malangnya, katak adalah sangat mengganggu hari ini atau shamrock yang atau apa sahaja yang dia. Apa yang berlaku setiap kali saya menaip? Dan biarlah saya membersihkan penampan dan menaip semula. whoops So--. Setiap kali saya menaip surat, C- A- T-- jadi baris baru jelas menyimpan muncul. Apakah setiap orang-orang baris mewakili, berdasarkan apa yang kita lihat dan dibincangkan setakat ini? PENONTON: carian A? DAVID J. MALAN: carian A, atau lebih secara umum, permintaan HTTP dari pelayar saya untuk pelayan. Nah, mengapa pelayar saya membuat HTTP meminta setiap kali saya menaip surat? 

PENONTON: [didengar] DAVID J. MALAN: Ya, ia memberi saya hasil yang auto-lengkap. Seperti, di manakah ini hasil carian datang? Well, setiap kali saya menaip surat, Google menghantar lebih dan lebih dan lebih daripada perkataan saya menaip. Mengapa? Kerana mereka mahu memberi saya yang lebih baik dan lebih baik, cadangan yang lebih baik, senarai cadangan, untuk apa perkataan Saya cuba untuk benar-benar lengkap. Jadi ini adalah untuk mengatakan harfiah setiap aksara yang anda taip ke dalam Google sedang dihantar, akhirnya dalam pukal, tetapi juga kadang-kadang satu pada satu masa dalam usaha untuk melaksanakan ciri-ciri auto-lengkap apabila data adalah, sudah tentu, di web. 

Sekarang, mari kita lihat apa yang sebenarnya yang berlaku apabila saya klik Google Search. Dan kemudian kita akan memanfaatkan ini diri kita sendiri. Jadi jika saya tatal ke bawah sekarang untuk yang permintaan pertama yang hanya berlaku. Perhatikan yang berikut. Ia telah dihantar ke yang agak panjang URL-- https://www.google.com/search? dan kemudian sejumlah besar barangan. Mari kita lihat ini sebenarnya kini dalam tab pelayar itu sendiri. Mari kita menghilangkan toolbar di sini. Berikut adalah halaman hasil carian. Dan notis di sini adalah URL. Sekarang, anda mungkin boleh meneka apa yang berlaku di sini sebahagiannya. Jadi pertama sekali, definisi. Ini nampaknya adalah destinasi mana borang dihantar. Oleh itu, apabila saya menaip dalam perkataan "kucing" dan tekan Enter, nampaknya Google menghantar input teks saya ke URL ini bahawa saya telah menekankan terdapat, slash carian. Rupa-rupanya, dalam URL, apa-apa yang yang berlaku selepas tanda tanya adalah, seperti yang kita terus mengatakan, sepasang-nilai utama yang ditaip ke dalam borang atau entah bagaimana dihantar dari pelayar untuk pelayan. 

Jadi bila-bila masa anda menaip input ke dalam bentuk di web dan ia dihantar sebagai kami telah telah membincangkan, melalui get a, salah satu maya sampul surat, kandungan itu envelope-- ya, menjaga mendapat disumbat fizikal ke dalam sampul surat di dalam kelas hari ini, tetapi teknologi ia sebenarnya dimasukkan ke dalam URL. Jadi sebenarnya, biarlah saya menapis melalui ini. Di mana kamu melihat input pengguna? Di mana kamu melihat sesuatu bahawa saya sendiri ditaip di sini? Ya, jadi "kucing." Betul? Jadi biarlah saya menyuling ini menjadi sesuatu yang mudah. Saya akan memadam segala-galanya tentang URL ini yang saya tidak faham, dan saya hanya akan meninggalkan sebagai this-- / Mencari? q = kucing. Kami akan melihat di mana q datang dari dalam seketika, tetapi yang terasa seperti minimum Jumlah maklumat yang saya berikan. Dan sekarang saya akan tekan Enter. Dan perhatikan ia masih berfungsi. Kita masih mendapatkan kembali sejumlah besar kucing. Jadi Google adalah pelamun daripada ini hari ini. Ia adalah 2016, bukan 1999. Jadi ada barangan lain yang saya pelayar menghantar kepada pelayan. Tetapi ini adalah minimum semua yang anda perlukan. 

Jadi apa yang berlaku? Well, izinkanlah aku pergi ke hadapan dan pergi kembali ke Cloud9 dan biarlah saya pergi ke hadapan dan menutup tab saya sebelum ini. Dan saya akan melakukan ini pada saya memiliki hanya untuk seketika. Saya akan pergi ke hadapan dan buat fail baru. Dan saya akan simpan sebagai google.html. Dan saya akan sangat quickly-- Saya akan mencuri, sebenarnya, beberapa teks ini hanya untuk menjimatkan masa. Saya akan paste ini di sini. Saya tidak akan mengganggu dengan apa-apa penyesuaian dgn mode masa ini. Kami akan memanggil ini "My Google." Dan saya akan menghilangkan segala-galanya di dalam badan. Dan saya akan melakukan yang berikut. Biar saya zum masuk. Borang action-- dan seperti yang saya secara ringkas disebut earlier-- whoops-- kerana saya secara ringkas yang dinyatakan sebelum ini, tindakan yang bentuk adalah di mana anda menghantar data ke. Jadi google.com/search. Dan kaedah yang saya mahu menggunakan boleh menjadi salah satu daripada dua perkara. Ia sama ada boleh "mendapatkan," kerana kami menjaga membincangkan, atau ia boleh menjadi "pos." Buat masa ini, asas perbezaan adalah, jika anda menggunakan "mendapatkan" semua maklumat bahawa pengguna memberikan akan dihantar dalam URL. 

Yang besar untuk perkara seperti mencari enjin dan beberapa aplikasi yang lain, tetapi dalam keadaan tertentu akan anda tidak mahu mengisi borang dan telah maklumat yang berakhir yang URL, seperti dalam bar alamat penyemak imbas anda? Apakah jenis bentuk melakukan atasmu, PENONTON: [didengar] DAVID J. MALAN: Ya, seperti apa? PENONTON: Kata Laluan. DAVID J. MALAN: Ya, jadi anda log masuk masuk ke Facebook atau beberapa laman web. Itulah input pengguna dari satu bentuk, kotak teks, tetapi anda mungkin tidak mahu ia muncul dalam URL pelayar. Mengapa? Maksud saya, mungkin terdapat beberapa implikasi keselamatan pada rangkaian, tetapi more-- suka, lebih mudah, bagaimana jika rakan sebilik anda, lain penting anda, anak-anak anda, pasangan anda kelihatan melalui sejarah pelayar anda? Terdapat betul kata laluan anda terdapat dalam sejarah penyemak imbas anda. Yang tidak merasa seperti reka bentuk yang baik. Atau lebih dari segi teknikal, andaikan anda cuba untuk memuat naik gambar ke Flickr atau Facebook atau wherever-- iaitu input pengguna, walaupun ia sedikit lebih interesting-- bagaimana saya mengasak imej dalam bar URL? Anda jenis jenis tidak boleh. Anda jenis boleh. Tetapi, benar-benar, saya tertekan untuk membayangkan melakukannya. Jadi saya perlu kaedah lain untuk memuat naik foto ke laman web, dan kaedah yang lain dipanggil "post". Tetapi untuk sekarang, kita hanya akan bercakap tentang "Mendapatkan," yang lebih mudah daripada dua. Ia hanya meletakkan semua input pengguna ke dalam URL. 

Jadi di sini adalah bentuk yang saya mencipta. Saya hendak input. Dan anda tahu apa? Saya akan mengambil tekaan di sini. Saya akan ingat saya input "q" untuk "pertanyaan." Dan saya rasa ini adalah salah satu daripada reka bentuk asal, mungkin, dari tahun 1999. Dan kemudian jenis input ini hanya akan menjadi "teks." Dan kemudian saya akan mempunyai input lain yang tidak memerlukan nama, seperti yang kita akan tidak lama lagi lihat, jenis iaitu "selamat." Dan ini akan memberi saya butang khas. Dan itu sahaja. 

Jadi biarlah saya pergi ke hadapan dan menyimpan fail ini. Saya akan kembali kepada saya pelayar dan pergi ke google.html. Enter. Dan ia adalah jenis jarang untuk mengatakan sekurang-kurangnya. Tetapi biarlah saya pergi ke hadapan dan mencari "kucing." Dan perhatikan Saya kini di URL Cloud9 ini. Tetapi buat masa ini saya klik ini, di manakah anda berharap saya akan berakhir? 

PENONTON: Google. 

DAVID J. MALAN: Google. Jadi mari kita klik Serah. Dan sesungguhnya saya telah melaksanakan semula Google. Betul? Ia adalah lebih mudah. Ia adalah lebih ringan. Maksud saya, kod saya adalah jelas lebih baik daripada mereka, daripada keadaan huru-hara yang kita lihat sebelum ini. Dan anda tahu apa? Saya akan memeriahkan ini sehingga sedikit. Saya tidak menyebut ini lebih awal. Terdapat tag seperti H1, untuk Tajuk 1, tajuk yang paling penting dalam halaman. "Google saya," Saya akan memanggil ini. Biar saya tambah nilai. Ia kelihatan sedikit lebih baik sudah. Dan, sebenarnya, anda tahu apa? Saya telah already-- saya berbohong. Saya kata saya tidak akan untuk gaya ini, tetapi saya akan untuk gaya ini seperti sebelum ini. Dan badan saya akan menjadi, katakan, pusat text-align. Ia kelihatan lebih seperti Google sudah. 

Saya memerlukan satu baris, walaupun, untuk butang Submit. Dan ternyata, anda boleh menggunakan perenggan, atau anda boleh lebih literal hanya berkata, memberi saya garis rehat sini-- tag br itu. Dan jika saya menambah nilai ini, kini ia pergi ke sana. Ia sedikit hodoh, jadi saya boleh melakukan hentian baris, tetapi jangan kita terlalu tamak di sini. Jadi sekarang mari kita lihat jika ia berfungsi untuk "anjing." Ia seolah-olah bekerja untuk "anjing," juga. Jadi apa maklumat mengenai restoran yang menarik di sini? One-- tidak membawa perubahan besar kepada memperkenalkan beberapa lagi tag, seperti tag borang di dalam tag input. Tetapi lebih asas adalah, semua yang kita lakukan memanfaatkan pemahaman kita HTTP dan hakikat bahawa bentuk-bentuk akhirnya mengubah apa yang ada di dalam URL pelayar, dan sebagainya, oleh itu, kita boleh mekanikal memberi input kepada pelayan dengan membuat bentuk HTML dan mengetahui bahawa pelayan itu memahami HTTP, sama seperti badan kita memahami, seperti, berjabat tangan saya, protokol yang sama, dan supaya kita kembali sambutan bahawa kita akhirnya harapkan. 

Jadi mari kita cuba untuk melakukan satu Perkara terakhir yang kini dengan mudah alih, dan saya akan make-- saya akan menambah kod ini untuk slaid. Jadi, jika anda sedang bermain-main, anda pasti boleh mengambil dari sana. Tetapi saya akan pergi ke hadapan dan melakukan satu perkara. Saya akan pergi ke hadapan dan membuka page-- indeks saya halaman hello saya seperti sebelum ini, yang mempunyai banyak teks palsu-Latin ini, atau tidak bermakna teks Latin, dan has-- ia kelihatan seperti ini pada saiz font ini. Tetapi biarlah saya pergi ke hadapan dan melakukan ini. Saya akan pergi ke Cloud9. Dan anda tidak perlu melakukan langkah ini. Saya hanya akan melakukannya sendiri. Saya akan klik Kongsi. Dan ini adalah ciri-ciri yang adil Cloud9, di mana Saya boleh membuat persekitaran saya ramai. 

Dan hanya demi demonstrasi, saya melakukan ini. Saya akan membuat orang ramai permohonan saya. Perhatikan ia memberi amaran kepada saya, saya sedang Saya pasti saya mahu untuk melakukan ini, kerana ini akan membuat semua orang di dunia, sama ada mereka berada di sini sekarang atau menonton video terkemudian dalam internet dapat melihat apa yang saya lihat. Tetapi itu OK. Saya akan mengatakan "Selesai." Dan biarlah saya menggalakkan anda, jika saya ini correctly-- biarlah saya menguji terlebih dahulu. Teruskan, jika anda tidak mind-- dalam penyemak imbas pada komputer anda, pergi ke URL ini, dan mudah-mudahan anda akan melihat teks Latin saya. Dan untuk menjadi jelas, ia tidak berjalan pada komputer riba saya. Ada dalam awan. Ia pada Cloud9, secara literal, tetapi Saya telah membuat awam ruang kerja saya supaya sesiapa sahaja di internet boleh mengakses halaman rumah Latin saya. 

Pergi ke URL yang sama pada telefon anda, jika anda boleh. Jika ia akan kos anda, walaupun, anda hanya boleh melihat ke atas bahu. PENONTON: [didengar] DAVID J. MALAN: Saya minta maaf? PENONTON: [didengar] DAVID J. MALAN: Hanya kata-kata Latin. Itu sahaja. Tetapi itulah apa yang anda akan dapat melihat. 

PENONTON: Ya. DAVID J. MALAN: Ya. Yeah. OKEY. Jadi boleh saya pegang sehingga anda telefon hanya untuk seketika? Jadi, mudah-mudahan, jika anda mengakses ia, ia perlu kelihatan hampir tidak boleh dibaca. Ia wujud-- Maksud saya, ia adalah dibaca kerana Latin. Tetapi ia juga boleh dibaca untuk apa sebab lain? Seperti, apa yang jahat anda tentang perkara ini? PENONTON: Ia kecil. DAVID J. MALAN: Ia sangat, super kecil. Jadi bagaimana kita boleh menetapkan ini? Ia sangat, super kecil pada telefon Victoria dan, jika anda telah ditarik ia sehingga diri anda, mungkin kecil pada telefon anda juga, melainkan anda mempunyai tetapan kebolehcapaian yang aktif. Apa itu? Anda hanya boleh picit dan zoom, yang boleh dilaksanakan, tetapi kemudian anda hanya melihat Beberapa fakta yang pada satu masa. Jadi tunggu satu minit. Saya tahu bagaimana untuk menetapkan ini. Betul? Saya boleh menggunakan CSS, dan saya boleh menukar saiz fon dari 12 mata kepada 24 mata. Tetapi kesan sampingan itu, sudah tentu, akan menjadi sekarang, pada desktop atau komputer riba, sekarang teks ini adalah dua kali ganda lebih besar. Dan oleh itu jenis akan lebih baik untuk membezakan antara peranti, dan ternyata ada adalah cara untuk melakukan itu. Terdapat beberapa cara yang berbeza, sebenarnya, mana menggunakan CSS dan ciri-ciri pelamun bahawa kita tidak akan masuk ke dalam dengan terperinci, anda pada dasarnya boleh query pelayar dan berkata, jika skrin anda adalah lebih kecil daripada ini banyak piksel, menggunakan saiz font ini. Jika skrin anda adalah lebih besar daripada ini banyak piksel, menggunakan saiz fon lain ini. 

Anda boleh menjadi lebih pelamun masih. Jika anda pernah melawat Laman web itu, di atas meja, mempunyai menu besar mungkin akan ke pihak, dan kemudian semua kandungan adalah ke tepi yang menu-- itulah jenis paradigma biasa. Menu di sebelah kiri, kandungan di sebelah kanan, atau sebaliknya. Tidak benar-benar bekerja di telefon bimbit apabila anda skrin hanya ini banyak piksel lebar. Jadi lebih biasa di telefon bimbit adalah, menu anda akan tiba-tiba mendapat runtuh, dan anda perlu klik butang untuk melihat, atau laman web akan meletakkan menu di atasnya dan meletakkan kandungan di bawahnya. Dan anda boleh melaksanakan ini perkara-perkara dalam pelbagai cara juga. Anda boleh meminta pengaturcara anda, hey, pasukan, bila-bila masa anda melihat permintaan HTTP dari Android yang peranti, peranti Microsoft, Google peranti, peranti Apple, gunakan ini saiz fon dan menggunakan susun atur menu ini, atau lain menggunakan susun atur lalai ini lebih besar. 

Kini, dengan menggunakan apa teknik asas hari ini boleh jurutera menggunakan tahu sama ada ia iPhone, telefon Android, komputer riba, desktop melawat server syarikat? Di mana mereka mendapat maklumat itu? 

PENONTON: Tandukan? 

DAVID J. MALAN: Ya, header HTTP. Jadi setiap permintaan HTTP datang dari pelanggan mereka untuk pelayan mereka termasuk, di dalam yang maya sampul surat, sejumlah pengepala HTTP, salah satu daripadanya ialah pelayar dan sistem operasi walaupun, jika anda mengambil berat untuk bahawa tahap lanjut. Sekarang, ia adalah satu rentetan samar-cari, tetapi wujud perisian yang akan hanya memudahkan itu, dan anda hanya boleh meminta dalam pengaturcaraan code-- PHP, Java, C ++, whatever-- apa yang telefon adalah this-- apa peranti user ini gunakan? Dan kemudian anda boleh berkata, menunjukkan kepada mereka ini versi laman web jika ia adalah telefon. Menunjukkan kepada mereka versi ini laman web jika ia adalah satu komputer riba atau desktop. Tetapi anda tidak perlu server-side kerumitan. Anda boleh melakukannya walaupun yang paling mudah perkara. 

Saya akan melakukan ini. Saya akan pergi ke hadapan ke dalam persekitaran Cloud9 saya, dan saya akan menambah teg yang anda lihat dalam Google sebelum ini. Ia dipanggil metatag ini. Dan saya tidak pernah ingat satu ini, jadi Saya akan menyalin di sini. nama Meta = "Viewport" dan kemudian content = "width = lebar peranti, intital skala = 1 "dan itu sahaja. 

Oleh itu, ia mungkin juga menjadi seperti suatu mantera ajaib. Ia bukan semua yang jelas, tetapi ini mempunyai sesuatu untuk dilakukan dengan viewport, dan viewport hanya mayat seorang halaman web, kawasan segi empat tepat yang mentakrifkan paling atas halaman. Dan ini hanya memberitahu penyemak imbas, anda tahu apa? Membuat lebar halaman ini berkesan sama dengan lebar peranti. Dalam erti kata lain, jangan menganggap bahawa anda mempunyai keadaan ruang yang tidak terhad. Andaikan anda hanya mempunyai sebanyak ruang sebagai peranti itu sendiri adalah besar. Dan sekarang, jika saya menambah nilai ini dalam pelayar saya, saya melihat tidak ada perubahan. Tetapi jika saya correctly-- ini dan biarlah aku menyeberang fingers-- saya jika anda semua tambah nilai telefon anda, adakah anda melihat perubahan menarik? Ya, adalah bahawa- 

PENONTON: [didengar] DAVID J. MALAN: Ya. OKEY. Jadi boleh dikatakan lebih senang dibaca sekarang? Masih kecil, untuk berlaku adil, tetapi tidak begitu kecil untuk menjadi tidak terurus. Dan saya pasti boleh mengatasi ini lanjut dengan CSS atau di sebelah pelayan, tetapi semakin apa yang anda melihat adalah lebih dan lebih banyak ciri ditambah kepada klien environments-- JavaScript, seperti yang kita akan membincangkan esok, CSS, dan HTML-- supaya bahawa semua pertanyaan ini boleh dilakukan pada pelanggan supaya dapat mengganggu server banyak yang kurang dan tidak untuk mempunyai untuk bersaing dengan, untuk contoh, serangan yang berterusan baru sistem operasi versi, versi pelayar baru. Anda hanya boleh membiarkan pelayar meminta peranti, berapa besar yang anda, dan kemudian membuat agak logik keputusan berdasarkan itu. Tetapi kita akan melihat lebih banyak peluang untuk keputusan yang logik esok dalam konteks daripada bahasa pengaturcaraan. 

Jadi, apa-apa soalan, maka, kepada pembangunan web? Hari ini bukan pengaturcaraan web, setiap se, kerana kebanyakan semua yang kita lakukan sangat estetik, jika anda akan. Tidak ada keputusan dalam kod yang kita telah menulis, dan jadi itu sebabnya HTML markup bahasa, bukan bahasa pengaturcaraan. Tetapi esok kita akan mengambil melihat cepat, akhirnya, di JavaScript, yang pengaturcaraan sebenar bahasa yang membolehkan kita melakukan sedikit lebih. 

Ada soalan? Baiklah, biar saya mencadangkan dua peluang pilihan untuk kerja rumah. Satu is-- ini Cloud9 akaun tidak akan tamat. Anda dialu-alukan untuk menggunakan mereka untuk bermain-main dengan. Ia tahap bebas perkhidmatan. Sedar bahawa, jika semasa membuat ruang kerja anda, anda membuat ia awam, yang tidak bermakna bahawa sesiapa pada internet boleh melihat apa yang anda taip. Jadi mungkin hanya menganggap tidak memalukan diri jika anda meletakkan web pertama anda halaman di luar sana kepada umum tidak sengaja, tetapi tiada siapa yang akan tahu untuk melihat di sana juga. 

Dan two-- biarlah saya melambungkan sehingga URL ini juga, terutamanya jika anda datang pada hari ini sedikit kurang selesa daripada yang lain, pasti apa semua ini bermakna. Sedar bahawa banyak lagi video ini, yang kedua-dua cara yang baik untuk tidur dan juga untuk ketawa semasa berbuat demikian, juga mempunyai banyak societally menarik dan perbincangan keselamatan berkaitan dalamnya daripada John Oliver, walaupun pelawak. 

Tetapi jika tidak ada pertanyaan lanjut, yang membawa kita ke majlis tersebut. Jadi mengapa tidak saya menghidupkan muzik. Perlu ada minuman dan makanan ringan di luar. Saya gembira untuk bergaul sebagai selagi orang akan suka, menjawab soalan yang lebih pada satu-satu. Tetapi, jika tidak, anda dialu-alukan untuk berlepas pada bila-bila, dan kami akan berjumpa lagi pagi esok untuk sedikit lebih. Baiklah, terima kasih.