[Musik zu spielen] ALLISON BUCHHOLTZ-AU: Alles klar, jeder. Willkommen zurück in Abschnitt. Also unsere Agenda für heute los ist über viel mehr Web-Entwickler Zeug. Ich weiß nicht, wie viele von Sie psets gesehen haben seit es veröffentlicht wurde heute Morgen. Ich würde, wie viele Menschen haben die spec lesen, aber da, wie Sie alle hatten der, wie, 7 Stunden, es zu betrachten und es ist ein Montag und haben Sie wahrscheinlich hatte Klasse, Ich werde das übernehmen die meisten von euch nicht. Wenn Sie, extra dickes Lob. Du bist im Grunde helfen eine einfache Web-Umsetzung Server in C, die ein brandneues pset ist, so dass Sie Jungs, die Meerschweinchen sein. Es wird ein Spaß, wilde Woche aber ich denke, es wird eine Menge Spaß machen und es wird eine wirklich sein gute Erfahrung tatsächlich. Also, Sie für die Vorbereitung dass im Abschnitt heute wir werden chmod, TCP / IP zu gehen, und dann ein wenig von HTML und CSS. 

Am Ende werden wir tatsächlich Code eine einfache Web-Seite zusammen um Ihnen zu helfen Jungs Art bekommen mehr mit dem vertraut gemacht. Und dann, wenn Sie noch nicht abgeholt Ihre Quizzes, sind sie in der Front, aber ich bin mir ziemlich sicher, dass jeder hier hat ihre Quiz. Und auch in diesem Sinne, Lösungen sind noch nicht auf, aber sobald wir finish-- mögen, die letzten Menschen, die ihre quizzes-- sie werden bis sein. Wenn Sie irgendwelche Fragen haben, inzwischen, fühlen Sie sich frei, um mich persönlich zu mailen. Ich werde mit Ihrem individuellen antworten Fragen, wie ich es immer tue. 

Also in diesem Sinne, chmod. Also im Grunde alles, was Sie müssen über chmod wissen ist, dass es verwendet werden, um zu ändern Dateiberechtigungen, nicht wahr? So ist es nur einige Systeme nennen es eine Berechtigungen ändern, wie es hier heißt. Und wenn Sie schon immer einmal sehen Berechtigungen einer Datei hat, statt nur dabei ls Sie ls -l tun konnte. l steht für lang. 

So werden Sie lange Listen zu tun von allem, und werden Sie sehr viel detailliertere geben Informationen zu den einzelnen Dateien. Und du wirst sehen, ich bin something-- gehen, um für eine second-- voraus überspringen aber du wirst etwas ähnliches zu sehen dass obere Zeile gibt für jede Datei. Und wir werden durch das, was das bedeutet, zu gehen. 

Also im Grunde, sich ändern Ihre Dateiberechtigungen, Sie wollen einfach nur chmod verwenden. Sie können es wie jedes andere denken UNIX rufen wie ls oder cd oder Dingsbums. Es ist nur irgendwie ein anderes wie Call. 

Also wir tun chmod und dann werden wir dreistellig Regel. Es gibt ein paar Möglichkeiten zu tun es, von denen einer dann gehen wir vorbei. Aber in der Regel, werden Sie drei haben Zahlen von 0 bis 7 jeweils Zeit. 

So eine Sache ist, dass es drei verschiedene Berechtigungen dass wir jede Datei geben kann. Und es ist lesbar, was ist vertreten durch R, die Sinn machen wird in ein wenig; W, was ist beschreibbar; und ausführbar, die ist x. Ich weiß, dass die E ein, ausführbare, vielleicht nicht die am meisten Sinn, aber wir stellen sie mit x. 

Und was dann geschieht, ist jeder von diesen auch die Zahlendarstellung. So haben wir 1, 2 und 4. Und im Grunde, was passiert ist, Jede dieser drei Zahlen Dabei entspricht ein andere Gruppe von Benutzern dass diese Berechtigungen betreffen. 

So können Sie sich davon zunächst denken kann Nummer entspricht der tatsächlichen Benutzer oder der Eigentümer der Datei, der zweiten Zahl wird zu der Gruppe entsprechen, und die letzte bezieht zur Welt, OK? Also, was passiert ist, erinnern diejenigen numbers-- r 4, w 2, x 1 ist, richtig? This-- wenn Sie diese zusammenzufassen, das gibt Ihnen die erste Nummer dass wir vielleicht Eingang in unserem chmod. 

Also in diesem Fall, was würde diese Zahl sein? Es wäre 4 plus 2 plus 1, die eine 7 ist, oder? Und in diesem Fall, diese haben nichts, so dass diese direkt hier würde übersetzen chmod 700, OK? Und, was das tut, ist es allen Zuschüssen dieser Berechtigungen zu Ihrem Benutzer. 

Dies bedeutet also, unsere Nutzer können tun, was sie wollen. Sie können diese Datei lesen. Sie können diese Datei auszuführen. Sie können auf diese Datei schreiben. Aber Konzern weltweit, keine Berechtigungen immer, OK? 

Also eine weitere Möglichkeit, dass zu schreiben, können wir Sie chmod aus drei Ziffern, von denen jede entspricht auch immer die Summe oder die bestimmte Gruppe ist, bestimmte Teilmenge. Oder wir tatsächlich tun können, eine andere Sache. Warten Sie mal. Wir können etwas mit diesen hier zu tun. 

Wie viele von euch sah ein Beispiel wo es war, ein Plus x chmod? Hast du gesehen, dass in der Vorlesung, denke ich? So eine steht für alle. Es bedeutet, geben Sie es an alle Benutzer, die ich vergaß, hier setzen. 

Aber ein Plus x, wenn wir bemerken hier, wenn wir das tun um chmod-- welcher Gruppe wir sind reden sowie die Berechtigungen wollen wir ihnen geben. So kann dies ein Plus oder ein Minus sein. Plus fügt Erlaubnis. Minus wegnimmt Erlaubnis. Hübsche intuitive, denke ich. 

Also ein Plus x bedeutet chmod. So ändern Sie die Berechtigungen aller Menschen Wenn dies ein A-- Hinzufügen von Berechtigungen. Und x-- das bedeutet, was die Erlaubnis sind wir alle Gewährung. Lesen, Schreiben oder Ausführen? 

PUBLIKUM: Ausführen. 

ALLISON BUCHHOLTZ-AU: Ausführen. So geben wir allen Nutzern Berechtigung, diese Datei auszuführen, OK? So was, wenn wir wollten, dass mit der numerischen Form? Also denken Sie daran mit numerischen, wir wollen drei Zahlen. 

PUBLIKUM: 4. ALLISON BUCHHOLTZ-AU: Was war das? PUBLIKUM: 4. ALLISON BUCHHOLTZ-AU: Not 4. PUBLIKUM: 0, 0, 4. ALLISON BUCHHOLTZ-AU: Nun, wir wollen um es allen Benutzern zu geben, oder? Also wir gehen zu müssen eine Zahl in jedem Schlitz. Das wird das sein gleiche Anzahl in jedem Schlitz denn wir wollen einfach nur geben jeder Ausführungsberechtigungen. So ausführbare 1 ist, aber auf dem richtigen Weg. 

Also, wenn wir nicht chmod 111 Das wäre sein das Äquivalent von chmod einem Plus x. Ist das sinnvoll, um alle? Wir werden durchgehen ein paar Beispiele. 

Also die große Mitnehmen Hier ist eine nicht hier, sondern eine gerechte Mittel gebe es für alle Benutzer. u ist, wenn Sie nur wollen, zu geben oder wegnehmen eine ausdrückliche Erlaubnis der Benutzer oder der Eigentümer. g ist für die Gruppe, so dass mittlere Ziffer. Und dann andere, die Sie sich vorstellen können wie die Welt, dieser letzten Stelle. 

Also mit diesem werden wir auf ein Beispiel zu gehen, weil ich das Gefühl, dass Beispiele immer machen diese Dinge leichter zu verstehen. So rwx-- wir durch this-- ging könnte auch darstellen als 700 sein. Das ist das Beispiel, das wir sahen bei mehr vom Bild. Also chmod 444 auf einige Datei würde, welche Berechtigungen geben? Sie waren wirklich nah. PUBLIKUM: Lesbar für alle. ALLISON BUCHHOLTZ-AU: lesbar. So lesbar für jedermann, nicht wahr? Und was dann noch einen anderen Weg, das zu tun? Wenn wir chmod mit machen wollen entweder r oder w ist, Plus und Minus, was wäre das Call aussehen? Es wäre chmod werden, was? 

PUBLIKUM: ein Plus r. 

ALLISON BUCHHOLTZ-AU: ein Plus r auf dem 5. OK, so ist die gleiche wie diese, nur zwei verschiedene Übersetzungen von der gleichen Sache. Also mit diesem, haben wir diese. Deshalb möchte ich euch, um zu versuchen und schreiben diese Art von in ihren entgegengesetzten Weg. 

Also mit chmod 555, was würde es sein? Wäre es ein Plus oder u plus oder Dingsbums sein? Für u Plus X, gib mir die drei Zahlen. Und dann sagen Sie mir, was Berechtigungen wir tatsächlich die Gewährung und zu wem? 

