DAVID J. MALAN: Pekala. Biz geri döndü. Yani, bu son oturumun amacı birkaç kavramları tanıtmaktır ama aynı zamanda herkese bir şans verin tür parmaklarınızı germek için ve gerçekten bir şeyler yapmak Biraz hands-on. amaç değil açmak için Hepimizi web geliştiricileri içine herhangi bir yolla ama gerçekten sadece tarafından bazı bir tat vermek için Ne temel yapıları web programlama ve web bugün gider gelişimi, yani seyleri statik tarafı hiçbir mantığı, hiçbir programlama dil, sadece statik içerik. Ve bu bize bir fırsat verecektir aslında bir web sunucusu ne olduğunu görmek için, bir HTML dosyası nedir, ne görmek bkz HTTP aslında hizmet veren olmasıdır. Ama biz, herhangi bir retrospektif dalış önce cloud computing ile ilgili sorular güvenlik veya aralarında bir şey yoksa? Yok hayır? Pekala, haydi Her ihtimale karşı, bunu kaydolma işlemi bir şey birkaç dakika sürer. Biz arka planda bunu bildireceğiz. eğer yapabilirsen, devam edin, Bu URL burada-- c9.io. için Bu bir üçüncü taraf olduğunu service-- bir hizmet olarak platform, sen will-- eğer sizi davet edecek Bir hesaba kaydolmak için, ve her biriniz vermek için gidiyor Sözde bulutta bir hesap Başkasının altyapı, Bir şirket Cloud9 çağırdı. Ama hakkında güzel ne Bu size vermesidir Bir bir yaklaşım Gerçek gerçek dünya geliştirme çevre, gerçi içinde bulut ve bir web tarayıcısında, ve biz aslında için kullanacağız Bugün biraz deneme. Ve sonra devam edin ve sadece gezinmek kayıt işlemi için yol Eğer yapabilirsen. Bu yüzden sınıfta bu kullanmak için ne Ben, tüm öğrencilerimizin öğretmek Kampüste ve şimdi kapalı, hem de ne tarihsel yerini oluyor Aksi takdirde indirilebilir yazılım oldu. Peki ne erişim sağlamasını edildi Bu sanal makinelerin biridir, esas olarak, daha önce tarif edilen. Yani bu şirket Cloud9 muhtemelen Nitekim üçüncü party-- kiraladığı Bu durumda, bir bütün Google-- sanal makinelerin demet onlar bir şekilde içine doğramak olduğunu Bireysel sunucuların yanılsama Her birimiz o üzerinde tam kontrol sahiptir. Bunu söylemek oldukça doğru değil Onlar sanal makineler olduğunu, olsa da, çünkü neyi Cloud9 aslında kullanır biraz daha yeni bir teknoloji konteynerleflme denir. Ve bana bu resmi kapmak izin Burada bu resmi boyamak için. Bir kap halinde, olduğu resmi çağırmak çakmak önce, biraz dan bir sanal makineye daha ağırlık. Aslında, son oysa zaman biz orada hakkında konuştuk Bir işletim olma sistemi ve hipervizör ve daha sonra konuk işletim sistemi, konuk işletim sistemi, konuk işletim üstünde sistem, senin fiziksel donanım, Bu daha yeni fark teknoloji konteynerizasyon, hepsi bir şekilde paylaşmak olduğunu Aynı işletim sistemi. Ama yine de oluşturmak herkesin yanılsama kendi özel olan yönetici hakları ve dosyalar sunucuda. Ama az bir yazılım var Sen ve donanım arasında. sonucu olarak, bir teori, daha yüksek bir performans, Kullanmakta olduğunuz için ya da daha az kaynak israf sözde sanallaştırma katmanda. Yani bu denir doğası gereği konteynerleflme Docker olarak adlandırılan teknoloji yoluyla, hangi çok kendi içine geliyor. Ve bu bir şey olduğunu Şirketinizde mühendisleri çeşit çeşit konuşmaya başlayabilir yaklaşık yakında değil zaten varsa, hayır kesinlikle orada olsa nedeni herhangi bandwagons atlamak için. söyledi Yani, ne muhtemelen şimdi bakın Bu gibi biraz görünüyor bir ekran. TAMAM. değilse ve sadece beni arayın. Ve yani-- eğer değilse üzerine geleceğiz. Devam edin ve bu büyük tıklayınız artı bir çalışma alanı oluşturmak için, ve bunun gibi bir ekran görürsünüz. Sen çalışma alanını çağırabilirsiniz Şimdilik istediğiniz herhangi bir isim. Ve aslında sadece basitlik için, Iyi bazılarınız ve- gitmek Zaten çalışma alanları var. ,, Iş zaman-- ne diyoruz istediğiniz ne olursa olsun Harvard, Perşembe,. Sen bir açıklama gerekmez. Sen, özel bırakabilirsiniz sürece Zaten çalışma alanlarının bir grup var. Eğer kamu yapmak zorunda iseniz, bugünün amaçlar için iyidir. Burada da, Upsells biridir. Sen bir özel çalışma alanı almak varsayılan. Ama sen, daha fazlasını isterseniz Daha fazla ödemek zorunda. Aksi halde kuvvet iş genel yapmak. Ama bu çünkü onlar da iyi, açık kaynak toplulukları bu hedef İnsanları teşvik etmek Aslında işbirliği. Ve önemli olan son şey, Eğer bir isim seçtikten sonra olsa da, bir ve özel veya kamu seçtikten sonra, HTML5, büyük turuncu simgesini Soldan ikinci ve sonra Çalışma alanı Oluştur'u tıklatın. Ve muhtemelen olacak , Ya da öylesine bir dakikanızı ayırın ama o zaman bir gerekir çevre, sana bir kez anımsatan görünüyor, bunu Ben şimdi burada ekranda ne var. Ama, yine de, bir dakika sürebilir ya da daha fazla bu ekrana almak için Eğer tıkladıktan sonra Çalışma Alanı oluşturun. Beni isterseniz ama sadece beni bayrak bir şey ya da tavsiye bakmak için. Pekala. Yani şimdi bu arka plan gidiyorum. Eğer görünüyor eğer beni arayın Herhangi bir teknik sorunlar var. Ama, yine de, bir sürebilir Bu açmak için biraz. Ve en go ahead ve bahsedelim neler aslında bir web sayfası yapmak anlamına gelir, Ne HTML nedir ve nasıl tüm bu Biz başlıyoruz şimdi birbirine Aslında teknolojinin bazı kullanın. Bu yüzden elimden çıkıyor Burada benim küçük Mac gitmek, denilen basit bir programı açmak TextEdit veya Windows I could Notepad.exe denilen açık bir şey. Ve ben sadece basit bir şey yapabileceğini bu-- "Merhaba, dünya." gibi Ve sonra da bu kurtarabilecek hello.txt Yani hiçbir büyü. Bu web ile ilgisi yok programlama, HTML ile ilgisi. Sadece basit bir metin dosyası oluşturma. Ama bir web çıkıyor sayfa kelimenin tam anlamıyla sadece budur. Basit bir metin dosyası içeren metin var Eğer klavyeden yazdığınız diye, ancak, tipik olarak ama her zaman değil .txt ama .html veya .htm değil biter. Ve sen sadece yok dosyadaki kelimeleri yazın. Aslında denilen şeyler kullanmak zorunda etiketler ya da daha genel olarak, bir şey işaretleme dili aradı. Bu yüzden çok hızlı bir şekilde yazın gidiyorum ve sonra aşağıdaki açıklar. Ben ilk gidiyorum Diyor ki bu yazın Hey, tarayıcı, buraya gelir bir web sayfası HTML ile yazılmış. Ve bu iki şey bir arada, hey, demek tarayıcı, aşağıdaki aslında HTML. Hey, tarayıcı, buraya gelir Baş ya da benim sayfanın üst. üst Hey, tarayıcı, iç Benim sayfa, merhaba ", bir başlık koymak dünya. " Hey, tarayıcı, sonra kafa benim sayfa, burada benim sayfanın vücudu geliyor. Ve, hey, tarayıcı, vücut benim sayfası da "merhaba dünya." demeliyim Yani belirgin ayrıntılar burada nelerdir? Bu genellikle ne olduğunu doc-türü bildirimi denilen, ve açıkçası, biraz var Bu ilk bakışta ezberlemek zor. Sadece biraz kopyala-yapıştır bunu. Bu resmi bir yoldur hey, söyleyerek, tarayıcı, HTML sürüm 5 kullanıyorum hangi Biraz son zamanlarda çıktı. Bazı o büyülü sözler var tasarım kötü bir duygusu ile insanlar koymak için karar Dosyanın çok üst. öyle olsa bile Biraz gizemli, hepsi bu Burada, hey, tarayıcı means-- HTML sürüm 5 ile birlikte gelir. Bu geri kalanı bizimle olmuştur Bir süredir, tarihsel olarak, ancak gelişen olmuştur, ve bu kadar muhtemelen biraz daha basit elde edilmiştir. Birkaç özelliklerini fark Ben vurguladık ne. açılı bu şeyler var Sol dirsek brackets-- ve sağ ayraç. Ve burada simetri dikkat edin. Ve simetri, ben gibi, demek ben Burada bu başlangıç ​​etiketi veya açık etiketine sahip eğer sen, buraya bir var yakın etiketi veya var bir bitiş etiketi Sadece ölçüde bu olduğu gibi farklı kelimenin başında çizgi HTML. Ve aklınıza gelebilecek Bu raslantı olduğu gibi hey, daha önce öneren tarayıcı, burada bazı HTML geliyor. Ve tersine, hey, tarayıcı, o o HTML-- başlangıç ​​ve bitiş için. Burada arada hey, tarayıcı, Benim sayfanın baş geliyor. Hey, tarayıcı, o kafa bu kadar. Hey, tarayıcı, burada Benim sayfanın gövde. Hey, tarayıcı, bu vücut için bu kadar. Ve içindeki bu bazı Şimdilik keyfi metin. Ve kafamın içinde, bu arada, bazı keyfi ancak etiketli bir böylece, başlık diyor metni konuşmaya sayfamın "merhaba dünya." olacaktır Şimdi, üzere hemen yapabilirsiniz Bu tarayıcılar varsayalım daha ziyade, web sayfaları var, Sadece-- ya da Sadece iki baş ve vücudu parts--. Ve baş sadece genellikle Menü çubuğunun gibi, şeyler gerçekten sadece çok üstünde. Ve vücut sayfa cesaret olduğunu, O büyük dikdörtgenin içinde her şey Bu ekranı doldurur. Bu yüzden go ahead ve bunu yapmak için gidiyorum. Ben önde gidecek ve Kaydet 'i tıklatın, Kaydet Dosya. Ve ben kurtarmak için gidiyorum Bu hello.html olarak, ve ben sadece gidiyorum benim masaüstünde koydu. Ve ben gidiyorum önde ve Kaydet'i tıklatın. Ve benim Mac notice-- en azından bana bağırıyor. Bunu yapmak istediğinizden emin misiniz? Ve evet, HTML kullanmak, söylemek için gidiyorum. Ben bu durumda daha iyi biliyorum. Ve şimdi benim masaüstü gidiyorum nerede aniden bu dosya var. Ve bunu çift tıklayın gidiyorum. Ve tarafından, fark edeceksiniz Varsayılan Chrome açtı. çünkü o budur Varsayılan tarayıcı. Ve bu sadece "merhaba dünya" diyor. Ama, merhaba "diyor iki yerde dünya ". Üst sol dikkat edin. Bu kaçırmak oldukça zor. Bu büyük ve kalın olduğunu. Ve burada başka o görünüyor , "Merhaba dünya" demek? İZLEYİCİ: sekmesi. DAVID J. MALAN: Evet, sekme kendisi. Yani başkanı söyledi sayfa her şey iyi-- olduğunu ve aslında bu başlık. Sadece burada sekmesinde var. Ve ben bu sekmeyi indirebiliriz dışarı karıştırmayın şekilde değil. Bu, artık sadece tek bir sekme ve gerçekten biz "Merhaba dünya" bakın buraya ve "merhaba dünya" burada. Yani oldukça basit. Ama aynı zamanda oldukça basit. Ve, aslında, yakınlaştırılmış. Ben sadece yazı tipi boyutunu değiştirmek için erişilebilirlik için büyütün. Ama şimdi bir şey yapalım biraz daha ilginç. Ben whoops, izin go-- gidiyorum benim metin dosyasına geri almak. Ben geri dönüyorum benim metin dosyası, ve ben gidiyorum Bunu değiştirmek ve söylemek "Merhaba, Disney World." Kayıt etmek. Ve geri dönmek benim tarayıcı ve yükle 'yi tıklatın. Ve şimdi, tabii ki, onu "Disney World" diyor. Ve ben yapay yakınlaştırmak için gidiyorum sadece bu yüzden o daha rahat görebilirsiniz. Yani şimdi, ne yazık ki, ben tür istiyorum aşağıdaki amaçlara aslında, bu bir Mac özellik. Ben Disney World'e tıklayın istediğiniz ve disney.com gibi bir yere gitmek, ama bu işe yaramazsa. Yani web temel ilkelerinden biridir köprüler, başka bir yere gitmek bağlantılar. Peki bunu nasıl yapacağım? Eh, ben sadece söyleyebiliriz, "Merhaba, http://www.disney.com." Bunu kaydet. Yükle. Ama bu da, tıklanabilir değil. Ve olsa bile, burada güzel ne Bu, henüz işlevsel değildir o görünüyor olmasıdır tarayıcı tam anlamıyla sadece yapar ne yapmam için bunu söylemek. Yani sadece bu gibi bir URL yazarsanız, Sadece bana URL'yi göstermek için gidiyor. Ben etiketleri veya biçimlendirme kullanmanız gerekir dil aslında anlatmak için tarayıcı daha yapmak. Yani önde gidiyorum ve Bir an için bu silin. Ve ben, hey, söyleyeceğim tarayıcı, burada bir çapa başlatmak, bir bağlantı tabiri caizse. Ve hiper referans, hedef Bu çapa, bu URL olmalıdır. Ve benim tırnak dikkat edin. Ben de tek tırnak kullanabilirsiniz, ama tutarlı olmak zorunda, ve ben genellikle sadece kullanmak çift ​​tırnak basit tutmak için. Ben etiketi kapatmak için gidiyorum dikkat edin. Ve sonra burada ben gidiyorum "Disney World." Demek Ve şimdi biraz symmetry-- ihtiyacım açık aparatı, / a, dirsek kapattı. Peki ne girmiştik? Biz zaten bir kaç etiketi yaşadım. HTML, Baş, Başlık, Vücut, tüm etiketler vardır, tabiri caizse, açık ve kapalı meslektaşları ile. Ama haber, bu tür bir temelde farklı. Bu diyeceğiz ne HTML bir özellik. Ve bir özelliktir Sadece bir anahtar-değer çifti. Bu sık görülen bir şey olduğunu Bilgisayarın fen dersinden anahtar-değer çifti. Bu ticaretin aracın tür. Bir anahtar ve bir değer. Bir kelime ve daha sonra bazı diğer kelime ya da kelimeler. Bu durumda, anahtar, HREF ve değer konusunda tam URL. Ve ne bir özellik yok öyle Bir etiketin davranışını etkiler. Bu durumda, etki için gereken çapa etiketinin davranışı, Biz çapa gerekiyor çünkü yere Bu linki. Ve bu işi nasıl niteliğin arada. Bu yüzden devam edeceğim ve şimdi dosyayı kaydedin. geri tarayıcı ve yeniden yükleme gidin. Ve, işte, şimdi var meşru bir web sayfası başlangıçlar. Süper basit, ama gelirseniz üzerinde sol alt köşesinde bu-- haber, süper-küçük. Ama www.disney.com görüyorum. Ve ben, gerçekten bu bunu tıklarsanız uzak disney.com beni whisks. Şimdi, ilginç bir şey burada olmadığıdır En pazarlanabilir URL'yi best--, ama Bu dosya yok çünkü bu iyi World Wide Web üzerinde mevcuttur. Görünüşe göre bir yerel dosya olarak var Benim Kullanıcılar directory-- / jharvard-- John Harvard-- / masaüstü için. Ama bir URL'ye sahiptir. Sadece yerel olur. Ne yazık ki, içinizden hiçbiri ziyaret edebilirsiniz Bu, bu URL'yi yazarsanız, çünkü Eğer, tarayıcınızı söylüyorum duyarım Bir dosya adı verilen hello.html arayın Sabit diskinizde. Ve, tabii ki, olduğunuz sürece manuel boyunca takip, orada var gitmiyor. Yani bu iyi. Biz hala, sonuçta, bir yol gerekir web içine bu dosyayı almak için, ama en birkaç ayrı alay edelim güvenlik etkileri ne sadece gördüm ve daha önceki geri kravat Bu sabah tartışma. Bu çıkıyor, bir eğer tarayıcı tam anlamıyla sadece yapar Yapmam için bunu söylemek ve göründüğü gibi bir çapa etiketi durum için değeri tarafından etkilenir Bu özellik olarak adlandırılan href ancak bu görüntüler Metin, bu gibi görünüyor Ben URL'yi koymak olabilir ima etmek her iki yerde de ve daha sonra yeniden ve şimdi URL'yi görmek ve URL'ye gidin. Uyarı, ben alt-sola üzerine gelirseniz, Ben gerçekten disney.com hala gidiyorum. Hiç oldum eğer öyleyse phished-- P-H-I-S-H-E-D-- Bu sahte e-postalar biriyle PayPal banka gibi gelen, muhtemelen içindeki bağlantıları gotten Bunu okuyorsanız e-posta Eğer onaylamak gitmek için buraya tıklayın söyler şifrenizi veya doğum tarihinizi teyit ya da sosyal ya da bir şey sosyal Seni mühendislik ifşa etmek bilgi. Eh, ben tür sürebilir Ben yapamadım, bu avantaj? Ben bir şey söyleyebiliriz gibi, www.paypal.com. Ve yerine Disney.com, ben badguy.com gibi, gidebiliriz. Yükle. Ve dupe ne kadar kolay olduğunu, Özellikle teknik olmayan bir okuyucu ya da gelişigüzel bir okuma tıklayın daha okuyucu Ben Durdur-- tıklarsanız böyle bir bağlantı, Aslında badguy.com gitmek istemiyorum. Aslında orada ne olduğunu bilmiyoruz. Yani paypal.com, haber, bir o gidiyor ne diyor, ama tabii ki, ben aşağı bakacak olursak süper-düşük, o biraz bulanık ama badguy.com diyor. Bu sadece şu anda söylemek var ben yanlış yere gidiyorum. Ve daha önce söylediğim zaman o bankalar Gerçekten teşvik veya tren olmamalı tıklayarak bağlantılar içine kullanıcıları, bu Bunun sadece bir tezahürüdür. Ve bu kadar basit. Bir düşman eğer şimdi Eğer böyle bir şey yapmak ve bir kullanıcıyı kandırmak için denemek sizin sitenizi ziyaret içine. Ama şimdi, biz devam edeceğiz şeyler, güzel ve temiz. Biz önde gidiyoruz ve bu değişiklikleri geri sarma. Sayfayı yeniden yükleyin. Ve geri disney.com gidin. Biz alay edemez Bakalım Bu birbirinden biraz daha. "Merhaba, Disney World." Yani Ben buraya söylemek için gidiyorum. Belki biraz yer açmak için gidiyorum. "Size kaldınız umuyoruz!" Kayıt etmek. Yükle. O değil rea-- değil Ben, doğru amaçlanan ne oldu? Ben metin tedavi yaşıyorum Yani, Bir kelime işlemci gibi dosya, Burada ne olacağını umut mı? Evet, orada gibi hissediyorum Burada bir satır sonu olmalı, bu yüzden bir şekilde buggy hissediyor. Ama bu, aslında kasıtlı olduğunu , Tıpkı daha önce çünkü Tarayıcınızın yalnızca gidiyor yapmanız bunu söylemek ne. Ben satırları kırmak için söylemedim. Hatta, aşağı taşımak için söyledim ettik Benim yaptığım gibi olsa da, sezgisel, hissediyorum. Yani biz ihtiyacımız çıkıyor Biraz daha biçimlendirme, ve ben şu şekilde bu sorunu gidermek için gidiyorum. Merhaba öncelikle bu Önsöz için gidiyorum Bir paragraf etiketi denir ne. Ve sonra ben önde gidiyorum ve bu diğer cümleyi sarın Başka bir paragraf etiketi, olsa bile süper-kısa paragraflar konum. Şimdi kurtarmaya gidiyorum. Yükle. Ve şimdi biz buna sahip uzay ve biz bir çeşit semantik var iki ayrı paragraf. Hepsi güzel ve iyi, ama it would Bu sayfayı bir resim eklemek için güzel, bu yüzden aramaya gidiyorum Google Görseller'de Mickey Mouse. Ve sadece eğlence için, ben Bu resmi kapmak için gidiyor. Şimdi önde gidiyorum ve Bu resmin URL'sini kapmak, Farklı var olsa yolları Bunu yapmak için. Şimdilik, sadece URL'yi kopyalayın gidiyorum. Ben metin içine geri dönmek için gidiyorum Dosya ve ben, burada söylemek için gidiyorum img src = alıntı unquote Bu URL, süper uzun. Bir ve daha sonra kavramı görüntü biraz farklıdır. başlangıç ​​hiçbir kavramı gerçekten var Bir görüntü ve bir resim biten, Bir başlangıç ​​gibi bir bitiş etiketi etiketlemek. Bu yüzden biraz garip hissediyor Beni anlam Bunu yapmak için bir yakın görüntü etiketi var. Bu yanlış değil. Bu mükemmel Doğru ve teşvik ediyor, ama steno gösterimde var. Ben aynı anda tür can açmak ve aynı etiketi kapatın ve bu tarayıcı mutlu edecek. Yani biraz var şeyler için daha özlü kavramsal gerçekten yapmak başlangıç ​​ve bitiş mantıklı. Onlar sadece orada, ya da değiller. Yani bu tasarruf ve geri dönmek için gidiyorum Benim "merhaba dünya" sayfa ve yeniden yükleme için. Ve bu, biraz kontrolden çıktı bu görüntü aslında, çünkü Büyük bir küçük, ama bu sorun değil. Ben bir programda yeniden boyutlandırmak olabilir. Ya da biliyorum. Sadece ben, göstermek için Aslında söyleyeceğini Bu şeyin genişliği gerektiğini o sadece 200 piksel, 200 nokta olacak. Beni go ahead ve kaydetmek izin ve sayfa şimdi yeniden ve biraz daha makul görünüyor. Ama desen dikkat edin. Eh, biraz öğretti ettik tüm Bir anlamda HTML, en az kavramsal, tüm HTML çünkü Bu, açık etiketleri, etiketler kapalı tags-- ve niteliklerini davranışlarını değiştirmek. Ve görünüşe göre, her etiketi sıfır veya birine sahip olabilir ya da iki ya da daha fazla özellik, her bir hangi yapar biraz farklı bir şey. Şimdi, nasıl var biliyor musun? Sadece birine dinlemek var olanı sana söyleyeyim gibi, ya da bir öğretici etrafında sadece Google HTML, ve gerçekten bu basit. Gerçekten, ben bir üniversite öğrencisi iken oldu yıllar önce ve HTML öğrendi benim matematik öğretiminin biri yardımcıları sadece harcanan Beni ders zaman biraz gibi yarım saat, bir saat, ve sonra ben yoluma oldu. Ben yapmak doğru yoluma oldu Şimdiye kadar en iğrenç web siteleri, hangi görünüşe göre, ben değil Gerçekten ötesinde ilerlemiştir. Ama nokta, bu senin kez Bu basit ideas-- anlama oynamasından text-- ancak bu basit halinde Bir düşünceyi başlayan fikirler ve, bir düşünce kapanış tutmak her şey güzel, dengeli Kadar bir şey arıyorum değiştirerek Bu etiketin davranışı, gerçekten hepsi buna vardır. Ve aslında, biz şimdi gidersek Aslında google.com-- gibi bir şey, Hadi biraz daha yer gidelim reasonable-- stanford.edu. Ve ben görüntüle gitmek için gidiyorum Geliştirici, Kaynağı. Bu çirkin, ama notice-- ve ben haber yakınlaştırmak olacak Zaten tanıdık bazı şeyler. Burada bu orada var hangi bir tarayıcı. İşte HTML5 geliyor. HTML var. Görünüşe göre, orada bir Ben did not özniteliği belirtir kullanmak Sayfanın dili, ve bu otomatik yardımcı olabilir Böyle çeviri ve şeyler. İşte sayfanın başı. İşte Stanford sayfanın başlığı var. Ben yaptığım bir etiket var yet-- Meta etiketi hakkında konuşmak. Sadece bir çeşit bulunuyor arkaplan bilgisi. SEO ile yardımcı olur, ya da Arama motoru optimizasyonu, veya Google arama sonuçları veya benzeri. Biz aramaya devam Ama, eğer tutmak seyir, burada Vücut etiketi. Ve diğer demet var etiketler henüz konuştuk ettik. Ama Div for a biridir Sayfanın bölümü. Bu görünmez bir dikdörtgen gibi ne tür zihinsel istiyorsanız içine sayfanızı bölmek Online farklı birimler. divs Ve sonra bir sürü ben , Sınıf denilen şey görmek ama biz geri geleceğiz. Bu interesting-- Formlar olduğunu. Formlar tüm web üzerinden vardır. sen herhangi bir arama kutusu şimdiye kadar kullanılan bir formdur. Ve, böylece, en doğrusu bakalım. Form. Aksiyon. ne olursa olsun bu formun eylem tarihsel nedenler, bu URL. Yöntem "post" dir. HTTP istekleri kullanabilirsiniz çıkıyor Daha önce gördüğümüz gibi fiil, "olsun" ya da "post". Ve bir fark göreceksiniz Bir an bu. en doğrusu bu ne olduğunu görelim. me back Stanford sayfasına gidelim. Ne biçim konuşuyorsun yaklaşık sizce? Sana ne dışarı atlar? İZLEYİCİ: Arama kutusu. DAVID J. MALAN: Evet. Sağ üst taraftaki kadar kadar Burada bu ara kutusudur. Ve onlar bu-- bir uygulamaya nasıl kelimenin tam anlamıyla açık dirsek form etiketi. Ve sonra bir şeye aramak için izin. en bir dostum için arama Let benimkini "İsim Parlante." bir Girmek. Ve tabii ki gitti biraz daha farklı bir URL'dir. Beni burada geri dönelim. en aramak istiyorum "kursları." Lanet olsun. Farklı bir URL'ye gitti. Yani, Stanford Biraz sihir ekleyerek Onlar URL'ye beni almıyorsun o Biz gördüm eylem bağlıyor. Ama burada bu formu tamamen uygulanmaktadır Burada bu biçimlendirme yoluyla, bu etiketleri. Aslında, burada giriş var: İstediğiniz arama türü. İşte girdi içindir Arama başka bir türü. İşte dize kendisi için girdidir. Ve böylece gol sarmak için değil, Bu etiketlerin her yerinde zihinlerimiz ama sadece görmek için. Sadece açılış ve kapanış oluyor etiketleri ve seyir şeyler kadar. Evet? Victoria? İZLEYİCİ: [Duyulmaz] DAVID J. MALAN: Bu iyi bir soru. Görmek için biraz yanıltıcıdır. bana bu geri gelelim Sadece birkaç dakika içinde soru Biz bir şey bakmak çağrılan CSS, ya da basamaklı stil sayfaları, ve biz çıkarmayı deneyebilirsiniz sayfadan kadar. Yani biz şimdi google.com bir göz atın eğer, en kendi sayfasında neye benzediğini görelim. Bunu bugün şirin they're-- olacaktır. TAMAM. Hepsi tamam. Kaynağı Görüntüle böylece tamam. Google'ın sahip düşünürdüm Gerçekten güzel bir kaynak kodu. Yani, görünüşe göre, burada ne oluyor? Ve aslında, bu da HTML değildir. Bu JavaScript denilen şeydir. Ve en gidiyor ve devam edelim. sayfa başladığı bile bilmiyorum. Ben Command kullanmak için gidiyorum F açık dirsek HTML. Pekala, işte burada. Ben sayfanın başlangıcını bulundu ve çok şeyler burada var. Gerçekte ne oluyor? Peki, ne biliyorsun, Biz bu kadar temiz olabilir. Bunun yerine giderseniz bu kontrol edin Araç çubuğu, bu özel tanı aracı, ve Ağa değil gitmek, Bugün devam edin nereye, ama Elements giderseniz, gerçekten güzel Bir tarayıcı bir yeri vardır olduğunu Ben bunu çok daha iyi gözler. Ve tarayıcı okuyabilir Bir web sayfasının bu karışıklık, HTML posta biz sadece baktı, ve can bunu ayrıştırmak ya da okumak ve analiz ve reformasyon Güzel bir insan dostu bir şekilde. Yani şimdi görüyorum ne Burada bu ekranda Elementlerin altında, aynı içerik, ama her şeyi girintili ettik, onlar colorized, ancak ettik tam aynı metin var Ben sunucudan indirilen söyledi. Ve şimdi ne güzel ben görebiliyorum olduğunu Vücutta, instance-- haber için, Sayfa hala oluşur sadece baş ve gövde, ve ben hiyerarşik burada dalış yapabilirsiniz. Google gibi görünüyor fark Bu bir ve bu bir divs-- için. Bunu genişletebilirsiniz. diğer divs bir sürü var. Bu yüzden biraz karmaşık. Fakat bekle. Bu çok fazla görünüyor okunabilir, nispeten bu daha. Neden Google utanç verici Sadece göndererek kendisi bazı kod bu büyük karmaşa sıralama sadece bir şey uygulamak Bu ilk bakışta çok basit görünüyor? Gibi, neden daha fazla boşluk eklemeyin? Benim yaptığım gibi Neden Enter isabet etmedi? Bakın ne kadar iyi ben Bir web sayfası yazma. Ben çok özenle Enter tuşuna basın. Ben bu yüzden her şeyi girintili çok güzel ve okunabilir. Neden Google değil aynı pratik mu? İZLEYİCİ: [Duyulmaz] DAVID J. MALAN: İyi. Çok adil. Bazı yok Google'da kişi manuel Artık ana sayfa güncellenmesi. Artık 1999 değil. Bu yüzden yazılım var. Onlar diğer araçları var dinamik, HTML konum oluşturmak. Tabii ki, bu kod kendisi İnsanlar tarafından yazılmıştır, ama gerçeklik, o, söylemek oldukça adil Tarayıcınız kesinlikle değil Kod nasıl dağınık önemsiyorum. Ama daha fazlası var zorlayıcı teknik nedeni Google, HTML dağıtır Böyle bir özensiz kod, görünüşte ezici bir yol hep birlikte paketlenmiş çok az yol-- çok az Benim yaptığım gibi biçimlendirme yolunda. İZLEYİCİ: [Duyulmaz] DAVID J. MALAN: Daha hızlı? Niye ya? Ve sen, Lydia ne dedin? Daha hızlı? Neden daha hızlı? İZLEYİCİ: [Duyulmaz] DAVID J. MALAN: var boşluk okumak için. Evet. Yani bir boşluk ne olduğunu düşünüyorum. Yani klavyedeki her karakter alır alan bir miktar, temsil etmek ya fiziksel, bunun gibi çok alan olduğunu kaplıyor ya da bir şekilde altında davlumbaz, bu bellek gerektirir. olarak aside-- ve yaparız ve Bu Yarın- hakkında daha fazla konuşmak Klavyenin her karakter tipik 8 bit ya da bir bayt gerektirir. Yani 8 sıfırlardan oluşan bir desen veya olanlar, ya da sadece 1 bayt, biz olarak insanlar genellikle söyleyebilirim. Böylece, küçük ama Hala sıfır olmayan var. Hala uzay miktar var. Yani bir mühendis veya Google vurursa space bar sadece bir kez, ve varsayalım Google-- öyle süper popular-- bir milyar insanın varsayalım Bir gün onların ana sayfasını ziyaret edin, ya da bazı insanların sayısı ana sayfa a ziyaret milyar kez bir gün, kaç ek bayt olduğunu vardır yazılım mühendisi sadece Google'ı mal bir zamanlar onun uzay çubuğunu vurarak? İZLEYİCİ: [Duyulmaz] DAVID J. MALAN: Oldukça kötü değil. Sadece bir bayt kez milyar dolar. Yani bir-- İZLEYİCİ: 8 milyar gigabayt. DAVID J. MALAN: Not 8 milyar. 8 milyar bayt. Ama 1 gigabayt. 1 gigabayt ölçü birimi olacaktır. o iki yaparsa alanlarda, 2 gigabayt. Üç gigabayt. Sağ? Bu pahalı bir terazi. Ve böylece Google gibi durumlarda, hangi verilen, aşırı durumlarda vardır, Sadece ortaya çıkan diğer sorunları vardır çok makul kararlar alarak ya da çok basit bir insan eylemlerde, Bu büyütülmüş bir etkiye sahiptir çünkü. nedenlerinden biri bu yüzden Bu yüzden, sıkıştırılmış görünüm Victoria oldu ki-- tam gibidir sadece zaten bilgisayar tarafından oluşturulan. Öylesine hayır büyük dağıtmak. tarayıcı anlamaya edelim. Ama aynı zamanda kasıtlı olarak fazla yer yok, Uzay gerekli değildir, çünkü. Ve uzay aslında masraf. Ya, zaman maliyeti Sadece itmek çünkü üzerinden o kadar daha fazla veri Google.com'un merkezi sadece bir miktar almak için var o milisaniye olsa bile zamanı, veya mikrosaniye, ama bu kadar ekler Pek çok kullanıcı üzerinde, ya da daha büyük olasılıkla, muhtemelen masraf. Google muhtemelen bağlanır Dünya, birinde başkası Bunların bakan noktaları ve onlar varsa mali ilişki bir çeşit bu sayede kendi veri masraf, onlar da olabilir ne kadar veri minimize onlar üzerinde tükürme konum kendi internet bağlantısı. Çok komik bir şey olsa da, sonuçta, ya da belki güven verici bir şey, olsa bile bu korkunç görünüyor ki ezici, günün sonunda, yine tam olarak aynı ilkeler var Burada bir HTML bu çok basit sayfa sayfa. Dolayısıyla, sadece özetlemek ve böylece Eğer olmasaydı kurallı bir sürümü var burada, burada seçim tarafından birlikte aşağıdaki web sayfalarının en basit olabilir, bu yüzden bir şey belki daha sonra oynamak için. Peki, bir tanıştırayım Şimdi diğer fikirler çift. Biz tanıtmak üzereyiz bir şey bir stil etiketi denir. Biz bu sayfayı stilize olabilir daha ilginç şekillerde. HTML e-posta oysa Yani tüm hakkında işaretleme olduğunu Veri, bir çeşit için belirterek nasıl veri yapısı tarayıcı, nereye koymak o, CSS, veya Basamaklı Stil Şablonu, İkinci bir dil olduğunu genellikle HTML ile kaynaştı alır Biz see-- sizi temizlemek gibi alan bir moment-- o kadar final mil, ve bunu stylizes. Bu renkler sadece doğru olur, yazı tipi, sadece doğru boyutları konumlandırma doğru. Bu estetik hakkında herşey ya değil, yaklaşık biçimlendirme temel veri kendisi. Ve en kolay yolu göstermek için Bu örnek belki de. Yani üzerinde gitmek için gidiyorum Benim basit bir metin dosyasına. Ve sadece bir an, ben olacak sürecinde bize yürümek Bu kendimizi yapıyor. Ben dosyaya geri dönmek için gidiyorum Burada sadece sayfayı yeniden Göründüğü gibi onaylayın. Şu an bulunduğumuz yer orası. çocuklar zevk alırdım gibi hissediyorum Bu web sayfasında bazı renkler olan. Yani burada gitmek için gidiyorum Sayfanın kafasının içine. Ve ben tarzı, / stil yapacağım. Ve sonra bu iç, ben gidiyorum Benim page-- gövdesini anlatmak için ve bu biçimlendirme de olduğunu İlk bakışta, belki biraz garip ama geleneksel. Ben arka söylemek için gidiyorum Bu sayfanın rengi yeşil olmalıdır. Ve bu ne yazık ki çeşit değil en iyi tasarım. Dikkat ederseniz önce HTML dünyasında, Dedim nitelikleri olduğunu Bu anahtar-değer çiftleri vardır. Bir şey teklifi eşittir unquote "bir şey." oldu CSS dünyasında, Bazı farklı kişiler tarafından tasarlanmış, onlar, o karar onların Dünya, anahtar-değer çiftleri kelime kolon şey olurdu. Yani olsa da, aynı fikir. Bu değer ilişkilendirme var her nasılsa bazı anahtar buna Bu sayfanın davranışını etkiler. Ve muhtemelen tahmin edebilirsiniz. bu muhtemelen gidiş nedir asla ettik bile yapmak önce HTML ya da CSS gördünüz mü? İZLEYİCİ: Arka plan rengini değiştirin. DAVID J. MALAN: Evet, Arka plan rengini değiştirmek. ve özellikle Vücudun arka plan rengi. Ama sürece Şimdi vücut ağıdır page-- o tek şey başlık çubuğu gerçekten-- altında muhtemelen gidiyor Aynı şeyi etkiler. Yani bakalım. Şimdi bu kurtaralım. Buraya gidin ve yeniden. Oldukça iğrenç. Ve ne oluyor Burada bir yan etkidir. Ben sadece rastgele bu görüntü seçti. Neden yeşil değil Mickey arkasında nüfuz? İZLEYİCİ: [Duyulmaz] DAVID J. MALAN: Kesinlikle. Oldukça ki görüntüleri çıkıyor Kullandığımız olabilir hemen bütün görüntüler, dikdörtgenler her rectangles-- bulunmaktadır. Mickey bazı eğrileri olsa bile kendine ve bir geçmişe sahiptir, Bu arka plan bir şey olmalı. Bu beyaz olmak zorunda. Siyah ya da başka bir şey olmak zorunda. Bu şeffaf olabilir. Ve aslında, I could Burada Mickey Mouse açmak Photoshop adlı programda ya da benzer bir şey ve o beyaz tüm değiştirmek şeffaf arka plan, yani yeşil ile parlaklık olacaktır. Ama bu ihtiyaç duyduğu şey Kendim veya bir grafik sanatçısı sormak için ya da bir tasarımcı benim şirketi, örneğin, Özellikle ben sadece bu yana, yapmak internetten bu bir ödünç. Bu neden oluyor ama bu. Yani başka ne yapmak isteyebilirsiniz? Eh, biz biz söylemek isteyebilirsiniz Gerçekten siz kaldınız umuyoruz. Ve vurgu için, ben istiyorum Bu güçlü hale getirmek için, ve bu yüzden açık, güçlü ve söyleyeceğim Güçlü kapatın ve sonra yeniden yükleyin. Ve bu biraz zor projektöre görmek için ama belki de gerçekten artık biraz daha size dışarı atlar. Yani bu italik ekleyebilirsiniz yolu, bu şekilde kalın kaplama. Biz renklerini değiştirebilir. Aslında, sadece tekmeler, ben go ahead ve bunu yapmak için gidiyor. Gerçekten nasıl sevmiyorum benim paragraflar, birbirine bu kadar yakın olan bu yüzden böyle bir şey yapabilir. Ben tarayıcı söyleyeceğim, için her paragraf etiketini değiştirmek, ne biliyorsun, en doğrusu açarsanız edelim, en metne-align, merkezi hizaya edelim. Ve yine, ben bu sadece bilmek Birisi bana öğretti, çünkü ya ben baktım online başvuru. Bu yüzden bana bu tasarruf sağlar. Ve, ah, şimdi var Orada görüntü merkezli. Ve aslında, ne, bilmek Ben bir paragraf içine benim görüntü taşımak tag-- böylece üçüncü paragrafı, Hatta metne değil gerçi. en kaydetmek ve yeniden edelim. Şimdi sayfa tür bakmaya başlıyor of-- ben, hala, oldukça çirkin anlamına Ben harcanan gibi ama en azından görünüyor iki dakika yerine bir dakika gerçekleştirmek. Ve böylece, adım adım, biz yapabilir Sayfanın şimdi bu estetik değişiklikler? Gerçekten veri değişmedi ettik Gerçekten kelime ekleyerek başka sayfa. eğer sen ben, meta ekledik. Hey, tarayıcı, yapmak kelimesi "gerçekten" cesur. Ancak veri güçlü değildir. Bu meta değil. veri "gerçekten" dir. Bu yüzden hala bazıları var aynı kavramlar olarak önce. Şimdi, tabii ki, bu ağ-değil, bu yüzden burada bir son adımı yapacağım. Ben hello.html gitmek için gidiyorum ve sadece vurgulamak ve bu kopyalayın. Ve şimdi ben gidiyorum Cloud9, gitmek hangi Ben sadece bir an sizi içinden yürüyeceğiz. Ve oranlar, eğer yakında olacak olan değil zaten böyle bir ekranda. Ve bana sadece size hızlı vereyim Cloud9 aslında ne tur. Yani yine 9 bulut Bu bulut tabanlı hizmet Bu size ve bana yanılsamasını verir bizim kendi sanal makine olan bulut içinde teknik bulut bir kap olup, biz tam olması yönetici ayrıcalıkları için. teoride, hiç kimse bu yüzden Dünyada başka sahiptir Ben ekrana erişim Şu anda bakarak, belki insanlar hariç kim siteyi çalıştırın, teknik onlar çünkü fiziksel erişim ve benzeri. Bu yüzden bu ortamda ne görüyorsun? Ben, uzaklaştırmak için gidiyorum biraz küçük olduğu için. Ve ben üzerinde işaret izin Burada sadece bir an için. sol tarafta benim ve senin ekran, solda bir dosya tarayıcısı var. ruhu içinde çok benzer Mac OS ve Windows için. Bunlar hepsi Hesabımda dosyaları. Ve varsayılan olarak, eğer senin hesap, benimki gibi Gördüğünüz veya yakında göreceksiniz helloworld.html ve readme.md. Burada sağ tarafta üzerinde, bu nerede metin dosyaları gidecek. Hiç Microsoft kullandıysanız Kelime Not Defteri veya TextEdit veya Bu kelime benim düzenleme olduğunu Dosyaların gidecek. Ve sonra en esrarlı Bu ortamın özelliği biz gerçekten kullanmaya gerek olmayacak Burada bir Terminal Pencere denir. sizden DOS kullandıysanız yesteryear, bu Linux veya DOS Linux eşdeğer. Bir metin tabanlı arabirimini, var Hiçbir fare tıklamaları, hiçbir sürükleme. Yapabileceğiniz Hepsi bir komutları, ancak bu komutlar dosyaları, dosyaları oluşturmak taşıyabilir, açık dizinleri, yakın rehberler, şeylerin herhangi bir sayı yok. Şimdilik Ama, biz sadece edeceğiz Burada bizim zaman kadar harcama. Ve bu yüzden bu yapalım. Bu konum çevre, sen-meli Bir çalışma alanı oluşturulmuş ise olmak Zaten, go ahead ve sadece kadar gitmek Bir an için, Yeni Dosya. Ve bu size yeni verecek Burada ortada sekmesi. Ve ben sadece- ve yapalım go ahead ve bunu. en Kaydet Dosya yok artık devam edin ve let ve devam edin ve hello.html çağrı, ile karıştırılmamalıdır helloworld.html, burada , Yeni ücretsiz bir hesap ile geldi hangi sadece bir örnek dosyasıdır. Bunu aniden ortaya göreceksiniz, Sol taraftaki büyük olasılıkla ve sekme hala açık olacak. Ve beni yeniden şimdi teşvik edelim Bu dosya veya bunların bazı varyantları. Ve oldukça üzerinde göremiyorum eğer ekran, bu slaytlar aynıdır muhtemelen başka bir sekmede olması. Yani kısacası, ilk web sayfası yapmak o, ve sonra sadece bir an kaydetmek, nasıl ben size göstereceğim aslında bu görüntüleyebilirsiniz. Ama en azından bir şeyi değiştirmez. için HelloWorld değiştirin kendi seçtikleri bir şey, o senin olduğunu ikna olduğunu ve böylece Ben sadece oluşturduğunuz bir dosya değil. Pekala. Ve hiçbir ready-- yaparken Hazır olduğunda rush--, devam edin ve dosyayı kaydedin bir kez bu değişiklikler yaptık. Ve eğer tıklarsanız Run düğme kontör, bu anlatacağım yeni bir sekme açın gerekir sen, sen dosyanızı ziyaret edebilirsiniz ne URL ama bir an alabilir alıntı ", Apache başlatmak" demektedir ki Web sunucusunun adıdır. Yani tam olarak yapmak için dikkatli olun Ne sonuçta dosyada var. Yani şimdi, ben yakınlaştırmak gerekir. Ben yazmaya başlayın, eğer açık dirsek HTML, haber Benim düşünce bitirmek için bana sormadan ediyor. Ve benim düşünce bitmiş ise, o otomatik bana kapanış etiketi verir. Ama beklenti o zaman vurmak, güvenlik danışma Girin ve ardından içeride hareket ve iç kafa yapmak ve Sonra içimde vücudu yapmak. Ve bu, ilk başta biraz garip Sizin için iş yapıyor çünkü, ama sonuçta fark size tuş vuruşlarını kaydeder. arasında ve aslında, bir çok yaygın bir özellik Programlama bugünlerde ortamlarında Her iki gibi web geliştirme için Bu ve gerçek programlama, hangi yarına bahsedeceğiz, Bu otomatik tamamlama özellikleri olduğunu, Sadece bir izin şeyler programcı veya tasarımcı daha az tuş vuruşlarını yazın Aynı şeyi başarmak. Bazen olsa iyi. Bazen sadece sinir bozucu. Ve yine, bir kez transkripsiyonu ettik slayt veya bunların bazı varyant, Eğer kontör Çalıştır düğmesini tıklayabilirsiniz. Sonra alt Pencere, haberdar olacak Ne URL de web sayfasını ziyaret edebilirsiniz. Maden ocakları, örneğin yer almaktadır business-daharvard.c9users.io ve benzeri. Pekala, bu yüzden bana-- herhangi bir soru olur mu? Sadece alma hakkında herhangi bir diğer sorular özellikler eklemek önce bu çalışma? Ve sadece bana teklif izin millet comfortable-- almak Sadece bir şey, çünkü Ben ne yaptık körü körüne copy-paste. Ama millet güreşmek böylece yapılacak iş en az biri ile, Ben biraz müzik açmak için gidiyorum. Ben bir liste önerecek gidiyorum potansiyel ekleyebilirsiniz şeyler. Ve kesinlikle Google'ı kullanabilirsiniz. Ve neden biz sadece çözmek için deneyin öneriyoruz En azından belirli bir sorunu burada. etiketleri açısından çok, beni burada bu yeniden edelim. Aslında, bana koyalım bir metin halinde kullanılabilir. en biz olabilir etiketleri arasında Diyelim ki burada kullanmak Buraya biraz etiketleri bulunmaktadır. Biz paragraf etiketini gördüm. Şimdi otomatik tamamlama gidiyor. Paragraf etiketi, çapa etiketi. Diyelim ki istediğinizi varsayalım bir şey daha büyük yapmak, böylece da-- olabilir span etiketi yardımcı olabilir. Eh, biraz yardım gerekebilir sadece bir an bunun için. Biz div gördük. Sen tablo var göreceksiniz. bir şey tr td var çağırdı. Th, td. Bir an geri o gel. kullanışlı başka ne olabilir? Güçlü var. Orada vurgu var, ya da daha doğrusu onları. Orada- başka ne Burada fantezi olabilir? Eh, biz götürürüz Birlikte Şuna bak. gördüğümüz Formu. Form var. giriş ve birkaç başka var. Pekala, hadi yapalım. Bir Victoria'nın cevaplamak için soru, ilk bana izin sadece herkes emin olun onların merhaba çalışma almanız mümkün. Sonra beni tanıştırayım Birkaç diğer fikirler. Sonra millet çözmek izin vereceğim Kendi başlarına biraz problem. Sonra biz aslında geri geleceğiz Bir formun bu fikrine, ve biz aslında re-implement edeceğiz Birlikte ön uç arayüzü, bu yüzden Google kendisi için, konuşmak için. Biz arka plan olarak Google'ı kullanıyor ve izin vereceğim Onları zor işi yapmak, arama, ama biz ön uç yeniden edeceğiz Google'da ve arama formu kendi ana sayfasında var. Ve böylece biz geri geleceğiz sadece bir an bu etiketleri. Yani bu ne ben sadece bir an önce önerdi. Biz, bir stilizasyonu ekleyebilir Bu tarz etiketi içinde sayfa, ve biz arka plan stilize edebilirsiniz renk, metin hizalama, Bu merkezi veya sola veya sağa olsun. Ama çok hızlı bir şekilde olur bulmak ya da bir web tasarımcısı Bu bulacağını Biraz ağır olur Eğer yapıyoruz, çünkü ne Karıştırma içerik olarak adlandırılan sunumu ile bunların. Verilerinizi karıştırma konum ve estetik bunların. Ve aslında, düşünün Ne olan Zamanın üzerinde ne olacak Bu çok küçük web sayfası, tabii ki. Ama bu sayfayı içerik eklerseniz ve ben bu sayfaya stil eklemek, sayfa çok hızlı bir şekilde alır uzun ve daha uzun ve daha uzun. Ve ben istiyorum varsayalım İkinci bir web sayfası var Bu özelliklerden bazıları paylaşıyor. benim ikinci web sayfası için varsayalım benim durmayacağız de, ben her şeyi merkezi istiyorum ve ben de her şeyi istiyorum yeşil bir arka plan ile. Ben hemen hemen zorunda gidiyorum kopyalama ve bu hatların bazıları yapıştırın İnce hissediyor ikinci dosya içine. Bu sorunu çözecektir. Ama üçüncü sayfa neyi istiyorsanız Bir 30 sayfa veya 40 sayfa veya? Şimdi kopyalama için gidiyorum ve yinelenen bir sürü kod yapıştırarak birden fazla dosya içinde. Ve böylece varsayalım Ben karar veya ben söyledim, hey, biz kullanmadığınız bir Artık yeşil arka plan. Biz turuncu kullanmaya başlamak için gidiyoruz. Ne değiştirmek zorunda mı? Eh, bu tarz değiştirmek zorunda yeşilden turuncuya kaç yerde? 30 ya da 40 yerler gibi. Bu sıkıcı değil. Bu hata eğilimli olduğunu. bir dizi nedeni vardır Eğer ikna etmek istemem nerede Kendiniz için acı bu tür. Ve bu yüzden güzel olmaz biz sürebilir ne sadece Bu iki sarı arasına koymak etiketler, bu tarz etiketleri, dışarı çarpanlarına ve tüm koymak benim Tek bir merkezi dosya halinde stylization Bu benim diğer tüm dosyaları 30 veya 40 ödünç ya da bir şekilde referans, değil ağ aksine diyagramlar Daha önce yapıyordun? Burada gitmek, yani ben Aslında teklif edecek Biz değiştirmeniz bir şey stil etiketi bağlantı etiketi denir ki korkunç, korkunç olarak adlandırılır, Eğer kullanmayın çünkü bağlantı etiketi ne oluşturmak için Biz insanlar bir web sayfasına bir bağlantı olarak biliyorum. Bunun için, hangi etiketi kullanabilir miyim? Nasıl bir web sayfasındaki bir bağlantı oluşturmak mı? İZLEYİCİ: a. DAVID J. MALAN: a, ya da çapa önce Disney gitti etiketi,. Burada link etiketi söylüyor adlı bir dosyaya bu-- bağlantı için styles.css, ilişki Benim stil olduğunu olacak. Yani bu S yıllarda biridir CSS-- geçişli stil sayfaları. Stil sheet-- CSS S yıllardan iki. stil sayfasını Basamaklı. Bu sadece hey, tarayıcı, gitmek anlamına gelir yerel sunucuda styles.css bulmak ve senin stylesheet olarak kullanabilirsiniz hangi o dosyanın içinde gelir Tüm olacak biz sadece yaptık stilizasyonlardan. Ve ne olmuş yani bu dosya bu gibi görünebilir. Ve ben sadece bu hızlı yapacağız örnek ihtiyacımız yok çünkü Burada yabancı otların içine çok fazla almak için. Ben bu kopya Ama eğer, ben öneren Ne değilim Bir programcı yeni bir dosya oluşturmak olduğunu, Bu çizgiler, yapıştırın Bu satırlarda whoops-- yapıştırmak, olarak, daha sonra styles.css olarak kaydetmek ve Diğer dosya, bütün bunlar silmek ve bunun yerine yerine Bu bağlantı etiketiyle. ben href = "styles.css" bağlantısını Yani, ilişki "stylesheet" olacaktır yakın etiketi. Onu kurtar. Benim helloworld geri dön. Yükle. Kelimenin tam anlamıyla bir şey olmadı. Yani, iyi bir şeydir çünkü o aslında tüm çalışma demektir. kadar ispat etmek için, ben yapmak varsayalım yazım hatası, ve ben bu "Styles.css" diyoruz bir sermaye S ile Yanlış ve sonra yeniden yükleyin. Şimdi sadece işe yaramazsa görebilirsiniz. Şimdi, neden? Peki, bir kullanmama izin önceki tekniği. de, beni devam edelim ve Benim tarayıcı Chrome'da, ben özel olduğunu açılacaktı Ağ sekmesi daha önce olduğu gibi, ve bana sayfayı yeniden izin verin. Şimdi görmek için sürpriz ne değildir? Ya da belki de bunu görmek için sürpriz değil. Her iki durumda da, şimdi ne görüyorsun? İZLEYİCİ: [Duyulmaz] DAVID J. MALAN: Bu bulundu değil. Neden bulunamadı? Eh, Styles.css-- sermaye S- yoktur. Ben misnamed. Basit yazım hatası. Ama şimdi bir anlaşılır alıyorum 404, sunucu söyleyerek çünkü, hey, bulduğu değil. Kelimenin tam anlamıyla, bilmiyorum nerede dosyadır. Sonuç olarak, tarayıcı Yani , Elinden geleni gösterir Sayfanın ham içeriği, bu, 200, HTML oldu ancak stilizasyon yapamam daha sonra ilave edilebilir. Ve bu basamaklı demek ne olduğunu. Sen tür ekleyebilirsiniz sonra, ve bu tür Web sayfasının estetiğini geliştirir. Ve hatta bu kılabilirsiniz Yine başka stil dosyaları ile stilleri istersen. Bu, bu durumda, yine de, bulunan değil Çünkü elbette, bunu misnamed. Bu yüzden ilk olarak düzeltmek gerekir. Yani en önde gidelim ve aşağıdaki öneriyoruz. en go ahead ve bu yapalım. belki ile başlayan senin helloworld dosyası, Bana sadece bir çift davet edelim önerileri bulunmaktadır. Yani, Victoria sen istedi Bazı metin büyük, tamam mı? Pekala, biz Metni büyütmek yapabilirim. Ve biz her koparmak olacak Sadece bir problem çözmek için. Metin daha büyük yapmak. Ben rahatsız gitmiyorum biz ne zaman bu yazı Burada üzerinde kurşun teknoloji var. Bu yüzden bazı sorunlar. Bu yüzden denemek için gidiyoruz Metin daha büyük yapmak için. Pekala. Başkasının ne önerirsiniz? Başka ne isteyebilirsiniz Bir web sayfasına mu? en a ile gelsinler şeylerin kısa bir listesi ve sonra temsilci grup bu anlamaya. İZLEYİCİ: [Duyulmaz] DAVID J. MALAN: Tamam, konum metni Sayfanın farklı taraflarında? Pekala. Başka bir şey. İZLEYİCİ: [Duyulmaz] DAVID J. MALAN: Öyle. Yani bir gif sadece bir Farklı dosya biçimi. Biz sadece kullanılan, ne bir png veya muhtemelen jpg? Bir jpg kullanılır. Eğer aşırı, meraklı iseniz Sorunuza cevap jpg genellikle kullanılan bir fotoğraflar, destekler çünkü renk veya 24-bit renk milyonlarca. GIF genellikle olduğu gibi, kullanılan internet fenomeni bu days-- animasyonlar, gibi animasyonlu gif. Ama küçük bir renk kullanmak olur palet, yalnızca 256 olası renkler, ancak destekler şeffaflık ve animasyon. destekler ve sonra var png, şeffaflık ve daha fazla renk ama animasyon. Bu yüzden bir ticaret-off. Yani olsa da, gif ekleyerek, işlevsel olacaktır Bir png veya jpg ekleyerek eşdeğer. Evet. Görüntü kaynağı eşittir. Yani başka bir şey. en bir şey ile gelip edelim ki Burada yapmak için Victoria gönderildi. İZLEYİCİ: Bir form için düğmeler ekleyin. DAVID J. MALAN: Tamam. Yani bir form için düğmeler ekleyin. Ve birlikte o birini yapacağız. Yani mükemmel bir segue olacak Sağ bu mücadeleden sonra. Başka herhangi bir şey? Ne yapmak isteyebilirsiniz? Web çok underwhelming hissediyor Bu hepsi eğer yapabilirsiniz. İZLEYİCİ: Metnin rengini değiştirin. DAVID J. MALAN: Ne değiştirme? İZLEYİCİ: Metin rengi. DAVID J. MALAN: Metnin değiştirin rengi. Pekala. Yani, bu yapalım. Sadece tekrar böylece sen değil, sadece ezbere, ben ne yaptığımı tam olarak yapıyor, Ben müzik açmak için gidiyorum Burada belki beş dakika. Google'ı kullanmak için sakınca yoktur. Bana sormak için buyrun, ve Ben senin kulağına bir ipucu fısıldar edeceğiz. Sen bakmak için buyrun üzerinde diğer omuzlarında. Ancak bu sorunların sadece bir çözüm. Ama biz sonuncusu, yapacağım Eğer biz-ebil birlikte, birini oluşturur. Yani beş dakika çözmek için Bu sorunlardan biri Google, sezgi kullanarak, ya da herhangi bir sizin için kullanılabilir diğer araçlar. [MÜZİK] Pekala. Endişeye gerek yok isterseniz müdahalesi tutmak için, ama ben bir çift yağma edeceğiz Bu cevapların. ilk öneri Yani Victoria metin daha büyük yapmak için oldu. Yani bunu yapmak için birkaç yol var. Şu anda restore ettik Bu boyuta benim ekran, Ben yakınlaştırılmış ettik olsa yapay sadece şeyler görmek için. Ve bunu yapalım. Beni önde ve kapmak gidelim Bazı genel Latince metin sadece bu yüzden çalışmak için bir şey var. Bu yüzden bana sadece bir anı ver. Ben üç paragraf yapacağız. TAMAM. Bu, daha iyi bir örnek olacaktır. meraklı için, So Benim hello.html, ben sadece Yapıştırılan üç saçma Latin paragraflar sadece bu yüzden çalışmak için bazı metin var. Ve Victoria'nın hedefi oldu Büyük metnin bir kısmını yapmak. Bu yüzden, daha önce olduğu gibi, burada gidebiliriz. Ve ben bunu doğru şekilde yapalım. Ben bir bağlantı var gidiyorum Bir dosyaya işaret eden etiketi sözde "styles.css," ilişki hangi "stylesheet." yine Ve sonra o kurtarmak için gidiyorum ve bu "styles.css." açmak Yani, daha önce olduğu gibi, ben Bu CSS dosyasında yeteneği aslında varsayılan geçersiz kılmak için Bir web sayfasının estetiği, ve varsayılan estetiği, Tabii, oldukça sıkıcı. Siyah normal yazı tipi boyutu tür var Metin, vb beyaz arka plan ve. Yani yapmak istediğinizi varsayalım Bu metnin tüm büyük. Ben bir şeyler yapabilirdi. Benim styles.css dosyasında, ben ne biliyorsun, söyleyebiliriz, Aşağıdaki uygulamak Benim sayfanın gövde. Devam edin ve yapmak yazı tipi boyutu 24 punto, hangi bir sayı ı olabilir olduğunu Microsoft Word'de kullanın. benim web dönelim Burada sayfa ve yeniden, ve bunu görebilirsiniz Zaten çok büyük. Ve biz biraz deli alabilirsiniz sadece bir desktop-- üzerinde can gibi o 96 puan yapmak. Yükle. Ve biraz gidiyor Bu noktada hantal. Ama biraz daha hassas olabilir. Bunun yerine, bu uygulama sayfamın gövdesine stil, başka ne yerine uygulamak olabilir başka hangi etiketi hala olabilir aynı şekilde işlev? İZLEYİCİ: p etiketi? DAVID J. MALAN: P etiketi. Yani kafa olmaz Doğru, baş nedeni, aslında olamaz estetiğini kontrol eder. Her iki metin var ya da yok yok. Ama p tag-- biraz dalış yapabilirsiniz derin, bu yüzden paragrafa, konuşmak etiketleri. Ve üç olsa bile, Bu, çünkü CSS, mükemmel para cezası Ben sadece "s" bu derken Aşağıdaki uygulamak anlamına gelir Bu eşleşen herhangi etiketi seçici, seçici sadece etiketinin name olmak. Yani gördükleri her yerde "P", yazı tipi boyutunu uygulamak ve en fazla bunu yapalım Makul vasıtasıyla yine 24 puan. Ve ne biliyorsun, sadece iyi ölçmek için, rengini yapalım Şu an için kırmızı sadece. Ve şimdi ben şimdi, yeniden eğer biz Üç çirkin paragraflara bakınız. Ama şimdi ben sıralama olduğumu varsayalım of-- Ben ilk paragrafı istiyorum kullanıcı dışarı atlamak için. Ben sadece artırmak istemiyoruz Her şeyin yazı tipi boyutu. Ve bu yüzden aslında tanımlamak istediğiniz veya Bu paragraflarda arasında ayrım. Yani kırmızı kurtulmak izin , Bu sadece tür yapışkan çünkü ve en go ahead ve yapalım font boyutu 12 punto, varsayılan olarak, Bu yüzden geri bir şey değil Biraz daha makul. Ve şimdi sadece artırmak istiyorum ilk paragrafın yazı tipi boyutu. Birkaç yapabilirsiniz yolları, ama var tek yönlü belki de en öğretici an aşağıdakileri yapmaktır. Beni devam edelim ve bu demek paragraf "ilk." benzersiz bir kimliği vardır İstediğim bu şey diyebiliriz. Ben bu "foo" diyebiliriz ya da herhangi bir diğer kelime, ama ben biraz vereceğim anlamsal isim "Önce." Gibi Bu, benzersiz bir tanımlayıcı olan Kimlik, benim ilk paragraf için. Şimdi benim stil sayfasında neler yapabilirsiniz? Biraz daha kesin olduğunu. Yerine söyleyerek, uygulamak p etiketine aşağıdaki, Ben following-- diyebilirim aşağıdaki uygulamak, seçin veya HTML öğesi o "ilk". benzersiz bir kimliği vardır Ne ben buna başvurmak istiyorsun? 24-noktasının bir yazı tipi boyutu. Yani şimdi iki seçicileri var. Bir bütün yapar 12-nokta paragraf. Ama bu, o geliyor özellikle saniyedir-- bu file-- son geliyor Bu basamaklı bir etkiye sahiptir. Ben sadece tüm yaptık benim paragraf etiketleri 12 punto, ama bu şimdi çağlayanlar ve bu herhangi bir öğe için geçersiz kılar sayfa sayfa, herhangi bir etiket benzersiz bir kimlik alıntı unquote "ilk". Ve bu bağlamda hashtag'ının Sadece "benzersiz tanımlayıcı" anlamına gelir. Ben HTML dosyasında koymayın. Ben, buraya, sadece söylemek "Önce." Unquote alıntı Bu yüzden bana yeniden izin verin. Ve şimdi ben tamam, ah, bkz. Ben öyle değil, yani güzel, ama o tür bir önsöz gibi kitap ya da böyle bir şey, burada birinci paragraf büyüktür. ile daha hassas olabilir sadece ilk harfleri, ama en azından Ben daha fazla kontrol icra ettik. Şimdi belki-- belki bunu yapmak istiyorum bazen sebebi ne olursa olsun, ve bu yüzden bu istemiyorum Sadece bir HTML etiketine için de geçerlidir. Aksine, en haydi açarsanız let Ayrıca aşağıdakileri yapın. Class = "ithal." Kimlik benzersiz kullanılır oysa Bir şeyi, bir etiket tanımlamak Web sayfasında, bir sınıf olması gerekiyordu elemanları veya etiket herhangi bir sayıda kullanılan web sayfasında. Yani yeniden kullanılabilir olduğunu. Bir kimlik yeniden kullanılabilir değildir. A sınıfı tekrar kullanılabilir. Ve biliyor ne olursa olsun, ne felsefi reasons-- Ben bitiremedi benim sandým ki söylemek için gidiyorum ilk paragraf ve İkinci paragraf önemlidir. Yani denilen sınıf uygulamak için gidiyorum "Önemli" bu benim dosyayı kaydetmek eğer ve hayır vardır, yeniden henüz fonksiyonel etkisi. Ama bazı ekledik dosyaya meta, Ayrı bir şey tür dosya çekirdek verilerden, böylece şimdi benim stil sayfasında, eğer ben Bunun yerine ".important" demek - bilirsin, önemli şey, ben font-renk yapacağız, red-- ya da daha doğrusu yazı renkli değil, sadece renk. tutarsızlıklar var CSS maalesef. Ve yeniden yükleyin. Şimdi ilk fark iki paragraf kırmızı ancak üçüncü, çünkü ben sadece sınıfına uygulanan "önemli" bu şeyler ilk iki. Kimlikleri Yani, sen yeteneğine sahip çok hassas belirtmek için. sınıflar ile, yeniden kullanılabilirliği var. Ancak her iki durumda da, fark İyi tasarım prensibi tür Ben tüm dışarı çarpanlarına nerede Benim styles.css dosyasına estetik. Yani burada hiçbir messiness var. Kırmızı hiçbir söz yok ya Bu dosyada cesur bakan veya yazı tipi boyutu. Aksine ben anlam var, anlamlı, benim veri olarak karakterize Burada bazı önemli veridir. İşte bazı daha önemli veridir. Dahası, burada Benim önemli verilerin "ilk". Yani HTML hakkında sıralamak hepsi etiketleme, kelimenin tam anlamıyla, kelimelerin ve paragraflar ve yapıları senin Bu küçük ipuçlarıyla sayfa, eğer olacak, sen olabilir ki Bir şekilde kullanarak kaldıraç Bu şekilde CSS gibi diğer teknikler. Yani Victoria'nın soruya yanıt olarak, biz bu şekilde metin daha büyük yapabilirsiniz. Orada pek çok başka yolları vardır, ancak yazı tag-- açık ayraç "yazı" - aslında birçok yaşında. Bu sorun, bir çok olan, ancak bel ile Online resources-- üzerinde Onlar demode olma eğilimindedirler. Ve gerçekten de, bu önerilmemektedir oldu, Dünya fark çünkü, "Font-size = 7" ne demek? Öyle değil. Ve bunca yıl için ve Bu yan biri day-- Burada notları aslında olmasıdır inanılmaz acı hala bazen için siteleri geliştirmek için ağ,, Microsoft Google ve Mozilla ve diğerleri genellikle olarak nasıl katılmıyorum HTML gibi bir şartname yorumlamak. HTML bir kural kitabı var olduğunu, Genellikle her etiket ne anlama geldiğini söyler. Ama bazen için kalan uygulama takdirine, Microsoft'un takdiri ve Google. Ve böylece çok sık olacak Bir web sitesi bir şey görmek PC'de farklı görünüyor Bir Mac üzerinde yaptığından daha, ve bu gerçekten, çünkü günün sonunda, bunu test etmedi iyi iki platformlarda. Ama, aynı zamanda, çünkü makul Akıllı insanlar katılmıyorum ve şirketler katılmıyorum ve bu yüzden olacak programlama zorluklardan biri web veya tasarımı için web için işler Bir şekilde web sitenizin yazıyor her web tarayıcısında çalışır. Ama bu bile doğru, mantıksız değil mi? çok pek çok versiyonu vardır bir noktada, orada o tarayıcılar, Ayrıca bir karar çağrısı yapmak zorunda ve bir şirket olarak karar vermek zorunda, Özellikle e-ticaret-stili sen siteleri son ve en büyük kullanmaya çalışıyor teknolojiler gerçekten iyi bir kullanıcı vermek için deneyim. Ama bazı kullanıcıların yüzde olabilir hala Internet Explorer 6 veya 7 kullanıyor ya da 8, özellikle de bağlı Onlar geliyorlar o ülke. Ve bu yüzden çok sık istişare şey "Web tarayıcısı istatistikleri." Gibi biz izin Şeye gitmek ve eğer en Vikipedi bakın ve up-to-date, bu grafik nasıl olduğunu görmek eğer bir tane var. Yani burada görebilirsiniz nerede aslında tarayıcılar Aralık 2015 göre, vardır, ABD Hükümetine göre. Krom ardından% 42 pazar payı olan büyük ölçüde kurumsal ortamlarda IE tarafından ya da bilgisayar ayarları, tabii ki, Ateş, ardından Daha sonra Safari, sonra Opera vermedi nedense burada harita yapmak, ve ardından Diğerleri. Belki Diğerleri altında. Ama bu daha sorunlu o-- Vikipedi de var bakalım tarayıcılar sürümleri version-- tarayıcı istatistiklerine dönelim. IE. Hatta bu yeterli değil. Tarayıcı istatistikleri. Benim sürümü. Bu doğru olacak değil. sürümlerini görelim. Tarayıcı pazar payı. Bu kadar gelirse bakalım. TAMAM. Şimdi bu oluyor Biraz daha kullanışlı. Yani burada, hepimizin sahip olduğunu fark tarayıcılar farklı sürümleri. Ve, Tanrım, Chrome'u Bak-- eğer 48, Krom 47, Chrome 31, Chrome 45. Yani, giderek güncellenen tarayıcılar, ve bu değişikliklerin bazen anlamlıdır işlevsellik açısından. Ve böylece bir noktada, ürün yöneticileri ya da mühendisler Bir karar yapmak gerekir sen Dünyanın sadece% 1'ini ne biliyorsun hala IE 7 kullanıyor. Canları cehenneme. Biz sadece gitmiyoruz bu tarayıcıyı destekler. Ve bu desteklemek için değil ne demek? Bu düğmeler anlamına gelebilir web sayfasında çalışmıyor, ya da anlamına gelebilir biçimlendirme tamamen kapalıdır. Ya da yapmak gerekebilir Aynı yargı çağrısı Biz konum mobil bu günlerde, içinde Artık IOS 5 desteklemek için gitmiyorum. Yani insanlar sadece yükseltmek zorundayız. Ya da Cupcake desteklemek için gitmiyoruz Android cihazlar için Android OS, Çünkü kadar --daha dünya olarak tech dünya ileriye taşımak istiyor, bu tür sürüklemek istiyor Bu yüzden dünya onlar değil olmaya devam etmek zorunda geriye doğru uyumlu bu kadar Yeni ve iyi özellikleri sunabilir. Bu gerçekten nedenlerinden biridir pek çok şirket neden yayıyoruz otomatik güncelleştirmeler ve zorlama tür bize yazılımın en son sürümü. Ve hatta şirketler Elma sıralamak olacak gibi Seni neredeyse zorlamak veya zorlamak Piyasa güçlerinin açısından size Yeni bir telefon satın almak için onlar sırf Artık eski telefonunuzu güncelleme olmayacaktır. Yani üzerine atlamak En son ve en büyük özelliği, Bir şekilde onlara pahalı çünkü şirket tartışmalı, yaşlı bakımı Yazılımın alt sürümleri. Ama net etkisi olduğunu Biz aynı zamanda bu acı. Yani sadece bir göz atalım Burada nihai şeylerin bir çift. gerçek hızlı bazı knock off edelim bu diğer mermi, meraklı eğer. Yani çalıştığınız takdirde, örneğin, pozisyon farklı iki metin sayfa, ben, bir hızlı şekilde yapmak için gidiyorum ancak farklı var Bunu yapmanın yolları. Beni go ahead ve eliminate-- edelim Bu, aşağıdaki şekilde basitleştirir. bana sadece geri dönelim benim Basit, basit paragraflar. benim styles.css geri dönelim. Ve sadece simple-- kullanmak için gidiyorum Google'da görmüş olabilir veya earlier-- hatırlayacaksınız Doğru metin hizalamak. Ve bu sayfayı yeniden yükleyin. Şimdi her şey görünüyor sağa hizalı olması, Burada havai görebileceğiniz olarak. Biz görünmesini sağlayabilirsiniz biraz daha gibi-kitap ve biz "haklı" diyebilirsiniz ve yeniden yükleyin. Şimdi güzel ve her ikisi de kare var tür güzel yanları. Biz burada vardı başka gol Metnin rengini değiştirmek oldu. Bu yüzden benim kırmızı metin ile gördüm. Ve şimdi bir form için düğmeler ekleyin. Peki neden tam olarak bunu denemiyorsun? Ama önce bana bir siteye gidelim o çoğumuz Google day-- her kullanın. Ve en az bir göz atalım nasıl Google aslında çalışır. Ama bunu yapmak için gidiyorum. Öncelikle beni yep bunu kırmızı alt çizgi yapalım, Önce Google'a gidelim. Ben gitmek zorunda gidiyorum Google Ayarları içine, Ben devre dışı bırakmak istiyorum çünkü bir şey Anında Sonuçlar denir. Yani fark etmiş olabilir Google, bu beni geri dönelim days-- ve bu açın. Ben aramaya başlarsa Yani Böyle "kediler" için, Sadece bunu değil fark Ben otomatik olarak tamamlamak olsun Üst, tüm ani bir sayfa kendisi da oldukça hızlı bir şekilde değiştirmek gibi görünüyor, ve Google'ın bir dil kullanarak var yardımcı olmaya çalışıyorum JavaScript denir. Ama ne yazık ki, bu tür Bizim tartışma messes Aslında neler olup bittiğini Burada başlık altında. Yani sadece biraz çabuk değilim anında sonuç kapatın. Ve ben Kaydet'i tıklayın gidiyorum. Ve şimdi ben açacağım tanı araç o ben Ağ sekmesi altında açılış tutmak. Yani bu yapalım. Benim, whoops-- edelim Biraz bu aşağı kaydırın. Ve bana aramak için izin "kedi". Ve şimdi notice-- aslında Bu iyi bir fırsat Bir an için görüşmek üzere. Bunu durdurmak type-- anı dikkat edin. Durdur şunu. TAMAM. Ben harfi anı dikkat C, ekranın alt izlemek. A- T- S. neler dibe yapar Bu ekranın, benim Ağ sekmesi, Her oluyor önermek zaman bir mektup yazın? Ne yazık ki, kurbağa çok olduğu rahatsız edici, bugün veya yonca ya da ne olursa olsun. Ne yazdığınız her zaman oluyordu? Ve bana silmenize olanak tampon ve yeniden yazın. Yani-- hoppala. Ben bir mektup yazın her zaman C- A- T- böylece yeni bir satır besbelli görünen tutar. Bu satırların her ne temsil ediyor, Gördüğümüz ve ele aldığımız dayalı şimdiye kadar? İZLEYİCİ: Bir arama? DAVID J. MALAN: Bir arama veya daha genel olarak, bir HTTP isteği sunucuya benim tarayıcı. Eh, neden benim tarayıcı bir HTTP yapıyor Her zaman ben bir mektup yazın talep? İZLEYİCİ: [Duyulmaz] DAVID J. MALAN: Evet, veriyor Bana bu otomatik tamamlama sonuçları. Gibi nerede bu yapmak Arama sonuçları geliyor? Eh, her zaman bir tip mektup, Google, daha gönderir ve daha fazla ve daha fazla Ben yazmaya çalışıyorum kelime. Niye ya? onlar bana bir vermek istiyorum çünkü Daha iyi ve daha iyi, daha iyi öneri, Ne kelimesinin için öneriler listesi, Aslında tam çalışıyorum. Yani bu tam anlamıyla her söylemek için karakter Google'da yazdığınız sonuçta içinde, gönderiliyor toplu, aynı zamanda bazen bir uygulamak için bir seferde Bu otomatik tamamlama özellikleri zaman veri web üzerinde, tabii ki vardır. Şimdi, aslında ne bir göz atalım Google Ara 'yı ne olur. Ve sonra biz bu kendimizi kaldıraç olacak. Çok şimdi aşağı doğru ilerleyin Yani eğer Sadece oldu ilk isteği. aşağıdaki dikkat edin. Bu oldukça uzun gönderildi URL-- https://www.google.com/search? ve sonra şeyler bir sürü. Şimdi aslında bu görelim tarayıcı sekmesinde kendisi. burada araç çubuğu kurtulmak edelim. İşte arama sonuçları sayfası. Ve ihbar burada URL. Şimdi, muhtemelen tahmin Ne kısmen burada oluyor. Bir tanım, tüm yüzden ilk. Bu görünüşte hedef Form nerede sunulur. Yani yazdığınız zaman Ekranda "kediler" ve Enter tuşuna basın görünüşe göre Google gönderdi Bu URL'ye benim metin girişi Ben vurgulanır ettik Orada, arama çizgi. bir URL şey olarak çıkıyor bir soru işareti sonra ne olur, diyerek tutmak gibi, bir anahtar-değer çifti Bu forma ya da bir şekilde yazıldığından iletilen Sunucuya tarayıcı. Yani herhangi bir zaman giriş tipi Web üzerinde bir forma biz ettik olarak ve gönderildikten Bir get yoluyla, tartışıyor, Bu sanal bir zarflar, içeriği evet envelope-- arasında tutmak Fiziksel dolması alıyorum sınıfta zarfa Bugün, ancak teknolojik aslında URL'ye koydu. Aslında Yani, beni bu aracılığıyla elemek edelim. Nerede kullanıcı girişi görüyorsunuz? Nerede bir şey görüyorum Kendimi burada yazdığınız? Yani "kediler." Evet Sağ? Bu yüzden bana bu damıtmak izin basit bir şey haline. Ben hakkında her şeyi silmek için gidiyorum Ben anlamıyorum bu URL, ve ben sadece terk edeceğim o paha olarak / search? q = kediler. Biz nerede q görürsünüz Bir an geliyor, ama bu asgari gibi hissediyor Ben verilen bilgilerin miktarı. Ve şimdi Enter tuşuna gidiyorum. Ve hala çalışıyor dikkat edin. Biz hala kedi bir sürü geri almak. Yani Google meraklısı olduğunu Bu daha bu gün. Bu 2016 değil 1999 olduğunu. Yani diğer şeyler var ki gözlerimi tarayıcı sunucuya gönderiyor. Ama bu minimal olduğu Bütün bu gerekli. Yani ne oluyor? Peki, ilk beni go ahead ve gidelim geri Cloud9 ve beni önde gitmesine izin ve önceki benim sekmeleri kapatın. Ve ben bu konuda yapacağım benim Sadece bir an için kendi. Ben devam edeceğim ve yeni bir dosya oluşturun. Ve ben google.html olarak kaydetmek için gidiyorum. Ve ben çok quickly-- gidiyorum Ben, aslında, çalacağım Bu metnin bazıları sadece zaman kazanmak için. Burada bu yapıştırmak için gidiyorum. Ben rahatsız etmeyeceğim Herhangi bir stylization bu sefer. Biz bu diyeceğiz "My Google." Ve ben kurtulmak için gidiyorum Vücutta her şeyin. Ve ben aşağıdakileri yapmak için gidiyorum. Beni yakınlaştırmak edelim. action-- Form ve kısaca belirtildiği gibi Kısaca şekilde whoops-- earlier-- Bir eylem, daha önce bahsedilen form veri göndermek yerdir. Yani google.com/search. Ve yöntemi kullanmak istiyorum iki şeyden biri olabilir. biz tutmak gibi ya "olsun" olabilir tartışırken, ya da olabilir "post". Şimdilik, temel Eğer kullanırsanız fark "olsun," dir tüm bilgileri kullanıcı URL'ye gönderilen alır sağlar. Bu arama gibi şeyler için harika motor ve bir kaç başka uygulamaları, ama ne koşullar olur Bir formu doldurmak istemiyor ve bilgi sonuna kadar var URL tarayıcınızın adres çubuğuna gibi? Ne tür belgeler siz-- yapmak İZLEYİCİ: [Duyulmaz] DAVID J. MALAN: Evet, ne gibi? İZLEYİCİ: Şifreler. DAVID J. MALAN: Evet, log böylece Facebook ya da bazı web sitesine giriş. Bu kullanıcı girişi var Bir form, bir metin kutusu, ama muhtemelen istemiyorum Tarayıcının URL gösterilmesini. Niye ya? Belki bazı vardır, yani Ağdaki güvenlik etkileri, ama gibi more--, daha basit, ne olur senin oda arkadaşı, diğer önemli, çocuklar, eşiniz görünüyor Tarayıcı tarihi boyunca? şifrenizi hakkı yoktur Orada tarayıcınızın tarihinin. Bu iyi bir tasarım gibi gelmiyor. Hatta daha teknik, Eğer çalışıyoruz varsayalım Flickr fotoğraf yüklemek için veya Facebook ya da wherever-- bu da, kullanıcı girişi nasıl interesting-- biraz daha var Ben URL çubuğunda bir görüntü tıkmak mı? Sen çeşit çeşit olamaz. Tür yapabilirsiniz. Ama, gerçekten, ben başarabilmiştir değilim bunu yaparken hayal etmek. Yani için başka bir yöntem gerekir Bir web sitesine fotoğraf yükleme, ve diğer bir yöntem "post" denir. Ama şimdi, biz sadece hakkında konuşacağım iki basit olan "olsun". Sadece koyar tüm URL içine kullanıcı girişi. Yani burada yaratıyorum formudur. Ben bir giriş istiyorum. Ve biliyor musun? Burada bir tahmin almak için gidiyorum. Ben hatırlamak gidiyorum benim giriş "q" "sorgusu." Ve ben bu biri olduğunu düşünüyorum özgün tasarımlar, belki de 1999. Bu girişin ardından tipi Sadece olacak "metin." Ve sonra başka bir giriş var gidiyorum Bu kadar biz yakında olacak, bir isim gerekmez türü olduğunu görüyoruz "gönderin." Ve bu gidiyor Bana özel bir düğme bulunuyor. Ve bu kadar. Bu yüzden bana go ahead ve bu dosyayı kaydetmek sağlar. Ben geri gidiyorum benim tarayıcı ve google.html gidin. Girmek. Ve bu seyrek tür kısaca söylemek gerekirse. Ama ben önde gitmesine izin ve arama "kediler." Ve ben şu anda olduğum fark Bu Cloud9 URL adresinde. Ama şu an ben bu tıklatın nereye ben bitireceğiz umuyorsunuz? İZLEYİCİ: Google. DAVID J. MALAN: Google. Yani Gönder'i tıklayın edelim. Ve gerçekten Google'ı yeniden uyguladık. Sağ? Bu basit değil. Bu hafif. Benim kod açıkça daha iyidir demek onların, karışıklık daha önce gördük. Ve biliyor musun? Ben biraz bu kadar baharat gidiyorum. Ben bunu daha önce söz vermedi. Başlık 1 için H1 gibi etiketleri vardır, Bir sayfaya en önemli başlığı. "Google," Ben bu arayacağım. Beni yeniden edelim. Zaten biraz daha iyi görünüyor. Ve aslında, biliyor musun? Ben yalan already-- ettik. Ben bu stil için gidiş değildi dedi, ama önce olduğu gibi bu stil için gidiyorum. Ve bedenim, olacak text-align merkezi, diyelim. Zaten daha Google gibi bakıyor. Ben, yine de, bir çizgi molaya ihtiyacı Bunun için düğmeye gönderin. Ve bu, çıkıyor paragrafları kullanabilir, ya da daha tam anlamıyla sadece söyleyebiliriz Bana mola br etiketi Doğuların bir çizgi verir. Ben bu yeniden Ve eğer şimdi oraya gidiyor. Biraz çirkin, bu yüzden Birden fazla satır sonlarını yapabileceğini, ama burada çok açgözlü olsun etmeyelim. Yani şimdi onun için çalışıyor bakalım "köpekler." O da "köpekler" için iş gibi görünüyor. Yani zorlayıcı paket burada ne var? Şehre için büyük bir sıçrama değildi Birkaç daha fazla etiket tanıtmak giriş etiketinde form etiketi gibi. Ama daha temelden olduğunu hepimiz yapıyoruz anlayışımızı yararlanarak olduğunu HTTP ve aslında formlar sonuçta değiştiren Tarayıcının URL ne var, ve böylece, bu nedenle, biz mekanik bir sunucuya girdi sağlamak Bir HTML formu yapmak ve bilerek Sunucu HTTP anlar, sadece bizim beden gibi, anlar gibi, elime sallayarak, aynı protokol, ve bu yüzden tepki geri almak sonuçta bekliyoruz. Yani birini yapmayı deneyelim son şey artık mobil ile, ve ben ekleyeceğim make-- edeceğiz slaytlar bu kodu. Eğer size tamircilik istiyorum yani eğer kesinlikle oradan alabilir. Ama gidiyorum önde ve bir şey yapmak. Ben devam edeceğim ve Benim endeks page-- açmak daha önce olduğu gibi benim merhaba sayfası, hangi Bu sahte Latince metin bir yeri vardır veya anlamsız Latince metin ve has-- Bu yazı tipi boyutu bu gibi görünüyor. Ama beni go ahead ve bu yapalım. Ben Cloud9 gitmek için gidiyorum. Ve bu adımı yapmak zorunda değilsiniz. Ben sadece kendim yapacağım. Ben paylaş tıklayın gidiyorum. Bu bir özelliktir Sadece Cloud9, bu sayede, bir Ben çevre, kamu yapabilirsiniz. Ve sadece uğruna gösteri, bunu yapmama izin ver. Benim uygulama kamuoyuna yapacağım. ben, beni uyarıyor dikkat Eminim, bunu yapmak istiyor Bu herkesi yapmak için gidiyor çünkü Dünyada, ister şimdi buradayız veya daha sonra video izlerken mümkün internet görüyorum ne olduğunu görmek için. Ama bu sorun değil. Ben söylemek için gidiyorum "Bitti." Ve eğer bilseydim, sana teşvik edelim Bu bana ilk test edelim correctly--. Eğer zihinli yoksa, devam edin Bilgisayarınızdaki bir tarayıcı, Bu URL'ye gidin ve umarım Benim Latince metnini göreceksiniz. Ve net olmak gerekirse, bu kadar benim laptop değil koşuyor. Bu bulut içinde. Bu, kelimenin tam anlamıyla, Cloud9 üzerinde ama Benim çalışma kamuoyuna yaptık böylece internet üzerinden herkes Benim Latince ana sayfa erişebilirsiniz. Aynı URL adresine gidin Telefonunuz, eğer sen-ebil. o, size rağmen, size mal olacak eğer Sadece bir omuz üzerinden bakabilirsiniz. İZLEYİCİ: [Duyulmaz] DAVID J. MALAN: Üzgünüm? İZLEYİCİ: [Duyulmaz] DAVID J. MALAN: Sadece Latince kelimeler. Bu kadar. Ama bu gördüğünüz gereken de budur. İZLEYİCİ: Evet. DAVID J. MALAN: Evet. Evet. TAMAM. Yani tutabilir senin Sadece bir an için telefon? Yani, umarım, erişiyorsanız o, neredeyse okunamaz bakmak gerekir. Bu demek still--, öyle değil Çünkü Latin okunmaz. Ama aynı zamanda okunamaz var Ne başka bir nedenle? Mesela, bu ne hakkında displeases? İZLEYİCİ: Bu küçük. DAVID J. MALAN: Bu süper küçük, süper değil. Peki bunu düzeltmek? Bu süper küçük, süper bulunuyor Victoria'nın telefonda ve, sen çekti verdiyseniz Muhtemelen o kadar kendinizi, Telefonunuzda küçük, hem de sürece Erişilebilirlik ayarları etkin olması. Bu da ne? Sadece çimdik olabilir ve uygulanabilir olduğunu zoom, ama o zaman sadece bakın Bir seferde birkaç kelime. Yani bir dakika bekleyin. Bunu düzeltmek için biliyorum. Sağ? Ben CSS kullanabilirsiniz, ve ben değişebilir 12-noktadan 24 noktaya yazı tipi boyutu. Ama bu yan etkisi, Tabii, şimdi olacak, Bir masaüstü veya dizüstü, şimdi metin iki kat daha büyük. Ve böylece bu tür güzel olurdu cihazlar arasında ayırt etmek için, ve orada çıkıyor Bunu yapmanın yolları vardır. Bir kaç tane var Farklı şekilde, aslında, CSS ve meraklısı özelliklerini kullanarak bu sayede biz büyük detaylı girmeyeceğim ki aslında sorgulayabilirsiniz tarayıcı ve söylemek Ekran bu daha küçükse Birçok piksel, bu yazı tipi boyutunu kullanın. Ekran bu daha büyükse Birçok piksel, bu diğer yazı tipi boyutunu kullanın. Hala bile meraklısı olabilir. Hiç ziyaret ettiyseniz bir Web sayfası, bir masaüstünde, belki kapalı büyük bir menüye sahip sonra yan ve tüm içeriği bu yan için Menü-- ortak bir paradigmanın türüdür. sol, içerik menüsü sağ, ya da tam tersi. ne zaman gerçekten mobil çalışmıyor senin Ekran geniş Sadece bu kadar çok piksel. mobil So daha yaygın, menü aniden alacak çöktü ve var Bunu görmek için bir düğmeyi tıklatın, veya web sitesi menüsü koyacağız ve üstünde altındaki içerik koymak. Ve bu uygulayabilirsiniz Çok çeşitli şekillerde işler. Sen programcıları sorabilirsiniz, hey, takım, her zaman Bir Android bir HTTP isteği bakın Cihaz, bir Microsoft aygıt, Google Cihaz, bir Apple cihazı, bu kullanmak yazı tipi boyutu, bu menü düzeni kullanmak ve yoksa bu varsayılan büyük düzeni kullanın. Şimdi kullanarak neler Temel teknik bugün mühendisler kullanabilirsiniz öyle olmadığını bilmek bir iPhone, Android telefon, bir dizüstü bilgisayar, Şirketin sunucu ziyaret masaüstü? Ki burada bu bilgiyi alabilirim? İZLEYİCİ: Üstbilgi? DAVID J. MALAN: Evet, HTTP üstbilgisi. Yani her HTTP isteği gelen müşterilerine kendi sunucularına Bu sanal içinde bulunmaktadır zarf, bir sürü HTTP başlıkları biridir tarayıcı ve işletim sistemi Hatta, size bakım eğer ayrıntı bu seviyede. Şimdi, bir şifreli görünümlü dize, ama Yazılım var olduğunu sadece olacak Bu basitleştirmek ve sadece sorabilirsiniz PHP, Java, C code-- programlama ++ neyse Ne telefon bu-- olduğunu kullanarak bu kullanıcı hangi cihaz nedir? Ve sonra onlara bu gösterebilir, diyebiliriz web sürümü bir telefon ise. Onlara bu sürümü göster Web sitesi bir dizüstü veya masaüstü eğer. Ama bile gerek yok sunucu tarafı karmaşıklığı. Sen şeylerin bile basit yapabilirsiniz. Bunu yapmak için gidiyorum. Ben içine önde gidiyorum Benim Cloud9 çevre, ve ben bir etiket eklemek için gidiyorum Daha önce Google gördüm. Bu meta denir. Ve ben bu yüzden, bu bir hiç hatırlamıyorum Ben burada uyarlamak için gidiyorum. Meta name = sonra "viewport" ve content = "width = aygıt genişliği, intital Ölçek = 1 "ve bu kadar. Bu yüzden de olabilir büyülü bir sözler gibi. Her şey açık değil, ama bu vardır bir şey, görünüm ile yapmak ve viewport bir sadece bir organdır web sayfası, dikdörtgen bölge olduğunu Sayfanın en tanımlar. Ve bu sadece anlatıyor tarayıcı, biliyor musun? Bu sayfanın genişliğini olun Cihaz genişliğine etkin bir şekilde eşit. Diğer bir deyişle, düşünmeyin sınırsız alan tür var. Yalnızca kadar olduğunu varsayalım cihazın kendisi kadar boşluk büyük. Ve şimdi, eğer ben bu yeniden Benim tarayıcıda, ben hiçbir değişiklik görüyorum. Ama bu correctly-- yaptıysam ve benim fingers-- çapraz izin Hepinize varsa telefonlarınızı yeniden, do you zorlayıcı bir değişiklik görüyor musunuz? Evet, ki- olduğunu İZLEYİCİ: [Duyulmaz] DAVID J. MALAN: Evet. TAMAM. Yani belki daha okunabilir şimdi? Hala küçük, adil olmak, ama değil kadar küçük yönetilemez olması. Ve ben kesinlikle bu geçersiz olabilir ayrıca CSS ile ya da sunucu tarafında, ama giderek sen neyi daha fazla özellik olduğunu görünce eklenen istemci tarafı environments-- JavaScript, biz ele alacağız olarak Yarın, CSS ve HTML-- böylece Bu sorguları tüm istemcide yapılabilir böylece rahatsız Sunucu çok daha az değil için, ayak uydurmak zorunda örnek, sabit saldırı Yeni işletim sistemi sürümleri, yeni tarayıcı sürümleri. Sadece tarayıcı sağlayabilirsiniz Cihazı sormak, sen ne kadar büyük ve daha sonra biraz mantıklı olun buna göre kararlar. Ama biz daha fazla fırsat göreceksiniz mantıksal kararlar için bağlamda yarın Bir programlama dili. Yani, herhangi bir soru, daha sonra, web geliştirme? Bugün web programlama, başına değil, Yaptığımız se beri her şeyi eğer sen, çok estetik oldu. hiçbir karar verme de vardır Biz yazdım kod, HTML biçimlendirme neden ve böylece var dil, bir programlama dili. Ama yarın alacağım hızlı bir bakış, sonuçta, JavaScript de, ki bu gerçek bir programlama Bize biraz daha fazlasını sağlar dil. Sorusu olan? Peki, bana iki teklif izin ödev için isteğe bağlı fırsatlar. Bunlardan biri Cloud9 bu-- hesapları sona olmayacaktır. Kullanmak için buyrun Onları ile tamircilik. Bu hizmet ücretsiz seviye bulunuyor. oluştururken, bu Gerçekleştirmek Çalışma alanı, sen, kamu yapılmış Bu konuda kimseyi demek İnternet yazdıklarınızı görebilirsiniz. Yani belki sadece düşünün Kendini rezil değil Eğer ilk web koyarak eğer kamuya yanlışlıkla orada sayfa, ama kimse gidiyor Zaten orada bakmak için biliyorum. Ve beni atmak izin iki-- yanı sıra bu URL yukarı, Bugün a geldi özellikle , Diğerlerine göre daha az konforlu küçük Bütün bu şeyler ne anlama geldiğinden emin. Bu videonun çok daha fazla fark hangi uykuya dalmak için iyi bir yol hem ve ayrıca süre gülmeye Ayrıca, bu yüzden yapıyor toplumsal olarak ilginç bir sürü ve güvenlikle ilgili tartışmalar burada John Oliver dan, bir komedyen olsa. Ama başka soru varsa, Bu alımı için bize getiriyor. Öyleyse neden müzik açmazlar. içecekler olmalı dışında ve aperatifler. Ben için karıştırmak için mutluyum millet istiyorum sürece, tek-tek soru daha cevap. Ama aksi halde, buyrun herhangi bir noktada çıkarmak, ve biz tekrar göreceğim biraz daha için yarın sabah. Tamam, teşekkürler.