HTML-Vollkurs für Anfänger bis Fortgeschrittene Vollständiger Leitfaden mit realen Projekten

1. Einführung: Sind Sie bereit, Ihre Reise in die aufregende Welt der Webentwicklung zu beginnen ? ob Sie ein absoluter Anfänger sind oder Ihre Fähigkeiten erweitern möchten, dieser Kurs, vollständiger CML-Kurs für Anfänger bis Fortgeschrittene, mit Projekten aus der realen Welt ist Ihre perfekte Startrampe In diesem Kurs werden Sie von absolut keinem Wissen über Webentwicklung zur Erstellung von Projekten in der realen Welt übergehen absolut keinem Wissen über Webentwicklung zur Erstellung von Webentwicklung zur Erstellung , die jeden beeindrucken können Sie lernen die Grundlagen von HTML, wie man Webseiten wie ein P strukturiert und gestaltet, grundlegende Konzepte wie das Zementieren von HTML, Textformatierung, Leak, Hyperlinks, Bilder und Attribute und natürlich fortgeschrittene Techniken, um Ihre Webentwicklungsfähigkeiten auf die nächste Stufe zu heben Aber wir hören nicht nur bei der Theorie auf. In diesem Kurs werden Sie an spannenden Herausforderungen und realen Projekten arbeiten spannenden Herausforderungen und realen Projekten , um das Gelernte anzuwenden. Am Ende werden Sie über ein solides Portfolio und das Selbstvertrauen verfügen ein solides Portfolio und , eine atemberaubende Website zu erstellen. Folgendes werden Sie gewinnen. Leicht nachzuvollziehende , schrittweise Lektionen, praktische Projekte zur Verbesserung Ihrer Fähigkeiten, Tipps und Tools zur Steigerung der Produktivität, einschließlich VS-Code-Erweiterungen und lebenslanger Zugriff auf alle Kursmaterialien Mein Ziel ist einfach, Sie zu befähigen , ein erfahrener Webentwickler zu werden Stellen Sie sich vor, Sie erstellen Ihre eigenen Websites oder beginnen sogar eine neue Karriere Hier fängt alles an. Also, worauf wartest du? Nehmen Sie noch heute am vollständigen HTML-Kurs für Bigner teil, um voranzukommen und den ersten Schritt zur Beherrschung der Webentwicklung zu machen . Wir sehen uns in der Klasse 2. Webentwicklung auf hohem Niveau: Ordnung, und willkommen zur ersten Vorlesung dieses Kurses. Jetzt besteht eine gute Chance , dass dieser Kurs Ihr allererster Kontakt mit Webentwicklung sein wird . Bevor wir anfangen, STML- und CSS-Code zu schreiben, halte ich es für eine gute Idee, diesen Kurs mit einem umfassenden Überblick über diesen Bereich der Webentwicklung zu beginnen diesen Kurs mit einem umfassenden Überblick über diesen Bereich der Webentwicklung Wir werden über Dinge wie Clients und Server, Frontend- und Backend-Entwicklung, Tati und dynamische Websites und natürlich über die Kernsprachen und Codetechnologien der Webentwicklung Ich werde das alles rund um den Prozess erklären , der passiert, wenn wir eine Webseite in einem Browser öffnen Denken Sie einfach noch einmal daran, dass dies nur ein allgemeiner Überblick ist und ich werde hier viele Details weglassen. Dies dient nur dazu, dass Sie sich mit einigen dieser Konzepte und Begriffe vertraut machen können sich mit einigen dieser Konzepte und Begriffe vertraut machen , die alle Webentwickler kennen, bevor Sie Ihre eigene Reise beginnen. Was nun passiert, wenn wir versuchen, auf diese Website der W Three Schools zuzugreifen , ist , dass unser Browser eine Anfrage an den Server sendet , auf dem diese Seite im Internet gehostet wird. Jede einzelne Website wird auf einem sogenannten Server abgeschleppt handelt es sich im Grunde um einen Computer , der mit dem Internet verbunden ist und Anfragen wie diese empfangen kann Anfragen wie diese empfangen Auch hier sendet unser Browser, wenn wir eine bestimmte Website aufrufen, eine Anfrage an den Server, auf dem die Website abgeschleppt wird, wo sie Wenn der Server dann die Anfrage erhält, nimmt er alle Dateien, aus denen die Website besteht , und sendet sie zurück an den Browser Wir sagen, dass der Server die Antwort an den Browser sendet, im Wesentlichen all diese Dateien enthält, aus denen die Website jetzt besteht , wie Sie an diesen Dateierweiterungen sehen können Wir haben hier HTML-, CSS- und auch JavaScript-Code. Dies sind genau die drei Sprachen , die Browser verstehen können. Das bedeutet, dass der gesamte Code, aus dem eine Website besteht , immer in HTML, CSS und JavaScript geschrieben sein muss , da dies wiederum im Wesentlichen die drei Codesprachen sind , die jeder Browser verstehen kann. Ordnung. Sobald der Browser diese HTML-, CSS- und JavaScript-Dateien aus der Antwort des Servers erhält, nimmt er den Code und rendert die Website , auf die wir zugreifen möchten, auf der Grundlage des Codes. Damit haben Sie bereits ein gutes Verständnis dafür, was tatsächlich passiert, wenn wir eine Website aufrufen, und auch über die Technologien, mit ein gutes Verständnis dafür, was tatsächlich passiert, wenn wir eine Website denen wir Websites erstellt haben. Der denen wir Websites erstellt Prozess des Schreibens von HTML-, CSS- und JavaScript-Code , den der Browser verstehen kann , ist ein Prozess, wir Frontend-Webentwicklung nennen. Wenn Sie also jemanden über Frontend-Entwicklung sprechen hören , meinen sie damit, dass Entwickler den Code schreiben , der im Browser angezeigt wird , der im Grunde das Frontend einer Website ist. Tatsächlich ist es im Wesentlichen das, was wir in diesem Kurs lernen werden, oder zumindest die sehr, sehr grundlegenden Grundlagen der Frontend-Entwicklung, das Erlernen von HTML und CSS Nur als Randnotiz: Immer wenn die Dateien, aus denen die Website besteht , einfach auf dem Webserver gespeichert und dann unverändert an den Browser gesendet werden, sagen wir, dass wir eine statische Website haben, und das wird in einer Minute etwas sinnvoller sein, wenn wir darüber sprechen, was eine dynamische Website ist. Sie jedoch vorerst daran, dass eine statische Website im Grunde eine Website ist der die Dateien einfach vom Server an den Browser gesendet werden , so wie sie sind, ohne dass Transformationen erforderlich sind. Ordnung. Ich hoffe also, dass Sie daraus lernen, was Frontend-Entwicklung ist und was die drei Codetechnologien sind , aus denen jede Website besteht. Lassen Sie uns nun noch einen Schritt weiter gehen und über etwas sprechen , das als Backend-Entwicklung bezeichnet wird. Versuchen wir es hier mit einem anderen Beispiel und versuchen wir dieses Mal zu verstehen, was passieren würde, wenn wir versuchen, auf eine Website wie netflix.com zuzugreifen Der erste Schritt besteht also erneut darin, dass eine Anfrage an den Webserver gesendet wird , auf dem netflix.com Nun, warum unterscheidet sich eine Website wie Netflix so sehr von etwas wie der Website Static W Three Schools , die ich Ihnen zuvor gezeigt habe Nun, eine komplexe Website wie netflix.com unterscheidet sich wirklich völlig von einer statischen Website, weil es viele Inhalte gibt , die sich ständig ändern Wie bei Netflix werden der Website immer neue Filme und neue Kritiken hinzugefügt Neue Bewertungen und die Länge neuer Filme werden zum Beispiel berechnet, und es passieren wirklich immer eine Menge anderer Dinge wie diese . Damit ein System wie dieses funktioniert, benötigt netflix.com eine ganze Anwendung die auf dem Server läuft, und sie benötigen auch eine Schweine-Datenbank, die im Grunde alle Kurse und alle Rezensionen enthält und alle Rezensionen Alle Benutzer und wirklich alle Inhalte, die auf ihrer Website angezeigt werden Um all das zu tun, reichen Frontend-Technologien wie HTML und CSS einfach nicht aus. Mit dem, was Sie in diesem Kurs lernen werden, werden Sie im Grunde in diesem Kurs lernen werden, werden Sie im nicht in der Lage sein, so etwas wie netflix.com zu erstellen . In Ordnung Um also Anwendungen zu schreiben, die tatsächlich auf Webservern ausgeführt werden, verwenden Entwickler Backend-Sprachen wie NodeJS, PHP Diese Sprachen nehmen die Daten aus der Datenbank und fügen diese Daten im Grunde zu den endgültigen Dateien Das wird dann als Antwort an den Browser gesendet, und dieser ganze Prozess wird Backend-Entwicklung genannt , weil das im Grunde der unsichtbare Teil einer Website ist , also ist es der Ben einer Website. In dieser Situation sagen wir, dass wir eine dynamische Website haben, weil die Website dynamisch aus verschiedenen Teilen auf dem Server zusammengesetzt wird und das passiert jedes Mal dass jemand die Website besucht Zurück zum Beispiel von netflix.com. Tatsächlich wird jedes Mal, wenn Sie Netflix besuchen, eine neue Version der Website aus der Datenbank generiert und an den Browser gesendet Andererseits, wenn Netflix eine statische Website wäre, würden sich die Website-Dateien bereits auf dem Server befinden und nur darauf warten, dass jemand darauf zugreift. Das ist der große Unterschied zwischen statisch und dynamisch. Statisch sind die Dateien bereits fertig und dynamisch müssen sie zuerst von einer Anwendung generiert werden , die auf dem Server läuft. In Ordnung. Aber jetzt ist der Rest des Prozesses tatsächlich derselbe wie zuvor. Diese Dateien können nun als Antwort an den Browser gesendet werden , der dann in die endgültige Website konvertiert wird. So wie diesen, den wir hier von netflix.com sehen. Großartig. Nun müssen Sie sich natürlich nicht all diese Namen merken, die ich hier erwähnt habe, und Sie müssen diesen Prozess auch nicht tief verstehen Ich möchte Ihnen hier nur einen Überblick darüber geben , was Frontend und Backend eigentlich sind, was der Browser und der Server sind und was die statischen und dynamischen Websites sind weil ich wirklich denke , dass dies zu Beginn Ihrer Entwickler-Reise äußerst hilfreich sein wird Beginn Ihrer Entwickler-Reise äußerst hilfreich Aber jetzt, zum Abschluss, schauen wir uns die drei Sprachen des Frontends genauer an. HTML, CSS und JavaScript. Und ab HTML ist HTML für den Inhalt der Seite verantwortlich. Der Text, die Bilder, die Schaltflächen und wirklich der gesamte Inhalt, den Sie auf einer Webseite sehen , werden immer in eine HTML-Datei geschrieben. Dann ist das CSS für die Präsentation dieser Inhalte verantwortlich. Grundsätzlich für das Styling und das Layout der Elemente auf der Webseite. Endlich ist JavaScript die eigentliche Programmiersprache der Front. So können wir Webseiten dynamische und interaktive Effekte hinzufügen . Wir können es auch verwenden, um den Inhalt oder das CSS zu manipulieren, um Daten von Webservern zu laden und sogar ganze Frontend-Anwendungen zu erstellen, die wir dann Webanwendungen nennen. Jetzt können wir auch die Analogie des Autos verwenden , um die Trennung von HTML, CSS und JavaScript hier etwas verständlicher zu machen HTML, CSS und JavaScript hier etwas verständlicher zu In dieser Analogie repräsentiert HTML die Struktur einer Website, wie den Rahmen und die Struktur eines Autos Es gibt zum Beispiel die Grundform von Karosserie, Sitzen und Motor Ohne sie würde das Auto nicht existieren, aber für sich genommen sieht es nicht besonders aus und macht auch nicht viel. Das CSS ist dann die Lackierung und das Innendesign, weil es das Auto optisch ansprechend macht , indem es die Farbe und den Gesamtstil definiert. CSS verbessert das Aussehen und die Haptik. Dadurch wird das Auto attraktiver und komfortabler zu bedienen. Schließlich ist JavaScript natürlich der Motor und die Elektronik. Es macht das Auto funktionaler und ermöglicht es, sich zu bewegen, Radio, JavaScripts und Interaktivität sowie dynamische Funktionen anzupassen , sodass das Auto oder die Website auf die Aktionen des Benutzers reagieren Macht das Sinn, okay? Damit beenden wir unsere Einführung in die Webentwicklung und sind nun bereit, in diesem Kurs mit der Arbeit mit HTML- und CSS-Code zu beginnen . 3. Einrichten unseres Code-Editors: Hallo, alle zusammen. Willkommen zurück. Bevor wir mit dem Schreiben einer einzigen Codezeile beginnen, müssen wir zwei wichtige Tools einrichten. Diese Tools werden uns helfen, Programmiercode wie HTML auf sehr einfache Weise zu schreiben . Nun, was sind diese Tools? Der erste ist ein Code-Editor, der zweite ist ein Webbrowser. Was der Code-Editor hier bedeutet, ist, dass es sich um ein spezielles Tool handelt das Entwicklern beim Schreiben, Bearbeiten und Debuggen von Code mit Funktionen wie Syntaxhervorhebung und Autovervollständigung hilft und Debuggen von Code mit Funktionen , und genau aus diesem Grund verwenden wir hier VS-Code Es macht das Codieren schneller, effizienter und einfacher Und was ein Webbrowser hier macht, er benötigt den Code. Wir schreiben in einem Code-Editor wie HTML und erwecken ihn zum Leben, indem wir ihn auf dem Bildschirm rendern. verwandeln Rohcode in atemberaubende Websites, mit denen wir täglich interagieren. Lassen Sie uns beide schnell herunterladen und installieren. Jetzt, Leute, ihr könnt jeden beliebigen Webbrowser öffnen. Jetzt habe ich derzeit Google Chrome geöffnet. Sie können jeden beliebigen Webbrowser öffnen und hier nach dem VS-Code-Download suchen. Und hier siehst du hier, du wirst dieses erste Ergebnis sehen können, und das ist die offizielle Website von visualstudo.com also co dotvisualstudio.com. Klicken Sie einfach darauf Leute, jetzt könnt ihr sehen, dass dies die Schnittstelle von visualtudo.com ist , um den VS-Code herunterzuladen. Okay. Hier sehen Sie, wir haben mehrere Möglichkeiten , es herunterzuladen. Nun, Leute, abhängig von eurem Betriebssystem müsst ihr die Software herunterladen. Zum Beispiel verwende ich derzeit das Windows-Betriebssystem, also wähle ich Windows aus. Wenn Sie jedoch ein Linux-Betriebssystem oder ein Mac-Betriebssystem verwenden Linux-Betriebssystem oder ein Mac-Betriebssystem , sehen Sie unter diesem Symbol diese Download-Schaltfläche, sodass Sie einfach darauf klicken können. Wenn Sie jedoch Linux verwenden, können Sie diese beiden Optionen verwenden, um es auf Ihrem PC zu installieren. Jetzt verwende ich das Windows-Betriebssystem. Um den VS-Code herunterzuladen, klicke ich einfach auf diesen Download-Button, und hier siehst du, dass ich aufgefordert werde, ihn herunterzuladen. Also wähle ich die Downloads aus und klicke auf die Kappe. Jetzt sehen Sie hier, dass meine VS-Code-Installation gerade läuft. Leute, in Zukunft könnte die Oberfläche dieser Website geändert werden. Aber um diese Software herunterzuladen, können Sie diese code.visualstudio.com besuchen, und Sie können diese Website besuchen und die Software einfach Okay? Nun, Leute, wir haben die Software erfolgreich heruntergeladen, damit Visual Studio. Jetzt klicke ich einfach auf diese Download-Option und ich klicke einfach auf dieses Visual Studio. Hier siehst du also, dass ein Popo vor dir angezeigt wird. Nun, Leute, um diese Software zu installieren. Also installiere ich die Software in Windows. Jetzt müssen Sie nur noch auf Ich akzeptiere die Vereinbarung klicken , und dann müssen Sie auf die Schaltfläche Weiter klicken. Hier fragt VS-Code, wo dieser VS-Code installiert werden soll. Also behalte ich es einfach in der Standardeinstellung und klicke auf die nächste Schaltfläche. Und du musst nur auf Weiter klicken. Leute, hier seht ihr, wir haben mehrere Checkboxen. Im Moment müssen Sie nur alle diese Checkboxen ankreuzen. Leute, danach werde ich euch zeigen warum ich all diese Checkboxen ankreuze, und dann müsst ihr nur noch auf diese Schaltfläche „Weiter“ und dann auf „Installieren“ klicken Jetzt wird unser VS-Code auf unserem PC installiert. Leute, so können Sie VS-Code auf Ihrem PC installieren. Jetzt können Sie diesen Visual Studio-Code ab sofort starten. Im Moment deaktiviere ich das einfach und klicke auf die Schaltfläche Fertig stellen Leute, herzlichen Glückwunsch zum erfolgreichen Herunterladen des Visual Studio-Codes auf Ihren PC Jetzt müssen wir noch eine Sache einrichten. Jetzt müssen wir hier nur noch einen neuen Tab erstellen und auch den Chrome-Browser installieren. Jetzt zeige ich diesen Prozess. Wenn Sie also keinen Chrome-Browser auf Ihrem PC hatten, können Sie diesem Vorgang folgen. Jetzt müssen Sie nur noch hier im Chrome-Browser suchen. Oder Sie können nach Chrome-Download suchen. Und nachdem Sie das getan haben, müssen Sie nur noch auf diesen ersten Link klicken. Leute, hier seht ihr auf dieser Website, ihr könnt Chrome für euer eigenes Betriebssystem herunterladen . Leute, diese Website erkennt automatisch , welches Betriebssystem Sie verwenden. Jetzt habe ich den Chrome-Browser auf meinem PC Derzeit benötige ich keinen Chrome-Browser, um ihn zu installieren. Wenn Sie jedoch keinen Chrome-Browser haben, können Sie einfach auf diese Download-Schaltfläche klicken. So können Sie die Software auf Ihrem PC installieren. Okay? Die Installation ist also ziemlich einfach. Wie ich es dir im VS-Code gezeigt habe, musst du nur auf den nächsten klicken und wird dein Chrome-Browser eingerichtet. Okay? Also überlasse ich das für dich. Lassen Sie uns jetzt vorerst einfach den VS-Code öffnen. Jetzt minimiere ich einfach all diese Dinge, also gehe ich zu meinem Desktop. Leute, hier, hier haben wir das VS-Code-Symbol. Nachdem Sie den VS-Code erfolgreich auf Ihrem PC installiert haben, können Sie dieses VS-Code-Symbol sehen. Sie können hier einfach doppelklicken , um dieses Visual Studio zu öffnen. Leute, nachdem ihr den VS-Code zum ersten Mal geöffnet habt, werdet ihr diese Schnittstelle sehen können . Hier sehen Sie also, dass wir diesen Visual Studio-Code haben, und hier sehen Sie, wir können von hier aus eine neue Datei erstellen, sodass wir von hier aus einen Ordner öffnen können. Wir können also eine Menge Dinge von hier aus erledigen, aber ich bevorzuge es nicht, all diese Dinge von hier aus zu tun. Also werde ich diese Begrüßung hier einfach beenden. Nun, Leute, das Erste , was wir hier tun werden , ist, dass wir eine Erweiterung installieren werden. Also hier, hier haben wir einen Erweiterungs-Tab, also musst du einfach darauf klicken. Hier sehen Sie also, dass wir hier viele Erweiterungen haben. Nun, die Erweiterung hier ist , dass eine Erweiterung für VS-Code im Grunde eine kleine Funktionalität ist im Grunde eine kleine , die unseren Code-Editor ein bisschen besser machen wird . Also zum Beispiel, wie wir Erweiterungen in Google Chrome verwenden, also werden wir Erweiterungen zu unserem Google Chrome hinzufügen , um uns die Verwendung von Google Chrome zu erleichtern. Das ist also das gleiche Konzept hier. Jetzt die erste Erweiterung , die wir hier installieren werden, das ist also hübscher Suchen Sie hier so und stellen Sie sicher, dass Ihr Internet eingeschaltet ist Okay. Und hier siehst du, ich denke, es könnte das erste Ergebnis sein. Klicke darauf. Jetzt Leute, um diese hübschere Erweiterung zu installieren. Sie müssen also nur auf diese Schaltfläche „Installieren“ klicken und Ihr Preter wird erfolgreich installiert Leute, was auch immer ihr in den Code-Editor schreibt, desto hübscher, was er macht, bedeutet, dass er unseren Code schön formatiert. Okay? Also, Leute, wir haben dieses automatische Update hier, also könnt ihr dieses Kästchen ankreuzen. Was es also tun wird, bedeutet, dass es die Software automatisch aktualisiert, wenn Updates von Preteer verfügbar sind Okay. Sobald wir anfangen, unseren Code zu schreiben, werde ich dir zeigen, wie dieser Preter funktioniert Jetzt kannst du einfach schließen. Lassen Sie uns jetzt diese Seitenleiste mit dieser Erweiterung kollidieren lassen, Leute, wir müssen nur ein paar Einstellungen vornehmen Nun, hier in der unteren Ecke, Sie können dieses Zahnradsymbol sehen. Klicken Sie einfach darauf und hier sehen Sie, Klicken Sie einfach darauf und hier sehen Sie dass wir hier die Einstellungsoption haben, klicken Sie darauf und hier können wir nach einer beliebigen Einstellung suchen Die Suche nach der Einstellung ist der einfachste Weg, sie zu finden. Die erste Einstellung, nach der wir hier suchen werden , ist der Standardformatierer Nun, hier sehen Sie den Standardformatierer, in Ihrem Fall könnte er anders sein Also, jetzt habe ich das vorher als hübscher eingestellt. Sie müssen also nur auf diese Optionen klicken und nur nach Prettier suchen Nun, hier sehen Sie dass wir diese hübschere Option haben Das ist also ein hübscherer Codeformatierer, ES B und P. Du musst nur darauf klicken Nun, warum wir diesen Standard-Formatierer beibehalten. Jetzt sehen wir also VS-Code, dass wir beim Speichern unserer Dateien diesen hübscheren Codeformatierer benötigen, um unseren Code zu formatieren Okay? Nun, wenn wir unseren Code formatieren müssen, müssen wir nur noch eine andere Einstellung festlegen, nämlich Autosave Sie müssen nur nach Autosave suchen. In deinem Fall könnte es also so falsch sein. Sie müssen nur darauf klicken, um den Fokus zu ändern. Dies bei Fokusänderung bedeutet, dass jedes Mal, wenn Sie diesen Tab schließen oder wenn Sie diesen Tab zu einem anderen Tab wechseln, automatisch gespeichert werden Ihre Dateien automatisch gespeichert werden, ohne dass wir die Dinge für uns erledigen müssen. Okay? Das ist auch sehr hilfreich, weil wir keine Änderungen verlieren müssen, wenn wir die Dateien nicht speichern Okay? Also, Leute, wir sind mit den Einstellungen hier fertig. Jetzt können Sie die Einstellungen hier einfach von hier aus schließen. Sie müssen also nur auf diesen Erweiterungs-Tab klicken. Leute, noch eine letzte Erweiterung , die wir hier installieren werden, diese Erweiterung heißt Monophy Also, Leute, ihr müsst hier nur nach Monocy suchen, und hier seht ihr, wir haben dieses eine Monoci-Thema Ihr müsst nur darauf klicken und hier seht ihr, dass wir ein Theme für unseren VS-Code haben Im Moment, Leute, habe ich dieses Theme installiert, aber in eurem Fall könnt ihr dieses eine Monoci-Theme installieren Okay. Nun, hier können Sie die Vorschau dieses Themas sehen. Was dieses Thema bewirken wird, bedeutet also, dass es die Farben Ihres Codes ändert. Hier sehen wir beispielsweise, dass verschiedene Teile des Codes in verschiedenen Farben hervorgehoben sind. Okay, es wird unseren Code lesbarer machen. Leute, standardmäßig schlägt der VS-Code ein grundlegendes Thema vor, aber ich schlage vor, dass Sie ein spezielles Thema wie ein Monochi-Thema installieren , damit Sie das Thema so installieren können. Okay? Nun, noch eine letzte Einstellung, die wir hier machen müssen. Sie müssen nur auf diese Einstellungen klicken. Hier haben wir Themen, und im Thema haben wir dieses Dateisymbol-Thema. Sie müssen nur darauf klicken und ich behalte mein Datei-Con-Thema als Sety, aber das ist für Sie egal Sie können dies auch einfach als Sety festlegen. Okay. Damit sind wir vorerst mit der Einrichtung des VS-Codes fertig. Jetzt sind Sie bereit, Ihre allererste Codezeile zu schreiben, und genau das werden wir in unserer nächsten Vorlesung tun. Wir sehen uns bald dort. 4. Ihre allererste Webseite!: Willkommen zurück. Lassen Sie uns jetzt unsere allererste Codezeile schreiben und unsere allererste und sehr kleine Webseite erstellen. Hier sind wir wieder im VS-Code. Lassen Sie uns diesen hier schließen, und ich werde einfach diesen Erweiterungs-Tab schließen, also werde ich ihn reduzieren und wir werden hier zu diesem ersten Tab gehen. Hier siehst du den Explorer-Tab, klickst darauf und hier siehst du in diesem Explorer-Tab, Leute im VS-Code, wir müssen uns immer in einem Ordner befinden, und dieser Ordner wird Projektordner genannt . Im Moment haben wir noch keinen Ordner gestartet, also fangen wir damit an. Und jetzt gehe ich einfach auf meinen Desktop und werde dann jetzt hier auf meinem Desktop einen Ordner erstellen. Ich werde auf meinen Desktop klicken und ich werde auf Neu klicken und ich werde einen Ordner erstellen. Jetzt gebe ich diesem Ordnernamen 01, um auf diese Weise zu testen. Sie können einen beliebigen Namen Ihres Projektordners behalten. Also behalte ich es hier. Also hier in meinem Fall, ich mache es gerade auf meinem Desktop. Wenn ich also einen Ordner an einem anderen Ort erstelle, kann das zu einiger Verwirrung bei mir führen. Deshalb mache ich es in meinen Desktop. Gehen wir jetzt zurück zum VS-Code. Jetzt klicken wir auf diesen geöffneten Ordner und ich wähle diesen Desktop Und hier seht ihr unseren Ordner is there 01 testing , den wir hier gerade erstellt haben Wählen Sie diesen einfach aus und klicken Sie auf diesen ausgewählten Ordner. Sie sehen also hier, wir haben hier eine neue Willkommensseite. Nun, hier siehst du unten den Start, wir können von hier aus eine neue Datei erstellen. Aber die andere Möglichkeit ist, dass wir von hier aus eine neue Datei erstellen können. also mit der Maus über dieses Dateisymbol fahren, sind dies die zwei verschiedenen Möglichkeiten neue Dateien im Projektordner zu erstellen, und ich bevorzuge diese hier tatsächlich Also lass uns darauf klicken. Wir sind also dabei, unsere allererste Webseite zu erstellen, und eine Webseite ist im Grunde nur eine DML-Datei, und nennen wir sie Index Tippen Sie auf HTML und drücken Sie die Eingabetaste. Es ist im Grunde nur die Datei mit der HTML-Dateierweiterung, und wir nennen sie Index, weil das der Standardname der ersten Webseite einer Website ist . Index ist im Grunde immer der Einstiegspunkt zu jeder Website Daher müssen alle Webseiten immer über eine HTML-Datei mit Indexpunkten verfügen. Richtig, behalte das immer im Hinterkopf. Nennen Sie Ihre allererste Seite mit Indexpunkt HTML. Nun, mein Ziel in dieser Vorlesung ist es nicht, Ihnen wirklich HTML beizubringen. Im Moment möchte ich hier nur eine neue HTML-Datei erstellen und hier ein bisschen Code in diese HTML-Datei einfügen ein bisschen Code in und dann das Ergebnis im Browser sehen. Nur damit Sie Ihre allererste Codezeile schreiben können und das Ergebnis des Schreibens dieses Codes in einem echten Webbrowser sehen können. Auch hier fange ich noch nicht wirklich an, HTML zu unterrichten, und anstatt eine ganze Webstruktur zu schreiben, wie wir es normalerweise tun müssen, werden wir ein kleines Hauptblatt verwenden , das wir in VS-Code verwenden können. Also werde ich ein Ausrufezeichen schreiben und einfach so auf dieses Met Ambribson klicken Hier sehen Sie, wir haben unsere TML-Dokumentstruktur erstellt . Im Grunde genommen haben wir hier einen Kopf und wir haben einen Körper All diese Dinge ein bisschen später. Jetzt bin ich hier an diesem Titel interessiert, meiner ersten Webseite. Also zoome ich einfach ein bisschen rein, damit du besser sehen kannst. Jetzt schreibe ich hier weniger als H eins, du musst nur klein schreiben und das Größer-als-Zeichen schließen. Hier siehst du, wie VS Code diesen anderen Teil für uns platziert. Im Grunde dieser andere Teil des H One, jetzt ist es vorerst nicht wirklich wichtig. Schreiben Sie jetzt einfach Hallo Welt. Es ist also im Grunde eine lange Tradition, der wir folgen. Wann immer Sie also unsere allererste Codezeile schreiben, schreiben wir normalerweise in jeder Programmierung Hello World. Okay? Das ist also der beste Weg, unsere allererste Codezeile zu schreiben. Okay. Nun die nächste Zeile, ich werde hier schreiben. Also musst du wieder weniger als Symbol schreiben und dann musst du P schreiben Also hier steht P für Absatz. Und hier steht Hach One für primäre Überschrift. Es ist im Grunde eine Überschrift. Wir müssen nur dieses Größer-als-Zeichen wie dieses schließen und darin, ich werde hier schreiben. Ich schreibe hier meinen Namen. Natürlich kannst du in diesem Fall deinen Namen schreiben, und ich schreibe und das ist meine allererste Webseite. Okay. Nun, hier in dieser HTML-Datei haben wir gerade unsere ersten beiden Codezeilen geschrieben. Okay? Jetzt müssen wir nur noch diese Datei speichern, um das Ergebnis dieses Codes zu sehen. Okay? Um das zu speichern, müssen Sie nur noch auf Ihrer Tastatur als Steuerelemente oder Befehle drücken . Oder die andere Möglichkeit, die Datei zu speichern, besteht darin, zu dieser Datei zu wechseln, und hier sehen Sie, dass wir eine Speicheroption haben. Sie können einfach darauf klicken oder eine Tastenkombination als Steuerung verwenden. Derzeit verwenden wir jedoch AutoSave, sodass wir unsere Dateien nicht manuell speichern müssen Also ein Code, der den Job für uns erledigt, okay? Oder Sie können einfach hier klicken, um die Dateien zu speichern . Jetzt wurde die Datei gespeichert, und vielleicht stellen Sie auch fest, dass die Formatierung ein wenig geändert hat, und das liegt an der hübscheren Erweiterung, die wir im letzten Video installiert haben Denken Sie also daran, dass PreaRetension unseren Code automatisch formatiert, wenn Und genau das ist uns gerade passiert. Lassen Sie uns hier also einige Leerzeichen hinzufügen. Und wenn ich unsere Dateien speichere, formatiert Preter diesen Code automatisch für uns Also klicke ich einfach hier raus und hier ist es Preter formatiert unseren Code, also ohne dass wir das tun müssen Jetzt sehen wir hier, dass wir eine Menge Einkerbungen haben. Einrückung bedeutet also, dass einige Leerzeichen hinzugefügt werden. Leute, warum wir unseren Code formatieren müssen , um unseren Code lesbarer zu machen Okay? Und das ist die Stärke von Prettier, und es stellt sicher , dass Ihr Code immer genauso aussieht wie der Code im Video Grade und jetzt haben wir diese Indexpunkt-HTML-Datei und können sie im Browser öffnen Also gehe ich jetzt zurück zu meinem Desktop. Also, wo sich diese Datei befindet. Also in diesem Testordner, also hier ist unsere Datei. Um dies zu öffnen, können Sie einfach darauf doppelklicken oder einfach schreiben, darauf klicken und Sie können auf Öffnen klicken und es als Google Chrome auswählen Hier ist unsere allererste Webseite , die wir gerade manuell in VS-Code erstellt Großartig. Und das ist wirklich unglaublich, wenn du mich fragst. Also herzlichen Glückwunsch und gut gemacht zu Ihrer allerersten Webseite hier. Platzieren wir also Google Chrome auf der rechten Seite und den VS-Code auf der linken Seite. Jetzt werde ich einfach diesen Exploertab schließen sodass Sie hier sehen, dass wir diese H-Eins-Überschrift haben Also dieses Hallo Welt, hier siehst du im Webbrowser, dieses Hallo Welt in dem großen und fett gedruckten Text Und dann haben wir einen Absatz geschrieben. So steht es im normalen Text, wie Sie sehen können. Und noch etwas, das auf unserer Webseite steht, das ist der Titel dieser Webseite. Hier sehen Sie also genau dieselbe Zeile wir in den Titel unseres VS-Codes geschrieben haben. Das ist also genau im Webbrowser gedruckt. Also noch einmal, der Code , den wir hier in unser HTML-Dokument geschrieben haben unser HTML-Dokument spiegelt sich jetzt im echten Webbrowser wider. Apropos Webbrowser: Ich verwende Google Chrome, um den gesamten Kurs zu testen , den wir in diesem Kurs schreiben werden . Daher rate ich Ihnen wirklich, auch Google Chrome zu verwenden , um den Code, den Sie schreiben, immer zu testen , damit wir erneut sicherstellen, dass Sie genau die gleichen Ergebnisse erzielen, die Sie im Kursvideo sehen. Okay. Und das ist eigentlich genug für dieses allererste Programmiervideo, und ich hoffe, dass Sie wirklich die Ideen bekommen , die ich Ihnen in dieser Vorlesung zeigen wollte. Beginnen Sie also im Grunde damit, einen Projektordner zu erstellen und dann diesen Projektordner in VS-Code zu öffnen. Also in diesem Ordner hier der Testordner. Dann erstellen wir darin eine ML-Datei und fügen der Datei etwas Code hinzu und öffnen schließlich das HTML-Dokument in einem echten Webbrowser wie Google Chrome, wo wir dann das Ergebnis sehen. Also im Grunde die Übersetzung unseres Codes in ein visuelles Ergebnis. Ich hoffe, du hattest Spaß dabei und ich sehe dich im nächsten Video. Danke. 5. Kursmaterial herunterladen: Um diesen Kurs zu absolvieren, benötigen Sie unter anderem diesen Kurs zu absolvieren Zugriff auf einige Startdateien. Lassen Sie mich Ihnen in diesem Video sehr schnell zeigen, wie Sie auf diese Dateien zugreifen können. Die gesamten Startdateien sowie die endgültigen Dateien für den Kurs werden in diesem sogenannten Repository auf Github gehostet. Github ist im Grunde eine Codeplattform meisten Entwickler ihren Code hochladen , um ihn zu teilen mit anderen Entwicklern zusammenzuarbeiten oder einfach zu speichern. Unser Repository ist also im Grunde ein Ordner , der eine Menge Code oder andere Dateien enthält. Und auf jedes Repository kann über eine URL zugegriffen werden, und dieses Repository ist unter dieser URL verfügbar, aber keine Sorge, Sie müssen das nicht eingeben. Leute, im obigen Abschnitt dieses Kurses habe ich euch den Link zu dieser Gu-Seite zur Verfügung gestellt , sodass ihr von dort aus einfach über den Link klicken und direkt hier zur Ressourcenseite springen könnt. Richtig. Ich bin mir sicher, dass du diesen Link finden kannst. Aber leider findest du das Linkmittel nicht, dann kannst du einfach diese Github-URL eintippen. In diesem Repository haben wir also, wie gesagt, einige Startdateien und wir haben auch die endgültigen Dateien. Gehen wir also zuerst zu den Starterdateien. Und hier siehst du hier, du wirst einige Ordner sehen können. In den Startdateien habe ich also diese DML-Grundlagen und in diesem Ordner habe ich diese Herausforderungen Darin habe ich Ihnen ein Bild zur Verfügung gestellt, und wir haben eine Inhaltsdatei Wenn ich das zusammenfalle und hier siehst du , haben wir einen Word-Ordner, der IMG ist. Also hier haben wir alle Bilder. Wann wir diese Bilder verwenden heißt, wenn wir unser Projekt erstellen, richtig? Okay. Ich habe auch den endgültigen Code hinzugefügt, damit Sie Ihren eigenen Code immer mit dem Code vergleichen können, den ich in den Videos schreibe Das wird sehr wichtig sein, damit Sie Ihren Code mit meinem vergleichen können , falls Sie Fehler in Ihrem Code haben. also Ihren Code auf diese Weise mit meinem vergleichen , ist es immer am einfachsten, Fehler zu finden, vielleicht tippen Sie Ihren Code ein, und das wird mit Sicherheit passieren. Das passiert allen Anfängern. In dieser Situation können Sie einfach auf den endgültigen Code zugreifen. Schließlich gibt es hier unten auch dieses Rückgabedokument, das die am häufigsten gestellten Fragen enthält. Bevor Sie mit dem Kurs beginnen, ist es vielleicht eine gute Idee , diese Fragen schnell durchzulesen , die nur zwei bis drei Minuten dauern sollten , aber ich bin mir sicher, dass Sie dadurch einige Zweifel ausräumen können, die Sie Laufe des Kurses bekommen könnten. Aber wie dem auch sei, wir sind wirklich hergekommen , um den richtigen Code zu finden. Um diesen Code herunterzuladen, können Sie einfach auf diese grüne Schaltfläche klicken, die Code ist, und dann müssen Sie einfach diese Download-Zip-Datei auswählen. Ich speichere diese Dateien einfach in meinen Downloads und klicke auf diese Schaltfläche. Jetzt ist mein Download abgeschlossen, also habe ich das einfach abgeschnitten. Ich gehe einfach zurück zu meinem Desktop und füge es einfach hier ein. Und das sind unsere Dateien. Um das auf dem Mac zu extrahieren, müssen Sie nur noch darauf doppelklicken, und unter Windows müssen Sie nur mit der rechten Maustaste klicken und dann auf „ Alles extrahieren “ und dann auf dieses Extra klicken. Jetzt haben wir all diese Dateien, die wir jetzt extrahiert haben. Jetzt brauchen wir dieses Zip-Archiv nicht mehr. Also lass uns das löschen. Jetzt haben wir also im Grunde unsere Dateien. Jetzt können wir einfach diesen Ordner öffnen. Und hier seht ihr Leute, hier haben wir einen Starter-Ordner und einen Final-Ordner. Gehen wir also zu den Startdateien, und hier habe ich einen Ordner mit den HTML-Grundlagen Hier haben wir also all diese Bilder und natürlich haben wir noch einen weiteren Ordner, der Herausforderungen darstellt Wir haben also die Starterdateien und haben auch eine Inhaltsdatei mitgeliefert. Also im Grunde der Text des Projekts, wir haben die Startdateien und hier sind die Dateien für die kommenden Vorlesungen. Jetzt, wo die Startdateien vorhanden sind, sind wir tatsächlich bereit, mit dem Lernen von HTML zu beginnen. 6. Einführung in HTML: Willkommen zurück. Lasst uns jetzt ganz schnell lernen was HTML eigentlich ist und was wir damit machen können. HTML steht also im Grunde für Hypertext Markup Language. Und denken Sie daran, wie wir zuvor gelernt haben, dass HTML neben CSS und JavaScript eine der wichtigsten Webtechnologien neben CSS und Derzeit ist HTML eine Auszeichnungssprache, mit der wir Webentwickler strukturieren und beschreiben können den gesamten Inhalt einer Webseite Beachten Sie also, wie ich Auszeichnungssprache gesagt habe , weil HTML wirklich keine Programmiersprache ist Es ist eine Auszeichnungssprache weil wir sie verwenden, um etwas zu beschreiben Und im Fall von HTML beschreiben wir Inhalte mithilfe von Elementen Wir haben also verschiedene Elemente, mit denen wir verschiedene Arten von Inhalten beschreiben können. So haben wir zum Beispiel das P-Element, das wir bereits in der Vorlesung verwendet haben, in der wir unsere allererste Webseite erstellt haben . Deshalb verwenden wir dort das P-Element, um einen Absatz zu erstellen. Aber wir haben wirklich alle möglichen Elemente, also Elemente zum Erstellen von Links, zum Erstellen von Seitenüberschriften, Bildern, Videos und vielem also Elemente zum Erstellen von Links, zum Erstellen von Seitenüberschriften, Bildern, mehr, während wir im Laufe des gesamten Kurses lernen Wie wir dann auch in der Vorlesung gelernt haben, in der wir unsere allererste Webseite erstellen, Webbrowser wie Google Chrooms HTML-Code im Wesentlichen verstehen Webbrowser wie Google Chrooms HTML-Code im Wesentlichen und können ihn als endgültige Website rendern Also Website, die wir im Webbrowser sehen können. Okay? Das ist also im Wesentlichen das, was HTML ist und was wir damit machen können. Aber jetzt zoomen wir einfach ein wenig hinein und werfen einen Blick auf die Anatomie des HTML-Elements. Schauen Sie sich also im Grunde die Bausteine des HTML-Elements an . Und wir werden hier ein Beispiel für das Überschriftenelement nehmen , wie Sie sehen können. Und all das ist eigentlich das Element selbst. Jetzt besteht ein TMR-Element normalerweise aus drei Teilen. erste ist das öffnende Tag, das ist der Name des Elements In diesem Fall ist es also das H, das in die Symbole „ Weniger als“ und „ Größer als“ eingeschlossen ist. Leute, sie haben andere Namen, aber so nenne ich diese Symbole gerne. Also ist es kleiner als H eins und dann größer als. Dann haben wir im Grunde den Inhalt des Elements. In diesem Beispiel ist das also nur Text, aber es könnte auch andere Arten von Inhalten geben. Zum Beispiel kann ein Element ein anderes Element enthalten, das wir dann als untergeordnetes Element bezeichnen. Außerdem haben einige Elemente wie Bilder eigentlich überhaupt keinen Inhalt und haben nur ein öffnendes Tag, und all dies wird natürlich sehr intuitiv, wenn wir anfangen, HTML zu schreiben. Das ist nur, damit du weißt, wovon ich spreche. Wenn ich von öffnendem Tag oder schließendem Tag oder Inhalt spreche und vom schließenden Tag spreche, ist das im Grunde dasselbe wie das öffnende Tag, nur mit einem Schrägstrich Also öffnen wir dieses Überschriftenelement einfach mit diesem H-One-Tag und schließen es dann mit einem Schrägstrich Okay? Bei Elementen, die keinen Inhalt haben, wie z. B. das Bildelement , das ich bereits erwähnt habe, lassen wir das schließende Tag weg In diesem Fall haben wir also nur das öffnende Tag, und das war's Und das werden wir natürlich in Aktion sehen, sobald wir anfangen, Bilder in unsere Webseiten zu integrieren. Okay, und das ist wirklich alles, was Sie brauchen, um HTML in der Praxis zu lernen , und genau das werden wir in der nächsten Vorlesung tun. Danke. 7. HTML-Dokumentstruktur: Willkommen zurück. Das Erste, was wir über HTML lernen müssen, ist die allgemeine HTML-Dokumentstruktur. Also eine Struktur, die jedes einzelne HTML-Dokument haben muss. Aber lassen Sie uns zunächst einen kurzen Blick auf das Projekt werfen, das wir in diesem Abschnitt erstellen werden . Also erstellen wir diese Coding Ninja-Website. Auf dieser Coding Ninja-Website haben wir also einige Links, und wir haben einige Überschriften und wir haben einige Bilder und hier sehen Sie, wir haben fett gedruckten Text, und hier haben wir Es gibt also eine Menge Dinge, die wir in diesem Abschnitt lernen werden , sodass Sie am Ende die Grundlagen von HTML gelernt haben werden und wir mit diesem Projekt enden werden Okay. Aber wie dem auch sei, lass uns jetzt endlich an die Arbeit gehen. Und das erste, was wir hier noch einmal tun müssen , um unseren Projektordner zu erstellen. Gehen wir also zurück zu unserem Desktop. Und hier sehen Sie, dass wir einen Ordner haben , den wir im letzten Abschnitt von Github heruntergeladen haben. Also lass uns das öffnen und ich mache einfach mit der Starterdatei weiter. Und hier sehen Sie, dass wir einen Ordner haben , DML Fundamentals Ich nehme einfach eine Kopie dieses Ordners und füge ihn einfach in meinen Hier ist unser Ordner da. Anstatt das zu tun, könnten Sie diesen Ordner auch einfach hier als Ihren Projektordner verwenden. Aber das könnte zu einigen Verwirrungen führen. Deshalb ziehe ich es immer vor , diesen Ordner einfach von hier an einen anderen Ort zu kopieren . Okay? Gehen wir jetzt zurück zu unserem VS-Code. Um jetzt einfach ein neues Fenster in VS-Code zu erstellen, müssen wir nur noch auf diese Balken klicken und wir müssen auf diese Datei klicken. Und hier sehen Sie, wir können ein neues Fenster erstellen , indem Sie hier klicken, oder Sie können eine Tastenkombination als Strg+Shift E verwenden . Also werde ich einfach darauf klicken und schon ist unser neues VS-Code-Fenster da. Also schließe ich das einfach. Also schließe ich einfach dieses Fenster. Also legen wir es auf die linke Seite. Und der Browser auf der rechten Seite. Lassen Sie uns jetzt diese Begrüßung schließen. Hier müssen Sie also auf diese Explorer-Registerkarte klicken , um sie zu erweitern. Und hier müssen wir auf diesen Ordner öffnen klicken. Also muss im VS-Code immer ein sogenannter Projektordner vorhanden sein, damit ich es dir schon früher gesagt habe. Klicken wir also auf diesen Ordner öffnen. Und hier klicke ich einfach auf meinen Desktop. Ich wähle einfach diese ML-Grundlagen aus, die ich einfach kopiert und eingefügt habe Ich werde das auswählen und auf diesen ausgewählten Ordner klicken Jetzt, Leute, wir sind erfolgreich im Projektordner , den wir erstellt haben. Also hier seht ihr, wir haben ein paar Bilder. Also im Grunde eine Textdatei. Also hier haben wir eine Menge Inhalt. Danach können wir das kopieren. Also werden wir es etwas später sehen. Also werde ich das schließen. Also hier seht ihr, Leute, zuerst müssen wir eine Datei erstellen. Also möchte ich hier nur eine neue Datei erstellen. Also gebe ich ihr einfach einen Namen als Indexpunkt-HTML. Hier sehen Sie also, dass wir eine HTML-Datei mit der Erweiterung HTML mit Punkt haben , und wir müssen unseren Dateinamen immer als Index angeben , wenn wir unser allererstes HTML-Dokument erstellen. Also, Leute, wie ihr euch in der vorherigen Lektion erinnert habt, haben wir Achieve Set verwendet um unsere HTML-Dokumentstruktur zu erstellen. Wir haben dieses Ausrufezeichen benutzt. Dann haben wir darauf geklickt, und hier sehen Sie, dass unsere HTML-Dokumentstruktur einfach mithilfe eines Spickzettels erstellt wurde Aber das Erste, was wir in HTML lernen müssen, ist die übliche HTML-Dokumentstruktur Zunächst möchte ich die Ansicht vergrößern. Also Leute zum Heranzoomen, also um unseren Text klarer zu sehen, müsst ihr als Steuerung auf eure Tastatur drücken und mit der Maus nach oben scrollen. Wie ihr hier sehen könnt. Also Leute, lasst uns das alles löschen und lasst uns jetzt das Erste in DMs schreiben Schreiben wir Weniger als Symbol und Ausrufezeichen, und dann müssen wir die Wörter groß schreiben, dass Hunde Zeit haben die Wörter groß schreiben, dass Hunde Zeit haben Und hier sehen Sie, dass VS Code versucht, dies für uns automatisch zu vervollständigen Schreiben wir es also von Hand, damit dieser Code dauerhaft in Erinnerung bleibt Schreiben wir also nach diesem HTML-Code, und wir müssen das schließen. Also schreib das Größer-als-Zeichen. Also, was dieser Dokumenttyp zu unserem Browser sagt, also verwenden wir die HTML5-Version, um unsere Webseite zu erstellen. Danach, Leute, wie ihr wisst , müssen wir, um ein Element zu erstellen , immer weniger als ein Symbol schreiben, und wir müssen den Elementnamen angeben und wir müssen das Element schließen. Also, welches Element wir verwenden, bedeutet, dass wir ein HTML-Element direkt im kleingeschriebenen HTML erstellen und das Element dann mit dem Zeichen größer als Symbol schließen Der VS-Code schließt dieses schließende Tag also automatisch. Leute, wenn ihr nicht wollt, dass dieser VS-Code dieses Tag automatisch schließt, dann könnt ihr zu den Einstellungen gehen und auf die Einstellungen klicken. Und hier musst du nach einem Tag mit automatischem Schließen suchen. Hier siehst du, dass unser Tag zum automatischen Schließen aktiviert ist Entferne einfach das Häkchen und wir werden es etwas später aktivieren Lassen Sie uns das vorerst von Hand schreiben. Wir werden also etwas üben, indem wir HTML-Code schreiben. Also Leute, lasst uns diese Seitenleiste schließen, sodass sie zum Explorer-Tab wird , um ihr ein bisschen mehr Platz zu geben Hier seht ihr Leute im HTML-Tag, wir müssen zwei Elemente erstellen Das erste ist Head-Tag Erstelle es weniger als Symbol und Kopf. Dann müssen wir sofort auch diesen Kopf schließen. Und hier müssen wir das Körperelement erschaffen. Leute, welches Element du auch öffnest, du musst es auch so schließen Beim Schließen musst du hier einen Schrägstrich angeben. Also, Leute, wie ihr hier sehen könnt, haben wir einen Dokumenttyp Danach haben wir ein HTML-Element, und in diesem HTML-Element wir ein Head-Element und wir haben auch ein Body-Element Dieses HTML-Element ist das übergeordnete Element für Kopf und Körper. Also muss jedes einzelne HTML-Dokument immer mit einem solchen HTML-Element beginnen. Jetzt ist das Head-Element im Grunde für Dinge gedacht, die im Browserfenster nicht sichtbar sind. Jetzt enthält dieser Kopf den Seitentitel, einige zusätzliche Informationen zur Seite, einen Link zu CSS-Dateien oder andere Dinge. Laufe des Kurses werden wir diesen Kopf mit allen möglichen Elementen füllen . Aber im Moment möchte ich nur den Titel angeben. Lassen Sie uns hier das Titelelement verwenden. Und diesen Titel müssen wir auch schließen. In diesem Titel möchte ich diesen Titel einfach als die Grundsprache des Webs bezeichnen . Okay, dann ist der Hauptteil eigentlich für alle Elemente da, die auf der Seite sichtbar sein werden. Alle Elemente , die wir hier im Browser sehen, befinden sich also immer innerhalb des Body-Elements. Und nur um es dir zu zeigen, anstatt es leer zu lassen, lass mich hier etwas Code einfügen. Ich werde wieder das Überschriftenelement verwenden, also lassen Sie uns das schließen. Also schnappe ich mir einfach diesen Titel und füge ihn hier ein. Lassen Sie uns jetzt diesen H-Bereich schließen. Im Moment haben wir diese Datei noch nicht gespeichert, aber während wir das tun, wird Preter diese Datei erneut für uns formatieren Speichern wir sie und Sie sehen, dass wir jetzt den richtigen Einzug haben Und mit Einrückung meine ich, dass sich dieses Head-Element innerhalb dieses HTML-Elements befindet Wir haben hier also einen Tab, also ein paar Leerzeichen hier. Danach siehst du in diesem Hauptelement , wir haben hier einen Titel. Hier haben wir mehr Einrückungen, also haben wir hier mehr Leerzeichen. Also im Grunde ist das hier nur ein Tab. Wenn ich also Tab K drücke, wird eine weitere Einrückungsebene hinzugefügt Das ist also im Grunde nur eine Tab-Größe. Also, wenn ich auf meiner Tastatur auf einen Tab drücke, dann siehst du es hier. Jetzt ist es also auf derselben Ebene wie der Titel, was keinen Sinn ergibt, weil der Titel auch im Kopf ist, richtig. Wir haben also den Kopf innerhalb der DML und dann innerhalb des Kopfes haben wir das Titelelement Deshalb hat es eine weitere Einrückungsebene. Okay? Nun, das ist nur aus ästhetischen Gründen, um unseren Code lesbarer zu machen. Dem Browser ist diese Einrückung also wirklich egal , aber es ist trotzdem wichtig wir den Code lesen können, und ich denke, wir sind jetzt bereit, ihn tatsächlich im Browser zu öffnen Gehen wir also zurück zu unserem Desktop. Öffnen wir unseren Projektordner, also diese HTML-Grundlagen, und doppelklicken Sie einfach auf diese HTML-Datei mit dem Indexpunkt Und hier ist es nett, tolle Arbeit. Platzieren wir es auf der rechten Seite und als Code auf der linken Seite. Also lass uns diesen schließen. Also bringe ich es einfach nach vorne. Ich lasse das offen, damit wir sehen, was wir am Ende erreichen wollen. Okay. Und damit lernen wir die Grundstruktur von HTML. Lassen Sie uns das kurz überprüfen. Also muss jedes HTML-Dokument immer mit dem sogenannten Doc-Typ beginnen. Auf diese Weise wird der Browser wissen, was wir in dieser Datei tatsächlich als HTML verwenden. Und alle Browser werden wissen, dass sie die HTML-Dateispezifikation verwenden sollten , um diesen HTML-Code zu rendern. Dann haben wir das HTML-Element, das immer sowohl dem Kopf- als auch dem Körperelement übergeordnet ist. Diese Struktur ist also auf allen Webseiten wirklich immer dieselbe . Wir brauchen immer ein HTML-Element mit einem Kopf und einem Körper. Nun, was wir in den Kopf und den Körper einfügen, ist optional, aber diese beiden zu haben ist nicht optional, also brauchen wir immer einen Kopf und einen Körper. In dieser Situation ist alles, was wir in den Kopf einfügen, nur ein Titelelement. Aber hier können wir alle möglichen anderen Dinge platzieren, die nicht sichtbar sind und die nicht in diesem Hauptteil des Browsers gerendert werden . Andererseits sollte der Inhalt, den wir hier eigentlich rendern wollen , in das Body-Element aufgenommen werden. Deshalb erscheint dieses H-One-Element auf unserer Webseite. Okay? Das ist die grundlegende Schätzstruktur für jedes einzelne Kostenvoranschlagsdokument , das Sie wirklich kennen müssen. Und damit fahren wir mit der nächsten Lektion fort, in der wir einige neue Elemente für die Arbeit mit Text lernen werden . Ich hoffe also, Sie bald dort zu sehen. Danke. 8. Textelemente Überschriften, Absätze, Fett- und Kursivschrift: Hey, Leute, willkommen zurück. In dieser Vorlesung werden wir weiter lernen, wie man Text markiert. Wir werden also weiterhin einige Überschriften und einige Absätze verwenden, und wir werden auch lernen, wie man Text fett und kursiv macht Und fangen wir tatsächlich mit den Überschriften an. Normalerweise besteht das Ziel der Überschriften darin, große Textblöcke in logischere Abschnitte aufzuteilen und im Grunde genommen für jeden dieser Abschnitte einen Titel hinzuzufügen Jetzt haben Sie bereits etwas über eine Überschrift gelernt , die als H-eine Überschrift bezeichnet wird , aber es gibt tatsächlich sechs verschiedene Überschriften Es gibt also eine Hierarchie von Überschriften , sodass wir in unserem Text eine Hierarchie einrichten können, sodass wir von H eins bis H sechs gehen können Lassen Sie uns also diesen Text und all diese sechs Überschriften erstellen, damit Sie sehen können, wie sie im Browser visuell unterschiedlich aussehen Dieses H ist also die Hauptüberschrift, und jetzt werden wir dieses H zwei verwenden, also schreiben wir weniger als ein Symbol. H zwei. Leute, H zwei steht für die sekundäre Überschrift. Lass uns das schließen. Ich werde einfach den Text einfügen , den ich kopiert habe. Ich werde einfach diese sekundäre Überschrift schließen. Für die Gebietsüberschrift müssen wir nun H drei schreiben und den Text einfügen. Jetzt müssen wir natürlich auch dieses Tag schließen. Nun, Leute wie dieser, nur wir haben sechs verschiedene Überschriften. Also lass uns einfach das alles schreiben und ich werde das alles einfach einfügen Also haben wir Pi. Die letzte Überschrift ist Jungs sechs. Es ist die letzte Überschrift. Speichern wir es in dieser HTML-Datei, in Ordnung. Während du diese Zeichen, diesen Code, eintippst, wird dir das alles in den Sinn kommen und du wirst anfangen , HTML zu schreiben. H sechs und lass es uns speichern. Wie Sie hier sehen können, wurde dadurch im Grunde eine visuelle Hierarchie zwischen diesen sechs Überschriften geschaffen im Grunde eine visuelle Hierarchie zwischen diesen sechs Überschriften Die erste ist die größte und größte Überschrift und die letzte Überschrift sind diese sechs Dies ist die kleinste Überschrift. Nun, Leute, ich glaube, ihr habt eine Frage im Kopf Warum gibt es in HTML nur sechs Überschriften Warum haben wir nicht sieben? Also lass es uns ausprobieren. Also schreiben wir diese sieben, und was wir in diesen Text kopiert haben, fügen wir wieder ein Lassen Sie uns also dieses Tag schließen. Also, wie ihr hier sehen könnt, Leute, haben wir diese sieben Überschriften geschrieben. Also im Grunde ist es keine gültige Überschrift, die ich euch zeigen könnte, ich habe das gerade geschrieben. Hier sehen Sie also als einfachen Absatz, diese Überschrift wurde auf unserer Webseite veröffentlicht. Also lösche ich das einfach , sodass wir im Grunde nur sechs Überschriften haben Die letzte Überschrift sind also diese sechs, also ist es die kleinste Überschrift Und zwischen dieser H-Eins und Hessix haben wir all diese verschiedenen Arten von Jetzt wissen wir also, wie diese verschiedenen Überschriften funktionieren. Aber schauen wir uns unsere Coding Ninja-Website an , um zu sehen , welche Art von Überschriften wir Also hier seht ihr Leute auf dieser Coding Ninja Website, wir haben Das ist also die größte Überschrift auf unserer Webseite. Also ich denke, es könnte die Huan-Überschrift sein. Es ist also die Hauptüberschrift. Und hier seht ihr Leute unter dieser Überschrift, wir haben eine weitere Überschrift. Also schau genau hin. Also das ist nicht mehr die Hauptüberschrift. Das ist also die sekundäre Überschrift, und danach haben wir einige Bilder. Hier siehst du, also diese Überschrift ist kleiner als diese. Diese Überschrift ist also im Grunde unsere Gebietsüberschrift. Das sind also die drei Überschriften. Erinnerst du dich, wie ich gesagt habe , dass eine Überschrift im Grunde dazu dient , Text in logische Abschnitte aufzuteilen, oder? Also hier dazwischen haben wir einen weiteren Abschnitt. Lassen Sie uns nun das Markup für diese Art von Struktur erstellen das Markup für diese Art von Struktur Wir haben also den ganzen Text , den wir tatsächlich brauchen, hier. Also, Leute, hier müsst ihr auf diesen Explorer-Tab klicken. Also, Leute, hier seht ihr, wir haben eine Inhaltsdatei, diese Textdatei. Wenn ihr das öffnen wollt, könnt ihr einfach darauf doppelklicken und hier unsere Textdatei sehen oder wenn ihr in der Seitenleiste öffnen und hier ablegen wollt Also, Leute, hier, seht ihr, wir haben diesen Inhalt. Aus diesem Inhalt haben wir diese Website erstellt. Lassen Sie uns also diese Seitenleiste kollidieren lassen. Wir müssen nur diesen Code hier kopieren und einfügen oder diesen Text in unsere Indexpunkt-HTML-Datei einfügen. Also lass uns das machen. Also lasse ich das hier als Referenz. Denken Sie also daran, dass wir mit der Hauptüberschrift beginnen werden. Lassen Sie uns hier also einige Leerzeichen hinzufügen. Und lass uns zu dieser Inhaltsdatei gehen. Also, Leute, ich habe diese Hashes hinzugefügt, damit ihr versteht, was die Überschrift und welcher der Absatz ist Also hier seht ihr, dass ich diesen hinzugefügt habe , weil es die primäre Überschrift ist Wie Sie hier sehen können, handelt es sich um einen doppelten Hash, es handelt sich also um eine sekundäre Überschrift. Und so habe ich diese Inhaltsdatei erstellt. Lassen Sie uns nun diese primäre Überschrift erstellen. Also kopiere ich einfach das als Erstes und gehe zu meiner Indexpunkt-HTML-Datei , und gehe zu meiner Indexpunkt-HTML-Datei füge hier einige Leerzeichen hinzu und erstelle eine Hash-Eins-Überschrift. Im Grunde ist es eine Hauptüberschrift. Lass es uns hier einfügen. Und lassen Sie uns auch diese H-Zone schließen. Hier sehen Sie also, dass wir eine zweite Überschrift haben. Also lass uns eine Kopie davon holen. Lassen Sie uns also eine sekundäre Überschrift erstellen. Und während Sie diese Zeichen eingeben, können Sie damit beginnen , das Schreiben von HTM zu üben Es wird also dauerhaft in deinem Gehirn haften bleiben. Lassen Sie uns also beim Scrollen auf unserer Webseite weitere Überschriften hinzufügen . Also hier sehen Sie, hier haben wir unsere erste Überschrift, also H drei, und lassen Sie uns sie von Hand schreiben Und lassen Sie uns das nicht sofort schließen. Speichern Sie es jetzt einfach und öffnen Sie unsere Webseite. Und jetzt laden wir unsere Webseite neu. Und los geht's. Nett. Also das ist im Moment quasi die Struktur unseres Textes. Und jetzt müssen wir es nur noch mit den Absätzen dazwischen füllen . Also im Grunde genommen, wie diese Absätze dazwischen sind, also haben wir hier einige Absätze. Also, wie Sie sehen können, fügen wir es hier hinzu. Also gehe ich einfach in meine Inhaltsdatei und hole mir das. Also, Leute, beim Kopieren und Einfügen dieses Textes habe ich in diesem Trick einen sehr interessanten Trick mit der Abkürzung gelernt . Wenn ich diesen Text kopiere, möchte ich ihn jedoch nur von oben ziehen und muss ihn dann hier ablegen. Was ich gelernt habe, bedeutet, wenn ich diesen Absatz nur direkt auswählen möchte, kann ich einfach dreimal hier drüben klicken und ich wähle einen beliebigen Absatz aus, um ihn zu kopieren. Hier siehst du. Wenn ich also nur diesen Absatz kopieren möchte, klicke ich einfach dreimal hier drüben. Der Absatz ist also ausgewählt. Das ist also eine sehr interessante Abkürzung. Wenn Sie also diese ganze Zeile auswählen möchten, können Sie einfach dreimal hier drüben klicken und sie kopieren Also gehe ich einfach zu meiner Indexpunkt-HTML-Datei. Dieser Absatz befindet sich also unter der sekundären Überschrift. Also diese grundlegende Sprache des Webs. Also füge ich es einfach hier ein. Lass uns diesen schließen. Leute, nach diesem Bild haben wir mehr Text. Lasst uns das kopieren. Lassen Sie uns also noch ein paar Absätze erstellen. Lassen Sie uns einen weiteren Absatz erstellen, und ich möchte ihn sofort schließen. Zwischen diesem Absatzelement möchte ich nur diesen Text einfügen. Also schnappe ich mir das einfach und füge es hier ein. Speichern wir es und los geht's. Hier siehst du in der HTML-Datei. Also hier haben wir etwas mehr Text. Also diese beiden Absätze. Lassen Sie uns das auch hinzufügen. Ich wähle das aus und gebe etwas Platz und wir müssen diesen Balas einfügen Und noch einen Absatz müssen wir erstellen und wir müssen diesen Absatz auch schließen Lassen Sie uns das jetzt einfügen. Hier. Geben wir es in einen Tresor und hier ist es. Leute, am Anfang haben wir nur die hübschere Erweiterung installiert, und dadurch sieht unser Code sehr gut aus Es hat für uns die richtige Einrückung hinzugefügt. Schauen wir uns jetzt die Webseite an. Laden wir jetzt diese Webseite neu und los geht's. Nett, großartig. Lassen Sie uns jetzt alle diese sechs Überschriften hier loswerden Jetzt weißt du schon, wie sie funktionieren und wie sie existieren. Und anstatt sie loszuwerden, können wir etwas verwenden, das als Befehle in HTML bezeichnet wird. Ein Kommentar in HTML ist also eine Möglichkeit, Code zu schreiben , der im Browser nicht sichtbar ist. Und das ist sehr nützlich weil wir damit Kommentare zu unserem Code schreiben oder einfach Code verstecken können unserem Code schreiben oder einfach Code verstecken , den wir nicht im Browser rendern möchten. Nun, um einen Befehl zu schreiben, das ist eine etwas seltsame Syntax. Also füge ich hier einfach ein paar Leerzeichen hinzu. Auch hier schreiben wir ein Kleiner-als-Zeichen, und hier müssen wir ein Ausrufezeichen und dann einen Gedankenstrich schreiben Ausrufezeichen und dann einen Gedankenstrich Und wie Sie sehen können, schließt VS Code diesen anderen Teil automatisch für Im Grunde dieser Pfeil. Ich entferne das einfach. Wie Sie jetzt sehen können, wurde unsere vollständige Codefarbe grau. Da das alles jetzt ein Kommentar ist, wird dieser Code nicht im Webbrowser gerendert. Also ich möchte es dir nur zeigen, während ich mich der Webseite entziehe. Also jetzt ist diese Webseite komplett leer. Also, weil all dieser Code jetzt ein Befehl ist. Leute, ich möchte nur die sechs Überschriften kommentieren. Also möchte ich das nur beenden, indem ich den Befehl schließe. Um den Befehl zu schließen, müssen wir einen doppelten Gedankenstrich und ein Größer-als-Zeichen hinzufügen. Und hier siehst du, dass dieser Text farbenfroh geworden ist. Welchen Teil wir auch immer in DML kommentiert haben, dieser Code ist grau geworden Lassen Sie uns jetzt die Webseite neu laden. Leute, nur eine Sache, die ich vorhin zu den Überschriften nicht erwähnt habe , ist, dass jede Webseite nur eine H-One-Überschrift haben sollte Also nur eine Hauptüberschrift , die es sehr wichtig zu beachten Das ist nicht wirklich verpflichtend. Es verstößt gegen keine HTML-Regeln wenn wir mehrere H-Regeln haben, aber es ist eine sehr gute Praxis , immer nur eine davon zu haben. Nun zu allen anderen, wir können natürlich mehrere davon verwenden. Ich denke zum Beispiel, dass wir auf unserer Webseite tatsächlich eine weitere dieser Überschriften haben Hier sehen wir in der Mitte. Hier haben wir also diese HTML-Überschrift. Dies ist eine ähnliche Überschrift wie die obige Überschrift. Das ist also auch eine Hinzufügung, und das ist auch eine Hinzufügung. nun kurz zeigen, Lassen Sie mich Ihnen nun kurz zeigen, wie wir fetten und kursiven Text erstellen können. Hier auf unserer Demo-Seite, hier sehen Sie, haben wir den Namen der Autorin Maria , der fett gedruckt ist. Wie können wir das also in HTML machen? Nun, dafür gibt es ein spezielles Element oder sogar zwei Elemente. Und lassen Sie mich mit einem einfacheren beginnen, der B heißt Also hier seht ihr Leute in dem Absatz. In diesem Absatz haben wir diese Maria. Also packen wir diese Maria in das B-Tag ein. Also steht B für fett. Schreiben wir also B und schließen dieses Tag wie jedes andere Tag. Lassen Sie uns also dieses B-Tag schließen. Schauen wir uns jetzt unsere Webseite an. Hier siehst du Leute auf dieser Maria. Also, wenn ich diese Webseite neu lade, schau mal, was passiert Dann siehst du, dass es fett geworden ist. Großartig. Jetzt ist die Verwendung von B jedoch eigentlich keine gute Praxis. B ist also tatsächlich ein älteres Element. Und ab DML Pi sollten wir immer das starke Element anstelle von B verwenden. Der Grund dafür ist, dass das B keine sogenannte semantische Bedeutung und dazu etwas später mehr Aber im Wesentlichen bedeutet das, dass B einfach ein Element ist , ohne eine spezifische Andererseits bedeutet das starke Element, dass dies wirklich ein wichtiges Element ist , das wir von dem Absatz abheben möchten. Lassen Sie uns das also zu stark ändern. Lassen Sie uns dies also bestätigen, indem wir unsere Webseite neu laden. Ja, es ist immer noch fett gedruckt, aber jetzt hat es die Bedeutung, dass es sich um wichtigeren Text handelt, und das ist im Wesentlichen die Idee, DML zu zementieren Und am Ende werden wir wieder mehr über semantisches HTML sprechen Ende werden wir wieder mehr über semantisches HTML Seien Sie sich also vorerst bewusst, dass Sie nicht B verwenden, sondern Strong verwenden, um Text fett zu machen Lassen Sie uns jetzt auch kursiven Text erstellen. Lass uns dieses Wort wählen. Also diese grundlegenden Technologien. Und genau wie bei B gibt es eigentlich zwei Möglichkeiten, dies zu tun. Das ältere ist das I-Element. Also packen wir diese Technologien in dieses I-Element ein, also lassen Sie uns das schließen. Wenn wir jetzt unsere Webseite neu laden, sehen Sie hier diesen Text, grundlegende Technologien sind kursiv geworden. Also, weil wir dieses I-Element verwendet haben, aber Leute, noch einmal, um dieses semantische HTML zu erstellen, sollten wir dieses I-Element nicht mehr verwenden, sondern anstatt dieses I zu schreiben, können wir EM wir EM steht also für Betonung. Lass es uns speichern. Leute, wenn ich die Webseite neu lade, könnt ihr die Ergebnisse sehen Jetzt ist unser Text kursiv, aber jetzt haben wir ihm im Grunde die Bedeutung eines hervorgehobenen Textes gegeben , aber er hat eine semantische Okay, großartig. Das ist ein großer Fortschritt. Bis zu diesem Zeitpunkt geht es Ihnen wirklich gut. Nun, nur um diese Vorlesung zu beenden, möchte ich dir eigentlich schon deine allererste kleine Programmierherausforderung stellen. Also gehe ich einfach zu diesem Stab, also ich möchte, dass Sie hier sehen, dass wir diese Hypertext-Auszeichnungssprache haben Also hier siehst du den Anfangsbuchstaben davon. Also dieser HTML-Code, das ist im fett gedruckten Text. Also im Grunde hier, also hier haben wir diese Hypertext-Auszeichnungssprache Also diese H T M und L. Also ich will das in den fett gedruckten Text aufnehmen. Also glaubst du, dass du das tun kannst und zum ersten Mal selbst etwas HTML-Code schreiben kannst? Nun, ich hoffe wirklich, dass du es versuchst, denn wie ich schon sagte, sind diese Programmierherausforderungen wirklich, wirklich wichtig, damit du anfängst, deine Fähigkeiten zu üben, auch wenn es nur etwas wirklich Einfaches wie dieses ist. Machen Sie also bitte weiter und pausieren Sie das Video sofort und machen Sie jeden dieser vier Buchstaben fett. Und ich werde in einer Sekunde wieder hier bei Ihnen sein , um Ihnen zu zeigen , wie es gemacht wird. Und hast du das gut hinbekommen? Also werde ich dir jetzt zeigen, wie du das gewagt machen kannst. Lassen Sie uns das in das starke Element packen, und hier und hier müssen wir das schließen und hier im Text, also müssen wir ein weiteres starkes Element hinzufügen. Hier müssen wir das fett formatieren. Fügen wir noch ein starkes Element hinzu. Das letzte ist das L. Lassen Sie uns das auch fett schreiben. Ich hoffe, dass ich alles richtig gemacht habe. Jetzt werde ich die Webseite neu laden. Und los geht's HTML ist jetzt fett markiert , großartig. Also noch einmal, ich hoffe, dass Sie das alleine geschafft haben, denn das ist wirklich wichtig für Ihren Lernprozess. Also, Leute, in der nächsten Vorlesung werden wir unserer Webseite etwas mehr Text hinzufügen und wir werden versuchen, viele verschiedene Dinge zu tun. Liebe Studierende, ich hoffe, Ihnen gefällt der Kurs und Sie finden ihn wertvoll. Ich habe viel harte Arbeit investiert, um diesen Kurs für Sie zu erstellen , und Ihr Feedback bedeutet mir sehr viel. Wenn dieser Kurs Ihnen in irgendeiner Weise weitergeholfen hat, sei es, Ihre Fähigkeiten zu verbessern, Ihr Selbstvertrauen zu stärken oder Sie dazu zu inspirieren, selbst etwas zu erstellen, nehmen Sie sich bitte einen Moment Zeit, um eine positive Bewertung zu schreiben. Ihr Feedback motiviert mich, weiterzumachen. Danke, dass du Teil dieser Reise warst. Ich kann es kaum erwarten, deine Gedanken zu lesen. 9. Mehr Textelemente Sortierte Liste und ungeordnete Liste: Lassen Sie uns weiter mit Text arbeiten. Und in dieser Vorlesung werden wir lernen, wie man Listen mit Aufzählungspunkten und auch mit Zahlen erstellt . Und was ich mit einer Liste meine, ist im Grunde eine Liste von Aufzählungspunkten, wie Sie hier sehen. Hier haben wir also all diese Aufzählungspunkte. Und auch wie eine Bestellliste wie diese Zahlen. Also hier sehen wir hier eins, zwei, drei, und wir haben auch eine Liste mit den Aufzählungspunkten. Mal sehen, wie wir das in unserem HTML erstellen können. Das ist in HTML sehr einfach zu machen. wir also mit dieser Bestellliste beginnen, wo diese Bestellliste vorhanden ist, bedeutet das, dass sie sich im Abschnitt „Was ist HTML“ befindet. Ich scrolle einfach nach unten. Hier ist die HTML-Überschrift und danach haben wir drei weitere Absätze und wir haben diese Bestellliste. Wir haben also zwei der Absätze und ein weiterer Absatz fehlt. Lassen Sie uns das also auch hinzufügen. Also gehe ich einfach zu dieser Inhaltsdatei, die ich dir in der vorherigen Vorlesung gezeigt habe. Hier sehen wir also, was HTML ist. Also nach dieser Überschrift, also hier haben wir diesen Absatz, und wir haben auch diese Liste. Lassen Sie uns das alles schnappen. Und füge es hier ein und das, was ich will, durcheinander, also schließe ich diesen Absatz einfach ab und schließe ihn. Also, Leute, um diese Art von Bestellliste zu erstellen, müssen wir ein Element hinzufügen, sodass der Elementname OL ist. Also, Leute, OL steht für Order List. Natürlich müssen wir das auch schließen. Lassen Sie uns hier etwas Platz geben denn eigentlich müssen wir für jedes Element der Liste ein Element innerhalb der Bestellliste erstellen. Deshalb verwenden wir dafür das Ay-Element, das für Listenelement steht. Hier werden wir diesen Verbündeten hinzufügen und diesen müssen wir auch schließen. Also lass uns das schneiden und ich lege es einfach hierher. Schnappen wir uns die beiden. Und ich habe es einfach hier drüber geklebt. Ich lege diesen individuellen Text dieses Mal einfach zwischen den Ay-Close Speichern wir es dieser Datei und Preter wird seine Magie entfalten Speichern wir es. Da gehe ich einfach zurück zu meiner Webseite, die ich zuvor erstellt habe. Ich lade das neu, dann siehst du das Ergebnis. Hier sind wir Jetzt haben wir ein Absatzelement hinzugefügt und danach haben wir diese Bestellliste erstellt. Nett. Der Google Chrome-Browser versteht unseren Code und weiß , dass er ihn als eine Liste von Bestellnummern wie diese eine, zwei, drei rendern sollte eine Liste von Bestellnummern wie diese eine, zwei, . Natürlich wendet er diese Nummern dann automatisch an, wendet er diese Nummern dann automatisch ohne dass wir etwas tun müssen. Und wenn wir ein weiteres Element hinzufügen würden, nehmen wir an, wir würden ein anderes Element hinzufügen. Also erstelle ich einfach ein Element und schreibe einfach das erste Element. Und wie ich euch gerade vorhin gesagt habe , steht Ai für Listenelement. Dem einzelnen Element müssen wir ein Allelement geben. Sobald wir also dieses OL-Element erstellt haben, also ist es ziemlich leer und innerhalb dessen müssen wir einige Listenelemente wie dieses erstellen Wann immer wir also Beschwerden auf unserer HTML-Seite erstellen, werden sie in den Aufzählungspunkten wie folgt dargestellt Speichern wir es und laden wir die Webseite neu, und hier ist sie. Hier seht ihr, Leute, jetzt habe ich diesen letzten Artikel hinzugefügt, er ist das erste Element dieser Bestellliste Ich will das nicht, also werde ich es einfach los. Lass uns die Webseite nochmal neu laden, Nie. Leute, lasst uns zu unserer letzten Website zurückkehren, unserer letzten Webseite dieses Abschnitts Hier seht ihr, Leute, was wir auf dieser Webseite machen wollen, bedeutet, dass wir diese Überschrift hier hinzufügen müssen , warum solltet ihr HTML lernen? Dann müssen wir hier einen Absatz hinzufügen und dann müssen wir diese ungeordnete Liste erstellen. Lass uns wieder an die Arbeit gehen Jetzt müssen wir zuerst diese Überschrift erstellen. Ich gehe einfach zurück zu dieser Inhaltsdatei und kopiere sie einfach Ich füge hier einige Leerzeichen hinzu. Lassen Sie uns eine Hori-Überschrift erstellen. Fügen Sie nun den Text hier ein und schließen Sie das Tag. Kehren wir nun zu diesem Inhalt zurück und nehmen wir all das zusammen und fügen wir diesen Text einfach in diesen Absatz ein. Jetzt haben wir diesen Inhalt hier , den Sie in dieser Art von Liste wie Aufzählungszeichen haben möchten , und das Element, das wir dafür verwenden, ist UL. Vielleicht kannst du dir vorstellen, dass UL für Unorder List steht . Lass uns diesen schließen Das ist eine Liste ohne Zahlen, was wir für eine ungeordnete Liste halten , weil die Reihenfolge der Elemente keine Rolle spielt Aber innerhalb der Liste selbst müssen wir das Element immer noch für die einzelnen Elemente verwenden Element immer noch für die einzelnen Elemente Genau wie zuvor müssen wir all diese verschiedenen Inhalte zu einem Verbündeten zusammenfassen. Das haben wir hier tatsächlich schon einmal gemacht. Ich bin mir sicher, dass Sie wissen, wie das geht, und vielleicht haben Sie gesehen, dass dies eine weitere sehr kleine Programmierherausforderung für Sie ist. Unterbrechen Sie jetzt das Video und machen Sie genau das Gleiche, was wir hier oben gemacht haben. Kombinieren Sie jedes dieser Elemente in ein echtes Verbündeten-Element, und so können Sie weiter üben, selbst etwas HTML zu schreiben. Ich hoffe, das war eine einfache Herausforderung und lassen Sie uns das hier schnell erledigen. Fügen wir hier die Verbündeten hinzu. Lasst uns diesen Kopf schließen. Das ist der große Text, lassen Sie uns ihn hier abschließen. Lassen Sie uns das alles in die Alliiertenelemente für diesen letzten Teil einordnen. Lassen Sie uns all diese Elemente ausschneiden und in das UL-Element einfügen. Und bis jetzt seht ihr, Leute, unsere Formatierung ist sehr chaotisch geworden Dies ist ein übergeordnetes Element innerhalb dieses übergeordneten Elements, also ist es ein untergeordnetes Element, also ist es nicht in der richtigen Reihenfolge Ich möchte hier nur ein paar Tabulatoren angeben, und hier haben wir jetzt die richtige Einrückung Damit sie alle visuell als untergeordnete Elemente ausgerichtet sind. Vielleicht fällt Ihnen auf, wie ich die Begriffe untergeordnete Elemente und übergeordnete Elemente verwende . Wann immer wir also ein Element anstelle eines anderen haben, ist der Container eines anderen Elements im Grunde das übergeordnete Element. Dies ist der Container dieses Elements. Das wird also als übergeordnetes Element bezeichnet. In diesem Fall handelt es sich also um eine ungeordnete Liste. Dann die Elemente, die sich innerhalb dieses übergeordneten Elements befinden, untergeordnetes Element bezeichnet. In Ordnung. Und Sie sehen, dass die Sache mit dem Format hier völlig falsch ist. Aber darüber mache ich mir keine Sorgen , denn dafür haben wir das Hilfstool Prettier Prettier kümmert sich um all unsere Formatierungen, aber hoffentlich sehen Sie, dass es ohne diese Formatierung wie ein komplettes Durcheinander aussieht Es ist sehr schwer zu verstehen. Dieses Element ist beispielsweise kein untergeordnetes Element dieser URL. Dieses Element ist ein untergeordnetes Element dieser URL, aber es zeigt durch Einrückung, dass es sich um das übergeordnete Element handelt, das hier nicht richtig ist, es sollte hier ausgerichtet werden, zum Beispiel so Wir können es aber auch einfach hübscher machen, sobald wir die Datei gespeichert haben Und jetzt, wie ich schon sagte, wenn ich diese Datei speichere, dann macht Peter seine Magie und formatiert diesen Code hier schön Kehren wir zu unserem zurück , was wir gerade erschaffen. Also hier siehst du. Laden wir einfach diese Webseite neu und hier ist sie Das Erstellen einer Liste ist ein weiterer wichtiger Teil des Schreibens von Direktnachrichten. Wir verwenden das ständig. Deshalb hoffe ich, dass Sie mit diesem Vortrag Spaß hatten , denn er war ziemlich wichtig. Bevor Sie also weitermachen, überprüfen Sie bitte, was wir gerade hier gemacht haben, und denken Sie auch ein wenig über einige der Dinge nach, die ich zuvor gesagt habe, wie zum Beispiel die Tatsache, dass jedes Element eine andere Bedeutung hat und dass wir diese Elemente auch verwenden müssen , um unseren Inhalt zu strukturieren. Wir können also nicht einfach unseren gesamten Text hier in den Haupttext übernehmen Wenn wir das also tun würden, gäbe es keine Struktur und überhaupt keine Logik Aber ich wollte dir nur zeigen, was passiert, wenn ich auswähle. Im Grunde genommen all dieser Text. Gehen wir zu unserer Inhaltsdatei und wählen wir den gesamten Text aus. Lass uns das kopieren. Und fügen wir es einfach hier ein. Lass es uns speichern und hier siehst du es. Gehen wir zurück zu unserer Webseite. Lassen Sie uns diese Webseite neu laden und hier ist sie. Sie sehen zwar, dass es jetzt alles ein großer Textblock ist und HTML sich nicht wirklich um Leerzeichen kümmert HTML entfernt hier alle Zeilenumbrüche. Es wird in eine einzige Zeile kommen. Diese Leerzeichen und Zeilenumbrüche sind für HTML alle irrelevant. Das ist es. Es gibt keine Struktur, es gibt keine Bedeutung. Es gibt im Grunde nichts. Lass uns diesen Text löschen, lass uns ihn neu laden. Ich hoffe, dieses kleine Beispiel hat Ihnen gezeigt, wie wichtig es ist, im Grunde alle Inhalte innerhalb eines Elements zusammenzufassen alle Inhalte innerhalb eines Elements Das gibt dem Inhalt tatsächlich eine gewisse Bedeutung. Aber damit verlasse ich dich und sehe dich bald im nächsten Video. In den nächsten Videos werden wir uns mit einigen aufregenderen Dingen befassen, also macht euch darauf gefasst. Danke. 10. Bilder und Attribute: Nun, eine Sache, die unserem Blogbeitrag momentan noch fehlt , sind einige Bilder. Lassen Sie uns nun lernen, wie man das STML-Bildelement verwendet. Wenn wir uns also unsere Demoseite ansehen, stellen wir fest, dass wir hier diese beiden wichtigen Bilder haben Wir haben hier also dieses große Bild, das den Blogbeitrag illustriert, und dann haben wir auch dieses Foto von diesem Autor, also fangen wir jetzt an diese Bilder in unseren Blogbeitrag zu integrieren Die Bilder befinden sich also natürlich in unserem Projektordner Also hier in den Starterdateien. Also kamen sie mit diesen TatterFles und dem einen Bild, wir wollen es zu unserer Webseite hinzufügen, diesem Beitragsbild Also hier siehst du, wir haben dieses Beitragsbild. Also einfach drauf klicken und schon könnt ihr die Vorschau ohne Probleme nur im VS-Code sehen . Wir möchten dieses Bild in diese ML-Datei unter den Körperelementen einfügen . Also hier haben wir die Überschriften. Zunächst werden wir dieses Beitragsbild hinzufügen. Hier sehen Sie also, dass sich dieses Bild unter diesem Absatz befindet , der von Maria gepostet wurde. Wir haben also diesen Absatz hier. Also darunter müssen wir das hinzufügen. Also hier müssen wir dieses Bild einfügen. Also, genau wie jedes andere Element, beginnen wir damit, es so zu schreiben. Also weniger als Symbol, hier müssen wir IMG schreiben. Aber denken Sie jetzt daran, wie ich Ihnen in der ersten Lektion dieses Abschnitts tatsächlich gesagt habe, dass das Bildelement ein besonderes Element ist, und zwar deshalb, weil es keinen Inhalt und daher auch keinen Cruising-Tag Stattdessen fügen wir hier ganz am Ende dieses Elements einfach einen Schrägstrich hinzu, etwa so Jetzt fragen Sie sich vielleicht, ob wir hier keinen Inhalt für das Bildelement angeben. Woher weiß HTML dann, welches Element angezeigt werden soll Und das ist eine hervorragende Frage, die uns zu etwas Neuem in HTML bringt , nämlich zu Attributen. Attribute sind also im Grunde genommen Daten, mit denen wir Elemente beschreiben können. Es gibt also viele verschiedene Attribute in HTML, und eines davon ist das Quellattribut. Und das ist das, an dem wir gerade interessiert sind. Das Quellelement geht also in dieses Bildelement ein. Hier müssen wir also SRC und Equals schreiben, und wir müssen Doppelcodes schreiben, wie Sie hier sehen können Lassen Sie uns diese Seitenleiste zusammenstellen und jetzt fügen wir Wenn Sie sich nicht an das Bild erinnern können, können Sie die Seitenleiste erweitern Sie können den Bildnamen schreiben. Also haben wir das Beitragsbild geschrieben. Oder Sie können die Hilfe vom VS-Code erhalten. Es schlägt automatisch vor. Sie können einfach hier klicken. Gehen wir also zurück zu unserer Webseite, an der wir gerade arbeiten. Also lasst uns diese Webseite hier neu laden. Und in der Tat, hier ist es großartig. Lassen Sie uns noch einmal kurz zusammenfassen. Wir haben das Bild nicht anhand einiger Inhalte in diesem Element spezifiziert das Bild nicht anhand einiger Inhalte in diesem Element Stattdessen mussten wir ein Attribut angeben, und in diesem Fall ist es das Quellattribut. Und denken Sie daran, dass ein Attribut im Grunde genommen wie ein Datenelement ist. Also eine Information, die dieses Element beschreibt. Hier beschreiben wir also die Quelle , aus der der Browser das Bild grundsätzlich lesen soll. Richtig. Neben den Quellattributen gibt es noch andere Attribute die wir für Bilder angeben können, und eines, das wir niemals überspringen sollten, ist das Alt-Attribut. Also müssen wir es so als Alt ALT schreiben, und wir müssen Gleichungen schreiben und wir müssen Doppelcodes angeben Also, Leute, in diesem Zusammenhang müssen wir das Bild beschreiben Also hier seht ihr, Leute, Alt steht für alternativen Text. Was wir hier also im Grunde angeben müssen, ist ein Text, der beschreiben sollte, worum es in dem Bild geht. Und das ist aus verschiedenen Gründen sehr wichtig. Eine davon ist , dass Suchmaschinen wie Google Chrome damit tatsächlich wissen, was auf dem Bild zu sehen ist, denn ohne die Beschreibung wissen Suchmaschinen nicht wirklich, worum es Suchmaschinen wie Google Chrome damit tatsächlich wissen, was auf dem Bild zu in die Beschreibung wissen Suchmaschinen dem Bild tatsächlich geht, und wahrscheinlich noch wichtiger ist , dass wir durch die Angabe der Beschreibung des Bildes auch blinden Menschen die Nutzung unserer Website ermöglichen können. Benutzer, die einen Screenreader verwenden, werden das Bild also nicht sehen, sondern haben stattdessen einen Screenreader, den alternativen Text, also die Beschreibung, vorliest ihnen den alternativen Text, also die Beschreibung, vorliest. Überspringen Sie dieses Attribut also niemals. Es ist sehr wichtig, immer eine gute Beschreibung zu schreiben. Also hier ist dieses Bild HTML-Code auf dem Bildschirm. Nun, das wird das, was wir hier sehen, visuell nicht ändern , es sei denn, das Bild kann aus irgendeinem Grund nicht gefunden werden. Nehmen wir an, wir vergessen , dieses JPEG zu schreiben. Also haben wir dieses PG vergessen . Wenn wir jetzt die Webseite neu laden, dann sehen Sie hier, was wir im Alter-Text geschrieben haben Das ist also so, wie es auf unserer Webseite abgedruckt ist , wie Sie sehen können Das wollen wir also nicht , also lasst uns schreiben. Und jetzt laden wir die Webseite neu. Und hier ist es. Sie machen bis zu diesem Zeitpunkt große Fortschritte. Nun, Leute, ich möchte dieses Bild nur verkleinern. Also füge ich hier nur ein weiteres Attribut hinzu. Wir können also viele Attribute verwenden. Also das, das wir hier verwenden werden , das Breitenattribut. Und hier müssen wir Breitengleichs- und Doppelcodes schreiben. Jetzt werden wir dieses Bild in Pixeln verkleinern. Jetzt gebe ich diesem Bild 640 Pixel an. Also kannst du 640 so schreiben. Und wenn wir jetzt die Webseite neu laden, dann sehen wir uns die Ergebnisse an Jetzt wurde die Breite des Bildes erfolgreich geändert, weil wir diese Breite hier aufgenommen haben Also später, ein bisschen, werden wir das im CSS-Bereich sehen. Leute, wir können auch ein Höhenattribut angeben, zum Beispiel genauso. Jetzt können wir das auf 600 Pixel ändern, und jetzt können wir die Höhe auf 280 Pixel angeben. Also Leute, jetzt denkt ihr darüber nach, wie ich diese Pixel geben kann. Also hier kenne ich die Abmessungen des Bildes. Also hier im Beitragsbild, wir haben aus 1280 720 Also 1280 hier ist es die Breite und 720 ist die Höhe. Also habe ich zuvor mit der ganzen Breite und Höhe experimentiert Was ich getan habe, bedeutet, dass ich diese Breite von 1280 habe. Also im Taschenrechner, also die Hälfte davon sind 640 Pixel Also habe ich diese 640 Pixel hinzugefügt. Danach habe ich meine Meinung geändert und die 600 Pixel angegeben. Es ist also ganz nett und genauso, ich habe diese 40 Pixel gegeben. Also wenn ich jetzt die Webseite neu lade und hier sind Bilder, aber wenn ich wollte, könnte ich sie natürlich quadratisch machen Zum Beispiel, was dann das Bild komplett verzerren würde , wie wir es hier sehen Diese Breite ist also 600. Also, wenn ich es einfach als 600 Pixel gebe, dann, sobald ich die Webseite entlade, dann siehst du das hier. Unser Bild ist völlig verzerrt , weil wir das Seitenverhältnis des Bildes geändert haben Und Leute, noch eine Sache , die ich euch zeigen wollte wenn ihr dieses Höhenattribut nicht angegeben habt, eine davon können wir geben Und wenn wir diese Höhe einfach entfernen, das gesamte Seitenverhältnis erhalten. Also lass es uns neu laden. Und los geht's Also lass uns diese Seitenleiste schließen. Ohne Angabe des Höhenattributs wird das Seitenverhältnis beibehalten Aber natürlich können Sie eine Höhe angeben, die Ihnen entspricht. Also lass es uns neu laden. So fügen wir Bilder in ein HTML-Dokument ein. Kehren wir also zu unserer letzten Webseite dieses Blogbeitrags zurück Und hier siehst du, also noch ein Bild, das wir hier einfügen möchten. Also dieses Autorenbild von Maria. Nach dieser T-Überschrift haben wir also dieses Autorenbild. Also lass uns hierher zurückkehren. Darunter müssen wir dieses Autorenbild hinzufügen. Also wollen wir dieses Maria-Bild einbeziehen. Also hier kannst du zu dieser Seitenleiste gehen und du kannst sehen, dass wir dieses Autorenbild haben, also diesen Autorenpunkt PNG. Sie können dieses Bild also einbinden. Also lasse ich einfach die Seitenleiste zusammenklappen und füge hier einfach ein paar Leerzeichen Und wir wollen dieses Bild mit einer Höhe und Breite von 75 Pixeln Also habe ich eine weitere Herausforderung für dich, und ich möchte, dass du dieses Mal dieses Bild einfügst , das ich dir selbst gezeigt habe , genau hier an diesem Ort. Okay, nehmen Sie sich eine Minute Zeit und pausieren Sie das Video und fügen Sie dieses Bild mit einer Größe von 75 x 75 Pixeln Dann bin ich in einer Minute mit der Lösung wieder hier . Ordnung. Hoffentlich hast du hier etwas mehr Übung. Also fügen wir dieses Bildelement hier hinzu, und ich möchte nur dem SRC, also diese Quelle, geben Das Doppelte entspricht, und ich kenne den Autor. Also hier hilft uns der VS-Code, also lasst uns darauf klicken. Wir überspringen nie immer, das ist das Alt-Attribut. Um es kurz zusammenzufassen, möchte ich Ihnen nur sagen, dass Alter für alternativen Text steht Lass uns eine Beschreibung dieses Bildes schreiben. Ich schreibe nur als Headshot von Maria. Und was wir dann tun wollen, bedeutet, dass wir die Breiteneigenschaft angeben müssen. Schreiben Sie es mit Ihrer Hand, damit der Code in Ihrem Gedächtnis haften bleibt. Ich gebe ihm einfach 75 Pixel und geben ihm jetzt eine Höhe von 75 Pixeln, und vergiss nicht, dieses Bildelement mit einem Schrägstrich wie diesem zu schließen dieses Bildelement mit einem Schrägstrich wie diesem Speichern Sie es also und kehren wir zu unserer Webseite zurück , an der wir gerade arbeiten Also jetzt, wenn ich die Webseite neu lade, okay, gut gemacht. Netter Fortschritt Jetzt wissen wir also, wie Bilder funktionieren und wie auch Attribute funktionieren. Und tatsächlich können wir Attribute auch für einige andere Elemente in HTML angeben . Und eine Möglichkeit, wie das sehr wichtig ist, ist das HTML-Element selbst. Gehen wir also nach oben und hier siehst du in diesem HTML-Element, wir immer ein Element angeben müssen, also das ist die Sprache. Für die Sprache verwenden wir also das Schlüsselwort ang und schreiben Gleichheits - und Doppelcodes Was das bedeutet, welche Sprache Sie in Ihrem Webbrowser verwenden Derzeit verwenden wir also die englische Sprache. Für die englische Sprache verwenden wir das Schlüsselwort als Ian, also so. Aber für andere Sprachen gibt es andere Codes. Zum Beispiel ist es für Deutsch wahrscheinlich DE und für Portugiesisch verwenden wir PT so. Und wenn Sie eine andere Sprache haben, können Sie den Code einfach durch Googeln herausfinden Also lass uns diesen Ian hinzufügen. Eine andere Sache, die wir tun können und sollten, ist die Angabe des Zeichensatzes, der in diesem Dokument verwendet wird. Das ist also etwas, das in den Kopf geht, weil es eine Information ist , die das Dokument beschreibt. Also hier brauchen wir ein weiteres neues Element hier innerhalb dieses Kopfelements. Also hier brauchen wir ein neues Element , das einfach Meta heißt. Metadaten bedeuten also Daten über Daten. Deshalb beschreiben wir hier den Zeichensatz. Hier schreiben wir also Care Set und entspricht doppeltem Code. Und hier müssen wir UTF und acht in Großbuchstaben schreiben , was im Grunde all die einfachen Zeichen sind, die wir in englischer Sprache verwenden Nun, dieses Element hier, dieses Element hat kein abschließendes Tag, also schließen wir es einfach mit einem Schrägstrich wie diesem Jetzt verbringe ich nicht viel Zeit mit solchen Dingen, denn später, wenn du tatsächlich deine eigenen Seiten erstellst, dann passiert das automatisch Das war nur, um dir zu zeigen, dass das nur eine andere Art oder ein anderer Ort ist nur eine andere Art oder ein anderer Ort , an dem wir einige Attribute benötigen, für die wir dann einen Wert angeben müssen, okay. UT von acht ist hier der Wert. Wir haben für dieses Zeichensatzattribut angegeben. Okay, und ja. Also Leute, im nächsten Video werden wir noch mehr spannende Links machen. Ich denke, das war's für diesen Vortrag, also wir sehen uns in der nächsten. 11. Hyperlinks: Einer der grundlegenden Bausteine des Internets sind Hyperlinks oder Kurzlinks Links ermöglichen es dem Internet tatsächlich , ein weltweites Web zu sein Ohne Links zwischen Seiten gäbe es kein Web. Lassen Sie uns nun lernen, wie wir Links auf unseren eigenen Webseiten platzieren können. Jetzt können wir Links in zwei große Kategorien einteilen. Die erste Kategorie sind Links, die auf andere Seiten unserer eigenen Website verweisen . Nehmen wir an, dass wir hier auf unserer Website, dem Coding Ninja, einen weiteren Blogbeitrag hatten, sodass wir dann einen Link von dieser Seite zu dieser anderen Seite erstellen könnten von dieser Seite zu dieser anderen Seite Im Moment sind die anderen Kategorien jedoch Links , die auf die anderen Kategorien jedoch Links , die außerhalb unserer Website verweisen Wenn ich zum Beispiel hier auf dieser Seite einen Link zu wlthscool.com platziere , dann wäre das natürlich ein Link zur Nun, wir erstellen diese beiden Arten von Links auf die gleiche Weise in HTML, aber es gibt immer noch einige Besonderheiten die wir beachten müssen Lassen Sie uns nun mit einem zweiten Link beginnen , den ich beschrieben habe und der außerhalb unserer eigenen Website verweist Wenn ich zu meiner Demoseite zurückkehre, dann sehen Sie hier im Bereich HTML, wir haben einen Link zur Website von W Three Schools. Dieser Link verweist auf eine Seite außerhalb unserer Seite. Wenn ich darauf klicke, dann kannst du hier nachschauen, dass dieser Link dorthin führt. Im Grunde zur Website dieser WT-Schule. Dies ist im Grunde eine Website , auf der Sie alles über HTML sowie CSS und JavaScript erfahren können . Es bietet Tutorials und Ressourcen zum Lernen, zur Webentwicklung und zum Programmieren mit interaktiven Beispielen für praktische Erfahrungen, und zum Programmieren mit interaktiven Beispielen da es als Webentwickler wichtig ist , zu wissen, wie man diese Webdokumentationsseite verwendet und Informationen findet. Was wir hier wollen, bedeutet, dass wir nur diese URL kopieren müssen. Um dies zu tun, können Sie hier einen neuen Tab erstellen. Hier können Sie es als Webley Schools Webl Schools HTML Introduction suchen Schools Webl Schools HTML Introduction Jetzt können Sie sich diese Website von W Three Schools ansehen, sodass Sie sie einfach öffnen können, und dann werden Sie auf dieselbe Website weitergeleitet Oder wenn Sie diese Website nicht gefunden bedeutet das, dass es überhaupt kein Problem gibt. Also kopiere ich einfach diese URL und denke noch einmal daran, dass sie als URL bezeichnet wird. Wie Sie wissen, hat jede einzelne Website im Internet ihre eigene URL, und das ist es, was wir benötigen um einen Link zu dieser Seite zu erstellen. Ich kopiere das einfach, also gehe ich zurück zur Demoseite und hier siehst du es. Dieser Link befindet sich hinter der Bestellliste. Lass uns jetzt gehen. Hier siehst du nach dieser Bestellliste, wir haben hier einen Link. Lassen Sie uns nach dieser Bestellliste einen Link erstellen. Um einen Link in HTML zu erstellen, verwenden wir das A-Element , das für Anker steht. Technisch gesehen wird ein Hyperlink oder ein Link in HTML tatsächlich als Anker bezeichnet Es ist also ein Ankerelement. Du kannst es so schließen. Oder wir müssen es tatsächlich schließen. Fangen wir jetzt damit an. den Inhalt des Links betrifft, so Was den Inhalt des Links betrifft, so geben wir hier eigentlich den Text an, den wir auf der Seite anzeigen möchten . Der Text des Links. In diesem Fall also Schulen, aber was ist jetzt mit der URL? Wollen wir, dass dieser Link zeigt? Nun, dafür müssen wir wieder ein Attribut verwenden. In diesem Fall ist es ein Tarifattribut und dann doppelter Code, dann fügen wir einfach die URL ein, die wir kopiert haben, und das war's dann auch schon. Wenn ich es also speichere, gehe ich einfach zurück zu meiner Webseite, an der ich gerade arbeite und wenn ich sie neu lade, dann siehst du es hier Unser netter Link ist in HTML erstellt, und hier seht ihr, wenn ich aber zu den WT-Schulen gehe, hier wird die URL angezeigt. Du kannst hier auschecken Und wenn ich darauf klicke, dann kannst du sehen, dass diese Seite auf die Website der WT-Schulen geht , wo wir Point Great haben. Das sind eigentlich schon die Grundlagen für die Erstellung eines Links. Ganz einfach. Im Moment wollen wir, dass dieser Link hier tatsächlich so lautet, lass uns zurückgehen. Und wenn Sie sich jetzt unsere Demo-Seite ansehen, bedeutet das, was ich will, ich will diesen Link anstelle dieses Textes. Also Leute, um das zu tun, müssen wir dafür ein Absatzelement erstellen und wir müssen nur den Text schreiben. Sie können zum Beispiel mehr unter dem Ankerlink in der Fortsetzung dieses Absatzes erfahren. Und hier müssen wir das Absatzelement schließen. So wie das. Speichern wir es hier und ich gehe zurück zur Webseite, und hier kann ich es neu laden. Hier kannst du auschecken. Das ist genau das Gleiche wie in unserer Demo. Und jetzt sieht das genauso aus wie im Original . Beachten Sie hier, wenn ich auf diesen Link klicke, dann sehen Sie hier, was hier passiert. Sie sehen, dass wir direkt zu dieser Seite navigiert sind und jetzt unsere eigene Seite verschwunden ist Also können wir natürlich hierher zurückkehren. Aber manchmal möchten wir einen Link in einem neuen Tab öffnen. Lassen Sie mich Ihnen auch zeigen, wie wir das machen können. Und das wollen wir natürlich nicht immer. So oft möchten wir tatsächlich, dass die Seite wirklich zu der URL wechselt , die wir hier angegeben haben. Manchmal ist es aber auch nützlich, die Seite geöffnet zu lassen und die URL einfach in einem neuen Tab zu öffnen. Aber das können wir tun, indem wir ein Zielattribut wie dieses angeben . Und die Syntax ist ein bisschen seltsam. Also müssen wir einen Unterstrich und dann ein Leerzeichen schreiben. Also speichern wir es und lassen Sie uns zurückgehen und jetzt noch einmal neu laden und feststellen, dass die Seite in einem neuen Tab geöffnet wird, wenn ich auf diesen Link klicke Seite in einem neuen Tab geöffnet wird Beachten Sie, dass ein neuer Tab geöffnet wurde und unser ursprünglicher Tab immer noch geöffnet ist Großartig. Also dieses Wort und so haben wir jetzt einen Link , der auf eine URL verweist, die sich außerhalb unserer eigenen Website befindet. Aber jetzt zum ersten Szenario, wo wir auf eine interne Seite verlinken wollen , also gehen wir zurück zu unserer Demoseite. Also hier, ganz am Anfang dieser Seite, wir haben diese Links, richtig. Das sollen also die Links sein, die 0,2 Seiten, die Teil dieses Blogs sind. Also lasst uns jetzt diesen ersten Link hier erstellen, also bloggen und auch eine neue Seite erstellen , auf die ihr tatsächlich verlinken könnt. Das Erstellen einer neuen Seite ist also das Erstellen eines neuen HTML-Dokuments. Öffnen wir also die Seitenleiste, und hier werde ich eine Datei als Logpunkt-HTML erstellen . Und versteckt Jetzt haben wir eine leere HTML-Datei erstellt. Jetzt können wir das Boilerplate erstellen indem wir einen Spickzettel verwenden, um die HTML-Struktur zu erstellen Aber lasst uns hier nochmal ein bisschen üben. Wenn du möchtest, kannst du das Video sogar pausieren es selbst eintippen. Aber ich werde es hier sehr schnell machen. Es ist HTML, und dann müssen wir einbauen, dass wir ein Head-Element erstellen müssen, und natürlich müssen wir ein Titelelement für diese Blockseite erstellen . Dann werde ich das Head-Element schließen und dafür ein Body-Element erstellen. Hier werde ich ein Muss zum Hinzufügen erstellen. Schreiben wir jetzt Willkommen in unserem Blog. Und lassen Sie uns die Überschrift H two so schließen , und das war's. Speichern wir es, und hier haben wir ein sehr einfaches und nettes HTML-Dokument. Aber jetzt, wo das erledigt ist, können wir einen Hyperlink oder einen Link genau hier in dieser Indexpunkt-HTML-Datei erstellen , der auf diesen Blog-Punkt-HTML verweist Lassen Sie uns diese Seitenleiste so zusammenstellen, dass der Browser dann zu dieser Seite navigiert Machen wir das nach dieser H-Eins-Überschrift. Also werde ich dafür ein Ankerelement erstellen und HRF schreiben Jetzt gebe ich den Dateinamen als Blog-Punkt-HTML an , den wir jetzt erstellt haben Und lassen Sie uns das Ankerelement schließen. Und innerhalb dieses Ankerelements müssen wir den Text schreiben. Im Moment werde ich einen solchen Blog schreiben und ihn speichern. Und wenn ich zu meiner Webseite zurückkehre, wir gerade arbeiten , und jetzt lass uns die Webseite neu laden, und hier ist unser wunderschöner Link schau dir an, was passiert , wenn ich darauf klicke Bum. Wir sind jetzt im Blog, und Sie können hier in dieser URL sehen, dass wir diese Blog-Punkt-HTML-Datei am Ende dieser URL haben. Um jetzt zurückzugehen, könnten wir natürlich hier auf diese Zurück-Schaltfläche klicken. Aber wir könnten hier auch einen Link hinzufügen, wir verweisen einfach zurück auf Indexpunkt-HTML, oder? Das klingt nach einer schönen Idee. Kommen wir also zurück zu dieser Blog-Punkt-HTML-Datei als weitere Herausforderung. Jetzt möchte ich, dass Sie diesen Link tatsächlich selbst erstellen. Halten Sie hier ein Video an und erstellen Sie einen Link , der zurück zu Indexpunkt-HTML verweist. Hast du das geschafft oder es zumindest versucht? Nun, das hoffe ich sehr. Aber wie dem auch sei, wir verwenden hier natürlich wieder das A-Element. Und dann haben wir das Azure of-Attribut verwendet. Dann müssen wir hier als Indexpunkt-HTML-Stapel schreiben, wohin Sie diesen Link zeigen möchten. Also lass es uns schließen. Und hier werde ich schreiben, lass uns das Ankerelement hier schließen. Dann werde ich ihn hier in diesem Text so schreiben, als ob ich zurück nach Hause gehe. Wenn Sie noch etwas geschrieben haben, gibt es überhaupt kein Problem. Und lass es uns speichern. Und wenn ich die Webseite neu lade, haben wir einen Link. Wir können darauf klicken und wir können zurückgehen. Wir können also zum Blog zurückkehren, und wir können auch zum Indexpunkt M zurückkehren . Lassen Sie uns diesen Punkt also näher betrachten. Wir brauchen es nicht mehr. Und zum Schluss können wir auch einen Link angeben , der nirgendwohin führt. Lass mich dir das auch zeigen. Lass uns einfach zuerst den Inhalt schreiben. Schreiben wir also einfach ein Ankerelement und schließen wir es. Und hier schauen wir uns die Demoseite an. Hier haben wir eine Flexbox und ein CSS-Raster. Lass uns jetzt einfach Flexbox schreiben. Im Grunde der Inhalt, aber schau mal, was passiert, wenn ich die Seite neu lade Also lass es uns ein s geben jetzt siehst du, dass das kein Link mehr ist, es ist also ein normaler Text Sie sehen, dass dort nur Flexbox steht, aber beachten Sie, dass es sich nur um normalen Text handelt, der nicht unterstrichen Es ist eindeutig kein Link. Auch wenn es eigentlich ein Ankerelement ist, aber was eine Ermutigung wirklich zu einem Link macht , ist die HRF-Eigenschaft, und deshalb müssen wir sie wirklich spezifizieren Andernfalls handelt es sich überhaupt nicht um einen Link. Es ist dann nur ein Anker, der jetzt nicht wirklich nützlich ist. Aber was ist, wenn Sie diese Punkte nicht irgendwo haben wollen, wie ich schon sagte, nun, die Lösung für ist, sie bereitzustellen, hier. Wenn ich jetzt speichere und es neu lade, dann sind wir wieder dabei, dass es sich um einen Link handelt Eigentlich zeigt es einfach nirgendwohin. Was passiert, wenn du auf diesen Link klickst, ist das? Im Grunde geht es zurück zur Oberseite, also macht es nichts. Zum Beispiel geht es nach oben und etwas später in diesem Kurs werden wir dieses Verhalten tatsächlich nutzen. Aber vorerst möchte ich, dass du weißt , dass wir auf diese Weise Links spezifizieren können , wenn wir noch keine URL für sie haben oder keine Seite haben. Im Grunde ist das wie ein Platzhalterlink, also lass uns das einfach hierher kopieren, und ich habe es einfach hierher geblättert, und hier schreibe ich es einfach als CSS-Raster Es ist also nicht nötig, es noch einmal zu schreiben. Aber wenn du willst, kannst du es natürlich noch einmal schreiben. Also nur damit die Navigation etwas vollständiger aussieht. Aber all diese Links sollten nirgendwohin zeigen, und so spezifiziert man Links oder Hyperlinks oder Anker, wie man sie auch in HTML aufrufen kann Dies ist ein wirklich wichtiger Teil des Webs, wie ich zu Beginn sagte. Stellen Sie also sicher, dass Sie verstehen, wie sie funktionieren und wie wir sie auf unseren eigenen Webseiten platzieren 12. Strukturierung unserer Webseite: Wir lernen also bereits ein paar sehr wichtige HTML-Elemente und sind bereits in der Lage, eine schöne Seite mit einigen netten Funktionen zu erstellen . Aber jetzt ist es an der Zeit, unserem Dokument und unseren Elementen tatsächlich etwas Struktur zu verleihen . Lassen Sie uns jetzt ein paar neue HTML-Phi-Elemente dafür lernen . Als ich nun sagte, dass der Seite eine gewisse Struktur fehlt, meinte ich damit, dass all diese Elemente, die wir in unserem Dokument platzieren hier einfach nacheinander auftauchen. Sie unterscheiden sich nicht wirklich voneinander und vor allem sind sie wahrscheinlich nicht logisch gruppiert. Lassen Sie uns das also ändern, indem dafür einige Containerelemente erstellen, die diese Elemente dann gruppieren. Das Erste , was mir in den Sinn kommt , sind die Links. Wir haben also diese Links. Wenn wir also ein paar Links haben, müssen wir diese in einem Navigationselement gruppieren. Es ist also im Grunde wie eine Navigation. Also erstelle ich dafür ein Nav-Element. Nav steht also im Grunde für Navigation. Also schließe ich das einfach und speichere es einfach. Wenn ich die Webseite neu lade, dann sehen Sie hier auf unserer Webseite, dass sich nichts geändert hat Alles, was hier passiert, ist, dass dadurch im Grunde eine unsichtbare Box entstanden ist, die jetzt diese Elemente enthält Okay? Also das Element an sich macht nichts. Alles, was es tut, ist, diese Elemente zu gruppieren. Und ich verstehe, dass es momentan nicht wirklich intuitiv oder logisch erscheint , das zu tun, aber glauben Sie mir, es wird sehr wichtig sein, all diese verschiedenen Teile in ihren eigenen Behältern zu haben diese verschiedenen Teile in . In Ordnung. Wenn Sie sich also unsere Webseite ansehen, hier sehen Sie, dass wir diese Ergänzung und die Links haben Im Grunde ist es der Header-Teil unserer Webseite. Also müssen wir nur diesen Zusatz und die Links in unser Header-Element einbinden. Das ist also ein besonderes Element in DML. Jetzt erstelle ich ein Header-Element wie dieses. Wir müssen nur diesen Header unter dem Navigationselement schließen . Jetzt haben wir diese Überschrift und die Links zu einem Header-Element gruppiert . Leute, nach diesen Links haben wir diesen Blockbeitrag. Leute, wir müssen nur all diese Blockposts einpacken. Dafür haben wir ein spezielles Element in HTML, der Elementname ist article. Ein Artikel bedeutet in diesem Zusammenhang eigentlich nicht einfach einen geschriebenen Artikel wie diesen, sondern es kann sich auch um Dinge aus der realen Welt handeln. Wie ein Computer ist ein Artikel 0R ein Stift oder ein Telefon. Das sind alles Artikel, und wenn wir irgendwie einen Computer in STML darstellen müssten, dann wäre ein Artikel auch ein gutes Element dafür Nun, hier siehst du, dass unser Körper zwei direkte untergeordnete Elemente Also im Grunde dieser Header und auch dieser Artikel. Speichern wir es, und wenn ich die Webseite neu lade, dann siehst du es hier Auf unserer Webseite hat sich nichts geändert. Der visuelle Aspekt der Webseite ist also ziemlich derselbe wie zuvor. Nun, eine Sache, die Sie vielleicht fragen , nun, wenn diese Boxen alle nichts bewirken, warum nennen wir sie dann nicht alle einfach Nav oder alle Header oder alle Artikel? Dieser könnte auch ein Artikel sein und an der Seite hätte sich nichts geändert. Zum Beispiel richtig. Also, wenn ich die Webseite neu lade, Leute, ich glaube, etwas hat sich geändert Also hier seht ihr, die Hawn-Überschrift ist klein geworden. Es ist also kleiner als das. Das ist also im Grunde die zweite Überschrift, und das ist die primäre Überschrift. Wenn wir jetzt diesen Artikel hinzugefügt haben, ist diese Überschrift deshalb klein geworden. tun wir jedoch nicht für etwas, das als semantisches HTML bezeichnet wird Und was das bedeutet, werde ich im nächsten Video kurz erklären was das bedeutet, werde ich im nächsten Video kurz Aber jetzt noch weiter, also lass es uns wieder hierher bringen. Als Header-Element. Nun, Leute, endlich, wenn ich mir meine Demo-Seite ansehe , haben wir jetzt endlich diese ähnliche Pose, also diese Liste und auch wir haben diesen Text. Im Grunde wird dieser Text Fußzeile genannt. Jede existierende Seite hat eine Fußzeile am Ende ihrer Also lass es uns einfach erstellen. Also müssen wir nur zum Ende der HDML-Datei gehen und Leute, um diese Fußzeile zu erstellen, wir haben ein spezielles Element in Leute, jetzt vermutet ihr vielleicht, dass der Name Potter sein würde der Name Das ist also ein besonderes Element in HTML. Also müssen wir nur diese Fußzeile schließen. Jetzt könnten wir hier auch einen Absatz erstellen , um diesen Text zu erstellen Leute, lasst uns den Text hier schreiben. Ich habe dir diesen Text nicht zur Verfügung gestellt, also musst du ihn nur manuell schreiben. Und Leute hier merkt ihr das. Das wird also Copyright-Symbol genannt. Also haben wir dieses C. Also, wie könnten wir das schaffen. Leute, das nennt man HTML-Entität. Es ist also etwas Neues in HTML. Um das jetzt zu erstellen, müssen wir nur einen kleinen Code schreiben. Also müssen wir Prozent schreiben. Und in meinem Fall kenne ich den Namen des Copyright-Symbols. Also müssen wir Prozent schreiben, dann kopieren und wir müssen Semikolon schreiben Oder du kannst einfach hier drüben klicken und musst nur den anderen Teil schreiben . Lass es uns schreiben. Also kehre in Zukunft zurück und speichere es. Kommen wir nun zurück zu unserer Webseite, die wir gerade erstellen. Und wenn ich die Webseite neu lade, erwartungsgemäß ist der visuelle Aspekt der Seite erwartungsgemäß immer noch derselbe, wie ich am Anfang erwähnt habe Diese wiederum sind nur wichtig, um den Inhalt in logische Teile zu gruppieren, was für semantisches HTML und auch für das Styling mit CSS wichtig ist , wie Sie sehen werden Apropos semantisches HTML, das wird das Thema unseres nächsten Videos sein Ich hoffe also, Sie bald dort zu sehen. 13. Ein Hinweis zu semantischem HTML: Deshalb habe ich den Begriff semantisches HTML in diesem Abschnitt ein paar Mal erwähnt semantisches HTML in diesem Abschnitt ein paar Mal Lassen Sie uns jetzt also wirklich sehr schnell definieren, was ich mit semantischem HTML meine HTML. Wenn wir über Semantik sprechen , meinen wir, dass bestimmten Elementen tatsächlich eine Bedeutung oder ein Zweck zugewiesen ist. Wenn wir also an ein bestimmtes HTML-Element denken, sollten wir eigentlich nicht darüber nachdenken, wie dieses Element aussieht , wenn es auf der Seite gerendert wird Stattdessen sollten wir darüber nachdenken, was dieses Element eigentlich bedeutet und wofür es steht. Das ist im Grunde die Definition von semantischem HTML. Jetzt sind nicht alle Elemente in DML semantisch. Und tatsächlich habe ich hier in diesem Element schon ein bisschen darüber gesprochen hier in diesem Element schon ein bisschen darüber Also dieses starke Element, das unser Element hier auf der Seite fett macht . Denken Sie also daran, wie ich zuvor das B-Element verwendet habe , ihm aber keine Bedeutung beigemessen habe. Also habe ich das schon einmal erklärt, und jetzt macht es vielleicht ein bisschen mehr Sinn. Also nochmal, indem ich das starke Element verwende, damit dieser Text hier auf der Webseite immer noch fett gedruckt bleibt. Aber was hier wirklich wichtig ist, ist, dass wir diesem Inhalt hier jetzt eine gewisse Bedeutung beimessen. Wir sagen jetzt, dass es sich um einen starken Inhalt handelt, was im Grunde genommen einen sehr wichtigen Inhalt bedeutet. Und das Gleiche gilt hier für dieses EM-Element. Dadurch wird unser Text hervorgehoben. Also dieses Wort für grundlegende Technologien, wir verwenden EM, um es zu betonen, und es sieht auf der Webseite hier immer noch kursiv aus , wie Sie sehen können Aber was wir wirklich meinen, ist das. Deshalb haben wir ihm einen besonderen Schwerpunkt gegeben. Das ist es, was dieses Element hier gerade bedeutet. Und das Gleiche gilt tatsächlich für all diese Elemente, die wir im letzten Video verwendet haben. Hier sehen Sie zum Beispiel in diesem Navigationselement, dass all dies dazu dient, eine Box zu erstellen. Denken Sie daran, welches dann diese drei Ankerelemente enthält . Aber visuell macht es nicht wirklich etwas. Damit soll lediglich dargestellt werden, dass es sich um eine Navigation handelt. Aber statt NAB hätten wir auch ein allgemeineres Element verwenden können, nämlich das Develement? Lass es uns einfach schreiben. Wir müssen es auch schließen. So wie das hier. Optisch wird sich nichts ändern, und so wurde nur eine neue Box geschaffen, aber eine Box ohne jegliche Bedeutung. Das ist es, wofür DV steht. In der Zeit vor DML Pi verwendeten wir also immer D für jede einzelne Box, die wir auf der Seite brauchten Aber dann kam HTML Phi auf den Markt und führte dieses Konzept von semantischem Deshalb sollten wir das Element D jetzt nur verwenden, wenn wir beimessen wollen einem bestimmten Container keine bestimmte Bedeutung Also zu einem bestimmten Box-Element auf unserer Seite. In diesem Fall wollen wir also wirklich, dass das bedeutet, dass es sich um eine Navigation handelt. Das Gleiche gilt für das Mädchen, den Header und den Monteur , den wir hier unten haben Und tatsächlich gilt das sogar für den Absatz. Zum Beispiel sind alle anderen Absätze jetzt wirklich im Wesentlichen Boxen, die mit Text gefüllt sind. Das P hat natürlich eine semantische Bedeutung. Es bedeutet, dass es sich um einen Absatz handelt, aber wir könnten auch hier ein generisches Feld ohne jegliche Bedeutung verwenden Also die Entwicklung und nichts würde sich visuell ändern. Also lass es uns jetzt schreiben, lass uns die Webseite neu laden. Tatsächlich hat sich hier etwas geändert. Wir haben etwas von dem weißen Raum verloren, den wir um das P herum haben . Bringen wir ihn trotzdem wieder hierher. Also laden wir, und jetzt sind wir wieder bei unseren Absätzen, weil wir wollen, dass sie eine gewisse Bedeutung haben, und natürlich wollen wir auch den Abstand, den uns der Browser standardmäßig um die P-Elemente herum gibt. Aber die Idee, die ich erwähnt habe, trotzdem, weil wir diesen Bereich hier später mit etwas CSS sehr einfach neu erstellen könnten diesen Bereich hier später mit etwas CSS Wenn Sie also wollten, könnten wir die gesamte Webseite tatsächlich nur aus D-Elementen erstellen , wenn Sie möchten, und sie dann mit CSS so gestalten, wie wir es möchten Aber das machen wir natürlich nicht. Wir verwenden semantisches HTML, um unseren Elementen eine Bedeutung zu geben. Jetzt fragen Sie sich vielleicht, warum wir das eigentlich tun, und es gibt mehrere Gründe, und ich glaube, ich habe sie bereits erwähnt Eine davon ist also die Suchmaschinenoptimierung, was im Grunde bedeutet, dass Suchmaschinen wie Google die Struktur unserer Inhalte verstehen und daher besser analysieren können, was Ihre Inhalte sind und worum es auf Ihrer Webseite geht. Auch das Schreiben von semantischem HTML ist für die Barrierefreiheit äußerst wichtig , und insbesondere für Menschen , die auf Screenreader angewiesen sind, konsumieren unsere Webseiten Okay? Ich hoffe also, dass das Sinn macht, und wir werden uns auch weiter diesem Thema befassen, während wir die restlichen Codes durchgehen. Aber ich wollte trotzdem von Anfang an klarstellen , dass wir, wenn wir über HTML nachdenken, nicht nur darüber nachdenken sollten, wie es tatsächlich im Browser aussieht, sondern noch mehr darüber, was diese Elemente eigentlich bedeuten und wofür sie stehen. Und damit haben wir quasi alles, was wir in diesem Abschnitt lernen mussten, zu Ende gebracht. Deshalb werden wir im nächsten Video den VS-Code etwas genauer konfigurieren und dann zu den letzten Herausforderungen übergehen. Warten Sie also nicht und lassen Sie uns hier mit der nächsten Vorlesung fortfahren. 14. Zusätzliche VS-Codeerweiterungen installieren: Willkommen zurück. Also haben wir gleich zu Beginn des Kurses mit der Konfiguration unseres VS-Code-Editors begonnen. Aber jetzt sind wir bereit, drei zusätzliche Erweiterungen zu installieren, die uns das Leben beim Codieren von HTML ein wenig erleichtern werden. Gehen wir also hier zum Erweiterungsfenster. Die erste Erweiterung, die wir hier installieren werden, heißt Image Review. Du musst also so schreiben und auf das erste Ergebnis klicken. Diese Erweiterung bedeutet also, dass sie uns eine kleine Bildvorschau in unserer HTML-Datei zeigt . Jetzt müssen Sie nur noch auf diese Installationsschaltfläche klicken, und ich gehe zurück zu meiner Indexpunkt-HTML-Datei und scrolle einfach nach unten. Nun, hier sehen Sie, dass wir hier ein Bild deklariert haben, und hier sehen Sie, dass unsere kleine Bildvorschau in der sogenannten Gutter angezeigt wird Und hier siehst du, dass wir noch ein Bild haben, also haben wir es in HTML aufgenommen Leute, wie ihr auf unserer Webseite sehen könnt, haben wir dieses Bild, also dieses erste und das zweite. Also haben wir es hier in diese HTML-Datei aufgenommen, und wie ihr hier nachsehen könnt, gibt es hier in dieser Gosse ein kleines Bildteam Also noch ein Bild, das wir hier haben. Also, dieses Imageteam ist hier, richtig. Und das kann manchmal extrem hilfreich sein. Deshalb wollte ich dir diesen unbedingt zeigen. Jetzt die nächste Erweiterung, die wir installieren werden, also gehe ich einfach zurück zu meinem Aufmerksamkeits-Panel. Hier musst du nach einem Farbhighlight suchen. Klicken Sie jetzt einfach auf das erste Ergebnis. Das ist also das Symbol dieses Farbhighlights. Sie müssen also noch einmal nur auf diese Schaltfläche „Installieren“ klicken. Und dieses hier kann ich dir noch nicht zeigen, wie es aussieht , weil es nur in CSS relevant sein wird. Aber glauben Sie mir, dass diese Erweiterung wirklich, wirklich hilfreich ist , um Farben in CSS zu visualisieren Und jetzt werden wir eine weitere Erweiterung installieren. Also musst du hier nur das Auto Rename Tag schreiben. Klicke auf das erste Ergebnis. Das ist also das Symbol dieses Autor-Rhythmus-Tags. Also denk dran. Also noch einmal, ihr müsst nur auf diese Schaltfläche „Installieren“ klicken und die Leute stellen sicher, dass ihr dieses Kästchen ankreuzt. Wenn es also ein Update dieser Erweiterung gibt, wird diese Erweiterung automatisch aktualisiert. Okay. Um zu zeigen, wie diese Erweiterung funktioniert, gehe ich zurück zu meiner Indexpunkt-HTML-Datei. Nehmen wir an, wir wollten diesen Header eigentlich als Deve-Element erstellen Zum Beispiel habe ich ihn einfach in DV umbenannt, also vorher hatten wir diesen Header, hatten wir diesen Header, sodass er automatisch umbenannt wird, weil wir eine Erweiterung namens Auto Rename Tag installiert haben Jetzt sehen Sie, dass automatisch auch das schließende Tag geändert wird, also das schließende Tag Und das wiederum ist extrem hilfreich und erleichtert uns das Schreiben von HTML ein bisschen, denn glauben Sie mir, wir müssen das ständig tun, Beispiel den endgültigen Namen ändern. Okay. Jetzt legen wir es zurück. Also nenne ich es einfach als Header. Und während ich hier tippe, wird es automatisch umbenannt, wie Sie auschecken können Nun, Leute, eine weitere Sache die wir zumindest tun wollen, ist, wir müssen nur zu den Einstellungen gehen und ihr müsst auf die Einstellungen klicken Also werden wir die Einstellungen, die wir zuvor deaktiviert haben, rückgängig machen die Einstellungen, die wir zuvor deaktiviert haben Jetzt werden wir nach einem Tank suchen, der sich automatisch schließt. Stellen Sie jetzt sicher, dass Sie dieses Kontrollkästchen wie folgt aktivieren. Ich denke, an diesem Punkt werden Sie nicht mehr den Fehler machen , ein abschließendes Etikett zu bekommen. Und jetzt können wir VS-Code erlauben, diese Arbeit für uns zu erledigen. Gehen wir nun zurück zu unserer Indexpunkt-HTML-Datei. Und jetzt zum Beispiel, wenn ich einfach einen Absatz schreibe, zum Beispiel so. Also schreibe ich gerade den ersten Tag. Aber hier sehen Sie, dass VS-Code dieses Absatz-Tag automatisch schließt. Nun, was auch immer wir schreiben wollen, wir können schreiben oder was auch immer du schreiben kannst. Das ist also auch eine sehr hilfreiche Einstellung. Lassen Sie uns nun diesen Absatz hier löschen. Und jetzt werden wir den wichtigsten installieren, und der heißt Live-Server. Also musst du hier einfach so einen Live-Server schreiben. Klicke auf das erste Ergebnis und du siehst hier, ich habe diese Erweiterung bereits installiert. Jetzt möchte ich das nur noch aktivieren. Wenn Sie diese Erweiterung nicht installiert haben, dann fahren Sie bitte fort und installieren Sie diese Erweiterung. Jetzt zeige ich Ihnen nur, wie diese Erweiterung funktioniert. Gehen wir also zurück zu unserer Indexpunkt-HTML-Datei. Leute, jetzt werde ich dieses Erweiterungs-Panel studieren. Um Live Server zu öffnen, müssen Sie nur noch auf diese Schaltfläche klicken. Ich hoffe also, dass Sie diesen Golf-Button hier unten sehen können . Also klicken Sie darauf. Und nachdem Sie geklickt haben, sehen Sie jetzt, dass unsere Webseite zu einem neuen Tab hinzugefügt wurde, oder? Der Live-Server sagt also, dass der Server gestartet wurde. Also schließe ich einfach diesen. Jetzt sehen Sie vielleicht , dass es das gleiche Ergebnis ist, was wir auf unserer ersten Webseite bekommen. Zum Beispiel sieht dieses Bild im Grunde genauso aus, aber es gibt einen sehr großen Unterschied. Nehmen wir an, ich möchte nur diese Überschrift für Coding Ninja ändern Jetzt möchte ich das nur ändern, da ich zum Beispiel hier wie im Code schreiben werde Jetzt siehst du hier, sobald ich die Datei gespeichert habe, dann kannst du hier auschecken. Ich speichere sie zum Beispiel und hier siehst du es. Sie sehen, was passiert ist, die Seite wurde automatisch neu geladen ohne dass wir etwas tun müssen Also haben wir nur den Code gespeichert, und was dann passieren wird, ist, dass die Seite hier automatisch aktualisiert wird Alle Änderungen , die wir hier vorgenommen haben, werden also im Grunde in diese Seite übernommen, und jetzt können Sie sofort sehen , wie sich unsere Änderungen widerspiegeln. Also habe ich es jetzt zurückgelegt. Also, wenn ich es speichere, kannst du auschecken. Wir müssen die Webseite nicht manuell neu laden. Der Live-Server erledigt den Job also für uns. Wenn ich diese Verbindung beenden möchte, sobald ich diese Webseite erstellt habe, dann kann ich einfach hier drüben auf diesen Port fünf doppelt Null klicken , und unsere Live-Serververbindung wird enden, richtig, okay. Nun, noch einen Unterschied, den ich mit Ihnen teilen wollte. Also gehe ich einfach zurück zu dieser Datei und hier siehst du den Speicherort der sehr langen Datei. Im Grunde wird es eine URL genannt. Es ist also komplett lang. Und in diesem Fall bedeutet das, was da steht, eine sehr kurze URL , 127.0, sodass ein Webserver für Sie läuft Wenn Sie also Änderungen an einer HTML-Datei vornehmen, wird das sofort hier widergespiegelt. Wenn Sie das aus irgendeinem Grund auf Ihrem Computer nicht zum Laufen bringen könnten, Sie sich natürlich keine Sorgen. Du kannst es immer noch auf die alte Art machen. Also im Grunde so, wie wir es die ganze Zeit bis zu diesem Zeitpunkt gemacht haben , also können Sie die Datei einfach von Ihrem Dateisystem aus öffnen , wie wir es getan haben, und sie dann manuell aktualisieren. Aber im Moment brauchen wir diesen Tab nicht mehr. Wir schließen das einfach. Wir haben unseren Live-Server, der die Seite bedient. Wann immer wir einige Änderungen vornehmen, Ordnung, und damit sind wir jetzt bereit, unsere letzten beiden Coding-Herausforderungen in HTML anzugehen unsere letzten beiden Coding-Herausforderungen . Wir sehen uns bald dort 15. Herausforderung Nr. 1: Jetzt ist es Zeit für die erste große Programmierherausforderung in diesem Kurs. Lass uns jetzt anfangen. Bevor wir mit der eigentlichen Herausforderung beginnen, möchte ich zunächst einige Änderungen an der Dateistruktur vornehmen , die wir gerade in diesem Projekt haben. Insbesondere möchte ich alle Bilder in einem Ordner ablegen, damit ich Ihnen dann zeigen kann , wie Sie die Bilder so einbinden können , wenn sie sich in einem bestimmten Ordner befinden. Im Moment sehen Sie hier, dass sich diese Bilder in genau demselben Ordner befinden wie unsere Indexpunkt-HTML-Datei. Was ich jetzt tun möchte, bedeutet, dass ich nur alle Bilder in einen separaten Ordner legen und dann den Pfad hier an diesem Quellort angeben möchte . Nun, hier haben wir diesen „Erkunden“ -Tap, also erweitern wir ihn. Wie Sie hier nachlesen können, befinden sich all diese Bilder hier in genau demselben Ordner wie unsere HTML-Datei mit Indexpunkt. Jetzt möchte ich hier nur noch einen Ordner erstellen. Um hier einen Ordner zu erstellen, sehen Sie hier, wir haben dieses Symbol, Sie müssen nur auf das zweite Symbol klicken, und jetzt gebe ich meinen Ordnernamen als IMG an. Wir haben hier einen Ordner erstellt. Jetzt erweitere ich das einfach. Ich ziehe hier einfach per Drag-and-Drop hin. Machen wir es also für alle Bilder genauso. Jetzt befinden sich alle Bilder im IMG-Ordner. Lassen Sie uns nun die Seitenleiste sammeln. Speichern wir es in unserer Indexpunkt-HTML-Datei. Jetzt möchte ich nur die Webseite neu laden, nicht diese, im Grunde diese Demo Dieser, an dem wir gerade arbeiten. Wenn ich jetzt die Webseite neu lade, dann kannst du hier auschecken Diese beiden Bilder, die wir bisher haben, sind hier nicht zu finden , da wir diese Bilder in einen separaten Ordner abgespielt haben diese Bilder in einen separaten Ordner Normalerweise werden wir einen Ordner erstellen und dann Bilder in diesen Ordner einfügen. Lassen Sie uns diese Seitenleiste erweitern. Jetzt sehen Sie hier, dass sich unsere Bilder im Bilderordner befinden. Um dieses Problem zu beheben , müssen wir hier zuerst als IMG angeben, dann müssen wir einen Schrägstrich eingeben Dann müssen wir den Namen des Bildes angeben. In diesem Fall ist dieser Autor ein Punkt im PNG-Format. Nun, wenn ich einen Tresor gebe und wenn ich die Webseite neu lade, dann kannst du hier nachschauen, ob das Bild hier erschienen ist und auch hier in dieser Gutter, wie es heißt, erschienen ist Lassen Sie uns nun dasselbe auch für das zweite Bild tun. Also gebe ich als IMG an, dann als Schrägstrich. Speichern wir es und liefern die Webseite. Jetzt ist das zweite Bild auch hier erschienen und es ist auch hier in dieser Gosse erschienen Jetzt lösen wir das Problem der Bilder, die wir in einem separaten Ordner haben, vollständig der Bilder, die wir in einem separaten Ordner haben Normalerweise legen wir die Bilder immer in einem separaten Ordner ab, und deshalb hielt ich es für wichtig, es Ihnen zu zeigen, besonders jetzt vor dieser Herausforderung bei der wir mehr Bilder verwenden werden Also, was diese Herausforderung angeht, ich bin wieder hier auf meiner Demoseite und lass uns nach unten scrollen und hier siehst du es. Im Grunde genommen bedeutet das, dass Sie diesen Teil einfach selbst programmieren müssen. Im Grunde dieser verwandte Beitragsabschnitt. Nun, hier siehst du es in diesem verwandten Beitragsabschnitt. Es ist also wie eine ungeordnete Liste, und hier siehst du, das ist wie ein Aufzählungspunkt. Okay? In dieser ungeordneten Liste haben wir also drei Listenelemente und jedes davon hat ein Bild, einen Ankerlink Also im Grunde dieser Link und dieser Autorenname. Im Grunde ist das wie ein Absatz. Lassen Sie mich Ihnen also tatsächlich zeigen , wo das in unserem Markup sein sollte Also in unserer HTML-Datei. Lass uns nach unten scrollen, wo du diesen Teil codieren musst, also nach diesem Artikel musst du das nur codieren, nicht in der Fußzeile, nicht im Artikel Du solltest diesen Teil nach diesem Artikel codieren. Hier brauchen wir ein weiteres Element und dieses schreibe ich tatsächlich für dich. Hier werden wir ein Nebenelement verwenden. Und hier sehen Sie, dass der VS-Code für uns automatisch vervollständigt wird. Hier werden wir dieses Assign-Element verwenden und das Assign-Element wird normalerweise für einige sekundäre Informationen verwendet Das ergänzt die Informationen im Hauptteil der Seite. In diesem Fall besteht der Hauptteil der Seite aus dem Artikel, und der Nebenteil, der sekundäre Informationen enthält, sind im Grunde einige verwandte Ports , die sich auf den Artikel beziehen Zum Hauptteil. Okay? Heute verwenden wir visuell oft das Side-Element als Seitenleiste, aber das muss nicht so sein Aber was diese Herausforderung angeht, siehst du, dass sie mit dieser Überschrift beginnt, also diesem verwandten Port , dass eine der Überschriften, zum Beispiel H eins, zwei, drei, vier, fünf und sechs, denken Sie daran, dass es sich hier tatsächlich um eine Liste handelt Was wir vorher nicht gemacht haben, war, mehrere Listenelemente anstelle eines Listenelements Hier oben in diesem Beispiel haben wir ein Listenelement, haben wir ein Listenelement im Grunde haben wir nur diesen Text. In diesem Fall in jedem Listenelement haben wir in jedem Listenelement ein Bild, einen Link und auch einen Absatz. Im Grunde der Name des Autors, und das ist überhaupt kein Problem. Anstelle jedes Listenelements können also mehrere andere untergeordnete Elemente vorhanden sein. Und mit diesen Informationen denke ich, dass Sie das jetzt erstellen können. Nun endlich zu den Bildern hier. Das sind einige Informationen, die Sie benötigen. Im Grunde befinden sie sich alle in genau demselben Ordner. Im Grunde hier in diesem IMG-Ordner. Hier sehen Sie, dass wir eins, zwei und drei miteinander verknüpft haben. Im Grunde sind das all diese Bilder. Und die Abmessungen, die ich ihnen geben wollte , sind 75 mal 75 Pixel, und jetzt glaube ich, ich habe dir alles gegeben Bitte pausiere das Video jetzt und nimm dir ein paar Minuten Zeit, vielleicht zehn bis 15 Minuten , um den HTML-Code für diesen Abschnitt zu schreiben. Viel Glück damit und auf der Intensivstation, wenn du bereit bist. Alles klar. Hoffentlich hast du es gut gemacht. Lass mich dir zeigen, wie ich es gemacht habe. Lass uns eine Überschrift erstellen und lass uns einfach einen verwandten Beitrag schreiben. Ich hoffe, dass Sie anfangen zu sehen, wie hilfreich es ist VS-Code schließt jetzt automatisch unsere HTML-Elemente. für diese Liste mit Aufzählungszeichen Lassen Sie uns für diese Liste mit Aufzählungszeichen eine andere Liste erstellen. Hier müssen wir einen EMI SAC, SRC Nachnamen erstellen , jetzt gebe ich meinen Al-Text als lächelnde Frau Das einzige Attribut, das wir nie vergessen, ist das LT-Attribut Lächelnde Frau mit langen, gewellten schwarzen Haaren, und dann müssen wir die Breite auf 75 Pixel angeben Leute, noch eine Sache möchte ich euch sagen , dass ihr ein Attribut überspringen könnt Sie können beispielsweise das Höhenattribut oder das Wit-Attribut überspringen . Bei beiden Attributen können Sie eines der Attribute überspringen. Jetzt überspringe ich zum Beispiel das Höhenattribut. Lassen Sie uns jetzt das Bild-Tag schließen und dann werde ich einen Link erstellen, im Grunde das Ankerelement, und mein Link zeigt derzeit nirgendwohin, also gebe ich ihn als Hash an und lassen schreiben, warum DMM das Rückgrat ist Lassen Sie uns nun einen Absatz erstellen. Im Grunde wollen wir den Namen des Autors schreiben. Geben wir es jetzt gleich und schauen uns das Ergebnis an. Im Grunde ist es unsere Demo-Seite. Jetzt gehe ich zurück zu meiner letzten Webseite, an der wir gerade arbeiten. Ich scrolle einfach nach unten. Lass es uns laden. Großartig. Wunderschön. Was auch immer wir in unserer HTML-Datei codieren , es spiegelt sich im echten Webbrowser wider. Lass uns wieder an die Arbeit gehen. Lassen Sie uns dieses Listenelement auch erstellen, zum Beispiel ein lie-Element. Lassen Sie uns hier ein weiteres Element erstellen. Ich werde ein Image-Tag erstellen und ich werde ein Ultra-Atriboot erstellen Jetzt schreibe ich lächelnde Frau mit weißem Laptop und dann müssen wir ein Breitenattribut erstellen Ich gebe die Abmessungen als 75 Pixel an und lassen Sie uns das Bild-Tag schließen und ein Ankerelement erstellen. Lassen Sie uns einen Absatz erstellen. Im Grunde David Smith. Jetzt müssen wir endlich nur noch ein weiteres Listenelement erstellen und hier werde ich erstellen und ich werde es einfach beenden. Wir müssen Altetribut schreiben und dann endlich schreibe ich Smiling Man in unserem formellen schwarzen Nun, Ihr Altex sollte natürlich nicht genau derselbe sein Es ist überhaupt kein Problem. Ich gebe einem Breitenattribut 75 Pixel an und lass uns schließen. Lassen Sie uns nun einen Link erstellen. Im Grunde dieses Ankerelement und es zeigt nirgendwohin. Lass uns schreiben, warum Java kreiert? Jetzt müssen wir dem Autor endlich den Namen Suba Sara geben. Davis. Jetzt speichern wir es hier und wenn ich mir meine letzte Webseite ansehe, wir gerade arbeiten, wenn ich die Webseite lade, ist das wunderschön. Das sieht genauso aus wie auf unserer Demoseite, und wir haben jetzt all diese Inhalte, die wir hier anzeigen wollen , auf sehr logische Weise übersichtlich markiert. Sie fragen sich vielleicht, warum wir in diesem Fall hier eine Liste verwendet haben , und der Grund dafür ist im Grunde die Idee hinter semantischem HTML Das habe ich etwas früher erklärt. Wenn wir über diesen verwandten Beitrag nachdenken, können wir sehr leicht argumentieren, dass es sich im Wesentlichen um eine Liste verwandter Beiträge handelt, und wenn es sich um eine Liste handelt, sollten wir sie in unserer TML markieren Wir sollten unser STML als Liste schreiben, und genau das haben wir später mit CSS gemacht Was wir später tun werden, bedeutet, dass wir die Aufzählungspunkte mit Hilfe von CSS entfernen werden die Aufzählungspunkte mit Hilfe von CSS Okay, weil sie in diesem Zusammenhang nicht viel Sinn machen, aber selbst wenn die Aufzählungspunkte entfernt wurden, wollen wir immer noch die Bedeutung dieses Elements. All das hier soll eine Liste sein. Aber wie dem auch sei, das reicht für dieses Video. Ich hoffe wirklich, dass du diese Herausforderung gemeistert hast und dass du Spaß daran hast, auch wenn es einige Zeit gedauert hat und auch wenn du einige Konzepte aus den vorherigen Vorlesungen wiederholen musstest, das ist völlig normal und genau so sollte es jetzt sein, um ein bisschen mehr zu üben, auch wenn eine weitere Coding-Herausforderung ansteht, die völlig losgelöst von diesem Projekt ist. Aber es ist wirklich aufregend, also hoffe ich, Sie bald dort zu sehen. 16. Herausforderung Nr. 2: Zeit für eine weitere spannende Coding-Herausforderung , damit du deine neuen HTML-Kenntnisse weiter üben kannst. In diesem Fall möchte ich, dass Sie diese Komponente für diesen bequemen, modernen Sneaker-Schuh bauen . Ich sage hier Komponente , weil ich möchte, dass Sie sich diesen Inhalt hier im Kontext eines E-Commerce-Shops vorstellen diesen Inhalt hier im . Stellen Sie sich vor, wir haben ein Schuhgeschäft und es gibt mehrere Schuhe für jeden von ihnen Da ist dann die kleine Komponente. Also Sachen wie der Preis, eine kurze Beschreibung. Ein Link und dann einige Produktdetails hier. Ich schreibe diese DML auf einer speziellen Codierungsplattform namens CodePen Dies ist ein Online-Ort dem wir im Grunde unseren Code schreiben können, und der Code wird dann automatisch ausgeführt und gerendert, und es macht es auch einfach, diesen Code zu teilen Jetzt müssen Sie CodePen natürlich nicht mehr verwenden , um diese Herausforderung zu meistern Jetzt können Sie zu Ihrem Code-Editor gehen und diese Seitenleiste erweitern Und hier siehst du, dass ich einen Ordner für dich erstellt habe. Im Grunde dieser Challenge-Ordner und wenn Sie in diesen Ordner gehen, dann, wie Sie sehen können, hier haben wir dieses Bild und wir haben auch diese Textdatei. Im Grunde habe ich Ihnen den gesamten Inhalt dieser Herausforderung zur Verfügung gestellt. Wenn Sie nun die Vorschau des Bildes sehen möchten, können Sie es einfach anklicken und hier auschecken. Und auch hier haben wir unsere Inhaltsdatei. Im Grunde haben wir alle Inhalte, um diese Herausforderung zu meistern. Leute, wenn ihr eure Coding-Herausforderung abschließt, dann braucht ihr noch eine Sache , nämlich eine URL dieses Bildes. CodePen können Sie jetzt keine Bilder direkt zu ihrer Plattform hinzufügen Was ich getan habe, bedeutet, dass ich dieses Bild auf einer einzigen Plattform gehostet , bedeutet, dass ich dieses Bild auf einer einzigen Plattform und eine URL dafür erstellt habe. Was Sie also tun können bedeutet, dass Sie diese URL einfach kopieren und in den Codestift einfügen können Nun, Leute, wenn ihr den Inhalt dieser Herausforderung haben wollt, dann seht ihr hier, ich habe den Text dafür bereitgestellt. Im Grunde genommen könnt ihr von hier aus den gesamten Text abrufen, bis ihr den Text kopieren könnt. Der Grund, warum ich das hier in diesem Video nicht mache , ist, dass wir später auf dieser Herausforderung aufbauen werden. Also werden wir dieses sehr kleine Projekt weiterentwickeln, und das würde dann zu einem Durcheinander verschiedener Dateien und einer Menge unterschiedlichen Codes führen. Da Sie es auf Ihrem eigenen Computer machen, ist es für Sie einfacher, wenn Sie möchten, eine neue ML-Datei zu erstellen und dies hier zu tun. Andererseits denke ich, dass es auch hilfreich und nützlich für dich ist, ein bisschen über CodePen zu lernen und die Herausforderung dort zu erstellen Lassen Sie mich Ihnen nur eine sehr kurze Demonstration von Lassen Sie uns hier einen neuen Tab erstellen und nach CodePen suchen. Und Sie können sich hier Codpen Dot IO ansehen , klicken Sie einfach Leute, wenn ihr euch dieses Video in Zukunft anschaut, dann könnte die Oberfläche dieser Website geändert werden Leute, nachdem ihr auf diese Website von CPN gekommen seid, könnt ihr einfach hier drüben klicken, um mit dem Programmieren zu beginnen Sie werden also diese Oberfläche von CodePen sehen können. Sie können hier aber jederzeit einen neuen Codestift erstellen, indem als Copen Dot IO Slash PN hierher kommen Nun, Leute, lasst mich euch einige Dinge über CodePen vorstellen euch einige Dinge über Im Grunde genommen haben wir hier diesen HTML-Code. Das ist ein HTML-Panel, und das ist CSS, und das ist JavaScript-Panel. Grundsätzlich können Sie hier als HTML und CSS und hier in diesem Panel auch als JavaScript codieren . In diesem Fall möchte ich dieses CSS- und JavaScript-Panel nicht haben. Was ich also tun werde, bedeutet, dass ich dieses Panel einfach zusammenklappen werde. Um das zu sortieren, klicke ich einfach auf diese Pfeilschaltfläche, und hier sehen Sie, wir haben eine Option Minimieren des CSS-Editors, klicken Sie einfach darauf Und das Gleiche werde ich für das JavaScript tun. Nun, Leute, wir haben hier in unserem HTML-Panel etwas mehr Platz. Also Leute, was auch immer der HTML-Code ist, den wir hier codieren, er wird sich direkt hier in diesem Ergebnispanel widerspiegeln. Also lasst uns einfach als eine Überschrift schreiben. Und hier werde ich Hello World schreiben. Also schließe ich das Etikett. Also Leute, wie ihr hier nachlesen könnt, was wir in diesem HTML-Panel geschrieben haben. Im Grunde haben wir eine Hauptüberschrift als Hallo Welt geschrieben , und das spiegelt sich direkt hier in diesem Ergebnispanel wider. Im Grunde die Hello World. Schauen wir uns also die Coding-Herausforderung an, die wir hier erstellen wollen. Hier siehst du, dass der Name der Herausforderung Herausforderung für lautet. Was sind all die Dinge in dieser Coding-Herausforderung , die wir erstellen wollen. Im Grunde haben wir eine Überschrift und ein Bild, und wir haben auch diese Preise und wir haben diesen kostenlosen Versand und wir haben hier Text, und wir haben auch einen Link und wir haben die Produktdetails, und hier haben wir eine Unorder-Liste, und wir haben auch einen Button Um diese Herausforderung abzuschließen, möchte ich dir ein paar Hinweise geben, also werde ich in einen anderen Modus wechseln, also klicke ich einfach auf diesen Quellmodus Ich verstecke mich einfach. Also, Leute, was ich will, bedeutet, dass ihr nur all diesen Inhalt in einem Artikelelement zusammenfassen müsst. Dann seht ihr hier noch eine Sache, die wir haben. Im Grunde dieses Bild. CodePen erlaubt sich nicht, die Bilder direkt auf dieser Plattform zu hosten, wir können die Bilder nicht direkt hier in diese Codierungsplattform einfügen direkt hier in diese Was wir also tun können, bedeutet, dass Sie nur diese URL kopieren müssen Also diese URL habe ich dir in der Inhaltsdatei zur Verfügung gestellt, sodass du sie dort auschecken kannst oder du kannst sie einfach eingeben. Und noch etwas möchte ich dir sagen, hier siehst du, hier haben wir einen Link, also diese weiteren Informationen. Und am Ende, sehen Sie, haben wir hier diesen Pfeil. Im Grunde ist dieser Pfeil eine HTML-Entität. Okay? Also, Leute, ich möchte euch nur noch eine Sache zeigen. Wenn ich auf meine Webseite gehe, also im Grunde diese Webseite , an der wir vorher gearbeitet haben, jetzt hier in der Fußzeile, hier haben wir dieses Copyright-Symbol Dies ist auch eine ML-Entität. Was ich sagen möchte, bedeutet, dass es eine praktische Liste von HTML-Entitäten gibt. Sie können also hier auschecken. Im Grunde haben wir auf dieser Website, also auf der Website dieser WT-Schule, also auf der Website dieser WT-Schule, diese Liste mit vier HTML-Entitäten, also haben wir viele DML-Entitäten Nun, Leute, wenn ihr direkt auf die Website der WT-Schulen gehen wollt , also im Grunde diesen DML-Entitätsraum, dann bedeutet das, dass ihr einen neuen Tab erstellen könnt, und hier könnt ihr nach WT-Schulen suchen HTML vier Entitäten. Und hier können Sie sich diese Website ansehen , so dass Sie einfach darauf klicken können und Sie werden auf derselben Website landen , die ich Ihnen zuvor gezeigt habe. Kehren wir nun zu der Herausforderung zurück, zu der ich zeige. Hier sehen Sie, dass wir diese Schreibpfeileinheit haben, im Grunde dieses Schreibpfeilsymbol. Gehen wir jetzt zurück und wenn ich nach dem HTML-Symbol mit dem Schreibpfeil suchen möchte, dann kann ich das tun, dass ich einfach hier suchen kann. Zum Beispiel drücke ich auf meiner Tastatur Strg+F , hier wird eine Suchleiste angezeigt, und hier suche ich nach Pfeil. Und welche Pfeile in dieser Liste vorhanden sind, sie werden hier angezeigt. Zum Beispiel will ich nur diesen Schreibpfeil. Also hier kannst du auschecken. Hier müssen wir den Code für die DML-Entität als Prozent R A R und Semikolon schreiben als Prozent R A R und Semikolon Lass uns das einfach kopieren. Leute, nur so kannst du irgendein Symbol finden. Zum Beispiel haben wir im vorherigen Video das Copyright-Symbol verwendet. Sie können hier Copyright schreiben und Sie werden dieses Copyate-Symbol sehen können, und hier haben wir diesen Code hier. Also diese Prozentzahl und das Semikolon. Also, was ich dir vorhin gezeigt habe. Also in meinem Fall will ich den Schreibpfeil, also schreibe ich hier einfach Pfeil. Leute, diesen Code, ihr müsst hier schreiben , um die Herausforderung abzuschließen, und ich kopiere diesen Code einfach hierher. Und hier unten, seht ihr, Leute, wir haben diesen anklickbaren Button, das ist eine Ato-Karte , die wir noch nie benutzt haben. Also zeige ich es dir einfach in dieser TML-Datei. Es ist also wie ein einfacher Button. Also haben wir dafür ein Button-Element erstellt. Also haben wir geöffnet und geschlossen, und darin haben wir den Inhalt bereitgestellt. Richtig. Aber wenn Sie es auf einem Codestift erstellen, wie ich es tun werde, benötigen Sie dieses Bild , das sich unter dieser URL befindet. Also kopieren wir es einfach hierher und verwenden es für Ihr eigenes Projekt. Dann sollten die Abmessungen des Bildes 220 Pixel betragen. Und damit glaube ich, habe ich dir alles gegeben , was du wissen musst. Also mach weiter und kopiere diese URL. Und jetzt werde ich zur Ganzseitenansicht wechseln , sodass Sie alles auf einmal sehen können . Ni überlässt es Ihnen einfach und kommt in fünf oder zehn Minuten wieder hierher, sobald Sie bereit sind. Okay, hier sind wir zurück und ich hoffe, dass es keine zu große Herausforderung für dich war , sodass es nicht zu schwer war. Hoffentlich kannst du deine Fähigkeiten ein bisschen mehr üben . Falls Sie also Zweifel haben oder auf ein Problem stoßen, zeige ich Ihnen hier meine Lösung. Gehen wir zurück zu unserem Codestift. Im Grunde unser leerer Codestift, und ich werde diesen einfach löschen und dafür ein Artikelelement erstellen. Und jetzt, wie Sie sehen können, müssen wir die Elemente manuell schließen und den gesamten Text hierher kopieren. Lassen Sie uns nun den gesamten Text in einige Elemente zusammenfassen. Zum Beispiel werde ich jetzt zwei Überschriften schreiben, im Grunde die sekundäre Überschrift und hier müssen wir die Elemente manuell schließen. Nach dieser Überschrift benötigen wir dieses Bild. Lassen Sie uns dafür ein Image-Tag erstellen. Kopieren wir nun die URL davon. Ich kopiere einfach die URL. Jetzt hier, wie Sie auschecken können, habe ich die URL eingefügt Jetzt werde ich das Alt-Attribut schreiben. Lass uns den Al-Text schreiben. Schwarz-weiße Sneaker vor einem lila Hintergrund schweben. Jetzt gebe ich die Breite mit 220 Pixeln an, und jetzt werde ich das Bildelement schließen. Wie Sie sehen können, werden die Ergebnisse jetzt hier im Ergebnisfenster wiedergegeben. Hier sehen Sie, dass wir diese Überschrift umschlossen haben. Im Grunde haben wir diesen Text in die zweite Überschrift gepackt und auch ein Bild hinzugefügt. Dann, nachdem Sie gesehen haben, haben wir diesen Text hier drüben. Dieser eSML-Text, den Sie sehen , besteht also aus einer einzigen Zeile. EstimL kümmert sich also nicht um all diese Leerzeichen hier. Was es also tun wird, bedeutet, dass es den gesamten Text als einen einfachen Absatz behandelt den gesamten Text als einen einfachen Absatz Deshalb kam es in eine einzige Zeile. Lassen Sie uns jetzt zum Beispiel einfach den gesamten Text in die Elemente einwickeln . Wir haben also diese Absätze, packen wir sie in das Absatzelement ein, und dann müssen wir ein weiteres Paragon erstellen , und wie Sie sehen können, wird dieser Code, wie Sie sehen, beabsichtigt, einen weiteren Absatz, den Sie möchten, während wir diesen Text in die Elemente zusammenfassen wie Sie sehen, beabsichtigt, einen weiteren Absatz, den Sie möchten, während wir diesen einen weiteren Absatz Und ich denke, das ist im Grunde ein Link. In HTML müssen wir es also wie einen Link markieren. Ich möchte nur das HR des Attributs angeben. Und hier habe ich dich nicht erwähnt , wohin dieser Link führt. Also müssen wir nur angeben, bedeutet, dass ein Link nirgendwohin zeigt, also lassen Sie uns ihn schließen. Und hier sehen Sie, dass wir einen Pfeil haben, es ist keine korrekte Art , den Pfeil darzustellen. Dafür haben wir eine spezielle Einheit. Zum Beispiel müssen wir den Code für den Rechtspfeil als Prozent, RAR und Semiclm schreiben den Code für den Rechtspfeil als Prozent, , dann haben wir die Schutzdetails Jetzt ist es im Grunde wie eine Überschrift. Nun zu dieser Überschrift, die ein Schritt in die Komfortzone ist, habe ich als h zwei angegeben. Ich gebe dieser Überschrift nun h drei und lassen Sie uns schließen. Und dann haben wir diese Liste mit Stichpunkten. Im Grunde diese ungeordnete Liste. Lass uns das auch einpacken. Ich werde hier eine ungeordnete Liste erstellen Lassen Sie uns diesen Text hier ausschneiden und hier drüben platzieren. Ich werde den ganzen Text in ein einziges Alla-Element wie dieses zusammenfassen. Ich glaube, du hast etwas Übung darin, HTML zu schreiben. Wir haben noch ein letztes Element. Jetzt haben wir endlich diesen Attucat-Knopf. Lassen Sie uns ihn wie folgt in das Button-Element einbinden. Schauen wir uns jetzt das Ergebnis hier an. Das sieht genauso aus wie unsere Herausforderung dazu. Leute, noch ein Unterschied, wir haben diese Preisdetails. Es ist fett gedruckt, und hier können Sie überprüfen, ob es im normalen Text steht. Um das fett zu formatieren, müssen wir diesen Text zu einem starken Element zusammenfassen. So wie wir in den vorangegangenen Vorlesungen gelernt haben. Nun habe ich diesen Text in das starke Element gepackt. Jetzt ist unser Text fett gedruckt, großartig. Aber wie dem auch sei, beenden wir diese Herausforderung und stellen sicher alles überprüfen , was Sie gerade gelernt haben, all Ihre neuen Fähigkeiten, Tear-Schüler. Ich hoffe, Ihnen gefällt der Kurs und Sie finden ihn wertvoll. Ich habe viel harte Arbeit investiert, um diesen Kurs für Sie zu erstellen. Und Ihr Feedback bedeutet mir die Welt. Wenn dieser Kurs Ihnen in irgendeiner Weise weitergeholfen hat, sei es, Ihre Fähigkeiten zu verbessern, Ihr Selbstvertrauen zu stärken oder Sie dazu zu inspirieren, selbst etwas zu kreieren, nehmen Sie sich bitte einen Moment Zeit, um eine positive Bewertung zu schreiben. Ihr Feedback motiviert mich, weiterzumachen. Danke, dass du Teil dieser Reise warst. Ich kann es kaum erwarten, deine Gedanken zu lesen. Danke.