Also werde ich euch beiden geben Minuten, daran zu arbeiten. Fühlen Sie sich frei, um miteinander zu reden. Für diejenigen von euch, die in einem kleinen kam spät, gibt es Süßigkeiten und Shirts. Wir haben drei Hemden links und Wir haben Kit Kats und Starbursts. So fühlen sich frei, um grab kommen einige in diesem kleinen Zwischenspiel. 

Auch ist der letzte knifflig. Es ist zwei chmods für die letzte. Eigentlich möchte ich, dass die Tür zu schließen während ihr Jungs arbeiten daran. Candys immer notwendig an einem Montag Nachmittag. 

OK, also chmod 555. Was ist ein anderer Weg, wir könnten, dass zu schreiben? Irgendwelche Ideen? Ja. 

PUBLIKUM: ein Plus rx. 

ALLISON BUCHHOLTZ-AU: R plus RX. Möchten Sie erklären, warum es rx werden würde wollen? 

PUBLIKUM: Weil Sie 5, so dass ist 4 plus 1, so das ist zu lesen sowie ausführbare, und es ist für alle. ALLISON BUCHHOLTZ-AU: Richtig. Also einfach, hier zu wiederholen, 5 wir wissen, wie die Summe von 4 und 1 liegt, weil jede Zahl in unserem Trio ist die Summe der Berechtigungen für diese Teilmenge, richtig? Entweder der Benutzer, die Gruppe oder die Welt. Also in diesem Fall wissen wir, dass 5 ist durch 4 und 1 gebildet werden. 

Und 4 und 1 zu entsprechen, lesbar und ausführbar. Wir geben es alle, so dass wir tun können, chmod ein Plus rx. Und natürlich gingen wir einfach durch die Fragen gibt, so jetzt diese Datei ausführbar und lesbar für jedermann. 

Und was ist mit dem zweiten? Was könnte die Zahl für diese eine sein? Irgendwelche Ideen? Nur zu. 

PUBLIKUM: 100 [unverständlich]. 

ALLISON BUCHHOLTZ-AU: 100. Genau. Also wollen Sie erklären, warum 100? PUBLIKUM: Weil es für die Benutzer, so ist es in der ersten Position. Und dann x ausführbar ist 1. ALLISON BUCHHOLTZ-AU: Genau. So gewähren wir ausführbaren Berechtigungen nur den Benutzer. So dass in diesem Fall wäre es 100 sein. Und ich habe alle Antworten bis auf der nächsten Folie bei Sie schreiben viele Dinge nach unten. 

OK, so dass diese nächste tatsächlich getan wird mit zwei chmods, können Sie es tun könnte. Also hat jemand Irgendeine Idee, wie man vielleicht bekommen chmod 640 umgeschrieben in die andere Richtung? Sie können die Benutzer zum ersten Mal und dann verändern Sie ändern können, die Gruppe ist mein Hinweis. 

Also, wenn wir nur die Änderung wurden die Benutzer, die hier diese erste ist, was könnte unser Call sein? Also Benutzer ist u, richtig? Also chmod u zzgl was? Mmhmm? 

PUBLIKUM: rw. ALLISON BUCHHOLTZ-AU: rw. Rechts, für Lesen und Schreiben, weil Lese 4, w 2, diejenigen Summe zusammen als 6. Also chmod erhalten wir u plus RW, und wir bekommen unseren ersten 6 gibt. 

Also dann, die 4 zu bekommen, wollen wir nun zu unserer Gruppe Einstellungen zu ändern. Also wir werden chmod g zzgl was tun? Was ist ein 4? 

PUBLIKUM: r. ALLISON BUCHHOLTZ-AU: r. Genau. So geben wir den Besitzer Lese- und Schreibrechte und wir geben der Gruppe gelesen Berechtigungen, die wir alle hier oben. Mmhmm? 

PUBLIKUM: Wenn Sie etwas zu schreiben, bedeutet es können Sie es ausführen? 

ALLISON BUCHHOLTZ-AU: Sie wenden kann, um something-- Ich glaube nicht, dass es bedeutet, dass Sie sie ausführen kann. Cool. Also das ist alles, was wir gerade durchmachte. Usw. dieses nächste, ist es nur irgendwie häufigsten Fälle dass Sie in behalten möchten dagegen für Ihr Problem eingestellt. Dies sind in der Regel die Berechtigungen dass wir Sie zu nutzen. 

Also für 711, gibt, dass uns natürlich Benutzer alle Berechtigungen, die neigt dazu, Sinn zu machen. Und dann ist es ausführbar die Gruppe in der Welt, was Sinn macht wenn Sie etwas Verzeichnis haben, können Sie wollen in der Lage, in sie zu durchqueren sein. Die Menschen müssen Zugang. 

Für jede nicht-PHP-Datei, Sie gehen zu bedienen 644, was zu tun wäre, was? Was heißt das bedeuten, oder was Berechtigungen bedeutet das geben? So kann der Besitzer, was? PUBLIKUM: lesen und schreiben. ALLISON BUCHHOLTZ-AU: lesen und schreiben. Und dann die Gruppe und andere können nur gelesen, nicht wahr? Und dann chmod 600 für alle PHP-Dateien, die Sie verwenden, Ihre Besitzer, hier können lesen und schreiben, um es aber jeder andere ist nur irgendwie abgesperrt. 

So wird dies tatsächlich nützlicher sein, wenn Sie zu Ihrem Problem zu erhalten eingestellt nächste Woche, wo Sie tatsächlich den Aufbau einer Website. Also, wenn Sie jemals den Weg laufen seltsame Symptome wo es nicht laden richtig, vielleicht haben Sie benötigen, um eine ausführbare hinzufügen Erlaubnis oder vielleicht haben Sie eine Lese brauchen oder Schreibrechte. Kleine Dinge, die Menschen stolpern neigen up, aber das ist ein bisschen wie der Go-to wenn Sie nächste Woche pset starten. Und ich würde Ihnen mehr Hinweise zu dieser Woche pset, aber ich habe noch auf sie, da schauen es heute Morgen veröffentlicht wurde. Aber du hast mir eine E-Mail, ich werde ausgesehen haben bei ihm von der Zeit, die ich reagieren morgen. 

So, jetzt ist jeder gut mit chmod? Alle offenen Fragen? Ziemlich einfach. Nur irgendwie zu verfolgen, was lesen, schreiben und ausführen Zahlen ist wahrscheinlich der schwierigste Teil. 

So mit TCP / IP, all diesen Protokollen eine Art, wie mit Ihren Datenstrukturen letzte Woche, es ist viel mehr wichtig, eine Art, an eine höhere Intuition von ihnen. Dies ist nicht CS143, wohin wir gehen Sie bitten um ein Netzwerk zu implementieren, so dass Sie in Ordnung, wenn sein Sie verstehen nicht, die Nitty Gritty aller Protokolle. Was ist wichtig zu verstehen, ist eine Art, wie, was sie darstellen und warum sie wichtig sind. 

So TCP / IP, natürlich ist es das Transmission Control Protocol oder Internet-Protokoll, das ist im Grunde nur eine Reihe von Gesetzen im Grunde oder Standards, die sagen, Daten wie es behandelt werden soll, wie es paketiert werden soll, übertragen und empfangen. So ist es im Prinzip, wie es Hier steht, erhöht die Chancen dass die Daten bekommt, wohin Sie wollen, dass es zu bekommen. 

Ich bin sicher, wenn ihr Jungs ging an Vortrag oder sah es online, er has-- Ich weiß nicht, wenn er es in diesem Jahr, aber ich weiß, im letzten Jahr hatte er eine Demo, wo er ein Bild von Rob hatte und er spaltete es sich in vier und steckte es in Umschläge und versuchte, sie in Sanders bekommen. Und Sie können Art denken Sie an es auf diese Weise. Es ist nur ein Satz von Regeln, Daten sagen, wie man irgendwo bekommen und lässt Sie wissen, wenn Sie vermissen Daten, in der gleichen Weise, dass, wenn Sie Einnahme mehrerer Seiten Notizen und du hast sie mit Seite 104, Seite beschriften 204 und gehen Sie zurück, um später zu studieren und Sie something-- fehlen Sie Seite nicht finden können, 304-- Sie wissen etwas nicht stimmt, so dass Sie durch Ihre Notizen schauen erneut oder bitten Sie jemanden, Ihnen zurücksenden Die Skripte von diesem Tag. Auf die gleiche Weise Daten über das Internet. Wenn ich verlange etwas von einem Server um sie zu senden braucht sie in mehrere Pakete, wahrscheinlich zu Nummer es in irgendeiner Weise lassen mich wissen, wie viele ich erhalten haben, sollten, und sagen Sie mir, oh, das ist eine der 10 oder ist dies einer der 10.000. So, wenn ich gehe, um wieder zusammensetzen alle Teile zusammen, Ich weiß, wenn etwas fehlt und ich kann dafür wieder an. Ist das sinnvoll? Nur ein Satz von Regeln. Auf seiner Basis, eine Reihe von Regeln, OK? 

