[MÜZİK OYUN] 

David J MALAN Bu CS50 ve Bu haftanın 7 başlangıcıdır. Yani tekrar hoş geldiniz. Ve bunu Hatırlayacağınız probleminde, dört set Bir çöpçü avı biraz oldu bazı muhteşem ödüller sayede için Eğer fotoğrafları kurtarmak sonra hem burada hem de New Haven personel, Eğer gibi birçok bulmak için meydan vardı Eğer geldiğince bu bilgisayar bilim adamları. Ve biz bir bütün var gönderimler demet. Birkaç paylaşmak istiyorum düşündüm Bugün burada sizlerle. 

Ve biz çevrimiçi tüm bunları yayınlayacağız. Ama özellikle ben istedim kuyunun biri ki-- dikkatinizi çekmek, Sam onları epeyce oldu Genellikle böyle poz. Ama itibarıyla anlaşılmaktadır Bu sabah, kazanan Belirli bir kimse ile Ken seçildi Personelin 24 kamera ile çekilen içine çekerken daha fazla veya birkaç resimlerde birden personel oluşturmaktadır. Resimdeki sonraki Ken New Haven Mary. 

Şimdi, Ken olsa da, döner Bir köşe davanın bit Bu henüz önce oldu değil. O meydana gelmedi çıkıyor Bana problem ince baskı koymak Personel olduğunu söylüyor dört set Muhteşem ödüller için uygun olmayan Ken, elbette, tek bir çünkü Bizim personel fotoğrafçılar. Şimdi, bunu dedi, o başlangıçta söylemek bana yazdı Online bu fotoğrafları göndermek etmeyiniz. Ben büyük ölçüde düşünüyorum fotoğrafların çoğu, çünkü Bu fotoğrafçı bakmak aldı Böyle küçük bir şey. Ve benzerleri. 

Ama Ken sana güvence istiyorum O çok iyi bir fotoğrafçı olduğunu, O, o bir profesyonel alır bulanık olmayan fotoğraflar, odak daha olduğunu ve o kendi personelinin epeyce sürdü. Ama daha çok, sadece daha kabul Biz yapacağını düşündüğüm ken, listesinde geçmesi olduğunu gönderilen gerçek öğrenciler. Ve o Lance çıkıyor Bu sabah itibariyle 15 fotoğraf Bizim galibi oldu. 

Ve, Lance Colton ile resimdeki kendimle Skaz, ve Sam ile birlikte. Ama sonra çıkıyor itibariyle 11:46, biraz önce yani, Benim e-posta geri döndüm ve bulundu Henüz bir daha teslim olduğunu Bonnie adında bir öğrenci tarafından kimin e-posta sadece bu dedi. Yalan gitmiyorum, ben Ders sırasında bunu. Ve sonra sadece takmak için ilerledi 14 fotoğraf, Lance en 15 utangaç biri. 

Ama Bonnie fotoğrafları, o döner dışarı birden personeli, Sam vardı Aralarında, bu yüzden biz ne düşündüğünü yapardı Bunların her ikisi de kabul olduğunu. Böylece Dropbox almaya ek olarak Uzay o katılan herkes aldığı, bu iki bölüm de olacak Onlar için güzel bir yiyecek ve içecek öğle yemeği almak ve bölüm önümüzdeki hafta arkadaşlarınla. Ve böylece bizden duyacaksınız, Bu konuda Lance ve Bonnie. Onlara Çok büyük tebrikler. Şimdi, o sizin kim olur Öğle yemeği gibi daha genel Cambridge o CS50 öğle biliyorum ve New Haven, bu Cuma. CS50 web sitesini çizgi RSVP gidin. Ve şimdi seminerler bir kelime. Daha curricularly. Yani biz yaklaşıyor konum dönem noktası Başlamadan nerede Nihai projeler hakkında düşünme. Ve aslında, sadece biraz, olacak Ön teklifler nedeniyle olabilir sözde. Yani ön teklifler içindir olması oldukça düşük darbe ve gerçekten sadece bir fırsat Eğer kısa bir not oluşturmak için öğretme adam iletmek için Onu ya da onu size ne düşündüğünüzü final proje için yapmak isteyebilirsiniz. 

Şimdi, çok sayıda öğrenci sonuna kadar yapıyor, web tabanlı projeler son. Ve tabii ki, biz sadece konum Bu şimdi geçen hafta ve web programlama içine dalış ötesinde. Yani eğer endişe etmeyin kesinlikle hiçbir fikrim nasıl var Eğer fikir inşa edeceğini Eğer kafanızda olabilir. Bu gerçekten sadece bir zorlama işlevi düşündüğünü ve konuşurken almak bu konuda TF ile. Ama bu size yardımcı, ve sonuçta nihai projeler, CS50 bir gelenek olduğunu biliyor seminerleri sunan. 

Ve bu eller üzerinde, isteğe bağlıdır veya fırsatların dayalı ders olan konular hakkında daha fazla bilgi edinmek için Tabii en küçük bir yardımcı izlence, ama yine de harika materyal final projelerini sürücü. Ve böylece bu var listesi Burada New Haven CS50 personel için ile geldi iOS hakkında bu yıl programlama, Android programlama, oyun geliştirme, Daha fazla araçlar ve demet ve diller ve teknikleri. 

Yani CS50 web sitesinde bir göz atın. Ve bu arada, siz isterseniz Bunlardan herhangi gösterdiğiniz ilgi kaydolun CS50 en eğik çizgi kaydına gidin. Ve biz o şekilde takip edecek günler ve uçuş saatleri ve yerleri ve everything-- çoğu şeyi olacak olmak akış ve talep üzerine de mevcuttur Aslında bunu yapamazsınız eğer sonra. Bu yüzden daha fazla uzatmadan, biz GET ile son kez kapalı bıraktı. 

Ve bu oldu mesajı gibi oldu Sanal zarf içinde, hatırlama, biz yönlendirici router dan geçti Bir web tarayıcısında bir web arasındaki yönlendirici Sunucu. Ve bu mesaj baktı Böyle küçük bir şey. Bu daha gizemli mesaj olduğunu Zarfın içinde aslında kimin kağıt parçasına yazılı İlk satır, kelimenin tam anlamıyla eğik çizgi olsun diyor. 

Ve sadece bir sağlamlık denetimi olarak, çizgi ne ifade mi? Çizgi ne zaman ne anlama geliyor Bir web sitesi talebinde? Sen her zaman isteyin. Çoğu zaman herhangi bir web sitesini ziyaret ettiğinizde, aslında bir dosya adı yazmayın. Muhtemelen sadece Facebook.com gitmek , gmail.com veya benzeri girin. Ve çizgi neyi temsil ediyor? Hangi dosya? Özellikle Ya sayfa? 

Endeks, evet. Varsayılan sayfasında Yani. Bir dosyayı belirtmek yoksa yüzden Biz görmeye başlarsınız olarak adlandırın aslında sadece istekte ediyoruz Bana Facebook varsayılan sayfayı vermek ya bana gelen kutunuzu verebilir veya vermek Bana haber varsayılan sayfası CNN web sitesi veya benzeri üzerinde. Ve bir sunucu daha sonra yanıt şey ile mesaj Bu gibi ben, evet diyerek HTTP 1.1 sürümünü konuşuyoruz. 

Bir durum olduğunu 200, biz nadiren insanlarda kod iyi çünkü hiç görmek. Tamam, isteği anlamına gelir, çünkü Alınan ve düzgün bir şekilde gerçekleştirilmektedir. Ve içerik türü görünüşe karşılık olarak sık sık, her zaman olmamakla birlikte, metindir. Ve özel olarak ise, HTML. Ve bu aslında nerede bugün bakıyorum. 

Yani aslında, ben gidiyorum önde ve bir tarayıcı açın. Ben Chrome'u kullanmak için gidiyorum, sen kullanabilirsiniz hafta içinde herhangi bir tarayıcıyı en gelmek. Biz genellikle Chrome'u tavsiye özellikle çünkü yazılım geliştiriciler için iyi. Yerleşik bir sürü var kolaylaştırmak araçları HTML ve CSS sadece geliştirmek için, bugün bahsediyoruz başlayacağız şeyler, ama aynı zamanda diğer dillerde de. 

