[MUZYKA GRY] DAVID J MALAN: Dobra, witamy z powrotem. To CS50. To jest koniec tygodnia siedem. I to jest koniec tego wymiatacza Polowanie z problemu ustawić cztery które można przywołać. Po odzyskaniu wszystkich tych pracowników, JPEG ty zostały zakwestionowane, jeśli chcesz, fotografować się z jak wielu z tych ludzi, jak to możliwe. Mamy całą masę zgłoszeń w ciągu ostatnich kilku tygodni, Rzeczywiście, sporo tuż przed południem Obecnie, z których niektóre są tymi tutaj złapać tutaj in-- wygląda like-- Annenberg Hall w godzinach pracy, jeden tutaj w Lowell House z Nickiem. Oto Ramon przyłapania na telefon. To było na lunchu CS50. To był Jason Skyping z bardziej kreatywne kolega, który zadzwonił do niego w ten sposób. Nie wiemy, co to było. 

[Śmiech] 

DAVID J MALAN: Ale że warto gigabajt. Oto Chang, który dosłownie uciekła ze sceny uniknąć sfotografowany jeden dzień, ale w końcu został złapany. Oto Nick. Oto Nick. Oto Nick. I tu jest Alison dół przez pola. I Zamyla stwierdzono nawet w konkursie tańca towarzyskiego. Więc przechodzimy te zdjęcia, dowiedzieć się, który złożył najbardziej najwcześniej, a nagroda jeden wspaniałe nagrody, jak obiecał w spec. I my również śledzić temat miejsca, które był zaangażowany. 

Kilka announcements-- więc obiad jest, ponownie, w ten piątek na 13:15. Jeśli chcesz do nas dołączyć, RSVP w tym URL tutaj. Jason ponownie pojawi się tutaj z jednej odcinków kilka lat z powrotem, co się stało spadnie na Halloween. I rzeczywiście, jak się ubrać dynia na dany rok. Jeśli oglądasz ten rozdział jego z sekcji 2011 osiem, jeśli jesteś ciekaw, w CS50.tv, myślę, to był rok, w którym Jego pompa powietrza działa. 

Jeśli następnie oglądać podobna sekcja w roku 2012, zobaczysz to Jason znacznie zaniżone, ponieważ nie funkcjonował garnitur, który jest tylko powiedzieć w ten piątek, gdybyś jak wyrzeźbić dyni z Daven i Gabe i inni, RSVP do głów w cs50.harvard.edu adres. Zapowiada się świetna zabawa. Daven, jesteśmy powiedział, rzeźbione dynie całe życie. Gabriel z Brazylii nie ma rzeźbione dyni na Halloween. Więc być tam z nimi, jak on uczy. 

Seminaria, meanwhile-- tak dowiesz się wkrótce o tym, co nasze oczekiwania są dla projekt końcowy, który zasadniczo będzie sprowadzać się do projektowanie i wdrażanie Najbardziej każdy projekt zainteresować Ci, choć podlega zatwierdzeniu i wskazówki od kolegów nauczycieli. Pod koniec semestr, wprowadzamy numer seminariów, które są fakultatywne zajęcia prowadzone przez kolegów nauczania i Harvard Pracownicy, przyjaciele trakcie całej Kampus, na różne tematy są styczne do Podstawowym zakresem szkolenia w niemniej jednak zastosowanie, zabawa, i różne dla potencjalnych projektów końcowych. 

Na przykład, po pierwsze, jeśli chcieliby do rejestracji, tam głowę do tego adresu URL. I to jest skład na tegoroczne seminaria sam. Ale sobie sprawę, mamy dziesiątki seminaria z dawnych lat, z których wszystkie są połączone z menu Seminars Opcja stronie kursu jest. Więc jeśli myślisz o wykraczające poza strefę komfortu lub zbierając kilka nowych umiejętności, na przykład programowanie iPhone aplikacje z Swift, nowy język z Apple lub Objective-C lub aplikacje Android lub programowania [? cue?] żarówki, lub którykolwiek z tematów tu i więcej, z powodu wyboru na stronie rejestracji. 

Więc zaczęliśmy i zostały zawarte na Poniedziałek z patrząc na HTTP. Tak szybkie refresher-- HTTP, Hypertext Transfer Protocol. Ale co to tak naprawdę oznacza? Co to tak naprawdę oznacza? Czy to ręka? Wiem, że jesteś po prostu zarysowania głowę. Ale chcesz zaproponować co HTTP jest? 

Komputery jak: Widownia komunikować się z [niesłyszalne]. DAVID J MALAN: brakowało mi ostatnią część. Jak komputery komunikują with-- 

Serwery internetowe: publiczność. DAVID J MALAN: dobre-z internetu serwery, aw szczególności, serwery WWW. Z powodu wycofania, jest kilka usług w Internecie, z których niektóre Prawdopodobnie używasz codziennie między czacie i wiadomości, czat i www i e-mail, i podobne. I HTTP jest tylko Protokół przeglądarek internetowych mówić, gdy komunikuje się z serwery WWW, i vice versa. I analog ludzki świat może być, Kieruję moją rękę uścisnąć niektóre inne człowieka i on przyznaje, rozszerzając jego lub jej ręka również. Więc to tylko protokół, zestaw konwencji. 

A co w istocie są te konwencje? Cóż, to po prostu sprowadza się do wysyłanie wiadomości iz powrotem, jak pokazano tutaj. I jest kilka sposobów które można wysyłać takie wiadomości. I być może najbardziej powszechne jest znany jako get. I zobaczymy, kontrast to niedługo. 

Ale wniosek uzyskać z poziomu przeglądarki do serwera po prostu wygląda tak. To kilka tekstów, które stawia wewnątrz wirtualnej obwiedni. Na zewnętrznej kopercie przejść kilka kawałków szczegółów. Co musi się udać na koperta, że ​​tak powiem, W celu uzyskania takiego żądania to ode mnie na serwer WWW? Tak. 

Publiczność: Twój adres IP. 

DAVID J MALAN: Mój adres IP w polu Od, by tak rzec, i oczywiście, adres IP odbiorcy. Jednak w przypadku pakietu internetowej potrzebujemy trochę więcej szczegółów To nie wystarczy tylko wysłać kopertę do serwera, dlatego, że serwer może być nasłuchiwanie różnych typów ruchu internetowego. Więc co jeszcze musimy zrobić oprócz IP odbiorcy? Tak? 

Publiczność: Czy TCP? DAVID J MALAN: Dobra. TCP-- 

Publiczność: Adres. 

DAVID J MALAN: Adres, lub port, jak to się nazywa. Blisko, ale numer portu TCP. I jest kilka z nich. Ale na pewno najbardziej Należy w końcu znajomy być 80, co jest domyślnym jeden wykorzystywane do ruchu w sieci. A inny znajomy Wkrótce będzie jeden 443, który stosuje się do bezpiecznej internetowej ruchu, adresy URL, które zaczynają się od https. 

Więc to, co się dzieje wewnątrz tej koperty. I uzyskać / po prostu oznacza, dać mi domyślna strona. Daj mi korzeń trudne jechać na tym serwerze. I miejmy nadzieję, www Serwer odpowie, OK i numer 200, który jest po prostu Konwencja mówi, tak, wszystkie jest rzeczywiście OK. Oto strona. Rodzaj strony internetowej będzie być tekst, ale bardziej konkretnie, HTML, które mamy zamiar nurkować z powrotem do. I kropka kropka kropka tylko środki, tutaj jest HTML. I to gdzie odebrać dziś historię, rzeczywiście pisanie kodu HTML, HyperText Markup Language, które jest język, w którym Strony internetowe są napisane. To nie jest język programowania. Nie ma funkcje lub pętle lub warunki. Jest to język znaczników, jak dobrze znów zobaczyć dzisiaj, że pozwala na określenie jak struktura i stylizować estetycznie strona. 