So sprachen wir auch ein wenig über Ports. Das ist wirklich nur ein Standard, lässt Sie wissen, welche Art von Daten wird in diesen Paketen übertragen wird. Wenn wir gehen mit unseren Umschlag Beispiel, wissen wir nicht wissen, dass es ein Bild von Rob drin, wenn wir es zu schreiben auf der Außenseite der Umhüllung. So Anschlüsse sind im Grunde die gleiche. Es ist nur ein Weg, um herauszufinden, was Art von Daten übertragen wird. 

So haben wir alle die gebräuchlichsten hier. So 21-- diese sind auch Art der wie gute Dinge zu wissen. Es ist irgendwie eine einfache Quizfrage. Seien Sie wie, was Port 80 zu tun? Oder was sagt Port 443 zu tun? So gut, Dinge zu wissen. 

Also wir hier haben, ist 21-Datei Übertragungsprotokoll, so dass nur die Regeln, die Dateiübertragung zu regieren. 25, etwas, das wir alle verwenden viel zu viel, ist E-Mail. 53 ist der Domain-Name System, das grundsätzlich nur irgendwie ein Lookup für die IP-Adresse eines Domain-Namens. 

Also ich bin mir ziemlich sicher, es war in der Vorlesung erwähnt, wenn Sie gehen, so etwas wie google.com, eine IP-Adresse hat das ist mit ihm verbunden. Es ist nicht wirklich google.com. Und so 53 ist der Port dass tatsächlich statt Pflege Art des Übersetzens es in dieser IP-Adresse für Sie. Und 80 und 443 sind sehr häufig. Sie müssen entweder Ihre Webseite oder haben Sie Ihre sichere Web-Seite, die eine Menge von Web-Seiten Übertragung über jetzt. 

Also das ist eine Art von hohem Niveau Überblick über Übertragungsprotokoll. Ich sehe nicht viel mehr in die Tiefe. Es ist irgendwie cool stuff Wenn Sie interessiert sind. Es gibt jede Menge Ressourcen. Wikipedia ist eigentlich eine ziemlich gute Seite. So war ich es bei der Suche vor nur eine kleine Weile, also ich würde empfehlen es bei der Suche, wenn Sie interessiert sind oder nehmen Sie 143 in zwei Jahren, weil Ich denke, es ist jedes zweite Jahr. 

So an dem Ende dieser, sind wir reden über Web-Seiten und HTTP, das ist eigentlich unser nächstes Thema heute, bevor wir in HTML und CSS gehen und man kann tatsächlich Code auf einer Webseite. Es wird Spaß machen. Wir werden Bilder haben Hasen und es wird groß sein. 

So HTTP, wie Sie hier sehen können, ist eine der reiz Akronyme für diese Woche, das ist Hypertext Transfer Protocol. Also noch einmal, es ist nur ein anderer Satz von Regeln, regelt Hypertext übertragen, in diesem Fall. Also beste Art zu lernen etwa ist dies nur irgendwie um es nach unten in die Pause diese einzelnen Wörter denn es gibt eine Menge von Wörter auf dem Bildschirm gibt. 

Also werden wir mit Hypertext starten. So "hyper", die Sie sich vorstellen können "Oben", wie super-Typ Sache. So ist es wirklich nur um das aufgenommene Kurzzeichen nächste Ebene, so dass es wie super Text, wie der nächste Text. So ist es im Grunde nur Text, der uns mehr Informationen als normaler Text tut, OK? 

So dass in diesem Fall ist, ist diese Hypertext. Dies sagt uns, dass wir einige Link, die wir zu gehen, die cs50.net ist die ist jetzt cs50.harvard.edu. Diese Fotos sind ein wenig alt. Und es wird angezeigt wird, da es als ein Hyperlink, und dann eine wirklich coole Website. 

Es ist also Text, der ein wenig ist etwas wirklich coole Sachen drin. So können Sie die Dinge zu verknüpfen und Sie können Einfügen von Bildern und man kann die Dinge zu stylen. Und die bekannteste ist, dass Sie Jungs haben wahrscheinlich mit Hypertext ist Hypertext Markup Language, HTML, was natürlich alle im Web dass wir um uns herum sehen, gewährt mit einigen CSS-Style geworfen. 

Wenn aber jemand war wirklich groß mit MySpace, Ich bin sicher, Sie alle gebrauchten HTML die ganze Zeit zu erstellen diese perfekte Profile, nicht wahr? Ich fühle mich wie das könnte eine sein veraltete Referenz jetzt, aber was auch immer. Nur little-- euch sind nicht so viel jünger. Einige von euch sind älter als ich. MySpace noch ein Sache, als ich jung war. Ich bin nicht so alt. 

Anyways, HTML nur eine Form von Hypertext. So Hypertext ist nur Text mit zusätzlichen Features. So Übertragungsprotokoll ist wahrscheinlich desto mehr zweifelhaft, was zu erklären. Offensichtlich transfer-- nur die Übertragung von Daten. Also entweder zwischen dem Kunden, wie Ihre Web-Bruder und ein Server. Also im Grunde nur die wie das Internet funktioniert. 

Also das genaue Antrag der wie diese funktionieren, sind wir eigentlich los, um auf eine Blick Beispiel Anfrage und Antwort. Aber wie wir verlangen, Informationen von einem Server und wie der Server reagiert auf uns was das Übertragungsprotokoll regelt. Also die Anfrage und die Antwort haben auf diese spezifischen Satz von Regeln zu folgen. Es ist standardisiert, so dass egal wo man über das Internet buchen, es funktioniert immer gleich, OK? 

Wieder, Protokoll, eine Reihe von Regeln. Es ist nur eine normale Wechselwirkung in der gleichen Weise dass Professor Malan spricht über wenn jemand sich die Hand, Sie wissen, dass es allgemeine Höflichkeit zu erreichen Sie Ihr heraus und schütteln ihre Hand. Das ist ein Protokoll, nicht wahr? 

Also ich einige standardisierte Anfrage geben, was ich will, um Ihre Hand zu schütteln, und Ihnen einige standardisierte geben Antwort, die entweder kein Dank ist oder Sie versuchen und schütteln konnte meine Hand oder vielleicht haben Sie werde versuchen bist und Faust stoßen mich. Und wir haben nicht ein Protokoll für das. Es bricht. Aber wenn jeder folgt der elbe Protokoll natürlich es geht viel mehr nahtlos. Menschen lernen einander kennen. Jeder ist glücklich. 

So in der Welt des Web, jeder folgt dem gleichen rules-- etwas besser als Sozialstandards. Aber damit werden wir schauen ein Beispiel Anfrage hier. Also gibt es diese kleine Schlüssel hier unten dass sagt Ihnen, die verschiedenen Farben, was sie sollen bist bedeuten. 

So weiß ist wie Ihre Methode Anfrage und Protokoll version-- so Methode Wunsch Version. Und dann dieses Teil Feldname und der Wert dieses Feldes, die wir gehen in sehr, sehr kurz. So ist dies ein Beispiel Anfrage. Dies ist, wie ich herausragt, wollen, mich vorzustellen. 

Dies ist, was der Kunde oder was Sie Ihren Webbrowser schicken würde, um Ihren Server. Also das ist eine GET-Anforderung, so ist es Bitte um etwas vom Server. Und es ist selbstverständlich, HTTP und es ist die Version 1.1. 

Also der Rest dieses hier ist das, was wir nennen der Header, der extra Informationen das gibt uns eine bessere Vorstellung von was wir eigentlich fordern, oder Informationen, die wir geben wollen der Server, der einschlägig sein könnte. So gibt User-Agent etwas mehr Beschreibung on-- zum Beispiel hier, curl / 7.24.0 ist eigentlich los zu sagen, der Server, die wir mit Hilfe von Google Chrome als unsere Browser. Also, wenn Sie jemals hören über Menschen, die sprechen darum, eine App reagiert zu mehreren Browsern, das ist etwas, dass sie wenn Sie da verwenden würden weiß nicht, welche Browser die Anforderung kommt, können Sie die Daten nicht anpassen zu. So dass in diesem Fall Benutzer wird nur geben, diese Art der identifizierenden Informationen über welchen Browser Ihre Benutzer derzeit mit, OK? 

Also dann haben wir auch Gastgeber, das ist wohin wir eigentlich wollen, um zu gehen. In diesem Fall, um zu gehen wollen wir apple.com, kaufen ein paar coole neue iPads oder etwas, vielleicht niedlich Lichter in unserem Schlafzimmer. Und Namen Wert am Ende ist nur einen Füllstoff, nur eine allgemeine Sache für euch zu sehen. Es tut nicht wirklich entsprechen hier nichts. 

So können Sie so viel oder so machen können wenig, wie Sie in jedem Fall wollen. Die meiste Zeit, sind optional. Es kommt nur darauf an, was Sie aus dem Browser benötigen, von Ihrem Benutzer um richtig geben die Anforderung. Oder es ab, was Ihre Benutzer abhängig eigentlich will an den Server aufgeben. So haben Sie viele, viele können dieser Kopffeldnamen oder Sie könnte nur noch ein paar. Wie bei so vielen Dingen Ich habe in diesem Abschnitt genannten, es hängt wirklich von Kontext davon, wie Sie mit diesem sind. 

