[Musikwiedergabe] 

DAVID J MALAN: Dies ist CS50 und Dies ist der Beginn der Woche 7. So begrüßen Sie zurück. Und Sie können daran erinnern in Problem stellte vier, Es war ein bisschen wie eine Schnitzeljagd für einige tolle Preise, wobei nachdem Sie erholen Fotos an Mitarbeiter sowohl hier als auch in New Haven, Sie wurden aufgefordert, so viele zu finden diese Informatiker wie Sie können. Und wir haben eine ganze habe Bündel von Einreichungen. Dachte, ich würde ein paar teilen heute hier bei Ihnen. 

Und wir werden alle diese online zu stellen. Aber vor allem wollte ich machen Sie darauf aufmerksam zu-- auch eine, Sam war in einem ganz wenige von ihnen Regel posiert wie diese. Aber es scheint, dass ab an diesem Morgen, der Gewinner wurde ein gewisser jemand namens Ken mit 24 des Statuts der Kamera eingefangen oder ein paar mehr, wenn Sie in zu nehmen Konto mehrere Mitarbeiter in den Bildern. Abgebildet ist Ken nächsten Maria in New Haven. 

Jetzt, Ken, obwohl, dreht Sie ist wenig eine Ecke Fall das ist noch nicht vorgekommen. Es stellt sich heraus, daß sie nicht auftreten, mir Kleingedruckte in Problem setzen Set vier, die besagt, dass Mitarbeiter sind nicht für die tolle Preise weil Ken ist natürlich einer von die Fotografen auf unsere Mitarbeiter. Jetzt, mit dieser sagte, er Ursprünglich schrieb mir zu sagen, bitte nicht, diese Fotos online zu stellen. Ich denke, zu einem großen Teil weil die meisten der Fotos dass dieser Fotograf machte betrachten ein wenig so etwas wie dieses. Und dergleichen. 

Aber Ken möchten, dass ich Ihnen versichern, , dass er ein sehr guter Fotograf, Er ist ein professioneller, nimmt er Fotos, die nicht verschwommen sind, , die besser im Fokus stehen, und er dauerte ein paar von unseren eigenen Mitarbeitern. Aber anstatt nur zu bestätigen Ken, was wir dachten, wir würden zu tun wird durch die Liste der go tatsächliche Studenten, die eingereicht. Und es stellt sich heraus, dass Lance mit 15 Fotos von heute morgen war unser Favorit. 

Und hier dargestellt wird, ist Lance mit Colton, mit Skaz, mit mir selbst und mit Sam. Doch dann stellt sich heraus, dass ab 11.46 Uhr, so dass nur ein wenig vor, Ich ging zurück in mein E-Mail und gefunden dass wir noch eine weitere Vorlage von einem Studenten namens Bonnie deren E-Mail sagte nur diese. Nicht lügen, ich bin Auf diese während des Unterrichts. Und fuhr dann fort, einfach anzubringen 14 Fotos, einer schüchternen von Lances 15. 

Aber in Bonnies Bilder, stellt sich Sie waren mehrere Mitarbeiter, Sam unter ihnen, so dass das, was wir dachten, dass wir tun würde, ist zu bestätigen beides. So dass zusätzlich zu bekommen die Dropbox Raum, dass alle Teilnehmer empfängt, werden auch diese beiden Abschnitte erhalten eine schöne liefertes Mittagessen für sie und ihre Abschnitt paart in der kommenden Woche. Und so werden Sie von uns zu hören, Lance und Bonnie, um Entschuldigung. So groß, congrats zu ihnen. Nun, diejenigen unter Ihnen, würde wie Mittagessen allgemein wissen, dass CS50 Mittagessen in Cambridge und New Haven ist an diesem Freitag. Zum CS50 Webseite Strich RSVP. Und nun ein Wort über Seminare. Mehr curricular. So dass wir kurz vor der Punkt des Semesters wo Sie beginnen sollten Nachdenken über Abschlussarbeiten. Und in der Tat, in der nur ein bisschen, wird sogenannte aufgrund vorge Vorschläge sein. So vorge Vorschläge werden soll ziemlich niedrig sein, Auswirkungen und wirklich nur eine Möglichkeit für Sie eine kurze Notiz verfassen Ihre Lehrkollegen um die nötige Information ihn oder sie, was Sie denken Sie Vielleicht möchten Sie für Ihre abschließende Projekt zu tun. 

Nun, viele Schüler am Ende Dabei webbasierte Abschlussarbeiten. Und selbstverständlich, gerade wir jetzt letzte Woche in diesem und darüber hinaus Tauchen in Web-Programmierung. Also nicht auf, wenn Sie Sorgen habe absolut keine Ahnung, wie Sie würden die Ideen zu bauen, dass Sie in Ihrem Verstand haben können. Das ist wirklich nur eine Zwangsfunktion um Sie zum Nachdenken und Gespräche mit TF darüber. Aber um Ihnen dabei zu helfen, und mit Abschlussarbeiten letztendlich wissen, dass CS50 hat eine Tradition anzubieten Seminare. 

Und diese sind optional, die Hände auf, oder auf Basis von Chancen Vortrag um mehr über Themen, die es zu lernen ein kleines Neben dem Verlauf des Lehrplan, aber dennoch wunder Material Abschlussarbeiten zu fahren. Und so ist die Liste, die ist CS50 Personal hier in New Haven haben sich mit für gekommen in diesem Jahr über iOS Programmierung, Android Programmierung, Spiele-Entwicklung, und Bündeln von mehr Werkzeuge und Sprachen und Techniken. 

So halten Sie ein Auge auf den CS50-Website. Und in der Zwischenzeit, wenn Sie möchten, Melden Sie Ihr Interesse an einer dieser Punkte, gehen Sie zu CS50 der Schrägstrich-Register. Und wir werden dann Follow-up, um die Tage und Flugzeiten und Standorte und everything-- meisten alles gestreamt werden und auf Anfrage erhältlich nach, wenn Sie nicht tatsächlich machen es. So ohne weiteres, wir letztes Mal mit GET aufgehört hat. 

Und das war, wie die Nachricht, war innerhalb der virtuellen Umschlag, erinnern, dass wir vom Router geleitet, um Router Router zwischen einem Web-Browser und einem Web- Server. Und diese Botschaft sah ein wenig so etwas wie dieses. Das war die Botschaft, die mehr arkane war tatsächlich in einer Hülle auf einem Stück Papier, dessen geschrieben erste Zeile sagt wörtlich zu Schrägstrich. 

Und so wie eine Plausibilitätsprüfung, was hast Schrägstrich bezeichnen? Was bedeutet Schrägstrich bedeutet, wenn Anfordern einer Website? Sie fordern es die ganze Zeit. Die meisten, immer wenn Sie eine Website besuchen, können Sie eigentlich gar nicht geben Sie einen Dateinamen ein. Sie haben wahrscheinlich nur um Facebook.com zu gehen, Eingabe gmail.com oder dergleichen. Und was bedeutet Strich dar? Welche Datei? Oder welche Seite, speziell? 

Der Index, yeah. So der Standardseite. Also, wenn Sie eine Datei angeben zu nennen, wie wir beginnen, um zu sehen, Sie tatsächlich nur anfordert geben Sie mir die Standard-Seite von Facebook oder geben Sie mir meinem Posteingang oder geben mir die Standard-Seite Neuigkeiten CNN-Website oder dergleichen. Und ein Server antwortet dann auf wird diese Nachricht mit etwas wie diese, ja zu sagen, ich sprechen HTTP-Version 1.1. 

200, die einen Status Code, die wir Menschen nur selten überhaupt zu sehen, weil es gut ist. Weil es bedeutet, OK, die Anfrage empfangen und richtig gehandhabt wird. Und die Art des Inhalts offenbar in der Reaktion ist oft, aber nicht immer, Text. Und insbesondere HTML. Und das ist eigentlich wo wir uns heute. 

So in der Tat, ich werde gehen weiter und eröffnen einen Browser. Ich werde Chrome nutzen, können Sie die meisten jedem Browser in den kommenden Wochen. Generell empfehlen wir Chrome denn es ist insbesondere gut für Software-Entwickler. Es ist viel bekam gebaut in der Werkzeuge, die es einfacher machen, nicht nur HTML und CSS zu entwickeln, Dinge werden wir darüber zu reden heute, sondern auch andere Sprachen. 

