Code ist nicht so gruselig wie Zombies: HTML und CSS für Verfasser:innen, Redakteur:innen und Anfänger:innen

1. Einführung: Hallo und willkommen zu Code ist nicht so beängstigend Zombies. HTML und CSS für Autoren und Redakteure. Dieser Kurs wird mit Ihnen über Code sprechen und wie nicht beängstigend es ist. Sie werden mit HTML und CSS auf eine Weise arbeiten, die unterstützend ist und Ihnen erlaubt, herauszufinden, was Sie tun, ohne Angst davor zu haben. Wir werden über HTML sprechen, was es ist, wie ist die Struktur des Web, und wie Sie Ihre eigenen Tags erstellen oder zumindest Ihre eigenen Tags schreiben und sie in Ihre verschiedenen Projekte aufnehmen können. Wir werden auch über CSS sprechen, das mehr über das Design und wie man es schön aussehen lässt und Ihnen hilft , das zu verwenden , um Ihre Projekte weiter zu verbessern und Ihnen zu ermöglichen, keine Angst vor Code zu haben. Auf dem Weg werden wir versuchen, einige Zombies zu töten und Ihnen helfen, ein wenig Spaß zu haben. 2. Deine Zombie-Abwehr-Tools: Hallo. In dieser Folge werden wir darüber sprechen welche Art von Tools Sie benötigen, um mit diesem Kurs zu arbeiten. Die Wahrheit ist, dass du nicht viel brauchst. Es gibt viele verschiedene Dinge, die Sie verwenden können, aber hier sind einige Empfehlungen. Zunächst einmal, Nur-Text-Editor. Wenn Sie Windows verwenden, können Sie Notepad verwenden oder wenn Sie auf einem Mac sind, können Sie auch die Textbearbeitung verwenden, obwohl Sie es im Nur-Text-Modus verwenden sollten. All das sagte, naja, Sie können keinen Klartext-Editor verwenden, es ist wahrscheinlich nicht das Ideal, nur weil es Ihnen nicht so viel Hilfe gibt, wie es könnte. Dafür empfehle ich immer noch einen Farbcodierungs-Editor. Was es tut, wird es den Code färben, so dass Sie tatsächlich sehen können , welche Arten von Code oder Codestücke, wie sie miteinander und die Tags interagieren und eine andere Farbe erhalten als sagen, Inhalt und einige dieser Dinge. Es macht es viel einfacher, zu debuggen und herauszufinden, ob Sie einen Syntaxfehler haben oder etwas passiert oder eine andere Art von Fehler haben. Für diejenigen, sie helfen Ihnen Fehler zu erkennen. Notepad ++, glaube ich, dass es plattformübergreifend verfügbar ist, aber es ist definitiv unter Windows verfügbar. Atom ist definitiv plattformübergreifend verfügbar. Ein weiteres, Brackets und dann Sublime Text, liegt wahrscheinlich ein wenig über der Schulstufe hinaus. Es ist ein großartiger Texteditor und ein sehr leistungsfähiger Texteditor und wahrscheinlich mehr als Sie brauchen. Ich würde es nicht kaufen, wenn du es nicht brauchst. Notepad ++, Atom und Brackets sind alle kostenlos zum Download und wirklich alles andere, was Sie verwenden, sollte jedes andere Codierungswerkzeug für HTML und CSS gut funktionieren. Irgendwas wirklich. Die Sache, die ich jedoch empfehlen werde, ist codepen.io. Dies ist eine Website, die kostenlos zur Nutzung verfügbar ist. Es ist einfach zu bedienen. Es wird automatisch aktualisiert, während Sie eingeben, was super hilfreich ist, wenn Sie lernen. Es kümmert sich um all die fiddly Sachen mit nur, wie man eine Seite baut und was für diese Dinge zu tun ist. Es ermöglicht Ihnen, sich nur auf den Code zu konzentrieren, auf den Sie sich konzentrieren möchten, anstatt sich mit dem ganzen Code um diesen Code kümmern zu müssen, den Sie benötigen würden, wenn Sie nur einen einfachen Texteditor verwenden und alle Klassendemos werden in codepen.io sein. Werfen wir einen Blick auf das. Wir werden auf die Einrichtung schauen, wie man ein kostenloses Konto erstellt. Es ist wichtig, Ihre Arbeit hauptsächlich zu speichern, damit Sie zurückkehren können , um es zu reparieren und auch damit zu spielen. Wenn Sie mit der Arbeit an Ihrem Projekt beginnen, ist es gut, es dort zu haben, wo Sie es im Laufe der Zeit speichern können , während Sie den Kurs durchlaufen und es dann einfach veröffentlichen können, damit andere Personen sehen und sich ansehen können, was Sie getan haben. Lass uns voran gehen und ihnen Zombies in den Hals schlagen. Dies ist die CodePen-Website. Hier unten links wirst du dich anmelden müssen. Sie klicken darauf, melden Sie sich mit E-Mail an. Dieser Prozess ist ziemlich typisch. Ich werde mich einloggen, nur weil ich bereits ein Konto habe. Loggen Sie sich ein. Das sind einige Stifte, an denen sie denken, dass Sie interessiert sein könnten. Aber was wir tun werden, ist, dass wir zu Explore gehen, wir werden erstellen und einen Stift. In CodePen ist ein Stift ein HTML-, CSS- und JavaScript-Teil einer Seite, die Sie damit spielen können. Der JavaScript-Teil ist nicht etwas, was wir brauchen, also was ich tun werde, ist, das zu minimieren. Wir werden uns momentan nicht mit CSS auseinandersetzen. Darauf kommen wir etwas später im Kurs. Ich werde das auch minimieren. Wir haben nur etwas HTML. Ich werde hier nur ein kleines kleines Ding schreiben. Hallo Welt. Es ist eine Standardmethode, um zu beginnen, eine Programmiersprache zu lernen , ist Hallo Welt zu tippen und es auf dem Bildschirm auszugeben. Wie Sie sagen können, wie ich tippte, kam es heraus. Codepen.io ist nur ein wirklich großartiges Werkzeug zu bedienen, wirklich einfach und hoffentlich wird Ihr Leben viel einfacher machen, wenn Sie versuchen, entlang zu folgen. Das sind die Werkzeuge. Danke. Lasst uns zum nächsten Abschnitt gehen. 3. Warum Zombies HTML hassen: Willkommen zurück zu Code ist nicht so beängstigend wie Zombies. Wir werden einen Blick darauf werfen, was HTML ist und warum Zombies es so sehr hassen. Zuallererst, was ist HTML? Es ist eine Programmiersprache, aber wirklich, anstatt so viel Programmierung oder Verarbeitung bereitzustellen, bietet es Struktur für Dokumente. Ich mag es als das Skelett Ihrer Seite oder das Skelett Ihrer Website-Seite zu betrachten. Es ermöglicht Ihnen, die Seite zu bauen und haben verschiedene Arten von Flash und verschiedene Arten von Farben und all diese Arten von Dingen, die in eine Website-Seite gehen, aber es muss an etwas hängen, und HTML ist, dass hängen Punkt. Es enthält Informationen über den Inhalt des Dokuments. Nun gibt es etwa vier Teile zu einem HTML-Element, es ist eine einzige Einheit von HTML, vier Teile: öffnende Tag, Attribute, Inhalt und ein schließendes Tag. Das Portfolioöffnungs-Tag verwendet die eckigen Klammern, kleiner als und größer als Zeichen, um das Tag abzulegen Daher beginnt es mit einem Kleiner-als-Zeichen, und das Tag selbst endet mit einem Größer-als-Zeichen. Zum Beispiel sieht der Absatz des öffnenden Tags wie folgt aus, das ist ein öffnendes Absatz-Tag. Sie haben das wahrscheinlich bereits im letzten Video gesehen, als ich Codepen.io demonstrierte, aber das ist ein öffnendes Absatz-Tag. Als nächstes haben wir Attribute. Dies ist etwas, das wir später ein bisschen mehr bekommen, aber wollen es nur hier vorstellen. Es sind Dinge über die Tags. Sie kommen direkt nach dem Namen des öffnenden Tags und vor seiner schließenden Winkelklammer, so dass sie für zusätzliche Informationen, Identifikation oder Optionen verwendet werden , gibt einige andere Möglichkeiten, Tags zu verwenden oder hilft dem Browser zu wissen, wie dies bestimmten Tag verwendet wird. Das Klassenattribut hilft uns, vor allem, wenn wir zu CSS kommen, es definiert eine Gruppe von Elementen, Art von HTML-Inhalt. Es muss nicht besonders das gleiche Element sein, aber es könnte eine Klasse von Elementen sein, die auf die gleiche Weise handeln oder dasselbe tun oder den gleichen Aspekt haben. Könnte sein, dass alle diese Text gelesen haben oder alle eine bestimmte Einstellung des Margens zwischen ihnen haben, so etwas. Es könnte wirklich fast alles sein, aber wenn Sie eine Klasse zu einem Element hinzufügen, geht es so. Es ist das öffnende Tag des p-Tags. Dann vor dem schließenden Winkel Klammer, haben wir Klasse gleich und dann „lernen“. Hoffentlich lernen Sie nicht in „ Anführungszeichen “, aber die Klasse hat einen Wert des Lernens, und es könnte mehrere HTML-Elemente auf der Seite geben, die diese Klasse hatte. Es gibt viele andere Attribute, die wir verwenden können, und wir werden später mehr darüber sprechen. Nun, das dritte Ding oder dritte Teil eines HTML-Elements ist wahrscheinlich das wichtigste, es ist der eigentliche Inhalt. Es sind die Informationen, die hineingehen. Es ist zwischen den öffnenden und schließenden Tags. Oft ist dies Text, aber es könnte auch andere Elemente sein. Oft sind es auch andere Elemente. Einige Elemente haben Einschränkungen, dass sie nicht in anderen Elementen sein können, hängt von der bestimmten Aufgabe ab, die das Element tut und was dafür geeignet ist. Einige Elemente können in einigen anderen Elementen einfach nicht existieren. Andere Elemente existieren nur innerhalb anderer Elemente. Es hängt wirklich nur von dem bestimmten Element ab, mit dem Sie arbeiten. HTML ist auch ziemlich verzeihend. Selbst wenn Sie es total durcheinander bringen, versucht der Browser nur sein Bestes, um zu tun, was er denkt, es sollte. Oft macht es einen guten Job. Manchmal ist das gut und dass es nicht kläglich scheitert. Es ist jedoch schlecht, wenn ein Browser es nicht zulässt, aber der andere tut es, und Sie testen nicht in diesem Browser. Ein guter Code ist die beste Option für eine konsistente Vorschau von Seiten in mehreren Browsern. schließende Tag sieht es ähnlich wie das öffnende Tag aus, außer es hat einen Schrägstrich davor. Das Absatz-Tag hat einen Schrägstrich p. Einige Tags werden als void-Tags bezeichnet und haben kein schließendes Tag. Insbesondere sind dies Bildbruch und HR oder horizontale Regel, also IMG, BR und HR. Dies sind die wichtigsten, über die wir wahrscheinlich in diesem Kurs sprechen werden. Aber es gibt auch ein paar mehr als das, aber die meisten Tags haben ein schließendes Tag. Normalerweise ist der einzige Grund, warum sie kein schließendes Tag haben, weil sich der Inhalt des Tag-Servers im öffnenden Tag befindet, anstatt etwas dazwischen zu haben. Zum Beispiel wird ein Bild schließlich dorthin gelangen, aber Sie haben ein Quellattribut, das Ihnen sagt, wo das Bild gefunden werden kann und das Bild es nur zeigt, so dass es keinen Sinn macht, unbedingt ein öffnendes und schließendes Tag für -Bilder. Hier ist ein Beispiel für ein Absatz-Tag. Einbringen eines Attributs sowie das Öffnen, Schließen von Tags und Inhalten, so haben wir mit einem p-Tag mit einer Klasse des Lernens beginnen, wo das Töten von Zombies Spaß macht. Das ist unser Inhalt und dann Schrägstrich p ist unser schließendes Tag. Verschachtelung. Eine weitere wichtige Sache bei HTML-Tags ist, sicherzustellen, dass Sie öffnende und schließende Tags richtig verschachtelt haben. Zum Beispiel ist dies falsch. Sie haben Tag 1 und Tag 2, beide geöffnet und dann Schrägstrich Tag 1, so dass Tag 1 geschlossen wird, bevor Tag 2 geschlossen wird. Das ist falsch. Der richtige Weg, dies zu tun oder es richtig zu verschachteln, würde Tag 1 öffnen, dann Tag 2 öffnen und Tag 2 schließen und Tag 1 schließen. Das sind natürlich keine tatsächlichen HTML-Tags, sie sind nur ein Beispiel, um die Verschachtelung leicht zu zeigen. Zombie-Familien. Eines der wichtigen Dinge beim Verschachteln ist, dass wir es Familien nennen werden. Wenn Element A vollständig von Element B eingeschlossen ist, dann wird A als Kind von B bezeichnet, und B ist ein Elternteil von A, so dass Sie Kinder und Enkelkinder haben können. Viele Male, besonders wenn wir zu CSS kommen, werden wir viel über diese Beziehungen sprechen. Wenn jedoch ein Element ein anderes verursacht, ist das erste Element das übergeordnete Element und das eingeschlossene Element ist das untergeordnete Element. Zum Beispiel haben wir Zombies haben keine Familie. Ich, das Kursiv-Tag, das wir bald bekommen werden, ist ein Kind des p-Tags. 4. Zombie-Content-Blöcke – Teil 1: Hallo und willkommen zurück zu Code ist nicht so beängstigend wie Zombies. Im Moment werden wir uns Zombie-Blöcke und andere Blocks von Inhalten ansehen. Zuallererst haben wir Absatz-Tags, die über die im letzten Abschnitt gesprochen wurden. Alle Absätze sollten, überraschend, wie es auch sein mag, in Absatz-Tags enthalten sein. Es ist die grundlegendste Einheit von Text und 90 Prozent des Textes werden in Absatz-Tags sein, obwohl nicht alles, natürlich, 10 Prozent. Offensichtlich wird es nicht sein. Diese können jedoch mit eingerückten Text formatiert werden oder einen Wagenrücklauf oder an einer Linie zwischen den beiden haben, je nachdem, was Sie mit Ihrer Website tun möchten. Wahrscheinlich eher im Web, neigt es dazu, eine leere Zeile zwischen Absätzen zu sein, aber es gibt einige Ausnahmen davon. Ein weiteres Tag, über das wir reden können, ist das Break-Tag. Nun, die meiste Zeit, die Sie nicht möchten, dass Text hart umbrechen, Sie möchten, dass er innerhalb seines Containers fließt. Denn vor allem mit Responsive Design, werden Sie nicht genau wissen, wie breit oder hoch oder was auch immer der Container für den bestimmten Text ist. Wenn Sie einige harte Renditen machen, wird es funky aussehen wenn jemand auf einem Bildschirm schaut, der zufällig eine andere Größe hat als Ihre, was fast sicher wegen der Verbreitung von Geräten mit unterschiedlichen Bildschirmen wahrscheinlich ist Größen und Desktops, und wer weiß, welche Größe die Breite auf dem Desktop sein wird, usw. Es wird jedoch manchmal geben, wenn Sie eine Adresse oder einen ähnlichen Inhalt formatieren müssen , wo Sie keine Zeilen zwischen ihnen wollen. Wenn Sie beispielsweise eine leere Zeile zwischen Absätzen erstellt haben einen anderen Absatz erstellen, wird es weiterhin Leerzeilen zwischen den Dingen erstellen. Das sieht nicht gut aus, besonders bei einer Adresse oder anderen Arten von Inhalten wie diesem. Was Sie dann tun können, ist ein Break-Tag zu verwenden, und anstatt eine Zeile zu überspringen, können Sie einfach direkt zur nächsten Zeile gehen. Nun, es gibt oft Zeiten, in denen wir mutig gehen müssen , wo kein Zombie-Widerstandskämpfer jemals zuvor gegangen ist, was hier drin der kühne Tag ist. HTMLs meist strukturelle, die meisten Ästhetik gehen mit CSS, aber Sie können auch angeben, was fett oder stark betont werden soll. Zum Beispiel haben wir das b -Tag, das ist das fett Tag, das ist, was wir hatten es über HTML4, wenn es zusammen mit XHTML kam. Als HTML und XHTML zusammenkamen, wollten sie sehr streng sein, wie welche Tags sie verwendet haben. Sie brachten das starke Tag ein, das im Grunde das fett Tag ist, aber stark gekennzeichnet ist. Theoretisch gibt Ihnen ein wenig mehr Informationen als nur der Buchstabe b über den Inhalt, der da drin ist. Aber stark dauert länger, um zu tippen. Ich bin in der kürzeren Eingabe ist besser Lager. Schließlich sagten sie im Grunde, dass b und stark gleichwertig sind und können Sie sie so verwenden, wie Sie es für richtig halten. Sowohl b als auch stark werden den Inhalt fett machen. Es gibt einen ähnlichen Kampf mit i. Ich wäre das Kursiv-Tag. An einem Punkt wollten sie etwas Besseres machen und so kamen sie mit dem em-Tag zur Betonung, was für mich nicht wirklich Sinn macht, weil es ungefähr die gleiche kryptische Ebene wie ich ist und mit der CSS-Größeneinheit verwechselt werden kann. Wir werden in Kürze dorthin kommen. Aber ja, es scheint einfach nicht so zu sein, als würde es wirklich helfen. Schließlich haben sie sie auch gleich gemacht, insbesondere HTML5. Sowohl i als auch m -Tags machen den Inhalt kursiv. Schauen wir uns einen Code an. Ok. Hier werden Absatz-Tags, Kursiv-Tags und fett formatierte Tags angezeigt. Wir haben hier ein P-Tag. Endet mit einem schließenden p-Tag. Hier haben wir ein em-Tag. Sie können auch ein i-Tag machen. Hier ist ein Beispiel. Hier sind die Beispiele hier unten. Nicht, weil Zombies nicht kuschelig überraschend sind, wie es auch sein mag. Da ist die Kursivschrift. Strenge Mortis wirkt sich wirklich auf die Flexibilität aus. Wenn du davon überrascht bist, da ist ein Zombie auf deinem Kopf. Das ist mutig oder stark. Das ist ein mutiger. Dann haben wir hier ein Beispiel dafür, was nicht zu tun ist. Dies ist im Grunde sowohl unsachgemäße Verschachtelung als auch falsche End-Tags. Wir haben das em-Tag und das i-Tag zusammen abgestimmt, aber während sie dasselbe tun, interagieren sie nicht unbedingt richtig. Dieser Schrägstrich i schließt dieses m nicht, deshalb ist Zombie immer noch kursiv dargestellt. Der Schrägstrich stark schließt das p-Tag nicht wirklich, aber das ist schwieriger zu sehen, weil dort auch die Seite endet. Aber ja, das ist der Code dort für Absätze, kursiv und fett. 5. Zombie-Content-Blöcke – Teil 2: Als nächstes müssen wir über Links sprechen. Das a oder anchor -Tag wird verwendet, um Hyperlinks zu erstellen, href Attribut ist, was die Ziel-URL enthält, und der Inhalt oder der Linktext ist der Text zwischen den öffnenden und schließenden Tags. Hier haben wir eine Öffnung ein Tag, dann haben wir ein href Attribut Link zu https://undead.institute, die meine Website für Zombie-Themed Web Development Bücher ist, wenn Sie jemals tiefer gehen wollen, gibt es einen Ort zu gehen. Dann haben wir den Link-Text, das ist mehr Zombie Web Development, und die Schließung eines Tags. Eine Sache, bei der Sie vorsichtig sein möchten, sind absolute versus relative Verbindungen. Links mit http://oder https://sind in der Regel absolute Links, und solange die Seite funktioniert, sollte der Browser dorthin gelangen. Wenn Sie die http://oder https://nicht enthalten, handelt es sich um relative Links, der Browser davon aus, dass sie sich im gleichen Ordnerpfad oder auf demselben Server wie diese aktuelle Seite befinden. Wenn Sie zu https://google.com gehen, wird es auf eine andere Webseite gehen, google.com erhalten und es Ihnen zurückbringen. Wenn Sie nur google.com eingeben, wird es nach einer Datei namens google.com suchen, die im Allgemeinen nicht ganz so hilfreich ist. Lassen Sie uns noch ein paar LIVE CODING, hier haben wir unser Tag mit href, undyinglove.org, unsterbliche Liebe. Wir haben ein paar Break-Tags, nur um es zu brechen, und hier haben wir einen E-Mail-Link. E-Mail-Links funktionieren ziemlich ähnlich wie normale Textlinks, aber hier beginnt man einfach mit mailto: statt http://erlaubt es nie. Wenn dann jemand darauf klickt, öffnet er den Standard-E-Mail-Client auf diesem Computer. Sie können auch Telefonverbindungen einrichten, so Tele- und SMS-Links, die letzten zwei besonders nützlich auf Telefonen, sondern können auch überall verwendet werden. Das ist, wie Sie einige Links machen. Oft, wenn wir Text für das Web erstellen, ist es wichtig, es zu skimmbar zu machen oder es den Menschen einfach zu machen, es einfach durchzublättern, eine der besten Möglichkeiten, dies zu tun, ist durch Überschriften und Unterüberschriften. HTML beginnt mit <h1> bis <h6>. Es ist wichtig, leere Überschriften-Tags zu vermeiden, so wie jeder, der ein sehender Benutzer ist, eine Seite durchscannt , wobei seine Augen von Überschrift zu Überschrift springen , versuchen, den Inhalt zu finden, den sie suchen. Außerdem werden Screenreader Benutzer mit ihren Ohren scannen und zwischen Überschriften springen, um zu versuchen, was sie suchen, leere Überschriften können sie besonders werfen, auch wenn sie nicht werfen zitierte Benutzer so viel. Überschriften, jede wird in der Regel Ihre größte Überschrift sein, aber es enthält normalerweise den Titel der Seite, so dass Sie springen, wollen nicht oft verwenden, es sei denn, Sie wissen, dass es nicht der Titel der Seite ist. Die nächste ist, und Sie sollten beginnen, Ihre Inhalte da draußen zu brechen, , und weiter,,, mehr Unterüberschriften, oft, wenn Sie hier zu bekommen, haben Sie in der Regel einige Content-Probleme, Sie könnten , um sich das wirklich anzusehen, und wenn Sie dazu kommen haben Sie fast definitiv einige Probleme mit dem Inhalt. Hier haben wir HTML-Überschriften, Sie können sehen, wie Sie gehen in hs, ist die größte hier, dann, 3, 4, 5, und 6, oder PFC Wiggins müssen zu einem zufälligen Streifenhörnchen offenbar berichten und wie Sie sehen können; & lt; h1> </h1> Ein letzter Abschnitt, den wir hier behandeln werden, ist über Zitate. Es gibt zwei verschiedene Tags, die Sie für Anführungszeichen in HTML verwenden können. Inline-Anführungszeichen, wir behandeln es mit einem, Sie können auch tatsächlich Anführungszeichen verwenden. Aber wenn Sie zufällig in einer Kultur sind, die keine Anführungszeichen verwendet , wie Amerikaner dazu neigen, verwendet die französische Sprache zum Beispiel eine andere Art von Anführungszeichen, aber wenn Sie ein Tag verwenden, hat es zwei große Vorteile, eine davon ist, dass es ein cite Attribut gibt, mit dem Sie eine URL platzieren können , von der aus Sie das Zitat erhalten haben, damit Benutzer auf diesen Inhalt zugreifen können. Es ermöglicht Ihnen auch Vielseitigkeit in Styling-Zitate, vor allem, wenn Sie die Doppelpfeil-Anführungszeichen oder guillemet benötigen, Ich denke, es heißt, die in Französisch verwendet werden. Sie können diese Änderungen mit CSS vornehmen, anstatt die Seite neu schreiben oder die Seite ändern zu müssen. Es gibt auch Block-Anführungszeichen, die ein eigenes Tag von hat <blockquote>, überraschend genug. Das ist für sehr lange Zitate, die sich natürlich gegen die stinkenden Zombies durchsetzen werden, und standardmäßig wird es das Zitat von anderen Texten absetzen, es einrücken und ihm etwas Platz darüber und darunter vom umgebenden Text geben. Sie können auch das cite Attribut für ein Blockquote verwenden, aber es gibt auch zitieren Element ist, dass mit einem Blockquote, bezieht sich auf ein kreatives Werk und muss entweder den Titel, den Autor oder die URL dieses Werks enthalten . Das heißt, eine andere Web-Standards-Agentur sagt, dass Sie niemals den Autor in Zitierelement verwenden sollten, verwenden Sie Ihr bestes Urteil. Schließlich haben wir hier zwei Beispiele für Zitate, Alice in Zombieland, mit dem cite Element, mit und das ist, wie Sie mit Anführungszeichen spielen und wirklich beginnen, die Arten von Inhalten innerhalb Ihrer Website zu markieren. 6. Auflistung der Schwächen von Untoten: Alles klar, willkommen zurück bei Code ist nicht so beängstigend wie Zombies. Hier sprechen wir über Listen und Auflisten der Schwächen der Untoten, und alles, was ihr auflisten wollt. Zuerst, Organisieren von Zombies. Listen sind also eine gute Möglichkeit, Ihre Inhalte weiterhin skimmabler zu machen. Sie ermöglichen es Ihnen, einige Dinge auszurichten, und es einfacher für Menschen, die Inhalte herauszuholen, die wichtig sind. HTML selbst hat drei Arten von Listen. Es gibt eine geordnete Liste, eine ungeordnete Liste und eine Beschreibung oder Form der Definitionsliste. Alle von ihnen bestehen aus zwei oder mehr Elementen. Beschreibungsliste besteht aus drei, während geordnete und ungeordnete aus zwei separaten Elementen bestehen. Zum Beispiel, wenn wir eine geordnete Liste tun, wir beginnen mit einem ol. Dann haben wir unsere erste Listenposition, unsere zweite Listenposition, drittens , wie viele wir haben, und schließlich, wir enden mit einem schließenden ol. Mit der Orderliste können Sie tatsächlich die verwendeten Ziffern ändern, Dezimalstellen sind die Standardwerte, aber Sie können auch Kleinbuchstaben wie a, b, c, d tun. Sie können römische Ziffern, i, ii, iii, iv usw. Dezimalstellen sind die Standardwerte, aber Sie können auch Kleinbuchstaben wie a, b, c, d tun. Sie können römische Ziffern, i, ii, iii, iv usw. auch Großschreibung Versionen von diesen. Ein Großbuchstabe A für den Typ ist also ein Großbuchstabe, und das Großbuchstabe I ist römische Ziffern. Sie ändern auch den Anfang der Zahlen, indem Sie das Startattribut verwenden, und setzen Sie es einfach auf den Zahlenwert, mit dem die Liste beginnt. Um die Liste bei sieben zu beginnen, müssten Sie nur Anfang gleich Anführungszeichen sieben haben. Sie können auch ungeordnete Listen tun, und sie sind der geordneten Liste sehr ähnlich, außer sie verwenden eine ul anstelle eines ol, aber sie verwenden immer noch beide das gleiche li. Zum Beispiel beginnen wir mit einem ul hier, wir haben unsere li Artikel, genau wie wir mit einem ol tun, und wir haben so viele von denen, wie wir brauchen, und dann schließen wir es mit einem ul. Beschreibungslisten sind ein wenig anders. Sie haben eine Liste von Begriffen und Beschreibungen, so dass Sie zwei verschiedene Dinge haben, die Sie hören. Vor HTML 5 wurde es die Definitionsliste genannt, aber sie änderten es in eine Beschreibungsliste um den Umfang zu erweitern, und Sie verwenden es für weitere Dinge. Das äußere Element ist dl für die Beschreibungsliste, der angegebene Begriff oder das Element für den Begriff ist dt, und das Element für die Beschreibung ist dd. Es funktioniert ähnlich. Wir beginnen mit einem dl, wir haben ein dt, wir haben ein dd für was auch immer die Beschreibung sein sollte. Dann können wir noch ein dt, dd, dt, dd, etc machen und dann mit unserem schließenden dl abschließen. Werfen wir einen Blick, wie das funktionieren würde. Zuallererst werden wir uns Ols ansehen. Also hier wieder, wir haben unsere ol, wir haben unsere Li. Wenn wir sagen wollten, beginnen Sie mit sieben, können wir das tun. Sollte in Anführungszeichen stehen, die auch ohne sie funktionieren könnten, so dass Sie sehen können, dass es mit sieben beginnt. Ich könnte auch Typ gleich i tun, und Sie können sehen, dass ich bei sieben beginne und es beginnt mit der siebten römischen Zahl, oder direkt dort. So haben wir die ol und wir haben einen Start und Typ, Sie können damit spielen. Als nächstes haben wir unsere ungeordnete Liste, die wieder eine ul und li hat. Sie können auch den Typ ul ändern. Zum Beispiel kann ich in ein Quadrat setzen und es macht quadratische. Disk ist die normale Kugel, und Sie können diese bei Bedarf ändern. Umzug auf Definitionslisten oder Beschreibungslisten, so haben wir hier wieder, unsere dl, dt von einem Walker, dd des Zombie noch gehen, shuffle. Wenn Crawler, seine Definition oder Beschreibung und natürlich PFC Wiggins, unser unerschrockener Freund, und das ist es für Listen. 7. Ein Bild ist tausend Stöhnen wert: Eines der Dinge, die Sie wahrscheinlich in Ihre Artikel setzen wollen und so sind Bilder. Zuallererst werden Bilder mit dem HTML-Bild-Tag hinzugefügt. Es ist ein Lücken-Tag, also gibt es kein schließendes Tag. Sie würden das Attribut source verwenden, um dem Browser mitzuteilen, von wo das Bild geladen werden soll. Dann gibt es auch Alt-Attribut, das verwendet wird, um eine Beschreibung des Inhalts zu geben, ist besonders gut für Bildschirmlesegeräte und Suchmaschinen, weil sie einfach nicht auf den Inhalt des Bildes sonst zugreifen können. Aber es ist wichtig, dass Sie den gesamten Text hinzufügen, um ihn jedem zugänglich zu machen , der wenig oder gar keine Vision hat. Sie haben Ihr Bild-Tag, Ihr Quellattribut, in diesem Fall ist zombie.png. Wenn es sich in einem anderen Ordner befand, würden Sie mit dem Ordner beginnen, oder dem Pfad zu diesem Ordner, dann zombie.png. Aber wenn es sich im selben Ordner befindet, dann können Sie das einfach verwenden. Sie können auch etwas von anderswo mit der vollständigen URL ziehen, wenn Sie das auch hatten, der Alt-Text wird nur Text über das Bild sein. In diesem Fall sucht ein einsamer Zombie nach seiner Horde. Es ist auch wichtig zu wissen, dass Sie nicht wie Bild oder Grafik sagen wollen , weil das bereits inhärent ist, dass es ein Bild ist. Ein Screenreader wird sagen, dass es sich um ein Bild handelt, bevor es den gesamten Text liest. Sie machen eine Menge Dinge mit Größe auf Bildern. Es gibt Attribute für Höhe und Breite, die Sie festlegen können , um die Größe zu bestimmen. Es ist im Allgemeinen besser, es in CSS zu tun, was wir schließlich erreichen werden, aber Sie können es auch in Ihrem HTML tun. Wenn Sie versuchen, ein Bild mit dem Attribut height width zu vergrößern , verschlechtern Sie die Qualität, da Sie die Informationen über einen größeren Bereich verteilen . Es ist wie wenn Sie einen gegebenen Widerstand haben, so dass für diese Zombies und Sie sie zu dünn oder gegen die Zombie-Horde zu verbreiten, werden sie nicht so effektiv sein. Sie werden es nicht so gut tun, weil sie zu dünn sind. Sie können das Bild verkleinern und wir lassen die Qualität intakt. Das Problem wird immer noch die gleiche Dateigröße haben. Wenn Sie 10 meg Bild haben und Sie es nach unten verkleinern, so dass es nur wie ein 100 Pixel von 100 Pixel ist, wird es wirklich klein aussehen, aber es wird immer noch die ganzen 10 Megs zum Download brauchen, um richtig aussehen. Es ist oft am besten, die genaue Höhe und Breite des Bildes zu haben, das Sie verwenden, um über Downloads oder eine geringere Qualität zu verhindern. Wenn Sie die Höhe und Breite nur zufällig ändern, ohne das Seitenverhältnis beizubehalten oder dies proportional zu tun, wird es das Bild zerquetschen oder strecken, und es sieht einfach nicht gut aus. Es sei denn, es ist ein Zombie, dann kannst du sie quetschen und strecken, was du willst. Wie ich bereits sagte, sollte das Bild idealerweise seine natürliche Größe haben, um die beste Balance zwischen kleinster Dateigröße und bester Qualität zu erhalten . Lassen Sie uns also über die verschiedenen Arten von Bildern sprechen, die Sie auf Websites verwenden können. Zunächst einmal gibt es GIF, es steht für Graphic Interchange Format. Ich erkläre es GIF. Viele Leute im Internet würden sagen, dass ich falsch liege, aber ich würde sagen, dass es nicht jraphisch ist. Es ist also nicht JIF, es ist GIF, aber es liegt an dir, auf welcher Seite du in diesen Kampf fallen willst. GIFs funktionieren in allen Browsern. Sie erlauben Animation, was einer der Gründe ist, warum sie noch da sind. Viele der Animationen, die Sie im Web sehen sind oft in GIF vor allem bis vor kurzem. Obwohl es viele neue Dinge gibt, die mit CSS und Animation vor sich gehen , die es ermöglichen, nativ im Gegensatz zu nur in GIFs gemacht zu werden. GIFs ermöglichen auch Transparenz, was hilfreich ist, aber die Transparenz ist nicht immer so gut. Manchmal ist es ein wenig knusprig oder zeigt mehr von der Kante, als Sie wollen. Es handelt sich um ein verlustbehaftetes Format, das bedeutet, dass beim Speichern als GIFs Informationen verloren gehen. Es behält also nicht alle Informationen. Sie erniedrigen die Qualität ein wenig. Aber der Vorteil, den Sie bekommen, ist, dass Sie eine kleinere Dateigröße erhalten, was weniger Zeit zum Herunterladen benötigt. So ist es ausgewogen zwischen Qualität oder Qualität des Bildes und Größe des Bildes. GIF funktioniert besonders gut mit großen Farbmustern, wie Logos oder Linienbilder. JPEG steht für Joint Photographic Experts Group. Es funktioniert in allen Browsern, erlaubt keine Animation, hat keine Transparenz dafür. Es ist auch eine verlustbehaftete Komprimierung. Aber es ist super toll für Fotografien und macht viel bessere Arbeit, sie zu komprimieren als ein GIF tut, und so scheint es wirklich in Fotografien und anderen komplexen Bildern. PNG, steht für Portable Network Graphics. Es ist der neueste der Standards, funktioniert aber immer noch und fast alle Browser. Sie müssen ziemlich weit zurück gehen, um einen Browser zu finden, der nicht funktioniert. Es erlaubt keine Animation, aber es ermöglicht qualitativ hochwertige Transparenz. Wenn Sie jemals Transparenz hinter einem Bild benötigen, möchten Sie ein PNG verwenden. Es ist eine verlustfreie Kompression, zumindest am PNG-24, die PNG-8 verlustbehaftet. Das Tolle daran ist, dass Sie alle Informationen dort aufbewahren. Sie komprimieren es einfach in eine kleinere Box, im Gegensatz dazu, einige der Informationen loszuwerden, so dass es in kleinere Boxen passt sozusagen. [ unhörbar] Algorithmen sind besonders gut für die gleiche Sache, die GIFs gut sind. Dinge mit großen Teilen von Farbe, Logos, Linienkunst, diese Dinge, aber es kann auf alles verwendet werden. SVG ist wahrscheinlich der neueste dieser Standards, oder zumindest diejenigen, die standardisiert werden wollen. Steht für skalierbare Vektorgrafiken. Es funktioniert nativ in den meisten Browsern, aber Sie können es auch innerhalb eines Image-Tags in älteren Browsern verwenden , so dass es auch dort funktioniert. Sie können es auch als unkompliziert in moderneren Browsern verwenden, aber nativ hat manchmal eingebettete Vorteile wie den Zugriff auf CSS und solche Dinge. Es unterstützt Animationen und Animationen über CSS. Es unterstützt auch Transparenz und skaliert ohne Qualitätsverlust nach oben und unten. SVG-Grafiken sind das, was man Vektor nennt. Sie sind wieder ähnlich, mehr Linie Kunst und Logo Dinge. Sie können sie jedoch ohne Qualitätsverlust nach oben und unten skalieren, da sie auf Mathematik und nicht auf Pixeln basieren. Im Allgemeinen eine sehr kleine Dateigröße, verwendet es Tags ähnlich wie HTML, was als ich davon sprach, dass es nativ ist. Ich spreche davon, die Tags direkt in Ihrem HTML zu verwenden, anstatt eine SVG-Datei über ein Bild-Tag oder so etwas zu importieren. Wieder, am besten mit Linienkunst, Logos, Icons, diesen Dingen. Jetzt gibt es ein anderes Tag, das wir manchmal für Bilder verwenden, nicht direkt für Bilder, sondern in der Regel umgebende Bilder. Es nennt sich das Figur-Tag. Es ist hauptsächlich ein Containerelement für Grafiken, Tabellen, Diagramme, all diese Dinge. Es sollte in sich geschlossen sein, sich aber auf den Hauptinhalt beziehen. Ich meine, das ist besonders das, was Sie mit verschiedenen Papieren und Dingen sehen würden , wo Sie eine Zahl haben würden , die die Daten unterstützt oder die Daten zeigt oder die Schlussfolgerungen unterstützt, et cetera. Das Figurenelement lässt das zu. Es ist am besten für beschreibende Informationen verwendet, unterstützt den Text um ihn herum. Ein anderes Element, die Feigenbeschriftung, ermöglicht es Ihnen, der Figur eine Beschriftung hinzuzufügen. Hier ist ein Live-Image-Tag. Also haben wir ein Bild, wir haben unsere Quelle. Von hier finden wir es. Wir haben alle Text. Wenn wir dies in eine Figur setzen wollten, würden wir einfach das Figur-Tag hinzufügen es mit der Figur schließen. Dann, wenn wir sagen wollten, fügen Sie eine Beschriftung, wir können alte Zombie in einem Hut machen , und dann haben wir eine Figur. Gehen wir zum nächsten Video über. 8. Zombies mit Cascading Style Sheets einkleiden: Jetzt kommen wir zu CSS. CSS steht für Cascading Style Sheets. In unserem Zombie [unhörbar] HTML wird das Skelett und CSS ist das Fleisch und Kleidung. HTML ist die Struktur und CSS ist das Aussehen und Gefühl, seine Farben, seine Schriften, es ist, wie die Dinge dargestellt werden. Es stilisiert Text, sorgen für ästhetische Veränderungen. Es wird durch die Dokumente kaskadiert. Cascading Stylesheets, mit denen untergeordnete Elemente einige der Eigenschaften ihrer übergeordneten Elemente erben können, sodass Sie Farben und Größen und einige dieser Dinge erben können. CSS kommt in einer Liste von Regeln. Eine Regel besteht aus einem Selektor und einem Deklarationsblock. Selektoren wählen, für welche Elemente die Deklarationen gelten, und die Deklarationsblöcke legen die Änderungen fest oder sprechen darüber, was geschehen soll. Zum Beispiel ist dies kein echter CSS-Selektor, aber so wird es aussehen. Sie haben zuerst Ihren Selektor, dann haben Sie eine öffnende geschweifte Klammer, dann haben Sie die Deklaration und dann einen Wert und dann eine schließende geschweifte Klammer. Der Doppelpunkt und das Semikolon sind wichtig. Stellen Sie daher sicher, dass Sie diese angeben. Lassen Sie uns mehr über die Auswahl sprechen. Selektoren kommen in drei Hauptgeschmacksrichtungen. Sie haben Klassen, IDs, Elemente. Sie können diese kombinieren, um so genannte abhängige Selektoren zu erstellen. Dies sind Nachkommen auf die gleiche Weise, wie ein untergeordnetes oder untergeordnetes Element eines übergeordneten Elements ist. Für Klassen verwenden Sie ein Klassenattribut, für HTML-Elemente, und in CSS müssen Sie einen Zeitraum davor haben, zB Periode Zombie-Schule. IDs; Sie werden das ID-Attribut verwenden und nur einmal pro Seite angezeigt und in CSS benötigen Sie einen Hashtag vor ihnen. Hashtag einzigartiger Zombie. CSS-Deklarationen sind in der Regel Schlüsselwort- oder Wertepaar durch Doppelpunkt getrennt und verwenden ein Semikolon, um das Ende anzugeben. Sie können mehrere Deklarationen pro Regel haben und geschweifte Klammern den Deklarationsblock umschließen, um den Anfang und das Ende des Blocks anzuzeigen. Zum Beispiel können wir mit dem p-Tag die Farbe auf gelb-grün setzen und dann wird der gesamte Absatztext in ein augenbräunendes kränkliches gelbgrün geändert . Hier haben wir einige HTML an den Seiten, wir haben nur Absatz-Tags. Der nächste hat eine Klasse. Es ist Klasse, hoity-toity und dann ID, die eindeutig ist. Zum Beispiel haben wir hier Farbe von hellblau für den Absatz. Wenn wir das ändern, um rot zu sagen, sollte es hier unten aktualisiert werden. Die Farbe ist rot, hoity-toity wählt die mittlere. Wenn wir das auf normales Grün ändern, dann geht das. Der Grund, warum es ein wenig rot wurde, bevor es grün wurde, war, dass ein p-Tag auch für das hoity-toity, p-Tag gilt , aber hoity-toity, die eine Klasse ist, wird das p-Tag tatsächlich überschreiben, weil es spezifischer ist, weil es nicht jeder p-Tag. Es sind nur diejenigen, die eine Klasse von hoity-toity haben und dann, wenn wir uns ändern, sagen Sie das Einzigartige und fügen Sie es hinzu. Ändern wir es zu blau, dann wird es blau da unten. Wie setzen wir dann CSS und HTML zusammen? Es gibt vier Möglichkeiten, dies zu tun. Style-Attribut, Style-Tag, die die wichtigsten beiden sind, über die wir sprechen werden, und dann gibt es ein externes Stylesheet und Importieren eines Stylesheets. Auch hier sind diese komplexer, als wir wirklich brauchen. Wir reden über die ersten beiden. Das style-Attribut geht auf ein beliebiges HTML-Element. Es sieht ähnlich wie eine Klasse oder andere Attribute, über die wir gesprochen haben. Sie benötigen nur die Deklaration, da Sie sich bereits auf dem spezifischen Element befinden, in dem wir dieses Element auswählen , so dass Sie keinen Selektor benötigen, nur die Deklaration. Der Vorteil ist, dass Sie sehr spezifisch sein können, wie Sie Regeln anwenden. Der Nachteil ist, wenn Sie dies für eine Reihe von Elementen festlegen, sagen Sie, dass Sie alle Absatztexte in Blau ändern möchten, aber dann Ihr Chef es in Rot ändern möchte oder Sie etwas später ändern müssen, dann müssen Sie jeden einzelnen von ihnen. Um zu sehen, wie das style-Attribut tatsächlich aussieht, hier haben wir es, Art des p-Tags, wir haben ein style-Attribut mit einer Farbe grün und der Absatz wird grünen Text haben. Elementar-Stil; Es gibt ein Style-Element, das Teil des HTML-Elements ist, nur Stil und Sie können CSS zwischen den öffnenden und schließenden Style-Tags setzen. In diesem können Sie alle Absätze auf blau setzen und dann, wenn Sie das ändern, wird es überall ändern. Mit dem style-Tag wird das p, da wir einen Selektor haben, da wir einen Selektor haben,auf alle Absatz-Tags innerhalb dieser bestimmten Seite angewendet und wir können die Farbe zu lila oder rot ändern oder was auch immer wir es ändern möchten , indem Sie diesem Ort, anstatt zu jedem Stilattribut zu gehen und sie dort zu ändern. Hier gibt es ein paar Vorbehalte. Nutze deine neuen Kräfte mit Bedacht. Markenfarben und -schriftarten gibt es aus einem Grund, um Konsistenz auf vielen Seiten zu schaffen. Wenn Sie gegen sie gehen, tun Sie dies auf Ihre Gefahr. Es ist nicht meine Schuld. Du treffst diese Entscheidung. Ich sage dir nur, wie man es macht, wenn es Sinn macht, es zu tun. Nutze deine neuen Kräfte mit Bedacht. Wenn Sie versuchen, ein neues Design und Look and Feel pro Seite zu machen, ist das wirklich die kluge Wahl, die Benutzer verwirren kann. Es gibt Zeiten, in denen Sie dies tun möchten, könnte zum Beispiel sein, wenn Sie eine Figur haben, die Sie dann Stil ein wenig anders als der Rest der Website, die Sinn machen könnte, das zu tun. Konsistenz ist wirklich wichtig. Es hilft Benutzern zu wissen, dass sie sich auf der gleichen Website befinden, dass sie es mit der gleichen Institution zu tun haben und wenn Sie ständig Schriftarten ändern oder ständig Farben ändern, wird es keinen Sinn ergeben und sie gehen zu gehen. Sie gehen zu einer anderen Seite. Es gibt Zeiten, in denen Sie gegen Markenfarben und Schriftarten gehen können und sollten. Sie sind selten, und wenn Sie dies tun, sollten Sie einen wirklich guten Grund haben, dies zu tun. Es sollte Gründe wie die Art und Weise sein, wie Sie den Inhalt angezeigt haben, der benötigt wurde , um eine andere Schriftart und Farbe zu haben, so dass Sie Kontrast zu der Marke, Schriftarten und Farben oder so etwas. Es sollte ein wirklich guter Grund sein und es sollte einer sein, den Sie artikulieren können. Gehen Sie wieder gegen Marke, Farben und Schriftarten auf Ihre Gefahr. alles, was gesagt hat, sei kreativ und schiebe die Grenzen. Das Web ist ein Ort zum Spielen und Spaß haben und wenn wir nicht weiter die Grenzen überschreiten, werden wir nie wissen, was wir tun können. 9. Schriftarten-Erfolg mit Zombies: Ok. Lassen Sie uns über Schriftarten sprechen. Sie können jede Schriftart verwenden, die Sie für Ihre Webseite wünschen. Es sieht gut aus auf deinem Computer, aber wenn andere Leute es nicht haben, wird es aussehen wie untote Kotze. Sie müssen auch darauf achten, dass das Ändern der Schriftart ohne guten Grund den Horror erhöht. Es ist keine gute Idee zu tun, es sei denn, Sie wissen, was Sie tun oder ändern sie von etwas anderem in den gewünschten Schrifttyp, der verwendet wird anderswo. Da Schriftarten nicht auf allen Systemen verfügbar sind, sollten Sie in der Regel mehrere Schriftarten auswählen, die ähnlich aussehen, wenn eine nicht verfügbar ist. Zum Beispiel habe ich hier eine Content-Klasse und die Regel der Schriftfamilie ist, dass die Wahl, welche Schriftart wir verwenden möchten. Die erste, die verfügbar sein wird, ist Helvetica oder von der wir hoffen würden, dass sie verfügbar sein würde, ist Helvetica. Wenn das nicht verfügbar ist, dann werde ich mit Verdana gehen, und wenn das nicht verfügbar ist, können Sie auch die Schriftgröße ändern. Sie können ein paar verschiedene Arten von Einheiten, Pixel, Prozentsätze, ems und sogar ein paar mehr verwenden. Ich neige dazu, ems zu bevorzugen, weil sie relative Einheit sind. Ein em entspricht der Standardschriftgröße, normalerweise gibt es 16 Pixel. Ems sind relative Einheiten, was bedeutet, dass die untergeordneten Tags ihre übergeordnete Schriftgröße erben und die Schriftgröße des übergeordneten Elements zur neuen Standardschriftgröße des Kindes wird. Ihr ein em basiert auf der Schriftgröße des übergeordneten Elements. Wenn zum Beispiel die Schriftgröße eines Elternteils auf zwei em festgelegt ist und das Kind auch auf zwei em gesetzt ist, wenn wir davon ausgehen, dass 16 Pixel die Basis sind, dann ist die übergeordnete Schriftgröße 32 Pixel, aber die Schriftgröße des Kindes beträgt 64 Pixel , da es zweifache Standardgröße aus dem übergeordneten Element erstellt. Der Vorteil hier ist, dass die Dinge proportional größer und kleiner werden. Wenn ein Benutzer beispielsweise beschließt, seine Standardschriftgröße von 16 Pixel auf 24 Pixel zu ändern , oder selbst wenn er von 16 Pixel auf 10 Pixel oder so etwas heruntergeht, dann werden sich alle Schriftgrößen entsprechend ändern. Wenn wir zum Beispiel auf 10 Pixel hinabgingen, würde die Schriftgröße des Elternteils dann 20 Pixel betragen, und die Schriftgröße des Kindes würde dann 40 Pixel betragen. Sie bleiben immer noch proportional zu dem, was ursprünglich festgelegt wurde. Wenn Sie sie mit bestimmten Pixelzahlen setzen, würden sie sich nicht ändern, und das ist nicht wirklich gut für den Benutzer, weil Designer manchmal Dinge sehr klein machen können, was schwer zu lesen sein kann. Hier ist ein Beispiel für eine Änderung der Schriftgröße. In diesem Fall ändern wir die Schriftgröße auf 1,25 em, also erhöhen wir ein wenig auf etwa 20 Pixel, vorausgesetzt, 16 Pixel waren die Standardeinstellung. Hier haben wir die Pixel-Version, Schriftgröße von 20 Pixeln, und Sie können auch Prozentsätze verwenden, Schriftgröße von 125 Prozent. Schriftgewichte. Sie sind wahrscheinlich vertraut mit fett, ein schwereres Gewicht, als die normale Schriftart. Aber es gibt noch einige andere Gewichte, die Sie verwenden können. Schriftarten gibt es in vielen Größen und Stärken. Font-Weight Eigenschaft ermöglicht es Ihnen, dies zu ändern. Sie können von 100-900 gehen, Schritten von einem 100, 400 ist normal und 700 ist fett. Die meisten Schriftarten haben nicht alle neun Gewichtungen. Ich würde sagen, es ist eine seltene Anzahl von Schriftarten, die alle neun haben. Die meisten werden mindestens 400 und 700 haben, aber es kann manchmal sein, dass Sie ein Licht und einige dieser Dinge haben. Sie sind auch in der Lage, die Schlüsselwörter normal und fett zu verwenden, um sie auch zu setzen, ohne sich an die 400 und 700 erinnern zu müssen. Was ist das Zombie-Wiegen? Hier haben wir Inhalt Schriftgewicht fett, Sie können auch die Schriftstärke auf normal und das Äquivalent in Zahlen setzen . Hier haben wir Schriftgewicht gesendet 100, und dann schließlich zu 400. Styling. Font-Stil ist, wie Sie Inhalte aus CSS kursiv oder unitalizieren. Wir setzen die Schriftart kursiv kursiv auf kursiv, und normal setzt sie wieder auf normal. Standardmäßig sind Links, wie Sie sicher gesehen haben, blau unterstrichen. Manchmal möchten Sie die Unterstreichung entfernen oder sogar wieder hinzufügen. Das wird Textdekoration verwendet. Textdekoration, keine wurden entfernt. Der unterstreichende Text oder die Erstellung der Unterstreichung wird ihn wieder hinzufügen. Sie können auch die Farbe der Schriftart ändern, und wie die Schriftfamilie ändern, möchten Sie auch sicherstellen, dass Sie dies mit Bedacht verwenden und wählen Sie Farben, die für das Auge angenehm sind, und nicht das kränkliche gelbe Grün, das Sie Ich werde wahrscheinlich sehen, wie ich hier wählen. Es gibt viele Möglichkeiten, Farbe in CSS zu setzen. Wir können Schlüsselwörter verwenden, wie wir im letzten Kapitel gesehen haben, wie blau und grün, Pfirsich, Puff, etc. Es gibt auch eine hexadezimale Notation, die ungefähr so aussieht. Ich weiß nicht mal, welche Farbe das ist. Mach dir keine Sorgen. Du musst es nicht wissen. Aber wenn Sie wissen, dass dies eine Farbe ist, das Hashtag, bevor es Ihnen zeigt, dass es eine Farbe ist, dann können Sie die gewünschte Farbe erhalten und ein Grafikprogramm dann kopieren Sie diesen hexadezimalen Wert in Ihr HTML, um die Farbe zu ändern. Während die Schlüsselwörter hilfreich sind, haben sie nicht annähernd so viele Farben, wie die hexadezimalen Zahlen erlauben, und wie gesagt, sollte jedes Grafikprogramm Ihnen helfen können, den hexadezimalen Wert zu erhalten , den Sie kann dann einfach einstecken. Hier ist ein Beispiel für die Einstellung der Farbe auf gelbes Grün, hier ist ein weiteres Beispiel mit der hexadezimalen Notation. Beachten Sie, dass der Hashtag vorhanden ist und für hexadezimale Zahlen erforderlich ist. Werfen wir einen Blick auf einen Code. Hier habe ich nur einen kleinen Absatz, dem ich eine ganze Reihe von verschiedenen Dingen hinzugefügt habe. Hier haben wir die Schriftfamilie, Zombie-Killer ist eine Schriftart, die nicht wirklich existiert. Es wird es nicht finden. Da also ein Raleway auf meinem Computer existiert, wird es mir das in Raleway zeigen. Wenn raleway nicht existieren, wie es vielleicht nicht auf Ihrem Computer, wird es helvetica wählen, und wenn helvetica nicht verfügbar ist, dann wird es eine san-Seriifen-Schrift wählen, wahrscheinlich Ariel, aber es hängt wirklich von Ihrem Computer und was Sie tun. Hier müssen wir es mutig machen. Also habe ich dieses kleine Ding fett gemacht, um die Schrift einfach ein bisschen fett, dünner Text hier zu setzen , Zombie. Wenn Sie nicht raleway auf Ihrem Computer haben, werden Sie dies nicht in Ihrem Text sehen, denn raleway ist eine Schriftart, die zufällig mehrere Versionen oder mehrere Gewichte hat. So konnte ich das dann als das Zombie-Gewicht zeigen. Als nächstes haben wir normalen Text. Das Schriftgewicht ist also normal, wahnsinnig großer Text ist dieses kleine Kerl-Sache. Ich ändere es in sechs. Sie können die Dinge auch zu sehr klein ändern. Also in diesem Fall änderte ich das Wort Website auf nur sechs Pixel oder tatsächlich ja, es tut mir leid. Dies stellt sicher, dass wir Raleway haben. Also sollten Sie Raleway immer noch auf Ihrem Computer sehen , auch wenn Sie es nicht haben, weil ich das eingerichtet habe. Zurück zum Font-Stil, so kursiv, also setze ich diese ganze Sache auf kursiv, und dann in der Mitte hier habe ich nur dieses Wort Zombie, das ich langweilig mache. Also ändere ich den Schriftstil und Normal, und es ist nicht mehr kursiv. In Ordnung. Das war's für diesen Abschnitt. Lasst uns zum nächsten gehen. 10. Die Untoten einboxen: Das CSS-Boxmodell: Das nächste, worüber wir sprechen werden, ist das CSS-Box-Modell. CSS-Box-Modell bestimmt, wie Elemente angelegt werden, wie sie miteinander interagieren. Es sieht in etwa so aus. Sie haben Rand an den Rändern. Sie haben eine Grenze. Drinnen hattest du Polsterung. Dann in der Mitte ist Inhalt. Im Allgemeinen ist die Breite im Box-Modell gleich der Breite des Inhalts, nicht der Breite des Rahmens, wie typischerweise angenommen wird. Es gibt eine Möglichkeit, dies mit dem sogenannten Border-Box zu ändern, ein bisschen über diesen Kurs hinaus. Aber die Breite des Inhalts ist normalerweise die Breite davon, und dann können Sie Padding und Rand und Rand hinzufügen um Dinge zu schieben und Abstand hinzuzufügen, usw. Breite legt die Breite des Elements standardmäßig auf die Inhaltsbreite. Höhe legt die Höhe des Elements fest. Padding ist der Abstand zwischen dem Inhalt in seiner äußeren Kante. Rahmen ist die äußere Kante des Elements. Marge ist der Abstand zwischen den Elementen. Sie können ems auch für diese Werte verwenden. Sie müssen nicht nur Pixel oder Prozentsätze oder was auch immer verwenden; Sie können ems auch verwenden. Boxen Sie die Zombies aus. Rand und Padding können jeweils Werte gesetzt haben. Ein Wert, um alle Seiten zu setzen, wie wir es hier tun. Rand von 2em wird setzen, vorausgesetzt, 16 Pixel sind die Basis, 32 Pixel um jede Seite des Inhalts, und dann werden weitere 16 Pixel des Auffüllens dort ebenfalls verfügbar sein. Aber Sie setzen die Seiten auch individuell mit etwas namens Trouble Notation, so dass T, R, B, L wichtig ist. Es ist die Reihenfolge, in der du die Seiten einstellst. Also oben, rechts, unten, links. Es ist das Wort Ärger ist, wie ich mich erinnere. Oben, rechts, unten, links, weil sie in der gleichen Reihenfolge in dem Wort Schwierigkeiten sind. Marge, wir setzen 1em oben, 16 Pixel auf der rechten Seite, Null Pixel unten und fünf Prozent auf der linken Seite. Die Polsterung, wir setzen 20 Pixel oben, Null auf der rechten Seite, 10 Prozent auf der Unterseite und 2em auf der linken Seite. Für Rahmen müssen drei Werte festgelegt werden. Zuerst ist die Breite des Rahmens. Wie breit der Rand ist, in der Regel in Pixel, ems, jede dieser Einheiten. Rahmenstil, dies ist in der Regel solide, gestrichelt , gepunktet, all diese Arten von Dingen, und es gibt mehr Stile als auch. Neun Mal von 10 verwende ich solide und nicht gestrichelt oder punktiert. Aber es steht Ihnen zur Verfügung, wenn Sie es verwenden müssen. Dann auch die Rahmenfarbe. Die Farbe, die der Rahmen sein soll. Sie können Schlüsselwörter, hexadezimal usw. verwenden Hier ist ein Beispiel. Wir haben Rand mit einem Doppelpunkt, und dann ist die Breite ein Pixel, solid ist der Stil, und #47D2F3 ist die Farbe. Viele Male, wenn Sie ein Bild zu einer Reihe von Texten hinzufügen möchten , hebt es oft wie ein Mensch in einer Zombie-Horde. Es hieß es schweben. Sehen Sie, Sie können es nach links oder rechts schweben, um es an den linken oder rechten Rand des Elements zu senden. Wie Sie hier sehen können, wird das obere Bild links verschoben, und das untere Bild wird rechts schweben. Wenn Sie dies tun, können Sie den Rand oder die Polsterung verwenden, um Abstände um ihn herum hinzuzufügen , so dass der Text nicht direkt gegen das Bild läuft. Hier haben wir Float, richtig. Es ist nur Float Dickdarm rechts. Dann Rand, wir setzen fünf Pixel oben, Null auf der rechten Seite, fünf Pixel unten und fünf Pixel auf der linken Seite. Wir machen diese Null Pixel auf der rechten Seite, so dass es bündig am rechten Rand des Inhalts sein kann , anstatt in fünf Pixel zu kleben. Wir wollen nicht, dass der Text direkt gegen das Bild steht, also schieben wir ihn auf fünf Pixel aus. Ähnlich, mit dem Float, links, einem Rand von fünf Pixeln auf der Oberseite, fünf auf der rechten Seite, fünf auf der Unterseite, Null auf der linken Seite, wieder, so dass wir es bündig links legen können, wie wir es nach links schweben, und fünf Pixel überall, um zu verhindern, dass der Text direkt gegen ihn geht. Wir machen auch Hintergründe oder ändern Sie die Hintergrundfarbe eines Elements mit background-color Eigenschaft. Also etwas Hintergrundfarbe von rot. Wenn Sie dies für ein Element tun, das Text enthält, stellen Sie sicher, dass Sie etwas Padding hinzufügen, damit sich die Farbe nicht direkt am Rand des Textes befindet. Eine wichtige Sache zu beachten ist, einer der großen Unterschiede zwischen Padding und Rand ist, dass die Hintergrundfarbe eines Elements durch Padding, aber nicht Rand angezeigt wird. Hier haben wir eine Vielzahl von verschiedenen Möglichkeiten, Polsterung zu tun. Wir haben eine Kissenpolsterung, persönlichen Raum, persönlichen Raum auf der U-Bahn, einzeln, Gruppe, rechte Wand. Wir schauen uns die direkt an. Erstens haben wir wie ein Kissen ist dieses Element genau hier. Wir haben eine Polsterung von 2em rundum. Ich könnte den Hintergrund rot färben, nur damit es leicht zu sehen war. Als nächstes haben wir menschliche Polsterung, die ich gab Polsterung auf der Oberseite war Null, Polsterung auf der rechten Seite war 1em, Polsterung auf der Unterseite war 12.375 em. Vielleicht ist Ihre Polsterung anders, aber die Polsterung auf der linken Seite war auch 1em. Hier haben wir Polsterung mit grundsätzlich keiner auf der Oberseite und einem ganzen Bündel auf der Unterseite. Dann haben wir einen persönlichen Raum, in dem wir so viel persönlichen Raum wie möglich machen wollen. Wir haben 5em Rand, aber wie Sie hier sehen können, gibt es keine Polsterungen, so dass der Text bis zum Rand der Elemente läuft, was nicht sehr gut aussieht und schwer zu lesen ist. Wenn Sie dann in der U-Bahn oder in der U-Bahn sind oder was auch immer, haben Sie fast keinen persönlichen Raum. Du hast ein bisschen über deinem Kopf, vielleicht ein bisschen zu deiner Rechten. Du sitzt auf einem Sitz, also gibt es dort keinen Spielraum und vielleicht ein bisschen links. Das ist, wo diese Marge ist. Dann hier haben wir menschliche Polsterung. Es ist das gleiche wie oben. Es verwendet nur eine Deklaration, um alle Regeln festzulegen. Persönlicher Raum in der U-Bahn. Dieselbe Sache hier. Gleiche Zahlen wie oben, aber in einer Deklaration verwendet. Mit Rändern können Sie individuell einstellen. So haben Sie Rand von einem Pixel, einfarbig, Rahmenfarbe von Grün, und da ist es, Rahmenfarbe von Grün. Eine Anmerkung, nur diese Zeile hier stammt von diesem hr-Element, was horizontale Regel als HTML-Element bedeutet , das Sie verwenden können, um Dinge zu trennen, wenn nötig. Als nächstes haben wir gruppiert. Der Rahmen ist hier mit einem Pixel, durchgehend und blau gruppiert. Dann die rechte Wand, wir haben eine Grenze gerade auf der rechten Seite, 50 Pixel, solide und schwarz. Das ist ein anderer Weg, um Grenzen zu machen, usw. weiter zum nächsten. 11. Ein Schlag ins Zombie-Gesicht der Word-Programmiersprache: Manchmal, wenn Sie arbeiten und Ihre Inhalte in Word erstellt haben, eine völlig normale Möglichkeit, Code zu erstellen, versucht Word, hilfreich zu sein und die genaue Schriftart, die Sie verwenden, genauen Abstand, den Sie verwenden, und all die Kruft, die Sie interessieren sich wirklich nicht. Sie wollen nur, dass es nur Ihre Inhalte hat, vielleicht mit den fett und kursiv und diesen Dingen intakt, gibt es ein paar Möglichkeiten, wie Sie dies beheben können. An einem Punkt habe ich diesen verrückten Text bekommen. Ich weiß nicht mal, wo ich damit anfangen soll. Es ist einfach seltsam. Eines der besten Dinge, die Sie tun können, ist es in einen Code-Editor zu legen. In diesem Fall habe ich es hier in CodePen eingefügt. Aber Sie können jeden Farbcodierungs-Editor verwenden, den Sie möchten. Das gibt Ihnen tatsächlich eine Menge Informationen oder hilft wirklich zu klären, was vor sich geht. Jetzt können Sie sehen, dass all dies nur von einem Span-Tag stammt und es gibt einen fett kursiv unterstrichenen Abschnitt hier, ohne Grund, scheint es. Es gibt eine Menge seltsames Zeug hier vor sich. Nun, da Sie die Farbcodierung sehen können, können Sie natürlich einfach das span -Tag löschen. Vergessen Sie nicht, die andere Spanne oder die gegenüberliegende Spanne zu löschen. Viele dieser Inhalte brauchen wir eigentlich nicht einmal, weil es nur für diesen Kerl hier ist, was man einen geschützten Raum nennt. Es entspricht nur einem Leerzeichen, hat aber den Vorteil, dass keine Linie unterbrochen wird. Manchmal wird es als Platzhalter für Dinge verwendet. Aber da haben wir Platz und wir können tatsächlich einfach diesen ganzen Abschnitt hier löschen . Da gehen wir hin. Jetzt haben wir nur den Code, den wir wollten und nicht von all der Verrücktheit. Das ist eine gute Möglichkeit, es zu tun. Es gibt einige Content-Management-Systeme, die besser darin sind, dies zu entfernen als andere. Manchmal würden sie in Drupal eine Paste von Word haben , die eine Menge dieser Kruft entfernt, die Sie nicht wollen, während Sie den Inhalt, den Sie tun, und das Styling, das Sie tun, verlassen. Eine andere Möglichkeit, es loszuwerden, besteht darin, es als Nur-Text einzufügen, also kopieren Sie den Inhalt in einen Nur-Text-Editor. Das sollte generell alle Formatierungen entfernen, was nicht immer ideal ist. Das ist ein anderer Weg, es zu tun. Auch, wenn Sie eine Kopie von WordPress praktisch haben, neigt WordPress dazu, eine ziemlich gute Arbeit zu tun, um eine Menge von diesem Kruft und überschüssigen Code zu entfernen während das Zeug, das Sie behalten möchten, wenn Sie es in den visuellen Editor einfügen. Das ist ein weiterer guter Weg, um es zu umgehen. Vielleicht, wenn Sie WordPress auf der einen Seite und Drupal ein anderes etwas verwenden , können Sie es immer in WordPress einfügen, dann kopieren Sie von dort und fügen Sie in die andere Anwendung oder die andere Sache, die Sie tun. Es gibt viele verschiedene Möglichkeiten, um es zu umgehen, aber es in einen Code-Editor zu setzen, dass Farbcodes wahrscheinlich der beste Weg ist , um den Inhalt zu behalten, den Sie wollen und das Zeug loszuwerden, das Sie nicht tun. 12. „Gehirne“ herausziehen: Zitate herauskopieren: Also etwas, das Sie vielleicht tun möchten, ist ein paar Pull-Anführungszeichen zu erstellen, und ich denke, Sie haben jetzt genug Werkzeuge, um das tun zu können. Was wir also tun werden, ist, dass ich ein Zitat aus diesem speziellen Stück nehmen werde , das eine alte Geschichte von Lloyd Arthur Eshbach über Zombies ist , und ich werde nur ein paar Worte herausziehen und ein Pull-Zitat erstellen. Also habe ich den Inhalt gefunden, den ich herausziehen möchte. Es ist dieser kleine Abschnitt hier : „Aus der Windschutzscheibe des Nebel ins Mondlicht schlich sich ein seltsames, seltsames Handwerk.“ Ordnung, also werde ich es kopieren und dann füge ich es wieder ein. Eigentlich möchte ich ein wenig weiter nach unten gehen, ich werde Blockquote hinzufügen, ich werde Blockquote hinzufügen, Klasse entspricht guter Klasse mit Pull-Zitat, und ich werde dieses Blockquote schließen, nur damit ich nicht vergessen, es zu tun. Ich sehe, dass ich dort etwas falsch eingegeben habe. Dann füge ich das hier noch mal hinzu. Also, wenn wir nach unten scrollen, sollten wir hier sehen, dass Abschnitt wieder als separates Zitat. Also, jetzt gehe ich zu meinem CSS, und ich werde zuerst tun, fügen Sie die Klasse und fügen Sie hier einige Inhalte hinzu. Also ein paar Dinge, die ich hier machen möchte. Ich möchte eine Breite von sagen 200 Pixeln einstellen, und vielleicht ist das ein bisschen klein. Lassen Sie uns versuchen, 300 Pixel, und ich möchte die Größe erhöhen, dass es auffällt. Also werde ich zur Schriftgröße von zwei em gehen, also ist es ein bisschen größer. Das ist vielleicht zu viel. Gehen wir runter, um 1,5 zu sagen. Immer noch ein bisschen groß. Lass uns 1,25 machen. In Ordnung, also ist es immer noch ein bisschen größer, aber nicht ganz verrückt groß. Ich werde es richtig schweben. Wie Sie dort sehen können, scrollen Sie ein wenig nach unten, damit wir es weiter sehen können. Ich werde eine Grenze nur auf der linken Seite hinzufügen. Sagen wir, fünf Pixel. Wie wär's mit rot und fest. Das ist viel zu nah am Text selbst, also wollen wir eher etwas auffüllen. Lassen Sie mich einfach Polsterung auf der linken Seite machen, und ich weiß nicht, vielleicht ein Em. Mal sehen, wie das aussieht. Das ist wahrscheinlich gut. Es stellt sich heraus, dass dieses Rot ein wenig heller ist, als ich will, also werde ich Farbe, die ich ein wenig früher ausgesucht habe. Ich werde nur zu dieser Farbe wechseln. Es ist eher ein tiefes Rot, das meiner Meinung nach besser zu dem passt, was wir hier betrachten. Jetzt habe ich nur die Polsterung auf der linken Seite hinzugefügt, aber ich denke, es könnte schön sein, wenn wir allen Seiten eine Polsterung hinzufügen , und was dabei helfen wird, wird es auch die Grenze etwas höher erscheinen lassen. Also ändere ich einfach die Polsterung zu einem em und der Rand ist ein bisschen mehr raus. Weißt du was? Ich denke, ich will ein em zu tun, so oben und unten, Ich denke, ich will tun.5 em, und dann auf der linken und rechten, Ich werde ein einzelnes em em em tun, und das wird es dann so setzen. Wir können auch die Farbe hier ändern, vielleicht werden wir sie ein wenig grau machen. Also lasst uns As tun, um es ein wenig herausziehen zu lassen, und da haben wir ein Pull-Zitat. Wir können das vielleicht auch ein wenig nach oben bewegen, was meiner Meinung nach eine gute Idee sein könnte. Also werde ich es nur schneiden und einfügen, und in diesem vorherigen oben sein. Eine andere Sache, über die wir nachdenken müssen, ist, dass mit blockquote einige Standardstile kommen. Wenn wir also zu viel Platz haben, was ich glaube, wir sind, können wir etwas Marge entfernen und sicherstellen, dass wir nicht zu viel oben und unten haben. Aber was das getan hat, war, dass es diese Informationen meiner Meinung nach zu nahe an die Grenze gebracht hat. Also lassen Sie uns ein wenig mehr Spielraum geben. Anstelle von Null, lassen Sie uns 0,5 em tun. Es reicht nicht ganz aus. Lass uns einen Mann machen. Da gehen wir hin. Es gibt ein bisschen mehr Abstand. Ich denke auch, wenn wir das kleiner machen, wird es ein bisschen besser aussehen, weil wir Text haben, der hier nicht weitergeht. Ja, ich glaube, ich habe das etwas zu weit hinaufgezogen. Mal sehen, wie es aussieht, wenn ich es reinstelle. In Ordnung, ja. Das sieht ziemlich gut aus, und da hast du dein Pull-Zitat. Sie werden sicherlich Variationen darüber machen. Wir könnten eine Hintergrundfarbe hinzufügen , um sehr dunkelrot zu sagen, sagen wir so. Vielleicht ist das etwas zu dunkel. Lasst uns so sagen. Es ist zu hell. Da ist etwa richtig. Also können wir irgendeinen Ort mit solchen Dingen machen, wir können die Grenze etwas größer machen, wenn wir wollten. Denken Sie darüber nach, wie wir das Ding aussehen wollten und wie wir wollten, dass es mit den anderen Inhalten interagiert. Wenn wir diese Hintergrundfarbe verwenden, denke ich, ich werde die Farbe des Textes zurück in weiß ändern. Vielleicht zu viel. Lassen Sie uns etwas versuchen, ein wenig off-white, also denke ich, ein bisschen weniger ausgeprägt. Aber ja, da hast du es. Sie können mit Ihren Blockquotes spielen und sie einfach auf eigene Faust hinzufügen, ohne einen Designer einstellen zu müssen oder etwas mehr tun zu müssen, als nur ein wenig Text und ein wenig CSS hinzuzufügen. 13. Vielen Dank für die Erinnerungen: Nun, wir hatten ein paar gute Zeiten zusammen. Sie haben etwas HTML gelernt, etwas CSS. Sie haben gelernt, was ein Tag ist, ein Element. Regeln und Erklärungen. Aber jetzt muss ich mich verabschieden. Danke, dass Sie meinen Kurs beobachtet haben. Ich hoffe, Sie haben viel gelernt und können es während Ihres ganzen Lebens anwenden. Vergessen Sie nicht, Ihre Verzeichnisprojekte einzubeziehen und sie so aufzustellen, dass ich sie sehen kann, damit andere Schüler sie sehen und nur zeigen können, was Sie gelernt haben. Nochmals vielen Dank für die Teilnahme an diesem Kurs. Ich hoffe, du warst in der Lage, einige Zombies zu töten und Spaß auf dem Weg zu haben . Wir sehen uns das nächste Mal. 14. Bonuslektion 1: Aufbau eines Seitenbunkers: In diesem Video werden wir darüber sprechen, wie man eine HTML-Seite von Grund auf neu erstellt. Wir werden über Doctypes, die HTML-Kopf- und Körperelemente und die Elemente im Kopf sprechen. Zunächst einmal gibt es vier Hauptteile zu einer HTML-Seite. Zuerst ist der DOCTYPE. Dies wird dem Browser mitteilen, mit welcher Art von Dokument es funktioniert. Es gibt das HTML-Element, das nur alle anderen Elemente umhüllt. Es gibt das head-Element, das Informationen über die Seite geben wird und wie man die Seite rendert, wie man die Seite eher anzeigt, und dann das body-Element, das alle Informationen enthält, die Sie tatsächlich auf der Seite. Der Doctype teilt dem Browser wieder mit, welche Art von Dokument es sich handelt. Als wir mit XHTML arbeiteten, hatten wir so etwas, was super schön ist. Ich bin sicher, ihr habt es jetzt alle auswendig gelernt. Leider gingen sie mit HTML5 in die andere Richtung. Nein, es ist wirklich ein Glück, weil ich mich daran erinnern kann. DOCTYPE HTML teilt dem Browser mit, dass es sich um ein HTML5-Dokument handelt. Das HTML-Element. Es wird alle anderen Tags oder alle anderen Elemente umschließen. Es hat ein öffnendes HTML-Tag, das wie ein HTML-Tag und ein schließendes HTML-Tag aussieht. Für eine bessere Zugänglichkeit und Suchmaschinenoptimierung ist eines der besten Dinge, die Sie tun können, dem HTML-Element, dem öffnenden Tag, eine Sprache hinzuzufügen . Dadurch wird sichergestellt, dass der Browser nicht nur weiß, welche Computersprache wir verwenden, was der Doctype ihm sagt, sondern auch welche menschliche Sprache er verwendet. Es sieht in etwa so aus. Sie haben nur das HTML öffnende Tag, fügen Sie ein lang-Attribut und en, in diesem Fall ist es Englisch, aber Sie können es verwenden, für Espanol und es gibt viele andere Ländercodes und Sprachcodes, die Sie verwenden können. Das Kopfelement wird alles über die Seite halten. Keines davon wird tatsächlich auf der Seite gerendert oder auf der Seite angezeigt. Es sind alle Informationen darüber, wie man die Seite erstellt, wie man sie zusammenfügt, also haben Sie Dinge wie die CSS-Dateien, die verwendet werden, alle JavaScript-Dateien, die möglicherweise verwendet werden, Meta-Informationen über die Seite, den Titel, der im Fenster- oder Tab-Namen angezeigt wird, und alle anderen Informationen über die Seite. Es sind keine Informationen, die auf der Seite gerendert werden, sondern Informationen über die Seite. Jetzt betone ich das auch teilweise, weil Kopf ein paar andere Tags, Header und Überschriften ähnlich ist. Wir werden später über die Unterschiede sprechen, aber Header und Überschriften gehen in den Körper, während Kopf eine separate Sache ist, ist ein direktes Kind des HTML-Elements. Auch hier wird nichts im Kopf direkt auf der Webseite angezeigt und es sieht genau so aus, öffnende head-Tag, schließender head-Tag. Die Leiche. Dies wird alle Informationen enthalten, die auf der Seite sichtbar sind. Alles, was tatsächlich angezeigt wird, alles, was Sie im Browserfenster sehen, wird im Körper sein. Alle Texte, Farben, Bilder, was auch immer erscheint, es geht direkt und streng im Körper. Wir haben unser öffnendes Körperelement, oder vielmehr öffnende Körper-Tag und unsere schließende Körper-Tag. Jetzt stellen wir alles zusammen, was wir gelernt haben. Zuerst haben wir den DOCTYPE. Glücklicherweise ist es HTML5 DOCTYPE, so dass meine Finger keinen Krampf bekommen, der den gesamten DOCTYPE ausschreibt. Im Anschluss daran ist das öffnende HTML-Tag, mit einem lang-Attribut für Englisch, da die Seite, die wir hier bauen, in Englisch ist. Dann haben wir das öffnende head-Tag, schließende head-Tag, öffnende body-Tag, schließende body-Tag, schließende HTML-Tag. Es ist wichtig zu beachten, dass Kopf und Körper die einzigen zwei Elemente sind, die sich direkt innerhalb des HTML-Elements befinden. Alles andere im HTML-Dokument sollte in das head-Element oder in das body-Element gehen. Nichts anderes ist sozusagen direkt ein Kind des HTML-Elements. Jetzt möchte ich nur noch einmal klarstellen, dass Kopf, Kopfzeile und Überschriften verschiedene Dinge sind. Der Kopf ist keine Überschrift oder Kopfzeile, aber es ist der Kopf, es sind die Informationen über die Seite. Header und h1 bis h6, oder die Überschriften sind unterschiedlich. Diese gehen in den Körper, nicht in den Kopf. Kopf ist für Informationen über die Seite. Header und Überschrift oder h1 bis h6 erscheinen oder werden innerhalb der Seite angezeigt, während head Informationen über die Seite ist und es nicht direkt angezeigt wird. Innerhalb des Kopfes haben wir eine Reihe von verschiedenen Elementen. Zuallererst ist der Titel. Dies ist wiederum, der Titel der Seite, wird auch nicht direkt im Dokumentfenster oder im Browserfenster angezeigt. Es wird jedoch auf dem Tab-Namen oder oben im Fenster angezeigt. Die Texte, die Sie im Tab-Namen oder oben im Fenster sehen würden, das ist das Titel-Element. Es ist jedoch nicht wichtig Suchmaschinenoptimierung, weil es Informationen über die Seite gibt und es auch Informationen, die Sie auf einem Tab-Namen sehen würden usw., so dass mit einer Milliarde Registerkarten geöffnet, es wichtig sein kann gute Texte dort zu haben. Vielleicht haben Sie weniger Tabs geöffnet als ich, aber ich habe wahrscheinlich mehr als eine Milliarde. Sie möchten aussagekräftige Schlüsselwörter verwenden, wenn Sie Ihren Titel schreiben, nur um Ihre Suchmaschinenoptimierung zu helfen und deutlich zu machen, worum es auf der Seite geht. Hier ist ein Beispiel für ein title-Element. Meta ist Informationen über die Seite. Als Informationen über die Seite, würden Sie denken, dass es in den Kopf geht und es tut. Es ist ein void-Tag, was bedeutet, dass es kein schließendes Tag hat, also ist es nur ein öffnendes Tag. Meistens besteht es aus einem Namensattribut und einem Inhaltsattribut. Wir werden in einem Moment darüber reden, was die sind. Aber es gibt auch ein Zeichensatzattribut. Dies ist der Satz von Zeichen, die von der Website verwendet werden. Dies ist wichtig für die Internationalisierung und um sicherzustellen, dass jeder Browser, der diese Seite ansieht , richtig codiert oder richtig versteht, die verwendeten Zeichen. Es ist eine gute Sache zu haben, sonst wird der Browser raten, es wird oft richtig erraten, aber es könnte nicht, so dass es hilfreich ist. In den meisten Fällen sollte der Wert für charset UTF-8 sein und sieht so aus. Meta-Zeichensatz UTF-8 Als nächstes haben wir das Ansichtsfenster Meta-Tag. Dies ist wichtig, insbesondere für Responsive Design. Das werden wir später noch ein bisschen reinkommen. Aber es sagt dem Browser, nicht zu verkleinern, sondern die Website in ihrer natürlichen Größe zu zeigen. Was passiert oft mit mobilen Geräten wenn Sie dieses Viewport Meta-Tag nicht an Ort und Stelle haben, wird es verkleinert und versucht, Ihnen die gesamte Seite auf einmal anzuzeigen. Lange Zeit war das wirklich gut, denn sonst waren Sie in eine Seite gezoomt , die Sie kaum lesen konnten und wahrscheinlich nicht auf Ihrem mobilen Gerät funktionierte, aber mit Responsive Design, das wir in ein wenig eingehen werden, Mit diesem Viewport Meta-Tag können Sie eine größere Kontrolle als Webentwickler haben und eine Website erstellen, die für Benutzer auf ihren mobilen Geräten leichter sichtbar ist. Mach dir keine Sorgen, wenn es jetzt keinen Sinn ergibt, dann besprechen wir das noch einmal. Der Name des Ansichtsfenster-Meta-Elements ist auf Ansichtsfenster festgelegt und der Inhalt wird auf eine Breite gleich Gerätebreite und bei anfänglicher Skalierung gleich 1,0 festgelegt. Im Allgemeinen ist das, was ich dort für Inhalte hatte, alles, was Sie brauchen werden. Es gibt Zeiten, in denen Sie einige geringfügige Änderungen daran vornehmen können, aber im Allgemeinen ist dies der Wert des Inhalts, den Sie verwenden möchten. Das Description Meta-Tag ist auch für Suchmaschinenoptimierung da. Es wird ein paar Sätze, die einige Ihrer Website sein. Viele Suchmaschinen zeigen dies als die Beschreibung an, die Sie in den Suchergebnissen sehen. Stellen Sie daher sicher, dass es klar, prägnant, Keyword-reich ist und Ihre Website gut darstellt. Das name-Attribut hier wird Beschreibung sein, und der Inhalt wird sein was auch immer Satz über Ihre Website, die Sie in setzen möchten. Dieser Inhalt ist wahrscheinlich zu kurz, es sollte wahrscheinlich etwa 30-50 Wörter sein. Nicht zu lang, aber auch nicht zu kurz. Das Link-Element ist eine Möglichkeit für Sie, andere Arten von Dateien mit Ihrem HTML zu verknüpfen. Manchmal sind es die CSS-Dateien und manchmal andere verwandte Dokumente. Es wird so etwas aussehen. Sie haben das Link-Element hier. Jedes ref Attribut wird der Pfad zu dem bestimmten Dateityp sein. In diesem Fall ist es eine CSS-Datei und rel wird die Beziehung für das sein, was Sie mit dem Link-Element verbinden. In diesem Fall ist es das Stylesheet. Nun schauen wir uns einige Live-Codierung an. Hier haben wir alle Elemente, über die wir gerade gesprochen haben, an einem Ort zusammengesetzt. Auf der linken Seite hier habe ich den Code, auf der rechten Seite ist ein direktes Rendering davon. Das meiste, worüber wir gesprochen haben, waren Dinge im Kopf, die wiederum nicht direkt auf der Seite angezeigt werden, aber ich habe hier einen Header und ein H1 eingefügt, um Ihnen zu helfen , den Unterschied zwischen Kopfkopf und Überschrift zu sehen. Dies ist der Kopf, das ist ein Header, das ist eine Überschrift. Nehmen wir es hier von oben. Wir haben unseren DOCTYPE. Dies teilt dem Browser erneut mit, dass es sich um eine HTML-Seite handelt, in diesem Fall HTML5 pro spätere Seite. Wir haben unser HTML Opening Tag mit einem lang Attribut und Englisch als unsere Sprache gesetzt. Wir haben unser öffnendes Head-Tag, und hier haben wir ein Titel-Tag, das im Browserfenster angezeigt wird. Als nächstes haben wir den Zeichensatz, wieder, UTF-8. Stellen Sie sicher, dass wir hier alle auf derselben Seite sind. Als nächstes haben wir das Meta-Ansichtsfenster-Tag. Das wird alles sein, was Sie tun müssen. Sie können das so ziemlich kopieren und in Ihre Seiten einfügen. Sie müssen nicht unbedingt mehr wissen. Es gibt ein paar andere Optionen, aber sie werden selten verwendet. Wir haben unsere Beschreibung Meta-Tag, wir haben Inhalt gesetzt, wir haben unseren Link zu einer Zombie-CSS-Datei, und Beziehung ist das Stylesheet, wir haben unseren schließenden Kopf. Auch hier alle Informationen über die Seite, Informationen, die hier nicht auf der rechten Seite gerendert werden, sondern informieren, wie diese Seite gerendert wird, insbesondere mit zombie.css, aber auch Informationen über die Seite wie die Schlüsselwörter und die Beschreibung des Ansichtsfensters. Wir haben unser öffnendes Körper-Tag, dann haben wir unseren Header , der ein strukturelles Element ist, über das wir etwas später ausführlicher sprechen werden. Wir haben unsere H1-Überschrift, die Informationen, die auf der rechten Seite hier angezeigt werden , wie Sie es direkt dort sehen können. Dann haben wir unsere schließende H1, schließende Header. Wir haben ein nav Tag, das nicht da sein sollte. Das kommen wir in ein bisschen. Wir haben unseren schließenden Körper und wir haben unsere schließende HTML. Das ist das Ende dieser Lektion über das Erstellen Ihrer allerersten HTML-Seite. 15. Bonuslektion 2: Gehiiirn, Körper und Strukturelemente: In diesem Video werden wir über den Aufbau des Textkörpers des HTML-Dokuments sprechen. Die Kopfzeile, wieder anders als der Kopf und die Überschriften, Kopfzeile ist ein Strukturelement, das Ihre Überschriften enthalten kann. Kann eine Kopfzeile für eine Seite oder einen Abschnitt oder einen Artikel sein, und wir werden über diese beiden in einer Sekunde sprechen. Es sieht so ähnlich aus. Wir haben unsere öffnende Header-Tag und wir haben unsere Öffnung h1. Dann haben wir unsere schließende h1 und schließende Header. Dies ist der grundlegendste Header. Sie können bei Bedarf auch andere Tags, andere Elemente, einschließen. Aber dies wäre die grundlegendste Version eines Headers. Nav, Haupt- und beiseite sind drei weitere Strukturelemente. Das Navi wird natürlich Ihre Navigation umschließen. Es kann alleine verwendet werden oder es kann in einer Kopfzeile oder in beiseite angezeigt werden, hängt davon ab, ob die Navigation über den oberen Rand liegen soll, wie es wäre, wenn sie in der Kopfzeile oder entlang der Seite ist , wie es wäre, wenn es eine beiseite ist. Es kann auch auf eigene Faust sein. Sie könnten einen Header haben und dann ein nav darunter und beiseite auf der einen Seite und ein nav auf der anderen. Aber sie neigen dazu, viel mit Header und beiseite zu arbeiten. Dies ist der Hauptinhalt der Seite, und das ist ziemlich viel es. Die beiseite ist für verwandte, aber tangentiale Inhalte, meistens Sidebar, könnte aber für Kommentare oder ähnliche Inhalte verwendet werden. Ja, in der Regel eine Sidebar und deshalb geht das nav manchmal hinein. Fußzeile, kommt am Ende der Seite oder am Ende eines Abschnitts oder Artikels. Es enthält oft Copyright-Informationen und Links zu anderen verwandten Seiten oder Artikeln oder Abschnitten. Artikel, ist Inhalt, der auf eigene Faust stehen kann. Es wird in der Regel wickeln Blog-Posts oder News-Artikel, Sachen, die herausgezogen werden können und würde immer noch in der Lage sein, Sinn zu machen und in der Lage, auf eigene Faust zu stehen. Abschnitt auf der anderen Seite, ist nur ein Teil einer Seite. Es steht nicht alleine. Es handelt sich um einen Teil eines größeren Artikels. Schauen wir uns einen Code an. Hier habe ich alles für uns angelegt. Wir haben den Kopf und den Körper aus dem letzten Abschnitt. Auch hier haben wir den Header und die h1, darunter haben wir ein nav. Innerhalb des nav haben wir eine ungeordnete Liste von drei Links. In diesem Fall verlinke ich auf drei Stellen innerhalb der Seite selbst. Als nächstes haben wir unser Hauptelement. Auch hier steht das Navi allein, in diesem Fall getrennt vom Header und getrennt von der Beiseite, die hier unten ist. In unserer Hauptsache haben wir drei Artikel. Innerhalb des Artikels haben wir zwei Abschnitte jedes Artikels. Wir haben ein h2, das die Überschrift des Artikels ist, und h3 für die Überschrift des Abschnitts und dann einige Inhalte dort. In ähnlicher Weise haben wir im nächsten Artikel ein h2 für die Überschrift dieses Artikels, wir haben einen Abschnitt mit einem h3 für die Überschrift dort und wieder für den letzten Artikel. Hier ist unser schließender Haupt-Tag, dann haben wir unsere Seite. Im Übrigen haben wir nur noch etwas mehr Inhalt. Ich habe dort ein h3 verwendet, um es mit diesem Abschnitt konsistenter zu machen. Schließlich haben wir unsere Fußzeile, die unsere Copyright-Informationen enthält. Fußzeile schließen, Körper schließen, HTML schließen. Schließen dieses Videos. 16. Bonuslektion 3: Reaktion auf die Zombie-Schlacht: In diesem Video werden wir über Responsive Design sprechen, was es ist und warum. Wir werden das Viewport-Meta-Tag ein wenig mehr besprechen und wir werden über Medienabfragen sprechen. Vor allem Responsive Design. Es ermöglicht der Website, sich anzupassen oder auf den Kontext zu reagieren, in dem sie platziert wird. Ob auf einem mobilen Gerät wie einem Telefon oder einem Tablet oder einem riesigen Bildschirm auf Desktop-Computer. Die Website ist in der Lage, sich an alle diese Geräte anzupassen. Medienabfragen können Sie ändern, was CSS verwendet wird basierend auf einer Vielzahl von Bedingungen, oft Bildschirmgröße oder Bildschirmbreite, dh mobile versus Desktop, oder manchmal medienbezogene wie Druck versus Bildschirm, usw., aber es gibt viele Medien-Abfragetypen. Warum brauchen wir Responsive Design oder was ist los? Vor langer Zeit Telefone und kleine Geräte mit Websites schrecklich gemacht. Sie würden Ihnen im Grunde nur einen Teil der Desktop-Größe Website zeigen, und sie waren sehr schwierig zu navigieren, sehr schwer zu finden Informationen über, sehr schwer, sogar etwas zu betrachten. Eine Innovation Apple brachte, wenn sie das iPhone erstellt, war, dass Safari würde automatisch schrumpfen eine Website nach unten, passen in den Bildschirm. Während dies machte es oft schwierig, bei kleinen Größen zu lesen, könnten Sie dann viel einfacher kneifen und zoomen, um den Teil der Website zu finden, an dem Sie interessiert sind. Dies machte Websites viel nutzbarer da Sie das Ganze auf einmal sehen konnten und dann den Teil vergrößern konnten , den Sie wollten, oder scrollen Sie nach unten, um den Teil zu finden, an dem Sie interessiert sind. Aber als Responsive Design kam, brauchten wir eine Flagge oder einen Weg für den Browser zu wissen, ob sie verkleinern sollten oder ob sie es so lassen sollten, wie es ist. In kommt das Viewport Meta-Tag. Apple kam auch auf das. Tag gibt einen Kopf bis zum Browser, um nicht zu verkleinern, wie wir zuvor diskutiert. Es hat einen Namen Wert von Ansichtsfenster und der Inhalt ist Breite gleich Gerätebreite, Anfangsmaßstab von eins. Medienabfragen. Was machen sie denn? Sie testen auf ein Merkmal, wenn dieses Merkmal wahr ist, führt es das CSS in den Klammern aus. Zum Beispiel haben wir, das ist unsere Medienabfrage, also bei Medien, wenn wir auf einem Bildschirm im Vergleich zum Druck und die maximale Breite dieses Bildschirms 900 Pixel beträgt, was die aktuelle Bildschirmgröße des Bildschirms oder Größe des Browsers unter 900 Pixel liegt, dann würden wir ausführen, was CSS hier war. Dies sind natürlich die CSS-Kommentare, also wird es nicht ausgeführt werden, aber Sie könnten dann das Layout ändern, alle Arten von verschiedenen Dingen tun, wenn diese Medienabfrage wahr ist. Es gibt viele verschiedene Arten von Medienabfragen. Wir haben gerade eine gesehen, die max-Breite war, die Standardeinstellung war der Desktop-Fall und dann, als Sie kleiner wurden, hat es Änderungen vorgenommen. Der Rest davon ist, mobile-first zu starten, was bedeutet, dass Sie mit der kleinsten Version des Bildschirms beginnen und dann Elemente und CSS hinzufügen oder ändern , wenn die Website größer wird oder wenn die Bildschirmgröße größer wird. Einer der Vorteile von mobile-first ist, dass es viel weniger Handwerk gibt, Sie müssen es nicht von der Desktop-Website entfernen. Sie können bearbeiten, während Sie weitergehen. Nicht all das zusätzliche Zeug zu haben, ist wirklich hilfreich, wenn Sie eine langsame Verbindung haben oder mit Handy es vielleicht langsam, es vielleicht intermittierend. Es gibt viele verschiedene Möglichkeiten, die problematisch sein könnten. Ein Mobile-First-Design ist also eine gute Idee. Sie können auch Medienabfragen für den Druck durchführen, dh diese Seite soll gedruckt werden, also tun Sie diese verschiedenen Dinge. Zum Beispiel können Sie die Hintergrundbilder, Hintergrundfarben entfernen, die Navigation entfernen, weil Sie nicht auf die Navigation auf Papier klicken können , oder zumindest noch nicht. Aber ja, es gibt viele Dinge, die Medienabfragen tun können. Haltepunkte werden immer dann angezeigt, wenn die Medienabfrage angewendet wird. Zum Beispiel hatten wir im letzten Beispiel eine Min-Breite von 900 Pixeln, der Haltepunkt würde bei diesem 900 Pixel liegen. Wie viele Haltepunkte sollten Sie haben? Wie oft sollten Sie Aktualisierungen an der Website basierend auf der Größe des Geräts vornehmen , auf dem Sie sich die Website ansehen. Es läuft wirklich auf so viele hinaus, wie Sie brauchen. Sie möchten sicherstellen, dass der Inhalt klar ist und von seiner besten Seite betrachtet wird. Allerdings sind viele Medienabfragen nötig, um dies zu tun , wie viele Sie benötigen, aber nicht mehr als das. Mehr Haltepunkte bedeuten eine kompliziertere Wartung und können schwieriger sein , neue Dinge und neue Funktionen hinzuzufügen. Verwenden Sie so viele, wie Sie brauchen, und nicht eine mehr als das. Wann sollten Sie einen Haltepunkt setzen? Es ist am besten, es zu tun, wenn das Design es erfordert. Wenn Sie es auf der Grundlage der Größe der gemeinsamen Bildschirme tun, dann werden Sie immer jagen Bildschirmgrößen und nie erfolgreich sein. Es gibt eine neue Bildschirmgröße, die so ziemlich jeden Tag erstellt wird. Da neue Geräte auf neue Art und Weise erstellt werden, sie anzuschauen, hat es keinen Sinn, das zu verfolgen. Wenn Sie Ihre Haltepunkte auf dem Design basieren, den Sie implementieren, haben Sie viel wahrscheinlicher glatte und geeignete Haltepunkte. Schauen wir uns einen Code an. Hier ist meine Medienabfrage. Wenn ich über 600 Pixel bin, gelten diese, wenn ich also über 600 Pixel bin, wird der Haupt links schweben und eine Breite von 70 Prozent haben, und die Beiseite wird rechts bei einer Breite von 28 Prozent schweben. Schauen wir uns die eine Seite an, kommen ein wenig höher, da ist es. Jetzt habe ich schwebte und 70 Prozent, schwebte rechts und 28 Prozent.