HTML: Ein Crashkurs (Crashkurs für Anfänger

1. HTML: Hi, willkommen zu diesem Kurs auf HTML. Lernen. Html ist der perfekte Schritt , um zu lernen , wie man Websites erstellt. Sobald Sie HTML verwenden können, sind die Möglichkeiten endlos. Mit diesem Kurs erstellen Sie eine grundlegende Webseite. Durch Beispiele. Wir werden damit beginnen, zu verstehen, was HTML ist, und wir werden uns ansehen, wie ein HTML-Dokument eingerichtet wird. Wechselt dann zu Themen wie der Verwendung von Text, Bildern, Listen und der Einführung grundlegender Stile. Wir werden den Kurs beenden, indem Verwendung von Tabellen und Formularen ansehen. Dieser Kurs richtet sich an Anfänger. Selbst wenn Sie noch nie zuvor programmiert haben, hilft Ihnen dieser Kurs auf Ihrer Lernreise. Mein Name ist Emma und ich arbeite heute als Programmiererin in der Branche. Ich liebe es zu programmieren und ich liebe es, wie kann ich lernen? Ich hoffe, dir hat dieser Kurs gefallen. 2. Was ist HTML?: Was ist HTML? Jedes Mal, wenn Sie eine Website besuchen, werden Sie HTML ausgesetzt, 1993 von Tim Berners-Lee eingeführt wurde. Html steht für Hypertext Markup Language. Was ist HTML nützlich? Nun, HTML ist das Skelett für alle Webseiten und es wird verwendet, um die Seite zu strukturieren und den Inhalt mithilfe von HTML anzuzeigen den Inhalt mithilfe von HTML Wir können Text hinzufügen und formatieren, Links, Listen, Tabellen und Formulare anzeigen und wir können einschließen Bilder und Videos auf der Webseite. Die Welt hat sich seit 1993 stark verändert , und die Technologie hat sich heute stark weiterentwickelt. Die aktuelle Version ist HTML5. Das World Wide Web Consortium verwaltete die Standards für HTML und entschied, was darin enthalten ist. In Ihrem Browser können Sie den HTML-Code jeder von Ihnen besuchten Website einsehen. Sie können jeden Browser verwenden, aber wir versuchen dies mit Chrome. Lass uns das mal ausprobieren. Wir besuchen google.com. Wir klicken einfach mit der rechten Maustaste und wählen Registerkarte Inspect, in der Elemente angezeigt werden , und wir können den HTML-Code für die Seite sehen. Ich sagte, der HTML steht für Hypertext-Markup-Sprache. Was heißt das? Nun, Hypertext beschreibt Text , der Zugriff auf eine andere Seite ermöglicht. Dies geschieht durch unseren Link, der als Hyperlink bezeichnet wird. Wenn ich eine Website besuche , auf der die Wettervorhersage angezeigt wird , und dann die Seite inspiziere, ist das Land hier ein Beispiel für einen Hyperlink. Und das kann ich bestätigen , wenn ich die Elemente ansehe. Wenn ich auf den Button klicke, werde ich zu einer neuen Seite navigiert. Eine Markup-Sprache ist eine Computersprache, die beschreibt, wie Text angezeigt wird, genau wie wenn Sie einige Texte unterstrichen oder hervorgehoben haben , möglicherweise in einem Lehrbuch oder in einem Dokument. Eine Markup-Sprache ist eine Computersprache , die die Struktur und die Präsentation angibt. Wir wickeln den Text ein, den der Browser anzeigen soll , in Elementen und Tags, damit der Browser weiß, wie er richtig angezeigt wird. 3. Die Anatomie eines Tags: In diesem Video werden wir HTML-Tags und die Anatomie des Angriffs vorstellen . Kombination mehrerer Elemente ist das, was die Gesamtstruktur einer Webseite in HTML ausmacht , die Elemente selbst bestehen normalerweise aus einem öffnenden und schließenden Tag, das als Wrapper oder Container. Es gibt mehr als eine Art von Tag, am meisten folgte die Struktur eines Textes, das mit einem öffnenden Tag begann und mit einem schließenden Tag endete. Schauen wir uns zunächst das Eröffnungstag an. Das Zeichen, das in den Klammern platziert ist, ist der Typ des Tags. Für einen Absatz platzieren wir den Buchstaben P. Das schließende Tag ist genau das gleiche, außer dass wir nach der ersten Klammer einen Schrägstrich verwenden . Attribute ermöglichen es uns, weitere Informationen über das Element hinzuzufügen. Wir platzieren das Attribut in das öffnende Tag. Um dies zu tun, verwenden wir einen Namen und einen Wert, der durch ein Gleichheitszeichen verbunden ist. Der Name ist der Typ des Attributs und der Wert ist der Wert, dem Sie zugewiesen werden möchten. Für Best Practices sollte der Attributname Kleinbuchstaben eingeschlossen und in doppelte Anführungszeichen eingeschlossen sein. Im letzten Video habe ich erwähnt, wie HTML seit seiner Erstellung stark entwickelt hat. Einer der Aspekte dabei ist, wie sich Tag-Namen für Formatierung auf das konzentrieren, was wir Semantik nennen. Oder anders ausgedrückt, die Bedeutung in der Vergangenheit, fett gedruckter Text würde als fett und kursiv als kursiv bezeichnet . Obwohl wir diese noch verwenden können, diese Tage immer häufiger Wörter wie stark und betont verwenden . 4. Erstellen des Dokuments: Jetzt haben wir ein bisschen Verständnis darüber, was HTML ist. Wir können anfangen, uns mit der Einrichtung unseres Dokuments zu befassen. Um ein HTML-Dokument einzurichten, sind bestimmte Elemente erforderlich. Wir beginnen mit der Dokumenttypdeklaration, die die erste Zeile des Codes im HTML-Dokument sein muss . Dies ist ein Erklärungszeichen DOCTYPE HTML. Dies lässt den Browser wissen , dass wir HTML verwenden. Das aktuelle Verhalten der Verwendung von HTML besteht darin, dass der Browser davon ausgeht, dass wir HTML5 verwenden da es sich um die aktuelle Standardversion handelt. Wenn Sie die Datei speichern, müssen Sie sie speichern und mit einem Punkt-HTML enden. Wir nennen unseren Dateiindex HTML. Nach der DOCTYPE-Deklaration können wir öffnende und schließende HTML-Tags hinzufügen. Alles, was zwischen diesen HTML-Tags steht, wird vom Browser als HTML-Code gelesen oder interpretiert. Als Nächstes verwenden wir das Head-Tag oder das Element. Dies enthält Metadaten, die Informationen über die Webseite für den Browser sind, und sie werden nicht auf der Seite selbst angezeigt. Im Kopf können wir dem Browser sagen, wo er andere Dateien finden kann, z. B. für das CSS und das JavaScript. Ein anderes Beispiel ist das Titel-Tag. Das Titel-Tag ist je nach Browser für Bildschirmleser und Suchmaschinen wichtig , dies wird in der Tab-Leiste angezeigt. Wir müssen hier einen nicht leeren Titel definieren. Als Nächstes fügen wir das Body-Tag hinzu. Nur die Elemente innerhalb der Körper-Tags werden auf dem Bildschirm angezeigt. 5. Hierarchie und Formatierung: Willkommen zurück. Bevor wir also weiter gehen, werde ich kurz über Hierarchie und Formatierung sprechen . Es ist wichtig, die Struktur oder die Hierarchie des HTML-Codes zu verstehen . Denn wenn Sie mit mehr HTML und auch CSS arbeiten, können diese Elemente Verhalten oder Stile voneinander erben . Wir können uns HTML vorstellen wie wir es tun, wenn wir uns einen Stammbaum ansehen. Also haben wir Eltern, Kinder, Geschwister, Großeltern und so weiter. Wenn wir ein Element innerhalb eines anderen Elements verschachteln, rufen wir das Element auf der Innenseite des Kindes und das Element an der Außenseite die Eltern auf. Zwei Elemente, wenn sie innerhalb des Elternteils verschachtelt sind, könnten diese als Geschwister bezeichnet werden. Bezug auf die Formatierung ignoriert HTML normalerweise Leerzeichen, aber es ist gut, sich mit Formatierungsmethoden zu befassen , um sicherzustellen, dass das Dokument lesbar ist. Es ist am besten, neue Tags auf ein neue Linie. Und alles innerhalb des Tags sollte um eine Ebene eingerückt werden. Normalerweise sind dies also zwei Leerzeichen. Es ist gut sicherzustellen , dass Ihr Texteditor ordnungsgemäß konfiguriert ist, um Leerzeichen anstelle von echten Tab-vier Leerzeichen zu verwenden Leerzeichen anstelle von echten Tab-vier Leerzeichen , die nicht ungewöhnlich sind, aber es kann die Arbeit des Inhalts etwas schwieriger machen mit weil es anfangen kann, vom Bildschirm zu fallen. 6. Überschriften: Jetzt haben wir unser Dokumenten-Setup. Wir können mit dem Hinzufügen einiger Elemente fortfahren. Wenn Sie ein Dokument lesen, hat das Dokument normalerweise eine Überschrift, die größer ist als der Rest des Textes auf dieser Seite. Dies ist in gedruckten Publikationen wie Zeitschriften sehr verbreitet . Überschriften in HTML funktionieren auf die gleiche Weise. In HTML gibt es sechs verschiedene Arten von Überschriften, und wir nennen sie Header. H1 ist der größte und sie werden allmählich kleiner, wenn Sie sich nach H6 hinunterarbeiten. Eine gute Möglichkeit, sich an Überschriften zu erinnern, ist H1 die Hauptüberschrift sein wird. Unterüberschrift wäre H2 ist auch wissenswert , dass die Standardgröße , in der der Browser die Überschrift anzeigt , je nach Browser geringfügig variiert, dies kann jedoch mithilfe von CSS in unserem dokument. Lass uns weitermachen und ein H1-Tag mit dem Text, unserem Sport, hinzufügen . Wir verwenden die öffnende Klammer H1 und schließen dann die Klammer und wir fügen die schließende Klammer hinzu, die der Klammer nach vorne H1 und die Klammer zwischen den beiden ist , wir fügen den Text hinzu sportarten. Als Nächstes fügen wir ein H2-Tag mit der Nachricht berühmte Athleten hinzu. Zuletzt fügen wir a3 h3-Tags hinzu. Gib diesen die Texte, Schwimmen, Laufen und Gymnastik. Speichern wir das und führen Sie den Code in unserem Browser aus. In unserem Browser wählen wir Datei öffnen aus und öffnen dann die HTML-Datei. Jetzt können wir die Seite sehen, die wir erstellt haben. 7. Absätze: In diesem Video werden wir uns mit dem Erstellen von Absätzen befassen. Um einen Absatz zu erstellen, schließen Sie den Text in Tags die P enthalten. Das Standardverhalten für mehrere Absätze besteht darin , dass der Absatz in einer neuen Zeile mit etwas Abstand hinzugefügt wird . Es gibt keine Begrenzung, wie lang oder kurz der Text innerhalb der p-Tags sein muss. Fügen wir drei Absatz-Tags hinzu, eine unter jeder der H3-Überschriften die wir im letzten Video erstellt haben. Im ersten sagen wir, dass ein berühmter Schwimmer EN gedacht ist. In der zweiten werden wir sagen, ein berühmter Läufer ist Usain Bolt. Und im dritten sagen wir, eine berühmte Turnerin ist Simone Biles. Speichern wir das und führen die Seite erneut aus. Wir können den Bildschirm einfach im Browser neu laden. Jetzt können wir sehen, dass die drei Absätze dem Bildschirm hinzugefügt wurden. Bevor wir weitermachen, lassen Sie uns zusammenfassen, was wir gerade gelernt haben. Wir können Überschriften mit Headern erstellen, die von H1 bis H6 liegen können. Wir können auch Text in Absatz-Tags platzieren, die den Buchstaben P im Tag verwendeten. 8. Inline- und Blockelemente: In HTML wird jedes Element entweder als Blockelement oder Inline-Element angezeigt. Wenn Sie sich vorstellen, dass Sie einen Ausflug in den Supermarkt als zur Insel unternehmen, nimmt der Supermarkt normalerweise den gesamten Platz des Bodens ein und wäre daher das Blockelement. Auf der anderen Seite, wenn ein Artikel in ein Regal in einem Supermarkt gestellt wird , passt er neben die anderen Gegenstände und nimmt nur so viel Platz ein, wie er benötigt. Daher ist dies wie ein Inline-Element. Wenn wir ein Element in HTML erstellen, das Element entweder an einer neuen Zeile repariert oder es erscheint innerhalb eines Inhalts. Wenn wir eine Überschrift erstellen, möchten wir, dass die Überschrift auffällt und eine Entität für sich allein ist, und sie erscheint in einer neuen Zeile. Das wäre also ein Blockelement. Wenn wir etwas Technologie stark machen, möchten wir den Fluss des Inhalts um den starken Text nicht unterbrechen und er erscheint nicht in einer neuen Zeile. Dies ist also ein Inline-Element. Header-Tags, Listen und Absatzelemente sind Beispiele für Blockelemente. Blockelemente nehmen die gesamte verfügbare Breite ein. Auf der anderen Seite beginnen Inline-Elemente nicht in einer neuen Zeile und der Fluss des Inhalts um das Element ändert sich nicht stark und am Tags sind ein Beispiel für Inline-Elemente wie die Bilder. Inline-Elemente nehmen nur so viel von der Breite ein, wie benötigt wird. 9. Attribute: Willkommen zurück. In diesem Video werden wir uns Attribute ansehen. Was sind Attribute? Attribute, lassen Sie uns einem Element zusätzliche Informationen hinzufügen. Wir fügen das Attribut dem öffnenden Tag hinzu. Beispiele für allgemeine Attribute, die wir verwenden können, sind Titel, ID, Klasse und Stil. Obwohl es andere gibt, die Hauptbenutzung eines Attributs oder zum Anwenden von Styling oder Informationen, wie sprachbezogene Informationen. Ein Attribut enthält zwei Teile , den Namen und den Wert. Diese sind durch ein Gleichheitszeichen getrennt und der Wert wird in doppelte Anführungszeichen gesetzt. Der Name ist der Attributname und sollte in Kleinbuchstaben vorliegen. Der Wert ist der Wert, den wir für das Attribut festlegen möchten . Und dies sollte in doppelte Anführungszeichen eingewickelt werden. Wir verwenden die ID-Attribute und fügen sie zu den Todesfällen hinzu, die wir im letzten Video erstellt haben. Das erste div verwendet den Wert-Header. Das zweite div verwendet den Wertinhalt. 10. Divs und Spannweiten: In HTML ist div die Abkürzung für Division. Dies stellt einen Container dar, der die Seite in Abschnitte unterteilt. Indem Sie ein div verwenden, können Sie die Elemente Ihres HTML-Codes gruppieren . Wenn Sie ein div verwenden, sieht der Benutzer keinen Unterschied auf der Seite, aber er ist sehr nützlich, wenn Sie später Stile zu Elementgruppen hinzufügen möchten , indem Sie ein div verwenden Sie können die Stile auf die Im ganzen Abschnitt auf einmal können Sie alles in ein Div einpacken, aber es empfiehlt sich, daran zu denken, die Elemente, die Sie innerhalb des Tages verschachteln, für eine bessere Lesbarkeit einzurücken die Elemente, die Sie innerhalb des Tages verschachteln . Im letzten Video habe ich Inline- und Blockelemente erwähnt. Ein div ist ein Blockelement, daher wird der Inhalt innerhalb des div in einer neuen Zeile platziert. Sie können eine Gruppe von Absätzen innerhalb eines Div umwickeln. Und derselbe Ansatz könnte auf Bilder oder Überschriften in HTML angewendet werden , wir können auch span verwenden. Eine Spanne wird normalerweise auf einige Inline-Inhalte angewendet und ist selbst ein Inline-Element. Es wird also nicht in einer neuen Zeile erscheinen und es wird nur so viel Platz einnehmen wie der Inhalt. Sie können zwei kleine Textstücke oder Bilder anwenden , bei denen Sie den umgebenden Inhalt nicht aufteilen möchten . Wenn Sie nur einen bestimmten Inhalt in derselben Zeile wie einige andere Texte ansprechen möchten, verwenden Sie am besten eine Spanne, wenn Sie Ihren Inhalt in Blöcke aufteilen möchten Verwenden Sie am besten ein div . Wir werden unserer Seite etwas Tiefe verleihen. Wir wickeln die H1- und H2-Tags in ein div ein. Wir werden dann auch alle H3-Tags in ein anderes div umwickeln . Speichern wir das und laden wir die Seite neu. Visuell hat sich nichts geändert, aber wenn wir später einige Stile auf einige Elementgruppen anwenden möchten , können wir dies jetzt viel einfacher machen. Zusammenfassend haben wir in HTML Block- und Inline-Elemente. Blockelemente erscheinen in einer neuen Zeile, während Inline-Elemente innerhalb des Inhalts erscheinen. Wir können Dips und Spannweiten verwenden, die sehr nützlich sind, wenn wir etwas Styling anwenden möchten. Divs sind Blockelemente und Spannweiten sind Inline-Elemente. 11. Stark: Willkommen zurück. Ich habe bereits erwähnt , dass stark und betont wird, für fett und kursiv geschriebenen Text verwendet zu werden. In diesem Video werden wir die Namen unserer berühmten Athleten auf unserer Seite erstellen , um starke Tags zu verwenden. Um dies zu tun, verschachteln wir die Tags und platzieren die starken Tags in die p-Tags um das Textstück, das wir stark verwenden möchten. Wenn wir Tags verschachteln, müssen wir sicherstellen, dass wir die Tags in umgekehrter Reihenfolge ihrer Erstellung schließen . Das letzte Tag, das erstellt wird, sollte also das erste Tag sein, das geschlossen wird. Beginnen wir also damit, starke Tags um den Text hinzuzufügen , der E und Thorp sagt. Wir werden dies auch im zweiten Absatz um den Text tun , auf dem Usain Bolt steht. Schließlich machen wir dies rund um die Texte, auf denen Simone Biles steht. Speichern wir das und wir laden die Seite neu im Browser. Jetzt können wir sehen, dass die Namen unserer Athleten mutiger erscheinen als der Rest der Texte in den Absätzen. 12. Em: Willkommen zurück. Im letzten Video haben wir starke Tags um die Namen der Athleten hinzugefügt , um den Text fett zu machen. In diesem Video schauen wir uns die EM-Tags an, was bedeutet, dass der Text hervorgehoben wird. Durch die Verwendung des EM-Tags können wir betonen, was bedeutet, dass der Text kursiv geschrieben wird. Diese Tags funktionieren ähnlich wie die starken Tags. Also platzieren wir sie in die Tags, die die Texte enthalten , die wir kursiv hervorheben möchten . Wir werden dies mit den Sportnamen tun , die in den h3-Headern eingeschlossen sind. Wir beginnen damit, innerhalb des h3-Tags zu formen. Wir fügen jetzt ein EM-Tag hinzu. Wir schließen die Tags in umgekehrter Reihenfolge, in der sie erstellt wurden. Gleich nach dem Ende des Wortes Schwimmen schließen wir das EM-Tag. Wir werden dies für die beiden anderen Sportarten, Laufen und Gymnastik, wiederholen . Speichern wir das und laden Sie die Seite erneut in unserem Browser. Jetzt können wir sehen, dass der Text für jeden Kopf schwimmen, laufen und Gymnastik hervorgehoben erscheint. Kursiv. 13. Unterlagen: Willkommen zurück. Wenn wir mit HTML arbeiten, ist ein anderes Element, das uns bei der Arbeit mit Text zur Verfügung steht , das zugrunde liegende Element. Das zugrunde liegende Element wird einen Text unterstreichen. Um das zugrunde liegende Element zu verwenden, verwenden wir die Tags mit dem Buchstaben U. Es gibt ein paar Vorbehalte mit diesem Element, auf die man achten muss. Um einige Texte in HTML zu unterstreichen, ist es besser, einen Stil in CSS über eine Eigenschaft namens Textdekoration anzuwenden , für die Sie den Wert festlegen, der dem zugrunde liegenden HTML-Element selbst zum Markieren verwendet werden soll ein paar Texte in irgendeiner Weise. Wenn es beispielsweise einen Rechtschreibfehler gab oder wenn Sie chinesische Texte verwenden, sollte das zugrunde liegende Element nicht allein aus Anzeigegründen ohne einen anderen gültigen Grund wie den Rechtschreibfehler verwendet werden allein aus Anzeigegründen ohne einen anderen gültigen Grund . Nur zu Demonstrationszwecken fügen wir das zugrunde liegende Element dem Wort Schwimmer, Läufer und Turner in jedem der p-Tags hinzu. Später werden wir dies noch einmal besuchen und es ordnungsgemäß mit CSS in unserem HTML implementieren . Im ersten Absatz um Trauma fügen wir das Tag hinzu. Du wirst das direkt nach dem Wort schließen. Wir werden diese Schritte für Läufer und Turner wiederholen. Speichern wir unseren HTML-Code und laden es erneut im Browser. Sie können jetzt sehen, dass der Text unterstrichen wurde, aber dies könnte leicht mit einem anklickbaren Link verwechselt werden. 14. Links: Willkommen zurück. In diesem Video schauen wir uns Links an, um einen Link zu einer Webseite hinzuzufügen, Sie verwenden das Ankerelement. Dies wird durch den Buchstaben a dargestellt. Zwischen den öffnenden und schließenden Tags haben wir den Text platziert, den der Benutzer sehen sollte , wenn er den Link innerhalb des öffnenden Tags drückt. Wir verwenden ein Attribut, um festzulegen, wo die Links sollten zu gehen. Dies kann entweder ein Pfad oder eine Adresse zu einer Datei auf Ihrem Computer oder auf einem Server sein. Normalerweise ist der Pfad für das Attribut für Links jedoch eine URL. Der Name für das Attribut ist H ref, und dies steht für Hyperlink-Referenz. Hyperlink ist ein Fachbegriff für einen Link. Wir können auch ein Zielattribut verwenden , das angibt, wo die Links geöffnet werden sollen. Das Standardverhalten ändert dieses Attribut nicht , dass es im aktuellen Fenster geöffnet wird. Wenn Sie den Wert ändern, um leer zu unterstreichen, wird er in einem neuen Fenster oder Tab in unserem HTML geöffnet Wir fügen drei Links hinzu, einen innerhalb jeder Sportart , zu der der Benutzer navigiert eine Wikipedia-Seite über diesen Sport. Beginnend unter dem Absatz zum Schwimmen verwenden wir das a-Tag, um Tags zum Öffnen und Schließen zu erstellen. Wir fügen den Linktext hinzu. Erfahre mehr über das Schwimmen. Innerhalb des Etiketts. Fügt das H-Ref-Attribut hinzu und fügt den Wikipedia-Link zum Schwimmen hinzu. Als Nächstes machen wir das Gleiche fürs Laufen. Wir fügen die a-Tags hinzu. Wir fügen den Linktext hinzu, erfahren Sie mehr über das Laufen. Dann fügen wir das H ref -Attribut hinzu und fügen den Wikipedia-Link zum Ausführen hinzu. Schließlich machen wir dasselbe noch einmal unter dem Absatz über Gymnastik. Wir fügen die a-Tags und dann den Linktext hinzu. Erfahre mehr über Gymnastik. Wir fügen das H-Ref-Attribut und dann den Wikipedia-Link für Gymnastik hinzu. Speichern wir das und wir laden die Seite neu in unserem Browser. Wenn ich den Link übernommen habe, erfahre mehr über Schwimmen. Ich werde jetzt zum Wikipedia-Link zum Schwimmen navigiert. Um zusammenzufassen, was wir in diesem Video gelernt haben, fügen wir Links mit dem Ankerelement hinzu, der Link, den der Benutzer sieht, wird als Text zwischen den öffnenden und schließenden Tags platziert . Wir verwenden ein H-Ref-Attribut , um den Speicherort für den Link festzulegen. Wenn Sie das Verhalten für das Öffnen des Links ändern möchten , sollten Sie das Zielattribut verwenden. 15. Bilder: Willkommen zurück. In diesem Video schauen wir uns an, Bilder zu unserer Seite hinzuzufügen. Um der Seite Bilder hinzuzufügen, verwenden wir das Bildelement. Dies sind die Buchstaben IMG innerhalb des Tags. Während die meisten Elemente in HTML erfordern, dass wir öffnende und schließende Tags verwenden müssen, ist das Bild-Tag ein sogenanntes selbstschließendes Tag oder manchmal als Void-Elemente bezeichnet . Dies liegt daran, dass wir es mit nur einem Tag implementieren. Der Grund dafür ist, dass es keinen Inhalt gibt zwischen dem öffnenden und schließenden Tag platziert werden muss . Möglicherweise sehen Sie einige Beispiele, die ein separates schließendes Tag verwenden. In HTML5 ist dies jedoch keine Notwendigkeit. Sie können sich vorstellen, Bilder hinzuzufügen, z. B. das Hinzufügen von Links, da wir ein Attribut mit dem Pfad des Bildes hinzufügen , das wir anzeigen möchten. Die Struktur des Tags selbst unterscheidet sich jedoch geringfügig. Um einen Pfad des Bildes festzulegen, das wir anzeigen möchten, verwenden wir ein Attribut namens source. Dies wird durch die Buchstaben S, RC dargestellt. Wir legen auch ein anderes Attribut fest, das dieses Attribut tanz für alternativen Text genannt wird . Und es sollte eine Beschreibung des Bildes enthalten , falls es nicht geladen wird, ist es auch für Zwecke der Barrierefreiheit sehr wichtig, alles auf Attribut zu setzen . Wenn zum Beispiel jemand, der sehbehindert ist , unsere Seite besucht hat, wird durch Verwendung des ALT-Attributs eine Beschreibung des Bildes von seinem Bildschirmlesegerät mit dem alt-Attribut gelesen werden auch sehr nützlich, wenn es um die Suchmaschinenoptimierung geht , da Suchmaschinen selbst die Bilder nicht sehen können, wenn Sie Ihrer Seite Bilder hinzufügen, können Sie einen direkten Link zu den Bild von woanders im Internet. Und das würde Hotlink-König genannt werden. Im Allgemeinen ist dies jedoch keine gute Praxis, da Sie jetzt auf eine andere Website angewiesen sind auf eine andere Website angewiesen und davon ausgehen, dass das Bild immer da sein wird, plötzlich kann sich dies viel mehr öffnen Möglichkeiten zum Auftreten von Fehlern. Also fügen wir unserer Seite ein Bild , das unter die Überschrift unseren Sport geht. Sie können hier gerne jedes Bild verwenden, aber ich werde eines von der Website pixabay verwenden. Innerhalb des Verzeichnisses Ihrer Datei index.html müssen Sie einen neuen Ordner namens images erstellen. Als Nächstes müssen Sie das Bild von der Pixabay-Website auf Ihren Computer herunterladen der Pixabay-Website auf und in dieses Verzeichnis kopieren . Sobald dies erledigt ist, sollten Sie in der Lage sein, das Bild in Ihrem Texteditor zu sehen . Jetzt, wenn wir das Image verwenden, weil es Teil desselben Projekts ist wie die Datei index.html. Wir können den relativen Pfad verwenden, und dieser wird automatisch auf den vollständigen Pfad im HTML-Code unter der Kopfzeile interpretiert . Fügen wir jetzt das Bild hinzu. Also verwenden wir zunächst die Buchstaben IMG innerhalb des Tags. Als Nächstes fügen wir das Quellattribut hinzu. Also fügen wir die Buchstaben SRC hinzu, gefolgt vom Gleichheitszeichen. Und für den Wert platzieren wir den Bildpfad. nun für das Attribut alternativer Texte wir nun für das Attribut alternativer Texte einen Wert hinzu. Wir sagen ein Sportstadion. Weil dies eine Beschreibung dessen ist , was das Bild darstellt. Speichern wir das jetzt und laden Sie die Seite in unserem Browser neu. Jetzt können wir sehen, dass das Bild erfolgreich zu unserem Bildschirm hinzugefügt wurde. 16. Listen: Willkommen zurück. In diesem Video schauen wir uns Listen in HTML an. Wenn Sie mit HTML arbeiten, haben Sie einige Optionen, wie Sie Ihren Text anzeigen möchten. Wir haben bereits gesehen, wie das Absatzelement verwendet wird, aber es kann vorkommen, dass Sie einige Texte haben, die Sie als Liste in HTML anzeigen möchten , es gibt zwei Arten von Listen. Wir können geordnete Listen und ungeordnete Listen verwenden. Sortierte Listen werden durch ein Tag mit den Buchstaben O, L dargestellt, und ungeordnete Listen werden durch ein Tag mit den Buchstaben UL dargestellt. Bei beiden werden die Elemente in der Liste als Listenelemente bezeichnet, und diese werden durch ein Tag mit den Buchstaben LI dargestellt. Standardmäßig wird der Browser die Listen und geordneten Listen einrücken . Geordnete Listen zeigen die Listenelemente mit Zahlen an. Wenn Sie also eine Liste haben , die Schritte oder Ergebnisse oder eine Art von Element darstellt Ergebnisse oder eine Art von , das in einer Sequenz angezeigt werden muss, kann dies sehr nützlich sein. der anderen Seite verwenden ungeordnete Listen Aufzählungspunkte, um die Listenelemente anzuzeigen, und diese können über CSS gestaltet werden. Ungeordnete Listen können auch für die Site-Navigation nützlich sein. Eine Sache, die Sie beim Erstellen einer Liste beachten sollten , ist, dass die geordnete Liste oder das ungeordnete Listenelement eher einem Container für die Liste ähnelt. Die Texte mit den Listenelementen sollten in das Listenelement-Tag eingeschlossen werden. Auf unserer Seite fügen wir also eine Liste hinzu. Wir müssen dafür keine geordnete Liste verwenden da in einer bestimmten Reihenfolge nichts angezeigt werden kann. Aber wir werden dies zuerst mit einer geordneten Liste implementieren und dann mit einer ungeordneten Liste erneut implementiert. Beginnen wir damit, das geordnete Listenelement hinzuzufügen. Also erstellen wir öffnende und schließende Tags mit den Buchstaben OL. Wir haben drei Sportarten, wir möchten, dass unsere Liste Schwimmen, Laufen und Gymnastik enthält . Fügen wir also Listenelemente für jeden dieser Elemente hinzu, wir verwenden die Buchstaben LI innerhalb der Tags für die Listenelemente. Wählen Sie, Erstellen Sie drei davon. Im ersten Listenelement fügen wir den Text für mich hinzu. In der zweiten läuft. Die dritte Gymnastik. Speichern wir das und laden wir die Seite erneut im Browser. Jetzt können wir unsere Liste sehen und jeder Artikel in der Liste hat eine Nummer daneben, da wir eine geordnete Liste verwenden. Lassen Sie uns dies ändern, um die ungeordnete Liste zu verwenden, da die Listenelemente nicht in irgendeiner Reihenfolge innerhalb der OL-Tags sein müssen . Wir werden diese ändern, um UL zu verwenden. Dies ist eigentlich alles, was wir ändern müssen, da die Listenelemente selbst für beide Arten von Listen identisch sind. Diesmal können wir unsere Liste erneut sehen, aber die Listenelemente verwenden Aufzählungspunkte, da wir die ungeordnete Liste verwenden. Lassen Sie uns zusammenfassen, was wir gerade gelernt haben. Wir können Listen in HTML mit OL für geordnete Liste oder UL für ungeordnete Liste erstellen , wir stellen die Elemente in der Liste mit dem LI-Tag dar. Sortierte Listen sind nützlich, um Elemente in einer Sequenz anzuzeigen und Zahlen, ungeordnete Listen und Aufzählungspunkte zu verwenden. 17. Stil: Willkommen zurück. In diesem Video werden wir die Verwendung von Stilen in HTML vorstellen. Dies ist ein HTML-Kurs, daher werden wir nicht tief in dieses Thema eintauchen, aber es ist immer noch unglaublich nützlich, die Grundlagen zu kennen. Wenn wir der Webseite Stile hinzufügen möchten, müssen wir CSS verwenden. Css steht für Cascading Style Sheets und ist eine Stylingsprache. Es gibt drei Optionen, wie CSS für den Prozentsatz verwendet werden kann, wir können externes CSS verwenden. Internes CSS, Inline-CSS. Externes CSS bedeutet , dass wir die Stile aus einer anderen Datei importieren , die extern gespeichert wurde. Internes CSS bedeutet, dass die Stile innerhalb des Style-Elements in derselben Datei gespeichert werden . Inline-CSS bedeutet, dass wir ein Style-Attribut direkt für die einzelnen Elemente verwenden , auf die wir Stile anwenden möchten. Wenn Sie nur ein paar Stile anwenden möchten , ist Inline-CSS in Ordnung, aber es ist normalerweise sauberer, die Stile vom HTML isoliert zu halten . Wenn mehr als eine Person an der Webseite arbeitet, sollten Sie dies auf jeden Fall in Betracht ziehen. Und auf lange Sicht ist ein externes Stylesheet in der Regel ein wartbarerer Ansatz. Ein weiterer Vorteil, wenn Sie keine Inline-Stile verwenden , besteht darin, dass Sie eine Stilregel erstellen können, diese jedoch auf mehrere Elemente anwenden können. Dies bedeutet weniger Tippen und Duplizieren. Wir werden uns zunächst Inline-Styles ansehen. Dies bedeutet, dass wir die Stile durch ein Style-Attribut direkt in die HTML-Elemente eingefügt haben. Wir verwenden das Stilattribut gefolgt von einem Gleichheitszeichen, und dann ersetzten Anführungszeichen innerhalb der Anführungszeichen den Stil oder die Stile, die wir auf das Element anwenden möchten. Wenn Sie die Stile deklarieren, verwenden Sie den Eigenschaftsnamen und dann den Wert. Und du trennst diese durch einen Doppelpunkt. Wenn Sie mehrere Stile verwenden möchten, platzieren Sie ein Semikolon am Ende jeder Kachel. Regel ist es jedoch gut, nur das Semikolon nach dem Stil hinzuzufügen , damit wir später weitere Stile hinzufügen können , ohne zu riskieren, dass Fehler entstehen. Das erste, was wir auf unserer Seite mit Stilen tun werden, ist, das falsche Nutzungselement zu entfernen das falsche Nutzungselement , das wir in einem früheren Video implementiert haben. Da wir den Text nur zu Anzeigezwecken unterstreichen möchten . Dies mit dem zugrunde liegenden Element zu tun ist nicht der richtige Weg , dies zu erreichen. Stattdessen verwenden wir eine Eigenschaft namens Textdekoration. Mit dieser Eigenschaft können Sie dem Text etwas Dekoration hinzufügen damit Sie eine Zeile durch den Text über den Text legen können, unter dem Text befindet sich sowohl unter als auch über dem Text. In unserem Fall möchten wir eine Zeile durch den Text platzieren , damit wir diese Eigenschaft unterstreichen können. Lasst uns weitermachen und das umsetzen. Wir werden damit beginnen, das zugrunde liegende Element in eine Spanne zu ändern . Dies bedeutet, dass wir den Inline-Inhalt anvisieren können ohne Stile auf den umgebenden Inhalt anzuwenden. Als Nächstes fügen wir das Stilattribut hinzu, gefolgt von einem Gleichheitszeichen und dann einige Anführungszeichen. Innerhalb der Anführungszeichen fügen wir die Textdekorationseigenschaft, einen Doppelpunkt und dann für den Wert zugrunde liegende Wert hinzu. Wir fügen auch ein Semikolon hinzu. Wiederholen wir diese Schritte für die beiden anderen unterstrichenen Elemente. Speichern wir das und laden Sie die Seite in unserem Browser neu, wir sehen den zugrunde liegenden Text. Dieses Mal haben wir dies jedoch korrekt implementiert, indem Stile im Gegensatz zur Verwendung des zugrunde liegenden Elements verwendet haben. 18. Mehr Stile: Willkommen zurück. Nachdem wir unseren ersten Stil implementiert haben, werden wir diesen umgestalten, um ein internes Stylesheet und später ein externes Stylesheet zu verwenden ein internes Stylesheet und später . Zur Erinnerung: In einem internen Stylesheet verwenden wir das Stileelement in unserem Dokument und ersetzen alle Stile für unser Dokument in diesem Element mithilfe von CSS-Klassenselektoren. Css-Klassenselektoren bieten uns die Möglichkeit, unsere Stile zu beschriften. Und wir legen einen Punkt vor dem, was wir den Stil beschriften, und nach dem Etikett platzieren wir eine Reihe geschweifter Klammern. Css-Klassen bedeuten auch, dass wir mehr als einem Element die gleichen Stile geben können. Sie müssen die Stile also nicht jedes Mal aufschreiben , wenn Sie sie verwenden möchten. Wir fügen dann das Klassenattribut dem Element hinzu, auf das die Stile angewendet werden soll. Und wir verwenden den Klassennamen als Wert für das Attribut. Da es sich um ein Attribut handelt, trennen wir den Namen und den Wert durch ein Gleichheitszeichen und der Wert wird in Anführungszeichen gesetzt. Gehen wir also zurück zu unserem HTML und implementieren dies auf unserer Seite. Lassen Sie uns den Inline-Stil, den wir für die Textdekoration erstellt haben, in ein internes Stylesheet verschieben . Auf unserer Seite unter dem Titelelement fügen wir das Style-Element hinzu. Wir tun dies mit dem Öffnen und Schließen von Tags mit dem Textstil. nun im Stileelement den Stil hinzu, Fügen wir nun im Stileelement den Stil hinzu, den wir in einer Klasse verwenden möchten, die als zugrunde liegender Text bezeichnet wird. Wir verwenden einen Punkt gefolgt von dem Namen unterstrichenen Text, gefolgt von dem Öffnen und Schließen von geschweiften Klammern. Innerhalb der geschweiften Klammern fügen wir die Stile hinzu. In unserem Fall möchten wir also Textdekoration unterstreichen. Jetzt müssen wir dem Element eine Klasse hinzufügen. Entfernt die Inline-Stile. Und wir ersetzen dies durch den Klassennamen. Wir sagen, dass Klasse gleich ist, und verwenden dann Anführungszeichen. Innerhalb der Anführungszeichen fügen wir den Klassennamen hinzu. Speichern wir das und laden Sie die Seite und unseren Browser neu. Die Seite sieht immer noch genauso aus wie bei der Verwendung von Inline-Styles. Wenn wir nun noch einen Schritt weiter gehen wollten, könnten wir diese Stile in ein externes Stylesheet extrahieren . Wir erstellen zunächst ein neues Verzeichnis zum Speichern der CSS-Datei. Innerhalb des Verzeichnisses wird eine Datei namens main.css erstellt. Verschieben wir nun die Stile aus dem Style-Element in unserer HTML-Datei in unsere Datei main.css. Wir können dann die Stileelemente aus dem HTML-Dokument entfernen . Wie importieren wir diese CSS-Datei in unsere HTML-Datei? Nun, in HTML können wir ein Element verwenden, das als Link-Element bezeichnet wird. Mit dem link-Element können Sie die Beziehung zwischen der aktuellen Datei und einer anderen Ressource von außerhalb der Datei deklarieren der aktuellen Datei und , wir verwenden ein Attribut namens „Beziehung“, das dargestellt wird durch die Textzeile. Dies gibt die Beziehung zwischen der aktuellen Datei und der Datei an, die wir verknüpfen werden. Wir müssen auch ein H-Ref-Attribut verwenden , um den Speicherort für die Datei hinzuzufügen, die wir verknüpfen möchten. Link zeigt nichts direkt an, daher müssen wir nur ein einzelnes Tag innerhalb des Tags verwenden. Fügen wir das Bahn-Attribut hinzu. Dann setzen wir dies auf das Text-Stylesheet , da dies die Beziehung ist. Als Nächstes fügen wir das HREF-Attribut und dann den Speicherort der CSS-Datei hinzu. In unserem Fall ist dies CSS Slash main.css, da die Datei main.css jetzt im CSS-Verzeichnis gespeichert ist. Jetzt speichern wir die Datei und laden sie erneut in unseren Browser. Auch hier hat sich aus der Benutzersicht nichts visuell geändert , aber das CSS wird jetzt aus einer externen Datei importiert. 19. Zusätzliche Stile: Willkommen zurück. Jetzt haben wir uns mit Stylesheets vertraut gemacht. Wir werden unserem Dokument noch ein paar Stile hinzufügen. Das erste, was wir tun werden, ist, dass die ganze Seite eine Hintergrundfarbe von Hellblau verwendet. Und wir werden auch den gesamten Text zentrieren. Also fügen wir dem Body-Tag eine Klasse hinzu, die als Haupthintergrund bezeichnet wird. nun in der CSS-Datei wir nun in der CSS-Datei die Klasse hinzu. Und dann setzen wir die Hintergrundfarbe auf hellblau und in der Mitte text-ausrichten. Als Nächstes machen wir unseren H1-Header in Navy, also sticht er ein bisschen mehr hervor. Also fügen wir dem H1-Element einen Preis hinzu, der als Überschrift bezeichnet wird. In der CSS-Datei fügen wir die Klasse hinzu und setzen die Farbe auf Navy. Als Nächstes möchten wir sicherstellen, dass unser Bild zentriert wird. Also fügen wir dem Bildelement eine Klasse hinzu, die als image bezeichnet wird. Dann fügen wir dies der CSS-Datei hinzu. Im CSS stellen wir die Anzeige so ein, dass margin-left, auto blockiert wird. Margin-rechts, automatische Breite auf 50%. Verwenden von margin auto weniger zentrieren Sie ein Blockelement horizontal. Jetzt fügen wir unserer Liste einige zusätzliche Stile hinzu, damit sie auch zentriert werden. Wir fügen eine Klasse mit dem Namen UL-Styles hinzu. In der CSS-Datei. Wir fügen diese Klasse hinzu. Ich bin auf Inline-Block eingestellt. Dies bedeutet, dass das Element als Inline-Element behandelt wird . Es gibt also keine neue Zeile erzwingen, und sie nimmt nur so viel Breite wie nötig ein, sondern richtet den Text auch nach links so aus, dass er neben den Aufzählungspunkten erscheint. Jetzt speichern wir unsere Datei und laden sie neu ein. Der Browser. Seite hat sich geändert und wir erhalten alle Stile, die wir gerade angewendet haben, auf dem Bildschirm angezeigt. 20. Tabellen: Willkommen zurück. In diesem Video werden wir uns die Verwendung von Tabellen in HTML ansehen. Manchmal haben Sie, wenn Sie mit HTML arbeiten, einige Daten, die Sie in einer Tabelle anzeigen möchten. Ein Beispiel könnten einige Ergebnisergebnisse sein. Dies könnte auch nützlich sein wenn Sie eine Seite haben, auf der einige finanzielle Details in HTML angezeigt werden sollen einige finanzielle Details in HTML angezeigt Tabellen werden durch das Tabellenelement dargestellt. Dies ist das Öffnen und Schließen von Tags mit der Steuertabelle. Jede Zeile innerhalb der Tabelle wird durch das Tabellenzeilenelement dargestellt. Und das sind die öffnenden und schließenden Tags mit dem Text T normalerweise wenn Sie eine Tabelle in der ersten Zeile erstellen, verwenden Sie Überschriften für die Spalten. Und das können wir in HTML mit dem Tabellenheaderelement machen. Um dies zu verwenden, verwenden wir die öffnenden und schließenden Tags mit den Buchstaben TH in den Tabellenkopfzeilen. Wir können auch ein Bereichsattribut festlegen, was sehr nützlich ist, wenn jemand mit einem Bildschirmleser die Website besucht. In diesem Attribut legen wir fest, wann der Wert eine Zeile oder Spalte ist. Bei all dem haben Sie eine Tabelle eingerichtet, aber keine Daten in der Tabelle. Um Daten zur Tabelle hinzuzufügen, verwenden wir die Tabellendatenelemente. Dies ist das Öffnen und Schließen von Tags mit den Buchstaben t, d. Wenn Sie die Tabellendaten über mehrere Zeilen oder Spalten erstrecken müssen , können Sie die Zeilenspan- oder Colspan-Attribute verwenden. Und Sie legen eine Zahl für den Wert fest, die angibt wie viele Zeilen oder Spalten die Daten sich jedoch erstrecken sollten. Lassen Sie uns also eine Tabelle in unsere Datei implementieren. Wir werden eine Tabelle hinzufügen, die die Gesamtzahl der Medaillen, die jeder unserer Athleten bei den Olympischen Spielen, an denen er teilgenommen hat, anzeigt jeder unserer Athleten bei . Wir werden eine Tabelle vor den h3-Headern mit den Sportarten hinzufügen . Beginnen wir damit, das Tabellenelement hinzuzufügen. Wir fügen Öffnungs- und Schließungs-Tags mit der Steuertabelle hinzu. Unsere Tabelle wird zwei Spalten haben, eine für den Namen der Athleten und eine für die Gesamtzahl der Medaillenzahlen. Angesichts dessen möchten wir unserer Tabelle zwei Header hinzufügen. Um die Header zu unserer Tabelle hinzuzufügen, müssen wir zunächst eine Zeile hinzufügen, die die Header enthält. Wir fügen die öffnenden und schließenden Tags mit den Buchstaben TR hinzu. Innerhalb dieser Tags können wir die Header hinzufügen. Also fügen wir das Tabellenkopfelement mit Tags mit den Buchstaben TH hinzu. Wir werden zwei davon hinzufügen. Da diese Kopfzeilen der Spalten das Scope-Attribut mit einem Wert festlegen , der in jedem der Elemente aufgerufen wird. In der ersten Kopfzeile fügen wir den Textsportler hinzu. Und in der zweiten Kopfzeile fügen wir die Textmedaillen hinzu. Bevor wir weiter gehen, speichern wir das und schauen uns mal an. Was wir bisher im Browser gemacht haben. Was wir sehen, sind unsere beiden Überschriften weil wir keine Daten hinzugefügt haben, aber wir sind auf dem Weg, unsere erste Tabelle zu erstellen. Jetzt lasst uns fortfahren und einige Daten zu unserer Tabelle hinzufügen. Erstens, die erste Reihe, werden wir hinzufügen wie viele Medaillen, die Thorpe sind, eine ist. Also beginnen wir damit, eine Zeile zu erstellen. Als nächstes müssen wir zwei Datenzellen hinzufügen, eine für den Namen und eine für die Metallsumme. Wir tun dies mit den Tabellendatenelementen. Also erstellen wir öffnende und schließende Tags mit den Buchstaben td. In der ersten fügen wir die Textinformationen hinzu. In der zweiten addieren wir die Medaillenzahl um neun. Jetzt müssen wir diese Schritte für die beiden anderen Athleten erneut wiederholen . Beginnen wir damit, eine weitere Zeile hinzuzufügen. Jetzt müssen wir zwei weitere Tabellendatenelemente hinzufügen. Im ersten fügen wir den Text Usain Bolt hinzu, und dann fügt der zweite acht für die mittlere Zählung hinzu. Schließlich müssen wir eine letzte Tabellenzeile und zwei weitere Tabellendatenelemente hinzufügen . Im ersten fügen wir den Text Simone Biles hinzu, und innerhalb des zweiten werden sieben die Tabellendaten hinzugefügt. Speichern wir unsere Datei und laden sie erneut im Browser. Wir können jetzt unsere Tabelle mit all unseren Daten sehen. Es ist jedoch nicht sehr auf den Rest der Seite ausgerichtet. Fügen wir also ein paar Stile innerhalb des Tabellenelements hinzu. Wir werden ein Klassenattribut mit der Wert-Athletentabelle hinzufügen . jetzt in unserer CSS-Datei wir jetzt in unserer CSS-Datei diese Klasse hinzu. In der Klasse legen wir die Breite auf 22,5 Prozent fest. Margin-links-Auto, Margin-Rechts-Auto. Und lassen Sie uns der Tabelle eine Hintergrundfarbe von Grün geben. Lasst uns alles noch einmal speichern und die Seite neu laden. Dieses Mal ist unser Tisch zentriert und hat eine eigene Hintergrundfarbe. 21. Formulare einstellen: Willkommen zurück. In diesem Video werden wir in unserem täglichen Leben Formulare in HTML einführen , oft füllen wir Formulare aus, wenn wir einige Informationen für einen bestimmten Zweck teilen müssen . Vielleicht haben wir an einem Gesundheitstermin teilgenommen oder vielleicht haben wir uns um einen Job beworben. Aber manchmal verwenden wir einfach ein Formular, um einige Artikel auszuwählen, die wir kaufen möchten. Normalerweise ist ein Formular eine Art Dokument mit Leerzeichen, die Sie mit Ihren Details ausfüllen oder eine Auswahl in HTML treffen . Formulare funktionieren ähnlich wie die Papierformen. Wir können das Formularelement verwenden, um Informationen von Personen zu sammeln , die unsere Webseite besuchen. Manchmal, wenn wir eine Webseite besuchen, die nur ein Texteingabefeld wie die Google-Suche verwendet. Wir verwenden tatsächlich ein Formular, um ein Formular in HTML zu verwenden, wir verwenden das Formularelement, das die Textform innerhalb der Steuer ist. Beginnen wir damit, unserer Seite ein Formular hinzuzufügen. Wir machen das vor dem schließenden Body-Tag. Wir verwenden das Tag mit dem Textform. Und dann schließen wir es. Wir können etwas Text innerhalb des Formulars hinzufügen, genau wie auf dem Rest der Seite mit Überschriften oder Absätzen Fügen wir einen Titel für das Formular innerhalb von H1-Tags hinzu. Wir nennen es Fragen. Formular. Es ist nicht sehr sinnvoll, es sei denn der Benutzer kann tatsächlich einige Daten eingeben. Wir verwenden Eingabefelder in unserem Formular unter Verwendung des Eingabeelements. Innerhalb des Eingabeelements können wir ein Typattribut festlegen, das festlegt wie das Eingabefeld auf der Webseite angezeigt wird. Und es legt auch den Typ der Daten fest, die der Benutzer eingeben kann. Standardmäßig ist das type-Attribut auf Text festgelegt , damit der Benutzer Text eingeben kann. Wir könnten dies in ein Passwort ändern, wenn wir möchten, dass der Benutzer ein verstecktes Passwort oder eine versteckte Nummer eingibt Wenn wir damit einige Zahlen hinzufügen möchten, können wir ein Texteingabefeld mit dem value-Attribut vorausfüllen . Wir müssen auch ein Namensattribut verwenden. Das name-Attribut wird mit dem Wert gekoppelt beim Absenden des Formulars in die Eingabe eingegeben wird. Wenn wir zum Beispiel ein Eingabefeld mit dem Namen zuerst hätten und der Benutzer in ihren Namen eingegeben hätte, Fred war, wenn das Formular gesendet wurde, würde zuerst Thread auf unserer Seite gleich sein. Fügen wir unserem Formular eine Eingabe hinzu. Wir verwenden zunächst die Tags mit dem Eingabeelement. Wir werden unseren Benutzer bitten, seine Lieblingssportarten einzugeben. Also legen wir fest, dass der Typ Text ist, der Name als Frage. Wir legen auch eine ID mit Favorite fest. Um eine Eingabe zu beschriften, verwenden wir das Label-Element. Dies hilft dem Benutzer zu identifizieren, was die Eingabe für das Labelelement verwendet öffnende und schließende Tags und der Text für das Etikett wird zwischen den Tags platziert , damit das Etikett korrekt mit Bei der richtigen Eingabe müssen wir ein ID-Attribut für die Eingabe festlegen, und dann wird ein Attribut leisten mit demselben Wert auf dem Label festgelegt. Fügen wir der gerade hinzugefügten Eingabe ein Label hinzu. Also verwenden wir öffnende, schließende Tags mit Etikett. Wir haben die ID der Eingabe festgelegt, die Favorit war. Und zwischen den Tags sagen wir, was ist dein Lieblingssport? Wenn wir unseren Benutzern mehrere Optionen präsentieren und ihnen erlauben wollten , eine beliebige Anzahl von Optionen auszuwählen. Wir könnten das Eingabeelement verwenden und es auf das Kontrollkästchen Typ setzen. Wir fügen unserem Formular eine Reihe von Kontrollkästchen hinzu, um unseren Benutzer zu bitten , seine Lieblingssportler auszuwählen, indem wir zunächst das Absatzelement mit dem Text verwenden Ihre Lieblingssportler auswählen. Als Nächstes fügen wir drei Kontrollkästchen hinzu, eines für jeden unserer Athleten. Wir verwenden zunächst das Label-Element und wir setzen auf zwei. Thorpe wird den Text auch in Thorpe hinzufügen. Als Nächstes fügen wir die Eingabe hinzu. Wir setzen id auf denselben Wert wie das for-Attribut in der Bezeichnung, das ist der Name des Athleten, Typ, in das Kontrollkästchen und der Wert für das ist der Name des Athleten, Thorpe. Wiederholen wir diese Schritte noch einmal für unsere anderen Athleten. Also verwenden wir das Label-Element. Und dieses Mal haben wir für zwei Boote gesessen. Fügt auch den Text Usain Bolt hinzu. Als Nächstes fügen wir die Eingabe hinzu. Wir sagten ID auf den gleichen Wert wie das for-Attribut in der Beschriftung, bei der es sich um Boot handelt. Verschiebt diesen Namen auf Athlet, Typ, Kontrollkästchen und Wert, um abzustimmen. Zuletzt machen wir das nochmal für Simone Biles. Also benutzen wir das Labelelement und wir haben uns für zwei Biles gesessen. Wird auch die Texte hinzufügen Simone Biles. Als Nächstes fügen wir die Eingabe hinzu. Also legen wir die ID auf denselben Wert wie das for-Attribut in der Bezeichnung fest, bei dem es sich um Bibeln handelt. Dann setzen wir den Namen auf Athlet, Typ, Chatbox und Wert, um Häuser zu kaufen. Fügen wir auch einen Zeilenumbruch zwischen jedem der Kontrollkästchen hinzu, damit jedes Kontrollkästchen in einer neuen Zeile angezeigt wird . Um dies zu tun, verwenden wir das Zeilenumbruchelement, das die Buchstaben BR innerhalb des Tags sind. Wir müssen nur ein einziges Tag für Zeilenumbrüche verwenden. Jetzt speichern wir dies und laden die Seite neu und unser Browser oder Formular nimmt Gestalt an. Ändern wir jedoch kurz die Reihenfolge der ersten Eingabe und Beschriftung, damit das Label vor dem Eingabefeld erscheint. Also wieder in unserem Code wird die Beschriftung für das Eingabeelement platziert . Wir speichern das und laden die Seite erneut. Dieses Mal sehen wir, dass das Label vor dem Feld erscheint. 22. Form: Willkommen zurück. Im letzten Video haben wir Formulare in HTML eingeführt. Am Ende des Videos haben wir unserem Formular einige Kontrollkästchen hinzugefügt. Dies ist großartig, wenn es uns nichts ausmacht wie viele Optionen der Benutzer auswählt, aber wenn wir nur möchten , dass er ein Element auswählt , kann ein Optionsfeld geeigneter sein. In diesem Video fügen wir unserem Formular ein Optionsfeld hinzu, in dem der Benutzer gefragt wird, ob ihm unsere Website gefallen hat, und ihm die Möglichkeit gibt, Ja oder Nein auszuwählen , um ein Optionsfeld zu erstellen wir verwenden die Eingabe - und Labelelemente, genau wie beim Erstellen der Checkboxen. Diesmal setzen wir jedoch das type-Attribut für das Eingabeelement auf radio. Gehen wir zurück zu unserer Seite und implementieren dies. Also fügen wir zunächst Text in p-Tags hinzu , um den Benutzer zu fragen, ob ihm unsere Website gefallen hat. Jetzt fügen wir die beiden Optionsfelder hinzu. Also fügen wir das Eingabeelement mit dem auf Radio oder DTS festgelegten Typ hinzu. Name für Frage und Wert. Ja. Jetzt erstellen wir für das Labelelement das Label mit den Label-Tags. Und zwischen den Tags fügen wir den Text hinzu, ja. Wir setzen das for-Attribut auch auf yes, da dies die ID des Eingabeelements ist. Wiederholen wir diese Schritte noch einmal, aber diesmal für die Option „Keine“. Also fügen wir das Eingabeelement mit dem Typ hinzu, der auf Radio eingestellt , Musette ID zu wissen , Name, Frage und Wert zu wissen. Jetzt erstellen wir für das Labelelement das Label mit den Label-Tags. Und zwischen den Tags fügen wir die Texte hinzu, nein. Wir setzen auch das for -Attribut so ein, dass es sich um die ID des Eingabeelements handelt. Speichern wir das und laden die Seite und unseren Browser erneut. Wir können jetzt sehen, dass unsere Optionsfelder der Seite hinzugefügt wurden , damit der Benutzer Ja oder Nein auswählen kann. 23. Formular einreichen: Willkommen zurück. Im Computing senden und empfangen Computer Informationen mithilfe von HTTP-Anfragen. Wenn Sie das Internet als Netzwerk von Computern betrachten, kann der Client, der normalerweise der Browser ist , eine Anfrage an einen Server senden, eine Anfrage an einen Server senden und wenn dies der Fall ist, verwendet er das HTTP-Protokoll. Dies ist im Wesentlichen eine Reihe von Regeln oder Verfahren für das Senden von Daten. Der Server wird dann auf irgendeine Weise mit demselben HTTP-Protokoll antworten . Wenn wir ein Formular verwendet haben, stellt der Benutzer einige Informationen zur die dann an den Server innerhalb der HTTP-Anfrage geliefert werden , um die Möglichkeit zu erfüllen, die Formulardaten an einen Server zu senden wir müssen die Formularelemente und Attribute abrufen , wohin die Informationen aus dem Formular gesendet werden sollen und welche Art von HTTP-Anfragen zu stellen sind. Dazu verwenden wir das Aktionsattribut, um anzugeben, wohin die Informationen gesendet werden, und dann ein Methodenattribut für den Typ der Anforderung. Und das kann GET oder post sein. Wenn Sie jedoch sensible Daten verwenden, sollten Sie Post hier verwenden, wir setzen die Aktion auf eine Dummy-URL in unserem Formular, die wir Dummy-HTML nennen, um diese Seite zu erstellen. Jetzt. Wir lassen es leer, da dies ausschließlich zu Anzeigezwecken dient. Wir verwenden dann die Post-Methode. Um das verlorene Formular abschicken zu können, müssen wir unserer Seite eine Schaltfläche zum Absenden hinzufügen. Um dies zu tun, verwenden wir das Eingabeelement mit dem Attribut type, das gesendet werden soll. Wir legen dann den Wert auf die Texte fest, die auf dem Button angezeigt werden sollen. Wenn wir dieses Wertattribut nicht festlegen, wird es standardmäßig gesendet. Lassen Sie uns also unser Formular abschließen, indem Sie die Schaltfläche „Senden“ hinzufügen, tun Sie dies am Ende des Formulars. Also verwenden wir das Eingabeelement. Wir legen den Typ zum Einreichen fest. Wir legen auch den Wert fest, der abgeschlossen werden soll. Jetzt speichern wir das und laden die Seite im Browser neu. Wir haben jetzt unser Formular neben dem Rest unserer Seite ausgefüllt. Füllen wir nun das Formular einiger Werte aus. Lasst uns weitermachen und die Schaltfläche „Absenden“ drücken. Wir werden zur Dummy-Punkt-HTML-Seite navigiert , die leer war. Wir können jedoch die Entwicklertools in unserem Browser öffnen . In Chrome greifen wir darauf zu, indem wir JavaScript-Konsole für Entwickler anzeigen auswählen . Wir gehen dann auf den Tab mit der Aufschrift „Netzwerk“. Gehen wir also zurück zu unserer Seite und reichen das Formular erneut ein. Jetzt können wir die Anfrage überprüfen und die gesendeten Formulardaten sehen. Hätten wir get als Methode verwendet, wären die übermittelten Formulardaten in der Datei-URL auf dem Bildschirm sichtbar , weshalb dies für sensible Daten nicht vorgeschlagen wird.