Ve ben devam edin ve Şeye gitmek için gidiyorum Ben tık veya sağ Denetim gidiyorum Bir web sayfasında herhangi bir yere tıklayın. Ve ben Elemanı kontrol edin gitmek için gidiyorum. Ve ben çimdik gidiyorum benim Burada ekran biraz. Beni altına bu geçelim. Peki bu ne denir olduğunu Chrome'un Müfettiş. Yani bu bir hata ayıklama gibi aracı Chrome yerleşik. 

Hepiniz zaten bu var Chrome'u kullanıyorsanız oldum. Ve bu ne olup bittiğini görmek için izin verir Bazı web sayfasının başlık altında üzerinde. Yani aslında bir alalım aşağıdaki gibi şuna bak. Bu şekilde fazla özelliklere sahiptir ve bugün umurumda. Ama burada üzerinde bu sekmeleri var. Elementler, ağ, kaynaklar, zaman çizelgesi ve diğer bazı şeyler. Ben tıklayınız gidiyorum Bir an için Ağ. 

Ve bu biraz bunaltıcı Burada ilk bakışta. Ama ne yapacağım let Bana bunun biraz basitleştirmek. Ben açmak için gidiyorum Kırmızı olduğunu böylece ışık kayıt. Ve ben günlüğü korumak söylemek için gidiyorum. Ve bu sadece biraz şey anladım zamanla bu kurtarmak için gidiyor tarayıcıda olur her şey. Ve şimdi ben gidiyorum http://facebook.com için. 

Aslında, en www yapalım iyi ölçmek için, eğik çizgi. Girin. Yani bir URL birçok Eğer ziyaret olabilir. Ve şimdi Facebook'un web Sayfanın üstündeki çıkageldi. Ve sonra bir sürü şeyler dibinde uçtu. Ve aslında, bu çıkıyor Eğer Facebook.com ziyaret ettiğinizde, Sadece, tek HTTP isteği yapmıyoruz o Facebook.com gidiş çıkıyor bu zarfların 41 gönderir Kendi isteği olsun, her biri ekranın arkasında olsa belirtildiği gibi Burada, ekranın altındaki, o, gerçekten, belirtir benim Tarayıcı 41 isteklerini yaptı. 

Ve toplam, o 861 transfer kilobayt ve nedense aldı çok sekiz saniye bunların hepsi indirmek için. Yani aslında biraz garip Facebook'un site bu alacağını Uzun, ancak bu, bu durumda olsun. Şimdi, bütün bu gerçekten umurumda değil En üstteki istek haricinde hakkında. Yani burada bu bir gidelim ve bana sadece bir an için uzaklaştırma edelim. 

Ve bana bu yakınlaştırmak edelim. Ben bile solda yaptık Peki Buraya oluyor çok şey var Ben vurguladık olduğunu Facebook.com ve daha sonra Ben aşağı kaydırma ediyorum fark aşağı kaydırma aşağı kaydırma, başlıkları istemek için. Ve Chrome gösteriyor görürsünüz Beni esas iç içerikleri isteğe I yaptı. Oldukça aynı biçimlendirme değil yol, ama olsun dendiği var fark, , konağın söz var fark Facebook.com, yol veya eğik, hangi ı istenen dosyadır. 

Ve sonra ben kaydırma eğer yedeklemek, biz aslında edeceğiz bkz Facebook döndü şey bu Bana bu başlıkların hepsi bu. Bu sanal zarf içinde çok Gerçekten anahtar değer çiftleri bir yeri vardır. Bir kelime, bir kolon ve ardından bir değer. Bir kelime, bir kolon ve bir değer. Bunlar denilen başlıklar bulunmaktadır. Ve yol daha ayrıntılı burada daha var biz aslında şu an umurumda. 

Ama bu ikinci Orada sonuncusu, fark facebook.com sunucusuna ki Gerçekten burada bahsedilen bazı metin HTML geliyor. Yani tüm bu demek ki Eğer bir web isteği o zaman Bir bir tarayıcıdan sayfa Sunucu, sunucu yanıt kendi bir zarf ile bunların içinde metindir. Diğer bir deyişle, HTML. HyperText Markup Language. Başka hangi dildir Bugün tanıtmak İnsanlar ya da bilgisayarların oluşturmak olduğunu sırayla web sayfalarını uygulamak. 

Özellikle, en bu bakalım. Ben şimdi geri dönmek için gidiyorum Facebook'un web sitesine. Ve ben gidiyorum sadece kontrol tıklayın veya sağ tıklayıp ve Görünüm Page Kaynak tıklayın. Ve Chrome'u kullandığınızda bile, IE Bu, Firefox bunu yapabilirsiniz yapabiliriz, Safari bile menü olsa, bunu yapabilirsiniz seçenekler biraz farklı görünebilir. Ve bu HTML olduğunu Mark ve Facebook da şirket yazdım. 

Ve topluca bu dil burada mavi ve beyaz sayfayı uygular biz bir an önce gördüm. Şimdi, bu biraz ezici. Biz sol üst kısmında yukarıya bakarsanız Ama biz konum Bazı desenleri görmek için başlayacağım. Bir çok şey var gibi görünüyor Bu açık açılı braket ve daha sonra bu kelime HTML var. İşte başka bir açık var açılı ayraç ve başkanı. 

Biz aşağı kaydırma burada olduğunu ve aşağı ve aşağı, ben go ahead ve denemek için gidiyoruz bir şey aramak için. Orada yol üzerinde sağ tarafta Burada açık braket organıdır. Ve son olarak hatırlayacaksınız Biz önerilen zaman En basit bir web sayfası olduğunu İnsan yazmak olabilir Böyle küçük bir şey görünebilir. Açık HTML etiketi açık kafa etiket, açık başlık etiketi, Daha sonra kapalı başlık, kapalı kafa, açık body etiketi, bazı metin, vücudu kapalı Kapalı HTML. 

Ama sadece bir an için burada bir duraklama. Bu kod, sen ettik bile önce yazılı hiç ama yine de oldukça anlamıyorum Neler oldukça iyi görünüyor. Doğru, çok temiz. Çok biçimsel güzel. Girinti ve beyaz alan bir sürü. Facebook'un değil. Peki neden Facebook kadar çok olduğunu HTML yazma benden daha kötü? Görünüşe göre. 

Doğru, bu gibi bir stil için beş üzerinden. Zorlayıcı bir nedeni var Onlar için bu köşeleri kesmek için. Pekâlâ, bu yüzden istemiyorum daha kolay okumak için yapmak. Yani bir anlamda, onlar Bunu obfuscating, gerisini çabalıyorlar En azından estetik yani o Myspace için zor olduğunu gidip rip onların anasayfa ve bunun için HTML. Bu programlarla çıkıyor Chrome da dahil olmak üzere olsa da, süper kolayca temizleyebilirsiniz. Bu yüzden gerekçe olarak değil tamamen bu. Başka ne nedeni olabilir. Evet. Evet, beyaz boşluk maliyetleri verileri. Ne demek istiyorsun? Evet, kesinlikle. Sekme tuşunu çok ya vurursanız space bar, sonuçlarını düşünün. Yani klavyede her tuşu bir olduğunu [Duyulamaz] bir bayt olarak temsil etti. 

Yani varsayalım o İşaretle veya devs herhangi bu gün sadece bir kez ara çubuğuna vurur Bu HTML sayfası olduğunu Facebook'un ana temsil eder. Ve Facebook bir yeri vardır Kullanıcıların bu gün. Yani varsayalım o Facebook'un anasayfa Bugün bir milyar kişi tarafından ziyaret edilmektedir. Ve Facebook birileri vardır sadece bir kez boşluk tuşuna basın. 

Bu nedenle ek bir bayt Bir milyar istekleri, ne kadar daha fazla veri Facebook olduğunu internet üzerinden aktarılması Birisi vurdu çünkü onun klavyede boşluk? Bir milyar bayt veya bir gigabayt Veri Facebook sunucularından gönderiliyor çevresindeki insanlara sebepsiz dünya. Şimdi, bu sadece bir boşluk var. 

Biz aslında bu temiz düşünün şey yukarı ve girintili ve ekledi beyaz boşluk bir sürü ve Sekme karakterleri ve boşluk Eğer harcama gigabayt sonuna kadar, değilse terra byte alanı daha fazla. Ve çok süper yaygın web geliştirme gerçek dünyası kodunuzu minify etmektir. Ve biz sonunda göreceğiz Bunu nasıl. 