Więc to był jeden i tak naprawdę tylko strona spojrzał na razie krótko, w poniedziałek. I zauważyć kilka Najważniejsze charakterystyki. Istnieje wiele otwartych kątowe Uchwyt i blisko kątowy wspornik. W między tymi, kątowe Uchwyty są słowa. I mamy zamiar rozpocząć nazywając te słowa tagi. Więc głowa wspornik otwarty Uchwyt głowicy i zamknięte są otwarte i zamknięte znaczniki, lub rozpoczęcia i zakończenia tagi odpowiednio, elementu HTML, jak my to nazywamy, zwany głową. I stosuje ten sam żargon z ciałem HTML i tak dalej. 

A co miłe jest HTML-- i rzeczywiście, będziemy strasznie mało czasu spędzają na nim, ponieważ będziesz po prostu dowiedzieć się, w większości jakie funkcje ma, gdy faktycznie mają konkretny problem, do solve-- przekonasz się, że Przeglądarka jest bardzo głupi. To po prostu będzie do-- podobnie computer-- co powiedzieć to zrobić. I tak, gdy masz otwarte Uchwyt HTML na samej górze tam, że w istocie oznacza po prostu, hej, przeglądarka, tutaj jest strona, napisana w HTML. 

Kiedy widzi otwarty uchwyt głowy, że po prostu oznacza, hej, przeglądarka, tutaj jest szef, lub najwyższa część mojej stronie internetowej. Kiedy widzi wspornik zamknięty głowy, że po prostu oznacza, hej, to wszystko na głowie. Czuwanie na coś innego. I to jest coś innego podobno będzie ciało. A jeśli nie masz, jak tag masz tylko cześć, przecinek, świat, że po prostu będzie surowy, że tekst ostatecznie jest wyświetlany na ekranie. 

Teraz można zauważyć też wcięcie tutaj. Prawdopodobnie można wywnioskować, jak mamy stylizując go. Za każdym razem, gdy otwieram tag, że tak powiem, to wcięcie. I za każdym razem zamykam tag, ja nie-tiret, w duchu podobnym do klamrach. A poza tym, jestem miły korzystania mój osąd. Zauważ, że nie przeszkadza uderzenia Wprowadź wewnątrz tego tagu tytułu. Dlaczego? Cóż, po prostu zdecydował, że wyglądał trochę czystsze do mnie, człowieka, po prostu nie przeszkadza robić. Więc znowu, istnieje pewne Orzeczenie wymaga tylko jak jest w C lub dowolnym języku. 

Ale zauważmy też, że to wgłębienie nadaje się do modelu mentalnego, nie do ponad skomplikować. Ale drzewo, prawda? Jeśli myślisz o Internecie Strona, najwyraźniej napisane tak, jak jest ładnie wcięty w ten sposób, można prawie myśleć o otwartym uchwytem Uchwyt zamknięty tag HTML jest rozgraniczenia główny węzeł, drzewo genealogiczne węzeł styl w stylu drzewa patrzyliśmy na ostatni piątek. 

I rzeczywiście, mamy tu na co my nazywamy DOM, D-O-M, dokument model obiektowy, fantazyjny sposób na powiedzenie drzewo, które stanowi, że HTML. I zauważ, że HTML ma, to mówimy, jak drzewo rodziny, dwoje dzieci. Po lewej stronie jest głowa. Po prawej stronie jest ciało. 

I tak jak bezmyślnej myśli ćwiczenia, głowy, oczywiście, jak wiele dzieci ma Zgodnie z tą strukturą? Więc po prostu jeden, title-- i dlatego mamy strzałka będzie od głowy do tytułu. Więc to jest tak, jakby w tej osoby drzewo genealogiczne miał tylko jednego potomka. A potem sam tytuł może można powiedzieć, aby mieć dziecko też. 

Przypomnijmy, że miał HTML witam, przecinek, świat pod nią. A ja po prostu wyciągnąć go w owalny zamiast prostokąta tylko przekazać, że choć semantycznie to węzeł w drzewie, że tak powiem, To coś w rodzaju zasadniczo różne. To nie jest znacznik. Lub bardziej poprawnie, to nie jest elementem. To tylko węzeł tekstowy, jeśli będzie. Ale to są zupełnie arbitralne konwencje człowieka. To jest właśnie mój sposób reprezentujący co będę jako kruszywo nazwać dokument. 

A na marginesie, w rzeczy Super lewym górnym rogu, otwarty nawias wykrzyknik doc typu HTML, to wygląda jak znak, ale głupi przypadek rogu gdzie że to właśnie tam, kopiować i wklejać wskazanie przeglądarek to jest wersja HTML 5. Świat się zmienia, co Pierwsza linia kodu na stronie powinna być. To po prostu oznacza, wersja 5. Więc to nie dość wyglądać jak inni. 

Dobrze, że tak się powiedział, będziesz teraz doceniam to dość to głupie tatuaż ktoś dostał. 

[Śmiech] 

DAVID J MALAN: Dobra, A teraz faktycznie nurkowania do robienia czegoś z tym. Będziesz przypomnieć, że ostatni raz I otworzył Appliance CS50 i zrobiłem coś tak proste, jak otwarcie gedit. I zapisaniu pliku, nawet na mój desktop-- nigdzie special-- jak hello.html. 

Więc pozwól mi to zrobić again-- hello.html Enter. A teraz w tym pliku, będę śmiało i replikacji, co właśnie saw-- doc typu html Potem zamierzam Uchwyt HTML zrobić otwarty zamknięty uchwyt. A potem będę zapobiegawczo otworzyć i zamknąć znacznik. Dlaczego? Wystarczy więc nie zapomnij później. To po prostu dobra praktyka, jak otwarcie i zamykanie nawiasów klamrowych na raz. 

A potem, co było dalej? Można myśleć o tatuażu. 

Publiczność: głowa. 

DAVID J MALAN: głowa. A następnie w tutaj, miał tytuł, myślę. A tytuł był arbitralny, hello, world blisko tytułu. A potem na dół, ciało, z course-- następnie zamykamy znacznik ciała. A potem po prostu trochę niepotrzebnie, Miałem to samo tutaj. 

Tak więc twierdzenie, że jest to strona internetowa. To jest coś, mogą teraz żyć w Internecie, chociaż oczywiście to dosłownie życia na pulpicie teraz. Ale rzeczywiście, jeśli zminimalizować gedit, Do zobaczenia na pulpicie jej ikona. Mimo, że jest to urządzenie, można to zrobić w systemie Mac OS bez TextEdit lub Okna z Notatnika nawet. 

A jeśli pójdę dalej i kliknij dwukrotnie że nawet i wybrać-- dobrze, niech nie zaznaczyć, że ponieważ Chrome nie jest otwarcie. Idziemy do przodu i otworzyć Chrome. A następnie wykonaj polecenia open-O dla I przejdź do mojego pulpitu i otwórz ten plik. W ten sposób przeglądarka interpretuje HTML, od góry do dołu, od lewej do prawej. Hej, tu jest przeglądarka HTML. Oto głowa. Oto tytuł. Oto ciało. I rzeczywiście, to jak to sprawia, że ​​stronę internetową. 

Ale zwróć uwagę na adres URL. Nikt z was nie może ciągnąć się tego specyficznego Strona na swoich laptopach w tej chwili, nawet wewnątrz Twojego Urządzenie za pośrednictwem tego adresu URL, ponieważ pliku: // oznacza to faktycznie w moim systemie plików, mój dysk twardy, nie twoje. Więc to nie jest tak użyteczne. 

Załóżmy teraz ruch w kierunku zastosowanie rzeczywistej serwera WWW. I okazuje się, że CS50 Appliance to więcej niż tylko środowisko, w którym można napisać kod w C i skompilować i uruchomić go jak już robi. To również zostało skonfigurowane przez Pracownicy reprezentować typowy internecie Serwer to w internecie, jeden, że może zapłacić za lub taki, który znajduje się w tak zwanym chmury. 

I to działa Standard darmo open source oprogramowanie, na przykład czegoś nazwie Apache, który jest być może nadal najpopularniejszym internetowej Oprogramowanie serwera na świecie że tysiące stron internetowych użyć dzisiaj. I to również ma nawet Oprogramowanie jak MySQL, który jest serwera bazy że uda nam się w końcu dostać się do, który jest tylko powiedzieć Mogę zacząć leczenie moje urządzenie jako pełnoprawny serwer rozwiniętego że nie będę płacić za gdzie indziej. To po prostu żyje własnym laptopem do cele rozwoju i wygody. 