Und ich werde weitermachen und gehen zu-- Ich werde Klick oder rechte Steuer klicken Sie irgendwo auf einer Webseite. Und ich werde gehen, um Element zu inspizieren. Und ich werde meinen zwicken Bildschirm nur ein bisschen hier. Lassen Sie mich das auf den Boden zu bewegen. Also das ist, was heißt Chrome Inspector. Also das ist wie ein Debugging- Werkzeug in Chrome gebaut. 

Alle von Ihnen haben bereits diese wenn Sie noch mit Chrome gewesen. Und ermöglicht es Ihnen, um zu sehen, was los ist auf unter der Haube von einigen Web-Seite. Lassen Sie uns also tatsächlich einen Schauen Sie sich diese wie folgt. Es hat viel mehr Funktionen und wir kümmern uns heute. Aber es gibt diese Registerkarten hier. Elemente, Netzwerk, Quellen, Timeline, und einige andere Sachen. Ich werde Sie auf Netzwerk für einen Moment. 

Und es ist ein wenig überwältigend auf den ersten Blick hier. Aber was ich tun werde, ist, lassen me vereinfachen es ein wenig. Ich werde auf dem Turn die Aufzeichnung von Licht, so dass es rot. Und ich werde sagen, zu bewahren Protokoll. Und dies ist nur ein wenig was ich herausgefunden, im Laufe der Zeit, die gehen, um zu speichern alles, was im Browser geschieht. Und jetzt werde ich gehen um http://facebook.com. 

Eigentlich machen wir www für eine gute Maßnahme, Schrägstrich. Eintreten. So eine URL, die viele Sie könnten besucht haben. Und jetzt Facebook-web Seite kommt an der Spitze. Und dann eine ganze Reihe von Sachen flogen an der Unterseite. Und in der Tat stellt sich heraus, dass wenn Sie Facebook.com zu besuchen, Sie nicht nur die Herstellung einer HTTP-Anfrage, es stellt sich heraus, dass auf Facebook.com gehen sendet 41 jener Umschläge, jede mit ihrer eigenen GET-Anforderung, wie angedeutet, wenn auch hinter dem Bildschirm hier am unteren Rand des Bildschirms, es zeigt an, dass in der Tat meinen Browser aus 41 die Anfragen. 

Und insgesamt, übertrug sie 861 Kilobyte und es dauerte aus irgendeinem Grund weniger als acht Sekunden , all das zu downloaden. Also das ist wirklich ein bisschen komisch dass Facebook-Seite würde das dauern lange, aber so dass es in diesem Fall. Nun, all das ich nicht wirklich interessieren etwa mit Ausnahme der obersten Anfrage. Lassen Sie uns also auf diesen einen gehen hier und lassen Sie mich zoom out für einen Moment. 

Und lassen Sie mich heran zu diesem Thema. Also, was ich habe auf der linken Seite, obwohl getan es gibt eine Menge los hier ist Ich habe hervorgehoben Facebook.com und dann feststellen, dass ich nach unten scrollen, Scrollen nach unten, nach unten scrollen, In den Kopfzeilen anzufordern. Und du wirst sehen, dass Chrome zeigt mich im wesentlichen die inneren Inhalte des Antrags Ich machte. Es ist nicht in genau der gleichen Formatierung Weg, aber feststellen, es gibt Erwähnung erhalten, feststellen, es ist die Rede von dem Host, Facebook.com, der Pfad oder Schrägstrich, das ist die Datei, die ich angefordert. 

Und dann, wenn ich blättern Sichern, werden wir tatsächlich sehen, dass das, was Facebook zurück für mich ist, alle diese Kopfzeilen. Also innerhalb dieser virtuellen Umschlag tatsächlich gibt eine Menge von Schlüsselwert-Paaren. Ein Wort, ein Doppelpunkt und dann ein Wert. Ein Wort, ein Doppelpunkt und ein Wert. Diese werden als Header. Und es gibt noch viel mehr Detail als wir eigentlich egal jetzt. 

Aber das ist an zweiter Stelle zu letzte dort unten, beachten Sie, dass Facebook.com des Servers, in der Tat hier gesagt kommt etwas Text HTML. Also all das ist zu sagen, dass, wenn Sie eine Web-Anfrage Seite aus einem Browser, um eine Server antwortet, dass Server- mit einer Hülle aus einem eigenen innerhalb von denen ist Text. Mit anderen Worten, HTML. Hyper Text Markup Language. Das ist eine andere Sprache dass wir heute vorstellen dass der Mensch oder Computer zu generieren Zur Durchführung der Web-Seiten. 

Genauer gesagt, lassen Sie uns dies. Ich werde jetzt zurück zu Facebook-Website. Und ich werde gerade Steuer Klick oder Rechtsklick und klicken Sie auf Seitenquelltext. Und selbst wenn Sie nicht mit Chrome, IE tun dies, Firefox dies tun können, Safari kann dies tun, auch wenn Sie im Menü Optionen könnte ein wenig anders aussehen. Und das ist das HTML dieser Marke und Unternehmen werden auf Facebook geschrieben habe. 

Und kollektiv, hier diese Sprache implementiert die blaue und die weiße Seite sahen wir vor einem Moment. Nun, dies ist ein wenig überwältigend. Aber wenn wir bis oben links, wir sind gehen zu beginnen, einige Muster zu sehen. Es sieht aus wie es gibt eine Menge dieser offenen spitzen Klammer und dann gibt es dieses Schlüsselwort HTML. Hier ist eine weitere offene Winkel und Kopf. 

Hier ist, wenn wir nach unten scrollen und ab und ab, ich bin werde weitermachen und versuchen, nach etwas suchen. Es Weg über auf der rechten Seite Hier ist offen Klammerkörper. Und erinnern von den letzten Zeit, die wir vorgeschlagen daß einfachsten Webseite dass ein Mensch vielleicht schreiben könnte ein wenig wie folgt aussehen. Öffnen HTML-Tag, offene Kopf Tag, offene Titel-Tag, dann geschlossen Titel, geschlossenen Kopf, offene Body-Tag, ein Text, geschlossenen Körper, geschlossenen HTML. 

Aber eine Pause hier nur für einen Augenblick. Dieser Code, auch wenn Sie noch es nie geschrieben aber immer noch nicht ganz verstehen, was los ist, sieht gut aus. Richtig, es ist sehr sauber. Es ist sehr stilistisch schön. Viele Einzug und Leerraum. Facebook ist nicht. Warum ist Facebook so viel schlimmer, als ich auf das Schreiben von HTML? Anscheinend. 

Richtig, das ist wie eine von fünf für Stil. Es gibt einen zwingenden Grund für sie, diese Ecken schneiden. In Ordnung, so dass sie nicht wollen, machen es einfacher für Sie, es zu lesen. Also in einem gewissen Sinne, sie sind Verschleiern es, Art kriechen, es zumindest ästhetisch so , dass es schwieriger für Myspace zu gehen und rip off ihre Homepage und das HTML für sie. Es stellt sich heraus, dass mit den Programmen obwohl, wie Chrom, wir können dies bis super einfach zu reinigen. So ist es nicht ganz so wie der Grund. Was könnte die Ursache sein. Ja. Ja, weißen Raum Kosten Daten. Was meinst du? Ja genau. Wenn Sie die TAB-Taste eine Menge oder der Hit Leertaste, prüfen die Auswirkungen. Also jeder Taste auf der Tastatur ist ein [Unverständlich], wie ein Byte dargestellt. 

So nehme an, dass Mark oder einen der Entwickler in diesen Tagen trifft die Leertaste nur einmal in dieser HTML-Seite, stellt die Homepage von Facebook. Und Facebook hat eine Menge der Nutzer in diesen Tagen. So nehme an, dass die Homepage von Facebook wird von einer Milliarde Menschen heute besucht. Und jemand bei Facebook hat die Leertaste nur einmal. 

So ein zusätzliches Byte, eine Milliarde Anfragen, wie viel mehr Daten Facebook Übertragen über das Internet weil jemand traf die Leertaste auf seine Tastatur? Eine Milliarde Byte oder ein Gigabyte Daten von Facebook-Server gesendet um Menschen auf der Welt ohne guten Grund. Nun, das ist nur ein Raum. 

Stellen Sie sich vor, wenn wir tatsächlich reinigen Sie diese Sache und eingerückt ist und das hinzugefügt eine Menge von Leerzeichen und Tabulatoren und Leerzeichen, Sie am Ende Ausgaben Gigabyte, wenn nicht terra Zeichen mehr Platz. Und so super in die gemeinsame wirklichen Welt der Web-Entwicklung ist es, Ihren Code minify. Und wir werden irgendwann zu sehen wie Sie dies tun. 

