[MUZYKI] 

DAVID J MALAN: To CS50 i to jest początek tygodnia 7. Więc witamy z powrotem. A może pamiętacie, że w problemu ustawić cztery, było trochę zamiatacz ulic polować dla niektórych wspaniałych nagród, zgodnie z którymi po odzyskać zdjęcia Pracownicy zarówno tutaj, jak w New Haven, ty zostały zakwestionowane, aby znaleźć jak najwięcej te informatycy jak można. I mamy cały kilka zgłoszeń. Myślałem, że podzielić się kilkoma z wami dzisiaj tutaj. 

I będziemy zamieszczać wszystkie z nich w Internecie. Ale przede wszystkim, chciałem zwrócić uwagę to-- studni jednego, Sam był w bardzo niewielu z nich ogólnie stwarzające tak. Ale wydaje się, że od rano, zwycięzca była pewna niejaki Ken z 24 pracowników złapany na kamery lub trochę więcej, jeśli wziąć pod stanowią wielu pracowników w zdjęciach. Na zdjęciu jest Ken następna Maryi w New Haven. 

Teraz, Ken, choć okazuje obecnie jest trochę przypadku rogu to nie zdarzyło się jeszcze wcześniej. Okazuje się, że nie występują mi się umieścić drobnym drukiem w problemu zestaw czterech, które mówi, że pracownicy są kwalifikuje się do wspaniałych nagród ponieważ Ken jest oczywiście jednym z fotografowie na naszych pracowników. Teraz, z tym powiedział, że pierwotnie napisał mi powiedzieć proszę nie pisać te zdjęcia w Internecie. Myślę, że w dużej części ponieważ większość zdjęć że fotograf zrobił wyglądać trochę coś takiego. I tym podobne. 

Ale Ken chce mi zapewnić, że jest to bardzo dobry fotograf, On jest profesjonalistą, bierze zdjęcia, które nie są rozmyte, że są lepsze w centrum uwagi, a on wziął sporo z naszych pracowników. Ale zamiast tylko potwierdzić Ken, co myśleliśmy, że będziemy robić jest przejść się po liście Rzeczywiste studenci, którzy złożyli. I okazuje się, że Lance z 15 zdjęcia jak z rana był nasz zwycięzca. 

A na zdjęciu jest Lance z Colton, z Skaz, z samym sobą, oraz z Samem. Ale potem okazuje się, że od 11:46, więc tylko trochę temu, Wróciłem do mojego e-mail i znaleźć że mieliśmy jeszcze jeden złożenie przez studenta o imieniu Bonnie których e-mail powiedział tylko to. Nie zamierzam kłamać, jestem robi to podczas lekcji. A następnie udał się dołączyć tylko 14 zdjęcia, jeden nieśmiały Lance'a 15. 

Ale na zdjęciach Bonnie, okazuje się było wielu pracowników, Sam wśród nich, więc to, co myśleliśmy, zrobi to potwierdzić zarówno tych. Więc oprócz coraz Dropbox Przestrzeń, że wszyscy, którzy uczestniczyli otrzymuje te dwie sekcje będzie również otrzymują piękny pokrywane obiad dla nich i ich rozdział Mates ten nadchodzący tydzień. I tak można usłyszeć od nas, Lance i Bonnie, o tym. Więc wielkie gratulacje dla nich. Teraz, ci z was, kto by jak obiad, bardziej ogólnie, wiedzieć, że CS50 obiad w Cambridge i New Haven jest w ten piątek. Idź do CS50 stronę slash RSVP. A teraz słowo na seminariach. Więcej curricularly. Więc my zbliżamy się do punkt semestrze gdzie należy zacząć myśląc o projektach gotowych. A w rzeczywistości, tylko trochę, będzie tak zwany pre propozycje być spowodowane. Tak więc pre propozycje mają być bardzo mały wpływ i naprawdę tylko okazją do komponować krótką notatkę Twój kolega nauczania, aby informować mu, co myślisz ciebie może chcą zrobić dla ostatecznego projektu. 

Teraz, wielu studentów skończyć robi internetowych projektów końcowych. I oczywiście, że jesteśmy po prostu Teraz w zeszłym tygodniu w tym i poza nurkowanie w programowaniu stron internetowych. Więc nie martw się, jeśli nie mają żadnego pojęcia, jak by budować pomysły, które Może masz w głowie. To jest naprawdę tylko funkcja zmuszając skłaniające do myślenia i rozmawiając z TF o tym. Ale ci w tym pomóc, a z ostatnich projektów, ostatecznie, wiem, że CS50 ma tradycję oferowania seminaria. 

A te są opcjonalne, ręce na, lub wykład oparty na możliwościach aby dowiedzieć się więcej na tematy, które są trochę pomocnicze w stosunku do kursu na program nauczania, niemniej jednak wspaniały materiały do ​​prowadzenia projektów końcowych. A więc ta lista to Pracownicy CS50 tutaj w New Haven wymyślić dla w tym roku o iOS Programowanie Android programowania, rozwoju gry, i kiście więcej narzędzi i języków i technik. 

Więc miej oko na stronie internetowej CS50 jest. A w międzyczasie, jeśli chcieliby swoje zainteresowanie w każdym z nich, przejść do slash rejestru CS50 jest. I będziemy to kontynuować, jak do dni i godziny lotu i lokalizacje i everything-- prawie wszystko będzie być transmitowane, a także dostępne na żądanie po, jeśli nie można właściwie zrobić. Tak więc bez dalszej zwłoki, skończyliśmy ostatnim razem z GET. 

I to było jak wiadomości, które było wewnątrz wirtualnego kopercie, przypominam, że minęło od routera do Router między przeglądarki internetowej i sieci serwer. I że wiadomość wyglądała Trochę coś takiego. Było to tym bardziej tajemniczych wiadomości, że faktycznie wewnątrz koperty napisane na kartce papieru, którego Pierwsza linia mówi dosłownie, dostać slash. 

I tak, jak przeprowadzić test dla pewności cóż ukośnik oznacza? Co ukośnik na myśli, kiedy żądania strony internetowej? Poprosić go cały czas. Większość dowolnym czasie odwiedzania strony internetowej, w rzeczywistości nie wpisać nazwę pliku. Prawdopodobnie po prostu pójść do Facebook.com, wejść, gmail.com, lub tym podobne. A co ukośnik reprezentują? Jakie pliki? Albo to, co strona, specjalnie? 

Indeks, tak. Więc domyślnej strony. Więc jeśli nie podasz pliku wymienić jak zaczniemy widzieć, jesteś rzeczywiście tylko żądanie daj mi domyslne Facebook lub dać mi skrzynki odbiorczej lub dać mi się domyślna strona z aktualnościami na stronie internetowej CNN lub tym podobne. Oraz serwer odpowiada potem że wiadomość z czymś w ten sposób, mówiąc: tak, mówić wersji HTTP 1.1. 

200, który jest w stanie Kod, że ludzie rzadko nigdy nie zobaczy, bo to jest dobre. Bo to oznacza, OK, wniosek został przyjęty i prawidłowo obsługiwane. I typ zawartości Najwyraźniej w odpowiedzi jest często, lecz nie zawsze, tekstu. A konkretnie, HTML. I to jest w rzeczywistości gdzie przyjrzymy się dzisiaj. 

Faktycznie więc, mam zamiar iść do przodu i otworzyć przeglądarkę. Mam zamiar używać Chrome, można użyć Najbardziej dowolnej przeglądarki w nadchodzących tygodniach. Generalnie zalecamy Chrome ponieważ jest to szczególnie dobre dla programistów. Jest tam dużo zbudowany w narzędzia, które ułatwiają rozwijać nie tylko HTML i CSS, rzeczy zaczniemy mówić o dniu dzisiejszym, ale także inne języki, jak również. 

