>> [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.
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]