Aber heute werden wir das Schreiben von Code beginnen das ist von uns Menschen tatsächlich lesbar. Es stellt sich heraus, obwohl, wenn Sie zurück zu gehen zu diesem Werkzeug in Chrome Inspect Element, zuvor, waren wir auf der Registerkarte Netzwerk. Es stellt sich heraus, dass, wenn Sie unterwegs Elemente Registerkarte, was Sie tatsächlich sehen, wird Chrome ziemlich gedruckt Version derselben HTML. Also haben wir es deobfuscated. So ist es kein Spiel für einen Computer. Und jetzt können Sie wirklich Klicken Sie sich um und starten um die Hierarchie, die eine Web-Seite ist zu sehen. Also lassen Sie uns dies tatsächlich zu tun. Ich werde weitermachen und eröffnen auf meinem Mac ein Programm namens Text bearbeiten. Und erinnere, dass dies nur ein super einfachen Textprogramm. Windows verfügt über notepad.exe. Und ich werde Verbatim Geben Sie die folgende. Doc-Typ HTML, offene Bügel HTML, geschlossene Klammer HTML, wir haben den Kopf der Seite hier das Ende der Kopf der Seite hier ein Titel wird wie, hallo Welt sein. 

Und dann hier unten brauchen wir der Körper der Webseite. Koffer. Und dann hier, hallo Welt. Gut. So haben wir eine super schnelle Web-Seite geschrieben. Ich werde es als zu sparen hello.html auf meinem Desktop. Mein Mac gehen, sich zu beschweren, denken, dass, warten Sie eine Minute, Dies ist eine Textdatei, tun Sie es nennen .txt suchen? Aber nein, ich will dot HTML verwenden. 

Und dann, was ist schön, wenn ich doppelklicken Sie einfach auf die Datei, hello.html, hier ist meine Web-Seite. Leider bin ich der einzige Person in der Welt die diese Seite jetzt besuchen. Denn wo kommt es offenbar zu leben? Es ist auf meinem Mac, oder? Welches ist nutzlos. Wie niemand in diesem Raum geschweige denn im Internet kann tatsächlich besuchen die Seite. Also heute, müssen wir präsentieren ein weiteres Element. 

Und um dies zu tun, ich bin zu gehen gehen Sie vor und eröffnen Cloud 9. So Cloud 9 ist natürlich ein Cloud-basierte service-- CS50 IDE-- Das hat alle unsere Arbeitsbereiche Lauf irgendwo im Internet. Und das bedeutet, dass alle unsere Dateien sind bereits öffentlich zugänglich. Lassen Sie uns also gehen Sie voran und tun dies. Ich werde weitermachen und Erstellen einer neuen Datei NCS50IDE. Ich werde es nach wie vor zu sparen wie hello.html und klicken Sie auf Speichern. Und jetzt, nur um Zeit zu sparen, werde ich gehen Sie vor und kopieren Sie diesen Code und fügen anstatt geben Sie es erneut. Und speichern Sie es. Und jetzt habe ich ein Datei namens hello.html. Aber wie kann ich eigentlich öffnen Sie es als eine Webseite? Nun stellt sich heraus, die in den CS50 gebaut IDE ist nicht nur ein Compiler wie clang und einen Debugger wie GDB und Trauben von anderen Programmen, es gibt tatsächlich ein vollwertiges Web-Server innerhalb CS50 IDE ausgeführt. 

Alle von euch, das heißt, Ihren eigenen Web-Server. Und ein Web-Server ist nur ein Stück der Software, deren Zweck im Leben ist es, Web-Seiten bedienen. Um Anforderungen von Browsern zu hören und reagieren mit wenig virtuellen Umschläge innerhalb dessen das Inhalte, die ich geschrieben habe. Also das Web-Server tatsächlich kostenlos und Open Source. Wo Open Source bedeutet nur, Software, dass jemand anderes hat geschrieben, dass alle von uns tatsächlich sehen und downloaden und sogar ändern Sie den Quellcode. Und es heißt Apache. 

Und wir es ein wenig leichter gemacht habe Verwendung in CS50IDE indem er sie Apache 50. So dass es tatsächlich verstehen, die folgenden. Ich werde Apache 50 Anfang sagen. Und dann habe ich werde einfach dot sagen. Und wir einige etwas zu sehen obskuren Meldung Einstellen von Apache-Dokument [? Gruppe?] nach Hause, ubuntu, was immer das ist, Schrägstrich-Arbeitsbereich. Ab Webserver Apache 2 erfolgreich. 

So lange Geschichte kurz, ich habe gerade drückte einen Knopf und drehte sich auf einem Webserver, der jetzt Hören im Internet auf TCP-Port 80 an einer bestimmten Adresse. Und hier steht und Dies wird sich noch ändern auf Ihren Benutzernamen und andere Faktoren, aber beachten, wenn ich nun darauf klicken, IDE50 dot jharvard usw. und so fällt auf, dass die ganze Zeit In den vergangenen Wochen, haben Sie vielleicht aufgefallen, dass Sie Ihre eigenen Benutzernamen wird in der oberen rechten eingebettet Ecke CS50IDE. 

Und dass alle tatsächlich war dies Mal, wenn die Adresse, an der du kannst besuchen Sie alle Ihre Dateien über das Web. Bisher war es nicht von Bedeutung, weil in C, die Sie in der Regel Dinge in eine laufende möchten Terminal, nicht im Web. Aber heute, beginnen wir Schreiben von Web-basierten Code dass wir wollen, zugänglich zu öffentlichen URLs. Also, was ich zu gehen zu tun ist, klicken Sie auf diese URL. 

Und merke, dass ich ein ziemlich zu sehen ugly-Index, eine Verzeichnis-Liste, aber welche Datei heraus springt dich wohl? Hello.html. Das ist, weil ich gerettet die Datei in meinem Arbeitsbereich. Und das, was ich sagte dem Apache Web-Server im Arbeitsbereichsverzeichnis David zu suchen. Und lassen Sie jemand in der Welt sehen diese Dateien. 

Und in der Tat, wenn ich jetzt klicken Sie hello.html, Ich sehe in diesem Register genau diese Datei. Nun beachtet, Cloud 9 tut etwas ein wenig hilfreich für uns. Innerhalb CS50 IDE, bemerken es gibt plötzlich eine Adressleiste. Das liegt daran, obwohl wir mit Chrome, um CS50IDE besuchen, Innere CS50IDE ist seine eigene Version eines Web-Browsers im Augenblick. Und so statt die Dinge zu komplizieren als solche, Ich werde weitermachen und kopieren Sie einfach diese URL. Ich werde Sie vor und gehen Sie einfach öffne meine eigenen Chrome-Fenster. So gibt es keine Magie hier, keine CS50IDE. Ich werde einfach wörtlich zu fügen meine J Harvard URL und drücken Sie Enter. Und voila, jetzt bin, und in der Theorie, jeder über das Internet, wenn ich konfiguriert haben Berechtigungen entsprechend, Diese Datei können Sie besuchen. Und jetzt, wenn ich sagte, hello.html, voila, es ist mein unglaublich berauschend Webseite. Lassen Sie uns so tun, eine schnelle Plausibilitätsprüfung. Weil all das ist konzeptionellen Aufbau. Und wir haben eigentlich nicht wirklich Sie lernen, wie man zu schreiben HTML per se. Bisher noch Fragen auf, was gerade passiert? Ja. Hat CS50 besitzen diese Webseiten? In welchem ​​Sinn? Gute Frage. So CS50 ist besitzt CS50.io. Wir haben in der Tat, dass die Domain-Namen gekauft. Und von der Natur von euch Anmeldung in CS50IDE, Sie alle bekommen eine so genannte Sub-Domain. 