Tut so, das macht Sinn für alle? Dies ist nur ein Beispiel für eine Anforderung, Überschriften, was nicht alles. OK, also mit dem haben wir eine Reaktion. 

Auch hier haben wir unseren Status Code, Protokoll Version, und dann Feldname und Feld schätzen wie immer. Also unsere Protokollversion und unsere Statuscode 200. OK, was bedeutet, dass, ja, ging alles gut. Hier ist, was Sie wollen. 

Der Server-Typ, der Inhalt Typ-- es uns sagt, OK, du bist gehen, um einen Text HTML zu bekommen. Hier ist die Länge der es und hier ist was sollte man mit der Verbindung zu tun. OK, also wieder, je auf den Daten, die Sie sind verlangt, je nachdem, was der Server zu euch zurückkehren will, Sie können mehrere dieser Bereich haben Namen, haben Sie vielleicht weniger. Völlig kontextabhängig. 

Und soweit diese Status Code hier natürlich 200 ist nicht der einzige Sie könnte, nicht wahr? Wir haben viele Statuscodes. Erinnert sich noch jemand einen der andere, die wir in der Vorlesung erwähnt? Viele von ihnen beginnen mit 4. 

PUBLIKUM: 404. 

ALLISON BUCHHOLTZ-AU: 404, was ist? 

PUBLIKUM: Datei nicht gefunden? 

ALLISON BUCHHOLTZ-AU: Datei nicht gefunden. Genau. Also, was über 403? PUBLIKUM: Verbotene. ALLISON BUCHHOLTZ-AU: Verbotene. Also, was denkst du, das bedeutet, dass mit chmods? 

PUBLIKUM: Es bedeutet, dass Sie Ihnen fehlt die Berechtigung, es zu lesen. 

ALLISON BUCHHOLTZ-AU: Genau. In gewisser Weise müssen Sie nicht Erlaubnis für den Zugriff, nicht wahr? Also 404, 403. Es ist ein wirklich lustiges Eines, das wir immer jedes Jahr vorstellen, dass Ich sollte hier untergebracht haben, wie 413, das ist, ich bin eine Teekanne. Sie können diese Google. Es ist lustig, wie, das ist der Code 413 und es ist mir eine Teekanne. Welche, weiß ich nicht, warum Sie jemals brauchen, dass über das Internet, aber ich schweife ab. PUBLIKUM: Vielleicht sind Sie ein Teekanne. ALLISON BUCHHOLTZ-AU: Vielleicht der Server ist eine Teekanne. Wer weiß? Na gut, so dass wir im Begriff, sind Übergang in Echt Codierung. Ich fühle mich wie ihr Jungs zu gehen raus hier ziemlich schnell. 

PUBLIKUM: Warum funktioniert es sagen: "Server: zweimal? 

ALLISON BUCHHOLTZ-AU: Hm? Server zweimal? Das ist eine gute Frage. Ich bin nicht sicher. Ich werde herausfinden und Ich werde euch alle per E-Mail. 

OK, andere Fragen außer das? Gut? Cool. 

HTML und CSS, und jetzt sind wir bekommen, um den ganzen Spaß Teile. Also wie ich schon erwähnt, HTML ist wohl eines der Dinge ihr seid am besten vertraut. So haben wir Hypertext Markup Language. 

Der beste Weg zu lernen this-- ich nicht irgendwelche vorbereitet Dias oder nichts für euch mit HTML. Es geht wirklich um das Erlernen der Syntax. Und wenn Sie in der MySpace waren Tag, würden Sie dies nach unten. 

Also wirklich, ist das Größte, was nur um zu üben und experimentieren. Einer der großen Ressourcen würde ich empfehle mit ist W3Schools. Also nur W, 3, und dann Schulen. Sie haben eine Menge von Ressourcen auf HTML, CSS, und sie haben tatsächlich eine Split-Screen-Art der Sache wo sie sich Beispielcode geben. Sie können mit ihm hantieren, ändern, und drücken Sie aktualisieren, und es wird Ihnen zeigen, was es tatsächlich auf die Webseite. 

Also würde ich empfehlen, dass mit. Es ist ziemlich cool. Sie werden nicht seg Fehler bekommen hier, wenn etwas schief geht. Wenn es Ihnen gelingt, bekommen ein seg Fehler mit HTML, lass es mich wissen, denn ich bin wird wirklich fasziniert sein. Aber es ist wirklich cool, weil man kann die Dinge zu ändern, Sie sehen, sie live aktualisiert. Und ich glaube, du wirst eine viel bekommen mehr intuitives Verständnis von HTML wenn Sie tatsächlich verbringen Sie einfach einige Zeit experimentieren. Also das ist, warum ich sagte, Praxis und Experiment. 

Google, von hier an aus, wird wahrscheinlich einer Ihrer besten Ressourcen und Freunde. Oder Bing-- ich bei Microsoft arbeitet, so vielleicht sollte ich sagen, Bing. Aber so ziemlich alles ist gerade dabei, Syntax, so zu verstehen, was die Tags, zumindest CSS-- understanding-- wie man bestimmte Attribute zu ändern. Es wird super nützlich sein. 

Also auch wenn wir es nicht tun irgendwelche vorbereitete Dinge, wir haben Art von einigen Best Practices dass wir möchten euch zu versuchen und halten nach-- oder besser gesagt, sollten Sie befolgen bis auf weiteres. So schließen Sie alle Ihre Tags. Hoffentlich jeder has-- weißt du was, wenn dies nicht sinnvoll gerade jetzt, Ich verspreche, es wird sinnvoll wenn wir Codierung die Seite. Aber schließen Sie alle Ihre Tags. Also, wenn Sie jemals haben einige Header, der Bügel ist, H1, Konsole sicherstellen, dass wenn Sie damit fertig sind, Sie diesen Header zu schließen. Bestätigen Sie Ihre Seite mit W3 Validator. Wenn Sie nicht Ihre Tags zu schließen, Sie können ein unerwartetes Verhalten zu bekommen. Es werde sagen, dass Ihre Seite ist ungültig falls er bei dieser Prüfung laufen. Also, wenn in doubt-- und vor allem auf diese Woche und nächste Woche pset-- in der gleichen Weise, dass wir fragen, Sie verwenden Check 50 und Stil 50, Sie davon könnten als eine Ihrer Schecks, OK? 

Also, wenn es nicht passieren die W3 Validator. Das ist etwas, wir werden Sie andocken. Oder ich gerade sage Ihnen Jetzt werde ich Ihnen andocken. So stellen Sie sicher, dass es überprüft. Es ist nicht schwer. Sie fügen nur im Code und es wird entweder sagen gute Arbeit oder er verpasst hat etwas in der gleichen Weise dass Stil 50 erfahren Sie, wo Sie vermasselt bist. 

Und dann noch eine letzte Sache ist das Sie trennen möchten Ihr Markup, die alle, dass HTML oder Ihren Text und Ihre Styling. Also werden wir ein Beispiel zu tun dieses Rechts nach diesem. Also HTML und CSS sollten getrennt sein. Und wir werden über reden MVC, das Model-View-Controller ist, nächste Woche. You guys sollte wohl lernen, dass in der Vorlesung morgen, wenn Sie hatte bereits gelernt heute. 

Und es ist einfach irgendwie ein Paradigma, das wir neigen bei der Erstellung von Web verwenden Seiten, die Dinge trennen. Sie können es auf die gleiche Weise denken dass wir dazu neigen, eigene Funktionen in C wo wir hash, Dinge zu finden. Es ist nur ein Weg, um Ihr Leben leichter machen. Es scheidet sich Attribute oder Code, Sie würden über verwenden und immer wieder, aber in dieser Weise ist es Art der hält sie schön und ordentlich. Und wenn Sie ändern möchten eine Sache, es einmal ändern Sie und es ist überall sonst verändert. So ist es mehr für Ihr Leichtigkeit und Flexibilität. 

Also mit CSS, es ist sehr ähnlich HTML, aber anstelle von Tags dass ich jetzt erwähnt nur, wir verwenden, was heißt Selektoren. Und sie im Grunde nur eine Art von Associate einen bestimmten Tag in HTML mit unterschiedlichen Attributen. Und wenn ich Attribute sagen, ich meine, Dinge wie Schriftfarbe, Schriftart, die Farbe des Hintergrundes, die Farbe des Textes. Diese Art von Sachen. Wie, wenn es zentriert, wenn es nach rechts, wenn es alle inverted-- dieser coole Dinge. Etwaige stilistische Dinge dass Sie, um Ihren Text zu tun, das ist, was ich mit Attributen bedeuten. 

Und dann zwei Dinge zu wissen, ist, dass selectors-- zwei Haupt factors-- sind ID, die einzigartig ist. Sie können nur, dass für eine Sache. Ansonsten, es wird dich anschreien. Und wenn wir es definieren in einer CSS-Datei, wird es sein Hash-ID und dann welche Attribute wir wollen. Ich verspreche wir zu gehen gehen Sie durch ein Beispiel. Es werden viel mehr Sinn machen. 

Klasse kann mehrere Blöcke beziehen. So können Sie Ihre ersten und dritten Absatz die gleiche Art von Attributen, wenn Sie assoziieren mit der gleichen Klasse. Und wenn wir sie definieren in CSS, machen wir eine Punktklasse, mit Klasse als unabhängig Sie wollen, dass es benannt werden. 

