Codiere deine erste Website mit HTML 5 und CSS 3 für Kinder und Anfänger:innen

1. Die wichtigsten Websites im Überblick zu programmieren: Willkommen bei der Programmierung grundlegender Websites mit HTML und CSS für Kinder und Anfänger. Dieser Kurs ist für jedes Kind oder Anfänger ohne vorherige Programmiererfahrung gedacht. Wenn Sie einen vollständigen Satz schreiben können, dann können Sie das lernen. HTML und CSS werden von jeder Website verwendet. In jedem Video werde ich ein anderes Thema zu behandeln, und auf dem Weg wird ein paar Quiz und Codierung Herausforderungen zu üben, was Sie am Ende dieses Kurses lernen wird dieses Beispiel gebaut haben. Webseite. Mein Name ist Kevin Kennedy, und ich bin der Schöpfer von Produktdesign online dot com. Ich lade Sie ein, den Tag für den lebenslangen Zugriff auf diese Videos einschreiben und ich werde Sie und die erste Lektion sehen . 2. Kursanforderungen: Ich alle und willkommen zu den Kursvoraussetzungen. Es gibt nur ein paar schnelle Dinge, die wir übergehen müssen, bevor wir anfangen. Das erste, was ist, müssen Sie sicherstellen, dass Sie auf dem neuesten Web-Browser haben. Ich würde empfehlen, Google Chrome zu erhalten, das Sie kostenlos über den Link auf Ihrem Bildschirm herunterladen können. Sobald Sie Chrome oder Ihren gewünschten Web-Browser hochgezogen haben, wir gehen voran und geben Sie J s gewesen dot com jetzt, Nachdem es geladen, Sie werden sehen, dass wir tatsächlich bereits einige HTML-Code auf der linken Seite hier. Also, was wir tun möchten, ist wählen Sie alles aus und drücken Sie die Löschtaste. Danach werden wir voran gehen und tippen oder Namen auf der linken Seite und stellen sicher, dass es tatsächlich auf der rechten Seite ausgegeben wird. Nun, wenn alles gut zu funktionieren scheint und dein Name auf der rechten Seite auftaucht, dann sind wir alle bereit und bereit zu gehen. Ich werde euch in der nächsten Lektion sehen, oder wir werden direkt in die Geschichte von HTML eintauchen 3. HTML: und herzlich willkommen zur HTML-Übersicht. Computer benutzten Sprachen wie Menschen. In der Tat gibt es mehr als 200 Programmiersprachen da draußen. Also, was ist HTML? Nun, HTML steht für Hypertext-Markup-Sprache. HTML ist die Art und Weise, wie Computer mit dem Internet kommunizieren. Hypertext ist der Prozess, Objekte miteinander zu verknüpfen. Wenn also auf ein Objekt geklickt wird, werden Sie zum nächsten Objekt gebracht. Lassen Sie uns nun einen genaueren Blick darauf werfen, wie hte E-Mail tatsächlich erstellt wird. HTML besteht aus einer Reihe von verschiedenen Tags, die wir in diesem Kurs behandeln werden. Die meisten Tags haben einen Anfang und eine Abschlusssteuer, Also inzwischen können Sie sich fragen, wer tatsächlich kommt mit diesem Zeug. Nun, HTML wird tatsächlich vom W drei C oder einer Gruppe von Menschen erstellt, die zusammenarbeiten, um Standards für das Web zu entwickeln . Nun, da Sie wissen, wofür HTML eigentlich steht, lassen Sie uns ein wirklich kurzes Quiz machen und dann werde ich euch in der nächsten Lektion sehen, wo wir anfangen werden, die grundlegende HTML-Struktur zu schreiben 4. Grundlegende HTML-Struktur: jeder. Und willkommen in diesem Kurs, wir werden die grundlegende HTML-Struktur behandeln, die von jeder Website verwendet wird. Also, bevor wir anfangen, wollen wir sicherstellen, dass wir nur die notwendigen Dinge offen und Jaspin haben. Wenn Sie also hier sehen, wenn Sie eine dieser anderen Registerkarten geöffnet haben, möchten wir sie schließen. Also alles, was wir hätten auswählen sollen, ist der HTML-Button in der Ausgabe-Schaltfläche, und dann werden wir fortfahren und unseren Namen löschen. Also das erste, was wir tun müssen, ist sagen, dass der Computer toe tatsächlich HTML lesen. Also beginnen wir mit der Eingabe des weniger Sand-Symbols gefolgt von einem Ausrufezeichen. Und wir werden das Wort doc-Typ in alle Großbuchstaben eingeben, gefolgt von einem Leerzeichen in HTML und Kleinbuchstaben, gefolgt von den Reiben Dan-Symbol. Dies ist also etwas, das oben in jedem HTML-Dokument benötigt wird. Nun, da wir dem Computer gesagt haben, HTML zu lesen, müssen wir ihm sagen, wo er den HTML-Code lesen wird. Um dies zu tun, werden wir ein Tag erstellen, das nur das Wort HTML enthält. Also werden wir beginnen, indem wir unser öffnendes Tag erstellen und dann mit dem Ford Slash-Symbol . Wir werden ein schließendes Tag erstellen und ich werde es einfach zurückgeben, so dass es in einer separaten Zeile ist , also wird das nächste Tag, das wir schreiben wollen, die Kopftack sein. Jetzt wird das Head-Tag ersetzt werden. Alles, was wir nicht wollen, wird tatsächlich auf unserer Website angezeigt. Aber wir wollen, dass unser Web-Browser darüber Bescheid weiß. Also werden wir weitermachen und das in eine andere Zeile zurückgeben und innerhalb des Head-Tags werden wir das Titel-Tag erstellen. Jetzt. Das Titel-Tag wird ersetzt den Titel unserer Website. Also für dieses Beispiel werden wir eine Website für den klobigen Schokoladen-Chip Cookie Dough Co. Also lasst uns voran gehen und das im Titel-Tag fest. nun Wenn ichnunwieder verkleinere, werden Sie feststellen, dass der Titel unseres Unternehmens nicht wirklich auf der Ausgabeseite angezeigt und das ist eigentlich eine gute Sache. Das ist, was wir wollen, weil das Titel-Tag eigentlich dazu gedacht ist, den Titel Ihrer Website hier oben auf der Registerkarte des Webbrowsers anzuzeigen . Also wollen wir nur hier nach oben schauen und sicherstellen, dass alles korrekt ist. Jetzt werde ich wieder auf unseren HTML-Code hineinzoomen, dass wir eine Rückkehr nach dem Head-Tag setzen werden. Jetzt werden wir das Körper-Tag erstellen. Nun, das body-Tag ist, wo der gesamte HTML-Code platziert wird, den wir tatsächlich auf unserer Website anzeigen möchten , innerhalb des body-Tags. Wir möchten auch das Fußzeilen-Tag erstellen. Nun ist das Fußzeilen-Tag das Tag, das wir verwenden werden, um alle Dinge zu platzieren, die wir auf der Unterseite unserer Website oder der Fußzeile sein wollen . Jetzt haben wir die grundlegende HTML-Struktur, die verwendet werden muss, um jede Website zu erstellen. Aber bevor wir zur nächsten Lektion übergehen, möchte ich Ihnen noch eine schnelle Sache zeigen. Nun, wenn Sie hier bemerken, wenn ich das Körper-Tag lösche, wurde das Problem Mel tatsächlich rot. Jetzt sehen wir das Problem, Mel wird rot. Das bedeutet eigentlich, dass wir nicht irgendwo in unserem HTML-Code ausgestrahlt haben. Dies geschieht normalerweiseaufgrund eines Tippzeichens oder weil wir falsch geschrieben oder vergessen haben, unser End-Tag einzugeben . normalerweise Dies geschieht normalerweiseaufgrund eines Tippzeichens oder weil wir falsch geschrieben oder vergessen haben, unser End-Tag einzugeben Also, wenn Sie hier bemerken, wenn ich Körper zurück in die rote Luft Zeichen tatsächlich verschwindet und alles wieder normal geht, das ist alles für diese Lektion, und ich werde euch im nächsten Video sehen. 5. tags: jeder. Und willkommen zurück. Und diese schnelle Lektion werden wir über knave Tags sprechen. Die knave Tags stellen die Hauptnavigation der Seite dar. , Alles,was wir tun müssen, ist weiter zu gehen und Rückkehr nach Körper zu treffen, und wir gehen weiter und betreten den Knave-Tack. Nun, irgendwann, werden wir tatsächlich Links Insider-Navigations-Tag platzieren. Aber im Moment werden wir es einfach in Ruhe lassen. Wir werden weitermachen und tatsächlich den ersten Text auf ihrer Seite erstellen. Also werde ich euch und unsere nächste Lektion sehen. 6. H1 bis H6 heading: alle und willkommen zurück. Und in dieser Lektion werden wir die Überschriften-Tags behandeln, keine Überschriften-Tags oder wie wir Schlagzeilen erstellen, ähnlich wie Zeitungen oder wahrscheinlich Websites, die Sie im Internet gesehen haben. Das Überschriften-Tag wird also mit dem Buchstaben H und dann mit einer Nummer eins bis sechs definiert. Nun, wenn wir H verwenden, wird man die größte erstellen, die den ganzen Weg zur Nummer sechs übergeht, die die kleinste Überschrift erstellen wird. Also lasst uns das schreiben und einen Blick darauf werfen, was es tut. Wenn wir also nach dem Navigations-Tag zurückkehren, möchten wir jeden Tag eingeben, gefolgt von dem schließenden H ein Tag. Nun gehen wir weiter und schreiben tatsächlich unseren Firmennamen innerhalb der H ein Tag. Also, wenn Sie hier auf der rechten Seite bemerken, sollte es sein, den Namen zu setzen, den wir gerade geschrieben haben. Also lassen Sie uns voran und schreiben Sie ein Beispiel jedes sechs Tag, um den Unterschied in der Größe zu zeigen. Also, wenn Sie hier bemerken, ist H six Tag viel kleiner als H ein Tag, also werden wir ein weiteres Beispiel machen, und lasst uns voran gehen und ein H vier Tag schreiben, um zu sehen, wie groß dieser ist. Also, wenn Sie hier bemerken, liegt das Alter vier Tag zwischen der Größe des H eins und dem Alter von sechs Jahren. Genau das, was wir erwartet haben. Nun, wenn wir unser HTML-Dokument schreiben, können wir die H-Tags verwenden. Wir überschreiben Tags, so viel wir wollen. Aber der Schlüssel zu erinnern ist, dass wir die H one Tags für unsere wichtigsten Elemente und die H sechs Tags für die am wenigsten wichtigen Elemente verwenden wollen . Nun, da wir den Unterschied gesehen haben, den die H-Tags erstellen können, lassen Sie uns voran und löschen Sie diese beiden Beispielbeispiele. Und dann werden wir tatsächlich vier verschiedene Überschriften für unsere Beispiel-Website erstellen. Also lassen Sie uns voran und erstellen Sie das Alter drei Tag, das wir es hervorheben werden. Wir werden es noch drei Mal kopieren und einfügen. Dann gehen wir zurück zum 1. 1 neu erstellt wir werden anfangen, alle natürlichen Zutaten einzugeben, dann eine 2. 1 Wir werden Anweisungen eingeben Zutaten einzugeben, als die 3. 1 Wir werden die Ernährungsinformationen eingeben und dann in der 4. 1 sind wir gehen, wenn frei Cookie-Teig für das Leben zu erstellen. Das war's für diese Lektion. Danke fürs Ansehen, und ich werde euch in der nächsten Lektion sehen. 7. Absatzmarken: jeder. Dann willkommen zurück. In dieser Folge werden wir das Absatz-Tag abdecken, um das Absatz-Tag zu definieren. Alles, was wir verwenden müssen, ist der Buchstabe P. Und wir wollen das Absatz-Tag für jeden einzelnen Absatz oder Körperinhalt verwenden, den wir erstellen. Also werden wir weitermachen und Ah, Slogan auf unserer Website hinzufügen . Also unter dem H ein Tag, werden wir die Rückkehr treffen, und dann werden wir das P-Tag erstellen, gefolgt von dem schließenden Tag dort, und wir werden voran gehen und den Slogan unseres Unternehmens eingeben. Also lasst uns den besten klobigen Schokoladen-Chip Cookie-Teig der Welt eingeben. Und weißt du was? Lass uns voran gehen und das in Anführungszeichen setzen. Da es unser Slogan ist. nun Wenn wirnununseren HTML-Code schreiben, möchten wir uns daran erinnern, das Absatz-Tag jedes Mal zu verwenden, wenn wir verschiedene Abschnitte des Inhalts teilen oder erstellen möchten. Und jedes Mal, wenn wir dies tun, wird der Browser automatisch Werbeflächen zwischen den Absätzen. Also werde ich diese Zeile hier kopieren und ein paar Mal einfügen. Nur ein Schaubeispiel. So können Sie auf der rechten Seite hier sehen, gibt es tatsächlich Platz zwischen den Absätzen. Während, wenn ich den Text innerhalb der Zeile kopieren würde, wird er dem Absatz weiter hinzugefügt. Jetzt werde ich das rückgängig machen. Eigentlich, lassen Sie uns voran und markieren Sie all dies und löschen Sie es, wenn Sie gefolgt sind und gehen Sie zum Fuß oder Tag hier und wir werden zwischen unseren Tags markieren, die es zurückgibt, sie würden das Absatz-Tag wieder erstellen. Und jetzt werden wir eine Körperkopie in unseren Fuß oder Tag schreiben. Also wollen wir das Copyright-Symbol dort platzieren. Also lassen Sie uns voran und öffnen Sie einen neuen Tab mit Google und lassen Sie uns einfach das Copyright-Symbol durchsuchen und dann werden wir das markieren und es einfach direkt in unseren Code kopieren. Und dann füllen wir hier nur noch ein paar Informationen über unsere Firma aus. Wenn wir also unsere Webseite hier auf der rechten Seite betrachten, können Sie sehen, dass wir beginnen, die wichtigsten Abschnitte unserer Website jetzt später in diesem Kurs zu bekommen , werden wir tatsächlich anfangen zu stylen und machen mehr Trennung von jedem Abschnitt durch Farbe und ein paar andere Dinge. Aber im Moment werden wir voran gehen und eine schnelle Codierungsherausforderung nehmen, um das zu üben, was wir bisher gelernt haben . Dann sehe ich euch in der nächsten Lektion. 8. Eine line erstellen: jetzt. In der vorherigen Lektion habe ich erläutert, wie Sie verschiedene Absätze erstellen können, indem Sie einfach MAWR-Absatz-Tags erstellen. In einigen Szenarien möchten wir jedoch möglicherweise, dass sich der Text derselben Zeile oder eines Absatzes in einer anderen Zeile befindet. Um dies zu tun, müssen wir nur das Zeilenumbruch-Tag oder B R erstellen. Und das Zeilenumbruch-Tag ist eines der wenigen Tags in HTML, das kein schließendes Tag hat. Also alles, was wir tun werden, ist nach dem Wort Cookie hier und unserem Titel. Wir werden BR platzieren und Sie werden hier auf der rechten Seite bemerken, dass dies tatsächlich die Worte Doe Co in die nächste Zeile geschoben hat. Jetzt hätten wir diesen exakt gleichen Effekt erzeugen können, indem wir ein H ein Tag unten setzen und die Wörter Doe Co. Innerhalb dessen. Aber es gibt ein paar Vorteile, die wir bekommen, wenn wir unser Tag sind. Zum einen ist die Verwendung des BR-Tags viel besser, da es eine Unterbrechung des Inhalts schafft, ohne dem Computer mitzuteilen , dass es sich um einen anderen Inhalt handelt. Also, was ich meine ist, wenn wir tatsächlich zwei verschiedene H eins Tags oder Absatz-Tags erstellt hätten, dann wird unser Computer den Code interpretieren, dass diese Texte nicht relevant sind oder sie nicht zusammengehören. Aber in unserem Szenario gehören sie zusammen und wirklich einer der anderen Hauptgründe, warum das BR-Tag nützlich ist, ist, wenn wir später entscheiden, dass wir nicht wollen, dass ein Zeilenumbruch ihre Schwächung. Löschen Sie einfach das BR-Tag, ohne sich Gedanken über das Löschen anderer Tags oder eine ganze andere Codezeile machen zu müssen. Das ist also alles für diese Lektion und die nächste Lektion, die wir behandeln, wie man Links zu unserer Website hinzufügt . Ich werde euch im nächsten Video sehen. 9. Einen Link hinzufügen: alle und willkommen, ein Leck in diesem Abschnitt hinzuzufügen. Wir werden Links zu unserem Navigationsbereich hinzufügen. Also lasst uns voran gehen und loslegen, indem wir schlagen. Kehren Sie jetzt zwischen den Navigations-Tags zurück, um ein Link-Tag zu erstellen. Wir werden den Buchstaben A benutzen also gehen wir weiter und straffen das aus. Und dann können wir weitermachen und unseren Link-Titel innerhalb des Link-Tags setzen. Nun, wenn Sie hier auf der Ausgabeseite schauen, werden Sie feststellen, dass der Text scheint nicht anders zu sein als der gesamte andere Text auf einer Seite. Und das liegt daran, dass wir den Link Ihres l innerhalb des Link-Tags setzen müssen. Also nach dem ersten a, lassen Sie uns ein Leerzeichen setzen und dann einen treff und dann gleich, gefolgt von Zitaten. Jetzt steht H ref für Hypertext-Referenz, was bedeutet, dass jeder Link, den wir innerhalb dieser Anführungszeichen platzieren, ist, wohin unser Link uns führen wird . Also, jetzt, wenn wir auf der rechten Seite sehen, wird feststellen, dass unsere Maus ändert, weil wir tatsächlich einen Link hier haben. Jetzt gehen wir weiter und klicken Sie darauf und sehen, was passiert. Jetzt scheint alles zu verschwinden. Nun, das liegt daran, dass wir kein u R L in unserem Link-Tag haben, das uns tatsächlich zu bringen. Wenn wir also fortfahren und zweimal auf das Ausgabe-Tag klicken, sollte alles wieder angezeigt werden. Jetzt gibt es ein paar verschiedene Dinge, die wir als Links innerhalb unserer treff platzieren können. Eines der Dinge, die wir tun können, ist einfach das Hashtag-Symbol als Platzhalter zu platzieren, was bedeutet, dass, wenn Sie auf den Link klicken und nichts passiert. Also, jetzt gehen wir weiter und klicken Sie darauf, und wir bemerken, dass nichts passiert. Und so, in einigen Szenarien wie diesem waren bereits auf der Homepage, das wäre eine gute Nutzung davon, so dass niemand irgendwo hingeht. Jetzt. Gehen wir weiter und kopieren Sie unseren ganzen Link hier drei weitere Male, und dann füllen wir den Rest unserer Navigation aus. Also die 2. 1, die wir über die 3. 1 schreiben werden wir Kontakt schreiben und die vierte und letzte wir werden Kauf schreiben. Wenn wir jetzt schauen, haben wir all diese verschiedenen Links hier und sie sind anklickbar, aber wir haben uns jetzt nirgendwohin mitgenommen, weil dies ein Anfängerkurs ist. Ich werde nicht zu weit in all die verschiedenen Dinge eingehen, mit denen wir verknüpfen können. Und in diesem Kurs werden wir nicht wirklich vier verschiedene Seiten erstellen und sie alle miteinander verlinken lassen. Aber ich möchte Ihnen ein paar schnellere Dinge zeigen, die mit Links schwächen. Das erste, was wir tun können, ist, dass wir einen Link zu einer externen oder anderen Website erstellen können . Also, wenn wir Leerzeichen nach dem H ref in den Anführungszeichen hier treffen, lassen Sie uns voran und geben Target gleich ein und dann Leer unterstreichen. Jetzt wollen wir voran gehen und innerhalb Rh Floß Zitate gehen. Wir werden http Colin für einen Schrägstrich Ford Slash Google Dot com eingeben. Der Grund, warum wir dieses Ziel hier mit den Wörtern Unterstrich Leer in Anführungszeichen setzen , ist, dass wird der Browser sagen, eine neue Registerkarte zu öffnen, wenn wir auf den Link klicken. Also lassen Sie uns voran und klicken Sie auf die Registerkarte „Über“ jetzt, und es sollte einen neuen Link öffnen und uns zu Google bringen, und es sieht so aus, als ob alles funktioniert hat. Jetzt gehen wir weiter und schließen Sie dieses Google-Tag und dann werden wir all dies zu löschen . Erstellen Sie unseren Hash-Tag-Link dort neu, so dass er uns jetzt nirgendwohin bringt. Eine andere Sache, mit der wir auch verlinken können, ist, dass wir Links zu PDFs oder anderen Dokumenten, die wir auf unserer Website gehostet haben, platzieren können . Aber für diesen Kurs werden wir nichts mit unseren Links machen. Wollten nur das Hash-Tag als Platzhalter verwenden. In der nächsten Lektion werde ich erläutern, wie man ein Bild zu unserer Website hinzufügen kann. Ich werde euch im nächsten Video sehen. 10. Ein Bild hinzufügen: und willkommen, ein Bild in dieser Lektion hinzuzufügen. Wir werden ein Bild von einem riesigen, klobigen Schokoladen-Chip Cookie direkt unter unserem Slogan hinzufügen . Also, um zu beginnen, lassen Sie uns zurück nach dem p-Tag unseres Slogans, und dann, um das Bild-Tag zu erstellen, werden wir I M G verwenden, die eine Abkürzung für das Wort Bild ist. Also gehen wir voran und tippen Sie das jetzt aus. Eine Sache zu beachten ist, dass das Bild-Tag genau wie das BR- oder Zeilenumbruch-Tag ist, das wir hier oben gemacht haben . Es ist kein schließendes Tag erforderlich. In der Tat, wenn wir ein schließendes Tag platzieren, wird es tatsächlich nur Probleme auf der Straße verursachen. Das nächste, was wir tun müssen, ist, die Quelle unseres Bildes in das Bild-Tag zu setzen. Wenn wir also nach dem Buchstaben G ein Leerzeichen setzen, geben wir SRC ein, das eine Abkürzung für Quelle ist, gefolgt von dem Gleichheitszeichen und dann Zitate. Jetzt müssen wir nur noch das Bild u R L zu R innerhalb dieser Zitate einfügen. Also lassen Sie uns voran und öffnen Sie eine neue Registerkarte in unserem Browser und wir gehen, um Google dot com Schrägstrich Bilder und wir werden Cookie suchen und dann PNG-Bild als ein Wort. Und wenn Sie nach unten scrollen, lassen Sie uns 1234 Zeilen sehen. Ich habe dieses tolle Bild genau hier gefunden. Also, wenn wir auf das klicken und Bild anzeigen klicken, werden wir die Ihre L auswählen und dann den Befehl drücken, sehen oder steuern, siehe, um es zu kopieren. Andernfalls können Sie mit der rechten Maustaste klicken und Kopieren drücken. Dann gehen wir zurück zu unserem Code und dann mit in den Anführungszeichen würden es einfügen. Also jetzt sollten wir auf der rechten Seite sehen, dass wir dieses gigantische Bild von einem Cookie jetzt auf unserer Website haben. Nun scheint der Cookie unsere gesamte Website zu übernehmen und es ist ein bisschen zu groß . Also, was wir tun wollen, ist die Höhe und die Breite dieser Bildgröße einstellen. Also, nach unseren Anführungszeichen, lassen Sie uns voran und geben Sie Höhe gleich und dann Anführungszeichen ein. Und dann lasst uns voran gehen und 250 p x eingeben, was für Pixel kurz ist. Wenn Sie also unseren Cookie betrachten, ist er viel kleiner und wenn Sie schauen, können wir tatsächlich die Höhe ändern, indem Sie die Anzahl der Pixel hier ändern, so dass wir es wirklich klein oder wirklich groß machen können. Jetzt können wir auch die mit genau so einstellen, wie wir die Höhe eingestellt haben. Aber eine Sache, die wir beachten möchten, ist, dass, wenn wir das mit auf etwas anderes als das ursprüngliche Verhältnis des Bildes setzen , es wird es lustig strecken. Also, was wir tun können, ist einfach Otto eingeben, und das wird sicherstellen, dass das Verhältnis des Bildes zu seinem ursprünglichen Zustand bleibt. Jetzt gibt es nur noch eine Sache, die wir mit dem Bild Tack abdecken müssen. Jedes Mal, wenn Sie das Bild-Tag verwenden, ist es erforderlich, dass wir alte Attribute eingeben. Also, um dies zu tun, werden wir a lt das gleiche Symbol und dann Anführungszeichen eingeben. Jetzt die Altarattribute ist, wo wir eine Beschreibung des Bildes, das angezeigt werden kann, wenn die Website irgendwelche Probleme hat, das Bild anzuzeigen. Also lassen Sie uns voran und geben Sie eine gute Beschreibung unseres Cookies jetzt, um dies zu testen und ein Beispiel für euch zu zeigen , ich werde ein paar Zeichen in diesem löschen, Ihre l und Sie sollten auf der rechten Seite bemerken, dass alle Attribute sind wird hier angezeigt. Wenn Sie also genau hier schauen, wird dies angezeigt, wenn es Probleme mit dem Laden Ihres Bildes gibt. Die Alle Attribute werden auch für Menschen mit Behinderungen verwendet, die Lesegeräte anzeigen, die den Code Ihrer Website lesen, wenn sie sehbehindert sind. Gehen wir also weiter und machen das rückgängig. Wenn wir den Link gebrochen haben und sicherstellen, dass unser Cookie in der nächsten Lektion auf der rechten Seite erscheint , zeige ich Ihnen, wie Sie ein Bild erstellen, das auf ein Leck zugreift. Ich werde euch im nächsten Video sehen. 11. Ein Bild mit einem Link erstellen: alle willkommen zurück. Und diese Lektion werden wir unser Cookie-Bild hier in einen anklickbaren Link verwandeln. Also, um loszulegen, lassen Sie uns unseren Cursor am Ende des Absatzes Tag wurden ersetzt unseren Slogan und drücken Sie die Return-Taste. Alles, was wir tun müssen, um ein Bild in einen Link zu verwandeln, ist das Bild-Tag innerhalb unseres Link-Tags eingewickelt . Also lassen Sie uns voran und erstellen Sie das öffnende A-Tag, und klicken Sie dann vor dem H drei Tag und erstellen Sie schließen Link-Tag jetzt, um dies ein wenig einfacher für uns später zu lesen, lassen Sie uns vor dem Bild-Tag klicken und drücken Sie die Registerkarte -Schlüssel. Also gibt es hier ein bisschen einen Unterschied, in unserem ersten Tag müssen wir ein Leerzeichen setzen, gefolgt von der H ref gleich Wo wird die Quelle unseres Links platzieren oder wo wir wollen, dass der Link den Benutzer senden. Für dieses Szenario wollen wir einen Link zurück zur ursprünglichen Website, von der wir dieses Cookie-Bild erhalten haben. Also, wenn wir wieder auf unsere Google-Bildsuche gehen und Besuchsseite drücken, lassen Sie uns voran gehen und kopieren Sie diese Sie Earl und platzieren Sie, dass durch die H ref. Genau wie vor wollen wir tippen, Ziel gleich und dann innerhalb der Zitate unterstreichen leer, weil wir möchten, dass die Benutzer sich keine Sorgen über die Rückkehr zu unserer Website machen müssen, und dies wird automatisch eine neue Registerkarte im Browser erstellen wann immer sie darauf klicken. Also lassen Sie uns voran und klicken Sie auf ihren Cookie zu testen, dass es funktioniert und Walla. Es sieht so aus, als hätte alles gut funktioniert. Also jetzt können wir voran gehen und schließen aus all diesen zusätzlichen Tabs und bevor wir mit der nächsten Lektion fortfahren wird eine schnelle Codierung Herausforderung, um sicherzustellen, dass Ihr Verständnis alles so weit, nachdem Sie die Codierung Herausforderung nehmen, Ich werde sehen ihr Jungs in der folgenden Lektion, wo wir anfangen, das div-Tag zu lernen und Trennung innerhalb unserer Website zu schaffen. 12. Verwendung der Div-Tag: jeder. Ich bin froh, dass Sie es durch die Codierungsherausforderung in Ihrem Rücken geschafft haben und bereit, mehr zu erfahren. Jetzt in diesem Abschnitt werden wir das DIV-Tag abdecken. Jetzt. Div ist die Abkürzung für die Wortteilung im Diff-Tag hilft uns, verschiedene Abteilungen oder Abschnitte innerhalb unseres HTML-Dokuments zu erstellen , um unseren Code ein wenig organisierter zu halten. Also, wenn wir hier auf der linken Seite schauen, können Sie sich wahrscheinlich vorstellen, wenn wir MAWR mehr Code schreiben, würde es irgendwie chaotisch und schwer zu lesen beginnen. Deshalb verwenden wir das DIV-Tag, um Abschnitte von Inhalten zu trennen, die jetzt relevant sind. Das DIP-Tag wird uns auch später helfen, wenn wir anfangen, CSS zu decken, und wir werden sehen, warum es wichtig ist , verschiedene Abschnitte und Dip-Tags zu wickeln, da es uns hilft, verschiedene Farben und Schriftarten und vieles mehr zu definieren . Lassen Sie uns also beginnen, indem Sie alle unsere relevanten Abschnitte mit dem diff-Tag umschließen. Also wollen wir am Ende der Navs Hag klicken und die Rückkehr T treffen Dann werden wir Div eingeben und dann gehen wir voran und Tab enden jeden unseren Slogan und dann unseren Link in unserem Bild Zeug. Nun, nach dem schließenden Link-Tag, lassen Sie uns zurückkehren und geben Sie das schließende DIV-Tag ein. Nun gehen wir weiter und wickeln alle unsere H drei Header und Dip-Tags in Vorbereitung auf später, wenn wir mit dem ADM beginnen. Oder Informationen zu ihnen. Nun, eine Sache, die schwächen tun, wenn Code zu schreiben, ist Copy and Paste zu unserem Vorteil verwendet. In diesem Szenario werde ich den Eröffnungstag des Tags eingeben und ihn vor allen anderen jeweils drei kopieren . Dann werde ich sie in die nächste Zeile zurückbringen. Jetzt werden wir nach unserem ersten Alter drei schließenden Tag zurückkehren und rechts das schließende Def-Tag . Jetzt können wir einfach weitergehen und kopieren und einfügen und dasselbe für alle tun. Kopieren und Einfügen hilft uns nur, den Code ein wenig schneller zu schreiben, und es stellt sicher, dass wir weniger Tippfehler haben, als wenn wir jedes einzelne Div-Tag einzeln ausschreiben würden . An diesem Punkt ist es vielleicht ein bisschen schwer zu verstehen, warum wir das Diff-Tag brauchen. Aber später im CSS Abschnitt dieses Kurses. Es wird viel leichter Zeh sein. Verstehen Sie, warum wir damit begonnen haben, unseren Code so einzurichten. Danke fürs Zuschauen. Und ich werde euch im nächsten Video sehen. 13. Ungeordnete und bestellte Listen erstellen: alle und willkommen zurück diese Lektion. Wir werden weiterhin Inhalte in jeden unserer Abschnitte auf der rechten Seite hinzufügen, und wir werden behandeln, wie eine neue geordnete Liste erstellt wird. Und eine Nordenliste ist eine Liste, die keine Zahlen hat, sondern jetzt Aufzählungspunkte verwendet, um zu beginnen. Lassen Sie uns die Rückkehr nach unserem H drei Tag für die alle natürlichen Zutaten Überschrift treffen. Und dann lassen Sie uns das U L-Tag auf der UL erstellen. Tag ist einfach die Abkürzung für eine Nord Erred Listen. Nun, bevor wir anfangen, den Text einzugeben, den wir auf ihrer Liste sein wollen, lassen Sie uns voran und drücken Sie zurück und dann müssen wir das L. I-Tag erstellen . Jetzt muss für jeden einzelnen Listeneintrag das L I-Tag verwendet werden. Also in diesem Szenario werde ich eine Reihe von verschiedenen Zutaten eingeben. Und der Einfachheit halber habe ich die Liste als Artikel eingegeben, der an dieses Video angehängt ist, also solltest du in der Lage sein, die Liste einfach zu kopieren und einzufügen, oder du kannst mitverfolgen und alles eingeben, während ich das tue, jetzt, da wir alles aus, wenn wir hier auf der rechten Seite schauen, werden Sie unter unserer Zutatenüberschrift feststellen, dass wir eine Norden oder eine Aufzählung aller Zutaten in unserem Keksteig haben. Jetzt möchten wir Schritt für Schritt Anleitungen erstellen. Also für den Unterrichtsabschnitt direkt unten, wollen wir Zahlen für unsere Liste haben. Also, um dies zu tun, drücken wir Rückkehr nach dem H drei Tag und lassen Sie uns das Tag verwenden. Oh nun, das ist kurz für geordnete Listen, genau wie die oben genannte Nordliste. Wir müssen auch das L I-Tag für jeden einzelnen Listeneintrag verwenden, den wir auf der Liste haben wollen. Also nochmal, ich werde kopieren und Tempo alle Listen Tags nur, damit wir genug haben. Und dann werde ich anfangen, die Anweisungen auszugeben, die auch in dem Artikel enthalten sind, der diesem Video beigefügt ist. - Jetzt sieht es so aus, als hätten wir ein paar extra L. I-Tags, also lasst uns diese markieren und ihn löschen. Wenn wir nun auf unsere rechte Seite schauen und ein wenig nach unten scrollen, werden Sie feststellen, dass die Liste Anweisungen Zahlen auf der linken Seite hat, während Thean gierige INTS Liste Aufzählungspunkte hat. Nun, wenn wir jemals etwas ändern müssen. Diese müssen immer einfach tun, ist das O und das U. Also jetzt, wenn wir schauen, können wir sie hin und her ändern. wir nun die Zutaten und Anweisungen ausgefüllt haben, werden wir mit der nächsten Lektion und dem nächsten Video fortfahren. Wo wird abdecken, wie ein Eingabeformular erstellt wird? 14. Formulare erstellen: und willkommen zum Erstellen von Formularen in Formularen ist eine Möglichkeit, die Informationen eines Kunden zu erfassen , wie z. B. eine E-Mail oder einen Namen. Also, um loszulegen, lassen Sie uns zurück nach den drei Tags drücken, die Winfrey sagt. Cookie-Teig für das Leben. Nun, um unser Formular zu erstellen, müssen wir zuerst das Formular-Tag erstellen. Dann lassen Sie uns voran und drücken Sie jetzt zurück, um das Feld zu erstellen, das dem Benutzer erlaubt, einzugeben , wir müssen das Eingabe-Tag verwenden. Also lasst uns Eingabe ausgeben. Und eine Sache, die Sie bemerken werden, ist, dass das Eingabetag kein schließendes Tag hat, das unserem Bild-Tag ähnelt . Alles, was wir brauchen, ist nur das Eingabe-Öffnungs-Tag jetzt innerhalb des Eingabe-Tags, das wir brauchten. Setzen Sie, welche Art von Feld das ist, und weil wir nur den Namen in der 1. 1 sammeln werden wir schreiben Typ gleich, dann Text. nun Wenn wirnunauf der rechten Seite nach unten scrollen, werden Sie sehen, dass wir jetzt ein Feld hier haben, in dem der Benutzer seinen Namen schreiben könnte. Das nächste, was wir tun möchten, ist oben beschriftet, also lassen Sie uns voran und erstellen Sie das Absatz-Tag erneut, und dann den richtigen Namen darin, und jetzt werden Sie sehen, dass es oben über unserer Feldeingabe erscheint. Als nächstes möchten wir einen weiteren Eingabe-Abschnitt erstellen, in dem wir die E-Mail des Benutzers sammeln können. Also lassen Sie uns voran und Kabi den Namen und die Eingabe sag mit Befehl, siehe oder Kontrolle sehen, und fügen Sie es dann unter unsere 1. 1 So jetzt sehen Sie, wir müssen den Namen sagen. Also, was wir wollen, ist löschen Sie den zweiten Namen und geben Sie in E-Mail jetzt, um dem Computer zu sagen, welcher Wert ist, was wir wollen, um den Namen innerhalb des Tags hinzuzufügen. Also lassen Sie uns voran und geben Sie Name gleich ein. Und dann werden wir den Namen für das eine setzen, und für die 2. 1 wird Name gleich E-Mail eingeben. Jetzt ist der Name gleich Funktion nur für den Browser zu verstehen, was es ist. Es wird nicht auf der rechten Seite angezeigt, und in diesem Kurs werden wir nicht alle Details abdecken, um unser Formular richtig funktionieren zu lassen . Aber es gibt nur noch eine Sache, die wir schaffen müssen. Wir müssen eine Submit-Button erstellen, die es dem Benutzer ermöglicht, auf etwas zu klicken, um drei MFO einzureichen. Also lassen Sie uns voran und drücken Sie die Rückkehr, und wir werden ein weiteres Eingabe-Tag erstellen. Aber dieses Mal werden wir den Typ senden erstellen, und jetzt werden Sie feststellen, dass ein Submit-Button tatsächlich auf der rechten Seite erscheint. Nun, normalerweise, müssten wir dann zurück zum Formular-Tag von hier und sofort etwas mehr Code, der dem Computer sagen würde, wohin das Formular sendet? Aber weil dies ein sehr Anfängerkurs ist, werden wir das nicht in diesem Video oder einem der folgenden Videos mit dem Gesagten abdecken . Das ist alles für diesen Kurs und das Erstellen von Formularen und den nächsten Kurs, wir werden behandeln, wie man Tabellen erstellt und wir werden anfangen, unsere Ernährungsinformationen hinzuzufügen . Ich werde euch im nächsten Video sehen 15. Tabellen erstellen: alle willkommen zurück und diese Lektion. Wir werden behandeln, wie man eine Tabelle erstellt, und wir werden die Informationen für unsere Ernährungsinformationen ausfüllen, aber es beginnt. Wir brauchen es getroffen. Kehren Sie nach dem H drei -Tag zurück und erstellen Sie das Tabellen-Tag. Ich werde das schließende Tisch-Tag kaufen. Dann gehen wir weiter und schlagen. Kehren Sie zwischen ihnen jetzt innerhalb des tabellentags zurück. Es gibt ein paar verschiedene Tags, die wir verwenden können. Das erste Tag, das wir verwenden müssen, ist TR, das kurz für Tabellenzeile ist jetzt. Innerhalb unserer Tabellenzeile müssen wir einen von zwei verschiedenen Tags angeben, bevor wir unsere Informationen eingeben. Die erste 1, die wir tun können, ist das th Tag zu erstellen, das für Tabellenüberschrift steht. In der Regel werden wir das th-Tag nur einmal verwenden, und wir werden das verwenden, um Überschriften für eine Tabelle zu erstellen. Also lasst uns voran gehen und Kalorien eingeben und gehen wir weiter, kopieren Sie die ganze Reihe und fügen Sie sie wieder ein. Jetzt werden Sie feststellen, dass Kalorien neben den anderen Kalorien, die wir gerade kopiert haben, und das ist, weil wir eine zweite Zeile erstellt haben, so dass Wenn wir diese weiter kopieren, wird es weiterhin schaffen mehr Rose. Jetzt für unsere Informationsabteilung, wir werden uns nur erheben müssen. Also lasst uns voran gehen und beide löschen. Also gehen wir jetzt auch Onley . Das zweite Tag, das wir innerhalb des TR-Tags verwenden können, ist das T D-Tag, das für Tabellendaten kurz ist. Also lassen Sie uns voran und ändern Sie die zweite Kalorien Tag hier in T d.. Nun, wenn wir auf der rechten Seite hier sehen, wird feststellen, dass die Tabellenüberschrift in Fett ist, während die Tabellendaten regelmäßig sind. Also lasst uns voran gehen und die Kalorien dieses zweiten Tags hier auf 98 ändern. Jetzt werden wir alles innerhalb des TR-Tags auswählen, einschließlich des Tags selbst, und kopieren dies ein paar Mal. Jetzt füllen wir jetzt alle unsere Ernährungsinformationen aus, genau wie die vorherigen Videos, in denen wir diese Liste für Zutaten und Anweisungen gemacht haben. Ich habe alle Ernährungsinformationen in das Dokument aufgenommen, das diesem Video beigefügt ist. Andernfalls kannst du das Video weiter ansehen und mitverfolgen, wie ich alles eintippe. - Nun , da wir alle unsere Informationen in der Abteilung Ernährungsinformationen ausgefüllt haben. Es gibt nur ein paar Dinge, die ich dir jetzt zeigen möchte. Wir haben hier zwei verschiedene Spalten erstellt, aber Sie können tatsächlich so viele Spalten erstellen, wie Sie möchten. Sie müssen einfach nur die th oder die TD-Tags innerhalb der TR-Tags platzieren, um mehr Zeilen zu erstellen . Also, wenn Sie hier schauen, haben wir gerade zwei weitere Reihen unter dem Proteinabschnitt erstellt. Also werde ich rückgängig machen, dass jetzt, wo wir behandelt haben, wie Tabellen und HTML zu erstellen, Lassen Sie uns ein schnelles Quiz machen und dann werde ich euch in unserem letzten HTML-Video sehen. 16. Kommentare in HTML erstellen: und herzlich willkommen zu unserem finalen Video im HTML-Bereich dieses Kurses. In diesem Video werden wir behandeln, wie Kommentare in unserem HTML-Code erstellt werden. Nun gibt es ein paar Gründe, warum wir einen Kommentar zu ihrem Mantel machen wollen. Einer der Gründe ist, dass wir Notizen für uns selbst oder vielleicht sogar für andere, die mit gearbeitet haben, hinterlassen können . Ein weiterer Grund ist, dass wir einen Teil unseres Codes auskommentieren möchten, damit er nicht angezeigt bis wir später entscheiden, dass wir anzeigen möchten. Lassen Sie uns also voran gehen und werfen Sie einen Blick darauf, wie wir Kommentare erstellen. Inneres Problem. Mel Mantel. Scrollen wir nach unten. So sehen wir jetzt die Ernährungsinformationen. Direkt darüber klicken wir nach dem Diff-Tag und drücken jetzt zurück, um einen Kometen zu erstellen. Wir beginnen mit dem öffnenden Tag, dem weniger Landsymbol, gefolgt von einem Ausrufezeichen, gefolgt von zwei Bindestrichen. Nun, wenn Sie bemerken, nachdem wir dieses Tag eingegeben haben, wurde der gesamte folgende Code grün und das liegt daran, dass der Browser nicht sieht, wo er aufhören soll, es zu lesen. Als Kommentar, weil wir nicht erstellt haben schließen Tech. Um also das schließende Tag für einen Kommentar zu erstellen, werden wir Leerzeichen treffen und dann Strichzeichen, gefolgt von dem Größer-als-Symbol. Eine Sache, die wir bemerken müssen, ist, dass wir kein Ausrufezeichen in unserem schließenden Tag von Kommentaren brauchen. Nun, innerhalb unserer Kommentar-Tags, können wir erstellen oder tatsächlich schreiben Sie den Kommentar, den wir für uns selbst hinterlassen wollen. Also lasst uns voran gehen und einen Kommentar ausgeben. Also, wenn Sie hier bemerken, habe ich getippt. Diese Ernährungsinformationen stammen aus dem Jahr 2017, so dass dies ein Kommentar sein könnte, den Sie verlassen möchten . Also, wenn Sie in Ihre Website Code später ging, würden Sie wissen, wie alt die Ernährung Informationen Waas. Jetzt haben wir mit einem Freund oder Kollegen an dieser Website gearbeitet. Dieser Kommentar kann auch hilfreich sein, da er sie wissen lässt, wenn diese Informationen erstellt wurden . Nun gehen wir weiter und werfen einen Blick darauf, wie wir verschiedene Objekte auskommentieren können, damit sie nicht auf der rechten Seite angezeigt werden. Beispiel AlsBeispielwerden wir unser Cookie-Bild auskommentieren, damit wir sehen können, dass es verschwinden und dann wieder erscheinen wenn wir den Kommentar wegnehmen. Um dies zu tun, lassen Sie uns das öffnende Tag unseres Kommentars direkt vor dem A-Tag erstellen. Und dann, nach dem Schließen eines Tags. Lassen Sie uns voran und erstellen Sie das schließende Kommentar-Tag. Also, jetzt, wenn Sie auf der rechten Seite sind Cookie, ist es verschwunden, und Sie werden feststellen, dass alle unser Code ist jetzt grün. , Wenn wir uns später entschieden haben,möchten wir, dass unser Cookie auf unserer Website erscheint, als alles, was wir tun müssen, ist Gehen Sie weiter und löschen Sie unsere Kommentar-Tags und Sie werden feststellen, dass das Cookie wieder auf unserer Website erscheint. Wenn wir uns Oliver Code auf der linken Seite ansehen, werden Sie feststellen, dass wir bisher einiges abgedeckt haben. Dies ist das letzte Video im HTML-Abschnitt. Es wird ein schnelles Quiz geben, um alle verschiedenen Elemente zu überprüfen, die wir in HTML behandelt haben . Nachdem Sie gemacht haben, wird das Quiz direkt in die Geschichte von CSS eintauchen, und dann beginnen wir, Farbe und verschiedene Schriftarten auf der rechten Seite unserer Website hinzuzufügen . Haltet die gute Arbeit, Leute, und ich sehe euch gleich nach dem Quiz 17. CSS Übersicht: Hey, da. Willkommen zur CSS Übersicht. CSS beschreibt, wie Issue Mel-Elemente auf dem Bildschirm angezeigt werden sollen. Wir können Farben Größe Schriftarten und mehr ändern. CSS steht für Cascading Stylesheets. Cascading bedeutet, dass Stile von einem Stylesheet in ein anderes fallen oder kaskadieren können, sodass mehrere Stylesheets innerhalb unseres HTML-Dokuments verwendet werden können. In diesem Teil des Kurses werden die HTML-Tags verwendet, die wir in den vorherigen Videos gelernt haben, um die verschiedenen Elemente unserer Webseite zu gestalten. In diesem Teil des Kurses werden die HTML-Tags verwendet, die wir in den vorherigen Videos gelernt haben Lassen Sie uns ein kurzes Quiz machen und dann werden wir das CSS in der Steuer abdecken oder wie wir das CSS schreiben. 18. CSS-Syntax: und willkommen zur CSS Syntex Lektion, um CSS auszuschreiben. Wir beginnen mit einem Selektor. Diese vermitteln nun die HTML-Tags, die wir in den vorherigen Videos gelernt haben, oder sie können auch I DS oder Klassen sein, die wir später abdecken werden. In diesem Kurs nach dem Selektor verwenden wir nach dem Selektoreine öffnende geschweifte Klammer, gefolgt von einer Eigenschaft. Jetzt werden die Eigenschaften all die verschiedenen Videos sein, die wir in diesem Abschnitt behandeln . Jede Eigenschaft weist den Browser an, eine andere Sache zu tun , wie Änderung , Farbänderung , Größenänderung , Dekoration usw. Nach der Eigenschaft setzen wir den Doppelpunkt Symbol und dann setzen wir den Wert. Für das Farbbeispiel hatten wir den Namen einer Farbe wie blau nach dem Wert, den wir erstellen oder einen Semikolon eingeben müssen . Jetzt teilt der Semikolon dem Computer mit, dass das Ende dieser Eigenschaft und des Wertes ist, und es wird weiterlesen, um die nächste. Jetzt können wir mehrere Eigenschaften oder Werte schreiben, die mit verschiedenen Selektoren gepaart sind. Für dieses Beispiel werde ich eine weitere Eigenschaft und einen Wert erstellen und dann müssen wir alles mit der schließenden geschweiften Klammer schließen. Jetzt sind alles dazwischen geschweifte Klammern, ist die Deklaration. Im Wesentlichen sagt es dem Selektor, was wir mit unserem Code machen wollen. Das sind die Grundlagen der CSS-Syntax. Im nächsten Video werfen wir einen genaueren Blick, indem wir direkt beim Wechseln des Hintergrunds tauchen. 19. Hintergrundfarbe: alle und willkommen zur Hintergrundfarbe Lektion Jetzt, um loszulegen. Das erste, was wir tun müssen, ist die CSS-Registerkarte oben in unserem Browserfenster zu öffnen . Wenn Sie also hier auf die CSS-Schaltfläche klicken, werden Sie feststellen, dass wir jetzt eine CSS-Spalte haben. Nun, hier werden wir das gesamte CSS für den Rest dieses Kurses schreiben. Jetzt ermöglicht es uns die Hintergrundfarbe Eigenschaft, die Hintergrundfarbe unserer verschiedenen HTML-Elemente zu ändern . Das erste, was wir tun werden, ist die gesamte Hintergrundfarbe unserer Webseite zu ändern . Wenn wir also unsere HTML auf der linken Seite betrachten, wird hier feststellen, dass wir alle unsere verschiedenen Elemente in unserem Body-Tag eingewickelt haben. Um dies auszuschreiben, möchten wir zuerst den Körper ausschreiben , der unser CSS-Selektor ist, gefolgt von den geschweiften Klammern. Und wenn Sie bemerken, wenn Sie die erste geschweifte Klammer eingeben, wird die 2. 1 für Sie vorausgefüllt. Also dann wollen Sie zurück drücken, und jetzt in der nächsten Zeile wollen wir oder Eigenschaft eingeben, die Hintergrundfarbe Bindestrich ist, gefolgt von einem Doppelpunkt, und dann wollen wir die Farbe schreiben, so dass es eine Anzahl der verschiedenen Farben, die direkt aus schwächen, aber sie müssen Web-sichere Farben sein, so dass sie entweder Hex-Codes, RGB-Codes oder Farbnamen sein müssen . Also werden wir einen Hex-Code schreiben, der de neun b drei acht c ist, gefolgt von unserem Semikolon. , Denken Sie daran, wie wir im letzten Video beschrieben haben, sagt der Semi Colon dem Computer, dass das das Ende der Erklärung ist. Also, nachdem es gelesen hat, dass es weiß, dass es weiterlesen kann, um die nächste Eigenschaft zu lesen. Nun, wenn wir auf der rechten Seite hier sehen, dass die Hintergrundfarbe ihrer Webseite ist jetzt diese hellbraune Farbe. Jetzt möchten wir die Hintergrundfarbe von ein paar Elementen von Elementen ändern, die wir wirklich hervorheben möchten . Deshalb möchten wir auch, dass unser Firmenname hervorhebt. Also, wenn wir uns unseren Firmennamen hier auf der linken Seite sehen, wird feststellen, dass es in jedem Tag ist . Gehen wir also voran und ändern Sie die Hintergrundfarbe, indem Sie H als Selektor und dann die rechte Hintergrundfarbe als Eigenschaft und für die H verwenden. Wir wollen es zu einer hellblauen Farbe machen. Also lassen Sie uns voran und verwenden Sie den Hex-Code drei BB neun ff. Also jetzt, wenn wir hier auf die rechte Seite schauen, sollte die hellblaue Farbe hinter unserem Text erscheinen. Jetzt gehen wir einfach weiter und scrollen Sie nach unten und lassen Sie uns voran und schreiben Sie in einer Hintergrundfarbe für unsere Fußzeile. Wenn wir uns also im HTML-Abschnitt dieses Kurses erinnern, verwenden wir das Fußzeilen-Tag für HTML. Also lassen Sie uns voran und tippen Sie Fußzeile als unseren Selektor. Und noch einmal, lasst uns die Hintergrundfarbe ausgeben. Und nun dieses Mal, lassen Sie uns eine Beispielfarbe verwenden, die Web sicher ist, so dass wir eine Reihe von verschiedenen Farbnamen eingeben können , und um eine vollständige Liste zu sehen, sollten Sie die W drei c Website toe besuchen. Erfahren Sie mehr, aber für diesen Kurs gehen wir einfach vor und tippen Sie hellgrau, und jetzt werden Sie feststellen, dass unsere Fußzeile hier unten hellgrau ist. Nun, wenn Sie auf der rechten Seite bemerken, endet die Hintergrundfarbe Art von wirklich nahe am Rand unseres Textes. Jetzt mach dir keine Sorgen. Später, in diesem Kurs, werden wir behandeln, wie Toe ADM oder Marge und Padding, um dem Text mehr Raum zum Atmen zu geben . Nun, bevor wir weitermachen, fügen wir einfach eine weitere Hintergrundfarbe hinzu. Wir wollen also sicherstellen, dass alle unsere Unterrubriken hier ein bisschen mehr hervorstechen als sie. Also lassen Sie uns voran und rufen Sie sie mit dem H drei Tag an. Und dann lasst uns die Hintergrundfarbe dieser Zehenweiß ändern. Das ist alles, was wir für diesen Kurs nicht wunden haben. Und die nächste Lektion werden wir behandeln, wie ich ds erstellen. Ich werde euch im nächsten Video sehen. 20. Eine ID erstellen: Hey, da. Willkommen beim Erstellen eines I. D. Und ich D ermöglicht es uns, etwas speziell zu stylen, ohne alle anderen ähnlichen Tags zu beeinflussen . Also, um ein I. D.zu erstellen D. , müssen wir zuerst zu unserem HTML gehen. Also lassen Sie uns voran und erstellen Sie ein I D für alle natürlichen Inhaltsstoffe Abschnitt. Wir werden also ein I D-Tag im DIV-Tag erstellen, das diesen Abschnitt umschließt. Also lassen Sie uns voran und schreiben Sie I d gleich gefolgt von Anführungszeichen. Und dann müssen wir uns einen I.D. Namen einfallen I.D lassen. Jetzt kann ein I-D-Name Onley-Zeichen enthalten. A bis Z Sie könnten Kleinbuchstaben oder Großbuchstaben sein, und es kann Zahlen von Null bis neun enthalten. Aber es kann jetzt nicht mit der Nummer beginnen. Regel möchten Sie, wenn Sie den Namen erhalten, etwas einfallen, das Ihrer Kategorie oder Ihrem Abschnitt entspricht. Es macht also am sinnvollsten, wenn Sie sich Ihren Code später ansehen. Also, für dieses Beispiel, werden wir sie nur nennen, ich nenne Zutaten. Gehen wir nun zurück zu unserem CSS-Panel in dieser Zeit, anstatt unser Element aufzurufen, indem wir Div ausschreiben. Wir werden Zutaten ausschreiben, damit wir das sogar kopieren können, nur um Zeit zu sparen . Und dann brauchen wir eine haben ah Hashtag davor, das ist das Symbol, das ein I. Ddarstellt D Also jetzt folgen wir, dass mit unseren geschweiften Klammern und lassen Sie uns voran gehen und eine Hintergrundfarbe Eigenschaft mit dem Wert F erstellen neun F neun F neun. So wie Sie hier sehen, haben wir jetzt eine leicht graue Farbe auf der rechten Seite, und es auf Lee hat diesen Abschnitt betroffen, weil wir nur eine I d erstellt haben. Also wollen wir auch Ideen für die folgenden Abschnitte erstellen, weil wir jeden Abschnitt wollen Zehe , haben eine andere Farbe. Also lassen Sie uns voran und erstellen Sie ein I D für den Anweisungsabschnitt und lassen Sie uns den Hex-Code ff A a 80 verwenden , weil wir wollen, dass der Anweisungsabschnitt auffallen und eine weiche rote Farbe haben, damit er unsere Aufmerksamkeit erregt. Gehen wir also voran und machen Sie den Abschnitt „Ernährungsinformationen“. - Und jetzt lassen Sie uns voran und machen Sie den windfreien Keksteig für das Leben Abschnitt. Also lassen Sie uns diesen einen Gewinn kurz nennen, und wir können ihn kopieren, um etwas Zeit zu sparen, aber dann ändern wir die Farbe hier. Zwei Orange. Das hebt sich also ein bisschen ab. Lassen Sie uns voran und tippen, und ich d für unseren Slogan hier, denn später, wenn wir einige oder CSS-Eigenschaften abdecken, werden wir das ändern. Aber wir wollen den Rest unseres Textes nicht beeinflussen. Also, wenn wir hier nach dem Slogan suchen , der in einem Absatz-Tag ist, lassen Sie uns den I D gleich Slogan erstellen. Zusammenfassend möchten Sie I DS jederzeit verwenden, wenn Sie bestimmte Elemente auf Ihrer Webseite ändern möchten, ohne sich auf andere Elemente auswirken zu müssen. Denken Sie daran, das I DS nur einmal verwendet werden kann Wenn Sie es also ein paar Mal oder mehr als einmal verwenden müssen, möchten Sie Klassen erstellen, die wir im nächsten Video abdecken 21. Kurse erstellen: alle willkommen zurück. Und diese Lektion werden wir behandeln, wie man Klassen erstellt. Klassen sind im Wesentlichen die gleichen wie ich DS, die wir gerade behandelt haben, außer dass Klassen so oft wiederverwendet werden können, wie wir wollen. Um also eine Klasse zu erstellen, müssen wir auch einen Namen dafür erstellen und sie zu unserem HTML hinzufügen. Genauso wie die I DS-Klassen die gleichen Zeichen enthalten können a thers e Kleinbuchstaben oder Großbuchstaben und die Zahlen Null bis neun. Aber genau wie ich DS, sie auch nicht mit der Nummer beginnen. Also gehen wir in die linke Seite und lassen Sie uns eine Klasse für unsere H drei Elemente erstellen, denn später in diesem Kurs werden wir den Stil aller unserer Unterüberschriften inneres HTML-Dokument hier auf der linken Seite ändern . Lassen Sie uns voran gehen und schreiben Klasse gleich Anführungszeichen und dann innerhalb der Anführungszeichen sind Klassenname. Nun dazu werden wir Titel schreiben und dann werden wir nur kopieren und diese in unsere anderen Titel einfügen . Also sollten wir eine und alle vier unserer Unterüberschriften oder Titel haben, die wir hier jetzt erstellt haben . Später in diesem Kurs, nachdem wir ein paar weitere Eigenschaften und Werte gelernt haben, werden wir die Klassen verwenden, um den Stil unserer Unterüberschriften zu ändern. Das ist alles für dieses Video. Ich werde euch in der nächsten Lektion sehen. 22. Eine Grenze erstellen: Hey da und willkommen, eine Grenze zu schaffen. Und diese Lektion werden wir die Grenze Eigenschaft und die vielen verschiedenen Werte, die mit ihm zu tun. Also, um loszulegen, lassen Sie uns voran und fügen Sie hier eine Grenze zu unserem Firmennamen hinzu. Da wir also bereits die Hintergrundfarbe geändert haben, indem wir das H ein-Tag aufrufen, können wir weitermachen und unsere Eigenschaft dazu hinzufügen. Also nach der Hintergrundfarbe hier drücken Sie Return in type out Grenze, gefolgt von einem Doppelpunkt Symbol. Nun benötigt die border-Eigenschaft drei verschiedene Werte danach. Also das erste, was wir sagen müssen, ist die Grenzdicke oder mit, indem wir ihm sagen wie maney Pixel. Also müssen wir eine Zahl eingeben, gefolgt von P X, die kurz für Pixel ist. Also lasst uns jetzt vier p x eingeben. Das nächste, was wir sagen müssen, ist, welcher Stil wir wollen, dass unsere Linie sein soll. Also für jetzt, lasst uns einfach voran gehen und solide schreiben. Und wie Sie feststellen werden, haben wir bereits einen Rahmen zu unserer Webseite auf der rechten Seite hinzugefügt. Jetzt ist es vorbevölkert schwarz, weil die Farbe unserer Texas schwarz, aber der dritte Wert, den wir ändern können, ist die Farbe. Gehen wir also voran und ändern Sie dies in einen blauen Farbton, indem Sie den Hex-Code 15 89 ff eingeben, gefolgt von unserem Semikolon. Jetzt gibt es eine Reihe von verschiedenen Rändern, die Sie erstellen können. Gehen wir also voran und bearbeiten Sie den Typ hier, wo wir solide geschrieben haben, und ändern Sie dies in punktiert. Also, wenn Sie jetzt auf der rechten Seite sehen, haben wir einen gepunkteten Rand. Jetzt können wir auch gestrichelt oder doppelt eingeben, oder wir können versteckt eingeben, wenn wir möchten, dass es nicht angezeigt wird, bis wir Ihre Meinung später ändern. Also lasst uns voran gehen und wieder geben solide und lassen Sie es an, dass für jetzt. Wenn Sie also hier auf der rechten Seite bemerken, folgte der Rand gerade dem Wert, den wir in der Form genannt hatten, die er bereits hat. Also haben wir eine sehr quadratische Grenze. Die Umrisse unseres blauen Hintergrunds. Jetzt, im nächsten Video, werden wir die Randradius Eigenschaft abdecken, wo abgerundete Ecken zu unserer Grenze hinzufügen . Ich werde euch im nächsten Video sehen 23. Border: und herzlich willkommen in der Grenzradius-Lektion. Jetzt wollen wir die Grenze ändern, die wir gerade in der letzten Video Toe erstellt haben abgerundete Ecken haben. Also gehen wir weiter und gehen zurück nach R. H. Ein Selektor hier oben und nach der Grenzeigenschaft haben wir gerade erstellt Lassen Sie uns zurückkehren und geben Sie uns den Randradius mit dem Bindestrich dazwischen ein, was die Eigenschaft ist, die wir verwenden, um Wählen Sie speziell den Radius oder die abgerundete Nous eines Rahmens aus. Jetzt sind sie standardmäßig auf Null, aber wir können eine beliebige Anzahl von Pixeln eingeben. Und wie Sie hier auf der rechten Seite bemerken, wenn ich es eintippe, ändert es sich automatisch. Also, wenn ich eine sehr hohe Zahl tippe, wird es so sein, gegen eine sehr kleine Zahl wie diese. Jetzt können wir auch Prozentsätze mit der Randradius Eigenschaft verwenden. Lassen Sie uns also voran und lassen Sie das bei vier Pixeln. Und jetzt möchte ich Ihnen zeigen, wie wir abgerundete Ränder für bestimmte Ecken erstellen können, was bedeutet, dass nicht alle vier Ecken abgerundet werden. Wir möchten einen abgerundeten Rahmen zu allen Titeln hinzufügen, die wir erstellt haben und ein Klassenvideo erstellen, so dass die Klasse aufrufen, verwenden wir einen Punkt gefolgt von dem Klassennamen, den wir Titel verwenden, und dann wollen wir in der Grenze Radius Eigenschaft zu füllen . jetzt Wenn wirjetztnur fünf PX tippen, werden Sie hier feststellen, dass jetzt die Grenzen für die Ernährungsinformationen und alle natürlichen Inhaltsstoffe geschaffen wurden . Es ist ein wenig schwer zu sagen, dass es sich geändert hat, weil die Hintergrundfarbe sehr ähnlich ist . Jetzt können wir auch Ränder für Onley-spezifische Ecken erstellen, indem wir ausgeben, welche Ecke wir geändert werden möchten. Um dies zu tun, beginnen wir in der oberen linken Ecke mit dem ersten Wert, gefolgt von der rechten Ecke und gehen weiter im Uhrzeigersinn. Werfen wir einen Blick auf das, was ich meine. Wenn wir also Null nach fünf eingeben, S. wird S. X jetzt feststellen, dass unsere rechte Ecke jetzt quadratisch ist. Wir wollen also, dass die Zehe auch abgerundet wird, denn wir wollen, dass beide oberen Ecken abgerundet werden. Also lasst uns fünf p x eingeben und dann machen wir 00 Also jetzt, wenn wir auf der rechten Seite sehen wird feststellen, dass die oberen beiden Ecken um sie in den unteren zwei quadratisch sind, so dass wir eine beliebige Anzahl von Kombinationen hier ändern können, um bestimmte Ecken zu runden oder lassen Sie sie Quadrat. Aber lassen Sie uns voran und lassen Sie die oberen zwei in den unteren zwei Quadraten gerundet. Nun, wenn wir nach unten scrollen, wird feststellen, dass wir dies auch auf all unseren anderen haben. Aber wieder, es ist ein wenig schwer, auf diesen beiden zu sehen, weil die Hintergrundfarbe ähnlich ist. Aber Sie haben wahrscheinlich auch bemerkt, dass der Hintergrund hier um eine Ecke hindurchgeht , weil er immer noch quadratisch ist. Um dies zu ändern, müssen wir die Randradius Eigenschaft zu allen unseren I D-Tags unten hinzufügen. Und weil wir wollen, dass sie rundherum abgerundet werden, wir nur fünf Pixel einmal eingeben. Und wenn Sie hier bemerken, die alle natürlichen Inhaltsstoffe haben sich jetzt verändert. Jetzt müssen wir es nur noch auf die anderen drei Ideen kopieren, die wir erstellt haben. Wenn wir nun einen Blick auf die rechte Seite werfen, werden die All Forever Abschnitte jetzt abgerundete Ecken haben und alles beginnt langsam zusammen zu kommen. Das ist alles, um einen Rahmenradius zu erstellen. Ich werde euch im nächsten Video sehen 24. Padding (Innenabstand): alle, Willkommen in der Padding Lektion in diesem Video. Ich werde Ihnen zeigen, wie Sie zwischen Ihren Inhalten in der Grenze Raum schaffen. Lassen Sie uns also einen Blick auf dieses Diagramm werfen, das den Unterschied zwischen Padding und Marge erklärt. Wenn Sie also hier bemerken, ist Padding der Abstand zwischen unserem Inhalt und dem Rand, während Marge der Raum außerhalb unserer Grenze ist. Daher Auffüllen keine negativen Werte haben. Also, um loszulegen, lassen Sie uns etwas Raum zwischen unserem Titel der Firma hier und dem blauen Rand, den wir in einem vorherigen Video erstellt haben . Also gehen wir hier und nach dem Grenzradius zu unserem H ein Selektor. Lassen Sie uns die Rückkehr drücken und dann geben wir die padding Eigenschaft aus. Um also die padding Eigenschaft zu definieren, müssen wir einen Wert von Pixeln hinzufügen. Also lasst uns Typhon 20 p x. Und wie ihr hier sieht, auf der rechten Seite, haben wir viel mehr Platz und es macht es einfach ein bisschen einfacher zu lesen. Nun, als wir gerade 20 Pixel hinzugefügt haben , wurden 20 Pixel auf jeder Seite um den Inhalt hinzugefügt. So oben links, rechts und unten Jetzt können wir auch speziell Polsterung Zehe auf Lee eine Seite oder bestimmte Seiten hinzufügen , wenn nötig. Also, wenn wir auf der rechten Seite sehen, wird feststellen, dass die Titel oder Untertitel wir hier haben , sie sind ein wenig knirscht in braucht mehr Platz. Lassen Sie uns also voran gehen und fügen Sie die Polsterung oben und unten sowie die linke und rechte Seite hinzu. Aber wir wollen, dass die Ober- und Unterseite etwas anders als die linke und rechte Seite sind. Also unter drei Jahren Selector, lassen Sie uns nach einer Hintergrundfarbe Eigenschaft zurückkehren, lassen Sie uns die padding Eigenschaft wieder erstellen. Also jetzt, wenn wir 10 p x erstellen, gefolgt von fünf p x. Sie werden hier feststellen, dass es 10 Pixel oben und unten und dann fünf Pixel auf der linken und der rechten Seite hinzugefügt . Wenn Sie also auf Werte in einer Reihe schreiben, wie wir es gerade getan haben, steht der 1. 1 für die obere und untere, und der zweite 1 steht für die linke und die rechte Seite. Jetzt können wir auch Padding für nur eine Seite angeben, also lasst uns voran und werfen einen Blick darauf, wie wir das jetzt machen. Unsere Ernährung Informationen Abschnitt hier ist ein wenig überfüllt in den Text in der zweiten Spalte hier scheint Teoh, aber oben neben einigen der anderen Wörter. Also möchten wir Polsterung nur auf der linken Seite hinzufügen. Also lassen Sie uns voran und tun dies, indem Sie den TD-Selektor aufrufen , der eines der HTML-Elemente war, die wir in unserer Tabelle verwendet haben. Wenn wir jetzt hier auf der linken Seite schauen, schreiben wir Polsterung Dash aus, und dann möchten Sie die Richtung ausschreiben, die Sie wollen, dass die Polsterung sein soll. In diesem Szenario möchten wir also, dass das Padding übrig bleibt. Und jetzt schreiben wir 30 Pixel aus. Also, wenn Sie es bemerken, nachdem wir 30 Pixel geschrieben haben, die ganze zweite Spalte, sprang Tex nach rechts, weil wir hier mehr Polsterung dazwischen hinzugefügt haben. Jetzt gibt es nur noch eine Sache, die ich Ihnen mit der padding-Eigenschaft zeigen möchte, wenn wir zurück zu unserem Drei-Alters-Selektor gehen , wo wir die Polsterung 10 p x und fünf p x geschrieben haben. -Werte. Also, wenn wir drei Pixel und 20 Pixel schreiben würden. Hier werden Sie feststellen, dass wir jetzt den obersten Wert geschrieben haben, gefolgt von dem rechten Wert, gefolgt von der Unterseite, gefolgt von der linken Seite. So beginnt es immer ganz oben und dann geht es im Uhrzeigersinn. Lassen Sie uns das rückgängig machen und es bei 10 Pixeln und fünf Pixeln belassen. Also haben wir bis jetzt ziemlich viel CSS behandelt. Bevor wir weitermachen, machen wir ein kurzes Quiz und dann werde ich euch im nächsten Video sehen. 25. Randlinie: alle und willkommen in der Marge Lektion. , Wenn wir uns unsere Ladung ansehen,wird Yen bemerken, dass Marge darin besteht, Raum außerhalb oder um die Elemente herum zu erzeugen. Also, wenn wir hier bemerken, ist es der Raum, der jetzt außerhalb der Grenze liegt, weil er sich außerhalb des Rahmens befindet und sich nicht auf den tatsächlichen Inhalt auswirkt. Ränder können negative Werte enthalten, daher verwenden wir normalerweise den Rand, um Platz zwischen unseren Abschnitten hinzuzufügen oder wegzunehmen. So zum Beispiel versuchen, werden wir zum Beispiel versuchen,Raum zwischen unserem Cookie und dem Abschnitt „Alle natürlichen Zutaten“ hinzuzufügen , damit sie nicht so nah beieinander sind. Gehen wir also voran und machen Sie dies, indem Sie das Bild mit unserem Bildauswahl aufrufen. Und dann lassen Sie uns die Margin-Eigenschaft jetzt eingeben, genau wie wir mit Padding Ränder abgedeckt werden könnten, um Onley eine Richtung anzugeben, oder Sie können jede einzelne Richtung auf einmal ändern. Also schauen wir uns an, was ich meine. Wenn wir den Rand eingeben und dann 20 Pixel werden bemerken, dass dieser Platz auf allen vier Seiten hinzugefügt hat. Nun, wenn wir diesen Indu-Rand löschen, Strich unten 20 Pixel bemerken, dass das nur Platz am unteren Rand des Cookies hinzugefügt. Jetzt, genau wie Polsterung. Wir können auch jede Seite aufrufen, indem wir sie in der Reihenfolge aufschreiben, beginnend mit der Spitze. Also lasst uns voran gehen und unsere Werte ausschreiben. Wir möchten 20 Pixel am unteren Rand des Cookies hinzufügen. Was wir also tun können, ist Null für den oberen Wert Null für den richtigen Wert und dann 20 Pixel für den unteren Wert. Und dann müssen wir Null für den linken Wert setzen. Also nochmals, wenn Sie hier bemerken, haben wir jetzt 20 Pixel unter unserem Cookie, was ihm ein wenig mehr Platz gibt. Nun, ein Vorteil, die Marge auf diese Weise auszuschreiben, anstatt den Rand auszuschreiben, insbesondere die eine Richtung, besteht darin, dass wir zurückgehen und unsere Marge schneller ändern können, wenn wir es später brauchen. Wenn ich mich zum Beispielspäter entscheide,muss ich etwas mehr Platz zwischen dem Cookie und unserem Slogan hinzufügen. zum Beispiel Wenn ich mich zum Beispielspäter entscheide, Ich könnte einfach hier reingehen und das ändern, ohne unser Eigentum ändern zu müssen. Das schließt also dieses Video ein. Die nächste Lektion. Wir werden behandeln, wie man die Schriftgröße ändert, damit wir unseren Slogan ein bisschen mehr hervorheben . Ich werde euch in der nächsten Lektion sehen. 26. Schriftgröße: und willkommen in der Schriftgrößen-Lektion. Nun, wenn Sie sich in unserem I D Video erinnern, haben wir ein I D geschaffen, das einzigartig ist. Zehe unseren Slogan. Also, wenn wir auf der linken Seite schauen hier wird ich d gleiche Slogan sehen. Jetzt werden wir das benutzen, um unser i D zu nennen damit wir die Größe unseres Slogans ändern und ihn etwas größer machen können. Also unter drei Jahren. Tag, lassen Sie uns unsere I D Selektor verwenden, indem Sie das Hashtag-Symbol und dann Slogan verwenden. Und dann werden wir die Schriftgrößeneigenschaft ausschreiben. Jetzt ist die Schriftgrößeneigenschaft Fonds Bindestrich Größe. Nun, um den Wert für die Schriftgröße Eigenschaft zu füllen, können wir Pixelprozentsätze verwenden, oder wir können das Wort klein, mittel oder groß verwenden. Werfen wir einen Blick darauf, was diese Worte tun. Also, wenn Sie dort bemerken, als ich klein, mittel und groß tippte , haben sie sich ein wenig verändert. Aber wir haben nicht zu viel Kontrolle über die Größe, so dass Sie zum größten Teil Pixel verwenden möchten, weil Sie die genaue Größe des Typsangeben können des Typs Lassen Sie uns also voran gehen und schreiben Sie 26 Pixel aus. Jetzt werden wir hier auf der rechten Seite feststellen, dass unser Slogan viel größer und leichter zu lesen ist . Das ist also alles, was es braucht, um die Schriftgröße eines unserer verschiedenen Elemente zu ändern, die Typ haben . Im nächsten Video. Ich werde Ihnen zeigen, wie Sie das Gewicht der Telefone ändern können. 27. Schriftart: jeder. Und willkommen zur Schriftgewichtsstunde in diesem Video. Wir werden das Gewicht oder die Dicke unseres Fonds in unserem Slogan und in unseren Titeln hier unten ändern . Also, um zu beginnen, lassen Sie uns unseren Slogan Selektor verwenden und geben Sie Spaß Dash, Warte. Und jetzt gibt es ein paar verschiedene Werte, die wir verwenden können, um das Gewicht zu ändern. Das erste, was wir dio können, ist schwächen. Geben Sie fett ein, und Sie werden es hier bemerken. Jetzt ist es mehr fett oder schwächen Typ in Boulder, oder wir können leichter eingeben. Und dann können wir auch normal eingeben Wenn wir sicherstellen wollen, dass unsere Schriftart Weg auf normal eingestellt ist . Jetzt können wir auch die Zahlen 100 bis 900 und 400 gleich normal eingeben. Lassen Sie uns also einen Blick werfen, indem Sie einfach ein paar verschiedene Werte eingeben. So macht 600 ein bisschen dicker. Wir machen 300. Wir können feststellen, dass sich einige der leichteren Gewichte nicht ändern, und das könnte an der gekämpft sein, die wir in unserem Dokument haben. Nun, später in einem anderen Video, werde ich Ihnen zeigen, wie Sie die Schriftart oder Schriftart ändern. Aber vorerst gehen wir weiter und tippen Sie einfach fett und lassen Sie unseren Slogan dabei. Jetzt scrollen wir unsere Titelklasse hier nach unten und geben wir dem ein Schriftgewicht von 300. So bemerken Sie hier, nachdem ich tippe, dass in der Schrift Gewicht ein wenig leichter wurde und nicht ganz so stark war . Und das ist es, was wir jetzt wollen. Also lasst uns weitergehen und zum nächsten Video gehen, wo wir den Text abdecken, Eigenschaft transformieren. 28. Text: alle und willkommen auf den Text transformieren Video. Jetzt ist der Text transformiert Eigenschaft ermöglicht es uns, den Text zu ändern, so dass wir Groß- oder Kleinbuchstaben groß geschrieben haben können . Lassen Sie uns also einen Blick darauf werfen, was ich meine, indem wir unseren H ein-Selektor verwenden und unter dem Padding hier werden wir Texte Strich ausschreiben, transformieren und dann Großbuchstaben schreiben. werden wir Texte Strich ausschreiben, Also, wenn Sie es hier bemerken, sieht es so aus, als hätte sich nichts geändert. Nun, das liegt daran, dass unser Text bereits groß geschrieben wurde, weil wir ihn in unserem HTML geschrieben hatten . Also lasst uns voran gehen und Großbuchstaben schreiben, und jetzt wirst du es auf der rechten Seite bemerken. Die gesamte Steuer ist jetzt in Großbuchstaben oder Großbuchstaben. Jetzt können wir uns den Kleinbuchstaben ändern und wir werden feststellen, dass alles einen Kleinbuchstaben hat . Wir können dies auch auf keine setzen, und das wird standardmäßig der Text, wie Sie den HTML-Code geschrieben haben. Gehen wir also weiter und ändern Sie dies zurück in Großbuchstaben, weil wir wollen, dass der Titel unseres Unternehmens wirklich hervorsticht. Nun, das ist alles für dieses Video. Im nächsten Video werden wir behandeln, wie Sie die Farbe des Textes ändern 29. Textfarbe: alle und willkommen zum Farbvideo und dieser schnellen Lektion werden wir die Farbe unseres Firmennamens ändern . Um dies zu tun, müssen wir die Farbeneigenschaft verwenden. Also lasst uns hier zu unserem H ein Selektor gehen und nach der Texttransformation, schreiben wir Farbe aus. Und nun, um den Wert in genau wie die Hintergrundfarbe Eigenschaft, die wir in einem vorherigen Video behandelt haben, hinzuzufügen , müssen wir eine websichere Farbe verwenden, damit wir entweder Farbnamen, Hex-Codes oder RGB-Farben verwenden können . Jetzt wollen wir nur diese Zehe weiß ändern, so dass wir entweder direkt aus der Farbe oder den Namen weiß, oder wir können hashtag f f f s ff verwenden. Also, jetzt, wenn Sie auf der rechten Seite hier sehen, wird feststellen, dass die Farbe unserer Techniker hat jetzt zu einem weißen geändert. Also, das ist alles für dieses Video. Ich werde euch in der nächsten Lektion sehen. 30. Den Text richten: jeder. Und willkommen zurück in diesem Video, wir werden den Text abdecken, ausrichten Eigenschaft. Die text align Eigenschaft ermöglicht es uns, die Texte entweder links, rechts, zentriert oder ausgerichtet auszurichten rechts, . Jetzt sollte ich Sie warnen, vorsichtig zu sein, wenn Sie gerechtfertigten Text verwenden. Ausgerüsteter Text wird am häufigsten in Zeitungen gesehen, da sie sehr kleine Spalten haben und somit Platz dazwischen schafft. Die Wörter, um die linke und rechte Seite zu machen, haben gerade Kanten. Wenn Sie also eine Zeitung wie dieses Symbol betrachten, werden Sie feststellen, dass ihre Spalten oder Dachrinnen zwischen den Spalten des Textes erstellt. Nun müssen Sie vorsichtig sein, es auf einer Website zu verwenden, ist, dass Websites oft größere Absätze und nicht kleine Spalten wie Zeitungen haben. Lassen Sie uns jetzt voran und beginnen Sie mit der Mitte, indem wir unseren Slogan und unseren Firmennamen ausrichten. Also nach Farbe in unserem H ein Selektor, lassen Sie uns direkt Text mit einem Bindestrich ausrichten zwischen und dann lassen Sie uns eng zentrieren. Also, wenn Sie es bemerken, direkt nachdem ich das Zentrum eingegeben habe, säumte sich das Firmennamen-Center. Also wollen wir auch unseren Slogan zentrieren. Also lassen Sie uns diese Zeile kopieren und diese in unseren Slogan Selektor einfügen. Nun gehen wir weiter und scrollen Sie nach unten auf unserer rechten Seite Panel und wenn wir bemerken, hier oder Ernährungsinformationen Abschnitt zentriert, ausgerichtet und ein wenig schwer zu lesen. Also links eine Zeile, die wir uns ansehen müssen, welches HTML-Element wir aufrufen müssen. Also, wenn wir uns unsere Tabelle auf der linken Seite sehen, wird feststellen, dass, wenn wir das th Tag alle diese Tags aufrufen , können wir ändern, um linke Zeile zu sein. Also unter T d hier, lassen Sie uns rausgehen th als ihr Selektor und dann Text, Bindestrich, ausrichten und dann links. Wenn wir uns das jetzt ansehen, ist es viel einfacher für mich, all den verschiedenen Wörtern in dieser Spalte zu folgen. Das ist alles für den Text Ausrichten Video Bevor wir weitermachen. Lassen Sie uns ein kurzes Quiz machen und dann besprechen wir, wie man die Schriftfamilie ändert 31. Schriftfamilie: jeder. Willkommen bei der Schrift Familie Video. Jetzt die bekämpfte Familieneigentum ermöglicht es uns, die gekämpft oder Schriftart besser Web-Seiten-Anzeigen ändern Jetzt, weil dies ein Anfängerkurs ist werde ich Ihnen nur zeigen, wie Web sichere Schriften oder Schriftarten verwenden, die bereits installiert sind auf Ihrem Computer. Also gehen wir weiter und gehen Sie hier zum Körper-Selektor und nachdem unsere Hintergrundfarbe Eigenschaft zurück drücken und dann geben wir feine Strichfamilie, gefolgt von Doppelpunkt. Und dann können wir tippen Sie jede ihrer Web sagen Schriftarten, die Sie auf Ihrem Bildschirm sehen. Also lasst uns voran gehen und Ariel austippen. Und jetzt werden Sie feststellen, dass alle Schriftarten auf unserer Website auf der rechten Seite in den Luftflug geändert haben . Nun, wenn wir unsere Schriftfamilie eingeben, wollen wir ein paar Fallback-Mittel für den Fall, dass jemand Computer nicht den ersten Pot hat. Also lassen Sie uns Komma eingeben, dann geben Sie Helvetica und dann Komma ein. Und schließlich wollen wir Sands Dash Sarah tippen, gefolgt von unserem Semikolon. Indem man San Serif als letztes gekämpft hat,stellt das sicher, dass, egal welche Schriftarten sie auf ihrem Computer haben. Indem man San Serif als letztes gekämpft hat, Es wird eine San Serifen-Schriftart wählen, so dass wir uns keine Sorgen machen müssen, dass unsere Website extrem anders aussehen wird, weil jemand einen anderen Computer hat jetzt. Wir können auch die fünf eines bestimmten Elements ändern, indem Sie die Schriftfamilie Eigenschaft nur diesem Selektor hinzufügen. Aber für den Moment, das wird dieses Video einschließen. Ich werde euch sehen und die nächste Lektion wird die Schriftart-Style-Eigenschaft abdecken. 32. Schriftart: alle und willkommen auf der Schrift Stil Video. Die Schriftartstil-Eigenschaft ermöglicht es uns, den Stil des Textes entweder kursiv oder schräg zu ändern , oder wir können es wieder normal. Also für diese Lektion möchten wir unseren Slogan kursiv ändern, damit er ein wenig mehr hervorsticht. Also lasst uns voran gehen. Und nach dem Text, ausrichten Eigenschaft Hit, Rückkehr und tippen Sie vorne Strich-Stil und dann habe ich tallit. Also, wenn wir jetzt auf der rechten Seite bemerken, ist unser Slogan jetzt eine Nacht Alec und es sieht ein bisschen anders aus als der Rest unserer Texte. Nun, wenn wir später entscheiden, dass es nicht kursiv sein soll, könnten wir dies entweder wieder normal setzen, oder wir könnten einfach löschen, da eine höhere Eigenschaft. Aber wir wollten Talic sein, also lasst uns das wieder reinlegen. nun Bevor wirnunzum letzten Video des CSS-Abschnitts übergehen, machen wir ein kurzes Quiz 33. CSS Kommentare: und herzlich willkommen zum finalen Video des CSS Abschnitts. Nun, wenn Sie sich erinnern, in der HTML-Abschnitt erholt, wie man Kommentare in unserem HTML-Code zu erstellen. Jetzt können wir auch Kommentare in unserem CSS-Code hinterlassen, aber sie verwenden ein wenig andere Syntax. Um einen Kommentar zu erstellen, beginnen Sie mit Ford Slash gefolgt von einem Arsch-Trick, und dann müssen Sie den Kommentar mit einem Arsch-Trick beenden und einen Schrägstrich leisten. Jetzt können wir so gut wie alles zwischen jedem Asterix tippen. Also lasst uns weitermachen und einen Blick darauf werfen, was wir jetzt tun können. Normalerweise beim Schreiben von CSS wird Ihr Dokument beim Schreiben von CSSlänger und länger. Wenn Sie an einer ziemlich großen Website oder Projekt arbeiten, sind Kommentare also eine gute Möglichkeit, alles auszuschneiden. Wenn Sie sich Ihren Code später ansehen, ist es viel einfacher zu finden, wonach Sie suchen. Gehen wir also weiter und wählen Sie alles aus unserer Fußzeile aus und schneiden Sie das aus und fügen Sie jetzt in den unteren Bereich ein, oberhalb unserer Fußzeile. Lassen Sie uns voran und erstellen Sie einen Kommentar mit leisten Schrägstrich ass Trick und dann lassen Sie uns Fußzeilendetails in allen Kappen eingeben , gefolgt von einem Arsch-Trick in einem anderen Ford Slash. Wenn wir also jetzt durch unser CSS scrollen, können wir schnell unsere Fußzeilendetails finden. Nun, genau wie HTML, können wir die Kommentare auch verwenden, um unseren Mantel vorübergehend zu verstecken oder zu deaktivieren. Also lassen Sie uns voran und deaktivieren Sie die Fußzeile hier und sehen, was passiert. Also jetzt, wenn Sie schauen, unsere Hintergrundfarbe der Fußzeile verschwunden. Und wenn wir das rückgängig machen und unseren Kommentar korrigieren, wird er wieder erscheinen. Also lassen Sie uns voran und fügen Sie hier auch einen Kommentar für den Firmennamen hinzu und lassen Sie uns voran und machen es alle Kappen, also ist es ein wenig einfacher, später zu finden. Und lassen Sie uns Wilmore Kommentar für unseren Firmen-Slogan erstellen. So wie die HTML-Kommentare, werden Sie feststellen, dass die Kommentare nicht auf der rechten Seite erscheinen nur für den CSS-Code selbst und für Sie später betrachten, um Ihr Leben ein wenig einfacher zu machen. Ich möchte Ihnen danken, dass Sie bis zum Ende dieses Kurses gekommen sind, aber ich empfehle Ihnen, den letzten Abschnitt zu machen, der ein abschließendes Projekt ist, um das zu üben, was Sie bisher gelernt haben. 34. Abschlussprojekt: Hey, da. Willkommen zum Abschlussprojekt. Dieses Projekt soll Ihnen dabei helfen, alle HTML- und CSS-Elemente, die wirin diesem Kurs behandelt haben,zu üben in diesem Kurs behandelt haben, Ihnen gleichzeitig die Freiheit zu geben, etwas Originelles zu erstellen. Sobald Sie diesen Link geöffnet haben, scrollen Sie nach unten, bis Sie die endgültigen Projektrichtlinien sehen, und laden Sie das Dokument herunter . Bevor wir dann zum Abschlussvideo übergehen, wird es ein Quiz geben, das alle verschiedenen Quizthemen im Kurs behandelt. Wenn Sie Fragen haben, kontaktieren Sie mich bitte über das Kontaktformular auf meiner Website. 35. Schlussfolgerungen und nächsten Schritte: Herzlichen Glückwunsch. Sie haben es bis zum Ende geschafft, grundlegende Websites für Kinder und Anfänger zu codieren. Ich möchte mich auch nochmals dafür bedanken, dass Sie sich für meinen Kurs eingeschrieben haben. Sie haben einen langen Weg zurückgelegt und haben eine Menge neuer Informationen gelernt. , Denken Sie daran,zu lernen, wie man kodiert, ist etwas, das Zeit und Übung braucht. Der einzige Weg, um wirklich besser zu werden, besteht darin, ständig zu üben und mehr Zeit damit zu verbringen , nicht nur das, was Sie gerade in diesem Kurs gelernt haben, sondern mehr zu lernen. Sollten Sie Fragen zu HTML CSS oder diesem Kurs haben? Bitte kontaktieren Sie mich über das Kontaktformular auf meiner Website. Ich wünsche Ihnen viel Glück bei Ihren zukünftigen Codierungsbemühungen.