I mam zamiar iść do przodu i przejść to-- Idę do sterowania lub kliknij prawym kliknij w dowolnym miejscu na stronie internetowej. I mam zamiar iść do kontroli elementu. I mam zamiar podkręcić mój Ekran tylko trochę tutaj. Pozwól mi przejść to do dna. Więc to jest to, co się nazywa Inspektor Chrome. Tak to jest jak debugowania narzędzie wbudowane w Chrome. 

Wszyscy z was już to jeśli już przy użyciu Chrome. I to pozwala zobaczyć, co się dzieje na pod maską jakiejś stronie internetowej. Więc właściwie zająć spójrz na to w następujący sposób. Ma sposób więcej funkcji i zależy nam dzisiaj. Ale jest tych kart tutaj. Elementy sieci, źródła, Oś czasu i kilka innych rzeczy. Zamierzam kliknij Sieci na chwilę. 

I to jest trochę przytłaczające na pierwszy rzut oka tutaj. Ale to, co mam zamiar zrobić, to pozwolić mnie uprościć go trochę. Mam zamiar skręcić w nagrywanie światło tak, że jest czerwony. A ja powiem zachować dziennik. I to jest tylko trochę rzecz, zorientowali się, w czasie, że będzie oszczędzać wszystko, co się dzieje w przeglądarce. I teraz mam zamiar iść do http://facebook.com. 

Właściwie, zróbmy www na dokładkę, slash. Wchodzić. Więc URL, że wiele może odwiedzonych. A teraz Facebooka internetowej strona znajdzie się na szczycie. A potem cała masa rzeczy przeleciał na dole. W rzeczywistości, okazuje się, że podczas odwiedzania facebook.com, jesteś nie tylko co jedno żądanie HTTP, okazuje się, że będzie Facebook.com wysyła 41 tych kopertach, każdy z własnym żądanie GET, jak pokazano, chociaż za ekranem Tutaj, w dolnej części ekranu oznacza to, że rzeczywiście, mój Przeglądarka wykonane 41 wniosków. 

A w sumie, to przeniesione 861 kilobajtów i zajęło z jakiegoś powodu aż osiem sekund ściągnąć wszystko. Więc to jest rzeczywiście trochę dziwne że strona Facebooka weźmie, że długo, ale tak będzie w tym przypadku. Teraz, wszystko to naprawdę nie obchodzi o wyjątkiem najwyższego życzenie. Więc chodźmy do tego tutaj i pozwól mi oddalić się na chwilę. 

I pozwól mi przybliżyć ten. Więc to, co zrobiłem w lewo, chociaż jest wiele dzieje się tutaj I już jest podświetlony Facebook.com, a następnie zauważysz, że jestem przewijanie w dół, przewijanie w dół, przewijanie w dół, do żądania nagłówków. I zobaczysz, że Chrome jest wyświetlana mnie zasadniczo wewnętrzne treści wniosku zrobiłem. To nie jest formatowanie w to samo sposób nie zauważyć, nie ma wzmianki o się, zauważysz tam wzmianka o gospodarzu, Facebook.com, ścieżka lub ukośnik, które jest plik prosiłem. 

A potem, jeśli przewijać kopii zapasowych, będziemy rzeczywiście zobaczyć, że to, co wrócił Facebook dla mnie to wszystko z tych nagłówków. Tak więc w środku tego wirtualnego kopercie w rzeczywistości są dużo par wartości kluczowych. Słowo, dwukropek, a następnie wartość. Słowo, dwukropek, a wartość. Są to tak zwane nagłówki. I jest o wiele bardziej szczegółowo niż tutaj tak naprawdę obchodzi teraz. 

Ale to jest drugim ostatnia tam, zauważyć, że serwer facebook.com, w powiedział, rzeczywiście tutaj jest trochę Tekst HTML. Więc to wszystko jest do powiedzenia że gdy wniosek internetowy Strona z przeglądarki do Serwer, że serwer odpowiada z kopertą własnych wewnątrz którego jest tekstem. Innymi słowy, HTML. Hipertekstowy język znaczników. Który jest inny język że wprowadzamy dziś że ludzie i komputery generują w celu realizacji stron internetowych. 

Konkretnie, spójrzmy na to. Mam zamiar teraz wrócić na stronie Facebooka. I mam zamiar po prostu kliknij prawym przyciskiem myszy kontroli lub i kliknij Pokaż źródło strony. I nawet jeśli nie używasz Chrome, IE może to zrobić, Firefox może to zrobić, Safari może to zrobić, nawet jeśli w menu Opcje mogą wyglądać nieco inaczej. I to jest HTML, które Mark i Firma na Facebooku napisał. 

I zbiorowo, język ten tutaj implementuje niebieskie i białe strony które widzieliśmy przed chwilą. Obecnie, to bit przytłaczająca. Ale jeśli przyjrzymy się na górze po lewej stronie, jesteśmy zacznie widzieć pewne wzorce. Wygląda na to jest wiele z tych nawias ostry i wtedy to jest HTML kluczowe. Oto kolejny otwarty kątownik i głowy. 

Oto, jeśli przewinąć w dół iw dół iw dół, jestem zamiar iść dalej i spróbować czegoś szukać. Nie sposób się po prawej stronie tutaj jest otwarty korpus zamka. I pamiętam z ostatniej Czas, który zaproponowaliśmy że najprostszym strony że człowiek może napisać może wyglądać trochę coś takiego. Otwórz tag HTML, otwarta głowa tag, otwarte tag tytuł, następnie zamknięty tytuł, zamknięte głowy, otwarte tag ciała, jakiś tekst, Furgon, zamknięty HTML. 

Ale cisza tu tylko na chwilę. Kod ten, nawet jeśli masz nigdy nie napisał go przed ale nadal nie bardzo rozumiem co się dzieje, wygląda całkiem nieźle. Prawda, że ​​to bardzo czyste. To bardzo stylistycznie ładne. Wiele wcięcia i białej przestrzeni. Facebook nie jest. Więc dlaczego jest tak dużo na Facebooku gorzej niż na pisanie kodu HTML? Widocznie. 

Racja, to jest jak jeden z pięciu do stylu. Istnieje ważny powód dla nich wyciąć te rogi. W porządku, więc nie chcą sprawiają, że łatwiej jest ją przeczytać. Więc w pewnym sensie, są one kasował go, rodzaj kodowania go przynajmniej estetycznie tak że to jest trudniejsze dla MySpace iść i zdzierać ich strona główna i HTML do niego. Okazuje się, że z programów choć w tym Chrome możemy to posprzątać bardzo łatwo. Tak więc nie dość, że jest tak dlatego,. Co jeszcze może być przyczyną. Tak. Tak, dane białe koszty kosmiczne. Co masz na myśli? Tak, dokładnie. Jeśli naciśnij klawisz Tab dużo lub spacji, rozważyć konsekwencje. Więc każdy klawisz na klawiaturze jest [Niesłyszalne] reprezentowane jako jeden bajt. 

Więc przypuszczam, że Mark lub którykolwiek z deweloperów te dni uderza spacji tylko raz w stronie HTML reprezentuje stronę Facebooka. A Facebook ma wiele użytkowników tych dni. Więc przypuszczam, że strona Facebooka odwiedza miliarda ludzi dzisiaj. I ktoś na Facebooku ma nacisnąć spację tylko raz. 

Więc jeden dodatkowy bajt, miliard wnioski, o ile więcej danych jest Facebook przesyłania przez Internet dlatego, że ktoś uderzył w klawisz spacji na klawiaturze swojego? A miliard bajtów, lub jeden gigabajt Dane są wysyłane z serwerów Facebooka do ludzi na całym Świat bez powodu. Teraz, to tylko jedno miejsce. 

Wyobraź sobie, że właściwie wyczyścić ten rzecz się i wcięte go i dodał dużo białej przestrzeni i znaki tabulacji i spacji, skończyć się gigabajtów wydatków, jeśli nie terra bajtów więcej przestrzeni. I tak bardzo powszechne w Rzeczywisty świat tworzenia stron WWW jest minify kodu. A my w końcu zobaczyć jak można to zrobić. 