So IDE50-malan oder IDE50-Rob.CS50.io, das ist Ihre einzigartige Adresse im unsere Domain-Namen. Auch für die Zwecke des Kurses haben Sie Ihre eigene eindeutige Adresse. Aber wir haben die Dinge durch vereinfachte Kauf der Top Level Domain, CS50 dot I / O und dann alle anderen Innere daß sozusagen. Und wir werden darauf zurückkommen in ein paar Wochen, wahrscheinlich, insbesondere bei endgültigen Projekt Zeit, als einige von euch Vielleicht möchten Sie Ihren eigenen Domain-Namen zu erhalten. Es ist eigentlich relativ unkompliziert. Gut. Lassen Sie uns also jetzt tun. Ich werde wieder in gehen CS50IDE, wo meine Datei gerade jetzt, hello.html, ist gar nicht so interessant. Ich möchte etwas zu tun ein wenig schöner als das. Also werde ich, so etwas zu tun. Lassen Sie mich offen paragraphs.html. Das ist also eine Datei, die ich vorher geschrieben haben. An der Spitze davon, wie immer, haben wir Kommentare. Aber in HTML, Kommentare etwas anders aussehen. In Zeile drei und Linie 14, die Sie siehe Syntax starten einen Kommentar und am Ende einen Kommentar zu schreiben. 

Aber keiner von dem Zeug in zwischen Sachen funktional. Es ist nur eine Notiz an ein menschliche, was hier vor sich geht. Und ebenso wie eine schnelle geistige Gesundheit zu überprüfen, wenn ich nach unten scrollen, was ist der offensichtliche neue Tag, die wir eingeführt haben? Die bisher haben wir gesehen Tags offen sind Halterung HTML, Kopf, Titel und Körper. Aber was ist nun offensichtlich neu? 

Ja, so p. Die p-Tag oder Absatz-Tag. Und dann habe ich ausgeliehen nur einige Standard Lateinischen Text, meine Absätze bilden. Denn das, was ich wollte, zeigen, ist, wie Sie stellen Textabsätze in HTML. Und was fängt an zu passieren, hierbei ist, dass es bereits ein Muster der Entwicklung. Und lassen Sie mich gehen Sie vor und tun dies. Lassen Sie mich zunächst deaktivieren Apache. Und ich werde es sagen zu sich selbst zu starten wieder im Inneren des heutigen Quelle sieben m-Verzeichnis. So dass ich Zugang zu allem. 

Und jetzt, wenn ich wieder nach Dieses Verzeichnis-Liste, merke ich jede Datei von heute sehen. Und du wirst in der zu sehen nächste Problem Satz, werden wir Ihnen Anweisungen für genau dieses zu tun. Wenn ich öffnen paragraphs.html, könnte dies ebenso wie eine Programmiersprache zu suchen für Sie, wenn Sie nicht sprechen oder lesen Latin. Aber das ist nur drei Absätze Text, der in HTML gekennzeichnet sind. 

Und beachten Sie den Absatz Pausen zwischen ihnen. Denn es stellt sich heraus, und obwohl Sie könnte geneigt, dies zu tun ist, wohingegen in der realen Welt, wenn Sie in die Linie setzen möchten Pausen zwischen den Dingen, Sie vielleicht ganz einfach tun dies, und drücken Sie auf Speichern. Und jetzt, wenn ich neu zu laden Hier Ankündigung dass alles nur verwischt zusammen in nur einem Klecks Text. Da HTML ist eine Art stumme Sprache. 

Es soll so eingesetzt werden eine Möglichkeit, dass der Browser wird nur tun explizit, was Sie sagen, es zu tun. Also, wenn Sie nicht sagen, es gib mir einen neuen Absatz, du wirst doch nicht um einen neuen Absatz zu sehen. Und in der Tat, was die Browser tun wird ist, auch wenn Sie die Eingabetaste drücken, Lassen Sie uns immer und immer wieder sagen, wieder, bewegen Sie diesen Text so unten auf dem Bildschirm und speichern und dann neu zu laden, der Browser wird um all das Leerzeichen zusammenbrechen in nur einer einzigen, sichtbare Leerzeichen. Gut. Das ist also der Absatz-Tag. Und so was ist das Muster das ist hier die Entwicklung? Nun, es scheint der Fall zu sein, dass HTML ist alles über die Gründung eines Tag- und endet einen Tag. Und was ist ein Tag? Nun, es ist nur ein Stück von Syntax. Offene Halterung, ein Stichwort, geschlossene Bügel, ist ein Tag. Oder Start-Tag. Und dann, wenn Sie getan, die sich heraus, wie in man mit dem Absatz getan, können Sie dies tun, um gegenüber zu sprechen. Aber das Gegenteil ist nicht ganz nach hinten. 

Sie voran einfach der gleichen Tag- Namen mit einem Schrägstrich wie diese. Gut. Also nicht so spannend. Und in der Tat, wir sind nicht so dass die web alles, was noch interessanter. Was ist, wenn ich machen möchte Dinge größer und Fett? So stellt sich heraus, dass hier ein Beispiel in headings.html, wo in meinem Körper, Ich habe ein H1-Tag, H2, H3 bekamen, vier, fünf oder sechs, von denen alle scheinen ziemlich obskur. Aber wenn ich diese öffnen ZB lassen Sie uns einen Blick. Headings.html. 

So Browsern standardmäßig geben, können Sie Text das ist groß und Fett von unterschiedlichen Größen. H1 ist groß. H6 kleiner und dann alles dazwischen. Also das ist interessant, aber noch nicht wirklich die Bahn die ich kenne. Was, wenn wir wollen, habe ich so etwas wie eine Liste. . Also hier ist eine Liste mit Aufzählungszeichen von drei der Harvard Häuser. 

Wie haben Sie über das tun dies gehen? Nun, einen Blick auf list.html. Und hier sehen wir ein wenig von Funkiness aber laßt uns überlegen, was passiert. Also, was Sie gerade gesehen haben auf der Grundlage, UL steht für ungeordnete Liste. Ungeordnete Liste nur bedeutet, mit Aufzählungszeichen. Es gibt keine Zahlen. Es gibt auch so etwas wie eine geordnete Liste, die eine OL am Tag ist. Dann LI ist Listenelement alle es bedeutet. 

Und so ist es automatisch Zahlen alles für Sie. Aber noch einmal, alle meine Einbuchtung und Weißraum ist nur um meinetwillen. Der Browser ist nicht tatsächlich zu kümmern. Also auch wenn man nicht dies zu tun, nur um klar zu sein, Sie sollten nicht obwohl auch Der Browser wird noch in der Lage sein, es zu verstehen just fine. Ich schlage reload in meinem Browser, ich Klick reload und keine Veränderung geschieht weil der Browser noch tut genau das, was ich sage, es zu tun. 

Gut. Also das ist alles nur Text. Lassen Sie uns jetzt etwas tun, interessanter. Ich werde weitermachen und leihen einige dieser HTML. Ich werde weitermachen und Erstellen einer neuen Datei hier. Und wir werden diese rick.html nennen. Wir haben überproportional gebrauchte etwas genannt rick Rolle in diesem Klasse in diesem Jahr, ich weiß es nicht, es ist einfach passiert organisch. 

Und jetzt ist es außer Kontrolle geraten. Also ich bin gerade dabei, mit ihm zu gehen. Und wenn ich zu Google Bilder und Rick Astley. Wenn Sie nicht wissen, warum wir tun, Diese, nur lesen Sie auf Wikipedia. Jedes Mal, wenn Sie auf den Link geklickt haben, jemand gelacht irgendwo. Und lassen Sie mich ahead-- dorthin zu gehen wir gehen, ist der Ansicht dieses Bild lassen. 

Hier haben wir also ein Bild in Google Images. Und lassen Sie uns annehmen, dass dies vernünftigerweise überall im Internet. Also werde ich davon ausgehen, es ist OK für mich um tatsächlich legte dieses in meiner Web-Seite. Ich werde weitermachen und kopieren Sie Bild-URL. Und jetzt, wenn ich wieder nach Wolken 9, mal sehen, was ich hier tun. So, hier ist nur eine Web-Seite. Das ist Rick Astley, haha, Ich werde jetzt zurück Zu meinen Browser neu laden, und interessant. 

Wo ist Rick? Also lassen Sie mich sehen, was passiert ist. Eigentlich bin ich zu gehen so tun, wie ich nicht tun. [Unverständlich] setzte ihn in hier. Wir werden in einem Moment zurückkommen. Also hier ist rick.html. Also das ist nicht Rick Astley. So stellt sich heraus wir können tatsächlich ihn hier hinzufügen. Das ist Rick Astley. Ich werde sagen, gib mir ein Bild, dessen Quelle ist die URL Ich habe gerade kopiert, die anscheinend ist ein glückliches Geburtstag etwas oder anderen. 