Więc śmiało skorzystać z tego. Mam zamiar iść do przodu i otworzyć okno terminala. I mam zamiar iść do przodu i move-- rzeczywiście, pierwszy jestem zamierza przejść do mojego pulpitu. Jeśli zrobić ls, nie hello.html. I zamierzam iść do przodu i zacząć używać mamy nowy katalog nie stosować przed dzisiaj. 

hello.html-- Zamierzam przenieść do ../vhosts dla wirtualnego hosts-- więcej na ten temat w future-- a następnie do katalogu o nazwie localhost, co jest podane do niemal pseudonim każdy komputer, czy jest to Mac, PC, Linux lub komputer, a następnie specjalnie do katalogu, że my, Pracownicy już stworzony dla ciebie, gdy Urządzenie zostało pobrane nazwie publicznego. I jak sama nazwa wskazuje, nic I umieścić w tym folderze, w teorii, będzie teraz publicznych, przynajmniej ludzi którzy mają bezpośredni Podłączenie do komputera. 

Więc teraz pozwól mi iść do przodu i wykonać cd do tego samego katalogu więc można zobaczyć, co jest dzieje i typu ls. I rzeczywiście, to Jedyne, co tam jest. I twierdzą, że teraz, bo mam umieścić to złożyć hello.html wewnątrz katalogu nazywa się wewnątrz katalogu publicznego nazwie localhost wewnątrz katalogu vhostów, które nazywane dzięki pracowników CS50 zostały wstępnie skonfigurowany do główny serwer WWW, Teraz mam nadzieję, że mogę to zrobić. 

Mam zamiar otworzyć nową kartę. I zamierzam iść nie do file: //. Mam zamiar używać rzeczywisty http / localhost, które ponownie, to pseudonim na własnym serwerze. A potem mam zamiar udać się do tego, co nazwę pliku, po prostu być jasne? Gdzie jest ta historia prawdopodobnie będzie? hello.html. 

Więc innymi słowy, chcę teraz tego jest mój własny komputer, moje własne urządzenie, jakby to rzeczywisty serwer. Jego pseudonim jest localhost. Ale myślę o localhost jak jak Facebook.com google.com, cokolwiek. To tylko moja lokalna nazwa. A następnie ostateczna chcę jest główny dysk twardy, by tak rzec, lub głównego serwera WWW, ergo ukośnik, a następnie hello.html nazwa pliku. 

Pozwól, że oddalenie i naciśnij Enter. I rzeczywiście, nie jest teraz moja strona internetowa. Więc to jest nieco inna. I to jest tak rozczarowująca. To jest stara wersja. Pozwól mi zmniejszyć czcionkę powrotem. To życia. Jest to nowe. Ale co się dzieje fundamentalnie jest teraz, że HTTP jest używany. 

Zróbmy to trochę bardziej jasne lub, jeśli chcesz, trochę bardziej skomplikowane. Pozwólcie mi iść do prawej dolnej rogu mojego urządzenia. I zauważyć, że to wszystko czas, nie było wiele. Jest to unikalny adres Twojego CS50 Appliance. Jest to prywatny adres, implikowanych przez 172,16, co oznacza po prostu tylko fizycznie Można uzyskać dostęp do tego serwera WWW. Wszystko jest za firewallem i dobrze chronione przed resztą świata z tego powodu zajęcie. 

A teraz zauważyć, ale jeśli idę do ten adres, nie w moim urządzeniu, ale w Mac OS-- idę wrócić tutaj. To jest teraz mój Mac. A teraz mam zamiar otworzyć ta wersja Chrome tutaj. I mam zamiar iść do http: //172.16.25 / A ja zapomnę rest-- 133. 

Więc mam zamiar odwiedzić z moim Mac że adres IP /hello.html Enter. A teraz widzę z mojego Mac że moim CS50 Appliance, który jest Jest to, że adres IP liczba jest rzeczywiście zachowuje jak serwer WWW w Internecie. To nie ma miło łatwo pamiętam nazwy jak Facebook.com, ale jest za pomocą protokołu HTTP najwyraźniej, choć Chrome jest rodzajem uproszczenia świat dla nas, ale nie pokazuje nam HTTP. Ale to jest rzeczywiście dokładnie to. Chrome jest tylko oszczędność niektóre naciśnięcia klawiszy w tych dniach. A to, co teraz widzimy. 

Więc to wszystko jest w porządku i dobre. Ale to dość rozczarowująca strona. Pozwól mi iść i zrobić coś trochę inaczej teraz. Więc pozwól mi wrócić do gedit. I zamiast cześć, świat, postawmy obraz. I twierdził, ze before-- pozwól mi odejść do mojej publiczności katalogu localhost. I pozwól mi iść dalej i kopiowanie cała masa plików z dzisiaj z moim folderze Dropbox na tutaj. 

Teraz gdybym wpisać ls, poszukaj na wszystkich tych plików że już dystrybuowane przez strona Kursu wcześniej dzisiaj, z których jeden jest wciąż hello.html. Więc nie, że jeden. I pamiętam ten głupi jeden z ostatniego time-- cat.jpg. Więc pozwól mi spróbować osadzić cat.jpg wewnątrz mojej stronie internetowej. 

Mam zamiar iść do przodu i zrobić cat.jpg zapisz. Pozwól mi wrócić do Chrome. I pozwól mi przybliżyć czcionki i teraz przeładować. Ups, gdzie umieścić to? Standby-- mam jeszcze stary wersja z mojego pulpitu Open. Więc pozwól mi iść do mojego vhost, mój localhost, mój publiczny i hello.html. Więc teraz pozwól mi iść do przodu i powiedzieć cat.jpg wewnątrz ciała gdzie chcę być wyświetlane i przeładować. Oczywiście, nie jest to poprawne. 

Więc muszę powiedzieć trochę przeglądarce bardziej świadomie, co chcę robić. Po prostu wpisując imię oczywiście niewystarczająca. Więc pamiętam, że nie było innego tag, obraz, img za krótki. To tylko dlatego, że ludzie nie lubię typu pełne słowa. A potem możemy zrobić źródło = "cat.jpg". 

A teraz mam zamiar zrobić jedna rzecz różni się tutaj. Nawet mimo wszystko nasze dotychczasowe mają tagów miał to pojęcie rozpocząć i tag tag końcowy, że tak naprawdę nie zrobić Poczucie na zdjęcie, prawda? Obraz jest albo czy nie istnieje. I tak ludzie się z prostszej konwencji. Gdy masz tag, który może zarówno rozpocząć i zakończyć w tym samym time-- to może być puste, po prostu tak speak-- umieścić ukośnik wewnątrz znacznika na samym końcu. Teraz pozwól mi wrócić do mojej przeglądarki. Hit Odśwież Cholera, coś jest nie tak. Prawdopodobnie widziałeś to od czasu do czasu w internecie, nawet jeśli to nie jest twoja wina. To wina serwera WWW. Co ody to zdają się wskazywać? To złamane. To miejsce, gdzie należy obraz. Tak? 

Publiczność: Ale to nie ma mają dostęp do obrazu. 

DAVID J MALAN: nie mają dostęp do obrazu. To, lub nawet gorzej, może to nawet nie istnieje. Zobaczymy, czy nie możemy rozpoznać, że. Przypomnijmy, od ostatniego razu, że jeśli w Chrome, w urządzeniu, lub nawet na komputerze Mac lub PC, przejść do menu Developer i przejdź do Narzędzia dla programistów opcja, która prawdopodobnie masz nie używane dużo lub kiedykolwiek. A jeśli pójdę do sieci i przeładuj stronę, niech spojrzy na HTTP wnioski, które są wykonane. 

Wygląda na to, hello.html jest rzeczywiście OK, więc 200. Ale cat.jpg jest 403. Więc to nie jest 404. Prawdopodobnie istnieje plik. 403 oznacza zabronione. Więc to jest trochę mylące. Mam zamiar wrócić moim oknie terminala. Pozwól mi przybliżyć się tutaj. I pozwól mi zrobić ls. Nie ma te same pliki. 