Also ich weiß, das ist richtig jetzt sehr abstrakt. Das ist, warum wir den Code gehen. Ich weiß, euch liebe das, und Sie alle sind würde mich da helfen dies ist Ihre Web-Seite. Das ist Web-Seite in der Rubrik, Jungs. So gibt es irgendwelche Fragen, bevor ich schalten Sie die Powerpoint, oder irgendetwas Sie mich zurück blättern möchten um, bevor wir mit dem Programmieren beginnen? 

PUBLIKUM: Wenn Sie Spiel Tags sagen, meinst du Selektoren oder Tags? ALLISON BUCHHOLTZ-AU: Sie können denken an sie als die gleiche Sache. Es ist nur verschiedene Wörter. Ich meine, wie Selektoren. Aber Selektoren Karte auch Tags. So können Sie sich von ihnen als denken können effektiv die gleiche Sache. Ich verspreche, es wird machen mehr Sinn, wenn wir codieren. Alles, was von der Powerpoint oder Fragen gerade jetzt, bevor wir tatsächlich erstellen Seite der Rubrik? Alle bereit? Cool. 

Also ich habe ein gestartet. Lassen Sie mich die Schrift für euch zu erhöhen. OK, also gerade jetzt, wir haben nur ein Bare Bones Webseite hier richtig. 

Wir haben einige HTML. Wir haben einige Header, die wir siehe hier als Beispiel Web-Seite. Einige Titel, einige Schriftart. Dies sind Tags, OK? Also, wenn ich meine schließen Sie Ihre Tags, wir sehen hier Diese Halterung Kopf ist Ihre Öffnung Tag, und dies Halterung / Kopf endet es, OK? 

Also Sie davon könnte als Ihre Zahnspange in Ihrem, wenn die Bedingungen oder Ihre for-Schleifen. Wenn Sie eine am Anfang haben, Sie wollen eine am Ende. Es wird noch die meiste Zeit arbeiten wenn Sie nicht über einen geschlossenen Tag, aber am besten Praxis schließen Sie Ihre Tags. 

Also in diesem Fall, lassen Sie uns dies ändern. Wir werden in Abschnitt sieben haben. "Section Webpage." Also ich werde einfach, dies zu ändern. 

Und wenn wir über gehen Sie hier und wir reload-- Gotta speichern und reload-- Wir bemerken, dass sich hier ein es verändert, oder? Cool. Also das ändert den Titel. Dies ist unabhängig von den auf Ihrem Registerkarte. 

So ist diese Art der Suche irgendwie langweilig. Ich weiß nicht, über Jungs. Ich denke, wir wollen etwas anderes hier. 

Also, was wir tun können, ist die Header ist einfach da. Lass uns eine Art von Körper. So haben wir hier einige Körper. Ich habe immer offen tun und schließe meine Tags zu starten, in der gleichen Weise, dass ich Hosenträger. Ah. Warten Sie, was? 

PUBLIKUM: [unverständlich]. ALLISON BUCHHOLTZ-AU: Ah. Ihr Jungs haben mich. Gut gemacht. Gold-Star. 

OK, so haben wir hier einige Körper. Und nun lassen Sie uns damit beginnen, etwas Text. So haben Sie ein paar verschiedene Optionen zum Hinzufügen von Text. Wir haben Dinge wie Überschriften. Wir müssen nur normalen Text. Also lasst uns einfach mit einem Kopfball zu starten. Eigentlich, wenn Sie nie wieder ausziehen wollen um die W3 Schule HTML nach oben ziehen, Sie können Art umschauen und wenn es etwas gibt, besonders, dass Sie ausprobieren möchten mit dieser Web-Seite können wir das tun. Also in diesem Fall, lassen Sie uns einfach eine h1 tun. So h1 ist wie der höchste Header. Es wird Ihnen etwas zu geben dass ist sehr groß und fett. 

Und in diesem Fall, was wollen wir zum ersten Text auf unserer Webseite? Alles. Euch gehen, dies zu schaffen. Ich werde einfach zu tippen. PUBLIKUM: Willkommen. 

ALLISON BUCHHOLTZ-AU: Willkommen. OK, also, wenn wir sie zu retten, und wir neu zu laden, wir haben eine große große willkommen. Also nur so können Sie die sehen Unterschiede, lassen Sie uns etwas zu tun auf H6. Was wollen wir hier? Richtig? 

OK, also nur so können Sie den Unterschied sehen. Ja, Sublime. Also, wenn Sie feststellen, h1, sehr, sehr groß. h6, wie fett, aber viel kleiner, und Sie haben alles, was dazwischen liegt. Also könnte man h2, h3, h4 haben. Und das sind nur Überschriften, Also, wenn Sie versuchen, , um eine Webseite zu erstellen, die weist verschiedene Abschnitte, vielleicht haben Sie verwenden möchten Header dort irgendwo. 

Cool. Also werden wir einige weitere hinzufügen Dinge in unserem Körper. Ich sehe, dass es Art sein von cool, wenn wir ein Bild haben. Ich fühle mich wie jeder vielleicht nutzen könnten Ein niedliches Häschen Bild gerade jetzt, also werden wir zu finden ein Hase Bild zuerst. 

Ich weiß nicht, ob euch irgendwelche Präferenzen, an dem, was wir wollen. Haben Sie Wünsche? Dieser hier? Down. Ok. Daß man es ist. Eine gute Wahl. 

OK, so werden wir unser Bild anzuzeigen. Schau dir das an. Schauen Sie sich diese entzückende Sache. Wie konntest du traurig sein an einem Montag mit diesem? 

Also sind wir gerade dabei die Bild-URL kopieren. Und was wir wollen, ist, lass uns einfach sagen, wir haben einige p für Absatz. Wir werden sagen, "Schau sehen Sie die niedlichen Häschen. d'awwww. " Ich liebe meine Hasen. Ich habe ein Hase zu Hause. Ich vermisse meine Häschen. Also, was wir werden do-- Ich weiß nicht, ob ihr wollt um this-- aber mit HTML google, Wie könnte man ein Bild aufzunehmen? Wörtlich Wenn Sie Google "Gehören Bild HTML" warum gehst du nicht Jungs sagen mir was dieser Tag sein sollte? 

PUBLIKUM: img source-- 

ALLISON BUCHHOLTZ-AU: img source-- PUBLIKUM: --equals-- ALLISON BUCHHOLTZ-AU: --equals-- PUBLIKUM: --quote-- ja. ALLISON BUCHHOLTZ-AU: Perfect. Lovely. Siehe, MySpace Generation, oder? PUBLIKUM: Neopets. ALLISON BUCHHOLTZ-AU: Neopets. Oh, OK. Wow. Es ist schon verrückt. Ok. 

So stellen Sie sicher, dass ich dieses Recht zu bekommen. Cool. So sollte diese hier sein. Und dann, wenn wir erneut zu laden, haben wir unsere Häschen auf der Seite Ist das nicht entzückend? 

Das ist so niedlich. Sie wählte einen großen, großen Foto. Ich grabe es. 

OK, so haben wir jetzt dieses entzückende Häschen. Wir konnten ein Add Bild, einfach so. Also im Grunde, wenn es irgendein Bild Sie auf Ihre Webseite übernehmen wollen, Sie können es einfach so hinzufügen. Eine andere Sache wäre, wenn sein Sie das Bild gespeichert haben in dem gleichen Ordner wie Diese Datei können Sie nur schreiben, was den Namen dieses Bild ist, anstatt einen Web-Link. 

Es wäre immer noch in Anführungszeichen gesetzt werden. Es wäre genauso wie sein wenn wir this-- genannt hatte Wenn dieses Bild gerettet worden im Ordner mit dieser HTML-Datei dass ich bearbeite und es wurde bunny.jpg genannt. Wir könnten auch zu tun, dass und es würde zeigen, bis. Allerdings habe ich nicht in diese gespeichert die Datei, und ich will das Häschen halten, so werden wir den Link zu halten. 

PUBLIKUM: Was ist rabbit.org? 

ALLISON BUCHHOLTZ-AU: rabbit.org. Es ist ein appropriate-- suchen, können Sie es übernehmen. Adoption. bunny.jpg. Ich möchte dieses bunny erlassen. Oh, Gott, es ist so süß. 

OK, also wir haben Überschriften hinzugefügt. Wir haben ein Bild aufgenommen. Offensichtlich wir Mehr some text hier, nicht wahr? Wenn wir auf andere fügen wollte Texte, würden wir so weitermachen. Also dies ist ein weiterer Absatz. 

Und wir sagen: "Dies ist ein weiterer Absatz." Außerdem bin ich ein schrecklicher geschrieben? so kann ich die Dinge falsch schreiben. Nur zur Info. 

So haben wir ein weiteres Absatz hier, nicht wahr? Also vielleicht haben Sie etwas tun wollen ein wenig interessanter als nur haben alle Ihre Text, wie rechts ausgerichtet. Vielleicht möchten Sie Ihren Text zentrieren, OK? 