Und jetzt bin ich zu gehen schließen Sie den Tag wie diesem. Also das ist Einwickeln super lange. Aber feststellen, dass alles, was ich habe getan Bild offene Klammer, Quelle mit einem Attribut von diesem. Und es ist eine wirklich lange URL. Und ganz am Ende, merkt das. Warum habe ich getan Strich Winkelhalter statt, wie jeder andere Tag, mit einer offenen Klammer, IMG, geschlossene Klammer? Nehmen Sie einfach eine Vermutung, auch wenn Sie keine Vertrautheit auch immer mit HTML vor. 

So ist es, wie es geschlossen wird der Befehl, aber warum ist es nicht wirklich machen intuitive Sinn, etwas ein wenig mehr zu tun Ausführlich wie enge Bild? Ja. Ja. Nur semantisch, es gibt keinen Sinn für Starten eines Bildes und endend ein Bild, es ist entweder da oder ist es nicht. So ist es nicht sinnvoll ist, um eine Lücke zu lassen für alles andere innerhalb eines Bildes. Sie können einfach nicht tun. Und so ist die Syntax würde in der Regel nur sein, um den Schrägstrich im Inneren zu tun der Open-Tag oder dem Start-Tag und dann drücken Sie auf Speichern. 

Also, wenn ich jetzt diese Datei neu zu laden, jetzt Ich habe einen guten Web-Seite kochen hier. Und wir konnten sicher wirklich ärgern Menschen durch die Einbettung statt wie ein YouTube-Link. Und in der Tat zu jeder Zeit Sie überhaupt auf YouTube gegangen, und lassen Sie mich tatsächlich versehentlich rick rolle mich hier. So Rick Roll. So rick Roll-- Ich werde hier. 

[Musikwiedergabe] 

OK, mochte eine Person, dass. So bemerken die ganze Zeit, wenn Sie klicken Sie auf den Link weiterleiten, können Sie selbstverständlich Holen Sie sich die URL, die Sie tatsächlich in E-Mail oder einer forensischen Bild einbetten oder zu einem Problem eingestellt oder in einer Diashow. Und jetzt, wenn ich statt klicken Sie einbetten, feststellen, dass die ganze Zeit, dieses Zeug hat es. Ich werde weitermachen und kopieren Sie diese. 

Und nur damit können wir es besser zu sehen, bin ich werde es in meinem Text-Editor einfügen. Beachten Sie, dass das, was YouTube hat Ihnen erzählt. Jedes Mal, wenn Sie besuchen ein YouTube-Video, wenn Sie will das Video auf Ihren einbetten Web-Seite, einfach packen das. Das ist also ein weiterer HTML-Tag genannt iframe. Oder in Linienrahmen. So ist es auch, es sieht ein wenig mehr komplexer als alle anderen. So stellt sich heraus, dass das Bild, Tag und anscheinend das iframe-Tag nehmen, was sind als Attribute bezeichnet. 

Und dies ist ein anderer Stück Syntax in HTML. Zusätzlich zu dem Tag- Name, offene Klammer Tag-Namen, können Sie das Verhalten der Variablen kontrollieren indem er eine ganze Reihe von Attribut gleich Wert. Attributwert entspricht. Und so zum Beispiel YouTube sagt uns, wenn Sie die Breite des Videos möchte 420 Pixel und die Höhe werden bis 315 Pixel groß sein, das ist, wie Sie es ausdrücken in HTML. 

Die Quelle des Video wird so lange YouTube URL und noch einige andere Sachen wie Rahmengrenze gleich Null ist, so dass wahrscheinlich bedeutet, dass es kein Rahmen um die Sache. Lassen Sie wahrscheinlich Vollbild bedeutet, dass der Benutzer kann auf eine Schaltfläche klicken und tatsächlich Vollbild-Video. Also, wenn ich sein wollen wirklich beeindruckende hier in Rick dot HTML, anstatt die Image-Tag, lassen mich zu löschen, dass anstelle fügen Sie diesen. Und jetzt neu zu laden. Und jetzt gehen wir wieder. Na gut, das ist genug. Na gut, so werde ich versuchen, schwer, nicht wieder zu tun. Also, was sind einige der Imbissbuden hier? So HTML, so hässlich wie diesen Webseiten sind, ist eigentlich recht einfach. Es ist nicht eine Programmiersprache. Es hat nicht funktioniert. Es muss nicht Schleifen. Es muss nicht Bedingungen. Alles, was es hat, ist Dutzende von verschiedenen Tags, von denen jeder hat null oder mehrere Attribute. Und in der Tat, was ist der Spaß zu HTML, wie Sie, um in zu tauchen beginnen ist, dass es sehr selbstlernfähig. 

Alles was es braucht ist ein Verständnis des allgemeinen Rahmens der HTML. Was ist ein Tag, was ist ein Attribut, wie wollen Sie eigentlich konfigurieren Sie eine Web-Seite folgendermaßen. Und alles andere ist wirklich das Ergebnis der Blick nach oben in einer Online-Referenz oder googeln, wie einige tun Technik oder wie wir gesehen haben, Blick in die Facebook-Source- Code, mit Blick auf eine Website dass Sie es mögen ist Quellcode und zu verstehen, wie die Entwickler es tatsächlich gelegt Dinge aus. 

Also haben wir Bilder als auch tun können. Und in der Tat, wir haben es vorhin. Lassen Sie mich gehen Sie vor und nur zeigen Ihnen. Hier ist ein Beispielcode. Wenn Sie schon immer einmal grumpy cat sehen. So bemerken, dass ich kann, habe hier ein Bild-Tag. Und ich habe einen Kommentar über es. Ich habe eine Alternative bekommen Text für die Barrierefreiheit. Also jemand, der mit einem Bildschirm Leser aus Gründen der Sicht kann tatsächlich dann ihre Bildschirmleser sagen grumpy cat. Denn wenn sie es nicht können siehe das Bild, sie zumindest haben ihre Computer ihnen sagen, mündlich, was es ist. Und die Quelle dieser Datei ist cat.jpeg. So in der Tat, wenn ich wirklich wollte, bekommen clever, was ich konnte done-- Ich verspreche, nicht zu Rick Astley zu gehen, so Ich werde für eine Katze statt google. Und wenn ich zu Google Images hier, und wir gehen davon aus, dass dies ist ein Bild von meiner Katze. 

Nehmen wir an, dass ich die Kontrolle geklickt oder rechts angeklickt dies versehentlich gruselig. Und cat.jpeg Ich werde auf meinem Desktop zu speichern. Lassen Sie mich nun zurück zu Cloud 9. Feststellen, dass hier, kann ich gehen Sie zu lokalen Dateien hochladen. Und wenn ich zu greifen diese Datei cat.jpeg, Ankündigung dass ich es per Drag & Drop in Cloud 9 und es geht um mich hier zu schreien. 

Da wir bereits haben gegeben Ihnen einen cat.jpeg-Datei, aber es ist super einfach zu schnappen Sie ein Foto, das Sie haben, von Facebook übernommen oder Flickr oder dergleichen und tatsächlich per Drag & Drop in Cloud 9 und dann machen es Teil Ihrer eigenen persönlichen Website oder Problem set sieben oder acht, wie wir bald sehen werden. Und dann, wenn Sie Schließlich besuchen Sie die Katze, unter der Annahme, die ich heruntergeladen habe, dass dieselbe Katze, Hinweis dass-- das war entzückend. 

Was würden Sie sehen, ist, so etwas wie dieses Gesicht hier. Also die Dateien, die Sie Referenz im Web-Seite kann entweder lokal im eigenen sein Konto oder remote auf einem anderen Server wie im Fall des Rick Astley Foto ein wenig vor. Also, wo, was else-- sonst können wir hier tun? Werfen wir also einen Blick auf die folgenden. Sie wissen, was irgendwie cool? 

Damit haben wir bisher machen sehr statische Web-Seiten. Ich möchte etwas aufzupeppen wie folgt. Ich möchte meine eigene Suchmaschine zu machen. Also, eine Suchmaschine zu machen, lassen Sie uns gehen Sie vor und beginnen, dies zu tun. Ich werde weitermachen und erstellen eine neue Datei namens search.html. Und wir haben Versionen online prefabed. Whoops. Nicht in Ihrem Terminal-Fenster einfügen. Prefab-Versionen online. Und ich werde wie folgt starten. Also hier ist der Anfang eine Datei namens search.html. Ich werde es in sparen heutigen Quellverzeichnis. Ich werde diese Suche aufzurufen. Eigentlich werden wir es besser machen. CS50 suchen und tatsächlich Marke es. Und jetzt werde ich sagen, so etwas wie H1 CS50 suchen. Und dann hier unten, H2 in Kürze. Und nur zur Erinnerung, H1 und H2 bedeuten, was jeweils? 