Teraz pozwól mi zrobić ls-l, które prawdopodobnie masz stosowane przed patrzeć na pliku rozmiary może lub znaczniki czasu. I widzimy całą masę Zdecydowana informacji. Ale zauważyć kilka szczegółów. Oto hello.html w tym wiosłować tu i tu jest cat.jpg. I to jest właśnie urządzenie jest przyjazny podkreślając JPEG na użytkownika w fioletowy tak. Ale co innego jest inaczej obok rozmiar pliku i nazwę pliku? 

PUBLICZNOŚCI: [niesłyszalne]. DAVID J MALAN: Tak, istnieje dwa więcej R tutaj. Zauważ, co hello.html się dzieje. Tak więc okazuje się, że imię Katalog publiczny to jest ważne. Wszystko w tym katalogu ma być publiczna. Ale to nie wystarczy, po prostu upuść pliki tam. Należy również zmienić Tryb z plików zmienić uprawnienia Nie plik proaktywnie być ustawienie domyślne, co jest, że tylko ja mogę przeczytać i napisać, że jest się właścicielem. Chcę cały świat wszystkich do być w stanie przeczytać mój plik, że tak powiem. Przeczytaj po prostu oznacza, zobaczyć go. 

I rzeczywiście, jak zobaczysz w problemu zestaw siedmiu, to co oznaczają te R w. Średnia tych dwóch niech każdy R jest indziej na świecie również przeczytać, zwłaszcza teraz, to w tym katalogu. Tak więc najprostszym sposobem, aby to naprawić iść do mojego wiersza i zrobić chmod na zmiany Tryb, a następnie zrobić A + R, w ogóle, wszyscy, wszystko plus r do odczytu, a następnie cat.jpg Enter. Nic się nie dzieje, co zazwyczaj oznacza coś dobrego. Więc ls-l again-- teraz spójrzmy na cat.jpg. I to uprawnienie Wydaje się, że zmieniło. Tak na marginesie, jeśli się błędem i, na przykład, po prostu się your-- Nie know-- esej publicznie dostępne przez przypadek, można zrobić odwrotnie, chmod a-R. Choć szczerze mówiąc, nie powinno znajdować się w katalogu publicznym w każdym razie, jeśli to jest problemem. 

Teraz wróćmy do moja przeglądarka i reload. I mam zamiar kliknąć trochę Ghostbusters symbol, aby usunąć tę część ekran, dzięki czemu możemy zobaczyć nowe żądania. I rzeczywiście, jest tu Grump Kot z przed. Ale co ważniejsze, technicznie, nie ma Numer 200, który Oznacza mamy to OK. W porządku, więc to wszystko jest w porządku i dobre. Ale nie robisz najlepsze strony internetowe, nie będziemy próbować zbyt mocno do dokonać wyrafinowane stron internetowych dziś. Ale niech przynajmniej coś zrobić bardzo obeznany przed grzechotanie od kilku innych tagów. Więc przypuszczam, że nie tylko chce kota tutaj. Załóżmy, że rzeczywiście chcesz to kot podłączenia się do czegoś. 

I może, na przykład, coś jak to zrobić. dla zakotwiczenia href dla hiper equals-- odniesienia i niech po prostu coś zrobić jak www.google.com końca Cytując blisko wspornika. A teraz szukać kotów. Blisko kotwica tag. Więc to ma tylko jeden rodzaj fundamentalnie nowy szczegół. Znacznik jest oczywiście inna. To imię do kotwicy href lub hiper odniesienia. 

Ale co ważniejsze, nie ma Funkcja syntaktyczna to tutaj. To jest to, co my zacząć dzwonić nie tag, ale atrybut. A jest coś, atrybut modyfikuje zachowanie etykiety. I tego atrybutu href, środki zmodyfikować zachowanie tej kotwicy tak, że kiedy jest kliknięty, to idzie do tego adresu tutaj. I oczywiście, że adres URL jest Google. 

W tym samym czasie, co to jest tekst tutaj będzie? Dobrze, że będzie co w rzeczywistości człowieka widzi jako podkreślony Link, takie proste. Warto więc spróbować. Pozwól mi go zapisać. Nadal jestem w hello.html. Ale w wersji online, zobaczysz rzeczywiste nazwy plików możemy pre-przygotowane. Pozwólcie mi iść do przodu i przeładować. A teraz jest to bardzo rozczarowująca strona nadal. Ale jeśli unoszą się nad there-- i to jest trochę małe, ale- widać w dole lewy rogu ekranu, to rzeczywiście będzie google.com. A jeśli kliknę, że to będzie trzepaczka mi drogę do rzeczywistego Google. 

Ale zauważmy tutaj szansa dla eksploatacji, jak na bok. I wrócimy do innych kwestie bezpieczeństwa przed długo. Bo nie ma to dychotomia pomiędzy, gdzie jesteś i co mówisz, można zrobić coś takiego this-- http://www.google.com. OK, a teraz jeśli przeładować po zapisaniu tej strony, wygląda na to, mam zamiar udać się do Google. Ale nie ma powodu, ja musisz przejść do Google, prawda? Mógłbym właściwie przejść do czegoś takiego badguy.com, odświeżyć stronę tutaj. I uwaga, to nadal wygląda jak Google. I tylko wtedy, gdy jestem ostry Wystarczy najechać kursorem nad tutaj widzę to nawet będzie przejść do innej lokalizacji. 

Więc jeśli kiedykolwiek dostał e-mail, zwłaszcza jeden z Paypal, lub pozornie z Paypal z prośbą, aby zalogować się na konto, to Dlatego nigdy nie należy kiedykolwiek kliknij linki w e-mailach, szczerze mówiąc, wszystkie linki w e-mailach. Jeśli wiesz, że masz rzeczywisty pieniądze na Paypal lub Banku Ameryki lub Fidelity lub którykolwiek Strona internetowa, ręcznie wpisz go w. Bo wygląda jak łatwo jest, aby nakłonić kogoś do przedstawienia co wygląda jak link. Ale faktycznie mógł go absolutnie wszędzie. 

I jest o wiele większa zagrożenia niż to. W rzeczywistości, to bit stycznej się, ale z najlepszych, jakie kiedykolwiek widziałem który został zamknięty, jest ktoś doprowadził ludzi to-- więc to może powiedzieć, kliknij tutaj, aby zalogować się na konto konto, konto bankowe. I to był Bank Zachodu. 

Więc ktoś kupił to. I to jest trochę łatwiej zobaczyć to w czcionce mono rozmieszczone powiększony w na projektor 30 stóp. Ale kiedy jest mała czcionka w e-mail, że odbierany, to wygląda bankofthewest.com, nie bankofthevvest.com, które ktoś zapłacił 10 dolarów kupić. A potem to doprowadziło ich do odpowiednikiem jakiegoś złej stronie. 

A zobaczysz too-- rzeczywiście możemy zrobić this-- jeśli pójdę do rzeczywistej strony internetowej, bankofthewest.com znowu wycofanie z ostatniej chwili że jeśli to jest ich strona internetowa i jesteś ciekaw, jak to działa, z pewnością można przejść do Narzędzia deweloperskie Chrome. I można zobaczyć wszystkie HTML ładnie sformatowany tam. 

Ale bardziej na miejscu, cam-- ty niech zamknąć this-- można przejść do widoku Twórca View Source. Dlaczego nie mogę po prostu skopiować wszystko to A potem może przejść w moim małym oknie gedit tu i zrobić swoją własną stronę internetową. Zapisz w hello.html. I pewnie to będzie złamać, bo to nie jest takie proste reguły. Ale teraz, jeśli ja odświeżyć własną stronę na moja CS50 Appliance i przeładować, OK, niektóre rzeczy się załamał. Ale jestem bardzo blisko o moja własna strona internetowa bankowość, prawo? Wszystko to HTML-- 

[Śmiech] 