Ale dziś, zaczniemy pisać kod to faktycznie odczytywany przez nas ludzi. Okazuje się jednak, jeśli wrócę do tego narzędzia w Chrome Sprawdź, Element, wcześniej, byliśmy na karcie sieciowej. Okazuje się, że jeśli się do Zakładka elementy, co faktycznie zobaczyć jest Chrome dość drukowane wersja tego samego HTML. Więc my deobfuscated go. Więc to nie pasuje do komputera. I teraz można rzeczywiście kliknij wokół i zacząć zobaczyć hierarchię, która jest strona internetowa. Więc rzeczywiście to zrobić. Mam zamiar iść do przodu i otworzyć się na mój Mac program o nazwie edytować tekst. I przypominam, że jest to po prostu super prosty program tekstu. Windows ma notepad.exe. I mam zamiar Verbatim wpisz następujące polecenie. Typ doc HTML, otwarty nawias HTML, zamknięty wspornik HTML, mamy głowę stronie tutaj Koniec głowicy stronie, tytuł będzie jak, Hello World. 

A potem na dół, musimy ciało stronie internetowej. Furgon. A potem tutaj, hello world. W porządku. Więc napisałem super szybki stronę internetową. Mam zamiar zapisać jako hello.html na pulpicie. Mój Mac będzie narzekać, myśląc, że zaraz, jest to plik tekstowy, zrobić chcesz to nazwać .txt? Ale nie chcę używać kropki HTML. 

A potem, co jest miłe, jeśli po prostu kliknij dwukrotnie ten plik, hello.html, oto moja strona internetowa. Niestety, jestem jedyną osobą na świecie którzy mogą odwiedzić tę stronę już teraz. Bo gdzie to żyją podobno? To na moim Mac, prawda? Co jest bezużyteczne. Jak nikt w tym pokoju nie mówiąc już o internecie może faktycznie odwiedzić tę stronę. Więc dzisiaj, musimy wprowadzić kolejny element. 

I to zrobić, będę śmiało i otwarcie Cloud 9. Więc cloud 9 jest oczywiście Chmura serwis-- oparty CS50 IDE-- To ma wszystkich naszych obszarów roboczych pracuje gdzieś w internecie. A to oznacza, że ​​wszystkie nasze pliki są publicznie dostępne już. Więc idź naprzód i to zrobić. Mam zamiar iść do przodu i utworzyć nowy plik NCS50IDE. Mam zamiar zapisać go jako przed jak hello.html i kliknij Zapisz. A teraz po prostu zaoszczędzić czas, idę iść do przodu i skopiuj wklej ten kod zamiast wpisywać go. I zapisz go. A więc teraz mam plik o nazwie hello.html. Ale w jaki sposób właściwie otwórz go jako stronę internetową? Cóż, okazuje się, zbudowany w celu CS50 IDE nie jest tylko kompilator jak brzękiem i debugger jak GDB i kiście innych programów, Jest rzeczywiście pełnoprawnym serwer WWW działa w ramach CS50 IDE. 

Wszyscy z was, to znaczy, mieć swój własny serwer WWW. I serwer WWW jest tylko kawałek oprogramowania, którego celem w życiu ma służyć do stron internetowych. Aby usłyszeć prośby przeglądarek i odpowiedzieć małych wirtualnych kopertach wewnątrz którego jest treści, które pisałem. Więc to serwer WWW jest rzeczywiście wolne i otwarte. Gdzie open source oznacza po prostu, Oprogramowanie, że ktoś inny ma napisane, że każdy z nas może rzeczywiście zobaczyć i pobrać, a nawet zmienić kod źródłowy. I to się nazywa Apache. 

I zrobiliśmy to trochę łatwiej używać w CS50IDE nazywając go Apache 50. Tak, że może faktycznie zrozumieć, co następuje. Mam zamiar powiedzieć Apache 50 start. I wtedy ja po prostu powiedzieć kropkę. I widzimy, niektóre nieco Arcane komunikat, Ustawienie Apache dokumentu [? grupa?] do domu, ubuntu, cokolwiek to jest, slash pracy. Uruchamianie serwera WWW Apache 2 powodzeniem. 

Więc krótko mówiąc, ja właśnie nacisnął guzik i odwrócił się na serwerze WWW, kto jest teraz słuchania w internecie na porcie TCP 80 pod określonym adresem. I tu jest napisane, a to się zmieni Based o Twoją nazwę użytkownika i innych czynników, ale zauważ, gdybym kliknij ten, IDE50 dot jharvard i tak i tak, to zauważysz, że cały ten czas W ciągu ostatnich kilku tygodni, możesz mieć Zauważyłem, że własną nazwę użytkownika jest osadzony w górnej prawej Narożnik CS50IDE. 

I to właściwie było wszystko czasie adres, pod którym można odwiedzić wszystkie pliki za pośrednictwem Internetu. Do tej pory nie miało znaczenia, ponieważ w C, zazwyczaj chcą rzeczy działa w terminalu, a nie w internecie. Ale dziś, zaczynamy pisanie internetowy oparty kod że nie chcą dostępne w adresów publicznych. Więc co mam zamiar zrobić, to kliknąć ten adres. 

I zauważ, że widzę dość Strona brzydkie, wpis katalogu, ale co plik wyskakuje na ciebie pewnie? Hello.html. To dlatego, że uratował plik w mojej pracy. A co mówiłem Apache serwer WWW jest spojrzeć w katalogu obszaru roboczego Dawida. I niech ktoś z Świat zobaczyć te pliki. 

I rzeczywiście, gdybym teraz kliknij hello.html, Widzę w tej karcie dokładnie tego pliku. Teraz zauważyć, Cloud 9 robi coś trochę pomocne dla nas. W ramach CS50 IDE, zauważysz tam nagle pasek adresu. To dlatego, że nawet jeśli jesteśmy za pomocą Chrome odwiedzić CS50IDE, wewnątrz CS50IDE jego własny wersja przeglądarki internetowej już teraz. I tak, zamiast komplikować jako takie, Mam zamiar iść do przodu i po prostu skopiować ten adres. Mam zamiar iść do przodu i wystarczy otworzyć własną okno Chrome. Więc nie ma magii tu nie CS50IDE. Jestem po prostu będzie dosłownie wklej mój J Harvard URL i naciśnij klawisz Enter. I voila, teraz i Teoretycznie, każdy w internecie, jeśli mam skonfigurowane uprawnienia odpowiednio, może odwiedzić ten plik. A więc teraz, gdybym powiedział, hello.html, voila, nie bardzo rozczarowująca jest moja strona. Warto więc zrobić szybki test dla pewności. Ponieważ wszystkie że jest koncepcyjne zestaw w górę. I naprawdę nie mam naprawdę uczy, jak pisać HTML per se. Wszelkie pytania w ten sposób znacznie na to, co się stało? Tak. Czy CS50 właścicielem tych stron? W jakim sensie? Dobre pytanie. Więc CS50 jest właścicielem CS50.io. Mamy rzeczywiście kupił tę nazwę domeny. I charakter was logując się do CS50IDE, wszyscy się czegoś, co nazywa subdomeny. 

Więc IDE50-Malan lub IDE50-Rob.CS50.io, to Twój unikalny adres w terminie nasza domena. Tak więc dla celów Oczywiście masz swój własny unikalny adres. Ale mamy uproszczone rzeczy przez Kupując domeną najwyższego poziomu, CS50 kropka I / O, a następnie wszyscy inni Wnętrze, które, że tak powiem. I wrócimy do tego w ciągu kilku tygodni, prawdopodobnie, szczególnie w końcowym projekcie czas, kiedy niektórzy z was może chcesz uzyskać własne nazwy domen. To rzeczywiście dość prosto przed siebie. W porządku. Więc teraz to zrobić. Mam zamiar wrócić do CS50IDE, gdzie mój plik teraz, hello.html, nie jest tak interesujące. Chciałbym zrobić coś trochę ładniejszy niż to. Więc mam zamiar zrobić coś takiego. Niech mnie otwarte paragraphs.html. Więc jest to plik pisałem wcześniej. Na wierzchu, jak Zawsze mamy uwag. Ale w HTML, komentarze wygląda trochę inaczej. W linii trzy i linii 14, to zobacz składnię rozpocząć komentarz i zakończyć komentarz. 

