Websites von Grund auf mit HTML, CSS und JavaScript erstellen (KEINE PROGRAMMING erforderlich)

1. Epische Intro: Wie funktioniert jemand ohne Programmiererfahrung und geht von einer leeren weißen Seite zu einer interaktiven, stilisierten Website mit Code. Ich sage es Ihnen, aber lassen Sie mich zuerst erklären, was eine Website ausmacht. Das Web verwendet drei grundlegende Sprachen, um zu arbeiten. Diese Sprachen heißen HTML, CSS und JavaScript. Was machen sie? Sie könnten fragen, HTML zur Strukturierung des Inhalts von Webseiten verwendet wird. Ohne sie würde Ihre Website so aussehen. HTML allein sorgt jedoch für eine ziemlich langweilige Website. Dort kommt CSS auf. Css ist die Designlinie. Es lässt alles hübsch aussehen , damit die Leute auf Ihre Website zurückkehren. Zuletzt ist JavaScript. Es hilft, Ihre Website interaktiv zu gestalten , damit sie solche Dinge tun kann. Gehen wir also zurück zu unserer ersten Frage. Wie erstellt jemand ohne Programmiererfahrung eine stilisierte Website mit Code? Es ist einfach. In weniger als zwei Stunden sehen sie sich einen anfängerfreundlichen Kurs , der ihnen die notwendigen Fähigkeiten vermittelt , um Meister der grundlegenden Websprachen zu werden . Zum Glück weiß ich nur den Kurs. Es heißt Build Websites von Grund auf mit HTML, CSS und JavaScript. Keine Programmiererfahrung erforderlich, füllen. In diesem Kurs lernen Sie, wie Sie die Bausteine einer Website in HTML erstellen . Lassen Sie es großartig aussehen CSS und werden Sie mit JavaScript ein bisschen extra cool. Wer wird dein Instruktor sein? Nun, das bin ich. Hi, ich bin Taylor English und programmiere gerne. Worauf wartest du also? Klicken Sie auf die nächste Lektion, um loszulegen. 2. So richten Sie Ihren Computer auf den Code ein.: Alles klar, das erste, was wir brauchen, um unsere Website von Grund auf neu zu schreiben, ist ein Code-Editor. Wenn Sie möchten, können Sie etwas wie Notepad verwenden, aber ich würde es nicht wirklich empfehlen, da dies nur ein einfacher Texteditor ist. Es gibt viel bessere Tools , die uns beim Schreiben von Code helfen können. Das Programm, das ich Ihnen heute zeigen werde, ist ziemlich einfach zu bedienen und ich zeige Ihnen alle Tipps und Tricks, die Sie benötigen. Es ist ein Programm namens Visual Studio Code, auch bekannt als VS Code, und es wurde von Microsoft erstellt. Wenn Sie also zu Ihrem Webbrowser gehen, können Sie einfach nach VS-Code suchen und einfach auf die erste Seite klicken. Jetzt bin ich unter Windows, also lade ich es für Windows herunter. Wenn Sie hier auf diesen Pfeil klicken, können Sie ihn auch für Mac oder Linux herunterladen, oder es gibt auch andere Downloads. Wenn Sie jetzt unter Windows 11 und vielleicht sogar Windows zehn sind, könnte das funktionieren. Sie können zum Microsoft Store gehen, der in Ihren Computer integriert ist. Sie können es auch von dort herunterladen. Wenn Sie es so machen, glaube ich, dass es das Programm automatisch für Sie auf dem neuesten Stand hält , was ziemlich nett ist. Ich lade es einfach für Windows herunter. Es ist ein ziemlich kleiner Download. Es sollte ziemlich schnell sein. Da ist es. Du kannst einfach aufschlagen. Und die Installateure ziemlich einfach. Akzeptiere einfach die Vereinbarung. Sie müssen auf dieser Seite nichts ändern , es sei denn, Sie möchten, aber wir müssen es für dieses Tutorial nicht tun. Drücken Sie einfach auf Weiter und klicken Sie dann auf Installieren. Jetzt habe ich es bereits auf meinem Computer, also werde ich es nicht neu installieren, aber lass mich dir zeigen, wie es funktioniert. Wenn Sie sich also einloggen, werden Sie wahrscheinlich so etwas sehen. Jetzt ist dies nur eine kleine Get Start-Seite , die Ihnen beim Schreiben Ihres Codes hilft. Sie können dies verwenden, wenn Sie dieses Kontrollkästchen möchten oder deaktivieren, damit es beim Start nicht angezeigt wird. Was wir jedoch zuerst tun müssen, um unser Projekt zu starten ist, einen Ordner zu erstellen, in dem wir alle Dateien für unsere Website speichern können . Klicken Sie auf Datei und dann auf Ordner öffnen. Jetzt müssen wir einen Ort auswählen, an dem wir dies aufbewahren können. Also werde ich es tun, mal sehen. Ich erstelle hier einen Ordner. Ich nenne es einfach meine Website. Wenn ich du wäre, würde ich alles ein Wort ohne Leerzeichen oder ausgefallene Symbole machen, nur weil das später einen Teil des Prozesses erleichtern könnte . Klicken Sie darauf, klicken Sie auf Ordner auswählen. Jetzt sind wir in diesem Ordner. Lassen Sie mich Ihnen also einige Funktionen von Visual Studio Code oder VS-Code zeigen . Hier auf der linken Seite haben wir unseren Entdecker. Hier sehen Sie alle Dateien , die sich in diesem Ordner befinden. Sie können hier auf dieses Symbol klicken, um eine neue Datei zu erstellen. Wenn ich zum Beispiel eine einfache Textdatei erstellen wollte, könnte ich etwas file.txt sagen. Und wenn Sie diese Dateierweiterung, den Punkt TXT, setzen erkennt es automatisch, was das ist, und es wird ihm ein kleines Symbol geben . Jetzt können die Icons für Sie unterschiedlich sein. Ich verwende einige spezielle Modifikationen. Dieses Programm zu machen. Manche Dinge sehen ein wenig anders aus, daher erscheint es Ihnen möglicherweise nicht genau gleich. Wenn Sie die Einstellungen durchforsten, können Sie das Farbschema und solche Dinge ändern. Aber das werden wir in diesem Tutorial nicht tun. Sie können Dateien erstellen. Mit dieser Schaltfläche werden Ordner erstellt. Auch hier haben Sie diese Icons möglicherweise nicht. Du siehst vielleicht einfach diesen Pfeil und das ist in Ordnung. Dieses Symbol aktualisiert diesen Ordner für den Fall, dass Änderungen vorgenommen wurden, die Sie normalerweise nicht wirklich benötigen. Wenn Sie Ordner geöffnet haben. Wenn ich zum Beispiel diese Datei hier drin hätte, würde das Drücken dieser Taste alle zusammenbrechen und Felsbrocken. Okay, schauen wir uns einige der anderen Funktionen an. Ich lösche das einfach. Dies ist die Suche, die Suchoption. Auf diese Weise können Sie Ihr gesamtes Projekt durchsuchen und alle Ihre Ordner und Dateien durchsuchen. Das ist also super raffiniert. Wir müssen uns keine Sorgen um die Quellenkontrolle machen. Wir können später darauf kommen, wenn wir anfangen, eine Website zu veröffentlichen, aber wir werden uns darüber jetzt keine Sorgen machen. Wir werden uns keine Sorgen machen, d per Remote Explorer auszuführen, aber wir werden uns die Erweiterungen ansehen. Dies ist eine der besten Funktionen Visual Studio Code. Visual Studio Code ist sehr modular, was bedeutet, dass Sie sehr einfach viele Funktionen hinzufügen können und kostenlos ist, was wirklich cool ist. Hier drin. Es gibt alle möglichen Erweiterungen, die Sie bekommen können, die Ihnen helfen werden. Also werde ich nur ein Paar empfehlen, das für diesen Kurs hilfreich sein könnte . Wenn Sie sich das HTML-Tag-Wrap ansehen, können Sie mich das von Zeit zu Zeit verwenden. Es ist nur eine Möglichkeit, Text auszuwählen und dann gesamten Text in HTML-Tags einzuwickeln, über die wir später erfahren werden. Nicht notwendig aber hilfreich, lebt dort. Sie werden dies herunterladen möchten, dies wird sehr hilfreich sein. Es wird uns nur helfen, es wird nur dazu beitragen, den Bearbeitungsprozess erheblich zu vereinfachen. Ich würde wärmstens empfehlen, den Live-Server herunterzuladen. Wenn Sie möchten, dass Ihre Icons so aussehen, wie es meine tun, können Sie dieses Material herunterladen, Icon, Theme usw. Ich glaube also, dass das alle Erweiterungen sind, die dafür tatsächlich benötigt werden. Natürlich. Wenn Sie in anderen Programmiersprachen bearbeiten, können Sie häufig Erweiterungen für die verschiedenen Sprachen erhalten die verschiedenen Sprachen deren Syntaxhervorhebung unterstützen. Die Syntaxhervorhebung bedeutet im Grunde nur, dass Teile des Codes unterschiedlich gefärbt sind. Es hilft Ihnen also, die Dinge besser zu sehen, während Sie bearbeiten. Dies sind die Hauptaspekte des Herausgebers. Im nächsten Video erfahren Sie, wie Sie Ihr Projekt tatsächlich starten und mit dem Schreiben von Code beginnen können. 3. So richten Sie Ihre erste Webseite in HTML ein: In diesem Video werden wir anfangen, unsere erste, unsere erste Webseite zu erstellen , nur eine einfache Seite. Und ich zeige Ihnen die Struktur von HTML und im Grunde wie Sie eine einfache Website strukturieren und auf Ihrem eigenen Computer ausführen können. Wir werden zu unserem Code-Editor VS Code springen und hierher kommen und eine neue Datei erstellen. Und wir nennen diese Datei index.html. Jetzt fragen Sie sich wahrscheinlich, warum rufen wir Index auf. Das ist nur eine Art Standard bei der Webentwicklung und hilft, dass die Veröffentlichung Ihrer Website viel reibungsloser abläuft. Jetzt müssen wir Dot-HTML einfügen, da es sich um eine HTML-Datei handelt. Lassen Sie mich also HTML erklären. Struktur der Website. Im Wesentlichen gibt es drei Komponenten auf fast jeder Website. Html, CSS und JavaScript. Html ist die Struktur der Seite. Alle Bilder, der gesamte Text, der Schaltflächen, alles so. Css, das wir später lernen werden, lässt es hübsch aussehen, richtig. Es lässt alles schön und ordentlich aussehen, genau so wie du es willst. Dann macht JavaScript es zur Website interaktiv. Es lässt Knöpfe Dinge machen. Es lässt Dinge passieren, wenn man auf Sachen oder was auch immer klickt . Wir werden alle drei dieser Sprachen bis zu einem gewissen Grad lernen . Aber wir fangen mit HTML an. Lassen Sie mich erklären, wie HTML funktioniert. Es verwendet ein System von Tags. Lassen Sie mich Ihnen nur eine grundlegende Struktur zeigen. Dann erkläre ich, wie das alles funktioniert. Alles ist innerhalb dieser Tags verschachtelt. Sie haben ein öffnendes Tag, bei dem es sich einfach um diese beiden Klammern mit dem Namen des Tags handelt. Und dann haben Sie ein schließendes Tag mit einem Schrägstrich und dann den Namen des Tags, das Sie immer benötigen. Nun, das sollte ich nicht sagen. Man braucht fast immer beides. Es gibt einige Tags, die kein schließendes Tag benötigen, aber die meisten von ihnen tun es. Jede Website wird diese drei Tags haben. Mit drei meine ich, diese drei öffnenden Tags und dort Begleit-Tags, benötigen Sie ein HTML-Tag, ein Head-Tag und ein Body-Tag. Fangen wir mit HTML an, wenn du willst. Aber eine Sache, die an VS Code wirklich nett ist, ist, dass Sie nicht den vollständigen Namen des Tags eingeben müssen . Sie müssen die Klammern nicht herausnehmen. Geben Sie einfach diesen Schnellnamen wie HTML ein und drücken die Tabulatortaste und er wird ihn automatisch für Sie vervollständigen. Und dann drücke ich einfach die Eingabetaste. Und das wird diesen Raum genau dort schaffen. Das HTML-Tag. Es macht nicht viel, aber es ist eine Art Standard für die Erstellung der Struktur der Seite. Alles in den HTML-Seitenbits in den HTML-Klammern für die HTML-Tags. Jetzt haben wir das Head Tag. Das Head-Tag ist wichtig, da es wichtige Informationen zu Ihrer Website angibt. Zum Beispiel der Name der Seite, die oben auf der Registerkarte angezeigt wird. Wenn ich zum Beispiel hier schreiben würde, wo es neue Registerkarte steht, haben wir das im head-Tag definiert. Es ist wichtig. Wir werden dort einige andere Informationen definieren, aber wir werden wahrscheinlich nicht sehr tief darauf eingehen. Wir müssen nicht zu viel damit anfangen. Darunter befindet sich das Körper-Tag. Achten Sie nun darauf, das Körper-Tag nicht in die Kopfmarke zu legen . Es muss darunter sein. Im Körpertag befindet sich im Grunde genommen alles andere. Dies ist der Rest der HTML-Seite. Es ist der Hauptteil der Seite. Um mit unserer einfachen Website innerhalb des Head-Tags zu beginnen , legen Sie ein Titel-Tag ein. Der Titel ist dieser Teil. Oben auf der Seite die Registerkarte, die Sie sehen. Ich sage einfach meine Website. Du kannst hier sagen, was du willst. Es spielt keine Rolle. Es wird nur der Text sein, der dort oben angezeigt wird. Weil dies nur eine einfache einzeilige Aussage ist. Ich werde es nicht so aufbrechen wie die anderen die anderen. Das ist alles, was wir vorerst in den Kopf stellen werden. Dann machen wir im Körper ein p-Tag, das für Absatz steht. Und das ist nur ein normaler Text. Und du legst einfach irgendeinen Text in das p-Tag ein. Und wir werden nur sagen, willkommen auf meiner Website. Drücken Sie auf Speichern. Jetzt müssen wir die Seite ausführen. Dies ist der Zeitpunkt, an dem diese Live Server-Erweiterung nützlich ist. Wenn Sie hier unten rechts bemerken, befindet sich eine Schaltfläche mit der Aufschrift Go Live und klicken Sie, um den Live-Server auszuführen. Machen Sie weiter und klicken Sie darauf. Wenn Sie diese Schaltfläche nicht sehen, können Sie einfach mit der rechten Maustaste auf die Seite klicken und auf Mit Live-Server öffnen klicken. Dadurch wird eine Seite in Ihrem Webbrowser geöffnet , auf der Ihre Website angezeigt wird. Ich möchte dir nur schnell gratulieren. Sie haben eine Website erstellt. Dies ist eine Website für alle Absichten und Zwecke. Es ist so, dass es noch nicht sehr interessant ist. Aber das ist eine Website, die Sie machen können. Das. Webprogrammierung macht wirklich Spaß und es ist nicht so schwer. Wir können das lernen. Das ist unsere Website. Was an Live Server wirklich cool ist , ist, dass während der Bearbeitung , jedes Mal, wenn wir Speichern drücken, unsere Seite automatisch aktualisiert und unsere Änderungen aktualisiert. Wenn ich ein anderes Absatz-Tag hinzufüge und einfach Hallo Welt sage und es speichere, wird automatisch aktualisiert und erscheint auf der Seite. Eine Sache, die Sie bemerken werden, wenn ich diese Hallo Welt niederlege , ist, dass sie unten erschienen ist. Willkommen auf meiner Website statt daneben. Und das liegt daran, dass Absatz-Tags Dinge als Blöcke anzeigen . Bedeutung. Sie können sich einen Block vorstellen, der den ganzen Weg über die Seite führt . Zu diesem Willkommen auf meiner Website. In der Tat können wir das so visualisieren. Du musst dir Sorgen darüber machen, was das ist. Dies sind nur einige hilfreiche Entwicklungstools im Browser. Aber achten Sie darauf. Alles was ich blau hervorgehoben habe, ist der Körper. Und das sieht man genau hier hervorgehoben. Wenn ich jetzt jede dieser Punkte hervorhebe, können Sie sehen, dass es sich um ein Absatz-Tag handelt. Sie können den Buchstaben P sehen und er nimmt diese ganze Reihe auf. Und das liegt daran, dass das Absatz-Tag ein Block-Tag ist. Es dauert ungefähr den ganzen Abschnitt. Jedes andere Tag, das Sie als nächstes setzen, wird automatisch darunter gehen. Dies ist etwas, das wir später mit CSS ändern können , wenn wir möchten. Aber im Moment, erkenne das einfach an. Und lass mich dir ein paar andere nützliche Tags zeigen. Also haben wir das p-Tag gelernt. Das ist für einfache Absätze. Wenn Sie Header wünschen, gibt es dafür ein paar Tags. Es gibt also H1, H2, H3, von H6. Okay, das sind also plötzlich oder leid, die sechs Größen von Headern. Einer ist der größte, sechs sind der kleinste. Uns. Es ist ein nützliches Tag zu haben. Wenn wir zum Beispiel einen Blog schreiben, können Sie einen Header haben und willkommen in meinem Blog sind. Darunter kannst du ein Absatz-Tag setzen und sagen, hier etwas Text einfügen. So können Sie diese Header verwenden. Das ist ein sehr gebräuchliches und nützliches Tag. Lasst uns ein paar andere Tags lernen. Lasst uns etwas über Listen lernen. Wenn Sie eine nummerierte Liste wünschen, können Sie l sagen, was eine geordnete Liste bedeutet, was bedeutet, dass sie 12345 bestellt wird. Also, innerhalb der geordneten Liste müssen Sie Listenelemente einfügen, die LI-Tags sind. Ich möchte Punkt eins, Punkt zwei, Punkt drei usw. sagen . Sie werden auch feststellen, dass es sie automatisch einrückt. Wenn Sie nun eine Aufzählungsliste wünschen , nennen wir das eine ungeordnete Liste oder eine UL. Wir können das Gleiche tun, aber die gleichen Listenelemente da drin. Aber anstatt sie zu nummerieren, gibt es ihnen Aufzählungspunkte. Okay, das sind also nur ein paar der Tags, die wir verwenden werden. Es gibt andere Texte für Dinge wie Bilder, Links, Buttons usw. Und das werden wir in späteren Videos eingehen. Im Moment sind dies jedoch die Grundlagen zum Einrichten einer HTML-Website. Denken Sie daran, wir haben eine index.html erstellt. Der Punkt-HTML ist sehr wichtig. Dann haben wir öffnende Tags und schließende Tags. Jede HTML-Seite hat ein HTML-Tag, ein Head-Tag und ein Körper-Tag. 4. Andere nützliche HTML-Tags (Teil 1): In diesem Video werden wir über einige andere HTML-Tags sprechen , die Sie wahrscheinlich nützlich finden werden. Der erste, mit dem wir beginnen werden, heißt ein Tag. Und wir werden es benutzen, um Links zu erstellen. Und warum heißt es ein Tag. Es ist ein bisschen verwirrend. Es steht für Anker, aber darüber müssen wir uns für dieses Video keine Sorgen machen. Also mach einfach weiter und gib den Buchstaben a ein und klicke auf Tab. Sie werden sehen, dass es ein Tag mit einem Attribut namens atrial erstellt . H ref ist im Wesentlichen der Ort, an dem wir den Link für alles stellen , was wir hier hineinsetzen werden. Ups notieren sich kurz über Attribute. Und das Attribut in HTML ist etwas , das Sie in das öffnende Tag eines Elements einfügen. Dies sind alles Elemente, um es in das Eröffnungs-Tag zu legen. Und wir werden später ein bisschen mehr über Attribute lernen , aber sie ermöglichen es Ihnen, das Styling und andere Dinge wie diese zu ändern . Aber dafür müssen wir den Link hineinstecken. Also gehe ich einfach zu Google. Ich schnapp mir einfach den Link wirf ihn hier rein. Wenn ich jetzt auf Speichern klicke, wirst du feststellen, dass nichts passiert ist. Und das liegt daran, dass wir den Link tatsächlich an einen Text anhängen müssen . Ich setze einfach zwischen das öffnende und schließende Tag. Ich tippe einfach Google ein. Sie werden sehen, dass Google hier steht , und es unterstrichen, dass es sich um einen Link handelt. Wenn Sie darauf klicken, Sie zu Google. Kurze Anmerkung zu Tags und Links. Es ist sehr wichtig, dass Sie das HTTP oder HTTPS haben. Ich bin mir ziemlich sicher, dass es ohne es nicht funktioniert. Ich könnte mich irren, aber normalerweise wäre ich sicher und würde das einbeziehen. Das nächste Tag, über das wir sprechen werden, ist das b-Tag. Das ist ziemlich einfach. Es steht einfach für fett. Wenn ich ein P-Tag habe, habe ich einen Text und sage einfach Hallo Welt. Wenn ich World fett machen will, dann werde ich es in einem b-Tag umgeben. Okay, also macht es das kühn. Jetzt mache ich mir eine kurze Notiz darüber, was ich gerade gemacht habe. Du hast gesehen, dass ich die Welt ausgewählt habe und Alt W auf meiner Tastatur gedrückt habe, was nicht funktioniert, es wird noch nicht für dich funktionieren. Ich zeige dir, wie das funktioniert. Dies ist die Tag-Wrap-Erweiterung , über die ich früher im Video gesprochen habe. Wenn Sie zu Erweiterungen gehen und den HTML-Tag-Wrap suchen, installieren Sie es , wenn Sie möchten. Dies ist nur ein nützlicher Trick. So wie Sie es verwenden, wenn Sie das Wort auswählen und Alt W drücken und dann können Sie alles eingeben , was Sie wollen. Und es wird es sowohl in die öffnenden als auch in die schließenden Tags legen. Wenn ich also das b hier setze, dann legt es seine Eingaben beide genau dort hin. Es ist ziemlich cool. Wenn Sie den Abstand etwas weniger verwirrend gestalten möchten , können Sie das Absatz-Tag tatsächlich so verschachteln , und das ist in Ordnung. Jetzt zeige ich dir ein anderes Tag. Das ist das Ich markiere oder kursiv. Sagen wir es einfach noch einmal. Wir legen das rein. Sie können genau dort sehen, dass es das kursiv schreibt. Jetzt fragen Sie sich wahrscheinlich, was gerade hier passiert ist, wo beide Sätze nebeneinander statt einer oben, einer unten stehen. Denn im Code-Editor war einer oben und einer unten. Nun, wenn wir zu dem zurückkehren, worüber wir mit Blockelementen gesprochen haben , ist das Absatztag ein Blockelement, was bedeutet, dass es sich um einen einzigen Block handelt. Alles darin wird ein Block sein. Wenn du etwas darunter legen willst, musst du einen weiteren Block darunter legen. So wie dieser Text gelesen wird, könnte er genauso gut direkt an ihn angehängt werden. Wir lassen uns nicht direkt hier die Eingabetaste drücken und diese Pause machen. Es. Es hilft uns hier nicht. Was wir tun müssten, ist. Erstellen Sie ein zweites Absatz-Tag, also einen zweiten Block und legen Sie es dort und auf diese Weise würde es darunter legen. Jetzt müssen Sie diese nicht verschachteln, aber es kann helfen, wenn Sie mehrere Tags haben, die die Dinge etwas weniger verwirrend machen können . Sprechen wir jetzt über das Image-Tag. Geh weiter und tippe IMG und klicke auf Tab. Dies dient einfach zum Anzeigen von Bildern auf Ihrer Website. Es hat zwei Attribute. Eines ist das Quellattribut und was ist das alt-Attribut? Quelle ist der Ort, an dem sich Ihr Foto auf Ihrem Computer befindet. Ich erzähle dir in einer Minute von ALT. Lass mich herausfinden, dass ich hier ein Bild auf meinem Computer habe, also hole ich mir das und ziehe es einfach in meine Akten. Dies ist nur ein Bild von mir, wie ich Klavier spiele. Wenn du es nicht weißt, spiele ich wirklich gerne Klavier. Aber jedenfalls habe ich das Bild genau dort. Um die Dinge einfach zu machen. Ich werde umbenennen und bleibe. Ich werde alle Räume los , die uns das Leben erleichtern werden. Im Quell-Tag müssen wir dieses Spiel den Piano Dot JPG JPEG eingeben. Das ist die Quelle. Wenn wir jetzt auf „Speichern“ klicken, wird es auftauchen. Wirklich, richtig groß. Wow. Es ist ein enormes Bild. Ich zeige dir, wie du das in nur einer Minute anpassen kannst. Aber lasst uns schnell über dieses Alt-Tag sprechen. Das alt-Tag wird verwendet, um eine Beschreibung eines Bildes anzuzeigen. Wenn es nicht geladen wird. Wenn wir hier Klavier spielen würden. Lasst uns den Laden-Link ganz schnell durcheinander bringen. Werde einen Brief los und klicke auf „Speichern“. Es kann das Bild nicht finden , weil es nicht weiß, wie es richtig heißt. Und so bekommen wir diesen kleinen Fehler und eine Beschreibung, die das Klavier spielt, die praktisch sein kann. Wenn Sie den Mauszeiger jemals über ein Bild oder etwas anderes bewegt haben, zeigt es Ihnen das kleine schwebende Textfeld an. So nennen wir das Titelattribut. Und lass mich dir zeigen, wie das funktioniert. Wir können hier ein Attribut hinzufügen und Titel sagen. Und wenn wir sagen, hier Klavier zu spielen , dann bekommt das Bild, wenn wir den Mauszeiger darüber bewegen, den kleinen Texttext wo es heißt, Klavier zu spielen. Jetzt ist dieses Bild nicht sehr groß, es ist enorm. Wie können wir das beheben? Wir können eine Breite, ein Attribut, das Tag hinzufügen. Wenn wir Breite sagen, können wir eine Messung eingeben. Wir werden es in Pixeln machen. Wenn Sie mit Pixeln nicht vertraut sind, besteht Ihr Bildschirm im Wesentlichen aus Millionen und Millionen von Pixeln, und das ist es, was das gesamte Bild auf Ihrem Bildschirm erzeugt. Ein Bild wie dieses, das ich Klavier spiele, besteht aus einer bestimmten Breite in Pixeln und einer bestimmten Höhe in Pixeln. Wir können überprüfen, was es für dieses Bild ist indem wir in unseren Datei-Explorer gehen. Wir klicken mit der rechten Maustaste auf das Bild. Dann sag Reveal im Datei-Explorer. Dann können wir mit der rechten Maustaste darauf klicken und zu Eigenschaften gehen. Und dann geh zu Details. Genau hier siehst du die Dimensionen. Es ist viertausend mal 6 Tausend, und Sie werden sehen, dass die Breite 4 Tausend Pixel beträgt, die Höhe 6 Tausend Pixel. Ich werde versuchen, die Größe auf etwas ziemlich Kleines zu ändern. Ich werde es ziemlich verkleinern und einfach 300 Pixel sagen. Sie schreiben das um 300 px und stellen sicher, dass zwischen der Zahl und dem Pixel kein Leerzeichen vorhanden ist. Und klicke auf Speichern. Da ist das Bild. Jetzt fragen Sie sich wahrscheinlich, ich die Größe jedes Bildes überprüfen muss, das ich anlege? Absolut nicht. Du kannst damit definitiv herumspielen , wie du willst. Man kann einfach Zahlen erraten. Und wenn es nicht ganz das ist, was du möchtest, mach es etwas größer. Nun, der Grund, warum wir nur die Breite einsetzen, ist wenn wir nur diese eine Messung, diese Ein-Dimension, einsetzen , die Skalierung der Höhe automatisch beibehalten wird die Skalierung der Höhe automatisch beibehalten , so dass sie gleich bleibt. Wenn wir wollten, könnten wir Höhenattribute hinzufügen und wir könnten wählen, was wir wollen. Ich kann es zu einem Quadrat machen und 300 Pixel sagen. Das würde unser Bild in ein Quadrat zerquetschen. Das ist wahrscheinlich für die meisten Fälle nicht ideal. Deshalb würdest du einfach die Ein-Dimension behalten. Entweder könntest du die Breite, die Höhe beibehalten. Es würde das andere automatisch skalieren. Es würde dein Bild intakt halten. Das ist das Image-Tag. Im nächsten Video sprechen wir über ein paar weitere Tags. 5. Andere nützliche HTML-Tags (Teil 2): Wir werden über drei weitere Tags sprechen und dann werden wir mit dem Styling fortfahren. Darauf freue ich mich also. Vorhin habe ich dir von dem Absatz-Tag erzählt und wie es ein Blockelement ist. Wenn Sie sich erinnern, haben wir Ihnen ein Beispiel gezeigt , bei dem, wenn Sie einen Text in diesen Absatz einfügen , ihn direkt an das letzte Bit anhängen wird . Was ist, wenn Sie dieses Verhalten replizieren möchten , aber separate Tags haben möchten? Nun, dafür gibt es ein Etikett. Es heißt „Span-Tag“. Das span-Tag ist kein Blockelement, es ist ein Inline-Element, was bedeutet, dass es neben alles gestellt wird, was auch immer Sie erstellen möchten. Jetzt ist die Sache mit Inline, dass wir es nicht neben das Absatz-Tag legen können es nicht neben das Absatz-Tag legen , da der Absatz ein Blocktyp ist. Alles, was du darunter legst, wird ein neuer Block sein. Wir können jedoch ein paar Span-Tags anhängen. Diese Span-Tags werden nebeneinander sitzen. Aber wenn wir ein anderes Absatz-Tag setzen würden, wäre das ein neuer Block. Okay. Lass mich dir was zeigen. Wenn ich, werde ich diese so hervorheben, dass Sie jedes der Elemente sehen können . Du kannst sehen, dass Hallo sein eigener Block ist. Dann sind dies Inline-Elemente, sie sind getrennt. Sie können sehen, dass das Hallo wieder aneinander angehängt ist. Sie sind voneinander getrennt, aber sie sind in derselben Zeile. Und dann trennt sich das Absatz-Tag von diesen. Das ist das Span-Tag. Als Nächstes werden wir über das Break-Tag sprechen. Das break-Tag bedeutet einfach, dass Sie etwas Abstand zwischen verschiedenen Objekten haben möchten . Wenn ich also mein Absatz-Tag hier habe und dann ein Bild einfügen möchte, sagen wir: Habe ich dieses Bild immer noch da draußen? Das ist es, ja. Nehmen wir an, ich habe dieses Bild mit einer Breite von 100. Sagen wir, ich möchte mehr Platz zwischen diesem Bild. Ich sage das Klavierspielen. Ich kann einfach ein Break-Tag setzen, das nur BR ist. Jetzt werden Sie feststellen, dass es nur das eine öffnende Tag erstellt hat. Das break-Tag ist eines dieser Tags, das kein schließendes Tag benötigt. Es ist einfach sein eigenes kleines Ding. Sie können sehen, dass es den Raum genau dort platziert hat. Jetzt kann ich das ein paar Mal kopieren und einfügen. Und es bringt einen Haufen Platz. Das ist das Break-Tag. Jetzt ist das dritte Tag, über das wir sprechen werden, das Button-Tag, mit dem wir gerade nicht viel damit machen werden, aber wir werden später viel damit machen. Das Button-Tag macht Spaß, es ist ziemlich einfach. Du legst einfach etwas Text in das ein, was der Button sagen soll. Ich kann sagen, schieb mich. Jetzt gibt es einen Knopf. Jetzt ist das eine lustige Tatsache. Sie werden feststellen, dass die Schaltfläche neben dem Bild lag und das liegt daran, dass die Schaltfläche ein Inline-Element ist, ebenso wie das Bild. Die sind beide inline, also sind sie beide neben mir. Wenn ich zum Beispiel den Knopf darunter legen wollte, wenn ich einfach ein Break-Tag setzen könnte, vielleicht ein paar. Jetzt kannst du den Knopf „Ich drücken“ sehen. Ich kann darauf klicken, und es ist ziemlich einfach, aber es macht nichts. Es ist ziemlich schwierig, viele Funktionen mit Schaltflächen zu erhalten , die nur HTML verwenden. werden wir etwas JavaScript benötigen. Also bleib dran. Wir werden später ein paar coole interaktive Dinge mit JavaScript und Breite, den Schaltflächen, machen . 6. Lassen Sie uns eine tolle Website erstellen!: In diesem Abschnitt des Kurses zeige ich Ihnen, wie Sie die Website, die Sie sich ansehen, mit HTML, CSS und ein bisschen JavaScript replizieren die Sie sich ansehen, mit HTML, können. Lassen Sie mich Ihnen einen kurzen Rundgang auf dieser Website geben, damit Sie wissen , woran wir arbeiten. Es ist ziemlich einfach und seine Funktionalität, es ist eine einfache Diashow. Es bewegt sich nicht automatisch, aber wir können die Bilder hier ändern, indem wir auf diese Bilder unten klicken. Sie werden sehen, dass es einen kleinen Blaseneffekt gibt. Wenn ich also jedes der Bilder hervorhebe, fallen sie ein wenig heraus. Sie können sehen, dass sie gleichmäßig getrennt sind und sie so auf der Seite zentriert sind. Sie können dieses Explorer-Logo auch oben sehen. Nur eine ausgefallene Schrift, die blau wird, wenn ich darüber fahre. Und die Navigationstasten werden rot, wenn ich über sie fahre. Ich zeige dir auch eine Seitennavigation. Wenn wir also auf diese Galerie-Seite klicken, ist es nur eine einfache Seite, die alle vier verfügbaren Bilder anzeigt, aber ich zeige Ihnen, wie Sie diese Seitennavigation durchführen. Obwohl diese Website ziemlich einfach ist, möchte ich Ihre Gedanken über die Bedeutung des CSS in diesem Projekt beeindrucken . Und ich kann das CSS hier tatsächlich deaktivieren und dir zeigen , wie es ohne aussieht. Lass mich weitermachen und das machen. Dies ist der rohe HTML-Code der Seite. Wir haben enorme Bilder, die nicht auf den Bildschirm passen. Dann haben wir nur ein paar seltsame Navigationsschaltflächen , die nicht so toll sind. Außer dass das CSS noch auf dieser anderen Seite war. Aber Sie können sehen, dass das CSS eine große, große Rolle dabei spielt , wie eine Webseite aussieht. Und wir wollen nicht, dass es nur aus HTML besteht. In den nächsten Videos zeige ich Ihnen, wie Sie diese Seite in HTML strukturieren können. Und wir werden dort ein paar neue Dinge lernen. Ich bin auch, und dann die späteren Videos werden wir alle dafür erforderlichen CSS sowie das JavaScript dafür lernen . Es gibt nicht sehr viel JavaScript, aber es gibt nur ein bisschen damit das Bild in der Diashow geändert wird. Wir sehen uns im nächsten Video. 7. Styling Ihres Kopfes und Hauptbildes (CSS Teil 1): Okay, lasst uns diese Website erstellen. Um zu beginnen. Ich habe mit einem neuen Ordner angefangen. Gerne können Sie dasselbe tun oder die Dateien ändern , an denen wir zuvor gearbeitet haben. Wenn Sie möchten, würde ich jedoch empfehlen, mit einem neuen Ordner zu beginnen . Was wir zuerst tun werden, ist unsere Datei index.html zu erstellen. Wir werden nur eine Datei nach dem anderen erstellen. Ich erstelle diese neue Datei, index.html. Wir beginnen mit den Grundlagen, dem HTML-Tag und innerhalb des head-Tags und darin mit dem Titeltyp. Der Titel dafür. Ziel hier ist es, diese Seite zu replizieren. Hier oben auf der Registerkarte heißt es erforscht. Und genau das ist das Titel-Tag. Vier. Wir werden es erforschen. Dann können wir diese tatsächlich hier aufstellen. Da sind wir los. Dann erstelle ich unter dem head-Tag ein Körper-Tag. Wir werden ein H1 setzen. Sag einfach erforsche das. Wir kriegen den großen Header da oben. Mal sehen, wie das bisher aussieht. Ich speichere es und klicke mit der rechten Maustaste und drücke Open With Live Server. Dies wird hier einen weiteren Tab öffnen. Wir können sehen, wie unsere Seite aussieht. Das haben wir bisher, nur das H1 und es steht auch Explorer hier oben oben. Das ist großartig. Als nächstes überspringe ich vorerst die Navigation, aber lasst uns die Bilder einsetzen. Okay? Was wir also wollen, ist ein Hauptbild mit vier Bildern darunter. Ich setze einfach ein Image-Tag ein. Jetzt brauchen wir die eigentlichen Bilder. Ich werde einen Link in R. Ich werde Download-Links für die Bilder und andere, wie Links oder Dinge, über die ich im Kurs gesprochen habe, einschließen die Bilder und andere, wie Links oder Dinge, , die alle in der Beschreibung des Kurses enthalten sind. Ich werde Links hinzufügen, um die Bilder herunterzuladen, aber lassen Sie mich diese schnell schnappen. Ich hab diese vier Bilder. Stellen wir es gleich hier hin. Jetzt werden Sie sehen, dass Sie diesen Punkt-VS-Codeordner sehen können. Du musst dir darüber keine Sorgen machen. Es ist nur etwas , das automatisch von VS Code erstellt wird und es scheint bestimmte Einstellungen darin zu sein, aber wir werden es nicht berühren. Es wird unser Projekt in keiner Weise wirklich beeinflussen. Ich habe meine vier Bilder und kann sie hier in VS Code sehen. Es sind wirklich große Bilder, also brauchen sie eine Sekunde, um sie zu laden. Aber ich habe meine vier Bilder. Was wir also tun wollen, ist, dass unser Hauptbild beginnt , da wir zunächst eines der Bilder aufnehmen möchten Ich werde einfach Bild eins auswählen, das ich dafür benannt habe, dieses Bild in der Quelle, wir werden nur sofort einen Punkt JPEG sagen. Was wir im Alt-Text tun können , der wenn Sie sich erinnern, wird der Alt-Text angezeigt, wenn ein Bild nicht angezeigt werden kann. Hier sage ich einfach „Berge“. Oder mal sehen, ich sage eine Stadt in den Bergen. Ich denke, das ist eine anständige Beschreibung. dem Bild allerdings nicht gerecht. Okay, also hebe ich das auf und wir schauen uns jetzt unsere Seite an. Wir haben Explore hier oben und dann ein enormes Bild. Wir müssen daran arbeiten, das neu zu dimensionieren, was mit dem CSS geschehen wird. Wir haben unser Hauptbild. Fangen wir einfach damit an. Fangen wir an, an unserem CSS zu arbeiten. Wir müssen eine neue Datei erstellen. Wir nennen es style.css. Wir müssen diese Datei in unserem HTML innerhalb des head-Tags verknüpfen . Unter dem Titel-Tag sagen wir Link. Dann kannst du mit der Maus nach unten, Pfeil runter zu CSS. Und es wird all das für dich schaffen. Nehmen wir an, es ist ein Stylesheet, was CSS ist. Und dann ist der Link zur eigentlichen Datei standardmäßig style.css. Wir haben dort ziemlich viel Glück mit unserer Benennung. Jetzt müssen wir testen, um sicherzustellen, dass die CSS-Datei funktioniert. Versuchen wir also, etwas Einfaches zu optimieren. Wir wollen, dass die Seite schwarz ist. Eine Möglichkeit, das zu tun, ist, dass wir es tatsächlich können. Wir können einige Stile an den gesamten Hauptteil der Seite, an das Körper-Tag selbst und die Seite schwarz machen. Lassen Sie mich Ihnen in unseren Stylesheets in unserem CSS zeigen, wie das geht. Sie können ein Tag benennen. Ich sage den Körpernamen des Tags. Und dann legst du diese geschweiften Klammern hierher. Und sobald Sie erstellt haben, sobald Sie die öffnende Klammer gedrückt haben, wird automatisch ein Paar erstellt, dann können Sie einfach die Eingabetaste drücken und dies wird für Sie tun. Jetzt können wir einfach sagen, wir können unsere CSS-Eigenschaften dort hineinlegen, die einzelnen Stilelemente sind , die wir der Seite hinzufügen. Was wir hier wollen, ist Hintergrundfarbe, Schwarz. Es ist ziemlich einfach, da wir an mehr CSS arbeiten, Sie werden sehen, dass vieles davon sehr lesbar und leicht verständlich ist . Jetzt ist SSS nicht immer einfach. Es kann sehr komplex werden. Aber ich hoffe, dass das, was ich dir gezeigt habe, Sinn ergibt. Und ich hoffe, dass Sie keine Angst vor CSS haben, weil es wirklich eine großartige Sprache ist und meiner Meinung nach die meiste Zeit ziemlich intuitiv ist. Also mach weiter und klicke auf „Speichern“. Was wir hier gemacht haben, ist, dass wir dem Body-Tag gesagt haben und seine Hintergrundfarbe schwarz machen, was bedeutet, dass der gesamte Hintergrund der Seite schwarz sein sollte. Wenn wir auf unsere Seite gehen, können Sie sehen, dass es technisch wahr ist. Aber wir haben nur dieses Bild, das größten Teil der Seite herausgenommen hat, sodass Sie nicht wirklich sagen können, dass der Hintergrund schwarz ist. Okay, also lasst uns damit arbeiten. Lasst uns das Bild verkleinern. Ich zeige dir etwas namens Ausweis. In CSS haben wir im Wesentlichen drei Möglichkeiten, Stile an Elemente anzuhängen. Wir können ein Element anhand seines Tag-Namens auswählen, den Sie gerade mit dem Body-Tag gesehen haben. Oder wir können eine ID oder Klasse verwenden. Eine Klasse ist, wenn Sie einen Stil an mehrere Dinge anhängen möchten. Sie geben jedem der Tags die gleiche Klasse . Und dann kannst du den gleichen Stil geben, alle von ihnen. Und ID ist der Ort, an dem wir nur einem einen Stil verleihen wollen. Lass mich dir zeigen, wie das geht. In einem Image-Tag. Wir wollen die Breite ein wenig verkleinern. Was ich also tun werde, ist innerhalb des Tags, ich füge ein anderes Attribut, Quellen, ein Attribut, alt als Attribut hinzu. Wir fügen ein weiteres Attribut und nennen es ID. Wenn Sie einfach ID drücken und die Tabulatortaste drücken, sollte es dieses kleine Gleiche erstellen , und dann funktioniert das Angebot. Jetzt nennen wir das , was wir den Ausweis nennen. Das kann sein, was immer du willst. Ich nenne es Hauptbild. Okay? Wenn Sie jetzt mehrere Wörter im Namen einer ID oder Klasse haben möchten, sollten Sie normalerweise mehrere Wörter im Namen einer ID oder Klasse haben möchten, einen Bindestrich zwischen die Wörter setzen. Das ist nur der Standard , der normalerweise befolgt wird. Wir werden das Hauptbild dort platzieren. Was wir jetzt tun können, ist , dass wir das in unserer style.css auswählen können . Um dem CSS mitzuteilen, dass dies eine ID anstelle eines Tags ist, müssen wir nun eine ID anstelle eines Tags ist, ein Pfundzeichen setzen, sagen wir das Hauptbild. Wenn es eine Klasse ist, würden wir einen Punkt setzen und ein Hauptbild wie dieses sagen. Aber es ist ein Ausweis, also setzen wir ein Pfundschild. Und jetzt möchten wir seine Eigenschaft width ändern. Mal sehen wir hier. Wir geben ihm eine Breite von 100%. Dies bedeutet, dass die Breite 100% des Containers einnehmen wird . Im Wesentlichen. Der Container für dieses Bild ist der Körper. So sitzt es in der Hierarchie. Im Inneren des Körpers. Es wird 100% der Breite annehmen. Mal sehen , wie das aussieht. Großartig. Wir können sehen, dass das Bild jetzt nicht über die Breite der Bildschirmanzeige hinausgeht . Es erstreckt sich über die Höhe hinaus. Aber es passt breitenweise auf den Bildschirm, da es 100% der Breite einnimmt. Was wir tun möchten, ist, dass wenn wir die Größe ändern, Sie sehen, dass sich der Wert des Bildes je nach Breite ändert. Wir wollen, dass das ziemlich konstant bleibt. Wir geben ihm eine Höhe von 400 Pixeln. Jetzt können Sie sehen, dass das Bild ein wenig zerquetscht hat. Aber das ist im Wesentlichen die gleiche Größe wie hier. Wir schauen uns mal an. Es ist ungefähr die gleiche Größe, aber es ist alles verschwommen. Jetzt verwenden wir eine CSS-Eigenschaft namens Object Bit. Und ich weiß nicht alles über diese Immobilie. Aber was ich Ihnen sagen kann ist, dass, wie der Name sagt, es ändert, wie das Objekt auf der Seite ist, der Wert, den wir ihm geben werden, Deckung ist. Was das getan hat, ist , dass es so gemacht wurde, dass das Bild nicht mehr zerquetscht wird, sondern abgeschnitten ist. heißt, wenn Sie die Größe ändern, sehen Sie verschiedene Teile des Bildes. Im Wesentlichen behält es das gleiche Seitenverhältnis bei. Abhängig von der Größe des Bildschirms sehen Sie jedoch einen anderen Teil des Bildes. Für unsere Zwecke ist das in Ordnung. Sie können auf der Hauptseite sehen, , wenn ich die Größe wir diesen Effekt auch erzielen, wenn ich die Größe ändere. Wir haben unser Image. Was wir tun wollen, ist, dass wir keinen unserer Texte sehen können. Wir können den Explorer hier oben nicht sehen. Es ist irgendwo da. Da sind wir los. Es versteckt sich weil schwarz. Lasst uns weitermachen und die Farbe ändern. Mal sehen. Wir haben unseren hier. Also füge ich 81 hinzu, weil es der Name des Tags ist. Ich sage nur Farbe, Weiß. Man kann CSS sehen, es ist nicht so schlimm. Jetzt können Dinge wie Object Fit etwas verwirrend sein. Ich werde Links zu einer CSS-Referenz und einer HTML-Referenz erstellen, die Ihnen jede HTML- und CSS-Eigenschaft anzeigt Ihnen jede HTML- und und getaggt , die Sie möglicherweise verwenden möchten. Und es gibt Ihnen großartige Details darüber, wie Sie es richtig verwenden können. Sehr hilfreich. Wenn Sie Web-Entwicklung machen. Sie müssen sich nicht alles merken. Man muss sich nicht einmal genau merken , wie alles funktioniert. Wichtig ist , dass Sie wissen, wie Sie die Informationen recherchieren und herausfinden können, die Sie benötigen. Und das ist in den meisten Programmierungen ziemlich üblich. Bevor ich dieses Video beende, machen wir noch eine Sache. Lassen Sie uns den Stil dieses Explorers so ändern , dass er über diese ausgefallenen Schriftarten verfügt und so dass er auf der Seite zentriert ist. So wie ich das gemacht habe, als ich eine Website namens Google Fonts benutzt habe . Wenn Sie zu fonts.google.com gehen, werden Sie auf diese Seite weitergeleitet. Du wusstest wahrscheinlich nicht, dass es das gibt, aber es ist ziemlich genial. Lass mich dir zeigen, wie es funktioniert. Ich kann hier etwas tippen. Ich könnte Explorer sagen. Es wird uns all diese verschiedenen Anleihen zeigen , aus denen wir wählen können. Eine ganze Reihe verschiedener Dinge, die wir nutzen könnten , die wir kostenlos in unsere Website integrieren können. Die Schriftart, die wir verwenden möchten, heißt Wasserpinsel. Das ist das hier. Sie können fortfahren und darauf klicken. Und die meisten Schriftarten haben mehrere Gewichte, was bedeutet, wie fett ist. Und so kannst du die sehen. Sie können auch einfach tippen und sehen, wie es in verschiedenen Größen und in dieser Art von Dingen aussehen würde . Was wir tun möchten, ist, auf diesen Stil auswählen zu klicken. Kommen Sie nun hierher und klicken Sie auf Ausgewählte Familien anzeigen. Jetzt habe ich noch ein paar andere Sachen, also lass mich das entfernen. Ich hab nur diese Wasserbürste. Jetzt heißt es, im Internet zu verwenden. Alles, was Sie tun müssen, ist dieses Tag, diesen Code, in HTML einzubetten und diese dann zu verwenden, um diese Schriftfamilie im CSS zu verwenden. Wir werden das kopieren, wird in unseren HTML kommen. Und wir fügen es unter unseren Link zur style.css ein. Ich füge einfach da oben ein. Es könnte wirklich hier drin erscheinen. Wenn Sie auf den Anfang einer Zeile klicken und die Tabulatortaste drücken, können Sie alles richtig ausrichten. Wenn wir jetzt auf Speichern klicken, sieht es nicht sofort so aus, wie wir es wollen. Der andere Teil ist sehr wichtig , wo die CSS-Regeln stehen. Wir werden weitermachen und das kopieren. Und in unserem H1 im CSS, mach einfach weiter und füge das ein. Diese Eigenschaft heißt font-family. Und wie Sie sich vorstellen können, ändert es, was die Schriftart ist. Diese Schriftart heißt Wasserpinsel, die Zugriff auf die Verwendung von Google Fonts hat. Und es heißt, es ist kursiv. Drücken Sie „Speichern“. Sie können fortfahren und sich die Seite ansehen. Und dann gehen wir, es ist jetzt schick. Es ist alles kursiv. Das ist also ziemlich cool. Jetzt müssen wir es oben auf der Seite zentrieren . Was wir dafür tun können, ist, dass wir die Schriftgröße jetzt ändern , indem wir die Schriftgröße eingeben. Wenn Sie nach unten scrollen, werden Sie feststellen, dass es viele verschiedene seltsame Symbole gibt. Grundsätzlich sind dies verschiedene Maßeinheiten. Wir werden einen namens EMS verwenden, buchstabiert EM. Lass mich dir zeigen, wie man aussieht. Es sieht so aus. M ist im Wesentlichen die Standardschriftgröße Ihres Browsers. Ich denke, es basiert auf der Höhe des Buchstabens M. Dies ist ein m, und dies kann je nach Ihren Browsereinstellungen unterschiedlich sein . Aber was wir tun wollen, ist, wenn Sie es ändern, dies ist zweimal so. Was wir wollen, sind fünf Ampere, die das Fünffache der Standardschriftgröße haben. Es gibt andere Möglichkeiten , Blockgrößen zu erstellen. Sie können sie in Pixeln machen. Man kann sie tatsächlich in Zoll, Zentimetern, allerlei Dingen machen. Sie können damit experimentieren oder online schauen , um zu lernen, wie man sie benutzt. Da es viele interessante Möglichkeiten gibt, Dinge zu tun, können Sie auch Prozentsätze verwenden, wie wir es hier oben getan haben. Aber wir werden Ems benutzen. Jetzt haben wir es. Wir haben die Schriftgröße am Laufen. Was wir jetzt brauchen, ist es in der Mitte der Seite auszurichten. Ich füge eine weitere Eigenschaft hinzu und sage text-align center. Und wie Sie sich vorstellen können, richtet das den Text in der Mitte des Bildes aus, genau wie wir es wollten. Waren nah dran. Sie können sehen, dass wir noch nicht ganz da sind, aber wir werden viel erledigen. Im nächsten Video werden wir noch mehr Styling machen. 8. Selector Specificity und Hover-Effekte (CSS Teil 2): Okay, lass uns noch ein bisschen CSS machen. Okay, also das erste , was du dir ansehen sollst, wenn wir diese Websites vergleichen, kannst du fast einen Unterschied in der Seite des Bildes sehen. Sie sehen hier, dass sich dieses Bild bis zu den Rändern des Bildschirms erstreckt . Während es hier so ist. Warum ist das so? Nun, Browser werden automatisch eine Art Polsterung oder im Wesentlichen eine Speicherebene auf der Seite platzieren . Sie tun es nur standardmäßig, wir müssen tatsächlich etwas tun, um das loszuwerden , damit wir es so gestalten können, wie wir es auf jedem Gerät genauso aussehen lassen möchten. Okay, also lasst uns weitermachen und uns unseren Code ansehen. So können wir das machen. An der Spitze unseres CSS. Machen Sie etwas Platz und setzen Sie einen Stern, ein Sternchen. Das Sternchen ist ein Symbol, das alles bedeutet. Bedeutung. Anstatt ein Tag oder eine Klasse oder eine ID auszuwählen, gilt dies für alles auf der Seite. Okay? Jetzt sollte ich erwähnen, dass jeder von diesen ist, was wir einen Selektor nennen, einen CSS-Selektor. Dies ist also nur ein weiterer CSS-Selektor und das bedeutet, dass wir alles auswählen. Was wir also tun müssen, ist die Standardwerte loszuwerden. Und deshalb werden wir zwei Eigenschaften hinzufügen. Einer heißt Margin und eine heißt Padding. Was ist der Unterschied? Nun, Marge ist im Wesentlichen wie viel Platz auf der Außenseite eines Objekts ist. Wenn Sie also zwei Objekte hier und genau hier haben, ist der Rand der Abstand zwischen ihnen. Die Polsterung ist zum Beispiel, wenn Sie hier ein Objekt und dann ein Objekt darin haben , wie einige Texte, wie viel Abstand zwischen den Rändern des Objekts und dem, was sich darin befindet. Okay, also werden wir wahrscheinlich ein bisschen mehr darüber reden. Während wir weitermachen. Wir fügen etwas Spielraum und Polsterung hinzu. Aber was wir tun wollen, ist, dass wir diese Eigenschaften standardmäßig auf 0 setzen möchten, wir wollen einen Rand von 0, eine Auffüllung von 0. Also schau auf, was passieren wird. Wir klicken auf Speichern und sofort werden Sie sehen , dass das Bild an den Seiten des Bildschirms aufging. Und das liegt daran, dass wir diese Standardeigenschaften losgeworden sind. Sie fragen sich also vielleicht, ob wir eine Marge von 0 und eine Polsterung von 0 anwenden, alles, was passiert, wenn wir diese Eigenschaften später ändern wollen? Nun, das Ordentliche an CSS ist, dass die Eigenschaft, die für ein Objekt gilt, ein Objekt gilt davon abhängt, wie spezifisch Sie sind. Okay. Das klingt etwas verwirrend. Lass es mich erklären. Wenn wir zum Beispiel dieses Body-Tag haben, haben Sie eine Hintergrundfarbe von Schwarz. Nehmen wir an, wir möchten irgendwo auf die Seite eine Schachtel legen , die eine Hintergrundfarbe von Blau hat . Okay. Was wir tun können, ist, dass wir die Box geben könnten, ich bin spezifischer Selektor wie eine ID oder eine Klasse. Und sag, es hat eine andere Hintergrundfarbe. Und dann wird derjenige, der vager ist , der weiter weg ist, aufgehoben. Wenn wir also hinschauen, so funktioniert die Spezifität dass Tags am allgemeinsten sind, dann Klassen und dann IDs. Ein Ausweis wird also alles übertrumpft. Es wird es schaffen. Was auch immer Sie im Ausweis sagen , schließt alles andere aus , was Sie zuvor gesagt haben. In Ordnung? Ich hoffe, das ergibt ein bisschen Sinn. Wir müssen uns nicht allzu viele Sorgen um Spezifität von CSS in dieser Klasse machen. Wenn Sie mehr darüber erfahren möchten, können Sie online unzählige Dinge darüber finden. Aber ich dachte nur, ich sollte dich wissen lassen, wie das funktioniert. Wenn Sie nicht verstanden haben, worüber ich gerade gesprochen habe, lassen Sie es mich zusammenfassen, indem Sie sagen, dass wir diese Marge von 0 und diese Polsterung von 0 auf alles anwenden können . Aber dieser Selektor ist sehr allgemein, da er allgemein für alles gilt. Wenn wir etwas Spezifischeres erstellen, wählen wir das Tag oder die Klasse oder die ID aus. Welche Marge oder Polsterung wir auch immer angezogen haben , das übertrumpft alles und gibt Regeln aus. Dies. Okay? Dies schafft nur die Voraussetzungen dafür, uns tun zu lassen, was wir wollen. Geh weiter und heb dir das auf. Was ist anders? Nun, es gibt einen anderen Abstand zwischen dem Header hier und dem Navigationsgerät. Wir haben diese Bilder auch hier unten. Und wir haben auch diese ordentlichen Hover-Effekte. Fangen wir damit an. Wie macht man den coolen Schweben? Okay, es ist ziemlich einfach. Was wir tun müssen, ist einen anderen Selektor zu erstellen. Und wir werden sagen, dass es H1 ist, aber wir setzen einen Doppelpunkt ein und wir sagen Hover, was bedeutet, dass wir das H1-Tag auswählen, aber wir sind spezifisch und sagen, ob wir darüber schweben, wie dies, schwebt mit der Maus. Okay. Was wir dann tun können, ist, dass wir eine Farbe Blau setzen können. Und genauer gesagt werden wir diese Farbe verwenden. In Ordnung? Was Sie tun können, ist, dass Sie dieses Wort für Wort kopieren können , wenn Sie möchten. Aber lass mich dir zeigen, wie das funktioniert. Als ich das erstellt habe, habe ich ursprünglich mit Blue angefangen. Das Coole an VS Code ist, dass Sie sie ändern können, wenn Sie mit der Maus über eine Farbe fahren. Sie haben diesen Farbwähler. Okay. Ich habe die Farbe gefunden, die ich wollte. Und Sie können sehen, dass es diesen RGB-Code an der Spitze hat. Und das ist im Wesentlichen das. Der RGB-Code bedeutet im Grunde genommen, dass dies die Menge an Rot ist, dies ist die Menge an Grün, und dies ist die Menge an Blau, um diese Farbe zu erhalten. Und so ist die Syntax dafür RGB. Und dann trennen Sie in Klammern einfach die Werte nach Aqaba. Und stellen Sie sicher, dass danach ein Semikolon vorhanden ist. Wenn wir also auf Speichern klicken und auf unsere Seite gehen, wenn ich es hervorhebe, wird es jetzt schwarz. Sie werden jedoch feststellen, dass mein Cursor nicht ganz das ist, was wir wollen. Wenn du hier drüben schaust, hat es mehr vom Zeigefinger. Es ist etwas, das identifiziert, dass Sie darauf klicken können, was Sie können. Aber das haben wir nicht hier. Wie können wir das kriegen? Nun, bei demselben Hover-Selektor fügt eine weitere Eigenschaft namens Cursor hinzu. Es gibt eine Vielzahl von Cursor, die Sie bekommen können. Alles vom Laden bis hin zu jedem Cursor, den Sie jemals im Web gesehen kann hier größtenteils definiert werden. Wenn wir zum Beispiel greifen und Save drücken, gibt es uns diese kleine Hand, als könnten wir sie bewegen. Okay, also heißt der, den wir suchen, Pointer. Das ist nur diese einfache Klick-Sache. Also wollen wir das. Wir wollen auch hier einen Übergang machen, der verblasst, im Ballon verblasst , so dass er etwas natürlicher aussieht. Wie genau hier. Man kann sehen, dass es etwas langsamer verblasst. Also werden wir hier eine Immobilie namens Transition platzieren. Wir werden einen Übergang verwenden, der einfach in, out genannt wird. Nun, was das bedeutet, ist der Übergang, er hat im Grunde einen langsamen Start und ein langsames Ende. Einfach rein und raus. Okay? Und so ist die Ausgabe hier etwas schwer zu erkennen, aber man kann auch einfach einfach sagen. Es gibt eine Vielzahl von Übergängen, die Sie verwenden können. Als nächstes werden wir ein Leerzeichen setzen und 0,2 S vier Sekunden setzen. Das macht es also im Wesentlichen so, dass die Animation ich innerhalb von 0,2 Sekunden passiert . Es rettet. Und jetzt fahren wir mit dem Mauszeiger darüber. Und du siehst, obwohl es nur 0,2 Sekunden sind, macht einen Unterschied. Es fühlt sich natürlicher an. Es ist einfach, es fühlt sich einfach schöner an. Okay? Also haben wir unseren Header im Grunde genommen erledigt. Warum legen wir die vier Bilder nicht unter das Hauptbild hier. Was wir in unserem Code machen wollen, erstellen wir eine ungeordnete Liste. Die ungeordnete Liste ist also im Grunde eine Aufzählungspunktliste. Es ist nicht nummeriert. Eine geordnete Liste wäre nummeriert. Also erstellen wir im Wesentlichen eine Aufzählungspunktliste und ich zeige Ihnen in nur einer Minute warum. Aber in diesem Aufzählungspunkt. Listen, wir möchten jedes der Bilder einfügen. Also werden wir LI für Listenelement sagen. Und wir erstellen ein Image-Tag. Bild und die Quelle. Wir wollen Bild 1234. Wir wollen sie alle zeigen. Man sagt Bild einen Punkt JPEG, JPEG. Und wir können die Berge genau dort hineinlegen. Okay, ich kopiere das und füge es dreimal ein, damit wir vier davon haben. Dann ändere einfach Bild in Bild drei und Bild für. Für die Zwecke dieser Klasse werde ich mir keine Sorgen um die anderen Alt-Tags machen, aber das ist etwas, das Sie wahrscheinlich einsetzen möchten. Du wirst dich entscheiden. Mal sehen, wie das aussieht. Okay, damit wir sehen können, dass es die Bilder zeigt. Sie sind allerdings enorm. Es sieht so aus, als müssten wir die Größe ändern. Okay? Was wir also tun werden, ist, dass wir eine Klasse für diese Bilder erstellen werden. Denn wenn ich einfach select sagen würde, tut mir leid, wenn ich nur das Bild-Tag verwenden würde, würde es dies auch ändern. Und wir wollen nicht, dass dies genauso aussieht wie die kleineren Bilder. Lassen Sie mich Ihnen zeigen , wie Sie eine Klasse erstellen. Wir fügen ein HTML-Attribut namens class hinzu. Sie können dort einfach auf den Tab klicken. Und wir werden das kleine Bild oder IMG nennen. Der Grund, warum wir eine Klasse erstellen, liegt darin , dass wir dieselben Eigenschaften auf alle vier dieser Bilder anwenden möchten . Also werden wir diese Klasse hinzufügen, jedes Tag in der Liste. Ich speichere das in unserer style.css wird dot für die Klasse eingeben und wir sagen kleines Bild. Und wir möchten jedem von diesen eine Breite von 100 Pixeln geben. Okay, es macht sie einfach wirklich, jeder ist einfach sehr klein. Und mal sehen , wie das aussieht. Okay? Also haben wir die vier Bilder genau da. Okay? Jetzt müssen sie zentriert sein. Also lasst uns einfach weitermachen. Lassen Sie uns einfach zuerst die Bilder stylen und dann zeige ich Ihnen, wie wir den Abstand machen. Okay? Lassen Sie uns also jedem von ihnen eine Grenze geben, wir sagen einen Drei-Pixel-Rahmen, was bedeutet, dass er drei Pixel dick ist. Ich sage „einfarbig weiß“. Um die Ecken zu runden, verwenden wir eine Eigenschaft namens Randradius, was nur eine ausgefallene Art ist, um zu sagen, dass wir die Ecken runden und zehn Pixel speichern werden. So können Sie sich hier mit der Messung anlegen. Aber im Wesentlichen gilt: Je höher die Pixelanzahl ist, desto größer ist der Strom , bis er fast kreisförmig wird. Also werden wir zehn Pixel sagen, um nur ein abgerundetes Rechteck zu erhalten. Sieh mal. Okay? Und ja, lasst uns die vorerst dort lassen. Im nächsten Video erkläre ich, wie man sie horizontal unter diesem Bild ausrichtet. 9. Lernen Flexbox und Margin Spacing (CSS Teil 3): In diesem Video werden wir etwas über eine großartige CSS-Eigenschaft namens Flexbox erfahren . Klingt beängstigend, aber ich verspreche es ist großartig. Lassen Sie mich irgendwie herausfinden, was es ist, damit Sie das ein bisschen besser verstehen können . Stellen wir uns vor, wir haben diese Box, diesen Container, okay? Und eigentlich, lasst es uns so skalieren. Gerade jetzt. Unsere Bilder sind so gestapelt. Okay? Das sieht also so aus. Das ist also irgendwie das, was wir vor sich haben. Jetzt, wenn wir Flexbox anwenden. Hier ist, was sich ändern wird. Alles wird waagerecht werden. Und dann wird plötzlich alles so ausgerichtet sein, oder? Oh, du hast nicht gesehen, dass ich nicht sehr geschickt im Whiteboard bin. Aber du hast die Idee, alles wird drin sein. Und die Flexbox bietet uns einige andere interessante Eigenschaften. Ich werde in der Klassenbeschreibung einen Link zu einer speziellen Flexbox-Referenz einfügen. Ich kann es nur wärmstens empfehlen, es mir anzusehen. Es ist ein wunderschönes Diagramm, erklärt die Dinge einfach viel besser als ich hier kann. Aber ich zeige Ihnen, wie wir das auf unserer Website verwenden werden. Was wir also tun möchten, ist, die Flexbox-Eigenschaft auf die ungeordnete Liste anzuwenden , da dies Alle Listenelementelemente enthält. Wenn Sie es also vergessen haben, sind dies technisch gesehen alles Aufzählungszeichen. Man kann die Aufzählungspunkte einfach nicht wirklich sehen. Weil alles schwarz und zusammen püriert ist. Und wir werden die Aufzählungspunkte später tatsächlich loswerden , ich zeige Ihnen, wie das geht. Aber was wir tun müssen, ist dies in eine Flexbox zu verwandeln, damit sie horizontal sein kann. Also gebe ich UL für das ungeordnete Listentag ein und sage Flexbox anzeigen. Wenn du hinsiehst, gibt es noch andere Dinge hier. Als wir über HTML und den Beginn der Klasse sprachen, haben wir ein wenig über Block- und Inline-Elemente gesprochen. Eine andere Art von Anzeige für ein Objekt ist also eine Flexbox. Und du kannst tatsächlich nur Schwarze schreiben , um die Flexbox zu benutzen. Okay. Mal sehen, was passiert , wenn wir das tun. Okay, sofort hat es es zur Seite gedreht. Jetzt brauchen wir etwas Platz dazwischen. Wir werden also eine für Flexbox spezifische Eigenschaft verwenden, die als justify content bezeichnet wird. Im Grunde heißt das „ rechtfertigen“ der Abstand. Wie werden wir also den Inhalt in der Box oder in der ungeordneten Liste platzieren. Also werden wir Space sagen. Was das bedeutet, ist, dass ich dir ein paar Clips zeigen soll. Tut mir leid, nicht da. Lass mich dir hier etwas Ordentliches zeigen. Diese lila Box ist unsere ungeordnete Liste. So können Sie sehen, wann wir den Abstand zwischen den Elementen verwenden , die die Seiten an den Enden berühren, aber zwischen allen ist Platz. Wenn Sie Platz sagen würden, würde es auch auf der Außenseite Abstand geben. Okay. Das ist also definitiv ein Schritt besser, aber nicht ganz das, wonach wir suchen. Okay, jetzt müssen wir eine weitere Eigenschaft hinzufügen. Wir möchten diesem eine eingeschränkte Breite geben, damit sie abgeschnitten werden kann und nicht die gesamte Breite des Bildschirms beansprucht. Und wir geben ihm eine Breite von 500 Pixeln. Jetzt. Zusammengeschlagen sieht es eher wie die ursprüngliche Website aus. Okay? Was wir jetzt tun wollen, ist, dass wir zwischen dem Hauptbild und diesen Jungs etwas Platz schaffen wollen. Also werden wir hier die Margin-Eigenschaft verwenden. Jetzt funktioniert die margin-Eigenschaft, dass Sie sie zwischen einem und vier Eingaben geben können . Okay? Wenn wir also zehn Pixel sagen würden, würde das einen Rand oder ein Leerzeichen von zehn Pixeln oben setzen . Unten und an den Seiten kann man nur wirklich sagen, dass es oben und an der Seite ist. Wenn wir eine zweite Eigenschaft wie fünf Pixel platzieren würden, bedeutet dies, dass oben und unten zehn Pixel Platz und dann fünf Pixel links vorhanden oben und unten zehn Pixel Platz und wären. Und die Rate. Wenn wir ein anderes wie fünf Pixel hier platzieren, sind dies zehn Pixel oben, fünf Pixel links und rechts und fünf Pixel unten. Und dann die vierte Eigenschaft, wenn wir etwas anderes wie drei Pixel setzen, dann wären es zehn Pixel oben, fünf Pixel rechts, fünf Pixel auf der unteren Drei-Pixel-Lungenseite. Das klingt also wirklich verwirrend, aber lassen Sie es mich ziemlich einfach erklären . Okay. Lass mich mein Whiteboard nochmal hochziehen, damit ich das etwas besser erklären kann. Also haben wir hier eine Kiste und dann haben wir hier oben etwas Abstand. Ein paar Abstände hier, hier und hier. Wenn Sie Messungen eingeben. Oder mal sehen. Wenn wir eingeben. Wenn Sie Eingaben in die Margin-Eigenschaft einfügen, funktioniert es so. Beginne immer oben und gehe gegen den Uhrzeigersinn. Wenn wir also zehn Pixel sagen, fangen wir oben an. Und weil es nur einen Wert gibt, gilt er für alles. Okay? Wenn wir einen anderen als das erste setzen, sind zehn Pixel. Der zweite besteht aus fünf Pixel. Und das gilt für beide Seiten. Und dann ist der Boden zehn Pixel können grundsätzlich oben und unten unser erster Wert und dann die Seiten desselben Wertes sind . Wenn wir einen weiteren Wert hinzufügen , sind die Spitze zehn Pixel. Das sind Seiten sind fünf Pixel und der Boden ist drei Pixel. Sie können sich also nie einfach im Uhrzeigersinn bewegen. Okay? Wenn wir dann eins mehr als die obere ist zehn, ist die rechte fünf, unten ist drei, links ist eins. Ich hoffe, das hilft dabei etwas. Für unsere Zwecke werden wir jedoch etwas anderes benutzen. Wir beginnen also mit einem Rand von 20 Pixeln. Lass mich dir zeigen, was dort passiert ist. Es legt die 20 Pixel auf jede Seite, aber wir möchten, dass es zentriert wird. Für unseren linken und rechten Wert werden wir tatsächlich auto sagen. Und was das bedeutet ist, dass die Höhe 20 Pixel beträgt, und dann werden die Seiten im Grunde einfach aufgeteilt , um automatisch den gleichen Raum zu haben. Was das in der Praxis bedeutet, ist, dass wenn wir diese Größe ändern, der Platz auf der linken Seite und der große Wert ändert, aber die Leerzeichen sind gleich, oder? Der gesamte Raum ändert sich also, aber diese Seiten sind gleichwertig. Was ich, was ich meine zu sagen, dass Auto uns helfen wird , zu zentrieren , dass es ihnen gut geht. Und jetzt legen wir das Schwebeobjekt drauf. Okay? Mit diesem wollen wir es also auf unseren kleinen Bildern machen. Was wir also tun werden, ist, dass wir das erste, was wir tun wollen, ist, alle Aufzählungspunkte loszuwerden , die möglicherweise vorhanden sind. Man kann sie nicht wirklich sehen wegen Schwarz. Aber wenn das, wenn alles weiß war, dann geht's los. Wenn die Seite weiß ist, können Sie sehen, dass es Aufzählungspunkte gibt, also müssen wir diese loswerden. Was wir also tun werden , bevor wir die kleinen intimen Bilder hinzugefügt haben, ist, dass wir nur für alle Listenelemente sagen werden, wir möchten, dass der Listenstil keine ist. heißt, Sie können Ihre Aufzählungspunkte auf verschiedene Arten gestalten Ihre Aufzählungspunkte auf verschiedene Arten und wir möchten, dass es kein Styling gibt , also zeigt einfach nichts. Okay. Jetzt zurück zu unseren kleinen Bildern. Wir werden ein kleines Bild erstellen. Doppelpunkt, oben, rechts, genau wie wir es mit dem H1 gemacht haben. Und wenn wir darauf schweben, um diesen Blaseneffekt zu erzielen, werden wir tatsächlich etwas tun , das ziemlich einfach ist. Sie können sehen, dass die Bilder nur ein bisschen größer werden. Und das liegt daran, dass es nur die Breite vergrößert. Wir können die Breite ändern, lasst uns 110 Pixel machen, denn normalerweise sind es nur 100. Und so sieht man, dass es sehr bissig ist. Wenn ich darüber markiere, ändert sich sofort. Was wir also tun wollen, um das etwas reibungsloser zu gestalten, ist ein weiterer Übergang. Und dafür werden wir einfach „Leichtigkeit “ sagen und 0,2 Sekunden machen. Okay? Also ist es ein bisschen besser. Aber es sieht so aus, als gäbe es noch etwas Arbeit, die geschehen muss. Es ist also glatt, wenn wir darauf fahren, aber wenn wir die Maus abnehmen, ist es etwas zu bissig. Es ist nicht sehr glatt. Wir möchten also die einfache Eigenschaft auf die kleinen Bilder setzen. Es ist auf dem kleinen Bild selbst und nicht auf dem Schweben. Ich zeig dir warum. Wenn wir es also sagen würden, stellen Sie den Übergang über Transformation, Entschuldigung, Übergang und wir sagen Ease Out Vielleicht 0,3 Sekunden. Was passiert ist, dass es sich erleichtert, wenn Sie darüber hervorheben, aber wenn Sie mit der Maus oder es verbraucht. Warum haben wir es auf das kleine Bild gelegt und nicht schweben? Nun, denn wenn wir schweben, wollen wir, dass es sich erleichtert. Aber wenn es einfach normal ist, wie nur ohne den Schweben, wollen wir, dass es sich erleichtert. Jetzt werden Sie bemerken, wenn wir die Seite aktualisieren, Mal sehen. Es ist ein bisschen schwer zu sagen. Aber manchmal sind die Bilder. Da gehst du. Sie können sehen, dass das Bild ein wenig erleichtert wird , wenn die Seite geladen wird. Und das ist das Ergebnis, dass wir dies hierher gebracht haben. Aber ich denke, es ist, ich denke, es ist in Ordnung. Jetzt gibt es zwei weitere Eigenschaften, die ich in diesem Video hinzufügen werde. Der erste ist, dass wenn wir mit der Maus über diese Bilder fahren, es so aussieht, als könnten wir sie anklicken. Okay, also setze ich meinen Cursor und sage Zeiger. Okay, so sieht es aus, als könnte ich sie anklicken. Eine weitere Sache, die Sie bemerken werden, wenn sich die Breite der Bilder erweitert, sind sie nicht zusammen zentriert. Sie können sehen, dass alle Oberteile hier ausgerichtet sind, aber die Böden sind nicht ausgerichtet. So können wir das beheben, indem wir zu unserer UL gehen und eine Eigenschaft namens „Align Items“ hinzufügen. Im Gegensatz zu justify, content, ist justify eine Art linke und rechte Ausrichtung und Ausrichtung von Elementen. Oder wenn Sie eine Linie sagen, ist es eine vertikale Ausrichtung. Wenn wir also hier Mitte sagen, werden alle Bilder so neu ausgerichtet, dass sie immer zentriert sind , so dass die Mitte der Bilder immer im Einklang steht. Und so ist es unten oder oben rechts nicht zu groß. Bis wir diesen Blaseneffekt bekommen können. Im nächsten Video beginnen wir mit der Erstellung unserer Navbar. Und das wird wirklich aufregend. Also sehe ich dich im nächsten. 10. Erstellen eines Navigationsmenüs: Okay, reden wir über die Navigation. Das ist unsere Nav-Bar hier oben. Lassen Sie mich Ihnen einige der Funktionen erklären. Wir haben hier eine andere Schriftart als die Standardschrift, obwohl es möglicherweise schwer zu sagen ist, dass dies nicht die Standardschrift ist. Also müssen wir das hinzufügen. Das werden wir von Google-Schriften bekommen. Wir müssen einen Hover-Effekt mit den Farben machen. Wir müssen den Spielraum erreichen und dort etwas Abstand haben. Wir werden einige Flexbox-Elemente damit verwenden und das UL-Zeug, die ungeordnete Liste, Dinge, die wir mit den Bildern hier unten gemacht haben. Und wir müssen es tatsächlich dazu bringen, zu anderen Seiten zu navigieren. Also lasst uns anfangen. Das erste, was wir in unserem HTML-Code tun müssen , ist das Hinzufügen eines Nav-Elements. Das Nav-Tag macht nicht wirklich so viel. Es ist eher eine Trennung in unserem Code für die Person, die die Website erstellt, um die verschiedenen Teile unterscheiden zu können. Es ist einer dieser seltsamen HTML-Standards , der nur eine Sache ist. Aber wir werden es hier verwenden , um sicherzustellen, dass wir die Dinge irgendwie in Einklang halten können , damit wir nicht verwirrt werden, wo sich die Navigation befindet. Und hier drinnen brauchen wir eine weitere ungeordnete Liste. Und wir brauchen Listenelemente, oder? Also haben wir die vier Seiten. Wir wollen Home-Galerie über uns und Kontakt aufnehmen. Offensichtlich kannst du es machen, wie du willst. Aber genau das werden wir dafür tun. Also erstellen wir ein Tags für unsere Links. Erstellen wir hier ein Tag. Und für den H-Ref werden wir noch nichts ganz sagen. Ich zeige dir in einer Sekunde, was wir damit machen werden. Aber zwischen dem Eröffnungs- und Schließ-Tag werden wir nach Hause gehen. Und jetzt müssen wir das ein paar Mal kopieren , damit wir Gallery und Bounce und Kontakte haben können . Wenn Sie sich jetzt ansehen, was das geschaffen hat, können Sie sehen, dass es hier unten tatsächlich aufgetaucht ist. Okay, das ist also, das ist interessant, das zeigt mir, dass unser Code wahrscheinlich in der falschen Reihenfolge ist, dh Sie können sehen, dass unser Bild-Tag hier über ihnen liegt. Also müssen wir das da runter bewegen. Und ich werde sparen. Und Okay, jetzt ist es hier oben. Man sieht, dass alles perfekt ist. Ich glaube, das bedeutet, dass der Link besucht wurde. Wenn Sie also ein ungestyltes Blinzeln sehen, wird es oft unterstrichen und es ändert Farben, je nachdem, ob Sie darauf geklickt haben oder nicht. Das angesagte Ding, wir wollen all das loswerden , damit wir es zu unserem eigenen einzigartigen Ding machen können. Okay, jetzt wirst du etwas sehr Interessantes bemerken. Es ist bereits auseinander. Im Grunde wie wir es wollen. Warum ist das so? Nun, schauen wir uns unseren Code an. Okay? Zuvor geben wir an, dass es sich bei einer ungeordneten Liste um eine Flexbox handelt. Wir wollen Platz dazwischen haben. Wir haben eine bestimmte Breite, bestimmten Rand und eine Ausrichtung von Objekten. Und da die Navigation auch eine ungeordnete Liste ist, gilt das alles auch. Nicht nur das, sondern weil wir das LI hier mit dem Listenstil von keinem haben das LI hier mit dem Listenstil von , gilt das auch. Wir müssen uns also keine Sorgen machen, Aufzählungspunkte loszuwerden. Hälfte unserer Arbeit ist also bereits erledigt und wir mussten nichts extra machen, was ziemlich episch ist. Die Hauptsache, die wir tun müssen, ist, die Schriftart zu ändern, die Unterstreichungen loszuwerden und die Links funktionieren zu lassen. Fangen wir mit dieser Schriftart an. Wir gehen zu Google Fonts. Und wir werden eine Schriftart namens Rowboat Density bekommen. Ich suche hier nach einem echten Ruderboot rumgestoßen. Ja, ich weiß nicht, dass er dabei ist, aber klicken wir darauf. Okay. Sie können also sehen, dass es im Gegensatz zum anderen hier viele verschiedene Stile gibt, viele verschiedene Dicken. Und deshalb müssten wir entscheiden, was wir wollen, weil wir nichts Fantastisches brauchen. Wir werden einfach mit regulären 400 gehen. Nur die Art der Standard-Basisschrift. Sie können mehrere Anleihen auswählen, mit denen Sie das Schriftgewicht oder im Wesentlichen die Kühnheit im CSS ändern können. Aber das brauchen wir nicht wirklich. Wir verwenden nicht so viele Wörter auf der Seite. Also wählen wir diesen Stil hier aus und gehen nach oben und du bist ausgewählte Familien. Und jetzt müssen wir diesen Link in unseren Code aufnehmen. Also lasst uns weitermachen und hinzufügen. Jetzt wirst du etwas Interessantes bemerken. Ein Teil des Codes, den es verbunden hat, ist Schritt wo Sie haben. Also haben wir diese beiden Zeilen für die vorherige Schriftart, die wir verwendet haben, aber dann hat sie sie wieder aufgenommen. Also brauchen wir die Duplikate nicht wirklich und werden diese los. Alles was wir brauchen ist dieses besondere, entschuldigen Sie mich, dieses spezielle , das Roboto spezifiziert. Okay, das ist großartig. Ein oder zwei weniger, weniger Codezeilen. Und jetzt müssen wir die CSS-Regeln oder die Eigenschaften kopieren , die dies hier kopieren. Und mal sehen. So möchte ich das tun, denke ich, dass es gut wäre, eine Klasse für jedes der Listenelemente zu haben . Was wir also tun werden, ist eine Klasse von Navigationsgegenständen zu platzieren. kopiere ich. Jeder von diesen. Großartig. Jetzt werden wir gehen und einen Punkt oder eine Periode für unsere Klasse machen und nav Item sagen. Und kopiere das noch einmal. Großartig. Also lass mich dir zeigen, was hier passiert. Die Farmfamilie, die wir gewählt haben, ist Roboto. Aber es hat die zweite Eigenschaft, die San Serif ist. Sans-Serif ist eine ziemlich einfache Schriftart. Und der Grund, warum es es einschließt, ist, dass, wenn es nicht kann , aus irgendeinem Grund Roberto nicht bekommen kann, es standardmäßig Sarah sendet. Wenn Googles Website abstürzen würde und wir die Schriftart nicht finden könnten , würde sie nicht alles kaputt machen. Es sieht etwas hässlicher aus, aber es würde standardmäßig auf diese Antwort zurückgreifen. Das heißt das also. Wir fahren fort und klicken auf „Speichern“. Und lasst uns die Ergebnisse sehen. Okay, also die Schrift, ich glaube, das ist anders. Testen wir das mal. Ich drücke hier Control Slash auf meiner Tastatur und es kommentiert diese Zeile, damit dies nicht der Fall ist, es ist kein Effekt. Okay, ja, es gibt also einen kleinen Unterschied in den Schriftarten. Ich mag es, aber wir werden es tun, das werden wir haben. Okay? Und jetzt müssen wir das Lila und die Unterstreichungen und alles loswerden . Also füge ich hier unten einen weiteren Selektor hinzu, und wir nennen das eine Doppelpunktgouache. Dies bezieht sich also auf das a-Tag und ähnlich auf den Hover , den wir hier oben gemacht haben, dies ist die Eigenschaft eines Tags namens link. Und wir können das gezielt stylen. Wir werden Textdekoration sagen. Keine. heißt, es unterstreicht es nicht. Ähnlich wie wir keine Listenstil hatten. Sie haben die Aufzählungspunkte losgeworden. So ist der Text dekoriert. Für einen Link. Wir wollen es überhaupt nicht dekoriert. haben wir da hingestellt. Jetzt fügen wir einen hinzu, der einen besuchten Doppelpunkt genannt wird, was bedeutet, dass er besucht wird, was bedeutet, dass der Link zuvor besucht wurde. Und deswegen ist es lila. Und wir wollen nicht, dass es irgendetwas tut. Also nochmal werden wir Textdekoration sagen. Nein. Das hat nichts bewirkt. Okay. Vielleicht wurde diese Eigenschaft nicht benötigt. Aber ich lasse es nur für alle Fälle dort liegen. Aber was das wirklich ändern kann, ist das Hinzufügen einer Farbe von Weiß. Okay, großartig. Als wir den Link besucht haben, tut es das nicht. Es wird nicht lila, was großartig ist. Wir brauchen es nur, um rot zu werden , wenn wir es hervorheben. Was wir dafür tun können, ist Navi erstellen, Item Doppelpunkt schweben. Wir haben das schon mal gemacht und sagen einfach Farbe Rot. Und wieder wollen wir einen schönen Übergang machen , damit er reibungslos aussieht. Also setze den Übergang. Und dieser wird Leichtigkeit sagen, raus. Und Tau 0,2 Sekunden. Wenn wir es jetzt hervorheben, ist es nett wenig. Nette Effekte. Großartig. Okay. Und so haben wir im Grunde alles abgedeckt. Wenn wir den Navigationsgegenstand markieren. Wir haben den Zeiger. Ich glaube, es ist standardmäßig ein Zeiger, weil es ein Link ist. Und dann schwebte es. Wenn wir den Mauszeiger darüber bewegen, wird es gelesen. Alles, was wir jetzt tun müssen, außer dass die Links funktionieren, ist, den richtigen Abstand zu finden. Also werde ich genau hierher kommen und das Nav-Tag richtig machen, damit wir das gezielt stylen können. Jetzt wirst du bemerken, dass ich immer wieder um diese Datei hüpfe und Dinge an verschiedenen Stellen hinzufüge. Der Grund ist, dass ich gerne organisiert bin und Dinge zusammenfassen kann. Sie können also sehen, dass alle Nav-bezogenen Elemente zusammen sind, alle As sind zusammen. Und die ULs, die Verbündeten mögen alles, arbeiten zusammen. Gruppe Ich gruppiere es zusammen. Das mache ich also. Okay, also wirklich das Ich sollte erwähnen, dass es egal ist, wo in der Akte du das platzierst. Es wird immer funktionieren. Also könnte ich das abschneiden und es hier runter stellen. Und es würde keinen Unterschied machen, oder? Es ist einfach wichtig, dass es in dieser Akte steht. Das Letzte, was wir hier tun müssen, ist die Marge. Okay? Also setze ich Marge. Jetzt sieht der Abstand oben schon ziemlich gut aus. Also lasst uns mit 0 nach oben gehen. Links und rechts müssen wir nichts ändern, müssen wir nichts ändern weil wir bereits diesen schönen Spielraum haben. Also, Whoops. Versuchen wir es mit einer weiteren 0. Dann für den Boden, naja, für den Boden machen wir nur zehn Pixel. Und dann wieder, oh ja, ja. Dies wird also Top 0 sein, links 0, untere zehn Pixel. Okay? Sie werden also sehen, dass es jetzt gut aussieht, weil wir hier Nullen haben und nur den Boden verwenden, es gibt tatsächlich eine andere Eigenschaft, die wir verwenden können. Und es heißt Margin, Bottom und alles, was wir sagen können, nur zehn Pixel. Also brauchen wir das eigentlich nicht alles hier zu haben. Also sage ich einfach im Rand die unteren zehn Pixel. Und mal sehen, wie es vorankommt. Mal sehen, wie ähnlich es unserer anderen Website aussieht. Okay, du siehst, dass sie identisch sind. Das einzige, was übrig bleibt, ist die Funktionalität. Fangen wir also an , diese Links zu machen. Okay? Also haben wir unsere H Ref-Elemente hier. Wir müssen es mit etwas verknüpfen. Zuvor haben wir darüber gesprochen, es mit einer Website zu verknüpfen, aber wir müssen es mit einer Datei verknüpfen , die wir in unserem Ordner bei uns haben. Also werden wir tatsächlich eine weitere Seite namens Gallery Dot HTML erstellen . Dies ist die Galerie-Seite, auf der nur die anderen vier Bilder angezeigt werden. Und der Grund, warum ich diese Seite habe, ist nur die Links zu demonstrieren, entschuldigen Sie mich, diese zu stylen. Wir drücken einfach Control a und kopieren alles darüber und werden einfach los , was wir nicht brauchen. Auf diese Weise müssen wir die meisten Dinge nicht neu schreiben. Okay? Also mal sehen, wir können das Haupt loswerden. Nun, wir werden das alles vorerst loswerden und einfach die Spitze verlassen. So funktionieren die Schriften und alles noch. Okay? Was wir hier machen wollen, ist mal zu sehen, wir wollen ein Hauptbild machen, was bedeutet, dass dies das Hauptbild ist. Und auf der Galerie-Seite möchten wir es immer wieder so anzeigen. Also werden wir hier das Hauptbild als Klasse verwenden. Und lasst uns das machen. Wir erstellen ein Image-Tag. Und wir werden nur sagen, dass die Quelle Bild eins ist. Und dann kopiere ich das. Lasst uns das in drei bis vier ändern. Jetzt müssen wir ihm eine Klasse von Hauptbildern geben. Hier ist das Problem. Wir haben es schon benutzt. Hauptbild hier drüben als ID. Lasst uns das also einfach in eine Klasse ändern. Und dann finden wir in unserer CSS-Datei das Hauptbild. Und anstatt ein Pfundzeichen zu haben, wird eine Periode dauern. Und jetzt ist es eine Klasse. Also mal sehen, alles kaputt geht, okay, es ist gut, es ist gut. Okay, also lass uns jetzt diese Bildklasse hinzufügen. Und ich kopiere das und füge es jedem ein. Okay, jetzt können wir noch nicht sehen , wie die Seite aussieht , weil wir keine Möglichkeit haben, sie zu erreichen. In unserer index.html in der Galerie H ref werden wir einfach Galerie-Punkt HTML platzieren . So einfach ist das. Wir haben Speichern geklickt. Ich kann jetzt hier klicken. Und es bringt mich zur Galerie-Seite. Jetzt können Sie sehen, dass es nicht genau so ist, wie wir es wollen. Wir brauchen etwas Platz zwischen den Dingen und wir brauchen immer noch die Navigationsleiste oben. Okay, hier ist was wir tun werden. Ich zeige Ihnen, wie Sie Inline-Styles erstellen. Ein Inline-Stil ist also, wenn wir CSS direkt in die HTML-Datei aufnehmen . Anstatt eine externe Datei zu erstellen, wie wir es hier getan haben. Der Grund, warum Sie dies tun möchten, ist, wenn Sie nur ein oder zwei Dinge haben , die gestaltet werden müssen und kein Haufen. Normalerweise empfehle ich nicht, Inline-Styles zu verwenden. Wenn Sie viele Stile haben, die im Gange sind, überflutet es nur die HTML-Datei. Aber hier kann es nützlich sein. Innerhalb des Body-Tags erstelle ich also ein Style-Tag. Alles innerhalb des Style-Tags wird als CSS behandelt. Wir werden also IMG für Bild sagen , weil wir den Abstand zwischen all diesen Bildern setzen wollen . Ich werde nur einen Rand unter 50 Pixel setzen. Auf diese Weise gibt es unter jedem etwas Platz. Okay, das gibt uns diesen netten, netten Effekt, oder? So macht man also einen Inline-Stil. Was wir jetzt tun müssen, ist unsere Nav-Bar fertigzustellen. Wir werden also nur Links zu zwei der Seiten erstellen. Weitere Homepage. Wir verlinken es mit index.html. Unabhängig davon, auf welcher Seite Sie sich befinden, wenn Sie auf Home klicken, Sie zu dieser Hauptseite. jetzt Da wir jetzt nichts setzen, setzen wir einfach ein Pfundschild. Und das ist eine Art Platzhalter. Wenn Sie auf diese Schaltflächen klicken , werden Sie tatsächlich einfach zur index.html weitergeleitet. Jetzt, da wir das haben, kopieren wir es und fügen es in unsere Galerie unter dem Explorer ein. Okay, und jetzt haben wir unsere Navigationsleiste. Vielleicht stellen Sie fest, dass wir hier zwei Probleme haben , bei denen diese Typen nicht tun, was sie sollen. Sie sind blau, wenn sie weiß sein sollten. Mal sehen, was wir tun können, um das zu beheben. Ich gehe zu unserem Navigationsgerät hier in unserem CSS und sage, dass es immer weiß sein soll. Also gebe ich ihm einfach eine Farbe von Weiß. Standardmäßig ist es immer weiß, egal ob wir darauf geklickt haben oder nicht. Aber das sollte dieses Problem beheben. Das letzte, was ich in Bezug auf die Navigation machen möchte , ist es so zu machen, dass wir auf dieses Erkunden-Symbol klicken und es auf die Homepage gehen lassen können auf dieses Erkunden-Symbol klicken . Im Moment ist es nur 81. Und deshalb müssen wir ein bisschen modifizieren. Um dies zu tun, legen wir den H1 in ein Tag ein. Also lasst uns weitermachen und das ein Tag erstellen. Und wir wollen, dass das H auf die index.html verweist. Das ist also unsere Homepage. Jetzt können wir diesen Text einfach ausschneiden und ihn in unser Tag stecken. Sie können Tags wie diese verschachteln, und wir haben einfach unser H1 im a-Tag. Wenn wir jetzt darauf klicken, bringt es uns zur Homepage. Wenn wir also zur Galerie gehen, müssen wir dies tatsächlich kopieren und auch in unsere Galerie einfügen. Wenn ich jetzt darauf klicke, bringt es uns zurück zu unserer Homepage. Okay? Jetzt können Sie sehen, dass wir so kurz davor sind, fertig zu sein. Die Websites sehen aus, als würden sie identisch aussehen. Ich denke, es gibt stilistisch keine Unterschiede zwischen den beiden Seiten. Das einzige, was wir tun müssen, ist JavaScript hinzuzufügen , um es interaktiv zu gestalten , damit sich dieser Teil der Website ändert, wenn wir auf diese Bilder klicken . Und das machen wir im nächsten Video. 11. Machen Sie Ihre Slideshow Interaktiv! (JavaScript): Zum Abschluss fügen wir nur etwas JavaScript hinzu, um es so zu gestalten , dass wenn wir auf diese Bilder klicken, das ändert, was als Hauptbild angezeigt wird. Wir werden nicht sehr viel JavaScript verwenden. Dies ist also definitiv kein umfassender Kurs zu JavaScript. Dies war ein hauptsächlich auf HTML - und CSS fokussierter Kurs. Aber ich zeige dir ein bisschen JavaScript, damit das funktioniert. In unserem VS-Code müssen wir also eine neue Datei erstellen. Und wir nennen es App. Eigentlich nein, tut mir leid, keine App. Wir nennen es Diashow. Dot js. Json steht für JavaScript. Wenn Sie sich also erinnern, ist JavaScript die Sprache , die die Dinge interaktiv macht. Um unser JavaScript verwenden zu können, müssen wir nun ein Skript-Tag in unser HTML einfügen. Wir werden das tatsächlich unter dem Body-Element tun, aber immer noch innerhalb des HTML-Elements. Also sagen wir Drehbuch. Und du kannst zur Quelle gehen. Und wir werden Diashow dot js sagen, und das ist alles, was Sie hier einbeziehen müssen. Warum jetzt unter dem Bodytag? Denn wenn alles, naja, wenn wir die Website laden, müssen wir den gesamten HTML-Code laden und das Skript zuletzt laden. Auf diese Weise funktioniert alles richtig zusammen. Es wäre nicht wirklich ein Problem auf dieser Website. Ich glaube nicht, ob wir das Skript-Tag vorher hatten, aber in vielen Fällen möchten Sie, dass es sich direkt unter dem Body-Tag befindet. Also haben wir das da drin. Jetzt. Lassen Sie mich Ihnen die Grundlagen von JavaScript zeigen. Ich zeige dir nicht gerade genug , um herauszufinden , wie das funktioniert. Javascript ist eine von einer tatsächlichen Programmiersprache. Html und CSS werden von Menschen oft als Nicht-Programmiersprachen angesehen , da sie nicht viele der gleichen Funktionen haben wie die meisten Sprachen. Ich nenne sie gerne Programmiersprachen , weil ich mich dadurch besser fühle und ich denke, dass sie cool sind. JavaScript ist jedoch eher eine traditionelle Programmiersprache, was bedeutet, dass wir Variablen erstellen können. Eine Variable ist nur ein wenig, man kann sich das wie eine Box vorstellen. Und wir können sagen, wir geben diese Schachtel und den Namen und wir werden Sachen hineinlegen. Und später, wenn wir in einem anderen Teil unseres Programms sind, können wir sagen: Oh, hol dir die Box dieser Name steht, auf der etwas auf der Seite geschrieben war. Wir holen es uns und kriegen alles, was drin ist. Also hoffe ich, dass das Sinn ergibt. Ich zeige dir ein bisschen, wie das funktioniert. Um eine Variable in JavaScript zu erstellen, müssen wir das Schlüsselwort let verwenden. Lassen Sie nur angeben, dass Sie eine neue Variable erstellen. Dann geben wir ihm einen Namen. Was wir im Wesentlichen tun wollen ist, dass wir eine Variable erstellen möchten , die dieses Hauptbild enthält. Und dann ändern wir, was die Quelle der Bilder ist, damit wir sie in die anderen Bilder ändern. Wir werden das Hauptbild nennen. Der Grund, warum ich DM Kleinbuchstaben und das Augenkapital gemacht habe das Augenkapital , liegt darin, dass wir das CamelCase nennen. Es ist ein Standard bei vielen Programmierern, bei denen, wenn Sie mehrere Wörter in einem Variablennamen haben, der erste Buchstabe in Kleinbuchstaben ist und alle anderen Wörter im ersten Buchstaben groß geschrieben werden. Wenn ich also Hauptbild sagen würde, cool, würden wir das kapitalisieren. Jetzt setze ich es auf etwas ein. Dies ist der Teil, in dem wir etwas in die Schachtel legen. Wir müssen das Bild in die Schachtel legen. Okay, so wie wir das in HTML machen rufen wir das Dokumentobjekt auf. Das Dokument bedeutet nur, dass es sich um eine HTML-Datei handelt. Also werden wir Dokument sagen. Wir werden auf einen Teil des Dokuments zugreifen. Die Art und Weise, wie wir das in JavaScript machen, besteht darin, einen Punkt zu setzen. Und jetzt werden wir es tun, eine der Eigenschaften, die das Dokument hat, ist, dass es der Lage ist, ein Element basierend auf Informationen zu erhalten, geben, es zu geben. Also werden wir Document Dot sagen, Element für ID abrufen. Das ist normal genug Englisch , um Element für ID zu erhalten. Was es bedeutet, ist, dass wir ihm eine ID geben und es wird das Element abrufen , das mit dieser ID übereinstimmt. Okay? Wenn Sie sich früher erinnern, haben wir das Hauptbild in eine Klasse geändert. Damit dies funktioniert, fügen wir tatsächlich eine ID hinzu. Sie können also mehrere Klassen und IDs für ein Bild oder ein Objekt haben. Also geben wir ihm eine spezielle ID, damit wir nicht mit der Hauptbildklasse in Konflikt geraten. Und für diese Idee werden wir nur Main Image Dash JS sagen. Das zeigt uns nur an, dass dies dem Zweck des JavaScript dient. Deshalb brauchen wir diese ID. Also haben wir diese Idee. Ich kopiere das hier. Und in unserem Code haben wir gesagt, Element für ID abrufen. Jetzt werden wir in Klammern einfache Anführungszeichen und den Namen der ID setzen und dann am Ende ein Semikolon setzen. Was das sagt ist, dass wir eine Box haben und sie heißt Hauptbild. Jetzt müssen wir etwas in die Schachtel legen. Also gehen wir zum Dokument, das nur der HTML-Code ist. Und wir werden sagen, Hey, HTML, ich muss das Element bekommen , das eine ID des Hauptbildes js hat. Und die HTML's tun es, okay. Das ID-Hauptbild js gilt für dieses spezifische Bild, das das Hauptbild auf der Seite angibt . Das hier. Okay? Und so sagten wir, okay, wir haben dieses Bild jetzt bekommen , wenn wir es in Blöcken spielen. Ich hoffe also, ich hoffe, dass das Sinn ergibt. Wir haben das Bild und es ist in unserer Box. Was jetzt? Jetzt erstellen wir eine sogenannte Funktion. Eine Funktion ist etwas, das immer wieder aufgerufen werden kann , wenn Sie etwas tun. In diesem Fall behandeln wir es jedes Mal, wenn wir auf eines der Bilder klicken , wie eine Schaltfläche. Und wir werden diese Funktion aufrufen. Und was es tun wird ist, dass es heißt, oh, du hast dieses Bild angeklickt. Nun, lassen Sie uns dieses Bild zum Hauptbild machen , das wir zeigen. Um dies zu tun, schreiben wir Funktion und geben der Funktion einen Namen. Also sagen wir einfach „Bild ändern“. Okay. Nach dem Ändern des Bildes werden wir diese Klammern setzen. Das ist nur die Syntax für eine Funktion. Syntax bedeutet genau so, wie du es schreibst. Und dann setzen wir die geschweiften Klammern. So sieht eine Funktion in JavaScript aus. Also lasst uns von innen hineinlegen. Was wir tun müssen, ist, dass wir das Hauptbild erhalten müssen , das wir jetzt als Variable gespeichert haben. Also sagten wir: Okay, hol die Kiste. Und wir werden etwas mit dem machen , was in der Box ist. Und das tun wir, indem wir Punkt drücken, genau wie wir es mit get element für ID getan haben. Also sagen wir Hauptbild. Jetzt sagen wir set-Attribut auf etwas. Wenn Sie sich erinnern, ein Attribut in HTML, gibt es solche Dinge wie Klasse H, Ref , ID, Alt, all die Dinge, die in die öffnenden Tags passen und einige Eigenschaften haben Das heißt Attribut. Wir möchten also das Quellattribut, das Hauptbild genau hier, festlegen . Wir möchten festlegen, dass das Quellattribut dem Bild entspricht, auf das wir geklickt haben. Okay? Wie machen wir das? Nun, innerhalb von set a Attribut können wir zwei Dinge setzen. Erstens müssen wir das Attribut eingeben, das wir festlegen möchten. Obwohl in Anführungszeichen, werden wir SRC als Quelle stellen. Und danach setzen wir ein Komma ein. Und jetzt müssen wir das neue Bild einbringen, aber wir haben noch keinen Weg, es zu bekommen. Also lasst uns das herausfinden. In unserer index.html müssen wir einen Weg finden, damit wir, wenn wir auf ein Bild klicken, die Funktion aufruft und ihm sagt , was dieses Bild Quelle ist. Fügen wir also neue Attribute und dies bezieht sich auf JavaScript. Dies heißt OnClick. Es ist also ziemlich einfach. Wenn Sie auf etwas klicken, führt es eine Funktion aus. Wir sagen onclick. Wir müssen die Funktion Bild ändern ausführen. Nun, etwas Cooles, das wir in JavaScript tun können , ist, wenn wir eine Funktion aufrufen, wir können ihr ein Argument übergeben, was bedeutet, dass wir sagen können, dass ich hier das Bild ändern werde, und hier ist das Bild, das ich will sich ändern. Wir geben ihm etwas anderes, mit dem wir arbeiten können. Also geben wir ihm etwas, mit dem wir arbeiten können. Innerhalb des Änderungsbildes werden wir Anführungszeichen setzen und sagen Image One Dot JPEG. Wenn wir also sagen, ändern Sie das Bild, werden wir sagen: Okay, hier ist was wir Ihnen geben werden. Wir geben dir Image1 Dot Jpeg. Das wird es sein, was die Funktion verwendet. Also kopiere ich dies in jedes dieser Listenelemente. Und wir werden diesen ändern, um dieses auf drei zu ändern. Und das auch. Jedes Mal, wenn wir sagen, dass wir auf Bild drei klicken, heißt es: Okay, ändere die Funktion „Bild ändern“. Und wir geben ihm Bild drei Punkte JPG, mit dem wir arbeiten können. Wie implementieren wir das jetzt im JavaScript selbst? Was wir also tun können, ist in der Funktion Bild ändern in diesen Klammern, wir können einer Variablen einfach einen Namen geben. Also sagen wir einfach Bild. Das bedeutet im Wesentlichen, dass wir die Funktion etwas übergeben werden und dieses Bild aufrufen werden. Es ist also nicht wie eine normale Variable wie diese. Es ist eher so, als könnten wir die Funktion aufrufen und ihr geben, was wir wollen. Und es wird das Ding einfach ein Bild nennen. Jetzt können wir das Bild hier stecken und sicherstellen, dass Sie das bekommen, dieses Semikolon. Also was das getan hat, ist es gesagt, Okay, wenn wir Bild drei wählen, dann sagen wir, okay, Bild ändern und geben ihm diese Textzeichenfolge, Bild drei Punkt JPG. Und es heißt, okay, diese Textzeichenfolge werden wir dieses Bild nennen. Und jetzt, wenn wir set attribut aufrufen, werden wir diese Textzeichenfolge dort hineinstecken das Bild durch diese Textzeichenfolge ersetzen. Was es tut, ist, dass dieses Quellattribut auf diese Textzeichenfolge festgelegt wird. Und das ist alles, was wir tun müssen , um auf Speichern zu klicken. Wenn wir nun auf die Website gehen, wo auch immer sie ist, werden Sie sehen, dass jedes Mal, wenn wir auf ein Bild klicken, es ändert, welches Bild vorhanden ist. Weil es heißt, hol dir das Bild, tut mir leid, es heißt, mach eine Box namens Hauptbild. Finde das Element, das Hauptbild dot js hat, was dieses große Bild ist. Und es heißt, okay, jedes Mal, wenn wir auf ein kleines Bild klicken, dann das große Bild ändern sein Quellattribut als neue Bildquelle festlegen. Wenn wir also auf das Bild klicken, sendet es das Bild an die Bildquelle an das Bild. Das ist das ganze JavaScript , das wir in diesem Kurs verwenden werden. Wie gesagt, wir werden nicht auf die Komplexität einer automatischen Zeitdiashow in diesem Kurs eingehen. Aber das ist definitiv etwas, das Sie online finden können. Und so ist dies das fertige Produkt. Jetzt, im nächsten Video werden wir über das Klassenprojekt sprechen und die Dinge irgendwie abschließen. Ich seh dich darin. 12. Abschlussprojekt und Conclusion: Bevor Sie diesen Kurs beenden, möchte ich, dass Sie eine letzte Sache für Ihr Abschlussprojekt tun. Ich möchte, dass du die Fähigkeiten einsetzt, die du in dieser Klasse gelernt hast , um etwas Eigenes zu erschaffen. Warum erstellen Sie etwas, vielleicht eine Portfolio-Website oder etwas für Ihr Unternehmen oder einfach etwas zum Spaß. Es muss nicht kompliziert sein. Es kann sehr einfach sein, aber es kann dir gehören. Sie können es mit den Fähigkeiten, die Sie in diesem Kurs gelernt haben, von Grund auf neu erstellen . Eine Möglichkeit, wie ich gerne selbst unterhaltsame kreative Projekte angehen unterhaltsame kreative Projekte kann, ist, dass ich herausschreibe, was ich erstellen möchte. Entweder zeichne ich es auf ein Whiteboard oder ein Stück Papier. Ich überlege mir einfach , wie die Website aussehen soll. Dann finde ich heraus, welche Fähigkeiten ich lernen muss , damit es so aussieht. Also lerne ich, welche HTML-Tags ich brauche, welches CSS ich brauche, um es richtig zu gestalten, wie ich es möchte. Und dann lerne ich, welches JavaScript ich brauche , um die Funktionalität zu erhalten , die ich wollte. Und deshalb würde ich empfehlen, das zu tun. Verwenden Sie die Ressourcen , die ich in der Kursbeschreibung verlinkt habe , um mehr HTML, CSS und JavaScript zu erfahren . Jetzt habe ich noch zwei Dinge für dich. Wenn Ihnen dieser Kurs gefallen hat, schauen Sie sich bitte ab sofort meine anderen Skillshare-Kurse an, ich habe zwei weitere. Eine davon ist die JavaScript-DOM-Manipulation, die im Wesentlichen das ist, was wir in diesem Kurs gemacht haben. Ein bisschen wo Sie den HTML und das CSS mit JavaScript manipulieren , Es ist eine sehr nützliche Fähigkeit. Der zweite Kurs ist das Erlernen von Angular , einem JavaScript-Framework. Ein Framework ist im Grunde eine erweiterte Version von JavaScript, die Ihnen mehr Funktionen und mehr Funktionalität bietet und komplizierte Dinge erleichtert. Daher würde ich Ihnen wärmstens empfehlen , sich diese anzusehen, wenn Sie Ihre Website ausdrucksvoller und dynamischer gestalten möchten , wenn Sie Ihre Website ausdrucksvoller und dynamischer gestalten , sie sind wirklich großartige Fähigkeiten. Die zweite Sache ist , dass wenn Sie mehr Tech-Tutorials kostenlos sehen möchten, wenn Sie mehr über die kostenlose Programmierung erfahren möchten, besuchen Sie meinen YouTube-Kanal unter youtube.com slash Taylor English. Dort können Sie eine Vielzahl von Videos sehen, die ich für alle möglichen Fragen gestellt habe , die Sie haben könnten oder Dinge, die Sie vielleicht lernen möchten. Okay? Abgesehen davon, wenn Sie aus irgendeinem Grund an Musik interessiert sind, können Sie mich auf Spotify ansehen. Das verlinke ich auch in der Kursbeschreibung. Ich mache Klaviersoli und hoffe, in Zukunft mehr Klavier- und vielleicht Technomusik machen zu können. Also wenn du dir das anschauen willst, ist das großartig. Aber ich wollte mich nur so sehr dafür bedanken, dass Sie diesen Kurs bis zum Ende durchgesehen diesen Kurs bis zum Ende durchgesehen und diese erstaunlichen Fähigkeiten erlernt haben. Weil ich weiß, dass das, was du gelernt hast, dein Leben und das Leben derer, denen du hilfst, wirklich segnen wird . Also danke, dass du an diesem Kurs teilgenommen und ich hoffe, wir sehen uns bald wieder. Ich wünsche dir das Beste.