HTML-Programmierung für alle

1. HTML Jeder Promo: In Ordnung. Willkommen auf dem Kurs. Mein Name ist John Elder von Cody me dot com und ich werde heute Ihr Lehrer sein und diesen Kurs werde ich Ihnen HTML-Codierung von Grund auf beibringen. Wenn Sie fertig sind, werden Sie in der Lage sein zu lesen, schreiben und zu verstehen. HTML. Der grundlegende Baustein jeder einzelnen Website im Internet in der ersten Kurshälfte wird lernen. HTML. Ich werde Ihnen die HTML-Syntax beibringen und alle wichtigen Element-Tags in ihren Attributen in der zweiten Hälfte des Kurses lernen, das Bootstrap-CSS-Framework zu verwenden, um zu stylen oder Webseiten und machen sie toll aussehen. Also, wenn Sie schon immer Websites erstellen wollten, ist dies der Kurs für Sie. Wenn Sie wenig oder gar keine Programmiererfahrung haben, ist dies der richtige Kurs für Sie. Und wenn Sie nicht viel Zeit mit dem Lernen verbringen wollen, aber wirklich verstehen wollen wie das alles funktioniert, ist dies definitiv der richtige Kurs für Sie. Mein Name ist John Elder. Ich habe 35 Kurse hier, Sie, für mich über 42.000 Studenten und überwältigend positive Bewertungen. Aber wenn Sie aus irgendeinem Grund nicht zufrieden sind, biete ich 30 Tage Geld-zurück-Garantie, keine Fragen gestellt. Und im Gegensatz zu vielen Lehrern hier bin ich hier, um Fragen zu beantworten, jeden Tag. Also, wenn es etwas gibt, das Sie einfach nicht ganz verstehen, oder wenn Sie eine Frage haben, schießen Sie es auf über. Ich helfe gerne in irgendeiner Weise, die ich kann. HMO ist eins. Die wichtigsten Teile der Web-Entwicklung und Lernen ist nie ein Minis Jahr. Registrieren Sie sich jetzt lassen Sie uns einige HTML codieren. 2. HTML Jeder 1 Einführung und Intro: In Ordnung. Willkommen auf dem Kurs. Mein Name ist John Elder von Cody me dot com und ich werde heute dein Lehrer sein. Dieses Video möchte ich nur ein paar Minuten damit verbringen, über alle Werkzeuge zu sprechen, die wir für diesen Kurs brauchen werden. Jetzt. Glücklicherweise benötigt HTML absolut keine speziellen Werkzeuge. Sie wissen schon, mit den meisten Programmiersprachen. Ruby, du musst Ruby herunterladen und installieren. Ich dachte, Sie müssen Python Datenbank-Zeug herunterladen. Meine Fortsetzung. Sie müssen herunterladen Install my sequel, Django. Dasselbe, Knoten. Das Gleiche. Jede Demos völlig anders. Es ist in jedem einzelnen Web-Browser in der Existenz gebacken. Also spielt keine Rolle, ob Sie Chrome Firefox Safari Opera verwenden, alles überhaupt. HTML ist bereits da drin. Es ist schon bereit zu arbeiten. Es gibt nichts, was du tun musst. Um also H-Demo-Zitatcode zu schreiben, brauchen Sie nur eine Art Texteditor, eine Art keine Pads, etwas zum Schreiben. Und es muss nicht einmal ein spezieller Texteditor sein, obwohl es sein sollte, äh, wissen Sie, Sie können Windows No Pad verwenden, was irgendwie lächerlich ist. Aber du könntest, wenn du es wolltest. In diesem Video werde ich den Texteditor empfehlen, den ich während dieses Kurses verwenden werde. Es ist der erhabene Texteditor. Also, wenn Sie zu sublime tex dot com gehen , sehen Sie, es ist irgendwie ein Bild davon hier. Und das ist schön, weil es eine Beschichtung ist. Texteditor Es spielt keine Rolle, welche Programmiersprache Sie verwenden. Es wird irgendwie sehen, dass Sie hier die Farbe basierend auf dem verschiedenen Code ändern, den Sie schreiben, und das ist wirklich nett und irgendwie nützlich, um Ihren Code lesbarer zu halten und so etwas. Also gehen Sie weiter und laden Sie das herunter. Es ist für Windows verfügbar. Mac Lennix spielt keine Rolle, mit welchem Betriebssystem Sie arbeiten. Es ist völlig kostenlos, ähm, aber wenn du keinen erhabenen Text aus irgendeinem Grund magst, und es ist einer der beliebtesten. Aber eine andere Alternative ist kein Pad plus Plus in Google. Das, und Sie werden feststellen, dass der große Unterschied ist, dass dies eine Art weißer Hintergrund ist, wo sublime schwarz war und Sie die Farbe von beiden ändern können. Aber standardmäßig kommt Sublime schwarz. Kein Pad plus plus kommt weiß. Ich werde sehen, dass Adam ein weiterer beliebter Texteditor ist. Vim haben ein wenig komplizierter. Es gibt einen Visual Studio Code-Editor, wenn Ihre Microsoft-Person, ich bin mir nicht sicher, ob es kostenlos ist oder nicht. Aber wie ich schon sagte, ich werde erhabenen Text für diesen Kurs verwenden. In der Tat könnte ich es hier hochziehen, und das ist es nur ein einfacher Texteditor. Sie können Sachen schreiben und man konnte schon sehen, dass es anfängt, Farben zu ändern, was cool ist. Eines der netten Dinge daran ist, wenn Sie zur Ansicht und dann Syntax gehen, können Sie sehen, dass Sie dies für jede Programmiersprache verwenden können, die Sie mögen. Im Moment haben wir HTML ausgewählt. Das musste ich nicht mal tun. Es hat nur irgendwie erraten, dass ich HTML mache. Also, das ist cool. Ich sehe Rails, Python, PHP, Pearl haben ein Skript, was immer Sie wollen. Sie können in erhabenem Text tun. Also überprüfe das definitiv. Sie müssen einen Texteditor verwenden. Könnte genauso gut dieses sortierte verwenden, um mit mir zu folgen. Und so ist es einfach einfacher zu folgen. Also denke ich, das ist alles für dieses Video. Im nächsten Video werden wir direkt hineinspringen und anfangen HTML zu lernen 3. HTML Everyone 2 Was ist HTML: OK in diesem Video. Wir werden ein wenig über HTML reden, bevor wir direkt reinspringen und anfangen, irgendetwas davon zu schreiben . Und ich möchte darüber reden, weil irgendwie wichtig, genau zu verstehen, was es ist. HTML steht für eine Hypertext-Markup-Sprache, und die meisten Leute denken es als Programmiersprache, eine Programmiersprache für Computer. Aber technisch gesehen ist es das nicht. Es ist nicht wirklich wie PHP oder Pearl oder Ruby oder Python oder Java-Skript. Es ist keine Programmiersprache, aber es wirkt wie eine Programmiersprache. Also neigen wir dazu, einfach so zu sein, OK, ja, es ist eine Programmiersprache, aber technisch gesehen ist es nicht. Es ist ein Zeichen der Sprache, und und, ah, dieser Unterschied ist wichtig. Grundsätzlich ist HTML nur eine Reihe von Tags, öffnenden Tags und schließenden Tags. Und was auch immer dazwischen liegt, das Tag, das markiert wird, bekommt etwas damit gemacht. Weißt du, wenn du etwas machen willst ah, Titel, Titel, du kannst hier sehen, wir haben ein Titel-Tag auf offenem Tag und ein geschlossenes Tag schließt durch einen kleinen Schrägstrich gekennzeichnet und dann innerhalb von hier, das ist, was Ihr Titel, wissen Sie, Wenn Sie eine Überschrift tun wollen, wir tun dies. H ein Etikett. Alles in diesem Tag ist die Überschrift. Also das ist alles HTML wirklich. Es ist nur eine Reihe von verschachtelten Tags, die Steuern öffnen und schließen. Nun, nicht alle HTML-Tags schließen, und wir werden darüber in ein wenig sprechen. Aber zum größten Teil öffnen und schließen sie sich, und das ist alles, was es ist. Lernen von HTML ist also wirklich nur eine Frage des Auswendigens aller Tags und dann nur mit ihnen. Wann immer Sie etwas mit etwas tun wollen, wollen Sie Text groß machen, Sie setzen es in ein großes Text-Tag. Weißt du, wir werden über all die verschiedenen Tags sprechen. Ich möchte nicht wirklich irgendwie in irgendeines davon geraten, aber HTML befähigt absolut jede einzelne Website. Es gibt keine Website, die existiert. Es besteht nicht aus HTML. Alle Webseiten bestehen aus HTML. So gehen Sie zu jeder Website, die Sie wollen, und klicken Sie einfach mit der rechten Maustaste und klicken Sie auf diese Ansicht Seite Quelle, und Sie können die tatsächliche HTML für diese Seite sehen. All seine nur bereit zu sehen, es ist nicht versteckt ist nicht geheim. Weißt du, es ist nicht proprietär, wo sie nicht wollen, dass du es siehst. Es ist sehr offensichtlich. Und es ist genau da, in Ordnung, Ordnung, der Fledermaus, vor allem, bevor Sie diesen Kurs genommen haben. Das ist nichts davon, was wirklich Sinn ergibt. Aber wenn wir vorwärts gehen, werden Sie anfangen zu verstehen All diese verschiedenen Tags sind, wie sie verwendet werden, und , ah, es ist eigentlich sehr, sehr einfach und Sie sollten es sehr schnell abholen. Wie ich schon sagte, es geht nur darum, alle Tags auswendig zu lernen. Und es gibt nicht so viele Tags, so dass wir es ziemlich schnell ausschalten können. Jetzt gibt es im Grunde zwei Teile zu einer Website. Da ist der HTML-Code. Und dann gibt es das CSS, und das CSS macht die Dinge ziemlich richtig. CSS steht für Cascading Stylesheets, so dass es Stil hat. HTML ist wie das Framework, die nackten Knochen, wissen Sie, das Skelett der Webseite, und dann macht CSS es wie gesagt, macht es hübsch. Fügt Farbe hinzu, fügt Form hinzu, Dinge wie diese. Also entschuldigen Sie mich, Dies ist kein Kurs in CSS. Nun, irgendwie berühren Sie es hier und da, weil Sie wirklich keine h Demo ohne CSS machen können. Wirklich? aber nur beim Lernen von HTML müssen Sie es nicht einmal ansehen. Es CSS. Also werden wir nicht viel Zeit verbringen, wenn überhaupt, wenn überhaupt, über CSS zu reden. Viele Male lernen die Leute CSS nicht. Sie verwenden nur das CSS-Framework wie Bootstrap. Und später werden wir uns wahrscheinlich sehr schnell Bootstrap anschauen und Ihnen zeigen, wie das geht. Das macht also irgendwie Spaß. Und wir werden uns das gegen Ende des Kurses so schnell ansehen, bevor Sie weitermachen. Weißt du, ich habe erwähnt, dass HTML nur eine Frage des Öffnens und Schließen von Tags ist, oder? Jedes Tag wird ein Element in HTML-Element genannt und jedes Element kann Attribute, Attribute, Luft nur im Grunde mawr Informationen in der Seite des Tags haben Attribute, , und wir haben hier noch keine Attribute. Also schauen wir uns diese, wissen Sie, ein paar Videos von jetzt an, sobald wir wirklich eintauchen und anfangen, dieses Zeug zu lernen. Aber das ist ziemlich viel es, ähm, Elemente und Attribute richtig, ein Tag und haben viele Attribute. Es gibt mehrere Arten von gemeinsamen, die Sie oft sehen. Wir werden darüber reden, und die einzige andere Sache ist wirklich nur Tags öffnen und schließen, und sie schließen mit diesem kleinen Schrägstrich Sie könnten sehen, wie, genau hier und hier, hier und rechts hier. Äh, genau hier und hier. Sie können hier sehen, ist ein Tag, und es hat ein Tag darin. Ich habe bereits erwähnt, dass HTML verschachtelt ist. Dies ist ein Tag, das innerhalb eines Tags verschachtelt ist, das selbst innerhalb dieses Tags verschachtelt ist, und Sie können sehen, dass wir normalerweise in Dent zeigen, dass HTML jetzt nicht wirklich Groß- und Kleinschreibung beachtet. Also ich meine, du könntest es so machen, oder? Hoppla. HTML kennt den Unterschied nicht. Dies ist nur ein gültiges ist, was wir vorher hatten. Aber dieser Weg ist für dumme Menschen einfach viel einfacher zu lesen. Richtig? Dies ist also die Konvention, die wir normalerweise verwenden. Und das ist alles für dieses Video. Im nächsten Video springen wir direkt rein und lernen die verschiedenen Tags und sollten Spaß machen 4. HTML Everyone 3 HTML Seitenstruktur: OK in diesem Video. Ich möchte über die Struktur einer HTML-Seite sprechen, und wir haben uns das bereits angesehen, aber ich möchte etwas ausführlicher darüber sprechen. Aber bevor wir das tun, möchte ich darüber reden, wie man dieses Ding sieht. Also haben wir ein paar Sachen hier und wir werden in einer Minute darüber reden, was das alles ist. Aber um dies irgendwie zu nutzen, um es zu speichern und es in einem Web-Browser anzuzeigen, kommen wir hier zur Datei und speichern dann unter und ich speichere das nur auf meinem Desktop, Sie könnten es absolut überall speichern. Wir werden diesen Code überhaupt nicht auf einen Webserver übertragen. In diesem Kurs. Wir lernen einfach HTML und machen alles lokal auf unserem Computer. Also speichern Sie das, wo immer Sie wollen , Aber wie ich sagte, ich werde es auf dem Desktop speichern und speichern Sie es einfach als Seite dot html und Sie könnten sehen, ich muss das nicht tun, weil, ah, html ist bereits ausgewählt. Sehen Sie einfach so, und alle HTML-Seiten enden in dot html. Es ist nur die Konvention, also das ist, was sie als HTML-Seiten bezeichnet, damit wir dies hier minimieren können. Und dann könnte man sehen, genau hier ist es bei HTML kleines Chrom-Symbol direkt auf meinem Desktop ausgelagert . Und um dies in einem Web-Browser zu sehen. Ich habe das gerade über gezogen und tun Sie dies und klicken, geben Sie ein und boom hier es ISS, so dass Sie auch einfach Datei eingeben können. Siehe Benutzer Flatlining Desktop-Seite HTML. Dieser flache Planet ist der Name meines Computers, also werden die Jahre anders sein. Ich glaube nicht, dass die Welt flach war. Ich finde es nur lustig, dass manche das noch tun. Deshalb habe ich meinen Computer genannt. Ich habe einen seltsamen Sinn für Humor, also ah, jedenfalls, also erhielt er. Dies ist eine Überschrift, und das ist ein Absatz, der diesem Zeug genau hier entspricht, und wir werden darüber in nur einer Sekunde ausführlicher sprechen. So speichern Sie eine HTML-Seite. So zeigen Sie die Ansicht in einem Webbrowser an, den ich verwende. Chrome spielt keine Rolle, welchen Webbrowser Sie verwenden. Firefox Safari, jeder Web-Browser überhaupt. Es ist alles gleich. Für den Rest dieses Videos möchte ich über die Struktur einer Webseite sprechen, und alle Webseiten haben dieselbe Struktur. Sie beginnen mit dem DOC-Typ und das sagt nur der Datei, Hey, das ist HTML Und tatsächlich können Sie diese Datei dieser Zeile loswerden. Sie müssen es nicht tun, aber wenn Sie eine Art Standardcode wollen, sollten Sie den dort hineinlegen. Als nächstes haben wir ein HTML-Tag, und alle Webseiten sind im Grunde HTML-Tags, und Sie sehen, dass alles andere in diesem HTML-Tag verschachtelt ist. In der Tat, wenn ich darauf klicke, können Sie dieses schließende HTML-Tag Highlights hier unten sehen. Alles hier drin ist also eine Altersdemo. Als nächstes haben wir dieses head-Tag und das head-Tag ist auf einer Webseite nicht sichtbar. Es enthält Informationen. Wenn Sie den CEO kennen,setzen Sie manchmal ihre CEO-Tags in ihre Meta-Tags ein. Wenn Sie den CEO kennen, Sie könnten wie, offene Graph Social-Media-Tags und solche Dinge setzen . Sie erscheinen nicht auf der Seite, aber sie werden für Dinge wie Oh, Google verwendet . Um mich zu entschuldigen Kategorisierung Sie Ihre Website auf Google auflisten. Sie werden für bestimmte Social-Media-Websites verwendet. Wissen Sie, wenn Sie einen Link auf Facebook posten und das kleine Bild erscheint automatisch. Sie können das in Ihrem head-Tag angeben und, wie gesagt, es wird nicht auf Ihrer Seite angezeigt, aber es wird für andere Dinge verwendet. Die Hauptsache in einem Head-Tag ist dieses Titel-Tag, und Sie können hier sehen, es sagt meine Webseite. Wenn wir zurück zu unserer Seite gehen, ist das hier oben. Die Spitze hier. Sie sehen das, die Browserleiste. Da steht meine Webseite hier oben. Das ist der Seitentitel. Und, ähm, das ist wichtig für ah, speziell für Chirurgen wie Google und Bing werden diese Art von Liste in ihrer Suchmaschine verwenden , was der Titel Ihrer Website ist, und das ist wirklich die einzige für das hier. Außerdem taucht es hier auf dieser Bar auf. Aber wenn du wie ich bist, habe ich normalerweise 1000 Tabs geöffnet und du kannst es nicht einmal kaum lesen, wenn es so viele Tabs offen ist . Ich denke, viele Leute tun das, also ist es keine super, du weißt schon, wichtige Sache, aber du solltest es trotzdem tun. Dann schließen wir das head-Tag und dann beginnt das body-Tag, und das ist wahrscheinlich das Wichtigste, alles innerhalb des body-Tags und Sie können sehen, wo es geschlossen wird. Alles im Inneren von hier erscheint auf der Seite, richtig? Also in unserem Fall haben wir zwei Dinge. Wir haben dieses H ein Tag in diesem P-Tag und H steht für Überschrift, und wir werden über mehr Überschriften sprechen, wahrscheinlich im nächsten Video oder dem danach. Und das ist eine Absatzregisterkarte, und das bezeichnet nur Text als Absatz, und wir werden später auch darüber sprechen . Aber Sie können sehen, es entspricht nur diesen beiden Dingen auf dem Bildschirm. Das ist eine Überschrift. Dies ist ein Absatz Sehr cool, Sehr einfach. Ähm, und das ist wirklich alles, was da ist. Also, wie gesagt, alle Webseiten folgen diesem grundlegenden Format. Nun, in diesem Body-Tag, könnten Sie 50 Zeilen Code 100 Zeilen Code, 2000 Zeilen Code haben , aber es ist alles in diesem Körper zu und dann schließlich, am Ende, wir schließen Sie unsere HTML-Tags. Also gehen Sie zurück zu jeder Art von Website, die Sie mögen und sehen Sie die Seitenquelle und Sie werden sehen, um an der Spitze. Wir haben den Doc-Typ. Hier ist der Kopf. Hier ist eines dieser Meta-Tags, über die ich gesprochen habe. Ah, hier sind ein paar andere Tags, über die ich nicht gesprochen habe. Das sind CSS-Dinge. Wir reden später darüber. Irgendwas genau hier. Dies ist der CSS-Link. Das ist, wohin CSS geht. Darüber reden wir später. Wie ich sagte, ähm, alle möglichen Social-Media-Dinge und sehen die Leiche. Hier ist endlich das Head-Tag endet. Also in Ihrem Head-Tag, können Sie eine Menge Dinge haben und die meisten Websites tun, und wir werden sehen, dass dies in Zukunft. Aber hier ist, wo das Body-Tag beginnt. Also hier ist der ganze Körper Zeug für diese Webseite, und es geht einfach weiter. Und du könntest sehen, dass wir nicht mal die halbe Seite runter gegangen sind und dann runter nach unten. Das body-Tag wird im HTML-Tag geschlossen. Das ist also das Grundformat von ah in HTML-Webseite. Und wie gesagt, alle Webseiten folgen diesem Format. Dies ist sehr Standard und eine ziemlich einfache. Also, wissen Sie, wir werden diese Art von Vorlage fast immer als Starter-Vorlage verwenden und so ist das cool. Das ist also alles für dieses Video. Im nächsten Video werden wir einspringen und anfangen, einzelne HTML-Elemente zu lernen 5. HTML Everyone 4 Header-Tags: Okay, also haben wir die Grundlagen aus dem Weg. Jetzt geht es nur darum, all diese Tags zu lernen. Also fangen wir an. Wir haben bereits ein paar auf dem Bildschirm, also lasst uns einfach mit diesem ersten H ein Tag beginnen. Wie ich bereits sagte, das steht für einen Header eins. Und es ist eine Art sehr häufige Sache, besonders für, wissen Sie, wie Websites, die Blog's sind. Sie haben immer einen Titel der Top-oder News-Websites mit einem Sie wissen, eine Geschichte, die einen Titel von oben hat. Sie werden oft diese H ein und Header-Tags sind wichtig, weil sie Text standardisiert groß machen , sondern auch, weil Suchmaschinen wie Google ein Zeichen Bedeutung für ein H ein Tag. Wissen Sie, Google weiß, dass, wenn Sie etwas in einem H ein Tag setzen, Sie sagen, Hey, das ist wichtig. Dies ist eine Überschrift, wissen Sie, es ist Kopfzeile Nummer eins, der wichtigste Header, und es verwendet es Art, dass, um Websites zu kategorisieren. Also ist es auch einfach visuell cool, also gibt es viele Header-Tags von sechs, , wenn Sie diesen Header aufrufen oder so viele aufrufen könnten, aber lassen Sie uns einfach dort durchgehen. Die sind alle nummeriert, oder? Also lasst uns einfach gehen. Das sind Kopf oder zwei und kopieren Sie das einfach. Also, wenn Sie das speichern und ich werde Control ass auf meiner Tastatur drücken, um seine Befehle zu speichern, glaube ich , Sie sind auf einem Mac oder Sie können hier gehen und einfach auf Datei speichern jedes Mal klicken. Also, wenn ich hierher zurückkomme, sehen wir, dass dies Header zu ist und Sie werden feststellen, dass es etwas kleiner ist. Richtig? Und das ist die wichtigste Bezeichnung hier, dass jeder die größte ist. H zwei ist etwas kleiner, H drei, etwas kleiner bis H sechs. Also lasst uns einfach wirklich schnell hier durchkommen und H drei gehen, das ist Header drei auf jedem vier. Dies ist Header für und h fünf. Dies ist Header oder fünf. Er weiß, dass ich jeden öffne und schließe. H sechs, hier ist Header Sechs. Und das Schöne ist über das Erhabene. Ich habe gerade die Halterung in den Ford Slash gesteckt und es automatisch Kerekes zum schließenden Tag. Es macht es nicht immer richtig. Sie müssen darauf achten, aber normalerweise weiß es, welche Sie schließen möchten, also und speichern Sie diesen Kopf zurück auf unsere Seite und klicken Sie auf Reload und Sie könnten oben oben den Weg nach unten zu Header sechs sehen . , Was passiert,wenn wir versuchen, eine H-Sieben zu machen? Das ist Header Sieben. Speichern Sie das. Kommen Sie zurück. Wir bekommen nur normale SMS, oder? Das ist sehr ähnlich wie dieser Text hier, weil es kein h sieben-Tag gibt, also passiert nichts wirklich. In den meisten Programmiersprachen des Computers. Wenn Sie etwas falsch machen, erhalten Sie einen großen wütenden Fehler auf dem Bildschirm oder das Programm funktioniert einfach nicht. HTML ist sehr verzeihend. Weißt du, wir haben gerade einen Tag erfunden, h sieben. Es existiert nicht. Und anstatt einen großen, wütenden Fehler zu bekommen , sagte es nur, äh, es hat ihn einfach ignoriert und stattdessen Standardtext ausgespuckt. So HTML, wie ich sagte, sehr verzeihend. Und, ah, einer der Gründe, warum es so einfach ist, damit zu arbeiten. Speziell für Einsteiger. Sie können viele Fehler machen und viele Male damit durchkommen. Also diese lüften die Alters-Tags und kommen schnell wieder hierher und sagen einfach, ein paar Dinge hier In Wirklichkeit werden Sie kaum die meisten dieser Tags verwenden. Sie verwenden H eins immer, das Sie manchmal für Unterüberschriften verwenden . Wissen Sie, ähm, ich kann mir ein Szenario vorstellen, in dem Sie ein H-3-Tag verwenden würden, aber jedes vier Alter von 586 mache ich das 25 Jahre. Ich glaube nicht, dass ich diese Tags jemals benutzt habe. , Es ist gut zu wissen,dass sie existieren, aber entschuldigen Sie, Sie werden sie einfach nicht oft benutzen. Das ist also alles für dieses Video. Im nächsten Video sehen wir uns das Absatz-Tag an. 6. HTML Jeder 5 Absatz und Paragraph: OK in diesem Video, ich möchte über das Absatz-Tag oder P-Tag sprechen. Und das P-Tag hat ein öffnendes Tag und ein schließendes Tag. Und hier drin ist nur Text. Jetzt können Sie Sachen selbst ohne P-Tag auf den Bildschirm stellen, aber Sie wollen es nicht. Du wirst immer eine Art gewickelter Textblöcke in P-Tags haben wollen. Es hilft wirklich, die Dinge organisiert und zusammen zu halten, und wir werden sehen, warum hier in nur einer Sekunde. Aber zuerst zurück auf unsere Seite hier, und ich ging einfach zu dieser Website Lippen einige Punkt com und das erzeugt Dummy Text. Also müssen wir hier etwas Text generieren. Also möchte ich einen Absatz wie diesen. Und so werde ich einfach leben. Markieren Sie all dies und kopieren Sie Control Seed eine Kopie, oder Sie können mit der rechten Maustaste klicken und Kopieren wählen. Und das ist nur ein Dummy-Fonds-Tex, mit dem wir spielen können, während wir lernen. Statt dessen werde ich V steuern, um einzufügen, oder Sie können mit der rechten Maustaste klicken und auf Einfügen klicken, und ich werde einfach diesen ganzen Text einfügen. Richtig? Also, wenn wir diesen Kopf wieder auf unsere Seite speichern und klicken Sie auf Reload. Es fragt, ob wir Trans übersetzen wollen. Nein. Also haben wir all diesen Dummy-Text und er erstreckt sich bis zum Ende unserer Seite. Jetzt, mit CSS, könnten wir dies stylen und wir könnten sagen, OK, setzen Sie dies in einen Block. Das ist nur, du kennst so weit oder was auch immer. Wir werden uns das jetzt nicht ansehen, aber merken, wie das alles zusammen läuft und es ist vielleicht nicht offensichtlich. Aber wenn ich hier runterkomme und dieses Zeug ohne P-Tag einfüge und das speichere, siehst du, wie das aussieht? Es sieht im Grunde in diesem Jahr, Aber nehmen wir die P-Tags Angebot hier und sehen den Unterschied. Okay, hier haben wir nur zu diesen Absätzen ohne P-Tags. Und wenn wir das jetzt wieder laden, ist alles zusammengeschüttet, verstehst du? Und das wollen wir nicht, weil wir hier eindeutig zwei Absätze haben. Wir wollen, dass sie getrennt sind. Also wollen wir sie immer in die Tags einwickeln, die ich erfinde. Und wenn ich wirklich, wirklich ernst wäre , würde ich wahrscheinlich in Dent No sehen, nein, komm zurück. Es lässt mich aus irgendeinem Grund nicht schulden. Jedenfalls, da gehen wir. - Ja. Eingekerbt, um es ein wenig leichter zu lesen. Ähm, das könntest du tun. Also und komm zurück und lade wieder. Und jetzt hallo. Diese Übersetzung. Nun, wir haben wieder zwei Absätze. Also sehr wichtig, verschiedene Textblöcke zu trennen. Und das ist wichtig, weil HTML die Formatierung nicht wirklich versteht. Richtig? Damit wir auf eigene Faust Hallo gehen können. Es gibt eine andere Linie. Mein Name ist John Elder, richtig. Also ist dieses Zeug überall. Unser Texteditor. Wenn wir das speichern und hierher zurückkommen und Reload drücken, bringt es alles in eine Zeile. HTML tut das. Jetzt. Es sind Tags, die wir das überschreiben können, und wir werden in Kürze darüber reden. Aber standardmäßig, selbst wenn Sie diese Dinge in ein p-Tag einbinden und speichern, ändert es sich nicht. Es setzt immer noch alles in einer Zeile s, also bedenken Sie das, wenn Sie HTML-Code schreiben und das gut loswerden, werden wir dies für später speichern. Ähm, das Stück der beliebtesten Art, Sachen zu zerbrechen. Aber das willst du nicht immer tun. Darüber reden wir ein wenig später. Aber sonst schütteln Sie das sehr schnell. Also, wenn wir das sagen, wissen wir, was passieren wird. Er wird die beiden zusammen zerschlagen und das wollen wir nicht. Eine Sache, die wir tun können, ist, einen Zeilenumbruch zu verwenden und der Zeilenumbruch ist nur so, dass jetzt Zeilenumbrüche von einem dieser Tags, die keine Öffnung und ein schließendes Tag haben. Wie gesagt, die meisten Tags haben Öffnen und Schließen, aber es gibt eine Handvoll, die nur ein Tag sind, und dies ist einer von ihnen, und es wird durch diesen Schrägstrich innerhalb des öffnenden Tags bezeichnet. Das ist also im Grunde ah Kong Canton ation der Eröffnung und des schließenden Tags in ein Tag , indem man diese Kurzschrift mit dem Schrägstrich rechts darin macht. Sie WennSieein normales geöffnetes Tag und ein geschlossenes Tag haben, schließen Sie es mit diesem Schrägstrich. Das machen wir sowieso hier, obwohl ein Zeilenumbruch nur das tut, was er sagt. Es macht einen Zeilenumbruch. Also hier können Sie sagen, weil es nicht alles ein Absatz ist, also ist dies der 1. 1 und das ist die 2. 1 Es wird genommen, es war die 2. 1 hat genau hier begonnen , aber es ist jetzt in diese nächste Zeile gekommen. Das ist, was das Zeilenumbruch-Tag tut, und Sie können mehr als ein Recht verwenden, das wir tun können, wenn wir irgendwie, aber ein wenig Abstand dazwischen wollen . Dies funktioniert und es sieht dem P-Tag sehr ähnlich aus, aber es ist eine Art von Best Practices, es nicht so zu tun, sondern stattdessen alles in ein P-Tag zu wickeln. Also bedenken Sie das einfach im Hinterkopf. Das ist also Absatz, der Zeilenumbruch im nächsten Video ist. Ich denke, wir schauen uns das Pre-Tag an. 7. HTML Everyone 6 Pre: OK in diesem Video, ich möchte über das Pre-Tag sprechen. Und im letzten Video führen wir den ganzen Gobbledygook hier unten an, und wir haben ihn irgendwie hier formatiert. Aber diese Formatierung wurde nicht auf die Seite übersetzt. Es hat alles auf eine Linie gesetzt. schon Wie ichschonsagte, wir können das außer Kraft setzen. Und das können wir mit dem Pre-Tag machen. Also, um das zu tun. Zunächst einmal lassen Sie uns einfach all diesen goofy Text hier loswerden. Und anstatt das in ein p-Tag zu wickeln, wollen wir es in einem Pre-Tag umwickeln, okay? Und das Pre-Tag hat ein offenes und schließendes, also schließen wir es so, und da gehen wir. Also, innerhalb des Pre-Tags, behält es all diese Formatierung so gut wie möglich. Also, wenn wir jetzt wieder hierher kommen, sehen wir das. Hallo, da. Mein Name ist John Elder, und es ist irgendwie im gleichen allgemeinen, verrückten Format, das wir in den Texteditor einfügen. Nun, Sie werden nicht oft so etwas tun, weil es irgendwie seltsam ist, aber es gibt Verwendungen für das Pre-Tag, richtig? Ähm , , ich kann mir zum Beispiel eine Poesie vorstellen. Wenn Sie ein Gedicht auf Ihrer Website setzen möchten und Sie wissen, jede Zeile, die Sie wollten, in einer separaten Zeile, so dass Sie wissen, wir könnten gehen. Wir sind die Musik-Macher. Wir sind die Träumer von Träumen. Dummes Gedicht, Ich weiß, frage mich allein Brecher sehen und sitzen von wüstenden, Baseball wüstende eso. Lasst uns vielleicht sehen. Okay, also wenn wir das speichern und hierher zurückkommen, wem wir alles bekommen, steht jede Zeile in ihrer eigenen Zeile und du merkst, dass der Text ein bisschen anders ist, oder? Es ist, weißt du, etwas kleiner. Und das ist irgendwie das, was das Pre-Tag jetzt tut. Wir könnten auch einfach all das nehmen, hobby es und wieder einfügen. Aber anstelle des Pre-Tags könnten wir das P-Tag verwenden. Wenn wir das retten, wissen wir, was passieren wird. Es wird alles auf einer Linie sein. Das ist nichts Gutes. Aber du könntest , so etwas tun,wie, ähm, am Ende jeder Zeile einen Zeilenumbruch schlagen, richtig? Das wird jede Zeile auf ihre eigene Linie setzen. Und diese Art von Arbeit. Aber beachten Sie den Unterschied in der Steuer. Dies ist eine Art normaler Text. Ähm, und das ist, weißt du, etwas kleiner, seltsamer oder aussehender Text. Jetzt können Sie das überschreiben. Diese seltsame Textgröße mit CSS. Wie gesagt, wir werden nicht viel in CSS und seinen Kurs bekommen. Aber so würdest du das machen. Das ist also das Pre-Tag. Ähm, ziemlich einfach. Kein sehr gebräuchliches Etikett. Du wirst es nicht so oft benutzen, aber es ist, dass es von Zeit zu Zeit seine Verwendung hat. Im nächsten Video schauen wir uns das Zitat-Tag an. 8. HTML Everyone 7 BlockQuote: Okay. Dieses Video möchte ich über Zitate und Zitate sprechen waren sehr häufig, vor allem für, wie, wie, Nachrichten-Websites und Artikel und Block-Beiträge. Sie zitieren oft Dinge. Sie möchten, dass diese Zitate um Ihr Angebot herum liegen. Und Sie könnten das mit etwas tun, das Block Quote Tag genannt wird. Und lasst uns Block Zitat gehen. Vielleicht wollen wir es nicht beenden. Da gehst du. Ähm, okay. Also mag ich andere Zitate. Es hat eine offene und schließende Tags. Also lassen Sie uns das speichern und schauen und sehen, wie es hier und wieder aussieht. Es geht alles auf einem Bildschirm. Sie sind alle auf einer, äh, Zeile hier. Wir wollen das nicht, damit wir in einem Block nisten können. Zitat unsere preach ag. Alles klar, und nicht tippen. Nun, wenn Sie nisten, wollen Sie das nächste Ding schließen. Also, wissen Sie, wir haben es geöffnet und geschlossen. Du willst so etwas nicht wirklich tun, oder? Richtig. Das ist falsch. Oder sogar das ist falsch, oder? Es wird wahrscheinlich noch funktionieren. Da gehen wir. Aber du willst das nächste Ding schließen. Also, äh, am Ende ist der nächste Tag die Vorsteuer. Wir schließen es. Der nächste nächste ist das Blockzitat. Also schließen wir das. Also, wenn du das sagst und wieder hierher gehst, Boom, dann kriegen wir dasselbe. Jetzt gibt es keine Anführungszeichen, tatsächliche Anführungszeichen um dieses Ding. Aber das liegt nur daran, dass wir keine Anführungszeichen im CSS angegeben haben. Und du würdest das tun? Ich sagte, es fing an. Dies ist kein Kurs in CSS, also werden wir nicht darüber reden. Das ist also der Block Zitat. , Es gibt andere Möglichkeiten,Dinge zu zitieren. Ähm, wir könnten gehen. Das Motto von Kuta me dot com lautet. Und wenn Sie nur ein kleines Zitat haben, können Sie dies verwenden. Nur das Cue Tag. Lernen Sie bei Kota me Dot com zu programmieren. In Ordnung. Du könntest so etwas tun. Und die Anführungszeichen erscheinen tatsächlich für diesen kleineren. Also das ist irgendwie cool, und Sie werden feststellen, dass es alles auf eine Zeile setzt, was wir in diesem speziellen Fall wollen, Ähm, Ähm, also diese Aufzeichnung markiert diese Luftanführungszeichen, sollte ich sagen, und schwarzes Zitat und die kleine que oder was? Sie wollen sich ihre 01 Sache ansehen, die ich erwähnen könnte, dass Sie hier ein Zitat einfügen können. Das ist ein Attribut, richtig? Wir sprechen über Attribute sehr kurz früher auf innerhalb Ofen, html out Element. Sie können Attribute haben. Und eines der Attribute sind die Zitatattribute. Also, weißt du, wir könnten so etwas wie Arthur machen. Oh, Sean im Meer drauf, ich buchstabiere das, aber so etwas oder oft wirst du sehen, ähm, wie, hier unten, wir könnten gehen. Site entspricht gleich, um, um, http oder vorwärts Kotomi dot com. Richtig. Also speichern wir das, kommen zurück und schlagen. Nachladen. Oft mit Attributen können Sie sie nicht wirklich sehen. Du Da ist nichts. Weißt du, selbst wenn wir die Maus hier drüben schweben. Kleine Zitationsbox erscheint nicht oder irgendetwas, aber das ist gut für aber das ist gut für Suchmaschinen. Wenn Google diese Sache scannt, wenn Google eine Website scannt, schauen sie auf die Seitenquelle und sie nehmen alle diese Informationen. Und, äh, damit sie etwas damit machen könnten. Wenn du Citation setzen willst, willst, funktioniert das nur irgendwie. Also im nächsten Video werden wir anfangen, Links zu betrachten 9. HTML Everyone 8 Links: OK in diesem Video. Ich möchte über Links sprechen. Und Links sind ein wichtiger Bestandteil jeder Website. Wenn wir zurück hierher gehen, und gehen wir einfach zurück zu, sagen, dass Kotomi dot com Links wie diese Dinge hier oben sind, oder? Sie klicken auf einen Link, geht zu einer anderen Seite, oder es geht zu einer externen Website, diese Air-Links und, Sie wissen, Links sind überall in HTML. Äh, nur, weißt du, so üblich, wie du unsere Seite hier zurückbekommen kannst. In Ordnung, also wie machen wir das? Diese Links sind super einfach. Wir haben gerade das A-Tag verwendet und Links das A-Tag hat einen schließenden Tag Schrägstrich ein Jetzt, innen hier, wir brauchen ein Attribut. Und die Link-Attribute ist h r e f nicht wirklich wissen, warum das kein h r e f steht für ref . Ähm, ja, ich habe keine Ahnung, wofür das steht, aber hier drinnen steckt man, wohin das Ding hinweisen soll. Also, wenn Sie eine auf eine externe Website zeigen wollen, könnten wir http oder Doppelpunkt für Schrägstrich Ford Slash um Kotomi dot com gehen, zum Beispiel. Nun, drinnen, hier ist, wo Ihr Link-Text geht, also könnten wir einfach Kodori dot com eingeben oder mich einfach überzogen haben. Richtig? Das ist also, was auf der Webseite auftauchen wird. Also, wenn Sie das speichern, kommen Sie zurück und drücken Sie Reload, wir sehen, beschichtete mich. Wenn wir darauf klicken, geht es zu Kotomi. Sehr cool. Nun können Sie auch interne Links machen, wenn Sie Ihre eigene Website haben. Also, zum Beispiel, wir haben Wir sind auf Seite dot html. Wir hätten, wissen Sie, Seite zwei Punkt HTM haben können. Oh, das ist völlig in Ordnung in unserem Fall, wir haben keine Seite zwei, also wenn wir darauf klicken, erhalten wir eine Datei nicht gefunden. Aber wenn wir eine Seite dazu hätten, würde Goto Seite richtig machen? So sehr cool? Ähm, es gibt andere Attribute oder für Links. Ähm, du könntest tatsächlich sagen, lass uns das zurücknehmen, wenn sie gehen. Ein anderes Attribut ist target. Und versuchen wir es neu. Ich denke, das ist es, was es ist. Es ist eine Weile her, seit ich ein Yeah gemacht habe. Siehst du, eine neue Registerkarte erscheint, oder? Also, wenn Sie möchten, dass Ihr Link in einem neuen Web-Browser-Tab geöffnet wird, verwenden Sie einfach diese Attribute, die Ziel gleich neu ist. Ziemlich cool. Jetzt in einem Hier haben wir Text, aber Sie können natürlich auch auf Bilder verlinkt. Lasst uns dieses Ziel loswerden. Speichern Sie das. Kommen Sie zurück und schlagen Sie. Nachladen. Gehen Sie zum Beispiel auf diese Website . Hier oben. - Richtig. Das ist ein Logo. Wenn ich darauf klicke, geht es auf die Website. Ähm, dieses Bild hier. Wenn ich darauf klicke, geht es zu dieser Webseite. Also haben wir noch nicht über Bilder gesprochen. Wir werden im nächsten Video darüber reden, aber dasselbe. Setzen Sie einfach Ihr Bild-Tag hier ein. Schnell in einem A-Tag und es wird Link Herbal. Es kommt anklickbar. Im Grunde. Das ist also alles, was es zu Links gibt. Sehr einfach. Denken Sie daran, dass das A-Tag H R E f die Verknüpfungsattribute ist. Niemand erinnert sich, wofür h r e f steht, aber so machen Sie einen Link. Im nächsten Video schauen wir uns Bilder an 10. HTML Jeder 9 Bilder: OK in diesem Video, Ich möchte über Bilder und Bilder oder super einfach sprechen. Wir verwenden nur ein Bild-Tag und das Bild-Tag ist Ich bin G S R C. Jetzt sind Bild-Tags ein weiterer dieser Tags, die kein schließendes Tag haben. Und normalerweise, wenn das passiert, tun wir das. Das müssen wir nicht tun. kannst du. Das ist gültig, html, wenn Sie möchten, aber Sie müssen es nicht. Das HTML-Element ist also I m G. Dies ist das Bild-Tag. Im Inneren davon. Wir haben ein Attribut namens SRC und SST. SRC steht für Quelle. Also wollen Sie auch darauf hinweisen, was auch immer Quelle Ihre Bilder. Also habe ich dieses Bild von meinem Hund Aspen hier auf meinem Desktop. Und da es sich im selben Verzeichnis befindet, können wir einfach den Namen eingeben. Es ist eine PNG-Datei, und das war's. Wenn wir das in einem speziellen Verzeichnis namens Images hätten,könnten wir so etwas tun, oder? Wenn wir das in einem speziellen Verzeichnis namens Images hätten , könnten wir so etwas tun, Wenn das auf 1/3 Party-Websites sitzt irgendwo wie ein CDN irgendeiner Art Content Delivery Management A zu B s Ziele, Ich brauche ein B s oder Cloudflare oder so etwas, Sie könnten gehen, wissen Sie, Kotomi dot com Schrägstrich Bilder Schrägstrich Aspen Punkt PNG. Alles klar, aber wie ich schon sagte, wir machen das lokal auf unserem Computer, und die Datei sitzt nur auf meinem Desktop, damit wir das einfach speichern und auf unsere Seite zurückkehren und auf „ Reload and boom“ klicken . Hier ist das Bild. Das ist ein gigantisches Bild, richtig? Das ist ein gigantisches Bild, Es ist nett oder sogar schwer, es zu sehen, auch wenn wir scrollen. Das ist Aspirin. Sie ist ein Baby. Husky, Baby, sie ist, ich weiß nicht, 18 Monate alt. Vielleicht auf diesem Bild, so etwas. Sie ist ein Hurrikan, also okay, das ist cool, aber das ist irgendwie nutzlos, oder? Das ist gigantisch. Nun, normalerweise, können Sie das Bild bearbeiten und eine Art, Sie wissen schon, Fotoshop oder Gimp oder so etwas und machen es kleiner. Oder Sie könnten ein anderes Attribut verwenden, das die Höhe im mit ist. Also gehen wir Höhe gleich und mit gleich. Und wir könnten uns etwas ausdenken, damit wir 500 nach 700 gehenkönnen. etwas ausdenken, damit wir 500 nach 700 gehen etwas ausdenken, damit wir 500 nach 700 gehenkönnen. 500 nach etwas ausdenken, damit wir 500 nach 700 gehenkönnen. Ich weiß es nicht. Sehen Sie, wie das aussieht speichern Sie dies, und das sieht ein wenig besser aus, aber offensichtlich erscheint es auf dem Bildschirm. Aber das Seitenverhältnis ist möglicherweise nicht korrekt für dieses Bild, daher können wir Verzerrungen bekommen. Und was ich damit meine, ist zum Beispiel, statt 700 Was, wenn ich ah 900 auswählen? Nun, es hat es automatisch gemacht. Für uns. Es überschreibt es. Aber eine Möglichkeit, sicherzustellen, dass Sie jedes Mal das richtige Seitenverhältnis erhalten, besteht darin, einfach eines dieser zu verwenden . Wenn wir also nur mit 900 verwenden, wird dies das ursprüngliche Seitenverhältnis des Bildes intakt halten . Wenn Sie nicht wissen, welche Aspekte Probleme sind, ist das die eigentliche Dimension. Ursprünglich wird es diese intakt halten und es gut aussehen lassen. Das ist also cool. Noch eine Sache über Bilder. Es gibt ein anderes Attribut, und das ist der ganze Text A L T und das ist nur gut, lasst uns einfach damit herumspielen. Lass uns gehen. Äh, sag hallo zu Aspen. Speichern Sie das hier zurück und drücken Sie „Neu laden“. Und wie die meisten, die Sie kennen , Attribute, ist nichts wirklich sichtbar. Alle Tags werden tatsächlich nicht in irgendeiner Weise Form oder Form angezeigt. Aber das ist gut für Suchmaschine Suchmaschine, vor allem Google. Liebe alle Tags. Wenn Sie ein kleines Ding auftauchen möchten, können Sie das Titel-Tag verwenden. Speichern Sie das und drücken Sie. Nachladen. Wenn wir da rüber schweben,bekommen wir eine kleine Kiste, die auftaucht, auf der steht: „ Sag hallo zu Aspen.“ Wenn wir da rüber schweben, bekommen wir eine kleine Kiste, die auftaucht, auf der steht: „ Das ist also irgendwie cool. Das sind also Bilder? Wie ich bereits sagte, wir können das zu einem Link machen, damit wir eine schreckliche Gleiche machen können. Wie ich bereits sagte, Http. Kotomi dot com und dann so etwas, richtig. Wenn wir sagen, dies zurück hier in Hit reload Nein, sehen Sie, wir klicken darauf. Bewegung geht an Kotomi dot com. So ist es einfach, Links aus Bildern zu machen oder Bilder zu verknüpfen pflanzliche. Wenn du es so sagen willst, ähm, ziemlich cool. Also diese Luftbilder, diese luftverknüpfenden Bilder. Im nächsten Video werden wir anfangen, Tabellen zu betrachten 11. HTML Jeder 10 Listen: OK in diesem Video. Ich möchte jetzt über Listen sprechen. Wir werden über Tische in diesem Video reden, aber ich denke, ich werde das für das nächste speichern. Video ist ein bisschen fortgeschrittener, und bevor wir das tun, möchte ich Folie und Liste. Listen sind also super wichtig, viel wichtiger, als Sie denken würden. Und im Grunde, was ist eine Listenliste ist nur eine Aufzählungsliste, richtig? Es gibt also hauptsächlich zwei Arten von Listen. Es gibt geordnete Listen und eine neue geordnete Liste, und eine A Norden Liste ist genau wie ein Punkt neben jedem Element. Es sind nur Kugelpunkte da, ungewöhnlich. Nur eine Liste. Eine geordnete Liste ist, weißt du, wie 12345 Sie sind in Ordnung. Wie machen wir diese Dinger? Nun, lasst uns einfach hier reinspringen und meine ungewöhnliche Liste erstellen , und sagen wir,dass wir nichts hier setzen müssen, also um eine Liste zu erstellen, fangen wir einfach mit dir an. L und das steht für Anno geordnete Liste, und wir können es jetzt mit dem schließenden Tag schließen, innen hier ist jedes Listenelement ein L. Ich tagge rechts l I und im Grunde jede Zeile, die Sie wollen, wird zu einem Verbündeten Objekt. Also werde ich das einfach kopieren. Und 2345 Also, das ist, ähm, äh, Aufgaben für heute. Also lasst uns den Hund laufen, das Motorrad waschen. Es ist im Moment sehr schmutzig. Du lebst immer im Wüstenstaub . Mal sehen. Lesen Sie ein Buch, sehen Sie, was wir sonst noch brauchen, um die Wäsche zu machen und dann Lebensmittel zu kaufen. Okay, also wenn wir diesen Kopf hier wieder speichern und auf „Reload“ klicken, bekommen wir dieses nette kleine auf geordnete Liste und Sie bemerken, dass es kleine Aufzählungspunkte als nächstes gibt, jeder sehr cool und sehr nützlich. Jetzt denkst du so was? Nun, in jeder Demo werden Sie Kugeln für viele verschiedene Dinge verwenden. Und das liegt daran, wenn Sie CSS zwei Listen hinzufügen, können Sie alle Arten von seltsamen Dingen tun. Viele Male, wenn Sie wie eine Knave-Bar oben auf ah Website sehen, wissen Sie, wie, um, gehen Sie zurück meine Website, diese Knave-Bar oben von hier. Ich erinnere mich nicht, aber ich glaube, dass dies mit einer neuen Bestellliste und dann mit CSS erstellt wird. Wir haben gerade dem Browser gesagt, den kleinen Punkt zu ignorieren Sie können es unsichtbar machen Art von Sache, eine Reihe von sehr häufig für Dinge wie diese und nur eine Reihe von anderen Dingen. Wie Sie beginnen, mit Web-Entwicklung weiter fortgeschritten zu werden, werden Sie nur Listen verwenden. Ah, viel, es ist seltsam, weil du weißt, wer Listen benutzt, aber, ähm, es ist wahr. Und wie ich schon sagte, mit CSS schwächen Stil, diese Punkte, könnten wir die Punkte vollständig verschwinden lassen. Wir können sie auch ändern. Kleine Diamanten. Wir können sie in alles ändern, was wir wollen. Wirklich? Und ah, das ist ziemlich cool. Das sind also Nordlisten. Machen wir eine geordnete Liste. Also meine bestellte Liste. Und um das zu tun, haben wir uns gerade von einem U L in ein ol o steht für geordnete Liste geändert, oder? Super einfach. Also speichern wir das, kommen Sie zurück und klicken Sie auf Reload, wenn wir 12345 sehen und Sie werden feststellen, dass der Browser diese Zahlen in sich selbst gesetzt hat, oder? Wir mussten nicht, weißt du, einen nächsten setzen. Jeweils 123 usw. Es hat alles für uns getan. Und Sie werden auch bemerken, , es dass hier ein bisschen Formatierung gibt. Richtig. Hier ist unser Text hier. All das Zeug wurde irgendwie ein wenig eingerückt. Und das ist, was in oder eine Listenreihenfolge, die Doran bestellt hat, tun wird. Also ist es jetzt ziemlich cool. Wie ich schon sagte, können Sie alle möglichen Dinge über diese mit CSS ändern. Uh, wir werden nicht darauf eingehen, aber Sie können hier eine Abkürzung machen, indem Sie die Typattribute verwenden. Also, wenn wir auf geordnete Liste gehen, äh, Typ ist gleich einem Kapital. Ein Anzug, der wie Boom aussieht. Jetzt dreht es sich von 12345 Ich ging zu einem B C d e. Rechts. Also das ist irgendwie interessant, wenn wir Kleinbuchstaben A gehen, wir Kleinbuchstaben bekommen, die gehen werden. Ähm, wir können gehen. Mal sehen. Hier geht's. Geben Sie eins ein. Sie würden zu Zahlen zurückkehren. Das ist die Standardeinstellung. Ähm, wir können dio Das ist ein lustiger. Schwächen tun Kapital. Ich bekomme römische Ziffern. Denken Sie daran? Römische Ziffern aus der Grundschule? I, I v und V um Ebenfalls schwächen Sie Kleinbuchstaben. Ich sehe das hier hinten und drücke Reload. Wir bekommen Kleinbuchstaben römische Ziffern. Sehr cool. Jetzt können wir auch diese Dinge verschachteln. Lassen Sie uns das loswerden und ändern Sie uns zurück zu einer unveränderten Liste. Und so speichern wir das wirklich schnell und schauen es sich einfach an, bekommen unsere regelmäßige Ehrenliste. Aber sagen wir, wir wollen etwas hinzufügen. Also lassen Sie uns eine weitere Liste innerhalb von hier für Einkäufe erstellen. Und nur um dir zu zeigen, wie das aussieht, werde ich die ganze Zeile kopieren und sie hier oben stellen. Es ist also in unserer Liste. Und um das zu tun, mögen wir das einfach und innerhalb dieses I schwäche ich, erstellen Sie einfach eine ganze andere Liste. Lassen Sie uns eine geordnete Liste erstellen. Und dann drinnenwollen wir, wollen wir, ähm, Hamburger. Wir wollen Käse. Wir wollen Ach, Brötchen. Und wir wollen, dass ich nicht weiß, Orangensaft mit Hamburgern benutze und dann können wir das schließen. Also sehen Sie, das ist in dieser Nord-Liste verschachtelt. Also, wie sieht das aus? Moon, wir kriegen nur 1234 hier drin. Wissen Sie, in diesem Listenelement so sehr, sehr cool und ah, super nützlich. Also denke ich, das ist alles für Listen. Im nächsten Video werden wir anfangen, Tabellen zu betrachten 12. HTML Everyone 11 Tabellen: OK in diesem Video, Ich möchte über Tabellen sprechen und Tabellen sind eine Art fortgeschrittenere HTML-Thema. Aber es gibt etwas, das du benutzen wirst, wahrscheinlich für immer. Ähm, sie werden einfach immer in HTM verwendet. Oh, und hier habe ich einen sehr einfachen Tisch erstellt. Richtig. Also haben wir eine Tabelle ist im Grunde nur Zeilen und Spalten. Das ist also eine Reihe. Das sind unsere Lippen. Das ist eine Reihe. Das ist eine Reihe, Sie wissen, dass die Rose von links nach rechts geht. Spalten gehen nach oben und unten. So Lieblingsfarbe. Dies ist eine Spalten-E-Mail-Adresse. Dies ist ein Spaltenname. Das ist eine Spalte. Wenn Sie also an Tabellen denken, Sie im Grunde nur an Zeilen und Spalten. Also, wie bauen wir dieses Ding? Nun, es ist nicht so schwierig. Ein bisschen knifflig, aber nicht so schlecht beginnt ein Tisch. Ich habe den Code bereits geschrieben, also werden wir das einfach durchlaufen. Jetzt beginnt eine Tabelle mit einem Tabellen-Tag und Sie können sehen, dass das Tabellen-Tag geschlossen wird. Und im Inneren von hier habe ich ihm einen Stil mit einem von 50% gegeben. Nun, technisch gesehen, ist dies wahrscheinlich eine CSS-Typ-Sache. CSS kaskadiert Stylesheets. Ich habe es während dieses Kurses mehrmals referenziert, Ähm, aber für diesen Fall hatte ich nur ein wenig CSS. Wir werden darüber reden. Wahrscheinlich die nächsten paar Videos, aber ich habe es mit 50% gegeben. Wenn wir hierher zurückkommen, können Sie sehen, dass es hier etwa auf halbem Weg über den Bildschirm geht. Das sind 50%. Wenn ich das aufgeben würde, würde es den ganzen Weg über den Bildschirm erstrecken. Und ich habe hier nicht so viele Daten, so viele Spalten, also würde das irgendwie seltsam aussehen. Also als nächstes, wie ich sagte, Tabellen haben Zeilen und Spalten. Und um eine Zeile zu erstellen, verwenden Sie ein Tabellenzeilen-Tag, ein TR-Tag direkt hier, um eine Spalte zu erstellen, die Sie erstellen , ah, erstellt T D-Tag, die für Tabellendaten steht. Nun, Tedy Tag geht in ein TR-Tag, und wir werden in einer Sekunde darüber reden. Lasst uns einfach hier durchlaufen. Schauen wir uns das erste Stück hier an. Ich habe eine Zeilentabellenzeile erstellt und eine Zeile links gesetzt. Wenn wir das abnehmen und speichern und auf „Reload“ drücken,könnten Sie sehen, dass all diese Header übersprungen werden, also möchte ich, dass sie sich links aufstellen. Wenn wir das abnehmen und speichern und auf „Reload“ drücken, könnten Sie sehen, dass all diese Header übersprungen werden, Also habe ich es einfach in der Zeile links gegeben und du kannst eine Zeile links machen. Du kannst eine Leitung machen, oder? Du könntest einen Linienmittelpunkt machen. Ich denke, das sind so ziemlich es. Also sparen Sie das. Jetzt haben wir dies wir diese th Tags öffnen und schließen. Und was sind das? Th steht für Tischkopf und genau das klingt es. Es ist diese Art von Kopf oder eine Reihe. Sie konnten die Farben fett, etwas anders sehen , und im Grunde, diese nur Art von Namen, die verschiedenen Spalten. Du musst das nicht haben. Du könntest das hier ablassen. In der Tat, wenn wir das tun, nehmen wir diese ganze TR-Sektion heraus und speichern sie. Dies ist immer noch vollständig gültig. Wir haben nur nicht die netten kleinen Tabellenüberschriften, um zu erklären, was diese Daten so wichtig , um Ihre th Tags zu verwenden. Und wie ich schon sagte, jede Zeile ist in einem TR-Tag. Alle alle Daten einer Zeile gehen in ein tr -Tag. Also vom öffnenden TR und dem schließenden Stb ist hier alles eine Spalte. Wir haben also drei Spalten. Dann schließen wir das. Nun, wenn wir eine weitere Zeile darunter wollen, erstellen wir ein weiteres TR-Tag und Sie können öffnen und schließen sehen. Und innerhalb dieses Tags wollen wir. Wir brauchen drei Spalten, weil wir drei Tabellenüberschriftenspalten haben, richtig? Jeder von ihnen entspricht also einem th, also ist die 1. 1 hier die 1. Name. Die 2. 1 ist die zweite 1 hier E-Mail-Adresse, und die 3. 1 ist die 3. 1 Also müssen sie übereinstimmen, richtig ? Wenn wir zum Beispiel zum Beispiel ein anderes TD-Tag erstellt haben und einfach etwas eingeben und speichern, können Sie sehen, dass alles aus dem Schlag geworfen wird, oder? Denn es gibt hier keine zusätzliche Spalte, und das sieht einfach seltsam aus. Alles wird zusammengeknallt. Es ist nur seltsam. Also müssen Sie sicherstellen, dass in jedem einzelnen t sind Sie erstellen die gleiche Anzahl von TDs hat und es gibt einige und es gibt einige Ausnahmen davon und wir werden darüber reden. Vielleicht das nächste Video, denke ich. Aber zum größten Teil, halten Sie sie alle konsistent. Also speichern Sie diese Also haben wir diese TR Tags die Tabellenzeile im Inneren, wir haben TV s T D steht für Tabellendaten sind im Grunde Spalten. Und so haben wir eine Straße, John John's E-Mail-Adresse und John's Forever Farbe. Wenn wir eine weitere Zeile darunter wollen, müssen wir einfach ein ganzes Gegenstück erstellen und es mit den gleichen Daten füllen. Dasselbe, wenn wir danach noch eine Reihe wollen. Also haben wir drei Reihen hier und dann endet es. Dann haben wir unser schließendes Tisch-Tag und werfen einen Blick darauf, wen wir gerade das haben . Das ist also wirklich alles, was es an den Tischen gibt. Ähm, , das ist eine sehr einfache Tabelle. Es sieht sehr einfach aus. Es gibt kein Styling jeglicher Art. kannst du. Sie können Tabellen auf eine zillion verschiedene Arten stylen, und Sie sehen wahrscheinlich gerade. Du weißt schon, gestreifte Rose-Bordüren, verschiedene Farben. Und darüber reden wir nicht in diesem Video oder im nächsten Video. Das ist eine CSS-Sache, aber Sie können einige sehr grundlegende Dinge tun, wie für die Tabelle erscheinen. Wir wollen diesem eine grundlegende Grenze geben. Du gehst. Border ist jetzt gleich eins, Wie Sie sagten, würden Sie normalerweise CSS dafür tun und Sie werden sehen, warum hier jetzt. Wenn wir diesen Boom retten, bekommen wir diese Grenze. Aber weißt du, das ist ziemlich hässlich. Und Sie können dies ein wenig mit HTML stylen. Aber ich werde Ihnen nicht zeigen, wie, weil es eine Art veraltete ID Sache ist. Das wirst du nie tun. Sie werden immer CSS verwenden. Wir werden nicht wirklich über CSS reden, also gibt es nicht viel anderes für mich, um darüber zu sagen, aber nur irgendwie verstehen, dass Sie Dinge in einer Tabelle ändern können, es auf verschiedene Arten aussehen lassen, und wir könnte später etwas mehr darüber reden. Aber vorerst lassen wir es einfach so. Also, ähm, was können wir sonst noch viel diotieren? Alles, worüber ich in diesem Video sprechen möchte. Im nächsten Video werden wir über ein paar etwas fortgeschrittenere Tabellenthemen Call span und Rose span sprechen und , sehen,worum es geht. Das wird also im nächsten Video 13. HTML Everyone 12 Fortgeschrittene Tabellen: OK in diesem Video, ich möchte über ein paar fortgeschrittenere Tabellenthemen sprechen. Wir haben grundlegende Tischsachen im letzten Video in diesem Video gemacht. Ich möchte über Roe sprechen, die die Rufspanne überspannt. Also hier haben wir nur grundlegende Art von Rose und Säulen, richtig? Aber vielleicht möchten Sie, dass sich bestimmte Felder erstrecken. Zum Beispiel sind alle Spalten alle Straßen. Also, wie machst du das? Was wir uns in diesem Video ansehen werden. Also komm zurück. Und zuerst, sagen wir, wir wollen eine Kopfzeile über die gesamte Spitze und wir wollen, dass sich das Ganze über alle drei dieser Spalten erstreckt. Das ist also ziemlich einfach. Wir kommen einfach wieder hierher und wir wollen das hier oben das allererste. Also lassen Sie uns eine neue TR öffnen und schließen Sie das Tag und lassen Sie uns ein th erstellen und wir wollen, dass es drei Spalten umfassen. Also benutzen wir die Rufspanne und sagten, dass gleich drei und schließen das und sagen wir, wir wollten nur sagen, ähm, meinen Tisch, richtig. Also lassen Sie uns das speichern und schauen, wenn wir es den ganzen Weg über gestreckt haben, und Sie bemerken, dass hier keine bemerken, dass hier keine Linien in der Mitte sind. Wie für alle anderen von ihnen. Im Moment können wir das sehr deutlich sehen, weil wir immer noch diese Art von albern, ähm, Grenze haben. Also, wenn ich das herausnehme und das speichere, wird es ein bisschen schwieriger zu sagen. Aber ich kann hier ein wenig Farbe werfen, also, ähm, gehen wir. BG Farbe ist gleich, und ich werde diese, ah,eine Art graue Farbe geben ah, . Speichern Sie das. Und Boom. Jetzt bekommen wir, weißt du, es erstreckt sich den ganzen Weg über die Schule. Wie ich schon sagte, Sie werden normalerweise farbige Dinge wie diese mit CSS verwenden. benutze nur eine Art alten Rückwurf Weg. Wir haben es so gemacht, bevor CSS erfunden wurde. Das wird dir sagen, wie lange her. Ich meine, 20 Jahren habe ich es früher getan, ähm, also empfehle ich nicht, dass du es so machst. Lasst uns diese Grenze schnell wieder hierher bringen. Werfen Sie einen Blick. Okay, das ist also Rufspanne. Wir haben auch eine Zeilenspanne, also kommen wir hier zurück und sagen wir hier in unserem Haupt-Header wollen wir einen anderen Tabellenkopf und lassen Sie uns einfach diese Daten nennen und wir wollen dies dehnen. Ich werde es einfach nicht dehnen. Drei Reihen, glaube ich. Werfen Sie einen Blick hier. Also 1234 Reihen. Wir wollen, dass das hier alle Straßen ausdehnt. Wie machen wir das? Nun, wir wollen es dehnen. Wir wollten überspannen entstanden. Wir haben die Zeilenspanne benutzt. Und wir wollen das auf vier setzen. Nun, das wird uns irgendwie ein Problem geben. Denn jetzt dehnt sich das nicht ganz aus, weil wir eine weitere Spalte hinzugefügt haben. Richtig? Also müssen wir dann auch diese oben optimieren, um Spanne vier zu nennen, wenn wir den ganzen Weg strecken wollten , oder? Der Boom, der das repariert. Nun, endlich, diese Daten-Ding wird nach links zerschmettert. können wir auch ändern. Genau wie wir es vorhin getan haben. Mit dieser Ausrichtung können wir auch sehen, nur eine Zeile gleich hinzufügen Aber sagen Mitte, speichern Sie dies. Komm zurück Hat nicht funktioniert. Was habe ich getan? Speichern Sie es nicht. Anruf überspannt vier. Ausrichten gleich zentriert. Speichern funktioniert nicht. Es sollte funktionieren. Oh, falscher Bereich Das ist, was wir über die Datensache wollten. Also okay, also Linie gleich Mitte mehr. Kaffee heute Morgen. Okay, Boom. Jetzt werden die Daten in die Mitte zerschmettert, und das sieht viel schöner aus. Dies waren also einige grundlegende, na ja, nicht grundlegende, fortgeschrittenere Tabellenthemen. Und Sie können, wissen Sie, diese alle Arten von verschiedenen Möglichkeiten kombinieren und kombinieren. Wir könnten dieser Farbe Farbe hinzufügen, wenn wir wollten. Es werden wir nicht, aber ja, sind grundlegende Tabellen im nächsten Video. Ich habe über CSS gesprochen und wie wir CSS nicht lernen werden. Es gibt ein paar Dinge, die wir über CSS lernen müssen. Also schauen wir uns das im nächsten Video an. Ich werde dir im Grunde nur zeigen, dass wir kein CSS lernen werden. Ich werde Ihnen nur zeigen, wie man CSS benutzt. Wie man es in eine HTML-Seite einfügt. musst du definitiv wissen. Also schauen wir uns das im nächsten Video an 14. HTML Everyone 13 CSS: OK in diesem Video. Ich möchte über CSS sprechen. , Ich weiß,ich habe dir während dieses Kurses gesagt, dass wir uns nicht mit CSS beschäftigen werden. Und wir sind nicht wirklich, dass ich dir CSS nicht beibringen werde. Ich werde Ihnen nur die drei wichtigsten Möglichkeiten zeigen, wie wir CSS in eine Webseite integrieren können und das ist wichtig. Du musst das wirklich wissen. Also gibt es drei Möglichkeiten und lass uns einfach durchgehen Der erste Weg ist in der Schlange und wir haben uns das schon ein bisschen angesehen. Wir sehen hier in unserer Tabelle, wir haben diese Stil-Attribute und dann diese und dann schließende Anführungszeichen. Dies ist in der Zeile CSS. Wir haben im HTML-Element und innerhalb davon in Zeile gefunden. Wir haben CSS hinzugefügt, und Sie können dies so ziemlich zu jedem CIA-HTML-Element tun. Hier ist unser H ein Tag. Wir könnten Stil gehen und dann einfach ein paar CSS-Farbe blau versuchen und es vielleicht richtig buchstabieren. Uh, und Sie könnten sehen, CSS ist normalerweise eine Sache auf der linken Seite mit Doppelpunkt, und dann denke ich rechts mit Semikolon. Dies sind also die Art, wie CSS oft aussehen. Also, wenn wir das speichern, kommen Sie zurück und drücken Sie Reload. Bumm! Das wird blau. Sehr, sehr einfach. Richtig? Damit wir das tun können. Werde das vorerst los. Ähm, du kannst es auch tun. Ähm, mal sehen. Ich weiß nicht, wie ich das sagen will, um, intern, denke ich. Und intern nicht mit in Linie verwechselt werden, ist es in der Kopfabschnitt unseres Dokuments erscheinen . Wir können einfach ein Style-Tag erstellen und es öffnet und schließt und alles in hier, das ist nur Sie schreiben einfach CSS hier. Jetzt, äh , hier, werde ich was schreiben und wir reden in einer Sekunde darüber. Aber du könntest das Problem hier sehen. Ich habe nur ein bisschen getan, und es beginnt schon hier oben überladen zu werden. Wenn Sie bewerten sehen, verwenden Sie Seiten und Seiten davon. Ich meine eine Menge. Und Sie wollen nicht all das in Ihrem Kopf Dokument auf jeder einzelnen Seite Ihrer Website setzen , wissen Sie? Plus, wenn Sie 1000 Seiten auf Ihrer Website haben, müssen Sie 1000 Mal mit CSS tun, und Sie möchten das nicht tun, also ist dies keine Art von ah Methode, die Sie verwenden möchten, es sei denn Sie haben nur eine kleine Sache, die Sie brauchen dio. Also hier, ähm, schrieb ein wirklich schnelles CSS Wir werden unseren Tisch stylen. Die Tabelle, das th-Tag und das TD-Tag. Ich möchte diesem einen Rand geben, der solide wird, ihn schwarz machen und dann zusammenbrechen. Und durch den Zusammenbruch konnten wir sehen, wie es hier aussieht. Es sieht fast so aus, als hätte es eine dreidimensionale. Weißt du, es gibt zwei, es gibt ein bisschen wie eine Grenze, oder? Sie können sehen, dass es irgendwie anders aussieht. Der Zusammenbruch wird das loswerden. Wir wollen nur die Linie lösen. Ich komme hier runter an unseren Tisch. Ich werde dieses Grenzschild loswerden, das wir dort angelegt haben. Lass uns das speichern und schauen und sehen, wie das aussieht. Bumm. Jetzt sieht es irgendwie schlanker aus, ein wenig moderner, und das ist immer CSS. Nun, das ist alles. Internalisiert ist alles auf der Seite selbst. Und lasst uns weitermachen. Ich werde das kopieren und es loswerden. Das willst du normalerweise nicht tun. Wie ich schon sagte, es sei denn, es ist nur ein bisschen. Nur ein kleines Snippet von CSS-Code normalerweise, was Sie wollen dio und das ist eine Art der Hauptweg, CSS zu tun, ist extern, und mit externer, ich meine, wir wollen ein CSS-Stylesheet extern erstellen und dann zu ihm. Also werde ich hierher kommen, um neue Datei zu speichern und sagen wir einfach, diese Datei speichern als, und wir speichern sie auf dem Desktop dasselbe Verzeichnis, in dem wir unsere Seite gespeichert haben. Und ich werde diesen Stil-Punkt nennen CSS In allen CSS-Dateien endet Punkt CSS steht für Cascading Stylesheets. Uns ist es egal. Also möchte ich den gleichen Tabellencode hier einfügen, und ich werde das jetzt speichern. Wenn wir hierher zurückkommen, passiert nichts, weil wir die Datei erstellt haben. Wir haben unser CSN CSS darin eingefügt, aber wir haben es nicht mit unserer tatsächlichen Webseite verknüpft. Also, wie machen wir das? Nun, wieder, zurück im Kopfbereich unserer Seite hier, ist es nicht wirklich wichtig, wo wir nur ein CSS-Tag brauchen. Also diese Link-Schiene und dann der Name davon ist Stylesheet. Und dann Herath, das ist wie ein Link. Wie, als wir früher über Links gesprochen haben. Wir möchten, dass dies darauf hinweist, wo sich diese Datei befindet. Es befindet sich im selben Verzeichnis. So könnten wir einfach schreiben Stil diese Rechnung Stil, die CSS was auch immer. Wir nennen diese Datei. Richtig? Also sagen Sie, das kommt zurück und jetzt ist es verbunden. Wenn wir auf Reload drücken. Boom, Wir können das sehen, Ähm, dass CSS so sehr cool. Ähm, weißt du, wir können eine gehen, wie wir es früher in der Strichfarbe blau gemacht haben, oder? Wir machen das genau hier. Und dann, wenn wir reload wem das blau wird, , dass merken Sie, dasswir das h one Tag überhaupt nicht geändert haben. Deshalb ist das so cool. CSS und HTML arbeiten zusammen, aber sie sind es nicht. Sie müssen keine Änderungen an Ihrem HTML vornehmen, damit das CSS irgendwie wirksam , was wirklich cool ist. Also fügen Sie einfach diesen CSS-Link oben auf Ihrer Seite im Kopfbereich hinzu und das war's. Also sehen Sie, das ist CSS. Vielleicht sind Sie damit vertraut. Ich werde keine weiteren Details auf CSS eingehen, ich könnte einen ganzen Kurs auf CSS unterrichten. In der Tat habe ich in der Vergangenheit, äh,und äh, wir werden es einfach daran belassen, für den größten Teil des Grundes, warum ich das tue, weil, um ehrlich zu sein, niemand CSS schreibt noch mehr. Es gibt so viele CSS-Frameworks, in denen Sie es einfach herunterladen können, es direkt mit ihm verknüpfen und boom. Es funktioniert, dass niemand schreibt. CSS CSS ist ein Schmerz. ist es wirklich. Es ist sehr knifflig, weißt du. Historisch gesehen funktioniert CSS in jeder Version eines Browsers ein wenig anders. Sie wissen also, dass Sie Firefox haben. Sie haben Chrom. Sie haben Internet Explorer bisher haben Sie Dutzende von anderen Browsern, und sie alle verwenden CSS ein wenig anders. Also musstest du eine Version für Firefox machen. Abneigung gegen Chromabneigung gegen Safari. Im Laufe der Zeit begannen diese ein wenig zu vereinheitlichen. Aber es gibt immer noch kleine Dinge, die optimiert und Dinge, die Sie für verschiedene Browser tun müssen , und es ist nur ein Schmerz, und niemand mag es tun. Deshalb haben wir CSS-Frameworks, die Sie einfach einfügen Boom kopieren können. Es funktioniert und wir werden anfangen, über die im nächsten Video zu sprechen. Wir werden uns das Bootstrap-Framework ansehen, das bei weitem das beliebteste ist. Und ja, das ist alles für CSS in diesem Video. Im nächsten Video schauen wir uns Bootstrap an. 15. HTML Jeder 14 Einführung in das Bootstrap: Okay, also haben wir die meisten der wichtigsten HTML-Elemente durchlaufen, jetzt gibt es ein paar Randdinge hier und da. Wir haben nicht darüber gesprochen, aber im Großen und Ganzen dieses Zeug, über das ich in der ersten Hälfte dieses Kurses gesprochen habe, bis jetzt wird es dir 85 90% von dem bekommen , ,was du jemals mit HTML machen wirst. Der Rest ist nur eine Art, einen Stil mit CSS hinzuzufügen, und wir werden in diesem Kurs nicht wirklich darauf eingehen. Worauf wir hineinkommen werden, ist ein CSS-Framework zu verwenden. Nun, ich werde Ihnen kein CSS beibringen, aber ich werde Ihnen zeigen, wie Sie ein CSS-Framework in Ihr HTML-Dokument integrieren und der, den wir betrachten werden, wo wir es jetzt betrachten, heißt Bootstrap . Also, wenn Sie über hatten, um Bootstrap dot com zu bekommen, hier ist es. Es ist völlig kostenlos. Dies wird von einigen Jungs auf Twitter erstellt und ich weiß nicht, vielleicht vor 10 Jahren oder so und es wurde so massiv populär, die Jungs kündigen Twitter und sie machen das jetzt Vollzeit und sie sprengen es irgendwie ein Twitter aus . Ich glaube nicht, dass Twitter gehört. Dies ist Open Source, aber wir sind jetzt auf Version 4.1. Und wenn die Version anders ist, als er diesen Kurs gesehen hat, ist das in Ordnung. Es spielt keine Rolle. Sie können oft ältere Versionen durchschalten, wenn Sie diejenige verwenden möchten, die ich speziell in diesem Kurs verwende, aber es spielt keine Rolle. Schauen wir uns das mal an. Schneiden Sie die Dokumentation und das ist es, und wir werden uns in ein wenig mit all dem befassen. Ich werde Ihnen zeigen, wie Sie es installieren und wie Sie es verwenden und so etwas. Aber schauen wir uns hier durch und gehen wir zu Komponenten und lassen Sie uns nur einige der Dinge sehen, die Sie tun können. Also gleich von der Fledermaus, bekommen wir diese große Liste von Sachen, richtig? Also hier diese Luftwarnungen. Wenn Sie eine Warnung auf Ihrer Seite wünschen, hier ist der Code. Alles, was Sie tun müssen, ist, kopieren Sie dies auf Ihre Seite und boom, Sie haben diese Warnung. Sehr cool. Ähm, Knöpfe. Wenn Sie Knöpfe mögen, möchten Sie verschiedene farbige Knöpfe. Hier ist der Code für all das. Sobald dies installiert ist, sollten Sie kopieren und einfügen und es anpassen müssen, wissen Sie, sagen, was Sie wollen, dass die Schaltfläche sagen. Und das war's. triff Karten, kleine Karten. Sie können ein Bild hinzufügen. Irgendwie cool. Äh, Karussell. Hast du die schon mal gesehen? Schieberegler. Sie werden angerufen. Sie wissen, Sie können dies zu Ihrer Website hinzufügen, indem Sie diesen Code kopieren. Hart es rein, zwickt es ein bisschen. Und Boom, es funktioniert einfach. Sehr cool. Ähm, mal sehen. Jumbotrons nur diese große Kiste. Das macht Spaß. Wir werden mit dieser, äh, nab unsere, Sie wissen schon, diese Nah Bars von oben spielen äh, nab unsere, Sie wissen schon, . Jede Website hat eine knave Bar. In Ordnung, hier ist ein AB, wo du benutzen kannst, und du könntest die Farbe ändern. Ich zeige Ihnen, wie Sie das tun, indem Sie es kopieren und einfügen und es dann irgendwie twittern . Das sind also all die verschiedenen Dinge. Und sehen Sie, was haben wir sonst noch? Diejenigen mit Komponenten. Wenn wir Ach anlegen, sollten Sie das vielleicht lesen. Wenn Sie daran interessiert sind, dieses Ding tatsächlich zu verwenden, zeigt dies, dass es ein genanntes Grid-System ist. Wie Sie Dinge auf einer Seite positionieren können. Wissen Sie, unsere Seite. Wir haben es einfach getan. Weißt du, es ist sehr fade. Nur boom genau dort auf der Seite. Aber wenn du diesen Tisch wolltest, weißt du, hier drüben mit einem Bild, das um ihn herum gewickelt ist und all diese Art von Sache Ah, würdest du das mit verschiedenen Containern und verschiedenen Grid-Systemen tun. Und Sie können hier darüber lesen. Ich werde das nicht wirklich in die Tiefe bringen. Wie ich schon sagte, ich lehre kein CSS. Ich will dir nicht mal Bootstrap beibringen. Ich will nur, sollte es Ihnen zeigen, was möglich ist? Beginnt euch, zeigt euch, wie man lernt, wenn ihr an Lernen interessiert seid, und ich führe euch durch ein paar Dinge, damit ihr sehen könnt, wozu es fähig ist? Das ist cool. Also, das ist wirklich ich will alles, was ich in diesem Video reden wollte, nur ah, schnelle Einführung in das, was dieses Ding ist und was es kann dio im nächsten Video. Wir werden diesen Abschnitt genau hier durchgehen. Ich zeige Ihnen, wie Sie dies tatsächlich auf Ihrer Webseite verwenden können. Sie können sehen, und ein wenig Starter-Vorlage. Weißt du, das sollte wohl vertraut aussehen. Jetzt hat es viele Dinge, die wir bereits gemacht haben. HTML der Arzt Tag Kopf auf den Titel. Die Leiche. Da ist ein H, du weißt schon, Tags schließt. Also ist es sehr, dass Sie mit dem HTML bereits vertraut sein sollten, so dass es viel einfacher zu verwenden, so dass wir in all das im nächsten Video bekommen. 16. HTML Everyone 15 Installieren von Bootstrap: Okay, Also im letzten Video haben wir über Bootstrap ein wenig in diesem Video in einer Show gesprochen, die du tatsächlich anfangen hattest, es zu benutzen . Es gibt also im Grunde zwei Möglichkeiten, es zu tun. Also gehen Sie über, um Bootstrap dot com zu erhalten und klicken Sie auf Dokumentation, und Sie können entweder dieses und seinen Stall herunterladen und dann verwenden, oder Sie könnten einfach damit verlinkt werden. Das waren also die beiden Möglichkeiten und immer, wie ernst Sie sind, sollten Sie es herunterladen. Der einzige Grund, es herunterzuladen, ist, wenn Sie es optimieren möchten und Sie wahrscheinlich nicht, richtig. Wenn Sie es optimieren möchten, kennen Sie bereits CSS und möchten es modifizieren, um sehr spezifische Dinge zu tun. Und das könntest du tun. Und ich werde nicht darüber reden. Das ist in diesem Kurs weit über uns hinaus. Aber für die meisten Menschen können Sie einfach damit in Verbindung gebracht werden und was meine ich damit? , Weißt du noch,als wir unseren gefälschten kleinen Stil kreierten? Nun, es war nicht gefälscht, es war echt. Aber kitschig kleine Stylesheet hier Stil Punkt CS sagt, dass wir mit ihm verknüpft erscheinen die Spitze mit diesem Tag Nun, Sie können das gleiche Tag verwenden, aber stattdessen, zeigen Sie dies auf Sie wissen, cdn dot Get bootstrap dot com Schrägstrich starten. Was auch immer es ist, das ist nicht das Richtige, das ich in einer Minute betrachten werde. Aber du könntest das einfach tun, und dann war's das. Das ist alles, was du tun musst. Fang einfach an, das zu benutzen. Nun, es gibt noch eine Sache, die ich in einer Sekunde darüber reden werde. Das ist es, was wir didieren werden. Ich werde das jetzt einfach lassen. Und so lassen Sie uns einfach weitermachen und das tun. Also, wie machen wir das? Nun, geh hier runter und suche nach dieser Starter-Vorlage. Und im Grunde, was Sie tun wollen, ist, diese ganze Sache zu kopieren. Nun, ich werde das nicht tun, weil wir bereits die Bits unserer eigenen Starter-Vorlage haben, aber ich werde das Zeug unten packen. Jetzt möchten Sie sicherstellen, dass Sie diese J-Abfrage in diesem Javascript-Zeug in dieser Bootstrap-Javascript-Datei greifen . Und diese Luft nur Links zu externen CD-Enden, Content-Delivery Netzwerke, die diese Dinge beherbergen. Also werde ich das alles in Ordnung hervorheben. Klicken Sie und kopieren Sie und gehen Sie zurück hier. und ich werde einfach unsere unteren zwei Zeilen löschen und fügen Sie dies einfach in Rechtsklick ein und fügen oder Steuerelement V auf Ihrer Tastatur ein, damit Sie sehen können, dass wir das haben und wir haben unsere schließenden Tags hier. Also sind wir jetzt auf halbem Weg. Wir brauchen nur dieses Zeug an der Spitze. Siehst du also? Wahrscheinlich wollen wir das hier drin. Sehen Sie, das ist das Link-Rail-Stylesheet und dann die Referenz und dann der Link zum eigentlichen Ding, richtig? Genau wie wir hier haben. Genau dasselbe Zeug. Im Grunde zeigt es nur auf ein anderes Ich, Earl. So sehr cool. Sehr einfach. Und wir können nur Dies ist Ah, Vieux Port, der Ihre Website mobil macht bereit. Also, wenn Sie möchten, dass Ihre Website auf einem Handy gut aussehen, alles, was Sie tun müssen, ist fügen Sie diese Zeile und es wird. Es ist Magie. Es ist tatsächlich Magie, denn sonst braucht es eine Menge Beschichtung, um eine Website mobil bereit zu machen? Aber nicht, wenn Sie ein Framework wie Bootstrap verwenden, was einer der Hauptgründe ist, warum Leute dies verwenden, weil es einfach so einfach ist. Also lassen Sie uns einfach diese beiden Leitungssteuerung kopieren, sehen Sie, um zu kopieren und zurück zu gehen. Und ich werde diese Linie loswerden und diese beiden Zeilen einfügen und in Dellen ein wenig schwächen . Wenn wir wollen. Es spielt keine Rolle. Okay, also lasst uns das speichern und mal sehen, nur indem wir das tun, was mit unserer kleinen Webseite hier passiert ist? Wenn wir jetzt neu laden klicken, zuerst Sie zuersteinen Blick. Alles verbrennt dir das in den Kopf, weil es sich etwas ändern wird, und das wirst du merken wollen. So bereit? 123 Nachladen! Bumm! Alles ist etwas anders, oder? Unsere Tische haben alles vermasselt, und wir werden das etwas optimieren. Dies wird zur Seite gescruncht, aber das sagt uns, dass der Bootstrap installiert wurde. Also erste Dinge zuerst sehr schnell. Ich werde einfach all das Zeug von der Ecke da kriegen. Und dazu werde ich einen Bootstrap-Container benutzen. Also erstellen wir einfach ein div. Lass es uns hier drüben machen. Div, mit einer Klasse von Containern. Sie sagten, früher Bootstrap hat Container als ihre Art von Grid-System. Ein Teil davon. Also, jetzt müssen wir das schließen. Also geh einfach bis zum Ende hier und schließe es. Also retten wir das. Kommen Sie zurück und schlagen Sie. Nachladen. Okay, das ist ein bisschen besser. Äh, lassen Sie uns Limettenbruch oder zwei hinzufügen. Lassen Sie uns diesen Stil loswerden. Speichern Sie das hier zurück. Ok? Das ist nicht viel besser. Aber wir werden dies im nächsten Video in den nächsten Videos optimieren und zeigen Ihnen genau, wie Sie diese verschiedenen Dinge verwenden . Also, äh, ja, das wird im nächsten Video sein. 17. HTML Jeder 16 Bootstrap Tabellen: Okay, was wollen wir hier machen? Nun, wir haben diesen Tisch erinnert. Wir spielen mit und lassen es schöner aussehen. Also, wie machen wir das? Nun, zuerst Dinge. Kommen wir zurück und schauen uns unseren Tisch an, und wir werden all das Styling, das wir bisher gemacht haben, loswerden. Und das ist so ziemlich das ganze Styling, das wir gemacht haben. Also für sie, ähm, was sonst? Lassen Sie uns die Spannweite dieser Reihe loswerden. Lasst uns das wieder ändern. 23 Das ist mein Tisch, das sich an der Spitze erstreckt. Und lasst uns loswerden, diese Datensache zu sehen. Es ist nur, dass ich das wirklich brauche. Also lasst uns das speichern und einen kurzen Blick werfen und sehen. Okay, das ist also ein bisschen besser. Werde das los. Mein Tisch. Denk daran, das wirklich zu brauchen. Wir werden einfach die ganze Tabellenzeile loswerden. Okay, also sind wir wieder auf die Grundlagen. Sehr einfache kleine Tabelle hier. Name, E-Mail-Adresse, Adresse. Ein Lieblings-Anrufer. Alles hat zusammen geglättet. Nicht sehr toll. Was machen wir? Nun, gehen wir zurück hierher. Fangen wir an, Schub zu bekommen, dr dot com, und du willst es immer. Klicken Sie einfach auf die Dokumentation. Und dann wollen Sie fast immer zwei Komponenten runterkommen. Und dann wollen Sie hier nur nach dem Ding suchen, was Sie tun wollen. Und wir wollen Tische machen und ich schaue und ich sehe nirgendwo Tische. Also dann versuche ich den nächsten Inhalt. Und sicher genug, da ist es. Tisch. Also klicken wir darauf. Und hier sehen wir Tabelle. Also, um eine Tabelle in Bootstrap zu tun. Alles, was wir tun, ist das Gleiche, bevor wir unser Tabellentag erstellen, aber wir geben ihm eine Klasse von Tabelle, die ziemlich einfach ist. Kopieren Sie das. Kommen Sie hierher zu unserem Tisch-Tag und fügen Sie es ein. Speichern Sie das und sehen wir, was das getan hat. Bumm. Direkt von der Fledermaus. Das sieht ziemlich gut aus, oder? Ja. Wir haben nette Kleinigkeiten hier. Das ist nicht toll, aber schwächen. Wir können jetzt damit spielen. Nun, was können wir diotieren? Wir scrollen einfach hier durch und schauen uns Sachen an. Wenn Sie es dunkel wollen, geben Sie ihm eine Klasse von Tabelle dunkel. Das wollen wir nicht. Das sind hässliche Tischkopf-Optionen. Wir könnten Dio, äh, sagen wir, Tischscheinwerfer jetzt lassen wir das einfach für jetzt. Ja. Ok. Erste Dinge zuerst. Nun, sie sind gestreifte Rose. kommen wir zurück. Wir wollen eine Grenze, richtig? Weil es hier und genau hier keine Grenze gibt, gibt es nichts. Also lasst uns einfach diese Tabellenklasse sehen, sie bringt auch dieses kleine Ding da rein. Es ist also, den Kopf hierher zu kopieren. Geben wir ihm einen Raum und ein Tempo, das richtig ist, und speichern Sie es und boom. Ehrfürchtig. Sehr cool. Damit wir das tun können. , Sagen wir,wir wollen Striped Rose. Richtig? könnten wir tun. Sehen Sie? Ja. Innerhalb der Tabellenklasse wieder. Wir fügen nur diese nächste kleine Sache Tisch Bindestrich gestreift. Also kopieren Sie das. Geben Sie ihm einen Platz. Und das ist die Sache mit CSS. Du könntest den Dingen einfach einen Raum geben und einfach weiter Sachen hinzufügen. Das macht immer Spaß. Alles klar, jetzt haben wir gestreift. Sehr cool. Was können wir noch Dio bestellen Tabelle. Wir haben diese Grenze weniger stabil gemacht, was? Verbale Rose. Also, wenn Sie mit der Maus über die Farbänderungen bewegen, das ist cool uns. Und dass wir ihm nur einen Tisch geben. Strich, schweben, anderen Raum sparen, Eine andere Paste. Und jetzt boom. Sehr cool. Normalerweise benötigen Sie Java-Skript, um dies zu tun. Aber denken Sie daran, wir haben alle JavaScript-Sachen hier unten hinzugefügt und ah, es macht alles automatisch in Bootstrap. Sehr, sehr cool. Also mal sehen, was noch? Wir kommen wahrscheinlich an das Ende dessen, was wir tun könnten. Wir könnten einen kleinen Tisch machen. Oh, es ist nur bei diesem. Ich sehe, das ist irgendwie groß. Wenn stattdessen wollen wir in der Lage klein. Ist das richtig dran? Und Boom. Nun ist es irgendwie, dass Sie das vielleicht nicht mögen. Was auch immer du willst, wir können verschiedene Farben ändern, oder? Tun Sie das. Wir fügen jedes dieser Dinge hinzu. Also primär ist diese Farbe sekundär. Ist diese Farbe Erfolge diese Farbe? Also lassen Sie uns Tabellenerfolg hinzufügen, und wir wollen das nur einem bestimmten TR geben, oder? Also lasst uns einfach das tr finden, das wir wollen. Sagen wir, diese mittlere und wir geben ihm nur eine Klasse von diesem Ding. Speichern Sie das, kommen Sie zurück und schlagen Sie. Nachladen. Bumm! Jetzt ist es grün. Wie cool ist das, richtig? Das ist einfach so einfach. Und so könntest du alles tun, was du untertitelt hast. Ich bin mir nicht wirklich sicher, was das tut keine reaktionsfähigen Tabellen, diese Luft ersten Handys und Dinge, die Sie darüber lesen können, wenn Sie wollen, wenn Sie wollen. So sehr cool. So verwenden wir Boost Draft. Wann immer Sie wollen, was nur in die Dokumentation kommen, beginnen Sie mit Komponenten. Es wird wahrscheinlich da drin sein, wenn es nicht versucht, verschiedene Abschnittsinhalte eine Typografie hat , die wie Schriftart-Zeug ist . Jedes Zeug, ähm, Bilder. Du machst verschiedene Dinge mit Bildern, ähm, Tabellen und Figuren. bin mir nicht sicher, was diese Figur ist, aber größtenteils alles, was er will, wird in diesem Komponentenabschnitt sein. Im nächsten Video gehen wir also durch diesen Komponentenabschnitt, um einige verschiedene Dinge zu betrachten. Ich denke, vielleicht schauen wir uns die Schaltflächen an, um zu sehen, wie diese funktionieren, also wird das im nächsten Video sein. 18. HTML Everyone 17 Bootstrap Navbar: Okay, was wollen wir sonst noch in Bootstrap sehen, damit wir durchgehen und uns all diese Dinge ansehen können , aber ich werde nur ein paar der meisten für häufigere Dinge aussuchen, die du damit umgehen wirst . Wir haben Knöpfe. , Ich wollte dir zeigen,wie man das macht, aber es ist wirklich einfach. Äh, ah. Sie können eine Schaltfläche zu einem Link hinzufügen. Es ist also das mit einem Textlink. Sie können nur in Ihrem h r F-Tag in einer Klasse mit einem dieser Dinge, und der Link wird zu einer Schaltfläche so sehr, sehr einfach dort. Aber was ich wirklich sehen möchte, ist Knave Bars. Das ist diese Leiste oben auf dem Bildschirm. Jede Website hat heutzutage eine knave bar, es scheint so, wie wir eine mit Bootstrap erstellen? Nun, Sie können hier durchblättern und sie haben eine Reihe von verschiedenen Optionen mit Bildern ohne Bilder. Ich werde nur die erste 1 hat eine Schul-Suchleiste drin, und, ah, und, ah, ah, paar Drop-Down-Zeug. Also lassen Sie uns einfach diesen Kopf zurück auf unsere Webseite kopieren, und wir wollen direkt unter dem Body-Tag kommen. Wir wollen, dass dies das erste ist, was auf unserer Seite ist. Also könnte ich einfach V steuern oder mit der rechten Maustaste auf Entschuldigung klicken und auf Einfügen klicken. Und das alles haben wir reingesteckt. Also werde ich nur diese Kontrolle speichern und einen Blick werfen und sehen, was wir hier haben. Und Boom, wir haben dieses coole Ding. Nun, ähm, das lässt das Javascript fallen, damit das funktioniert. Sehr cool. Dies ist eine Suchleiste. Es geht eigentlich nirgendwo hin, weil wir es nicht programmiert haben, etwas zu tun. Wir gehen nicht zu dir, aber ein sehr cooles Jetzt bin ich kein großer Fan von diesem sehr, sehr hellgrau. Also das erste, was ich normalerweise mache, ist, an die Spitze ihrer Nab zu kommen, unsere hier nicht schlechter, hat nicht unser Licht. Ändern Sie es einfach, um unsere dunkle und direkt daneben zu nab. Zwei Spots. Speichern Sie diese und laden Sie sie neu. Und Boom, wir bekommen diese dunkle. Sehr, sehr cool. Und die grüne Art passt zum Grün hier. Wir haben ein Thema darüber vor sich. Richtig. Das fängt also an, zusammen zu kommen. Dies fängt an, wie eine echte Website aussehen. Und alles, was wir tun, ist, einige Dinge zu kopieren und einzufügen. Jetzt können wir das ändern, damit wir es nicht wollen. Staatliche Knave-Bar. Sagen wir es. Gehen wir einfach hier durch. Wir sehen diesen Link sofort, nab unsere Marke, und es sagt, nab sind, wenn wir nur ändern. Lass uns den John Elder ändern, damit er zu einer persönlichen Website wird. Ich weiß nicht, was auch immer. Boom, John. Älter. Sehr cool. Ähm, diese Drop-down-Liste, ich will nicht wirklich runterfallen. Ich habe nicht so viele Seiten auf meiner kleinen Website, also möchte ich das nicht loswerden. Also, wie mache ich das? Nun, ich kann hier einfach nicht durchblättern und nach Drop-Down suchen. Und hier sehe ich Drop Down. Ich erinnere mich, dass ich früher darüber gesprochen habe, Verbündete in Knavenstangen zu verwenden. Haben Sie schon mal ein Beispiel gesehen? Ähm, sofort. Das ist also cool. So können wir hier klicken und wir konnten das hier unten oder die abschließenden Ally Highlights sehen. Also können wir diese ganze Sache einfach loswerden, speichern und neu laden. Boom! Und jetzt ist es weg. Sehr cool. Ähm, auch dieses Haus und das deaktiviert. Ich will die beiden auch loswerden, nur weil wir ihn nicht brauchen und nur weil ich dir zeigen will , wie es geht. ich hier durchschaue, sehe ich dieses Haus wieder. Suchen Sie die AL, die ich öffne und schließe, und ich lösche sie einfach. Das Gleiche mit den Deaktivierten, da Sie HTML kennen. Nun, es macht es sehr einfach, hier reinzukommen und dies in irgendeiner Weise zu modifizieren, die Sie wollen, was sehr cool ist. Also sagen wir das jetzt, dieser Link, ich werde das ändern, um über mich zu sagen. Wir haben keine „Über mich“ -Seite, aber das weiß noch niemand. In Ordnung. Also, John Elder, dass ich anfing, ziemlich gut auszusehen. Also ist er wirklich einfach zu bedienen. Bootstrap. Deshalb meine ich buchstäblich Millionen von Menschen Millionen von Websites verwenden Bootstrap. Ähm, es ist einfach und es ist völlig kostenlos. So sehr, sehr cool. Im nächsten Video, ich denke, wir werden damit ein bisschen mehr spielen. Vielleicht schauen wir uns diese Karten an, Sagen Sie, wie diese Ursache zu verwenden Das ist wirklich sehr cool. Und das wird im nächsten Video 19. HTML Jeder 18 Bootstrap Karten: Okay, weiter. Schauen wir uns diese Karten an. Klicken Sie also einfach auf den Karten-Button hier und hier haben wir es. Also, ich kopiere diese ganze Sache, komm zurück auf unsere Seite und lass uns das unter unseren Tisch stellen. Also habe ich ein paar Zeilenumbrüche hier nur für ein gutes Maß gesetzt. Und ich werde diese ganze Sache einfach einschlagen, und das können wir, wenn wir wollen. Also lasst uns das speichern und einen Blick darauf werfen. Also okay, wir haben das hier. Hier gibt es kein Bild. Also lassen Sie uns das Bild von meinem Hund hinzufügen, mit dem wir vorhin herumgespielt haben. Und das könnten wir nur mit dieser SRC-Sache machen. Und ich denke, das war es, was Aspen zu p und G. War das der Name davon? Ich kann mich nicht erinnern. Wir werden es bald herausfinden. Ich könnte es nachsehen. In Ordnung. Sehr cool. Und Sie könnten eine Größenänderung sehen. Ist es für uns allein? Vielleicht war es nur Aspirin, das ist. Ich spiele nur an dieser Stelle, weil das sehr lustig ist. Sie schaut in die andere Richtung. herrschaftlicher, sehr königlicher Hurrikan. Okay, also haben wir diesen Kartentitel, wir können das ändern und lassen Sie uns das einfach ändern, um zu sagen, wie Chillin zu Hause gewesen und dann Hallo. Mein Name ist Aspen und ich regiere alles, was ich sehe, in jede Richtung. Ja, so ziemlich fasst es zusammen. Und jetzt haben wir das hier. Aber jetzt bin ich kein großer Fan von diesem Knopf. Lasst uns hier rüber zu unseren Knöpfen gehen und uns eine andere Farbe aussuchen. Wir haben also eine Art dunkles Thema, das hier vor sich geht. Dürfen wir das Grün benutzen? Vielleicht bleiben wir einfach bei der Dunkelheit, also werde ich sekundär gehen. Also, um das zu ändern, haben wir einfach hier rüber getroffen und wir sehen diese btm btm primär. Wir wechseln nur zu sekundären und, ähm, füttern Espe. Ich weiß es nicht. So sehr cool. Also wissen Sie, nur so einfach, diese Dinge mit Bootstrap zu tun. Weißt du, es geht nur darum, das Ding zu finden, das du spielen willst, um es zu kopieren, es ein bisschen zu optimieren. Jetzt, wo Sie wissen, html, können Sie hier irgendwie durchlesen. Hier haben wir ch fünf Tag. Wir wissen, was das ist. Das P-Tag. Wir wissen, was das ist. Da ist Aneha, Ref-Tag am Link. Offensichtlich. Sie wissen, was das das einzige ist, was irgendwie nicht vertraut ist, sind diese div-Klassen und das nur reine CSS alles in CSS Ah, Div Divider. Ähm, das ist genau das, was Sie alles in und CSS einpacken und dann geben Sie ihm eine Klassensortierung, wie das Attribut von CSS, das genau sagt, welchen Teil von CSS Sie dieses Ding stylen möchten . Also wissen Sie, die Klasse des Kartenkörpers, die Klasse des Kartenbildes, die Klasse der Karte, die hier oben auf dem Tisch zu unterrichten ist, einfach, wie das funktioniert. Sehr, sehr einfach und sehr cool. Also im nächsten Video, ich denke, wir werden uns ein oder zwei weitere Boot Strappy Dinge ansehen und dann nennen, dass getan. Und so wird das im nächsten Video sein. 20. HTML Everyone 19 Bootstrap Jumbotron: Okay, also sind wir hier ziemlich fertig. Lassen Sie uns einfach ein paar weitere kleine Dinge machen, nur um mit diesem zu spielen und ein wenig mehr Erfahrung mit diesem zu bekommen . So erschien an der Spitze. Wir sind herzlich willkommen auf meiner Website. Das ist OK, aber was könnten wir noch? Nun, schauen wir uns hier durch. Wir haben ein Jumbotron. Das ist irgendwie cool. Ich mag das Jumbotron hier. Wir haben ein flüssiges Jumbotron. Lass uns einfach weitergehen und diesen Kerl kopieren und mal sehen, anstatt unser H eins. Lassen Sie uns nur etwas Platz hier und fügen Sie all das ein. Speichern Sie das und schauen Sie sich an, was wir hier haben. In Ordnung? Vielleicht ist das cool. Vielleicht ist das nicht, ich weiß es nicht. Ähm, also lasst uns das optimieren. Lassen Sie uns diesen Knopf loswerden. Wir brauchen sie nicht. Und wir brauchen diese Zeile hier nicht in diesem kleinen Text. Also lasst uns etwas von diesem Zeug loswerden. Also zuerst, ich werde das alles hervorheben und es irgendwie ein bisschen überstehen lassen. Okay, also wollen wir den Knopf nicht. Also lasst uns diesen Knopf loswerden. Der Boom ist weg. Und wir wollen nicht, dass diese HR wir nicht über HR-Tags gesprochen haben H R steht für horizontale Regel und diese Luft reine HTML-Tags. Und das macht nur eine Linie, verstehst du, richtig? Ich kann es nicht wirklich hervorheben. Aber direkt über diesem Blau, diese Linie hier hervorhebt, ist das eine horizontale Regel. Das ist cool. Ähm, oder wenn es peinlich ist zu sagen, ich benutze die mehr, als ich sollte, also lasst uns das loswerden. Lassen Sie uns dieses P-Tag loswerden. Okay, was haben wir sonst noch hier? Drei. Laden und sehen. Alles klar, lassen Sie uns gut aussehen. Ähm, lasst uns Hallo, Welt zu ändern , ich weiß es nicht. Willkommen auf meiner Website. Das ist meine zare kleine Ecke des Internets. Wir sollten Internet buchstabieren, oder? Internet sieht immer noch falsch aus. Äh, huh. Ausrufezeichen. Schauen Sie sich meine erstaunliche Tabelle unten an, und wenn Sie wirklich cool sind,können Sie Aspen füttern. Schauen Sie sich meine erstaunliche Tabelle unten an, und wenn Sie wirklich cool sind, In Ordnung. Okay. Also gut, das ist irgendwie lahm, aber, wissen Sie, wissen Sie, nur ein weiteres Beispiel dafür, wie man Dinge mit Stiefelentwurf machen könnte, und ah, ich bin auch irgendwie peinlich zu sagen, dass ich die Jumbotron auf Websites öfter als ich tun sollte. Es sieht ziemlich dumm aus, aber, weißt du, so ist es. Also schaut hier durch Semmelbrösel. Das waren eine Art nützlicher Schaltflächen, die wir uns bereits angesehen haben, um, Drop-Downs. Das ist cool. Sie brauchen Formulare. Wir sprechen nicht wirklich über Webformulare eher eine Backend-Programmierart, aber Sie können Formulare stylen. Bootstrap. Sehr einfach. Ähm, Naff Bars, Paginierung. Sehr cool. Einfaches Hinzufügen von Zwischenstopps. Interessante Fortschrittsbalken, mehr programmatisch. Wirklich Tool-Tipps. Wir werden die Dinge schweben, und das ist es so ziemlich. Also, ja, das ist Bootstrap. Es ist wirklich einfach. Und ich hoffe, es ist irgendwie interessiert dich zu sehen, wie man das benutzt. Und ich hoffe, du spielst selbst damit herum. Tauchen Sie ein und fangen Sie an, Dinge zu testen. Fang einfach an, damit zu spielen. Das ist der beste Weg, um Bootstrap zu lernen und, ah, sehr cool. Also denke ich, dass es so ziemlich ist. Wir haben ein sehr grundlegendes Verständnis von HTML. Es ist wirklich nicht so schwer, weißt du, ich glaube,du hast gesehen, dass es keine Programmiersprache ist. Es ist wirklich nicht so schwer, weißt du, ich glaube, Es geht nur darum, Tags zu öffnen und Tags zu schließen. Und dann innerhalb des Tags wird der Text bis zu dem Tag markiert, was auch immer das Tag ist. Und dann, wenn Sie Zehen-Stil Augen wollen, macht es ziemlich gebrauchte Farben, Layouts, solche Dinge. Das ist alles CSS. Das ist eine viel fortgeschrittenere Sache. Ähm, Sie können CSS lernen und ich empfehle Ihnen, das zu tun. Werden Sie kein Experte bei CSS, sondern einfach genug gelernt. Ähm , so wie du es gelernt hast. HTML. Du hast gerade genug gelernt, gefährlich zu sein, oder? Du hast genug gelernt, um es irgendwie lesen zu können, grundlegende Dinge zu tun und, wichtiger, es verstehen zu können, wenn du es woanders siehst. Wenn Sie Bootstrap verwenden möchten, wissen Sie, dass Sie hier durchschauen können und es gibt viel Sehen Sie, ob es viel HTML in Boots Entwurf gibt. Nun, du weißt das alles. HTML Jetzt wissen Sie, was es bedeutet, was es tut, der Zweck davon, wie man es optimiert, wie man es macht. Wissen Sie, tun Sie genau das, was Sie wollen, und das ist wirklich, wirklich alles, was Sie in diesem Zeitalter der modernen Web-Entwicklung wollen. Also denke ich, das war's. Im nächsten Video werden wir ein paar Dinge sagen. Wickeln Sie das ein und gehen Sie von dort aus weiter 21. HTML Jeder 20 Bonus: In Ordnung. Also denke ich, wir werden das hier „erledigt“ nennen. Sie haben einen sehr, sehrsoliden Grundschuh. Sie haben einen sehr, sehr Es ist ein fortgeschrittenes Verständnis von HTML. So schwer war es nicht. Ich meine, das ist ein sehr kurzer Kurs, aber html ist sehr einfach. Es ist einfach nicht viel dran. Wie ich schon sagte, am Anfang ist HBO nicht wirklich eine Programmiersprache. Es ist eine Markup-Sprache. Ich werde nur die Tags auswendig lernen und lernen, wie man sie benutzt. Das ist so ziemlich es. Also, ähm, lustiger Kurs. Ich hoffe, du hattest eine gute Zeit. Ich hatte eine gute Zeit, es zu unterrichten. Wenn Sie diesen Kurs mögen, wenn Sie meinen Unterrichtsstil mögen, was auch immer und Sie wollen, nehmen Sie andere Kurse von mir. Geh rüber zu kota me dot com. Dies ist meine Website und es hat alle meine Kurse. Da sind über 30. Ich füge jede Woche neue Kurse hinzu und du siehst, dass wir wirklich coole Sachen haben. Ruby auf Schienen, Python, Django, JavaScript, PHP. Du nennst es. Wir haben wahrscheinlich über 1000 Videos an dieser Stelle über 30 Kurse. 50.000 plus Studenten an dieser Stelle. Ja, ich glaube, wir sind noch bei 50. Wir haben noch nicht ganz 60 getroffen, aber ja, dieser Kurs genau hier. , nur um Ihnen ein Beispiel zu geben, erstellen wir einen Klon der Website Pinterest mit Ruby on Rails. Sehr cooles Zeug. Ähm, hier erstellen wir eine Kryptowährung Desktop-Portfolio-App mit Python. Sehr cool, Django für den Aufbau von Websites. Wie ich schon sagte, JavaScript, JavaScript, ein paar Datenbank-Zeug. Microsoft Sequel Server bekam Ah, meine Fortsetzung. Server-Kurs. Irgendwo da unten auch. Ruby-Programmierung oder Kryptos-Zeug oder Rubin auf Schienen. Stuff Ruby für die Spieleentwicklung, Roku, und gehen Sie mehr PHP einige Kryptowährung Zeug. Sehr cool, Lennox, wenn du jemals neugierig gewesen bist, was Lennox ist und wie man es benutzt, dann ist es ein großartiger Kurs dafür. Und wir haben ein wenig Marketing s CEO und E-Mail Marketing waren Programmierer. Wir bauen Sachen, du musst immer noch die Sachen vermarkten, die du baust. So lehren Sie irgendwie auch, wie man das macht. Mehr Datenbank-Zeug, mehr PHP-Zeug. So sehr cool. Wenn Sie interessiert sind, klicken Sie auf diese Anmeldung noch heute. Aber jetzt, normalerweise, ist die Mitgliedschaft 49 Dollar. Das deckt absolut alles ab. Einmalige Gebühr, Geld, Rückgarantie. Natürlich. Ähm, du bekommst auch zukünftige Kurse. Also hatte ich jede Woche oder zwei neue Kurse und du bekommst diese kostenlos als Gesamtmitglied. Sie erscheinen einfach in Ihrem Konto. Nichts zu registrieren, für wen sie gerade. Sie erschienen einfach wie von Zauberhand. Also keine zusätzlichen Gebühren dafür. Und das ist sehr cool. Aber als Bonus wurden zuerst durch diesen Kurs leiden. Ich möchte Ihnen diesen Gutscheincode geben. Wenn Sie hier auf die Check-out Sache klicken und eingeben, sehen wir Super Coder, was ich weiß, ist ein wirklich dorky Code. Aber ich bin zu faul, um es zu ändern. Es wird weitere 22 Mäuse abschlagen. Also hast du $27 für alle meine Kurse bezahlt. Du kannst nicht mal eine Pizza für so viel kaufen. Im Grunde muss ich nur die Kosten meiner Band mit decken. Für all die Videos, die ich habe, um etwas zu Kirche , ähm, das ist ziemlich ein langsamer Aiken G. O. O. , ich sagte Geld zurück Garantie, dass Sie auf mich zugreifen und mir Fragen stellen können. Sie können auf andere Schüler zugreifen, um ihnen Fragen zu interagieren. Es ist ah, es ist eine coole kleine Gemeinschaft, und nach 27 Dollar, ich denke, es ist ah wirklich gut stehlen Wenn du dich für mich magst Wenn du nur gerne Kurse auf dich zu mir beobachtest , habe ich alle meine Kurse von Kota Me auf du kennst mich eso Wenn Sie den Kopf über zu john elder dot org ford slash Sie zu mir dot PHP Dies ist meine persönliche Website, und es hat alle die gleichen Kurse, aber mit Links zu Ihnen zu mir. Und hier sind Gutscheincodes drauf, ich denke, 11 oder 12 Dollar machen ihre Kurse, was du bezahlst. Sie haben mich irgendwie eingesperrt, wie tief ich dorthin gehen kann. Zugegeben, das ist viel teurer, als alle meine Kurse für $27 zu nehmen. Aber manche Leute mögen dich für mich. Ähm, aus welchem Grund auch immer, vielleicht haben Sie ein paar Credits dort aufbauen. Manche Leute haben dir Kurse geschenkt oder was auch immer. Wenn das der Fall ist,könnten Sie alle meine Kurse hier überprüfenund auf den Link in einer boppy über Sie zu mir klicken. Wenn das der Fall ist, könnten Sie alle meine Kurse hier überprüfen Also, wie gesagt, ich hoffe, Sie haben den Kurs genossen. Hinterlassen Sie eine Bewertung Wenn Sie Lust haben. Gut, schlecht oder anders. Immer zu schätzen, Feedback zu bekommen. Und das wäre wirklich hilfreich. Und, äh, ich denke, wir werden das nennen. Fertig. Mein Name ist also John Elder. Ich hoffe, Sie haben den Kurs genossen, und wir sehen uns das nächste Mal