Ale żadna z tych rzeczy, w między sprawami funkcjonalnie. To jest po prostu notatkę do ludzkie, co się tutaj dzieje. I tak jak szybki rozsądku sprawdzić, jeśli przewinąć w dół, co jest oczywiste, nowa tag, który wprowadziliśmy? Tagi do tej pory widzieliśmy są otwarte Uchwyt HTML, głowa, tytuł i ciała. Ale to, co teraz jest oczywiście nowa? 

Tak, tak, str. Znacznik p lub pkt znacznik. A potem po prostu pożyczył trochę domyślne Tekst łaciński stanowić moich ust. Bo to, co chciałem wykazać to w jaki sposób może stanowią akapity tekstu w HTML. A więc to, co zaczyna się dziać tutaj jest to, że nie ma już wzór rozwoju. I pozwól mi iść naprzód i to zrobić. Pozwól mi najpierw wyłączyć Apache. A ja powiem to, aby rozpocząć się znowu wewnątrz dzisiejszym źródła siedmiu m katalogu. Tak, że mam dostęp do wszystkiego. 

A teraz, jeśli wrócę do ten katalog aukcji, zauważyć, widzę każdy plik z dzisiaj. A zobaczysz w Kolejny zestaw problemów, będziemy daje instrukcje za robienie dokładnie tego. Jeśli otworzyć paragraphs.html, to może jak dobrze wyglądać język programowania do ciebie, jeśli nie mówić i czytać po łacinie. Ale to jest tylko trzy akapity tekstu, które są zaznaczone w HTML. 

I zwróć uwagę na paragraf przerwy między nimi. Bo okazuje się, i choć Ciebie może być skłonny to zrobić, podczas gdy w prawdziwym świecie, jeśli chcesz umieścić linię przerwy między rzeczami, może po prostu to zrobić i naciśnij Zapisz. A teraz, jeśli przeładowanie tutaj, zawiadomienie że wszystko się rozmywa razem w jednym blob tekstu. Ponieważ HTML jest rodzajem języka niemego. 

Jest ona przeznaczona do stosowania w takich sposób, że przeglądarka będzie tylko to wyraźnie, co możesz powiedzieć to zrobić. Więc jeśli nie powiedzieć to daj mi nowy akapit, nie będziesz widzieć nowy akapit. I rzeczywiście, co Przeglądarka zrobi nawet jeśli trafisz Enter, powiedzmy, że znowu i znowu i znowu, przesuwając w ten sposób tekst w dół ekranu, a następnie zapisać a następnie załaduj, przeglądarka będzie aby zwinąć wszystkie z tej białej przestrzeni do tylko jednego, widocznego spacji. W porządku. Więc to jest znacznik akapitu. A więc co to za wzór który jest rozwijanie tutaj? Cóż, wydaje się być tak, że HTML jest o począwszy tag i kończący się znacznik. A co to jest tag? Cóż, to tylko fragment składni. Otwórz uchwyt, słowo kluczowe, zamknięty nawias, to znacznik. Albo zacząć znacznik. I wtedy, gdy jesteś zrobić wyrażania siebie, jak w skończysz z ust, robisz tak powiem odwrotnie. Ale przeciwnie, nie jest całkiem odwrotnie. 

Po prostu ten sam prefiks znacznika wymienić ukośnika tak. W porządku. Więc nie tak ekscytujące. A w rzeczywistości, nie jesteśmy czyniąc internetowej wszystko, bardziej interesujące. Co zrobić, jeśli chcę zrobić rzeczy większe i pogrubione? Tak więc okazuje się, że oto przykład w headings.html, gdzie w moim ciele, Mam tag H1, H2, H3, cztery, pięć lub sześć, z których każda wydaje się dość zaawansowanych. Ale jeśli pójdę otworzyć tę Przykładem, rzućmy okiem. Headings.html. 

Więc przeglądarek domyślnie może dać możesz tekstu to i śmiały się różnorodnych rozmiarach. H1 jest duży. H6 jest mniejsza, a następnie wszystko pomiędzy. Więc to jest interesujące, ale nadal naprawdę nie wiem internetowej. Co zrobić, jeśli chcemy mam coś w rodzaju listy. , Więc tu jest punktowane lista trzech domów Harvardu. 

Jak się za to zabrać? Cóż, spójrz na list.html. A tutaj widzimy Trochę funkiness ale zastanówmy się, co się dzieje. Tak więc w oparciu o to, co właśnie widzieliśmy, UL oznacza nieuporządkowanej listy. Nieuporządkowana lista jest jednoznaczne punktowane. Nie ma żadnych numerów. Jest też coś, co nazywa się nakazał listy, która jest OL w tagu. Następnie LI, element listy jest wszystko znaczy. 

I automatycznie tak, to numery wszystko dla Ciebie. Ale znowu, wszystkie moje wcięcia i białe miejsca jest tylko dla mnie. Przeglądarka nie rzeczywiście będzie obchodziło. Więc nawet jeśli nie mógł to zrobić, żeby była jasność, nie należy, nawet jeśli przeglądarka będzie nadal być w stanie zrozumieć go dobrze. Jestem uderzając reload w moim Przeglądarka, jestem kliknięciu reload i żadna zmiana się dzieje ponieważ przeglądarka wciąż robi dokładnie to, co mogę powiedzieć to zrobić. 

W porządku. Więc to wszystko jest tylko tekst. Teraz zróbmy coś bardziej interesującego. Mam zamiar iść do przodu i pożyczyć tej HTML. Mam zamiar iść do przodu i utworzyć nowy plik tutaj. A my nazywamy to rick.html. Mamy nieproporcjonalnie coś używane rick roll nazywany w tym klasy w tym roku, nie wiem, to po prostu się stało organicznie. 

A teraz to ma się spod kontroli. Więc jestem po prostu iść z nim. A jeśli pójdę do Google Zdjęcia i Rick Astley. Jeśli nie wiesz, dlaczego to robimy to po prostu przeczytać na Wikipedii. Za każdym razem masz kliknięciu na link, Ktoś był śmiech gdzieś. I pozwól mi odejść ahead-- istnieje idziemy, niech zobaczyć to zdjęcie. 

Więc tutaj mamy Obraz w Google Images. I załóżmy, że jest to racjonalnie wszędzie w internecie. Więc mam zamiar założyć, że to dla mnie OK faktycznie umieścić to na mojej stronie internetowej. Mam zamiar iść do przodu i skopiuj URL obrazu. A teraz, jeśli wrócę do Cloud 9, zobaczymy co da się zrobić tutaj. Więc tutaj jest po prostu strona internetowa. To jest Rick Astley, haha, Mam zamiar teraz wrócić do mojej przeglądarce, przeładuj i interesujące. 

Gdzie jest Rick? Więc pozwól mi zobaczyć, co się stało. Faktycznie, mam zamiar udawać, że nie zrobiłem tego. [Niesłyszalne] umieścić go tutaj. Wrócimy do tego za chwilę. Więc oto rick.html. Więc to nie jest Rick Astley. Tak więc okazuje się, że można faktycznie dodać go tutaj. To jest Rick Astley. Mam zamiar powiedzieć mi dać obraz, którego źródłem jest adres URL po prostu kopiowane, które podobno jest szczęśliwy coś, urodziny lub inne. 

A teraz mam zamiar zamknąć znacznik takiego. Więc to jest owijanie bardzo długo. Ale zauważ, że wszystko mam wykonane jest otwarty uchwyt obrazu, źródło z atrybutem tego. I to jest naprawdę długi adres URL. A na samym końcu, to zauważyć. Dlaczego ja zrobiłem ukośnik kątowy Wspornik a nie, jak w każdym innym znacznikiem, ma otwarty uchwyt, IMG, zamknięty uchwyt? Wystarczy odgadnąć, nawet jeśli nie mam znajomości w ogóle z HTML wcześniej. 