DAVID J MALAN: --i nie actually-- i wiem, że jest ktoś, kto faktycznie kliknij te linki też. Tak wyraźnie, niektóre rzeczy się załamał. Ale, że zamierza prowadzić nas do dyskusji, niepotrzebnie teraz, jak do tego, co CSS, kaskadowych arkuszy stylów, są, i jak w rzeczywistości pobrać inne pliki HTML Pliki JPEG i pliki GIF Strona internetowa może być używana. Ale wszystko to jest osiągalny. Ale tak naprawdę sprowadza się do Te bardzo proste heurystyki. 

Więc teraz niech po prostu przejrzeć Kilka innych przykładów HTML tylko daje poczucie z tego, co jeszcze można zrobić. Na przykład, jest to list.html. Załóżmy, że chciałem zrobić stronę internetową z listą domów w quad. Mógłbym użyć tagu ul za nieuporządkowane Lista, a następnie dziecko element listy i następnie iteracyjne over-- lub lista, rather-- domy w pytaniu. 

A jeśli to się otworzę, zróbmy to. Chodźmy nie hello.html, ale list.html. Cholera. Jak mogę rozwiązać ten problem? To jest ten sam problem, jak wcześniej, prawda? Więc pozwól mi zrobić chmod-- oops-- chmod a + r od list.html. A teraz, jeśli wrócę do mojej przeglądarce i kliknij przycisk Odśwież, nie jest. Więc jeśli kiedykolwiek chciał zrobić wypunktowanie, możesz to zrobić. Jeśli chcesz być bardzo fantazyjne i zrobić uporządkowany, nie lista nieuporządkowana, zmiany te, ol, odświeżyć stronę, i teraz przeglądarka będzie liczyć to za Ciebie. 

Co jeszcze możemy zrobić? Cóż, kilka wiele innych, jeśli masz długie akapity text-- Na przykład, niektóre Tekstu łacińskiego jak this-- i chcesz go w osobnych akapitach, otwarte p, w pobliżu p dla tagu ust. I zrobić to jeszcze raz i jeszcze raz. I jeśli teraz otworzyć ten plik, paragraphs.html, dobrze, to staje się irytujące. Więc teraz niech po prostu wrócić do mojego szybka, chmod a + r r gwiazdę .html-- ładny mały karta dzika tak powiem. Należy naprawić wszystkie te problemy do mnie. Miejmy przeładować. Są trzy akapity. 

A teraz chodźmy do przodu i otworzyć jeden inny. Jak o stół? Zauważysz wygląd tabeli trochę bardziej skomplikowane. Ale to samo idea-- otwarte tag, otwarte tag, otwarte, otwarte, otwarty, blisko tag, otwarte tag. I to stało się na okres Stół, którego granica jest najwyraźniej będzie grubość 1-- cokolwiek że means-- wiersz tabeli, tabela Dane te, które oznacza komórkę. A jeśli wrócę do mojej przeglądarce tutaj i przejdź do table.html, można zobaczyć coś tak, ohydne. Ale my się do punktu gdzie możemy rzeczywiście dokonać rzeczy ładniejsza niż to. 

Więc pozwól mi stanowią teraz. Jest bukiety z większej ilości tagów. I HTML jest cudowny, aby podnieść bo, szczerze mówiąc, wszystko co musisz zrobić, jest patrzeć na istniejących stron internetowych z których znasz. I jesteś jak, och, to jak zrobili to estetycznie. 

Można też wyszukać dowolny internecie zasobów, jak działa HTML, i zobaczysz, że nie ma całe słownictwo z innych tagów. Ale z tego prostego modelu mentalnego sam, że prawie każdy tag otwarciu musi być zamknięty, to naprawdę nie wystarczy, aby nauczyć siebie HTML po zrozumieć te podstawowe idee tagów i atrybuty i sensowności że rozmawialiśmy o, zamykając wszystko, co możemy otworzyć tak, aby nie mylić przeglądarki. Więc teraz trzeba to bardziej interesujące poziom przechodząc do rzeczywistej. I chodźmy do mojego Mac tutaj, na google.com. A teraz notice-- zróbmy to. Mam iść do gongu Ustawienia, Ustawienia wyszukiwania. Chcę, aby wyłączyć ten przykry moment Wyniki rzeczą, gdzie natychmiast zaczyna reagować do pisania. Zróbmy to tak starsza szkołę faktycznie zobaczyć, co się dzieje. 

Więc mam zamiar zapisać mój Ustawienia tutaj Google. A teraz notice-- zamierzam szukać czegoś jak koty. I to jeszcze robi auto Kompletny tutaj, ale w oparciu o rzeczy ludzie mają wpisane w przeszłości. Zauważmy jednak, co się stanie. 

W adresie URL w momencie Jest to, po prostu google.com. I technicznie, to ukośnik. Google po prostu zapisywanie znak i nie pokazuje nam tego. Oni pokazują nam https, tylko być bardzo pocieszające, że jesteśmy w bezpiecznej lub zaszyfrowanej stronie. 

Więc pozwól mi iść dalej i szukać kotów. Teraz to się naprawdę Zdecydowana szybko. Spójrz na długość tego adresu URL. Ale okazuje się, że większość z tych rzeczy w adresie URL jest właściwie bezużyteczny. Mam zamiar rozpocząć usuwanie rzeczy, których nie rozumiem. Widzę koty. Rozumiem koty. Nie wiem, dlaczego koty są tam ponownie. I naprawdę nie wiem, co to jest nonsens. Więc jestem po prostu zamiar utrzymać podkreślając i usuwanie rzeczy że nie rozumiem, destylację URL do właśnie tego. 

Teraz pozwól mi się wprowadzić ponownie. Wygląda na to, Google wciąż działa. Tak więc z jakiegoś powodu, to dodajemy Wiele rzeczy do domyślnie ich adresu URL. Ale nie jest to bezwzględnie konieczne. Tak więc to, co jest miłe o tym? Cóż, pozwól mi iść do przodu i otworzyć Chrome Inspector. Jest mały skrót mysz dla niego. 

Przejdź do karty sieciowej. A teraz pozwól mi odświeżyć ta strona jeszcze raz. A ja trzymam Shift. Tak na marginesie, przeglądarek często lub zapisać w pamięci podręcznej informacje tylko ze względu na sprawność jest. Ale zwykle, trzymając Shift i przeładunku zmusi wszystko zacząć od początku. I to jest to, co chcę zrobić. 

I zauważyć, wszystkie te wiersze, które właśnie pojawiły. Okazuje się, że w danej sieci strona nie może być tylko jeden plik involved-- hello.html-- lub nie może być 52, jak w tym przypadku. Kiedy odwiedzić google.com, najwyraźniej, moja przeglądarka rozpoczyna się 52 oddzielnych żądań HTTP. Dlaczego tak jest? 

Cóż, wygląda na to, co jest w środku z tej strony internetowej w górę szczycie. Nie tylko tekst, ale nie rzeczywiste obrazy kotów ponad prawo. Jest tu kolorowe logo na lewej stronie. Nie wszystko z tych ikon do mikrofonu i tak dalej. Jest wiele elementów, budowanie Bloki, kawałki podstaw, jeśli chcesz, do tej strony. A co robi na przeglądarkę uzyskanie bardzo pierwszy plik, który Jest to wiersz tutaj, to jest w zasadzie iteracji w górę HTML do dołu, w lewo w prawo, patrząc na rzeczy takie jak znaczniki obrazu lub innych znaczników wspomnieć, że są i inne pliki kiedy je widzi, idzie i pobiera je przez HTTP, realną całość koperta metafora, a następnie wyświetla je w odpowiednie miejsce na stronie internetowej. 

Ale zauważyć tutaj, jeśli skupię się na pierwsze koty rzut, wyszukiwania, zauważyć, że rzeczywiście jest za pomocą protokołu HTTP 1.1. I niestety, Google Chrome teraz w wersji 39 jest rodzaj rzeczy dumbing dół i nie pokazuje nam aktualne nagłówki. Ale to, co jest rzeczywiście wysłał żądanie dla nie ciąć, ale / search? q = koty. 