Ama bugün, biz kod yazmaya başlayacağız Bu bize insanlar tarafından aslında okunabilir. Eğer geri gitmek eğer, olsa da, çıkıyor Chrome'da bu aracı, Eleman inceleyin Daha önce, biz Ağ sekmesinde idi. Bu giderseniz çıkıyor gerçekte görünenden elemanları sekmesi, Chrome'un oldukça yazdırılır Aynı HTML sürümü. Yani biz bunu deobfuscated ettik. Yani bir bilgisayar için hiçbir maç bu. Ve şimdi gerçekten can etrafında tıklayın ve başlayın Bir web sayfası hiyerarşiyi görmek için. Yani aslında bu yapalım. Devam edin ve yukarı açacağım Benim Mac metin düzenleme adında bir program. Ve bu sadece olduğunu hatırlamak süper basit bir metin programı. , Windows notepad.exe sahiptir. Ve ben kelimesi kelimesine gidiyorum aşağıdakileri yazın. Doc tipi HTML, açık dirsek HTML, dirsek HTML kapalı Biz burada sayfanın kafası Burada sayfanın baş ucu, Bir başlık, merhaba dünya gibi olacak. 

Ve sonra buraya, ihtiyacımız Web sayfasının gövde. Kapalı gövde. Ve sonra burada, merhaba dünya. Pekala. Yani biz bir süper hızlı web sayfası yazdık. Ben olarak kaydetmek için gidiyorum benim masaüstünde hello.html. Benim Mac, şikayet edecek olduğunu düşünerek, bir dakika bekleyin, Bu bir metin dosyası, do Bunu .txt aramak istediğiniz? Ama hayır, ben nokta HTML kullanmak istiyorum. 

Ben Ve eğer güzel ne Sadece bu dosyayı çift tıklayın, hello.html, burada benim web sayfası. Ne yazık ki, ben Dünyada tek kişi kim şu anda bu sayfayı ziyaret edebilirsiniz. Nerede görünüşte yaşıyor diye mi? Benim Mac üzerinde, değil mi? Hangi işe yaramaz. Bu odada kimse gibi internette dursun Aslında bu sayfayı ziyaret edebilirsiniz. Yani bugün, gerek Başka bir unsuru tanıtmak. 

Ve bunu yapmak için, ben gidiyorum go ahead ve bulut 9 kadar açık. Yani bulut 9 ders a ise bulut tabanlı service-- CS50 IDE-- Bu bizim çalışma alanlarının hepsi var yerde internet üzerinde çalışan. Ve bu bizim dosyaların hepsi demektir Zaten kamuya erişilebilir. O yüzden go ahead ve bu yapalım. Ben devam edeceğim ve yeni bir dosya NCS50IDE oluşturun. Daha önce olduğu gibi kaydetmek için gidiyorum ve hello.html olarak kaydetmek tıklayın. Ve şimdi sadece zaman kazanmak için, ben gidiyorum Bu kodu yapıştırın go ahead ve kopyalamak yerine yeniden yazın. Ve kaydedin. Ve şimdi ben var Dosya hello.html çağırdı. Ama nasıl aslında ben bunu bir web sayfası olarak açmak? Peki, CS50 yerleşik çıkıyor IDE clang gibi sadece bir derleyici değildir ve GDB gibi bir debugger ve diğer programlar salkımları, tam teşekküllü aslında var CS50 IDE içinde çalışan web sunucusu. 

Hepiniz, demek ki, kendi web sunucusu var. Ve bir web sunucusu sadece bir parça kimin amacı hayatta yazılım web sayfalarını hizmet etmektir. Tarayıcılardan istekleri dinlemek için ve Biraz sanal zarf ile cevap iç tarafında olduğu Ben yazdım içerik. Yani bu web sunucusu aslında ücretsiz ve açık kaynak. Nerede açık kaynak sadece anlamına gelir başkası sahip yazılım Yazılı hepimiz olabilir ki Aslında görmek ve hatta indirebilir ve kaynak kodunu değiştirmek. Ve Apache denir. 

Ve biz biraz daha kolay yaptık Apache 50 çağırarak CS50IDE kullanmak. Aslında can Böylece aşağıdaki anlıyorum. Apache 50 başlangıç ​​söylemek için gidiyorum. Ve sonra ben sadece nokta söylemek için gidiyorum. Ve biz bazı biraz bakın diyerek gizli mesaj Apache belge [ayarı? grup?] ev, ubuntu, yani ne olursa olsun, Çalışma alanını kesiyorsun. Başlangıç ​​Web sunucusu Başarıyla Apache 2. 

Çok uzun lafın kısası, ben Sadece bir düğmeye itti ve şimdi bu bir web sunucusuna açık TCP bağlantı noktası internette dinleme Belirli bir adreste 80. Ve burada diyor ve Bu dayansın değişecek Kullanıcı adınız ve diğer faktörlere, Ben bu tıklarsanız ama şimdi fark IDE50 nokta jharvard ve benzeri ve bu yüzden fark tüm bu zaman o Son birkaç için hafta, aklınıza gelebilecek Kendi adınızı fark Sağ üst tarafta gömülü olduğu CS50IDE köşesi. 

Ve aslında olmuştur bu adresi zaman hangi can at web üzerinden tüm dosyaları ziyaret edin. Şimdiye kadar, bu önemi henüz, C, çünkü genelde Bir çalışan şeyler istiyorum Terminal, değil web üzerinde. Ama bugün, başlangıç web tabanlı kod yazma Biz istiyoruz olduğunu Kamu URL'ler erişilebilir. Peki ben gidiyorum yapmak bu URL'yi tıklamak. 

Ve ben oldukça bkz fark çirkin endeksi, bir dizin listesi, ama ne dosya muhtemelen sizin de dışarı atlar? Hello.html. Ben kurtardı, çünkü bu Benim çalışma alanında dosyayı. Ve ben Apache web sunucusu söyledim neler David'in çalışma dizininde bakmak olduğunu. Ve kimseyi Dünya bu dosyaları görmek. 

Ve gerçekten, ben şimdi eğer hello.html tıklayın Ben tam da bu sekmede bu dosya içinde görüyoruz. Şimdi bulut 9'un yapıyor, fark bizim için biraz yardımcı bir şey. CS50 IDE içinde, orada olduğunu fark aniden bir adres çubuğu. Biz olmalarına rağmen nedeni budur CS50IDE ziyaret Chrome'u kullanarak, CS50IDE içinde kendi olduğu Şu anda bir web tarayıcısı sürümü. Ve böylece yerine gibi şeyler karmaşık, Ben devam edeceğim ve sadece bu URL'yi kopyalayın. Ben önde ve sadece gitmek için gidiyorum Kendi Chrome penceresini açın. Yani burada hiçbir sihirli, hiçbir CS50IDE var. Ben sadece tam anlamıyla yapıştırmak için gidiyorum Benim J Harvard URL ve Enter tuşuna basın. Ve işte şimdi ben ve teoride herkes internet, ben yapılandırılmış ettik uygun izinleri, Bu dosyayı ziyaret edebilirsiniz. Ve şimdi dedim eğer hello.html, işte orada Benim inanılmaz underwhelming web sayfası. Yani hızlı bir sağlamlık denetimi yapalım. Bütün bunlar nedeniyle kavramsal kadar kümesidir. Ve biz gerçekten aslında ettik nasıl HTML başına yazmayı öğretti. Herhangi bir sorunuz bugüne kadar Sadece oldu ne? Evet. CS50 bu web sayfaları kendi mu? Ne anlamda? İyi soru. Yani CS50 en CS50.io. sahibi Biz gerçekten bu etki alanı adını aldım. Ve çocuklar doğası gereği CS50IDE giriş, Eğer tüm alt etki denen olsun. 