Tak to jest, jak to zamyka polecenie, ale dlaczego to nie naprawdę intuicyjna Poczucie zrobić coś trochę bardziej verbose jak blisko obrazu? Tak. Tak. Wystarczy semantycznie, nie ma poczucia począwszy od obrazu, a kończąc obraz, to albo jest, albo nie jest. Więc to nie ma sensu, aby pozostawić szczelinę na nic innego w środku obrazu. Po prostu nie mogę tego zrobić. I tak składnia będzie na ogół po prostu zrobić ukośnik wewnątrz otwartej znacznika lub znacznika początkowego a następnie naciśnij Zapisz. 

Więc jeśli teraz odświeżyć ten plik teraz Mam dobrą kuchnię strony internetowej tutaj. I mogliśmy pewnością naprawdę drażnić ludzi osadzając zamiast jak łącze YouTube. W rzeczywistości, za każdym razem kiedykolwiek poszedł do YouTube, i niech mi właściwie przypadkowo Rick toczyć się tutaj. Więc Rick rolki. Więc Rick roll-- mam zamiar udać się tutaj. 

[MUZYKI] 

OK, jedna osoba lubiłem to. Tak więc zauważyć, przez cały ten czas, gdy Ciebie kliknij link Share, ty oczywiście uzyskać adres URL, który można właściwie osadzić w wiadomości e-mail lub sądowej obrazu lub problemów ustawić lub suwaka. A teraz, jeśli zamiast kliknąć na ankiety, zauważyć, że przez cały ten czas, ten materiał został tam. Mam zamiar iść do przodu i skopiować to. 

I tak możemy go widzieć lepiej, jestem zamiar wkleić go w moim edytorze tekstu. Zauważ, że to, co YouTube został informacją. Za każdym razem odwiedzisz Wideo YouTube, jeśli Ciebie chcesz umieścić film na swojej strona internetowa, po prostu weź to. Tak więc jest to kolejny Tag HTML o nazwie iframe. Lub w ramie linii. Więc to też wygląda trochę więcej skomplikowane niż wszystkie inne. Tak więc okazuje się, że obraz tag i najwidoczniej tag iframe wziąć to, co jest zwane atrybuty. 

I jest inna kawałek składni HTML. Oprócz znacznika imię i nazwisko, nazwę znacznika otwarty nawias, można kontrolować zachowanie tagu poprzez całą masę atrybutu równe wartości. Atrybut równa wartości. I tak, na przykład, YouTube mówi nam jeśli chcesz szerokość tego filmu wideo za 420 pikseli i wysokość za 315 pikseli, to jak wyrazić to w HTML. 

Źródłem filmu będzie się, że długo URL YouTube i kilka innych rzeczy jak ramki granicy wynosi zero, Oznacza to, że prawdopodobnie nie ma brak obramowania wokół rzeczy. Prawdopodobnie pozwalają na pełnym ekranie Oznacza to, że użytkownik można kliknąć przycisk i właściwie pełny ekran wideo. Więc jeśli naprawdę chcesz być Imponujący tu Rick dot HTML, zamiast używać znacznika obrazu, niech mnie skasować, że zamiast wkleić. A teraz przeładować. A teraz znowu to samo. Dobrze, że to wystarczy. Dobrze więc postaram trudno nie zrobić ponownie. Więc co to tylko niektóre z tutejszych dań na wynos? Więc HTML, brzydka jak tych stron są, w rzeczywistości jest dość prosta. To nie jest język programowania. Nie ma funkcji. To nie ma pętli. To nie ma warunków. Wszystko to ma się dziesiątki różne znaczniki, z których każda ma zero lub więcej atrybutów. A w rzeczywistości, co jest zabawne o HTML jak zaczniesz nurkować w jest to, że jest to bardzo własny pojętny. 

Wszystko co potrzebne jest zrozumienie ogólnej ramach HTML. Co to jest tag, co jest atrybutem, jak można właściwie skonfigurować stronę internetową w następujący sposób. I wszystko inne jest naprawdę wynikiem patrzenia się w odniesieniu internetowych lub guglanie jak zrobić niektóre techniki lub jak widzieliśmy, patrząc na źródło Facebooka Kod, patrząc na stronie internetowej że chcesz na to jest kod źródłowy i zrozumienia, jak tamtejsi deweloperzy właściwie określone rzeczy. 

Tak więc możemy zrobić zdjęcia, jak również. A w rzeczywistości, zrobiliśmy to przed chwilą. Pozwólcie mi iść do przodu i po prostu pokazać. Oto niektóre przykładowy kod. Jeśli kiedykolwiek chcesz zobaczyć Grumpy Cat. Tak więc zauważyć, że mogę mają tutaj znacznika obrazu. A ja mam nad nim komentarza. Mam alternatywę tekst dostępności. Tak więc ktoś, kto jest za pomocą ekranu Czytelnik z powodu wzroku rzeczywiście może to mieć swoje Czytnik ekranu powiedzieć, Grumpy Cat. Bo jeśli nie mogą zobaczyć obraz, to może przynajmniej mają swój komputer powiedz im ustnie, co to jest. A źródłem tego pliku jest cat.jpeg. Faktycznie więc, gdybym naprawdę chciał uzyskać mądry, co mógłbym done-- Nie obiecuję, aby przejść do Rick Astley, więc Idę do google dla kota zamiast. A jeśli pójdę do Google Images tutaj, a my zakładamy, że jest to obraz mojego kota. 

Załóżmy, że mam kontrolę kliknął lub kliknięciu prawym przyciskiem myszy na ten temat, przypadkowo przerażający. I cat.jpeg idę zapisać na pulpicie. Chciałbym teraz wrócić do Cloud 9. Zauważ, że tutaj, mogę przejść do przesyłania plików lokalnych. A jeśli łapię tego Plik, cat.jpeg, zawiadomienie że mogę go przeciągnąć i upuść go w chmurze 9 i to będzie na mnie krzyczeć tutaj. 

Bo już mam wam plik cat.jpeg, ale to jest bardzo łatwe do chwycić zdjęcie, które już zaczerpnięte z Facebook lub Flickr lub podobne i faktycznie przeciągnij go i upuść w chmurze 9, a następnie zrobić to część osobistego strona internetowa lub problemem ustawić siedem lub osiem, jak to już wkrótce. A potem, kiedy wreszcie odwiedzić tego kota, zakładając, ściągnąłem tego samego kota, Ogłoszenie that-- to było urocze. 

Co można zobaczyć jest coś w tym twarzy tutaj. Więc plików, które odniesienia w ramach strony internetowej mogą być lokalne w swoim własnym konto lub zdalnie na innym serwerze jak w przypadku Rick Photo Astley trochę temu. Więc gdzie else-- co jeszcze możemy zrobić tutaj? Warto więc przyjrzeć się poniżej. Wiesz, co jest swego rodzaju cool? 

Mamy do tej pory było co bardzo statyczne strony internetowe. Chcę urozmaicić rzeczy się w następujący sposób. Chcę, aby moje własne wyszukiwarki. Tak aby wyszukiwarki, niech iść dalej i zacząć robić to. Mam zamiar iść do przodu i stworzyć nowy plik o nazwie search.html. I mamy prefabed wersji on-line. Ups. Nie należy wkleić do okna terminala. Gotowe wersje online. I mam zamiar rozpocząć w następujący sposób. Więc oto początek plik o nazwie search.html. Mam zamiar zapisać w dzisiejsza katalog źródłowy. Mam zamiar zadzwonić w tej kategorii. Faktycznie, my zrobimy to lepiej. CS50 Wyszukiwanie i faktycznie zupełnie nie. A teraz, mam zamiar powiedzieć, coś H1 CS50 Search. A potem tu, H2 wkrótce. I tak zakręcić, H1 i H2 na myśli to, co odpowiednio? 