Teraz, dlaczego jest to takie ważne? Cóż, mam zamiar wnioskować z tego, że jeśli Google obsługuje zapytań z tej formy, dlaczego nie zaimplementować własną wyszukiwanie silnik dla CS50, ale tylko z przodu koniec, tylko graficzny interfejs użytkownika. A my outsourcingu tylny koniec, Wyniki wyszukiwania rzeczywista Google. 

Więc w jaki sposób mogę to zrobić? Cóż, pozwól mi iść do gedit tutaj. I pozwól mi iść do przodu i otworzyć się, powiedzmy, nowego pliku. I mam zamiar zapisać to tymczasowo jako wyszukiwania-0.html. A potem w końcu, będziemy szybko naprzód do jednego I gotowych. 

I mam zamiar szybko wzbudzać typu doc Uchwyt html html otwarte blisko wspornik html. Potem mam zamiar zrobić głowę blisko głowy otwarty Tytuł CS50 Szukaj zamiast wyszukiwania Google. Tutaj będę mieć ciała, tu blisko ciała. A teraz muszę CS50 Szukaj. I rzeczywiście, niech budować to stopniowo. Mam zamiar iść do przodu i zamknąć to i rzeczywiście umieścić go w moim katalogu publicznym. Więc daj mi tylko jedną chwilę. search-0.html-- zamierzam tymczasowo nazwać search.html. Zamierzam chmod to A + R search.html. A teraz idę, aby go otworzyć. W porządku, więc to było szybko. Ale celem było po prostu się dostać do punktu posiadania tego tekstu plik o nazwie search.html. Więc nie wiele do obejrzenia jeszcze. Rzeczywiście, jeśli pójdę do mojej przeglądarce i Do search.html, to wszystko jest. Ale wiesz co? Mogę być trochę bardziej wyszukane. Czytałam w książce, że jest tag nagłówek nazywa h1. I mam zamiar iść do przodu i wykorzystać tę otwartą i bliską h1 h1. Odśwież stronę. A teraz większe i bardziej wyraziste, Nie wszystko, co ciekawe, ale przynajmniej jest strukturalnie bardziej interesujące. Ale teraz pozwól mi przedstawić inny znacznik. Okazuje się, że to tag formularz. I pozwól mi zamknąć ten tag. I okazuje się, tam że wejście tag ma atrybut o nazwie typu, który jest typ danych pola, jeśli będzie. I będzie typu tekstu. A jego wartość będzie być CS50 Szukaj. Blisko znacznik. I nie będzie żadnego pojęcia otwieranie i zamykanie z oddzielnych znaczników. 

Pozwól mi wrócić tu i zobaczyć, co się dzieje, przeładować. Pierwsze interesujące. Wygląda na to, że to pole tekstowe. I rzeczywiście, nie chcę umieścić wartość tam jeszcze. Pozwól mi wrócić tu i rzeczywiście dostać uwolnić się od tej wartości do keep it simple. Zamiast wartości, co chciałem dać tę rzecz była nazwa. I nie wiem, co to jest, więc wrócę do tego. 

Ale poniżej, chcę zrobić input type = submit. I ta wartość będzie CS50 Szukaj. I zobaczymy, dlaczego przeniósł się do tej wartości. Kiedy przeładować, wydaje mi się teraz początki mojego wyszukiwania silnik, super ohydne, choć szczerze mówiąc, to nie daleko od tego, co rzut Domyślna strona Google wygląda. 

Jeśli pójdę teraz tutaj, mogę wpisać koty i mam nadzieję, kliknij przycisk Szukaj. Ale ja nie dość jeszcze zrobić, dlatego, że nie wdrożyło, oczywiście, w bazie. Nie indeksowane internetowej dla wyników wyszukiwania. Więc muszę zlecić, że do Google. Więc jak mam to zrobić? 

Cóż, przede wszystkim I Trzeba dodać, a działania przypisać do mojego tagu formularza, który jest http://www.google.com/search. I wiem, że tylko z konieczności wywnioskować patrząc uważnie na ich URL. A teraz zgadywać. Co powinno to pole tekst prawdopodobnie nazwać, na podstawie których doszliśmy z wcześniej? 

PUBLICZNOŚCI: q. 

DAVID J MALAN: q. I w rzeczywistości nie potrzebują pytanie okazji okazuje się, ale Q jest rzeczywiście, q dla zapytania prawdopodobnie przez domyślne, po prostu dlatego, że to Larry i Sergey co wpadł lat temu. Więc teraz pozwól mi załadować tę stronę. Nie wygląda to wszystko, co różni. Ale teraz obserwować co się dzieje. 

Gdybym wpisać kotów i kliknięcia CS50 Szukaj i puścić, zauważysz, że się wymknąć się do rzeczywistej Google. Teraz Google jest trochę irytujące, że są one w dodanie dodatkowego parametru, jeśli chcesz, aby adres URL. To wszystko, co się dzieje automatycznie na stronie Google. 

Ważne jest to, że wydaje mi się, się, że generowany ten wniosek tutaj. I rzeczywiście, to, co się dzieje. Jeśli masz kod HTML wygląda to tak, to jest rodzaj notacji developerzy za stwierdzenie, iść do przodu i utworzyć formularz że kiedy jest złożone, to będzie, aby przejść do tego adresu URL. A kiedy URL dostarczył wartości rzeczy, jak q, nie idź po prostu do tego adresu URL. Właściwie, przejdź do pytania znak, a następnie q = koty. Dodać parametr, Parametr HTTP tak. 

I po prostu być bardzo precyzyjne, co jest wywnioskować here-- ale będę bardziej explicit-- jest że metoda chcę używać jest uzyskać, a nie coś takiego Post, który my w końcu zobaczyć. Tak w skrócie, po prostu zrozumienia HTML i korzystania z niektórych dość proste znaczniki, teraz możemy przystąpić do tworzenia nasza przednia użytkownik Interfejs o poszukiwaniu Silnik za nim. 

Ale to oczywiście jest dość ohydne. Więc pozwól mi faktycznie otworzyć nieco lepsza wersja. Jest to jeden I wytworzono z góry, że ma kilka uwag. Ale zobaczysz, że ja prawie odtworzył go. Tak to jest już dostępne online. I stało się to, aby zapobiegawczo przejść do https tylko zachować to proste. 

A teraz otwórz następna iteracja tego. Jest w wersji 1, a nie 0. Co wyskakuje na ciebie nieco inny w tym przykładzie? 

PUBLICZNOŚCI: [niesłyszalne]. 

Tak, nie ma ten tekst Centrum align. Jest to trochę dziwne się tutaj. Ale to faktycznie nowe. A może wiecie co się wydarzy. Jeśli pójdę do mojej przeglądarce teraz i odwiedzić search-1.html, to prawie to samo. Ale jest to krok bliżej jest trochę bardziej dość. To wciąż brzydki, ale w tym piękniejsza przynajmniej wszystko jest teraz wyśrodkowany. 

Tak więc okazuje się, że to, co używam jest zupełnie inny język nazywa CSS, kaskadowych arkuszy stylów. I CSS, szczerze mówiąc, jest trochę z moim osobistym zdaniem, potwornie zaprojektowany język. Jest to bardzo irytujące, aby pamiętać, wszystkie różne szczegóły. Ale to jest to, co stylizes Cały światowy internetowej dzisiaj. I obraził kogoś. Dobrze. Więc wróćmy tu i zobacz jak jesteśmy rzeczywiście przy tym. I okazuje się, że to co najmniej rzeczywiście bardzo prosty język. To tylko pary wartość klucza, właściwości i wartości, właściwości i wartości. Rzeczywiście, tutaj jest jeden mienie i wartość. 

Po prostu za pomocą stylu atrybutu na mojej znacznika body i nadanie jej wartości jelita grubego i inne słowo słowo, lub własność i wartość, Mogę mieć wpływ na estetykę na stronie internetowej, a nie niekoniecznie jednak struktura, ale estetyka to. I właśnie przez Googling wokół, zdaję sobie sprawę, że arkusze CSS kaskadowe style, obsługuje właściwość o nazwie text-align, którego wartość może być w lewo, w prawo, lub centrum, na przykład. 