Böylece malan IDE50-veya IDE50-Rob.CS50.io, Bu içinde benzersiz bir adres var Bizim alan adı. Tabii amacıyla Yani Kendi benzersiz adresi var. Ama biz tarafından şeyler basitleştirilmiş ettik Üst düzey etki alanını satın alma CS50 nokta I / O ve daha sonra herkes bir Bunun içinde, tabiri caizse. Ve biz bu geri geleceğiz Muhtemelen birkaç hafta içinde, Özellikle son projede Size zaman zaman bazı kendi etki alanı adlarını almak isteyebilirsiniz. Nispeten aslında basit. Pekala. Peki şimdi yapalım. Ben geri gidiyorum CS50IDE, nerede dosyayı sağ şimdi, hello.html, tüm bu ilginç değildir. Ben bir şey yapmak istiyorum Bundan biraz daha güzel. Yani böyle bir şey yapmak için gidiyorum. Açık paragraphs.html Let me. Yani bu önceden yazdığım bir dosyadır. Bunun en üstünde, gibi Her zaman, biz yorumlarınız. Ama HTML, yorum biraz farklı görünüyor. Hat, üç ve hat 14 üzerinde, Yorum başlatmak için sözdizimini görmek ve bir yorum sonlandırın. 

Ama hiçbiri şeyler de işlevsel konularda arasında. Bu sadece bir not var Burada neler oluyor insan. Ve sadece hızlı aklı olarak Ben aşağı kaydırma olmadığını kontrol edin, bariz Ne yeni biz sunduk etiketi? Uzakta gördüğümüz böylece etiketleri açık braket HTML, head, title ve body. Ama şimdi belli ki yeni ne var? 

Evet, s. P etiketi veya paragraf etiketi. Ve sonra ben sadece bazı varsayılan ödünç Latince metin benim paragrafları teşkil etmek. Ben ne istediğini, çünkü göstermek nasıl olabilir olduğunu HTML metin paragraf temsil etmektedir. Ve daha neler neler ortaya çıkıyor zaten burada var olduğunu Bir desen geliştirme. Ve beni go ahead ve bu yapalım. Beni ilk Apache kapatın edelim. Ve ben kendisini başlatmak için bunu söylemek için gidiyorum Yine bugünün kaynağın yedi içinde m dizin. Böylece her şeyi erişebilirsiniz. 

Ve şimdi, ben geri giderseniz Bu dizin listesi, Ben bugün her dosyasına bakın dikkat edin. Ve göreceksiniz sonraki sorun seti, yaparız Size talimat vermek tam bu iş için. Ben paragraphs.html açarsanız, bu olabilir hem de bir programlama dili gibi bakmak Size konuşmak veya Latince okumaz eğer. Ama bu sadece üç paragraf olduğunu Metnin bu HTML kadar işaretlenir. 

Ve paragraf fark Aralarındaki sonları. , Çıkıyor, çünkü ve hatta sizin bile Bunu yapmak için eğimli olabilir, gerçek dünyada oysa Eğer çizgiyi koymak istiyorsanız şeyler arasında sonları, Eğer olabilir oldukça basit Bunu yapmak ve Kaydet çarptı. Ve şimdi, burada yeniden eğer, haber her şeyin sadece birlikte bulanıklaştırır Metnin sadece bir blob. HTML aptal dil türüdür çünkü. 

Bu tür kullanılmak üzere tasarlanmıştır bir yol tarayıcı olacak sadece açıkça yapmanız bunu söylemek ne. Eğer söylemezsen Yani Bana yeni bir paragraf verin Yeni bir paragrafa bakın gitmiyorsun. Ve aslında ne Tarayıcı yapacak Enter hit bile olduğunu tekrar tekrar diyelim ve yine bu metin yolu hareketli Daha sonra ekranda aşağı tasarruf ve ardından tarayıcı gidiyor, yeniden Bu boşluk, tüm çökmeye Sadece tek bir görünür boşluk içine. Pekala. Yani paragraf etiketi. Ve böylece desen ne Burada geliştiriyor? Eh, bu durumda gibi görünüyor HTML tüm etiket başlayan hakkında ve bir etiket biten. Ve bir etiket nedir? Eh, bu sözdizimi sadece bir yığın var. Açık aparatı, bir anahtar kelime, Kapalı aparatı, bir etikettir. Ya da etiketi başlar. Ve sonra olduğunuzda Kendinizi ifade yapılır, gibi paragrafın ile bitti, Eğer aksini konuşmak bunu. Ama tam tersi oldukça geriye değil. 

Sadece aynı etiket en önek Böyle bir eğik çizgi ile isim. Pekala. Yani tüm bu heyecan verici değil. Ve aslında, biz yapmıyoruz Web tüm bu daha ilginç. Ne yapmak istiyorsanız Daha büyük ve cesur şeyler? Yani burada bir örnek çıkıyor headings.html olarak, nerede bedenimde, Ben, bir H1 etiketi, H2, H3 var dört, beş, veya altı, hepsi Oldukça gizemli görünüyor. Ama bu açmak gidersem örnek, hadi bakalım. Headings.html. 

Varsayılan olarak tarayıcılar verebilir Yani metin o büyük ve farklı boyutlarda kalın değil. H1 büyük. H6 sonra daha küçük ve bir arasındaki her şey. Yani hala ilginç ama var gerçekten biliyorum web. Ne istiyorum ben var bir liste gibi bir şey. . Yani burada bir madde işaretli liste var Harvard'ın evlerin üç. 

Eğer bunu hakkında nasıl gitti? Eh, list.html bir göz atın. Ve burada, biz bakın Funkiness biraz ama en Neler düşünelim. Yani sadece gördüm ne dayanarak, UL sırasız liste duruyor. Sırasız liste sadece işaretli demektir. Hiçbir sayı var. Orada da bir şey bir adlandırılan etiketi bir OL listeyi emretti. Sonra LI, liste öğesi demek hepsi bu. 

Ve bu yüzden otomatik Senin için her şeyi sayılar. Ama benim girinti yine tüm beyaz boşluk sadece benim hatırım için. Tarayıcınız değil aslında bakım olacak. Yani olsa bile yapamadın Bu, sadece temiz olması için yapmak Olsa eşitlemek olmamalı tarayıcı hala olacak sadece iyi anlamak mümkün. Ben reload vuruyorum benim Tarayıcı, ben reload tıklayarak ediyorum ve herhangi bir değişiklik oluyor Hala tarayıcı nedeniyle Yapmam gereken bunu söylemek tam olarak ne yapıyor. 

Pekala. Yani bu sadece metindir. Şimdi daha ilginç bir şey yapalım. Ben devam edeceğim ve Bu HTML ödünç. Ben devam edeceğim ve Burada yeni bir dosya oluşturun. Ve biz bu rick.html arayacağım. Biz orantısız var Kullanılmış bir şey Bu bir rick rulo olarak adlandırılan sınıf bu yıl, bilmiyorum, sadece organik olanları. 

Ve şimdi kontrolden çıktı var. Yani sadece onunla gitmek için gidiyorum. Ve ben Google'a gidersem Görüntüler ve Rick Astley. Yaptığımız neden bilmiyorsanız Bu, sadece Wikipedia'da okumak. Eğer linke tıkladığınız her zaman, Birisi bir yerde gülüyor oldu. Ve beni ahead-- oraya gidelim Biz en bu görüntüyü izin gidin. 

Yani burada biz var Google Görseller görüntü. Ve Şimdi bu olduğunu varsayalım Makul her yerde internette. Bu yüzden benim için sorun yok varsaymak gidiyorum Aslında benim web sayfasına koymak için. Ben devam edeceğim ve görüntü URL'yi kopyalayın. Ve şimdi ben Cloud geri giderseniz 9, en burada ne yapabilirim görelim. Yani burada sadece bir web sayfası. Bu, haha ​​Rick Astley olduğunu Ben şimdi geri dönmek için gidiyorum Benim tarayıcı, yeniden ve ilginç. 

Rick nerede? Bu yüzden bana ne oldu görelim. Aslında, ben gidiyorum Ben bunu yapmadım gibi davranamam. [Duyulamaz] buraya koydular. Biz bir an geri o geleceğiz. Yani burada rick.html var. Böylece Rick Astley değil. Çıkıyor Yani biz Aslında burada onu ekleyin. Bu Rick Astley olduğunu. Bana kimin bir görüntü vermek demek için gidiyorum Kaynak sadece kopyalanan URL, hangi görünüşte mutlu olduğunu doğum günü şey ya da diğer. 

Ve şimdi ben gidiyorum Böyle etiketi kapatın. Yani bu süper uzun sarma. Ama ben fark ettik Açık braket görüntü yapılır, Bu bir niteliği ile kaynak. Ve bu gerçekten uzun bir URL. Ve en sonunda, bu fark. Neden yaptım çizgi açılı ayraç yerine, her etiketi gibi, Açık dirsek sahip IMG, dirsek kapalı? Sadece bile eğer bir tahmin almak hiçbir benzerlik olursa olsun var HTML ile daha önce. 