Tak, tak, i śmiały, a nie za duży, ale wciąż śmiały. Więc jeśli mogę zapisać to i idź tu, Zobaczmy search.html pliku. Wszystko w porządku, a ten jest prawy-- [niesłyszalne]. Czekaj. David jest zdezorientowany. Och, to właśnie tam. David jest idiotą. OK. Więc nie jest to. Więc wyszukiwarka CS50 wkrótce. Więc teraz, niech syntezy co zrobiliśmy w zeszłym tygodniu. 

W przypadku, gdy rozmawialiśmy o Mechanika poziomie niższym od HTTP. I te nowe pomysły HTML, który jest po prostu to język znaczników, w którym powiedzieć przeglądarki dokładnie, co robić i wdrożyć własną wyszukiwarkę. Tak więc, zamiast po prostu mówiąc już wkrótce, jestem zamierza wprowadzić coś, co nazywa tag formularz. I w tej formie, będę mają coś w polu wprowadzania. 

A imię tego wejścia pole, będę go nazywać P. Oraz rodzaj tym polu Mam zamiar powiedzieć to po prostu "tekst". I pole tekstowe, jak będziesz zobaczyć, to po prostu pole tekstowe. A więc nie wyczuwam tu mieć coś wewnątrz niego w tym momencie. A więc jestem po prostu dzieje zamknąć tag że ukośnik w prawo w samym znacznikiem. A potem mam zamiar mają jedną inne wejście. Rodzaj wejścia równa złożyć. A potem mam zamiar zamknąć ten też. 

A teraz mam zamiar wrócić tutaj. I już widzimy, choć dość brzydki, mam ale początki moja strona tutaj wyszukiwania. W rzeczywistości, pozwól mi spróbować to posprzątać trochę. Okazuje się, że na Wejście tutaj, mogę mieć kolejny atrybut zwany zastępczy. A może coś takiego widzę, słów kluczowych, a bardziej konkretnie, zapytania o q. 

I zauważyć, teraz mam tego rodzaju tekst szary że znika szybko, jak rozpocząć pisanie, ale to chyba coś widziałem na innych stronach internetowych. Naprawdę nie lubię przycisk Wyślij. Więc jestem naprawdę dzieje się dać Przycisk Prześlij wartość wyszukiwania. A teraz, jeśli przeładować, zauważysz, że mój przycisk zostaje nazwany wyszukiwania. Wiesz, ja naprawdę nie jak logo here. Więc Generator Google Font. 

Chcę, aby urozmaicić ten się dalej. Więc CS50 wyszukiwania. Pozwólcie mi tworzyć swoje własne logo. To ładnie wygląda. Więc teraz pozwól mi zapisać tego as-- chodź. Gdzie to będzie? Nie. OK. Przegapić. Zapisz jako. Głupi przeglądarki. Stand by, będziemy rozwiązać ten problem raz na zawsze. No to jedziemy. W porządku. Przepraszam. Dzień wolny. Teraz to jest odjazdowe. Wyjście w trybie pełnoekranowym. W porządku. 

Teraz, jak normalna Osoba, zapisz obraz jako. Logo.gif. Teraz mam zamiar iść do CS50IDE i Mam zamiar po prostu chwycić logo, Mam zamiar przeciągnąć go do moje źródło siedem katalog, plik już istnieje, jestem OK z tym. Więc mam zamiar go zastąpić bo ja już go. A teraz, w jaki sposób pozbyć się tego? 

Jedźmy przed siebie tu i zrobić źródło obrazu wynosi logo.gif. Zamknij to. Zapisać. A teraz, jeśli wrócę do mojego wyszukiwania Strona, teraz wygląda to całkiem nieźle. W porządku, więc nie ma dość zrobić coś pożytecznego. W rzeczywistości, pozwól mi spróbować wyszukiwania dla kota i zobaczyć co się dzieje. Koty. Cholera. To nie tylko praca, najwyraźniej. Więc co jest kluczowym elementem że brakuje tutaj? 

Racja, nawet jeśli nie wiesz, kodu HTML, Zacząłem się formę oznakowania telefon i mówiłem to jak się wejść, daj mi pole tekstowe i przycisk Prześlij, co kawałek jest najwyraźniej brakuje? Załóżmy, że chcemy rzeczywiście dostać to coś działa poprawnie. Co trzeba zrobić? Mamy potrzebę realizacji tylny koniec bazy danych lub sama wyszukiwarka, i że będzie trwać dużo czasu, szczerze mówiąc. 

Więc pamiętaj, co zrobiliśmy ostatni. Więc jeśli szukasz czegoś w Google a ty z góry wyłączona, Przypomnijmy, błyskawiczne wyszukiwanie. Więc pozwól mi to wyłączyć tak, że faktycznie zachowuje się jak starszy przeglądarce szkolnego, gdybym teraz szukać coś jak koty, przypomnieć, co URL wygląda. Jest to dość tajemnicze. Ale osadzone w nie, Przypomnijmy, jest wyszukiwarka ukośnik. Znak zapytania q równa koty. 

I to wydaje mi dać cała masa wyników wyszukiwania. Więc wiesz, co mam zamiar zrobić? Mam zamiar pożyczyć Google tylko na minutę. Mam zamiar iść na tu i mam zamiar powiedzieć, że tworzy działań lub cel, by tak rzec, powinny być dosłownie Google. I sposób chciałem do użytku będzie uzyskać. 

Więc co jest akcja? Akcja jest dziwnie nazwany, ale to tylko oznacza, kto będzie obsługiwać działanie tej postaci? Po kliknięciu Search, gdzie powinny wynikiem przejść? I jeśli teraz wrócić do formy tu i odświeżyć moją stronę internetową a teraz szukać czegoś jak pies, zauważysz teraz Mam ponownie realizowane Google. Dobrze? 

Jeśli chcę, aby szukać czegoś jeszcze, że działa nie tylko dla psów, działa również dla kotów. Działa również na CS50. I OK, to jest po prostu pod whelming, prawda? Wszystko w porządku, ale to naprawdę działa. Więc co się rzeczywiście dzieje? Tak Uczyłem przeglądarkę, za pomocą HTML wziąć dane od użytkownika i rzeczywiście wysłać to wejście do zdalnego serwera za pomocą protokołu HTTP. 

A ponieważ przeglądarce rozumie, HTTP, to faktycznie skonstruować URL tak, że co I w końcu się w przeglądarce, zauważyć, co się dzieje, kiedy szukał psa. Gdybym kliknij przycisk Wyszukaj, zauważysz, że URL zmienia się, jak zamierzałem do google.com/search~~V zapytania równa psa. A to dlatego, że postaci wie, ponieważ metoda jest uzyskać, po prostu dołączyć go, że adres URL. 

Teraz, te strony internetowe są nadal brzydkie. Warto więc wprowadzić jedna element składni, jeśli możemy dziś. I to jest coś, co znane jak kaskadowych arkuszy stylów. Więc pozwól mi spojrzeć na ten przykład tutaj i zobaczyć czy możemy wywnioskować, co się dzieje. Jest CSS0.html. I to jest, gdzie rzeczy trochę brzydka. Bo niestety, w świecie internetu, HTML nie jest w stanie zrobić wszystko. I tak, jeśli chcesz stylizować swoją stronę, rzeczywiście trzeba skupić się na estetyka w inny sposób. Więc, mam ciało mojej sieci Strona wewnątrz której jest duży div. A div tylko oznacza podział. Tak to jest jak ust, ale to nie mają te same semantykę akapitu tekstu. 

Oznacza to tylko do Przeglądarka, tu duży prostokątny obszar mojej sieci Strona, chcę się nią specjalnie. Teraz, linia 21, gdzie rozpoczyna się, że div. I tylko zgadywać. Co to jest efekt linii 21 na Reszta zawartości strony? Skupiając ją. To wszystko. Więc nie widzieliśmy sposób faktycznie centrowania tekstu. 

