HTML lernen: Von den Grundlagen zum Profi

1. Einführung: Haben Sie jemals darüber nachgedacht, eine Website zu erstellen? Wenn ja, ist HTML die erste Sprache , die Sie lernen müssen. Heute werden wir alles durchgehen, was Sie wissen müssen, um HTML zu lernen. Hi, ich heiße Zoe. Ich bin ein Softwareingenieur und ehemaliger Professor , der es liebt, anderen beim Einstieg in das Programmieren zu helfen Ich habe unzählige Websites und Web-Apps mit React, CSS, HTML und mehr erstellt . Heute werden wir uns mit den Grundlagen von HTML befassen und darüber, wie Sie sie verwenden können, um Ihre erste oder nächste Website zu erstellen indem Sie diese Website erstellen. Wir werden alles über die Verwendung von Elementen, kostenpflichtigen Strukturen, Attributen und mehr sprechen. In diesem Kurs beginnen wir mit einem allgemeinen Überblick darüber, welches HTML verwendet wird, warum es verwendet wird und welchem Zweck es dient Dann tauchen wir direkt in unser Tutorial ein. Das Tutorial wird in drei Teile aufgeteilt. Zuerst initialisieren wir unser neues HTML-Projekt. Dann werden wir es in unserem Browser zum Laufen bringen und schließlich die Struktur unserer Website ausbauen die Struktur unserer Website Dieser Kurs richtet sich an alle , die daran interessiert sind ihre eigenen Websites zu erstellen und zu lernen, wie man mit HTML arbeitet. Am Ende dieses Kurses werden Sie in der Lage sein, dies alles selbst zu tun . Lass uns anfangen. 2. Kursprojekt: Klassenprojekt. Das Projekt für diesen Kurs wird darin bestehen, eine einfache Website zu erstellen, die nur HTML verwendet. In der gesamten Lektion werden wir uns damit befassen, welchen Editor Sie verwenden sollten, wie Sie Ihren Code strukturieren und wie Sie Ihre Website während der Arbeit sehen und aktualisieren können. Für diesen Kurs ist es wichtig, Zugriff auf einen Computer zu haben, auf dem Sie Visual Studio-Code oder einen anderen Code-Editor Ihrer Wahl ausführen können . Sie sollten auch einen Browser wie Google Chrome in Betrieb haben , da wir ihn zur Anzeige unserer Webseite verwenden werden. Ich hinterlasse Links zu allen Ressourcen und Ressourcen du benötigst, auf der Registerkarte „Projekte und Ressourcen“ weiter unten. 3. Was ist HTML?: Was ist HTML? HTML oder Hypertext Markup Language ist der wesentliche Baustein für alles, was Sie im Internet sehen Von Schaltflächen über Links bis hin zu größeren Abschnitten — alles dreht sich um Wenn Sie noch nie gesehen haben, wie es aussieht, können Sie tatsächlich den HTML-Code sehen, aber dieser wird verwendet, um diese Webseite zu erstellen. Wenn Sie mit der rechten Maustaste auf die Seite klicken und die Option Seitenquelle anzeigen auswählen , wird der gesamte HTML-Code für die Seite angezeigt. Und es funktioniert auf jeder Seite im Internet. Probieren Sie es aus, mit der wir als Auszeichnungssprache alles anzeigen können, was wir im Internet sehen HTML besteht aus Elementen, und diese Elemente sind die Bausteine des Webs Jedes Element besteht aus zwei Teilen, seinen Tags und seinem Inhalt. Schauen wir uns die allgemeine Struktur der Angriffe an, um sie besser zu verstehen. 4. Tags: Schlagworte. Es gibt drei Arten von Tags: öffnende Tags, schließende Tags und selbstschließende Tags. Ein öffnendes Tag beginnt mit einer linken spitzen Klammer, gefolgt vom Namen des Elements und dann mit einer rechten spitzen Klammer. Wenn das Element einen Inhalt hat, der zwischen den Tags liegt, enthält es ein schließendes Tag handelt es sich um ein Tag mit derselben Struktur wie unser öffnendes Tag, jedoch mit einem Schrägstrich nach der ersten spitzen Klammer Wenn für das Element kein schließendes Tag erforderlich ist, weil kein Inhalt zwischen den Tags vorhanden ist , bezeichnen wir es als selbstschließendes Tag und fügen unmittelbar vor der rechten spitzen Klammer einen Schrägstrich unmittelbar vor der rechten spitzen Bei den meisten Arten von Tags gibt es Inhalte, die sich zwischen den öffnenden und schließenden Tags befinden, aber der Inhalt, den Sie dort platzieren hängt von der Art des Elements ab, mit dem Sie arbeiten 5. Elemente: Elemente. Es gibt Dutzende verschiedener Elemente, die in HTML verwendet werden und jedes kann einem anderen Zweck dienen. Wenn wir daran interessiert sind, ein Element zur Anzeige von Text zu erstellen , greifen wir, je nachdem, um welche Art von Text es sich handelt, möglicherweise nach einer Kopfzeile oder einem Absatz-Tag. Es gibt sechs verschiedene Ebenen von Header-Tags, und Sie werden sie auf Ihrer Seite in einer hierarchischen Reihenfolge verwenden In unserem Tutorial werden wir uns etwas genauer mit Headern befassen. Angenommen, wir mussten Text nicht speziell anzeigen, aber wir versuchen eher, das Format unseres HTML-Codes zu strukturieren In diesem Fall wollen wir uns Elemente wie Trennlinien oder Abschnitte ansehen Elemente wie Trennlinien oder Abschnitte ansehen Diese Elemente helfen uns, einen Teil des HTML-Codes von einem anderen zu trennen , und ermöglichen es uns, unseren Code zu organisieren und später einfacher mit Sling zu arbeiten. 6. Tutorial: uns zunächst Lassen Sie uns zunächst einen Blick auf das Projekt werfen , das wir bauen möchten. Dies ist ein Entwurf für das Projekt, das wir bauen möchten. Im Grunde ist es ein einfaches Formular mit, du weißt schon, etwas Styling im Hintergrund, verschiedenen Größen der Überschriften und dergleichen Ordnung, also als Erstes gehst du auf den Link in der Beschreibung unten und verbindest dein Konto, sodass du all diese Starterdateien kostenlos herunterladen kannst all diese Starterdateien kostenlos herunterladen Wirklich, du brauchst nur die Bilder, aber wir können das gesamte Starterkit verwenden, um uns zum Laufen zu bringen Was uns hier also zur Verfügung gestellt wurde , sind viele Informationen. Sie haben im Grunde genommen eine Reihe von Dateien für uns erstellt. Ich werde diese Datei verstecken damit wir gemeinsam daran arbeiten können, sie erneut zu erstellen. Wir wollen also eine neue Datei erstellen und diesen Indexpunkt HML nennen , so wie sie es hatten Das ist einfach die Konvention, die Leute verwenden um neue HTML-Dateien zu schreiben Fantastisch. Also jetzt wollen wir tatsächlich unsere HTML-Datei nehmen und sie zeigen, wir wollen die Früchte unserer Lava sehen, richtig? Wir haben die Datei erstellt. Wir wollen es im Internet sehen. Also werden wir hier unten klicken, wo es heißt: Go Live. Denken Sie daran, dass wir den Live-Server in der letzten Einheit installieren. Nun, wir werden jetzt anfangen, ihn zu benutzen. Also unten rechts, wo es heißt, Go Live, willst du nur darauf klicken, um den Live-Server zu starten. Und es fing an. Also fing es an Port 5.500 Wenn ich mit der Maus über einen gehe und zu Local Post 5.500 gehe. Ich erhalte meine Webseite, aber da ist buchstäblich nichts Nun, warum ist das so? Das liegt daran, wir noch nichts in die Akte aufgenommen haben. Mal sehen, ob ich Hallo Welt sage und auf Speichern klicke. Immer noch nichts. Das ist komisch. Warum passiert das? Nun, das liegt daran, dass HTML, wie Sie vielleicht in der anderen Datei gesehen haben, eine sehr spezifische Ordnerstruktur hat, die dem Computer mitteilt, dass er die HTML-Datei richtig formatiert Wir können nicht einfach weitermachen und Text in unseren Editor eingeben. Wir müssen ihn tatsächlich richtig formatieren. Und Sie werden sogar sehen, dass VS Code uns einen kleinen Live-Server gibt, der uns hier einen kleinen Hinweis gibt. Live-Reload ist ohne Kopf- oder Körpermarke nicht möglich , weißt du? Im Grunde sagt es uns, hey, dir fehlen Teile an dieser Stelle VS-Code hat also eine wirklich, wirklich coole Funktion. Wenn Sie ein Ausrufezeichen eingeben, verwendet er tatsächlich Emmet , eine eingebaute Funktion zur automatischen Vervollständigung, stellt Ihnen tatsächlich den gesamten Dokumenttyp für eine HTML-Datei zur Verfügung den gesamten Dokumenttyp für eine Ich ermutige Sie, es zu verwenden, da Sie in Ihrer eigentlichen Arbeit nur sehr selten HTML vom Typ Doc eingeben müssen selten HTML vom Typ Doc eingeben Wenn Sie also auf das Ausrufezeichen drücken und die Eingabetaste drücken, wird der gesamte Textbaustein übernommen und für Sie auf die Seite gestellt Wenn wir auf Speichern klicken, haben wir jetzt eine Reihe von richtigen Elementen. Und schauen wir uns an, was es ist. Also der erste, da steht Doctype HTML Das sagt uns also im Grunde nur, dass das Dokument vom Typ HTML ist Wenn Sie das direkt unter HTML vom Typ Doc bemerken, gibt es dieses HTML-Tag, für das unten tatsächlich ein passendes Paar steht Erinnern Sie sich daran, dass HTML paarweise vorkommt? Nun, das ist das öffnende und das schließende HTML-Tag. Nun, eine Sache, an die Sie sich bei HTML erinnern müssen , ist , dass alles in Elemente fällt, oder? Und wenn Sie nichts in das HTML-Element schreiben, existiert es auf der Seite nicht. Wenn wir also mit dem Schreiben beginnen, stellen wir sicher, dass wir alles in dieses HTML-Element schreiben . Gehen wir runter zum nächsten Level. Hier haben wir einen Kopf, und unter dem Kopf scheinen sie sich auf derselben Ebene zu befinden. Wir haben einen Körper. Also Kopf und Körper. Sie können sich HTML vorstellen , als wäre es ein menschlicher Körper. Der Kopf ist also das, was viele Informationen enthält , wissen Sie, das Wissen hinter den Kulissen. Der Körper ist das, was das buchstäbliche Element enthält. Wenn wir uns also den Kopf hier ansehen, werden wir sehen, dass es hier ein paar Metatags gibt , die im Grunde genommen, ähm, Metadateninformationen sind, um dem Computer im Grunde ein bisschen mehr Informationen über unsere HTML-Datei mitzuteilen über unsere HTML-Datei Es sagt Ihnen also, welcher Zeichensatz verwendet werden soll, Inhalt, der Viewport , solche Dinge. Das sind keine Teile, über die wir uns im Moment Gedanken machen müssen. Dann gibt es uns auch einen Titel. So können wir unserer Webseite tatsächlich einen Titel geben. Nennen wir es Anmeldeformular. Wenn wir jetzt zu unserem Browser wechseln und vielleicht die Seite aktualisieren, ist da immer noch nichts Aber wenn Sie oben links bemerken, dass auf dem Ding, auf dem Local Host 5.500 stand , jetzt Anmeldeformular steht Indem wir also den Titel in unserem HTML-Code in unserem Kopf ändern, ändern wir tatsächlich den Titel unserer Seite Ziemlich cool, oder? In Ordnung, also sind wir vorerst mit einem Kopf fertig Wir werden in späteren Lektionen darauf zurückkommen, aber im Moment ist es so gut, wie wir es brauchen Als Nächstes werden wir über die Leiche sprechen. Nun, wie ich bereits erwähnt habe, ist der Körper der Ort, an dem alle Elemente leben. Wir wollen also sicherstellen , dass wir alles, was wir sehen wollen, in den Hauptteil aufnehmen, anstatt nur mit einfachen Texten zu beginnen, denn obwohl wir Hello World hier platzieren könnten, es speichern und dann hierher zurückkehren könnten, würde es auftauchen. Das ist semantisch nicht wirklich korrekt. HTML hat eine Menge verschiedener Elemente, die Sie tatsächlich für Text, für Bilder und für Schaltflächen verwenden können , wie wir bereits erwähnt haben Sie möchten sicherstellen, dass Sie das Element verwenden, das für den Datentyp , den Sie präsentieren möchten , korrekt ist . Da ich also Text präsentiere, werde ich wahrscheinlich ein Header-Tag verwenden. Das H-One-Tag ist also das höchste Header-Tag. Es sollte nur ein H-One-Tag auf Ihrer Seite geben , da uns das im Grunde sagt , dass es auf der Seite darum geht. Da es also nichts anderes auf der Seite gibt, nenne ich sie vorerst die Hello World-Seite. Also tippe ich Hello World zwischen diesen H-One-Tags ein und schauen wir mal, du wirst sehen dass es bereits anders formatiert Das liegt daran, dass Header standardmäßig einige eingebaute Formatierungen haben Sie sind fett gedruckt, sie sind größer. Sie sind auf der Seite prominenter. Wenn ich das zum Beispiel mit, sagen wir, einem H-Six-Tag erstellen und speichern würde Sie würden sehen, wie klein der Text ist, Sie können ihn kaum lesen. Es ist also gut, die Wichtigkeit und Bedeutung von H eins gegenüber H zwei gegenüber H drei bis hin zu H sechs zu verstehen die Wichtigkeit und Bedeutung von H eins gegenüber H zwei gegenüber H drei bis hin zu H und zu verstehen, wann Sie sie verwenden sollten Ich persönlich verwende H-Six-Tags nicht sehr oft, weil dafür einfach so viele Überschriften vorher aufgebraucht werden müssen Schauen wir uns unser Design an. Wie wir hier sehen können, ist es dieses große Bild im Hintergrund, und dann haben wir gelernt zu programmieren, indem wir anderen zugesehen haben und gesehen haben, wie erfahrene Entwickler Probleme in Echtzeit lösen. Und dann ist da noch dieses Formular auf der rechten Seite. Okay, fangen wir an, das zu bauen. Okay, also lerne Programmieren, indem du anderen zuschaust. Ich würde vermuten, dass das wahrscheinlich das H ist, also lass uns das eintippen Und wenn wir hierher gehen, sieh dir das an. Es ist bereits aktualisiert. Unglaublich. In Ordnung. Und mal sehen, wie erfahrene Entwickler Probleme lösen Also dieser Teil hier, dieser Einblick, wie erfahrene Entwickler das Problem lösen, denken Sie vielleicht, sollten Sie H Two im Alter von drei und im Alter von vier Jahren verwenden? Eigentlich möchten Sie für diesen Teil keine Überschrift verwenden. Dafür würden Sie ein Ptag oder ein Absatz-Tag verwenden ein Ptag oder ein Absatz-Tag Absatz-Tags sind für größere, allgemeinere Textteile gedacht die Sie auf einer Webseite sehen werden, Sie wissen schon, im Grunde Textabsätze Also werden wir dafür das Absatz-Tag verwenden. Eine weitere wirklich coole Funktion von VS-Code ist, dass Sie Ihre Tabs auf eine Seite ziehen Ihre Tabs auf eine Seite und sie dann nebeneinander haben können, sodass Sie einfach darauf verweisen was auf der anderen Registerkarte vor sich geht. also ein Ptag verwenden, werden wir sagen, hier sind Bing-Skript-Tutorials großartig, aber zu verstehen, wie Entwickler denken, ist Ich stimme zu. Und Sie sollten sich auf jeden Fall an Ihren Mentor wenden, um etwas davon eins zu eins zu bekommen. Ordnung. Fantastisch. Also haben wir unseren H One und unseren PTAC Mal sehen, wie das aussieht. Perfekt. Ordnung, cool. Aber dann ist da noch dieser andere Abschnitt hier drüben. Da ist das so, sieben Tage lang kostenlos testen und dann ist da noch diese Formularsituation. Und dann sieht das aus wie eine Schaltfläche, auf die du klickst. Und dann gibt es hier unten mehr Text. Wie wollen wir es also strukturieren? Wir können irgendwie verstehen, dass es hier im Grunde zwei Abschnitte gibt, oder? Es gibt einen Abschnitt auf der linken Seite , der wirklich nur aus dem Text besteht. Es ist, als würde man uns von der Seite erzählen. Und dann gibt es einen Abschnitt auf der rechten Seite, in dem es mehr darum geht, was eigentlich vor sich geht. Wir können also entweder das Abschnittselement verwenden. Oder wir können das div-Element verwenden, bei dem es sich eher um einen generischen Teiler Also werde ich hier zwei Divs erstellen, DIV eins und DIV Was ich hier gemacht habe, ist, dass ich all diesen Text in ein Div gepackt habe, und dann habe ich das zweite Div erstellt und werde alle Formularinformationen dort einfügen Das ist nur, um ihnen eine gute Trennung zu geben, und es wird einfacher sein, wenn wir später wieder auf Schlick zurückkommen In diesem ersten Abschnitt hier oben werde ich also ein P-Tag erstellen und diesen Text kapseln Also sagen wir P. Jetzt haben wir ein Formular. Dies ist das erste Mal, dass wir es mit Formularen zu tun haben. Lassen Sie uns darüber sprechen, was ein Formular ist. Ein Formular ist, wissen Sie, Sie haben wahrscheinlich eine Reihe von Formularen online eingereicht, selbst wenn Sie sich bei Github angemeldet haben, senden Sie wahrscheinlich ein Formular ab. Ein Formular verwendet die verschiedenen Daten, die vom Benutzer eingereicht oder eingegeben wurden, und sendet sie dann an einen anderen Ort , wo sie verarbeitet und bearbeitet werden. Vielleicht ist es ein Benutzer geworden, vielleicht, weißt du, schickst du deine Instacart-Bestellung für Was auch immer es sein mag, Formulare werden überall im Internet verwendet, daher ist es wirklich wichtig zu wissen, wie man sie erstellt Um also ein Formular zu erstellen, werden wir tatsächlich das Element Formular verwenden. Und das wird uns nur ein paar zusätzliche Spezialwerkzeuge geben , die Sie mit Formularen mitbringen. Innerhalb eines Formulars können Sie also ein paar verschiedene Dinge haben. Sie können eine Eingabe machen. Und das Tolle an vielen dieser VS-Code-Erweiterungen, die wir installiert haben , ist, dass sie Ihnen hier Informationen geben. Wenn Sie also während der Eingabe jemals eine Frage dazu haben , was etwas ist, können Sie buchstäblich einfach hier klicken , wo MDN-Referenz steht, und Sie können sagen, öffnen Sie es Und dann wird es in einem neuen Tab geöffnet und Sie können alles über die Formulareingabe und das Formularelement lesen Ich werde es hierher bringen, damit Sie sehen können, wovon ich spreche. Also ist es genau hier. Eingabeformularelement, und es gibt Ihnen all diese Informationen über die Eingabe innerhalb des Formularelements, richtig? Ich sage Ihnen, dass es einen Typ hat, es hat IDs, es hat einen Namen, es ist erforderlich usw., und so weiter, und so weiter, und so weiter. Inputs ist also ein wirklich guter Ausgangspunkt für uns. In HTML gibt es also nicht nur all diese verschiedenen Elemente. Wenn Sie also wieder nach oben gehen, wo hier HTML steht, und wir sehen, dass Lang gleich Englisch Lang ist ein für HTML spezifisches Attribut, das Sprachattribut, richtig? Wir können die Sprache in HTML angeben , weil sie quasi dem Gesamtelement ähnelt. Nicht jedes Element wird über diese Funktion verfügen, aber Sie würden sie wirklich nicht benötigen, wenn Sie als allgemeine Sprache Englisch festlegen würden. Einfach so, all diese verschiedenen Elemente haben ihre eigenen besonderen Eigenschaften. Input ist also eines davon. Die Eingabe hat verschiedene Arten von Attributen. Einer ist also der Typ, oder? Sie können angeben, welche Art von Eingabe Sie haben, da es verschiedene Arten von Eingaben gibt. Also ein kleiner Hack, den ich dir hier zeigen möchte. Also gut, wenn Sie Typ eingeben und die Eingabetaste drücken, werden Ihnen all die verschiedenen Optionen angezeigt, die Sie haben, um welche Art von Eingabe es sich handeln könnte Es könnte also eine Schaltfläche, eine Checkbox, eine Farbe sein. URL, es könnte so viele verschiedene Arten von Eingaben geben, die Sie verwenden könnten. Sie können also anfangen zu erkennen, dass HML sehr flexibel ist, obwohl es sich um eine ziemlich eingeschränkte Sprache zum Schreiben Wir möchten, dass dies den Vornamen dessen annimmt , was unsere Benutzer eingeben Also wollen wir, dass es ein Text ist, also eine Art Text. Und dann noch ein Attribut bei der Eingabe. Und Sie können es hier in den MDN-Dokumenten nachschlagen Ein anderes Attribut ist das, ist es der Name? Ist der Name? Sie wollen also den Namen dessen, was auch immer die Eingabe ist. Also, ob es der Vorname der Person ist? Ist es ihr Nachname? Ist es ihr Alter? Was ist das für eine Information , die sie einreichen? Wenn wir also wieder hier rüber gehen und den Namen eingeben, würden wir ihn an die erste Stelle setzen und wir könnten den Vornamen eingeben. Und so wissen wir, um welche Information es sich handelt. Und dann schließen wir es ab. Eingaben sind eigentlich selbstschließende Tags. Anstatt diesen Schrägstrich erneut einzugeben, würden wir das nicht tun Das ist keine richtige Syntax. Prettier gibt uns hier einen kleinen Fehler und sagt: Hey, selbst, wenn zwischen deinen Tags nichts steht, sollten sie sich von selbst schließen Was also ein selbstschließendes Tag ist, ist, wenn wir Eingaben nehmen und sie hier isolieren, es ist ein Tag, das mit einem Schrägstrich und einer Klammer endet Es gibt also nichts, was dazwischen gehört. Das Tag selbst ist der Wert. Eine weitere wirklich coole Funktion , die Sie mit Eingaben verwenden können. Ein weiteres cooles Attribut ist das Platzhalterattribut. Sie können Ihrem Benutzer also tatsächlich eine Aufforderung geben. Sie wissen, wenn Sie ein Formular aufrufen und nicht ganz sicher sind, was Sie eingeben sollen, können Sie es tatsächlich auffordern, z. B. E-Mail-Adresse, Name usw. Lassen Sie uns also weitermachen und unserem ersten Eingabeattribut, dem Platzhalter, einen Vornamen geben unserem ersten Eingabeattribut, dem Platzhalter, einen Vornamen Cool. Also jetzt, wenn wir zurück zu unserer Seite gehen, großartig. Wenn du hier nachschaust, ist das unser kleines Eingabefeld, und das ist unser Vornamenfeld. Vielleicht fällt Ihnen aber etwas Interessantes auf. Unser gesamter Code läuft direkt runter. Es ist nicht einfach so, als würde man zur Seite kommen. Das liegt daran, dass wir noch keine Styles hinzugefügt haben. werden wir an der Gestaltung dieser Seite arbeiten nächsten Einheit werden wir an der Gestaltung dieser Seite arbeiten, wenn wir über CSS sprechen. Aber vorerst wollen wir einfach versuchen, alles semantisch auf die Seite zu bringen. In Ordnung, lassen Sie uns hier die nächsten paar Eingaben vornehmen. Also werden wir dort einen kleinen Hack kopieren und einfügen und einfügen Und wir werden eintippen Das wird ihr Nachname sein. Also werden wir den Namen in Nachname ändern. Denken Sie also daran, dass diese Werte, die sie senden, an, Sie wissen schon, an eine Datenbank oder ein Backend gesendet werden , oder , Sie wissen schon, wir werden uns an der Konsole anmelden. Aber wir müssen verstehen, was sie uns schicken, oder? Denn wenn wir jemanden treffen, der George Steven heißt, wissen wir nicht, ob George oder Steven der Vorname ist, es sei denn, wir weisen ihm einen bestimmten Schlüssel zu. Also haben wir beschlossen, dass der erste Vorname und der nächste der Nachname sein wird. Platzhalter für diesen , Nachname. Und dann sieht der nächste so aus: Okay, wir haben unsere vier Eingaben Auch hier sitzen sie Seite an Seite statt übereinander gestapelt, aber das werden wir in einer anderen Lektion korrigieren Und dann brauchen wir darunter noch eine weitere Art von Eingabe Erinnerst du dich, dass wir vorhin gesehen haben , dass es sich bei der Eingabe um eine Schaltfläche handeln könnte? Nun, das bezieht sich speziell auf Formulare. Bei Formularen möchten Sie also sicherstellen, dass beim Absenden des Formulars alle Informationen, die Sie mit einem Formular einreichen , auch gesendet werden. Und das tun wir, indem wir eine Schaltfläche für die Eingabe erstellen, einschließlich der Schaltfläche innerhalb des Formulars. Also erstellen wir eine weitere Eingabe, nennen sie Eingabe und erstellen sie vom Typ. Name der Schaltfläche. Ändern wir den Namen in einen tatsächlichen Wert und wir fordern dort Ihre kostenlose Testversion an. Und es ist immer noch ein selbstschließendes Etikett. Ordnung. Okay, cool Also, lohnt es sich, Ihre kostenlose Testversion in Anspruch zu nehmen. Wenn wir hier hingehen, bumm, großer Button Aufschrift, fordern Sie Ihre kostenlose Testversion an. Fantastisch. Wir fliegen das durch. In Ordnung, ich denke, das Letzte, was wir hinzufügen müssen, ist dieses Stück hier. Wenn Sie auf die Schaltfläche klicken, stimmen Sie unseren Nutzungsbedingungen und Dienstleistungen zu In Ordnung, also lass uns weitermachen. Das scheint außerhalb des Formulars zu liegen. Lass uns weitermachen und es hier hinzufügen. Lass uns ein PTag machen und wir werden es platzieren. Interessant an dieser Stelle ist, dass sowohl die Nutzungsbedingungen als auch die Dienste und die Möglichkeit, es sieben Tage lang kostenlos zu testen, fett gedruckt sind, aber wir haben sie noch nicht fett gedruckt Was wir also tun könnten, ist das starke Etikett zu verwenden. Nun, wir könnten das auch in CSS machen, aber es gibt einige wirklich einfache Möglichkeiten, es in HTML zu tun. Das starke Tag macht den Text im Grunde nur stärker oder fett. Also wickeln wir einfach die Teile unseres Textes, die fett gedruckt erscheinen sollen, mit dem starken Tag ein Lass uns eins hier platzieren und es sieben Tage lang kostenlos testen. Lass uns einen hier hinstellen. Spar dir das. Und bumm, da haben wir's. Sieben Tage lang kostenlos testen ist fett gedruckt, ebenso wie die Nutzungsbedingungen und Services. Fantastisch. Ich denke, wir haben alle Elemente auf der Seite. Das Letzte, was Sie tun sollten, bevor wir zu CSS übergehen, ist, unseren Code auf Github zu pushen und eine erste Aufzeichnung dessen zu erhalten, was wir hier tun. Lassen Sie uns also weitermachen und eine neue Instanz des Terminals öffnen. In Ordnung, das ist also in einem Ordner namens Projektdateien. Lass uns das zu einem Git-Repository machen. Also geben wir Git darin ein. Und wir werden den Branch auf Main und Awesome umstellen. In Ordnung, wir haben also unsere Marken Git und Kit. Und wie Sie hier sehen können, wurden all diese noch nicht zu unserem Git-Repository hinzugefügt Sie werden also grün angezeigt und werden nicht verfolgt. Also, was wir tun können, und das sind nur die Designs und die Bilder sowie der Index und die Anweisungen, wie man das baut Aber wir müssen wirklich nicht all diese Dinge nachverfolgen. Alles, was wir wirklich tun müssen, ist, unsere Indexpunkt-HTML-Datei im Moment zu verfolgen . Wenn wir bei der Arbeit mit verschiedenen Dingen mehr CSS und Bilder hinzufügen , können wir damit beginnen, diese zu verfolgen. Aber im Moment brauchen wir nur unser Indexpunkt-HTML. Also können wir das machen und wir können dieses initiale Commit einfach aufrufen. Und wir können es festschreiben und los geht's. Erledigt. Ordnung, jetzt wollen wir das In Ordnung, jetzt wollen wir das mit einem Github-Repository verknüpfen, denn denken Sie daran, dass wir unseren gesamten Code auf GitHub vom ersten Tag bis zum Ende verfolgen GitHub vom ersten Tag bis zum Ende Lassen Sie uns also zu Github wechseln . Und wir gehen zu deinem Konto, was auch immer dein Kontoname ist, und wir werden weitermachen und ein neues Repository erstellen. Also gehe ich zu den Repositorys, dem neuen Repository. Wir werden dieses Anmeldeformular aufrufen. Ich hoffe, es ist verfügbar. Ja, ist es. Fantastisch. In Ordnung, braucht deine Beschreibung nicht Wir werden es öffentlich machen und wir werden einfach weitermachen und ein Repository erstellen, so wie wir es beim letzten Mal getan haben Fantastisch. Da wir bereits ein erstellt haben, haben wir es bereits als Git-Repository initialisiert. Alles, was wir tun müssen, ist, diese Kopiertaste hier zu drücken, und es werden all diese netten Codezeilen kopiert diese netten Codezeilen , die wir uns nicht merken müssen Ich gehe zurück zum VS-Code, füge ihn in unser Terminal ein, drücke die Eingabetaste und los geht's . Es ist so eingerichtet, dass es verfolgt wird. Wenn wir also zu GitHub zurückkehren, aktualisieren Sie die Seite, nur um unsere Arbeit zu überprüfen. Ordnung, wir werden sehen, dass wir vor 1 Minute eine HTML-Datei mit Indexpunkt übergeben haben vor 1 Minute eine HTML-Datei mit Indexpunkt übergeben Wir haben einen Commit und da steht: Erster Commit. Und das Tolle an Github ist, dass Sie tatsächlich reinklicken und alle Informationen sehen können. Das ist also alles, was wir gerade dort eingegeben haben. Sehen Sie sich unsere Textfelder, unsere Schaltflächen, unser Formular, unsere P-Tags, unsere Dibs, unsere H-Eins ist gerade eine Menge los In dieser HTML-Datei Lassen Sie uns also rüberspringen und etwas CSS lernen und dieser Seite etwas Styling hinzufügen.