Yani o kapatır nasıl Komut, ama neden Gerçekten sezgisel yapmaz duygusu biraz daha bir şeyler yapmak yakın görüntü gibi ayrıntılı? Evet. Evet. Sadece semantik, hiçbir anlamı yoktur Bir görüntüyü başlayan ve biten bir görüntü, o da orada ya da değil. Yani bir boşluk bırakmamaya mantıklı değil Bir resmin içinde başka bir şey için. Bunu sadece bunu yapamam. Ve böylece sözdizimi genellikle sadece olurdu içeride eğik yapmak Açık etiketi veya başlangıç ​​etiketinin ve ardından Kaydet çarptı. 

Yani eğer ben şimdi, bu dosyayı yeniden Burada iyi bir web sayfası pişirme var. Ve biz kesinlikle olabilir Gerçekten insanlar rahatsız Bunun yerine gömerek YouTube bağlantısı gibi. Ve aslında, her zaman Hiç YouTube'a gittin ve yanlışlıkla aslında bana izin rick kendimi burada yuvarlayın. Yani Rick rulo. Yani rick Buraya gitmek için gidiyorum roll--. 

[MÜZİK OYUN] 

Tamam, bir kişi sevdim. Peki, bütün bu zaman fark eğer Tabii, seni Paylaş bağlantısını tıklayın URL'yi olsun aslında can Bir e-posta veya adli görüntüde embed veya bir soruna ayarlamak veya bir slayt. Ve şimdi, ben yerine embed üzerine tıklarsanız, dikkat edin bu sefer, bu malzeme olmuştur. Devam edin ve bu kopyalamak için gidiyorum. 

Ve sadece bu yüzden biz, daha iyi görebiliyorum Benim metin düzenleyiciye yapıştırın olacak. Bu fark nedir YouTube söylüyorum edilmiştir. Bir her zaman ziyaret YouTube video, eğer embed video istiyorum senin web sayfası, sadece bu kapmak. Yani bu başka bir HTML etiketi bir iframe denir. Ya da hat çerçevesi içinde bir. Yani çok biraz daha bakar tüm diğerlerinden daha karmaşık. Yani resmin çıkıyor etiket ve görünüşe iframe etiketi denilen nitelikler nelerdir alır. 

Ve bu başka bir şeydir HTML sözdizimi parçası. Etiket en ilaveten isim, açık dirsek etiket adı, etiketin davranışını kontrol edebilirsiniz niteliğin bir sürü alarak değerine eşittir. Özellik değerine eşittir. Ve böylece, örneğin, YouTube bize anlatıyor Bu videonun genişliğini istiyorsanız 420 piksel ve yüksekliği olmak 315 piksel olması, işte bu nasıl HTML bunu ifade eder. 

Videonun kaynağı oluyor uzun YouTube URL olmak ve daha sonra diğer bazı şeyler , çerçeve sınır sıfır gibi böylece muhtemelen var demektir şey çevresinde hiçbir sınır. Muhtemelen tam ekran İzin kullanıcı demektir Bir düğmeyi tıklatın ve Aslında tam ekran video. Gerçekten olmak istiyorum Yani eğer Rick nokta HTML burada etkileyici, resim etiketi kullanmak yerine, let bana bunu silmek yerine bu yapıştırın. Ve şimdi yeniden yükleyin. Ve şimdi burada biz tekrar gitmek. Pekâlâ, bu kadar yeter. Pekala ben çalışacağız, böylece Sert tekrar yapmak için değil. Yani burada paketler bazıları nelerdir? Bu web sayfalarında Yani HTML gibi çirkin vardır, aslında oldukça basittir. Bir programlama dili değildir. Bu işlevler yok. Bu döngüler yok. Bu koşullara sahip değil. Sahip olduğu tüm onlarca olduğunu Farklı etiketler, her biri sıfır veya daha fazla özelliklere sahiptir. Ve aslında, eğlenceli hakkında ne HTML dalmak başladığınız Çok kendini öğretilebilir olmasıdır. 

Tek gereken bir anlayıştır HTML genel çerçevesi. Bir etiket nedir, bir nitelik nedir, aslında bir web sayfası yapılandırmak nasıl aşağıdaki gibi. Ve her şey gerçekten sonuç bir online referans ararken ya da bazı nasıl Googling tekniği ya da gördüğümüz gibi, Facebook'un kaynağında bakarak Kod, bir web sitesine bakarak Eğer ona sevdiğim kaynak kodu var ve anlamak ne var geliştiriciler Aslında bir şeyler ortaya koydu. 

Bu yüzden de görüntüleri yapabilirsiniz. Ve aslında, biz bir an önce yaptım. Beni go ahead ve size sadece göstereyim. İşte bazı örnek kod var. Hiç huysuz kedi görmek istiyorsanız. Yani can fark Burada bir resim etiketi var. Ve ben bunun üzerinde bir yorum var. Ben alternatif var erişilebilirlik için metin. Bir ekran kullanılarak yüzden kimse görme nedenlerle okuyucusu aslında o olabilir onların Ekran okuyucu huysuz kedi söylüyorlar. Eğer yapamam, çünkü görüntüyü görmek, onlar En azından onların bilgisayar olabilir o sözlü onlara ne. Ve o dosyanın kaynak cat.jpeg olduğunu. Yani aslında, ben gerçekten istedim Ben ne olabileceğini, zeki olsun done-- Ben bu yüzden, Rick Astley gitmek için söz veriyorum Bunun yerine bir kedi için google gidiyorum. Ve ben Google Images giderseniz Burada, biz kabul edeceğiz bu benim kedi bir resmi vardır. 

Ben kontrol tıkladım olduğunu varsayalım veya sağa yanlışlıkla, bu tıklanan ürpertici. Ve cat.jpeg ben gidiyorum Benim masaüstünde kaydedin. Şimdi beni bulut 9 geri dönelim. O burada yapabilirsiniz edin Yerel dosya yüklemek için gidin. Ve ben bu kapmak eğer Dosya, cat.jpeg, haber Ben sürükleyebilirsiniz olduğunu ve bulut 9 içine bırakın ve burada bana bağırma olacak. 

Biz zaten ettik çünkü Sana bir cat.jpeg dosyası verilmiş, ama süper kolay Eğer ettik bir fotoğraf kapmak Facebook alınan fiske ya da bu gibi ya da aslında sürükleyin ve bırakın Daha sonra bulut 9 içine ve bunu yapmak Kendi kişisel parçası Web sitesi veya sorun yakında göreceğimiz gibi yedi veya sekiz ayarlayın. Ve sonra sizi Nihayet o kediyi ziyaret Ben aynı kediyi indirilen varsayarak, Bu ki- haber çok güzel oldu. 

Ne görürdünüz olduğunu Burada bu yüzü gibi bir şey. Dosyaları böylece sen Bir web sayfası içinde başvuru ya kendi yerel olabilir diğer bazı sunucu üzerinde hesap veya uzak Rick'le durumunda olduğu gibi Biraz önce Astley fotoğraf. Peki ne else-- Başka burada yapabiliriz? Öyleyse aşağıdaki bir göz atalım. Tür ne serin biliyor musun? 

Bu, şimdiye kadar hale olmuştur Çok statik web sayfaları. Ben şöyle şeyler baharat istiyorum. Ben kendi arama motoru yapmak istiyorum. Yani diyelim, bir arama motoru yapmak için go ahead ve bunu yaparken başlayın. Devam edin ve oluşturmak için gidiyorum Yeni bir dosya search.html denir. Ve biz çevrimiçi sürümlerini prefabed var. Whoops. Terminal penceresine yapıştırın vermeyin. Online Prefabrik sürümleri. Ve ben şöyle başlamak için gidiyorum. Yani burada başlangıcı Bir dosya search.html çağırdı. Ben kaydetmek için gidiyorum Bugünün kaynak dizini. Ben bu ara arayacağım. Aslında, biz daha iyi yapacağız. CS50 Arama ve aslında marka o. Ve şimdi, ben söylemek için gidiyorum H1 CS50 Arama gibi bir şey. Ve sonra buraya, H2 yakında. Ve sadece H1 tekrarlamak ve H2 Ne sırasıyla demek? 

