[MUZYKA GRY]
ALLISON Buchholtz-AU: Dobra, wszyscy.
Witamy z powrotem do sekcji.
Tak więc nasz program na dzisiaj się dzieje ponad web dev znacznie więcej rzeczy.
Nie wiem, ilu z widzieliście swoich psets
ponieważ został zwolniony wcześniej rano.
Chciałbym tak jak wiele ludzie przeczytać specyfikację,
ale skoro, jak masz już wszystko o, jak siedem godzin na to patrzeć
i jest to poniedziałek i to prawdopodobnie miał klasę,
Mam zamiar założyć, że większość z was nie ma.
Jeśli masz, dodatkowe sława.
>> Jesteś w zasadzie pomaga zaimplementować proste internecie
serwer w C, który jest nowy pset, więc chłopaki dostać się świnki morskie.
To będzie zabawa, dziki tygodniu ale myślę, że to będzie dużo zabawy
i to będzie naprawdę dobre doświadczenie rzeczywistości.
Tak, aby przygotować się do że w sekcji dzisiaj,
mamy zamiar iść chmod, TCP / IP, a potem trochę HTML i CSS.
>> Na koniec, będziemy rzeczywiście kod nawet prostej strony internetowej wraz
aby pomóc Ci faceci rodzaj dostać więcej zapoznał się z tym.
A następnie, jeśli nie podniósł Twoje quizy, są z przodu,
ale jestem prawie pewien, że każdy tutaj ma swój quiz.
A także o tym pamiętać, rozwiązania nie są się jeszcze,
ale jak tylko finish-- lubimy, Ostatnie kilka osób przyjmujących ich quizzes--
będą one w górę.
Jeśli masz jakieś pytania W międzyczasie
nie krępuj się napisz do mnie osobiście.
Odpowiadam z jednostki pytania, jak zawsze.
>> Więc na tej notatki, chmod.
Więc w zasadzie wszystko, co wiedzieć o chmod
jest to, że jest używany do zmiany uprawnienia do plików, prawda?
Więc to tylko niektóre systemy nazywają się zmienić uprawnienia, jak mówi się tutaj.
I jeśli kiedykolwiek chcesz zobaczyć jakie uprawnienia ma plik,
zamiast po prostu robi ls, można zrobić ls -l.
l stoi na długo.
>> Więc zrobisz długie listy wszystkiego, i to
daje znacznie bardziej szczegółowe informacje o każdym z plików.
A zobaczysz something-- jestem zamierza przejść od razu do second--
ale zobaczysz coś podobnego do że górna linia nie dla każdego pliku.
I będziemy przechodzić przez to, co to znaczy.
>> Tak więc w zasadzie, aby zmienić Twoje uprawnienia do plików,
po prostu chcesz użyć chmod.
Możesz myśleć o tym, jak każdy inny UNIX zadzwonić jak ls i cd lub etażerka.
To tylko rodzaj innego jak połączenie.
>> Więc robimy chmod i wtedy będziemy trzy cyfry zazwyczaj.
Istnieje kilka sposobów na to, to, z których jeden pójdziemy nad.
Ale zazwyczaj, musisz trzy cyfry w zakresie od 0 do 7 za każdym razem.
>> Więc jedno jest, że istnieją trzy różne uprawnienia
że możemy dać każdy plik.
I to jest czytelne, co jest reprezentowana przez r, które sensu
w trochę; w, który jest zapisu; i wykonywalny, który jest x.
Wiem, że e jeden, wykonywalny, Może nie jest to najbardziej sens, ale
reprezentuje ją x.
>> A potem co się dzieje, to każdy z nich również reprezentację numeru.
Mamy więc 1, 2 i 4.
I w zasadzie to, co się dzieje, każdy z tych numerów
, odpowiada inny zestaw użytkowników
że te uprawnienia dotyczą.
>> Więc można myśleć, że pierwszy liczba odpowiada rzeczywistej użytkownika
lub właściciela pliku, druga liczba będzie odpowiadać grupie
i ostatni dotyczy do świata, OK?
Więc co się dzieje, to pamiętaj, te numbers-- r wynosi 4, w oznacza 2,
x oznacza 1, prawda?
This-- jeśli zsumować je w górę, że daje to pierwszy numer
że moglibyśmy wejście w naszym chmod.
>> Więc w tym przypadku, co będzie to liczba będzie?
Byłoby 4 plus 2 plus 1, który jest 7, prawda?
I w tym przypadku chodzi nie ma nic,
tak to tu będzie przekłada się na chmod 700, OK?
I co to robi to przyznaje wszystkim z tych uprawnień do Twojego użytkownika.
>> Więc to oznacza naszą użytkownika mogą robić, co chcą.
Można je odczytać ten plik.
Mogą wykonywać ten plik.
Mogą pisać do tego pliku.
Ale grupa i świat, nie uprawnienia, co, OK?
>> Więc inny sposób napisać, że możemy zrobić chmod z trzech cyfr, z których każda
odpowiada jakiejkolwiek sumy lub że specyficzna grupa jest specyficzny podzbiór.
Albo możemy zrobić naprawdę coś innego.
Trzymaj się.
Możemy zrobić coś z nich tutaj.
>> Jak wielu z was widział przykład gdzie, jak to jest chmod a Plus X?
Czy widzisz, że w wykładzie, myślę?
Więc oznacza wszystko.
Oznacza to, dać go do wszystkich użytkowników, którego zapomniałem umieścić tutaj.
>> Ale plus x, jeśli my zauważyć tutaj, jeśli robimy
do chmod-- co grupa jesteśmy mówisz oraz uprawnienia
chcemy dać im.
Więc to może być plus lub minus.
Plus dodaje zgody.
Minus zabiera zgody.
Dość intuicyjny, tak myślę.
>> Więc plus x oznacza chmod.
Tak zmienić prawa wszystkich ludzi Jeśli jest to A-- uprawnienia dodać.
I x-- co oznacza, że ​​uprawnienia mamy udzielania wszystkich.
Czytać, pisać, lub wykonać?
>> Publiczność: Execute.
>> ALLISON Buchholtz-AU: Execute.
Więc dajemy wszystkich użytkowników uprawnienie do wykonywania tego pliku, OK?
Więc co, jeśli chcemy zrobić że z postaci numerycznej?
Więc pamiętaj o numeryczne, Chcemy trzy numery.
>> Publiczność: 4.
ALLISON Buchholtz-AU: Co to było?
Publiczność: 4.
ALLISON Buchholtz-AU: Nie 4.
Publiczność: 0, 0, 4.
ALLISON Buchholtz-AU: Cóż, chcemy dać go do wszystkich użytkowników, tak?
Więc będziemy mieć Liczba w każdym gnieździe.
To będzie sama liczba w każdej szczelinie
bo my po prostu chcemy dać Wszyscy uprawnienia wykonywalne.
Więc wykonywalny jest 1, ale na dobrej drodze.
>> Jeśli więc nie chmod 111, które być odpowiednikiem chmod na Plus X.
Czy to ma sens dla każdego?
Mamy zamiar przejść przez kilka przykładów.
>> Tak duży wynos o to tu nie ma,
ale po prostu oznacza, dać go do wszystkich użytkowników.
u jest, jeśli tylko chcesz dać lub zabrać
specjalnego zezwolenia użytkownik lub właściciel.
g dla grupy, tak, że środkowa cyfra.
A potem inni mogą myśleć w świecie, w tej ostatniej cyfry.
>> Więc z tym, pójdziemy na przykład, bo czuję się jak zawsze przykładów
aby te rzeczy łatwiej zrozumieć.
Więc rwx-- przeszliśmy this-- może być również reprezentowaną 700.
To przykład patrzyliśmy co więcej obrazu.
Więc chmod 444 na jakimś pliku dałoby jakie uprawnienia?
Byliście bardzo blisko.
Publiczność: Czytelny dla wszystkich.
ALLISON Buchholtz-AU: czytelny.
Tak czytelny dla wszystkich, prawda?
A potem, co jest kolejnym sposobem, aby to zrobić?
Jeśli chcemy zrobić chmod z albo R lub W, plus i minusy,
co, że połączenie wygląda?
Byłoby chmod co?
>> Publiczność: plus r.
>> ALLISON Buchholtz-AU: R oraz na pięć.
OK, więc jest taki sam jak ten, zaledwie dwa różne tłumaczenia
z tej samej rzeczy.
Więc z tym, mamy je.
Więc chcę ci faceci, aby spróbować i napisać ich rodzaju w ich odwrotnie.
>> Więc z chmod 555, co to będzie jak?
Byłby to plus lub u oraz czy etażerka?
Dla u Plus X, daj mi trzy numery.
A potem powiedz mi, o jakie uprawnienia my rzeczywiście udzielania i do kogo?
>> Więc dam wam dwa minut do pracy na to.
Zapraszam do rozmowy ze sobą.
Dla tych z Was, którzy przyszli w mało późno, nie jest cukierek i koszule.
Mamy trzy koszule w lewo, a mamy Kit Kats i Starbursts.
Więc nie wahaj się przyjść grab niektórzy w tym małym interludium.
>> Również ostatnia jest trudne.
To dwa chmods do ostatniego.
Właściwie, pozwól mi zamknąć te drzwi podczas gdy chłopaki pracują nad tym.
Cukierki zawsze konieczne w poniedziałek po południu.
>> OK, więc chmod 555.
Co znajduje się w inny sposób możemy napisać, że?
Jakieś pomysły?
Tak.
>> Publiczność: oraz RX.
>> ALLISON Buchholtz-AU: R oraz RX.
Czy chcesz, aby wyjaśnić, dlaczego byłoby rx?
>> Publiczność: Ponieważ masz 5, więc to 4 plus 1,
więc to czytać oraz wykonywalny, i to dla wszystkich.
ALLISON Buchholtz-AU: Prawo.
Więc po prostu przypomnieć, 5 tutaj znamy jako suma 4 i 1,
ponieważ każda liczba w naszym trio jest sumą uprawnień dla tego podzbioru,
prawda?
Albo użytkownik, grupy lub świata.
Więc w tym przypadku wiemy, że 5 musi być utworzony przez 4 i 1.
>> 1 i 4 oraz odpowiadają czytelny i wykonywalny.
Dajemy go wszystkim, więc możemy zrobić chmod a RX Plus.
I oczywiście, po prostu poszliśmy przez tamtejszych pytania,
więc teraz jest to plik wykonywalny i czytelne dla wszystkich.
>> A co z drugim?
Co może dla tego jednego numeru jest?
Jakieś pomysły?
Śmiało.
>> Grupa docelowa: 100 [niesłyszalne].
>> ALLISON Buchholtz-AU: 100.
Dokładnie.
Więc chcesz wyjaśnić dlaczego 100?
Publiczność: Bo to jest dla użytkownik, więc w pierwszej pozycji.
A potem x wykonywalny to 1.
ALLISON Buchholtz-AU: Dokładnie.
Więc jesteśmy udzielania wykonywalny uprawnienia do zaledwie użytkownika.
Tak więc w tym przypadku, byłoby 100.
A ja mam wszystkie odpowiedzi do następnego slajdu w przypadku
piszesz wiele rzeczy w dół.
>> OK, więc to następny jest rzeczywiście zrobione z dwoma chmods, można to zrobić.
Więc czy ktoś ma każdy pomysł, w jaki sposób mógłby
chmod 640 przepisany się w inny sposób?
A potem można zmienić użytkownika można zmienić grupę moja wskazówka.
>> Więc jeśli my właśnie zmiana Użytkownik, który to pierwszy tutaj
co nasza rozmowa może być?
Tak więc użytkownik jest u, prawda?
Więc chmod u oraz, co?
MMHMM?
>> Publiczność: rw.
ALLISON Buchholtz-AU: rw.
Prawo dla czytać i pisać, bo przeczytane wynosi 4, w jest 2, te sumy razem jako 6.
Więc mamy chmod u oraz rw, i dostajemy nasze pierwsze sześć tam.
>> Tak więc, aby uzyskać cztery, teraz chcemy zmienić nasze ustawienia grupy.
Więc mamy zamiar zrobić chmod g plusa co?
Co znajduje się 4?
>> PUBLICZNOŚCI: r.
ALLISON Buchholtz-AU: r.
Dokładnie.
Więc dajemy właściciela uprawnienia do odczytu i zapisu
i dajemy odczyt grupy uprawnienia, które mamy wszyscy tu.
MMHMM?
>> Publiczność: Jeśli możesz napisać coś, czy to oznacza, można go wykonać?
>> ALLISON Buchholtz-AU: Ty Można napisać do something--
Nie wierzę, że to Oznacza można go wykonać.
Fajne.
Tak to się właśnie przeszedł.
Tak więc w tym następnym, to tylko rodzaj wspólne sprawy
które chcesz zachować w nic na ustawić twój problem.
Zwykle są uprawnienia że podoba Ci się w użyciu.
>> Więc na 711, co daje nam, oczywiście, użytkownik
wszystkie uprawnienia, które ma tendencję do sensu.
I to jest to plik wykonywalny przez Grupa na świecie, które ma sens
jeśli masz jakiś katalog, to Aby móc przechodzić do niego.
Ludzie potrzebują dostępu.
>> Dla każdego pliku nie PHP, będziesz korzystać z 644, co zrobić, co?
Co to oznacza, czy to, co nie, które dają uprawnienia?
Tak więc właściciel może co?
Publiczność: czytać i pisać.
ALLISON Buchholtz-AU: czytać i pisać.
A następnie grupa i inni może po prostu czytać, prawda?
A potem chmod 600 dla każdego Pliki PHP, które używają,
Twój właściciel, znowu można czytać i pisać do niego
ale wszyscy inni tylko rodzaj zablokowany.
>> Więc to będzie w rzeczywistości bardziej przydatne przy
można dostać się do problemu W przyszłym tygodniu, gdzie ustawić
jesteś rzeczywiście budowa strony internetowej.
Więc jeśli kiedykolwiek napotkasz jakieś dziwne problemy
gdzie to nie jest ładowanie prawidłowo, może ci
trzeba dodać plik wykonywalny pozwolenie, czy może trzeba czytać
lub prawa zapisu.
Małe rzeczy, że ludzie mają tendencję do podróży się, ale to trochę jak iść do
po uruchomieniu w przyszłym tygodniu Pset.
I chciałbym ci dać więcej wskazówki na ten tydzień Pset,
ale mam jeszcze na to patrzeć od został wydany dziś rano.
Ale mnie e-mail, będę wyglądał w niej przez czas odpowiem jutro.
>> Więc teraz, to wszyscy dobrze z chmod?
Wszelkie utrzymywane pytania?
Całkiem proste.
Wystarczy rodzaju śledzenie tego, co czytać, pisać i wykonywać numery są
to chyba najtrudniejsza część.
>> Więc z TCP IP, wszystkich tych protokołów /, trochę jak ze swoich struktur danych
w zeszłym tygodniu, jest znacznie bardziej ważne jest, aby rodzaj się
wyższa intuicja poziom nich.
To nie jest CS143 gdzie jedziemy prosić do wdrożenia sieci,
tak będzie w porządku, jeśli nie rozumiesz
piaszczysty nitty wszystkich protokołów.
Co jest ważne, aby zrozumieć, tak jakby to, co reprezentują
i dlaczego są one ważne.
>> Tak, TCP / IP, oczywiście, jest Transmission Control Protocol
lub Protokół internetowy, który jest w zasadzie tylko zbiór przepisów w zasadzie
lub normy, które mówią dane jak powinien być traktowany,
jak powinna być pakietowany, transmitowane i odbierane.
Więc w zasadzie, tak jak to mówi tutaj, zwiększa szanse
że dane dostaje gdzie chcesz go dostać.
>> Jestem pewien, że jeśli faceci poszedł wykład lub oglądałem go w Internecie,
on has-- Nie wiem jeśli zrobił to w tym roku,
ale wiem, że w zeszłym roku, miał demo, gdzie miał obraz Roba
i podzielił go na cztery i umieścić go w kopertach
i starał się ją przez Sandersa.
I można rodzaju myśleć o tym w ten sposób.
To po prostu zbiór zasad, które powiedzieć, jak uzyskać dane gdzieś
i pozwala wiedzieć, czy brakuje danych,
w taki sam sposób, jeśli biorąc wiele stron notatek
oraz oznaczyć je stronie 104, strona 204, i wrócić na studia później
i brakuje something-- nie można odnaleźć strony 304-- wiesz
coś jest nie tak, więc Ciebie Można przejrzeć notatki
ponownie lub poprosić kogoś, aby ponownie wysłać cię Wykład zauważa, od tego dnia.
W ten sam sposób z danych w internecie.
Jeśli pytam coś z jakimś serwerem
i musi wysłać że w wielu pakietów
prawdopodobnie będzie liczbą że w jakiś sposób, niech
ja wiem, ile mam otrzymali, i powiedz mi, och, jest to jeden z 10
czy jest to jeden z 10.000.
W ten sposób, kiedy idę, aby ponownie wszystkie elementy razem,
Wiem, że jeśli czegoś brakuje i mogę poprosić o to ponownie.
Czy to ma sens?
Tylko zestaw reguł.
Na jej podstawie, zbiór zasad, OK?
>> Więc rozmawialiśmy także Trochę o portach.
Jest to tak naprawdę standard pozwala wiedzieć, jaki rodzaj danych
są przesyłane w tych pakietów.
Jeśli idziemy z naszym Koperta przykład, my nie
wiem, że jest to obraz Rob tam chyba nam się to napisać
na zewnątrz naszego koperty.
Więc porty są w zasadzie to samo.
To jest po prostu sposobem, aby dowiedzieć się, co typ danych jest transmitowany.
>> Mamy więc wszystkie Najczęściej spotykane tutaj.
Więc 21-- są to również rodzaj z jak dobre rzeczy wiedzieć.
To rodzaj quizu pytanie łatwe.
Bądź jak, co to port 80 zrobić?
Albo, co ma port 443 zrobić?
Tak dobre rzeczy wiedzieć.
>> Tak więc mamy tu 21 plików protokół transmisji, więc po prostu
zasady, które rządzą transfer plików.
25, coś, co wszyscy używać zbyt dużo, jest e-mail.
53 to nazwa domeny system, który jest w zasadzie
tylko rodzaj odnośnika do Adres IP z nazwą domeny.
>> Więc jestem pewien, że był mowa w wykładzie, jeśli Ciebie
Do czegoś takiego google.com, ma adres IP
że jest z nim związane.
To nie jest naprawdę google.com.
I tak 53 jest portem że faktycznie ma
opieka rodzaju tłumaczenia to do tego adresu IP dla Ciebie.
A następnie 80 i 443 są bardzo częste.
Albo masz swoją stronę internetową lub masz bezpieczną stronę internetową,
który wiele stron internetowych są przeniesienie na do teraz.
>> Więc to jest trochę wysoka przegląd protokołu transferu.
Nie widzę wiele bardziej w głębi.
To trochę fajnych rzeczy jeśli jesteś zainteresowany.
Jest mnóstwo środków.
Wikipedia rzeczywiście jest bardzo dobra strona.
Tak patrzyłem na niego po prostu jakiś czas temu,
tak, bardzo polecam patrząc na to, czy jesteś zainteresowany
lub wziąć 143 w ciągu dwóch lat, ponieważ Myślę, że to co drugi rok.
>> A więc na końcu tego, mamy mówić o stronach internetowych i HTTP,
co jest rzeczywiście na nasz następny temat dzisiaj zanim pójdziemy do HTML i CSS
i rzeczywiście można zakodować do strony internetowej.
Będzie fajnie.
Musimy zdjęcia zające i to będzie wielki.
>> Więc HTTP, jak widać tutaj, jest jednym z uroczych akronimów
W tym tygodniu, co jest Protokół HTTP.
Więc jeszcze raz, to tylko inny zestaw zasad, które
reguluje hipertekst przenosić, w niniejszym przypadku.
Więc najlepszym sposobem, aby dowiedzieć się, o to tylko rodzaj
na rozbicie go na te pojedyncze słowa
ponieważ istnieje wiele słowa na ekranie tam.
>> Więc mamy zamiar zacząć hipertekstu.
Więc "hiper", można pomyśleć "Góry", jak super-typu rzeczy.
Więc to naprawdę tylko tekst wzięty do Następny poziom, więc jak Super tekst,
jak następnym tekście.
Więc to w zasadzie tylko tekst, który daje nam
więcej informacji niż normalny tekst robi, OK?
>> Więc w tym przypadku tutaj, to jest hipertekst.
To mówi nam, że mamy jakiś link, który mamy zamiar,
który jest cs50.net, co jest teraz cs50.harvard.edu.
Slajdy te są trochę stare.
I to się dzieje, aby wyświetlić to jak to, jako hiperłącze,
i wtedy naprawdę super strona.
>> Więc jest to tekst, który jest trochę trochę naprawdę fajnych rzeczy w tam.
Więc można połączyć rzeczy i można wstawianie obrazów można projektować rzeczy.
A rzeczą, która najbardziej wam znajome faceci mają prawdopodobnie z hipertekstu
jest HyperText Markup Language, HTML, co oczywiście wszystkie wstęgi
które widzimy wokół nas, przyznane z pewnym stylem CSS wrzucony.
>> Ale jeśli ktoś był naprawdę duże z MySpace,
Jestem pewien, że wszystkie używane HTML wszystkie razem do utworzenia
Profile te idealne, prawda?
Czuję, że to może być nieaktualne odniesienia teraz, ale co tam.
Wystarczy little-- chłopaki nie jest to, że o wiele młodszy.
Niektórzy z was są starsi ode mnie.
MySpace był jeszcze rzeczy, kiedy byłem młody.
Nie jestem aż tak stary.
>> Tak czy inaczej, HTML tylko forma hipertekstu.
Hipertekst jest właśnie tak tekst z dodatkowych funkcji.
Więc prawdopodobnie jest protokół transferu bardziej wątpliwe jest, aby to wyjaśnić.
Oczywiście, transfer-- tylko transfer danych.
Więc albo między klientem, jak twój brat internetowej i serwera.
Więc w zasadzie tylko sposób działa internet.
>> Tak dokładnie żądanie jak te prace, jesteśmy
w rzeczywistości będzie wyglądać na Przykład Wniosek i odpowiedź.
Ale jak możemy zażądać informacji z serwera
i jak serwer odpowiada nam to co reguluje to protokół transmisji.
Więc wniosek i odpowiedzi mają do tych konkretny zestaw reguł.
To jest znormalizowany tak, że nie ważne gdzie korzystasz z internetu,
to zawsze działa tak samo, OK?
>> Ponownie, protokół, zbiór zasad.
To jest po prostu normalne oddziaływaniu w taki sam sposób,
że profesor mówi o Malan jeśli ktoś rozszerza ich strony,
wiesz, że to jest wspólny uprzejmości dotrzeć do Ciebie się i uścisnąć rękę.
To protokół, prawda?
>> Więc daję trochę standardowego wniosku, co chcę uścisnąć rękę,
i dać jakiś standaryzowany odpowiedź, która jest albo nie, dziękuję
lub można spróbować i potrząsać ręka, a może masz zamiar spróbować
i uderzać pięścią mnie.
I nie musimy się protokół, który.
To psuje.
Ale jeśli wszyscy następująco Ten sam protokół, oczywiście,
idzie o wiele bardziej płynnie.
Ludzie poznają się wzajemnie.
Wszyscy są szczęśliwi.
>> Tak więc w świecie sieci, każdy ma taką samą rules--
nieco lepiej niż normy społeczne.
Ale z tego, przyjrzymy na przykład żądanie tutaj.
Więc jest to trochę Kluczem tutaj na dole
które mówi, różne kolory, co oni mają na myśli.
>> Tak biały jest tak samo, jak metody Wniosek i protokół version--
więc wniosek metoda, wersja.
I to jest pewne Nazwa pola i wartość
tego pola, które będzie udać się na bardzo, bardzo krótko.
Więc to jest wniosek przykładem.
To tak, jakby mnie rozszerzenie się, chce się przedstawić.
>> To, co klient lub co Twoja przeglądarka
byłoby wysłanie do serwera.
Więc to jest żądanie GET, więc prosząc o coś z serwerem.
I to jest, oczywiście, HTTP i jest to wersja 1.1.
>> Więc reszta to tutaj jest to, co nazywamy nagłówek, a jej dodatkowe informacje
co daje nam lepsze pojęcie o co mamy w rzeczywistości prośbą o,
lub informacje, które chcemy dać serwera, które mogą być istotne.
Tak User-Agent daje trochę więcej Opis on-- na przykład tutaj,
curl / 7.24.0 jest rzeczywiście powie Serwer, który używamy Google
Chrome w naszej przeglądarce.
Więc jeśli kiedykolwiek usłyszysz o ludzie, którzy mówią
o co aplikacja reaguje na wielu przeglądarkach,
to jest coś, że będzie korzystać, bo jeśli
nie wiem, co przeglądarka wniosek pochodzi,
nie można dopasować do danych.
Więc w tym przypadku, użytkownik jest po prostu dając tego rodzaju
informacji identyfikujących o tym, co przeglądarka
Twój użytkownik jest aktualnie używany, OK?
>> Tak więc mamy także wiele, co jest dokąd rzeczywiście chcą, aby przejść do.
W tym przypadku chcemy, aby przejść do apple.com, kupić kilka fajnych nowych iPadów
czy coś, a może słodkie światła w naszych pokojach akademika.
Nazwa i wartość na koniec tylko wypełniacz, tak ogólnie rzecz
na wy zobaczyć.
To rzeczywiście nie odpowiadają niczego tutaj.
>> Więc można mieć za dużo lub za mało, jak chcesz w każdym przypadku.
Większość czasu są opcjonalne.
To po prostu zależy od tego, co trzeba z przeglądarki,
od użytkownika w celu prawidłowo dać wniosek.
Czy to zależy od tego, co użytkownik rzeczywiście chce zrezygnować z serwerem.
Więc możesz mieć wiele, wiele z tych nazw pól nagłówka
lub może po prostu mieć kilka.
Jak z tak wielu rzeczy Mówiłem w tej sekcji,
to naprawdę zależy od kontekstu od tego, jak używasz tego.
>> Więc czy to ma sens dla każdego?
To jest tylko przykład wniosek, nagłówki, etażerka.
OK, więc z tym, mamy kilka odpowiedzi.
>> Znowu mamy kod statusu, protokół wersji, a następnie nazwa pola i pola
wartość jak zawsze.
Więc naszej wersji protokołu i nasz kod statusu 200.
OK, to znaczy, tak, wszystko poszło dobrze.
Oto, co chcesz.
>> Typ serwera, treść type-- mówi nam, dobrze, że jesteś
będzie trochę HTML tekstu.
Oto długość to i tu jest co należy zrobić z połączeniem.
OK, więc ponownie, w zależności w których przebywa danych
prosząc o, w zależności od Serwer chce wrócić do Ciebie,
możesz mieć więcej tych dziedzinie nazwy, możesz mieć mniej.
Całkowicie zależne od kontekstu.
>> A jeśli chodzi o ten status kod tutaj, oczywiście,
200 nie jest jedynym można mieć, prawda?
Mamy wiele kodów stanu.
Czy ktoś pamięta żadnego z inni, że wspomniane w wykładzie?
Wiele z nich zaczynają się cztery.
>> Grupa docelowa: 404.
>> ALLISON Buchholtz-AU: 404, co jest?
>> Publiczność: Nie znaleziono pliku?
>> ALLISON Buchholtz-AU: Nie znaleziono pliku.
Dokładnie.
Więc co z 403?
Publiczność: Forbidden.
ALLISON Buchholtz-AU: Forbidden.
Więc co o tym myślisz co oznacza, że ​​z chmods?
>> Publiczność: oznacza to, że Nie masz uprawnień, aby ją przeczytać.
>> ALLISON Buchholtz-AU: Dokładnie.
W jakiś sposób, nie trzeba Uprawnienie do niego dostęp, prawda?
Tak, 404, 403.
Jest naprawdę zabawny jedno, że zawsze
co roku, że wprowadzi Powinienem się umieścić tutaj,
jak 413, które jest mi czajniczek.
Możesz google to.
To zabawne, jak, to jest kod 413 i to jestem czajniczek.
Który nie wiem dlaczego byś kiedykolwiek trzeba, że ​​w internecie,
ale błądzić.
Publiczność: Może jesteś Dzbanek do herbaty.
ALLISON Buchholtz-AU: Może Serwer jest Dzbanek do herbaty.
Kto wie?
W porządku, więc jesteśmy o do przejście do prawdziwego kodowania.
Czuję się jak chłopaki będą stąd dość szybko.
>> Publiczność: Dlaczego go powiedzieć "Serwer: dwa razy?
>> ALLISON Buchholtz-AU: Hm?
Serwer dwa razy?
To jest dobre pytanie.
Nie jestem pewien.
Dowiem się i Ja was wszystkich wiadomości e-mail.
>> OK, wszelkie inne kwestie poza tym?
Dobry?
Fajne.
>> HTML i CSS, a teraz dostać się do wszystkich zabawnych elementów.
Tak jak wspomniałem wcześniej, HTML Jest to prawdopodobnie jedna z rzeczy,
Ci faceci są najbardziej znane.
Więc mamy Hypertext Markup Language.
>> Najlepszym sposobem, aby dowiedzieć się, this-- ja nie mają żadnych przygotowanych slajdów i nic
do wy z HTML.
Tak naprawdę chodzi o naukę składni.
A jeśli jesteś w MySpace dzień, należy to mieć na dół.
>> Tak naprawdę, największą rzeczą jest po prostu ćwiczyć i eksperymentować.
Jedną z wielkich zasobów chciałbym bardzo polecam korzystania jest W3Schools.
Więc po prostu W, 3, a następnie Szkoły.
Mają dużo Środki na HTML, na CSS,
i rzeczywiście mają Podział ekranu typu rzeczy
gdzie oni dają przykład kodu.
Możesz bawić się z nim, zmienić, i naciśnij Update
i będzie to pokazuje, co to faktycznie robi na stronie internetowej.
>> Więc bardzo polecam za pomocą tego.
To całkiem fajne.
Nie dostaniesz SEG usterek tu, gdy coś pójdzie nie tak.
Jeśli uda Ci się dostać usterka seg z HTML,
daj mi znać, bo jestem będzie prawdziwy zaintrygowany.
Ale to jest naprawdę fajne, ponieważ można coś zmienić,
widać je na bieżąco na żywo.
I myślę, że dostaniesz dużo bardziej intuicyjne znajomość HTML
jeśli rzeczywiście po prostu spędzić trochę razem z nim eksperymentować.
To dlatego powiedziałem, praktyka i doświadczenie.
>> Google, stąd na z, prawdopodobnie będzie
jeden z najlepszych środków i przyjaciół.
Lub Bing-- Pracuję w firmie Microsoft, więc może powinienem powiedzieć Bing.
Ale prawie wszystko jest po prostu będzie składnia,
więc zrozumienie, co znaczniki są, understanding-- przynajmniej CSS--
jak zmienić pewne atrybuty.
To będzie bardzo przydatne.
>> Więc nawet jeśli nie robimy mają przygotowane rzeczy,
Mamy rodzaju niektórych najlepszych praktyk że chcemy wy spróbować przestrzegać
by-- czy raczej zalecana stosować się do odwołania.
Więc zamknąć wszystkie swoje znaczniki.
Mam nadzieję, że wszyscy has-- wiesz co, czy to nie ma sensu w tej chwili,
Obiecuję, że to ma sens gdy jesteśmy kodowania się stronę.
Ale zamknąć wszystkie swoje znaczniki.
Więc jeśli kiedykolwiek jakiś Nagłówek to wspornik,
H1, wspornik, upewnij się, że gdy skończysz z tym,
zamknąć ten nagłówek.
Weryfikacja Twojej strony z W3 Validator.
Jeśli nie zamkniesz tagów można uzyskać nieoczekiwane zachowanie.
Będzie to powiedzieć, że strona jest nieprawidłowa po uruchomieniu go przez ten walidator.
Więc kiedy w doubt-- a zwłaszcza w tym tygodniu, obok Tydzień
pset-- w taki sam sposób, w jaki zadawania do korzystania sprawdzić 50 i styl 50,
można myśleć o tym jako jednej z kontroli, OK?
>> Więc jeśli to nie przejdzie W3 Validator.
To jest coś, będziemy Cię na dok.
Albo mówię ci prawo teraz, będę Cię na dok.
Więc upewnij się, że potwierdza.
To nie jest trudne.
Wystarczy wkleić w kodzie i będzie to albo powiedzieć dobrą pracę
lub tracisz coś w taki sam sposób,
50 mówi, że cię styl dokąd się wybierasz, brudząc się.
>> I wtedy jedna rzecz to chcesz oddzielić
Twój znaczników, który jest wszystkim, HTML lub tekst, a stylistyka.
Więc zrobimy przykład z tego prawa po to.
Więc HTML i CSS powinny być oddzielone.
I będziemy mówić o MVC, który jest model View Controller,
w przyszłym tygodniu.
Wy prawdopodobnie powinien dowiedzieć się o tym w wykładzie
gdybyś miał jutro Nauczyłem się go już dzisiaj.
>> I to jest właśnie rodzaj paradygmat, że mamy tendencję
do wykorzystania przy tworzeniu stron internetowych stron do oddzielenia rzeczy.
Możesz myśleć o tym w ten sam sposób że mamy tendencję do oddzielnych funkcji w C
gdzie hash znaleźć rzeczy.
To jest po prostu sposobem na ułatwić Ci życie.
Oddziela się atrybuty lub kod chcesz używać w kółko,
lecz w ten sposób rodzaj z trzyma to ładne i zadbane.
A jeśli chcesz zmienić jedna rzecz, można go po zmianie
i to się zmieniło wszędzie.
Więc to jest bardziej dla Twojego łatwość i elastyczność.
>> Więc z CSS, to bardzo podobne do HTML, ale zamiast tagów
Wspomniałem, że teraz po prostu, że wykorzystać to, co się nazywa selektorów.
I w zasadzie tylko rodzajem z skojarzyć pewne tag
w HTML z różnych atrybutów.
I kiedy mówię atrybuty, to znaczy takie rzeczy jak kolor czcionki, styl czcionki,
kolor tła, kolor tekstu.
Te różne rzeczy.
Jak, czy to na środku, czy to na prawo,
czy to inverted-- wszystko z tych fajnych rzeczy.
Wszelkie sprawy stylistyczne , które możesz zrobić, aby Twój tekst,
jest to o co mi chodzi z atrybutami.
>> A następnie dwie główne rzeczy wiedzieć jest to, że selectors-- dwóch głównego factors--
są ID, który jest unikalny.
Że można używać tylko jednej rzeczy.
W przeciwnym razie to będzie krzyczeć na ciebie.
A kiedy go zdefiniować w pliku CSS, to będzie
być hash ID, a następnie jakie cechy chcemy.
Obiecuję, że będziemy przejść przez przykład.
Czeka nas dużo więcej sensu.
>> Klasa może odnosić się do wielu bloków.
Więc możesz mieć swój akapit pierwszy i trzeci
mają ten sam rodzaj atrybutów jeżeli powiązać je z tej samej klasy.
A kiedy je zdefiniować w CSS, mamy klasę kropka,
przy czym bez względu na klasę chcesz to nazwać.
>> Tak wiem, że to jest w porządku teraz bardzo abstrakcyjne.
Dlatego będziemy kodu.
Wiem, że faceci kochają że, i wszystkie są
będzie mi pomóc, ponieważ to jest Twoja strona internetowa.
To jest w naszym dziale jest strona internetowa, chłopaki.
Więc są jakieś pytania, zanim wyłącz PowerPoint, czy coś
chcesz mnie, aby przejść z powrotem Zanim zaczniemy do kodowania?
>> Publiczność: Kiedy mówisz tagi mecz, masz na myśli selektorów lub znaczniki?
ALLISON Buchholtz-AU: Możesz myśleć o nich jako o tej samej rzeczy.
To tylko różne słowa.
Chodzi mi o to, jak selektorów.
Ale selektorów map również znaczników.
Tak więc można myśleć o nich jako skutecznie samo.
Obiecuję, że to się dzieje, aby więcej sensu, gdy kod.
Wszystko z PowerPoint lub wszelkie pytania
teraz, zanim faktycznie Wygenerowano w naszej sekcji jest?
Wszyscy gotowi?
Fajne.
>> Więc mam jeden zaczął.
Pozwól mi zwiększyć czcionkę dla was.
OK, więc teraz, po prostu musimy szkielet strony internetowej tutaj.
>> Mamy niektóre HTML.
Mamy jakiś nagłówek, które zobacz przykład tutaj stronie internetowej.
Niektóre tytuł, niektóre czcionki.
Są to znaczniki, OK?
Więc kiedy mam na myśli zamykania tagów widzimy tu jest twoja głowa otwarcie wspornika
tag, a to wspornik / Zamykania go głowa, OK?
>> Więc można myśleć o tym, jak Twoje szelki w swoim, jeśli warunki
lub twój pętli.
Jeśli masz jedną na początku, chcesz jeden na końcu.
Nadal będzie działał w większości przypadków jeśli nie masz tagu zamknięty,
ale najlepszym rozwiązaniem jest zamknąć swoje znaczniki.
>> Więc w tym przypadku, niech to zmienić.
Mamy zamiar mieć sekcję siedem.
"§ Strona internetowa".
Więc jestem po prostu będzie to zmienić.
>> A jeśli idziemy tutaj, a my reload-- muszę zapisać i reload--
zauważamy, że się tutaj zmieniło, prawda?
Fajne.
Więc zmienia tytuł.
To wszystko co na karcie.
>> Jest to więc rodzaj patrząc nudne.
Nie wiem, o facetach.
Myślę, że my chcemy coś innego tutaj.
>> Więc co możemy zrobić, to Nagłówek jest właśnie tam.
Zróbmy jakieś ciało.
Tak więc mamy tu jakieś ciało.
I zawsze otwarte i zamknę znaczniki, aby rozpocząć,
w ten sam sposób, że robię szelki.
Ach.
Czekaj, co?
>> PUBLICZNOŚCI: [niesłyszalne].
ALLISON Buchholtz-AU: Ach.
Dostaliście mnie.
Dobra robota.
Gold Star.
>> OK, więc mamy tu jakieś ciało.
A teraz zacznijmy dodanie jakiś tekst.
Więc masz kilka różnych opcje dodawania tekstu.
Mamy takie rzeczy jak nagłówków.
Mamy tylko zwykły tekst.
Więc po prostu zaczynają się od nagłówka.
Właściwie, jeśli chcecie podciągnąć HTML W3 Szkoły,
można trochę rozejrzeć i czy jest coś
szczególnie, że chcesz wypróbować z tej strony, możemy to zrobić.
Więc w tym przypadku, po prostu zrobić kilka h1.
Więc h1 jest jak najwyższej nagłówku.
Da Ci coś że jest bardzo duże i pogrubione.
>> I w tym przypadku, co chcemy na pierwszy tekst na naszej stronie internetowej?
Cokolwiek.
Chłopaki idą do tworzenia tego.
Mam zamiar po prostu wpisać.
Publiczność: Witamy.
>> ALLISON Buchholtz-AU: Witamy.
OK, więc jeśli go zapisać i odświeżyć, mamy wielką duży powitanie.
Tak po prostu, więc można zobaczyć Różnice, zróbmy coś na H6.
Co chcemy tutaj?
Prawda?
>> OK, więc tylko tak można zobaczyć różnicę.
Tak, Sublime.
Więc jeśli zauważysz, h1, bardzo, bardzo duże.
h6, jak śmiały, ale znacznie mniejsze, i masz wszystko pomiędzy.
Więc możesz mieć H2, H3, H4.
A to są tylko nagłówki, więc jeśli próbujesz
stworzenie strony internetowej, która ma różne sekcje,
może chcesz używać nagłówki w tam gdzieś.
>> Fajne.
Będziemy więc dodać trochę więcej rzeczy w naszym organizmie.
Widzę, że to będzie miły cool, gdybyśmy mieli obraz.
Czuję, że każdy może korzystać może ładny obraz królik rację teraz,
więc mamy zamiar znaleźć Pierwszy obraz królik.
>> Nie wiem, czy macie jakiekolwiek preferencje, na którym jeden chcemy.
Czy masz jakieś preferencje?
Ten tutaj?
W dół.
OK.
Że jeden jest.
Dobry wybór.
>> OK, więc mamy zamiar zobaczyć nasz wizerunek.
Spójrz na to.
Spójrz na to urocza rzecz.
Jak możesz być smutny w poniedziałek z tego?
>> Więc my po prostu się skopiować adres URL obrazu.
A to, co chcemy zrobić, to, po prostu że mamy trochę p dla ust.
Mamy zamiar powiedzieć "Spójrz spojrzenie na cute bunny.
d'awwww ".
Kocham moje króliczki.
Mam króliczka w domu.
Tęsknię za króliczka.
Więc co mamy zamiar do-- Nie wiem, czy chcecie
google this-- ale z HTML, jak można to zdjęcie?
Dosłownie, jeśli google "To obraz HTML"
dlaczego nie macie mi powiedzieć co to znacznik powinien być?
>> Publiczność: img source--
>> ALLISON Buchholtz-AU: img source--
Publiczność: --equals--
ALLISON Buchholtz-AU: --equals--
Publiczność: --quote-- tak.
ALLISON Buchholtz-AU: Idealny.
Piękny.
Zobacz, generacji MySpace, prawda?
WIDOWNI: Neopets.
ALLISON Buchholtz-AU: Neopets.
Och, OK.
Wow.
To było szalone.
OK.
>> Więc upewnij się, że mam takie prawo.
Fajne.
Tak to powinno być tutaj.
A potem, jeśli przeładować, mamy królik na stronie Czy to nie urocze?
>> To takie słodkie.
Wybrano świetny, świetne zdjęcie.
Jestem kopać go.
>> OK, więc mamy tego uroczego króliczka teraz.
Byliśmy w stanie dodać obraz, tak po prostu.
Więc w zasadzie, jeśli jest jakiś obraz chcesz dodać do swojej strony internetowej,
możesz dodać ją właśnie w ten sposób.
Inną rzeczą byłoby, gdyby zapisaniu obrazu
w tym samym folderze, ten plik, możesz po prostu
pisać bez względu na nazwę tego obrazu Jest zamiast łącza internetowego.
>> To wciąż być w cudzysłowie.
Byłoby to po prostu być jak gdybyśmy nazwie this--
jeśli obraz został zapisany w folderze z tego pliku HTML
że mam go i edycji nazwano bunny.jpg.
Możemy również zrobić i to pokazać.
Jednak nie mam to zapisane w plików i chcę zachować króliczka,
więc mamy zamiar utrzymać związek.
>> Publiczność: Co to jest rabbit.org?
>> ALLISON Buchholtz-AU: rabbit.org.
To appropriate-- patrzeć, można go przyjąć.
Przyjęcie.
bunny.jpg.
Chcę przyjąć tę króliczka.
Och, Boże, to takie słodkie.
>> OK, więc dodaliśmy nagłówki.
Dodaliśmy zdjęcia.
Oczywiście, dodaliśmy jakiś tekst tutaj, prawda?
Jeśli chcemy dodać inne Teksty, że idziemy tak.
Więc to jest kolejny akapit.
>> I powiedzieć "to jest kolejny akapit."
Również jestem straszne ortografii, więc może ja błędnie rzeczy.
Wystarczy FYI.
>> Mamy więc kolejny pkt tutaj, prawda?
Więc może chcesz coś zrobić trochę bardziej interesujące niż tylko
ma wszystko, podobnie jak tekst wyrównany do prawej.
Może chcesz wyśrodkować tekst, OK?
>> Więc jeśli ktoś chce korzystać z tych poręczne komputery przed tobą
i powiedz mi, jak jesteś będzie centrum tego tekstu,
>> Publiczność: p align.
>> ALLISON Buchholtz-AU: Tak p align równa się "centrum".
Zabija go, chłopaki.
Wszyscy, muszą zwiększyć.
I mamy "To jest centrum."
A teraz mamy coś na środku.
>> W taki sam sposób, jeśli ma to wyrównane do lewej,
można zrobić sobie równych skoordynowanie lewa, align równa prawej.
Całkowicie do Ciebie.
Jeśli zrobiłem tutaj, to powinny: teraz jest wyrównany do prawej.
>> Publiczność: Allison?
Przez źródła obrazu, dlatego nie jest nie w pobliżu źródła img?
ALLISON Buchholtz-AU: Niestety.
Ten powinien być nie teraz, że jesteś dobry.
Teraz jesteśmy dobrzy.
Publiczność: Nie masz aby go zamknąć tam, czy nie?
ALLISON Buchholtz-AU: No, tak img źródło, ten jest just-- z obrazu,
to jest po prostu postrzegane jako jeden element, podczas gdy jeśli zauważysz na resztę tych,
mamy pewne informacje, które następnie tag to dotyczy, a następnie znak zamknięcia.
Ale z obrazu, wszystko tak jakby samowystarczalny.
Fajne.
Więc chłopaki wiedzą, jak stworzyć Nagłówek, wiesz, jak wprowadzać tekst,
wiesz jak umieścić obraz teraz, można wyrównać rzeczy.
>> Inną rzeczą, która cię może chcesz być w stanie zrobić
jest utworzenie listy w CS-- jesteśmy rodzaj wchodząc w przyszłym tygodniu Pset.
Rzeczy, które zazwyczaj uczą w tym tygodniu
idzie bardzo dobrze z przyszłym tygodniu pset, więc jesteśmy
rodzaj mieszania, nakładania rzeczy tutaj.
Ale to będzie przydatne do przyszłego tygodnia.
>> Więc jeśli chcemy stworzyć jakiś lista, w jaki sposób możemy to zrobić?
Nie można odpowiedzieć na to czasu.
Ktoś inny musi.
To nie jest trudne, chłopaki, obiecuję.
Google "nieuporządkowana lista HTML."
Co to było?
>> PUBLICZNOŚCI: [niesłyszalne].
ALLISON Buchholtz-AU: Prawo.
Więc chcemy zamówić lub nieuporządkowane?
Zróbmy nieuporządkowana.
Więc mamy trochę ul, który oznacza nieuporządkowane listy.
A co mamy dla każdego elementu?
Czy potrzebuje własnego tag?
Możemy po prostu zacząć pisać rzeczy?
>> Publiczność: li.
>> ALLISON Buchholtz-AU: li.
Więc jaka jest nasza lista będzie?
Co chcemy tutaj?
My po prostu nie nazwy.
Wystarczy zrobić Jakuba.
>> Publiczność: Królik żywności.
>> ALLISON Buchholtz-AU: Królik żywności.
OK, lubię to.
Królik żywności.
>> OK, więc mamy marchewki.
Lubię ten królik temat.
Jestem kopanie to dużo.
PUBLICZNOŚCI: Właściwie, myślałem że Jakub będzie legit.
ALLISON Buchholtz-AU: Jakub?
Jakub jest jedzenie królik.
Jeśli obejrzałeś Jakuba zdjęcie z godzin pracy,
może pomyślał dostał zaatakowany przez królika mordercy.
>> Publiczność: Mam królika teraz.
Mam królika zabójca teraz.
>> ALLISON Buchholtz-AU: Żartujesz sobie ze mnie?
>> Publiczność: Ja to następna część przyniesie.
Mam go.
>> ALLISON Buchholtz-AU: To jest śmieszne.
W każdym razie.
>> PUBLICZNOŚCI: [niesłyszalne]
>> Publiczność: Tak, mój Proctor ma królika, jak również.
>> ALLISON Buchholtz-AU: Chcę królika.
OK, kto przynosi do prawdziwego królika Następny rozdział, suma punktów brownie.
PUBLICZNOŚCI: [niesłyszalne]
Publiczność: Och, to nie jest prawdziwe.
To nadziewane królik.
>> ALLISON Buchholtz-AU: O Tak, możemy zamknąć tych.
Wygląda rad.
Publiczność: Czy to rzeczywiście ma znaczenie?
ALLISON Buchholtz-AU: nie.
Z większości z tych rzeczy, nie zamknąć znacznik,
99% czasu nic złego się dzieje się stało, ale to dobry styl, też.
Więc Jakuba.
I mamy sałatę.
Odbiorcy: Dla linków, to jest naprawdę ważne.
ALLISON Buchholtz-AU: Hm?
Odbiorcy: Dla hiperłączy.
ALLISON Buchholtz-AU: Dla hiperłączy.
Tak, hiperłącza potrzebne.
OK, więc zobaczymy tutaj.
I mamy blisko naszego wykazu.
I patrzymy na to.
Mamy all-- Jakuba, właśnie tam.
Królik żywności.
Przypomina mi Bunnicula.
>> PUBLICZNOŚCI: [niesłyszalne]
ALLISON Buchholtz-AU: Jestem przywracanie wszystko dzisiaj stare referencje szkolne,
nie?
Zaledwie wszystkie stare referencje szkolnych.
Przyniosły jak powinno Gogurts lub coś na przekąski.
>> Publiczność: Albo Gushers.
ALLISON Buchholtz-AU: Och.
OK.
Zobaczę, czy mogę śledzić w dół Gushers na przyszły tydzień.
Myślę, że mogę to zrobić.
Myślę, że mamy niektóre w biurze.
>> OK, więc omówiliśmy wiele inny rzeczy, które możesz zrobić z HTML, prawda?
I jak można prawdopodobnie zobaczyć, że to nothing-- miejmy nadzieję, że nie za intim--
jeśli tak jest, nie mam na myśli umniejszać nikogo.
Jeśli masz problemy, Proszę się ze mną rozmawiać.
>> Ale większość z nich jest po prostu patrząc na składni, prawda?
Jeśli chcesz listę nieuporządkowaną, jeśli chcesz jakieś listy,
jeśli chcesz wyrównać coś lub Format coś, to wszystko o tym,
rodzaj patrząc w górę Składnia HTML, prawda?
I jedna rzecz, która jest rzeczywiście całkiem fajny
to jeśli się to-- zobaczmy, co jest miłe stronie internetowej, że lubimy?
Ktoś ma jakieś ulubione strony internetowe że są OK, aby otworzyć w trybie online?
Wiesz co, po prostu zrobić CS50.
To miłe i bezpieczne, prawda?
>> OK, więc CS50 tutaj.
Och, spójrz, tam sekcja teraz.
Jeśli podoba Ci się sposób, w jaki wygląda.
>> PUBLICZNOŚCI: [niesłyszalne].
ALLISON Buchholtz-AU: Nie jesteśmy zrobić sekcję meta, chłopaki.
To się nie dzieje.
Byłoby fajnie, ale nie będziemy tego robić.
>> Więc co zrobić, mógłbyś Jeśli nie podoba ci się sposób
to działa to można zawsze rację kliknij na dowolnej stronie internetowej, że chcesz
i można zrobić Pokaż źródło strony.
Przyniesie całą HTML.
I to jest rzeczywiście bardzo dobry sposób projektować własną stronę internetową.
Przejdź do strony internetowej, która Cię bardzo lubię i spojrzeć na HTML
i dowiedzieć się, jak oni to zrobili.
>> I dosłownie, tak długo, jak cytować rzeczy,
tak długo, jak nie jesteś po prostu okradanie ludzi, to jest OK.
Specjalnie dla CS50 [? finansowania?], jesteśmy
rodzaj spodziewa Ci uzyskać inspirację z innej strony.
Dlatego zachęcamy.
Przeglądać strony internetowe, które myślisz, że są naprawdę ładne
i dowiedzieć się, jak korzystać z HTML i CSS, aby robić te rzeczy.
>> Więc, jak widać tutaj, jest oczywiście jak linki i mamy tu klasę.
Mamy link tutaj.
Mamy listę.
Prawdopodobnie mają niektóre zdjęć w gdzieś.
>> Mamy tu jakiś fajny styl.
To jest następna rzecz mamy zamiar zrobić.
Więc styl, gdy widzisz te Uchwyty stylu, to CSS zasadzie.
Ben, nie masz pytanie?
>> Publiczność: Co to jest div?
>> ALLISON Buchholtz-AU: div tylko A-- co jest div?
PUBLICZNOŚCI: Division.
ALLISON Buchholtz-AU: Division.
Tak, to jak oddzielania różnych elementów.
OK, więc tutaj jest to, co jesteśmy pójdzie do następnego.
Więc może to nie być najlepszym styl, ponieważ, jeśli zauważysz
mamy HTML i styl w tej samej stronie, i naprawdę chcesz, aby oddzielić tych,
OK?
I rzeczywiście, niech mnie otworzyć swój właściwy
bo to ma być PDF, więc mamy style.css.
>> Więc co możemy zrobić, to tu jest są fajne rzeczy jak jakiś znikną
i mogliśmy spróbować to zrobić, ale czuję jak bym bałagan, że się w locie,
więc zachęcam was do go spróbować na własną rękę,
ale ja nie zamierzam tego robić teraz.
Jeśli więc wy, należy pamiętać, jeśli kiedykolwiek uderzył zestaw problemów,
podlatuje na coś z boku.
Ma do czynienia z wyciszeniem i Przejście i etażerka.
>> Grupa docelowa: I to wszystko, CSS i HTML?
>> ALLISON Buchholtz-AU: Wszystkie CSS i HTML.
Tak.
Więc można zrobić naprawdę dużo fajne rzeczy z CSS i HTML.
Więc z naszej niesamowite króliczek strona tutaj, my
zamiar zrobić trochę trochę CSS stylizacji z nim.
>> Więc jeśli kiedykolwiek ma styl Arkusz, który mamy tutaj,
można po prostu zadzwonić style.css.
Można nazwać to, co chcesz.
Co ważne jest to, że mamy zamiar odwołać go w naszym web.html tutaj.
>> Więc to, co mamy zamiar zrobić, to we-- więc nie bałagan to up--
mamy zamiar połączyć te dwa pliki razem.
Tak więc w tym samym way-- idę wyciągnąć analogię do C tutaj.
W taki sam sposób, jeśli niektóre library-- i mamy cs50.h--
nasz kompilator łączy go.
To jest po prostu jawne Link z naszej strony.
Tak więc w taki sam sposób, to zrobić hash to jakiś plik, co
Mam zamiar napisać jest po prostu HTML / CSS odpowiednik tego.
>> Jesteśmy po prostu mówiąc: OK, to stronę internetową zamierza wykorzystać arkusz stylów, OK?
Więc mamy link rel równy arkusza stylów.
A potem mamy typ, css.
A potem href równa.
>> OK.
Więc to wszystko nie jest można tutaj myśleć o tym, jak to samo
jako hash to.
Oczywiście wygląda to trochę więcej skomplikowany, ale we wszystkich przypadkach
to skutecznie samo.
Więc to tylko niektóre powiązanie arkusz stylów, to typu text / css,
i to jest nazwa style.css.
>> Co jest ważne, aby wiedzieć, jest to, że na stronie internetowej
że pracuję w prawo now-- web.html i style.css-- są w tym samym folderze.
Ponieważ w różnych folderach, trzeba dać rzeczywiste korzenie
na to czy ścieżka do niego.
Ale w tym przypadku mamy do utrzymania go super proste i będzie tutaj.
Więc jeśli to zrobimy, mam pewne rzeczy już w kolejce tutaj.
>> Więc mamy trochę ciała, które się dzieje aby nasz kolor tła, które
teraz jest niebieski.
Możemy go zmienić, jeśli chcemy, ale jeśli dobrze pamiętam to poprawnie,
Należy po prostu zmienić na jasnoniebieski.
A teraz mamy światło niebieskie tło.
I mieliśmy here-- ktoś pamięta który z nich jest ID krzyżyka lub klasy?
>> Publiczność: ID.
>> ALLISON Buchholtz-AU: ID.
Fajne.
Więc to, co chcemy zrobić to, które z tych czcionek
lub which-- chcemy "Spójrz na Cute bunny "jest fioletowy?
Myślę, że chcą, że się fioletowy.
Jestem w dół, że jest fioletowy.
>> Więc co można zrobić, to zrobić ID equals-- w tym przypadku
Powiedziałem, co, ładny kolor tutaj.
Mamy przeładować.
Nagle, to fioletowy.
OK, więc z ID, należy pamiętać, musi być unikatowa
więc nie powinno być za pomocą identyfikator ten nigdzie indziej.
Ale z klasą, jak mamy tutaj z ładną czcionką,
Powinienem być w stanie używać że gdziekolwiek chcę.
>> Więc zróbmy to jeden tutaj.
Można więc powiedzieć, klasa równa ładną czcionkę.
A jeśli przyjrzymy się teraz, mamy fajny dość czcionki tutaj.
Więc może chcę zrobić jedno i drugie.
OK, tak naprawdę nie wiem, czy jest to będzie działać, ale chcę spróbować.
I to jest, jak się uczyć CSS i HTML.
Jesteś jak, wiesz, co, chcę spróbować.
Nie jestem pewien, czy to będzie działać.
Zobaczymy, czy to działa.
>> I spojrzeć na to.
Teraz jest w fioletowy i to całkiem czcionki.
OK, więc masz wszystko różne rzeczy można zrobić.
Czy masz pytanie?
>> Publiczność: Tak.
Cóż, tak jak kolory używasz są słowa.
Czy istnieje sposób na kolory z szesnastkowym RGB?
ALLISON Buchholtz-AU: Można również zrobić z szesnastkowe wierzę.
Tak.
Ale to miłe, jeśli Ciebie nie chce szukać ich.
Możesz po prostu być jak, fioletowy lub niebieski.
Publiczność: Miejmy nadzieję, że wiesz co to znaczy.
ALLISON Buchholtz-AU: Prawo.
Więc zróbmy to czytać lub Chartreuse.
Dlaczego to zawsze wybrać Chartreuse?
To ciekawy kolor.
>> OK, więc oczywiście my widzimy może zmienić ten stan rzeczy jednak chcemy.
Jeśli chciałeś create-- powiedzmy chcieliśmy stworzyć kolejną klasę.
Co może chcecie zmienić?
Jeśli W3Schools "Pull Up Dokumentacja CSS
Zostawiam głosu was.
Możemy spróbować i zrobić coś fajnego z to w ciągu ostatnich kilku minut.
Ponieważ mam trochę wam Crash Course na wiele fajnych rzeczy
że można to zrobić.
Ale w końcu, jak powiedziałem, jeśli Ciebie tylko eksperyment, dowiesz się dużo.
>> Publiczność: Czy patrzeć tej czcionki?
>> ALLISON Buchholtz-AU: Tak, Spojrzałem tej czcionki.
Tak jak dosłownie, ja poszedł to-- co ja zrobiłem?
Zrobiłem listę czcionek CSS i potem zrobiłam stos czcionki,
i ja na to patrzeć, tutaj Fajne są wszystkie czcionki, które możesz zrobić.
I to był ten jeden, tak Skopiowałem go do mojego schowka.
A potem było jak, OK, fajnie, nie idziemy.
Wszystko zrobione.
>> Publiczność: Tak to trzeba upewnić się, że wie, co to CSS czcionki.
>> ALLISON Buchholtz-AU: Tak.
>> Publiczność: Co to znaczy w końcu?
Kursywą?
>> ALLISON Buchholtz-AU: Cursive.
Tak.
>> Publiczność: Tło obrazu.
>> ALLISON Buchholtz-AU: Tło obrazu.
OK.
Więc chcesz mi powiedzieć, jak to zrobić.
Zostawiam to do Ciebie.
Jestem po prostu wpisując się tutaj.
Koło jest w twoich rękach.
>> Publiczność: OK
>> ALLISON Buchholtz-AU: OK.
Co ja robię?
>> Publiczność: Doing-- wiem co przychodzi po nawias klamrowy.
ALLISON Buchholtz-AU: OK.
Więc prawdopodobnie w organizmie, ja by zakładać, bo jesteśmy
robi z obrazem w tle.
>> Publiczność: Tak, zróbmy to.
>> ALLISON Buchholtz-AU: OK.
Publiczność: OK, więc w tle jelita grubego, a potem
Potrzebuję adres URL tego obrazu.
Może pseudo-kod, który teraz, być może.
>> ALLISON Buchholtz-AU: Co nie lubisz mnie to--
Publiczność: Myślę jak GIF.
ALLISON Buchholtz-AU: GIF?
To będzie ciekawe.
OK, co ja googlowania tutaj?
>> Publiczność: Nie, to jest Twój wybór.
>> ALLISON Buchholtz-AU: Dlaczego nie we-- czy to króliczek,
Czuję, że powinniśmy mieć ładne trawiaste trawnik czy coś.
>> Publiczność: Łąka.
Łąka.
>> ALLISON Buchholtz-AU: łąka?
OK.
Publiczność: A Rachel Maddow.
ALLISON Buchholtz-AU: Ten wygląda całkiem.
Och, to jest mały, choć.
Musimy obraz dobry rozmiar.
Zobaczmy.
Och, spójrz.
To dość łąka.
Wiesz co, mi się podoba.
Załóżmy, skopiuj ten jeden.
>> Publiczność: OK, więc myślę, że to Adres URL, otwarte nawiasy.
>> ALLISON Buchholtz-AU: OK, URL.
>> Publiczność: Wtedy adres.
>> ALLISON Buchholtz-AU: OK.
Jest to, że wszystko, czego potrzebujemy?
>> PUBLICZNOŚCI: Zamknij nawiasy średnik, i przestrzeń, tło myślnik
mocowanie stałe dwukropek i nawias klamrowy.
>> ALLISON Buchholtz-AU: OK.
Zobaczymy, czy to działa.
To będzie całkiem fajnie, jeśli to robi.
Jestem prawdziwym podekscytowany tutaj.
To nie działa.
Zastanawiam się, dlaczego.
Publiczność: Może URL musi być w notowaniach.
ALLISON Buchholtz-AU: Być może.
I tak dowiadujemy się, chłopaki.
>> Publiczność: Czy możemy mieć tło kolor i obraz tła?
>> Publiczność: Nie.
Jeden zastępuje drugiego.
>> ALLISON Buchholtz-AU: Nie wiem.
Zobaczmy.
Zróbmy to sprawdzić i zobaczyć.
>> PUBLICZNOŚCI: Oh, może, tak.
[Wstawienie GŁOSY]
>> ALLISON Buchholtz-AU: OK, to jest obviously-- I [niesłyszalne] tutaj.
Więc OK.
Publiczność: przywiązanie tło.
ALLISON Buchholtz-AU: Ach.
>> Publiczność: OK, nie wiem.
ALLISON Buchholtz-AU: To wygląda jak to powinno działać.
Czy jesteś pewien, że to dwukropek po URL?
>> Publiczność: Nie, nie jest to średnik.
ALLISON Buchholtz-AU: To średnik.
Publiczność: Czy mogę powiedzieć dwukropek?
ALLISON Buchholtz-AU: Powiedziałeś dwukropek.
Publiczność: O nie.
ALLISON Buchholtz-AU: Proszę bardzo.
PUBLICZNOŚCI: Oh, czekaj, teraz nie możemy przeczytać tekst.
ALLISON Buchholtz-AU: Teraz nie można przeczytać tekst,
ale mamy obraz tła.
MMHMM?
>> Publiczność: Czy HTML wspieranie dynamicznej zawartości?
Jak, można zmienić rozmiar, że obraz w zależności od rozmiaru okna,
lub jest to, że w CSS--
>> ALLISON Buchholtz-AU: Więc CSS ma to zrobić.
Więc jeśli jesteście zainteresowani w nauce zaawansowanych CSS,
Ja co-nauczanie seminarium na temat CSS na 7.
I obiecuję, że będzie o wiele bardziej w głębi
i wiele więcej fajne rzeczy w tym dziale.
A mój co-nauczyciel jest jak Łączna przód web master dev.
Więc to będzie całkiem fajne, jeśli chcesz aby dowiedzieć się o wszystkich fajnych rzeczy
że CSS może zrobić.
>> Ale co my tu mamy z jego przywiązanie tło
fixed-- więc niektóre stałe size-- ale rzeczywiście można dynamically--
Jeśli kiedykolwiek znajdziesz na stronach internetowych, jak większość dobrych stron internetowych zrobi,
podczas regulacji Wielkość przeglądarce
dostosowuje tło lub ile pokazuje lub sformatowanie rzeczy, prawda?
Więc to, co nazywamy pozycjonowanie względne.
>> I CSS może faktycznie złapać jak duże szerokość przeglądarki jest i jak wysoki jest,
i można umieścić rzeczy w zależności od względnych rozmiarów
w porównaniu do wielkości absolutnych.
I to jest oczywiście bardziej zaawansowana CSS, ale to jest coś, co możesz zrobić.
Jeśli chcesz dowiedzieć się więcej, przyjdź do mojego seminarium.
>> Tak, że jest coś, co możesz zrobić.
Może faktycznie i CSS do-- CSS i JavaScript,
którym zajmiemy się w przyszłym week-- może zezwolić, aby dynamicznie zmieniać
stron, bez konieczności załaduj je cały czas.
I masz zrobić kilka całkiem fajne rzeczy.
>> Więc jest tam jeszcze jedna rzecz że chłopaki mogą chcieć zrobić
lub cokolwiek chcesz zwiedzić?
Mamy 10 minut przed końcem.
Możemy również wyjść wcześniej, ale jeśli chcesz zrobić trochę więcej internetową rzeczy,
możemy, ale nie jestem zmusi cię do.
Ale można też po prostu jeść słodycze.
Publiczność: Zaznacz tekst biały, dzięki czemu można go odczytać.
ALLISON Buchholtz-AU: OK.
Więc w tym przypadku, chcemy trochę p.
Publiczność: powinniśmy zrobić to w Ciało więc odnosi się do całej strony?
ALLISON Buchholtz-AU: Tak, możemy rzeczywiście.
To dobry pomysł.
Więc have-- robimy wam wiedzieć, co powinniśmy?
Nie wiem, czy możemy zrobić kolor tekstu.
Chciałem spróbować stworzyć tutaj innej klasy.
>> Odbiorcy: Jak uzyskać tak że ma propozycje?
ALLISON Buchholtz-AU: Tak jeśli jesteście zainteresowani,
jest to kolejny tekst redaktor nazywa wzniosłe.
Powinieneś być w stanie zainstalować ją na swoim urządzeniu.
Czasami robi się trochę skomplikowane.
Jeśli chcesz pomóc, Jestem bardzo szczęśliwy, aby pomóc
z nim, bo jest wielki i gedit to niesamowite, ponieważ można go skompilować
od spodu, ale rzeczywiście jak Sublime, ponieważ jest to dość
i robi rzeczy jak autouzupełniania.
>> Więc na pewno można poczuć się swobodnie daj mi znać, jeśli chcesz to zrobić.
Jeśli po prostu google "Sublime tekst ", to zazwyczaj
ma instrukcje jak zainstalować od różnych systemów operacyjnych.
To jest naprawdę fajne, ja myślę, w mojej opinii.
Tak więc p.
Myślę, że mogę po prostu zrobić text-- lub możemy po prostu zrobić kolor "biały".
Nie.
>> Więc co zrobiłem, jest to, że ja nie zmienić cały tekst.
Ale p tutaj jest tylko tag, że mamy, prawda?
Ten znacznik ust.
Więc po prostu stworzony element CSS, który powiedział: OK, nic z tego tagu
p, aby kolor biały.
>> Więc jeśli zauważył, to zrobiło to białe i to białe.
To nie miało biały, ponieważ nasza lista nie jest to związane z tym.
Można przejść i można say--
>> Publiczność: Czy kolor tła.
>> ALLISON Buchholtz-AU: kolor tła?
>> Publiczność: Tło rury w Kolor, gdzie można umieścić znacznik p.
>> ALLISON Buchholtz-AU: OK.
Chcesz to białe?
Publiczność: MMHMM.
ALLISON Buchholtz-AU: OK.
Proszę bardzo.
Publiczność: To dziwne.
ALLISON Buchholtz-AU: Całkiem fajne, prawda?
Więc jeśli po prostu poeksperymentować, masz zamiar dowiedzieć się wiele.
I to może być całkiem fajne.
Myślę, że to na pewno więcej satysfakcjonujące niż czasem
bo nie trzeba czekać przez program do kompilacji.
Możesz po prostu naciśnij Odśwież i jesteś jak, o, popatrz,
pracował, lub o, jestem chyba czegoś brakuje.
I to jest coś, co jest naprawdę fajne o tej kolejnej części klasy,
Jest to na pewno, że myślę, łatwiej sprawdzić
jak przejść po drodze w porównaniu konieczności pisania programów te długie
i chcąc i modląc który działa na końcu.
>> Więc z tym, myślę, że wy wszystko wydaje dobre.
Jeśli masz jakieś pytania, jak zawsze, się mówić do mnie, przyszedł dać mi znać.
Będę tuż w ciągu kolejnych 15 minut
jeśli chcesz porozmawiać o cokolwiek i wszystko.
>> Więc mam nadzieję, że guys-- Powodzenia z tym Pset.
Termin jest piątek w południe ponieważ został wydany późno.
Więc będę prawdopodobnie widząc Wielu z was w czwartek,
ale mam nadzieję, że nie.
Być może będziesz musiał to zrobić wtedy.
Byłbym bardzo dumny.
>> Ale jeśli nie, będę cię widzieć w czwartek.
Możesz również skorzystać z późnego terminu, który rozciąga się do soboty w południe.
Ale don't-- co?
>> Publiczność: Halloween.
>> ALLISON Buchholtz-AU: To Halloween, A i B,
Nie sądzę, że nie będzie być biurowe godzin na piątek.
Więc naprawdę spróbować i zrobić to przez Piątek, tak, że wszyscy możemy świętować
Hallow weekendu.
Dobra, ja zobaczę was w przyszłym tygodniu.