Ja, so groß und Fett, und nicht so groß, aber immer noch fett. Also, wenn ich diese speichern und hier, mal sehen, die Datei search.html. In Ordnung, und dieses ist right-- [unverständlich]. Stehen zu. David ist verwirrt. Oh, es ist recht. David ist ein Idiot. OK. Also da ist es. So CS50 Suche in Kürze. So, jetzt lassen Sie uns zu synthetisieren was wir getan haben in der vergangenen Woche. 

Wo wir über die gesprochen untere Ebene Mechanik des HTTP. Und diese neuen Ideen von HTML, das nur Dieses Markup-Sprache in dem Sie Weiters Browser genau was zu tun und Umsetzung unserer eigenen Suchmaschine. Also anstatt nur sagen, kommt bald, ich bin gehen zu präsentieren, so etwas wie ein Form-Tag. Und in dieser Form, ich bin zu gehen so etwas wie einem Eingabefeld. 

Und der Name dieses Eingangs Feld, werde ich es nennen Q. Und der Typ dieses Eingabefeld Ich werde sagen, ist nur "Text". Und ein Textfeld, wie wir zu sehen, ist nur ein Textfeld. Und so ist es nicht hier spüren zu müssen nichts in der es an dieser Stelle. Und so bin ich einfach gehen um den Tag mit, dass in der Nähe Schrägstrich mitten im Tag selbst. Und dann bin ich los haben einen anderen Eingang. Eingangstyp entspricht einreichen. Und dann bin ich los schließen diese auch. 

Und jetzt werde ich hier wieder zurück. Und schon sehen wir, wenn auch ziemlich hässlich, ich habe bekam die Anfänge meine eigene Suchseite hier. In der Tat, lassen Sie mich, um zu versuchen Reinigen Sie diese ein wenig. Es stellt sich heraus, daß an den Hier Eingangs, ich kann ein weiteres Attribut namens Platzhalter. Und ich könnte so etwas wie Keywords sehen oder genauer gesagt, Abfrage für q. 

Und beachten Sie, jetzt habe ich diese Art von grauem Text dass verschwindet, sobald ich beginnen Sie zu schreiben, aber es ist wahrscheinlich etwas, Sie in anderen Webseiten gesehen habe. Ich weiß nicht wirklich wie die Schaltfläche Absenden. Also ich bin eigentlich los, um das zu geben Submit-Button einen Wert von Suche. Und jetzt, wenn ich neu zu laden, feststellen, dass meine Taste wird mit dem Namen suchen. Wissen Sie, ich weiß nicht wirklich wie das Logo hier. Also Google Font-Generator. 

Ich möchte dies weiter oben zu würzen. So CS50 Suche. Lassen Sie mich meine eigenen Logo zu erstellen. Das sieht nett aus. So, jetzt lassen Sie mich zu retten diese as-- aufleuchtet. Wo ist es? Dort. OK. Es verpasst. Speichern als. Dumm Browsern. Stand by, sind wir zu gehen dieses Problem beheben ein für alle Mal. Da gehen wir. Gut. Es tut uns leid. Off Tag. Nun ist dies flippig. Vollbildmodus beenden. Gut. 

Jetzt, wie eine normale Person, Bild speichern unter. Logo.gif. Jetzt werde ich in CS50IDE und gehen Ich werde einfach der Logo, Ich werde sie in ziehen meine Quelle sieben Verzeichnis Datei bereits vorhanden ist, Ich bin OK mit, dass. Also werde ich, um es zu überschreiben denn ich hatte es schon. Und nun, wie kann ich loswerden das? 

Lassen Sie uns gehen Sie hier und tun Bildquelle gleich logo.gif. Schließen Sie diese. Sparen. Und jetzt, wenn ich zurück zu meiner Suche Seite, jetzt ist es ziemlich gut. Alles klar, also hat es nicht recht, etwas Sinnvolles getan. In der Tat, lassen Sie mich versuchen Suche für eine Katze und sehen was passiert. Katzen. Verdammt. Es ist nicht nur arbeiten, anscheinend. Also, was ist der Schlüssel Stück das ist hier fehlt? 

Richtig, auch wenn Sie keine HTML-Kenntnisse, Ich habe angefangen Kennzeichnung zum Telefon Form und ich habe es gesagt, wie Eingänge zu erhalten, gib mir ein Textfeld und eine Schaltfläche einreichen, welche Stück offenbar fehlt? Angenommen, wir wollen wirklich erhalten dieses Ding richtig funktioniert. Was müssen wir tun? Wir haben das Bedürfnis, das Backend zu implementieren Datenbank oder die Suchmaschine selbst, und das wird ein nehmen ganze Menge Zeit, ehrlich gesagt. 

Also denken Sie daran, was wir das letzte Mal. Also, wenn Sie nach etwas auf Google-Suche und Sie haben im Vorfeld ausgeschaltet, Recall, Instant Suche. Also lassen Sie mich dies ausschalten so dass diese tatsächlich verhält sich wie eine ältere Schule Browser, wenn ich jetzt so etwas wie Katzen zu suchen, daran erinnern, was die URL aussieht. Es ist ziemlich kryptisch. Aber es eingebettet ist, Rückruf ist Strich Suche. Fragezeichen q gleich Katzen. 

Und das scheint mir zu geben eine ganze Reihe von Suchergebnissen. Damit Sie wissen, was ich jetzt tun? Ich werde leihen Google nur für eine Minute. Ich werde gehen über hier und ich werde sagen, dass dies bildet Handlung oder Ziel, so zu sprechen, wörtlich Google sein. Und die Methode, die ich wollte, zum Einsatz sein wird, zu erhalten. 

Also, was ist Handeln? Aktion ist seltsam benannten, aber das bedeutet nur, wer wird zu handhaben die Wirkung dieser Form? Wenn ich auf Suche, in dem sollte das Ergebnis gehen? Und wenn ich jetzt wieder zu meiner Form hier und laden Sie meine Web-Seite Und nun zu etwas zu suchen wie Hund, bemerken jetzt Ich habe wieder implementiert Google. Recht? 

Wenn ich will, um für etwas zu suchen sonst funktioniert es nicht nur für Hunde, Es funktioniert auch für Katzen. Es funktioniert auch für CS50. Und OK, das ist nur unter überwältigend, ist es nicht? In Ordnung, aber es funktioniert tatsächlich. Also, was ist eigentlich los ist? So habe ich in meinem Browser gelehrt, mit HTML, auf eine Eingabe von dem Benutzer ergreifen und tatsächlich zu senden, dass die Eingabe zu einem Remote-Server über HTTP. 

Und weil mein Browser versteht HTTP, es tatsächlich konstruieren die URL, so dass das, was Ich am Ende mehr als in meinem Browser, feststellen, was passiert, wenn ich nach Hund. Wenn ich Sie auf Suche bemerken, dass die URL ändert, wie ich gedacht um google.com/search~~V Abfrage gleich Hund. Und das ist, weil der Form weiß, da das Verfahren zu bekommen, einfach hängen Sie ihn an dieser URL gibt. 

Nun sind diese Web-Seiten immer noch hässlich. Lassen Sie uns also vorstellen einen anderen Stück Syntax, wenn wir können heute. Und das ist etwas bekannter wie Cascading Style Sheets. Lassen Sie mich einen Blick auf Dieses Beispiel hier und sehen, wenn wir folgern, was los ist. Dies ist CSS0.html. Und das ist, wo die Dinge ein wenig hässlich. Denn leider, in der Welt des Internets, HTML allein kann nicht alles tun. Und so, wenn Sie wollen stilisieren Ihre Web-Seite, Sie tatsächlich benötigen, um auf die zu konzentrieren Ästhetik in einer anderen Weise. Also hier habe ich den Körper von meiner Web- Seite, innerhalb dessen ein großer div. Und ein div bedeutet nur, Division. Also ist es wie ein Absatz, aber es nicht die gleiche Semantik aufweisen eines Textabsatz. 

Dies bedeutet nur, um die Browser, hier kommt ein großer rechteckiger Bereich meiner Web- Seite, ich will es speziell zu behandeln. Jetzt ist die Linie 21, wo das div beginnt. Und nehmen Sie nur eine Vermutung. Was ist die Wirkung der Linie 21 auf der Rest des Inhalts der Seite? Zentrierung. Das ist alles. So haben wir einen Weg der nicht gesehen tatsächlich Zentrierung des Textes. 