Evet, çok büyük ve kalın ve kadar büyük, ama yine de cesur değil. Yani bu kaydedip buraya giderseniz, dosya search.html görelim. Pekala, ve bu bir [inaudible] haklıydın-- olduğunu. Yanında olmak. David karıştı. Oh, doğru var. David aptalın teki. TAMAM. Yani orada öyle. Yani CS50 arama yakında. Yani şimdi, sentez edelim Geçen hafta ne yaptığını. 

Konuştuğumuz Nerede HTTP alt düzey mekaniği. Ve bu yeni fikirler HTML, hangi adildir Bu biçimlendirme dili nerede tam olarak ne yapacağını bir tarayıcı söyle ve kendi arama motoru uygulamak. Bunun yerine sadece yakında söyleyerek, ben tanıtmak için gidiyor bir şey form etiketi denir. Ve bu formda, ben gidiyorum Bir giriş alanı gibi bir şey var. 

Ve bu girişin adı alan, bunu diyeceğim S. Ve bu giriş alanının türü Ben söylemek için gidiyorum sadece "metin" olduğunu. Bir metin alanı ve biz olacak bkz sadece bir metin kutusudur. Ve böylece var burada algılamaz Bu noktada bunun içinde her şey. Ve bu yüzden sadece gidiyorum Bununla etiketi kapatmak için ileri etiketi kendisi sağ çizgi. Ve sonra ben gidiyorum bir başka girişi var. Giriş tipi göndermek eşittir. Ve sonra ben gidiyorum de bu bir kapatın. 

Ve şimdi ben buraya gitmek için gidiyorum. Ve zaten biz görmek çok çirkin de olsa, ben ettik başlangıcı var Burada kendi arama sayfası. Aslında bana çalışalım biraz bu kadar temiz. Üzerinde çıkıyor Burada girişi, ben olabilir Yer tutucu olarak adlandırılan başka bir nitelik. Ve ben anahtar kelimeler gibi bir şey görebilirsiniz, ya da daha spesifik olarak, q sorgulamak. 

Ve şimdi, ben, fark gri metin bu tür edilene kaybolur yakında yazmaya başlayın olarak, ama muhtemelen bir şey Diğer web sayfalarında gördüm. Ben gerçekten Gönder düğmesini sevmiyorum. Yani aslında vereceğim Düğmesine arama değerini gönderin. Ben yeniden Ve eğer şimdi, fark Benim düğme arama adlandırılır olur. Sen Gerçekten bilmiyorum, bilmek Burada logosu gibi. Yani Google Yazı jeneratör. 

Ben daha bu kadar baharat istiyorum. Yani CS50 arama. Bana kendi logosunu oluşturmak edelim. Bu güzel görünüyor. Yani şimdi bana bu hadi as-- tasarruf sağlar. O nereye gidiyor? Orada. TAMAM. Kaçırdım. Farklı kaydet. Aptal tarayıcılar. Stand by, biz gidiyoruz Bu kez ve herkes için sabitleyin. Oraya gidiyoruz. Pekala. Özür dilerim. İzin günü. Şimdi bu korkak. Tam ekran çıkın. Pekala. 

Şimdi, normal gibi kişi olarak kaydetmek. Logo.gif. Şimdi CS50IDE ve gitmek için gidiyorum Ben sadece logoyu kapmak için gidiyorum, Ben içine sürüklemek için gidiyorum benim kaynak yedi dizin, dosya zaten ben bu konuda iyiyim, var. Yani ben bunu geçersiz kılmak için gidiyorum Ben zaten vardı çünkü. Ve şimdi nasıl bu kurtulmak mı? 

Burada go ahead ve yapalım görüntü kaynağı logo.gif eşittir. Bu kapatın. Kaydedin. Ve şimdi benim arama geri giderseniz sayfa, şimdi oldukça iyi görünüyor. Pekala, öyle değil vardır bu yüzden Oldukça kullanışlı bir şey yapmadım. Aslında, bana arama deneyeyim ve bir kedi için ne olacağını görmek. Kediler. Kahretsin. Bu sadece görünüşte, çalışmıyor. Yani önemli parçası nedir Burada eksik? 

Doğru, herhangi bir HTML bilmiyorsanız bile, Ben telefon formu işaretleme başladım ve ben, girdileri nasıl bunu söyledim Bana bir metin kutusu vermek ve bir düğmeye tıklayın görünüşte ne parça eksik? Biz aslında almak istediğinizi varsayalım düzgün çalıştığından bu şey. Ne yapmamız gerekiyor? Biz arka uç uygulamak için bir ihtiyaç var veritabanı veya arama motoru kendisi, ve bu almaya gidiyor açıkçası zaman sürü. 

Bu yüzden son kez ne yaptığımı hatırlamıyorum. Yani Google'da bir şey ararsanız ve önceden, kapalı hatırlama, anında arama. Bu yüzden bana bu kapatmak izin Böylece bu aslında Eski bir okul tarayıcısı gibi davranır, Şimdi kediler gibi bir şey aramak eğer, URL neye benzediğini hatırlıyorum. Oldukça şifreli değil. Ama orada gömülü, hatırlama, eğik çizgi aramasıdır. Soru işareti q kedileri eşittir. 

Ve bu bana vermek gibi görünüyor Arama sonuçlarında bir sürü. Yani ben yapacağım biliyor musun? Ben ödünç gidiyorum Bir dakika için Google. Ben üzerinden gitmek için gidiyorum Burada ve söylemek için gidiyorum Bu işlem oluşturan veya Hedef, bu nedenle, konuşmak için kelimenin tam anlamıyla Google olmalıdır. Ve yöntem istediğim Kullanım almak olacak. 

Yani eylem nedir? Eylem esrarlı, adlı ama bu sadece gelir kim idare edecek Bu formun eylemi? Ben Ara, tıkladığınızda Sonuç gitmeli? Ve şimdi benim forma geri giderseniz Burada ve benim web sayfasını yeniden ve şimdi bir şey aramak köpek gibi, şimdi fark Ben Google hayata yeniden gelmiş. Sağ? 

Ben bir şey aramak istiyorsanız Başka, değil sadece köpekler için çalışıyor, aynı zamanda kediler için çalışıyor. Ayrıca CS50 için çalışır. Ve tamam, bu sadece bir whelming altında, öyle değil mi? Pekala, ama aslında çalışıyor. Yani aslında neler oluyor? Yani kullanarak, benim tarayıcı öğretti ettik HTML, kullanıcı girişi almak ve aslında bu girişi göndermek uzak bir sunucuya HTTP kullanarak. 

Ve benim tarayıcıda çünkü HTTP, aslında anlar Ne ki URL'yi oluşturmak Ben, benim tarayıcıda üzerinde sonuna kadar ne fark ne zaman köpek için aradı. Ben Ara 'yı ise, fark Ben istendiği gibi URL değişiklikleri Sorgu köpek eşittir google.com/search~~V için. Ve bu formda nedeni var yöntem olsun, çünkü bilir, sadece orada o URL'ye bunu eklemek için. 

Şimdi, bu web sayfaları hala çirkin. Yani bir başka tanıştırayım sözdizimi parçası bugün eğer. Ve bu bilinen bir şeydir Basamaklı stil sayfaları gibi. Bu yüzden bana bir göz atalım Burada bu örnek ve görmek Biz Neler sonucuna eğer. Bu CSS0.html olduğunu. Ve bu nerede şeyler Biraz çirkin olsun. Maalesef Çünkü web dünyasında, HTML tek başına her şeyi yapamaz. Ve böylece isterseniz , web sayfası stilize aslında üzerinde durulması gereken farklı bir şekilde estetik. Yani burada, benim web vücuda sahip hangi iç sayfa büyük bir div olduğunu. Ve bir div sadece bölünme anlamına gelir. Yani bir paragraf ama gibi Aynı semantiği yok Metnin bir paragraf. 

Bu sadece anlamına gelir Tarayıcı, buraya gelir Benim web büyük bir dikdörtgen bölge sayfa, ben özel idare etmek istiyorum. Bu div başladığı Şimdi nerede, çizgi 21'dir. Ve sadece bir tahmin almak. On line 21 etkisi nedir Sayfanın içeriğini kalanı? Bunu Merkezleme. Bu kadar. Yani biz bir yol ve görmedim Aslında metni merkezleme. 

