Der ultimative HTML-Entwickler – Lerne, mit HTML zu codieren

1. Einführung: Hallo und herzlich willkommen zum ultimativen HTML-Entwicklerkurs. Mein Name ist Caleb, und ich werde dein Lehrer während des ganzen Kurses sein. Zum Glück für Sie, dieser Kurs ist nur ein paar Stunden. Also musst du meine Stimme nicht zu lange hören. Ich werde schnell durchgehen, was dieser Kurs ist ein Gürtel. Was du darin bekommst, wie es funktioniert und wie du das Beste daraus herausholen kannst. Und ich werde Ihnen ein paar Informationen darüber geben, wer ich bin. In erster Linie noch einmal. Mein Name ist Caleb Tallinn. Ich bin ein Senior Full-Stack-Web-Entwickler. Geboren im Jahr 1989 und im Alter von 10 Jahren. Im Jahr 1999 habe ich meine erste Website durch die Zeit gemacht. Ich war 14. Ich habe freiberufliche Arbeit für Leute gemacht. In den nächsten neun Jahren habe ich hauptsächlich freiberufliche Arbeit verbracht. Wenn ich den Dienst im Internet gesehen habe, den ich mochte, wollte ich nutzen. Aber ich dachte, ich könnte es besser machen. Ich konnte es nicht besser machen. Es könnte wertvoller sein, oder Leute, von denen ich es nicht neu erschaffen würde. Ich könnte das alles tun, bevor ich die Highschool absolvierte. Ich habe nicht nur eine anständige Menge lustig gemacht, aber ich habe weit über 1000 Websites in meiner Zeit erstellt. Kurz danach dachte ich, dass ich vielleicht mein Spiel verstärken würde und eine Firma gründete. Firma war etwa ein Jahr und 1/2 alt, als ich sie verkaufte. Seitdem bin ich als CEO zurückgetreten und habe einen mehr C T o Rolle Chief Technology Officer übernommen. Das bedeutet, dass ich für die Technologie verantwortlich bin. Die Server, dieses Entwicklungsteam, die Benutzererfahrung, die Benutzeroberfläche, alles, was Code berührt. Ich habe ein bisschen mit der Firma zu tun. Lassen Sie es für in 2015 zwischen April und Dezember arbeiten, machte fast $900.000. Ich war Chief Technology Officer dieser Firma, und der primäre Service war die Software, die wir für Menschen entwickelt haben. Nun, das ist ein bisschen über mich. Lassen Sie uns über diesen Kurs sprechen. Dieser Kurs ist, wie Sie wissen, wie Sie wissen,in zwei Primärmodule aufgeteilt. Es gibt das Basismodul, das Sie in HTML erleichtert, Sie mit ihm und einigen der Konzepte dahinter vertraut macht. Und dann gibt es noch mehr fortgeschrittene Altersspur. Das ist Modul Nummer zwei, wo Sie in fortgeschrittenere Stücke von HTML laufen, einschließlich einer Menge von HTML fünf und X html, und Sie werden über all das in diesem Kurs lernen. Am Ende jedes Moduls befindet sich ein Quiz. Das erste Modul Quiz ist etwa 70 Fragen, und wenn wir am Ende weitere Videos zum ersten Modul hinzufügen, wird es mehr Fragen im ersten Modul geben. Quiz. Thesis Modul hat eine viel umfangreichere Quiz über 100 20 Fragen, und jedes Quiz geht nur über das aktuelle Modul. Insgesamt gibt es also fast 200 Fragen, auf die du am Ende fast jedes Videos getestet wirst. Es gibt auch eine Aufgabe. Diese Aufgabe wird entweder etwas sehr einfaches sein, wie zum Beispiel die Elemente, wie zum Beispiel die Elemente, ein wenig Übung mit den Attributen, so weiter und so weiter, oder die Aufgabe könnte eine ganze Seite erstellen, erstellen gesamte Form, senden Sie das Formular, lernte die Theorie dahinter, und das hängt alles davon ab, was das Video ist und worum es in den vorherigen Videos ging. Nun, um das Beste aus diesem Kurs herauszuholen, werden Sie das Video sehen wollen, um genau darauf zu achten, was vor sich geht. Möglicherweise Notizen machen, wenn Sie in Notizen sind, würde ich dringend empfehlen, Notizen zu machen und die Aufgabe am Ende jedes Videos zu erledigen. Selbst wenn Sie damit vertraut sind, machen Sie einfach die Aufgabe ein wenig mehr. Üben Sie nie jemandem weh. Die Aufgaben sind in der Regel ziemlich kurz, so dass sie nicht sehr lange dauern, wenn Sie bereits damit vertraut sind. Jetzt. Eine Sache, die Sie vielleicht an diesem speziellen Kurs bemerkt haben, den Sie in vielen anderen Kursen nicht gesehen haben, ist das rein HTML, wo viele andere Kurse HTML und CSS oder HTML, CSS und JavaScript sind und einfach zu viel. Dies ist ein hochspezialisierter Kurs, und am Ende dieses Kurses werden Sie ein Profi sein. Wenn es darum geht, HTML zu schreiben, werden Sie nicht mittelmäßig sein. Sie werden nicht akzeptabel oder in Ordnung sein, Sie werden ein Profi sein, wenn es darum geht, HTML zu schreiben. Meinung nach werden Sie das Beste aus diesem Kurs bekommen, indem Sie jedes Video einzeln durchlaufen, die Aufgabe erledigen, die Hausaufgaben machen, Ihre Quiz machen und nur üben. Wie Sie wahrscheinlich vermutet haben, ist dieser Kurs ziemlich kompakt. Es gibt keinen magischen Flaum. Es gibt nicht viel totes Schweigen. Es kommt direkt auf den Punkt. Die Idee hinter einem solchen kompakten Kurs ist, dass je weniger Zeit Sie verbringen, Videos anzuschauen , desto mehr Zeit können Sie verbringen Eigentlich üben, was Sie mit dem gelernt haben, sagte, Ich möchte eine riesige Willkommen auf die ultimative HTML senden Entwicklerkurs und lassen Sie uns Sie in einen professionellen Entwickler verwandeln. 2. Was ist HTML?: Was ist HTML? HTML steht für Hypertext-Markup-Sprache. Es ist die Struktur hinter jeder einzelnen Webseite, auf der Sie jemals gewesen sind, und es ist verantwortlich für die Absätze, die Videos, die Bilder, die Forints. Die fett kursiv formatierten Zeichen unterstreichen das alles. Es ist verantwortlich für jeden Teil, den Sie auf einer Seite sehen. Jetzt hat es nichts mit dem eigentlichen Styling zu tun, sondern mehr von der Vorlage ing. Wenn Sie also eine Spalte links von der Seite rechts von der Seite sehen, vielleicht die Arnold-Spalten. Aber es gibt eine Navigationsleiste oben auf der Seite, das ist alles. HTML. Es ist das Skelett jeder einzelnen Webseite. 3. Editoren: HTML zu schreiben und Sie brauchen, was ein Editor und HTML-Editor genannt wird, kann eine sehr einfache Programme, wie Kein Pad für den PC oder Text an ihm für den Mac sein. Aber es gibt andere Programme da draußen so einen erhabenen Text , den Sie hier sehen können. Gehen Sie zu sublime tex dot com on, und Sie können eine Kopie davon bekommen. Alternativ können Sie kein Pad Plus Plus verwenden, das ist nur kein Pad Bindestrich plus Bindestrich plus Punktorganisationen. Aber am Ende müssen Sie kein HTML mit einem erweiterten Editor schreiben, Sie können einfach einen einfachen Texteditor verwenden, und das wird perfekt funktionieren. Hier ist ein Beispiel für kein Pad plus plus und wir werden jetzt etwas HTML schreiben. Wir werden viele wichtige Teile von HTML überspringen, und ich werde Ihnen eine kurze Demonstration zeigen, wie HTML aussieht. Also hier ist ein Absatz, und Sie werden feststellen, wenn ich Schrägstrich p tippe und wir werden über Elemente in einer zukünftigen Lektion sprechen . Ich gebe Ihnen hier nur eine kurze Demonstration. Kein Pad plus plus versucht, mich zu füllen. Ein guter Editor wird versuchen, Sie und ihre Redakteure dort zu füllen, die Ihnen drastisch helfen, wenn es darum geht, Elemente auszufüllen , Element-Tags für Sie zu schließen und Ihnen einfach helfen, Ihre Website noch schneller zu programmieren. Dafür sagt es mir, dass es ein Absatz ist, also habe ich gerade das Tag geschlossen. Jeder Redakteur ist ein bisschen anders. Sie alle haben ihre Vor- und Nachteile, und letztendlich liegt es an Ihnen, welchen Editor Sie verwenden möchten. Aber warum haben HTML geschrieben? Du brauchst keinen sehr ausgefallenen Redakteur. Sie brauchen nur etwas Grundlegendes, das eine gerade Textdatei wie diese schreiben und als Punkt-HTML speichern kann . Also werde ich uns nur als Seite einen Punkt html speichern, die untere Mrs. dot txt klicken Sie auf Speichern. Und jetzt kann ich das in meinem Browser öffnen. Es ist jetzt, wenn ich finde, wo die Datei gespeichert wurde, klicken Sie mit der rechten Maustaste und öffnen Sie mit Wählen Sie Ihre Wahl des Browsers. Firefox Chrome Internet Explorer. Ich habe auch Opern Safari hier installiert. Wenn ich Google Chrome verwende, dann ist hier ein Beispiel dafür, wie sich das herausstellen wird, sagt Hier ist ein Absatz und ich werde das einfach wirklich schnell kopieren. Ich habe die Datei gespeichert und wenn ich meine Seite aktualisiere, hier ist ein zweiter Absatz. Weißt du, wenn es einen signifikanten Zeilenumbruch gibt, gibt es einen Unterschied zwischen den beiden Zeilen hier. Das ist, was ein Absatz ist, und wir werden mehr in Absätze und all diese verschiedenen Elemente von dem, was all dies tatsächlich in der Zukunft bedeutet. Aber im Moment wollte es Ihnen zeigen, wie einfach Sie HTML mit buchstäblich jedem Editor schreiben können. Also für jetzt, was ich möchte, dass Sie einen Editor finden, den Sie mögen könnten, ob es sich um erhabene Steuer, kein Pad plus Text hinzugefügt oder auch wenn Sie einfach kein Pad auf Microsoft nur von selbst verwenden möchten . Ihre Aufgabe für dieses Video ist es, einen Editor zu finden, mit dem Sie das Gefühl haben, mit dem Sie wieder arbeiten können. Dieses Beispiel. Ich habe gerade kein Pad Plus verwendet, es ist sehr einfach, macht den Job, aber ich habe kein Gefühl, dass Sie etwas verwenden müssen, was ich gerade benutze. 4. Browser: ein Browser ist, wie Sie das Internet sehen ist, wie Sie Websites sehen, Webseiten sagen Ihnen, Entdecken Sie Facebook und Google. Es ist wahrscheinlich, wie Sie dieses Video gerade jetzt sehen, und es gibt Dutzende, wenn nicht Hunderte, von verschiedenen Browsern da draußen. Aber wirklich, es gibt sechs primäre Browser, die sie von links nach rechts gehen. Wir haben Microsoft Internet Explorer, Microsoft neue Version von Internet Explorer namens Edge. Dann haben wir Mozilla Firefox, Google Chrome, Apple Safari und Oper. Jetzt, bei weitem der beliebteste Browser im Internet ist Google Chrome. Der zweite Platz neigt dazu, gefeuert zu werden. Fox Third Platz neigt dazu, Safari zu sein, dann Internet Explorer. Ein Vorteil in der Oper, wissen Sie, dass diese Prozentsätze so niedrig sind? Es spielt zu diesem Zeitpunkt keine Rolle. Nun, Edge könnte in Zukunft beliebter sein. Es ist relativ neu, kam mit Windows 10, aber heute etwa die Hälfte aller auf der Welt verwendet Google Chrome . Jetzt, als Webentwickler, spielt der Browser eine Rolle. Jeder Browser verwaltet HTML, CSS und JavaScript nur ein wenig anders. Jeder hat seine eigenen Regeln, die sie erfüllen wollen, und es gibt tendenziell einen Standard hinter ihnen, aber die Standards sind ein bisschen älter. zum Beispiel Wenn Siezum Beispieletwas fett machen möchten, würden Sie dasselbe fett formatierte HTML-Tag und alle Browser verwenden, da dies ein älteres Element ist. Aber ab sofort, wenn Sie eine Leinwand erstellen wollten und das ist ein HTML-Fünf-Element, über das in der Zukunft sprechen wird , werden alte Versionen dieser Browser nicht damit umgehen. Sie möchten also immer Ihren Browser aktualisieren lassen. Als Webentwickler werden Sie garantiert auf ein Problem stoßen, bei dem einer Ihrer Benutzer oder einer Ihrer zahlenden Kunden Sie Ihre Website nicht nutzen können, weil etwas nicht funktioniert. Wahrscheinlich ist JavaScript deaktiviert oder verwendet Internet Explorer sechs anstelle von Microsoft Edge oder Internet Explorer. Was auch immer die neueste Version ist, vielleicht verwenden sie einen sehr alten Laptop, und es läuft eine alte Version von Safari. Nun, der Unterschied zwischen, zum Beispiel, Google Chrome One und Google Chrome 42 ist signifikant, und mit der Entwicklung der Technologie, der Browser entwickelt sich auch. Und wenn sich der Browser weiterentwickelt, bedeutet das, dass wir Zugriff auf bessere Funktionen, bessere Funktionen, bessere Animationen und Morrell haben. Eine Münzstätte werden standardisiert, so beachten Sie nur, dass vorwärts zu bewegen. Irgendwann wird Ihnen dieses Problem passieren. Es passiert jedem einzelnen von uns und dass der Browser, den jemand benutzt, eine wichtige Rolle spielt . Die meisten Entwickler mögen es nicht, für Internet Explorer zu bauen, weil Internet Explorer gerne mit anderen Regeln spielt als alle anderen, während jeder andere irgendwie zukommt. Wenn Sie also eine Website erstellen, ob nur HTML oder eine Reihe von verschiedenen Sprachen verwenden, werden Sie Ihre Seiten auf all den verschiedenen Browsern testen wollen, die Sie für sechs von sechs Browsern schießen können . Testen Sie Ihre Website in Internet Explorer, Microsoft Edge, Mozilla Firefox, Google Chrome Safari sowie Opera und sehen Sie, ob es so funktioniert, wie Sie es wollten. und wieder wirst du über ein bestimmtes Element stolpern, das nicht so funktioniert, wie es sein sollte, und das wird zu einem großen Problem. Dann müssen Sie umgehen, wenn Sie eine Website oder einen Dienst oder eine Anwendung erstellen und es auf allen sechs dieser Browser funktioniert, besteht die Wahrscheinlichkeit, dass, wenn jemand zu Ihnen kommt und sagt: Hey, Hey, Ihre Website funktioniert nicht für Ich habe, ist es wahrscheinlich wegen der Verwendung einer alten Version aus ihrem Browser oder sie haben JavaScript ausgeschaltet. Wir werden in Zukunft mehr über JavaScript sprechen, aber im Moment bleiben wir einfach bei HTML bleiben und jeden HTML-Code anzeigen. Wir brauchen einen dieser sechs Browser. Jetzt bevorzuge ich Chrom. Viele Leute bevorzugen Firefox. Viele Mac-Nutzer werden bei Safari bleiben. Diese neigen dazu, die Großen Drei in dieser Reihenfolge zu sein. Ihre Aufgabe für dieses Video besteht darin, alle sechs dieser Browser herunterzuladen und zu installieren. Nein, abhängig von Ihrem Computer. Alle 6 sind möglicherweise nicht verfügbar für Sie, also versuchen Sie, so viele wie möglich als bloßes Minimum zu bekommen. Versuchen Sie, Internet Explorer, Firefox, Firefox, Chrome Safari und Oper zu bekommen. Wenn Sie Microsoft Edge nicht erhalten können, weil Sie sich auf einem älteren Mac oder einem älteren Fenstersystem befinden, ist das in Ordnung. Aber laden Sie herunter und installieren Sie so viele wie möglich 5. Elemente: H E Mail-Seiten bestehen aus Elementen oder manchmal auch als Tag bezeichnet, wo sie ein Start-Tag in einem End-Tag haben. Ungewöhnlich irgendeine Art von Inhalt zwischen den beiden Tags. Als Live-Beispiel werden wir hier unser erstes Tag schreiben und hier etwas mehr Platz für uns machen. Ich werde Ihnen zeigen, wie die funktionieren. Also haben wir HTML-Tag, und das geht zwischen den weniger als und größer als Symbole einige Inhalte dazwischen. Und dann schließen Sie das HTML-Tag mit einem Schrägstrich weniger als einem Schrägstrich. Merkst du, wie diese übereinstimmen? Aber dieser beginnt mit dem weniger als-Tag, und dieser beginnt mit weniger als Schrägstrich Steuer. Das heißt, es schließt es jetzt. Dies ist ein Element, in dem es Content-ID zwischen ihm sein kann. Ein gutes Beispiel dafür wäre das Absatzelement, die fett gedruckten Elemente, das kursive Element. Alle diese haben eine Art von Inhalt dazwischen. Also, wenn wir etwas kursiv machen wollten, würden wir schreiben Eröffnung Eyetech mit einem schließenden I-Tag. Jetzt haben wir auch eine andere Art von Element, und es ist ein selbstschließendes Element. Diese Elemente sind ein bisschen anders, aber irgendwie in der gleichen Linie. Es gibt einige Elemente, die keinen Inhalt enthalten, da sie Attribute verwenden, und wir werden Attribute in naher Zukunft abdecken. Eines dieser Beispiele wären die Bildelemente. Also für diesen, würden wir ich m g haben, die Bild SRC Quelle ist. Wir setzen Website dot com slash imaged j peg dort hinein und wir schließen es so. Es gibt also keinen Schrägstrich Bild-Tag. Stattdessen haben wir angegriffen. Das schließt sich, weil Sie keinen Inhalt innerhalb eines Bildes mit Ausnahme des Bildes nein setzen , weiter dies könnten wir tun, was heißt Verschachtelung. Wir können HTML-Elemente in andere HTML-Elemente setzen und dies wird eine Form der Hierarchie zu schaffen . Der einfachste Weg, um Ihre Hierarchie zu erhalten, besteht in der Einrückung durch Einrückung. Sie werden feststellen, dass alles sehr leicht zu verstehen ist. Also hier, lasst uns ein Beispiel machen. Wir werden einen Absatz eröffnen. Hey, ich bin ein Absatz, und in diesem Absatz werden wir etwas fett machen und dann schließe ich Absatz-Tag. Also, hier sehen Sie, ich öffne den Absatz schließen einen Absatz in ihm. Ich habe regulären Text. Ich habe auch ein anderes HTML-Element, um dies fett zu machen, also wird dies auch einen Absatz anzeigen. Ein Za Bolden Bereich. Vergessen Sie nicht, dass es geschlossen werden muss, obwohl es sehr wichtig ist, dass Sie, wenn Sie eine Öffnung haben, ein schließendes Tag haben. Im Falle des Bildes haben wir das öffnende Tag, das schließende Take ist einfach Teil des ursprünglichen öffnenden Tags als auch. Es ist also alles ein Element. Wo ist hier und hier? Es gibt einen öffnenden und schließenden Tag. Das letzte, was Sie hier beachten müssen, ist, dass alle diese Tags mit Kleinbuchstaben Sie kein HTML in Kleinbuchstaben verwenden müssen . Aber strengere Dokumenttypen wie X html erfordern HTML-Tags in Kleinbuchstaben, und das ist eine Standardisierung für alle. Jetzt, ob es Kleinbuchstaben oder höher ist, spielt die Groß- und Kleinschreibung in dieser Zeit keine Rolle. Allerdings ist es normalerweise der beste Ansatz, mit dem Standard zu bleiben, vor allem, wir werden irgendwann mit einem anderen Entwickler arbeiten. Standardisierung Ihres Lebens hilft Ihnen auch bei Suchmaschinen. Also, wenn Google kommt auf Ihre Website und sucht nach bestimmten Informationen, Google wird den HTML wie das, was wir hier geschrieben haben zu sehen. Ihre Aufgabe für dieses Video ist es, Ihre Gunst zu öffnen, Editor, wo es kein Pad plus, plus erhabene keine Pad Steuer auf was auch immer das sein mag. Und richtig, nur ein paar Etiketten. Wir haben den Absatz fett und kursiv Tags in diesem Video übergegangen. Also üben Sie einfach, diese zu schreiben. Öffnen Sie das Absatz-Tag. Setzen Sie etwas Inhalt dazwischen ein oder zwei Satz und schließen Sie ihn dann. Versuchen Sie auch, es zu verschachteln. Öffnen Sie einen Absatz. Schreib einen Satz, richtig, einen Teilsatz. Machen Sie einen der Buchstaben fett, vielleicht machen Sie einen vollen Satz Bolzen. Schließen Sie den Bolzen, einen Abschluss, diesen Absatz-Tag und dann möchte ich, dass Sie diese Datei speichern und sie in Ihrem Browser öffnen, und Sie können sehen, wie es von dort aus aussieht. 6. Hallo Welt: Wenn wir anfangen, über Programmierung oder Programmierung von Websites zu sprechen, neigt dies dazu, die erste Lektion zu sein , und die Lektion wird normalerweise Hello World genannt, und wir werden jetzt eine erste Hallo Welt Seite erstellen, um unsere erste HTML-Seite. Es gibt ein paar Dinge, die wir tun müssen, und wir werden nicht in zu viele schrecklich fortgeschrittene Dinge geraten. Wir wollen nur eine grundlegende HTML-Seitenvorlage erstellen. Unsere Datei muss also jedem Browser sagen, dass dies ein HTML-Pitch ist. Nicht, dass dies eine Textseite oder PDF ist, dass es sich um eine HTML-Seite handelt. Als erstes öffnen wir unsere Seite mit dem HTML-Tag. Ich werde etwas Platz schaffen, und ich werde es ganz am Ende dort schließen. Zwei Abschnitte, auf denen du deinen Kopf hast. Ich werde hier etwas Platz lassen und ich werde dieses Header-Tag schließen. Und dann ist da noch die Leiche. Du kannst es dir so vorstellen. Der Kopf ist, wo das Wissen über die Seite geht. So hat Ihr Seitentiteljahr eine Beschreibung gemacht. Das ganze Zeug wird das alles abdecken. Ihre Titel Ihre Beschreibungen. Irgendwelche Bilder für die gemeinsame Nutzung in sozialen Netzwerken, wie zum Beispiel im offenen Diagramm von Facebook? Wir werden das ganze bisschen später abdecken. Aber was wir jetzt wollen, ist, dass wir Ah, hallo, Weltseite erstellen hallo, wollen. Also das erste, was wir schreiben werden, ist Hallo, Welt. Jetzt können Sie speichern dies als hallo Welt dot html Speichern Sie es, wo immer Sie gespeichert ein zu gehen und finden die Datei rechts Klicken Sie auf und öffnen Sie mit dem Browser Sie wollen öffnen Sie es mit. Ich werde es mit Google Chrome öffnen und wie Sie sehen können, ist diese Hello Welt. Das ist alles, was es dazu gibt. Sobald Sie zu dem Schritt gekommen sind, haben Sie offiziell Ihre erste HTML-Seite erstellt. Ihre Aufgabe für dieses Video ist es, die Vorlage zu erstellen, die ich für Sie in diesem Video erstellt habe . Im Wesentlichen, kopieren Sie einfach, was ich Ihnen gegeben habe. Sie werden Ihr HTML-Tag ausschreiben. Du gehst es zu schließen, du wirst etwas Platz da drinnen lassen und einen Kopf und einen Körper Tag darin haben. Und in diesem Körper nehmen, wollen Sie Hallo Welt schreiben. Es sollte genau so aussehen wie mein Beispiel 7. Seitentitel: Ihre HTML-Seiten so einfach wie mit einem bestimmten HTML-Element zu betiteln. Und das ist natürlich natürlich das Titelelement im letzten Video. Wir gingen über die Erstellung einer HTML-Vorlage, wo wir über HTML innerhalb unseres HTML-Tags verschachtelt und wir ließen unser Kopf-Element leer. Diesmal werden wir das nicht tun. Wir werden einen Titel erstellen, und der Titel dieser Seite wird hallo Welttitel sein. Auf diese Weise können wir sehen, was der Titel tatsächlich ist. Bevor ich diese Datei speichere, werde ich Ihnen zeigen, wie es aussieht, bevor und nachdem das Titel-Tag hinzugefügt wurde. Dies ist, bevor wir das Titel-Tag sagt hallo Welt dot html. Es ist der Name der Datei, der normalerweise nicht das ist, was wir wollen. In der Tat, fast jedes einzelne Szenario, das ist nicht das, was wir wollen. Stattdessen wollen wir hier einen tatsächlichen Titel haben, also gehe ich voran und speichere diesen und aktualisiere dann diese Seite und es steht hallo Welttitel oben, wo der Inhalt der Seite gleich bleibt. Der Titel ändert sich in Testtitel. Ich werde Ihnen zeigen, dass es sich noch einmal ändert, sobald ich auf Aktualisieren klicke und so ändern Sie den Titel Ihrer Seite. Ihre Aufgabe für dieses Video ist es, ein Hello World Dokument zu erstellen und den Titel hinzuzufügen. Sobald Sie Ihren Titel hinzugefügt haben, kann aufgerufen werden, was auch immer Sie möchten, öffnen Sie diese Datei in Ihrem Browser und beachten Sie, ob der Titel tatsächlich geändert wird. Wenn sich der Titel geändert hat, haben Sie die Aufgabe abgeschlossen. 8. Doctype: Der HTML-DOC-Typ sagt dem Browser technisch, dass es sich um eine HTML-Datei handelt. Bevor wir einfach gesagt haben, dass dieses Element hier uns sagt, dass die Seite HTML sein wird, und die meisten Browser können das herausfinden. In manchen Fällen reicht das jedochnicht aus. In manchen Fällen reicht das jedoch Stattdessen, was wir wollen, ist, dass wir am Anfang ein Element darüber hinzufügen wollen, den DOC-Typ genannt. Jetzt beginnt es mit einem Ausrufezeichen, wie Sie hier sehen können. Leerzeichen HTML. Dies ist der HTML-5-Dokumenttyp, und dies ist die einzige Ausnahme zu dieser Regel, bei der Ihr HTML-Code Kleinbuchstaben sein sollte. Dieser sollte bei den meisten Browsern Großbuchstaben sein. Das ist nicht so wichtig, aber wieder, aber wieder, es ist ein Standardisierungsproblem. Wir möchten sicherstellen, dass alle Seiten gleich sind. Wenn mehr Seiten können von mehr Browsern die exakt gleiche Weise gelesen werden, dann wird Ihre Website sichtbar Grab oder Menschen auf genau die gleiche Weise über den gesamten Planeten sein. Jetzt, mit dem Doc-Typ HTML da drin. Denken Sie daran, das ist der HTML-5-Dokumenttyp. Das ist der neue alte HTML-Doc-Typ, den wir jedes Mal verwenden möchten, der dem Browser technisch mitteilt, dass dies keine HTML-Seite ist und innerhalb des HTML-Elements ist, wohin HTML gehen wird . Ich wollte in Zukunft ein wenig Platz in der Nähe schaffen, damit wir arbeiten können. Das war eine allgemeine Regel. All Ihr HTML sollte sich hier in diesem Element befinden. Ihre Aufgabe für dieses Video ist es, in html fünf doc-Typ zu Ihrer bestehenden hallo Welt Seite hinzuzufügen . Wenn Sie noch keine Hallo Welt Seite haben, erstellen Sie eine Seite und stellen Sie sicher, dass sie das Kleiner-als-Zeichen und ein Ausrufezeichen enthält. Dieses Ausrufezeichen ist absolut lebenswichtig. 9. Attribute: HTML-Attribute, oder einfach nur, dass sie einem bestimmten Element zuschreiben. Jedes HTML-Tag oder jedes HTML-Element hat unterschiedliche Attribute. Dass es auf Attribute zugreifen kann, ist im Grunde eine Möglichkeit, zusätzliche Informationen über ein bestimmtes Element bereitzustellen . Sie werden immer im Start-Tag angegeben. Oder, wenn es ah, kein Start- und End-Tag gibt, ist es nur ein einzelnes Tag. Es wird auch dort gefunden werden, und sie kommen in Namenswertpaaren. Die 1. 1, die wir betrachten möchten, sind die Sprachattribute, und dieses gehört zum HTML. Also, wenn wir Lang hinzufügen ist gleich und stash uns, wir sagen, dass die Sprache, die die Attribute ist gleich Englisch ist. Streichen Sie uns. Das ist amerikanisches Englisch. Nun, da man, zum größten Teil, wirklich nur für das HTML-Element verwendet wird. Aber es gibt andere verfügbare Attribute für sehr ist verschiedene Elemente, und es gibt auch einige globale Attribute. Ah, globale Attribute sind ein Attribut, das Sie für so ziemlich jedes Tag verwenden können. Also, wenn wir hier nur einen Absatz hinzufügen, einige Inhalte trennen und wir hier einen weiteren Absatz hinzufügen, hat das einen Titel. Jetzt wird dieser Absatz ein Attribut namens Titel haben, ist gleich einem Beispieltitel. Wenn wir das speichern und wir öffnen dies in ihrem Browser hier sehen wir es sieht aus wie im Grunde nur hallo Welt in einem anderen Absatz. Aber der Titel erscheint, wenn wir ihre Maus über, sagt ein Beispiel-Titel, und Sie bemerken, dass viele beliebte Websites wie Facebook immer noch verwenden diese. Es gibt viele, viele Attribute, und nicht alle von ihnen sind auf jedes Element anwendbar. Zum Beispiel, wenn wir ein Bild hinzufügen, kommt das Bild mit einem mit und Höhe Attribute. Wir können ein globales Titelattribut hinzufügen und ein Altarattribute das Salz ist der alternative Text, der angezeigt wird, wenn das Bild nicht verfügbar ist und die Quelle, die in einigen Fällen auf das Bild oder Video beschränkt ist, wird hier gehen. Wir schließen das ab und es sieht einfach so aus. Jetzt, wenn wir über die Größe sprechen, könnte eine Breite 250 mal 250 werden diese Pixel sein. Aber Standard-Augenbrauen wird nach Pixeln suchen. Der Titel könnte ein beliebiger Titel sein. Es könnte alle Rückkehr itiveness Titel für fehlende Bild sein, und die Quelle wäre Website dot com Schrägstrich Bild Punkt j. Tasche. Jetzt sollte fast jedes Attribut Kleinbuchstaben sein. Also, was Sie mit dem Höhentitel Ault-Quelle sehen, sollte alles, was in ein offenes Element hineingeht , niedriger sein. Fall sollte immer Kleinbuchstaben sein, und das gilt auch für die Standardisierung unserer Elemente. Daher sollten alle HTML-Elemente und Attribute die ganze Zeit in Kleinbuchstaben geschrieben werden. Nun, wenn wir uns Attribute ansehen, weil sie paarweise kommen, wie Sie mit dem Bild sehen können, ist gleich und dann hat es Anführungszeichen. Nun, das funktioniert, oder wir können Sie einfache Anführungszeichen, die beide funktionieren. Aber was nicht funktioniert, ist gleich 2 50 Die meisten Browser wissen, wie man dies herausfinden kann, aber wenn Sie verwenden, ist Titel gleich diesem ist ein Beispieltitel, und lassen Sie uns Element hier umbrechen, stellen Sie das span-Element ein. Wie Sie sehen können, Kein Pad plus plus weiß nicht, was hier los ist. Es weiß nicht, dass dies Teil der Attribute ist, weil ihre Leerzeichen in ihren Räumen die Trennzeichen zwischen Attributen sind. Also, wenn wir uns in Anführungszeichen und doppelte Anführungszeichen eingewickelt Luft, typischerweise der HTML-Standard. Aber auch hier stehen Ihnen beide jederzeit zur Verfügung. Dann werden Sie feststellen, dass dies blau durch kein Haustier plus plus automatisch hervorgehoben wird, und es sollte perfekt funktionieren, dass da drin. Zum Beispiel werden wir dieses Bild verschieben, weil es an diesem Ort kein Bild gibt. Ab sofort, wenn Sie weiter lange nach HTML, werden Sie anfangen, eine andere Sprache namens CSS Cascading Stylesheets zu suchen. Jetzt werden wir jetzt kein Styling abdecken, aber um Ihnen eine Vorstellung davon zu geben, wie es aussehen würde, haben wir ein paar weitere globale Attribute, die wir verwenden können Klasse wieder eine von ihnen. Dies ist für CSS-Ideen, eine andere und Stil, wo wir CSS direkt in ein Attribut hinzufügen können. Keine Cover-Klassen, Ideen und Stile später, aber im Moment müssen Sie nur wissen, dass ein Attribut zusätzliche Informationen zu einem Element bereitstellt . Ihre Aufgabe für dieses Video besteht also darin, das Titelattribut zu einem anderen Absatz hinzuzufügen Erstellen Sie also zuerst einen neuen Absatz. Denken Sie daran, das ist mit dem P-Tag und dann zweiten, fügen Sie das title-Attribut zum Absatzelement wie So gehen Sie voran und tun Sie das Once getan hat . Öffnen Sie diese Seite in Ihrem Browser. Bewegen Sie den Mauszeiger über den Text. Denken Sie daran, dass wir das mit diesem kleinen Abschnitt hier gemacht haben. Und wenn wir unsere meisten über die kleinen Pop-Up-Shows der kleinen Miniatur auf der Seite setzen , zeigt sich das Display mit einem anderen Titel. Also beim Titel, Attribut zu einem neuen Absatz mit Sätzen Seite davon. Legen Sie die Maus darüber. Wenn du es siehst, warst du fertig. 10. Headers: HTML. Header sind die Art und Weise, wie wir wichtige Titel oder Schlagzeilen erstellen und HTML waren in der Lage, die H eins bis H sechs Header zu verwenden und in diesem Video werden wir schnell über jeden einzelnen gehen. Schauen wir uns das wichtigste Header-Tag an und das ist das H ein Element. Dies ist der größte verfügbare Header. Also, wenn ich diese Seite öffne, sehen wir das. Dies ist der größte verfügbare Header. Sehen wir uns nun den Unterschied zwischen H eins und in h zwei an. Dieser wird sagen, dass ich ein sekundärer Header bin. Du bemerkst, dass es einen großen Unterschied gibt und das Gleiche kann mit einem H drei gelten und das geht bis zu H sechs weiter, erinnerst du dich? Also hier haben wir 81 h zwei h drei. Wir übersprungen vier und fünf und in h sechs, so können Sie sehen, die H sechs ist ziemlich klein. Schauen wir uns nun einen regulären Absatz an, so dass Sie sehen können, dass die H sechs Header tatsächlich kleiner als der reguläre Absatztext, und das ist ganz normal für die meisten Browser, um es auf diese Weise anzuzeigen. Keine Kopfzeilen sind sehr wichtig, da sie bestimmte Inhalte auf Ihrer Seite angeben. Dein H ist wahrscheinlich die wichtigste Suchmaschinen-Suchmaschinen , die das h finden und es wird zu Es wird es sehen und es lesen, analysieren, herausfinden,worum analysieren, herausfinden, es geht und erkennen, dass Hey, ja, hier geht es um den Inhalt, der auf dieser Seite ist, und es ist sehr relevant. Wir werden diese Informationen verwenden. Die Suchmaschinenoptimierung ist ein ganz anderes Thema, aber mein Rat ist, nie mehr als ein h ein Tag auf einer Seite zu verwenden, es sei denn, Sie müssen unbedingt . Das H one -Element sollte für den Seitentitel verwendet werden. Wenn Sie einen massiven Artikel oder eine Zeitschrift haben, in der ein Blogger möglicherweise H nur für den Titel dieses Blocks verwendet hat, trennen Artikel zwei Ihren Inhalt, möglicherweise mit H zwei und H drei. Dies hilft ihren Jenn Jones zu verstehen, was die Informationen sind. Ah, worum es bei den Informationen unten geht. Und am wichtigsten ist, dass Sie einfach nicht viel Text wollen. Diese große auf Ihrer Seite sieht nicht sehr schön aus. Also Ihre Aufgabe für dieses Video ist es, eine Seite zu erstellen und erstellen 81 h zwei h drei h vier h fünf und H sechs Elemente. Legen Sie sie auf eine Seite und öffnen Sie diese Seite in Ihrem Browser und Sie werden etwas in der Richtung dieser sehen . Ich habe H ausländische H fünf übersprungen. Sie werden diese haben, damit Sie sehen können, dass der Unterschied ist, wenn Sie Ihre Seite geöffnet haben und Sie die Unterschiede zwischen den Header-Elementen sehr deutlich sehen können, dann sind Sie fertig. 11. Line: html ist nicht platzempfindlich, und das wird zu einem Problem, wenn Sie neue Zeilen in Ihrem Inhalt erstellen möchten. Also werde ich Ihnen ein kurzes Beispiel dafür zeigen, wie HTML nicht platzempfindlich ist. Und dann werden wir neue Linien erstellen. Also zuerst ist dies ein Absatz ohne Leerzeichen und eine zweite Zeile hier drin. Ich werde das retten. Und als ich es in meinem Browser geöffnet habe, ist alles in der gleichen Zeile. Was ich tun kann, ist, dass ich mit der rechten Maustaste klicken kann zur Quelle gehen und die Quelle zeigt, wie ich es in meinem Editor geschrieben habe, aber ich wollte Zeilen nicht eins. Und es passiert auch nicht nur mit neuen Linien . Es passiert mit zu vielen Leerzeichen. Hier ist ein Beispiel. Nun, wenn ich die Seite aktualisiere, wurden all diese Leerzeichen in ein Leerzeichen verwandelt. Und wenn ich mir den Quellcode anschaue, hat sich der Quellcode nicht genau dasselbe geändert. diese Weise interpretiert der Browser die Informationen, die Sie ihm geben. Also, wenn Sie es mehr als ein Leerzeichen geben, wie Sie hier sehen, denkt der Browser automatisch OK zeigt nur ein Leerzeichen jetzt, um eine neue Zeile zu erstellen. Wir verwenden das B R-Element. Dies ist eines jener Elemente, die sich selbst schließt, benötigt also kein öffnendes oder schließendes Tag, und das liegt daran, dass es keinen Inhalt gibt, den man darin einfügen kann. Also, wenn Sie eine BR hier setzen, aber wir sind hier, wo wir eine neue Zeile wollen, speichern Sie das. Also wollen wir eine Linie ausbrechen das Ende dieser Periode. Wir wollen einen Zeilenumbruch am Ende dieses Zeitraums. Wir wollen einen weiteren Zeilenumbruch, aber nichts in dieser Zeile. Und dann wollen wir unsere Strafe. Das hat viel zu viele Räume darin. Speichern Sie das und aus zeigt die Art und Weise, wie wir die Ausnahme von den Leerzeichen wollen. Nun fügen wir dort einen weiteren Zeilenumbruch hinzu. Ich lasse hier etwas Platz für uns, und ich will mehr als einen Raum zwischen dem und dem hier. Diese Rohre, wenn ich dir sehr schnell und gut hervorgehoben zeige, ist dieses Rohr ein Raum, und dann markierst du die andere Pipe, diese grundlegende Rip davor. Aber wenn ich viele Leerzeichen hinzufüge, passiert nichts. Ich aktualisiere eine Seite. Nichts geschieht also stattdessen, was ich Dio möchte, das ist ein wenig fortgeschrittener HTML. Wir wollen das und Zeichen und B S P Semikolon. Wenn Sie das speichern, setzen Sie auf beiden Seiten ein Leerzeichen, das als Leerzeichen zählt. Dieses Zeichen wird dann auf die gleiche Weise wie jedes andere Zeichen interpretiert. Ein Alphabet wird interpretiert. Also, wenn ich dich auffrische, habe ich drei Leerzeichen da drin. Wir schauen uns den Quellcode an. Ich habe hier einen Platz. Ich habe den Raum, den wir ihm gesagt haben, zu schaffen, und wir haben einen Raum danach. Das ist jetzt ein kleiner Bonus für dieses Video. Das ist nicht wichtig zu wissen. So sind Sie Test für dieses Video ist, nicht zu viele Leerzeichen hinzuzufügen. Ihre Aufgabe ist einfach auch. Erstellen Sie einen neuen Absatz, fügen Sie neue Zeilen hinzu und überprüfen Sie, ob Sie es richtig gemacht haben. 12. Mutig: , um Ihren Text fett zu machen, fügen Sie einfach das B-Element hinzu. Wenn Sie also hier und innerhalb dieses Absatzes einen neuen Absatz erstellen, werde ich fett sein. Jetzt möchte ich sagen, ich werde mutig sein, sollte verschraubt werden. Das ist alles, was wir tun, ist das Element Schrägstrich B hinzuzufügen, um das Tag zu schließen, speichern Sie es in Ihrem Browser geöffnet. Und jetzt steht es in diesem Absatz, ich werde fett sein, und dieser letzte Teil ist fett. Es ist genau so, wie wir es gesagt haben. Ihre Aufgabe ist es, einen neuen Absatz zu erstellen und darin einen Satz zu schreiben und die Hälfte davon fett zu machen. Testen Sie Ihre Seite. Wenn sich die Hälfte davon als fett herausstellt, dann haben Sie Ihren Satz richtig betont. 13. Italics: Durch das Hinzufügen von Kursivzeichen zu Ihrer Seite wird dem, was Sie erklären möchten, eine Hervorhebung hinzugefügt. Zum Beispiel wird das Wort wirklich oft im Text und in der Sprache betont. Wenn wir also sagen, das ist wirklich einfach, nun, wir könnten alle Buchstaben groß schreiben oder diese Kleinbuchstaben machen und kursiv hinzufügen. Nun, wenn wir eine Vorschau darauf, wissen Sie, ist das wirklich betont und alle anderen Texas normal. Ihre Aufgabe für dieses Video ist es, Absatzelemente zu öffnen und zu schließen, wie ich es gerade richtig gemacht habe. Jeder alte Satz, den du magst. Es muss nicht einmal Sinn ergeben. Betonen Sie, indem Sie bestimmten Wörtern Kursiv hinzufügen. Öffnen Sie die Seite in Ihrem Browser. Vergewissern Sie sich, dass Ihre Worte uns Augen sagen. Würden Sie überprüfen, ob Ihre Wörter kursiv dargestellt sind? Sie haben Ihren Satz erfolgreich betont, und Sie sind fertig. 14. Unterlinie: Oft möchten Sie zugrunde liegende Steer-Wörter hinzufügen, um eine besondere Art von Hervorhebung hinzuzufügen. Es ist wichtig zu verstehen, dass das zugrunde liegende Element nicht nur veraltete ID für HTML fünf ist . Es hat jetzt einen spezifischen Zweck für HTML fünf, was technisch nicht zu unterstreichen oder zu betonen ist. Das Element, das wir im Begriff sind zu lernen, ist nicht zur Betonung gedacht. Fett wird normalerweise für Überschriften, Kopfzeilen, Überschriften verwendet Kopfzeilen, . Kursiv wird normalerweise zur Hervorhebung verwendet, und in HTML 5 wurde das U-Element für den zugrunde liegenden Wert veraltet. ID, die nicht mehr zum Hinzufügen von Betonung gedacht ist. Stattdessen ist das U-Element für die Darstellung von Wörtern gedacht, die sich drastisch vom normalen Text unterscheiden . Zum Beispiel falsch geschriebene Wörter. Wenn Sie nur einen Basiswert zu einem Wort hinzufügen möchten und es keine bestimmte Bedeutung hat, können Sie dafür CSS verwenden. Nein, wir lernen noch nicht über CSS, aber es ist immer noch wichtig, dass Sie verstehen, was das zugrunde liegende Element ist. Also, um eine Unterstreichung nur bei Ihnen hinzuzufügen, wenn wir sagen, dass im Blick es, Sie unterstrichen werden. Nun , seit HTML fünf, sollten wir es nicht so verwenden. Ich habe dies einfach als Beispiel gemacht, der richtige Weg wäre, wenn das Wort, das Sie falsch geschrieben wurde. Diese Unterstreichung fügt nun eine Betonung hinzu, die zeigt, dass dieses Wort nicht hineinpasst. Das ist der richtige Weg, um ein HTML Five zu verwenden. Ihre Aufgabe ist also Erstellen Sie ein neues Absatzelement. Schreiben Sie einen Satz Anzeige unterstrichen Öffnen Sie es in Ihrem Browser. Überprüfen Sie, ob Unterstriche vorhanden sind. 15. Kommentare: Ein Kommentar in einer beliebigen Programmiersprache, einschließlich HTML, ist ein Codeabschnitt, der nicht angezeigt wird oder nicht ausgeführt wird. In diesem Fall wird es einfach nicht angezeigt, aber es wird immer noch in ihrem Quellcode erscheinen, um einen HTML-Kommentar zu starten. Es ist weniger als Ausrufezeichen, Bindestrich, Bindestrich und alles in Hier ist ein Kommentar, und, wie Sie kein Pad plus sehen können, weiden Sie diesen Bereich. Es automatisch jetzt, um diesen Kommentar zu schließen. Verwenden Sie Dash Dash größer als als als ein Beispiel. Hier ist mein Text. Ich werde hier einen weiteren Kommentar hinzufügen, und ich werde diese Seite anzeigen. Also alles, was auftaucht, ist „Hier ist meine Steuer“. nun Wenn ichnunmit der rechten Maustaste klicke und zur Seitenquelle gehe, meine Kommentare immer noch angezeigt. Also, wenn Sie etwas Geheimnis verstecken wollen und dort, ist dies nicht der richtige Ort, um es zu tun. Aber wenn Sie kleine Notizen für sich selbst schreiben möchten, ist dies der perfekte Weg, um es zu tun, also können Sie sie auch verwenden, da es meine Fußzeile ist. Wie kleine Notizen, könnten wir sagen, Footer ist unter dieser und jüngste Sprachgruppe einige der Sachen zusammen und hier drin. Ich möchte einen Link hinzufügen, und das wird einfach ohne ersichtlichen Grund zu Google gehen. Wenn ich nun die Seite anzeige, wird der Google-Link angezeigt. Und wenn ich das auskommentieren wollte, damit es nicht wirklich funktioniert, taucht es nicht auf. Kommentare funktionieren in mehreren Zeilen, solange Sie sie öffnen und richtig schließen. Alles in einem Kommentar wird also nicht in Ihrem Browser gerendert. Ihre Aufgabe ist es, ein wenig HTML zu schreiben, das Absatzelement zu verwenden und dann kommentiert, einen Kommentar darüber auszugeben, einen Kommentar darunter zu setzen und dann das Ganze zu kommentieren und ein Gefühl zu bekommen, wie diese Kommentare funktionieren . Wenn Sie sich die Seitenquelle vieler anderer Webseiten ansehen, werden Sie feststellen, dass Kommentare ziemlich häufig sind und sie nicht immer in einem schönen Format wie diesem oder Öffnen und Schließen Tag angezeigt werden . Endet in der gleichen Spalte rechts entlang hier, rechts, ein wenig HTML und dann auskommentiert. Laden Sie, dass jede Frau in Ihrem Browser Und wenn was auch immer Sie auskommentiert nicht angezeigt , haben Sie erfolgreich einen Kommentar erstellt 16. LINKS: Links finden Sie auf so ziemlich jeder Webseite im Internet. Was wir einen Link nennen, meinen wir eigentlich, einen Hyperlink zu nennen. Ein Hyperlink verknüpft eine Seite mit einer anderen Seite So wechseln Sie von einem Dokument in ein anderes Dokument. Schauen wir uns also an, einen Link zu erstellen, der zu einer alten Webseite für dieses Beispiel geht. Wir werden direkt mit Google verknüpfen. Nehmen wir also an, dieser Link geht an Google. Jetzt speichern und zeigen wir diese Seite an. Nichts Außergewöhnliches wird auftauchen. Und wie Sie sehen können, der Link hier nicht angezeigt. Also, was wir tun müssen, ist das A-Element hinzuzufügen. Das A-Element ist unser Link. Es ist unser Hyperlink und ein Link von einer Seite zur anderen. Wir brauchen eine sehr spezifische Attribute. Das sind Attribute namens H R E. F. F. Ist das Attribut, das Ihnen sagt, wohin Sie den Benutzer lenken sollen, wenn er darauf klickt. Also dieser wird zu Google Dot com gehen. Wenn Sie die Seite aktualisieren, erscheint plötzlich Link, ich kann auf diesen Link klicken, und es bringt mich zu google dot com. Ich gehe zurück und wir haben noch weitere Attribute, die wir uns ansehen müssen, und das nennt man die Zielattribute. Dieser ist ein wenig anders als die meisten Attribute, weil er mit einem zugrunde liegenden beginnt Sie der Wert beginnt mit einem zugrunde liegenden Die verfügbaren Werte sind Unterstrich Unterstrich Übergeordneter Unterstrich Selbst und Unterstrich Top. Jetzt wollen wir nur eines davon definieren, und wenn wir ein neues Fenster öffnen wollten, würden wir Underscore Blank verwenden. Also Ziel leer. Wenn ich wieder eine geöffnete obere Seite speichere, wird nichts anders aussehen. jedoch Wenn ichjedochauf diesen Link klicke, der ein neues Fenster unterstrichen Self bringt, ist die Standardeinstellung. Ich meine, es öffnet sich in seinem eigenen Fenster. Sie müssen dies nicht angeben, wenn Sie möchten, dass die neue Seite in einem bestimmten Fenster laden in dem Sie sich gerade befinden, Ziel ist gleich Unterstrich Selbst ist das gleiche wie kein Zielattribut überhaupt. Wie man schnell über die anderen Unterstriche geht. Eltern öffnen Verknüpfungen im Dokumentrahmen, wenn es einen Rahmen gibt, und oben öffnet das Dokument im ganzen Körper. Runter aus dem Fenster. Die meisten Menschen bleiben bei sich selbst oder Eltern oder leer für ein brandneues Fenster. Für dieses Video werden wir sagen, Google muss sich in einem neuen Fenster öffnen, und Ihre Aufgabe für dieses Video ist es, einen Link mit dem A-Element zu erstellen. Machen Sie diesen Link mit einem Zielattribut von leer geöffnet. Das bedeutet, ein neues Fenster zu öffnen und zu speichern. Öffnen Sie diese Datei in Ihrem Browser. Klicken Sie auf Ihren Link. Sobald Sie diese Seite in Ihrem Browser geöffnet haben, klicken Sie auf den Link. Du hast dieses Video fertiggestellt. 17. Interne Links: ein interner Link ist, wie Sie mit einem anderen Abschnitt innerhalb derselben Seite verknüpft haben, während andere Links von einer Seite zu einer anderen Seite von einer Website zu einer anderen Seite Seite führen. Dies verlinkt direkt auf Inhalte, die sich noch auf derselben Seite befinden, im Wesentlichen, im Wesentlichen, damit Sie einen Bildlauf nach unten oder einen Bildlauf nach oben durchführen können, wo immer dieser Inhalt vorhanden ist. Vielleicht werde ich hier ein Beispiel geben sagt Klicken Sie auf diesen Link. Und anstatt eine Website oder eine Webseite hinzuzufügen oder um, wissen Sie, ah, Datei wie Index Punkt HTML, werden wir Nummernzeichen hinzufügen, allgemein bekannt als Hashtag. Nun, Anderson, um diesen Link eins zu nennen, und ich werde es schaffen. Also werde ich hier nur einen leeren Raum schaffen, und dies wird uns erlauben, ihre Seite für eine ganze Weile nach unten zu scrollen, dass eine Vorschau dies Sie sehen können, dass meine Bildlaufleiste aufgetaucht ist. Ich habe den Link ganz oben, und wenn ich nach unten scrollen, bin ich immer noch ganz unten scrollen, sagt mehr Inhalt hier. Jetzt der Link an der Spitze. Wenn ich darauf klicke, passiert nichts. Aber in der u. R. R. L Bar, es hat unsere co dot html Datei. Das ist die Datei, die ich gerade schreibe, die die Nummernseite des Hash-Tag-Pfundzeichens hat , was bedeutet, dass dies versucht, zu einem bestimmten Inhalt auf dieser Seite zu verlinken und versucht, den Link ein Stück zu finden. Wenn ich darauf klicke, passiert nichts. Also, was wir tun, ist, dass wir eine weitere Verbindung schaffen. Aber dieses Mal verwenden wir das name-Attribut und wir müssen nicht unbedingt irgendwelche Inhalte darin haben . Aber dieser hier wird Link eins genannt werden. Also, wenn ich klicke, zeigt dies hier oben auch, dass Link hier oben der gleiche ist wie Link dort unten . Der interne Link muss eHaben Sie Ihren Hashtag vor ihm auf dem Link, wo er gehen wird , hat das nicht. Es hat auch nicht die acht ref. Es hat nichts anderes drin. In der Tat werden Sie es nicht einmal sehen können. Wenn wir also zurück zu unserer Seite gehen und ich aktualisiere und jetzt klicke, wird dieser Link den ganzen Weg nach unten scrollen. Jetzt versucht es den Zeh. Bringen Sie dies ganz oben auf der Seite und eine gute Möglichkeit, zu demonstrieren, dass Sie einfach mawr extra weißen Raum Hals am unteren Rand nehmen , wo der Inhalt ist. Speichern Sie es. Ich werde die Seite aktualisieren, wenn ich auf diesen Link nur noch einmal klicke, und es bringt mich zum mehr Inhaltsbereich. Jetzt kann ich nach oben und unten scrollen. Es ist alles auf der gleichen Seite, aber wir haben erfolgreich einen Link erstellt, der nicht von dieser Seite geht und sagte, es Links zu Inhalten innerhalb dieser Seite. Ihre Aufgabe für dieses Video ist es, einen internen Link zu erstellen, ihn mit einem anderen Hyperlink innerhalb desselben Dokuments zu verknüpfen. Wie das, was ich getan habe. Öffnen Sie das Dokument in Ihrem Browser, klicken Sie auf Ihren Link und stellen Sie sicher, dass es funktioniert. 18. Bilder: Bilder sind ein großer Teil des Internets oder Facebook-Feeds wäre sehr langweilig. Ohne Bilder würde Pinterest nicht existieren, und Google-Bilder würden nicht existieren. Wenn wir keine Bilder über das Internet haben. Es ist wichtig, dass wir verstehen, wie man diese Bilder erstellt. Das erste, was Sie wissen müssen, ist das Bild-Tag beginnt mit I M g Abkürzung für Bild sieht aus wie Bild. Wenn Sie die A und E herausnehmen, ist es auch ein selbstschließendes Tag. Es erfordert keinen Schrägstrich Bild-Tag. Es öffnet sich einfach und schließt sich auf dem gleichen Tag. Jetzt ist es, um ein Bild zu definieren wir die S R. C steht für Quelle, und das ist, wo wir auf unser Bild verlinken. Jetzt werde ich nur in ein Bild schreiben, das ich von der Oberseite meines Kopfes kenne, und ich werde eine Vorschau darauf schreiben. Jetzt haben wir ein Bild. Dieses Bild ist ein PNG, das für tragbare Netzwerkgrafik steht, und das bedeutet, dass es einige transparente Teile darin haben kann. So kann ein Bild das doc gif jpeg sein, der andere dodge ein peg dot PNG und in einigen Browsern dot spg für skalierbare Vektorgrafik, aber am häufigsten sehen Sie typischerweise das Geschenk, das J Peg und das PNG. Jetzt, wo wir dieses Bild geladen haben, werden wir noch ein paar andere Attribute unterzeichnen. Sagen wir mal, Border ist eins. Mal sehen, was dann passiert. Jetzt gibt es eine Grenze um ihn herum. Wir haben die alle getaggt den alternativen Text zu zeigen, für den Fall, dass das Bild nicht angezeigt werden kann . Also sagen wir alle, um hier zu markieren, damit wir sehen können, wie es aussieht. Und ich werde sicherstellen, dass dieses Bild nicht existiert, indem ich einige unnötige Touren vom Ende hinzufüge. Und jetzt, wenn ich aktualisiere, sagt die Seite, alle Tag hier, das sind die Steuern. Das gebrochene Bild wird mit dem Text angezeigt, den ich definiert habe. Es hat immer noch die Grenze um ihn herum, aber es gibt kein Bild. Wenn ein Bild vorhanden ist, der gesamte Text nicht angezeigt. Wir können auch die Breite und die Höhe definieren. Sagen wir also die Breite. Wir wollen diese 600 Pixel entlang machen. Nun, da Sie bemerken, dass das Bild auf 600 Pixel skaliert wurde, aber es wuchs jetzt auch in der Höhe, wenn Sie auch die Höhe stricken wollen, müssen wir nur die Höhe auf eine andere Zahl angeben. Nehmen wir an, wir wollten nur eine Höhe von 50 Pixeln haben, anstatt was auch immer es jetzt ist. Wir wollen nicht, dass es auf die richtige Weise skaliert. Jetzt ist unser Bild 50 Pixel hoch und 600 Pixel lang. Nun, wenn wir das Bild basierend auf Breite und Höhe skalieren wollten, funktioniert es nicht für alle Browser, aber die meisten modernen Browser außer diesen Tagen. Wenn wir also sagen, wir wollen, dass dieses Bild 230 Pixel in Halle Nr. sein soll, weiß er, dass die Bilder auf eine normale Skala auf 50 weitere Pixel skaliert wurden, und wir werden feststellen, dass es auch in der Breite wachsen wird, was es tat. Wir können auch das Titel-Tag hinzufügen und wir werden nicht mit der Maus über. Hier steht Titel. Genau wie das, was wir geschrieben haben, denken Sie daran, Title ist eines dieser globalen Attribute. Wir können es auf grundsätzlich jedem Element verwenden. Jetzt werde ich die Grenze entfernen, so dass es so aussieht und ich werde einen Link hinzufügen, der zu Google gehen wird . Ich werde das retten. Wir werden es sehen, und jetzt können wir auch auf das Bild klicken. Sobald ich darauf klicke, bringt es uns zu Google. Es ist Ihre Aufgabe für dieses Video ist ziemlich groß. Das erste, was ich möchte, dass Sie tun, ist, Bild zu erstellen. Verwenden Sie also. Verwenden Sie das Bildelement und fügen Sie die Quellattribute hinzu. Es spielt keine Rolle, was Ihre Bilder, solange es sich um ein funktionierendes Bild handelt, Sie können auf Google-Bilder springen und es einfach greifen. Ihr seid alle von dort aus. Dies ist alles für die Praxis, also spielt es keine Rolle, welches Bild. Nimm den zweiten Schritt. Haddon Ault Attribute dritten an einem Rahmen Attribute in einem benutzerdefinierten mit und Höhe bei einem Titel . Dann wickeln Sie einen Link um Ihr Bild. Wie das, was ich oben gespeichert habe, öffnen Sie Ihr Dokument in Ihrem Browser. Letzter oben. Stellen Sie sicher, dass das Bild und der Link ordnungsgemäß funktionieren. 19. vs. Inline: in HTML. Jedes Element kann entweder als Block oder als In-Line-Element kategorisiert werden. In diesem Video werden wir den Unterschied zwischen einem Blockelement und einem In-Line-Element betrachten. Wir werden einige Teile von HTML und möglicherweise einige CSS anzeigen, die wir noch nicht gelernt haben . Und das ist in Ordnung, denn in diesem Video geht es einfach darum, den Unterschied zwischen einem Block und einem Inline-Element zu lernen . Block-Element wäre also ein Element wie ein DIV-Absatz, eine der Überschriften und so weiter. Ein Blockelement nimmt die gesamte Breite von links nach rechts des gesamten Bildschirms oder des gesamten Bereichs ein, in dem es enthalten ist. Also, als Beispiel, werde ich eine Entwicklung erstellen, werde später über Entwicklungen erfahren. Aber das ist ein grundlegendes Blockelement. Ich füge schnell eine Grenze hinzu. Nichts Phantasie, nicht richtig geschrieben, und das ist ein Lock-Element. Wenn Sie sich diese Seite ansehen, können Sie sehen, dass der Rahmen die gesamte Breite der Seite von links nach rechts einnimmt . Nun, wenn wir uns ein Inline-Element ansehen, ist das etwas, das nur den Platz in Anspruch nimmt, den es wirklich braucht. Und ein großartiges Beispiel dafür ist das span Element. Dies ist also ein Blockelement, weil es den ganzen Weg über den Bildschirm geht. Es ist Eltern Container ist das Körperelement, richtig? Wenn wir also das div-Element betrachten, das wir seinen übergeordneten Container geschrieben haben, ist der darüber in der Hierarchie der Körper im Körper nimmt die ganze Seite ein. Wo ist das? Ben steht in der Schlange. Diese Grenze wickelt sich um diese Spannweite. Das ist so viel Platz, wie es braucht. Ich werde dort einen Abstandshalter hinzufügen, und ich werde ein paar verschachtelte Entwicklungen erstellen. Wir werden es zu einer blauen Grenze machen. Wir wissen, wo wir arbeiten, um es ein wenig Polsterung zu geben. Mach dir im Moment keine Sorgen um das CSS. Schreiben Sie dies einfach, so dass Sie den Unterschied zwischen einem Block in einem Inline-Element sehen können . Und wir werden sagen, die Breite dieses Containers ist 50% seines übergeordneten Containers. 50% tun Grenze. Werfen wir einen Blick auf das, was wir haben. Das beansprucht also 50% der Seite, hat etwas Polsterung, und das ist der 50 Cent blaue Rand, richtig? Also, wenn wir jetzt noch einen Devyn hier hätten, ist das 100%. Also geben wir an, dass das erste Blockelement nur ein Blockelement für das 50% 50% des Bildschirms sein wird, das nächste Blockelement darin wird 100% der Breite seines übergeordneten Elements auf bessere Weise aufnehmen . Eigentlich nehme ich einfach diese Polsterung weg, die Elemente blockieren. Einer der zwei Pixel durchsichtigen schwarzen Rahmen, der besagt, dass 100% des blauen Randbereichs einnimmt . Block-Element wird also so viel Platz wie möglich von links nach rechts von Ihrer Seite einnehmen , während ein in-line-Element nicht wird. Wie Sie hier sehen können, tut das in line-Element das nicht. Es nimmt nur den minimalen Platz ein, den es benötigt. Nun, warum ist das wichtig? Nun, weil Blockelemente oft die gesamte Seite einnehmen Wenn Sie zu Facebook gehen, die Kopfzeile ganz oben in der blauen Kopfzeile, wo es das Logo in der Suchleiste hat In Ihren Benachrichtigungen wird dieses übergeordnete Element ein Block-Element, da es den gesamten Bereich der Seite einnimmt. Jetzt können Sie Spalten im Inneren erstellen, aber diese massiven Blockelemente, aber es erfordert ein wenig zusätzliches Styling, und das ist nicht etwas, was wir in diesem Video abdecken. Aber als Beispiel werde ich das kopieren und uns runterziehen und weitere 50% blau sagen und sehen, was passiert wenn ich einen neben den anderen lege. Wenn ich dies aufräumen, so dass wir sehen können, dass diese Luft zwei sehr unterschiedliche Gruppen, dieser Abschnitt hier ist unsere erste blaue Grenze Bereiche 50% blau Grenze hat unser Blockelement in Linie Element, und denken Sie daran, nur nahm 50% der Seite und die andere nimmt 50% der Seite ein, und sie sollte theoretisch direkt daneben sitzen. Aber da sie beide Blockelemente sind, nehmen sie 100% der Seite ein, auch wenn der Rahmen nicht auf 100% erweitert wird. Ein weiteres gutes Beispiel ist, wenn wir hier eine andere Spanne erstellen, die grüne Grenze und meine neben oder unten, weil eine Spanne ein in-Line-Element ist und das DIV ein Blockelement ist, werden die Blockelemente 100% der mit von links nach richtig, auch wenn nur 50% genutzt werden. Das bedeutet, dass andere 50% nur die einfache weiße Fläche, die wir gesehen haben. Es ist leerer, weißer Raum. Nichts wird dort verwendet und das SPEN sollte darunter sitzen. Jetzt. Das ist unsere Spannweite und sie sitzt unterhalb des gesamten Bereichs. Jetzt werde ich etwas davon aufräumen, damit wir uns das ansehen können. Etwas sauberer, 50% blauer Rand. Genau wieder, es sieht so aus, als ob wir nur 50% verwenden, aber es ist wirklich das Blockelement nimmt 100% den ganzen Weg von links nach rechts. Es hat 100% der mit beansprucht, aber es verwendet nur 50%. Das bedeutet also, dass Sie span Element unter es gehen, weil, obwohl Sie nichts sehen können , das hier verwendet wird, es heimlich verwendet wird. Das ist also der Unterschied zwischen einem Block und einem In-Line-Element. Ihre Aufgabe für dieses Video ist es, ein Blockelement zu erstellen. Sie können mit der Entwicklung oder der, mit der wir bisher am meisten vertraut sind, spielen, die das Absatzelement wäre. Entweder funktioniert, und dann möchte ich, dass Sie erstellen und in Zeile Element jetzt in Zeile Elemente könnte das span Element sein . Fettdruck kursiv unterstrichen. sind nur einige von denen, die wir bisher behandelt haben, und ich möchte, dass du siehst, wie sie sitzen. Setzen Sie das Blockelement oberhalb des In-Line-Elements und versuchen Sie es umgekehrt. Versuchen Sie, das In-Line-Element über dem Block-Element zu setzen und sehen Sie, wie sie sagten, Sie müssen nicht in das CSS gelangen, das hier das style-Attribut ist. Du musst nicht in irgendeines davon eingehen, solange du siehst, wo du arbeitest. Der dritte Schritt. Öffnen Sie Ihr Dokument in Ihrem Browser und im letzten Schritt. Vergewissern Sie sich, dass Sie einen Block und in Zeilenelementen auf derselben Seite erstellt haben. 20. 170 html div: eines der häufigsten Elemente in HTML ist das DIV-Element, und es sieht einfach so aus. Es erfordert eine Öffnung und ein schließendes Tag, und wenn Sie die Quelle von grundsätzlich jeder Webseite 99,99% der Zeit betrachten, werden Sie mindestens eine dieser sehen, wenn nicht Dutzende oder möglicherweise Hunderte dieser Elemente jetzt mit der Entwicklung hat keine Verwendung. Es ist ein leeres Blockelement. Damien ist eine Entwicklung wird genauso viel mit aufnehmen wie seine Eltern. Container wird es erlauben. Wenn Sie mit dem Unterschied zwischen einem Block in einem In-Line-Element nicht vertraut sind, gehen Sie zurück zum Block zuerst im Line-Element-Video, und Sie erfahren den Unterschied dort in nur ein paar Minuten. Die Entwicklung ist einfach ein Dummy-Element. Es hat keinen besonderen Zweck, keine besonderen Verwendungen, und es ist völlig anpassbar Ihr CSS. Wir behandeln CSS hier nicht, aber es ist wichtig zu wissen, dass die Entwicklung so ziemlich überall im Internet zu finden ist. Diese HTML fünf hat viele Elemente erstellt, die jetzt standardisiert sind, um die Anzahl der Dibs zu reduzieren und die Informationen zu trennen. Zum Beispiel in html fünf. Wir haben das Header-Element. Wir haben das Fußzeilenelement und viele, viele, viele mehr. Vor html fünf war alles ein diff. Es war ein div. Ich d ist gleich Fußzeile etwas in diesen Zeilen jetzt, während dies immer noch akzeptabel ist, wenn Sie ein bestimmtes Stück Code für eine Fußzeile oder Kopfzeile oder eine Navigation schreiben, das ist ein anderer guter, den Sie oft sehen werden. Jetzt werden Sie eine von diesen verwenden wollen und wieder gibt es viele davon, aber das waren nur die drei, die wir jetzt behandeln werden, aber letztendlich ist es nichts falsch mit einer Entwicklung wie dieser. Es wird in HTML 5 bevorzugt, das eines dieser verwendet hat, aber wenn Sie ein div verwenden müssen, müssen Sie ein div verwenden, und dafür ist es da. Es gibt keine Aufgabe für dieses Video. Das ist rein pädagogisch. Um Sie wissen zu lassen, dass das DIV ein Dummy-Element ist, hat keinen besonderen Zweck, keine besonderen Verwendungszwecke, und es ist vollständig anpassbar. Viele andere Elemente sind an den Endgrad anpassbar, aber das DIV ist im Grunde ein leerer Schiefer. Es ist ein leeres Blockelement, mit dem Sie im Grunde alles tun können, mit dem Sie jetzt in diesem Moment . Wenn Sie gerade mit HTML beginnen, können Sie mit dem Div nicht viel tun, außer Blöcke zu erstellen, die von links nach rechts von Ihrer gesamten Seite gehen . Das ist nicht so nützlich. Aber wenn Sie ein erfahrener Entwickler werden, ist die Entwicklung eines jener Elemente, die Sie Hunderte und Hunderte von Malen schreiben, möglicherweise Hunderte von Malen, sogar an einem einzigen Tag. 21. Listen: in HTML. Es gibt zwei Arten von Listen für geordnete Listen und geordnete Listen. Der Unterschied zwischen den beiden besteht darin, dass eine A Norden Liste normalerweise Aufzählungspunkte oder irgendeine Art von Bild verwendet , um zu bezeichnen, in welcher Reihenfolge jedes Listenelement eingeht, und es spielt keine Rolle, welche man zum 1. 2. 3. 4. So weiter kommt. So weiter. Während eine geordnete Liste normalerweise Zahlen oder Buchstaben hat, wo eine Bestellliste mit 12345 a b c d e f g beginnen würde , hat sie eine Art von Ordnung. Hier ist ein Live-Beispiel First ist keine neue geordnete Liste. Wir beginnen mit Ihnen l eine neue geordnete Liste und ein Listenelement zu erstellen ist nur das Listenelement und ein anderes Listenelement zu erstellen, alles, was wir tun, ist eine weitere erstellen und wir können dies für immer tun. Und ich werde hier nur einen Titel hinzufügen. Und schauen wir uns an, was wir geschrieben haben. Wir haben eine Nordenliste. Wir haben ein Listenelement, eine leere Stelle, weiteres Listenelement 1/3 Element hier, das Listenelement, das nichts darin hat, war eigentlich ein Tippfehler. Das war mein Fehler. Nun, lasst uns dies zu unserem Vorteil nutzen, um zu erfahren, wie das funktioniert. HTML benötigt für die meisten Elemente ein öffnendes und ein schließendes Tag. Die 1. 1 hatte kein schließendes Tag, Also, was es dachte, wir würden tun, war dies. Nun, das bedeutet nicht, dass Sie alle schließenden Elemente überspringen können. Dies ist nur der Browser, der versucht zu korrigieren, was er für richtig hält, und es wird möglicherweise nicht in jedem Browser auf die gleiche Weise angezeigt. Und es ist sicherlich keine Standardisierung, und andere Entwickler werden es nicht mögen, damit zu arbeiten. Erstellen Sie immer dieses schließende Tag und wir entfernen das einfach? Und das ist unser Nordeste, wo die Kugeln der UN-bestellte Teil sind, es spielt keine Rolle, welche zuerst kommt. Es ist einfach eine Liste. Alternativ haben wir Listen bestellt, und dies beginnt mit, wie Sie wahrscheinlich vermutet haben, einem Brunnen. Nun ist ein Listenelement genau das Gleiche in einer geordneten Liste. Dieser Artikel Nummer eins. Lass uns Nummer zwei Nummer drei machen und ich mache mir keine Sorgen, dass kein zusätzlicher Platz hier drin ist. Und um dies für eine geordnete Liste zu sehen, haben wir 123 und kommt in der Reihenfolge 12 und drei können Sie auch Listen ineinander verschachteln. Dies wird ein wenig fortgeschrittener, aber werfen wir einen Blick auf eine geordnete Liste mit einem Nord Artikel hier und im zweiten Listenelement . Wir werden eine geordnete Liste hinzufügen, so dass es eine Liste innerhalb einer Liste Order Nummer eins ist. Bestellnummer zwei Wieder keine Sorgen über irgendwelche Leerräume, die in diesem Moment nicht relevant ist . Ich werde diesen Listeneintrag schließen, den Sie sehen können, wenn ich darauf klicke. Es hebt die öffnenden und schließenden Elemente hervor. Alles hat hier ein öffnendes Schließelement. Abgesehen von diesem, schließen Sie die UN-geordnete Liste und schauen wir uns dies an. Jetzt. Dies ist ein UFO innerhalb eines Brunnens, also in der Reihenfolge Liste mit einer geordneten Liste. So wie Sie sehen können, hier haben wir den ersten Gegenstand ist ein Nord Fehler. Der zweite Artikel ist auf Bestellung, aber es ist auch eine Liste. Wir können hier noch einen hinzufügen. 30 Nun, Artikel und wir können sehen, wie dies eine geordnete Liste in Ofen eine Norden Liste erstellt, und wir könnten das umgekehrt tun, oder wir können bestellen innerhalb, bestellt oder Liste oder ein Nein bestellt innerhalb eines neuen bestellten. Das ist noch ein schnelles Beispiel. Aber lassen Sie uns eine geordnete Liste innerhalb einer geordneten Liste machen, und dies ist eine geordnete Liste innerhalb einer geordneten Liste. Ich werde meine Seite aktualisieren, und hier haben wir sie. Anstelle von Kugeln haben wir einfach Zahlen. Dann haben wir auch Nummern innerhalb von Nummer zwei. Und noch einmal, nur aus Gründen der Klarheit. Es nennt uns den letzten Punkt. Da gehen wir. Ihre Aufgabe für dieses Video besteht also darin, zuerst eine Nordeste mit mindestens drei Elementen zu erstellen, dann eine geordnete Liste mit mindestens drei Elementen zu erstellen, dann das Dokument in Ihrem Browser zu speichern und zu öffnen, unabhängig von Ihrem Browser, und überprüfen Sie, ob Ihr -Listen wurden ordnungsgemäß angezeigt. Ihre Liste sollte also Aufzählungspunkte und Zahlen für Ihre A Norden eine geordnete Liste haben, haben, 22. Tabellen: -Tabellen sind in HTML ziemlich häufig, und Sie werden sie schließlich verwenden müssen. den letzten zehn Jahren wurden Tabellen zugunsten von Elementen, die schneller geladen werden, wie z. B. die Entwicklung. jedoch einige Fälle, Es gibtjedoch einige Fälle,in denen eine Tabelle genau die richtige Lösung für Sie ist, und es ist wichtig, alle verschiedenen Teile einer Tabelle zu verstehen. Nein, eine Tabelle ist ziemlich komplex und besteht aus vielen verschiedenen Teilen. Das erste, was Sie wissen müssen, ist am Tisch. Element wird nur Tabelle genannt. ist nichts ausgefallenes. Und wenn Sie Ihre erste Zeile erstellen möchten, weil Tabellen mit Zeilen arbeiten und Zellen sie wie eine Tabellenkalkulation denken , möchten Sie ein TR erstellen, das eine Tabellenzeile ist. Sie öffnen und schließen es genau wie bei den meisten HTML-Elementen. Aber in diesem Raum braucht man auch eine Zelle. Nein, diese Zelle, würden Sie denken, wäre nicht sehen Tabellenzelle, aber tatsächlich TD-Tabellendaten. Dies wird die erste Zelle sein und lassen Sie uns eine weitere und in Klammern erstellen. Ich werde Daten schreiben. Sie wissen also, dass eine Zelle tatsächlich ein TD ist. Nun, wenn wir eine Vorschau darauf sehen, sieht es nicht wirklich nach viel aus. Aber wenn wir Grenze zu unserer Tabelle hinzufügen, nur ein Pixel Grenze jetzt können wir sehen, dass ihre tatsächlichen Zellen, die Tabelle, nimmt auch ein mit Wir können sagen, dass wir wollen, dass die Breite 100% und 100% des Bildschirms oder seine enthält Element von links nach rechts. Und wenn wir einfach eine andere Zelle hinzufügen wollen, fügen wir einfach eine weitere Zelle hinzu, und jetzt werden wir drei Spalten haben. Das Tabellenelement hat auch Selbstabstand und verkaufen Polsterung, aber wir werden die Zellauffüllung in nur einem Moment erhalten. Zellenabstand. Wenn Sie einen Blick darauf werfen, oder wenn wir dies drastisch anders machen, ist das der Abstand zwischen den einzelnen Zellen. Und wenn wir das wieder normal machen, sieht es so aus. Als ich zu fünf sagte, gibt es einen anderen namens Sell Padding, und wir wollen, dass dieser eingestellt wird und sehen, was fünf tut. Das ist also die Polsterung in der Zelle, nicht zwischen den Zellen, sondern innerhalb jeder Zelle. Und wenn wir das viel drastischer machen. Sie können sehen, dass die Polsterung zwischen dem Schriftzug, die wir hier sehen und die erste innere Grenze. Wir können auch die Rahmenfarbe ändern, indem Sie die Rahmenfarbattribute und nur den Namen einer Farbe verwenden. Wir können sagen, Änderungen zu lesen, und es wird jetzt gelesen, und die Grenze muss nicht bleiben bleiben bleiben. Eins. Es könnte drastisch größer sein. So sehen Sie jetzt, dass die Grenze den ganzen Weg um den Tisch herum ist. Es ist nicht der Rahmen für jede Zelle, aber Hinzufügen eines Rahmens fügt diesen einen Pixelrahmen ganz um jedes Selbst hinzu. Also, jetzt haben wir eine Reihe und fügen Notizen hinzu. Hier, das ist eine Reihe. Das hier sind Tabellendaten, und wenn wir eine weitere Zeile erstellen wollten, war alles, was ich getan habe, das zu kopieren. Aktualisieren Sie die Seite. Wir haben jetzt noch eine Reihe. Der nächste. Wir mussten es nicht wissen. Unsere Säule verbringt und Braten Bands. Nehmen wir an, die erste Zeile hat vier Zellen und die zweite Zeile hat drei Zellen. Es wird nicht richtig aufstellen, und so versucht Chrome, das herauszufinden. Daher Zellen an den oberen drei Zellen am unteren Rand. Aber was, wenn wir wollen, dass diese untere Keltik über zwei Säulen ausgibt? Nun, das ist, wenn wir hier sind. Um sicherzustellen, dass Sie am richtigen Ort arbeiten, wenn Sie neu mit HTML sind, können Sie einfach einen hier arbeitenden Text hinzufügen, Ihre Seite aktualisieren und es heißt, hier arbeiten. Großartig. Also wissen wir, wo wir arbeiten. Wir werden dieses Element auswählen und wir ändern die Spaltenspanne oder die Kohlespanne auf ich meine, es wird zwei Spalten statt einer nehmen. Aktualisieren Sie, dass ich weiß, dass die Celtics oben zwei Spalten, anstatt nur die, die es wissen sollte . Fügen wir 1/3 Zeile hinzu, diese wird auch drei Zellen haben. jedoch Wir wollen diese Zellejedochmit dieser zusammenführen. Gehen wir zurück, wo wir hier gearbeitet haben. Ja, wir sind in der richtigen Zelle. Und wenn wir sagen, dass das Braten Verbot gleich zwei ist, dauert dies bis zu Rose Now, jetzt , um ein wenig mehr Sinn daraus zu machen, denn das wird ein bisschen schwierig. Wir werden diese Zeile und eine Zellennummer beschriften. Jetzt können wir sehen, ob das die Straße ist, und das ist die Zelle, die wir haben. Zeile eins, jemand Zeile eine Zelle zu Zeile eins, Zelle drei und so weiter. So weiter. Hier haben wir geschrieben, um einen zu verkaufen, und es dauert bis zu Rose. Denken Sie daran? Das liegt daran, dass wir die Zeilenspanne auf gesetzt haben, während diese geschrieben wird, um drei zu verkaufen und Reihe vier zu verkaufen. Das liegt daran, dass wir die Spaltenspanne auf jetzt gesetzt haben. Dies funktioniert außerhalb der Straße, die die meisten Zellen darin hat . All dies funktioniert abseits der ersten Straße, weil die erste Straße vier Zellen darin hat. Jetzt können wir auch Kopf- und Fußzeilen hinzufügen. Das war also ganz einfach. Dies ist ein T-Kopf T-Körper , wo all Ihre Rose und Daten gehen und dann T-Fuß. , Dies ist einfach eine Möglichkeit,unsere Zeileninformationen zu verwalten. Also in ihrem Kopf, in ihrem Tabellenkopf, haben wir unsere Tabellenzeile und wir brauchen th, die ein Tabellenkopf ist, der uns genannt wird. Nennen Sie ihn eins, machen Sie etwas kompakter, rufen Sie ihn auch an. Drei und vier. nun Wenn wirnuneinen Blick werfen, haben wir Spaltenüberschriften. Nun ist das th unterscheidet sich von der T d. Das th ist der Tabellenkopf wird Ihren Text fett automatisch machen und zentrieren Sie ihn. Wenn wir das nicht wollten, haben wir es einfach wieder in t. D.geändert. t. D. Wird als normaler Header fungieren, aus dem einzigen Grund, dass wir diese eine Header aufrufen weil wir es in das T-hat-Element gesetzt haben. Nun, dies ist nur, wenn Sie mit Ihrem HTML mehr organisiert werden. Wir können auch das genaue Ding nehmen und es in den T-Fuß kopieren und was passiert? Das Gleiche? Der einzige Unterschied besteht darin, anzugeben, dass diese ganze Zeile hier ein Header ist. In dieser ganzen Zeile befindet sich hier eine Tabellenfußzeile. Wir werden diese Änderung nennen. Diese sind, damit sie ein bisschen mehr Sinn machen. So können Sie sich das als menschlichen Körper vorstellen. Du hast die Kopfzeile, die dein Kopf ist, dein Körper. Also dein Oberkörper, deine Arme, deine Beine und deine Fußzeile, die deine Füße sind. Sie sind sehr wichtig für Ihren Körper, alles, was sie für einen Tisch sehr wichtig sind. Das nächste, was wir hier lernen möchten, ist, wie man die Breite einer Spalte ändert, die die mit Attributen annimmt , es auf jede einzelne Spalte legt und die Änderung uns mit 50% hatte eins. Diese ganze Spalte ist jetzt 50% der Tabelle, und die restlichen 50% müssen zu gleichen Teilen zwischen diesen drei aufgeteilt werden. Nun können wir auch angeben, dass wir die zweite Spalte Teufel mit 25% wollen und es wirkt für die gesamte Spalte. Der Browser wird dies automatisch herausfinden, und Sie können diese anlegen. Jedermann. Muss nicht im Kopf sein. Muss sich nicht in der Fußzeile oder im Textkörper befinden. Es könnte auf jeder einzelnen Zelle sein. Sie stellen fest, dass 50% mit für Zeile 1 Spalte eine Zeile, eine Spalte 1 betrifft. Die gesamte Spalte wirkt sich auf die gesamte Tabelle aus. Nun, wenn Sie keine Breite für eine Ihrer Zellen angeben, Ihr Browser geht Toe automatisch für das, was es für das Beste hier hält, es sieht so aus, als ob es versucht, für 25% mit auf jeder Spalte zu optimieren. jedoch Wenn wirjedochmehr Text hinzufügen, macht es jetzt mehr Platz, und es zerquetscht die anderen zusammen. Dies kann Ihnen nicht den gewünschten Effekt geben. Und wenn das der Fall ist, möchten Sie das mit Teach south hinzufügen, und so erstellen Sie eine Tabelle in HTML. Ihre Aufgabe für dieses Video ist also eine ziemlich lange Aufgabe. zunächst Erstellen Siezunächsteine Tabelle, dann erstellen Sie drei Zeilen, und erstellen Sie dann vier Zellen in jeder Zeile. Gehen Sie zurück zu Ihrem Tabellenelement an einem Rahmen zu Ihrer Tabelle. Ändern Sie die Rahmenfarbe Ihrer Tabelle. Machen Sie die Breite Ihrer Tabelle zu 100%, so dass es die gesamte Breite Ihres Bildschirms in Zeile zu verkaufen. Drei. Ich möchte, dass Sie die Kohlespanne Attribute verwenden, um zwei Spalten aufzunehmen. Das bedeutet, dass Sie die vierte Zelle in Zeile zwei entfernen müssen, auch in Zeile zwei. Ich will eins verkaufen, um Rose zu nehmen. Das bedeutet, dass Sie die erste Zelle in Zeile 3 entfernen und die Attribute des Roast-Ban verwenden . Sobald Sie das an einem Tisch, einem Kopftisch, einem Fuß und einem Tischkörper getan haben Kopftisch , speichern Sie alle Ihre Fortschritte. Öffnen Sie es in Ihrem Browser, und wenn Ihre Tabelle ähnlich der Tabelle aussieht, die Sie in diesem Video gesehen haben, dann sind Sie fertig 23. Der DOM: Das D. O. M. Ist das Dokumentobjektmodell ist, was passiert, wenn die Seiten in Ihrem Browser geladen und Ihr Browser automatisch erstellt dieses Dokumentobjektmodell So haben Sie Ihren HTML, dann auf der linken Seite. Sie haben Ihren Kopf, Ihren Titel und Ihre gemacht ein Tags, CSS und möglicherweise JavaScript auf der rechten Seite. Wir haben unseren Körper, und niemand hat irgendein Element, das wir in ihn stecken wollen. Divider sind in Ordnung, Listen, mehr Teiler. Listenelemente gehen unter die UN-geordnete Liste, und so weiter bis jetzt, dies ist ein ziemlich einfaches Dokumentobjektmodell, und Sie werden feststellen, dass dies ziemlich wie eine Hierarchie aussieht. Und das ist genau das, was es ist. Es ist eine Hierarchie. Hier ist nun ein Bild eines Dokumentobjektmodells, das wieder deutlich komplexer ist. Es beginnt mit dem HTML das oberste ist es oder HTML-Element. Wir haben unseren Kopf oder Titel, usw cetera, etc. geht nicht sehr tief, aber wir bemerken, dass der Körperbereich ein div haben kann, und dann kann es eine andere Seite davon haben. In einer Tabelle innerhalb dieser, und innerhalb jeder Tabelle oder Tabelle stieg und innerhalb jeder Tabellenzeile unsere Tabellendatenzellen und wir können mehr HTML darin haben, und das kann nur tiefer und tiefer und tiefer werden, je , wie groß Ihre Webseiten sind und wie viele verschiedene Elemente Ihre Webseite verwenden muss. Jetzt. Die D.O. D.O. M definiert ein paar verschiedene Stücke. Es definiert HTML-Elemente als Objekte. Es definiert alle Eigenschaften von HTML-Elementen, die Attribute sind. Es definiert die Ereignisse für alle Elemente, die mehr in JavaScript gelangen, und es definiert die Methoden des Zugriffs auf alle Elemente als auch. Document Object Model ist ein W three c Standard. Es ist nicht wichtig, all diese Dinge im Moment zu kennen, während Sie Ihren HTML schreiben, da dies wirklich mehr mit JavaScript zu tun hat. Aber das Dokumentobjektmodell basiert mehr auf HD Melvin und ist JavaScript, wenn man bedenkt, dass es alles auf dem HTML basiert, den Sie schreiben. Also lernen wir gerade darüber. Ihre Aufgabe für dieses Video ist es, zu Google-Bildern zu gehen. Das sind Bilder dot google dot com, geben Sie Dokumentobjektmodell ein und schauen Sie sich einige der verschiedenen Hierarchiebilder an, die Sie finden. Schauen Sie sich einige der grundlegenderen an und schauen Sie sich einige der fortgeschritteneren an und nehmen Sie eine mentale Notiz darüber, was die Unterschiede sind und was die Ähnlichkeiten sind. Jedes Dokumentobjektmodell weist einige Ähnlichkeiten auf. Sie fangen immer gleich an. 24. XHTML: X html steht für erweiterbare Hypertext-Markup-Sprache. Es ist sehr, sehr ähnlich wie HTML. Es ist strenger als reguläre HTML und X. HTML ist im Wesentlichen HTML, aber für XML-Anwendungen konzipiert, oder XML verwendet X html von allen gängigen Browsern unterstützt. Und wenn Sie nicht mit XML vertraut sind, ist XML eine Markup-Sprache, in der alle Dokumente, die geschrieben werden müssen, richtig markiert sind . Mit anderen Worten, sie sind viel strenger. Sie sind viel präziser. Es ist keine sehr lose geschriebene Sprache oder Markup-Struktur. Die Struktur von X html bedeutet, dass es immer einen Doc-Typ gibt. Es bedeutet auch, dass die HTML-Kopf-, Körper- und Titelelemente alle auf jeder einzelnen Seite jedes Mal benötigt werden. Das ist ein Minimum muss jetzt x HTML-Elemente müssen auch richtig verschachtelt sein. Das heißt, wenn Sie einen Absatz mit Kursivzeichen darin verschachtelt haben, würden Sie Elemente wie P I I p aussehen. Alle Elemente müssen ordnungsgemäß geschlossen sein. Erinnern Sie sich an jene selbstschließenden Elemente, über die wir früher gesprochen haben, wo es in einem Schrägstrich größer als Zeichen endet und sie alle niedriger sein müssen. Fall X HTML-Dokumente haben nur ein Routenelement, das ist das HTML-Element, und Sie sehen, dass im Dokument Object Model und X html Attribute müssen immer Kleinbuchstaben . Sie müssen immer zitiert werden, und sie dürfen niemals minimiert werden. Hier ist ein Beispiel für die Minimierung. Eines der Attribute, die wir für die Deaktivierung einer Schaltfläche verwenden können, wäre die deaktivierten Attribute in regulärem HTML. Wir würden ein X HTML deaktiviert schreiben, wir schreiben Deaktiviert ist gleich deaktiviert Es ist ein wenig redundant, aber das ist, wie streng diese Sprachen Sie wissen, alles, was Sie bis zu diesem Punkt mit allen anderen HTML-Videos gelernt haben hat dich auf diesen Moment vorbereitet. Anstatt eine Markup-Sprache mit sehr losen Regeln zu lernen, lernten Sie zuerst eine schwierigere Reihe von Regeln, was bedeutet, dass Sie tatsächlich x html anstelle von HTML gelernt haben. Jetzt ist es extrem einfach, x html zu lernen und zurück zu HTML zu gehen. Aber das Verschieben von HTML zwei x html ist ein wenig schwieriger. Also begannen wir tatsächlich mit einem schwierigeren Jetzt, wenn Sie schreiben Ihre HTML Ihre X html , Sie gehen, um manchmal validiert wollen. Stellen Sie sicher, dass Sie es richtig machen, besonders wenn Sie dies nur lernen Zum ersten Mal finden Sie ein großartiges Werkzeug zur Validierung Ihres X-HTML-Codes bei validator dot w three dot org. Es gibt verschiedene Möglichkeiten, Ihren HTML-Code zu validieren. Sie können eine Datei hochladen, Ihren HTML-Code in einen Textbereich kopieren, oder Sie können sogar einfach die U R L einfügen, die Sie gerade betrachten. Jetzt ist das, was X HTML ist. Es ist im Wesentlichen HTML, aber es ist strenger. Ihre Aufgabe für dieses Video ist es, zu validator w three dot org gehen Klicken Sie auf Validate durch direkte Eingabe. Schnappen Sie sich eine der Dateien, an denen Sie in einem früheren Video gearbeitet haben, oder wenn Sie nicht einfach mit dem Schreiben von HTML hier begonnen haben, und klicken Sie dann auf die Schaltfläche „Häkchen“. Und das würde Ihnen eine Validierung geben, ob Sie Ihren X HTML richtig oder nicht richtig schreiben . 25. Inline CSS: in der Linie. CSS ist CSS, das Sie direkt innerhalb eines Elements innerhalb Ihres Dokumentobjektmodells. Die Art und Weise, wie wir dies tun, ist die Verwendung der Stil-Attribute und dieses Stil-Attribut ist ein globales . Nun, in diesem Video, werden Sie nicht formal jede CSS lernen, wer auch immer. Wenn Sie einige der CSS zur Kenntnis nehmen möchten, die ich schreibe, liegt das ganz bei Ihnen. Sie werden auf keinem der CSS getestet, dass ich dieses Video schreibe, weil dies rein ein HTML-Video ist . jedoch lernen, was Sie gerade lernen werden, bereiten Sie auf zukünftige CSS-Lektionen vor, und Sie werden viel besser daran sein, nur ein wenig CSS aus diesem Video zu wissen. Nun, um Ihnen ein Beispiel für einige in Zeile CSS zu geben, werde ich eine Entwicklung mit diesen Stil-Attributen erstellen. Ich werde schreiben, darin testen und schließen. Es ist eine Vorschau, und es ist nur eine grundlegende Seite. Es steht jetzt überall Test. CSS geht jetzt hier hinein, eine sehr schnelle Lektion über CSS. Sie haben eine so genannte Deklaration, und in einer CSS-Deklaration haben Sie ein Namenswertpaar. So, zum Beispiel, Grenze wäre der Name. Sie haben einen Doppelpunkt, ein Pixel, durchgefärbtes Rot, und Sie beenden diese Deklaration mit einem Semikolon, damit Sie hier mehr hinzufügen können. Als Nächstes. Ich werde Rand oben hinzufügen und ich möchte, dass das 50 Pixel ist. Und sagen wir, ich möchte auch, dass die Breite 30% meiner Seite beträgt. Nein, nochmal, es ist nicht weltraumempfindlich. Genau wie HTML. Es sollte alles Kleinbuchstaben sein, und wir haben drei Erklärungen hier haben wir unsere Grenzdeklaration Marge, oberste Erklärung und unsere mit Erklärung. Also werde ich das speichern und lassen Sie uns einen Blick auf das in Chrome werfen. Jetzt können wir sehen, dass es einen Raum von oben gibt. Es ist von 50 Pixel-Rand von oben. Das bedeutet, dass die Elemente, die 50 Pixel unter dem mit sitzen, nicht 100% des Bildschirms sind. Es ist ein Blockelement, also sollte es sein. Aber wir haben gesagt, es braucht nur 30% zu nehmen. Und natürlich gibt es einen roten Rand um ihn herum. Also, das steht in der Schlange. CSS. Kurz gesagt, wir setzen alle unsere CSS in diese Style-Attribute, und wieder, style-Attribut ist ein globales Attribut, so dass es in fast jedes andere HTML-Element als Beispiel gehen kann. Änderungen des Absatzes. Flip zurück auf Chrom. Es sieht nicht anders aus. Machen wir es mit einem Span-Element. Denken Sie daran, dies ist ein In-Line-Element. Dies wird nicht die gesamte Breite der Seite aus diesem Grund, mit möglicherweise nicht funktionieren. Erfrischung Alter. Jetzt funktioniert das mit nicht so, wie es in der Marge sein soll, auch nicht funktioniert. Und das liegt daran, dass sich diese nur auf Blockelemente oder in Linienblockelementen auswirken. jedoch Unsere Grenze funktioniertjedochimmer noch, und das zeigt, dass unser Stil auf jedes Element anwendbar ist. Ihre Aufgabe für dieses Video besteht also darin, eine neue Entwicklung nach dem Stilattribut zu erstellen. In diesem Stil. Attribut, ich möchte, dass Sie ein wenig CSS schreiben. Fühlen Sie sich frei, in diesem Video rückwärts zu gehen, Pause es, wo Sie brauchen, und kopieren Sie das CSS, das ich geschrieben habe. Wenn Sie mit CSS vertraut sind, fühlen Sie sich frei, Ihre eigenen zu schreiben, aber wenn Sie nicht sind, können Sie meine kopieren, was Sie tun, Speichern öffnen Sie das Dokument in Ihrem Browser und beachten Sie, was passiert ist. Wenn Sie also einen Rahmen hinzugefügt haben, wird es einen Rahmen geben. Wenn Sie eine Marge hinzugefügt haben, wird eine Marge angezeigt. Wenn Sie eine Breite von 70% angegeben haben, sollte dies nur 70% der Breite Ihres Bildschirms betragen. Tun Sie das und wenn Sie fertig sind, sehen wir Sie im nächsten Video. 26. Internes CSS: internes CSS ist der zweite Weg, mit dem wir CSS schreiben können, das unsere gesamte Seite oder jeden einzelnen Teil unserer Seite beeinflusst , um Ihnen zu zeigen, was ich meine. Ich werde Ihnen das Stilelement vorstellen. Wir werden einige CSS innerhalb des Style-Elements schreiben. Wenn Sie mit CSS nicht vertraut sind, ist das in Ordnung. Sie werden jetzt nicht auf dem CSS getestet werden, da dies rein ein HTML-Video ist, aber Sie müssen über das Style-Element wissen. Also als Beispiel werde ich hier eine Entwicklung erstellen, und ich werde ihm eine Klasse Attribute und I. D Attribute und einen Stil Attribute geben . Jetzt brauchen wir vielleicht alle drei von ihnen, aber was wir brauchen, ist das Stilelement. Ein Style-Element sollte innerhalb Ihres Kopf-Elements gehen. Jetzt, wenn ein Browser die Seite rendert, geht es von oben nach unten. Das erste, was es sich anschaut, ist der Doc-Typ, sagt Linna. Ok, ist HTML drin. Ich muss verstehen und Teile HTML, das auf dieser Seite ist. Der Kopf kommt vor dem Körper, weil er zuerst geladen wird, geht von oben nach unten und in diesem Kopf wird versuchen, unser CSS jedes Styling, irgendwelche Grenzen, Ränder, Pads, Hintergrundfarben zu rendern irgendwelche Grenzen, Ränder, Pads, Pads, , Textfarben, alles, was wir dort einfügen, dass die Seite, die zuerst gerendert werden, die Browser, dann zu erkennen, dass es ein bestimmtes Styling für diese Seite zu merken hat, und es wird versuchen, wenden Sie es auf den Körper an, sobald der Körper geladen ist. Dies lässt die Seite jetzt so aussehen, als würde sie schneller geladen. Browser, diese Tage und Internet-Verbindungen in diesen Tagen Luft so schnell die meisten Menschen werden nie in der Lage, den Unterschied zu sagen. Aber es gibt eine Menge Leute da draußen, die eine sehr langsame Internetverbindung haben, und sie werden in der Lage sein, den Unterschied zu sagen. Es sollte auch beachtet werden, dass das Style-Element tatsächlich innerhalb des Körpers gehen kann. Es funktioniert perfekt in modernen Browsern, aber es sollte in das Kopfelement gehen. Jetzt schreibe ich hier ein bisschen CSS. Ich werde eine Grenze hinzufügen, und hier wird es nur ein Pixel, solider roter Rand sein . Ich werde ein I D hinzufügen Mach dir keine Sorgen um Klassen und ich ds. Wir werden darüber in einem anderen Video sprechen. Aber im Moment werde ich dir nur zeigen, wie das funktioniert. Wir hatten die i d und wir wollen sagen, Polsterung 40 Pixel. Textillinie wird im Mittelpunkt stehen. Jetzt werden wir eine Klasse hinzufügen, die Grenzklasse, und wir werden die i D I. Dhinzufügen D Wir werden die Stil-Attribute bei Texan hier ignorieren, und schauen wir uns an, was wir in unserem -Browser jetzt. Jetzt können wir hier sehen, dass von Texas. In der Mitte haben wir unseren einfarbigen roten Rand mit einem Pixel, einfarbigen roten Rand mit einem Pixel, und es sieht so aus, als gäbe es ein Klopfen zwischen dem oberen Rand und der Steuer zusammen mit dem unteren Rand und dem Text. Nun, wir sagten, der Browser war an einem Rand ein Pixel, solide rot, fügen Sie Padding an einem Text ausgerichtet Mitte und haben es Einfluss auf unser Element hier. Anstatt also all das CSS innerhalb der Style-Attribute zu schreiben, wie wir es in einem vorherigen Video getan haben, haben wir es alles innerhalb des Style-Elements geschrieben. Und der Vorteil, das zu tun, ist, wenn es darum geht, Klassen hier einen weiteren Sprung hinzuzufügen, und ich werde dies geben und noch einen nennen, und dieser wird def sein. Drei. Und wenn ich speichere und ich mich das und Chrome oder einen anderen Browser anschaue, haben diese auch Grenzen. Nun ist der Grund, warum diese Grenzen haben, weil die Grenzklasse hier alle Klassen hier betrifft . Jetzt ist eine kurze Lektion in CSS. Eine CSS-Klasse beginnt mit einem Punkt, wie Sie hier sehen, wo ist der Punktrahmen kann auf mehrere Elemente angewendet werden. Auf jeder bestimmten Seite können wir hier bei einem Absatz ein paar Zeilenumbrüche hinzufügen. Dies ist eine P-Auffrischung. Die Seite hat ein paar Zeilenumbrüche dort, und sie wirken sich auch auf den Absatz aus. Nun ist der große Vorteil, dass wir, wenn wir dieses besondere Styling ändern wollten, diese Grenze vollständig entfernen wollten. Wir können diese Spardatei entfernen, die Seite in Ihrem Browser aktualisieren, und es wird alle Styling auf einmal loswerden. Das bedeutet, dass Sie keinen Stil schreiben müssen. Attribut ist gleich einem Rand ein Pixel durchgezogenes Rot für jedes einzelne Element. Denn wenn Sie etwas auf einer sehr großen Website ändern müssen, sagen wir, Sie mussten alle Grenzen entfernen. Aus welchem Grund auch immer, Sie wollen nicht hier durchgehen müssen, nach jeder Grenze suchen und sie löschen, weil dies um ewig zu nehmen. Stattdessen, was wir tun können, ist einfach nur löschen Sie dies und das wird von allen Grenzen loszuwerden Jetzt Wollte das style-Attribut verwenden, um Sie wissen zu lassen, dass das style-Attribut leer sein kann. Die meisten Attribute können leer sein und das style-Attribut ist eines von ihnen? Nein, Wenn wir über Ideen sprechen, Ideen sind nicht wie Klassen. Eine Klasse kann mehrere Elemente beeinflussen, wie ich bereits erwähnt habe, und ich d kann nur ein Element beeinflussen, und ich d sollte eindeutig sein. Es sollte wie Ihre persönliche Identifikation sein. Niemand sonst hat es. Es ist völlig einzigartig für Sie als Person. Diese Identifikation funktioniert genau auf die gleiche Weise und ich fange mit dem Nummernzeichen Hashtag er was immer du es heutzutage nennen willst. Also Ihre Aufgabe für dieses Video ist es, das Stilelement in Ihren Kopf zu schreiben, richtig. Drei Entwicklungen in Ihrem Körper. Dann möchte ich, dass du die Grenzklasse erstellst, wie wir es in diesem Video getan haben. Geben Sie dem einen Rand ein Pixel durchgezogenes Rot. Wenn Sie mit CSS nicht vertraut sind, gehen Sie zurück zu einem Teil des Videos, wo es Ihnen das CSS zeigt, mit dem wir gearbeitet haben, und fühlen Sie sich frei, das zu kopieren. Dann, für jede Ihrer Entwicklungen, die sich innerhalb Ihres Körperelements befinden, möchte ich, dass Sie die Klassenattribute hinzufügen, und der Wert sollte die Grenzwerteinsparung sein. Öffnen Sie das Dokument in Ihrem Browser, und wenn Sie einen Rahmen für alle drei Ihrer Entwicklungen sehen, haben Sie erfolgreich internes CSS-Styling zu Ihrer Seite hinzugefügt. 27. Externe CSS: externes CSS ist, wie wir das CSS aus einer Datei in eine andere Datei hinzufügen. Der Hauptvorteil, dass Sie alle Ihre CSS und alle eine oder mehrere andere Dateien hinzufügen, die sich nicht in Ihrem aktuellen HTML befinden , bedeutet, dass Sie sie bearbeiten können, ohne mehrere Seiten zu bearbeiten. Was ich damit meine, ist, wenn ich eine Kopie dieser über eine andere Seite hätte und sie ziemlich ähnlich sind, lassen Sie uns dieses eine externe CSS jetzt nennen. Sieh dir diese an und es gibt nicht wirklich viel Unterschied. Es könnte eine erstaunliche Menge an Unterschied geben. Aber der Punkt ist, wir wollen immer noch diese Klasse verwenden, dieses Styling auf beiden Seiten. Nun, auf der ersten Seite, könnte ich einfach die Zuweisung ändern. Wenn ich die Grenze entfernen wollte. Würde ich. Das Problem ist, wenn ich eine zweite Seite habe, ist sie jetzt noch da. Die Chancen, dass Sie nur zwei Seiten haben, sind ziemlich schlank. nach Website oder Projekt, an dem Sie arbeiten, können Sie bis zu 50 oder 100 verschiedene Seiten Jenach Website oder Projekt, an dem Sie arbeiten, können Sie bis zu 50 oder 100 verschiedene Seitenhaben. Du könntest Tausende von verschiedenen Seiten haben. Du könntest nur ein paar Seiten haben. Unabhängig davon der Sinn der Programmierung darin, etwas nicht zweimal zu tun. Sie wollen einmal eine Sache tun und haben so viel wie möglich in Kraft. Das ist die effizienteste Art zu arbeiten. Also hier werden wir stattdessen etwas externes Styling hinzufügen. Nun verwendet dies das Link-Element mit EA treff-Attributen, und ein anderes Attribut namens REHL steht für Beziehung. Es ist ein selbstschließendes Etikett, und es geht in deinen Kopf. Die H R E F ist Ihre Quelle in einem Bild. Verwenden Sie SRC und einen Link, den Sie verwenden H R E f. So hier werden wir eine Datei namens Stil Punkt CS Access Datei hinzufügen noch nicht existiert, aber wir werden es in nur einem Moment existieren. Und die Beziehung zu diesem HTML-Dokument ist Stylesheet, das dem Browser sagt, was das ist. Es könnte eine Textdatei sein. Könnte Javascript-Datei sein. Es könnte absolut nichts sein, was für diese Seite wichtig ist, aber wenn wir Stylesheet sagen, weiß der Browser zu gehen und diese bestimmte Datei zu erhalten und automatisch zu handeln, als ob es ein Stylesheet wäre , ohne zusätzliche tun zu müssen dachte, ich wollte wieder die Grenze hier wieder hinzufügen, und ich werde dieses Styling kopieren. Ich schneide es ist das, was ich tun werde. Wir werden eine neue Datei erstellen, die hier gegen Basic eingefügt wird, spielt keine Rolle mit CSS, und ich werde dies als Stil Punkt CSS speichern. Also haben wir bei CSS gestylt und wir haben die Datei Style dot CSS genannt. Dafür gibt es keinen Nutzen, da das style-Attribut jetzt leer ist. Jetzt habe ich das in meinem Browser geöffnet. Ich werde Aktualisieren drücken. Nichts hat sich geändert. Das ist perfekt. Vergewissern Sie sich, dass wir es tun. Richtig. Ich werde diesen Rahmen ändern Die fünf Pixel durchgehend blau speichern öffnen sich im Browser Aktualisieren und schauen Sie sich das an. Es wirkt sich auf ihn aus. Und eigentlich, was ich hier tun möchte, ist, dass ich hier einen Link erstellen möchte und wir haben eine Kopie dieses hier bekommen und zurück zur Hauptseite gehen . Jetzt haben wir einen Link auf Ihrem, es wird zu Code zu Seite gehen. Großartig. Nun, wenn wir nicht zu dem Code einer Seite zurückkehren wollen. Du hast also bemerkt, dass es hier offensichtlich einen Unterschied gibt. Nun wieder, das Problem liegt in dieser Klasse namens border. Es ist hier drin. jedoch Es istjedochin ihrem Stylesheet, was bedeutet , wenn wir 234 500 Seiten hätten, würden jede Seite öffnen und jeden Stil manuell bearbeiten. Das ist nicht das, was wir wollen. Also in unserer ursprünglichen Codepage werde ich das Style-Element durch das Link-Element ersetzen. Es wird zu unserem Stil, dass CSS-Seite verlinken, und wenn ich die Seite aktualisiere, klicke ich zwischen Code und Co. Zwei Punkt html. Hier hat sich nichts geändert. Das wirkt sich auf, damit wir sehen können, was hier noch vor sich geht. Ich gehe zum Code. Eine Seite klopfen trat in Kraft. CO zwei Klopfen trat in Kraft. Jetzt alles, was ich hier getan habe, war, dass ein wenig CSS Zehe eine bestimmte Datei, und es wirkt sich auf beide sofort aus. Also, wenn ich meine Seite auf co dot html aktualisiere und wenn ich zu co two dot html gehe, ist es beide Seiten erfolgreich betroffen. Jetzt ist der Hauptvorteil wieder Zeit als Programmierer. Als Webentwickler werden Sie viel Zeit damit verbringen, HTML PHP JavaScript, Jake Weary CSS zu schreiben , und Sie möchten minimieren, wie viel Zeit Ihre Ausgaben für Ihren Mantel das letzte Mal, wenn Sie mit Methoden wie externes CSS desto mehr Zeit können Sie damit verbringen andere Teile Ihres Dienstes oder Ihrer Website jetzt als eine weitere Anmerkung zu erstellen, wenn wir eine andere Datei hatten, tun wir es nicht. Aber wenn wir das taten und wir es Styling Dot CSS nannten, können wir nicht zwei Stylesheets in Ihrem. In der Tat können wir so viele Stylesheets haben, wie wir wollten. Aus Gründen dieses Videos haben wir nur eins. Ihre Aufgabe für dieses Video ist eine ziemlich lange Aufgabe, und Sie müssen Schritt für Schritt durch diese eine zuerst gehen, erstellen Sie eine Datei namens Code dot html genau wie ich. Dann möchte ich, dass Sie eine zweite Datei namens Code to dot html erstellen. Drittens, erstellen Sie eine Datei namens style dot CSS vierte am Link-Element, um sowohl co dot html als auch code html zu dot-genau wie wir es in ihrem head-Element getan haben. Als nächstes öffnen Sie Style dot CSS und fügen Sie einige grundlegende Styling hinzu. Fühlen Sie sich frei, die Grenze zu verwenden, ist ein Pixel solide rote Deklaration, die wir in vielen Beispielen verwendet haben , dann codieren dot html und co two dot html zu Entwicklungen auf jeder Seite für jede Entwicklung in der Klasse namens border gleiche Klasse, die wir in diesem Video verwenden. An dieser Stelle sollten Sie zwei Dateien mit jeweils zwei Entwicklungen haben, für insgesamt vier Entwicklungen, alle mit einer Klasse namens border. Öffnen Sie nun beide Seiten in Ihrem Browser. An diesem Punkt haben Sie zwei Registerkarten geöffnet, und Sie sind def Elemente werden Rahmen haben. Jetzt. Ich möchte, dass Sie Style-Punkt-CSS noch einmal öffnen, den Rand aus dieser Datei entfernt, speichern Sie ihn, gehen Sie zurück zu Ihrem Browser und aktualisieren Sie den Code dot html co zwei Punkt-HTML-Seiten. Jetzt. Wenn Sie alles richtig gemacht haben, werden die Entwicklungen keine Grenzen mehr haben. Und Sie haben das alles getan, indem Sie einfach eine kleine Änderung an einer Datei vorgenommen haben, und es hat zwei Seiten betroffen. 28. Kurse: CSS-Klassen zeigen, wie wir mehrere Elemente mit nur einem Stück Code beeinflussen. Nun haben wir dies sowohl in internem CSS als auch in externem CSS behandelt. Aber wir haben nichts über die eigentliche Klasse gelernt. Attribut selbst Also das Klassenattribut hier ist ein globales Attribut und Sie können mit fast jedem Element in diesem Video taggen . Sie werden nicht über CSS lernen, noch werden Sie auf einem der CSS getestet werden, die wir richtig. Aber der HTML-Teil, auf dem Sie getestet werden. Also werde ich hier etwas Raum eröffnen. Ich wollte diese Klasse nochmal anrufen. Mach dir keine Sorgen um das CSS, und was ich hier tun werde, ist jetzt, wo ich eine CSS-Klasse namens Klasse habe, die es hier als Klasse schreibt und dies im Browser öffnet und wir haben unsere feste Ein-Pixel-Grenze. Wahrscheinlich nichts Neues für Sie an dieser Stelle. Aber wo dies mächtiger ist, ist Duplizierung. Ich kann das oft duplizieren, was ich mag, also habe ich hier fünf Kopien, die fünfmal die gleichen Grenzen erscheinen werden, die fünfmal wieder auftauchen werden. Wenn ich diese Grenze entferne, wirkt es sich jetzt auf alle aus. Der Trick ist, dass es nur mit den Klassenattributen funktioniert. Und wenn wir diese auchändern, auch ist dies ein I-D-Element, und wir nehmen diese Klassenaktualisierungsseite weg. Es ist das erste Element, das wir haben. Dieses erste Block-Element ist das einzige, das einen Rahmen hat. Die andere Art zu stylen ist durch Idee. Wir werden nicht darüber in diesem Video lernen, das im nächsten Video sein wird, aber ich D funktioniert nicht wie die Klasse. Also, wenn ich Ideen gleich Klasse setze, passt die Klasse in ihrem Stil speichert erfrischend einen Browser. Jetzt passiert nichts. Wir können mehrere Klassen haben. Es heißt diese eine Klasse zu, und wir wollen, dass der Text zentriert wird. Wir wollen auch, dass die Farbe gelesen wird. Wir werden der mittleren hier eine weitere Klasse hinzufügen, diese wird sagen, hat zwei Klassen, und um eine hat zwei Klassen andere Klasse hinzuzufügen, alles, was wir tun müssen, ist ein Leerzeichen hinzuzufügen, das auch eine Trennklasse ist. Gehen Sie zurück zum Browser. Dieser hat einen roten Schrifttext. Sieht aus, als wäre es mitten in der Mitte, also wissen wir, dass es funktioniert, um die Klasse ist die erste Klasse, da diese rote Grenze. Die zweite Klasse hat den roten Tex, und der Text ist jetzt in der Mitte. Wir könnten dies mit mehreren Klassen tun, nicht nur zwei, aber wir könnten es mit 345 50 tun, wenn Sie wissen müssen, dass es verpönt ist, 50 zu verwenden. Aber wenn Sie mehr als einen verwenden müssen , sind sie dafür da. Ihre Aufgabe für dieses Video besteht darin, ein neues Dokument am Stilelement des Kopf-Elements im Körperbereich zu erstellen. Ich möchte, dass du fünf D Elemente schreibst. Sie alle müssen die Klassenattribute haben. Erstellen Sie dann zwei Klassen in Ihrem CSS oder innerhalb des Style-Elements und benennen Sie sie auch Punktklasse und Punktklasse . Stylen Sie sie auf die gleiche Weise, wie Sie in diesem Video gesehen haben. Punktklasse sollte also einen Rahmen mit einem Pixel haben, durchgezogenes Rot und Klasse, um Text auszurichten, zentriert und rot zu färben. Wenden Sie nun die Punktklasse auf alle fünf Dibs an. Wenden Sie Klasse auf zwei DIV Nummer 13 und fünf Speichern Öffnen Sie dieses Dokument in Ihrem Browser und überprüfen Sie, dass alle Dips Grenzen haben und dass 13 und fünf auch gelesen haben fond und zentriert zu Text 29. IDs: Es gibt eine andere Möglichkeit, Ihren HTML-Code mit CSS zu formatieren. Es gibt nur Werke für interne und externe CSS. Es funktioniert nicht für in Line-CSS, obwohl in der Zeile CSS impliziert würde. Worüber wir reden, sind I DS genannt, die Entwicklung und eine Reihe von Benutzungsklasse haben. Oder anstatt Stil zu verwenden, verwenden wir I d. Und wir werden mit internen CSS schreiben. Obwohl dies auch mit einem externen CSS-Stylesheet funktioniert. Jetzt beginnt eine Klasse, denken Sie daran, immer mit einem Punkt und ich d beginnt mit dem Nummernzeichen Hashtag, was immer Sie nennen wollen, es beginnt mit Ihrem Nummernzeichen. Wir werden das nennen ich d Sie werden nicht auf dem Styling getestet werden, aber Sie werden getestet werden, was die tatsächlichen HTM Attribut sind und Elemente sind also nicht das Gefühl , dass Sie all dieses CSS wissen müssen, das wir in diesem schreiben werden. Aber haben Sie das Gefühl, Sie sollten vertraut mit dem HTML Nun, wenn ich dies in meinem Browser öffnen nur sagt, das ist ein I d. Nichts Besonderes, nichts Einzigartiges. Aber wenn ich Rand unten drei Pixel Bindestrich hinzufüge und lass es uns schwarz machen, und ich wende diese i d zahny i d Attribute an, und es muss auch nicht I d genannt werden. Es könnte alles genannt werden. Eigentlich werden wir das tun. Wir werden das in irgendetwas umbenennen, das damit übereinstimmt. Attribut I d entspricht dem Styling des Nummernzeichens. Wenn ich eine offene diese im Browser speichern, haben wir jetzt einen Rahmen, der drei Pixel breit ist auf Lee unten, es ist gestrichelt und es ist schwarz. Es ist genau das, was wir jetzt wollten, eine Idee, die einzigartig sein sollte. Wo sich eine CSS-Klasse an die erinnert, die mit einem Punkt beginnt, kann eine Klasse so oft verwendet werden wie sie wollen, und ich sollte jetzt nur einmal in modernen Browsern wie dem, den ich verwende, verwendet werden, verwende ich eine neue, aktualisierte Version von Chrome und I D wird mehr als einmal funktionieren. Wenn ich also zu meinem Browser-Aktualisierungen zurückgehe, wissen wir, dass die Ideen zweimal funktionierten. Jetzt. Moderne Browser sind normalerweise ziemlich gut damit, aber nicht jeder hat einen modernen Browser. Es gibt immer noch Leute, die sehr veraltete Browser verwenden. Vielleicht haben sie keinen Zugang zum Internet, um den Browser zu aktualisieren, oder sie haben nicht die Mittel, um einen neuen Laptop oder Telefon oder ein mobiles Gerät irgendeiner Art zu kaufen, als Webentwickler ist unsere Aufgabe, alle zu betrachten, die auf das Internet zugreifen und ist unsere Aufgabe, verstehen, dass jeder auf das Internet nur ein bisschen anders zugreift. Und das bedeutet, dass wir mit vielen älteren Browsern arbeiten müssen. Kein älterer Browser. Nehmen Sie Internet Explorer sechs, zum Beispiel, wird dies wahrscheinlich nicht so rendern, wie Sie es jetzt sehen. In der Tat könnte es nur tatsächlich die 1. 1 rendern und die 2. 1 wird nur leeres Styling haben. So minimieren Sie dieses Problem. Wir wollen immer nur das gleiche ich d einmal verwenden, damit alles auf dieses Element angewendet werden kann. Aber es sollte überhaupt nicht auf dieses Element angewendet werden. Das idee-Attribut ist ein globales Attribut. Es kann auf so ziemlich jedes Element angewendet werden, und wenn Sie gut denken, kann dies nur einmal verwendet werden. Also wirklich, was hat es Sinn, es zu benutzen? Berücksichtigen Sie, dass diese Seite im Grunde fünf oder 600 Mal multipliziert werden könnte, wissen Sie, eine faire Größe Website und Wenn Sie haben, zum Beispiel, eine Navigationsleiste auf jeder einzelnen Seite und Sie wollen die Farben ändern oder den Rahmen oder wo er sich auf der Seite befindet, würden Sie dieses Styling nicht ändern. Sie möchten nicht jede einzelne Seite öffnen und ändern müssen. Stattdessen können Sie ein I D hinzufügen so wie Sie eine Klasse hinzufügen würden. Aber diese Idee ist einzigartig für diese Navigationsleiste jetzt. Nicht nur das, aber wenn Sie beginnen, in JavaScript und Jake müde I DS sind oft die häufigste Art, ein Element auszuwählen. Wir werden nicht zu viel darüber reden, aber um Ihnen eine Art von Einsicht sowohl JavaScript als auch J. Query zu geben , die eine JavaScript-Bibliothek ist. Wir versuchen, auf dieses Element zuzugreifen. Es könnte auf die Attribute zugreifen, den Text darin, das HTML innerhalb seiner einzigen verschachtelten. HTML kann auf alles zugreifen, und Sie können es ändern. Entfernen Sie es, fügen Sie es hinzu, fügen Sie es hinzu, kopieren Sie es einen Anhänger Pre-Anhänger. Sie nennen es alles, was sich jemals auf Ihrer Seite auf einer bestimmten Website ändert. Das funktioniert jetzt JavaScript für Sie. Der optimale Weg, ein I D zu verwenden, ist, wenn Sie vorhaben, zu schreiben, Es gibt eine Grenze ein Pixel, solide rot, und es ist die einzige Zeit, die zeigt die Onley-Zeit, ihr Styling dafür. Stattdessen nehmen Sie das Styling über die Style-Attribute heraus, legen Sie es in CSS und rechts I d. ist gleich allem. So wird jetzt nicht nur unser Styling in einem Stylesheet angewendet, möglicherweise in einem externen Stylesheet, sondern jetzt sowohl JavaScript als auch Jake, wo Sie leicht auf dieses Element zugreifen können. Ideen werden viel beliebter, viel häufiger, weiter Sie mit Ihren Web-Entwicklungsfähigkeiten auskommen. Ab sofort ist es nicht wichtig, dass Sie das Styling kennen oder wie Sie das CSS schreiben. Aber es ist wichtig zu wissen, was ein I D ist und wie es sich zwischen einer Klasse unterscheidet. Also Ihre Aufgabe für dieses Video ist es ein neues Dokument erstellen. Fügen Sie das Stilelement in Ihr Kopfelement, richtig, eine Entwicklung innerhalb des Körperelements ähnlich dem, was wir in diesem Video gemacht haben, oder? Ein CSS I d. In Ihrem Style-Element. Fühlen Sie sich frei, dieses Video auf Pause zurückzuspulen, wo Sie das CSS kopieren müssen. Wenn Sie mit dem CSS nicht vertraut sind. Wenn Sie mit CSS vertraut sind, fühlen Sie sich frei, Ihre eigenen zu schreiben. Der nächste Schritt besteht dann darin, dieses CSS i d auf Ihre Entwicklung anzuwenden . Wir haben die Idee namens alles verwendet, aber Sie können es alles nennen, was Sie speichern möchten, öffnen Sie das Dokument in Ihrem Browser und überprüfen Sie, ob das Styling wirksam wurde. Wenn das Styling so wirksam wurde, wie Sie es wollten, haben Sie erfolgreich ein i D auf Ihr Element angewendet. 30. Zitate: Es wird eine Zeit kommen, in der Sie etwas in HTML zitieren müssen. Eine einfache Möglichkeit, etwas zu zitieren, besteht darin, einfach Zitate hinzuzufügen. Dies würde perfekt funktionieren, aber als Web-Entwickler, als Web-Entwickler, ist es nicht nur unsere Aufgabe zu verstehen, dass die Menschen gehen, um auf diese Websites zu suchen, sondern auch, dass Computer auf diese Websites suchen. Das bedeutet, dass wir manchmal spezielle Markierungen nur für Computer anwenden müssen. Nehmen Sie Google-Suchmaschine gekauft Google gekauft. Zum Beispiel, wenn Google gekauft auf dieser Seite schaut, will es herausfinden, woher bestimmte Informationen kommen. Und eine Möglichkeit, dies zu tun, wenn wir eine andere Website zitieren, besteht darin, ein Block Zitat hinzuzufügen. Also haben wir ein Block Zitat Element, und das wird nur ein kleiner Titel darüber sein, sagte er. Und im Block Zitat, tun oder nicht. Es gibt keinen Versuch Yoda. Nun, wenn wir dies speichern und öffnen Sie dies in einem Browser, das Block Zitat automatisch eingerückt für uns. Das ist ein Problem gelöst. Wir müssen uns keine Sorgen machen, jetzt zu erfinden, denn Block Zitat tut das jetzt für uns. Die meisten Browser werden einen Einzug hinzufügen, aber nicht alle von ihnen gut, und dies ist eine jener Zeiten, in denen es toll ist, Ihre Arbeit in anderen Browsern zu überprüfen, um zu versuchen diese Seite in Internet Explorer oder Edge Opera Safari Chrome Firefox zu öffnen. Sehen Sie, ob es irgendwelche Unterschiede gibt, wenn es keine Unterschiede als groß gibt. Aber wenn es einen Unterschied gibt, dann müssen Sie diesen Browser umgehen, um sicherzustellen, dass er genauso aussieht wie jeder andere Browser. Jetzt gibt es eine andere Möglichkeit, ein Zitat hinzuzufügen, und zwar durch einfaches Hinzufügen von Zitaten. Aber stattdessen verwenden wir das Q-Element, das der andere Kerl ausspoutet. Und lasst uns das hineinlegen. Q Sinn für Zitat, Sie waren der Auserwählte. Aktualisieren Sie die Seite, und wir haben Zitat automatisch. Nicht nur das, aber es gibt tatsächlich ein Leerzeichen zwischen dem Zitat auf, dass ist aufgrund der Tatsache, dass es zusätzliche Weißen basiert hier. Jetzt wissen wir, dass HTML nicht platzempfindlich ist Wenn wir also am Ende 20 Leerzeichen hinzufügen , werde ich trotzdem mit einem Leerzeichen auf der eigentlichen Seite erscheinen. Da gehen wir jetzt haben wir Zitate vor und nach. Jetzt möchten wir in Erwägung ziehen, die Quellen zu zitieren, und wir verwenden die Site-Attribute in beiden dieser Elemente, wobei Ihre Quelle wirklich nur mit dem Zitat etwas zu tun hat. Jetzt die Site-Attribute Wert, was die Website sollte nicht Yoda sein oder in diesem Fall, wäre Obi Wan Kenobi. Es wäre keiner von denen, obwohl wir sie zitieren, sollte die Website tatsächlich die vollständige Quelle dafür sein, wo wir diese Informationen gefunden haben. Also, wenn wir es auf Wikipedia gefunden haben, sollte das Zitat die volle UL sein, wo wir diese spezielle Phrase gefunden haben. Also, zum Beispiel, wenn wir das auf Wikipedia gefunden haben, könnte Wikipedia dot com sein und zitieren diese. Wir haben das vielleicht gerade auf einer Star Wars Fanseite oder in einem bestimmten Buch gefunden, aber wo immer das ist, muss es ein echter Link sein. Ihre Aufgabe für dieses Video ist es also, ein neues Dokument zu erstellen. In diesem Dokument möchte ich, dass Sie das Blockanführungselement verwenden und in diesem Element eine Phrase einfügen. Es spielt keine Rolle, wie die Sätze es sein könnten. Irgendwas. Dann möchte ich, dass Sie das Q-Element verwenden und erneut eine Phrase einfügen. Es spielt keine Rolle, was die Sätze, aber stellen Sie sicher, dass Sie einen da drin haben. Dann möchte ich, dass du dein Zitat für jeden Satz hinzufügst. Verwenden Sie also die Website-Attribute sowohl für das Blockzitat als auch für das Q-Element. Vergiss nicht, dass du keine einzelne Person zitierst. Das Zitat ist eine Quelle, die Sie Earl, Speichern über das Dokument in Ihrem Browser und überprüfen Sie, dass Ihr Block Zitat und Zitat Satz haben so funktioniert, wie Sie in diesem Video gesehen. 31. Computercode: HTML dreht sich alles um Semantik. Nicht so sehr das Styling, sondern mehr darüber, was von einem anderen Computer gelesen wird. Denken Sie daran, und wenn wir so darüber nachdenken, haben wir ein paar verschiedene Arten von Computercodes, die den Text nicht nur ein bisschen anders formatieren, sondern es einem anderen Computer erlaubt, zu lesen oder HTML zu verstehen, was es ist Betrachten Sie. Also haben wir ein paar verschiedene Elemente, die wir in diesem Video übergehen werden. Wir werden lernen, welcher Code ist, was Samp K B D. Var ist, als erstes normaler Text zu suchen. Dies ist ein normaler Text, und wie Sie sehen können, sieht er normal aus. Beschichteter Text ist anders. In der Tat, wenn wir hier ein weiteres Stück Code hinzufügen, wird feststellen, dass die Buchstaben tatsächlich aufstellen, wo C immer eins zu Dias drei ist. Er hat vier Tage. Fünf Weltraum ist sieben hier drin. Normale Schriftart und codierte Schriftart werden nicht richtig ausgerichtet. Das ist also großartig, wenn Sie sehr spezifischen Code auf Ihrer Webseite schreiben und die Buchstaben richtig aufgereiht werden müssen , ähnlich wie das, was Sie in meinem Editor hier sehen Als nächstes haben wir ein Beispiel, das ist ein Beispielbeispiel . Was auch immer Sie verwenden möchten, es ist dennoch eine Probe, und ein Feuerstein unterscheidet sich ein wenig vom Code. Als nächstes haben wir K BT Tastatureingabe sieht wieder ein wenig anders aus, und schließlich haben wir. Sie sind gleichwertig. Variable, für die es tatsächlich steht, ist variabel und noch einmal ist es alles anders. Ihre Aufgabe für dieses Video ist es, ein neues Dokument zu erstellen. Schreiben Sie die Codebeispieltastatur und die Variablenelemente. Fügen Sie Text zwischen diese Elemente ein, und speichern Sie ihn dann geöffnet. Das Dokument hat überprüft, dass jedes Fremde anders aussieht. Jeder Abschnitt sieht anders aus, und wenn Sie das getan haben, vielleicht bei einem normalen Text ganz am Anfang, amEnde, Ende, können Sie Zeilenumbrüche wie das verwenden, was ich getan habe. Das Ziel dieser Aufgabe ist es zu verstehen, dass es nicht nur einen Unterschied zwischen Variablen, Tastatureingabe-Beispielen und Code aus semantischer Sicht gibt. Aber es sieht auch aus der Sicht eines Benutzers anders aus. 32. Starke und Schwerpunkte: Mittlerweile sollten Sie wissen, wie man etwas fett macht oder wie man kursiv hinzufügt. Offen bis zu diesem Punkt haben wir nur das B-Element für das I-Element fett und kursiv verwendet . Aber es gibt zwei andere Elemente, die ebenfalls ins Spiel kommen, und diese sind stark und betont. Nun ist die Art und Weise, wie Sie darüber nachdenken können, auch mutig. Bold und stark ist stärker als Bolt, und E. M ist die ersten 2 Buchstaben der Betonung, und Sie schreiben immer ein Talent, um Betonung hinzuzufügen. Aber es gibt Unterschiede zwischen Bolden, stark und Yem, und ich weiß, dass der Hauptunterschied mit Bildschirmlesegeräten zu tun hat. Viele Entwickler haben noch nie von einem Bildschirmlesegerät gehört. In der Tat, eine große Mehrheit der Internet-Nutzer nur lesen Artikel auf eigene Faust. Sie haben keinen Computer. Lesen Sie es ihnen jedoch vor. Aber es gibt viele blinde Menschen auf der Welt, die Bildschirmlesegeräte verwenden, um ihnen darüber zu lesen , was sie gerade betrachten, und dass es den Hauptunterschied gibt. Bold wird einfach gekapelt. Es macht nur Briefe fett. Es ist es visuell, das ist alles, was es ist. Aber stark ist eine starke Betonung, wie man sagen könnte, Sie wollen jetzt etwas tun oder Sie könnten sagen, Sie wollen jetzt etwas tun, es ist wie das Hinzufügen von Mawr Betonung vor einem Ausrufezeichen und der Unterschied zwischen E. M und ich so ziemlich genau das Gleiche. Es geht darum, wie du es lesen würdest. Zum Beispiel. Ich bin wirklich müde. Könnte groß geschrieben werden, aber in den meisten Fällen wird es nicht sein. In der Tat könnten wir ein I das kursiv Element hinzufügen, und das würde erscheinen, da ich wirklich müde bin als ein wenig zusätzliche Betonung. Aber wieder, es gibt rein visuelle für Screenreader Bildschirmlesegerät braucht dieses Hervorhebungselement. Und wieder riecht jeder alles über Semantik. Es geht nicht darum, anders auszusehen. Es ist ein Boot, das richtig strukturiert wird. Also zu einem Bildschirmlesegerät, es wird nicht sagen, dass ich wirklich müde bin. Ein Bildschirmleseprogramm wird zusätzliche Betonung hinzufügen, dass Sie wirklich betonen das Wort , wirklich. So Screen Reader würde wahrscheinlich lesen Sie den Satz mehr entlang der Linie aus. Ich bin wirklich müde. Betonung verändert fast die Aussprache des Wortes. Nun, wenn Sie einen sarkastischen Artikel schreiben möchten, der Screenreader freundlich ist, würden Sie eine Menge Betonung verwenden, Viele E m Elemente. Sarkasmus wird oft von einer großen Betonung abgetrieben, möglicherweise zu viel Nachdruck in den meisten Fällen. Zum Beispiel, wenn ein Bildschirmlesegerät einen Satz las, der etwas in Reihe sagte, legte der Mann, der in der Schlange bei McDonald's stand, seine Hand in die Tasche und packte eine Handvoll Veränderung. Da merkte er, dass er wirklich reich war. Das ist Sarkasmus. Er weiß, dass er nicht reich ist. Das ist ein Szenario, in dem Sie Betonung anstelle von nur I. verwenden würden also fragen viele Leute, , wo würden Sie fett oder einfach nur Metallics verwenden? Wenn wir sowieso besondere Betonung für Bildschirmlesegeräte hinzufügen, was ist der Sinn, einfache Boulder-Ebene kursiv zu verwenden? Nun, die Idee ist, für die Menschen, die visuell auf eine Website schauen oder Ihren Artikel visuell betrachten, zieht Bolt eine Menge Aufmerksamkeit auf sich. Wenn Sie also einen ganzen Absatz mit nur normalem Text haben und dann einen Satz haben, der gerade gefaltet ist , muss er möglicherweise nicht unbedingt anders abheben. Für ein Bildschirmlesegerät. Könnte es. Möglicherweise muss es genau so gelesen werden, wie normaler Text rot wäre, aber Sie möchten, dass jemandes Augen gezeichnet werden. Es könnte ein Link sein. Könnte eine Schaltfläche sein, könnte eine Art von Aufruf zum Handeln sein. Oder wenn Sie nur kursiv hinzufügen möchten, oder wenn Sie möchten, dass jemand seinen Mund über ein bestimmtes Wort legt, um ihnen die Definition zu zeigen oder ein wenig Tooltip oder eine zusätzliche Hilfe, die Sie bei Kursivschrift bekommen, weil diese nicht notwendig sind für Bildschirmlesegeräte. Screen Reader ist egal, ob Sie Ihren Mund darüber legen können oder nicht, es ist es, den Artikel zu Ihnen zu lesen . Es ist nicht so wichtig, also wird es über die I. überspringen Aber jemand, der Ihre Website wieder visuell ansieht, wird sie ihre Augen fangen, und sie könnten tatsächlich Maßnahmen ergreifen. Nun, das ist der Unterschied zwischen fett und stark und kursiv und betont. Es sei denn, Sie haben ein Bildschirmlesegerät, es gibt keine Aufgabe für dieses Video. Sie könnten wahrscheinlich gehen und ein Bildschirmlesegerät, Chrome-Erweiterung oder Firefox bekommen . Fügen Sie auf oder auf Verkauf in der App auf Ihrem Telefon, wenn Sie wirklich wollten. Aber wenn Sie jetzt natürlich keinen von denen haben, wissen Sie einfach, was die Unterschiede sind und seien Sie sehr bewusst, wenn Sie einen Artikel schreiben wenn Sie HTML verwenden, müssen Sie erkennen, dass es Menschen geben wird, die physisch sehen, was ihnen vorgelesen wird. Und wenn wir anfangen, über Suchmaschinenoptimierung zu einer Suchmaschine zu sprechen, sind dies sehr, sehr unterschiedliche Elemente. 33. Kopfelemente: Das HTML-Kopfelement, wie wir hier sehen, ist Teil von zwei großen Abschnitten dieses Dokuments. Objektmodell das D um, das HTML ist. All Ihr HTML geht hier hinein, und Ihr Browser erstellt dieses Dokumentobjektmodell. Und es gibt zwei primäre Abschnitte, in denen Sie Ihren Mantel in den Kopf und den Körper legen. Der Kopf geht nicht sehr tief. Diese Hierarchie ist ziemlich kurz und besteht aus Elementen wie Title. Aber es gibt andere Elemente. Normalerweise werden Elemente, die Sie nicht wirklich sehen, auf einer Seite wirksam, die wir hier jetzt einfügen . Das Titelelement tritt offensichtlich sofort in Kraft, und wir sehen, dass in der Registerkarte eines jeden Fensters, das wir öffnen. Wir wissen, dass das Style-Element auch in den Kopf gehen sollte, weil dort ein CSS gerendert wird. Wir setzen ihr Styling und sie sind im Browser, sagt Recht, Diese Informationen, die ich brauche, um zu halten und es auf den Körper anzuwenden. Es gibt ein anderes Element namens base. Es ist ein selbstschließendes Skript. Es ist sehr ähnlich wie Stil. Anstatt Styling in ein Skript zu setzen,setzen wir Javascript. Anstatt Styling in ein Skript zu setzen, Wir haben uns mit dem Hinzufügen externer CSS beschäftigt, und wir verwenden das Link-Element und das geht auch in den Kopf. Und schließlich haben wir das Meta-Element, und wir hatten alle möglichen Informationen für ein Meta-Tag hier drin. Das Meta-Element ist, wo Sie Dinge wie Keywords zu Ihrer Seite oder Ihrer Seitenbeschreibung hinzufügen . Es ist nicht nur darauf beschränkt, aber das sind normalerweise die beiden beliebtesten Meta-Tags, die wir verwenden. Nein, wir werden jetzt nicht über alle Meditationen gehen, aber das sind die häufigsten Elemente, die Sie innerhalb des besagten Elements verwenden. Wir haben Titelstil-basierte selbstschließende Skript-Link, Selbstschließung und Meta-Selbstschließung. Es gibt keine Aufgabe für dieses Video, aber es ist wichtig, dass Sie wissen, dass diese Elemente sowohl in das Kopfelement als auch in den Kopfbereich Ihrer Seite gehen sollten . Es ist sehr wichtig, dass Sie wissen, dass das Hinzufügen des Titels zum Hauptteil Ihrer Seite nicht sehr viel tun kann oder nicht die gewünschte Wirkung haben, die Sie in jedem Browser wollen , vor allem die älteren Browser, die viel mehr waren strengen Stil. Wir wissen, dass wir in den Körper setzen können, wenn wir wollten, aber sollte in den Kopf gehen Basis geht immer hinein. Kopf-Skript kann grundsätzlich überall hin gehen, und einer dieser Orte ist in der Kopfverknüpfung. Wenn Sie eine Verknüpfung zu einem externen Stylesheet muss nach innen gehen. Der Kopf muss geladen werden, bevor etwas anderes auf der Seite geladen wird und Ihre Meta absolut weitergegangen ist, ist es der einzige nützliche Ort dafür. 34. Metadaten: Meta-Tags in der Kopfzeile, die so aussahen. Sie gehen immer in das Kopfelement, und es gibt Tonnen von verschiedenen Arten von Meta-Tags, die wir verwenden können. Und dann fangen sie alle mit Metta an. Aber der Unterschied ist, dass es Attribute Medikamente für Metadaten. Es sind zusätzliche Daten, die der Seite helfen, zu definieren, wer es ist. Es ist die Persönlichkeit der Seite. Sehen Sie es nicht unbedingt auf der Oberfläche, aber Suchmaschinen-Scraper sogar Facebook wird Metadaten verwenden, um herauszufinden, was die Seiten über. Auf einen Blick gibt es Tonnen von verschiedenen Metadaten-Attributen. Und so habe ich diese Seite gefunden. Ich werde das mit Ihnen teilen und ich werde es in die Seiten legen. Sie können das auch herunterladen, und ich werde ein paar davon mit Ihnen durchgehen. Samata Care Set, ein Charakter sagte, ist utf acht. Das ist ein allgemeiner Standard. Das bedeutet, dass spezielle Symbole anstelle einer schwarzen Diamantschachtel mit einer Frage ein spezielles Symbol zeigen . Markieren Sie es drinnen. Schlüsselwörter. Dies ist einer der beliebtesten, die Sie Ihre Keywords für jede Seite dort einfügen. Wenn Sie einen Artikel über HTML schreiben, die Tags gemacht haben, würden Sie den Inhalt ändern. Dieses Attribut zwei machte eine Tags wahrscheinlich hatte eine weitere dort genannt HTML Fun Fakt Suchmaschinen verwendet, um die gemacht ein Schlüsselwort vier Rankings verwenden Bis über die Zeit, dass Google kam herum, wir verwendet, um unsere Keywords mit 506 100 füllen verschiedene Wörter. Wenn wir könnten, stopfen wir einfach so viele mögliche Wörter und Variationen jedes Wortes in dieses bestimmte Element, und Suchmaschinen würden uns sofort höher rangieren. Zum Glück ist das nicht mehr der Fall, der nicht mehr funktioniert. Sie sollten wahrscheinlich nicht mehr als 10 mehr als 10 haben und eine Suchmaschine hat die Möglichkeit, auf Ihre Seite zu schauen und zu sagen, dass dies wahrscheinlich nur Spam ist. Die nächste ist die Beschreibung. Dieses Jahr sagt 150 Worte aus. Halten Sie Ihre Beschreibung kürzer, wenn Sie etwas auf Google suchen. Wenn Sie eine Internetsuche auf Google durchführen, ist diese Beschreibung in der Regel nicht sehr lang. Es sind keine 150 Worte. Es ist mehr wie 150 Zeichen. Mein Rat Halten Sie es kürzer als ein Tweet 140 Zeichen oder weniger. Das Subjekt. Das ist eigentlich falsch hier. Wenn er doppelte Anführungszeichen anstelle von regulären Zitaten oder Apostrophen verwendet hätte. Dieses Problem würde jetzt nicht auftauchen. Der Browser würde auf Ihre Website schauen, und ich denke, dass dies die Attribute sind und dass dies nur Müll ist. Wir haben Urheberrecht, wenn es eine urheberrechtlich geschützte Sprache gibt, normalerweise einen zweistelligen Code. Ja, für Spanisch. D für deutsche Roboter Willst du einen Roboter? Eine Suchmaschine, um der Seite eines Indexes zu folgen, das letzte Mal überarbeitet wurde. Ah, lassen Sie uns etwas von diesem etwas überspringen, das etwas häufiger ist, wie zum Beispiel Autor. Sie geben Ihren Namen Ihre E-Mail-Adresse dort ein, wenn Sie wollten. Persönlich würde ich Ihre Email-Adresse nicht dort eintragen. Ich denke, eine Menge möglicher Scrape Ihre Seite, finden Sie Ihre E-Mail-Adresse und beginnen Sie einfach spamming Sie. Aber Ihr Name oder Ihr Twitter-Handle ist in der Regel finden Besitzer Ihr Name nur überspringt durch ein paar von diesen. Hier haben Sie ein Medium. Was ist das? Sind es Blogger? Es flog ist ein YouTube-Kanal und das sind alle nur Name und Inhalt. Sie können diese Seite auf eigene Faust erkunden. Das einzige, was ich bemerken würde, dass die machte einen Text falsch geschlossen. Armida-Tag sollte ein selbstschließendes Tag haben und das den Regeln von X HTM aus striktem HTML folgt , verwendet aber als allgemeines Beispiel. Name ist ein Attributinhalt Attribute ist. Wir haben hier ein paar namens http Quiver, Mrs. Cashing. Wann läuft es ab? Mawr Ablaufdatum, etcetera, etc. Sie sind sogar Mawr hier drin. Verwenden Sie es für, wenn Sie eine Anwendung erstellen. Internet Explorer machte eine Tags Wann war acht Meta-Tags und so weiter und so weiter. Fühlen Sie sich frei, diese Seite zu erkunden. Ich werde nicht alle durchgehen. Es sind wahrscheinlich noch mehr Meta-Tags da draußen. Vielleicht möchte sie auf Google springen und selbst etwas recherchieren. Du brauchst auch nicht jeden einzelnen Mann angreifen zu lassen. Ah, viele neue Entwickler. Sie denken, dass mit jeder möglichen meditieren Ziege dort in jeder einzelnen Seite, die sie haben, wird ihnen helfen, Rang besser. Es wird ihre Seite besser für Social Sharing machen, wie auf Facebook und all das Zeug, und das ist nicht unbedingt der Fall. Du brauchst wirklich nur deine wichtigen. Zeichensatz-Schlüsselwörter, Beschreibung und Roboter sind wahrscheinlich fünf von den Top 10. Jetzt ist Ihre Aufgabe für dieses Video tatsächlich auf diese Seite zu kommen und einfach zu erkunden Lesen Sie durch diese. Es könnte wie eine Menge aussehen, aber es ist wirklich nicht so viel. Viel davon ist selbsterklärend, und wenn Sie nicht wissen, was ein bestimmtes ist, springen Sie auf Google und ich bin sicher, dass es eine Antwort dafür gibt. 35. Favicon: ein Stoff auf ist ein kleines Bild, das Sie in Ihrem Fenster Tab sehen. Ein gutes Beispiel dafür ist, wenn Sie auf der Registerkarte zu Google gehen. Es steht Google und direkt neben hat dieses kleine Bild. Fast jede Website hat eine von diesen bei einem Fabric auf Sie verwendet das Link-Element genau wie, wie wir auf andere Quellen verlinken, wie eine externe Cascading Stylesheets. Die Beziehung wäre ein Symbol, und dann haben Sie mit H. R F. verknüpft . Es ist normalerweise Stoff auf Punkt I. CEO Seo ist die Symbolerweiterung, obwohl viele moderne Browser auch Bilder wie PNG akzeptieren und der Typ sein Bild Schrägstrich X-Symbol und Sie schließen es und das ist alles von Stoff auf. Ist das Problem mit Stoff auf ist der Punkt I Seo-Erweiterung. Die Symbolerweiterung wird dort nicht einfach erstellt. Photoshop-Plug Ins. Je nachdem, welchen Fotoshop Sie haben, können Sie ein Icon erstellen oder können es nicht. So können Sie stattdessen ein PNG verwenden und das funktioniert in der Regel Gerechtigkeit. Finden Sie in einem modernen Browser jetzt Symbole oder was Sie für alle Browser verwenden. Lassen Sie uns es in den wirklich, wirklich alten Browsern akzeptieren , weil es immer noch Leute gibt, die diese verwenden, und es wird auch in den modernen Browsern akzeptiert. Fabric on ist normalerweise 16 x 16 Pixel, daher ist es nicht sehr groß, und normalerweise ist es irgendwo auf Ihrem Server. Ihre Aufgabe für dieses Video ist es, ein neues Dokument zu erstellen, und dann möchte ich, dass Sie Ihren eigenen Punkt i c e o Ihr fab con dot Icon finden oder erstellen. Wenn Sie keine Dateien von Photoshopped speichern, jede andere Image-Service, die Sie als Punkt i seo verwenden, fühlen Sie sich frei, auf Google-Bilder springen und suchen Sie einfach nach einem Punkt I CEO Bild. Dann möchte ich, dass Sie den Stoff auf Ihre Seite auftragen , das Dokument öffnen und überprüfen, ob die Fabric allein richtig angezeigt wird. Wenn Sie das kleine Bild nach Ihrem Titel in Ihrem Fenster Tab sehen, dann haben Sie eine Fabric auf 36. Eindungen: HTML hat einige reservierte Zeichen. beispielsweise nur versuchen, Wenn Siebeispielsweise nur versuchen,ein größeres als ein Unterrichtszeichen in HTML zu schreiben, wird es nicht so angezeigt, wie Sie denken. Zum Beispiel, wenn ich sagte, mein Name ist und dann Sie einen Platzhalter dort namens name einfügen, aber Sie haben die größer als weniger als Zeichen in ihrem sieht es aus wie ein HTML-Elemente speichern Sie das. Öffnen Sie es in Ihrem Browser, und es wird nicht angezeigt. jedoch Wenn Siejedochin Ihrem Quellcode schauen, ist er dort drin. Das liegt daran, dass Ihr Browser automatisch auf den Fuß geht. Angenommen, das ist irgendeinem Grund irgendwie ein Element. Stattdessen müssen wir verwenden, was HTML-Entitäten genannt werden. Diese Entitäten beginnen normalerweise mit einem kaufmännischen Und-Zeichen und enden mit einem Semikolon , und sie haben eine Variation der Beschriftung dazwischen. Wenn wir also sagen, es steht für weniger als und lasst uns noch einen hier drinnen machen, haben wir GT. Das ist größer als, und ich werde diese auf unser Element anwenden, speichern Sie es im Browser, und es zeigt die Art und Weise, wie wir auftauchen wollten. Das Kleiner-als-Zeichen erscheint größer als einfach auftaucht. Unser Element erscheint sogar jetzt, wenn wir unsere Quelle betrachten, weil das, was wir getan haben, richtig war. Die tatsächliche HTML-Entität für die größer als und kleiner als Symbole, die es ist, war größer, als wir es tatsächlich einen langen Weg geschrieben haben, anstatt ein Zeichen zu schreiben, weil Ihr Browser das Zeichen als Teil eines Elements interpretiert. Jetzt sind diese Entitäten Atemwege Symbole zu erstellen, und es ist nicht nur beschränkt auf weniger als oder größer, als wenn Sie das und Zeichen hinzufügen wollten scheint einfach genug, aber in HTML wäre es tatsächlich ein M P, das sein würde und M Prozent. Das ist das und Zeichen. Es funktioniert aber auch für Zeichen, die Sie möglicherweise nicht auf Ihrer Tastatur zur Verfügung haben. Zum Beispiel das Copyright-Symbol die meisten Tastaturen, die ich gesehen habe, kein Copyright-Symbol. Dieses Zeichen ist einfach nicht üblich genug, um tatsächlich auf eine Tastatur zu setzen. Stattdessen in HTML schreiben und kopieren wir in HTMLhalb cool, und das ist ein Copyright-Symbol, und es funktioniert sogar für zusätzliche Leerzeichen. Also, wenn wir gesagt, extra hinzugefügt Atanas Leerzeichen hier gegen und B S P A steht für nonbrechenden Raum, wir fügen nur Anzahl von diesen hier hinzu. Werfen wir einen Blick darauf, was uns eine Seite präsentiert. Jetzt haben wir eine weniger als wir haben größer als das kaufmännische Und-Zeichen zeigt Texter arbeiten zusätzliche Leerzeichen in unserem Code. Wir haben all diese Räume, die nicht auftauchen. Der Browser nimmt automatisch an, dass Sie eigentlich nur einen einzelnen Raum gemeint haben. Beide alle diese Charaktere. Bei all diesen Entitäten haben wir zusätzliche Abstände hinzugefügt. Sie sind HTML-Entitäten für fast jedes einzelne Zeichen. Ihre Aufgabe für dieses Video ist es, ein neues Dokument zu erstellen. Ich möchte, dass Sie die weniger als mehr als ein Prozent Copyright und nicht brechen Space Entitäten schreiben , die speichern, öffnen Sie das Dokument. Vergewissern Sie sich, dass die Zeichen richtig angezeigt wurden. Und wenn Sie eine Liste von MAWR dieser Entitäten möchten, fühlen Sie sich frei, auf Google zu springen und eine Suche nach einer Liste von HTML-Entitäten 37. Formulare: Formers Luft, wie wir Daten an einen Server senden. Sie verwenden Formulare die ganze Zeit. Verwenden Sie sie in Loggins-Formularen zum Zurücksetzen von Passwörtern, Kreditkartenformularen usw. Jedes Mal, wenn Sie sich bei einer Website anmelden, haben Sie ein Formular verwendet. Das Element, das wir verwenden, ist das Formularelement, und es geht hinein. Der Körper hat ein öffnendes und schließendes Tag, und es gibt bestimmte Elemente, die wir innerhalb eines Formulars verwenden. Jetzt können diese Elemente außerhalb eines Formulars verwendet werden, aber sie sind innerhalb eines Formulars nützlicher. Und diese sind aber nicht beschränkt auf die Eingabe, die eine selbstschließende einen Textbereichs-Schaltfläche ist und auswählen. Wir gehen über die Eingabetextbereich-Schaltfläche und wählen Elemente ein wenig später aus. Im Moment decken wir nur ab, was ein Formular ist. Ein Formular hat einige primäre Attribute, die extrem wichtig sind. Die 1. 1 ist Methode, und diese ist in der Regel get oder post. Nun, wenn wir verwenden, erhalten und senden Sie ein Formular, die Informationen aus unseren Eingabefeldern wie Eingabetextbereich, wählen Sie diese werden in der U L Leiste angezeigt. Wenn Sie also versuchen, jemanden anzumelden, möchte ich diese Methode nicht verwenden. In der Tat ist eine gute Faustregel jederzeit, jede Art von Informationen, die sie sogar als sensible Bedürfnisse betrachtet werden könnten, um vom Browser zu Ihrem Server zu gehen . Verwenden Sie nicht get Stattdessen Post verwenden. Es wird die gleichen Informationen senden, aber es wird nicht durch die u. R L Bar gehen . Stattdessen geht es still in den Hintergrund, und dann haben wir unsere Aktionsattribute, und die Aktionsattribute sind, wo die Informationen gehen sollten. Also, wenn es auf diese Seite geht, wird es zu Code dot html gehen. Wenn es zu einer Serverseite geht, möchten Sie es möglicherweise an den Punkt PHP einloggen. PHP ist eine Server-Seite. Es ist keine statische HTML-Typseite, und die Aktion ist die Datei, die Sie verknüpfen möchten, um zu wissen, dass sie kein Verwandter sein muss. Du, Earl. Es könnte ein exakter Euro sein. Nun sieht so ein Formular in HTML aus. Wenn wir das jetzt im Browser sehen, wird es nicht mit viel angezeigt, und wir wissen immer noch nicht, was Eingabetextbereich-Schaltfläche oder Auswahl tatsächlich tut. Aber es ist wichtig, dass Sie die unterschiedliche Methode und Aktion verstehen, so dass Ihre Aufgabe für dieses Video einfach praktiziert wird. Zuerst möchte ich, dass Sie ein neues Dokument erstellen, und ich möchte nur, dass Sie das Schreiben üben. Das Formularelement bildet Luft so wichtig in HTML, es ist, wie wir Informationen aus dem Browser auf einen Server oder einen anderen Dienst übertragen. Es ist eigentlich so mächtig, dass es sicher sein könnte zu sagen, dass es tatsächlich eines der Rückgrate des Web sein könnte. Es ist wichtig zu wissen, was die Methode der Aktionsattribute sind. Ihr dritter Schritt besteht also darin, die Methode in Aktionsattribute zu schreiben. Du musst nichts Bestimmtes in sie stecken, schreib sie einfach aus. 38. Form: Formularelemente sind Elemente, die außerhalb eines Formulars verwendet werden können, aber sie sind viel nützlicher innerhalb eines Formulars. Diese Elemente sind in der Regel das Eingabeelement, selbstschließende Textbereich, Select und Button Elemente. Und dieses Video. Wir werden diese sehr schnell durchgehen, genauso wie ein kurzer Überblick. Und in zukünftigen Videos werden wir diese eins nach dem anderen durchgehen. 1. 1 wir gehen wollen, ist das Eingabeelement. Das Eingabeelement ist einfach ein Eingabefeld. Es ist sehr klein, aber es ist auch sehr mächtig. Nun, wenn ich nur die Eingabe schreibe, ist es ein Wir müssen auch einen Textwert hier hinzufügen. Wir sagten, der Eingabetyp ist Steuer und wir werden in nur einem Moment in den Typ kommen. Also, jetzt sehen wir eine Vorschau der Seite und wir haben einen Textbereich, den ich hier schreiben kann. Jetzt hat der Benutzer eine Möglichkeit, mit Ihrer Seite, Ihren Seiten zu interagieren , nicht nur Informationen, die zu ihnen gehen. Sie können Informationen senden. Zurück Typ hat viele verschiedene Werte, die wir verwenden können. Text erstellt eine Textfeld-Schaltfläche wird eine Schaltfläche erstellen, aber wir werden es dieses Mal nicht verwenden. sagte. Wir werden über die Schaltfläche Element können Sie an einem Kontrollkästchen Farbe lernen. In der Tat, lassen Sie uns jedes von ihnen durchgehen, damit wir sehen können, wie sie tatsächlich aussehen. Beginnen Sie von Anfang an. Texas eins. Kontrollkästchen. Noch ein. Wir kommen zum Farbdatum. Das sind beide html fünf. E-Mail. Der Browser wird versuchen, die E-Mail-Adresse zu überprüfen. Wenn Sie die madrasa eingeben und versuchen, das Formular zu senden und es keine gültige E-Mail-Adresse ist, wird Ihr Browser sagen, bitte und geben Sie erneut eine gültige E-Mail-Adresse an. Das ist nur eine HTML-Fünf-Datei. Das ist ein weiterer großer. Wenn Sie eine bestimmte Datei hochladen möchten, die Sie verwenden Typ ist gleich Datei versteckt. Diese wird nicht auftauchen, also sehen wir nur eine leere Zeile auf ihrer Seite. Werde die Texaner los. Es ist nicht mehr anwendbar. Was ist mit einer Nummer? Sie können dort eine Nummer oder ein Passwort hinzufügen. Das heißt, wenn jemand in dieses Feld tippt, wird das nicht als normaler Text angezeigt. Es wird als Aufzählungspunkte erscheinen. Was ist mit Radio? Wir könnten sogar die u. R L.setzen R L. Es gibt andere, aber das sind diejenigen, die wir gerade jetzt bleiben werden, denn diese sind die häufigsten jetzt, vor Bewertungen im Browser, Ich werde sie jetzt einfach beschriften. Ich sehe das im Browser an. Wir haben ein Textfeld schwächen direkt in diesem Textfeld mit einem Kontrollkästchen. Wir können wieder eine Farbe auswählen. Dies ist nur HTML fünf ein Datum wieder. Dies ist nur HTML. Fünf. Alte Browser können nicht mit dem Farb- und Datumsfeld E-Mail umgehen. Es sieht sehr ähnlich wie ein Textfeld aus, aber wenn Sie versuchen, das Formular zu senden und es nicht funktioniert, wird das Formular nicht automatisch gesendet. In der Tat wird ein kleiner Fehler direkt darüber oder darunter angezeigt. Kleiner Tool-Tipp in Ihrem Browser wird sagen, bitte unter einer gültigen E-Mail-Adresse Datei. kannst du. Es ist wie versteckt zu speichern. Nichts erscheint Nummer. Ich versuche Feuerzeuge zu tippen, und hier funktioniert nichts, aber Zahlen werden funktionieren. Ich kann es sogar nach oben und unten bewegen. Das Passwort wird wie ein normales Passwort-Optionsfeld angezeigt. Dies ist, wenn Sie möchten, dass jemand eine von mehreren Optionen wählen und ein u L. Sie sind krank. Sie legen die genaue Website-Adresse dort ein, dies ist HTML fünf Validierung. Und wenn Ihr Browser nicht denkt, dass es ein gültiges u R L ist. Es wird Ihnen nicht erlauben, einige der Form wieder wird Ihnen ein wenig Luft darüber oder darunter geben , Ihnen sagen, einen gültigen Euro bei einem schnellen Titel hier einzugeben, nenne sie Fields. Und hier werden wir diese Attribute nennen, weil das ist, was wir als nächstes lernen werden . Es gibt einige Attribute, die Sie wissen müssen. Die 1. 1 ist die Wertattribute. Der Wert ist der Wert, den Sie hier einfügen möchten. Also, wenn wir gesagt, Textfeld und der Wert ist Pre-Feld Text Refresher Seite, das Textfeld hat bereits SMS dort. Es ist genau das, was wir angegeben haben. Schwächung. Wählen Sie es aus. Wir können es löschen. Wir tun, was wir wollen. Ein anderer wäre es. Lassen Sie uns es auf der E-Mail Autofokus verwenden. Also in HTML könnten wir normalerweise einfach Autofokus schreiben. Aber weil wir x html schreiben, was viel strenger ist, geben wir Autofokus gleich dem Autofokus. Nun, wenn ich diese Seite aktualisiere, spielt keine Rolle, was ich tue, in welches Feld ich gehe. Jedes Mal, wenn ich die Seite aktualisiere, werde ich automatisch in das E-Mail-Feld gesetzt, damit ich nicht darauf klicken muss. Ich könnte einfach anfangen zu tippen. Das ist ein Schritt weniger für den Benutzer. Das bedeutet oft, dass sie die Informationen etwas schneller füllen werden. Es gibt noch eine für Kontrollkästchen. Überprüfen Sie. Es ist gleich aktiviert, so dass das Kontrollkästchen momentan nicht aktiviert ist. Aber wenn wir die Seite aktualisieren, nachdem wir diese Attribute hinzugefügt haben und jetzt standardmäßig ist, wird es wieder hinzugefügt. Wir können das entfernen, wenn wir wollten. Offensichtlich funktionieren Kontrollkästchen nur für Dinge, die Sie aktivieren können, wie z. B. ein Kontrollkästchen oder ein Radio. Und der Autofokus wird wirklich nur auf Feldern verwendet, in die Sie tatsächlich Text eingeben. Jetzt fügen wir noch einen hinzu. Lassen Sie uns eine deaktivieren wir deaktiviert ist gleich deaktiviert, und Sie werden feststellen, dass das URL-Feld hier deaktiviert ist. Eigentlich ändern Sie die Farbe ein wenig, und ich kann nicht in sie klicken. Wenn wir über Zahlen sprechen, können wir ein Minimum und ein Maximum hinzufügen. Einige Männer mit sagen wir, Minimum ist 10 und das Maximum ist 20 Nun ist dies ein wenig, wenn er kann ich in eine beliebige Zahl setzen, indem Sie es eingeben. Aber wenn ich ein paar Pfeile benutze, kann ich nicht höher als 20 gehen und ich kann nicht niedriger als 10 gehen. Nun, wenn wir wollen, dass es ein Feld gelesen wird, nur das bedeutet, dass sie es nicht bearbeiten können. Wir verwenden die schreibgeschützten Attribute. Ich habe das auf das Textfeld gelegt. Wissen Sie, es ist, wenn ich meine Maus über ein normales Steuerfeld ändert den Cursor. Dieser Fall tut es nicht, wenn ich hineinklicke, passiert nichts. Ich kann den Text noch auswählen. Ich kann nichts davon ändern. Das bedeutet, dass ein Feld verfügbar ist, aber ich sollte es nur als Benutzer lesen. Ich sollte es nur noch einen großen Platzhalter lesen. Setzen Sie das auf das Passwort, und es erscheint im Hintergrund. Jetzt ist es nicht auswählbarer Text, und es verschwindet, sobald Sie ihn eingeben. Und wenn es nichts gibt, wird automatisch Platzhalter als ah angezeigt, Schnellwarnung funktioniert nicht immer mit Internet Explorer, so dass manchmal, wenn Sie einen Platzhalter für einen Internet Explorer hinzufügen, sogar einige die moderneren Versionen von Internet Explorer. Es wird nur als leeres Feld angezeigt, also verlassen Sie sich nicht unbedingt darauf. Aber Sie könnten dieses Attribut als eine Möglichkeit verwenden, Ihre Felder für modernere Browser zu verbessern. Und wenn wir eine maximale Länge hinzufügen wollten und das funktioniert für Textbereiche, wenn wir wollen, sagen wir, die maximale Länge wird jetzt acht Zeichen sein, wenn ich diese Zahlen austippe, bin ich Drücken Sie jetzt neun und nichts passiert. Maximal acht Zeichen. Und schließlich schließlich haben wir die automatische Vervollständigung, und diese ist es eigentlich nicht. Die automatische Vervollständigung ist gleich der automatischen Vervollständigung. Ist es auch. Eine Menge kompletter ist jetzt ein- oder ausgeschaltet. Wenn Sie wollten, dass es auf und jemand gab seine E-Mail-Adresse in und sie haben es in e-Mail-Adresse in ein ähnliches Formular eingegeben , bevor der Browser wird es zu erkennen und versuchen, es automatisch für Sie zu füllen. Es gibt ein paar andere, die ich über 1. gehen will, ist Name. Dies ist eine globale Attribute, und wenn Sie vier sind, Methode ist erhalten, der Name wird in der u R L-Leiste angezeigt , so Datei wäre in der Lage, Dateiname gleich versteckt oder, in diesem Fall, nur H. Und was das aussehen würde, ist, dass Sie Ihre Website dot com slash co dot html Seite haben würden, und dann hätten Sie eine Abfragezeichenfolge genannt. Wir werden darüber später im Get-Video sprechen, aber als ein kurzes Beispiel würde es mit Name H erscheinen, ist gleich dem, was auch immer der Wert hier ist. Also, wenn wir einen Wert von 123 H haben, ist gleich 123 und lassen Sie uns das hier verschieben und es mit der E-Mail-Adresse aufstellen und sagen, dass E-Mail gleich ist und was auch immer dieser Wert ist. Also lassen Sie uns sagen, der Wert für die E-Mail-Adresse jemand in die E-Mail-Adresse als E-Mail-E-Mail bei gmail dot com, und dies würde als E-Mail bei email dot com erscheinen. So würde es buchstäblich wieder auf diese Seite gehen. Wir werden mehr darüber ein wenig später in einem anderen Video sprechen, aber das geht schnell. Was der Name Attribut Will Dio. Natürlich können alle diese ein I D haben. Sie können keine Klassen und alle Titel haben. Dies sind jetzt alle globalen Attribute. Es gibt keine Aufgabe für dieses Video, aber Sie können dieses Video nur noch einmal sehen, auch wenn es auf Vorlauf ist, nur um einen guten Griff zu bekommen, was hier vor sich geht. Es gibt viel zu wissen, dass es viele verschiedene Attribute für das einzelne Eingabeelement gibt, und Sie müssen wissen, Können Sie einen Platzhalter für eine versteckte Eingabe verwenden? Obwohl technisch gesehen, ja, aber es ist versteckt, so wird es nicht wirklich etwas tun. Können Sie einen Autofokus Attribute auf ein Optionsfeld setzen? Vielleicht also, vielleicht experimentieren Sie mit jemandem, der aber das Wichtigste zu wissen ist, sind diese Attribute. Und in Zukunft werden Videos über die verschiedenen Eingabetextbereich-Schaltfläche gehen und Elemente einzeln auswählen , ohne all diese Attribute, und werden nur einen Blick darauf werfen, wie sie tatsächlich innerhalb des Browsers funktionieren, wenn jemand arbeitet mit ihnen. Wenn ein Benutzer diese Elemente tatsächlich verwendet 39. Eingabefelder: Das Eingabeelement ist, wie wir Eingaben zu einer Seite hinzufügen, die es einem Benutzer ermöglicht, mit uns zu kommunizieren. Sie können Text einfügen, einen Submit-Button drücken und diese Informationen gehen zurück zu unserem Server Server, können dann darauf reagieren und ihnen die entsprechenden Informationen zeigen. Wenn Sie sich bei Facebook anmelden, melden Sie sich bei Ihrem eigenen Konto an. Facebook. Verstehen Sie, dass Sie sich angemeldet haben, um Ihnen einen benutzerdefinierten Feed zu geben. Also dafür werden wir sagen, Typ ist Text, der nur normales Textfeld ist. Und nur damit Sie wissen, wie das aussieht, nur ein normales Textfeld. Jetzt können wir auch einen Platzhalter hinzufügen. Rufen Sie diesen Vornamen an, und wenn ich die Seite aktualisiere, heißt es, Vorname ist nicht wählbar, aber es gibt Ihnen einen Hinweis darauf, was es sein soll. Wert. Der Vorname könnte alles sein. Dies ist nur der Standardwert. Möglicherweise benötigen Sie nicht immer einen Standardwert, aber wenn Sie einen benötigen, legen Sie ihn dort ein. Und wenn Sie die Breite dieses Eingabeelements ändern wollten, verwendet die Größe. Attribut die Größe, Attribute, wie viele Zeichen lang es sein soll. Also lasst uns zu 50 ändern und wenn wir die Seite aktualisieren, wird es länger. Denken Sie daran, das sind Zeichen, nicht Pixel, denn wenn wir sagen, 500 Pixel, das sollte etwa 45% meines Bildschirms nehmen. Aber weil es auf Zeichen und nicht Pixel funktioniert, nimmt es, was aussieht, um 250% des Geistes höher Bildschirm. Denken Sie daran, dass die Größe von Zeichen und nicht von Pixeln basiert . Wenn Sie automatisch fokussieren möchten, geben Sie einfach den Autofokus ein, und jedes Mal, wenn Sie die Seite aktualisieren, können Sie automatisch mit der Eingabe beginnen. Sie müssen nicht unbedingt in das Feld klicken. Ich kann darauf klicken, die Seite aktualisieren und sie automatisch für mich auswählen. Weißt du, was passiert, wenn ich das dupliziere? Es gibt einen Autofokus auf zwei Felder. Was wird passieren? Und Autofokus auf das erste Feld. Einige Browser konzentrieren sich möglicherweise automatisch auf das letzte Feld. Der Autofokus sollte für eine einzelne Seite eindeutig sein. Es bedeutet, dass Sie eine Anmeldeseite haben und sich automatisch auf die E-Mail-Adresse oder den Benutzernamen konzentrieren sollten . Normalerweise ist es das erste Feld in einem Formular, das automatisch fokussiert ist, aber Sie müssen das nicht unbedingt verwenden und Lassen Sie uns diesen einen Zehe-Nachnamen ändern und deaktivieren Sie diesen. Jetzt kann ich den Vornamen ändern, aber ich kann den Nachnamen nicht ändern. Ich kann es auswählen, aber ich kann es nicht ändern. Im Wesentlichen ist dies Ihr Eingabefeld. Nun, einem vorherigen Video, haben wir über die verschiedenen Arten von Eingaben gelernt. Felder müssen kein Textbereich sein. Es könnte das Kontrollkästchen Optionsfeld sein. Du könntest sogar selbst ein Knopf sein. Zum Beispiel. Mal sehen, was passiert, wenn wir den Typ auf Schaltfläche ändern. Das einzige, was tatsächlich funktionierte, war der Wert-Status Skywalker und es ist deaktiviert. Ich kann nicht darauf klicken. Und die Größe der behinderten Arbeit ist irrelevant. Platzhalter war irrelevant. Aktualisieren Sie die Seite. Sonst ändert sich nichts. Wir wissen, dass dies die einzigen Attribute sind, die diesem zur Verfügung stehen. Ihre Aufgabe für dieses Video ist es, zuerst ein neues Dokument zu erstellen. Und dann möchte ich, dass Sie Textelemente eingeben. So schreiben Sie in Eingabeelemente. Das Attribut vom Typ ist gleich Text, und dann möchte ich, dass Sie einen von ihnen deaktivieren, einen aktiviert halten, den anderen deaktiviert halten, und dann möchte ich, dass Sie ein weiteres Eingabefeld schreiben. Dieser wird Typ ist gleich Passwort sein. Du hast es in diesem Video nicht gesehen, aber ich möchte, dass du es alleine erforschen kannst. Ändern Sie den Typ des Eingabefeldes in Kennwort und geben Sie innerhalb des Eingabefeldes ein. Sehen Sie den Unterschied zwischen einem normalen Textfeld in einem Kennwort-Textfeld speichern Öffnen Sie das Dokument und überprüfen Sie, ob alle Ihre Felder ordnungsgemäß funktionieren. 40. Textbereich: Der Textbereich ist, wie Sie große Textteile schreiben. Wenn Sie also jemanden bitten, Ihnen einen Aufsatz zu schreiben, werden Sie den Textbereich verwenden wollen Textbereich sieht genau so aus, als ob dies ein Textbereich ist. Es geht auch innerhalb des Formularelements genau wie das Eingabeelement, über das wir gelernt haben. Und dieser nimmt auch ein schließendes Tag. Es ist nicht selbstschließend, und der Grund dafür ist, dass Sie tatsächlich etwas darin stecken. Im Gegensatz zum Eingabeelement nimmt dieses keinen Wert an. Technisch gesehen wäre dies falsch, wenn Sie einen Wert hinzufügen möchten. Du hast den Wert hier reingelegt. Werfen wir einen Blick auf diese Seite. Du wirst ein paar verschiedene Dinge bemerken. Zuallererst ist es sehr klein, nicht annähernd genug Platz, um etwas Wertvolles darin zu schreiben. Zweitens können Sie die Größe ändern. Das bedeutet, wenn ich mehr Zeilen hier drin wollte, ist alles, was ich tue, Shift drücken in den meisten Browsern mehr Zeilen eingeben, Sie können sogar einfach drücken, eingeben und weitere Zeilen hinzufügen. Wenn dies zu klein ist, wird eine Bildlaufleiste für Sie erstellt. Nun, eine Sache, auf die Sie sehr vorsichtig sein müssen, ist, dass es platzempfindlich ist. Das bedeutet, dass dieser ganze Raum hier drin ist,dass , dies eine ganz neue Linie plus all diesen zusätzlichen Platz plus den Platz am Ende ist. Ich werde nur aktualisieren und Ihnen hier zeigen, und dann wähle ich all das aus. Dies ist der Raum am Anfang. Dies ist der Leerraum am Ende der Zeile. Wie Sie hier jetzt sehen, um zu beseitigen, dass keine zusätzlichen Leerzeichen dort hinzufügen. Also entferne ich den Leerraum Treffer aktualisieren und der Wert ist dort drin. Also werden wir es größer machen wollen. Anstatt es mit hinzuzufügen, nennen wir sie Spalten. Also für diesen, wir nannten Coles ist das Attribut. Und wie viele Spalten wollen wir? Sagen wir jetzt 150. Diese Spalten basieren auf der Breite des Zeichens darin. Jeder Buchstabe würde also als Spalte betrachtet werden. 150 ist kein Pixelwert. Wenn es 100 50 Pixel wäre, wäre es wahrscheinlich etwa 1/5 bis 1/4 der Größe der aktuellen Breite davon. Sofort. Nun, standardmäßig müssen Sie Textbereich möglicherweise drei Zeilen, abhängig vom Browser. Ro, ist, wie viele verschiedene Linien es gibt. Das ist also der zweite Straßenwechsel, der die Rose verändert. Wenn wir 10 Zeilen hinzufügen wollten. Da gehen wir. Wir haben jetzt 10 Zeilen und gehen auf den Standardwert zurück, den Sie hier sehen. Was ist, wenn Sie in der dritten Reihe einige zusätzliche Steuern wollten. Also gibst du ihnen nur eine kurze kleine Vorlage. Vorlage unten. Hit. Geben Sie ein. Also, jetzt bist du in der zweiten Reihe getroffen. Geben Sie Ihre in der dritten Zeile ein. Nun, dies wird sagen, bestimmte Reihe und 1/3 Reihe ist in der Mitte ish. Ich meine, es ist nicht da, wo es sein soll. Wenn wir es rechts nach links wollten, musste es ganz links von der HTML-Seite sein, was bedeutet, dass dies gleich vorbei sein muss. Jetzt. Wir haben keinen zusätzlichen Abstand, aber diese zweite Zeile hat etwas Platz. Und das wollen wir vielleicht auch nicht. Mitglieder Sehr platzempfindlich. Wenn wir also diesen Abstand loswerden, speichern Sie ihn, aktualisieren Sie die Seite. Da ist nichts drin, außer einer neuen Leitung. Nein, ein Textbereich kann auch einen Platzhalter und modernere Browser haben. Diese Welt wird als Beispielplatzhalter an einem Ort bezeichnet werden, an dem nur angezeigt wird, wenn hier keine Steuer vorhanden ist. Wenn ich also all dies auswähle und es lösche, gibt es wieder einen Beispielplatzhalter. Dies funktioniert nicht mit allen Browsern, sondern den meisten modernen Browsern mit Ausnahme des Platzhalters, insbesondere in einem Textbereich. Natürlich können Sie die Namensattribute I. D. Klassenstil Titel, usw cetera, etc. hinzufügen D. Klassenstil Titel, usw cetera, . Es geht weiter und weiter auf all die globalen Attribute, die Sie jetzt kennen, sind auch im Textbereich verfügbar. Also Ihre Aufgabe für dieses Video ist es zuerst einen Textbereich erstellen, ein neues Dokument erstellen. Wenn Sie das nicht zuerst getan haben, erstellen Sie den Textbereich. Dann möchte ich, dass Sie die Spalte mit oder wie breit der Textbereich auf 100 ändern. Ändern Sie die Anzahl der Reihen Zehe fünf, und dann möchte ich, dass Sie Ihren Vornamen in die erste Zeile schreiben. Aber ich möchte, dass Sie Nachnamen in die dritte Reihe schreiben, und Sie sollten etwas bekommen, das etwas in dieser Richtung aussieht. Nun, dies ist vor allem ein Test in Abstand, weil der Abstand ist in diesem kritisch. Und es zeigt Ihnen auch, dass Sie mehrere Zeilen anstelle einer einzelnen Zeile verwenden können. Wie was? dem Eingabeelement können Sie dio, dann speichern Sie öffnen Sie Ihr Dokument. Überprüfen Sie Ihren Vor- und Nachnamen auf verschiedenen Rose, wie Sie in meinem Beispiel gesehen haben. Und wenn alles so funktioniert hat, wie es in diesem Video geklappt hat, dann sind Sie fertig. 41. Knöpfe: das Tastenelement hat eine Menge Kraft, besonders innerhalb einer Form. Buttons sehen nicht nur wie ein großartiger Aufruf zu Aktionen aus. Wenn Sie also versuchen, jemanden zum Kauf zu bekommen, verwenden Sie normalerweise einen Knopf oder etwas sehr auffälliges oder einen großen, bunten Link, um jemanden dazu zu bringen, auf diese Schaltfläche zu klicken. Aber in der Regel tun Schaltflächen den Trick, und Sie können eine Schaltfläche mehrere, verschiedene Arten Stil , und oft kommen sie mit ihrer eigenen Art von Styling. In diesem Video werden wir uns die verschiedenen Arten von Schaltflächen in einem Formular ansehen. Wir haben Eingabefelder. Wir haben Textbereiche. Wir haben Drop-Down-Menüs, die auswählen, dass wir diese noch nicht abgedeckt haben. Und wir haben Knöpfe. Wir werden jetzt die Knöpfe abdecken. Aber bevor wir das tun, möchte ich Steuerfeld mit dem Wert Luke Skywalker hinzufügen, und der Name wird Name sein. Und dann werden wir eine Schaltfläche erstellen, und das hat auch einen Typ. Jetzt kann der Schaltflächen-Typ gesendet werden Taste und zurückgesetzt werden. Aber ich kann nur einer von diesen sein. Also für dieses spezielle Beispiel, jetzt, werden wir sagen, senden und wo wird sagen Absenden. Und so erstellen wir einen Absende-Button in einem Formular. Nun, wenn wir eine Vorschau dieser Luke Skywalker und wenn ich auf Senden klicke, sieht es nicht so aus, als wäre etwas passiert, aber es hat tatsächlich das Formular gesendet. Also, wenn wir uns die u R L hier oben ansehen und sagt Name, denken Sie daran, der Name war das Namensattribut. Wert ist, was hier drin ist und Luke Skywalker jetzt Was ist, wenn jemand das Formular zurücksetzen wollte , das an einer anderen Schaltfläche ist, und lassen Sie uns das zurücksetzen und vielleicht sogar auf eine andere Zeile setzen , damit wir sehen können, was wir tatsächlich tun. Aktualisieren. Also kann ich das entweder einreichen oder ich kann es jetzt zurücksetzen. Haben Sie hier den Reset-Button. Wenn Sie klicken, wird jedes Feld leer, um hier ein Beispiel zu erstellen. Wir haben also Anakin Skywalker und Luke Skywalker. Die Reset-Taste. Wenn Sie auf klicken, sieht es nicht so aus, als hätte es etwas getan, aber was es tatsächlich getan hat, war, dass die Werte auf ihre Standardwerte zurückgesetzt wurden. Jetzt haben wir ihnen gesagt, was der Standardwert war. Der Wert ist Anakin Skywalker und Luke Skywalker, Also, wenn wir sagten Wert eins und Wert auf und dann die Reset-Taste drücken. Es setzt diejenigen zurück auf das, was sie normalerweise sind. Wenn wir keinen Wert da drin haben wollten, drücken Sieerneut Reset. Wenn wir keinen Wert da drin haben wollten, drücken Sie Nichts wird passieren, hat nichts, worauf es zurückgesetzt werden kann. Aber wenn wir den Namen eins und den Namen zurücksetzen gesagt haben, wird es zu nichts zurückkehren, weil es nichts in diesem Wert gibt, das jetzt der Standardwert ist. Drittens haben wir nur einen normalen Knopf, und dieser, genau wie der Name schon sagt, tut nichts. Ein Knopf ist nur ein normaler Knopf. Warum sollten Sie uns benutzen? Viele Leute benutzen es in JavaScript, Jake Weary. Andere Leute werden es stylen, so dass es nicht wie ein Knopf aussieht. Sie wissen, dass es viele verschiedene Verwendungen dafür gibt, aber wenn wir nur über HTML in einer Schaltfläche sprechen, die nichts ausschließt CSS JavaScript und oder J. Query, nicht wirklich so wertvoll. Aber es ist wichtig zu wissen, denn sobald Sie anfangen, mit JavaScript und möglicherweise Jake müde zu arbeiten, wird es viel mehr tun als das, was Sie denken. Jetzt gibt es noch eine Sache, die du wissen musst. Wenn wir das Formularelement loswerden, gehen wir zurück zu einer Seite und aktualisieren. Es sieht nicht so aus, als wäre es anders. Wenn wir versuchen, es zurückzusetzen, wird nichts passieren. Die Eingabetextbereich-Schaltfläche und wählen Sie Elemente aus. Weißt du, die Elemente, die innerhalb des Formularelements A gehen sollen, sind wirklich nur nützlich innerhalb dieses Formularelements. Und das ist ein Paradebeispiel. Dies befindet sich nicht mehr innerhalb eines Formulars, und die Reset-Schaltfläche funktioniert nicht. Wenn ich auf den Submit-Button klicke, passiert nichts. Es liegt daran, dass es kein Formular gibt, um es einzureichen. Du brauchst dieses Formularelement jetzt. Ihre Aufgabe für dieses Video ist es, ein neues Dokument zu erstellen, und in diesem Dokument möchte ich, dass Sie ein Formularelement innerhalb dieses Formularelements erstellen. Fügen Sie das Eingabefeld mit dem Standardwert hinzu. Unser Standardwert war Banik und Skywalker oder Luke Skywalker. Deiner könnte alles sein. Ich möchte nicht, dass Sie unten eine Senden-Schaltfläche hinzufügen, und neben der Senden-Schaltfläche möchte ich, dass Sie eine Reset-Schaltfläche erstellen. Denken Sie daran, der einzige Unterschied ist, dass der Typtyp gleich ist zu senden oder Typ gleich zurücksetzen Speichern öffnen Sie Ihren Fortschritt in Ihrem Browser und ändern Sie dann das Textfeld, das Sie richtig alles andere in ihm erstellt haben . Wenn Ihr Standardwert also Anakin Skywalker ist, ändern Sie ihn in das, was Sie wollen. Geben Sie Ihren Vornamen ein, wenn Sie möchten, und klicken Sie dann auf die Schaltfläche „Senden“. Und wenn Sie auf diese Schaltfläche „Senden“ klicken, schauen Sie in Ihrer UL nach und ich bemerkte, dass sich Ihre Adressleiste geändert hat. Und das ändert sich nur, wenn Sie die Namensattribute verwenden, wie wir es in unserem Beispiel getan haben. Zuletzt aktualisieren Sie die Seite, und dann möchte ich die Steuer in Ihrem Textfeld noch einmal ändern, aber dieses Mal drücken Sie die Reset-Taste und bemerken Sie, dass der Standardwert zurückkommt. 42. Abschließung: die selektierten Attribute ist, wie wir ein Dropdown-Menü erstellen. Sieh nie überall Drop-Down-Menüs, aber wir haben noch nichts über sie gelernt. Es ist ganz einfach. Sie sind sehr ähnlich wie Listen, so dass Sie ein öffnendes und schließendes Tag erstellen, anstatt UL oder eine gut für auf Bestellung geordnete Liste zu verwenden, die wir wählen, weil Sie eine von vielen Optionen auswählen können, und innerhalb davon nimmt ein Optionselement. Diese Option kann einen Wert haben, und ich lege das Dies ist der Text, der angezeigt wird. Das ist nicht ihr Wert. Aber der Wert wird genau hier sein. Also, dieser Wert war auch und ändert sich zu zwei. Und ich werde noch einen hinzufügen und sagen: Rufen Sie einfach diesen Testwert auf und dieser Wert wird Testwert sein. Wenn wir dies nun in einem Browser öffnen, sehen wir ein Dropdown-Menü mit dem Text, den wir eingefügt haben. Ihr Wert ist gleich einem Wert Adler zu verklagen und zu testen Wert. Nun, wenn wir etwas auswählen, wird es sich überhaupt nicht ändern. Es wird nichts passieren. Selbst wenn wir eine Form haben, wird nichts passieren. Wir müssen einen Submit-Button-Typ erstellen ist gleich einreichen und Texas nur Stück Mitt. Und jetzt sind wir ausgesucht. Element braucht einen Namen, damit wir sehen können, ob es tatsächlich funktioniert. Wenn wir das Formular Name senden ist in der Lage, ausgewählt, um alles zu sein. Jetzt habe ich die Seite aktualisiert, und wenn ich Testwert oder Wert für unseren Wert 1 auswähle und auf Senden klicke, ist es ein bisschen Wert für Sind Sie? L sagt Code dot html ausgewählt ist gleich zwei. Das war der Wert von Nummer zwei. Mal sehen, was passiert, wenn wir Testwert auswählen. Der Testwert wird angezeigt, und das liegt daran, dass dieser nicht nur hier übereinstimmt, sondern mit dem Wert hier übereinstimmt. Erinnerst du dich an diesen Innenbereich? Das wird sichtbar sein. Das ist der Text, der zu sehen ist. Aber das ist nicht der Wert, den das Formular einreichen wird. Das Formular wird den Wert hier einreichen. Jetzt lassen Sie uns deaktivieren. Einer von diesen. Deaktiviert ist gleich deaktiviert und, wissen Sie, lassen Sie uns einfach diesen Wert drei nennen. Um mit der 1. 2 dort auf Spur zu bleiben, aktualisieren Sie die Seite, und jetzt können wir nicht mehr wählen Wert ist gleich drei, so dass wir diese Optionen jetzt deaktivieren können . Es gibt noch eine Sache, die wir sagen wollten. Jemand kann Vielfache auswählen, die wir hatten. Die mehrfachen Attribute Toe sind Selektionselement, und jetzt kann jemand mehrere Werte auswählen, wie sie mehrere Werte auswählen, während sie einen Wert sammeln und den Befehl oder das Steuerelement halten, während sie auf die anderen klicken. Sie können sie an ihr ausschalten. nun alle drei ausgewählt haben, Wenn sienun alle drei ausgewählt haben,klicken Sie auf „Senden“. Rul wird jetzt ein wenig seltsam aussehen, weil es ein ausgewähltes ist gleich eins. Während wir die ersten Werte wie ist gleich zwei ausgewählt haben. Wir haben den zweiten Wert ausgewählt und ausgewählt ist gleich Testwert. Das war die 4. 1 Jetzt können wir auch, wenn wir wirklich das gesamte Dropdown-Menü deaktivieren wollten, indem Sie deaktiviert zu dem select-Element hinzufügen, kann ich keine dieser auswählen. Und um dies klarer zu machen, lassen Sie uns die mehrfachen Attribute loswerden. Ich kann nicht einmal das Dropdown-Menü mehr auswählen, und es gibt nur ein weiteres Attribut, das ich Ihnen zeigen möchte, und was ich hier tun werde, ist, uns zu reparieren, damit wir wissen, was wir suchen, machen es ein wenig einfacher, Mehrwert für uns dass wir den Wert 123 und vier haben, aber dieser wird standardmäßig ausgewählt werden. Dazuschreiben wir, schreiben wir, ausgewählt ist gleich mit Zitaten um sie herum ausgewählt, und wenn ich die Seite aktualisiere, wird der Wert für automatisch ausgewählt, anstatt die erste 1 ausgewählt wird, wie es vorher war -Wert für ausgewählt. Und wenn wir einen weiteren Wert hatten, haben wir Wert von fünf Jahren für noch ausgewählt, obwohl es eine Option davor und danach gibt. Das ist das select-Element. Ihre Aufgabe für dieses Video ist es, zuerst ein neues Dokument zu erstellen. Und dann möchte ich, dass Sie ein neues Formularelement wie das, was Sie in diesem Video gesehen haben, erstellen, dem das Formularelement um die Selekt- und Button-Elemente gewickelt wurde, erstellen Sie dann ein Auswahlelement, das ein Dropdown-Menü ist. Mach dir keine Sorgen um das Hinzufügen eines Namens, aber innerhalb der selektierten Elemente möchte ich, dass Sie fünf Optionselemente schreiben. Sie alle müssen einen Wert haben. Machen Sie die Werte 1234 und fünf. Aber egal welcher Text Sie in ihnen möchten, verwenden Sie möglicherweise auch 1234 und fünf, um den Werten jedes Optionselements zu entsprechen . Und dann möchte ich, dass Sie Option eins deaktiviert machen und Option drei automatisch auswählen. Wenn Sie mit dem Speichern fertig sind, öffnen Sie das Dokument und klicken Sie auf Ihr neues Dropdown-Menü, sollten Sie feststellen, dass Option eins automatisch deaktiviert ist. Sie können es nicht auswählen. Eine Option drei wurde automatisch ausgewählt, obwohl sie nicht die erste 1 in der Liste ist. 43. Was ist DER BEKOMMEN?: in diesem Video werden wir den Unterschied zwischen der get-Methode und der post-Methode mit einem Formular betrachten . Also werde ich hier ein schnelles kleines Formular erstellen. In Ordnung, ich habe ein Formular, und ich werde eine Vorschau im Browser anzeigen, damit Sie sehen können, wie es aussieht. Wenn Sie nicht vertraut sind, wie wir die Eingaben hier oder die Schaltfläche bekommen haben. Es gibt andere Videos, die über das in diesem Video gehen. Wir werden nicht darüber gehen, wie wir diese Eingaben für den Submit-Button erstellt haben. Jetzt haben wir eine Form, und wir haben früher über die Methode und die Aktionsattribute in diesem Video gesprochen. Wir werden über die Methode sprechen. Holen Sie sich, was Get gut, dio, wenn Sie speichern und neu laden diese Seite und dann senden Sie Ihr Formular wird Ihre Informationen in der U. R L Leiste setzen Informationen in der U. . Also werde ich weitermachen und das tun, Caleb Tall, mager. Und wenn ich klicke, senden Sie etwas ein bisschen anderes wird passieren. Diese Informationen, die ich eingegeben habe, werden in meiner ul bar angezeigt, und die Informationen werden ein Schlüsselwert-Paar sein, also drücken Sie auf senden und in der U. R.L Bar sagt, dass mein Dateiname co dot html ist. Dann hat es ein Fragezeichen, das bedeutet, dass alles danach Teil der Abfragezeichenfolge ist. Dieser ganze Abschnitt hier wird eine Abfrage String F Name ist gleich Caleb und l Name ist gleich groß schlank. Nun, wenn wir uns einen Code ansehen, hatten wir f Namen Das war mein Vorname und L Name war mein Nachname. Jetzt können wir dies mit vielen verschiedenen Arten von Eingängen tun. Ich werde hier noch eins erstellen, und ich werde es J. nennen und es wird ein Dropdown-Menü sein. Wir haben unterschiedliche Werte. Wir haben 10 bis 2020 30 geschätzt und die Informationen in jeder Option ist genau die gleiche schnelle kleine Beschriftung Neben ihm. Aktualisieren Sie die Seite. Ich weiß, ich habe kein Drop-Down-Menü gealtert. Mein Vorname wird Jon Snow sein und das geschätzte Alter liegt wahrscheinlich zwischen 30 und 40. Hit. Übermitteln. Nun, die Information geht weg in der Form, aber wieder erscheint es in der U. R L Bar, wo der Vorname John ist. Der Nachname ist Schnee und im Alter von 30 bis 40 Jahren. Jetzt wird dies eine get-Methode genannt, und jedes Mal, wenn Sie ein Formular mit der get-Methode senden, werden Ihre Informationen in neuer Orlebar angezeigt. Wenn Sie also ein Formular einreichen müssen oder Ihre Benutzer irgendeine Art von Informationen einreichen, die möglicherweise als sensibel angesehen werden könnten , sprechen wir über geheime Passwörter, Passwörter , Kredit Karten, so etwas wie das. Diese luftsensiblen Informationen. Aber selbst wenn Sie das Geburtsdatum einer Person als sensible Informationen oder ihr Alter , je nachdem, worum es bei Ihrer Bewerbung geht, dann möchten Sie diese Informationen möglicherweise hier oben nicht anzeigen, da dies für Jeder. Wird davon ausgegangen, dass der Benutzer die Schaltfläche „Senden“ trifft. Es taucht in ihrer U. R L Bar auf. Nun, um Ihnen zu zeigen, was ich meine, werde ich noch einen Input erstellen. Wir werden es Passwort nennen. Aktualisieren Sie die Seite. Jetzt habe ich einen Namen, Nachnamen, ein Alter und ein Passwort, und du wirst nicht sehen können, was ich schreiben kann. Und es gibt wahrscheinlich keine Möglichkeit, dass Sie erraten können, was ich gerade getippt habe, Jedoch, Jedoch, wenn ich diesen Submit-Button betätige. Dieses Passwort wird angezeigt und Sie können es hier sehen Passwort ist gleich, aber es wird in der U. R L Bar angezeigt . Nun, wo dies nützlich ist, ist, wenn Sie einen serviceseitigen Code wie A S, P oder PHP verwenden und versucht, die Informationen aus der URL-Leiste zu erhalten. Manchmal ist es sehr nützlich, einige Informationen in der Weltleiste zu platzieren, da Sie den Inhalt auf Ihrer Seite ändern können, je nachdem, was die Variable sein könnte. Also, wenn das so wäre, würde es ein bisschen mehr so aussehen. Co dot PHP-Abfrage String-Seite ist gleich 123 Wir könnten dann diese Informationen auf den Server ziehen . Der Server würde erkennen, dass die Seite gleich 13 bis 3 ist. Es würde eine Variable für uns erstellen, und wir können alles ändern, was auf dieser Seite ist, basierend auf den Informationen hier. Nun, da wird es wirklich mächtig. Jetzt ist Ihre Aufgabe für dieses Video, ein neues Dokument zu erstellen. Dann möchte ich, dass Sie ein Formularelement mit der get-Methode erstellen, genau wie wir es getan haben. Wir haben ein Formularelement geöffnet. Das Attribut, Methode genannt, war gleich „get“. Dann möchte ich, dass Sie innerhalb dieses Formularelements ein Eingabefeld hinzufügen, nur ein normales Textfeld, ein Passwortfeld und ein Dropdown-Menü. Dann, auf diesen drei Feldern, möchte ich, dass Sie jedem Element das name-Attribut hinzufügen. Sie sind also Texeira, Ihr Passwortfeld und Ihr Dropdown-Menü sollte alle das Namensattribut haben, und der Wert sollte anders sein. Zum Beispiel könnte das Texteingabefeld nur Name genannt werden. Passwort könnte als Passwort bezeichnet werden oder übergeben Sie danach an einem Absende-Button an das Ende Ihres Formulars, Speichern über das Dokument in Ihrem Browser. Und dann möchte ich, dass du dein Formular ausfüllst. die Schaltfläche „Senden“ und Sie werden feststellen, dass die Daten in die U R L Leiste eingefügt werden. Wenn Ihre Informationen in der URL-Leiste richtig angezeigt werden, wie sie in diesem Video angezeigt wurden, dann haben Sie erfolgreich ein Einreichungsformular erstellt, indem Sie ein Dropdown-Menü, eine Passworteingabe und ein Textfeld, das durch eine Senden-Schaltfläche gesendet wurde, und die Informationen wurden an die Bar U R L gesendet. Sobald das für dich funktioniert, sehen wir dich im nächsten Video 44. Was ist POST?: Wenn wir ein Formular absenden, gibt es eine andere Möglichkeit, Informationen zu übermitteln. In einem vorherigen Video haben wir diese Informationen durch die Methode namens Get anstelle von Post gelernt. Wir sehen. Doch die get-Methode wird automatisch Informationen in Ihre Albar einfügen, und das ist nicht immer das, was wir wollen. In diesem Beispiel werden wir über die Post-Methode lernen, wo sie immer noch die gleichen Informationen an den Server sendet. jedoch Die Informationen sindjedochfür Ihren Endbenutzer nicht leicht sichtbar. Also hier, was ich getan habe, war Methode in der Lage zu posten, anstatt zu bekommen, wie wir es in einem früheren Beispiel getan haben . Aktion. Ich habe ein neues PHP-Finale erstellt. Dies ist eine serverseitige Datei, die Sie für nicht vertraute PHP oder SP einreicht. - Das ist in Ordnung. Wir werden jetzt nichts davon durchgehen. Dies ist eine reine Demonstration. Waren der Vorname mit dem Namen F Name. Mit dem Alter ist ein Dropdown-Menü Passwort und Name ist Passwort. Dann die Schaltfläche „Senden“. Nun, wenn wir dies in sehen, sieht der Browser wie eine gewöhnliche Form aus. Also Vorname. Lassen Sie uns hon Alter 30 bis 40 möglicherweise vor Ihnen 50 Passwort setzen. Sie können nicht sehen, was ich für das Passwort geschrieben habe. Nun, wenn ich auf „Einreichen“ klicke, werden zwei Dinge passieren. Ihre 1. 1 ist, wenn wir auf die URL-Leiste schauen, ging es zu posten Punkt PHP ging in eine völlig andere Datei. Das ist die Aktionsdatei, die wir in Aktion angegeben haben, und es hat diese Informationen an den Beitrag auf der PHP-Seite gesendet. Die zweite Sache ist, das sind die Variablen, die Sie normalerweise hier oben sehen würden. Anstatt also zu sehen, dass F-Name gleich Han ist, ist ein Alter gleich 30 bis 40 und das Passwort ist gleich was auch immer ich tippe. Anstatt also etwas in dieser Richtung zu sehen, diese Informationen nicht in der U. RL-Leiste angezeigt . Stattdessen können wir vom Server aus darauf zugreifen. Jetzt wieder, wir lernen nicht über die Service-Seite Dinge jetzt, aber dies ist ein Beispiel, um Ihnen zu zeigen, dass die post-Methode die Informationen die gleichen Informationen an den Server sendet , ohne sie in der Ural Bar anzuzeigen. Was passiert nun, wenn wir die Aktion vollständig entfernen? Aber die Methoden bleiben als Post neu eingegeben. Dies hier drin gibt es jetzt keine Aktion, aber die Methode ist jetzt post. Es sieht nicht so aus, als wäre irgendetwas passiert. Unsere Sie sind L Bar scheint sich überhaupt nicht verändert zu haben. In der Tat sieht es so aus, als ob das tatsächlich unser Formular jetzt zurückgesetzt wird. Das liegt daran, dass diese Post-Informationen für uns nicht leicht verfügbar sind. Und um sicherzustellen, dass dies so funktioniert, wie wir es wollen, versuchen Sie einfach, die Seite zu aktualisieren. Nachdem Sie ein Postformular gesendet haben und Sie versuchen, die Seite zu aktualisieren, geben die meisten Browser Ihnen eine kleine Warnung keine Warnung. Oft sieht so etwas wie dieses bestätigte Formular re Einreichung der Seite aus, die Sie für gebrauchte Informationen suchen , die Sie eingegeben. Es sagt uns also, dass die Informationen, die wir das letzte Mal eingegeben haben, noch verwendet werden. Zurückkehren zu dieser Seite kann jede Aktion kosten, die Sie zur Wiederholung ergriffen haben. Möchten Sie fortfahren? Es heißt also, wenn wir diese Seite aktualisieren, besteht die Möglichkeit, dass die gleichen Informationen erneut übermittelt werden. nun Wennnunjemand eine Kreditkarte oder ein Benutzerregistrierungsformular einreicht, möchten Sie nicht, dass diese Informationen zweimal auf Ihren Server stoßen. Das sicherste, was zu sagen ist, wäre die Absage. Und wenn Sie drücken, weiter gut, Chrome hat mir nichts zeigen, weil es versucht, die Informationen zu verwenden. Jetzt kann eine dot-HTML-Erweiterung standardmäßig keine serverseitigen Methoden oder Funktionen oder irgendeine Art von Macht verwenden, die mit dem Schreiben einer dienstseitigen Sprache kommt . H Male ist rein auf den Benutzer, so dass es keine Informationen gibt, die hier angezeigt werden. Aber wenn wir versuchen, die Seite noch einmal zu aktualisieren, kommt am selben Morgen. Das bedeutet, dass die Seite immer noch versucht, die gleichen Informationen zu verwenden, obwohl wir nichts davon sehen können. Wir wissen, dass es da ist. Ihre Aufgabe für dieses Video ist es, ein neues Dokument in diesem Dokument zu erstellen, ein neues Formularelement zu erstellen und, in diesem Formular Element zu verwenden. Das Attribut Methode und Methode genannt ist gleich post, genau wie wir in diesem Video in einem Textfeld in einem Dropdown-Menü gesehen und fügen Sie ein Passwort-Feld . Fügen Sie dann die Namensattribute alle Felder hinzu, die Sie gerade geschrieben haben. Dann, am Ende Ihres Formulars, rechts, rechts, eine Senden-Schaltfläche speichern. Öffnen Sie das Dokument in Ihrem Browser, füllen Sie das Formular aus, senden Sie das Formular und Sie werden feststellen, dass sich nichts geändert hat. In der Tat sieht es so aus, als würde es Ihr Formular einfach vollständig zurückgesetzt. Jetzt. Sie zu diesem Zeitpunkt DrückenSie zu diesem Zeitpunktentweder auf der Tastatur die Aktualisieren-Schaltfläche oder klicken Sie auf die Aktualisieren-Schaltfläche in Ihrem Browser . Und wenn Sie einen moderneren Browser verwenden, werden Sie eine Warnung sehen, wie wir in diesem Video gesehen haben. Wenn Sie diese Warnung sehen, wissen Sie, dass Ihre Postinformationen erfolgreich an den Server gesendet werden, Sie können sie nicht sehen, aber Sie wissen, dass es funktioniert. 45. HTML5-Semantics: HTML dreht sich alles um Semantik. Es geht nicht um Styling, notwendigerweise. Es geht nicht darum, schön auszusehen oder perfekt vorzeigbar zu sein. HTML ist eine Struktur hinter jeder Webseite, und damit eine Webseite richtig angezeigt werden kann, muss der Browser verstehen, was er ansieht. Wenn der Browser nicht versteht, was er ansieht, Ihre Seite möglicherweise etwas anders angezeigt als erwartet. Jetzt, bis in die letzten Jahre, haben wir immer Elemente wie Div verwendet, und wir würden viel Styling hinzufügen, um es im Grunde zurückzusetzen, um es zu tun, was wir wollten, zu tun, wenn wir es für eine Navigationsleiste oder ein Kopf- oder Fußzeile oder ein Abschnitt von Ihnen wissen, ein Artikel oder in der Tat, sogar nur ein Abschnitt. Wir nutzen immer die Entwicklung. Es gibt eine Reihe von anderen Elementaren, die wir immer verwendet haben. Wir haben sie immer nur irgendwie neu programmiert, damit sie das tun, was wir wollen, dass sie dio, und das beinhaltet in der Regel eine Menge von verschiedenen Styling. Jetzt geht es bei HTML nicht um Styling. Es geht darum, dass der Browser in der Lage ist zu verstehen, was er ansieht. Also, wenn Google auf Ihre Webseite schaut. Es sieht nicht, was Sie visuell sehen. Es schaut sich den Code an, den Sie geschrieben haben. Also, wenn es einen anderen DIV-Bereich mit einigen Inhalten hier sieht, sind alle Städte ein geteiltes Gebiet mit einigen Inhalten darin. Es weiß nicht unbedingt, was sich ansieht. HTML five hat viele verschiedene Elemente, die jetzt standardisiert sind. Das reduziert einige der Mehrdeutigkeiten zwischen ihnen oder gemeinsame Elemente wie def. Wenn dies also Teil eines Artikels wäre, könnte dies ein Artikel sein. Google oder Bing oder was auch immer Crawler oder Browser gerade auf Ihre Seite schauen, wird es verstehen, dass dies ein Artikel ist oder wenn wir einen Diff am oberen Rand einer Seite hatten. Wir hatten einige Phantasie Styling, um es oben auf der Seite schweben zu lassen, wenn Sie nach unten scrollen auf hatte Ihre Navigationsoptionen in hier, und das ermöglicht es Ihnen, von Seite zu Seite Benutzer-Suchleiste zu bewegen, was auch immer es auf Ihrer Website ist, die würde als Navigationsleiste betrachtet werden. Stattdessen setzen wir knave. Das bedeutet, dass die Suchmaschine jetzt versteht, dass dies eine Navigationsleiste ist, dass sie bestimmte Links sind, und hier wird es priorisieren, welche Links sie betrachten sollte, sollte es nicht anschauen, es hat nur ein besseres Verständnis dessen, was es schaut sich an. Warum ist das also für einen alltäglichen Benutzer wichtig? Ein nicht-Web-Entwickler zu normalen Internet-Browser? Es spielt keine Rolle. Sie werden nie den Unterschied sehen, und sie werden sich wahrscheinlich nie um den Unterschied kümmern. jedoch Als Webentwickler erstellen Siejedoch keine Websites nur für Menschen. Sie bauen Websites für andere Programme für den Zugriff auf andere Suchmaschinen, Zugriff für Browser Zugriff, möglicherweise eine Chrome-Erweiterung oder hinzufügen oder ein Plug-in zu einem anderen Browser. Wenn jemand einen Plug in hatte, sagen wir Firefox, und es war dazu gedacht, alle unwichtigen Informationen auf einer Seite zu entfernen. Bis auf einen Artikel, aber vielleicht sucht diese Erweiterung auf Lee nach einem Artikel, das eigentliche Element und alles andere, was es ausschneidet. Wenn Sie keinen Artikel verwenden, wird ein Benutzer jetzt sehr unglücklich sein. Das ist vielleicht nur ein winziger , winziger Teil Ihrer Zielgruppe, aber Sie wissen nicht, was sie auf Ihrer Website machen werden oder wie sie es mit Suchmaschinen für Dinge wie -Optimierung. Wenn Sie Ihre Seite für eine Suchmaschine leichter verstehen können, dann werden Sie wahrscheinlich die Ränge ein wenig höher bekommen. Es gibt keine echte Wissenschaft dahinter, aber es macht wirklich nur Sinn aus Sicht der Programmierer. Ihre Semantik ist also wirklich wichtig, wenn Sie nicht die Entwicklung für eine HTML 5-Seite verwenden müssen , verwenden Sie nicht den Header Footer Artikel Abschnitt, Navigation dort viele andere. Alles, was Sie tun müssen, ist auf Google zu springen und nach etwas in den Linien der verschiedenen HTML fünf Elemente zu suchen , und Sie werden feststellen, dass es viele von ihnen gibt und mehr von ihnen kommen in jedem Monat. Es gibt keine Aufgabe für dieses Video, aber stattdessen möchte ich, dass Sie verstehen, dass es eine Bedeutung hinter der H Mill fünf Semantik, oder wir sollten einfach die HTML-Semantik sagen. HTML ist für die Struktur das Markieren, das Template ing einer Site gedacht , aber es ist nicht unbedingt für das Styling gedacht. Styling ist etwas völlig anderes, und die Struktur Ihrer Seite kann einem Browser sagen, dass es einem Bildschirmleser sagen kann, dass es einer Suchmaschine viel darüber erzählen kann , was darauf ist 46. Video: mit HTML fünf schwächen direkt eingebettete Video direkt in unsere Seite, und wir verwenden einfach das Video-Element. Video-Element hat ein öffnendes schließendes Tag auf Innerhalb des Video-Element ist das Quellelement , und dies nimmt zwei Attribute. SRC für die Quelle. Genau wie ein Bild und Typ wird der Typ immer ein Schrägstrich sein. Was auch immer die Video-Erweiterung ist, zum Beispiel, und bevor sie zurück zum Video-Element gehen, können wir die mit der Höhe ändern, Steuerelemente hinzufügen und automatisch nur durch Hinzufügen von Attributen abspielen. Deshalb wollten wir ein Mit von 500 Höhe. Machen wir dies sehr proportional und setzen Sie dies auf 1 50 und wir wollen die Kontrollen jetzt sehen Damit das funktioniert, brauche ich ein MP vier Video. Ich habe nur zufällig einen Prime Video Dot mp vier genannt. Dies ist ein lokales Video. Es ist gerade auf meiner Maschine, aber für Sie können jedes MP vier Video verwenden, das Sie mögen. Also lassen Sie uns eine Vorschau darauf, und ich möchte den Bereich sehen, mit dem wir arbeiten, hier gehen wir damit. 500 Höhe ist 150, es hat unsere Kontrollen hier drin. Wir können es Vollbildwechsel der Lautstärke, Wiedergabe und Pause machen. Schneller Vorlauf zu jedem Teil des Videos, genau wie ein normales Video. Wenn wir Toe automatisch spielen wollten,landet jemand auf der Seite, die Sie erstellen. Wenn wir Toe automatisch spielen wollten, Schalten Sie die automatische Wiedergabe ein. Und wenn ich diese Seite aktualisiere, werden Sie feststellen, dass sie automatisch abgespielt wird. Jetzt gibt es noch zwei Dinge, die Sie wissen müssen. Die 1. 1 ist Quelle muss nicht ein MP vier sein. Es kann auch das sein, was Web M oder Organisation genannt wird, und die Erweiterungen würden das auch widerspiegeln. Also nicht Web M ist Dot ist Video Schrägstrich Web Dot Org Ist Video Sochaux G. Jetzt für einen Browser, der nicht unterstützt HTML fünf und ältere Browser, es wird nicht ein Video oder die Quellelemente zu erkennen, so dass wir hier etwas schreiben können . Es erfordert kein anderes Element. Es geht einfach nur mit der Quelle. Und wir könnten einfach sagen, dass Sie keinen HTML-Fünf-fähigen Browser haben. Ihr Browser wird durch diese Quellen zu suchen gehen, um herauszufinden, die erste 1 , die nur Prime Video-Punkt verwenden kann und bevor existiert. In diesem Fall tut es Dot web m existiert Nein. Gibt es eine Punkt-Organisation? Nein, nein. Sie sollten also nicht hier drin sein. Und unser Videoelement sollte genau so aussehen. Allerdings speichern wir diese Vorschau unserer Seite, es funktioniert immer noch. Nun, was passiert, wenn ich und vorher ganz unten, wo wir kein Web haben? Ähm, wir haben keine Ogi-Akte. Aktualisieren Sie die Seite. Es funktioniert jetzt immer noch. Der Grund dafür ist, dass die Browser nach Web suchen und dann nach Ogi suchen Es fand keine von denen, aber es fand eine und vorher. Also wird es das benutzen. So geht Ihr Browser einfach durch jede Quelle und versucht, die Quelle des Videos zu finden. Und wenn es findet, dass man es benutzen wird, wird es dringend empfohlen, dass Sie dot mp vier verwenden. Es ist das am weitesten verbreitete Videoformat. Es funktioniert auf allen Browsern, und Sie werden kein Problem damit haben. Es hat auch eine große Komprimierungsmethode, so dass Ihre Videos werden kleiner und die Last schneller für den Benutzer. Nun, das ist es für das Video-Element für dieses Video. Ich möchte, dass Sie in diesem Dokument ein neues Dokument erstellen. Erstellen Sie das Videoelement genau wie Sie es hier gesehen haben. Ich möchte, dass Sie dann ein Video von MP vier finden. Sie können wahrscheinlich eine überall im Internet herunterladen. Die meisten Computer haben in der Regel einen Punkt und vor Video irgendwo verfügbar. So finden Sie einen Punkt und vor Video und zur Quelle hinzugefügt. Attribut innerhalb des Quellelements, das sich daran erinnern, dass Quellelement in Ihrem Video-Element war sehr ähnlich wie ein select-Element hat Optionen darin. Video hat Quelle darin. Fügen Sie dann etwas Text für Nicht-HTML fünf Browser auf Ihrem Video-Element hinzu. Schalten Sie Ihre Steuerelemente ein, schalten Sie die automatische Wiedergabe ein. Dann möchte ich, dass Sie speichern ein öffnen Sie das Dokument in Ihrem Browser und überprüfen, ob Ihr Video funktioniert. Wenn Sie alle diese Schritte durchgeführt haben, sollte Ihr Video die Kontrolle haben, damit Sie es pausieren können. Die automatische Wiedergabe funktioniertautomatisch funktioniert 47. Audio: html five ermöglicht es uns, Musik oder Ton automatisch einzubetten. Dies ist ein HTML-Fünf-Element, so dass es nur mit mehr funktioniert. Moderne Browser funktionieren nicht mit den alten Browsern, und das Element, das wir verwenden, wird Audio genannt, hat ein öffnendes und schließendes Tag. Und genau wie Video, es hat auch eine Quelle. Tag nimmt das SRC-Attribut. Das ist eine Quelle des Audio, und es braucht auch einen Typ, um den Browser wissen zu lassen, welche Art von Audio es spielen soll . Das Audio-Element nimmt ein paar verschiedene Parameter an. Kernattribute. Einer, der die Kontrolle ist. Können Sie den Ton in der Steuerung der Lautstärke steuern? Ja oder nein in diesem Fall sagen Ja, wir wollen in der Lage sein, die Audio- und Auto-Play zu steuern. Jetzt wird nichts davon ohne eine Quelle funktionieren, so dass die Quelle dafür wird Ben Sound epischen Punkt mp drei sein. Ich fand gerade diese lizenzfreie Musik auf Ben Sound dot com und der Typ wäre Audio Schrägstrich mp drei. Nun, wenn ein Browser nicht unterstützt html fünf Audio schwächen, geben Sie einfach hier ohne ein anderes Element nur innerhalb des Audio-Elements ein. Ihr Browser unterstützt HTML Five Audio nicht. Ganz einfach ist das. Und wenn Ihr Browser HTML Five-Audio unterstützt, wird dieser Text nicht angezeigt. Jetzt werde ich diese Seite in einer Vorschau anzeigen und es begann automatisch zu spielen. Wir haben hier auch Kontrollen. Ich kann die Lautstärke ändern, und alles, was es ist, ist Audio. Was passiert, wenn ich die Kontrollen ausziehe? Zähne steuert aus, aber die automatische Wiedergabe ist auf Speichern. Aktualisieren. Es hat die Musik automatisch abgespielt. Ich hatte keine Kontrolle über die Musik, und sie wollte immer und immer wieder spielen. Großartig. Wenn Sie ein Kino einrichten, ist es nicht toll, wenn Ihr Benutzer auf einer Webseite nicht unbedingt andere Musik hören möchte, verschiedene Soundeffekte auf einer Seite. Die meisten Menschen surfen im Internet, während sie Musik hören, oder sie haben ein anderes Video in einem Film, und sie wollen nicht, dass andere Geräusche das stören. Seien Sie also sehr vorsichtig, die Steuerelemente bei eingeschalteter Auto-Wiedergabe zu deaktivieren. Nun, noch eine letzte Sache. Wir haben zwei andere Arten von Audio, die wir streamen können Oh Gee gee, genau wie mit Videos, außer mit einem Video statt Audio-Schrägstrich o. G. G. Es war ein Video, Social Draghi, Video-Elemente und so weiter, und wir haben auch Welle. Die Welle wird in der Regel die größte Form sein, so dass es eine Weile dauern kann, bis eine langsamere Internetverbindung. Toe Last, all dies, so dass wir beginnen können spielen Ogi nicht weithin akzeptiert, aber MP drei ist das am weitesten verbreitete Audio-Format im Internet. Es hat auch ein großes Komprimierungsverhältnis, was bedeutet, dass Ihre Musik oder Ihre Audiodatei kleiner sein wird. Und deshalb wird es schneller geladen. Für den Benutzer die Qualität nicht so schlecht. Ihr Prozess wird sich auch jede der Quellen ansehen und versuchen, sie zu finden. Wenn dieser Browser, mein Browser, nach einer O.G-Einreichung suchte, fand O.G-Einreichung suchte, er es nicht, würde er dann versuchen, nach einer Way-Datei zu suchen, und wenn er nicht fand, dass es dann nach einer MP drei Datei suchen würde. Wenn ich das also speichere, weil die Ogi- und Wave-Dateien nicht existieren und ich meine Seite aktualisiere, funktioniert es jetzt immer noch, weil ich die anderen beiden nicht verfügbar habe. Benötigen Sie die darin enthaltenen Elemente technisch nicht. Daher besteht Ihre Aufgabe für dieses Video darin, ein neues Dokument am Audio-Element zu erstellen dann die Steuerelementattribute zu diesen Audio-Elementen für Ihre Quelle hinzuzufügen. Ich möchte, dass Sie eine MP-3-Datei hinzufügen. Fühlen Sie sich frei, um Ben Sound dot com zu gehen und ein audiophiles von ihm zu bekommen. Dann möchte ich, dass Sie Nicht-HTML-Fünf-Browser-Text hinzufügen. Also, wenn der Browser nicht das Audio-Element verwenden, es wird etwas Text zeigen und sagte Speichern öffnen Sie das Dokument in Ihrem Browser und drücken Sie dann auf Ihrem audiophile abspielen . Wenn Ihr Audio-Element beginnt, Musik oder Ton jeglicher Art zu projizieren, was auch immer Ihre MP drei Datei ist, dann haben Sie erfolgreich Audio zu Ihrer Seite hinzugefügt. 48. Sich anpassendes Design: Responsive Design ist die Fähigkeit, die Vorlage und das Styling einer Seite basierend auf dem Browser mit jetzt zu ändern . Was das bedeutet, ist, wenn jemand Ihre Website auf einem besonders großen Browser ansieht, der normalerweise ein Laptop oder Desktop-Computer ist, wird die Breite ziemlich breit sein. Aber wenn jemand dann die gleiche Seite auf einem Telefon in mobilen Gerät ansieht, würde ein Tablet etwa 70 75% die Breite in Pixel, wie Ihr Laptop wäre und Ihr Telefon könnte die Hälfte davon sein. Möglicherweise kleinere mögliche etwas größer, je nach Telefon. Jetzt kennen wir nicht jedes einzelne Gerät, das da draußen ist. Wir kennen die Vorsätze von allen nicht. Wir wissen nicht, welche Menschen welche Resolutionen verwenden. Wir werden zu welchem Zeitpunkt auf die Website zugreifen, und das wird ziemlich problematisch. Und was wir eigentlich tun wollen, ist eine Website zu erstellen, die für jedermann verfügbar ist. Wir tun dies mit einem Begriff namens Responsive Design. Manche Leute nennen es mobile Erste mobile bereit, aber im Wesentlichen muss jede Website reagieren auf die Breite des Browsers reagieren. Nun ist die Idee, wenn Sie öffnen eine Website Lassen Sie uns sagen, Facebook in Ihrem Browser auf Ihrem Laptop , und dann öffnen Sie Facebook dot com auf Ihrem mobilen Gerät, Ihrem Tablet, Ihrem Telefon, Ihrem Telefon, was auch immer es sein mag, Es wird anders aussehen. Es könnte sogar anders handeln. Diese Vorlage Dinge werden anders sein. Sie könnten eine Navigationsleiste haben, die mit Ihnen schwebt, möglicherweise nicht mit Ihnen schwebt. Ihre Suchleiste ist möglicherweise größer. Könnte versteckt sein, Sie scheinen, oder Informationen auf einem Laptop, weil der Laptop mehr Immobilien hat, mehr Fläche zu arbeiten, während auf einem mobilen Gerät gibt es normalerweise nicht so viel Platz. So einige der weniger wichtigen Informationen sind jetzt nicht sichtbar, weil wir nicht wissen, wer am Telefon sein wird, wer auf einem Laptop sein würde, würde auf einem Tablet sein. Als Webentwickler ist es unsere Aufgabe, für jeden zu bauen. Jetzt bedeutet das nicht, dass Sie eine Website für mobile Geräte wie Telefone, eine andere für Tablet, eine andere fürLaptops, eine andere für Desktop erstellen andere für Tablet, eine andere für Laptops, müssen. Stattdessen können Sie verschiedene Bibliotheken verwenden, verschiedene Codegruppen, an denen andere Personen gearbeitet haben, um nur eine Website zu erstellen, die auf allen Geräten funktioniert und entsprechend reagiert. Nun, warum das jetzt wichtig ist, ist, weil wir in einer großen Übergangszeit sind. größte Teil der Welt kam über Desktops online. Computer waren ziemlich groß war vor 2030 Jahren. Sie waren nicht sehr leistungsstark, als Laptops herauskamen. Die Menschen konnten ihren Desktop überall hin mitnehmen und ihre Arbeit praktisch überall für mindestens ein paar Stunden fortsetzen , ohne dass der Akku ausgeht. Und wenn es irgendwo einen Stecker gab, dann kannst du deine Arbeit überall mitnehmen, was sehr mächtig war. Aber jetzt haben wir Tablets und mobile Geräte wie Android oder iPhone und mehr Leute , die online kommen. Wir beginnen mit mobilen Geräten, vor allem, weil Telefone sind billiger für jemanden, um ihre Telefone zu kaufen. Ich kann auf das Internet zugreifen, das Sie in verschiedenen Bereichen der Welt für $50.100 Dollar kaufen können , und sie gehen nach oben bis zu 78 $900, je nachdem, wo Sie an welcher Art von Telefon Sie wollen. Aber sie alle greifen jetzt auf das Internet zu. Jetzt, während immer mehr Menschen online mit ihren mobilen Geräten kommen, haben wir immer noch viele Leute, die Laptops verwenden. nun Wenn Sienunein Webentwickler sind, schreiben Sie Code auf einem Laptop. Es ist zu diesem Zeitpunkt ziemlich unvermeidlich. Und während Sie eine Website auf Ihrem Laptop erstellen, werden andere Leute auf die Website über ihre Telefone zugreifen. Sie müssen darauf zugreifen, um es auf einem Laptop und auf Ihrem Telefon zu testen, also gibt es eine Menge gemischt hier. Ich werde nicht rasseln eine Statistik basierend darauf, wie viele Menschen gerade von ihren Telefonen auf das Internet zugreifen . Aber es ist sehr hoch, und es wird nur noch höher werden. Was das bedeutet, ist, dass Ihre Website für alle freundlich sein muss. Wenn es nicht für jedermann freundlich ist, könnten Sie einen sehr wichtigen Verkehr verpassen. Ein gutes Beispiel ist, wenn Sie vorhaben, ein soziales Netzwerk zu erstellen, das nur für Menschen in Indien verfügbar war . Nun, es gibt eine Menge Leute in Indien, die eine Menge Geld haben, und es gibt viele Leute, die nicht viel Geld haben. Aber Sie möchten, dass alle in Indien Ihre sozialen Netzwerke nutzen. Sie werden für beides bauen müssen und mit der Zeit werden weniger Leute Laptops und Desktops kaufen und mehr Leute kaufen nur Tablets. Also eine schnelle Geschichte als Entwickler, wir verwendet, um nur Desktop-Websites zu machen. Es war die einzige Technologie, die wir hatten. Wenn es nicht für alle gutaussah, gut musste der Endbenutzer einfach damit leben. Das ist nicht mehr der Fall. Dann würden wir einen sekundären Standort nur für mobile Geräte erstellen. Das ist, wenn das iPhone zum ersten Mal herauskam und Internet-fähige Geräte Handheld-Geräte wie Ihr iPhone. Selbst für die ersten paar Android-Handys, die Menschen noch machen mobile Websites nur für diese Orte, und sie sagen, um m dot Website dot com gehen. So m dot cineplex dot com ist eine, die ich ziemlich regelmäßig auf Ah sehe, in Werbespots. M dot facebook dot com ist ein weiterer, und jetzt müssen wir mobile erste Websites machen, die sowohl für mobile Geräte gut aussehen und geschickt , wo immer sie landen. Es ist wichtig, dass wir das jetzt tun. Die meisten Entwickler verwenden ein Framework namens Bootstrap. Sie können das bei get bootstrap dot com finden, und es ist zusammen mit einer JavaScript-Bibliothek namens J Query gekoppelt. Sie können herausfinden, ein.J coury dot com Jake ist eine JavaScript-Bibliothek, die in jedem Browser funktioniert. Cross-Browser-kompatibel ist die Terminologie, die wir verwenden, und der Grund, warum es so mächtig und so weit über das gesamte Internet für fast jeden Entwickler akzeptiert , jeder Front-End-Entwickler ist sowieso, weil jeder Browser versteht und verwendet JavaScript nur ein wenig anders. Und deshalb ist eine einzelne JavaScript-Bibliothek, die uns alles nur einen einzigen Weg machen lässt, der all diese Browser vereint , für uns jetzt extrem leistungsfähig, zurück zu Bootstrap Bootstrap ist ein standardisiertes Teaming System, und es verwendet CSS, HTML und JavaScript. Und es koppelt all diese zusammen mit einigen coolen JavaScript-Tools, mit denen Sie sofort Dinge tun können. Auch hier ist dies kein JavaScript-Kurs, aber Boots Drop ist bei weitem die gebräuchlichste mobile First oder Responsive Design-Bibliotheken zur Verfügung. Jetzt ist es zu diesem Zeitpunkt, wo Sie wahrscheinlich genug HTML kennen, dass Sie Bootstrap herunterladen und installieren können , und Sie können ihre Dokumentation lesen. Diese Dokumentation ist ziemlich gut organisiert. Eigentlich ist es nicht super langweilig. Sie haben großartige Beispiele, und Sie können anfangen, Dinge selbst zu bauen, auch wenn Sie CSS oder JavaScript nicht kennen. Es gibt viele leistungsstarke Teile von Bootstrap, die auch nicht benötigen, und es gibt andere Teile, die als Komponenten bezeichnet werden, die HTML-Markup erfordern. Bootstrap kommt mit einem eigenen Styling, so dass Sie sich keine Sorgen darüber machen müssen. Das ist alles für Sie gehandhabt, und Sie können viele JavaScript-Funktionen aktivieren, indem Sie einfach HTML-Attribute schreiben. Also, wenn Sie den Kopf über, um Stiefel drop dot com zu bekommen, das wäre ein großartiger Ort, um weiter voranzukommen. Ihre nächste Anlaufstelle besteht also darin, zu Bootstrap zu gehen, Bootstrap dot com zu holen, herunterzuladen und zu installieren und es einfach zu benutzen. Sie müssen nicht unbedingt das gesamte CSS oder das JavaScript kennen, weil sie es so einfach machen . Sie können die meisten Ihrer Website schreiben, eine responsive Website, die nur HTML verwendet, und indem Sie das tun, werden Sie beginnen, Ihre Karriere als Entwickler um viele Monate schneller voranzutreiben , möglicherweise Jahre. Nur indem Sie das tun,