Deine erste Website selbst coden: Grundlagen von HTML + CSS

1. 0 Intro: Hallo, mein Name ist Rich Armstrong von Tap Tap Kaboom. Und ich entwerfe und baue seit 2007 Websites. Und in diesem Kurs werde ich Ihnen zeigen, wie Sie Ihre erste Website mit HTML und CSS von Hand programmieren können. Für mich ist es mehr als nur Programmieren, mein eigenes HTML und CSS schreiben zu können . Es ist eine moderne Art, mich auf digitale Weise zu kreieren und auszudrücken. Eine Website ist eine echte Sache, die Hunderte von Menschen besuchen, nutzen und mit der sie interagieren können. Es selbst programmieren zu können , bietet Ihnen einen unglaublichen Vorteil. Sie müssen sich nicht auf andere verlassen, Vorlagen hacken, hoffen, dass KI es richtig macht, oder versuchen komplexe Apps zu verwenden, um Ihre Ideen zum Leben zu erwecken. Zu wissen, wie man programmiert, macht super Spaß und ist lohnend. Und wenn Sie Vorlagen, Content-Management-Systeme und KI verwenden Content-Management-Systeme und , um Ihre Website zu erstellen, wird das Wissen, wie man programmiert alles leichter verständlich machen Es ist wie eine Supermacht. Während des Kurses führe ich Sie Schritt für Schritt durch Erstellung einer einfachen Website für Ihre Lieblings-Zeichentrick-, Helden- oder Filmfigur Ich erkläre alles verständliche Weise und lasse die Dinge weg, die Sie nicht wissen müssen Am Ende des Kurses wirst du deine erste Website erstellt haben , die du mit der Welt teilen kannst Sie werden die Grundlagen von HTML und CSS kennen. Deine Freunde werden neidisch sein. Deine Mutter wird sehr stolz sein und du wirst ein solides Fundament haben, auf dem du aufbauen kannst Egal, ob Sie ein absoluter Neuling sind oder sich schon einmal Webdesign und -entwicklung , nehmen Sie an dem Kurs Sie benötigen lediglich einen Computer und eine Internetverbindung. Okay. Ich sehe dich im nächsten Video. 2. 1 Willkommen: Hallo. Mein Name ist Rich von Tap Tap Kaboom In diesem Kurs werde ich Sie Schritt für Schritt durch die Erstellung einer einfachen Website für Ihren Lieblings-Zeichentrickhelden, Film - oder Seriencharakter Ich erkläre alles auf verständliche Weise und lasse die Dinge weg, die Sie nicht wissen müssen Am Ende des Kurses wirst du deine erste Website erstellt haben , die du mit der Welt teilen kannst Sie werden die Grundlagen von HTML und CSS kennen. Deine Freunde werden super eifersüchtig sein. Deine Mutter wird sehr stolz sein. Und du wirst bereit sein, noch eine Menge mehr zu lernen , weil du eine solide Grundlage hast , auf der du aufbauen kannst. Wir beginnen damit, Ihnen die richtigen Apps zum Programmieren zu besorgen. Dann fangen wir an zu programmieren , also springen wir einfach direkt hinein. Und dann füge ich Theorie und mehr Praxis hinzu. Endlich werden wir genug wissen, um eine Website für unseren Lieblings-Zeichentrickhelden oder Filmcharakter zu erstellen eine Website für unseren Lieblings-Zeichentrickhelden . Lassen Sie uns also darauf eingehen. 3. 2 Was du herunterladen kannst: Um das Programmieren viel einfacher zu machen, müssen Sie einige Dinge herunterladen und installieren. Ein Code-Editor, ein Entwicklungsbrowser und eine Möglichkeit, Ihren Code zu sichern und Ihre Website zu veröffentlichen. Als Erstes benötigen Sie einen Code-Editor. Sie machen Vorschläge, vervollständigen Ihren Code und geben Teilen Ihres Codes verschiedene Farben, sodass er leicht lesbar ist. Im Grunde helfen sie dir dabei, schneller und mit weniger Fehlern zu codieren , was einfach großartig ist. Einer der beliebtesten Code-Editoren heißt Visual Studio Code, kurz VS-Code. Es wurde von Microsoft erstellt und ist kostenlos, was perfekt ist. Sie können es von dieser URL herunterladen. Das zweite, was Sie benötigen, ist ein guter Entwicklungsbrowser. Jeder Browser verfügt über eine Reihe von Tools, mit denen Sie Websites erstellen können. Aber Google Chrome ist meiner Meinung nach das Beste. Damit können wir Fehler erkennen, verstehen, warum bestimmte Dinge passieren oder nicht, und wir können unseren Code für sofortige Updates im Browser optimieren sofortige Updates im Browser Sie können ihn von dieser URL herunterladen. Wenn Sie bereits Google Chrome haben, können Sie den Schritt einfach überspringen. Als drittes benötigen Sie eine Möglichkeit, Ihren Code zu sichern , sodass Sie problemlos eine frühere Version wiederherstellen können, wenn Ihre Katze über Ihre Tastatur läuft . Hier kommt etwas namens Git ins Spiel. Git verfolgt alle Änderungen, die Sie an Ihren Dateien vornehmen. Es ist mächtig. Und mit Git Hub können wir all diese Änderungen online sichern, sodass nicht alles verloren ist, wenn deine Katze beschließt, deinen Computer direkt aus dem Fenster zu stoßen deine Katze beschließt, deinen Computer direkt aus dem Fenster deine Katze beschließt, deinen Computer direkt aus dem Fenster zu stoßen. Außerdem können Sie mit GitHub einfache Websites mit dem Code veröffentlichen, den Sie ihr senden, was sich später als sehr praktisch erweisen wird. Ich verwende lieber eine App namens Git Hub Desktop , um mit Git und GitHub zu arbeiten, als mit dem Terminal. Das macht die ganze Backup-Sache viel einfacher und viel visueller. Erstellen Sie also ein Konto auf github.com und laden Sie den GitHub-Desktop von dieser URL herunter Sobald Sie VS Code, Google Chrome, Gitub und Github Desktop heruntergeladen, installiert und sich bei ihnen angemeldet haben, haben Sie alles, was Sie benötigen, um sich wie ein Ninda zu entwickeln Dann können Sie einfach mit der nächsten Lektion fortfahren und mit der Erstellung Ihrer ersten Website beginnen Wenn Sie weitere schrittweise Anweisungen benötigen, werde ich den Rest dieser Lektion damit verbringen zu zeigen, wie Sie VS Code, Google Chrome, GetSub und Gitub Desktop herunterladen , installieren und sich bei ihnen anmelden , installieren und Okay, das erste, was ich brauche, ist Visual Studio-Code. Also werde ich eine Safari öffnen. Sie können den Browser Ihrer Wahl öffnen und nach VS-Code oder Visual Studio Code suchen. Siri schlägt diesen vor, Visual Studio-Code. Also los geht's code.visualstudio.com. Laden Sie es für Ihr Betriebssystem herunter, Tada. Und da haben wir's. Es wird heruntergeladen, also gehe ich zurück zum Finder und los geht's. Ich werde das in meinen Anwendungsordner ziehen . Also Baa Jetzt gehe ich in meinen Anwendungsordner und tippe einfach auf meiner Tastatur auf VS und bin ziemlich nah dran, bin dem Wetter gekommen Vielleicht habe ich das falsch gemacht. Visual Studio-Code. Ich werde zweimal darauf tippen und es öffnen. Muss verifiziert werden. Es ist eine App, die ich aus dem Internet herunterlade. Bin ich mir sicher, dass ich sie öffnen möchte? Ja, offen. Okay. Da haben wir's. Es ist erledigt. Es ist offen, fantastisch. Sie können hier Ihr Thema wählen. Ich bevorzuge dieses dunkle, moderne Theme, die Art von Standarddesign , mit dem es geliefert wird, aber du kannst wählen, was dir gefällt. Es gibt eine Reihe von Möglichkeiten, dies anzupassen, aber darauf werde ich in diesem Kurs nicht eingehen. Okay, als Nächstes müssen wir Google Chrome herunterladen. Wenn Sie es bereits verwenden, fahren Sie mit dem nächsten Schritt fort. Okay, lass uns zu Google Chrome gehen. Los geht's. Google Chrome. Ich schlage diesen ernsthaft vor. Und okay. Der Browser ist so gebaut, dass er schnell und sicher ist. Und deins. Großartig. Okay, lade Chrome herunter. Danke für das Herunterladen. Okay, lass uns zum Finder gehen. Gehen wir zurück zu Downloads. Google Chrome muss installiert sein. Bewusst wie Dragon Drop. Ziehen wir das also in unseren Anwendungsordner. Ziemlich schneller Installationsvorgang. Ordnung. Dann können wir zu den Anwendungen zurückkehren, und ich wähle GO für Google Chrome und tippe dann zweimal darauf Tauchen, Tauchen, Tauchen. Okay. Ja, es wurde auch aus dem Internet heruntergeladen Öffne das. Google Chrome ist bereit, Ihre Installation abzuschließen. Möchten Sie Google Chrome als Standardbrowser festlegen? Das tue ich. Das werde ich überprüfen. Helfen Sie mit, Google Chrome zu verbessern, indem automatisch Nutzungsstatistiken und Absturzberichte senden. mache ich gerne. Ich mag es Google Chrome und andere Apps besser sind. Also, wenn ich ihnen helfen kann, besser zu werden, dann großartig. Okay. Starten Sie Google Chrome, und dann können Benachrichtigungen Warnmeldungen, Töne und Symbole enthalten. Das werde ich zulassen. Okay. An dieser Stelle können Sie sich also anmelden. Wenn Sie ein Google-Konto haben, vielleicht mit Ihrem Unternehmen weitermachen, vielleicht haben Sie ein persönliches Konto, können Sie sich anmelden. Ich werde mich vorerst nicht anmelden. Das muss ich nicht, also tippe ich auf Nicht anmelden. Okay, Standard-Suchmaschine. Ich werde mich für Google entscheiden. Fantastisch. Als Standard festlegen. Ton bei Datenschutzfunktion hinzufügen. Nein, danke. Puh. Eine Menge Dinge, die wir durchmachen müssen Weitere Funktionen zum Hinzufügen von Datenschutz sind jetzt verfügbar. Ich hab's. Danke. Okay, wir haben also Chrome. Wir haben VS-Code. Jetzt können wir in Google Chrome nach github.com suchen Aber ich werde mit der rechten Maustaste auf Safari klicken und es beenden. Das brauche ich nicht mehr. Okay, lass uns nach GitHub C suchen . Ta da, da, da. Okay. Das mag von Zeit zu Zeit anders aussehen, das sieht meiner Meinung nach ziemlich cool aus, melde dich bei Github an. Okay, in deine E-Mail. Ich habe bereits ein Konto. Also führe diesen Vorgang einfach mit deinem Konto durch. Ich werde mich jetzt mit einem Testkonto anmelden. Also werde ich bei Tap Tap kaboom.com einen Test oder einen Rich Plus-Test machen bei Tap Tap kaboom.com einen Test oder einen Rich Plus-Test Melde dich bei Github an. Willkommen auf Github. Lass uns das Abenteuer beginnen. Geben Sie Ihre E-Mail-Adresse ein, ja, fahren Sie fort. Erstelle ein Passwort. Ich verwende ein Passwort für viele meiner Sachen, aber im Moment verwende ich einfach etwas ganz Einfaches. Wow. Ich glaube, ich kann mich daran erinnern. Ordnung. Fahren Sie fort. Geben Sie einen Nutzernamen ein. Ich werde einfach Rich sagen. In Ordnung, geh niederländisch, Rich, tipp, tipp, bumm. Testen. In Ordnung, und mach weiter Okay, verifiziere mein Konto. Okay, lassen Sie uns dieses Rätsel lösen. Benutze die Pfeile, um das Objekt so zu drehen , dass es in Richtung der Hand zeigt. Ja, ich finde das gut. Ordnung. Okay, speichere mein Passwort Äh, ja, speichern wir das. Dann muss ich mich nicht daran erinnern. Auch hier verwende ich ein Passwort, um mir meine ausgefallenen Passwörter zu merken und zu erstellen, aber im Moment verwende ich es nicht, also speichern wir das. Okay. Du bist fast fertig. Wir haben Rich beim Test auf taptapkaboom.com einen Startcode geschickt beim Test auf taptapkaboom.com Ich werde das nur auf meinem Handy überprüfen . Schnell, schnell, schnell. Gehen wir und öffnen die Gmail-App. Sie sollten also eine E-Mail an diese E-Mail-Adresse erhalten , die Sie gerade angegeben haben. Und lass uns zu Rich taptapkaboom gehen. Okay, mein Github-Startcode ist 058, zwei, fünf, zwei, eins, zwei Da haben wir's. Okay, Nutzername oder E-Mail-Adresse, Rich. Ich glaube, es war wie Rich plus Test auf taptapkaboom.com, mein Passwort, es hat es für mich gespeichert. Loggen Sie sich ein. Sicheres Passwort. Ja, sicher. Ja. Ich hab's. Wie würdest du dich selbst beschreiben? Sie können wahrscheinlich auf Student tippen. Wie viele Teammitglieder werden mit Ihnen zusammenarbeiten? Sie können das genauer ausfüllen, wenn Sie möchten, aber vorerst nur ich. Und okay, mach weiter. Sie können diesen Teil der Personalisierung auch überspringen, wenn Sie möchten. Die beiden wichtigsten Dinge, die Sie mit Github machen möchten , sind ein neues Projekt Okay. Fahren Sie fort. Okay, lerne , Software wie ein Profi zu versenden. Geh einfach kostenlos. Aber eine Bar, kostenlos weitermachen. Puh. Es gibt viele Schritte, die es zu bewältigen gilt. Okay. Aufgestellt. Wir haben Github. Wir haben Chrome. Lassen Sie uns also Chrome neben Safari verschieben. Lass uns Safari hinter uns lassen. Prost, habe den VS-Code hier. Und dann GitHub. Wir haben github.com. Jetzt brauchen wir GitHub-Desktop. Suchen wir also nach Git Hub. Desktop. Okay, ich akzeptiere das alles. Okay, desktop.github.com. Download für macOS, du lädst für dein Betriebssystem herunter Patta. Okay. Gehen wir zum Finder. Gehen wir zu Downloads. Lass uns diesen öffnen. Okay, ziehen Sie es in Anwendungen. Gehe zu Anwendungen. Geben Sie GIF GitHub Desktop und tippen Sie dann zweimal darauf, um es zu öffnen. Ja, es ist aus dem Internet. Ich möchte es öffnen. Fantastisch. Okay, willkommen auf dem GitHub-Desktop. Melde dich bei github.com an. Traurig wie Ja. Als Rich Tap Tap Kaboom Test angemeldet. Fahren Sie fort Was Sie hier tun, ist, dass Sie GitHub Desktop die Erlaubnis erteilen, auf Ihr GitHub-Konto zuzugreifen. Autorisierter Desktop. Okay, öffne die GitHub-Desktop-App. Ich werde nachsehen. Erlaube immer, dass der GitHub-Desktop geöffnet wird. Ja. Okay. Git konfigurieren. Das ist zu benutzen. Dies wird verwendet, um Commits zu identifizieren, die Sie erstellen Jeder kann diese Informationen sehen, wenn du Commits veröffentlichst Verwende meinen GitHub-Kontonamen und meine E-Mail-Adresse. Ja. Name, E-Mail, fertig. Hui. Okay. Du hast alles, was du brauchst, um zu rocken oder dich wie ein Ninja zu entwickeln In der nächsten Lektion erstellen Sie Ihre erste Website. Wir sehen uns dort. 4. 3 Erstelle deine erste Website: Bevor wir zur Theorie übergehen, machen wir uns die Hände schmutzig und erstellen unsere erste Website. Und das ist für mich der beste Weg, um zu lernen, indem man es zuerst tut. Ich werde in der Lektion nicht zu viel Theorie erklären, das kommt erst nach dieser Lektion. Okay, lasst uns unsere allererste Website programmieren. Ich möchte, dass du den Github-Desktop öffnest, tada. Und wenn Sie noch nicht angemeldet sind, gehen wir zu den Einstellungen hier oben, melden Sie sich bei github.com an und fahren mit dem Browser fort Und wenn Sie hier in Ihrem Browser angemeldet sind , können Sie auf Weiter tippen Wenn nicht, müssen Sie sich anmelden. Möglicherweise müssen Sie sich erneut authentifizieren. Möglicherweise müssen Sie ein Passwort oder einen Schlüssel oder etwas Ähnliches eingeben ein Passwort oder einen Schlüssel oder etwas Ähnliches Drücken Sie anschließend auf Weiter. Okay, autorisierter GitHub-Desktop. Ja. Okay. Da haben wir's. Wir sind dabei. Wenn du überprüfen möchtest, ob du angemeldet bist, gehe erneut zu den Einstellungen Dann solltest du hier deinen Nutzernamen und die Option sehen , dich von github.com abzumelden Ordnung, speichern. Jetzt möchte ich ein neues Repository erstellen Also kann ich hier ein neues Repository auf Ihrem lokalen Laufwerk erstellen , oder ich kann Datei neues Repository wählen oder Command N oder Control N drücken . Lassen Sie uns also ein neues Repository suchen. Und weil das unsere erste Website ist, werde ich meine ersten Websites sagen und sie richtig erkennen. Es heißt, sie wird als meine Dash-First-Dash-Website erstellt . Das liegt daran, dass sie keine Leerzeichen mag. Daher würde ich auch empfehlen , keine Leerzeichen zu verwenden, sondern Bindestriche anstelle von Leerzeichen zu verwenden Und lass mich hier etwas überprüfen. Das ist okay. Wenn Sie Großbuchstaben verwenden möchten, können Sie das tun, aber ich bevorzuge es nicht Ich bevorzuge es, keine Großbuchstaben, sondern nur Kleinbuchstaben und Bindestriche anstelle von Leerzeichen zu verwenden Kleinbuchstaben und Bindestriche Das nennt man Kebab Case, und ich werde dir später im Kurs noch ein paar andere Optionen zeigen später im Kurs noch ein paar andere Optionen Okay, also meine erste Website, die Beschreibung ist, das ist meine allererste Website, der lokale Pfad, ich werde Downloads wählen Ich habe bereits einen Repository-Ordner , der eine ganze Reihe von Websites enthält Die Downloads sind für mich in diesem Kurs also wirklich einfach zu verwenden, aber du kannst wählen, wo immer es für dich Sinn macht Ich möchte dieses Repository nicht mit einem ReadMe initialisieren , es wird ignoriert, keine Lizenz, keine Lassen Sie uns dieses Repository erstellen. Okay. Und jetzt wirst du sagen, okay, was ist passiert? Nun, sieh dir das an. Im Finder haben wir jetzt meine erste Website. Es ist ein Ordner, in dem nichts enthalten ist. Äh, huh. Aber da ist eine geheime versteckte Datei drin Ziehen wir das also in den VS-Code oder Visual Studio-Code. Wenn Sie es zum ersten Mal öffnen , werden Sie eine kleine Leiste sehen. Dann musst du ja sagen, öffne es. Komm schon. Ja, cool. Und dann, vertrauen Sie den Autoren der Dateien in diesem Ordner? Ja, tue ich. Aber vielleicht überprüfe das auch. Vertrauen Sie den Autoren aller Dateien im übergeordneten Ordner Downloads. Ja, ich vertraue den Autoren. Okay, Themes, darüber sollten wir uns hier keine Gedanken machen . Holen Sie sich Attribute. Das ist deine versteckte Datei, die mit Git zu tun hat und der Verwaltung all deiner Commits, all der Änderungen, all dem Darüber musst du dir keine Sorgen machen. Es ist aus einem bestimmten Grund versteckt. Ich möchte, dass Sie hier auf diese kleine Schaltfläche tippen, bei der es sich um eine neue Datei handelt , oder gehen Sie hierher und sagen Sie Datei, neue Textdatei. Also lass uns diesen machen. Bam, und ich werde das meine erste Webseite Dot HTO nennen meine erste Webseite Dot HTO Und wenn wir das ändern, hat sich dieses kleine Symbol auf der linken Seite in diese orangefarbenen Klammern verwandelt. Okay. Meine erste Webseite, die haben wir geöffnet. Ich werde hier zweimal tippen, damit wir mehr Platz haben, und ich drücke Command Plus. Jetzt könnt ihr sehen, was ich hier eigentlich schreibe. Also werde ich mich hier für ein „weniger als“ -Symbol entscheiden . Es werden eine ganze Reihe von Optionen auftauchen, aber ich werde mich einfach für H 1 entscheiden, das ist eine Überschrift eins, die größte, coolste Überschrift und dann ein Größer-als-Zeichen Da haben wir's. Und was es tun sollte, ist das abschließende Tag dieses Elements zu erstellen. Sie haben also Ihr Eröffnungs-Tag und Sie haben Ihr Abschluss-Tag. Fantastisch. Und darin kann man sagen, meine erste Website. Okay. Am Ende drücken wir Return oder Enter und machen dasselbe. Also weniger als P größer als. Und das ist ein Absatz-Tag, ein Absatzelement, und wir werden sagen: Hey, wie cool ist das, meine allererste Website. Und dann Befehl oder Datei speichern. Okay, du wirst sehen, dass hier etwas passiert. Das ist Quellcodeverwaltung, im Grunde Github, und sagt: Hey, die Dinge haben sich geändert, also lass uns hier drüber gehen. Wer, hier passieren eine Menge wirklich cooler Sachen. Großartig, aber ich möchte GitHub Desktop immer noch aus einem bestimmten Grund verwenden GitHub Desktop immer noch aus einem bestimmten Grund , weil es einfach viel einfacher ist, es visuell zu sehen. Und wenn wir anfangen, github.com zum Hosten unserer Webseiten zu verwenden, funktioniert alles sehr gut Okay, gehen wir zurück zum Explorer und gehen runter zum Finder Und wir werden jetzt sehen, dass meine erste Webseite mit Punkt-HTML da ist. Tippen Sie zweimal darauf. Hui. Meine erste Website. Hey, wie cool ist das? Meine allererste Website. Kann diesen Tab schließen. Da haben wir's. Sie haben gerade Ihre erste Website erstellt, Ihre erste Webseite. Es sieht nicht nach viel aus. Sicher, und nur Sie können es auf Ihrem lokalen Computer sehen. Sicher. Aber trotzdem ist das ein epischer erster Schritt. Ich möchte, dass du jetzt zum Github-Desktop gehst, und du wirst hier Änderungen sehen. Eine Änderungsdatei, meine erste Webseite, du hast sie hinzugefügt. Okay. Hier, es möchte, dass du dieser Änderung einen Titel gibst. Wir können also sagen, dass das Repo erstellt und die erste Datei erstellt wurde. Sie müssen dies tun, wenn Sie mehr als eine Datei erstellen Aber wenn ich das alles wegschneide, kannst du einfach meine erste Webseite mit Punkt-HTML erstellen. Es ist wie, ja, das ist cool. Also werde ich das einfach wieder einfügen. Beschreibung. Ehrlich gesagt müssen Sie nicht alles beschreiben, was Sie tun. Aber hey, das wird unser erstes Commit sein. Also lass uns vier gehen. Hm. Erster Commit. Ja. Und dann entscheide dich für Maine. Wir haben nur Maine und Maine ist eine Filiale. Und wir gehen, Bam. Engagieren Sie sich für Maine Was cool ist, oder? Ja, es ist cool. Ja, das ist nur auf deinem lokalen Computer. Wir werden das an die Online-Version weiterleiten und es uns später in diesem Kurs online ansehen . Sie haben gerade Ihre erste Website erstellt. Sicher. Es gibt nur eine Webseite, und nur Sie können darauf zugreifen, aber das macht sie als Website nicht unberücksichtigt. Herzlichen Glückwunsch. Du solltest ernsthaft stolz auf dich sein. In der nächsten Lektion werde ich Ihnen sagen, was eine Website eigentlich ist. 5. 4 Was ist eine Website?: Was ist also eine Website? Es ist im Grunde ein Ordner, der eine oder mehrere Webseiten enthält der eine oder mehrere Webseiten , die oft miteinander verwandt sind einen Domainnamen wie taptapkaboom.com in Ihren Browser eingeben , werden Sie Und in diesem Ordner gibt es eine oder mehrere Webseiten , auf eine oder mehrere Webseiten In den meisten Fällen wird Ihnen die Standardwebseite angezeigt wenn Sie nicht angeben, welche Seite Sie ansehen möchten. Nun, was ist eine Webseite? Eine Webseite ist ein Textdokument , das so geschrieben ist, dass Browser es verstehen können. Dieser Weg wird HTML genannt. Und basierend auf dem HTML-Code in einer Webseite weiß ein Browser dann, was angezeigt werden soll, wie Ihre Seite aussehen soll, wie er auf Benutzerinteraktionen reagiert, welche Informationen Suchmaschinen angezeigt werden sollen und eine ganze Menge anderer Dinge. In der nächsten Lektion werden wir uns eingehender damit befassen, was HTML ist. Wir sehen uns dort. 6. 5 Was ist HTML?: Was ist HTML? Es steht für Hypertext Markup Language, aber das ist nicht hilfreich, oder? Deshalb stelle ich mir HTML gerne als die Hauptsprache vor, die wir verwenden um dem Browser mitzuteilen, was er tun soll Die Bausteine dieser Sprache sind HTML-Elemente. Eine Webseite besteht aus HTML-Elementen. Für jeden Elementtyp macht der Browser etwas anderes. Dies ist ein Element mit einer Überschrift. Die Browser mögen, Oh, die wichtigste Überschrift auf der Seite. Das ist der Überschriftentext. Ich mache es groß. Ich hab's. Mach dir keine Sorgen. Das ist ein mutiges Element. Die Browser sagen, ich werde das in einem fetteren Schriftstil anzeigen Ich werde dafür sorgen, dass es auffällt. Mach dir keine Sorgen. Und das ist ein Linkelement oder ein Ankerelement. Die Browser sagen, es ist ein Link. Ich mache es blau und ich werde es unterstreichen. Und wenn jemand darauf klickt, werde ich ihn zu der URL weiterleiten, die Sie hier finden. Fantastisch. Und das ist ein Bildelement. Und der Browser sagt, ich werde das als Bild anzeigen, und das Bild, das ich verwenden werde, befindet sich hier. Bestimmte HTML-Elemente weisen den Browser an, bestimmte Dinge zu tun. Meist weisen diese HTML-Elemente den Browser an, Informationen auf unterschiedliche Weise anzuzeigen, z. B. in Listen oder Überschriften und Absätzen und Bildern Es gibt aber auch andere Verwendungszwecke, z. B. dem Browser mitzuteilen, wie er die Seite mit CSS gestalten soll , oder dem Browser mitzuteilen wie er auf Benutzerinteraktionen mit JavaScript reagieren soll , oder dem Browser mitzuteilen, wie der Seitentitel für Suchmaschinen lautet oder welches Bild verwendet werden soll, wenn jemand Ihre Webseite mit einem Lesezeichen markiert Es gibt tonnenweise verschiedene HTML-Elemente, und keine Sorge, wir werden sie in diesem Kurs nicht alle durchgehen. Wenn Sie sie herausfinden möchten, googeln Sie sie oder fragen Sie Chat GPT der nächsten Lektion werde ich die HTML-Box-Theorie erklären , mit der Sie auf einfache Weise verstehen können, wie HTML-Elemente funktionieren 7. HTML-Box-Theorie: Ich visualisiere HTML-Elemente gerne als Boxen. Auf den meisten Webseiten befinden sich Boxen innerhalb von Boxen innerhalb von Boxen, und die Box, die die anderen Boxen enthält, ist unser Browserfenster Das nenne ich HTML-Box-Theorie. In jedem Feld können sich entweder ein oder mehrere Felder, Text, eine Kombination aus Text und Feldern oder gar nichts befinden Text, eine Kombination aus Text und Feldern . Standardmäßig sind die meisten Felder so hoch wie ihr Inhalt und so breit wie das Feld, in dem sie sich befinden. Andere Boxen sind so hoch und breit wie ihr Inhalt, und die meisten Boxen befinden sich so weit links auf der Seite und so weit oben auf der Seite, wie sie können. Und natürlich gibt es Boxen, die sich völlig anders verhalten, zum Beispiel, wenn manche Boxen für Menschen unsichtbar sind. Und dann kannst du das alles natürlich ändern, wenn du deine Boxen mit CSS gestaltest. Aber darauf werde ich später eingehen. In der nächsten Lektion zeige ich Ihnen, wie man HTML schreibt. 8. 7 HTML schreiben: Wie schreiben oder codieren wir also ein HTML-Element? Nun, die meisten HTML-Elemente haben ein öffnendes und ein schließendes Tag. Ein öffnendes Tag besteht aus einem Kleiner-als-Zeichen, dem Tag-Namen und einem Größer-als-Zeichen. Ein schließendes Tag besteht aus einem Kleiner-als-Zeichen, einem Schrägstrich, dem Tag-Namen und einem Größer-als-Zeichen Zwischen diesen beiden Tags können Sie ein oder mehrere HTML-Elemente, Text, eine Kombination aus Elementen und Text einfügen Text, eine Kombination aus oder das Feld leer lassen Das gesamte HTML-Element besteht dann aus dem öffnenden Tag, dem Inhalt und dem schließenden Tag. Und standardmäßig zeigt ein Browser HTML-Elemente vom oberen Rand des Dokuments nach unten an, so wie sie sich in Ihrer HTML-Datei befinden. Wie Ihr Browser ein Element und die darin enthaltenen Elemente anzeigt, hängt jedoch davon ab, um welche Art von Element es sich handelt. Ist das alles, was Sie fragen könnten? Nun, nicht ganz. Es gibt noch eine Sache: HTML-Attribute. HTML-Attribute sind wichtige zusätzliche Details, die zu HTML-Elementen hinzugefügt werden und dem Browser mitteilen, wie sie angezeigt werden sollen und welche Funktionen hinzugefügt werden sollen Wir verwenden Attribute , um Elemente zu gestalten , um dem Browser mitzuteilen, wohin er gehen soll, wenn Sie auf einen Link klicken, welche Datei und welches Bildelement angezeigt werden soll und vieles mehr Ein Attribut besteht aus einem Namen, einem Gleichheitszeichen und einem Wert , der in einfache oder doppelte Anführungszeichen gesetzt ist. Sie werden sie ständig verwenden, wenn Sie HTML schreiben. Okay, jetzt verstehst du HTML theoretisch. In der nächsten Lektion werden Sie anfangen, es mit etwas mehr Wissen als zuvor zu schreiben. Wir sehen uns dort. Ähm 9. 8 HTML schreiben: Okay, fangen wir an, etwas HTML zu schreiben. Dieses Mal werden wir, um besser zu verstehen was tatsächlich vor sich geht, , was tatsächlich vor sich geht, ein neues Repository erstellen damit Sie sich mit dem Prozess vertraut machen, und wir werden auch anfangen, einige lustige Dinge in Chrome zu tun. In Ordnung, gehen wir zum Github-Desktop. Und du hast dein aktuelles Repository. Aber jetzt wollen wir ein neues Repository erstellen. Schauen Sie sich die neuen Einstellungen für Barrierefreiheit an. Okay, danke. Lass uns gehen: Datei, Neues Repository. Und wir werden ein neues erstellen, weil wir den Dreh raus bekommen wollen, das tatsächlich zu tun. Nennen wir das ein Experiment. Da haben wir's. Wir brauchen keine Beschreibung. Downloads im lokalen Pfad. Der Rest ist großartig. Repository erstellen. Fantastisch. Gehen wir zurück zum Finder ziehen Experimente in den Visual Studio-Code. Okay, es ist alles wieder groß. Ich erstelle eine neue Datei und nenne sie Test-HTL, Return Okay, jetzt wissen wir ein bisschen mehr, weißt du, darüber, was vor sich geht Also weniger als H, eins größer als, und wir sagen Überschrift eins. Okay. Ich drücke Less done, P, drücke hier die Eingabetaste und dann die größere Taste nach unten und dann Absatz. Okay. Also in der Überschrift, ein Absatz. Was ich als Nächstes tun möchte, ist ein Link, der auf eine andere Stelle verweist. Lassen Sie mich also statt eines Absatzes sagen: Hey, das ist ein cooler Artikel. Und cooler Artikel, ich möchte das irgendwo verlinken. Also größer als oder kleiner als. Und ich nehme A für Anker. Es ist also kein Link. Es ist ein Anker und dann größer als, und ich wähle diesen aus und schneide ihn aus. Also befehlen Sie X und setzen Sie es hinter die Parodie. Aber vor diesem abschließenden Tag meines P-Elements, und dann macht das nicht wirklich viel Es ist nur ein Ankerelement bis wir ein Attribut haben, das HRF ist, zu dem dieser Link führen soll. Also fängt es an, hier einige Optionen zu füllen . Ich werde mich für HRF entscheiden Es sollte dann mit zwei kleinen Anführungszeichen und hrF gleichgesetzt werden. Gehen wir für den HTTP-Dolonschrägstrich für den HTTP-Dolonschrägstrich Okay, das ist ein cooler Artikel. Wir können das ziemlich bald aktualisieren. Und dann Command S. Gehen wir zu unserem Finder. Interne Experimente. Doppelklicken Sie auf Test. Überschrift eins. Hey, das ist ein cooler Artikel. Okay. Und wenn Sie darauf tippen, gelangen Sie zu google.com Oh. Also, was hier passiert, ist, dass sich in diesem P-Element ein Element befindet Und innerhalb dieses P-Elements gibt es auch etwas Text. Ziemlich cool, oder? Ja, ich finde es ziemlich cool. Als Nächstes möchte ich ein Bild-Tag oder ein Bildelement einfügen. Ich bin also G und werde die Eingabetaste drücken. Und dann hier, SRC als Quelle und dann brauchen wir ein Bild. Und dann ist das tatsächlich etwas Besonderes. Es braucht kein weiteres Etikett, also werde ich mich einfach für das entscheiden oder ich werde mich für Schrägstrich und dieses größere Zeichen entscheiden Es ist ein einzelnes Etikett. Sie können nichts in ein Bild-Tag oder ein Bildelement einfügen . Okay, also Quelle, wir brauchen eine Art Bild. Also lass uns zu Chrome gehen. Und hey, wir sind schon bei Google, also werde ich nach Cat Cats are great suchen. Lass uns nach Bildern suchen. Okay. Katze von National Geographic. Hmm. Der gähnt Was ist mit dieser kleinen Süße. In Ordnung Also werde ich jetzt mit der rechten Maustaste klicken und schauen, ob ich das speichern kann. Es ist ein Link. Bild speichern unter. Da haben wir's. Also Bild speichern unter. Lass uns zum Herunterladen gehen. Okay, nennen wir es diesen komischen Namen. Gehen wir zu den Downloads. Führe Experimente damit durch. Okay, und nenne es Cat Dot JPEG. Sie könnten mit der rechten Maustaste klicken und auf Umbenennen tippen oder auf dem Mac trotzdem einfach die Eingabetaste drücken. Wir haben also CAT JPEG. Das heißt, im Quelltext können wir uns für Cat Dot JPEG oder für Dot Slash entscheiden, was bedeutet, hey, schau in diesem Ordner nach, diesem sehr aktuellen Ordner, in dem sich diese Datei für Cat Dot JPEG befindet Okay, Command S, gehen wir zurück zu Chrome. Und hey. Lass uns gehen. B, B, B, B. Auffrischen. Wird nicht benötigt, weil unser Catimage da ist. Wow. Ordnung. Das sieht cool aus Das ist also eine Möglichkeit, Ihrem Bildelement ein Quellattribut zu geben . Eine andere ist, lass uns das nochmal machen. Eine Katze. Lass uns nach Bildern suchen. Lasst uns wählen, diesen, diesen grünen, ja. Ich werde darauf tippen. Klicken Sie mit der rechten Maustaste auf Ihre Copy Image-Adresse. Ordnung, ich wähle einen neuen Tab und füge ihn dann hier Und drücken Sie die Eingabetaste. Und du siehst , es bringt mich zu einem Bild. Jetzt könnten wir es erneut herunterladen oder wir könnten einfach genau diese URL verwenden , die es uns gegeben hat , und ein neues Bildelement, eine Quelle, erstellen und das Ganze dort einfügen. Ordnung. Command S. Also wir haben dieses lokale Katzenbild und dann haben wir dieses CAT-Bild, das online existiert Der Vorteil, etwas lokal zu haben, ist , dass wir die Kontrolle darüber haben, also entfernen wir es nicht einfach. Der Vorteil dieser Online-Version besteht darin, dass wir das Bild nicht auf unserem Server oder unserem Dateisystem speichern müssen . Aber wenn sie es entfernen wollen, ist es weg. Also spar dir das. Wenn wir es noch nicht getan haben, gehen wir zu Chrome. Lassen Sie uns unseren Testpunkt HTM erneut öffnen. In Ordnung. Wir haben zwei Bilder, trotzdem toll von Katzen. Nun, wenn etwas schief geht, wir vielleicht statt nach Katze suchen wir vielleicht statt nach Katze nach Doug. Das werde ich mir sparen Gehen wir zurück zu Chrome, aktualisieren. Sie werden sehen, dass Sie dieses kleine kaputte Bildsymbol erhalten. Das liegt daran, dass es nicht finden kann, wonach es sucht. Also solltest du vielleicht sagen , okay, Katze, großartig. Wenn du dich zum Beispiel für ein JPEG entscheidest und ich hier einfach Command R drücke , funktioniert das nicht. Was Sie hier also tun müssen, ist sicherzustellen, dass Sie es richtig buchstabieren. Befehl S. Okay. Kommando R hier, die kleine süße Katze ist zurück. Hier ist es das Gleiche. Wenn ich den Bindestrich aus Felv und CAT, Command S, entferne , gehen wir zur Chrome-Aktualisierung Du bekommst wieder dieses kaputte Bildsymbol. Okay, also hüte dich davor. Okay, Command Z. Gehen wir sicher zurück. Mal sehen, ob alles funktioniert. Es ist fantastisch. Lassen Sie uns jetzt einen weiteren Absatz erstellen und das hier machen. P, und ich werde sagen, Wow, diese Katzen sind so supersüß. Deshalb möchte ich mutig sein oder vielleicht Katzen. Ich möchte mutig sein. Also kann ich entweder das B-Element verwenden , das fett ist. Und das schneide ich einfach ab. Oh, wo gehen die Katzen hin? Diese Katzen sind so supersüß. Oder ich kann das auf stark ändern und sicherstellen , dass du auch das abschließende Tag änderst. Stark ist ausgefallener, aber fett funktioniert auch. Diese Katzen sind zwar super süß, ich möchte das kursiv schreiben oder hervorheben Lassen Sie uns also zur Betonung auf EM setzen. Cat das. In Ordnung. Befehl S. Gehen wir zurück zu Chrome, aktualisieren Und los geht's. Wow, diese Katzen sind so supersüß. Jetzt sieh dir das an. Ich klicke mit der rechten Maustaste in Chrome und sage Inspizieren. Und es könnte auf der rechten Seite auftauchen , wenn ja, und du bist damit einverstanden. Großartig. Ansonsten tippe ich gerne auf diese drei Punkte und lasse sie unten erscheinen. Lass uns vielleicht auch hier zweimal auf diese Leiste tippen, dann wird alles größer. Okay, hier kannst du anfangen, die Elemente zu sehen. Ich drücke Command Plus, um es etwas größer zu machen , damit du es sehen kannst. Okay. Und du denkst vielleicht, Whoa, HTML Kopf, Körper, was ist das alles? Ja, nun, Chrome macht ein paar wirklich ausgefallene Sachen. Wir haben das zwar nicht geschrieben, es stellt es dort hin, weil es davon ausgeht, dass wir das tun wollten. Das wirklich Coole an diesem Elementinspektor hier ist, dass, wenn Sie mit der Maus über jedes Element fahren, es dann auf der obigen Seite hervorgehoben wird, was wirklich cool ist Sie können dann auch mit der rechten Maustaste darauf klicken und es dann als HTML bearbeiten. Also könnten wir das Gericht dann einfach wieder entfernen und dann rausklicken. Und dann Kot, es geht weg. Hmm Wir könnten dann Command Z oder Z drücken und es kommt zurück. Wenn du nicht mit der rechten Maustaste auf etwas klicken und Inspizieren sagen willst , kannst du auch diese kleine Schaltfläche hier benutzen. Wenn ich den Mauszeiger darüber bewege und dann sage, wähle ein Element auf der Seite aus, um es zu überprüfen, oder Befehlstaste C. Und dann fährst du einfach mit der Maus über etwas und du kannst sagen, okay, überprüfe dieses In Ordnung, so stark. Mal sehen, ob Fettdruck funktioniert, klicken Sie mit der rechten Maustaste auf Als HTML bearbeiten und ändern Sie dies in B In Ordnung Das schien nichts zu ändern. Vielleicht ändern wir es auf EM. Sie können auch einfach zweimal tippen. Okay, diese Katzen sind super süß. Puh. Was hier passiert, ist, dass Sie nur die lokale Version ändern , die Ihnen der Browser gibt Sie ändern eigentlich nichts an Ihrem Dateisystem. Jetzt können Sie dies auch auf jeder Website der Welt tun. Sie können bearbeiten, was der Browser Ihnen bietet. Du änderst nichts. Du hackst nicht Du wirst nicht ins FBI-Gefängnis gehen, nichts dergleichen. Absolut laut, völlig legal. Es ist einfach sehr mächtig. Wenn Sie also auffrischen, wird alles wieder zu dem werden, was es einmal war Du kannst auch Elemente löschen, also lass uns auf dieses Bild hier drüben tippen und ich drücke einfach die Rücktaste Hoppla. Es ist weg. Es ist also eine wirklich leistungsstarke und visuelle Methode , um zu programmieren und zu sehen, was Sie codieren, zu sehen, wie Ihr Code aussieht. Ich meine, selbst hier kannst du diese Betonung nach oben ziehen . Also, wow, diese Superkatzen sind so süß, was Sinn macht, Superkatzen Aber ja, du kannst dieses starke Element sogar aus diesem P-Tag oder P-Element herausziehen dieses starke Element sogar aus diesem P-Tag oder P-Element Cool. Das sieht toll aus, oder? Ja. Die andere Sache , die Chrome getan hat, ist, dass es hier tatsächlich viel mehr Code eingefügt hat. Wenn wir also mit der rechten Maustaste klicken und die Seitenquelle anzeigen, sehen Sie hier H one, P, P, image, image. Großartig. Fantastisch. Aber wie hat es eigentlich all diese Dinge gemacht, HTML Kopf, Körper, all diese Dinge, ich werde dir mehr darüber erzählen, aber das wird für eine HTML-Seite Sinn machen. Also lass uns sie einschreiben. Gehen wir zum Visual Studio-Code. Und all dieses Zeug geht tatsächlich in unseren Körper. Das Erste, was wir machen und einfügen wollen, ist HTML. Da haben wir es und setzen es ans Ende. Wenn sich nun mehrere Elemente in einem anderen Element befinden, ist es wirklich hilfreich, einfach die Tabulatortaste zu drücken und es dann einzuziehen macht es einfach viel einfacher, es zu lesen, und dann wollen wir unser Hauptelement hier platzieren Innerhalb des Head-Elements befinden sich ein Haufen unsichtbarer oder versteckter Elemente wie der Titel, das kleine Symbol, das vor Ihren Augen erscheint, und solche Dinge. Und dann erscheint innerhalb Ihres Körperelements Ihr gesamter visueller Code. So wie das. Also schnell, bevor ich hier speichere, hier, das heißt einfach Testpunkt-HTML und zurück in Visual Studio-Code. Nennen wir das hier. Ich werde hier ein Titelelement einfügen. Nennen wir es Testseite. Okay. Sicher. Gehen wir zurück zu Chrome und aktualisieren. Sie haben jetzt eine Testseite in Ihrem Head-Element, Sie haben eine Testseite mit einem Titelelement. Fantastisch. Eine weitere Sache , die Chrome nicht wirklich getan hat, ist uns einen Duc-Typ zu geben, und Sie haben das vielleicht ein paar Mal gesehen , als ich versucht habe, dies zu schreiben Wenn ich hier anfange zu schreiben, heißt es Duc-Typ. Da haben wir's. Typ Duc, HTML. Das brauchst du nicht wirklich, aber es lässt nur einige ältere Browser erkennen, dass das eigentlich HTML ist Also los geht's. Speichern wir uns das. Gehen wir zum GitHub-Desktop. Und hier brauchen wir eine Zusammenfassung, weil wir mindestens zwei Dateien haben , die wir übertragen müssen. Also sagen wir einfach initial commit und commit to main. Nun, zu einem beliebigen Zeitpunkt, wenn du sagst, oh, ich möchte etwas hinzufügen, ja, füge es hinzu. Also vielleicht irgendwo hier drüben, wie in Überschrift eins, ich möchte eigentlich, dass es zwei Zeilen sind, aber ich möchte kein ganzes anderes Element erstellen Ich will nur eine neue Zeile. Wie mache ich das? Nun, wenn Sie sich bei irgendetwas nicht sicher sind, gehen Sie zu Chrome, öffnen Sie einen neuen Tab und fragen Sie sich Wie erstelle ich eine neue Zeile in HTML? Und um hier eine neue HTML-Zeile zu erstellen, können Sie das BR-Tag verwenden Okay. Es wird eine Menge Links geben, die du dir ansehen kannst. Manchmal sind sie im Stack-Overflow. Sie können sogar Chat GPT verwenden, wenn Sie möchten. Also lass uns das kopieren oder wir können es einfach schreiben und du gehst zurück zum Visual Studio-Code und dann BR In Ordnung Überschrift eins, Befehl S. Schauen wir uns das an. Ordnung, erzeugt einen netten kleinen Zeilenumbruch. Fantastisch Okay. Nein, du gehst zurück zum Gitybe-Desktop und sagst, du Zeilenumbruch in der Überschrift hinzugefügt sich für Main. Okay, wenn du anfängst, Dinge zu ändern, gewöhne dich einfach an zu sagen, ja, sieht gut aus. Verpflichte dich. Sie möchten sicherstellen, dass jede wichtige Änderung ihren eigenen MIT erhält. Das ist die beste Methode. Das heißt, wenn Ihre Katze über Ihren Computer läuft oder Ihren Computer klaut, Sie wissen schon, vor Ihrem Fenster oder wenn Sie Ihr Ingwerbier über Ihre Tastatur schütten, haben Sie nicht eine Menge Dinge verloren Vielleicht hast du nur etwa zwei Codezeilen verloren oder, du weißt schon, eine geringfügige Änderung an einem Bildelement oder so Sie haben also gerade eine ganze Reihe verschiedener HTML-Elemente geschrieben . Ich schlage vor, du pumpst die Luft mit der Faust oder stößt einen Schrei aus. Wow, Kacke. Feiert irgendwie. In der nächsten Lektion werde ich Ihnen zeigen, wie Sie Ihre Website mit der Welt teilen können, was ziemlich aufregend ist. Wir sehen uns dort. 10. 9 Teile deine Website: Zum Glück macht es GitHub für uns wirklich einfach, die Webseiten, die es verfolgt, zu verwenden , um daraus einfache Websites zu erstellen . Lassen Sie uns darauf eingehen. Okay, also wie können wir das jetzt online stellen, damit andere Leute es sehen können? Nun, lass uns zu GitHub Desktop gehen. Und wir haben diese Schaltfläche für veröffentlichtes Repository, entweder oben hier oder in der Mitte des Bildschirms hier. Veröffentlichen Sie also das Repository. Namensexperiment auf GitHub.com. Du kannst es etwas anderes nennen. Du kannst ihm eine Beschreibung geben. Halten Sie diesen Code geheim. Das musst du nicht tun. Wenn du es teilen möchtest, würde ich empfehlen, dieses Häkchen zu entfernen Halten Sie diesen Code also nicht geheim. Vor allem, wenn Sie meine Hilfe oder Hilfe einer anderen Person benötigen um Ihren Code anzusehen oder Ihren Code auszuchecken. Ja, deaktiviere das einfach. Veröffentlichen Sie das Repository. Bum. Das Tolle daran ist, dass Ihr Computer brennt, wenn spontan abbrennt Sie können nicht mehr darauf zugreifen. Ihr Code ist jetzt online. Das bedeutet auch, dass Sie, wenn Sie drei weitere Computer haben, von diesen Computern aus auf denselben Code zugreifen und sie mit github.com synchronisieren können Wer. Das ist großartig. Okay, was jetzt? Es hat sein Ding gemacht. Ja. Okay. Gehen wir in unserem Browser zu github.com Und du wirst es hier sehen. Das wird dein Nutzername sein, Slash Experiments oder wie auch immer du dein Repo nennst Lass uns darauf tippen. Okay. Also das ist Github, was großartig ist. Hier wird dein Code gespeichert. Sie können CTJPEG-Test-HTML sehen und hier sogar einige Änderungen vornehmen. Aber wir wollen unseren Code veröffentlichen, unsere Website, damit die Welt sie Gehen wir also zu den Einstellungen. Und dann Seiten auf der linken Seite. Das kann von Zeit zu Zeit anders aussehen. In Ordnung, von einer Filiale aus bereitstellen. Ja, klassisches Seiten-Erlebnis. GitHub-Aktionen. Nein, am besten für die Verwendung von Frameworks und die Anpassung Ihres Build-Prozesses, kompliziertes Zeug Also von einer Filiale aus bereitstellen. Fantastisch. Okay, GitHub-Seiten sind derzeit deaktiviert. Wählen Sie unten eine Quelle aus, um GitHub-Seiten für dieses Repository zu aktivieren. Ja. Okay, keiner. Wir haben nur eine Filiale, was großartig ist. Main, ausgewählte Wurzel, großartig. Speichern. Okay. Ihre GitHub-Seitenseite oder Pages-Website wird derzeit vom Hauptzweig aus erstellt. Okay. GitHub Pages Sauce gespeichert. Ich werde das aktualisieren, um zu sehen, ob sich etwas ändert. Okay. Ich finde das gut. Okay. Also, jetzt müssen wir unseren Benutzernamen kopieren, also Befehl T. Ich werde über den Punkt Github, IO und Schrägstrich hinausgehen und dann gehen wir zu Experiment Ich werde das kopieren. Und dann gehen wir zurück zu unserer Codebasis hier. Wir haben Testpunkt-HTML. Also, Testpunkt-HTML mit einem Schrägstrich. Whoa. Da ist es. Es ist online damit die Welt es sehen kann, meine Damen und Herren. Manchmal dauert es ein bisschen, bis man wirklich überall auf der Welt ankommt. Manchmal bist du da erfrischend, erfrischend, erfrischend. Aber wenn du sagst, okay, das funktioniert nach 10 Minuten nicht, möchtest du vielleicht zu den Einstellungen zurückkehren und dann zurück zu den Seiten. Und dann schau einfach hier im Bereich Build und Deployment nach. Es sollte ziemlich einfach sein. Und sogar hier drüben heißt es: „ Deine Seite ist live, jetzt geht's los.“ Also gehen wir, Bam, besuchen die Seite. Das wird passieren, wenn wir keine Indexdatei haben. Deshalb müssten wir dann Testpunkt-HTML eingeben. Okay, also lass uns das jetzt versuchen. Ich möchte meine Seite ein wenig aktualisieren. Ich möchte ein kleines Lieblingssymbol haben und ich möchte auch diesen Link ändern, sodass er nicht auf derselben Seite geladen wird, wenn ich darauf drücke Okay, wie machen wir das? Nun, lassen Sie uns etwas recherchieren, und ich möchte Sie daran gewöhnen, zu recherchieren, weil alles da draußen ist. Also ich möchte das Symbol für die vierte HTML-Seite. Lieblingssymbol, wie erstelle ich ein Symbol für eine HTML-Seite? Um ein Symbol einzufügen, fügen Sie den Namen der Symbolklasse zu beliebigen Inline-HTML-Element hinzu, das wirklich nicht so aussieht Äh, Tabulatorsymbol. Tabicon. Ja. Okay, schauen wir uns das an. Okay, außer den Keksen. Es gibt zwei Möglichkeiten, einer Website ein Lieblingssymbol hinzuzufügen , 13 Antworten Fügen Sie einfach den folgenden Code zum Head-Element hinzu. Okay, lass uns das kopieren. Gehen wir zu Visual Studio. Okay. Ikone. Ich möchte, dass meine Katze die Lieblingsikone ist. Lass uns das machen Befehl S. Aber es hieß, es gäbe zwei Möglichkeiten, PNG-Favicons, Favicons So heißt es und wird von den meisten Browsern außer IE 10 und niedriger unterstützt meisten Browsern außer IE 10 und Sie können auch ICO-Favicons verwenden. müssen nicht mehr mit einem Symbol und einem Roll-Attribut mit einem Shortcut fortfahren , bla, bla, bla. Alle modernen Browser fordern immer einen Favicon-Punkt-ICO an, es sei denn Sie haben eine Verknüpfung über einen Link angegeben Dies ist eigentlich ein Linkelement, das sich von einem Ankerelement unterscheidet Okay. Bisher Ikonenpunkt ICO. Nun, ich weiß nicht wirklich, wie man ein ICO macht, also bleibe ich einfach bei meinem JPEG oder PNG. Lass uns testen, ob das funktioniert. Das ist die Online-Version. Das ist der lokale. Also lass uns auffrischen. Oh, da ist es. Du kannst es sehen. Fantastisch. Sagen wir auf dem Gita-Desktop, sagen wir, aktualisiertes Lieblingssymbol. Da haben wir's. Verpflichte dich zu Min. Nun, dieser erste Commit to Min gilt nur für Ihren lokalen Computer. Wenn Sie dann Origin pushen, wird dies zur Online-Version Ihrer Website weitergeleitet Okay. Und wir können das überprüfen, indem wir zum Code auf github.com und den HTML-Code hier testen Da ist es. Das CatJPEG als echtes Symbol oder das Linksymbol, das Fav-Symbol, um sie zu aktualisieren Dann komm hoch, aktualisiere erneut. Scheint im Moment nicht zu funktionieren , kann einige Zeit dauern. In der Zwischenzeit möchte ich Ihnen zeigen, ob wir das ein wenig bearbeiten, also bearbeiten Sie diese Datei. Gehen wir zur Überschrift Wer? Vielleicht können wir darüber sprechen. Katzen sind echt cool. Und dann verpflichten Sie sich zu den Änderungen, aktualisieren Sie das Test-HTML mit einer neuen Überschrift Übernehmen Sie direkt die Hauptniederlassung, Crew, ja, ja. Verpflichten Sie sich zu Änderungen. Okay. Also, jetzt habe ich tatsächlich online eine Änderung vorgenommen, aber lokal, das spiegelt sich nicht wider. Gehen wir also zurück zum GitHub-Desktop. Und was wir hier tun wollen, ist den Ursprung abzurufen. Und es heißt: Hey, hol dir einen Commit von Origin Remote. Das ist also wirklich praktisch, wenn ihr auf mehreren Computern arbeitet , oder wenn es, ihr wisst schon, Leute gibt, die an demselben Projekt arbeiten, da ihr euch alle im Code auf dieses eine, ihr wisst schon, Source-of-Truth-Repository online überträgt. Dann tippt ihr auf Origin ziehen. Und das wird dann deine lokale Version aktualisieren. Also lass uns das überprüfen. Katzen sind echt cool. Fantastisch. Da haben wir's. Lass uns testen, ob dieser jetzt ein etwas aktualisiertes Favicon hat. Das tut es Fantastisch. Okay. Nun, das Letzte, was ich hier machen möchte, ist , wo HRF steht Wie kann ich das in einem neuen Tab öffnen? Lassen Sie uns also noch einmal ein bisschen recherchieren. Wie codiere ich Core , um ihn in einem neuen Tab zu öffnen? Kann natürlich HatiPT fragen. Aber hier wird das leere Zielattribut hinzugefügt. Okay. Okay, okay. Also, ich weiß, dass das funktioniert, aber wenn es bei dir nicht funktioniert, versuche einfach etwas anderes. Also lass uns hierher gehen. Ziel. Okay, das ist ein gutes Zeichen, wenn es anfängt , die Rückgabe automatisch auszufüllen. Hier gibt es ein paar Optionen. Also lass uns Blank nehmen. Da haben wir's. Befehl S. Gehen wir zurück zu Chrome und Refresher. Okay? Optisch sollte sich nichts ändern, aber lass uns auf cooles Objekt tippen. Und es öffnet Google in einem neuen Tab. Whoo hoo Das ist großartig. Okay, gehen wir zurück zum Github-Desktop und öffnen den Link in einem neuen Tab. Verbinde dich mit Maine, das sich wiederum immer noch auf unserem Computer befindet, und drücke dann Origin. Und in Kürze sollten dann auch unsere Online-Websites aktualisiert werden. Sie haben gerade Ihre erste Website veröffentlicht , damit die Welt sie sehen kann, und sie ist sicher mit Github synchronisiert. Jetzt wird Ihre Website jedes Mal aktualisiert, wenn Sie Ihren Code auf Github übertragen . Wenn Sie mehr als einen Computer haben, können Sie das Repo auf Github außerdem als ultimative Informationsquelle verwenden . Sie können Änderungen ganz einfach auf Github übertragen und Änderungen von Github abrufen Jetzt bist du auf dem Weg, das Internet zu übernehmen. Aber bevor wir uns mit der Gestaltung von Websites befassen, möchte ich auf Ordner, Dateibereiche und Dateibenennung eingehen . Ich weiß, es klingt langweilig, aber das ist die Ursache für viele Bugs und Irrtümer und Kopfschmerzen. Wenn du diese Dinge verstehst, wird alles viel einfacher sein . Wir sehen uns im nächsten Video. 11. 10 Benennung, Ordner und Dateipfade: Okay, lassen Sie uns einige Dinge behandeln, die Ihnen das Leben erheblich erleichtern werden, wenn Sie sie einmal verstanden haben. Das erste hat mit der Berücksichtigung von Groß- und Kleinschreibung zu tun. In den meisten Fällen ist es auf Ihrem lokalen Computer, auf dem Sie programmieren, egal, auf dem Sie programmieren, egal, ob Sie Groß- oder Kleinbuchstaben oder eine Kombination aus beiden verwenden Kleinbuchstaben oder eine Kombination aus beiden Sie können testen, ob es wichtig ist, indem die Groß-/Kleinschreibung eines Bilddateinamens ändern, entweder im Dateisystem oder in Ihrem HTML-Code Wenn bei der Änderung der Groß- und Kleinschreibung etwas nicht funktioniert, unterscheidet Ihr Computer zwischen Groß- und Kleinschreibung. Das ist wichtig, weil es den meisten Computern und Servern, die online sind, wichtig ist, welche Groß- und Kleinschreibung Sie verwenden. Sie unterscheiden zwischen Groß- und Kleinschreibung. Warum das wichtig ist, ist, dass auf Ihrem lokalen Computer vielleicht alles fantastisch aussieht , aber durcheinander und kaputt ist, wenn Sie es online sehen Auf Ihrem Computer funktioniert der Zugriff auf Cat Dot JPG möglicherweise, weil Cat Dot JPG und Cat Dot JPG als dasselbe angesehen werden, weil das Dateisystem Ihres Computers nicht zwischen Groß- und Kleinschreibung unterscheidet Gitub-Server betrachten sie jedoch als separate Dateien, da Github zwischen Groß- und Kleinschreibung unterscheidet Überprüfen Sie also die tatsächlichen Datei- und Ordnernamen mit denen, die Sie in Ihre HTML- und CSS-Dateien geschrieben haben in Ihre HTML- und CSS-Dateien geschrieben , wenn solche Dinge passieren. Um dies zu verhindern, wählen Sie jedoch eine Standardmethode für die Benennung Ihrer Dateien und bleiben Sie dabei Ich bevorzuge es, alles in Kleinbuchstaben zu benennen und Bindestriche anstelle von Leerzeichen zu verwenden Das nennt man Kebab Case. Andere beliebte Optionen sind Camel Case und Snake Case. Die zweite Sache , die Ihnen das Leben erleichtern wird, ist die Verwendung von Ordnern Ordner machen Ihr Projekt übersichtlicher. Dies ist besonders nützlich , wenn Ihr Projekt größer wird Sicher. Sie können Ihren Code ändern und Ordner erstellen und Dateien darin ablegen, während Sie programmieren Dies nimmt jedoch Zeit in Anspruch und führt häufig zu Fehlern. Deshalb versuche ich, von Anfang an organisiert zu bleiben. Ich habe einen IMG-Ordner für Bilder. Ich habe einen CSS-Ordner für CSS-Dateien. Wenn ich meine eigenen benutzerdefinierten Schriften habe, habe ich eine Schriftdatei, und wenn ich JavaScript-Dateien habe, habe ich einen JS-Ordner. Alles, was ich im Hauptordner haben möchte, sind HTML-Dateien und Ordner. Sie können Ihre Ordner in VS-Code oder in Ihrem Dateisystem erstellen. Die dritte Sache, die Ihnen das Leben erheblich erleichtern wird, ist das Verständnis von Dateipfaden. Da wir Ordner und Dateien in Ordnern verwenden, wie können wir dem Browser sagen, wo sich eine Datei befindet? Beim Ausschreiben des Dateinamens teilen wir dem Browser mithilfe einer Kombination von Anweisungen mit, wo sich die Datei einer Kombination von Anweisungen bevor wir zum Namen der Datei gelangen. Die erste Anweisung, die Sie verwenden können, besteht darin, den Browser anzuweisen, in demselben Ordner zu suchen , in dem sich diese Datei gerade befindet. Verwenden Sie einen Punkt, gefolgt von einem Schrägstrich. Die zweite Anweisung besteht darin, in einen Ordner zu schauen. Verwenden Sie den Namen des Ordners, gefolgt von einem Schrägstrich. Die dritte Möglichkeit besteht darin, zu dem Paar und dem Ordner zu wechseln. Verwenden Sie zwei Punkte und einen Schrägstrich. Die vierte Möglichkeit besteht darin, im Stammordner oder Hauptordner zu beginnen im Stammordner oder Hauptordner zu Sie geben einen einzelnen Schrägstrich ein. Dies funktioniert auf Ihrem lokalen Computer möglicherweise nicht wie erwartet da sich Ihr Projektordner möglicherweise in mehreren anderen Ordnern Wenn Sie also einen Browser anweisen, zum Stammordner zu wechseln, geht er bis zum Anfang der Ordnerstruktur Aber online, wo es ein Urol gibt, funktioniert das wunderbar. Sie können natürlich auch mit einer Domain oder URole mit einem Schrägstrich am Ende beginnen, wie taptapkaboom.com forwardslash wie taptapkaboom.com forwardslash Und das Tolle an diesen Anweisungen ist, dass Sie sie kombinieren können , zum Beispiel mit dem Ordner beginnen , in dem sich diese Datei befindet, dann zum übergeordneten Ordner wechseln, dann in den Bildordner gehen, und in diesem Ordner befindet sich ein Bild namens Cat Dot JPEG . Okay, das sind die drei Dinge , die sehr helfen werden. Lass uns schnell auffrischen. K-Empfindlichkeit ist wichtig. Verwenden Sie von Anfang an Ordner, um organisiert zu bleiben, und wir verwenden den Dateipfad, um dem Browser mitzuteilen, wo sich die Dateien befinden. Als Nächstes lernen wir, wie wir das Aussehen unserer HTML-Elemente mit CSS ändern können, und hier wird es richtig lustig. 12. 11 Was CSS ist: Also haben wir etwas HTML geschrieben, aber es sieht nicht schön aus. Hier kommt CSS ins Spiel. Das CSS, das wir schreiben, lässt unseren HTML-Code gut aussehen indem es die langweiligen Standardstile überschreibt die vom Browser bereitgestellt werden Wir schreiben CSS, um dem Browser mitzuteilen , wie HTML-Elemente aussehen sollen Dazu schreiben wir einen Eigenschaftsnamen und ein Wertepaar, getrennt durch einen Doppelpunkt mit einem Semikolon am Ende Wir können ein Element mit so vielen Eigenschaftspaaren gestalten , wie Und es gibt jede Menge Eigenschaften, die Sie schreiben können , um zu ändern, wie ein Element aussieht, sich anfühlt und funktioniert. Eigenschaften wie Höhe, Hintergrundfarbe, lustige Familie, Schriftgröße und vieles mehr. Nun gibt es zwei Methoden, CSS zu schreiben. Die erste ist die Verwendung von Inline-Stilen, bei denen wir ein Element mithilfe eines HTML-Attributs namens style stylen. Die zweite Möglichkeit besteht darin, Regelsätze zu verwenden, bei denen wir Elemente auswählen, die formatiert werden sollen, gefolgt von den CSS-Eigenschaften und -Werten für diese Elemente. werden wir beide Optionen und einige andere wichtige CSS-Dinge behandeln nächsten Lektionen werden wir beide Optionen und einige andere wichtige CSS-Dinge behandeln. 13. 12 Inline-CSS: In dieser Lektion werden wir praktisch vorgehen und anfangen, CSS mit Inline-Stilen zu schreiben, die wir in ein HTML-Attribut schreiben. Beachten Sie nun bitte, dass beim Schreiben von HTML und CSS alles auf amerikanische Weise buchstabiert wird beim Schreiben von HTML und CSS alles auf amerikanische Weise buchstabiert Ja, also was wir hier tun werden, ist einige Inline-Styles zu erstellen Wer hoo hoo. Ziehen wir also Experimente in den Visual Studio-Code. Und ja, es sieht ziemlich groß aus. Kann diesen Willkommen-Tab schließen. Wir haben also Test-HTML. Was ich hier tun möchte, ist eine neue Datei zu erstellen. Und nenne es Punkt-HTML im Inline-Stil oder Punkt-HTML im Inline-Stil. Ordnung. Drücken Sie für Ton. Und hier wirst du sehen, Oh, müssen wir das alles nochmal machen? Ja, wir müssen das alles noch einmal machen, aber das ist okay. Also nehmen wir A, Typ Doc. Da haben wir's. Dann werde ich HTML machen. Und dann Kopf. Ja. Okay. Und dann haben wir hier einen Titel, und der Titel sollte Inline-Styles sein. Das ist großartig. Und dann haben wir eine Leiche. Okay. Das sieht gut aus. Du kannst dich also, du weißt schon, wirklich gewöhnen, das zu tun, den HTML-Code zu schreiben, den Hauptteil und solche Dinge. Lass uns jetzt einen H-Wert schreiben. Und hier, wenn du nicht willst, musst du den ersten Ton nicht schreiben. Du kannst einfach H eins eingeben, und das sollte dir, du weißt schon, einige Optionen bieten. Und das wird als ET-Abkürzung bezeichnet, und ich drücke einfach die Eingabetaste und es sollte für H ein Tag auf der linken Seite, H eins auf der rechten Seite stehen, und dann sollte mein Cursor in der Mitte sein. Wenn es das nicht tut, dann musst du, du weißt schon, deinen gesamten Tag am Anfang und am Ende oder dein Element ausschreiben . Okay, er ist weg. Gehen wir also zur ersten Überschrift über. Ich werde das viermal machen. Und was ich dann hier ändern werde ist die Überschrift zwei, drei, vier, und lassen Sie uns das auf die Überschrift zwei, drei und vier ändern . Okay. Das sieht ziemlich gut aus. Und dann werde ich das noch einmal duplizieren. Und dann Command S oder speichere das. Sie können zu Datei und dann zu Speichern oder Speichern gehen, wenn Sie möchten, aber Command S oder Controls, wenn Sie Windows verwenden. Und dann gehen wir zurück zum Finder. Wir haben Inline-Styles Dot HML. Tippen wir zweimal darauf, um es zu öffnen . Und das bekommst du. Überschrift eins, zwei, drei, vier, sie haben alle unterschiedliche Größen, was Sinn macht, weil es unterschiedliche Überschriftenebenen gibt . Okay, cool. Gehen wir also zum Studio-Code oder VS-Code. Und wir werden ein Attribut namens Style erstellen. Und hier nehme ich die Schriftgröße und ändere sie auf 30 Pixel. Da haben wir's. Das sieht gut aus. Das werde ich kopieren und einfügen. Oh. Viel Kopieren und Einfügen Und dann diese, ich nehme 20 Pixel Und das werde ich mir sparen. Okay. Gehen wir zu Chrome und Refresher. Und Sie werden sehen, dass unsere ersten Überschriften alle die gleiche lustige Die nächsten Überschriften haben ebenfalls dieselbe lustige Größe. Puh. Ziemlich cool, oder? Ja. So kannst du Dinge gleich aussehen lassen, auch wenn sie nicht gleich sind. Okay. Wir können hier immer mehr Eigenschaften hinzufügen, also entscheiden wir uns für Farbe. Das ist eine Textfarbe, nicht sehr intuitiv, ich weiß. Es gibt eine Reihe von Möglichkeiten , Farbe zu verwenden. Sie können sich für Hex-Code entscheiden, also kann es so sein, Hash, ff00 00, was rot ist, oder Sie könnten einfach Rot so schreiben Aber wenn du das Wort Rot schreibst, gibt es nicht so viele Variationen von Rot Also, wenn du so etwas willst, nun, dafür gibt es kein Wort, glaube ich nicht. Also lass uns das speichern. Lasst uns hier auf Farbe setzen, nicht auf Konter, was auch immer das war. Farbe muss amerikanisch sein, weißt du noch? Und los geht's mit Alice Blue. Ist das eine Sache? Lass uns sehen. Also Alice Blue. Und der Grund, warum es sich beschwert, ist, dass wir Ende weder einen Doppelpunkt noch ein Semikolon haben Also lass uns das nochmal versuchen. Farbe, los geht's. Alice Blue ist ein bisschen wie Weiß. Was ist mit Aquamarin? Da haben wir's Cool. Und Sie sollten auch sehen, dass die Farben kurz vor dem tatsächlichen Wert erscheinen. Okay, Farbe hier. Lass uns Rot nehmen. Okay. Und dann endlich dieser hier. Farbe, lass uns runtergehen, mit den Pfeiltasten auf meiner Tastatur. Crimson ist ziemlich cool. Wie wäre es mit einem dunkelgoldenen Rot? Whoo. Was für ein Farbname Okay. Heb dir das auf. Sie können hier also sehen, ob Sie möchten, dass alle diese Farbe haben, Sie können sie einfach kopieren und einfügen. Aber wenn du sie dann alle ändern willst, sagst du vielleicht: Oh, okay. Lass uns jetzt etwas anderes suchen. Was ist mit RGB Relative? Hmm, ich weiß nicht einmal, was das ist, um ehrlich zu sein. Aber RGP oder RGBA, das könnten wir machen. So rot. Nehmen wir 255, grüner Wert. Gehen wir für 120 und einen blauen Wert für 100. Dies sind die Werte 0-255 und dann ein Alpha-Wert, nehmen wir 0,5 Es ist also irgendwie undurchsichtig, halbtransparent in der halbtransparent Also da hast du es mit einer Zahl von 0-1 zu tun. Normalerweise ist es ein Bruchteil. Man könnte also 0,5 sagen. Oh, und hier, sieh dir das an , es hat einen netten kleinen Farbwähler Oh. Ziemlich schick. Also, sieh dir das an. Okay. Cool. Also, was ich vorhin gesagt habe, ist wenn du all diese Farben ändern willst, musst du dann kopieren und dann einfügen, einfügen, einfügen, was ein bisschen irritierend sein kann Sie können zwei Semikolons am Ende haben, aber das ist Okay, sagen wir das. Gehen wir zurück zu Chrome und aktualisieren. Okay, Sie können also sehen , dass die unteren vier dieselbe Farbe haben. Du hast hier oben ein paar verschiedene Farben. Fantastisch. Was wirklich interessant ist, ist das, wenn man anfängt, Dinge innerhalb eines Elements zu ändern . Gehen wir also zur ersten Überschrift über. Ich werde das in eine neue Zeile setzen, was nichts ändern sollte. Und dann ändere ich die Zahl eins in den Buchstaben eins. Und ich möchte dir nur zeigen , dass sich nichts wirklich ändert. Es ist eine Auffrischung, nur der Text. Und bei diesem möchte ich auch seine Farbe ändern. Ich mache das also, indem ich ein Span-Element darum herum lege, und dann können wir dort ein Style-Attribut einfügen und die Farbe in Blau ändern. Okay. Ich werde das speichern und dann aktualisieren. Wenn Sie also die Farbe nicht wirklich angeben, sollte sie die Farbe ihres übergeordneten Elements erben Wenn ich also Cliqre schreibe und Inspect sage, siehst du, dass dieser Bereich die Farbe Blau hat und sein übergeordnetes Feld die Farbe dieser fertigen Farbe hat Okay, wenn du das ganz einfach ändern willst, wählst du einfach diese Farbe aus, und dann sollte hier „Stile“ stehen, und es sollte dir zeigen woher all die Stile stammen Von H One hat man also die Farbe Rot geerbt. Wenn ich also Blau deaktiviere, dann kommt die Farbe Rot oder diese fertige Farbe aus dem übergeordneten Element durch Mir geht es gut. Was ich Ihnen jetzt zeigen möchte, ist, ob Sie einem Element mehrere Eigenschaften mit demselben Namen geben. Also schau dir das an. Gehen wir zum Visual Studio-Code. Und lassen Sie uns hier eine weitere Farbe hinzufügen. Lass uns eine Art Gelbgrün nehmen. Sieht gut aus. Okay. Und dann, vielleicht für Überschrift zwei, ändern wir das auf Farbe und entscheiden uns für ein dunkles Schieferblau. Okay. Nun, vielleicht weißt du schon, was passieren wird, vielleicht weißt du es nicht, solange wir schon dabei sind, ich mag es nicht wirklich, wenn es einfach immer weiter nach rechts geht . Also, wie ändere ich das? Nun, ich möchte mich für eine Art von Einstellungen entscheiden. Also ich denke, es sind Befehl und Komma. Los geht's, oder du suchst nach Code und Einstellungen und tippst dort einfach auf Einstellungen Jetzt möchte ich nach Rap und Wortwechsel suchen. Die Zeile sollte umbrechen, und ich möchte, dass das aktiviert ist. Mal sehen, ob das klappt. Ja. Das heißt, es geht nicht immer weiter und weiter nach rechts. Es lässt sich einfach ganz gut wickeln. Das ist also in meinem Alter von zwei Jahren, und es ist alles immer noch auf Zeile 14. Okay, danke. Lass uns das sagen. Befehl S und Befehl R für Aktualisierung. Okay. Also auf dem Weg hierher, lassen Sie uns einen Blick darauf werfen. Hmm. Sie werden also sehen, dass die Eigenschaftsfarbe, die zuletzt hinzugefügt wurde, diejenige ist , die der Browser anwendet, und Sie können sie hier sehen. Es ist die Farbe Rot, das Rot, und dann die Farbe Gelbgrün, ist durchgestrichen, weil wir diese Eigenschaft an letzter Stelle gesetzt haben. Das Gleiche gilt für Überschrift Nummer zwei hier drüben. Wenn wir uns das genauer ansehen , hat die Farbe Dunkles Schieferblau Vorrang vor dieser anderen RGBA-Farbe, weil sie zuletzt geschrieben wurde Aber dieser Bereich mit der Farbe Blau hat immer noch die Farbe Blau, weil es ein eigenes Element ist, und die Farbe, die er von diesem H One geerbt hat, wird durch seine Farbe Blau überschrieben, vor allem, weil es Nun, was können wir noch tun? Nun, sieh dir das an. Wenn ich einfach auf einen dieser Eigenschaftswerte tippe und die Eingabetaste drücke, kann ich anfangen, einen anderen einzugeben. Gehen wir also zum Hintergrund. Lass uns Farbe nehmen. Und dann hier, was ist Azure? Lass uns zu Azure gehen. Es taucht nicht wirklich auf. Also vielleicht für hellgoldenes Stabgelb. A kommt wirklich nicht besonders gut zur Geltung. Wie wäre es, wenn wir uns einfach für ein dunkelrotes, indisches Rot entscheiden . Da haben wir's. Das ist ziemlich cool. Und noch einmal, wenn Sie hier aktualisieren , wird dieser Stil nicht fortbestehen Es wird nicht in Ihrer Datei gespeichert. Sie probieren nur Dinge in dieser Version aus, die Ihnen der Browser hier sendet. Okay, also lass uns reingehen und ein paar Hintergrundfarben einfügen . Also Visual Studio-Code. Nun, lassen Sie uns die Hintergrundfarbe wählen. Okay, nehmen wir ein grünes Grau, Grün cool. Achten Sie darauf, dass zwischen Semikolon steht Also die Hintergrundfarbe hier, aber was mit der Schriftgröße passiert ist, ist irgendwie verschwunden Lassen Sie uns also die Schriftgröße wählen, und aus irgendeinem Grund werden einfach diese 30 Pixel gelöscht Also, obwohl es Dinge für Sie automatisch ausfüllt, überprüfen Sie einfach noch einmal, was es tut Und dann können wir das hier kopieren und einfügen und vielleicht hier drüben. Okay. Dieser hier, lass uns die Hintergrundfarbe nehmen. Whoa. Ein Indigo. Okay. Wenn einige dieser Dinge , die auftauchen, nervig werden, können Sie sie in den Einstellungen ausschalten Möglicherweise müssen Sie nur suchen wie sie heißen, oder, Sie wissen schon, einfach generell die Einstellungen durchgehen und einige Dinge nach Ihren Wünschen ändern All diese Dinge wie, Gus, komm schon. Ich versuche nur, hier Sachen zu schreiben. Indigo, Indigo, Indigo. Und du kannst sehen, wie verwirrend das wird Also, wo ist mein Text? Wo sind meine Styles? Wie, Whoa. Und das alles führt uns zur nächsten Lektion Mach dir keine Sorgen. Deshalb werden wir Fortschritte machen. Okay, lass uns zu Google Chrome gehen, Auffrischung. Okay, alles hat jetzt eine Hintergrundfarbe. Fantastisch. Und wenn wir das ändern würden, müssten wir jede einzelne Zeile ändern. Also, eine, zwei, drei, vier, fünf Linien für die lila Eins, eins, zwei, drei, für die Grüntöne. Wow. Okay, jetzt gehen wir zu Github Desktop. Wir haben eine neue Inline-Style-Datei, also erstellen Sie Inline-Styles namens HTML. Entscheiden Sie sich für Maine und drücken Sie dann Origin. Was jetzt wirklich wichtig ist, ist, dass, falls du meine Hilfe für etwas benötigst, ich möchte, dass du sie auf dein GitHub-Konto hochlädst, damit du sagen kannst: Hey, die Dinge funktionieren nicht. Hier ist mein Link, bitte. Hallo, ich. Und dann kannst du mir eine URL schicken. Du kannst also sagen, okay, lass uns zu GitHub gehen. Punkt com, und du kannst zu deinem Experiments-Repo gehen. Sie können dann zu Ihren Einstellungen gehen. Sie können zu Ihren Seiten gehen und dann können Sie hier als Live zu Ihrer Website gehen. Und weil wir an Punkt-HTML mit Inline-Styles gearbeitet haben, kannst du diese Seite dann an Punkt-HTML mit Inline-Styles gearbeitet haben, mit mir teilen, und dann kann ich sie mir genau ansehen, weißt du? Ich hoffe, du merkst langsam , wie lustig und cool und mächtig das ist. Du kannst Dinge ziemlich einfach episch und fantastisch aussehen lassen, aber du hast vielleicht bemerkt, dass das gnädig sein könnte und dass es lange dauern kann, das CSS für mehrere Elemente zu ändern , die du gleich aussehen möchtest. In der nächsten Lektion werde ich Ihnen zeigen, wie Sie CSS-Regelsätze verwenden , und Ihnen erklären, warum sie oft besser zu verwenden sind. 14. 13 CSS-Regelsätze: Mit dem CSS-Regelsatz geben Sie an, welche Elemente Sie stylen möchten, und schreiben dann die Eigenschaftsnamen und Werte in die geschweiften Klammern Lassen Sie mich Ihnen die offiziellen Namen aller Teile eines Regelsatzes Das wird es in Zukunft einfacher machen, alles zu erklären und zu verstehen . Der Teil, in dem Sie angeben , welche HTR-Elemente Sie formatieren möchten , wird als Selektor oder Selektoranweisung bezeichnet Hier wählen Sie aus, welche Elemente Sie stylen möchten. Dieser Selektor zielt auf alle H-One-Elemente ab. Dieser zielt auf alle Bildelemente ab. Wir werden später im Kurs komplexere Beispiele für Selektoranweisungen behandeln später im Kurs komplexere Beispiele für Selektoranweisungen Der Teil innerhalb der geschweiften Klammern wird Deklarationsblock genannt Er enthält eine oder mehrere durch Semikolons getrennte Deklarationen , und ein Eigenschaftswertpaar Am Ende einer Deklaration setzen Sie ein Semikolon setzen Sie Dieser Regelsatz besagt also, dass alle Elemente der ersten Überschrift ausgewählt und ihre Textfarbe rot und ihre Schriftgröße 50 Pixel groß Elemente der ersten Überschrift ausgewählt und ihre Textfarbe rot werden. Durch die Verwendung von RuleSets sind Ihre HTML-Dateien viel übersichtlicher und leichter Und Sie können mit Selektoren einige leistungsstarke Dinge tun, auf die ich später in diesem Kurs noch eingehen werde Okay, fangen wir an, ein auf Regelsätzen basierendes CSS zu schreiben. Anstatt also eine ganz neue HTML-Datei mit den Kopf- und Körperelementen zu schreiben , werde ich diese einfach duplizieren. Also rechtsklicken und duplizieren, und dann drücke ich Raton oder klicke mit der rechten Maustaste und tippe dann auf Umbenennen Und ich nenne es RuleSet. RuleSet-Stile punktet mit HTML. Okay. Und dann öffne ich im Visual Studio-Code Rul Set Styles Und du wirst sehen, dass es grün ist, weil es neu ist. Das ist also so, als würde man sagen: Hey, es ist neu. Also lass uns hier reingehen. Wechseln wir zu RuleSet-Stilen Okay. Und dann werden wir in deinem Kopfelement ein solches Stilelement kreieren. Also beim Öffnen und Schließen des Tags und innerhalb Ihres Style-Elements werden wir etwas CSS schreiben. Also möchte ich alle H-One-Elemente ändern. Erstens, wenn ich auf die öffnende Klammer drücke, sollte es für mich so eine schließende Klammer erzeugen Du kannst auch ein Leerzeichen dazwischen setzen . Ich mache das gerne. Macht es ein bisschen einfacher zu lesen. Und wenn ich dann die Tabulatortaste drücke, setze ich den Cursor hierher. Und dann möchte ich die Let's Go für die Hintergrundfarbe ändern . Also Hintergrundfarbe. Also, lass uns Schwarz nehmen, weil das einfach richtig cool ist, oder? Also Command S. Gehen wir jetzt zu Google Chrome, und das haben wir nicht geöffnet. Tippen Sie also zweimal auf Regelsatzstile. Und hier hat sich nichts geändert. Interessant. Also, wenn wir das überprüfen, weil es passieren wird, schreibst du etwas, du erwartest, dass etwas passiert, und dann ändert es sich nicht. Also schauen wir uns das H an, okay? Interessant. Die Hintergrundfarbe ist schwarz, aber sie wurde durchgestrichen und die gelbgrüne Farbe wurde aufgetragen Das ist Farbe, aber die Hintergrundfarbe Grün wurde angewendet Hmm. Also, was hier vor sich geht , ist, je spezifischer eine Eigenschaft und ein Wert sind, desto mehr wird der Browser dies bevorzugen Es wird sich für diese Variante entscheiden und für etwas, das nicht so spezifisch ist. Also sagen wir, Hallo, alle H, ich möchte, dass ihr eine schwarze Hintergrundfarbe habt. Bedeutet dieser Elementstil, hey, dieses sehr spezielle Element, ich möchte, dass du eine grüne Hintergrundfarbe hast. Wenn wir hier also die Hintergrundfarbe deaktivieren müssten, ah, dann wird sie schwarz, was wirklich cool ist Gehen wir also zurück zum Visual Studio-Code. Lassen Sie uns die Hintergrundfarbe, die Hintergrundfarbe all dieser Dinge herausnehmen . P. P. Und Sie können sehen, wie viel Zeit es dauert, CSS-Werte zu bearbeiten. Puh. Okay, das sieht jetzt etwas überschaubarer Also werde ich das speichern. Gehen wir zurück zu Chrome und aktualisieren. Okay, jetzt haben nur die Elemente der ersten Überschrift diesen schwarzen Hintergrund, was großartig ist. Lass uns hier etwas anderes versuchen. Gehen wir zurück und sagen H Einsen, Komma, H zwei, H drei, H vier Sie sagen hier also im Grunde: Alles, was ein H eins, ein H zwei, ein H drei oder ein H vier ist, möchte ich diese CSS-Eigenschaft auf Sie oder diese CSS-Eigenschaften anwenden CSS-Eigenschaft auf Sie oder diese CSS-Eigenschaften Also Befehl S, lass uns zu Chrome zurückkehren. Und jetzt haben sie alle diesen schwarzen Hintergrund. Okay, gehen wir hier zurück zum Visual Studio-Code. Das sieht toll aus. Fantastisch. Jetzt möchte ich nur die Farben von H ändern. Anstatt hier einen Farbwert und eine Eigenschaft einzugeben, werde ich mich für H eins entscheiden und dann für Farbe. Und was für eine Koralle vielleicht. Koralle. Ja. Fantastisch. Und auch hier wird es wahrscheinlich nicht funktionieren, weil es bereits Inline-Farbstile gibt. Gehen wir also zu Chrome und aktualisieren Sie es. Nichts sollte sich ändern. Hab dich verstanden, verstanden Lassen Sie uns also die Farbeigenschaften entfernen. Okay. All diese. Auf Wiedersehen. Obwohl das eine ziemlich coole Farbe war. Also, ich werde es hier aufhängen, aber ich will es einfach, aber ich will es einfach du weißt schon, unsichtbar machen, aber ich will es trotzdem sehen. Also, wie mache ich das? Nun, das nennt man Kommentar. Sie wählen also einen Haufen Text aus und drücken dann die Befehlstaste und den Schrägstrich, und schon wird ein Kommentar für Sie erstellt Sie könnten auch Ihren eigenen Kommentar schreiben, indem Sie den Schrägstrich Asterix und am Ende Asterix und den Schrägstrich eingeben . Der Browser liest das nicht. Ziemlich cool. Okay, nehmen wir diese Farben raus. Okay. Das sieht ziemlich gut aus. Das ist viel überschaubarer Also lass uns das speichern. Okay. Gehen wir zurück zu Chrome Refresh. Okay, also Überschrift eins, Überschrift eins, Grate. Der Rest hat eine schwarze Farbe. Okay, gehen wir zurück zum Visual Studio-Code. Geben wir eine Standardfarbe für H one ein, H 2h3h4. Nehmen wir eine Art Grün. Entscheiden wir uns für Grün. Okay, speichern. Also, was hier passieren sollte, ist, dass H eins, H 2h3h4, sie die Farbe Grün haben sollten und dann H eins die Farbe Koralle haben sollte, und dann H eins die Farbe Koralle haben sollte weil es diesen Stil hier überschreibt Und weil dieser zuletzt geschrieben wurde, sollte der Browser dann den anderen vorziehen, der Okay. Auffrischen. Da haben wir's. Das funktioniert. Also, Überschrift eins. Lassen Sie uns inspizieren. Die Farbe der Koralle wird aufgetragen. Da haben wir es wegen der Farbe Grün, die auf H eins, H zwei, H drei, H vier angewendet wird . Okay. Da haben wir's. Jetzt hat Span immer noch Farbe Blau, weil es immer noch einen Inline-Stil hat. Großartig. Okay. Zurück zum Visual Studio-Code. Was ist mit den Schriftgrößen? Nun, okay, lass uns hier ein paar Dinge ändern. Nehmen wir eine Schriftgröße von 30 Pixeln. Und dann können wir hier all diese entfernen. Wow. So viel Arbeit im Umgang mit Inline-Stilen. Aber du kannst sie verwenden , wenn du willst. Okay. Vielleicht beschweren wir uns hier über diese Dinge, also nehmen wir sie raus. Okay. Der einzige Inline-Stil wir haben, ist auf dem Span. Speichern Sie dort. Jetzt sieht alles genauso aus, oder die Hintergrundfarbe. den meisten Farben entspricht die Schriftgröße eher dem Abstand um dieses H vier oder das H drei oder so ähnlich. Wir können also zu H eins, h2h3, h vier gehen und ich werde den Rand auf Null setzen h2h3, h vier gehen und ich werde den Rand auf Null Wer. Da haben wir's. Das hat, weißt du, alles auf genau das Gleiche umgestellt. Jetzt gibt es keinen Spielraum mehr. Alles ist heterogen, gleich Bis auf die Farbe natürlich. Okay, also wenn du das ändern willst, könntest du es tun. Ja, das sieht ziemlich gut aus. Jetzt müssen wir zum Github-Desktop gehen und Regelsatzstile mit HTML erstellen, uns auf Maine festlegen und pushen. Ordnung. Das sind also die Grundlagen der Verwendung von CSS-Regelsätzen Sie sind Inline-Stilen aus mehreren Gründen überlegen. Erstens ist Ihr CSS einfacher zu lesen. Zweitens ist es einfacher, das Aussehen einer Reihe von Elementen mit demselben Code zu ändern . Das Kopieren und Einfügen zwischen Stilattributen ist eine enorme Zeitverschwendung und fehleranfällig Drittens kann diese Selektoranweisung mächtig sein. Darauf werden wir in der nächsten Lektion eingehen. 15. CSS-Selektor-Anweisungen: Mit CSS-Regelsätzen ist zwar alles übersichtlicher und leichter lesbar, wir haben die Möglichkeit verloren, den Stil einzelner Elemente zu ändern Hier kommt die Macht von Selektoranweisungen zum Tragen, insbesondere wenn Sie Klassen- und ID-Attribute für Ihre HTML-Elemente verwenden ID-Attribute für Ihre HTML-Elemente Sie können sich Selektoranweisungen ansehen ein Lehrer auswählt, welche Schüler aufstehen sollen Hier sind einige Beispiele. Können bitte alle Mädchen aufstehen? Können alle Jungen, die älter als 11 Jahre sind, aufstehen? Können alle Mädchen mit blauen Augen, die jünger als 11 Jahre sind, jünger als 11 Jahre sind Können alle Schüler, die ein Musikinstrument, aber keine Gitarre spielen , aufstehen? Können alle Mädchen namens Susan aufstehen? Kann der Student mit der Studentennummer 876221 bitte aufstehen Sie können sehen, wie allgemein oder spezifisch diese Aussagen sein können Sie schließen entweder ein oder schließen aus. Und genau das macht eine CSS-Selektor-Anweisung. Hier sind einige Beispiele dafür, wie Sie alle Überschriftentypen auswählen können , Links, während sie mit der Maus bewegt werden, Absätze, die auf Überschriften folgen, Bilder innerhalb von Absätzen, Ankerelemente direkt in NAV-Elementen Selektoranweisungen sind besonders nützlich, wenn Sie ändern möchten wie Elemente mit demselben Namen in verschiedenen Teilen Ihrer Website aussehen, z. B. die Links in Ihrer Navigationsleiste Vergleich zu den Links in Ihren Artikelabsätzen oder das Bild in Ihrer Seitenleiste im Vergleich zu den Bildern im Rest der Website. Um dies noch einfacher zu machen, können Sie Klassen - und ID-Attribute verwenden Zu jedem HTML-Element können Sie eine Klasse und ein ID-Attribut hinzufügen. Ein ID-Attribut muss auf einer Webseite eindeutig sein. Sie können nicht mehr als ein Element mit demselben ID-Attribut haben . Andernfalls laufen die Dinge unvorhersehbar ab. Ein ID-Attribut darf keine Leerzeichen enthalten. Wenn Sie möchten, dass ein ID-Attribut aus mehreren Wörtern besteht, verwenden Sie Kebab Case, Camel Case oder Snake Sobald ein Element eine ID hat, können Sie es in CSS mithilfe des Hash-Symbols gefolgt vom Wert des ID-Attributs auswählen des Hash-Symbols gefolgt vom . Wählen Sie zum Beispiel alle Elemente mit der ID eines Hero-Banners Das sollte nur ein Element sein. Nun ist ein Klassenattribut eine Möglichkeit, Elemente zu gruppieren oder zu klassifizieren. Denken Sie an Dinge wie Augenfarbe, Geschlecht und Alter. Sie klassifizieren HTML-Elemente, indem Sie ihnen in ihrem Klassenattribut einen oder mehrere Klassennamen geben. Ein Klassenname enthält keine Leerzeichen , da ein Leerzeichen einen anderen Klassennamen Kebab Case oder Camel Case oder Snake Case wie bei einem ID-Attribut Wenn Sie möchten, dass ein Klassenname aus mehreren Wörtern besteht, verwenden Sie Kebab Case oder Camel Case oder Snake Case Sobald ein Element einen Klassennamen hat, können Sie es in CSS mithilfe des Punktsymbols gefolgt vom Klassennamen auswählen mithilfe des Punktsymbols gefolgt vom Klassennamen Wählen Sie beispielsweise alle Elemente mit dem Klassennamen mit blauem Hintergrund aus oder wählen Sie alle Absatzelemente mit dem Klassennamen Überschrift und blauem Hintergrund aus. Lassen Sie uns nun mit unserem neuen Wissen über Klassen und IDs herumspielen . Also das haben wir , aber jetzt habe ich die Art verloren , einem bestimmten Element zu sagen: Hey, ich möchte, dass du rot bist oder ich möchte, dass du blau bist, oder ich möchte, dass du gelbgrün oder grüngelb bist. Wie machen wir das mit Klassen und Ausweisen? Nun, lassen Sie uns darauf eingehen. also im VS-Code Ändern Sie also im VS-Code diese Hintergrundfarbe jetzt von Schwarz auf Nichts. Also lass uns das speichern. Gehen wir zurück zu Chrome und aktualisieren es. Es sieht viel frischer aus. Sieht viel einfacher zu lesen aus, was großartig ist. Und dann, ja, für ein paar davon möchte ich sie eigentlich rot machen. Also lass uns hier reingehen. Und was wir tun werden, ist , alles zu sagen was rot oder wichtig ist. Geben wir ihm eine Hintergrundfarbe oder vielleicht eine Farbe von Rot, sehr rot. Da haben wir's. Also das ist absolut wichtig. Das ist eine Klasse. Okay, cool. Also, wie schreiben wir dann eine Klasse in HTML? Wir machen es als Attribut und geben ihm eine Klasse von wichtig. Da haben wir's. Ich kopiere das, setze es auf H vier, H eins, H drei. Okay. Das werde ich mir sparen. Gehen wir zu Chrome und Refresher. Okay. Ein paar unserer Überschriften sind jetzt rot, weil sie diese wichtige Klasse haben, und die stammt aus dieser wichtigen CSS-Klasse Wir könnten das auch in etwas wie Orange, Orange, Rot ändern etwas wie Orange, Orange, Rot Wie wäre es mit einer Orchideenfarbe? Da haben wir's. Und Sie können sehen, wie schnell das alles aktualisiert. Es ist so viel einfacher, eine ganze Reihe von HTML-Stilen zu ändern . Also lass uns das da reinlegen oder Kind Orchid oder Kind. Ich bin mir nicht ganz sicher, wie ich das sagen soll. Okay. Das sieht gut aus. Oder was ist mit dieser Farbe , die wir in einem Kommentar hatten? Vielleicht fragen Sie sich auch: Wie mache ich einen HTML-Kommentar? Weil es nicht dasselbe ist Nun, wenn Sie HTML kommentieren möchten, wählen Sie den Text aus, den Sie auskommentieren möchten, drücken Sie die Befehlstaste oder die Strg-Taste und schon wird ein HTML-Kommentar erstellt , der ein Kleiner-als-Zeichen ist. Es ist ein Ausrufezeichen und am Anfang stehen zwei Bindestriche Und dann, am Ende des Kommentars, sagst du Bindestrich, Bindestrich, größer Und du kannst das auch ganz einfach umschalten , indem du Befehl und Schrägstrich Das Gleiche gilt für den CSS-Kommentar. Okay. In diesem Fall ist es ziemlich einfach zu lesen , dass diese Farbe tatsächlich überschrieben wird Bei dieser Farbe handelt es sich um einen sehr einfachen Konflikt. Das können wir also geschehen lassen. Also, Command S, schauen wir mal, was hier passiert. Okay, das hat sich leicht geändert, nur weil wir es inspizieren. Da haben wir's. Diese Korallenfarbe wird von dieser schöneren Farbe überschrieben Ich weiß nicht einmal, was für eine Farbe das ist. Der mit ein bisschen Undurchsichtigkeit. Okay. Gehen wir jetzt zurück zum VS-Code. Wir haben hier einige Kurse. Was passiert, wenn du in diesem Fall deine Orchidee hast, ich aber auch ein Grün draufsetze, also H eins, H zwei, h drei, h vier. Nun, wenn es eine Klasse ist und es einen Konflikt gibt, dann überschreibt sie den , der nicht so spezifisch ist Klassen sind also spezifischer als nur Elementnamen. Aber was ziemlich cool ist, ist, dass wir hier auch eine Hintergrundfarbe verwenden können . Entscheiden wir uns für einen dunklen goldenen Stab oder ein dunkles Orange. Da haben wir's. Und wir können sehen, wie das aussieht. Es wird wahrscheinlich ziemlich ekelhaft aussehen. Und das macht die wichtigen Dinge dunkelorange, was großartig ist Aber was ich Ihnen hier wirklich zeigen wollte , ist, dass, wenn Sie diese Hintergrundfarbe auf diese H1H2-H38-Viere auftragen Hintergrundfarbe auf diese H1H2-H38-Viere und speichern, dass sie auf alles übertragen werden . Wenn Sie also eine Farbeigenschaft oder Deklaration haben, überschreibt sie nicht den gesamten Es fügt hinzu. Nur wenn es einen Konflikt gibt, heißt es dann, okay, welchen wählen wir? Wir müssen hier eine Wahl treffen. Jetzt haben wir immer noch diesen blauen Inline-Stil. Lassen Sie uns das loswerden. Und statt einer Klasse können wir eine Klasse verwenden. Wir können hier eine ID eintragen und wir können sagen, die eine. Ich benutze gerne Kebab-Hüllen. Du könntest so etwas machen, das ist Camelcase. Lass uns das vorerst nutzen Und woher weißt du, mach eine ID in CSS. Wir machen ein Hash-Symbol und dann fügen wir das eine ein und fügen dann unser CSS hier ein. Und die Farbe war blau. Da haben wir's. Das ist also eine wirklich nette Möglichkeit, Ihre Stile von Ihrem HTML-Code zu trennen. Also Command S Refresher. sollte sich nichts ändern, denn wenn wir diesen untersuchen, kommt das aus dieser CSS-Deklaration des einen Okay. Was wir tun können, ist, dass wir auch mehrere Klassen hinzufügen können, zwei Elemente. Also schau dir das an. Wir gehen hier zum VS-Code. Und für ein paar davon werden wir uns für Klasse und Großbuchstaben entscheiden. Und das werde ich kopieren. Also für diese Überschrift zwei und diese Überschrift drei werde ich hier eine zusätzliche Klasse einrichten, und Sie sehen, dass da ein Leerzeichen ist. Ein Leerzeichen in diesem Klassenattribut bedeutet, dass es sich um eine andere Klasse handelt. Und wir haben Important, das eine Orchideenfarbe hat. Und dann haben wir eine Klasse von Großbuchstaben, und wir können sagen, Text transformieren und uns für Großbuchstaben entscheiden, wie so Also Command S und dann Refresh und Google Chrome. Okay. Überschrift eins ist also in Großbuchstaben geschrieben Überschrift zwei ist in Großbuchstaben geschrieben. Das ist echt cool Ja. Und du kannst das auch einfach für dich selbst sehr verwirrend machen. Großbuchstaben könnten also einfach eine Texttransformation aus Großbuchstaben haben, aber es könnte auch eine Farbe haben, in der die Farbe einfach ganz einfach ist Knallrosa. Lass uns das machen. Und vielleicht eine schwarze Hintergrundfarbe. Vielleicht besteht die Idee hinter der Großbuchstabenklasse darin, sie wirklich einfach lesbar zu machen Also, Command S. Lass uns hierher zurückkehren. Okay. Da haben wir's. Wenn wir uns also Überschrift drei ansehen, werden wir sehen, dass hier ein paar Dinge passieren. Es hat dieses H eins, h2h3, H vier, einen Haufen CSS Das einzige, was es von dort behält, ist die Schriftgröße von 30 Die Farbe und die Hintergrundfarbe von anderen Stilen überschrieben Es hat auch eine wichtige Klasse, hat also die Farbe Orchidee, wird aber auch von dieser Großbuchstabenklasse überschrieben , weil sie im Stilelement an letzter Stelle steht Wenn wir das also ändern, also das Wichtigste an die erste Stelle setzen und dort speichern, dann sollte sich die Farbe wieder auf Orchidee ändern Es ist also eine Auffrischung und das tut es auch. Also das ist Überschrift drei, inspizieren. Weil wichtig jetzt weiter unten in der Datei steht und später kommt, sagt der Browser, cool, wir verwenden diese Farbe anstelle der Farbe in der Großbuchstabendeklaration Schauen Sie sich zum Schluss das in Überschrift drei an, ob wir hier eine Idee hinzufügen müssten, Mr. Jones zu sagen Ich kann mir wirklich keinen besseren Ausweisnamen einfallen lassen . Und lass uns das kopieren. Und sagen Sie, Mr. Jones, was werden wir für Sie tun? Und ich gebe dir eine Farbe von vielleicht, lass uns einen braunen Burly Wood nehmen Gehen wir zu Burly Wood. Okay. Und selbst wenn Mr. Jones in Ihrem Stilelement ganz oben und Sie sich das sparen, sollte doch passieren, dass es zutrifft. Sehen Sie sich also an, dass Mr. Jones, weil es ein Ausweis ist, weil es sehr spezifisch ist, diese Farbe von kräftigem Holz bekommt Hm. überschreibt sogar die Großbuchstabenklassen und es überschreibt sicherlich die Deklaration H one, H 2h3h4 Es überschreibt sogar die wichtigen Klassen, überschreibt sogar die Großbuchstabenklassen und es überschreibt sicherlich die Deklaration H one, H 2h3h4. Okay. Aber ich denke, weil das eine Mr. Jones-ID hat, kann das Ganze immer noch überschrieben werden, ein Inline-Stil Wenn wir also Stil, Farbe sagen, nehmen wir ein Nein, aber ein blaues Violett Los geht's. Heb dir das auf. Das siehst du hier, und jetzt ist es blauviolett. Weil der Elementstil blauviolett ist. Das hat also Vorrang vor allen anderen Dingen. Die einzige andere Sache , die diese Überschrift im Inline-Stil überschreiben kann , ist ein wichtiges Wort Lassen Sie mich Ihnen zeigen, wie man das schreibt. Ich rate nicht wirklich, das zu tun, aber manchmal muss man wissen, wie es geht. Das hat also eine wichtige Klasse und Großbuchstaben. Es hat auch einen Mr. Jones-Ausweis. Auf die ID von Burly Wood können wir dann ein Ausrufezeichen setzen und wichtig schreiben. Lassen Sie uns das speichern und auffrischen, und Sie sehen, dass die CSS-Eigenschaft Burley Wood color durchkommt wichtig schreiben. Lassen Sie uns das speichern und auffrischen, und Sie sehen, dass die CSS-Eigenschaft Burley Wood color Das Gleiche könnte vielleicht mit dem H einer Farbe, dem H mit drei Farben, dem Apricase gemacht werden . Lass uns knallpink nehmen. Okay, ich werde die Aktualisierung hier speichern. Also das heiße Rosa kommt durch. Das heißt, das blaue Veilchen, das stumpfe Holz, die Orchidee ist nicht durchgekommen Knallpink. Egal, ob es dieses wichtige Schlüsselwort hat, es kommt durch. Nun könnten Sie auch Wert auf diesen Farbwert, diesen Farbwert oder diesen Farbwert legen. Und aufgrund dessen, wo es sich befindet, würde der Browser sagen: Ja, ich wähle diesen anstelle dieses in der Großbuchstabenklasse Lass es uns ausprobieren. Gehen wir also hier hoch und gehen zu Wichtig und speichern das und kehren dann zu Chrome zurück und aktualisieren. Also jetzt zurück in Burywood , weil dort der Ausweis von Mr. Jones steht, und von dort kommt er Und es hat auch dieses wichtige Schlüsselwort. Und es wird dieses wichtige Schlüsselwort in der Großbuchstabenklasse überschreiben dieses wichtige Schlüsselwort in der Großbuchstabenklasse Die Dinge können hier also sehr kompliziert werden. Ich schlage nicht vor, das Schlüsselwort wichtig zu verwenden, aber es kann hilfreich sein, wenn Sie mit dem Code anderer Leute arbeiten oder wenn Sie mit CSS von einem anderen Team anderen Dienst arbeiten, und vor allem, wenn sie wichtige Schlüsselwörter verwenden. Nun gibt es viel mehr Möglichkeiten , selektive Aussagen zu schreiben, und sie können komplex und verwirrend werden. Wenn Sie Ihre Website jedoch einfach und gut strukturiert halten, sollten Sie sich nicht mit komplexen Dingen befassen müssen. In der nächsten Lektion werde ich mich mit CSS-Konflikten befassen und erläutern , welche Deklarationen bevorzugt werden und warum. Das wird so viele Kopfschmerzen verhindern, das verspreche ich. 16. CSS-Konflikttheorie: Standardmäßig wendet ein Browser alle Stile an, die auf ein Element aus den verschiedenen Regelsätzen abzielen , mit unterschiedlichen ausgewählten Anweisungen und Inline-Stilen. Aber was passiert, wenn auf ein Element mehrere widersprüchliche Stile angewendet werden, z. B. die Farbe Blau aus diesem Regelsatz, Farbe Rot aus diesem Regelsatz und die Farbe Grüngelb aus einem Inline-Stil Weiß der Browser, welche Farbe für den Text dieses Elements verwendet werden soll ? für den Text dieses Elements CSS steht für Cascading Style Sheet. Die Idee hinter Cascading besteht darin, zu bestimmen, welche Stile auf ein Element angewendet werden, wenn widersprüchliche Deklarationen vorliegen Kaskadierung bezieht sich auf die Art und Weise, wie CSS-Regelsätze vom oberen zum unteren Rand einer Seite kaskadieren und wie sie miteinander interagieren , um den endgültigen Stil für ein Element zu erstellen Wie entscheidet der Browser also, welcher Stil angewendet werden soll? Es gibt drei Dinge, nach denen der Browser sucht. Im Allgemeinen ist der erste, welcher Stil zuletzt geschrieben wurde. Der letzte ist in der Regel derjenige, der angewendet wird. Zweitens, je spezifischer eine Deklaration ist, desto größer ist die Wahrscheinlichkeit, dass der Browser sie anderen Deklarationen vorzieht. Eine Deklaration innerhalb eines Regelsatzes, die auf alle Ankerelemente angewendet wird , ist nicht so spezifisch wie eine alle Anker innerhalb von Listenelementen innerhalb von ungeordneten Listen innerhalb von NIV-Elementen auswählt innerhalb von ungeordneten Listen innerhalb von NIV-Elementen Und das ist nicht so spezifisch wie eine Deklaration innerhalb eines Regelsatzes, auf alle Elemente mit einer ID oder einem speziellen Link angewendet wird Und noch spezifischer ist ein Inline-Stil. Inline-Stile sind am spezifischsten. ID-Selektoren sind die nächstspezifischsten. Klassenselektoren sind die nächstspezifischsten und Elementselektoren sind am Natürlich können widersprüchliche Selektoranweisungen all diese Elemente beinhalten Mein Rat ist also, die Dinge einfach zu halten und wenn etwas nicht wie erwartet funktioniert, schauen Sie sich an, wie spezifisch Ihre Selektoranweisungen sind Drittens kann das wichtige Schlüsselwort zu einer CSS-Deklaration hinzugefügt werden zu einer CSS-Deklaration hinzugefügt , um ihr die höchste Priorität zu geben alle anderen Deklarationen außer Kraft zu setzen, unabhängig davon, wie spezifisch die Selektor-Anweisung ist oder in welcher Reihenfolge die Und wenn es mehrere widersprüchliche Deklarationen mit dem Schlüsselwort important gibt , der Browser zur Reihenfolge zurück und legt fest, wie spezifisch Okay, dieses Zeug ist wichtig zu wissen, denn wenn Ihre Elemente nicht so aussehen, wie Sie sie codiert haben, ist dies oft der erste Ort, an dem Sie mit der Suche beginnen Das ist noch wichtiger, wenn Sie jemals mit dem Code einer anderen Person zu tun haben, vielleicht mit dem Code eines Teammitglieds oder mit einem Vorlagencode, den Sie möglicherweise ändern. In der nächsten Lektion werde ich erläutern, Sie Ihr CSS in eine separate Datei verschieben, wodurch alles einfacher zu lesen und zu schreiben ist und einige zusätzliche Vorteile bietet. 17. 16 separate CSS-Dateien: Auch wenn HTML und CSS sich lieben und super gut miteinander funktionieren, gibt es gute Gründe, sie in eigene Dateien aufzuteilen. Der erste Grund ist , dass dadurch alles übersichtlicher und einfacher zu lesen und zu schreiben Du profitierst davon. Sie müssen nicht nach oben und unten scrollen wenn Sie zwischen dem Schreiben von HTML und CSS wechseln. Sie können sogar Ihren Code-Editor verwenden, um die CSS-Datei in einem Fenster und den HTML-Code in einem anderen Fenster anzuzeigen die CSS-Datei in einem Fenster und den HTML-Code in einem anderen Der zweite Grund ist, dass Sie, wenn Sie mehrere Webseiten haben , die gleich aussehen sollen , das CSS nicht von Datei zu Datei kopieren und einfügen müssen das CSS nicht von Datei zu Datei Vor allem nicht jedes Mal, wenn Sie eine kleine Änderung vornehmen. Das ist zeitaufwändig und fehleranfällig. Wenn Sie Ihr CSS in separaten Dateien haben, können mehrere HTML-Dateien dasselbe CSS verwenden. Nun, wie machen wir das eigentlich? Schritt eins ist das Erstellen einer CSS-Datei. Speichern Sie es mit einer Punkt-CSS-Dateierweiterung. Sie können es entweder im Hauptordner belassen oder in einem Ordner ablegen. Ich mag es, meine CSS-Dateien in einen Ordner namens CSS zu legen. Schritt zwei besteht darin, entweder Ihr CSS aus Ihrer HTML-Datei zu verschieben oder Ihr CSS in diese neue CSS-Datei zu schreiben. Schritt drei besteht darin, Ihrer HTML-Datei mitzuteilen, dass Sie diese CSS-Datei tatsächlich verwenden möchten, um Ihre Webseite zu gestalten. Dazu fügen wir eine Zeile wie diese hinzu, Tinte mit dem Roll-Attribut Stylesheet und einem HRF-Attribut , wo sich die CSS-Datei befindet Und obwohl wir es überall hinzufügen können, ist es am besten, es im Head-Element Ihrer Webseite zu platzieren im Head-Element Ihrer Webseite Das bedeutet, dass der Browser weiß, wie Ihre Webseite angezeigt wird, bevor sie verarbeitet wird, was sie anzeigen muss. Es ist ein echtes Linkelement, kein Ankerelement. Das Rollenattribut teilt dem Browser mit, dass es sich um ein Stylesheet handelt, und das HF-Attribut dem Browser, wie beim Ankerelement, mit teilt dem Browser, wie beim Ankerelement, mit, wo die CSS-Datei zu finden ist. Wenn Sie eine Auffrischung in das Schreiben von Pfaden zu Dateien benötigen, schauen Sie sich die Lektion Benennen, Ordner und Dateipfade Und denken Sie daran, dass Groß- und Kleinschreibung online wichtig ist und dass Rechtschreib- und Tippfehler die Hauptursache für Bugs und Fehler sind die Hauptursache für Bugs und Fehler Lassen Sie uns das in die Praxis umsetzen. Sollen wir? Die Dinge sehen also interessant aus. Ich würde nicht unbedingt eine Website wie diese programmieren, aber hoffentlich verstehst du , was möglich ist, wie die Dinge funktionieren, vor allem, wenn du all diese Farben, Hintergrundfarben und solche Dinge verwendest . Oh, ich möchte die Dinge ein bisschen aufräumen. Ich werde aufhören, die wichtigen Schlüsselwörter zu verwenden, weil das die Dinge nur verwirrend und irritierend macht Und ja. Wir können das dort behalten, nur um das zu zeigen. Okay. Aber jetzt, weißt du, hast du gesehen, was ich gemacht habe. Ich habe meinen HTML-Code hier. Ich habe meine Styles hier oben. Ich muss weiter zwischen ihnen blättern. Und ja, es gibt Möglichkeiten, dieselbe Datei in zwei verschiedenen Tabs zu öffnen dieselbe Datei in oder einen geteilten Bildschirm zu haben , solche Sachen Aber es gibt einen einfacheren Weg. Also lass uns eine neue Datei erstellen, nenne sie Style Dot CSS. Da haben wir's. Sollte diesen kleinen blauen Hash als Symbol haben, okay? Und hier. Lass uns schneiden. All diese Deklarationen und füge sie hier in diese Datei ein. Okay, und speichern Sie das. Und dann speichern wir das hier , setzen die Regeln, gehen zurück zu Chrome und aktualisieren es, und alles ist weg. Warum? Weil wir diese HTML-Datei nicht mit der CSS-Datei verknüpft haben. Also, wie machen wir das? Also, wenn du sagst, oh, ich weiß nicht, google es einfach. Also, wie man eine HTML-Datei mit einer CSS-Datei verknüpft. Das Verknüpfen von CS-Dateien mit HTML ist das ultimative Tutorial für Sie. Was ist mit W Three Schools, HML? In Ordnung. Lass uns das versuchen. Was ist CSS? Ta ta, ta, internes CSS. Wir haben dieses externe CSS bereits behandelt. Los geht's. Link RL Stylesheet Href Okay. Also werde ich das kopieren. Ich werde zum VS-Code zurückkehren. Und statt eines Stilelements werde ich Rl Stylesheet sagen Cool in diesem Linkelement. Und wir haben einen Link für ein Lieblingssymbol behandelt. Jetzt ist das etwas anderes. Es verwendet dasselbe Element, aber es ist anders. Und weil wir sagen, dass es ein Stylesheet und das HF ist, wo finden wir dieses Style-Punkt-CSS Als heißt Style-Punkt-CSS. Benennen wir es also in Style Dot CSS um. Befehl S. Gehen wir zurück zu Chrome. Aktualisieren und wir sind wieder im Geschäft. Fantastisch. Vielen Dank, Google und W Three Schools, was im Allgemeinen eine ziemlich gute Ressource ist. Okay, jetzt möchte ich Ihnen zeigen , dass es wirklich einfach ist , hier mit Ihrem HTML umzugehen. Lassen Sie sogar ein Teammitglied den HTML-Code erstellen, und dann existieren Ihre Stile in einem separaten Stylesheet. Sie könnten sogar mehrere Stylesheets haben. Aber was ich Ihnen zeigen möchte, ist, hier eine neue Datei zu erstellen, und nennen wir sie Regelsatz zwei. Punktstile punktieren mit Html. Und hier schreiben wir unseren Duc-Typ oder geben einfach Duck Oh. Schau dir das an. Also, wenn du das hast , wäre das wirklich hilfreich. Soll ich das noch einmal behandeln? Ja, gib einfach Duck für Duc-Typ oder Dokument ein. Und wenn Sie die Emmet-Abkürzung installiert haben, was Sie meiner Meinung nach tun sollten, dann drücken Sie einfach die Eingabetaste und es erstellt eine ganze Reihe von Dingen für Wir haben dieses Meta-Auto-Set noch nicht behandelt. Wir haben diese Sache mit dem Viewport nicht behandelt. Wenn Sie möchten, können Sie sie also herausnehmen, und es wird ein Titeldokument erstellt Also vielleicht kannst du einfach Regelsatz zwei sagen. Und dann geben wir unsere Tinte Linkage hinein. Da haben wir's. Roll schon Stylesheets, und dann sagen wir Style Dot CSS. Und in unserem Körper nehmen wir einen H-Wert. Großartig. Hallo da. Und ich werde einfach sparen. Lassen Sie uns noch einmal überprüfen , ob das funktioniert. Und ich werde das kopieren. Ich füge das ein. Wir werden zwei Stile festlegen. In Ordnung, es funktioniert. Also kannst du sehen, wie mächtig das ist. Das bedeutet, dass ich mehrere HTML-Dateien erstellen kann und nur eine CSS-Datei habe , die dann alle Stile dieser HTML-Dateien steuert . Das heißt , wenn wir von CSS auf der gesamten Site wechseln wollen , dann können wir einfach Hintergrundfarbe sagen. Lass uns ein Violett nehmen. Wir kehren zu Chrome zurück, aktualisieren, ändern diese Seite und sie ändert sich auch auf dieser Seite. Wirklich, wirklich cool. Und wir können hier auch noch ein paar hinzufügen. Also lass uns zwei Jahre alt werden. Wow, das ist das, das ist das, das, das ist cool. Und mit drei Jahren ist das wichtig. Und denk dran, wir können sagen, dass Klasse wichtig ist. Und dann endlich im Alter von vier Jahren. Das ist Großbuchstaben. Und vielleicht können wir das für Großbuchstaben in ein Span-Element einfügen Okay, speichern wir das. Jetzt kehren wir zu Regelsatz zwei zurück. Okay, das ist Großbuchstabe. Hat das etwas geändert? Interessant. Lass uns einen Blick darauf werfen. Nein, weil wir den Kurs nicht darauf ausgerichtet haben. Äh, huh. Also lasst uns eine Klasse von Großbuchstaben setzen Da haben wir's. Es ist wirklich wichtig, dass Sie Ihren Code testen, bevor Sie ihn versenden. Da haben wir's. Das ist Großbuchstaben Okay, jetzt müssen wir endlich unsere Dateien übertragen Gehen wir also zum Github-Desktop und haben ein paar Sets geschrieben und uns für Maine entschieden und dann Origin pushen. Fantastisch. Nun, das sollte in ein paar Sekunden oder ein paar Minuten online sein. Und jetzt möchte ich Ihnen noch eine weitere Sache zeigen, das Hinzufügen einer weiteren CSS-Datei zu einer HTML-Datei. In Visual Studio ist dies Regelsatz zwei. Nun, lassen Sie uns noch einen hinzufügen. Verknüpfen Sie also Roll-Stylesheets und entscheiden wir uns für CSS im Stil Rot. Okay, wir speichern das und erstellen dann ein neues CSS mit roten Punkten. Und siehst du, was ich hier gemacht habe? Ich sagte Res. Also ist es wahrscheinlich wirklich gut zu kopieren und einzufügen. Also stylen Sie Rot Das werde ich kopieren. Und dann tippe ich einfach zweimal darauf oder drücke Return. Da haben wir's. Stil rot. Sie möchten kopieren und einfügen, sodass auch dann, wenn Sie den falschen Namen haben oder ihn falsch geschrieben haben, hier und da derselbe ist Wenn Sie anfangen, Dinge mehrmals zu tippen, führt dies zu mehr Fehlern Okay, also stylen Sie Rot. Okay. Ich will Körper sagen. Lass uns deine Hintergrundfarbe rot machen, oder das wird wirklich weh für unsere Augen sein. Wie wäre es mit einem Lachs? Lachs sollte gut sein. Okay, Command S. Gehen wir zurück zu Chrome. Regel ist zwei. Okay, Regelsatz. Stile. Es hat es nicht , weil es diese neue CSS-Datei nicht enthält. Okay. Das wird also ziemlich cool und bedeutet, dass Sie für bestimmte Seiten verschiedene Stile verwenden können. Wir haben also die allgemeinen Stile und dann haben wir den Stil Red Dot CSS. Aber jetzt im Stil von CSS, wenn wir hier oben eine Textauswahl einfügen und dann die Hintergrundfarbe in gelbgrün ändern, was passiert dann hier Sie kennen wahrscheinlich die Antwort. Also lass uns sparen. Gehen wir zu Chrome und Refresher. Die Regel besteht aus zwei Stilen, die Lachsfarbe haben. Regelsatz-Stile, sie sollten die grüne Farbe haben. Okay. Aber wenn wir zum Regelsatz für zwei Stile übergehen und die Reihenfolge der Stylesheets ändern , was passiert dann? Okay, Regelsatz-Stile, das bleibt gleich, weil es nur ein Stylesheet enthält. Regelsatz zwei, es ist grün. Und warum ist das so? Schauen wir uns die Leiche an. Das liegt daran, dass Stil Rot an erster Stelle steht, Stil bei CSS an zweiter Stelle. Es heißt also, das gelbe Grün kam zuletzt, also werde ich das verwenden. Es gibt einen Konflikt. Ich werde den verwenden , der zuletzt geschrieben wurde. Und jetzt lasst uns gehen und das alles begehen. Fügen Sie ein neues Stylesheet hinzu. Ja, das ist großartig. Okay, pendeln Sie nach Maine. Schieb zum Ursprung Da haben wir's. Jetzt können Sie so viele HTML-Dateien erstellen, wie Sie möchten, die alle dieselben Stile verwenden. Das ist mächtig. Und Sie können einer HTML-Seite mehrere CSS-Dateien hinzufügen. Manchmal benötigt eine Seite zusätzliche Stile, oder Sie müssen einen Link zu einem Stylesheet herstellen, das online verfügbar ist. Wenn Sie mehrere CSS-Dateien mit Ihrer HTML-Datei verknüpfen, ist die Reihenfolge, in der Sie sie schreiben wichtig, falls es zu Stilkonflikten kommt. Jetzt wissen Sie eine ganze Menge über CSS und HTML und darüber , wie sie zusammenpassen, um großartige Websites zu erstellen. Es ist Zeit zum Tanzen Oh, whoo. Okay, im Rest des Kurses werden wir eine echte Website erstellen, eine, die cool aussieht und eine, die Sinn macht, wenn man sie mit der Welt teilt 18. 17 Kommentare: Bevor wir eine Website erstellen, möchte ich Ihnen zeigen, wie Sie Code schreiben , den der Browser ignoriert Das bedeutet, dass Sie sich Notizen oder Kommentare hinterlassen und auch eine Menge Code verstecken können , den der Browser nicht lesen soll Diese Funktion ist in allen Programmiersprachen verfügbar, sieht jedoch in jeder Sprache anders aus. In HTML schreibst du also einen Kommentar wie diesen. Das ist ein Kleiner-als-Zeichen, ein Ausrufezeichen, zwei Gedankenstriche, der Kommentar, gefolgt von zwei Bindestrichen und einem Größer-als-Zeichen Um einen Kommentar für eine ganze Zeile in VS-Code ein- und auszuschalten , drücken Sie die Befehlstaste Schrägstrich auf dem Mac und Strg Schrägstrich Mac und Ich bevorzuge es auch, vor und nach dem Kommentar ein Leerzeichen zu lassen , damit er leichter zu lesen ist Jetzt erstellen Sie in CSS einen Kommentar wie diesen. Das ist ein Schrägstrich und ein Asterix, der Kommentar, gefolgt von einem weiteren Asterix Um einen Kommentar für eine ganze Zeile in VS Code ein- und auszuschalten, drücken Sie erneut für eine ganze Zeile in VS Code ein- und auszuschalten die Tastenkombination Command-Schrägstrich auf dem Mac und Strg-Schrägstrich unter Windows . Okay, jetzt, wo Sie die Kommentare verstanden haben, lassen Sie uns mit der Erstellung unserer Website fortfahren 19. 18 So erstellst du eine Website: In den nächsten Lektionen werde ich eine Website für meine Lieblings-Zeichentrickfigur Reckitt Ralph programmieren meine Lieblings-Zeichentrickfigur Reckitt Ralph Ich möchte, dass du dasselbe tust und weitermachst, außer bei deiner fiktiven Figur, vielleicht aus einem Film, einem Zeichentrickfilm, einer Serie, einem Comic oder einem Buch Du kannst dir sogar deinen eigenen ausdenken. Wählen Sie also zunächst einen Charakter aus, für den eine Website codiert werden soll. Während wir die Website erstellen, Sie jederzeit abbiegen, spielen, experimentieren und Dinge ausprobieren, wann immer Sie möchten Ich möchte, dass Sie sich diese Website zu eigen machen. Und wenn du Fehler machst und sie dann herausfindest, sammelst du so viel wertvolle Erfahrung. Also lass uns loslegen. Und in der nächsten Lektion zeige ich Ihnen, wie Sie den Code für Ihre Website planen. Ja, es klingt langweilig, aber es wird dir helfen, ein Programmier-Ninja zu werden 20. 19 Planung deiner Website: Ich weiß, dass du das nicht hören willst, aber Planung macht das Programmieren Websites viel einfacher und schneller. Selbst bei einer einfachen Website hilft die Planung sehr. Planung ist für mich wie ein Labyrinth von oben zu betrachten und eine Wurzel zu skizzieren Es ist eine Karte, und Programmieren ist, als würde man durch dieses Labyrinth laufen und der Karte folgen Es ist ohne Karte möglich, aber mit einer ist es viel einfacher Im Ernst, ohne einen Plan könnten wir tagelang unnötig programmieren , das wollen wir nicht Also, falls du es noch nicht getan hast, wähle einen Charakter aus, für den du eine einfache Website erstellen Ich werde eine Website für Record Rolf erstellen. Egal, welche Website ich erstelle und ob ich nur das Design oder sowohl das Design als auch die Gestaltung mache, ich skizziere ein paar Optionen, wie eine Website aussehen könnte Ich mache das schnell und lasse Details weg. Whiteboards, Tagebücher und Papierblöcke eignen sich hervorragend dafür. Als Nächstes erstelle ich auf der Grundlage der Skizzen, die ich zuvor gemacht habe, ein sogenanntes Box-Wireframe Hier zeichne ich die HTML-Elemente als Boxen, gebe ihnen Namen und gebe an, welche Boxen in andere Boxen passen Ich versuche nicht, alles auf einmal zu planen, und ich ziehe oft einen Pfeil aus einem Feld und füge die Details später ein, an einem separaten Teil der Seite oder sogar auf einer neuen Seite. Auch hier eignen sich Whiteboards, Papier und Tagebücher hervorragend dafür Sie können eine App auf Ihrem Computer oder Ihrem iPad verwenden , wenn Sie möchten Sie benötigen lediglich Textfelder, Rechtecke und Kreise. Ihr Box Wireframe digital erstellen können Sie Ihre Planung nach und nach anpassen. Dies ist hilfreich , wenn Sie ein Anfänger sind, aber zu diesem Zeitpunkt nicht von den Details ablenken lassen Wir brauchen eine grobe Karte, kein pixelgenaues Wir werden unsere Website tatsächlich im Browser entwerfen , während wir in diesem Kurs programmieren. Wir wählen die Farben, die Schriftarten, die Größen usw. aus, während wir programmieren Okay, lassen Sie mich Sie durch meine Box Wireframe-Planung führen. Okay, fangen wir an zu planen. Ich werde hier ein paar Marker verwenden. Ich habe einen roten. Ich habe einen schwarzen. Was du benutzt, ist eigentlich egal. Aber beginnen Sie mit der umfassenden Planung der Website. Ich werde eine Kopfzeile haben, dann den Hauptteil und dann die Fußzeile Lass es mich so machen. Kopfzeile. Wer ist wach. Wichtigste. Und dann wird das alles im Hauptkörperelement sein. Ordnung? Okay, nun , was wird in jedem von ihnen was sein? Also Header. Lass uns das zuerst machen. Lass uns einen Header machen. Und ich will hier einen Avatar oder ein Profilbild von Rece Ralph Und dann will ich ein H-Exemplar. Dort wird er heißen. Okay. Also, was wir hier tun können, ist, wissen Sie, Ganzen, dieser hier auf spezifischere Details eingeht. Das kann also ein Div mit einem Hintergrundbild sein, oder es könnte ein Bild sein. Ich werde beide Optionen behandeln. Das wird ein H-One mit seinem Namen sein. Profilbild. Okay. Ich muss das vielleicht ein bisschen schütteln. Dann der Hauptteil, das könnte vielleicht ein H zwei sein. Da steht über Ralph. Dann haben wir etwa einen Absatz über ihn. Dann können wir ein Bild machen vielleicht mit ihm und seinen Freunden oder vielleicht ein nettes von ihm. Dann haben wir hier noch einen H-Two. Vielleicht sind das seine Eigenschaften, dann ein paar Dinge, du weißt schon, Eigenschaften. Als nächstes, im Alter von zwei Jahren, mit seinen Freunden. Auch eine Liste. Okay, und das alles gehört zum Hauptelement. Okay, also wir haben H zwei über Das kann ein Absatz über ein Bild sein. H zwei, Charakter stirbt. Wow, was für ein langes Wort. Das kann eine ungeordnete Liste oder eine geordnete Liste sein. Ich werde mich für eine geordnete Liste entscheiden nur weil sie etwas anderes ist als eine ungeordnete Liste, und da werden Listenelemente drin sein und H zwei, Freunde. Und das kann eine geordnete Liste mit I- oder Listenelementen sein, plus Ankern, damit wir zu ihnen verlinken können Okay. Als nächstes kommt die Fußzeile. Ich denke also, das muss besonders schwierig oder komplex Oh, lassen Sie uns da so etwas wie ein Absatz-Tag einbauen. Also das Fußzeilenelement und dann kann das einfach P plus Anker-Tags oder Ankerelemente sein P plus Anker-Tags oder Ankerelemente Okay, wir haben also unseren Körper. Dann haben wir Kopf- und Hauptfußzeile im Hauptteil In der Kopfzeile wird es eine Taube oder ein Bild auf H Habe unsere Hauptelemente. Es gibt ziemlich viele Dinge im Hauptelement. Dann haben wir die Fußzeile, und in der Fußzeile gibt es nur ein P-Tag mit einigen As oder Ankerelementen Okay, das ist also meine Planung. Du könntest das aufräumen. Du könntest das digital machen. Sie können sehen, wie ich von allgemein zu spezifischen Details übergegangen bin, und es ist keine sehr komplizierte Seite. Es gibt nicht so viele Elemente innerhalb von Elementen innerhalb von Elementen. Die meisten Elemente innerhalb von Elementen, zu denen wir kommen werden, sind hier , wenn es eine Reihe von Ankerelementen innerhalb von Listenelementen innerhalb von ungeordneten Listenelementen Aber dort wird es nur ein ungeordnetes Listenelement geben. Wenn wir wollten, könnten wir jeden dieser Abschnitte in eine Taube oder ein Abschnittselement unterteilen, aber das müssen wir wirklich nicht Die andere Sache , die ich vielleicht hinzufügen möchte, ist nur eine kleine Bildunterschrift hier drüben, also könnten wir weinen gehen und das einfach dort hinstellen und den P-Punkt Bildunterschrift. Also ein Absatz mit einer Art Überschrift, und es gibt vielleicht Dinge, die wir im Laufe der Zeit hinzufügen, aber das ist unsere grobe Planung. Wir wissen, was wir tun müssen. Es ist ziemlich klar. 21. 20 Einrichten deiner Basis-Website: Lass uns nerdig werden und unser Repo einrichten und den grundlegenden HTML- und CSS-Code für die Website unseres Charakters schreiben den grundlegenden HTML- und CSS-Code für die Website unseres Charakters Sie können beim Schreiben Ihres HTML-Codes auf die allgemeinen HTML-Elemente PDF und beim Schreiben Ihres CSS auf die allgemeinen PDF-Eigenschaften verweisen HTML-Codes auf die allgemeinen HTML-Elemente PDF und beim Schreiben Ihres CSS auf die allgemeinen PDF-Eigenschaften PDF-Eigenschaften Und ich werde den gesamten Code durchgehen, während ich ihn schreibe. Aber wenn du willst, kannst du Google oder etwas wie Chat EPT um Hilfe bitten. Okay, also werde ich meine Website einrichten. Als erstes möchte ich den Github-Desktop öffnen und auf Datei > Neues Repository klicken. Ich werde Ralph für die Beschreibung von Rect Ralph Websites von Reck E Ralph eingeben. Der Pfad wird in den Downloads sein. Du willst mich nicht lesen, ignoriere mich, nein, Lizenz, nein. Also lass uns das Repository erstellen. Jetzt möchte ich das in VS-Code öffnen, damit wir diesen Ordner in VSCode ziehen können, oder wir könnten zum Repository gehen im Finder anzeigen und ihn dann von dort ziehen, oder wir könnten zum Repository gehen und dann in Visual Studio Code öffnen A. Ziemlich cool, oder? Als Erstes möchte ich eine neue Datei erstellen, und ich nenne sie Indexpunkt-HTML. Der Grund, warum ich mich für eine HTML-Datei mit Indexpunkt entscheide, ist, dass, wenn der Browser auf unsere Website gelangt und wir nicht angegeben haben , welche HTML-Datei geladen werden soll, nach einer Indexpunkt-HTML-Datei sucht. Sie könnten auch ein Standard-Punkt-HTML nennen, aber Indexpunkt-HTML ist ziemlich Standard. Okay. Dann gebe ich Doc oder DocType ein. Da haben wir's. HTML, und dann tippe ich Doc ein und verwende dann diese IT-Abkürzung , um all diese Dinge zu bekommen. Die HTML-Tags. Ich habe dann die Head-Tags und ich habe auch die Body-Tags. Du brauchst dir über diese Sprache DE keine Gedanken zu machen , weil du vielleicht kein Englisch sprichst, also könnten wir das tatsächlich herausnehmen. Macht keinen allzu großen Unterschied. Dieses Autoset UTF 8 macht im Moment keinen allzu großen Unterschied, aber das werde ich dabei belassen. Das könnte nützlich sein , wenn wir später im Kurs anfangen, einige Dinge mit responsiven Inhalten zu machen Kurs anfangen, einige Dinge mit responsiven Der Titel, ich werde mich für Racket entscheiden. Ralph. Dann füge ich einen Link ein, aber statt Stylesheets nehme ich ein Icon und die HRF Nun, ich habe eigentlich noch keine Dateien oder Ordner. Gehen wir also in den Finder. Im Ralph-Ordner. Lass uns einen neuen Ordner suchen. Nennen wir es IMG. Wenn Sie sie nicht in Ihrem Finder erstellen möchten, können Sie sie auch in einem VS-Code erstellen. Und ich werde ein weiteres namens CSS erstellen. Und hier werde ich sagen , diesem aktuellen Ordner, in dem wir uns befinden, das ist der Hauptstammordner, und dann gehe ich in den IMG-Ordner. Ich möchte vielleicht Rolf Icon Dot PNG finden. Ich bin mir nicht sicher. Das müssen wir überprüfen. Lass uns gehen. Findet etwas. Ich spare währenddessen. Übrigens, das solltest du auch. Es ist wirklich, wirklich hilfreich für den Fall, dass du auf Schließen drückst oder so und du nicht gespeichert hast. Okay, in Google Chrome werde ich nach Reck it Rolf Cool suchen Lass uns nach Bildern suchen. Dieser ist ziemlich cool. In Ordnung, lass uns diesen nehmen Ich mache einen Rechtsklick und dann könnte ich das tatsächlich so verwenden, wie es ist Ich könnte also sagen, Linkadresse kopieren, aber ich möchte eigentlich, dass es ein Lieblingssymbol oder ein Symbol in meiner Datei - oder Ordnerstruktur Gehen wir also Linkadresse kopieren oder Bildadresse kopieren. Da haben wir's. Ich möchte das einfügen und dann Command S zum Herunterladen speichern. Fantastisch. Und dann legen wir das in den Image-Ordner. Okay, es ist ein JPEG, und dann benenne ich wie ich es nenne, Rolf Icon Dot JPG Also werde ich einfach das alles kopieren, zurück zum VS-Code gehen und das dann einfügen Okay, wir haben also das Symbol. Lassen Sie uns noch einmal überprüfen , ob das funktioniert. Ich werde speichern, in Chrome gehen, tatsächlich in den Finder und dann auf Indexpunkt-HTML doppelklicken. Und da haben wir es. Es ist hier. Whoa. Da drüben Fantastisch. Jetzt müssen wir als Nächstes etwas CSS hinzufügen und mit der Einrichtung unserer Website beginnen. Gehen wir also wieder zum VS-Code. Lass uns hier noch einen Link einfügen. Es hat eine Rolle mit Stylesheets und dann HRF, diesen aktuellen Ordner Schauen Sie dann in den CSS-Ordner. Suchen Sie dann nach Style Dot CSS. Fantastisch. Spar dir das. Gehen wir hier zum CSS-Ordner und erstellen eine neue Datei namens Style Dot CSS. Und hier möchte ich auf meinen Körper achten und einfach überprüfen, ob das auch wirklich funktioniert. Entscheiden wir uns für eine Hintergrundfarbe aus Schokolade. Cool. Spar dir das. Dann in Chrome. Lass uns aktualisieren. Fantastisch. Die Schokoladenfarbe kommt durch. Das bedeutet, dass das CSS funktioniert. Jetzt, zurück in der Indexdatei, gehe ich zu meinem Körper weil wir hier ein paar Dinge hinzufügen müssen. Dann werde ich einen Kommentar hinzufügen. Ich werde sagen, hier will ich meinen Header haben. Hier möchte ich mein Hauptelement haben, und hier möchte ich mein Fußzeilenelement Das hilft uns, die Dinge einfach richtig einzurichten. Ich kann dann auch in mein Header-Element schreiben. Ich werde dort ein paar Leerzeichen oder neue Zeilen hinzufügen. Ich werde dann mein Hauptelement hier platzieren. Ich kann schreiben lassen. Und dann Puta Okay, das sieht also ziemlich gut Ich befehle S, speichere das, gehe dann zum Github-Desktop und dann sage ich initial Commit Und dann kann ich für die Beschreibung vielleicht Einstellungen, CSS, Bilder und Basic H2M up sagen CSS, Bilder und Basic H2M up Okay. Entscheiden Sie sich für das Hauptverzeichnis und veröffentlichen Sie dann das Repository. Okay, hier steht, ob dieser Code privat bleiben soll oder nicht, weil wir ihn hier auf github.com veröffentlichen Ich werde das überprüfen, nur für den Fall, dass Sie es überprüfen. Aber wenn möglich, deaktiviere das. Sie möchten nicht, dass dieser Code privat ist, Sie möchten, dass er öffentlich ist, weil wir dieses Repository in eine Seitenerfahrung verwandeln wollen dieses Repository in eine Seitenerfahrung die jeder zugreifen kann Okay, aber ich werde das überprüfen , nur für den Fall, dass du es tust und du wissen willst, was zu tun ist. Okay, veröffentliche das Repository. Okay. Großartig. Was jetzt? Jetzt gehen wir zu Google Chrome. Wir öffnen einen neuen Tab, geben gitab.com und dann siehst du hier deinen Nutzernamen mit Schrägstrich deiner Zeichentrickfigur, deiner Filmfigur, für wen auch immer du dich entschieden hast, eine Website zu erstellen Also lass uns darauf tippen. Gehen wir zu den Einstellungen. Und hier, geh runter zu den Seiten. Und hier. Oh, aktualisiere oder mache dieses Repository öffentlich, um Seiten zu aktivieren Wenn Sie also überprüft haben, ich meinen Code geheim halten möchte, haben Sie jetzt zwei Möglichkeiten Sie können entweder ein Upgrade durchführen, was bedeutet, dass Sie bezahlen müssen, oder Sie müssen dieses Repository veröffentlichen. Hmm. Okay. Also, wie machen wir das, wenn wir nicht zahlen wollen oder wir zu General gehen, hier oben. Scrollen Sie nach unten bis zur Gefahrenzone und ändern Sie dann die Sichtbarkeit des Repositorys. Wechseln wir zur Öffentlichkeit. Es gibt einige Dinge, die du überwinden musst, oder Hürden, die du überwinden musst, hier. Also ja, das will ich machen. Okay. Ich verstehe. Machen Sie dieses Repository öffentlich. Okay. Sobald Sie das getan haben Ihr Repository privat gemacht oder nicht, gehen Sie zu Seiten. Und dann hier, von der Filiale aus bereitstellen. Das ist genau das, was wir wollen. Und dann ist der Zweig, den wir einsetzen werden, der Hauptzweig. Okay, speichern. Also, das wird ein bisschen dauern, vielleicht eine Minute. Also ab und zu einfach aktualisieren. Ich weiß, dass du willst , dass alles sofort funktioniert, aber sei einfach geduldig. Okay, versuchen wir es mit Refresh. Mal sehen, was hier passiert. Okay, es wird derzeit immer noch von der Hauptniederlassung aus gebaut. Huf Huf. Okay, lassen Sie uns auffrischen. Okay, lass uns noch ein paar Sekunden warten. Frisch lassen. Okay, da ist es. Deine Seite ist live unter HTTPS, Doppelpunkt, Schrägstrich, dein Nutzername , Punkt github, Punkt IO, Schrägstrich, dein Nutzername , Punkt github, Punkt IO deines Charakters Okay, also tippe ich auf Seite besuchen. Und da haben wir's. Alles sollte funktionieren. Du hast dein kleines Lieblingssymbol. Der Hintergrund ist ebenfalls orange. An diesem Punkt können Sie nun feststellen, ob die Dinge funktionieren oder nicht. Wenn Ihre Hintergrundfarbe nicht die von Ihnen angegebene ist, liegt ein CSS-Problem vor. Wenn Sie Ihr Lieblingssymbol nicht sehen können, liegt möglicherweise ein Problem mit dem Dateipfad oder der Berücksichtigung der Groß- und Kleinschreibung Nun, hier könnten ein paar Dinge beginnen zu passieren. Gehen wir also zum VS-Code über. Lass uns zum Stylen gehen. Ändern wir diese Hintergrundfarbe in Braun oder entscheiden wir uns für Grün oder Grüngelb. Es ist ganz anders als Schokolade. Speichern. Und jetzt gehe ich zurück zum Github-Desktop. Aktualisiere den Stil bei CSS. Großartig. Entscheiden Sie sich für Main, drücken Sie Origin. Okay, lass uns zu Chrome zurückkehren. Und dann innerhalb von Github, in Ihrem Repository, gehen wir zum Code. Gehen wir zu CSS. Gehen wir zum Stylen von CSS. Okay, das wurde aktualisiert. Es ist grün, gelb. Nun, wenn du auf deine Seite kommst und sie aktualisierst und sie nicht grüngelb ist, hmm, das könnte ein paar Dinge sein Die erste Sache ist, dass es einfach einige Zeit dauern kann , bis sie tatsächlich aktualisiert ist Es sollte nicht so lange dauern. Es sollte nicht länger als eine Minute dauern. Möglicherweise müssen Sie also rechten Maustaste klicken und dann auf Inspizieren tippen. Sie können auch Command Alt I oder Command Option I drücken. Sobald Sie Element und Spector aktiviert haben , können Sie sie aktualisieren Das kann helfen, denn was vielleicht passiert ist, ist, dass Ihr Browser Ihre CSS-Datei zwischengespeichert hat, sodass er nicht glaubt, dass es neue Änderungen gibt Es wird also im Grunde nur eine alte Version Ihrer CSS-Datei geladen eine alte Version Ihrer CSS-Datei Lassen Sie uns das noch einmal aktualisieren. Nein. Dann gehen wir beim Tippen auf CSS-Punktstil in den Kopftyp und klicken mit der rechten Maustaste, um einen neuen Tab zu öffnen Also da steht immer noch Schokolade. Also lass uns auffrischen. Oh, grün, gelb. Interessant. Also, wenn wir hierher zurückkehren und uns auffrischen, hm, das funktioniert immer noch nicht. Möglicherweise müssen wir hier zweimal tippen, ein Fragezeichen setzen, V entspricht der einen oder anderen Zahl eingeben, falls Sie V gleich eins verwendet haben , und dann die Eingabetaste drücken Da haben wir's. Jetzt ist es genau das, was es tut. Es speichert Ihre CSS-Datei im Cache. Wenn Sie also wirklich möchten, dass Ihr CSS aktualisiert wird und es nicht aktualisiert wird, Sie beim Codieren in Ihrer HTML-Datei müssen Sie beim Codieren in Ihrer HTML-Datei möglicherweise ein Fragezeichen setzen und V entspricht anderen Zahl , danach ist V Und das bedeutet, dass es immer die neueste Version der Datei bekommt . Also lass uns das speichern. Gehen wir zum Stil über und ändern wir auch das. Gehen wir zu einem grüngrünen oder grauen oder goldenen Stab. Gehen wir zu Goldenrod Spar dir das. Gehen wir zu Get up Desktop und wir können Test-Caching oder Browser-Caching eingeben Test-Caching oder Browser-Caching Und dann zum Ursprung springen. Cool. Lass uns nicht zu dem zurückkehren. Nicht dieser, dieser. Also lass uns hier auffrischen. Das CSS sagt also Goldenrod. Lass uns Rolf aufnehmen. Lass uns hier auffrischen. Okay. Also das sagt immer noch Style Dot CSS. Und ich denke, was passiert, ist, dass die Indexdatei tatsächlich zwischengespeichert Sei hier drüben, naja, da steht immer noch Style Dot CSS Es gibt kein V, das gleich ist. Gehen wir also hier zu unserem Code, gehen wir zu Indexpunkt-HTML Und es heißt, V ist gleich zwei, oder? Ja. Also erfrischen Sie sich hier nochmal. Wenn das immer noch passiert, okay, es ist aktualisiert. Aber wenn das immer noch passieren würde, könnten wir Indexpunkt-HTML eingeben und los geht's, Fragezeichen V entspricht zwei Und dann sollte es Ihre neueste Indexpunkt-HTML-Seite ergeben. Okay, das war eine Menge zusätzlicher Kram über das Zwischenspeichern, und manchmal ist es wirklich frustrierend, wenn man nur testen will, ob etwas online funktioniert, und das ist es nicht, und das sollte es auch sein Das ist wahrscheinlich der Grund. Er. Nachdem Sie die Grundstruktur Ihrer Website geschrieben haben, können wir mit der Codierung von Abschnitten der Website beginnen. Für jeden Abschnitt schreibe ich zuerst den HTML-Code und dann das CSS und gehe dann zwischen HTML und CSS hin und her , bis es genau richtig ist, bevor ich zum nächsten Abschnitt übergehe. Und natürlich werde ich mich dabei auf mein Box-Wireframe beziehen. In den nächsten Lektionen werden wir den Code für die Kopfzeile, den Hauptbereich und die Fußzeile unserer Website schreiben den Hauptbereich und die Fußzeile unserer Laufe der Zeit werden wir den Code aktualisieren, der sich auch auf alle Teile der Website auswirkt Gehen wir also zur nächsten Lektion über, in der wir den Code für unser Header-Element schreiben werden. 22. 21 Die Website-Kopfzeile: Okay, lassen Sie uns den HTML- und CSS-Code für den Header unserer Website schreiben . Es ist ein ziemlich einfacher Header, und wir haben unsere Header-Tags bereits eingerichtet. Es gibt sicher einige knifflige Bots, aber nichts, mit dem wir nicht umgehen können, vor allem, wenn wir das Internet immer zur Hand haben Okay, lassen Sie uns den HTML- und CSS-Code für unser Header-Element und die darin enthaltenen Elemente erstellen im Visual Studio-Code Lassen Sie uns im Visual Studio-Code hier zum Header gehen und ich werde IMG für Bild schreiben ihm eine Quelle für einen Schrägstrich geben Schauen Sie also in diesen Ordner und gehen Sie zum Bildordner, und dann entscheiden wir uns für Rolf Icon Dot JPEG Aber wir brauchen wahrscheinlich etwas anderes. Ich möchte nicht, dass das Symbol diesem Profilbild identisch ist. Und dann das, was ein Lt ist: Wenn jemand sehbehindert ist, der Browser gerne eine Beschreibung für das Bild nur weil, wenn er es nicht sehen kann, er es irgendwie verstehen kann indem er es liest oder es sich anhört. Okay, wir können also sagen, Ralph oder Racket Ralphs Profilbild Lassen Sie uns das in einen normalen Apostroph ändern. Racket Rolfs Aktenbild. Abbildung. Da haben wir's. Wenn Sie hier ein doppeltes Anführungszeichen setzen wollen, wird es sich beschweren. Es gibt also spezielle Möglichkeiten, doppelte Anführungszeichen zu setzen, wenn Sie versuchen, sie innerhalb eines Attributs zu platzieren sie innerhalb eines Attributs Wenn wir das schnell googeln, suchen wir nach doppelten Anführungszeichen in HTML, wie man doppelte Anführungszeichen über HTML kodiert Okay, freundlicher Code, numerischer Code, Hex-Code. Also versuche so zu zitieren, um das zu kopieren. Leg es da rein. Okay, Rick Ralphs Profilbild. Okay. Dann lass uns zu Google Chrome gehen. Lass uns diese Seite aktualisieren. Sie werden sehen, dass, wenn wir das überprüfen , ein Anführungszeichen erscheint. Ziemlich cool. Ordnung. Und wenn du hier einfache Anführungszeichen hättest, wie würdest du ein einfaches Anführungszeichen machen? Gute Frage. Also machen wir A, einfache Anführungszeichen in H TO. Da haben wir's. Lass uns das versuchen. Also kopiere das und leg es da drüben rein. Also Befehl S. Okay, nimm Rolfes Profilbild auf Cool. Okay, gehen wir zurück zum Visual Studio-Code. Und hier möchte ich ein H setzen und sagen, mach es kaputt. Ralph. Okay, speichern wir das. Gehen wir zu unserem Browser und aktualisieren ihn. Fantastisch. Nun, ich möchte, dass das in der Mitte ist, bitte. Also lass uns zu VSC gehen. Gehen wir zu Style Dot CSS. Und dann entscheiden wir uns für den Header. Wir sagen dann Text Aline Center Yep, speichern Sie das und aktualisieren Sie es dann Perfekt. Jetzt möchte ich dem eine Hintergrundfarbe geben. Gehen wir also wieder zum VS-Code. Hintergrundfarbe. Ich möchte ein gewisses Blau, aber nicht nur ein normales Blau, also werde ich mich für RGB entscheiden. Ich werde die rote Eingabetaste drücken. Es ist ein Wert von 0 bis 255. Aber im Moment werde ich einfach auf Null tippen, Null eingeben, Null eingeben, und dann tippe ich darauf und dann wird VS-Code das aufrufen Dann wähle ich ein schönes Blau aus. Das sieht gut aus. Okay. Befehl S. Gehen wir nicht zu VS-Code, sondern zu Chrome. Okay. Das sieht gut aus. Aber da ist diese komische Grenze drum herum. Also was das ist, es ist entweder im HTML-Code oder im Hauptteil. Was wir also tun können, ist im VS-Code, lassen Sie uns das als HTML-Kommatext einfügen Wir setzen den Rand, wodurch der obere, rechte, untere und linke Rand auf Null gesetzt Außerdem setzen wir dann den Abstand für HTML und Body auf Null Also Command S, lass uns zu Chrome zurückkehren. Da haben wir's. Es ist weg. Also manche Browser haben es im HTML, manche Browser haben es auf Buddy, aber normalerweise gibt es eine Art Rand oder Padding in HTML oder Buddy, und ich entferne es immer Okay, jetzt möchte ich diesen Typen kreisförmig machen und vielleicht oben und unten ein bisschen Abstand setzen oben und unten ein bisschen Abstand Gehen wir also zurück zum VS-Code. Header, lass uns ein bisschen Polsterung nehmen. Und anstatt oben zu polstern, links zu polstern, unten zu polstern, Muster rechts, solche Sachen Ich werde mich einfach für die Polsterung entscheiden. Und hier nehme ich 20 Pixel, und das macht die Polsterung für Okay, das sieht gut aus, und dann möchte ich , dass das Bild rund ist Aber das ist auch das gleiche Bild, das wir für unser kleines Symbol oben verwenden. Schauen wir uns also nach Record Ralph Images um. Ich möchte die Quadratur eins zusammenfassen, aber ich möchte dir auch zeigen , was zu tun ist, wenn du kein Quadrat findest. Also dieser hier ist ziemlich cool. Es ist definitiv nicht quadratisch. Ich werde also mit der rechten Maustaste auf Bild speichern unter klicken. Es ist ein WebP-Bild, zwei, 241. Nicht der größte Fan von WebP-Bildern. Ich meine, ich weiß, dass sie ein bisschen schneller sind. Die Dateigröße ist kleiner, sie sind komprimiert. Es ist alles unglaublich, aber nicht so einfach zu bearbeiten. Also was ich normalerweise tun würde ist Photoshop zu öffnen, die Größe zu ändern, es zuzuschneiden, es so zu gestalten, wie ich es möchte, und es dann wieder zu speichern Aber wenn Sie kein Photoshop haben, wie machen Sie das? Also lass uns einfach nach einem Image Resizer suchen. Ändern Sie die Größe mehrerer Bilder gleichzeitig. Image Resizer, einfacher Image Resizer. Ich weiß nicht, welcher der beste ist, aber vielleicht versuchen wir es mit diesem einfachen Image Okay, akzeptiere die Cookies, wähle die Bilder aus. Oder vielleicht können wir tatsächlich nach Image Resizor und Cropper suchen Image Resizor und Wählen Sie Größe ändern. Lass uns das versuchen Okay, nehmen wir ein WebP. Okay, sehen Sie, es mag keine WebP-Bilder Gehen wir zurück und suchen nach Web P. Simple image resizero, wählen Sie image, web P aus. Okay, das ist großartig Nun, es sieht so aus, als würde es großartig werden. Lass uns so etwas machen. 500 mal 500. Okay, vielleicht ein bisschen größer. Okay, kümmern wir uns um 600 mal 600. Okay. Das ist großartig. Hoppla. Okay, Bild zuschneiden Okay, und downloaden. Danke, Ad. Okay. Also das war eine schnelle und schmutzige Art, das zu tun. Jetzt kann ich das in Ralph Image einfügen. Und wir können es Ralph PFP-Profilbild nennen. Also werde ich das alles kopieren. Und dann gehen wir in den VS-Code und fügen ihn ein. Befehl S. Okay, gehen wir zurück zu Chrome. Schließen wir das. Kann das schließen. Auffrischen. Okay, jetzt ist es ein bisschen groß. Aber jetzt schauen wir uns an, wie wir das ändern können. Also werde ich eine Breite von, sagen wir, 400 Pixeln wählen. Ja, vielleicht drücke ich Shift und runter. Vielleicht ist 300 ziemlich cool. Ich würde trotzdem gerne einen Rand hinzufügen. Gehen wir also für eine Höhe von 300 Pixeln zwei. Und dann sage ich Grenze. Und Rahmen ist eine Abkürzung für Rahmenbreite, Rahmenstil und Rahmenfarbe. Ich nehme also 20 Pixel, einfarbig, was der Stil ist, und dann die Farbe, ich nehme FF Null, was wie Gelb ist. Aber das können wir im VS-Code wieder ändern. Und dann werde ich einen Grenzradius von 50% wählen. Okay, das sieht also ziemlich gut aus. Ich möchte die Farbe ändern. Also kopiere ich das alles, gehe zum VS-Code und dann zum Header, ich bin G. Das heißt also, dass alle Bilder in allen Header-Elementen enthalten sind, oder das sind die Eigenschaften, die Sie haben sollten. Okay, lass uns eine Orange oder so etwas nehmen. Nun, es sieht ziemlich gut aus. Befehl S. Gehen wir zurück zu Chrome und aktualisieren es. Okay, das sieht ziemlich cool aus. Nun, Greek E. Rolf. Ich möchte die Schrift ändern. Es gibt verschiedene Möglichkeiten, dies zu tun, aber am meisten Spaß macht Google Funt Kostenlose Schriften, kostenlose Fantasy-Schriften. Also Google Fonts. Los geht's. Okay, ich möchte eine Pixelschrift. Es gibt eine Menge Möglichkeiten, das zu tun. Sie können filtern und das Aussehen spüren. Oh, so viele. Also, was ich tun möchte, ist einfach nach Pixel zu suchen. Ordnung. Stecht etwas heraus? Whoa, das ist verrückt. Etwas, das ziemlich gewagt ist. Vielleicht der. Pixel Phi-Scans. Vielleicht dieser, Josie 15, Josie 20. Wir entscheiden uns für Josie 20. Okay. Dann sagst du Schrift holen. Dies kann sich ändern oder die Benutzeroberfläche kann sich von Zeit zu Zeit ändern und dann den Einbettungscode abrufen. Okay, es gibt ein paar Möglichkeiten, das zu tun. Aber was ich gerne mache, ist die Import-Anweisung zu verwenden. Also werde ich das einfach kopieren und zum Visual Studio-Code wechseln. das oben in meiner Style-Datei Ich werde das oben in meiner Style-Datei einfügen, aber ich möchte die Style-Tags nicht. Ich will nur diese Import-Anweisung. Okay, großartig. Dann hier drüben werde ich diesen Kopiercode kopieren, obwohl ich den eigentlichen Jozy 20 Regular nicht benötige Also werde ich das einfügen und das einfach ausschneiden, das entfernen Und dann Header H eins. Im Grunde wähle ich alle H-Einsen in allen Headern aus Wir haben nur einen Header und wir haben im Moment nur H einen oder einen H-One. Ich füge das ein. Okay, ich werde sparen. Gehen wir hier zurück zu Chrome. Auffrischen. Okay, gib es Ralph. Da haben wir's. Lassen Sie uns das untersuchen. Lass uns die Schriftgröße ändern. Entscheiden wir uns für etwas Großes, für 50 Pixel. Immer noch ein bisschen klein. Ich werde hochschalten, hochschalten. 70 Pixel sehen ziemlich gut aus. Aber ich möchte, dass der Abstand dazwischen etwas abnimmt. Okay, vielen Dank. Vielleicht kannst du das lesen und sagen, ja, das ist hilfreich, aber ich versuche Dinge zu tun, also zeig sie einfach nicht. Geh weg. Okay, lustige Größe, 70 Pixel. Die Marge. Auch hier verwende ich anstelle von Rand oben und Rand rechts, unten und links einfach die Tastenkombination. Also Rand. Ich nehme mehr als zehn Pixel. Das reduziert es also links und rechts ein wenig . Es wird Null sein und dann unten 20 Pixel. Also hier muss ich den linken Wert nicht unbedingt auf Null setzen , aber ich kann, wenn ich will. Und dann können wir vielleicht dieselbe Farbe wie den Rand haben. Also lass uns das kopieren. Bringen Sie es her, fügen Sie es ein und entscheiden Sie sich dann für Farbe. Es ist keine Textfarbe, keine Hintergrundfarbe, es ist Farbe. Und dann können wir diesen Wert kopieren und einfügen. Lassen Sie uns das speichern und aktualisieren, um zu sehen, wie es aussieht. Ja. Ja, es ist ein bisschen schwer zu lesen. Also lass uns das auf Weiß ändern. Ja, Weiß sieht viel besser aus. Ja, du kannst sehen, dass wir quasi designen , während wir programmieren. Das gefällt mir sehr. Okay, nehmen wir Weiß. Okay. Also das sieht ziemlich gut aus. Wir haben unseren Header sortiert. Sie können hier eine Menge Dinge ändern. Sie könnten den Hintergrund diesem blauen Hintergrund zu einem Bild oder einem gekachelten Bild machen. Sie können das recherchieren, wenn Sie möchten. Und lass uns zum Github-Desktop gehen. Und wir können dann den Header sagen. Okay, entscheide dich für Maine. Drücken Sie Origin. 23. 22 Seitensuche für die Kopfzeile: In Lektion werden wir einen Teil unseres Header-Codes umgestalten , damit das Profilbild mit einem DIV-Element anstelle eines Bildelements funktioniert einem DIV-Element anstelle eines Bildelements Der Vorteil dieses Ansatzes besteht darin, dass Sie Bilder in CSS statt in HTML verwalten können Bilder in CSS statt in HTML und dass Sie Hintergrundbilder mit CSS umfassend bearbeiten können mit CSS umfassend bearbeiten Ich zeige Ihnen auch, wie Sie mit Github einen neuen Zweig erstellen und diesen Zweig dann wieder mit Ihrem Hauptzweig zusammenführen , sodass Sie an etwas Neuem arbeiten können , ohne Ihre aktuelle Website zu beeinträchtigen Diese Lektion ist eine Nebenaufgabe und etwas komplexer. Wenn du also Lust hast, sie zu überspringen, ist das auch in Ordnung. In Zukunft wird es nur noch geringfügige Unterschiede geben. Und wenn ihr wieder darauf zurückkommen möchtet, wenn ihr den ganzen Kurs beendet habt, ihr zwei. In meiner Planung habe ich gesagt, das könnte ein Div oder ein Bild sein. Im Moment haben wir es als Bild. Also möchte ich dir zeigen, wie man daraus ein Div macht. Aber was wir tun werden , ist, weil es ein bisschen komplexer ist, einen neuen Zweig zu erstellen, mit dem wir arbeiten können. Und wir werden einen neuen Zweig erstellen, weil wir manchmal die Site ändern und sie dann kaputt gehen kann. Und wenn wir unseren Code übergeben wollen, dann werden wir, du weißt schon, Code, der nicht funktioniert, in unser Projekt oder in das zentrale Repository auf github.com Gehen wir also zum GitHub-Desktop und wir gehen zu Branch, New Branch Und wir werden dieses Div PFP, Create Branch nennen. Okay. Wir müssen den Zweig jetzt nicht veröffentlichen den Zweig jetzt weil wir noch nichts gemacht haben, aber Sie können hier zwischen dem aktuellen Zweig wechseln, also zwischen Main und Dv PFP Und ich werde dir gleich zeigen, was das macht. Gehen wir also zum Visual Studio-Code. Gehen wir zum Index. Und jetzt machen wir statt dieses Bildes machen wir div und geben ihm eine Klasse von PFP Und darin werden wir nichts hineinlegen. Okay. Also lass uns das speichern. Gehen wir zu Chrome und aktualisieren. Kein Bild mehr. Okay. Aber wenn wir innerhalb des Github-Desktops den Zweig auf den Hauptzweig ändern, heißt es: Sie haben Änderungen an diesem Zweig. Was möchtest du mit ihnen machen? Hinterlassen Sie meine Änderungen auf DIV PFP. Ihre laufenden Arbeiten werden in diesem Zweig versteckt , damit Sie zu einem späteren Zeitpunkt zurückkehren Was wir also hätten tun sollen, ist, dass wir sie tatsächlich hätten begehen sollen. Gehen wir also zum Anwalt, und wir werden einfach sagen, dass PFP von Image zu Dive in HTL geändert wurde Also heißt es, das festschreiben und dann den Branch ändern. Okay. Wenn wir es jetzt aktualisieren, ist das Bild wieder da und in unserem Code Sie werden sehen, dass es jetzt wieder im Bild ist. Interessant. Zurück im Github-Desktop ändern wir das in Dv PFP und Sie werden sehen , dass sich der Code wieder ändert . Ziemlich cool In Style Dot CSS haben wir jetzt eine Klasse von PFP , mit der wir arbeiten können Statt eines Bilds entscheiden wir uns für Punkt-PFP und mit Höhenrand ist das alles ein großer Randradius von 50 Jetzt brauchen wir nur noch ein Hintergrundbild, das wir als URL wählen, und wir setzen hier einfache oder doppelte Anführungszeichen. Und jetzt gehen wir von der Style-CSS-Datei aus. Wir befinden uns also im CSS-Ordner. Also Punkt Schrägstrich Punkt Punkt Punkt Schrägstrich, was uns in den Ordner Ralf bringt, und dann IMG, und dann werden wir uns für Rolf PFP Punkt Web P entscheiden . Das sieht gut aus, also haben wir Jetzt muss ich sagen, dass Hintergrundwiederholung keine Wiederholung ist Hintergrundposition Mittelpunkt und Mittelpunkt ist, das ist Sie könnten auch Pixel und dann die Hintergrundgröße verwenden , wir können uns für Deckung entscheiden, und das deckt den gesamten Bereich ab. Okay, Command S. Okay, gehen wir zu Google Chrome. Aktualisieren. Okay, das ist toll, aber jetzt ist es auf der linken Seite. Textaine Center gilt nicht wirklich dafür, weil es kein Text ist Was wir also tun können, ist den Rand zu ändern. Margin auf Null und Auto. Das bedeutet, dass oben und unten Null und links und rechts Auto sind. Befehl S und das sollte es zentrieren. Da haben wir's. Nun, mir gefällt das viel besser es bedeutet, dass wir unser Bild im CSS ändern können und nicht zu HTO wechseln müssen, nur um das Bild zu ändern und das zu überprüfen Ich gehe zu meinem Finder. Denken Sie daran, dass wir diesen 2241 Punkt mit P für den Zuschnitt verwenden P für den Zuschnitt Nun, lassen Sie uns das in Rolf-Bilder einfließen lassen. Und wir nennen es einfach Rolf mit Vanillebirne. Ich weiß nicht, wie man Vanillebirne buchstabiert. Okay, da haben wir's. Danke. Okay, ich werde das alles kopieren. Und jetzt werde ich statt Rolf PFP Rolf mit Vanlop machen. Okay. Und dann gehen wir wieder zu Chrome, aktualisieren. Und jetzt haben wir ein kreisförmiges Quadrat oder ein quadratisches kreisförmiges Div, das ein nicht quadratisches Bild als Hintergrundbild verwendet . Hmm. Ziemlich cool, oder? Aber jetzt ist da immer noch dieser kleine Vanlopi Was werden wir mit ihr machen? Du musst nichts tun. Aber was ist, wenn wir die Hintergrundgröße auf 100% ändern? Lass uns ein bisschen nach oben gehen. Okay, also 210%. Lass uns das kopieren und hier reinstellen. Die Hintergrundgrößen decken also 200% oder 210% ab. Und dann die Position des Hintergrunds, lassen Sie uns das ändern. Gehen wir zurück zu Chrome. Okay. Oh Mann, ich tippe es einfach noch einmal ab Position im Hintergrund. Also die Position, nehmen wir vielleicht 20 Pixel. Nehmen wir einen negativen Wert. Okay, -170, und dann Null für deinen Y-Wert, oder vielleicht los geht's Minus 170 -40 Pixel. Okay. Okay. Okay, okay, okay. Also sieht es ziemlich gut aus. Und wenn wir zum Github-Desktop zurückkehren, können wir sagen, dass wir jetzt Bild- oder PFP-Bilder in CSS verwenden Fantastisch. Und wenn wir dann zur Hauptfiliale gehen und uns auffrischen, ist es etwas anders, oder? Das ist okay. Oh, dieser. Okay, also ich werde mich für diesen entscheiden. Aber wie bekommen wir jetzt unsere neue Filiale wieder in unsere Hauptzweige? Also schau dir das an. Wir wollen den Branch zuerst veröffentlichen, also wird er online an Gitub weitergeleitet, und dann wollen wir einen Pull-Request erstellen Wir werden uns also eine Vorschau des Pull-Requests ansehen. Und es sollte nicht zu viel passieren. Im Grunde sagt es dir, was du entfernt und was du hinzugefügt hast. Und dann sagst du, erstelle die Pull-Anfrage. Dadurch wird github.com geöffnet. Okay. Abteilung PFP Vielleicht sagen wir also, ich habe das PFP-Div anstelle eines IMG-Elements Sie könnten eine aussagekräftigere Beschreibung hinzufügen und dann die Pull-Anfrage erstellen Okay, ich überprüfe, ob die automatische Zusammenführung möglich ist. Das sollte einfach unglaublich gut funktionieren. Wenn Sie einige komplexe Dinge gemacht und dann Dinge in Ihrer Hauptzweige geändert haben, während Sie in der neuen Filiale gearbeitet haben, werden die Dinge kompliziert Aber dann sagen wir Merge, Pull Request, Confirm, Merge. Die Pull-Anfrage wurde erfolgreich zusammengeführt und geschlossen. Dann werde ich den Branch löschen. Wir brauchen diesen Zweig nicht mehr. Okay. Jetzt, zurück auf Github Desktop, werde ich Fetch Origin sagen Dann kann ich hier zum Hauptzweig zurückkehren, und wir haben immer noch diesen Was wir tun können, ist, zur Filiale zu wechseln und dann zu löschen. Ja, löschen. Jetzt haben wir Main und Refresh. Wenn wir das untersuchen, sollte es ein Div mit der Klasse PFP Okay, das war also ziemlich viel allein für unseren Header. Wenn du es einfach halten willst, könntest du einfach das Bild als dein Profilbild verwenden. Aber die Verwendung von Hintergrundbildern ist sehr, sehr mächtig. Wenn Sie das also testen und einen neuen Zweig erstellen und diesen Hintergrund von Blau zu einem Bild ändern oder Bilder kacheln möchten, testen Sie es aus, oder Sie können einfach, Sie wissen schon, alles im Hauptzweig machen, wenn Sie möchten 24. 23 Design mit CSS: Okay, eine kurze Pause vom Schreiben von Code. Ich möchte über das Entwerfen einer Website sprechen, während ich sie kodiere. Der Grund, warum ich beim Entwerfen gerne kodiere, besonders nach der Planung, ist, dass wir sehen können, wie es aussieht und sich anfühlt. Oft wird eine Website in einer Design-App entworfen, aber sie lässt sich im Browser nicht gut übersetzen Wenn Sie das Design in HTML und CSS ändern können , ist es oft benutzerfreundlicher , da Sie die Website tatsächlich im Browser und nicht in einer Design-App betrachten und verwenden die Website tatsächlich im Browser und nicht in einer Design-App betrachten und Und die Möglichkeit, mit HTML und CSS zu entwerfen , beschleunigt oft die kombinierte Design - und Entwicklungszeit. Wenn es jedoch Kunden gibt und abgeschlossene Designs und Unterscheidungen zwischen Designern und Programmierern gibt und Sie Teil eines Teams sind, macht das das Ändern von Dingen während des Programmierens etwas komplizierter Aber das ist hier nicht der Fall. Wir werden Designer und Programmierer. Das Tolle an CSS ist, dass man dieselbe Menge HTML ganz anders aussehen lassen kann dieselbe Menge HTML ganz anders aussehen lassen Versuche also, die Website deines Charakters seine Persönlichkeit anzupassen. Kommen wir nun zurück zum Programmieren. 25. 24 Der Hauptbereich der Websites: Nun zum Hauptabschnitt, der ziemlich normal ist, sodass er nicht zu lange dauern sollte, wenn man bedenkt, dass der Großteil der Struktur und ein Teil des CSS bereits vorhanden sind. Lassen Sie uns mit unserem Hauptbereich unserer Website beginnen. Im VS-Code haben wir also den Header erstellt. Und wenn Sie das Seitenwappen nicht machen würden, dann fragen Sie sich vielleicht: Was ist das für eine PFP-Sache mit der DIV-Klasse Nun, statt eines Bildes verwenden wir ein Div mit einer PFP-Klasse und stylen dieses Div dann mit CSS, um den gleichen Effekt zu erzielen wie mit einem Bild, und Sie können es dort sehen Okay, lassen Sie uns jetzt etwas HT-Mulling innerhalb unseres Hauptelements Da haben wir's. Ich werde mich hier auf meine Planung beziehen. Also werde ich mich für ein H Two entscheiden, und hier geht es um Ralph und P, sagen wir, Ralph ist ein Videospiel, ein Bösewicht, der die Arcade retten will. Irgendwie, er trifft unterwegs einige coole Charaktere. Und wird ein guter Kerl. Okay, das sieht gut aus. Also haben wir H zwei, den Abschnitt Über uns. Jetzt fügen wir hier ein Bild ein und suchen uns denselben Ordner aus , in dem wir uns innerhalb von Bildern befinden. Und lass uns einen Blick hineinwerfen. Google nach einem Ralph-Bild rect Ralph Images. Es geht also um ein Bild. Ja, das gefällt mir sehr. Cool, cool. Also lass uns die Bildadresse kopieren. Lassen Sie uns einen neuen Tab öffnen, ihn dort einfügen und dann Command S, um ihn zum Herunterladen zu speichern. Bringen wir es in den Bildordner. Ich nenne es über Dot JPEG oder Ralph über Dot JPG. Okay, jetzt zurück im VS-Code. Wir werden das da reinlegen. Da. Und das Beste können wir über Ralph sagen. Vielleicht sagen wir auch, dass er auch coole Glitchy-Girls mag. Er mag auch die Freundschaft. Es ist ein Ballfreund? Ja. Freundliche, coole, glitchige Mädchen. Okay. Also haben wir das Bild. Jetzt möchte ich eine kleine Bildunterschrift. Lassen Sie uns also ein P-Tag und eine Klasse von Titeln wählen. Wenn du das ziemlich schnell mit diesem Ding namens P Punkt Caption schreiben willst schnell mit diesem Ding namens , was irgendwie wie CSS aussieht, und dann Return drücken. Da haben wir's. Und die Bildunterschrift ist Ralph und Vanlop Geben wir Vanilla Pear Font Schwez ein. Okay. So buchstabiert man VanlaPefon Schwez Das werde ich kopieren. Geh zurück zum VS-Code. Okay. Als nächstes ist wieder H zwei dran. Eigenschaften von Ralphs Charakteren. Das sieht gut aus. Auch das könnte ihm nicht gefallen. Einige ältere Browser sagen vielleicht, was ist das für ein Ding und du bekommst vielleicht ein kleines Quadrat mit einem kleinen Kreuz oder einem seltsamen Zeichen. Also könnten wir einfach ein einzelnes Zitat verwenden, oder wir könnten nochmal nachforschen, was das Ding ist. Also einfaches Apostroph HTML Okay, versuchen wir das und einen Okay, nein. Da haben wir's. Ralphs Eigenschaften. Das werde ich mir sparen. Gehen wir zurück zu Chrome und schauen es uns an. Okay, über Ralph. Ralph ist ein Videospiel. , bla bla la Bla, bla bla la Leach, Mädchen. Okay, Ralphs Eigenschaften. Ich möchte, dass es irgendwie kurvig ist. Dieser. Ja. Okay. Lass uns das dort einfügen. Speichern Sie das. Ja. Das sieht um einiges besser aus. Okay. Es gibt einige Dinge, bei denen ich denke, okay, ich muss diese Dinge definitiv ändern, aber wir werden es schaffen. Lassen Sie uns zuerst den HTML-Code fertig stellen. Okay. Hier, Ralphs Eigenschaften, ich sagte, ich möchte eine geordnete Liste verwenden. Eine OL ist also eine geordnete Liste, und innerhalb einer OL und einer UL, was eine ungeordnete Liste ist, es immer noch Listenelemente Also listet den Artikel auf, er ist stark. Okay, legen wir das da rein. Er ist stark. Und er ist nett. Er, er ist groß. Er mag Mädchen mit Pannen und nimmt keinen Unsinn. In Ordnung. Also das ist die geordnete Liste. Speichern wir uns das. Und das wirst du sehen , wenn ich aktualisiere. Es gibt eins, zwei, drei, vier. Das heißt, es ist eine geordnete Liste. cool. Okay. Das nächste Ding ist ein H Zwei, und das werden Ralph Friends sein. Und dann werden wir uns für eine ungeordnete Liste entscheiden. Und innerhalb der ungeordneten Liste werden wir uns für einen Listenpunkt entscheiden Und hier werden wir Vanilla P Fonchoez essen. Okay, los geht's Aber jetzt wollen wir hier auf eine andere Seite verlinken . Also lass uns das schnell googeln. Lass uns VanLaPefon Schwez nehmen. Und du kannst jede Art von Seite wählen, die ein bisschen mehr Informationen über einen Charakter enthält Lasst uns alles da akzeptieren. Okay, das ist gut. Also werde ich diese URL kopieren. So viele Anzeigen hier. Wow. Okay, Vanilla Pe Fon Schwez und ich werden VanlaPfon Schwez in ein A-Tag oder ein Ankerelement einfügen. Also lass uns A nehmen und dann die HRF. und Los geht's, fügen das ein und platzieren das nachstehende A-Tag da drüben Okay, wer sind noch Ralphs Freunde? Wenn du sagst, ich weiß nicht, wer die Freunde dieser Charaktere sind. Nun, sollte dein Lieblingscharakter sein, aber wenn du es nicht tust, kannst du wie Reque Ralphs Freunde sein Wer sind Rick Ls Freunde, Shigas Sergeant Okay. Und lassen Sie uns dort einen neuen Tab erstellen und los geht's. Okay, lass uns das kopieren. Felix wäre auch ein guter. Also werde ich das einfach dort einfügen und LI A wählen, und dann schneiden wir das aus, fügen es dort ein und wir kopieren Sergeant Culhorn Speichern wir das und überprüfen wir es noch einmal. Das alles funktioniert. Okay, auffrischen. Okay, wir haben also Venlope Von Schwiz und Sergeant Cohor. Aber wenn ich auf eines davon tippe, möchte ich, dass es Okay. Also weißt du noch, wie man das macht? Es ist mit dem Zielattribut und wir haben es leer gesetzt. Fantastisch. Ziel ist leer. Lass uns noch einen Li A nehmen und wir gehen hier zu Felix. Also lass uns Felix eintippen und speichern. Hmm. Rocker Rolf, hier ist Pflicht. Los geht's. Gehen wir. Repariere es, Felix. Also lass uns das kopieren. Gehen wir zum Visual Studio-Code. Repariere einen Felix und füge ihn ein. Okay. Befehl S. Lassen Sie uns den zusätzlichen Speicherplatz dort und den Chrome-Refresher entfernen dort und den Chrome-Refresher Wir haben also drei Freunde. Toll. Und ja, das ist so ziemlich alles HTML, das wir brauchen. Was ich tun möchte, ist, dass das alles sehr schön aussieht. Also das erste, was ich tun möchte, ist das in die Mitte zu legen und dieses Bild vielleicht nicht so groß zu machen. Also mach das Bild grundsätzlich kleiner. Innerhalb von CSS haben wir hier eine Menge Header-Sachen. Lassen Sie uns hier einige Hauptstile einfügen. Ich sage Breite, nehmen wir 800 Pixel und dann einen Rand. Ich setze oben und unten auf Null und links und rechts auf Auto. Speichern wir diese Aktualisierung. Okay. Das sieht gut aus. Nur dass das Bild riesig ist. Sagen wir also Hauptbild. Also alle Bilder im Haupt-Tag oder Hauptelement. Nehmen wir an, die Breite oder maximale Breite beträgt 100%. Also, wenn es kleiner ist, ist das in Ordnung. Wenn es größer ist, passt es dann zu seinem übergeordneten Element. Speichern wir also diese Aktualisierung. Okay. Also das sieht wirklich gut aus. Nicht der größte Fan dieser Art von Schrift. Das ist ein Serapont, nicht sehr laut Rolf, und die Überschriften sind auch seraph, und die Überschriften sind Lassen Sie uns darauf eingehen, wir vielleicht nicht Wir können vielleicht einfach sagen, dass alle H-Einsen diese Schriftart und diesen Schriftstil haben können. Wir sagen alle H-Zweien. Sie können so ziemlich dasselbe tun, außer Farbe. Ich behalte einfach den schwarzen Rand. Das behalten wir bei . 70 Pixel. Gehen wir für 50 Pixel. Ordnung. Also lass uns das speichern. Okay. Das sieht gut aus. Vielleicht ein bisschen mehr Rand an der Spitze. Gehen wir also 20 Pixel vorwärts, und wir können es so machen, also 20 Pixel oben und unten und null Pixel links und rechts Auffrischen. Ja, sieht cool aus. Nun, der Rest, welche Art von Schrift wollen wir? Nun, nehmen wir, du weißt schon, ein paar übliche, vielleicht. Also, lassen Sie uns das oder den HTML-Code und den Hauptteil festlegen, aber der Hauptteil sollte in Ordnung sein. Aber ja, wir werden Golden Rod wahrscheinlich gleich herausnehmen. Vielleicht können wir es jetzt herausnehmen und uns für die Schriftfamilie entscheiden. Es gibt eine Menge Dinge zur Auswahl. Und der Grund, warum es so viele Schriftarten zur Auswahl gibt , ist, dass, wenn Sie eine Schriftart angeben und jemand diese Schrift nicht hat, er wissen muss, was dann zu tun ist. Mit unserer Google-Schrift sagen wir eigentlich, laden Sie diese Schrift und verwenden Sie diese Schrift. Das können nicht alle Browser. Neue moderne Browser, fantastisch. Wir könnten also dasselbe tun und eine Schrift aus Google Fonts importieren. Aber lassen Sie uns vorerst etwas Standardmäßiges auswählen. Also Kuriau, wenn du deine Schriften kennst, kannst du dich vielleicht damit zurechtfinden Times New Roman ist normalerweise eine Sera-Schrift, eines der kleinen Dinge am Etwas, bei dem die Dinge nicht ganz unten stehen , wird San Serfont genannt , und so etwas wie Helvetica SAS Serf aus der Luft ist das, wofür wir uns entscheiden werden Also hier wirst du sagen: Hey, ich will, dass es Wenn Sie kein Aerial haben, entscheiden wir uns für Helvetica, und wenn Sie Helvetica nicht haben, verwenden Sie einfach einen beliebigen SANS-Serfont verwenden Sie einfach Okay, also Command S. Gehen wir zu Google Chrome und aktualisieren es Okay, die Hintergrundfarbe ist jetzt Standard und das sieht viel besser aus, aber ich möchte die Schriftgröße ändern. Nehmen wir die Schriftgröße auf 20 Pixel, speichern Okay, das sieht gut aus. Was ist mit dem Abstand zwischen ihnen? Gehen wir also zur Zeilenhöhe. Vielleicht nehmen wir 24 Pixel und speichern dort. Weit zurück zu Chrome. Vielleicht ein bisschen mehr. Sie können sehen, dass sich einige der anderen Dinge jetzt geändert haben. Interessant. Es verändert es am Körper, was bedeutet, dass es ihn für all seine untergeordneten Elemente verändert , also tun wir das vielleicht nicht. Lassen Sie uns das ausschneiden und es dann auf Absatz-Tags und UL- und OL-Tags oder -Elemente anwenden . Schriftgröße: 20, Zeilenhöhe bis 24 Pixel. Lass uns das überprüfen. Okay. Das sieht ziemlich gut aus. Vielleicht ein bisschen mehr. Also Inspektion. Erhöhen wir es ein bisschen um 30 Pixel. Cool. Zufrieden mit 30 Pixeln. Okay, speichern Sie dort. Auffrischen. Okay. Das sieht ziemlich gut aus. Das gefällt mir. Ich mag es. Rolfe und Vanlope Von Schwez Ich möchte, dass das wie eine Bildunterschrift aussieht Also hier drüben haben wir dieses P mit einer Art Bildunterschrift. Also P-Punkt-Überschrift. Wir können die Schriftgröße auf etwa 16 Pixel einstellen. Wir können die Farbe auf Grau setzen. Vielleicht wollen wir eine bestimmte Art von Grau. Mm. So etwas in der Art. Ordnung. Und dann wollen wir vielleicht, dass es kursiv oder betont wird, damit wir den Schriftstil wählen können, entweder kursiv oder Ich mag Schrägschrift. Also speichere die Aktualisierung Okay, ich möchte ein bisschen näher dran sein. Also lass uns nachschauen. Lassen Sie uns Margin Top wählen. Lass uns das auf Null ändern. Ja. Das sieht gut aus. Und dann können wir wohl auch den unteren Rand ändern. Mal sehen, wie Null rundum aussieht. Das ist großartig. Okay. Also Marge Null. Man könnte sagen, null Pixel, aber Null ist großartig. Okay, hier sieht es also ziemlich gut aus. Ralphs Eigenschaften, er ist stark. Er ist nett, er ist groß. Er mag Mädchen mit Pannen und nimmt keinen Unsinn. Ralphs Freunde. Okay, das sieht also ziemlich gut aus. Vielleicht möchte ich, dass diese ein, zwei, drei, vier etwas nach links stehen, damit sie in einer Reihe mit den Freunden von Ralph und Ralph stehen. Schauen wir uns das mal an. Das OL, da ist so ein grüner Teil da. Was ist das grüne Stück? Also werde ich zu Computer übergehen. Wenn du „berechnet“ nicht siehst, tippe auf diese kleinen Pfeile, und dann sollte es hier sein. Es hat also tatsächlich eine gewisse Polsterung auf der linken Seite, 40 Pixel auf der linken Seite Lassen Sie uns also den Abstand links auf Null setzen. Hmm. Das ist auch nicht wirklich das, was ich will Was wir dann tun könnten, ist zu sagen, was ist es? Listet die Position der Liste im Inneren auf. Ja. Das sieht ziemlich gut aus. Okay. Also links aufpolstern und Position innen auflisten. Gehen wir von der Gesamtpolsterung aus, also von Null. Okay. Das ist cool. Das werde ich kopieren. Und das ist für ein OL. Vielleicht haben wir es für OLs versucht und ist. Also machen wir das für P, UL und OL. Lassen Sie uns für ULs und OL entscheiden. Ungeordnete Listen und Ordnungslisten und Orte hier drin. Befehl S und aktualisiere. Okay. Das sieht ziemlich gut aus. Nun, das sind Links oder Anker. Lass uns hier draußen ein paar Sachen ausprobieren. Also innerhalb von Ps, ULs und OLs. Das ist es, was ich ansprechen möchte, oder die Anker in ihnen Also werde ich diese Zeile hierher kopieren und sagen, alle PAs oder vielleicht verwenden wir nur Einsen, richtig Es könnte eine ganze Menge einfacher sein. Also alle A-Anker-Tags, lasst uns die Farbe auf Rot ändern. Und lassen Sie uns für so etwas entscheiden. Das ist ein bisschen verspielter. Okay? Das sieht gut aus. Komm schon, S. Und Chrome, wir können uns auffrischen. Okay. Also, was ist daran ziemlich cool? Lassen Sie uns noch einmal überprüfen, ob dies in einem neuen Tab geöffnet wird. Was an diesen ziemlich cool ist, Sie haben diese Pseudoklassen, die Sie anwenden können Also nehmen wir ein Ha und sagen Farbe oder vielleicht kopieren wir das und fügen es ein und ändern es in ein Blau oder so Wie ein Blau. Das sieht gut aus. Und man kann auch sagen gedrückt ich finde das sieht nicht gut aus. Ich werde das einfach kopieren. Lass uns zu Chrome gehen, einen neuen Tab erstellen, einen drücken. Ein gedrücktes HTML. Wie man eine Klicktaste stylt, Hover. Oh, da haben wir's. Okay, ich habe Active besucht. Da ist es. Aktiv, besucht. Ordnung. Gehen wir also zurück zum Studio-Code. Gehen wir auf Aktiv. Cool. Kopiere die Farbe und füge sie ein. Okay, wir können das vielleicht in ein Violett ändern. Es wird wahrscheinlich nicht so schön aussehen, aber mal sehen. Und dann kannst du auch sagen, A, besucht, was bedeutet, dass du tatsächlich hier warst. Wir fügen das hier nochmal ein. Und wir machen es grau. Ich möchte dir zeigen, wie das aussieht. Also Command S. Es hat einen Chrome, eine Auffrischung. Es hat all diese Dinge besucht. Wenn wir die URL also nur geringfügig ändern, sehen Sie dann vielleicht etwas anderes. Ich setze einfach ein Fragezeichen, V steht für eins und Befehl S. Jetzt sollte die URL anders sein, also aktualisieren wir sie, und schon ist sie da Aber sobald wir darauf getippt haben und das V gleich eins ist, ist es jetzt grau, was ziemlich cool ist Davon machen nicht mehr viele Leute Gebrauch. Also gehe ich zurück zum Visual Studio-Code und entferne ihn einfach , weil ich das Rot sehr mag, oder ich könnte es dort behalten und es einfach so machen wie A und A besucht haben. Anstatt also zwei separate Deklarationen oder Deklarationsblöcke zu haben, werde ich sie kombinieren. Also A und A besucht, ihr könnt dieselbe Farbe haben und dann mit dem Mauszeiger darüber fahren und aktiv sind verschiedene Farben Also sagen wir mal das Refresh. Und wenn ich mit der Maus darüber fahre, wirst du sehen , dass diese ihre Farbe zu Blau ändern Und wenn ich tippe und gedrückt halte, ist es lila. Jetzt kannst du auch alle möglichen Dinge ändern , wie die Schriftgröße oder die Höhe oder die Hintergrundfarbe oder die Deckkraft oder vieles Aber für Links ist es manchmal etwas irritierend, wenn sich die Dinge zu sehr ändern. Okay, aus irgendeinem Grund ist ein Popup blockiert, vielleicht weil ich es zu lange gedrückt halte Da haben wir's. Okay. Also haben wir ein paar nette Links. Also könnte sogar ein Po sagen, Ralph ist ein Videospiel-Bösewicht aus einem Film, vielleicht können wir das aufnehmen und dann können wir auf den Film verlinken. Ralph ist also ein Videospiel, Bösewicht, aus einem Film, und aus einem Film, den wir in ein Ankerelement setzen , geben ihm eine HRF, geben ihm ein Ziel von Blank Und dann lass uns nach Rice Rolf O suchen. Gibt es eine IMDB oder Da haben wir's. Oder wir könnten es mit Wikipedia verlinken, aber lass uns zu IMDB gehen Ist es nur ein erster Film, klar. Okay. Lass es uns da rein legen. Okay. Speichern wir uns das. Gehen wir zurück zu Chrome. Lass uns das schließen. Wir können wahrscheinlich all diese Tabs schließen. Ansonsten gibt es einfach eine Menge. Okay, danke. Mach Chrome schneller. Schließe das einfach vorerst und erweitere es. Okay, du kannst also sehen, dass es auch rot ist, was toll ist. Aus einem Film, öffnet diesen IMDB-Link. Okay. Das ist also so ziemlich unser Hauptelement oder unser Hauptabschnitt fertig. Vielleicht können wir dieses Rot mit diesem Orange kombinieren. Also lass uns das schnell machen. Hier in unserem Stil. Lass uns dieses Rot nehmen. Ich kopiere das und gehe dann runter zu unserem Header. Das PFP hat hier diese Farbe, also werde ich es dort einfügen Vielleicht brauche ich nur diese Farbe. Rückgängig machen. Da haben wir's. Und dann setze einen Doppelpunkt ans Ende, Semikolon ans Ende. Okay. Luft auffrischen. Ja, entspricht dann dem Rest der Seite. Auf dem Bild sind ein paar schöne Rottöne zu sehen, alles hängt zusammen. Okay. Das ist es. Gehen wir jetzt zum Github-Desktop. Ich möchte sagen, ich habe den Hauptbereich erstellt. Okay. Entscheiden Sie sich für Maine und treiben Sie Origin voran. Und wieder, in ein bisschen Zeit, vielleicht in einer Minute, wird deine GitHubPage-Website aktualisiert. Okay, die Website macht wirklich gute Fortschritte. Was jetzt noch übrig ist, ist das Foto. Also werden wir das in der nächsten Lektion beenden. 26. 25 Die Fußzeile der Websites: Ordnung. Lassen Sie uns unsere Website fertig stellen Wir haben nur noch die Fußzeile übrig. Wir haben also bisher eine wirklich gut aussehende Website. Lassen Sie uns die Fußzeile erstellen. Also innerhalb von Visual Studio-Code innerhalb von Indexpunkt-HTML. In die Fußzeile werde ich ein P-Tag einfügen. Du kannst eine Fußzeile so kompliziert machen, wie du willst, aber das ist so eine einfache Seite Was wir also sagen werden, ist, dass diese Website während eines Tipp-Tap-Kaboom erstellt wurde während eines Tipp-Tap-Kaboom erstellt Außerdem wollen wir ein Copyright-Symbol machen, 2025. Nun, das wäre verrückt. 2025 und hm ja, gemacht von Rich Armstrong Und dann Copyright 2025. Schauen wir uns also nach einem Copyright-Symbol um. Also cooles Rechtssymbol HTML. Da haben wir's. Kopieren wir das einfach. Cool. Wirklich hilfreich, wenn Google es einfach für dich bereitstellt. Okay. Los geht's. Also lass uns das speichern. Gehen wir zu Chrome und Refresher. Okay, tippe auf Tap Kaboom und Rich Armstrong möchte diese Links oder Zugaben machen diese Links oder Zugaben Lassen Sie uns also einen Anker-Taka platzieren und tippen Sie auf Tap Kaboom . Da haben wir's H RF entspricht HTTPS, Doppelstrich, Schrägstrich, Tippen Sie auf kaboom.com. Könnte dort sogar ein WWW platzieren. Fantastisch. Und dann das Gleiche von Rich Armstrong. Und hier kannst du deinen eigenen Namen eingeben. Eigentlich kannst du in deine Fußzeile schreiben, was du willst . Rich Armstrong Href entspricht HTTPS, Doppelpunkt slaasWWW Punkt IH armstrong.net. In Ordnung. Und dann können wir ihm auch ein Leerzeichen als Ziel geben Manchmal sind leere Ziele großartig. anderen Fällen sind sie wirklich frustrierend weil dann am Ende etwa 47 Tabs geöffnet Ich mache das wahrscheinlich sowieso standardmäßig. Aber wenn es auf dieselben Seiten geht, versuche ich, weißt du, es nicht als neuen Tab zu öffnen, weißt du, allgemeine Regel. Okay, das Ziel ist leer. Okay. Also lass uns das speichern. Lass uns zu Chrome gehen und es aktualisieren. Das sieht also ganz nett aus. Es sieht aus wie der Rest der Seite. Jetzt möchte ich das in die Mitte stellen, ähnlich wie den Hauptteil, und ihm dann auch eine farbige Hintergrundfarbe geben. Also lass uns das in unserem CSS machen. Und oft können wir CSS wiederverwenden. Also Footer, lass uns für Width margin zero auto gehen , so etwas Und geben wir ihm eine Hintergrundfarbe. Es wird jetzt blau sein, und lass uns das ein bisschen ändern. Hmm. Da war das Blau aus dem Header, das war ganz nett. Lass uns das nochmal benutzen, also kopiere es. Füge das ein und speichere. Margin Null automatisch. Mal sehen, wie das aussieht. Okay, also nicht wirklich das, was ich will. Also, nein, ich will, dass das Ganze blau ist. Okay. Innerhalb von Visual Studio Code gibt es also ein paar Möglichkeiten, dies zu tun, aber ich denke, die flexibelste ist ein Div in unsere Fußzeile einzufügen Lassen Sie uns also ein Div mit einer solchen Inhaltsklasse wählen. Und wir können das dort einfügen und es dann einfach eingeben. Also sieht alles sauber und ordentlich aus, okay? Und dann haben wir Potter Dot Content. Wir könnten sogar Inhalte zu einer eigenen Sache machen. Vielleicht machen wir das später, aber wir nehmen das und setzen es in den Inhalt um. Margin Null und Auto, das werden wir auch in den Inhalt aufnehmen. Hintergrundfarbe, das behalten wir bei. Und dann lass uns speichern und sehen, was hier passiert. Das sieht toll aus. Okay. Als Nächstes möchte ich vielleicht etwas Polsterung hinzufügen Klicken wir mit der rechten Maustaste auf die Fußzeile. Lassen Sie uns ein wenig Polsterung hinzufügen. Nehmen wir 40 Pixel oder so etwas. Ja. Das sieht toll aus. Okay. Polsterung. Gehen wir 440 Pixel Das wird oben, unten, links und rechts sein . Fantastisch. Speichern wir uns das. Und das Einzige, was ich ändern möchte , sind diese, denn wenn Sie mit der Maus darüber fahren, nehmen sie diese blaue Farbe an, und dieses Rot ist auch ziemlich intensiv Vielleicht können wir eine weiße Farbe machen, und wenn Sie mit der Maus darüber fahren, werden sie gelb Okay. Lassen Sie uns also Anker-Tags in der Fußzeile verwenden, wir sagen Farbe Weiß Und dann kopieren wir das und sagen Footer A, Hover. Wir ändern es Lass uns hier raufgehen und kopieren und einfügen. Hat Hober besucht Lass uns das kopieren. Aber dann ändern wir es in ein Gelb. Vielleicht, damit es nur ein bisschen den gleichen Farbton oder die gleiche Sättigung beibehält wie an derselben Stelle. Okay, wir haben den Hover. Speichern wir die Aktualisierung. Okay, das ist interessant, dass es das eine macht und das andere nicht. Das liegt also daran, dass es besucht wurde, oder? Den haben wir schon besucht. Hm. Also lass uns das kopieren. Komma einfügen, so. Ich sage besucht. Ja, du kannst sie auf zwei separate Zeilen legen , wenn es einfacher ist. Sie können uns dort auch Platz geben , wenn es das Lesen erleichtert. Okay, speichern Sie die Aktualisierung. Da haben wir's. Es ist also wirklich nett , wenn der Schwebeflug gelb ist Und wenn Sie dann darauf drücken, wird nichts angewendet, weil Sie den Hover bereits angewendet haben Hover Also, was war die aktive Pseudoklasse, diese lila? Also lass uns das dann einfügen. Okay. Auffrischung. Okay, das sieht nicht besonders gut aus, also werde ich das einfach entfernen Sie können sehen, wie diese Fußzeilenstile für Anker die früheren Ankerstile überschreiben Erstens, weil es später in der Datei erscheint , und zweitens, weil es spezifischer ist Okay, also spar dir das. Gehen wir zurück zu Chrome und aktualisieren. Okay. Jetzt möchte ich das tatsächlich in eine separate Zeile setzen, und es gibt ein paar Möglichkeiten, wie wir das tun können. Also könnten wir jedes davon zu einem P-Tag machen oder sie in ein P-Element einfügen, oder wir könnten einfach ein BR-Tag hinzufügen, was ein Zeilenumbruch ist. Also werde ich das tun. Ich werde mich für BR entscheiden, einfach so. Und speichern Sie und kehren Sie dann nicht zu Visual Studio zurück , sondern zu Chrome. Ordnung. Das ist großartig Aber jetzt möchte ich es in die Mitte legen. Gehen wir zu VS Code and Style. Und wir könnten es entweder im Inhalt oder in der Fußzeile oder im P-Tag in der Fußzeile tun Fußzeile oder im P-Tag in der Fußzeile Versuchen wir also, eine Zeile zu schreiben, Mitte, Command S, Chrome Okay. Das sieht richtig gut aus. Also, hergestellt von Rich Armstrong, wir überprüfen noch einmal, ob das funktioniert Ja, fantastisch. Kaboom aufgenommen, überprüfe noch einmal, ob das funktioniert. Fantastisch. Okay. Also, das sieht alles wirklich cool aus. Ich denke, hier könnte ein bisschen Platz zwischen der Fußzeile und den Hauptelementen Lassen Sie uns also entweder die Fußzeile oder die Hauptzeile wählen. Aber da wir es mit einer Fußzeile zu tun haben, sollten wir einen Rand über, sagen wir, 20 Pixeln setzen Würde das irgendwas bewirken, 40, 60? 80? 60 sehen ziemlich gut aus. Okay, eine Marge über 60. Also werde ich das einfach kopieren . Und füge es ein. Speichern Sie das. Frisch. Okay, direkt Ralph, über Ralph, Ralphs Eigenschaften, Ralphs Freunde . Ja. Fantastisch. Jetzt müssen wir nur noch zum Github-Desktop gehen und sagen, Fotoelement hinzugefügt. Übergib das Maine. Drücken Sie Origin. Okay, unsere Website ist fertig. High-Five, tanzen Sie ein bisschen pumpen Sie die Luft mit der Faust. Gute Arbeit. Sie werden sehen, dass jeder Abschnitt seine Herausforderungen hatte und dass sich das, was wir in einem Bereich der Website getan haben, manchmal auf andere Bereiche der Website ausgewirkt hat. Und jetzt, in der nächsten Lektion, werde ich Ihnen die Grundlagen zeigen, damit unsere Websites auf Mobilgeräten gut aussehen. Das ist wirklich cool , weil wir unsere Mobilgeräte häufig verwenden . Ich werde es dort sehen. 27. 26 Mobilfreundlich gestalten: Wir haben großartige Arbeit geleistet, um eine Website für unseren Charakter zu entwerfen und zu programmieren, aber wir haben nicht darüber nachgedacht, wie sie auf Telefonen oder Tablets aussehen oder funktionieren könnte auf Telefonen oder Tablets aussehen oder funktionieren Das werden wir also in dieser Lektion tun. Eine Website für Mobilgeräte funktionsfähig zu machen, wird oft als responsives oder responsives Design bezeichnet. Und es gibt eine Reihe von Dingen, die Designer und Entwickler tun, damit Websites auf verschiedenen Geräten und Bildschirmgrößen gut aussehen und gut funktionieren . Hier sind ein paar Optionen. Das erste, was wir tun können, ist flexible Einheiten und Layouts zu verwenden. Zum Beispiel könnten wir eine maximale Breite und eine relative Maßeinheit wie Prozentwerte anstelle von Pixelwerten verwenden eine relative Maßeinheit wie . Das bedeutet, dass unser Inhalt passt, wenn ein Bildschirm kleiner wird , und wenn er größer wird, hält die maximale Breite das Design in Schach. Die zweite Sache, die wir verwenden können, ist die CSS-Logik, um Elementstile auf der Grundlage von Dingen wie Breite und Höhe des Browsers zu ändern Elementstile auf der Grundlage . Das nennt man Medienabfragen und es geht ungefähr so. Wenn die Breite kleiner als 600 Pixel ist, stellen Sie die Schriftgröße auf 16 Pixel, die Avatar-Bilder auf 100% und entfernen Sie die abgerundeten Ecken. Drittens können wir je nach Größe des Browsers ändern, welche Bilder angezeigt werden Wir können dies in HTML tun, indem wir Bildelemente mit verschachtelten Quellelementen verwenden , die Medienattribute haben, oder indem wir die Attribute Quellsatz und Größe für unsere Bildelemente Eine andere Möglichkeit, die angezeigten Bilder zu ändern , besteht darin, Hintergrundbilder für Elemente zu verwenden und dann Medienabfragen zu verwenden , um diese Bilder zu ändern, alles in CSS Wir werden diese drei Optionen in diesem Kurs nicht behandeln , aber es ist hilfreich zu wissen, dass sie existieren. Zum Glück ist unsere Website in unserem Fall ziemlich einfach, also werden wir uns darauf konzentrieren, unsere Website so flexibel wie möglich zu gestalten und CSS-Medienabfragen zu verwenden , um einige Deklarationen zu ändern. Was ich Ihnen in dieser Lektion zeige, kratzt nur an der Oberfläche, aber ich möchte Ihnen die Grundlagen zeigen. Unsere Website sieht zwar auf einem Desktop oder auf einem Computerbildschirm ziemlich gut aus, woher wissen wir, wie sie aussieht und wie sie sich auf Mobilgeräten oder verschiedenen Bildschirmgrößen anfühlt ? Ich möchte also, dass Sie mit der rechten Maustaste auf Ihre Website klicken und entweder zur Inspektion gehen oder sich die Entwickler - und Entwicklertools ansehen. Also, wenn sich Ihr Elementinspektor unten befindet, möchte ich, dass Sie ihn zumindest für diesen Teil nach rechts bewegen . Tippen Sie also auf diese drei Punkte und dann auf diesen Punkt auf der rechten Maustaste, oder Sie können mit dem Punkt nach links tippen auf diesen Punkt auf der rechten Maustaste, . Ich finde das einfach ein bisschen komisch. Also los geht's. Und so können Sie die Größe nach links und rechts ändern. Und das ist die Hauptsache, mit der ich mich beschäftige , ist die Breite meines Bildschirms, weil eine Webseite unendlich lang sein kann und das sollte in Ordnung sein Es ist die Breite, über die ich mir Sorgen mache. So können wir die Breite ziemlich einfach ändern. Und ja, du meinst vielleicht, aber warum sollte ich mir Sorgen machen? Nun, sieh dir das an. Da ist dieser kleine Knopf hier. Dadurch erhalten Sie die Abmessungen Ihres Telefons oder verschiedener Telefone, des iPhone XR, vielleicht eines iPad Pro, und Sie können Ihren Zoom in Ns ändern Das sind also 50%. Das wären 100%, was um einiges größer ist. So können Sie sich einfach wirklich genau ansehen , wie Ihre Website mit verschiedenen Telefonen oder Mobilgeräten aussieht . Ich habe ein iPhone SE, also ist mir das immer bewusst weil ich einen so kleinen Formfaktor habe. Ich hatte schon immer ein kleineres Telefon, daher entscheide ich mich oft für eine Breite von 320 als Minimum, für das ich designe. Also, das sieht komisch aus und deins sieht vielleicht nicht so aus. Manchmal wird es beim Aktualisieren sogar ziemlich nah herangezoomt, als ob es hier ist. Wenn wir also erneut aktualisieren, funktioniert das vielleicht, vielleicht auch nicht Wenn Sie, Sie wissen schon, uns etwas mehr Platz geben, gibt es auch diesen Umklappknopf, dem Sie ins Querformat oder zurück ins Hochformat wechseln können. Okay, du kannst also sehen, dass es hier eine Menge Dinge gibt, die wirklich komisch aussehen. Eine davon ist, dass der Text hier immer noch zentriert ist, aber es gibt diesen blauen Balken und diesen blauen Balken. Also so breit ist unser Bildschirm tatsächlich. Aber weil dieses Bild ganz nach außen erweitert ist, macht es die Website irgendwie so groß. Konzentrieren wir uns also zunächst auf ein paar Dinge. Ich möchte zum Visual Studio-Code zurückkehren. Und Sie haben vielleicht gesehen, wie ich diese Codezeile früher in der Klasse eingefügt habe, und das wurde mit einer ET-Abkürzung gemacht, und ich sagte: Vielleicht kommen wir später in der Klasse dazu. Also, wenn du so bist, aber was bedeutet das? Alles, du kannst es einfach kopieren. Und wenn du zu Chrome gehst und Chat GPT oder etwas Ähnliches öffnest, gehen wir zu chitchpt.com und fügen das hier Du kannst sagen, was bedeutet das? So etwas in der Art. Und es gibt dir eine ganze Reihe von Informationen, was wirklich, wirklich hilfreich ist. Jetzt möchte ich hier etwas hinzufügen, das mit dem Benutzer zu tun hat. Ich möchte nicht, dass der Benutzer es skalieren kann. Ich könnte also sagen, ich möchte nicht, dass der Benutzer auf einem Telefon skalieren kann. Was muss ich hinzufügen? Benutzerskalierbar entspricht nein. Also maximal skalierbar. Benutzerskalierbar, entspricht nein. Also lass uns das kopieren. Gehen wir zurück zum Visual Studio-Code. Fügen Sie das dort ein, setzen Sie ein Komma, verwenden Sie ein skalierbares Nein. Ich speichere das, gehe zurück zu Chrome, gehe zurück zu ReCarf und aktualisiere es, und du wirst jetzt sehen, dass es tatsächlich Und das ist wirklich hilfreich, wenn Sie entwickeln, wenn Sie debuggen und versuchen, Dinge für Mobilgeräte zum Laufen zu bringen Dinge Okay. Das sieht gut aus. Nun, es sieht besser aus als früher. Aber jetzt haben wir eine ganze Reihe von Problemen. Ich werde gerne nach rechts scrollen oder nach rechts ziehen. Hm. Also das Erste, was ich tun möchte, ist dieses Bild anzusprechen. Also klicke ich mit der rechten Maustaste hier und schaue es mir an. Und Sie werden sehen, dass das immer noch eine Breite von 800 hat, weil Main eine Breite von 800 Pixeln hat. Was wir hier also tun können, ist eine maximale Breite von 800 Pixeln festzulegen, und das sollte eine Menge Dinge regeln. Wir haben immer noch ziemlich viel Platz auf der rechten Seite. Okay, gehen wir also zum Visual Studio-Code. Gehen wir zu unserem Hauptfach. Und statt Breite verwenden wir die maximale Breite. Und das Bild hat eine maximale Breite von 100%. Es wird also immer ein Maximum von 100% der Breite dieses Hauptelements sein . Okay, cool. Der Foo-Inhalt hat also auch eine Breite von 800 Pixeln, also verwenden wir dort wieder die maximale Breite. Ich denke, das sollte okay sein Also Command S. Gehen wir zurück zu Chrome, zur Auffrischung. Okay, das sieht viel besser aus. Nun, die nächste Sache, die ich hier ansprechen möchte , ist, dass sich der gesamte Text links und, Sie wissen schon, möglicherweise sogar rechts berühren . Also, was kann man dagegen tun? Nun, das ist wieder im Hauptteil. Was ich hier also tun könnte, ist etwas Polsterung anzubringen. Gehen wir also oben und unten auf Null und sagen wir 20 Pixel links und rechts Okay, das sieht wirklich gut aus. Okay. Und vielleicht können wir unten dasselbe tun. Okay. Scrollen Sie hier runter. Gehen wir zu Well, Padding. Wir setzen oben und unten auf Null und links und rechts auf 20 Pixel Speichern Sie das und dann können wir es vielleicht kopieren und sie auch in den Fußzeileninhalt einfügen Okay, das werde ich speichern. Auffrischen. Diese Website wurde während eines Top-Kaboom-Kurses von Rich Armstrong 2025 erstellt Dieser Text sieht ein bisschen seltsam aus. Vielleicht kann ich ihn etwas kleiner machen oder schauen wir uns was hier vor sich geht, schauen wir uns diese Fußzeile an Die Fußzeile hat bereits eine gewisse Polsterung von 40 Pixeln, sodass der Inhalt diese zusätzliche Polsterung wahrscheinlich nicht benötigt Cool. Gehen wir zurück zum VS-Code. Sie können das entfernen, da die Fußzeile bereits einen gewissen Abstand von 40 Pixeln hat, aber vielleicht sind 40 Pixel auf Mobilgeräten etwas zu viel Also werde ich hier eine Medienabfrage verwenden. Wo Sie Ihre Medienanfragen stellen, liegt bei Ihnen. Vielleicht möchten Sie dies direkt nach diesem Footer-Stilsatz tun. Vielleicht können wir hier einen Kommentar hinzufügen und sagen: Footer. Und hier machen wir eine Medienanfrage, indem wir handeln und dann Medien sagen und ich werde hier einfach die Eingabetaste drücken Und dann Umarmungen. Nehmen wir die maximale Breite von, lassen Sie uns vorerst einfach 600 Pixel wählen Und dann sage ich hier Fußzeile oder Fußzeile P. Wählen wir eine Schriftgröße von 16 Okay. Und in Chrome, lass uns das Ganze auffrischen. Okay. Alles, was 600 Pixel oder weniger hat, wird die Schriftgröße auf 16 Pixel ändern. Wir können das Cha noch einmal überprüfen. Das ist immer noch ziemlich groß. Dann, an diesem Punkt von 600 Pixeln, knallt es und wird ein bisschen kleiner. Das bedeutet nur, dass es ganz gut passt. Sogar bei 320 Pixeln oder so. Ja, das ist großartig. Ja, es sieht so aus, als ob es etwas größer ist, also werde ich es mir ansehen. Ich gehe zu berechnet und dann hier unten, Schriftgröße 16 Pixel Vielleicht liegt es einfach daran, dass es weiß ist. Okay. Das sieht ziemlich gut aus. Vielleicht können wir auch den Rest der Schriftgröße ändern, obwohl 20 Pixel ziemlich gut aussehen. Was ist mit den H-Zweien? Vielleicht können wir die H-Zweien ändern. Gehen wir also zum VS-Code. Lassen Sie uns diese Medienabfrage erneut eingeben. Also, zwei, gehen wir zu den Medien. Es gibt noch eine Menge anderer Dinge, die Sie mit einer Medienabfrage machen können, aber ich behalte es jetzt einfach bei einfach. Also maximale Breite von 600 Pixeln, und Sie können die 600 Pixel so ändern, wie Sie möchten, basierend auf Ihrem Design. Lassen Sie uns also eine lustige Größe von 40 wählen. Und das ist ein Fehler, den ich oft mache, aber ich sehe ihn überall in der Show. Es ist, als ob du denkst, das ist eine H-Zwei, also willst du die H-Zwei-Deklaration hier drüben platzieren, aber das sagt niemandem wirklich etwas. Es gibt keinen H-Zwei-Deklarationsblock. Das ist nur die Schriftgröße mitten im Nirgendwo , wenn es eine maximale Breite von 600 Pixeln gibt. Sie müssen also tatsächlich diesen H-Zwei-Deklarationsblock hier einfügen und dann diese Schriftgrößendeklaration in den Block einfügen. Okay, lass uns dort speichern, zurück zu Chrome gehen, aktualisieren, und das macht es nur ein bisschen besser. Sogar das passt rein, was wirklich nett ist. Lassen Sie uns also noch einmal überprüfen, wie das aussieht. Ja. Das sieht cool aus. Vielleicht können wir das etwas kleiner machen, ich werde den falschen Knopf inspizieren. Ich werde hier inspizieren. Dies ist eine Klasse oder ein Div mit einer Klasse von PFP Bei Ihrem Bild könnte es sich um ein Bild handeln, aber das gleiche Szenario gilt Gehen wir hier zu den Stilen. Die Breite ist 300, die Höhe ist 300. Wenn wir das auf 220 ändern, sieht das ziemlich gut aus. 220, und dann ist er nicht wirklich mittendrin. Ist er noch da, Position im Hintergrund. Sieht ziemlich gut aus. Und dann. Das sieht cool aus. Das gefällt mir. Also haben wir gerade die Position des Hintergrunds geändert und dann die Breite und die Höhe. Also 220 Pixel. Okay. Das sieht toll aus. Und unser Rekord Ralph steht auf zwei Zeilen. Also vielleicht können wir das auf 50 oder so ändern. Ja, das gefällt mir. Gehen wir also zum Visual Studio-Code über. Und hier können wir dieses H in dieser Medienabfrage genau hier platzieren und wir nehmen eine Telefongröße von 50. Sie könnten diese Medienabfrage ganz unten in Ihrer Datei platzieren und all Ihre Select Your Statements und Deklarationsblöcke in einer Medienabfrage platzieren, solange sie dieselbe Größe hat. Es hängt nur davon ab, wo Sie Ihren Medienabfragecode platzieren möchten . Okay, also lass uns das speichern. Gehen wir zu Chrome und aktualisieren. Okay. Also das sieht echt cool aus. Lassen Sie uns das auf responsiv ändern. Okay, hier oben, schauen wir mal, bei 600 ändert sich die Schriftgröße. Jetzt können Sie eine Menge Spaß mit Medienabfragen haben. Sie können die Farben ändern. Sie können Bilder ändern. Sie können Schriftgrößen, Schriftarten und alles Mögliche ändern , nur basierend auf der Breite des Bildschirms. Aber es gibt auch viele andere Dinge , die in Medienaquarien passieren und die Sie sich ansehen können Aber im Moment sieht unsere Website auf dem Handy wirklich gut aus, sie sieht auf dem Desktop wirklich gut aus und ist bereit, sie mit der Familie zu teilen Und noch etwas, wir müssen unseren Code bestätigen. Gehen wir also zu Gitub Desktop und geben eine Website RS Bonv ein. Los geht's Lassen Sie uns für Maine entscheiden. Lasst uns Origin vorantreiben. Fantastisch. Fantastisch. Also nochmal, in ein paar Minuten wird das online aktualisiert, und du kannst es mit deiner Familie teilen. Okay, jetzt sind wir bereit, unsere Website in dieser WhatsApp-Familiengruppe zu teilen . Es sollte auf allen Telefonen und Computern funktionieren . Ich sollte toll aussehen. Aber vielleicht, bevor wir es teilen, wie wäre es, wenn wir unserer Website weitere Webseiten mit zwei Charakteren hinzufügen ? Lass uns sie in der nächsten Lektion machen. 28. 27 Eine Figur hinzufügen: Okay, wir haben eine tolle Website für unseren Charakter. Es entspricht dem Stil unseres Charakters. Es ist responsiv, aber es ist nur eine einzige Webseite. Lassen Sie uns also mindestens eine weitere Seite für einen anderen Charakter oder vielleicht sogar zwei erstellen. Dann können wir es eine richtige Website mit drei Seiten nennen. Die gute Nachricht dabei ist, dass wir das ganz einfach tun können indem wir unsere Indexpunkt-HTML-Datei zweimal duplizieren, den Text und die Bilder ändern und ein paar Zeilen mit neuem CSS hinzufügen, und ein paar Zeilen mit neuem CSS hinzufügen damit sich jede Seite etwas einzigartig anfühlt Okay, jetzt ist es an der Zeit, der Website ein oder zwei weitere Zeichen hinzuzufügen Website ein oder zwei weitere Zeichen hinzuzufügen Das wird Spaß machen und sollte nicht zu lange dauern. Also braucht Rolf natürlich einen Vanille-Pe auf Schoez-Seite . Also lass es uns tun Ich tippe hier drüben auf diese Schaltfläche , ich möchte nicht, dass das Gerät Tuba hat, und dann verschiebe ich das wieder nach unten Fantastisch. Okay. Im VS-Code klicke ich mit der rechten Maustaste darauf und dann auf Kopieren und dann mit der rechten Maustaste auf Einfügen. Und dann drücken Sie die Eingabetaste, um es umzubenennen. Und ich sage, Mann, Vanlope. Oh, weiß ich nicht, wie man das buchstabiert? Also werde ich das einfach kopieren. Gehen wir wieder zu Visual Studio. Ich schätze, wir könnten es Van nennen. Und ich sorge dafür, dass es klein geschrieben ist. Also Vanlope und dann wird der Titel Vanlope Von, Schwez sein . Ich muss das Rolf-Symbol ändern, dieses wird dasselbe sein Okay, also lass uns ein VanLape-Icon suchen. Also ein neuer Tab. Van LaPef Schweiz Lass uns Bilder machen. Okay, der sieht ziemlich gut aus. Ich will nur ihr Gesicht. Also werde ich mit der rechten Maustaste klicken und Bild speichern unter. Ja, das sieht gut aus, und finde sie. Ich werde das in Ralph in Bilder einfügen. Okay. Op. Okay. Jetzt möchte ich die Größe Los geht's. Haben wir den schon früher benutzt? Ich kann mich nicht erinnern. Lass es uns versuchen. Mit einer Höhe. Lass es uns zuschneiden. Ja, das sieht gut aus. Okay. Das sieht gut aus. Bild zuschneiden, Bild herunterladen. Ordnung. In Ordnung. Bild herunterladen. Fantastisch. Lass uns gehen und Nlope-Symbol in Ralph in das Bild einfügen Hoppla. Da haben wir's. Geh und kopiere das alles. Gehen wir zum VS-Code. Leg es da rein. Okay. Das sieht gut aus. Das können wir dann kopieren und einfügen. Vanellope Font schwez über Vanlope. Okay, ich weiß im Moment nicht viel über Venlope, also lass mich Venlop Von Schwez' weiblicher Protagonistin. Okay, lass uns das kopieren. Fügen Sie es da ein. Wir brauchen ein Bild von Vanlope Schauen wir uns hier noch ein paar Bilder an. Ja, der ist ziemlich cool. Ja. Lass uns das Bild speichern da ich langsam Vanlop groß mache, dann fügen wir Vanlope groß rein, benennen es um und kopieren einfach alles Wenn wir also im VS-Code sind, können Sie ihn dort einfügen. Über Vanlope Vanlopes charakteristisch. Okay, lass uns weitermachen. Sie ist stark, sie ist nett. Sie ist groß. Okay. Sie ist klein. Sie ist fehlerhaft Sie hat eine gute Einstellung und ist 9 Jahre alt 9 Okay. Gehen wir zu Van LapesFriends Nun, hier haben wir Rect Ralph. Okay. Und jetzt können wir tatsächlich auf unsere Index-Seite verlinken. Also Punkt Schrägstrich. Wir entscheiden uns für Index Dot HL oder einfach Dot Slash. J geht im Grunde direkt zur Wurzel. Okay, Rece Rolf, das heißt, ich werde das innerhalb von Index speichern, das ist Rolfs Seite hier unten für Vanlope, anstatt zu dieser externen URL zu gehen. Was wir tun können, ist, direkt zum Punktstrichstrich zu gehen, aber Vanpt HTML. heißt, ich werde das innerhalb von Index speichern, das ist Rolfs Seite hier unten für Vanlope, anstatt zu dieser externen URL zu gehen. Was wir tun können, ist, direkt zum Punktstrichstrich zu gehen, aber Vanpt HTML. Und ich möchte nicht, dass das Ziel leer ist, also nehme ich Lass uns nach Vanlope gehen. Wir nehmen auch hier das Target Blank ab. Okay. Das ist großartig. wir zu Google Chrome, gehen wir zur EkifPage und zum Wir tippen auf Vanilla Pe auf Schwez dann auf Vanilla Pe auf Schetz Abgesehen von dem Bild sieht es ziemlich gut aus, ein Vanlope. Lass uns das schließen. Alles klar. Das ist großartig. Und Sie können sehen, wie schnell es ist, eine neue Seite zu erstellen, eine ganz neue Seite, weil wir unser CSS bereits eingerichtet haben. Und dann klicken wir auf Recker Rf und das geht zum Punkt Schrägstrich Jetzt online, das würde funktionieren. Aber hier funktioniert es nicht, weil das kein Server ist. Das ist wie ein Datei - oder Ordnersystem. Gehen wir also zurück zum Visual Studio-Code und starten wir HTML. Lassen Sie uns das speichern. Lass uns zu Chrome gehen. Gehen wir zurück und aktualisieren. Okay, Rick und Rolf Los geht's, geht zur Indexdatei und nicht Rolf-Ordner, der das ist Okay, das ist großartig. Gehen wir zurück zu Vanlope und ändern dieses Bild. Wenn du immer noch ein Bild hier drüben hast, also in einem VS-Code oben hier für dein PFP, wenn du ein Bild verwendest und die Nebenquest nicht gemacht hast, bei der wir das Bild-PFP in ein Div mit einer PFP-Klasse geändert haben , wäre Aber jetzt haben wir PFP und ich möchte noch eine Vanlopi-Klasse hinzufügen eine Vanlopi-Klasse PFP-Vanlope. Speichern wir uns das. Gehen wir zu einem Stil über, der CSS ist. Wo ist das PFP. Ich werde das kopieren und hier einfügen, es hat eine Klasse von Dt PFP und Vanp So sagst du, ich wähle alle Elemente mit der Klasse PFP und Vanlop innerhalb des Header-Elements aus Okay, hier haben wir nur ein Hintergrundbild, das ich ändern werde Dann müssen vielleicht auch die Hintergrundposition und die Hintergrundgröße geändert werden. Okay, ich denke, schauen wir uns an, welche Bilder wir haben. Phenelope-Symbol, Penelope JPEG. Das ist wahrscheinlich wirklich gut, also werde ich das alles kopieren und dort einfügen Position im Hintergrund. Ich setze das einfach auf Null und Null auf Finale und Hintergrundgröße auf 100%. Oder vielleicht verwende ich so etwas wie Cover. Also werde ich das speichern. Gehen wir zurück zu Chrome und aktualisieren es. Okay. Ja. Das sieht wirklich, wirklich gut aus. Das gefällt mir. Fantastisch. Und wenn wir zu Rece Rolf zurückkehren, ist er immer noch derselbe, weil er der Standard ist Er hat auch nicht den Vanlope-Kurs auf diesem PFP. Jetzt fahren wir wieder nach Vanlope. Wir könnten sogar die Farbe ihres Randes ändern. Ja, lass uns das schnell machen. Klicken wir also mit der rechten Maustaste auf Inspect. Oder machen wir es vielleicht in Visual Studio-Code , weil wir dort einen Farbwähler haben Also Hintergrundposition, Hintergrundgröße. Lassen Sie uns die Randfarbe wählen. Und entscheiden wir uns für Rot. Aber welche Farbe hat Vanelope? Vanelope hat so eine türkisfarbene Farbe. Ja, also lass uns das machen und sparen. Okay. Da haben wir's. Es gibt eine Reihe von Möglichkeiten, wie wir das tatsächlich tun könnten. Zum Beispiel könnten wir dem Körper eine Vanlope-Klasse geben und dann alles darauf basierend ändern Aber im Moment ist das das Einzige, was sich ändert Okay. Jetzt kannst du das mit einer, zwei, drei, vier Seiten machen, wie viele Seiten du willst. Jetzt hat Ihre Website mehrere Webseiten. Es ist eigentlich eine Website und nicht nur eine einzige Webseite. Und das Letzte, was wir tun müssen, ist zum Github-Desktop zu gehen und diesen Code zu übertragen. Füge eine weitere Seite hinzu. Entscheiden Sie sich für Maine, drücken Sie Origin. Da haben wir's. Wenn du so etwas in GitHub Desktop siehst, ist eine aktualisierte Version von Gitup Desktop verfügbar und wird beim nächsten Start installiert Du kannst einfach auf Gitup Desktop neu starten tippen und es sollte innerhalb von Sekunden oder Mm hmm. Da haben wir's. Da haben wir's. Jetzt habe ich eine weitere Seite auf meiner Website. Ich würde mich freuen, wenn du dasselbe tust. Vielleicht füge zwei, drei, vier, mehr hinzu, wie viele du willst. Okay, da haben wir's. Wenn du jede Charakterseite noch einzigartiger machen willst, dann mach es. Ich liebe es zu sehen, wie du das machst. 29. 28 Challenge-Alternatives CSS: Wenn du nun bereit für eine Herausforderung bist, möchte ich, dass du ein oder zwei weitere Versionen der Webseite deines Charakters mit genau demselben HTML, aber mit unterschiedlichen CSS-Dateien erstellst. Hier ist ein Beispiel für zwei verschiedene Webseiten mit exakt demselben HTML, aber unterschiedlichem CSS werden Sie beginnen zu verstehen Mit dieser Übung werden Sie beginnen zu verstehen, wie leistungsfähig CSS ist Okay, du kannst also wählen , für welchen Charakter du eine neue Version erstellen möchtest. Ich werde mich für Ralph entscheiden, also gehe ich zurück. Und ich werde ein Duplikat dieser Seite erstellen und dann die CSS-Datei ändern , die sie lädt, und dann auch eine neue CSS-Datei erstellen. Gehen wir zum VS-Code über. Ich klicke mit der rechten Maustaste auf Kopieren und dann mit der rechten Maustaste auf Einfügen. Und dann kehre ich zurück, ich nehme Ralph zwei. Du kannst es nennen, wie du willst. Dann mein Stil, ich werde mit der rechten Maustaste auf Kopieren klicken, rechten Maustaste klicken und in CSS einfügen, mit der rechten Maustaste auf Einfügen klicken. Statt Stil Kopieren sage ich einfach Stil zwei. Da haben wir's. In Rolf Two ist das Stylesheet, für das wir uns entscheiden werden , Style-Two-Punkt-CSS, und du kannst V zwei sagen oder was auch immer du willst Speichern wir uns das. In Stil zwei können wir jetzt einige Änderungen vornehmen. Aber ich möchte zu Google Chrome gehen und einfach zu Ralph gehen, um HTML zu punktieren. Da sollte es keine Unterschiede geben. Aber jetzt können wir anfangen, Unterschiede zu machen. Wir können anfangen, Änderungen vorzunehmen. Also lass uns den Header machen. Lass uns diese Farbe ändern. Lass uns vielleicht ein wirklich dunkles Blau nehmen und das speichern und überprüfen, ob es funktioniert. Da haben wir's. Und so können Sie einfach damit beginnen, die gesamte Site oder die gesamte Webseite mit dieser anderen CSS-Datei zu ändern die gesamte Site oder die gesamte . Und es macht wirklich Spaß , denn der HTML-Code wird sich nicht ändern, das CSS jedoch. Also viel Spaß damit, probiere neue Dinge aus, experimentiere. Ja, es wird Spaß machen. Und dann, wenn Sie bereit sind und wenn Sie fertig sind, gehen Sie zurück zu Git upb Desktop und sagen wir, haben eine neue oder alternative Version von Ralphs Webseite hinzugefügt von Ralphs Webseite Okay. Und dann Commit und dann Origin pushen. Okay, da haben wir's. Viel Spaß damit. 30. 29 Teile deine Website: Okay. Die Website von Rick Rolls sieht umwerfend Ich denke, es passt wirklich gut zu ihnen, und ich hoffe, dass deine Website toll aussieht und auch zu deinem Charakter passt Das Tolle ist , dass jedes Mal, wenn Sie Ihren Code mit github.com übertragen und synchronisieren, Ihre Seite aktualisiert wird, was unglaublich ist Wenn du dich nun dazu in der Lage fühlst, teile die Website deines Charakters mit der Welt Sag deiner Mutter, deinen Freunden, den Jungs, mit denen du zusammenarbeitest, es sollte alle wirklich stolz oder wahnsinnig eifersüchtig machen Sie werden dich wahrscheinlich wie einen Ninja behandeln und dich bitten, alle möglichen Dinge zu programmieren, und vielleicht werden sie dich sogar bitten, Drucker zu reparieren und so, was irgendwie komisch ist Wie dem auch sei, ich würde gerne die Website deines Charakters sehen. Also poste es dort, wo ich es sehen kann. Sie können es bei taptapkaboom in allen sozialen Netzwerken erwähnen, oder Sie Meine E-Mail-Adresse ist reich an taptapkaboom.com. Jetzt, an diesem Punkt, kannst du ziemlich stolz auf dich sein. Du hast gerade eine Website für deinen Lieblingscharakter programmiert. Es gibt drei Seiten. Es reagiert. Es ist großartig. Ich finde, du solltest dich jetzt abklatschen und vielleicht sogar ein bisschen tanzen Also, Wo Whoo. So etwas in der Art. Gut gemacht. 31. 30 Häufige Fehler debuggen: Leute, egal wer ihr seid, selbst wenn ihr ein Super-Ninja-Coda seid, werdet ihr beim Programmieren Fehler machen Sie werden Bugs genannt und sind frustrierend. Also, wie gehst du mit ihnen um? Hier sind einige Tipps, die Sie sich merken sollten. Der erste Tipp ist , zu wissen, dass Fehler jeder Art von Programmierer auftreten. Es ist einfach das, was passiert Wir sind Menschen. Sogar KI macht Fehler. Es geht nicht darum, ob, sondern wann. Der zweite Tipp ist, dass der Browser nicht darauf aus ist, Sie zu erwischen. Es folgt nur Ihren Anweisungen. Tipp drei ist, dass die Probleme in den meisten Fällen sehr klein sind und die Lösungen wirklich einfache Rechtschreibfehler sind, Tippfehler, und die Lösungen wirklich einfache Rechtschreibfehler sind, Tippfehler, keinen Punkt vor einem Klassennamen in CSS verwenden, einen Punkt vor einem Elementnamen in CSS verwenden, einen Punkt anstelle eines Hash-Symbols verwenden, verwenden, einen Punkt anstelle eines Hash-Symbols verwenden wenn versucht wird, ein Element anhand der ID auszuwählen Ein weiteres kleines Problem besteht darin, in Ihrem Code andere Groß- und Kleinschreibung als in Ihren Dateien und Ordnern zu verwenden Ihrem Code andere Groß- und Kleinschreibung als in Ihren Dateien und Ordnern zu Wenn Ihre Bilder nicht ankommen oder kein CSS vorhanden ist, wenn Sie Ihre Website online aufrufen, das wahrscheinlich daran, dass Sie versuchen , auf eine Datei zuzugreifen, die nicht existiert. Oder nur eine, bei der der Dateipfad oder der Dateiname eine andere Schreibweise haben. Der vierte Tipp ist, dass es einen logischen Grund gibt , warum es nicht funktioniert. Sie müssen nur herausfinden, was es ist. Bugs sind im Nachhinein leicht zu erkennen. Tipp fünf ist, die Dinge in Ihren HTML- und CSS-Dateien sauber, aufgeräumt und konsistent zu halten in Ihren HTML- und CSS-Dateien sauber, aufgeräumt und konsistent Sie Ihren Code so ein, dass er leicht gescannt und Unregelmäßigkeiten erkannt werden Verwenden Sie in Ihrem gesamten Projekt dieselben Konventionen für Benennung und Groß- und Kleinschreibung wie „Camel Case“ oder „Kebab Case Tipp sechs: Kopieren und Einfügen statt Umschreiben, wo Das heißt, selbst wenn es Rechtschreibfehler gibt, sind sie überall falsch, aber überall gleich. Tipp sieben. Wenn etwas nicht wie erwartet funktioniert, erklären Sie, was passieren sollte und was dann tatsächlich passiert. Sie können mit sich selbst sprechen, es aufschreiben oder es sogar jemand anderem erklären. Auch wenn diese andere Person nicht codiert, kann es helfen. Hunde und Katzen sind hervorragende Partner beim Programmieren. Tipp acht: Treten Sie einer Community bei und suchen Sie sich einen Mentor oder jemanden, der mehr Erfahrung hat als Sie, vor allem, wenn Sie versuchen, komplexere Dinge zu tun. Tipp neun ist, Google oder etwas wie Chat ChPT zu fragen. Es gibt keine einzige Antwort, nach der ich gefragt habe, die nicht schon jemand gefragt und auf die ich eine anständige Antwort gefunden Tipp zehn: Machen Sie eine Pause. Gehen Sie spazieren, schauen Sie aus dem Fenster, atmen Sie ein bisschen durch oder schlafen Sie einfach über das Problem. Lass deine Bewusstlosigkeit daran arbeiten. Ernsthaft, die Zeit, in der ich herausgefunden habe, was falsch ist , während ich unter der Dusche oder mitten in der Nacht bin , ist verrückt Sie werden viel Zeit mit dem Debuggen verbringen. Die gute Nachricht ist, je mehr Sie programmieren, desto schneller können Sie diese Fehler erkennen und beheben Sie werden sagen: Ah, das habe ich schon einmal gesehen Also, viel Glück beim Codieren, viel Glück beim Debuggen Sehen Sie es als Teil des Prozesses. 32. 31 Help Me Help You: Ich werde Sie immer ermutigen, Ihren eigenen Code zu debuggen und Dinge selbst herauszufinden weil Sie auf diese Weise Erfahrung sammeln Aber manchmal kann man es einfach nicht richtig hinbekommen und möchte aufhören oder den Computer aus dem Fenster oder auf die Katze werfen aus dem Fenster oder auf die Katze werfen Also wäre es mir lieber, wenn das alles nicht passiert. Also, in solchen Fällen würde ich gerne helfen. Aber du musst mir helfen, dir zu helfen. Also das brauche ich von dir wenn du mich um Hilfe bittest. Ich möchte, dass du deinen Code festschreibst und ihn mit github.com synchronisierst Zweitens, sag mir, wie dein Github-Benutzername lautet. Drittens, senden Sie über einen Link zu der Webseite mit dem Problem. Viertens, wenn Sie bei einer bestimmten Lektion im Kurs nicht weiterkommen, sagen Sie mir, welche Lektion. Fünftens: Beschreiben Sie, was passieren sollte. Sechstens, beschreibe, was passiert. Dann werde ich versuchen, dir zu helfen. Also bitte sag nicht Dinge wie, Meine Website funktioniert nicht. Bitte hilf mir. Ich kann dir hier nicht helfen. Hilf mir, dir zu helfen. Also probiere dieses Format aus. Holen Sie sich den Benutzernamen und geben Sie dann Ihren Benutzernamen, die URL und Ihre URL dort ein, wo ein Problem auftritt. Nummer der Lektion. Geben Sie zum Beispiel Nummer 16 ein, in der es um das Schreiben von CSS in separate Dateien geht. Manchmal kann ich mich nicht erinnern, worum es bei 16 geht. Was passieren sollte, die Textfarbe für Überschrift drei sollte blau sein. Was passiert, die Farbe des Texts für Überschrift drei ändert sich nicht. Ich hinterlasse Ihnen entweder eine schriftliche Erklärung Videoerklärung, oder ich vereinbare einen Termin mit Ihnen. 33. 32 Was kommt als Nächstes?: Okay, das ist das Ende des Kurses, aber hoffentlich ist es erst der Anfang deiner Programmierreise. Ich hoffe, du hattest Spaß. Ich hoffe, du hast viel gelernt und ich hoffe, dass du ab jetzt mehr von dieser nerdigen Seite annehmen wirst ab jetzt mehr von dieser nerdigen Seite Dieser Kurs hat Ihnen eine Grundlage gegeben , auf der Sie zusätzlich mehr lernen Es gibt noch viel mehr zu lernen, und es kann wirklich Spaß machen Websites und Apps für sich selbst, Ihre Freunde und für Kunden zu erstellen. Wenn Sie es noch nicht getan haben, müssen Sie jetzt feiern. Sie haben gerade eine Website erstellt. Hallo, fünf selbst, gib einen Schrei aus. Whoop whoop. Tanzen Sie, springen Sie auf und ab, rennen Sie wie verrückt herum Gut gemacht. Und jetzt, könntest du mir einen Gefallen tun? Kannst du diesen Kurs bitte rezensieren? Es würde mir sehr viel bedeuten und anderen Menschen bei der Entscheidung helfen , ob sie es nehmen oder nicht? Im Ernst, das zu tun würde viel bedeuten. Dies ist zwar das letzte Video, ich werde diesem Kurs weitere Videos hinzufügen, wo es Sinn macht, und natürlich werde ich weitere Kurse und YouTube-Videos erstellen . Also melde dich für den Taptap Kaboom Newsletter an und abonniere den YouTube-Kanal . Tschüss fürs Erste