Aslında, benim arama motoru, Gerçek Google farklı olarak, Tüm sola üzerinde haklı. Ve şimdi hat 21, hey, diyorum Tarayıcı, sayfanın bir bölümü oluşturun. Sadece bana büyük, görünmez dikdörtgen ver. Ben istiyorum nasıl Web sayfası hakkında düşünüyorum. Aşağıda ve daha sonra stilize. Bu tırnak içinde, Şimdi, ikinci bir dildir Bugün tanıttı denilen basamaklı stil sayfaları. Neyse ki, çok değil, Bir programlama dili, bu yüzden çok kendi sözdizimi sınırlı oluyor ama aynı zamanda çok işlevselliği sınırlı HTML oysa tüm hakkında Bir web sayfasının verileri işaretleme ve bir web sayfasının yapısı. CSS hakkında genellikle Geçen mil, estetik, boyutunu ve rengini ve alma Bir web sayfasında tam olarak doğru yerleştirme. Gerçekten de, bu oluşturulmaktadır anahtar değer çiftleri ile. 

Bu, metin gibi bir özellik Bir iki nokta üst üste, hizalama, Bunun değeri ardından Bu durumda merkezi özelliği. Ve şimdi fark yuva bunları yapabilirsiniz. Ben her şeyi isteseydim Ben merkezli olmak vurguladık Bu yüzden ben satır 21 ve İlgili hat 31. Ama şimdi varsayalım John söylemek istiyorum Harvard benim ana sayfasına hoş geldiniz. 

Telif sembolü John Harvard. Ve ben ilk istediğinizi varsayalım Bu satırları oldukça büyük olması. 36 piksel. Yani iyi bir boyutu var. Ve ben cesur olmak ağırlığını istedi. Ama sonra bunun altında, Ben küçük metin istiyorum. Ve bunun altında, ben istiyorum hatta küçük metin. Özür dilerim. Bugün kapalı bir gün gibi hissediyor. 

Yani şimdi, ben bu ifade ne yapıyorum? Burada hat 22 üzerinde gömülü olduğunu div veya iç içe div, eğer sen. Çok kendi stil etiketi vardır. Ben 36 bir yazı tipi boyutunu belirtin. Ben cesur bir yazı ağırlığı belirtin. Burada aşağı, ben sadece 24 piksel belirtin. Ve nihayet, hat 28, ben 12 belirtin. Yani sadece hızlı aklı kontrol olarak ve bir insan okuma olarak bu, Ekranda hangi kelimeler aslında cesur olacak? Hangi çizgiler aslında kalın? 

Sadece John Harvard. Sağ? Hat 22 hey diyor gibi çünkü Tarayıcı, burada sayfanın bir bölümü var. O yazı tipi boyutu 36 noktaya olun. Yazı ağırlığı kalın olun. En kısa sürede ulaşırken İlgili bitiş etiketi veya hat 24 kapalı etiketi, Bu araçlar, hey tarayıcı, Eğer yapıyorsun ne olursa olsun yapıyor durdurmak. Ve haber olsa da, açık olması hat 22 bu özelliklerin hepsi var tarzı gibi, sizi hat 24 etiketi kapatın Yalnızca etiketinin adını anma. 

Sen kelime stili tekrarlamak değil ya Bu tırnak içinde bulunuyor şey. Ve şimdi bu bak eğer öyleyse Benim tarayıcıda, en atalım Bir sonuca bak. Bırak gideyim Önümüzdeki CSS 0 bu dosyaya. Ve bu, oldukça düz hala ama oldukça ilginç oluyor. Ama orada çıkıyor Burada yapabileceğiniz başka şeyler, ve verme riski Tamamen iğrenç bu, burada fark benim benim web sayfasının gövde, Ben komik bir şey yapabilirim bg veya arka plan rengi gibi. 

Ve hızlı, en sevdiğiniz renk nedir? Yeşil duydum. Pekala. Yani şimdi, ben şimdi reload vurursan, Biz yeşil bir web sayfası var. Pekala, o kadar da kötü değil. Ve şimdi, ben bu yapmak istiyorsanız gerçekten Serin, benim metnin renk yapabilirsiniz Hatta kırmızı. Yani bu neye benzediğini görelim. Şimdi oldukça iyi görünüyor. Ve burada, eğer gerçekten biriyle uğraşmak istiyorum veya olmak istiyorsanız insanlardan biri kim Bir web ziyaret sizi kandırmak için çalışır sayfa, Google kandırdın çünkü düşünce içine bir sürü var Anahtar kelimeler bakalım da-- bölgesinin yeniden. Nereye gitti? Ve bizi oraya olmuyor. Pekala. Ben bir kenara olarak söylüyorum Yani, biz olacak Bir kaç hafta içinde bu şeyler hakkında konuşmak biz hakkında konuşmak zaman Güvenlik, eğer gerçekten ve embed bütün demet Bir web sayfasında anahtar kelimeler, onlar görünmez olsanız bile Google gibi insan, kimse, elbette, Hala aslında bu bulabilirsiniz. Pekâlâ, ne güzel oldukça hızlı bir şekilde çirkin. 

Ve aslında, hepsi değil Kendi web aksine bu kadar Bir lisans, sayfa olan Ben bulmak için etrafında googling başladı Eski web sitelerinin geçmiş sürümleri. Bu çok kötü oldu. Aslında buldunuz Sadece sınıfta önce bir. Ama orada kötüsü var. Bu görünüşte oldu benim 1996 yılında ana sayfa. Anlaşılan o olduğunu düşünmüş İnsanlara kendi adını sormak için uygun ellerinden geldiğince önce Aslında benim web sayfasına bakın. 

Ve sonra onları gösterdi Muhtemelen aptalca bir şey. Ben bir dahaki sefere daha kazıp edeceğiz. Ama şimdi, haydi tasarımın biraz düşünün. Biz stil hakkında konuştuk. Ve bu sayfayı bugüne kadar ve Ben yazdım her şeyi biçimsel oldukça temiz. Ama tasarım hakkında ne olacak? Eh, fazlalık bir çok şey var Burada yapıyorum ne. 

Ben kelime söz ettik yerlerde birkaç renk. Ben bir kaç yazı tipi boyutunu söz ettik yerlerde birkaç yerler ve cesur. Ve temelde, ben co değilim iki dil karışarak. Ben etiketleri ile HTML var benim nitelikleri ve sonra aniden, tırnak arasında, ben ikinci dil Bugün Yine, sadece bu denir CSS, Anahtar değer çiftleri veya bu özellikler iki nokta üst üste ile ayrılmış. 

O kadar çıkıyor gibi C nerede dışarı faktör başlayabilirsiniz başlık dosyaları içine bazı kod, bu yüzden HTML aynı şeyi yapabilirsiniz. Aşağıdaki gibi Ve bu doğru bir adımdır. Bu sürüm, CSS1.html olduğuna dikkat edin aynı web sayfasını yapısal. Yani bir sürü var divs, ama bu kez ben oldum sargı kurtulmak kazanılmış sizin de göreceğiniz gibi div. 

Ve ben bu üç divs verdik üst, orta ve alt, benzersiz kimlikler. Bunun nedeni tarafından güzel, Bu bölünmeleri veren Sayfanın benzersiz tanımlayıcılar, Ben başka bir yerde bunları başvuruda bulunabilir. Nerede? Peki, beni yukarı edelim. Ve bugüne kadar, her zaman biz baktım Bir web sayfasının başında, ne Biz yaşadım sadece etiket Bir web sayfasının başkanı? Biraz daha yüksek sesle. Sadece başlık bugüne kadar. Ama orada çıkıyor birkaç diğer şeyler Eğer orada birini koyabilirsiniz hangi bir stil etiketi denir. Yani bir an önce, biz baktı Bir stil özniteliği. Bir stil etiketi var ortaya çıktı. Bu içinde aittir Bir web sayfasının başkanı. Ve şimdi ne yapıyorum dikkat edin. Ben bu içinde var stil etiketi aşağıdaki. Ben tam anlamıyla hat 20 söz ediyorum Ben stilize istediğiniz etiket adı. 

