Vollständige Webentwicklung für Anfänger:innen Teil 1: HTML, CSS, Responsive Design

1. Willkommen beim Kurs!: Willkommen bei Full Stack Web Development für Anfänger. Dieser Kurs, die Designs führen Sie von einem Anfänger zu einem Web-Entwickler, der in der Lage ist, die einzigen Front-End-Benutzeroberflächen zu erstellen, aber auch, wie Sie das Backend zu entwerfen und zu bauen, um mit zu interagieren. Also, wen ich? Mein Name ist Chris und ich werde Ihr Lehrer während dieses Kurses sein. Ich bin ein Webentwickler und auch Produzent von vielen Tutorials , die Tausenden von Schülern die Fähigkeiten vermitteln, die sie benötigen, um Websites und Anwendungen zu erstellen. Dies ist der erste Teil in der vollständigen Serie, wo wir am Anfang beginnen, Ihnen beizubringen, wie HTML, CSS und Responsive Webdesign, um Ihnen die Fähigkeiten zu geben, die Sie benötigen, um großartig aussehende funktionale Websites, die aussehen großartig auf jeder Seite Gerät. Dieser Kurs beinhaltet mehr als fünf Stunden qualitativ hochwertige Schulungen. Wir beginnen zunächst mit HTML und decken alles ab, was Sie wissen müssen: Einrichten und Strukturieren auf Webseiten, Elementen und Attributen, Ausblenden von Formularen und Eingaben, Verknüpfungen von Webseiten, Bildern und vieles mehr. Dies wird alles in einer Hand auf projektbasierten Ansatz gelernt, wo Sie diese Website komplett von Grund auf neu erstellen , während Sie alle Techniken anwenden, die Sie lernen. Wir stylen dies dann mit CSS, und wir werden alles, was Sie wissen müssen, wie Selektoren, Schriftarten, Rand, Padding, das Box-Modell, Floats Positionierung zusammen mit vielen, vieles mehr, enthält einige praktische CSS-Tipps und Tricks auf dem Weg. Wir runden das dann ab, indem wir die Website vollständig reaktionsfähig machen, damit sie Layouts ändern und auf Geräte aller Größe reagieren kann. Sie lernen alles über skalierbare Einheiten, flüssiges Layout, Medienabfragen und reaktionsschnelle Bilder, während Sie dies auf ein Projekt anwenden. Ich hoffe, Sie sind aufgeregt und fangen wir an, alle Grundlagen der Webentwicklung im ersten Teil dieses Kurses zu lernen . 2. Was ist für diesen Kurs nötig (erste Schritte): Für diesen Kurs benötigen Sie nur ein paar Dinge, um auf dem Laufenden zu stehen. Zuerst brauchen wir einen Texteditor. Möglicherweise haben Sie bereits eine Präferenz oder eine Präferenz, die Sie bereits verwenden. Für diesen Kurs verwende ich Visual Studio Code , der ideal für JavaScript-Codierung ist und auch ein integriertes Terminal hat, das wir später im Kurs verwenden können. Sie können jeden verwenden, den Sie mögen. Aber hier sind einige beliebte Texteditor-Optionen wie Atom, Klammern, WebStorm und natürlich Visual Studio Code. Wenn Sie bereits einen dieser und einen Webbrowser haben, können Sie mit dem nächsten Video fortfahren. Wenn nicht, würde ich Ihnen empfehlen, zu code.visualstudio.com zu gehen und den Download-Anweisungen für Ihre Plattform zu folgen. Schließlich benötigen Sie auch einen Web-Browser. Ich würde Chrome von Google empfehlen, aber Sie können jede verwenden, die Sie bevorzugen. Während des Kurses werden wir die Entwickler-Tools innerhalb von Chrome verwenden, aber andere Browser haben diese auch integriert. Es kann einfach etwas anders aussehen, als ich es tue. Das ist jetzt alles, was wir brauchen, um reinzugehen. Als nächstes werden wir einen kleinen Blick darauf werfen, was HTML tatsächlich ist. 3. HTML verstehen (erste Schritte): Bevor wir in das Hinzufügen von HTML zu unseren Webseiten springen, möchte ich nur sicherstellen, dass wir genau verstehen, was HTML ist und was es tut. Ich werde noch nicht zu tief und technisch gehen. Aber zu verstehen, warum wir es verwenden und warum es überhaupt zustande gekommen ist wird uns wirklich nützen, wenn wir sie programmieren. Zuallererst, was genau ist HTML? HTML steht für HyperText Markup Language. Zuerst mag es etwas seltsam klingen, aber wir werden uns bald ansehen, was das alles bedeutet. HTML ist eine Standardauszeichnungssprache zum Erstellen von Websites und Anwendungen. HTML ist überall im Web. Die meisten Websites werden mit diesem erstellt und alle Browser wissen, wie man sie richtig liest und anzeigt. Wie alle Programmiersprachen und die meisten Dinge im Leben verändern und entwickeln sich die Dinge. Wir besitzen derzeit Version fünf von HTML. Wie alle neuen Versionen werden Dinge hinzugefügt oder entfernt, wenn eine neue Version herauskommt, was nicht so oft ist, ist nicht etwas, worüber man sich Sorgen machen muss. Alles, was wir bereits wissen, gilt in der Regel noch. Es ist nur oft ein Fall von Verbesserungen und neuen Funktionen, wenn die Technologie weitergeht. Wir werden viele der neuen HTML5-Funktionen während dieses Kurses behandeln. HTML wird verwendet, um ein Webdokument zu formatieren. Ein Webbrowser weiß, wie er richtig angezeigt wird. Wie wir bereits gesagt haben, ist es eine Standard-Markup-Sprache des Web, so dass alle Web-Browser wissen, wie HTML-Dokument richtig zu behandeln und anzuzeigen. Der HTML-Code wendet die Formatierung an, die benötigt wird, um den Browser anzuweisen, was zu tun ist. HTML wurde von einem Physiker namens Tim Berners-Lee erfunden. Die Entwicklung fand um 1989-1990 statt, wo Memos oder Vorschläge von HTML wir vorgestellt werden. Die Idee hinter HTML war es, den Forschern eine Möglichkeit zu schaffen , Dokumente elektronisch zueinander zu senden und zu empfangen. Um zu verstehen, warum HTML erstellt wurde , werfen wir zunächst einen Blick auf das Problem. Dies ist ein Bild, das von der Wikipedia-Website aufgenommen wurde. Aber stellen Sie sich vor, dies war ein Textdokument, das an einzelne Abteilungen geschickt werden musste. Beim Senden dieses Textes gibt es keine Möglichkeit, die Formatierung zu beschreiben. Der HTML-Header oben ist größer und auch fett. Darunter befindet sich eine Linie und dann einige Standardtexte. Auch der Anfang des Absatzes ist fett formatiert und der Text enthält auch eine Reihe von Links, die Sie mit anderen Dokumenten verbinden möchten. Dies ist ein Problem, mit dem die Forscher konfrontiert waren. Um dieses Problem zu lösen, ist einer der ersten Schritte die Idee, den Text zu markieren. Bei der Arbeit mit handgeschriebenen Manuskripten oder Dokumenten würden Typografen oder Redakteure oft den Text in den Rändern des Papiers schreiben oder markieren. Dies würde Informationen wie den Stil und die Größe des Textes für jeden Abschnitt enthalten , bevor er für den Schriftsatz weitergegeben wird. Die Idee dieser Markierung hat eindeutig die Art und Weise beeinflusst, wie HTML gestaltet wird. Schauen Sie in unserem Text hier vor und eine grundlegende HTML-Äquivalente auf der linken Seite. Von oben markieren wir die HTML-Überschrift, indem wir sie in diesen h1-Tags umgeben. Wir werden uns all diese Zeiten während des Kurses genauer ansehen. Aber diese h1 beschreibt den Inhalt als der wichtigste und wird auch als größte Überschrift angezeigt. Jetzt haben wir eine Möglichkeit zu beschreiben, wie die Texte für den Dokumentenleser aussehen werden, wie zum Beispiel einen Webbrowser. Dasselbe für unten haben wir ein hr-Tag, um zu beschreiben, wo wir eine horizontale Regel erscheinen soll. Dies ist ein eigenständiges Tag und es braucht keinen Textinhalt zu formatieren, sie unterhalb dieser Standard-Absätze von Text und mit den p -Tags enthalten. Wir haben auch starke Tags, um dem Browser mitzuteilen, dass dieser Text eine starke Bedeutung hat, und auch in Fettdruck angezeigt werden. Natürlich gibt es noch viel mehr von diesen Tags zu decken, aber dieses grundlegende Beispiel sollte Ihnen jetzt ein besseres Verständnis dafür geben, wie die Dinge funktionieren. Wir wollen auch einen Weg für diese Links in blau hier, um alle Links zu anderen Dokumenten verbinden zu können. Dies führt uns zu Hypertext. Hypertext ist ein weiteres von diesen Wörtern, aus denen HTML besteht. Dies ist im Grunde der Text auf dem Bildschirm, der Verweise auf andere Texte oder Dokumente sind. Hypertext-Dokumente sind durch Hyperlinks verlinkt. Wir sehen dies auf den meisten Webseiten, die wir jeden Tag besuchen. Oft handelt es sich dabei um eine Top-Navigation mit Links oder Hyperlinks zu anderen Seiten. Diese Webseiten trennen oft auch Dokumente, wie Sie hier sehen. So wissen wir nun, dass Texte auf einer Webseite normalerweise umgeben sind, alle mit Tags markiert sind, genau wie wir uns vor ein paar Folien angeschaut haben, und auch diese p-Tags unten. Diese Tags komplett mit dem Inhalt in der Mitte wird als Element bezeichnet. Elemente können als die Bausteine einer Webseite betrachtet werden. Sie werden viel Übung haben, diese Elemente während des Kurses zu schreiben. Das letzte, was wir in diesem Video betrachten werden, sind Attribute. Attribute werden zu Elementen hinzugefügt, um einige zusätzliche Informationen bereitzustellen. Zum Beispiel könnten wir die Textfarbe festlegen, wir könnten dem Browser mitteilen, auf welche Seite verlinken soll, wenn sie angeklickt wird, oder wie Sie im Beispiel hier sehen können, können wir eine eindeutige ID für die Elemente festlegen. Wenn das alles neu für dich ist und eine Menge zu nehmen ist, mach dir keine Sorgen, dass es hier ist. Während Geschichte und Hintergrund gut zu wissen ist, ist die Hauptsache zu verstehen, wie diese Tags Elemente erstellen , und Sie werden viel mehr Übung bekommen, während Sie während dieses Kurses Fortschritte. 4. Erstellen eines Webprojekts (Einführung in HTML): In den nächsten Abschnitten lernen wir die Grundlagen von HTML und CSS kennen. Wir werden diese Techniken auch auf ein Projekt anwenden, wenn Sie sie lernen, um Ihnen zu zeigen, wie all diese auf eine echte Website zutreffen. Das Projekt, ein Tech Store werden zeigen einige Produkte und auch, wie einige verschiedene Bereiche wie Kopfzeilen, Fußzeilen und auch Seitenleiste. Es wird nur grundlegende Funktionen wie Klicken auf einen Artikel, um die vollständigen Produkte zu sehen. Diese geben uns eine gute Chance, etwas HTML- und CSS-Praxis zu bekommen. Wenn Sie neue Webprojekte beginnen, müssen wir zuerst einen Projektordner erstellen, um alle Dateien, Ordner, Bilder und andere Elemente im Zusammenhang mit dem Projekt zu speichern . Um zu beginnen, gehen wir auf den Desktop und erstellen einen neuen Ordner, indem Sie mit der rechten Maustaste und dann Neuer Ordner. Ich nenne das den Namen unseres Projekts, das Tech-Store ist. Sie können diesen Ordner natürlich überall auf Ihrem Computer erstellen, den Sie bevorzugen. Dann werde ich Visual Studio Code öffnen, der Texteditor ist, den ich für den Rest dieses Kurses verwenden werde. Öffnen Sie das, alle Ihre bevorzugten Texteditor und Sie können entweder den Ordner in ziehen. Öffnen Sie das, und Sie sehen den Namen in einer Seitenleiste auf der linken Seite. Oder Sie können zur Datei gehen und dann öffnen und von dort auswählen. Jetzt müssen Sie unsere ersten Web-Dokumente oder unsere Datei zu erstellen. Auch hier kann es je nach Texteditor nur wenige Möglichkeiten geben, dies zu tun. In Visual Studio-Code können Sie Command und N auf einem Mac verwenden, um eine neue Datei zu öffnen. Oder unter Windows kann es Control plus N sein. Auch die meisten Texteditoren haben eine Option wieder, um die Datei und dann Neue Datei oben dort zu gehen. Ich werde von dort auf „Neue Datei“ klicken und dann werde ich das die index.html nennen. Alle HTML-Seiten müssen die Erweiterung this.HTML am Ende haben. Der Browser weiß also, dass es sich um eine HTML-Datei handelt. Drücken Sie „Enter“. Wir können diese Datei benennen, was wir wollen, und wir erstellen mehrere HTML-Dateien für dieses erste Projekt. Aber Index ist ein gebräuchlicher Name für die Website Standard oder Homepage. Stellen Sie also sicher, dass dies innerhalb des Tech Store-Projekts ist und dann gehen wir zum Bearbeitungsbereich auf der rechten Seite. Wenn wir in einigen Texten wie, hallo, erhalten Sie das gespeichert. Wenn wir dann unseren Projektordner öffnen und dann auf die Seite index.html doppelklicken, öffnen Sie dies im Browser, und dort sehen wir unseren Text von, hallo, innerhalb des Browsers. Natürlich wissen wir aus dem letzten Abschnitt, dass wir diesen Text mit P-Tags umgeben müssen , damit er gültig ist. Aber für jetzt ist unser Projekt alles eingerichtet und bereit, gerade jetzt zur Struktur in unserer Indexseite zu gehen. 5. Strukturieren einer Website (Einführung in HTML): der Projektordner nun eingerichtet ist, können wir nun damit beginnen, etwas Struktur zu unserer Indexseite hinzuzufügen. Bevor wir beginnen, unsere HTML-Elemente hinzuzufügen, um Inhalte zu unserer Seite hinzuzufügen, gibt es einige grundlegende Struktur, die wir zuerst hinzufügen müssen. Ich werde damit beginnen, diesen Hallo Text aus dem letzten Video zu entfernen, und das erste, was wir ganz oben auf jeder Seite hinzufügen müssen , ist eine DOCTYPE Deklaration, die so aussieht. Wenn Sie die eckigen Klammern öffnen und schließen, fügen Sie ein Ausrufezeichen hinzu, und geben Sie DOCTYPE von HTML ein. DOCTYPE Deklarationen sind eine Möglichkeit zu deklarieren, welche Version von HTML wir verwenden. Dies ist ein DOCTYPE für HTML Version 5. Frühere Versionen waren viel länger und komplizierter. Nun, HTML5 macht die Dinge schön und einfach für uns. Das Wort DOCTYPE unterscheidet die Groß- und Kleinschreibung nicht, aber ich mag es trotzdem in Großbuchstaben einzugeben. Dann fügen wir die Haupt- oder die Root-HTML-Element-Tags hinzu. also direkt unter dem DOCTYPE Öffnen und schließen Siealso direkt unter dem DOCTYPEdie eckigen Klammern, geben Sie HTML ein, und wenn dies geschlossen wird, öffnen und schließen Sie erneut Ihre eckigen Klammern, fügen Sie einen Schrägstrich und HTML hinzu. Da dies das Wurzelelement ist, muss alles andere zwischen diesen Tags hinzugefügt werden. Dieser oberste Typ oben ist die einzige Ausnahme davon. Innerhalb des öffnenden HTML-Tags werde ich ein Attribut hinzufügen. Wir haben kurz über Attribute im letzten Abschnitt gesprochen. Attribute sind nur eine Möglichkeit für uns, einige zusätzliche Informationen zur Verfügung zu stellen , die wir dem öffnenden Tag hinzufügen müssen. Für das HTML-Tag können wir die Sprachattribute mit lang zur Verfügung stellen. Dies teilt Browsern und Suchmaschinen die Sprache der Webseite, die wir erstellen. Ich werde diese Website in Englisch erstellen, so dass der Code ist gleich en, innerhalb dieser Zitate. Eine schnelle Google-Suche nach HTML-Sprachcodes wird eine Liste von Ländercodes angezeigt, wenn Sie eine andere Sprache verwenden möchten. Innerhalb dieser HTML-Elemente gibt es zwei Hauptelemente, die wir jetzt hinzufügen können, den Kopf und den Körper genannt. Also direkt unter diesem öffnenden Tag, können wir die Klammern wieder öffnen und den Kopf eingeben und schließen. Sie können sehen, dass Visual Studio-Code automatisch wie folgt abgeschlossen wird. Wenn Ihr Texteditor dies nicht tut, gehen Sie einfach voran und geben Sie das schließende Tag mit dem Schrägstrich ein. Danach können wir den Körper hinzufügen. Dies hat auch wieder ein öffnendes und ein schließendes Tag. Dieser Kopfbereich ganz oben enthält Daten über die Website, die oft als Metadaten bezeichnet werden. Der Inhalt, den wir dem Kopf hinzufügen, wird normalerweise nicht auf der Seite im Browser angezeigt, es gibt jedoch einige wichtige Informationen über das HTML-Dokument, wie den Website-Titel, Informationen der Suche Motoren. Wir können es auch mit allen Dateien verknüpfen, und wir werden dies während der Gründung betrachten. Das erste Element, das ich dem Kopfbereich hinzufügen werde, ist ein Meta-Tag. Meta-Tags liefern im Grunde Informationen über die Website und es ist das erste selbstschließende Tag, das wir bisher gesehen haben. Dies bedeutet, dass es kein schließendes Tag hat. Es braucht keinen, weil wir keinen Inhalt hinzufügen, wir fügen einfach ein Attribut hinzu. Es gibt viele verschiedene Meta-Tags zur Verfügung, um Informationen über die Beschreibung der Website, das Angebot der Website, zu liefern. Wir können es auch verwenden, um Keywords hinzuzufügen. Für diese ist jedoch alles, was ich tun werde, einen Zeichensatz hinzuzufügen, der für die Website verwendet wird, mit den Zeichensatzattributen. Also lassen Sie uns unser Meta-Tag erstellen, M-E-T-A, schließen Sie ab, und dann können wir unsere Zeichensatzattribute hinzufügen und dies wird gleich UTF Bindestrich 8 sein. Das Festlegen einer Zeichencodierung mag kompliziert klingen, aber wir erklären einfach, welche Zeichen wir auf dieser Webseite verwenden. Das Zeichen wurde in Zahlen, Buchstaben und auch alle Zeichensymbole, die Sie auf Ihrer Tastatur finden, wie das at Symbol und auch positive und negative Symbole oder sogar Klammern. UTF-8 ist ein HTML5-Standard, benötigt fast alle verfügbaren Zeichen in der Welt. Als nächstes, direkt unter diesem Meta-Tag, werde ich den Titel hinzufügen. Also am Titel ist das Öffnen und Schließen von Tags. Ich rufe meinen Technologieladen an und wir müssen das zwischen den beiden Tags hinzufügen. Also unter n einfach so. Wenn wir geben, dass eine speichern und dann öffnen Sie den Browser mit index.html geöffnet, geben Sie, dass eine Aktualisierung, und wir können sehen, wir haben Tech-Shop an der Spitze des Browsers, gerade da. Wir werden diesen Leitungsbereich während des gesamten Projekts und auch später in diesem Kurs hinzufügen . Dies lässt uns jetzt mit diesem Körperteil. Der Körper ist, wo wir alle Inhalte hinzufügen, die auf der Seite erscheinen. Wenn wir voran gehen und unser Hallo nochmals eingeben, knapp unter dem Körper so. Geben Sie dem ein Speichern und laden Sie dann den Browser neu. Wir sehen, dass der Text jetzt wieder auf der Seite angezeigt wird. Großartig. Unsere HTML-Struktur ist jetzt vorhanden, und wir können nun auf einige weitere HTML-Elemente gehen, die wir zu diesem Körperabschnitt hinzufügen werden. 6. HTML-Überschriften (Einführung in HTML): In den letzten Videos haben wir uns darauf konzentriert, ein Website-Projekt einzurichten und die grundlegende Struktur für unsere Indexseite hinzuzufügen. Obwohl dies alles für ein Website-Projekt wichtig ist, bin ich sicher, dass Sie alle daran interessiert sind, einige echte Content-Anzeige in den Browser zu bekommen. Als wir uns HTML in den letzten Folien angeschaut haben, haben wir einen kurzen Blick auf HTML-Überschriften geworfen. Überschriften werden verwendet, um den Inhalt der Seite vom größten bis zum wenigsten wichtigen zu strukturieren und sind nummeriert h1 bis h6. Wir verwenden h1 für die wichtigsten oder die wichtigsten Überschriften, h2 die etwas weniger wichtig und so weiter. h1 ist auch die größte, bis zu h6 ist standardmäßig die kleinste. Überschriften werden von Suchmaschinen wie Google verwendet , um festzustellen, welcher Inhalt am wichtigsten ist. In diesem Beispiel wird der große fett formatierte HTML-Text oben mit dem Überschriften-Tag h1 markiert. Dies macht Sinn, da es das Hauptthema der Seite ist. Wir können dies in Aktion sehen, indem wir die Wikipedia-Seite besuchen, von der sie genommen wurde. Wenn wir über zu Google gehen und dann werden wir nach Wikipedia suchen, HTML und wählen Sie den oberen Link gerade dort. Mit den Google Chrome-Entwicklertools, die wir durch diesen Kurs ziemlich viel verwenden, können wir beweisen, dass dies eine Level-1-Überschrift ist. Innerhalb eines Chrome, wenn wir schreiben oder steuern klicken und dann nach unten gehen, um zu inspizieren, dies öffnet sich die Entwickler-Tools. Sie sich keine Sorgen über das, was wir hier sehen, nur für den Moment. Wir werden uns dies im Laufe des Kurses genauer ansehen. Für jetzt aber, wenn wir gehen über zum Inspektor, der Pfeil in der Ecke ist, klicken Sie auf diese. Wenn ich dann über den HTML schwebe und darauf klicke, können wir im Code hier sehen, die blaue Linie, die hervorgehoben wird, ist ein h1. Mach dir noch keine Sorgen um irgendetwas, was hier vor sich geht. Die Hauptsache zu wissen ist, dass wir den HTML-Text ausgewählt haben. Wir können sehen, dass dies nur ein h1-Element mit ein paar Attributen ist, wie die ID, die Klasse und auch die Sprache, die wir zuvor gesehen haben. Es ist nicht wirklich etwas, was wir bisher nicht gesehen haben. Jetzt gehen wir und gehen es selbst. Wenn wir Entwicklertools schließen und zurück zum Texteditor gehen, wissen wir bereits, dass der Inhalt, den wir im Browser anzeigen möchten , zwischen den Body-Tags platziert wird. Wir können unsere Überschriften innerhalb von dort hinzufügen. Es ist tatsächlich auf dem unteren Abschnitt vor und beginnen, einige Überschriften zu erstellen. Zuerst h1 und lassen Sie uns etwas Text innerhalb von hier hinzufügen, einfach der Überschrift eins. In der nächsten Zeile fügen wir unsere h2 mit dem Text der Überschrift zwei hinzu. Nächste Zeile h3, h4, Text Unterüberschrift vier und zwei weitere zu gehen. h5 für die kleinen. Unsere Rubrik fünf und schließlich die letzte Rubrik sechs. Geben Sie das alles in ein, geben Sie dem ein Speichern und gehen Sie dann zum Browser. Stellen Sie sicher, dass die Seite index.html von vorher geöffnet ist. Wenn nicht, gehen Sie zurück zur Datei und öffnen Sie dann, geben Sie einen Neuladen. Wir können den Unterschied zwischen den Überschriftengrößen deutlich erkennen. Aber wir sollten nicht versucht sein, sie nur neben dem Text zu verwenden oder sie mutiger aussehen zu lassen. Denken Sie daran, dass Überschriften wichtig sind. Wenn wir auf unsere fertige Website zurückgehen, die wir uns vorher angesehen haben, haben wir einige Fälle, in denen wir Überschriften verwenden könnten. Wir haben den Haupt-Website-Titel des Tech-Store an der Spitze, was ein guter Anwendungsfall für h1 sein könnte. Wir haben auch den Text von shop by und alle Artikel am oberen Rand jedes Abschnitts. Diese beiden sind Level Two Überschriften, dann ist die Sidebar Überschrift der Kategorie und auch Preis ein guter Anwendungsfall für h3. Lassen Sie uns dies in die Praxis umsetzen, indem wir diese auf unser Projekt anwenden. Gehen wir zurück zu unserer index.html Seite und innerhalb des Körpers, lassen Sie uns h2 bis h6 entfernen und h1 zwischen dem Körperabschnitt verlassen. Diese h1, wie wir gerade in der fertigen Version gesehen haben, können wir einen Text von Tech-Shop hinzufügen, speichern Sie das. Laden Sie den Browser neu, und es gibt unseren Website-Titel. Zurück auf die fertige Version. Verschieben in der Seitenleiste hatte den h2 Text des Shops durch und dann hatten wir die Kategorie Titel Kategorie und Preis. Fügen wir diese jetzt hinzu. Direkt unter dem Tech-Shop-Titel, lassen Sie uns unsere h2 hinzufügen und zwischen diesen Zeiten können wir den Text des Shops durch hinzufügen. Bleiben Sie mit Designleiste Abschnitt, unter dem wir unsere zwei Level Three Überschriften hinzufügen können. Der erste war der Text der Kategorie. Schließen Sie das ab. Der Text der Kategorie. Dann knapp darunter, gab es auch eine h3, die für den Preis war. Ich habe gerade einen Doppelpunkt nach dem Laden da drüben. Geben Sie dem ein Speichern und sehen Sie, wie die Sidebar jetzt aussieht. Ok, gut. Ich füge einfach die Währung zwischen den Klammern hinzu. Fügen Sie ein Währungssymbol darin hinzu. Nun ist dies der Sidebar-Text an Ort und Stelle. Schließlich können wir hier alle Elemente hinzufügen, die für den verschiedenen Abschnitt auf der rechten Seite waren. Dies ist auch ein h2 Überschrift, genau wie einkaufen. Wir können dies direkt unten hinzufügen. Fügen wir h2 und einen Text aller Elemente hinzu, gefolgt von dem Doppelpunkt. Speichern Sie das. Jetzt sehen wir das auch auf der Seite. Dinge sehen im Moment nicht so toll aus, aber denken Sie daran, HTML ist nur für den Inhalt. Dinge werden viel besser aussehen, wenn wir in CSS zum Styling eintauchen und diese Texte auch auslegen. Als Nächstes werden wir einen Blick darauf werfen, wie verwandte Inhalte mithilfe von div-Tags abgeschnitten oder gruppiert werden können. 7. Div und Span (Einführung in HTML): Wir haben jetzt einige Inhalte auf dem Bildschirm innerhalb des Browsers. Aber im Moment ist es nicht wirklich organisiert. Wir haben gerade einige Inhalte im Grunde von oben nach unten hinzugefügt, während wir nicht viel Styling und Position dieser Überschriften tun können, bis wir den CSS-Abschnitt erreichen, können wir beginnen, unsere verwandten Inhalte zusammen zu gruppieren. Wenn wir uns die fertige Seite nochmals ansehen hier auf der Homepage ansehen, könnte sogar jemand völlig neu im Aufbau von Websites herausfinden, welche Abschnitte wahrscheinlich zusammengefasst werden sollten. Wir haben eine Kopfzeile ganz oben, die ein Bereich sein würde. Auf der linken Seite haben wir die Sidebar. Wir haben auch einen Produktbereich, in dem alle unsere Produkte aus unserem Shop angezeigt werden. Wir haben individuelle Produktinformationen wie diesen Abschnitt hier und unten unten unten, wir haben auch einen Fußbereich. Gruppieren von Inhalten ist ziemlich unkompliziert. Wir müssen nur den Inhalt in einem Container umgeben, der als div bezeichnet wird. Ein div ist ein Element und hat ein öffnendes und schließendes Tag. Es ist eine Abkürzung für eine Division. Zurück in der Index-HTML-Datei können wir einige div-Elemente zu unserer Website hinzufügen. Schließen wir das und gehen zurück zu unserer Indexseite. Der Text, der oben ist, die Kopfzeile war, wird innerhalb der Header-Gruppe sein. Lassen Sie uns unser div-Tag erstellen. Ein öffnendes Tag und das schließende Tag ebenfalls. Halten Sie diese organisiert und gehen Sie weiter, um sie in ihrer eigenen Zeile hinzuzufügen. Dann werde ich die h1 von vorher schneiden. Platzieren Sie dies nun innerhalb dieses div-Abschnitts. Jetzt haben Sie einen Header-Abschnitt. Wenn wir das ein Speichern geben und dann den Browser neu laden, sehen wir keine Änderungen. Dies liegt daran, dass ein div nur ein allgemeiner Container ist. Sie sind jedoch wirklich wichtig und haben viel verwendet. Wir werden die Wichtigkeit später sehen, wenn wir in den CSS-Abschnitt kommen. Denn zum Beispiel könnten wir den gesamten Kopfzeileninhalt zusammenfassen und eine bestimmte Schriftfarbe oder Hintergrundfarbe auf den gesamten Abschnitt anwenden . Oder wir könnten ein div so einstellen, dass es auf der linken Seite der Seite positioniert wird, und ein anderes div auf der rechten Seite. Gehen wir zurück und fügen Sie zwei weitere Container hinzu. Der erste Container wird für die Sidebar sein, die die drei Überschriften gerade hier hat. Blase das div. Fügen wir ein zweites div hinzu, und dann können wir alle drei dieser Überschriften ausschneiden und sie hier einfügen. Endlich unser drittes und letztes div knapp unter diesen beiden. Schließen Sie das ab und dann können wir das h2 aller Elemente einfügen. Wie Sie durch diesen Abschnitt Fortschritte werden auch weitere Inhalte zu diesem Hauptabschnitt hinzufügen , wie die Produkte. Aber für jetzt haben wir nur die Überschrift aller Elemente, geben Sie das Speichern, und dann neu laden. Trotzdem sehen wir keine Änderungen, aber das ist in Ordnung für jetzt. Es gibt auch ein anderes Element, das auch als Container verwendet wird. Dies wird die Span-Elemente genannt. Um den Unterschied zwischen div und span zu zeigen. Stellen wir uns zuerst vor, wir wollten ein spezielles Styling auf das $ Zeichen Symbol anwenden, das wir gerade hier haben. Aber nicht der Preis. Wir könnten dieses $ Symbol mit einem div Typ umgeben. Lasst uns das jetzt machen. Schneiden Sie diesen Abschnitt aus und fügen Sie ihn ein. Wenn wir das speichern und dann den Browser neu laden, sehen wir etwas Seltsames passiert. Das div schiebt das $ -Symbol auf eine neue Zeile. Dies liegt daran, dass ein div ein Element auf Blockebene genannt wird. Elemente sind meist in entweder eine Blockebene oder ein Inline-Elemente gruppiert. Block-Level-Elemente besetzen die volle verfügbare Breite des Browsers und es beginnt auch auf einer neuen Zeile. Außerdem sind alle Überschriften, die wir bisher verwendet haben, knapp über und unten sind auch Block Level zwei. Deshalb sehen wir sie übereinander gestapelt, jede beginnt auf einer neuen Linie. Inline-Elemente beginnen jedoch, wie sie klingen mögen, nicht auf ihrer eigenen Zeile. Wenn Speicherplatz verfügbar ist, werden sie auf der gesamten Seite ausgerichtet. Eine Spanne Elemente, die wir bereits erwähnt. Hat einen alternativen Container zu div ist ein Inline-Elemente. Dies bedeutet, dass wir zurück gehen und div ändern können, um span zu sein. Ändern Sie die öffnende und schließende Tag geben, dass eine speichern und wenn wir aktualisieren, der Browser sehen wir jetzt die Klammern und $ Symbol inline mit dem Preis Text. So könnten wir div und span Elemente verwenden, um einen Teil unseres Codes zu enthalten oder zu zielen. Sie werden später noch nützlicher, wenn Sie Abschnitte gruppieren , um Styling und Layout anzuwenden. 8. Absätze und Text hinzufügen (Einführung in HTML): Jetzt ist es an der Zeit, Text auf unserer Website hinzuzufügen. Technisch haben wir bereits Texte in Form von Überschriften, aber wir haben auch das P-Element für Standardtext zur Verfügung gestellt. P steht für Absatz, obwohl es für jede Menge Text von einem einzelnen Buchstaben oder Wort bis hin zu einem Absatz verwendet wird. Mit Blick auf das Produkt auf die fertige Version zu sehen, gibt es einige Block zu Text, die wir hinzufügen können, wie die Beschreibung, die gerade hier ist, den Preis in dieser Zeile hier, und auch den Titel jedes Produkts. Lassen Sie uns zum Texteditor gehen und beginnen, dies in hinzuzufügen. Also lassen Sie uns das wieder auf die Seite index.html schließen. Erstellen Sie zuerst in einem neuen div knapp unter allen Elementen. Lassen Sie uns gerade hier ein neues div erstellen. Stellen Sie sicher, dass dies immer noch in diesem Hauptdiv verschachtelt ist. Auch hier wird dies der Container für alle diese Produkte Abschnitt sein. Also haben wir den Titel an der Spitze. Dann wird dieses div der Container für ein einzelnes Produkt sein. Also innerhalb dieser Röhre wird ein Produktbild, einen Titel, die Beschreibung, und so weiter. Zuerst können wir den Titel, Preis und Beschreibung übernehmen. Öffnen Sie also PP-Tags, im Inneren können wir den Text von Game Controller haben, der das erste Produkt ist. Sagen wir gerade unten, können wir in einem Preis hinzufügen, sagen wir $79,95. Dann eine dritte Zeile mit einer Beschreibung. Also, sobald ich auch Game-Controller für Xbox, speichern Sie das. Gehen Sie zum Browser und aktualisieren Sie dann. Und da sind unsere drei Textzeilen ganz unten. Eines der Dinge, die Sie hier bemerken werden, ist, dass jedes P-Element in seiner eigenen Linie ist, genau wie wir es im letzten Video gesehen haben. Dies bedeutet, dass es sich um Elemente auf Blockebene handelt, was ideal ist, weil Sie möchten, dass sie gestapelt werden, wie wir hier sehen. Wenn der Text innerhalb der P-Zeiten etwas lang wird, können wir auch einen Zeilenumbruch hinzufügen, der im Text auf eine neue Zeile bleiben soll. Wir tun dies mit einem Bruch Elemente. Also, wenn die Beschreibung ein wenig lang war, konnten wir hinüber gehen und fügt pr hinzu, setzen Sie eine Pause Elemente. Pausenzeit braucht keine Schließzeit, da es keinen Inhalt im Inneren hinzugefügt, es ist einfach Ort, wo wir wollen, dass eine neue Zeile erscheinen. Sagen Sie das, dann aktualisieren Sie den Browser und jetzt werden die Wörter für Xbox der eigenen separaten Zeile angezeigt. Ich denke, sein Produkttitel auch von Gamecontroller wird besser in einem Überschriften-Tag, wie einem H4, sein. Machen wir diese kleine Änderung. Also wieder Controller, wir können P löschen und bei H-4, gleiche für das schließende Tag, Speichern, und dann aktualisieren. Der Titel sieht also nicht viel anders aus, aber es gibt einen kleinen subtilen Unterschied. Man kann sehen, dass es ein bisschen kühner ist. Dies ist also ein jetzt für das Hinzufügen von Text. Als nächstes schauen wir uns an, wie wir unserem Text etwas grundlegendes Styling hinzufügen können. 9. Textbetonung, Bedeutung und Formatierung (Einführung in HTML): Die meisten der Styling, die wir zwei Websites hinzufügen, ist mit CSS getan. Es stehen uns jedoch einige kleine HTML-Elemente zur Verfügung, die auch eine Textformatierung bieten. Alles, was wir tun müssen, ist einige Tags um den Text zu umgeben, auf den Sie anwenden möchten. Lassen Sie uns zunächst einen Blick darauf werfen, einen Text fett mit den p-Tags zu machen. Zurück zu unseren Produkten. Wenn wir auf die Beschreibung gehen, wenn wir das Wort ein bisschen dunkler oder etwas kühner machen wollten. Wir können das einpacken. Lassen Sie uns das zuerst ausschneiden. Wir können die p-Tags erstellen. So können wir sehen, dass wir eine Öffnung und eine Schließung in Tag zwei haben. Drinnen können Sie in unserem Wort von genial wieder einfügen. Geben Sie das Speichern, und laden Sie dann den Browser neu. Jetzt haben wir das Wort genial als dunklere, kühnere Farbe. Obwohl der p-Typ gültig ist, um zu verwenden, ist es empfehlenswert, dass wir stattdessen eine starke Tags verwenden. Also lasst uns b ersetzen, durch das Wort stark. Speichern und aktualisieren. Der Text sieht nicht gleich aus, aber das starke Tag definiert wichtigen Text und wird in der Regel auch fett angezeigt. Wir können auch den Text kursiv machen, was, wie Sie vielleicht vermuten, die I-Tags sind. Also lasst uns stark ersetzen durch I, nachladen. Dann haben wir kursiv Text an Ort und Stelle. Genau wie das B-Element existiert das I-Element jedoch schon lange. Es wird nun empfohlen, die M-Elemente an Ort und Stelle zu verwenden, wo möglich, da sie semantischer oder beschreibender sind. Also statt ich, die oft sehen kann, verwenden wir jetzt in der Regel M, die wird Hervorhebung fallen. Speichern Sie das, und aktualisieren, und wird verwendet, um zusätzliche Betonung auf den Text zu geben, während das I-Element ist mehr für eine visuelle Metallic-Effekte, anstatt jede zusätzliche Bedeutung hervorzuheben. Wir haben auch die Möglichkeit, Text mit dem löschenden Element zu löschen. Dies stellt Texte dar, die durch Hinzufügen einer Zeile Fluids aus dem Dokument entfernt wurden. Lassen Sie uns also einen Blick darauf werfen, wie dies verwendet wird, um M zu treffen. Dann fügen Sie in DEL hinzu, die kurz für Löschen ist. Speichern Sie das. Werfen wir einen Blick auf das. Abwärts genial hat eine gelöschte Zeile Flüssigkeiten. Wir können auch das Gegenteil tun, indem Sie dem Dokument Text hinzufügen. Also, wenn wir das Wort auch entfernen wollten, genau wie wir hier getan haben und durch fantastische ersetzen. Wir würden das Insert-Element verwenden, um ein Wort einzufügen. Nach dem Löschen, lassen Sie uns die INS einschließen, die kurz für Einfügen ist. Zwischen diesen können wir Wort fantastisch hinzufügen, Raum dort, Geben Sie, dass speichern. Es gibt das gelöschte Wort von awesome und das unterstrichene eingefügt Wort von fantastisch. Als nächstes möchte ich mit einer Markierung Elemente aussehen. Diese Elemente stellen hervorgehobenen Text dar. Dies ist ein ähnlicher Effekt, was wir sehen, wenn wir nach einem Wort auf einer Website suchen. Gehen wir zum Beispiel zur Mozilla-Website. Dies ist Entwickler dot mozilla.org. Gehen Sie zu einem beliebigen Abschnitt, der in einem Chrom mag, gegangen, um Befehl auszuwählen und F, um die Suche zu öffnen. Wenn wir dann nach einem Wort wie Entwicklern suchen, können wir sehen, dass es auf der Seite gelb hervorgehoben ist. Um diesen Effekt hinzuzufügen, können wir den Text mit Markierungselementen umgeben. Lassen Sie uns dies versuchen, anstatt zu löschen. Lassen Sie uns dort eine Markierung hinzufügen. Ich kann diesen eingefügten Text auch loswerden. Das brauchen wir nicht mehr. Dann zurück zur Indexseite und aktualisieren. Nun, wie die gelbe Hervorhebung, die wir vorher gesehen haben, ist das letzte Element, das ich abdecken möchte, klein. Das macht so ziemlich, wie es sich anhört. Es macht die Schriftgröße kleiner. Wir können Markierung einfach durch das Wort klein ersetzen. Genau wie wir vier Beispiele haben. Das hat perfekt funktioniert, oder wir können sie beide kombinieren, indem wir verschachteln. Um diesen kleinen Abschnitt hier, können wir auch die Markierungselemente hinzufügen. Kurz bevor es Markierung hinzufügen lässt, und mein Texteditor vervollständigt dies automatisch. Gehen Sie stattdessen möchten wir dies ganz am Ende hinzufügen. Von innen haben wir das Wort genial, umgebend schön, wir haben klein. In der umliegenden kleinen haben wir Markierung auf der ganz außen. Verschachteln ist ziemlich einfach zu tun. Wir müssen nur vorsichtig sein, um die Typen von innen nach außen korrekt anzuordnen. All diese Elemente, die wir uns auch angesehen haben, können auch verschachtelt werden. In der Tat haben wir es bereits alle diese Beispiele durcheinander gebracht. Innerhalb dieser p-Elemente auf der ganz äußeren. Auch alle diese p-Elemente und in diesem div verschachtelt. Also gib ihnen das gleiche und lass uns diese beiden zusammen sehen. Andere kleinere Texte und auch die gelbe Hervorhebung im Hintergrund. Ich werde diese jetzt aus dem Projekt entfernen, ist, dass wir sie nicht brauchen. Lassen Sie uns kleine unmarkierte vor und auch nach dem Text entfernen. Sagen Sie das und aktualisieren Sie dann. Jetzt sind wir wieder normal. Obwohl wir diese Elemente für dieses Projekt nicht benötigen, ist es wichtig zu wissen, dass, wenn Sie sie jemals brauchen. 10. HTML-Listen (Einführung in HTML): Wir werden nun einen Blick auf HTML-Listen werfen. Listen als Sound, wird verwendet, um eine Liste von Elementen anzuzeigen. uns diese fertige Version des Projekts hier ansehen, werden wir die Listen in mehreren Bereichen verwenden. Wir haben sie in einer Seitenleiste über auf der linken Seite, um eine Liste von Kategorien anzuzeigen. Auch für die Preisspanne darunter. Außerdem verwenden wir sie für das Menü innerhalb der Kopf- und Fußzeile. Für diese Links oben sieht das Menü auf den ersten Blick möglicherweise nicht wie eine Liste aus, aber die meisten Menüs werden mit einer Liste erstellt und dann mit CSS formatiert oder geändert. Also lassen Sie uns einen Blick auf, wie wir sie verwenden können, indem wir unsere Header-Liste erstellen, mit den drei Links von zu Hause, Shop und kontaktieren Sie uns. Zurück zu unserem Texteditor. Zuerst legen wir fest, welche Art von Liste wir verwenden möchten. Ich werde mit einer ungeordneten Liste beginnen, die die UL-Tags verwendet. Also öffne einfach die Spitze, in diesem ersten div, ich werde eine ungeordnete Liste unter dem Tech-Shop erstellen . Öffnen Sie also die UL-Tags, die wieder Tags öffnen und schließen. Ungeordnete Listen sind im Grunde eine Aufzählungsliste. So sehen wir standardmäßig ein schwarzes Aufzählungszeichen oder einen Kreis links neben jedem Element. Dieses Aufzählungszeichen kann auch innerhalb von CSS geändert oder entfernt werden und wir werden sehen, wie dies später zu tun ist. Dann fügen wir unsere Listenelemente zwischen LI-Tags hinzu. Lassen Sie uns unseren ersten Listeneintrag hinzufügen, der zu Hause ist. Dann direkt darunter können wir auch einen zweiten Listeneintrag hinzufügen und dieser ist für den Shop und dann der dritte ganz unten ist für uns Kontakt. Es gibt also unsere drei Listenelemente und stellen Sie sicher, dass alle drei Elemente innerhalb dieser UL-Tags verschachtelt sind. Sobald das erledigt ist, können wir das speichern und dann im Browser testen und es gibt unsere drei Links ganz oben. Sie können auch die drei Kugeln auf der linken Seite sehen, die ich bereits erwähnt habe. Wir können auch eine nummerierte Liste erstellen, indem Sie UL in OL ändern. Also lassen Sie uns U zu O ändern. Geben Sie, dass ein speichern, neu laden, und haben standardmäßig die Zahlen 1, 2 und 3, und so weiter für jedes Listenelement. Wir sind nicht nur auf Zahlen beschränkt, aber wenn wir Listen verwenden, können wir ein Typattribut hinzufügen, um Dinge zu ändern. Innerhalb des öffnenden OL-Tags. Wir können einen Typ hinzufügen und dies auf verschiedene Zeichen setzen. Also zuerst ändern wir dies in einen Kleinbuchstaben a, speichern, aktualisieren, wir haben jetzt Kleinbuchstaben von a, b und c. Wenn dies Groß- und Kleinbuchstaben a wäre, würden diese drei Buchstaben jetzt auch Großbuchstaben sein. Wir können auch römische Ziffern mit einem Kleinbuchstaben i. Geben Sie, dass eine speichern, neu laden, und haben die kleinen römischen Ziffern auf der linken Seite. Wir können das auch tun, wenn wir wollten, dass diese römischen Ziffern diesmal mit einem Großbuchstaben I großgeschrieben werden. Mal sehen, wie das aussieht. Jetzt sind sie alle Großbuchstaben. Wir haben auch die Nummer eins zu, aber dies ist ein Standard, wie wir gleich am Anfang von 1, 2 und 3 gesehen haben. Also müssen wir das nicht hinzufügen. Listen können auch verschachtelt werden. Wenn wir zum Beispiel einige Listenartikel hinzufügen möchten, die unter unserem Shop-Link gesetzt sind, können wir eine neue UL oder eine bestellte Liste hinzufügen, genau wie diese. Also direkt unter unserem Shop, in der Tat werden wir den Typ zuerst entfernen und dann direkt unter unserem Shop erstellen wir eine neue ungeordnete Liste, genau wie wir es gerade getan haben. Also die öffnenden und schließenden Tags. Also bin ich Listengegenstände. Also lassen Sie uns sagen, verschachtelte Artikel und dann noch ein, verschachteltes Element zwei, geben Sie, dass ein Speichern, drücken Sie aktualisieren und jetzt können wir unsere neue verschachtelte Artikel Nachricht direkt unter diesem Shop-Link sehen. Auf diese Weise können wir eine Liste zu unseren Websites hinzufügen. Als Nächstes fügen wir den Rest der Liste zu unserem Projekt in einer kleinen Herausforderung hinzu. 11. Zeit zum Üben – Erstellen der Projektlisten (Einführung in HTML): Jetzt wissen wir, wie man Listen erstellt. Ich möchte, dass Sie fortfahren und die restlichen Listen für unser Projekt hinzufügen. Als Leitfaden müssen sie alle auf allen Listen stehen. Wir haben bereits die Header Artikel anstelle von zu Hause, Shop und kontaktieren Sie uns. Wir müssen dies nur in eine ungeordnete Liste ändern und sicherstellen, dass wir nur diese drei Links haben, die wir hier sehen, anstatt die verschachtelten, die wir im letzten Video hinzugefügt haben. Dann haben wir zwei weitere Listen in der Seitenleiste zu der Stelle unter den Überschriften, die wir bereits haben. Dieser Abschnitt hier ist eine Liste und dann unten haben wir eine Liste der Preise zu. Schließlich, ganz unten, haben wir auch ein Fußzeilenmenü. Dies ist genau das gleiche wie die, die wir für den Header hinzugefügt haben. Gib es mal los. Es ist eine gute Möglichkeit, zu lernen, indem man wiederholt und etwas Übung bekommt. Wenn Sie sich immer noch nicht sicher genug fühlen, uns selbst zu gehen, ist das völlig in Ordnung. Folge einfach mit mir, und wir machen es jetzt zusammen. Schließen wir dies und gehen Sie zurück zu Visual Studio. Zuerst macht Sie unser Header-Menü ist zurück zu einer ungeordneten Liste. Geben Sie diese Änderung. Wir haben auch diese ungeordnete Liste in der Mitte verschachtelt, entfernen Sie das. Dann haben wir die Liste, die wir zuvor unter dem Kategorie-Header gesehen. Zuerst gehe ich voran und füge eine horizontale Linie hinzu. Wir können dies mit einem hr-Element tun. Dies ist auch ein selbstschließendes Tag, das bedeutet, dass kein schließendes Tag benötigt wird. noch einmal einen Blick auf das fertige Projekt, gehen Sie in die Seitenleiste, die horizontale Linie ist genau diese, die wir hier sehen, die den Header von den Listenelementen und das gleiche für den Preis trennt. Werfen wir einen Blick und gehen über die Kategorie, die h3-Tag hier ist. Dann können wir unsere hr hinzufügen. Darunter können wir beginnen, unsere eigene geordnete Liste zu erstellen. Im Inneren hier werde ich zuerst Artikel auflisten, die wir haben, ist alle Elemente und das kann alles, was Sie bevorzugen. Es spielt keine Rolle. Denken Sie daran, dass dies alles nur zu üben ist. Also Kameras, dann Laptops, nach Laptops haben wir Telefone, Zubehör, und das letzte war für andere. Geben Sie das Speichern, gehen Sie zum Browser und aktualisieren Sie es. Unser Top-Menü ist jetzt zurück, wie es sein sollte und unter Kategorie, wir haben unsere Linie, die die volle Breite der Seite für jetzt verteilt, aber das ist nichts zu befürchten. Darunter haben wir unsere Listenelemente in einer ungeordneten Liste. Dann haben wir die zweite Sidebar-Liste für die Preisklassen, die wir hinzufügen werden nur blasen diese Preisposition hier. Zurück zum Texteditor, wir werden diese in unter diesem h3, den Preis hinzufügen. Stellen Sie sicher, dass sich diese ungeordnete Liste wieder immer noch zwischen diesem div-Abschnitt befindet. Denken Sie daran, dass dies der vollständige Container für unsere Sidebar ist. Der gesamte Inhalt der Seitenleiste muss zwischen den öffnenden und schließenden Tags gehen. Beginnen wir noch einmal mit unserer horizontalen Regel und dann unserer ungeordneten Liste. Im Inneren hier werde ich Elemente auflisten, Sie können den Preis hinzufügen, sagen wir 1-9, die zweite Preisspanne war 10-29, dann gehen Sie 30-59, sagen wir 60-99, und der ganz untere kann 100 plus sein. Dann speichern, neu laden, und dann haben wir unsere zweite ungeordnete Liste unter dem Preis. Das sieht jetzt gut aus. Endlich haben wir das Fußzeilenmenü. Zuerst müssen wir einen Fußzeilendiv-Abschnitt erstellen, um diese innerhalb hinzuzufügen. Denken Sie daran, dass wir den div-Abschnitt für unseren Header haben. Wir haben den div-Abschnitt hier für unsere Sidebar und dann unten unten, wir haben diesen div-Abschnitt für unseren Hauptinhalt, der die Produkte enthält. Kurz nach diesem Abschnitt und auch immer noch zwischen den Body-Tags, werden wir ein neues div hinzufügen und dies ist für den Fotobereich. Alles, was wir tun müssen, ist nur eine neue ungeordnete Liste mit einer neuen Liste Elemente hinzufügen. Dies ist genau das gleiche wie der Header-Abschnitt. Also haben wir zu Hause, wir haben Shop und dann haben wir endlich Kontakt mit uns. Mit dem an Ort und Stelle, geben Sie, dass ein Sparen. Um dies im Browser zu sehen, werden wir aktualisieren. Das sehen wir jetzt ganz unten. Ich werde diese Listen an Ort und Stelle haben. Als Nächstes, um einen Blick auf das Hinzufügen von Bildern zu werfen. 12. Arbeiten mit Bildern (Einführung in HTML): Wir haben bisher hauptsächlich mit textbasierten Elementen gearbeitet. Jetzt ist es an der Zeit, einige Bilder auf unserer Website hinzuzufügen. Ich habe die gleichen Bilder, die ich als Download kostenlos zur Verfügung gestellt oder Sie können natürlich Ihre eigenen herunterladen, wenn Sie es bevorzugen. Und ich habe diese Bilderordner auf dem Desktop, ich in den Projektordner ziehen werde. Es enthält einfach sechs Bilder, die wir für das Projekt verwenden werden. Alles, was ich tun werde, ist, das Textilprojekt zu öffnen. Innerhalb von dort werde ich in diesen Bilderordner ziehen. Also alle wollen jetzt die index.HTML neben dem Image-Ordner haben. Zuerst müssen wir zur Indexseite gehen und die Bildelemente hinzufügen. Dies hat keinen Inhalt darin, daher hat es kein schließendes Tag. Also lasst uns dies innerhalb unseres Produktivs tun, das gerade hier ist. Also lasst uns da rein gehen, knapp über dem Titel des Gamecontrollers. Lassen Sie uns das Bild ohne das schließende Tag hinzufügen. Innerhalb von hier können wir ein Quellattribut hinzufügen, um die Position des Bildes anzugeben. Es gibt ein paar Möglichkeiten, wie Sie dies tun können. Zuerst möchte ich mir Bilder von anderen Websites ansehen. Also, wenn wir zum Webbrowser gehen und dann zu Google gehen, wenn Sie nach Wikimedia Commons suchen. Gehen wir zu diesem Top-Link hier. Die Wikimedia Commons Website hat in der Regel ein Bild des Tages. Du siehst also auch ein wenig anders aus. Alles, was wir tun müssen, wenn wir mit der rechten Maustaste gehen und gehen, um Bild-Adresse zu kopieren und dann gehen Sie zu unserer Quelle und fügen Sie diese zwischen den Zitaten. Genau so. Geben Sie dem ein Sparen. Wenn wir zurück zu unserer Indexseite im Browser gehen, aktualisieren, haben wir jetzt ein Bild innerhalb dieses Produktabschnitts. Obwohl dies perfekt funktioniert, wird der Link zu Bildern auf anderen Websites generell nicht empfohlen. Zunächst einmal ist der Speicherort des Bildes nicht unter Ihrer Kontrolle. So könnte der Website-Besitzer es verschieben oder entfernen. Außerdem sollte diese Methode, die als Hot Linking bekannt ist, nur durchgeführt werden, wenn ich die Erlaubnis habe, dies vom Website-Eigentümer zu tun. Ein besserer Weg, dies zu tun, besteht darin, unsere eigenen Bilder zu verwenden. Deshalb haben wir die Kontrolle über den Standort. Wir haben diese Bilder bereits zu unserem Projektordner hinzugefügt, auch innerhalb dieses Bilderordners. Stattdessen, wenn wir zurück zu der Soße gehen und dann entfernen Sie die Längen hinzugefügt. Im Inneren geben wir einen Dateipfad an. Also sind wir jetzt innerhalb der Indexseite, also müssen wir in den Bilderordner gehen. Also ist es Bilder Schrägstrich. Innerhalb des Image-Ordners geben wir den Namen des Bildes an, das Sie hinzufügen möchten. Also, weil wir ein Produkt für einen Gamecontroller erstellen, und lassen Sie uns das Bild hinzufügen, das Controller mit the.jpg Erweiterung ist. Das muss also genau derselbe sein wie der Name hier drin. Sonst wird es nicht funktionieren. Das. jpg andere Ende ist ein Dateityp, und das ist auch wichtig. Wenn Sie Ihre eigenen Bilder mit einem anderen Dateityp wie as.png verwenden, müssen Sie dies ändern, um dies zu widerspiegeln. Sehen Sie sich auch Alpha jpg-Dateien an, auf die als JPEG genau so gespeichert wird. Stellen Sie sicher, dass das gerettet ist. Dann gehen Sie zum Browser. Da ist das Bild unseres Xbox-Controllers. Das Bildelement hat auch einige andere Attribute, die wir auch verwenden können. Ein wichtiges Attribut ist alt. Also wieder rüber. Ganz am Ende können wir auch das alt-Tag hinzufügen. Im Inneren von hier können wir einige Texte setzen. Dies ist wichtig, da wir eine Textalternative definieren können , die verwendet werden kann, wenn das Bild aus einem bestimmten Grund nicht geladen werden kann oder für sehbehinderte Menschen, die Screenreader Software verwenden, um Ihre Seite anzuzeigen. Also statt des Bildes, wenn es ein Problem mit dem Typ im Text des Gamecontrollerbildes gibt, nur als Beispiel. Auch können wir die Breite und Höhe des Bildes auch einstellen. Also außerhalb der Zitate. Lassen Sie uns die Höhe einstellen. Also die Höhen, lassen Sie uns dies auf 300 und auch die Breite gleich 300 setzen. Es wird also nur eine dieser Orte festgelegt, wie die Breite oder die Höhe. Das Bild wird proportional skaliert, wobei das Verhältnis von Größe und Breite gleich bleibt wie es derzeit ist und sowohl die Breite als auch die Höhe kann das Bild ein wenig verhältnismäßig aussehen lassen. So speichern und aktualisieren. Jetzt sehen wir, dass es 300 Pixel mal 300 Pixel sind, wodurch das Bild ein wenig gequetscht aussieht. Stattdessen werde ich nur die Breite an Ort und Stelle lassen, die Höhe entfernen. Wenn wir aktualisieren, bleibt das Bild jetzt proportional. So können wir Bilder hinzufügen. Als nächstes werden wir uns ansehen, wie Hyperlinks zu allen Projekten hinzugefügt werden. 13. Links (Einführung in HTML): Früh im Kurs, wenn wir uns HTML und die Probleme ansehen, die es löst. Wir erwähnten, der Hypertext ist der Text, der auf einem Computer angezeigt wird , der mit anderen Texten oder Dokumenten verlinkt ist. Diese Links werden als Hyperlinks bezeichnet. Wir haben bereits unsere Menüpunkte, genau wie das Beispiel hier. Aber wir brauchen eine Möglichkeit, sie auf die Links zu anderen Seiten zu ändern. Um dies zu tun, haben wir ein Element, das für Anker steht. Wir können es verwenden, um Links zu anderen Seiten, verschiedenen Orten auf derselben Seite oder sogar zu anderen Websites zu erstellen. Lassen Sie uns an die Arbeit gehen, indem Sie Links zu unseren Menüpunkten hinzufügen. Gehen wir auf die Indexseite, und gehen wir zu unserer Kopfzeile, oben oben. Diese drei Links hier, erste Links fügt das ein Element um das, was wir verlinken wollen. In unserem Fall möchten wir den Text hier verlinken. Ich werde das nur ausschneiden und dann das ein Element öffnen , das sich öffnet und schließt. In der Mitte können wir hier noch einmal in unseren Home-Link einfügen. Dies bedeutet, dass unser Text anklickbar sein wird. Dann fügen wir den Ort hinzu, zu dem wir verlinken möchten, indem wir das href-Attribut hinzufügen, das für Hyperlink-Referenz steht. Innerhalb der Öffnung ein Tag, href, nur H-R-E-F. Dann innerhalb dieses href, können wir einen Link hinzufügen. Lassen Sie uns auf eine zufällige Website verlinken, sagen wir die Mozilla-Website, die wir früher besucht haben, also http://developer.mozilla.org , und speichern Sie, über den Browser, aktualisieren. Sichern Sie dann nach oben auf der Seite. Wir können sofort sehen, dass es eine Änderung mit dem Home-Link. Wenn wir den Mauszeiger darüber bewegen, sehen wir nun einen anderen Cursor. Es ist auch eine andere Farbe mit der Unterstreichung, die zeigt, dass es ein Link ist. Lassen Sie uns darauf klicken und sehen, was passiert. Dann verlinken wir auf diese developer.mozilla.org Website, das funktioniert alles gut. Wir haben den Zurück-Button auf unsere Index-Seite zurückgenommen. Dies ist ein externer Link, da wir von unserer eigenen Website verlinken. Wir können auch einen internen Link erstellen, um zu einer anderen Seite in unserem Projekt zu verlinken. Lassen Sie uns einige weitere Webseiten erstellen, auf die Sie verlinken können. Zurück zum Projekt. Gehen wir zu unserer Text-Kachel, stellen Sie sicher, dass Sie nicht auf den Bilderordner klicken. Wir klicken auf diese und klicken dann auf neue Datei. Stellen Sie sicher, dass sich diese neue Datei außerhalb des Ordners images und neben dieser index.html befindet. Dann lassen Sie uns diesen Kontakt mit der Punkt-HTML-Erweiterung speichern, genau wie die Indexseite. Dann lassen Sie uns einfach einen einfachen Text der Kontaktieren Sie uns Seite hinzufügen, speichern Sie das. Dann lassen Sie uns auch noch eine neue Datei machen. Dann nennen wir dies das Produktdetail. Wieder mit einer Punkt-HTML-Erweiterung. Fügen Sie einfach eine Text- oder Produktdetailseite hinzu. Dies wird die Seite sein, auf die verlinkt wird, oder klicken Sie auf eines der einzelnen Produkte um weitere Informationen zu diesem Produkt zu erhalten. Jetzt werden wir unsere neuen Seiten haben, gehen wir zurück zu der index.html. Anstelle dieses externen Links können wir diesen entfernen. Wir erstellen einen internen Link, um auf diese beiden neuen Seiten zu verlinken, die Sie erstellt haben. Die erste, die ich tun möchte, ist eine Verknüpfung zur Seite index.html. Da dies der Home-Link ist, möchten wir, dass dieser Link zurück zu dieser Indexseite verlinkt wird. Sie geben, dass ein Speichern und dann klicken wir auf diese. Wir können sehen, dass sich nichts ändert, weil es immer noch auf dieser Indexseite verlinkt ist, und natürlich haben wir immer noch diese Index-Seite genommen. Jetzt für den Laden. Wenn wir die Shop-Texte ausschneiden, die als Link mit dem a -Tag aussehen, und fügen Sie diese in der Mitte. Wir haben noch keine Shop-Seite, daher können wir ein leeres href-Attribut hinterlassen. Dies bedeutet, dass es immer noch wie die restlichen Links gestylt wird. Aber es wird einfach nirgendwo verlinken, wenn wir darauf klicken. Dann kontaktieren Sie uns Seite, die eine der Seiten ist, die wir gerade erstellt haben. Öffnen wir die A-Tags. Fügen Sie Kontakt mit uns in der Mitte, das href Attribut. Diesmal ist es contact.html. Speichern Sie das, genau wie bei der Arbeit mit Bildern, ist dieser Dateipfad relativ. Dies bedeutet, dass es relativ zum aktuellen Standort ist. Wir befinden uns derzeit auf der Seite index.html. Die Kontakt- und Produktdetailseite befindet sich neben dieser Seite in der Ordnerstruktur. Daher können wir einfach den Namen der Datei hinzufügen. Wenn es eine dieser Dateien innerhalb eines Ordners hat, müsste auch den Ordnernamen kurz davor hinzufügen, wie folgt. Aber das tun wir nicht, also können wir es einfach als contact.html belassen. Sie können das ein Sparen geben und lassen Sie uns das ausprobieren. Aktualisieren, wir könnten versuchen, den Shop und wir haben keinen Link zu irgendwo, so dass dies nur auf der aktuellen Seite bleibt. Wir haben einen Link zur Kontaktseite, also sobald wir darauf klicken, wird es dann zu dieser Kontaktseite gehen. Wir können auch oben sehen, wir sind derzeit in der contact.html. Wenn wir auf den Zurück-Button im Browser klicken, werden wir dann auf diese Indexseite zurückgeführt. Eine andere Art von Link, den wir verwenden können, ist ein Link zu verschiedenen Teilen auf der gleichen Seite. Um dies zu tun, müssen wir einige temporäre Inhalte zu dieser Seite hinzufügen. Wir können auf einen Link klicken und nach unten zu dem Teil scrollen, den wir wollen. Ich werde das Bild kopieren und es unten unten einfügen, um einige weitere Inhalte zu erstellen. Lassen Sie uns nach den Bildern suchen, die wir zuvor hinzugefügt haben. Dies, lassen Sie es uns kopieren und alles, was wir tun werden, ist, das zu kopieren und einzufügen. Geben Sie uns einfach einen weiteren Inhalt auf der Seite und geben Sie, dass ein Speichern. Wenn wir dann den Browser aktualisieren, haben wir jetzt einige Inhalte, zu denen wir nach unten scrollen können. Dies ermöglicht es uns, auf einen Link zu klicken und dann wird die Seite nach unten zum Abschnitt der gleichen Seite scrollen. Dies ist möglich, indem Sie eine ID hinzufügen, so können Sie eine ID zu einem dieser Produkte hinzufügen. Ganz am Anfang ist eine ID nur ein Attribut, wie wir es zuvor gesehen haben. Lassen Sie uns dies eine ID des Links nennen. Wir können dann zum Abschnitt scrollen, wenn wir auf die Home-Schaltfläche klicken. Lassen Sie uns die href hier von index oder html mit dem Wert eines Hashtags ersetzen und dann Link. Der Hash wird für die Arbeit mit IDs verwendet und wir werden dies später im Kurs sehen oder mit CSS und JavaScript arbeiten. Geben Sie nun, dass ein Speichern dann aktualisieren und jetzt, wenn Sie auf Startseite klicken, sehen Sie, dass die Seite jetzt zum ersten Produkt hier überspringt, das ist das, das wir die ID hinzugefügt haben. Außerdem kann es zu anderen Seiten verlinken, wenn ein Benutzer auf eines dieser Bilder klickt. Lassen Sie uns zunächst die Website wieder so einrichten, wie es war. Lassen Sie uns diesen Link hier und zurück zu index.html entfernen. Wenn wir nach unten scrollen, sollte das dieses ID-Attribut entfernen. Dann können wir auch alle zusätzlichen Bilder entfernen , die wir hinzugefügt haben, um uns die zusätzliche Höhe zu geben. Entfernen Sie alle diese zusätzlichen Bilder, so dass nur das erste, das wir ursprünglich hatten. Jetzt können wir an der Verknüpfung arbeiten, wenn ein Benutzer auf dieses Bild klickt. Dazu können wir die Produktbilder mit dieser neuen Datei product-detail.html verknüpfen , die wir erstellt haben. Alles, was wir tun müssen, ist dieses Bild mit den a-Tags zu umgeben. Lässt sich die a-Tags öffnen. Dann fügen wir in den Inhalt wie das Bild, das Sie verlinken möchten. Dann fügen wir innerhalb der öffnenden Seite die vertrauten href-Attribute hinzu, die mit product-detail.html verlinken werden. Product-detail.html und geben Sie, dass speichern. Wir können auch dieses Breitenattribut entfernen, wir werden dies später mit CSS vergrößern. Entfernen Sie das und geben Sie es zu speichern. Jetzt über den Browser, können wir neu laden und jetzt können wir sehen, wenn wir den Mauszeiger über das Bild bewegen, ändert sich der Cursor zu zeigen, dies ist ein Link, und klicken Sie auf diese, und dann sind wir in die Produktdetailseite, die Sie hier erstellt haben nehmen . So können wir Links zu unserer Website hinzufügen. Das letzte, was ich tun möchte, bevor ich fertig bin, ist, diese drei Links aus dem Header-Abschnitt zu kopieren. Denken Sie daran, dass dies die gleichen Links sind, die unten in der Fußzeile sind. Kopieren Sie diese einfach, und dann können wir diese drei Listenelemente in der Fußzeile durch diejenigen ersetzen , die Links sind. Geben Sie, dass ein Speichern, aktualisieren, in der Tat müssen wir zurück zu der index.html gehen. Dann unten nach unten können wir sehen, dass der Fußzeilenabschnitt jetzt auch drei Links hat. Auf diese Weise können wir Links innerhalb unserer Webseiten verwenden. Sie sind andere wirklich nützliche und wichtige Teile des Aufbaus von Websites, wie Sie sehen können. Wir werden sie viel verwenden, während wir in diesem Kurs Fortschritte machen. 14. Zeit zum Üben – Verknüpfen mit Seiten (Einführung in HTML): Jetzt ist es an der Zeit, etwas mehr Übung auf eigene Faust zu machen. Wenn Sie sich wohl fühlen, dies zu tun. Diesmal mit Links. Wenn Sie zum Browser gehen, haben wir dieses Produktbild, das auf die Produktdetailseite verlinkt, die wir erstellt haben. Was ich möchte, dass Sie in diesem Video tun, ist auch den Produkttitel des Gamecontrollers in einen Link zu verwandeln , der die gleiche Produktdetailseite verlinkt. Wenn wir uns die finale Version ansehen, möchte ich, dass Sie fortfahren und die Links „Mehr Info“ und „In den Warenkorb“ erstellen. Denken Sie daran, wir haben nur dieses eine Produkt bisher, so dass es nur unter dem einen Produkt zu beginnen ist in Ordnung. Alles, was Sie tun müssen, ist, diese beiden Links hinzuzufügen, indem Sie das A-Element , das Sie mit etwas Text zwischen dem Öffnen und Schließen Tag entdeckt haben. Obwohl diese Texte wie Schaltflächen aussehen, ist alles nur ein Fall, etwas CSS hinzuzufügen, was wir später tun werden. Alles, was ich erwarte, ist ein einfacher Text, der ein Link ist, wenn man darauf klickt. Die Schaltfläche Weitere Informationen kann auch auf dieselbe Produktdetailseite verlinken, genau wie wir es für das Bild und auch für den Titel getan haben. Sie können jedoch ein leeres href-Attribut für diese Schaltfläche In den Warenkorb legen lassen , da wir derzeit keine Seiten haben, auf die wir verlinken können. Geh voran und gib das mal, oder wenn du noch ein wenig unsicher bist, werde ich voran gehen und das jetzt tun. Gehen wir zurück zu Visual Studio Code und beginnen mit dem Produkttitel. Lassen Sie uns unser Produkt finden, das nur hier auf den allen Artikeln ist. Beginnen wir mit dem Produkttitel des Gamecontrollers. Lassen Sie uns kopieren und kopieren zu unserem Ort und dann können wir unsere Anker-Tags hinzufügen. Dann zwischen dem Öffnen, Schließen Tag, können wir in einen Titel des Gamecontrollers einfügen, dann gehen Sie vor und fügen Sie die href Attribute innerhalb des öffnenden Tags und dies wird auf die Seite product-detail.html verlinken. Als nächstes können wir die beiden Links für Weitere Informationen und in den Warenkorb hinzufügen und ich werde dies direkt nach der Beschreibung hier tun. Lassen Sie uns etwas Platz machen und am ersten A-Tag und dies wird mit den Texten von Mehr Info sein. Dies ist auch eine Verknüpfung mit der gleichen Produktdetailseite, so dass wir auch das href-Attribut hinzufügen können. Unsere product-detail.html. Dann ist unser zweiter Link direkt unten und dies ist für In den Warenkorb. Wir können auch die href-Attribute hinzufügen, aber wie ich bereits erwähnt habe, wird dies für den Moment nur eine leere Zeichenfolge sein , da wir keine HTML-Seiten haben, die sich zu drehen. Ich gebe das Speichern des Browsers. Lassen Sie uns zuerst auf den Gamecontroller klicken und es führt uns zur Produktdetailseite. Scrollen Sie es nach unten, wir haben mehr Informationen, die uns auch auf die gleiche Produktdetailseite und in den Warenkorb bringt, die uns immer noch auf der index.html Seite hält. Das ist es jetzt für die Herausforderung, ich hoffe, Sie haben es geschafft und ich werde Sie als nächstes sehen, wo wir einen Blick auf semantische Elemente werfen. 15. Was sind semantische Elemente? (Einführung in HTML): Ich möchte nun einen kurzen Schritt vom Hinzufügen zu dieser Website zurücknehmen und mir einen Moment Zeit nehmen, um zu sehen, was wir semantische Elemente nennen. Semantische Elemente sind einfach Elemente, die ihren Inhalt klar beschreiben, nicht nur um dem Internet-Browser zu sagen, sondern auch anderen Entwicklern, die auch Ihren Code betrachten. Dies ist ein Diagramm einer typischen Website. Der Körper enthält alle Inhalte, die wir auf dem Bildschirm sehen, wie wir bereits wissen. Hier sehen wir einige typische Abschnitte einer Website. Jeder Abschnitt hat ein div-Elemente. Ein div ist ein Abschnitt oder eine Division, die verwendet wird, um Inhalte zu gruppieren. Wir haben dies bereits in unserem Projekt getan, indem wir den Kopfbereich, die Seitenleiste und jedes Produkt gruppieren . So sind die Dinge im Webdesign schon lange gemacht worden und sind immer noch. Div-Elemente sind vollkommen in Ordnung zu verwenden. In der Tat werden wir sie während dieses Kurses ziemlich viel verwenden. Oft sehen Sie ein ID-Attribut, das jedem dieser divs hinzugefügt wird. Dies ermöglicht es Ihnen, ein bestimmtes div auszuwählen, möchten wir Styling oder Layout anwenden, um das CSS zu verwenden. Hier fügen wir auch einige weitere div-Elemente hinzu, diesmal innerhalb bestehender verschachtelt sind. Auch hier ist das in Ordnung und sehr häufig. Wir haben dies bereits im Projekt getan, indem wir ein umgebendes übergeordnetes Div für den gesamten Hauptinhalthaben ein umgebendes übergeordnetes Div für den gesamten Hauptinhalt dann in einem div innerhalb jedes Produkts in diesem Hauptdiv verschachteln. Seit HTML-Version fünf haben wir nun einige alternative Elemente, die wir verwenden können, genau wie Sie hier sehen können. Anstatt ein generisches div zu verwenden, können wir jetzt ein semantisches oder mehr beschreibende Elemente verwenden. Sowohl das div als auch all diese neuen Elemente, die wir hier sehen, haben immer noch ein öffnendes und schließendes Tag, um den Inhalt zu umgeben. Wir haben Header-Elemente, die wir unserem Projekt anstelle des div um unseren Website-Titel und Navigationsmenü hinzufügen können . Es gibt auch Haupt, die den Hauptinhalt der Website enthält. Dies ist nicht für Inhalte zu verwenden, die auf anderen Seiten wiederholt werden, wie zum Beispiel Seitenleisten. Zum Beispiel werden die Seitenelemente, die wir auf der rechten Seite sehen, oft verwendet, um Seitenleisten und werden in der Regel auf der gesamten Website wiederholt. Daher ist es am besten, getrennt vom Hauptinhalt zu halten. Wir haben auch eine Sidebar-Fußzeile, so dass wir all diese neuen Elemente hier innerhalb unseres Projekts nutzen können. Dies ist das Beispiel, das wir früher gesehen haben, nun diesmal mit den neueren, semantischeren Elementen. Hier sehen Sie ein Artikelelement, das sich ideal für Anwendungen wie einen Blog-Beitrag oder ein Widget mit eigenständigen Inhalten eignet. Es gibt auch ein Abschnittelement unter zwei. Dies, wie es klingt, definiert einen Abschnitt unserer Web-Dokumente. Dies ist, um zusammengehörige Inhalte zu gruppieren. Wir haben jetzt auch das nav Element, das Sie verwenden können, um unsere Navigationslinks zu umgeben. Wir müssen diese nicht zu allen Navigationsbereichen unserer Website hinzufügen. Es ist nur für Hauptblöcke oder Nav-Links gedacht. Beachten Sie, dass wir dies innerhalb der Kopfzeile für dieses Beispiel platziert haben. Dies ist jedoch nicht erforderlich. Es kann innerhalb oder außerhalb der Kopfzeile platziert werden oder sogar innerhalb von Bereichen zwei verschachtelt werden. Wir können die Dinge auch noch weiter machen, indem wir Elemente wie die Kopf- oder Fußzeile wiederverwenden , um den Kopf- oder Fußbereich eines Artikels zu definieren, zum Beispiel oder sogar Abschnitte innerhalb anderer Elemente wie der Seitenleiste abspielen . Denken Sie daran, dass dies nur eine gängige Möglichkeit ist, diese zu verwenden. Sie sind nicht gezwungen, auf eine bestimmte Weise zu verwenden. Ihre Verwendung wird sich auch je nach Stil der Website unterscheiden, die Sie erstellen. Jetzt wissen wir, was uns zur Verfügung steht. Wir können jetzt weitergehen und diese zu unserem Projekt. 16. Semantische Elemente zu unserem Projekt hinzufügen (Einführung in HTML): Wir haben alle soeben über semantische HTML-Elemente gelernt. Diese können wir nun auf unser Projekt anwenden. Wie es ist, wird dies nicht das Aussehen innerhalb des Browsers ändern, sondern es wird eine sinnvolle Struktur zu unserer Webseite hinzufügen, die für den Browser und über Entwickler auch großartig ist. Klicken Sie auf der Seite index.html. Beginnen wir von ganz oben, indem anstelle dieses umgebenden div die Header-Elemente hinzufügen. Öffnung-Tag einfach den Text von H1 setzen, kann mit Header ersetzt werden. Dann am Ende dieses Abschnitts, direkt unter der ungeordneten Liste, können wir dann diesen Header Abschnitt 2 schließen. Jetzt kann ein Webbrowser oder Entwickler deutlich sehen, dass dies der schwere Abschnitt ist, anstatt nur ein generischer div-Container. Wenn wir das speichern und dann neu laden würden, sehen wir keinen Unterschied im Browser. Dasselbe gilt für die Sidebar. Wir können das div-Element durch die beiseite Elemente ersetzen, die wir zuvor gesehen haben. Scrollen Sie unten unter dem Header, über Shop kaufen, können wir dieses div mit beiseite ersetzen, und dann unten unten, unter der ungeordneten Liste für die Preise ändert sich auch mit beiseite. Innerhalb dieses Abschnitts haben wir auch zwei Abschnitte neben der beiseite. Eine für diese Kategorieliste, die dieser Abschnitt ist nur hier und dann ein Abschnitt für die Preise. Ich werde diese trennen, indem ich jedes mit einem Abschnitt Elemente umgibt. Direkt unter Shop durch lassen Sie uns einen Abschnitt Elemente hinzufügen. Dann kopieren wir die Ebene drei Überschrift der Kategorie. In der Tat lassen Sie uns das ausschneiden. Den ganzen Weg bis zum Ende der ungeordneten Liste. Befehl oder Control X, um dies auszuschneiden und dann fügen wir dies innerhalb dieses Abschnitts ein. Dies ist unser erster Abschnitt hier für die Kategorien. Dann fügen wir unten einen zweiten Abschnitt hinzu, der für die Preise sein wird. Wieder können wir die Level-3-Überschrift bis zum Ende der Preise auf unserer Liste kopieren, Command oder Control x, um dies auszuschneiden. Fügen Sie dies nun innerhalb des Abschnitts ein. Jetzt haben wir unsere beiden Abschnitte innerhalb der Sidebar. Geben Sie das Speichern, und überprüfen Sie, ob alles in Ordnung ist im Browser. Wir sehen keinen Unterschied, also sieht das alles gut aus. Diese Abschnitte, die wir gerade erstellt haben, enthalten in der Regel eine Überschrift. Wir haben hier bereits diese drei Rubriken. So könnte es dafür sein, sich außerhalb der Sidebar zu bewegen. Also lassen Sie uns unten gehen offenbaren und beiseite Abschnitt. Die Produkte werden der Hauptabschnitt von unserem letzten Video laufen. Wir haben auch diese Hauptelemente, die wir hinzufügen können. Dies wird diese umgebenden div-Elemente ersetzen , die um das eine Produkt geht, das wir bereits haben. Also wird das offene Innere von div durch main ersetzt. Dann unten ganz unten, schließen Sie den Hauptteil ab. Ganz unten auf der Seite können wir auch das Fußzeilenelement 2 verwenden. Dies ist der letzte div Abschnitt und Seite, die die Fußzeile ist. Lassen Sie uns dies einfach ändern, um die neuen HTML-5-Fußzeilenelemente zu sein, und geben Sie dem Browser ein Speichern und über neu laden. Wir sehen keinen Unterschied, aber jetzt haben wir die semantischen Tags an Ort und Stelle. Wir haben auch im letzten Video gesagt, es gibt jetzt ein nav Element. Dies wird verwendet, um die wichtigsten Navigationsbereiche darzustellen. Unser Kopf- und Fußzeilenmenü verweist auf andere Seiten unserer Website. Dies könnte ein guter Anwendungsfall für die Navigationselemente sein. Fügen wir dies zuerst um den Fußzeilenbereich hinzu. nach dem Fußzeilenöffnungs-Tag können Sie unser öffnendes Navigations- und schließendes Tag hinzufügen. Schneiden wir das ein wenig aus und fügen Sie dann das schließende Navi ein. Vergewissern Sie sich, dass Ihre so aussieht. Wir haben den Fußbereich. Als Nächstes drinnen haben wir das nav, und dann haben wir unsere ungeordnete Liste mit unseren kostenlosen Links. Dann können wir dies auch für den Header-Abschnitt 2 von oben wiederholen. nach dem Tech-Store können wir das Navi öffnen. Dann können wir das schließende Tag ausschneiden, das automatisch in Pharos an dieser unter der ungeordneten Liste hinzugefügt wurde. Wir können dies auch ein wenig anpassen, so dass es besser lesbar ist. Speichern und aktualisieren Sie einfach und überprüfen Sie, dass alles gut aussieht, was es scheint zu sein, wir haben immer noch unsere Links an Ort und Stelle und nichts sieht anders aus, aber wir haben jetzt beschreibende oder semantische Elemente. Nun, Struktur in unserer Webseite. 17. Zeit zum Üben – Hinzufügen von weiteren Produkten (Einführung in HTML): Wir haben jetzt viele der Grundlagen von HTML abgedeckt, ich möchte, dass Sie jetzt gehen und einige Übung auf eigene Faust , indem Sie einige weitere Produkte hinzufügen. Natürlich werden zusätzliche Produkte genau wie dieses aussehen, das wir hier haben , ohne das CSS-Styling gerade noch, aber das Wichtigste ist, den Inhalt auf dem Bildschirm zu bekommen. Wenn wir hier auf die fertige Version gehen, können Sie sechs verschiedene Produkte sehen. Das ist es, was ich möchte, dass du vornimmst und tust. Sie können noch mehr hinzufügen, wenn Sie möchten. Es muss nicht sechs sein, aber ich habe insgesamt sechs Bilder zur Verfügung gestellt, die Sie verwenden können. Wir haben bereits dieses erste Element des Gamecontrollers, so dass Sie den Rest dieses einen stützen können und einfach das Bild und auch den Text der Überschrift und auch die Beschreibung ändern können. Stellen Sie sicher, dass jedes Produkt auch ein umgebendes GIF hat, genau wie das, das wir bereits haben. Sie könnten natürlich kopieren und einfügen in diese bestehende, die wir bereits haben. Sie könnten den vollständigen div-Abschnitt kopieren und weitere fünf Mal einfügen. Aber wenn Sie neu in HTML sind, würde ich Ihnen empfehlen, zumindest versuchen, einige zu tippen, um Ihnen ein wenig mehr Übung zu geben. Ich würde vorschlagen, dass Sie das Video auf der fertigen Version pausieren , um alle Bilder und Texte zu sehen. Mach dir keine Sorgen darüber, dass du Dinge vermasselst. Ich werde das im nächsten Video durchgehen. 18. Lösung – Hinzufügen von weiteren Produkten (Einführung in HTML): Hoffe, Sie haben es geschafft, den Rest des Produkts abzuschließen und etwas mehr Übung zu bekommen, fügen Sie ein HTML zu Ihrer Website. Ich werde schnell durchlaufen und diese zusätzlichen fünf Produkte in mein Projekt hinzufügen. Zurück zum Index oder HTML. Scrollen wir nach unten zu unserem Produkt im Hauptbereich. Dieser div Abschnitt hier ist derjenige, der alle Produktinformationen enthält. Ich werde das nur kopieren und das in unten einfügen. Ich werde diesen Link zum Produktdetail tatsächlich entfernen und dies einfach im ersten Formular belassen. Lasst uns das entfernen und all diese aufstellen. Der erste war der Produkt-Controller. Der zweite wird für die Kopfhörer sein. Die Bilder waren Kopfhörer dot jpg. Das Alt war das Kopfhörerbild. Dann der Text der weißen Kopfhörer, und der Preis können wir jeden Preis hinzufügen, den Sie wollen, sagen wir 54.95 dafür. Wir nennen diese tollen weißen Kopfhörer. Es gibt break-Tag darin, nur um diese auf zwei verschiedenen Zeilen hinzuzufügen. In den Warenkorb und weitere Informationen können auch bleiben, aber lassen Sie uns den Link zu diesen beiden entfernen. Du musst das nicht tun, aber ich werde das nur für meins entfernen. Dann können wir das noch einmal kopieren und einfügen, stellen Sie sicher, dass das alles aufgereiht ist. Der dritte Punkt war für die Kamera, die Kamera dot jpg war. Die Kamerabildbeschreibung war für die Canon-Kamera. Lassen Sie uns auch diesen Link hier entfernen, infact dies auch auf den Kopfhörern, so dass das Bild mit dem alternativen Text, dem Titel, dem Preis, ein bisschen mehr sein wird. Sagen wir 649,95. Die Beschreibung, tolle Kamera von Canon. Kopieren Sie es und fügen Sie es erneut ein. Nachdem die Kamera war das Mikrofon. Mikrofon Punkt jpg, der alte Text, ein Titel in das, das ist ein Yeti Mikrofon. Der Preis, 119,95 dafür. Inschrift, sagen wir ehrfürchtiges blaues Yeti Mikrofon. Unterhalb dieser, nur Zeile ist oben und sind die gleichen. Das sind unsere Kabel. Anstelle der Kamera werden das Kabel sein. Kabel Bild. Der Titel. Preis, 10.95 und sparen Sie für Kabel. Beschreibung, tolle Kabel in verschiedenen Längen erhältlich. Sie können hier alles hinzufügen, was Sie bevorzugen, es spielt keine Rolle. Der springende Punkt ist nur etwas mehr Übung, HTML-Code zu schreiben. Nach den Kabeln haben wir unser letztes, das für die Linsen ist. Nehmen wir an, Kameraobjektive 99.95 und sagen wir awesome Kameraobjektive. Eins, zwei, drei, vier, fünf, sechs sind unsere sechs Produkte jetzt auf der Indexseite. Geben Sie das Speichern und aktualisieren Sie es dann. Von oben haben wir unser erstes Produkt, unsere Kopfhörer, die Kamera, Mikrofonkabel und auch die Objektive. Ich hoffe, du schaffst es, das abzuschließen, wenn nicht, mach dir keine Sorgen, du wirst sowieso etwas wertvollere Übung gehabt haben. Wir sehen uns jetzt im nächsten Video, wo wir einen Blick auf HTML-Kommentare werfen. 19. HTML-Kommentare (Einführung in HTML): Ich möchte nur einen kurzen Moment nehmen, einen Blick auf die Verwendung von HTML-Kommentaren werfen. Dies wird nur ein kurzes Video für Kommentare und wirklich wichtig zu wissen und zu verwenden. Ein Kommentar ist im Grunde ein Bereich, in dem wir einige Kommentare oder Notizen für uns selbst eingeben können , oder andere Entwickler, die Sie auf Code lesen können. Dies wird in größeren Projekten wichtiger. Wir können besser verstehen, was in unserem Code vor sich geht oder um unser Gedächtnis zu jagen, wenn wir ein paar Monate oder sogar Jahre später zurückkehren. Zu anderen Kommentaren müssen wir die folgende Syntax in unsere HTML-Datei einschließen. Nehmen wir an, über diesem Hauptbereich öffnen wir die eckigen Klammern, genau wie ein HTML-Elemente, fügen dann ein Ausrufezeichen und dann zwei Bindestriche hinzu und Sie können schon sehen, dass dieser ganze Abschnitt danach wird die Farbe geändert. Dann schließen wir dies ab, indem wir zwei weitere Striche hinzufügen und die Klammern schließen. Im Inneren hier können wir unseren Text hinzufügen, um einen Kommentar zu machen, sagen wir Hauptabschnitt, um Produkte anzuzeigen. Dann können wir das retten. Nun, wenn wir den Browser aktualisieren, und wenn wir zum Hauptbereich gehen , der hier „Alle Elemente“ Abschnitt ist, sehen wir, dass der Text nicht auf dem Bildschirm gerendert wird, wie der Rest des HTML. Kommentare können auch über mehrere Zeilen zu sein. Also, anstatt das alles in einer Zeile zu haben, können wir etwas tun wie Gehen wir ganz nach oben, oder fangen wir mit dem Körper an. Wir können unsere Kommentare öffnen und das ganz gleich abschließen. Wir können vielleicht eine temporäre Liste machen. Sagen wir Nummer eins, erstellen Sie die Seite shop.HTML. Nummer zwei, fügen Sie CSS-Styling hinzu. Wir können über mehrere Zeilen weitergehen. Wiederum, durch Speichern und Aktualisieren, können wir sehen, dass diese Kommentare nicht oben auf der Seite sind. Kommentare sind auch nützlich, um Zeilen von Code 2 zu entfernen. Wenn Sie zum Beispiel ein Produktbild ändern möchten, also wenn wir zum ersten Produkt gehen, das dieser Gamecontroller hier ist, könnten wir einfach einen Kommentar wie diesen hinzufügen, kurz vor den Bildelementen. Das Gleiche wie zuvor. Öffne die Klammer, füge Ausrufe und zwei Bindestriche hinzu und du kannst sofort sehen, dass wir das nicht schließen, dass der gesamte verbleibende Code danach auskommentiert wird. Also geben Sie einfach eine speichern und aktualisieren, und dann können wir alles sehen, nachdem das Bild von unserer Website entfernt wurde. Aber wir wollen nur dieses Bild auskommentieren. Lassen Sie uns dies kurz nach den Bildelementen schließen. Speichern Sie und gehen Sie dann nach unten. Also alle unsere Inhalte werden Verpackung hinzugefügt, mit Ausnahme dieses Bild für den Game-Controller. Ich werde diese Änderungen nur rückgängig machen und das Bild wieder hinzufügen. Wir speichern und aktualisieren und es gibt unser Bild wieder an Ort und Stelle. Diese Syntax, die wir hier der eckigen Klammern, des Ausrufezeichens und auch der beiden Bindestriche verwenden, wird nur bei Kommentaren in unserem HTML-Code oder bei der Verwendung von HTML-Dateien verwendet . Verwenden Sie über Sprachen eine andere Syntax, aber es funktioniert genau auf die gleiche Weise. Wir werden uns später ansehen, wie Kommentare für andere Sprachen funktionieren. Aber im Moment schauen wir uns HTML-Entitäten und -Symbole an. 20. Instanzen und Symbole (Einführung in HTML): Ich möchte Ihnen eine Möglichkeit zeigen, einige schön aussehende visuelle Symbole zu unseren Websites hinzuzufügen und wie Sie bestimmte reservierte Zeichen mit HTML-Entitäten anzeigen können. Bevor wir uns HTML-Entitäten ansehen, werfen wir einen Blick darauf, warum sie benötigt werden, indem wir zu einer der Produktbeschreibungen hinzufügen. Zum Beispiel, wenn wir nach unten gehen, sagen wir die Kamera, und gehen wir zur Beschreibung. In der Tat gehen wir runter zu den Linsen ganz unten. Innerhalb der Beschreibungen, wenn Sie dies erweitern und vielleicht einige zusätzliche Informationen in den Klammern hinzufügen möchten. Nehmen wir an, für Canon-Modelle weniger als 2017. Sie können sofort sehen, dass der Texteditor die Farbe des weniger als-Symbols hier geändert wird, zeigt an, dass es ein Problem gibt. Dies liegt daran, dass die größer und kleiner als Symbole, eine Klasse reservierte Zeichen in HTML hat. Diese speziellen sind reserviert, weil ein Browser sie für diese HTML-Öffnungs- und Schließ-Tags, die wir hier haben, verwechseln könnte . Dies kann durch eine HTML-Entität ersetzt werden. Alle HTML-Entitäten beginnen mit einem kaufmännischen Und-Zeichen und enden mit dem Semikolon mit einem bestimmten Code dazwischen. Es sieht genau so aus. Wenn wir das Kleiner-als-Symbol entfernen, können wir das kaufmännische Und-Zeichen hinzufügen, das ist dieses Zeichen hier. Weniger als verwendet die LT, und dann ein Semikolon am Ende. Jetzt, wenn Sie von Rot wechseln, um die gleiche Farbe wie die restlichen Elemente zu haben. Das sollte alles gut funktionieren. Speichern Sie das, neu laden und wenn wir nach unten auf das Bild gehen, bis zum unteren Rand der Kameraobjektive und als unsere Beschreibung. Die Canon Modelle weniger als 2017, so Symbol wird jetzt im Browser angezeigt. Werfen wir einen Blick auf ein paar mehr nur zur Demonstration. Größer als, verwenden Sie die gt, aktualisieren, Sie können sehen, die Winkel Klammern jetzt zeigt nach rechts. Wenn Sie dieses kaufmännische Und-Zeichen anzeigen möchten, die wir hier haben, ist dies AMP, die zeigt von kaufmännischem Und-Zeichen, neu laden und es gibt ein Symbol genau das. Eine andere Entität, die wir verwenden könnten, ist für das Zitat. Stattdessen amp, könnten wir QUOT verwenden, die Sie das Zitat zeigen, speichern und dann neu laden. Jetzt haben Sie das Tupel-Zitat dort an Ort und Stelle. Es gibt auch viele weitere Entitäten, die Sie mit einer schnellen Google-Suche finden können , wenn Sie mehr interessiert sind. Entitäten sind auch nützlich, um Symbole anzuzeigen, die nicht auf einer Standardtastatur sind. Werfen wir einen Blick auf einige davon, beginnend mit dem Copyright-Symbol. Das Copyright-Symbol wird einfach kopiert. Macht, dass Sie auch das kaufmännische Und-Zeichen und das Semikolon am Ende haben. Es gibt nur das Copyright-Symbol, lassen Sie scrollen. Nur um das ein bisschen besser zu sehen. Werfen wir einen Blick auf eine eingetragene Marke, die reg ist. Aktualisieren, und jetzt haben Sie die R im Kreis und auch klein wie eine Währung. Werfen wir einen Blick auf den Yen. Speichern Sie das und laden Sie es neu. Jetzt haben Sie ein YEN-Symbol, das nicht auf meiner Tastatur ist. So können wir diese verwenden und natürlich können Sie dies googlen und viel mehr finden, die Sie verwenden können. Es gibt Hunderte von verschiedenen, also suchen Sie einfach nach einem bestimmten, den Sie hinzufügen müssen. Ich werde nur diesen zusätzlichen Abschnitt entfernen, den wir hinzugefügt haben und dies sagen, sowie mehr von diesen online mit einer Google-Suche finden. Es gibt eine Website mit [unhörbar] namens Unicode table.com. Wenn wir alle von heute hatten, werden Sie eine große Auswahl an Symbolen finden , die Sie in Ihrem Projekt verwenden können. Es gibt die beliebtesten oben oder Sie können durch eine riesige Reihe von Symbolen unten scrollen. Lassen Sie uns eine Suche mit der Suchleiste oben durchführen. Lasst uns nach Spiel suchen. In der Tat suchen wir nach Videospiel und klicken Sie dann auf Suche. Jetzt haben wir ein Videospiel-Controller-Symbol. Wenn wir darauf klicken, sehen wir, dass wir zwei verschiedene Zahlen haben, wir haben eine Unicode-Zahl und auch HTML-Code. Dieser HTML-Code beginnt mit dem kaufmännischen Und-Zeichen, wie wir zuvor verwendet haben, und endet in einem Semikolon. Wir werden den HTML-Code verwenden, also lassen Sie uns diesen Code kopieren, den wir gegeben haben. Gehen Sie zurück zum Projekt und dann scrollen wir nach oben zu den Gamecontroller-Produkten. Hier ist der Titel gerade hier. Danach fügen wir das in und über in unser Projekt ein und laden Sie es neu. Scrollen Sie zurück zum Gamecontroller und da geht es. Es gibt ein kleines Bild, das in hinzugefügt wird. Es ist unterstrichen, weil es immer noch innerhalb des Links ist. Lassen Sie uns das ausschneiden und es außerhalb dieses „a“ -Tags einfügen, also einfach so und dann neu laden. Jetzt sehen wir die Unterstreichung für den Link nicht. Jetzt haben wir ein schön aussehendes Controller-Symbol neben dem Produkttitel und wie Sie an der Unicode-Tabelle sehen können, mit buchstäblich Hunderten und Tausenden von verschiedenen Modi, die wir in unseren Projekten verwenden können. Ich bin mir sicher, dass Sie viele gute Verwendungen für diese finden, wenn Sie Fortschritte machen. 21. Zeit zum Üben – Seite Produktdetails (Einführung in HTML): Jetzt ist eine große Chance, voran zu gehen und Ihre eigene HTML-Seite zu erstellen. Wir haben das Produktdetail bereits hier auf unserer HTML-Seite erstellt, aber wir haben noch keinen Inhalt hinzugefügt. Wenn wir hier auf die fertige Version gehen und auf das Produktbild klicken , den ersten Artikel. Dies ist das endgültige Produktdetail auf HTML-Seite, die ich möchte, dass Sie versuchen und kopieren. Denken Sie daran, wir müssen nur den Inhalt hinzufügen. Ich erwarte nicht, dass deine so aussieht, fertige Version, bis wir das CSS hinzufügen. Sie können diese Tabelle unten lassen. Ich werde nur für den Moment, wir werden diese hinzufügen, wenn wir zu den Tischen Vortrag kommen. Wir haben bereits alle Inhalte, die wir brauchen, um dies zu erstellen, wir haben bereits den Header-Abschnitt, wir haben bereits die Sidebar, wir haben den Fußzeilenabschnitt bereits und wir haben auch eines dieser Produkte. Daher müssen wir nur die Indexseite replizieren, aber dieses Mal haben nur ein Produkt, das dieser Controller ist. Sie können natürlich die vollständige Indexseite kopieren und in die Produktdetaildatei einfügen und dann die zusätzlichen Dateiprodukte entfernen, aber wenn Sie neu in all dem sind, können Sie es für ein bisschen mehr Übung eingeben. Wenn Sie sich immer noch unsicher sind, machen Sie sich keine Sorgen. Ich werde jetzt weitermachen und das tun. Zurück zu Visual Studio. Ich gehe zur index.html, drücke Befehl oder Steuerung A, um den ganzen Code auszuwählen , und dann gehe ich zu Befehl oder Control C, um zu kopieren. der Produktdetailseite löschen wir diesen Text und fügen Sie ihn dann im gleichen Code wie die Indexseite ein. Wenn Sie nach oben gehen, reiben Sie diesen Text oder wir können auch am Ende der es für das Detail hinzufügen und geben Sie uns speichern. Dann, wenn wir nach unten zu den Produkten scrollen, so haben wir die Seitenleiste, die in Ordnung ist und dann alle Elemente. Dieses erste div ist das, das wir für den Controller behalten möchten. Lassen Sie uns alle zusätzlichen Gegenstände entfernen, also zusätzliche zwei Elemente dort, das Mikrofon, die Kabel und schließlich die Objektive. Um das zu verschieben und dann die Haupt-Standort-Sicherung zu verschieben. Wir haben nur ein Produkt innerhalb dieses Hauptabschnitts zusammen mit der Überschrift „Alle Artikel“. In der Tat können wir dies auf Produktdetails ändern und dann geben Sie uns speichern, gehen Sie zum Browser, drücken Sie Aktualisieren. Aber lassen Sie uns zu unseren Projekten gehen. Aktualisieren Sie diese und dann, wenn wir den Game-Controller auswählen, wird dann in die Produktdetailseite zu nehmen. Wir haben die Überschrift, wir haben die Seitenleiste, und dann die Produktdetails Abschnitt, die ein Produkt ist, und dann den Fußbereich unten ganz unten. Deiner sollte jetzt genau so aussehen. Wir haben alle Inhalte, die wir aus der endgültigen Version gesehen haben, mit Ausnahme der Tabelle, die wir im nächsten Abschnitt betrachten werden. 22. HTML-Tabellen (Formulare, Tabellen und iFrames): Wir gehen nun zu HTML-Tabellen. Tabellen als Sound, werden verwendet, um eine Tabelle mit Daten anzuzeigen. Wir verwenden eine Tabelle hier auf der Produktdetailseite, um Datenzeilen über etwaige Rabatte zu erstellen, die für den Massenkauf verfügbar sind. Tabellen können grundsätzlich für jede Art von Daten verwendet werden , die Sie in Zeilen und Spalten anordnen möchten. In der Vergangenheit wurden Tabellen für die Verlegung einer Website verwendet. Zum Beispiel könnten wir alle unsere Inhalte, die wir auf dieser Seite sehen, in Spalten und Zeilen anordnen . Dies wird jetzt davon abgeraten, da es jetzt mehr CSS Alternativen gibt, vor allem seit Grid und Flexbox, die wir in diesem Kurs behandeln werden. Tabellen haben immer noch einen wertvollen Platz und jetzt ist es eine Anzeige Daten wie Text oder Zahlen, oder sogar Bilder in einer strukturierten Weise. Lassen Sie uns einen Blick in die Produktdetails zu einer HTML-Datei geben, also zurück zum Texteditor und dann lassen Sie uns diese Datei öffnen. Gehen wir zu den Produkten, also außerhalb der Seitenleiste und in den Hauptbereich. Wie machen Sie ein wenig Platz direkt nach dem Produkt, aber niemand ist Hauptabschnitt hier. Dann können wir unsere Tabellenelemente öffnen, die das öffnende und schließende Tag hat, und so erstellen wir die Tabelle. Wenn wir uns diese Tabelle von der fertigen Version ansehen, gerade hier unten, haben wir zwei Zeilen von Daten. Zeilen können mit benötigen TR-Tags erstellt werden, die für Tabellenzeile steht. Lassen Sie uns voran gehen und fügen Sie diese in unsere Tabelle. In unserem Fall sind TR. Dann fügen wir eine zweite Tabellenzeile direkt darunter hinzu. Jedes Element oder jede Zelle für jede Zeile ist in den TD-Tags umgeben, was für Tabellendaten steht. In unserer ersten Reihe hatten wir Menge 1, 2-3, 5-10 oder 10 plus. Sie können dies innerhalb der ersten Zeile hinzufügen. Wir haben TD. Die erste war Menge, dann in der ersten Tabellenzeile verkauft, fügen Sie einige neue TD-Tags von einem hinzu. Dann 2-3, 5-10, und schließlich, 10 plus, traf das „Speichern“. Jetzt gehen wir zum Browser und stellen sicher, dass wir unser eigenes Projekt öffnen. Ich gehe zu unserem Projektordner nur hier, und dann können wir diesen Index oder HTML öffnen. Natürlich sieht unser viel anders aus, weil wir noch kein CSS hinzugefügt haben. Aber wir können immer noch auf die Links klicken. Gehen wir zum Gamecontroller, um diese Produktdetailseite zu öffnen. Da ist unsere erste Reihe zu sehen, einfach die Produkte zu blasen. Zurück zum Texteditor. Wir können dies noch einmal für die Preiszeile tun. Direkt unter dem ersten TR können wir kleine TD-Tags hinzufügen. Diesmal war der erste Preis, also 7995, und dieser ein wenig billiger, sagen wir 7895. Jeder von ihnen wird mit der Zahl einstellbar entsprechen. TD nochmal, sagen wir 7695. Wir könnten dort 7495 hinzufügen, drücken Sie „Speichern“. Zurück in den Browser und neu laden, und jetzt haben zwei Zeilen und Daten. Ist HTML mit hinzugefügt für den Inhalt der Website, ist genau das gleiche sowohl für unsere Version bisher als auch für die endgültige Version, die wir zuvor gesehen haben. Das CSS-Styling spielt wirklich eine große Rolle in einem Websites Look and Feel. Viele Tabellenattribute, wie zum Beispiel auf Hintergrundfarbe ausrichten. Aber veraltet in HTML 5, die jetzt berühmt Styling mit CSS. Früher haben wir Dinge wie das Hinzufügen von Rahmen und Ausrichten von Text innerhalb der Tabelle gemacht, genau so. Wenn ich ein Board Attribute hinzufügen, setzen Sie es ein Pixel breit, wir könnten den Text in der Mitte ausrichten, speichern, und neu laden. Obwohl es derzeit in meinem Browser funktioniert, wird wieder empfohlen, Styling mit CSS zu tun. Wir können TD auch durch TH ersetzen. Dies ist für den Tabellenkopf, der einen Inhalt fett macht. Dies ist nützlich für die oberste Zeile dieser Tabelle, die die Menge ist. Lassen Sie uns voran und ersetzen Sie die oberste Reihe durch TH. Diese TdS Börsen TH sein. Tun Sie dies auf allen von ihnen, die weiter eins nach dem anderen wuchs und ersetzen TDs durch THs, und eine zu tun jetzt geben Sie uns sparen und lassen Sie uns sehen, welche Wirkung dies hat. Jetzt haben wir die oberste Zeile als fett, weil dies eine Tabellenüberschrift ist. Dies ist eine grundlegende Tabelle Setup. Aber wir können noch weiter gehen und etwas mehr Struktur zu dieser Tabelle hinzufügen , wenn wir einen Blick auf die fertige Version werfen. Gehen wir zum Produktdetail und öffnen Sie eine neue Registerkarte. Wenn wir uns diese Tabelle nur hier ansehen, genau wie ein HTML-Dokument, können wir sie in eine Kopfzeile, einen Körper und einen Fußzeilenabschnitt aufteilen . Die oberste Zeile mit der Menge kann für die Kopfzeile verwendet werden. Die Preisdaten können dann der Körper sein. Wir haben keine gute Verwendung für die Fußzeilen-Tags in seinem Beispiel, aber sie sind da, wenn wir sie brauchen. Auch die Arbeit an einer Beschriftung an der Spitze der Tabelle zu, die wir hier hinzugefügt haben, wir kaufen in großen Mengen und sparen. Gehen wir zum Projekt und geben es mal los. Zuerst können wir die Tabellenüberschriften mit T-Kopf haben. Umgeben dieser Tabellenzeile können wir eine neue Elemente von T-Kopf hinzufügen. Dann können wir unsere erste Tabellenreihe darüber beschichten und sie wieder in seinen Tischkopfbereich einfügen. Dann können wir die Preise mit T-Körper für diesen Körperteil umgeben. Unser T-Körper hinein, und kopieren Sie diese Tabellenzeile und fügen Sie sie in den Körperbereich ein. Wir könnten weitere Zeilen hinzufügen, falls erforderlich, oder sogar einen Fußbereich mit einem T-Fuß, beide. Lassen Sie uns jetzt speichern und laden Sie den Browser neu. Wir sehen keine Änderung am Inhalt. Aber jetzt hat unsere Tabelle eine beschreibendere Struktur, genau wie wenn wir semantische Elemente frühzeitig betrachtet haben. Nun für die Beschriftung, die als Überschrift für die Tabelle fungiert, die dieser Text gerade hier ist. Gehen wir zurück an die Spitze der Tabelle, direkt unter diesem öffnenden Tabellenelemente. Wir können hier unsere Beschriftung hinzufügen, und dann fügt es Texte hinzu, genau wie wir es mit den T-Tags tun. Kaufen Sie in großen Mengen und sparen Sie. Dann zurück zur Detailseite und laden Sie sie neu. Jetzt, wie unser Text oben, können Sie sehen, dass dieser Text standardmäßig in der Tabelle zentriert ist. Das letzte, was ich Ihnen vorerst zeigen möchte, mit Tabellen sind die colspan-Attribute. Wir können dies zu einer Zelle wie TD oder TH hinzufügen , um diese bestimmte Zelle die Breite von zwei oder mehr zu machen. Wenn Sie mit Microsoft Excel vertraut sind, ist dies dasselbe wie das Zusammenführen von Zellen über eine Zeile hinweg. Lassen Sie uns dies in den Header-Abschnitt gehen, indem Sie eine Mengenspanne über zwei Zellen zu beginnen. Die Menge TH, können wir die colspan Attribute haben, und verärgert ist gleich zwei. Aktualisieren, und jetzt umfasst die Menge die Breite der beiden darunter liegenden Zellen. Wir könnten das gleiche in der Leiche für den Preis tun. Fügen Sie colspan gleich zwei hinzu. Nun nimmt der Preis auch die Breite von zwei Zellen ein. Ich werde nur schnell entfernen, was wir für dieses Projekt nicht brauchen. Wir brauchen diesen Colspan Gin nicht. Wir können die Standardtabelle vorerst brauchen. Entferne die beiden. Wir brauchen auch diesen Rahmen nicht, und die align Eigenschaften auch, das ist es jetzt, aber ich werde zuerst HTML-Tabellen betrachten. Als Nächstes werden wir mit der Erfassung von Benutzereingabe-Wellenformen fortfahren. 23. HTML-Formulare (Formulare, Tabellen und iFrames): In diesem Video werden wir uns einen wichtigen Teil der Websites ansehen, die Formulare sind. Sie haben wahrscheinlich alle so etwas benutzt, was Sie hier sehen. Wenn Sie zur fertigen Version gehen und auf die Kontaktseite klicken. Dies ist ein Formular, das verwendet wird, um die Eingabe von einem Benutzer zu erhalten, wie zum Beispiel das Sammeln von Informationen zu registrieren oder eine Nachricht zu senden. Die eingegebenen Daten werden in der Regel an einen Webserver gesendet und wir werden uns diese Seite der Dinge später im Kurs ansehen. Moment konzentrieren wir uns jedoch nur auf diese HTML-Seite, die verwendet wird, um das Formular auf dem Bildschirm anzuzeigen. Lassen Sie uns auf der Kontaktseite arbeiten, damit wir beginnen können, unser Formular hinzuzufügen. Wir haben bereits eine Kontakt-Punkt-HTML-Datei gerade hier hinzugefügt. Wir können damit beginnen, unser Formular dazu hinzuzufügen. Wir können damit beginnen, unsere Struktur hinzuzufügen. Ich werde damit beginnen, den Inhalt aus dem Produktdetail in ein HTML zu kopieren. Kopieren und fügen Sie diese an Stelle des Textes, den wir hier hinzufügen. Sie können dies natürlich für mehr Übung eingeben, wenn Sie es vorziehen. Aber ich werde das einfach einfügen, um die Dinge auf Formulare zu bewegen. Um unsere Website konsistent zu halten, können wir dieselbe Header und Sidebar wiederverwenden. Dieser Header kann bleiben, und der gesamte Seitenabschnitt kann auch bleiben, aber ich werde den Großteil des Hauptabschnitts abgesehen von dieser Überschrift entfernen. Lass uns den ganzen Weg bis zum Ende des Tisches gehen. Anstelle von Produktdetails für die Rubrik der Ebene zwei, werde ich einen Titel hinzufügen, um uns zu kontaktieren. Jetzt haben wir diesen Hauptabschnitt klar, um ein Formular hinzuzufügen. Lasst uns das mal ausprobieren und das retten. Wenn wir zurück zum Browser innerhalb unserer Projekte gehen, versuchen wir, auf Kontaktieren Sie uns. Jetzt sind wir in diesen Kontakten Punkt HTML. Wir haben immer noch die Überschrift und auch die Sidebar, aber keinen anderen Hauptinhalt. Innerhalb dieses Hauptabschnitts können wir unser Formular hinzufügen. Das Formular ist innerhalb eines Formularelements enthalten. Fügen wir das da drin hinzu. Sie werden oft einige Attribute innerhalb dieses Formular-Öffnungstags sehen, wie zum Beispiel Aktion. Genau so, und auch Methode. Wir werden später im Kurs darauf zurückkommen, da sie damit zusammenhängen, wie wir unsere Formulardaten an den Server senden. Aber ich wollte nur, dass Sie sich dessen bewusst sind, wenn Sie in irgendeiner Dokumentation auf sie stoßen. Aktion wird verwendet, um den Speicherort festzulegen, an den das Formular gesendet werden soll. Wir fügen dort einen Dateipfad hinzu, und Methode definiert, welche HTTP-Methode wir verwenden möchten, um ein Formular zu senden. Wir können entweder als Get- oder Post-Anfrage senden, aber mehr dazu später. Moment möchte ich mich darauf konzentrieren, einige Eingaben auf dem Bildschirm zu bekommen. Eingaben sind die Benutzereingaben für die Tonaufnahme, z. B. Text, der eingegeben wird, oder ein Kontrollkästchen, wenn der Benutzer darauf klickt. Beginnen wir mit einer Texteingabe für den Namen des Benutzers. Wir können ein Eingabeelement hinzufügen. Genau so gibt es viele verschiedene Arten von Eingaben und wir setzen sie mit den Typattributen. Fügen wir den ersten Text hinzu und lassen Sie uns zu unseren Projekten gehen und dann aktualisieren. Es gibt unseren Kontakt Text unten und eine Texteingabe. Dies ist nur ein einfaches Feld, in dem Sie jede Art von Text eingeben können, den wir möchten. In der Tat sind wir nicht nur auf Text beschränkt, wir können sogar Zahlen und verschiedene Zeichen eingeben. Wir können etwas Text vor oder nach ihm hinzufügen, um den Benutzer wissen zu lassen, was er eingeben soll, wie zum Beispiel ihren Namen. Lasst uns das jetzt machen. Kurz bevor ich den Text des Namens hinzufügen werde, dann neu laden und da ist unser Text auf dem Bildschirm wie erwartet. Wenn wir jedoch einen Blick auf diese fertige Version werfen, können wir innerhalb der Texteingabe sehen, haben wir einige schwache Textanweisungen. Dies wird entfernt, wenn der Benutzer auf das Textfeld klickt und wir beginnen zu tippen. Dieser Text wird mit den Platzhalterattributen hinzugefügt. Gehen wir zurück zu unseren Eingaben. Kurz nach den Typattributen, können wir einen Platzhalter hinzufügen und dann können wir unseren Text dort hinzufügen, geben Sie Ihren Namen und das ist unser Text innerhalb von dort. Als nächstes möchten wir, dass der Benutzer seine E-Mail-Adresse eingibt, die gerade hier ist. Wir beschäftigen uns mit diesem auf die gleiche Weise, aber diesmal hat die Eingabe eine Art von E-Mail. Unter einer neuen Zeile können wir E-Mail hinzufügen und dann unsere Eingaben hinzufügen. Diesmal mit einer Art von E-Mail. Dies kann auch das Platzhalterattribut verwenden, um Ihre E-Mail einzugeben. Geben Sie, dass ein Speichern, und dann aktualisieren und es gibt unsere Elemente nebeneinander zu bilden. Der nächste Eingabetyp ist der Textbereich. Dies wird verwendet, wenn ein größeres Feld mehr Text für Bereiche wie eine Nachricht eingeben soll. Fügen wir dies in einer neuen Zeile hinzu. Zunächst einmal die Texte der Nachricht, und dann dieses Mal anstelle der Eingaben, verwenden wir Textbereich. Dies hat öffnende und schließende Tags, im Gegensatz zu diesen Eingaben. Drinnen können wir auch einige zusätzliche Attribute für dieses hinzufügen. Wir können die anfängliche Anzahl der Spalten breit setzen, die die Box sein soll. Lassen Sie uns die Anrufattribute hinzufügen und ich werde meine auf 30 setzen. Auch die Anzahl der Zeilen für die Höhe. Ich werde meinen Anfangswert auf fünf setzen. Textbereiche können oft größer und kleiner mit einem kleinen Ziehbereich in der Ecke gezogen werden. Aktualisieren Sie den Browser und es gibt unseren größeren Textbereich, in dem wir mehrere Textzeilen hinzufügen können. Wie ich bereits erwähnt habe, können wir auch auf den Abschnitt in der Ecke klicken und ihn größer oder kleiner machen. Denken Sie daran, früher in dem Kurs, den wir erwähnt haben, können wir die meisten Elemente in Inline-oder Blockebene kategorisieren. Wir können deutlich sehen, dass hier die Formelemente in Linie sind. Wenn Sie möchten, dass sie auf ihre eigene Linie gehen, übereinander gestapelt ist, können wir sie in einem div umgeben, das ein Block-Level-Elemente ist und dies gibt uns den Effekt, den wir hier auf der endgültigen Version sehen. Innerhalb des Formulars fügen wir einige div-Elemente hinzu. Das hat den Namen, ich füge das ein. Zweites div für die E-Mail und schließlich ein drittes für die Nachricht, fügen Sie das in. Dann laden und jetzt alle drei Eingänge auf ihrer eigenen separaten Zeile. Dies ist ein guter Start in unser Formular und wird im nächsten Video fortgesetzt. 24. Labels, Name und ID (Formulare, Tabellen und iFrames): Im letzten Video haben wir einige grundlegende Formularelemente zur Seite hinzugefügt. Außerdem haben wir links neben jeder Eingabe den Text „Name“, „ E-Mail“ und „Nachricht“ hinzugefügt . Teilen Sie dem Benutzer mit, welche Informationen eingegeben werden sollen. Dies ist nur Klartext ohne andere HTML-Elemente, wie ein p-Tag, die Sie hier sehen können. Es gibt auch keine Möglichkeit für den Browser zu wissen, dass diese Texte mit diesen Eingaben zusammenhängen. Wir können dies beheben, indem wir ein Label hinzufügen. Ein Label ist es nur eine Möglichkeit, eine Beschriftung von Texten zu jeder Eingabe wie folgt hinzuzufügen. Lassen Sie uns zuerst diesen Text ausschneiden, und dann können wir unser Etikett hier hinzufügen. Zwischen offen und geschlossen und Zeiten können wir nun unseren Text wieder einfügen, geben, dass speichern und den Browser neu laden. Wir können sofort sehen, dass, wenn wir diese erste Eingabe betrachten, es so ziemlich wie zuvor aussieht. Allerdings weiß der Browser jetzt, dass dies eine Beschriftung für ein Formular Elemente ist. Aber woher weiß es, dass dieses Label für diese speziellen Eingaben ist und nicht für die E-Mail oder Nachricht? Nun, wir können sie verknüpfen, indem wir eine ID-Attribute hinzufügen. Diese ersten Eingaben, direkt neben dem Platzhalter, können wir eine ID Attribute hinzufügen und dies kann ein Name unserer Wahl sein. Ich möchte diesen Namen nennen, um ihn einfach zu halten. Dann im Etikett, innerhalb des öffnenden Tags, können wir die vier Attribute hinzufügen und mit der ID mit dem gleichen Namen verknüpfen. Dieses ID-Attribut ist nicht nur für die Verwendung mit einem Label, es ist wichtig, um diese einzelnen Elemente sowohl mit JavaScript als auch mit CSS zu adressieren. Lassen Sie uns jetzt dasselbe für E-Mail tun. Gleich nach dem Platzhalter, der ID von E-Mail, gehe ich auf ein Etikett. Schneiden Sie den Text aus, und fügen Sie ihn wieder ein. Dann können wir das Attribut für hier von E-Mail hinzufügen. Schließlich können wir dies auch in den Textbereich einfügen. Kurz nach Zeilen, fügen Sie die ID hinzu und wieder könnte es Name Ihrer Wahl sein, aber ich werde meine Nachricht aufrufen. Schneiden Sie den Text aus, und fügen Sie ihn dann als Etikett hinzu. Schließlich das Attribut für, und dies ist Nachricht Zwei, und speichern Sie das. Es ist wichtig, den gleichen ID-Namen nicht mehr als einmal in einem Web-Dokument zu haben. Wir haben Cluster diesen Zweck und wir werden dies in mehr Details bald zu decken, so stellen Sie sicher, es ist gespeichert und dann über den Browser, neu laden und, natürlich sehen wir keinen Unterschied, aber diese alle jetzt auch hinter den Kulissen für den Web-Browser verlinkt. Ein weiterer Vorteil der Verwendung eines Labels ist, dass das Etikett auch anklickbar ist. Anstatt vorher, wenn wir nur auf diese Eingabe klicken konnten, um aktiv zu machen, wenn wir abklicken, können wir auch auf den Namen klicken. Dadurch wird auch die Eingabe aktiviert, so dass der Benutzer mit der Eingabe beginnen kann. Ein anderes Attribut, das Sie häufig sehen werden, ist ein Name Attribute. Lassen Sie uns zu unserem Texteditor gehen und innerhalb dieser ersten Eingaben können wir einen Namen hinzufügen und nennen wir diesen Namen. Gleiches gilt für die E-Mail, Name = E-Mail und auch für den Textbereich der Nachricht. Wir können zuerst verwirrt sein, warum wir diesen Namen und auch die ID-Attribute haben und das ist verständlich. Ich werde noch nicht zu viel ins Detail gehen, da vieles davon möglicherweise nicht klar wird, bis wir uns mit Java-Skripten und auch der Verarbeitung von Formularen auf dem Server vertraut machen . Das id Attribut, das wir zuerst hinzugefügt haben, wird normalerweise verwendet, um die Elemente zu referenzieren, in unserem Fall die Eingaben. Es ist eine Möglichkeit, das Element mit JavaScript oder CSS zu greifen. Das Name-Attribut ist jedoch nützlicher, wenn das Formular an den Webserver gesendet wird. Dieser Name wird verwendet, um die Daten zu referenzieren, die der Benutzer in den Eingabefeldern gerade hier eingegeben hat . Es ist eine Möglichkeit, diese Daten da rauszuholen. Wenn das noch keinen Sinn ergibt, machen sich keine Sorgen, wir werden viel mehr sehen, wenn wir diesen Kurs durchlaufen. Im Moment werden wir uns jedoch weiterhin weitere Eingabetypen im nächsten Video ansehen. 25. Checkboxes and radio buttons (Forms, Tables & iFrames): Ein weiterer gebräuchlicher Eingabetyp, den Sie wahrscheinlich bereits vorher verwenden, ist ein Kontrollkästchen. Checkbox, genau wie wir hier haben, ermöglicht es dem Benutzer, mehr als ein Kästchen pro Zeit zu aktivieren. Hier erlauben wir einem Benutzer, Angebote per Newsletter, E-Mail oder Post zu abonnieren , also lassen Sie uns sehen, wie wir dies in einem Texteditor tun können. Genau wie zuvor werde ich ein umgebendes Div-Tag hinzufügen und sicherstellen, dass dies immer noch in diesen Formularelementen ist. Öffnen Sie die div-Tags, um diese Blockebene zu machen. Dann können wir einige p-Tags für den Text an der Spitze hinzufügen und der Text wird genau das sein, was wir hier sagen, abonnieren Sie zukünftige Angebote kaufen. Dann ein Doppelpunkt am Ende. Wir können auch ein Label für dieses Kontrollkästchen verwenden, also fügen Sie diese zuerst hinzu. Direkt unter dem p fügen wir unser Label hinzu und wie zuvor fügen wir die vier Attribute hinzu. Ich werde dies den Newsletter nennen, den wir bald mit der ID verknüpfen können. Fügen Sie dann Newsletter innerhalb des öffnenden und schließenden Tags hinzu. Kurz danach können wir unsere Eingabe hinzufügen, wie wir es zuvor gesehen haben. Diese Eingabe hat den Typ des Kontrollkästchens. Dann geben wir ihm die ID, um zu diesem Newsletter einfach hier zu verlinken. Geben Sie das Speichern und Testen im Browser, indem Sie auf unsere Kontaktseite gehen und dann aktualisieren. Da ist unser Text zwischen den, p-Tags genau oben dort. Dann haben Sie das Etikett des Newsletters, und Sie können auch sehen, wir können auf dieses Kontrollkästchen klicken und auch entfernen. Wir haben nun ein Häkchen, das Sie an- und ausschalten können. Jetzt können wir dies in zwei weiteren Malen für die E-Mail- und Post-Optionen hinzufügen. Machen wir genau das Gleiche. Zuerst können wir ein Etikett und das Etikett für hinzufügen, nennen wir dies per E-Mail. Der Name der E-Mail und die Eingabe mit einem Typ erneut von Kontrollkästchen, die ID der E-Mail und es wird geschlossen. Dann unsere dritte und letzte, das wird Label für Post sein. Geht mit der Textbeschriftung von Post 2 und der letzten Checkbox-Eingabe ab. Art des Kontrollkästchens und eine ID des Beitrags dann schließe ich ab. Gehen Sie zum Browser und als unseren Newsletter, E-Mail und Post. Es gibt auch einige weitere Attribute, die wir hinzufügen sollten. Im Moment sind diese kostenlosen Kontrollkästchen nebeneinander auf der Seite, beide unabhängig voneinander. Wir können effektiv verknüpfen, wenn wir wollten, indem wir ihnen alle gleichen Namensattribute geben. Dies ist ein Namensattribut, das wir uns im letzten Video angeschaut haben, das gerade hier hinzugefügt wurde. Lassen Sie uns dasselbe für unsere Eingabe mit einer Art von Kontrollkästchen tun. Der Name, ich werde diesen Abonnieren nennen. Ich werde das nur kopieren und das gleiche noch zwei Mal hinzufügen. Diese Namensattribute, wie im letzten Video erwähnt, bedeutet, wenn wir dieses Formular an den Server senden, werden auch diese Werte aus der Eingabe übergeben. Mit Checkboxen können wir keinen Wert eingeben, wie wir es mit der Text- oder E-Mail-Eingabe konnten, so dass wir einen Wert Attribute in genau so hinzufügen können. Der Wert, und dies kann der Newsletter sein. Dies ist eine Daten, die an den Server übergeben wird, sobald er sendet, also der Wert für die zweite, von E-Mail und auch der Wert von post. Jedes Mal, wenn das Formular gesendet wird, erhält der Server den Wert von Newsletter, E-Mail oder Post, je nachdem, auf welches Formular geklickt wird. Eines der wichtigsten Dinge zu wissen ist hier, Sie können so viele überprüfen, wie Sie wollen. Wir können auf und ab von diesen klicken. Dies ist ein wesentlicher Unterschied zwischen Checkboxen und Optionsfeldern, die wir als nächstes betrachten werden. Wenn wir alle auf die fertige Version gehen, haben wir bereits diese kostenlosen Checkboxen gemacht, die wir hier sehen. Aber direkt darunter haben wir : „Wie möchten Sie, dass wir antworten?“ Sie können diese Optionsfelder sehen, aber wir können nur auf einen nach dem anderen klicken und das ist der Hauptunterschied zwischen Radio und Checkboxen. Radio-Eingänge werden in ähnlicher Weise wie diese Kontrollkästchen hinzugefügt. Ich werde ein umgebendes div hinzufügen. erneut sicher, dass dies immer noch innerhalb des Formulars ist. Dann drinnen hier, die p-mal oben für den Text, wie Sie möchten, dass wir antworten, mit einem Fragezeichen am Ende. Dann können wir weitermachen und unsere Etiketten hinzufügen. Dies hat auch die vier Attribute, so dass wir es verknüpfen können. Ich möchte dies die Telefonantwort nennen, schließen Sie das aus und fügen Sie das Etikett des Telefons hinzu. Dann gehen wir weiter und fügen unsere Eingaben hinzu. Diesmal mit der Art des Radios und auch der ID der Telefonantwort, um dies zu entsprechen. Fügen Sie das auch hinzu und ich schließe das ab. Dann brauchen wir nur noch eine für die E-Mail. Zunächst einmal das Etikett und dieses Mal kann es E-Mail-Antwort sein. Dies ist, halten Sie es konsistent mit der Telefonantwort oben. Schließen Sie das aus und fragen Sie das Etikett der E-Mail, dann Eingaben, Art des Radios und diese ID der E-Mail-Antwort. Schließ das ab, gut. Ich habe Telefonantwort und E-Mail-Antwort hier anstelle von Telefon oder E-Mail verwendet, da wir bereits E-Mail-ID auf seiner Seite haben, die wir direkt oben verwenden werden. Ich erinnere mich, dass wir gesagt haben, bevor die IDs eindeutig sein sollten und nur einmal auf der Seite verwendet werden, also lassen Sie uns das Speichern und testen im Browser, zurück zu unserem aktuellen Projekt und neu laden. Wie zwei Optionsfelder an der Spitze. Aber eine Sache, die Sie bemerken, ist, wenn wir auf diese klicken, können wir sehen, dass beide nicht gleichzeitig überprüft werden können, also ist dies ein anderes Verhalten als das, was wir erwartet haben, von dem, was wir zuvor auf der fertigen Version gesehen haben. Wir scheinen in der Lage zu sein, beide Optionsfelder gleichzeitig auszuwählen. Dies liegt daran, genau wie Kontrollkästchen, müssen wir diese auch zusammen mit einem Namensattribut gruppieren Fügen wir also den Namen in jeder Eingabe hinzu, also lassen Sie uns diese Antwort aufrufen und der zweite Eingabename entspricht Antwort. Jetzt ist miteinander verbunden. Lassen Sie uns dies testen, indem wir sie aktualisieren und beide ausprobieren. Jetzt können wir nur einen Wert auf einmal auswählen, weil hier eine Gruppe zusammen ist. Schließlich können wir einen Wert Attribute hinzufügen, um auch an den Server zu senden. Der Wert dieser Zeit kann Telefon sein, und der Wert für die zweite wird E-Mail sein. Möglicherweise sehen Sie auch Kontrollkästchen mit dem Wert true und false. Wenn es nur zwei Optionen gibt, wie z. B. eine Subscribe-Eingabe, die ein einfaches Ja oder Nein ist. Dann kann ein „true“ oder „false“ ein guter Anwendungsfall dafür sein. Als nächstes gehen wir auf eine andere wichtige Art von Eingabe zu gehen, die wählen ist. 26. Eingabe auswählen (Formulare, Tabellen und iFrames): Die nächste Art von Eingabe, die ich Ihnen zeigen möchte, ist die Auswahlbox. Diese Eingabe erlaubt im Grunde eine Dropdown-Liste und verschiedene Optionen, die der Benutzer auswählen kann, und wir können dies nur hier sehen. Wenn wir hier zum Betreff scrollen, können wir darauf klicken. Ich werde mit verschiedenen präsentiert werden. Nun ist dies eine etwas andere Art von Auswahlfeld, die wir jetzt betrachten werden, aber wir werden auf diesen Typ nur bald zu bekommen. Zunächst einmal werde ich die Dinge nur ein wenig in jeder Form aufräumen und unsere Abschnitte trennen, damit sie klarer sind. Lassen Sie uns unseren Namensabschnitt haben und fügen Sie etwas Leerzeichen zwischen jedem div hinzu, jetzt können wir das Kontrollkästchen auch schließen. Diese alle gruppierten sich so, und dann gruppieren wir unsere E-Mail- und Telefonantwort Abschnitt. Jetzt sind dies alle Gruppen, ich werde unsere Auswahl direkt unter dem Nachrichtenbereich hinzufügen. Dies ist unser Nachrichtenbereich hier, also lasst uns etwas Platz machen und auch unseren div Abschnitt dafür erstellen. Verwenden Sie dieses Mal das select-Element anstelle einer Eingabe. Fügen Sie die Auswahl einfach so hinzu. Die Auswahl, genau wie alle anderen. Ich gebe einen Ausweis, und wir nennen das Thema. Das Auswahlfeld wird eine Liste von Optionen hinzufügen , die der Benutzer als ihre Nachricht Betreff auswählen kann, sowie die Auswahl, können wir auch ein Label hinzufügen. Da wir das ID-Attribut haben, können wir auch das for -Attribut des Betreffs und dann einen Text innerhalb des Subjekts hinzufügen . Im Inneren ist jedes Element in der Dropdown-Liste in ein Optionselement eingeschlossen, und dies geht zwischen den select-Tags. Bevor wir das tun, schauen wir uns das einfach im Browser an. Sagt unser Label von Betreff, und Sie können sehen, dass wir die Eingabe hier haben. Wenn wir darauf klicken, haben wir noch keine Optionen zur Auswahl, also lassen Sie uns diese mit unseren Optionselementen hinzufügen. Lassen Sie uns den ersten hier hinzufügen, und im Inneren können wir unseren Text hinzufügen, der innerhalb der Auswahlbox angezeigt wird. Der erste kann Returns sein, lassen Sie uns dies in Aktion sehen, sagt, dass es gerade dort zurückkehrt. Wir können auch einen Wert hinzufügen. Dieses Wertattribut ermöglicht es uns, einen Auswahlwert mit dem Formular zu übergeben , wenn wir es absenden. Der Wert dieses kann zurückgegeben werden, und dann lassen Sie uns dies einfach in ein paar Male kopieren und einfügen. Dieser kann fehlerhafte Artikel und ein Optionswert eines fehlerhaften Elements sein, und ich werde einen Unterstrich verwenden, anstatt hier ein Leerzeichen zu haben. Der nächste für Lieferinformationen und den Wert der Lieferung. Dieser kann für die Order Tracking sein. Als nächstes eine Möglichkeit der Beratung. Dann schließlich werden wir einfach noch eine hinzufügen und das kann andere sein. Geben Sie das Speichern und lassen Sie uns in den Browser gehen. Lädt neu, und klicken Sie dann auf unsere Auswahl. Hier werden wir mit einer Liste aller Optionen, die wir innerhalb der Auswahl hinzugefügt. Standardmäßig können wir nur einen dieser Werte gleichzeitig auswählen. Sobald wir darauf geklickt haben, wird die Select dann ausgeblendet. Wenn wir mehr als eine auswählen möchten, können wir dem öffnenden select-Tag ein mehrfaches Attribut hinzufügen. Kurz nach der ID können wir mehrere hinzufügen, und dann gehen wir über, neu geladen, und wir können Befehl oder Steuerung drücken, um mehr als einen Wert auszuwählen. Ich werde das vorerst entfernen, da wir das nicht in unserem Projekt brauchen. Aber es ist nützlich zu wissen, dass es da ist. Wir können auch alle verwandten Optionen zusammenfassen. Anstatt nur eine lange Liste zu haben, können wir das optgroup Element verwenden, um bestimmte verwandte Themen zusammenzufassen. Rücksendungen und fehlerhafte Artikel, ich werde gruppieren. Ich werde beide Werte ausschneiden und dann das optgroup Element verwenden und dann kann ich diese zurück einfügen. Wir müssen dann dieser Optgroup ein Label geben, und dies ist der Text, der auf dem Bildschirm über beiden dieser Gruppen Abschnitte erscheinen wird und Sie werden dies deutlicher in nur einem Moment sehen. Ich werde den Text von Produktproblemen hinzufügen und diesen speichern. Mal sehen, wie das aussieht. Wenn wir erweitern, sehen wir in der schwachen Text oben haben wir Produktprobleme, das ist das Etikett, das wir hinzugefügt haben, und dann leicht nach rechts versetzt, haben wir unsere beiden gruppierten Elemente hier. Als Nächstes haben wir Liefer- und Sendungsverfolgungsinformationen. Diese können in der Auslieferung zusammengefasst werden. Lassen Sie uns diese beiden Optionen ausschneiden und unsere Optionsgruppe hinzufügen, und fügen Sie diese dann wieder ein. Die Textbeschriftung für diese kann Lieferung sein. Dann unten unten, können wir Beratung und andere in eine andere Gruppe gruppieren. Noch eine optgroup, fügen Sie diese letzten zwei in, und dann unser Label einfach von Andere. Jetzt haben wir alle drei separaten Optionsgruppen, sie sollten nun alle im Browser angezeigt werden. Laden Sie, öffnen Sie das, und wir haben jetzt insgesamt drei verschiedene Gruppen. Beachten Sie, dass wir nicht auch auf dieses Etikett klicken können, entweder auf Liefer-, Sonstige- und Produktprobleme. Dies ist einfach nur für Informationen da. Jetzt haben wir unsere Auswahlbox an Ort und Stelle. Wir werden nun eine neuere Ausgabe von HTML-Formularen betrachten, die die Datenliste ist, und wir werden uns diese als nächstes ansehen. 27. Datenliste und Übermittlung (Formulare, Tabellen und iFrames): Ich möchte Ihnen jetzt Datalist zeigen. Datalist ist eines der neueren Formularelemente, die verfügbar sind. Aus diesem Grund sind Browser-Ports vorhanden ist ein wenig begrenzter zum Zeitpunkt der Aufnahme. Wir können dies sehen, indem wir auf eine Website namens caniuse.com gehen. Alles, was ich tun muss, ist hier ganz oben den Datalist einzugeben. Scrollen Sie dann nach unten und Sie können eine Liste der unterstützten Browser sehen. Wir können an der Farbe sehen, dass die späteren Versionen von Chrome grün sind, und es wird vollständig unterstützt. Einige der frühen Versionen von Safari und auch Safari auf iOS, es wird jedoch nicht unterstützt. Wenn wir einen Blick auf Internet Explorer und auch Edge und Firefox werfen, können wir sehen, dass das hellgrüne zeigt einige partielle Flecken. Daher müssen wir vorsichtig sein, wenn Sie Datalist verwenden. Es ist jedoch nützlich zu wissen, da es eine gute Option sein wird , um zu verwenden, sobald Browser-Spot aufholt. Datalisten können anstelle eines Auswahlfelds aus dem letzten Video verwendet werden, wobei das Auswahlfeld ein Dropdown-Menü ist, um eine Option auszuwählen. Datalist ist eher ein Textfeld, in das der Benutzer eingeben kann. Dann können wir einige Vorschläge unten sehen. Wenn wir auf die fertige Version und in die Kontaktseite gehen, ist dies ein Datalist hier. Wenn wir auf die Dropdown-Liste klicken, haben wir immer noch alle Optionen, die wir im letzten Video gesehen haben, das Sie auswählen können. Oder wir können dies als Suchfeld verwenden. Wir können nach unten filtern, wenn Sie viele verschiedene Optionen haben. Beginnen wir mit Visual Studio Code von vorn. Ich werde dieses vollständige Div auskommentieren, das wir im letzten Video erstellen. Dies ist ein div, das alle Auswahlfelder umgibt. Wenn Sie Visual Studio Code verwenden, sollten Sie einfach in der Lage sein, zu markieren und drücken Sie „Befehl oder Steuerung“, drücken Sie „Schrägstrich“ und dies wird die Abschnittsfotos kommentieren. Wenn nicht, müssen wir nur manuell den Öffnungsbereich und den abschließenden Abschnitt darunter eingeben . Dann lasst uns weitermachen und unser div konstruieren, genau wie wir es vorher getan haben. Dann können wir ein Label hinzufügen. Label wird wieder die vier Attribute von Subjekten haben, und dann Subjekt hier innen. Wir konstruieren im Grunde nur in der gleichen Sache wie für die Auswahlbox. Dieses Mal fügen wir eine Eingaben mit der Art der Texte hinzu. Der Grund, warum wir eine Texteingabe hinzufügen, besteht darin, den Abschnitt hier anzuzeigen, der Benutzer kann ihn eingeben. Lassen Sie uns diesem eine ID der Themen wieder zu vielen diesen Attributen hier geben. Dann geben Sie den Platzhalter ganz am Ende Ihrer Themen ein und schließen Sie. Dies ist nur eine einfache Texteingabe zu beginnen. Der Benutzer hat ein Textfeld zum Eingeben. Dann unten können wir unsere Datenliste mit öffnenden und schließenden Tags für diese Elemente hinzufügen . Dann können wir hier eine Option hinzufügen. Dies hat nur das öffnende Tag, und wir werden auch einen Wert Attribute von Rücksendungen hinzufügen. Dann lassen Sie uns das gleiche noch ein paar Mal kopieren und einfügen. Als nächstes können wir den fehlerhaften Artikel hinzufügen. Fehlerhafte Artikel und dann der dritte ist Lieferung, vor vier war Bestellung Trucking. Der fünfte war Rat und der letzte war ein anderer. Rüber zum Browser. Es lädt wieder und geht zu den Themen. Lässt beginnen, hier etwas Text hinzuzufügen. Wenn wir innerhalb der Eingaben eingeben, sehen wir keine der folgenden Optionen, wie wir in der endgültigen Version gesehen haben. Dies liegt daran, dass wir eine Nur-Text-Eingaben haben und auch wir eine Textliste darunter haben, aber wir haben sie noch nicht miteinander verknüpft. Um sie zu verknüpfen, muss zunächst eine ID zur Datenliste hinzugefügt werden. Genau wie alle IDs im offenen Inneren gehen. Wir nennen das die Untertanen. Dann Texteingaben oben, die eine Verbindung mit den Listenattributen auflistet. Natürlich muss dies Themen sein, die ID unten entspricht. Geben Sie ein Speichern und lassen Sie dies testen. Drücken Sie „Aktualisieren“ und wir sehen auch diesen Dropdown-Pfeil erscheint, es sieht so aus, als ob es funktioniert, wenn ich versuche, Ratschläge zu hinterlassen, und das scheint alles zu funktionieren. So verwenden wir die Datenliste. Seien Sie erneut vorsichtig, wenn Sie eine Überprüfung Browserkompatibilität verwenden. Wenn Sie dies in ein Projekt aufnehmen möchten. Beide unbekannte Sache, es ist eine schöne Form Elemente sind besonders nützlich, um eine große Gruppe von Optionen nach unten zu filtern. Dies sind alle Formular-Eingaben, die jetzt auf unserer Website angezeigt werden. Wir brauchen nur eine Möglichkeit, dieses Formular zu senden und wie Sie vielleicht denken, tun wir dies mit einem Absende-Button. Submit ist auch eine Eingabe, aber dieses Mal fragen wir die Art der Übermittlung. Fügen wir dies direkt am Ende unseres Formulars hinzu. Direkt über Offenlegungsformular-Tag. Wir können dies in einem div 2 schreiben, dann fügen Sie unsere Eingaben mit der Art der Übermittlung hinzu. Geben Sie das Sparen und schauen wir uns das an. Natürlich ist dies direkt auf der Unterseite haben wir unseren Submit-Button gerade hier. Dies ist eine Bombe, die tatsächlich die Daten in der Form an den Server sendet. Denken Sie daran, all dies wird im Moment nicht funktionieren, da HTML nur den Inhalt anzeigt. Aber wir werden später im Kurs wieder Formulare einreichen, wenn wir besser mit der Back-End-Webentwicklung vertraut sind. Aber eine Sache, die Sie bemerken, sobald wir auf die Schaltfläche „Senden“ klicken, werden wir ihn wieder auf die gleiche Seite bringen. Wenn Sie sich die Enden dieser URL ansehen, haben wir Name gleich unblank, und E-Mail ist gleich kein Wert und Nachricht gleich kein Wert. Dies liegt daran, dass wir den Namen des Namens, der E-Mail und der Nachricht über im HTML hinzugefügt haben. Das war nur hier, Name, E-Mail und Nachricht. diesem Grund haben wir das Namensattribut bereits hinzugefügt, und dies sind die Daten, die an den Server gesendet werden. Geben wir dem einen schnellen Prozess, wenn wir Chris hinzugefügt haben. Dann test@test.com, dann Nachricht hier, wenn wir nach unten gehen und klicken Sie auf „Senden“, wird dann sehen, diese Informationen ist jetzt in der oberen Leiste. Unser Name ist gleich Chris, E-Mail entspricht Test und Nachricht entspricht unserem Text, der Benutzer hat ihn hinzugefügt. Wir lassen das jetzt einfach und natürlich kommen wir später wieder darauf zurück. Was wir mehr darüber wissen, wie Back-End-Entwicklung funktioniert. Wir könnten diese Schaltfläche auch mit einem HTML-Button Elemente ersetzen. Dies erfordert auch einen Typ gleich senden. Unten ganz unten. Ich werde das hier stellen. Wir werden das nur aussagen. Dann können wir zu den Button-Elementen einfach so mit der Art der Übermittlung hinzufügen. Das ist etwas, was Sie oft sehen werden. Da hat die Art der Übermittlung, wird auch das Formular wie diese Eingabe oben tun wird senden. Es war das gleiche und überprüfen Sie dies im Browser. Sieht ein kleiner Unterschied aus. Wir haben nur einen einfachen Button ohne Texte. Wir sehen keinen Text von Einsendungen dies, weil wie über Elemente mit einem öffnenden und schließenden Tag wir wie über Elemente mit einem öffnenden und schließenden Tagunseren Text innen hinzufügen müssen. Zwischen diesen können wir einen Text hinzufügen, der alle einreichen. Ich werde jetzt den Text innerhalb der Schaltfläche sehen. Dies ist eigentlich einer der Hauptunterschiede bei der Verwendung einer Eingabe oder einer Schaltfläche auf diese Weise, Eingaben haben Standardtext von senden, aber unsere Schaltflächen, Sie sind in der Kontrolle oder der Text innerhalb der Schaltfläche. Es kann also alles sein, was du willst. Chat hat Nachricht senden und Sie werden sehen, dass im Browser reflektiert. Für jetzt werde ich diese Schaltfläche auskommentieren und die Eingaben, die Sie aus dem Formular hatten, an Ort und Stelle halten . Wieder mit Befehl oder Steuerung und einem Schrägstrich zu gemeinsamen Daten heraus. Sie können auch auf einen Reset-Button stoßen, der neben dem Senden platziert ist, wie folgt. Anstatt die Art der Übermittlung. Sie können auch die Art der Resets sehen und dies wird verwendet, um jeden Text aus den Eingaben zu löschen, die wir hinzufügen. Wir hatten einen Text hier drinnen. Sie können auf „Zurücksetzen“ klicken. Dadurch werden alle Formulareingaben wieder gelöscht, wie sie waren. Dies ist der Inhalt unseres Formulars jetzt ausgefüllt. Aber im nächsten Video möchte ich Ihnen ein paar nützlichere Arten von Eingängen zeigen. 28. Andere nützliche Formularelemente (Formulare, Tabellen und iFrames): Obwohl unser Formular jetzt vollständig für diese Projekte ist, sie noch einige andere nützliche Eingabetypen, die Sie zeigen möchten. Ich werde diese als neue Formularelemente hinzufügen, um sie von dem, was wir vom Rest des Projekts halten, getrennt zu halten. Lassen Sie uns zu unserer Nähe und Formulare Seite gehen hier und dann, öffnen Sie uns eine neue Reihe von Formularelementen hier. Einige andere nützliche Eingabetypen enthalten also Nummer. Dies hat die Eingabeelemente und dieses Mal werde ich eine Art von Zahl hinzufügen. Einer der Vorteile der Verwendung der Nummer, wenn wir aktualisieren, sehen wir es hier erscheinen, ist, dass es die Eingabe des Benutzers auf diese Zahlen beschränkt. Wenn wir darauf klicken und wir versuchen, hier einige Buchstaben oder Wörter hinzuzufügen, nehmen diese keine Auswirkungen auf, aber wir können natürlich einige Zahlen hinzufügen, die Sie hier sehen können. Es gibt auch die oben und unten auf der rechten Seite, die wir verwenden können, um durch Zahlen nach oben und unten zu gehen. Als nächstes, wenn Sie nach dem Passwort des Benutzers fragen möchten, es sinnvoll, dies mit Eingaben mit dem Typ des Passworts zu tun. Dies hat die Vorteile, das Passwort zu starren. Wenn wir hier unser Passwort eingeben, sehen wir, dass wir keines der Zeichen sehen können, die Sie eingegeben haben. Dies ist nützlich, wenn jemand hinter Ihnen ist oder vorbei geht, so dass niemand sonst das Passwort sehen kann, das Sie eingeben. Es gibt auch einen Eingabetyp von Datumsangaben, die wir auch Zugriff haben und wie Sie es erwarten würden, ist dies der Eingabetyp des Datums und dies ist offensichtlich für alle Datumsfelder. Werfen wir einen Blick auf das in Aktion. Dies könnte verwendet werden, wenn Sie für den Geburtstag eines Benutzers fragen, oder zum Beispiel, Sie die Daten auswählen, wollen wir in einem Hotel bleiben, auf einer Reise-Website. Wenn wir darauf klicken, haben wir die Daten, den Monat des Jahres. Wir können dies auch mit der Tastatur steuern, indem Sie nach oben und unten tippen, Tab hinzufügen wechselt auch zwischen dem Tag, dem Monat und dem Jahr. Wir können auch auf diesen Drop-Down-Pfeil klicken und wir haben ein Datumsfeld, in dem wir verschiedene Monate des Jahres auswählen können. Dann müssen wir nur auf eines der Daten klicken und das Feld wird automatisch mit dem Datum gefüllt, auf das wir geklickt haben. [ unhörbar] diese Eingänge, es ist ein paar mehr zu, die Sie online nachschlagen können, aber ich werde Ihnen ein paar mehr von den üblichen zeigen, wie Farbe. Ändern Sie den Typ, um Farbe zu sein. Sie haben dies wahrscheinlich schon einmal auf verschiedenen Websites gesehen, wo wir einen Farbwähler haben. Wenn wir aktualisieren, sehen wir, dass die Farbe Schwarz standardmäßig ist. Dies sieht in verschiedenen Browsern anders Wenn Sie also etwas wie Edge oder Firefox verwenden, haben Sie hier möglicherweise einen etwas anderen Eingabetyp. Wenn wir darauf klicken, erhalten wir einen schönen Farbwähler, das ist natürlich der Apfel und Ihre kann ein wenig Unterschied aussehen. Wir klicken auf verschiedene Werte und wählen daraus unsere Farbe aus. Ein weiterer nützlicher ist Bereich. Also Eingaben mit dem Typ des Bereichs, zurück zum Browser. Bereich gibt uns einen Schieberegler , über den ein Benutzer bewegen kann, indem er darauf klickt und nach links und rechts zieht. Standardmäßig ist der Schieberegler in der Mitte, aber es gibt auch einige Attribute, die wir hinzufügen können, um Dinge zu ändern, können wir das Minimum und auch Maximum ändern. Wenn wir also das Minimum auf eins und das Maximum auf 10 setzen, gibt es uns einen Bereich von 1-10, zwischen dem wir ziehen können. Jetzt können wir die Startposition des Schiebereglers steuern. Derzeit, wie bereits gesagt, beginnt es in der Mitte, aber wir können die Ausgangsposition ändern, indem wir die Wert-Attribute setzen. Also, wenn wir dies auf eins setzen, würde es am Anfang erscheinen. Lassen Sie uns das mal gehen und wir sehen jetzt den Kreis gleich am Anfang. Wenn wir dies ändern, um einen Wert von 10 zu sein, würde es direkt am Ende erscheinen und dies ist nützlich Eingabetyp, besonders wenn wir anfangen, über JavaScript zu lernen. Wir können es für Dinge wie die Einstellung der Lautstärke auf einem Musik-Player verwenden. So geht es auf und ab, als der Benutzer von Drags. Der letzte Eingabetyp, den ich Ihnen in diesem Video zeigen möchte, ist die Suche. Ich bin sicher, dass Sie alle zuvor verwendet haben, um nach Artikeln auf einer Website zu suchen. Dies ist etwas, das auf unserer Website, im Header-Bereich verwendet werden könnte. Wenn Sie sich die letzte Seite hier ansehen, schauen Sie sich ganz oben an, wir haben ein Suchfeld gerade hier, ich werde jetzt das zweite Formular entfernen, das ich damit herumgespielt habe und es wieder nach oben bringen und dann können wir eine Suche in den Header hinzufügen. Wenn wir also zurück zum Anfang der Seite und in diesen Header-Abschnitt scrollen, können wir dies direkt nach unserer Navigation hinzufügen. Wir haben einen Eingabetyp gleich Suchen und wir können auch ein Platzhalterattribut zu Suchen hinzufügen , dann schließen Sie ab. Einer der Unterschiede zwischen dieser und einer normalen Texteingabe ist, nachdem wir etwas eingegeben haben, gibt es ein x, das den Suchbegriff zu löschen scheint. Also werde ich jetzt unsere Haupt zeigen, wenn wir aktualisieren, dann gehen Sie zurück nach oben, dann beginnen wir einzutippen, wir sehen dieses x auf der rechten Seite, um die Formulareingaben zu löschen. Auch, wie bei anderen Formularelementen, stellt der HTML nur ein visuelles Suchfeld zur Verfügung. Suche nach etwas im Moment wird nicht funktionieren, nur mit HTML allein. Wir müssen auch das Suchfeld zur Kopfzeile hinzufügen, in der Indexseite 2 und auch die Produktdetails. Wenn wir auf die Startseite klicken, sehen wir dies nicht im Inneren von hier hinzugefügt. Lassen Sie uns diese Eingaben von der Kontaktseite kopieren, zuerst aktualisieren wir das Produktdetail an genau der gleichen Stelle, nah genug. Wenn wir dann unsere Sidebar öffnen und in die index.html gehen, können wir das gleiche nur hier tun. Probieren wir das aus. Auf der Startseite, die Kontaktieren Sie uns und auch für klicken Sie auf eines der Produkte, wie zum Beispiel den Gamecontroller. Wir haben gesehen, das Produktdetail wird auch die Suchleiste dort haben. Also jetzt sollten wir eine ziemlich gute Idee haben, von den verschiedenen Möglichkeiten, wie wir Informationen mithilfe von Formularen und Eingaben sammeln können. Ich hoffe, du hast das nützlich gefunden und ich sehe dich im nächsten Video. 29. IFrames (Formulare, Tabellen und iFrames): Wir müssen uns jetzt von Formularen entfernen und einen Blick auf die Verwendung von iframes werfen. Das iframe-Element wird verwendet, um eine andere HTML-Seite in ein Webdokument einzubetten. Wie Sie hier auf dieser fertigen Kontaktieren Sie uns Seite sehen. Wir können auch eine Seite von einem anderen Anbieter wie Google Maps einbetten , wie wir es hier getan haben. Es mag etwas seltsam klingen, aber sie werden klarer, wenn wir sie in Aktion sehen. Lassen Sie uns dies auf der Seite contact.html sehen. Ich werde einen Iframe innerhalb von hier hinzufügen. Ich werde das direkt nach unserem Formularabschnitt hinzufügen. Lassen Sie uns am Ende unseres Formulars nach unten und rechts scrollen, aber immer noch in diesem Hauptabschnitt können wir das iframe-Element hinzufügen. Wenn wir geben, dass Speichern, und aktualisieren Sie dann den Browser innerhalb unseres Projekts. In der Tat müssen wir auf die Seite Kontaktieren Sie uns gehen und dann nach unten scrollen. Wir sehen ein leeres iframe-Element ganz unten. Um dies zu zeigen, müssen wir ein Quellattribut hinzufügen, genau wie wir es bei der Arbeit mit Bildern getan haben. Das Quellattribut verweist auf die Webseite, die wir einbetten möchten. Dies kann so einfach sein wie die Anzeige auf einer unserer eigenen Webseiten, wie zum Beispiel Produktdaten. Lassen Sie uns die Quelle innerhalb von hier hinzufügen und Link zu unserer product-detail.html. Ich gebe das Save und lass uns sehen, wie es aussieht. Es gibt unsere Produktdetailseite in diesem iframe oder in diesem Fenster. Jetzt können wir nach oben, unten, links und rechts scrollen. Dieser iframe ist ein wenig zu klein für den Inhalt. Sie können auch ein Attribut height und width verwenden, um die Größe des iframes zu ändern. Beginnen wir mit der Breite. Lassen Sie uns für 800 und eine Höhe von 600 gehen. Dieser Wert ist in Pixeln, also ist es ein 800 mal 600 Pixel iframe. Jetzt haben wir den iframe ein wenig größer auf dem Bildschirm dort. Der iframe kann auch verwendet werden, um auf eine externe Website zu verlinken, aber nur, wenn der Website-Inhaber dies zulässt. Derzeit erlaubt Wikipedia dies, und wir können sehen, indem wir die Quelle eingeben, also anstelle von productdetail.html, geben wir die vollständige URL von https://wikipedia.org ein, und geben Sie dann ein Speichern. Auf dem Browser, und wir können die Wikipedia-Website eingebettet sehen. Im Moment erlaubt Google uns dies nicht. Lassen Sie uns auf google.com verlinken, aktualisieren, und wir sehen nur einen leeren iframe. Wir müssen vorsichtig sein, auf welche Websites wir verlinken und sicherstellen, dass dies erlaubt ist. Wir können auch einige Fallback-Inhalte hinzufügen, wenn der eingebettete Inhalt nicht angezeigt werden kann. Dies kann zwischen dem iframe-öffnenden und schließenden Tag hinzugefügt werden. Lassen Sie uns unseren p-Typ zu etwas Text hinzufügen. Nehmen wir an, Ihr Browser unterstützt keine Iframes. Zurück zu unseren Projekten und neu laden. Wir sehen nicht anders, da dies nur angezeigt wird, wenn iframes deaktiviert sind oder wenn es auf einem Bildschirmlesegerät für sehbehinderte Menschen angezeigt wird. Wir können auch Inhalte von anderen Websites einbetten, wenn sie dies erlauben. YouTube ist eine der Websites, die es uns erlaubt, einen iframe in unsere Projekte einzubetten. Um dies zu tun, können wir zu youtube.com gehen. Dann müssen wir nur noch ein Video finden, das wir hinzufügen möchten. Lassen Sie uns einfach eine schnelle Suche nach allem machen. Ich möchte nach Elon Musk suchen und auf eines dieser Videos klicken. Dann müssen wir auf „Teilen“ klicken. Wenn du hier runtergehst, gibt es einen Freigabe-Button. Klicken Sie darauf und dann klicken wir auf einbetten. Dann können wir diesen iframe kopieren, der uns zur Verfügung gestellt wird. Wir können das Schließen und den öffnenden iframe sehen. Lassen Sie uns all diesen Abschnitt kopieren, gehen Sie zurück, und wir können dies anstelle unseres aktuellen iframe hinzufügen. Lassen Sie uns dies entfernen und fügen Sie stattdessen die YouTube-Version ein. Geben Sie, dass ein Speichern und jetzt zurück zu unserem Projekt, drücken Sie Reload, und jetzt haben wir ein YouTube eingebettetes Video und Play-Knopf-Steuerelemente unten unten an der Unterseite. Dieser iframe hat auch einige Attribute, die wir noch nicht gesehen haben. Wenn wir nach rechts scrollen, sehen wir, wir haben Vollbild zulassen. Es gibt auch Rahmenrahmen , der einen Wert von Null oder eins hat. Null bedeutet keine Grenze und man bedeutet, einen Rahmen hinzuzufügen. Dies ermöglicht den Vollbildmodus, wie es klingt. Wenn wir das Attribut entfernen und dann gehen und das Video abspielen, klicken Sie also auf Play, und wenn wir versuchen, auf Vollbild zu klicken, können wir sehen, dass der Vollbildmodus nicht verfügbar ist. Jedoch, Anwälte Verpackung wird es uns ermöglichen, das Video Vollbild noch einmal zu machen. Wir spielen und da gehen wir so jetzt ist es ein die volle Größe unseres Bildschirms. Jetzt wissen wir ein wenig mehr über iframes. Im nächsten Video können wir sie verwenden, um Google Maps zu unseren Projekten hinzuzufügen. 30. Google Maps hinzufügen (Formulare, Tabellen und iFrames): Wenn wir auf unsere fertige „Kontaktieren Sie uns“ -Seite gehen und nach unten scrollen, haben Sie keine Verschwendung. In der fertigen Version haben wir eine Lagekarte auf dieser „Kontaktieren Sie uns“ -Seite. Dies wird von Google bereitgestellt, indem Sie auf die Maps API zugreifen. Wir werden APIs später in diesem Kurs ausführlich behandeln, einschließlich der Erstellung unserer eigenen, aber im Moment wissen Sie nur, dass die Maps-API es unserer Website ermöglicht, mit den Karteninformationen von Google zu kommunizieren. Sie fragen sich vielleicht, was das alles mit dem HTML-Abschnitt des Kurses zu tun hat, gut diese API ist in einem iframe enthalten, auch es ist wirklich einfach zu implementieren. Lassen Sie uns beginnen, indem Sie zu Google gehen, und lassen Sie uns eine Suche nach Google Maps API, und normalerweise zu gehen ist developers.google.com//maps, so wählen Sie dies, und klicken Sie zuerst auf die Schaltfläche „Erste Schritte“, die nur hier, und dann lassen Sie uns nach unten scrollen. Die eine, die wir brauchen, ist die Google Maps Einbettungs-API, also lassen Sie uns nach unten scrollen, und dies ist unter dem Web-API Abschnitt, also klicken Sie auf „Google“, und wir sind bei Google Maps Einbettungs-API. Dann wählen Sie Karten, und wir können sehen, dass diese basiert Karten auf Innenraumplänen zu unserer Website integriert, so klicken Sie auf diesen Link hier. Dies ist ziemlich einfach zu beginnen. Alles, was wir zuerst tun müssen, ist, diesen Iframe-Abschnitt zu kopieren , den Sie es gerade hier bekommen. Kopieren Sie das, und dann können wir zu unserer contacts.html Seite gehen und unsere YouTube-Version durch eine ersetzen, die wir gerade kopiert haben. Jetzt gehen wir zum Browser und sehen unsere „Kontaktieren Sie uns“ -Seite, drücken Sie „Reload“, und wir können ein Problem sehen. Der bereitgestellte API-Schlüssel ist ungültig Wie die Fehlermeldung sagt, benötigen wir einen API-Schlüssel. So kann Google verfolgen, wer auf seine Kartendaten zugreift. Wir können einen API-Schlüssel aus dem Menü erhalten, zurück über in der Google-Website, auf der linken Seite ist eine Option, um einen API-Schlüssel zu erhalten. Bevor wir jedoch noch weiter gehen, möchte ich nur darauf hinweisen, dass Websites wie diese oft Layouts im Laufe der Zeit ändern, also wenn Sie Version ein wenig anders aussieht, ist es normalerweise nur ein Fall eines NavigationLink ist verschoben, aber Sie sollten trotzdem in der Lage sein, sich zurechtzufinden. Dann müssen wir nach unten gehen und „Get a Key“ auswählen. Wenn Sie nicht bereits angemeldet sind, müssen wir uns bei Google anmelden, also werde ich mich anmelden, dann klicken Sie auf „Weiter“, und dann müssen wir unser Passwort hinzufügen. Ok, gut. Jetzt sind wir eingeloggt, können wir wieder auf „API-Schlüssel abrufen“ klicken. Zuerst müssen Sie ein Projekt erstellen, also werde ich ein neues Projekt erstellen. Klicken Sie auf diesen Link „Neues Projekt erstellen“ und den Benutzernamen „Tech Store“, und klicken Sie dann auf „Weiter“. Dies sollte uns dann unseren API-Schlüssel geben , den wir kopieren können, indem Sie hier auf dieses Symbol klicken. Gehen Sie zu unserem Projekt, und wenn wir dann einen Blick auf diesen Iframe werfen, den wir zuvor kopiert haben, müssen wir zu dem Abschnitt scrollen, der besagt „Schlüssel gleich“, und dann, wo es „Ihr API-Schlüssel“ sagt, löschen Sie diese drei Wörter hier, und fügen Sie dann den API-Schlüssel ein, den Sie gerade kopiert haben. Geben Sie, dass eine speichern, und jetzt, wenn wir gehen zurück zu unserer Kontaktseite und aktualisieren, wir sollten jetzt sehen, dass wir mit diesem Google Maps Bild präsentiert, anstelle der Fehlermeldung. Jetzt haben wir eine Verbindung zur Google Maps API. Jetzt brauchen wir nur diese Karte, um am Standort unseres Unternehmens zu sein. Wenn wir zurück zur Google-Website gehen, und ich klicke auf „Fertig“, können wir einen Quickstart aus dem Menü sehen, das ganz oben ist, also klicken Sie darauf. Hier können wir unsere eigene benutzerdefinierte Karte erstellen. Wir können nach Orten oder einer Stadt suchen. Sagen wir, New York, dann klicken Sie darauf, und dann scrollen Sie nach unten, wir können sehen, dass wir New York auf der Karte dort erscheinen. Wir können auch nach der Apple-Adresse suchen, zum Beispiel, also suchen wir nach „Endlosschleife“, die gerade hier ist, und scrollen Sie dann nach unten, und wir können den neuen Standort nur hier sehen. Wir haben bereits unseren API-Schlüssel, um diese Karte zu konstruieren, also könnten wir dies einfach in hier einfügen, und wenn Sie das getan haben, klicken Sie auf „Fertig“, und dann erhalten wir einen iframe, wir kopieren können, und das hat diesen neuen Ort, dem wir vorher gesucht haben, also lassen Sie uns das kopieren. Wenn wir dann zu dem Projekt gehen und unseren iframe durch den, den Sie gerade kopiert haben ersetzen , und dann, wenn wir zurück zu unserer Kontaktseite gehen, drücken Sie „Aktualisieren“, und wir werden jetzt zu der Adresse gebracht, die wir zuvor hinzugefügt haben, Also, natürlich müssten Sie dies auf den Standort Ihres Unternehmens ändern, und so machen wir das. Jetzt haben wir Google Maps erfolgreich in unser Projekt integriert. Dies ist es jetzt für die HTML-Abschnitte dieses Kurses. Gut gemacht, um so weit zu kommen. Jetzt können wir weitermachen, alles über CSS zu lernen. 31. CSS verstehen (Einführung in CSS): In den HTML-Abschnitten, die wir bisher behandelt haben, haben wir auf die fertige Website verwiesen, um zu zeigen, was wir zu unseren Projekten hinzufügen werden. Im Moment enthält unser eigenes Projekt, das wir erstellt haben , genau den gleichen HTML-Inhalt wie eine fertige Version. Aber wie wir wissen, sehen sie ganz anders aus. Der Unterschied ist das CSS. CSS steht für Cascading Style Sheets. Es ist eine Stylesheet-Sprache, die verwendet wird, um das Aussehen und die Formatierung eines Dokuments zu beschreiben , das in einer Markup-Sprache wie HTML geschrieben wurde. Dies ist eine formale Beschreibung, aber Sie können sich CSS als eine Möglichkeit vorstellen, Elemente auf unseren Websites zu gestalten , zu positionieren und auszulegen. Wir können es verwenden, um Farben, Rahmen, Ausrichtung, Textgröße, Hintergrundfarben und vieles mehr hinzuzufügen. Die Verwendung von CSS hält unser Styling von den HTML-Inhalten getrennt. Diese Trennung hält alle Dateien kleiner und wartbarer. Wir können immer noch Stile in unsere HTML-Datei mischen, und wir werden uns einige Möglichkeiten ansehen, dies zu tun. Nun, alles andere als eine kleine Website wird normalerweise HTML in einer Datei haben, mit der Erweiterung a.html, und dann CSS in einer separaten Datei mit der Erweiterung a.css. Wenn Sie eine separate CSS-Datei haben, können dieselben Stile auch in mehreren HTML-Dateien wiederverwendet werden. CSS3 ist die neueste Version. Es ermöglicht uns, noch mehr mit neuen Funktionen wie Transformationen, Animationen, Farbverläufe, Körperbilder, abgerundete Ecken und Medienabfragen zu tun. Diese werden wir natürlich in Kürze ausführlicher eingehen. Also, wie sieht CSS aus? Nun, auf dem Bildschirm sind hier einige Beispiele. Zuerst können wir ein Element nach seinem Namen auswählen, wie h1. Es gibt viele Möglichkeiten, ein Element auszuwählen. Werde sich diese bald auch ansehen. Dann fügen wir einige geschweifte Klammern hinzu, um die Stilregeln zu enthalten, die wir auf diese h1 anwenden möchten. Gleich mit der Kopfzeile direkt darunter wird diese Kopfzeile eine Breite von 70 Prozent mit einem weißen Hintergrund haben. Jetzt wissen wir ein wenig darüber, was CSS ist. Lassen Sie uns nun unsere Projekte automatisieren. 32. Inline-Stile und Farben hinzufügen (Einführung in CSS): Ich werde beginnen, indem ich eine Möglichkeit betrachte, Stile hinzuzufügen, die darin besteht, sie in Zeile hinzuzufügen. In Zeile bedeutet grundsätzlich, dass wir sie innerhalb jedes HTML-Elements hinzufügen. Diese endgültige Version hat eine graue Hintergrundfarbe für die Kopfzeile und auch die Fußzeile unten. Lassen Sie uns beginnen, indem Sie der index.html eine Hintergrundfarbe hinzufügen. Gehen wir zum Kopf-Element, index.html, gehen wir zum Anfang der Seite. Hier haben wir unsere Header-Elemente. Alpha kann die Stilattribute verwenden, um hier Inline-Stil hinzuzufügen. Wir können dann die Hintergrundeigenschaft auswählen, um eine Farbe hinzuzufügen, fügen Sie einen Doppelpunkt. Wir können einen Kühlernamen für die meisten Werte verwenden, z. B. rot, blau oder gelb. Fangen wir mit Rot an. Jede CSS-Eigenschaft muss mit einem Semikolon enden und uns speichern. Laden Sie dann den Browser neu, gehen Sie zur index.html. Es gibt einen ziemlich schrecklichen Blick in der roten Kopfzeile, aber die Sterneigenschaft wird jetzt wirksam. Wir können auch Farben in anderen Formaten verwenden, anstatt nur den Namen eingeben, wie RGBA und hex. Wenn wir gehen über Google und wenn Sie für eine Farbauswahl suchen, ist verschiedene Online-Tools, die wir für eine Farbauswahl verwenden können, Ich werde die W3Schools Version verwenden, die der obere Link auf hier ist. Hier können wir eine Farbe aus diesem Bild auf der linken Seite auswählen. Lassen Sie uns jede Farbe für jetzt. Gehen wir für Blau. Wenn wir nach unten scrollen, können wir sehen, dies ist eine andere Formate hier. Der erste hat einen Hash und dies ist ein Hexagon-Wert. Hex steht für hexadezimale Farbe und hat ein Hash-Präfix, es besteht aus sechs Ziffern. Die ersten beiden sind rot, die zweiten beiden grün und dann schließlich die beiden blauen Werte am Ende. Die Hex-Farbkombination, die ich für den Header gewählt habe, ist 333A40. Lassen Sie uns gehen und ersetzen Sie diesen roten Wert. Lassen Sie uns den Hash hinzufügen, dann den Wert von 333A40 und geben Sie uns speichern. Werfen wir einen Blick auf das. Jetzt habe ich die gleiche dunkle Farbe, die Sie in der endgültigen Version nur hier sehen. Wenn wir wieder auf die W3Schools Website gehen und dann aktualisieren, dies auch ein RGB-Wert knapp unterhalb der Klammern fügen wir den Wert von rot, grün und dann blau als eine Zahl von Null bis 255, Null ist die am wenigsten intensiv und 255 am intensivsten zu sein. Wenn wir eine rote Farbe wollten, so wie wir hier sehen, sehen wir den ersten Wert von Rot als 255, Null für das Grün und auch Null für das Blau, was Sinn macht. Dann unter der Farbe wird mehr orange. Diese dritte zum Beispiel, wir sehen, dass wir mehr grün hinzufügen können. 255 für das Rot, 128 für das Grün und Null für das Blau. Möglicherweise sehen Sie auch einen vierten Wert, der RGBA genannt wird. Wenn wir auch eine Google-Suche für RGBA tun. Wieder werde ich auf dieser W3Schools Website gehen, für diesen Link hier. Hier können wir RGBA-Wert und die vier Werte in den Klammern zu sehen, dies ist genau wie eine RGB-Farbe, aber mit einem vierten Wert von alpha. Alpha wird verwendet, um die Deckkraft festzulegen und ist ein Wert zwischen Null und Eins. Null Ist vollständig transparent und eins ist eine einfarbige Farbe. Wenn wir zurück zu unserer index.html Seite gehen, ist die Standardtextfarbe, die wir auf der Seite hier sehen, diese dunkelschwarze Farbe. Diese Textfarbe kann auch mit der Eigenschaft color wie folgt geändert werden. Wir kurz nach dem Semikolon, können wir auch die Farbe hinzufügen, die für den Text gilt. Wir werden Änderungen, um weiß zu sein, und auch das Semikolon am Ende. Dies kann auch ein Spaltenname und ein RGBA- oder Hex-Wert sein. Beide werden es so einfach wie weiß halten und dann aktualisieren. Jetzt haben wir diese weiße Farbe oben in der Kopfzeile. Sie werden feststellen, dass diese freien Navigationslinks und das Licht, liegt daran, dass diese Links sind. Wir müssen das A-Element anvisieren, damit dies wirksam wird. Die gleiche Hintergrundfarbe kann auch auf die 42 angewendet werden. Alles, was wir tun müssen, ist, diese Stil-Attribute zu nehmen und dann zu kopieren, und wir scrollen rechts nach unten auf der Seite, wir müssen nur dies innerhalb des öffnenden Fußzeilen-Tags hinzufügen. Wenn wir dann nach unten gehen und auf Refresh drücken, erhalten wir jetzt die gleichen Farben auf die Fußzeile angewendet. Auf diese Weise können wir Inline-Stile hinzufügen. Sie können nützlich sein, um schnell einen Stil zu einem bestimmten Element hinzuzufügen. Aber Sie können wahrscheinlich schon einige Nachteile sehen. Wie auch in diesem frühen Stadium duplizieren wir bereits den gleichen Code, was normalerweise keine gute Idee ist. Auch, aber eine Zeit, in der Stile zu jedem Element auf seiner Seite hinzufügen kann beginnen, wirklich chaotisch aussehen. Ein weiterer großer Nachteil ist, wenn wir uns entscheiden, etwas zu einem späteren Zeitpunkt zu ändern , wie zum Beispiel eine Schriftfarbe, müssen wir dann jedes Textelement in jeder HTML-Seite durchschauen und sie alle einzeln ändern. Glücklicherweise gibt es einige bessere Ansätze, und wir werden uns einen von ihnen im nächsten Video ansehen. 33. Interne Stylesheets (Einführung in CSS): Die nächste Art von Stylesheets, die wir hinzufügen können, sind interne Stylesheets. Dies ist eine Möglichkeit, alle Stile hinzuzufügen, die wir auf eine einzelne Webseite anwenden möchten. Um dies zu tun, können wir die Style-Tags im Kopfbereich hinzufügen. Scrollen wir zum Anfang unserer Indexseite, und dann werden wir gleich nach dem Titel die Style-Tags hinzufügen. Lassen Sie uns das öffnende und schließende Tag innerhalb dieses Kopfabschnitts hinzufügen. Dann, wie wir in den Folien am Anfang des Abschnitts gesehen haben, können wir dann den Namen der Elemente hinzufügen, auf die die Stile angewendet werden sollen. Ich werde mit diesem Header-Bereich beginnen, gefolgt von den öffnenden und schließenden geschweiften Klammern. Innerhalb dieser geschweiften Klammern können wir die gleichen Stile wie zuvor hinzufügen. Also fügen wir den Hintergrund, den Doppelpunkt, und wir hatten den Hex-Code-Wert von 333a40. Wenn wir diese Stile verwenden, müssen wir auch immer noch jede Eigenschaft mit dem Semikolon beenden. Dann haben wir auch die Farbe, die für den Text gilt, der weiß war. Dann, wenn wir nach unten gehen und entfernen Sie die Inline-Stile, die bereits vor zu den Kopfelementen sind , wie Sie das bewegen. Anstatt Codes zu duplizieren, können diese Stile auch auf mehrere Elemente angewendet werden, indem sie durch ein Komma getrennt werden. Trennen Sie sie also durch ein Komma. Wir können auch die Fußzeile innerhalb von dort hinzufügen. Dann müssen wir natürlich nach unten gehen und diese Stile aus dem Fußzeilenbereich entfernen. Rechts unten unten, lassen Sie uns diesen Inline-Style-Abschnitt so entfernen. Dann geben Sie das ein Speichern, und dann, wenn wir zum Browser gehen und dann aktualisieren, können wir sehen, dass die Stile, die hinzugefügt wurden, genau die gleichen sind wie zuvor, aber dieses Mal haben wir sie in einem Abschnitt oben im Kopf. Wir können auch einige Styling zu den Root-HTML-Elementen und auch dem Body-Abschnitt hinzufügen. Zurück in den Style-Tags ganz oben, wieder mit den HTML-Elementen, lassen Sie uns eine Hintergrundfarbe hinzufügen. Fügen Sie den Hex-Code-Wert von f7f7f7 hinzu. Ich habe diese HTML-Elemente oben hinzugefügt, da es sich um ein Wurzelelement handelt. Geben Sie also, dass ein Speichern und dann aktualisieren, und das ist kleine, aber subtile Differenzhintergründe. Jetzt mit dem Körper, den ich direkt nach dem HTML hinzufügen werde. Lassen Sie uns einen Hintergrund von Weiß hinzufügen. Es zeichnet sich durch diesen Hintergrund von HTML aus. Die maximale Breite des Körperabschnitts, werde ich dies auf 1.000 Pixel ändern, und dann wollen wir Marge Null hinzufügen und dann automatisch. Marge ist der Wert des Abstands, den wir außerhalb der Elemente hinzufügen. Der erste Wert von Null stellt keinen Abstand oben und unten dar, und der zweite Wert ist für die linke und rechte. Senden Sie den Wert an auto, mittlere Abstand wird automatisch gleichmäßig auf beide Seiten angewendet, wodurch der Körper effektiv in die Mitte der Seite zentriert wird. Dies ist ein üblicher Trick und wir werden in einem späteren Video mehr über Marging erfahren. Mach dir keine Sorgen, wenn es im Moment keinen Sinn ergibt. Sie können dies wahrscheinlich besser in Aktion sehen, wenn wir speichern und dann aktualisieren. Sie können sofort sehen, dass der Körper jetzt etwas schmaler ist. Sie können diese HTML-Farbe sehen, die wir im Hintergrund hinzugefügt haben, es unterscheidet sich etwas von den Weißen, die dem Körper hinzugefügt wurden. Der Körperabschnitt ist dieser 1.000 Pixel breite Abschnitt , der von diesem linken Rand hier auf die rechte Seite geht. Der Körper ist jetzt auf 1.000 Pixel breit und in der Mitte zentriert , da wir den gleichen Rand auf der linken und rechten Seite hinzugefügt haben. Jeder zusätzliche Platz, der nach dieser 1.000 Pixel Breite verfügbar ist , wird automatisch nach links und rechts angewendet. Dies liegt daran, dass wir dieser Seite index.html ein internes Stylesheet hinzugefügt haben. Interne Stylesheets funktionieren großartig, aber es gibt nur nützlich, um diese eine Seite zu stylen, die Sie bereits haben. Zum Beispiel, wenn wir den Link Kontakt aus dem Menü oben auswählen, das ist dieser dritte hier klicken, und der Stil, in dem wir hinzugefügt haben, wird auf dieser Seite nicht wirksam. Dies ist oft nicht das Verhalten, das wir wollen, weil wir konsistentes Styling für Farben und auch diesen Kopf- und Fußzeilenabschnitt wollen . Auch dies ist etwas, das leicht gelöst werden kann, indem unsere dritte und letzte Art von Stylesheets verwenden, die wir als nächstes behandeln werden. 34. Externe Stylesheets (Einführung in CSS): Wir haben bisher das Hinzufügen von Stilen in Linie und auch die Verwendung von internen Stylesheets behandelt. Der dritte und letzte Typ ist eine externe Stylesheets. Wir sehen im letzten Video, dass eine Einschränkung der Verwendung von internen Stylesheets ist, dass sie nur für eine Webseite gelten. Wir möchten nicht die Kopf- und Fußzeilenstile für jede Seite wiederholen. Sie können sie zu einem externen Stylesheets hinzufügen, anstatt nur auf unsere Indexseite anzuwenden, die Sie unsere Präsenz sehen. Wir können dies tun, indem wir eine neue Datei innerhalb unseres Projektordners erstellen. Ich klicke hier auf dieses Symbol, um die Seitenleiste zu öffnen. Ich werde eine neue Datei erstellen, indem ich hier auf dieses Symbol klicke. Ich werde dies „styles.css“ nennen Die Namen von [unhörbar], aber es muss die Erweiterung „.css“ haben und dann „Enter“ drücken. Ich werde das nur in den Wurzeln unseres Projektordners speichern. Zusammen mit diesem Index und allen anderen HTML-Seiten. Wir können auch einen CSS-Ordner hinzufügen, wenn Sie mehrere Stylesheet-Dateien haben, dann können wir auf die Indexseite und Stile gehen, die Sie bereits haben. Lassen Sie uns also nach unten scrollen und alles von der Kopf- und Fußzeile bis zum HTML. Also schneiden Sie das aus. Aber ich werde diese Style-Tags einfach an Ort und Stelle lassen und diese dann in die Datei styles.css einfügen , die wir gerade erstellt haben, drücken Sie „Speichern“. Wenn wir zum Browser gehen und dann auf „Aktualisieren“ klicken, sehen wir, dass jetzt kein Styling angewendet wird. Dies liegt daran, dass wir diese neue CSS-Datei mit den HTML-Dateien verknüpfen müssen , auf die sie angewendet werden soll. Also gehen wir voran und machen das jetzt. In der index.html können wir die Style-Tags entfernen, und an Ort und Stelle werde ich die Link-Elemente hinzufügen. Der Link hat kein schließendes Tag und wir können zwei Attribute hinzufügen. Die erste ist rel, und wir fügen gleiche Stylesheets hinzu. Rel equals Stylesheet beschreibt die Beziehung der verknüpften Dokumente zum Chromo. Wir verknüpfen die Stylesheets. Dann das href-Attribut, mit dem Sie vertraut sein sollten, wenn wir uns Links angesehen haben. Dies ist der Pfad zu der CSS-Datei, die Sie gerade erstellt haben. Misses im selben Verzeichnis ist die Indexseite. So können wir einfach den Namen von styles.css hinzufügen. Wenn wir in einer CSS-Datei hätten, müssten wir CSS als Dateipfad vor der Datei hinzufügen. Also lasst uns das einfach entfernen und uns sparen. Aktualisieren sollte nun unsere Stile wieder auf die Seite einführen. Wir sollten immer noch sehen, wenn wir über Seiten wie Kontakt gehen, dass keiner dieser Stile noch gelten. Wir können dies ändern, indem wir auf alle Seiten verlinken, die den gleichen Link hier verwenden. Also werde ich das einfach kopieren und dann der contact.html hinzufügen. Wird es auch ganz oben sein? Gleich nach dem Titel? Dann das gleiche für das Produktdetail. Ganz oben unter dem Titel. Fügen Sie das hier ein. Nun, wenn wir zu [unhörbar] über HTML-Seiten im Browser gehen. So haben wir unsere Homepage. Lassen Sie uns versuchen, Seite zu kontaktieren und unsere Stile gelten immer noch dort. Sieht ein wenig kleiner aus, wenn wir gerade hineinzoomen und mit dem Browser dort. So Homepage funktioniert alle die Kontaktseite, und wir werden immer noch die Stile für die Kopfzeile und die Fußzeile haben. Lassen Sie uns schließlich auf die gesamte Seite zurückgehen und die Produktdaten auswählen. Unsere Stile wurden auch auf diese Seite angewendet. Auf diese Weise können wir externe Stylesheets zu unseren Projekten hinzufügen. Als nächstes schauen wir uns in Google-Schriftarten an. 35. Schriftarten (Einführung in CSS): Jetzt haben wir behandelt, wie Sie Stylesheets auf verschiedene Arten anwenden können. Gehen wir nun zur Verwendung von Schriftarten über. Das Hinzufügen von Schriftarten zu unseren Websites ist wirklich wichtig, um das Aussehen und Gefühl zu definieren. Wenn wir hier einen Blick werfen, bin ich über auf der W3Schools Website in einem Abschnitt namens CSS-Schriftarten. Wenn wir hier schauen, gibt es zwei Hauptschriftarten. Einer namens Serif und einer namens Sans-Serif. Die SANS-Seriifen-Schriftarten auf der linken Seite sind viel einfacher und haben gerade quadratische Kanten. Serifen-Schriftarten hingegen haben diese zusätzlichen Details am Rand, die Sie hier in rot hervorgehoben sehen können. Ein wenig weiter unten können wir sehen, dass es zwei Arten von Schriftfamilien gibt. Auf der linken Seite der Tabelle sehen wir, wir haben Serif, wir haben SANS-Serif und auch Monospace. Dies sind alle Beispiele für eine generische Schriftfamilie. Jede dieser generischen Gruppen hat auch viele Schriftfamilien. Hier sehen wir an der Spitze haben wir Times New Roman und Georgia und das sind beide Arten der Serifen-Familie. Dann unten haben wir Arial und Verdana, die Schriftfamilien mit einer Art von SANS-Serif sind. Im Allgemeinen möchten wir sowohl die Schriftfamilie zu unserem CSS zusammen mit einer generischen Familie wie SANS-Serif hinzufügen , die als Fallback fungiert , wenn unsere erste Wahl nicht vom Browser unterstützt wird. Um Schriftarten zu vermeiden, die häufig nicht unterstützt werden, können wir sogenannte Web Safe Fonts verwenden. Wir gehen einfach zu Google und machen eine schnelle Suche nach diesen websicheren Schriftarten. Jetzt gehen wir auf die Website der W3Schools gerade hier. Wir haben die Serifen-Versionen und Scrollen weiter nach unten haben wir auch die SANS-Serifen-Schriften. Dies hat eine Liste gängiger Schriftkombinationen, die wild gefleckt sind. Die meisten haben einen Stapel von drei Schriftarten, wie Sie hier sehen können. Wir haben unsere erste Wahl als Beispiel, wir haben Arial. Unsere zweite Wahl von Helvetica und dies wird verwendet, wenn der Arial nicht unterstützt wird. Dann haben wir am Ende eine generische Schriftfamilie wie Sans oder SANS-Serif. Dies wird verwendet, wenn keiner der anderen verfügbar oder unterstützt wird. Ähnliche Schriftfamiliennamen hier mit Leerzeichen dazwischen sind in Anführungszeichen umgeben, genau wie Sie hier sehen können. Dies wird empfohlen, aber nicht erforderlich. Ich gehe weiter und kopiere eine dieser Schriftarten, Stapel. Sagen wir Comic Sans. Lassen Sie uns diesen Abschnitt der Website kopieren. Dann gehen wir zurück zu unserer Datei styles.css und wir können eine Schriftfamilie zu unserem Projekt hinzufügen. Schließen wir die Seitenleiste und öffnen Sie die styles.css. Wir können dies dem Körper hinzufügen, da der gesamte HTML-Inhalt innerhalb unseres Textkörpers ist. Gehen wir zum Körper und fügen Sie unsere Schriftfamilie und dann könnten wir unsere drei Werte einfügen, die wir gerade zuvor mit einem Semikolon am Ende kopiert haben. Speichern Sie das und dann zurück zum Projekt im Browser und aktualisieren Sie dann und Sie können sehen, alle Schriftart hat sich geändert, um diese Comic-Version zu sein. Eine andere Möglichkeit, Schriftarten einzubeziehen, besteht darin, eine Schriftbibliothek wie Google-Schriftarten einzuschließen. Lassen Sie uns eine Suche nach Google-Schriftarten machen und was wir brauchen, ist fonts.google.com. Lass uns das aufmachen. Wir können sofort sehen, dass es viele verschiedene Schriftarten zur Auswahl gibt. Wir können sogar auf der rechten Seite nach den verschiedenen Typen wie Serif oder SANS-Serif filtern . Sie können sogar eine dieser Schriftarten auf dem Home-Bildschirm durchschauen und auswählen, wenn Sie es bevorzugen. Ich möchte eine Suche machen und diejenige auswählen, die Barlow heißt. Also unter der Suchleiste und das ist diejenige, die ich auf der linken Seite verwenden werde. Wenn wir dies hinzufügen möchten, klicken Sie einfach auf das Plus-Symbol hier. Dann können wir nach unten gehen und die ausgewählte Familie erweitern. Auf diese Weise erhalten wir die Anweisungen, wie wir dies zu unseren Projekten hinzufügen können. Zunächst einmal haben wir an der Spitze einen Link, der genau wie der Link ist, den wir auf unseren eigenen Stylesheets verwendet, aber dieses Mal Links zu den Stylesheets Google bereitgestellt hat. Lassen Sie uns diesen Link kopieren, gehen Sie zum Projekt und im Index oder HTML, können wir dies direkt unter unserem Titel hinzufügen. Dieser Link muss auch zu allen HTML-Seiten hinzugefügt werden, also fügen wir ihn dem Produktdetail direkt unter dem Titel und auch der Kontaktseite hinzu. Stellen Sie sicher, dass wir sie retten. Die Platzierung dieser Datei ist ebenfalls wichtig. Wir sollten unsere eigene benutzerdefinierte CSS-Datei zuletzt haben. Dadurch wird sichergestellt, dass alle Änderungen, die Sie als benutzerdefinierter Stil vornehmen, zuletzt geladen werden und alle Standardwerte außer Kraft setzen. Wir werden das später aber genauer betrachten, aber vorerst zurück zu Google-Fonts. Als nächstes müssen wir nach unten gehen und die Schriftfamilie kopieren. Kopieren Sie also diese Zeile des CSS und dann zurück in unsere styles.css und anstatt einen Abschnitt, den wir zuvor hinzugefügt haben, können wir in unsere neue Barlow-Version einfügen und klicken Sie auf „Speichern“ zurück zum Projekt und dann aktualisieren. Nun sind alle Schriftarten auf der Seite wirksam, und wir sollten sehen, dass sie auf allen unseren verschiedenen Seiten konsistent sind. Alle diese Formulare sehen sichtbar anders aus, wir können bestätigen, ob es funktioniert, indem wir zu den Entwickler-Tools gehen. rechten Maustaste auf „Inspect“ und dann über der rechten Seite unter dem Körper, können wir Barlow sehen, die Sie gewählt haben. Wenn wir diese Option deaktivieren, können wir eine Änderung mit der Schriftfamilie auf dem Bildschirm sehen, wie sie auf den Standardwert zurückgeht. Wir können deutlich sehen, dass diese Google Fonts jetzt funktionieren. Ich werde Sie jetzt im nächsten Video sehen, wir werden einen Blick auf Klassen und IDs werfen. 36. Kurse und IDs (Einführung in CSS): Klassen und IDs sind etwas, das die ganze Zeit beim Erstellen von Websites verwendet wird. Sie sind eine Möglichkeit, bestimmte Elemente auf unserer Seite auszuwählen oder zu haken , damit wir unser CSS darauf anwenden können. Wir werden sie auch später im Kurs verwenden, um bei der Arbeit mit JavaScript zunächst mit ID zu beginnen. Wir können ein ID-Attribut zu jedem Element hinzufügen, dann Ziel ist Element mit CSS. Wenn wir auf die Seite contact.html gehen, haben wir bereits IDs in diesem Abschnitt verwendet, also einen Blick nach dem Namen oben und wenn Sie nach rechts scrollen, haben wir hier einen ID-Namen. Wir hatten auch eine ID von E-Mail und Nachricht. Eine wichtige Sache, die mit IDs zu beachten ist, ist, dass sie eindeutig sein müssen. Wir sollten nur einen ID-Namen auf jeder Seite verwenden. Wir machen dann diese ID in der CSS-Datei mit einem Hash-Präfix, um diesem Namen etwas Styling hinzuzufügen, geht über die style.css, und dann hier unten, mit einem Hash-Präfix, könnten wir den Namen anvisieren. Dann könnten wir Dinge tun, wie das Hinzufügen einer Hintergrundfarbe. Lassen Sie uns den Hintergrund ändern, um rot zu sein, und geben Sie uns dann speichern. Über zu unserem Web-Browser, und wir müssen auf die Kontakt-uns Seite gehen. Scrollen Sie nach unten und jetzt haben wir einen roten Hintergrund für diesen Namensabschnitt. Es ist wichtig zu wissen, dass die IDs nicht mit einer Nummer zwei beginnen dürfen. Wenn wir zum CSS gehen und dann eine Zahl wie diese hinzufügen, dreht der Texteditor es rot, um ein Problem zu signalisieren. Lassen Sie uns sparen. Dies ist eine ID, die wir verwenden, um ein einzelnes Element auf einer Seite auszuwählen, aber was, wenn wir möchten, dass die gleichen Stile auf mehrere Bereiche wie unsere Produkte angewendet werden. In diesem Fall können wir eine Klasse verwenden, indem wir den gleichen Klassennamen zu allen unseren produktiven Tags ermöglicht es uns, einige Stile zu schreiben, die für alle gelten. Wenn wir auf die index.html gehen, und dann wird es unser erstes Produkt finden, das der Controller ist. Für das umgebende div, das sich hier direkt über dem Link befindet, können wir ein Klassenattribut des Produkts hinzufügen. Da wir dies mehr als einmal verwenden können, lassen Sie uns dies kopieren und es zu allen sechs Produkten hinzufügen. Die zweite, die dritte, die vierte und wenn Sie mehr als sechs haben, fügen Sie sie bei jedem einzelnen, und das sind alles sechs, so gibt uns sparen. Wir haben auch ein Produkt innerhalb der Produktdetailseite zwei. Wir können dies zu unserem Produkt im Inneren von dort hinzufügen. Scrollen Sie nach unten zum Hauptbereich und wieder innerhalb des Öffnungsdiv für das Produkt. Dadurch wird sichergestellt, dass die gleichen Stile, die wir im CSS anwenden, auch für dieses Produkt gelten. Dieses Mal anstelle des Hash-Präfix und wenn wir zum CSS gehen, verwenden wir einen Punkt, um anzuzeigen, dass wir auf eine Klasse ausgerichtet sind. Geben Sie dann den Namen der Produkte ein, und jetzt können wir einige Stile innerhalb dieser geschweiften Klammern hinzufügen. Diese Klasse, zusammen mit der ID, die wir zuvor verwendet haben, und auch diese Elementnamen knapp darüber sind alle Selektoren genannt. Sie auch kleine Fortgeschrittene mögen diese beiden, und wir werden einen Blick auf diese später im Kurs. Lassen Sie uns voran und fügen Sie unseren Produktivitätsrahmen ein Pixel breit, eine durchgezogene Linie und die Farbe von Grau hinzu. Dann können wir die Breite jedes Produkts auf 200 Pixel breit, das Semikolon und sehen, wie dies auf der Indexseite aussieht. Gibt unsere Nachladen und gehen Sie nach unten zu Büroprodukten, können wir die Grenze sehen, wenn wir hier nach unten schauen und auch dies sieht etwa 200 Pixel breit. Dieses Bild oben ist jedoch zu groß, um in diesen Container zu passen. Die anderen wenigen Möglichkeiten, wie Sie dies tun können, könnten wir die Überlaufeigenschaft so einstellen, dass sie ausgeblendet wird , und das speichern und dann neu laden. Jetzt können wir sehen, dass das Bild innerhalb des 200 Pixel-Containers ist. Dies ist nicht ideal, weil dies den Rest des Bildes verbirgt , der nicht zu toll aussieht. Eine bessere Lösung dafür wird sein, die maximale Breite Eigenschaft anstelle des Überlaufs zu setzen , lassen Sie uns diesen Überlauf entfernen, und dann unterhalb dieser können wir den Bildselektor anvisieren. Verwenden Sie dann die max-width CSS-Eigenschaft, antworten Sie, dies wäre 100 Prozent, geben Sie das Speichern und laden Sie es dann neu. Dadurch wird sichergestellt, dass sich das Bild nicht weiter als der umgebende Container erstreckt. Das sieht viel besser aus. Das ist mehr wie das, was wir wollen. Das Produkt ist jedoch immer noch übereinander gestapelt, da wir bereits erwähnt haben, div Elemente der Blockebene und beginnen auf einer neuen Zeile. Aber das ist okay für jetzt und als nächstes gehen wir zu Rand und Polsterung. 37. Ränder und Auffüllungen (Einführung in CSS): Marge und Padding sind beide wirklich wichtige CSS-Eigenschaften zu verstehen. Beide sind im Grunde eine Möglichkeit, Raum zu schaffen. Wenn wir uns dieses Diagramm hier ansehen, stellen Sie sich vor, dass dies eines unserer Produkte war. Wir werden wahrscheinlich wollen, dass es in etwa so aussieht, mit etwas Platz um ihn herum, ungültig, obwohl dies standardmäßig angezeigt wird. Platziert in der oberen Ecke ohne Abstand. Wir sehen dies in Aktion in unserem aktuellen Projekt, wo der Produktstandard oben links neben dem verfügbaren Platz ist. Um dies zu beheben, können wir Rand auf die Außenseite eines Elements anwenden, um einige Abstände zu erstellen. Die Marge kann auf jeder Seite gleich angewendet werden, oder Sie können auf jeder Seite einen anderen Betrag hinzufügen, falls erforderlich. Dasselbe passiert, wenn wir Elemente innerhalb dieser produktiven hinzufügen. Das Element, z. B. dieses Bild oder sogar ein beliebiger Text, wird in der oberen Ecke platziert. Genau wie zuvor möchten wir vielleicht nicht, dass das Bild an die obere Ecke gebunden wird. Für diese Situation haben wir das, was man padding nennt. Padding fügt auch Abstand, aber diesmal, innerhalb der Elemente. Rand befindet sich außerhalb der Elemente und die Polsterung wird auf die Innenseite der Elemente angewendet. Der dunklere grüne Rand hebt hervor, was die Polsterung tatsächlich tut. Es fungiert als Kissen und hält die Dinge von den Seiten fern. Wir können dies auch auf allen Seiten gleich einstellen oder unterschiedliche Werte auf jeder Seite haben. Wie wir hier sehen, können sowohl Rand als auch Polsterung für jede Seite einzeln festgelegt werden , indem oben, rechts, unten und links Werte gesetzt werden. Glücklicherweise gibt es auch einige Kurzfassungen. einen Blick auf diese beiden Beispiele auf der linken Seite, können wir Marge oder Padding mit vier Werten setzen. Diese vier Werte sind im Uhrzeigersinn, beginnend an der Spitze. Also oben, rechts, unten und dann links. Hier haben wir sowohl den oberen als auch den unteren Wert auf zehn Pixel gesetzt, dann die linken und rechten Werte, die gleichen zwei sind fünf Pixel. Für diesen Fall können wir dies auch noch weiter zeigen. Wie wir auf der rechten Seite sehen. Der erste Wert befindet sich oben und unten, der zweite ist links und rechts. Das haben wir bereits in unserem Projekt gesehen, als wir unsere Website mit Margin Zero auto zentriert haben. Null weist die Browser an, keinen Rand am oberen und unteren Rand des Body-Abschnitts hinzuzufügen. Dann kann der zusätzliche Platz links und rechts gleichmäßig aufgeteilt werden, so dass der Körperteil auf der Seite zentriert bleibt. Genug von dieser Theorie, lassen Sie uns das in unser Projekt gehen. Beginnend mit dem Rand. Wenn wir auf die styles.css und bis zum Produkt gehen, können wir einige Marge zu diesem Produktbereich von fünf Pixeln hinzufügen. Da wir nur einen Mehrwert hinzugefügt haben, gilt dies für alle Seiten des Produkts. Lassen Sie uns das mit einem Nachladen sehen. Jetzt können wir fünf Pixel Raum sehen und dies ist um alle Seiten des Produkts erschienen. Dann gehen Sie weiter und fügen Sie auch etwas Padding hinzu, auch fünf Pixel, und aktualisieren Sie dann. Jetzt haben wir ein Fünf-Pixel-Kissen auf der Innenseite des div. Außerdem ist eine weitere wichtige Sache zu beachten , dass die oft verwendeten Standardwerte von Marge und Padding eines Browsers sind. Dies bedeutet, dass es manchmal die Werte auf Null zurücksetzen möchten und ungeordnete Liste ist eine gemeinsame, was oft gilt. Lassen Sie uns zum CSS gehen, und wir können diese Werte zurücksetzen. Wenn wir direkt unter die Kopf- und Fußzeile gehen, lassen Sie uns am UL Tag. Dann könnten wir die Marge wieder auf Null setzen. Wenn wir beim Aktualisieren darauf achten, sehen wir, dass alles nach oben verschoben wird, da ein Standardrand entfernt wurde. Wir können auch das gleiche tun, um alle Standard-Polsterungen zu entfernen. Wieder zurück zur ungeordneten Liste. Dann können wir die Polsterung wieder auf Null zurücksetzen. Wenn wir beim Aktualisieren ein genaues Auge auf mich haben, sehen wir, dass alle ungeordneten Listen jetzt auf die linke Seite verschoben werden. Dies ist etwas zu beachten, wenn Sie sich fragen, warum etwas etwas anders aussieht als erwartet, weil der Browser einige Standardwerte hinzufügt. Um die Dinge noch verwirrender zu machen, haben verschiedene Browser oft auch unterschiedliche Werte. Allerdings ein paar Ressourcen, um uns mit Browser-Standardeinstellungen zu helfen. Wenn wir gehen über Google und dann eine Suche nach CSS-Resets. Der obere Link, den ich will, ist Meyerweb. Klicken Sie auf diese. Dies ist ein Stylesheets. Wenn wir nach unten scrollen, können wir den Code nur hier sehen. Wir können dies innerhalb unseres Projekts verwenden, um alle Standard-Styling, die von Browsern bereitgestellt werden, effektiv zu entfernen. Dieses Ding gibt uns eine leere Leinwand, mit der wir anfangen können. Alternativ können wir eine andere CSS-Datei namens Normalisieren verwenden. Lassen Sie uns erneut eine Google-Suche nach CSS Normalisieren. Sein oberster Link ist das, was ich brauche. Klicken Sie auf diese. Normalisieren Sie die Arbeit etwas anders zum Zurücksetzen. Anstatt alle Browser-Standardeinstellungen zu entfernen, stellen Sie Stile bereit, um unsere Websites konsistenter in allen angeordneten Browsern anzuzeigen. Sie entscheiden sich aber gerade jetzt, und etwas, das Sie vielleicht nützlich finden, um dies in unsere Projekte einzubeziehen. Alles, was Sie tun müssen, ist, die Datei herunterzuladen und zu unseren Projekten hinzuzufügen, genau wie wir es mit unserem eigenen benutzerdefinierten Stylesheet getan haben. Dies ist es jetzt für Marge und Padding. Als nächstes werden wir in die Verwendung verschiedener Anzeigetypen eintauchen. 38. Block, Inline und Inline-Block (Einführung in CSS): Wir haben bereits kurz die meisten Elemente diskutiert die entweder Inline-Elemente oder Block-Level-Elemente fallen. Wir sehen auf dem Bildschirm hier einige Inline-Bildelemente. Dies hat den Effekt, dass jedes Element auf der gleichen Linie liegt, wenn es passt. Es gibt jedoch eine Sache, die man beachten muss, wenn man Inline-Elemente verwendet, wir können Rand und Auffüllung nach links und rechts hinzufügen, wie wir hier sehen, aber wir können es nicht oben und unten hinzufügen. Dies liegt daran, dass Inhalte, die mit Inline-Elementen hinzugefügt werden, über die Seite und dann in die nächste Zeile fließen sollen. Das Hinzufügen einer zusätzlichen Höhe würde diesen Fluss stören. Außerdem sind wir in der Lage, die Breite und Höhe zu setzen. Block-Level-Elemente hingegen beginnen mit einer neuen Zeile und nehmen die volle verfügbare Breite ein, z. B. ein div oder Text, wenn Sie das p -Element verwenden. Sie ermöglichen es uns auch, jeden Rand und Padding ohne Einschränkungen zu setzen, im Gegensatz zu dem, was wir gerade mit Inline-Elementen gesehen haben. Es gibt jedoch eine Möglichkeit, dieses Inline-Verhalten zu haben, während auch den Rand und das Auffüllen festgelegt werden können , und dies besteht darin, das Element als Inline-Block zu setzen. Inline-Block wird häufig in Navigationen verwendet. Standardmäßig werden Elemente oder Elemente auf Blockebene aufgeführt. Jemand wird eine Liste erstellen, die übereinander stapeln wird. Wir sehen in der Regel nav Links als Inline oder Inline-Block, wie wir hier sehen. Inline-Block ermöglicht es, Elemente über die Seite zu fließen, aber es gibt uns immer noch die Flexibilität, die Padding und Margin Werte zu steuern. Wir können keine Elemente Standard-Anzeigetyp ändern, indem Sie die CSS-Anzeigeeigenschaft verwenden, um es zu überschreiben. Gehen wir und gehen Sie jetzt los. Oben in der CSS beginnend mit dem li-Element. Blase einfach diese ungeordnete Liste innerhalb des li und setze dann den Anzeigetyp auf inline. Geben Sie, dass ein Speichern und zurück zu unserem Projekt, aktualisieren, und jetzt erscheinen unsere Links inline über die Seite. Dies funktioniert wie vorgesehen, die Header-Listenelemente sind inline, setzen Ziel in alle li-Elemente wie folgt ein, schließen Sie auch diese Sidebar-Listenelemente ein. Wenn Sie nur diese Header-Listenelemente ausrichten möchten, können wir spezifischer sein. Wenn wir zum CSS gehen, anstatt nur auf das Li zu zielen, können wir Header hinzufügen, li, dass ein Speichern geben, und in den Browser und aktualisieren. Jetzt können wir sehen, dass dies nur irgendwelche Listenelemente auswählt, die sich innerhalb der Kopfzeile befinden, die Sidebar sind unberührt. Wir können mit diesem Header-Abschnitt auch noch weiter gehen, indem wir den Website-Titel und auch diese nav Links inline zu machen. In der Tat können wir diese Inline-Block machen, so dass wir immer noch die Höhe kontrollieren können. Wenn Sie diese als Inline-Block festlegen, wird sichergestellt, dass dieser Titel auf der linken Seite angezeigt wird. Dann auf der rechten Seite erhalten wir die Navigationslinks, die im Navigationselement umgeben sind, also zurück zum CSS. Wir können diesen Website-Titel anvisieren. Wir haben Header, h1, dann durch Komma getrennt. Wir können auch das nav Element anvisieren. Stellen Sie die Anzeige ein, diesmal als Inline-Block, und aktualisieren Sie sie dann. Jetzt habe ich die Navigation und den Seitentitel in der Kopfzeile aufgereiht. Inline-Block ist auch eine gute Möglichkeit, um die Produkte auch auszurichten. Lassen Sie uns dies hier in das Produktdiv gehen. Lassen Sie uns den Anzeigetyp erneut in Inline-Block ändern, auf den Browser und innerhalb der Indexseite scrollen wir nach unten. Jetzt haben wir unsere Produkte auf Seite 2 aufgereiht. Diese Inline-Block-Eigenschaft kann sogar verwendet werden, um die Sidebar, die derzeit hier ist, und auch diese Produkte nebeneinander zu haben. Denken Sie daran, dass die Seitenleiste in den beiseite Elementen war und all diese Produkte im Hauptbereich enthalten waren. Lassen Sie uns zuerst zum CSS gehen und wir können die Breite des Haupt- und des beiseite Abschnitts einstellen . Ich werde dies direkt unter dem Header, h1 und nav Abschnitt hinzufügen . Beginnen wir zuerst mit dem Hauptbereich und legen Sie die Breite auf 680 Pixel fest. Dann können wir sicherstellen, dass die Seitenleiste auch über die Zeile passt indem wir die beiseite Breite auf 270 Pixel setzen. Ich habe diese beiden Werte hier ausgewählt. Kombiniert sind diese beide kleiner als die 1.000 Pixel Körperbreite, die wir zuvor hatten. also die Beiseite und Haupt auf diese Größen setzen, stellen Sie sicher, dass beide über die Seite passen und auch etwas Rand und Polsterung erlauben. Mal sehen, wie das aussieht, neu laden und wir können jetzt sehen, die Sidebar ist ein wenig breiter. Wenn wir hier einen Blick auf die Breite dieser Linie werfen und auch der Produktbereich ist hier auf diesen Teil beschränkt. Nun gehen wir über und setzen den Anzeigetyp auf Inline-Block. Zuerst der Haupt-, Anzeigetyp des Inline-Blocks und dann auch für die Sidebar. Dann hoffentlich, wenn wir das speichern und jetzt übergehen, können wir dies jetzt Seite an Seite sehen , da der beiseite und der Hauptabschnitt beide Inline-Block sind. Die Dinge sehen jetzt besser aus, aber die Sidebar-Elemente hier unten sind ganz unten. Um dies zu beheben, wenn Sie mit Inline-Elementen oder sogar Inline-Block arbeiten , der viel wie Inline wirkt, haben wir Zugriff auf eine CSS-Eigenschaft namens vertical align. Wenn wir zur Seitenleiste gehen, direkt unter dem Display, können wir auch die vertikale Ausrichtung einstellen und den Text an der Spitze platzieren. Hoffentlich sollte es jetzt unseren Text an den oberen Rand der Seitenleiste schieben, was es tut. Diese vertikale Ausrichtungseigenschaft kann verwendet werden, um Inline-Elemente oder Elemente innerhalb von Tabellenzellen auszurichten . Wir haben in den Folien bereits erwähnt, dass wir bei der Verwendung von Inline-Elementen nicht links und rechts Rand und Padding hinzufügen können, aber wir können es nach oben und unten senden. Dies können Sie mit unseren Produktlinks von Mehr Info und In den Einkaufswagen sehen. Lassen Sie uns voran und fügen Sie etwas Polsterung hinzu, um zu sehen, was passiert. Zuerst müssen wir ihnen eine Klasse auf der Indexseite geben. Ich werde diesem eine Klasse von Knopf geben. Lassen Sie uns zuerst zum Top-Produkt gehen und nach diesen beiden Links suchen. Dann können wir voran gehen und fügen Sie einen Klassennamen der Schaltfläche, so Klasse gleich Taste. Dann müssen wir dies zu all unserem Produkt hinzufügen, also werde ich dies kopieren und es auch zum zweiten Link hinzufügen. Dann gehen Sie zu unserem zweiten Produkt und wir können es zu all diesen hinzufügen , um dieses Styling konsistent zu halten. Das sind unsere vier Produkte. Die vier Produkte und das letzte auch. Wir können diese Schaltflächenklasse über im Stylesheet verwenden. Unten unten verwenden die Anzahl der Klassen einen Punkt, setzen Sie den Namen einer Schaltfläche ein, einige Polsterung von 10 Pixeln der Schriftart, speichern Sie das, und jetzt auf die Indexseite und aktualisieren. Wir können sehen, dass die Polsterung etwas Platz zwischen den Tasten hinzugefügt hat, aber es gibt keine zusätzliche Höhe. Denken Sie daran, dass wir nur einen Wert von 10 Pixeln hinzugefügt haben. Normalerweise würde dies für alle vier Seiten gelten, aber wir sehen dies nur links und rechts. Dies liegt daran, wie wir bereits wissen, dass wir die Höhe nicht mit Rand und Polsterung auf Inline-Elementen beeinflussen können, aber wir können entsperren und inline-Block. Wenn wir also zum CSS gehen und den Anzeigetyp der Schaltfläche in Inline-Block ändern , können wir sehen, welche Auswirkungen dies im Browser hat. Sobald wir aktualisieren, sehen wir jetzt einige zusätzliche Höhe zu jeder dieser Schaltflächen hinzugefügt. Hier haben wir uns die Anzeigeeigenschaft angesehen. Wie Sie sehen können, ist es wirklich wichtig, wenn Sie unsere Website auslegen. Es mag ein wenig schwierig erscheinen, zuerst zu verstehen, aber Sie können mit diesem Beispiel sehen, wie effektiv es ist, selbst wenn Sie nur ein paar Zeilen Code in unser CSS hinzufügen. 39. Das Box-Modell (Einführung in CSS): In diesem Video werden wir uns das CSS Box Model ansehen. Das Box-Modell ist eines der Dinge, bei denen man es einmal weiß, es ist wirklich leicht zu verstehen. Aber wenn Sie nicht wissen, was es ist, kann es Probleme verursachen, wenn Sie versuchen, Elemente auf eine Seite anzupassen. Zum Beispiel, wenn wir zu unserem CSS gehen und wir unsere Produktbreite innerhalb dieser Produktklasse hier ändern , sagen wir 210 Pixel. Wenn wir das speichern und den Browser neu laden, wollen wir nun diese Produkte in unsere Reihe passen. Jetzt gehen wir zurück zu unserem CSS und untersuchen. Wenn wir unser Produkt betrachten, haben wir dies auf 210 Pixel breit eingestellt. Wenn wir einen Blick oben werfen, setzen wir diesen Hauptabschnitt auf 608 Pixel. Unsere drei Produkte unten erreichen insgesamt 630 Pixel. Bisher sind wir immer noch innerhalb der 608 Pixel Wrapper für den Hauptbereich, aber dann denken Sie vielleicht richtig, dass wir etwas Platz um die Produkte haben. Wir haben fünf Pixel Rand zu allen Seiten hinzugefügt. Diese zusätzlichen fünf Pixel pro Seite würden dann bedeuten, dass jedes Produkt je 220 Pixel und insgesamt 660. Wieder, immer noch innerhalb dieser 680 Pixel, Hauptabschnitt. Polsterung befindet sich innerhalb der Elemente, so dass Sie denken, dass dies irrelevant ist. Wir haben fünf Pixel des Auffüllens auch hier unten hinzugefügt. Nun, tatsächlich ist es auch enthalten. Lassen Sie uns zu den Browser-Entwickler-Tools gehen und sehen, wie das aussieht. Alle Browser haben eine eigene Version von Entwicklertools. Wenn Sie Chrome nicht verwenden, können Sie auf die Entwicklertools zugreifen, indem Sie im Menü nachschauen. Ich würde jedoch empfehlen, Chrome für diesen Fall zu verwenden. Alles, was wir tun müssen, ist mit der rechten Maustaste zu klicken und dann nach unten zu inspizieren. Sobald es erscheint, können wir auf das Inspektor-Symbol in der oberen linken Ecke klicken. Klicken Sie auf diesen Pfeil dort und dann können wir den Mauszeiger über unsere Produkte und klicken Sie dann auf das div mit der Klasse der Produkte. Dies ermöglicht es uns, den HTML-Code auf der linken Seite zu sehen. Hier können wir sehen, dass wir unsere erste div Klasse von Produkten und auch das CSS hervorgehoben haben , das dieses Produkt auf der rechten Seite anwendet. Unser Produkt div wird hier den Rahmen, die Breite, Rand, den Abstand und den Anzeigetyp des Inline-Blocks setzen. Wenn wir bis zum Ende des CSS-Abschnitts scrollen, können wir eine Box sehen. Dieses Bild hier unten stellt das Box-Modell dar. In der Mitte haben wir unsere Elemente, die wir jetzt auf 210 Pixel Breite setzen, wie wir hier sehen. Dann oben darauf haben wir fünf Pixel Polsterung um jede Seite. Wir haben auch einen Grenzwert von einem Pixel und dann auf der Außenseite haben wir fünf Pixel Rand. Es ist wichtig zu verstehen, dass diese zusätzlichen Auffüll-, Rand- und Randwerte zu diesen Elementen hinzugefügt werden, wodurch es insgesamt größer wird. Wir legen die Breite für das Produkt auf 210 Pixel breit fest. Aber in Wirklichkeit nimmt jedes Produkt eine Breite von 232 Pixeln ein, sobald wir all diese Extras hinzufügen. Deshalb passen alle drei unserer Produkte im Browser nicht in die gleiche Linie. Es gibt jedoch eine Möglichkeit, es zu ändern. Wir können eine CSS-Eigenschaft von box-sizing verwenden. Wenn wir zurück zu den Produkten innerhalb des CSS gehen, können wir die box-sizing Eigenschaft hinzufügen und dies auf border-box setzen. Setzen Sie eine Spalte am Ende. Wenn Sie dies auf border-box setzen, wird sicherstellen, dass die Breite, die wir deklarieren, eine Gesamtbreite ist. Obwohl wir Basis Demo auf der Breite haben, gilt all dies auch bei der Arbeit mit der Höhe. Das ist eine Sache, die man beachten muss. Jetzt mit der Box-Dimensionierung auf Border-Box, wird es zum Browser gehen und dann neu laden und einfach die Entwickler-Tools verkleinern. Wir sehen jetzt, dass wir drei Produkte in jeder Reihe haben. Wenn wir zurück zu den Entwicklertools gehen, müssen wir tatsächlich zuerst aktualisieren und dann wieder nach oben ziehen. Noch in unserem ersten Produkt hier, wenn wir jetzt nach unten zu unserem Box-Modell scrollen, können wir sofort sehen, dass das Element in der Mitte jetzt einen Wert von 198 für diese Elementbreite hat. Dies wurde reduziert, um die Polsterung und auch die Rahmenwerte zu berücksichtigen, dann gleich 210 Pixel. Dann haben wir noch diesen Fünf-Pixel-Rand, der draußen umgibt, genau wie wir es ursprünglich getan haben. So funktioniert das Box-Modell. Wir müssen sogar jeden zusätzlichen Wert wie Rahmen, Padding und Marge berücksichtigen, oder wir können die CSS-Eigenschaft von border-box anwenden. 40. Auflistungsstile (Einführung in CSS): wir uns unser Projekt bisher ansehen, gibt es einige Fragen im Zusammenhang mit den Listenpositionen, die wir behandeln müssen. Diese Liste von auf der linken Seite in der Seitenleiste. Es hat immer noch die Kugeln auf der linken Seite. Wir können auch einige weitere Abstände zu diesen Elementen betrachten. Lassen Sie uns zuerst in der CSS-Datei überarbeiten. Wir können Dinge tun, wie das Ändern dieses Aufzählungszeichen zu einem Kreis mit der List-Style-Eigenschaft. Wir wenden dies auf unseren Li-Artikel an. Scrollen wir nach oben zur ungeordneten Liste und dann können wir versuchen, das Li zu bekommen. Dann, nachdem wir die Liste Stil Eigenschaft hinzufügen, und dann können wir den Wert ändern Kreis sein. Geben Sie das ein Speichern, und laden Sie dann den Browser neu, und jetzt sind diese schwarzen Aufzählungszeichen auf der linken Seite jetzt hohle Kreise. Derzeit befindet sich der Kreis außerhalb des Stockwerks des Inhalts und dies ist eine Standardeinstellung. Wenn wir den Browser ein wenig breiter machen, können wir sehen, dass dies die Kante des Körperabschnitts und die Kreise außerhalb davon ist. Dies kann geändert werden, um innerhalb des Dokuments zu sein, indem der interne Wert hinzugefügt wird. Kurz nach dem Kreis können wir innen hinzufügen, und dann zum Browser gehen. Dies wird nun über unsere Listenelemente verschoben, um nun einen Kreis innerhalb des Körpers einzuschließen. Es gibt auch die quadratische Option. Lassen Sie uns Kreis ändern, um quadratisch zu sein. Dies gibt ein Quadrat auf der linken Seite jedes Listenelements. Es gibt auch viele mehr, aber viele von ihnen und nicht oft verwendet. Sie können diese natürlich mit der schnellen Google-Suche überprüfen Wenn Sie mehr erfahren möchten. Wir können sogar unser eigenes Symbol oder unser eigenes Bild anstelle dieses Quadrats hinzufügen , indem wir die Bild-URL hinzufügen. Also lassen Sie uns das Quadrat entfernen und direkt nach dem Inneren werden wir die URL hinzufügen, und dann innerhalb der Klammer können wir den Dateipfad zu unserem Bild hinzufügen. Wir können für eines unserer vorhandenen Bilder im Bilderordner gehen. Lassen Sie uns für cables.jpeg gehen, und schauen wir uns an, wie das aussieht. So sieht es ein bisschen ein Chaos in der Minute, weil die Größe unseres Bildes. Offensichtlich ist dieses Bild viel zu groß, aber Sie können sehen, wie es verwendet werden kann, wenn es stattdessen ein kleines Symbol war, und dies wird für jedes Listenelement wiederholt. Die innen- und außenliegenden Regeln gelten weiterhin. Wenn wir also innen entfernen und diese dann durch außen ersetzen würden , würden unsere Bilder nun außerhalb des Dokumentenbodens verschoben. Wir können nicht wirklich sehen, ohne wieder rauszuzoomen. Da gehen wir, sagt unsere Kabel auf der linken Seite jedes Listenelements. Dies ist ein Verhalten, das wir direkt am Anfang dieses Video mit den Kugeln hatten . Alles, was ich für dieses Projekt tun möchte, ist, diese Märkte vollständig zu entfernen. Dies kann getan werden, indem der Wert von none, s statt dieses Bildes hinzugefügt wird. Wir können auch die Außenseite entfernen und dies ändert sich einfach zu keiner. Dann haben wir nur einen Standardsatz von Listenelementen auf der linken Seite. Dann der Artikelabstand zwischen diesen Links oben und unten, können wir die Zeilenhöhe erhöhen. Also innerhalb des Listenelements können wir voran gehen und die Zeilenhöhe hinzufügen. Der Wert liegt an uns, aber ich werde meinen auf dreißig Pixel setzen und sehen, wie Boden das aussieht. Gut hat nun die Zeilenhöhe auf dreißig Pixel erhöht, wodurch zwischen jedem Element etwas mehr Abstand hinzugefügt wurde. Das letzte, was ich tun möchte, ist, einige Abstände hinzuzufügen , um den Text vom Rand dieses Containers fernzuhalten. Dies kann leicht mit ein wenig Polsterung auf der Seite gemacht werden. Also rüber zum beiseite Abschnitt des CSS, und dann gehen Sie weiter und fügen Sie etwas Padding von 10 Pixeln hinzu, dann aktualisieren Sie. Großartig, so dass der Abstand jetzt auf den beiseite Abschnitt angewendet wurde. Aber in dieser Polsterung hat es auch dazu geführt, dass ein Shop für Abschnitt jetzt niedriger ist als diese alle Artikel Abschnitt auf der rechten Seite. Um dies noch mehr zu machen, müssen wir nur den Füllwert zum Hauptabschnitt hinzufügen. Gerade oben könnten wir dasselbe mit dem Auffüllen von 10 Pixeln tun, und mal sehen, wie das aussieht. Großartig, so dass jetzt der Shop durch, und alle Artikel Abschnitt jetzt besser mit etwas Polsterung um die Außenseite. Als nächstes gehen wir zu Styling-Links und Pseudo-Klassen über. 41. Gestaltung von Links und Pseudoklassen (Einführung in CSS): Wie wir bereits in unserem Projekt sehen können, Links standardmäßig nicht sehr gut aus. Sie haben einen Unterstreichungsabschnitt , den Sie nur hier und auch im Kopfzeilenabschnitt sehen können, müssen Sie möglicherweise jedoch vergrößern. Unterstrichen ist etwas, das wir entfernen möchten. Auch standardmäßig sind die Farben nicht sehr attraktiv. Lassen Sie uns beginnen, indem Sie die Unterstreichung von den Links entfernen. Wir können dies tun, wenn wir zu unserem CSS gehen. Dann fügen wir direkt unter den Listenelementen das A-Tag hinzu. Um dies zu entfernen, können wir die Textdekoration auf einen Wert von non setzen. Dann bis zum Browser sollte dies nun die Standard-Links aus dem Headerbereich und auch aus den Titeln entfernen . Dies kümmert sich um die Unterstreichung, aber wir müssen immer noch die Textfarbe der Links zu ändern, sowohl dieser Produkte als auch der Kopf- und Fußbereich unten unten. Wir könnten dies tun, indem wir einzelne Klassen zu jedem Element und sicherlich individuelle CSS-Farbeigenschaften hinzufügen. Oder wir können weitermachen und etwas einfacheres machen. Zuerst gehe ich zum Proto-Abschnitt und setze die Standardtextfarbe mit der Farbeneigenschaft ein, indem ich einen RGB-Wert von 49 für das Rot, die grüne 46 und 46 für das Blau ebenfalls festlege. Geben Sie ein Speichern und wenn wir zum Browser gehen und aktualisieren, sehen wir jetzt eine etwas hellere graue Farbe. Zurück zu den Links. Wenn wir auf den A-Abschnitt gehen, anstatt einen Wert wie eine RGB- oder Hex-Farbe zu setzen, werde ich voran gehen und die Farbe zu erben und geben uns speichern. Das Schlüsselwort inherit gibt an dass eine Eigenschaft ihren Wert vom übergeordneten Element erben soll. Die Produktlinks übernehmen diese Farbe für den Körperbereich und auch die Kopf- und Fußzeilenlinks erben den Farbwert aus dem Abschnitt hier. Mal sehen, wie das im Browser aussieht. Gut. Jetzt haben wir die Header-Links, die weiße Farbe. Wir können sehen, dass die Produkte diese dunklere graue Farbe haben, die dem Körper entspricht und dann unten unten haben wir die weißen Links für den Fußzeilenbereich auch. Wir können genau sehen, was vor sich geht, wenn wir in die div-Tools gehen. Klicken Sie mit der rechten Maustaste und überprüfen Sie Lassen Sie uns zuerst eines unserer Produkte auswählen. Oben auf der rechten Seite, und wir beginnen, nach unten zu scrollen. Wir können sehen, dass wir von seinem Körperteil geerbt haben, und wir haben die Schriftfamilie geerbt und auch diese graue Farbe, die wir hinzugefügt haben. Klicken Sie auf die ausgewählten mehr und ich gehe zu den Kopfzeilenlinks. Hier können wir sehen, dass wir von der Kopfzeile diese Farbe von Weiß geerbt haben. Wir können dies ein- und ausschalten und den Effekt sehen, den dies hat. Schließen Sie die div-Tools und jetzt mit diesen Links, die gepflegt werden, möchte ich jetzt zu den sogenannten Pseudo-Klassen übergehen. Pseudo-Klassen sind wie eine Erweiterung zu einem CSS-Selektor. Zum Beispiel können wir immer noch Links mit diesem A-Selektor auswählen, was wir hier bereits getan haben. Nun, zum Beispiel nur, wenn eine Maus über sie schwebt oder wenn sie bereits besucht wurden. Oder wir könnten ein Listenelement mit li auswählen, genau wie wir es hier getan haben. Wählen Sie jedoch nur das dritte Element in einer Liste aus. Es gibt ziemlich viele Pseudo-Klassen zur Verfügung, aber werfen wir einen Blick auf einige der häufigsten, beginnend mit Hover. Wenn wir zu unserem A-Element für unsere Links gehen und direkt unten ist ein Abschnitt, können wir ein neues A-Element hinzufügen. Getrennt durch einen Doppelpunkt können wir den Namen unserer Pseudo-Klasse hinzufügen. Für diesen Fall werde ich Hover verwenden. Dadurch werden alle A-Elemente ausgewählt, wenn die Maus über sie schwebt. Wir könnten einige Dinge tun, wie eine Farbe setzen und Hex-Wert von 0e69e9 hinzufügen. Natürlich kann dies jede Farbe sein, die Sie wählen. Lassen Sie uns dies im Browser testen. Jetzt für Reloads und bewegen Sie den Mauszeiger über einen unserer Links, sehen wir jetzt diese blaue Farbe, die gültig sind. Auch die Vorräte, das Produkt auch, und auch der Fußbereich zu unten. Wenn wir nun zu unserem Protokoll innerhalb unserer index.html gehen, scrollen wir bis zu unserem ersten Produkt, das gerade hier ist. Hier haben wir zwei Sätze von p-Elementen. Einer für den Preis und dann eine für die Beschreibung direkt danach. Wir können eine Pseudo-Klasse zuerst vom Typ verwenden, um die erste in dieser Gruppe auszuwählen, was unser Preis sein wird. Zurück zur styles.css. Genau wie wir es mit den Links getan haben, können wir zuerst unsere Elemente auswählen, fügen Sie einen Doppelpunkt hinzu, und dann den Namen unserer Pseudo-Klasse, die zuerst vom Typ ist. Für diesen können wir auch die Farbe einstellen und Rot wird in Ordnung sein. Gehen Sie zum Browser, aktualisieren und jetzt können wir den ersten Satz von p-Elementen in jedem Abschnitt sehen wurde nun auf rot eingestellt. In unserem Fall ist dies der Preis und dies wird auch für alle Elemente wiederholt. Es gibt auch letzte vom Typ zu. Lassen Sie uns dies ändern, um das letzte vom Typ zu sein. Die Farbe Rot ist auch in Ordnung und Sie können sich wahrscheinlich vorstellen, dass dies die Beschreibung auswählen wird, sobald wir aktualisieren, da dies der letzte Satz von P-Tags in seiner Gruppe ist. Dies funktioniert auch für andere Elemente, wie zum Beispiel unsere Listenelemente. Zum Beispiel können wir p zu li ändern und dies wird das letzte Listenelement in jeder Gruppe auswählen. Zum Beispiel, der Kontakt uns unten unten, das gleiche für den Header, und auch für jede Gruppe in einer Sidebar zu. Wir können nicht nur das erste oder das letzte Element auswählen, wir können tatsächlich jedes auswählen, indem wir den n-ten Typ verwenden. Wenn wir das dritte Listenelement wollten, könnten wir n-ten Typ verwenden, der N-T-H ist. Dann fügen wir die Klammern kurz danach hinzu und wenn wir das dritte Listenelement in der Gruppe anvisieren wollten, fügen wir Nummer 3 hinzu, geben dem ein Speichern. Gehe zum Browser und jetzt aus drittem Listenelement in jeder Gruppe ist jetzt ausgewählt. Diese Zahl kann jede unserer Wahl sein. Ich werde nur dieses Beispiel hier löschen und das speichern und das Projekt wieder so wiederherstellen, wie es war. Wenn wir die fertige Version des Textils aufbringen, werde ich nur einen zweiten Tab werfen. Wenn wir einen Blick auf unsere fertigen Produktabschnitte hier, unten unten unten haben wir die Links von mehr Informationen und auch in den Warenkorb. Mit diesen Pseudo-Selektoren, so haben wir die Schaltflächen als verschiedene Stile. Wir fügen ein anderes CSS für den letzten Typ hinzu. Lassen Sie uns das in unserer Version tun. Wenn wir zurück zum CSS gehen, diesmal am unteren Rand, können wir auch die Schaltfläche, den Doppelpunkt und dann den letzten Typ anvisieren . Dieses Mal werden wir es auf die letzte Schaltfläche in jeder Gruppe anwenden. Lassen Sie uns die Hintergrundfarbe in den blauen Typ ändern, den wir zuvor gesehen haben , der einen Hex-Wert von 0e69e9 hat. Dann schließlich eine Farbe für den Knopf weiß. Dann geht es zum Browser. Jetzt haben wir einige schöner aussehende Links am unteren Rand jedes Produkts. Dies ist ein erster Blick auf Pseudo-Klassen und Sie können sehen, wie nützlich sie für das Targeting bestimmter Elemente sind, abhängig von ihren Zuständen. 42. Float und Clear (Einführung in CSS): Willkommen zurück alle. Wir werden einen Blick auf Schwimmer und klar in diesem Video. Floats sind eine Möglichkeit, unsere Elemente auf einer Seite zu positionieren. Zum Beispiel könnten wir ein Bild nach links schweben, und dann wird der Rest des Inhalts in den Rest des verfügbaren Speicherplatzes umwickeln. Dies wird wahrscheinlich am besten gesehen, um genau zu verstehen, was es tut. Also auf dieser Homepage, wenn Sie auf einen Game-Controller klicken, und dann gehen wir über das Produkt Detail. Ich möchte, dass dieses Bild, das nur hier auf der linken Seite erscheint. Wir haben alle diese Produkttexte und die Informationen auf der rechten Seite des Bildes. Wir haben bereits gesehen, dass dies durch die Verwendung von Inline-und Inline-Block-Anzeigetypen erreicht werden kann, aber wir werden uns auf Floats in diesem Video konzentrieren. Wenn wir zu der Datei gehen, die die productdetail.html ist, werde ich dem Produkt eine neue Klasse hinzufügen, damit wir dies in CSS auswählen können. Also, kurz nach der Klasse des Produkts, können wir hier eine zweite Klasse hinzufügen, und sagen wir, Produktdetails, und dann wieder im CSS, werden die folgenden Stile speziell auf diese Produktdetailseite angewendet. Also lassen Sie uns einen Kommentar hinzufügen. Ein CSS-Kommentar ist also ein Schrägstrich, ein Stern, dann unser Text. Nehmen wir an, Produktdetailseite. Ich werde das wieder mit einem Stern und einem Schrägstrich abschließen. Dann werde ich das Produkt div ein wenig breiter machen, so dass es dem Bild und auch dem Text nebeneinander passt . Lassen Sie uns dieses Produkt Bindestrich Detail Klasse Ziel und dann können wir die Breite auf 660 Pixel einstellen. Also lassen Sie uns sparen und sehen, wie das aussieht. Nachladen. Okay, also ist das Bild für den Moment ein wenig groß, aber jetzt haben wir den Container auf 660 Pixel gesetzt. Jetzt auf schweben. Wir wollen, dass das Bild auf der linken Seite schwebt, oder in der Tat, wir können es auf beiden Seiten schweben. Aber in meinem Fall möchte ich, dass es auf der linken Seite ist, und dann der Text auf der rechten Seite. Daher können wir das Produktdetailbild innerhalb des CSS mit Produktdetails und dann Bild auswählen . Lassen Sie uns zunächst die maximale Breite des Bildes auf 50 Prozent einstellen, und das sind 50 Prozent des Containers. Dann können wir das schweben, um auf der linken Seite zu sein. In der Tat, bevor wir das tun, werden wir das einfach leer lassen und erfrischen. Jetzt können Sie standardmäßig sehen, wir haben das Bild und dann den Text, der Blockebene auf seiner eigenen separaten Zeile ist. Wenn wir dann voran gehen und einen Float hinzufügen und wir das Bild nach links schweben, lassen Sie uns sehen, welche Wirkung das hat. Okay, gut. Daher haben wir dieses Bild nun auf 50 Prozent oder die Hälfte der Breite des Containers beschränkt dann das Bild links vom gesamten restlichen Inhalt verschoben. Das bedeutet, dass der Text nun den verbleibenden Platz auf der rechten Seite einnimmt. Nun werde ich etwas mehr Text zu diesem Produkt hinzufügen, um den Effekt, den der Float hat, vollständig zu zeigen. Wenn wir auf die Produktdetailseite gehen, und dann ganz unten im Warenkorb, das gerade die p-Tags geöffnet, um etwas Text hinzuzufügen. Wenn Sie Visual Studio-Code wie ich verwenden, können wir einfach lorem eingeben und dann „Tab“ drücken, und dann erhalten wir einen Beispieltext, der zwischen diesen p-Tags geht. Wenn nicht, können Sie einfach alle Inhalte schreiben, die Sie wollen. Bestellen Sie eine Google-Suche für Lorem Ipsum, die diese beiden Wörter hier sind, und dann können Sie einige Beispieltext kopieren und einfügen. Klicken Sie auf „Speichern“, neu laden, und wir können sofort sehen, dass jetzt mehr Text verfügbar ist. Wir können viel besser sehen, jetzt ist das Bild links vom Rest des Inhalts schwebt, und dann wird der verbleibende Text um den Rest des Raumes gewickelt. Wir können dies auch nach rechts anstelle von links schweben. Also lasst uns das mal aussuchen. Aktualisieren. Dann passiert das gleiche, aber auf der anderen Seite. Wir können dies auch auf „Keine“ setzen. Jetzt sind wir wieder da, wo wir angefangen haben, ohne Float statt, und dann wird der Text auf Blockebene in der nächsten Zeile erscheinen. Also Schwimmer sind wirklich nützlich für diese Art von Sache. Aber wie die meisten Dinge gibt es einige Nachteile. Bevor in jüngerer Zeit noch andere Techniken erstellt wurden, wurden und werden Schwimmer immer noch verwendet, um eine vollständige Webseite zu erstellen. Sie würden oft sehen, dass der Hauptinhalt Float auf der linken Seite und auch eine Seitenleiste auf der rechten Seite ist . Das funktioniert, aber wenn wir diese Schwimmer benutzen, kann etwas Seltsames passieren. Um dies klarer zu zeigen, werde ich ein einfaches div direkt über der Fußzeile einrichten. Wir haben ein Bild und einen Text im Inneren. Gehen wir also zum Produktdetail und dann zum Fußzeilenbereich. Scrollen Sie einfach nach unten. Also, genau zwischen diesem Haupt- und Fußzeile, lassen Sie uns ein einfaches div einrichten. Vor allem mit einem Bild und der Quelle. Dies kann jedes Bild sein [unhörbar], das Sie aus dem Ordner „Bilder“ verwenden. Sagen wir nun die controller.jpg. Dann der Text in den p-Tags von 'Hallo'. Gehen wir also auf die Produktdetailseite im Browser und aktualisieren Sie dann, und es gibt unser Bild und den Text dort unten. Das sieht also so aus, wie wir es im Browser erwarten würden. Gehen wir also zurück zum Texteditor und fügen Sie diesem Bild einen Float hinzu. Inline ist also in Ordnung. In diesem Beispiel setzen wir den Float auf der linken Seite. Sehen wir uns an, wie das aussieht, wenn wir uns auffrischen. So können wir sofort sehen, dass etwas Seltsames passiert ist. Der Inhalt unten, der ein div für diesen Fußzeilenbereich war, bewegt sich nun neben unserem Bild nach oben. Aber wir wollen, dass dies ganz unten auf der Seite steht, da es sich um eine Fußzeile handelt. Wenn wir zu den Entwickler-Tools gehen, klicken Sie mit der rechten Maustaste und „Inspect“. Werfen wir einen Blick und sehen, was passiert. Wenn wir voran gehen und auf den Pfeil klicken und dann das übergeordnete div auswählen, und dies ist das div, das wir für das Bild und den Text von 'hello' hinzugefügt haben. Also gehen wir zum Bild, und das ist das übergeordnete div hier. Wir können sehen, ob wir den Mauszeiger über dieses div zeigen, das gerade hier erscheint, sehen wir einige Dimensionen. Das div ist also 1.000 Pixel breit um 19,2. Dies zeigt also, dass das div nur die gleiche Höhe wie der Text dieses 'hallo' -Textes hier innerhalb des Containers hat. Es scheint die Höhe des Bildes nicht zu berücksichtigen. Dies liegt daran, dass schwebende Elemente die Höhe des übergeordneten Containers nicht beeinflussen. Dies bedeutet, dass dieser Fußzeilenbereich unten dieses Bild grundsätzlich ignoriert und bis zur Höhe des „Hallo“ -Textes verschoben wird. Wir können dies beheben, indem wir den Überlauf so einstellen, dass er automatisch auf dem Container ist. Also lassen Sie uns zu unserem div gehen und wir können den „Style“ setzen und dann den Überlauf von auto hinzufügen, zurück über und aktualisieren und nach unten scrollen. Nun, unsere Fußzeile ist wieder ganz unten. Wenn Sie zurück in diese DevTools gehen und zu dem div gehen, das wir zuvor gesehen haben, geben Sie das einen Klick. Wir können jetzt auf dem Bildschirm sehen, lassen Sie uns nach oben scrollen, dass die Höhe des div jetzt 425 Pixel beträgt, was auch die Höhe dieses Bildes berücksichtigt. Lösung für dieses schwebende Problem wird Clearfix genannt. Diese Überlaufeigenschaft behebt das Problem in den meisten Browsern. Sie können auch eine Google-Suche nach dem Micro-Clearfix durchführen und Sie werden kleine CSS-Lösungen für dieses Problem finden. Dies wird auch weniger ein Problem für Sie, wenn wir später im Kurs anfangen, das CSS Grid und die Flexbox zu betrachten , anstatt nur Float für das Layout zu verwenden. Also lasst uns das schließen. Nur um zusammenzufassen, wenn wir ein schwebendes Element verwenden, genau wie dieses Bild , wird die Höhe nicht berücksichtigt, weshalb dieser Fußbereich hier unter diesen Text gedrückt wurde, der nicht schwebt. Das ist also etwas, das bei der Verwendung von Floats wirklich wichtig ist. Auch bei der Arbeit mit Floats gibt es auch eine andere CSS-Eigenschaft, die beachtet werden muss, und dies wird als klar bezeichnet. Auch hier ist dies wahrscheinlich am besten in der Praxis gesehen, um zu verstehen. Ich werde zuerst dieses Beispiel ändern, um ein linkes und auch ein rechts schwebendes Element zu haben. So haben wir derzeit das Bild, das nach links geschoben wird. Nun, gehen wir weiter und öffnen Sie die p Tags und schweben Sie diese nach rechts. Also Style, schweben Sie nach rechts, Semikolon am Ende. Dann fügen wir ein drittes Element hinzu, das nicht schwebt. So werden einige einfache Texte dafür tun. Also lassen Sie uns sagen, nicht schweben und „Speichern“, dass, gehen Sie zum Browser und aktualisieren Sie dann. Im Moment haben wir also das Bild, das nach links schwebt, den Text auf der rechten Seite und ein [unhörbares] nur um dies einfacher zu machen. Wir fügen dort 'Floated' hinzu. Also haben wir das schwebende Bild auf der linken Seite. Wir haben den schwebenden Text auf der rechten Seite. Dann der nicht schwebende Text in der Mitte. Dieser nicht schwebende Text befindet sich neben dem Bild und auch in derselben Zeile wie der schwebende Text. Klar lassen Sie uns angeben dieses nicht schwebende Element neben diesen Floated platziert werden kann oder nicht. Wenn wir zurück zu den p -Tags gehen und dann auch eine Stil-Eigenschaft hinzufügen. Wir werden sagen, löschen Sie den linken Schwimmer, über den Browser und aktualisieren Sie ihn. Der nicht schwebende Text wird jetzt unten angezeigt. Dies liegt daran, dass wir im Grunde sagen, dass dieses nicht schwebende Element nicht neben diesem Bild platziert werden darf , das nach links schwebt. Wir können auch erklären, dass wir nicht wollen, dass es neben dem rechten Floating-Element positioniert wird. Wir können das ändern, indem wir das Recht löschen. Jetzt ist es neben dem fließenden Text sowohl in der nächsten Zeile. Dies weist dem Browser also an, dies nicht neben irgendwelchen rechts schwebenden Elementen zu platzieren. diesem Grund erscheint es unten in einer eigenen separaten Zeile, oder wir können voran gehen und sowohl die linke als auch die rechte zusammen löschen, indem Sie diesen klaren Wert auf beide setzen und dann aktualisieren. Nun befindet sich der Text unter den linken und rechten schwebenden Elementen. Also, jetzt werde ich voran gehen und diesen zusätzlichen div-Abschnitt entfernen , da wir dies nicht innerhalb des Projekts brauchen und dann „Speichern“ das. Wir könnten auch sicherstellen, dass das Produktdetailbild nach links schwebt, und dann ist unser Projekt wieder normal. Außerdem können wir diesen zusätzlichen Lorem Ipsum Text entfernen. Gehen wir also zurück zum Produkt und entfernen Sie diesen langen Abschnitt des Textes, und da gehen wir. So können wir Float und Clear verwenden. Es kann ziemlich viel dauern, wenn Sie das noch nicht gesehen haben. Aber das ist nur eine der Eigenheiten, auf die Sie stoßen werden, wenn Sie Websites erstellen. 43. Die Eigenschaft position (Einführung in CSS): Wir wissen jetzt, wie wir Floats verwenden, um unsere Elemente nach links oder rechts zu schweben. Eine weitere wichtige CSS-Eigenschaft, die wir verwenden können, um unsere Elemente zu positionieren, ist die Position Eigenschaft. Dies gibt uns verschiedene Methoden zu platzieren oder anzupassen, wo ein Element auf der Seite erscheinen soll. Es gibt fünf Positionswerte, die wir als statisch, relativ, absolut, fest und klebrig verwenden können . Um dies zu demonstrieren, brauchen wir ein Element, mit dem wir arbeiten können. Jedes Element in unserem HTML wird in Ordnung sein, also gehe ich zu unserem Produktdetail und wähle dann ein Element aus. In der Tat, lassen Sie uns zu dem Index gehen, wo es mehr Produkte gibt, und dann lassen Sie uns Elemente wie diese Schaltfläche ganz unten auswählen. Lassen Sie uns hier rüber gehen und fügen Sie eine ID zu dieser Schaltfläche hinzu, und jeder Name ist in Ordnung. Ich werde diese Position anrufen und dann speichern. Wenn wir dann wie gewohnt zum CSS gehen, können wir nach unten gehen und dies mit dem Hash und dann dem Namen, den wir positionieren werden, anvisieren . Der Standardwert für die Position ist statisch. Dies bedeutet einfach, dass die Elemente dort platziert werden , wo sie normalerweise im Fluss oder in den Dokumenten liegen würden. Dies könnte oben links sein, wie wir zuvor gesehen haben, mit blockierten Elementen, oder die nächste Position in der Zeile, wenn es sich um ein Inline-Element handelt. Das Festlegen von CSS-Eigenschaften wie oben, unten, rechts oder links hat keinen Einfluss auf das Versetzen dieser Elemente. Lasst uns das mal ausprobieren. Lassen Sie uns 10 Pixel an den Anfang und auch die Indexseite hinzufügen . Wir können sehen, dass diese Schaltfläche „In den Einkaufswagen“ überhaupt nicht verschoben wurde, da sie nur die Position einnimmt, in der sie normalerweise sein würde. Wenn wir wollten, dass diese Offsets gelten, könnten wir die Position so ändern, dass sie relativ ist. Das ist unsere Opposition von Verwandten direkt darüber. Jetzt speichern wir und gehen zurück zum Browser und aktualisieren dann. Nun wurde die Taste von oben um 10 Pixel nach unten gedrückt. relativen Positionierung werden die Elemente dort platziert, wo sie normalerweise wären, genau wie vorher. Berücksichtigt aber auch alle oberen, unteren, rechten oder linken Werte, um die Elemente zu versetzen. Sie können auch sehen, dass sich das Verschieben dieser Elemente nicht auf die Position eines unserer umgebenden Elemente auswirkt. Als nächstes haben wir Absoluten, also ändern Sie relativ, um absolut zu sein. Dann rüber zum Browser, wir werden sehen, dass es zu uns springt. Es ist jetzt oben auf der Webseite, absolut macht die letzten beiden Werte, die wir uns angesehen haben. Wir nehmen die Elemente aus dem normalen Fluss des Dokuments. Das bedeutet, dass Sie nicht im nächsten verfügbaren Bereich platziert werden. Es ist eigentlich kein Platz dafür geschaffen. diesem Grund ist es oben über anderen Elementen. Derzeit wird der oberste Wert von zehn Pixeln wirksam, wenn sie übergehen und einen neuen Wert hinzufügen, also lassen Sie uns die linke hinzufügen, auch 10 Pixel, aktualisieren. Jetzt ist es nur zehn Pixel von oben und zehn Pixel von links platziert. Diese Position wurde vorgegeben, dass sie ganz außerhalb der Webseite oder genauer auf dieHTML-Containerelemente referenziert oder genauer auf die wird. Wir können auch die Elemente ändern, von denen es referenziert wird, wenn wir die HTML-Elemente nicht verwenden möchten. Alles, was wir tun müssen, ist die Position eines anderen übergeordneten Elements relativ zu sein. Wenn wir wollten, dass die Schaltfläche von diesem Hauptcontainer referenziert wird, zum Beispiel um die Produkte herum, könnten wir zum Haupttank auf der Indexseite gehen, und dann könnten wir eine CSS-Stil-Eigenschaft hinzufügen. Hier könnten wir die Position so einstellen, dass sie relativ ist, und sehen, wie sich dies auf sie mit einer Aktualisierung auswirkt. Nun, dies wird 10 Pixel von oben und links vom wichtigsten relativen Container referenziert, oder wenn wir wollten, dass es von diesem ersten produktiven referenziert wird, könnten wir genau das gleiche hier tun. Anstatt Domain zu verwalten, könnten wir dies entfernen und es dann dem div mit der Klasse der Produkte hinzufügen, aktualisieren. Nun, dies ist ein Hinweis auf die obere linke Ecke dieses ersten Produktivs. Ich werde nur diesen Inline-Stil entfernen und dann sparen. Dieser absolute Wert gibt uns viel Flexibilität, aber wir müssen auch vorsichtig sein, da sich die Dinge auch bewegen können, wenn der Browser gestreckt wird. Das bedeutet, dass wir wirklich vorsichtig sein müssen, wenn wir absolut verwenden. Gehen wir nun zur festen Position. Anstatt absolut, ändern Sie dies zu beheben. Jetzt können wir oben links oszillieren, das sind jetzt fünf. Wenn wir speichern und zum Browser gehen, sehen wir, dass nichts anders aussieht auf den ersten Blick. Wenn diese Schaltfläche aus dem HTML referenziert wurde, sehen wir, dass das Element auch aus dem Fluss der Dokumente entfernt wird, genau wie es mit absoluten war. Außerdem können wir sehen, dass die oberen und linken Werte noch wirksam werden. Um genau zu sehen, was es tut, benötigen wir möglicherweise etwas mehr Inhalte auf der Seite. Ich werde unsere sechs Produkte kopieren. Das erste div der Klasse der Produkte, und scrollen Sie dann rechts nach unten zum letzten, das kurz vor dem Haupt-Tag hier ist. Kopieren Sie das, und fügen Sie diese dann noch einmal ein. Wir haben jetzt 12 Produkte, und dann aktualisieren. Wenn wir dann weiter gehen und die Seite nach unten scrollen, bleibt die Schaltfläche in ihrer festen Position in der oberen Ecke. Sie können oft auf dies stoßen für Dinge wie eine E-Mail-Anmeldebox, die Sie oft in der unteren Ecke sehen. Schließlich haben wir auch die klebrige Option. Wir können die Position ändern, um klebrig zu sein, oder jede style.css. Aber dieses Mal werden wir die beiseite Ziel, speichern, und dann über den Browser und aktualisieren. Jetzt auf den ersten Blick blickt unsere Seite wieder normal. Es scheint nichts anderes zu sein, als es ursprünglich war. Aber wenn wir voran gehen und nach unten scrollen, anstatt die Seitenleiste mit den restlichen Produkten nach oben verschoben wird, bleibt sie auf der linken Seite des Bildschirms an Ort und Stelle. Sie werden oft diese vier Navigationen oder Menüs sehen. Sie sind immer für den Benutzer sichtbar. Ich werde diesen beiseite Abschnitt entfernen und dann ein Speichern geben. Wir können auch den Rest dieser Produkte entfernen, die Sie hinzugefügt haben. Ich werde das nur rückgängig machen, nur die ursprünglichen sechs Produkte verlassen. Gut. Dies ist, wie wir die Position Eigenschaft verwenden, um eine bessere Kontrolle über die Platzierung unserer Elemente auf dem Bildschirm zu haben. 44. Gestaltung von Formularen und Eingaben (Einführung in CSS): Ich möchte nun auf die Seite „Kontaktieren Sie uns“ wechseln, um diesem Formular ein bestimmtes Styling hinzuzufügen. Dies ist unsere aktuelle Version hier, aber wenn wir auf die Seite Kontakt auf der fertigen Version gehen , können wir sehen, dass es ein bisschen anders aussieht, aber es verwaltet den Fall, einige Abstände und Ausrichtung hinzuzufügen. Sie können natürlich voran gehen und dies selbst tun, wenn Sie sicher fühlen, aber wenn nicht, folgen Sie einfach mit mir. Lassen Sie uns beginnen, indem wir zur style.css gehen und jetzt können wir voran gehen und einen Kommentar machen. Im Inneren können wir die Kontaktieren Sie uns hinzufügen und jetzt können wir voran gehen und unser Formular anvisieren. Wir können einige grundlegende Stile wie Polsterung hinzufügen. Also ein Auffüllen von zehn Pixeln, die natürlich innerhalb des Formularelements erscheinen wird. Dann fügen Sie einige Abstände auf der Ober- und Unterseite des Formulars hinzu. Wir können einen gewissen Spielraum hinzufügen. Zehn Pixel oben und unten und Null links und rechts. Wir können dies auch ein wenig breiter machen, also sagen wir 600 Pixel. Geben Sie dem ein Speichern und aktualisieren Sie es dann. Jetzt haben wir einige grundlegende Styling für unsere Form. Dinge würden auch viel besser aussehen, wenn diese ersten vier Eingänge ebenfalls aufgereiht wären. Im Moment werden die vier Eingabebereiche alle bis zum Rand des Textes auf dem Etikett gedrückt. Um dies zu tun, werde ich eine benutzerdefinierte Klasse hinzufügen, diese ersten vier div-Abschnitte. Über die Kontaktieren Sie uns oder contact.html. Werfen wir einen Blick auf die ersten vier divs, die mit dem Namen beginnen. Lassen Sie uns eine Klasse von Inline hinzufügen. Dann lassen Sie uns dies kopieren und es für die E-Mail einfügen, auch für die Nachricht und dann haben wir auch das Betreff, das ist dieser Abschnitt hier, also zum Öffnen div für den Abschnitt zwei, stellen Sie sicher, dass wir das speichern und dann können wir Ziel dies im CSS, beginnend mit der Einstellung der Breite der Textbeschriftung, so.inline für die Klasse, und wählen Sie dann die Beschriftung. Die Breite kann ein beliebiger Wert unserer Wahl sein, aber ich werde für 100 Pixel gehen . Geben Sie dem ein Sparen. Erstens, wenn wir uns auffrischen, können wir sehen, dass es keine Änderung gibt. Dies liegt daran, wie wir bereits erwähnt haben, können wir die Breite für Inline-Elemente festlegen und standardmäßig ist Label inline. Also gehe ich zum CSS und ändert sich, um Inline-Block zu sein, so dass es die Breite beeinflussen kann. - Gut. Das ist eher so. Wir haben jetzt ein breiteres Etikett, das diese Eingaben auf der rechten Seite ausrichtet. Aber diese Eingänge würden auch besser aussehen, wenn sie ein wenig breiter sind. Wir können bestimmte Eingaben basierend auf unserem Eingabetyp kennzeichnen. Zunächst einmal, wenn wir die Eingaben setzen und dann die eckigen Klammern öffnen, können wir dann nur die Art des Textes markieren und dann durch Komma getrennt, wir können auch die Eingaben mit der Art der E-Mail markieren, und wir werden die Klammern öffnen, wie wir in der Regel tun. Für diese ersten beiden, lassen Sie uns die Polsterung von 10 Pixeln hinzufügen, und dann können wir sie ein wenig breiter machen, also lassen Sie uns für 400 Pixel gehen, über den Browser. - Gut. Das sieht ein bisschen besser aus, aber wir können sehen dieser Textbereich immer noch kleiner ist als die anderen Eingaben. Wir haben hier ein paar Möglichkeiten. Wir könnten entweder zurück zum HTML-Code gehen und weitere Spalten hinzufügen, da wir die Spalten und Zeilen Attribute im Textbereich haben oder wir können diese in CSS überschreiben, indem wir auch auf den Textbereich abzielen. Nun, wenn wir neu laden alle Eingaben sind jetzt die gleiche Breite. Nur um dies zu schließen, lassen Sie uns etwas Rand auch um jedes dieser div-Elemente hinzufügen, nur um einige Abstände nach oben und unten hinzuzufügen. Wir können dies tun, indem wir das Formular und dann jedes div auswählen, das folgt. Lassen Sie uns den Rand auf 10 Pixel oben und unten und Null auf der linken und rechten Seite setzen. Denken Sie daran, dass dies alle div-Elemente binden wird, die ein direktes Kind von Form sind. Laden Sie also neu und haben Sie jetzt einige Abstände am oberen und unteren Rand jedes div-Abschnitts. - Gut. Diese Form sieht jetzt viel besser aus mit einigen gleichmäßigeren Abständen. Als Nächstes haben Sie die Chance, etwas mehr Übung zu bekommen, indem Sie die endgültigen Stile zu diesem Projekt hinzufügen. 45. Zeit zum Üben – Styling des Abschlussprojekts (Einführung in CSS): Wir haben in diesem Abschnitt einen langen Weg zurückgelegt und hoffentlich fühlen Sie sich viel mehr Vertrauen bei der Verwendung von CSS. Ich möchte jetzt, dass Sie voran gehen und diesem Projekt einige letzte Stile und letzten Schliff hinzufügen . Insbesondere möchte ich, dass Sie dieser Kopfzeile und auch dem Fußzeilenbereich unten etwas mehr Höhe hinzufügen . Auch wenn wir die Header-Links, diese hier und auch das Suchfeld auf der rechten Seite ausrichten , genau wie wenn Sie die fertige Version hier besuchen. Schieben Sie alles auf die rechte Seite. Auch wenn wir die Textausrichtungen auf den Produkten in die Mitte setzen, genau wie Sie hier sehen. [ unhörbar] sind links ausgerichtet. Schließlich, über auf der Produktdetailseite, würden Sie auf diesen „Game Controller“ klicken. Ein bisschen Styling auch für diesen Tisch an der Unterseite. Wir haben Styling-Tabellen noch nicht behandelt, aber Sie können die gleichen Techniken verwenden, die Sie bereits kennen, wie das Hinzufügen von Rändern und Auffüllen zu den einzelnen Tabellenelementen. Das ist es, was ich möchte, dass du vornimmst und tust. Denken Sie daran, es gibt keinen richtigen oder falschen Weg. Beide werde ich im nächsten Video durchlaufen , um Ihnen zu zeigen, wie ich zu dieser fertigen Version gekommen bin. 46. Lösung: Gestaltung des Abschlussprojekts (Einführung in CSS): Ich hoffe, Sie alle haben es geschafft, das endgültige Projekt, Styling-Herausforderung abzuschließen. Denken Sie daran, obwohl es keinen richtigen oder falschen Weg gibt, dies zu tun. Stiefel werden jetzt durch die en