Willkommen zurück.
Lassen Sie uns unsere erste Website erstellen.
Jetzt habe ich bereits einen Ordner namens Webserver erstellt, da dies vorerst unser Webserver sein
wird, und innerhalb dieses Webservers haben wir eine Index-HTML-Datei, die die Erweiterung zum Erstellen einer HTML-Datei
ist.
Wir haben das Skript James, die Erweiterung zum Schreiben von JavaScript, genau wie wir DCPI zum Schreiben von
Python haben, und dann haben wir Stilzugriff zum Schreiben von Kestrels.
In diesem Abschnitt werde ich Sublime Text und meinen Begriff Terminal verwenden, aber Sie können jedes
beliebige Entwicklertool verwenden.
Ich verwende diese gerne nur für die Bildschirmaufnahmen.
Sie helfen, weil es schön und sauber ist.
Es gibt mir nicht zu viele Hinweise, damit ich auch Fehler machen kann und dir bei Fehlern zeigen, wie
ich sie behebe.
Aber auch hier können Sie Visual Studio-Code verwenden, was immer Sie bevorzugen.
Jetzt sehen Sie hier, dass alle diese Dateien leer sind.
Denken Sie jedoch daran, dass ein Webserver diese drei Dateien einfach an einen Browser übergibt, damit der Browser die Seite anzeigen
kann.
Beginnen wir also mit ASML, wie schreiben wir Aoshima?
Nun, mit erhabenem Text kann ich hier tatsächlich etwas Interessantes tun, wenn ich HTML eintippe und dann auf die Tabulatortaste drücke.
Es füllt es automatisch für mich.
In Ordnung, in Ordnung, ich habe irgendwie betrogen, aber hey, ich will dich nicht zu Tode langweilen.
Dies ist also eine Standard-E-Mail-Datei, da ich die E-Mail-Erweiterung habe. Wenn ich diese Art von Syntax habe, kann ich E-Mails schreiben
und es ist nicht so schwierig.
Wir haben hier Eröffnungssteuer und Schlusssteuer mit dem Backslash.
Wir haben also den Kopf der Website mit einem Titel.
Dies wird also auf der Registerkarte angezeigt.
Sagen wir also meine.
Webseite.
Sehr kreativ.
Das ist der Kopf und dann der Körper, das wird auf einer Website angezeigt.
Also hier kann ich sagen, dass ich ein Webmaster bin.
Einfach so, und wir haben unser Alpha erstellt, jetzt check das mal aus, wenn ich jetzt Index öffne, nicht a. m. wenn ich recht habe.
Klicken Sie hier und sagen wir in Ihrem Fenster öffnen oder Sie können einfach auf diese Datei doppelklicken.
Wenn ich also darauf doppelklicke, sieh dir das an.
Ich bin Webmaster.
Nur einfacher Text, nichts Verrücktes, aber ich habe gerade meine erste Website erstellt.
Fahren wir mit CNN fort.
Erfolg hat eine andere Syntax als Erfolg, Syntax geht ungefähr so, wir können ihm ein ASML-Element geben, dem wir in unserem
Fall etwas Styling hinzufügen möchten, sagen wir Körper.
Und ich kann Körper sagen, dann geschweifte Klammern, und hier möchte ich Hintergrund haben, sagen wir Farbe und wir
gehen mit Hmm.
Kommen wir zu Grün.
Wenn ich das speichere.
Und ich aktualisiere die Seite.
Hmm, nichts ist passiert, und dies ist ein kleines Detail, das wiederum kein Webentwicklungskurs ist, also müssen wir uns
nicht allzu viele Sorgen machen.
Aber im Wesentlichen passiert als erstes, dass die HMO-Datei gesendet wird und die HMO-Datei tatsächlich das einzige
ist, was vom Browser gelesen wird.
Also innerhalb der HMO-Datei muss ich sagen, hey, HMO, wir haben übrigens auch eine erfolgreiche Kannst du das auch
in der Website verwenden, damit wir das im Hashtag tun können?
Durch die Verwendung eines sogenannten Link-Tags.
Also ein Link-Tag, wir können tatsächlich etwas davon entfernen, wir müssen nur sagen, hey, es ist eine Art von Texterfolg
und es hat etwas namens HSF, sagt einfach, hey, wo befindet sich diese Datei in unserem Fall, weil sie
in ist? der gleiche Ordner wie unser Index-HMO, wir können einfach sagen, dass es sich um Style Dot Access handelt, denn, nun, suchen Sie
einfach nach Soldats access und dort ist die Style-Datei.
Und wenn Sie sich erinnern, hatten wir jetzt auch das Beziehungs-Stylesheet, das wir einschließen müssen.
Ich habe es nur entfernt, damit wir sehen können, was wir hier geschrieben haben.
Wenn wir also Stylesheets erstellen und das ist nur etwas, eine Syntax, an die Sie sich gewöhnen müssen, wenn
Sie eine Zugriffsdatei einschließen möchten.
Wenn ich dies speichere und zurück gehe und aktualisiere.
Hey, schau dir das an, meine hässliche Website, und lass sie uns ein bisschen größer machen, meine hässliche
Website mit grüner Hintergrundfarbe hat jetzt einiges zu tun, wenn ich die Entwicklertools noch einmal öffne.
Und ich klicke auf Aktualisieren.
Sehen Sie sich das an, ich bekomme eine HMO-Datei und eine erfolgreiche.
Fantastisch.
Also habe ich gerade meinen eigenen Webserver erstellt, oder?
Wir könnten hier sogar JavaScript schreiben.
Aber auch hier handelt es sich um einen JavaScript-Kurs, sodass wir uns in diesem Fall nicht darum kümmern müssen.
Bitte schön.
Ich habe gerade etwas JavaScript geschrieben, was ungefähr so ist, als würde man in Python print schreiben, wenn ich die Seite noch einmal
aktualisiere.
Auch hier wird die JavaScript-Datei nicht angezeigt, weil wir indexiertem HTML wiederum mitteilen müssen,
dass wir eine JavaScript-Datei benötigen und normalerweise JavaScript-Dateien in einem script-Tag enthalten sind, normalerweise am unteren Rand
des Hauptteils.
Also schließen wir das.
Und dann müssen wir hier, anstatt die Referenz zu verwenden, nur SIRC als Quelle sagen.
Und dann noch einmal, wo ist die JavaScript-Datei?
Es ist dieses Skript.
Also wenn ich das speichere und die Seite aktualisiere.
Sehen Sie sich das an, wir laden jetzt diese Skriptdatei und alles, was es tut, ist, wenn wir auf den Konsolen-Tab klicken,
ist es fertig.
Es hat etwas in der Konsole ausgegeben und die Konsole wird von JavaScript verwendet.
Aber alles, was uns interessiert, ist, dass wir diese drei Dateien bereitstellen können.
Wir haben unseren allerersten Server erstellt.
Aber vielleicht ist Ihnen etwas aufgefallen.
Als du hier hochgegangen bist.
Schauen Sie sich den URL-Pfad an, den wir haben, das ist nicht das, was Sie normalerweise in eine Website eingeben, oder?
Ich meine, wir haben gesehen, dass die Website hier, dot dotcom, die dotcom http verwendet.
Das ist eine echte URL, oder?
Nun, es tut mir leid, Ihnen mitteilen zu müssen, dass wir keinen echten Webserver erstellt haben, da wir
lediglich einige Dateien von unserem Computer an den Browser geliefert haben, wie Sie sehen können.
Der Browser sagt also nur: Hey, ich werde diese Dateien anzeigen, die sich direkt hier auf Ihrem
Computer befinden.
Im Grunde haben wir also einen Webserver, auf dem auch ein Browser läuft, aber so funktioniert das wirkliche Leben nicht.
Warum sollte das sein?
Stellen Sie sich vor, Sie hätten eine eigene Website.
Möchten Sie wirklich, dass Menschen aus der ganzen Welt direkt über Ihren Computer auf Ihre Website zugreifen
und die Dateien von Ihrem Computer abrufen?
Ich meine, nein, richtig.
Es gibt viele Sicherheitsprobleme.
Es gibt viele Probleme mit der Leistung.
Sie müssen Ihren Laptop die ganze Zeit eingeschaltet lassen, damit die Leute auf Ihre Website zugreifen können.
Stattdessen wollen wir einen Webserver, der, wie der Name schon sagt, seriöse Dateien verarbeitet und darauf spezialisiert ist, Dateien
an Browser bereitzustellen.
Irgendwo auf der Welt, um das ich mir keine Sorgen machen muss.
Es ist nicht auf meinem Computer.
Jemand besitzt diese Maschine, jemand besitzt diesen Computer, und er ist die ganze Zeit eingeschaltet, so dass, wann
immer wir auf eine Website oder einen Link gehen, er immer läuft und diese Dateien sendet.
Also kommen wir hier endlich zurück zu Python, denn wir wollen etwas Anspruchsvolleres tun, als
nur diese Dateien auf unserem Rechner zu haben.
Stattdessen möchten wir mit Python einen echten Server bauen, den wir bereitstellen können, damit Menschen überall auf der Welt auf
unsere Website zugreifen können.
Nun, Sie könnten immer noch verwirrt sein, dieser ganze Prozess macht für Sie möglicherweise keinen Sinn, da wir
gerade erst anfangen.
Aber keine Sorge, am Ende wird alles einen Sinn ergeben.
Lassen Sie uns also den Browser für den Moment vergessen und einen echten Server bauen, etwas ausgeklügelter als das, was wir bisher gemacht
haben, das nur ein Ordner mit diesen drei Dateien ist und wir einfach auf
Indiziert doppelklicken.
Wir sehen uns im nächsten Video.
Tschüss.