W rzeczywistości, moja wyszukiwarka, w przeciwieństwie do rzeczywistego Google, wszystko było uzasadnione na lewo. A więc teraz w linii 21, mówię, hej Przeglądarka, stworzyć podział strony. Po prostu daj mi duży, niewidoczny prostokąt. To jak chcę myśleć o stronie internetowej. A następnie stylizować je w następujący sposób. Wewnątrz tych cytatów, teraz, to drugi język że wprowadzone dziś Kaskadowe arkusze stylów tzw. Na szczęście, to też nie jest język programowania, więc jest to bardzo ograniczone w swojej składni, ale bardzo ograniczone w swojej funkcjonalności podczas gdy HTML jest o Oznakowanie się dane o stronie internetowej i struktura strony internetowej. CSS jest na ogół o ostatniej mili, estetyka, coraz rozmiar i kolor i Umieszczenie dokładnie prawo na stronie internetowej. I rzeczywiście, to jest tworzony z par wartości kluczowych. 

Właściwość jak ten, tekst wyrównać, dwukropek, następnie wartości, które Obiekt, który w tym przypadku jest centrum. A teraz zauważam zagnieździć te rzeczy. Gdybym chciał wszystko, że Mam podkreślił być skupione, dlatego mam linię 21 i odpowiedni wiersz 31. Ale załóżmy, że teraz chcę powiedzieć Jana Harvard, zapraszamy na mojej stronie internetowej. 

Symbolu praw autorskich John Harvard. I załóżmy, chcę pierwszy te linie się być dość duży. 36 pikseli. Więc to jest przyzwoity rozmiar. A ja chciałem jej ciężar być śmiały. Ale poniżej, Chcę mniejszy tekst. A poniżej, chcę jeszcze mniejszy tekst. Przepraszam. Dziś czuje się jak dzień wolny. 

Więc teraz, co ja robię to wyrazić? Tutaj, na linii 22 jest wbudowany div lub zagnieżdżone div, jeśli będzie. To też ma swój własny znacznik stylu. Określić rozmiar czcionki 36. Określić wagę czcionki pogrubione. Tu, tylko podać 24 pikseli. I w końcu, w linii 28, określić 12. Więc po prostu jako szybki test dla pewności a jako ludzki odczytu tego słowa, które na ekranie są faktycznie będzie pogrubiony? Które linie są naprawdę śmiały? 

Tylko John Harvard. Dobrze? Bo tak jak linia 22 mówi, hej Przeglądarka, tu jest podział strony. Upewnij się, że rozmiar czcionki 36 pkt. Sprawdź, waga czcionki pogrubione. Jak najszybciej dotrzeć do odpowiedni znacznik końcowy lub zamknięty znacznik na linii 24, to znaczy, hej przeglądarka, przestać robić cokolwiek to robisz. I nota być jasne, choć Linia 22 ma wszystkie te cechy jak styl, kiedy zamknąć znacznik w linii 24, tylko wspomnieć nazwę znacznika. 

Nie powtarzać styl słowo lub wszystko, co jest w środku tych cytatów. I tak, gdy patrzę na to teraz, w mojej przeglądarce, rzućmy Spojrzenie na wynik końcowy. Pozwól mi odejść naprzód do tego pliku, który jest CSS 0. I to jeszcze całkiem zwykły, ale coraz całkiem interesujące. Ale okazuje się, istnieje inne rzeczy mogę zrobić tutaj, a na ryzyko tworzenia ten całkowicie ohydne, tutaj odnotować, że w moim ciało mojej stronie internetowej, Mogę zrobić coś śmiesznego jak bg lub koloru tła. 

I szybkie, jaki jest twój ulubiony kolor? Zielona słyszałem. W porządku. Więc teraz, jeśli przeładować teraz mamy zieloną stronę. W porządku, więc nie jest źle. A teraz, jeśli chcę, aby to naprawdę super, może sprawić, że kolor mojego tekstu nawet czerwone. Zobaczmy więc, jak to wygląda. Teraz wygląda to całkiem nieźle. I tutaj, jeśli naprawdę chcą zadzierać z kimś lub jeśli chcesz być jednym z tych ludzi, którzy próbuje nakłonić użytkownika do odwiedzania stron internetowych Strona bo już oszukać Google do myślenia, jest cała masa od słowa kluczowe like-- zobaczmy, przeładować. Gdzie poszło? I tam nas. W porządku. Więc mówię to na marginesie, będziemy mówić o tych rzeczach w ciągu kilku tygodni kiedy mówimy o bezpieczeństwa, jeśli rzeczywiście umieszczać całe pęki słowa kluczowe na stronie internetowej, nawet jeśli nie są one widoczne dla ludzkie, ktoś taki jak Google, oczywiście, Nadal można rzeczywiście znaleźć tego. W porządku, więc to dość ohydne dość szybko. 

A w rzeczywistości, to nie wszystko że dużo w przeciwieństwie do mojej własnej sieci Strona jako student, który Zacząłem guglanie około znaleźć poprzednie wersje moich starych stron internetowych. To było bardzo złe. W rzeczywistości, ja znaleźć jeden tuż przed klasą. Ale jest jeszcze gorzej tam. To najwyraźniej był mój strona główna w 1996 roku. Najwyraźniej myślałem, że to należy zwrócić ludziom ich nazwy zanim mogli rzeczywiście zobaczyć moją stronę internetową. 

A potem pokazał im coś głupiego, pewnie. Będę kopać się więcej na następny raz. Ale teraz, niech rozważyć trochę projektowania. Mówiliśmy o stylu. I ta strona do tej pory i Najbardziej wszystko pisałem jest dość czyste stylistycznie. Ale co z projektu? Cóż, jest wiele redundancji w co ja tu robię. 

Pisałem słowa Kolor w kilku miejscach. Pisałem w kilka rozmiar czcionki miejsca i śmiałe w kilku miejscach. I zasadniczo, jestem współpracy mieszając się dwóch języków. Mam znaczników HTML z moimi i moich atrybuty, a potem nagle, cudzysłowie, mam drugi język dziś zwany CSS, które znowu, to tylko te pary wartości kluczowe lub te właściwości rozdzielone dwukropkiem. 

Okazuje się, że wiele podobnie jak w C, gdzie może rozpocząć czynnik poza jakiś kod w plikach nagłówkowych, więc możemy zrobić to samo w HTML. Oraz krok w kierunku, który jest w sposób następujący. Zauważ, że ta wersja, CSS1.html jest Strukturalnie dokładnie tę samą stronę. Więc ja mam całą masę z div, ale tym razem, mam pozbyć opakowaniu div jak zobaczysz. 

I dałem te trzy div górny, środkowy i dolny, unikalne identyfikatory. To jest miłe, bo przez dając te podziały o stronie unikalnych identyfikatorów, Mogę odwołać je gdzie indziej. Gdzie? Cóż, pozwól mi przewijania w górę. I do tej pory, w każdej chwili możemy Sprawdziliśmy na czele strony WWW, co jest tylko tag jakie mieliśmy w szef strony internetowej? Trochę głośniej. Tylko tytuł tej pory. Ale okazuje się, istnieje kilka innych rzeczy można umieścić tam, jeden z która się nazywa tag styl. Więc przed chwilą, przyjrzeliśmy w atrybutu stylu. Okazuje się, że istnieje tag styl. Należy wewnątrz szef strony internetowej. A teraz zauważyć to, co robię. Mam wewnątrz tego tag styl następujące. Ja dosłownie wspomnieć na linii 20, nazwa znacznika, że ​​chcę do stylizacji. 

Potem mam otwarty nawias klamrowy i zamknięty nawias klamrowy. Tak więc w duchu podobnym do C, ale Ponownie, nie jest funkcja to jest po prostu syntaktyczne szczegółów tutaj. I wtedy oczywiście, mówię przeglądarka, hej przeglądarka, aby całe ciało strony mają wyrównanie tekstu w centrum. A potem to mówi, co następuje. Hej przeglądarka, jeśli widzisz HTML Element lub tag na stronie, która ma unikatowy identyfikator góry, więc symbol krzyżyka tutaj po prostu oznacza, Unikalny pomysł góry, śmiało i dokonać jego rozmiar czcionki 36 a jego waga czcionki pogrubione. 

