HTML und CSS für Anfänger:innen: Erstelle deinen persönlichen Blog!

1. Willkommen beim Kurs!: Willkommen bei HTML und CSS für Anfänger. Ich freue mich, Sie in diesem Kurs bei mir zu haben. Mein Name ist Chris, und ich bin Webentwickler und auch ein erfahrener Online-Kursteilnehmer, der Tausende von zertifizierten Studenten unterrichtet. In diesem Kurs werden Sie sowohl HTML als auch CSS vorstellen, zu den Hauptbausteinen, Kran-Websites. Wenn das neu ist, mach dir keine Sorgen. Dieser Kurs wurde für Anfänger entwickelt, und ich habe diesen Kurs mit warmen Goldminen erstellt. Nehmen wir Anfänger und geben ihnen die Fähigkeiten und das Vertrauen, um voran zu gehen und ihre eigenen Websites von Grund auf neu zu erstellen. Am Ende dieses Kurses werden Sie Ihre eigenen, vollständig angepassten persönlichen Blog-Projekte mit mehreren Seiten erstellen. Das Projekt wird eine Zielseite in voller Größe haben, um ein wenig Informationen über sich selbst oder Ihren Block zu geben. Das Thema und Design in diesem Blog liegt ganz bei Ihnen. Ich ermutige Sie, sich Ihre eigenen Ideen zu entwerfen. Dies wird dann auf andere Seiten verlinken, einschließlich Ihrer eigenen Blog-Seite. Jetzt werden wir nur die Website erstellen, um auf Computer-Bildschirmen gut aussehen. Wir stellen auch sicher, dass das Design auch reaktionsschnell ist. Dies bedeutet, dass es Stile und Layout ändern wird. Die unterschiedlich großen Bildschirme, um gut auf mobilen und Tablet-Größen zu aussehen. Alle Fähigkeiten, die Sie lernen, werden sofort in die Praxis umgesetzt, um alles zu verstärken und Ihnen auch ein echtes Beispiel zu geben, wie sie verwendet werden. Nach Abschluss dieses Kurses haben Sie das Vertrauen und auch die Fähigkeiten, um mehr Websites von Grund auf mit HTML und CSS zusammen mit einigen Ressourcen und Inbrunst Rennin zu bauen , um Sie lange lernen, nachdem Sie fertig. Dies ist nur ein Vorgeschmack auf das, was Sie während dieses Kurses lernen werden. Melden Sie sich für den Kurs an und beginnen Sie Ihre Reise in die aufregende Welt des Aufbaus von Websites. 2. Erforderliche Tools: Wenn Sie neu sind, um eine Website zu erstellen, kann es üblich sein, zu denken, dass ein technisches Thema wie dieses einen super leistungsfähigen Computer und viele Tools oder Software benötigt. Dies ist jedoch nicht der Fall, solange Ihr Computer ein Programm wie Word ausführen und auch im Internet surfen kann , sind Sie gut zu gehen. Um diesem Kurs folgen zu können, gibt es nur zwei wichtige Dinge, die Sie benötigen, und sie sind beide kostenlos zu verwenden und herunterzuladen. Erstens ist etwas, das Sie wahrscheinlich bereits haben, wenn Sie sich diesen Kurs ansehen, und das ist ein Webbrowser. Ich werde Google Chrome für diesen Kurs verwenden und es ist auch der, den ich empfehlen würde. Wir werden uns die Chrome-Entwickler-Tools später in diesem Kurs auch ansehen. Wenn Sie einen der anderen Haupt-Web-Browser, wie Firefox, Safari, Internet Explorer oder den neueren Microsoft Edge haben, ist dies völlig in Ordnung zu verwenden. Möglicherweise möchten Sie mehr als eine herunterladen, um Ihre Website in verschiedenen Browsern zu testen. Weiter oben ist ein Texteditor. Dies ist ein Ort, an dem Sie Ihren Code schreiben werden. Hier sehen Sie einige beliebte Texteditoren zur Verfügung, und auch die Links zu jedem. Zunächst einmal gibt es Visual Studio Code , den ich verwenden werde, und es ist auch für Mac, Windows oder Linux verfügbar. Es ist kostenlos zum Download und zur Verwendung. Atom ist auch beliebt und wird von GitHub gebaut. Es hat ein gutes Back-in. Es ist für Mac , Windows und Linux verfügbar und auch kostenlos zu verwenden. Sublime Text ist auch seit langem beliebt und ist ein großartiger Web-Text-Editor. Dies ist der einzige hier, bei dem es Kosten für den Kauf einer Lizenz gibt. Es ist jedoch kostenlos zum Download und auch zu bewerten. Aktuell gibt es keine Fristen für den Evaluierungszeitraum. Auch hier ist es für Mac, Windows und Linux verfügbar. Bracket ist auch beliebt und hat eine gute Lebensvorschau, dh die Änderungen, wie im Browser angezeigt, während Sie eingeben, ohne die Seite aktualisieren zu müssen. Dies ist auch für Mac, Windows und Linux verfügbar . Sie können tatsächlich eine Website mit einem beliebigen Textprogramm wie Word schreiben, aber es gibt viele Vorteile bei der Verwendung eines dedizierten Editors für das Web, wie Farbcodierung, Pfeilhervorhebung und automatische Vervollständigung, um nur einige zu nennen. Wie ich bereits sagte, werde ich den ersten hier namens Visual Studio Code verwenden. Gehen Sie dorthin oder eine andere Ihrer Wahl und laden Sie die Software für Ihre Plattform herunter. Sobald dies getan ist, kommen Sie zurück in das nächste Video und wir würden einen genaueren Blick auf, was HTML und CSS ist. 3. Was sind HTML und CSS?: In diesem Kurs werden wir unser Projekt aufbauen und etwas über HTML und CSS lernen. Was genau ist HTML und CSS? Nun, wir fangen mit HTML an. HTML steht für Hypertext-Markup language.HTML ist die Standard-Markup-Sprache für die Erstellung von Websites und Anwendungen. Derzeit ist die neueste Version HTML5 und in jeder Version, die eingeführt wird, gibt es neue Funktionen hinzugefügt. Wir werden darüber auch für den Kurs sprechen. HTML-Elemente sind die Bausteine einer Webseite. Die meisten Elemente bestehen aus einem öffnenden und schließenden Tag mit etwas Inhalt dazwischen. Dieses Beispiel am unteren Rand ist ein p-Tag, und dies wird zum Hinzufügen von Textabsätzen verwendet. Wir haben das öffnende Tag auf der linken Seite und dann ein schließendes Tag auf der rechten Seite mit dem Schrägstrich. Dann legen wir einige Inhalte dazwischen. Für dieses Beispiel ist es nur ein Text. Wir können auch einige Attribute zu diesen HTML-Elementen hinzufügen und es bietet einige zusätzliche Informationen. Wir fügen diese Attribute dem öffnenden Tag hinzu. So können wir mit dem Beispiel am unteren Rand sehen, wir haben eine ID Attribute zu diesem Absatz von Text hinzugefügt und dann gab seine ID einen Namen von Header-Text. Wir können dann diesen Namen des Kopfzeilentextes verwenden. Später, um etwas CSS hinzuzufügen oder sogar mit JavaScript zu arbeiten. Als nächstes haben wir CSS. CSS steht für Cascading Stylesheets. Es ist eine Stylesheet-Sprache, die verwendet wird, um das Aussehen und auch die Formatierung eines Webdokuments zu beschreiben , das in einer Markup-Sprache wie HTML geschrieben wurde. CSS wird für Styling, Positionierung und Layout verwendet. CSS3 ist die neueste Version, die viele neue Funktionen enthält, wie das Hinzufügen von Transformationen und Animationen, um nur einige zu nennen. Während wir den Kurs durchlaufen, werden wir viel mehr über HTML und CSS lernen, aber im Moment denken Sie daran, dass HTML den Inhalt der Webseite bereitstellt. Dann verwenden wir CSS für jedes Styling und Layout. 4. Wähle dein Thema!: Wir sind gerade bereit zu beginnen, unser Projekt zu erstellen und beginnen, etwas über HTML und CSS zu lernen. Kurz bevor wir das tun, möchte ich mir einen Moment Zeit nehmen, um über ein Thema für Ihr Projekt nachzudenken. Auf dem Bildschirm hier ist dies ein Projekt, das ich einbauen werde. Welches wird ein persönlicher Reise-Blog sein. Natürlich sind Sie frei, mit mir zu folgen, und halten Sie sich an das gleiche Thema der Reise. Ich möchte Sie jedoch ermutigen, sich einen Moment Zeit zu nehmen, um über etwas Persönliches nachzudenken. Es könnte etwas wie ein Sportbuch, ein Blog über Web-Entwicklung oder Programmierung im Allgemeinen, oder sogar über Ihr Lieblingsessen zum Beispiel sein. Das Projekt, das bauen wird, kann angepasst werden, um so ziemlich jede Art von Blog, den Sie sich vorstellen können. Gehen Sie voran und seien Sie so kreativ, wie Sie möchten. Vielleicht schreiben Sie ein paar Ideen auf und sobald Ihre Idee fertig ist. Wir können dann zum nächsten Video übergehen, wo wir unser Projekt starten werden. 5. So startest du ein Webprojekt: Wir werden jetzt direkt in den Aufbau unseres Blog-Projekts springen. Die Zielseite wird die Haupteinstiegsseite für die Website sein. Es macht Sinn, hier anzufangen. Es ist auch die einfachste Seite und wird auf den Rest der Seiten verlinken, die wir erstellen, wie zum Beispiel den Blog und die über mich Seite. Das Erstellen eines neuen Website-Projekts ist relativ einfach. Wir beginnen mit einem neuen Projektordner. Dieser Ordner enthält dann alle Dateien für unsere Website, wie die verschiedenen Seiten und auch die Bilder. Ich werde meine auf dem Desktop für einfachen Zugriff platzieren. Sie können Ihre Dateien überall hinzufügen, wo Sie am bequemsten finden. Zum Beispiel die Dokumente. Ja, ich werde Ctrl-Taste klicken oder mit der rechten Maustaste klicken und einen neuen Ordner erstellen. Ich nenne das den Störungsblock. So Displays sind sowieso, finden Sie Bequemlichkeit. Sie sollten Visual Studio Code bereits heruntergeladen haben, oder einen alternativen Editor. Um dieses Projekt im Editor zu öffnen, müssen Sie nur Ihren Code-Editor auswählen und dann zur Datei gehen. Sie können Ihren Ordner von dort aus auswählen. Oder Sie können einfach in den Projektordner ziehen und mit der Arbeit beginnen. So sehen Sie nun den Projektordner in der Seitenleiste. Wir können den Titel Travel Blogger sehen. Jetzt ist es an der Zeit, die neue Datei zu erstellen, die den Code für unsere Zielseite enthält. Traditionell wird die Haupt- oder Standardseite in einer Website die Seite index.html genannt . Lassen Sie uns das jetzt erstellen. So können Sie zu Datei und Neue Datei oder Befehl oder Control N gehen, um eine neue Webseite zu erstellen. Sie möchten dies sofort als index.html Seite speichern. Stellen Sie sicher, dass dies die HTML-Erweiterung am Ende hat, da die Webseite ein HTML sein wird. Stellen Sie auch sicher, dass dies auch innerhalb des Travel Blog-Projekts gespeichert wird. Es wird gespeichert und Sie sehen nun die neue Seite im Projektordner, in der Seitenleiste. Ich werde einfach Hallo in die index.html eingeben und dann speichern. Wenn Sie diese Webseite im Browser öffnen möchten, um den Inhalt zu sehen, müssen wir nur den Travel Blog-Ordner öffnen und dann auf die index.html doppelklicken. Wir können jetzt Hallo sehen! Innerhalb des Browsers. Dies ist also nur einfacher Text und nicht gültiges HTML. Aber herzlichen Glückwunsch, dass die erste Webseite im Browser geöffnet wird. Jetzt ist dieses Projekt eingerichtet. Schauen wir uns nun an, wie man eine Webseite richtig strukturiert. 6. So strukturierst du HTML-Seiten: Beim Erstellen von HTML-Seiten, die vom Browser gelesen werden sollen, ist es wirklich wichtig, dass wir unseren Code korrekt strukturieren. Das erste, was wir auf unserer Indexseite tun müssen, ist eine Doctype-Deklaration hinzuzufügen. Dies erklärt, welche Version von HTML wir verwenden. HTML5 ist die neueste Version, und der Doctype sieht so aus. Öffnen Sie die Tags, verwenden Sie ein Ausrufezeichen und dann doctype und HTML. Doctype s die frühen Versionen von HTML, waren viel länger und komplizierter, aber HTML5 ist jetzt schön und einfach. Beim Doctype wird die Groß-/Kleinschreibung nicht berücksichtigt. Aber ich gebe es immer gerne in Großbuchstaben ein, dann haben wir die Root-HTML-Elemente und das sieht einfach so aus. Also die meisten HTML-Elemente, gibt es ein offenes Tag und auch ein schließendes Tag, das mit dem Schrägstrich beginnt. Dies ist das Hauptrouten-Element, was bedeutet, dass alles andere zwischen diesen Tags hinzugefügt werden muss, wobei der Doctype die einzige Ausnahme ist. Innerhalb des öffnenden Tags werde ich ein Sprachattribut hinzufügen. Ein Attribut ist nur einige zusätzliche Informationen über die Elemente. Ich werde eine Website in Englisch erstellen, also ist der Sprachcode „en“. Fügen Sie also die Sprachattribute hinzu, die ich gerade auf „" de“ setzen werde. Wenn Sie eine andere Sprache verwenden möchten, können Sie eine vollständige Liste finden, indem Sie nach HTML-Sprachcodes suchen und dann Ihre Sprache auswählen. Dieses Haupt-HTML-Element enthält nun zwei Elemente, die innen verschachtelt sind. Zuerst haben wir den „Kopf“ Abschnitt. Genau so. Auch hier hat dies die „öffnenden“ und auch die „schließenden“ Tags. Der Abschnitt enthält Daten, die manchmal als Metadaten bezeichnet werden, d. h. Informationen über das HTML-Dokument. Diese Informationen werden nicht im Browser angezeigt, aber sie enthalten wichtige Informationen über Ihre Website, wie den Titel der Website, die Beschreibung und auch Links über Dateien, die wir später betrachten. Dann ist ein anderer Abschnitt der Körper. Also das öffnende Körper-Tag und dann das schließende Tag mit dem Schrägstrich. So wie ein Mensch den Kopfteil oben und dann den Körperteil haben würde. Dieser Abschnitt enthält alle Inhalte der Websites, die im Browser angezeigt werden, wie Text oder Bilder. Grundsätzlich enthält der Kopf also Daten unserer Website, die nicht angezeigt werden. Und der Körper ist für den Inhalt unserer Website, der im Browser angezeigt wird. Wir können nun einige Inhalte in der Seite des Kopfabschnitts hinzufügen. Zuerst sind die Metadaten. Lassen Sie uns das Meta-Element hinzufügen. Der Metatag enthält kein schließendes Tag. Im Inneren können wir ein Attribut namens Zeichensatz hinzufügen. Hier können wir die Zeichencodierung für die Webseite angeben. Die am häufigsten verwendete wird UTF-8 genannt. Sie finden die Liste der verfügbaren Zeichensätze in den Ressourcen. Der letzte Metatag, den ich hinzufügen werde, ist für das Ansichtsfenster. Also wieder, öffnen Sie das Meta-Tag dieses Mal, der Name ist gleich „viewport“. Das Ansichtsfenster ist der sichtbare Bereich der Webseite. In der Vergangenheit war es nur ein Computerbildschirm. Aber seit Smartphones und Tablets kann die Größe des Ansichtsfensters jetzt erheblich variieren. Aus diesem Grund ist dieses Ansichtsfenster-Tag wichtig. Zuerst fügen wir den Inhalt hinzu und wir stellen die Inhaltsbreite so ein, dass sie gleich der Gerätebreite ist. Dadurch kann die Breite der Seite gleich der Breite des Geräts sein , auf dem sie angezeigt wird. Dann durch ein Komma getrennt, können wir die anfängliche Skala hinzufügen, um gleich 1 zu sein. Dadurch wird die Zoomstufe festgelegt, wenn die Seite zum ersten Mal geladen wird. Dies kann dazu beitragen, dass das Zoomen konsistent bleibt, wenn beispielsweise Geräte von Querformat ins Hochformat gedreht werden. Schließlich werde ich den Website-Titel direkt darunter hinzufügen. Dies hat also die öffnenden und die schließenden Titel-Tags. Mit dem Schrägstrich für das schließende Tag, dann können wir den Titel im Inneren haben. Also werde ich meinen „Chris Dixon's Travel Blog“ nennen. Dann gib den Tresor. Dieses Titelelement wird also im Browser angezeigt. Wenn wir also zu Google Chrome gehen und auf Aktualisieren drücken, sehen wir jetzt, dass der Titel in der oberen Registerkarte dort erscheint. Dies ist also die grundlegende Struktur, die wir für jede HTML-Seite benötigen. Wenn das alles neu für Sie ist, machen Sie sich keine Sorgen über das Auswendiglernen aller Probleme noch. Wir verwenden die gleiche Struktur auf allen unseren Seiten. So bald wird es vertrauter werden. Ich weiß, dass dieser Teil etwas langweilig erscheinen kann. Wir sehen noch nichts auf dem Bildschirm. Aber wir werden jetzt weitermachen, um einige weitere Inhalte auf der Zielseite hinzuzufügen. Als nächstes fügen wir den Kopfbereich hinzu, der den Seitentitel und auch die Navigationslinks zu anderen Seiten enthält. 7. So erstellst du die Kopfzeile: Jetzt ist es an der Zeit, mit dem Hinzufügen eines Site-Headers zu beginnen. Dieser Header enthält den Seitentitel und auch die Links zu anderen Seiten. Wir können auch Code wiederverwenden und einen konsistenten Header auf allen unseren Seiten haben. zu beginnen, beginnen Sie auf der Seite index.html und fügen Sie dies zwischen den body-Tags hinzu. Direkt unter der Öffnung für den Körper. Wir können die Header-Tags und wieder öffnen, wie die meisten im Wesentlichen öffnen und auch die Schließung im Inneren. Das Header-Element ist nicht obligatorisch. Es ist jedoch ein Element zur Verfügung gestellt Ketten, hey, HTML5. Also machen Sie Sinn, es zu nutzen. Das eigentliche Element selbst wird nicht auf dem Bildschirm angezeigt. So speichern und aktualisieren wir. Wir können immer noch keine Inhalte innerhalb des Browsers sehen. Stattdessen beschreibt es dem Browser, welche Inhalte er enthalten wird. Lassen Sie uns voran und fügen Sie einige Inhalte zwischen den Header-Tags. Beginnen Sie mit dem Namen der Website oben auf der Seite. Wir werden dies innerhalb der H1-Tags hinzufügen. Also H eins ist ein Überschriftenelemente. Überschriften werden mit Tags von Seite 1 bis H6 hinzugefügt. H1 ist die oberste Ebene der wichtigsten in zitierten und H sechs ist die am wenigsten wichtige. Der angezeigte Text ist auch größer für H1 und wird dann allmählich kleiner bis H6. Unser Seitentitel ist eine wichtige Information. Dies ist also eine gute Verwendung für das H1-Tag. Ich werde den Website-Titel dazwischen von Chris Dixon Reise-Blog hinzufügen. Geben Sie einfach das Speichern und dann können wir zum Browser gehen und dann aktualisieren. Jetzt sehen wir die Überschrift oben auf der Seite. Wir werden die Übergröße der Überschriften zu nutzen, während wir diese Projekte durchlaufen. Als nächstes können wir die Navigationslinks zu den anderen Seiten hinzufügen. Wir haben auch eine umgebende Elemente für diese beiden genannt nav. Also direkt unter H1 werde ich die Navigationselemente mit dem öffnenden und schließenden Tag erstellen. Sowohl das nav als auch der Header, sind das, was wir semantische Elemente nennen. heißt, sie beschreiben den Inhalt in ihnen. Dies liegt daran, dass eine Suchmaschine wie Google diese Elemente sehen kann und genau wissen, was sie sind. Also Header enthält diese Site-Header und nav enthält die Website-Navigation und so weiter. Die meiste Zeit erstellen wir unsere Links mit einer Liste. Also haben wir nicht nav, wir können eine ungeordnete Liste erstellen, indem wir die UL-Tags verwenden. Ein bestelltes bedeutet einfach, dass jeder Artikel in der Liste nicht nummeriert wird. Zum Beispiel 123 usw. für jedes Element. Dann erstellen Sie jedes Element in der Liste, oder in unserem Fall, die Liste der Seiten. Wir fügen die LI-Tags und dann innerhalb des Ziels können wir den Namen jedes unserer Links hinzufügen. Ich werde mit der Homepage beginnen. Dann wird unser zweiter Link, wieder innerhalb der LI-Tags, die „Über mich“ -Seite sein und der dritte wird für das Buch sein. Der Name, den wir zwischen diesen Listenelementen hinzufügen, wird der Name sein, den wir auf dem Bildschirm sehen. Wenn Sie gehen über und aktualisieren Sie den Browser. Wir sehen jetzt nach Hause über mich und auch den Blog. Sie können standardmäßig sehen, dass es sich um ein Aufzählungszeichen neben jedem Element auf der linken Seite handelt. Wenn diese Liste nummeriert werden soll, zum Beispiel 1,2,3, können wir die UL-Tags ändern. Haben wir hier zwei OL für eine geordnete Liste? Dies sieht jedoch viel anders aus als die Zielstelle, die wir uns früher angesehen haben. Dies liegt daran, dass wir nur den HTML-Inhalt hinzugefügt haben. Das CSS-Styling und Layout machen dies in einem späteren Video viel schöner. 8. Semantisches HTML und Layout: Ich möchte einen kurzen Schritt vom Hinzufügen zu dieser Website zurücknehmen und mir einen Moment Zeit nehmen, um zu sehen, was wir semantische Elemente nennen. Semantische Elemente sind einfach Elemente, die ihren Inhalt klar beschreiben, nicht nur für den Browser, sondern auch für andere Entwickler, die Ihren Code betrachten. Bereits auf unserer Index-Seite haben wir einige semantische Tanks verwendet, sowohl der Header als auch Nav sind als semantisch eingestuft, da ich dem Browser sage, dass der Inhalt zwischen ihnen, Zebra-Header oder ein Navigationsbereich. Dies ist ein Diagramm einer typischen Website. Der Körper enthält alle Inhalte, die wir auf dem Bildschirm sehen, wie wir bereits wissen. Hier sehen wir einige typische Abschnitte einer Website. Jeder Abschnitt hat ein div-Elemente. Ein div ist ein Abschnitt oder eine Division, die verwendet wird, um Inhalte zusammenzufassen. Wie Sie hier sehen können, verwenden wir eine für jeden Teil der Website, jeder mit einem ID-Attribut, so dass wir ein Styling mit CSS hinzufügen können. So sind die Dinge schon lange gemacht worden und sind immer noch. Div-Elemente sind vollkommen in Ordnung zu verwenden. In der Tat werden wir sie auch während dieses Projekts verwenden. Hier fügen wir einige weitere div-Elemente hinzu, diesmal innerhalb der vorhandenen verschachtelt sind. Auch hier ist das in Ordnung und auch sehr häufig. Seit HTML fünf haben wir jedoch einige alternative Elemente zu verwenden, genau wie Sie hier sehen können. Anstatt ein generisches div-Tag zu verwenden, können wir nun diese semantischen oder beschreibenden Elemente verwenden. Sowohl das div als auch alle neuen Elemente, die Sie hier sehen, haben immer noch eine Öffnung und auch ein schließendes Tag, um den Inhalt zu umgeben, genau wie der Header und das nav, das wir zuvor angesehen haben. Es gibt auch Haupt, die den Hauptinhalt der Website enthält. Dies ist nicht für Inhalte zu verwenden, die auf anderen Seiten wie Sidebars wiederholt werden. Zum Beispiel wird das beiseite Element, das wir auf der rechten Seite sehen, oft für Seitenleisten verwendet und wird normalerweise auf der gesamten Website wiederholt, daher ist es am besten, getrennt vom Hauptinhalt zu halten. Wie Sie sehen können, gibt es jetzt auch ein Element für die Fußzeile. Dies ist also das Beispiel, das wir früher gesehen haben, aber dieses Mal mit den neueren semantischen Elementen. Hier sehen Sie ein Artikelelement, das sich ideal für Anwendungen wie einen Blog-Beitrag oder ein Widget eignet, das eigenständige Inhalte hat. Es gibt auch ein Abschnittelement unten. Dies definiert, wie es klingt, den Abschnitt unseres Webdokuments. Dies ist, um verwandte Inhalte zusammen zu gruppieren. Wir haben jetzt auch das nav Element, das wir bereits gesehen haben. Dies ist für Navigationsabschnitte. Beachten Sie, dass wir dies innerhalb der Kopfzeile für dieses Beispiel platziert haben. Dies ist jedoch nicht erforderlich. Ich kann außerhalb der Kopfzeile platziert werden oder sogar innerhalb von Bereichen verschachtelt werden. Wir können die Dinge auch noch weiter machen, indem wir Elemente wie die Kopf- oder Fußzeile wiederverwenden , um die Kopf- und Fußzeilenabschnitte eines Artikels zu definieren, oder sogar Abschnitte innerhalb anderer Elemente wie der Seitenleiste abspielen . Denken Sie jedoch daran, dies ist nur eine gängige Möglichkeit, diese zu verwenden. Sie werden uns in keiner bestimmten Weise gezwungen, und der Anwendungsfall wird sich auch je nach Art der Website unterscheiden , in der Sie aufbauen. 9. Links, Nesten und Einrücken: Wir haben unsere Liste der Seiten zur Navigation hinzugefügt. Aber wenn du darauf klickst, scheint nichts zu passieren. Ist es, weil wir sie nur als Liste hinzugefügt haben , anstatt dem Browser mitzuteilen, dass sie auf andere Seiten verlinken sollen? Wir tun dies, indem wir ein A-Element hinzufügen, das für Anker steht. Dies kann zwischen den LI-Tags hinzugefügt werden, genau wie folgt. Ich werde zuerst den Home-Text ausschneiden und dann die A-Tags hinzufügen. Dies hat eine Öffnung und ein schließendes Tag und dann können wir den Text wieder innen einfügen. Ich werde dasselbe für mich tun. Ich werde den Text ausschneiden und das A-Element hinzufügen und dies zurück einfügen und dann das gleiche für den Blog und geben Sie dem ein Speichern. Dann können wir ein Element zu dem A-Tag namens HREF hinzufügen. HREF können wir einfach einen Standort hinzufügen, zu dem wir verlinken können. Wir werden auf andere Seiten verlinken, daher werden wir die Namen unserer Seiten hier hinzufügen. Fügen Sie das HREF-Attribut innerhalb des öffnenden Tags hinzu. Die index.html wird zurück auf die Homepage verlinken, also wird dies index.html sein. Dies ist ein relativer Dateipfad. Ich werde die „Über mich“ -Seite für jetzt leer lassen da dies eine Herausforderung für Sie später im Kurs sein wird. Wir haben die Blog-Seite noch nicht erstellt, aber wir werden diese bald hinzufügen. Um sich darauf vorzubereiten, werde ich auch den HREF hier hinzufügen und dies wird auf die Seite blog.html verlinken. Geben Sie, dass ein Speichern und dann, wenn wir gehen über den Browser und drücken Sie aktualisieren, können wir jetzt sehen, dass das Haus und der Blog ist jetzt in einen Link verwandelt. Wir können die Unterstreichung sehen und auch der Cursor ändert sich zu einem Hand-Symbol, um zu zeigen, dass dies ein Link ist. Lassen Sie uns auf den „Blog“ klicken und Sie können sehen, dass die Seite nicht gefunden wird, weil wir die Blog-Seite noch nicht erstellt haben. Gehen wir zurück und der Home-Link sollte uns auf der gleichen Seite halten. diese Links jetzt funktionieren, möchte ich einen kurzen Blick auf die Verschachtelung und Einrückung werfen. Beide haben wir bereits in unserem Texteditor verwendet. Wir haben bereits darüber gesprochen, wie wir Elemente innerhalb einer Liste verschachteln können, genauso wie das Verschachteln des NAV innerhalb des Header-Abschnitts. Mit den NAV-Links, die wir gerade hinzugefügt haben, ist dies auch wirklich wichtig. Wenn wir uns diesen Listeneintrag genauer ansehen, sehen wir, dass wir den Home-Text in der Mitte haben. dann nach außen arbeiten, sehen wir die A-Tags auf jeder Seite dieses Textes. In der dritten Reihe haben wir die umgebenden LI-Tags auf der Außenseite. Diese werden dann von den UL-Tags umgeben und so weiter. Nicht richtig verschachtelt ist ein häufiger Anfängerfehler und ein Fehler , der oft dazu führt, dass Ihre Website nicht wie beabsichtigt angezeigt wird. Dies ist etwas, auf das man achten muss und etwas, das Probleme vermeiden kann. Einrückung gibt an, wie oft oder Leerzeichen jede Zeile von links gesetzt ist. Ihr Texteditor kann dies automatisch für Sie tun, wie Sie sehen können, meins hat. sehen Sie oft Einrückungen Je nach Ihren Vorliebensehen Sie oft Einrückungenin zwei oder vier Leerzeichen. Zum Beispiel können wir beide Body-Tags auf der gleichen Ebene mit dieser Zeile hier eingerückt sehen . Dann im Inneren sehen wir die nächsten, auf die Sie stoßen, was die beiden Header-Tags sind, und sie sind beide auch in Zeile. Dies wird dann fortgesetzt, je nachdem, wie viele Elemente in einer Liste verschachtelt sind. Es gibt keinen Standard, dem wir beim Einrücken folgen müssen. Ein Gesetz ist nur auf persönliche Präferenz zurückzuführen. korrekte und konsistente Verwendung macht Ihren Code jedoch lesbarer und wir können auch deutlicher sehen, welcher Inhalt darin verschachtelt ist. 10. Div-Tags und Text: Gehen wir nun mit dem Hinzufügen des endgültigen HTML-Inhalts zu dieser Zielseite fort. Denken Sie daran, als wir uns die Folien vor ein paar Videos angeschaut haben. Wir haben uns beschreibende Elemente angesehen und auch div-Elemente verwendet. Nun, ich werde ein Element erstellen, das ein div als Container für diesen Haupttext von „Hallo, ich bin Chris, folge mir auf meiner Reise um die Welt“ verwendet. Lassen Sie beginnen, indem Sie auf die index.html gehen. Unter dem schließenden Header-Tag werde ich diesen div-Abschnitt erstellen. Also das öffnende Tag und auch das schließende Tag. Dann können wir hier innen ein p Element nisten. Das p-Element stellt einen Absatz von Text und wir können es verwenden, um unseren Text innerhalb hinzuzufügen. Also werde ich hier meinen Text hinzufügen. Fügen Sie natürlich die Texte hinzu, die zu Ihrem Blog passen. Es kann absolut alles sein, was Sie wollen. Also „Hi, ich bin Chris, folge mir auf meiner Reise um die Welt“ und gib dem „Speichern“. Wechseln Sie zum Browser, und klicken Sie dann auf „Aktualisieren“. Jetzt können wir sehen, dass die Textzeile hinzugefügt wird. Wir können auch mehr als ein p-Element hinzufügen und dies wird jeden Textblock auf eine neue Zeile trennen, auch mit einem gewissen Abstand dazwischen. Dies ist nun der gesamte Inhalt, den Sie auf dem Bildschirm sehen. Im Vergleich zum fertigen Blog sieht es aber nicht sehr hübsch aus. Wir werden bald mit CSS ins Styling kommen. Zunächst einmal gibt es ein paar Elemente, die Sie HTML hinzufügen können, um den Text zu ändern. Sie werden auf dieser fertigen Version ein paar Dinge sehen. Erkennen Sie zunächst eine Teilung über zwei Linien. Auch das Wort „Welt“ wird hervorgehoben. Dies geschieht alles mit HTML-Tags. Zunächst einmal, um den Text in eine neue Zeile zu brechen, fügen wir einfach ein Break-Element hinzu, wo wir wollen, dass dieser Bruch passieren. Ich werde meine hinzufügen, kurz nach dem Namen Chris. Also geh rüber zu den p-Tags. Dann können wir ein Break-Element hinzufügen. Dies ist eines der wenigen Elemente, die kein schließendes Tag haben, also sind wir in Ordnung, es so zu lassen, wie es dort ist. Wenn wir nun aktualisieren, sehen wir nach dem Wort Chris, dass die zweite Zeile erstellt wurde. Der Grund, warum dies kein schließendes Tag hat, ist einfach, weil wir keine Inhalte hinzufügen. Es wird nur hinzugefügt, wo immer wir es brauchen. Jetzt können wir einige Tags rund um den Welttext hinzufügen, so dass es abhebt. Zuerst können wir die Wortwelt mit m-Tags umschließen. Also das m-Tag kurz davor, und auch das schließende Tag kurz danach. Das m -Element fügt zusätzliche Betonung auf den Text und wird in der Regel im Browser als Kursiv angezeigt. Wir können sehen, indem wir das speichern und dann den Browser aktualisieren. Jetzt können wir sehen, dass sich das Wort in Kursiv geändert hat. Außerdem können wir ein starkes Element hinzufügen. Sie können all diesen m Abschnitt mit den starken Tags umgeben. Fügen Sie es also kurz vor dem öffnenden Tag und dann direkt nach dem schließenden m-Tag hinzu. Das starke Element gibt den Texten eine starke Bedeutung. Dies wird in der Regel auch fett angezeigt. Auch hier wird betont, wie wichtig es ist, zu verstehen, wie die Verschachtelung funktioniert. Wie wir das Wort in der Mitte haben, und dann das m-Tag umgibt es und dann schließlich die starken Tags auf der Außenseite. Dann gehen Sie zurück zum Browser und aktualisieren Sie dann. Sie können sehen, dass der Text ein wenig kühner ist. Es kann schwierig sein, das starke Element im Moment zu sehen, aber es wird später sichtbarer sein , wenn wir die Größe des Textes vergrößern und auch ein Hintergrundbild hinzufügen. Also mit allen HTML jetzt an Ort und Stelle. Lassen Sie uns nun weitergehen, um etwas Styling zu dieser Seite hinzuzufügen. 11. Interne CSS- und Google-Schriftarten: Obwohl wir bisher viel über HTML lernen, sehen Websites nicht wirklich gut aus, bis wir etwas Styling hinzufügen, CSS-Stile können unser Website-Erscheinungsbild von etwas wie wir derzeit hier haben zu dann so etwas ändern , das ist der Zielort. Eine Welle, ich meine CSS, besteht darin, Style-Tags zum Kopfbereich unserer Dokumente hinzuzufügen. Wenn öffnen Sie den Texteditor und gehen Sie dann auf die index.html. Gehen Sie zurück zum oberen Kopfbereich Abschnitt, und dann direkt unter dem Titel können wir die Stilelemente hinzufügen. Genau so. Dies hat das öffnende und auch das schließende Tag. Wir können jedes Styling, das wir wollen, zwischen diesen beiden Tags hinzufügen. Diese Art, Dinge zu tun, wird als internes CSS bezeichnet. Dies liegt daran, dass die Stile nur intern auf dieser Seite verwendet werden sollen. Später werden wir auch einen alternativen Weg abdecken, dies zu tun. Dann müssen wir wählen, welche Elemente wir stylen möchten, indem wir einen Selektor verwenden. Ein Selektor kann ein Name der Elemente sein, die wir bereits verwendet haben, wie Header, p oder li, zum Beispiel. Ich werde mit der Auswahl des HTML beginnen, also fügen Sie HTML dort hinzu. Da HTML ein Wurzelelement ist, gelten alle Stile, die wir hier hinzufügen, für die gesamte Website. Alle CSS-Styling-Regeln für den Selektor müssen innerhalb eines Paares geschweifter Klammern platziert werden, genau so. Da es HTML-Selektor für die gesamte Seite gilt, eine gute Verwendung dafür vielleicht die Schriftart hinzufügen, die Sie verwenden möchten. Um es auf der gesamten Website konsistent zu halten, können wir die font-family Eigenschaft verwenden, um die Schriftart festzulegen. Sie können sehen, der Texteditor gibt automatisch einige Vorschläge für uns zu verwenden. Ich werde Arial als Beispiel mit dem Semikolon am Ende wählen. Sie werden feststellen, dass es drei verschiedene Namen sind, und dies ist die Reihenfolge der Priorität. Zuerst haben wir Arial, und das ist die Schriftart, die wir verwenden werden, wenn der Browser es unterstützt. Wenn nicht, wird es zur Helvetica übergehen, was die zweite Priorität hat. Wenn weder Arial noch Helvetica verfügbar ist, wird der generische Familienname verwendet, wie serif oder serif. Dies ist eine Möglichkeit, Schriftarten hinzuzufügen, eine andere besteht darin, eine Schriftart-Website zu besuchen und eine von dort auszuwählen. Sie können eine Suche nach Web-Schriftarten durchführen, wenn Sie sich einige mehr genauer ansehen möchten, eine beliebte sind Google-Schriftarten. Ich gehe zum Webbrowser und suche dann nach Google-Schriftarten, und das ist die Website, die ich für meinen Blog verwenden werde. Gehen wir runter zu fonts.google.com. Sie können einige der beliebtesten sehen. Sie können eine Suche durchführen oder auch nach Kategorie eingrenzen. Der, den ich für meinen Blog verwenden werde, heißt Treibsand. Ich werde eine Suche dafür machen und dann „Enter“ drücken, und Sie können sehen, dass der Treibsand in der Suche erscheint. Natürlich, zögern Sie nicht, eine andere zu wählen, wenn Sie es bevorzugen. Hierbei müssen wir nur auf das rote Plus-Symbol klicken. Dann, um dies zu unserer Website hinzuzufügen, gehen wir nach unten und erweitern. Dann haben wir den Link zum CSS Stylesheet. Dies ist ein Link zu Google-Schriftarten, die es uns ermöglicht, dies in unserem Projekt zu verwenden. Also kopieren Sie diesen vollständigen Link. Ich werde Command oder Control C verwenden, um dies zu kopieren und zurück in die index.html zu gehen, und dann müssen wir dies in den Kopfbereich einfügen. Ich füge das hinzu, sprenge einfach den Titel und füge ihn ein. Wir müssen dies tun, weil wir keine Standard-Web-Schriftart verwenden. Wir müssen mit Google verknüpfen, um dies in unserem Code verfügbar zu machen, zurück zu Google-Fonts. Wir müssen dann die Zeile von CSS kopieren, die für die Schriftfamilie ist, die wir zuvor gesehen haben. Also kopieren Sie das und wenn wir dann in den Stilbereich gehen, werde ich die Schriftfamilie ersetzen, die wir zuvor verwendet haben, und fügen Sie diese Treibsand ein. Jetzt sollte diese nicht standardmäßige Schriftart funktionieren, da wir den obigen Link haben. Lassen Sie uns das speichern und dann den Browser aktualisieren, um zum Projekt zurückzukehren und dann zu aktualisieren. Jetzt können wir sehen, dass sich der Stil des Textes geändert hat. Das bedeutet, dass die Schriftart jetzt funktioniert. Als nächstes können wir dann die Schriftfarbe ändern. Dazu fügen wir einfach eine Farbeigenschaft hinzu. Immer noch innerhalb des HTML-Selektors, gehen, um eine neue Zeile hinzuzufügen, die für die Farbe sein wird. Auch wenn Sie dies eingeben, werden Sie einige Vorschläge des Browsers sehen. Sie können eine dieser Farben auswählen, die Sie bevorzugen, oder Sie können eine Farbauswahl für einen größeren Farbbereich verwenden. Wenn wir zurück zum Browser gehen und dann zu Google gehen, werde ich nach HTML-Farbauswahl suchen. Ein beliebtes ist die W3Schools, also werde ich das auswählen. Hier können wir die Farbe auswählen, die wir mögen und auch viele verschiedene Schattierungen und Varianten dieser Farbe sehen. Wählen Sie einfach eine von der linken Seite, und dann können wir sie auf einen helleren oder dunkleren Farbton eingrenzen. Auf der rechten Seite erhalten wir die Schattierungen im sogenannten Hex-Format. Dies ist, was Sie auf der rechten Seite sehen können, und das ist sechs Ziffern mit dem Hash-Präfix. Wir können dann diese Hex-Farbe in unserem CSS verwenden. Ich werde einen Farbwert für meinen Text von 1a1a1a verwenden. Also gehen wir zurück zum CSS und dann mit dem Hash-Präfix werde ich 1a1a1a mit dem Semikolon am Ende hinzufügen. Wir müssen sicherstellen, dass jede Zeile mit einem Semikolon endet und dies ist der Fall für alle CSS-Eigenschaften. Geben Sie das ein Speichern und dann, wenn wir unser Projekt im Browser aktualisieren, sollte dies die Farbe im Browser nicht ändern. Die Veränderung ist sehr subtil, so dass es schwierig sein kann, zu sagen. Wenn Sie überprüfen möchten, dass dies funktioniert, können wir es in eine andere Farbe ändern, wie rot und dann aktualisieren, und jetzt können wir deutlich sehen, dass der Text geändert wird. Ich werde diese Änderung einfach rückgängig machen und sie dann wieder so einstellen, wie sie war. Gut gemacht, wenn du es geschafft hast, all das zum Laufen zu bringen. Wenn nicht, überprüfen Sie Ihren Code sorgfältig auf Tippfehler. Als Nächstes möchte ich Ihnen auch zeigen, wie Sie Klassen und IDs verwenden, um unsere Elemente auszuwählen. 12. Kurse und IDs: Wir haben uns die Auswahl von Elementen anhand ihres Tag-Namens, wie HTML, Header oder URL angesehen . Es gibt auch andere Möglichkeiten, dies mithilfe von Klassen und IDs zu tun. Klassen und IDs sind Attribute, die wir zu Elementen hinzufügen können. Lassen Sie uns beginnen, indem wir uns ansehen, wie wir eine ID verwenden können. Wenn wir zum öffnenden Tag für den Header gehen, können wir ein ID-Attribut hinzufügen und diesem einen Namen unserer Wahl geben. Ich werde das die Hintergründe nennen und speichern. Wir können jetzt diesen Namen des Hintergrunds mit dem Hash-Präfix verwenden. Direkt unter den HTML-Kalibratoren. Da es sich um eine ID handelt, können wir die harte verwenden und sie dann mit dem Namen der Hintergründe auswählen. Einer der Gründe, warum wir dies tun würden, ist, weil, wenn wir den Header als Selektor nehmen, dann würden die Stile für alle Header auf der Seite und Domänenbewusstsein gelten. Wenn wir zur fertigen Seite gehen, möchte ich, dass dieser Hintergrund die graue Hintergrundfarbe hinzufügt, die Sie hier sehen können. Wir verfügen über eine Hintergrundeigenschaft, um dies zu tun. Zurück im CSS können wir den Hintergrund hinzufügen. Ich werde meinem Knie hex Farbe von d8 geben. Wir haben auch Zugriff auf die gleiche Palette von Farben wie zuvor mit Text. Speichern Sie das, gehen Sie dann zum Browser und aktualisieren Sie das Projekt. Jetzt können wir sehen, dass der graue Hintergrund hinter dem gesamten Header erschienen ist. Wenn Sie sich die fertigen Seiten ansehen, können wir auch sehen, dass der gleiche graue Hintergrund auch hinter dem Text steht. Dies ist jedoch kein guter Anwendungsfall für eine ID. Eine ID soll nur einmal für einen eindeutigen Abschnitt verwendet werden. Wenn wir die gleichen Stile mehr als einmal verwenden wollten, könnten wir diese ID in eine Klasse ändern. Unten in der Kopfzeile können wir ID ändern, um gleich Klasse zu sein. Dann können wir die gleiche Klasse zum p-Text zu anderen Hintergründen zu diesen beiden hinzufügen. So ist p-Klasse auch gleich Hintergrund. Dann, wenn es den CSS-Selektor von einem harten zu einem Punkt ändert. So wählen wir Klassen aus. Nun, wenn wir das speichern und zurück zum Browser gehen, drücken Sie Refresh. Jetzt haben wir die grauen Hintergründe in der Kopfzeile und auch den Text. Dies ist also der Unterschied zwischen der Verwendung von Klassen und IDs mit CSS. 13. Einführung in Flexbox und dynamisches Design: Die CSS-Flexbox ist eine relativ neue Art, Elemente auf einer Website auszulegen und auszurichten. Es zielt darauf ab, den Prozess viel einfacher zu machen als in der Vergangenheit. In der Vergangenheit haben wir Hacks und Methoden wie; Tabellen, Floats oder kompliziertes CSS verwendet , um die gewünschte Ebene zu erreichen. Die Flexbox hat dies verkauft, indem sie uns einige einfache, aber effektive Möglichkeiten bietet, Elemente zu gestalten und zu positionieren. Wir beginnen mit der Definition eines Flex-Containers, wie Sie hier sehen können. Auf diese Weise können wir festlegen, wie die Flex-Elemente im Inneren erscheinen sollen. Wir können die Richtung, die Ausrichtung und wie viel Platz dazwischen ist, um einige zu nennen. Außerdem haben wir auch die Kontrolle über die einzelnen Flex-Elemente. Beispielsweise können wir die Reihenfolge festlegen, in der sie angezeigt werden sollen, die Ausrichtung und auch festlegen, wie sie wachsen oder verkleinern sollen, abhängig vom verfügbaren Platz. Was bedeutet das alles für unseren Blog? Nun, im Grunde wird es verwendet werden, um unsere Website zu gestalten , um am besten für verschiedene Site-Laster geeignet zu sein. Das Ändern des Layouts für verschiedene Bildschirmgrößen wird als Responsive Webdesign bezeichnet. Wir werden unseren Blog reagieren verschiedene Website-Geräte für eine bessere Benutzererfahrung. Auf der linken Seite haben wir ein kleines Bildschirmgerät, wie ein mobiles oder kleine Tablets. Der Inhalt hier wird normalerweise vertikal übereinander gestapelt. Wie wir jedoch auf der rechten Seite sehen können, wir mehr Inhalte nebeneinander hinzufügen, da wir mehr Platz auf dem Bildschirm könnenwir mehr Inhalte nebeneinander hinzufügen, da wir mehr Platz auf dem Bildschirmhaben. Um dies zu erreichen, setzen wir einfach unsere Flex-Container, wie den Header oben, und einen weiteren Container für den Rest unserer Inhalte, die wir steuern möchten. Hier benutze ich ein div. Um dies zu erreichen, können wir eine CSS-Eigenschaft Richtung setzen. Unter diesen, flexible Richtung ermöglicht es uns, die untergeordneten Elemente auf eine Spalte zu setzen, die übereinander gestapelt ist, eine Zeile, die von links nach rechts ist. Um eine CSS-Eigenschaft von Spalte zu Zeile zu ändern, wird eine Medienabfrage verwendet, aber mehr dazu später. Dies ist nur ein grundlegender Überblick über die CSS-Flexbox. Es hat viel mehr Eigenschaften und Optionen als das, was wir hier sehen können. Wir werden uns auch ein paar davon während der Projekte ansehen, aber jetzt lassen Sie uns dies in die Praxis umsetzen, indem wir es dem schweren Abschnitt hinzufügen. 14. Kopfzeilen-CSS, Rand und Padding: Wir haben jetzt eine bessere Vorstellung davon, wie wir die Flexbox verwenden, um unsere Website zu gestalten. Lassen Sie uns nun an den Header-Abschnitt zu arbeiten. Öffnen wir also den Texteditor. Also werden wir die Website mit einem mobilen ersten Ansatz gestalten. Das bedeutet, dass wir zuerst die Sites für ein mobiles Gerät anlegen und dann auf diesem für größere Geräte aufbauen, sobald mehr Speicherplatz verfügbar ist. Um dies zu tun, werde ich den Browser verkleinern, um ein kleineres Gerät zu simulieren. Das sieht also richtig aus. Ich werde diese Sidebar schließen, nur um uns ein bisschen mehr Platz zu geben. Also innerhalb des Stil-Abschnitts. Beginnen wir mit dem Hinzufügen des Header-Selektors zum CSS. Also direkt unter den Hintergründen, gehe den Header hier mit den geschweiften Klammern hinzufügen. Bei kleineren Geräten möchte ich also den gesamten Text in der Mitte ausrichten. Wir können dies tun, indem wir eine text-align Eigenschaft hinzufügen. Ich werde das in den Mittelpunkt stellen. Speichern Sie das und aktualisieren Sie es. Wir können jetzt sehen, dass der Text in der Mitte der Kopfzeile ist. Wir haben auch die Möglichkeit, links und rechts zu. Als nächstes möchten wir, wie wir in den Flexbox-Folien gesehen haben, dass set-Header ein Flex-Container ist. Wir können dies tun, indem Sie den Anzeigetyp einstellen, um gleich einem Flex zu sein. Schlamm aktualisieren Sie den Browser. Sie sehen, dass der Inhalt nun als nächstes angezeigt wird, je nachdem, was auch immer. Dies ist, weil die Flexrichtung standardmäßig auf Zeile festgelegt ist. So wollten wir nach großen Geräten suchen. Aber mit kleineren Geräten können wir diese Flex-Richtung zurück auf Spalte setzen. also innerhalb des Kopfzeilenabschnitts Lassen Sie unsalso innerhalb des Kopfzeilenabschnittsdie Flex-Richtungseigenschaft hinzufügen. Ändern Sie dies dann zurück in Spalte. Geben Sie dem ein Sparen. Mal sehen, wie das aussieht. Großartig. So kann jetzt sehen, dass der Inhalt übereinander gestapelt ist. Also denken Sie daran, wie Sie durch die Seiten gehen. Dies sind die CSS-Eigenschaften, die ich für meinen Blog hinzufüge. Fühlen Sie sich frei, Änderungen, die Sie am besten zu Ihrer Website passen möchten. Also als nächstes werde ich etwas CSS zu diesem h1-Header-Titel hinzufügen, der in der Kopfzeile enthalten ist. Also haben wir bereits untersucht, wie wir dies stylen können, indem wir eine Klasse oder eine ID zu diesem h1 hinzufügen. Oder [unhörbar] h1 ist so. Also lassen Sie uns den Header h1 hinzufügen. Dies stellt sicher, dass wir spezifisch sind und nur die h1 innerhalb des Headers zielen. Dies funktioniert auch für über Elemente. Ich werde etwas Rand und Padding hinzufügen, um dies für den Abstand. Bevor wir dies tun, werfen wir einen kurzen Blick auf, was Marge und Polsterung ist? Nehmen wir an, wir platzieren ein Artikelelement in unserer Website. Ich möchte, dass es schön gleich Platz ist, wie wir hier sehen. Wenn wir nur in diesem Artikel hinzufügen , kann es standardmäßig eher so aussehen. Gebündelt gegen den äußeren Behälter. Um etwas Platz auf der Außenseite des Elements zu behalten. Wir können etwas Marge hinzufügen, genau wie Sie hier sehen können. Außerdem können wir Raum innerhalb der Elemente hinzufügen. Dies wird als Padding bezeichnet. Wenn wir beispielsweise hier ein Bild hinzugefügt haben, würde das Auffüllen innerhalb des Artikels gelten und Raum um das Bild herum schaffen, wie wir hier sehen können. Im Grunde liegt der Rand außerhalb der Elemente und die Polsterung ist innen. Jetzt kennen wir den Unterschied zwischen Marge und Padding. Wir können dies in Aktion mit dem Header h1 sehen. Wenn wir uns die Kopfzeile innerhalb des Browsers ansehen, können wir sehen, dass es etwas Platz bereits über diesem h1 Elemente gibt. Dies wird vom Browser standardmäßig angewendet. Wir können das entfernen, indem wir plötzlich auf Null zurückmargen. Fügen Sie dies also in den Header h1 hinzu, geben Sie diesem ein Speichern und aktualisieren Sie dann. Jetzt können Sie sehen, dass es nach oben verschoben wurde, sodass der Standardrand entfernt wurde. Dies entfernt also den obigen Standardraum, lässt aber alles miteinander verbunden. Wir können hier etwas zusätzlichen Platz hinzufügen, indem wir ein Füllvolumen hinzufügen. Also direkt unter dem Rand werde ich etwas Polsterung hinzufügen. [ unhörbar] meins auf 15 Pixel. Aber natürlich, tun, was zu Ihrem Blog passt. Aktualisieren Sie dann. Jetzt können Sie sehen, dass wir einen schönen gepolsterten Platz zwischen den Elementen haben. Das letzte, was ich in diesem Video tun möchte, ist, die Standard-Aufzählungszeichen links von den Listenelementen zu entfernen und auch den Text zu zentrieren. Wir können nun die Listenelemente mit dem LI-Selektor Ziel. Um diese Aufzählungszeichen zu entfernen, müssen wir lediglich die List-Style-Eigenschaft auf none setzen. Es gibt auch Optionen für Änderungen an anderen Stilen. Beispiel ein Quadrat oder sogar ein Bild. Geben Sie also ein Speichern und aktualisieren Sie es dann. Jetzt können wir sehen, dass die Kugeln entfernt wurden. Lasst uns das jetzt ausräumen. Ich werde etwas Polsterung anwenden. Direkt unter dem List-Stil. Ich werde dies auf einen Wert von 10 Pixel setzen. Also, jetzt werden wir einige schöne Abstände um jeden der Links haben. So sieht die Dinge jetzt ein bisschen besser aus. Aber wir können sehen, dass die Nervengegenstände immer noch nicht in der Mitte. Also, warum ist wach? Um besser zu verstehen, müssen wir zu den Browser-Entwickler-Tools gehen. Also werde ich nur den Browser ein wenig größer erweitern. Dann werde ich kontrollieren oder mit der rechten Maustaste klicken und dann nach unten gehen, um zu inspizieren. Dann, wenn wir auf diesen kleinen Pfeil in der Ecke klicken. Dann fahren Sie mit dem Mauszeiger rüber, bis wir die UL hier oben sehen. Wir können sehen, dass wir diesen grünen Abschnitt auf der linken Seite haben , der scheint alles zu schieben, diesen grünen Abschnitt. Wenn wir nach unten scrollen, können wir sehen, dass der grüne Teil der Polsterung ist. Das bedeutet also, dass das Padding standardmäßig innerhalb des Browsers hinzugefügt wird. Alles, was wir tun müssen, ist dies innerhalb des CSS zu überschreiben. Wir können dies tun, indem wir die ungeordnete Liste auswählen. Setzen Sie dann die Polsterung auf Null zurück. Dann gib die Auffrischung. Jetzt können Sie sehen, dass die Links jetzt schön in der Mitte sind. So sieht unser Header jetzt besser aus. Lassen Sie uns das nun noch besser aussehen, indem Sie mit unserem Hintergrundbild fortfahren. 15. Wo du großartige Archivbilder findest: Während des Bauens dieses Projekts und auch zukünftige Projekte. Sie werden immer auf die Notwendigkeit stoßen, einige qualitativ hochwertige Bilder zu finden, die Sie auf Ihrer Website verwenden können. Dieser Blog ist nicht anders, und hier möchte ich Ihnen ein paar Ressourcen zeigen, um einige gute Qualität Bilder zu finden. Die erste ist pixabay.com, und dies ist eine Website, auf der Sie kostenlose Stockbilder finden können, und diese sind unter der Creative Commons Lizenz aufgeführt. Das bedeutet, dass es für den kommerziellen Gebrauch kostenlos ist und wir keine Zuordnung zum Angebot oder zur Website hinzufügen müssen. Bilder zu finden ist einfach. Wir können die Suchfunktion nutzen oder sogar auf die Explore klicken. Wenn wir zum Beispiel ein Bild von einem Tiger wollten, könnten wir eine Suche durchführen, und wenn wir dann eines auswählen, müssen wir nur auf den kostenlosen Download klicken. Hier können Sie einige Informationen über die Lizenz sehen. Sie können sehen, dass das Bild für den kommerziellen Gebrauch kostenlos ist und wir keine Namensnennung schreiben müssen. Dies ist also eine gute Website für qualitativ hochwertige Bilder zu verwenden. Eine andere ist eine Website namens Unsplash, und Sie können diese Kunst finden Unsplash.com. Die Bilder, die Sie hier finden, sind auch kostenlos zu verwenden und wieder können Sie eine einfache Suche oder klicken Sie auf die Bilder und klicken Sie dann auf den Download-Button. Sie werden auch feststellen, dass es ein Popup sagt, dass Gutschrift nicht erforderlich ist, aber wird geschätzt, um den Fotografen etwas mehr Belichtung zu geben, und es gibt einige Text unten in die Website einzubetten, wenn Sie nicht an diesem wollen. Eine weitere großartige Ressource ist die Wiki Media Commons Website. Jeden Tag gibt es ein neues Bild des Tages, das Sie verwenden können und alles, was Sie tun müssen, ist auf die Registerkarte Bilder oben klicken, und dann können wir Bilder nach einer Kategorie auswählen. Die Bilder auf hier sind kostenlos zu verwenden, und Sie können auch mehr Informationen über die Lizenz auf der linken Seite und der Willkommensseite erfahren. Dies hat nur im Grunde einige Informationen, die Ihnen sagen, wie die Bilder frei zu verwenden sind. Schließlich haben wir eine Website namens Shutterstock.com. Möglicherweise haben Sie dies bereits als wahrscheinlich die größte gehört, und haben die größte Auswahl an Bildern zur Verfügung. Sie können auch Dinge wie Musiktitel und Videoclips herunterladen. Es gibt jedoch Kosten dafür. Shutterstock ist einer von denen hier, der nicht frei ist. Sie können sich die Preispläne ansehen, indem Sie auf den Link hier klicken. Eine andere Möglichkeit, Bilder zu finden, ist eine Google-Suche. Also, das wird auch nach unserem Tiger gesucht. Aber eines der Dinge, die zu beachten sind, ist die Lizenzvereinbarung. Wenn wir auf die Bilder klicken, eine der Möglichkeiten, um dies auf diejenigen zu filtern, die frei sind, um es zu verwenden, indem Sie auf den Tools-Menü-Link gehen und daher auf Nutzungsrechte und die beschriftet für die Wiederverwendung mit Modifikation gehen. Wenn wir diese unausgegeben wählen, füllt jetzt die Bilder auf diejenigen, die wir frei verfügbar sind, um zu verwenden. Aber schließlich, überprüfen Sie immer die Lizenz und Vereinbarung, bevor Sie irgendwelche Bilder herunterladen , um zu überprüfen, dass Sie in Ordnung sind, sie für Ihren Anwendungsfall zu verwenden. Alles, was Sie jetzt tun müssen, ist, ein Bild auszuwählen , das Sie für den Hintergrund Ihres Blogs verwenden werden, und dann haben Sie dieses zur Verfügung, um es im nächsten Video zu verwenden. Oder wenn Sie nur mit mir folgen möchten, wird das Bild in diesem Kurs verwendet, der innerhalb des Ressourcenabschnitts zur Verfügung gestellt wird. 16. Hintergrundbilder und Platzierung der Flexbox: Sie sollten nun gleichmäßig Bilder mit dem Kurs zur Verfügung gestellt haben, oder Ihre eigenen Bilder, die Sie verwenden möchten. Um diese Bilder zu Ihrem Projekt hinzuzufügen, müssen wir sie nur dem Projektordner hinzufügen. Diese können überall platziert werden, aber ich werde diese innerhalb eines Bilderordners hinzufügen, nur um die Dinge organisiert zu halten. Zurück auf dem Desktop werde ich die Projekte öffnen. Hier können Sie sehen, ich habe die Bilder, die im Rahmen dieses Kurses verfügbar sind. Mach dir keine Sorgen, wenn du nur das Hintergrundbild hast. Der ganze Rest dieser Bilder wird später im Kurs für den Blog verwendet werden. In diesem Blog-Ordner werde ich mit der rechten Maustaste klicken und einen neuen Ordner namens Bilder erstellen, und dann werde ich alle diese innerhalb des Bilderordners ziehen. Für jetzt werden wir dieses Hintergrundbild nur für die Londoner Seite verwenden. Natürlich könnte Ihr etwas ganz anderes genannt werden, also denken Sie daran, wenn wir dies innerhalb des Projekts eingeben. Wenn wir nun auf die Seite index.html gehen, wenn wir nach unten scrollen, blasen Sie alle CSS. Wir werden diesen Text von „Hi, ich bin Chris, folge mir auf meiner Reise um die Welt.“ Ich werde zwei Klassen hinzufügen. Der erste wird für den umgebenden div-Container sein. Diese Klasse wird als Fahrtbild bezeichnet, also ist dies der Klassenname für den Container. Dann eine zweite Klasse für diese Texte von Journey Texten. Wie Sie hier sehen können, haben wir zwei separate Klassen, die nur durch Leerzeichen getrennt sind, und das ist völlig in Ordnung zu verwenden. Jetzt haben wir diese Klassen hinzugefügt, wir können das Bild dem Journey Image-Container mit dem CSS hinzufügen. Sichern Sie sich den Abschnitt „Stil“. Denken Sie daran, dass dies eine Klasse ist, also müssen wir die Punkte verwenden. Wir wollen das Bild der Reise ins Visier nehmen. Wir können ein Hintergrundbild in CSS mit der Hintergrundeigenschaft hinzufügen, dann verwenden wir eine URL, um einen Link zum Speicherort der Datei bereitzustellen. Diese wird im Bilderordner gespeichert und das Bild wird als Hintergründe Punkt JPEG bezeichnet. Natürlich, wenn Ihre etwas anderes genannt wird, müssen Sie das ändern. Dann werden wir vor allem einige Eigenschaften hinzufügen, ohne Wiederholungen. Standardmäßig werden Bilder horizontal und vertikal wiederholt. Wir fügen keine Wiederholung hinzu, weil wir nur ein Full-Size-Bild wollen. Dann Mittensensor. Dies senkt das Bild standardmäßig sowohl auf der X- als auch auf der Y-Achse, um es oben links zu ersetzen. Dadurch wird das Bild zurück in die Mitte verschoben. Dann werden wir schließlich fixiert am Ende hinzufügen, dies hält die Bildposition fixiert, wenn wir scrollen und wir werden einen Blick auf diese in nur einem Moment. Geben Sie das ein Speichern, dann, wenn wir zum Browser gehen und dann aktualisieren, sehen wir immer noch, dass kein Bild auf dem Bildschirm angezeigt wurde. Dies liegt daran, dass das Hintergrundbild nur die Höhe des Inhalts innerhalb dieses div ist, d. h. der Text, und dieser Text verbirgt das Bild jedoch wegen des grauen Hintergrunds. Wenn wir vorübergehend zum Stil gehen und den Hintergrund entfernen, schneiden Sie aus und speichern Sie und aktualisieren Sie dann. Wir können sehen, dass der Hintergrund gerade auf dem Bildschirm erschienen ist. Lassen Sie uns das wieder hinzufügen. Um dies zu umgehen, können wir die Höhe des Reisebildes im CSS mit der minimalen hohen Eigenschaft einstellen , und wir können dies direkt unter der Hintergrundeigenschaft hinzufügen. Um zurück nach unten zu der Reise Bild, und dann können wir die minimale Höhe von 100 vh hinzufügen. Die minimale Höhe kann ein Pixelwert, ein Prozentsatz oder 70 bis 100 vh sein. Dieser Satz sagt, dass er 100 Prozent der Höhe des Ansichtsfensters entspricht. Das Ansichtsfenster ist ein sichtbarer Bildschirm des Geräts. Speichern Sie das, und jetzt, wenn wir aktualisieren, sehen wir jetzt, dass das Bild auf dem Bildschirm ist. Eine Sache zu bemerken, wenn Sie im Browser nach unten scrollen, dass sich das Bild in einer festen Position befindet. Dies liegt daran, dass wir dies festgelegt haben, um zu beheben. Wenn wir dies entfernen würden, können wir durch die Aktualisierung des Browsers sehen , dass das Bild mit dem Rest der Seite scrollt, aber ich möchte meine fixiert halten, wie ich es mir möchte. Lassen Sie uns mit stumm dieses Bildabschnitts fortfahren. Unterhalb der minimalen Höhen werde ich die Eigenschaft für die Hintergrundgröße hinzufügen. Wir setzen das auf Deckung. Die Hintergrundfarbe kann so eingestellt werden, dass das Bild den gesamten Hintergrundbereich bedeckt, und dann werden wir den Anzeigetyp so einstellen, dass er flex ist, genau wie wir es in der Kopfzeile betrachtet haben. Dies wird auch der Flex-Container für unsere Texte sein, also speichern Sie das und wenn wir aktualisieren, können wir jetzt sehen, dass der Text jetzt oben auf dem Bild platziert wird , anstatt darüber zu sitzen, wie es vorher war. Wir können nun den Flexbox verwenden, um diesen Text in der Mitte sowohl horizontal als auch vertikal auszurichten . Um die Textzeile als vertikal festzulegen, können wir die Zeilenelemente Eigenschaft festlegen. Fügen wir dies direkt unter dem Anzeigetyp hinzu. Richten Sie Elemente in der Mitte aus, und lassen Sie uns einen Blick darauf werfen. Aktualisieren. Jetzt können wir sehen, dass dies vertikal auf das Bild ausgerichtet ist. Nun, um den Text horizontal zu senden, können wir eine andere Flexbox-Eigenschaft von Begründung Inhalt verwenden und auch diesen Sensor zu sein, so speichern und geben Sie diese Aktualisierung. Jetzt können wir sehen, dass der Text nun in die Mitte des Bildes verschoben hat. Jetzt können Sie sehen, wie einfach es ist, Text mit der Flexbox auszurichten. Als nächstes werden wir beenden, indem wir die endgültigen Stile für die mobile Ansicht hinzufügen. 17. Abschließendes Styling für kleine Bildschirme: So können wir jetzt auch etwas Styling zu dem Text hinzufügen. Wir bekommen diesen Text, eine Klasse von Reisetext. Lassen Sie uns dies dem CSS direkt unten hinzufügen. Lassen Sie uns also beginnen, indem Sie die Textzeile des Sensors hinzufügen. Macht ein bisschen kleiner. Dann möchten Sie die Schriftgröße auf 2ems erhöhen. Hier verwenden wir ein m als Schriftgröße. Wir können auch feste Größen verwenden, wie Pixel, aber em ist skalierbare Einheit, ein em ist gleich der aktuellen Schriftgröße. So macht finister 2em es doppelt so groß wie es normalerweise sein würde. Also lassen Sie uns einen Blick durch Erfrischung werfen und jetzt können Sie sehen, dass der Text viel größer ist. Dann fügen wir dem Text etwas Padding hinzu und dieses Mal möchte ich 1.5em hinzufügen, und das funktioniert genau so, als ob die Schriftgröße das 1,5-fache des Auffüllens ist , was normalerweise sein würde. So, jetzt können Sie sehen, dass wir etwas Platz um den Text haben. Schließlich ist der Grenzradius, und einmal, dass Geist zehn Pixel sein. Wenn ich also aktualisiere, gibt es uns eine schöne abgerundete Kante auf der Außenseite des Behälters. Dinge sehen also ein bisschen schöner aus. Wir wollen auch etwas gegen diese Links zu der Farbe zu tun passt nicht in den Rest der Website und ich möchte die zugrunde liegende zu entfernen. Wenn Sie sich an diese Links erinnern, ein Satz mit dem a -Tag. Also zielen wir den Selektor in einem CSS ab. So unter den Reisetexten können wir die a hinzufügen. Um die Unterstreichung zu entfernen, können wir die Textdekoration so einstellen dass dies die Zeile unter jedem der Links entfernt, und dann können wir auch die Farbe einstellen, wie wir und was für ein viel der Rest der Website, indem Sie dies auf den Hex-Wert von 1a1a1a senden, und dann aktualisieren und jetzt sieht dies viel konsistenter mit dem Rest der Websites aus. Das letzte, was wir jetzt in diesem Video tun wollen, ist, diesen grauen Hintergrund ein wenig transparent zu machen, so dass der Hintergrund durch ihn gesehen werden kann. Zuerst gehe ich zum CSS und zur Hintergrundeigenschaft. Ich werde einen Kommentar hinzufügen , der mit einem Schrägstrich, dann Stern vor und dann das Gegenteil von einem Stern und einem Schrägstrich verwendet werden kann , und dann kommentieren Sie diese Zeile. Ein Common ist eine Möglichkeit, einem Browser mitzuteilen, diesen Code zu ignorieren. Wir können auch Kommentare verwenden, um Notizen einzugeben, sowohl für uns selbst als auch für andere Entwickler. Um diese durchsichtige Deckkraft hinzuzufügen, können wir anstelle des Hex-Typs, den wir gerade verwendet haben, eine RGBA-Farbe verwenden. Um diesen Hex-Typ farbig in RGBA zu konvertieren. können wir ein Online-Tool verwenden. Also werde ich zu Google gehen und den Browser ein wenig größer und möchte hex zu RGBA und seinen verschiedenen Tools suchen, die Sie verwenden können. Ich werde die Hex-Farbe tool.com verwenden. Ich muss keine Farbe eingeben. Also der Hex-Wert, den wir zuvor verwendet haben, war d8d8d8, und dies wird es dann in einen RGBA-Wert konvertieren. Also kopieren Sie dies und gehen Sie zu den Hintergründen kann dies einfügen, um den Hintergrund auf den neuen RGBA-Wert zu setzen, gefolgt von dem Semikolon. RGBA-Farben haben vier Werte. Wir legen die Werte Rot, Grün und Blau fest, um zu beginnen. Dann ist der letzte Wert für die Transparenz und dies ist ein Wert zwischen Null und Eins. Null, vollständig transparent. Also möchte ich meins auf keine 0.7 setzen, gibt uns speichern und dann den Browser aktualisieren. So können wir jetzt hinter dem Text sehen wir die halbtransparenten Hintergründe und das Bild beginnt zu bestätigen. So haben wir jetzt das Styling für den kleinen Bildschirm Mobile View abgeschlossen. Als Nächstes werden wir einen Blick auf Medienabfragen werfen, damit wir Stile hinzufügen können, die nur auf größeren Geräten angewendet werden können. 18. Einführung in Medienfragen: Nun, wie die Dinge aussehen, wollen wir sie auf kleineren Geräten. Wir können jetzt beginnen, den Browser zu erweitern, um zu simulieren, wie die Dinge auf größeren Geräten aussehen. Wir können dann eine Medienabfrage verwenden, um CSS nur anzuwenden , wenn der Browser breiter ist als die wir gesetzt. Grundsätzlich werden kleinere Bildschirme in eine Richtung aussehen und die größeren Bildschirme können verschiedene Layouts und Stile haben. Wenn wir zurück zu Inspect gehen und die Entwickler-Tools öffnen, können wir hier auf diese Kluft klicken und die Website kleiner oder größer machen und wir können auch oben sehen, dass wir die Breite des Browsers sehen können. Dies ermöglicht es uns, eine Bildschirmbreite zu sehen, wo unsere Inhalte anfangen, fehl am Platz für größere Geräte zu suchen. Wir können für kleinere Geräte sehen, dass dieser Ansatz mit voller Breite gut funktioniert. Wenn wir den Browser jedoch auf etwa 1000 Pixel dehnen, sieht es aus, als wäre er ein wenig breiter, die Dinge beginnen ein wenig gestreckt und brauchen eine Änderung. Hier kommen Medienabfragen ins Spiel. Medienabfragen ermöglichen es uns, bestimmte CSS-Eigenschaften nur anzuwenden, wenn eine Bedingung erfüllt ist. Zum Beispiel können wir Stile oder Layouts für Geräte im Querformat oder Hochformat ändern oder wir können eine minimale oder maximale Breite festlegen, um die Medienabfrage anzuwenden. Es gibt auch viele weitere Bedingungen, die wir festlegen können , und es wird mehr Links in den Ressourcen Download geben, um einige davon zu sehen. Lassen Sie uns zu den Stylesheets gehen und beginnt, diese auf unserer Website hinzuzufügen. Lassen Sie uns Visual Studio-Code öffnen und unsere Medienabfrage hinzufügen. Um eine Medienabfrage zu setzen, können wir den freien CSS Medientyp mit @media verwenden. Unten unten unten sind alle unsere Stile, @media hinzufügen und dann genau wie der Stil oben hatte dies seinen eigenen Satz von geschweiften Klammern. Dann nach @media können wir einige Klammern hinzufügen, um die Bedingung hinzuzufügen, in der diese Medienabfrage angewendet wird. Ich möchte, dass diese Stile angewendet werden, sobald der Browser eine Mindestbreite von 1.000 Pixeln erreicht. Erinnern Sie sich, bevor ich anfing, etwas überstreckt von dieser Größe auszusehen. diesem Grund habe ich es auf 1.000 Pixel eingestellt. Fühlen Sie sich frei, Ihre Größe je nach Ihrer Website zu ändern. Dann können wir unsere CSS-Stile innerhalb dieser geschweiften Klammern hinzufügen, genau wie wir es immer getan haben. Ich werde damit beginnen, das maximale Gewicht für den Körper auf etwa 1.600 Pixel zu setzen. Dies wird verhindern, dass der Inhalt zu gestreckt wird, wenn wir zu wirklich großen Monitoren kommen. Wir können das im Körper tun. Ich werde die maximale Breite von 1.600 Pixel einstellen. Dies wird die Größe der Website einschränken , so dass die Dinge nicht wirklich auf großen Monitoren gestreckt werden. Als nächstes können wir die Margin-Werte setzen. Ich werde das mit Marge Null Auto tun. Null fügt am oberen und unteren Rand keinen Rand hinzu. Auch wird automatisch den Rand auf der linken und rechten, um gleich zu sein , was bedeutet, dass die Website in der Mitte der Seite sein wird , wenn es über 1.600 Pixel. Speichern Sie das und Sie werden keinen Unterschied auf meiner Version bemerken , weil der Bildschirm ziemlich klein ist. Aber Marge Null Auto wird dazu führen, dass dies in der Mitte auf großen Monitoren ist. Denken Sie nun an die Folien, die wir früher darüber gesprochen haben, wie Medienabfragen verwendet werden können, um Layouts mit Flexbox zu ändern. Nun, jetzt ist es an der Zeit, diese in Aktion zu sehen. Über 1.000 Pixel können wir die Flex-Richtung in der Kopfzeile in Zeile direkt unter dem Körper ändern und auch sicherstellen, dass dies immer noch innerhalb der geschweiften Klammern der Medienabfrage ist . Lassen Sie uns die Kopfzeile anvisieren und dann die Flex-Richtung auf Zeile setzen. Dann geh rüber und aktualisiere. Das bedeutet, dass unsere Header-Inhalte auf großen Bildschirmen nicht mehr übereinander gestapelt sind. Wir sehen nun, dass der Inhalt nebeneinander ist. Wenn wir unter 1.000 Pixel zurückgehen, können wir sehen, dass die ursprünglichen Stile immer noch gelten, so dass diese als Spalte gelagert werden. Zurück zu den größeren Geräten. Dies ist besser, aber die Listenelemente sind immer noch gestapelt. Es würde besser aussehen, wenn die Listenelemente in Zeile wären. Wir können den Anzeigetyp in Inline-Block ändern, um dies zu erreichen. Lassen Sie uns die Kopfzeile, Listenelemente und dann alles, was wir tun müssen, ist, den Anzeigetyp so einzustellen, dass er inline-Block ist. Wir werden das speichern und dann aktualisieren. Jetzt kann ich sehen, dass wir die Listenelemente in Zeile haben. Standardmäßig ist der Anzeigetyp für Listenelemente auf Block festgelegt, was bedeutet, dass Elemente auf der Online beginnen. Inline-Block ermöglicht es, dieses bestimmte Element nebeneinander anordnen zu können. Lassen Sie uns in diesem Kopfzeilenabschnitt arbeiten. Unter dem Header li werde ich zwei Elemente anvisieren, zuerst den Header h1, der Haupt-Website-Titel ist und dann durch ein Komma getrennt, können wir auch das Header nav anvisieren. Dies ist nur eine bequeme Möglichkeit, zwei separate Elemente auszurichten und dieselben Stile auf beide anzuwenden. Ich werde den Flex-Wert auf eins setzen. Stellen Sie den Flex auf eins sowohl für die h1 als auch das nav wird sicherstellen, dass beide eine gleiche Menge an Platz einnehmen. Speichern Sie das und dann aktualisieren und jetzt können wir die Kopfzeile, Titel, und auch die Navigation es nimmt den gleichen Platz. Der Flex-Wert beschreibt, wie ein Element vergrößert oder verkleinert wird, um den verfügbaren Platz anzupassen. Wenn wir zum Beispiel das nav so einstellen, dass es einen Flex-Wert von zwei hat, würde es versuchen, den doppelten verfügbaren Platz des h1 zu beanspruchen. Jetzt nimmt jedes Element die gleiche Menge an Platz ein, wir können den Header nach links fließen und auch die nav Links nach rechts fließen. Beginnen wir mit der Überschrift der Stufe 1. Header, h1, wir haben text-align vorher für die Mitte verwendet. Aber dieses Mal werden wir die Ausrichtung auf die linke und dann aktualisieren und jetzt können wir sehen, dass die Überschrift nach links geschoben wird. Dasselbe kann auch mit dem Header nav gemacht werden. Aber dieses Mal müssen wir natürlich die Textzeile so einstellen, dass sie richtig ist. Geben Sie das ein Speichern und jetzt sollten wir die Links auf der rechten Seite sehen. Dies gibt uns jetzt eine schön aussehende Kopfzeile, jede Seite nimmt eine gleiche Menge an Platz und fließt in den Rand der Seite. Wenn wir die Größe des Browsers unten unter 1.000 Pixel ändern, können wir sehen, dass die ursprünglichen Stile immer noch gelten. Wir haben immer noch den Header übereinander gestapelt. Nun, das ist unsere Zielseite komplett. Herzlichen Glückwunsch, dass du so weit kommst, und ich sehe dich im nächsten Video. 19. Externe Stilvorlagen: Bisher haben wir auf unserer Website Stile innerhalb dieses Kopfabschnitts, zwischen den Style-Tags hinzugefügt . Dies wird als internes Stylesheet bezeichnet und ist eine Möglichkeit, eine bestimmte Seite zu stylen. Es gibt auch einen anderen Typ, den wir als externe Stylesheets verwenden können. Das CSS schreibt es genau gleich, legt es aber in einer eigenen separaten Datei ab. Dies hat einige Vorteile; Erstens reduziert es die Größe der HTML-Datei. Es ermöglicht uns auch, den HTML-Code vom CSS für eine einfache Wartung zu trennen. Außerdem können wir dieselben Stile auch auf mehreren Seiten wiederverwenden. Um eine externe Stylesheets hinzuzufügen, müssen wir nur eine neue Datei innerhalb unseres Projekts erstellen. Lassen Sie uns den Projektordner öffnen. Dies kann überall platziert werden, aber ich werde einen CSS-Ordner hinzufügen. Dies ist praktisch, wenn Sie später weitere Stylesheets hinzufügen möchten Lassen Sie uns also einen neuen Ordner namens CSS erstellen. Dann können wir unsere neue CSS-Datei in einem Visual Studio hinzufügen. Wir öffnen auch die Seitenleiste und klicken dann auf den CSS-Ordner und klicken dann auf neue Datei. Wir werden das die style.CSS nennen. Der Dateiname liegt bei uns, aber er muss die Punkt-CSS-Erweiterung haben. Fügen Sie nun alle Stile aus dem Kopfbereich unserer Indexseite ein. Wählen Sie in HTML alle Stile aus, einschließlich der Medienabfrage ganz nach unten. Schneiden Sie also die Stile aus und speichern Sie sie dann und fügen Sie sie in den neuen Stil ein. CSS-Datei. Geben Sie dem ein Speichern und jetzt, wenn wir rückwärts zur Indexseite gehen, brauchen wir die Style-Tags nicht mehr, damit wir sie entfernen können. Eine Sache, die wir brauchen, ist eine neue Verbindung. Dieser Link wird zu unserem Stylesheet verlinken und es ist ähnlich dem, den wir oben haben, den Link zu unseren Google-Schriften. Fügen Sie diesen Link hinzu, es ist nur ein öffnendes Tag, es gibt kein schließendes Tag, dann an den rel-Attributen. Dies gibt die Beziehung zwischen den aktuellen Dokumenten und den verknüpften Dokumenten an. In diesem Fall ist es ein Stylesheet. Dann fügen wir ein zweites Attribut hinzu, das die href ist. Die href ist der Speicherort unserer Datei, und es ist das gleiche Attribut, das wir in diesen Links unten verwendet haben. Da dies im CSS-Ordner ist, werden wir die css/style.css hinzufügen. Wenn wir das speichern und zum Browser wechseln, öffnen wir das Projekt und aktualisieren dann. Wir können jetzt sehen, dass die Stile noch wirksam sind, aber das Hintergrundbild fehlt. Wenn wir zur Datei style.css gehen und dann, wenn wir das Hintergrundbild finden, können wir einen Blick warum werfen. Alles hängt von der Bild-URL ab. Der Dateipfad war vorher in Ordnung, da sich der Stil auf der Indexseite befand. Dieser Dateipfad ist relativ zu der Datei, in der wir uns befinden, das heißt von der Indexseite, wir mussten nur in den Bilderordner gehen und das Bild war für uns da. Jetzt befindet sich dieser Stil innerhalb des CSS-Ordners. Wir müssen den Punkt-Punkt-Schrägstrich vor dem Dateipfad verwenden. Dieser Punkt-Punkt-Schrägstrich weist den Browser an, eine Ebene zu suchen, was bedeutet, dass er aus dem CSS-Ordner und in die Root-Ebene springt , auf der sich die Indexseite befindet. Sobald wir wieder auf der Indexseitenebene sind, können wir dann wie zuvor wieder in den Bilderordner zurückkehren. Speichern Sie das und aktualisieren, wir sollten jetzt sehen, dass das Hintergrundbild wieder an Ort und Stelle ist und unser externes Stylesheet jetzt funktioniert. 20. So fügst du die Blogseite hinzu: die London-Seite jetzt abgeschlossen ist, gehen wir nun zur Erstellung der Blog-Seite. Ein Großteil der grundlegenden Struktur, wie zum Beispiel der Kopfbereich, ist auf der gesamten Website ähnlich. Wir werden auch die gleiche Gewohnheit wiederverwenden. Dies bedeutet, dass wir die vorhandene Indexseite duplizieren oder kopieren und einfügen können, um uns zu beginnen. Lassen Sie uns das in unserem Texteditor tun. Ich gehe zu Befehl oder Control C, und dann Befehl V, um diese Indexseite zu kopieren und einfügen, und dann möchten wir diese Datei umbenennen, den Blog-Punkt HTML. Denken Sie auch daran, wie wir diese Blog-Seite erstellen, obwohl ich Ihnen Techniken gezeigt habe , die Sie verwenden, während Sie sie auf meiner Website anwenden, fühlen Sie sich frei, sie anzupassen, wenn Sie Ihr Projekt speichern möchten. Jetzt haben wir zwei HTML-Seiten, wir haben unsere Index-Seite für die London-Seite, und dann die Blog-Seite, auf die wir verlinken werden. In der Tat wird der gesamte HTML-Code, den wir für die London-Seite haben, auch für den Blog gelten. Wenn wir einen Blick auf die fertige Version werfen und dann den Blog auswählen, ist die Seite genau die gleiche wie die London-Seite mit einem Blog unten unten unten hinzugefügt. Das Bild hat auch nicht die volle Größe des Bildschirms, aber das ist etwas, das wir in der CSS beheben können. Gehen wir zurück zum Blog-Punkt HTML. Wenn Sie sich von vorher erinnern, haben wir auch den Link zu diesem Blog Punkt HTML-Seite bereits vorhanden, das bedeutet, dass wir jetzt in der Lage sein sollten, auf den Link im Browser klicken, um den Blog zu sehen. Wählen Sie einen Blog an der Spitze, und obwohl dies die gleiche Seite ist, können wir sehen, dass dies nun den Blog-Punkt-HTML ausgewählt ist. Hier können wir auch die Vorteile der Umstellung auf eine externe Stylesheets sehen. Wir haben jetzt zwei HTML-Seiten, die die gleichen Stile teilen. Als nächstes werden wir beginnen, einige Artikel zu erstellen, um die Blog-Beiträge anzuzeigen. 21. So erstellst du Blog-Posts: In diesem Video werde ich mich auf die Erstellung der Blog-Posts konzentrieren. Wie Sie hier auf der endgültigen Website sehen können, sehen wir, wenn wir die Größe des Browsers ändern, den Layoutschalter für kleine Bildschirme auf volle Breite. Wir wissen bereits, dass wir dies mit flex-box erreichen können. Um dies zu tun, werde ich div-Elemente mit der Klasse von Gummi erstellen , um sowohl den Blog als auch die Sidebar zu umgeben. Wir können dann den Status als Flex-Eltern festlegen und den Inhalt von Spalte zu Zeile auf Geräten mit unterschiedlicher Größe wechseln . Lasst uns das jetzt aufstellen. Lassen Sie uns zum Blog dot HTML gehen und dann direkt unter diesem div mit der Klasse des Reise-Bildes gehen. Ich werde ein neues div erstellen. Die öffnenden und schließenden Tags und dann geben uns eine Klasse von Wrapper. Dann werden wir zwei Abschnitte innerhalb dieses haben, es wird ein Hauptabschnitt sein, der die Blog-Beiträge umgeben wird. Dann wird es ein Seitenabschnitt sein, der für die Sidebar sein wird. Lassen Sie uns diese beiden Abschnitte jetzt erstellen. Zuerst haben wir den Hauptabschnitt. Dann direkt darunter haben wir den Seitenabschnitt. Fügen Sie diese beides hinzu und stellen Sie sicher, dass sie innerhalb des div mit der Klasse von Wrapper-main auf der Seite zusammen mit dem Artikel verschachtelt sind, den wir als nächstes für alle semantischen HTML-Elemente verwenden, die wir zuvor angesehen haben. Jetzt können wir den Artikel hinzufügen, um den Container für die Blog-Posts zu sein. Alle Blogbeiträge, die wir erstellen, werden in diesem Hauptabschnitt sein. Lassen Sie uns unseren Artikel hinzufügen. Außerdem werde ich die Hintergrundklasse wiederverwenden, um dem Blogbeitrag den gleichen konsistenten grauen Hintergrund zu geben , den wir bereits verwendet haben. Lassen Sie uns diese Klasse von Hintergründen hinzufügen. Jetzt ist es nur ein Fall, diesen Blogbeitrag mit Elementen aufzubauen , die wir bereits verwendet haben. Beginnen wir mit der Kopfzeile. Der Header-Abschnitt wird Informationen wie den Namen des Blog-Beitrags, auch einige Informationen über den Autor und Tags enthalten. Fügen wir die Kopfzeile oben hinzu. Als nächstes werde ich hier ein h hinzufügen 2. Dies wird etwas kleiner als der Haupttitel oben auf der Seite sein. Dies wird der Name des Blogbeitrags sein, wie Sie hier sehen können. Als Beispiel werde ich dies nur den Blogbeitrag 1 nennen, und dann werde ich eine ungeordnete Liste erstellen, um dann die Informationen über den Blogbeitrag wie die Datenbank erstellt, die Tags und auch das Angebot zu erstellen die Informationen über den Blogbeitrag wie die Datenbank erstellt, . Direkt unter der Überschrift Ebene 2 fügen wir die ungeordnete Liste hinzu. Zusammen mit einigen Listenelementen, werden wir beginnen zu bieten. Dann werde ich die em-Tags verwenden, um dem Namen des Autors zusätzliche Betonung hinzuzufügen. Zwischen em werde ich meinen Namen hinzufügen. Lassen Sie uns ein Speichern geben und sehen, wie es aussieht. Wenn wir zum Projekt zurückkehren, wählen Sie den Blog aus, und scrollen Sie dann nach unten. Jetzt haben wir den Autor unten sowie den Titel des Blog-Beitrags gezeigt. Alles, was ich jetzt tun möchte, ist einfach kopieren, diesen Listeneintrag und fügen Sie ihn in zwei weiteren Malen ein. Der zweite wird für die Tags sein. Ich werde hier nur ein paar Tags hinzufügen. Das ist in Ordnung und dann wird das dritte und letzte Datum erstellt werden. Lassen Sie uns einfach vor fünf Tagen als Beispiel hinzufügen und geben Sie diesem ein Speichern und sehen, wie das aussieht. Ich werde alle Header-Informationen außerhalb dieses Header-Abschnitts festlegen , aber immer noch innerhalb des Artikels. Ich werde jetzt einen neuen Abschnitt erstellen. Dies wird für den Rest der Blog-Informationen, wie das Bild und auch den Text sein. Bevor wir uns das Hinzufügen eines Bildes über die CSS-Hintergrundeigenschaft angesehen haben. Wir können auch Bilder mit dem HTML-Bild-Tag hinzufügen. Dies ist ein selbstschließendes Tag, was bedeutet, dass es kein schließendes Tag gibt. Alles, was wir tun müssen, ist die Bildelemente hinzuzufügen und dann eine Quelle hinzuzufügen. Die Quelle wird die Position des Bildes sein. Denken Sie daran, dass wir alle Bilder in einem Bilderordner hinzugefügt haben, den Ordner Bilder auswählen, und dann möchte ich mit dem Bild Venice.JPG beginnen. Wenn Sie nicht die Bilder verwenden, die mit diesem Kurs bereitgestellt werden, wäre jetzt ein guter Zeitpunkt, um zu gehen und nehmen Sie 4-5 verschiedene Bilder und legen Sie sie in Ihrem Bilderordner. Ich werde auch ein ALT-Attribut von Venedig Bild hinzufügen. Dies ist im Grunde ein Fallback, wenn das Bild angezeigt werden kann. Es wird auch von Bildschirmlesegeräten gelesen. Es wird in der Regel empfohlen, diesen alternativen Text in den Fall einzufügen, dass das Bild nicht angezeigt werden kann. Darunter möchten Sie den Text für den Block innerhalb des p-Typs hinzufügen. Natürlich, fühlen Sie sich frei, einen Blog-Beitrag zu schreiben, wenn Sie wollen. Aber ich werde nur einige Beispieltext hinzufügen, und wir können dies tun, indem wir eine Website namens Lorem Ipsum besuchen. Ich suche einfach nach Lorem Ipsum und wähle dann lipsum.com. Dies gibt uns einige Beispiel- oder Dummy-Texte, die wir auf der Website verwenden können. Alles, was wir tun müssen, ist nach unten zu gehen und so viele Absätze auszuwählen, wie wir wollen. Ich werde dies nur in zwei Absätze ändern und dann auf Generieren klicken. Dann gibt es einen Beispieltext, den wir in unserem Projekt kopieren und verwenden können. Fügen Sie dies rechts zwischen den p-Tags ein und geben Sie ein Speichern. Mal sehen, wie das jetzt aussieht. Wenn wir zurück zum Blog gehen und aktualisieren. Großartig. Neben der Kopfzeile haben wir auch das Bild und auch den Beispieltext unten. Das letzte, was wir tun möchten, ist einen Link zum Abschnitt Read More hinzuzufügen. Wie Sie auf der fertigen Website hier sehen können. Direkt unter dem Beispieltext und schaffen ein wenig Platz hier. Ich möchte A-Tags verwenden, weil dies ein Link mit dem href sein wird und ich das nur für den Moment leer halten werde. Dies wird nützlich sein, um auf die vollständigen Blog-Beiträge auf einer eigenen separaten Seite zu verlinken und dann das Schließen eines Tags. Der Text von Read more. Werfen wir einen Blick auf das jetzt im Browser, aktualisieren. Nie geht jetzt wird der Link an der Unterseite haben. Dieser Artikel jetzt an Ort und Stelle, ich werde nur kopieren und fügen Sie dies in ein paar mehr Male. Kopieren Sie den vollständigen Artikel und fügen Sie ihn in einer weiteren Zeit ein. Ich werde nur zu Blogbeiträgen 2 wechseln und auch das Bild von Venedig in hike.JPEG ändern. Dann durchsuchen Artikel machen etwas Platz und fügen Sie wieder, so Blog-Post kostenlos. Dieses Mal wird das Bild See sein. Sagen wir, ich werde das noch ein Mal machen. Es ist großartig für Artikel fügen Sie es ein und ändern Sie dies zu Blog-Post 4 und das letzte Bild, das ich verwenden werde, ist der Elefant. Speichern Sie das und fügen Sie Ihre Bilder hinzu und gehen Sie dann zum Browser, sobald das erledigt ist, und überprüfen Sie dies für Blogbeiträge. Also der erste, der zweite, der dritte und auch der vierte, jeder mit seinem eigenen einzigartigen Bild. Jetzt können wir die vier Blogbeiträge an Ort und Stelle sehen. Das Styling braucht ein wenig Arbeit und das Layout wird noch nicht reagieren. Aber das ist in Ordnung, denn jetzt werden wir das in einem späteren Video reparieren. 22. Seitenbalken-Symbole für soziale Medien: Wir haben nun den Hauptabschnitt abgeschlossen mit dem Blog-Post an Ort und Stelle. Nun möchten wir zur Seitenleiste wechseln und einige Social-Media-Buttons hinzufügen. Social-Media-Buttons sind nicht allzu schwer anzuwenden. Es sind bestimmte Websites, die es uns ermöglichen, Social Media Symbole auf unserer Website kostenlos zu verwenden , wie Font Awesome, die ich auf dieser Website verwenden werde. Beginnen wir mit dem Erstellen eines neuen Abschnitts für die Seitenleiste. Lassen Sie uns zur blog.html gehen. Wir schließen diese Seitenleiste, um uns etwas mehr Platz zu geben. Denken Sie daran, dass wir bereits den Seitenbereich für die Seitenleiste erstellt haben. Alles, was wir tun müssen, ist einen neuen Abschnitt hinzuzufügen. Dann werde ich innerhalb des öffnenden Tags des Abschnitts einige Klassen hinzufügen. Zuallererst werde ich ein sogenanntes Sidebar-Widgets hinzufügen. Dies ermöglicht es uns, es bald mit dem CSS zu stylen, und auch der Hintergrundklasse, um die Hintergrundfarbe auf der gesamten Website konsistent zu halten. Dann werde ich eine Überschrift mit den h2-Tags hinzufügen. Dann ein Text von folgen Sie mir auf. Dann können wir unsere Social-Media-Symbole unten hinzufügen. Ich werde ein neues Element namens hr hinzufügen. Dies ist für eine horizontale Linie, die wir sehen können, wenn wir zum Browser gehen und dann aktualisieren. Gehen wir rauf zur Seitenleiste. In der Tat war es unten unten, weil wir noch kein Layout hinzugefügt haben. Wir werden den Text von folgen mir auf und auch die Linie über den Boden sehen. Dadurch wird der Text von den Symbolen getrennt, sobald Sie sie an Ort und Stelle gesetzt haben. Wie ich bereits erwähnt habe, werde ich eine Website namens Font Awesome verwenden , um die Social-Media-Symbole zur Verfügung zu stellen. Wir können diese finden, indem wir fontawesome.io besuchen , um loszulegen. Wir klicken oben auf das Symbol „Erste Schritte“ und scrollen dann nach unten. Wenn Sie zu Download & Anpassen gehen, klicken Sie auf die Schaltfläche Herunterladen. Es gibt auch eine kostenpflichtige Version, aber alles, was wir tun müssen, ist auf Nein Danke zu klicken. Laden Sie einfach Font Awesome 4 herunter, das sollte nur einen Moment dauern, um herunterzuladen. Sobald dies erledigt ist, können wir zu den Downloads gehen und dann das Font Awesome Paket entpacken. Dieser Ort auf dem Desktop für jetzt dann umbenennen Sie diese einfach Font Awesome. Entfernen Sie die Versionsnummer. Wenn wir dann in unsere Reise-Blog-Projekte gehen, können wir dies einfach so innerhalb des CSS-Ordners platzieren. Dies liegt daran, dass dies nur ein Stylesheet ist wie wir es bereits für unsere eigenen benutzerdefinierten Stile hinzugefügt haben. Lassen Sie uns dies genau wie zuvor innerhalb des Kopfabschnitts hinzufügen. Lassen Sie uns das Projekt wieder öffnen. Gehen Sie zurück zum Kopfbereich und fügen Sie diese direkt über den benutzerdefinierten Stylesheets hinzu. Lassen Sie uns den Link hinzufügen, rel Attribut von Stylesheets. Dann befindet sich die href, die mit der Datei verknüpft wird, innerhalb des CSS-Ordners. Dann innerhalb des CSS-Ordners haben wir den Ordner von Font Awesome so vorwärts Schrägstrich. Dies hat auch einen eigenen CSS-Ordner darin. Wir können das sehen, indem wir das CSS, Font Awesome, und dann als sekundärer CSS-Ordner darin auswählen. Dann ist der Name der Datei, zu der wir verlinken möchten, fontawesome.min.css. Auch die Reihenfolge der Verknüpfung dieser Stylesheets ist wichtig. Wir wollen immer unsere eigenen benutzerdefinierten Stylesheets ganz unten. Dies stellt sicher, dass unsere eigenen Stile, die wir hinzufügen, zuletzt hinzugefügt werden. Daher werden alle anderen Stile aus den obigen Formatvorlagen außer Kraft gesetzt. Jetzt haben wir die Icons zu unserem Projekt hinzugefügt. Gehen wir zurück zu Font Awesome und sehen, wie man sie benutzt. Zurück zu fontawesome.io. sollten wir loswerden. Dann, wenn wir zu den Symbolen gehen, können wir eine Suche nach einem der verfügbaren Symbole machen. Suchen wir zum Beispiel nach Facebook. Wir können sehen, dass die Suchergebnisse am unteren Rand erscheinen. Ich werde den Facebook-Beamten verwenden, klicken Sie darauf. Wenn Sie dann nach unten scrollen, können wir ein HTML-Element sehen, das wir verwenden können. Kopieren Sie dieses i-Element und dann zurück in die blog.html. Wenn wir zum beiseite Abschnitt gehen. Dann direkt unter der horizontalen Regel werde ich dieses Mal ein div mit einer Klasse von Social hinzufügen. Wir können dies im CSS verwenden. Schließen des div. Dann müssen wir nur die neuen Elemente einfügen. Speichern Sie das. Lassen Sie uns überprüfen, dass dies in Ordnung ist, indem Sie aktualisieren. Sie können gerade sehen, das Facebook-Symbol unten unten unten. Ich möchte das in drei weiteren Malen einfügen. Der zweite wird fa-instagram sein. Sie können eine Suche auf der Font Awesome Website für einen dieser Links durchführen. Der nächste werde ich twitter-square verwenden. Dann endlich das Pinterest-Quadrat. Überprüfen Sie, dass wir alle diese richtig geschrieben haben, indem Sie den Browser aktualisieren. Großartig, so dass wir jetzt die vier Symbole unten sehen können. Sie sind in der Minute ziemlich klein, aber wir können diese ein wenig größer mit einer Font Awesome Klasse von fa-2x machen , die ich in alle vier Links einfügen werde. Dadurch werden Symbole doppelt so groß, wie sie normalerweise sein würden. Es sieht jetzt viel besser aus. Ich habe diese Symbole in der Seitenleiste platziert. Ich werde zu keiner meiner Social-Media-Websites verlinken. Sie können dies tun, indem Sie das i-Element mit dem a-Element umgeben und einen Link bereitstellen , genau wie wir es in den Links im obigen Header-Abschnitt tun. Sie können dann ein href-Attribut hinzufügen, wie wir es in der Kopfzeile getan haben. Das href Attribut ist genau das gleiche wie wir in einem der oben genannten nav Links verwendet haben. Es ist jedoch ein Link extern. Wir müssen auf die vollständige URL verlinken. Sobald Sie fertig sind, stellen Sie sicher, dass ein Sparen zu geben. Jetzt kommt unsere Blog-Seite gut. Als nächstes werden wir den HTML beenden, indem wir die letzten Sidebar Widgets hinzufügen. 23. Einführung in Tabellen und HTML-Entity: Werfen Sie einen Blick auf diese fertige Version meiner Website, Ich werde jetzt die Sidebar-Widgets mit den Ländern hinzufügen, die zu besuchen. Dies ist ein Widget würde meinem Blog passen. Sie können natürlich bald finanzieren, wenn Sie es vorziehen. Die Techniken, die wir in diesem Video behandeln werden, sind jedoch nützliche Grundlagen, um zu wissen. Das Layout des Widgets wird mit einer HTML-Tabelle erstellt. Tabellen wurden vor langer Zeit für die Verlegung unserer Websites verwendet. Dies war, bevor CSS für die Layout-Positionierung übernahm. Auch lange vor der Flexbox, die wir jetzt verwenden. Die Verwendung von Tabellen für das Layout wird jetzt als schlechte Praxis betrachtet. Es ist jedoch immer noch nützlich, um Daten wie unsere Länderliste oder sogar etwas wie eine Tabelle mit Ergebnissen oder Ergebnissen zu erstellen. Um zu beginnen, lassen Sie uns unsere Sidebar Abschnitt direkt unter dem Abschnitt Social Media hinzufügen . Fügen Sie hier einen neuen Abschnitt hinzu und dann innerhalb des öffnenden Tags können wir einige Klassen hinzufügen. Genau wie vorher werde ich verwenden, sind konsistente Sidebar-Widgets im Hintergrund. Wir werden später im Kurs die Knie benutzen. Innerhalb des Abschnitts können wir dann eine Tabelle mit den Tabellenelementen hinzufügen. Dies hat auch ein öffnendes und schließendes Tag. Hier können wir anfangen, unsere Tabelle zu erstellen. Im Inneren könnten wir einige Tabellenüberschriften hinzufügen. In einer Tabelle mit Benutzern ist dies beispielsweise die oberste Zeile in Fettdruck, h. der Vorname, ein Nachname und eine E-Mail, z. B. oben in jeder Spalte. Lassen Sie uns diesen Header mit dem thead erstellen. Hier verwenden wir die tr-Elemente. Tr wird verwendet, um eine neue Zeile zu erstellen, können wir mehr als eine Zeile verwenden, indem Sie nur den Titel der Länder benötigen, um zu besuchen. Ich werde das nur als eine Reihe behalten. Dann nebenan sehen Sie hier die Elemente. Dies wird für die Header-Daten verwendet. Öffnen und Schließen Tag und das innerhalb hier können wir den Text fragen, den wir als Überschrift hinzufügen möchten. Ich gehe auch zu Orten innerhalb einer h2-Psych im Inneren, nur um den Namen konsistent mit dem über Social Media-Widget zu halten. Fügen wir die h2 hier mit dem Text der Länder hinzu, die zu besuchen sind. Dann direkt nach diesem Tabellenkopf Abschnitt unten können wir auch den Tabellenkörper mit tbody hinzufügen. Wenn Sie Schwierigkeiten haben, sich an all diese Tags zu erinnern, machen Sie sich keine Sorgen. Es gibt einen Kopfteil und auch einen Körperteil, genau wie wir es bereits auf seiner Website verwendet haben, wo wir den Kopfteil oben und dann den Körperteil direkt darunter haben. Scrollen Sie sie zurück zum Tisch. Wir können dann beginnen, einige Daten zu diesem Tabellenkörper hinzuzufügen, wie die Länder, die besuchen möchten. Genau wie dieser Tabellenkopf die Textdaten in Zeilen zwei platziert. Wir verwenden das gleiche Stb für jede Reihe. Jede Zelle innerhalb der Zeile verwendet td für die Tabellendaten. Hier können wir bei unseren Ländern beginnen oder welche Daten Sie in Ihre Tabelle einfügen möchten. Ich fange mit dem Land Mexiko an. Dann werde ich innerhalb derselben Zeile eine neue td für einige weitere Tabellendaten hinzufügen. Dann hier drinnen, bekam das kaufmännische Und-Zeichen, das harte dann eins, Null, Null, Null , drei, gefolgt von dem Semikolon am Ende. Die erste Zelle ist für den Ländernamen. Die zweite sieht vielleicht etwas seltsam aus. Dies ist, was wir eine HTML-Entität nennen. HTML-Entitäten werden verwendet, um Zeichen oder Symbole anzuzeigen, genau wie das Häkchen, das wir auf den fertigen Seiten sehen, genau hier auf der rechten Seite. Außerdem werden Entitäten verwendet, um bestimmte Symbole zu ersetzen, z. B. das Kleiner-als-oder Größer-als-Symbol. Genau so. Wenn wir nur weniger als oder größer als Symbol verwenden, könnte der Browser denken, dass dies der Anfang eines HTML-Tags ist. Dies könnte zu Problemen führen. Als Beispiel wird weniger als durch kaufmännisches Und-Zeichen ersetzt, gefolgt von einem Semikolon. Lassen Sie uns das ein Speichern geben und dann sehen Sie dies im Browser. Wenn wir aktualisieren, gehen Sie zurück zum Tisch, wir können sehen, dass es unser Häkchen gibt, das ist dieser Code hier. Dann unser weniger als-Symbol, können wir oben nur hier sehen. Wir können ein größeres als-Symbol verwenden, indem Sie lt würde gt dann aktualisieren. Jetzt können Sie sehen, dass das Symbol jetzt größer als ist. Lassen Sie uns das entfernen. Haben Sie auch Zugriff auf viele weitere Unicode-Symbole, indem Sie eine Website namens unicode-table.com besuchen. Hier sehen wir eine Liste einiger der beliebten Charaktere, die wir verwenden können. Oder wir können eine Suche zu tun, und wir müssen tun, um diese hinzuzufügen, ist es, es auszuwählen und dann den HTML-Code zu kopieren und fügen Sie dies zu unserem Projekt. Jetzt können wir die Informationen zu dieser ersten Zeile sehen. Alles, was ich jetzt tun werde, ist Kopieren und Einfügen in einige weitere Zeilen. Kopieren Sie den Abschnitt tr. Wie oft Sie dies einfügen, hängt von den Informationen ab, die Sie für Ihr Design benötigen, fügen Sie es unten ein und ändern Sie dann das Land. Der nächste, den wir hinzufügen werden, ist Ägypten. Dann gehen wir weiter mit dem Land, als nächstes werde ich Spanien hinzufügen, dann China. Ich werde auch das Häkchen entfernen, weil ich nicht in China gewesen bin, fügen Sie es mehr, Änderungen in Portugal, Dominische Republik, und dann Thailand. Fügen Sie natürlich so viele Zeilen hinzu, wie Sie für Ihren Blog möchten. Ich sollte noch ein oder zwei weitere hinzufügen, nach Thailand gehe ich nach Frankreich, und nur noch ein paar weitere, wir fügen Kanada hinzu. Ich möchte das Häkchen aus Kanada entfernen. Dann endlich die letzte Zeile werde ich Australien hinzufügen. Geben Sie das ein Speichern, und dann schauen wir uns das in einem Browser an. Das sieht gut aus. Jetzt können wir unsere Liste der Länder alle in ihren eigenen separaten Zeilen sehen. Wir haben auch die HTML-Entität als Häkchen. Mit dieser Tabelle nun fertig ist nun der A-Seiten-Abschnitt für meinen Blog abgeschlossen. Außerdem ist dies der endgültige HTML-Inhalt jetzt hinzugefügt. Wir können jetzt zum nächsten Video übergehen. Wir werden einige CSS Styling entlang hinzufügen wir in Pseudo-Klassen schauen. 24. Blogdesign und Pseudo-Kurse: In der fertigen Version für kleinere Geräte können Sie einige Unterschiede zu dem sehen, was ich bisher ohne CSS habe. Die endgültige Version, wie Sie hier sehen können, hat den zentrierten Text, es hat ein Bild in voller Breite und generell einen besseren Abstand. Strecken Sie den Browser breiter, können wir auch sehen, dass die sofortige Abfrage verwendet wird , um die Ansicht von dem Beitrag zu wechseln, der übereinander gestapelt wird, um die Blog-Posts und Seitenleiste nebeneinander zu haben. Um diese Layoutänderung in einer blog.html Seite zu tun, haben wir bereits ein umgebendes div mit der Klasse von Wrapper, die sich direkt über dem Hauptabschnitt befindet. Dies wird unser Flex-Container sein. Dann müssen wir nur die Flexrichtung von Spalte zu Zeile für größere Bildschirme ändern . Das ist nichts Neues, wir haben dies bereits für den Header gesehen. Lassen Sie uns im Stil Punkt CSS beginnen, um diese Arbeit zu machen. Außerhalb der Medienabfrage können wir die Klasse des Wrappers anvisieren. Fügen Sie diese direkt über der Medienabfrage hinzu, also Dot Wrapper, weil es eine Klasse ist. Dann, wie wir gerade erwähnt haben, wenn der Anzeigetyp auf Flex gesetzt ist, mit einer Flex-Richtung der Spalte. Da dies außerhalb der Medienabfrage liegt, bedeutet dies, dass die Flexrichtung der Spalte auf den kleineren Bildschirmen angewendet wird. In nur ein bisschen können wir diese Flex-Richtung zurück in Zeile innerhalb der Medienabfrage ändern. Lassen Sie uns sparen und sehen, wie das aussieht. Skalieren Sie den Browser nach unten, damit Sie eine bessere Idee bekommen können. Jetzt werde ich etwas Polsterung und Rand hinzufügen, nur um dem Artikel ein wenig Abstand zu geben. Lassen Sie uns den Artikel und auch die Sidebar-Widget-Klasse auswählen. Dies ist die Klasse, die Sie allen Sidebar-Komponenten geben. Ich werde einige Polsterung innerhalb von 15 Pixeln und dann auch etwas Rand, von 15 Pixeln oben und unten und dann Null auf der linken und rechten. Dies wird etwas Padding innerhalb des div und dann etwas Rand oben und unten hinzufügen , um die Blogposts und auch die Widgets zu trennen. Lassen Sie uns diese Auffrischung geben. Jetzt können Sie sehen, dass diese Marge zwischen jedem der Beiträge angewendet wurde. Denken Sie daran, dass jeder dieser Blogbeiträge auch einen eigenen Header-Abschnitt hat. Wir werden eine Hintergrundfarbe für diesen Blog-Header hinzufügen, aber wir möchten den Header-Selektor nicht verwenden, da dies auch die Kopfzeile am oberen Rand der Seite ausrichten würde. Um dies zu tun, direkt unter diesem Artikelabschnitt, werden wir den Artikel-Header, genau so ansprechen. Sie mit diesem Größer-als-Symbol WählenSie mit diesem Größer-als-Symbolnur direkte untergeordnete Elemente aus. In diesem Fall zielt dies nur auf die Header-Elemente ab, die ein direktes Kind eines Artikels sind. Dann werden wir die Hintergrundfarbe auf den Hex-Wert von d8d8d8 einstellen, speichern und aktualisieren. Jetzt können Sie sehen, dass dieser Kopfzeilenabschnitt einen etwas dunkleren Hintergrund hat. Dann das Bild, wenn wir den Browser etwas breiter dehnen, können wir sehen, dass das Bild nicht ganz auf die volle Breite der Seite passt. Um dies zu beheben, können wir alle Bilder auswählen und die Breite auf 100 Prozent einstellen. Dann aktualisieren und werfen Sie einen Blick auf diese, und jetzt können wir sehen, dass das Bild fließt zu 100 Prozent des Containers. Ich werde auch ein wenig Marge zu den Font Awesome Icons hinzufügen. Wenn wir den Browser nur ein wenig kleiner machen und nach unten scrollen, werde ich nur einen Rand nach links und rechts hinzufügen, um diese Symbole ein wenig mehr auszuräumen. Denken Sie daran, Font Awesome hatte die i-Elemente, so können wir es mit i auswählen, so Rand Null oben und unten, und fünf Pixel auf der linken und rechten, und dann aktualisieren. Jetzt können wir sehen, dass wir einen besseren Abstand zwischen den Symbolen haben. Unser mobile-first Styling ist fast vollständig, aber bevor wir weitermachen, möchte ich Ihnen CSS-Pseudo-Klassen vorstellen. Pseudo-Klassen werden verwendet, um Styling auf einen bestimmten Zustand anzuwenden. Ein gängiges Beispiel ist das Ändern der Farbe eines Links, wenn ein Benutzer den Mauszeiger darüber bewegt. Wir können die Links mit den a-Elementen auswählen, und dann verwenden wir einen Doppelpunkt und fügen Sie dann dem Namen des Pseudoselektors hinzu , der in diesem Fall Hover ist. Jedes Mal, wenn der Benutzer den Mauszeiger über einen Link bewegt, werden wir die Farbe des Links ändern. Dann lasst uns das auf eine blaue Farbe setzen und uns aussuchen. Gehen wir zurück zum oberen Abschnitt, und jetzt können wir sehen, wenn Sie den Mauszeiger über einen dieser Links bewegen, wird es nun blau. Dann werde ich mich endlich den n-ten Kind-Pseudo-Selektor ansehen. Wenn wir zur Tabelle der Besuchsländer scrollen, möchte ich links von diesen Ticks ein wenig mehr Polsterung hinzufügen. Wenn wir nur die td-Elemente im CSS anvisieren, gilt dies auch für das td-Element für das Land. Um diese Polsterung nur dem zweiten in jeder Zeile hinzuzufügen, verwenden wir die n-te untergeordnete Pseudo-Klasse. Dies nimmt eine Zahl als Parameter in den Klammern ein. Diese Zahl wird in unserem Fall Nummer 2 sein, um die zweiten td Elemente auszuwählen. Werfen wir einen Blick darauf, wie wir das tun können. Lassen Sie uns das td Ziel, und wieder durch einen Doppelpunkt getrennt, können wir n-ten Kind hinzufügen. Wie ich bereits erwähnt habe, möchten wir das zweite Kind auswählen und dann möchten wir nur links von 30 Pixeln etwas auffüllen. Lassen Sie uns sparen und sehen, wie das aussieht. Jetzt können wir sehen, dass die Zecken leicht nach rechts verschoben werden. Dies gilt nur für die zweite td, wir haben keine zusätzliche Polsterung auf der ersten; die Länder, die auch Hover sind, die das erste Kind und das letzte Kind haben. Weitere Informationen dazu finden Sie im Resource-Download. Damit werden nun die Stile beendet, die ich der Mobile-First-Ansicht für meinen Blog hinzufügen möchte. Hoffentlich habe ich jetzt einen super aussehenden Blog auch für kleine Bildschirme. Jetzt ist es an der Zeit, weiterzumachen und die endgültigen Stile für größere Geräte hinzuzufügen. 25. Blogdesign für größere Geräte: Dein Blog sollte sich nun richtig gut gestalten. Wir haben CSS-Styling jetzt für mobile Geräte abgeschlossen, und es ist jetzt an der Zeit, das CSS für größere Bildschirme einschließlich einer Layoutänderung innerhalb der Medienabfrage abzuschließen . Wenn Sie sich an das letzte Video erinnern, stellen wir den Container oder den Wrapper so ein, dass den Anzeigetyp von Flex und die Flexrichtung der Spalte hat, die alle Elemente übereinander stapelt. Für größere Bildschirme möchten Sie, dass die Blog-Beiträge und auch die Seitenleiste eine Flexrichtung der Zeile haben. Lassen Sie uns dies innerhalb der Medienabfrage tun. Direkt unter dem Header nav werde ich einen Kommentar hinzufügen. Denken Sie daran, dass wir erwähnt haben, dass Kommentare hinzugefügt werden können, um uns Notizen hinzuzufügen. Dies wird vom Webbrowser ignoriert. Also das ist jetzt der Blog-Bereich. Wir werden den Wrapper auswählen und die Flex-Richtung ändern Zeile zu sein und dann zu aktualisieren. Jetzt können wir sofort sehen, dass die Blog-Beiträge und die Sidebar jetzt in einer Reihe sind. Jetzt werden wir die Flex-Eigenschaft setzen. Wir werden den Hauptabschnitt, das ist dieser Blog-Teil, um einen Flex-Wert von drei zu haben, und dann die Seitenleiste auf einen Flex-Wert von eins. Dies bedeutet, dass der Blog-Bereich dreimal so viel Platz in der Sidebar einnimmt. Lassen Sie uns das jetzt mit dem Hauptwähler tun. Denken Sie daran, dies sind die Blogbeiträge, der Flex-Wert von drei, und dann kann der Seitenabschnitt den Flex-Wert von eins haben. Wir speichern das, geben ihm eine Aktualisierung, und jetzt können Sie sehen, dass sich die Größe geändert hat. Ich werde auch etwas Rand links von der Seitenleiste hinzufügen nur um ein wenig Abstand zwischen einer Seitenleiste und den Blogbeiträgen zu schaffen, also margin-links von 15 Pixeln. Ok. Gut. Das sieht jetzt viel besser aus. Jetzt werde ich einige CSS für den Blog-Post-Header hinzufügen. Wir können dies mit Artikel-Header ansprechen. Daher gilt dies nur für den Header innerhalb des Artikels. Ich werde die Flex-Box-Eigenschaft verwenden, um Inhalte zu rechtfertigen. Dies definiert, wie wir wollen, dass die Elemente verteilt werden. Eines der Beispiele ist der Abstand zwischen. Speichern Sie das und geben Sie ihm eine Aktualisierung. Jetzt können wir sehen, dies fügt Leerzeichen zwischen dem Titel und auch die ungeordnete Liste. Wir können dies auch in Raum umwandeln. Werfen wir einen Blick auf das. Jetzt erhalten wir den gleichen Raum um die Elemente herum. Wenn es mehr Elemente in diesem Header gäbe, wären sie auch gleich verteilt. Rechtliche Inhalte haben auch einige weitere Optionen und es gibt einige Links innerhalb der Ressourcen. Nun, das ist mein Blog jetzt fertig, und ich bin glücklich, wie die Dinge beginnen, für kleinere Bildschirme und auch größere Bildschirme zu suchen . Lassen Sie uns einfach den Browser verkleinern und sehen Sie die Medienabfrage in Aktion. Sobald wir 1000 Pixel erreicht haben, erhalten wir eine Layoutänderung, also das ist großartig. Ich ermutige Sie, auch weiterhin an Ihrem eigenen CSS zu arbeiten und die Dinge zu ändern, die Ihnen passen. Spielen Sie sogar mit der Größe der Medienabfragen und der Layouts herum , wenn es für Ihre Inhalte besser funktioniert. Selbst mit diesem Blog jetzt abgeschlossen, Ich möchte immer noch ein paar Dinge, die nützlich für Sie zu wissen sind zu decken. Ich werde diese in den kommenden Videos abdecken. 26. Browserunterstützung: Wir haben alle gebloggt jetzt fertig. Ich werde jetzt einen kleinen Schritt zurück und Codierung machen und einige Dinge abdecken, die Sie beim Erstellen des Blogs nützlich finden können, haben wir viel HTML und CSS verwendet. Eine der Herausforderungen bei der Entwicklung von Websites ist die Tatsache, dass verschiedene Browser unsere Websites ein wenig anders darstellen können. Es ist immer am besten, Ihre Website auf verschiedenen Browsern zu testen, wie Chrome, Safari, Firefox und Internet Explorer, zusammen mit kleineren Geräten Browser, um zu überprüfen, dass es gut aussieht auf der Mall. Eine weitere Überlegung ist auch, dass einige Benutzer verschiedene Versionen desselben Browsers verwenden. Möglicherweise haben die neueste Version, während einige eine ältere Version haben werden. Es gibt eine nützliche Website namens caniuse.com. Lasst uns dazu gehen. Diese Website gibt uns Informationen über Browser Pause für verschiedene Versionen. Wenn wir zum Beispiel mit der Suche nach Flexbox beginnen und nach unten scrollen, können wir unter dem Browsersport sehen, dass es meist grün ist. Zum Beispiel ist es in allen Versionen von Chrome verfügbar und wird vollständig unterstützt. Das Gleiche gilt für Firefox und die meisten Browser. Lassen Sie uns nun einen Blick auf das Gitter werfen. Suchen Sie nach Rastern. Wenn wir zur Browserunterstützung scrollen, ist diese CSS-Rastereigenschaft neu innerhalb von flexbox. Kann einige rote sehen, was bedeutet, dass auf unterstützte und einige partielle Flecken in verschiedenen Browsern. Dies bedeutet, dass wir ein wenig mehr Vorsicht nehmen sollten, wenn es verwendet wird, da jemand dafür möglicherweise nicht die volle Unterstützung hat. Innerhalb des Browsers. Es stehen einige Tools und Problemumgehungen zur Verfügung, die Ihnen bei der Browser-Spot helfen können. Wenn dies etwas ist, das interessiert ist, gibt es einige nützliche Links in den Ressourcen, die Sie auschecken können. Es lohnt sich, Websites wie diese zusammen mit Tests in verschiedenen Browsern zu überprüfen, um die Benutzererfahrung zu verbessern. 27. Browser-Entwickler-Tools: Einführung: Zusammen mit den Tests auf verschiedenen Browsern, die wir im letzten Video erwähnt haben, ist es auch nützlich zu testen, wie eine Website auf verschiedenen Geräten aussieht. Die meisten von uns haben nicht viele Arten von Tablets und Telefonen rund um zu testen, so Google Chrome hilft uns dabei. Wenn wir gehen über zu einer Website, jedermanns Telefon, und dann, wenn wir auf „Inspect“ Option klicken, um die Entwickler-Tools zu öffnen. Bedenken Sie, dass andere Browser auch ihre eigene Version der Entwicklertools haben, aber sie können etwas anders funktionieren. Wenn wir auf das Symbol mit dem Handy und Tablet klicken, das hier oben ist, können wir simulieren, wie eine Website auf verschiedenen Geräten aussieht. Anstatt es Responsive oder verschiedene Geräte zu wählen. Zum Beispiel, wenn Sie auf das iPhone 6 klicken, können wir genau sehen, wie dies in einem iPhone 6 gerendert wird. Sie können mit den Medienabfragen sehen, das bedeutet, dass alles noch gut aussieht. Dies liegt vor allem daran, dass wir diese Website als erstes mobil konzipiert haben und darauf für größere Geräte aufgebaut haben. Wir können auch ein großes iPad auswählen und sehen, wie das aussieht. Da sieht das alles gut aus. Wenn Sie nicht viele Geräte zum Testen haben, ist dies ein gutes Tool, um zu sehen, wie Websites auf Geräten unterschiedlicher Größe aussehen. Ich werde nur noch einmal auf dieses Symbol klicken, um zur Desktop-Ansicht zurückzukehren. Ein weiteres nützliches Werkzeug, das wir bereits in diesem Kurs betrachtet haben, ist die Möglichkeit, ein Element auszuwählen, indem Sie auf diesen Pfeil klicken. Dies ist nützlich, um Probleme zu finden und Debugging. Zum Beispiel, wenn Sie sich fragen, warum einige CSS nicht wirksam wird, können wir dann mit der Maus über alle Elemente auf der Website bewegen und einen Blick auf alle CSS-Eigenschaften werfen, die wirksam wurden. Zum Beispiel, wenn wir auf die Überschrift der Ebene 1 klicken, auf der rechten Seite, können wir die Kopfzeile h1 sehen. Wir können auch den Rand, die Polsterung sehen und auch sehen, von welchen Stylesheets diese stammen. Dies ist nützlich für größere Websites, die mehr als ein Stylesheets haben können. Wir können diese auch vorübergehend entfernen und sehen, wie die Website mit oder ohne sie aussieht. Wir können auch verschiedene Stile in hinzufügen. Lassen Sie uns die Farbe ändern, um rot zu sein, und Sie können sehen, dass die Änderungen sofort in den Websites reflektiert werden. jedoch keine Sorgen, um die Website zu brechen. Eine einfache Aktualisierung bringt alles wieder zum Normalzustand zurück. Die Entwickler-Tools sind wirklich nützlich und sie können viel mehr tun. Aber vieles davon ist für fortgeschrittenere Fälle. Wir werden es hier nicht abdecken, aber ich bin sicher wenn Sie sich durch Ihr Webdesign oder Ihre Entwicklungsreise fortschreiten, werden Sie viel mehr Zeit hier drin verbringen. Als nächstes möchte ich Ihnen ein großartiges Texteditor-Plugin namens Emmet zeigen, das Ihre Codierung wirklich beschleunigt und die Dinge viel einfacher macht. 28. Schneller programmieren mit Emmet: Während der Großheitskurs-Projekte haben wir alle Elemente in HTML handcodiert. Dies ist ein perfekter Weg, um Übung zu gewinnen und sich auswendig zu lernen, wie die Dinge funktionieren. Wenn Sie jedoch mehr Übung gehabt haben und wissen, wie die Dinge funktionieren, können Sie manchmal das Gefühl haben, dass wir unsere Codierung beschleunigen müssen und desto produktiver sind. Hier kommt Emmet ins Spiel. Emmet ist ein Plug-in für die gängigsten Texteditoren, das wirklich dazu beigetragen hat, unsere Codierung zu beschleunigen und die Arbeit effizienter zu gestalten. Wenn wir zum Download-Bereich gehen, können wir sehen, dass Emmet für die meisten der beliebten Texteditoren zur Verfügung steht. Ich möchte Sie ermutigen, fortzufahren und für Ihren speziellen Texteditor herunterzuladen. Auch oft haben die meisten Texteditoren einen Plugin-Abschnitt in den Einstellungen, dem Sie Plugins einfacher installieren können. Wenn Sie jedoch Visual Studio-Code wie ich verwenden, ist er standardmäßig bereits enthalten. Ich gehe zu einer der HTML-Seiten. Ich werde zur Leiche scrollen. Emmet stellt uns einige Tastenkombinationen zur Verfügung, die es uns wirklich ermöglichen, unsere Codierung zu beschleunigen. Zum Beispiel, als wir dieses Projekt zum ersten Mal gestartet haben, haben wir alle HTML-Abschnitt eingegeben, einschließlich der Kopfabschnitt, die Metadaten, den Körper und auch die umgebenden HTML-Tags. Emmet bietet uns eine einfache Möglichkeit, dies zu tun. Alles, was wir tun müssen, ist html:5 einzugeben. Dann können wir sehen, wir bekommen die automatische Vervollständigung, sagen, dies ist eine Emmet Abkürzung. Alles, was wir jetzt tun müssen, ist drücken Sie Enter oder Tab, und dann haben wir eine grundlegende HTML-Struktur an Ort und Stelle. Ich werde das nur entfernen und versuchen, ein paar weitere Beispiele zu betrachten. Der, der uns viel Zeit erspart. Anstelle des Typs keine Elemente. Genau wie wir es in diesem Kurs mit dem öffnenden und schließenden Tag tun. Alles, was wir tun müssen, ist den Namen der Elemente eingeben und erneut die Eingabetaste oder Tab drücken und dies füllt das öffnende und schließende Tag für uns aus und erspart uns eine Menge Arbeit. Wir können noch weiter gehen. Wenn wir beispielsweise eine ungeordnete Liste mit einem Listenelement erstellen möchten, das bereits darin liegt, könnten Sie ul, das Größer-als-Symbol und dann li tun . Drücken Sie die Eingabetaste, und wir können sehen, dies fügt automatisch die li innerhalb der Liste. Wenn Sie mehr als ein Listenelement wollten, könnten wir ul, das Größer-als-Symbol und ein li tun , genau wie wir es vorher getan haben. Dann nach dem Sternsymbol können wir beliebig viele Listenelemente hinzufügen. Wenn wir zum Beispiel fünf wollen, könnten wir das tun. Natürlich ist so viel mehr, was Sie tun können. Ich ermutige Sie wirklich, ein Spiel um dies zu haben und zu verwenden, sobald Sie sich mit HTML komfortabler machen. Also werde ich das entfernen. Wenn Sie sich das noch weiter ansehen und mehr von den Verknüpfungen erfahren möchten. Es gibt eine gute Dokumentation auf Websites, die Sie durchschauen und mehr über die Abkürzungen erfahren können. So können wir Emmet verwenden, um die Codierung zu beschleunigen. Als Nächstes werden wir einen Blick auf Block im Vergleich zu Inline-Elementen werfen. 29. Blockelemente vs. Inline-Elemente: Wir haben viele Elemente in diesem Kurs verwendet, ohne zu viel darüber nachzudenken, wie sie auf dem Bildschirm angezeigt werden. Normalerweise gehören HTML-Elemente zu zwei Gruppen, entweder Block oder Inline. Ein Element auf Blockebene beginnt in einer neuen Zeile auf der Webseite und nimmt die volle verfügbare Breite ein. Ein Beispiel dafür ist das P-Element, um Text anzuzeigen. Wie Sie hier sehen können, dehnt es sich auf die volle Breite des verfügbaren Platzes aus. Ein div-Element ist auch ein Block-Level-Element, zusammen mit vielen mehr, die wir bald einen Blick auf. Als Nächstes ist inline. Ein Beispiel für ein Inline-Element ist das Bildelement. Inline-Elemente beginnen also nicht auf einer neuen Zeile, können nebeneinander platziert werden, wie Sie hier sehen können. Sie können auch innerhalb eines Block-Level-Elements platziert werden. So machen wir oft Dinge, wenn wir ein umgebendes div verwenden. Das div-Element ist Blockebene, und dies kann sowohl Block- als auch Inline-Elemente darin enthalten. Wenn wir auf die Mozilla-Website gehen, können wir eine Liste von Block- und Inline-Elementen unten sehen. Scrollen Sie nach unten in die Liste der Block-Level-Elemente können wir die Fußzeile sehen, die Form, beiseite, Artikel, Absatz Tags und Tabellen, um ein paar zu nennen, sind alle Elemente auf Blockebene. Daher beginnend mit einer neuen Zeile durch Standardwerte. Dann haben wir die Inline-Elemente. Auch hier können wir nach unten scrollen und die Inline-Elemente als Liste sehen. Dies sind Dinge wie Schaltflächen, Eingaben, em und auch Bild, wie wir uns gerade vorher angesehen haben. Diese Links sind in den Ressourcen verfügbar, wenn Sie einen genaueren Blick darauf werfen möchten. Block und Inline ist eine traditionelle Art, ein Element zu kategorisieren. In HTML5 gibt es noch ein paar weitere Kategorien wie Flow und Phrasierung. Diese haben jedoch viel komplexere Regeln und Definitionen, also vielleicht nur eine Möglichkeit zu tauchen, wenn Sie sich wirklich mit HTML vertraut machen. Natürlich gibt es auch Links dazu in den Ressourcen, wenn Sie dies überprüfen möchten. Aber den Unterschied zwischen Block und Inline zu verstehen , ist wirklich wichtig, wenn Sie mit HTML arbeiten. Es wird Ihnen helfen, Ihre Inhalte besser zu gestalten und auch zu verstehen, warum Dinge auf einer Seite in einer bestimmten Weise platziert werden. 30. Abschließende Herausforderung: Herzlichen Glückwunsch zum Ende dieses Kurses. Bevor wir gehen, möchte ich Ihnen eine letzte Herausforderung überlassen. Ich möchte, dass Sie zu Ihrem Projekt zurückkehren und es hinzufügen. Denken Sie daran, dass wir „über mich“ Link am oberen Rand der Seite erstellt haben. Nun, ich möchte, dass Sie zurückgehen und Ihre ganz eigene „Über mich“ -Seite erstellen und dann über das Hauptnavigationsmenü darauf verlinken. Das sind alles, was wir bereits abgedeckt haben. Wenn Sie stecken bleiben, schauen Sie sich einfach den Rest des Projekts an und ich bin sicher, Sie werden die Antworten finden. Diese Herausforderung allein zu tun, ohne meine Hilfe wird Sie wirklich dazu bringen, über Dinge nachzudenken und auch zu verstärken, was Sie bisher gelernt haben. Wenn Sie sich besonders kreativ fühlen, fügen Sie auch auf jeder Seite einen Fußzeilenabschnitt hinzu. Viel Glück und ich kann es kaum erwarten zu sehen, was ihr erschafft. 31. Abschließender Schritt: Herzlichen Glückwunsch, Sie haben das Ende dieses Kurses erreicht. Hoffentlich sollten Sie jetzt komfortabler sein, großartig aussehende Websites mit HTML und CSS zu erstellen. Sie sollten jetzt genug wissen, um auch anspruchsvollere Projekte abzuschließen, um auf dem aufzubauen, was Sie bisher in diesem Kurs bereits gelernt haben. Gemeinsam haben wir eine Blog-Website mit Ihrem Thema Ihrer Wahl erstellt. Hoffe, du hast es auch geschafft, die Herausforderung abzuschließen, die Seite „Über mich“ hinzuzufügen oder vielleicht sogar den Fotobereich hinzuzufügen. Ich würde es lieben, wenn Sie auch Ihr Projekt teilen würden, für mich und Kommilitonen zu sehen. Dies ist eine großartige Möglichkeit, sowohl Ihre Fähigkeiten als auch inspirierende andere Schüler zu präsentieren. Dies ist aber nicht das Ende Ihrer Reise. Das Erstellen von Websites ist ein kontinuierlicher Lernprozess, aber es kann auch sehr lohnend sein. Der beste Weg, um weiter zu lernen, ist, mehr Websites zu erstellen und sich selbst auf dem Weg herausfordern. Wenn Sie keine Projekte zum Üben haben, versuchen Sie, eines zu erfinden oder sogar eine Ihrer Lieblings-Websites zu kopieren. Sobald Sie sich mit HTML und CSS vertraut gemacht haben, würde ich Sie ermutigen, eine neue Sprache zu lernen, wie JavaScript, um Ihre Websites wirklich zum Leben zu erwecken. Ein großes Dankeschön von mir für die Teilnahme an diesem Kurs, und ich hoffe, Sie haben es genossen, zusammen mit dem Lernen einige neue Fähigkeiten auf dem Weg. 32. Folge mir auf Skillshare: Video: Ein herzlicher Glückwunsch von mir, dass ich das Ende dieser Klasse erreicht habe. Ich hoffe, Sie haben es wirklich genossen und haben etwas Wissen daraus gewonnen. Wenn Sie diese Klasse genossen haben, stellen Sie sicher, dass Sie den Rest meiner Kurse hier auf Skillshare überprüfen. Folgen Sie mir auch für alle Updates und auch um neue Klassen informiert zu werden, sobald sie verfügbar werden. Nochmals vielen Dank. Viel Glück. Hoffentlich sehe ich dich wieder in einer zukünftigen Klasse.