In der Tat, meine Suchmaschine, im Gegensatz zu der tatsächlichen Google, wurde ganz nach links gerechtfertigt. Und nun in Zeile 21, werde ich sagen, hey Browser, erstellen Sie eine Aufteilung der Seite. Geben Sie mir einen großen, unsichtbaren Rechteck. Das ist, wie ich will denken über die Web-Seite. Und dann zu stilisieren es wie folgt. Innerhalb dieser Zitate, Jetzt, eine zweite Sprache dass wir heute vorgestellt genannt Cascading Style Sheets. Gott sei Dank, auch ist es nicht eine Programmiersprache, so ist es sehr in ihrer Syntax beschränkt, sondern auch in seiner Funktion sehr begrenzte wohin HTML ist alles über Markieren Sie die Daten von einer Webseite und die Struktur einer Webseite. CSS ist im allgemeinen etwa das letzte Meile, die Ästhetik, immer die Größe und die Farbe und die Platzierung genau richtig in eine Web-Seite. Und in der Tat, sie ausgebildet ist mit den wichtigsten Wert-Paaren. 

Eine Eigenschaft wie dieser, Text auszurichten, gefolgt von einem Doppelpunkt, gefolgt von dem Wert, dass Eigentum, das ist in diesem Fall entfernt. Und jetzt stellen Sie fest, nisten können diese Dinge. Wenn ich wollte, dass alles, was in Ich habe hervorgehoben, um zentriert werden, das ist, warum ich habe Leitung 21 und die entsprechende Zeile 31. Aber nehmen wir wollen nun John sagen Harvard, herzlich willkommen auf meiner Homepage. 

Copyright-Symbol John Harvard. Und wenn ich die erste von diese Linien zu sein ziemlich groß. 36 Pixel. Also das ist eine anständige Größe. Und ich wollte sein Gewicht, kühn zu sein. Aber dann darunter, Ich möchte kleineren Text. Und darunter, ich will noch kleiner Text. Es tut uns leid. Heute fühlt sich an wie einen freien Tag. 

So, jetzt, was mache ich, dies zum Ausdruck bringen? Hier auf der Leitung 22 ist ein Embedded- div oder verschachtelte div, wenn man so will. Auch er hat seinen eigenen Stil-Tag. Ich geben Sie eine Schriftgröße von 36. Ich eine Schriftstärke der mutigen angeben. Hier unten, habe ich nur geben 24 Pixel. Und schließlich, in der Leitung 28, I 12 angeben. Also nur als eine schnelle Plausibilitätsprüfung und als Mensch liest, die Wörter auf dem Bildschirm sind eigentlich vor sich geht, kühn zu sein? Welche Linien sind tatsächlich Fett? 

Nur John Harvard. Recht? Denn ebenso wie die Leitung 22 sagt, hey Browser, hier ist ein Unternehmensbereich der Seite. Machen Sie es Schriftgröße 36 Punkt. Machen Sie den Schriftschnitt fett. Sobald Sie erreichen die entsprechendes End-Tag oder geschlossenen Tag auf der Leitung 24, das bedeutet, hey-Browser, aufhören, was es ist, Sie tun. Und Mitteilung an klar sein, auch wenn Linie 22 hat all diese Attribute wie Stil, wenn Sie schließen Sie den Tag in der Leitung 24, Sie nur zu erwähnen den Namen des Tags. 

Sie müssen nicht das Wort Stil wiederholen oder alles, was im Inneren dieser Zitate ist. Und so, wenn ich mir das jetzt in meinem Browser, lassen Sie uns einen Blick auf das Endergebnis. Lass mich gehen vor, um diese Datei, die CSS 0 ist. Und es ist immer noch ziemlich einfach, aber immer ziemlich interessant. Aber es stellt sich heraus, es gibt andere Dinge, die ich hier tun, und auf die Gefahr der Herstellung von Dieses komplett scheußlich, bemerken hier, dass in meinem Körper meiner Web-Seite, Ich kann etwas lustiges zu tun wie bg oder Hintergrundfarbe. 

Und schnell, was ist deine Lieblingsfarbe? Grüne Ich hörte. Gut. So, jetzt, wenn ich getroffen reload jetzt, wir haben eine grüne Web-Seite. In Ordnung, das ist also nicht schlecht. Und jetzt, wenn ich will, dies zu machen, wirklich cool, kann ich die Farbe meines Textes zu machen sogar rot. Also mal sehen, wie das aussieht. Jetzt ist es sieht ziemlich gut. Und hier unten, wenn Sie wirklich zu verwirren wollen mit jemandem oder wenn Sie wollen einer jener Menschen, die versucht, Sie zum Besuch einer Web-Trick Seite, weil sie Google ausgetrickst haben zu denken, es gibt eine ganze Reihe Schlagwort like-- mal sehen, neu zu laden. Wo ist es hin? Und da es uns. Gut. Also sage ich so nebenbei, wir sprechen über diese Dinge in ein paar Wochen wenn wir reden Sicherheit, wenn Sie tatsächlich einbetten ganze Trauben von Keywords in einer Web-Seite, auch wenn sie nicht sichtbar ein Mensch, jemand wie Google, natürlich, noch tatsächlich finden diese. Na gut, so dass es ziemlich abscheulichen ziemlich schnell. 

Und in der Tat, es ist nicht alles dass viel anders als meine eigene Web- Seite als Student, die Ich begann googeln um zu finden früheren Versionen von meinem alten Webseiten. Es war ziemlich schlecht. In der Tat, ich finde, eine kurz vor der Klasse. Aber es ist noch schlechter da draußen. Dies war offenbar meine Heim Rückkehr im Jahr 1996. Anscheinend Ich dachte, es war angebracht, die Leute fragen, ihren Namen bevor sie tatsächlich sehen, meine Web-Seite. 

Und dann zeigte ich ihnen etwas dumm, wahrscheinlich. Ich werde graben, bis mehr für die nächste Zeit. Aber jetzt lasst uns Sehen Sie sich ein bisschen Design. Wir haben darüber gesprochen Stil. Und diese Seite so weit und die meisten alles, was ich geschrieben habe ist ziemlich sauber stilistisch. Aber was ist Design? Nun, es gibt eine Menge von Redundanz in dem, was ich hier tue. 

Ich habe das Wort erwähnt Farbe in ein paar Plätze. Ich habe Schriftgröße erwähnt in ein paar Orte und fett in ein paar Plätze. Und im Grunde bin ich Co Vermischung zwei Sprachen. Ich habe mit meinem HTML-Tags und bekam meine Attribute und dann ganz plötzlich, in Anführungszeichen, ich habe die zweite Sprache heute genannt CSS, die wiederum, ist nur diese Schlüssel-Wert-Paare oder diese Eigenschaften durch Doppelpunkte getrennt. 

Es stellt sich heraus, dass ein Groß wie in C, wo wir können Sie beginnen, aus Faktor einige Code in Header-Dateien, so dass wir das Gleiche tun in HTML. Und einen Schritt, auf das, ist wie folgt. Beachten Sie, dass diese Version ist CSS1.html strukturell genau die gleiche Web-Seite. Also habe ich eine ganze Reihe bekam der divs, aber dieses Mal, ich habe losgeworden der Umhüllung div wie Sie sehen werden. 

Und ich habe diese drei divs gegeben oberen, mittleren und unteren, eindeutige IDs. Das ist schön, denn durch geben diese Divisionen der Seite eindeutige Kennungen, Ich kann sie an anderer Stelle verweisen. Wo? Nun, lassen Sie mich nach oben. Und so weit, zu jeder Zeit haben wir sah an der Spitze von einer Web-Seite, was ist der einzige Tag wir hatten der Kopf einer Web-Seite? Ein wenig lauter. Nur der Titel so weit. Aber es stellt sich heraus, es gibt ein paar andere Dinge Sie in es gesetzt ist, eine der was es heißt ein Stil-Tag. Also vor einem Augenblick haben wir uns bei einem style-Attribut. Stellt sich heraus, es ist ein Stil-Tags. Es gehört Innenseite der Kopf einer Webseite. Und nun merken, was ich tue. Ich habe innerhalb dieses Stil-Tags die folgende. Ich bin buchstäblich erwähnens in Zeile 20 der Name eines TAG, das möchte ich zu stilisieren. 

