So erstellst du eine Website: Eine Einführung in die Frontend-Webentwicklung

1. Willkommen: Willkommen in meiner Bildhauerklasse. Wenn Sie wie ich sind und neugierig sind, wie die Technologie, die Sie jeden Tag verwenden , funktioniert, dann lassen Sie mich Ihnen zeigen, wie einfach es ist, Ihre eigene zu bauen. Aber zuerst ein bisschen über mich selbst. Ich habe gelernt, das Alter von 13 Jahren zu bauen, und es ist weiterhin eine große Leidenschaft von mir. Ich liebe es, den Preis zu programmieren und das, was ich gelernt habe, mit anderen zu teilen. Ich habe auch Entwicklung in eine Karriere verwandelt, weil das mit verschiedenen Start-ups, einem großen Unternehmen gearbeitet hat und auch einige Projekte von mir auf der Seite bauen. Meine bevorzugte Art und Weise zu lernen ist, dass ich meine Videos so strukturierte, dass du mitverfolgen kannst, indem du dein eigenes Projekt aufbaust. Ich empfehle Ihnen, eine persönliche Website zu erstellen, aber Sie können bauen, was Sie wollen. Ich hoffe, dass Sie auch Ihre Websites in der Projektgalerie teilen, und ich werde in Zukunft weitere Klassen veröffentlichen, also stellen Sie sicher, dass Sie meinem Programm folgen. Alles klar, lass uns weitermachen und einen Safe bauen 2. Wie können Websites arbeiten?: Alles klar. Willkommen und ein wirklich froh, dass Sie sich entschieden haben, die Klasse in diesem ersten Video beizutreten. Willst du die Frage stellen? Wie funktionieren Websites? Ich denke, dass es wichtig ist, bevor wir unsere erste Codezeile schreiben, um zu verstehen, wie alle verschiedenen Teile zusammenkommen, um eine voll funktionsfähige Website zu erstellen. Sie uns zuerst LassenSie uns zuerstüber Server sprechen. Wenn Sie versuchen, das Konzept eines Servers in Ihrem Kopf zu visualisieren, denken Sie wahrscheinlich über diese komplexen Maschinen mit einer Reihe von Kabeln und Lichtern nach. Wahrscheinlich kein Hamster, der versucht, sie zu versorgen, wie du hier siehst. Aber du verstehst die Idee. Du denkst an etwas sehr Kompliziertes, etwas, das du nicht wirklich umwickeln kannst, was ich tun will. Es ist vereinfachen diesen Denkprozess, wie Websites und Server zusammenarbeiten. Das Wichtigste, was zu verstehen ist, ist, dass Websites nur Dateien auf einem Computer sind. Die Art und Weise, wie Sie auf diese Dateien oder auf diesen Server zugreifen, erfolgt über eine I P-Adresse. Eine I-P-Adresse sieht aus wie eine Reihe von Zahlen, die durch Punkte getrennt sind. Haben Sie ein Beispiel, wenn hier 172.217 Punkt 9.78 es nicht wirklich wichtig ist. Und die meisten Leute würden sich nicht wirklich auswendig merken, dass ich p Adressen. In der Tat wissen Sie wahrscheinlich bereits, dass Sie eine Domäne eingeben oder Sie sind l, um auf eine Website zuzugreifen, nicht auf eine I-P-Adresse. Also werde ich auf der nächsten Folie darüber reden. Also ja, wenn wir all diese i p Adressen auswendig lernen müssten, um auf Websites zuzugreifen, wir wahrscheinlich verrückt. Glücklicherweise haben wir Domains als Art wie Verknüpfungen für den Zugriff auf diese Websites I p Adressen sind schwer zu merken, und so Domains dienen als Verknüpfungen zu diesen I p Adressen. Ich habe ein Beispiel. Eine hier, die ich zuvor gezeigt habe, und es ist eigentlich eine I p Adresse zu einem Google-Server. Wir können tatsächlich versuchen, dies in einen Browser einzugeben und zu sehen, was passiert. Ich werde dies kopieren ich p und geben Sie es einfach in die Adressleiste eingegeben hatte und ein gehen direkt zu Google. Das ist also wirklich cool. Sie können das selbst ausprobieren. Sie können sehen, wie wir i p Adressen haben, die tatsächlich funktionieren. Sie gehen zu verschiedenen Webservern, aber die meisten Male würden Sie nur die Domäne verwenden. Also, wenn ich eine neue Registerkarte öffne und gib Google dot com und geht auf die Google-Startseite. Browser sind das letzte Stück des Puzzles und helfen uns zu verstehen, wie Websites dort funktionieren , was sie verwendet, um auf Websites zuzugreifen und sie mit Webservern kommunizieren. Ich erkläre in einer Sekunde, was diese Kommunikation bedeutet. Das Tolle an Browsern ist, dass sie sich ständig weiterentwickelt haben, um komplexe Websites zu unterstützen . Dies bedeutet im Grunde, dass sie von Zeit zu Zeit nur neue Funktionen erhalten und die es Websites ermöglichen , diese Funktionen zu nutzen. Dies macht es, wo Websites jetzt mehr wie vollwertige APS ähnliche Tuapse auf Ihrem Telefon oder auf Ihrem Computer werden können. Browser und Server kommunizieren miteinander, was bedeutet, dass hier ein paar Dinge passieren. Also zuerst geben Sie eine Domain ein, sagen Sie Google dot com in Ihren Browser. Anschließend findet die Domäne die I-P-Adresse des Webservers, auf dem sich die Website-Dateien befinden . Der Server antwortet mit dem Dateiinhalt und anderen Daten zurück. In diesem Fall ist es am Ende Code und andere Informationen, die benötigt werden, um diese welche Seite richtig zu rendern . So interpretiert der Browser schließlich diese Antwort vom Server und ist in der Lage, die Website anzuzeigen . Der Code, den der Browser in diesem Dateiinhalt interpretiert, ist eigentlich das, was geschrieben wird . Das ist HTML, CSS und JavaScript, und ich werde im nächsten Video darüber sprechen. Das letzte, was ich über Browser hier erwähnen möchte, ist, dass sie wirklich großartige Entwickler-Tools sind . Sie umfassen die Möglichkeit, Quell- oder Inspect-Element auf jeder Website anzuzeigen. Sie können dies in Google, Chrome oder Firefox und anderen Browsern tun. Möglicherweise müssen Sie eine Entwickleroption aktivieren. Lassen Sie uns das jetzt in ihrem Browser ausprobieren. Also wählen Sie eine Website in diesem Fall. Ich bin auf Skill Share dot com, und ich bin in Google Chrome zweite Rechtsklick und klicken Sie auf Ansicht Seite Quelle. Lassen Sie sich nicht davon einschüchtern, aber dies ist der Code, der notwendig ist, um diese Website anzuzeigen. Lassen Sie sich nicht davon einschüchtern, Und während vieles davon nicht wirklich viel für Sie aussehen wird, werfen wir einen Blick auf eine davon. Steuer hier kann sehen, es ist als Titel und es sagt zu Hause Strich Geschicklichkeitsanteil. Das ist also eigentlich der Titel der Website hier. Sie können in diesem Tab sehen, dass es Heim Skill Share sagt. Und so sind dies einige der Daten, mit denen der Server antwortet. Und wenn Sie mehr von diesem Code erfahren, Sie tatsächlich in der Lage sein, zu verstehen, während Sie durch diesen blättern und sehen, sehen und sehen Sie all diese verschiedenen Dibs und verschiedene Links hier. Ah, du wirst ein viel besseres Verständnis davon haben können. Sie können auch mit der rechten Maustaste klicken und auf Inspect oder Inspect Element klicken, je nachdem, welchen Browser Sie verwenden. Dies wird dieses kleine Entwickler-Tool-Panel hier öffnen. Dies sieht ähnlich wie die Ansichtsquelle aus, aber es ist ein wenig besser organisiert. Sie können tatsächlich auf einige von ihnen klicken, um sie zu erweitern, und es gibt viele verschiedene Hähne hier, die ich nicht wirklich bekommen werde. Aber das sind wirklich großartige Entwickler-Tools, die in Browser integriert sind, die Ihnen helfen, Websites zu entwickeln. Okay, das war's also für dieses Video. Ich hoffe, Sie sind in der Lage, ein besseres Verständnis davon zu bekommen, wie Websites funktionieren, und wenn Sie ein wenig mehr lernen möchten, habe ich einen Lincoln hier, der zu Mozillas Entwicklernetzwerk geht. Ah, es ist ein Artikel hier, und es macht einen wirklich großartigen Job, einige der Dinge, über die ich gesprochen habe, ausführlicher zu erklären . Also schau dir diesen Artikel an, wenn du ein bisschen mehr lernen willst und ich sehe dich im nächsten Video. 3. Front: html. CSS und JavaScript sind die drei Front- und Sprachen, die lernen werden. Jeder hat einen anderen Zweck beim Aufbau einer Website. HTML, das für Hypertext-Markup-Sprache steht, wird für die Erstellung von Inhalten, den Text, Bilder und Links verwendet den Text, , die Sie in Ihrer Website möchten. Sie werden verschiedene HTML-Tags in einer Punkt-HTML-Datei verwenden, damit Sie hier ein Beispiel für Ah , Homepage sehen können . , Sie können eine Indexpunkt-HTML-Datei erstellen, und darin haben Sie möglicherweise Text, der mit einem B-Tag umgeben ist. Dies ist ein HTML-Tag, das den Text im Grunde fett macht. Als nächstes ist CSS, das für Cascading Stylesheets steht. Es wird für das Styling von Inhalten verwendet, was das Ändern von Farben, das Anwenden anders aus,das Ändern der Positionierung, verschiedene Texte und Schriftarten und solche Dinge beinhaltet Anwenden anders aus, das Ändern der Positionierung, . Haben Sie ein Beispiel hier, wo ich ein HTML-Tag auf meiner Seite mit einem I d meines Textes auswähle und dann verschiedene Eigenschaften bereitstellen kann, die verschiedene Dinge tun. Ich will nur den Text blau machen. Und so sage ich, dass ich will, dass die Farbe blau ist. Schließlich haben wir Js, das für JavaScript steht. Ich werde es mit seinem vollständigen Namen verweisen. Aber ich möchte hier eine kleine Warnung geben, dass, wenn Sie versuchen, Informationen über JavaScript online zu suchen , stellen Sie sicher, dass Sie es nicht mit Java verwechseln, das eine völlig andere Programmiersprache ist. Worüber wir hier sprechen, ist Java-Skript oder kurz J s. JavaScript wird zum Hinzufügen von Funktionen verwendet, z. B. wenn Sie auf eine Schaltfläche klicken, möchten Sie etwas passieren, wie ein Bild im Vollbildmodus oder andere interaktive Funktionen angezeigt wird. Haben Sie hier ein Beispiel, dem einfach eine Warnmeldung angezeigt wird, die „Hallo“ sagt. Es gibt eine Menge verschiedener Dinge, die Sie mit JavaScript machen können, die mächtigste Sprache aus den drei Front und Sprachen nicht zu tief in sie eintauchen . Aber es ist immer noch ein sehr grundlegender Aspekt des Aufbaus von Websites. HTML, CSS und JavaScript sind die drei Sprachen, die von Browsern verstanden werden, weshalb sie auch als Front-End- oder Client-Side-Sprachen bezeichnet werden. Sie können mit der rechten Maustaste auf eine beliebige Website klicken und Quelle anzeigen, die Ihnen den gesamten HTML-Code zeigt, der vom Server an den Browser gesendet wird. Beachten Sie, dass HTML-Dateien Webseiten sind, die dann auf CSS und JavaScript verweisen, um Stil und Funktionalität hinzuzufügen. Haben Sie einen weiteren Artikel hier aus dem Mozilla Developer Network, den Sie überprüfen können, wenn Sie mehr über diese drei Sprachen und andere Themen in welcher Entwicklung erfahren möchten . Im nächsten Video machen wir uns bereit, einige Code und sprechen Sie über die verschiedenen Editoren, die Sie verwenden können um HTML, CSS und JavaScript zu schreiben , so dass ich Sie im nächsten Video sehen. 4. Ein Code-Editor installieren: Okay, lassen Sie uns über Texteditoren oder Code-Editoren sprechen, die HTML, CSS und JavaScript schreiben . Zuerst können Sie tatsächlich den Texteditor verwenden, der sich bereits auf Ihrem Computer befindet. Wenn Sie auf einem Mac sind, können Sie Text darauf verwenden. Wenn Sie unter Windows sind, können Sie kein Pad verwenden. Dies funktioniert perfekt zum Schreiben von Code. Das einzige, was Sie sicherstellen müssen, ist, dass Sie die Datei als Indexpunkt-HTML-Datei speichern oder was auch immer zu der Zeit erstellt wird. Das einzige, was Sie mit den nativen Editoren auf Ihrem Computer nicht wirklich bekommen, ist die Syntaxhervorhebung , die Ihnen hilft, ein besseres Bild Ihres Codes mit verschiedenen Farben und einer anderen Struktur zu erhalten , die andere Texteditoren zeigen Sie es Ihnen. Es gibt viele verschiedene Optionen für Editoren, die Sie herunterladen können. Die 1. 1 hier heißt Visual Studio Code oder V S Code. Es ist, was ich in meinen Videos verwenden werde, daher empfehle ich dringend, dass Sie dieses herunterladen. jedoch Es gibtjedochandere Optionen. Hier ist Adam, das ist ein sehr einfacher Editor und ein anderer, der erhabener Text genannt wird. All diese können Sie kostenlos verwenden, aber erhabenen Text wird Sie über den Kauf der Lizenz nag. Eine andere Option, über die ich schnell sprechen möchte, ist Coat Pen. Es ist eigentlich eine Website, mit der Sie Code direkt in Ihrem Browser schreiben können. Wenn ich hier einen neuen Stift erstelle, kann ich HTML-Code schreiben und mir eine schöne Vorschau geben. Hier unten. Sie können auch ein CSS und JavaScript schreiben. Dies ist großartig, wenn Sie sehr schnell aufstehen und laufen wollen. Wenn Sie jedoch möchten, dass die Dateien für Ihre Website lokal auf Ihrem Computer sind, empfehle ich Ihnen, einen Editor zu installieren und diese Dateien lokal zu bearbeiten. Wie ich schon sagte, ich werde V s Code einige verwenden. Sobald Sie es herunterladen oder auswählen, wird ein anderer Editor in der Lage sein, direkt in den Code zu gelangen, also werde ich Sie im nächsten Video sehen. 5. Inhalte erstellen: HTML: Alles klar, jetzt sind wir bereit, unsere Website zu erstellen. Das erste, was Sie tun möchten, ist einen neuen Ordner zu erstellen. Dies könnte auf Ihrem Desktop sein, Ihre Dokumente? Es spielt keine Rolle. Aber alle nannten dies meine Website. Und hier werden unsere HTML-CSS- und JavaScript-Dateien gespeichert. Nun gehen wir in unserem Code-Editor in diesem Fall, amüsant V s Code. Wir gehen weiter und öffnen den Ordner, den wir gerade erstellt haben. Das ist meine Website geöffnet, und hier wird es beginnen, neue Dateien für eine Website zu erstellen. Klicken wir auf neue Datei und speichern Sie diese Datei sofort. Wir werden diesen Index dot html nennen. Nun lasst uns etwas Text in diese Datei einfügen. Es ist typisch zu sagen, hallo Welt kann für jedermanns erstes Programm, dass sie Recht. Aber Sie können alles hier in meine erste Website setzen. Was ist los? Sie wissen etwas, stellen Sie sicher, dass Sie diese Datei speichern und jetzt, was wir tun werden, ist zu dem Ordner, in dem sich diese Datei befindet, gehen Sie mit der rechten Maustaste und öffnen Sie diese in Google Chrome oder was auch immer Ihr Standardbrowser sein könnte. Sie können jetzt sehen, dass es Hallo Welt sagt. Das ist ein Text, der in dieser Datei steckt. Und obwohl dies sehr einfach ist, ist dies Ihre erste Website. Lassen Sie uns etwas etwas interessanteres hier in HTML tun. Wir können verschiedene Tags verwenden, und ich habe einige Beispiele dafür in den Folien gezeigt, wo Sie etwas wie das B-Tag verwenden können um diesen Text fett zu machen. Die Art und Weise, wie Sie diese Tags richtig haben, ist, dass Sie mit dem öffnenden Tag beginnen. Das ist genau hier mit einem Weniger als-Symbol, dem Namen des Tags und dann einem Größer-als-Symbol. Und dann auf der anderen Seite haben wir das schließende Tag, das besagt, dass wir im Grunde, wissen Sie , hier anfangen, Text zu erstellen, und dann am Ende dieses Textes, hören wir auf, den Text zu halten. Also haben wir zuerst weniger als Zeichen einen Schrägstrich, um zu zeigen, dass dies ein schließendes Tag ist, der Name des Tags und ein Größer-als-Symbol. Speichern wir diese Datei, gehen Sie zurück zu unserem Browser und laden wir die Seite neu. Bumm. Sie können sehen, dass es ein kleiner Unterschied ist, aber Sie können definitiv sehen, dass der Text nun fett ist. Lassen Sie mich Ihnen einige andere Tags zeigen, die Sie verwenden können. Es gibt einen Weg zu einem Tele-Größentext mit dem I-Tag. Nehmen wir an, diese Datei Foto-Browser und laden Sie die Seite neu, aber Sie können den Videotext neben dem Volltext sehen. Hoppla. Es gibt auch eine Möglichkeit, verschiedene Überschriften zu erstellen. Also, wenn ich in jedem Fall tue, bedeutet das Überschrift eins und schließen Sie das Tag. Sie können sehen, dass es, ah, ah, konsistente Möglichkeit gibt, Tags zu öffnen und zu schließen. Das einzige, was sich hier ändert, ist der Name des Tags. Speichern Sie diese Datei. Geh wieder zurück und lade sie neu. Jetzt haben wir einen sehr großen Text. Dies wird häufig verwendet, um verschiedene Überschriften innerhalb der Seite zu erstellen. Stellen Sie sich vor wie ein Wortdokument. Möglicherweise haben Sie dort eine sehr ähnliche Formatierung, und die Listenart geht weiter. Das ist wie kleinere Texte. Ok, es ist die Überschrift Ebene zwei. Sie können sehen, dass es etwas kleiner ist. Okay, lassen Sie uns ein etwas komplizierteres Tag machen, also gibt es eine Möglichkeit, auf andere Seiten oder andere Websites zu verlinken. Im Allgemeinen der Name des Tags ein, der für Angkor steht. Es ist genauso, wie du ein öffnendes Tag machst. Der Text darin wird der Text sein, der anklickbar sein wird. Das heißt eigentlich etwas länger, Slink. Und dann, natürlich, ein schließendes Tag. jetzt Wenn Sie dasjetztspeichern, gehen Sie zurück und aktualisieren Sie es. Sie können sehen, es sieht eigentlich nur wie normaler Text aus. Hier ist nichts wirklich passiert, also erfordern Anker-Tags Attribute, damit sie tatsächlich funktionieren. Was Sie tun, ist ein Attribut hier genannt Patron, und so nach dem A hier machen Sie einen Leerzeichen H R G F, der für Hypertext-Referenz Gleichheitszeichen und dann zwei Anführungszeichen im Inneren steht . Diese Anführungszeichen hier geben die U. R L zu einer Webseite ein. Ich tippe es einfach hier raus. Dies ist Google dot com, aber Sie werden wahrscheinlich nur aus Ihrem Browser kopieren und einfügen möchten. Also lassen Sie uns das speichern und sehen, was passiert. Okay, jetzt können Sie sehen, dass dieser Link jetzt lila ist. Normalerweise sind Links blau, aber es ist lila, weil ich diese Seite vorher besucht habe und es auch unterstrichen ist. Dies ist das Standard-Styling. Und sobald wir zu sehen, beurteilen, werden Sie in der Lage sein zu sehen, wie Sie das Styling anpassen können, aber für jetzt würde das Standard-Styling hier zu bekommen. Wenn ich auf diesen Link Boom klicke. Sie können sehen, es geht zu Google dot com. Jetzt kennen wir das Konzept dieser Attribute, und wir werden diese ziemlich viel verwenden. Lassen Sie uns weiter und fügen Sie weitere Attribute zu diesem Anker-Tag hinzu, weil wir sagen, dass wir diesen Link in einer neuen Registerkarte öffnen möchten . Sie sehen dies sehr häufig auf bestimmten Websites, und dies wird auch zeigen, dass Sie mehrere Attribute Teoh zu einem HTML-Tag hinzufügen können. Es gibt also noch weitere Attribute, die Sie mit dem Namen Target hinzufügen können. Sie können sehen, dass diese Attribute alle durch ein Leerzeichen getrennt sind, und sie alle existieren hinter dem Tag-Namen, aber vor der Winkel-Klammer. Also setzen wir das Ziel, Leer zu unterstreichen. Dies weist einen Browser an, diese Webseite in einer neuen Registerkarte zu öffnen. Lassen Sie uns das die Rückseite des Browsers sehen. Und jetzt, wenn ich auf diesen Link klicke, werden Sie feststellen, dass er in einer neuen Registerkarte geöffnet wird. Wir haben immer noch unsere Website in der Hoffnung hier und gehen Sie in einem anderen Tab öffnen. Sie kennen jetzt die Grundlagen von HTML, und im nächsten Video werde ich in die richtige Seitenstruktur eintauchen, die Sie für Ihre HTML-Seiten verwenden sollten . sowie die komplexeren Angriffe, die Sie verwenden können, um Dinge wie Bilder hinzuzufügen. Dies ist ein guter Zeitpunkt, um das Schreiben von Tags zu üben, so dass es sehr natürlich wird und Sie in der Lage sind , Steuern sehr schnell zu schreiben. 6. Das Erstellen von HTML-Seiten: im vorherigen Video würde lernen, wie man grundlegende HTML-Tags zu schreiben, so dass wir Inhalte in ihrer Seite erhalten konnten . Lassen Sie uns nun über die Seitenstruktur sprechen, da Browser erwarten, dass zwei verschiedene Dinge von Ihrer Seite kommen . Eine davon ist der visuelle Inhalt, den Sie in Ihrem Browser sehen können, und dann Metadaten, die sie nicht in der Lage wäre, zu sehen, aber ist sehr wichtig für Browser. Dies ist, wo Sie bestimmte Informationen über Ihre Website, das CSS und JavaScript, die getrennt werden, sowie Dinge wie den Titel und die Beschreibung . Okay, lassen Sie uns eine Seitenstruktur zu unserem aktuellen HTML hinzufügen. Gehen wir an den Anfang der Datei hier und fügen Sie etwas hinzu, das einen Arzt genannt wird. Dadurch wird der Browser angewiesen, die neueste Rendering-Engine zum Anzeigen der Site zu verwenden. In der Vergangenheit gab es verschiedene. Das bedeutet im Grunde, dass wir HTML fünf wollen, die neueste Version darunter. Lassen Sie uns auf HTML-Tag erstellen, und dies wird tatsächlich ihre ganze Seite umschließen. Lassen Sie uns hier und bei einem schließenden HTML-Tag nach unten gehen. Es ist auch eine gute Idee, ein Sprachattribut auf diese oops Sprachattribute hinzuzufügen tatsächlich nur legen und das gleich E n zu machen Dies natürlich bedeutet natürlichEnglisch. Okay, jetzt fügen wir ein Body-Tag hinzu, und das wird den Inhalt, den wir vorher hatten, umschließen. Dies ist der visuelle Teil der Seite. Nachdem wir an der Leiche, was ist ein gefüttertes Tag hinzufügen? Sie können sehen, wie er das abschneidet, damit ich das ein bisschen besser visualisieren kann, aber wir werden bestimmte Metadaten hier im Kopf hinzufügen. Was ist der Presse-Tab hier? Und fügen Sie ein Titel-Tag und der Titel könnte alles sein. Ich werde nur meine Website stellen, und so lassen Sie uns für eine Sekunde Pause hier. Die Art und Weise, wie ich über diese Struktur nachdenke, ist, dass der Kopf wie das Gehirn Ihrer Website ist . Es enthält Daten wie die Titelbeschreibung CSS-Zeug, die Sie nicht wirklich sehen, aber wichtig sind, und es sind nur Daten. Dann haben wir den Körper, und das ist der eigentliche Inhalt, der tatsächlich, was Sie in Ihrem Browser sehen. Und so diese zwei verschiedenen Tags, sie haben verschiedene Tags innerhalb des Kopfes und des Körpers. Werfen wir einen Blick auf diese Datei in unserem Browser wieder, um zu sehen, was sich geändert hat. Wenn Sie also erneut laden und die neueste Version dieser Datei erhalten, sehen wir, dass der Inhalt immer noch der gleiche ist. Aber etwas hat sich tatsächlich geändert und das ist die Registerkarte sind hier. Sie können es tatsächlich sehen, sagt meine Website. Und das ist jetzt der Titel. Woher kommt das? Nun, wir haben diese Daten hier im Kopf hinzugefügt. Es kommt also von diesem Titel-Tag, obwohl Sie es nicht wirklich irgendwo auf der Seite selbst sehen, wird es in der Registerkarte angezeigt, während wir im Browser Angst haben. Lassen Sie uns voran gehen und schauen Sie sich Def-Tools an. Dies ist etwas, das in Google enthalten ist. Chrome und Firefox und andere Browser enthalten sie möglicherweise auch, obwohl Sie die Einstellungen ändern müssen, um Entwickleroptionen zu aktivieren. Also alles, was ich hier getan habe, war Rechtsklick und du warst auf der Seite und klickst. Element inspizieren oder prüfen. Was Sie hier sehen werden, ist die Struktur Ihres HTML. Dies ist der Code, den Sie Ihrer Seite hinzugefügt haben, sehen können. Hier haben wir den Doc-Typ HTML. Markieren Sie den Kopf mit dem Titel und Sie können sehen, dies ist im Quellcode hier. Es ist nicht etwas, das Sie auf der Seite sehen können, aber es tut etwas im Körper mit allen Tags hier. Dies ist eine großartige Möglichkeit, um zu sehen, ob etwas nicht funktioniert. Sie können es überprüfen und sehen, was es tatsächlich im Browser im Code zeigt hier. Ein weiterer Vorteil dieses Werkzeugs ist, dass Sie den Mauszeiger über jedes angeheftete bewegen können, um das Layout und das Styling zu sehen, so dass Sie dort einige Abstände auf diesem H ein Tag hier sehen können. Und sobald wir auf den CSS-Teil bekommen wird sehen, dass die Luft, die verschiedenen Eigenschaften, die standardmäßig angewendet werden, werden unsere eigenen hinzufügen, um unsere eigenen benutzerdefinierten Stile hinzuzufügen. Einige dieser Tags lüften auch in Linie, was bedeutet, dass sie nebeneinander platziert werden, sie auf der gleichen Linie angezeigt werden. Wir können sehen, diese H ein und H zu Tag sind auf separaten Linien uns, weil thes Luftblock-Level-Elemente , der Anker ist eine in Linie, aber weil der, bevor es ein Block-Element oder ein Tag war, diese Luft gleichbedeutend durch die Art und Weise HTML-Tag ein Element sind die gleiche Sache. Aber weil dies ein Block-Tag war, nimmt es tatsächlich das Ganze mit. So können Sie den Mauszeiger darüber bewegen, um zu sehen, dass es 100% der mit einnimmt. jedoch Diese B- und I-Tagsjedochnicht. Wenn ich also dieses Anker-Tag neben das I-Tag setzen sollte, würde es nur in der gleichen Zeile direkt daneben erscheinen. Ich möchte schnell eine großartige Referenzanleitung für alle verschiedenen HTML-Elemente oder Tags erwähnen , die Sie verwenden können. Dies ist eine weitere Ressource aus dem Mozilla Developer Netzwerk, und es wird und es listet alle verschiedenen Steuern hier. Es kategorisiert sie zum Beispiel auch . Hier sind alle Textinhaltelemente. Hier können Sie verschiedene Dinge haben. Sie können Anführungszeichen haben, Sie können Listen haben und werden die in unserer eigenen Webseite verwenden. Sie können auch auf die Steuer selbst klicken, so klicken Sie auf eine dieser, auch despoil die verschiedenen Attribute zu halten, dass Sie als auch Beispiele verwenden können. Was ich jetzt tun möchte, ist, diesen Inhalt, den wir früher hinzugefügt haben, zu bereinigen und etwas zu machen , das eher einer Website ähnelt. Also zuerst, fügen wir ein H ein Tag hinzu. Dies wird der Titel der aktuellen Seite sein. Es ist alles. Nennen Sie es einfach meine Website. Du kannst hier deinen eigenen Namen setzen oder so etwas wie Sonnys persönliches. Sag so etwas. Fügen wir nun ein Bild-Tag hinzu. Das könnte so etwas wie, Ah, Logo oder vielleicht ein Bild von dir sein. Sagen wir, wir wussten nicht, wie das geht. Wir können nachschlagen, was das Image-Tag wäre aus dem Mitzel, einem Entwickler-Netzwerk. dem Bild eingebetteten Element siehe können Sie also ein Bild in das Dokument einbetten. Und ich könnte einfach zu dem Beispiel blättern, das sie haben. Sie können sehen, mit so etwas wird dieses Bild hier zeigen. Lassen Sie uns voran und kopieren Sie in Frieden, damit Sie sehen können, es gibt, ähm ich bin ich m g Tag und hat zwei verschiedene Attribute. Es gibt also SRC-Attribute oder Quellattribute und ein verweist auf eine Bilddatei. Ich werde tatsächlich eines meiner eigenen Bilder in unseren Website-Ordner ziehen, und dann werden wir es hier referenzieren. Dann gibt es auch dieses A lt Attribute steht für alternativen Text. Dies ist aus vielen verschiedenen Gründen nützlich. Nehmen wir an, das Bild wird nicht geladen oder eine Suchmaschine. Es durchsucht diese Seite, um etwas für Suchergebnisse anzuzeigen. Oder vielleicht ist der Benutzer ein blinder Benutzer. Und so sind sie nicht in der Lage, visuell zu sehen, was dieses Bild ist. Und so konnten wir alternativen Text liefern. Diese Art von beschreibt, was dieses Bild ist. Ich kann sagen, das ist ein Bild von mir, und Sie müssen also nicht wirklich das Bild sehen, um zu wissen, was es isst. Etwas Interessantes hier ist, dass dieses Tag tatsächlich kein schließendes Tag hat. Weißt du, normalerweise würdest du so etwas tun, aber weil wir hier keinen Text dazwischen anzeigen, brauchst du dieses aber weil wir hier keinen Text dazwischen anzeigen, schließende Tag eigentlich nicht aus Gründen der Vernunft einen Schrägstrich bei das Ende hier, um zu zeigen, dass dies ein selbstschließendes Tag ist. Aber das ist völlig optional. Also zwei eingebettete Bild in unsere Website. Wir müssen ein Bild innerhalb unseres Website-Ordners haben. Also enthalten ein Bild von mir hier, direkt neben der Indexpunkt-HTML-Datei. Sie leben im selben Ordner, und so können wir das tun. Die Quelle dafür ist nur der Name der Datei. Das ist ein J-Pegs. Ja, Sonny. Dodgy Peg. Uh, wir können hier einen anderen Pass anbieten, da der gleiche Ordner ist, aber das können. Aber wenn es in einem anderen Ordner existierte, wir an, ich habe einen Image-Ordner, das Bild in ihre jetzt ziehen, um das Bild auf diese Weise zu referenzieren . Dies ist gut für die Organisation. Speichern wir das und öffnen Sie es in Ihrem Browser. Reload und Sie können sehen, Sie haben ein Bild von mir hier und den Titel hier drüben. Ich denke, dieses Bild ist eigentlich ein bisschen zu groß, also können wir das tatsächlich ändern. Lassen Sie uns voran und fügen Sie hier eine mit einem Tribut hinzu. Jetzt können wir jetzt, was in einem Pixelwert übergeben kann. Sagen wir, ich mache 100. Speichern Sie das jetzt. Man könnte sagen, es ist viel kleiner. Vielleicht wollte ich etwas größer sein. Machen Sie es einfach 200. Okay, ich denke, das ist eine gute Größe dort. Wir können hier noch ein paar Dinge hinzufügen. Ich möchte einen Text einschließen. Was am Absatz-Tag ist, ist nur ein Pitak hier mit etwas Text drin. Sagen wir einfach, das ist, um einfach mein Es gibt so etwas zu spielen, oder? Ähm, und jetzt können wir eine Navigation hinzufügen, so dass wir auf andere Seiten für unsere Website verlinken können. Lass uns voran gehen und einfach unten hier eingeschlossen. Jetzt hier. Alle enthalten eine Liste von Längen. Also lasst uns eine auf geordnete Liste machen. Dies ist ein U L-Tag und könnte Informationen über diese Tags nachschlagen, um ein wenig mehr im Inneren zu erfahren , wird Listenelemente haben. Es ist eine gute Idee, diese nur auf neuen Zeilen zu haben und alles zu Tab, was drin ist, wenn Sie nur die verschachtelten Tags wie diese haben, seinen Kurs, Links zu tun, wir fügen Anker-Tags hinzu. Fühlen Sie sich frei, Positivität von Dies geht zu schnell, so dass wir auf verschiedene Seiten verlinken können, die sie eine über Seite hinzufügen möchten, mit der es über das verlinkt ist. HTML. Dies existiert noch nicht, wird aber in einem Moment und haben diesen Link lesen. Und vielleicht haben wir auch andere Seiten. Es war nur eine Kopie, die vielleicht lassen Sie uns eine Kopie Rede hier. Okay, also haben wir unsere Navigationsliste hier. Lass uns das retten. Gehen Sie in einen Browser in unserem Browser. Nachladen. Jetzt können Sie sehen, wir haben eine kleine Beschreibung Absatz hier in verschiedenen Links, aber klicken Sie auf diese jetzt sagt, Ihre Datei wurde nicht gefunden. Also lasst uns diesen neidisch Code reparieren. Sie können Dateien direkt hier erstellen. Klicken Sie hier auf dieses Symbol. Oder tun Sie dies mit der rechten Maustaste und klicken Sie auf neue Datei. Lassen Sie uns über Punkt html eingeben. Es hat diesen Baum wieder geschlossen und diese Luft nur manuelle Dateien. Also denken Sie daran, wissen Sie, wir haben jetzt jede kleine Datei hier. Insider-Ordner. Lass uns weitermachen und das alles kopieren. Also kopieren Sie das in etwa dot html. Und lasst uns das ändern, über das ich zu sagen habe, mit ein bisschen über Sonny. Wir behalten das Bild dort. Das ist in Ordnung. Ich, und das ist eine gute Idee, die Navigation hier zu behalten. jedoch Da wirjedochbereits an dieser Stelle auf der Über Seite sind, ist es auf einer Seite Zwei sind verlinkt, um zur Homepage zurückzukehren, so dass es zurück zu indizieren, dass html und sie sagen zu Hause. Okay, jetzt haben wir in der Über Seite, gehen Sie zu unserem Browser, und wenn ich neu lade, wird dieser Boom jetzt eine über Seite haben. Siehst du, der Titel hat uns auch verändert. Es ist die Überschriftenebene Beschreibung, Text und jetzt Konflikt zwischen dieser Startseite und über Seite. Wir machen das Gleiche für Hobbys schnell. Lass uns weitermachen und einfach die Übersichtsseite kopieren und deinen Vater machen. Es ist offensichtlich, dass HTML diese Hobbys ist. Das sind für einen Wächter oder so etwas. Und lasst uns diese Hobbys Link zu über Strand ändern. Okay, das sieht gut aus. Es ist frisch. Eine Hobby-Seite. Jetzt haben wir diesen Pfirsich hier. Jetzt haben wir gelernt, wie man hier Links erstellt, die zu unseren verschiedenen Seiten auf unserer Website gehen. Sie können sehen, dass es nur zu diesen Dateien geht. Mohnblume, starten html index dot html. Ich möchte auch schnell erwähnen, dass Sie sich darüber vielleicht gefragt haben. Wir zeigen diese Dateien nur in unserem Browser an. Diese Luft nur lokal. Wenn Sie das mit anderen teilen, können sie nicht darauf zugreifen. Aber am Ende dieser Klasse wird er in der Lage sein, Ihre Website hochzuladen, so dass Sie diese tatsächlich mit anderen teilen können . Ich glaube, das war's für diesen Teil. Im nächsten Video zeige ich Ihnen, wie Sie CSS verwenden, um Ihre Website zu stylen 7. Styling CSS: Hoffentlich haben Sie sich bei der Verwendung von HTML mehr vertraut gemacht. Nun gehen wir auf unsere Website mit CSS zu stylen. Dies wird hoffentlich das Aussehen ein bisschen schöner machen. Gehen wir weiter und machen eine neue Akte. Dieser wird Stil dot CSS genannt werden kann sehen, wir haben einen Stil Punkt CSS-Datei innerhalb unseres Ordners neben oder Images Ordner und unsere HTML-Dateien innen. Hier. Hier wird unser CSS schreiben und auf unsere Tags Insider HTML zielen und verschiedene Eigenschaften hinzufügen, um eine Farbe, einen Fondsabstand und verschiedene Dinge wie das zu ändern . Was wir zuerst tun müssen, ist, unsere Datei mit jedem Team zu verknüpfen. Denk daran, dass wir dieses Head-Tag früher gemacht haben. Wir können hier Daten hinzufügen, die dem Browser mitteilen, ihre neuen Stile zu verwenden. Also ist es bei einem Link-Tag im Inneren wird sagen, dass die Beziehung s Stil sie und zeigen auf unsere neue Styled CSS-Datei ähnlich dem Bild-Tag. Dies ist ein weiterer dieser selbstschließenden Tags. Speichern wir unsere HTML-Datei und gehen Sie zurück zu unserem Stil Punkt CSS Datei. Was ist das? Einige grundlegende Styling, um zu zeigen, dass dies tatsächlich funktioniert. Zuerst beginnen wir mit einem Selektor. Hier zielen Sie auf eines Ihrer HTML-Tags ab. Ich beginne mit dem Körper und dann Leerzeichen und füge dann geschweifte Klammern hinzu. offensichtliche Code ist also schön genug, um die schließende Gnade automatisch hinzuzufügen. Stellen Sie sicher, dass Sie eine öffnende Klammer dazwischen haben. Wir haben unsere verschiedenen Eigenschaften und dann eine schließende Klammer. Also im Inneren von hier, werde ich einen Tab machen, um das ein bisschen schöner aussehen zu lassen. Visuell, so kann der Unterschied zwischen den Selektoren und den Eigenschaften zu sehen. Okay, lassen Sie uns die Textfarbe ändern, Zellentyp Farbe Doppelpunkt Raum und dann einen Namen einer Grundfarbe wie blau grün. Sie können auch Hex-Farben hier verwenden, wird das in einem Moment tun. Speichern wir diese Datei. Insider-Browser. Lassen Sie uns die Seite neu laden. Sie können sehen, die Farbe des Textes geändert, und es hat tatsächlich Auswirkungen auf unsere gesamte Seite. Wenn Sie sich erinnern, steht CSS für Cascading Stylesheets, und das ist der kaskadierende Aspekt davon. Obwohl wir auf das body-Tag, den Stil der Textfarbe, ausgerichtet sind, kaskadiert es nach unten. Sie können sehen, dass die Verknüpfungsfarben immer noch eine andere Farbe haben, weil sie ihre eigenen Farben festlegen und so können wir die Farbe überschreiben, die zuvor festgelegt wurde. Nehmen wir an, wir möchten, dass das Absatz-Tag eine andere Farbe hat. Also lasst uns diese Tags direkt unter dem Körper anvisieren. Sagen wir P Leerzeichen, geschweifte Klammern. Ich möchte, dass die Farbe grün ist. Okay, lassen Sie uns das Nachladen speichern. Und ich sehe, dass die Absätze jetzt grün sind. Eine interessante Sache, die hier zu beachten ist, ist, dass beide Absätze oder grün und das liegt daran, dass sie beide ihr Absatz-Tag verwenden. Wenn Sie rechts, klicken Sie und überprüfen, verwenden Sie taube Werkzeuge hier, um das zu sehen. Okay, mit diesem Absatz-Tag ausgewählt und in diesem rechten Bereich zeigt hier die verschiedenen Stile. Zweitens, siehe auf dem Absatz-Tag. Wir haben die Farbe grün, jedoch auf der Überschrift, dass jeder hier ich sehen konnte, gibt es keine Farbe auf dem H, aber es sagt hier vom Körper geerbt. Also wählte hier, dass tatsächlich die blaue Farbe von dem body-Tag geerbt wird, das wir in unserem CSS deklariert haben . Was wäre, wenn wir mit den Farben, die wir verwenden, ein wenig kreativer werden wollten? Wir können einen Hex-Farbcode verwenden, der mit einem Zahlenzeichen gefolgt von sechs Buchstaben oder Ziffern beginnt. Ich werde nur die Website namens Color Picker dot com verwenden. Dadurch können wir eine bestimmte Farbe auswählen, indem wir innerhalb dieses Farbwählers ziehen und uns dann diesen Hex-Code geben . Nun, anstatt einen Farbnamen zu verwenden, könnte einfach diesen Hex-Code Tempo. Aber stellen Sie sicher, dass Sie das Nummernzeichen am Anfang dort behalten. Speichern Sie die Datei, laden Sie die Seite neu und jetzt haben wir hier einen etwas anderen Blauton. Werfen wir einen Blick auf einige andere Möglichkeiten, die Styler-Text schwächen. Sie können eine andere Schriftgröße hinzufügen, indem Sie hier ein Pixeltal angeben. PX Standing für Pixel kann die Schriftfamilie ändern. Gehen wir mit Ariel Dose. Sie können den Text auch fett formatieren. Es gibt viele verschiedene, aber lasst es uns dabei belassen. In einem Browser können wir neu laden und sehen, dass wir jetzt diesen anders aussehenden Text hier haben. Es ist kühn, es ist ein bisschen größer und es ist im Luftfonds. Lassen Sie mich Ihnen zeigen, wie Sie Abstand mit Rand hinzufügen können. Ich möchte, dass dieses Bild ein wenig nach rechts ist. Lassen Sie uns Bild innerhalb unseres CSS in das Hinzufügen Rand Bindestrich links Eigenschaft ausgewählt. Nehmen wir an, 50 Pixel laden die Seite neu und Sie können sehen, dass sie ein wenig nach rechts verschoben wurde. Das war's dafür. Video natürlich ist natürlichimmer ein Link. Eine andere Ressource, die Sie verwenden können, um ein wenig mehr über CSS zu erfahren, dass die verschiedenen Möglichkeiten , wie Sie Textfelder formatieren können, ein Layout erstellen und solche Dinge. 8. Das Hinzufügen von site: Alles klar, die Dinge sehen jetzt ziemlich gut aus. Wir haben HTML und CSS verwendet, um zu machen, was wie eine anständig aussehende Webseite aussieht, aber ich denke, wir können es noch besser machen. Lassen Sie uns dies in ein traditionell aussehendes Website-Layout mit einer Kopfzeile an der Spitze, einem Navigationsmenü und dann vielleicht auch einige Spalten hier verwandeln . Lassen Sie uns beginnen, indem Sie die verschiedenen Abschnitte ihrer Seite erstellen und unsere Tags dorthin verschieben . In HTML fünf gibt es ein Header-Tag, das wir verwenden können. Dies wird der Header über eine Website sein. Lassen Sie uns dieses jedes einzelne Tag kopieren. Okay, Cool. Auch innerhalb der Kopfzeile wollen wir wahrscheinlich ein Navigationsmenü. Wir können das hier kopieren, UL. Das ist eine Liste von Links hier. Fix das Tabbing hier und es gibt tatsächlich ein knave Tag, das wir hier verwenden können. Und es ist eine gute Idee zu zeigen, dass dies unsere Hauptnavigation unserer Seite mit diesem Tag ist. Nun lassen Sie uns auch eine Fußzeile hinzufügen. Und das ist natürlich die Spur. Unsere Navigation sollte es hier haben, also ist es ungefähr unten. Wir können ein Fußzeilen-Tag haben und wir werden nur sagen, Copyright wie setzen Sie Ihren Namen hier. So 2018 können unsere Inhalte hier gehen. Okay, Cool. Also gehen wir jetzt zu unserer CSS-Datei und beginnen, diese Steuer für einen Feder zu stylen, der eigentlich eine Art Bar haben wollte . Sehen Sie, wo es wie eine Leiste am oberen Rand der Seite aussieht. Lassen Sie uns also die Farbe hier weiß in der Hintergrundfarbe machen, um grau zu sein. Schauen wir uns das so weit an, wie das aussieht, okay, wir können das wahrscheinlich ein bisschen reparieren. Jetzt lassen Sie uns untersuchen und sehen, warum. Hier oben ist viel Platz drin. So sieht es so aus, als hätte der Körper oben links ein paar Ränder, und jeder hier hat einen Rand. Nun, lasst uns das reparieren. Man kann die Marge sagen. Ich möchte, dass alle Ränder auf dem Körper Null sind. Und für das H ist es entfernt. Der Rand auf hier ist gut, okay, es ist viel besser, aber ich mag nicht wirklich diese tolle Farbe auf Farbwähler dot com Lassen Sie uns mit meinem Lieblingsblau gehen , um dies ein wenig zu machen. Vielleicht so ein dunkles. Das Nummernzeichen mit der Hex-Farbe. Ich kann die Seite ein bisschen besser aussehen, und wir könnten auch zentrieren. Das ist gut, also lassen Sie uns den Text innerhalb unseres jeden Augenblicks eingeben. Okay? Süß. Könnte wahrscheinlich einige Abstände an der Spitze verwenden. Ein Schwung. Sie können auch etwas namens Padding verwenden. Und das wird einfach Abstand innerhalb des Textes hinzufügen, ähm, im Wesentlichen statt auf der Außenseite. Sagen wir vielleicht 20 Pixel. Ok, Süß. Lassen Sie uns auch den Fonds auf der Überschrift hier ändern. Also, was ich tun werde, ist eine Schriftfamilie auf dem Körper hinzuzufügen. Okay, es sieht ein bisschen besser aus, wenn Sie diese Mittel nicht mögen. Übrigens können Sie die Website namens Google Fonts verwenden, die hier eine Reihe von verschiedenen Schriftarten zur Verfügung stellen, die Sie innerhalb Ihrer Website importieren und verwenden können. Ich mag diesen sehr, also klicke ich auf das Pluszeichen. Sie können diesen Code hier kopieren, Frontier HTML-Datei innerhalb Ihres head-Tags. Kopieren Sie das einfach und fügen Sie es dort ein. Als nächstes können Sie sehen, dass die Schriftfamilie kopieren würde. Rette die drei unbarmherzigen. Und jetzt hat sich die Schrift auf ihrer ganzen Seite geändert. Als nächstes gehen wir weiter und reparieren Sie dieses Navigationsmenü. Fügen wir einen Selektor auf dem UL-Tag hinzu und zentrieren Sie den Text hier, der die Links zentriert. Und wir sollten wahrscheinlich auch einige Abstände am unteren Rand hinzufügen. Es ist Nachladen, dass die Links Luft jetzt zentriert sehen. Aber ich möchte auch diese Listenelemente auf Beacon machen. Sehen Sie sich das andere Taxi an, das hier zu jeder Zeit ist. Also das Listenelement. Ich will eigentlich, dass die in eine Linie nebeneinander liegen. Ich bin mir nicht sicher, ob Sie sich erinnern, als ich über einen Block und in Zeilen-Tags sprach und wie sie ein wenig anders angezeigt werden. Also, wenn ich diese in Zeile sehen kann, sie erscheinen direkt nebeneinander. Lassen Sie uns nun die Farbe dieser Links anpassen. Wählen Sie alle Anker-Tags aus, und lassen Sie diese Links wiedergeben. Ok, Süße. Ein Problem bei diesem Ansatz ist, wenn Sie einen Link innerhalb Ihres Inhalts hier hinzufügen, werden diese Links ebenfalls weiß sein. Was Sie also tun möchten, ist vor dem Anker-Selektor, den Sie bei einem anderen Tag hier einfügen möchten. Dies wird also sagen, dass Sie nur Links innerhalb der Navigation auswählen möchten. Das wird gleich funktionieren. Aber jetzt sind die Links innerhalb des Inhalts, sie werden nicht warten. Okay, lassen Sie uns auch den Fußzeilentext hier zentrieren. So ist es wie der Fußzeilen-Tag-Text die Zeilenmitte. Okay, jetzt ist die Fußzeile auch mittig gesäumt. Jetzt für den Inhalt hier. Wir können dies wahrscheinlich nur zentrieren, aber ich habe erwähnt, wie Sie Spalten hinzufügen können. Also lasst uns versuchen, das zu tun. Innerhalb Ihres HTML müssen neue Steuern hier machen, um unsere Sidebar-Inhalte und unsere Hauptinhalte zu halten . Das werden unsere zwei Säulen sein. Also werden wir einen Angriff verwenden, der ein div genannt wird, und dann haben wir zwei weitere Dibs drin. Kopie und Frieden. Jetzt sind diese Luft nur generische Tags, die Sie verwenden können und so müssen wir ihnen Namen geben. Könnte dies tun, indem Sie eine Klasse in der Klasse geben Name wird Container sagen. Dieser wird eine Sidebar sein. Und schließlich, der Inhalt kann es diese nennen, was auch immer Sie wollen. Es liegt an dir. Und so gehen wir weiter und schneiden Sie diese Tags und fügen Sie sie hier ein. Das Bild wird in die Seitenleiste im Absatz gehen, Tags aus Kurs, gehen zum Inhalt innerhalb unseres CSS. Wir müssen jetzt unser neues Containerelement auswählen, das heute genau hier ist. Klassen können wir mit einem Punkt und dann den Namen, den Punkt-Container auswählen . Und um Spalten zu erstellen, verwenden wir etwas, das Flex-Layout genannt wird. Also sagen wir Display Flex, laden Sie die Seite und boom. Wir haben hier zwei verschiedene Säulen. Das Bild auf der linken Seite und der Text auf dem Schlachtzug. Lassen Sie uns einen Teil der Abstände beheben. Ich weiß bereits, dass Absatz-Tags einen Rand Tops haben. Setzen wir das auf Null. Okay, das sieht ein bisschen besser aus. Und für den Inhalt fügen wir etwas Polsterung auf der linken Seite hinzu und haben das gleich. Sagen wir, 20 Pixel. Okay, es ist jetzt haben wir einige Abstände auf der linken Seite hier und schließlich, vielleicht etwas Polsterung auf der Oberseite des Containers. Alles klar, das sieht wirklich gut aus. Nun, vielleicht etwas Watte auf dem Boden. Es ist gut für die Fußzeile dort. Und so, ja, das sieht jetzt ziemlich gut aus. Es ist auch reaktionsschnell. Man könnte sagen, ich kann die Größe ändern und alles nur Größe ist ebenfalls unten. In Ordnung. Diese Seite ist wirklich weit gekommen. Jetzt haben wir hier ein schön aussehendes Layout mit einem Header. Wir haben die Überschrift und die Nap Bar, einen zweispaltigen Inhaltsbereich und eine Fußzeile am unteren Rand. Und das nächste Video, werden wir zu JavaScript bekommen, um ein wenig Interaktion in unsere Website hinzuzufügen. 9. Funktionen hinzufügen: JavaScript: bis zu diesem Punkt haben wir HTML verwendet, um Inhalte und CSS hinzuzufügen, um etwas Styling hinzuzufügen. Lassen Sie uns nun ein wenig Interaktion hinzufügen, indem Sie eine Schaltfläche hinzufügen, auf die jemand klicken kann, um eine geheime Nachricht anzuzeigen. Wir müssen wieder eine neue Akte erstellen. Es nennt sich dieses Skript Punkt Js Inside. Hier werden wir einen Code schreiben, um eine Schaltfläche auf der Seite auszuwählen, so dass wir sagen, Dokument dot get element von I. D. Neid Code wird hier Vorschläge bieten. Mach dir nicht zu viel Sorgen um den Code hier. JavaScript ist eine vollständige Programmiersprache, so dass es nicht ganz einfach wie HTML oder CSS Cento X. So werden wir sagen, Schaltfläche. Fügen Sie dann einen Ereignis-Listener hinzu. Also, wenn sie auf die Schaltfläche klicken, wird eine Funktion ausgeführt. Und ich sollte diesen Mantel in den Notizen haben, wenn Sie einfach kopieren und einfügen wollen, falls Sie nicht in der Lage sind , das genau dasselbe zu bekommen. Und jetzt zeigen wir eine geheime Nachricht mit der Verwendung der Alert-Funktion hier. Meine geheime Botschaft. Okay, das sollte funktionieren, aber zuerst müssen wir dieses Skript hinzufügen, in dem jede Team L Seite sehen kann, haben es bereits hier, mit dem Skript-Tag mit der Quelle, die auf das Skript zeigt. RGS-Datei. Wir müssen tatsächlich ein schließendes Tag für das Skript-Tag haben. Als nächstes müssen wir diese Schaltfläche irgendwo hinzufügen, damit wir den Button Tag verwenden, um geheime Nachricht zu zeigen. Dies wird das sein, was der Button sagt. Und weil wir eine gekaufte und mit einem i d Knopf ausgewählt haben, müssen Sie an, dass ich d. hier. Wir können dem wohl einen besseren Namen geben. Das ist eine Showbotschaft. Ein Update, unser Job-Skript hier zeigen Nachricht zu sagen. Ok, so schnell. Kleiner Rückblick. Wir haben hier eine neue Akte erstellt. Script dot Js Wir haben das in unsere Seite mit dem Script-Tag hinzugefügt. übrigens sicher, dass dies am Ende der Seite steht. Auf diese Weise wird der gesamte HTML-Code vor dem Skript, Terance, bereit sein . Und schließlich haben wir eine Schaltfläche inter html hinzugefügt, so dass, wenn sie darauf klicken, werden sie diese geheime Nachricht zeigen. Lassen Sie uns unsere Website neu laden. Du könntest sehen, dass der Knopf jetzt hier ist. Wenn ich auf diesen Boom klicke, steht hier die geheime Nachricht in dieser kleinen Alert-Box. Das war eine schnelle Einführung in JavaScript. Wie ich bereits sagte, es ist eine Programmiersprache, die viele Dinge tun kann und diese Ressource hier verknüpfen kann. Wenn Sie Java-Skript mehr in die Tiefe lernen und viele coole Dinge damit machen möchten, erstellen Sie einige coole kleine Anwendungen. 10. Deine Website hochladen: Jetzt lassen Sie uns unsere Website online hochgeladen, damit wir sie mit anderen teilen können. Dafür gibt es viele verschiedene Dienste. Dieser hier nennt man Brennnessel. Wenn ich Es gibt auch eine andere genannt bekommen Hilfe-Seiten und Surge. Persönlich denke ich, Metall, wenn ich am einfachsten für Sie sein werde. Hier eingeloggt . Wenn Sie also ein Konto erstellen, melden Sie sich an, werden Sie auf dieser Seite hier landen, gehen Sie vor und öffnen Sie den Ordner, in dem wir alle unsere Dateien gespeichert haben, und zogen uns in die Brennnessel melden Sie sich an,werden Sie auf dieser Seite hier landen, gehen Sie vor und öffnen Sie den Ordner, in dem wir alle unsere Dateien gespeichert haben, und zogen uns in die Brennnessel nach ein paar Sekunden, je nachdem, wie schnell es ist, bekommen Sie dies. Du bist gut hier. Wenn Sie darauf klicken und Boom sehen können, dass unsere Website ist jetzt online und funktioniert. Und hier ist der Domain-Schrägstrich Ihr seid alle hier. Sie können tatsächlich beginnen, mit Menschen zu teilen. Jemand anderes wird in der Lage sein, zu diesem zu gehen und alles zu sehen, was Sie hier hinzugefügt haben. Wenn Sie Ihre Website aktualisieren möchten, können Sie fortfahren zu den Deploys tippen Sie hier und ziehen Sie dann Ihren Ordner wieder mit aktualisierten Dateien. Alles klar, riesig. Herzlichen Glückwunsch, um Ihre erste Website online zu bekommen. Ich hoffe, dass Sie es in der Projekt-Galerie auf meiner Skill-Share-Klasse teilen. Stellen Sie sicher, dass es auch meinem Skulpturenprofil folgen und achten Sie auf andere Klassen, in denen ich posierte . Was für eine Entwicklung? Aber für jetzt, stellen Sie sicher, dass Sie Ihre HTML- und CSS und Ihre Job-Skript-Fähigkeiten weiter verbessern. Auf diese Weise können Sie weiterhin mehr Sachen zu Ihrer Website hinzufügen, was ich denke, ist, wo der Spaß darin wirklich liegt. Ich habe bereits das Mozilla Developer Network erwähnt. Sie haben wirklich großartige Dokumentation über diese drei verschiedenen Technologien im Web sowie viele andere Dinge. Also überprüfe das definitiv. Lernen Sie weiter und ich sehe Sie im abschließenden Video. 11. Letzte Gedanken: Okay, das schließt also die Klasse. Aber bevor Sie gehen, lassen Sie mich definitiv wissen mit der Überprüfung, was Sie gelernt haben, wie diese Klasse Ihnen geholfen hat . Oder vielleicht hat es nicht definitiv etwas Konstruktives bevorzugt. Und wenn Sie etwas wirklich cool Power persönliche Website bauen, wissen Sie, etwas super einfach oder nahm es weiter. Auf jeden Fall liebe es, es zu sehen. Ich bekomme meine Füße wieder darauf und alle anderen, die in dieser Klasse sind. Und so stellen Sie sicher, Poster Projekt in der Projektgalerie und ich werde mehr Klassen in zukünftigen Entwicklungen posten . Wenn du Bänder weiter willst, zeige ich dir definitiv, wie das geht. Also vergewissern Sie sich, dass Sie meinem Profil auf diese Weise folgen. Du weißt etwas. Und nochmals vielen Dank, dass Sie sich die Videos angesehen haben, als Teil der Klasse zu sein.