Also, wenn jemand zu denen nutzen will handliche Computer vor Ihnen und sag mir, wie du bist werde diesen Text zu zentrieren, 

PUBLIKUM: p align. 

ALLISON BUCHHOLTZ-AU: So p align gleich "Zentrum". Er tötete sie, Jungs. Y'all müssen intensivieren. Und wir haben "Dieser Text ist zentriert." Und jetzt haben wir etwas zentriert. 

In der gleichen Weise, wenn man wollen, dass es links ausgerichtet, Sie align equals tun könnte links, gleich align rechts. Völlig bis zu Ihnen. Wenn ich hier tat, dann ist dieses should-- jetzt ist es richtig ausgerichtet sind. 

PUBLIKUM: Allison? Image Source, ist warum nicht es nahe des img Quelle? ALLISON BUCHHOLTZ-AU: Sorry. Dieser sollte es Jetzt bist du gut. Jetzt sind wir gut. PUBLIKUM: Haben Sie nicht um es dort zu schließen, oder nicht? ALLISON BUCHHOLTZ-AU: Nun, so img Quelle, das ist eine just-- mit Bild, es ist nur als ein Element zu sehen, während wenn Sie für den Rest von ihnen bemerken, wir haben einige Tag dann Informationen, dass es bezieht sich auf und dann eine schließende Tag. Aber mit Bild, das alles einfach irgendwie in sich abgeschlossen. Cool. So euch wissen, wie man ein erstellen Header, wie die Eingabe von Text weißt du, Sie wissen, wie Sie ein Bild gesetzt Jetzt können Sie die Dinge auszurichten. 

Eine andere Sache, die Sie Vielleicht möchten Sie tun können ist es, eine Liste zu erstellen CS-- wir sind Art gehen in der nächsten Woche pset. Die Sachen, die wir typischerweise in dieser Woche lehren geht wirklich gut mit nächste Woche pset, also sind wir Art des Mischens, überlappende Dinge hier. Aber es wird nützlich für nächste Woche. 

Also, wenn wir einige schaffen wollte Liste, wie könnten wir das tun? Sie können diese Zeit nicht beantworten. Jemand anderes muss. Es ist nicht schwer, Leute, versprechen. Google "ungeordnete Liste HTML." Was war das? 

PUBLIKUM: [unverständlich]. ALLISON BUCHHOLTZ-AU: Richtig. So wissen wir geordnete oder ungeordnete suchen? Lass uns eine ungeordnete. Also haben wir etwas ul, die steht für Ungeordnete Liste. Und was haben wir für jedes Element? Tut es einen eigenen Tag braucht? Können wir einfach mit dem Schreiben beginnen die Dinge? 

PUBLIKUM: li. 

ALLISON BUCHHOLTZ-AU: li. Also, was ist unsere Liste sein wird? Was wollen wir hier? Wir machen einfach Namen. Just do Jacob. 

PUBLIKUM: Kaninchen Lebensmittel. 

ALLISON BUCHHOLTZ-AU: Kaninchen Lebensmittel. OK Ich mag diese. Kaninchen Lebensmittel. 

OK, so haben wir Karotten. Ich mag dieses Kaninchen Thema. Ich grabe es sehr. PUBLIKUM: Eigentlich dachte ich, dass Jakob wäre ein echt. ALLISON BUCHHOLTZ-AU: Jacob? Jacob ist Kaninchenfutter. Wenn Sie sah Jakobs Foto von Bürozeiten, Sie vielleicht gedacht haben er bekam durch eine Mörderkaninchen angegriffen. 

PUBLIKUM: Ich habe ein Kaninchen jetzt. Ich habe jetzt eine Mörderkaninchen. 

ALLISON BUCHHOLTZ-AU: Soll Das ein Witz sein? 

PUBLIKUM: Ich werde es nächsten Abschnitt zu bringen. Ich habe es. 

ALLISON BUCHHOLTZ-AU: Das ist lächerlich. Wie auch immer. 

PUBLIKUM: [unverständlich] 

PUBLIKUM: Ja, mein Proctor hat ein Kaninchen auch. 

ALLISON BUCHHOLTZ-AU: Ich möchte ein Kaninchen. OK, wer eine echte Kaninchen bringt Der nächste Abschnitt, insgesamt Pluspunkte. PUBLIKUM: [unverständlich] PUBLIKUM: Oh, es ist nicht real. Es ist eine ausgestopften Hasen. 

ALLISON BUCHHOLTZ-AU: Oh Ja, wir können diese zu schließen. Sieht rad. PUBLIKUM: Ist es eigentlich eine Rolle? ALLISON BUCHHOLTZ-AU: Es tut nicht. Bei den meisten dieser Dinge, Sie müssen nicht den Tag zu schließen, 99% der Zeit nichts Schlimmes passiert passieren, aber es ist guter Stil, auch. Und Jakob. Und wir haben Salat. Gruppe: für Links, es ist wirklich wichtig. ALLISON BUCHHOLTZ-AU: Hm? Gruppe: für Hyperlinks. ALLISON BUCHHOLTZ-AU: Für Hyperlinks. Ja, Hyperlinks brauchen. OK, also mal sehen, hier. Und wir haben das Ende unserer Liste. Und schauen wir uns das. Wir haben Jacob allen--, genau dort. Kaninchenfutter. Erinnert mich an Bunnicula. 

PUBLIKUM: [unverständlich] ALLISON BUCHHOLTZ-AU: Ich gehe zurück zu bringen all das alte Schulverweise heute nicht wahr? Nur alle alten Schulverweise. Sollte wie gebracht haben Gogurts oder etwas für Snacks. 

PUBLIKUM: Oder Gushers. ALLISON BUCHHOLTZ-AU: Oh. Ok. Ich werde sehen, ob ich verfolgen können unten Gushers für die nächste Woche. Ich glaube, ich kann das tun. Ich denke, wir haben könnten einige im Büro. 

OK, also haben wir eine Menge verschiedener abgedeckt Dinge, die Sie mit HTML machen kann, oder? Und wie Sie wahrscheinlich sehen können, ist es nothing-- hoffentlich nicht allzu intim-- wenn es ist, weiß ich nicht, niemandem schmälern. Wenn Sie Probleme haben, kommen Sie bitte mit mir reden. 

Aber die meisten ist es nur Blick auf die Syntax, nicht wahr? Wenn Sie eine ungeordnete Liste möchten, Wenn Sie irgendeine Art von Liste möchten, wenn man etwas ausrichten möchten oder Format etwas, es ist alles über nur Art von oben schaut das Syntax für HTML, oder? Und eine Sache, die ist ziemlich cool eigentlich ist, wenn Sie gehen sehen zu-- lassen, was ist eine schöne Website, die wir mögen? Wer irgendwelche Lieblings-Websites das OK sich online zu bringen sind? Weißt du was, lass uns einfach tun CS50. Das ist schön und sicher, nicht wahr? 

OK, so CS50 hier. Oh schau, da ist ein Abschnitt im Augenblick. Wenn Sie die Art und Weise gefällt es aussieht. 

PUBLIKUM: [unverständlich]. ALLISON BUCHHOLTZ-AU: Wir sind nicht werde Meta Abschnitt tun, Jungs. Es ist nicht passiert. Es wäre cool, aber wir werden nicht, es zu tun. 

Also, was tun, du könntest tun, wenn Sie die Art und Weise gefallen dies funktioniert, ist können Sie immer richtig klicken Sie auf jeder Webseite, die Sie mögen und Sie tun können Seitenquelltext. Es öffnet sich die ganze HTML. Und das ist eigentlich eine wirklich gute Weg, um Ihre eigene Webseite zu stylen. Gehen Sie zu einem Web-Seite, die Sie wirklich mögen und sehen Sie die HTML und herauszufinden, wie sie es taten. 

Und wörtlich, solange Sie zitieren die Dinge, solange Sie nur sind nicht Diebstahl von Leuten, es ist OK. Speziell für CS50 [? finanzieren?], wir sind Art erwarten Sie zu bekommen Inspiration aus anderen Website. So fühlen sich frei. Schauen Sie durch Websites, die Sie denken, sind wirklich hübsch und herauszufinden, wie sie zu verwenden HTML und CSS, um diese Dinge zu tun. 

So wie Sie hier sehen, gibt es offensichtlich wie Links, und wir haben eine Klasse hier. Wir haben hier einen Link. Wir haben eine Liste. Wir haben wahrscheinlich einige Bilder hier irgendwo. 

Wir haben ein paar coole Stil bekam hier. Das ist das nächste, was wir tun werden. Also Stil, wenn Sie diese sehen Stil Klammern, es ist im Grunde CSS. Ben, hast du eine Frage? 

PUBLIKUM: Was ist div? 

ALLISON BUCHHOLTZ-AU: div ist nur a-- was div? PUBLIKUM: Division. ALLISON BUCHHOLTZ-AU: Division. Ja, es ist genau wie Trennen verschiedener Elemente. OK, das ist so hier, was wir sind werde in nächsten zu gehen. So kann dies nicht die beste sein Stil, weil, wenn Sie bemerken, haben wir HTML und Stil in der gleichen Seite, und wir eigentlich denjenigen trennen wollen, OK? Und eigentlich, lassen Sie mich öffne meine rechte da dies sein soll die PDF, so haben wir style.css. 

