Code für deine eigene Website (HTML- und CSS-Grundlagen)

1. Einführung: Hallo, ich bin Matthew von Brandon Codes. Wollten Sie schon einmal Ihre eigene Website erstellen aber denken, dass es einfach zu schwierig sein könnte. Nun, in diesem Kurs werde ich Ihnen beibringen, dass Codierung Spaß und einfach machen kann. Sie können eine professionelle Website und einen Sumpf von uns erstellen. In diesem Kurs werden wir diese erstaunliche Website mit nur HTML und CSS erstellen. In diesem Kurs lernen Sie die Tools kennen, die Sie benötigen, um eine Website zu erstellen. Grundlagen von HTML, CSS, Grundlagen, geben Fortschritt in einem Bootstrap. Höhe der bringen alle zusammen und die Erstellung Ihrer ersten Website, I Omega mobile responsive. Und schließlich, Haida Gastgeber. Wenn das alles gut klingt und Sie bereit sind zu lernen, dann tauchen wir direkt ein. 2. Tools: Werfen wir einen Blick auf die Tools, die Sie benötigen, um Ihre erste Website zu erstellen. Die erste sagte, dass wir brauchen, haben Sie wahrscheinlich bereits, und das ist ein Web-Browser. Dazu können Sie entweder Firefox verwenden, Chrome verwenden, oder Sie können eine Reihe von Farben verwenden. Zum Beispiel, Safari. Für dieses Tutorial werde ich Firefox verwenden, gibt es als mein bevorzugter Fraser. Aber ich werde Ihnen zeigen, wie Sie einige der Dinge lösen können , die wir auf Chrome als auch benötigen. Das nächste, was wir als Developer Tools oder DevTools kurz brauchen. Dies sind Programme Bell in moderne Grazer, mit denen Sie Code erstellen, testen und debuggen können. Aktuelle Browser wie Firefox und Chrome haben diese integriert und ermöglichen es Ihnen, die Website zu überprüfen. Sie können HTML, CSS und JavaScript der Seite ändern. Mach dir keine Sorgen, wenn du noch nicht weißt, was das bedeutet. Ich werde Ihnen beibringen, jede dieser Türen in Kürze zu beobachten. Aber für jetzt, lassen Sie mich Ihnen zeigen, wie Sie DevTools auf Firefox und Chrome öffnen. Ich fange hier mit Chrome an. Und alles, was Sie tun müssen, ist mit der rechten Maustaste auf eine beliebige Stelle auf der Webseite und drücken Sie Inspect. Sie werden wissen, dass die DevTools für Firefox geladen hat. Es ist ein ähnlicher Prozess. der rechten Maustaste auf eine beliebige Stelle auf der Seite, und wählen Sie Element Sie werden wissen, dass die DevTools geladen wurde. Als schnelle Demonstration. In DevTools können wir Änderungen am HTML der Seite vornehmen. Zum Beispiel kann ich diese Schaltfläche ändern, um Klassen zu sagen, oder wir können CSS-Änderungen vornehmen. Zum Beispiel kann ich diese Kopfzeilenfarbe ändern, um gelesen zu werden. Nochmals, keine Sorge, wenn Sie noch nicht vollständig verstehen, was HTML und CSS. Dies ist nur eine Demonstration dessen, was wir tun können. Und DevTools, wieder, etwas, das Sie mit DevTools ändern können , ist, wo der Besitz dieser Symbolleiste, wie durch Klicken auf die drei Punkte hier,können Sie wählen, dunkler auf die Rate, zum Beispiel, oder Sie können es auf der linken Seite docken können Sie wählen, dunkler auf die Rate, . Sie können die Symbolleiste auch lösen, indem Sie ein separates Fenster auswählen. Und das ermöglicht es Ihnen, es auf einen zweiten Monitor zu stellen. Zum Beispiel. Für dieses Tutorial, Ich werde Assembly Dock es an den unteren Rand der Seiten. Das letzte Werkzeug, das wir brauchen, ein wohl das wichtigste, ist ein Code-Editor. Ich empfehle und verwende den kostenlosen Code-Editor , den Sie eine Diode herunterladen können. Aber wenn USU andere wie Sublime Text, Lassen Sie uns Ruhm, wie Sie in der Lage sein, entlang weniger Tutorial folgen, ist alle Code-Editoren lose die gleichen. Also, um zusammenzufassen und sicherzustellen, dass Sie bereit sind, um loszulegen. Die Zehen, die wir brauchen, sind ein Browser, Firefox oder Chrome DevTools auf diesem Browser, und ein Code-Editor wie Arm. 3. MATERIALIEN: Bevor wir mit diesem Kurs fortfahren, müssen Sie die Materialien herunterladen, die ich für Sie vorbereitet habe. Sie können dies tun, indem Sie sterben scrollen und auf die Registerkarte Projekte und Ressourcen gehen. Und dann auf der rechten Seite unter Ressourcen werden Sie sagen, für den Kurs Hunde App benötigt. Um diese Set-Datei herunterzuladen, klicken Sie einfach auf den Titel, der für das Kernkonzept benötigt wird. Sobald Sie diesen Ordner eingerichtet haben, können Sie in den gewünschten Kursordner klicken und alle Kursmaterialien finden, die Sie benötigen. Sie sehen einen Übungsordner, der eine HTML-Startdatei enthält, ein Bild, das wir für unsere erste Übung verwenden werden. Sie sehen auch einen Website-Ordner mit einer Start-HTML-Datei und den Bildern, die wir für diesen Kurs benötigen. Und schließlich werden Sie sagen, dass ich für den Übungsordner benötigt habe , der das Bootstrap-Framework enthält. Wir werden in diese detailliertere Ebene gehen. Sobald Sie diesen Ordner heruntergeladen haben, können Sie diesen Kurs fortsetzen. 4. Website-Grundlagen: Also, bevor wir beginnen, unsere Website zu bauen ist wirklich wichtig, um die Grundlagen zu verstehen. Was sind Websites? Madoff. Um dies leicht zu verstehen und wollen eine Metapher verwenden. Und das heißt, eine Website ist wie ein Haus. Sie können es erklären. Wenn wir an die Hauptkomponenten denken, aus denen ein Hace besteht, können wir uns an Freiheit, das Aussehen und die beweglichen Teile denken . Jede dieser Hauptkomponenten eines Hosts entspricht tatsächlich einem Hauptbestandteil beim Aufbau einer Website. Wenn wir also an die Freiheit eines Hosts und Website-Begriffe denken, wäre das der HTML. Html steht für Hypertext Markup Language. Html für kurz. Der Rahmen des Gastgebers bildet die Räume, bildet das Layout und bildet die Struktur auf die gleiche Weise, wie eine Website Abschnitte hat, Kopf oder Körper für. Und jeder Abschnitt enthält Bilder und Texte. Zum Beispiel gibt es Layout, es gibt Freiheit. Die Struktur wird durch HTML definiert. Wenn wir also einen Blick auf dieses HTML-Beispiel werfen, ist es wichtig zu beachten, dass dies keine echten HTML-Elemente sind, aber das Layout ist korrekt in Bezug darauf, wie Sie HTML verwenden würden. Und ich denke, das hilft wirklich, genau zu veranschaulichen, wie Sie es verwenden würden. Html hat ein öffnendes und schließendes Tag und beende sie Tags, würden Sie Elemente haben. So können Sie ein öffnendes Tag und ein schließendes Host-Tag mit n sehen , dass wir die zweite Etage haben. Und im zweiten Stock haben wir das Schlafzimmer mit im ersten Stock, wir haben 11 Zimmer. Wir haben einen Eingang, und innerhalb der Zimmer haben wir die Eingangstür. So können Sie sehen, wie HTML die Struktur eines Raubes definieren würde. Mit diesem Beispiel werden wir HTML in der exakt gleichen Weise verwenden , um die Struktur unserer Website zu definieren. Als nächstes geht es um das Aussehen des Hauses und Website-Begriffe, werden wir CSS verwenden, um das Aussehen zu definieren. Css steht für Cascading Style Sheets oder CSS kurz. Dies ist eine Akkordsprache, die uns erlaubt, das Aussehen von HTML-Elementen zu definieren. In unserem Hausbeispiel sehen nicht alle Räume, Tische und Stühle gleich aus. Freche Wörter und Bilder auf einer Website. Css definiert, wie Elemente aussehen, beschreibt ihre Farben besagt Besitz, Schiff und vieles mehr. Hier ist ein weiteres kurzes Beispiel, wie wir CSS reduzieren, um das Aussehen oder für Hosts zu entwerfen. Wir können sehen, dass wir ein Element definiert haben, also Schlafzimmer. Und dann innerhalb dieses Elements mit definiert als Breite, seine Höhe, die Wände und den Boden. Auch hier können Sie sehen, dass wir spät Schalter Schlag ein HTML-Element definieren oder das Licht aus ihrem Haus ausschalten. Und Sie können sehen, dass wir den Abstand vom Boden und dem Schiff haben. Auch hier handelt es sich nicht um echte HTML-Elemente. Dies ist nur eine übermäßige Vereinfachung, um Ihnen zu helfen, die Verbindung zwischen CSS und HTML zu verstehen. Also schließlich, in einem Host, den Sie von Teilen wie späten Farbfeldern verschoben haben , wäre JavaScript. Javascript wird verwendet, um interaktive Elemente auf unserer Website zu erstellen. Dank Schieberegler, denken Pop-ups. Wir werden uns nicht auf JavaScript und dieses Tutorial konzentrieren. Also für jetzt, alles, was Sie wissen müssen, ist, dass JavaScript Karriere und aktive Elemente auf einer Website sind. Also, um zusammenzufassen, wenn es um die Elemente geht, die eine Website bilden, denken Sie an einen Bienenstöcke. Für die Freiheit, für die Struktur, verwenden wir HTML, für das Aussehen und Aussehen. Wir verwenden CSS. Und zum Verschieben von Teilen würden Sie JavaScript verwenden. Also in diesem Tutorial werde ich Ihnen zeigen, wie Sie HTML und CSS verwenden, um Ihre erste Website zu erstellen. Wir werden die Struktur der Website oder den Rahmen der Website mit HTML erstellen . Und dann werden wir CSS verwenden, um zu definieren, wie die Website aussieht, die Farbschemata, die Beutelkörner, die Topographie und das allgemeine Erscheinungsbild. Dies ermöglicht es Ihnen, eine hoch personalisierte Website zu haben und hatte auch die Fähigkeiten, in der Lage zu sein , jedes Website-Layout und jede Website Aussehen, die Sie in der Zukunft wünschen erstellen zu können. 5. Grundlagen von HTML – Teil 1: Es ist Zeit, mit dem Programmieren zu beginnen. Beginnen wir mit HTML. Html, wie bereits erwähnt, ist Rahmen oder Struktur unserer Website. Jede Website hat Gürtel mit HTML-Elementen. Jedes Element hat etwas, wie Text oder ein Bild. Wir haben verschiedene Arten von HTML-Tags, mit denen wir spielen können. Und jedes dieser Tags stellt verschiedene Arten von Inhalten dar. Zum Beispiel haben wir Überschriften, Absätze, Bilder und mehr. Wenn es darum geht, unser HTML zu schreiben, ist es wichtig, semantische Elemente zu verwenden. Was sind semantische Elemente? Semantische Elemente sind Elemente mit einer Bedeutung. In HTML hat jedes Tag seine eigene Bedeutung, hat ein Beispiel für semantische HTML-Elemente. Wenn wir einen Absatz schreiben wollten, würden wir mit dem p-Tag öffnen. Da dies der Absatz HTML-Element ist. Wir würden unseren Absatz schreiben und dann würden wir mit einem schließenden p schließen, wo Absatz, HTML-Element. Dieses Beispiel ist die semantische Codierung. Es ist Zeit, mit dem Programmieren zu beginnen. Bevor wir anfangen, unsere eigene Website zu programmieren, Lassen Sie uns eine schnelle HTML- und CSS-Übung machen, um die Grundlagen zu lernen. Wir werden dann die vollständige LU, Sie werden zwei Ordner sehen, Übung und Website. Öffnen Sie den Übungsordner. Und ich habe eine Skalierungs- und Index-HTML-Datei in Ihrem Code-Editor auf Ihren Desktop eingefügt, klicken Sie einfach und ziehen Sie sie auf den Arm, sind auf die Kerndaten oder Sie verwenden. Und Sie werden sehen, dass die Skalierung in HTML-Übung fehlschlägt geöffnet. Lassen Sie mich Sie also über das sprechen, was bereits in dieser HTML-Datei enthalten ist. Oben haben wir eine Doc-Typ-Deklaration. Diese Deklaration ist kein HTML-Tag. Seine Informationen an den Browser darüber, welchen Dokumenttyp zu erwarten ist. Dies muss in allen HTML-Dateien enthalten sein. Und es lässt den Browser wissen, dass er eine HTML-Datei lädt. Das nächste Element ist das HTML-Tag. Das HTML-Tag ist ein Container für alle anderen HTML-Elemente mit Ausnahme des doc-Typs. Also n von m mit n, wird das HTML-Tag auf Ihrer Website gerendert. Beachten Sie, hey, es gibt ein öffnendes HTML-Tag und ein schließendes HTML-Tag. Woher wissen wir, dass dies ein schließendes HTML-Tag ist? Durch den Schrägstrich. Und öffnende Tag hat keinen Schrägstrich. Ein schließendes HTML-Element-Tag hat einen Schrägstrich. Also haben wir unsere HTML-Tags, und wenn genug davon HTML-Tags als unsere Website gerendert werden. Als nächstes haben wir die head-Tags, und oft in den head-Tags enthalten ist nicht auf der Webseite gerendert. Stattdessen wird dieser Bereich verwendet, um Metadaten oder Informationen über die HTML-Seite selbst einzubeziehen. Das erste, was ich hier aufgenommen habe, ist der Zeichensatz. Für den Moment. Wir werden nur wissen, dass dies super wichtig ist, enthalten zu haben. Aber ich werde nicht in Details eines Wortes Zeichen sagen weil ich denke, es würde dich in diesem Stadium einfach verwirren. Nur wissen, dass es wichtig ist, dass das enthalten ist. Wir haben den Titel im Kopf enthalten, und das ist sehr Assembly der Name der HTML-Seite. Nun wollen wir natürlich nicht, dass das auf der Seite selbst angezeigt wird. Aber es ist wichtig, dass der Browser weiß, was der Name oder Titel von den Seiten. Also ist es im Kopf enthalten. Weitere Beispiele für Elemente, die Sie in die head-Tags einfügen würden , sind die Beschreibungen von der Seite. Wenn Sie also jemals eine Suche auf Google durchgeführt haben, die Seitenbeschreibungen, die Sie in den Snippets sehen sind die Seitenbeschreibungen, die Sie in den Snippets sehen, tatsächlich im Kopf einer Seite enthalten. Wir können auch den Kopf verwenden, um externe Dateien aufzunehmen, etwas, das wir später in diesem Kurs tun werden. So können wir externe CSS-Dateien einbinden, um das Aussehen unserer Website zu erleichtern. Und das ist alles in den Head-Tags enthalten. Also wieder, dies ist ein Bereich für Informationen oder beides. Die Seite gutartigen Bereich für Sachen, die wir auf der Seite 49 angezeigt werden wollen, um weg zu gehen, das ist alles, was Sie brauchen, um in den head-Tags enthalten zu haben. Als nächstes haben wir die Body-Tags. Und wenn Arbeitgeber, um die Body-Tags zu verteidigen wird angezeigt und in Ihrem Browser Azure-Website gerendert werden. Dies ist der Bereich, den wir setzen alle unsere HTML-Elemente, wie Überschriften, Absätze, Bilder, Tabellen, etc. Eigentlich, alles, was Sie Band und hier wird auf Ihrer Webseite angezeigt werden. Zum Beispiel, wenn ein Band irgendetwas, und sehen, ob das, was Sie tun können, indem Sie scheitern. Meer von oder durch Drücken der Steuerung und S und Entladen unserer HTML-Seite und unseren Browser. Was Sie tun können, indem Sie zum Übungsordner gehen und auf die index.html doppelklicken. Sie können sehen, dass auf unserer Webseite alles angezeigt wird. Offensichtlich sieht das nicht sehr gut aus und würde keine sehr gute Website machen. Aber nicht nur das, wir haben das nicht semantisch akkordiert. Schauen wir uns an, wie wir Text semantisch auf unserem HTML-Dokument akkordieren können. Wenn ich den Code-Editor wieder aufbaue, werde ich alles entfernen. Und ich werde jetzt eine Überschrift hinzufügen, 2 yadda Überschrift. Wir werden unser Tag öffnen. Wir werden Alter für den Weg nehmen und wir werden einen schwenken. Sie können die Zahlen eins bis sechs für Überschriften verwenden. Also H1, H2, H3, etc. H1 ist jedoch die stärkste Überschrift Tag. Wenn wir also die Überschrift für einen Artikel schreiben würden, würden wir H1 verwenden, weil dies das wichtigste HTML-Überschriftenelement ist. Und wir werden eine Rubrik bewerten. Willkommen, Skillshare Studenten. Was fehlt in dieser HTML-Spur? Das ist Rate, wir müssen das HTML-Tag schließen. Um das zu tun. Wir öffnen das HTML-Tag wieder, aber dieses Mal verwenden wir einen Schrägstrich, Schrägstrich, der ein geschlossenes HTML-Element bezeichnet. Und dann nehmen wir das CMB HTML-Element wieder. So können Sie sehen, dass wir ein öffnendes H1-Tag und ein schließendes H1-Tag haben. Vor dem Übergang zwischen den beiden Elementen. Ich werde sehen, ob diese Seite durch Drücken von Control S und ich werde den Browser wieder aufzurufen. Und ich werde die Seite aktualisieren. Sie können sehen, was wir gerade in unserer Codedatei hinzugefügt haben, wird auf unserer Website-Seite angezeigt. Lassen Sie mich Ihnen schnell zeigen, hey, DevTools funktioniert jetzt. Erinnern Sie sich, wie Sie DevTools öffnen können? Wir klicken mit der rechten Maustaste, und wir drücken Inspect Element. Wenn wir hier einen Blick auf unser HTML-Dokument werfen, können Sie sehen, wie ich beschrieben, alle Elemente innerhalb der Kopf HTML-Tags werden nicht auf unserer Seite angezeigt. Sie können dann unsere Body-Tags und die Überschrift sehen, die wir gerade hinzugefügt haben. Wir können Änderungen Talente machen, indem Sie einfach auf das HTML-Element klicken. Wir wollten uns ändern. Klicken Sie auf das Element und fügen Sie zum Beispiel Text hinzu. Ich kann mich ändern. Willkommen, zum Beispiel, zu hallo. Wenn ich die Eingabetaste drücke, sehen Sie, dass diese Änderung vorgenommen wurde. Etwas wirklich wichtig, um ein bisschen dev zu verstehen, sagt, dass wir diese Änderungen nur lokal vornehmen und diese Änderungen nicht gespeichert werden. Das ist also Veränderung. Ich habe gerade die TR-Seite gespiegelt. Wenn eine Aktualisierung, werden Sie sehen, dass die Änderung war nicht Meer von. Das liegt daran, dass wir nur die Änderungen und unseren Browser vornehmen. Und wir sind nur Magnum vor Ort. Damit diese Änderung geschehen kann, müssen wir zu unserem Code-Editor zurückkehren. Wir müssen die Änderung in unserem eigentlichen HTML-Dokument vornehmen. Wir brauchen ein Meer des HTML-Dokuments. Und dann, wenn wir unsere Seite aktualisieren, können Sie sehen, dass die Änderung dauerhaft gemessen wurde. 6. Grundlagen von HTML – Teil 2: Lassen Sie uns eine wirklich einfache Website erstellen, die eine Überschrift, einen Absatz, ein Bild, einen Link zu einer anderen Website und einen letzten Sprung zurück in die Übung index.html Datei enthält ein Bild, einen Link zu einer anderen Website . Wenn Sie die index.html von unserer letzten Lektion bis zur Schultasche in den Paketordner geschlossen haben , gehen Sie zu Übung und ziehen Sie dann die Datei index.html auf Ihren Code-Editor. Das ist entfernt die Überschrift, die wir in der vorherigen Übung hinzugefügt haben, da wir neu beginnen und diese sehr einfache Website erstellen wollten, werde ich eine neue Überschrift hinzufügen. Wieder. Ich werde ein H1-Tag als wichtigste Überschrift verwenden. Und ich werde dies nur als eine grundlegende Website nehmen, aber Sie können hinzufügen, wo immer Sie Überschrift haben. Was fehlt. Auch hier müssen wir das HTML-Tag schließen. Wir machen das mit einem Schrägstrich. Und dann die H1. Wir wollen nun einen Absatz hinzufügen. Dafür verwenden wir das p-Tag, P steht für Absatz. Und dann wollen wir etwas Absatztext hinzufügen. Du kannst hier schreiben, was immer du willst. Aber wenn Sie einige Texte wirklich schnell als Platzhalter benötigen, Es gibt eine wirklich nützliche Sache in der Web-Entwicklung namens Lorem Ipsum. Wenn Sie zu Google gehen und lorem ipsum generator eingeben, finden Sie eine Reihe von Websites, die Blog-Texte für Sie sehr schnell generieren. Wir werden diese in dieser Demonstration verwenden und einen Absatz generieren. Nun, das ist nicht Englisch und macht keinen Sinn, aber es wird in der Web-Entwicklung verwendet, um Bereiche einer Website sehr schnell zu bloggen. Wenn wir uns nicht ganz sicher sind, welchen Text wir dort noch so tun werden. Also werde ich kopieren und PSDs für meinen Absatz. Ich werde als N. durchbohrt und wir wissen als lästiges Problem. Der Text ist so groß, dass die Chordata bis auf die rechte Seite geschoben wird. Jetzt können Sie das Glas nennen, aber Sie werden es ziemlich irritierend finden. Zum Glück hat Adam und fast jeder Code-Editor eine Funktion, um dies zu stoppen. Alles, was Sie tun müssen, ist zu Ansicht gehen und Soft-Wrap umzuschalten. Was dieser Dawes ist packt den Text innerhalb des Code-Editor-Fensters und verhindert, dass Sie sich nach links und rechts bewegen müssen, um zu sehen. Was in diesem Absatzelement fehlt. Das ist richtig. Wir müssen es schließen. Lassen Sie uns jetzt davon sehen und sehen, wie es im Browser aussieht. Ich werde das noch einmal sehen, indem ich die Kontrolle und S. drücke und ich werde unsere Website laden und aktualisieren. Sie können sehen, dass die Überschrift angezeigt wird und der Absatz angezeigt wird. Um diese HTML-Elemente in DevTools anzuzeigen, klicken Sie einfach mit der rechten Maustaste, gehen Sie zu Inspect Element. Und Sie können in unserem Körper sehen, dass wir eine Überschrift und einen Absatz haben. Jetzt lassen Sie uns bekommen, erlauben Sie ihnen mehr fortgeschritten und fügen Sie ein Bild auf unserer Website. In unserem Code-Editor werde ich eine neue Spur nehmen und ich werde das Bild HTML-Tag hinzufügen. Dies ist ein fortschrittlicheres Tag. Und so gibt es ein paar Dinge, die Sie über das Bild-Tag wissen müssen. Da es sich nicht um eine CME als Absatz- und Überschriften-Tag handelt, benötigt das Bild-Tag ein Attribut. Ein Attribut ist Informationen innerhalb des HTML-Tags selbst. Für ein Bild müssen wir SRC hinzufügen, die für Quelle steht, die Quelle des Bildes. Wir müssen dann ein Gleichheitszeichen setzen und innerhalb der Klammern müssen wir den Pfad des Bildes eingeben. Was ist der Pfad des Bildes? Werfen wir einen Blick auf unsere Übungsmappe. In unserem Übungsordner sehen Sie einen Bildordner. Wenn Sie den Bildordner verschieben, gibt es ein Bild, das der Pfad ist, den wir benötigen. Pfade können ziemlich schwierig sein, vor allem als Anfänger zu verstehen und einfache Möglichkeit, sich daran zu erinnern, wie man es tun kann, wie man sich vorstellen, dass Sie index.html beschreiben, wie man den Schaden zu finden. Also würden Sie index.html zuerst in den Bildordner gehen und dann wird das Bild enden. Das nennt man Beispiel Dodge JPEG. Also wieder, stellen wir uns vor, wir beschreiben es zu index.html, wenn wir es zu unserer Quelle hinzufügen, zuerst müssen wir in den Bild-Ordner gehen. Dann fügen wir einen Schrägstrich hinzu. Und innerhalb dieses Bild-Ordners wollen wir das Beispiel Punkt JPEG-Bild. Also haben wir den Ordner und dann haben wir den Bildnamen in diesem Ordner. So können Sie sagen, wir müssen dieses HTML-Tag schließen. Indem Sie dies tun, würden Sie sich jedoch irren. Bild-Tags unterscheiden sich von Überschriften- und Absatz-Tags, da sie als ungültige Elemente bezeichnet werden. Void-Elemente können keinen Inhalt haben. Denk darüber nach. Ein Bild kann keine Texte mit Anna haben, weil es ein Bild ist. Daher ist es ein leeres Element. Stattdessen müssen wir das Tag etwas anders schließen. Um ein Element zu schließen oder ein Bild-Tag zu schließen, fügen wir einfach einen Schrägstrich vor der endgültigen Winkelklammer hinzu. Dies ist jetzt eine geschlossene Leere Krankheit oder ein geschlossenes Bild-Tag. Lassen Sie uns eine riesige NIH durch Drücken der Kontrolle und S sehen und unsere Website aktualisieren. Wir können sehen, dass das Bild als NIH, zeigt, dass es jedoch ein weiteres Attribut, das Sie immer in Ihrem Bild-Tag aufnehmen sollten. Wenn wir zu unserem Code-Editor zurückkehren, werde ich ALT nehmen. Alt steht für alternativen Text. Warum brauchen wir alternativen Text innerhalb unseres Bild-Tags? Der Hauptgrund dafür ist also die Zugänglichkeit. Benutzer, die die Bilder nicht sehen und ein Text-to-Speech-Programm verwenden können. Verwenden Sie alternativen Text zu verstehen, was der Schaden, als. Es ist auch nützlich, wenn das Bild nicht geladen wird. Wenn beispielsweise der Schaden fehlt oder Sie den Pfad geworfen haben, wird der alte Text angezeigt, damit Benutzer wissen, was da sein sollte. Um alternativen Text hinzuzufügen, geben Sie einfach ALT, die wir bereits haben, entspricht einem EMR-Anbieter Sprachzeichen einfach eine kurze Beschreibung dessen, was die Schäden. Also werde ich nehmen. Dies ist ein Beispielbild. Mal sehen, ob STI und gehen Sie zurück zu unserem Browser und aktualisieren Sie die Seite mit DevTools, können Sie sehen, dass dieser alternative Text ist jetzt enthalten, um Ihnen eine Demonstration, wie dies aussieht. Wenn zum Beispiel das Bild fehlt oder geladen werden kann, werde ich den Pfad brechen. Also werde ich den Pfad auf ein Bild zeigen, das nicht existiert. Ich werde nicht „Enter“ drücken. Und Sie können sehen, dass, weil das Bild nicht geladen werden kann, der alternative Text als Rest angezeigt wird. Alle Änderungen, die an DevTools vorgenommen wurden, werden nicht gespeichert, so dass wir ihre Space Assembly wiederherstellen können, indem Sie die Seite aktualisieren. Fügen wir nun einen Link hinzu. Gehen Sie zurück zum Code-Editor. Ich werde diesen Link oben oder Bild hinzufügen. Also werde ich eine Linie über dem Bild-Tag und Bandwinkel Klammer a hinzufügen. Das a Tag definiert einen Hyperlink, der verwendet wird, um von einer Seite zu einer anderen zu verknüpfen. Die Art und Weise, wie ein Tag funktioniert, ist mit einem anderen Attribut. Und wir werden RREF nehmen, die für Hypertext-Referenz steht. Grundsätzlich ist es der Link zu der Website, auf die Sie die Schaltfläche bringen möchten. Dafür werde ich auf Skillshare verlinken. Also werde ich www.skillshare.com innerhalb der Sprachzeichen eingeben. Wir können dann das Öffnen eines Tags schließen. Jetzt müssen wir kleben, was der Schaltflächentext sein soll. Also werde ich auf Band, das ist ein Link. Und dann müssen wir dieses Tag schließen, die CME als Überschrift oder ein Absatzelement. Wir tun das durch die Winkel Klammer, Schrägstrich, dann a. Also, was wir hier haben, ist ein Link-Tag. Wir haben die Öffnung ein Element. Wir haben ein H ref Attribut, das uns zu skillshare.com bringen wird. Wir haben den Button Text und dann haben wir die Schließung ein HTML-Element. Ich werde C davon kennen und auf unsere Seite gehen, um die Seite zu aktualisieren. Wenn wir unsere Browserseite aktualisieren und nach einem Link suchen, fragen Sie sich vielleicht, ob er fehlt. Wenn Sie nach unten scrollen, werden Sie feststellen, dass sich auf der linken Seite des Schadens befindet. Warum ist das? Dies liegt daran, dass wir nicht angegeben haben, dass das Bild auf einer neuen Spur sein soll. So sind die Verbindung und das Bild auf der Nahtlinie. Defekte esco zurück zu unserem Code-Editor. Und dazwischen das a-Tag für einen Link und das Bild-Tag für unser Bild. Fügen Sie eine neue Spur und Band BR Schrägstrich, Winkel Klammer. Br steht für Bruch oder Zeilenumbruch ist vermeiden Element eines CV kann nichts innerhalb eines Zeilenumbruchs hinzufügen. Daher vermeiden wir Hinweise Element, indem einen Schrägstrich vor der schließenden Winkel Klammer verwenden. Wir müssen nicht Tags und öffnen und schließen Tag, ähnlich wie ein Bild. Wenn Sie diesen Zeilenumbruch hinzufügen, werden keine Mittel für den Schaden in einer neuen Zeile sein. Nun, wenn wir Control S drücken, um zu sehen, ob gehen Sie zurück zu unserem Browser und aktualisieren Sie die Seite. Sie können sehen, dass wir jetzt den Link, einen Zeilenumbruch und das Bild darunter haben. Jetzt testen wir unseren Link und sehen, was passiert. Das ist ein Link. Sie wissen vielleicht, dass es eine Fehlermeldung gibt und dass wir nicht tatsächlich auf die Website skillshare weitergeleitet werden, die wir für den Link eingegeben haben. Werfen wir einen Blick auf den Code und verstehen, warum wir diese Fehlermeldung erhalten. Aufbau des Code-Editors. Wir können sehen, dass wir kein HTTP gesetzt haben, das wir gerade mit www dot begonnen haben. diesem Grund denkt der Link, dass es sich um eine relative URL handelt. Arraylist von URL geht davon aus, dass die Länge, die Sie hinzugefügt haben, sich auf derselben Site und als Teil der CME rid Domain befindet. Also, wenn wir schauen unsere Riser und an der Verbindung tragen versucht, uns zu nehmen. Sie können sehen, dass es tatsächlich in aussehen, im Übungsordner für www.skillshare.com. Das ist falsch. Wir müssen eine absolute URL verwenden. Also müssen wir HTTP Doppelpunkt, Schrägstrich, Schrägstrich hinzufügen . Sie können nun sehen, dass der Link auf AM ändert blau dort zeigt, dass es sich um eine URL handelt. Wieder werde ich sehen, ob ich zu meinem Browser gehe, zu unserer Übungsseite zurückgehe und aktualisiere. Wenn ich nun auf den Link klicke, wirst du sehen, dass es dich zu skillshare.com bringt. Jetzt endlich, lassen Sie uns eine Liste zu unserer Website hinzufügen, Aufbau der Code-Editor. Und wir werden eine neue Linie nehmen. Und ich werde UAL hinzufügen. Wir können entweder die Tags OL oder UL für unsere letzte verwenden. Ol steht für geordnete Liste und GL steht für ungeordnete Liste. Beginnen wir mit unserer ungeordneten Liste. Nach dem Öffnen des UL-Tags werden wir ein weiteres HTML-Tag hinzufügen. Und das ist ALA. Das LI-Tag ist ein weniger Tag m mit n LST. Dies wird als untergeordnetes HTML-Element bezeichnet. Also haben wir einen ehrenvollen letzten. Dann beenden wir die ungeordnete Liste. Wir haben einen Listeneintrag. Ich werde all die Dinge auflisten, die Sie in diesem Kurs lernen werden. Also werde ich HTML für das erste Element auf meiner Liste schreiben und dann dieses Tag auf die gleiche Weise schließen, wie wir eine Überschrift oder ein Absatz-Tag schließen würden. Ich werde einen zweiten Artikel zu unserem letzten hinzufügen. Also füge ich ein weiteres offenes ALA-Tag hinzu und ich werde ein weiteres gewürfeltes hinzufügen, ich bin, ich werde ein weiteres enges Tag hinzufügen. Ich werde ein drittes Element hinzufügen. Und ich werde es schließen, und ich werde eine vierte hinzufügen. Und schließlich, ähm, jetzt haben wir vier oder weniger DEMs waren dann unsere ungeordnete Liste. Aber wir müssen unsere ungeordnete Liste schließen. Um dies zu tun, nehmen wir ein schließendes UL-Tag. Um zusammenzufassen, haben wir ein öffnendes UL-Tag. Wir haben vier Kinder, LI-Tags mit öffnenden und schließenden HTML-Elementen. Und dann haben wir unser schließendes UL-Tag. Lassen Sie uns CFS kennen und gehen Sie zu unserer Website. Lassen Sie uns die Seite aktualisieren. Und verschwommenes Bild, das Sie sehen werden, sind alle ungeordneten Liste. Wenn wir eine geordnete Liste wollen, etwas, das zum Code-Editor zurückgerufen wird und die URL zu Ihrem ändern, nun, mal sehen, ob das zu unserer Webseite zurückgeht und aktualisiert wird. Sie werden jetzt sehen, dass wir eine geordnete Liste haben. 7. CSS-Grundlagen – Teil 1: Werfen wir nun einen Blick auf die CSS-Grundlagen, ein neues CSS auf der Beispielwebsite, die wir erstellt haben. Was ist CSS? Css, wenn Sie sich erinnern, ist das Aussehen Ihrer Website. Also, wenn der Host Mao für wir zu Beginn dieses Kurses verwendet, der HTML war die Freiheit und die CSS war, was geben, um unsere Freiheit zu suchen gibt es auf unserer Website. Wenn wir also einen Blick auf unsere Website im Bennett werfen, werden Sie zustimmen, dass es so aussieht. Es ist nicht großartig. Aber jetzt werden wir uns mit CSS auswirken. Wenn es um die Verwendung von CSS geht, gibt es drei Möglichkeiten, wie wir es verwenden können. Neben unserem HTML. Wir haben n ln, CSS und externe fehlschlagen CSS und CSS-Code in HTML eingebettet. Für diesen Kurs konzentrieren wir uns nur auf einen. Und das verwendet eine externe CSS-Datei. Wie erstellen wir diese CSS-Datei? Öffnen Sie den Übungsordner, erstellen Sie einen neuen Ordner. Du kannst es benennen, was immer du willst. Aber um die Dinge leicht zu verstehen, nennen wir es Stil. Innerhalb dieses Ordners, Lassen Sie uns eine neue CSS-Datei erstellen. Die Art und Weise, wie ich dies mache, ist, einfach ein neues Textdokument zu erstellen. Ich werde es Stylesheet nennen. Ich werde das Band des Dokuments Träne CSS-Dokument ändern. Und ich werde das tun, indem ich einfach einen Punkt und Folge CSS platzieren und einen Fehler haben, erhalten Sie eine Nachricht, dann wissen Sie, dass Sie das Erweiterungsband ändern werden und dass sich das ausgefallene Band ändern wird. Aber wir wollten es. Also werden wir ja treffen. Und wir wissen, haben ein CSS-Dokument. Lassen Sie uns nun ihr CSS-Dokument öffnen. Eine CSS-Datei in unserem Code-Editor. Jemand zieht Stylesheets oder CSS auf Atom oder die Kerndaten oder Sie verwenden. Und Sie werden sehen, dass Ihr leeres Stylesheet-Dokument geöffnet für Sie unsere HTML-Datei oder index.html und oder ein Stylesheet, styles.css Datei zur gleichen Zeit suchen wollte . Um dies zu tun, werde ich mit der rechten Maustaste auf Stylesheets oder CSS, und ich werde Split Rate treffen. Wir können jetzt das Stylesheet dot css und das linke Fenster PM schließen. Und hier haben wir das HTML-Dokument auf der linken Seite und unsere Stylesheets oder CSS auf der rechten Seite. Möglicherweise stellen Sie fest, dass der Text hier groß ist. Ich habe es größer als normal wie für dieses Video. Sie können das Tag jedoch ändern, indem Sie auf Ansicht gehen und die Schriftgröße vergrößern oder verkleinern. Sie können auch die Option Umschalttaste plus oder Minus verwenden. Also werde ich die Größe von S Now reduzieren, nur um es einfacher zu machen , mehr davon auf dem Bildschirm zu sehen. Wie funktioniert CSS? Hier ist ein wirklich einfaches Beispiel für eine Spur von CSS. Sie können sehen, es besteht aus einem Selektor, einer Deklaration. Und innerhalb dieser Erklärung haben wir eine Eigenschaft und einen Wert. Wenn Sie sich den Selektor ansehen, sehen Sie, dass er H1 sagt. Und das verweist direkt auf das H1 HTML-Überschriftenelement, das wir in unserem Beispieldokument hinzugefügt haben. Dies bedeutet im Grunde, dass alle Deklarationen, die wir innerhalb des CSS-Selektors haben , alle H1-Überschriften beeinflussen. Wenn wir uns die Erklärung ansehen, können wir sehen, dass wir zwei haben. Unter der ersten haben wir eine Eigenschaft der Farbe und einen Wert von Blau. Wenn du es noch nicht erraten hast. Das bedeutet, dass wir die Überschrift H1 HTML-Element ändern, um die Farbe blau zu haben. Und wir haben auch Schriftgröße 12 Pixel. Wieder, wenn Sie noch nicht erraten haben, bedeutet das, dass wir die Überschriften A auf 12 Pixel ändern. Das ist meine Quote. Einige CSS, zum Beispiel Website. Mit Blick auf unseren Code-Editor wollte ich die Absatzschriftgröße ändern. Also werde ich P nehmen, da das direkt auf das HTML-Element verweist. Und dann haben wir eine offene geschweifte Klammer und eine schließende geschweifte Klammer. Durch Drücken der Eingabetaste kann ich eine Deklaration und einen Wert innerhalb dieser geschweiften Klammern nehmen. Also werde ich Schriftgröße schreiben. Und ich werde die Tags wirklich Tasche machen, nur damit wir die Veränderung wirklich leicht mit mir sehen können. Und so werde ich es für einen Paketverlust schaffen, der wirklich groß ist. Ich werde das Stylesheet nicht sehen, indem ich Control S und ich gehe zu unserem Browser. Ich werde die Seite aktualisieren. Nichts ist passiert. Warum ist nichts passiert? Dies liegt daran, dass wir nicht verlinkt oder externe Stylesheets CSS-Datei in unsere index.html. Ja. Unsere Website hat also keine Ahnung, dass es ein Stylesheet für sie gibt. Damit Schachtelhalme wirksam werden, müssen wir oder externe Stylesheet zu unserer index.html verknüpfen. Lass uns das jetzt machen. Gehen Sie zurück zu unserem Code-Editor. Wird dann der Leiter unserer Website, die wieder für ein Hirsch oder Informationen nicht auf der Website angezeigt wird. Wir möchten diesen Bereich nutzen, um unser externes Stylesheet zu verknüpfen. Also nimm eine neue Spur und du wolltest diese Zeile kopieren. Diese Zeile von HTML ist ein Link. Rel steht für Beziehung. Wir laden offensichtlich ein Stylesheet. Und dann haben wir Alter ref. Für Age ref, wir werden einen Pfad wieder verwenden. Diesmal ist der Pfad zum Stylesheet. Wir erschaffen es. unseren Übungsordner betrachten, können wir sehen, dass sich unser CSS-Stylesheet innerhalb des Style-Ordners befindet und der Name Stylesheet dot CSS ist. Mit der wirklich einfachen Methode, die ich Ihnen früher gesagt habe, zu verstehen, wie Passwort, indem Sie vorgeben , dass Sie index.html beschreiben, wie man ohnmächtig oder fehlschlägt. Wir werden diese Methode verwenden, um wieder oder Pfad. Erstens müsste index.html in den Ordnerstil gehen. Also werden wir das nehmen und bearbeiten. Und dann müsste es auf den Dateinamen schauen, Stylesheet dot CSS. So werden wir auch kein Band, dass wir wissen, hat C oder Control S. Gehen Sie zurück zu unserem Browser und aktualisieren. Und Sie können jetzt sehen, dass der Text massiv ist. Auf unserem Stylesheet ist wirksam. Wenn wir inspizieren oder Absatz. Sie werden auch sehen, dass die CSS-Deklaration, die wir hinzugefügt haben , auch in den Narzissen enthalten ist und wirksam geworden ist. Eines der besten Funktionen von DevTools ist, dass wir Leben Änderungen an der CSS machen können, wenn eine Website, drei DevTools, zum Beispiel, gibt es Steuer ist viel zu Tasche eine Anämie, dass es große. So können Sie leicht sehen, wie das CSS wirksam wird. Dies kann es zu einer vernünftigeren Größe, die wir tun können Rate und DevTools, um zu sehen, wie es aussehen würde. Ich werde auf Schriftgröße für einen Absatz klicken. Und ich werde die Schriftgröße auf 20 Pixel ändern. Sie können jetzt sehen, dass das CSS wirksam ist und wir können sehen, wie das auf unserer Website aussieht. Bitte denken Sie jedoch daran, dass diese Änderung nicht gespeichert wurde als Gaußsian ist eine Änderung Mitte nur lokal in Ihrem Browser. Und wenn ich die Seite aktualisiere, können Sie sehen, dass sie nicht wirksam ist. Ändern wir die Schriftgröße des Absatzes erneut auf 20 Pixel. Und Sie können nun die Deklaration kopieren und in Ihren Code-Editor durchbohrt. Meer von Ihrem Stylesheet dot css. Und wissen Sie, wenn Sie Ihre Webseite aktualisieren, können Sie sehen, dass sich das CSS ändert. Du hast mich, es bleibt. Lassen Sie uns noch ein paar CSS schreiben und wir werden es direkt in DevTools bewerten . Es wäre wirklich schön. Daher wurde Überschrift versandt bezieht. Um dies zu tun, werde ich auf H1 und DevTools klicken. Ich gehe zum CSS-Editor oder Pian. Ich werde auf das Plus klicken, um einen neuen CSS-Regelsatz zu erstellen. Und dann werde ich unter dem LSAT klicken. Und als Eigenschaft werde ich Text ausrichten schreiben. Sie können sehen, dass DevTools Ihnen einen Hinweis gibt, was Sie für einen Wert wählen können. Und ich gehe ins Zentrum, ich werde nicht Enter drücken. Sie können sehen, dass unsere Rubrik auf unserer Website zentralisiert wurde. Damit diese Änderung wirksam wird, müssen wir sie zu unserem Stylesheet hinzufügen, was wir sicherlich tun können, indem wir diesen echten Sam in unseren Code-Editor kopieren und in unsere Stylesheets oder CSS durchstechen, indem wir ihren Stil nicht speichern Blätter oder CSS und aktualisieren unsere Browser-Seite. Sie können sehen, dass es CSS-Regelsatz hinzugefügt wurde. Denken Sie daran, dass wir Ihrer Rolle mehrere Deklarationen hinzufügen können. Sam, sagen wir, wir wollen unsere Überschrift Schriftart „Seltsam“ leicht schichtförmig sein und nicht so kahl aussehen. Wir können einfach auf den Regelsatz klicken und dies ermöglicht es uns, eine neue Deklaration hinzuzufügen. Jetzt eine Frage, die Sie haben könnten, ist, wie kann man sich an all diese verschiedenen Eigenschaften für CSS erinnern? Und die Antwort ist, wirklich, es kommt auf die Praxis. Es geht darum, Websites zu erstellen und die Eigenschaften zu merken, die Sie bei der Erstellung verwendet haben. In der Zwischenzeit gibt es jedoch eine wirklich großartige Website, CSS-Referenzpunkt IO, die Ihnen alle Eigenschaften zeigt, die Sie NCSS verwenden können , und es greift zusammen und Sammlungen. In unserem Beispiel, dass unsere Überschrift eine etwas dünnere Schrift sein soll, sind wir, mal sehen, welche CSS-Eigenschaft wir verwenden könnten. Klicken wir auf Typografie. Und dann auf der linken Seite, Sie können sehen, wir haben Schriftart, Gewicht, Klicken auf Schriftart. Sie können die Eigenschaft und die Werte sehen, die Sie verwenden können. Sie können sehen, dass es Ihnen auch die Werte gibt, die Sie verwenden können. Für eine Familie. Es, wir werden leichter als 1 Achtel verwenden, dann fummeln es. Nehmen wir dies auf, indem wir zurück zu unserer Website gehen, zu tupfen erzählt, um sicherzustellen, dass wir unsere H1-Überschrift ausgewählt haben. Wir können auf eine Regel klicken, Sam, Tape Thump, wir sind eine neue Politik. Die DevTools gibt Ihnen auch Hinweise, welche Werte Sie verwenden könnten. Wir beschlossen, dass wir Layer verwenden wollten, die Layer und Erde auswählen. Und Sie können sehen, dass unsere Überschrift Schriftart wir sind, ist nette Art und Weise. Um dieses terroristische Stylesheet hinzuzufügen. Kopieren Sie einfach die Erklärung, die wir gerade hinzugefügt haben. Gehen Sie zu unserem Code-Editor. Und waren dann unsere H1-Regel sagt erstellen Sie eine neue Spur und PSTN oder neue Deklaration Control S, um zu sehen ob sie zurück zu unserem Browser gehen und die Seite zu aktualisieren. Sie können sehen, dass wir erreicht haben, was wir von einem dünneren Spaß auf unserer Überschrift wollten. Wenn es also um die Verwendung von CSS geht, wenn Sie sich nicht sicher sind, ob die Eigenschaften oder Werte, die Sie verwenden sollten, um das gewünschte Aussehen zu erreichen. Geben Sie CSS-Referenzpunkt-IO oder Lookup mithilfe ihrer Sammlungen oder durch Durchsuchen von CSS-Eigenschaften, z. B. Farbe. Sie sollten in der Lage sein, die Eigenschaften und die Werte zu finden, die Sie verwenden müssen, um die Änderung U1 und CSS im Laufe der Zeit und durch Reputation zu erreichen. Und indem Sie Ihre eigenen Websites angeben, diese Eigenschaften und Werte zur zweiten Natur und Sie werden in der Lage sein, sie zu verwenden, ohne auf die, sagen wir, das Glas verweisen zu müssen. Als Anfänger sage ich jedoch, dass das Glas fantastisch ist, um die Eigenschaften und Werte zu lernen, die Sie benötigen, um schöne Websites in CSS zu erstellen. 8. CSS-Grundlagen – Teil 2: Lassen Sie uns tiefer in die Verwendung von CSS auf unserer Übungswebsite eintauchen. Als nächstes wollen wir einen Blick darauf werfen, ist der Abstand zwischen den Elementen. Wenn Sie einen Blick auf diesen Link und das Bild darunter werfen, werden Sie feststellen, dass sie sehr nah beieinander sind. Um dies zu beheben, werden wir verwenden, was man Ränder nennt. Also, wenn ich Element inspizieren, klicken Sie auf mein Bild oder Sie können einfach auf das Bild-Tag in DevTools klicken. Und wir gehen rüber zum CSS-Feld und klicken auf das Plus, um eine neue Rolle zu erstellen, Sam. Und ich werde anfangen, Rand Bindestrich zu kleben. Jetzt können wir Rand oben, links, rechts, unten verwenden. Aber weil ich ein Leerzeichen zwischen dem oberen Rand des Bildes und dem Link hinzufügen möchte. Und wir werden Rand oben hinzufügen. Und dann wollte 30 Pixel nehmen. Sie können C kennen, wir haben einen schönen Raum zwischen der Oberseite des Bildes und dem Link. Sie können die Ränder visuell im Box-Modell von DevTools dargestellt sehen. Und Sie können auch Änderungen am Rand in diesem Moorwerkzeugbereich vornehmen. Wenn ich zum Beispiel auf den oberen Rand klicke, könnte ich ihn zum Beispiel 25 machen. Und Sie sehen dies auf Ihrer Übungswebsite dargestellt. Ich denke, 30 Pixel sahen Bär aus. Also werde ich nur die CSS-Regel löschen, die dieses Moormodell hinzugefügt hat. Und ich werde das Bild echte Zan kopieren. Ich werde meinen Code-Editor öffnen und ich werde diese Änderungen im Stylesheet-Punkt-CSS hinzufügen und sehen. Wenn wir die Übungswebsite aktualisieren, sehen Sie, dass Änderungen jetzt wirksam wurden. Und das ist Helligkeit Website oben. Es ist ein bisschen Farbe hinterher. Wir können Farben sowohl auf Elemente als auch auf Text anwenden. Lassen Sie uns also einen Blick auf den Hintergrund dieser Übungswebsite werfen. Ich möchte Körper auswählen, der den gesamten Hintergrund von der Website ist. Und ich füge eine neue Regel hinzu, die im echten San saß. Ich werde abgetropft zurückkleben. Und wenn Sie Hintergrund nehmen, werden Sie sehen, dass DevTools Ihnen eine Reihe von Optionen bietet, aus denen Sie packen können. Zum Beispiel, unser gla. Sie sehen, dass die Änderung auf Ihrer Website wirksam wird, wenn Sie auf eine dieser Farben klicken. Jetzt ist das großartig. Vergessen Sie die Farbe auf Ihrer Website schnell, aber es gibt Ihnen nicht wirklich eine gute Kontrolle über die Farben. Nehmen wir zum Beispiel an, ich möchte von diesem Bild färben. Für eine spezifischere Farbsteuerung, NCSS, verwenden wir einen sogenannten Hex-Code. Wenn Sie zuvor mit Fotografie oder Bildbearbeitung gearbeitet haben, Sie möglicherweise bereits mit dem Hex-Code vertraut. Aber im Grunde ist hex Akkord ein Farbcode , der mit einem Hashtag beginnt und dann von Sex gefolgt wird. Ebenen sind Zahlen. Die ersten beiden Schichten sind Zahlen beziehen sich auf lesen, die nächsten beiden beziehen sich auf grün und die letzte auf das Spiel bezeichnet. Es ist im Grunde eine Darstellung einer RGB-Farbe. Zum Beispiel. Hashtag gefolgt von Sex Auszahlungen ist weiß, oder Hashtag gefolgt von sechs Nullen ist schwarz. Hex-Codes sind großartig, weil es Ihnen erlaubt, eine Farbe zu wählen, zum Beispiel, ein Photoshop-Bild oder ein Akkord mit jemand anderen Ihnen möglicherweise bereits gegeben haben, basierend auf einem Markt und Material, das Sie gegeben haben. Und fügen Sie es sofort als Farbe zum Hintergrund Ihrer Website hinzu. Wenn du keinen Hex-Code kennst, fürchte dich nicht. Devtools gibt uns einen wirklich schönen Farbwähler. Wenn wir auf die Farbe neben dem Hex-Code klicken, sehen Sie einen Farbwähler kommt auf hier. Wir können eine Farbe über Beleuchtung wählen. Oder wir klicken einfach auf die Pipette bis und klicken auf einen Bereich auf unserem Bild. Sie werden sehen, dass dies eine Farbe mit einem Hexadezimalcode für diese Farbe basierend auf dem Bereich, den ich im Bild ausgewählt habe, zugewiesen wird. Alles, was wir tun, damit diese Änderungen wirksam werden, ist, den echten Safe zu kopieren. Gehen Sie zurück zu unserem Code-Editor, PSTN, dem echten Set. Und schauen Sie, ob, wenn wir wieder auf unsere Übungswebsite zurückkehren, Sie sehen, dass diese Änderungen wirksam sind. Wir können auch Farbe auf Text anwenden. Wenn ich also einen Blick auf das Header-Element , werden Sie zuerst sehen, dass wir bereits einen Rollensatz definiert haben. Also werde ich das einfach hinzufügen. Ich muss kein neues erstellen. Und ich werde zum Farbband gehen. Wieder. Devtools bietet Ihnen eine Reihe von Optionen, aus denen Sie wählen können. Aber ich kenne den Hex-Code für Gewicht, das Hashtag ist, gefolgt von sechs Fs. Also werde ich auf Band Hashtag und Sex Fs. Sie können sehen, dass dies gespiegelt sind Überschriften. Spaßige Art? Nein, da diese Regel besagt, dass bereits in unserem CSS-Dokument definiert ist. Ich muss nicht den gesamten Regelsatz kopieren. Ich muss nur den Farbteil kopieren, das CSS, das wir gerade hinzugefügt haben. Ich gehe in meinen Code-Editor. Ich werde dieses Ende einfach dem Regelsatz hinzufügen , der bereits für die Überschrift definiert ist. Und ich werde sehen, ob das Dokument ändert kein Tag einen Effekt. Ich werde auch die Schriftfarbe für unseren Link ändern. Also werde ich überprüfen oder ein Link-Element oder klicken Sie einfach auf das a-Tag. Dann sind wir DevTools. Ich werde einen neuen Regelsatz hinzufügen, da wir noch nicht 14 haben. Und ich werde die Farbe wieder weiß machen. Ich möchte diesen Link auch etwas mutiger machen, um hervorzuheben. Also werde ich Schriftart hinzufügen wir es, und Band fett. Sie können nun sehen, dass dieser Link fett dargestellt ist. Und wir werden unser Regelset nochmal und unseren Schreibtisch auf unser Stylesheet kopieren . Wieder, Sparen. Das sieht toll aus. Das Letzte, was ich tun will, ist, dass alles in der Minute weiterleitet, alles ist ziemlich abseits der Mitte. Um das zu tun, werde ich unser Körper-Tag auswählen, das alles und unsere Website ist. Und ich werde SMS nehmen, Elaine. Nein, Sie können links Mitte Array wählen, aber alles dezentralisieren und wollen Band zentrieren. Sie können sehen, dass jetzt alles auf unserer Website zentriert ist. Wieder, denn da wir alle bereits eingestellt sind, werde ich einfach das CSS kopieren, das ich gerade geklebt habe. Gehen Sie zu unserem Code-Editor und fügen Sie es in unseren Körper. Wirklich traurig, wenn ich davon sehe und auf unsere Übungswebsite zurückgehe, können Sie sehen, dass diese Änderungen nun wirksam sind. 9. CSS-Selektoren und Kurse: Gemeinsam am meisten Tag von CSS müssen wir jetzt einen Blick auf, was CSS-Selektoren sind und warum sie wichtig sind, wenn es darum geht, Ihre Website zu stylen. Und unsere Übungswebseite. Tun wir so, als ob wir zwei Absätze wollen, aber wir wollen nur, dass der erste weiß ist. Wir wollen, dass der zweite schwarz ist wie ein momentan als. Gehen wir also zu unserem Code-Editor und fügen wir einen zweiten Absatz hinzu. Um das zu tun. Es ist wirklich einfach. Ich werde nur das Absatz-Tag, den Inhalt innerhalb des Absatz-Tags und das schließende Absatz-Tag kopieren und durchbohren . Und ich werde es einfach unten einfügen. Sie werden also wissen, dass wir zwei Absätze haben. erste hier und das zweite Absatzelement darunter. Ich werde einfach den ersten Absatz und den zweiten Absatz eingeben, nur damit wir die beiden leicht sehen können. Wenn wir einen Blick auf unsere Übungsseite werfen, werde ich dies nicht sehen und unsere Übungsseite aufrufen und aktualisieren. So können Sie sehen, wir haben jetzt unsere zwei Absätze Element, aber beide sind schwarz gestylt. Also, wenn ich in das Stylesheet gehe, gut unser Absatzelement und ändern Sie die Farbe in Weiß, das Hashtag gefolgt von Sex AF ist. Und speichern Sie es. Wenn ich unsere Übungsseite aktualisiere, können Sie sehen, dass beide oder ein Absatzelement Gewicht formatiert wurde. Wenn wir sie untersuchen, werden Sie sehen, dass der erste Absatz die Farbe Weiß hat, aber auch der zweite Absatz. Warum ist das? Und wie können wir uns faxen, um zu verstehen, warum das passiert? Wir müssen wissen, über CSS Selektoren derzeit und unser Stylesheet, jeder Regelsatz, den wir erstellt haben, hat das Element CSS Selektor verwendet, p, H1, Bild, Körper a. Dies sind alle Elemente CSS Selektoren. Woher wissen wir das? Wir wissen dies, weil es keinen Punkt oder Punkt vor dem Elementnamen gibt. Ein Element-Selektor macht die Änderungen an allen Elementen wird dann eine Webseite. Wenn wir zum Beispiel Elemente wie HDR verwenden, zahlen jedes Absatzelement, werden wir dann die Website haben, dass CSS auf sie angewendet. Also auf unserer Übungswebsite, wo wir zwei Absätze haben, gilt der Element-Selektor p und CSS für alle Absatzelemente, einschließlich der zwei par Gas, die wir auf der Website haben. Und mehr, wir könnten hinzufügen, indem wir einen CSS-Selektor eines Elements verwenden, gibt uns keine spezifische Kontrolle über HTML-Elemente mit den gleichen Tags. Aus diesem Grund müssen wir Klassen verwenden. Klassen ermöglichen es uns, spezifische CSS-Styling bestimmten HTML-Tags zuzuweisen. Lassen Sie mich Sie durch, wie Sie dies tun, während Sie gleichzeitig erklären, MC SAS, definieren wir eine Klasse, indem Sie einen Punkt oder einen Punkt vor dem Namen des CSS-Selektors verwenden. Und dann definieren wir diesen Klassennamen als Attribut innerhalb des HTML-Elements. Um das zu verstehen, lassen Sie mich Ihnen erklären, wie Sie es einrichten können. Und ich denke, es wird viel mehr Sinn machen, wenn Sie eine Aktion sehen. Das erste, was wir tun wollen, wenn wir unseren Code-Editor betrachten, ist eine Klasse zu unserem zweiten Absatzelement hinzuzufügen. Keine Klassen und Attribute. Also fügen wir es mit inneren öffnenden HTML-Tag hinzu. Also werde ich eine Spears hinzufügen und ich werde Klasse gleich und m von n zu Sprachzeichen schreiben . Ich werde eine Klasse namens weißen Absatz hinzufügen. Ich gehe dann zu unserem Stylesheet und ich werde einen neuen Regelsatz hinzufügen. Diesmal. Ich werde einen Punkt oder einen Punkt vor dem Klassennamen hinzufügen. Also werde ich Punkt und dann weißen Absatz innerhalb unserer geschweiften Klammern schreiben und wollte Farbe nehmen. Und ich werde Hashtag und Sex AF hinzufügen, dem wir wissen, dass der Hex-Code für Weiß ist. Das letzte, was ich tun möchte, ist, die weiße Farbe zu entfernen , die wir dem Absatzelement oben in unserem Stylesheet hinzugefügt haben , ist, dass dies derzeit alle Absatzelemente weiß machen würde , wenn wir nur wollen, dass der zweite Absatz weiß ist. Also werde ich das einfach entfernen. Lassen Sie mich also kurz noch einmal erklären, wie das funktioniert. Also hoffentlich ist es in Ihrer Hauptsache klar, wir haben eine Klasse zu unserem öffnenden HTML-Tag für unseren zweiten Absatz hinzugefügt. Der Klassenname als weißer Absatz. Nein, wir brauchen keinen Punkt oder Punkt vor dem Klassennamen. Wenn wir es in unser HTML-Tag hinzufügen, schreiben wir einfach Klasse gleich und bewegen uns dann in Sprachzeichen oder ClassName, die wir als alles definieren können, was wir wollen. Aber in diesem Fall haben wir es weißer Absatz genannt. Dann haben wir auf unserem Stylesheet neue Regeln hinzugefügt. Sie sind schädlich, sagt verzögert von einem Element CSS-Selektor, weil wir einen Klassen-CSS-Selektor verwenden. Also haben wir einen Punkt oder einen Punkt gefolgt von einem ClassName und SKS hinzugefügt, Es ist weißer Absatz , der direkt auf unsere HTML-Klasse Gewicht Absatz verlinkt und sich in der realen Menge bewegen, wir haben gerade zusammengebaute Farbänderung hinzugefügt, um den Text weiß zu machen. Sagen wir c des Stylesheets. Und sehen Sie auch, ob die index.html. Gut, unsere Übungsseite und aktualisieren. Jetzt können Sie sehen, unser erster Absatz ist schwarz und unser zweiter Absatz ist weiß. Wenn wir einen Blick auf diese Elemente innerhalb von DevTools, können Sie sehen, dass der erste Absatz zieht aus dem p CSS Selektor-Element. Und wenn wir einen Blick in unseren zweiten Absatz mit dem Klassennamen weißen Absatz werfen, können Sie sehen, dass es die Gewichtsabsatz Regeln sagen, an denen wir für diese Klasse erstellt, können Sie so viele Klassen erstellen, wie Sie wollen mit welchem Namen Sie wollen. Und Sie können auch mehrere HTML-Elemente haben, verwenden Sie die gleiche Klasse. Sie müssen nicht einmal die gleichen sein. Lassen Sie mich Ihnen dies als Beispiel zeigen. Lassen Sie uns einen Überschriftengebläse zweiten Absatz hinzufügen. Lassen Sie uns eine H2-Überschrift hinzufügen. Und ich werde das als weiße Überschrift schreiben, gefolgt von einem schließenden Tag. Wenn wir dies sehen und laden Sie unsere Übungswebsite und aktualisieren, werden Sie sehen, dass dies nicht ein Weg, wie Sie in der Tat schwarz Überschrift. Um dies weiß zu machen, gehen wir zurück zu unserem Code-Editor. Fügen wir noch einmal eine Klasse hinzu. Und lassen Sie uns die Gewichtsabsatzklasse verwenden, die wir bereits erstellt haben. Um dies innerhalb des öffnenden HTML-Tags zu tun, wieder, geben Sie Klasse gleich ein und bewegen Sie sich dann in Sprachzeichen nur hey, warten Absatz. Das Gleiche wie die zweite Absatzklasse, die wir bereits erstellt haben. Mal sehen, ob das zurück zu unserer Übungswebsite gehen und aktualisieren. Sie werden sehen, dass die Überschrift Nye White ist. Wenn wir dieses Element inspizieren. Und Sie können sehen, ist ziehen von der CMB weißen Absatz Regel, Sam, wir haben bereits erstellt. Also, jetzt hoffentlich können Sie das Par der Verwendung von CSS-Klassenselektoren sehen. Wir können Regelsätze erstellen, die wir dann auf mehrere HTML-Elemente anwenden können, so dass wir eine Website wirklich schnell gestalten können, aber auch geben uns viel mehr Kontrolle über bestimmte HTML-Elemente, die wir stylen möchten. 10. Typografie in CSS: Werfen wir nun einen Blick auf die Topographie. Wir wollen einen schönen Spaß auf dieser Übungswebsite haben, um es wirklich stehen ein. Also lassen Sie uns einen Blick darauf werfen, wie wir hinzufügen und ändern Schriftarten wird dann CSS. Das erste, was wir tun müssen, ist, einen Spaß zu importieren , den wir verwenden können, um dies zu tun. Zuerst müssen wir einen Fonds finden, der uns wirklich unkompliziert macht. Ich werde Ihnen zeigen, wie Sie Webfonts von Google importieren und verwenden. Gehen Sie zu fonts dot google.com. Und hier werden Sie Tausende von Fonds sehen, die wir verwenden können. Wir wählen nur einen Fonds aus, den wir mögen. Zum Beispiel, Oswald, wo Sie wählen können, wo Sie eine Rückerstattung. In diesem Beispiel werden wir nach unten scrollen und wählen, wählen Sie ihren Stil. Und wir hatten einen leichten, regelmäßigen und mutigen Spaß gewonnen . Also werde ich nur das Licht aus einem regelmäßigen Spaß und einer mutigen Farm wählen , so dass wir alle Schlaggewichte mit MRSA abdecken können. Und das VRE Fenster öffnet sich nicht automatisch auf die Rate. Gehen Sie zum oberen Strahl und klicken Sie auf diese Schaltfläche hier, die Ihre Website und Familien anzeigen sagt. Und Sie werden sehen, dass sich dieses Fenster öffnet. Das erste, was wir tun müssen, ist Desk-Web-Spaß in unsere Website zu importieren. Wir wählen und kopieren einfach den gesamten Text in diesem ersten Feld. Wir gehen zu unserem Code-Editor und im Kopfgebläse-Stylesheet haben wir durchbohrt. Wir werden c davon wissen. Und gehen Sie zurück zu Google Fonts. Und wir werden CSS Brill in die zweite Box kopieren. Zurück zu unserem Code-Editor. Und innerhalb des Body-Roll SAM, das alle CSS-Regeln auf die gesamte Seite anwendet. Wir schaffen eine neue Spur und durchbohrt. Was macht das? Die CSS-Regel, die wir soeben hinzugefügt haben, um anzugeben, dass die Schriftfamilie, die wir für die gesamte Übungsseite verwenden möchten, der Oswald-Spaß ist. Und da wir den Oswald-Spaß in den Kopf unserer Website importiert haben, steht er zur Verfügung. Also werde ich sehen, ob das Stylesheet und sehen, ob die index.html. Und jetzt, wenn ich auf unsere Übungswebsite zurückgehe und aktualisiere, können Sie sehen, dass die gesamte Website den Oswald-Spaß nutzt. Das sieht toll aus. Aber was, wenn wir mehr als einen Spaß nutzen wollen? Nehmen wir an, wir wollen, dass die Absätze einen anderen Spaß haben als der Rest der Website. Gehen wir zurück zu Google-Fonds und entfernen Sie alle aus unserer ausgewählten Familie. Und gehen Sie zurück auf die Homepage. Lasst uns eine Schriftart für Absätze packen. Ich möchte, dass es anders ist als das, was wir gerade gepackt haben. Also Omega, guter Kontrast. Aber wieder, Sie können wählen, wo Spaß Sie am besten mögen. Ich werde mich für Labster entscheiden. Labster hat nur eine Schriftart. Wir sind so, wir werden nur wählen Regular, wählen Sie ihren Stil. Klicken Sie erneut auf die Schaltfläche oben rechts, um einige ausgewählte Familien auszuwählen. Und nochmal, wir brauchen eine Kopie. Die Tags in der ersten Box, die TM schlecht Waise ist, gehen Sie zu unserem Code-Editor und biloba den Code zur Verfügung gestellt, um den ersten Spaß zu importieren. Ich füge die zweite hinzu. Und ich werde sehen, ob ich zurück auf die Google Fonds Webseite gehe, werde ich die CSS-Regel für die Hummer Spaßfamilie auswählen und kopieren. Und ich gehe zu unserem Stylesheet. Jetzt wollen wir, dass der zweite Spaß auf die Absätze gelten nur dann unsere Übungsseite. Also werde ich zum p-Element gehen. Und der Grund, warum ich das p-Element wähle oder nicht, die weiße Absatzklasse, die wir erstellt haben, ist, weil die Gewichtsabsatz Klasse, wenn Sie sich erinnern, nur für den zweiten Absatz gilt. Und ich möchte, dass diese Schriftart auf beide Absätze angewendet wird. Also werde ich das Element verwenden, das für alle Absatzelemente gilt und wann eine neue Spur innerhalb der Regeln dort erstellt wird. Und Peer Stan, die font-family Deklaration nicht gibt an, dass alle p Elemente die Lobster Schriftfamilie und den Rest des Körpers für die Verwendung der Oswald Schriftfamilie verwenden. Und wollen sehen, ob das Stylesheet, stellen Sie sicher, dass index.html auch gespeichert ist. Wechseln Sie zurück zur Übungsseite, und aktualisieren Sie sie. Sie können die Überschriften sehen und alle unsere Elemente sind dort in den Absätzen. Nutzen Sie den ersten Fonds, den wir gepackt haben, der Oswald war. Sie können dies sehen, indem Sie zu den Elementen in DevTools gehen. Sie können H1 Meter und Oswald sehen. H2 verwendet Oswald. Sogar der Age ref Link verwendet Oswald. Aber Sie können sehen, dass die Absatzelemente Labster verwenden. Und wieder können Sie die Schriftart verwenden, die Sie von Google mögen. Ich benutze diese nur als eine schnelle Illustration, wie Sie Typografie verwenden und einfach und Portierung von Google-Fonds innerhalb Ihrer Website, um sie viel professioneller aussehen zu lassen. 11. Bootstrap: Für fast bereit, das mittlere Website-Projekt zu starten. Das letzte, was wir als Bootstrap lernen müssen. Was ist Bootstrap? Bootstrap ist im Grunde eine Sammlung von praktischen wiederverwendbaren Bits von Code und CSS und HTML. Und es ist die beliebteste HTML- und CSS-Bibliothek und die Welt. In der Tat, zum Zeitpunkt der Bettelung dieses Kurses, über 18 Millionen Websites verwenden Bootstrap. Es gibt viele Gründe, Bootstrap zu nutzen. Dazu gehören Zeitersparnis. Es ist einfach zu bedienen, es ist anpassbar. Es hilft Ihnen, konsistente und professionell aussehende Websites. Aber der Hauptgrund und der Grund, warum ich es Ihnen in diesem Kurs zeigen werde , ist, dass es ein fantastisches Grad-System hat , mit dem Sie Ihre Website leicht auslegen können. Und vielleicht noch wichtiger, können Sie Ihre Website mobil reagieren mit AI, viel Arbeit, Sie können mehr über Bootstrap lesen Sie es, getbootstrap.com. Aber ich werde Ihnen beibringen, wie Sie es in Ihre Webseite aufnehmen und wie Sie das Grid-System verwenden, wenn Sie auf Ihrer Website legen. Also das erste, was wir tun müssen, ist Falle in unsere Website aufzunehmen. Es ist im Grunde eine CSS-Datei. Gehen Sie also zu dem Übungspaket, das wir von einer außerhalb des Übungsordners gearbeitet haben, sehen Sie einen Ordner namens benötigt für Übung, bewiesen, dass es einen Ordner namens Bootstrap gibt , den ich möchte, dass Sie kopieren. Gehen Sie zurück zu unserem Übungsordner. Und durchbohrt wissen, dass wir Todesfälle in unser index.html Dokument aufnehmen müssen. Um das zu tun, gehen Sie zu unserem Code-Editor. Und unten, wo wir unser Stylesheet enthalten haben. Ich werde einfach diese Zeile kopieren, eine neue Spur erstellen und PS2 zu CLS tippen die ganze Zeile. Und wir wollen den Inhalt von H ref entfernen. Und jetzt müssen wir den Pfad für Bootstrap-Datei hinzufügen. Wenn wir uns unseren Übungsordner ansehen, können wir sehen, dass es einen Bootstrap-Ordner gibt. Und in Bootstrap gibt es eine bootstrap.css Datei. Also wieder, indem Sie annehmen, dass Sie Anweisungen zu index.html und Höhe erhalten. Auch hier müssten wir unbedingt in den Bootstrap-Ordner gehen. Also werde ich Bootstrap Schrägstrich nehmen, und dann ist der Dateiname bootstrap.css. Also werde ich diesen Strap Dot CSS nehmen und sehen ob Sie keinen Bootstrap in Ihrer Übungswebsite enthalten haben. Also, woher wissen wir, dass die Verwendung von Strap fehlschlägt, die gerade enthalten haben und was ist der Bootstrap fehlschlagen? Wir haben gerade die bootstrap.css Datei, die wir gerade in unsere Übungswebsite hinzugefügt haben, ist im Grunde eine große Liste von vordefinierten CSS-Regelsätzen, die wir verwenden können, wenn wir unsere Website erstellen. Um es zu verwenden, müssen wir CSS-Klassen verwenden. Setzt Link bis zu der Datei bootstrap.css mit gerade enthalten. Also lasst uns das Layout unserer Übungsweben ALLE Fledermaus ändern, damit ich Ihnen zeigen kann, Hey, das funktioniert. Mit Blick auf unsere Übungswebsite möchte ich einen dritten Absatz von 12 bis drei Absätze hinzufügen, um in derselben Zeile zu sein. Neben einander. Das erste, was wir in unserem Code-Editor tun müssen, ist, einen dritten Absatz hinzuzufügen. Also werde ich nur eines der Absatzelemente kopieren , die wir auf unserer Übungswebsite hinzugefügt haben. Und ich gehe zu Gleichaltrigen, um das Element des zweiten Absatzes zu sprengen. Ich möchte nur, dass das Metallabsatzelement weiß ist. Also werde ich die Klasse für das dritte Absatzelement entfernen. Wir haben gerade dieses schöne C von S. hinzugefügt und werfen Sie einen Blick auf unsere Übungswebsite. Sie können sehen, unsere Website sieht jetzt so aus. Das sieht sehr kaputt aus. Also, was haben wir falsch gemacht? Gehen wir zurück zu unserem Code-Editor und scrollen Sie nach oben , wo wir das Bootstrap CSS enthalten haben. Was passiert ist, weil die bootstrap.css unter unserem Stylesheet ist. Das bedeutet, dass Begriffe kodiert werden. Alle Stile, die von bootstrap.css kommen überschreiben die Stile, die wir hinzugefügt haben, und unser Stylesheet dot CSS. Wenn wir also einen Blick auf unsere Übungswebsite werfen und einen Blick auf den Körper werfen, können Sie sehen, dass die Hintergrundfarbe, die wir in unserem Stylesheet hinzugefügt haben, CSS von der Hintergrundfarbe überschrieben wird , die von der bootstrap.css hinzugefügt wurde. Es ist also sehr wichtig. Die bootstrap.css geht über unser Stylesheet dot css und den Header. es deutlich zu machen, ist der Grund dafür, dass der niedrigste Endport in Stylesheets oder CSS-Datei immer die darüber überschreibt. Also, es sei denn, KS, jetzt, wo wir sie ausgetauscht haben, werden bootstrap.css Regelsätze durch alle Stylesheets oder CSS-Regelsätze überschrieben , die wir hinzugefügt haben. Also werde ich das speichern, gehen Sie zurück zu unserer Übungsseite und aktualisieren. Sie können nun sehen, dass die Regelsätze, die wir in unserem Stylesheet dot css hinzugefügt haben, erneut angewendet wurden. Also haben wir jetzt drei Absätze Element. Aber ich will, dass sie nebeneinander und eine Reihe sind. Um dies zu tun, werden wir das Bootstrap-Grid-System verwenden. Das Bootstrap Grid System verwendet Zeilen und wir haben n m Zeilen, Spalten. Sie können 12 Spalten innerhalb einer Zeile haben, und dann kann eine einzelne Spalte beliebig viele dieser Spalten aufnehmen. Zum Beispiel könnten Sie zwei Spalten mit Sex haben. Du könntest drei oder vier Spalten haben. Du könntest vier Spalten zu drei haben. Oder Sie könnten eine Spalte von 71 haben, Spalte mit fünf. Sie könnten drei Spalten zu Ihrem 5 und 1 von 2 haben. Und wie Sie sehen können, gibt dies Ihnen unbegrenzte Kontrolle über Spaltenbahnen mit Anna Zeile. Also lassen Sie uns das in die Praxis umsetzen. Ich werde den Code-Editor aufrufen und eine Zeile hinzufügen. Alle drei Absätze befinden sich gut in dieser Zeile. Also oberhalb des ersten Absatzes. Und wir werden dev iterieren, das ein generisches HTML-Element ist. Und ich werde Klasse gleich Zeile schreiben. Also haben wir ein HTML div Element, das wiederum ein generisches HTML-Element ist. Und darin habe ich ein Klassenattribut, das ich von Rennen und Klasse gleich hinzugefügt habe. Und innerhalb der Sprechzeichen habe ich Zeile hinzugefügt. Wir müssen dieses Tag schließen. Aber weil wir die drei Absätze darin wollen. Und wir gehen bis unter den dritten Absatz Abschluss-Tag. Und ich werde das div-Tag schließen, um die Dinge in unserem Code-Editor gut aussehen zu lassen. Was ich tun werde, ist nicht nur die Absatzelemente nach rechts erlauben. Dies hat keine Auswirkungen auf unsere eigentliche Webseite, aber es wirkt sich darauf aus, wie die Dinge im Code-Editor angeordnet sind und macht es leicht zu verstehen, wo Elemente in anderen sind. Um dies zu tun, werde ich nur alle unsere Absatzelemente auswählen. Und ich werde Tabulatortaste auf meiner Tastatur drücken. Sie können sehen, es gibt keine macht die Dinge leichter aus dem Code-Editor zu verstehen ist Sicht. Visuell können Sie sehen, dass sich drei Absatzelemente in einer Zeile befinden, dev. Also werde ich nicht sehen, ob dies und laden Sie unsere Übungsseite und aktualisieren. Und Sie können sehen, dass sich nichts wirklich verändert hat. Das liegt daran, dass wir nur diese drei Absatzelemente in Ihre Zeile einfügen. Wir müssen wissen, dass ich sie in Spalten einfüge. Also möchte ich drei gleichmäßige Spalten innerhalb dieser Zeile. Und weil Bootstrap eine maximale Zeilenspaltenbreite von 12 hat, bedeutet das, dass jede Absatzspalte vier Spalten nass sein muss. Also, wie machen wir das? Gehen wir zurück zu unserem Code-Editor. Und über unserem ersten Absatz werde ich einen neuen Dev hinzufügen, der, wie Sie sich als generisches HTML-Element erinnern, werde ich eine Klasse hinzufügen, die Sprachzeichen entspricht. Und verhindern Sie das. Ich werde die CLL für Spalte Strich vier für ein Spaltennetz von vier bewerten. Und ich werde das öffnende HTML-Tag beenden. Jetzt wollen wir nur, dass unser erster Absatz eine erste Spalte ist. Also unterhalb des schließenden p-Tags für unser erstes Absatzelement. Und als ich eine Lahm hatte und ich werde das div-Tag schließen. Auch hier, um Dinge zu behalten, die in unserem Code-Editor schön sind, werde ich den gesamten ersten Absatz auswählen und Tab drücken. Also wieder, mega visuell offensichtlich, dass das Absatzelement die Dev-Klassenspalte gewebt ist. Also haben wir jetzt unser erstes Absatzelement in eine Spalte von vier hinzugefügt. Wir brauchen sind die zweiten, dritten Absätze und tun ihre eigenen Spalten. Um dies schnell zu machen, müssen Sie nur die Dev-Klassenspalte für HTML-Tag auswählen und kopieren , die Sie gerade hinzugefügt haben. Und fügen Sie dies über dem zweiten Absatz hinzu, indem Sie eine neue Zeile auf PSTN erstellen. Sie dann gleich nach dem schließenden p-Tag für den zweiten Absatz SchließenSie dann gleich nach dem schließenden p-Tag für den zweiten Absatzdiese div-Tags. Auch hier werde ich das gesamte Absatzelement auswählen und die Tabulatortaste auf meiner Tastatur drücken. Und schließlich, oberhalb des dritten Absatzes, erstellen Sie eine neue Spur und ein bestimmtes PS, die Entwicklerklassenspalte für Element. Und wieder, gleich nach dem schließenden p-Tag, werde ich dieses div-Tag schließen. Und wieder werde ich den gesamten dritten Absatz auswählen und TAB auf meiner Tastatur drücken. Wieder, nur um es klar zu machen, wenn ich ein Element im Code-Editor ändert sich nicht seinen Besitz oder das Layout auf der tatsächlichen Webseite. Assembly zur visuellen Referenz innerhalb des Code-Editors. Wie Sie sehen können, macht es leicht zu sehen. Wir haben drei Säulen. Wir haben ein div mit einer Klasse von Spalte vier, mit einem Absatz innen. Wir haben ein zweites div mit einer Klasse von Spalte für vor weißen Absatz innen. Und wir haben ein drittes div mit einer Klasse von Spalte für den ersten dritten Absatz im Inneren. Ich werde nicht sehen, ob dies auf unsere Übungsseite zurückgeht und aktualisiert wird. Sie können sehen, dass wir eine Reihe haben, und innerhalb dieser Zeile haben wir drei Spaltenfelder mit gleichen Kraut. Und da drin haben wir unsere Absätze. Wenn wir einen Blick auf Dev-Tools werfen, nur um dies weiter zu verstehen, können Sie sehen, dass wir unsere div-Klassenreihe haben. Wenn ich dies öffne, indem Sie auf den Pfeil nach links klicken, können Sie mit Anna Zeile sehen, wir haben drei Spalten mit gleicher Breite. Und in jeder Spalte haben wir unsere Absatzelemente. Wie bereits erwähnt, ist die maximale Breite einer Zeile 12. So können wir einen Spieler haben und Spears diese anders, wenn wir wollen, solange wir innerhalb der maximalen Spalte bleiben, wohingegen von 12. So können wir zum Beispiel die ersten beiden Absätze sehr klein sein, so dass nur zwei Spalten Brot. Und unser letzter Absatz ist wirklich groß von IoT-Säulen mit ihm. Plus zwei, plus zwei ist 12. Das ist also unser maximales echtes Web. Ich werde es retten. Und wenn ich die Seite aktualisiere, können Sie sehen, dass wir jetzt zwei kleine Absätze haben, und der dritte ist sehr groß. Sie können auch S verhindern DevTools ändern, um eine schnelle und einfache visuelle Darstellung zu erhalten, wie dies aussehen würde, indem Sie einfach mit n oder einer Zeilenklasse gehen und die Dev-Klassen so ändern , dass sie unterschiedliche Spaltenwebs haben. So könnte ich zum Beispiel das 1, 4 machen, ich könnte das Metall 13 machen, und ich könnte das letzte machen, 5. Wenn Sie mehr Spalten als 12 einschließen, was ich hier NIH tun kann, indem Sie diese neun zum Beispiel machen , können Sie sehen, dass es die Zeile bricht. Sie müssen sicherstellen, dass alle Spalten innerhalb der Zeile bis zu 12 summieren. Um dies zu tun, würde ich diese Spalte zurück auf fünf ändern. Sie können nur eine Spalte innerhalb einer Zeile und ein Maximum von 12 haben. Bootstrap kommt mit vielen anderen Dingen, die Sie einfach verwenden können, indem Sie CSS-Klassen verwenden, wie Buttons, Karten, Drop-Downs, Formulare, sogar Navigationen. Aber für diesen Kurs werden wir Assembly nutzen das Grid-System zu machen, da es eine wirklich leistungsfähige Möglichkeit ist, mobile responsive Website zu sammeln, die sich später in diesem Kurs berühren wird. Schnell zusammen. 12. Was wir erstellen: Also, bevor wir einen Code schreiben, Werfen wir einen Blick auf die Website, die wir erstellen werden. Für diesen Kurs erstelle ich ein lustiges Szenario, in dem wir ein Geschäft auf der Welt haben , das ausschließlich von Hunden geführt wird. Und sie sind zu uns gekommen, um ihre erste Website zu erstellen. Es ist ein bisschen Spaß und Sally Szenario, aber es gibt uns eine kreative Richtung zu gehen. Werfen wir einen Blick auf die Website, die wir für sie erstellen werden. Der erste Abschnitt, den Sie auf der Website sehen, ist die Navigation. Und das enthält ein paar Links, die es uns ermöglichen, auf der Webseite zu navigieren. Also zum Beispiel, wenn ich dort Bi-Sektion klicke, es führt uns dorthin nach Bereich der Website. Oder wenn ich auf den Abschnitt „Kontaktieren Sie uns“ klicke, gelangen Sie zum Abschnitt „Kontaktieren Sie uns“ auf der Website. Dies wird unsere Navigation sein. Der nächste Abschnitt, den wir auf der Website haben, ist der Reduktionsbereich. Dies ist ein großer Fettabschnitt, enthält viel Farbe. Sieht wirklich schön aus, hat ein Bettlerbild, hat eine Tasche Überschrift, und hat eine kleine Menge von Absatz-Tags, die im Grunde beschreibt unsere ENT reduziert das Geschäft auf die Viewer-Office-Website, sagt, wird der Einführungsbereich zu RSA sein. Der nächste Bereich der Website, die wir haben, ist der Abschnitt Über uns. Sie können sehen, dass es drei Spalten hat. Jede Spalte hat einen kleineren Hirnschaden, eine Überschrift und einen Absatz. Und jede Spalte ist im Grunde einige Informationen über einen Mitarbeiter aus als Geschäft. So können Sie sehen, ich habe Top-Hund der Hund sogar verwalten Sie Ihren Hund, sagt, wird es durch unseren Abschnitt der Website sein. Der nächste Abschnitt, den wir haben, ist der YR-Abschnitt auch sagen, und es tut genau das. Es beschreibt, warum jemand sollte als Business FDA Bewertung in der Website wählen, können Sie sehen, wir haben drei Reihen mit allen Ernie und durch Körner den Durst und dritte haben diese blauen lila Hintergrund. Und der mittlere hat einen grauen Balken genarbt. Beenden Sie jede Zeile haben wir eine Überschrift und einen Absatz und ein Bild. Und Sie können sehen, dass die Klappe Drain für die Metallreihe sagt, wird der y OS-Bereich der Website sein. Der nächste Abschnitt, dass eine wohl die wichtigste, weil es wirklich Beeinträchtigung der Menschen kann in Kontakt mit Ihrem Unternehmen. Der Abschnitt „Kontaktieren Sie uns“. Sie können auf der linken Seite sehen wir die E-Mail und auch die Adresse des Unternehmens. Und dann auf der rechten Seite haben wir zwei weitere Bilder. Dies wird der Abschnitt „Kontaktieren Sie uns“ auf der Website sein. Schließlich haben wir die Fußzeile. Das ist wirklich einfach und unkompliziert. Es enthält nur das Jahr, das offensichtlich 2021 im Moment der Magnus-Zwang ist, und den Namen des Unternehmens. Das ist also die Website und die ganze a, und das ist, was wir bei der Erstellung unserer ersten Website codieren und stylen werden. 13. Erstellen der Website – Navigation: Sie sind jetzt bereit, das gemeine Website-Projekt mit allem, was wir bisher gelernt haben und unsere Übung HTML-Datei zu programmieren das gemeine Website-Projekt mit , wir werden es alle zusammen ziehen und eine professionell aussehende Website erstellen. Um zu beginnen, müssen wir Diner Chordata löschen oder ein paar neue Dateien öffnen, um los zu gehen. Ich werde das Stylesheet für die Übungswebsite schließen. Und ich werde die index.html für unsere Übungswebsite schließen. Rufen Sie den Übungspaketordner auf, von dem ich gearbeitet habe, und gehen Sie eine Datei hoch. Nun dann dort sehen Sie unseren Website-Ordner. Klicken Sie auf das Ende des Website-Ordners. Und lassen Sie uns unsere index.html in unseren Code-Editor hinzufügen. Sie können sehen, wir beginnen mit, ich bete, leere, neue HTML-Datei. Sehr viel, um Ihn als unsere Übung HTML Datei zu sehen. Das erste, was wir tun müssen, ist ein Stylesheet. Aber bevor wir das tun, müssen wir es schaffen. Gehen Sie zurück zu unserem Website-Ordner, erstellen Sie einen neuen Ordner namens style. Erstellen Sie in diesem Ordner ein neues Textdokument, aber nennen Sie es Stylesheet dot css. Und wir wollen die Dateinamenerweiterung ändern. Also ja. Und wir haben jetzt eine Stylesheet-Punkt-CSS-Datei erstellt, die bekannt ist , dass innerhalb des Kopfes unseres HTML-Dokuments. Also werde ich Link REL für eine Beziehung gleich Stylesheet Band , weil es ein Stylesheet ist, H ref. Und innerhalb der Sprechzeichen müssen wir unseren Weg hinzufügen. Wenn Sie sich unsere Website Ordner ansehen, können Sie sehen, dass der Ordner Stil genannt wird. Und wir haben für den Versuch eingegeben, die Stylesheets oder CSS-Dokument zu laden. Also geben wir Stil für Forschung, Style Sheets oder CSS ein. Und wir werden die HTML-Zeile schließen. Lassen Sie uns wissen, dass. Wir möchten unser Stylesheet öffnen, damit wir Stile hinzufügen können, während wir entwickeln oder Website. der rechten Maustaste auf die Registerkarte index.html, gehen Sie zu Split Rate, öffnen Sie dann unsere Website Ordner und ziehen Sie unser Stylesheet und auf die rechte PM. Wir können dann unsere index.html Datei auf dem rechten Pin-Griff schließen. Wir haben unser Stylesheet aufgenommen und wir haben eine offene bereit, Styles hinzuzufügen. Als nächstes müssen wir Bootstrap einschließen. Denken Sie daran, dass die Datei bootstrap.css über unser Stylesheet und unser HTML-Dokument gehen muss , damit alle CSS-Regeln Rate haben und unser Stylesheet alle bereits vorhandenen Stile überschreiben, die mit Bootstrap geliefert werden . Also werde ich eine neue Ebene über dem Lamer hinzufügen. Wir haben unser Stylesheet enthalten. Ich werde diese Spur kopieren und Gleichaltrigen nach oben, nur um zu sehen, ob einige Zeit. Und ich werde unseren Website-Übungsordner öffnen. Wenn wir einen in unseren Website-Ordner gehen, können Sie sehen, dass wir keinen Bootstrap-Ordner enthalten haben. Also müssen wir wieder zum Paketordner gehen, in den für Übungsordner benötigten Ordner und den Bootstrap-Ordner kopieren. Gehen Sie zurück zum Website-Ordner. Und durchbohrt den Bootstrap-Ordner. Und in diesem Bootstrap-Ordner können Sie sehen, dass die Datei bootstrap.css enthalten ist. Also, Dad, da ist Träne index.html Dokument. Wir ändern den Pfad zu bootstrapped werden, Schrägstrich bootstrap.css und sehen, ob griot, wir sind jetzt bereit, in der Erstellung unserer Haupt-Website zu gehen, das erste, was wir tun wollen, ist eine Navigation an der Spitze ihrer Website hinzuzufügen. Also lasst uns das aufschreiben. Lassen Sie uns innerhalb der Body-Tags für HTML-Dokument gehen. Und lassen Sie uns erstellen, was man einen Kommentar nennt. Ein Kommentar ist Elaine wird dann Ihr Code-Editor , der nicht auf Ihrer Webseite gerendert wird. Einfacher Zweck ist es, Ihnen zu erlauben, Notizen zu Ihrem HTML-Dokument hinzuzufügen, die verwendet werden können, um Ihren Akkord zu erklären, was wirklich nützlich ist, wenn Sie zu einem HTML-Dokument, Allel oder D es zurückkommen , um Ihren Speicher zu aktualisieren. Um einen Kommentar zu schreiben, müssen Sie ein Ausrufezeichen, Bindestrich, Bindestrich schreiben. Sie können sehen, dass die Zeile jetzt in Ihrem Code-Editor grau wird. Und ich werde einfach wieder Navigation und in Hinweise. Ihre Kommentarrate, Bindestrich, Bindestrich. Größer als wahnsinnig. Sie können sehen, dass diese Zeile ausgegraut ist. Das bedeutet, dass das DES kein Kommentar ist und gut nicht auf Ihrer Webseite angezeigt werden kann. Und eine dünne hinzugefügt auf Linien unten. Nun nur Text zwischen den Bindestrichen angezeigt werden. Wohlbefinden commenter I, es gibt kein tag, eine neue spur und rate oder navigation HTML. Also wollen wir eine geordnete Liste, also ein UL-Tag. Ich werde das ungeordnete Listen-Tag schließen. Und dann brauchen wir in unserer ungeordneten Liste ein letztes Ich bin LI-Tag. Und lassen Sie uns darüber nachdenken, welche Elemente auf unserer Navigation sein werden. Wir werden nach Hause gehen. So können Sie auf die Homepage zurückkehren. Und ich werde das ALA HTML-Tag schließen. Ich werde eine neue Spur nehmen. Und wenn ich ein weiteres LI-Tag auf unserer Website hinzufüge, werden wir einen Bissbereich haben. Also werde ich ein Boot schreiben, das das LA-Tag enthält. Sie können dies beschleunigen, indem Sie einfach die ALA-Zeilen kopieren und einfügen. Also werde ich noch zwei hinzufügen. Ich werde einen Weg OS Abschnitt haben. Und wir werden einen Kontaktbereich haben. Sie können alles, was Sie wollen, in Ihrer Navigation haben. Aber ich denke, erstes Beispiel, diese werden perfekt funktionieren. Das und ich sehe davon. Und zum ersten Mal, Das ist bringen unsere HTML-Seite und unseren Browser. Heute, wo jemand in den Übungsordner geht, gehen Sie zum Website-Teil unseres Übungsordners und doppelklicken Sie auf unsere index.html. Sie können sehen, dass der hinzugefügte HTML-Code geladen wurde und heller ist. Wir werden DevTools öffnen. Wir brauchen sie nicht für NIH, aber lassen Sie uns sie einfach offen halten, da wir sie durch acht besten Entwicklungsprozess brauchen werden. Jetzt, wenn es darum geht, Websites zu entwerfen. Wirklich zwei Möglichkeiten, wie Sie es tun können. Sie können entweder alle Ihre HTML schreiben und einmal gehen und dann zurückkommen und schweigen, indem Sie Ihr CSS früheres Hirsch erhöhen. Oder Sie können Ihr HTML und CSS zusammen schreiben , während Sie durch die Entwicklung der Webseite gehen. Wir werden die Leiter für diesen Kurs verwenden, weil ich denke, dass es viel sinnvoller ist, jeden Abschnitt der Website azurblau zu skalieren , um Ihnen ein besseres Bild davon zu geben , wie die Seite zusammenkommt, während Sie sie entwickeln. Also lassen Sie uns Stil oder eine Navigation. In der Minute sieht es nichts wie eine Navigation aus, die wie eine Liste aussieht. Lassen Sie uns unser letztes in eine Navigation verwandeln. Gehen wir zurück zu unserer index.html Datei in unserem Code-Editor. Und lasst uns eine Klasse zu unserer ehrenvollen Explosion hinzufügen. Nennen wir es Navigation. Und C, um unsere Navigation zu betrachten, das erste, was wir tun müssen, ist es in die Mitte Angebotsseite zu bekommen. Das ist gut unser Code-Editor und gehen Sie zu unserem Stylesheet dot CSS. Wir können auch Kommentare innerhalb unserer Stylesheets oder CSS verwenden. Der einzige Unterschied ist die Art und Weise, wie Sie sie so leicht anders schreiben , wie Sie sie in einer HTML-Datei bewerten. Für CSS schreiben Sie einen Schrägstrich Sternchen, die der Anfang unseres Kommentars ist, und 1D-Array und Navigation. Und dann, um es zu schließen, urate Asterix vorwärts Schrägstrich. Also alle Tags zwischen den beiden Sternchen mir gemeinsam und werden nicht auf Ihrer Webseite gerendert. Dies ist wieder großartig, um Notizen über Ihren Code zu schreiben, was Ihnen hilft, Sinn zu machen. Biete FU an, komm früher zurück, Liebes. Lassen Sie uns eine neue Spur erstellen, die entweder ein Punkt oder ein Punkt ist. Und im Wort Navigation, das sich auf die Klassennavigation bezieht, erstellen wir es einfach für unsere ungeordnete Liste. Und wir sind Van oder geschweifte Klammern. Lassen Sie uns Text zentriert hinzufügen und sehen, ich bin zurück zu unserer Webseite gegangen. Sie können jetzt sehen, dass unsere Navigation zentralisiert ist. Die nächste Ausgabe, die wir brauchen, um geregnet zu werden, da wir jeden brauchen , damit ich nicht auf der gleichen Spur zu der eleganteren Navigation bin. Und es gibt so etwas wie eine letzte. Um das zu tun. Gehen wir zurück zu unserem Stylesheet und lassen Sie uns einen neuen Selektor erstellen. Und wann oder eine Periode oder Diät-Navigation für die Navigationsklasse. Und dann werde ich schreiben, ALI, warum habe ich das getan? also einen Blick auf unseren Stylesheet-Selektor werfen, können Sie sehen, dass Sie Selektoren gemeinsam starten können. Also durch die Verwendung von Punkt- oder Periodennavigation als Referenz und die Navigationsklasse in unserem HTML-Dokument. Aber dann haben wir einen Element-Selektor von ALA verwendet. Wenn Sie sich erinnern, hat der FS-Selektor keinen Punkt oder Punkt davor, es ist ein Element-Selektor und wirkt sich auf alle HTML-Elemente dieses Typs aus. Es gibt also einen LI-Selektor, der alle ALA-Elemente auf unserer Seite beeinflusst. Aber weil wir es nach der Klassenselektor-Navigation gesetzt haben, wirkt sich dies nur auf alle LI-Elemente mit n aus, die Klassennavigation. Also, was wird alle diese LI-Elemente mit n beeinflussen? Diese Klasse der Navigation, ermöglicht es mir, geschweifte Klammern hinzuzufügen, und lassen Sie uns Anzeige und ln Block hinzufügen. Denken Sie daran, als ich einige CSS-Eigenschaften sagte, müssen Sie nur lernen. Leider ist dies einer von ihnen. Also für jetzt, kleben Sie uns einfach ND oder Stylesheet dot css und speichern Sie es. Gehen Sie zurück zu unserer Übungsseite und aktualisieren Sie sie. Jetzt können Sie sehen, wir haben etwas, das mehr wie eine Navigation aussieht , da jeder letzte Tag m auf der gleichen Spur ist. Das einzige, was ist h letztes Element ist ein wenig zu nahe beieinander. Also zu Fakten, wie ich werde eine Marge auf der rechten Seite hinzufügen. Also werde ich auf LSTM-Element des Ereignisses DevTools klicken. Sie können unsere Navigation sehen, damit ich kein richtiges Set aus unserem Stylesheet zeigt. Also werde ich klicken, um eine neue Eigenschaft hinzuzufügen. Und ich werde Rand links wieder 15 Pixel. Sie können sehen, dass dies Speere sind. Diese Elemente sind schön wie die Erfahrung. Also werde ich nur diese Eigenschaft kopieren und Wert gut oder den Code-Editor und eine neue Ebene mit innerer Navigation erstellen, das ist Tag und PSTN und hatte C von 10. Ich werde aktualisieren oder Webseite. Schließlich ist unsere Navigation zu nah an der Spitze der Webseite. Ich muss es aufpolstern. Ich FA klicke auf das UL-Tag der Klassennavigation. Sie können sehen, dass wir bereits eine Deklaration aus unserem Stylesheet geladen haben. Also werde ich eine neue Spur erstellen und ich werde Padding bewerten. Oben. Polsterung funktionierte sehr ähnlich wie Ränder. Also werde ich eine Polsterung von 20 Pixeln hinzufügen. Wir haben mehr Elemente, Vergänglichkeit Seite, und wir wollen nicht, dass sie direkt nach oben gegen den unteren Rand ihrer Navigation geklemmt werden. Also werde ich auch Padding unten hinzufügen, und ich werde den Boden auch um 20 Pixel auffüllen. Sie können sehen, ob Sie den Mauszeiger über UL-Tag bewegen, das Lila zeigt die Polsterung. So können wir sehen, dass wir wissen, haben lila Polsterung von 20 Pixeln an der Spitze und lila Polsterung von 20 Pixeln am unteren Rand. Lassen Sie uns die beiden Padding Eigenschaften kopieren, die wir gerade erstellt haben. Gehen Sie zu unserem Code-Editor innerhalb der Navigation, erstellen Sie eine neue Spur. Und PSD Mann, ich werde nicht zu sehen, ob gehen Sie zurück auf unsere Seite und aktualisieren. Und das sieht toll aus. Wir haben die Anfänge unserer Webseite und in der Navigation und den Spielern. 14. Erstellen der Website – Einführung: Jetzt haben wir einen Navigationseditor oder eine Website. Wir möchten den nächsten Abschnitt hinzufügen, der unsere Website und Zeile ist. Gehen wir zu unserem Code-Editor und blau oder auf bestellt weniger Tag. Lassen Sie uns einen neuen Kommentar hinzufügen, der wiederum ein Ausrufezeichen weniger als Zeichen Bindestrich, Bindestrich ist. Und lass uns wieder Andrew, Freund Reduktion. Strich, Strich. Größer als zu sagen, dass Kommentar nein, lässt uns wissen, dass blies es auf einer neuen Spur. Wir werden R und Rho Abschnitt hinzufügen. Also das erste, was ich in unserem Intro-Sektion will, ist ein Bild. Also werde ich das Bild-Tag hinzufügen. Ich werde SRC für Quelle gleich eingeben. Und innerhalb des Kommas, wir jetzt eine Profilaufnahme oder ein beliebiges Bild, das Sie wollen. Am Ende des Abschnitts, wenn Sie sich den Übungsordner ansehen, werden Sie sehen, dass ich alle Bilder enthalten haben, die Sie mit einem Bilderordner für diese Webseite benötigen , wo Meghan in diesem Kurs. Sie müssen diese Bilder nicht verwenden. Sie können jedes Bild Sie ein verwenden, um die Dinge schön und einfach zu machen. Ich habe diese hinzugefügt, so dass Sie einfach die Bilder verwenden können, die ich verwende. Und es gibt fettigeren Weg, sagen Sie, als ob Sie Ihre eigenen Bilder verwenden möchten, ein empfehlen Sie, sie zu diesen Bildern Ordner hinzuzufügen, was nur das Hinzufügen der Pfade und zur Bildquelle viel einfacher macht und viel einfacher, zusammen mit dem Kurs zu folgen. Oder wie ich, wenn Sie nur diese Bilder verwenden wollen, machen Sie einfach genau das, was ich in diesem Kurs tue. Also hier habe ich ein Profil JPEG in den Bilderordner aufgenommen. Also unser Pfad wird Bilder für den Bilderordner sein, Schrägstrich Profil, JPEG. Um klar zu sein, ist der Name des Bildes innerhalb des Image-Ordners. Dann werde ich für Alt-Text gleich schreiben und in Sprachzeichen gehen. Ich werde nur Profil Schuss wieder. Und ich werde unser Image-Tag schließen. Ich will dann weitergehen. Also werde ich H1 für ein H1-Tag-Element schreiben. Und ich werde wieder, willkommen. Und ich werde H1-Tag schließen, einen Umschlag, den ich einen kurzen Absatz will. Also werde ich das Absatzelement lesen und ich werde wieder, wir sind das erste Geschäft der Welt. Und von Hunden. Denn wie Sie wissen, ist dies eine Website für eine Hundebasis Unternehmen, die in diesem Kurs erstellt wurden. Und dann werde ich das Absatz-Tag schließen. Da kein Meer davon und werfen Sie einen Blick auf entweder auf unserer Website verlinkt. Gehen Sie zurück auf unsere Webseite, und ich werde zu aktualisieren. So können Sie sehen, dass das Bild geladen ist. Wir haben unsere Überschrift Tag und wir haben unseren Absatz. Aber das sieht überhaupt nicht gut aus. Das nächste, was ich tun möchte, ist, einen Hintergrund für diesen Intro-Sektion hinzuzufügen. Wenn Sie sich also unseren Code und unseren Code-Editor ansehen, können Sie sehen, dass diese Elemente in der Minute nicht zusammen mit einem Tag oder einer Klasse gruppiert sind. Ich kann auch einen Hintergrund anwenden. Also werde ich eine neue Spur sowohl des Bildes erstellen. Und ich werde Abschnitt als HTML-Element schreiben. Sie könnten Dev auch hier verwenden, aber Abschnitt als semantisches HTML-Element. Abschnitt bedeutet, dass der Inhalt und sagen, dass es gegriffen wird oder wirklich sagt es einzelnes Thema, erhöhen Sie ein dev HTML-Element ist generischer , weil S ein Intro-Abschnitt unserer Website ist, immer m mit n, dieses HTML-Element, das wir schreiben, wie ergriffen werden und wie gehen wirklich einzelnen Thema zu bezeugen, die Endrew, dann macht es mehr Sinn, Abschnitt und SKS. Und ich werde eine Klasse hinzufügen. Und ich werde es farbigen Hintergrund nennen. Weil wir wollen, dass der unrollte Abschnitt einen farbigen Hintergrund hat. Ich werde dann unter das Absatzelement gehen, und ich werde das Abschnitt-Tag schließen. Auch hier, um die Dinge in unserem Code-Editor gut aussehen zu lassen, werde ich leicht H1 Überschrift Tag und den Absatz beschädigen und Tab drücken. Nur so können wir visuell in unserem Code-Editor sehen, dass diese Elemente , die van oder Abschnitt von farbigem Hintergrund waren. Ich werde jetzt sehen, ob dies, Ich werde auf unsere Webseite gehen und ich werde aktualisieren drücken. Sie können sehen, wenn Sie sich das HTML ansehen, dass unsere Abschnittsklasse farbigen Hintergrund die Bildüberschrift, Tag und Absatz mit Anna hat . Lassen Sie uns einen Hintergrund zu diesem Abschnitt hinzufügen und wir werden zum CSS pn von DevTools gehen. Klicken Sie auf Neue real hinzufügen. Und innerhalb dieser Regel sagte, dass es nur schaffen. Ich werde Hintergründe schreiben. Jetzt, anstatt nur eine Farbe zu verwenden, ist das Zeit, werde ich ein Bild verwenden, um dies zu tun. Sie möchten URL, Klammer und zwei Apostrophe schreiben . Wissen Sie, was N, diese Apostrophe, wir müssen den Weg zu unserem Bild hinzufügen. Werfen wir einen Blick auf unsere Übungsmappe. Und Sie können mit n die Bilder Ordner sehen, Ich habe einen schlechten Grad Schaden enthalten, feinkörnige Punkt PNG. Also müssen wir den Weg dafür durch Hirnschäden und zwischen den beiden Apostrophen hinzufügen. Es gibt also Hintergrundbilder innerhalb des Bild-Ordners, und es hat eine Nymphe von Grain Punkt PNG. So können Sie den Pfad annehmen, den wir als Bilder vorwärts Schrägstrich Hintergrundpunkt PNG neu müssen . Aber lassen Sie uns falsch liegen. Der Grund dafür ist, dass, wenn wir an die Mathematik denken, die ich Ihnen von Hurray-Pfaden beigebracht habe, von der Annahme, dass Sie beschreiben, wo der Schaden wie index.html. Wir beschreiben es nicht wirklich index.html. Wir geben es nur dem Stylesheet innerhalb des Style-Ordners. Also eigentlich, was wir tun müssten, ist einen Ordner zu gehen, dann in den Bilderordner, und dann durch grünen Punkt PNG, um einen Ordner zu schreiben, was wir tun würden, ist, dass wir dre dot dot vorwärts Schrägstrich, was bedeutet, dass mit NIH ging einen Ordner nach oben. Dann Bilder, dann durch Korn Punkt PNG. Wenn ich die Dezimalstelle eingeben, nicht anzeigen, bis wir es zum ersten Mal zu unserem Stylesheet hinzugefügt haben. Also werde ich diesen echten Sam kopieren. Ich werde unseren Code-Editor öffnen und ich werde einen neuen Kommentar in unserem Stylesheet hinzufügen. Also werde ich Schrägstriche Sternchen machen, weil denken Sie daran, dass es für Stylesheets anders ist. Und ich werde bewerten UND Regel wieder in Bezug auf unsere Tante echte HTML Abschnitt. Immer wenn ein Asterix und Schrägstrich. Und dann werde ich durchbohren sind echt sat em. Auch hier bedeutet Punkt, Punkt oder Punkt Punkt Punkt Punkt Schrägstrich, dass wir einen oberen Ordner haben. Wenn wir also einen Blick auf unseren Stylesheet-Ordner und unsere Stylesheets oder CSS werfen, worauf wir den Pfad beschreiben. Wir werden nach oben gehen oder Ordner. Dann haben wir Bilder Schrägstrich, weil wir in den Bilderordner gehen würden. Und dann wollen wir den bg dot PNG, den wir hier haben. Mal sehen, ob das zu unserer Webseite gehen und aktualisieren. Sie können sehen, dass unser Hintergrundbild schön zeigt, dass dieses Hintergrundbild halbtransparent ist. Das bedeutet, dass die Gewichtsabschnitte, die Sie derzeit sehen können, transparent sind. Also alles, was darunter liegt, würde durchscheinen. Das bedeutet, dass wir eine Farbe zu unserem Hintergrund hinzufügen können und die Farbe wird Gebläsebild gesetzt. Also, wenn wir einen Blick auf unseren farbigen Hintergrund Abschnitt und unsere Hintergrundeigenschaft, und klicken Sie, um den Wert zu bearbeiten. Und wenn ein nach der schließenden Klammer unterhalb des Bildes angezeigt wird. So können wir eine Farbe hinzufügen. Zum Beispiel könnten wir ein Leerzeichen hinzufügen und rot bewerten, die Sie sehen können. Oder wir können einen Hex-Code für eine Farbe verwenden, 90, die Farbe, die ich verwenden möchte, und jetzt ist 33225 b, das ist eine violette Farbe. Sie brauchen diese Farbe nicht zu verwenden. Sie können jede Farbe verwenden, die Sie wollen. Möglicherweise kein Wort wie rot oder blau oder ein Hex-Farbcode, aber sie hat von woanders. Aber wenn du mitmachen willst, benutze einfach 33, 22, fünf B, und sie und sie. Das nächste, was Sie bemerken, ist, dass die Beutelkörner scheint abgeschnitten das Niveau auf die Rate. Es ist nicht volle Breite, es wiederholt sich wieder. Also, um dies zu beheben, was wir wieder, ist nach Korngröße und wir bewerten 100 Prozent. Das bedeutet, dass das Bild 100 Prozent der Breite des Hintergrunds einnimmt. Das ist keine Kopie. Diese Eigenschaften gehen zu unserem Code-Editor und Peers to Mentor oder farbigen Hintergrund echten Sand. Wieder, ich halte alles gut ausgerichtet, nur damit es leicht zu verstehen ist. Ich werde nicht so gut unsere Webseite zu sehen und drücken Sie Refresh. Und Sie können sehen, dass unser Hintergrund jetzt zeigt. Das nächste, was wir tun wollen, ist, dass wir ihr die Elemente innerhalb des farbigen Hintergrunds schicken wollen. Sie sehen nicht toll aus, hier links zerquetscht, wir wollen, dass sie in der Mitte schön aussehen. Also gehen wir zurück zu unserem Code-Editor und wir müssen das Bild H1, Überschrift Tag und Absatz innerhalb eines Entwicklers hinzufügen . Also werde ich eine Spur unterhalb dieses Abschnitts hinzufügen. Ich werde dev schreiben und ich werde Klasse gleich bewerten, und dann zu Sprachzeichen. Und jetzt werden wir das Bootstrap-Grid-System nutzen. Ich möchte nicht, dass dieser Abschnitt volle Breite hat. Ich möchte, dass es eine Box in der Mitte meiner Intro-Sektion ist. Also möchte ich, dass es eine Spalte mit einem definierten nassen ist. Also werde ich sie anrufen, ob das Boot die Rate begünstigt. Wir können es früher ändern, D7, ist es nicht. Also werde ich C, O, L für Spalte Strich f5 für eine Spalte von fünf schreiben . Und ich werde unseren tauben Tag schließen. Wir wollen den Schaden H1 Überschrift von Absatzelementen innerhalb dieses div. Also werde ich einen neuen Lane Blow Absatz markieren und diesen div Tag schließen. Ich werde dann das Bild H1 und Absatz-Tag auswählen, wieder, indem Tab drücken, um sie zu schieben, um zu zeigen, dass es in diesem div-Tag sagen, Ich werde nicht C von Gut unsere Webseite treffen und aktualisieren. Und Sie können sehen, dass sich nicht viel geändert hat. Aber wenn wir uns DevTools mit MRSA Aktion farbigen Hintergrund ansehen, können Sie das Dev-Tag mit Spalte 5 sehen. Wenn Sie darüber schweben. Die Breite ist Bögen, sie alle fünf Spalten. Es und ich brauchen nur den zentralen Osten. Um das zu tun. Lassen Sie uns unseren Code-Editor aufrufen und fügen Sie eine zweite Klasse hinzu. Sie können mehr als eine Klasse mit n, einem HTML-Tag hinzufügen. Und alles, was Sie tun müssen, ist es durch eine Spezies zu trennen. Also werde ich eine zweite Klasse hinzufügen, die als zentrierte Moore bezeichnet wird. Und ich werde das als CSS-Selektor in unserem Stylesheet erstellen. Also werde ich einen Punkt oder einen Punkt zentrierten Kasten zeichnen, und ich werde Margin-links 0 schreiben. Und Margin-Rate von, wenn Sie etwas von Margin-links und Margin-Rechts-Auto definieren, Eveleigh medizinisch zentrieren diese Krankheit. Also, jetzt werde ich sehen, ob das Stylesheet und sehen Sie die index.html. Gehen Sie zurück zu unserer Seite und klicken Sie auf „Aktualisieren“. Sie können sehen, dass es Spalte in unserem Andrew zentriert hat, das sieht gut aus. Allerdings würden die Elemente enden die Spalte nicht zentriert. Also möchten wir ihr vielleicht das Bild senden, die Überschrift und der Absatz werden dann sind sie zentriert Feld, die Spalte ist. Also werde ich einfach eine Eigenschaft zu unserer zentrierten Box hinzufügen. Wir werden es sagen. Und ich werde Text ausrichten Mitte schreiben. Sie können sehen, dass es kein Zentrum ist unser Bild sind Überschrift in unserem Absatz, die fantastisch aussieht. Ich werde diese Eigenschaft kopieren. Ich werde zu unserem Code-Editor gehen und ich werde alle Lane Bluer Ränder angreifen , die wir gerade hinzugefügt haben, und Endline hinzufügen, weil von Text-Align-Center kopiert wird, das nächste, was ich tun will, ist über dieses Bild regiert. Also gibt es zwei Dinge, die wir tun müssen. Zuerst müssen wir sicherstellen, dass das Bild als auch. Wenn Sie ein wirklich großes Bild auf der Webseite hinzugefügt haben, haben Sie vielleicht schon bemerkt, dass das sehr groß ist, weil wir in der Minute keine definierten Webs haben. Die Größe, die das Bild auf der Webseite haben wird, ist die gleiche wie das Bild tatsächlich ist. Wenn Sie also ein großes Bild haben, sehen Sie auf der Webseite wirklich groß aus. Und wenn es wirklich klein, wirklich klein und die Webseite ist, müssen wir ein Web und CSS definieren. Gehen wir also zu unserem Code-Editor. Das ist gut, unser Stylesheet. Und wir wollen das Bildelement innerhalb der Mitte zu Moore Klasse auswählen. Um dies zu tun, der erste Strahl, der CSS-Selektor für die zentrierte Box-Klasse. Und dann schreiben wir den CSS-Element-Selektor von IMG für Schäden. Alle Eigenschaften, die wir hier in den Klammern hinzufügen, werden also auf alle Bilder innerhalb der zentrierten Box-Klasse angewendet. Und das ist Rate mit 300 Pixeln. Und sehen, ob es nicht der Fall ist, gehe ich zurück zu unserer Seite und aktualisiere. Und Sie können sehen, dass unser Bild jetzt viel kleiner ist, da es die Breite von 300 Pixeln ist. Ich weiß nur, dass ich dieses Bild schreiben will. Also lassen Sie uns auf das Bild HTML-Element klicken und dann das zentrierte Moorbild, echter Sinn, der eine neue Eigenschaft ausklickt. Fügen wir den Randradius hinzu. Und wir können jeden Prozentsatz hinzufügen, den wir für den Grenzradius wollen. Es herrschte einfach über den Gerichtsmediziner. Sie könnten also 10 Prozent gebrauchen, wie Sie hier sehen können. Du könntest 20 Prozent gebrauchen. Du könntest 30 Prozent wählen. Sie können jeden Prozentsatz verwenden, den Sie waschen, Havre. Ihre Bilder quadratisch und Ihr Bild muss quadratisch sein. Wenn Ihr Bild nicht quadratisch ist, können Sie es einfach in Photoshop oder Amnesie Bildbearbeitungssoftware laden, die Sie haben. Machen Sie den Schaden quadratisch und sehen Sie, ob es, wenn Ihr Bild quadratisch ist und Sie den Randradius 50 Prozent machen, wird es das Bild kreisförmig machen. Das ist fantastisch. Ich werde diese Eigenschaft kopieren, öffnen Sie das Stylesheet und wir sind herstellerzentrierte Moore Schadensregelsatz. Und wenn ein PSTN und sehen, ob es, Ich werde zurück zu dieser Webseite gehen und aktualisieren. Okay, das ist ein Star, in dem sie wirklich toll sind. Eine Sache, Sie werden sofort bemerken, da der schwarze Text auf diesem Hintergrund wirklich schwer zu sehen ist. Also werde ich auf den Farbhintergrund Abschnitt klicken. Ich werde in die Eigenschaften des echten Sam gehen. Und ich werde Farbe, Hashtag und Sex ein HFS schreiben , was der Hex-Code für Gewicht ist. Und das macht sofort ein Etikett zu einem großen Bär. Also werde ich das wirklich gut kopieren. Unser Stylesheet und PSTN als neue Spur, wir sind dann farbigen Hintergrund Regel gesetzt und sehen, ob ich gehe zurück zu unserer Seite und aktualisieren. Das nächste, was wir uns ansehen müssen, ist, dass das Bild viel zu nah am Anfang des Intro-Sektors und dem Absatz unten gesetzt ist , ein Satz, der viel zu nahe am unteren Rand des Anthro-Sektors liegt. Also, wenn ich auf das zentrierte Moore Klasse HTML-Element klicke, das ist Pad dieses Rabat. Also innerhalb der Mitte Bugs Regel gesetzt und wann sind acht Polsterungen? Und wenn ich keinen linken, oberen, rechten oder unteren Rand definiere , gilt der Pexels, den ich anwende, für alle vier Seiten. Also links, oben, rechts und unten. Ich werde eine Polsterung von 50 Pixeln hinzufügen. Und Sie können sehen, dass sofort viel besser aussieht. Ich werde die Padding Eigenschaften kopieren. Ich erstelle es einfach und füge sie zu meinem Zentrum Moore auf Stylesheet hinzu und sehe, ob zurück auf die Webseite gegangen ist, gibt es eine letzte Sache, die ich denke, dass hier getan werden muss, und das ist das willkommene Überschrift-Tag einfach nicht genug abhebt. Wenn ich also klicke, um ein Element auszuwählen, Mauszeiger über das H1-Tag, wählen Sie H1-Tag, klicken Sie auf, um einen neuen echten Sam zu erstellen. Ich werde die Schriftgröße 70 Pixel machen, aber Sie können es machen, was Sie wollen. Und ich werde die Schrift fett machen, um mehr hervorzuheben. Ich werde das wirklich traurig kopieren. Geh zurück zu meinem Stylesheet. Aber weil wir gerade die Schriftgröße geändert haben und wir sind aus einem Überschrift H1-Tag. Ich gehe an die Spitze meines Stylesheets. Ich werde einen neuen Kommentar hinzufügen, Schrägstrich Pass Tricks. Ich werde Schriftgrößen Asterix Schrägstrich schreiben, um den Kommentar zu schließen. Und ich werde erscheinen, dass die Regel gesetzt und da. Und ich werde diesen Abschnitt verwenden, um jede andere lustige, echte Sinn hinzuzufügen , während wir weitermachen. Ich werde das retten. Gehen Sie zurück zu unserer Seite und klicken Sie auf Aktualisieren. Eine letzte Optimierung, die benötigt wird. Ich habe gerade in der Navigation bemerkt, da Sie feststellen werden, dass die Navigation nicht zentral auf den Rest der Seite eingestellt ist. Lassen Sie uns den Weg untersuchen. Wenn wir also einen Blick auf unsere ungeordnete Listen-Klassennavigation werfen und den Mauszeiger darüber bewegen. Sie können sehen, ob Sie oben auf der Seite schauen und das Lila, das die Polsterung zeigt. Wir haben eine Polsterung auf der linken Seite und nicht auf den Strahl aufgetragen. Dies ist nur ein Standard-CSS-Styling, das von Braziers angewendet wird, weil es eine letzte ist. Offensichtlich wollen wir, dass dies eine Navigation ist. Also werden wir Padding links 0 Pixel zu unserer Navigationsrolle sam hinzufügen. Was stellt sicher, dass es keine Polsterung auf der linken Seite gibt, um die Navigation zu drücken. Ich werde diese Padding links Eigenschaft kopieren, die wir gerade hinzugefügt haben. Gehen Sie zu unserer Navigationsregel, stellen Sie eine neue Spur, eine PSTN, und sehen Sie, ob ich auf die Seite zurückgehen und aktualisieren werde. Sie können sehen, dass wir fast da sind. Es ist immer noch etwas zu viel auf die Rate. Also, wenn ich einen Blick auf die letzten Elemente, wenn Sie sehen können, dass wir einen Rand links hinzugefügt, lehren letzten Punkt, um die Speer Dinge zu erstellen. Aber was dies tut, ist, dass es die Navigation auf das Array schiebt , weil das erste Element einen Rand übrig hat, der nicht benötigt wird. Um dies zu beheben, verwenden wir einen CSS-Selektor namens first off tape, um den Rand links von nur der ersten zu entfernen, damit ich nicht in der Navigation bin, um diesen Goodyear Code-Editor zu bewerten und die Navigation am letzten Tag zu blasen. Und wir werden sagen bei, lasst uns noch einen hinzufügen. Lassen Sie uns Punkt oder Punkt Navigation für die Navigationsklasse hinzufügen. Lassen Sie uns hinzufügen, damit ich nicht bin Elemente Doppelpunkt. Und dann schreiben wir zuerst das Band ab. Also, wie funktioniert das? Am Anfang haben wir unsere Navigation, die unsere Klassenauswahl ist. Dann haben wir LI. Zum letzten bin ich ein Elementselektor, so dass alle LI-Elemente dann die Navigationsklasse auswählt. Aber dann haben wir zuerst Anruf auf Band hinzugefügt. Das bedeutet, dass es sich nur auf die erste auswirkt, damit ich die Navigationsklasse des Herstellers als andere geschweifte Klammern bin. Und wir wollen keine Marge innerhalb des ersten Listenelements in unserer Navigation. Also werden wir wieder margin-links 0 Pixel. Was das bedeutet, ist das erste, damit ich dann, oder Navigationsklasse wird keine Marge lacht, dass Meer davon. Gehen Sie zurück zu unserer Webseite und aktualisieren Sie. Und Sie können sehen, sind Navigationslinien jetzt perfekt, wenn wir inspizieren oder Navigation und gehen Sie zu unserem letzten Tag. Und Sie können sehen, dass der erste der Bandregelsatz hat wir gerade hinzugefügt haben, um den Rand für jedes andere Nest zu entfernen , nachdem ich bin, dass der Rand hinzugefügt hat , weil es nicht die erste vom Typ echte Sayer verwendet. 15. Aufbau der Website – Den Hintergrund ändern: Wenn es um den farbigen Hintergrund oder ihre Website geht, müssen Sie das Hintergrundbild für diesen Kurs verwenden. Sie können jeden Hintergrund U1 finden und verwenden. Lassen Sie mich Ihnen zeigen, wie Sie das machen. Zuerst, Lassen Sie uns ein anderes Bild für den Hintergrund unserer Website finden. Ich empfehle eine Website wie Unsplash, die lizenzfreie, nutzbare Bilder enthält , aber Sie können das gewünschte Bild verwenden , solange Sie die Erlaubnis dazu haben. Und ich werde nur Hintergründe durchsuchen. Sie können nach unten scrollen und finden, was Bild, Bild Phantasie. Ich werde nur eine auswählen, die mir gefällt. Zum Beispiel, das ist einer der Wälder. Und ich werde nur klicken und Schaden herunterladen. Das ist also mein Download-Ordner und das ist der Schaden, den ich gerade heruntergeladen habe. Ich werde dieses Bild in den Bilderordner der Website ziehen, an der gearbeitet wurde. Und ich werde diesen Wald durch genarbt umbenennen. Aber du kannst es benennen, was immer du willst. Es ist mein Gehe zu unserer Website und wir sind Event DevTools mit dem farbigen Hintergrundbereich ausgewählt. Sie können zur Hintergrund-URL gehen, klicken Sie, um sie zu bearbeiten. Und ich werde den Hintergrundpunkt PNG in den Wald für Getreide ändern, Ausweichen JPEG, weshalb ich gerade den Schaden umbenannt habe , den wir im Ordner Images heruntergeladen haben. Geben Sie ein. Und Sie können sehen, dass dieses Bild jetzt auf unserer Website wirksam geworden ist. Und es ist so einfach. Sie können das Bild finden, das Sie für den Hintergrund von Ihrer Website verwenden möchten und es dem Hintergrund zuweisen, indem Sie die Methode verwenden, die ich Ihnen gerade gezeigt habe , dass diese Änderung wirksam wird, müssen wir den Lahmen kopieren. Wechseln Sie zu Ihrem Code-Editor und ersetzen Sie die Farbhintergrundbildspur. Verhindern Sie das echte Set und sehen Sie, ob jetzt, wenn Sie aktualisieren, werden Sie sehen, dass Ihr neuer Hintergrund auf Ihrer Website wirksam ist. 16. Erstellen der Website – darüber,: Das ist nein, erstellen Sie den Abschnitt Über dieser Website. Dies wird eine Reihe mit drei Spalten sein, ähnlich dem, was wir während der Bootstrap-Demonstration erstellt haben. Laden wir unseren Code-Editor und lassen Sie uns einen neuen Kommentar erstellen. Wieder, es ist weniger als Ausrufezeichen Strich, Strich zu sagen. Und lasst uns Strich wieder, Strich größer als gleich. Und blau dies werden wir den HTML für oder einen Biss Abschnitt schreiben. Also das erste, was ich tun wollte, ist ein Abschnitt öffnen-Tag und ein Abschnitt-Tag. Als nächstes werden wir Bootstrap grad verwenden. Also das erste, was wir als eine Zeile brauchen, so erstellen wir ein dev HTML-Tag mit der Klasse der Zeile. Und ich werde das div-Tag schließen. Und dann haben wir ns, Ich werde drei Spalten mit vier Breite erstellen. Um dies zu tun, erstellen wir ein div mit der Klasse CORREL für Spaltenstrich vorwärts. Und ich werde das div-Tag schließen. Ich werde das kopieren und es zweimal einfügen. Also, jetzt haben wir drei Spalten. Wir sind dann unsere Reihe mit einer Aura Bisektion. Also das erste, was ich mit Anna Spalte haben möchte, weil ein Bild, so werde ich das Bild HTML-Tag und einen SRC für Quelle erstellen. Und wir müssen den Pfad für unser Bild hinzufügen. Wieder, innerhalb des Pakets, sofern ich Schäden habe, werden wir sie benutzt werden. Sie müssen diese nicht verwenden, wie ich bereits erwähnt habe, aber wenn Sie genau folgen möchten, dann sind Schäden in diesem Ordner für Sie zu verwenden. Wir werden die 123 Bilder benutzen. Also für jetzt konzentrieren wir uns einfach auf die nach oben um einen J-Pegs. Also werde ich den Pfad schreiben, der der Bildordner Vorwärtsschrägstrich über einen Punkt JPEG ist. Und ich werde den Alt-Text eines Byte-Hundes 1 haben. Und ich werde das HTML-Tag schließen. Das nächste, was sie wollen, ist eine Überschrift dafür, ich werde h3 Überschrift verwenden und ich werde nur Top-Hund schreiben. Ich werde das Überschriften-Tag schließen. Und schließlich möchte ich einen Absatz. Also werde ich das P-HTML-Element schreiben. Und ich gehe einfach zu unserem Loren Ipsum Generator , den wir zuvor in diesem Kurs benutzt haben. Und nur Januar an irgendeinem Beispiel Absatz Text. Ich werde das kopieren. Gehen Sie zurück zu unserem Code-Editor und ps zu m. Wieder, wie bereits erwähnt, wenn Sie mit großen Textkörpern arbeiten, wird es Ihren Code-Editor oder nach links verschieben. Also, um es fett alles in einem Fenster zu haben, gehen Sie einfach zu Ansicht. Weiche Ummantelung umschalten. Es gibt keine hält alles in Ihrem Code-Editor-Fenster enthalten. Und ich werde nur das Absatz-HTML-Element schließen. Ich werde nicht nur kopieren, was in dieser Spalte ist, und in die zweite, dritte Spalte. Und ich möchte, dass die Bilder für jede Spalte unterschiedlich sind. Also haben wir ein Boot zu einer Wohnstätte, drei Bilder in unserem Bild für dort, die wir verwenden können. Also werde ich nur die zweite Spalte ändern, 272 Schaden und die dritte Spalte, um ihr Biss drei Bild zu verwenden. Wieder werde ich den alten Text ändern, dadurch dog2 und bleibe Hund 3. Und die Überschriften, ich werde mich nur ändern, erlauben Variationen. Also werde ich diesen einen verstorbenen Hund machen. Und ich werde den dritten Absatz machen, Manager-Hund. Und ich werde sehen, ob das HTML-Dokument jetzt unsere Webseite lädt und aktualisiert. Wenn wir nach unten scrollen, können Sie sehen, dass die Spalten in unserer Zeile waren korrekt funktionieren. Die Überschrift des Absatztextes enthält n m Spalten. Aber das erste, was Sie bemerken, ist, dass die Bilder zu groß sind. Also müssen wir zurück zu unserem Code-Editor und wir müssen eine Klasse für RSA-Aktion hinzufügen. Also als Attribut innerhalb unseres Abschnitts HTML-Tag werde ich sagen, Klasse entspricht Sprachzeichen. Und ich werde über schreiben und wollen sehen, ob es ein Ende Sprung über Terroristen Ale Blatt, wo ich werde, um einen Kommentar hinzufügen. Denken Sie daran, dass das Kommentieren von CSS-Dokumenten verschiedene HTML-Dokumente ist. Wir müssen Schrägstriche Sternchen verwenden. Und wann immer ein, äh, nach Asterix Schrägstrich. Und dann werde ich eine neue Regel schreiben, Samp, da ich die Größe aller drei Bilder mit anaerober Reaktion reduzieren möchte. Ich werde zuerst die Bootklasse verwenden, und dann werde ich die IMG-Elementauswahl verwenden. Und dies wird alle Bilder Ziel waren dann dadurch Klasse. Und dann werde ich geschweifte Klammern setzen. Dann innerhalb, Ich werde das Bild mit einem 140 Pixel zu machen und sehen, ob ich jetzt auf unsere Webseite gehen und aktualisieren. Und Sie können sehen, dass diese Bilder nicht viel kleiner sind. Ich möchte ihr nun Elaine alles senden, was ich tun kann, indem ich auf das Sanktions-HTML-Element mit der Klasse ein Boot klicke und wann man einen neuen Regelsatz hinzufügt. Und ich werde das LN-Center nehmen und wir werden diesen Regelsatz in unser Stylesheet kopieren und sehen, ob ich die Seite nicht aktualisieren werde. Okay, das ist die Zutat. Aber eines der Probleme, die ich sehe, ist, dass sie Boote Aktion ist zu nah an der linken und rechten Seite der Seite. Um dies zu beheben, müssen wir eine Bootstrap-Funktion namens Container verwenden. Container setzen einfach HTML-Elemente fort, pad sie und Elaine sie auf Ihrer Website. Wie halten wir die Bisektion ein? Gehen wir zu unserem Code-Editor. Und direkt über ihrem Bootskommentar, Lassen Sie uns ein neues Dev HTML-Element mit dem Klassencontainer hinzufügen. Dann gehen wir zum Ende, bieten einen Bissabschnitt aus der neuen Spur an und schließen das div-Tag. So können Sie sehen, dass unsere abate Abschnitt, keine Sets. Wir werden dann das Öffnen und Schließen div, HTML-Element mit dem Klassencontainer. Indem Sie dies speichern, auf unsere Webseite gehen und aktualisieren, können Sie sehen, dass ein Byte-Abschnitt innerhalb des Containers enthalten ist. Wenn Sie sich unsere DevTools ansehen, können Sie den dev class Container sehen und wir sind Eitelkeit oder ein Biss Abschnitt. Das nächste, was ich tun möchte, ist, dorthin zu bewegen Bi-Sektion sterben, um Raum zwischen dem Intro-Sektion und damit Abschnitt zu schaffen . Um dies zu tun, werde ich das Byte HTML-Element auswählen, zur Rolle sam gehen und einen Rand oben von etwa 40 Pixeln hinzufügen. Ich werde das kopieren. Gut unsere Stylesheet und fügen Sie diese auf das Boot echte SAT und sehen, ob zurück zu unserer Webseite und aktualisieren Sie ihn. Das nächste, was ich tun möchte, ist, um die Bilder zu runden, um das Bild und RN RO zu entsprechen. Damit wir arbeiten können, müssen die Bilder perfekt quadratisch sein, wenn Sie andere Bilder verwenden, die im Kurspaket enthalten sind. Stellen Sie bitte sicher, dass sie quadratisch sind. Auch hier können Sie dies in Photoshop oder jeder Bildbearbeitungssoftware tun , da sie für den Randradius perfekt quadratisch sein müssen , damit sie diese zu einem der Bilder in Narzissen gehen. Und Sie können sehen, dass bringt das Regelset, das wir bereits in unserem Stylesheet erstellt haben. Und fügen wir einen Umrandungsradius hinzu, 50 Prozent, genauso wie wir im Intro-Sektion gemacht haben. Das ist mein Exemplar. Diese Eigenschaft und dieser Wert. Gehen Sie zu unserem Stylesheet und unserem Code-Editor. Erstellen Sie eine neue Linie unter einem Biss Schaden wird dann die geschweiften Klammern und einfügen. Das ist schön davon. Gehen Sie zurück zu unserer Webseite und aktualisieren und Sie können sehen, wir sind fast da für Byte-Abschnitt. Das Letzte, was ich tun will, ist, die Überschriften fett zu machen. Also, um das zu tun, gehe ich zurück zu unserem Stylesheet. Ich werde jeden echten Sam erstellen und ich möchte alle h3-Tags mit einer nahe gelegenen Klasse auswählen , um dies zu tun. Und wann immer ein Punkt oder Punkt und ein Byte für dadurch Klasse. Und dann werde ich h3 schreiben, um alle h3-Elemente einer nahe gelegenen Klasse zu beeinflussen. Geschweifte Klammern, Fonds B, es mutig. Und ich will sehen, ob ich endlich auf die Seite zurückgehe und mich auffrischen werde. Und Sie können sehen, dass dieser Abschnitt keine Zutat ist. 17. Erstellen der Website – Warum wir wir: Wir machen große Fortschritte auf unserer Website. Nennen wir MEG, die Art und Weise Uns Abschnitt. Dieser Abschnitt wird drei Zeilen enthalten. Und jede Zeile wird eine leichte Variation von Säulenbahnen haben. Also lassen Sie uns die erste Zeile mit der Art und Weise unseren Abschnitt erstellen. Gehen wir in unseren Code-Editor und unter dem Bissabschnitt. Aber mit n, dem Container-Dev, werden wir einen neuen Kommentar erstellen. Und wir gehen zu Ray Y Ofs. Ich fragte wusste, dass jeder unten ist die Art, wie unser Abschnitt, wieder, Ich werde es zweimal sagen, nur weil es super-wichtig ist. Wir fügen dies unterhalb des Abschnitts über hinzu, aber mit n, dem dev-Klassencontainer, da wir wollen, wie unser Abschnitt in diesem Container enthalten sein soll, werden wir ein neues Abschnitt-HTML-Element hinzufügen. Und wir werden die Klasse von uns hinzufügen. Und wir werden ein schließendes Tag für diesen Abschnitt hinzufügen. Und O von n, Dieser Abschnitt, wir werden unsere erste div Klasse Zeile hinzufügen. Und wir werden diesen Entwickler schließen. Jetzt haben wir es sei denn, erste Zeile durch 12 Spalten. Wir wollen eine Spalte für den Text und die Überschrift. Und wir wollen sie wegen des Schadens anrufen. Und wir wollen, dass die Spalte, die die Überschrift und einen Absatz enthält , etwas größer als die Bildspalte ist. Also lassen Sie uns eine Dev-Klasse cURL für Spalte hinzufügen. Und das sind Megawatt von sieben. Das hat ein schließendes div-Tag. Und jetzt fügen wir eine Spalte für Schaden hinzu. Also werde ich eine weitere Dev-Klassenspalte hinzufügen. Und wenn Sie sich erinnern, jede Zeile und Bootstrap müssen bis zu 12 Spalten von mi hinzufügen. Also haben wir bereits sieben verbraucht. Unsere zweite Spalte muss also eine Breite von fünf sein. Ich werde das öffnende div-Tag schließen, und ich werde ein schließendes div-Tag hinzufügen. Also, was wir hier als unsere Drahtabschnitt haben, gut dann die Art, wie unser Abschnitt haben wir eine Reihe und innerhalb der Reihe haben wir zwei Spalten. In der ersten Spalte ist das entweder Überschrift und wann man dies zu einer Überschrift der Stufe 2 macht. Und ich werde wieder, wir sind die besten Hunde und schließen diese h2 Tag. Immerhin ist dies ein Y hat Abschnitt aus als Hund Bier Business-Website wie Megawatt, wir sind der beste Hund. Als nächstes gehen, um einen Absatz hinzuzufügen und ich werde nur einige der Loren Ipsum kopieren wir zuvor auf der Website verwendet haben, hat einen Platzhalter. Dann werde ich das Absatz-Tag schließen. Das ist also unsere erste Spalte sortiert. Jetzt möchte ich der zweiten Spalte ein Bild hinzufügen. Also unter dem zweiten div öffnenden Tag mit anaerobe und ging eine neue Schicht aus. Und ich werde ein Bild HTML-Element hinzufügen. Also werde ich Bild SRC für Quelle gleich und wenn die Sprache markiert und einen Pfad für Bild hinzufügen wollen. Wenn Sie sich die Bilder Ordner innerhalb des Pakets zur Verfügung gestellt, Sie können sehen, ich habe Ihnen drei Bilder gegeben, um für die Art und Weise unseren Abschnitt zu verwenden. So können Sie sie verwenden, wenn Sie folgen. Wenn Sie Ihre eigenen Bilder verwenden, zögern Sie nicht, dies zu tun. Auch hier ist es sinnvoll, sie in diesen Bilderordner zu legen, damit Sie leicht folgen und Pfade verwenden können , die denen ähneln, die ich verwende. Also lassen Sie uns das erste Weg-OS-Image in die Art und Weise unseres Abschnitts hinzufügen. Es ist, wenn der Ordner Bilder und der Bildname y dash, Strich ein JPEG. So Bilder für den Ordner, Schrägstrich Weg Strich, Strich ein JPEG. Und ich werde Alt-Text hinzufügen, dass wir die besten Hunde sind. Ich werde das Bild-Tag schließen. Mal sehen, ob dies zu unserer Website gehen und aktualisieren, scrollen und zielen. Sie können sehen, dass unsere Spalten da sind und unsere Regel da ist. Aber das erste, was Sie bemerken werden, ist, dass das Bild viel zu groß ist, so dass es uns betrifft. Das ist cool. Java-Code-Editor. Lassen Sie uns einen neuen Kommentar in unserem Stylesheet erstellen. Bisher ist es der letzte Asterix. Warum OS Asterix Schrägstrich sagt uns wissen, dass jede Rawls sagt unten diesen Kommentar sind in Bezug auf die Art und Weise, wie unser Abschnitt. Und ich möchte einen Regelsatz für die Bilder von n schreiben Die Art und Weise unsere Sektion. Also werde ich den Punkt oder Punkt lesen, der uns für die Y ofs Klasse gestrichelt hat. Und ich werde IMG schreiben, so wirkt sich auf alle Bildelemente innerhalb der YR, unsere Sektion, geschweifte Klammern verheiratet. Aber anstatt eine Pixelbreite weniger zahm zu verwenden und wenn Array eine 100 Prozent. Und sehen Sie, ob Sie auf unsere Webseite zurückgehen und aktualisieren, können Sie jetzt sehen, dass die Bildgröße viel besser ist. Und FA, inspizieren Sie dieses Element, Sie können sehen, es verwendet Vermählten 100 Prozent. Was bedeutet das? Nun, wenn wir uns die Spalte 5, die die Bilder, und Sie können sehen, dass das Bild nicht eine Strecke zu verheiratet Wege, um eine 100 Prozent dieser Spalte breit sein. Also, um dies weiter zu demonstrieren, wenn ich auf das Bild HTML-Element klicke, gut der Art und Weise OS-Bild, echte Menge und die CSS PM, und ändern Sie die Breite auf 50 Prozent. Sie können sehen, wenn Sie den Mauszeiger über Spalte fünf entwickeln, dass Schäden dann der Schaden nicht 50 Prozent ist, stimmt die Breite der übergeordneten Entwicklerrichtlinie nicht überein. Also ändern wir das wieder auf 100 Prozent. Das nächste, was ich für diese Zeile als farbige Balkenkörner möchte und sie wollten dem Farbhintergrund entsprechen, den wir in unserem Intro-Sektion haben, handlich, wir haben bereits das CSS für ein S-Balkenkorn geschrieben. Also müssen wir nur diese Klasse zu unserer Zeile hinzufügen, um ja zu tun, gehen Sie zum Code-Editor und wir werden eine zweite Klasse 2 oder Zeile hinzufügen. Also haben wir unter Sprachzeichen, ich werde nur ein Leerzeichen für Zeile hinzufügen, und ich werde einen farbigen Hintergrund hinzufügen. Und was das bedeutet, ist diese Reihe ist jetzt weg, um auch die farbige durch wachsende Klasse zu verwenden. Wir erstellen es für den Introbereich der Website, was bedeutet, dass wir kein CSS mehr schreiben müssen , damit dieser farbige Hintergrund wirksam wird. Wir werden sehen, ob der HTML-Code fehlschlägt. Gut unsere Webseite und aktualisieren. Und Sie können sehen, dass unser Hintergrund bereits wirksam ist und der YR-Abschnitt, wenn wir sammeln inspizieren dieses Element, werden Sie sehen, dass es nicht nur den Hintergrund über gezogen, sondern es hat auch die Schriftfarbe von Weiß über Nun, gut. Es gibt nur zwei weitere Dinge als Abschnitt als Durcheinander in der ersten, als Polsterung, wie Sie es sehen können, die Minute, in der die Elemente viel zu nah an den Saiden sind, viel schöner sein, wenn wir etwas Polsterung Regen nach unten hatten. Nun, Sie könnten denken, wir sollten die Polsterung in den farbigen Hintergrund echten Stempel hinzufügen. Aber wir können das tun. Lassen Sie mich Ihnen zeigen, warum. Also, wenn ich eine Polsterung von 50 Pixeln in unseren farbigen Hintergrundregelsatz hinzufüge. Desktops, GRI es. Aber denken Sie daran, dass der farbige Hintergrund auch von der Intro-Sektion verwendet wird. Wenn wir also nach oben scrollen, können Sie sehen, dass die Endrew-Sektion zu viel von einer Partynacht hat. Indem Sie es entfernen, können Sie sehen, was es vorher war. Also müssen wir eigentlich nur das Padding auf den YR-Abschnitt anwenden, um dies zu tun. Und wir gehen zu unserem Stylesheet. Wir werden nach unten scrollen und wir werden den Klassenwähler Punkt y ofs schreiben. Und dann werde ich die Klassenzeile hinzufügen. Also, was bedeutet das? Dies bedeutet, dass wir zuerst im Abschnitt nach NA-Klassen der Zeile suchen. Dies wirkt sich auf alle Zeilenklassen innerhalb der Weißen Haus-Klasse aus. Und dann werde ich Polsterung für einen Pexels hinzufügen. Kann sehen. Jetzt, wenn ich die Seite aktualisiere, können Sie sehen, dass das y, unser Abschnitt eine wirklich schöne Polsterung hat. Das letzte, was hier fehlt, ist, dass die Überschrift ein wenig zu klein ist und ich denke, es würde besser aussehen, wenn sie fett wäre. Also werde ich auf das HTML-Element klicken. Und wir möchten einen Regelsatz hinzufügen. Und wir werden das Schriftgewicht von Anfang an fett machen. Und dann werde ich die Schriftgröße auf 50 Pixel ändern. Das sieht viel Bär aus. Und wenn eine Kopie dieser Rolle Sam. Und wenn ich zu meinem Stylesheet gehe, und ich werde nach oben zu scrollen, wo wir die Schriftgrößen Abschnitt haben. Ich werde eine neue Spur und PSTN erstellen und sehen ob zurück auf die Webseite und refashion, Sie können sehen, es gibt keine, das ist wirklich gut. Das ist also eine der drei Reihen, kein Completer. Um das schnell und einfach zu machen, warum ich wirklich tun werde, werde ich die gesamte Zeile und ihren Inhalt auswählen. Also werde ich vom öffnenden dev rel-Tag bis zum schließenden div ru -Tag auswählen und wann ich es kopieren soll. Und ich werde es noch zwei Mal einfügen. Das wird uns unsere drei Reihen geben. Das erste, was ich tun werde, ist das zweite, dritte Bild für eine zweite dritte Reihe zu ändern . Also, wenn Sie unsere Bilder Ordner sehen, haben wir ein Y von t und ein Y von drei Boucher. Ich werde den Weg AS1 zu Walen zwei in der zweiten Reihe ändern. Und die Art und Weise OS1, um uns drei in der dritten Reihe wiegen. Und ich werde die Überschrift für die zweite Reihe ändern. Hat dies die Art und Weise unser Abschnitt ist, werde ich einen anderen Weg OS Grund hinzufügen. Jemand oder acht, das einzige Geschäft, das von Hunden geführt wird, wie wieder, das ist ein Hund BAS Geschäft. Und für die dritte Reihe werde ich nur Hund wieder. Und wie geboren, wieder, erinnere dich an Top-Tier, den alten Text für die Bilder. Also werde ich es einfach mit den Überschriften übereinstimmen lassen. In diesem Fall. Das einzige Geschäft lief ein Hund für das zweite Bild und dunkel und hat für das dritte Bild getragen. Also mal sehen, ob dies zu unserer Webseite gehen und aktualisieren. Und jetzt können Sie sehen, dass wir unsere drei Reihen haben und beachten Sie bitte die dritte Reihe und die erste Regel, die durch einen eine leichte Abweichung in der zweiten Reihe gewähren. Ich möchte, dass der Hintergrund eine andere Farbe hat. Ich wollte, dass es ein hellerer Hintergrund ist, damit der Spaß dunkler werden kann. Und ich will auch das Bild auf der linken Seite und die Texte und die rechte Seite, aber nur für die zweite und metallische Reihe. Also lasst uns das tun, indem wir zu unserem Code-Editor gehen. Und lasst uns zuerst das Bild und die Tags auf geregnet austauschen, weil wir Bootstrap-Grid verwenden, das ist wirklich einfach zu tun. Alles, was ich tun werde, ist, dass ich die Spalte sieben auswählen werde, waren Van oder eine zweite Reihe. Ich werde es kopieren und dann löschen. Und dann werde ich es unter dem schließenden Tag Angebot Spalte günstig einfügen. Also nein, für die zweite Reihe können Sie sehen, dass das erste, was wir einen van haben, Es ist unsere Spalte fav ein Bild. Und das zweite, was wir Anna haben, ist unsere Spalte sieben Überschrift und Tags. Mal sehen, ob dieser Code oder eine Seitenaktualisierung. Und jetzt können Sie das Bild für die mittlere Reihe sehen, oder die zweite Reihe ist auf der linken Seite und die Texte und die Rate genau, wie wir es wollen. Jetzt müssen wir nur die Hintergrundebene und den Text dunkel machen. Ich gehe in den Code-Editor. Und für die zweite Regel werde ich nur den farbigen Hintergrund ändern, zu spät Hintergrund. Also jetzt, wenn ich davon sehe, wenn Sie schnell einen Blick auf die Webseite werfen, indem Sie das aktualisieren, können Sie sehen, dass es irgendwie erreicht, was wir wollen. Aber der einzige Grund, warum es dies tut, ist, weil es nach einer Rolle sucht , die in unserer CSS-Datei namens „late bar grained“ gesetzt wird. Das kann es nicht finden. Es ist also nur Standard und in Richtung normal auf der Seite, die einen weißen Hintergrund und schwarzen Text hat. Ich möchte einen Hintergrund, wie einen hellgrauen Hintergrund. Lassen Sie uns nun einen Regelsatz für unsere spät nach Korn Klasse hinzufügen. Um das zu tun, werde ich in mein Stylesheet gehen. Ich werde zum Abschnitt Y ofs scrollen. Ich werde einen neuen CSS-Selektor für unsere helle Hintergrundklasse hinzufügen. Und innerhalb der geschweiften Klammern werde ich den Hintergrund zu einem Hex-Wert von F1, F1, F1, F1 machen. Jetzt können Sie den Hintergrund zu jeder Farbe machen, die Sie wollen. Du könntest es sogar ein anderes Bild machen, was auch immer deine Lust auf dich nimmt. Aber für mich möchte ich einen hellgrauen Hintergrund. Und der Hex-Code, der einen hellgrauen Hintergrund gibt, wenn Sie entlang folgen, weil F1, F1, F1. Und sie werden das retten. Gehen Sie zurück zu unserer Webseite und klicken Sie auf Aktualisieren. Und Sie können sehen, wir haben einen schönen hellgrauen Balken für die mittlere Reihe genarbt, Frauen in der Art und Weise unsere Sektion. Und dann unsere erste Reihe und dritte Reihe, mit der Cn bar als unser Intro genarbt, um die Dinge schön und konsistent zu halten , wie unser Abschnitt als weder erstellen kann. Das einzige, was übrig ist, ein wenig von einem Rand von der Spitze des Drahtabschnitts hinzufügen , um so zwischen ihren Booten Aktion und der Art und Weise unseren Abschnitt Speer. Also, um das zu tun, werde ich einfach auf den Weg gehen unsere Sektion und DevTools. Ich werde einen neuen Regelsatz erstellen. Und ich werde Randspitze für einen Paxos hinzufügen, MSX Greer. Kopiere uns einfach. Nein, gut. Unser Stylesheet, PSTN und hatte Meer des Tages. Wenn wir die Seite aktualisieren, können Sie sehen, wie unser Abschnitt jetzt abgeschlossen ist. 18. Erstellen der Website – Kontakt: Einer der wichtigsten Teile der Website, und einige würden argumentieren, der ganze Zweck einer Website ist es, Menschen zu locken, Sie zu kontaktieren. Aus diesem Grund müssen wir einen Abschnitt „Kontaktieren Sie uns“ zu Ihrer Website haben. Werfen wir einen Blick auf Codierung dort und NIH in unserem Code-Editor und unter dem Drahtabschnitt. Aber wieder, mit n, dem schließenden Tag des div mit dem Klassencontainer, werden wir einen neuen Kommentar hinzufügen und wir werden uns kontaktieren. So wissen wir, dass NF-1 unten gibt es gemeinsame ist Kontaktieren Sie uns Abschnitt der Website. Wir werden jetzt einen Abschnitt hinzufügen und wir werden ihm nur einen Klassenkontakt geben. Wir werden dieses Abschnitt-Tag schließen, weil gut, Ich werde eine neue Spur mit n hinzufügen, der Abschnitt Kontaktieren Sie uns. Und für den ersten Teil der Abschnitt Kontaktieren Sie uns eine Versammlung wollen eine Überschrift und kontaktieren Sie uns. Und ein kleiner Absatz darunter steht Gan Touch heute. Also lassen Sie uns das hinzufügen. Ich werde H1 für Überschrift und Winterhilfe hinzufügen, kontaktieren Sie uns. Und wenn eine enge H1-Tag und darunter und nur gehen, um einen Absatz HTML-Tag hinzufügen und wieder, in Kontakt Tag. Und ich werde das Absatz-Tag schließen. Wissen Sie einfach C davon. Aktualisieren Sie unsere Webseite. Und Sie können sehen, dass dies auf unserer Seite hinzugefügt wurde. Und im nächsten, was ich unten möchte, ist dies eine Reihe, und ich möchte Spalten zu dieser Zeile meinen. Auf der linken Seite möchte ich nur Kontaktdaten wie E-Mail und Adresse. Und auf der rechten Seite ein von zwei weiteren Bildern, die sie hinzufügen möchten, ein Trend, der Bilderordner, Sie können sie unter Kontakt sehen, ein, Kontakt auch. Also fügen Sie das in unseren HTML hinzu. Also werde ich eine neue Spur hinzufügen, blau den Absatz. Und ich werde ein div mit der Klasse der Zeile hinzufügen, weil wir das Bootstrap-Zeilen- und Spaltensystem verwenden werden. Und dann in dieser Reihe will ich zwei Spalten. Und ich möchte, dass die Spalte auf der linken Seite etwas kleiner in der Spalte auf der rechten Seite ist, was wir mit dem Drahtabschnitt gemacht haben. Also für die erste Spalte und fügen Sie dann ein div mit der Klasse cURL für den Spaltenstrich hinzu. Und ich werde die Spaltenbreite von fünf haben. Ich werde das Div-Tag schließen. Und dann für die zweite Spalte, und wenn unser div mit der Klasse der Spalte sieben, weil 5 und 7 gleich 12 ist. Und die maximale Spalte, in der wir Paarreihe und Bootstrap verwenden können, ist 12. Und wenn ich das öffnende Tag beendet habe, und ich werde ein schließendes div-Tag hinzufügen. Also haben wir jetzt unsere zwei Spalten für einen Abschnitt „Kontaktieren Sie uns“. Wenn die erste Spalte, Ich möchte nur einige grundlegende Kontaktdaten hinzufügen. Also werde ich ein Absatz-Tag hinzufügen und ich werde E-Mail schreiben. Und für die E-Mail werde ich nur eine erfinden. So Top-Hund beim Hund business.com. Und ich werde dieses Absatz-HTML-Element schließen. Und ich will noch eine Schicht. Also werde ich einen weiteren Absatz Tag machen und wir werden y nichts schreiben, rufen geregnet und fühlte oder Wasser schlecht. Weil als Hundegeschäft. Und ich werde das Absatz-Tag schließen und jetzt möchten Sie die Adresse bewerten. Also werde ich damit beginnen, wieder ein Absatz-Tag zu schreiben. Und ich werde die erste Zeile der Adresse bewerten. Aber wie Sie wissen, gehen Adressen über mobile Fahrspuren, aber das sind keine separaten Absätze. Es ist einfach nur eine neue Spur innerhalb eines Absatzes. Also, wie haben wir eine neue Spur geschrieben? Der Strahl eine neue Spur durch Bewertung BR, BR für Zeilenumbruch oder Brot. Also habe ich gerade ein BR-Tag geworfen. Sie müssen es nicht schließen. Und ich werde die zweite Spur der Adresse lesen. Jetzt wollen Sie eine letzte neue Spur nehmen. Also werde ich einfach wieder r für Greg oder lahme Pause sein. Und ich werde das letzte Buch unserer Adresse schreiben. Und dann werde ich die Absatz-HTML-Elemente schließen. Und wir werden das sehen. Gehen Sie auf die Webseite und aktualisieren Sie nur, um zu sehen, wie das aussieht. Das sieht also gut aus. Und sie wollen zu Schäden an der Rate dieses Kontakt-Abschnitts hinzufügen. Um das zu tun, gehe ich zurück zum Code-Editor. Und weil wir zwei Bilder hinzufügen möchten, werde ich eine weitere Zeile mit einer anderen Spalte hinzufügen. Also haben wir n-Bit Gurt. Sie können eine Regel innerhalb einer Spalte hinzufügen, was genau das ist, was ich wissen werde, so dass wir zwei Bilder nebeneinander haben können, verhindern, dass die Rate Abschnitt der Kontaktieren Sie uns Seite unserer Website. Also sind wir dann unsere Spaltenbreite von sieben, was auf die Rate unserer Kontaktdaten ist, die wir gerade hinzugefügt haben. Und wir werden eine neue Spur schaffen. Und ich werde eine div-Klasse von Zeile hinzufügen und das schließende div-Tag hinzufügen. Weil wir eine Reihe wollen. Wir werden dann diese Spalte auf der rechten Seite. Und Netzwerke, die als unsere erste Reihe scheinen, haben wir 12 Spalten, die wir innerhalb der NASW-Zeile verwenden können. Also, weil ich möchte, dass die Bilder gleich groß sind, werde ich zwei Spalten mit Sex hinzufügen. Also werde ich ein div mit einem Klassenspalte Bindestrich Sacks erstellen und es schließen. Und ich werde ein anderes div mit dem Klassenspalte Bindestrich Sex und einem schließenden div-Tag erstellen. Also haben wir zwei Spalten Sex in einer Reihe. Nun dann unsere siebensäule. Schicht ist also etwas fortgeschrittener und Dinge, die wir bisher gemacht haben, aber das erlaubt uns, zwei Schäden ordentlich innerhalb der rechten Seite unseres Kontakt-Us-Abschnitts zu setzen . Wir möchten nur ein Bild zu jeder dieser Spalten hinzufügen. Also werde ich das Bild-Tag schreiben, SRC für Quelle. Und wie immer würden wir den Weg zwischen die Sprechzeichen setzen. Der Pfad ist der gleiche wie immer. Es ist verhindern, dass unsere Bilder Ordner. Und wir haben einen Kontakt dash ein J peg 2s, und einen Kontakt dash zwei J peg zu verwenden. Wie immer können Sie jedes Bild verwenden, das Sie wollen, Bett, das Sie entlang folgen. Sie können diese zu Schadensersatzansprüchen verwenden. Also sind wir die Bilder Ordner, Wald Schrägstrich, Kontakt, Bindestrich eins, JPEG. wie immer daran, einige alte Tags zu bewerten. So alt gleich und dann die Sprechzeichen und ging zu einem Kontakt Bild 1. Und ich werde das Bild-Tag schließen. Und ich werde plötzlich nur dieses Bild-Tag kopieren. Und waren dann unsere zweite Spalte, Ich werde es einfügen und ändern Sie die eins zu zwei, weil das zweite Bild wird Kontakt Bindestrich zwei genannt. Und ich werde die Alt-Tags in das Kontakt-Us-Bild 2 ändern. Ich werde keine weniger gute ROR-Seite sehen und aktualisieren. So im Moment können Sie sehen, dass es versucht, die Bilder passen waren dann unsere Spaltenbalkenbilder einfach viel zu groß sind. Also werden wir einen CSS Truck verwenden wurde vor verwendet, um die Bilder sind ein 100 Prozent Web-GIS. Wir gehen zu unserem Stylesheet. Wir gehen auf den Grund. Wir werden einen Kommentar hinzufügen. Kontaktieren Sie uns. Wir wissen also, dass jede echte SAT, die wir darunter setzen, sich auf den Kontaktbereich unserer Website bezieht. Wir werden die Kontaktklasse lesen. Und in Bildern als Element-Selektor. Wie immer bedeutet dies unsere Rolle, da sie auf Schäden innerhalb der Kontaktklasse zutreffen wird . Und wenn ich geschweifte Klammern hinzufüge und ich werde Wörter zu 100 Prozent wiederholen und sehen, ob ich auf unsere Webseite zurückgehe, können Sie sehen, dass diese Bilder wirklich ordentlich in jeder Spalte enthalten sind. Also, wenn Sie ein wenig verwirrt waren, die erweiterte Raumaufteilung, die wir gerade verwendet haben, lassen Sie mich versuchen und zeigen Sie es Ihnen visuell, wird entlüften erzählt. Wenn ich zum Kontaktbereich unserer Website gehe und es öffne. Sie können sehen, dass wir eine Zeile hier gezeigt haben. Wenn ich in diese Regel gehe, können Sie unseren ersten Satz von Spalten sehen. Wir haben eine Spalte, wo für fünf nach links und eine Spaltenbreite von sieben auf die Rate, sie werden diese zweite Spalte beenden, peinlich sieben. Wir haben eine Zeile, und innerhalb dieser Zeile haben wir zwei neue Spalten mit gleicher Breite, Spaltensex und Spaltensex. So können Sie sehen, wie eine Schreibtischreihe Spalten mit Anna hat. Und diese Zeile befindet sich innerhalb einer Spalte, innerhalb einer Zeile mit zwei Spalten. Und so gibt es nur wirklich zwei Verbesserungen, die ich hier zum Abschnitt Kontaktieren Sie uns machen möchte , um es viel schöner aussehen zu lassen. Und das ist zuerst, sie zu senden und die Marge die Kontaktieren Sie uns und kontaktieren Sie heute Text. Um das zu tun, müssen Sie sie zuerst in einen Dev setzen. Gehen wir also zu unserem HTML-Dokument und lassen Sie uns eine neue Ebene über dem H1-Überschriften-Tag hinzufügen. Lassen Sie uns ein div mit der Klasse Kontakt Bindestrich Überschrift erstellen. Und ich werde das schließende div direkt unter den schließenden Absatz-Tags setzen . Ich werde das retten. Und ich werde zu unserem Stylesheet springen und einen Klassenselektor hinzufügen, Kontakt Bindestrich Überschrift. Aber wirklich ist es genau zu der Klasse, die ich gerade für den Entwickler hinzugefügt habe, die ich dort H1-Überschrift und Absatz Anti und geschweifte Klammern gesetzt habe. Und ich werde Text ausrichten Mitte hinzufügen. So zentralisieren Sie den Text. Und ich werde einen Rand an die Spitze von 40 Pixeln hinzufügen. Und wir werden von s sehen, gut unsere Webseite und aktualisieren. Und Sie können sehen, dass wir jetzt als Marge schön und zentralisiert haben. Das Letzte, was ich tun will, ist, die Adresse zu fett zu machen. Das ist wirklich einfach zu tun. Gehen Sie einfach zu Ihrem HTML-Dokument. Und kurz nach dem Eröffnungsabsatz, Tag für ein Kleid. Und wenn Sie ein weiteres Tag hinzufügen, B, die für fett steht, und kurz vor dem schließenden Absatz-Tag, und fügen Sie dann ein schließendes Körper-Tag hinzu, das wiederum für fett steht. Jetzt, wenn ich dieses Couture-HTML-Dokument sehe und aktualisieren, können Sie sehen, dass die Adresse fett ist. Dieser Abschnitt „Kontaktieren Sie uns“ ist jetzt abgeschlossen. 19. Erstellen der Website – Footer: Der letzte Abschnitt, den wir auf unserer Website hinzufügen möchten, ist ein weiterer. Lassen Sie uns also unseren Code-Editor laden. Und unter dem Abschnitt „Kontaktieren Sie uns“. Fügen Sie erneut eine Spalte aus dem rechten Drittel hinzu. Und wir werden den Kommentar schließen. Und lassen Sie uns einen Abschnitt hinzufügen, wo, wenn die Klasse Mitte und wollen den schließenden Abschnitt Tag hinzufügen. Und das erste, was ich im ersten Jahr will, ist eine Linie über den Bildschirm. Um dies zu tun, schreiben wir einfach HR. Das HR HTML-Element wird eine Zeile über den Bildschirm setzen. Es steht für horizontal real, und es ist, was wir verwenden, wenn wir nur eine Linie über den Bildschirm setzen wollen , wie wir es in der Abbildung tun. Und sie waren jemand würde einen Absatz mit den Jahreskollegen hinzufügen, die derzeit 2021. Ich werde einen Bindestrich setzen und ich werde den Namen mit dem Geschäft setzen, was in diesem Beispiel das Hundegeschäft ist. Sie können es überall in der Figur platzieren. Und wir werden das Absatz-Tag schließen und wollen sehen, ob dies auf die Webseite gehen und aktualisieren. Und Sie können sehen, dass wir jetzt einen Finger auf unserer Website haben. Zu kleine Dinge, die ich hier machen möchte. Erstens möchte ich die Fußzeilen-Tags zentralisieren. Und zweitens möchte ich eine Marge von oben in dieser Zeile, die wir gerade dem Abschnitt Kontaktieren Sie uns hinzugefügt haben. Also werde ich zum Stylesheet springen. Ich werde einen Kommentar hinzufügen, wie wir es tun. Ich werde CR schreiben und ich werde den Kommentar schließen. Und dann werde ich die gefesselte Klasse verwenden, weil der CSS-Selektor, wir erstellen es einfach. Und als ich geschweifte Klammern hatte und wenn ich Text ausrichten Mitte hinzufügen , um die Fußzeilen-Tags auszurichten, die wir gerade in der Mitte hinzugefügt haben. Und dann werde ich oben 40 Pixel am Rand hinzufügen, um den Abstand zwischen oben links und dem Abschnitt Kontaktieren Sie uns auszufüllen. Ich werde nicht sehen, ob unser Stylesheet. Ich gehe auf unsere Seite. Und Sie können sehen, die Tags ist nicht zentralisiert und wir haben eine Marge zwischen dem Filter und der öffentlichen Kontaktieren Sie uns Abschnitt. Das Letzte, was ich tun möchte, ist einfach, diese 2021 kahl zu machen. Ich werde das auf die gleiche Weise tun, wie wir es als Adressteil des Kontaktieren Sie uns Abschnitt nennen. Also werde ich zu meinem HTML-Editor gehen und gerade vor 2021. Und wenn ich das b-Tag und direkt nach dem 2021 Abschnitt hinzufüge und dann das schließende p-Tag hinzufüge. Ich werde nicht sehen, ob das auf unsere Seite zurückkommt und aktualisiert wird. Und Sie können sehen, wir haben jetzt eine komplette für auf unserer Website. 20. Erstellen der Website – Fonts und Links: Oder die Website ist ziemlich vollständig. Wir haben unsere Navigation an Ort und Stelle. Wir haben unsere Endrew, wir haben die abate Sektion, wir haben die YR-Sektion. Wir haben einen Abschnitt „Kontaktieren Sie uns“, und wir haben eine Messe, das sieht alles wirklich gut aus. Eine Sache, die ich tun möchte, ist, eine Schriftart von Google zu importieren. Nur so haben wir einen schönen benutzerdefinierten Spaß auf unserer Webseite. Um das ein wenig nackt zu machen, werden wir die gleiche Methode verwenden, die wir verwendet, wenn Creon oder Übung Website. Und das war, um einen Google-Spaß zu importieren. Also lassen Sie uns zu Fonts dot google.com gehen. Und ich werde einen Spaß finden, einen See, einen wirklich wie Leto als Spaß. Und gut. Moderne Gallen sind professionell. Also werde ich das wählen. Und wie zuvor, Ich werde auf wählen Sie als Stil auf Licht, regelmäßig und fett klicken. Dann bei der höchsten Rate der Schriftarten Punkt google.com Seite, werde ich klicken Sie auf Ihre ausgewählten Familien anzeigen. Und in der ersten Box werde ich die gesamte Link-Referenz auswählen und kopieren Sie sie unseren Code-Editor und gehen Sie zum Leiter unserer Website direkt unten, wo wir die Stylesheet Punkt CSS Link Referenz hinzugefügt haben. Ich werde eine neue Ebene erstellen. Ich werde die Linkreferenz für den Google-Spaß einfügen. Ich werde nur diese Linie hinüberschieben. Ich werde nur so, dass es unter dem obigen ist, nur um die Dinge schön und ordentlich aussehen zu lassen. Und ich werde sehen, ob meine index.html, ich gehe zurück auf die Google Fonts-Seite, und ich werde die CSS-Regel auswählen und kopieren. Ich gehe dann zurück zu meinem Stylesheet dot css und erstelle einen neuen Element-Selektor unter meinem Schriftgrößen-Kommentar. Also werde ich nur eine neue Zeile unter dem H2-Regelsatz erstellen. Und weil ich weniger Spaß auf die gesamte Website anwenden möchte und wann der Body-Element-Selektor verwendet werden soll. Ich werde geschweifte Klammern hinzufügen. Und ich werde uns dann meine Font-Familie-Referenz bezahlen. Und ich werde das nicht sehen. Gehe zu meiner Webseite und aktualisiere sie. Sie können sehen, dass es Spaß hat jetzt wirksam. Aber nur um sicher zu sein, werde ich zu Inspect Element gehen und ich werde nur die Überschrift auswählen. Und wenn ich nach unten scrolle zur Körperreferenz, können Sie sehen, dass die Schriftfamilie Leto ist. Jetzt sieht wirklich gut aus und du musst den späteren Spaß nicht nutzen. Sie können jede Schriftart verwenden, die Sie für Ihre eigene Website wünschen. Aber wenn Sie entlang folgen, werden die spätere Farm verwendet. Das letzte, was wir wirklich tun wollen, ist, wenn Sie einen Blick auf unsere Navigation und klicken Sie auf eines der Worte, sie nicht wirklich Deana Spaß in der Minute. Es gibt keine echte Navigation. Unsere Website ist also eine einseitige Website. Wenn wir also auf diese Schaltflächen klicken, anstatt sie uns auf eine andere Webseite gebracht haben, möchten wir, dass sie uns zu einem Abschnitt der Desk-Webseite bringen. Also zum Beispiel, wenn ich auf die Art und Weise unseren Abschnitt klicke, wollte ich für uns nach unten scrollen und uns zum Abschnitt Warum uns bringen. Also, wie haben wir das gemacht? Wenn wir zu unserem Code-Editor gehen, ist das erste, was wir tun müssen, ein AD oder eine Kennung zu den Abschnitten hinzuzufügen. Wenn wir also einen Blick auf unsere Navigation werfen, haben wir einen Heimbereich und einen Bootsabschnitt. Äh, warum unsere Abteilung? Und eine Kontaktabteilung. Daher müssen wir für jeden dieser Bereiche eine ID auf unserer Webseite hinzufügen, damit wir diese Schaltflächen verknüpfen können, so dass die Webseite zu diesen Bereichen bewegt, wenn Sie auf sie klicken. Also die erste Idee, die ich hinzufügen werde, ist für zu Hause. Und ich werde es zu unserem Andrew Abschnitt hinzufügen, weil wir wollen, dass der Home-Button uns an den Anfang der Seite bringt. Also werde ich ein Attribut N2 hinzufügen, unseren Abschnitt für die n-te Zeile. Also werde ich es vor der Klasse der gebogenen Resektion hinzufügen. Und ich werde nur Ray AD gleich Sprachzeichen. Und für das AD ihres Abschnitts oder der Kennung, ich gehe oder ein Zuhause, wenn ich eine ID für unser Boot hinzufügen muss. Also werde ich zum Byteabschnitt und als Attribut im öffnenden Abschnitt-Tag für den nahe gelegenen Bereich scrollen . Und wir werden ein weiteres AD hinzufügen. Und ich werde ein Byte für uns schreiben. Ich werde nach unten zu den Drähten zu öffnen Abschnitt Tag scrollen. Und wieder werde ich eine ID hinzufügen, die wieder AD gleich ist und in Sprechzeichen und Ravenna Sprachzeichen und wann immer ein Weg Dash uns, um sicherzustellen, dass jedes Mal, wenn es ein Leerzeichen in dem, was Sie lesen, Sie verwenden einen Bindestrich statt der Speere. Und schließlich werde ich zum Kontaktbereich scrollen. Und wieder im Eröffnungsbereich, HTML-Tag für den Abschnitt Kontaktieren Sie uns, werde ich AD Adler, Sprachzeichen, Kontakt, Sprachzeichen schreiben . Daher haben wir jetzt eindeutige Kennungen hinzugefügt, die IDs für die Aktion „Kontaktieren Sie uns und Häuser“ sind. Also, wie haben wir diese Knöpfe gemacht? Kein Link zu ihnen Bereiche, so dass, wenn Sie auf sie klicken, die Webseite bewegt sich zu diesem Bereich, wird beginnen, indem Sie einen Link so lesen, wie wir normalerweise eine H ref verwenden würden. Also vor dem Schreibtisch Tag und für zu Hause und wann die a href Tag schreiben. Und nach dem schließenden HTML-Tag für zu Hause, Ich werde das a href -Tag schließen, das Ende, die Übung, die ich Ihnen beigebracht habe, wie man eine, a, eine Falle zu einem EKG verlinkt, starten Sie eine Webseite, zum Beispiel google.com. Aber wir wollen tatsächlich auf die IDs verlinken, die wir gerade erstellt haben. Also, wie haben wir das gemacht? Zwischen den Sprachzeichen rechts, Hash und dann der ID, mit der die Alters-Referenz verknüpft werden soll. So weniger ist die Home-Taste. Also wollen wir, dass es zu Hause AD verlinkt. Wir erstellen es einfach, damit wir nach Hause schreiben. Nun, was ich tun werde, um die Dinge schnell und einfach zu machen, ist, dass ich nur das öffnende HREF-Tag kopieren werde, und ich werde es vor den anderen drei letzten Elementen einfügen. Und ich werde dann das schließende, AH, href Tag kopieren. Und ich bezahle uns, dass nach den verbleibenden drei, das sind Datums, uh, Name wird reingehen und die IDs für jeden der restlichen drei ändern. Für den Abschnitt „Über uns“ war die ID, die wir erstellt haben, ein Byte. Also werde ich es zum Hash machen. Und in einem Boot für die Art und Weise unsere Sektion, die ID, erstellen wir es mit uns. Also werde ich wieder, re dash Bus ein M für den Kontaktabschnitt oder AD war Kontakt. Also werde ich den H ref Hash-Kontakt machen. Ich werde nicht sehen, ob S auf unsere Webseite gehen und aktualisieren. Also sind hier ein paar Dinge passiert. Wir haben das Styling verloren. Das liegt daran, dass wir vor dem letzten Artikel eine H Ref hinzugefügt haben. Also müssen wir das in Ordnung bringen. Aber auch die Schaltflächen in der Navigation sollten jetzt funktionieren. Also, wenn ich auf ein Boot klicke, können Sie sehen, dass die Webseite bewegt sich nach unten zu ihrer Bisektion. Jetzt, wenn ich klicken, warum OS, Sie können sehen, es bewegt sich nach unten auf die Art und Weise unsere Abschnitt und Ethik, dass Kontakt und bewegt sich nach unten auf den Kontaktabschnitt. Also die Navigation, die sie funktioniert, müssen wir nur das Styling beeinflussen. Wenn ich also ein Element von der Seite mit DevTools auswähle und eines der letzten Elemente in unserer Navigation auswähle. Sie können sehen, was los ist. Sie können sehen, dass die Ränder, die wir es erstellen, noch auf die letzten Elemente angewendet werden. Aber der Grund, warum der Abstand und es gibt keine wieder geschlossen ist , ist, weil das letzte Element Naim-Seite ist, ein H ref HTML-Element. Daher müssen die Ränder auf die H ref und nicht auf das letzte Element angewendet werden. Wenn wir also in unseren Code-Editor gehen und zum Navigationsregelsatz gehen, erstellen wir es für die letzten Elemente. Wir müssen eine echte SAT für die hinzufügen, AH, Flöße und die Navigation. Also, darunter, wo wir den Navigations-ALI-Regelsatz erstellt haben, werde ich die Post-Op-Navigation bewerten. Und dann werde ich den A-Element-Selektor für die, AH, Refs waren dann oder Navigation verwenden . Und ich werde geschweifte Klammern hinzufügen. Und dann plötzlich nur gehen, um diese Marge zu kopieren lachte, dass wir für die LA und legte es in die Navigation eine Rolle, sagen Sie es. Und ich werde das aus dem LA entfernen. Echt traurig. Und sehen Sie, ob jetzt, wenn wir auf unsere Webseite zurückkehren und aktualisieren, unsere Ränder zurück sind. Aber man kann sehen, dass die Längen keine blaue Farbe haben, was sie vorher nicht waren. Dies liegt daran, dass standardmäßig Bootstrap als Sainz, eine blaue Farbe zu Ihrem Link. Und weil wir gerade Links zu unserer Navigation in Form von Fallen hinzugefügt haben. Bootstrap weist automatisch eine Farbe blau zu. Sie können sehen, dass Sie in DevTools den letzten Tag auswählen und Sie können sehen, dass es diese blaue Farbe von der bootstrap.css erbt. Also müssen wir nur eine Farbe CSS-Eigenschaft und unser Stylesheet hinzufügen, um das zu überschreiben. Also in der Navigation, einem Regelsatz, erstellen wir es einfach. Ich werde die Eigenschaftsfarbe und den Wert von Sex-Nullen hinzufügen, was der Hex-Code für Schwarz ist. Ich werde dieses Stylesheet sehen. Gehen Sie zurück zu unserer Webseite und aktualisieren Sie. Und Sie können unsere Links sehen und unsere Navigation sind nicht wieder schwarz. 21. Mobile Reaktionsfähigkeit: So können unsere Websites und sie spielen und einen Desktop entweder. Es ist erstaunlich. Aber da viele Leute heutzutage Websites auf ihrem Handy ansehen, ist es wichtig, dass Websites oder mobile responsive. Was bedeutet mobil responsive? Es bedeutet, dass die Website auf jeder Bildschirmgröße, einschließlich Handys, gut aussieht. Schließlich, was ist der Sinn, eine wirklich schön aussehende Website auf dem Desktop zu haben? F ist nicht schön auf einem Handy. Wie stellen wir sicher, dass diese Website auch auf Mobilgeräten gut aussieht? In DevTools sehen Sie oben in der Symbolleiste dieses Symbol. Es sieht aus wie ein Handy und ein iPad zusammen. Wenn Sie den Mauszeiger darüber bewegen, steht der Responsive Design-Modus. Gib dem einen Riss. Auf Chrome. Sie befindet sich auf der linken Seite der Werkzeugleiste „Entwicklungstools“. Wieder, wenn Sie den Mauszeiger über sie, Sie werden sehen, Schalter Gerät Symbolleiste, es sieht aus wie auf Handy und ein APR zusammen geben, dass Uhr und das ist, wie Sie den mobilen Responsive-Modus auf Google Chrome zugreifen. Es gibt also zwei Möglichkeiten, wie wir als mobile responsive mehr verwenden können als DevTools. Der erste Weg ist, dass wir nach oben in der Symbolleiste gehen und auf responsive klicken und wählen Sie ein Gerätetypen. So können wir iPad zum Beispiel wählen. Und Sie können sehen, dass es die Breite Ihrer Website auf das reduziert , wie Ihre Website auf einem iPad aussehen würde. Der andere Weg ist, wir können auf der rechten Seite der Webseite gehen, wenn kein Mauszeiger darüber, bis Sie einen horizontalen Schieberegler sehen. Und wir können die Breite der Website manuell anpassen. So hydras unsere Website schauen, sobald wir anfangen, immer sterben, um die kleineren Bahnen. Also lasst uns weiter abnehmen. Und Sie können sehen, wenn es auf eine mobile Breite kommt, unsere Website beginnt auseinander zu fallen, erlauben Sie den Einführungsbereich und die Navigation kann in Ordnung aussehen. Aber sie sind Bisektionen gebrochen. Die Y der Abschnitte sind definitiv kaputt. Und der Abschnitt „Kontaktieren Sie uns“ braucht nicht viel Bär. Also, wie sollen wir uns faxen? Wie werden wir unsere Website auf Mobilgeräten gut aussehen lassen? Glücklicherweise kommt Bootstrap eine Glocke und Funktionen, um Ihre Website leicht mobil reaktionsschnell zu machen. Und wird buchstäblich nur ein paar Sekunden dauern, um zu implementieren. Aber zuerst müssen Sie verstehen, hoch als mobile responsive Funktionen in Bootstrap arbeiten mit r Zeilen und Spalten. Wenn es um die Spalten geht, erstellen wir es in unserer HTML-Datei. Wir verwenden das Präfix Punkt cURL für Spalte, Bindestrich, und dann die Anzahl der ruhigen Bahnen wir es wollen. Also, wenn wir wollen, dass eine Spalte für eine ging, haben wir eine verwendet. Wenn wir eine Ruhe wollen, wenn fünf, wir verwendet fav, etc. Aber es gibt tatsächlich eine zusätzliche Präfekte, die wir in unsere Spalte Klassen aufnehmen können, die es uns ermöglichen, unsere Website leicht mobil ansprechbar zu machen. Dies sind Sam für kleine, md für Medium, LG für große und Exil für extra große. Und wir fügen diese zwischen dem CoA L-Strich und der Spaltenbreite hinzu. Zum Beispiel würden Sie CoA L Strich S, N für kleinen Strich für die Spaltenbreite von eins schreiben . Was bedeuten diese Assays, MMD, LG und Eier AL, Präfixe, und was tun sie? Jede dieser Referenzen ist verheiratet von Ihrer Website, an diesem Punkt, egal welche Rotverschiebung für Ihre Spalte definiert ist, wird es automatisch. 12 oder in voller Breite. Wenn Sie also einen Blick auf Ihre Website innerhalb von DevTools werfen, Sie die Breite Ihrer Website ändern, werden Sie oben in der ersten Box bemerken, können Sie die Pixelbreite Ihrer Website sehen. So zum Beispiel, hier kann ich als 902 Pixel von Wörtern sehen. Hier kann ich sehen, es ist 1112 Pixel Web und haben eine Mega wirklich klein. Hier können Sie sehen, es sind 432 Pixel nass. Dies ist die Breite Ihrer Website. Also, wenn Sie es auf einem Handy sehen, wird es wahrscheinlich irgendwo etwa 590 bis 600 Pixel Web sein. Und wenn Sie für Sie Ana auf einem Desktop sind, könnte es bis zu 1400 Pixel nass sein. Zum Beispiel, wenn wir die extra großen Präfekte nehmen, die wir zwei Spalten hinzufügen können, jede Fenstergröße unter 1200 Pixel, und die Spalte wird automatisch 12. Groß, jede Fenstergröße unter 982 Pixel. Und die Spalte, wenn es 12 Medium, jeder Browser Web unter 768 Pixel und die Spalten werden automatisch voll Web. Und kleines Ende einer weniger als 576 Pixel und Spalte, egal was Sie definiert haben, es wird voller Keil oder eine Spalte von 12 werden. Wenn das jetzt ein wenig verwirrend ist, mache ich viel mehr Sinn, wenn wir in die Praxis umgesetzt haben, die heute NIO-Byte waren. Lassen Sie uns also einen Blick auf unsere Website werfen und herausfinden, an welchem Punkt wir die Spalten brauchen , um voll Web zu gehen, damit es auf Handy schön aussieht. Also, wenn wir einen Blick auf ihre Bisse Aktion und langsam beginnen, um die Breite unserer Website zu reduzieren. Sie können bei 1100 Pixel sehen, aber es sieht immer noch gut aus. Und wenn wir weitermachen, können Sie 130 Pixel nass sehen. Es sieht immer noch gut aus. Aber dann um die 750 Pixel-Marke, beginnt es wirklich zerquetscht und nicht so schön. Wenn wir also einen Blick auf unser Gittersystem werfen, das Bootstrap uns anbietet, möchten wir nach einer Größenpräfekten suchen, die unsere Spalten automatisch auf eine volle Breite oder Spaltenbreite von 12, etwa 750 Pixelmarkierung gehen lassen. Und wir können sehen, dass Medium das ist , das wahrscheinlich am besten für uns funktionieren wird, weil es automatisch die Säulen für Med in jeder Größe unter 760 in Pexels gehen. Das ist also eine, die wir benutzen werden. Also, wie wir dies implementieren, war wirklich nur ein Fall, sie Spaltenklassen zu ändern , um diese Größenpräfekte als Teil des Namens einzuschließen. Wenn wir also einen Blick auf den R nach R Abschnitt nehmen, können Sie in der Minute sehen, in der wir Spalte Bindestrich 4 haben, haben wir kein Präfix eines Sagens enthalten, wenn diese Klasse. Also, um es hinzuzufügen, alles, was wir tun würden, ist diesen Spaltenstrich vier zu nehmen. Und nach dem ersten Strich bei md für Medium, und dann ein weiterer Strich, so dass es jetzt wie Spalte, Bindestrich, AMD, dash 4 und fester Arbeit aussieht . Wir müssen alle drei ändern. Ehrfürchtig. Also für die zweite Spalte und damit unseren Abschnitt und die Klasse nach dem ersten Bindestrich werde ich md für Medium und einen weiteren Bindestrich hinzufügen. Und die CME für ein Dessert nach dem ersten Bindestrich und dem Klassennamen. Also CRL dash, AMD, dash vier. Ich weiß, dass c davon. Nun, wenn wir zurück zu unserer Webseite und aktualisieren, können Sie sehen, weil wir bei 750 Pixel dort durch unsere Abschnittsspalten haben automatisch, wenn volle Breite. Also, wenn wir anfangen, schrittweise die Breite für die Seite zu erhöhen, können Sie sehen, sind über 768 Pixel. Die Spalten sind als ein Netz von vier definiert. Also sind wir drei Spalten von nass für vier. Und wenn eine Ehre 768 Pixel, werden sie automatisch volle Breite. Und wir können sehen, dass, wenn wir sie inspizieren, Sie sehen können, dass die Spalte voller Breite Bürger ist. Wir werden unsere Website einfach und schnell, mobil und reaktionsschnell machen. Aber wir wollen nicht durch Ihre anderen Klassen gehen zu müssen, wo wir Spalten und Dyad MD dazwischen hinzugefügt haben, ist alles, dass Angriff ihre Zeit erlauben. Also werden wir tun, was man als Find and Replace bezeichnet. Also, damit das funktioniert, was wir tun wollen, ist auf die Klassenänderungen, die wir gerade gemacht haben und damit OS Abschnitt, keine Sorge, wir werden sie erneut anwenden. Aber für die Mathematik, die ich verwenden werde, was im Grunde ein Fund und Ersetzen ist. Wir müssen den Bioabschnitt zurücksetzen, bevor wir das mittlere Präfix anti-it hinzugefügt haben. Also für alle drei Klassen, Ich werde nur die AMD und Bindestrich entfernen, so dass alle drei Klassen und ich Spalte Strich vier gelesen und ich werde sehen, ob, also werde ich nicht einen finden und ersetzen. Was ich tun werde, ist, dass ich Säulenstrich finden und ersetzen werde. Und ich werde es in Spalte Bindestrich, d Strich ändern, der das mittlere Präfix zu allen Spaltenklassen hinzufügen wird , die wir in unserer index.html hinzugefügt haben. Also, wie machen wir das? Nun, dann unser Code-Editor, Sie gehen zu Ihrer Symbolleiste und gut vorgetäuscht und finden ihn Puffer. Oder Sie können einfach die Strg-Taste drücken und F drücken. Dies wird unsere Symbolleiste Suchen und Ersetzen unten in unserem Code-Editor laden. Das erste, was wir hinzufügen möchten, ist das, was wir finden wollen. Also wollten wir cURL und Dash finden. Wir wollen Replay bewerten und wir wollen es durch CLL dash ersetzen, AMD dash. Also wieder, um dies klar zu machen, werden wir finden und ersetzen alle COO L Dash-Klassen waren van oder index.html. Und wir werden es durch SEO L Dash ersetzen, Dash. Also finde ich dann klicken Sie auf Alle ersetzen. Sie können sehen, Blick in unser Dokument, wenn ich nur schließen, wie Symbolleiste unten ist, dass wir es nicht mehr brauchen. Wir haben das mittlere Präfix zu allen unseren Spaltenklassen hinzugefügt, so dass es zu ihrer Bike-Aktion hinzugefügt wurde, wie wir es zuvor getan haben. Wenn wir nach unten scrollen, können Sie sehen, dass es dem Abschnitt Warum uns sowohl für die Spaltenbreite von 75 hinzugefügt wurde. Es wurde hinzugefügt, um den Abschnitt „Kontaktieren Sie uns“ wieder für ihren Kleiderbereich und für die Bilder und auch für die Schäden waren dann der Abschnitt „Kontaktieren Sie uns“. Also werde ich nicht sehen, ob dies zurück zu unserer Webseite gehen und aktualisieren. Und wenn wir nur unsere Fenstergröße bis hin zu einer mobilen Größe waren, und werfen Sie einen Blick auf unsere Website. Wie wir durch blättern, können Sie sagen, dass sie von unserem Abschnitt in voller Breite gegangen ist, die ausscheiden ist. Der Drahtabschnitt ist vorwärts gegangen, was auch gut aussieht. Und der Abschnitt „Kontaktieren Sie uns“ ist voll rot geworden, was auch gut aussieht. Jetzt haben wir eine Website, die nicht nur auf dem Desktop, sondern auch auf dem Handy schön aussieht . Und wie Sie sehen können, sieht es nicht nur auf Mobilgeräten und Desktops gut aus, sondern sieht auch auf Geräten wie iPads gut aus. Denn wenn ich den Keil von unserer Website vergrößere, können Sie sehen, dass sich die Spalten gut an die Breite anpassen. So ist dies, was unsere Website auf jeder Bildschirmgröße reagieren kann und dass Gloria auf jedem Gerät, dank Bootstrap und das Säulensystem, haben wir jetzt unsere Website, die nur gut aussehen auf dem Desktop. Und zwei sind voll mobile responsive Website. Und eine Frage von Minuten. 22. Wie du die Website deine eigene machst.: So ist unsere Website jetzt verschwunden und es sieht fantastisch aus. Etwas, das ich wirklich schnell durchlaufen wollte, ist, wie Sie die Website, auf der Sie sind, mit ein paar einfachen Verbesserungen machen können . Ich können Sie am Ende mit einer völlig anderen Buchung Website Nacht für diesen Teil des Kurses, Ich werde nicht so tief gehen, aber die Änderungen, Ich bin Meghan, Ich werde nur die Änderungen wirklich schnell machen und ermöglichen Ihnen , um mit mir zu kommen. So können Sie sehen, wie schnell und einfach Sie das, was wir gerade erstellt haben, nehmen und es zu etwas Eigenem machen, an etwas völlig Einzigartiges und Membran machen können . Das erste, was ich tun will, ist, einen neuen Hintergrundschaden zu finden. Das haben wir bei der Erstellung der Website kurz angesprochen. Und es wird der gleiche Prozess sein. Ich werde zu Unsplash gehen, wenn eine Suchleiste körnt. Und ich werde ein Bild finden, einen See. Diese Orange ist wirklich Kontrast in wirklich schön. Also werde ich das herunterladen. Ich gehe zu meinem Bilderordner. Ich werde das Bild, das ich gerade heruntergeladen habe, in den Bilderordner hinzufügen. Und ich nenne es einfach neue Hintergründe. Ich gehe zurück zum Website-Ordner und ich werde die index.html kopieren und einfügen oder duplizieren. Und ich werde es nur Index Dash T2 nennen. Ich werde dann unseren Code-Editor öffnen. Und ich werde das ziehen und Strich, Bindestrich zwei und auf den linken Pin unserer Kerndaten. Das erste, was ich tun werde, ist, dass ich dieses neue Hintergrundbild verknüpfen werde. Also habe ich es New Strich Hintergrund genannt. Also gehe ich dorthin, wo wir unseren Hintergrund und unser Stylesheet hinzugefügt haben. Und ich werde das in einen neuen Hintergrund umwandeln. Und dieses Bild ist auch ein J peg und C von S. Und dann gehe ich zurück zu unserem Website-Ordner. Ich werde doppelklicken und unseren Index Bindestrich, um die Website und unseren Browser zu laden. So können Sie sehen, dass wir ein neues australisches Hintergrundbild haben. Das nächste, was ich tun möchte, ist, die Überschriften- und Absatz-Tags über dieses Bild zu verschieben. Also werde ich nur zu unserer index.html gehen und ich werde b die H1-Überschrift und Absatz nennen. Ich werde es entfernen, wenn es scheint, unser Bild zu entwickeln und zu sehen, ob es. Das nächste, was ich tun werde, anstatt drei Spalten hier zu haben, will ich Wald über zwei Reihen. Also werde ich einfach eine der Spalten entfernen. Und wir werden die Säulen von Sex machen. Ich werde diese beiden Spalten kopieren und ich werde sie einfügen, blasen die beiden Spalten sind bereits da und nur die Schäden sind anders. Ich werde ihren Biss drei MHz und damit ein Bild verwenden. Ich werde sehen, ob das und aktualisieren. Und wissen Sie, sehen wir, dass wir vier Spalten hier gezeigt haben. Für die Art und Weise, wie unser Abschnitt, werde ich die dritte Reihe entfernen. Also werde ich zur dritten Reihe gehen und sie aus dem Ebenenabschnitt entfernen. Und ich gehe auch zu Spears zwei Spalten etwas anders heraus. Also werde ich den Text kleiner machen. Also werde ich die Spalte eins für den Text für ein Bild größer machen. Und wann soll ich die Bildspalte E. machen und ich werde diesen Diablo replizieren. Also für die zweite Reihe werde ich sie zu jeder Kolonie und zur Textspalte vier machen. Und ich werde das speichern und unsere Seite aktualisieren. Und Sie können sehen, es gibt keine Beine viel auf jeden Fall viel größere Bilder und viel kleineren Text, um den Text Valley gibt es Bereich und das wird tragen. Ich werde diese Absätze nur etwas größer machen. Also werde ich Software-App einschalten, und ich werde einfach den Absatz kopieren und einfügen, den wir bereits unter dem Absatz hatten, der bereits vorhanden war. Und ich werde dasselbe für die zweite Reihe tun. Ich werde den Absatz durchbohren, den ich gerade kopiert habe. Blasen Sie den Absatz, der bereits da war. Sehen Sie sich und VR-Webseite. Sie können die Tags sehen und sie fielen Zai dieses Gebiet viel nackt. Für den Abschnitt „Kontaktieren Sie uns“ werde ich diese beiden Bilder auch größer machen. Also gehe ich zu den Spalten für den Abschnitt „Kontaktieren Sie uns“. Und die Spalte, die der TMJ mit n gesetzt ist, werde ich 12 machen. Und dann werde ich die Spalte machen, die auch die E-Mail- und Adressdetails 12 hat. Also jeder einen Blick auf die Webseite werfen. Sie können sehen, wir haben jetzt viel größere Bilder von 12 Cent Relais der Kontaktieren Sie uns Text. Wenn ich also zu unserem Stylesheet gehe, Winkel nach unten zum Kontaktieren Sie uns Kommentar, können Sie sehen, dass wir kein richtiges Mitspracherecht oder NPS für Kontakt haben. Also werde ich einfach schnell einen erstellen. Also werde ich einen Selektor für einen Kontakt geschweifte Klammern erstellen. Und ich werde Text ausrichten Mitte setzen und sehen, ob ich zu unserer Seite zurückgehe und aktualisieren, Sie können die Kontaktdaten sehen oh, nein, zentralisiert. Und ich denke, anstatt Regenschäden zu haben, werde ich die Bilder rechteckiger machen, aber mit einem Grenzradius. Also, wenn ich DevTools starten und eines der Bilder auswählen, können Sie den Grenzradius sehen 50 Prozent, die wir während des Aufbaus einer Website Ängste präsentieren. Ich mache das 10%, um zu sehen, wie das aussieht. Und ich finde, das sieht ganz schön aus. Also, was ich jetzt tun werde, ist, dass ich ins Stylesheet gehe. Selten zur Verfügung gestellte Grenzradius ist für Schäden und wann sie von 50 Prozent auf 10 Prozent geändert werden. Sie können sehen, dass wir einen Grenzradius für das zentrierte Moorbild haben, ich werde unsere 10 Prozent machen. Und für die Durchmesser werde ich auch unsere 10 Prozent machen und sehen, ob ich diese Seite nicht aktualisieren werde. Und Sie können sehen, dass unsere Bilder nicht mehr regiert werden. Einheimischer hat Grenzradien bekommen. Und so NMR von Minuten, Ich habe eine Seite erstellt, die völlig anders aussieht als die Webseite, würde es während des Kurses erstellen. Und mit einfachen und schnellen Anpassungen an HTML und CSS und Hintergründe. Sie können die Website erstellen wir es im Kurs, völlig einzigartig für sich selbst. Wie ich schon sagte, das, was sie gerade durchgemacht haben, war nicht dazu gedacht, extrem an die Änderungen anzupassen, die sie vorgenommen haben. Es war einfach, um Ihnen zu zeigen, dass Sie diese Website schnell machen können, auf der Sie sind. 23. Lass deine Website online gehostet: Also, jetzt sind wir fertig Aufnahme unserer Website und wir wollen zeigen, weil es gut aussieht Rate. Aber wenn wir nicht verriegeln, sie schickten Menschen vor unseren Computer, werden wir nicht in der Lage sein, diese Website Familie, Freunden oder sogar anderen Unternehmen zu zeigen . Dies liegt daran, dass es nicht online gehostet wird. Wie können wir also unsere Website auf Lane gehostet bekommen, so dass wir andere Leute sehen können , es sei denn, wir benötigen Hosting. Jetzt leider wird Hosting kosten. Es ist nicht umsonst. Es ist ein Service, der in der Regel verursachen sie eine kleine monatliche Gebühr. Allerdings habe ich ein fantastisches Angebot für Studenten sind fest Kurs eingerichtet. Und klicken Sie auf den Link in der Beschreibung dieses Videos, Ich habe mit sagen genarbt, um Schreibtisch Art von Hosting anbieten , damit Sie online billig und kostengünstig zu bekommen. Also empfehle ich sagen, genarbt. Auch hier verwenden Sie den Link in der Beschreibung von als Video, um einen Schreibtisch Art Preis auf Hosting zu erhalten. Also, wenn wir auf sind, sagen genarbt, wir werden auf Get Startup auf Web-Hosting klicken. Und zum Glück für uns, können wir das billigste und günstigste Star Up Hosting-Paket verwenden. Und es ist wichtig, an dieser Stelle zu sagen, Sie alle Hosts verwenden können, die Sie wollen. Sie brauchen nicht zu sagen genarbt, obwohl sie einen Schreibtisch irgendwie Online-Christen seines Kurses angeboten haben, hat jedes Hosting ihre eigenen Web-Pakete. Und wenn Sie einen Träger 1 finden, zögern Sie nicht, ihn zu benutzen. Auch locker gesprochen, ein Lewis Prozesse spezifisch für sagen, genarbt Weil ich ihnen empfehlen, alle Hosting-Unternehmen arbeiten hören ihn zu sehen. So können Sie mit diesem Kurs mit jedem Hosting-Anbieter folgen, Sie gehen weg, weil alle Briefmarken, die ich werde Ihnen zeigen oder gleich sein, egal bei welchem Host Sie verwenden. Also werde ich auf diesen Plan klicken und ich werde dieses Formular für den Startplan ausfüllen. Also nur drei zu sein und alle Details zu filtern. Und ich habe gerade die Bestellung für den Startup-Plan mit sagen, genarbt platziert. Ich werde jetzt auf SAP klicken, sagen wir. Wenn Sie also einen Domain-Namen zusammen mit Ihrem Hosting kaufen, zögern Sie nicht, auf neue Domain zu klicken, wo Sie einen Domain-Namen wie Marke und coats.com wählen können , zum Beispiel. Oder wenn Sie nur eine Freiheit wollen und Sie können temporäre Nachfrage wählen und klicken Sie auf Weiter, wir erhalten jetzt die Option, neue Website zu starten oder zu migrieren Website. Aber wir wollen tatsächlich auf die Schaltfläche unten klicken, die SCAP sagt und leere Website erstellen, weil wir bereits eine unserer erstellen, wir wollen nur online zu bekommen. Klicken Sie also auf SCAP und erstellen Sie eine leere Site. Dann sammeln wir verschwinden. Es wird sagen, dass Sie Ihre Website erstellen. Dies kann ein oder zwei Minuten dauern. Nach ein paar Minuten sehen Sie diese Nachricht, die Ihren L Sam sagt. Und jetzt, wenn wir zu Seite verwalten gehen, werden Sie dies sehen. Nun wieder, wenn Sie zusammen mit einem anderen Host folgen, einige der Schaltflächen und Menüs können unterschiedliche Formulierungen haben, aber der Prozess wird lose die CME sein, wie ich bereits erwähnt habe, verwenden alle Hosting-Unternehmen die gleichen Prozesse, die ich zeige. Aber sagen wir, Korn zu schwächeren Tagging auf diese Seite. Das nächste, was Sie als Fail-Manager suchen wollen. Hier ist es pend, so können Sie einfach auf Datei-Manager klicken. Und das hat uns zum Ordnersystem von unserer Website geführt. Nacht, das ist kein Hosting- und Server-Kurs, also werde ich nicht auf zu viele Details über hohe oder weniger Werke eingehen. Aber im Grunde unterscheidet sich eine Website nicht von dem Ordner, in dem wir in oder Paket haben, an dem wir für eine Website gearbeitet haben. Wenn Sie also eine Website online laden, greifen Sie im Grunde auf einen Ordner zu, wie wir mit einem R-Paketordner auf unserem Computer erstellt haben . Also, wenn wir uns den Dateimanager hier ansehen, suchen wir im Grunde eine Ordnerstruktur innerhalb des Servers mit gerade gekauft. Und Sie werden diesen Ordner zu sehen, öffentliche Unterstriche HTML. Dies ist unser Website-Ordner. So NF-1 spielen wir uns mit endlosen Ordner, auch als unsere Website angezeigt werden. Also werden wir in diesen Ordner klicken. Und Sie können sehen, dass es bereits eine Standard-Punkt-HTML-Datei gibt. Standardmäßig stapeln die meisten Hosting-Unternehmen automatisch eine einfache HTML-Datei innerhalb des Ordners. Wenn Sie also sehen, dass Sie wissen, dass Sie sich im richtigen Ordner befinden, dann ist es wieder öffentliche Unterstriche HTML. Da wir unsere eigene Website bereits erstellt haben, brauchen wir diese nicht, also werden wir sie löschen. Also werde ich darauf klicken und dann werde ich in die Band gehen und auf Löschen klicken. Es wird uns fragen, ob wir fortfahren möchten und wir tun, ich werde auf Bestätigen klicken. Also lassen Sie uns jetzt unsere eigene Website hinzufügen. Geben Sie diesen Ordner ein. Das erste, was ich tun werde, ist auf Datei-Upload zu klicken. Und ich gehe zu dem Website-Ordner, an dem wir in diesem Kurs gearbeitet haben. Und ich werde die index.html auswählen und ich werde es hochladen. Sie können sehen, dass wir diese Datei index.html auf unser Hosting, auf unseren Website-Server hochgeladen haben, aber wir sind noch nicht fertig. uns unseren Website-Ordner ansehen, müssen wir auch unsere Style-Bilder und Bootstrap-Ordner importieren. Also fragte ich, ich werde auf Ordner hochladen klicken. Also nicht Datei-Upload, Ordner-Upload. Und ich werde zuerst unseren Bootstrap-Ordner applaudieren und wir werden fragen, ob sie alle Dateien von Bootstrap hochladen wollen, was zu tun ist. Also werde ich auf Hochladen klicken. Und Sie können sehen, dass der Bootstrap-Ordner auch ein Auge auf unseren Server ist. Ich werde erneut auf Ordner hochladen klicken. Und dieses Mal werde ich unsere Bilder hochladen. Wieder. Wir möchten alle Dateien innerhalb dieses Ordners hochladen. Also werde ich auf Hochladen klicken. Dies kann etwas länger dauern als der Bootstrap-Ordner, da dieser Ordner alle unsere Bilder enthält, Es ist etwas größer Ordner. Sie können sehen, dass diese nun erfolgreich hochgeladen wurden. Und schließlich möchten wir unseren Style-Ordner hochladen. Also werde ich den Stil-Ordner auswählen und ich werde hochladen. Und ich werde bestätigen, dass ich den dest Ordner hochladen möchte. Sie können sehen, dass dies Nacht erfolgreich hochgeladen wurde. So können Sie sehen, dass unser Hosting-Server-Name mit unserem Ordner übereinstimmt , an dem wir für diesen Kurs gearbeitet haben, den ich sie einfach nebeneinander setze. Sie können sehen, wir haben unsere Bootstrap-Ordner, wir haben unsere Bilder Ordner, was auch immer Stil Ordner, und wir jemals index.html. Unsere Website wird nun online gehostet. Wenn Sie zu Ihrer Domain gehen, die IBM Watson sagen Körner, Sie können oben auf dieser Seite sehen. Aber die Domain, die Sie beim Kauf Ihres Hosting eingegeben haben , ist Ihre Website-URL oder Domain-Name oder Domain-Name und URL sind identisch. Also gehe ich zu meiner URL und drücke die Eingabetaste. Und Sie können sehen, unsere Website ist online gehostet. Es ist wirklich so einfach wie das. Sie können Sand, Ihre Familie, Freunde, unsere Geschäftskunden, an die Hosting-Adresse oder URL, die Sie gerade gekauft haben, kennen. Und Sie werden in der Lage sein, die Website, die Sie auf diesem Kurs erstellt haben, online zu sehen und fallen. Also, jetzt haben Sie eine Website erstellt, und Ihre Website ist live im World Wide Web für alle zu sagen. Wie bereits erwähnt, habe ich nicht in zu viele Besonderheiten, was Hosting fungiert als Server als oder was eine Domain ist, weil dies kein Hosting-Kurs ist, indem Sie Ihnen hallo, unkompliziert und Assembler, um Ihre Website auf Spur schnell gehostet zu bekommen. 24. Abschließende Bemerkungen: Sie haben den End-Büro Kurs erreicht. In diesem Kurs haben Sie gelernt, was Website-Grundlagen sind, die Grundlagen von HTML, CSS sein ESX, Selektoren in Klassen, Topographie, was Bootstrap ist. Und dann haben wir all das zusammen gestellt und Bella sind eine sehr eigene Website. Ich habe Ihnen gezeigt, wie Sie unsere Website Urin machen können. Und schließlich habe ich Ihnen gezeigt, wie Sie unsere Website hosten können , um sie mit Familie, Freunden und Unternehmen zu teilen. Ich hoffe, Sie haben diesen Kurs genossen und Sie haben gelernt, dass Beschichtung Spaß und einfach machen kann. Und Sie sind mit den Fähigkeiten und Kenntnissen ausgestattet, um Ihre eigenen professionellen Websites erstellen zu können. Ich möchte mich bei Ihnen bedanken, dass Sie an diesem Kurs teilgenommen haben, und ich würde gerne die von Ihnen erstellten Websites sehen. Also bitte schickt sie rein, damit ich sie sehen kann. Wenn Sie Fragen haben, können Sie mich auf Twitter bei Brain Encodes kontaktieren. Vielen Dank, dass Sie an diesem Kurs teilgenommen haben. Ich hoffe, Sie haben es so sehr genossen wie ich es erstellt habe, und ich wünsche Ihnen alles Gute und glückliche Programmierung in der Zukunft.