Programmiere deine erste Website von Hand: Grundlagen von HTML und CSS

1. Kurs-Einführung: Hey, mein Name ist Rich Armstrong von taptapkaboom.com. Ich entwerfe und erstelle Websites seit 2007, und in dieser Klasse werde ich Ihnen zeigen, wie Sie Ihre erste Website von Grund auf mit HTML und CSS entschlüsseln können. Für mich ist die Möglichkeit, mein eigenes HTML und CSS zu schreiben, mehr als nur Codierung. 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 und nutzen und mit ihnen interagieren, und die Fähigkeit, alles selbst zu programmieren, gibt Ihnen einen unglaublichen Vorteil. Sie müssen sich nicht auf andere Personen, gepackte Vorlagen oder Versuche in komplexen Apps verlassen, um Ihre Ideen zum Leben zu erwecken. Codierung ist auch super Spaß und lohnend. Während des Unterrichts werde ich Sie Schritt für Schritt durch die Erstellung einer einfachen einseitigen Website für Ihre Lieblings-Cartoon-Helden oder Filmfigur. Ich erkläre alles eine zugängliche Weise und lasse das Zeug aus, das du nicht wissen musst. Am Ende des Kurses haben Sie Ihre erste Website erstellt, die Sie mit der Welt teilen können. Sie werden die Grundlagen von HTML und CSS kennen. Deine Freunde werden eifersüchtig sein, deine Mutter wird super stolz sein, und du wirst eine solide Grundlage haben, um auf der Oberseite zu bauen. Also, ob Sie ein absoluter Neuling sind oder in einigen Web-Design und Entwicklung vor, kommen Sie diese Klasse zu nehmen. Alles, was Sie brauchen, ist ein Computer und eine Internetverbindung. Wir sehen uns im nächsten Video. 2. Das solltest du herunterladen: Um die Codierung einfacher zu machen, müssen Sie einige Dinge herunterladen und installieren, einen Code-Editor und einen Entwicklungsbrowser sowie eine Möglichkeit, Ihren Code zu sichern und eine Website zu veröffentlichen. Das erste, was Sie brauchen, ist ein Code-Editor. Sie machen Vorschläge, vervollständigen Ihren Code und machen Teile Ihres Codes in verschiedenen Farben. Grundsätzlich helfen sie Ihnen, schneller und mit weniger Fehlern zu programmieren. Es gibt Tonnen von Code-Editoren zur Auswahl. In dieser Klasse werde ich Sublime Text verwenden. Sie können es kostenlos nutzen und eine kommerzielle Lizenz kostet nur $80. Ein weiterer großartiger Code-Editor ist der Visual Studio-Code von Microsoft. Es ist kostenlos und Open Source. Letztendlich sollten Sie einen Code-Editor auswählen, der sich für Sie richtig anfühlt, wofür Sie es brauchen. Das zweite, was Sie brauchen, ist ein guter Entwicklungs-Browser. Jeder Browser hat eine Reihe von Tools, die Ihnen helfen, Websites zu entwickeln. Aber Google Chrome ist das Beste. Damit können wir Fehler erkennen, verstehen, warum bestimmte Dinge passieren, und sogar ein bisschen Design im Browser machen. Wissen Sie, Ihre Arbeit zu sichern, ist eine gute Idee, oder? Nun, die meisten Programmierer verwenden ein System namens Git, um ihre Projekte zu sichern. Mit Git speichern Sie die Änderungen, die Sie an Ihrem Projekt vornehmen, auf Ihrem Computer. Das ist großartig, aber wenn Ihrem Computer etwas passiert, verlieren Sie Ihren ganzen Code. Hier kommt Github ins Spiel. Es ermöglicht Programmierer, ihren Code und die Änderungen, die sie mit einer Online-Version vornehmen, zu synchronisieren . Github ermöglicht es Ihnen auch, einfache Websites zu veröffentlichen und sie haben eine App namens GitHub Desktop erstellt, was die Verwendung von Git super-einfach macht. Laden Sie diese drei Dinge jetzt herunter und installieren Sie sie. In den Klassenressourcen können Sie eine PDF-Datei mit alternativen Code-Editoren und Entwicklungsbrowsern anzeigen . Nachdem Sie diese drei Dinge heruntergeladen und installiert haben, können Sie mit der nächsten Lektion fortfahren und mehr über HTML erfahren. Im Rest dieser Lektion zeige ich Ihnen, wie Sie Sublime Text, Google Chrome und GitHub Desktop herunterladen und installieren . Öffnen Sie Ihren Standardbrowser, so etwas wie Safari oder Internet Explorer, und geben Sie „sublimetext.com“, Dort gehen wir, und dann möchten Sie die für Ihr Betriebssystem herunterladen. Für mich ist es Download für Mac, wenn Sie keines für Ihr Betriebssystem sehen, klicken Sie auf den Download-Button dort drüben, und dann können Sie OS X, Windows, Linux, was auch immer sehen. Lassen Sie uns für OS X gehen, während das unsere Suche nach Google Chrome herunterlädt. Google Chrome, da gehen wir, google.com/chrome. Du wirst so etwas sehen. Diese Seite ändert sich von Zeit zu Zeit. Dann klicken Sie auf diesen Download Chrome für Mac. Da gehen wir. Das nächste, was wir herunterladen müssen, ist GitHub Desktop, Github Desktop und hier oben, desktok.github.com. Laden Sie dann für Mac OS herunter, wenn Sie auf einem Mac sind, oder laden Sie für Windows herunter, wenn Sie unter Windows sind. Bereits, das wird GitHub Desktop herunterladen. Sobald alles heruntergeladen wurde, können wir unseren Download-Ordner öffnen. Ich werde Drag & Drop oder GitHub Desktop-App in Anwendungen. Ich werde auf „Google Chrome“ doppelklicken. Ich werde auf „Sublime Text“ doppelklicken, beide werden sich öffnen. Ich ziehe Google Chrome in den Anwendungsordner. Wir haben einen erhabenen Text und ziehen ihn auch in den Applications Ordner. Sie können diese beiden Windows schließen, wenn sie fertig sind und Sie können diese beiden DMGs einfach so auswerfen. Dann gehen Sie zu Ihrem Anwendungsordner und wir gehen für „g-o“ für Google Chrome und doppelklicken darauf. Dies ist ein Sicherheits-Pop-up, das auf Mac auftaucht, vollkommen okay. Sie können auf „Öffnen“ klicken und dort gehen wir. Sie haben Google Chrome installiert. Fantastisch. Gehen wir zurück zum Finder und lassen Sie uns GitHub Desktop öffnen und wieder können wir „Öffnen“ drücken. Dies ist unsere Startseite, die wir sehen werden. Dann wollen wir endlich Sublime Text öffnen. Gehen wir zum Finder drücken Sie „S-U“ auf unserer Tastatur, und doppelklicken Sie dann darauf. Öffnen Sie das erneut, und Sublime Text wird hinter einem Finder-Fenster geöffnet. Du hast das, was du brauchst, um dich wie ein Ninja zu entwickeln. Lassen Sie uns auf, was HTML ist. Wir sehen uns im nächsten Video. 3. Was ist HTML?: Was ist HTML? Nun, Ihnen zu sagen, dass HTML für Hypertext Markup Sprache steht, vielleicht nicht so hilfreich, aber was ich hilfreich finde, ist zu erklären, dass HTML eine einfache Codierungssprache ist, die verwendet wird, um Informationen anzuzeigen. Es wird von Menschen geschrieben und von Browsern verstanden. HTML strukturiert den Inhalt der Webseite in eine Reihe von Boxen, in den meisten Webseiten gibt es Boxen innerhalb von Boxen. Die Box, die alle anderen Felder enthält, ist unser Browserfenster, das ist, was ich gerne HTML-Box-Theorie nenne. In jedem Feld kann es entweder mehr Felder, Text, eine Kombination von Feldern und Text oder gar nichts geben Text, eine Kombination von Feldern . Basierend auf dem Namen des Feldes, wird der Browser es und seinen Inhalt anders als andere Arten von Feldern anzeigen, gibt es Felder für Listen, Absätze, Überschriften, Fundamente, Bilder, Links und vieles mehr. Standardmäßig sind die meisten Felder so hoch wie ihr Inhalt, und so breit wie die Box im Inneren von, andere Felder sind so hoch und so breit wie ihr Inhalt. Die meisten Boxen, die so weit nach links und so weit wie möglich nach oben, also wie codieren wir eine HTML-Box? Nun, die meisten HTML-Felder haben ein öffnendes Tag und ein schließendes Tag. Ein öffnendes Tag besteht aus einem Kleiner-als-Symbol, dem Tag-Namen und einem Größer-als-Symbol. Ein schließendes Tag besteht aus einem Kleiner-als-Symbol, einem Schrägstrich, dem Tag-Namen und einem Größer-als-Symbol. Zwischen diesen beiden Tags können Sie ein weiteres HTML-Feld, einige Texte, eine Kombination von Feldern und Text, oder lassen Sie es leer. Die gesamte HTML-Box besteht dann aus dem öffnenden Tag, dem Inhalt und dem schließenden Tag, und dies wird alles als HTML-Element bezeichnet. Standardmäßig zeigt ein Browser HTML-Elemente von oben im Dokument nach unten an, genau wie in Ihrer HTML-Datei. Ist das alles, du fragst vielleicht? Nicht ganz, es gibt noch eine Sache, HTML-Attribute. Attribute sind geheime Bits und Stücke, die dem Browser mehr Informationen über ein HTML-Element geben , wie es angezeigt wird und welche Funktionalität hinzugefügt werden soll. Wir schreiben Attribute in das öffnende Tag eines HTML-Elements, wir verwenden Attribute, um Elemente zu stylen, um dem Browser mitzuteilen, wohin er gehen soll, wenn Sie auf einen Link klicken, welche Datei ein Bildelement anzeigen soll und vieles mehr. Ein Attribut besteht aus einem Namen, einem Gleichheitssymbol und einem Wert, der in einfache oder doppelte Anführungszeichen umschlossen ist. Sie werden sie die ganze Zeit verwenden, wenn Sie HTML schreiben. Okay, du verstehst HTML in der Theorie jetzt, im nächsten Video wirst du anfangen, es zu schreiben. 4. HTML schreiben: Was ist eine Webseite? Einfach gesagt, es ist ein Dokument, das eine Mischung aus HTML-, CSS- und JavaScript-Codierungssprachen enthält . Ein Browser interpretiert diese Sprachen und zeigt etwas visuelles und interaktives für den Menschen an. Eine Website ist also eine Sammlung von Webseiten, die oft miteinander verwandt sind. Lassen Sie uns unsere erste Webseite erstellen und etwas HTML schreiben. Wir werden sehen, was unser Code-Editor kann, wozu Chrome fähig ist und wie Git und GitHub funktionieren. Beginnen wir, indem wir auf GitHub Desktop gehen und unser erstes Repository erstellen. Ein Repository ist, wo wir alle unsere Dateien für ein Codierungsprojekt aufbewahren. Es ist im Grunde ein Ordner, den GitHub verwaltet und überwacht. Um eine zu erstellen, gehen Sie zu Datei und klicken Sie auf „Neues Repository“. Wir rufen ein Repository oder Repo, Cartoon-Held. Die Beschreibung kann sein, „mein Lieblings-Cartoon-Held“. Später in der Klasse beginnen wir, unsere HTML- und CSS-Dateien für unseren Cartoon-Helden oder Filmcharakter hinzuzufügen . Jetzt ist der lokale Pfad, wo Sie dieses Repository auf Ihrem Computer speichern möchten. Ich werde meine auf meinem Desktop installieren, aber Sie können wählen, wo immer Sie wollen. Sie können das Repo mit einem README initialisieren oder nicht. Sie müssen nicht und müssen sich keine Sorgen um gitignore oder Lizenzoptionen machen. Lassen Sie uns dieses Repository erstellen. Sie werden sehen, dass wir jetzt einen Cartoon-Hero-Ordner auf unserem Desktop haben. Dies ist unser Repository-Ordner. Sobald Sie Ihr Repository erstellt haben, können Sie mit dem Schreiben von HTML beginnen. Der einfachste Weg, dies zu tun, ist, zum Repository zu gehen und wählen Sie „ Im Finder anzeigen“, und ziehen Sie dann diesen Cartoon-Hero-Ordner in erhabenen Text. Das erste, was ich tun werde, ist, dass ich dieses Fenster ein wenig größer machen werde, also werde ich „Alt-Option“ halten und auf die „Grüne Schaltfläche“ klicken, dann werde ich anfangen, meine HTML-Elemente zu schreiben. Die erste, die ich schreiben werde, ist meine Überschrift ein Element. Lasst uns das öffnende Tag schreiben. Ich schreibe etwas Inhalt: „Hey. Ich bin eine große Überschrift, „und dann schreiben wir das schließende Tag. Sie haben vielleicht bemerkt, dass Erhabenes nichts Schickes getan hat. Der Grund dafür ist, dass es immer noch sieht, was wir schreiben als Klartext. Sie können hier unten rechts sehen, es steht „Klartext“. Der einfachste Weg, um zu erkennen, dass wir HTML schreiben, besteht darin, die Datei als HTML-Datei zu speichern. Gehen Sie zu Datei und wählen Sie dann „Speichern unter“. Ich werde dies als test.html speichern, was es zu einer HTML-Datei macht. Ich drücke „Speichern“ und dann sehen Sie, dass das Dokument etwas Farbe enthält. Wenn wir unser nächstes Element schreiben, das ein Absatzelement sein wird, werden Sie sehen, dass, wenn ich p tippe, eine ganze Reihe von Optionen erscheint. Dies sind die Vorschläge, die sublimiert uns gibt. Sie können „Down“ drücken, Sie können „Up“ drücken, und dann, wenn Sie „Return“ drücken, schreibt es den Rest des öffnenden Tags und das schließende Tag aus und bringt den Cursor genau dorthin, wo er sein muss. Hier kann ich sagen: „Hey. Ich bin ein Absatzelement. Cool, huh“ Alles klar. Das nächste Element ist Link-Elemente, oder was wir ein Ankerelement nennen, also lasst uns das schreiben. Ich drücke „Return“ und erhabener Text wird eine ganze Reihe von Sachen für uns tun. Eines der Dinge, die es tut, ist es uns ein href Attribute gibt. Das ist wirklich wichtig, wenn es um Ankerelemente geht. Es bedeutet, dass wir angeben können, wo ein Benutzer genommen werden soll, wenn sie auf den Link klicken. Wir können zu Google https://google.com gehen, und dann kann der Inhalt sein, „Klick mich, ich bin ein Link“. In Ordnung. Wir haben jetzt drei Elemente. Lassen Sie uns die Datei speichern oder Sie können „Command S“ oder „Control S“ drücken, und lassen Sie uns zu unserem Finder gehen und ziehen Sie die Test-HTML-Seite in Google Chrome, um eine Vorschau anzuzeigen. Nun, das ist unsere Webseite, die ziemlich cool ist. Sie werden sehen, dass das h1, dieser Absatz und das Ankerelement alle sehr unterschiedlich aussehen. Dies ist, was der Browser tut, wenn wir anfangen HTML zu schreiben. Es ist fantastisch. Jetzt ist das Tolle an Chrome seine Entwickler-Tools. Eines der Dinge, die wir verwenden können, ist das Element und Spektrum. Sie gehen zu Ansicht, Entwickler und wählen Entwicklertools. Auf der rechten Seite, und manchmal unten, sehen Sie Ihren Elementinspektor. Wenn Sie den Mauszeiger über ein Element bewegen, sehen Sie, dass es auf der linken Seite hervorgehoben ist. Es zeigt Ihnen die Breite, die Höhe und gibt Ihnen einige Informationen über die Ränder. Das Tolle daran ist, dass Sie auf einen Tag-Namen doppelklicken können und dann einen neuen angeben können. Einfach so, drücken Sie „Return“. Auf der linken Seite wird Ihre Webseite aktualisiert. Sie können auch auf den Inhalt doppelklicken und das bearbeiten, was fantastisch ist. Sie können auch auf ein Element klicken und „Rücktaste“ drücken, und es ist weg, es ist gelöscht. Jetzt können Sie dies auf jeder Webseite tun, die Sie mögen. Sie können die Elemente überprüfen, Sie können sie bearbeiten, Sie können sie löschen, aber keine Sorge, es nimmt nur Änderungen an Ihrer Browserversion dieser Seite vor. Wenn Sie sich erfrischen, wird alles wieder so zurückgehen, wie es war. Dieser Test dieses Links funktioniert tatsächlich. Ja. Da gehen wir. Es führt uns zu Google. Aber dann, um zurück zur Seite zu kommen, muss ich die Zurück-Taste drücken. Wie öffnen wir es in einem neuen Tab? Gehen wir zurück zu erhabenen Text, und wir können ein neues Attribut in hier genannt Ziel hinzufügen. Wenn wir einen Wert von _blank angeben, wird es in einer neuen Registerkarte geöffnet. Lassen Sie uns diese speichern und gehen Sie zurück zu Chrome, aktualisieren, und klicken Sie dann auf diesen Link, und ta ta ta, es öffnet sich in einer neuen Registerkarte. Jetzt können Sie das schließen und dann sind wir wieder auf unserer Website. Ein weiteres großartiges Attribut, das wir zu einem Ankerelement hinzufügen können, ist das title-Attribut. Wenn Sie schreiben Titel und geben Sie ihm einen Wert, so etwas wie: „Gehen wir zu Google.“ Es gibt dem Benutzer einige Informationen, wenn er darüber schwebt. Gehen wir zu Chrome, lassen Sie uns aktualisieren und bewegen Sie den Mauszeiger über diesen Link. Sie werden sehen, dass dieses kleine Pop-up, das sagt: „Gehen wir zu Google.“ Dies hilft bei der Benutzererfahrung. Jetzt haben wir ein wenig HTML-Codierung gemacht. Gehen wir zurück zu GitHub und sehen, was hier passiert ist. Es wurde aufgegriffen, dass wir eine neue Datei erstellt haben. Was wir hier tun werden, ist, dass wir sagen, erstellen test.html. Wir werden das dann an den Master übergeben, und was wir gerade getan haben, ist GitHub zu bitten, sich daran zu erinnern, was wir geändert haben. Sie können alle Änderungen auf der Registerkarte Verlauf anzeigen. Nun, wählen wir die Registerkarte Änderungen erneut und machen einige weitere HTML-Codierung. Gehen wir zurück in den erhabenen Text. Ich möchte, dass dieses Absatzwort fett ist. Die Art und Weise, die wir tun, ist es mit fett Elemente umschließen, und ein fett Elemente Tag Name ist nur b. Wenn wir dies speichern und gehen Sie zurück zu Chrome und aktualisieren, Sie werden sehen, dass der Absatz Wort ist jetzt fett. Wenn Sie in irgendeiner Weise mit der rechten Maustaste auf eine Seite klicken, können Sie sie überprüfen, wodurch dann ein Drilldown zu diesem Element im Elementinspektor ausgeführt wird, und es wird hervorgehoben. Wenn wir dann auf das große Tag doppelklicken und wir ändern dies in I, was für kursiv oder kursiv steht und drücken Sie „Return“, werden Sie sehen, dass Absatz jetzt kursiv dargestellt ist. Der Grund, warum ich Ihnen das zeige, ist, dass Sie nicht eine ganze Reihe von CSS kennen müssen , um Dinge fett zu machen, Dinge zu Überschriften zu bekommen, um Dinge auf einer HTML-Seite ein bisschen anders aussehen zu lassen. Die nächste Sache ist ein Bildelement. Gehen wir zurück zu Sublime Text und fügen Sie ein Bildelement hinzu. Um ein Bildelement zu schreiben, geben wir img ein, ich werde „Return“ drücken, und Sublime Text wird mir ein Quellattribut zum Ausfüllen geben. Es wird mir auch kein schließendes Tag geben, und das ist eine Ausnahme von der Regel. Ein Bildelement hat kein schließendes Tag, da Sie nichts darin einfügen können. Nun wird erwartet, dass wir dem Bild eine Datei geben, die im Quellattribut angezeigt wird. Woher bekommen wir diese Akte? Nun, gehen wir zu Chrome und laden wir ein Bild herunter. Lassen Sie uns eine neue Registerkarte öffnen, können Sie nach Katze suchen, denn im Internet dreht sich alles um Katzen. Wir gehen zum Tab Bilder und klicken Sie hier auf dieses Bild. Wenn wir nun mit der rechten Maustaste klicken und sagen, „Bild in neuem Tab öffnen“, was wir hier haben sind zwei verschiedene Möglichkeiten, dieses Bild anzuzeigen. Die erste Option ist, dass wir mit der rechten Maustaste klicken können und wir sagen „Bild speichern unter “, dann erstellen wir einen neuen Ordner namens img. Dann speichern wir in diesem IMG-Ordner dies als cat.jpeg, speichern. Vielen Dank. Lassen Sie uns das schließen und innerhalb von Sublime Text, im Quellattribut, geben wir img/cat ein. jpeg. Lassen Sie uns speichern, gehen Sie zurück zu Chrome, gehen Sie zurück zu unserer Test-HTML-Seite, wir werden hier aktualisieren. Da ist unser Katzenbild, es kommt aus unserem lokalen Dateisystem, und dies wird als relative URL bezeichnet. Die andere Möglichkeit, dies zu tun, ist mit einer absoluten URL. Wenn wir zu diesem Tab zurückkehren, werden Sie sehen, dass es diese wirklich lange URL gibt. Dies ist eine absolute URL. Wenn wir dies nochmals eingeben, wird es uns zu diesem Bild bringen, und dieses Bild wird irgendwo im Internet gespeichert. Wir kopieren diese URL und gehen zu Sublime Text, und fügen sie dann in unsere Quellattribute ein. Speichern Sie dies, gehen Sie zurück zu Chrome, gehen Sie zurück zu unserer Testseite und aktualisieren Sie, nichts wird sich geändert haben. Aber Sie werden sehen, dass das Quellattribut jetzt dieses Bild hat, das sich irgendwo im Internet befindet. Das sind die beiden Möglichkeiten, eine Datei an ein Bildelement zu liefern, wird die gleiche Theorie auf ein paar andere Elemente später in der Klasse anwenden. Nun, was ich hier versuchen möchte, ist, diese test.HTML in etwas Unterschied zu ändern. Wie machen wir das? Nun, wir müssen tatsächlich ein Titelelement schreiben und es in die Kopfelemente unserer Seite einfügen. Sie können auf der rechten Seite des Elements in Spektren sehen , dass es ein „html“ -Element, „head“ -Element und das „body“ -Element gibt, aber wir haben keines davon geschrieben. Um dies zu überprüfen, kann ich Ihnen zeigen, was der Browser sieht. Wir gehen zu View Developer und View Source, und das ist, was es hat. Es sieht kein HTML, einen Körper oder ein Kopfelement. Was ist hier los? Schließen wir das und kommen zurück zu diesem Elementinspektor. Diese HTML-, Kopf- und Körperelemente werden von Chrome gekauft, weil wir sie ausgelassen haben. Es ist ziemlich intelligent und ziemlich cool. Es ist jedoch empfehlenswert, diese Elemente in unsere HTML-Seite zu integrieren. Gehen wir und machen das. Innerhalb von Sublime Text, das erste, was ich tun werde, ist tatsächlich den Doctype zu schreiben, und dies sagt dem Browser genau, welche Version von HTML wir schreiben. Lassen Sie uns für kleiner als, ein Ausrufezeichen gehen, geben Sie DOCTYPE in Großbuchstaben ein, und geben Sie dann an, was der Doctype ist und es ist HTML. Dann schließen wir es ab. Was wir hier sagen, ist, dass wir ein HTML 5 schreiben, das ist die neueste und beste HTML. Es ist auch zufällig wirklich kurz, was für uns großartig ist. Das nächste, was ich tun werde, ist mein HTML-Element auszuschreiben. Wenn ich nun „Return“ hier drücke, macht es eine Menge Arbeit für mich. Ich werde hier Befehle drücken und das alles ein bisschen mehr manuell ausschreiben. Nun, ich schreibe das schließende Tag für HTML, das erhabene uns mit ziemlich viel geholfen hat, dann schreibe ich meine Kopf-Elemente. Das Kopf-Element ist, wo wir alle unsichtbaren Elemente auf unserer Seite speichern und eines davon sind die Titelelemente. Wir können dies auf Testseite ändern, und das ist das einzige, was ich in mein Kopfelement setzen werde. Die nächste sind die Körperelemente. Jetzt ist das Körperelement, wo wir alle über sichtbaren Inhalt speichern. Ich schneide dieses schließende Tag aus und füge es kurz vor dem schließenden HTML-Tag ein. Dann wähle ich den gesamten Inhalt aus und drücke Tab und verdichte ihn, und der Grund, warum ich dies tue, ist, weil es einfacher zu lesen ist und es einfacher ist, Sinn zu machen. Sie können verstehen, welche Boxen in welche Boxen gehen. Lassen Sie uns dies speichern und gehen Sie zu Google Chrome und aktualisieren Sie erneut, und Sie werden sehen, dass sich hier nichts viel geändert hat, aber wir haben jetzt einen Titel auf unserer Registerkarte der Testseite. Fantastisch. Wir wählen dann wieder View Developer und View Source, Sie werden sehen, dass es jetzt eine ganze Reihe mehr Elemente zum Arbeiten hat, was fantastisch ist. Lassen Sie uns das schließen und ich zeige Ihnen ein anderes Element. Dieses Element ist ein Zeilenumbruchelement. Lassen Sie mich dies in Sublime Text demonstrieren. Direkt über dem Bild erstelle ich ein weiteres Absatz-Tag, und in diesem Absatz-Tag werde ich sagen, „Mein Name ist“, aber ich möchte dies auf eine neue Zeile setzen. Sie können erwarten, dass Sie die Eingabetaste drücken und den Namen der Katze eingeben können. Kitty Katze, ganz originell. Ich drücke „Speichern“ gehe dann zurück zu Chrome, Aktualisieren. Wir haben das Absatz-Tag, aber es gibt keinen Zeilenumbruch. Warum hat das nicht funktioniert und wie bringen wir es zum Laufen? Der Grund, warum es nicht funktioniert hat, ist, dass alle Leerzeichen, irgendwelche Rückgaben, Leerzeichen, sie alle nur als ein Leerzeichen in HTML gesehen werden. Um es auf eine neue Zeile zu bekommen, müssen wir ein Zeilenumbruchelement einfügen. Lassen Sie uns zu Sublime Text gehen und wo es einen Zeilenumbruch hier gibt, geben wir einfach ein br Elemente ein. Auch hier ist dies eine Ausnahme von der Regel, es gibt kein schließendes Tag, da Sie nichts darin einfügen können. Lassen Sie uns das speichern, gehen wir zurück zu Chrome und Refresh und da gehen wir. Es steht auf einer neuen Linie. Wir haben eine Reihe von Änderungen vorgenommen. Jetzt können wir zurück zu GitHub Desktop gehen, und Sie werden sehen, dass die Datei test.html diesen gelben Punkt enthält, und diese cat.jpeg hat dieses grüne Plus darauf. Auf der test.html können Sie sehen, dass es ein paar Zeilen wegnimmt und dann noch ein paar Zeilen hinzufügt. Wenn Sie eine Datei festschreiben und erhalten, wird sie sich daran erinnern, was Sie entfernen und sich daran erinnern, was Sie hinzufügen. Die Zusammenfassung ist in diesem Zeitpunkt noch nicht ausgefüllt. Was wir tun werden, ist sagen „Katzenbild hinzugefügt und einige weitere Elemente.“ Sie können eine Beschreibung hinzufügen, wenn Sie möchten, aber ich mache das nur, wenn es viele Änderungen gibt und ich wirklich explizit darüber sein muss, was ich gerade getan habe. Dann verpflichten wir uns, zu meistern. Sie können den Verlauf der Änderungen erneut anzeigen, indem Sie auf die Registerkarte Verlauf gehen. Das ursprüngliche war unsere anfänglichen Commits, dann haben wir die Datei test.html erstellt, und dann haben wir ein Katzenbild und ein paar weitere Elemente hinzugefügt. Nun, was auch großartig daran ist, dass, in Sublime Text, wenn Sie anfangen, Änderungen wie „Ich bin eine große Überschrift, schau mich an“ zu machen, und dann wirst du sehen, dass es diese kleinen Punkte gibt, die erscheinen. Das bedeutet, dass die Datei geändert wurde und erhabene dies aufgreift , weil es mit Git arbeitet, um Sie über diese Änderungen zu informieren. Sie haben gerade Ihr erstes HTML-Bit geschrieben. Ich schlage vor, dass du Faust die Luft stürmst oder rauslasst, nächstes veröffentlicht es online für die ganze Welt zu sehen. 5. Deine Website online stellen: Wir haben ein paar Befehle ausgeführt und das ist fantastisch. Aber wenn etwas mit unserem Computer passiert, wie Blitzschläge überhaupt, verschütten wir Ingwerbier darauf, dann wird unser Computer zerstört, all unser Code wird verloren gehen. Wir müssen unseren Code und Commits mit GitHub.com synchronisieren , damit unser Code online gesichert wird. Während wir dabei sind, veröffentlichen wir unsere Website für die Welt zu sehen. Ja. Gehen wir zu Chrome und richten Sie ein GitHub-Konto ein. Ich öffne einen neuen Tab, gehe zu GitHub.com und dort kannst du dich anmelden. Ich werde für TTKB als meinen Benutzernamen gehen, und meine E-Mail kann richplus1@taptapkaboom.com sein, mein Passwort wird ein Geheimnis sein. Klicken Sie dann auf Für GitHub registrieren. Das erste, was Sie tun müssen, ist Ihr Konto zu überprüfen. Lass uns das machen und du musst das Ding klarstellen. Da gehen wir. Dieser Prozess kann sich von Zeit zu Zeit ändern. Wenn es nicht genau so ist, wenn Sie sich anmelden, dann betonen Sie nicht. Ich bin ein Up für ein kostenloses Konto, ich benutze immer noch ein kostenloses Konto für mich. Blättern Sie nach unten. Ich brauche keine Hilfe beim Einrichten einer Organisation und ich möchte keine Updates von GitHub. Ich drücke Weiter, und ich scrolle zurück nach oben. Wie hoch ist Ihre Programmiererfahrung? Neu in der Programmierung? Wofür planen Sie GitHub zu verwenden? Lernen Sie zu programmieren? Ja. Ein Projekt posten? Ja. Erstellen einer Website mit GitHub Pages? Ja. Dann kann ich meine Interessen überspringen und dann einreichen. Dieser Schritt ist wirklich wichtig. Sie müssen Ihre Email-Adresse bestätigen. In Ihrem Posteingang sehen Sie so etwas. Tippen Sie einfach auf die Schaltfläche E-Mail-Adresse bestätigen. Da gehen wir. Es wird besagen, dass Ihre E-Mail verifiziert wurde. Dann sollten Sie eine E-Mail erhalten, die Sie auf GitHub begrüßt. Willkommen bei GitHub, TTKB. Dann hat es eine ganze Reihe von Sachen, auf die Sie klicken können. Fantastisch. Wenn Sie so weit sind, haben Sie Ihr GitHub-Konto zu 100 Prozent korrekt eingerichtet. Sobald Sie sich bei GitHub.com angemeldet und Ihre E-Mail-Adresse verifiziert haben, gehen Sie zurück zu GitHub Desktop, klicken Sie dann auf GitHub Desktop und gehen Sie zu Einstellungen. Dann möchten Sie sich bei GitHub.com anmelden. Geben Sie Ihren Benutzernamen oder Ihre E-Mail-Adresse ein, und geben Sie dann Ihr Kennwort ein. Klicken Sie dann auf Anmelden. Nachdem Sie sich angemeldet haben, können Sie auf Repository veröffentlichen klicken. diesen Prozess durchlaufen, werden dann Ihren Code und Ihre Änderungen mit GitHub.com synchronisiert . Der Name sieht richtig aus, die Beschreibung sieht richtig aus. Aber wir wollen diesen Code nicht privat halten, weil wir später unsere Websites als GitHub-Seite veröffentlichen wollen, die die ganze Welt sehen kann, und wir können das nicht tun, wenn es privat ist. Sobald wir diese Informationen doppelt überprüft haben, klicken Sie auf Repository veröffentlichen. Da gehen wir. Sie sollten mit GitHub.com synchronisiert werden. Nun, um zu überprüfen, gehen Sie zu Chrome, gehen Sie zu GitHub.com. Stellen Sie sicher, dass Sie die Seite aktualisiert haben. Sie sollten Ihren Bericht auf der linken Seite sehen. Lassen Sie uns darauf klicken und Sie werden mit Ihrer GitHub-Berichtsseite angezeigt. Es ist eine ganze Menge hier los. Aber was ich möchte, dass Sie tun, ist auf die Registerkarte Einstellungen gehen und nach unten scrollen, bis Sie zu GitHub Pages gelangen. Wählen Sie dann Ihre Quelle aus und wählen Sie den Master-Zweig aus. Dadurch wird die Seite aktualisiert. Scrollen Sie dann erneut nach unten zu GitHub Pages. Sie werden sehen, dass Ihre Website bereit ist, unter dieser URL veröffentlicht zu werden. Klicken Sie dann auf diese URL und Sie sollten eine 404-Seite finden. Das ist normal und ist vollkommen in Ordnung. Die nächste Sache ist, test.html nach Ihrer URL einzugeben . Dann drücken Sie die Eingabetaste und dann gehen wir. Sie sollten Ihre Testseite mit Mr. Kitty Cat sehen. Jetzt können Sie diese URL mit der ganzen Welt teilen. Was wirklich cool ist, ist, dass, wenn Sie zurück zu erhabenem Text gehen und etwas HTML aktualisieren, wie hey, „Ich bin eine große fette Überschrift“ und Sie das speichern, dann gehen Sie zurück zu GitHub Desktop, Sie werden die Änderungen sehen, die wir aber dann fügen Sie Ihre Zusammenfassung hinzu. Sie verpflichten sich zu meistern, und dann drücken Sie wieder zum Ursprung. Wenn Sie zum Ursprung drücken, wird diese Seite automatisch online aktualisiert, damit alle sehen können. Es ist wirklich, wirklich cool und kraftvoll. Sie haben gerade Ihre erste Website veröffentlicht, die die Welt sehen kann und sie ist sicher mit GitHub.com synchronisiert. Jedes Mal, wenn Sie Ihren Code und Push-Ursprung auf GitHub aktualisieren, wird Ihre Website aktualisiert. Sie sind auf dem Weg, das Internet zu übernehmen. Als Nächstes lernen Sie alles über CSS. 6. Was ist CSS?: Wir haben etwas HTML geschrieben, aber es sieht nicht hübsch aus. Hier kommt CSS ins Spiel. Grundsätzlich lässt das CSS, das wir schreiben, unser HTML gut aussehen , indem langweilige Standardstile vom Browser überschrieben werden. Wir schreiben CSS, um dem Browser zu sagen, wie HTML-Elemente aussehen sollen. Dazu schreiben wir einen Eigenschaftsnamen und einen Wert, durch einen Doppelpunkt getrennt ist und mit einem Semikolon endet. Wir können ein Element mit so vielen Eigenschaftenpaaren gestalten, wie wir möchten. Es gibt Tonnen von Eigenschaften, die Sie schreiben können, um zu ändern, wie ein Element aussieht und sich fühlt. Eigenschaften wie Breite, Höhe , Hintergrundfarbe, Schriftfamilie, Schriftgröße und eine ganze Reihe mehr. Jetzt gibt es zwei Methoden, CSS zu schreiben. Die erste ist die Verwendung von Inline-Stilen, in denen wir ein Element mit seinen Stilattributen stylen. Die zweite ist durch die Verwendung von Rule Sets, wo wir Elemente zu Stil auswählen, gefolgt von den CSS-Eigenschaften und Werten für diese Elemente. Wir werden diese beiden Methoden in der nächsten Lektion behandeln. 7. CSS schreiben: In dieser Lektion behandeln wir das Schreiben von CSS mit Inline-Stilen und Regelsätzen. Es ist am besten zu erklären, indem Sie in Code einsteigen. Also in erhabenem Text, lassen Sie uns eine neue Datei erstellen und dann speichern wir diese Datei als neue HTML-Datei. Ich nenne es style-test.html und dann werde ich das speichern. Da Sublime weiß, dass es sich um eine HTML-Datei handelt, werde ich anfangen, mein HTML-Tag zu schreiben und dann die Eingabetaste zu drücken, wenn es mir vorschlägt. Es ist nur eine ganze Reihe von HTML für mich geschrieben, was fantastisch ist. Ich werde diesem Dokument einen Titel des Style-Tests geben und dann werde ich in meinen Körper gehen und anfangen, einige HTML-Elemente zu schreiben. Ich werde mit ein paar h ein Elemente beginnen, und ich nenne sie Überschrift eins - eins und dann kopiere ich das und füge es zweimal ein, überschrift eins - zwei, überschrift eins - drei und dann, was ich tun werde ist, ich werde ein h zwei erstellen und dasselbe tun Ding hier. Überschrift zwei - eins, Überschrift zwei - zwei, Überschrift zwei - drei. Ich werde das speichern und ich gehe in meinen Finder und ziehe den Style-Test in Google Chrome. So sieht es standardmäßig aus, drei Überschrift eins und drei Überschrift zwei. Jetzt werde ich anfangen, sie zu stylen. Also, innerhalb von Sublime Text auf meinem ersten h ein Element, werde ich ein Stil-Attribut hinzufügen, und innerhalb von hier kann ich beginnen, meine Eigenschaftsnamen und Wert-Paare hinzuzufügen. Also das erste, was ich tun werde, ist für eine Schriftgröße zu gehen, also Schriftgröße, drücken Sie Return. Lassen Sie uns für etwas wie 30 Pixel gehen, und dann möchte ich eine Farbe hinzufügen, so werde ich für Farbe gehen und es ist auf die amerikanische Weise buchstabiert. Alles in HTML und CSS wird amerikanisch geschrieben, nur damit Sie wissen, ein Doppelpunkt, was ist ein Farbwert? Nun, es gibt ein paar Möglichkeiten, Farbe in CSS zu machen, ich zeige Ihnen zwei in dieser Lektion. Gehen wir also zu Google Chrome. Öffnen wir einen neuen Tab und geben Sie htmlcolorcodes.com ein. Auf dieser Website gibt es ein paar Möglichkeiten, Farben zu erhalten. Scrollen wir ein bisschen nach unten und hier haben wir einen wirklich schönen Farbwähler. Es sieht viel wie ein Farbwähler aus, den Sie in Photoshop oder Design-App finden. Wenn Sie also mit Photoshop oder so etwas vertraut sind, verwenden Sie es stattdessen dort, wenn Sie möchten. Jetzt ist dies der einfachste Weg, um eine Farbe auszuwählen. Sobald Sie mit der Farbe zufrieden sind, die Sie haben, können Sie doppelklicken und diesen Wert kopieren. Sie können zu Sublime Text zurückkehren und ihn einfügen. Denken Sie daran, danach ein Semikolon zu setzen, und Sie werden sehen, dass dies ein Hex-Code-Wert ist und dieses Hash-Symbol vor dieser Zahl hat. Also, wenn wir dies speichern und zurück zu Google Chrome, wir können dann aktualisieren und Sie werden sehen, dass unsere Überschrift eins - eine hat jetzt eine Farbe und eine Schriftgröße. Eine andere Möglichkeit, Farben in CSS zu machen, besteht darin, Farbnamen zu verwenden. Wenn Sie nun zurück zur HTML-Farbcode-Website gehen und ein wenig nach unten scrollen, bis Sie zu diesen Farbnamen gelangen, scrollen Sie ein wenig weiter und klicken Sie dann auf die vollständige Liste durchsuchen. Scrollen Sie dann erneut nach unten und was Sie hier sehen werden, ist, dass es ein paar Namen gibt , denen verschiedene Farbwerte zugewiesen wurden, und manchmal sind diese viel einfacher zu merken als Hex-Code-Werte. Also, wenn ich mich an Lachs erinnere und ich bin in Sublime Text, und anstelle dieser Farbe, tippe ich einfach Lachs und ich speichere, dann gehe zurück in Google Chrome und dann aktualisiere hier, du wirst sehen, dass die Farbe auftaucht, was hübsch ist handlich. Also werde ich diese Farbnamen in diesem Video verwenden, nur um es wirklich einfach zu halten. Jetzt zurück in Sublime Text, was ich tun möchte, ist, dass ich alle diese Überschriften auf die gleiche Weise formatieren möchte. Also, was ich tun werde, ist, ich wähle die Stil-Attribute, die ich kopieren werde, und dann werde ich es immer wieder und immer wieder einfügen. Dann werde ich retten. Ich gehe zurück zu Chrome und aktualisieren Sie hier, und da gehen wir, alle unsere Überschriften sehen jetzt genau gleich aus. Das ist wirklich cool, weil es bedeutet, dass unsere Überschrift eins, die wirklich groß sein sollen, jetzt auch die gleiche Größe haben kann wie unsere Überschrift zwei. Jetzt möchte ich meine Überschrift zwei etwas anders gestalten. Also werde ich zu Sublime Text gehen und dann meine h zwei, lassen Sie uns die Schriftgröße auf etwa 20 Pixel ändern und die Farbe, ich werde für Hot Pink gehen. Dann werde ich diese Werte hier auswählen und kopieren und auf die anderen h zwei Elemente einfügen. Ich werde dann speichern, gehen Sie zurück zu Chrome und aktualisieren. Jetzt kann ich sehen, dass die Überschrift zwei Elemente etwas anders sind. Wenn Sie es jetzt noch nicht aufgenommen haben, kann sich das Kopieren und Einfügen dieser Werte in Sublime Text ein wenig wiederholend anfühlen. Außerdem gibt es eine Menge CSS hier, im Vergleich zu wie viel HTML und wie viel Inhalt tatsächlich hier ist und Sie beginnen, all diese verschiedenen Zeilenumbrüche passieren Mann zu bekommen , es ist ein wenig chaotisch. Was ich hier tun möchte, ist, vom Inline-Styling zum Regelset-Styling zu wechseln. Eine der Möglichkeiten, wie wir dies tun können, besteht darin, ein Stil-Element innerhalb des Kopf-Elements zu erstellen. Lassen Sie uns ein Style-Element erstellen und Sie werden sehen, dass Sublime uns ein Attribut vom Typ Text CSS gibt. Wir brauchen das nicht unbedingt, aber es ist wirklich gut, spezifisch zu sein. Jetzt, innerhalb dieses Style-Elements, können wir beginnen, einige CSS-Styling zu tun. Also, was ich zuerst tun werde, ist meine h one Elemente zu stylen und wie ich dies mache, ist, indem ich alle h one Elemente und dann deklariere, dass alle h one Elemente eine Schriftgröße von 30 Pixel haben sollten. Dann mache ich noch eine Erklärung, dass alle Hs eine Farbe von Lachs haben sollten. Nun ist dies das Äquivalent zu diesem Attribut und seinem Wert für alle drei der h eine-Elemente. Also werde ich diese Attribute so entfernen. Nun, was dies heißt, ist ein Regelsatz. Dies ist Ihre Selector-Anweisung, die eine Reihe von Elementen zum Stil abzielt. Dann innerhalb dieser geschweiften Klammern befindet sich Ihr Deklarationsblock, und jede Zeile wird als Deklaration mit einer Deklarationseigenschaft und einem Wert bezeichnet. Lassen Sie uns das speichern und dann gehen wir zu Google Chrome und aktualisieren, und nichts ist passiert. Aber überprüfen Sie dies, wenn wir mit der rechten Maustaste klicken und diese Elemente überprüfen, werden Sie jetzt sehen, dass es dieses Element Inspektor Panel gibt, und dann gibt es eine Reihe von CSS-Eigenschaften unten hier drüben. Sie werden sehen, dass dieser h eine Schriftgröße von 30 Pixel und eine Farbe von Lachs hat. Wenn wir also die Schriftgröße ändern wollten, würden wir auf den Schriftgrößenwert klicken und ihn in etwa 50 Pixel ändern, würde es alle ändern. Wenn Sie nun auf dieses h zwei Elemente geklickt haben und die Schriftgröße ändern möchten, können Sie dies auf 50 Pixel ändern, aber nur eines von ihnen würde sich ändern. So können Sie die Unterschiede zwischen Inline-Styling und Regelsatz-Styling direkt hier sehen. Jetzt, wenn wir unsere Seite aktualisieren, geht alles wieder normal. Also, wenn wir zurück zu Sublime Text und wir wollen unsere Farbe zu vielleicht etwas wie Teal ändern . Sie können sehen, wie schnell das mit dem Kopieren und Einfügen zwischen den verschiedenen Elementen verglichen wurde . Also werde ich das speichern und zu Chrome zurückkehren und aktualisieren. Jetzt lassen Sie uns auf Styling gehen ist h two mit Regelsätzen auch. Also, was ich tun werde, ist ein weiterer Regelsatz zu erstellen. Ich werde alle h zwei Elemente auswählen und dann werde ich eine Erklärung machen , dass alle h zwei Elemente eine Farbe rot haben sollten. Dann werde ich retten. Dann gehen wir zurück zu Chrome und aktualisieren, und was ist hier passiert? Das ist eine wirklich gute Frage. Also, wenn wir dieses h zwei Element inspizieren, werden Sie sehen, dass der h two Stil kommt durch, aber es ist durchgestrichen und stattdessen, diese Farbe von Hot Pink hat Vorrang. Warum passiert das? Nun, die Grundidee hier ist, dass der spezifischere Stil Vorrang hat. Was hier passiert ist, ist, dass wir alle zwei sagen, wir wollen, dass Sie eine rote Farbe haben. Aber was auf den eigentlichen Elementen passiert, ist, dass wir den Elementen sagen, dass es eine Farbe von Hot Pink hat, was bedeutet, dass es spezifischer ist, weil nur dieses Element eine Farbe von Hot Pink haben wird. Das bedeutet also, wenn wir die Farbe von Hot Pink deaktivieren, wird es dann eine Farbe von Rot haben, was ziemlich interessant ist. Wenn wir zurück zu Sublime Text gehen und nach unten scrollen und alle Farbdeklarationen aus den Inline-Stilen entfernen, was denkst du dann passieren wird? Gehen wir zurück zu Chrome, lassen Sie uns aktualisieren und da gehen wir. Alle unsere zwei Überschriften sind jetzt rot, aber sie haben immer noch eine Schriftgröße von 20 Pixeln. Wenn Sie also Inline-Styling und Regelsatz-Styling machen, kombinieren sie sich, sie schreiben sich nicht übereinander, es sei denn, es gibt einen Konflikt. Wenn es einen Konflikt gibt, denken Sie daran, dass der spezifischere Stil Vorrang hat. Gehen wir nun zurück zu Sublime Text und nehmen Sie diese Schriftgröße von 20 Pixeln heraus und setzen Sie sie in den h two Regelsatz, und dann können wir alle diese Stilattribute entfernen. Jetzt kann ich deutlich sehen, was los ist. Es ist viel besser. Nun, als ich Konflikte erwähnte, sprach ich über Inline-Styling-Verse Regelsatz Styling. Aber was passiert, wenn es einen Konflikt innerhalb des Regelsatz-Stylings gibt? Wenn ich hier ein weiteres H_2 schreibe und eine grüne Farbe setze, was passiert dann? Speichern wir das und finden es heraus. Ich werde hier aktualisieren, Sie werden sehen, dass die Schriftgröße immer noch gleich ist, aber es ist jetzt grün. Was passiert ist, ist, dass, wenn es zwei Stile gibt, die die gleiche Spezifität haben, der letzte geschrieben wurde Vorrang hat. Sie können hier sehen, dass Stil Test HTML Zeile 16 sagt. Dieser war Stil Test HTML Zeile 11. Derjenige, der zuletzt geschrieben wurde, hat dann Vorrang. Aber was ist, wenn wir wollen, dass einige dieser Elemente anders sind? Eine Möglichkeit, ein oder mehrere Elemente Unterschied zu machen besteht darin, einem Element eine Klassenattribute zu geben und dann Elemente mit dieser Klasse anders zu stylen. Gehen wir in Sublime Text und tun das. Wenn wir zu diesem H1 in der Mitte gehen und ihm eine Klasse von groß geben, und wir kopieren und fügen diesen Stil auf dieses H_2 und das letzte H_2, speichern wir dies, wir gehen zurück zu Chrome, wir aktualisieren. Es ist nichts passiert. Also macht die Klasse von Big nichts. Was wir tun müssen, ist tatsächlich einige Stile für diese Klasse zu schreiben. Gehen wir zurück zu Sublime Text und direkt unter diesem H_2, werden wir unseren Selektor für alle Elemente mit einer Klasse von groß schreiben. Die Art und Weise, wie wir dies tun, ist, indem wir einen Punkt setzen und dann den Klassennamen setzen. Was das bedeutet, ist, dass wir alle Elemente mit einer Klasse von groß sagen, ich erkläre, dass Sie sollten, und was werden wir tun? Nun, lassen Sie uns die Schriftgröße auf etwa 60 Pixel einstellen. Dann werden wir diese speichern, gehen Sie zurück zu Chrome und aktualisieren. Sie werden hier sehen, dass nur die Elemente mit einer Klasse von groß diese riesige Schriftgröße hatten. Es spielt keine Rolle, ob es sich um ein H_1- oder H_2-Element handelt. Nun, wenn wir zu erhabenem Text zurückkehren und wir eine Klasse auf die erste von Großbuchstaben setzen, und dann kopiere ich das, und ich setze es auf dieses H_2 hier drüben, und dann, wenn ich Großbuchstaben kopiere und es zum ersten H_2 hinzufüge, was bedeutet, dass es zwei Klauseln haben wird, eine von groß und eine von Großbuchstaben und dann speichern. Dann schreibe ich einen Selektor für Großbuchstaben und dann einen Deklarationsblock und gebe ihm Text-Transformation von Großbuchstaben, und speichere das, gehe zurück zu Google Chrome und aktualisiere, du wirst sehen, dass alle Elemente mit einer Klasse von Großbuchstaben jetzt Großbuchstaben. Wenn wir dieses H_2-Element mit der Klasse von groß und groß wählen, können wir sehen, dass, weil es eine Klasse von Großbuchstaben hat, es eine Text-Transformation von Großbuchstaben hat. Dann, weil es eine Klasse von groß hat, hat es eine Schriftgröße von 60 Pixel. Dieses H_1, weil es eine Klasse von Großbuchstaben hat, hat es eine Texttransformation von Großbuchstaben. Dieses H_1, weil es eine Klasse von groß hat, hat es eine Schriftgröße von 60 Pixel. Das ist wirklich mächtig. Nun, was noch leistungsfähiger ist, ist in Sublime Text oder Ihrem Code-Editor, Sie können alle Elemente mit einer Klasse von Groß- und Großbuchstaben sagen, ich erkläre, dass Sie eine Farbe von Marine haben sollten. Mal sehen, was das tut. Wir speichern, wir gehen zurück zu Chrome, und aktualisieren, und Sie werden sehen, dass nur ein Element tatsächlich Farbe ändern wird, weil es das einzige Element ist, das eine Klasse von groß und groß ist. Die Idee von Selektoren ist wirklich mächtig und es kann wirklich komplex werden. Lassen Sie mich Ihnen ein weiteres Beispiel für einen wirklich coolen Selektor geben. In meinem ersten H_1 habe ich diese Wortüberschrift. Wie würde ich nur diese Überschrift eine andere Farbe machen? Was wir verwenden, ist ein Span-Element. Eine Spanne ist standardmäßig wie ein leeres Feld. Es hat keine Standardstile und erbt die Textstile von dem Element, in dem es sich befindet. Lasst uns Spanne schreiben, und dann, nachdem wir eins getroffen haben, schließen wir diese Spanne ein. Ich werde hier speichern, zu Google Chrome zurückkehren und aktualisieren, und nichts wird sich geändert haben. Nun, gehen wir zurück zu Sublime Text und lassen Sie uns eine andere Spanne außerhalb von hier schreiben und in span Element setzen. Ich werde das speichern, zu Chrome zurückkehren und aktualisieren. Es wird Standardtext sein. Es wird nichts Besonderes drauf haben. Sie werden sehen, dass diese Spannweite aussieht wie die Überschrift, in der sie sich befindet, und Sie werden sehen, dass diese Spannweite nicht wie irgendetwas aussieht. Sieh dir das an. Wenn wir alle Span-Elemente stylen und alle Span-Elemente sagen, möchte ich, dass Sie eine Farbe von Violett haben. Lassen Sie uns speichern, und gehen Sie zurück zu Chrome und aktualisieren. Sie werden sehen, dass dieses Spannelement und diese Spanne Elemente jetzt beide violett sind, was Sinn ergibt. Zurück in Sublime Text, wenn wir sagen würden, alle Span-Elemente innerhalb eines H_1 Farbe violett sein, können wir es wie folgt schreiben: H_1 Raum Spanne. Dann würden wir retten. Wir würden zurück zu Chrome und aktualisieren, und nur die Spanne, die innerhalb des H_1 ist, wäre violett, was wirklich, wirklich cool ist. Was wir hier gesehen haben, ist super mächtig. Zurück in Sublime Text fand ich ein ziemlich frustrierendes Scrollen zwischen meinen Stilen und meinem HTML. Wenn ich mehrere Seiten erstellen wollte, müsste ich die Stilelemente mit allen darin enthaltenen Stilen kopieren und in jede einzelne Seite einfügen, die ich gleich aussehen möchte. Wenn ich dann eine Änderung vornehmen würde, müsste ich alle anderen Seiten erneut kopieren und einfügen. Wie können wir das umgehen? Nun, sieh dir das an. Ich werde eine neue Datei erstellen, und ich werde sie als CSS-Datei speichern. Ich werde einen neuen Ordner namens CSS erstellen. Innerhalb des CSS-Ordners werde ich diese Datei als Testpunkt-CSS speichern. Dann werde ich das speichern, und Sie werden sehen, dass Sublime dies als CSS-Datei erkennt. Dann werde ich alle diese Stile innerhalb der Stilelemente nehmen, ich schneide sie aus, ich werde sie in Test-CSS setzen, ich werde sie einfügen. Ich wähle dann die meisten von ihnen aus, und drücken Sie dann die Umschalttaste und die Tabulatortaste, um sie einzurücken, und dann werde ich diese Datei speichern. Dann gehe ich zurück zum Style-Test von HTML. Ich werde diese Datei speichern, zu Chrome zurückkehren und aktualisieren. Sie werden sehen, dass alle Stile jetzt verschwunden sind. Das ist wirklich cool, denn, wow, ich kann tatsächlich all meinen HTML sehen und muss nicht weiter nach oben und unten scrollen. Aber wie kommen wir jetzt zu Stil Datei auf diese HTML-Datei angewendet werden? Wie wir dies tun, ist, anstatt die Stilelemente zu haben, haben wir jetzt ein Link-Element. Wir werden anfangen, Link so zu tippen, und einfach so wird Sublime Text den Rest für uns ausfüllen. Diese Zeilenattribute stehen für Relation. Wir sagen, lassen Sie uns auf diese Datei verlinken, und die Beziehung ist Stylesheets, und der Typ wird Text CSS sein. Dieser href sieht viel wie ein Anker-Tags href aus. Wir können entweder eine absolute URL verwenden, alle eine relative URL. Die absolute URL könnte sich irgendwo im Internet befinden, aber wir haben eine CSS-Datei, die wir gerade erstellt haben. Ich werde sagen, CSS-Schrägstrich, und wir nennen das test.CSS. Lasst uns das einfach überprüfen. Da gehen wir. Test.CSS. Fantastisch. Ich werde das speichern und dann zu meinem Browser zurückkehren, aktualisieren. Alle unsere CSS ist jetzt wieder da. Das ist großartig, weil ich in unserem Code-Editor einfach meinen HTML lesen kann. Ich muss nicht weiter nach oben und unten scrollen, CSS ändern und HTML ändern, und das bedeutet, dass ich mehrere Seiten erstellen kann, die dieselbe CSS-Datei verwenden. Nun, machen wir noch eine Sache, bevor wir diese Lektion beenden. In meiner Datei test.CSS gebe ich dem Körper eine Hintergrundfarbe. Lassen Sie uns für das Körperelement gehen, und ich möchte die Hintergrundfarbe. Welche Farbe soll es haben? Nun, lassen Sie uns ein hellgrau versuchen. So etwas. Aktualisieren. Da gehen wir. Es ist nicht zu schön, aber jetzt haben Sie eine andere CSS-Eigenschaft gelernt. Wenn Sie auf Körper tippen und auf diesen Wert tippen, können wir vielleicht etwas finden, das ein bisschen bunter ist. Ich tippe in gelb, gelb-grün, grün-gelb. Was ist mit hellem Goldrute gelb oder hellgelb? Licht Goldrute gelb klingt erstaunlich. Das könnte einer der fantastischsten Farbnamen sein, auf die ich gestoßen bin. Schließlich müssen wir zurück zum GitHub Desktop gehen und wir müssen unsere Dateien festschreiben. Was haben wir getan? Wir haben einen CSS-Test, eine HTML-Seite und eine CSS-Datei erstellt . Wie wär's mit dem für eine Zusammenfassung? Commit to master, und dann, was wir tun werden, ist Push-Ursprung. Dadurch wird es mit GitHub.com synchronisiert. Dann können wir zurück zu unserem Browser gehen, eine neue Registerkarte öffnen, für ttkb.github.io/cartoon-hero gehen, und statt HTML testen, gehen wir für style-test.html. Wenn es nicht sofort gefunden wird, kann es nur ein wenig Zeit dauern, bis es herumkommt. Lassen Sie uns hier aktualisieren, erneut aktualisieren, erneut aktualisieren. Da gehen wir, endlich live. Jetzt kennen Sie die Grundlagen von CSS. Im nächsten Video werden wir über die Planung sprechen. Ich weiß, es klingt langweilig, aber es wird Ihnen helfen, ein Coding Ninja zu werden. 8. Deine Website planen: Ich weiß, dass Sie das nicht hören wollen, aber Planung ist wichtig, wenn es darum geht, eine Website zu erstellen, sogar eine einfache. Ohne einen Plan könnten wir tagelang unnötig programmieren und das wollen wir nicht tun. Wählen Sie zunächst ein Zeichen aus, für das eine einfache Website erstellt werden soll. Ich werde eine Website für Wrack-it Ralph machen. Planung ist ein Muss. Normalerweise mache ich ein paar kurze Skizzen, um zu sehen, wie meine Website aussehen soll. Als nächstes erstelle ich, was ich gerne einen Box-Wireframe nenne. Dort zeichne ich die HTML-Elemente als Boxen, gebe ihnen Namen und gebe an, welche Felder andere Felder enthalten. Ich versuche nicht, alles auf einmal zu planen und zeichne oft einen Pfeil aus einer Box und fülle die Details später, auf einem separaten Teil der Seite oder sogar auf einer neuen Seite aus. Planung ist für mich wie ein Labyrinth von oben zu betrachten und eine Route zu skizzieren. Es ist ein Führer. Codierung ist, als würde man durch dieses Labyrinth laufen, während man der Anleitung folgt. Also finde ich es schwierig, gleichzeitig zu planen und zu codieren. Für diese Klasse habe ich einen Box-Wireframe für meine Charaktere Website erstellt. Es enthält ein Header-Element, das den Namen und das Profilbild meiner Figur enthält, und Hauptelemente, die Überschriften , Absätze, Listen und ein Bild enthalten, und schließlich ein Fußzeilenelement, das eine kleine Menge Text enthält. Jetzt ist es an der Zeit, einen eigenen Box-Wireframe zu erstellen. Sie brauchen nichts über Design oder Styling zu wissen, um eines zu erstellen. Alles, was Sie wissen müssen, ist, dass HTML eine Reihe von Boxen innerhalb von Boxen ist. Ich habe meinen Box-Wire-Frame in die Klassenressourcen aufgenommen, damit Sie auschecken können. Sie können es als Referenz verwenden, wenn Sie möchten. Sobald Sie Ihre Box Wireframe [unhörbar] Teil eins abgeschlossen haben, können Sie beginnen, Ihre Charaktere Websites zu erstellen. Wenn Sie möchten, posten Sie Ihre Planung in Ihrer Projektgalerie. 9. Das HTML deiner Website: Lassen Sie uns nerdy werden und schreiben Sie den HTML für die Webseite unserer Figur. Sie können auf die gängigen HTML-Elemente PDF in den Klassenressourcen verweisen , wenn Sie Ihr HTML schreiben. Ich werde jedes HTML-Element durchgehen, während ich es schreibe. Jetzt ist das einzige, was sich in meinem „Cartoon-Hero“ -Ordner seit ich letztes Jahr war, dass ich jetzt eine „box-wireframe.pdf“ habe. Ich werde dies öffnen und darauf verweisen, wie ich meinen HTML codiere. Sie können sehen, dass ich ein Header-Element habe, ich habe ein Hauptelement und ein Fußzeilenelement ganz unten. Was ich tun werde, ist mein HTML von oben nach unten zu codieren und auf dieses Dokument zu verweisen, während ich gehe. Lasst uns in Sublime Text einsteigen. Ich werde eine neue Datei erstellen, dann werde ich diese Datei als index.html speichern. Der Grund, warum ich dies mache, ist, weil der Browser zuerst nach dieser Datei sucht und sie automatisch lädt. Wenn Sie auf taptaptapkaboom.com gehen, müssen Sie nicht „index.html“ oder „bar.html“ eingeben. Es lädt automatisch die Datei index.html zuerst. Lass es uns retten. Dann kann ich meine HTML-Elemente schreiben. Ich werde die Eingabetaste drücken. Ich gebe meiner Seite den Titel Wreck-It Ralph, und dann gehe ich runter zur Leiche. Das erste, was ich tun werde, ist meine Header-Elemente zu schreiben. Jetzt sagt ein Header-Element: „Hey, darum geht es auf der Seite, es ist , wo Überschriften gehen, es ist, wo große Bilder gehen.“ Es ist nicht wirklich der Inhalt der Website, aber es ist normalerweise groß und fett. Lassen Sie uns unsere Header-Elemente schreiben. In unserem Kopfelement werden wir schreiben, ein Bildelement, das unser Avatar sein wird. Dann schreiben wir unsere h1 Elemente und setzen Wreck-It Ralph hinein. Jetzt für unseren Avatar brauche ich ein Bild. Gehen wir zu Google Chrome. In dieser Registerkarte kann ich nach Wreck-It Ralph suchen. Da gehen wir. Gehen wir zu den Bildern. Ich werde nach etwas suchen, das wie ein Avatar ist, vorzugsweise quadratisch, damit ich es nicht beschneiden muss. Scrollen wir ein bisschen nach unten. Dieser sieht ziemlich gut aus, 440 mal 450. Das sieht toll aus. Klicken Sie mit der rechten Maustaste darauf Lassen Sie uns das Bild in neuer Registerkarte öffnen. Dann werde ich erneut mit der rechten Maustaste klicken und „Bild speichern unter“. Innerhalb meines Bild-Ordners werde ich es als ralph-Avatar speichern und dann speichern. Ralph-avatar.jpeg. Ich werde das schließen und schließen, und ich kann das auch schließen. Dann innerhalb des Quellattributs kann ich img/ralph-avatar.jpeg schreiben, und das ist unser Header-Element für jetzt. Was ich denke, eine großartige Praktiken vor allem, wenn Sie lernen, wie man kodiert, ist HTML-Kommentare zu verwenden. Jetzt habe ich dir das bisher noch nicht beigebracht, also hör zu. Direkt über meinem Header, was ich tun werde, ist, dass ich mir einen Kommentar schreiben werde nur um es reichlich klar zu machen, was dieses nächste Element ist. Um einen Kommentar zu schreiben, gehen Sie für ein Kleiner-als-Symbol, ein Ausrufezeichen, zwei Bindestriche, und ich werde sehen, dass alles darunter grau wird, und das bedeutet, dass es sich engagiert. Der Browser kann das nicht verstehen, er wird es nicht lesen. Hier drinnen werde ich sagen, „Header-Elemente“. Um dann die Kommentare zu schließen, mache ich einen Bindestrich und dann ein Größer-als-Symbol. Da gehen wir. Das ist eine wirklich einfache Möglichkeit, sich Notizen zu hinterlassen. Ich werde jetzt sparen, und es ist eine wirklich gute Idee, regelmäßig Ihre Arbeit zu retten. Lassen Sie uns auf das Planungsdokument innerhalb der Vorschau beziehen. Dann schreiben wir unser Hauptelement mit einem h2, einem Absatz und einem Bild. Zurück in Sublime, lassen Sie uns einen neuen Kommentar erstellen. Anstatt das auszugeben, gibt es eine Abkürzung. Ich kann „Befehl“ oder „Control“ drücken und Schrägstrich vorwärts. Da gehen wir. Ich muss mich nicht erinnern, wie man einen HTML-Kommentar schreibt. Ich werde „Hauptelement“ eingeben. Dann danach, dass wir unsere Hauptelemente schreiben können. Nun, unser Hauptelement ist, wo die wichtigsten Teile Ihrer Webseite gehen. Es ist ziemlich selbsterklärend. Dann haben wir ein h2 und nach unserem h2 haben wir einen Absatz, und nach dem Absatz haben wir ein Bild. Im Inneren der h2, was war es? Über Ralph und ein bisschen über ihn und ein Bild. Sagen wir „Über Ralph“. Jetzt schreiben wir ein wenig über ihn. „ Ralph ist großartig. Er ist ein 8-Bit-Video-Game-Böse, der die Länge der Arcade reist , um zu beweisen, dass er ein guter Kerl ist.“ Darunter haben wir ein Bild. Ich werde speichern und dann nach einem anderen Bild suchen. Lass uns wieder in Chrome gehen und nach Wreck-It Ralph suchen. Gehen Sie zu „Bilder“, und wählen Sie dann unter „Extras“ ein großes Bild aus. Da gehen wir. Jetzt will ich eins mit ihm und seinen Freunden. Scrollen Sie etwas nach unten. Da gehen wir. Das sieht ziemlich gut aus. Was passiert, wenn es etwas Besseres gibt? Das sieht auch ziemlich gut aus. Ich werde auf diese klicken. Rechtsklick. Lassen Sie uns in einem neuen Tab öffnen. Klicken Sie erneut mit der rechten Maustaste auf „Bild speichern unter“. Dann werde ich in unserem Bildordner „ralph-bhig.jpeg“ sagen. Speichern Sie das. Wir können das schließen, schließen. Dann innerhalb von Sublime können wir „img/ralph-big.jpeg“ eingeben. Hier drüben siehst du, dass ich das falsch geschrieben habe. Ich setze ein „H“ da rein. Wir hatten tatsächlich ein „h“ hier drüben, ralph-Avatar, ralph-big. Das sieht gut aus. Wir haben nun ein paar Elemente in unser Hauptelement gesetzt. Was kommt als Nächstes? Gehen wir zu „Vorschau“, scrollen Sie ein wenig nach unten. Wir haben einen Absatz, eine h2 und dann eine geordnete Liste. Lassen Sie uns dieses Absatz-Tag schreiben, und hier ist es eine Beschriftung. Ich sage: „Ralph und seine Freunde.“ Ich werde Freunde richtig buchstabieren. Dann erstellen wir eine geordnete Liste. Nun, was eine geordnete Liste ist, ist im Grunde eine Liste mit Zahlen auf der linken Seite. Es ist wirklich cool, weil Ihr Browser diese Zahlen für Sie erstellen wird. Lassen Sie uns für eine ol für bestellte Liste gehen. Innerhalb dieser geordneten Liste gibt es ein paar Listenelemente. Lassen Sie uns für einen Listeneintrag gehen. Dann können wir in diesem Listeneintrag sagen: „Er hat große Hände.“ Wir können ein anderes Li erschaffen und sagen: „Er wird wie böse behandelt.“ Dann können wir das dritte sagen: „Er versucht, der Gute zu sein.“ Da gehen wir. Ich denke, es gab tatsächlich ein anderes Element hier drüben, vielleicht ein h2. Gehen wir zurück zur Vorschau Eigenschaften. Setzen wir das h2 ein und geben Sie „Ralph's Eigenschaften“ ein. Es ist Druck voll, wenn Sie vor der Kamera tippen. Jeder schaut sich deine Schreibweise an. Ich werde das retten. Gehen wir zurück zu „Vorschau“ und sehen, was als nächstes kommt. Wir haben das ol mit den Listenelementen getan. Dann gibt es ein h2 für Freunde, einen Absatz und eine unorganisierte Liste. Gehen wir zurück zu Sublime. Hier drüben kann ich noch ein „h2" schreiben, „Ralphs Freunde“. Dann gehen wir für ein Absatzelement. Jetzt können wir ein wenig darüber schreiben : „Ralph hat tolle Freunde. Ich glaube, sein bester Freund ist Glitch. Sie ist fantastisch.“ Wenn wir dann zurück zu „Vorschau“ gehen, werden Sie sehen, dass ich in „& Links“ gesetzt habe. Ich möchte, dass diese Listenelemente Links sind. Innerhalb von Sublime Text kann ich vielleicht sagen: „Klicken Sie auf die Links unten, um mehr über sie zu lesen.“ So etwas wie das. Ich werde das speichern und dann eine ungeordnete Liste erstellen, ul. Dies unterscheidet sich von einer geordneten Liste. Anstelle von Zahlen werden sie auf der linken Seite [unhörbar] sein. Sein erster Freund ist Pac-Man. Jetzt möchte ich Pac-Man in einen Link verwandeln. Vielleicht kann ich das schneiden, meine Ankerelemente schreiben und dann innerhalb dieser beiden Tags kann ich „Pac-Man“ einfügen. Dann will ich irgendwo hin. Wo bringt Pac-Man mich hin? Gehen wir zu Chrome. Suchen wir nach Pac-Man, so etwas. Scrollen Sie etwas nach unten. Los geht's. Vielleicht können Sie zum Wikipedia-Artikel gehen. Ich kopiere diese URL, gehe erneut zu Sublime und füge sie ein. Dann kopiere ich diesen Listeneintrag und füge ihn zweimal ein. Sein zweiter Freund wird Mario sein, oder vielleicht Mario Brothers. Oder vielleicht kann es Mario sein und der nächste Luigi sein. Luigi, los geht's. Dann werde ich in Chrome nach Mario suchen. Scrollen wir ein bisschen nach unten, Mario Nintendo, Super Mario. Vielleicht können wir das hier machen. Da gehen wir. Ich kopiere diese URL, gehe zurück zu Sublime und füge sie dort drüben ein. Dann suchen wir nach Luigi, scrollen Sie immer wieder nach unten, gehen wir zu Wikipedia. Also werde ich diese URL kopieren, ich gehe zurück zu Sublime und füge sie dort ein. Dann sollte sein letzter Freund natürlich Vanellope von Schweetz sein. Also lasst uns eintippen, Vanellope von Schweetz. Da gehen wir. Wenn wir Vanellope von Schweetz suchen, gehen wir hin. Gehen wir zu diesem ersten Link. Akzeptieren Sie die Cookies. Da gehen wir. Es scheint nicht viele Informationen hier zu geben. Oh, da gehen wir. Es gibt ein Video. Lasst uns das anhalten. Lassen Sie uns diese URL kopieren, gehen wir zurück zu Sublime und fügen Sie sie hier ein. Vielleicht können wir „A.K.A. „ Glitch „sagen . Ich werde das speichern und vielleicht, was wir hier tun können, ist, ein wenig Kommentare direkt über diesen h2's. Also werde ich Befehl Schrägstrich für Kommentare drücken und ich werde in einen Freund setzen und hier, Ich werde Tab drücken und dann Befehl Schrägstrich wieder und ich werde kopieren und Fügen Sie das Wort ein. Es ist wirklich lang und schwer zu buchstabieren. Über Ralph, das ist okay. Ich glaube nicht, dass ich einen Kommentar dort setzen muss. Also haben wir unser Hauptelement getan, jetzt machen wir unser Fußzeilenelement. Also werde ich einen neuen Kommentar, Fußzeilenelement erstellen und dann unser Fußzeilenelement schreiben. Nun, Fußzeilenelement ist etwas, das auf fast allen Websites existieren sollte, fast jeder Webseite, und es sollte nur ein paar Links oder ein wenig Informationen über die Website haben. Vielleicht gibt es eine neue Reihe von Abonnements, Links, ein Copyright-Symbol, das Zeug. Dann, innerhalb dieser Fußzeilenelemente, schreibe ich meine Absatzelemente. Hier können wir sagen, dass diese Seite während einer TaptaKaboom-Klasse erstellt wurde . Danach können wir unser Copyright-Symbol schreiben, obwohl wir nicht wirklich irgendwelche Urheberrechte über den Inhalt haben, aber es macht immer noch Spaß zu tun. Die Art und Weise, wie wir dies tun, ist die Verwendung einer HTML-Entität. Die HTML-Entität für ein Copyright-Symbol ist so. Geben Sie ein kaufmännisches Und-Zeichen ein und gehen Sie dann, kopieren und setzen Sie ein Semikolon danach. Sie sollten sehen, dass es lila oder andere Farbe wird. Dann kannst du deinen Namen danach setzen. Dann TapTapKaboom Klasse, ich möchte, dass dies auf meine Website gehen. Also werde ich ein öffnendes Ankerelement-Tag setzen und danach schließe ich es. Wir können eine href setzen und hier und sagen, es soll zu https://taptapkaboom.com gehen und dann werde ich das speichern. Nun, wir haben das alles getan, ohne einen Blick darauf zu werfen, wie es aussieht. Das ist in Ordnung, es war so einfacher HTML-Prozess, aber jetzt können wir gehen und schauen, ob alles funktioniert. Also lassen Sie uns Finder öffnen und index.html in Chrome ziehen. Wir können diesen ersten Tab schließen und dann einen Blick darauf werfen, wie unsere Website aussieht. Wir haben unser Avatar-Bild, wir haben unser h1, wir haben ein h2, Ralph ist genial, wir haben das in einem Absatz, dann haben wir ein wirklich großes Bild, wow, das ist riesig. Dann scrollen wir noch ein bisschen weiter nach unten, Ralph und seine Freunde, das ist die Beschriftung. Noch ein h2, und da gehen wir. Wir haben eine geordnete Liste. Sie können sehen, dass es die Zahlen auf der Seite hat und wir haben Ralphs Freunde zum Absatz. Dann haben wir eine Reihe von Listenelementen in einer ungeordneten Liste. Sie können sehen, dass es diese Festplatten an der Seite anstelle von Zahlen hat. Dann haben wir endlich das Fußzeilen-Tag. Das sieht fantastisch aus. Was hier wirklich wichtig ist, ist, dass, wenn Sie kein Styling auf Ihrer Seite haben, Dinge Sinn macht. So wird eine Suchmaschine Ihre Seite sehen. Also, wenn es Sinn macht, um Sie ohne Stile, ist sinnvoll, um eine Suchmaschine. Jetzt möchte ich nur noch einmal überprüfen, ob alles dort ist, wo es sein sollte. Also klicke ich auf Ansicht, gehe zu Entwickler und öffne meine Entwicklertools. Lassen Sie uns hier in unserem Körper scrollen, wir haben unsere Kopfzeile, das sieht gut aus. In unseren Hauptelementen haben wir all diese wichtigen Dinge. Dann unsere Fußzeile, da gehen wir. Fantastisch. Sie können sehen, dass die Kommentare sind hier auch, aber Chrome wird keine Aufmerksamkeit auf diese zahlen. Lassen Sie uns sehen, ob diese Links funktionieren. Wenn ich auf Pac-Man klicke, geht zu Pac-Man und was ich möchte, ist in einem neuen Tab zu öffnen. Also lassen Sie uns zurück zu Sublime Text und wir werden in target_blank setzen. Ich kopiere das und füge es auf alle anderen Ankerelemente ein. Hier unten gibt es auch einen. Alles klar, ich werde das retten. Gehen wir zurück zu Chrome und aktualisieren. Sehen Sie jetzt, wenn ich Pac-Man klicke, da gehen wir, öffnet Pac-Man. Wenn ich auf Mario klicke, öffnet Mario. Luigi, los geht's. Endlich, Vanellope von Schweetz, da gehen wir. Fantastisch. Lassen Sie uns das schließen. So funktionieren unsere Links, die Dinge sehen gut aus. Das Letzte, was ich tun möchte, ist, ich will eine kleine Tab-Icon-Sache. Ich weiß, wie das heißt, vielleicht tun Sie es nicht. Was ich Ihnen jetzt zeigen werde, ist, wie Google für etwas. Ich denke, es kann ein Tab-Symbol genannt werden. Also werde ich danach suchen. Öffnen Sie eine neue Registerkarte und gehen Sie Browser-Tab-Symbol, HTML, vielleicht. Jetzt können Sie beginnen, die Ergebnisse zu durchsuchen. Stack Overflow ist wirklich gut, lassen Sie uns das überprüfen. Wie man ein Browser-Tab-Symbol hinzufügen, favicon, das ist ein gutes Wort für Websites zu wissen. Scrollen wir ein bisschen nach unten. Was passiert, ist oft, jemand wird eine Frage zu Stack Overflow stellen und eine Reihe von Leuten werden Antworten geben. Dann suchen Sie nach einem grünen Häkchen, und das ist oft die richtige Antwort. Fügen Sie einfach den folgenden Code zum Kopf-Element hinzu. Da gehen wir. Lassen Sie uns das kopieren. PNG-Favicons werden von den meisten Browsern unterstützt, mit Ausnahme von Browsern, die IE kleiner oder gleich 10 sind. Gründen der Abwärtskompatibilität können Sie ICO-Favicons verwenden. Ich habe keine Ahnung, was das ist. Nun, das tue ich, aber Sie wahrscheinlich nicht. Also lasst uns das kopieren. Lassen Sie uns zu Sublime gehen und nach oben scrollen und es in unser Kopfelement setzen. Nein, wir haben es nicht kopiert. Also lassen Sie uns zurück zu Chrome gehen, kopieren Sie das, und dann gehen Sie zu Sublime und fügen Sie es ein. Dies sieht viel wie eine Verknüpfung mit einer Reihe von Stylesheets aus, aber offensichtlich anders aus, weil es eine Reihe von Symbolen hat und eine href hat. Also lasst uns die href ändern und wir müssen höchstwahrscheinlich ein Bild liefern. Was ich tun möchte, ist das gleiche Bild zu verwenden, das wir für unseren Avatar verwenden. Also werde ich das kopieren und es hier drüben einfügen, dann werde ich speichern. Gehen wir zurück zu Chrome und aktualisieren Sie hier und da gehen wir. Wir haben jetzt eines dieser Dinge, das als Favicon bezeichnet wird. Wenn Sie nun kein quadratisches Bild für Ihren Charakter oder Ihren Filmhelden haben, suchen Sie nach etwas wie der Bildgröße. Da gehen wir. ResizeImage.net, das wird großartig funktionieren. Einfache Bildgröße, PicResize. All diese Websites werden wahrscheinlich einen tollen Job leisten. Probieren Sie sie aus, schneiden Sie Ihr Bild aus und laden Sie das Bild herunter und fügen Sie es in Ihren HTML-Code ein. Lassen Sie uns das schließen und wir können auch diesen Tab schließen. Also, das sieht ziemlich gut aus. Es ist jetzt bereit, gestylt zu werden, was wir im nächsten Video behandeln werden. Aber zuerst kommen wir in unseren Code. Gehen wir zu GitHub Desktop. Ja, wir haben ein Box-Drahtmodell hinzugefügt, wir haben zwei Bilder und eine Datei index.html hinzugefügt. Also lassen Sie uns eine Zusammenfassung schreiben schrieb unsere oder vielleicht können wir sagen, hinzugefügt unsere Charakter index.html Datei und einige Bilder. Vielleicht zur Beschreibung können wir sagen, schrieb den HTML und fügte ein Favicon hinzu. Dann verpflichten wir uns, zu meistern. Sobald Sie das getan haben, können wir dann den Ursprung schieben und wenn das erledigt ist , dann gehen wir zu unserem Browser, öffnen Sie einen neuen Tab, geben Sie Ihren GitHub Benutzernamen, meins ist tt und kb.github/cartoon hero und dann anstelle von Test könnten wir index.html verwenden oder wir könnten es einfach leer lassen. Lassen Sie uns also versuchen, es leer zu lassen drücken Sie die Eingabetaste. Da gehen wir. Jetzt sieht viel besser aus, wenn Sie index.html oder Bar HTML schreiben oder HTML nach dem letzten Schrägstrich testen. Aber wenn du willst, kannst du das auch tun. Das Gleiche. An dieser Stelle können Sie ziemlich stolz auf sich selbst sein. Sie haben gerade den HTML für Ihre Charaktere Webseite geschrieben. Ich denke, du solltest dir einen High Five geben. Ja. 10. Das CSS deiner Website: Jetzt kommt der lustige Teil unserer Charaktere Website, die CSS. Was ist erstaunlich an CSS ist, dass mit ihm, Sie können die gleichen Haufen von HTML sehen sehr unterschiedlich. Versuchen Sie und machen Sie Ihre Helden Website passen seine oder ihre Persönlichkeit. Ich werde von oben nach unten auf der Seite arbeiten und ändern Sie unser HTML ein wenig, wie wir das CSS schreiben. Ich werde alles erklären, wie ich gehe. Aber wenn Sie etwas anderes ausprobieren möchten, gehen Sie dafür, googeln Sie es einfach oder werfen Sie einen Blick auf die gängigen CSS-Eigenschaften pdf in den Klassenressourcen. So sieht unsere Webseite ohne CSS aus. Jetzt bekommen wir einige Spaß.Ich werde in dieser Lektion wieder auf meine Box Drahtrahmen pdf beziehen . Das erste, was ich tun werde, ist, diesen Header zu adressieren. Ich möchte, dass es wirklich breit ist und ich werde ihm eine orange Farbe geben. Für den Avatar möchte ich das zu einem Kreis mit einem Rand machen und ich möchte, dass das Bild und das H1 in der Mitte sind. Lasst uns dran kommen. Innerhalb von Sublime Text werde eine neue Datei erstellen, und das wird meine CSS-Datei sein. Ich werde dies speichern als, Held Punkt CSS, in meinem CSS-Ordner.There wir gehen. Dann innerhalb meiner Indexdatei, werde ich schreiben, in-Link-Element, drücken Sie die Return, und das Rollenattribut wird Stylesheet sein.Der Typ ist Text CSS und der HRF wird CSS Schrägstrich Held Punkt CSS.Ich werde speichern das. Dann möchte ich innerhalb meines Helden CSS nur sicherstellen, dass das alles funktioniert. Ich schreibe einige Stile für das Körperelement und die Hintergrundfarbe, ich werde nur rot für jetzt sagen, nur um zu überprüfen, ob es funktioniert. Ich gehe zurück zu Chrome und Refresher.ta-da.it funktioniert. Gehen wir zurück zu Sublime Text. Nehmen wir das raus. Das erste, was tun wird, ist, meine Marge auf Null zu setzen. Wenn ich das speichern und zurück zu Chrome, Sie werden sehen, dass auf der linken und der oberen, und hoffentlich auf der rechten und unten, gibt es keinen Rand mehr auf dem Körper. Nun, lassen Sie uns ein paar Header-Styling machen. Unten hier, lassen Sie uns für unser Header-Element gehen. Was ich zuerst tun möchte, ist eine Hintergrundfarbe hinzuzufügen. Meine Farbe, die ich auswendig gelernt habe, ist D14635. Dies ist eine Orange eine Farbe. Lassen Sie uns diese speichern.Lassen Sie uns zurück zu Chrome und erfrischen.There gehen.Es ist das Wrack-it Ralph orange. Nun, ich denke, es ist ein Wrack-it Ralph Orange.Dann, was ich tun will, ist, ich will die Überschrift, na ja, H1 innerhalb der Kopfzeile weiß machen . Also werde ich sagen, H1 innerhalb der Kopfzeile, Farbe Ich möchte, dass Sie weiß sein.Dort gehen wir. Was ich dann tun möchte, ist, ich möchte die H1 und das Bild zentrieren. Eine Möglichkeit, dies zu tun, besteht darin, die Eigenschaft text align auf center zu setzen. Dies wird dann das Bild und die H1 in der Mitte auszurichten.Ich werde speichern, dass, gehen Sie zurück zu Chrome und zu aktualisieren.There wir gehen. Das sieht ziemlich gut aus. Nun, ich möchte, dass mein Bild ein Kreis ist. Lassen Sie uns zu Sublime Text gehen und sagen „hey, Bild innerhalb der Kopfzeile.Ich möchte, dass Sie ein Kreis sein“. Die Art und Weise, wie wir dies tun, ist, indem wir Grenzradius sagen. Sie werden es hier unten sehen, Grenzradius, und wir können so etwas wie 150 Pixel sagen. Dies wird eine wirklich schöne abgerundete Ecke machen. Wenn ich das speichere, gehen wir zurück zu Chrome und aktualisieren. Ja, das sieht ziemlich gut aus. Aber jetzt werde ich diese Elemente inspizieren und ich möchte es zu einem Kreis machen. Wir haben einen Grenzradius von 150. Aber wenn ich dann die Breite auf 300 Pixel setze, da gehen wir, die Dinge werden kreisförmig. Ich werde diesen Stil kopieren und zu Sublime Text zurückkehren und darüber einfügen. Dort gehen.Nun, wenn ich zurück zu Chrome und ich aktualisieren, es ist Circular.Fantastic.Dann möchte ich eine Grenze hinzufügen. Gehen wir für eine Grenze. Diese Randeigenschaft ist eigentlich eine Abkürzung. Der Wert wird drei verschiedene Dinge haben . Wir werden sehen, wie breit es sein wird. Ich werde für zehn Pixel gehen und dann den Stil der Grenze festlegen, der solide sein wird. Dann werde ich die Farbe einstellen, die sein wird, #483A94, die diese wirklich coole lila Farbe ist. Vielleicht kann ich die 10 Pixel auf so etwas wie 20 Pixels.There wir gehen, das sieht ziemlich gut aus. Aber du wirst anfangen zu sehen, dass es nicht mehr kreisförmig ist. Dies liegt an dem Box-Modell. Dieses schicke Wort.Aber was Sie auf der rechten Seite sehen können , ist, dass ich 300 mal 300 Pixel habe, dann habe ich eine Polsterung von nichts, und dann habe ich eine Grenze von 20 Pixel auf der linken Seite und 20 Pixel auf der rechten Seite, was es 340 Pixel breit und 340 Pixel hoch macht. Das bedeutet, dass ich meinen Grenzradius von 150 auf 170 erhöhen muss. Wie sieht das aus? Ziemlich gut.Lassen Sie uns diese noch.There wir gehen.Lassen Sie uns zurück zu Sublime Text gehen und fügen this.There wir.Ich werde das.Gehen Sie zurück zu Chrome und refresh.Fantastic. Nun, ich möchte ein wenig Platz über diesem Bild und unter dem H1. Was ich tun werde, ist in Sublime, ich werde eine Sache namens Padding hinzufügen. Wir können oben für Padding gehen und ich werde für etwa 50 Pixel gehen, und ich kann auch unten 50 Pixel auffüllen. Lassen Sie uns speichern, gehen wir zurück zu Chrome und refresh.There wir gehen.Das sieht ziemlich gut.Obwohl ich nicht weiß, ob ich ein großer Fan der lila Grenze bin. Vielleicht könnte ich das einfach in Weiß ändern. Ich gehe zurück nach Sublime. Ändern wir die Rahmenfarbe von diesem lila zu weiß. Speichern und aktualisieren. Ja, das gefällt mir wirklich. Nun, dieser Wrack-it-Ralph in dieser Art von Schrift sieht nicht so gut aus. Es ist ziemlich einfach, Ihre Schriftfamilie in Sublime in unserem Header zu ändern , während Sie in der Schriftfamilie schreiben und ihr dann einen Wert geben. Nun gibt es ein paar Standardschriftarten, die auf Ihrem Computer und dem Computer des Benutzers funktionieren , Aber wenn Sie eine Schriftart angeben, die nur auf Ihrem Computer ist. Es funktioniert nicht auf dem Computer eines anderen. Was Sie hier tun müssen, ist ein paar Schriftarten anzuwenden , die funktionieren, wenn die vorherige nicht funktioniert. Was ich tun werde, ist Helvetica zu schreiben. Wenn sie keine Helvetica haben, können wir Arial benutzen. Wenn sie Arial nicht haben, können wir Sansserif benutzen. Nun, eine Serifenschrift ist eine von diesen, die wir derzeit haben, und sie hat diese kleinen Füße und kleine Arme. Sans Serif bedeutet, dass es diese Füße und Arme nicht hat. Jetzt können Sie auch Helvetica mit Anführungszeichen schreiben, und Arial mit Anführungszeichen um sie herum, wenn Sie möchten, aber es ist nicht wirklich notwendig. Denken Sie daran, Ihr Semikolon danach zu setzen. Wenn wir das speichern und zurück zu Chrome, aktualisieren, das sieht viel besser aus. Aber was ist mit dem Rest unserer Website? Nun, vielleicht lassen wir es alles auf einmal ändern. Was ich tun werde, ist schneiden Sie diese Schriftart-Familiendeklaration und gehen Sie zu meinem Körper Regelsatz und fügen Sie feature.Dann werde ich speichern, gehen Sie zurück zu Chrome und aktualisieren. Nun, unsere ganze Website wird diese Schriftart auf sie angewendet haben.Fantastisch. Lassen Sie uns einfach überprüfen, ob es tatsächlich diese Schriftart hat. Ich werde mit der rechten Maustaste, inspizieren, dann in der rechten Seite hier, scrollen Sie nach unten Schriftfamilie Helvetica, Arial, Sanserif. Wenn Ihr Computer nicht über Helvetica verfügt und er nicht über Arial verfügt, verwendet er jede Sensorschriftart, die sich auf dem Computer befindet. Nun, für meine Überschriften möchte ich etwas Besonderes verwenden. Ich werde zu Google Fonts gehen und eine wirklich coole Schriftarten zu verwenden. Diese werden als Webfonts bezeichnet. Dies funktioniert, unabhängig davon, ob ein Benutzer die Schriftart auf seinem Computer hat oder nicht. Lässt sich eine neue Registerkarte öffnen, gehen Sie die Suche nach Google Fonts.Klicken Sie auf diesen ersten Link. Dann können Sie hier wild gehen. Suchen Sie nach etwas, das Ihrem Charakter entspricht. Ich weiß, dass die Schriftart, die ich möchte, Press Start 2p genannt wird. Los geht's. Sobald Sie Ihre Schriftart gefunden haben, können Sie diese Plus-Taste drücken. Sobald Sie eine Familie ausgewählt haben, klicken Sie auf diesen schwarzen Balken. Dann gibt es zwei Möglichkeiten, um diese Schriftart in Ihre Stile zu bekommen.Der Standardweg ist der einfachste. Lassen Sie uns dies kopieren und gehen Sie zurück zu Sublime, gehen Sie zu unserem Index und vor der CSS-Datei, lassen Sie uns dieses Link-Element einfügen. Sie können sehen, dass es ungefähr das gleiche.Es ist nur in einer anderen Reihenfolge. Es hat einen HRF genäht es hat ein Rollenattribut von Stylesheet und das ist alles, was wir brauchen.Dann gehen wir zurück zu Chrome. Dann sagen Sie in CSS angeben. Verwenden Sie die folgenden CSS-Regeln, um diese Familien anzugeben. Spaß Familie, drücken Sie Start 2P. Wenn es das nicht hat, ist es standardmäßig kursiv. Lassen Sie uns das kopieren. Gehen wir zu Sublime und seine, speichern Sie diese Index HTML-Datei, und dann in unserem Helden CSS, was ich tun werde, ist, dass ich diesen Stil auf alle H1s und, alle H2s anwenden werde. Dies ist eine andere Art von Selektor. Anstatt eine Regel für H1s und dann eine andere für H2s zu schreiben, können wir einfach sagen, hey, alle H1-Elemente und alle H2-Elemente, ich erkläre, dass Sie diese Schriftfamilie haben sollten. Lassen Sie uns das speichern und gehen Sie zu Chrome jetzt.Got auf unsere erste Registerkarte und aktualisieren. Das sieht ziemlich gut aus. Jetzt sieht ziemlich ein Video-Spiel-y. Ja, ich mag es. Unser Header sieht ziemlich gut aus, aber ich bin mir nicht ganz sicher, ob ich eine Schriftgröße für mein h1 angegeben habe. Wir sagten, weiß, aber ich möchte meine Schriftgröße, Schriftfamilie nein, Schriftgröße gab es gehen, um 50 Pixel. Speichern Sie das, und führen Sie erneut eine Aktualisierung durch. Whoa, das ist ziemlich groß, aber das ist okay. Im Moment haben wir unseren Elementinspektor hier. Wenn wir es schließen oder, wenn wir nach unten gehen und nach oben scrollen, ja, das sieht viel besser aus. Fantastisch, aber ich ziehe das wieder zur Seite, weil es einfacher ist zu sehen, was wir tun. Holen Sie sich nun auf das Styling der Hauptelemente und der Inhalt darin. Gehen wir zurück zu erhabenem Text. Was wir hier tun können, ist ein paar Zeilen hinzuzufügen und dann Main zu schreiben und einige Deklarationen für unsere Hauptelemente zu schreiben. Das erste, was ich tun möchte, ist eine maximale Breite von 800 Pixeln. So 800 Pixel breit. Dies ist so, dass, wenn es einen massiv breiten Browser gibt. Es fühlt sich nicht so an, als müssten Sie Ihre Augen von links nach rechts scrollen. Es ist ziemlich leicht zu lesen. Ich werde das speichern, gehen Sie zurück zu Chrome, drücken Sie Refresher. Dann werde ich das vorerst schließen und das wirst du sehen. Es sieht so aus, als würde es nur bis da hinauf gehen, was es tut. Aber das wissen Sie nicht wirklich sicher. Lasst uns mit der rechten Maustaste und inspizieren das, und wir können das etwas weniger breit machen. Wenn wir dann den Mauszeiger über die Haupt bewegen und Sie sehen können, wo das blaue Highlight ist, ist das, wie breit es ist. Es steht, dass es 800 Pixel breit ist. Aber warum ist dieses Bild so breit? Was machen wir dagegen? Innerhalb von Sublime Text, was ich hier tun werde, ist, dass ich alle Bilder innerhalb unseres Hauptelements sagen werde, ich möchte, dass Sie eine maximale Breite von 100 Prozent haben. Der Grund, warum ich das tue, ist, weil, wenn ich die maximale Breite unseres Hauptelements ändere, maximale Breite dieses Elements immer noch die gleiche wie das Hauptelement sein wird. Ich werde das speichern, gehen wir zurück zu Chrome und aktualisieren, da gehen wir. Was wirklich cool ist, wenn man nur die Breite einstellt, ist, dass die Höhe proportional skaliert. Sie werden das mit unserem Avatar-Bild und mit diesem großen Bild bemerkt haben. Nun, was ich sehe, ist, dass alle unsere Inhalte auf der linken Seite sitzen. Ich will das nicht, ich will in der Mitte sein. Versuchen wir eine Textausrichtung. Wir sagen, Text ausrichten Mitte. Ich werde speichern und dann wieder in Chrome aktualisieren. All dies getan hat, ist unser Text ausrichten Mitte, was Sie vielleicht wollen, aber ich will nicht. Gehen wir zurück zu erhaben. Lassen Sie uns das rückgängig machen, und was ich hier tun werde, ist eine Marge hinzuzufügen. Für den Wert werde ich 0 sagen, was obere und untere Werte bedeutet, du bist Null und dann setze ich die linken und rechten Werte auf auto. Dies ist eine wirklich schöne Abkürzung zum Zentrieren von Elementen. Ich werde das speichern, gehen Sie zurück zu Chrome, aktualisieren. Jetzt ist mein Text wieder links ausgerichtet und all unsere Inhalte sind in der Mitte. Das heißt, wenn ich meinen Elementinspektor schließe, dann geht es los, das fühlt sich ziemlich gut an. Aber jetzt, wenn ich das wieder öffne, lassen Sie uns einige Elemente untersuchen, und ich mache das etwas breiter. Sie werden sehen, dass der gesamte Inhalt genau nach links und genau nach rechts sitzt. Ich möchte, dass links und rechts ein wenig Polsterung vorhanden ist. Gehen wir zurück zu erhaben und fügen Sie etwas Polsterung hinzu. Jetzt könnten wir Padding links und Padding hinzufügen, rechts, oder was wir tun könnten, ist die Verknüpfung zu verwenden. Also für das Padding könnte ich sagen, ist Null und das würde die gesamte Polsterung auf Null setzen, oder ich könnte einfach nach oben und unten mit seinem ersten Wert und dann links und rechts gehen. Ich könnte für so etwas wie 20 Pixel gehen. Wenn ich dann die Verknüpfung weiter vorantreiben wollte, könnte ich dann den unteren Wert auf Null oder vielleicht sogar 20 Pixelsetzen Null oder vielleicht sogar 20 Pixel und dann kann ich den linken Wert einstellen, wenn ich wollte. Wenn wir dies auf etwa 100 Pixel setzen, wird es wirklich offensichtlich sein, was das tut. Ich werde das speichern, gehen Sie zurück zu Chrome und aktualisieren. Sie werden sehen, dass, wenn ich mein Hauptelement auswähle, es oben keine Polsterung gibt, aber es gibt eine massive Polsterung auf der linken Seite, ein wenig Polsterung auf der rechten Seite. Wenn wir nach unten scrollen, werden Sie sehen, dass unten ein wenig Polsterung vorhanden ist. Wenn ich dies in ändere, lassen Sie uns 20 Pixel vorwärts gehen. Sie werden sehen, dass sich die Polsterung ändert oder um, was großartig ist. Dann, wenn ich den ersten Wert auf Null setze, setzen Sie ein Leerzeichen oben und unten wird Null Polsterung haben und dann die linke und rechte, um eine Polsterung von 20 Pixeln zu haben. Das ist genau das, was ich will. Gehen wir zurück zu erhaben und lassen Sie es uns so machen. Fantastisch. Ich werde das speichern, gehen Sie zurück zu Chrome und aktualisieren. Sie können sehen, dass wir zwischen dem Browser und unserem CSS hin und her gehen. Ich mag das wirklich, weil ich im Grunde im Browser entwerfe. Jetzt werde ich meine H2s stylen. Lassen Sie uns diesen Kerl inspizieren. Wie groß ist die Schriftgröße? Wir haben eigentlich keine gesetzt. Gehen wir zurück zu erhaben, und lassen Sie uns das ändern, ich sage, alle h2-Elemente, ich möchte, dass Sie eine Schriftgröße von 35 Pixel haben. Ich möchte, dass die Farbe e70c19 ist. Ich werde das speichern und ein wenig nach unten scrollen. Gehen wir zurück zu Chrome und aktualisieren. Über Ralph, Ralphs Eigenschaften, Ralphs Freunde. Sie sind vielleicht ein bisschen groß. Gehen Sie zurück zu erhaben und ändern Sie dies in 30 Pixel. Mal sehen, wie das aussieht. Okay, das sieht ziemlich gut aus. Nun die Absatzelemente, wir haben nicht viel dagegen getan. Lassen Sie uns das explizit setzen. Ich werde sagen, alle Absatzelemente, ich möchte, dass Sie eine Schriftgröße von 20 Pixel haben. Ich werde das speichern und aktualisieren; okay, das sieht ziemlich groß aus, aber unsere Liste hat immer noch die alte Schriftgröße. Anstatt Stile für unsere geordnete Liste und unsere ungeordnete Liste zu schreiben, werde ich es einfach auf den Körper anwenden. Ich schneide das aus unserem Absatz-Tag, gehe zu den Körperelementen und füge das dort ein und lass uns das speichern. Gehen wir zurück zu Chrome und aktualisieren, und da gehen wir. Das sieht viel besser aus. Das nächste, was ich an den Körperelementen machen wollte, ist eine Zeilenhöhe. Dies macht den Text nur ein wenig lesbarer. Ich werde es auf etwa 30 Pixel setzen, die sehen, was das tut. Die Dinge sind jetzt ein bisschen leichter zu lesen, das sieht wirklich gut aus. Das nächste, was ich tun möchte, ist diese Links zu stylen. Gehen wir zurück zu Sublime scrollen Sie ein wenig nach unten und anstelle dieser Absatzelemente werde ich es verwenden, um alle meine Ankerelemente zu stylen. Ich werde die Flucht drücken, um die Vorschläge loszuwerden , und die Farbe, für die wir gehen, wird die gleiche wie unser h2-Hash sein, e7 dort gehen wir. Lassen Sie uns das speichern, gehen Sie zurück zu Chrome und aktualisieren. Da gehen wir. Jetzt, als ich über sie schwebe und wollte Farbe ändern. Die Möglichkeit, eine Pseudo-Klasse für ein Ankerelement zu schreiben, besteht darin, ein und dann einen Doppelpunkt zu schreiben und dann zu schweben, und dies ist eine Hover-Pseudo-Klasse. Was wir hier tun, ist zu erklären, dass, wenn Sie auf einem Element schweben, wir wollen die Farbe ändern und so sagen wir Farbe und wir gehen für die lila Farbe, die wir ein bisschen früher geschrieben haben. Hash 483a94. Lass uns das retten. Gehen wir zurück zu Chrome, aktualisieren Sie sehen, dass, wenn ich schwebe, es ist nicht lila. Wir können auch etwas Spaß damit haben, also wenn wir zu Sublime Text gehen und diese stattdessen in eine Hintergrundfarbe ändern und die Farbe in Weiß ändern und dann werde ich das einfach einrücken. Mal sehen, wie das aussieht. Ja, das sieht ziemlich gut aus. Super. Das letzte, was wir zwei Stil haben, ist unsere Fußzeile. Ich gehe zurück zu erhabenem Text und wir werden unser Fußzeilenelement einfügen und ich möchte, dass es das gleiche orange wie unsere Kopfzeile ist. Ich scrollen hier ein wenig nach oben und ich werde das kopieren und ich möchte, dass der Text ausrichten ebenfalls zentriert ist und ich werde ihn in unsere Fußzeilenelemente einfügen. Lassen Sie uns das speichern, gehen Sie zurück zu Chrome und aktualisieren. Nun, das sieht etwas seltsam aus, also lasst uns das klären. Ich möchte, dass die Farbe alle weiß ist und dann möchte ich, dass die a-Elemente innerhalb der Fußzeile auch eine Farbe Weiß haben. Lass uns das speichern und mal sehen, wie das aussieht. Wenn ich dann darüber schwebe, wird es diese violette Hintergrundfarbe haben, die ich nicht sicher bin, ob ich wirklich will. Gehen wir zurück zu Sublime, und lassen Sie uns dies kopieren und einfügen und eine Pseudo-Klasse auf diese Ankerelemente setzen und sagen, nun, wenn Sie darauf schweben, möchte ich, dass die Kapazität 0,5 ist, und ich möchte, dass die Hintergrundfarbe transparent, lassen Sie uns das speichern. Gehen Sie zurück zu Chrome, aktualisieren. Da gehen wir. Sieht ziemlich gut aus. Jetzt bleibt das einzige, was mit meiner Fußzeile zu tun hat, ist, den Platz unten loszuwerden und ihm ein bisschen Polsterung zu geben. Lass uns das machen. Jetzt möchte ich, dass mein Padding und meine Fußzeile etwa 50 Pixel haben und ich möchte sicherstellen, dass das Absatz-Tag keine Margination hat. Ich werde sagen, alle Absatzelemente innerhalb der Fußzeile können Sie einen Rand von nichts haben. Lass uns das retten. Gehen Sie zurück zu Chrome und aktualisieren Sie. Da gehen wir. Es sieht wirklich, wirklich gut aus. Lassen Sie uns diesen Elementinspekter schließen und einen Blick darauf werfen, wie unsere Website für die meisten Menschen aussehen würde. Ja, ich denke, es sieht ziemlich gut aus, vielleicht können wir ein bisschen Polsterung oben auf unserem Hauptelement und vielleicht auch unten hinzufügen . Innerhalb von Sublime, gehen wir zurück zu unseren Hauptelementen und statt 0, sagen wir 20 Pixel. Vielleicht können wir nur 20 Pixel machen. Ich werde dort retten. Gehen Sie zurück zu Chrome und aktualisieren Sie. Ja, das sieht ziemlich gut aus. Ich denke, dass dieser Ralph und seine Freunde tatsächlich wie eine Beschriftung aussehen müssen, anstatt nur ein normales Absatzelement. Also lasst uns als nächstes damit umgehen. Innerhalb meiner index.html werde ich nach unten zu diesem Absatz scrollen, jetzt gebe ich ihm eine Klasse von Beschriftung. Ich werde das retten. Gehe zu meinem Helden CSS. Scrollen Sie ein wenig nach unten und dann werde ich sagen alle Absätze mit einer Klasse von Beschriftung Ich möchte, dass Sie eine Farbe von Grau haben. Mal sehen, wie das aussieht. Aktualisieren. Das ist immer noch nicht so hellgrau, also gehen wir zurück zu erhaben und es ändert sich in etwas wie 999999. Lass uns sparen und ja, das sieht ziemlich gut aus. Jetzt möchte ich, dass es kursiv dargestellt wird. Wir könnten ein I-Element um den Text legen, aber weil es eine Beschriftung ist, können wir dies tatsächlich in CSS tun. Lassen Sie uns für Schriftart gehen, Stil, und wir geben ihm einen Wert von kursiv, wird speichern, gehen Sie zurück zu Chrome und aktualisieren. Es ist jetzt kursiv, aber es hat immer noch diese Marge darüber, also lasst uns das ändern. Wir sagen Rand oben, und wir geben ihm einen Wert von 0. Wenn wir das speichern, gehen Sie zurück zu Chrome und aktualisieren. Ja, das sieht viel besser aus. Jetzt möchte ich nur noch etwas Abstand zwischen den h2s und den darüber liegenden Elementen setzen . Gehen wir zurück zu erhabenem Text. Scrollen Sie nach oben, bis wir zu einem h2 kommen und dann können wir einen Rand von sagen, 40 Pixel an der Spitze, auf der linken und rechten Seite wird 0 und dann unten können wir zehn Pixel sagen. Ich werde das speichern, gehen wir zurück zu Chrome und aktualisieren. Ja, das sieht ziemlich gut aus. Alles in allem unsere Seiten sehen fantastisch aus. Jetzt müssen wir es nur begehen. Lassen Sie uns auf GitHub Desktop gehen und für unsere Zusammenfassung können wir sagen: „Schrieb das CSS für unsere Charaktere Website und ändern Sie etwas HTML.“ Dann verpflichten Sie sich, den Ursprung zu beherrschen und zu schieben. Fantastisch. Jetzt können wir zurück zu Chrome. Wir können Google-Schriftarten schließen, einen neuen Tab öffnen, unseren GitHub-Benutzernamen eingeben und los geht's. Gehen Sie zum Cartoon-Helden und drücken Sie die Rückkehr. Ihre Charaktere Website haben Sie eine URL, die Sie mit der Welt teilen können. Das letzte, was Sie sehr nützlich finden, ist, wie man einen Kommentar in CSS schreibt. Es ist ein wenig anders als HTML. Innerhalb Ihres Code-Editors müssen Sie nur einen Schrägstrich und einen Sternchen eingeben. Schreiben Sie Ihre Kommentare, so etwas wie, Header-Stile und schreiben Sie dann wieder ein Sternchen und einen Schrägstrich. Da gehen wir. Wenn Sie dies mit einer Verknüpfung tun möchten, müssen Sie nur Befehlstaste oder Steuerelement und Schrägstrich drücken und dann Ihre Kommentare hier schreiben. Nun, Raphls Webseite sieht zerschlagen aus. Ich denke, es passt wirklich gut, und ich hoffe, dass Ihre sieht toll und passt zu Ihrem Charakter auch. Wenn du das Gefühl hast, teile es mit der Welt, sag deiner Mutter,deinen Freunden, den Jungs,mit denen teile es mit der Welt, sag deiner Mutter, deinen Freunden, den Jungs, du arbeitest. Es sollte alle super stolz oder wahnsinnig eifersüchtig machen. Was noch cooler ist, ist, dass jedes Mal, wenn Sie Ihren Code übergeben und synchronisieren, diese Seite aktualisiert wird. Magische Tada. 11. Debugging und häufige Fehler: Leute, egal wer du bist, auch wenn du super Ninja-Programmierer bist, wirst du Fehler machen, wenn du programmierst. Sie werden Bugs genannt und es sind frustrierend. Wie geht man mit ihnen um und lässt sie verschwinden? Lassen Sie uns einen Beispielfehler zusammen abdecken. Wenn Sie möchten, dass dieses Bild wie ein Avatar aussieht und es nicht ist, was sollten Sie tun? Das erste, was zu tun ist, ist sich zu entspannen. Es gibt wahrscheinlich einen logischen Grund, nicht zu arbeiten. Sie tief durch und nehmen Sie zur Kenntnis, was vor sich geht. Es hat keinen der Avatar-Stile, die ich dafür geschrieben habe, und es sieht aus wie ein Standardbild. Dann werde ich über die Dinge gehen, die dazu führen, dass dieses Ding funktioniert. In diesem Fall geht alles in die Herstellung eines Bildes, eines Avatars. Ich werde in erhabenen Text gehen. Dann werde ich innerhalb meines Index zu scrollen, wo ich diesen Avatar geschrieben habe. Das Bild sieht korrekt aus. Jetzt gehe ich zu meinem CSS und scrolle nach unten, wo ich die Stile für diesen Avatar geschrieben habe. Dann werde ich alle Bilder innerhalb der Header-Elemente sagen. Ich kann meinen Fehler schon sehen. Sie sehen, dass ich hier einen Punkt gesetzt habe, und hier sage ich alle Bilder in einem Element mit einer Klasse von Header. Das ist nicht das, was ich will. Ich werde das entfernen und dann diesen Zeitraum entfernen. Ich werde dann speichern und dann zu Chrome zurückkehren und aktualisieren. Da gehen wir hin. Bugs sind wirklich einfach im Nachhinein zu sehen. Je mehr Sie programmieren, desto besser werden Sie beim Auffinden von ihnen. Während dieser Klasse können Sie ein paar häufige Fehler haben. Der erste und größte Bug sind Rechtschreibfehler. Sehen Sie [unhörbar], es sind die kleinen Käfer, die oft die größten Kopfschmerzen verursachen. Ich würde vorschlagen, zu kopieren und einzufügen, wo Sie können. Die zweite ist die Groß-/Kleinschreibung. Wenn Ihre Bilder nicht durchkommen oder es kein CSS gibt, wenn Sie Ihre Website online anzeigen, besteht eine gute Chance, weil Sie versuchen, auf eine Datei zuzugreifen, die nicht vorhanden ist. Auf Ihrem Computer kann der Zugriff auf Avatar JPEG funktionieren, da Avatar JPEG und Avatar JPEG als dasselbe angesehen werden, da das Dateisystem Ihres Computers die Groß- und Kleinschreibung nicht berücksichtigt. GitHub sieht sie jedoch als separate Dateien, da GitHub die Groß- und Kleinschreibung beachtet. Überprüfen Sie also die tatsächlichen Datei- und Ordnernamen im Vergleich denen, die Sie in Ihrem HTML und CSS geschrieben haben. Um dies zu verhindern, wählen Sie eine Standardmethode, um Ihre Dateien zu benennen und halten Sie sich daran. Ich bevorzuge es, alles in Kleinbuchstaben zu benennen und Bindestriche anstelle von Leerzeichen zu verwenden. Dies wird als Kebab-Fall bezeichnet. Ein drittes häufiges Problem besteht darin, beim Schreiben von CSS-Selektoren einen Punkt vor einem Klassennamen zu vergessen . Wenn Ihre Elemente also nicht die Stile erhalten, die Sie geschrieben haben, könnte dies das Problem sein. Wenn Sie Ihren Kopf auf Ihren Schreibtisch klopfen, weil etwas nicht funktioniert, machen Sie eine Pause, gehen Sie spazieren, schauen Sie aus dem Fenster oder erklären Sie das Problem jemand anderem, auch wenn sie nicht wissen, wie man kodiert. Wenn Sie Hilfe von jemandem erhalten können, der codiert, fragen Sie ihn. Aber erst, nachdem Sie versucht haben, das Problem selbst zu debuggen. Wenn du meine Hilfe willst, gebe ich sie gerne. Aber um mir zu helfen, Ihnen zu helfen, übergeben Sie Ihren Code und synchronisieren Sie ihn mit GitHub.com. Sagen Sie mir, an welcher Lektion Sie festhalten. Beschreiben Sie, was passiert. Beschreiben Sie, was Sie denken, sollte passieren, und dann sagen Sie mir, was Sie bekommen einen Benutzernamen ist. Dann werde ich versuchen, dir zu helfen. 12. Deine eigene Website: Wenn Sie Lust haben und Ihre eigene Website mit Ihrer eigenen speziellen URL haben möchten, müssen Sie einen Domain-Namen erwerben und Ihre Dateien auf einem Server hosten. Sie können Github verwenden, um Ihre Dateien zu hosten und Ihre Domain auf Github zu verweisen. Oder Sie können ein Website-Hosting-Unternehmen verwenden, das Ihnen die Möglichkeit bietet, eine Domain zu kaufen und die Website mit ihnen zu hosten. Ich fand, dass dies die einfachste Option ist. Ich werde nicht mehr über Hosting während dieser Klasse chatten, aber ich habe einige Links und Möglichkeiten, um Ihre Website online in der Klasse Ressourcen zu bekommen enthalten . Es gibt auch nur wenige Rabatte. 13. Das Ende (Party): Dies ist das Ende der Klasse, aber hoffentlich ist es nur der Anfang Ihrer Codierungsreise. Ich hoffe, du hattest Spaß. Ich hoffe, Sie haben viel gelernt, und ich hoffe, Sie werden von nun an mehr von Ihrer nervigen Seite umarmen. Was diese Klasse Ihnen gibt, ist eine Basis, auf der Sie mehr darüber lernen können. Es gibt jede Menge mehr zu lernen und es kann wirklich Spaß machen, Websites für sich selbst, für Freunde und für Kunden zu erstellen. Wenn Sie es noch nicht getan haben, müssen Sie feiern. Sie haben gerade eine Website erstellt. Hallo fünf selbst, lassen Sie einen Whoop, tanzen, springen Sie auf und ab, rennen Sie herum wie eine verrückte Person. Gut gemacht. Wenn Sie Ihre Charaktere Website nicht in Ihrem Skill Share-Projektraum freigegeben haben, tun Sie es. Ich würde gerne die Website sehen, die Sie erstellt haben. Wenn Sie diese Klasse genossen haben, hinterlassen Sie bitte eine Bewertung. Es bedeutet mir viel, und achten Sie darauf, mir zu folgen und dem taptapkaboom Fanclub auf taptapkaboom.com beizutreten. Wenn Ihnen die Art und Weise gefällt, wie ich unterrichte , habe ich eine Reihe von Klassen zu verschiedenen Themen und mehr auf dem Weg. Das war's für mich, tschüss vorerst. 14. Bonus: Absolute und relative URLs: Wie kann ein Browser wissen, welches Bild angezeigt werden soll oder welche CSS-Datei verwendet werden soll, um unsere Website zu gestalten oder wohin wir zu bringen, wenn wir auf einen Link klicken. In diesen und vielen weiteren Fällen geben wir dem Browser eine Webadresse der Datei, auf die wir zugreifen wollten. Nun ist der richtige Name oder der richtige Name für die Webadresse U-R-L, was für Universal Resource Locator steht. Es klingt wirklich futuristisch und kompliziert, aber es ist nicht so schlimm. Was ist eine URL? Nun, ich mag es als eine Reihe von Richtungen zu betrachten , die wir dem Browser geben können, wo man eine Datei findet. Nun, es gibt zwei Möglichkeiten, dies zu tun. Einer ist mit einer absoluten URL und zwei mit einer relativen URL. Was ist der Unterschied zwischen einer absoluten und einer relativen URL? Stell dir vor, wir sind bei einem Freund und du fragst mich, wo wohnst du? Ich könnte sagen, 22 lange Straßen, 1701CA, Amsterdam, die Niederlande. Dies ist wie eine absolute URL, sie ändert sich nie und es ist immer die gleiche. Ich könnte auch sagen, nun, du gehst aus der Haustür und biegst links ab, du gehst weiter, bis du zur langen Straße kommst, dann rechts abbiegst, und dann bin ich Nummer 22. Dies ist wie eine relative URL. Die Wegbeschreibungen ändern sich je nach aktuellem Standort. Mit einer absoluten URL beginnen wir mit der Domain, in der sich die Datei befindet, wie taptapkaboom.com. Dann teilen wir unserem Browser mit, in welchen Ordnern man schauen soll. Jeder Name, gefolgt von einem Schrägstrich, entspricht dem Ordner auf dem Server oder Dateisystem. Schließlich enden wir mit dem Dateinamen und der Erweiterung. Mit einer relativen URL starten wir automatisch von der Adresse, an der sich der Browser gerade befindet, ohne dies explizit sagen zu müssen. Wir fügen dann eine Kombination von relativen Pfadkomponenten zusammen , die dem Browser mitteilt, in welchem Ordner oder Datei sich befindet. Dann enden wir mit einem Dateinamen und einer Erweiterung. Was sind diese relativen Pfadkomponenten? Lasst uns jetzt darauf eingehen. Der erste ist ein Schrägstrich. Wenn wir mit einem Schrägstrich beginnen, teilt es dem Browser mit, auf der obersten Ebene Ordner oder Basis-URL der aktuellen Domain zu starten. Dies kann nützlich sein, wenn Sie einige Ordner tief sind und auf eine Datei in der Nähe des Ordners der obersten Ebene zugreifen möchten. Die zweite relative Pfadkomponente ist Punktschrägstrich. Wenn wir dies verwenden, weist es explizit den Browser an, den aktuellen Ordner zu verwenden. Der Browser tut dies standardmäßig, also verwende ich kaum einen Punktschrägstrich. Der nächste Pfad Komponenten ist Punkt, Punkt Schrägstrich Wir verwenden dies, um dem Browser mitzuteilen, dass er eine Ordnerebene nach oben gehen soll. Ich benutze das die ganze Zeit, es ist ziemlich üblich. Die endgültigen Pfadkomponenten sind ein Ordnername gefolgt von einem Schrägstrich. Dadurch wird der Browser in einen Ordner mit diesem Namen geleitet. Das ist super üblich. Mit einem Pfad zu einem Dateinamen können wir mehrere Punkt-, Punktschrägstriche und Ordnernamen zusammen kombinieren , um den Browser-Anweisungen zu der Datei zu geben. Wann verwenden wir absolute URLs und wann verwenden wir relative URLs? Sie müssen für nichts eine relative URL verwenden, aber sie sind oft viel schneller zu schreiben und viel kürzer, was Ihren Code viel einfacher zu lesen und zu schreiben macht. Normalerweise verwende ich relative URLs, wenn sich die Datei in derselben Domäne befindet, besonders wenn sie nur ein oder zwei Ordner entfernt ist. Wenn Sie möchten, dass der Browser auf eine Datei auf einem anderen Server oder einer anderen Domäne zugreift, müssen Sie eine absolute URL verwenden. Wenn Sie beispielsweise eine CSS-Datei aus Google-Schriften laden oder zu einer HTML-Datei auf einer anderen Website navigieren möchten, müssen Sie eine absolute URL verwenden. Wenn Sie die Wahl zwischen einer relativen URL und einer absoluten URL haben, fragen Sie sich, welche URL für mich und mein Team einfacher zu lesen und zu schreiben ist und welche weniger Fehler und weniger Probleme verursachen wird. Das sind zwei wirklich wichtige Faktoren, die zu berücksichtigen sind. Lassen Sie uns jetzt einige Beispiele abdecken. In diesem Beispiel möchte ich eine Verknüpfung von index.html zu about.html innerhalb des Ordners Pages erstellen. Dann möchte ich einen Link innerhalb von about.html erstellen und dann zu index.html verlinken. Lassen Sie uns in Sublime Text springen. Was wir hier haben, ist ein Tintenelement oder ein Link. Wenn ich darauf klicke, führt mich der Browser zu einer Seite. In den href-Attributen gehe ich nach Pages, dann about.html. Ich könnte hier zum Punktschrägstrich gehen, aber das ist unnötig. Ich werde das rückgängig machen, speichern Sie das und gehen Sie dann zu Google Chrome. Dann ist das meine index.html Seite. Wir werden zum gebrochenen Bild kommen, aber ich werde dies aktualisieren und auf die About Seite klicken. Da gehen wir. Es führt uns auf die „Über“ -Seite. Sie werden sehen, dass sich die URL ändert, sie hat jetzt pages/about.html. Gehen wir zurück zu Sublime Text und öffnen about.html. Jetzt möchte ich die Startseite besuchen. Was ich hier tun muss, ist go dot, dot slash, und das öffnet den vorherigen Ordner. Ich könnte dann index.html schreiben. Mal sehen, wie das funktioniert und gehen Sie zurück zu Chrome Refresher. Klicken Sie auf die Startseite. Da gehen wir. Es bringt mich zurück zu index.html, und das bringt mich zurück zu about.html. In diesem Beispiel werden wir eine Datei finden, die in das Quellattribut eingefügt werden soll. In meinem Finder habe ich diese silly-face.jpeg, erstaunlich, ich weiß. Dann habe ich in meinem Bild-Ordner diese frog-face.jpeg, ein weiteres erstaunliches Bild. Ich weiß. Die Datei, in der wir uns im Moment befinden, ist unsere index.html, und das ist in den Wurzeln von Offsite. Hier sind wir, index.html, und jetzt muss ich ein Bild für dieses Bildelement finden. Ich werde für silly-face.jpeg gehen, und ich tippe das nur ein. Drücken Sie die Eingabetaste Ich werde das retten. Ich gehe zu meinem Browser und aktualisiere hier. Da gehen wir. Da ist mein Ein-Gesichts-Bild. Wenn wir zurück zu Sublime Text gehen und in den Image-Ordner gehen, was wir hier tun können, ist ein IMG eingeben, das ist der Ordnername und dann Schrägstrich, was bedeutet, dass es in den Image-Ordner schauen wird, und statt dumme Gesicht, wir werden frog face.jpeg verwenden. Das will ich nicht wieder. Ich werde speichern, dass und gehen Sie zurück zu Chrome, aktualisieren, und da gehen wir. Froschgesicht ist da. Das ist wirklich cool. Wir haben einen Ordnernamen und dann den Dateinamen mit einer Erweiterung verwendet. Dies ändert sich ein wenig, wenn wir zurück zu erhaben gehen und auf Seiten gehen und zu unserer about.html Seite gehen. Ich werde das aufmachen und hier drüben, was wir tun wollen, ist wieder Zugang zu dummen Gesicht. Ich werde für Punkt, Punkt Schrägstrich gehen , der eine Falte nach oben geht, und dann dumme face.jpeg eingeben und das speichern. Gehen wir zu Chrome. Aktualisieren. Ich gehe zur About Seite. Da gehen wir. Du hast mein dummes Gesicht. Wenn wir dann auf das Froschgesicht zugreifen wollten, müssen wir Punkt, Punkt Schrägstrich und dann zurück in den Images Ordner gehen . Wir gingen einen Ordner hoch und jetzt gehen wir in den Bilderordner für Froschgesicht. Da gehen wir. Ich werde das retten. Gehen Sie zurück zu Chrome und aktualisieren Sie. Da gehen wir, da ist mein Froschgesicht. Sie können hier in erhabener sehen, dass wir verschiedene relative Pfadkomponenten verwendet haben um auf dieselben Bilder zuzugreifen, da wir aus einer anderen Datei gestartet haben. In diesem Beispiel möchte ich eine Google Fonts in meiner Website verwenden. Ich habe diese große Schrift namens Bangers gefunden. Ich werde darauf klicken. Ich werde dann sagen, wählen Sie den Stil, und dann werde ich diesen Knopf hier drücken. Ich werde all das auswählen. Ich werde das kopieren, zu Sublime Text gehen, und dann füge ich das so ein, super. Sie können hier sehen, dass es https://und diese lange URL sagt. Nun, das ist eine absolute URL und es gibt keine Möglichkeiten, dass wir dafür absolute URL verwenden können. Da gehen wir. Zwei relative URL-Beispiele und ein absolutes URL-Beispiel. Das ist das Ende dieses Videos. Für mehr Sachen wie diese, und ebnen Sie Ihre kreativen Superkräfte für das taptapkaboom.com.