Sonra açık küme ayracı var ve küme ayracı kapattı. , C ruhu içinde çok benzer ama Yine, bu bir işlev değil, Bu burada sadece bir sözdizimsel bir detay. Ve sonra tabii ki, ben söylüyorum Tarayıcı, hey tarayıcı, Sayfanın tüm vücudunu yapmak merkezi bir metin hizalama var. Ve sonra bu aşağıdaki söylüyor. Hey tarayıcı, bir HTML görürseniz sayfa unsur veya etiket o üst, özel bir tanımlayıcıya sahiptir yani karma sembolü burada sadece anlamına gelir üst benzersiz bir fikir, go ahead ve yazı tipi boyutunu yapmak 36 ve yazı ağırlığı kalın. 

Hey tarayıcı, kimin bir eleman Kimlik 24 piksel yapmak, orta olduğunu. Ve hey tarayıcı, görürseniz bir alt fikri, bu 12 piksel yapın. Sonunda etkisi Tam Sam. CSS 1 giderseniz, sayfa aynı görünüyor. Ama biz doğru bir adım uzaktasınız biraz daha iyi bir tasarım. Bana şimdi BB2'ye buraya geri dönelim ve yaptığım başka ne olduğunu görmek. 

Şimdi sayfa gerçekten çok temiz. Aslında, tüm sığabilecek Burada bir sayfada içindekiler. Ama ne yeni etiket I var Açıkçası, tanıttı? Bağlantı. Ve bu, bir etiket için en iyi isim değil bu anlamda bir bağlantı değil çünkü bunu biliyorum, ama bu demektir ki diğer bazı dosyasında bir bağlantı. Bu keskin C dahil benzeri tür 

Bu HTML yoludur tarayıcıyı hey demek, içeriğini gidip Dosya css2.css denir. Ilişki, benim için, Bir stil sayfası olmasıdır. Ve gerçekten de, bu ne bir Basamaklı stil sayfaları vasıtası S kullanıcısının. Bu bir stil olduğunu. Bu içeren sadece metin dosyası var mülkiyet bir sürü. Bu stilleri bir sürü var Bir sayfaya uygulamak istediğiniz. 

Ve böylece bu görünüşte İkinci dosyaya atıfta. Ve bunu, CSS2.css açarsanız, Tüm Yaptığım fark kopyalayıp yapıştırın olduğunu ve tüm Bu dosyanın içine bu. Ve şimdi, hiç ettik bile daha önce bu şeyler kodlu, Sadece birlikte düşünün atasözü mühendislik şapka on, neden bu olduğunu Muhtemelen daha iyi tasarım? Bu CSS özelliklerini dışarı Faktoring, Kendi dosyasının içine koyarak. Olsa bile biz bu münhal Sorun gibi beş dakika önce ilk versiyonu. 

Biz gelişmiş ettik sayfa üslup, Bu sadece daha iyi bir anlamda tasarım. Neden düşünüyorsun? Evet. Daha esnek nasıl? Evet. Gitmek istediğiniz Yani eğer sırt ve bir şeyleri değiştirmek, Şimdi, bir yere sahip nereye şeyleri değiştirebilirsiniz. Ve aslında, bir şey gibi sorun, yedi set Biz hayata edeceğiz nerede hisse senedi alım satım sitesi, bir sahip olacak sayfaları sürü. Ve gerçekten olurdu can sıkıcı karar verirseniz, hm, Ben gerçekten istiyorum, 24 piksel sevmiyorum o 28 piksel veya biraz daha büyük olması. Ve sonra bir yapmak zorunda bul ve değiştir küresel ya web sitenizin tüm dosyaları açmak sadece aslında bir değeri değiştirmek için. Bu stilleri faktoring tek bir merkezi yerine, Eğer şimdi bir metin dosyasını açabilir herhangi bir program, CS50IDE olarak, , bunu değiştirmek kaydetmek ve bitti. Sen o yayılır ettik Her yerde değişir. Ve bu aynı olurdu Bir nokta h dosyasında yanı. Yani herhangi bir soru bu nedenle kadar bu sözdizimi? Pekala, biz ettik Her şeyi o görünüyor yapılır Aslında dışında köprüler uygulamak. Ve bu yüzden devam edin ve bu yapalım. Bana devam edelim ve Burada yeni bir dosya oluşturun. Ben onu aramak için gidiyorum link.html, bugünün kod koymak. 

Ve ben açık yapacağım braket doc tipi html. Bir kenara, bu şey olarak top, bu doc ​​türü bildirimi, Garip olan tek kişi o ünlem işareti ile. Sadece orada yapmak zorunda ve HTML sürümü 5 kullanıyorsunuz demektir. Eski sürümleri dil daha uzun vardı Eğer gerekli dizeleri oraya koymak. Yani burada bağlantı denilen bir örnektir. 

Burada benim web sayfası bir vücut gerekiyor. Ve burada, a href eşittir en HTTP://www.disney.com diyelim ve benim en sevdiğim web sitesi, biz söyleyeceğim. Pekâlâ, bu yüzden çok zararsız, kullanıcı dostu sayfa. Şimdi benim dizine giderseniz Burada listeleme ve link.html açmak, Biz hiper metin var. 

Ve gerçekten de, bu nerede HTTP H geliyor. Üstmetin transfer protokolü Metin aktarma hakkında diğer kaynaklara köprüler vardır. Ve gerçekten de, burada, tanıdık Retro eğer, mavi link tıklandığında eğer, Aslında Disney.com beni götürecek. Şimdi, oh, o yakında geliyor. Pekala, şimdi ne bazı Bu yansımalarının? 

Ve açıkçası, dünyanın başlar biraz daha tanımak için ve aynı zamanda küçük bir korkutucu aynı zamanda biraz daha Başlamadan kez savunulabilir öz Bunları anlamak için. Oran, bazılarınız, eğer gidersen Çünkü Gmail spam klasörüne yoluyla ya da Gelen kutunuzda, muhtemelen ettik E-posta çeşit kazanılmış Bunu değiştirmek isteyen var senin Parola belki ya da belki doğrulamak PayPal kimlik veya etajer. 

Ve aslında, almış olabilir Burada tıklama gibi bir şeyler söylüyor PayPal şifrenizi sıfırlamak için. Ve şimdi, eğer fark Bu Disney.com değildir gibi ama badplace.com ve , yeniden unutmayın burada metin olursa olsun bir şey söyleyebiliriz. Ve aslında, bu sadece kelime. Neden ben aslında süper kötü niyetli olmayın ve http://www.paypal.com söylüyorlar. 

Senin PayPal sıfırlamak Tıklayın şifrenizi ve şimdi yeniden yükleyin. Bu hak, oldukça meşru görünüyor? Ben tıklayınız olmaz, yani sadece bu diyor bir email gönder. Ama burada ikilemi dikkat edin. Bu www.paypal.com diyor ve aslında, bir dakika bekleyin, biz istediğini biliyorum güvenlik s. Yani şimdi, www.paypal.com HTTPS gidin, ama daha önce hiç yapmadım eğer, alışkanlığı içine alabilirim Burada küçük bağlantıları üzerinde uçan. Ve görmek zor Orada ekranda ve burada tüm bu daha kolay olur. Ama yol aşağı burada minicik köşe aslında tarayıcı yok Gittiğimiz söylüyoruz yerine paypal.com bir badplace.com için. Şimdi, nereye varmaya çalışıyorsun? Bugün yaptık tüm örnekler, biz sabit kodlanmış ve manuel yazdığınız. Web inanılmaz bir ilginç sizi zor Bu içeriğin, böylece web sayfaları kod statik ve asla değişiyor. Tabii ki, bizim tüm favori web siteleri bugün, Gmail veya Twitter ya da olsun Facebook ya da diğer herhangi bir sayı dinamiktir. Onlar değişiyor ediyoruz Kullanıcı girişine yanıt Sadece Google arama sonuçlarında gibi. 

Ve böylece Çarşamba günü, ne do Biz HTML ve CSS giriş bırakın Aldığımız ve arkamızda Şimdi biz hafife Bunu biliyoruz ve tanıtmak yeni bir programlama dili gibi denir PHP, C, bize verecek aslında programları oluşturmak için güç kendileri bu çıktıyı üretir. Bu durumda, biz kullanarak olacak PHP dinamik web üretmek için Bu yeni dili kullanarak sayfaları. Çarşamba günü bu konuda Böylece daha fazla. Sonra görüşürüz. 

[MÜZİK OYUN]