Also, was wir hier tun können, ist diese sind coole Dinge wie ein Fade und wir könnten versuchen, und das tun, aber ich fühle wie würde ich Durcheinander, das sich im laufenden Betrieb, so ermutige ich euch zu gehen versuchen, dass auf eigene Faust, aber ich bin nicht dabei, es jetzt zu tun. Also, wenn ihr Jungs, denkt daran, wenn Sie jemals Probleme Set treffen, etwas stürzt von der Seite. Es hat mit der Überblendung zu tun und der Übergang und was nicht alles. 

PUBLIKUM: Und das ist alles CSS und HTML? 

ALLISON BUCHHOLTZ-AU: Alle CSS und HTML. Ja. So können Sie eine Menge wirklich tun können coole Sachen mit CSS und HTML. Also mit unserem tollen bunny Webseite hier, wir gehen, um ein wenig zu tun bisschen CSS-Styling mit ihm. 

Also, wenn Sie jemals einen Stil haben Blatt, das wir hier haben, Sie einfach anrufen style.css. Sie können es nennen, wie Sie wollen. Was wichtig ist, dass wir gehen, um es in unserer web.html verweisen hier. 

Also, was wir tun werden, ist wir-- so dass ich nicht mit Zohan dieses up-- werden wir verlinken Diese beiden Dateien zusammen. Also in der gleichen way-- Ich werde eine Analogie hier, um C zu ziehen. In der gleichen Weise, wenn man einige library-- und wir haben cs50.h-- unsere Compiler verbindet sie. Dies ist nur eine explizite Link von unserer Seite. Also in der gleichen Weise, die wir tun Hash gehören einige Datei, was Ich bin zu schreiben, ist nur die HTML / CSS Äquivalent davon. 

Wir sind einfach nur sagen, OK, diese Web-Seite wird sich dieses Stylesheet verwenden, OK? So haben wir link rel gleich Sheet. Und dann haben wir Typ, css. Und dann href entspricht. 

Ok. Also all das tat hier ist, können Sie denken Sie an dieses als die gleiche Sache als Hash gehören. Offensichtlich sieht es ein wenig mehr kompliziert, aber in allen Fällen, es ist effektiv dasselbe. Das ist also nur einige Verknüpfung eines Stylesheet, es ist vom Typ text / css, und der Name es style.css. 

Was ist wichtig zu wissen, ist, dass der Web-Seite dass ich arbeite rechten now-- web.html und style.css-- sind im gleichen Ordner. Da in verschiedenen Ordnern, Sie brauchen, um die tatsächliche Wurzel geben oder um es der Weg dorthin. Aber in diesem Fall, wir halten es super einfach und es wird hier zu sein. Also, wenn wir das tun, habe ich einige die Dinge hier schon Schlange standen. 

So haben wir einige Körper, die gehen in unseren Hintergrundfarbe, haben die jetzt ist hellblau. Wir können es ändern, wenn wir wollen, aber wenn ich das richtig erinnere, es sollte nur ändern Sie es in hellblau. Und jetzt haben wir einen hellblauen Hintergrund. Und wir hatten hier-- kann jemand erinnern welches ist Hash-ID oder Klasse? 

PUBLIKUM: ID. 

ALLISON BUCHHOLTZ-AU: ID. Cool. Also, was wir tun wollen ist, welche dieser Schriften oder which-- wollen wir "Schau die niedlichen Häschen "purple zu sein? Ich denke, wir wollen, dass das lila sein. Ich bin mir ziemlich unten mit, dass sein lila. 

Also, was Sie tun, ist Sie tun ID equals-- in diesem Fall Ich sagte, was, hübsche Farbe hier. Wir laden. Ganz plötzlich, es ist lila. OK, also mit ID, erinnern es muss eindeutig sein, also sollte ich nie mit sein diese ID anderswo. Aber mit Klasse, wie wir hier mit einem hübschen Schriftart, Ich sollte in der Lage zu handhaben sein dass überall ich will. 

Also lassen Sie uns dies tun hier. So können wir sagen Klasse entspricht ziemlich Schriftart. Und wenn wir jetzt schauen, haben wir dieses coole hübsche Schrift hier. Also vielleicht will ich beides tun. OK, habe ich eigentlich nicht wissen, ob dies zur Arbeit zu gehen, aber ich will es versuchen. Und dies ist, wie Sie lernen, CSS und HTML. Du bist wie, Sie wissen, was, ich will versuchen, diese. Ich bin mir nicht sicher, ob es funktionieren wird. Mal sehen, ob es funktioniert. 

Und sehen Sie, dass. Jetzt ist es in lila und es ist ein ziemlich Schriftart. OK, so dass Sie alle diese haben verschiedene Dinge, die Sie tun können. Haben Sie eine Frage? 

PUBLIKUM: Yeah. Nun, genau wie die Farben Sie verwenden sind Worte. Gibt es eine Möglichkeit, um die Farben zu tun mit dem Hexadezimal-RGB? ALLISON BUCHHOLTZ-AU: Sie können auch tun Sie es mit hexidecimal, glaube ich. Ja. Aber es ist ganz nett, wenn Sie wollen Sie nicht, sie anzuschauen. Sie können genau wie, violett oder blau sein. PUBLIKUM: Hoffen wir, dass sie wissen, was das bedeutet. ALLISON BUCHHOLTZ-AU: Richtig. Lassen Sie uns also diese Lese- oder Chartreuse. Warum würden Sie jemals Chartreuse wählen? Es ist eine interessante Farbe. 

OK, so offensichtlich wir können wir sehen, Dinge ändern können aber wir wollen. Wenn Sie create-- wollte sagen wir wir wollten eine andere Klasse erstellen. Was könnte euch zu ändern? Wenn Sie nach oben ziehen W3Schools ' CSS-Dokumentation, Ich überlasse das Wort an euch. Wir können versuchen und etwas kühl mit dies in den letzten paar Minuten. Weil ich Sie Art bei einer Crash-Kurs auf eine Menge coole Sachen dass Sie tun können. Aber am Ende, wie gesagt, wenn Sie nur experimentieren, werden Sie eine Menge lernen. 

PUBLIKUM: Haben Sie nach oben schauen diese Schrift? 

ALLISON BUCHHOLTZ-AU: Ja, Ich sah, dass die Schriftart. So wie wörtlich ich ging zu-- was habe ich getan? Ich habe CSS-Schriftenliste, und dann habe ich font-Stack, und dann war ich wie, schau, hier sind alle coolen Schriftarten, die Sie tun können. Und da war diese, so Ich kopierte es zu meiner Zwischenablage. Und dann war ich wie, OK, cool, dort gehen wir. Alles erledigt. 

PUBLIKUM: So müssen Sie müssen sicherstellen, dass CSS weiß, was das Schrift ist. 

ALLISON BUCHHOLTZ-AU: Ja. 

PUBLIKUM: Wie ist es am Ende sagen? Cursive? 

ALLISON BUCHHOLTZ-AU: Cursive. Ja. 

PUBLIKUM: Hintergrundbild. 

ALLISON BUCHHOLTZ-AU: Hintergrundbild. Ok. So können Sie mir sagen, wie Sie dies tun möchten. Ich überlasse es dir. Ich bin nur die Eingabe bis jetzt hier. Das Rad ist in Ihren Händen. 

PUBLIKUM: OK 

ALLISON BUCHHOLTZ-AU: OK. Was mache ich? 

PUBLIKUM: Doing-- Ich weiß, was kommt nach der geschweiften Klammer. ALLISON BUCHHOLTZ-AU: OK. Also wahrscheinlich im Körper, ich würde davon ausgehen, weil wir denn mit dem Hintergrundbild. 

PUBLIKUM: Ja, lass uns das tun. 

ALLISON BUCHHOLTZ-AU: OK. PUBLIKUM: OK, so Hintergrund Doppelpunkt, und dann werden wir brauchen eine URL-Adresse dieses Bild. Vielleicht Pseudo-Code, dass für jetzt, vielleicht. 

ALLISON BUCHHOLTZ-AU: Was würden Sie mir zu-- PUBLIKUM: Ich bin wie ein GIF denken. ALLISON BUCHHOLTZ-AU: Ein GIF? Das wird interessant. OK, was soll ich googeln hier? 

PUBLIKUM: Nein, das ist Ihre Wahl. 

ALLISON BUCHHOLTZ-AU: Warum nicht wir-- wenn es ein Hase, Ich fühle mich wie wir sollten eine haben schöne Grasfläche oder so etwas. 

PUBLIKUM: Wiese. Eine Wiese. 

ALLISON BUCHHOLTZ-AU: Eine Wiese? Ok. PUBLIKUM: Oder Rachel Maddow. ALLISON BUCHHOLTZ-AU: Dieser sieht ziemlich. Oh, das ist winzig, aber. Wir brauchen eine gute Bildgröße. Mal sehen. Oh, sieh mal. Das ist eine ziemlich Wiese. Weißt du was, Ich mag diese. Lassen Sie kopieren diese. 

PUBLIKUM: OK, so dass ich denke, es ist die URL, offene Klammern. 

ALLISON BUCHHOLTZ-AU: OK, URL. 