Więc teraz, kiedy przeładować to strona, co ja dostałem był na środku strony, ale nadal dość brzydki. Idziemy do przodu i otworzyć do wersji 2 Szukaj. A teraz zauważyć, zrobiłem trochę więcej. Należy zauważyć, że tu wewnątrz głowicy tag, może być więcej niż tytule. W rzeczywistości, nie ma tagu styl. I to jest, gdy tylko staje się trochę bałagan widzenie CSS czasem. 

Zauważ, że wydaje mi się, że coś które strukturalnie wygląda zupełnie inaczej. Ale tutaj jest nazwa tag Chcę stylizowane. Oto nasi starzy przyjaciele kręcone szelki i zamknięty nawias klamrowy. I wtedy jest to, że Obiekt i jego wartość. 

Jeśli załadować ten plik, search2.html, Efekt końcowy jest taki sam. Ale jest to krok w kierunku lepszego designu. Przez ten faktoringu CSS mam nie zmieszane z moim HTML. I rzeczywiście, jak zobaczymy, mogłem ponowne wykorzystanie tych właściwości i wartości. Gdybym chciał zrobić bukiety części mojej stronie na środku, Nie mam wpisać style = text-align centrum w każdym miejscu. Można umieścić w jednym miejscu być może, jak się na górze. 

Ale nawet to nie jest najlepszy projekt. W rzeczywistości, jedną z rzeczy, dowiesz się, jak spędzać coraz więcej czasu z programowanie aplikacji internetowych jest to, że więcej można zmodularyzowanie rzeczy i rzeczy czynnik się jak pliki .h niech nam czynnik rzeczy na zewnątrz, czynnik jak helpers.c niech nam rzeczy kilka psets temu. Podobnie, możemy Aby osiągnąć ten cel. 

Więc zawiadomienia w wersji trzy search.html mam oczyścić głowy strona i po prostu umieścić w tym, tag Link, który wbrew nazwie, nie daje hiperłącze. To linki do innego pliku w drodze href, którego wartość w tym przypadku, jest wyszukiwarka-3.css Tak, zdaję sobie sprawę, jedziemy szybko. Ale wszystko robię to rodzaj ruchomych rzeczy wokół. Niech mi otwarty search-3.css. Nie jest to, nic naprawdę do niego. Ja po prostu skopiować i wkleić go do nowego file, podobnie jak rzeczy się nam uwzględnić do innych plików przed. I result-- całkowicie underwhelming-- będzie dokładnie taka sama. Ale idziemy toward-- nie, to nie. Och, wiem, dlaczego. 

Tak więc wydaje się, że to błąd. I to jest w pewnym sensie. Ale pozwól mi otworzyć moje zakładki Network. Pozwól mi odświeżyć stronę. Ach, dlaczego CSS nie są stosowane? Cóż, plik CSS, podobnie, ma być czytelny dla świata, że ​​tak powiem. I to też jest obecnie zakazane. Więc pozwól mi zrobić chmod a + r gwiazdy dot CSS-- whoops-- jesteśmy kropka CSS jest tylko Rozszerzenie pliku dla plików CSS. Teraz pozwól mi wrócić do moja przeglądarka i reload. OK, trochę lepiej. 

Teraz pozwól mi zrobić jedną rzecz. W wyszukiwarce-4.html. Mam wersję Pomyślałem był sposób chłodniej, choć o wiele bardziej skomplikowany. Spójrzmy na wynik pierwszego. Zamknij to, aby dać nam więcej miejsca. Zmień to szukać-4, Enter. 

A teraz kilka rzeczy, są podzielone. Mam zamiar wrócić do mojego katalogu tutaj. A teraz jestem po prostu zrobić chmod o + r na file-- bo wiem, że exists-- nazwie logo.gif, która jest obraz. A teraz przeładować. I wow-- więc teraz jestem bardzo blisko, szczerze mówiąc, lubić wersję Google 1999, i szczerze mówiąc, wersja Google 2014 prawda? 

Tak to się teraz dzieje na ich stronie internetowej, ostatecznie, jeśli szukać kotów. I rzeczywiście tak jest. Ale to, co ja zrobiłem inaczej w tej wersji 4? Więc nie będziemy się zbytnio rozwodzić na tym tutaj. Zobaczycie to w problemu zestaw siedmiu ostatecznie. Zauważmy jednak, zrobiłem kilka rzeczy. 

Przedstawiłem div znacznik, który jest podział, w duchu podobnym do znacznika akapitu. Ale podział jest tak jak tutaj jest prostokątny obszar niewidoczny ekranu. Dajmy mu wyjątkowy identyfikator, stopka, tylko tak, że można mówić o to w naszym HTML gdzie indziej. Oto kolejny div strony którego ID będzie zadowolony. To zawartość strony. I tu jest nagłówek strony. 

Innymi słowy, ve zasadniczo w HTML jestem psychicznie oglądania tej strony internetowej jako trzy elementy, header tutaj z tym niewidzialnym prostokąta, zawartość w środku, a następnie stopka na dole, nawet choć nie widzimy tych rzeczy. Bo chcę w mojej głowie strona tutaj, lub w pliku .css Można użyć tej składni. 

Nagłówek nie jest znacznik. To tak okazuje ID się, że w ten #header, Teraz mogę zastosować jeden lub więcej Właściwości do nagłówka. Mogę zrobić taką samą treść, same treści tutaj. 

Tak więc, na przykład, w stopce, uprzedzenia wszystkie te właściwości Dodaję. I wiem, że istnieją tylko przez czytanie się w dokumentacji CSS. Rozmiar czcionki będzie smaller-- więc niektóre względny rozmiar czcionki. Waga będzie pogrubiony. Margin-- ile pikseli wokół it-- jest 20 pikseli. A to będzie się koncentrować. 

Ale teraz, strona wygląda tak. Jeśli nie jestem zadowolony z mój egzemplarz tam, Mógłby zrobić coś jak kolor czerwony. I wtedy mogę zapisać to, przeładować, i teraz mam stylizowane stopkę. Więc jest to tylko podpowiedzi na mocy z tego, co można zrobić na stronie internetowej zmiany sytuacji. 

I jeszcze lepszy niż ten, jeśli chcesz poruszać się po stronach internetowych z rzeczywistych, nie można na stałe zmienić je. Ale jeśli otworzyć Inspektor ponownie Chrome i nie iść do lewej strony tu, który pokazuje Facebooka HTML, ale wskazuje na prawo hand side wszystkie jego CSS Możesz albo i zmiany sytuacji w locie. Więc pozwól mi iść dalej i to zrobić. 

Pozwólcie mi iść do przodu i kontrola kliknij na losowe słowa tutaj, podpisać, a następnie kliknij przycisk Sprawdź element. Chrome skacze do bardzo dogodnie tag h1, że Facebook korzysta. I tutaj odnotować Facebooka ma trochę leniwie na sztywno rozmiar czcionki jako właściwość tutaj. 

Tak fajne, choć jest że jeśli faktycznie go tutaj i powiedzieć, oh, Facebook, nie lubię, że 64 pikseli, możemy teraz zmienić Facebooka. Oczywiście, jesteśmy tylko zmieniając go dla mnie w tej chwili. Ale to jest po prostu inny narzędzie w naszym zestawie narzędzi że zamierza pozwalają nam dostosować i dowiedzieć się, jak również zdiagnozować problemy w naszych własnych stron internetowych. I moglibyśmy podobnie przejść tu, który jest tak samo. Jeśli naprawdę chcesz, aby uzyskać fantazyjny, ja myśli, teraz naprawdę można mutować stronę i robić szalone rzeczy. 

Więc dlaczego to wszystko jest przydatna? No cóż, w końcu jesteśmy będzie chciał być możliwość tworzenia stron internetowych, które są napędzane przez naszych tylnych końcach, nie tylko przez Google i outsourcing tylny koniec tam. My rzeczywiście chcą wartość, na przykład, działania naszej wyszukiwarce przypisać nie iść do kogoś innego, ale coś jak search.php, gdzie search.php jest na własnym serwerze, nie na kogoś innego. 