Dann habe ich offene geschweifte Klammer und geschlossene geschweifte Klammer. Also im Geiste gleich C, aber Auch dies ist keine Funktion ist, das ist nur eine syntaktische Detail. Und dann natürlich, ich sage der Browser, hey-Browser, machen den ganzen Körper auf der Seite eine Textausrichtung von der Mitte. Und dann dieser sagt das Folgende. Hey-Browser, wenn Sie eine HTML zu sehen Element oder Tag in die Seite, hat eine eindeutige Kennung von oben, so dass die Raute hier bedeutet nur, einzigartige Idee der Spitze, voran gehen und stellen ihre Schriftgröße 36 und seine Schriftstärke fett. 

Hey-Browser, ein Element, dessen ID ist Mitte, machen es 24 Pixel. Und hey-Browser, wenn Sie sehen, ein Vorstellung von unten, machen es 12 Pixel. Der Effekt am Ende ist genau das sam. Wenn ich in CSS 1 zu gehen, die Seite gleich aussieht. Aber wir sind ein Schritt in Richtung ein etwas besseres Design. Lassen Sie mich nun hier zurück zu CSS2 und sehen, was ich getan habe. 

Nun ist die Seite ist wirklich sehr, sehr sauber. In der Tat kann ich alle passen der Inhalt auf einer Seite hier. Aber welche neuen Tag Ich habe eingeführt, natürlich? Link. Und es ist nicht der beste Name für einen Tag, denn es ist nicht ein Glied in dem Sinne, dass wir es kennen, aber das bedeutet, ein Link auf eine andere Datei. Das ist eine Art, wie scharf sind in C. 

Dies ist der Weg in HTML hey Browser zu sagen, gehen Sie die Inhalte Die Datei mit dem Namen css2.css. Das Verhältnis, zu mir, ist, dass es ein Stylesheet. Und in der Tat ist das, was den einen der S in Cascading Style Sheets Mittel. Dies ist ein Stylesheet. Es ist nur die Textdatei, eine ganze Reihe von Immobilien. Es ist eine ganze Reihe von Arten , dass Sie auf eine Seite anwenden möchten. 

Und so ist offenbar Bezugnahme auf eine zweite Datei. Und wenn ich öffnen Sie diese, CSS2.css, feststellen, dass alles, was ich getan habe, ist Kopieren Sie alle dies in dieser Datei. Und jetzt, auch wenn Sie noch nie habe codiert dieses Zeug vor, nur als mit dem sprichwörtlichen Hut Technik auf, warum ist dies ein besseres Design wohl? Unter Ausklammerung dieser CSS-Eigenschaften, setzen sie in ihrer eigenen Datei. Auch wenn wir dies lösen Vor Problem wie 5 Minuten in der ersten Version. 

Wir haben nicht verbessert die Seite stilistisch, dies ist nur besser Design in einem gewissen Sinn. Warum meinst du? Ja. Flexibler, wie? Ja. Also, wenn Sie gehen wollen Rücken und die Dinge ändern, Jetzt, an einem Ort haben Sie wo Sie die Dinge zu ändern. Und in der Tat etwas wie Problem stellte sieben, wo wir eine Umsetzung Aktien den Handel Website, das wird eine haben ganze Reihe von Seiten. Und es wäre wirklich ärgerlich, wenn Sie sich entscheiden, hm, Ich weiß nicht wirklich wie 24 Pixel, ich will es 28 Pixel oder etwas größer sein. Und dann müssen Sie ein zu tun global suchen und ersetzen oder alle Dateien Ihrer Website öffnen einfach auf einen Wert tatsächlich zu ändern. Durch Ausklammerung diese Stile in einem zentralen Ort, Sie können jetzt eine Textdatei zu öffnen in CS50IDE in jedes Programm, ändern, speichern und fertig. Sie haben solche propagiert Veränderungen überall. Und daß die gleiche sein würde in einem Punkt h-Datei als auch. Also Fragen so weit über diese Syntax? Na gut, also haben wir alles getan, was es scheint, Ausnahme tatsächlich umzusetzen Hyperlinks. Und so lassen Sie uns fortfahren und tun dies. Lassen Sie mich gehen Sie vor und Erstellen einer neuen Datei hier. Ich werde es nennen link.html, in der heutigen Code zu setzen. 

Und ich werde offen zu tun, Halterung doc-Typ html. Nebenbei bemerkt, diese Sache auf die top, diese doc Typ-Deklaration, es ist das einzige, das ist seltsam mit dem Ausrufezeichen. Sie müssen nur, um es dort zu tun und es bedeutet, dass wir mit Hilfe von HTML-Version 5. Ältere Versionen von Sprache hatten viel länger Zeichenfolgen, die Sie benötigt, um dort setzen. So, hier ist ein Beispiel nannte Link. 

Ich brauche einen Körper aus meiner Web-Seite hier. Und hier, ein href equals sagen wir HTTP://www.disney.com und meine Lieblings-Website, werden wir sagen. Na gut, so eine sehr harmlose, benutzerfreundliche Seite. Wenn ich nun in meinem Verzeichnis gehen Listing hier und eröffnen link.html, Wir haben Hypertext. 

Und in der Tat ist dies, wo das H in HTTP kommt. Hypertext Transfer Protocol ist zum Übertragen von Text das hat Hyperlinks zu anderen Ressourcen. Und in der Tat, hier ist die vertraute, wenn retro, blauen Link, wenn angeklickt, tatsächlich führen mich zu Disney.com. Nun, oh, das ist bald heraus. Also gut, jetzt, was sind einige der Auswirkungen der das? 

Und ehrlich gesagt, beginnt die Welt ein wenig mehr vertraut machen und auch ein wenig gruseliger sondern auch ein wenig selbstverteidigungs sobald Sie beginnen diese Dinge zu verstehen. Weil Chancen sind, einige von Ihnen, wenn Sie gehen, durch Ihre Google Mail Spam-Ordner oder sogar Ihren Posteingang, wahrscheinlich haben Sie bekommen eine Art von E-Mail- daß bittet Sie ändern Ihre Kennwort vielleicht oder vielleicht überprüfen Ihrem PayPal-Berechtigungsnachweise oder Dingsbums. 

Und in der Tat, die Sie erhalten haben könnte etwas, das wie, klicken Sie hier sagt, mit Ihrem PayPal-Passwort zurückzusetzen. Und nun feststellen, ob dies ist nicht Disney.com aber wie badplace.com und neu zu laden, beachten Sie, dass der Text hier könnte irgend etwas zu sagen. Und in der Tat ist dies nur Worte. Warum kann ich nicht wirklich Super bösartig sein und sagen, http://www.paypal.com. 

Klicken Sie hier, setzen Sie Ihr PayPal Passwort und jetzt neu zu laden. Das sieht ziemlich legitim, nicht wahr? Ich meine, ich würde nicht klicken Sie auf eine E-Mail, die gerade das sagt. Aber beachten Sie die Dichotomie hier. Er sagt www.paypal.com, und in der Tat, warten Sie eine Minute, wir wissen, dass Sie wollen, die s für die Sicherheit. So, jetzt gehen Sie zu www.paypal.com HTTPS, aber wenn Sie noch nie getan habe, bevor, Sie in die Gewohnheit, zu erhalten schwebt über kleine Links. Und es ist schwer zu sehen, dort dem Bildschirm, und es ist gar nicht so einfach hier. Aber hier hinunter in die winzig kleine Ecke funktioniert der Browser tatsächlich Ihnen sagen, dass wir gehen, statt Paypal.com badplace.com. Nun, wohin gehen wir damit um? Alle Beispiele haben wir heute getan, wir haben hart codiert und aus manuell eingegeben. Das Web ist unglaublich uninteressant, wenn man hart codieren Ihre Web-Seiten, so dass die Inhalte statisch ist und sich nie ändern. Selbstverständlich sind alle unsere Lieblings-Websites heute, ob es sich um Google Mail oder Twitter oder Book oder eine beliebige Anzahl anderer sind dynamisch. Sie verändern in Reaktion auf Benutzereingaben genau wie die Google-Suchergebnissen. 

Und so am Mittwoch, was wir tun, verlassen wir HTML und CSS Einführung hinter uns und wir nehmen für, dass wir selbstverständlich jetzt wissen und wir präsentieren eine neue Programmiersprache genannt PHP, die wie C, wird uns geben, die Macht, tatsächlich Programme zu erstellen dass selbst Ausgabe generiert. In diesem Fall werden wir mit PHP dynamisch zu generieren Web- Seiten mit dieser neuen Sprache. Also mehr dazu am Mittwoch. Bis dann. 

[Musikwiedergabe]