Die Grundlagen von HTML: Eine Einführung in Webentwicklung für komplette Anfänger:innen

1. HTML 101: Eine Einführung in die Webentwicklung für Anfänger:innen: Hallo und willkommen bei HTML one-to-one, einem Anfänger-Leitfaden zum Codieren. Werfen wir einen Blick darauf, was in diesem Kurs behandelt wird. Als erstes werden wir ein Codierungsprogramm installieren. Dann werden wir einen Blick auf das werfen, was HTML ist und wie man es schreibt. Wir werden viele praktische Erfahrungen sammeln. Und schließlich werden wir ein kleines Projekt haben, in dem wir eine HTML-Webseite erstellen. Aber warum sollten Sie HTML lernen? Ehrlich gesagt, es ist die zugrunde liegende Knochenstruktur hinter jeder einzelnen Website. Sie können eine Website nicht ohne HTML anzeigen. Sie müssen HTML kennen und um in andere Web-Entwicklung zu gelangen. Wenn Sie ein Web-Entwickler werden wollen, wenn Sie nur Websites für Hobby machen wollen, müssen Sie HTML kennen. Es ist sehr leicht zu erlernen, sollte nur ein paar Tage dauern, um wirklich zu erfassen. Aber vor allem ist das Lernen von HTML der erste Schritt, um zu lernen, wie man kodiert. Hallo, mein Name ist Caleb erzählt und heute werde ich dein Lehrer sein. Ich bin Senior Web Developer und Premium Coding Instructor. Ich habe mehr als 300 Tausend Studenten beigebracht, wie man erfolgreich programmiert. Und wieder einmal willkommen bei HTML 101, einem Anfänger-Leitfaden zum Codieren. Sobald Sie bereit sind, gehen wir weiter und beginnen mit der ersten Lektion. 2. Was ist HTML?: In Ordnung, lassen Sie uns einen Blick darauf werfen, was HTML ist. Also, was ist HTML? Html steht für Hypertext-Markup-Sprache. Es ist eigentlich keine Programmiersprache. Es wird eine Skriptsprache genannt, aber es ist immer noch absolut wichtig für die Web-Entwicklung. Und 100% aller Websites verwenden HTML. Html ist die Struktur hinter jeder Website im Internet ist das Rückgrat hinter jeder einzelnen Website. Und dann schichten wir Mantel auf HTML. Aber ohne HTML, ehrlich gesagt, gibt es keine Website und das ist keine Meinung, das ist nur eine Tatsache. So funktionieren Websites und das Internet. Das erste, was Sie in der Webentwicklung lernen sollten, ist HTML. Werfen wir einen Blick auf HTML im Vergleich zu HTML5. Sie werden oft sehen, Leute sagen, lernen HTML5 oder HTML5, dies oder HTML5, dass. Aber HTML5 ist eigentlich die letzte Version von HTML und es wird nur immer HTML5 genannt und schließlich wird es nur HTML genannt. Es gibt also kein HTML sechs auf der Straße, es gibt keine sechste Iteration von HTML. Wann immer Sie HTML5 sehen, können Sie sich HTML5 und HTML als genau dasselbe vorstellen. Und das ist, weil sie genau das Gleiche sind. 3. Einrichtung machen: Okay, lassen Sie uns einen Blick auf das Setup werfen. Erster. Du brauchst einen Texteditor. Ich schlage VS Code sehr vor. Es ist kostenlos und es funktioniert auf allen Betriebssystemen. Bevor wir also etwas tun, stellen wir sicher, dass wir VS Code installiert haben. Und ich gehe nur zu Google diese VS Code herunterladen und ist codiert dot Visual Studio.com. Und das ist das Textbearbeitungsprogramm, das wir in diesem Kurs verwenden werden. Nun, wenn Sie bereits Code geschrieben haben und Sie einen anderen Texteditor haben , den Sie bevorzugen, ist das in Ordnung. Aber wenn Sie noch nie Code geschrieben haben, gehen wir weiter und laden Sie dieses Programm herunter. Also für mich, in diesem Kurs, ich benutze einen Mac. Aber es spielt keine Rolle, ob Sie Mac oder Linux oder Windows verwenden, es wird dasselbe Programm sein, genau über alle drei Betriebssysteme hinweg. Windows 78 oder zehn. Stellen Sie sicher, dass Sie diese herunterladen. Wenn Sie auf einem Mac sind, laden Sie diesen herunter. Und wenn Sie unter Linux sind, laden Sie eines dieser beiden herunter. Sobald Sie VS-Code heruntergeladen und installiert haben, stellen Sie sicher, dass Sie Ihren Texteditor wie folgt öffnen können. Ihre wird also ein bisschen anders aussehen. Sobald Sie es öffnen, wird Ihre eine andere Farbe sein, aber letztendlich ist es genau die gleichen Programm-Köpfe, nur eine andere Farbe, weil ich die Zugänglichkeit dahinter mag. Ich mag es, in der Lage, Sachen hier reinzuschreiben. Und es ist eine ziemlich einfache Farbe für Sie, auf Ihrem Bildschirm zu lesen. So werden Sie nur ein wenig anders in den Farben aussehen, aber das allgemeine Layout wird genau das gleiche sein. Stellen Sie also sicher, dass Sie VS-Code heruntergeladen und installiert haben. Und wenn du das hast, lass uns zur nächsten Lektion gehen. 4. HTML-Syntax: Okey-Dokey. Werfen wir einen Blick auf die HTML-Syntax. Jetzt ist das Wort, das ich hier sage, Syntax. Und alles, was bedeutet, ist das Styling, das Sie etwas schreiben. So hat Englisch eine besondere Syntax mit Apostrophen, Perioden, Fragezeichen, Kommas, solchen Dingen. Es ist wie ein Markup dafür, wie wir eine Sprache schreiben. Und das Schreiben von Code ist nicht anders. Es gibt bestimmte Regeln, die wir haben. Also zuerst, lassen Sie uns voran gehen und schauen uns einige HTML-Syntax an. Typischerweise sieht es so aus. Wir haben eine Art von Elementen. Und es öffnet sich so und schließt sich so. Jeder von ihnen wird also ein Tag genannt, dies als ein öffnendes Tag. Und das ist ein schließender Tag. Und es hat immer, immer, immer, immer, ein Kleiner-als-Zeichen. Dann das Wort des Elements, welches Element auch immer ist, und es gibt viele von ihnen. Und dann ein Größer-als-Zeichen. Und dann, um ein Element zu beenden, machen wir dasselbe. Wir öffnen es. Und dann sagen wir eigentlich, dass dies kein öffnendes Element ist, das ist ein schließendes Element und wir sagen das mit einem Schrägstrich und dann dem Wort. Und dann schließen wir es wieder mit einem Größer-als-Zeichen oder Symbol. Jetzt haben Sie vielleicht bemerkt, dass ich das auf eine andere Zeile gesetzt habe, und das ist eigentlich OK. Html kümmert sich nicht wirklich um zusätzlichen Leerraum, also spielt das keine Rolle. All das, all diese zusätzlichen Linien zwischen Linie vier und Linie 11, es ist nicht wirklich wichtig, ehrlich zu sein. Wir werden darüber ein wenig später ausführlicher reden. Also diese ganze Sache hier, das nennt man ein Element. Jetzt innerhalb dieser Elemente können wir Text haben. Also bekommen wir, sagen wir, etwas Text hier drin. Und was ein Browser tun wird, ist dann zu sagen, Hey, es gibt ein bestimmtes Element hier und es schließt sich hier, und was auch immer im Inneren ist, wenden Sie diese Regeln darauf an. Was auch immer die Elementregel ist, vielleicht so fett, machen Sie diesen Text fett ist, was tun wird. Und wir werden auch in Zukunft über kühn sprechen. Aber im Moment müssen Sie auch wissen, dass das Element kein echtes Element ist. Wir gehen hier nur über die Syntax. Nur damit das Sinn ergibt. In den nächsten Lektionen. Die andere Sache, die wir haben können, sind diese Dinge, die Attribute genannt werden. Und das geht tatsächlich in ein Element. Also, was ich tun werde, ist, das auf seine eigene Linie zu teilen, und das ist okay. Es wird im Grunde genau das gleiche für Ihren Browser sein, denn wieder, es kümmert sich nicht um diesen zusätzlichen Platz da drin. Also haben wir diese Dinge namens Attribute und dann geht es Attributname gleich ist. Und dann können Sie entweder zwei Apostrophe wie dieses oder zwei Anführungszeichen wie dieses haben. Und dann können wir hier einen Wert setzen, eine Art Text. Also können wir hier einen Text sagen. Jetzt können wir mehrere Attribute haben. Wir können, sagen wir, ein Titelattribut haben. Und wieder, Sie müssen nicht wissen, was das ist, wird all dies in zukünftigen Lektionen abdecken. Auch hier gehen wir gerade über die Syntax, und dies ist ein Beispiel für ein zweites Attribut. Zweites Attribut. Hier können wir mehr und mehr haben, können wir tatsächlich unbegrenzte Anzahl von Attributen haben. Attribute sind wie Elemente. Ein Element hat eine Regel, die Ihr Browser lesen wird. Also, wenn das fett wäre, Sie Browser, es ist ein mutigster Text. Und nur weil ich hier ein Attribut schreibe, bedeutet das nicht wirklich, dass es etwas tun wird. Nun ein gutes Beispiel dafür, weil dies überhaupt nicht wertvoll ist, Attribut ist kein gültiges Attribut in HTML. Wir könnten einfach schreiben Titel ist gleich, und dann was auch immer der Titel ist, und Titel ist eigentlich ein richtiges Attribut. Und Sie können diese, uh, die meisten Ihrer HTML-Elemente haben. Wieder werden wir darüber in Zukunft sprechen. Sie müssen sich das auch nicht auswendig lernen. Denn während Sie dies schreiben, Ihre Finger anfangen, mehr und mehr zu tippen, werden Sie sich mit der Funktionsweise von HTML vertraut machen und wie es aussieht. Also das große Takeaway hier ist, das ist dein Element und du hast ein öffnendes Tag, und diese ganze Sache ist ein Tag. Sie haben ein schließendes Tag und alles, was es umfasst, ist Ihr Element. Als nächstes haben wir Attribute, wie das title-Attribut. Und so geht es, der Attributname ist gleich, dass er dieses Gleichheitszeichen braucht. Fügen Sie keine Leerzeichen davor oder danach hinzu. Stellen Sie sicher, dass es ganz ist. So haben Sie Ihr Attribut ist gleich. Und dann entweder Zitate, Apostrophe. Jetzt ist der Haken, wenn es mit einem Anführungszeichen geöffnet wird, muss er mit einem Anführungszeichen enden. Andernfalls, wenn es sich mit einem Apostroph öffnet, muss es sich innerhalb eines Apostrophen schließen. Und Sie können tatsächlich sehen, dass VS-Code dies für mich hervorgehoben hat. Er sagt, hier unten ist alles gleich. Und das nennt man Syntax-Hervorhebung. Aber sobald ich dieses Zitat durch ein Apostroph ersetzt habe, weil dieses Attribut mit dem exakt gleichen Zeichen öffnen und schließen muss. Diese Syntax-Hervorhebung funktionierte. Nun, wenn Ihre Syntax-Hervorhebung nicht sofort funktioniert und Sie als Video folgen und Sie versuchen zu tun, was ich tue. Geh hier runter und das wird wahrscheinlich Klartext sagen. Sie können auf diese klicken und Sie können HTML eingeben und einfach auf diese klicken und es wird Ihre Syntaxhervorhebung für Sie ändern. Das ist also alles, was es zu dieser Lektion gibt. Sie brauchen zu diesem Zeitpunkt nichts zu tun. Es ist einfach wirklich wichtig zu wissen, dass diese ganze Sache ein Element ist. Dies ist ein öffnendes Tag. Dies ist ein schließendes Tag. Das ist dein innerer Inhalt. Und dieser Kerl hier ist ein Attribut. Lass das für einen Moment reinsinken. Sobald Sie bereit sind, gehen wir über die nächste Lektion, in wir über die HTML-Grundstruktur jeder Seite sprechen. 5. Die Grundstruktur: Okay, werfen wir einen Blick auf die Basisstruktur jeder einzelnen Webseite. Also habe ich VS Code hier geöffnet und ich gehe einfach zu File New, das ist eigentlich außerhalb meines Aufnahmebereichs. So ist es nur Befehl oder Control N oder Datei, Neue Datei. Und Sie werden diese brandneue Akte sehen. Lassen Sie uns voran gehen und ändern Sie dies von Nur-Text zu HTML. Und was wir hier tun können, ist automatisch zu füllen. Also haben wir hier eine nette Abkürzung, also müssen wir uns nicht daran erinnern, dass dies HTML Doppelpunkt fünf ist. Und dann, wenn Sie Tab drücken, sollte es für Sie automatisch die Emmett-Abkürzung verwenden. Das sehen Sie auf der rechten Seite meines Bildschirms hier. Also lassen Sie uns voran und drücken Sie Tab. Und das macht all das Zeug für mich. Ich werde ein paar Dinge löschen, nur weil wir es jetzt nicht brauchen, und es könnte ein bisschen verwirrend sein. Und ich werde diese Einrückung ändern , nur damit wir uns ein Nestchen ansehen können, und ich werde darüber reden, ich werde in einer Sekunde darüber reden. Aber lassen Sie uns diese Zeile für Zeile durchgehen. Also Zeile Nummer eins, das ist die seltsamste Art von Elementen, die Sie sehen werden. Sie sehen nicht zu oft Elemente, die mit einem Ausrufezeichen beginnen , doc-Typ ist der einzige. Also sagen wir, hey Browser, wenn Sie diese Datei nicht lesen, dass es eine HTML5-Datei ist. Es ist eine HTML-Datei. Es ist kein PDF, es ist kein Klartext, ist kein JavaScript, es ist kein CSS, es ist kein Bild, es ist keine Schriftart, es ist keine Art von anderem Dokument. Es ist eine HTML-Seite, also bitte rendern Sie sie wie eine HTML-Seite. Als nächstes in Zeile zwei haben wir ein öffnendes Tag namens HTML, und hier geht all unser HTML tatsächlich. Und dann in Zeile neun schließen wir, dass Tags sagen, dass alles hier drin in diesem HTML-Tag und neidisch Code leben wird, Sie können tatsächlich auf diesen kleinen Pfeil klicken und Sie können ihn zusammenbrechen, was wirklich schön ist. Wenn Sie also jemals zu viel Code haben, werden Sie ein wenig überwältigt. Sie können Ihren Code immer zusammenklappen. Als nächstes haben wir zwei Hauptteile zu jeder einzelnen Seite. Wir haben unseren Kopf. Wieder, das ist ein öffnender Kopf Elemente, in Ordnung, Tag eher. Und das ist ein schließender Head-Tag. Und diese ganze Sache ist das Hauptelement. Und Sie können das tatsächlich genau wie HTML sehen. Und wir haben ein anderes Element in hier genannt Titel. Aber dieser ist innerhalb von Kopf verschachtelt und Kopf ist innerhalb von HTML verschachtelt. Und dann haben wir hier ein Titelelement, das nur den Titel der Seite ändert. Also, wenn Sie auf eine Webseite gehen, wie diese, wenn wir VS-Code vor ein paar Lektionen heruntergeladen. Es ändert diesen Titel hier oben für Sie. Das ist, was das Titelelement tut. Jetzt können Sie alle möglichen Dinge in Ihrem Kopf haben, aber Sie können sich das Kopfelement als buchstäblich den Kopf an Ihrem Körper vorstellen. Es ist dein Gehirn. Es enthält all diese zusätzlichen Informationen. Es ist also nicht vollständig visuell, aber es enthält zusätzliche Informationen. Dein Körper ist genau wie der Körper, in dem du lebst. Es ist das, was die Leute sehen werden. Wenn ich also nur als Beispiel auf diese Seite zurückkehre, ist alles hier drin Teil des Körpers. Also alles, was visuell ist, der interaktive Teil Ihrer Webseite, das ist der Körper. Und wir werden den größten Teil unseres Codes dort hineinlegen. Also lasst uns voran gehen und hier ein Beispiel machen. Und lasst uns einfach Hallo Welt schreiben. Und was ich tun werde, ist, das zu retten. So Datei Speichern unter. Und wohin soll ich das hinwerfen? Werfen Sie das auf meinen Desktop. Ich werde diesen Hello World dot HTML nennen. Ich habe bereits einen, also lasst uns voran gehen und das ersetzen. Nun, was ich in meinem Browser tun kann, wie ich wieder bekomme , kann ich zur Datei gehen, aber dieses Mal werde ich zu Open file gehen. Also ist es Befehl o oder o, wenn Sie unter Windows sind, ich glaube, es muss Desktop. Und lasst uns die Hallo Welt eröffnen. Und das ist eine Webseite. Nun, wenn Sie diesem Video folgen, auf jeden Fall fühlen Sie sich frei, an dieser Stelle zu pausieren und versuchen, den Code, den ich in diesem Video geschrieben habe, auszuschreiben. Es ist nicht sehr viel Code und es ist wirklich einfach, mit VS Code zu schreiben. Denken Sie daran, HTML Doppelpunkt fünf und drücken Sie dann Tab. Und das wird das alles für Sie automatisch vervollständigen. Und dann schreibe einfach etwas in dein Körperelement. Also habe ich gerade Hallo Welt geschrieben, und das zeigte sich als Text auf meiner Seite. Wenn Sie dies tun, speichern Sie Ihre Datei und öffnen Sie sie dann in Ihrem Browser. Und du siehst Hallo Welt. Dann hey, herzlichen Glückwunsch, Sie haben buchstäblich gerade Ihre erste Webseite gemacht. Also mein Vorschlag ist, dass eine Chance zu geben, weil dies immer wirklich, wirklich gute Praxis ist und das ist wirklich einfach an dieser Stelle. Also ja, mein Vorschlag ist, das eine Chance zu geben. Sobald Sie mit Ihren Ergebnissen zufrieden sind oder vielleicht möchten Sie dies nicht geben und Sie möchten mit der nächsten Lektion fortfahren. So oder so, lassen Sie uns gemeinsam zur nächsten Lektion gehen und wir beginnen, über das Titelelement zu sprechen. 6. Seitentitel: Ok. Hallo und willkommen zurück. In dieser Lektion gehen wir weiter und sprechen über diesen Kerl hier, das Titelelement. Also in der letzten Lektion haben wir diese Seite namens hallo Welt erstellt. Und ich werde das einfach löschen. Und das ist die Seite, die wir ursprünglich hatten, und es sagte Dokument dort oben, direkt in dieser Registerkarte. Also lassen Sie uns fortfahren und aktualisieren, und wir werden es sehen, wie der Dateiname und der mit dem Dateinamen hier übereinstimmt. Also hallo Unterstrich Welt Punkt HTML. Hallo Unterstrich Welt Punkt HTML. Das Gleiche. Nicht wirklich elegant, nicht das, was Ihre Nutzer suchen, nicht suchmaschinenfreundlich. Aber wir können das mit einem Titelelement ändern. Und so werde ich Titel Schrägstrich Titel schreiben. Lassen Sie uns voran gehen und die Köpfe auf eine Django-Vorlage setzen. Aber ich möchte dies von einer Django-Vorlage in eine HTML-Datei ändern. Also lasst uns hier voran gehen und diesen Titel ändern. Sagen wir Hallo von Caleb. Und erfrischen Sie sich. Und Sie können immer mit dem Befehl R aktualisieren oder ich glaube, die Kontrolle ist. Ich benutze übrigens nur Google Chrome, spielt keine Rolle, welchen Browser Sie verwenden. Aber Sie können einfach die Seite neu laden und es sagt hallo von Caleb und Sie können das jederzeit ändern. Wir könnten Hallo von der Erde sagen. Und Sie könnten File Save tun oder Sie können Steuerung S oder Befehl S drücken, glaube ich, es ist. Ja, Command S auf einem Mac, ich glaube, es ist Control S unter Windows. Gehen Sie einfach vor und speichern Sie die Datei. Gehen wir zurück, aktualisieren Sie diese Seite. Hallo von der Erde. Und so ist das Titel-Tag. Nun, Sie sollten immer nur ein Titel-Tag haben, weil es wirklich nur einmal verwendet wird. Sie Tags titeln müssen, wird Ihr Browser nicht wissen, welche zu verwenden ist. also sicher, dass Sie nur den einen Titel-Tag haben. Nun ist die Sache darüber, dieses spezielle Element, dieses Titelelement, es muss innerhalb des head-Elements leben, und das muss innerhalb Ihrer HTML-Elemente leben. Also, jetzt kommen wir ins Verschachteln. Wir haben dieses HTML-Element, und innerhalb davon haben wir Kopf Titel, schließendes Element, und wir haben Körper Inhalt schließendes Element. Und das ist alles, was es gibt, um einen Titel in einem Tab hier oben mit HTML entstehenden einfach zu erstellen. Sobald Sie sich damit unwohl fühlen, gehen wir über die nächste Lektion und wir beginnen mit dem Hinzufügen von tatsächlichen Inhalten zu einer Seite. Es sagt also nicht nur hallo Welt, es wird sagen hallo Welt und vielleicht ein Titel, den wir einen Absatz schreiben könnten, wir können mehrere Titel haben, Dinge wie das. 7. Absätze und Überschriften: Okay, werfen wir einen Blick auf Absätze und Kopfzeilen. Und hier wird eine Seite tatsächlich anfangen, hier ein wenig zusätzliche Form anzunehmen. Es wird also nicht nur Hallo Welt sagen. Jetzt ist ein Absatz, und wie viele Elemente in HTML ist nur ein p-Tag. Aber weil es ein Element ist und es ein ziemlich Standard-Element ist, können wir p tun und dann machen wir Schrägstrich p. Und das ist wieder, das ist nur unsere Syntax. Dies ist unser öffnendes Tag oder schließendes Tag. Und das Ganze zusammen ist ein Element. Also p steht für Absatz, aber wir schreiben nicht Absatz, wir schreiben nur p für Absatz. - Hier. Wir können entweder einen Text hier schreiben oder wenn Sie Ihren Code schön und sauber halten möchten, können wir voran gehen und ihn in separate Zeilen setzen. Also werde ich die einfach in getrennten Zeilen halten. Ich denke, es sieht auf diese Weise etwas sauberer aus. Und was ich tun werde, ist Lorem zu tippen, Tab zu drücken. Und es füllt meinen Textbereich mit einem Haufen Lorem Ipsum, lateinischen Wörtern. Ich habe keine Ahnung, was das bedeutet, aber es ist eine übliche Sache, die Sie in der Web-Entwicklung sehen werden. Also lasst uns voran gehen und sparen. So können Sie auf Datei gehen, Speichern oder Befehl S oder Control S auf einem Fenster. Gehen wir zurück zu der Seite, die wir erstellen, und klicken Sie auf „Aktualisieren“. Und jetzt haben wir diesen Lorem ipsum Text. Nun gehen wir weiter und erstellen Sie einen Titel für diese Seite, eine Kopfzeile. Also nur innerhalb des Körpers, über dem P-Element, nicht in ihm, sondern darüber. Wir werden H1 schreiben. Und das Schöne an VS Code ist, wenn Sie ein Element schreiben, wenn es Emmett Abkürzung sagt, können Sie einfach Tab drücken. Also habe ich Tab gedrückt und es schreibt meinen Code für mich und dann kann ich etwas auf der Innenseite schreiben. Sie können sagen, Willkommen bei HTML 101. Gehen wir weiter, speichern Sie die Seite. Kehren Sie zurück zu unserem Browser und klicken Sie auf Aktualisieren. Wir haben diesen großen Text hier, HTML, Willkommen bei HTML 101 und dann lorem ipsum hier. Nun, wenn dies auf Ihrem Bildschirm kleiner aussieht, ist, weil ich tatsächlich auf eine 175% gezoomt. Deiner sollte etwas mehr so aussehen. Ich habe das gerade größer gemacht, so dass es einfacher ist, auf Ihrem Bildschirm zu sehen. Das ist nicht der einzige Größentitel, den wir haben können. Wir können H2, H3, H4, H5, H6 Elemente haben. Lassen Sie uns also voran und erstellen Sie ein H2-Tag. Und das könnte wie ein Untertitel sein, ein Anfänger-Leitfaden zum Programmieren. Und so können Sie sehen, dass ich hier ein bisschen schneller werde, aber die Syntax bleibt gleich. Dies ist ein öffnendes HTML-Tag, ein H2-Tag, und dies ist ein schließendes. Wieder, Sie haben diesen Schrägstrich und dann den Elementnamen, und das sagt nur, dass alles in hier eine H2-Schriftgröße sein muss. Und alles in dem zwischen den beiden H1-Tags muss super groß sein. Und alles zwischen den beiden Absatz-Tags ist Ihr Absatz nur allgemeine Texte zum größten Teil. Also, sparen Sie das. Lasst uns hier rüber drehen und mal sehen, wie ein H2 aussieht. Es sollte zwischen diesen beiden Textabschnitten richtig sein. Und Sie können sehen, dass es ein bisschen kleiner ist. Was ich möchte, dass Sie jetzt für einige praktische Erfahrung tun, ist, ein H1, H2 zu erstellen, aber dann auch ein H3 zu erstellen, ein H4, H5, H6 zu erstellen. Und wieder, alles, was ich hier tue, ist, einen Elementnamen einzugeben. Sobald Emmett Abkürzung kommt, kann ich Tab drücken und es erstellt das H6-Element für mich. Also gehen Sie weiter und schauen Sie sich an, wie H1 bis H6 aussieht. Fügen Sie hier einen zusätzlichen Text hinzu. Lol BBQ. Gehen Sie weiter und speichern Sie das. Und wenn Sie über die Seite blättern und Aktualisieren drücken, überprüfen Sie die verschiedenen Kopfzeilengrößen. Und du könntest ein bisschen überraschend sein, wenn H6 so aussieht. 8. Whitespace: Whitespace spielt keine Rolle. Jetzt habe ich das wirklich früh erwähnt, aber Whitespace spielt keine Rolle. Sie können sehen, dass ich tatsächlich ein Element hier habe, ein H2. Eigentlich ist diese ganze Sache ein Element. Und ich habe keine Abstände, keine neuen Zeilen oder so. Es ist nur ein H2O-Eröffnungs-Tag, ein Haufen Steuern und dann ein H2-Abschluss-Tag. Aber mit einem Absatz habe ich das p-Element hier, und dann habe ich das tatsächlich in eine neue Zeile gebrochen. Hinzugefügt eine Reihe von zusätzlichen Leerzeichen hier. Und dann, ganz am Ende, brach ich es auf eine neue Zeile, ein paar zusätzliche Leerzeichen. Jetzt ist es Ihrem Browser egal, wie viele Leerzeichen es gibt. Es wird versuchen, alles auf jeden Fall in einem Raum zu verdichten. Also als Beispiel, Lassen Sie uns voran und fügen Sie ein Leerzeichen direkt nach dem Wort ipsum. Ich füge nur ein paar Leerzeichen hinzu. Wenn wir nun einen Zeitungsartikel schreiben, würde das schrecklich aussehen. Es wären zwei Worte, ein Komma, und dann all diese verschiedenen Leerzeichen. Und die kleinen Punkte, die du siehst. Nachdem ich diese Basis hervorgehoben habe, die mir nur sagt, dass es ein Raum ist, der ist, das ist nicht wirklich, dass sie mir nur sagen, dass es einen Raum gibt. Also lasst uns voran gehen und das speichern. Gehen Sie zu Ihrem Browser und lassen Sie uns aktualisieren. Und wir werden sehen, sobald ich auf „Erfrischen“ klicke, wird sich absolut nichts ändern. Also lasst uns diese Seite neu laden. Ich kann das 100 Mal nachladen. Nichts sieht aus, als würde es sich ändern. Wenn wir jedoch gehen, wenn wir irgendwo auf der Seite klicken, können wir mit der rechten Maustaste auf Seite Quelle gehen. Und wir können all unseren Quellcode sehen und das ist genau das, was ich in VS-Code geschrieben habe. Und Sie können sehen, dass alle Räume da sind. Aber Ihr Browser sagt, nein, Sie brauchen nicht all diese Leerzeichen. Lassen Sie uns das in nur einen visuellen Raum komprimieren, damit Leerzeichen keine Rolle spielen. Ein weiteres Beispiel hier ist, dass ich all diese neuen Zeilen hinzufügen könnte und es gibt eine Reihe neuer Zeilen. Sie können tatsächlich sehen, dass es so viele neue Zeilen gibt , die wie ich den Code nicht mehr wirklich lesen kann. Und gehen wir weiter und fügen noch mehr Lorem hier hinzu. Also Lorem Tab und ich sollten zwei Absätze haben, oder? Ich sollte diesen ersten Absatz haben. Und ich kann diesen Leerraum loswerden, weil es egal ist. Ich habe drei neue Zeilen und dann habe ich einen weiteren Absatz. Nun, intuitiv, würden Sie denken, dass es zwei Absätze für uns schaffen würde. Das wird es nicht tun. Also, wenn ich das speichere, Flip auf den Browser, was Sie sehen werden, ist, dass diese zusammen kombiniert werden. Und wieder, es nahm all diese neuen Linien und zerquetschte sie in einen einzigen Raum für dich. Nun, wenn Sie mehrere Absätze möchten, aber Sie müssen tun, ist, dass Sie dieses Absatzelement schließen müssen. Das ist nahe, dass Absatzelement und dies schafft, dass es seinen ersten Absatz gewonnen hat. Lassen Sie uns das zusammenbrechen und gehen wir hier hoch. Und wir müssen das einfach wieder öffnen. Und ich werde dir in einer Sekunde zeigen, was ich hier mache. Alles was ich tat, war , dass ich das erste Element hier oben geschlossen habe und ein neues hier unten wieder geöffnet habe. Wenn wir uns das also zusammen ansehen, dann haben wir Absatz 1, Absatz zwei. Sie sind nicht verschachtelt. Es ist kein Absatz innerhalb eines Absatzes. Es ist ein Absatz. Und dann schließen wir es und dann einen zweiten Absatz, und wir schließen das. Gehen wir also weiter und klicken Sie auf Speichern. Und jetzt, wenn wir unsere Seite aktualisieren, werden wir sehen, dass dies eigentlich zwei separate Absätze sind, so wie wir es wahrscheinlich wollten. Also die Lektion hier ist Leerzeichen spielt keine Rolle. Wenn Sie zusätzliche Leerzeichen verwenden möchten. Es gibt Möglichkeiten, dies zu tun, wie zum Beispiel Ihre Texte in verschiedenen Absätzen oder verschiedenen H1 oder verschiedenen h Zweien. Und es ist nur ein weiteres Beispiel. Lassen Sie uns, gehen Sie weiter und lassen Sie uns sehen, was passiert, wenn ich dies auf eine neue Zeile setze, direkt in meinem H1, nur um das zu demonstrieren, dass dies nicht nur für Absätze spezifisch ist. Also werde ich das retten. Gehen Sie hier rüber, drücken Sie „Aktualisieren“, und es steht nicht auf einer neuen Linie. Und wieder, das liegt daran, dass unser Browser nicht trägt, obwohl wir den Code auf diese Weise geschrieben haben, ist es unserem Browser egal, dass er diesen zusätzlichen Leerraum hat. Also werde ich einfach weitermachen und das aufräumen. Löschen Sie einfach diesen zusätzlichen Leerraum, weil ich mag, dass mein Code nett und ordentlich ist. Und das ist es, was wir noch haben. Als nächstes werfen wir einen Blick auf die Verschachtelungselemente ein wenig mehr. Wir haben es tatsächlich bereits mit HTML, Kopftitel, Körper H1, H2 und Absatz gemacht . Diese sind verschachtelt, aber lassen Sie uns in eine Terminologie eingehen. 9. HTML-Elemente: Gut, werfen wir einen Blick auf die Verschachtelung von Code. Also haben wir tatsächlich bereits unseren HTML verschachtelt. Und was das bedeutet, ist, dass wir ein HTML-Element haben. Und dann im Inneren, anstatt nur normale Texte, wie wir mit einem Absatz oder einer Überschrift eins, Überschrift zwei sehen , haben wir ein anderes Element und dann können wir ein anderes Element haben. Und das kann im Wesentlichen für immer weitergehen. Nun, was ich tun werde, ist meine Seite nach unten scrollen knapp unter meinen beiden Absätzen, die ich habe. Und ich werde ein neues Element erstellen, das ein div genannt wird. Oder wenn Sie die Emmett-Abkürzung DIV verwenden möchten. Und dann, sobald Sie em bei der Abkürzung hier sehen, gehen Sie vor und drücken Sie den Tab-Buchstaben auf Ihrer Tastatur und es füllt es für Sie. Jetzt bedeutet ein div ehrlich nichts. Wir werden mehr über divs auf der Straße sprechen, aber es tut nichts, wie ein Absatz Ihren Text trennen wird. Zum Beispiel wird ein Absatz Ihren Text hier trennen. Es ist wie ein netter kleiner Abstand da drin und dann schafft es einen anderen für dich. Ein div tut das nicht wirklich. Also lassen Sie uns voran gehen und sagen, dass dies ein div-Element ist. Gehen Sie voran und speichern Sie das, aktualisieren Sie Ihre Seite. Es wird sagen, dass dies ein div-Element ist. Und jetzt innerhalb dieses Elements, und das wird zuerst ein wenig seltsam aussehen, aber wir haben ein div-Element. Und dann können wir einen Text drin haben. Wir können auch ein anderes div hier drin haben. Wir können div sagen. Dies ist ein verschachteltes Element. Und wir schließen das auch ab. Lassen Sie uns fortfahren und diese Seite aktualisieren. Und wir werden sehen, dass es direkt danach auf der Leitung auftaucht. Aber diese ganze Sache ist in ein div eingewickelt. Nun ist eine gute Möglichkeit, dies zu betrachten, mit der rechten Maustaste auf Ihre Seite. Gehen Sie zu Inspect. Und ich werde das hier ein bisschen größer machen. Whoops, das war zu groß. Und lassen Sie uns zurück nach unten scrollen und wir können den Mauszeiger über die Elemente hier drin bewegen. Und so ist das unser Inspekt-Tool. Es ist unglaublich hilfreich. Sie werden dies für so ziemlich alles Front-End-verwandte verwenden wollen. Also HTML, CSS und JavaScript auf der Straße. Aber jetzt lassen Sie uns einfach bei HTML bleiben. Und was wir hier haben, ist ein div. Und wir können dieses div öffnen und wir können sehen , dass es einige Texte gibt und Sie können sehen, dass, wenn ich darüber schwebe, es tatsächlich ändert, was auf meiner Seite ausgewählt ist. Und dann haben wir ein untergeordnetes Element und das heißt es, wenn es verschachtelt ist, es ist ein untergeordnetes Element. Und das steht in der zweiten Zeile. Wir könnten auch eine Schicht tiefer gehen. Also habe ich das auf eine neue Zeile gesetzt, nur um Code schön und ordentlich zu halten. Und ich könnte noch ein DIV machen, oder lasst uns experimentieren. Und lasst uns einen Absatz innerhalb eines div machen. Dies ist ein Absatz. Gehen Sie weiter und speichern Sie das. Schlag auf meinen Browser und klicke hier auf Aktualisieren. Und Sie können sehen, wie ich über die Dinge schwebe, wird mir zeigen, was genau ein ausgewähltes. Also habe ich hier ein div-Element, und es wählt sowohl das verschachtelte div als auch den Absatz aus. Während hier oben nur den einen Absatz gleichzeitig auswählt. Sie können das sehen, wenn ich zwischen ihnen blättere. Also hier habe ich das übergewölbte, das Containerelement heißt div. Und dann habe ich einen Text und dann habe ich ein anderes div, und dann habe ich in diesem div, einen Absatz dort, ich habe Text hier und dann habe ich einen Absatz hier. Und Sie können tatsächlich sehen, dass dieser Absatz einen Haufen Abstand um ihn herum hat, so dass er Ihren Text etwas nach unten stößt. Werfen wir einen Blick auf einige Terminologie hier. Das hier. Dies wird Ihr übergeordnetes Element sein und dies wird ein untergeordnetes Element sein. Also, was das normalerweise aussieht, ist, dass Sie eine Art übergeordnetes Element Schrägstrich und dann ein schließendes Tag wie das haben. Und dann haben Sie eine Art von untergeordneten Elementen und das Schließen dieses Tags wieder dort, es spielt keine Rolle, ob Sie zusätzlichen Leerraum haben. Sie können das auf mehrere Zeilen setzen, wenn Sie wollen, was ich eigentlich tun werde. Und dann können wir eine Schicht tiefer gehen. Wir könnten das ein Enkelkind nennen, Enkelkind Element Schrägstrich Enkelkind. Und das kann weitergehen und weiter und weiter für immer. So können wir sagen, Enkelkind zu schaffen. Und er geht weiter und weiter. Jetzt wird sich die Terminologie ändern, je nachdem, wovon Sie sprechen. Also, wenn ich Enkelkind und Urenkel loswerde, wenn wir hier drin arbeiten. Das ist unser Hauptelement. Das wurde ein Kind genannt. Und wenn wir über das Element um es herum sprechen, das, das es so umschließt, das ein übergeordnetes Element genannt. Nun, wenn wir an dem übergeordneten Element arbeiten und wir über ein Element in ihm sprechen wollen . Wir würden es ein Kind nennen. Jetzt sind wir, die Terminologieänderungen ist, wenn wir Enkelelement haben und das ist das, an dem wir arbeiten, und das ist unser Hauptelement. Nehmen wir an, wir sprechen mit einem Kollegen über dieses besondere Element. Wir würden dies nur das Element nennen, was auch immer es ist, vielleicht ist es ein DIV. Das Kind würde dann das Elternteil werden. Elternteil würde dann der Großeltern werden. Und so ist es relativ, genau wie in einer Familienhierarchie. Jetzt ist keines davon tatsächlich reale Elemente. Also lasst uns voran gehen und diese löschen. Und nur für Mittel, Iz lassen Sie uns voran gehen und fügen Sie ein h3-Element hier hinzu, nur ein kleiner Titel. Und es heißt, dies ist ein Beispiel für die Verschachtelung von Elementen. Also speichere ich die Datei und ich werde das aktualisieren. Und lassen Sie uns unsere Inspektion schließen, mit diesem X hier drüben. Dies ist ein Beispiel für die Verschachtelung von Elementen, und dies ist alles in einem Element. In der nächsten Lektion werden wir sehen, warum das Verschachteln eigentlich sehr, sehr wichtig ist , denn das war momentan nicht sehr wichtig. Wir mussten das überhaupt nicht verschachteln, aber wir mussten wissen, wie das funktioniert, um zur nächsten Lektion zu gelangen. Lassen Sie uns in der nächsten Lektion einen Blick auf Fettdruck, Kursivierung und Unterstreichen Ihres Textes werfen. Und dann werden wir alle drei mischen und aufeinander abstimmen. 10. Fett, Kurses und Unterlagen: Alles klar, willkommen zurück vom verschachtelten Video. Lassen Sie uns voran gehen und tatsächlich etwas schaffen, das hier anwendbar ist. Also werde ich nur etwas Platz zum Arbeiten machen, nur weil ich viel zusätzlichen Platz mag. Und wieder, Whitespace spielt keine Rolle, wir wissen das richtig? Also lassen Sie uns hier einen neuen Absatz erstellen, und lassen Sie uns dieses Absatz-Tag automatisch schließen. Und hier drinnen schreiben wir sie tiefer. Hit Tab und wir bekommen ein paar Lorem ipsum, genau wie wir es vorher getan haben. Wenn wir nun einige Texte fett formatieren wollen, denken Sie, es wäre das Wort fett. Es ist nicht ganz so intuitiv, aber es ist ziemlich nah. Wir verwenden nur das b -Tag. Also könnten wir B tun und lassen Sie uns fett die ersten vier Buchstaben oder Wörter oder andere. Und so habe ich ein p-Tag, einen Absatz und verschachtelt als untergeordnetes Element ist das fett Element. Und so speichere ich das. Und wenn ich zu Google Chrome gehe und auf Refresh klicke, können Sie tatsächlich sehen, dass mein Text hier fett ist und der Rest nicht fett ist. Ok? Das ist also Verschachtelung und das kommt tatsächlich in etwas Interessanteres, ein wenig nützlicher, etwas mehr anwendbar, um HTML tatsächlich zu lernen. Als nächstes gehen wir weiter und lassen Sie uns kursiv. So kursiv geschrieben, um etwas tatsächlich zu machen, ist dies ein gutes Beispiel. Was auch immer ich dort gemacht habe, machte das kursiv. Also ist es eine Art Handschrift ish, I. Lassen Sie uns voran und fügen Sie diesen drei Wörtern ein i-Element hinzu. Und wenn ich die Seite aktualisiere, welche haben wir hier? Copa USD. Ich will nicht mal versuchen, das zu sagen, aber es sind die 30 Worte hier. Und wenn ich auf Refresh klicke, können wir sehen, dass sich das jetzt automatisch geändert hat. Schließlich haben wir Unterstriche und wirklich ist es genau das Gleiche. Sie würden also denken, es wäre unterstrichen, aber das ist es nicht. Wir verwenden eine Art Abkürzung, wenn es um HTML geht. Und wir sagen dir einfach, es ist das neue Element. Und wieder, das hat ein öffnendes und schließendes Tag. Alle drei haben öffnende und schließende Tags. Ich werde das speichern, hierher zurückkommen, auf Erfrischung drücken. Und wir können sehen, dass dies jetzt unterstrichen ist. Nun, wo das wirklich, wirklich interessant wird, ist, dass wir einen weiteren Absatz erstellen können. Und Laura, und du siehst, wie am schnellsten ist, weil ich diese Tab-Vervollständigung habe. Wenn ich dies fett, kursiv und unterstrichen machen wollte . Und lasst uns das einfach loswerden. Führen Sie dort nur eine Zeile statt zwei oder drei Sätze aus. Lass uns nur einen Satz machen. Ich kann sagen, dass Tab getroffen werden macht fett für mich. Und dann will es, dass ich meine SMS hier reinstelle. Nun, das ist nett. Aber was ich hier tun werde, ist, das alles zu schnappen. Ich werde Control X drücken oder Exon MAC befehlen. Das schneidet es einfach in meine Zwischenablage und steuert dann V oder Befehl V wie in Violett zum Einfügen. Und wenn ich spare, aktualisieren, werden wir sehen, dass wir jetzt einen mutigen Satz haben. Nun, wenn wir das auch kursiv machen wollten, ist es nicht BI für fett, kursiv, es ist nur b. Und dann drinnen sagen wir I. Also dann können wir hier rüber gehen, Tab drücken, um das etwas mehr einzurücken. Und Schrägstrich I. Eine Sache zu beachten ist auch, dass Ihr Text hier tatsächlich weit vom Bildschirm scrollen könnte. Sie können in Ihre Einstellungen gehen und Sie können Ihren Zeilenumbruch oder Ihre Textumbrucheinstellungen so ändern , dass er automatisch in zwei neuen Zeilen einbricht. So können Sie sehen, dass diese ganze Sache für mich Zeile 27 ist, obwohl es mehrere Zeilen umfasst, das ist nur so, dass es nicht eine lange Zeile rechts über die Seite ist und ich muss nach links und rechts scrollen. Ok, also habe ich einen Absatz hinzugefügt, fett, kursiv. Lassen Sie uns fortfahren und speichern und aktualisieren. Und jetzt ist das fett und kursiv. Das klappt also ziemlich gut. Schließlich fügen wir ein neues Element hinzu, und ich verschiebe diesen Text einfach schnell nach oben. Gehen Sie vor und speichern Sie die Datei, aktualisieren Sie. Und jetzt können wir sehen, dass es fett, kursiv und unterstrichen ist, aber es gibt eine Regel hier. Ihr inneres Tag, Ihr innerstes Tag, muss ein inneres, am meisten schließendes Tag haben. Wenn also das letzte, das Sie haben, ein u ist, ist das erste schließende Tag ein u. Wenn das zweite Element, das Sie hier haben, ein i ist ist das zweitletzte ein Schrägstrich I, dasselbe mit fett. Also beginnen wir mit fett hier und wir schließen und Sie können tatsächlich sehen, und deshalb habe ich es so eingerückt, damit Sie sehen können, dass diese auf diese Weise übereinstimmen. Sie möchten immer, dass Ihre Elemente auf diese Weise übereinstimmen. Lustige Dinge können passieren, wenn Sie nicht mit Ihren öffnenden und schließenden Tags übereinstimmen , das ist ziemlich wichtig. Also, an diesem Punkt, wenn Sie voran gehen und dies eine Chance geben wollen, versuchen wir, einen Absatz zu verschachteln. Erstellen Sie also ein Absatzelement. Dann fett deinen Text, kursiv deinen Text, unterstreichen Sie den Text. Und es spielt keine Rolle, ob es fett, kursiv oder unterstrichen oder eine andere Reihenfolge ist, es könnte kursiv sein, fett unterstrichen, fett, kursiv unterstrichen sein. Es spielt keine Rolle, solange diese übereinstimmen. Und dann fügen Sie etwas Text hinzu. Und ich möchte, dass du sicherstellst, dass dein Text beides ist. Sie sind nicht beides, aber alle. Es sollte fett, kursiv und unterstrichen sein, und es sollte in einem Absatzelement enthalten sein. Geh weiter und gib dem einen Schuss, sobald du bereit bist , weiterzumachen , und ich sehe dich in der nächsten Lektion. 11. Das div: Ok. Hallo und willkommen zurück. In dieser Lektion werden wir über ein div Elemente sprechen. Was ich hier tun möchte, ist, dass ich bereits einen Haufen Code habe und ich es einfach zusammenbrechen möchte, damit es für mich etwas lesbarer ist, weil das ziemlich lang wird. Und werde diesen zusätzlichen Leerraum los, nur weil ich mag, dass mein Code ordentlich ist. Und wenn wir wollten, könnten wir nur das Auge zusammenbrechen, nur die Perle, nur ein Absatz. Aber in dieser Lektion gehen wir weiter und sprechen über div. Div ist ein Dummy-Element. Und es bedeutet eigentlich gar nichts. Also, wie wir gesagt haben, steht P für Absatz B für fett, ich steht für kursiv. Div ist nur ein Divider. Und Sie können tatsächlich sehen, dass die MDM-Referenz hier von VS Code sagt, dass das div-Element überhaupt keine besondere Bedeutung hat. Es stellt seine Kinder dar. Es kann mit Klasse Lang und Titel-Attributen verwendet werden , um Semantik, Kommentar, bla, bla, bla zu markieren. Das Zeug wird für uns im Moment etwas zu weit fortgeschritten. Aber im Grunde hat diese erste Zeile, die besagt, dass das div-Element überhaupt keine besondere Bedeutung hat. Das ist wichtig. Es hat keine besondere Bedeutung. Nun, worüber wir hier sprechen werden, ist ein div hat keine besondere Bedeutung, das hat keine besondere Bedeutung. Aber lassen Sie uns auch einen Blick darauf werfen, wie es nebeneinander funktioniert. Denn in dieser letzten Lektion, in der wir fett, kursiv und unterstrichen haben, konnten wir alle drei davon verwenden. Und eigentlich ein besseres Beispiel ist dieses, wo wir einen Absatz hatten, aber dann hatten wir fett und dass fett Text neben dem regulären Text war. Und dann hatten wir Kursivschrift. Und dieser kursivierte Text war direkt neben dem normalen Text und dem zugrunde liegenden Text. Dasselbe, immer und immer und immer wieder. Und das kommt in dieses Konzept von Blockelementen im Vergleich zu Inline-Elementen. Ein div ist also ein Blockelement. Und was ich damit meine, ist, wenn ich Befehl C oder Kontrolle C drücke, und dann Befehl V oder Kontrolle V, habe ich die ganze Zeile kopiert. Und das ist eine zweite Zeile. Also lassen Sie uns voran und speichern Sie das, aktualisieren Sie unsere Seite hier. Und Sie können hier unten sehen, es steht nur, dass das keine besondere Bedeutung hat. Das ist eine zweite Zeile. Und wenn ich das tue, klicken Sie mit der rechten Maustaste und überprüfen Sie, wenn ich den Mauszeiger über das Element führe, können Sie tatsächlich sehen, dass diese blaue Linie, die über die gesamte Seite geht, das ist ein Blockelement. Also, auch wenn es eigentlich nur den, den Raum von braucht , hat dies keine besondere Bedeutung. Sie können tatsächlich sehen, dass das die gesamte Linie einnimmt. Das nennt man Blockelemente. Und du wirst das die ganze Zeit sehen, weil es wirklich gut ist, es zu wissen. Der Grund dafür liegt darin, dass zum Beispiel, wenn dieser Absatz hier oben kein Blockelement dieser beiden Absätze wäre, zusammenführen würde und sie nicht tatsächlich Absätze wären. Es wäre ein Absatz, der mit dem zweiten Absatz zusammengeführt wird, um einen großen Absatz zu machen. Das ist nicht das, was wir ständig wollen. Und so ist das Schöne an diesem Absatz auch ein Blockelement ist, dass es die volle Breite Ihres Bildschirms aufnehmen wird. Es wird so viel Immobilien aufnehmen, wie es möglich ist. Gehen wir also zurück zu unserem Code und lassen Sie uns sogar versuchen, diese Seite an Seite in unseren Code zu setzen. Also öffnet es ein div und schließt es, öffnet ein anderes div und schließt es. Lass uns die Aktualisierung speichern, und wir werden sehen, dass sich nichts geändert hat. Nichts hat sich geändert, buchstäblich hat sich nichts geändert. Und das ist wieder, weil dies Blockelemente sind. Also unser Browser-Set, okay, Sie haben ein Element schließt ein anderes Element, das es schließt. Im Werkzeug „Inspektion“. Das ist genau das, was unser Browser sieht. Dies wurde für uns behoben, also ist es auf zwei verschiedenen Linien. Und wieder sind sie beide Blockelemente, also nehmen sie so viele mögliche Leerzeichen ein, die sie durch das Element selbst voneinander trennen können . Nun ist dies ein seltsames Konzept, aber in der nächsten Lektion werden wir über Blockelemente im Vergleich zu Inline-Elementen sprechen, und wie Sie sie zusammen verwenden können und was der Unterschied ist. 12. Blockelemente vs. Inline-Elemente: Okay, lassen Sie uns einen Blick auf Blockelemente im Vergleich zu Inline-Elementen werfen. Bisher haben wir hauptsächlich mit Blockelementen gearbeitet. Jetzt ist ein Blockelement, wenn ich mit der rechten Maustaste klicke und inspizieren, können Sie sehen, dass es die gesamte Breite meiner Seite einnimmt, obwohl es tatsächlich nur verwendet, was 30% des Textes tatsächlich sagen. Ordnen Sie die gesamte Breite der Seite auch für dieses bestimmte H2-Element, Absätze oder Blockelemente zu. H 3s, H 4-5-6, sogar die ganz oben auf der Seite. Aber was nicht ist, wenn wir hier nach unten gehen, haben wir diesen speziellen Absatz mit verschachtelten Elementen. Jetzt hat das Nächste nichts damit zu tun. Wichtig ist, dass dieses B-Element für fett nicht die gesamte Breite der gesamten Seite einnimmt. Es sitzt tatsächlich nebeneinander mit Ihrem regulären Text. Und dann haben wir kursiv, regulären Text unterstrichen, und dann einige mehr regulären Text jetzt unterstreichen, kursiv und fett. Diese werden als Inline-Elemente bezeichnet und alles, was bedeutet, dass sie nebeneinander mit anderen Elementen existieren können. Während Absatz, können Sie sehen, dass ich nur Text bis etwa hier. Wenn ich den Mauszeiger über das rechts neben der Stelle, an der ich diesen Text ausgewählt habe, beansprucht er immer noch diesen zusätzlichen Platz. Das ist ein Block-Elemente. Jetzt müssen Sie keine Inline-Elemente innerhalb eines Blockelements haben. Obwohl normalerweise das ist, was Sie am Ende tun werden, aber dafür gibt es keine Regel. Es ist nur, das ist ein Inline-Element. Und wir könnten kursiv neben fett setzen, direkt neben dem zugrunde liegenden. Es spielt keine Rolle, weil es ein Inline-Element ist. Es wird also die geringste Menge an Platz im Vergleich zu Blockelementen einnehmen , wie hier unten. Dieses div ist ein Blockelement. Dieses div ist ein Blockelement. Und es wird die gesamte Breite aufnehmen. Nun sind einige Anwendungsfälle fett, kursiv und unterstrichen. Aber auch wenn Sie ein Blockelement wollten, könnten Sie einen Titel verwenden, den ich H1 bis H6 kann, und das wird Ihren größeren Text in eine eigene Zeile setzen. Und was schön daran ist, dass wir hier bereits einen Titel haben. Willkommen bei HTML 101. Wir haben hier einen Untertitel mit einem h2-Element. Und dann haben wir ein paar Absätze. Dies sind alle Blockelemente und das ist, was unsere Seite schön aussehen lässt. Nun, wenn aus irgendeinem Grund diese fett, Wir sind ein Blockelement, und ich werde Ihnen zeigen, wie das aussehen wird. Aber versuchen Sie es nicht. Ich möchte nicht, dass Sie das versuchen, weil dies aus dem Bereich von HTML ausbricht, aber ich werde Ihnen zeigen, wie das aussieht. Block anzeigen. Also, was ich gerade dort geschrieben habe, musst du es nicht versuchen. Aber ich habe es geändert. Ich habe sein Standardverhalten entführt, um Block anstelle von Inline zu sein. Und Sie können sehen, dass fett jetzt auf einer eigenen Linie steht. Und deshalb sind Inline-Elemente sehr wichtig. Denn wenn Sie Fett in einer eigenen Zeile haben, haben Sie nie die Möglichkeit, einen bestimmten Text in einem Absatz auszuwählen und ihn fett, unterstrichen oder metallisch zu machen. Jetzt gibt es viele verschiedene Elemente , die inline sind und es gibt viele von ihnen, die blockiert sind. Und so müssen Sie diese Art entdecken, während Sie sich durch das Lernen von HTML bewegen. Es gibt zu viele Elemente, die möglicherweise Abdeckung, es gibt wahrscheinlich Hunderte von ihnen. Aber größtenteils wirst du jeden Tag eine Handvoll davon benutzen. Und Sie müssen den Unterschied zwischen einem Blockelement wie diesem, das ich entführt habe, oder einem Inline-Element kennen. Damit Sie Ihren Text tatsächlich auf menschlich lesbare Weise vorzeigbar machen können. Das ist also der Unterschied zwischen Blockelementen und in Linienelementen. 13. Verknüpfung mit anderen Seiten: Okay, also besteht das Web aus Links zu anderen Seiten. Das ist wirklich alles, was es ist. Y haben hier eine Seite, aber was ist, wenn ich zu Google verlinken wollte oder was, wenn ich auf eine andere Seite meiner ersten Dinge verlinken wollte? Beginnen wir zunächst mit der einfachsten Form. Lassen Sie uns einfach auf Google oder Facebook oder Instagram oder so etwas verlinken. In dieser Lektion werden wir also zwei verschiedene Arten von Links erstellen. Die erste, und ich habe gerade zu VS Code hier gekippt. Wie der erste wird ein Link nur zu Google sein. Und das ist ein absolutes Glied. Der zweite wird eine relative Verbindung sein. So beginnt ein Link mit dem a Element, und das steht für Anker. Es ist ein Hypertext-Anker. Das sehen wir hier drüben. Vielen Dank VS Code für das Ausfüllen, die mich informiert. Also haben wir ein Anker-Tag und dies verwendet tatsächlich unser erstes Attribut. Wir haben noch kein Attribut verwendet. Und das wird HREF sein. Und das steht für eine Hypertext-Referenz. Und im Grunde werden wir so auf eine andere Webseite verweisen. Jetzt ist es schon eine Weile her. Aber ein Attribut ist immer der Attributname gleich. Und dann entweder Zitate oder Apostrophe, sie müssen mit dem gleichen beginnen und enden. Es spielt keine Rolle, welche Sie verwenden, muss aber mit dem gleichen beginnen und enden. Und lassen Sie uns voran gehen und schließen das ein Tag. Und sagen wir, das ist ein Link. Und mal sehen, was passiert. Wenn ich hierher zurückgehe und meine Seite aktualisiere. Sieht aus wie ein Link. Aber wenn ich darauf klicke, geht es nicht wirklich irgendwohin. Was ich hier tun möchte, ist HREF gleich, und ich möchte den vollständigen Link zu jeder Website einschließlich des HTTP-Teils, der lebenswichtig ist. Sie benötigen das HTTP jedes Mal, wenn Sie einen absoluten Link möchten. Gehen wir also weiter und gehen Sie zu Instagram.com. Alles, was ich dort getan habe, war HTTP oder HTTPS. Die meisten Websites haben, dass s In diesen Tagen, Doppelpunkt Schrägstrich und dann die Website, so Instagram.com. Und eigentlich ist dieser Schrägstrich nicht einmal notwendig. Gehen wir weiter und speichern Sie das und aktualisieren Sie es. Und wenn ich hier rüber gehe, sehen Sie, dass sich der Link tatsächlich zu einem blauen geändert hat, weil ich ihn noch nicht angeklickt habe. Und lasst uns auf den Link klicken und uns das ansehen. Es brachte mich zu Instagram. Also gehe ich zurück. Und vielleicht will ich Instagram nicht, vielleicht wollte ich etwas weniger Persönliches. Gehen wir zu Google. Also geh weiter, speichere, aktualisiere. Und Sie können unten links sehen, es heißt HTTPS, Google.com. Klicken Sie darauf. Und Boom, es bringt uns zu Google. Und das ist alles, was es gibt, um wirklich einen Link zu jeder Seite hinzuzufügen, die Sie haben. Also wieder, es ist das ein Element für Anker. Das HREF-Attribut ist gleich Zitat und dann Ihre Website-URL, dieser Link und dann Text. So können wir sagen, dass dies zu Google gehen wird. Und weil das auf zwei Zeilen in meinem Editor geht, setze ich das einfach auf zwei verschiedene Zeilen. Und wieder spielt Leerzeichen keine Rolle. Es spielt also keine Rolle, dass ich all diese verschiedenen Räume hier drin habe, und ich kann immer noch zu meinem Browser zurückkehren und Aktualisieren drücken. Und das einzige, was den Text ändert, nicht den zusätzlichen Abstand. Und so änderte es den Text. Dies wird zu Google gehen. Und das tut es. Nun, das ist schön, aber was, wenn Sie auf Ihre eigene Webseite verlinken wollen? Nun, das ist ein bisschen anders, weil Sie hier oben sehen können, gibt es kein HTTPS, das ist eine Datei und Sie könnten theoretisch darauf verlinken, aber Sie wollen nicht, denn während ich auf einem Mac bin, also beginnt es mit Datei, aber Wenn Sie unter Windows sind, beginnt es mit C. Und wenn Sie unter Linux sind, ist es nur ein Schrägstrich. Es wird also nicht für jeden funktionieren. Und wir müssen sicherstellen, dass das auf jedem Betriebssystem funktioniert. Und die Art und Weise, wie wir umgehen, ist mit einem relativen Link. Ein relativer Link sieht also fast identisch mit einem absoluten Link oder einem absoluten Anker aus. Und wir können tun, ein HREF ist gleich, wir haben unsere Zitate in hier. Und lasst uns gehen und sagen zweite Seite Punkt HTML. Schließen Sie das öffnende Tag und sagen Sie Dies geht auf die zweite Seite. Und wir sind immer nah dran. Jedes Mal, wenn wir Text innerhalb eines Elements haben, schließen wir ihn immer mit einem schließenden Tag. Und schauen wir uns das an. Und wir können sehen, dass diese Links nebeneinander sind. Wir wissen also aus der letzten Lektion, dass dies Inline-Elemente sind , weil sie nebeneinander funktionieren, was bedeutet, dass wir sie gut in einen Absatz einfügen können. Und wenn ich darauf klicke, geht auf eine zweite Seite unten links, Sie können tatsächlich sehen, dass es an Benutzer Caleb geht, italienische Desktop, zweite Seite Punkt HTML, und das existiert eigentlich nicht. Wenn ich also auf diesen Link klicke, geht es zu einer 404-Seite. 404 bedeutet nur, dass Ihre Seite nicht existiert, da Ihre Datei nicht gefunden wurde, möglicherweise verschoben oder gelöscht wurde. Hervorheben: Wenn Sie Dateien von einem Ordner in einen anderen Ordner verschieben, können sie verschoben oder gelöscht werden. Und im Grunde heißt es, dass die Datei nicht existiert. Also lasst uns weitermachen und diese Datei existiert. Ich werde diese Registerkarte schließen, weil das nicht nötig ist. Und lasst uns das machen. Ich werde diese ganze Seite kopieren. Und ich gehe Akte, Speichern unter. Und wo immer Sie halloworld dot HTML haben, und lassen Sie uns diese 1 zweite Seite dot HTML nennen. Speichern. Und so haben wir jetzt eine zweite Seite Punkt HTML. Und ich kann Datei öffnen oder Befehl oder Control O und öffnen hallo Welt. Und jetzt haben wir zwei Akten nebeneinander. Also die zweite Seite eins, was ich tun werde, ist, dass ich so ziemlich alles in der Leiche löschen werde. Also lasst uns gehen und das ganze Zeug löschen. Lassen Sie uns den Titel in die zweite Seite ändern. Und sagen wir ein H. Dies ist die zweite Seite. Das ist alles, was wir tun werden. Also habe ich das gerettet. Und wenn ich hierher zurückkomme, existiert das jetzt an diesem Dateispeicherort auf meinem Computer. Und wenn ich auf Refresh klicke, funktioniert es tatsächlich. Also, wenn ich zurückgehe, aktualisieren Sie das nur für eine gute Hauswirtschaft. Wenn ich das aktualisiere und ich sage, dass dies auf die zweite Seite geht, war es 414. Es wurde gesagt, es gab eine fehlende Datei oder fehlende Seite. Jetzt ist es nicht jetzt, es wird tatsächlich die Seite für mich laden. Schließlich, auf unserer zweiten Seite, gehen wir weiter und fügen Sie einen weiteren Ankerlink zurück zu unserer Hello World Seite. Und sagen wir Hallo World dot HTML. Nun ist die Sache, die hier im Auge zu behalten ist, dass dies kein absolutes Glied ist. Es beginnt nicht mit HTTP, es ist kein absoluter Link. Dies sagt nur, gehen Sie zu dieser bestimmten Datei, die sich im gleichen Ordner wie die zweite Seite befindet. Diese befinden sich also nebeneinander im selben Ordner. Und es wird sagen, oh, suchen Sie nach dieser speziellen Akte. Es verlinkt also tatsächlich mit einer anderen Datei, nicht notwendigerweise einer Webseite. Und es wird ein wenig darüber, wie Seiten tatsächlich auf einem Server bedient werden. Grundsätzlich, weil der Server nur der Computer eines anderen ist. Aber dieser könnte sagen: Geh zurück nach Hause, speichere, erfrischen. Gehen wir zurück nach Hause. Ich werde das hier nur noch einen Hauch größer machen. Das ist also unsere zweite Seite. Geh zurück nach Hause. Und jetzt haben wir zwei Seiten, die miteinander verlinken. Und wenn Sie uns einen Schuss geben und das zum Laufen bringen, bedeutet das, dass Sie erfolgreich ein Netzwerk von Seiten erstellt haben. Sie haben jetzt nicht nur eine Webseite, auch eine Website. 14. Opening in neuen Fenster: Okay, werfen wir einen Blick auf das Öffnen eines Links in einem neuen Fenster. So wissen wir wahrscheinlich alle, dass Sie steuern oder Befehl klicken Sie auf einen Link und dies wird sich in einer neuen Registerkarte öffnen. Und vielleicht wollen wir das nicht. Vielleicht möchten wir Menschen zwingen, jedes Mal, wenn sie auf einen Link klicken, in einer neuen Registerkarte zu öffnen, die die gleiche wie Rechtsklick und Öffnen Link in neuer Registerkarte sein könnte. Aber wenn wir das jemandem erzwingen wollen, haben wir tatsächlich diese Macht. Also werde ich zu helloworld dot HTML gehen, und für Google jedes Mal, wenn sie zu einer externen Seite gehen, weil dies eine interne Seite oder eine relative Seite ist, und dies ist eine externe Website oder ein absoluter Link. Wir können sagen, Ziel ist gleich, und dieser sieht ein wenig seltsam aus. Es gibt einen Unterstrich, aber Ziel ist gleich leer. Und so ist dies unser Attribut, ist gleich Apostroph Unterstrich leer ist der Wert muss, dass Unterstrich leer sein. Und dann unser schließendes Attribut, Anführungszeichen. Lass uns voran gehen und das speichern. Und lasst uns einfach diese Seite aktualisieren. Und jetzt sieht es nicht so aus, als hätte sich irgendetwas geändert. Aber wenn ich darauf klicke, werde ich nicht den Befehl Klicken oder Steuerelement klicken. Ich werde nicht mit der rechten Maustaste klicken und auf Link in neuer Registerkarte öffnen klicken. Ich werde nur auf diesen Link klicken und es wird automatisch in einem neuen Tab für mich geöffnet. Genau so haben wir jetzt zwei Registerkarten. Und so öffnen Sie einen Link in einer neuen Registerkarte. 15. Bilder hinzufügen: In Ordnung, schauen wir uns an, ein Bild zu unserer Seite hinzuzufügen. Also für ein Bild brauchen wir tatsächlich eine Bilddatei und ich gehe gerne zu diesem Ort namens Splash.com. Und wir können einfach kostenlose, lizenzfreie Bilder verwenden. Und ich will nur irgendein Bild. Es spielt keine Rolle, was das Bild ist, obwohl dieses ein ziemlich perfekter Laptop ist. Das ist ziemlich genau das, was ich will. Klicken Sie auf und ich werde diese herunterladen und ich werde die größte herunterladen , die ich will, nur damit ich wirklich machen kann. Es bekommt ein gutes Beispiel dafür in nur einer Sekunde, vielleicht nicht zu groß, das ist ein ziemlich großes Bild. Lassen Sie uns den großen herunterladen. Und jetzt geht das in meinen Downloads-Ordner. Und ich möchte, dass das neben meiner Hello World und der zweiten Seite lebt, und das ist auf meinem Desktop. Also muss ich diesen Ordner öffnen und auf meinen Desktop verschieben. Andernfalls wird das nicht funktionieren. Wenn ich diese Datei einfach hier kopiere, gehe zu meinem Desktop und füge sie ein. Und wo bist du? Genau da. Nennen wir das Bild von Calebs. Eigentlich ist es nicht mein Bild. Ich habe dieses Bild nicht aufgenommen. Xps nahm dieses Bild, aber ich werde es Calebs Bild nennen, nur um es einfach zu halten. Also gehen wir zurück zu hier und dann gehen wir, lass uns schließen. Das brauchen wir nicht mehr offen. Und lasst uns zu VS-Code gehen. Und jetzt fügen wir ein Bild hinzu. Jetzt ist das interessant, weil Bilder keinen Text haben, also kein schließendes Tag benötigen und die Antwort ist eigentlich nein. Also lassen Sie uns voran und erstellen Sie ein H3 und H4, H3, lassen Sie uns diese Bilder nennen. Und um ein neues Bild zu erstellen, ist das IMG-Tag. Es ist kein Bild, es ist IMG. Nun, wenn ich das schließe, gibt es zwei Möglichkeiten, das zu schließen. Dies ist also ein selbstschließendes Tag, das bedeutet, dass es kein Schrägstrich hat. So funktioniert das nicht, weil es keinen Text gibt, es gibt nichts anderes zu zeigen. Stattdessen werden wir ein Attribut verwenden. Und so können wir einfach sagen, es gibt hier ein Bild. Und du könntest tatsächlich so ein Ende sehen. Dies heißt XHTML ist, ist eine ältere Art, Dinge zu tun und völlig gültig, ich schreibe eine Menge Code auf diese Weise, weil ich ein wenig ältere Schule bin, aber es ist immer noch völlig gültig. Oder Sie können einfach IMG schreiben und Sie wollen die Quelle des Bildes. Der SRC für die Quelle ist gleich dem Bildpunkt von Caleb. Jetzt ist das wichtig. Sie müssen diese Dateierweiterung wissen. Und die Dateierweiterung hier war Punkt JPEG. Jpeg. Nun, wenn Ihr Großbuchstaben dot-dot, GAAP, G wie folgt oder so ist, stellen Sie sicher, dass es übereinstimmt. Es muss perfekt sein. Also meins war nicht, dass meins Dot JPEG war. Ich kann das speichern und nach unten scrollen, wo es auftauchen soll. Und wir werden dieses gigantische Bild sehen. Und das ist eigentlich der Grund, warum ich dieses riesige Bild hier wollte. Weil das ein wirklich großes Bild war. Nun, cool, das Bild ist aufgetaucht, aber es ist einfach viel zu groß. Nun können wir ein zweites Attribut hinzufügen. Wir können sagen, die Breite soll sein, und das wird in Pixeln sein, sagen wir 500. Lass uns voran gehen und das speichern. Und was das tun wird, ist, dieses Bild zu einer Breite von 500 zu machen. Und skaliere automatisch die Höhe für mich. Also, wenn ich mit der rechten Maustaste klicke und inspizieren, was daran cool ist, heißt es Breite 500. Aber Sie können tatsächlich sehen, wie ich über das Bild schwebe, es sagt, das Bild ist 500 mal 281 mal 0,25. Nun, wenn wir wollen, dass es dies verzerrt und ich weiß nicht, warum Sie es wollen, aber wenn Sie jemals ein Bild verzerren wollten, können Sie eine Breite und eine Höhe hinzufügen. Und man kann sagen, die Höhe wird sein, sagen wir 200. Also wird das jetzt ein bisschen abgeschaltet aussehen. Sie können sehen, dass es ein bisschen zerquetscht ist. Lassen Sie uns das ziemlich extrem machen und die Höhe auf 100 ändern. Jetzt haben wir 500 mal 100. Wenn ich den Mauszeiger darüber führe, können Sie tatsächlich in meinem Ansichtsfenster sehen, es heißt IMG 500 mal 100. Nun, vielleicht wollen wir ein Bild nicht um seine Breite skalieren. Vielleicht will einer von uns es nach seiner Höhe skalieren. Wir haben immer, und es wird Zeiten geben, in denen Sie ein Bild durch seine Höhe oder Gerechtigkeit mit dem einen oder anderen skalieren wollen , nicht unbedingt beides. Nehmen wir also an, aus welchem Grund auch immer wir mit einem Designer arbeiten und der Designer sagt nein, das Bild muss eine maximale Höhe von 100 Pixeln haben. Und wir sagen, OK, Höhe ist gleich 100. Speichern. Und lasst uns weitermachen und erfrischen. Dies ist jetzt eine Höhe von 100 und eine Breite. Was auch immer das automatisch war, ist 177.77. Und unser Browser funktioniert das für uns. So wie eine Zusammenfassung, könnten wir sagen, wir haben ein Bildelement. Es gibt kein schließendes Tag, weil , na ja, was werden wir schließen? Es gibt keinen Inhalt, der zwischen zwei Tags gesetzt werden muss. Wir verwenden hier Attribute. Die Quelle, der SRC ist gleich Caleb's Image.All JPEG. Und dies könnte auch ein Link zu einem bestimmten Bild im Web sein. Web, wie HTTP website.com Schrägstrich Image.All JPEG. Es könnte so etwas sein. Es kann absolute oder relative URLs verwenden. Und so verwenden wir eine relative URL. Wir haben ein zweites Attribut, Breite ist gleich 503. Die Attributhöhe ist gleich 100. Und das macht wirklich seltsam aussehende Bild. Und diese ganze Sache ist das Bildelement. Jetzt gibt es noch viel mehr, was wir hinzufügen könnten, und eigentlich werde ich das hier sowieso hinzufügen, zwei Dinge. Lass uns weitermachen, denn das wird irgendwie groß. Lassen Sie uns das auf separate Zeilen werfen, nur weil wir es können, weil Leerraum keine Rolle spielt. Und lassen Sie uns ein Alt hinzufügen. Und alt wird der Text sein, der angezeigt wird, wenn ein Screenreader versucht, Ihr Bild zu lesen, versucht zu beschreiben, was das Bild ist oder ob der Text oder nicht der Text, aber wenn das Bild bricht, welchen Text angezeigt werden soll, so zeig mir und lass uns voran und ändere dies zu fehlenden Punktbild. Das ist also keine Datei auf meinem Computer. Das wird nicht funktionieren. Dieses Bild wird für mich brechen. Und Sie können ein gebrochenes Bild sehen und es steht: Zeigen Sie mir, das ist der Alt-Text. Und wenn ich das einfach rückgängig mache, ändere ich es einfach auf dich zurück. Mein regelmäßiges Bild hier. Der gesamte Text wird nicht als perfekt angezeigt. Wir wollen nicht, dass es auftaucht. Wir wollen, dass das Bild erscheint, aber nur für den Fall, dass das Bild nicht erscheint, haben wir einen Rückfall. So fügen wir ein Bild hinzu. Was ich möchte, dass Sie jetzt tun, ist ein Bild zu Ihrer Seite hinzufügen, zu Ihrer Hallo Welt Seite. Denken Sie daran, dass Sie jede Art von Bildern erhalten können, die Sie von einem Splash.com wollen , und verwenden Sie einfach jedes Bild, das Sie mögen. Es spielt keine Rolle, was das Bild ist. 16. Ein Bild mit anderer Website verlinken: Ok, willkommen zurück. Hallo, hallo, hallo. Im letzten Video haben wir ein Bild erstellt. Wir verwenden den SRC, die Breite, Höhe und die ALT-Attribute in diesem Video. In dieser Lektion machen wir diesen Link zu einem Link. Denn wenn ich zurück zu meiner Seite gehe, kann ich nicht darauf klicken. Es geht nirgendwohin. Und wir brauchen das tatsächlich irgendwo hin. Nun, das brauchen wir nicht, aber vielleicht wollen wir das, vielleicht wollen wir, dass das auf unsere zweite Seite geht, Dot HTML. Gehen wir also voran und wickeln Sie unser Bild in einen Anker. Also sagen wir, ein HR REF ist gleich, und ich kann das in nur einer Sekunde ausfüllen. Ich wähle das aus. Und alles, was ich tue, ist, das reinzukriegen. Nur weil ich ziemlich scharf auf nettes Tabbing bin. Und dann machen wir einen Schrägstrich. Also haben wir ein öffnendes Tag und ein schließendes Tag, und das bedeutet, dass es um unser Bild geht. Und dann für unsere HREF, lassen Sie uns zweite Seite Punkt HTML tun. Und das geht zu unserer zweiten Seite dot HTML gehen. Und wenn ich das aktualisiere, sieht es so aus, als hätte sich nichts geändert, aber ich kann jetzt tatsächlich darauf klicken. Und Sie können unten links sehen, es heißt zweite Seite Punkt HTML. Wenn ich darauf klicke, geht es auf meine Seite. Gehen Sie zurück nach Hause, scrollen Sie nach unten. Und jetzt haben wir ein Bild, und das geht auf eine andere Seite. Jetzt ist alles, was wir hier wirklich gemacht haben, im Bild innerhalb eines Anker-Tags verschachtelt. Und deshalb war das Verschachteln wirklich wichtig, um zu lernen. Zu Beginn. Wir haben etwas über Bilder gelernt, wir haben etwas über Anker-Tags gelernt, und jetzt mischen wir nur die beiden zusammen. Also, was ich möchte, dass Sie tun, ist genau das Gleiche. Schnappen Sie sich ein Bild, was auch immer Bild von einem Splash.com. Stellen Sie sicher, dass es auf Ihrer Seite angezeigt wird, und verlinken Sie dann auf eine andere Seite. Sie könnten sogar einfach auf google.com verlinken, wenn Sie möchten, oder eine andere Webseite da draußen. Wenn Sie noch keine zweite Seite haben, können Sie überall im Internet, auf Ihr Facebook-Profil, auf Ihr LinkedIn-Profil verlinken . 17. Horizontale Regeln und line: Schon hallo. wir einen Blick auf horizontale Regeln und Zeilenumbrüche. Also zuerst werde ich an einem der Absätze arbeiten, die wir tatsächlich am Anfang haben, wir haben diese beiden Absätze hier erstellt. Und so habe ich einen Absatz und einen Tierarzt, einen zweiten Absatz. Und sagen wir, ich will eine Art Linie zwischen ihnen. Ich habe dieses Ding als HR bezeichnet, eine horizontale Regel. Und weil es keinen Text darin braucht, braucht es kein schließendes Tag. Auch hier ist dies ein selbstschließendes Tag, genau wie das Bild. Gehen wir weiter und speichern Sie das. Und es sollte genau hier drin auftauchen. Und so, wenn ich gehe und mich erfrischen, bam, da ist es. Es taucht gleich da oben auf. Und eine horizontale Regel ist ein Blockelement. Es wird die volle Breite in Anspruch nehmen. Wie Sie sehen können. Es nimmt überhaupt die volle Breite ein. Es ist, ist eine Zeile zwischen Ihrem Text. Es ist also wirklich gut, um Header oder Inhalte oder solche Dinge zu trennen. Das andere, was ich dir zeigen wollte, war ein BR-Tag. Wir haben also eine horizontale Regel, aber wir haben auch ein BR-Tag. Nehmen wir an, wir wollten dies in einer eigenen Zeile trennen, aber nicht in seinem eigenen Absatz, aber wir wollten, dass es so aussieht. Also haben wir eine erste Reihe von Lorem hier und dann Odeo Sun Tzu, was auch immer auf seiner eigenen Linie steht. Okay, also speichere ich das einfach und VS-Code repariert das automatisch für mich. Also, wenn ich auf die Seite zurückgehe, hat sich nichts geändert. Und wieder, das liegt daran, dass Leerzeichen in HTML nicht wichtig sind. Ihr Browser kümmert sich nicht darum. Was es interessiert ist, ist, wenn Sie eine neue Zeile möchten, können Sie einfach BR eingeben. Und das ist einfach eine Linie, brechen BER für Pause. Und wenn ich meine Seite speichere und aktualisiere, wir sehen, dass hier genau so eine neue Zeile sein wird. Das hat hier eine neue Linie angefangen. Und jetzt haben wir eine horizontale Regel und einen Zeilenumbruch nebeneinander, oder ich schätze, nicht nebeneinander, aber in der gleichen Lektion möchte ich, dass Sie beide einen Schuss geben und es ist ein super einfaches sollte Sie nicht mehr nehmen als etwa 30 Sekunden, vielleicht 60 Sekunden. Erstellen Sie eine horizontale Regel, und erstellen Sie dann einen Zeilenumbruch innerhalb eines Absatzes. 18. HTML-Kommentare: Werfen wir einen Blick auf HTML-Kommentare. Ein Kommentar ist also im Grunde ein Stück Code, den Sie schreiben können und das wird nicht von Ihrem Browser ausgeführt werden. Und es sieht so aus. Also ist es weniger als Zeichen. Sie können sehen, dass alle unsere HTML-Elemente so aussehen. Eine dieser seltsamen Zeiten, in denen wir tatsächlich ein Ausrufezeichen sehen und dann einen Bindestrich und einen Bindestrich. Und dann können wir unseren Text hier abgeben. Und dann endet es mit einem Bindestrich, Bindestrich und dann einem Größer-als-Zeichen. Und wenn ich das speichere, und typischerweise bis jetzt, würde es über meiner Begrüßung zu HTML 101 Text erscheinen. Aber wenn ich hierher zurückgehe, klicke auf „Erfrischen“. Es taucht überhaupt nicht auf. Wenn ich jedoch mit der rechten Maustaste auf Seitenquelle anzeigen klicke, ist es vorhanden. Setzen Sie also nie Passwörter, Geheimnisse, Kreditkarten, Antworten, irgendetwas ein. Leg nichts Geheimnis da rein, weil es nicht wirklich geheim ist. Es ist zu 100% für alle Ihre Benutzer zugänglich. Das ist also kein guter Ort, um Geheimnisse zu schreiben. Wofür es gut ist, ist zu erklären, was wir tun. So können wir sagen, dass dies ein Tutorial ist. Und lassen Sie uns das vielleicht in zwei getrennten Zeilen brechen. Dies ist eine unerlaubter Handlung, also Tutorial-Kurs auf HTML. Wir lernen HTML von Grund auf neu. Und so kann ich das wieder retten. Komm zurück, aktualisiere meinen Quellcode. Sie können sehen, dass der Quellcode tatsächlich geändert wird. Gehen Sie hier zurück, aktualisieren Sie die aktuelle Seite, und sie wird nicht gerendert. Und das wird als HTML-Kommentar bezeichnet. Wenn Sie sagen, dass dies ein HTML-Kommentar ist. Nun, was wirklich cool ist, ist, dass Sie vorhandenen Code auch auskommentieren können. Also lasst uns voran gehen und das kommentieren. Also lassen Sie uns das Eröffnungszeichen machen und Sie können sehen, dass es den ganzen Text Grau den ganzen Weg nach unten zu meiner Seite, bis zum Ende meiner Seite gedreht hat. Und lasst uns hier rüber gehen und das schließen und du kannst sehen, dass die Syntax-Hervorhebung wieder eintritt, lässt mich wissen, dass die Dinge so funktionieren, wie ich will, dass sie funktionieren. Speichern Sie das. Und weil ich das auskommentiert habe, wird es immer noch im Quellcode erscheinen. Wir sehen es hier. Es ist im Quellcode. Aber weil es zwischen einer öffnenden und schließenden Kommentarsyntax ist, lassen Sie uns aktualisieren und wir können sehen, dass es nicht mehr angezeigt wird. Der Browser sagt, dass es ein Kommentar ist und nicht ausgeführt wird, rendern Sie es nicht. Es ist wirklich nur ein nutzloses Stück Text an den Browser. Es ist nützlicher für Menschen als für Computer. Und das ist ein HTML-Kommentar. Jetzt wirst du hin und wieder ein paar davon sehen. Es ist nicht allzu oft sehen Sie diese, aber wenn Sie ihn sehen, nur wissen, dass dies das Zeug ist, das nicht angezeigt wird, wenn Sie Ihre Seite laden. 19. Listen: Okay, schauen wir uns Listen an. Es gibt zwei Arten von Listen. Es gibt eine geordnete Liste und eine ungeordnete Liste, und wir werden beide demonstrieren. Jetzt ist das interessant, weil dies eines jener Elemente ist, die Verschachtelung erfordern. Und wieder, es ist wichtig, über das Verschachteln hier zu wissen. Also werde ich hier einen Titel werfen, genannt Listen. Nun, die erste, die ich angehen möchte, ist eine geordnete Liste und o L. Jetzt könnten wir hier etwas sagen und lassen Sie uns eine Vorschau darauf. Scrollen Sie meine Seite nach unten und es sagt etwas hier drin, aber es weiß nicht wirklich, was zu tun ist. Und es ist irgendwie wie eine Liste. Aber wenn ich wollte, machen Sie einen zweiten Punkt, das funktioniert einfach nicht. Was wir tun können, ist zu sagen, denn dies ist eine Liste, es braucht ein Listenelement. Und alles, was ich hier tue, ist Listenelement, öffnende Tag, Listenelement schließende Tag zu sagen . Und jetzt haben wir zwei Elemente, die in unserer geordneten Liste verschachtelt sind. So speichern und aktualisieren. Und jetzt listet es für uns 123, so weiter und so weiter. Also auf Konten für uns. Ich habe keins geschrieben, ich habe keine zwei geschrieben. Das ist eine geordnete Liste. Jetzt eine ungeordnete Liste, sehr, sehr ähnlich, aber es wird nicht die Zählung haben, es wird nur Aufzählungspunkte haben. Also könnte ich UL machen und dann könnte ich Ally machen. Und das ist ein Listenelement. Hit tab, weil ich diese Emmett Abkürzung habe. Punkt Nummer eins. Kopieren Sie die gesamte Zeile auf die darunter liegende Zeile. Zeigen Sie, um die gesamte Zeile auf die darunter liegende Zeile zu kopieren. Und ich benutze nur Kontrolle c und Kontrolle v, oder Befehl C und Befehl V. Und das kopiert meine gesamte Zeile für mich. Gehen Sie einfach voran und speichern Sie das und aktualisieren Sie es. Und wir haben Aufzählungspunkte. Und wenn wir durch HTML fortschreiten, werden Sie ein wenig vertraut mit dem Verschachteln und Öffnen und Schließen von Tags und Attributen und solchen Dingen, das wird viel einfacher. Und Sie haben wahrscheinlich schon bemerkt, dass, wenn Sie durch alle gegangen sind, alle Videos bis zu diesem Punkt, dass eine geordnete Liste, Sie bereits irgendwie die Syntax kennen. Sie wissen, dass dies ein verschachteltes Element ist und dass es Text gibt und dann ein schließendes und ein öffnendes Tag hat. Und dann, wenn wir ein anderes wollen, haben wir nur ein anderes untergeordnetes Element. Also haben Sie hier ein Kind LI, Kind LA hier, und das Eltern-OL. Und an diesem Punkt ist immer wirklich, wirklich einfach für Sie zu lernen. Ein Beispiel dafür ist die ungeordnete Liste. Eine geordnete Liste hat also die Nummerierung, offensichtlich, weil sie eine geordnete Liste genannt wird, aber eine ungeordnete Liste hat sie nicht. Es hat nur Aufzählungspunkte. Aber die Syntax ist fast identisch. Das einzige, was wir hier wirklich geändert haben, ist von OL nach UL. Und so können Sie von hier an sehen, dass das Lernen HTML nur schneller und schneller wird. Sie lernen bereits alle Grundlagen sehr, sehr schnell. So machen wir also eine Liste. Wenn Sie das Video hier pausieren möchten, gehen Sie weiter. Drücken Sie Pause und probieren Sie dies selbst aus. Stellen Sie sicher, dass es in Ihrem Browser angezeigt wird, wenn Sie nett und bereit sind. Lasst uns zur nächsten Lektion gehen. 20. CSS Tags: Lassen Sie uns über CSS-Tags sprechen. Das hier ist also wirklich interessant. Wir haben uns nur mit einem Element innerhalb unseres Kopfes beschäftigt. Aber mit CSS können wir es tatsächlich überall hinstellen, aber normalerweise legen wir es in unseren Kopf. Und dieser hier ist ein Stil. Dies ist ein Stil-Element. Und was ich hier sage, ist CSS in den Ständen für eine Kaskade und Cascading Stylesheets. Da gehen wir hin. Cascading Stylesheets. Und ich kann das auskommentieren, damit es nicht wirklich im Browser erscheint. Nun, was hier interessant ist, ist, dass dies kein HTML akzeptiert. Ist das nicht komisch? Wir schreiben HTML, aber dies akzeptiert kein HTML. Und an diesem Punkt kommen wir in diese Sache namens CSS Cascading Stylesheets, die eine Möglichkeit für uns ist, unsere Seite zu stylen. Was dies braucht, ist CSS-Abschlag, Markup, CSS-Sprache. Und das ist sehr, sehr anders. Dies sieht überhaupt nicht wie HTML aus, und Sie müssen dies für diesen speziellen Kurs nicht wissen, aber das ist ein guter Übergang in das, was Sie als nächstes lernen würden. Nehmen wir an, wir wollten die gesamte Hintergrundfarbe in Schwarz ändern, und wir möchten die gesamte Farbe, die Textfarbe in Weiß ändern . können wir tun. Wir können „Körper“ sagen. Und Sie können sehen, dass dies mit dem Element übereinstimmt. Und alles, was wir tun werden, ist eine öffnende geschweifte Klammer, Hintergrund, Farbe. Und Sie können sehen, dass VS Code sehr hilfreich ist. Es hilft mir zu verstehen, was ich schreiben soll. Ändern Sie das in Schwarz. Und dann kann ich die Schriftfarbe ändern. Und Sie können tatsächlich sehen, dass MDM-Referenz angezeigt wird, legt die Farbe der Textfarbe eines Elements weiß. Und so wird dies dieses Element, den Körper und alles in ihm auswählen . Und es wird versuchen, diese Regeln darauf anzuwenden. Wenn ich hierher zurückgehe, klicke auf „Aktualisieren“. Sieh dir das an. Unsere Seite hat jetzt weißen Text mit schwarzem Hintergrund. Nun wieder, das ist nicht etwas, was Sie wissen müssen , und ehrlich gesagt würde ich sagen, nicht lernen, aber ich musste Ihnen zeigen, was das ist, weil Sie diese Stilelemente überall sehen werden. Nun, was ich tun werde, ist, dass ich das auch auskommentieren werde. Aktualisieren Sie meine Seite und bringen Sie sie wieder normal. Nun, wenn Sie dies mit allen Mitteln versuchen wollten, und fühlen Sie sich frei, damit zu experimentieren. Aber wissen Sie, dass Sie noch viel mehr HTML zu lernen haben. Du musst lernen, wie du Videos und Audio und solche Dinge hinzufügst. Und Sie müssen diese Dinge lernen, bevor wir CSS lernen, oder zumindest haben Sie gezeigt, dass das viel einfacher ist, eine Sache nach dem anderen zu lernen, anstatt gleichzeitig Dinge zu lernen. Aber wenn du experimentieren und Spaß damit haben wolltest und mit allen Mitteln, mach es. Aber das ist das Style-Tag, das ist Ihr CSS. Und noch einmal, nein, du musst das nicht wissen. Ich wollte dir das nur zeigen. Genau wie ein Kopf oben, werden Sie dieses Tag in der Wildnis in anderen Quellcode sehen , den Sie wie auf Google.com zum Beispiel sehen, es wird einige in ihrem facebook.com wahrscheinlich einige Instagram.com hat und wahrscheinlich hat, hat einige Stilelemente in ihrem HTML. Es ist also eine übliche Sache. Und ich wollte nur sichergehen, dass du damit vertraut bist. Ok, wir sind fertig mit CSS. Lassen Sie uns zum nächsten gehen, wo wir im Grunde das gleiche Konzept gelernt haben , aber für JavaScript. 21. Script: Hallo und willkommen in der Welt von JavaScript. Ok, also gibt es zwei Dinge, über die ich reden möchte. Eine ist, wie wir JavaScripts zwei Seiten hinzufügen, ein paar Möglichkeiten, dies zu tun. Und der zweite Weg, oder die zweite Sache, über die ich sprechen wollte , ist nicht lernen JavaScript jetzt. Es wird sehr verlockend sein. Sie werden Menschen in Facebook-Gruppen und Lerngruppen und LinkedIn-Gruppen in anderen Kursen hören . Und Sie müssen JavaScript lernen. Aber das ist nicht wahr. Sie müssen HTML lernen, bevor er JavaScript gelernt hat. Javascript wird verwendet, um HTML zu modifizieren und zu arbeiten. Und wenn Sie HTML nicht sehr gut kennen, werden Sie nicht in der Lage sein, JavaScript zu lernen, also brauchen Sie zuerst HTML. Das heißt, ich werde Ihnen zeigen, wie Sie hier etwas JavaScript hinzufügen können. Es beginnt also mit dem Skript-Tag. Und hier, wieder, weil es HTML ist, kümmert es sich nicht wirklich um Leerzeichen. Wir schreiben hier jedoch kein HTML ein. Tun wir nicht, wir schreiben JavaScript. Wir schreiben JavaScript oder JS kurz. Hier drinnen. Das ist es, was wichtig ist. Denken Sie also immer daran, dass ich sehe, dass viele Leute versuchen, wie ein div innerhalb ihres Skripts zu schreiben , und es funktioniert nicht darin weil irgendetwas zwischen den beiden Skript-Tags hier, dem öffnenden und schließenden Tag, den Ihr Browser denkt, JavaScript und nicht HTML. Und das ist wichtig zu wissen, denn wenn Sie meinen anderen Kurs über Web-Grundlagen genommen haben , gibt es verschiedene Engines in Ihrem Browser. Sie haben eine Engine zum Rendern von HTML und Engine zum Rendern, Rendern von CSS und eine Engine zum Rendern von JavaScript. Und es sagt, Hey, benutze dafür die JavaScript-Engine, nicht die HTML1. Also lassen Sie uns voran und erstellen Sie ein Beispiel hier, Hallo Welt. Und Sie müssen das jetzt nicht wissen. Aber das ist JavaScript und all das wird tun, wenn ich die Seite lade, wird es mir ein kleines Pop-up geben. Wenn ich also zurück zu meiner Seite gehe, drücken Sie „Aktualisieren“. Da steht hallo Welt. Und dann zeigt es meine Seite. Es führt also das JavaScript und dann das HTML aus. Das ist also ein Weg. Die andere Art und Weise, wie Sie sehen, dass dieses Tag verwendet wird, ist Skript. Und was passiert, wenn ich direkt auf diese Schaltfläche klicke? Das ist perfekt. Anstatt Ihren gesamten Code auf Ihrer Seite zu haben, können Sie diesen Code in einer anderen Datei haben, wie JavaScript ab.js testen. Und das brauchst du hier nicht. können wir loswerden. Und dieser Code kann in einer anderen Datei leben. Und so sagen wir alles, was wir hier sagen, ist, das Skript-Tag zu verwenden. Also hey, Chrome, Firefox, Safari Rand, Es gibt ein JavaScript, das ich möchte, dass Sie hier rendern, die Quelle genau wie ein Bild und scrollen Sie zurück nach oben genau wie ein Bild. Src source ist gleich und dann, was auch immer der Dateiname ist. Nun ist dies eine relative Datei, ähnlich wie dieser relative Link. Also sollte sich im selben Ordner befinden. Wenn das nicht existiert, wird nichts passieren. Wenn das existiert, aber da drin nichts ist, wird nichts passieren. Sie benötigen tatsächlich etwas JavaScript, um auszuführen. Und wieder, das ist nicht etwas, was wir jetzt wissen müssen. Aber was ich tun werde, ist Boom, kommentieren Sie das aus. Und das ist nur ein HTML-Kommentar. Und das stellt sicher, dass mein Browser sagt, hey, alles zwischen diesem öffnenden Tag und dem schließenden Tag oder der Syntax macht es nicht. Es ist erlaubt, dort und den Quellcode zu leben, aber nicht wirklich ausführen. Und wenn ich zurück zu Chrome gehe und ich die Seite aktualisiere , geht diese Warnung weg. So perfekt. Jetzt müssen Sie das nicht wissen. Der Grund, warum ich Ihnen das zeigen wollte, ist, weil Sie Skripte viel im heutigen modernen Web sehen werden, es gibt eine Menge JavaScript. Und wieder, Sie müssen HTML kennen, um JavaScript sehr gut zu kennen. Aber du wirst überall eine Menge Skripte sehen. Und wenn Sie dies sehen, wissen Sie einfach, dass alles zwischen dem öffnenden und schließenden Skript-Tag tatsächlich JavaScript und nicht HTML oder CSS sein wird. 22. Code mit CodePen: Okey-Dokey, werfen wir einen Blick auf eine coole Sache hier. Während Sie also lernen, Code zu schreiben, werden Sie in der Lage sein, Ihren Code mit Menschen zu teilen. Und es ist wirklich, wirklich schwer, diese Art von Code sicher mit Menschen zu teilen. Die Leute setzen ihre Dateien in Zips und dann Chairman Facebook-Gruppen und es sieht wirklich spammy und niemand weiß, ob es wirklich sicher ist, herunterzuladen. Und wenn Sie eine Frage haben, Ihre Frage beantwortet. Es ist nur diese ganze Sache, die du meiden willst. Es gibt einen besseren Weg. Was Sie also tun können, ist, dass Sie zu Codepen.io gehen können. Und ich wollte einen neuen Stift kreieren. Oh, sieh dir das alle möglichen Sachen an. Aber ich möchte hier nur einen regulären neuen Stift kreieren. Was dies tun wird, ist mir HTML, CSS und JavaScript arbeiten mit. Jetzt zu diesem bestimmten Zeitpunkt, wenn Sie diesen Kurs besuchen, müssen Sie wahrscheinlich JavaScript nicht kennen, und Sie müssen wahrscheinlich CSS nicht kennen, Sie müssen wahrscheinlich nur HTML kennen. Jetzt hier drin, kannst du alles schreiben Hallo Welt. Und es dauert nur eine Sekunde, aber es tut es schließlich mieten, es macht für Sie. Nun, die Sache ist, Sie brauchen Ihren Doctype nicht. Sie brauchen kein HTML, Sie brauchen keinen Körper. Du brauchst diese Etiketten nicht. Was Sie brauchen, ist alles zwischen dem body-Tag bis zum schließenden body-Tag genau dort. So können wir nun mit der rechten Maustaste einfügen. Und das wird nicht unbedingt meine Bilder zeigen, denn während ich sage, hey, CodePen, suchen Sie nicht nach der zweiten Seite, sondern Calebs Image.All JPEG. Und hier tritt der Alt-Text ein. Und so kann es das nicht finden, weil es es nicht weiß. Es ist eine Website, es ist nicht auf meinem Computer, und so ist es auf der Suche nach Caleb's image.All JPEG auf dem Server auf jemand anderen Computer. Sie haben es noch nicht, also wird das nicht funktionieren. Also nur ein Kopf da oben. Aber, wissen Sie, wie Sie mehr und mehr HTML und CSS und JavaScript auf der Straße schreiben. Sie können all dies in einem Codestift tun. Nun, das Schöne ist, dass Sie das nennen können. Also, hallo Welt. Lass uns voran gehen und das speichern. Und ich habe gerade ein kostenloses CodePen-Konto erstellt. Übrigens, es ist völlig kostenlos. Sie müssen nicht für CodePen bezahlen. Also bitte, während Sie lernen, zahlen Sie nicht für CodePen. Du brauchst nie dafür zu bezahlen. Und du bekommst dieses nette kleine Glied. Und wenn ich das in einem anderen Tab öffne, habe ich diesen Link einfach kopiert und eingefügt. Es taucht auf. Und wenn ich einen anderen Tab habe, fügen Sie ihn dort ein, es wird angezeigt. Und was wirklich schön ist, ist, dass es all Ihren Code speichert. Und so, wenn Sie Ihren Code in der lernen, Facebook-Gruppe oder in einem Projektabschnitt auf dieser Plattform teilen müssen. Oder wirklich müssen Sie Ihren Code mit einem Freund oder einem Entwickler oder einem Mentor oder irgendjemandem teilen . Selbst wenn du das nur dir und deinem Ehepartner, deinen Freunden, deiner Familie zeigen willst. Sie können ihnen einfach diesen Link mit dem ganzen Code in ihm senden. Dies ist eine wirklich, wirklich gute Möglichkeit, Ihren Code zu teilen und es ist eine sichere Möglichkeit, Ihren Code zu teilen, so dass die Leute sich keine Sorgen über das Herunterladen seltsamer ZIP-Dateien oder Google Drive oder Dropbox oder so etwas machen müssen . Es ist einfach nur CodePen und Dutzende von Millionen, wenn nicht Hunderte von Millionen von Menschen verwenden CodePen. Es ist absolut sicher. Es ist schon eine sehr lange Zeit da. Es geht nirgendwohin. Dies ist ein guter Service, den Sie verwenden können, wenn Sie Ihren Code teilen müssen. Wenn Sie also einen Code teilen, teilen Sie bitte Ihren CodePen, Link. 23. Zusätzliche Unterstützung: Okay, wenn du zusätzliche Unterstützung brauchst, habe ich eine massive Unterstützungsgruppe für dich. Also offensichtlich können Sie unten Fragen stellen, bitte tun Sie, wenn das Ihr Ding ist, stellen Sie unten Fragen. Aber wenn Sie Antworten sofort wollen, wie innerhalb von Minuten, manchmal sogar Sekunden, werden Sie eine Art Support-Gruppe beitreten wollen. Nun, HTML zu lernen ist eigentlich ziemlich einfach. Es gilt als eines der einfachsten Dinge, die man in der Webentwicklung lernen kann. Aber das bedeutet nicht, dass es für jeden leicht ist. Und wenn Sie ein wenig zusätzliche Unterstützung benötigen, können Sie auf facebook.com gehen und uns hier suchen, um Code zu lernen. Und diese Gruppe hat derzeit 56.905 Mitglieder. Das ist eine Gruppe, die ich vor langer Zeit geschaffen habe. Und wieder, da sind 56.000 Mitglieder drin. Es gibt Fragen, die ständig gestellt werden, Leute beantworten die Dinge die ganze Zeit. Zum Beispiel, hohe Selbstcoder, Mein Name ist Dragos. Er hat eine gute Frage und hier 132 Kommentare. Wenn ich weiter nach unten scrolle, ich meine, ich nehme daran teil. Ich meine, es ist meine Gruppe, die hier daran interessiert ist, zu lernen, wie Web-Anfragen und Web-Antworten, wo es 59 Kommentare könnte. Kann ich das vor 11 Stunden gepostet haben? Es gibt also eine Menge Diskussionen hier, aber Sie können Fragen stellen, wie kann ich etwas Mutiges machen? Wie mache ich etwas Metallic-Material? Warum funktioniert mein Code nicht? Dann teilen Sie Ihren CodePen-Link. Bitte zeigen Sie keinen Screenshot an. Ich würde dringend empfehlen, keinen Screenshot zu zeigen. Ich würde dringend empfehlen, Ihren Code nicht in die Facebook-Gruppe zu kopieren und einzufügen. Teilen Sie es auf CodePen oder Breite CodePen eher. Also, wenn Sie eine zusätzliche Unterstützung benötigen, Definitiv, auf jeden Fall das Lernen zu kodieren Facebook-Gruppe beitreten. Es ist völlig kostenlos. Sie müssen sich für nichts anmelden. Es ist völlig kostenlos. Es ist nur eine nette kleine Wertschöpfung, die ich gerne meinen Schülern geben möchte. Aber auch wenn es optional ist, müssen Sie es nicht tun. Aber wenn Sie ein wenig zusätzliche Unterstützung mit rechtzeitigen Antworten wünschen, ist das ein wirklich guter Ort zu sein. 24. Dein endgültiges Projekt: Okay, werfen wir einen Blick auf Ihr Projekt. Ihr Projekt wird relativ einfach sein. Sie müssen hier nicht alles tun und denken Sie daran, dass Sie sich nicht alles auswendig lernen müssen, was wir in diesem Kurs geschrieben haben. Sie können es immer einfach auch googeln. Also, wenn du so bist, oh, ich weiß, was ein H1 ist, aber ich erinnere mich nicht genau, wie ich eine Verbindung herstellen soll. Das ist in Ordnung. Sie können es Google und Sie geben Sie in Google HTML Link tutorial. Und du wirst Hunderte, Tausende, vielleicht sogar Millionen von Seiten finden , die dir genau zeigen, wie du einen Link hinzufügst. Denken Sie daran, dass Sie sich nicht wirklich an all das erinnern müssen. Alles, was Sie wissen müssen, ist, wie Sie die Antwort finden. Und das ist ehrlich gesagt etwa 50% jedes Jobs als Web-Entwickler heutzutage ist nur zu wissen, wie man die Antworten findet, sie nicht auswendig lernt, sondern in der Lage, die Antworten zu finden. Also gehen Sie zu dem Projekt hier, was ich möchte, dass Sie tun, ist, dass Sie eine neue HTML-Datei erstellen. Dann möchte ich, dass Sie einen Header erstellen. So wie ein H1 Sub-Header-Boot, wie das, was Sie tun, was Sie in so etwas bekommen wollen, ein Bild. Und dann, und schließlich, fügen Sie einen Link zu Ihrem Twitter. Twitter, Instagram, Facebook. Es spielt keine Rolle, stellen Sie sicher, dass Sie mindestens einen Link haben. Also lasst uns das machen. Erstellen Sie eine 2.1, und das wäre ein guter Zeitpunkt für eine verschachtelte geordnete Liste, übrigens, 2.2. in Ordnung, also habe ich das einfach ein wenig schöner formatiert, nur damit wir es alle zusammen lesen konnten. Erstellen Sie also eine neue HTML-Datei. Stellen Sie sicher, dass Sie einen Header haben, setzen Sie Ihren Namen dort, einen Sub-Header, S Sub Header, Lake , Ihren Titel, Ihre Arbeitsbeschreibung, Lieblingshobby oder so etwas? Hatte ein Bild von allem, würde ich sagen, fügen Sie ein Bild von sich selbst. Es ist absolut sicher, weil es nur auf Ihrem Computer sein wird. Aber wenn Sie Ihr Projekt lieber mit einem Bild von etwas anderem teilen möchten, ist das auch völlig in Ordnung. Sie können immer zu einem Splash.com gehen und ein kostenloses Bild erhalten. Fügen Sie schließlich einen Link zu Ihrem Twitter, Ihrem Instagram oder Ihrem Facebook hinzu, oder fügen Sie einfach einen Link zu Google oder etwas hinzu. Der wichtige Teil hier ist, dass Sie einen Link hinzufügen werden. Also geh weiter und gib dem einen Schuss. Wenn Sie jemals stecken bleiben, vergessen Sie nicht, Sie können die anderen Videos referenzieren oder Sie können dieses Video weiter sehen und ich werde Ihnen genau zeigen, wie ich es mache. Aber ich möchte, dass Sie dieses Video hier anhalten und dieses Projekt geben, das ich gedreht habe. Vergessen Sie nicht, Ihr Projekt zu teilen und unten auf dieser Plattform, wenn diese Plattform bietet diese Art von Funktion, sonst können Sie immer Ihre Fortschritte mit dem Lernen teilen Facebook Gruppe zu programmieren. Also pausieren Sie Ihr Video hier. Ich werde uns ungefähr fünf Sekunden geben und dann werde ich wieder spielen und ich werde Ihnen zeigen, wie ich das mache. Okay, also werde ich dieses Projekt erstellen. Ich werde dir genau zeigen, wie ich es mache. Also erste Dinge zuerst Neue Datei, und ich habe gerade Befehl N gemacht, oder du könntest zu gehen. Datei, Neue Datei, Speichern, das wird diese auf meinem Desktop speichern. Und ich werde diese Caleb layout.html nennen, weil das meine Portfolio-Seite ist. Das ist es, was ich tun will. Ich brauche dieses HTML5-Zeug hier drin. Also brauche ich die Meta nicht. Wir haben nicht darüber geredet. Das ist ein wenig fortgeschrittener und ich brauche nicht Lang ist gleich Englisch wieder, das ist ein wenig fortgeschrittener. Darum brauchen wir uns keine Sorgen zu machen. Wir werden den Titel in Calebs Seite ändern. Und was musste ich hier hinzufügen? Ich musste einen Header hinzufügen, der 2.1 in dieser Liste ist. Also ein Header H1, ich werde meinen Namen hier reinsetzen, Caleb Pauline, H2. Ich brauchte einen Sub-Header, also lass uns etwas kleineres setzen und du bist wie ein H3-Entwickler. Und ich bin ein Premium-Codierungslehrer. Das ist meine Rolle im Leben. Die Rolle, die ich mir selbst gegeben habe. 2.3, füge ein Bild hinzu, okay? Also weiß ich schon, dass ich hier ein Bild habe. Es ist kein Bild von mir, aber es ist ein Bild und das ist aus einer vorherigen Lektion, also kann ich es tun. Bild SRC ist gleich Calebs Image.All JPEG, und das ist nur im gleichen Ordner wie diese Datei. All das lebt auf meinem Desktop. Es ist im selben Ordner. Alt. Caleb, Colleen. Und ich möchte dem eine Breite geben, damit es nicht riesig ist, ich weiß nicht, wie 400. Schließlich brauche ich jetzt einen Absatz und benötigte einen Link. Aber auch ich werde sowieso einen Absatz hinzufügen. Ich möchte nicht wirklich einen ganzen Absatz schreiben. Ich werfe ein paar Lorem hier rein. Und dann brauchte ich einen Link zu, sagen wir Twitter. Dieser Link könnte also nur ein Anker-Tag sein. Ein HREF ist gleich HTTPS, Twitter.com Schrägstrich. Caleb, groß, schlank, und du kannst mich auch auf Instagram finden , wenn das dein Jam ist und auf Pauline gesetzt wird. Und das ist alles, was es dazu gibt. So kann ich zurück zu meinem Browser gehen und ich kann Datei gehen, Datei öffnen und Caleb dot HTML öffnen. Hoffentlich habe ich keine Tippfehler da drin , denn das wird etwas peinlich sein. Und boom, da ist meine HTML-Seite. Ich habe ein H1, ich habe ein h3 für meinen Untertitel. Ich habe ein Bild und ich habe einen Lorem-Text drin. Ich habe das einfach irgendwie in der letzten Minute da reingeworfen. Und ein Link zu meinem Twitter, der mich direkt auf Twitter bringt. Und das ist alles, was es dazu gibt. Also ging ich ziemlich schnell dorthin und ich habe das absichtlich gemacht, damit du pausieren müsstest und vielleicht etwas härter denken müsstest. Ich möchte, dass du wirklich an so etwas arbeitest. Aber wenn Sie fertig sind, teilen Sie bitte Ihre Fortschritte unten mit. Abschließend vielen Dank, dass Sie sich die Zeit genommen haben, diesen Kurs zu besuchen. Ich hoffe, Sie haben etwas Großes, Spaß und Neues gelernt. Und wenn Sie jemals einen meiner anderen Kurse überprüfen möchten, einfach auf den Link zu meinem Profil auf dieser Plattform, Sie können sehen, alle meine Kurse sind auch hier verfügbar, einschließlich was Sie als nächstes lernen, wie mehr fortgeschrittenes HTML, CSS und JavaScript, Python, PHP, eine Reihe von Projekten dazwischen, allerlei Sachen. Schließlich, wenn dir gefällt, was ich hier mache, wenn du meine Art des Unterrichts magst, vergiss nicht, mir auf Fertigkeiten zu folgen. Nochmals vielen Dank für die Teilnahme an diesem Kurs und ich hoffe, Sie in einem anderen zu sehen.