>> [MÜZİK OYUN]
DAVID J MALAN: Pekala, tekrar hoşgeldiniz.
Bu CS50 olduğunu.
Bu haftanın yedi sonudur.
Ve bu toplayıcı sonu sorunu avı dört set
Hatırlayacağınız olabilir.
Tüm kurtardıktan sonra personelin bu JPEG,
Eğer isterseniz size, meydan edildi gibi birçok kendinizi fotoğrafını çekmek
Mümkün olduğu bu millet.
Biz gönderimler bir sürü var Son birkaç hafta içinde,
Gerçekten, epeyce sağ öğleden önce Günümüzde, bazıları burada olanlardır
Annenberg da-- görünüyor in-- burada yakalandı Burada ofis saatlerinde Salon, bir
Nick ile Lowell House.
İşte Ramon telefonda yakalandı ediliyor.
Bu CS50 öğle yemeğinde oldu.
Bu Jason ile Skyping oldu Bir daha yaratıcı sınıf arkadaşı,
kim ona bu şekilde aradı.
Biz bu ne bilmiyorum.
>> [KAHKAHA]
>> DAVID J MALAN: Ama bir gigabayt değer.
İşte Chang, kim kelimenin tam anlamıyla sahne kaçtı
bir fotoğraflandı önlemek için gün, ama sonunda yakalandı.
İşte Nick.
Ve burada Alison aşağı alanlar gereğidir.
Ve Zamyla bile bulundu Bir balo salonu yarışmaya.
Bu yüzden geçeceği Bu fotoğraflar, anlamaya
kim sunulan en erken ve ödül
bir muhteşem ödül olarak spec vaat.
Ve biz de yaklaşık takip edeceğiz karıştığını alanı.
>> Announcements-- yüzden öğle bir çift Yine, 13:15 bu Cuma.
Bize katılmak isterseniz, Burada bu URL'de RSVP.
Jason birinden burada tekrar belirir yıllık bölümlerinin bir çift
geri, hangi oldu Halloween üzerine düşmesine.
Ve gerçekten de, o gibi giyinmiş o yıl kabak.
Bu bölüm izle varsa onun ile ilgili 2011 bölümün
Sekiz, sen merak eğer, CS50.tv de, sanırım
Bu yıl hangi Onun hava pompası çalışıyordu.
>> Eğer izlersen 2012 yılında benzer bir bölüm,
Eğer, çok sönük bu Jason görürsünüz takım artık görev beri,
Hangi demek sadece Bu Cuma, şimdi etsen eğer
Daven ile kabak bölmek istiyorum ve Gabe ve diğerleri, kafaları RSVP
cs50.harvard.edu adreste.
Bu çok eğlenceli olacağa benziyor.
Daven, biz söylendi, oyulmuş olan konum Hayatının bütün kabaklar.
Brezilya Gabriel asla var Cadılar Bayramı için bir kabak oyma.
O öğrenir Yani onlarla birlikte orada olacağım.
>> Seminerler, meanwhile-- böylece yakında öğreneceksiniz
ne hakkında bizim beklentileri içindir Nihai proje, hangi temelde
aşağı kaynatın olacak tasarlanması ve uygulanması
ilgi herhangi bir proje için en onayına tabi olsa sen,
ve öğretim görevlisi gelen rehberlik.
Sonuna doğru yarıyıl, bir dizi tanıtmak
İsteğe bağlı sınıfları seminer, öğretim arkadaşlarının ve Harvard liderliğindeki
Personel, karşısında elbette arkadaşlar çeşitli konularda kampüs, bu
teğet olan dersin yatan izlence
ama yine de uygulanabilir, eğlenceli, ve Potansiyel nihai projeler için farklı.
>> Örneğin, ilk, eğer isterseniz Oradaki URL'ye, baş kayıt.
Ve bunun için sanatçısını olduğunu yalnız bu yılki seminer.
Ama biz onlarca var farkındalar yıl geçmiş seminerler, bütün bunlar
Seminerler menüsünde bağlantılı dersin web sitesinin seçeneği.
Eğer düşünüyorsanız Yani eğer konfor bölgesi ötesine gidiyor
ya da bazı yeni beceriler toplayıp, Örneğin, iPhone programlama
Swift, yeni bir dil ile uygulamalar Apple veya Objective-C
veya Android uygulamaları veya programlama [? istaka?] ampulleri, ya da konulardan herhangi
Burada ve daha nedeniyle check up kayıt sayfası üzerinden.
>> Yani biz başladı ve sonuçlandırılan HTTP bakarak Pazartesi.
Yani hızlı refresher-- HTTP, Hiper Metin Aktarım Protokolü.
Ama bu gerçekten ne anlama geliyor?
Gerçekten ne anlama geliyor?
Bu bir el mi?
Ben sadece başınızı tırmalamak biliyorum.
Ama HTTP ne önermek istiyorum?
>> İZLEYİCİ: Nasıl bilgisayarlar [duyulamaz] ile iletişim.
DAVID J MALAN: Ben son bölümünü kaçırdım.
Şarkı söylemeyi kes bilgisayarlar iletişim nasıl
>> İZLEYİCİ: İnternet sunucuları.
DAVID J MALAN: internet Good-- sunucular, ve özellikle, web sunucuları.
Hatırlama Çünkü, bir demet var internet hizmetleri, bazıları
Eğer sohbet arasında günlük muhtemelen kullanmak ve mesaj, sohbet ve web ve e-posta,
ve benzeri yer alır.
Ve HTTP sadece bir protokol web tarayıcıları ki
ile iletişim kurarken konuşmak Web sunucuları, ve tersi.
Ve analogun İnsan dünya olabilir
Bazı sallamak elimi uzatmak diğer insan en ve o
uzatarak kabul onun ya da onu eli de.
Yani bu sadece bir protokol var, sözleşmelerin bir dizi.
>> Ve bu sözleşmeler gerçekten ne?
Peki, sadece aşağı kaynar ileri ve geri mesaj gönderme,
biz burada gösterildiği gibi.
Ve yollar bir çift var var hangi Bu mesaj gönderebilirsiniz.
Ve belki de en ortak olsun olarak bilinir.
Ve biz bir kontrast görürsünüz Bu uzun önce.
>> Ama tarayıcıdan bir get isteği sunucuya sadece bu gibi görünüyor.
O koyar metnin bir demet var sanal bir zarfın içinde.
Bu zarfın üzerine Ayrıntılar birkaç adet gidin.
Ne gitmek gerekiyor zarf, yani, konuşmak
gibi bir isteği elde etmek için Bir web sunucusuna benden bu?
Evet.
>> İZLEYİCİ: IP adresiniz.
>> DAVID J MALAN: My IP adresi Kimden alanında, tabiri caizse,
ve tabii ki, Alıcının IP adresi.
Ama bir web paket halinde, Biz biraz daha ayrıntı gerekir
Sadece yeterli değil Bir sunucuya bir zarf göndermek,
bu sunucu olabilir çünkü farklı türleri için dinleme
İnternet trafiğinin.
Peki başka ne ihtiyacımız var Alıcının IP dışında?
Evet?
>> İZLEYİCİ: TCP mi?
DAVID J MALAN: İyi.
TCP--
>> İZLEYİCİ: Adres.
>> DAVID J MALAN: Adres, ya da denir liman olarak.
Yakın, ancak TCP port numarası.
Ve bu bir demet var.
Ama kesinlikle en tanıdık olmalıdır sonunda
Varsayılan hangi, 80 olacak bir web trafiği için de kullanılır.
Ve bir başka tanıdık biri yakında 443 olacak
hangi güvenli web için kullanılır Trafik, https ile başlayan URL'ler.
>> Peki bu gider ne Bu zarfın içinde.
Ve olsun / Sadece vermek anlamına gelir Beni varsayılan web sayfası.
Bana sert kök ver Bu web sunucusu üzerinde sürücü.
Ve umarım, web Tamam, ile cevap verecektir sunucu
sadece ve sayı 200, evet, hepsi, diyerek bir kongre
Gerçekten Tamam.
İşte sayfası var.
Web sayfasının tipi gidiyor Metin, ama daha özel olarak ise, HTML
hangi biz geri dalmak üzereyiz.
Ve nokta nokta sadece dot araçlar, burada HTML.
Ve bu nerede biz Bugün hikayeyi pick up,
Aslında, HTML yazma Köprü Metni Biçimlendirme Dili, hangi
bir dil olduğu web sayfaları yazılır.
Bir programlama dili değil.
Hiçbir fonksiyonlar var ya da halkaları ya da koşullar.
Bu bir biçimlendirme dili var, de bugün tekrar bakın,
Bu sizin belirlemenizi sağlar yapısı ve stilize nasıl
estetik bir web sayfası.
>> Yani bu bir oldu ve sadece sayfa biz gerçekten
kısaca eğer Pazartesi günü, baktı.
Ve bir kaç fark göze çarpan özellikleri.
Açık açılı bir sürü var braket ve yakın açılı ayraç.
Bu açılı Arasında parantez kelimeler.
Ve biz başlatmak için gidiyoruz bu kelimeler etiketleri arıyor.
Yani açık dirsek kafa ve kapalı dirsek kafa
açık ve kapalı etiketleri, veya başlangıç ​​ve bitiş etiketleri
sırasıyla, bir HTML elemanı, biz arayacağım gibi, kafa çağırdı.
Ve aynı jargon geçerlidir HTML ve benzeri gövdeye.
>> Ve ne güzel olduğunu HTML-- ve gerçekten, biz olacak
Bunun üzerine korkunç az zaman harcamak, Eğer çoğunlukla sadece anlamaya olacak çünkü
ne o özellikleri sizi vardır aslında somut bir sorun var
Eğer bulacaksınız solve-- için Bir tarayıcı oldukça aptal.
Sadece farklı değil sanıyor- gidiyor Yapmanız bunu söylemek ne computer--.
Ve böylece açıkken çok üstünde dirsek, HTML
Orada, o aslında Sadece demek, hey, tarayıcı,
Burada HTML ile yazılmış bir web sayfası geliyor.
>> Açık dirsek gördüğünde Sadece anlamına kafa,
Hey, tarayıcı, burada kafa geliyor, ya da benim web sayfasının en üst kısmı.
Kapalı bir ayraç gördüğünde Sadece hey, demek kafa,
Bu kafa için var.
Başka bir şey için bekleme.
Ve başka bir şey değildir görünüşte vücut olacak.
Ve bir etiket gibi yoksa zaman Eğer, sadece merhaba, virgül, dünya var
bu sadece ham metin olacak ki sonuçta ekranda görüntülenir.
>> Şimdi, sen de fark edeceksiniz Burada girinti.
Muhtemelen çıkarabiliriz nasıl bunu stylizing ediyoruz.
Ben bir etiket her açtığınızda, tabiri caizse, ben girinti.
Ve her zaman kapatın Bir etiket, ben un-girinti,
kaşlı ayraçlar ruhu benzer.
Ve bunun ötesinde, ben tür değilim Benim yargı kullanarak.
Ben isabet rahatsız etmedi Bildirimi Bu başlık etiketi içinde girin.
Neden?
Eh, ben sadece bir baktım karar Bana biraz daha temiz, insan,
sadece yapıyor rahatsız değil.
Yani yine, orada bazı yargı sadece aramaları
gibi C veya herhangi bir dilde yoktur.
>> Ama haber çok bu girinti Bir zihinsel modeli kendisini ödünç,
değil bunu zorlaştırmak fazla olmaktadır.
Ama bir ağaç, değil mi?
Bir web düşünüyorsanız sayfa, görünüşe göre yazılı
Bu gibi olarak güzel, bu şekilde girintili
neredeyse açık dirsek düşünebilirsiniz HTML kapalı dirsek etiketi demarcating olduğunu
Bir düğümün kök, bir aile ağacı ağaçların tarzında tarzı düğüm
Geçen Cuma baktı.
>> Ve gerçekten, biz burada sağda var Biz DOM, D-O-M, belge arayacağım ne
nesne modeli, diyerek bir fantezi yolu Bu HTML temsil eden bir ağaç.
Ve HTML olduğunu fark, biz söyleyeceğim Bir aile ağacı, iki çocuk gibi.
Sol tarafta başıdır.
Sağda organıdır.
>> Ve sadece bir akılsız düşünce egzersizi olarak, Baş, elbette, kaç çocuğu var
Bu yapıya göre,?
Yani sadece bir, title-- Elimizdeki bu yüzden ve bu var
başlık baş giden ok.
Yani bu kişi sanki bulunuyor Aile ağacı sadece bir yavru vardı.
Ve sonra başlık kendisi can de bir çocuk sahibi olmak söylenebilir.
>> HTML olduğunu hatırlayın merhaba, virgül, altındaki dünya.
Ve ben sadece bir içinde boğuldum yerine dikdörtgen, oval, sadece
Bu halde semantik iletmek o yüzden konuşmak, ağaçtaki bir düğüm var,
bu tür temelden farklı.
Bu bir etiket değil.
Ya da daha doğrusu, bir unsur değil.
Eğer sen bu, sadece bir metin düğümü var.
Ancak bu tamamen keyfi insan sözleşmeler.
Bu sadece şimdi benim yolu Bir agrega olarak ne ben olacak temsil
Belgeyi diyoruz.
>> Ve bir kenara, bir şey gibi en Süper sol üst köşesi,
Açık dirsek ünlem doc tipi, HTML, bu, bir etiketi gibi görünüyor
ama aptal köşe durumda nerede Bu sadece orada, kopyalanan ve yapıştırılan olduğunu
tarayıcılar belirtmek için Bu HTML versiyonu 5'tir.
Dünya ne sürekli değişiyor Bir sayfada kodun ilk satırı olmalıdır.
Bu sadece sürüm 5 anlamına gelir.
Yani oldukça yok diğerleri gibi görünüyorsun.
>> Bu öylesine Pekala, Şimdi takdir edersiniz, dedi
Bu oldukça bu aptal dövme birisi var.
>> [KAHKAHA]
>> DAVID J MALAN: Pekala, ve şimdi aslında dalış yapalım
Bu bir şey yapmaya.
Bunu son kez Hatırlayacaksınız Ben CS50 Appliance açtı
ve ben bir şey yaptım açılması gedit gibi basit.
Ve ben bile dosyayı kaydettiğiniz Benim desktop-- hiçbir special--
hello.html olarak.
>> Peki bana bunu izin again-- hello.html girin.
Ve şimdi bu dosyada, ben gidiyorum go ahead ve çoğaltmak ne sadece
Ben-- doc tipi html Sonra ben gidiyorum Açık dirsek html kapalı dirsek yapmak.
Ve sonra ben preemptively gidiyorum açmak ve etiketi kapatın.
Neden?
Sadece bu yüzden daha sonra unutma.
Bu açılması gibi, sadece iyi bir uygulama var ve tek seferde kapatma küme ayraçları.
>> Ve sonra ne sonraki geldi?
Sen dövme düşünebilirsiniz.
>> İZLEYİCİ: kafa.
>> DAVID J MALAN: Baş.
Ve sonra burada, ben başlığı vardı, sanırım.
Ve başlık, keyfi oldu merhaba, dünya yakın başlık.
Ve sonra buraya, vücut, ve elbette-- sonra vücut etiketi kapatın.
Ve sonra sadece biraz Yedekli, Ben buraya aynı şey vardı.
>> Yani bu bir web sayfası olduğunu iddia ediyor.
Bu bir şey olduğunu Şimdi web üzerinde yaşayabilir,
Hatta tabii rağmen, tam anlamıyla var Şu anda benim masaüstünde yaşayan.
Ancak gerçekten, bir gEdit en aza indirmek eğer Ben masaüstünde simgesi görürsünüz.
Bu cihaz olsa da, Mac OS bu yapabileceğini
TextEdit olmayan veya Hatta Not Defteri Windows.
>> Ve ben go ahead ve eğer çift tıklayın bile, ve select-- iyi, diyelim
çünkü seçmeyin Krom açılış değil.
En go ahead ve Chrome'u açalım.
Ve sonra komut-O açık yapmak Ve benim masaüstüne gidin
ve bu dosyayı açın.
Bir tarayıcı nasıl yorumlayacağını budur HTML, alt üst, soldan sağa.
Hey, tarayıcı burada HTML var.
İşte kafa.
İşte başlık var.
İşte vücut.
Ve gerçekten de, bu nasıl bu web sayfasını oluşturur.
>> Ama URL'yi dikkat edin.
Hiçbiriniz bu spesifik yukarı çekin şu anda dizüstü sayfa,
Hatta içinde edin Bu URL yoluyla cihaz,
dosyanın nedeniyle: // aslında olduğunu gösterir Benim dosya sisteminde, benim sabit disk,
senin değil.
Yani bu tüm bu yararlı değildir.
>> Şimdi doğru hareket edelim gerçek bir web sunucusu kullanarak.
Ve CS50 Appliance çıkıyor Sadece bir ortamda nerede daha fazla
C kodu yazmak ve derlemek Eğer yapıyorum gibi ve çalıştırın.
Ayrıca tarafından yapılandırıldı Personel tipik bir web temsil etmek
internette var sunucu, sen ödemek için olabilir bir
Sözde bulut öyle ya da bir.
>> Ve çalışıyor Standart ücretsiz açık kaynak kodlu
Yazılım, örneğin, bir şey belki de denir Apache,
hala en popüler web Dünyada sunucu yazılımı
web siteleri binlerce bugün kullandığımız söyledi.
Ve o da, hatta sahiptir MySQL gibi yazılım,
hangi bir veritabanı sunucusu biz sonunda alırsınız ki,
Hangi demek sadece Ben tedavi başlayabilirsiniz
tam teşekküllü sunucusu olarak benim cihaz ben başka bir yerde ödeme değilim.
Sadece benim kendi laptop yaşıyor geliştirme ve kolaylık sağlamak amaçlı.
>> Yani öncesinde gidelim ve Bu yararlanın.
Ben önde gitmek için gidiyorum ve Bir terminal penceresi açın.
Ve ben önde gitmek için gidiyorum ve İlk ben, aslında move--
Benim masaüstüne gitmek için gidiyoruz.
Ben ls yaparsanız, hello.html var.
Ve ben gidiyorum önde ve kullanmaya başlamak
biz ettik, yeni bir dizin Bugün önce kullanılmaz.
>> Hello.html-- ben hareket edeceğim Sanal hosts-- için ../vhosts için
Daha sonra future-- ve bu konuda daha fazla localhost adlı bir dizine,
Neredeyse verilen takma hangi herhangi bir bilgisayar, bir Mac, PC olsun,
Linux bilgisayar, ve sonra ya Özellikle bir dizine ki,
Personel zaten sizin ne için yaratılmış Aradığınız cihazı indirilen
Kamu.
Ve onun adını, bir şey anlaşılacağı gibi Ben, teoride, bu klasöre koymak
Şimdi olacak Kamu, en azından insanlara
doğrudan kim Benim bilgisayar bağlantısı.
>> Peki şimdi beni önde gitmeme izin ve aynı dizine cd yapmak
bu yüzden ne görebiliyorum oluyor ve tipi ls.
Ve gerçekten de, işte Orada tek şey.
Şimdi ben bu koyduk, çünkü iddia Bir dizinin içinde hello.html dosya
Bir dizinin kamu içinde denir Bir dizinin içinde denir localhost
adı vhosts, burada CS50 personeli sayesinde
olmak üzere önceden konfigüre edilmiştir web sunucusu kök,
Ben şimdi umarım bu yapabilirsiniz.
>> Yeni bir sekme açmak için gidiyorum.
//: Ve ben dosya değil gideceğim.
Ben gerçek kullanmak için gidiyorum http / localhost, burada
Yine, takma addır Kendi sunucu için.
Ve sonra ben gitmek için gidiyorum ne dosya adı, sadece temiz olması için?
Bu hikaye muhtemelen nereye gidiyor?
hello.html.
>> Yani diğer bir deyişle, ben şimdi bu istiyorum Kendi bilgisayar, benim kendi cihaz, bir
gerçek bir sunucu var sanki.
Onun takma localhost edilir.
Ama localhost düşünüyorum gibi Facebook.com google.com, ne olursa olsun.
Bu sadece benim yerel isim.
Ve sonra ben istiyorum finalde ise Sabit diskin kök, yani, konuşmak
veya web sunucusu kök, Daha sonra eğik çizgi ergo ve
dosya adı hello.html.
>> Beni uzaklaştırmak ve Enter tuşuna basın edelim.
Ve gerçekten de, şimdi benim web sayfası var.
Yani biraz farklı.
Ve bu sadece underwhelming olarak var.
Bu eski versiyonu.
Bana geri yazı küçültmek edelim.
Bu eski.
Bu yeni.
Ama temelde ne oluyor Şimdi HTTP kullanılıyor olmasıdır.
>> Şimdi bu biraz daha net veya yapalım, Biraz daha karmaşık, eğer sen.
Beni sağ alt gidelim Benim cihazın köşesinde.
Ve tüm bu fark Zaman, bir dizi oldu.
Bu benzersiz adres senin CS50 Appliance.
Bu, özel bir adres var 172,16 ima ettiği,
hangi sadece sadece fiziksel anlamı Bu web sunucusuna erişebilir.
Her şey güvenlik duvarı ve güzel geri kalanı korunmaktadır
Çünkü bu dünyanın hitap.
Ben gidersem >> Ve şimdi olsa fark benim cihazda bu adres,
ancak Mac OS-- ben gidiyorum Buraya geri dönmek için.
Bu artık benim Mac.
Ve şimdi açmak için gidiyorum Burada Chrome'un bu sürümü.
Ve ben http gitmek için gidiyorum: //172.16.25 / Ve ben rest-- 133 unutma.
>> Yani benim Mac ziyaret edeceğim Bu IP adresi girin /hello.html.
Ve şimdi benim Mac görmek Benim CS50 Appliance ki, kim
IP adresi olduğunu sayı, gerçekten davranıyor
internet üzerinde bir web sunucusu gibi.
Bu güzel kolay yok Facebook.com gibi adını hatırlıyorum,
ama HTTP kullanıyor görünüşe göre, olsa Krom
tür dünyasını basitleştirilmesi olduğunu Bizim için ancak HTTP bize gösteren değil.
Ama bu gerçekten tam olarak bu.
Krom sadece bazı tasarruf bu gün tuş vuruşlarını.
Ve biz şimdi bakın ne.
>> Yani güzel ve iyi hepsi.
Ama oldukça underwhelming sayfası var.
Beni gidip bir şeyler yapalım Şimdi biraz farklı.
Bu yüzden bana gedit geri dönelim.
Ve yerine merhaba arasında, Dünya, en bir görüntü koyalım.
Ve ben gitmeme izin before-- gelen talep Benim localhost dizin halkın içine.
Ve beni go ahead ve bir kopyalama izin Bugünden itibaren dosyaların sürü
Benim Dropbox klasörüne buraya takın.
Ben ls yazarsanız >> Şimdi, bak Tüm bu dosyalara
Ben tarafından dağıtılan ettik bugün önceden dersin web sitesini,
biri hala hello.html olduğunu.
Yani bu bir var.
Ve bu aptal bir hatırlama Son seferinde-- cat.jpg gelen.
Bu yüzden bana embed deneyelim Benim web sayfası içinde cat.jpg.
>> Ben önde gitmek için gidiyorum ve, cat.jpg yapmak kaydedin.
Bana Chrome geri dönelim.
Ve bana yakınlaştırmak izin yazı tipi ve şimdi yeniden.
Üzgünüz, bu nereye koydu?
Standby-- ben hala eski var Benim masaüstü açıkken sürüm.
Yani benim, benim Sankon içine gidelim localhost, benim halk ve hello.html.
Yani şimdi beni önde gitmeme izin ve vücudun içinde cat.jpg demek
Ben istiyorum nerede olmak görüntülenir ve yeniden.
Tabii ki, bu doğru değildir.
>> Yüzden biraz tarayıcı söylemek gerekir daha bilinçli ben bunu yapmak istediğinizi.
Sadece adı yazarak Açıkçası yeterli değildir.
Yani başka olduğunu hatırlamak etiketi, görüntü, kısa img.
Bu sadece insanlar için var tipi tam kelime sevmiyorum.
Ve sonra = "cat.jpg" kaynak yapabilirsiniz.
>> Ve şimdi ben yapacağım Burada bir şey farklı.
Hatta tüm rağmen Bizim etiketleri bugüne kadar var
Bir bu kavramı vardı başlangıç ​​etiketi ve bir bitiş etiketi,
gerçekten yapmaz Bir görüntünün duygusu, değil mi?
Bir görüntü ya var ya da yok orada.
Ve böylece insanlar gelmiş basit bir kongre ile.
Bir etiketi varsa o can hem başlatıp aynı olan Zamanın sona
o yüzden sadece speak-- için, boş olabilir etiketinin içine eğik çizgi koymak
en sonunda.
Şimdi benim tarayıcıya geri dönelim.
Sayfaya Lanet, bir terslik var Hit.
Muhtemelen bu gördüm bazen web üzerinde,
bile bu senin hatan olmadı.
Bu web sunucunun suçu.
Ne gazeller bu işaret ediyor?
Bu kırık.
Görüntü nereye ait olduğunu.
Evet?
>> İZLEYİCİ: Ama öyle değil görüntü erişimi vardır.
>> DAVID J MALAN: Bu değil görüntü erişimi vardır.
Yani, ya da daha kötüsü, belki o bile yok.
Biz teşhis edemez görelim.
Son kez hatırlayın eğer Chrome'da, cihazda,
hatta sizin Mac veya PC üzerinde, Eğer Geliştirici menüsüne gidin
ve Geliştirici Araçları gitmek seçenek, muhtemelen ettik
çok değil ya şimdiye kadar kullanılan.
Ve ben Ağa gidersem ve sayfayı yeniden yükleyin,
en aslında HTTP bakalım yapılıyor istekleri.
Hello.html gibi >> görünüyor gerçekten Tamam, dolayısıyla 200.
Ama cat.jpg 403 olduğunu.
Yani bir 404 değil.
Dosya muhtemelen var.
403 yasak anlamına gelir.
Yani bu biraz kafa karıştırıcı.
Geri dönmek için gidiyorum Benim Terminal penceresine.
Beni buraya yakınlaştırmak edelim.
Ve bana bir ls yapalım.
Bu aynı dosyaları var.
>> Şimdi bana bir ls-l yapalım, muhtemelen ettik hangi
dosyaya bakmak için daha önce kullanılmış boyutları, belki veya damgaları.
Ve biz bir sürü görmek ezici bilgiler.
Ama birkaç ayrıntı dikkat edin.
İşte hello.html bu var Burada kürek ve burada cat.jpg var.
Ve bu varlık sadece cihaz var JPEG en vurgulayarak kullanıcı dostu
Bu gibi mor.
Ama başka ne yanında farklı dosya boyutu ve dosya adı?
>> İZLEYİCİ: [duyulamaz].
DAVID J MALAN: Evet, var burada üzerinde iki R.
Hello.html oluyor ne dikkat edin.
Bu yüzden adı çıkıyor Bu dizin kamu önemlidir.
Bu dizindeki şey Kamu olması gerekiyordu.
Ama yeterli değil sadece orada dosyaları bırakmak için.
Ayrıca değiştirmek gerekir dosya modu
izinlerini değiştirmek Dosya proaktif değil
Varsayılan ayarı olacak, hangi sadece okudum olmasıdır
ve ben sahibi olmak, yazmak.
Ben bütün dünya herkes için istiyoruz tabiri caizse, benim dosyayı okumak mümkün.
Sadece görüntülemek anlamına gelir oku.
>> Ve gerçekten de, gibi sorun görürsünüz yedi set, ne bu R'ın ortalama var.
Bu iki R'ın ortalama herkesi izin dünyanın başka da, okumak
Özellikle şimdi Bu dizinde var.
Yani bu düzeltmek için en basit yolu ise Benim istemine gidin ve değişim için chmod yapmak
modu ve daha sonra, tamamen, bir + r yapmak Herkes, okuma, tüm artı r,
ve daha sonra cat.jpg girin.
Hiçbir şey, ne gibi görünüyor Genellikle iyi bir şey demektir.
Şimdi again-- Yani ls-l en cat.jpg bakalım.
Ve bu izin değişmiş gibi görünüyor.
Gibi bir kenara, yaparsanız bir hata ve, örneğin,
Sadece deneme biliyorsun-- yok Senin- yapılan kamuya kaza erişilebilir,
Eğer tersini yapabilirsiniz, bir-r chmod.
Açıkçası olsa, o olmamalı Kamu dizinde
Zaten bu endişe eğer.
>> Peki şimdi en geri dönelim Benim tarayıcı ve yeniden.
Ve ben tıklayın gidiyorum Küçük Hayalet Avcıları
sembolü o kısmını temizlemek için Ekran yüzden yeni istekleri görebilirsiniz.
Ve gerçekten de, burada Önce gelen grump Kedi.
Ama daha da önemlisi, Teknik olarak, orada
numara 200, burada biz Tamam var demektir.
Pekala, böylece ince ve iyi hepsi.
Ama biz yapmıyoruz web sitelerinin en iyisi,
ne de çok zor denemek için gidiyoruz web sitelerinin kıyafet bugün yapmak.
Ama en azından bir şey yapalım tehdidi önce süper tanıdık
Birkaç diğer etiketleri kapalı.
Ben sadece burada bir kediyi istemiyorum varsayalım.
Ben aslında bu istediğinizi varsayalım Kedi şey bağlamak için.
>> Ben belki, örneğin Böyle bir şey yapmak.
çapa href bir hiper referans equals--
ve en adil bir şey yapalım www.google.com yakın gibi
yakın desteğini alıntı.
Ve şimdi Kediler için arayın.
Kapat çapa etiketi.
Yani bu sadece bir tür vardır bir temelde yeni detay.
Tabii etiketi, farklı.
Bu çapa için ad var href veya hiper referans.
>> Ama daha da önemlisi, orada Burada bu sözdizimsel özellik.
Bu bizim arayarak başlayacağız ne bir etiket, ama bir nitelik.
Ve bir nitelik şeydir Bir etiketin davranışını değiştirir.
Ve bu özellik, href, araçlar Bu çapa davranışını değiştirmek
bu tıklandığında böylece Burada bu URL'ye gider.
Ve tabii ki, bu URL Google'ın.
>> Bu arada, bu ne olacak burada metin?
Peki, bu olacak ne insan aslında
Altı çizili olarak görüyor bağlantı, o kadar basit.
Yani bu deneyelim.
Bana kurtaralım.
Ben hello.html hala yaşıyorum.
Ama çevrimiçi sürümlerinde, göreceksin Biz gerçek dosya adları önceden hazırlanmış.
Beni go ahead ve yeniden edelim.
Ve şimdi çok var Hala underwhelming sayfa.
Ama üzerinde gezdirin eğer orada-- ve biraz küçük
ama- Eğer alt görebilirsiniz Ekranın sol köşesinde,
gerçekten google.com gidiyor.
Bunu tıklarsanız Ve, o olacak Bana gerçek Google'a yol fırçalamak.
>> Ama burada bir fırsat fark Sadece bir kenara olarak sömürü,.
Ve diğer geri geleceğiz uzun zaman önce güvenlik sorunları.
Bu ikilemi var çünkü gitmek ve ne demek nereye arasında,
Eğer böyle bir şey yapabileceğini bu-- http://www.google.com.
Tamam, şimdi ben yeniden, eğer Bu sayfayı kaydettikten sonra,
Google'a gidiyorum gibi görünüyor.
Ama hiçbir sebep yok ben Doğru, Google gitmek zorunda?
Aslında böyle bir şey gidebiliriz badguy.com, buraya sayfayı yeniden yükleyin.
Ve haber, hala Google gibi görünüyor.
Ve ben keskin değilim sadece Burada üzerinde gezdirin yeterli
Ben bile gidiyor görüyorum farklı bir konuma gidin.
>> Hiç kazanılmış ettik Yani eğer Bir e-posta, özellikle
PayPal itibaren bir ya da görünüşte Paypal
Seni soran oturum Hesabınıza, bu
neden asla gerekir Hiç E-postalardaki bağlantıları tıklayın
açıkçası, e-postalar herhangi bağlantıları.
Eğer biliyorsanız gerçek var Paypal veya banka para
Amerika veya Fidelity veya bunların herhangi birinin Web sitesi, elle yazın.
O ne kadar kolay bakmak Çünkü sunulması halinde birisi kandırmak ne
Bir bağlantı gibi görünüyor.
Ama aslında olabilir Kesinlikle bir yere gitmek.
>> Ve çok daha büyük var Bu daha tehditler.
Aslında, bu biraz bir teğet şimdi, ama bir
En iyi olanlar şimdiye kadar gördüğüm hangi beri, kapatıldı
Birisi led insanlar Bu diyebilirsiniz yani amaçlara yönelik,
oturum için buraya tıklayın senin Hesap, bir banka hesabı.
Ve bu Batı'nın Bankası oldu.
>> Yani birisi bu aldım.
Ve görmek için biraz daha kolay Bir tek aralıklı yazı o uzaklaştırdınız
30 metrelik projektör üzerinde.
Ama küçük yazı bir de ne zaman Eğer alıyorsanız e-posta,
Bu bankofthewest.com gibi görünüyor, değil bankofthevvest.com,
Hangi birisi satın almak için 10 $ ödemişti.
Ve sonra bu onları açtı Bazı kötü sitesinde eşdeğer.
Aslında biz yapabiliriz >> Ve too-- görürsünüz Ben gerçek web sitesine giderseniz bu--,
bankofthewest.com, yine, son kez geri çağırma
Bu web sayfası eğer ve Eğer, nasıl çalıştığını olarak meraklı
kesinlikle gidebilirsiniz Chrome'un geliştirici araçları.
Ve tüm görebilirsiniz HTML güzel orada biçimlendirilmiş.
>> Ama noktaya daha Eğer en kapatalım cam--
Eğer görüntüle gidebilirsiniz bu-- Geliştirici Kaynağı.
Neden sadece kopya yok bütün bunlar Ve sonra ben
benim küçük gedit penceresine geçebiliriz Burada benim kendi web sayfası yapmak.
Hello.html bu kaydedin.
Ve muhtemelen bu, kırmak için gidiyor genellikle bu kolay değil çünkü.
Ama benim kendi sayfayı yeniden şimdi ise , CS50 Aletler ve hit yeniden kendi
Tamam, bazı şeyler kırdı.
Ama sahip oldukça yakın değilim Kendi bankacılık sitesi, değil mi?
Tüm bu HTML--
>> [KAHKAHA]
>> DAVID J MALAN: --Ben actually-- ve vermedi
birileri orada olduğunu biliyorum kim aslında çok bu bağlantıları tıklıyorsunuz.
Yani açıkça, bazı şeyler kırdı.
Ama bu yol gidiyor Bir tartışma içine bizi,
gereksiz yere şu anda, olarak ne CSS, basamaklı stil sayfaları, vardır
ve nasıl aslında Diğer HTML dosyaları indir
ve JPEG GIF dosyaları dosyaları olduğunu Web sitesi kullanıyor olabilirsiniz.
Ama bütün accomplishable olduğunu.
Ama gerçekten aşağı kaynar Bu çok basit sezgisel tarama.
>> Peki şimdi sadece bir göz atmak diyelim HTML diğer örnekler çift
Sadece bir fikir vermek için Yapabileceğiniz başka ne.
Örneğin, bu list.html olup.
Bir web sayfası yapmak istedim varsayalım dörtlü evlerin bir listesini.
Ben sırasız için ul etiketi kullanabilir listesi ve ardından liste öğesi çocuk
ve sonra, çakışık veya liste yineleme Söz konusu evler rather--.
Ben bu kadar açarsanız >> Ve, hadi yapalım.
En hello.html değil gidelim, ama list.html için.
Kahretsin.
Ben bu nasıl düzeltebilirim?
Bu doğru, daha önce olduğu gibi aynı sorun var?
Bu yüzden bana chmod-- oops-- yapalım chmod a + list.html r.
Ve şimdi benim tarayıcıya geri dönmek durumunda ve Yeniden tıklatın, orada öyle.
Yani hiç yapmak istedim eğer Bir madde işaretli liste, bunu yapabilirsiniz.
Süper fantezi ve yapmak istiyorsanız Bir sıralı liste değil, bir sırasız liste,
, ol için bu sayfayı yeniden değiştirmek ve Şimdi tarayıcı sizin için sayı olacaktır.
>> Başka ne yapabiliriz?
Eh, uzadıya bir çift ise Eğer text-- uzun paragraflar var
Örneğin, bazı Bu-- gibi Latin metin
ve ayrı paragraflarda istiyorum, Açık p, paragraf etiketi için yakın s.
Ve tekrar ve tekrar yapmak.
Ve şimdi bu dosyayı açarsanız, paragraphs.html, iyi, bu
can sıkıcı oluyor.
Yani şimdi sadece geri dönelim benim istemi, a + r r yıldızı chmod .html--
Bir güzel küçük vahşi kart tabiri caizse.
Bu tüm düzeltmek gerekir Benim için bu sorunlar.
En yeniden edelim.
Üç paragraf var.
>> Ve şimdi en önde gidelim ve diğeri açılır.
Nasıl tablo hakkında?
Sen tablo görünüyor fark edeceksiniz Biraz daha karmaşık.
Fakat bu iyi düşünce bulunuyor Açık etiketi, açık etiket,
açık açık, açık, kapalı etiketi, açık etiket.
Ve bunlar için durmak için ne olan sınır tablosu, görünüşte
Bir kalınlık olacak 1-- ne olursa olsun Bu means-- tablo satır, tablo
bir hücre anlamına gelir veriler.
Ve ben tarayıcıya geri dönmek durumunda Burada ve table.html gidin,
Eğer bir şey görebilirsiniz Bu gibi çirkin.
Ama biz noktaya alırsınız nerede biz aslında can
Bundan daha güzel şeyler yapmak.
>> Bu yüzden bana şimdi şart edelim.
Daha fazla etiketleri salkımları var.
Ve HTML almak için harika Çünkü, açıkçası, tüm yapmanız gereken
mevcut web sayfalarına bakmak olduğunu hangi ile aşina.
Ve oh, o nasıl, gibisin Onlar estetik yaptılar.
>> Yoksa herhangi bir çevrimiçi bakabilirsiniz HTML nasıl çalıştığını olarak kaynak,
ve bir var olduğunu göreceksiniz diğer etiketlerin tüm kelime.
Ama basit bir zihinsel modeli ile tek başına açmak neredeyse her etiket
Gerçekten, bunu kapatılması etti kendini öğretmek için yeterli geliyor
HTML sonra anlamak etiketleri bu temel fikirler
nitelikleri ve iyi biçimlilik ve Konuştuğumuz ettik,
Biz açılabilir kapanış şey Bu yüzden biz bir tarayıcı karıştırmayın.
Yani şimdi bu atalım Bir daha ilginç bir seviye
Gerçek giderek.
Ve benim Mac gidelim Burada, google.com için.
Ve şimdi notice-- yapalım şunu.
Ben gitmek için gong ediyorum Ayarlar, Arama Ayarları.
Ben bu can sıkıcı anlık kapatmak istiyorum Sonuçlar şey nerede hemen
senin yazarak yanıt başlar.
Bu yüzden bu eski okulu yapalım biz aslında neler görüyorum.
>> Yani kurtarmak için gidiyorum benim Burada Google ayarları.
Ve şimdi ben gidiyorum notice-- kedi gibi bir şey aramak.
Ve hala auto yapıyor Burada tam ama şeyler dayalı
İnsanlar geçmişte yazdığınız.
Ama ne olacak ne fark.
>> Şu anda URL Bu, sadece google.com.
Ve teknik, bu çizgi var.
Google sadece bir karakter tasarruf ediyor ve bizi gösteren değil.
Onlar sadece bize https gösteriyor Biz konum süper güven olmak
güvenli veya şifreli sayfasında.
>> Bu yüzden bana go ahead ve kediler için arama izin.
Şimdi bu gerçekten var hızla ezici.
Bu URL uzunluğu bak.
Ama çıkıyor, bu şeylerin çoğunu o URL aslında oldukça işe yaramaz.
Ben silme işlemini başlatmak için gidiyorum Ben anlamıyorum şeyler.
Ben kedileri görüyorum.
Ben kedileri anlıyorum.
Kediler orada tekrar neden bilmiyorum.
Ben gerçekten bilmiyorum Bu saçmalık nedir.
Ben sadece tutmak için gidiyorum vurgulayarak ve malzeme silme
ben anlamıyorum, sadece bu URL'yi damıtılması.
>> Şimdi bana tekrar girin olsun edelim.
Google hala çalışıyor gibi görünüyor.
Yani nedense, onlar ekliyoruz kendi URL ile varsayılan şeyler çok.
Ama kesinlikle gerekli değil.
Yani bu konuda güzel nedir?
Peki, beni önde gidelim ve Chrome'un Müfettiş açmak.
Bunun için bir küçük fare kısayolu var.
>> Ağ sekmesine gidin.
Ve şimdi beni yeniden izin Bu sayfayı bir kez daha.
Ve ben Shift tutuyorum.
Bir kenara, tarayıcılar gibi önbelleğe veya tasarruf eğilimi
Sadece verimliliği aşkına bilgi.
Ama genelde, tutma Shift ve Her şeyi zorlar yeniden
baştan başlamak için.
Ve ben burada yapmak istediğim şey.
>> Ve tüm bu fark Sadece ortaya satırlar.
Bu herhangi bir web çıkıyor sayfa, sadece bir dosya olabilir
involved-- hello.html-- veya orada Bu durumda olduğu gibi, 52 olabilir.
Ben ziyaret ettiğinizde google.com, Görünüşe göre, benim tarayıcı
52 ayrı HTTP isteklerini başladı.
Neden?
>> Peki, içinde ne bakmak Bu web sayfası kadar üst.
Sadece metin yok değil, ama gerçek görüntüler var
sağ üzerinde kedilerin.
Renkli logo solda buraya var.
Bu simgelerin hepsi var Bir mikrofon ve benzeri.
Adet çok bina var, bloklar, çizik parçaları, eğer sen,
Bu web sayfası.
Ve tarayıcı ne üzerine yapıyor çok ilk dosyayı alıyorum hangi
Burada bu satır, aslında olduğunu HTML üstünden yineleme
aşağıya, arayan, soldan sağa resim etiketleri veya diğer etiketleri gibi şeyler
diğer dosyalar söz ve onları gördüğünde, gider ve onları getirir
HTTP üzerinden, canlı bütün zarf metafor,
ve daha sonra bunları görüntüler web sayfasında uygun bir yer.
Ben odaklanmak durumunda >> Ama burada dikkat İlk atış, arama kediler,
gerçekten de HTTP 1.1 kullanıyor, dikkat edin.
Ve ne yazık ki, Google Şu anda sürüm 39 Krom
aşağı zayıflar şeyler tür ve Bize gerçek başlıklarını gösteren değil.
Ama ne gerçekten gönderilen bir istek slash değil, ama / arama? q = kediler.
>> Şimdi, neden önemlidir?
Eh, ben anlaması için gidiyorum Bu o eğer Google
Bu formun, neden sorguları destekler Kendi arama uygulamak değil
CS50 için motor, ama sadece ön sonunda, sadece grafik kullanıcı arayüzü.
Ve biz arka uç outsource olacak, gerçek arama Google'a sonuçları.
>> Peki bunu nasıl?
Peki, beni buraya gedit içine gidelim.
Ve beni go ahead ve açalım yukarı, diyelim yeni bir dosya olsun.
Ve ben bu kurtarmak için gidiyorum geçici arama-0.html olarak.
Ve sonra sonunda, biz hızlı olacak ileri ben birine önceden hazırlanmış.
>> Ve ben gidiyorum hızlı doc türünü kırbaç
html açık dirsek html yakın dirsek html.
Sonra başını yapacağım yakın baş açık başlık CS50
Yerine Google arama ara.
Burada aşağı Ben gidiyorum Vücut, buraya yakın gövde.
Ve şimdi ben CS50 Arama gerekir.
Ve aslında, diyelim aşamalı bu inşa.
Ben go ahead ve bu kapatın ve gidiyorum Aslında benim kamu dizine koydu.
Yani bana sadece bir an ver.
Ben gidiyorum arama-0.html-- zamansal search.html diyoruz.
Ben bunu bir + r search.html chmod gidiyorum.
Ve şimdi ben bunu açmak için gidiyorum.
Pekala, bu kadar hızlı oldu.
Ama amaç sadece oldu noktaya bizi almak için
Bu metni sahip denilen search.html dosya.
Henüz bakmak için çok değil.
Nitekim, benim tarayıcı gidin, ve eğer işte bu, hepsi search.html gidin.
Ama biliyor musun?
Ben biraz meraklısı olabilir.
Ben orada bir kitapta okumak Bir başlık etiketi h1 denir.
Ve ben önde gitmek için gidiyorum ve Bu açık h1 ve yakın h1 kullanın.
Sayfayı güncelle.
Ve şimdi, daha büyük ve cesur var tüm ilginç ki,
ama en azından yapısal daha ilginç.
Ama şimdi beni başka bir etiketi tanıştırayım.
Bir form etiketi var dışarı O döner.
Ve beni bu etiketi kapatalım.
Ve orada 's çıkıyor bir giriş etiketi ki
tipi denilen bir nitelik vardır ki alanın veri türü,
eğer sen.
Ve türü metin olacak.
Ve onun değerini gidiyor CS50 Arama olması.
Kapat etiketi.
Ve hiçbir fikri olması oluyor Açılış ve ayrı etiketleri ile kapanış.
>> Beni buraya geri dönelim ve oluyor, yeniden neler olduğunu görmek.
Ilginç alınıyor.
Bir metin alanı var gibi görünüyor.
Ve aslında, ben istemedim henüz bir değer koymak.
Beni buraya gitmek ve aslında alalım basit tutmak için bu değerin kurtulmak.
Bunun yerine, bir değer, ne istediğini Bu şeyi vermek için bir isim oldu.
Ve ben, ne olduğunu bilmiyorum bu yüzden tekrar o geleceğiz.
>> Ama bunun altında, ben istiyorum input type yapmak = gönderin.
Ve bu değer CS50 Arama olacak.
Ve biz I neden görürsünüz Bu değer taşındı.
Ben yeniden, ben şimdi var gibi görünüyor Kendi arama başlangıçlar
Motor, süper iğrenç, Açıkçası olsa, bu kadar
değil bir çok atmak ne Google'ın varsayılan sayfa gibi görünüyor.
>> Ben şimdi burada giderseniz, ben yazabilirsiniz kediler ve umarım Ara'yı tıklatın.
Ama ben oldukça henüz bitmedi Ben hayata değil çünkü,
Açıkçası, bir veritabanı.
Ben sürünerek değil arama sonuçlarında web.
Yani Google'a bu outsource gerekir.
Peki nasıl bu yapacağım?
>> Peki, tüm I ilk eklemek ve eylem gerekir
Benim form etiketi yükledikleri http://www.google.com/search olduğunu.
Ve ben biliyorum ki sadece sahip olmaktan yakından bakarak anlaşılmaktadır
kendi URL de.
Ve şimdi bir tahmin almak.
Ne gerekir bu metin alanı muhtemelen Geldiğimiz yere göre, çağrılabilir
önce gelen?
>> İZLEYİCİ:? Q.
>> DAVID J MALAN:? Q.
Ve biz aslında soruyu ihtiyacımız yok o çıkıyor, ama q gerçekten öyle işaretlemek,
sorgusu muhtemelen tarafından q Varsayılan, işte sırf
ne Larry ve Sergey yıllar önce geldi.
Yani şimdi bana bu sayfayı yeniden yükleyin verelim.
Tüm bu farklı görünmüyor.
Ama şimdi ne izle.
>> Ben kedi ve tıklama yazarsanız Arama ve gidelim CS50,
Ben çırpılmış olsun fark uzak gerçek Google.
Şimdi, Google biraz ediliyor onlar konum sataşmak
ek bir parametre ekleyerek, Eğer URL'ye, olacak eğer.
Bu tüm oluyor otomatik olarak Google tarafında.
>> Önemli bir parçası ben görünüyor ki Burada bu isteği yaratmıştır için.
Ve gerçekten de, bu böyle oluyor.
Eğer HTML varsa o Bu, bu gibi görünüyor
web geliştiricileri gösterim tür dediği için, go ahead ve bir form oluşturun
o teslim ne zaman ki, Bu URL'ye gitmek için gidiyor.
Ve URL sağlamıştır zaman q gibi şeyler için değerler,
Sadece bu URL'ye gitmeyin.
Aslında, soru gitmek işareti ve ardından q = kediler.
Parametresini ekleyin, Böyle HTTP parametresi.
>> Ve sadece süper hassas olmak, Ne ötürü-- anlaşılmaktadır ediliyor
ama daha explicit-- olduğunu olacak ben kullanmak istiyorum yöntem
yerine gibi bir şey, olsun biz sonunda göreceğiz yazılan.
Kısacası, sadece anlayış So HTML ve bazı oldukça basit etiketlerini kullanarak,
Şimdi oluşturmak için başlayabilir Bizim kendi ön uç kullanıcı
Bir arama ile arayüz Bunun arkasında motoru.
>> Ama bu tabii, oldukça iğrenç.
Bu yüzden bana aslında yukarı açalım biraz daha iyi bir versiyonu.
Bunun içinde elde biridir bazı yorumlar vardır ilerlemek.
Ama bu ben görürsünüz hemen hemen onu yeniden.
Yani bu online zaten mevcut.
Ve ben preemptively için oldu sadece basit tutmak için https gidin.
>> Ve şimdi bir yukarı açalım Bu sonraki yineleme.
Sürüm 1 yerine 0 olduğunu.
Ne kadar biraz size dışarı atlar Bu örnekte, farklı?
>> İZLEYİCİ: [duyulamaz].
>> Evet, bu metin hizalama merkezi var.
Bu Buraya kadar biraz garip.
Ama bu gerçekten yeni.
Ve belki de ne olacak sanırım.
Şimdi benim tarayıcı giderseniz ve arama-1.html ziyaret
neredeyse aynı şey.
Ama bir adım daha yakın daha güzel olmak biraz.
Hala çirkin, ama içinde güzel en azından her şeyi şimdi merkezli oluyor.
>> Peki ben ne kullanıyorum çıkıyor Başka bir dil tamamen denir
CSS, basamaklı stil sayfaları.
Ve CSS, açıkçası, tür bir, benim kişisel görüşüme göre,
Bir acımasızca tasarlanmış bir dil.
Bu hatırlamak çok can sıkıcı tüm çeşitli ayrıntılar.
Ama stylizes ne Tüm dünyada internet bugün.
Birini rahatsız.
Tamam.
Yani buraya gitmek ve görelim nasıl biz aslında bu kullanıyoruz.
Ve en azından bu, çıkıyor Aslında oldukça basit bir dil.
Sadece anahtar değer çiftleri, özellikleri bulunuyor ve değerler, özellikler ve değerler.
Gerçekten de, burada biridir Böyle bir özellik ve değer.
>> Sadece stil kullanarak Benim vücut etiketi özniteliği
ve bir değeri elde kelime kolon ve başka kelime,
veya bir özellik ve bir değer, Ben estetik etkileyebilir
web sayfası, değil mutlaka Henüz yapı,
ama bunun estetik.
Ve sadece etrafında Googling, ben fark CSS, basamaklı stil sayfaları,
adlı bir özellik destekler değeri text-align, can
Örneğin, sağ ya da merkez sol olmak.
>> Peki şimdi yeniden ne zaman Bu sayfayı, ne aldın
Bir merkezli sayfa oldu, ama yine de oldukça çirkin.
En go ahead ve açalım Arama sürüm 2 kadar.
Ve şimdi ben biraz daha yaptık dikkat edin.
Kafanın içinde burada bu kadar dikkat edin etiketi, başlık daha var olabilir.
Aslında, bir stil etiketi var.
Sadece bir gets Ve burası bazen biraz dağınık görünce CSS.
Bir şey var gibi >> Bildirimi Bu yapısal olarak çok farklı görünüyor.
Ama burada adı Ben istiyorum etiketi stilize etmek.
İşte bizim eski arkadaşlar kıvırcık vardır ayraçları ve kapalı küme ayracı.
Sonra buraya olmasıdır özellik ve değeri.
>> Ben bu dosyayı yüklerseniz, search2.html, Sonuç aynıdır.
Ama daha iyi bir tasarım doğru bir adımdır.
Bu CSS dışarı faktoring, ben oldum Benim HTML ile birbirine karışmadığı.
Göreceğiz gibi Ve gerçekten, I could Bu özellikleri ve değerleri yeniden.
Ben demet yapmak istedim Benim web sayfası parçaları merkezli,
Ben style = text-align yazmak zorunda değilsiniz biryere merkezi.
Ben bir yerde koyabilirsiniz belki, üstünde yukarı gibi.
>> Ama bu bile iyi bir tasarım değil.
Aslında, şeylerden biri öğreneceksiniz Eğer daha fazla vakit geçirmek gibi
web programlama ki daha yapabilirsiniz olduğunu dışarı şeyler ve faktör şeyler modülarize
.h dosyaları gibi, bize faktör şeyler verdi Bize faktör şeyler izin helpers.c istiyorum
Birkaç psets önce.
Benzer şekilde, biz olabilir Bunu başarmak istiyorum.
>> Yani sürümünde fark search.html üç Birkaç gün önce
Kafa temizledik sayfa ve sadece koymak
bu, bir bağlantı etiketi, hangi adına karşı,
Size bir köprüyü vermez.
Bu yoluyla başka bir dosyaya bağlantılar değeri bu durumda bir href,
Arama-3.css olduğunu
Yani biz hızla gidiyoruz biliyoruz.
Ama yapıyorum hepsi tür bir şeyler etrafında hareket.
Bana açık arama-3.css edelim.
Bunun için gerçekten bir şey yok.
Ben sadece kopyalanan ve yeni yapıştırılan biz bir şeyler çarpanlarına çok gibi, dosya
önce diğer dosyaları içine.
Ve result-- Tamamen underwhelming--
aynı olacak.
Ama biz toward-- gidiyoruz hayır, öyle değil.
Ah, ben nedenini biliyorum.
>> Yani bu bir hata gibi görünüyor.
Ve bazı anlamında değildir.
Ama bana Ağ sekmesini kadar açalım.
Bana sayfayı yeniden yükleyin edelim.
Ah, neden CSS değil uygulanmaktadır?
Peki, CSS dosyası, benzer vardır okunabilir olması için dünya, tabiri caizse.
Ve çok şu anda yasaktır.
Bu yüzden bana bir chmod a + r yapalım yıldızın nokta CSS-- whoops--
Biz nokta CSS sadece bir konum CSS dosyaları için dosya uzantısı.
Şimdi bana geri dönelim Benim tarayıcı ve yeniden.
Tamam, biraz daha iyi.
>> Şimdi bana son bir şey yapalım.
Arama-4.html olarak.
Ben sadece düşündüm bir sürümü var yol daha olsa, yol serindi
karmaşık.
Ilk sonucu bakalım.
Bize daha fazla yer vermek için bu kapatın.
Bu,-4 arama girin değiştirin.
>> Ve şimdi şeylerin bir demet kırık.
Geri dönmek için gidiyorum Burada benim dizine.
Ve şimdi sadece yapacağım Bir file-- ucunda + r chmod
Ben denir exists-- biliyorum çünkü bir görüntü logo.gif.
Ve şimdi yeniden.
Ve ben şimdi Medusa tavsiye oldukça yakın, açıkçası,
Google 1999 versiyonu gibi, ve açıkçası, Google 2014 sürümü,
değil mi?
>> Peki şimdi, kendi web sitesine gidiyor sonuçta, ben kediler için arama eğer.
Ve gerçekten de öyle.
Ama ben farklı ne yaptım Bu sürümde 4?
Yani biz burada üzerinde çok fazla durmayacağız.
Siz sorun bu görürsünüz Sonunda yedi set.
Ama ben bir kaç şey yaptım fark.
>> Ben bir div tanıttı bölünme etiketi,
Bir paragraf etiketine ruhu benzer.
Ama bir bölümü burada, sadece gibi Dikdörtgen görünmez bölgesi
Ekranın.
Hadi bir benzersiz vereyim tanımlayıcı, bir altbilgi, sadece
bu yüzden hakkında konuşabilirsiniz başka bir yerde bizim HTML.
İşte sayfanın başka bir div kimin kimliği, içerik olacak.
Bu sayfanın içeriği var.
Ve buraya sayfanın başlığıdır.
>> Diğer bir deyişle, ettik aslında HTML zihinsel duyuyorum
Bu web sayfasını görüntülerken olarak üç bileşen, bir başlık bölümü
Bu görünmez dikdörtgen ile burada, ortada içerik ve ardından
aşağı aşağıda altbilgi, hatta ama biz bunları görmüyoruz.
Ben kafamda istiyorum çünkü sayfa burada, ya da bir .css dosyası,
Ben bu sözdizimini kullanabilirsiniz.
>> Kafa vurusu etiket değildir.
O döner böylece bir kimlik var #header yaparak olduğunu,
Ben şimdi bir tane ya da daha fazla uygulayabilirsiniz başlığına özellikleri.
Ben aynı içeriği yapabilirim, Burada içerik için aynı.
>> Yani örneğin, altbilgi, haber Ben ekliyorum bu özelliklerin hepsi.
Ve onlar okuma ile sadece var biliyorum CSS belgelerine kadar.
Yazı tipi boyutu smaller-- olacak bu nedenle bazı göreceli yazı tipi boyutu.
Ağırlık cesur olacak.
Kaç piksel Margin-- etrafında bu-- 20 piksel.
Ve merkezli olmak üzere gidiyor.
>> Ama şimdi, sayfa bu gibi görünüyor.
Ben memnun değilim Eğer Orada benim kopyalama,
Ben kırmızı renk gibi bir şey yapabilirdi.
Ve sonra ben bu kaydedebilirsiniz, yeniden, ve şimdi altbilgi stilize ettik.
Yani bu sadece güç ima edilir Eğer bir web sayfası ne yapabilirim
şeyleri etrafında değiştirmek için.
>> Ve bu daha serin, isterseniz Gerçek web siteleri etrafında kurcalamak için,
Eğer kalıcı olarak değiştiremezsiniz.
Ama ben açarsanız Chrome'un Müfettiş tekrar
ve ben sol tarafına değil gitmek Burada, Facebook'un HTML gösterir,
ancak sağ tarafta gösterir taraftaki kendi CSS tüm,
yapabilirsiniz ya ve anında şeyleri değiştirmek.
Bu yüzden bana go ahead ve bu yapalım.
>> Bana önde ve kontrol gidelim Burada bu rastgele kelime tıklayın
imzalamak ve Eleman kontrol edin tıklatın.
Krom çok uygun atlar Facebook kullanan h1 etiketi.
Ve burada Facebook fark tür tembel vardır
Sert burada bir özelliği olarak yazı tipi boyutunu kodlu.
>> Serin şey olsa So Aslında buraya gitmek eğer
ve oh, Facebook, bunu sevmiyorum, demek 64 piksel, şimdi Facebook değiştirebilirsiniz.
Tabii ki, biz sadece onu değiştiriyoruz Benim için şahsen şu anda.
Ama bu sadece başka bir şeydir Bizim araç kiti aracı
Bu bize oynamak için izin gidiyor ve anlamaya ve ayrıca teşhis
Kendi web sayfalarında konular.
Ve biz benzer üzerinde gidebiliriz Burada, aynı şey hangi.
Eğer gerçekten fantezi almak istiyorsanız, ben Şimdi gerçekten sayfayı mutasyona olabilir, demek
ve çılgınca şeyler yapmak.
>> Peki neden bu tüm yararlıdır?
Peki, sonuçta, biz konum olmak istiyorum olacak
web sayfaları oluşturmak mümkün olduğunu Bizim kendi arka uçları ile tahrik edilir,
tarafından değil, sadece Google ve Orada arka uç dış kaynak.
Biz aslında istiyoruz bir değer, örneğin,
arama motorunun eylem başkasına değil gitmek özniteliği,
ama search.php gibi bir şey, search.php kendi sunucusunda olduğu,
değil başkasının üzerine.
>> Ve böylece biz aslında, oraya Yeni bir dil tanıtmak gerekir.
Yani biz zaten bir Yeni baktım Gerçekten burada dil, ya da iki, HTML
ve CSS.
Ama onlar gerçekten sadece vardır yapısal ve estetik dil.
Onlar programlama değil dil başına.
Ve bu resmi yaklaşık olarak çok var zaman biz onlara harcayacağınız gibi.
Şimdi başlayacağız Çünkü PHP geçiş.
>> Peki PHP gerçek olduğunu programlama dili.
Bu bir betik dili var o olduğunu anlamda
hafif kilo olması gerekiyordu C gibi bir şey daha
Ve bu bir dil var, hangi derlenmiş değil demektir.
Özetle Yani, bu ne demek istedi Biz c gibi bir dil kullanıldığında
ve biz bunu derlemek zorunda?
Bu ne anlama geliyor C kaynak kodunu derlemek?
HEDEF KİTLE: [duyulamaz].
DAVID J MALAN: Tekrar söyle?
HEDEF KİTLE: [duyulamaz].
DAVID J MALAN: Mükemmel.
Bu ikili haline dönüşür.
Bu sıfır ve olanları içine döner Gerçek İngilizce-benzeri kaynak kodundan.
Ve sonra biz aslında can Bu sıfır ve olanları çalıştırmak
geçirerek Çift tıklayarak bir simge CPU
veya bir komutu çalıştırmak.
>> PHP ve Python ve Ruby Perl ve JavaScript ve
ve diğer salkımları dil yorumlanır
demek ki diller, Eğer bunları derlemek yok.
Aksine, sizin için girdi olarak onları beslemek Bir program, bir tercüman çağırdı.
Ve o tercüman, Hangi başkası yazdı,
, alt kaynak kodu üst okur sağ ve sadece yorumluyor sola
Bu hatlar ve ne demek yapar.
>> Yani karşılaşırsanız eğer Baskı diyor çizgi,
mutlaka baskı dönüştürmek değil gelen sıfır ve olanlar.
Bu gibi bu tercüman var diyor büyük bir if koşulu,
programcının talimat ise Baskı, daha sonra aşağıdakileri yapın.
Yani sadece yorumlar akıl türüne göre
Yapmanız bunu söylüyorsun ne aracılığıyla.
>> Ve PHP bu dillerden biridir.
Ve PHP yıl önce tasarlanmış tam web programlama için.
Ve başlangıçta bir oldu çok özensiz, dağınık dil.
Ve gerçekten de, bir büyük var Orada kötü bir PHP kodu miktarı.
Ama dilin kendisi yılda olgunlaştı,
o kadar ki şimdi o yüzden aslında harika bir sonraki adım
pedagojik o çünkü C her şeyi tanıdık o kadar belâ
Sadece son birkaç hafta içinde gördüm.
>> Bir başlangıç ​​farkı göreceğiz Hiçbir ana işlevi artık var olduğunu.
Eğer yazma kodu başlattığınızda, bu sadece gidiş ne olursa olsun idam almak için,
Biz birazdan göreceğimiz gibi.
Bu arada, burada ne Değişken PHP gibi görünüyor.
Bu, biraz farklı ama sadece zar zor.
>> PHP, güçlü yazarak yok.
Haftanın yazarak var, hangi sadece orada demektir
dizeleri gibi veri tipleri ve numaraları ve diğer şeyler.
Ama belirterek zahmet etmeyin onlar artık ne.
PHP sizin için rakamlar.
Dolar işareti sadece bir karardır PHP insanların yıl yapılan
önce öyle ki PHP herhangi değişken Sadece bir dolar işareti ile başlar.
O aslında bir tür yararlıdır biraz daha size dışarı atlar.
>> Ama bundan sonra, bu PHP bir durumdur.
C karşı farklı nedir?
Hiçbir şey question-- Trick, hangi aslında gerçekten güzel.
PHP-- aynı Boolean ifadeler.
Ve karşı Boole ifadeleri veya, anahtarlar, döngüler, döngüler, tamam loops--,
bu farklıdır.
Bir var dışarı >> Bu yüzden döner PHP diğer özellikleri çift.
Bunlardan biri, aslında bu hangi harika uygundur.
$ Sayılar Eğer ettik bir dizidir Bir programda önceden ilan,
Her bir yapı için, bu fantezi bilgisi o bütün yapıyor yerine
can sıkıcı Ben ise, 0 eşittir Bu daha ucuz, [ Ben ++?],
ile, her biri her bir numara Bu dolar işareti değerlerinin sadece bir
Bir değişken, ve ikincisi Eğer I. olarak düşünebilirsiniz
İstediğiniz herhangi bir şey diyebiliriz.
Ben sayı denir.
Bu yineleme gidiyor dizi numaraları denir.
Ve her tekrarında, bu kadar otomatik güncelleme olacak
Size dolar işareti numarası için Değişken böylece sürekli
İstediğiniz değişkene erişimi Herhangi bir köşeli ayraç yapmak zorunda kalmadan
bir diziye gösterimi veya indeksleme.
>> Bunun ötesinde, biz bile gibi şeyler var hemen hemen aynı bakmak diziler,
o, çok yaygın dışında olduğu gibi yaparız PHP ve JavaScript, hem bakın
Bir diziyi başlatmak öncesi köşeli parantez kullanılarak.
C küme parantezi kullanır.
Bu yüzden de, biraz daha farklı biz gerçekten çok bu hile kullanmak vermedi.
>> Ama daha güçlü, PHP, ilişkisel diziler
hangi bir fantezi yoludur hash tabloları söyleyerek.
Aslında, bir karma bildirmek istiyorum masa PHP, C- aksine kaç
kod satırları o kadar sürdü aslında C bir karma tablo uygulamak?
Ya kod bunu kaç satır değildir C bir karma tablo uygulamak alarak?
Yani doğru, muhtemelen çok değil mi?
Belki, 100 veya 200 bir kaç düzine var.
Bu nontrivial var.
Ya da bu gibi olduğu hakkında yakında, aşikar olmayan görürsünüz
bir karma tablo uygulamak için [Duyulamaz] ve aynı zamanda bir deneyin.
PHP-- ve açıkçası Ama Muhtemelen bu söylemek gerekir
Monday-- kadar PHP, eğer İşiniz, bir tablo istiyorum.
Bu bir karma öylesine table-- var bir satır kod ile.
Ve
>> Dillerin bir sürü bunu.
Pset beş ile eğlenin.
Yani dil bir sürü bunu.
Onlar bu soyutlamalar vermek diğer insanlar, diğer programcılar ki,
Böylece sizin için yarattık Eğer onların omuzlarında durabiliriz
ve süper fikirler kullanmaya başlayabilirsiniz zorlayıcı, karma tablolar ve ağaçlar gibi
ve çalışır.
Ama ille gerekmez Bunları kendiniz uygulamak.
>> Ve böylece sonuçta, ne biz PHP kullanmak için gidiyoruz
potansiyel program yazıyor Sözde komut satırı.
Biz her program yeniden olabilir Biz bugüne kadar bu dönem yazdım
belki hariç SPL kullanan Koparma, ki şu anda C özgüdür.
Ama diğer her sorun ayarlayın, Kesinlikle Mario ve Sezar
ve Vigenere ve [? , Biz? Crack] ve ileriye
olabilir PHP yeniden uygulamak ve muhtemelen daha kolay biraz.
>> Ama biz sonuçta gidiyoruz ne Web programlama için PHP kullanmak için.
Ve bir sonraki tanıtmak için gidiyoruz hafta zihinsel modeli olarak adlandırılan bir paradigma
MVC, Model View Controller, hangi programlama yaptık eğer
Python'daki önce veya Yakut veya başka bir yerde, sen
Bu takımla biliyor olabilir Raylar ve Django ve benzeri.
Ama yeni iseniz Bu da, göreceksiniz
Bu aslında çok doğal olduğunu çarpanlara uzatılması
ve tasarım tür kod biz ettik ki
C. yapıyor Biz şimdi gidiyoruz PHP için bu derslerden bazıları uygulamak
böylece sonuçta, biz Kendi web uygulama.
Ve sen tür iseniz Büyüleyen veya hayret
biz yapacağız ki çok hızlı bir şekilde tümünü
hemen hemen her fark yarıyıl, yaklaşık% 90
de dahil olmak üzere öğrenciler CS50, bir kim, daha önce programlanmış hiç
Nihai projeler yapmak sonunda o web programlama dayanmaktadır.
Ve böylece döner göreceksiniz gelecek haftalarda yüksek.
Yani biz Pazartesi günü sonra göreceksiniz.
>> HOPARLÖR 1: Ve şimdi, Derin DAV Farnham tarafından Düşünceler.
Hash tablo.
>> [KAHKAHA]