I tak, aby dostać się tam, faktycznie trzeba wprowadzić nowy język. Tak więc mamy już spojrzał na jeden nowy język tutaj, lub dwa naprawdę, HTML i CSS. Ale tak naprawdę, to tylko Języki strukturalne i estetyczne. Oni nie programowania Języki per se. I to jest o tyle formalny Czas, jak będziemy spędzać na nich. Bo zaczniemy teraz przejście do PHP. 

Więc PHP jest rzeczywista język programowania. Jest to język skryptowy w tym sensie, że jest to ma być lżejsze niż coś jak C I jest to język interpretowany, co oznacza, że ​​nie jest skompilowany. Tak w skrócie, co to znaczy gdy używany język jak C i musieliśmy go skompilować? Co to znaczy skompilować kod źródłowy C? PUBLICZNOŚCI: [niesłyszalne]. DAVID J MALAN: Powiedz to jeszcze raz? PUBLICZNOŚCI: [niesłyszalne]. DAVID J MALAN: Idealny. Okazuje go na binarny. Okazuje ją do zer i jedynek od rzeczywistego kodu źródłowego angielsko-podobnego. I wtedy rzeczywiście możemy uruchomienia tych zer i jedynek przekazując je przez CPU poprzez dwukrotne kliknięcie ikony lub uruchamiając polecenie. 

PHP i Python i Ruby i Perl i JavaScript i kiście inne języki są interpretowane w językach, co jest do powiedzenia nie je skompilować. Raczej, karmić je jako wkład do Program nazywa tłumacza. I że tłumacz, które ktoś inny napisał, odczytuje kod źródłowy od góry do dołu, od lewej do prawej i tylko interpretuje te linie i robi to, co mówisz. 

Więc jeśli pojawią linia, która mówi, druk, nie musi konwertować drukiem do odpowiednich zer i jedynek. To po prostu ma to jak tłumacz duży, jeśli warunek, który mówi, jeśli instrukcja programisty jest druku, a następnie wykonaj następujące czynności. Tak interpretuje go po prostu przez rodzaj rozumowania przez to, co mówisz to zrobić. 

I PHP jest jednym z tych języków. I PHP lat temu został zaprojektowany właśnie do programowania stron internetowych. I to było na początku bardzo niechlujny język niechlujny. I rzeczywiście, jest ogromna ilość złego kodu PHP tam. Ale sam język dojrzał w ciągu roku, tak bardzo, że teraz jest naprawdę wspaniałe następny krok pedagogicznie z C, bo to tak cholernie dobrze znane wszystkim właśnie widziałem w ciągu ostatnich kilku tygodni. 

Jedna początkowa różnica zobaczymy to nie ma już główną funkcją. Po rozpoczęciu pisania kodu, to tylko dostanie wykonywane niezależnie, jak zobaczymy za chwilę. Tymczasem, oto co zmienna wygląda w PHP. To jest trochę inna, ale ledwo. 

W PHP, nie ma silnego typowania. Jest tygodniu pisania, które po prostu oznacza, że ​​nie są typy danych, takie jak struny i numery i inne rzeczy. Ale nie przejmuj się, określając jakie są już. PHP dane to dla ciebie. Znak dolara jest tylko decyzja że ludzie PHP wykonane lat temu taka, że ​​każda zmienna w PHP po prostu zaczyna się od znaku dolara. To faktycznie niby przydatne, to wyskakuje na ciebie trochę więcej. 

Jednak po tym, to Jest to stan, w PHP. Czym różni w porównaniu z C? Oszukać question-- nic, co jest rzeczywiście bardzo ładny. Wyrażenia logiczne w PHP-- samym. I wyrażenia logiczne w porównaniu z lub, przełączniki, pętle, pętle, loops-- OK ten jest inny. 

Tak więc okazuje się, że to Kilka innych funkcji w PHP. Jednym z nich jest rzeczywiście tym który jest cudownie wygodne. Jeśli $ liczb jest tablica, że ​​masz uznane uprzednio w programie, masz na to ochotę każdego konstruktu że zamiast robić wszystko to irytujące, że jest równa 0, to jest mniej niż to, [ I ++?] dla każdej liczbie jak liczba, z których każda z tych wartości dolara jest po prostu zmienna, a ostatni można myśleć jako I. Można nazwać to cokolwiek chcesz. Nazwałem to liczba. To będzie iteracyjnego Tablica numerów. I na każdej iteracji, to będzie automatycznie aktualizować dla Ciebie numerem znak dolara zmienna, tak aby stale mieć dostęp do zmiennej, którą chcesz bez konieczności wykonywania jakichkolwiek nawias kwadratowy zapis lub indeksowanie do tablicy. 

Poza tym, mamy nawet takie rzeczy jak tablice, które wyglądają prawie tak samo, oprócz tego, że bardzo często, jak będziesz zobaczyć, jak w PHP i JavaScript wstępnie zainicjować tablicę w nawiasach kwadratowych. C wykorzystuje nawiasy klamrowe. Więc to jest nieco inny, choć tak naprawdę nie korzystać z tej sztuczki dużo. 

Ale nawet mocniej, PHP ma tablic asocjacyjnych, który jest fantazyjny sposób mówić tabel mieszania. W rzeczywistości, jeśli chcesz zadeklarować hash Stół w PHP, w przeciwieństwie C-- ile linii kodu zajęło rzeczywiście wdrożyć tabeli mieszania w C? Albo ile linii kodu jest to biorąc wdrożyć tabeli mieszania w C? Więc to chyba dużo, prawda? To kilkadziesiąt, może 100 lub 200. To nietrywialne. Albo o to, aby być, jak szybko przekonasz się, nieszablonowe zaimplementować tabeli mieszania [Niesłyszalne], a także spróbować. Ale w PHP-- i szczerze mówiąc, Prawdopodobnie nie powinno ci to powiedzieć aż Monday-- w PHP, jeśli chcesz mieć stolik, zrobione. To skrót table-- tak z jednej linii kodu. I 

Wiele języków zrobić. Baw się z Pset pięć. Tak wiele języków to zrobić. Dają te abstrakcje że innych ludzi, innych programistów, Stworzyliśmy dla Ciebie tak, że można stanąć na ramionach i rozpocząć korzystanie z pomysłów, które są bardzo przekonujące, jak tabele z cebulą i drzew i próbuje. Ale nie koniecznie wdrożenie tych rzeczy samemu. 

I tak w końcu, co będziemy używać PHP do pisanie programów jest potencjalnie w tak zwanej linii polecenia. Możemy odtworzyć każdy program pisaliśmy w tym semestrze do tej pory, może z wyjątkiem Breakout, który wykorzystuje SPL, który jest specyficzny dla C, w tym momencie. Ale każdy inny problem ustawić, oczywiście Mario i Cezar i Vigenère i [? Złamać?] I dalej, my może ponownie wprowadzić w PHP, i prawdopodobnie nieco łatwiej. 

Ale co my ostatecznie będzie jest PHP jest programowania WWW. I mamy zamiar wprowadzić w przyszłym Tydzień psychicznego model paradygmat nazywa MVC, model widok kontroler, które, jeśli zrobiłeś programowania przed lub w Pythonie Ruby, czy gdzie indziej, to może wiedzieć z tego zespołu Rails i Django i jak. Ale jeśli jesteś nowy to też, zobaczysz że to jest rzeczywiście bardzo naturalne Rozszerzenie na czynniki i rodzaju konstrukcji kodu, który mamy robi w C Będziemy teraz zastosować niektóre z tych lekcji na PHP sposób, że ostatecznie jesteśmy realizacji własnych stron internetowych. A jeśli masz coś w rodzaju zahipnotyzowany lub zaskoczony że mamy zamiar zrobić wszystko tak szybko, sobie sprawę, że prawie każdy semestr, prawie 90% od studentów CS50, w tym którzy nigdy nie zaprogramowane, zakończyć, że projekty ostateczne, że opiera się na programowaniu stron internetowych. I tak widać, że powraca są bogate w nadchodzących tygodniach. Więc będziemy do zobaczenia w poniedziałek. 

GŁOŚNIK 1: A teraz, Głębokie Myśli przez Daven Farnham. Hash tabele. 

[Śmiech]