Hej przeglądarka, element, którego ID jest w środku, sprawiają, że 24 pikseli. I hej przeglądarka, jeśli widzisz Pomysł dole, sprawiają, że 12 pikseli. Wpływ na koniec jest dokładnie taki sam. Jeśli pójdę do CSS 1, Strona wygląda tak samo. Ale jesteśmy krok w kierunku nieco lepsza konstrukcja. Chciałbym teraz wrócić tutaj, aby CSS2 i zobaczyć, co jeszcze zrobiłem. 

Teraz strona jest bardzo, bardzo czyste. W rzeczywistości, mogę zmieścić wszystkie zawartość na stronie tutaj. Ale to, co nowy tag ja wprowadzone, oczywiście? Link. I to nie jest najlepsza nazwa dla tagu bo to nie jest związek, w tym sensie, że go znamy, ale oznacza to, link w innym pliku. To jest trochę jak ostre to w C. 

To jest sposób, w formacie HTML powiedzieć hej przeglądarkę, przejdź się zawartość plik o nazwie css2.css. Związek, do mnie, jest to, że jest to arkusz stylów. I rzeczywiście, to właśnie jeden z S w stylów kaskadowych arkuszy pomocą. Jest to arkusz stylów. To jest po prostu plikiem tekstowym zawierającym cała masa nieruchomości. Jest cała masa stylów które chcesz zastosować do strony. 

A więc to najwyraźniej jest odnosi się do drugiego pliku. I jeśli mogę otworzyć tego, CSS2.css, zauważysz, że wszystko zrobiłem jest skopiować i wkleić wszystkie to w tym pliku. A teraz, nawet jeśli nigdy wcześniej nie przed zakodowane te rzeczy, po prostu uważają z Technika przysłowiowy kapelusz na, Dlaczego jest to lepsze projektowanie pewnie? Faktoring się na te właściwości CSS, wprowadzenie ich do własnego pliku. Mimo, że rozwiązaliśmy ten Problem jak pięć minut temu w pierwszej wersji. 

Nie Ulepszyliśmy Strona stylistycznie, to jest po prostu lepszy projekt w pewnym sensie. Czemu myślisz? Tak. Bardziej elastyczne, jak? Tak. Więc jeśli chcesz iść do tyłu i zmienić ten stan rzeczy, Teraz masz jedno miejsce gdzie można coś zmienić. I faktycznie, coś jak problemem ustawić siedem, gdzie będziemy zaimplementować Zdjęcie strona handlowym, że będzie mieć cała masa stron. I byłoby naprawdę irytujące, jeśli zdecydujesz, hm, Naprawdę nie lubię 24 pikseli, chcę że jest 28 pikseli lub nieco większy. I wtedy trzeba zrobić globalnego wyszukiwania i zamiany lub otworzyć wszystkie pliki swojej witryny wystarczy, aby rzeczywiście zmienić jedną wartość. Poprzez faktoring z tych stylów w jednym centralnym miejscu, można teraz otworzyć jeden plik tekstowy w CS50IDE do dowolnego programu, zmienić, zapisać je i gotowe. Masz propagowane tych Zmiany wszędzie. I że takie same w pliku dot h, jak również. Więc wszelkie pytania w ten sposób pory na tej składni? W porządku, więc mamy zrobić wszystko, co wydaje się z wyjątkiem właściwie wdrożyć hiperłączy. I tak idziemy do przodu i to zrobić. Pozwólcie mi iść do przodu i utworzyć nowy plik tutaj. Mam zamiar to nazwać link.html, umieścić w dzisiejszym kodu. 

A ja zamierzam zrobić otwarta Uchwyt typu doc ​​html. Tak na marginesie, to rzeczy w góry, deklaracja typu doc, to jest tylko jedno, że to dziwne, z wykrzyknikiem. Po prostu trzeba to zrobić tam i to Oznacza używamy HTML w wersji 5. Starsze wersje Język miał znacznie dłużej struny, które wymagają, aby tam umieścić. Więc tutaj jest przykład o nazwie Link. 

Potrzebuję ciało mojej stronie tutaj. I tutaj, a href równi powiedzmy HTTP://www.disney.com i moja ulubiona strona, powiemy. W porządku, więc bardzo nieszkodliwe, Strona przyjazna dla użytkownika. Jeśli teraz przejść do mojego katalogu wymieniając tu i otworzyć link.html, mamy tekst hiper. 

I rzeczywiście, to jest, gdy H w HTTP pochodzi. Hypertext Transfer Protocol to jest o przeniesienie tekstu że ma hiperłącza do innych zasobów. I rzeczywiście, tutaj jest znane, jeśli retro, niebieski link, który, jeśli kliknięciu, rzeczywiście doprowadzić mnie do Disney.com. Teraz, Och, to niebawem. Dobrze, więc teraz, jakie są z tego konsekwencji? 

I szczerze mówiąc, świat zaczyna się trochę bardziej zaznajomieni a także trochę przerażające ale także trochę bardziej samo się obronić po uruchomieniu zrozumieć te rzeczy. Ponieważ kursy są, niektórzy z was, jeśli go za pośrednictwem folderu spam Gmail lub nawet skrzynka odbiorcza, to prawdopodobnie zdobyć jakieś wiadomości e-mail który jest prośbą, aby zmienić Hasło może, a może sprawdzić poświadczenia PayPal lub cokolwiek. 

A w rzeczywistości, to mogło zostać odebrane coś, co mówi się jak kliknij tutaj zresetować hasło PayPal. A teraz, zauważy, jeśli Nie jest to Disney.com ale jak badplace.com i reload, pamiętać, że tekst tutaj można powiedzieć czegokolwiek. A w rzeczywistości jest to tylko słowa. Dlaczego nie mogę być w rzeczywistości bardzo szkodliwy i powiedzieć http://www.PayPal.com. 

Kliknij tutaj zresetować PayPal hasło i teraz przeładować. To wygląda całkiem legalne, prawda? To znaczy, ja nie kliknąć e-mail, który po prostu mówi to. Ale zwróć uwagę na dychotomię tutaj. Mówi www.paypal.com, i faktycznie, zaraz, Wiemy, że chcesz S dla bezpieczeństwa. Więc teraz, przejdź do www.paypal.com HTTPS, ale jeśli nie zrobiłeś tego wcześniej, rozumiem w zwyczaju unoszące się nad tutaj niewiele łączy. I trudno, aby zobaczyć tam na ekranie, i to nie wszystko, że łatwiej tutaj. Ale tu, w dół malutki mały rogu czy przeglądarka rzeczywiście powiedzieć, że jedziemy do badplace.com zamiast Paypal.com. Teraz, gdy mamy zamiar z tym? Wszystkie przykłady zrobiliśmy dzisiaj, mamy zapisane na stałe i wpisane ręcznie. W internecie jest bardzo nieciekawe, kiedy trudno kodowanie stron internetowych, tak aby treści jest statyczna i nigdy nie zmienia. Oczywiście, wszystkie nasze ulubione strony internetowe, dzisiaj, czy to Gmail lub Twitter lub Facebook lub dowolną liczbę innych są dynamiczne. Są zmiany w reakcji na działania użytkownika tak jak w wynikach wyszukiwania Google. 

I tak w środę, co możemy zrobić, to zostawiamy HTML i wprowadzenie CSS za nami, a my się za pewnik, że my teraz wiedzą i wprowadzamy nowy język programowania nazywa PHP, które lubię C, ma dać nam moc, by tworzyć programy że sami generować. W tym przypadku będziemy używać PHP do generowania dynamicznie internecie stron za pomocą tego nowego języka. Więc więcej o tym w środę. Do zobaczenia. 

[MUZYKI]