PUBLIKUM: Dann wird die Adresse. 

ALLISON BUCHHOLTZ-AU: OK. Ist das alles, was wir brauchen? 

PUBLIKUM: Klammer schließen Semikolon, und dann Raum, Hintergrund Bindestrich Befestigungsdoppelpunkt fixiert und geschweifte Klammer. 

ALLISON BUCHHOLTZ-AU: OK. Mal sehen, ob das funktioniert. Es wird ziemlich cool, wenn es funktioniert. Ich bin wirklich aufgeregt, hier richtig. Es hat nicht funktioniert. Ich frage mich, warum. PUBLIKUM: Vielleicht ist die URL muss im Notierungen. ALLISON BUCHHOLTZ-AU: Vielleicht. Und dies ist, wie wir lernen, Jungs. 

PUBLIKUM: Können wir Hintergrund Farbe und Hintergrundbild? 

PUBLIKUM: No. One ersetzt den anderen. 

ALLISON BUCHHOLTZ-AU: Ich weiß nicht. Mal sehen. Lassen Sie uns es aus und sehen. 

PUBLIKUM: Oh, vielleicht, ja. [Zwischen Stimmen] 

ALLISON BUCHHOLTZ-AU: OK, das ist obviously-- I [unverständlich] hier. Also OK. PUBLIKUM: Hintergrundbefestigung. ALLISON BUCHHOLTZ-AU: Ah. 

PUBLIKUM: OK, ich weiß es nicht. ALLISON BUCHHOLTZ-AU: Es sieht aus wie es sollte funktionieren. Sind Sie sicher, dass es Doppelpunkt nach dem URL? 

PUBLIKUM: Nein, es ist Semikolon. ALLISON BUCHHOLTZ-AU: Es ist Semikolon. PUBLIKUM: Habe ich gesagt, Doppelpunkt? ALLISON BUCHHOLTZ-AU: Du hast gesagt, einen Doppelpunkt. PUBLIKUM: Oh nein. ALLISON BUCHHOLTZ-AU: Dort gehen Sie. PUBLIKUM: Oh, warte, jetzt wir können den Text nicht lesen. ALLISON BUCHHOLTZ-AU: Jetzt können Sie den Text nicht lesen können, aber wir haben das Hintergrundbild. Mmhmm? 

PUBLIKUM: Unterstützt HTML unterstützt dynamische Inhalte? Wie könnte man das Bild skalieren abhängig von der Fenstergröße, Oder ist das eine CSS-- 

ALLISON BUCHHOLTZ-AU: Also CSS hat, das zu tun. Also, wenn euch interessiert beim Lernen fortgeschrittenen CSS, Ich bin Co-Teaching ein Seminar über CSS auf der 7.. Und ich verspreche, es wird viel mehr in die Tiefe und noch viel mehr cool Dinge in diesem Abschnitt. Und mein Co-Lehrer ist wie Frontpartie web dev Master. So werde es ziemlich cool, wenn Sie wollen über all die coolen Dinge dass CSS tun können. 

Aber was wir hier mit haben seinen Hintergrund Befestigung fixed-- so ist es einige feste size-- aber Sie tatsächlich dynamically-- können wenn Sie jemals sehen Webseiten, da die meisten guten Web-Seiten tun wird, wenn Sie passen die Größe des Browsers es stellt den Hintergrund oder wie viel zeigt oder formatiert Dinge, nicht wahr? Also das ist, was wir als relative Positionierung. 

Und CSS tatsächlich greifen, wie groß Ihr Browser-Breite ist oder wie groß es ist, und man kann die Dinge zu positionieren entsprechend den relativen Größen gegenüber absoluten Größen. Und das ist offenbar weiter fortgeschritten CSS, aber das ist etwas, was Sie tun können. Wenn Sie lernen wollen mehr zu meinem Seminar zu kommen. 

Das ist also etwas, was Sie tun können. Und CSS kann eigentlich do-- CSS und JavaScript welche wir in die nächste week-- bekommen erlauben es, dynamisch ändern Seiten ohne lade sie die ganze Zeit. Und Sie einige tun bekommen ziemlich coole Sachen. 

So gibt es eine andere Sache, dass euch vielleicht wollen oder was Sie wollen erkunden? Wir haben 10 Minuten belassen. Wir können auch vorzeitig verlassen, aber wenn Sie etwas mehr Web-Sachen machen wollen, wir können, aber ich bin mir nicht dich zu zwingen. Aber wir können auch nur essen Süßigkeiten. PUBLIKUM: Markieren Sie den Text weiß, so dass Sie es lesen. ALLISON BUCHHOLTZ-AU: OK. Also in diesem Fall wollen wir etwas p. PUBLIKUM: Sollten wir es in der Körper so dass es gilt für die ganze Seite? ALLISON BUCHHOLTZ-AU: Ja, das können wir eigentlich. Das ist eine gute Idee. So have-- wir Sie tun wissen, was wir sein sollten? Ich weiß nicht, ob wir die Textfarbe zu tun. Ich wollte versuchen, erstellen eine andere Klasse hier. 

PUBLIKUM: Wie gehen Sie also erhalten dass sie über die Vorschläge? ALLISON BUCHHOLTZ-AU: So wenn euch interessiert sind, dies ist ein weiterer Text Editor aufgerufen Sublime. Sie sollten in der Lage zu sein, installieren es auf Ihrem Gerät. Manchmal wird es ein wenig kompliziert. Wenn Sie Hilfe bei, dass möchten, Ich bin super glücklich, Ihnen zu helfen mit ihm, weil gedit ist groß und es ist genial, weil man es zu kompilieren auf dem Boden, aber ich habe wirklich wie Sublime, weil es ist ziemlich und es tut Dinge tun wie die automatische Vervollständigung. 

So kann man auf jeden Fall fühlen sich frei, lassen Sie mich wissen, wenn Sie das tun möchten. Wenn Sie nur google "Sublime Text, "es in der Regel hat Anweisungen zur Installation auf verschiedenen Betriebssystemen. Es ist wirklich cool, ich denke, meiner Meinung nach. So p. Ich glaube, ich kann nur tun, text-- oder können wir nur tun, Farbe ist "weiß." Da. 

Also, was ich hier tat, ist, dass ich nicht alle den Text ändern. Aber p ist hier nur eine Tag, die wir haben, nicht wahr? Dieser Absatz-Tag. Also habe ich einfach eine CSS-Element erstellt, sagte: OK, nichts mit diesem Tag p, machen die Farbe Weiß. 

Also, wenn Sie bemerkt, machte es dies weiß und dies weiß. Es hat noch keinen unserer Liste weiß, weil es ist nicht damit verbunden. Sie könnten durch zu gehen und Sie sagen-- könnte 

PUBLIKUM: Haben Hintergrundfarbe. 

ALLISON BUCHHOLTZ-AU: Hintergrundfarbe? 

PUBLIKUM: Hintergrund Rohr in Farbe, wo Sie den p-Tag setzen. 

ALLISON BUCHHOLTZ-AU: OK. Sie wollen es weiß? PUBLIKUM: Mmhmm. ALLISON BUCHHOLTZ-AU: OK. Dort gehen Sie. PUBLIKUM: Das ist seltsam. ALLISON BUCHHOLTZ-AU: Ziemlich cool, oder? Also, wenn Sie nur herum, wirst du eine Menge lernen. Und es kann ziemlich cool sein. Ich denke, es ist auf jeden Fall mehr erfreulich als manchmal weil Sie nicht warten müssen, für Ihr Programm zu kompilieren. Sie können einfach auf Aktualisieren und du, oh, schauen sind, es funktioniert, oder oh, ich bin wahrscheinlich etwas fehlt. Und das ist etwas, das wirklich ist kühl zu diesem nächsten Teil der Klasse, ist es auf jeden Fall, ich denke, einfacher zu kontrollieren wie Sie auf dem Weg gegenüber gehen dass diese langen Programme schreiben und wollen und Beten dass es funktioniert am Ende. 

Also mit diesem, ich denke, euch alle scheinen gut. Wenn Sie Fragen, wie immer haben, Come Talk zu mir, komm lass es mich wissen. Ich werde direkt vor sein für die nächsten 15 Minuten wenn Sie plaudern über wollen alles und jedes. 

Also ich hoffe, dass Sie guys-- viel Glück mit diesem pset. Einsendeschluss ist Freitag Mittag weil es zu spät veröffentlicht wurde. Also werde ich wohl sehen werden viele von euch am Donnerstag, aber hoffentlich nicht. Vielleicht haben Sie es bis dahin getan. Ich würde Super stolz sein. 

Aber wenn nicht, werde ich Sie sehen am Donnerstag. Sie können auch einen späten Zeitpunkt zu verwenden, die erstreckt sie sich bis Samstag um die Mittagszeit. Aber ich don't-- huh? 

PUBLIKUM: Halloween. 

ALLISON BUCHHOLTZ-AU: Es ist Halloween, A und B, Ich glaube nicht, dass es sein Bürozeiten am Freitag. Also wirklich versuchen es durch zu erledigen Freitag, damit wir alle feiern Hallow Wochenende. Also gut, ich werde euch nächste Woche.