HTML JAVASCRIPT lernen

1. Einführung: Hallo Leute, willkommen zum Kurs. Als HTML, CSS und JavaScript. Ich bin Priyanka, deine Ausbilderin für diesen Kurs. Ein bisschen Hintergrund von mir. Ich habe Erfahrung in der Full-Stack-Webentwicklung. Ich bin auch ein Emma-Enthusiast und habe darin zahlreiche Projekte durchgeführt. Ich habe auch Erfahrung im Online-Unterricht und bin auch Autor bei medium. Bevor Sie mit dem Erlernen des Kurses beginnen, müssen Sie verstehen, warum HTML, CSS und JavaScript. Html, CSS und JavaScript sind Bausteine einer Website. Es bildet das Beste aus dem Frontend-Framework. Das Erlernen dieses Kurses hilft Ihnen in Ihrer Karriere, Entwickler zu werden. Was lernen wir in diesem Kurs? Zunächst die Grundlagen von HTML, Textformatierung, Listenformularen, CSS und JavaScript. Und so erweiterte Themen wie das Einbetten von Google Maps in eine Website usw. Und auch viele praktische Projekte und einige Bonusvideos. Also lasst uns ohne weiteres loslegen und ich wünsche Ihnen viel Glück und viel Spaß beim Lernen. 2. Installation von Notepad++: Hallo zusammen und willkommen zum Kurs. Wir beginnen den Kurs mit der Installation eines Editors zum Schreiben des HTML-Codes. In unserem Fall verwenden wir Notepad Plus Plus. Also lass uns gehen und es herunterladen und auf deinem Computer installieren. Öffnen Sie einen Webbrowser. Ich werde Google Chrome öffnen. Du wirst es wissen, oder? Laden Sie Notepad Plus, Plus herunter. Ich werde für Windows schreiben. Wenn Sie ein anderes Betriebssystem verwenden, können Sie das schreiben. Ich schreibe Windows Acht. Klicken Sie nun auf Notepad Plus, Plus. Jetzt könntest du es installieren. Jetzt. Klicken Sie nun auf Download von hier. Wählen Sie nun die Konfiguration aus. Ich habe 64-Bit-Maschine. Also werde ich das 64-Bit-Notepad Plus Plus Download-Installationsprogramm herunterladen. Ich würde es dir empfehlen. Klicken Sie jetzt darauf. Und wie Sie sehen können, wird das heruntergeladen. Nachdem Ihre Datei heruntergeladen wurde, klicken Sie darauf und wählen Sie dann die Sprache aus. Ich würde dir empfehlen, Englisch zu wählen. Und dann drücke Okay. Klicken Sie auf Weiter, und stimmen Sie dann der Lizenz zu. Wählen Sie dann den Zielordner aus. In meinem Fall ist es sicher. Sie können Ihren Zielordner wählen. Klicken Sie nun auf Weiter und dann auf Installieren. Klicken Sie auf Fertigstellen. Verwenden Sie hier Ihr Notepad Plus, Plus, das vollständig installiert ist und für uns bereit ist, die Koordinaten zu schreiben. Also lass uns anfangen. 3. Erste HTML-Seite: Hallo zusammen. Willkommen zurück zum Kurs. In diesem Video werde ich dir beibringen, wie du deinen ersten HTML-Code schreibst. Öffnen Sie Notepad Plus, Plus über das Symbol auf Ihrem Desktop. Erstellen Sie jetzt eine neue Datei. Öffnen wir also zuerst das HTML-Tag. Sie haben also das HTML-Tag geöffnet. Geben Sie jetzt einen Schrägstrich, um es zu schließen. Welchen Code Sie auch immer schreiben müssen, Sie müssen ihn innerhalb des HTML-Tags schreiben. Jetzt schreiben wir das head-Tag und schließen es gleichzeitig. In der Kopfmarke. Wir müssen ihm einen Titel geben. Schließen Sie jetzt das Title-Tag. Deshalb müssen wir unserer HTML-Seite , die wir erstellen, einen Titel geben . Geben wir den Titel dieser ersten HTML-Seite an. Jetzt speichern wir das, gehen Sie zu Datei. Klicken Sie auf Speichern unter, oder. Sie können auch diesen Speichern-Button verwenden, der bis jetzt vorhanden Ich werde meine Datei auf meinem Desktop speichern. Sie können es speichern, wo immer Sie möchten. Ich nenne es zuerst Test. Punkt-HTML. Vergessen Sie nicht diese Punkt-HTML-Erweiterung. Speichere es jetzt. Bevor wir es ausführen, lassen Sie uns diesen Titel verstehen, aber sehr klar. Öffnen Sie also Ihren Webbrowser. Ich öffne Google Chrome hier. Sie können jeden Webbrowser Ihrer Wahl öffnen. Wie Sie sehen können, habe ich jetzt Google Chrome geöffnet. Jetzt. Gehe zu google.com. Sie können sehen, dass es hier geschrieben ist, Google. Das ist also im Grunde der Titel dieser HTML-Seite. Kehren wir jetzt zu unserem Redakteur zurück. Da wir also den Titel als erste HTML-Seite angegeben haben, wird dies als Titel unserer Seite angezeigt. Lassen Sie mich jetzt mit dem nächsten Schritt fortfahren. Hier ist das HTML des ersten Knotens. Doppelklicken Sie darauf. Ja, wie Sie sehen können, ist dies meine HTML-Seite und dies ist der Titel , der hier angezeigt wird. Danke fürs Zuschauen. Im nächsten Video werden wir lernen, wie man den Text unserer HTML-Seite erstellt . 4. HTML: Hallo zusammen, Willkommen zurück zum Kurs. In diesem Video erfahren Sie , wie Sie den Textteil Ihrer HTML-Seite erstellen. Gehen Sie also zu Notepad Plus, Plus Editor auf der Deck-Stufe. Erstellen Sie jetzt eine neue Datei. Wie Sie bereits wissen, müssen wir das HTML-Tag öffnen und gleichzeitig schließen. Dann müssen wir das Headdeck erstellen. Dann müssen Sie unserer Seite einen Titel geben und den Titel als Text angeben. Da werden wir etwas über den Körper der HTML-Seite erfahren . Schließen Sie jetzt das Head-Tag. Danach hatten wir nun gelernt, den body tag body zu erstellen und ihn dann gleichzeitig zu schließen. Denken Sie daran, dass Ihre Körpermarken unter dem High-Tech liegen sollten. Was auch immer Sie in dieses body-Tag schreiben, wird auf Ihrer HTML-Seite angezeigt , um das Spektrum zu verstehen. Das ist geh zu unserem Webbrowser. Ich öffne Google Chrome. Jetzt geht es zu google.com. Der Harnstoff. Was auch immer Sie hier sehen, das ist Google auf Ihrem Bildschirm und in der Suchleiste geschrieben, und was auch immer hier angezeigt wird, ist im Grunde genommen in das body-Tag dieser HTML-Seite geschrieben. Kehren wir jetzt zu unserem Editor Notepad Plus, Plus zurück. Schreiben wir jetzt einfach etwas in diesen Körper. Also schreibe ich diesen Körperteil von unserer HTML-Seite. Speichern wir nun diese Datei. Klicken Sie auf die Schaltfläche Speichern. Ich werde es als Body Dot HTML speichern. Vergessen Sie nicht die dot HTML Erweiterung. Speichere es jetzt. Das mache ich, mein nächster Tipp. Hier ist Body Dot HTML. Also doppelklicken Sie darauf. Wie Sie sehen können, ist mein Titel hier body. Und das ist der Körperteil, in den ich geschrieben habe, das ist der Körperteil unserer HTML-Seite. Was auch immer Sie in den Körper schreiben , der auf dem Bildschirm angezeigt wird. Kehren wir zu unserem Editor Plus Plus Plus zurück. Jetzt hat dieses body-Tag bestimmte Attribute, mit deren Hilfe Sie es manipulieren können. Lassen Sie mich Ihnen zeigen, wie Sie die Attribute im body-Tag verwenden. Die Attribute sollten im body-Tag selbst vorhanden sein . Das erste Attribut ist also bg color. Vesikel stehen für Hintergrundfarbe. Mit Hilfe dieses Attributs können Sie die Hintergrundfarbe Ihrer HTML-Seite festlegen. Also lass mich die Hintergrundfarbe auf Rot setzen. Jetzt spar es dir. Geh zu dem Ort , an dem du gerettet hast. Hier ist es, Körper. Wie Sie sehen können, wurde meine Hintergrundfarbe von weiß auf rot geändert. Sie können jede Farbe Ihrer Wahl angeben. Lass mich dir eine andere Farbe zeigen. Angenommen Rosa. Geh zurück zum Körper, neu geladen. Wie Sie sehen können, wurde die Farbe von Rot auf Rosa geändert. In ähnlicher Weise gibt es andere Attribute des Textkörpers. Sie dies nur, mit dem Sie Ihren Körper nach Ihren Wünschen stylen können kommenden Videos erfahren Sie dies nur, mit dem Sie Ihren Körper nach Ihren Wünschen stylen können. Danke, dass du dir dieses Video angesehen hast. In den nächsten Videos gibt es noch viel mehr für dich. 5. Überschriften in HTML: Hallo zusammen, Willkommen zurück zum Kurs. In diesem Video werde ich Ihnen die verschiedenen Überschriften von HTML beibringen . also auf Ihrem Desktop Doppelklicken Sie also auf Ihrem Desktop auf das Symbol Notepad Plus Plus. Also habe ich den Redakteur mit offener Ferse. Öffnen wir nun das HTML-Tag. Das alles. Denken Sie daran, dass Sie die Technologie gleichzeitig schließen müssen. Also habe ich das HTML-Tag geöffnet. Jetzt. Öffnen Sie das Head-Tag und schließen Sie gleichzeitig das Head-Tag innerhalb der Werbetechnologie, geben Sie den Titel Tech TI TLV. Schließen Sie es gleichzeitig im Titel, dem Titel dieser HTML-Seite. Deshalb gebe ich den Titel als Überschriften an, da wir heute Überschriften lernen werden. Also Überschriften, ja, es ist fertig. Jetzt. Wir machen den Körper, öffnen das Body-Tag und schließen es gleichzeitig. Wir haben das Body-Tag gemacht. Ich gebe die Überschrift. Also öffne ein Tag und schreibe H1. Schreiben Sie jetzt einen Text zu irgendetwas in Lake. Die erste Überschrift. Schließen Sie jetzt das H1-Tag. Die erste Überschrift ist meine Textur und innerhalb des H1-Tags. Lassen Sie uns also sehen, was passiert und was ausgegeben wird. Also speichere das zuerst, klicke auf das Speichern-Symbol. Speichern Sie es jetzt, wo immer Sie möchten, und denken Sie daran , wo Sie speichern. Also speichere ich es auf meinem Desktop. Klicken Sie also auf Next step und schreiben Sie den Dateinamen. Ich gebe headings.html. Vergessen Sie dieses Punkt-HTML nicht. Also spar es dir. Minimiere jetzt den Editor. Wie Sie sehen können, ist meine headings.html erstellt. Also doppelklicke ich darauf und warte darauf , dass es sich öffnet, verschenke es. Wie Sie sehen können, wird hier die erste Überschrift angezeigt. Das war also unsere erste Überschrift. Jetzt. Nun fügen wir ein weiteres Tag namens H2 hinzu und geben einen Text an. Angenommen, die zweite Überschrift und geht dann zu H2. Speichern Sie es jetzt und lassen Sie uns sehen, was in der Ausgabe passiert. Also kehren wir darauf zurück und es wird neu geladen. Hier ist meine zweite Überschrift. Wie Sie sehen können, sind H1 und H2 D im Grunde die Überschriften-Tags , bei denen eines die größte Größe hat , und wenn Sie weiter gehen, nimmt die Größe ab. In HTML gibt es sechs Überschriftstypen. Also werde ich testen, Ordnung, ZU h3. Dann gib den Text. Die dritte Ausgabe. Okay, jetzt schließe das Tag. H3. In ähnlicher Weise h 456. Also im Vergleich dazu, einfach die Banken zu wechseln. Jetzt, wenn alles auf einmal überprüfen, erhalten wir eine Vorstellung davon, wie diese Stirnlänge auf dem Bildschirm aussehen wird. Also H5, richtig. Schließen Sie es jetzt erneut. Die letzte H6, rechts zur sechsten Überschrift. Und schließe das h-Tag. Also speichere es jetzt. Kehren Sie zu Chrome oder einem anderen Browser zurück, den Sie verwenden, und laden Sie es einfach neu. Wie Sie sehen können, ist die Variation der Größe der Überschriften beim Übergang von H1 nach H6. Wenn wir sinken, nimmt auch die Größe ab. So können Sie Ihr Kopfschmerz-Deck nach Belieben verwenden . Danke, dass du dir die Jungs in den nächsten Videos angeschaut hast, es werden noch viel mehr für dich kommen. 6. HTML<p>Tag</p>: Hallo zusammen. Willkommen zurück im Kurs. In diesem Video erfahren Sie mehr über Absätze auf einer HTML-Seite. Öffnen Sie also den Editor für Notepad Plus Plus. Lasst uns anfangen, unseren Code zu schreiben. Beginnen wir also mit dem Öffnen des HTML-Tags. Das Head-Tag. Geben Sie Ihrer HTML-Seite einen Titel. Ich gebe dem Tight den letzten Absatz. In der Nähe von title-Tag, dem head-Tag. Öffnen Sie das Körper-Tag. Gleichzeitig. Wandschrank. Jetzt sollte sich dieses Absatz-Tag im Hauptteil befinden. Also öffne das Absatz-Tag vielleicht. Und was auch immer du in den Absatz Greg schreibst, das wird auf deiner Haut gezeigt. Also lass mich diesen Absatz schreiben. Nein, du musst das p-Tag schließen. Also lasst es uns retten. Ich nenne es als B-Punkt-HTML. Sie können einen beliebigen Namen angeben. Ich spare es auf meiner Deckstufe. Schauen wir uns also die Ausgabe an. Klicken Sie also auf die Schaltfläche Ausführen und starten Sie Chrome. Wie Sie mit dem p-Tag sehen können, können wir auch auf dem Bildschirm schreiben. Wenn Sie nun einen weiteren Absatz schreiben möchten, öffnen Sie erneut das p-Tag, oder? Dies ist ein weiterer Absatz. Und schließe das p-Tag. Speichere es. Führen Sie es erneut aus. Wie Sie sehen können, habe ich zwei Absätze geschrieben. Auf diese Weise können Sie also mehrere Absätze schreiben. Kehren wir also zu unserem Redakteur zurück. Nun, wenn wir in unserem Absatz wollen, müssen wir von der Mitte des Bildschirms beginnen. Wenn wir dann hier Leerzeichen angeben, wird dies nicht erkannt. Mal sehen, speichern Sie es. Lassen Sie es uns jetzt ausführen. Starten Sie in Chrome. Wie Sie sehen können, wurden diese Arten hier nicht entdeckt. Um das zu tun, können wir das Tag pre verwenden. Verwenden wir also ein Tag namens simultan ended. Speichere es. Sehen wir uns nun die Ausgabe an. Wie Sie sehen können, wie wir p verwendet hatten, ist also vorne ein Leerzeichen . Wenn Sie jetzt die Eingabetaste drücken und etwas schreiben, nehmen Sie an, hallo. Dann wird es auf Ihrem Bildschirm so angezeigt, wie es ist. Also führe ich es aus. Ja, also hallo kommt unten. Dies ist ein Absatz. Auf diese Weise können Sie mit Ihrem Absatz manipulieren und so viele Absätze schreiben, wie Sie möchten. Danke, dass du dir dieses Video angesehen hast. 7. So fügen Sie Bilder ein: Hallo zusammen, Willkommen zurück zum Kurs. In diesem Video werde ich Ihnen beibringen , wie Sie Ihrer Webseite Bilder hinzufügen. Öffnen Sie also einen Notepad-Editor. Erstellen Sie jetzt eine neue Datei. Beginnen Sie mit dem HTML-Tag. Wir sind also fertig mit dem Kopfteil. Ich habe den Titel als Bilder angegeben. Jetzt fangen wir mit dem unteren Teil an. Der Code zum Einfügen von Bildern sollte sich innerhalb des Körperteils befinden. Um das Bild einzufügen, sehen Sie das Tag IMG. Das IMG-Tag benötigt dafür kein schließendes Tag. Also wusstest du, dass dot es schließt. Jetzt. Es hat ein Attribut namens SRC. Src steht für source. Also müssen wir die Quelle des Bildes angeben. Also lass mich zu Dexter gehen. Erstellen wir hier einen Ordner. Ich benenne den Ordner images. Lassen Sie uns nun ein Bild hinzufügen. Ich habe bereits ein Bild in meinem Bildbereich. Also kopiere ich es einfach und gehe zu meiner nächsten Tube und füge es ein. Also hier habe ich dieses Bild. nun mit der rechten Maustaste auf dieses Bild. Gehe zu Eigenschaften und kopiere ihm einfach einen Namen. Gehen Sie jetzt zurück zu Notepad, Editor. Schreiben ist gleich, und dann der Ordnername Schrägstrich, der Bildname. Basierend darauf. Es ist vollbracht. Speichern wir jetzt diese Datei. Klicken Sie auf die Schaltfläche Speichern und ich speichere es in meinem Dexter. Es gibt einen Ordner namens HTML. Ich spare es mir dort auf, oder? Ing dot HTML, den Dateinamen, den Sie einem beliebigen Namen geben können. Ich spare es auf. Kehren wir jetzt zu meinem Lehrbuch zurück. Also hier ist die HTML-Datei , in der es ING-Punkt-HTML gibt. Fügen Sie diese Bilddatei jetzt auch in diese HTML-Datei ein. Dieses IMG-Punkt-HTML hat also einen Verweis auf diese Bilddatei, in der sich das Bild befindet. Also sind wir fertig. Lassen Sie es uns jetzt in Chrome ausführen. Wie Sie das Himmelsbild hier sehen können. Sie können jede wichtige Kraftstoffauswahl wählen. Auf diese Weise können Sie ein Bild in Ihre HTML-Seite einfügen. Jetzt können wir auch die Höhe und Breite des Bildes ändern , das wir einfügen. Kehren wir zu unserem Editor zurück. Das IMG-Tag hat Attribute, die als height und width bezeichnet werden. Lassen Sie uns also diese HEI GHD-Höhe gleich verwenden, Sie können jede Höhe von Futures angeben. Ich gebe 500. Und die Breite ist gleich Ich gebe tausend. Speichern wir das und lassen wir es uns ausführen. Wie Sie sehen können, wurde die Größe des Bildes geändert. Sie können die Größe weiter verringern oder vergrößern, je nach Bedarf und Wahl. Danke, dass du dir dieses Video angesehen hast. Schauen Sie sich immer mehr Videos an, um mehr über HTML zu erfahren. 8. So implementieren Sie Hyperlinks: Hallo zusammen, Willkommen zurück zum Kurs. In diesem Video werde ich Ihnen etwas über Hyperlinks beibringen. Öffnen Sie also den Editor für Notepad Plus Plus und erstellen Sie eine neue Datei. In diesem Video werde ich jetzt HTML-Dateien erstellen und sie dann verlinken. Um das Konzept des Hyperlinks besser zu verstehen , nehmen wir ein Beispiel aus dem wirklichen Leben. jetzt von Ihrem Computer Öffnen Sie jetzt von Ihrem Computer aus einen beliebigen Webbrowser. Ich öffne Google Chrome hier. Lassen Sie mich jetzt eine Website namens Wikipedia durchsuchen. Gib es ein. Wie Sie sehen können, ist dies eine Webseite von wikipedia.org G. Nun, wie Sie hier sehen können, ist eine kleine Ecke davon in fetten blauen Buchstaben mit darunter liegenden Buchstaben geschrieben . Das deutet also darauf hin, dass sich darin ein Hyperlink befindet. Wenn Sie also darauf klicken, eine weitere Webseite angezeigt. Das ist also das Konzept des Hyperlinks. Lassen Sie uns das jetzt auf unserer Webseite implementieren. Kehren Sie also zu Ihrem Editor zurück und erstellen Sie eine HTML-Seite. Wie Sie sehen können, bin ich mit dem Kopf fertig, aber ich habe meinen Titel als meine Webseite angegeben. Jetzt fangen wir mit dem Körper an. Jetzt habe ich innerhalb des body-Tags eine Überschrift namens Willkommen auf meiner Webseite in H1-Überschrift geschrieben . Und ich habe einen Absatz geschrieben dem es heißt, mehr zu wissen klicken Sie hier. Hier werde ich ankern, ein Tag öffnen und gleichzeitig schließen. Das wird also der Teil sein. Wenn Sie darauf klicken, navigiert es zu einer anderen Webseite. Jetzt hat dieses E, das Anker-Tag, ein Attribut namens HR. Es ist also der Hyperlink. Unsere HTML-Referenz, was auch immer Sie sagen. In diesen doppelten Anführungszeichen müssen Sie nun den Namen der Webseite angeben , zu der Sie navigieren möchten. Speichern wir nun diese Datei. Speichern Sie, während ich es in meinem Deck speichern werde, halten Sie in einer Datei namens HTML an. Hier ist es. Geben wir einen Namen. Also gebe ich den Namen „Strand“ an. Ein-Punkt-HTML. Speichere es jetzt. Wie Sie sehen können, habe ich den HTML-Ordner hier. Darin habe ich eine Webseite mit einem Punkt HTML. Lassen Sie uns nun eine weitere HTML-Datei erstellen. Erstellen Sie also eine neue Datei und schreiben Sie in Ihr HTML. Ich habe den Titel meines Strandes als Details angegeben. Innerhalb des body-Tags füge ich zwei Absätze hinzu. Bin ich. Kannst du in Namen schreiben. Schließen Sie dann das Absatz-Tag. Und noch ein Absatz. Ich denke, ich gehe direkt zur Bezeichnung. Und dann das Absatz-Tag. Speichern Sie jetzt diese Datei. Denken Sie daran, dass Sie diese Datei in dem Ordner speichern müssen , in dem Sie Ihre vorherige Seite gespeichert haben. Also wie ich meine vorherige Webseite in diesem HTML-Ordner gespeichert hatte . Also speichere ich das nur in diesem Ordner. Also lass mich den Namen als Webseite zu Punkt HTML geben. Und jetzt rette es. Jetzt haben wir also den Namen dieser Webseite. Kehren wir also zu einer Seite mit einem Punkt HTML zurück. Und innerhalb dieser H-Referenz, lassen Sie uns rechts zwei Punkte HTML. Sparen wir es uns jetzt. Lassen Sie uns nun diese Datei ausführen. Klicken Sie also auf Ausführen und starten Sie in Chrome. Sie werden in einem beliebigen Webbrowser starten. Wenn Sie jetzt sehen, um mehr zu erfahren, klicken Sie hier. Dieser Text wurde unterstrichen und hat die Farbe Blau. Du hast dort keine Farbe erwähnt, aber trotzdem ist es blau, weil es verknüpft ist. Wenn Sie jetzt auf unser Blaugrün klicken, können Sie sehen, dass Sie zu Ihrer Webseite weitergeleitet werden , zu der es sich um Details handelt. Sie haben diesen Titel hier Details genannt. Sie haben hier Ihre Neiman-Bezeichnung. Wenn Sie jetzt auf die Rückseite klicken, navigieren Sie zu Ihrer vorherigen Webseite. Auf diese Weise können Sie mehrere Webseiten gemäß Ihren Anforderungen verknüpfen . Danke, dass du dir dieses Video angesehen hast. Schauen Sie weiter, um mehr zu erfahren. 9. Einführung in die Textformatierung: Hallo zusammen, Willkommen zurück zum Kurs. In diesem Video werde ich Ihnen die Textformatierung in HTML beibringen . Öffnen Sie jetzt den Editor für Notepad Plus Plus. Erstellen Sie eine neue Datei. Wie Sie sehen können, bin ich mit der Grundstruktur meiner HTML-Seite bereits fertig . Jetzt werde ich innerhalb des Körperteils einen Absatz schreiben, der das ist Text heißt. Das p-Tag. Nun besteht das erste Ziel darin, den Text einzubeziehen. Was wir also tun werden , ist einen weiteren Absatz zu schreiben und den Stapel zu verwenden , da V für fett und richtig steht. Das ist fetter Text. Und das große Deck. Und gleichzeitig das Absatz-Tag. Sparen wir uns das jetzt. Ich speichere es auf meinem Deck. Immer noch. Gib ihm einen Namen. Und spar dir das. Lassen Sie es uns jetzt auf Chin Chrome ausführen. Wie Sie sehen können, der Absatz, den ich geschrieben habe, ein Text. Und als sie das bold -Tag gegeben hatten, das heißt B, die Texte, die sich innerhalb des fett gedruckten Tags befanden, fett gedruckt. Auf diese Weise können Sie den Text also fett formatieren. Lassen Sie uns nun sehen, wie wir einen Text darin schreiben können, dass er leckt. Erstellen Sie also einen weiteren Absatz und verwenden Sie dieses Tag namens i. Ich stehe dafür. Also werde ich das schreiben ist Text und Ditech und das p-Tag. Speichere es. Jetzt führe es aus. Wie Sie sehen können, ist dieser Text in Italien. Lassen Sie uns nun sehen, wie wir einen Text hochgestellt und tiefgestellt machen können . dafür erneut Starten Sie dafür erneut ein Absatz-Tag. Lassen Sie mich jetzt den Text schreiben. Die chemische Formel für Wasser lautet: Wir wissen, dass die chemische Formel von Wasser H2O ist. Zwei sind also ein Index. Also schreiben wir H. Dann steht in diesem Stapel namens sub für tiefgestellt. Wir schreiben zwei. Und dann beenden wir den Index. Dann schreibe o und schließe dann. Also Teil der Technik, spar dir das. Sehen wir uns die Ausgabe an. Wie Sie sehen können, lautet die chemische Formel für Wasser H2O, wobei zwei der Index ist, da wir innerhalb des tiefgestellten Tags geschrieben haben. Lassen Sie uns nun etwas über das Hochgestellte lernen. Lassen Sie mich also einen weiteren Absatz beginnen. Um hochgestellt zu implementieren, schreibe ich jetzt eine mathematische Formel. Schreiben wir x plus y. Und dann schreibe ich ein ganzes Quadrat. Dafür brauche ich das hochgestellte S UP und dann zwei. Und dann beenden Sie den hochgestellten Know Equals, dann wieder x-squared. Also nochmal die tiefgestellten und hochgestellten. Vergessen Sie nicht, sie zu beenden da sonst Ihre gesamten Texte hochgestellt und dann Y-Quadrat vorliegen. Öffnen Sie also erneut das Superscript-Tag und schreiben Sie in das hochgestellte Zeichen und beenden Sie es dann plus zwei x y. wir also die Formel bemerken, schließen wir jetzt dieses Absatz-Tag und speichern es dann. Sehen wir uns die Ausgabe an. Wie Sie sehen können, sind diese beiden hochgestellt. Schauen wir uns nun die anderen Tags an, mit denen wir unser Textfoto formatieren können. Das nächste Tag heißt also stark. Starttag heißt also stark. Und richtig ZU. Das ist starker Text. Und das starke Etikett. Und dann der Damm. Speichern Sie es und führen Sie es aus. Wie Sie sehen können, ist dies unser starker Text , der sowohl ein wenig umfangreicher als auch fett ist. Als nächstes haben wir klein. Fangen Sie also einen weiteren Absatz an und verwenden Sie das Tag small. Und dann richtig, das ist ein kleiner Text. Dadurch wird das p-Tag angegriffen. Speichern Sie das jetzt und führen Sie es aus. Wie Sie sehen können, wurde der Text verkleinert. Das ist also unser kleiner Text. Kehren wir jetzt zum Editor zurück. Das nächste Tag ist Mark, das im Grunde unseren Text hervorheben wird . Also lass es uns benutzen. Öffnen Sie ein Tag mit dem Namen MAR can mark. Richtig? Dies wird dann hervorgehoben. Und das Mark-Tag, das P-Tag. Speichern Sie das jetzt und führen Sie es aus. Wie Sie sehen können, ist Ihr Text hier hervorgehoben. Sehen wir uns ein anderes Tag namens del an. Im Grunde werden Sie das Wort kreuzen , dass Sie darin schreiben werden. Schauen wir uns das mal an. Also fange an zu attackieren, genannt d l del. Und richtig, das ist gelöscht. Und beende das Del-Tag. Und dann das p-Tag. Jetzt spar dir das. Und lass es uns ausführen. Wie Sie sehen können, ist dieser Teil gelöscht. Also da ist eine Linie drauf. Dies sind also die verschiedenen Möglichkeiten, wie Sie Ihren Text formatieren und auf Ihrer Webseite verwenden können. Im nächsten Video werden wir mehr Möglichkeiten sehen, wie Sie Ihren Text formatieren können. Danke, dass du dir dieses Video angesehen hast und übe es, um dich mit den Tags vertraut zu machen. 10. Textformatierung – Textfarbe: Hallo zusammen, Willkommen zurück zum Kurs. In diesem Video werde ich mit der Textformatierung in HTML fortfahren . Öffnen Sie also den Editor für Notepad Plus Plus . Erstellen Sie eine neue Datei. Beginne mit der grundlegenden Struktur einer HTML-Seite. Wir sind also mit der grundlegenden Struktur Ihrer HTML-Seite fertig. Jetzt zeige ich Ihnen, wie Sie Farben für die Texte festlegen , die Sie auf einer neuen Webseite verwenden werden . Lassen Sie mich dafür den Absatz schreiben. Das ist blau, das p-Tag. Jetzt möchte ich die Farbe dieses Textes als blau festlegen. Dafür. Verwenden Sie innerhalb der PayTech das Attribut style. Innerhalb des style-Attributs lege ich die Farbe des Textes fest. Nun beginnen wir mit formulierten Kommentaren und der richtigen Farbe, C-O-L-O-R. Richtige Farbe Ihrer Wahl. Ich setze es auf blau. Also BL ui und dann ein Semikolon geben und dann das invertierte Komma schließen. Speichern wir jetzt diese Datei. Speichern unter, ich nenne es als Textformatierung in Punkt-HTML. Und ich speichere es auf meiner Deckstufe. Also rette es. Jetzt lass es uns ausführen. Jetzt. Wie Sie sehen können, ist der Text, der blau ist, blau gefärbt. Auf diese Weise können Sie die Farbe Ihres Textes festlegen. Sie können jede Farbe Ihrer Wahl verwenden. Lass mich dir einen anderen zeigen. Kopieren Sie einfach den Satz und fügen Sie ihn ein. Jetzt stelle ich die Farbe als vermutlich rot ein. Und ich werde hier schreiben, das ist rot. Speichern Sie es jetzt einfach und führen Sie es aus. Wie Sie sehen können, hat der Text hier eine rote Farbe. Sie können jede Farbe Ihrer Wahl wählen, egal welche Farbe Sie für Ihren Text festlegen möchten, Sie können sie verwenden. Jetzt hat er mehr Absätze mit der Farbe Magenta, Grün geschrieben . Sie können das also auch verwenden. Jetzt habe ich hier mehr Absätze mit verschiedenen Farben wie Magenta, Grün geschrieben . Wenn ich es jetzt starte, kannst du magentafarbene und grüne Farbe sehen. Dies sind also die Grundfarben, mit denen Sie Ihren Text neu einfärben können . Abgesehen von diesen gibt es viele verschiedene Farben, mit denen Sie Ihren Text einfärben können. Jetzt zeige ich Ihnen einen anderen Ansatz zum Einfärben Ihres Textes. Beginne dafür einen weiteren Absatz und schreibe alles. Schließen Sie das p-Tag. Schon wieder. Schreiben Sie diesen Attributstil ist gleich und innerhalb von doppelten Anführungszeichen, oder? C-o-L-o-R färbt eng invertierte Kommas. Jetzt in diesem rechten Hash. Wenn F dann von vier Nullen gefolgt wird, ist dies im Grunde der Hex-Code für eine rote Farbe. Speichern wir es jetzt und führen es aus. Wie Sie sehen können, ist der letzte Text rot eingefärbt. Kehren wir zu unserem Herausgeber zurück. diese Weise können Sie also auch die Farbe Ihrer Texte festlegen. Es gibt zahlreiche Farben , aus denen Sie Ihre Farbe auswählen können. Html bietet 146 Farbschattierungen in Form von Hex-Code, die Sie in Ihrem Text verwenden können. Ich werde Ihnen diese Vorlage aller Farben zusammen mit dem Hex-Code zeigen Vorlage aller Farben zusammen mit , damit Sie sie in Ihrem Text verwenden können , wenn Sie eine HTML-Seite schreiben. Hier ging es also darum, wie man Farben für den Text festlegt. 11. Textformatierung – Textgröße: Hallo zusammen, Willkommen zurück zum Kurs. In diesem Video werde ich beim Öffnen einer neuen Datei mit der Textformatierung in HTML fortfahren . Und fange mit der Grundstruktur von HTML an. Wir sind fertig mit der Grundstruktur der HTML-Seite. Beginnen Sie jetzt im Abschnitt body einen Absatz Text und schließen Sie das p-Tag. In Ordnung, das Stilattribut ist gleich, dann öffne den umgekehrten Handel und richtige Schriftart FIN anders und gib ihm einen Strich. Und dann die richtige Größe. Sie haben eine Spalte und schreiben die Größe der gewünschten Schriftart. Ich nehme an, ich mache 200%. Schließt umgekehrte Kommas. Speichern Sie jetzt diese Datei. Jetzt lass es uns ausführen. Wie Sie sehen können, ist dies ein Absatz mit einer Größe von 200 Prozent. Lassen Sie uns nun zum Vergleich einen weiteren Absatz schreiben und seine Größe ändern. Kopieren Sie einfach diesen Absatz. Und Basisdetail. Und Dieselgröße auf 300 Prozent. Jetzt spar dir das. Lassen Sie uns sehen, was jetzt die Ausgabe ist. Wie Sie sehen können, waren dies meine Texte von 200% Größe und dies ist eine Größe von 300 Prozent. In diesem Fall können Sie also eine variable Größe für Ihren Text festlegen. Lassen Sie uns nun sehen, was passiert, wenn ich den Textgrößen 100 Prozent gebe. Lassen Sie mich jetzt die Textgröße auf 200 Prozent festlegen. Speichere es jetzt. Und sehen wir uns die Ausgabe an. Wie Sie sehen können, handelt es sich um 100-prozentigen Text , der im Vergleich zu anderen viel kleiner ist. 12. Textformatierung - Text Align: Hallo zusammen, Willkommen zurück zum Kurs. In diesem Video werde ich mit der Textformatierung in HTML fortfahren . Öffnen Sie eine neue Datei und beginnen Sie mit der Grundstruktur einer HTML-Seite. Nachdem Sie mit der Grundstruktur im Körper fertig sind , beginnen Sie einen Absatz. Und das p-Tag. Schreiben Sie jetzt wieder das style-Attribut. Und innerhalb von umgekehrten Kommas, rechter Text, gestrichelte Linie und geben Sie einen Doppelpunkt und die rechte Mitte. Dadurch werden Ihre Texte in die Mitte des Bildschirms gesetzt. Speichern wir es jetzt. Lass es uns ausführen. Wie Sie sehen können, ist dies ein Absatz in der Mitte des Bildschirms. Dann können wir den Text auch an der rechten oder linken Seite Ihres Bildschirms ausrichten . erneut Gehen Sie dazu erneut in den Editor und kopieren Sie dann diesen Absatz. Sie müssen nicht noch einmal alles neu schreiben. Und füge es hier ein und ändere die Ausrichtung zum Schreiben. Spar dir das. Jetzt führe es aus. Wie Sie hier sehen können, ist Ihr Text auf der rechten Seite des Bildschirms ausgerichtet. In ähnlicher Weise können Sie dies auf der linken Seite des Bildschirms tun. Wie Sie bereits wissen, befindet es sich standardmäßig auf der linken Seite. Sie können also erwähnen, dass das nach Ihrer Wahl nicht erwähnt wird. Für Mitte und Rechts können Sie jedoch text-align und right center verwenden. In Ordnung. 13. Textformatierung – Font Family: Hallo zusammen, Willkommen zurück zum Kurs. In diesem Video werde ich mit der Textformatierung in HTML fortfahren . Öffnen Sie eine neue HTML-Datei und beginnen Sie mit der Grundstruktur. Schreiben Sie jetzt innerhalb des Körpers einen Absatz. Nachdem Sie mit dem Schreiben des Absatzes fertig sind, beginnen Sie jetzt innerhalb des p-Tags mit dem style-Attribut geben Sie dann gleich als im umgekehrten Handel die richtige Schriftart ein. Dash Familie und gib einen Doppelpunkt 80. Schließen Sie das umgekehrte Komma und speichern Sie die Datei. Speichern Sie es, führen Sie es aus. Wie Sie sehen können, hat mein Text den Stil ADL. Auf diese Weise können Sie Ihrem Text verschiedene Stile zuweisen. Jetzt habe ich hier eine Vorlage für Sie verschiedenen Schriftfamilien , die in HTML verfügbar sind , von Arial bis Times New Roman Georgia. Und zum Impact. Sie können all diese Kacheln ausprobieren und sie dann verwenden, um Ihre Webseite zu gestalten. Ich werde Ihnen in diesem Video einen Teil der Schriftfamilie zeigen . Also lass uns sehen. Jetzt zeige ich Ihnen hier einige der Schriftstile wie Arial, Arial Black, Georgia, Times, New Roman und Impact damit Sie den Unterschied zwischen ihnen verstehen. Speichern wir also diese Datei. Wie Sie sehen können, sind dies die verschiedenen Textstile. Das ist ADL als Arial Black. Dann Georgia, dann ist es Times New Roman. Und das hat Auswirkungen. Sie können jeden Stil aus der Liste der Schriftfamilien, die Sie gezeigt haben, ausprobieren Schriftfamilien, die Sie gezeigt haben, und auf Ihrer Webseite implementieren. Danke, dass du dir dieses Video angesehen hast. Üben Sie dies und gestalten Sie damit Ihre Webseite. 14. Listen - Bestellliste: Hallo zusammen, Willkommen zurück zum Kurs. In diesem Video werde ich Ihnen etwas über Auditlisten beibringen. Öffnen Sie dafür den Notepad Plus Plus Editor bei Ihrem nächsten Job. Und jetzt erstelle eine neue Datei. Beginne nun mit der grundlegenden Struktur einer HTML-Seite. Jetzt, wenn du mit dem Body-Tag fertig bist, richtig? O steht für geordnete Liste. Also fange an zu taggen und endete gleichzeitig. Jetzt können Sie innerhalb dieses Öl-Tags die Artikel auflisten, die Sie auflisten möchten. Jetzt schreibe ich LI und dann meinen ersten Artikel, nehme den ersten Artikel an und schließe dann das LI-Tag. Öffnen Sie jetzt wieder die Beleuchtung und rechts den zweiten Gegenstand. Und schließe es. Sie können auch einen weiteren Artikel hinzufügen. Nun, LI den rechten dritten Gegenstand und schließe das LA-Deck. Das reicht also. Lassen Sie uns das jetzt speichern. Ich werde es auf meinem nächsten speichern. Speichern Sie das und lassen Sie es uns ausführen. Wie Sie hier sehen können, meine Artikel, wir haben gerade mit 12 Einträgen nummeriert, da es sich um eine geordnete Liste handelt. Die Liste enthält also Audio , das 123 in einer Sequenz ist. Jetzt können wir auch die Art der Sequenz ändern , die Sie verwenden möchten. Das ist also die grundlegende geordnete Liste. Um diese ein bis drei Auflistungsreihenfolge zu ändern, was standardmäßig ist. Lassen Sie mich jetzt eine weitere geordnete Liste hinzufügen. Kopieren Sie das und fügen Sie es hier ein. Um nun die Art der Auflistungsreihenfolge zu ändern, können wir das Attribut type innerhalb des Öl-Tags verwenden , rechts TIP. Jeder Typ ist dann gleich und beginnt dann mit umgekehrten Kommas und direkt innerhalb von a. In diesem Fall umgekehrten Kommas und direkt innerhalb von a. In diesem Fall beginnt meine Liste mit Großbuchstabe A, gefolgt von B, C. Speichern wir sie nun und sehen was ist die Ausgabe. Wie Sie sehen können, wurden meine Elemente aufgelistet und die Reihenfolge ist a, b, c. Auf diese Weise können Sie den Listentyp ändern , den Sie verwenden möchten. Lassen Sie mich das jetzt noch einmal kopieren und sehen wir uns ein paar andere Typisierungen an. Kopieren Sie jetzt diesen Teil und fügen Sie ihn hier ein. Lassen Sie mich jetzt den Typ in Smalley ändern. Lassen Sie uns das speichern und dann lassen Sie es uns ausführen. Wie Sie sehen können, ist der Stiltyp Smalley, gefolgt von B und C. Auf diese Weise können Sie ihn nun stylen. Lassen Sie mich Ihnen jetzt andere Typen zeigen. Fügen Sie das hier noch einmal und lassen Sie mich hier schreiben. Ich speichere das und führe es aus. Wie Sie sehen können, ist meine Liste römischer Zahlenfolge geordnet. Dies sind also die Typen, die Sie in Ihrer Liste verwenden können . Danke, dass du dir dieses Video angesehen hast. Im nächsten Video werden wir etwas über beschreibende Listen erfahren. 15. Listen - Ungeordnete Liste: Hallo zusammen, Willkommen zurück zum Kurs. In diesem Video werde ich Ihnen etwas über Listen in HTML beibringen . Öffnen Sie dazu den Editor Notepad Plus Plus. Erstellen Sie eine neue Datei. Lassen Sie mich Ihnen sagen, dass es in HTML drei Arten von Listen gibt. Geordnete Liste, ungeordnete Liste und beschreibende Liste. Also werden wir diese nacheinander sehen. Beginnen wir mit einer geordneten Liste. Beginne also mit der grundlegenden Struktur einer HTML-Seite. Nachdem du mit dem Schreiben der Grundstruktur innerhalb des Körpers fertig bist , richtig? Du, du wirst für ungeordnete Liste stehen. So müssen Sie gleichzeitig schließen , dass Sie taggen. Jetzt können Sie innerhalb dieses UL-Tags die Liste der Artikel schreiben. Jetzt innerhalb des UL-Tags, rechtes Auge und dann schließen. Jetzt wird alles, was Sie in dieses LI-Tag schreiben , als Liste auf Ihrem Bildschirm angezeigt. Schreiben wir jetzt etwas. Angenommen, der erste Gegenstand, dann wieder den LI-Tag und den zweiten Nacht-Gegenstand. Wie Sie sehen können, müssen Sie nach jedem Gegenstand die Lichttechnik schließen. Was auch immer da ist, wir wollten nicht, dass eine Lichttechnologie Ihr einziger Gegenstand ist. Jetzt können Sie mit dem Hinzufügen des dritten Elements fortfahren. Spar dir das einfach. Jetzt lass es uns ausführen. Ich starte in Firefox. Sie können in jedem Webbrowser Ihrer Wahl starten. Wie Sie hier sehen können, sind meine drei Elemente mit Aufzählungszeichen markiert, und dann können wir auch den Stil der Auflistung der Dinge ändern . Gehen Sie dafür zurück zum Editor und kopieren Sie diesen Teil. Wir müssen es nicht noch einmal schreiben. Geschäft und fügen Sie es ein. Innerhalb dieses Tags werde ich das Attribut style equals verwenden. Dann haben wir keine Anführungszeichen invertiert, oder? auflisten. Stil, Typ. Jetzt gib einen Doppelpunkt und nehme an, richtig, so gut. Und dann enden Sie in dem, was es codiert. Speichern wir das jetzt und führen es aus. Wie Sie sehen können, wird der Stil Ihres Angebots sogenannte Abzählungszeichen geändert. Wird es standardmäßig sein. Und du kannst den Stil auch so ändern. Es gibt also andere Arten von Styling, die wir Ihnen zeigen. Kopieren Sie diesen Teil erneut und fügen Sie ihn ein. Jetzt innerhalb dieses Listenstil-Typs, rechts ZUM Quadrat. Und spar dir das. Wenn Sie es jetzt ausführen, können Sie sehen, dass die untergeordnete Liste Quadrate ist. Sie können Ihre Artikel auch ohne Stil auflisten. Gehen Sie dazu zu Ihrem Editor. Und innerhalb des Stiltyps, richtig? Keine. Und führe es aus. Wie Sie sehen können, ist der Stil keiner. diese Weise können Sie Ihre Artikel mithilfe einer geordneten Liste auflisten. Danke, dass du dir dieses Video angesehen hast. Im nächsten Video werden wir etwas über die Auditliste erfahren. 16. Listen - Beschreibende Liste: Hallo und willkommen zurück zum Kurs. In diesem Video werde ich Ihnen etwas über die beschreibende Liste beibringen . Gehen Sie dazu in den Editor Notepad Plus Plus und erstellen Sie eine neue Datei. Beginnen wir nun mit einer grundlegenden Struktur einer HTML-Seite. Jetzt, wenn du mit dem Body-Tag fertig bist, richtig? D steht für beschreibende Liste und schließt gleichzeitig das Deal-Tag. Innerhalb dieses Deal-Tags können Sie die Listenelemente dafür genau hier schreiben, d t. Und innerhalb dieses, schreiben Sie den Namen des Listenelements. Also schreibe ich zu deinem ersten Artikel und schließe dann die DD DAG. Wenn ich nun dem hinzugefügten Listenelement eine Beschreibung hinzufügen möchte , öffnen Sie das DD-Tag. Schreiben Sie jetzt eine Beschreibung für Ihren Artikel. Ich schreibe hier, nehme an, das ist mein erstes Item, und schließe dann das DD-Tag. In ähnlicher Weise können Sie weitere Artikel hinzufügen. Also öffne das DT-Deck erneut und schreibe dann den zweiten Artikel. Schließen Sie das DT-Tag und öffnen Sie das DD-Tag. Schreiben Sie eine Beschreibung. Und dann näher zu erkennen. Sie können weitere Artikel hinzufügen. Also spare ich es jetzt. Beschreibender list.html Dateiname. Und lass mich das jetzt speichern. Lassen Sie es uns jetzt ausführen. Wie Sie in der Ausgabe hier sehen können, sind die beiden Elemente und mit einer Beschreibung von H. Vielen Dank, dass Sie sich dieses Video angesehen haben. Im nächsten Video werde ich dir etwas über verschachtelte Listen beibringen . 17. Listen - Veresterte Liste: Hallo zusammen und willkommen zurück zum Kurs. In diesem Video werde ich Ihnen etwas über verschachtelte Listen beibringen. Gehen Sie dazu zum Editor Notepad Plus Plus. Erstellen Sie jetzt eine neue Datei. Beginne mit der grundlegenden Struktur einer HTML-Seite. Sobald Sie mit dem Body-Tag fertig sind, richtig? Oh, in dem steht für Auditliste. Also wähle ich eine geordnete Liste als meine übergeordnete Liste aus. Ich werde eine ungeordnete Liste für meine Subliste verwenden. Also der Öltechniker, jetzt in diesem OL-Tag, der erste Punkt Ihrer übergeordneten Liste. Also schreibe ich Punkt eins und starte dann die Subliste. Ich verwende UL für meine Subliste. Schreiben Sie also die Sublistenelemente. Ich werde Unterpunkt eins schreiben. Dann schließe die Lichttechnik und dann rechts. Unterpunkt, um den späteren zu schließen. Eng werden Sie auch tendieren. Nein, du bist fertig mit der Unterliste , die sich darunter befindet, du wirst es markieren. Und Sie müssen auch das LI-Tag schließen, das Sie gleich hier am Anfang des Artikels gestartet haben, warnen Sie, ich möchte es nicht sortieren. Jetzt. Lassen Sie uns einen weiteren Artikel hinzufügen. Kopieren Sie dazu einfach diesen Teil und fügen Sie ihn hier ein. Ich ändere das in Punkt zwei. Und ich behalte das Handgelenk wie zuvor. Also lasst uns das retten. Ich nenne es als verschachtelte Liste dot HTML. Ich spare es mir neben. Speichern Sie das jetzt und führen Sie es aus. Wie Sie hier bei den Artikeln der übergeordneten Liste sehen können, Punkt eins und Punkt zwei. Und innerhalb der Subliste habe ich den Unterpunkt 12. Sie können auch die übergeordnete Liste und die Unterliste ändern. Sie können uns als Ihre übergeordnete Liste und OLS Ihre Unterliste nach Ihrer Wahl verwenden. Sie können also alle möglichen Kombinationen in Ihrer verschachtelten Liste ausprobieren . Sie können auch drei Ebenen einer verschachtelten Liste hinzufügen. Lass mich dir einen zeigen. Dafür. Innerhalb des Unterpunkts eins möchte ich dafür einen weiteren Unterpunkt hinzufügen. Gleich hier. Sie können OLS für Ihre Wahl verwenden. Ich werde UL benutzen. Und ich lege den Typ fest. Angenommen ist gleich, dann rechts, Liste, Stil, Typ. Und dann schreibe quadratisch. Sie können jeden Stil Ihrer Wahl verwenden. Jetzt bist du fertig mit uns. Schließen Sie also das UL-Tag. Und dann innerhalb dieses, rechts, Ihr ItemName. Angenommen, Unterlisten zwei und Punkt eins. Schließ die Lichttechnik. Fügen Sie so viele Artikel hinzu, wie Sie möchten. Nun wieder Unterlisten zu Punkt zwei. Lassen Sie uns jetzt hier aufhören und uns das sparen. Und sehen wir uns die Ausgabe an. Wie Sie sehen können, gibt es drei Ebenen der Subliste. Diese übergeordnete Liste ist die erste Ebene der Unterliste. Und in dieser zweiten Ebene von Unterlisten können Sie so viele hinzufügen, wie Sie möchten. Auf diese Weise können Sie also verschachtelte Listen erstellen. Danke, dass Sie sich dieses Video und schauen Sie weiter, um mehr zu erfahren. 18. Inline CSS: Hallo zusammen und willkommen zurück zum Kurs. In diesem Video werde ich Ihnen etwas über CSS beibringen, das Cascading Style Sheets ist. Css wird für die Gestaltung unserer Webseiten verwendet. Dies wird uns helfen, unsere Webseiten besser zu gestalten. In diesem Video werde ich Ihnen etwas über Inline-CSS beibringen. Also lass uns anfangen. Öffnen Sie den Editor Plus Plus Plus Editor und erstellen Sie dann eine neue Datei. Beginne nun mit der grundlegenden Struktur einer HTML-Seite. Innerhalb des Körperteils, richtig? Einige Elemente. Ich werde H1 schreiben, um eine Überschrift zu geben. Nehmen wir an, meine Webseite ist meine Überschrift. Schließen Sie nun das H1-Tag und fügen wir einen Absatz hinzu. Richtig? Das ist meine Webseite. Also schließe das p-Tag. Nehmen wir nun die Elemente. Jetzt möchte ich, dass meine Hintergrundfarbe gelb ist. Verwenden Sie dazu dieses Attribut namens style and write background, dash, CEO, color, und geben Sie dann einen Doppelpunkt an und schreiben Sie eine beliebige Farbe. Ich schreibe hier zwei gelbe. Sie können jede Farbe verwenden. Und Sie können sogar den Hex-Code verwenden, um die Farbe festzulegen. Jetzt im H1-Tag werde ich Stil schreiben. Und dann gleich, dann schreibe Text, striche eine Linie, dann Doppelpunkt und schreibe CEN DER. Dadurch wird die Überschrift in der Mitte des Bildschirms platziert. Schließen Sie nun das umgekehrte Komma und schreiben Sie innerhalb des p-Tags erneut die Attribute style gleich right, C-O-L-O-R-Farbe. Dies hilft beim Festlegen der Textfarbe. Ich setze die Textfarbe auf Rot. Sie können eine beliebige Farbe wählen. Geben Sie jetzt ein Semikolon und ich schreibe ein weiteres Stilattribut namens Schriftgröße. Also, wenn ein N D Gedankenstrich Isaac E ist haben wir das bereits bei der Textformatierung gelernt . Wir nutzen es wieder für Sie. Geben Sie jetzt die Größe als 200 an. Heiliger. Schauen Sie genau auf das umgekehrte Komma. Und lassen Sie uns das retten. Jetzt führe es aus. Wie Sie sehen können, ist dies meine Überschrift, meine Webseite genannt, die an der Mitte des Bildschirms ausgerichtet ist. Und die Hintergrundfarbe ist gelb, die Absatzfarbe ist rot und ihre Größe beträgt 200 Prozent. Auf diese Weise können Sie die Stile nach Ihren Wünschen manipulieren . Das heißt jetzt Inline-CSS , weil wir das style-Attribut für jedes einzelne Element in derselben Zeile seiner Deklaration schreiben style-Attribut für jedes einzelne . Hier ging es also nur um Inline-CSS. Im nächsten Video werde ich Ihnen etwas über internes CSS beibringen. Danke, dass du dir dieses Video angesehen hast. 19. Interne CSS: Hallo zusammen und willkommen zurück zum Kurs. In diesem Video werde ich Ihnen etwas über internes CSS beibringen. Also lass uns anfangen. Öffnen Sie jetzt den Editor Plus Plus Plus und erstellen Sie eine neue Datei. Beginnen Sie nun mit einer grundlegenden Struktur einer HTML-Seite. Jetzt, wenn Sie innerhalb des Körperabschnitts fertig sind , rechts, einige Elemente. Also schreibe ich H1 und dann meine Webseite. Schließen Sie dann das H1-Tag und schreiben Sie dann einen Absatz. Also lass mich schreiben, das ist meine Webseite. Und dann schließe das p-Tag. Deshalb haben wir die Elemente, Überschriften und Absätze hinzugefügt. jetzt im Kopfbereich Schreiben Sie jetzt im Kopfbereich das Tag Style. Und dann gleichzeitig und angreifen. Jetzt innerhalb des style-Tags. Richtig? Der Körper. Jetzt öffne die Zahnspange und schließe sie. Jetzt in dieser Klammer, rechts, Hintergrund, Strich, Farbe C-O-L-O-R. Und gib das Gelb. Sie können jede Farbe angeben. Jetzt gib uns Semikolon. Dadurch wird die Hintergrundfarbe des Hauptteils Ihrer Webseite grundsätzlich auf Gelb gesetzt . Schreiben Sie jetzt jeden einzelnen. Erwähnt das Element , das Sie stylen möchten. Und dann schreibe Text. Hallo, Elaine. Und dann rechts mittig. Und gib uns Semikolon. Das war unser Styling für unsere Überschrift H1. Nun zum Absatz rechts P. Und dann offene Klammern. Und innerhalb der Klammer rechts, C-O-L-O-R-Farbe. Und dann gebe ich Rot als meine Farbe. Und dann Schrift, Strichgröße. Dann ein Doppelpunkt. Und ich gebe 200 Prozent. Geben Sie dann ein Semikolon und schließen Sie die Klammer. Speichern wir nun diese Datei. Ich speichere es auf meiner Deckstufe. Also gib ihm einen Namen. Jetzt. Ich gebe interne Punkte Punkt HTML. Speichern Sie das jetzt und lassen Sie es uns jetzt ausführen. Wie Sie sehen können, ist die Hintergrundfarbe meiner Webseite gelb. Die Überschrift befindet sich in der Mitte, und die Farbe des Absatzes ist rot und hat eine Größe von 200 Prozent. Diese Webseite ähnelt der Webseite , die wir in unserem Inline-CSS-Video entworfen haben, in dem wir das style-Attribut verwendet hatten , um die einzelnen Elemente zu stylen. Aber hier verwenden wir das style-Tag. Und innerhalb des style-Tags schreiben wir den Elementnamen , den wir stylen möchten, und den spezifischen Stil, den wir darauf anwenden möchten. In Inline-CSS müssen Sie den Stil für jeden einzelnen Absatz oder jedes einzelne Element , das Sie verwenden, erwähnen Absatz oder jedes einzelne . Aber hier reicht es aus, nur das Element mit dem Namen P zu deklarieren , um alle Absätze zu formatieren , die Sie auf derselben Webseite verwenden werden. Dies gibt internes CSS und H über Inline-CSS. Hier ging es um einen Einblick in internes CSS. Danke, dass du dir dieses Video angesehen hast. Im nächsten Video erfahren Sie mehr über externes CSS. 20. Externe CSS: Hallo zusammen und willkommen zurück zum Kurs. In diesem Video werde ich Ihnen etwas über externes CSS beibringen. Also lass uns anfangen. Gehen Sie jetzt zum Editor Plus Plus Editor und erstellen Sie eine neue Datei. Ich beginne mit der grundlegenden Struktur einer HTML-Seite. Sobald Sie innerhalb des Body-Abschnitts an einer Überschrift fertig sind , füge ich H1 hinzu und schreibe meine Webseite. Schließen Sie das H1-Tag und fügen Sie ein weiteres Element namens P hinzu, nämlich Absatz. Und schreibe zwei Absätze mit dem Titel Dies ist meine Webseite. Schließen Sie nun das p-Tag und speichern Sie diese Datei. Ich nenne es als externes CSS-Punkt-HTML. Erstellen Sie jetzt einen neuen Ordner. Ich nenne es als Übungs-HTML. Sie können einen beliebigen Namen angeben. nun in diesem Ordner Speichern Sie nun in diesem Ordner diese Datei namens externes CSS-Punkt-HTML. Erstellen Sie jetzt eine weitere Datei. Und darin verstößt der Code für das Styling. Also lass mich den Namen des Elements schreiben und dann wieder runter zur Farbe gelb, Semikolon. Schließe die Klammer. Schreiben Sie dann erneut den Namen des Elements, das H1 ist. Und dann schreibe Text ausrichten, zentrieren. Gib ein Semikolon. Dann schreibe b. Und dann C-O-L-O-R-Farbe, die rot ist, und dann Schriftgröße. Im Grunde schreibe ich das gleiche Beispiel für Sie, damit Sie verstehen, dass dieser Code unabhängig von der Art von CSS auf genau die gleiche Weise ausgeführt wird. Speichern Sie jetzt diese Datei. Nennen wir es style sheet, STI Ellie, SH, WE D. Und vergessen Sie diesen Punkt nicht css. Denken Sie jetzt daran, dass Sie die CSS-Datei in demselben Ordner speichern müssen , den Sie erstellt haben , um externes CSS-Punkt-HTML zu speichern. Also in der Praxis HTML, das die externe CSS-Punkt-HTML-Datei enthält. Jetzt speichern wir im selben Ordner stylesheet dot CSS. Speichern Sie das jetzt. Und zurück zum externen CSS-Punkt-HTML. Jetzt, im Kopfbereich, richtig? In kann verlinken. Dann ist HREF gleich und gibt dann den CSS-Dateinamen an , der Stylesheet-Punkt-CSS ist, und geben Sie ihre Beziehung an, die ihr untergeordnetes Element ist. Speichern Sie jetzt diese Datei. Lassen Sie es uns jetzt ausführen. Wie Sie sehen können, erhalten wir genau die gleiche Tonhöhe die wir mit externem CSS entworfen haben. Hier ging es also um einen Einblick in externes CSS. Es gibt eine Menge Stile, die du in CSS lernen kannst. Also bleib dran auf den Kurs. 21. Einführung des CSS: Hallo zusammen und willkommen zurück zum Kurs. Sie müssen sich also jetzt fragen , warum ich Ihnen eine Raumfahrt zeige. Ja. Nun, Sie werden gewählt, um zu wissen, dass dies Ihr Projekt sein wird , und ich werde Ihnen beibringen, wie Sie dieselbe Wiederholung durchführen können. Sie können diese dynamische Webseite erstellen, indem Sie nur CSS verwenden. Nehmen Sie sich also etwas Zeit und schauen Sie sich das nächste Video an , in dem ich Ihnen beibringen werde , wie Sie dieselbe Website erstellen. 22. CSS Hands-on: Hallo zusammen, willkommen zurück zum Kurs. Inzwischen haben wir viele CSS-Stile gelernt , mit deren Hilfe wir unsere Websites gestalten können. Jetzt ist es Zeit für mehr Spaß. Und um einige Animationen mit CSS zu machen. Gehen Sie dazu Editor Notepad Plus Plus und erstellen Sie dann eine neue Datei. Sobald Sie fertig sind, beginnen Sie mit der Grundstruktur eines HTML-Beats. Also bin ich fertig mit der Grundstruktur. Und ich habe auch eine Überschrift hinzugefügt, die besagt, meine Wiederholung. Jetzt ist es an der Zeit, dass wir dafür eine Abweichung schaffen , richtig, Dave. Und dann das Div-Tag. Jetzt innerhalb dieses Div-Tags ist ID gleich und dann Leerzeichen. Dies wird nun die gesamte Aufteilung der Webseite sein. In diesem Raum brauchen wir ein paar Sterne. Erstellen Sie dazu eine weitere Abweichung und schreiben Sie die Klasse als Sterne und schließen Sie dann das div-Tag. In ähnlicher Weise werden wir bei mehr Div-Tags der Klasse In class den CSS-Code schreiben, um Sterne für diese Einheit hinzuzufügen, um Ihrer Raumabweichung zahlreiche Aufgaben hinzuzufügen. Also habe ich ein paar Spalten hinzugefügt, sind Einteilungen von Sternen. Ich muss eine externe CSS-Datei erstellen , um sie mit dieser HTML-Seite zu verknüpfen. Jetzt rechter Link. Und dann H ref, was für Hike-Hyperlink-Referenz steht. Und dann schreibe den Namen der CSS-Datei, die du erstellen wirst. Also nenne ich es S, Star Dot CSS. Und richtig, Beziehung ist gleich Stylesheet. Dies ist für Sie zu verstehen, dass es sich im Grunde genommen um ein Stylesheet handelt. Also hier sind wir fertig. Speichern Sie jetzt diese Datei. Denken Sie daran, dass Sie einen Ordner erstellen und beide Dateien im selben Ordner speichern müssen. Erstellen Sie dazu beide Dateien im selben Ordner eine neue Datei. Und Lipidrechte Frieden wie der Name des Ordners. Sie dann in diesem Ordner Speichern Sie dann in diesem Ordner diese HTML-Datei. Also gib ihm einen Namen. Ich nenne es S space dot HTML. Speichern Sie das jetzt und erstellen Sie jetzt eine neue Datei. In dieser Datei schreiben wir jetzt unseren CSS-Code dafür. Fangt mit der Leiche an. Also lass mich anfangen, den Körper zu stylen. Jetzt in diesem Körper, richtig? Die Farbe, die Hintergrundfarbe für uns wird es schwarz sein. Also richtiger Hintergrund. Und dann gib den Hex-Code für Black Witches Hash Triple 0. Jetzt habe ich die Schriftfamilie als beliebig hinzugefügt. Wie Sie das Freebies-Video sehen können, ist der Text in Form eines anderen Stils. Das liegt also an der Arbitrage. Sie können also diesen Stil oder einen anderen Stil Ihrer Wahl angeben. Also verwende ich diesen Stil hier. Jetzt. Ich schreibe nicht jeden einzelnen Code Zeile für Zeile, weil es auch für Sie sehr zeitaufwändig und langweilig sein wird. Dafür schreibe ich den Doppelpunkt als Ganzes und erkläre jede einzelne Zeile, in der ich das geschrieben habe. Das ist also H1, was für unsere Überschrift ist. Und ich habe die Position auf absolut gesetzt. Hier ist der Index, das ist der Index. Und dann oben links, was den Rand tatsächlich von oben und links ergibt . Es wird den Text hauptsächlich in der Mitte ausrichten , weil wir 50-50 Prozent von oben und links angegeben haben . Und ich hatte nur eine Breite. Und das ist die Farbe hat 011. Sie können es in Ihren Hex-Farbcodes überprüfen. Jetzt ist meine Schriftgröße fünf EM. Sie können es auch ändern. Jetzt. Der Text wird wieder zentriert und am nächsten Schatten ausgerichtet. Dies ist ein weiteres ganz besonderes Attribut mit Hilfe von Phase, mit dem Sie Ihren Texten Schatten geben können. Das ist also Tech Shadow, und das sind die Farben des Schattens, die Sie verwenden können. Sie können es also so lassen, wie es ist, oder Sie können es entsprechend dem Hex-Code ändern. Ich habe hier geschrieben hat Platz, da unsere ID auf der Abweichung basiert. Sie haben also Hash-Spezies geschrieben und die Klassen tun es. Dafür habe ich Punktraum geschrieben. Denken Sie also daran für Jod in den rechten Hash und für die Klasse indirekten Punkt. Nun, hier sind einige Attribute, die Überlauf und Position oben, unten sind. Diese dienen grundsätzlich dem Ausrichten. Diese gelten im Grunde genommen für Margen, und die Position ist absolut. Und hier ist ein weiteres Attribut namens overflow. Und es ist versteckt, weil es zahlreiche Sterne gab. Und dann müssen Sie es ausrichten und jeweils auf denselben Bildschirm setzen. Dieses Attribut hilft uns also, den 3D-Effekt zu erzielen. Das ist eine Menge Sachen. Lassen Sie mich Ihnen eins nach dem anderen erklären. Also hier ist Punktsterne das , was die Division mit der Klasse macht. Und dann legen wir das Hintergrundbild fest. Radialer Farbverlauf, ein Attribut, mit dem der Verlauf des Hintergrunds festgelegt werden kann . Und dann sind dies die RGB-Ständer für Rot-, Grün- und Blauwert. Und dann können Sie die Werte hier angeben. 00 bedeutet also, dass es auf Schwarz gesetzt wird. Und dann sind diese für die Sterne, für die wir eine Region mit kleinsten Pixeln erstellen werden . Also hier sind die. Jetzt wiederholt sich der Hintergrund. Die Sterne werden also zahlreich sein und es wird sich auf dem Bildschirm verteilen. Also müssen wir es wiederholen. Und dann ist hier die Hintergrundgröße. Und dann die Animation. Zurück. Dann. Dann mit einer Animation, hier sind es fünf Sekunden und endlich, wie Sie sehen können, bewegen sich die Sterne und zoomen in den Raum hinein. Das wird uns also helfen, diesen Effekt zu erzielen. Nun, hier kommen Punktsterne und dann gib Kind eins ein. Wie Sie sehen können, gibt es viele Abweichungen mit dem gleichen Namen wie Abenddämmerung. Das sind also im Grunde genommen das Kind. Dafür habe ich das Style-Ding benutzt. Jetzt. Ähnlich können Sie hier der Hintergrundposition angeben , wie viel fünf sie sein werden. Also wird dieses Kind sehr nahe sein. Es sind also 50 Prozent. Dann können Sie sehen, dass es 20%, 60, und dann geht es zu negativ, das sind minus 20% und minus 30%. Das wird uns also helfen, die 3D-Schleife zu bekommen. jetzt, da wir vier Abteilungen angegeben hatten Lassen Sie mich jetzt, da wir vier Abteilungen angegeben hatten, auschecken. Ja, wir hatten vier Abteilungen von Sachen gegeben. Also haben wir hier für ein Kind verwendet. Dies ist jetzt für die Zoom-Funktion und das Gegenteil ist auf 0 gesetzt. Und dann das Animations-Timing, das gegeben ist. Das wird also im Grunde helfen , die Sicht darauf zu bekommen , dass wir uns in den Raum bewegen. Das wird also sein, die Summenfunktion, wird sich im Grunde um all diese kümmern. 0% sind für die ersten paar, wenn wir nicht gezoomt haben. Und dann fünfundachtzig Prozent , wenn wir in diesem Stück viel angenommen haben und dann 100%. Das wird uns also im Grunde den Effekt geben in den Weltraum zu gelangen und die Sterne bewegen sich von uns weg. Wenn Sie fertig sind, speichern Sie das. Denken Sie daran, es in demselben Ordner zu speichern , in dem Sie Ihr vorheriges gespeichert haben. Ich schätze, ich habe es in Ruhe gerettet. Es ist in meinen Decks , meinen Ordner zu benutzen. Speichere es jetzt. Also musst du den Namen als Star Dot CSS angeben. Nein. Schau es dir an, dass es Star Dot CSS war. Ja. Wir sind fertig mit unserem Code. Jetzt. Gehen wir zu Space Dot HTML und lesen es von Ihnen und sehen uns die Ausgabe an. Sie sehen also, wir haben unsere Projekte erfolgreich erstellt. Dieser Hintergrund gibt uns die Fülle von Reisen im Weltraum. Also das ist echt cool und du kannst es bestimmt ausprobieren. Gehen Sie zu Ihrem Editor Plus, Plus Editor und schreiben Sie diesen Code und zeigen Sie Ihren Freunden das, was Sie in CSS gelernt haben. Vielen Dank, dass Sie sich dieses Video und bleiben Sie auf dem Laufenden, um mehr zu erfahren. 23. Javascript- Einführung: Hallo, und willkommen zurück zum Kurs. Lassen Sie uns also JavaScript kennenlernen. Was ist JavaScript und was ist der Nutzen davon? Nun, JavaScript wird verwendet, um die Webseiten, die Sie erstellen, interaktiv zu machen die Webseiten, die Sie erstellen, und sie besser zu verstehen. Nehmen wir ein Beispiel. Jetzt. Dies ist im Grunde eine Webseite, die von mir entworfen wurde. Es ist ein Anmeldeformular. Also werde ich es benutzen, um dir zu zeigen , wie JavaScript funktioniert. Also lass mich das ganze Zeug füllen. So können Sie den Namen spüren und die Agenda und Dinge festlegen. Jetzt können Sie hier das geschriebene Passwort sehen. Nehmen wir an, ich möchte ein Passwort vergeben, 1234. Jetzt schreibe ich in der Bestätigung des Passworts ein anderes Passwort. Ich schreibe 2345. Jetzt lass mich nachsehen. Es heißt, dass das Passwort nicht übereinstimmt. Jetzt ändere ich das Bestätigungskennwort wieder in 1234. Klicken Sie jetzt erneut auf Prüfen. Jetzt heißt es, dass das Passwort übereinstimmt. Also machen wir das mit Hilfe von JavaScript. Dies ist ein kleines Beispiel für die Nützlichkeit von JavaScript. In den nächsten Videos erfahren Sie also mehr über JavaScript und sein Dienstprogramm. Und dadurch sind Sie ausreichend ausgestattet, um Ihre Webseiten interaktiv zu gestalten. 24. So erstellen Sie eine Warnung: Hallo zusammen und willkommen zurück zum Kurs. In diesem Video werde ich Ihnen zeigen, wie Sie Warnmeldungen auf Ihren Webseiten einrichten. Also lass uns anfangen. Gehen Sie jetzt zum Editor Plus Plus Editor und erstellen Sie dann eine neue Datei. Beginne nun mit der grundlegenden Struktur einer HTML-Seite. Ich bin mit der Grundstruktur fertig und habe auch einen Absatz hinzugefügt. Da steht mein VP8. Jetzt in der Körpermarke, richtig? Ein, Laden ON oder AD beim Laden ist gleich. Dann starte dein umgekehrtes Komma und schreibe e o t, was eine Warnung ist. Und dann gib einen Text hinein. Angenommen, willkommen. Dann schließe die Klammer, gib uns ein Semikolon und schließe die umgekehrten Kommas. Speichern Sie jetzt diese Datei. Ich spare es auf meinen Deckkram. Also lass es mich einen Namen geben. Punkt HTML alarmieren. Spar dir das. Lassen Sie es uns ausführen. Wie Sie sehen können, lautet diese Warnmeldung Willkommen. Und es wird standardmäßig mit der Schaltfläche Okay geliefert. Klicken Sie jetzt auf OK und Sie werden es nie auf Ihre Seite bringen. Dieses Alert-Box-Spiel, sobald wir es zu unserer Webseite navigieren , weil wir es beim Laden verwendet haben, wodurch das Licht angezeigt wird sobald die Seite geladen wird, gibt es eine andere Möglichkeit, eine Ladung zu deklarieren dafür die JavaScript-Funktion innerhalb des Kopfbereichs, richtig? Drehbuch. Was auch immer Sie in das script-Tag schreiben, das ist im Grunde Ihr JavaScript-Code. Also Endo script tag und schreibe jetzt eine Funktion, wenn UNC, T-I-O-N-Funktion, und gib ihr einen Namen. Angenommen mein Alarm. Jetzt gib Plätze. Beginne die geschweiften Klammern endeten und innerhalb dieses geschweiften Klammerabschnitts, richtig? In IoT-Warnung. Und dann deine Nachricht mit der Aufschrift „Willkommen“. Dann gib ein Semikolon. Anstatt die Funktion zu schreiben, schreibe einfach meinen Alert und gib ein Semikolon. Speichern wir das jetzt und lassen uns laufen und sehen, was ausgegeben wird. In ähnlicher Weise ist hier das Warnungsfeld. Da steht „Willkommen“. Hier ging es nur um Alarm. Im nächsten Video erfahren Sie, wie Sie Ihre Prompt-Funktion schreiben. Bleiben Sie also auf dem Laufenden und lernen Sie weiter. 25. So erstellen Sie einen Prompt: Hallo und willkommen zurück zum Kurs. In diesem Video werde ich Ihnen etwas über Aufforderungen beibringen. Also lasst uns ohne weitere Umschweife loslegen. Gehen Sie jetzt zum Editor Plus Plus Editor und erstellen Sie dann eine neue Datei. Beginne nun mit der grundlegenden Struktur einer HTML-Seite. Also bin ich fertig mit der Grundstruktur. Und ich habe auch einen Absatz hinzugefügt, den wir sehen, ist meine Webseite. nun im head-Bereich Lassen Sie uns nun im head-Bereich das Tag namens script schreiben und gleichzeitig das Tag schließen. jetzt innerhalb des script-Tags Schreiben Sie jetzt innerhalb des script-Tags die Funktion und geben Sie ihr einen Funktionsnamen. Angenommen, meine Aufforderung und starte dann die geschweifte Klammer und schreibe V-A-R. Var steht in JavaScript für variable, es ist ein Schlüsselwort zum Deklarieren einer Variablen. Mein Variablenname ist name, und dann gib gleich und dann prompt. Im Grunde nimmt prompt eine Eingabe vom Benutzer entgegen. Wir verwenden also eine Variable, die die Eingabe speichert , die der Benutzer geben wird. Lassen Sie uns nun in ihnen dem Benutzer eine Frage stellen. Also Schnaps, wie heißt du? Und jetzt zeigen wir dem Benutzer den Namen an. Also für das richtig, wachsam. Dann, richtig, willkommen. Verketten Sie den String und reifen Sie. Gib ein Semikolon und eine geschweifte Klammer. Jetzt innerhalb des Körperabschnitts, direkt bei Last gleich. dann in umgekehrte Schichten Schreiben Sie dann in umgekehrte Schichten den Namen Ihrer Funktion, was meine Aufforderung ist. Gib ein Semikolon. Speichern wir jetzt diese Datei. Ich speichere es auf meinen Decks, um einen Dateinamen zu geben. Angenommen, Punkt HTML auffordern, und speichern Sie dies dann. Lassen Sie uns jetzt rennen und uns die Ausgabe ansehen. Wie Sie sehen können, ist hier die Eingabeaufforderung mit der Aufschrift Was ist Ihr Name. Also richtig, hier einen Namen zu geben. Und dann klicke auf Okay. Das ist also die Warnmeldung der Aufschrift Willkommen und Ihr Name. Im Grunde genommen besteht die Aufforderung also darin, eine Eingabe vom Benutzer mithilfe von JavaScript zu erhalten. Und die Warnung besteht darin, dem Benutzer eine zufällige Nachricht zu zeigen. In diesem Alarmfall der Benutzer keine Eingabe vornehmen. Er oder sie kann nur die angezeigte Nachricht sehen . Also danke, dass ihr euch dieses Video angesehen habt, Leute, bleibt auf dem Laufenden, um mehr darüber zu erfahren , wie man verschiedene Funktionen in JavaScript implementiert. 26. So implementieren Sie Bestätigen: Hallo zusammen, und willkommen zurück zum Kurs. In diesem Video werde ich Ihnen etwas über Confirm beibringen. Also lass uns anfangen. Gehen Sie nun vom Bildschirm zum Editor Plus, Plus Editor und erstellen Sie dann eine neue Datei. Beginne mit der grundlegenden Struktur einer HTML-Seite. jetzt im Kopfbereich Schreiben Sie jetzt im Kopfbereich das Tag namens script und endete gleichzeitig. jetzt innerhalb des script-Tags Schreiben Sie jetzt innerhalb des script-Tags eine Funktion namens my confirm. Da wir lernen werden , bestätigen zu können, dass Sie Ihrer Funktion einen beliebigen Namen geben können. Jetzt. Starten Sie Ihre geschweifte Klammer und darin, rechts, variabel. Angenommen, c ist gleich konform. Und schreibe eine Gleichung. Angenommen, gefällt dir mein schwacher Beat? Schließen Sie nun die Klammer und geben Sie ein Semikolon. Diese Variable c nimmt also das Feedback des Benutzers entgegen, das er oder sie durch diese Bestätigung geben wird, er oder sie durch diese Bestätigung geben wird und überprüft dann, was der Benutzer eingegeben hat, indem er schreibt, wenn c gleich ist , gleich wahr, dann gib eine Nachricht durch einen Alarm mit der Aufschrift „Danke“. Und wenn das Feedback falsch ist, dann richtig. Geben Sie dann eine Warnung mit der Aufschrift „ Entschuldigung für die Unannehmlichkeiten“ aus. Und dann schließe Klammer, Semikolon, schließe die geschweifte Klammer von L schließe die geschweifte Klammer aus der Mike-Bestätigungsfunktion. Und dann innerhalb des Body-Tags, rechts, bei Last gleich. Und dann der Name deiner Funktion , der mir entspricht. Und dann gib ein Semikolon und einen genaueren invertierten Code. Wir sind fertig. Jetzt speichern wir diese Datei. Speichern Sie es, geben Sie ihm einen Namen. Angenommen, Sie können Punkt-HTML bilden und dieses speichern. Lassen Sie es uns jetzt ausführen. Also die Basen magst du meine Webseite und sagst OK, und dann sag Danke. Also lass mich das neu laden. Was passiert, wenn wir nein sagen, stornieren. Stornieren. Und dann heißt es, entschuldige mich für die Unannehmlichkeiten. Auf diese Weise können Sie dem Benutzer eine Nachricht zeigen und eine gültige Eingabe als Feedback von ihm oder ihr annehmen. Danke, dass du dir dieses Video angesehen hast. Bleiben Sie auf dem Laufenden. Wir sehen uns beim nächsten Mal. 27. Implementierung von externen Javascript: Hallo zusammen und willkommen zurück zum Kurs. In diesem Video werde ich Ihnen etwas über externes JS beibringen. Also hier schreiben wir den JavaScript-Code in eine andere Datei und verknüpfen ihn dann mit der ursprünglichen HTML-Datei. Also lass uns anfangen. Gehen Sie jetzt zum Editor Plus Plus Editor und erstellen Sie dann eine neue Datei. Beginne nun mit der grundlegenden Struktur einer HTML-Seite. Sobald Sie mit der Grundstruktur fertig sind, gehen Sie in den Kopfbereich und schreiben Sie ein Skript. Schließen Sie dann gleichzeitig das script-Tag. nun innerhalb des Skripts Verwenden Sie nun innerhalb des Skripts das Attribut SRC, das für source steht. Da wir also eine externe Datei mit dieser HTML-Datei verknüpfen werden, müssen Sie den Namen dieser externen Datei angeben. Ich gebe den Namen dieser Datei als externen Punkt ts an. Jetzt müssen Sie im Abschnitt body den Namen der Funktion angeben , die Sie in die externe Punkt-JS-Datei schreiben möchten. Also lass es mich schreiben. In Ordnung, onload ist gleich und gib den Namen der Funktion an. Schätze Spaß. Und dann gib ein Semikolon und schließe die Gerichte. Also sind wir jetzt fertig lass uns diese Datei speichern. Denken Sie also daran, dass Sie diese Datei in demselben Ordner speichern müssen , in dem wir die Datei namens external dot js speichern werden. Lassen Sie uns also einen neuen Ordnerindex erstellen , um einen Namen zu geben. Angenommen HTML. Gehen Sie nun in diesen Ordner und speichern Sie Ihre Datei Vornamen in Ihrer Datei. Angenommen, externes js dot HTML. Speichern Sie jetzt diese Datei. Es ist vollbracht. Jetzt. Erstelle eine weitere Datei, oder? Funktion Und geben Sie den Namen der Funktion an, der dem Namen ähnelt , den wir im Abschnitt body geschrieben haben. Schauen wir uns also an, dass wir geschrieben haben, dass der Funktionsname Spaß macht. Also richtig, lustig. Und dann starte die lockige Klammer. Und in diesem Abschnitt schreiben Sie den rechten Dokumentpunkt. Dadurch wird im Grunde eine Meldung auf dem Bildschirm selbst angezeigt. Lassen Sie uns also einen beliebigen Text geben. Angenommen, willkommen auf meiner Webseite. Geben Sie ein Semikolon und schließen Sie die geschweifte Klammer. Speichern Sie diese Datei nun in demselben Ordner, in dem wir das externe GAS-Punkt-HTML gespeichert hatten. Geben Sie diesen Dateinamen als extern an. Punkt j ist, da es sich um eine JavaScript-Datei handelt. Also nicht uns. Nun sehen Sie, wir hatten die Quelle hier als externen Punkt js angegeben. Das ist also unsere JS-Datei für externe Knoten. Das wird es also im Grunde verbinden. Lassen Sie es uns nun von hier aus ausführen und sehen, was die Ausgabe ist. Wie Sie hier sehen können, steht es geschrieben: Willkommen auf meiner Webseite. Aber wir haben hier keinen Absatz verwendet, um das zu schreiben. Willkommen. Im Grunde genommen nimmt es das von externen Punkt-Js. Auf diese Weise können Sie Ihren JavaScript-Code in eine separate Datei schreiben und ihn dann mit Ihrer Haupt-HTML-Datei verknüpfen. Vielen Dank, dass Sie sich dieses Video angesehen haben, und bleiben Sie dran , um mehr zu erfahren. 28. Javascript Number Game Project: Hallo zusammen, willkommen zurück zum Kurs. Nachdem wir das JavaScript gelernt haben, müssen wir ein Projekt dazu machen. Denn das einfache Erlernen einiger Codes hilft Ihnen nicht , es sei denn, Sie setzen es in die Tat um. Ich hoffe, dass Sie alle mit den Steuern und Codes von JavaScript vertraut sind . Das Projekt, das wir machen werden , ist also ein Spiel mit Zahlen. Lassen Sie mich Ihnen jetzt zeigen, wie es funktioniert. Wir werden zu unserem Spiel Pfirsich verwiesen. Und dann heißt es, dass der Computer eine Zahl zwischen 1200 gewählt hat und versucht, die Zahl zu erraten. Also lass mich eine Zahl zwischen 1100 nehmen, ich schätze 65. Es heißt, dass die Zahl größer ist, also muss ich eine kleinere Zahl eingeben. Also nimm an für t. Und dann heißt es größer. Lass mich jetzt 20 geben. Es ist kleiner. Es ist also zwischen 2139. Also lass mich 30 geben. Ja, ich habe die richtige Antwort im Fokus. Also ist es nicht cool? Jetzt im nächsten Video lernst du, dieses Spiel zu codieren. 29. Javascript Number Game Project Hands-on: Hallo zusammen und willkommen zurück zum Kurs. In diesem Video werden wir ein Projekt durchführen, das auf unseren Erkenntnissen in JavaScript basiert. In diesem Video baue ich im Grunde ein Spiel. Ja, das hast du richtig gehört? Und ich werde dieses Spiel mit JavaScript-Codes machen. Dieses Video wird also etwas länger dauern. Also ist es besser. Sie haben etwas Zeit, die Sie kennen, um zu lernen, wie man das JavaScript-Projekt erstellt. Gehen Sie jetzt zum Editor von Notepad Plus Plus und erstellen Sie dann eine neue Datei. Beginnen Sie nun mit einer grundlegenden Struktur einer HTML-Seite. Also bin ich fertig mit der Grundstruktur. Der Titel meiner Webseite ist Zahlenspiel. Lassen Sie mich nun das Tag script schreiben und es gleichzeitig schließen. Also werden wir innerhalb des Script-Tags den JavaScript-Code für unser Spiel schreiben, wie Sie im vorherigen Video gesehen haben. In diesem Spiel wählt der Computer eine Zahl zwischen 1100 und der Benutzer muss raten, welche Zahl er ausgewählt hat. Jetzt gibt der Benutzer eine Eingabe und dann reagiert der Computer mit weniger darauf, wenn er kleiner oder größer als die von ihm gewählte Zahl ist . Auf diese Weise wird ermittelt, in wie vielen Fällen der Benutzer die richtige Antwort gibt. Dafür müssen wir einige Variablen deklarieren. Deklaration einer Variablen namens target und einer anderen Variablen namens target one. Starte jetzt die Funktion für dein Spiel. Also gebe ich den Namen als Spiel an. Und dann öffne und schließe die geschweifte Klammer. In dieser Funktion, rechts, entspricht target nun dem mathematischen Punktzufall in 200. Was ich getan habe, ist, dass dieser Mathe-Punkt-Zufall eine inverse Funktion in JavaScript ist eine inverse Funktion in JavaScript die einen Wert zwischen 01 zurückgibt, da der Computer eine Zahl von eins bis 100 auswählen soll . Also multiplizieren wir hundert Jahre. In diesem Ziel speichert der Computer also den Wert, den er ausgewählt hat. Nun wird dieser Zielwert, wenn Math.random 0 zurückgibt, dann wird er 0. Also haben wir uns einfach nicht gewünscht, da wir uns für eins bis 100 entscheiden. Dafür müssen wir hier also ein Plus eins machen. Also richtig, nimm eins gleich Mathe. Aber fließen. Geben Sie dann das Argument target und schreiben Sie dann plus eins. Ich schlage vor, dass Sie jeden Schritt sehr klar verstehen , da es nicht um Entwerfen geht, sondern um reine Programmierung. Nachdem der Computer nun eine Zahl in dieser Zielvariablen ausgewählt hat , wollen wir den Benutzer nun fragen , ob wir eine Zahl von eins bis 200 ausgewählt haben. Ich schätze, diese Zahl hat eine Variable namens finished deklariert, die eine boolesche Variable sein wird. Also schreibe ich falsch. Dies zeigt also grundsätzlich an, ob der Benutzer die richtige Antwort erraten hat oder nicht. Wenn diese fertige Variable wahr wird, hat der Benutzer die richtige Antwort. Bis dahin müssen wir also jetzt den Zähler erhöhen, oder? Richtig. Dann noch nicht fertig. Während die fertige Variable also nicht wahr ist, wird sie diese Schleife weiter ausführen. Jetzt müssen Sie innerhalb einer Weile die Eingabe des Benutzers entgegennehmen. Dafür müssen wir also eine andere Variable nehmen. Angenommen, Sie raten die Unterstrich-Eingabe und schreiben Sie dann Text. Und dann variable Guess-Eingabe. Ich werde Ihnen erklären, warum ich zwei Variablen verwendet habe , um Eingaben des Benutzers in gewisser Weise entgegenzunehmen. Also warte auf diesen Moment. Jetzt, genau hier. Raten Sie, dass der Eingabetext gleich ist, und schreiben Sie dann Schreiben Sie darin die Nachricht, die Sie dem Benutzer zeigen möchten . Also schreibe den Computer, hat eine Zahl zwischen 100 gewählt und dann schreibe, versuche es. Um die Zahl zu erraten. Das ist also die Nachricht, die Sie Ihrem Benutzer zeigen werden. Jetzt wissen wir, dass die Eingabeaufforderung eine Eingabe vom Benutzer entgegennimmt. Die Eingabe wird grundsätzlich im Text für die Gaseingabe gespeichert. Diese Eingabe hat nun die Form einer Zeichenfolge, aber wir benötigen eine Zahl als Eingabe. Dafür müssen wir diese Zeichenfolge in eine Zahl umwandeln . Deshalb habe ich zwei Variablen genommen, Eingabe vergessen. Jetzt, stimmt's? Guess input ist gleich dann parse int plus n ist eine Funktion , die hilft, diese Zeichenkette in die Ganzzahl zu konvertieren. Jetzt wird direkt im Argument Eingabetext angezeigt , der unsere gewünschte Zeichenfolge ist. Sobald der Benutzer seine Eingabe eingegeben hat , müssen wir die Schätzung erhöhen. Dafür. Nehmen Sie eine Variable namens Vermutungen. Initialisiere es auf 0. Nun, sobald der Benutzer die Gäste eingibt, rät der inkrementierte Wert, Entschuldigung. Jep. Was passiert nun, wenn der Benutzer keinen Wert eingibt? Also dafür wird das Programm oder das Spiel dafür beendet, oder? Wenn nicht, müssen Sie für die Beendigung den fertigen Fehler als wahr festlegen. Es ist mit Ferrit fertig ist gleich wahr. Das war also für eine Null-Eingabe des Benutzers. Wenn der Benutzer eine gültige Eingabe gibt, dann schreibe sonst. Und dann öffne die geschweifte Klammer. Und innerhalb dieses, rechts fertig ist gleich, dann Scheck schreiben. Also schreiben wir eine Funktion namens check, die die Eingabe überprüft, ob sie größer oder kleiner ist oder außerhalb des Bereichs der vom Computer gewählten Zahl liegt. Schreiben Sie also eine Gasteingabe als Argument und geben Sie dann ein Semikolon. Diese Prüffunktion gibt also true oder false zurück, das ist ein boolescher geschriebener Typ für dieses Phi. Wenn der Benutzer uns die richtige Antwort gibt, wird true zurückgegeben, andernfalls falsch. Lassen Sie uns also die Funktion check starten. Nun müssen wir hier ein Argument deklarieren , um diesen Case-Eingabewert zu akzeptieren. Nun, richtig, der Eichmann hat raten angerufen. Jetzt müssen wir diese Variable deklarieren. Lassen Sie uns also die globale Variable setzen. Schreiben Sie nun die Variable mit dem Namen guess no in diese Funktion, überprüfen Sie, geben Sie die Bedingung an. Die erste Bedingung wäre, wenn die Zahl kleiner als die gewünschte Zahl ist , oder? Wenn rate weniger als Ziel eins, da die vom Computer gewählte Zahl in Ziel eins gespeichert wird. Wenn die Vermutung jetzt geringer ist als das Ziel eins, müssen wir dem Benutzer eine Nachricht zeigen. Also innerhalb von Anführungszeichen, richtig? Warnen. Und dann schreibe. Die Zahl ist kleiner. Und dann gib false zurück da der Benutzer die richtige Antwort nicht erraten konnte. Nein. Wenn die Zahl größer ist. Kopieren Sie dazu diesen if-Teil und fügen Sie ihn nach rechts ein. Wenn Gäste größer als die Zahl sind, dann schreibe die Zahl ist größer, dann gib false zurück. Was passiert nun, wenn die Zahl keine Zahl ist? Das heißt, wenn der Benutzer eine Eingabe gibt , die ein Alphabet ist. Jetzt, stimmt's? Wenn innerhalb der Klammer, rechts, ist, und dann N ist N. N steht für ist keine Zahl. Das ist also eine Funktion von JavaScript, die true zurückgibt, wenn es sich nicht um ein Unwohlsein handelt, und false, wenn es sich um eine Zahl handelt. Schreibe deine Vermutung, heile. Es wird also analysiert, ob guess eine Zahl ist oder nicht. Wenn es sich also um eine Zahl handelt, wird sie nicht in diese eingehen. Wenn und wenn es keine Zahl ist, wird es den in diesem if-Abschnitt geschriebenen Code ausführen . also eine Warnung und Recht, bitte geben Sie eine gültige Zahl ein. Nein, gib falsch zurück. Jetzt können sie eine weitere Bedingung sein, dass die Zahl kleiner als eins oder größer als 100 ist. Dafür, richtig? Wenn und dann rate weniger als eins. R. Also wird r mit diesen Symbolen gegeben. Wenn Sie ein vollwertiges Programm sind , in dem Sie es sehr gut verstehen können. Andernfalls können diese Symbole von Ihrer Tastatur abgerufen werden, die über der Enter-Taste verfügbar ist. Jetzt, stimmt's? Schätze mehr als 100. Das kümmert sich also um die äußeren Randeingänge. in diesem Abschnitt, wenn Sie gewarnt werden, Verwenden Sie in diesem Abschnitt, wenn Sie gewarnt werden, diesen äußeren Rand? Gib jetzt false zurück. Also alle Bedingungen, falsch zu sein und vorsichtig zu sein. Wenn also keine der Bedingungen zutrifft, können Sie direkt senden. Also für diese Warnung, das richtig? Ja. Sie haben die richtige Antwort eingegeben. Und dann müssen Sie die Anzahl der Fälle angeben. Also richtig. Im. Und dann verketten Sie meine Vermutungen beim Schreiben. Vermutlich, Sie haben die Anzahl der Gäste, die der Benutzer gemacht hat. Nun, so viele Vermutungen. Schließen Sie also die Warnung und geben Sie dann true zurück. Damit wird die while Schleife des Funktionsspiels beendet . Wir sind fertig mit dem Schreiben des Codes für unser Spiel. Jetzt müssen wir diese Spiele dafür oder für den Körper laden und onload equals schreiben und dann das Spiel schreiben. Da ist der Funktionsname Kim. Jetzt spar dir das. Es ist ein bisschen auf deinem Deck Sachen. Ich werde g is game mit der Erweiterung von dot HTML schreiben . Speichern Sie das jetzt und lassen Sie es uns ausführen und die Ausgabe sehen. Es heißt, der Computer habe eine Nummer gewählt. Also lass mich die Zahl schreiben, angenommen 50. Die Zahl ist also größer. Also lass mich fünfundzwanzig schreiben. Die Zahl ist auch niedrig. Also lass mich zehn schreiben. Es ist kleiner, also liegt es zwischen 1124. Also lass mich 20 geben. Sie ist auch größer. Also 15, kleiner. Also lass mich Hilfe geben. Sie ist auch größer. Es ist also zwischen 1617. Also ja, die Zahl war 16 und ich habe sie in sieben Fällen bekommen. Vielen Dank, dass Sie sich dieses Video angesehen haben, und bleiben auf dem Laufenden , um mehr zu erfahren. 30. Extra : So bleibe du während des Lernens motiviert: Hallo Leute. Ich hoffe dir gefällt dieser Kurs bis jetzt. Das Erlernen einer neuen Fähigkeit ist wirklich großartig, aber der Prozess ist ein bisschen schwierig. Wie können wir also durch Lernen motiviert bleiben? Hier sind ein paar Tipps für dich. Zuallererst ist es sehr wichtig, sich ein Ziel zu setzen , da es Ihnen hilft, sich zu konzentrieren, wenn Sie abgelenkt werden, um wieder auf Kurs zu kommen. Wenn alle nur tanzen, was soll man lernen, oder? Dies ist der Lehrplan, den Sie benötigen, um dies und das zu absolvieren, aber niemand sagt uns, wie wir lernen sollen , wenn Lernen ein Prozess ist. Denken Sie daran, sich mit Ihren Grundlagen vertraut zu machen und sich einen Kurs anzumelden, um Ihr Lernen zu verfolgen. Nummer drei, Beständigkeit, Beharrlichkeit ist der Schlüssel zum Erfolg. Lernt Jura, lernt aber jeden Tag. die Aufgabe in kleinere Teile auf, damit Sie sie problemlos erledigen können. Der wichtigste Teil des Lernens besteht darin, Pausen einzulegen. Pause einzulegen erfrischt unseren Geist, was auf unserer Lernreise. Die nächste Möglichkeit besteht darin, sich mit Menschen zu umgeben, die ähnliche Interessen haben, und sich einer Community anzuschließen , die Ihnen hilft, auf Ihrer Lernreise zu wachsen. guter Letzt glauben Sie an Ihre Fähigkeiten. Denk immer daran. Du schaffst es. 31. Einführung in HTML-Formulare: Hallo zusammen und willkommen zurück zum Kurs. In diesem Abschnitt werde ich Ihnen etwas über Unternehmen beibringen. Bevor wir also Formulare in HTML erstellen, sollten wir verstehen, was ein Formular ist. Fangen wir jetzt von Ihrem Computer aus an und öffnen Sie einen Webbrowser. Ich werde Google Chrome hier öffnen. Gehe jetzt auf facebook.com. Wie Sie hier sehen können, gibt es einen Abschnitt namens Neues Konto erstellen, in dem Sie Ihren Namen, Benutzernamen, Ihre Handynummer oder E-Mail-Adresse eingeben können . Sie können ein Passwort festlegen und Ihnen auch einen Geburtstag schenken. Außerdem können Sie das Geschlecht Ihrer Person festlegen und dann ein Konto erstellen. Das ist also im Grunde ein Formular, mit dem Sie ein Konto auf facebook.com erstellen können. Das ist also im Grunde ein einfaches Formular, das Sie entwerfen können. In diesem Abschnitt werde ich Ihnen beibringen, wie Sie Firmen mit verschiedenen Attributen und Merkmalen entwerfen . Lernen Sie also weiter und bleiben Sie auf dem Laufenden. 32. So fügen Sie Textfeld hinzu: Gehen Sie zum Editor Plus Plus Editor und erstellen Sie dann eine neue Datei. Beginnen wir mit der grundlegenden Struktur einer HTML-Seite. nun im Abschnitt body Beginnen Sie nun im Abschnitt body mit einem Tag namens form und enden Sie gleichzeitig. Was auch immer Sie in dieses Formular-Tag schreiben , ist der Code für Ihr Formular. Nein, lass mich mit dem Namen für das angegebene Level beginnen. Und genau im AME-Namen, dann näher an der Ebene. Schreiben Sie dann Eingabetyp gleich Text und schließen Sie den Angriff. Dieses Eingabe-Tag hilft Ihnen also dabei, den Typ des Textes oder der Typnummer festzulegen , die Sie vom Benutzer als Eingabe akzeptieren möchten. Also hier wollen wir den Namen als Eingabe des Benutzers annehmen. Also haben wir den Eingabetyp Text festgelegt. Jetzt gibt es bestimmte Attribute dieses Eingabe-Tags, die als Autofokus bezeichnet werden. Autofokus verleiht Ihrer Eingabe im Grunde einen Fokus, einen zusätzlichen Fokus. Und dann erforderlich. schreiben müssen , wird Ihr Film monetär. Und wenn der Benutzer das Feld überspringt, stellt er sicher, dass dies ein erforderliches Feld ist. Jetzt gibt es ein anderes Attribut namens ID. Sie können das überspringen, ich gebe ihm diese ID, die uns im Grunde hilft , CSS-Code für diesen Eingabetyp zu schreiben. Also benutze ich es hier. Lassen Sie uns das jetzt speichern. Ich speichere es auf meinen Decks, um ihm einen Namen zu geben, nehme an, bilde Punkt-HTML und speichere es. Und jetzt lassen Sie es uns ausführen. Wie Sie sehen können, ist hier der Name des Labels. Also kannst du hier deinen Namen schreiben. Ja, so. Und wenn Sie nichts schreiben, dann heißt es, füllen Sie bitte dieses Feld aus. Um dem Benutzer nun klar zu machen , dass dies eine Art Formular ist, geben wir eine Überschrift H1 an, speichern das Anmeldeformular und schließen dann das H1-Tag. Sparen wir uns das jetzt. Kehren Sie jetzt zu einem Webbrowser zurück und laden Sie diesen erneut. Wie Sie hier sehen können, ist mein H1-Tag mit Anmeldeformular. Und hier ist mein liberaler Name mit dem Eingabetyp Text. Jetzt wissen Sie also, wie man das Namensfeld in Ihrer Firma ausspricht. Also geh zurück und probiere es selbst aus. 33. So fügen Sie Passwort **** Feld: Fügen Sie nun ein weiteres liberales und rechtes Passwort hinzu, ein geschlossenes Silben Und dann schreibe den Eingabetyp gleich und dann das richtige Passwort. Sie können auch die Attribute Autofokus und erforderlich verwenden . Auch ID gegeben. Angenommen, bestanden. Speichern wir das jetzt und führen es aus. Wie Sie sehen können, ist dies mein Anmeldeformular mit einem Namen und einem Passwortschlitz. Nun, um dieses Passwort darunter zu ändern, schreiben wir nun hier nach dem Eingabe-Typ-Text, rechts, BR. Br wird helfen, dieses Lipid-Passwort für die nächste Spur zu erhalten. Speichern Sie das jetzt und führen Sie es aus. Wie Sie sehen können, ist das Passwort direkt unter Mittag. Auch hier können Sie auch ein anderes Bier geben. Das wird also eine weitere Zeile von Raum hinzufügen. Speichern Sie das jetzt und lassen Sie es uns erneut ausführen. Wie Sie sehen können, liegt das Passwort ganz unter dem Namen. Auf diese Weise können Sie das Format jetzt ändern , wenn Sie ein Passwort schreiben. Wie Sie sehen können, kommt es in Sternform. Sie können Ihr Passwort nicht sehen, aber für den Namen können Sie sehen, was Sie schreiben. Also geh jetzt zurück und probiere es selbst aus. 34. So fügen Sie E-Mail-Feld hinzu: In diesem Video werde ich Ihnen zeigen, wie Sie den Eingabetyp auf E-Mail setzen. Fangen Sie dafür mit Bier an. Um E-Mail unter die Passwortstufe zu setzen. Jetzt, richtiges Level. Und dann schreibe eine E-Mail. Schließen Sie nun das Label-Tag. Und der richtige Eingabetyp. Dann schreibe gleich. Und in dieser richtigen E-Mail. Nein, Sie können auch das Attribut required schreiben und eine ID angeben. Sparen wir uns das jetzt. Lassen Sie es uns jetzt ausführen. Wie Sie hier sehen können, ist mein Bild von der Sache. Jetzt direkt zur E-Mail. Du. Gehen Sie jetzt zurück zu Ihrem Editor und probieren Sie es aus. 35. So fügen Sie Numerisches Feld hinzu: In diesem Video erfahren Sie mehr über die Eingabetypnummer. Dafür, richtig? Br. Und dann fange damit an, den Lieber zu schreiben. Dann schreibe vermutlich Telefonnummer. Wir können den Zahleneingabetyp für Telefonnummer acht usw. verwenden. Schließen Sie also das Level-Tag. Nun, rechts, der Eingabetyp ist gleich Zahl, und geben Sie dann eine ID an. Speichern wir das jetzt und führen es aus. Also hier ist mein Telefonnummernschlitz. Wir können also zwei Telefonnummern wie diese schreiben. Jetzt können Sie auch versuchen, ein bisschen zu schreiben. Sie drücken jedoch das Alphabet damit es hier nicht angezeigt wird. Sie können es ausprobieren und sehen in diesem Slot kein Text akzeptiert wird. Kehren Sie jetzt zu Ihrem Editor zurück und lassen Sie uns ein anderes Level namens H. H ausprobieren und dann das Level schließen. Kein Recht, Eingabetyp ist gleich Zahl. Hier können Sie auch das Mindest- und Höchstalter festlegen das Mindest- und Höchstalter das Sie die Eingabe des Benutzers entgegennehmen möchten. Lassen Sie mich also das Mindestalter auf 18 und das Höchstalter auf 60 Jahre festlegen. Der Benutzer kann also kein Alter unter oder über 60 Jahren eingeben. Jetzt können Sie auch das Attribut step verwenden. Dadurch wird im Grunde der Inkrementbereich festgelegt. Also setze ich es auf eins. Geben Sie nun eine ID dafür, nehmen Sie H an, und speichern Sie diese dann. Und lassen Sie es uns ausführen. Hier ist mein achter Slot. Nehmen wir an, dass 18 wissen, wie wir das erhöhen, Sie können sehen, dass es um eins zunimmt. Es verringert sich also um eins. Jetzt können Sie auch einen Standardwert für Ihr Altersfenster festlegen. Dafür genau hier. Wert ist gleich, sagen wir zwei bis 18. Jetzt spar dir das. Läuft jetzt. Wie Sie also den Unterschied sehen können. Wie Sie sehen können, ist der Standardwert 18 Jahre. Auf diese Weise können Sie also mit Ihren Eingabetypen manipulieren. jetzt schnell zu Ihrem Editor zurück und probieren Sie es aus. 36. So fügen Sie Platzhalter hinzu: In diesem Video werden wir also etwas über Platzhalter erfahren. Platzhalter ist ein weiteres Attribut der Eingabe , mit dem Sie etwas in den Eingabe-Slot schreiben können. Lass mich dir jetzt einen zeigen. Gleich hier. Platzhalter gleich und schreiben Sie dann eine Nachricht mit dem Namen Geben Sie Ihren Namen ein. Jetzt spar dir das. Und sehen wir uns die Ausgabe an. Wie Sie sehen können, ist hier ein Text namens Geben Sie Ihren Namen ein. Sobald du hier etwas schreibst, verschwindet es. In ähnlicher Weise können Sie jetzt Platzhalter für andere Slots wie Passwort usw. setzen . Machen Sie es also selbst und schauen Sie sich das an. 37. So fügen Sie das Datumsfeld hinzu: Um nun das Datum des Eingabetyps hinzuzufügen, müssen Sie eine neue Ebene beginnen. Dann richtig, Geburtsdatum. Dann im Level-Tag. Und dann schreibe Input. Geben Sie dann gleich und dann Datum ein. Gegebene ID. Datum annehmen. Vergessen Sie diesen BR nicht, sonst steht er in derselben Zeile. Lassen Sie mich also zwei Biersteuern geben um sie aufeinander abzustimmen. Jetzt spar dir das. Lassen Sie es uns jetzt ausführen und die Ausgabe sehen. Wie Sie sehen können, ist hier mein Date-Slot. Jetzt können Sie hier klicken und ein beliebiges Datum auswählen. Das gibt dir also im Grunde einen Kalender. Sie müssen Daten manuell hinzufügen. Sie können direkt aus Ihrem Kalender auswählen. jetzt zurück zu Ihrem Editor und probieren Sie es aus. 38. So fügen Sie Time hinzu: Nun, um das Zeitfenster hinzuzufügen, genau hier sind wir für die Ausrichtung und dann für das richtige Etikett. Und nehmen wir an, wir schreiben um wie viel Uhr. Sie können einen beliebigen Slot Ihrer Wahl wählen. Ich entscheide mich für mehr Zeit. Jetzt im Level-Tag. Starten Sie nun die Registerkarte Eingabe. Und der richtige Typ ist gleich. Dann die richtige Zeit. Wenn wir uns ausweisen, sind wir fertig. Sparen wir uns das jetzt. Und lass uns rennen und uns die Ausgabe ansehen. Wie Sie sehen können, ist hier das Zeitfenster. Sie können also unsere als Minuten geben. Schreiben wir zwei, dann fünfundvierzig, dann 00. Geben Sie eine Morphem-Ansicht. Sie können mit diesen Pfeilen ändern. Sie können das Datum auch mit diesem Pfeil ändern. Das ist also alles für die Zeit. Jetzt geh zurück und probiere es in deinem Dito aus. 39. So fügen Sie Color hinzu: In diesem Video lernen Sie nun, wie Sie Farbe als Eingabetyp für das rechte Knie zippen . Und dann fange mit dem Etikett an. Jetzt schreibe ich Lieblingsfarbe. Jetzt unauslöschlich. Wissen Sie es richtig? Eingangstyp entspricht der C-O-L-O-R-Farbe. Dann habe ich ihm eine ID gegeben. Schließen Sie es jetzt und speichern Sie diese Datei. Lassen Sie uns jetzt rennen und uns die Ausgabe ansehen. Wie Sie hier sehen können, YouTube-Farbschlitz. Wenn Sie jetzt darauf klicken, können Sie eine beliebige Farbe auswählen. Sie können sogar benutzerdefinierte Farben erstellen. Verwenden dieser Farbregisterkarte. Wählen Sie eine Farbe aus und klicken Sie auf Okay, und Ihre Farbe ist ausgewählt. Auf diese Weise können Sie also Ihre Lieblingsfarbe auswählen. jetzt schnell zu Ihrem Editor zurück und probieren Sie es aus. 40. So fügen Sie Radio-Buttons hinzu: Um nun das Optionsfeld in Ihrem Formular festzulegen, müssen Sie mit BR beginnen und ein Level schreiben. Richtiges Geschlecht. Jetzt in der Leber. Jetzt richtig? Der Eingabetyp dann gleich und schreibt dann Trade Deal. Und dann gib den Wert gleich männlich. Dann genau hier, Essen. Dann in der nächsten Zeile, richtig? Eingangstyp ist gleich, dann schreibe Radio und gib dann den Wert an, der weiblich ist. Nein, mach es zu und schreib deine Frau. Jetzt können Sie beim Optionsfeld eine dieser beiden auswählen , entweder männlich oder weiblich. Eine Person kann nicht zusammen männlich und weiblich sein. Dafür müssen Sie also einen Namen, ein Attribut, das Geschlecht angibt. Und ähnlich schreiben Sie hier auch Namen und dann Geschlecht. Speichern Sie das jetzt und lassen Sie es uns ausführen. Hier ist unsere Agenda. Und Sie können entweder männlich oder weiblich wählen. Sie können nicht beide gleichzeitig auswählen, da wir das name-Attribut verwendet haben und für beide Optionsfelder denselben Namen vergeben haben. Sie jetzt zurück zu Ihrem Editor und probieren Sie es aus. 41. So fügen Sie Checkbox hinzu: Jetzt beginne ich damit, BR zu schreiben und dann Arbeit zu schreiben. Und schreibe Sprachen. Wissen Sie. Schließen Sie dann das Etikett und schreiben Sie dann den Eingabetyp ist gleich. Dann haben wir nicht richtig zitiert, Kontrollkästchen. Und dann schreibe Namen gleich Artikel. Dieser Name hilft uns zu verstehen, dass er zum gleichen Artikelnamen der Kategorie gehört . Und dann gib den Wert gleich Englisch. Und dann schreibe Englisch. Und dann gib BR. Und dann wieder, richtig? Eingabe. Geben Sie dann ein, dann ist gleich, dann wieder das Kontrollkästchen. Und dann gib mir Namen wären die gleichen Gegenstände. Und dann gib einen Wert an. Nehmen wir an Spanisch. Und dann schreibe Spanisch. Gib BR. Sie können so viele Checkboxen hinzufügen, wie Sie möchten. Also füge ich hier drei Checkboxen hinzu. Also richtiges Kontrollkästchen. Und gib den Namen als Artikel an. Geben Sie dann den Wert an, Französisch zu pausieren, und schreiben Sie dann Französisch und geben Sie einen BR. Jetzt sind wir fertig. Jetzt speichern wir diese Datei und führen sie aus. Wie Sie sehen können, Sprachen, wissen Sie, Englisch , Spanisch, Französisch, Sie können sie alle nehmen, sind Sprachen, wissen Sie, Englisch, Spanisch, Französisch, Sie können sie alle nehmen, nur eine davon. Im Gegensatz zum Optionsfeld im Kontrollkästchen können Sie also mehrere Daten auswählen. Kehren Sie jetzt schnell zu Ihrem Editor zurück und probieren Sie diesen Code aus. 42. So fügen Sie Dropdown-Liste hinzu: Um nun eine Dropdown-Liste hinzuzufügen, schreiben Sie zunächst das Level. Und dann das richtige Land. Dann unauslöschlich. Dann gib ein BR. Nein, verwenden Sie ein Tag namens Select. Jetzt gib ihm einen Namen. Nehmen wir an Land. Und jetzt starte die Optionen. Richtige Option. Und dann ist der richtige Wert gleich, nehmen Sie an, Indien, und schreiben Sie dann in Text Indien. Und dann int Option. jetzt bei Annahme den Wert an, Geben Sie jetzt bei Annahme den Wert an, nehmen Sie die USA an, und schreiben Sie dann in Text. Und dann wieder in der Option. Sie können so viele Optionen angeben, wie Sie möchten. Lassen Sie mich jetzt eine andere Option nennen. Sie müssen also nicht noch einmal alles neu schreiben. Kopiere einfach diesen Teil. Rechtsklicken Sie, kopieren Sie es und fügen Sie es dann ein Jetzt sagte das Land zu Frankreich. Und schreibe in Worten Frankreich. Sie können also so viele Optionen angeben, wie Sie möchten. Ich nenne nur drei Optionen. Sie können auch andere Länder ausprobieren. Beenden Sie nun das Select-Tag. Speichern Sie jetzt diese Datei. Lassen Sie uns rennen und uns die Ausgabe ansehen. Wie Sie sehen können, ist hier mein Land. Wenn Sie also auf die Drop-down-Liste klicken, können Sie die Artikel sehen, die wir in unseren Code eingegeben haben. Wir haben also Indien, die USA und Frankreich. also nicht nur für das Land Sie können also nicht nur für das Land die Dropdown-Liste für jedes gewünschte Feld verwenden. Kehren Sie jetzt zu Ihrem Editor zurück und schreiben Sie den Code für die Dropdown-Liste. 43. So fügen Sie Textarea hinzu: In diesem Video werden Sie also etwas über den Textbereich erfahren. Beginnen Sie dafür mit BR und geben Sie dann ein Etikett an. Und richtig. Bitte geben Sie Feedback ein. Nein, näheres Etikett. Und dann starte das Deck namens Textbereich. Jetzt schließe es gleichzeitig. Jetzt innerhalb des textarea-Tags, richtig? Säulen. Dadurch wird die Anzahl der Spalten angegeben , die Sie eingeben werden. Also schreie ich 100 mal. Und Zeilen sind gleich. Dann kannst du geben für. Speichern wir das jetzt und führen es aus und sehen uns die Ausgabe an. Wie Sie sehen können, ist hier mein Textbereich. Sie können so viele Takes in diesen Textbereichsschlitz schreiben, wie Sie möchten. Jetzt kommt das Level. Bitte geben Sie Feedback ein. So können Sie dem Benutzer eine vollständige Textarea geben , um sein Feedback zu schreiben. Dieser Textbereich ist sehr hilfreich, um Feedback entgegenzunehmen, sowie für den Slot, der über sich selbst aufgerufen wird. Auf diese Weise können Sie es jetzt schnell verwenden, kehren Sie schnell zu Ihrem Editor zurück und probieren Sie diesen Code aus. 44. So laden Sie Dateien hoch.: In diesem Video erfahren Sie , wie Sie Dateien in Ihre Formulare hochladen. Sie können jede Datei hochladen, eine PDF-Datei oder ein Bild schlagen, oder ein Word-Dokument, jede Art von Datei, Sie können Ihr Telefon hochladen. Dafür müssen Sie also ein Stück Code schreiben. Also lass uns anfangen. Schreiben Sie also zunächst BR und geben Sie dann ein Level an. Angenommen, lade dein Bild hoch. Und dann im Label-Tag. Nun richtig, Eingabetyp entspricht dann innerhalb von Anführungszeichen, rechts kämpfen. Und dann unterstützt der angegebene Name die Datei, und dann speichern Sie sie und führen Sie sie in Chrome aus. Wie Sie sehen können, ist hier mein Level. Laden Sie Ihr Bild hoch. Und hier ist der Eingabetyp namens Datei auswählen. Wenn Sie also darauf klicken, Sie zu Ihrem Computer weitergeleitet. Wählen Sie nun eine Datei aus und öffnen Sie sie. Wie Sie sehen können, ist hier der Name Ihrer Datei , der ausgewählt wurde. Sie können es mehrfach ändern, so oft Sie möchten. Ich wähle das aus. Jetzt wird der Name geändert. Sie können also wie diese ändern, aber es wird nur eine Datei ausgewählt. also nicht nur ein Bild, Sie können also nicht nur ein Bild, sondern auch jede Datei hochladen, die von PDF-Dateien bis hin zu Word-Dokumentdateien beginnt , oder jede Art von Datei die Sie mit Hilfe der Eingabedatei hochladen können. Kehren Sie jetzt zu Ihrem Editor zurück und probieren Sie diesen Code aus. 45. Fortgeschritten: Einbetten von Audio: Hallo zusammen und willkommen zurück zum Kurs. In diesem Video werde ich Ihnen zeigen, wie Sie Audio in Ihre Webseite einbetten können. Also lass uns anfangen. Gehen Sie jetzt zum Editor Plus Plus Editor und erstellen Sie dann eine neue Datei. Beginne nun mit der grundlegenden Struktur einer HTML-Seite. Wenn Sie innerhalb des Body-Abschnitts fertig sind, schreiben Sie das Tag Audio. Sie dann innerhalb dieses Tags Verwenden Sie dann innerhalb dieses Tags das Attribut SRC, das für source steht. Also hier müssen Sie die Quelle Ihres Audios angeben. Lass mich näher schreiben. Punkt mp3. Das ist im Grunde ein Lied. Sie können eine neue Audiodatei wählen. Rechts steuert nun die Steuerung der Audiowiedergabe und das Erhöhen oder Verringern der Lautstärke über das Bedienfeld. Jetzt bist du fertig. Schließen Sie also Ihre Technik ab. Lassen Sie mich jetzt eine Überschrift geben. Angenommen, jeder schreibe ich meinen neuen Song. Das ist also im Grunde eine Demo jetzt im H1-Tag. Speichern Sie jetzt diese Datei. Gehen Sie jetzt zu Decks, und erstellen Sie dann eine neue Datei. Und gib deiner Datei einen Namen. Angenommen, ich gebe HTML. Ja, jetzt gib diese Datei ein. Geben Sie jetzt Ihrem HTML einen Namen p. Angenommen, ich gebe Audio Dot HTML. Speichern Sie das jetzt in dieser Datei. Sie müssen auch die Audioquelldatei speichern , die sich in meinen Tasten befindet. Schließen Sie einen Punkt mp3. Lassen Sie mich also zu dem Abschnitt navigieren , in dem ich den Song gespeichert habe. Also habe ich es in meinem Musikordner gespeichert. Irritiert. Kopieren Sie nun diese Song-Audiodatei und fügen Sie sie dann in den gleichen Ordnerwert ein, in dem Ihr Audio-Punkt-HTML beibehalten wurde. Hier wird es jetzt in denselben Ordner eingefügt . Ja, wir sind fertig. Kehren wir jetzt zu Ihrem Editor zurück und führen ihn dann aus. Also hier ist deine Audiodatei. Jetzt kannst du es abspielen und anhören. Sogar. Stephen hat gerade vor einem Spiel festgestellt, dass du zu viel trinkst und das ist ein Problem. Okay. Also ihr Freunde, es war schön sie kennenzulernen und hier ging es nur darum, das Bein zu kennen. Ich werde dir beibringen, wie eine Einheit den Rekord gebrochen hat. 46. Fortgeschritten: Einbetten von Video: Hallo zusammen und willkommen zurück zum Kurs. In diesem Video werde ich Ihnen zeigen, wie Sie Videos in Ihre Webseite einbetten. Jetzt fangen wir an. Gehen Sie jetzt zu Ihrem Notepad Plus Plus Editor und erstellen Sie dann eine neue Datei. Beginne nun mit der grundlegenden Struktur einer HTML-Seite. Jetzt, wenn Sie innerhalb des Körperabschnitts fertig sind, rechts, vdu, v IDEO tack. Auf diese Weise können Sie ein Video in Ihre Webseite einbetten. Schreiben Sie nun zunächst das Attribut SRC, dem Sie die Quelldatei des Videos erhalten. Lass mich jetzt zuerst zu dem Ort gehen, an dem ich ein Video habe. Also gehe ich in den Videoordner meines PCs. Jetzt hier meine Videos. Lassen Sie mich nun dieses Video auswählen, das den Namen hyperlink dot mp4 trägt. Also lass mich zurück zu meinem Editor gehen und den Namen hyperlink dot mp4 schreiben . Nun, hier rechts, was Ihnen im Grunde die Steuerung des Abspielens und des anschließenden Pausierens und anschließenden Regulierens des Cursors gibt. Nun, richtig, Kontrollen. Und dann beende den Angriff. Lassen Sie mich jetzt hier eine Überschrift geben. Angenommen, mein Video jetzt und H1-Tag. Also bist du fertig. Speichern Sie jetzt diese Datei. Ähnlich wie beim Speichern dieser Datei im selben Ordner. Also lass mich zu meinen Deck-Sachen gehen und dann eine neue Datei erstellen und deiner Datei einen Namen geben, nimm an Video. Sie dann in dieser Datei Speichern Sie dann in dieser Datei diese HTML-Datei. Ich nenne es als Video-Punkt-HTML. Jetzt spar dir das. Und denken Sie daran, dass sich Ihre Videodateien auch in diesem Ordner namens Video befinden sollten . Also lass mich zu meinem Videobereich gehen und diesen HTML-Punkt mp4 kopieren. Und dann lass mich zu meiner nächsten Tube gehen , wo ich den Videoordner gespeichert habe. Katies. Jetzt innerhalb dieses Hyperlink-Punkt-MP4-Datei. Kehren Sie jetzt zu Ihrem Editor zurück und führen Sie ihn aus. Wie Sie sehen können, ist hier mein Video. Dies nimmt nun den gesamten Bildschirm ein, da wir keine erhöhte Breite des Videopanels erwähnt haben . Lassen Sie mich jetzt zu meinem Editor zurückkehren, genau zu diesem Attribut namens height. Und dann gleich und setze dann die Höhe auf 500 Px, Px zehn. Also Pixel. Gib nun die Breite an, mit der du schreiben möchtest. Stellen Sie dann auch die Breite auf 500 px ein. Sie können die Höhe und Breite nach Ihren Wünschen ändern. Speichern Sie das jetzt noch einmal und lassen Sie es uns ausführen. Hier ist dein Video. Jetzt können wir es spielen. Sie können diese Steuerelemente verwenden. Jetzt kannst du es sogar stumm schalten und dann dein Video abspielen. Also gibt es keinen Ton, oder? Du kannst den COSO so weiterleiten und dann spielen. diese Weise können Sie Videos in Ihre Seite einbetten. Danke, dass du dir dieses Video angesehen hast. Bleiben Sie dran an der Küste , um mehr in HTML zu erfahren. 47. Erweitert : Einbetten von Youtube-Plugin: Hallo zusammen, Willkommen zurück zum Kurs. In diesem Video werde ich Ihnen zeigen, wie Sie YouTube-Plugins in Ihre Webseite einbetten. Also lass uns anfangen. Gehen Sie jetzt zu Ihrem Editor und erstellen Sie dann eine neue Datei. Beginne nun mit der grundlegenden Struktur einer HTML-Seite. Wenn Sie fertig sind, rufen Sie Ihren Webbrowser auf. Ich gehe hier zu Google Chrome. Sie können zu jedem Webbrowser gehen. Gehen Sie jetzt zu YouTube. Nun von einem solchen Video , das du in deine Webseite einbetten willst. Lassen Sie mich jetzt ein Video durchsuchen. Also suche ich ein Video namens Was ist HTM jetzt und wähle dann ein beliebiges Video aus. Also wähle ich das aus. Das ist also das Video, das du einbetten möchtest. Jetzt. Pausiere das Video und klicke jetzt auf Teilen. Und dann können Sie eine Option namens Einbetten finden . Also klicke darauf. Und wie Sie hier sehen können, ist der Code, mit dem Sie innovatives Bit invertieren können. Also kopiere diesen Code. Und dann sind wir wieder bei Ihrem Redakteur. Und dann innerhalb der Körpersektion. Das ist gut. Speichern wir nun diese Datei. Ich spare es auf meinem Deckstub. Gib ihm einen Namen. Ich gebe Youtube Punkt HTML. Und dann speichere es. Lassen Sie es uns jetzt ausführen. Wie Sie sehen können, ist hier Ihr Video. Also spiel es jetzt. Und das gleiche Video, bitte. Auf diese Weise können Sie YouTube-Videos als auch mehrere Videos zu Ihrer Webseite hinzufügen. Lassen Sie mich jetzt zu unserem Redakteur zurückkehren. Wir verwenden also das Tag iframe, das es uns ermöglicht, das YouTube-Plugging auf unserer Webseite festzulegen . Hier ist im Grunde die Breite und Höhe, die du manipulieren kannst , um die Seiten des Videos zu vergrößern oder zu verkleinern. Und dann ist das die Quelle. Und dies sind einige Berechtigungen, die automatisch abgespielt werden und den Vollbildmodus innerhalb dieses iframe-Tags zulassen. Danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf die Küste, um diese erweiterten Funktionen eines Stotterns zu erlernen . 48. Erweitert : Einbetten von Google Map: Hallo und willkommen zurück zum Kurs. In diesem Video werde ich Ihnen beibringen, wie Sie Google Maps in Ihre Website einbetten. Lassen Sie uns dafür loslegen. Gehen Sie jetzt zum Editor Plus Plus Editor und erstellen Sie dann eine neue Datei. Beginnen Sie nun mit der grundlegenden Struktur einer HTML-Seite. Wenn Sie fertig sind, gehen Sie zu Ihrem Webbrowser und dann zu Google Maps. Also hier sind wir. Jetzt sozialer Standort in Google Maps. Ich werde meine Stadt durchsuchen, Kalkutta. Sie können Ihre Stadt oder einen beliebigen Ort Ihrer Wahl durchsuchen. Jetzt, während ich es suche, wird es hier angezeigt. Jetzt möchte ich, dass dies in meine Website eingebettet wird. Dazu müssen Sie also teilen und dann zur Einbettungskarte gehen. Jetzt du, hier hast du den Link von iFrame. Also kopiere diesen Link und gehe zurück zu deinem Editor. Fügen Sie den Link im Abschnitt body ein. Das ist also ein langer Link. Speichern Sie diese Datei jetzt auf Ihrem Desktop. Jetzt gib dir eine Datei, einen Namen. Angenommen Map Dot HTML, und speichern Sie es dann. Und jetzt lasst uns rennen und uns die Ausgabe ansehen. Dies ist Ihre Karte mit Darstellungen von Kalkutta in meinem Fall, in Ihrem Fall könnte es OCT sein. Sie können also die Karte ziehen dann vergrößern und verkleinern. Sie können alle Funktionen von Google Map hier nutzen. Auch hier verwenden wir I-Frame, um diese Map in unsere Wiederholung einzubetten. Das ist also eine Gesamtquelle. Und dies ist die Breite und Höhe, die Sie je nach Ihrer Wahl für das Ansehen dieses Videos anpassen können . Und vergiss nicht , das zu üben. 49. Einführung in das Hauptprojekt – Blog Website: Hallo zusammen, willkommen zurück zum Kurs. Es ist Zeit für uns, mit unserem Abschlussprojekt zu beginnen. In diesem Projekt lernen Sie , Ihr Blog mit HTML und CSS zu gestalten . Wie Sie sehen können, ist dies der Home-Bereich Ihres Blogs , der ein Gericht enthält und dann von seinem Rezept gefolgt wird. Also im Grunde ist das ein Food-Blog. Ich werde dir genau beibringen , wie man diese Blog-Website erstellt. Jetzt können Sie auch Modeblog-Websites oder andere Blogging-Websites nur auf diese Weise erstellen . Dies wird Ihr Abschnitt Über uns sein, in dem Sie auf Facebook auf diesen Kampf gegen uns klicken können. Und es gibt auch eine Galerie. Und das ist deine Galerie. Und welches Bild Sie auch immer einem Blog posten, das hier gespeichert wird. Sie können auch auf Facebook auf „ Finden Sie uns“ klicken und dann direkt zur Facebook-Seite Ihres Blogs gehen . Das ist also die Facebook-Seite meines Blogs mit dieser Foodies-Welt. Jetzt werde ich Ihnen auch beibringen, wie Sie Ihre Website mit dem Triple 0-Wave-Host zum Leben erwecken können. Auf diese Weise können Sie live auf Ihre Website zugreifen und auf Ihren Block kann von jedem auf der ganzen Welt zugegriffen werden. Und dafür müssen Sie keine einzige Codierungszeile schreiben . In einer der Programmiersprachen wie PHP oder Java benötigen Sie nicht alle diese Programmiersprachen, benötigen Sie nicht um Ihr eigenes Blog zu gestalten. Sie können das nur mit HTML und CSS tun. 50. Blog-Website – So fügen Sie Headers hinzu: Hallo zusammen, und willkommen zurück zum Kurs. Es ist Zeit für uns, den Code für unser Abschlussprojekt zu schreiben. Also ohne weitere Zeit zu verschwenden, fangen wir an. Gehen Sie jetzt zum Editor Notepad Plus Plus. Erstellen Sie eine neue Datei. Beginne nun mit der grundlegenden Struktur einer HTML-Seite. Jetzt bin ich fertig mit der Grundstruktur eines HTML-Beats. Ich habe den Titel auf home gesetzt seit wir die Homepage zuerst erstellen. jetzt innerhalb des body-Tags Schreiben Sie jetzt innerhalb des body-Tags def, right, class equals und dann main. Das ist also eine Abteilung für Ihren Hauptinhalt. Also schreibe ich die Klassen gemein. Jetzt schreibt ein näheres Divisions-Tag im Grunde alles innerhalb dieser Hauptabweichung. Lassen Sie mich nun anfangen, eine weitere Division zu schreiben, die für unseren Header, den rechten Header, sein wird. Und dann schließe das div-Tag. In diesem Header-Bereich können Sie also den Namen Ihres Blogs und dann einen Slogan angeben. Lassen Sie mich also einen Absatz schreiben , in dem der Name Ihres Blogs angegeben ist. Also heile, der Name eines Blogs ist Foodies Wall. Schließen Sie jetzt das p-Tag. Dann kannst du hier ein Tag hinzufügen. Also eine ID gegeben, dag, richtig, es dauert beide, die täglichen Fälle zu untersuchen. Schließen Sie jetzt das p-Tag. Jetzt schreibe ich hier einen Food-Blog. Sie können jedes Thema verwenden , um in einen Block zu schreiben. Es darf kein Essen sein, es kann Mode, Lifestyle oder Technologie sein, alles, jede Domain, der Sie folgen können. Speichern wir jetzt unsere Datei. Also spare ich es mir bei meinem nächsten Tipp auf. Erstellen Sie nun einen neuen Ordner und geben Sie ihm einen Namen. Angenommen, ich nenne es Food-Blog. Sie können einen beliebigen Namen angeben. Geben Sie diesen Fuß-Blog-Ordner und geben Sie der Datei einen Namen Bewertung home dot HTML, da es unsere Homepage ist. Also home.html und dann speichere das. Das ist jetzt ein Spiegel unserer HTML-Seite. Also müssen Sie vorerst die Rede stylen. Erstellen Sie dafür eine neue Datei. Hier schreiben wir unseren CSS-Code. Lassen Sie uns nun herausfinden, welche Dinge wir stylen müssen. Wir müssen den Verteilungsmittelwert und dann den Header und dann dieses Tag stylen . Gehen Sie also zu Ihrer neuen Datei und graue Punkte bedeuten, da mean eine Klasse ist Beginnen Sie also mit Punkt und öffnen und schließen Sie die geschweifte Klammer. Jetzt in dieser richtigen Position. Und dann gib einen Doppelpunkt und schreibe absolut. Das wird also den gesamten Bildschirm einnehmen, also absolut. Und dann schreibe die Breite , die 100 Prozent ist. Da wollen wir die Gesamtbreite auf dem Bildschirm verwenden. Für die Höhe müssen wir nun die Höhe festlegen , da die Höhe endlich sein kann. Also gib die Höhe an. Ich schreibe tausend Pixel. Sie können je nach Belieben mehr oder weniger geben. Jetzt müssen wir den Rand für die rechte Spitze festlegen. Das wird also den Rand für oben und rechts festlegen. Und die linke Marge wird ebenfalls 0 Prozent betragen. Also sind wir fertig mit dem Entwerfen des Mittelwerts. Lassen Sie uns nun den Header-Teil so gestalten, dass er Punkt-Header schreibt. Da headed ist auch ein Klassenheader. Und dann innerhalb der geschweiften Klammer. Wieder Position. Gib jetzt auch absolut an und dann die Breite. Wir wollen also die Gesamtbreite verwenden. Also 100 Prozent. Dann gib die Höhe an. Wir möchten also nicht, dass unser Header den gesamten Platz der Webseite einnimmt, also muss er sich oben befinden. Lassen Sie mich also den Header mit 20 Prozent angeben. Lassen Sie uns nun den Spielraum dafür festlegen. Rechts oben. Und dann 0% und links bei 0 Prozent. Also sind wir mit dem Entwerfen des Header-Bereichs fertig In diesem Header-Bereich haben wir nun diese beiden Absatz-Tags, die als Foodies-Welt bezeichnet werden und unser Titelblock sind. Und das ist das Tag. Schreiben wir also den Code, um unseren Titel zu stylen. Lassen Sie uns nun zunächst die Hintergrundfarbe unseres Header-Bereichs für diesen rechten Hintergrund festlegen . Und dann gib einen Bindestrich und eine helle Farbe, C-O-L-O-R. Dann geben wir eine Farbe. Jetzt können wir mithilfe der Hex-Codes Farbe angeben. Lassen Sie mich also die Referenz eines Hex-Codes nehmen. Jetzt möchte ich die Farbe auf dunkles Magenta setzen. Mein Hex-Code ist also Hash-Hilfe 00 a B. Jetzt können Sie Ihre Farbe nach Ihrer Wahl einstellen. Sie können sich also auf die Hex-Codes beziehen , die ich im Abschnitt zur Textformatierung dieses Kurses gezeigt habe . Jetzt verwende ich dieses dunkle Magenta. Also lass mich jetzt hier schreiben. Hash Acht, WTO, ATP. Nein, gib uns ein Semikolon. Lassen Sie uns nun den Titel dafür entwerfen. Verleihen Sie Ihrem Titel eine Farbe. Bei dunklem Magenta ist Weiß angemessen. Also leicht, und dann die Textgröße, Schriftgröße und dann geben, nehmen Sie 38 Pixel an. Dann richtig, Schriftstärke. Und dann schreibe Volt. Dadurch wird der Text fett formatiert und mehr Fokus darauf gelegt. Lassen Sie uns nun die Schriftfamilie festlegen. Schriftfamilie. Also werde ich die Schriftfamilie George Yarn verwenden. Lassen Sie uns nun den Texten einen Schatten für den richtigen Text geben . Dann Bindestrich und dann schreibe Schatten. Der Schatten wird so gesetzt. Sie können Bemaßungen des Schattens auf der X-Achse, Y-Achse und Z-Achse angeben . Lassen Sie mich also drei Pixel auf der X-Achse schreiben, drei Pixel auf der Y-Achse und drei Pixel auf der Y-Achse. Und die Farbe meines Schattens wird großartig sein. Nein, dafür müssen wir unseren Steuerbereich entwerfen, Right Hash und dann deg schreiben, da stack eine ID für unseren Absatz war. Also hier mit Hash, öffne jetzt die geschweifte Klammer und innerhalb dieses Abschnitts, rechts, die Schriftgröße. Lassen Sie mich 20 Pixel annehmen und dann die Schriftstärke schreiben. Mutig. Keine richtige Schriftfamilie. Nein, setzen Sie die Schriftfamilie auf Optima und schreiben Sie ein Komma. Dann spüre nein, richtige Farbe. Und dann schreibe weiß. Jetzt rechts der Rand, also Rand, dann Bindestrich und dann rechts-links. Angenommen 40 px. Da wir wollen, dass der Stapel ein bisschen nach rechts verschoben wird. Also sind wir mit dem Entwerfen des Kopfteils fertig. Speichern wir jetzt diese Datei. Speichern Sie es im gleichen Ordner wie Ihre gespeicherte home.html. Schreiben Sie jetzt home dot css und speichern Sie dann diese Datei. Jetzt in home.html und innerhalb des head-Tags, rechter Link. Und dann entspricht HREF dem richtigen Home-Punkt-CSS. Und dann ist die rechte Beziehung gleich Stylesheet. Speichern Sie jetzt diese Datei. Lassen Sie uns nun unsere Datei ausführen und die Ausgabe sehen. Lassen Sie uns starten und wachsen. Das ist also der Header-Bereich unserer Webseite. Es heißt für diesen Herbst und hier ist der Scheck, der besagt, dass die Köstlichkeiten explodieren. Danke, dass du dir dieses Video angesehen hast. In den nächsten Videos werden wir mit der Erstellung der Webseite fortfahren. 51. Blog-Website – So füge ich Menü hinzu: Hallo zusammen, willkommen zurück zum Kurs. Also schreiben wir den Code, um mit unserem Projekt fortzufahren. Gehen Sie jetzt zu Ihrem Editor. Dieselbe Seite, oder? Sie hatten den Header-Abschnitt geschrieben. Heute werden wir das Menü für diese Homepage schreiben. also nach dem Ende des Divisions-Tags der Kopfzeile Beginnen Sie also nach dem Ende des Divisions-Tags der Kopfzeile eine weitere Division und geben Sie ihr einen Namen. Nehmen wir an, die Klasse ist gleich und schreibe dann das Menü. Schließen Sie jetzt auch das Divisions-Tag. Jetzt in dieser Abteilung wird der Menüabschnitt dafür geschrieben. Startet eine ungeordnete Liste. Beginnen Sie also mit dem Tag UL und schließen Sie es gleichzeitig. Jetzt in dieser UL-Tag-Liste wollen die Menüs geben. Also rechtes Auge. Und dann ist mein erster Menüpunkt Home, was unsere Homepage sein wird. Und dann schließe das LI-Tag. Dann geht es in einem anderen Menü für uns um uns. Es ist in Ordnung über uns. In dem Sie Ihnen Informationen geben können. Und dann noch ein Menü, das Galerie genannt wird, wo du alle Bilder oder das Essen sehen kannst , das du in deinem Block verwenden wirst . Jetzt ist jeder dieser Menüpunkte eine Webseite. Wenn Sie also auf dieses Menü klicken, werden die Elemente auf die Seite umgeleitet , zu der sie gehören. Jetzt ist zu Hause ein Pfirsich, den wir gerade entwerfen. Also musst du diese Seite verankern, also richtig. Und dann schreibe H ref gleich hash, weil es zu keiner anderen Basis navigiert, da es jetzt nur die Homepage und das Anker-Tag ist . In ähnlicher Weise müssen Sie über uns Anker geben. Schreiben Sie also eine und dann eine H-Referenz und schreiben Sie dann über Punkt-HTML, das in unseren weiteren Videos erstellt wird. Und dann schließe das ETag. Jetzt ist es unterstrichen, da diese Seite noch nicht erstellt wurde. Deshalb ist es unterstrichen. Also werden wir das schaffen. Wir kriegen das jetzt hin, oder? Galerie, dann H ref, und dann gib gallery dot HTML. Jetzt das Anker-Tag. Also ich bin das Menü fertig. Jetzt ist es an der Zeit, dass wir einige Styles zu unserer Liste hinzufügen. Speichern Sie dafür diese Datei und gehen Sie zu home dot CSS, da es alles Stylesheet ist. Also hier ist mein Home-Punkt-CSS. Jetzt müssen wir zunächst die Abteilung namens Menü entwerfen. Also hier ist unsere Abteilung. Also gehe zu home dot css und schreibe dann dots menu, da der Klassenname Menu ist. Und innerhalb dieser richtigen Position, wird es absolut sein? Und dann die Breite. Also muss die Breite 100% betragen. Geben Sie jetzt die Höhe an. Nehmen wir mal an, 15%. Da sollte der Manager nicht den gesamten Raum im pH-Wert einnehmen . Jetzt können Sie die Spitze wie angenommen 20 Prozent geben wie angenommen 20 Prozent weil die Kopfhöhe 20 Prozent beträgt, also müssen wir damit Schritt halten. Geben wir also 22 Prozent , damit es eine Lücke zwischen der Kopfzeile und diesem Menüabschnitt gibt. Und dann gib links. Lassen Sie uns links etwas Spielraum geben. Angenommen 20 Prozent. Jetzt richtig? Ul LI. In diesem Abschnitt werden wir also den Code zum Gestalten der Listenelemente unserer ungeordneten Liste schreiben . Jetzt können Sie hier eine Hintergrundfarbe zu einem Listenelement hinzufügen, aber ich werde das nicht hinzufügen, da das auf meiner Webseite nicht angezeigt wird. Sie können dies auf Ihrer Webseite tun, wenn Sie möchten. Jetzt schreibe ich text-align, center. Und dann schreibe ich eine Liste, dann den Strich und den richtigen Stil. Und ich schreibe hier keine. Dies wird uns im Grunde helfen , einen Horizont für die Liste zu erhalten. Jetzt lass B, richtig? Also gebe ich die Breite als 20 Px an. Nachdem wir die Ausgabe gesehen haben, können wir alle diese Dimensionen ändern, wenn wir wissen wollen , dass dies jetzt gegeben ist, und die Zeilenhöhe angeben, also line dann height, dx. Und dann langsamer. Dieses float-Attribut hilft ihm, sich zu positionieren. Also werde ich float left schreiben, damit es wirklich auf der linken Seite positioniert wird. Jetzt verwenden wir ein neues Attribut, das Sie in diesem Kurs noch nicht gelernt haben. Das heißt, der Verbündete wird schweben. Hover ist etwas , das Ihnen hilft, Ihr Menü anders zu gestalten. Das heißt, wenn Sie mit dem Mauszeiger auf einen bestimmten Menüpunkt zeigen, wird der Code, den Sie in diesem Hover-Abschnitt schreiben , dort angewendet. Also lasst uns schreiben und in der Ausgabe können wir sehen, was dort passiert. Verwenden Sie also das Tag Transform und dann rightScale. Jetzt innerhalb dieser Rate, 1,5 und dann 1,5. Nun, klar, Farbe. Wenn Sie also mit der Maus auf Ihre Menüelemente zeigen, möchten wir, dass einige Eigenschaften dieses Elements geändert werden. Anfangs wird es also schwarz sein, aber wenn ich den Mauszeiger darauf bewege, möchte ich, dass es weiß ist. Dafür müssen wir nun eine Hintergrundfarbe festlegen, da unsere Hintergrundfarbe des Elements bereits weiß ist, sodass Weiß auf Weiß nicht sichtbar ist. Stellen wir also eine Hintergrundfarbe ein. Jetzt werde ich sagen, dass die gleichen Farben für den Header-Bereich festgelegt wurden. Also kopiere ich einfach diesen Hex-Code und schreibe ihn bis. Kehren wir nun zu unserer home.html zurück. Jetzt befinden sich unsere Menüelemente unter diesem Anker-Tag. Wie wir wissen , hat dieser Anker einen Standardstil , der blau und unterstrichen sein wird. Das wollen wir also nicht auf unserer Webseite haben. Wir wollten es für das richtige E auf eine andere Art und Weise stylen für das richtige E auf eine andere Art und Weise Und in dieser richtigen Farbe. Und dann schreibe keine. Dann schreibe schwarz. Dann schreibe Text. Dekoration Keine. Wir werden also keine zugrunde liegende Sache haben. Sie können die Schriftgröße und die Schriftgröße angeben . Angenommen 20 Pixel. Wir sind jetzt fertig. Sparen wir uns das jetzt. Gehen wir zu home.html und führen es aus und sehen uns die Ausgabe an. Hier sind wir mit unserem Essen ist falsch. Also hier sind drei Abschnitte nach Hause. Wie Sie sehen können, zoomt Ihr Mauszeiger auf diesem Menü, sobald Sie den Mauszeiger auf diesem Menü haben , die Entfernung, es zoomt heran und es zeigt dort eine Hintergrundfarbe. Das war also die Hubbard-Sache , die wir in unserem CSS-Code gemacht haben. Das sind also die Menüs, die wir haben. Wenn Sie jetzt auf Home klicken, wird es hormonell weitergeleitet Wir können nirgendwohin gehen, aber wir haben noch nicht über uns und Kalorien nachgedacht. Sie konnten also nirgendwohin gehen, indem Sie auf diese Menüs klicken. Also sind wir mit dem Entwerfen des Hauptteils fertig. Im nächsten Video erfahren wir, wie Sie den Rest Ihrer Webseite gestalten. Danke, dass ihr Jungs zuschaut, bleibt dran, um mehr zu erfahren. 52. Blog-Website – So fügen Sie Hauptinhalte hinzu: Hallo zusammen, und willkommen zurück zum Kurs. In diesem Video werde ich Ihnen zeigen, wie Sie Ihrem Blog Inhalte hinzufügen. Gehen Sie dazu zum Editor Notepad Plus Plus. Gehe jetzt zu home.html. In dieser home.html, nachdem Sie mit Ihrem Menü fertig sind, dann nach der Menüabweichung, richtig? Abweichung, und gib die Klasse als Inhalt an. Schließen Sie jetzt das Divisions-Tag. Zu diesem Inhalt werden wir unsere Inhalte hinzufügen. Da es sich also um einen Food-Blog handelt, werde ich einige Lebensmittel und die Rezepte mit den Bildern usw. hinzufügen . Also werden wir im Grunde drei Dinge tun , nämlich eine, wir einen Namen geben müssen unser Essen, um das wir in unserem Blog trauern. Wir müssen uns also einen sehr schönen und lukrativen Namen ausdenken. Also musst du das zuerst tun. Die zweite Sache ist, dass Sie ein schönes Bild von dem Essen geben müssen , das Sie zubereitet haben. Und die dritte Sache ist das Rezept des Essens, das den Nutzern Ihres Blogs hilft zu verstehen, wie das gemacht wird. Beginnen wir zunächst mit dem Namen des Lebensmittels. Jetzt verwende ich den Header H5. Und wenn das hier ist, schreibe ich den Namen meines Essens auf. Jetzt sollte Ihr Name attraktiv und lukrativ sein, damit die Benutzer Ihr Blog nutzen und das Rezept von dort abrufen können. Mein erstes Lebensmittel ist also Sandwich. Also lass mich meinem Sandwich einen Namen geben, der köstlich ist. Sandwich. Das wird also der Name meines Sandwichs sein. Jetzt musst du ein Bild geben. Also schreibe IMG und dann SRC. Also musst du die Quelle dafür einstellen, geh zu einem dx2. Jetzt habe ich schon dieses Bild von Sandwich. Also, was ich tun werde, ist von Hill geschnitten und dann in den Ordner zu gehen in dem ich diese home.html zu Hause habe dot css. Erstellen Sie sofort einen neuen Ordner und geben Sie den Namen images. Das Bild, das Sie für Ihre Website verwenden , wird in diesem Bilderordner gespeichert. Jetzt füge ich es einfach hier ein. Also hab ich mein Sandwich. Sie kehren jetzt zu Notepad Plus, Plus zurück und schreiben dann Ihre Quelle, das sind Bilder Schrägstrich. Und dann geh zurück zum Ordner und sieh dir den Namen des Bildes an. Es ist also Sandwich-Punkt-JPG, richtig? Sandwich, DBT. Du bist fertig mit dem Bild. Jetzt geben wir die Höhe und Breite sowie andere Attribute des Bildes in unserem CSS-Bereich der Startseite an. Jetzt, nach der Messung, um das Rezept zu geben. Also werde ich dafür das p-Tag verwenden. Und dann schreibe das Rezept. Dann schließe das p-Tag. Und hier schreibst du VR. Und dann noch ein P-Tag. Ich habe das Rezept schon hier geschrieben. Das ist das Chutney und so. Also kopiere ich dieses Ding einfach und schreibe es dort hin. Also kopiere ich es und füge es zwei ein, das ist mein Rezept und schließe das p-Tag. Wir sind also fertig mit unserem Rezept und Bild und dem Titel. Speichern Sie das und lassen Sie uns zu Warm Dot CSS gehen , um diese Dinge zu entwerfen. Beginnen Sie jetzt mit dem Punkt-Inhalt , der unsere Abteilung war. Und dann innerhalb dieser, richtig, die Position, die absolut ist. Und dann gib die Breite und Höhe an. Es muss also angenommen werden 80 Prozent und dann Höhe. Wir möchten also, dass unser Inhalt den Bildschirm nach dem Menü und der Kopfzeile einnimmt. Wir müssen also berechnen, wie viel Höhe von der Kopfzeile eingenommen wird. Und der Hauptteil dafür, Hier ist unser Kopf allerdings mit 20 Prozent der Höhen - und Menütexte, 15 Prozent. Hier hatten wir zwei Prozent der Lücke zu insgesamt siebenunddreißig Prozent gegeben . Jetzt wollen wir auch gewisse Lücke zwischen dem Menü und dem Inhalt. Geben wir also die Höhe als 60% an. Dann wird der obere Bereich als 40 Prozent angesehen, einschließlich der Kopfzeile und des Menüs. Der Schreibtisch wird also jetzt 60% die Höhe unseres Inhalts haben. Also rechts oben und dann 40% geben. Und das Geschenk in Prozent hinterlassen. Und das war's. Jetzt, stimmt's? H5. Und dann wollen wir die Schriftgröße festlegen. Also richtige Schriftseiten. Und dann schreibe, angenommen 38 px. Gestalten wir nun unseren Bildbereich. Also richtig, Bild IMG. Und dann gibt dies die Höhe und Breite Ihres Bildes an. Also richtige Höhe. Stellen wir nun die Höhe auf 300 PX Pixel und dann die Breite auf 500 px ein. Wenn Sie fertig sind, kehren Sie zu home.html zurück. Lassen Sie mich dafür BR schreiben, um es in der nächsten Zeile zu machen. Schreiben Sie also einfach weiter BR, um es besser zu organisieren. Wir sind fertig. Jetzt spar dir das. Lassen Sie es uns jetzt ausführen und die Ausgabe sehen. Also hier ist unser Rezept und das Bild des Sandwichs, das ein köstliches Sandwich ist. Das ist also unsere Homepage , auf der wir unsere Inhalte haben. Jetzt können wir unserer Webseite sogar mehr Inhalte hinzufügen. Was das geht zurück zu Notepad Plus, Plus Editor. Und kopiere diesen Teil einfach von fünf Jahren bis zum Absatz. Also kopiere das und füge es in ein. Der nächste Artikel für mich wird Pasta sein. Dafür schreibe ich freche Pasta. Jetzt muss ich wieder ein Bild geben. Dafür kannst du das Bild herunterladen oder du machst einfach Pasta und gibst dann das Bild. Also hier ist mein Pastor-Bild. Ich schneide es einfach aus und füge es in mein Bild ein, einen Abschnitt des Food-Blogs. Füge es ein. Also hier ist Pasta Dot JPEG statt Sandwich-Nudeln. Also stellst du dir sortiert vor. Jetzt dreht es sich einfach, um das Rezept dafür zu ändern. Gut das raus. Und das Rezept für Pasta habe ich schon geschrieben. Also kopiere ich das einfach und füge es ein. Also muss ich ein paar VRs geben, nur um meine Sachen zu organisieren. Wenn Sie fertig sind, speichern dies und führen Sie es aus, um die Ausgabe zu sehen. Also hier ist meine Webseite für diese Welt, und das ist meine Homepage. Und hier ist mein leckeres gegrilltes Sandwich mit Rezept. Und dann habe ich meine salzigen Nudeln mit dem Rezept. Auf diese Weise können Sie so viele Gerichte hinzufügen , wie Sie möchten. Wenn du einen Modeblog machst, kannst du dein Bild hinzufügen. Sie können Ihre Videos sogar zu Ihrer Webseite hinzufügen. Danke, dass ihr euch dieses Video angesehen habt, Leute, bleibt auf dem Laufenden. 53. Blog-Website – So erstellen Sie eine Galerie: Hallo zusammen, willkommen zurück zum Kurs. Wir müssen also noch zwei weitere Seiten entwerfen, und dann sind wir mit unserem Block fertig. In diesem Video werde ich den Galeriebereich dafür entwerfen . Gehen Sie zum Editor Plus Plus Editor und erstellen Sie dann eine neue Datei. Beginne nun mit der grundlegenden Struktur einer HTML-Seite. Wir sind also mit der Grundstruktur fertig und ich habe den Titel als schuldig vergeben. jetzt im Abschnitt body Schreiben Sie jetzt im Abschnitt body das Tag H1. Und dann schreibe Galerie. Kein geschlossenes H1-Tag. Und ich werde ein paar Stylings mit Inline-CSS schreiben. Also werde ich es zentriert ausrichten, also rechts, text-align. Und dann schreibt und weiß es nicht. Sie hatte eine Abweichung. Das Tag der Abweichung. Geben Sie nun den Klassennamen als Foto an. Sparen wir uns das jetzt. Denken Sie daran, dass Sie dies in demselben Ordner speichern müssen , in dem Sie die anderen Webseiten gespeichert haben . Also hatte ich im Food-Blog auf meinem Desktop gespeichert. Also speichere ich es im selben Ordner. Wählen Sie also einen Food-Blog aus und geben Sie Ihrer HTML-Seite einen Namen. Ich gebe Galerie-Punkt-HTML. Jetzt spar dir das. Jetzt innerhalb dieser Abweichung, richtig, IN-Cheat, da deine Galerie Bilder haben muss. Also IMG, also lass uns sehen. Wir werden Bilder eines Blocks hinzufügen. Also dafür richtige Bilder und dann Slash Sandwich Dark GPG, wie wir dies in unserem vorherigen Video hinzugefügt hatten. Und dann P1, dass der Benutzer, wenn er auf dieses Bild klickt, es im Vollbildmodus geöffnet wird. Verwenden Sie dazu das Anker-Tag und dann das rechte Ziel. Und dann schreibe Unterstrich, dann leer. Dadurch wird das Bild in einem neuen Fenster geöffnet. Schreiben Sie jetzt H ref equals und schreiben Sie dann Bilder Slash Sandwich, Punkt JPG. Kein Endband konnte markiert werden. Nun wollen wir unserem Bild für dieses Recht etwas Höhe und Breite hinzufügen , Höhe ist gleich und dann 300 px und Breite als 500 Px schreiben . Also sind wir fertig. Speichern wir das jetzt und führen es aus. Das ist also unsere Galerie mit diesem Bild. Wenn Sie jetzt darauf klicken, wird das Bild im Vollbildmodus angezeigt. Jetzt können wir weitere Bilder hinzufügen. Kopieren Sie dazu diesen Teil, diese ganze Abweichung, und fügen Sie ihn ein. Jetzt können Sie in der Quelle eine andere Quelle angeben. Also werde ich die Auswahl der Pasta, Pasta Lot JPEG hinzufügen. Und jetzt hier statt Sandwich, oder? Pasta. Jetzt möchten wir, dass sich dieses Bild rechts neben diesem Bild befindet. Dafür müssen wir also ein bisschen stylen. Also richtiger Stil innerhalb des Kopfteils und gleichzeitig beendet. jetzt im Stilbereich Verwenden Sie jetzt im Stilbereich die Klasse Punktfoto. Und dann schweben Sie in diesem, richtig, schweben. Und dann heb. Jetzt spar dir das. Lassen Sie uns jetzt rennen und uns die Ausgabe ansehen. Wie Sie hier sehen können, verwenden Sie Ihr gegrilltes Sandwich. Hier ist dein salziger Pastor, und wenn du darauf klickst, beschränke die Geschenke, die dir gezeigt werden. Was wir nun tun müssen, ist diesen Galeriebereich mit unserer Homepage zu verknüpfen. Gehen Sie dazu zu home dot HTML. Und hier ist es, wie Sie sehen können, in gallery dot HTML verankert. Lassen Sie uns jetzt home.html ausführen. Wenn Sie auf Galerie klicken, ist hier Ihre Galerie. Jetzt, da du von dir zurück bist, ist hier deine Homepage und hier ist deine Galerie. 54. Blog-Website – So erstellen Sie Über uns Seite: Hallo zusammen, willkommen zurück zum Kurs. Wir sind schon fertig mit Homepage und Galerie. In diesem Video erfahren Sie, wie Sie Ihre „Über uns“ -Seite gestalten. Gehen Sie dazu zu Notepad Plus Plus und erstellen Sie dann eine neue Datei. Beginne nun mit der grundlegenden Struktur einer HTML-Seite. Nun, in dieser Seiteneinheit, um über den Blocker zu schreiben. In diesem Fall bist du es dafür. Ich habe mir kein Bild von dir oder dem Blogger gemacht? Nein. Wählen Sie dazu eines Ihrer Bilder aus. Ich habe also ein Bild von mir auf meinem Desktop, also schneide ich es einfach aus. Und in meinen Food-Blog-Ordner, im Bilderordner, füge ich es ein. Jetzt. Lassen Sie mich dieses Bild umbenennen. Also geh zu dem Namen und gib ihm einen Namen. Angenommen, nein, gehen Sie zu Ihrem Editor Plus, Plus Editor. Und dann in den Quellbildern, dann Schrägstrich, dann Punkt, JPG. Geben Sie nun die Höhe und Breite an. Die Höhe entspricht 300 px und die Breite entspricht 300 Px. Wir sind also fertig mit der Höhe und Breite. Jetzt müssen Sie den Abschnitt „Über“ schreiben . Beginnen Sie dafür also mit einem Absatz-Tag. Jetzt habe ich bereits über mich selbst geschrieben. Also kopiere ich es einfach und füge es ein. Also werde ich einige VRs geben , damit es auf dem Bildschirm gut aussieht. Schließen Sie jetzt das p-Tag. Bevor wir diese Datei speichern, gehen wir zu home.html und finden heraus, welchen Namen wir für diese About-Seite verwendet haben. Also hatten wir ungefähr Punkt-HTML verwendet. Nennen wir das in ähnlicher Weise about.html. Also im Food-Blog-Ordner bin ich schon im Food-Steinschlag. Lassen Sie mich also über Punkt-HTML schreiben. Speichern Sie das jetzt und führen Sie es aus, um die Ausgabe zu sehen. Also hier ist mein Foto. Hier geht es um mich. Jetzt kann ich die Höhe und Breite Ihres Fotos ändern . Also entsprechend angepasst. Also lass mich die Breite als 200 angeben. Speichern Sie dies und noch einmal c. Auf diese Weise können Sie gerade hinzufügen Es sieht gut aus. Jetzt geht es um meine Biografie. Das ist eine kurze Biografie. Sie können Ihrer Biografie noch viele weitere Dinge hinzufügen. Hier können Sie auch einige Links zu Ihrem Social-Media-Konto hinzufügen , damit sie Sie kontaktieren können. Dafür. Gehe zu Google und suche nach Bildern. Bilder von Facebook. Wählen Sie ein Bild und die Längengrade dieses. Klicken Sie also darauf und klicken Sie dann mit der rechten Maustaste darauf Klicken Sie auf Bild speichern unter und speichern Sie es im Ordner für den Block im Ordner images. Also heißt es Punkt herunterladen PNG. dauert so lange, bis es so bleibt. Es ist gespeichert. Kehren wir nun zu Notepad Plus Plus zurück. Jetzt hier, schreibe IMG, dann SRC, dann gleich, und dann schreibe Bilder Slash Download Punkt PNG. Jetzt werden wir dies auf der Facebook-Seite oder dem Facebook-Profil verankern . Ich empfehle Ihnen daher, in Facebook ein Stück mit dem Namen Ihres Blogs zu erstellen dem Namen Ihres Blogs und diese Seite dann mit diesem Bild zu verknüpfen. Für die Verlinkung verwenden wir also das Anker-Tag. Also hier ist unser Anker-Tag. Schreiben Sie jetzt H ref ist gleich. Also müssen wir den Link bekommen. Gehen Sie also zu Ihrem Browser und dann zu Facebook. Und melden Sie sich dann bei Ihrem Konto an. Ich melde mich bei meinem Konto an. Von hier aus. Sie können Seiten erstellen. Da ich also bereits eine Seite für diesen Block erstellt habe, gehe ich direkt darauf zu. Also klicke auf Seiten. Und hier ist meine Foodies-Welt. Also klicke darauf. Jetzt haben Sie hier eine Option namens „ Strand mit der Zehe“. Also klicke darauf. Das ist dein Blog und der Besucher wird es so sehen. Da habe ich gerade einen Blog erstellt. Es gibt also noch keine Beiträge. So können Sie Ihre Seite erstellen und sie wird abgerufen, und Sie können auch Ihr Blog veröffentlichen. Kopieren Sie nun diesen Teil und fügen Sie ihn in H ref ein. Jetzt spar dir das. Lassen Sie uns rennen und uns die Ausgabe ansehen. Hier finden Sie uns auf Facebook. Wenn Sie darauf klicken, werden Sie auf Ihre Seite weitergeleitet. Sie können auch Ihre anderen sozialen Handles hinzufügen, die nur Twitter oder LinkedIn oder andere Profile enthalten, wenn Sie dies haben. Kehren wir nun zu Notepad Plus, Plus zurück. Und vom Home-Punkt-HTML aus wird es ausgeführt. Und lassen Sie uns auf Über uns klicken. Wir haben also das BGO. 55. Blog-Website – Website gehen: Hallo zusammen, willkommen zurück zum Kurs. Wir sind also an einem Ende dieses Kurses angelangt. In diesem Video werde ich Ihnen zeigen, wie Sie Ihre Blog-Website starten und live schalten können. Dafür müssen Sie also eine kleine Änderung vornehmen. Gehen Sie also zu Ihrem Food-Blog-Ordner. Dann machen Sie statt home.html einfach index.html. Gehen Sie jetzt zu Ihrem Browser und suchen Sie dann nach einem Webhost. Schreiben Sie also Triple 0 wo Post. Dies ist also im Grunde eine kostenlose Hosting-Plattform, auf der Sie Ihre Website kostenlos starten können und dafür kein Geld benötigen. Da es sich also um ein Testprojekt handelt, werden wir in unserem Fall dieses kostenlose Hosting verwenden. Wenn Sie Ihr Blog auf kommerzielle Weise starten möchten, dann können Sie natürlich von einigen kommerziellen Hosting-Plattformen wie Host, Gator hosten, etc. Klicken Sie nun auf diesen Link und dann können Sie eine kostenlose Anmeldung. Also klicke darauf. Ich muss die E-Mail-Adresse und das Passwort sowie den Namen der Website angeben. Geben Sie mir also Ihre E-Mail-Adresse, richtig zu wissen, geben Sie ein passendes Passwort ein und schreiben Sie dann den Namen Ihrer Website. Also in meinem Fall werde ich Foodies World schreiben. Das wird also der Name meiner Website sein. Klicken Sie jetzt auf. Hosten Sie sich kostenlos. Überprüfen Sie schnell Ihr E-Mail-Konto dafür. Logge dich in dein E-Mail-Konto ein. Hier finden Sie den Mittelwert aus einem Beitrag. Klicken Sie also auf E-Mail verifizieren. Jetzt ist Ihre E-Mail verifiziert. Also klicke auf diesen Dateimanager. Klicken Sie also auf Dateien hochladen. Jetzt. Hier sind bereits zwei Dateien, die öffentliches HTML sind, und eine andere, die TMP ist. Und jetzt ist das public.html. In diesem Ordner müssen Sie jetzt alle Ihre Dateien behalten. Also geh dafür zu deiner nächsten Tube. Hier ist dein Food-Blog und klicke mit der rechten Maustaste darauf und klicke auf Okay, also konvertiere ich es in eine gelesene Datei. Jetzt. Kehren Sie jetzt zu Ihrem Browser zurück. Klicken Sie dann auf Dateien hochladen, klicken Sie auf Dateien auswählen und gehen Sie dann zu Ihrem Desktop. Jetzt. Klicken Sie auf Food Blog dot rare und öffnen Sie es. Klicken Sie nun auf Upload. Wie Sie sehen können, wurde es hier hochgeladen. Wählen Sie es aus und klicken Sie mit der rechten Maustaste darauf. Und Sie können diese Extraktionsoption sehen. Also klicke darauf und klicke auf Extrahieren. Jetzt haben wir alle unsere Webseiten hier ausgewählt. Jetzt müssen wir einen anderen Ordner erstellen. Dafür wird ein Ordner erstellt und ihm den Namen als Bilder gegeben. Klicken Sie nun auf Erstellen. Ihr Ordner wurde erstellt. Doppelklicken Sie nun auf diesen Bilderordner. Klicken Sie nun auf Dateien hochladen und wählen Sie dann Dateien aus. Gehen Sie dann in den Ordner images und wählen Sie alle relevanten Bilder aus. Und dann öffne und lade dann hoch. Also werden deine Bilder hochgeladen. Kehren wir nun zu öffentlichem HTML zurück. Wählen Sie nun diesen Themenordner und klicken Sie mit der rechten Maustaste und löschen Sie ihn Da wir keine redundante Datei auf unserer Website haben wollen. Jetzt haben wir auch in diesem öffentlichen HTML diese HD-Achse. Löschen wir es also auch, da wir es nicht brauchen . Also sind wir fertig. Gehen Sie jetzt zurück zum Dateimanager und klicken Sie einfach auf Ihre Website. Also hier ist deine Webseite. Klicken Sie nun auf Galerie. Sie haben Ihre Galerie und können dann auf Über uns klicken. Sie haben also Ihren About-Bereich und können auch auf Facebook auf „ Finde uns“ klicken. Es wird auf die Facebook-Seite umgeleitet. Unsere Website ist also in Ordnung, jetzt ist es das Leben. Das Ding ist also für das kostenlose Hosting. Wenn Sie ein kostenpflichtiges Hosting haben, erhalten Sie diese Art von Wasserzeichen nicht. Das ist also deine Website. Tun Sie jetzt eine Sache. Melden Sie sich von Ihrem Konto im Webhost ab. Dafür. Klicken Sie auf Abmelden oder Abmelden. Sie haben sich erfolgreich abgemeldet. Klicken Sie nun auf eine neue Registerkarte und schreiben Sie dann den Namen Ihrer Website. Das ist also im Grunde mein Webseiten-Name. Also wenn ich darauf eingehe, kann ich hier meine Website sehen. Ihr Blog ist jetzt live. Jetzt können Sie die URL Ihres Blogs zu Ihrem Instagram-Handle hinzufügen . Und Sie können die Website auch mit dem Facebook-Handle und den Facebook-Seiten usw. teilen . Vielen Dank, dass Sie ein wunderbarer Lerner sind. 56. Es ist Zeit für ein Kursprojekt: Hallo Leute, willkommen zurück zum Kurs. Jetzt ist es Zeit für das Klassenprojekt. Für das Klassenprojekt müssen Sie eine Blog-Website erstellen. Für das Thema der Blog-Website können Sie ein beliebiges Thema auswählen. Ich kann Ihnen einige Ideen wie Essen, Reisen, Mode, Schönheit, Technologie, Life-Hacks usw. geben. Die Blogger-Website muss den Home-Bereich, eine Galerie über uns und einige Social-Media-Links enthalten . Einige Tipps und Tricks für dich. Verwenden Sie immer einen Codierungseditor, da es Ihnen als Entwickler das Leben als Entwickler wirklich erleichtert , wenn wir unseren Codierungs-Editor verwenden. Als Nächstes müssen Sie beim Schreiben Ihres Codes den richtigen Einzug geben. Die richtige Einrückung hilft uns wirklich , da es viele Codezeilen geben wird und Einrückungen dazu beitragen, den Code lesbarer zu machen. Und zu guter Letzt geraten Sie nicht in Panik, wenn Sie nicht weiterkommen. Es gibt viele Quellen im Internet, in denen Sie nachschauen können, wie zum Beispiel W3-Schulen. Sie können dort Lösungen für Ihre Fragen finden, oder Sie können auch hier Fragen stellen. Jetzt ist es Zeit für das Ergebnis. Das Ergebnis ist der Screenshot der Blog-Website, die Sie erstellt haben. Nachdem Sie mit dem Projekt fertig sind, müssen Sie diesen Screenshot der Website teilen. Ich wünsche dir alles Gute. 57. Bonus : So fügen Sie Emojis hinzu: Willkommen zurück im Kurs. In diesem Video werde ich Ihnen zeigen, wie Sie Bilder hinzufügen können, und Sie werden es wiederholen. Öffnen Sie dafür Ihren Editor. Also werde ich einfach Notepad öffnen. Sie können auch Notepad Plus, Plus oder einen anderen Editor Ihrer Wahl verwenden. Schreiben Sie jetzt einfach die grundlegende Struktur einer HTML-Seite. Also fange ich mit Band an und spüre mich dann zu. Kopf. Geben wir dem einen Titel. Nehmen wir an, die Mandschus, richtig? Vergessen Sie nicht, auch dieses Meta-Tag mit einzubeziehen. Also gebe ich ihm einen Wert. Damit das Metall aushärten kann, sollte dieser Wert UTF acht haben. Dann vergiss das einzugeben. Und dann machen wir mit der Leiche weiter. Jetzt innerhalb des body-Tags. Geben Sie einfach eine Überschrift, Emojis und eine Pause ein, um zur nächsten Spur zu gelangen, und dann ein p-Tag. Nun, von hier aus, wie jedes Bild, das Sie geben müssen, also brauchen wir diesen Dezimalwert dafür. Was wir also tun werden, ist Ihre HTML-Dezimalzahl. Okay? Also hier haben wir die Dezimalcodes für alle Emojis. Also lass mich das schnell öffnen. Sie haben also ein strahlendes Gesicht, sind mit Freudentränen konfrontiert. Fangen wir also damit an. Ich kopiere einfach den Dezimalwert, gehe zurück zum Editor und füge ihn einfach ein. Schließen wir dieses p-Tag und speichern diese Datei. Also speichere ich es auf meinem Desktop. Beschränke also t dot HTML und wo es ist und verkaufe es. Hab es gerettet. Öffnen wir es jetzt. Und ja, wir haben dieses Emoji, also machen wir es ein bisschen größer, damit wir es verstehen können. Also werde ich die Schriftgröße festlegen, Schriftart. Okay, also muss ich das Style-Tag geben. Und dann ist die Schriftgröße gleich. Das sieht besser aus. Also sparen. Kehren Sie zur Webseite und zur Freundschaft zurück. Keine Änderungen. Lass mich mehr draus machen. Okay, du solltest also nicht gleich benutzen, um meinen Fehler zu hören. Mal sehen, ob es sich ändert. Ja, wir haben einen größeren Berg. Kehren wir nun zu unserem Leitfaden zurück und verwenden einen anderen. Also nehme ich diesen. Also kopiere ich diese Dezimalzahl einfach vorwärts oder zurück in deinen Editor. Und dann füge ich es hier ein. Siehst rechts. Gehe zurück zur Webseite und aktualisiere sie und du hast das nächste Emoji. Auf diese Weise können Sie Emojis zur Wiederholung hinzufügen. Um dem eine größere Bedeutung zu geben, schreibe ich einfach etwas. Nehmen wir an, das ist mein Favorit und wir haben dieses Emoji. Also lass uns zurückgehen und uns erfrischen. Ja, das ist mein Favorit und das ergibt viel mehr Sinn. Auf diese Weise können Sie Emojis zu Ihren Webseiten hinzufügen , damit sie besser aussehen und für die Benutzer zugänglicher werden. Also danke, dass du dir dieses Video angesehen hast. Wir sehen uns in den nächsten Videos. 58. Bonus : Installiere Sublime Texteditor: Der Kurs. wir also mit den Installationen fort. In diesem Video zeige ich Ihnen, wie Sie den erhabenen Text herunterladen und installieren können . Gehen Sie also zu Google und suchen Sie nach Sublime Text. Und wir werden es hier haben. Klicken Sie also auf Download, die Windows-Version und Linux. Also werde ich mich für Windows 64-Bit entscheiden. Also klicke einfach darauf. Okay, du hast die Akte hier. Also klicke ich auf Speichern. Sobald Sie darauf klicken, wird ein Pop-up installiert, und Sie müssen einfach auf Weiter und Fertig klicken. Also da habe ich es schon heruntergeladen. Also zeige ich dir einfach, wie es aussieht. Dies ist unser erhabener Texteditor. Hier können Sie diese Ordnerstruktur für Ihr Projekt haben. Und dann haben Sie hier den Platz, in den Sie Ihren Code schreiben können. Vielen Dank, dass Sie sich dieses Video und bleiben Sie auf dem Laufenden. 59. Bonus : Jquery Einführung: Willkommen zurück im Kurs. Fangen wir also mit jQuery an. Jquery ist im Grunde genommen unsere JavaScript-Bibliothek. Es wird hauptsächlich für die Ereignisbehandlung und eine Animation für andere Zwecke verwendet. Kommen wir also zu unserer ersten Übung und sehen, wie jQuery funktioniert. Dafür müssen wir also nach jQuery CDN suchen. Jquery CDN. Cdn ist ein Content Delivery-Netzwerk. Die Verwendung des CDN hilft uns also , die jQuery-Bibliothek zu kontaktieren, die irgendwo gehostet wird, und wir müssen sie nicht installieren. Also verwende ich den neuesten. Also müssen wir das kopieren. Und lass uns unseren Editor öffnen. Also fange ich an, in Sublime Text zu programmieren. Öffnen Sie diesen Editor und beginnen Sie mit der grundlegenden Struktur einer HTML-Seite. Html. Und dann Right, das Head-Tag. Sie sind daran beteiligt, diesen Granny-Skriptcode in den Kopf zu portieren . Nein. Schütteln Sie bereit eins. Okay. Und jetzt müssen wir das CDN einfügen. Also füge ich es einfach hier ein. Okay? Nun, wenn das Body-Tag und ich Ihnen im Grunde genommen eine Art MCQ-Herausforderung zeigen , die Sie entwerfen können. Also werde ich es einfach überschreiben. Mcq-Fragen und das H2. Und dann weitere Fragen. Ich benutze H6. Vergiss nicht, eine Pause einzulegen. Also BI. Okay. Also eins. Dann schreib die Frage, wie ist das Wetter heute? Und dann, und H6. Ich bin wieder BR. Und dann können wir mit dem Schreiben der Optionen fortfahren. Ich verwende das p-Tag für die Optionen. Sie können auch die Tiefe verwenden. Also lass uns hier div verwenden. Und lassen Sie uns die Option Option E signieren. Okay? Und das Div-Tag. Und lass es uns stylen. Also, richtig, abgestanden. Und Schriftgröße. Angenommen 1 zu EM. Okay? Und geben wir ihm auch einen Ausweis. Also ID, dann gib einen Ausweis. Also werde ich die Idee von scope PT-1, Option eins, geben. Okay? Jetzt speichere ich das und lass uns sehen, wie es aussieht. Also rette es. Ich spare es mir bei Dexter auf. Name, richtig? Um Ein-Punkt-HTML abzuspielen. Spar dir das. Okay. Jetzt lass uns rennen und sehen, wie es aussieht. Also haben wir das, okay, diese Frage sieht sehr klein aus, also verwenden wir nichts anderes. Die Option sieht betroffen aus, die Schriftgröße ist gut. Ändern wir es von H6 auf etwas anderes. Vielleicht können wir H4 benutzen. Ja, wir können H4 benutzen. Also lass uns sparen. Und mal sehen. Mary wird geladen. Ja, es ist größer, aber immer noch nicht die gewünschte Größe. Vielleicht kann ich h reinstate gebrauchen. Ja, sieht perfekt aus. Das ist also eine Frage, die ich nur normale Frage stelle. Sie können keine Frage Ihrer Wahl beantworten , nur um zu verstehen, wie es funktioniert. Ist das Wetter heute und wir haben als Sonny eine Option. Und lass uns Adoptionen geben. Also vergiss BR danach nicht. Und noch etwas: Sie müssen dieser Unterteilung auch eine Höhe und Breite geben. Lassen Sie mich eine Höhe und Breite von 50 PXE angeben eine Höhe und . Okay? Kopieren wir nun diese und erstellen die anderen Optionen. Also lass es uns machen optionstool. Und dann entfernen Sie einfach sonnig, regnerisch und B Option B. Der Rest wird der gleiche sein. Gehen wir nun zur nächsten Option. Option drei und diese Änderung machen es Option C und dann trüb. Okay, also lass uns das speichern. Wir haben also sonnig, regnerisch und bewölkt. Okay. Ich muss die Breite vergrößern. Also lasst uns überspringen, was S 100 px. Und lassen Sie uns die Höhe bei 50 PXE belassen. Okay, außer was ist passiert? Es wurden 500. Dafür. Ja, jetzt sieht es absolut in Ordnung aus. Sie können so viele Optionen angeben, wie Sie möchten. Sie können auch Option D haben . Sobald der Benutzer eine Option auswählt, wird sie markiert. Okay? Schreiben wir jetzt das Drehbuch. Sie müssen lediglich ein Script-Tag öffnen. Okay? Keine Zilien. Dann. Was Sie tun müssen, ist wenn Sie ein Dollarsymbol und ein richtiges Dokument sind. Und dann habe ich mich fertig gemacht. Okay. Also dieses document.ready, was es tun wird, ist, wenn die Seite neu geladen wird, das ist das Dokument , das Stovepipes ist, eine Webseite, die bereit ist. Es wird diese spezielle Funktion aufrufen. Also müssen wir die Funktion dafür schreiben. Okay? Und dann solltest du Deck so schreiben. Okay? Und vergiss hier kein Semikolon. Das ist also die grundlegende Struktur von jQuery-Funktionen. Denken Sie daran und innerhalb dieser Zeit müssen wir jetzt unseren Code schreiben. Wann immer ein Benutzer über diese spezielle Option spricht, das ist Teilung hier, wollen wir, dass sich die Farbe ändert, okay? Also lass es uns schreiben. Richtiger Dollar. Wann immer wir dann einige Operationen auf der Webseite mit diesem Dokument ausführen möchten , werden wir jetzt eine Operation für dieses Div ausführen. Dafür müssen wir sie also hier schreiben. Okay? Und dann Punkt auf diese On-Funktion. Ähnlich unit, um diese Struktur zu bekommen, okay, in dieser ungeraden Funktion müssen wir dieses Ereignis schreiben. Das Ereignis wird also Maus und Maus sein und endet, wenn der Mauszeiger auf der Division schwebt. Also für die Mauseingabe schreiben wir eine Funktion. Und das wird die Operation beinhalten , die wir durchführen wollen. Was wir also tun wollen, ist , dass sich die Farbe und die Hintergrundfarbe dieser bestimmten Option ändern, wenn wir uns mit einer Antwort die Hintergrundfarbe dieser bestimmten Option ändern, wenn wir uns mit einer befassen. Also lass uns das sagen. Also nochmal, in diesem Dollar und dann in den Klammern müssen Sie das Limit schreiben. Also hier ist das Element D1. Deshalb schreibe ich dieses, dieses und dann dot CSS, weil wir den Stil der Division ändern wollen . Das heißt, wir wollen etwas Hintergrundwissen machen. Also müssen wir CSS verwenden. Dann können wir Hintergrundfarbe schreiben. Okay? Dann müssen wir ihr einen Wert geben. Also schreibe ich spät. Wenn also eine Option schwebt, ändert sich die Hintergrundfarbe in hellgrau. Und wenn die Maus nicht mehr auf dieser Option schwebt, wird sie wieder weiß. Also auch dafür müssen wir die Veranstaltung schreiben, also ist das meiste Blatt. Und dann ein Doppelpunkt. Und dann funktionieren. Und dann vergiss hier kein Komma , denn wir schreiben viele Ereignisse. Also dann ähnlich, dieses Punkt-CSS und dann die Hintergrundfarbe. Jetzt wollen wir, dass es wieder nach rechts von mir wechselt. Das ist also erledigt. Was wir jetzt tun müssen, ist ein Ereignis für sie auszurichten. Klicken Sie auf Okay, wenn wir auf eine Option klicken, muss sich die Farbe ändern. Nehmen wir an, die richtige Option ist das Senden. Jedes Mal, wenn wir darauf klicken, wird sich seine Farbe ändern. Okay? Also lass uns eine Sache machen. Was müssen wir also tun, nicht in dieser seltsamen Funktion, also endet es hier. Danach müssen wir diese Funktion schreiben. Also werde ich jetzt Hash oder BP schreiben , wenn ich die Ideen für die Verwendung der ID verwende, um dieses Hash-Symbol, Hash OPT eins und dann Punkt zu verwenden. Und was ist das Ereignis klicken, klicken und dann schreiben Funktion. Okay, und vergiss hier kein Semikolon. Jetzt werde ich sofort operieren. Also nochmal, Dollar. Dann können wir diesen Punkt und dann CSS und dann die Hintergrundfarbe schreiben . Und dann sauber. Okay? Als nächstes, wann immer diese Option ausgewählt ist, müssen wir jetzt, auch wenn die Maus darüber schwebt, den Hintergrund als unsauber belassen. Also dafür nochmal. Und das und dann Punkt c. Es tut mir leid, mein Mausblatt. Wir wollen es für Maus live machen. Also nochmal, Funktion was zu tun ist, wenn die Maus geht. Wieder ein Semikolon hier. In Ordnung? Dann müssen wir die Operation schreiben, die das ist, und dann dot css und dann wieder Macron-Farbe. Und dann dazwischen, also sollte es bleiben. Okay. Das ist also zu deinem Recht und das war die richtige Antwort. Lassen Sie uns nun die Dinge mit überhaupt einstellen und Option zwei und Option drei nachbessern. Also werde ich einfach dieses Control V kopieren. Jetzt wird anstelle von Option eins Option zwei, dann ein Komma und dann die Option zum Ausruhen angezeigt. Wenn jetzt darauf geklickt wird, ist die Hintergrundfarbe rot, da sie alle n groß sind. Also lies und selbst wenn die Maus geht, heißt es wirklich. Sparen wir uns das auf. Jetzt. Sehen wir uns die Ausgabe an. Einige schweben auf sonnigem, regnerischem, bewölktem Also ja, alles funktioniert gut. Immer wenn ich nur darüber schwebe, wird es für alle Optionen grau. Und wenn ich keinen Hunger habe, bewege ich einfach meine Maus weg. Es läuft gerade immer noch darauf. Und lassen Sie uns auf die Option Hinzufügen klicken. Geklickt. Okay? Also lies das. Regnerisch ist keine Option. Okay. Jetzt klicken wir auf Sonntag und es ist grün. Also ja, sonnig ist die richtige Option, die wir gewählt haben. Auf diese Weise können Sie alle Ihre Fragen stellen und einfach einen MCQ-Fragebogen erstellen und ihren Freunden und Kollegen versuchen. Also ich hoffe dir hat dieses Video gefallen. Danke fürs Zuschauen. 60. Bonus - Jquery Umschalten: Willkommen zurück im Kurs. Ich hoffe, dir hat das letzte Tutorial gefallen. Gehen wir nun zu unserer nächsten Übung über. Für die nächste Übung müssen Sie lediglich Ihren Editor öffnen. Und dann erstelle ich eine neue Datei. Und dann kopiere einfach den ganzen Code. Okay? Und das brauchen wir nicht mehr, also entferne ich es einfach. Okay? Und wir wissen auch, dass wir das nicht brauchen. Wir haben also wieder eine Grundstruktur. Wangenfett wird es sein und trainieren. Okay, jetzt werden wir hier Toggle implementieren. Schauen wir uns an, wie es funktioniert. Dafür müssen wir also zwei Panels erstellen . Lass uns auschecken. Dafür müssen wir also zwei Div-Tags erstellen. Also dann brauche ich Thema. Und dann musst du einen Themennamen schreiben. Also nimm an, Wange bereit? Sie können hier alles Ihrer Wahl schreiben. Ich schreibe es nur, damit du es verstehst, okay? Es ist bereits verschuldet. Jetzt, wenn es ein weiteres div erstellt, wird dies die Beschreibung dieser Themenbeschreibung sein. Und dann werden wir eine Beschreibung schreiben, die Java für gleichmäßige Handhabung etc. Okay, also haben wir die Beschreibung jetzt div tag eingeben. Jetzt lass uns das stylen. Also werde ich jetzt einfach das Tag stylen, oder? Hash. Und dann Thema und Koma-Hash-Beschreibung. Also mache ich das Padding und dann text-align. Also text-align, wir zeigen den Anreiz, den wir in der Mitte geben und links, um die linke und rechte Seite sicherzustellen. Es fühlt sich richtig an, richtig, es wird das Richtige zeigen. Also nochmal, geben wir ihm eine Hintergrundfarbe. Geben wir ihm jede Farbe wir geben können, vielleicht gelb. Okay. Und dann, wenn es eine Grenze geben könnte. Also gebe ich dir einen soliden Rand, ein px. Und geben wir ihm auch eine Randfarbe. Also lass es sein. Das sieht gut aus. Jetzt müssen wir die Beschreibung verstecken. Wenn wir also auf das Thema klicken, muss die Beschreibung erscheinen. Also dafür die Polsterung. Also machen wir ein Padding von 50 PXE und rechte Anzeige. Keine. Okay, wir sind fertig mit dem Styling. Also lass uns das speichern. Ich werde es als g-Punkt-HTML auf dem Desktop speichern . Also C. Und lass uns rennen und sehen, wie es aussieht. Ja, Karfreitag. Aber immer wenn ich darauf klicke, kann ich die Beschreibung nicht sehen. Okay, also lass uns das mit jQuery machen. Was wir jetzt tun müssen, ist wieder Dollardokument, Bereitschaftsfunktion. Vergiss das Semikolon nicht. Okay, also innerhalb dessen müssen wir die Ereignisse schreiben. Also Dollar-Hash-Thema. Also, wenn wir auf das Thema klicken, die Beschreibung, Lassen Sie uns Schritt sehen, dass das Ereignis klicken wird. Okay, und dann die Funktion. Wenn sie jetzt auf das Thema klicken, muss die Beschreibung ansprechend sein. Also Dollar, Hash-Beschreibung Punkt etwas dunkler. Wir können die Zeit schreiben. Ich meine, die Art von Problem, die du willst. Also sollte es schnell sein, sollte nicht langsam sein. Also lass es mich langsam angehen und ich zeige dir, wie du die Zeit dafür einstellen kannst. Also ja, langsam. Und ich denke wir sind fertig. Also lass uns das speichern. Laden wir die Seite neu und klicken auf jQuery. Also ja, wir können die Beschreibung jetzt sehen. Und wenn Sie auf Zurück klicken, wird es ausgeblendet. Es wird also im Grunde genommen umgeschaltet. Okay? Kehren Sie jetzt zum Editor zurück. Wenn Sie also das Timing für dieses Ding festlegen möchten, nehmen wir an, dass es in fünf Sekunden erledigt ist. Du kannst also fünftausend schreiben, ja. Okay. Und speichern Sie das und aktualisieren Sie es. Wenn Sie also darauf klicken und Städte öffnen, und wenn Sie diese schließen, schließen Sie diese sehr langsam. Sie können das Timing hier nach Ihrer Wahl festlegen. Und wenn ich es schnell setze und die Anführungszeichen nicht vergesse, speichere das und lade es neu. Und ja, es öffnet sich sehr schnell. Also ja, hier dreht sich alles um Toggle. Danke, dass du dir dieses Video angesehen hast. Bleiben Sie auf dem Laufenden. 61. Bonus : Jquery Animation: In diesem Video zeige ich Ihnen, wie Sie Animationen mit jQuery ausführen. Gehen Sie dazu zu Ihrem Editor. Okay, also werde ich einfach den Code aus der ersten Übung kopieren , die ich für jQuery vorhersage. In diesem Fall sehen Sie, welche Schmerzkontrolle und manipulieren Sie bestimmte Dinge , um diese Übung durchzuführen. Lassen Sie das nun eine MCQ-Frage sein. Und statt dieser Frage schreibe ich wie ich. Und für die Optionen werde ich das sonnig sein lassen. Ich sage nicht Lass das ja sein. Okay. Und die nächste Option, entfernen Sie die Annahme. Sieht gut aus. Und jetzt werde ich zwei Emojis platzieren. Ja. Gehen Sie dazu zu Google und schreiben Sie Emojis. Dezimale Schichten. Ja. Die erste Website. Okay. Wenn also jemand Ja sagt, bin ich glücklich. Und wenn jemand nein sagt, bin ich traurig. Das ist also das glückliche Gesicht. Ich kopiere einfach den Dezimalcode. Also müssen wir ein anderes div schreiben und ihm eine ID geben. So glücklich. Und dann schreib den Code, okay? Und in ähnlicher Weise werden wir ein trauriges Gesicht kopieren. Lass es uns finden. Ja, das ist ein trauriges Gesicht. Also kopiere ich einfach. Okay, also habe ich den Hexadezimalwert kopiert, sorry, nicht den Hexadezimalwert. Um die Dezimalzahl zu kopieren. Okay. Erinnerst du dich an diesen Wissenschaftler, der für dieses Majlis-Gesicht Und lass uns wieder zurückgehen. In Ordnung. Es ist ein trauriges Gesicht. Ja. Denken Sie also daran, den Dezimalcode zu kopieren . Nein. Nochmals, ich sagte, traurig. Und dann einfügen und dann Endo div tag. Wir haben also ein glückliches Gesicht und legen Gebühren fest. Richtig? Dementsprechend werden wir auch das Java wie den jQuery-Code ändern . Speichere das zuerst. Ich werde es als Dreierwange auf dem Deck speichern . Geben Sie also die Erweiterung Punkt HTML. Ja. Lassen Sie uns nun sehen, wie es aussieht, indem wir es ausführen. Ja. Also haben wir das ja und nein. Und du bist wie ich. Und jetzt werden wir das der Maus schweben lassen. Für Gehörlose. Jetzt setzen wir eine Variable namens click. Wir waren also nicht die einzigen. Dafür setze ich diese Flagge. Also variabler Klickaufruf zu false und schreibe einfach hier. Wenn also die Option eins angeklickt wird, überprüfen wir F dreifach gleich eins. Wenn diese Bedingung also gültig ist, werden wir hier keinen Code ausführen. Also hier in diesem Code, was wir tun werden, ist, den Hintergrund auf grün zu finden. Und was müssen wir dann tun? Eine andere Sache ist, dass wir dieses bestimmte Emoji animieren müssen. Also werde ich es viel größer machen , wenn es ausgewählt wird. Dafür wählen Sie also die ID aus. Also werde ich mich freuen. Und dann dot animieren. Okay? Animate ist also selbst eine Funktion, sodass Sie hier keine Funktion schreiben müssen. Schreiben Sie einfach die Veranstaltung. Was wir also tun müssen, ist die Schriftgröße zu ändern. Angenommen fünf EM, okay? Das wird also unsere Schriftart sein, Schriftgröße. Für das Emoji. Falls die Option eins ausgewählt ist. Wir brauchen das nicht, also entferne ich es einfach. Was Sie nun tun müssen, ist einfach diesen Code zu kopieren und einzufügen und für die Option 21 weitere Sache zu manipulieren , wenn der Klick falsch ist, also müssen wir das Flag ändern. Also jetzt zugewiesener Klick mit true, sodass wir nur eine Option auswählen können. Nun, wenn der Klick falsch ist, wieder hier dasselbe. Okay? Und was Sie dann tun müssen, ist, da es keine Option ist, also mache ich den Hintergrund rot. Okay. Nun hier, es wird traurig sein Gesicht ID traurig, wie Sie sich erinnern, wenn Sie sich für diese Phase erinnern. Und es wird Siem sein, und auch hier wird die Hintergrundfarbe in beiden angezeigt. Also speichern wir das und führen es aus. Okay. Also habe ich es aufgefrischt. Jetzt. Klicken wir auf „Ja“. Ja. Zeigt ein glückliches Gesicht. Wenn ich jetzt auf Nein klicke, funktioniert es nicht. Okay, weil ich schon die Flagge gesetzt hatte. Jetzt lass uns nochmal auffrischen. Und jetzt klicken wir auf Nein. Also ja, wir haben diese festgelegte Phase. Auf diese Weise können Sie mit jQuery Emissionen durchführen . Sie können viele Dinge mithilfe von Animationen ausführen. Mal sehen, was wir auf dieser Reise lernen. Danke fürs Zuschauen und bleib auf dem Laufenden. 62. Bonus : Einführung in Bootstrap: Willkommen zurück im Kurs. Fangen wir also mit Bootstrap an. Bootstrap ist im Grunde ein Fronted Framework. Es enthält HTML - und CSS-Vorlagen und hilft auch dabei, die Website reaktionsschnell zu machen. Fangen wir also schnell mit unserer ersten Übung an. Zunächst müssen Sie also nach Bootstrap-CDN suchen. Also Bootstrap-CDN. Okay. Klicken Sie also darauf und Sie werden bestimmte Arten von CDN heilen lassen. Anstatt hierher zu gehen, würde ich dir empfehlen mit Bootstrap loszulegen. Und dann kannst du von hier aus den Relevanztanz bekommen. Was Sie also tun müssen, ist sie einfach zu kopieren. Okay? Öffnen Sie jetzt Ihren Texteditor. Also öffne ich Sublime Text. Jetzt. Beginne mit der grundlegenden Struktur einer HTML-Seite. Und dann HTML. Das HTML-Tag. Beginne mit dem Kopf. Wir müssen dieses CDN in den Kopf stecken. Also schreiben wir zuerst title Bootstrap und dann das title-Tag. Dann kopieren wir den CDM, okay? Das ist also eine CDF, die wir in den Kopfbereich kopiert haben. Und jetzt müssen wir den Körper starten. Stapeln Sie also body und das body-Tag. Was wir jetzt tun müssen, ist, dass wir ein Div-Tag starten müssen . Okay? In diesem Div schreiben wir nun schreiben wir class equals und dann Jumbo. Okay? Und das ist nur durch Schreibunterricht, Sie können diese besondere Tiefe stylen und einfach schreiben, ich denke, Tech Center, Sie müssen keinen Text innerhalb des Stils ausrichten. Das ist also das Schöne an Bootstrap. Als Nächstes können Sie also die Überschrift schreiben, die Sie geben möchten. Also werde ich erste Schritte schreiben, bootstrap und dann das H1-Tag beenden. Nein, stimmt's? Bootstrap ist ein Framework. Und schließe das p-Tag und dann das div-Tag. Okay, wir haben den Code geschrieben. E-Mails, speichern wir das. Speichere es auf meinen Deckkram und gib ihm einen Namen. Ich werde Bootstrap nennen. Ein-Punkt-HTML. Okay? Und spar dir das. Lass es uns ausführen und die Ausgabe sehen. Wir haben den Output. Was das Jumbotron betrifft, sehen Sie oder was es uns ausmacht, es macht den Hintergrund auf der hellgrauen Seite. Und Sie erhalten auch diese Überschrift, die im Allgemeinen wunderschön ist Wenn Sie jede einzelne verwenden, wird sie nicht so schön kommen. Fangen Sie also mit Bootstrap an und dann haben Sie eine einfache Beschreibung darüber wie Bootstrap ein Front-End-Framework ist. Auf diese Weise können Sie Jumbotron verwenden. Wie Sie also bereits gesehen haben, haben wir, nur durch die Erwähnung der Klasse, nur durch die Erwähnung des Klassen-Jumbotrons und des Technologiezentrums, nur durch die Erwähnung der Klasse, nur durch die Erwähnung des Klassen-Jumbotrons und des Technologiezentrums, diese besondere Sache bekommen. Also ein schön gestaltetes, um Ihnen das CSS und alles zu zeigen, müssen Sie neugierig sein, wie es dafür passiert , oder klicken Sie mit der rechten Maustaste und gehen Sie zu Inspect. Okay, und klicken Sie dann auf dieses Symbol und wählen Sie. Angenommen, ich möchte das CSS hinter dieser speziellen Sache sehen . Also klicke hier auf. Jetzt können Sie sehen, ob Sie hier Jumbotron sehen können und dann Punkt H1. Und es hat ein farbiges Erbe. Und dann gibt es eine bestimmte Schriftgröße. Also hast du damit gemacht. Wir haben keine solchen Werte für font und all das vergeben , aber wir bekommen das immer noch. Das wird also tatsächlich von Bootstrap gemacht, wie wir bereits aufgenommen hatten, es ist CDN. Also hol dir das wirklich von Bootstrap, und es ist schon entworfen. Okay, wenn du willst, kannst du einige Änderungen vornehmen und sehen, ob ich nur die Statistik px als 20 mache. So können Sie sofort die Veränderung sehen. Aber da es uns nur hier zeigt, die Seite, wenn wir sie aktualisieren wird die Seite, wenn wir sie aktualisieren, wieder in ihre ursprüngliche Form zurückkehren. Okay, das war also eine sehr kurze Einführung über Bootstrap. In der nächsten Übung werden wir mehr erfahren. Also danke fürs Zuschauen und bleib auf dem Laufenden. 63. Bonus : Bootstrap Grid: Hallo Leute, willkommen zurück zum Kurs. Jetzt wissen wir also bereits, wie man ein Jumbotron implementiert. Okay, also lass uns mit der nächsten Übung weitermachen. Was ich empfehlen würde, ist diesen Code einfach von hier zu kopieren, eine neue Datei zu erstellen und sie einzufügen, um sie immer wieder zu schreiben. Wir haben also das gesamte CDN und alles konfiguriert. Jetzt. Wir werden etwas über etwas lernen, das Container genannt wird. Also Tod, es gibt eine Klasse namens Container. Lass mich dir zeigen, was es bewirkt. Lass mich diesen Jumbotron-Innenbehälter behalten. Lassen Sie mich mit der Einrückung fortfahren. Kodierung der Einrückung ist sehr wichtig. Jetzt sieht es gut aus. Also lass uns das speichern. Ich speichere es als Bootstrap-Punkt-HTML. Und lass uns das durchgehen und sehen. Wie Sie in Bootstrap One sehen können, hatten wir dieses Jumbotron, das die gesamte Länge des Bildschirms hatte. Aber immer wenn ich einen Container benutze, kriegt er einen elektrischen Kompressor. Dies liegt daran, dass der Behälter links und rechts einen bestimmten Rand hinterlässt . Okay. In ähnlicher Weise, wenn Sie überprüfen und sehen, wie es funktioniert, wird im Grunde genommen im Bootstrap-Container verwendet, um die Website ausreichend Salt Lake zu machen die Website ausreichend Salt Lake , um die Website wie bestellt, Mann, und unnötig Ränder zu hinterlassen und alles damit es gut aussieht. Okay, also einfach so funktioniert es. Und in diesem speziellen Video werde ich im Grunde über das Grid-System in Bootstrap sprechen , was tatsächlich dazu beiträgt, die Website sehr reaktionsschnell zu machen. Also zeige ich dir einfach, wie es geht. Okay, lassen Sie mich Ihnen diese grundlegende Gitterstruktur zeigen. Dies ist ein Bootstrap-Grid-System. Was es macht ist, dass es den gesamten Bildschirm in kleine Bereiche unterteilt , okay? Sie können es sich auch als zwei kleine Säulen vorstellen. Es kann also höchstens zwei Spalten haben. Jetzt, in der ersten, können Sie Spannweite eins sehen, See, die Größe eins. Es ist spanweise. Die Größe jeder Spalte ist eins. Und Sie können dort 12 Spalten zählen. Die nächste Zeile, für die du sehen kannst, ist die Spanne, okay? Wenn wir also vier plus vier plus vier addieren, erhalten wir wieder 12. Okay? Auf diese Weise können wir das Rastersystem festlegen und unsere Inhalte entsprechend anordnen. Hier kannst du also gut verprügelt sehen, also dauert das im Grunde den ganzen Bildschirm. Lassen Sie mich Ihnen zeigen, wie es funktioniert , damit es für Sie einfacher wird. Kehren wir zum Code zurück. Noch eine Sache, bevor wir fortfahren. Abgesehen von dieser Spalte haben wir also noch etwas anderes, nämlich die Grid-Klassen. Okay? Es hat also bestimmte Klassen wie überschüssiges S, M und D und Energie. Der Zugang ist für Seen. Sehr kleine Bildschirme wie Telefone. Sm ist was? Tablets, die ein bisschen sind. Und MDs für kleine Laptops. Und LG ist was? Große Laptops und Desktops, wie diese implementiert werden. Ich werde es dir im Code zeigen. Also lass uns anfangen. Okay, was wir jetzt tun werden, ist verschiedene Kolumnen zu erstellen. Jetzt. Dieser Container wird da sein, also werden wir einen anderen Container verwenden. Jetzt. Wir werden mit einem neuen Container beginnen. Div-Klasse. Container-Div-Tag. Okay? In diesem Container haben wir die Klasse zu tun, okay. Also div Klasse. Auf diese Weise teilen wir den Bildschirm tatsächlich in Zeilen und Spalten auf. Halten Sie also einfach fest und sehen Sie , was die Ausgabe ist. Schreiben wir also zuerst schnell den Code. Okay, jetzt haben wir die Div-Klassenreihe, also haben wir die erste Zeile. Und in dieser ersten Zeile, sagen wir, wir werden vielleicht drei Spalten haben, ja, drei Spalten Sounds, aber jetzt schreibe def king und werde die Klasse los. Und die Klasse wird hier eine Kolumne sein. Jetzt müssen wir die Größe der Spalte angeben. Wie ich dir schon gesagt habe. Lass mich das Bild noch einmal zeigen. Wie ich Ihnen bereits sagte, müssen Sie die Spanne dieser speziellen Kolumnen angeben. Okay? Nehmen wir an, ich möchte drei Spalten. Wenn ich also drei Spalten erstellen möchte, bedeutet das, dass Sie in der zweiten Zeile sehen können , dass wir drei Spalten haben. Aussetzung vorher für h. Also geben wir die Spanne ist vier, also Spalte. Und dann ist das ein großer Bildschirm, seit ich auf meinem Deck Halt mache. Also LD. Und dann können wir für kein Comeback hier eine Überschrift h1 und h3 angeben , und richtig, das ist die erste Spalte. Okay? Und das p-Tag, wir haben unsere erste Spalte. In derselben Zeile haben wir jetzt die zweite Spalte. Also kopiere einfach diesen speziellen Code. Die Spalte wird den Span wieder vorwärts haben. Das stimmt absolut. Und das wird unsere zweite Kolumne sein. Und das ist unsere zweite Kolumne. Fein. Jetzt haben wir wieder eine Kolumne. Da würde die Größe 12444 bedeuten. Nein, das ist Spalte drei. Und das ist die dritte Spalte. Lassen Sie uns das jetzt schnell ausführen und sehen. Ja, wir haben also drei Kolumnen hier. Diese sind einreihig und wir haben drei Spalten. Was wir jetzt tun werden, ist eine weitere Reihe zu haben. Und nehmen wir an, wir haben dort zwei Spalten, eine von span. Und was, ich habe zehn ausgegeben. Lass es uns machen. Also geh zurück. Also dieses Gesetz, NCL. Es wird also eine andere Zeile haben, Div-Klasse. Es wird alles und Div-Tag. Und jetzt haben wir zwei Spalten. Erstens gebe ich 21 aus, spanne zehn. Okay, also def letzte Spalte, dann LG, dann, okay, in diesem Div-Tag. Nehmen wir an, wir schreiben drei Schritte und dann NH3. Und wieder die nächste Kolumne. Also div, Klasse und Spalte und leer. Und dann ist das großartig. Und lass uns hier etwas schreiben. Willkommen bei trap. Sieht gut aus. Okay, jetzt speichern wir das und führen es aus. Ich hoffe also, dass du das verstehen kannst. Lassen Sie mich eines tun, lassen Sie mich die Hintergrundfarbe verwenden. Es wird sehr hilfreich für Sie sein, dies zu verstehen. Und was ich machen werde, nehmen wir die Hintergrundfarbe. Angenommen ein Rot. Lass mich etwas Kleineres auf der leichteren Seite benutzen. Sieht gut aus. Und ähnlich haben wir eine andere Hintergrundfarbe. Unterstützt Hello. Das soll dir nur die Spanne zeigen. Okay, lass uns erfrischen. Jetzt können Sie sehen, dass dies diese Spanne von zwei hat und dies hat diesen Schwenk deaktiviert. Zehn. Okay? So funktioniert das Grid-System. Nun, wie ich Ihnen schon sagte, dieses Rastersystem macht die Website tatsächlich zu verschiedenen, wie ich es Ihnen noch einmal zeigen kann, gehen Sie zu Inspect. Was wir jetzt tun werden, ist, wie Sie sehen können, es ist bereits verkürzt. Klicken Sie nun auf dieses Gerät nach Lima. Ja. Wenn wir also die Bildschirmauflösung haben und sie verkleinern, können Sie sehen, dass die Säulen bereits so platziert werden . Es wird nicht passieren, wenn Sie Bootstrap nicht verwenden. Also lass mich sehen, lass mich sehen für das iPhone X. So zeigt es sich also. Lass mich mal sehen für das iPad. So zeigt es sich. Wenn Sie auf Responsive klicken und es sehr klein machen, bricht es auch dann nicht. Also auch für das Jumbotron, das Sie sehen, sollten mit Bootstrap loslegen. Und wenn ich es kleiner mache, wird es zum nächsten Namen, okay? Im Normalfall wird es nicht passieren. Okay, das ist das Schöne an Bootstrap. Es macht die Lippenseite , wenn es geboren wird. Hier ging es also nur um Bootstrap-Grid. Danke Leute, dass ihr euch dieses Video angesehen habt. Üben Sie wann und stecken Sie den Einsatz in den Kurs. 64. Bonus : So erstellen Sie Navbar mit Bootstrap: Willkommen zurück im Kurs. Ich hoffe es geht dir gut. In diesem Video zeige ich Ihnen, wie Sie eine Navbar erstellen können. Öffnen Sie dazu Ihren Texteditor und kopieren Sie einfach den Code, den Sie bereits in Ihrer vorherigen Übung geschrieben haben , und fügen Sie ihn ein. Wir würden also das CDN von Bootstrap benötigen, aber wir benötigen dieses Angebot nicht. Also was auch immer sich im Body-Tag befindet, entferne sie einfach. Okay. Jetzt müssen wir dafür ein Talent schaffen. Zuallererst müssen wir das Nav-Tag öffnen. Okay? Danach müssen wir einen Kurs geben. Die Klasse wird navbar treffen, navbar invers. Okay, wie Sie bereits wissen, verwenden wir in Bootstrap Klassen, um unseren Elementen bestimmte Stile zuzuweisen. Was ist also die Bedeutung dieser Klassen, die wir sehen werden , wenn wir die Ausgabe sehen. Danach müssen wir das Nav-Tag schließen. Und dann innerhalb dieser gestarteten div-Tag-Klasse und dann Container-Flüssigkeit. Okay, was macht Containerflüssigkeit in der letzten Übung, die wir über Container gelernt haben , was es tut, es lässt nur einen Raum von der linken und rechten Seite des Bildschirms und schaffe etwas Spielraum. Aber wenn wir Container-Flüssigkeit verwenden, wird das nicht passieren. Es wird die Gesamtbreite des Bildschirms verwendet. Okay? Also dieses Div-Tag, und jetzt innerhalb dieses, werden wir den Namen unserer Lippen-Sync-Gehörlosen schreiben. Und lass uns einen Kurs geben. In dieser speziellen Klasse haben wir also unseren Namen der Website. Also navbar Bindestrich Griff. Okay. musst du dann schreiben. Und gute Deckklasse. Die Klasse wird also Navbar-Marke sein. Okay? Nicht gegeben hf. Und jetzt schreibe den Namen deiner Website. Ich werde nur den Handelsnamen des Tarifs und dann das Anker-Tag schreiben . Als Nächstes werden wir das Horizon-Menü schreiben. Wie die Homepage, den Strand, den wir generell auf unserer Website sehen. Also werden wir das Gleiche tun. Und dann Klasse, und dann gib die Klasse nav und die Navigationsleiste. Und dann werden Sie sich bald mit diesen Klassen vertraut machen. Also halt durch. Wenn du denkst, dass dieser Kurs zu viel ist, als dass du dich erinnern kannst. Starten Sie nun LI, Tag und dann Klasse und dann aktiv. Was also class active macht, ist Ihnen zu zeigen , auf welcher Seite Sie gerade auf einer bestimmten Seite hervorgehoben sind . Und standardmäßig sind wir zum ersten Mal auf der Homepage. Deshalb schreibe ich aktiv für die Homepage. Also starten wir wieder unser Anker-Tag, hf hash, und dann schreiben wir das Anker-Tag, ein Endtag. Als nächstes haben wir eine weitere Seite, sagen wir über die Seite. Also nochmal LA und dann Klasse. Und was musst du dann auch tun? Das alles braucht wirklich keine Klasse da aktiv wir bereits erwähnt wurden. Also brauche ich mein Bett nicht zu unterrichten. Dann verankern Sie hf equals und hash. Und dann schreibe darüber. Und dann könnte Panzer und dann tech ich und wir sind bereit, mit ihnen zu gehen. Horizon zu viele. Jetzt fügen wir ein weiteres Menü auf der rechten Seite des Halses hinzu, aber das sind horizontale Menüs. Jetzt. Richtig? Nächster Halt, rechts, Menü, das die Anmeldung und andere Dinge enthält. Also wieder, wir werden öffnen und dann den Unterricht. Also verlieren wir hier verschiedene Klassen , also nav, navbar, nav und diese wichtige navbar, dann großartig. Also das wird stattfinden. Das Menü rechts auf dem Bildschirm. Schließen Sie jetzt das Tag. Und wieder müssen wir die LA öffnen und dann das Tag als HF-Hash verankern. Und dann verwenden wir für dieselbe Spanne und innerhalb dieses Klassenglyphensymbols. Und dann klicke ich kann, okay, einfach in der Spanne. Und dann schreibe Anmeldung, Anker-Tag. Und auch, okay, jetzt kopiere ich einfach dieses spezielle Ding und füge es ein. Jetzt erstelle ich einen Login-Button. Also ersetze das durch Logan. Und ich werde mich auch ändern. Ich kann Bindestrich sperren und ich denke, wir sind startklar. Ich speichere dieses Nav-Bar-Punkt-HTML. Und lass es uns ausführen und sehen. Wir haben unsere erste Navigationsleiste. Okay, das ist also der Name unserer Website, dieses Zuhause und Sie können den Hintergrund etwas dunkler finden den Hintergrund etwas dunkler da es sich um die aktive Seite handelt. Dann haben wir den nächsten Menüpunkt. Wir haben die Anmeldeoption für das Radfahren und die Anmeldeoption, die Anmeldeoption. Das ist eine sehr einfache Navigationsleiste, aber ich denke, wir sind startklar. So können Sie im Internet nach verschiedenen Arten von Navbars suchen . Beispiel, wenn Sie auf die offizielle Bootstrap-Website gehen können und verschiedene Arten von Nickerchen bekommen können, was sie verwenden möchten, verschiedene Arten von Jetzt-Balken für Ihre Website. Also was ich empfehlen würde ist Bootstrap zu gehen und dann wieder Bootstrap. Und dann drücken Sie einfach slushy CSS und JavaScript. Und Sie können sehen, dass Sie bestimmte Dinge haben , wie „raus“, „Alarm“, „Lila“, „ Dropdown“ usw. Sie können, wenn Sie auf Komponenten klicken, all diese Art von Glyphen-Symbolen erhalten , die ich verwendet habe. So können Sie den Namen jedes Glyphensymbols abrufen und diese nach Ihren Wünschen auf Ihrer Website verwenden. Also verwenden wir einfach diese Glyphe die ich für unsere Anmeldung verwenden kann. Sie hätten also jedes der Symbole für Ihre Bequemlichkeit verwenden können. Okay, also auf der rechten Seite denke ich , wir können die Navigationsleiste finden. Erhebe es. Ja. Wenn du darauf klickst. Also ja, das ist ein wirklich einfaches Netzwerk. Du hättest erwischen können. Dies ist der Gesamtcode dieser Navigationsleiste. Sie können also, was Sie tun können, damit Sie einfach kopieren können. Geh zurück zu deinem Editor. Datei. Neu, Suchen, fügen Sie es ein. Okay. Es ist besser, wenn Sie es in den jeweiligen Code einfügen. Also was würde ich diesen Kaffee empfehlen, diese ganze Sache, File, New File, und dann füge es hier ein. Jetzt entfernen Sie aus dem Abschnitt body den gesamten Code, den Sie geschrieben haben. Okay? Also bis hier, und jetzt kopiere das und füge es ein. Es gibt nichts zu tun. Control-S, Navbar, dann um HTML zu punktieren und zu speichern. Mal sehen, was unsere Ausgabe ist. Mal sehen, was unsere Ausgabe ist. Wir haben also das Schnappwerkzeug. Und ja, du kannst eine Navigationsleiste bekommen. Ich frage mich, was geschrieben steht. Sie haben die Marke und die Links und alles. Ich hoffe dir hat dieses Video gefallen. Bleiben Sie auf dem Laufenden. 65. Vielen Dank und die nächsten Schritte: Hallo Leute, herzlichen Glückwunsch , dass ihr es bis zum Ende geschafft habt. Ich hoffe, dieser Kurs hat dir geholfen , die Fähigkeiten besser zu erlernen. Bitte vergessen Sie nicht, Bewertungen für diesen Kurs abzugeben. Für weitere Updates kannst du meiner Antwort-Them-Community beitreten , in der ich viele Inhalte, Lernmaterialien und vieles mehr teile . Danke für deine Zeit und ich wünsche dir alles Gute im Leben. Lerne weiter.