Hi, heute werden wir endlich Code schreiben, und ich werde Sie durch ihn führen, indem Sie Ihnen zeigen, wie Sie einen Editor verwenden können. Eine der größten Fallstricke, die ich gesehen habe, ist, dass sie zu genau auf das hören, was ich sage, anstatt tatsächlich zu versuchen , selbst einzutauchen und zu programmieren. Während ich Sie ermutige, sich zurückzulehnen und zuzusehen, was ich jetzt tun werde , hoffe ich, dass Sie sich hinsetzen und mit mir codieren. Der erste Schritt ist, dass Sie Ihre Dateien erstellen und bearbeiten müssen. Eine der größten Fallstricke, auf die Sie stoßen werden, ist, dass Sie Ihre Dateien überall speichern, Sie sind nicht in der Lage, sie später zu finden. Entscheiden Sie also, wie Sie Ihre Dateien organisieren. Wie willst du deinen Ordner benennen? Wo willst du es hinstellen? Zweitens müssen Sie sich für eine Namenskonvention entscheiden. Das ist nur eine schicke Art zu sagen, wie Sie Ihre Akten benennen wollen. Obwohl viele Leute einen Mac verwenden, und Sie dürfen Leerzeichen in Ihren Dateinamen verwenden, ist dies nicht etwas, was Sie tun möchten, wenn Sie Code schreiben. Entscheiden Sie also, dass Sie, wenn Sie zwei Wörter haben, die Sie zusammensetzen möchten, Unterstriche verwenden, um sie zu verbinden, oder verwenden Sie etwas, das wir CamelCase nennen, wo Sie den ersten Buchstaben jedes Wortes großschreiben. Denken Sie daran, verwenden Sie niemals Leerzeichen und seien Sie sehr konsistent in Bezug auf Ihre Großschreibung, wenn Sie sie verwenden möchten. Schließlich müssen Sie sich für einen Editor entscheiden. Wenn Sie einen Windows-Computer verwenden, ist Notepad bereits integriert. Sie können auch Notepad ++ oder Sublime verwenden. Wenn Sie einen Mac verwenden, ist TextEdit der Standard-Editor, obwohl viele Benutzer auch TextWrangler verwenden. Ich werde Sublime während des gesamten Kurses verwenden, aber für heute werde ich Ihnen Beispiele zeigen, wie Sie auch in Notepad und TextEdit bearbeiten können. Also, um loszulegen, lassen Sie uns schnell die fünf Schritte überprüfen, die wir tun werden, einige von ihnen wiederholt. Sie werden damit beginnen, Ihren Editor zu öffnen, und dann speichern Sie Ihre Datei, fügen Sie einige Inhalte hinzu, speichern Sie die Datei erneut und öffnen Sie sie in Ihrem Browser. Ich möchte Sie durch ein kurzes Beispiel führen, und ich werde Sublime verwenden, um es zu tun. Aber keine Sorge, ich werde Ihnen einige der anderen Wege zeigen, es auch zu tun. Also habe ich meinen Sublime Editor hier angesprochen, eine schöne schwarze Datei. Ich werde anfangen, indem ich zur Akte gehe. Und sparen. Und ich werde es nur firstpage.html nennen. Eines der Dinge, die Sie sofort entscheiden müssen, ist, wo Sie das speichern. Hoffentlich haben Sie sich dafür entschieden, bevor Sie überhaupt angefangen haben zu arbeiten. Ich werde meine in einem Ordner mit dem Namen Webseiten aufbewahren, die ich auf meinem Desktop gelegt habe. Aber Sie können hier alles auswählen, oder auch wenn Sie möchten, wenn Sie hier auf die Seite klicken, können Sie einen brandneuen Ordner erstellen. Was Sie nicht tun möchten, ist, Ihren gesamten Code auf Ihrem Desktop zu speichern. Lass uns retten gehen. Und jetzt, während es viele Male gibt, die ich dich zwingen werde, durchzusitzen und mir zuzusehen, wie ich schrecklich auf dem Bildschirm tippe, dieser hier, nur um Zeit zu sparen, werde ich voran gehen und schummeln und einfügen Code, den ich bereits geschrieben habe. Wie Sie sehen können, habe ich meinen Dokumenttyp, den Kopfteil und den Körper. Im Kopf habe ich meine Codierung und meinen Titel enthalten. In der Leiche sagen wir nur Hallo. Ich ging hinein und ich habe es mit Strg+S gespeichert. Sie können immer Datei > Speichern tun, aber ich finde Strg+S ist viel schneller. Und für jeden Editor, den Sie verwenden, gibt es diese kleinen hilfreichen Tasten, die Ihnen helfen, zu wissen, ob Sie etwas geändert haben oder nicht. Also, wenn Sie sich jetzt firstpage.html ansehen, was für Sie schwer zu sehen sein könnte, wenn ich reingehen und etwas ändern würde. Sie bekommen tatsächlich einen kleinen Kreis, um Sie wissen zu lassen, dass Sie in einer Weile nicht gerettet haben. Also habe ich weitergemacht, ich habe Inhalte erstellt und jetzt ist es Zeit für mich, meine Seite zu öffnen. Eine Möglichkeit, es zu tun, ist, hier rüber zu meinem Ordner zu gehen. Und oh, hier ist firstpage.HTML. Für mich gibt es ein kleines Symbol von Chrome ab zur Seite. Für Sie könnte es sich um einen anderen Browser handeln. Ich gehe voran und klicke darauf und rufe meine FirstPage auf, und ich habe Erfolg. Ich kann nicht genug betonen, dass die meiste Zeit, wenn man etwas zuerst tippt, es eigentlich nicht für dich funktioniert. Für mich habe ich zum Glück die Macht der Bearbeitung. Du hast keine Ahnung, dass ich tatsächlich ein paar Versuche brauchte, die Akte zum Laufen zu bringen, weil ich mit einigen Dingen rumgemacht habe. Während des gesamten Kurses werde ich versuchen, Ihnen Bereiche zu zeigen, in denen Sie ein Problem haben könnten. Hoffentlich wirst du das nicht, aber wenn du es tust, sind sie alle sehr einfach zu beheben. Eines der häufigsten Probleme ist, dass, wenn Sie mit der rechten Maustaste auf die Datei klicken, anstatt sich im Browser zu öffnen, stattdessen Ihren Editor öffnet. Wenn Sie das beheben möchten, müssen Sie nur mit der rechten Maustaste auf die Datei klicken und Öffnen mit wählen. Ein weiteres Problem, das ziemlich viel passiert, ist, dass Sie, wenn Sie Ihre Datei öffnen, anstatt eine schön formatierte Webseite zu sehen, stattdessen alle Ihre Tags sehen. Wenn das passiert, müssen Sie Ihre Dateierweiterung überprüfen und sicherstellen, dass es „.html“ heißt und nicht so etwas wie „.text“ oder „.rtf“. Ein weiteres Problem, das ziemlich viel passiert, ist, dass Sie Ihren Code ändern, aber Ihre Seite sieht genau gleich aus. Es gibt zwei Gründe, warum dies tendenziell geschieht. Eines ist, dass Sie etwas tun müssen, das Ihren Browser aktualisiert. Dies bedeutet nur, dass Sie den Inhalt hochladen. Das zweite, was oft passiert, ist, dass Sie vergessen haben, Ihren Dateinamen zu überprüfen. Lassen Sie mich Ihnen ein Beispiel dafür zeigen. Gehen wir zurück zu unserer ursprünglichen Datei. Wie Sie sehen können, habe ich Hello World hier geschrieben. Dies ist eine sehr Computer-Science-y Art Sache zu sagen, und da ich versuche, normaler zu erscheinen, werde ich dies in Hello Everybody ändern. Ich gehe rein und werde meine Akte speichern. Fertig. Nun, wenn ich zurück zu meiner Webseite gehe, steht dort immer noch Hallo Welt. Es hat sich nicht geändert und ich bin irgendwie aufgeregt darüber. Also, jetzt erinnere ich mich, dass es oft notwendig ist, Ihre Seite zu aktualisieren. Es gibt viele Möglichkeiten, wie Sie dies tun können, können Sie in der Regel zu den kleinen kreisförmigen Bereich hier oben gehen und klicken Sie auf Aktualisieren. Sie können mit der rechten Maustaste klicken und auf Neu laden klicken, oder Sie können auch zu Ansicht gehen, sorry. Sie können dies auch über die Werkzeugleiste oben tun. Also, ich werde voran gehen und mich hier erfrischen. Und Sie können sehen, jetzt habe ich das Hallo Jeder. Das andere Problem, das ich erwähnte, ist, dass manchmal Leute ihren Dateinamen ändern. Vielleicht arbeiten Sie nicht mehr an Ihrer FirstPage. Also haben Sie beschlossen, dass ich dies als Datei > Speichern unter zweite Seite speichern werde. Speichern Sie es. Ich gehe zurück und ich werde die Akte auffrischen. Hallo an alle. Nun, es ist nichts passiert. Du wirst feststellen, dass das immer und immer wieder passiert. Wenn Sie mit einer Menge von Dateien alle zur gleichen Zeit zu tun haben, müssen Sie sicherstellen, dass die, die Sie im Browser suchen, mit der übereinstimmt , die Sie eingegeben haben. Da ich den Namen meiner Datei geändert habe, muss ich daran denken, ihn auch hier in der URL-Leiste zu ändern. Bumm. Ein weiteres Problem, das ziemlich häufig auftaucht, ist diese Idee, die Sie bekommen, was wir nennen, seltsame Charaktere. Einer der Gründe für dieses Geschehen ist mein alter Favorit, kopieren und einfügen. Immer wenn ich Ihnen Code gebe und Sie ihn über PowerPoint betrachten, ist das Problem, wenn Sie ihn kopieren und einfügen, viele der Zeichen übersetzen nicht genau so, wie Sie es erhofft haben, und Sie bekommen, was wir seltsame Zeichen nennen. Der Schuldige Nummer eins sind die Zitate. Also, wenn Sie tippen und Sie eine Art seltsame Sache haben, die Sie nicht erwarten, gehen Sie zurück und versuchen Sie, den Code von Hand einzugeben. Also habe ich Ihnen gezeigt, wie Sie eine Datei in Sublime erstellen und bearbeiten. Aber ich möchte sicherstellen, dass jeder eine Chance hat zu sehen, wie ich Dateien mit den Editoren erstellen kann, die sie auf ihrem eigenen Computer haben. Also werde ich Ihnen auch ein Beispiel in TextEdit und auch im Editor zeigen. Ich hoffe wirklich, wenn Sie sich diese Beispiele ansehen, haben Sie Ihren Computer raus, und Sie werden mit mir tippen. Gehen Sie weiter und pausieren Sie, stoppen Sie die Dinge, gehen Sie nicht weiter in das Video, bis Sie sich sicher fühlen, dass Sie an dem Punkt sind, an dem ich mich selbst erreicht habe. Hallo, alle! Jetzt machen wir eine Datei mit TextEdit. Und wenn ich böse sein wollte, würde ich Ihnen ein sehr schnelles, einfaches Beispiel zeigen, wie Sie eine Datei in TextEdit erstellen. Aber stattdessen werde ich sehr ehrlich zu dir sein und zugeben, dass es nur etwa 15 oder 20 Minuten dauerte, um herauszufinden, wie man eine wirklich einfache Datei in TextEdit erstellt. Lassen Sie mich Ihnen zuerst zeigen, was ich falsch gemacht habe. In Ordnung? Ich werde meinen Code für meine sehr einfache Seite einfügen. Okay, lass uns das loswerden. Da gehen wir. Wir haben gerade unseren Header und unsere Inhalte. Also, Sie können dies eingeben, während wir gehen, oder Sie können warten. Also ist es Zeit für mich, die Datei zu speichern. Und was ich tun muss, ist, dass ich sicherstellen muss, dass ich im richtigen Ordner mit dem Dateinamen speichere. Also werde ich voran gehen und diese FirstPage anrufen und ich werde hier runtergehen und ich möchte sicherstellen, dass ich dies als Webseite speichere. Also eine der Optionen ist .html, also werde ich darauf klicken. Ich weiß, dass ich meine firstpage.html habe, es ist in dem Ordner, den ich will und ich wirklich das Gefühl, wir sollten gut gehen. Also werde ich voran gehen und es retten. Ich gehe hier rüber in meinen Web-Seiten Ordner, öffne ihn. Und es wird sich in Chrome öffnen. Also, mal sehen, wie es geht. Das war nicht das, was ich gehofft hatte, als wir dieses Segment zum ersten Mal aufgenommen haben, und es dauerte sehr lange, um herauszufinden, was los war. Das erste, was ich überprüft habe, lassen Sie mich das schließen, ist, dass ich sicherstellen möchte, dass meine Dateierweiterung wirklich .html war. Und es war, es gab keine .txt oder .rtf danach. Das nächste, was ich reingegangen und überprüft habe, ist, dass alle meine Zitate den richtigen Weg gingen. Also lasst uns weitermachen und diese einlegen, denn wenn ihr euch daran erinnert, sage ich euch immer, dass Kopieren und Einfügen manchmal schlechte Zitate geben kann. Damit wir wieder zurückgehen können. Immer noch kein Glück. Wenn Sie TextEdit verwenden möchten, müssen Sie tatsächlich eingehen und einige Änderungen am TextEdit Programm vornehmen. Es hat nichts mit dem zu tun, was du tippst. Es hat mit dem TextEdit Programm zu tun. Also werde ich weitermachen, das kopieren, nur für den Fall, dass ich es verliere, und es ausräumen. Und ich gehe zu TextEdit, wähle Einstellungen, und du kannst sehen, dass wir zwei Optionen haben. Neue Dokumente und Öffnen und Speichern. Eines der ersten Dinge, die ich sagen werde, ist hey, wenn ich ein neues Dokument habe, möchte ich, dass es im Klartext ist. Nicht rtf oder Rich-Text, sondern Nur-Text. Das zweite, was du tun willst, ist hier rüber zur Öffnung zu gehen. Sehen Sie die Anzeige HTML-Dateien ist HTML-Code? Wir gehen weiter und klicken darauf. Und schließlich ist das Wichtigste, wenn Sie Ihre Dateien speichern, wir möchten sie als utf8 speichern. Also werde ich hier für eine Sekunde pausieren, nur eine Sekunde, während Sie sich Ihr eigenes TextEdit-Menü ansehen. Sie möchten sicherstellen, dass diese Kontrollkästchen aktiviert sind und Sie es in Unicode, utf8 geändert haben. Ok? Wenn Sie die Dinge durcheinander gebracht haben, gehen Sie nach unten, um alle Standardwerte wiederherzustellen, und versuchen Sie es erneut. Ich werde das schließen. Ich gehe weiter und mache Neu, füge meinen Code ein. Oh, das ist sehr klein für dich, aber das ist okay. Führen Sie Datei > Speichern aus. Und nennen wir es FirstPage2.html. Sie können sofort sehen, dass es sagt, wollen Sie HTML-Erweiterung oder den Punkttext verwenden? Und ich werde es sagen, verwenden Sie HTML. Bevor ich darauf klicke, möchte ich jedoch darauf hinweisen, dass es hier unten zeigt, dass es als Unicode utf.8 gespeichert wird. Ich kann diese Warnung loswerden, wenn ich möchte, indem ich darauf deklicke, wenn keine Erweiterung bereitgestellt wird, verwende .txt. Also werden wir HTML verwenden. Gehen wir rüber, überqueren wir uns die Finger, hoffen wir auf das Beste. Und jetzt habe ich eine erfolgreiche Seite. Wenn Sie also TextEdit verwenden, gibt es nicht wirklich viel zu tun, außer beim ersten Einrichten. Stellen Sie sicher, dass Sie in die Einstellungen gehen. Von dort aus kann ich jetzt reingehen, Änderungen vornehmen, wir haben es geschafft. Speichern und aktualisieren. So hoffentlich können Sie jetzt eine Datei erfolgreich speichern und bearbeiten. Okay, sagen wir, dass Sie einen PC verwenden, um Ihre Dateien zu erstellen. Was Sie tun möchten, ist, dass Sie wahrscheinlich zuerst Notepad verwenden möchten, da es die kostenlose Version des Editors ist, die bereits auf Ihrem Computer ist. Das erste, was ich tat, war, dass ich einen Ordner direkt auf dem Desktop erstellt habe, wo ich meine Dateien aufbewahren kann. Ich weiß, es ist klein, man kann es wahrscheinlich nicht sehen, aber es nennt sich Webseiten. Wenn Sie nicht wissen, wie Sie einen Ordner erstellen, können Sie mit der rechten Maustaste auf den Schreibtisch klicken, zu Neu und Erstellen eines Ordners wechseln. Sobald Sie den Ordner erstellt haben, in dem Sie Ihre Dateien speichern möchten, bin ich, direkt von der Fledermaus, gehen Sie voran und sagen Datei > Speichern, und ich werde diese firstpage.html nennen. Es ist sehr, sehr wichtig, dass Sie den HTML-Code einschließen. Wenn Sie das nicht einschließen, wird der Computer denken, dass Sie nur an einem anderen alten Dateityp arbeiten. Also werde ich hier runtergehen und es von Textdokumenten in alle Dateien ändern. Gehen Sie weiter und sparen Sie. Oops, es existiert schon, aber ich werde sagen, okay. Nun, es ist Zeit für mich, einige Inhalte einzureichen. Ich werde hier ein bisschen betrügen und einfach meine Inhalte kopieren und einfügen, obwohl du es Stück für Stück eingeben musst. Also wieder, ich habe meinen Doctype, meine HTML-Sprache entspricht Englisch, Meta-Zeichensatz entspricht UTF-8, meinen Titel und meinen Inhalt. Nur um sicher zu sein, werde ich hier reingehen und meine Zitate wieder eintragen. Weil Zitate mich immer nervös machen, wenn ich kopiere und einfüge, dass ich vielleicht eine Art Charakter eingefügt habe, den mein Editor nicht erkennen wird. Jetzt, da ich ziemlich glücklich und sicher bin, dass ich die Dinge, die ich will, in meiner Datei habe, werde ich gehen Sie weiter speichern Sie es wieder, gehen Sie in meinen Ordner und klicken Sie auf die FirstPage. Und da gehen wir. Jedes Mal, wenn Sie Ihre Datei ändern, können Sie einfach beide Fenster geöffnet halten, wenn Sie den Raum haben. Nehmen Sie Ihre Änderungen vor. Job, ich habe eine Akte. Speichern. Und nachladen. Netter Job. Sie haben eine Datei mit dem Editor erstellt.