HTML-Webentwicklung für Fortgeschrittene

1. HTML 201: Fortgeschrittene Webentwicklung: Hallo und willkommen zu HTML 201A, lernen Zwischen-HTML. Also werden wir in diesem Kurs viele der Grundlagen überspringen. Sie sollten bereits die Grundlagen wie HTML-Syntax kennen, Dinge wie das Erstellen von Links, Unterstrichen, Fett, Hinzufügen von Bildern, Sie wissen die einfachen Dinge wie das. Wenn Sie also nicht wissen, wie man das bereits in HTML macht, gehen Sie bitte zurück zum HTML 101 Kurs oder beginnen Sie einen HTML-Kurs und nehmen Sie diesen. Sonst wirst du in diesem ein bisschen verloren gehen. Andernfalls, wenn Sie HTML 101 absolviert haben oder Sie bereits mit HTML Basics vertraut sind, wird dieser Kurs für Sie sein. Wir werden viele verschiedene Dinge durchlaufen, wie einige semantische interne Links, Fabrikationen, Pfade. Das ist ein wirklich großer. Wir werden ein Webseitenlayout mit Tabellen erstellen. Tische sind hier sehr wichtig. Wir werden ein wenig mehr in CSS wie Inline-CSS-Klassen, IDs, Codeformatierung, Formulare, Formularfelder wie, wenn Sie Ihre E-Mail-Adresse oder Ihr Passwort eingeben, Dinge wie diese. Und ein paar Bits und Bobs dazwischen. Hallo, mein Name ist Caleb Pauline. Ich werde heute dein Lehrer sein. Wir werden lernen Zwischen-HTML. Ich habe mehr als 300 Tausend Studenten beigebracht, wie man kodiert. Ich bin ein Senior Web Developer und ein Online-Codierungslehrer. Am Ende dieses Kurses werden wir gemeinsam eine jede ML-basierte Webseite erstellen, die ein richtiges Layout war. Wenn Sie also den HTML 101-Kurs genommen haben, hätte das eigentlich kein richtiges Layout. Wir werfen irgendwie nur eine Reihe von Elementen auf eine Seite. Dieser wird ein richtiges Layout haben, also werden wir einen Titel und Navigation, einen Inhaltsbereich haben. Wir werden ein YouTube-Video einbetten, eine Reihe von Bildern, aber einige mehr Inhalte und es gibt einige schriftliche Inhalte, es wird fantastisch sein. Wenn das alles so klingt, als wäre es in deiner Gasse, freue ich mich darauf, dich in dieser ersten Lektion zu sehen. 2. Keine Unterlagen: In Ordnung, zuerst müssen wir ein paar Dinge klären. Wenn wir also eine Basisstruktur im HTML 101-Kurs erstellt haben, und lassen Sie uns dies einfach von Nur-Text zu HTML ändern. Und übrigens verwende ich VS-Code, wenn Sie einen anderen Editor verwenden, alles, was ich getan habe, war zu Datei zu gehen, die sich außerhalb meines Aufnahmebereichs befindet und dann eine neue Datei, also Befehl oder Kontrolle, und wir werden eine neue Datei für Sie erstellen. Und es dachte automatisch, dass es sich um eine einfache Textdatei handelte. Also klickte ich hier unten, wo es einen einfachen Text verwendet, der in HTML und ausgewähltem HTML eingegeben wurde. Und das gibt uns nur nette kleine Leckereien wie diese. Wir können HTML Doppelpunkt fünf tun, drücken Sie Tab für die automatische Vervollständigung mit VS Code. Und es gibt uns einen Haufen Zeug hier drin. Also werde ich tatsächlich voran gehen und etwas davon löschen. Und ich werde dieses HTML2 01 nennen. Nun haben wir an einigen Punkten erfahren, dass wir einen Absatz haben, den wir etwas Lorem Ipsum reinbringen könnten. Und wir könnten zum Beispiel sagen, dass dies unterstrichen werden sollte, so etwas. Nun, wenn ich das speichere, lassen Sie uns hier reingehen und namenlose index.html. Und ich speichere das einfach in einem bestimmten Ordner, den ich HTML zu 01 aufgerufen hatte. Und ich nenne es index.html. Aber wenn ich Google Chrome oder irgendeine Art von Browser öffne, was auch immer Ihr Lieblings-Browser ist, können Sie zur Datei gehen und dann die Datei öffnen. Also Control oder Command O. Gehe zu meinem Ordner hier. Und lassen Sie uns das einfach öffnen und wir können sehen, dass dies, sobald ich hineinzoomen, unterstrichen ist. Und das ist cool, es tut, was wir wollen, aber leider zugrunde liegt ist veraltet. Also war es in Ordnung, das vor einer Weile zu lernen nur weil wir das unterstrichen machen mussten. Aber es gibt einen besseren Weg, dies zu tun. Und der bessere Weg, dies zu tun, wäre wahrscheinlich, eine Spanne hier hinzuzufügen. Und lasst uns voran gehen und dies in ein Span-Element ändern. Und all dies ist, ist ein einfaches In-Line-Element. Und Sie sollten an dieser Stelle mit Blockhelminthen versus Inline-Elementen vertraut sein. Und was wir tun werden, ist mit diesem Stilattribut zu arbeiten. Und dieses Stilattribut ermöglicht es uns, CSS zu schreiben. Sie müssen also im Moment nicht zu viel CSS wissen. Aber wenn Sie unterstreichen wollen, würde ich sagen, vielleicht versuchen, diese besondere auswendig zu lernen. Ich sage den Leuten ständig, dass du nicht zu viel auswendig lernen musst. Ich meine, Sie können es immer googlen, wie man Basiswerte mit CSS hinzufügt, das wird auch funktionieren. Also werde ich Text, Dekoration, Doppelpunkt, unterstreichen. Wenn ich das jetzt speichere, gehe zurück zu meiner Seite und aktualisiere, es sollte so aussehen, als hätte nichts geändert. Und das ist perfekt. Und ich kann immer überprüfen, indem Sie mit der rechten Maustaste klicken und auf Inspect klicken. Und Sie können in meinem Inspekt-Tool hier unten sehen , dass es in der Tat eine Spanne mit Textdekoration unterstrichen ist. Und wenn ich wollte, kann ich das jetzt ein- und ausschalten, was wirklich, wirklich schön ist. Also vorwärts, wenn wir Unterstreichungen verwenden, lassen Sie uns voran und verwenden Textdekoration zugrunde liegen. Anstatt die UI-Elemente zu verwenden, nur weil das UI-Element veraltet ist, ist es von alten Versionen von HTML und CSS kann dies jetzt tun, und wir bevorzugen, CSS zu verwenden, wann immer wir können. 3. Interne Links: Okay, lassen Sie uns einen Blick auf interne Links werfen. Also wollen wir eigentlich erst einmal zusammenfassen. Wie erstellen wir also einen Link? Wir erstellen einen Link und ich werde das hier nur noch einen Hauch größer machen. Wir erstellen eine Verknüpfung mit dem a Anker at Element und dem HREF-Attribut. Und das könnte zu HTTP, website.com gehen, zu website.com gehen. Und das wird uns hier oben eine kleine Verbindung zeigen. Und es wird auf website.com gehen, was auch immer auf dieser Seite ist. So schaffen wir also einen Link. Aber was wäre, wenn wir auf etwas anderes auf der Seite verlinken wollten? Also lassen Sie uns voran und machen uns die Seite ein wenig schöner aussehen. Sagen wir mal eins. Willkommen bei HTML 201. Und lassen Sie uns einen Link erstellen. Und wir wissen noch nicht, was dieser Link sein wird, aber wir wissen, dass es sagen wird, scrollen Sie nach unten auf der Seite. Und wir können das loswerden, weil das nicht mehr notwendig ist. Das war nur ein Beispiel. Also, wenn ich das tue, klicke ich zum Ende der Seite scrollen und es tut nichts. Es liegt daran, dass es nirgendwo hingeht. Sie können sehen, dass es keine HREF, Nein, es gibt keine Hyperlink-Referenz. Nehmen wir an, wir hatten diese wirklich, wirklich lange Seite und lassen Sie uns das ein paar Mal kopieren. Und mir ist die Formatierung in diesem Moment nicht wirklich wichtig. Ich möchte nur, dass die Seite einfach so scrollen kann. Und ich möchte, wenn wir auf den Link klicken, um zum Ende der Seite zu gehen und vielleicht einen Link am Ende der Seite haben, um uns wieder nach oben zu bringen. Also lasst uns das machen. Sagen wir, es wird geben, sagen wir wie ein H3. Und wir werden diesem eine ID geben, und dies ist eine eindeutige Kennung für dieses Element, so dass es nie die gleiche ID auf der gleichen Seite haben sollte. Also lassen Sie uns das unten nennen, und das ist das Ende der Seite. Und wenn ich aktualisiere, können Sie es sehen, wie unten auf der Seite, nichts passiert ist mit der ID nichts Besonderes getan hat. Aber wenn wir wieder zu unserem Link gehen, können wir tatsächlich Nummernzeichen-ID eingeben. Was auch immer diese ID sein wird, und jetzt, da die ID, die wir geschrieben haben, unten war, geh hier runter, ID ist gleich unten. Sichern Sie sich das. Und ich werde mich nur hier auffrischen. Und Sie können sehen, dass mein Link tatsächlich Farbe geändert hat. Und Sie können tatsächlich sehen, dass index.html Nummernzeichen unten steht. Und wenn ich darauf klicke, boom, bringt es mich nach unten, so dass es keinen glatten Scroll macht, aber es sprang mich ganz unten auf der Seite, was eigentlich ziemlich wichtig für lange Inhaltsseiten war. Jetzt lasst uns weitermachen und einen Link erstellen, um uns wieder an die Spitze zu bringen. Also vielleicht lassen Sie uns das als H3 entfernen und das macht dies ein wenig versteckter. Lassen Sie uns hier ein div erstellen. Und Sie können sehen, dass wir damit etwas weiter vorankommen werden. Id ist gleich unten, aber wir wissen, dass IDs vollständig eindeutig sein können oder sollten. Also lasst uns voran gehen und diesen loswerden. Sie können tatsächlich die ganze Linie loswerden. Und lasst uns hier einen Link setzen, der wieder nach oben geht. Zurück nach oben. Da dies nun ein interner Link ist, benötigt dies eine ID irgendwo auf der Seite namens top. Also lassen Sie uns hier zurück zu unserem Code scrollen, und geben wir diesem eine ID von oben. Und lassen Sie uns Ihre Seite aktualisieren und dies eine Chance geben. Und das verkleinerte Ausweg für mich, ich will wieder hineinzoomen. Und das sollte mich den ganzen Weg nach unten scrollen. Boom, einfach so oder nicht scrollen, aber springen nach unten und das sollte wieder nach oben springen, einfach so. Also jetzt haben wir interne Links. Was ich möchte, dass Sie eine Seite erstellen, die lang genug ist , dass Sie hier tatsächlich eine Bildlaufleiste erstellen. Oder was ich tat, war, weil diese Seite eigentlich nicht sehr lang war. Sie können Ihr Inspektionswerkzeug immer öffnen und wenn Sie es verkleinern oder wenn Sie es hoch genug bringen, wird es Ihr Ansichtsfenster irgendwie verkleinern und Sie haben eine Bildlaufleiste und Sie können es so testen. Geh weiter und gib dem einen Schuss, sobald du bereit bist, lass uns zur nächsten Lektion gehen. 4. Favicons: Werfen wir einen Blick auf Fab-Symbole. Fabrikationen sind diese kleinen Symbole, die direkt neben Ihrem Seitentitel angezeigt werden. Jetzt haben wir eigentlich kein Favicon Set. Wir haben einen Titel, der cool ist, aber was, wenn wir etwas ein bisschen Custom wollen? können wir auch hinzufügen. Wir können es so anpassen, was wir wollen. Wissen Sie. Normalerweise sollte es sich um ein Bild mit 32 Pixeln x 32 Pixeln handeln, also ist es ziemlich klein. Ich werde dieser Regel nicht genau folgen, weil ich weiß, dass sie sie schrumpfen wird, aber wenn Sie wollen, dass sie richtig dimensioniert ist, haben Sie vielleicht die richtige Transluzenz oder Transparenz oder so etwas. Dann ja, du willst 32 mal 32 Bild. Aber ich werde nur zufälliges Bild verwenden, das ich von der Codierung habe, von der Codierung für alle Branding. Also lasst uns hier unseren Code öffnen. Und in unserem Kopf, was wir schaffen werden, ist das Link-Element. Und wir können Link Doppelpunkt, Favicon. Und er gibt uns alle möglichen Sachen hier drin. Jetzt standardmäßig möchte es, dass wir ein Punkt-ICO verwenden. Das ist ein älteres Format. Das müssen wir nicht tun. Wir können, sagen wir einen Punkt PNG. Nun, das ist genau wie die Verknüpfung zu einem Bild oder einer CSS oder einer JavaScript-Datei, wir müssen tatsächlich sicherstellen, dass dies funktioniert. Und Sie werden feststellen, dass wir hier drei Attribute verwenden. Also haben wir das Link-Element. Wir haben die Schiene oder die Beziehung, wie ist das? Es ist eine Verknüpfung und es ist ein Symbol, eine Hyperlink-Referenz zu wo immer dieses Bild sein wird und dann den Bildtyp. Und wir wollen nicht, dass der Bildtyp X-Symbol ist, wir wollen, dass das Bild P&G ist, weil ich ein PNG verwenden werde. Ebenso, wenn Sie ein JPEG verwenden, wäre es JPEG. Alternativ, JPEG mit einem e, Aber wir verwenden P&G. Jetzt ist es an dieser Stelle könnte ich eigentlich wollen, um meinen Editor ein wenig mehr zu verwenden. Was ich also gerne tun würde, ist, anstatt nur eine Datei geöffnet zu haben, werde ich diesen ganzen Ordner öffnen. Ich gehe die Akte öffnen. Ich gehe zu meinem Desktop, wo sich dieser Ordner befindet, und ich habe nur index.html drin. Gehen wir weiter und öffnen das. Und es sieht wirklich so aus, als hätte es nicht viel gemacht, außer diese Explorer-Leiste hinzugefügt. Wenn nun diese erkundete Leiste nicht angezeigt wird, können Sie immer dorthin gehen, wo Sie irgendwo in Ihrem View-Explorer sind. View Explorer, dass es immer für Sie einschalten wird. Lassen Sie uns also auf index.html klicken. Und das ist nur die Seite, an der ich gearbeitet habe. Und hier drinnen möchte ich auch eine Art Bild zwei verknüpfen. Also werde ich meinen Finder öffnen. Ich werde dieses bestimmte Bild kopieren. Ich kam bereit zu dieser Lektion mit einem Bild namens Codierung für alle, Favicon dot PNG. Ich werde nur den ganzen Namen kopieren. Und Sie können sehen, wie ich es in diesen Ordner kopiert habe, VS Code war wie, oh, es gibt eine neue Datei. Okay, lassen Sie uns das auch reinlegen, und jetzt können wir es in der Vorschau sehen. So wird das Bild aussehen. Und alles, was ich tun muss, ist, weil ich diesen Dateinamen kopiert habe, ich werde einfach den Dateinamen einfügen. Und wir verwenden keine Schrägstriche oder Punkte, Punkte oder so etwas. Wir sind, wir verwenden das nicht, oder sagen wir fav cons, wir tun nichts dergleichen. Wir möchten sicherstellen, dass dies im selben Ordner wie unsere index.html ist, nur um dies für den Moment einfach zu halten. Und Sie können es im selben Ordner sagen, weil wir im HTML2 sind, äh, einem Ordner hier drüben. Und es gibt index.html und Codierung für alle, favicon dot PNG. Gehen wir weiter und speichern Sie das. Und lasst uns diese Seite aktualisieren. Und Sie können sehen, dass das Favicon jetzt aufgetaucht ist. Nun, wenn Sie einen anderen Browser verwenden und er nicht angezeigt wird, könnte das aus einem von zwei Gründen sein. Es gibt einen Tippfehler und Sie haben das Bild nicht richtig hinzugefügt. Ich zeige Ihnen, wie Sie das in nur einer Sekunde debuggen können. Oder es gibt Caching und ich weiß, dass Browser wie Microsoft Edge gerne ziemlich hart auszahlen. Sie müssen also möglicherweise einen harten Neuladen durchführen oder einen anderen Browser öffnen. Ich nur, weil Ihr Browser versuchen wird, dieses Bild einmal zu bekommen und dann versuchen, es für sehr, sehr lange Zeit zwischenzuspeichern. Nun, wenn das nicht für dich auftaucht, und lass uns voran gehen und diesen Wortlaut machen. Es taucht nicht da drin auf. Und Sie können tatsächlich sehen, wenn meine Inspect Tools geöffnet sind, gibt es einen Fehler. Wenn ich zu meiner Konsole gehe, können Sie die Netzwerkfehlerdatei nicht gefunden sehen und sucht nach einer Abfragecodierung für alle, favicon dot PNG. Und das gibt es einfach nicht. Wenn Sie also Ihre Inspektionstools öffnen und dort ein Tippfehler vorhanden ist oder die Datei nicht existiert, sehen Sie den Fehler direkt dort. Und ich werde das rückgängig machen. Und da gehen wir hin. Wir haben ein Favicon. Also, wenn Sie mit mir folgen, was ich möchte, dass Sie ein kleines kleines Bild finden, so etwas, und fügen Sie es als Favicon zu der Seite, an der Sie arbeiten. 5. Pathing: Okay, lass uns über etwas reden, das irgendwie kompliziert und irgendwie knifflig ist, weil dieser eine Menge Leute für eine sehr lange Zeit betrügt, einschließlich mir selbst. Und ich rede von Pfadbildung. Also haben wir jetzt alles in einen bestimmten Ordner gelegt, aber was ist, wenn wir einen anderen Ordner wollen? Was wäre, wenn wir unser Favicon in einen Ordner namens Bilder Schrägstrich fab Icons verschieben wollten. Und wir könnten einfach klicken und ziehen Sie das direkt da hinein. Wir haben hier einen Ordner namens Bilder, und dann einen anderen Ordner namens Fab-Symbole, und dann eine Datei hier drin namens Codierung für alle. In der letzten Lektion haben wir also ein Favicon erstellt. Aber wenn ich diese Seite aktualisiere, werden wir sehen, dass wir die Luftdatei nicht gefunden haben. Es existiert nicht, weil es sich nicht mehr in demselben Ordner befindet. Es befindet sich im selben Ordner wie index.html. Aber was wir tun können, ist, können wir sagen und gehen Sie zu den Bildern Ordner Schrägstrich, die fab Icons Ordner Schrägstrich, und dann unseren Dateinamen. Also lassen Sie uns voran und speichern Sie diese Aktualisierung sowieso und erscheint für uns. Das ist also Pfadbildung. So gelangen wir auf einen Weg. Also hatten wir nur den Ordnernamen Schrägstrich einen anderen Ordnernamen, und übrigens, verwenden Sie keine Leerzeichen. Ich weiß, dass viele Windows-Benutzer gerne Leerzeichen verwenden, aber in solchen Dingen ist es viel einfacher, keine Leerzeichen zu verwenden, wenn Sie Unterstriche oder Bindestriche verwenden, aber bitte verwenden Sie keine Leerzeichen, Sie werden auf viele Probleme stoßen. Also ein Ordner mit dem Namen Schrägstrich, Ordnername Schrägstrich, und dann der Dateiname, Einfach wie das. Nun gehen wir weiter und fügen Sie ein Bild in den Ordner „Bilder“ hier, nicht den Favicon Ordner, sondern nur die Bilder. Also gehen wir voran und gehen, um Splash Dot com zu verdienen. Und lassen Sie uns ein Bild von einem Computer bekommen, weil wir an Computern arbeiten. Gut genug. Und lassen Sie uns dieses kostenlos herunterladen. Holen wir uns die kleine Version dieses hier, denn das ist alles, was wir brauchen. Ich möchte mich bei Glenn Carsten bedanken. Peter. Das ist ein süßes Foto. Danke, dass ich es benutzen darf. Lassen Sie uns voran und zeigen Sie dies im Finder. Und ich werde das aufmachen. Ich kopiere nur diese Akte. Gehen wir weiter und werfen das hier rein. Und ich werde dies in Computer ab.js JPEG und Editor umbenennen. Sie können sehen, dass dies jetzt in einen richtigen Ordner umgewandelt wird. Und jetzt gibt es Unterordner hier, aber in Bildern habe ich einen Ordner namens fav Icons und einen Ordner, und nicht einen Ordner, sondern ein Bild, eine Datei namens Computer dot J peg. Jetzt werde ich einen Haufen dieser P-Elemente loswerden weil wir sie jetzt nicht wirklich brauchen und wir diese Seite sowieso lange machen werden. So dass der interne Link zum oberen und unteren Rand der Seite perfekt funktionieren wird. Schließlich, Wahrscheinlich nicht gerade jetzt, weil die Seite ist irgendwie kurz. Aber lassen Sie uns voran und fügen Sie ein Bild hinzu. Und das SRC wird Bilder sein, das ist der Ordnername. Und dann ist der Dateiname Computer dot JPEG wird ein alt Computer gegeben. Und das war's. Also, wenn wir zurück zu unserer Seite gehen und wir aktualisieren, können wir sehen, dass dieses Bild erscheint jetzt. Und das ist jetzt wieder im Ordner Bilder, wenn das für Sie nicht funktioniert, lassen Sie uns einfach sicherstellen, dass Sie die Dinge immer richtig eingegeben haben. Groß-/Kleinschreibung wird beachtet. Also, wenn Ihre Ordner Bilder Kleinbuchstaben genannt, schreiben Sie keine Bilder in Großbuchstaben und das wird einfach nicht für Sie funktionieren. Also lasst uns Bilder machen. Brechen Sie mich und lassen Sie uns erfrischen. Wir können sehen, dass der Alt-Text dort oben angezeigt wird und in meiner Konsole kann man tatsächlich Fehler nicht gefunden sehen. Also, das geht in einen Ordner. Nun, sagen wir, jemand geht in den Bilderordner, weil wir das tun können. Wir wissen, dass HTML 201 ein Ordner ist. Und wir wissen auch, dass Bilder ein Ordner sind. Also lasst uns das machen. Lassen Sie uns zu Schrägbildern gehen. Und wir können tatsächlich sehen, dass wir Stoff auf einem Ordner haben und wir Computer gepunktet JPEG haben. Aber sagen wir, wir wollten eigentlich etwas hier auftauchen. Was wir tun können, ist in unseren Bilderordner gehen, eine neue Datei erstellen. Wir wollen diese index.html nennen. Und das bedeutet nur, diese Seite standardmäßig zu verwenden. Dies ist die Standardseite, nach der Ihr Browser suchen wird. Also, selbst wenn Sie nicht auf dieser Seite landen, wird versuchen, diese Seite zu verwenden. Jedenfalls, nur standardmäßig. Mein VS-Code ist so eingerichtet, dass Django-Vorlagen standardmäßig verwendet werden, aber lassen Sie es in HTML5 ändern. Und lasst uns HTML-Doppelpunkt fünf machen. Images Ordner wird der Titel, Name und im Körper, sagen wir einfach, hi, hi, hi, hi, hi, hi, hi. Ordnung, also aktualisiere ich einfach die Seite, die wir haben, diese Datei index.html und es zeigt unsere Seite nicht standardmäßig Byte an. Dies ist eine gute Praxis, denn sobald es auf einen Server gelangt, index.html wird die Seite sein, die standardmäßig angezeigt wird . Es wird also so aussehen, als ob du hineinklickst, genau so. Aber es wird nicht unbedingt index.html sagen. Das ist nicht eine Sache, die Sie wirklich zu diesem Zeitpunkt erinnern müssen, aber es ist eine coole kleine Sache, die Sie mit Live-Servern, Live-Websites auf der Straße tun können . Also, jetzt haben wir diese index.html Datei, innere Bilder Ordner. Lassen Sie uns eine Seite verlinken. Sagen wir also h3. Dies ist der Ordner „Bilder“. Und lassen Sie uns hier einen Lincoln erstellen, einen Ankerlink mit dem Hypertext, Hypertext-Referenz. Und wir werden eine relative Seite verwenden. Also werden wir sagen, gehen Sie einen Ordner hoch, und so machen wir das. Wir gehen Punkt Punkt nach oben einen Ordner. Wenn wir brauchten, um einen weiteren Ordner zu gehen, weil dies bereits im Ordner Images ist. Wir mussten draußen sein. Wir könnten Punkt, Punkt Schrägstrich, Punkt, Punkt Schrägstrich, Punkt, Punkt Schrägstrich. Jeder von ihnen, den Sie tatsächlich sehen können, geht in meinem Computer einen Ordner nach oben. Jetzt will ich nichts davon. Ich will nur eins. Und ich möchte in der Lage sein, nicht den Ordner images, sondern index.html auszuwählen. Und das wird auf diesen hier verweisen. Die Benennung wird ein wenig verwirrend, weil wir index.html Datei haben, ist aber okay, und VS Code war klug genug, um herauszufinden, was wir zu tun versuchten. Geh zurück nach Hause ist das, was ich auf ihrer drei frischeren Seite sagen werde. Machen Sie das nur ein großes, größeres. Und wir können wieder nach Hause gehen. Und wenn ich darauf klicke, geht es zurück zum HTML zu einer einzigen Homepage. Also, das ist Pfade in Kürze, um einen Ordner nach oben zu verschieben, verwenden Sie Punktpunktschrägstrich. Um in einen Ordner zu wechseln. Sie verwenden nicht den Punktschrägstrich, Sie geben nur den Ordnernamen Schrägstrich, Unterordner mit dem Namen Wenn es einen Schrägstrich und dann Ihren Dateinamen. Und das ist ein Weg auf den Punkt gebracht. 6. Einführung in Tabellen: Okay, werfen wir einen Blick auf die Tische. Tabellen sind für uns im Moment sehr wichtig, weil es uns ermöglichen wird , tatsächlich eine Art Layout für unsere Seite zu erstellen. Jetzt zugegebenermaßen Layouts, Orange wirklich mit Tabellen mehr erstellt. Dies ist eine sehr alte Art, Dinge zu tun, aber weil wir CSS nicht kennen und wir JavaScript noch nicht kennen. Dies ist der einzige Weg, den wir haben und das ist 100% akzeptabel weil wir Tabellen auf eine Weise verwenden , die nicht mehr wirklich verwendet wird. Wir werden alles darüber lernen, wie man Tabellen richtig verwendet, weil es immer noch für Dinge wie Feature-Sets oder ziemlich jede Regierungswebsite verwendet wird, weil sie alle noch Tabellen aus irgendeinem Grund verwenden. - Ja. So werden Tische immer noch verwendet. E-Mails verwenden Tabellentabellen die ganze Zeit. Es ist eine wirklich wichtige Fähigkeit zu haben. Also werde ich hier runtergehen und in dieser Lektion werde ich Ihnen nur zeigen, wie ein Tisch erstellt wird, aber wir werden noch nichts damit machen. Also fühle dich nicht so, als müsstest du mit mir kodieren. Eine Tabelle ist also ein Tabellenelement genau so. Und innerhalb davon haben wir Tabellenzeilen namens TR und, oder ich kann TR tun. Und dann Tab. Wir können eine andere Tabellenzeile TR Tab haben. Und dann innerhalb jeder Tabellenzeile werden die Zellen oder T Ds-Tabellendatenzellen genannt. Zelle Eins. Und lasst uns hier reingehen und TD-Zelle zwei machen. Und übrigens, wenn Sie irgendwie neu in diesem Kurs sind, werde ich ein wenig zu schnell für Sie gehen. Was ich dort getan habe, war, dass ich Tabelle eingeben konnte und weil es ein HTML-Element ist, kann ich Tabelle eingeben. Und sobald ich diese Emmett-Abkürzung sehe, kann ich die Tabulatortaste auf meiner Tastatur drücken und es erstellt sie einfach in HTML-Elemente für mich. Also jetzt kommen wir in eine nette Verschachtelung und ein HTML 101, das wir alles über Verschachtelung gelernt haben. Wir wissen also, dass diese ganze Sache ein Tisch sein wird, Elemente des Kindes und des Enkels enthält. Diese ganze Sache ist eine Reihe mit seinen untergeordneten Elementen. Und dieses einzelne Element hier wird eine Zelle sein, und dieses wird Zelle zwei sein. Und wenn wir nur unsere Seite hier aktualisieren, scrollen Sie weiter. Wir können Zelle eins sehen, Zelle zwei, nichts Leckeres, das wirklich passiert, sieht nicht so aus, als wäre irgendetwas passiert. Aber was ist, wenn wir dem eine Grenze geben? Wir haben jetzt tatsächlich einen Tisch. Wir können mehr mit uns tun, können wir sagen, die Breite wird ein 100% sein. Und es nimmt die ganze Sache auf, wie wir eine weitere Zelle hinzufügen können. Und das hier wird so 1,2 sein, schätze ich. Und wir könnten 1.3 hinzufügen und wir können nach oben gehen, so weiter und so weiter. Wie auch immer, wir werden in den nächsten Lektionen viel tiefer darauf eingehen. Aber ich wollte Ihnen nur schnell zeigen, dass wir so einen Tisch erstellen. 7. Table: Werfen wir einen Blick auf Tabellenzeilen und -zellen. Also, um eine Tabelle zu erstellen, machen wir diese Tabelle Schrägstrich Tabelle. Und das ist alles, was wir wirklich tun müssen, um eine Tabelle zu erstellen. Aber innerhalb einer Tabelle besteht aus zwei primären Elementen, einer Tabellenzeile. Und dafür steht TR. T r ist gleich einer Tabellenzeile. Und innerhalb jeder Zeile haben wir Zellen sind Tabellendatenzellen. So ist ein td gleich einer Tabellen-Datenzelle. Und so ist es durch TD Tab. Und lassen Sie uns eine erste Zelle erstellen, die erste Zelle hier. Und lasst uns zu einem Browser umblättern und einfach auf Aktualisieren drücken. Wir werden unseren ersten Verkauf sehen. Nun, wir können es nicht sehen, und wir können es untersuchen, wenn wir wollen. Und wir können sehen, dass wir in der Tat in einer Tabelle sind und unser Browser ist schlau genug, um zu sagen , hey, es sollte eigentlich eine Leiche hier sein. Also wickeln Sie die TR in einen T-Körper ein. Das geht also tatsächlich um eine Ebene tiefer. So geht es Tabelle T Body TR td. Jetzt muss ich den t Körper nicht schreiben, weil ich davon ausgehen , dass alles, was ich schreibe, sowieso im Tabellenkörper sein wird, und der Browser macht die gleiche Annahme, damit wir es auf diese Weise abkürzen , dass alles, was ich schreibe, sowieso im Tabellenkörper sein wird, können. Jetzt, um unseren Fortschritt zu sehen, schmeiße ich immer gerne die Grenze hierher und werde dann später einfach die Grenze loswerden. Also lassen Sie uns einen Rahmen von eins und einer Breite von 100% machen. Lassen Sie uns auffrischen. Und jetzt können wir sehen, dass wir unsere erste Zelle haben. Und wenn wir voran gehen und eine zweite Zelle hinzufügen, und das wird nebeneinander sein, was wir mit Blockelementen in HTML 101 nicht erreichen konnten. Aber jetzt können wir, und wir können das weitermachen, so weiter und so weiter. Also statt Sekunden L Wir könnten dritte Zelle tun und wir können immer mehr und mehr hinzufügen. Und wir werden den dritten Salomon loswerden und das ganze Ding rüber kopieren. Eigentlich werde ich es nicht kopieren. Lassen Sie uns dies von Hand schreiben, denn dies ist eine gute Übung, um dies von Hand auszuschreiben. Ted Reihe, um einen zu verkaufen. Und wenn ich einen anderen TV Hit Tab R2, L2. Und da gehen wir hin. Wir haben zuerst verkaufen, zweite Zelle Zeile 2l, eine Reihe zu verkaufen. Und das ist, wie wir eine Tabelle Zeilen und Zellen erstellen. Nun möchte ich, dass du das tust, ist diese Chance zu geben. Ich möchte, dass Sie eine zwei-mal-zwei-Tabelle erstellen, vier Zellen erstellen. Sie haben also zwei Zeilen zu Spalten und vier Zellen insgesamt. Geh weiter und gib dem einen Schuss, sobald du bereit bist, lass uns über die nächste Lektion gehen, wo wir ein bisschen mehr in Tische eintauchen. 8. Merging und Zeilen Merging: Werfen wir einen Blick auf das Zusammenführen von Zellen und Zeilen. Das wird also wirklich, wirklich interessant und es ist zunächst nicht super intuitiv, aber es wird ein wenig einfacher, je mehr man es macht. In der letzten Lektion haben wir also eine zwei-mal-zwei-Tabelle erstellt, zwei Zeilen, zwei Spalten. Dieser, wir wollen ein Drei-mal drei erstellen. Also werde ich hier einen Tisch machen und meine Grenze sehen. Ich will hier meinen Fortschritt sehen. Und dann ändere diese Breite auf 100%, weil ich so viel Platz wie möglich auf meiner Seite einnehmen wollte. Ich möchte keinen zusätzlichen Platz auf der rechten Seite lassen. Nun, zum guten Maß, könnten wir immer einen Körper machen, wenn wir wollten. Das habe ich in der letzten Lektion nicht getan. Ich habe darüber geredet, habe es nicht getan. Das ist okay. Ich werde es diesmal tun, nur um dir zu zeigen, dass wir es schaffen können. Also haben wir hier eine Tabellenzeile. Wir wissen, dass dies unsere erste Tabellenzeile sein wird. Zweite Reihe, dritte Reihe. Und alles, was ich tue, ist, diesen Herbst zu vermasseln, das zu rauben. Ich mache es ein bisschen einfacher, damit zu arbeiten. Und jetzt brauche ich, weil ich drei Reihen und drei Spalten habe und lass uns voran gehen und TD 12 erstellen. Und alles, was ich hier tue, um die ganze Zeile zu kopieren, ist Befehl C , Befehl V oder Kontrolle C, Kontrolle V. Und ich werde all das auswählen, kopieren, einfügen und dort einfügen. Sehen wir uns an, wie unser Tisch jetzt aussieht. Wir haben Reihe eins, Reihe zu Reihe drei. Sind eigentlich, das sind Spalten. Ich habe das rückwärts bekommen. Also in Spalte eins, Spalte zwei, Spalte drei, Zeile eins, Zeile zwei, Zeile drei. Jetzt gibt es eine Möglichkeit, Zellen zusammen zu verschmelzen. Und wir können das tatsächlich auf eine sehr interessante Art und Weise tun. Wir können Colspan machen. So Spalte Spanne ist gleich drei. Also müssen wir einen Blick hier werfen. Wie viele Spalten haben wir? 123. Wir können drei Säulen ausgeben. Lass uns das speichern und sehen, was passiert. Diese Nummer eins in Zeile 1 nimmt drei Leerzeichen ein, aber jetzt sind hier noch zwei Zellen drin. Nun, wenn Sie jemals so etwas sehen, können Sie diese zusätzlichen Zellen sicher löschen, weil sie nicht benötigt werden. Wir sagten, colspan von drei, also nehmen Sie drei Spaltenbreiten. Und dann hatten wir auch ein altes HTML drin und wir haben das einfach loswerden. Wenn wir unsere Seite aktualisieren, werden wir sehen, dass Rho eins drei Spalten einnimmt. Jetzt. Jetzt gehen wir weiter und verschmelzen diesen und diese beiden zusammen. Lass uns das nicht tun. Lasst uns diese zwei und diese drei machen. Also müssen wir runter in Reihe zwei gehen. Also haben wir hier eine Reihe. Lasst uns Zeile zwei machen. Und wir wollen diese beiden miteinander verschmelzen. Wir können also sagen, colspan ist gleich zwei weil wir wollen, dass dies alle Nummer zwei und Nummer drei aufnimmt. Gehen wir weiter und speichern Sie diese Aktualisierung. Und jetzt nimmt es auch diesen zusätzlichen Abstand ein. Jetzt gehen wir weiter und verschmelzen diese. Also Zeile, um eine und Zeile drei Zelle eins zu verkaufen. Gehen wir weiter und verschmelzen sie zusammen. So können wir tatsächlich schreiben, wir können Teile von Zeilen zusammen auch zusammenführen. Also hier drin, weil wir nach unten verschmelzen wollen, machen wir eine Reihe Spanne zwei. Und mal sehen, wie das aussieht. Wenn ich das nicht anpasse, sehen Sie eine verdrängte andere Zelle, die nicht das ist, was wir wollen. Also haben wir noch 123 und Reihe drei und das wollen wir nicht. Lass uns voran gehen und einfach das Rho löschen, weil wir hier einen haben und einen hier haben. Wir brauchen sie nicht beide. Lasst uns einfach diesen löschen. Also löschen, speichern, gehen Sie zurück zu unserem Browser und aktualisieren und schauen Sie sich das an. Wir haben also drei Spaltenbreiten. In unserer ersten Reihe. Hier drüben haben wir zwei Säulenbreiten. Hier drin haben wir zwei Reihenhöhen. Und wir tun das mit diesen Attributen namens rowspan und colspan oder column span. Das wird wirklich wichtig für Ihre endgültigen Projekte sein. Und was ich möchte, dass du das tust, ist, das zu tun, was ich getan habe. Erstellen Sie eine Tabelle mit drei mal drei. Und dann beginnen Sie, Zeilen und Zellen zusammenzuführen und zu sehen, wie es Zellen verdrängt , und versuchen Sie dann, die richtigen Zellen zu löschen und es einfach so zu funktionieren, wie Sie es wollen. Geh weiter und gib dem eine Chance. Wenn Sie stecken bleiben, vergessen Sie nicht, Sie können immer Fragen unten oder in der Facebook-Gruppe namens Lernen zu Code stellen. Es gibt mehr als 56.000 Mitglieder. Wir können Ihnen innerhalb von wenigen Minuten nach dem Posten einer Frage helfen. Geh weiter und gib das eine Chance und ich sehe dich in der nächsten Lektion. 9. Tisch- und Zellbreiten: Ok, willkommen zurück. Werfen wir einen Blick auf Tabellenbreiten und Zellenbreiten. Also werde ich die Tabelle aus der letzten Lektion löschen und eine neue erstellen. Und lassen Sie uns dies einen Rahmen von einem geben, und lassen Sie uns einfach einige Standardinhalte in hier erstellen wir eine Tabellenzeile, Tabellenzelle, Zelle hier drin, Standardtabelle. sollten wir mittlerweile etwas vertraut sein. Also, wenn ich zu meinem Browser gehe und das ist vom letzten Video, wenn ich nur aktualisiere, muss ich hier verkaufen. Es nimmt nicht viel Platz ein, vielleicht einen, es nimmt 50% des Platzes auf dieser Seite ein. Und wenn ich verkleinere, können Sie tatsächlich sehen, dass es super, super winzig ist. Und was ich tun kann, ist, dass die Breite gleich 50% ist. Bisher habe ich gesagt, mit ist gleich einem 100% und es nimmt all diese Breite durch hier. Aber jetzt sage ich eigentlich nur 50%. Und ich kann hier in den Responsive-Modus gehen. Und ich kann das sehen, wenn meine Seite kleiner wird , auch diese Tabelle. Nun, das ist eigentlich super, super schwer zu sehen, weil das super, super winzig ist. Aber es wird immer kleiner und kleiner. So ist es die Beibehaltung dieser 50% Breite. Und alles, was er tat, war auf dieses kleine Symbol in Google Chrome klicken und das schickt mich in den Responsive-Modus. So können Sie sehen, wie die Dinge auf Tablets, auf Mobilgeräten, solchen Dingen aussehen werden. Jetzt werde ich hier wieder reinzoomen. Und lassen Sie uns dies zurück zu 100% ändern, weil ich mehr Breite verwenden möchte. So kann ich mehr Immobilien nur für Demonstrationszwecke im Video aufnehmen, es sieht einfach ein bisschen besser aus. Du musst nicht genau dem folgen, was ich tue. Also werde ich hier eine zweite Reihe hinzufügen. Und sagen wir, ich hatte hier einen Verkauf und ich wollte nicht, dass es genau 50% des Tisches einnimmt. Also, was unser Browser hier tut, ist zu sagen, hey, es gibt eine Tabelle, es ist 100% Breite. Es gibt zwei Zellen, 100 geteilt durch zwei ist jede 50%. Das ist alles, was es hier tut. Nehmen wir an, ich wollte, dass der erste kleiner wird. Wir könnten hier drin sagen, Breite ist gleich, und geben wir ihm 20% hier drin. Bevor ich Ihnen zeige, wie das aussieht, möchte ich auch erwähnen, dass Sie das Prozentzeichen loswerden können und das auch in Pixeln tun können. Jetzt ist das ein bisschen schwieriger. Es ist etwas hartcodierter. Nicht immer, was Sie wollen Prozent ist in der Regel, wonach die Leute suchen. Aber man könnte auch anstelle einer Breite von 100% sagen, weil eine Breite von 500 Pixel. Aber ich werde vorerst bei Prozent bleiben. Ich speichere das, aktualisiere meine Seite. Und Sie können sehen, dass die Zelle tatsächlich kleiner geworden ist. Jetzt denkst du wahrscheinlich, was nützt das? Aber wenn ich das mache, kann ich hier eine neue Tabellenzeile und eine neue Zelle machen. Und ich kann colspan von gleich, es soll gleich zwei sein. Es ist also, als gäbe es zwei von ihnen, aber es wird zusammengeführt werden. Willkommen auf meiner Website. Und in diesem, dem, wo die Breite nur 20% beträgt, könnten wir so etwas wie H3 sagen. Lasst uns das auf neue Zeilen setzen, damit wir es lesen können. H3 Navigation. Und hier drin könnten wir H3-Inhalte machen. Lassen Sie uns voran und aktualisieren Sie dies und wir können sehen willkommen auf meiner Website. Das ist wie der Titel meiner Seite. Wir haben Navigation, damit wir dort eine Liste von Links erstellen können. Und wir haben ein paar Inhalte hier reingebracht. Also jetzt arbeiten wir an einem tatsächlichen Layout. Nun möchte ich, dass Sie eine Tabelle erstellen, und mit nur einer bestimmten Zelle möchte ich, dass Sie genau sagen, wie breit sie sein sollte, geben Sie ihm eine Breite. Und als Zusammenfassung, alles, was wir dort getan haben, war das Width-Attribut entweder der Tabelle oder der Zelle hinzuzufügen. In meinem Fall habe ich beides getan. So ist die Tabelle eine 100% Breite. Und dann sagte ich, die Zelle sollte 20% dieser Tabellenbreite sein. 10. Table: Okay, werfen wir einen Blick auf Tabellenkopfzeilen. Jetzt ist dieser eigentlich super einfach, weil wir die TD-Elemente für Tabellendatenzelle verwendet haben. Lassen Sie uns voran und verwenden Sie einen Tabellenkopf. Und alles, was wir hier tun, ist T h. und ich werde das in eine HTML-Datei ändern. Th stellt eine Header-Zelle in einer Tabelle dar. Und lasst uns weitermachen und auch das schließende Tag ändern. Und Sie werden von der letzten Lektion bis zu dieser Lektion sehen, wie es früher aussah, und so wird es aussehen, sobald ich Aktualisieren anklicke. Es ist jetzt zentriert und fett. Das ist ein Tabellenkopf. Und das ist wirklich alles, was es gibt, um einen Tabellenkopf hinzuzufügen funktioniert genau wie eine Tabellen-Datenzelle. Der einzige Unterschied ist anstelle von TED, wir sagten th, das war's. Als Nächstes kurz. Wenn du denkst, dass du das hast, lass uns zur nächsten Lektion gehen und ich treffe dich dort drüben. 11. Inline-CSS: Okey-Dokey, willkommen zurück. Werfen wir einen Blick auf Inline-CSS jetzt haben wir dies tatsächlich bereits in der ersten Lektion behandelt , wo wir sagten, Stil ist gleich Text-Dekoration zugrunde liegt. Wir können das auf so ziemlich jedem einzelnen Element im Körper unserer Seite tun. Und mit Körper meine ich das Körperelement. Also jedes Element hier, können wir dieses Stilattribut auch hinzufügen. Also lassen Sie uns voran und erstellen Sie ein div. Und hier geben wir ihm ein Stilattribut, und lassen Sie uns ein paar Dinge ändern. Und ich werde dir nur einen kleinen Einblick in CSS geben. Lassen Sie uns also eine Polsterung von etwa 40 Pixeln geben. Geben wir ihm eine Schriftfarbe von Weiß und eine Hintergrundfarbe von, sagen wir, schwarz. So können wir es schön auf dem Bildschirm lesen. Und hier kann ich sagen, untere Registerkarte. Und das ist alles, was ich tun werde. So können Sie tatsächlich die Syntax hier sehen. Und an diesem Punkt muss ich Ihnen diese Syntax wahrscheinlich nicht mehr erklären, aber nur für eine gute Hauswirtschaft, lassen Sie uns es trotzdem durchgehen. Also habe ich ein Div geschaffen, Raum. Stil ist das Attribut gleich und dann habe ich alles zwischen Anführungszeichen. Dann habe ich hier eine CSS-Deklaration. Das Ganze ist also eine Deklaration. Sie müssen sich übrigens nicht an den CSS-Teil erinnern. Aber das ist eine CSS-Deklaration, sagte, fügen Sie Füllungen 40 Pixel oben, rechts, unten und links hinzu. Ändern Sie die Schriftfarbe in Weiß, Hintergrundfarbe in Schwarz. Und zwischen jeder dieser Deklarationen, wie diese, haben wir ein Semikolon, also ist es ein wenig anders als HTML, aber immer noch sehr, sehr lesbar. Und diese ganze Sache hier nennt man Inline-CSS. Also gehen wir zurück zu unserer Seite und ich werde aktualisieren und schauen , dass mit nur ein wenig Aufwand und nur eine winzige Menge CSS wissen, konnten wir hier eine Polsterung erstellen. Wir haben also Abstände hier, hier drüben, hier und hier drüben. Wir ändern die Hintergrundfarbe in Schwarz und die Schriftfarbe in Weiß. Wir können auch mit der rechten Maustaste Inspect. Und wenn ich auf dieses bestimmte Element klicke, können wir diese ein- und ausschalten. Das ist es, was Polsterung tut. Wir können diese Polsterung ändern, um höher oder niedriger zu sein, wenn wir wollten was wir hier tun. Und alles, was ich getan habe, war, dort zu klicken und ich habe den Pfeil nach oben oder nach unten gedrückt. Sie können auch eingeben, wenn Sie möchten. Wenn du es wolltest, könntest du in diesem kleinen Fenster hier ganz nach unten scrollen und du kannst sehen, dass es dir sofort sagt, dass es auf allen vier Seiten eine Polsterung von 40 gibt. Und das ist in der Zeile CSS, das ist wirklich alles, was es gibt. Und wir können all unsere CSS dort schreiben. Nun, das ist eigentlich kein sehr guter Weg, es zu tun. Aber gelegentlich werden Sie sehen, dass das tatsächlich erforderlich sein wird. Und das ist nur etwas, das Sie sehr bewusst sein sollten. Nun, dieses CSS wieder, zu diesem Zeitpunkt, nicht das Gefühl, dass Sie dies wissen müssen. Nachdem Sie HTML2, O1, dieser Kurs, auf jeden Fall fühlen Sie sich frei, CSS abholen. Ich habe einen Kurs auf CSS genannt die CSS-Meisterklasse. Es ist ein riesiger, riesiger Kurs, der alles durchläuft, was man sich vorstellen kann. Aber im Moment konzentrieren wir uns einfach auf HTML. Wenn du nun folgen willst und genau das tun willst, was ich getan habe, mach weiter und pausiere das Video und gib uns eine Polsterung. Denken Sie daran, es geht alles, was wir versuchen, Doppelpunkt Raum und dann einen Wert und dann ein Semikolon zu ändern . Und dann, was wir versuchen zu ändern, wie die Farbe Doppelpunkt Raum, und dann den Wert, und dann ein Semikolon. Und so haben wir so drei in einer Reihe gesetzt. Also fühlen Sie sich frei, dass eine Chance zu geben oder nicht. Und wenn du fertig bist, wenn du dich wohlfühlst, wenn du bereit bist. Lasst uns zur nächsten Lektion gehen. 12. HTML: In Ordnung, wenn wir mehr und mehr in HTML eintauchen, werden wir enden, wir werden ein wenig mehr in CSS übergehen. Und in dieser Lektion möchte ich Ihnen genau zeigen, wie wir das sofort machen können. In der letzten Lektion haben wir uns die Polsterfarbe und den weißen Hintergrund, die weiße Farbe und die Hintergrundfarbe von Schwarz angesehen . Nehmen wir an, wir wollten das zu einem anderen div hinzufügen. Und so könnten wir hier ein anderes div schreiben, und wir können das mit etwas Lorem Ipsum füllen. Und dann müssten wir das so kopieren und einfügen, was keine große Sache ist, aber wenn wir das 20 oder 30 Mal haben und dann müssen wir alle eine Änderung vornehmen. Nehmen wir an, wir mussten Weiß zu Blau wechseln und hier Weiß in Blau wechseln. müssen wir 20 Mal machen. Und das wird wirklich gut aus Mangel an einem besseren Begriff, weil wirklich irritierend. Und es dauert viel zu lange und es gibt einen besseren Weg, um dein Leben zu leben. Also werde ich zuerst ein anderes div hier erstellen. Und das könnten genauso leicht Absätze sein. Und lass uns voran gehen und sehen, was wir auf unserer Seite haben. Ich habe ein Lorem ipsum. Ein Lorem ipsum in Lorem ipsum. Also haben wir 123. Und sagen wir, ich wollte dieses Styling auf dieses dritte anwenden, aber nicht auf das zweite. Was wir tun könnten, ist, dass wir dieses Style-Attribut tatsächlich in ein Style-Element ziehen könnten. Jetzt ist es zufällig, dass sie dasselbe genannt werden. Sie können nicht unbedingt einen Attributnamen herausziehen und ihn in ein Element verwandeln und nur hoffen, dass es funktioniert. Aber in diesem Fall können wir, also ist es nur Zufall da. Also, was ich tun werde, ist, dass ich all das gelöscht auswählen werde, komm her, füge das in meinem Stil ein. Und so wird das nichts tun, aber was ich hier sehe, ist Wiederverwendbarkeit. Also habe ich dieses div und ich habe dieses div. Und ich wollte in der Lage sein, diese drei Attribute, diese drei CSS-Attribute, beiden zu geben . Und wir können dies mit einer CSS-Klasse tun, und wir können hier Klassenname sagen. Und wähle diese drei aus, ziehe sie wieder nach oben und lege sie da rein. Und so sieht diese Syntax ein wenig seltsam aus. Wir werden hier nicht zu viel Zeit verbringen. Aber die Klasse beginnt mit einem Punkt. Dann der Name. Es gibt keine Räume oder irgendetwas drin. Es werden geschweifte Klammern zwischen Groß- und Kleinschreibung unterschieden. Und dann das Zeug, das wir in unserem Style-Attribut setzen, dass wir es jetzt in ein Style-Element einfügen. Und was wir hier tun können, ist, dass ich das kopieren werde, aber in erster Linie möchte ich Ihnen zeigen, dass, wenn ich die Seite aktualisiere, nichts passiert. Meine Konsole bricht nicht, sie beschwert sich nicht. Ich habe nur drei divs mit Lorem ipsum darin. Und was ich hier tun möchte, ist zu sagen, in dieser ersten Klasse ist gleich dem Klassennamen hier. Und Sie können sehen, dass VS Code versucht, das für mich automatisch zu füllen. Und ich könnte auch Klasse ist gleich Klassenname hier. Und so anstelle des Schreibstils ist gleich Polsterungen, 40 Pixel, Farbe ist weiß, Hintergrundfarbe ist schwarz. Anstatt das zweimal zu schreiben, haben wir es einmal geschrieben, sieht ein wenig anders aus. Und wir sagten, Klassen gleich ClassName. Hören Sie Klassen gleich ClassName hier. Wenn ich nun meine Seite aktualisiere, speichere ich diese und aktualisiere die Seite. Sie werden sehen, dass es das Styling für mich auf beide Abschnitte anwendet. Nun, vorsichtig mit Tippfehlern hier, weil ich hier Groß- und Kleinbuchstaben verwende. Aber wenn du es nicht richtig machst. Und ich habe das absichtlich betitelt, es wird nicht auftauchen, aber deine Konsole wird sich auch nicht beschweren. Also müssen Sie ein Auge darauf haben, stellen Sie sicher, dass Sie Dinge richtig tippen. Wenn das bedeutet, dass Sie langsamer eingeben, bedeutet das, dass Sie langsamer eingeben. Das ist okay. Jetzt ist die andere Sache mit Klassen, dass wir mehrere Klassen hinzufügen können. Also könnten wir hier eine andere Klasse hinzufügen, es Großbuchstaben nennen, und wir könnten Text Großbuchstaben umwandeln. Nun, ich kenne diese bereits, weil ich viel CSS in meinem Alltag schreibe. Aber VS Code ist auch hier ziemlich hilfreich. Sobald ich Text eingegeben habe, können Sie sehen, ist versucht, mir alle möglichen verschiedenen Optionen hier zu geben. Es gibt viel zu CSS. Auch hier müssen Sie sich nicht alles auswendig lernen, wenn Sie nicht wirklich wollen. Sie können immer nur herausfinden, wie Google ist, solange Sie herausfinden können, wie Sie die Antwort erhalten, das ist, was wichtig ist. Aber die Brille zurückgehen. Also habe ich hier eine zweite Klasse. Auch hier beginnt die Klasse mit einem Punkt. Das ist es, was das bedeutet. Es ist so, als würde man sagen, dass Punkt gleich ist oder hier oben ist, es ist so, als würde man sagen, dass Klasse gleich ist. Wir verwenden nur dot als eine Kurzschrift Methode. Und dann machen wir einen dieser Großbuchstaben und wir können Großbuchstaben zum zweiten hinzufügen. Jetzt müssen wir ein Leerzeichen hinzufügen. Und hier, wenn Sie kein Leerzeichen hinzufügen, sieht einfach so aus. Und Ihr Browser wird denken, dass der Klassenname hier class_name heißt, Großbuchstaben. Wie alle ein Wort, es ist nicht sein Klassenname hier, Leerzeichen und dann auch Großbuchstaben. Und wir können mehr und mehr hinzufügen, wenn wir wollten, solange sie tatsächlich etwas tun. Also habe ich hier ClassName, Leerzeichen, Großbuchstaben. Und wenn ich das aktualisiere, sollten wir sehen, dass dies dasselbe Styling erbt, aber auch ganz Großbuchstaben sein sollte. Und sieh dir das an. Es ist, als würde es mich anschreien. Und das ist alles, was es zu wirklich Klassen in HTML gibt. Eine Klasse ist ein wiederverwendbarer Code. Es hat diesen kleinen Punkt hier, der als Klasse sagt, es hat diese Art von Syntax. Auch hier müssen Sie diesen Teil zu diesem Zeitpunkt nicht kennen. Bitte konzentrieren Sie sich auf das HTML. Html, auf das wir uns konzentrieren möchten, ist das Attribut Klasse genannt. Und wie es funktioniert, können wir einen Klassennamen, Leerzeichen, zweiter Klasse Namen, Leerzeichen, dritten Klassennamen, so weiter und so weiter und so weiter. 13. HTML: Ok, willkommen zurück. Wir haben noch eine Sache zu decken, wenn es um CSS geht, und es ist diese Idee einer ID. Und wir haben das tatsächlich getan, als wir interne Links erstellt haben. So können wir einen Link erstellen, der nach unten geht oder wie diesen, ein Link, der zurück zum Anfang der Seite geht. Aber wir verwenden dieses ID-Attribut hier, und wir können Dinge auch basierend auf einer Idee stylen. Also haben wir in der letzten Lektion einen Blick auf die Klassen genommen. Klassen verwenden einen Punkt. Aber wenn ich hier nach unten scrolle, kannst du diese ID sehen, als ob ich hier wieder nach oben verlinke und tue, tun, tun, tun, tun, tun, tun, tun. Id ist gleich oben. Aber hier unten verlinke ich immer noch mit einem Nummernzeichen, Nummer, Schild oben. Und das bringt mich wieder zum Ausweis. Nun, was das heißt, ist im Grunde Nummernzeichen ist gleich oben. Id ist gleich oben. Es ist das Gleiche. Wenn wir also innerhalb unseres Style-Attributs hier nach unten scrollen, können wir eine ID testing-ID erstellen. Und hier, und Sie werden sehen, dass es mit einem Nummernzeichen beginnt, keine Leerzeichen, keine Sonderzeichen. Es ist nur regelmäßige SMS hier. Versuchen Sie also nicht, mit Ihren Klassennamen oder Ihren ID-Namen zu schick zu werden. Und hier könnten wir so etwas wie Grenze machen, fünf Pixel, solides Rot. Lassen Sie uns das tatsächlich viel widerlicher machen und 15 Pixel solide rot machen. Jetzt, sofort, wird dies nichts tun, weil wir diese spezielle Test-ID nirgendwo angewendet haben . Gehen wir weiter und fügen Sie es zu diesem mittleren hinzu. Also haben wir drei Divs hier. Wir haben hier ein Top-div mit Klassennamen, unten div mit Klassennamen hier und Großbuchstaben. Und in der Mitte haben wir ID ist gleich. Und ich werde die Test-ID nach oben scrollen und Sie können sehen, dass diese beide genau hier übereinstimmen. Nun ist die Sache mit IDs ist, dass sie 100% eindeutig sein sollen. Keine Browser respektieren das nicht immer, aber JavaScript wird immer auf ein Problem stoßen, wenn Sie zwei IDs haben, die identisch sind. Sie müssen also nicht wirklich wissen, was das zu diesem Zeitpunkt bedeutet. Aber was Sie wissen müssen, ist ein Ausweis ist genau wie Ihr Führerschein. Es sollte immer nur eine Kopie davon geben. Es sollte immer nur eine Version davon geben. Das ist dein Ausweis. Also gehen wir zurück zu unserem Browser hier. Und wenn ich auf „Refresh“ klicke, sehen wir hier einen roten Rand von 15 Pixeln. Genau wie dieser super widerlich. So wie Klassen können wir Dinge nach IDs auswählen und dann Styling hinzufügen. Und das ist, woher dieses ID-Attribut kommt. Jetzt gibt es hier nichts zu tun. Keine Sorge, Sie müssen nicht wirklich wissen all das jetzt werden Sie Tonnen Erfahrung mit diesem in CSS und JavaScript bekommen , wenn Sie gehen und diese Dinge lernen. Aber für jetzt wieder, lassen Sie uns einfach weiter auf HTML konzentrieren. Es ist nur gut zu wissen, dass es ein Klassenattribut und ein ID-Attribut gibt, und so funktioniert es. Oh, und noch eine letzte Sache. Sie fügen hier nicht mehrere IDs hinzu. So wie wir hier Klassennamen haben, und dann ein Leerzeichen und dann Großbuchstaben. Und das ist das Auswählen dieses Zeugs und dieses Zeug mit einer ID. Wir machen das nicht mit einem Ausweis. Wir sagen nur, es gibt eine einzige Sache hier drin. Also testen wir die ID nicht. Und noch ein und ein anderer. Das machen wir nicht. Wir sagen nur, es gibt einen. Also lassen Sie das ein paar Minuten eintauchen. Fühlen Sie sich frei, mich über und die nächste Lektion zu treffen, und wir werden zurück zu HTML. 14. Code-Formatierung: Ok, willkommen zurück. Werfen wir einen Blick auf ein paar verschiedene Möglichkeiten, Code zu formatieren, Code formatieren oder Code zu formatieren. Der erste Weg ist dieses Pre-Tag p e. Und wenn wir einfach über so lange bewegen, wird MD n uns sagen, dass das Pre-Tag ein Pre-Element ist, das einen Block von vorformatiertem Text darstellt , in dem Struktur durch eine Art von Alibaba dargestellt wird die erste, das Wichtigste hier ist, dass, wenn vorformatierten Text darstellt, einige Sachen hier. Und lass uns voran gehen und schauen wir uns einfach an, wie das zuerst aussieht. Also, das ist hier ganz unten. Und sieh dir das an. Eigentlich hat es etwas Seltsames gemacht. Es fügte eine Reihe von Leerzeichen hinzu. Also in HTML 101, wenn Sie sich erinnern, habe ich darüber gepredigt. Html oder nicht HTML, aber Ihr Browser kümmert sich nicht um Leerzeichen. Es gibt jedoch ein paar Fälle, in denen dies der Fall ist. Pre ist einer dieser Fälle. So ist das Pre-Tag sehr weiß empfindlich. Und was, wenn wir hier eine zweite Zeile machen, die zweite Zeile hier. Jetzt in regulärem HTML müssen wir eine BAR oder eine Art Blockelement hinzufügen, um auf eine neue Zeile wie diese zu gelangen. Aber das müssen wir eigentlich nicht tun, sowieso nicht in einem Pre-Tag. Und ein Pre-Tag. Sieh dir an, dass das perfekt auftaucht. Nun ist die Sache zu beachten, dass das Pre-Tag sich um Leerraum kümmert. Also lassen Sie uns voran und fügen Sie hier eine Reihe von Leerzeichen hinzu. Mach das wie wirklich schrecklich. Es ordnet auch unseren Text nebenbei, so dass es nicht wirklich wichtig ist, was unsere Standardschriftart ist, weil unser Texteditor versuchen wird, sicherzustellen , dass jede Schriftart mono ist oder jeder Buchstabe monospaced ist, so dass h die gleiche Breite wie E, da die gleiche Breite wie unsere ist die gleiche Breite wie e ist die gleiche Breite wie die Augen. Die gleiche Art und Weise, wie Zed sagt, wo das M, ja, Sie den Punkt bekommen. Im Vor-Tag. Es wird genau das Gleiche tun. Wenn man sich hier anschaut, ist r nicht so breit wie der EFF. Während hier die SOM entweder alle die gleiche Breite, sogar die Leerzeichen haben die gleiche Breite. Das nennt man Mano-Abstand. Das ist also eine Möglichkeit, Ihren Code zu formatieren. Eine andere Möglichkeit, Ihren Code zu formatieren, ist, wenn wir etwas inline machen wollten , weil PRE als Blockelement, könnten wir sagen, fügen wir einige Lorem-Text hier, Code Schrägstrich Code. Und das wird in der Schlange für uns sein. Und das wird es ein wenig mehr Code wie folgt aussehen lassen. Und sieh dir das an. Es dauerte tatsächlich lorem ipsum dolor Sitz, Sitz, sitzen. Ich weiß es nicht. Und es hat es viel so formatiert. Ist es jetzt Leerzeichen empfindlich? Lasst uns erkunden. Lassen Sie uns eine Reihe von Leerzeichen zwischen lorem ipsum hinzufügen. Dieser ist nicht Whitespace-empfindlich. Siehst du dir das an? Aber pre ist Whitespace-empfindlich. Das ist also eine gute Unterscheidung, die man im Hinterkopf behalten muss. Also werde ich das einfach rückgängig machen, weil das nicht nötig ist. Und das sind zwei Möglichkeiten, wie Sie Ihren Code formatieren können. So können Sie einen Code wie diesen schreiben. Es wird immer noch versuchen, HTML darin zu rendern. Vergiss das nicht. Sie werden immer noch HTML-Entitäten benötigen. Das ist eine Sache, über die wir in Zukunft reden werden. Aber Sie können Ihren Code immer noch so formatieren oder so. Block-Element, Inline-Element, hübsches Code-Element. 15. HTML-Entitäten: Okay, lassen Sie uns einen Blick auf HTML-Entitäten werfen. In der letzten Lektion haben wir uns die Vor- und Code-Elemente angesehen. Und sagen wir, ich wollte hier etwas wie B reinbringen Das ist mutig. Und sagen wir, ich wollte das eigentlich zeigen. Ich wollte nicht unbedingt nur sagen, dass dies fett ist. Ich wollte dieses Tag tatsächlich zeigen. Jetzt werden wir auf ein Problem stoßen, wenn ich auf „Aktualisieren“ klicke. Es, nur fett meinen Text. Es rendert immer noch reguläres HTML, und das ist nicht das, was wir wollen. Wir wollen tatsächlich, dass dieses Tag angezeigt wird. Jetzt haben wir diese Dinge, die HTML-Elemente genannt werden. Und ein HTML-Element beginnt mit einem kaufmännischen Und-Zeichen oder dem Ende und endet mit einem Semikolon. Und es sind wirklich nur Verknüpfungen, um weniger als, größer als das Urheberrecht, Dinge wie diese zu zeigen . Und jetzt gibt es so viele von ihnen, ich sie nicht alle abdecken kann. Und du wirst ein wenig googeln müssen. Aber wir können weniger tun als, was dieses Symbol hier ist, B. Und dann können wir kaufmännisches Und-Zeichen größer als g t. Und das sieht wirklich, wirklich seltsam aus, aber was das tun wird, ist, es in das zu verwandeln. Und dieser wird es in das verwandeln. Aber nur, während wir es zeigen. Also lassen Sie uns voran und aktualisieren Sie Ihre Seite. Und wir können sehen, dass das jetzt tatsächlich auftaucht. Gehen wir weiter und kopieren die ganze Sache in unser schließendes Körper-Tag. Und fügen wir hier einen Schrägstrich hinzu. Sieh dir das an. Unser Text ist also nicht mehr fett und er zeigt uns die HTML-Tags. Jetzt können wir dasselbe tun, genau das gleiche innerhalb unserer Code-Elemente, die wir in unserer letzten Klasse oder letzten Lektion verwenden. Dasselbe, und wir müssen es nicht innerhalb des Code-Elements tun. Wir könnten es wirklich überall machen. Es spielt keine Rolle. Sie werden hier unten sehen, es sagt B, das ist fett, so dass das ein HTML-Element oder eine Entität ist. Und eine Entität, alles, was es ist, nimmt eine Art Art und Weise regelmäßig den Code zu lesen, den Sie Browser sind. Wir haben versucht, es so zu interpretieren und zu zeigen, wie Sie es auf menschenlesbare Weise zeigen wollen. Nun ein wirklich gutes Beispiel ist, wenn wir wie eine Fußzeile zu unserer Seite hier hinzufügen würden. Sagen wir mal, das ist unsere Fußzeile. Wir könnten so etwas wie sagen und kopieren. Und dann könnten wir das Jahr hier reinlegen, damit wir das Jahr 2022 machen können, wenn das das Jahr ist. Scrollen Sie nach unten und da ist es, ein Copyright. Jetzt nur für die Gelder, werde ich hier in Extras werfen. Wir können für super tun, und das macht es wieder aus. Also bringt es es ein wenig auf, anstatt zentriert zu sein. Und wir können auch SUB, SUB für tiefgestellt, hochgestellt und tiefgestellt tun . Und das bringt es runter. Also werde ich das rückgängig machen, wenn Sie gerne mit denen spielen, aber sie sind nicht wirklich notwendig. Nur durchdacht, werfen Sie sie zum Spaß da rein , weil sie irgendwie an den Linien des Urheberrechts arbeiten. Copyright ist normalerweise so klein, siehe, oben in der Zeile würden Sie dafür hochgestellt verwenden. 16. Einführung in Formen: Okay, lassen Sie uns schnell über Formulare reden Real. Formulare. Jetzt werden wir ein wenig Zeit für Formulare verbringen, aber es wird nicht wirklich unglaublich nützlich für uns sein. Formulare sind, wie wir Daten an einen Server senden. Aber wir haben nicht wirklich einen Server, nur weil wir in HTML-Datei in Ihrem Browser geöffnet haben bedeutet nicht, dass es ein Server ist. Server läuft normalerweise eine Programmiersprache wie Python oder PHP, Java, C, einige andere richtige Formatierung, richtige Programmiersprache verwenden wir keine Programmiersprache. Html ist keine Programmiersprache, es ist eine Skriptsprache. Und so haben wir keinen Server, wir brauchen nicht den Server, um ihn zu betreiben. Allerdings sind Formulare wichtig für das Erstellen von Kontaktformularen, Aktualisieren von Formularen, Anmeldeformularen, vergessen Sie Ihre Passwortformulare, Dinge wie diese. Jetzt sieht die Form typischerweise so aus. Sie haben das Formularelement. Sie haben eine Art von Methode. Und Sie können tatsächlich sehen, dass es hier vorschlägt, gut drei, aber wirklich werden Sie GET oder Post zum größten Teil verwenden. Ich, lasst uns voran gehen und Get benutzen. Und die Aktion wird zu einem Seiten-Punkt-HTML gehen. Jetzt, wie ein Beispiel hier, lassen Sie uns voran und erstellen Sie eine Schaltfläche. Und der Typ wird Submit sein, und wir werden all das einzeln, auch einzeln abdecken. Senden Sie dieses Formular ab. Und wenn ich zurück zu meiner Seite gehe und aktualisiere und klicke auf Senden dieses Formular, schau dir an, was es mit meiner URL tut. Es geht zu einem Seiten-Punkt-HTML. Also hat es die Seite für uns geändert, was irgendwie cool ist. Und es würde versuchen, auch die Informationen aus dem Formular zu sammeln und sie in die URL zu legen, die nicht ideal für Passwörter, Kreditkarten oder solche Dinge ist, aber es ist eine gute Möglichkeit, mit Formularen zu arbeiten, wenn Sie gerade lernen. Werfen wir einen Blick darauf, was wir sonst noch mit einem Formular machen können. Und wieder, Sie müssen nicht mit diesem zu folgen, wird all dies auf eigene Faust abdecken. Also Eingabe, wir haben Eingaben bekommen und wir können einen Textbereich machen. Und ich habe einfach meinen VS-Code, meinen Editor automatisch ausfüllen lassen , damit es mir Dinge zeigen würde. Dies ist ein Eingabefeld. Es ist eine einzige Zeile, wie Ihre E-Mail oder Ihr Passwort oder so etwas. Und das ist ein Textbereich, wie du deine Adresse hinzufügst. Also lassen Sie uns voran und werfen einen Blick auf einige davon individuell. Was ich tun werde, ist das einfach zu löschen, weil es in der nächsten Lektion nicht nützlich sein wird. Obwohl wollte hier zu tun war Ihnen zeigen, hey, das ist, wie Formulare funktionieren. Und in der nächsten Lektion werden wir tatsächlich mit Formularen beginnen. 17. Eingangselemente: Ok, willkommen zurück. In der letzten Lektion haben wir einen Blick darauf geworfen, was ein Formular tut, eine Aktion. Wir wollen nicht, dass das irgendwohin geht. Lasst uns das einfach machen. Lassen Sie es uns auf die gleiche Seite gehen, auf der wir bereits sind. Also, wenn wir bestimmte Elemente haben, wie Eingabe, Textbereich oder Schaltfläche, oder es gibt eine tatsächlich ausgewählt wurden. Wir werden all das einzeln abdecken. Aber wenn wir diese haben, sollten diese alle in ein Formularelement eingewickelt werden. Jetzt ist dies eine Art von Mix and Match und tun, was Sie wollen. Es gibt nicht viele Regeln dafür. Wie in müssen Sie keine Eingabetextbereich-Schaltfläche haben, dann wählen Sie. Sie können diese in beliebiger Weise, Form oder Form kombinieren , die Sie mögen. Aber fangen wir mit der Eingabe an. So können wir Eingaben machen. Und ich werde nur Tab drücken. Und standardmäßig ist der Typ Text, also nur regulärer Text, aber es gibt viele verschiedene Typen. Es gibt eine Schaltfläche, die wie eine Schaltfläche aussehen würde, ein Kontrollkästchen farbigen Datetime, Datetime, lokale, Datum, E-Mail-Datei versteckt. Was schön ist, weil das man überhaupt nicht auftaucht, aber Sie können immer noch Informationen in einem Bild-Upload, Monat, Nummer, Passwort, Radio Research, solche Suche, einreichen, Handtuch, Textzeit, URL, Woche, so weiter und so weiter und so weiter und so weiter, bis eins und so weiter. Lassen Sie uns einfach mit einem arbeiten, um mit normalem Text zu beginnen. Das ist also unser Element. Dies ist unser Attribut, Typ ist das Attribut, und das ist unser Wert. Wir sagen, es ist ein Textfeld. Dann können wir es einen Standardwert geben und Hallo Welt sagen. Und wir können ihm auch einen Platzhalter geben. Platzhalter ist gleich Ihrem Namen eingeben. Lassen Sie uns voran gehen und schauen wir uns einfach an, wie das aussieht. Oh, nein, scrollen Sie nach unten. Vielen Dank. Das hat HelloWorld. Und wenn ich das lösche, löschen, löschen, löschen, löschen, löschen, löschen, löschen, löschen, löschen, löschen. Dieser letzte, der kleine Text im Hintergrund, der Platzhaltertext ist. Aber wenn ich die Seite standardmäßig aktualisiere, heißt es hallo Welt. Und das liegt an dem Wert, den ich ihm gegeben habe. Nun wäre ein weiteres Beispiel das Passwort. Gehen wir weiter und Sie können sehen, dass es in kleine Punkte verwandelt , die wir nicht wirklich sehen können, was es tut. Das ist also das Eingabefeld, das ist wirklich alles, was es dazu gibt. In der nächsten Lektion gehen wir weiter und schauen uns unser Textbereichsfeld an. 18. Textbereiche: Hallo und willkommen zurück. In der letzten Lektion haben wir ein Eingabefeld in diesem erstellt, lassen Sie uns fortfahren und einen Textbereich erstellen. Nun ist dieser hier ein bisschen anders. Sie werden feststellen, dass das Eingabefeld ein selbstschließendes Tag war. Das Formular war nicht, also wickelt es hier eine Reihe von Sachen ein, aber das Eingabefeld nimmt tatsächlich einen Wert in Form eines Attributs namens value an. Der Textbereich nicht. Wir können Namen und ID loswerden, weil wir nichts von dem machen. Wir haben auch ein bisschen Regelbrecher hier, wo wir sagen, hey, dieser benutzt nicht wirklich Wert. Das Attribut tut dies nicht. Dieser will eigentlich, dass wir unseren Text hier reinbringen. Und das ist interessant, denn wenn ich diese Seite aktualisieren, sagt Text hier. Aber was uns interessanter macht, ist dies einer der seltenen Fälle, in denen Leerzeichen wichtig sind. Weißer Raum spielt hier eine Rolle. Und der Grund, warum ich Ihnen das zeige, ist, weil ich in meiner ersten Zeile Text hier drin habe, aber dann in der zweiten Zeile habe ich 15 oder was bedeutet das 12 Leerzeichen vor dem Wort Leerzeichen. Lass uns voran gehen und sehen, was das tut. Wer sind Textbereich? Es macht es nicht sehr schön und gibt uns alle zusätzlichen Räume da drin. Wenn Sie also jemals auf so etwas stoßen, gehen Sie einfach weiter und werfen Sie das ganz links von Ihrem Dokument, Ihrer Seite, an der Sie arbeiten. Gehen wir weiter und erfrischen wir uns. Und das bringt es zurück nach links, und das ist unser Standardwert. Nun kann dies auch einen Platzhalter nehmen. Platzhalter ist gleich, wow, einem Platzhalter. Platzhalter. Okay, erfrischen Sie sich. Gehen Sie weiter und lassen Sie uns all das packen und Sie können sehen, dass ich auch extra White-Space drin habe. Lasst uns voran gehen und das aufräumen und all diese Delete packen. Und es steht, wow, gut Platzhalter. Jetzt haben wir auch Spalten und Zeilen wie eine Tabelle. Wir können sagen, die Spalten, sagen wir, statt 30, sagen wir, es wird 50 sein. Säulen gehen nach oben und unten. Das wird also 30 sein. Also 50 wird sein, ich werde vermuten, dass irgendwo hier ziemlich nah sind. Und dann haben wir Reihen, die rauf und runter gehen. Ein zehn Reihen hier können wir fünf Reihen sagen. Machen wir es nur ein wenig kürzer. Also hatten wir 12345 und danach wird die kleine Bildlaufleiste für uns auftauchen, 6789. Und Sie können die Bildlaufleiste hier sehen. Wir können auch die Größe ändern, was ziemlich nett ist. Der größte Unterschied zwischen einem Textbereich und einem Eingabefeld, da es Spalten und Zeilen hat, ist der Platzhalter genau gleich, aber der Wert geht tatsächlich zwischen dem öffnenden und schließenden HTML-Tag. Zu diesem Zeitpunkt möchte ich, dass Sie dies einen Schuss geben, eine Eingabe erstellen und dann einen Textbereich erstellen. Vergessen Sie nicht, wenn Sie stecken bleiben, können Sie unten eine Frage stellen. Oder alternativ können Sie der Lerngruppe Facebook-Code beitreten. Wir sind 56 Tausend Mitglieder können Yoga jederzeit helfen. 19. Knöpfe: Okay, schauen wir uns die Knöpfe an. Was ist an einem Knopf so wichtig? Nun, wenn wir hier zurück zu unserer Seite gehen, haben wir ein Passwort-Feld und wir haben hier einen Textbereich, aber wir haben tatsächlich keine Möglichkeit, dieses Formular zu senden. Es gibt keine Schaltfläche, um dieses Formular zu senden, und das ist, was eine Schaltfläche tut. Nun, Taste kann eines von drei Dingen tun. Also lassen Sie uns tun Schaltfläche ist gleich Taste und klicken Sie auf mich. Also das Wichtigste hier ist, dass wir Typ sagen, genau wie unsere Eingabe, Typ ist gleich Passwort, Tastentyp ist gleich Taste. Jetzt, wenn ich hier gehe und aktualisiere, klicke ich darauf, nichts passiert. Und das liegt daran, dass wir sagten, Typ ist gleich Taste. Dies ist größtenteils für JavaScript, wo JavaScript tatsächlich mit einem Klick auf eine Schaltfläche etwas tun kann. Für uns ist das völlig nutzlos. Als nächstes haben wir zurückgesetzt. Jetzt sieht das Zurücksetzen nicht so aus, als würde es etwas tun. Aber wenn ich voran gehe und das lösche und lösche das und mache eine Reihe von zufälligen Sachen in deinem tut, tut wie, als, als, als, als, als Daten. Und klicken Sie auf mich. Da dieser Wert auf Typ Ist gleich zurückgesetzt gesetzt ist. Es wird mein gesamtes Formular zurücksetzen. Dies wird also automatisch mit einem Standardwert gefüllt, und dies wird mit seinem Standardwert angezeigt. Genau so hat es das Formular für uns zurückgesetzt. So ziemlich cool, ehrlich gesagt nicht zu oft in diesen Tagen verwendet. Die, die Sie am häufigsten verwenden werden, ist einreichen. Und jetzt, wenn ich meine Seite aktualisiere und aktualisiere, klicke auf mich. Es hat tatsächlich meine Seite neu geladen. Und Sie können sehen, dass es zu index.html Fragezeichen ging. Und dann setzen Sie mich wieder auf den Grund. Nun, das Fragezeichen ist, weil wir eine Methode namens get verwenden. Und wenn diese Methode erhalten ist, was wir tun können, ist hier können wir sagen, Name ist gleich Passwort und der Textbereich, den wir sehen können, ist gleich, ich kenne die Adresse von jemandem nicht. Gehen wir zum Beispiel voran und aktualisieren Sie diese Seite. Und wenn ich dieses Formular noch einmal einreichen, können Sie sehen, dass das Passwort gleich hallo Welt ist. Das ist es, was hier drinnen auftaucht. Und die Adresse ist gleich dem Text hier drin. Eine neue Zeile, Leerzeichen spielt hier keine Rolle. Und so das setzen Sie es in oder URL. Nun, das ist eigentlich eine wirklich, wirklich schlechte Übung. Legen Sie keine Dinge wie Ihr Passwort, innere URL überhaupt. Das ist nicht wirklich etwas, mit dem Sie sich gerade beschäftigen müssen, aber ich werde es predigen, nur damit Sie mit der Art der Sicherheit vertraut sind. Wenn Sie jemals ein Passwort oder eine Kreditkarte oder eine Sozialversicherungsnummer eingeben, Sozialversicherungsnummer in Ihrer URL. Google kann diese URL nehmen und sie im Internet speichern und es wird nicht besser wissen. Es wird denken, dass es eine legitime Seite ist. Nicht nur Google, sondern auch als oder andere Suchmaschinen, Bots werden in der Lage sein, das Formular einzureichen und diese Informationen zu erhalten. Leute werden die Links mit ihrem Passwort in und Dinge wie diese teilen. Sie wollen einfach vermeiden, ein Passwort oder eine Kreditkartennummer, Sozialversicherungsnummern, Sozialversicherungsnummer, so etwas, alles,was privat ist, teilen Sozialversicherungsnummern, Sozialversicherungsnummer, so etwas, alles, zu können. Sie möchten niemals Ihre URL eingeben. Also nochmal, ich bekomme hier eine kleine Predigt über die Sicherheit, aber es ist wirklich gut zu wissen. Die Sache, die hier zu beachten ist, ist test1. Test2. Passwort ist gleich zwei Adressen zu testen, die gleich einem Test eins sind, genau wie wir gesagt haben. Und dieses Formular wird jetzt einreichen, weil wir Schaltflächen-Typ ist gleich zu senden. 20. Dropdown-Menüs: Okay, gehen wir weiter und schauen uns Dropdown-Optionen an. Jetzt ist dieser hier wirklich interessant. Ich mag diesen hier wirklich, aber bevor wir das tun, lassen Sie uns das nur eine Berührung aufräumen, denn unsere Form sieht ein bisschen eklig aus und es wird Ihnen zeigen, wie das vor und nach aussieht. Also werde ich ein paar Divs hinzufügen. Und hier, zu wissen, dass ein div ein Dummy-Element ist, tut absolut nichts, aber es ist ein Blockelement. Also wird es diese irgendwie auf ihre eigenen Linien setzen. Und lasst uns das auch tun. Und so sah unsere Form zunächst aus. Ich werde hier hineinzoomen. So sieht das Formular zunächst aus. Und wenn ich die Seite aktualisiere, ist das online in einer eigenen Zeile. Online. Das ist meiner Meinung nach ein bisschen besser. Lassen Sie uns voran und erstellen Sie hier ein weiteres div, nur damit wir ein ausgewähltes Element haben können. Und dieses selektierte Element ist ziemlich interessant. Also, was wir tun können, ist Namen. Wir können es einen Namen ausgewählt Unterstrich Option geben. Wir müssen ihm keinen Ausweis geben. Und das hier ist interessant, weil es ein wenig anders funktioniert als der Eingabe- und Textbereich. Was dies tut, ist es uns erlaubt, das Optionselement zu verwenden wo wir einen Wert und eine Textdarstellung dieses Wertes in hier setzen können. Also Wert eins, und wir können sagen, das ist Wert eins. Wir machen das Gleiche in der zweiten Zeile, Wert zwei und das ist Wert für, lasst uns voran gehen und sehen, wie das aussieht. Das ist jetzt ein kleiner Drop Down, und wir können das immer und immer wieder tun. Ich mache hier nur einen Haufen. Nicht wirklich gutes Beispiel, aber dennoch ein Beispiel. Und wir können eine von ihnen auswählen. Nun ist der Grund, warum wir einen Wert in Jahr plus die Textdarstellung dieses Wertes hinzufügen , weil, wenn ich Wert eins wähle, senden Sie dieses Formular. Sie können hier oben sehen. ausgewählte Option ist also gleich dem Wert eins, und dieser Wert eins stimmt hier überein. Wenn Sie also Ihr Formular senden, wird Ihre serverseitige Programmiersprache wie Python diesen Wert lesen, wird sagen, dass es Wert ist, den man nicht suchen wird, dass dies der Wert eins ist, es wird nur nach Wert eins suchen. Jetzt können wir auch Dinge deaktivieren und wir können auch Dinge vorausgewählt machen. Gehen wir also weiter und machen Sie hier eine neue Option, die standardmäßig deaktiviert ist. Optionswert wird nichts sein. Und sagen wir, dies ist deaktiviert als deaktiviert. Behindert, einfach so. Lassen Sie uns voran und werfen Sie dies vielleicht auf eine neue Zeile, nur damit es ein wenig lesbarer ist. Und lasst uns unsere Seite aktualisieren. Vergrößern Sie es wieder. Wir haben hier eine Option, die deaktiviert ist. Ich kann es nicht auswählen und ich kann den Wert eins oder zwei auswählen, aber nicht deaktiviert. Nun sagen wir, ich habe hier eine Option, dass ich immer standardmäßig ausgewählt werden möchte. Und sagen Sie „Standard“. Ausgewählt ist der Wert. Standardmäßig ausgewählt ist die Textdarstellung dieses Wertes. Und wir können sagen,, die gewählt ist gleich ausgewählt, standardmäßig ausgewählt. Und selbst wenn ich auf diese Seite und Lake zurückkomme, lösche all diese Sachen aus, als ob ich ein brandneuer Benutzer bin, scrolle ich zum Ende der Seite, standardmäßig ausgewählt, obwohl es eine dritte Option ist, es hat nicht ausgewählt value1 und value2 ist standardmäßig ausgewählt. Nun ist das letzte, was über diese Formularfelder zu wissen ist, dass Sie sie erforderlich machen können. Nehmen wir also an, erforderlich und erforderlich. Daher ist das Passwort in den Adressfeldern erforderlich. Lassen Sie uns fortfahren und diese Seite aktualisieren. Lassen Sie uns voran und löschen Sie dies und klicken Sie auf mich und sagt, füllen Sie bitte dieses Feld aus. Jetzt, wo das interessant wird, können wir sagen, dass das kein Passwort ist. Wir können sagen, dass dies eine E-Mail-Adresse ist. Lassen Sie uns die Seite aktualisieren. Und eigentlich muss ich diesen Typ in E-Mail ändern und sogar den Namen in E-Mail ändern. Der Standardwert ist also Hello World. Aber wenn ich dies anklicke, fügen Sie bitte eine Anzeige in die E-Mail-Adresse ein. Es weiß, dass es nach einer E-Mail-Adresse sucht. Hallo Welt auf something.com. Okay, also Validierung nach dieser ersten, es hat nicht die zweite bestanden. Ich soll dieses Feld hier ausfüllen. Sobald ich das ausgefüllt habe, wird es die Seite absenden oder das Formular für mich einreichen. Nun, das sind Formen auf den Punkt gebracht, Formen sind unglaublich wichtig. Sie sind auch ziemlich komplex. Also würde ich empfehlen, nur ein paar Minuten zu nehmen und damit herumzuspielen. Jetzt wird es nicht sofort auf Sie anwendbar sein bis Sie mit einer serverseitigen Programmiersprache arbeiten. Wieder, wie Node.js, Python , C, PHP, so etwas. Aber Sie können immer noch praktische Praxis verstehen, dass etwas erforderlich sein kann, dass es einen Namen hat, den er in die URL gehen könnte, wenn es eine GetMethod ist, dass der Typ E-Mail, Passwort, Text, Reset sein könnte. Dies könnte sogar technisch sogar BY Taste, wenn wir es wollten, lassen Sie uns das auf Schaltfläche ändern und sehen, was dort passiert. Ändert es in eine Schaltfläche. Obwohl ich diese Form eines Knopfes mag, ist es ein wenig expliziter, ausführlicher namens Even. Und ja, also gib dem einfach eine Chance und spiele ein bisschen damit. Versuchen Sie nicht, etwas Besonderes zu erreichen, nur versucht, Dinge zu brechen. Was passiert, wenn Sie Kohls eingeben, ist gleich 500 oder eins? Sehen Sie, ob das anders aussieht oder Zeilen, oder sehen Sie, ob Sie dies auswählen können, dieses Selektionselement ist ebenfalls erforderlich. Gehen Sie weiter und spielen Sie einfach damit. Es gibt hier kein Ziel, aber ich würde sagen, verbringen Sie mindestens zehn Minuten damit zu spielen und nur eine Vorstellung davon zu bekommen , wie das funktioniert, weil diese unglaublich wichtig sind. 21. Videos einbetten: Ok, willkommen zurück. Werfen wir einen Blick auf die Einbettung irgendeiner Art von Inhalt. Jetzt tun wir dies in der Regel mit einem Element namens iframe. Und iframe nimmt einen SRC und einen Rahmenrahmen, während es tatsächlich viele verschiedene Dinge braucht. Aber der Rahmenrahmen wird 0 sein, weil wir keinen Rahmen um ihn herum wollen. Aber lassen Sie uns diese Grenze hinzufügen. Und es jedenfalls, lassen Sie uns tun SRC ist gleich HTTPS. Caleb dot i, mal sehen, ob das überhaupt funktioniert. Noch. Meine Website lässt Sie das nicht tun. Aber Sie können sehen, dass es hier einen Rahmenrahmen gibt. Und das Beispiel ist Rahmenrahmen eins gegen Druckrahmenrahmen 0. Wir mögen Rahmenbordüre 0 heutzutage sieht es nur ein bisschen besser aus. Aber lassen Sie uns voran und fügen Sie ein YouTube-Video hinzu. Also bin ich nur auf der Codierung für jeden YouTube-Kanal. Und gehen wir zu den Grundlagen der Web-Entwicklung. Lasst uns das pausieren. Und wenn ich weitergehe und auf Teilen klicke, kann ich auf Facebook, Twitter teilen , oder ich kann auf Einbetten klicken. Und es gibt mir einen Iframe und einen Haufen Code. Und das kann ich einfach kopieren. Und lasst uns diesen iframe löschen. Kleben Sie das hier rein. Und Sie werden feststellen, dass es ein iFrame ist. Es hat eine Breite und eine Höhe als auch. Die Quelle ist die YouTube-URL. So dub, dub, dub dot youtube.com Schrägstrich einbetten j, y arc PIH DG. Das ist die einzigartige Videoidee, ja, Rahmenrahmen von 0. Und YouTube will auch nicht, dass wir einen Rahmenrahmen haben und eine Reihe anderer Dinge hier drin zulassen , die wir loswerden können, außer Vollbild zulassen. Lasst uns das da drin behalten. Das scheint nützlich zu sein. Und so können wir auf unsere Seite zurückgehen und uns das ansehen. Wir haben ein YouTube-Video auf unserer Seite genau so. Und das ist buchstäblich so einfach wie es wird. Damit man buchstäblich kopieren und einfügen kann. Aber mal sehen, was passiert, wenn wir mit diesen neun Breite von 900 tun, aber die Höhe bleibt gleich bei 315. Wird da ein bisschen quetschig, nicht wahr? Nehmen wir an, die Breite wird 900 sein und die Höhe beträgt 100. Und jetzt sieht es so aus, als würde es ein wenig abgeschnitten. Es gibt also Möglichkeiten, dies zu kontrollieren. Und ich werde das rückgängig machen, weil YouTube die richtigen Dimensionen für mich vorgeschlagen hat. Und ich kann einfach weitermachen und das spielen und es funktioniert einfach für mich direkt aus der Box. Nun möchte ich, dass Sie ein YouTube-Video finden, auf diesen Link oder die Freigabe-Schaltfläche klicken und dann den iframe erhalten und es in Ihre Seite einfügen. Ich möchte, dass Sie ein wenig Erfahrung damit machen, denn im nächsten Video werden wir in Ihr endgültiges Projekt eintauchen , bei dem Sie eine Einbettung wie einen iframe verwenden müssen. 22. DEIN PROJEKT: Okey-Dokey, willkommen zurück. Wir sind endlich bei Ihrem Endprojekt für HTML2 01. Nun, hier ist, was ich möchte, dass Sie ein Seitenlayout erstellen. Also möchte ich, dass Sie eine Art Kopf- und Navigationsbereich und einen Inhaltsabschnitt haben. Und es muss ein Layout haben und es muss Tabellen oder eine einzelne Tabelle, mehrere Tabellen verwenden , es spielt keine Rolle. Das überlasse ich dir. Ihre Navigation sollte mindestens einen Link zu einer anderen bestehenden Seite von Ihnen haben. Content-Bereich. Sollte ein Bild, einen Absatz, eine Kopfzeile und ein YouTube-Video haben. Schließlich sollte Ihre Fußzeile ein Copyright-Symbol und das Jahr, in dem Sie diese Seite erstellt haben, haben. So könnte es wie Copyrights 20-20 und Copyright 20-25 sein. Und wenn Sie das fertig sind, möchte ich, dass Sie einen Screenshot Ihrer Seite machen und sie mit dem Rest der Klasse teilen. Ich denke, es ist wirklich nützlich, etwas Feedback zu bekommen , wenn Sie nicht mit der Klasse teilen wollen, das ist in Ordnung. Sie können immer auf die Facebook lernen zu Code Gruppe gehen und teilen Sie es mit der Gruppe und erhalten einige Feedback dort als auch. Aber Feedback ist absolut wichtig und sei nicht zu nervös über Feedback. Tausende von Menschen tun dies jeden Tag. Es ist völlig in Ordnung. Wir können Ihnen allerlei positives Feedback geben, um Ihnen zu helfen, besseren Code zu schreiben , damit die Dinge ein bisschen besser, ein bisschen moderner aussehen , Dinge wie diese. Es ist immer schön, ein paar Augen auf Ihren Code zu haben. Also geh weiter und gib dem eine Chance. Was ich tun werde, ist, dass ich dieses Video für ungefähr, ich weiß nicht, fünf Sekunden oder so pausieren werde. Und dann werde ich meine Version davon direkt vor dir erstellen. Also mach weiter und pausiere das Video hier und du weißt es, wenn du stecken bleibst, kannst du mir einfach zuschauen, wie ich meins mache und dann kannst du es auch alleine ausprobieren. Aber ich empfehle, dass Sie es zuerst selbst ausprobieren, machen Sie Ihr Gehirn ein wenig schwitzen. Das ist wirklich, wirklich wichtig. Okay, lass uns weitermachen und unsere Projektseite erstellen. Also gehe ich zu Datei, Neue Datei und lasse Änderungen von Nur-Text in eine HTML-Datei. Und das erste, was ich tun muss, ist, diese HTML5-Struktur zu erstellen. Dieses Dokument wird Calebs Projekt genannt. Und das erste, was wir hier brauchten, war, ein Seitenlayout mit Tabellen oder einer Tabelle zu erstellen . Und so lasse ich plötzlich etwas Raum für uns, hier zu arbeiten. Und wir wollen etwas, das ein bisschen so aussehen wird. Wegen Doo-Doo-Doo-Doo. Vermisst die schwierigste Art, etwas zu zeichnen. Aber ja, damit wir so etwas haben können. Also haben wir wie unsere Kopfzeile hier drin. Sie könnten sagen, wie Calebs Projekt, Calebs Website, Ihre Website, Ihr Lieblingsessen, Lieblingstier, Ihre Lieblingsmöbel oder so etwas. Wir haben eine Art Navigation auf der linken Seite. Hier drüben. Wir haben einen Inhalt und das Recht, und wir haben eine Art Fußzeile unten. Das ist die Art von Blick, nach der ich gehe. Ihr Stil könnte ein wenig anders sein, Ihr Layout könnte etwas anders sein. Aber zuerst weiß ich, dass ich einen Tisch brauche und ich weiß, dass ich mit diesem Tisch arbeiten muss und genau sehen muss, was los ist. Und ich möchte, dass die Breite 100% dieser Seite beträgt. Als nächstes weiß ich, dass ich mindestens eine Reihe hier habe. Also habe ich eine Tabellenzeile, und ich möchte die Tabellenüberschrift hier rein. Jetzt ist es schön, dass die Tabellenüberschrift es für mich fett wird, aber ich möchte nicht, dass es fett ist. Ich will ein H1, ich will, dass das riesig ist und Caleb Tolkiens Projekt sagt. Als nächstes haben wir noch eine Reihe hier. Lassen Sie uns also voran und erstellen Sie eine weitere Tabellenzeile. Dieser hat jedoch zwei Zellen. Also machen wir TD Zelle eins, TdS L2. Und lassen Sie uns voran und sehen Sie dies in einer Vorschau, indem Sie dies als mein Projekt dot HTML speichern. Und ich kann zur Datei gehen, Datei öffnen, mein Projekt dot HTML. Und wir können sehen, dass die Zellen nicht wirklich funktionieren. Und das wird erwartet, weil wir wollen, dass dies die gesamte Breite einnimmt. Aber das heißt, nun, es gibt zwei Zellen, wir müssen sie irgendwie zeigen. Was wir hier tun können, ist, dass th colspan gleich zwei ist. Und das heißt, es gibt zwei Zellen hier unten. Stellen Sie sicher, dass dies auch so tut, als wären es zwei Zellen. Und da gehen wir. Das sieht ein bisschen besser aus. Jetzt haben wir eine Navigation hier drüben in Zelle eins. Also lassen Sie uns einfach voran und beschriften diese Navigation und lassen Sie uns diesen Inhalt beschriften. Ok. Sie können tatsächlich sehen, dass das meine Navigation überstoßen hat. Lassen Sie uns die Breite hier ändern. Die Breite dieses wird etwa 20% betragen. Das sieht besser aus. Schließlich, was ich hier geschrieben habe, was übrigens, ich könnte in einem Pre-Tag rappen, ist, dass ich diese untere Reihe hier drin brauche. Also lassen Sie uns voran und fügen Sie diese untere Zeile, Tabellenzeile, td, Fußzeile hier hinzu. Mal sehen, wie das so aussieht. Nicht schlecht, nicht schlecht. Aber wir wollen auch, dass dies einen Kolspan von zwei hat. Machen wir einen Colspan von zwei. Da gehen wir. Wir haben hier eine Fußzeile und wir wollen sie zentrieren. Also machen wir es nicht zu einem TD, machen wir es ein th. Und fangen wir mit dem einfachsten hier an. So haben wir unser Layout fertig. Die Fußzeile sollte ein Copyright-Symbol haben. Wir wissen, dass das eine HTML-Entität ist. Es ist das kleine c mit einem Kreis um ihn herum. So könnten wir sagen und kopieren Calebs Website wie von uns leben in der Zukunft, 20-30. Da gehen wir. Nicht schlecht, nicht schlecht. Navigation. Wir wissen, dass die Regeln waren Navigation sollte einen Link zu einer anderen bestehenden Seite haben. Lass uns weitermachen und uns etwas Raum geben, um hier zu arbeiten. Und lassen Sie uns eine ungeordnete Liste erstellen. Und lassen Sie uns dies in eine HTML-Datei ändern. Wir haben eine ungeordnete Liste und dieser erste Link wird ein Anker-Tag sein , das zu index.html geht. Index.html. Gehen Sie zu unserem HTML auf eine einseitige Seite. Ok? Okay, das kommt zusammen. Ich werde hier reinzoomen. Also, das kommt zusammen. Lassen Sie uns weitermachen und einen anderen Verbündeten mit einem Anker in ihm erstellen, ein Listenelement mit einem Anker darin. Und lassen Sie uns sagen, zu gehen, ich weiß nicht,, Facebook.com, aber dies ist ein externer Link. Wir brauchen den HTTPS Doppelpunkt Schrägstrich. Und das könnte sagen, Gehen Sie zu Facebook. Dot com. Da gehen wir. Wir haben ein paar Links da drin. Wir wissen, dass es existiert, weil das die Seite war, an der wir gearbeitet haben, oder es ist eine Seite, an der ich von allen anderen Videos gearbeitet habe. Schließlich haben wir hier einige Inhalte. Was wollten wir in Ihren Inhalten hinzufügen, sollte ein Bild von Absatz, eine Kopfzeile und ein YouTube-Video haben . Lassen Sie uns voran und fügen Sie diesen Header zuerst hinzu. Und so merkst du eigentlich, was ich getan habe, war Inhalt nur ein Platzhalter Text für mich. Alles, was ich wirklich tun wollte, war mir zu sagen, dass es dort sein sollte, damit ich es schnell auswählen und anfangen kann zu arbeiten. Lassen Sie uns voran und fügen Sie hier einige Header hinzu. Und es muss übrigens kein echter Inhalt sein, ein Header da drin. Es muss nur diese Akzeptanzkriterien abchecken. So ist der Header fertig. können wir loswerden. Link zu einer anderen Seite, loswerden. Erstellen Sie ein Seitenlayout mithilfe von Tabellen. Befreien Sie sich von dieser Fußzeile sollte ein Copyright-Symbol haben. Werde das los. Jetzt haben wir nur ein Bild, einen Absatz und ein YouTube-Video. Gehen wir weiter und fügen Sie hier einen Absatz hinzu. P. Laura. Ok. Das hier ist erledigt. Wir brauchen den Absatz dort nicht mehr. Wir brauchen ein Bild. Haben wir schon Bilder? Wir haben einen Computer, also gehen wir weiter und fügen das hinzu. Img. Die Quelle wird Bilder, die dieser Ordner hier Schrägstrich Computer, Punkt-Punkt-Punkt-JPEG sein. Und das Alt wird Computer sein, nur für den Fall, dass das Bild nicht geladen wird. Funktioniert das für mich? Ja, da ist es. Da ist ein großes Bild drin. wir schließlich ein YouTube-Video hinzu. Also werde ich einfach YouTube hier booten und zur Programmierung für jeden Kanal gehen. Und lasst uns weitermachen und Python Formatierung machen. Lassen Sie uns voran und klicken Sie auf „Teilen“, und lassen Sie uns diese Einbettung erhalten. Und alles, was ich tue, ist, dass ich den Text auswähle, der kopiert werden soll. Und hier unten, Paste. Und diese Breite wird immer noch 560 sein, diese Höhe wird immer noch 316 sein. Ich werde dies zulassen Excel Beschleunigungsmesser Zwischenablage lassen, richtig? All das Zeug. Ich werde das da drin lassen, weil Google das vorschlägt. Wir müssen nicht wissen, was das wirklich zu dieser bestimmten Zeit ist, weil sich um Zwischen-HTML, nicht um fortgeschrittenes HTML handelt. Gehen wir weiter und gehen wir zurück zu unserer Seite. Und wir haben einen Titel. Wir haben ein paar Navigation da drin. Wir haben eine Kopfzeile, einen Absatz, ein Bild, wir haben ein YouTube-Video und wir haben eine Fußzeile. Das Letzte, was ich tun will, ist, diese Grenze loszuwerden und diese Pre hier drin. Lassen Sie uns also diesen vorformatierten Text loswerden und dieser Rahmen kann entfernt werden. Und mal sehen, was wir haben. Da gehen wir. Wir haben eine HTML-Seite mit einem richtigen Layout. Und das ist alles, was es gibt. Also danke, dass Sie diesen Kurs genommen haben. Mein Name ist Caleb Eataly und danke, dass Sie sich die Zeit genommen haben, HTML 201 oder Zwischen-HTML mit mir heute zu lernen . Vergiss nicht, wenn dir die Art und Weise gefällt, wie ich lehre, kannst du mir auch immer folgen. Tausende von Menschen folgen mir schon. Aber du wirst kleine Updates bekommen. Ein Boot wie, wenn ich einen neuen Kurs habe, der herauskommt, Dinge wie das und dann können Sie sehen New Course hat, wie ich sie aus. Nochmals vielen Dank, dass Sie sich die Zeit genommen haben, all das mit mir zu lernen. Ich freue mich sehr darauf, Sie in einem anderen Kurs zu sehen. Wenn ich dich in einem anderen Kurs nicht sehe, hoffe ich, dich in der Facebook zu sehen, ist eine völlig freie Gruppe. Es ist völlig optional. Aber da sind gerade 56.000 Mitglieder drin. Jeder ist bereit, Ihnen jederzeit zu helfen. Und wenn ich dich nicht da drin sehe, dann nochmals, danke und glückliches Programmieren. Wir sehen uns herum. Tschüss.