Einführung in HTML: Erstellen einer Portfolio-Website

1. Trailer: In dieser Einführungsklasse werden wir eine vierseitige Portfolio-Website erstellen, die einige der häufigsten Aspekte eines Online-Portfolios enthält, das für eine Vielzahl verschiedener Themen und Berufe genutzt werden kann . Wir werden aufschlüsseln, welche Inhalte auf jeder Seite benötigt werden und wie dieser in unseren HTML-Code übersetzt wird. Am Ende unserer Klasse haben wir eine vierseitige anklickbare Website mit einer Homepage, einer Arbeitsseite und einer Seite einer Kontaktseite. Wenn Sie noch keine HTML-Zeile geschrieben haben oder einen HTML-Refresher benötigen, ist diese Klasse perfekt für Sie. Wir werden HTML von Anfang an abdecken, so dass keine Vorkenntnisse erforderlich sind. Egal, ob Sie auf einem Mac oder PC sind, alle sind willkommen. Ich werde Sie sicher durch alle Schritte führen, um uns von der Installation eines Texteditors über das Speichern unserer Dateien und das Erlernen der Grundlagen von HTML zu bringen. Wir werden nicht zu verrückt mit einem angesagten Computerjargon, aber ich werde darauf achten, wichtige Terminologie hervorzuheben, die Sie kennen sollten, und wie Ihre eigene Arbeit beheben können und Antworten auf häufig gestellte Fragen zu finden , wenn diese Klasse beendet ist. 2. Willkommen im Kurs!: Oh, hallo. Ich habe dich dort nicht gesehen. Mach mir nichts aus. Ich habe gerade ein wenig spät gelesen über eines meiner Lieblingsthemen, den Personal Computer. Aber da du jetzt hier bist, lass mich das weglegen und lass uns anfangen, HTML zu sprechen. In dieser Einführungsklasse werden wir ein vierseitiges Online-Portfolio aufbauen. Die Website wird nur HTML sein, was bedeutet, dass die hübschen Stile und Farben werden zu einem späteren Tag kommen, aber in dieser Klasse werden wir eine starke und robuste Grundlage bauen, die Sie in die wunderbare awesome Welt von HTML. Am Ende unserer Klasse werden wir diese vierseitige klickbare Website mit einer Startseite, einer Arbeitsseite, einer Info Seite und einer Kontaktseite haben. Wir werden ein wenig über die gemeinsamen Elemente sprechen, die auf jeder dieser Seiten sein werden und wie Sie sie verwenden können, um Ihre eigene Portfolio-Website zu erstellen. Wir werden die Seite für Jon Arbuckle machen. Also, lassen Sie uns darüber reden, wie wir anfangen. 3. Festlegen des Projektinhalts: Über die Dauer dieses Kurses werden wir HTML für eine vierseitige Portfolio-Website erstellen , die einige der häufigsten Aspekte eines Online-Portfolios enthält, das für eine Vielzahl verschiedener Themen und Berufe verwendet werden kann . Wir werden aufschlüsseln, welche Inhalte auf jeder Seite benötigt werden und wie dies in HTML-Code übersetzt wird. Ich finde es am besten, wenn Sie eine neue Website erstellen, eine Idee, einige Inhalte und eine Richtung für das, was wir bauen, zu haben , damit wir auf ein Ziel hinarbeiten können. Wir werden unsere Website für einen fiktiven Client erstellen als Basis für Kopie und Struktur verwendet wird. Also heute ist unser Kunde John Arbuckle. Hier sind einige Dinge, die wir über John wissen. Er ist ein Karikaturist. Er besitzt eine Katze und einen Hund, und John hat sich vielen sozialen Netzwerken angeschlossen, um professionelle und persönliche Verbindungen zu treffen. John ist zu uns gekommen, weil er ein Online-Portfolio möchte , um seine Illustrationsarbeit zu präsentieren und seine soziale Reichweite erweitern möchte , indem einige Informationen über sich selbst und seine sozialen Netzwerke bereitstellt. Das erste, was wir tun wollen, ist herauszufinden, welche Seiten für unsere Website benötigen. Wir werden dies tun, indem wir eine einfache Sitemap erstellen. Wenn Sie noch keine Sitemap gesehen haben, ist das okay. Es sieht ein bisschen so aus. Jedes Feld stellt eine Seite in der Website dar. So können Sie sehen, dass sie eine Startseite haben, und über Seite oder was ist neue Seite, und einige andere Seiten unter diesen Seiten. Die Sitemap wird uns helfen, wenn wir unsere Website aufbauen , um sicherzustellen, dass wir alle unsere Seiten abgedeckt haben. Sie können eine Sitemap in einem Diagrammprogramm wie auf dem Amigraph oder in Photoshop erstellen, oder sogar mit einem Stift und einem Papier. Für diese Seite werden wir ein Beispiel mit Gliffy einrichten. Dies ist Gliffy.com und es wird uns nur einen schnellen Weg geben, um mit dem Zeichnen zu beginnen. Also, wir werden jetzt anfangen zu zeichnen und es wird das laden. Also, das erste, was wir auf unserer Website wollen, ist eine Homepage. Also, wir werden das hier rausziehen und sagen nach Hause. Wir werden auch eine Seite brauchen, die alle von Johns Arbeit zeigt, für die Dinge, für die Leute ihn einstellen wollen , und so haben wir eine Arbeitsseite. Als nächstes wollen wir ein wenig über Johns Persönlichkeit erzählen und ein wenig mehr darüber, wie er als Mensch ist. Also, wir werden eine über Seite machen. Schließlich, wenn Leute wie John und seine Arbeit, werden wir eine Möglichkeit haben, ihn zu kontaktieren, also wollen wir eine Kontaktseite haben. Lassen Sie uns dieses kleine Tool hier greifen, um eine Verbindung zu jedem, und der Kontaktseite zu machen. Das ist ein bisschen uneben und manchmal mache ich mir keine Sorgen. Also, da gehen wir. Unsere Site-Karte ist alles gesetzt. Das werden die vier Seiten sein, die wir für John's Portfolio-Website aufbauen werden. Als nächstes werden wir definieren, welcher Inhalt auf jeder Seite sein wird, und wir werden dies tun, indem wir eine Inhaltsstruktur erstellen. Nach Inhalt spreche ich über Dinge wie Text, Bilder und Videos oder was auch immer auf allen vier Seiten der Website erscheinen wird. Ich werde einen Texteditor öffnen, um dies zu tun. Aber wieder, wenn Sie nur ein Stück Papier und einen Stift oder einen Notizblock, den Sie möchten, alles, was am besten für Sie funktioniert. Also, natürlich werde ich die Homepage brauchen, die wir erwähnt haben, und die Homepage wird als Willkommensgruß für Besucher und eine schnelle Präsentation von Funktionen aus John's Portfolio dienen . Wir werden brauchen, was wir Heldeninhalte nennen werden, und der Heldeninhalt wird so etwas wie einen kurzen Aufzug Pitch oder einen schnellen Ein-Liner haben , dass Leute, die auf die Website kommen, wissen, worum es geht. Also, in diesem Fall, Jon Arbuckle, ein freiberuflicher Illustrator und Autor. Und dann werden wir auch eine Art großes Bild haben, vielleicht von einem Comic oder vielleicht von etwas anderem, das John beschreibt. Ein Weg, dass durch das visuelle mit dem Aufzug Pitch, wir wirklich bekommen Benutzer sofort wissen, worum es auf der Website geht, weil die Menschen ihre Zeit schätzen. Lassen Sie uns sie sofort wissen, was es ist. Als nächstes wollen wir einen Abschnitt über John's Web-Comics haben. Also, vielleicht haben wir nur einen Titel und eine Beschreibung von Text, um die Leute wissen zu lassen, dass John Comics schreibt. Wir werden auch einen Link dort haben, um mehr über die Comics zu erfahren. Und so buchstabiert man Comics nicht, also lasst uns das reparieren. Hey, da gehen wir. John ist auch wirklich auf Poker und er hat eine Poker-CD zum Verkauf, also wollen wir ein Bild davon, einen Namen der CD und einen Link zu Amazon kaufen, um sicherzustellen, dass jeder seine Poker fix in bekommen. Wir wollen auch, dass Besucher wissen, dass John auf Twitter ist, also werden wir einen Link zu John's Twitter-Seite haben. Wir werden auch ein Kunden-Testimonial zeigen wollen, damit die Leute wissen, dass John wirklich genial ist, mit ihm zu arbeiten. Also, wir halten das hier vor Dr. Luiz Wilson, darüber, wie es ist, mit John zu arbeiten, und wir werden auch einen Call-to-Action-Link dort haben wollen. Also, so etwas wie: „Mieten Sie einen John für Ihr Haustier Porträt braucht. Nehmen Sie Kontakt auf.“ Wir werden auch wollen, was ich Header-Inhalte nenne, und Header-Inhalte sind Dinge wie das Logo und die Website-Navigation. Header-Inhalte werden auf jeder Seite angezeigt weil wir immer möchten, dass die Leute wissen, auf welcher Website sie sich befinden, und wir möchten den Menschen immer eine Möglichkeit geben, auf andere Seiten der Website zu gelangen. Also, das wird unsere Website-Navigation halten. Ähnlich wie unsere Kopfzeileninhalte wir zum Fußzeileninhalt, der am Ende jeder Seite angezeigt wird. In diesem Fall werden wir Copyright-Informationen über den Inhalt der Website haben. Als Nächstes ist die Arbeitsseite, und auf der Arbeitsseite werden wir auch diesen Kopf- und Fußzeileninhalt einschließen, und wir werden auch den Seitentitel haben, in diesem Fall, funktionieren. Hier ist, wo wir John's Web-Comics zeigen werden. In diesem Fall hat er zwei Comics, die er auf der Website zeigen möchte, die Lasagne Chronicles und Cat Town, und jeder von ihnen wird ein Bild haben, wahrscheinlich wie der erste Frame eines Comics, um den Benutzern zu zeigen, wie es ist, und auch auf die externe Seite, wo diese Comics leben, verlinkt. John macht nicht nur Comics, er macht auch Porträts. Wir wollen also sicherstellen, dass die Leute darüber Bescheid wissen. Also, wir werden ein Beispiel für zwei Porträts, die er für seine Kunden gemacht hat. Schließlich können wir nicht über Johns Marmelade vergessen, also lassen Sie uns sicher sein, seine CD dort zu halten, die die beste von Johnny Arps ist, zusammen mit dem CD-Image, und einen Link, um es auf Amazon zu kaufen. Als nächstes haben wir die über Seite und wieder wird der Kopfzeileninhalt, der Fußzeileninhalt, eine weitere Seite mit dem Titel, diesmal über. Lassen Sie uns ein Bild von John da reinbringen, damit die Leute wissen können, dass er ein freundlich aussehender Kerl ist. Wir werden ein paar Absätze Text haben, die John beschreiben, etwas einladendes und glückliches, ein wenig über vielleicht seine Hobbys und seinen Prozess beim Erstellen von Porträts und Kommentaren. Lassen Sie uns auch eine Liste von Fähigkeiten und professionellen Dienstleistungen, die John bietet. Zu guter Letzt haben wir unsere Kontaktseite. Wieder, Kopf- oder Fußzeileninhalt, der Seitentitelinhalt. Wir haben Johns E-Mail-Adresse, damit die Leute mit ihm in Kontakt treten können, und wir werden auch eine Liste von Links zu Johns Social-Media-Präsenz führen, damit die Leute ihm folgen oder ihn mögen oder irgendetwas anderes, das Menschen tun im Internet mit den sozialen Medien der Menschen in diesen Tagen. Sie können sehen, die Struktur hier wird nicht nur für das Portfolio von John Arbuckle speziell funktionieren , sondern von fast allen Profis, auch wenn Sie keine Poker-CDs haben. Also, wenn Sie versuchen möchten, Ihre persönlichen Informationen anstelle von John's während dieser Klasse zu verwenden , gehen Sie völlig dafür. Wenn Sie näher verfolgen möchten, was ich im Video mache, dann verwenden Sie die Klassendateien hier und später könnten Sie etwas in Ihren eigenen Informationen ausprobieren. 4. Zusammenstellung unserer Tools: Ein Texteditor ist eine Art von Programm, das zum Bearbeiten von Nur-Text-Dateien verwendet wird. Wir können HTML mit jedem Texteditor da draußen schreiben. Also, wenn wir nur weitermachen und etwas wie Notepad verwenden und es als HTML-Dokument speichern wollten , könnten wir es. Es gibt auch, was als HTML-Editoren bekannt ist. HTML-Editoren sind ähnlich Texteditoren, fügen aber zusätzliche Funktionen hinzu. Die Funktionalität, die sie hinzufügen, ist spezifisch für Dinge wie Web-Entwicklung mit Dingen wie Syntaxhervorhebung, Tastenkombinationen, automatische Vervollständigung und mehr. Sie haben viele Möglichkeiten der HTML-Editoren da draußen, und ich schlage vor, nach dieser Klasse, Sie überprüfen sie, um zu sehen, ob es diejenigen gibt, die Sie mehr als andere möchten. Einige werden bezahlt, andere sind kostenlos. Viele von ihnen haben kostenlose Testversionen, also überprüfen Sie, bevor Sie für sie bezahlen. Für diesen Kurs empfehle ich, mit Sublime Text 2 zu beginnen. Ich mag Sublime Text sehr, weil er kostenlos heruntergeladen und ausgewertet werden kann und auch für Mac und PC verfügbar ist. Das ist Sublime Text 2. Sie haben derzeit auch eine Version von Sublime Text 3, aber das ist in Beta. Also, lassen Sie uns voran und verwenden Sie einfach 2 für jetzt, und dann wollen Sie basierend auf dem Betriebssystem wählen, das Sie verwenden. Ich benutze zufällig OSX, also werde ich darauf klicken, und der Download geht voran und beginnt. Wenn es fertig ist, öffnen wir das und installieren es. Sobald es heruntergeladen wurde, möchten Sie das öffnen und dann in diesem Fall bin ich auf einem Mac, also ziehen wir das einfach in meinen Anwendungsordner, um es zu installieren. Ähnliche Installationsanweisungen sollten auf einem PC befolgt werden. Das nächste, was wir in Bezug auf Tools für die Web-Entwicklung benötigen, ist, ein moderner Browser. Obwohl Sie alle Browser verwenden können, empfehle ich dringend, Google Chrome zu verwenden. Ich werde Chrome in dieser Klasse verwenden Wenn Sie also genau folgen möchten, empfehle ich, diese herunterzuladen. Es hat einige großartige Tools, die wir verwenden können, während wir unser HTML erstellen. Ein weiterer großartiger Browser ist Firefox. Also, wenn Sie auch Firefox's einen Schuss geben möchten, das hat ähnliche Dinge, wirklich hinzugefügte Funktionen wie Chrome hat, aber ich werde Chrome für den Rest dieser Klasse verwenden. Wenn Sie eines der beiden nicht mögen, Opera, Safari oder Internet Explorer verwenden, und Sie müssen möglicherweise ein paar zusätzliche Brillen ausführen, um einige Tools zu finden, die Sie verwenden können. Das letzte, was wir brauchen, um in dieser Klasse zu beginnen, ist, wir einen Ordner erstellen, der alle unsere Klassendateien enthält. Wir wollen die Dinge nicht überall sehen und sie alle verlieren. Also, lassen Sie uns sicherstellen, dass wir die Dinge schön und organisiert halten. Also, im Moment werde ich das nur auf meinem Desktop machen, und ich werde es Jon-Arbuckle-Site nennen. Wenn Sie es auf Ihrem Desktop speichern möchten, können Sie dies tun. Andere gängige Orte befinden sich in Ihren Dokumenten, oder wenn Sie einen Site-Ordner haben, sind dies wahrscheinlich geeignetere Orte, um ihn zu behalten. Denn gerade jetzt, während dieser Klasse, werde ich es auf dem Desktop behalten und dann an einen geeigneteren Ort danach verschieben. Sie werden bemerken, dass ich meine Website Jon-Arbuckle-Site genannt habe. Ich verwende gerne Bindestriche für Worttrennzeichen. Andere Menschen verwenden Leerzeichen oder Unterstriche. Leerzeichen können ein wenig knifflig werden, weil manchmal Browser oder Ihr Betriebssystem das lustig lesen können. Wenn Sie jemals solche wie Prozent 20 in URLs gesehen haben, kann das passieren. Andere Dinge, andere Leute verwenden gerne Unterstriche. Unterstriche sind ziemlich cool. Manchmal fällt es mir schwer, sie zu lesen, weil sie wie ein Raum aussehen. Aus diesem Grund verwende ich für meine Namenskonventionen normalerweise Bindestriche, und ich halte die Dinge in Kleinbuchstaben. Wenn etwas besser für Sie funktioniert, tun Sie es sicherlich, aber ich würde empfehlen, sich an eine Syntax zu halten, wenn Sie Dinge benennen. Das hält die Dinge nur ein wenig organisierter, und wenn Sie jemals mit jemand anderem gearbeitet haben, können Sie sagen, was Ihre Namenskonvention ist, dass sie dem folgen. Also, jeder wird auf der gleichen Seite arbeiten. Nachdem ich diesen Ordner erstellt habe, um alle meine Dateien zu speichern, werde ich das öffnen, und eine Sache, die ich weiß, dass ich auf meiner Website haben werde, wird ein paar Bilder sein. Also, ich werde voran gehen und auch einen anderen Ordner für Bilder erstellen. Ich werde diesen Ordner img nennen. Ich nenne es img, weil es ein wenig kürzer ist, als das vollständige Wort für Bilder auszugeben , und es ist immer noch wirklich einfach zu lesen, was das ist. Wenn Sie img sehen, werden Sie wissen, dass ich über Bilder spreche. Ich werde es wahrscheinlich nicht etwas Kleiniges nennen. Wenn du es mir nennst, weiß jemand vielleicht nicht, was das ist. Wenn Sie es so etwas wie Fotos Go Here nennen , ist das wirklich lang, und Sie möchten das nicht ständig eingeben. Also, es ist schön, Ihren Ordnernamen kurz und süß zu halten, aber auch um sicherzustellen, dass er für sich selbst und andere Leute lesbar ist, damit Sie leicht wissen, was in diesem Ordner geht. Wenn Sie an dieser Stelle denken, dass Sie Videos auf Ihrer Website haben, können Sie auch einen Ordner für Videos erstellen. Also, für dort kann ich Videos nennen. Wenn Sie wussten, dass Sie eine PDF-Datei hinzufügen möchten, vielleicht möchten Sie einen Ordner für PDFs oder für andere Arten von Medien erstellen, dies sind alle mögliche Vorschläge. Im Moment werde ich nur Bilder haben. Also, in meinem jon-arbuckle-Site-Ordner, werde ich unseren img images Ordner haben. Also, das schließt unsere erste Lektion. Danach möchten Sie fortfahren und die Anmeldung für Ihre Website erstellen, die die Seiten enthält, aus denen Ihr Portfolio besteht, erstellen Sie eine Inhaltsskizze für den Text und die Medien, die auf jeder Seite erscheinen. Denken Sie daran, wenn Sie versuchen, eine Website für sich selbst anstelle von Jon Arbuckle zu erstellen, gehen Sie völlig für sie oder versuchen Sie beides zur gleichen Zeit, je nachdem, was Sie sich am wohlsten fühlen. Ich möchte auch Vermögenswerte für das Projekt sammeln. Dies beinhaltet alle Wörter, Bilder, Videos, alles, was Sie auf unserer Portfolio-Website aufnehmen möchten. Schließlich möchten wir alle notwendigen Software und Anwendungen herunterladen, um unsere HTML-Seiten zu erstellen. Also, sobald wir das alles fertig haben, können wir einfach weitermachen und anfangen HTML zu schreiben. Sobald du mit all dem fertig bist, lass uns Lektion zwei beginnen. 5. Was ist HTML?: Was ist HTML? Nun, HTML steht für Hyper-Text-Markup-Sprache. HTML ist die Hauptauszeichnungssprache für die Erstellung von Webseiten, die in unseren Webbrowsern angezeigt werden. die gleiche Weise, wie einige von uns Englisch oder Spanisch lesen, ist es die gleiche Weise, wie Browser die Sprache von HTML lesen und entschlüsseln können. HTML entstand mit Tim Berners-Lee drüben am CERN als eine Möglichkeit für Forschung, Papiere und Informationen miteinander zu teilen. Wir können das jetzt machen und all die Katzenvideos, von denen wir jemals träumen könnten. HTML wird oft mit Dingen wie JavaScript und CSS oder Cascading Stylesheets gepaart , um eine vollständige Web-Erfahrung, Web-App, Webseite im Internet zu machen . Daher ist HTML die Grundlage für unsere Seiten und das, was wir verwenden, um alle unsere Websites zu erstellen. Die Art dessen, was wir Regeln von HTML nennen werden, wird durch die HTML-Spezifikation definiert. Die HTML-Spezifikation wird vom W3C erstellt. W3C ist eine Gruppe von intelligenten Leuten, die den Browsern mitteilen, wie sie HTML lesen sollen. Also, HTNL 4-Spezifikation ist etwas, was Sie vielleicht gehört haben und wurde eine Empfehlung im Jahr 1999, vor einiger Zeit, aber ist stark und wahr geblieben. Grundsätzlich heißt es, jedes Element, wie der Browser es lesen sollte. Vielleicht haben Sie etwas namens HTML5 gehört. HTML 5 ist eine Art des neuen Entwurfs von HTML 4. Es fügt einige neue Elemente und neue Bedeutungen für diese Elemente hinzu. HTML 5 ist voll von wirklich coolen Dingen, die auf dem starken Fundament aufbauen, das HTML 4 uns gegeben hat. Eine Sache, die Sie beachten sollten, ist, dass HTML 5 derzeit nicht abgeschlossen ist. Also, wenn Sie einen Blick auf die HTML 5-Site hier werfen, werden Sie sehen, dass dies eine Arbeit in Arbeit ist. Schauen Sie sich stattdessen den Entwurf des Redakteurs an. Also, wenn wir voran gehen und schauen uns den HTML-Entwurf dafür an. Also, das ist die Seite für den HTML 5-Entwurf und Sie werden feststellen , dass es hier in rot ist und Ihnen sagt: „Pass auf, das ist nur ein Entwurf“, was bedeutet, es nicht endgültig ist und dass sich die Dinge ändern könnten. Also, was das bedeutet, ist, dass etwas, das ein Element jetzt bedeuten kann, in einem Jahr, jemand entscheiden kann, dass es etwas anderes sein sollte bis es ein endgültiges Dokument wird. Die gute Nachricht ist, dass das Lernen der Dinge, die wir als Teil von HTML 4 lernen werden, nie eine Verschwendung sein wird. Alles, was wir in HTML 4 behandeln werden, ist auch in HTML 5 enthalten, was bedeutet, dass Sie alle Elemente lernen müssen, die wir besprechen werden , und dann können Sie sie immer noch verwenden, wenn Sie sich entscheiden, HTML 5 zu verwenden oder wenn es ein abgeschlossenes Dokument. HTML ist Teil dessen, was wir allgemein als Front-End-Entwicklung bezeichnen. Wenn Sie die Front-End-Entwicklung nachschlagen, finden Sie ein paar verschiedene Antworten dafür, was genau das bedeutet. Viele Male sehen Sie Frontends gepaart mit Dingen wie HTML, über die wir heute sprechen werden, CSS und JavaScript, und Sie können das in einigen dieser handy-dandy Bilder sehen , die Leute dort draußen machen. Sie können auch sehen, dass wir manchmal als Markup, Stil und Funktionalität oder Inhalt, Präsentation und Verhalten bezeichnen . Also, dies sind Dinge, über die normalerweise gesprochen werden , wenn es darum geht, das Front-End einer Website zu erstellen, und das Front-End, wie erwähnt, basiert auf dem HTML-Markup, das wir erstellen werden. Also, wie sieht HTML aus? Nun, eines der Dinge, die wirklich cool an HTML ist, ist, dass wir in der Lage sind , die Quelle jeder Website da draußen zu sehen und zu sehen, wie ihr HTML aussieht. Also, was das bedeutet ist, wir nennen es die HTML-Quelle oder Quellcode der Seite und das ist, was den Inhalt oder HTML einer Website ausmacht und wir können dies für fast alles sehen. Also, hier bei HuffPost Celebrity, wenn wir eine Quelle dieser Seite sehen wollten, könnten wir, indem wir zu „View“, „Developer“, „View Source“ gehen. Wenn ich darauf klicke, werden Sie sehen, dass dieser Code erscheint und gerade jetzt könnte er ein wenig verwirrend aussehen, aber Sie werden sehen, dass dies HTML-Code ist. Wir können dies für andere Websites tun, wie, stuffonmycat.com. Wir können sagen: „Ich frage mich, was der Quellcode dafür ist? Also, wieder können wir entweder zu „View“, „Developer“, „View Source“ in Chrome gehen , was auch ein Befehls-Option-U für eine Verknüpfung ist. Sie können sehen, dass dies definitiv ein wenig schwer zu lesen ist. Der Code ist irgendwie zusammen minimiert, so dass wir die Leerzeichen nicht wirklich sehen können, aber das ist HTML-Code. Oder wenn wir auf Reddit klicken, könnten wir das Gleiche für Reddit sehen. Also, wieder, wenn ich einen Mac in Chrome verwende, kann ich Befehls-Option-U tun und die Quelle anzeigen, und wieder, hier ist die Quelle dafür. Ich kann voran gehen und öffnen jede dieser Seiten wie ein Baby Liger spielt mit seiner Pflegemom. Ja, bitte. Also, hier kann ich die Bilder durchsuchen oder ich kann sagen: „Wow, ich frage mich, wo sie diese Bilder haben. Lassen Sie mich voran gehen und schauen Sie sich die Quelle an.“ Also,“ Ansicht“, „Entwickler“, „Quelle anzeigen“. Und hier können wir sehen, dass dies anfängt, der HTML für die Seite zu sein. Wir haben auch ein Tool namens Web Inspector, und wie wir das verwenden, ist entweder durch Klicken mit der rechten Maustaste auf Ihr Steuerelement, klicken Sie auf „Element“, und Sie werden sehen, dass dieses Kontextmenü erscheint, und Sie werden sehen, genau hier, es heißt, „Inspect Element“. Also, ich gehe voran und wähle das aus und dann wirst du sehen, dass dieser Rahmen auftaucht. Was dieser Rahmen tut, ist es zeigt uns alle HTML auf der Seite genau wie wenn wir Quelle angesehen, aber wir können durch gehen und erweitern und reduzieren diese Abschnitte und werfen Sie einen Blick auf, was HTML geschrieben wird um diese Element auf die Seite, die wir betrachten. Wenn Sie Firefox verwenden, gibt es ein ähnliches Tool. Also, hier bin ich in Firefox, und das gleiche, und ich kann steuern oder mit der rechten Maustaste klicken, und wieder, Sie werden sehen Inspekt-Element. Dann sehen Sie einen sehr ähnlichen, ein wenig anderen Browser Chrome hier, ist dunkelgrau, aber außerdem können Sie sehen, dass dies der HTML ist, der geschrieben wird, um dies zu schreiben und es wird mit diesem hervorgehoben kleine gepunktete Linie. Wenn Sie etwas wie Safari oder Internet Explorer verwenden, diese haben auch Entwicklertools für Sie zu verwenden, und wenn nicht, wieder, hier ist Firefox, und dann hier, es ist in Chrome. Im nächsten Video werden wir einen tieferen Blick darauf werfen, was genau dieser HTML-Code bedeutet, und sehen, wie der Browser es tatsächlich liest. 6. HTML-Tags und gängige Elemente: In der letzten Lektion haben wir einen Blick darauf, wie wir Quelle sehen können. Lassen Sie uns das hier wieder tun, also ist das Jennlukas.com und das ist meine Seite und Sie werden sehen, dass es ein großes Bild, einige Texte und mehr Text, ein Kontaktformular und ein paar Spalten voller Links, und Sie werden auch die Copyright-Informationen im Fußzeilenbereich angezeigt. Lassen Sie uns die Quelle dafür sehen, einige davon könnte jetzt wie Kauderwelsch aussehen, und einige davon mag tatsächlich ziemlich lesbar erscheinen. Sie könnten Dinge wie diesen hohen, feinabgestimmten, standardliebenden Front-End-Entwickler sehen und sagen: „Warte, das sieht vertraut aus, ich habe gesehen, dass hier Hi, feinabgestimmte, standardliebende Front-End-Entwickler.“ So können Sie sehen, dass sie beginnen zu übereinstimmen, Sie könnten feststellen, dass dieser Text zwischen diese Art von Klammern mit mehr Wörtern in ihnen eingelegt wird . Dies sind, was wir Tags nennen, Tags beschreiben unseren Dokumentinhalt. Lassen Sie uns ein wenig über HTML-Tags sprechen, HTML-Tags kommen normalerweise paarweise und haben ein öffnendes und schließendes Tag. Auch manchmal als Start- und End-Tag bezeichnet. Der Start ist eine offene Winkelklammer mit dem Tag-Namen gefolgt von der schließenden Winkelklammer. Das schließende Tag ist eine offene abgewinkelte Klammer und dann haben wir die Hinzufügung eines Schrägstrichs zusammen mit dem gleichen Tag-Namen wie die Öffnung, gefolgt von diesem schließenden Winkel Klammer. So können Sie hier sehen, Öffnen, Tag-Namen, einige Inhalte dazwischen und dann einen schließenden Tag-Namen, und natürlich ersetzen wir diesen Wort-Tag-Namen durch tatsächliche HTML-Tags. Wir werden Tag-Namen ersetzen, um echte HTML-Elemente zu erhalten. HTML-Elemente beziehen sich auf das öffnende und schließende Tag und auch auf den Text, der zwischen den Tags enthalten ist. In diesem Beispiel zeigen wir ein p-Tag, p ist für Absatz. Die p-Tags werden also alle Absätze von Text enthalten, die wir auf unserer Website haben. Als Nächstes sehen wir die H1, und H1 steht für Überschriftenstufe eins, und die H1 ist die wichtigste Überschrift auf unserer Seite. Wir werfen einen tieferen Blick auf die Überschriften ein wenig später. Zuletzt werden Sie ein paar Dinge da unten sehen und wir haben eine UL und innen sind einige LI-Elemente. Wir nennen diese Verschachtelung, die LIs sind innerhalb der UL verschachtelt, und UL steht für ungeordnete Liste, und ungeordnete Liste enthält eine Reihe von anderen Elementen namens LI, die für Listenelement steht. Dies sind Listenelemente, die in derselben ungeordneten Liste enthalten Wenn Sie also zwei Listenelemente in einer Liste hatten, werden Sie zwei LI-Elemente sehen, wie wir hier sehen. Wenn Sie fünf oder 10 oder 20 hätten, würden Sie einfach diese Menge an LIs mit dem Inhalt für jedes dieser Listenelemente auflisten. Wir werden auch einen Blick auf Liste und andere Arten von Listen neben einer ungeordneten Liste werfen ein wenig später. Wir haben auch leere oder manchmal Standalone-Elemente genannt, wie das BR-Tag, das für Break steht, das break-Tag wird für harte Zeilenumbrüche innerhalb unseres Textes verwendet. Wir haben auch ein Bild-Tag, das ein leeres Element ist, und Sie werden sehen, dass im zweiten Beispiel, wo es heißt img, das für ein Bild steht. Diese werden leere Elemente genannt, weil es keine Sache wie Text oder andere Inhalte in ihnengibt Sache wie Text oder andere Inhalte in ihnen Gegensatz zu einem öffnenden und einem schließenden Tag haben wir nur ein öffnendes Tag und das ist alles, was wir brauchen. Wir werden einen größeren Blick auf das Bild-Tag und den Text, der mit ihm im nächsten Abschnitt geht, Spoiler, sie werden Attribute genannt. 7. HTML-Eigenschaften: In der letzten Lektion sahen wir das Bild-Tag und sahen neben unserem Tag-Namen eine Art zusätzlichen Text. Das sind, was wir HTML-Attribute genannt haben. Bei Verwendung werden Attribute immer im öffnenden Tag angegeben. Das Attribut enthält zusätzliche Informationen über das Tag, das wir in unserem Dokument verwenden. Das Format dafür sieht folgendermaßen aus: Tagname, Leerzeichen, Name des Attributs, das wir im Gleichheitszeichen definieren, und dann der Wert für das Attribut in Anführungszeichen. Dann haben Sie Ihren regulären Inhalt zwischen diesen beiden und Ihrem schließenden Tagnamen. In diesem Bild Beispiel sehen Sie, dass wir tatsächlich zwei Attribute für dieses Element haben. Wir haben SRC und ALT. SRC steht für Quelle, so dass Sie Quelle gleich sehen und dann, was wie eine URL für vielleicht eine Webseite aussieht , die Sie tatsächlich am Ende Ihrer URL sehen es says.jpg. Was dies tut, ist auf eine Datei im Internet verweisen, die die Bildquelle ist. SRC steht für Quelle, und hier ist, wo wir definieren, wo unser Browser nach dem Bild suchen sollte , dass es in unserem Browser Chrome angezeigt werden soll. In diesem Fall sagen wir, gehen Sie zu niedlichen Überladungsstelle und schnappen Sie sich ein Bild von diesem berühmten Tier 018.jpg und zeigen Sie es in unserer Website. ALT ist für ALT, und die ALT ist alternativer Text. Alternativer Text dient hier einigen Zwecken. Für den Anfang, wenn das Bild nicht geladen wird, wird dieser Text angezeigt. Dies zeigt tatsächlich auf ein Bild von Socks Clinton die Katze. Also, was hier passiert ist, wenn aus irgendeinem Grund das Bild nicht angezeigt wird, wird der Browser Socks Clinton zeigen. Warum wird kein Bild angezeigt? Es gibt ein paar Gründe, es ist möglich, dass überall, wo Sie suchen, um die Datei verschieben könnte, vielleicht hatten Sie einen Tippfehler im Namen, auch manchmal Besucher Ihrer Website können Bildschirmlesegeräte verwenden. Menschen mit Sehbehinderungen verwenden oft Bildschirmlesegeräte, um den Text unserer Website zu lesen , da sie möglicherweise die Bilder, die Sie zeigen möchten, nicht sehen können. In diesem Fall lassen wir unsere Besucher, die Bildschirmlesegeräte verwenden , wissen , dass das Bild tatsächlich ein Bild von Socks Clinton zeigt. Der Alt-Text kann auch durchsuchbar sein, was wichtig ist, und die Alt ist ein erforderliches Attribut, das in Ihr Bild-Tag aufgenommen werden soll. Also, denken Sie daran, wir sprachen über die HTML-Spezifikation und das W3C. Nun, das W3C, das mit den Regeln von HTML kommt, sagte, dass Sie für jedes Bild-Tag auch die Quelle haben müssen, um Wort zu sagen, ein Alt, um alternativen Text bereitzustellen. Sie können den Alt-Text leer lassen, so dass er einfach sagen könnte, Alt entspricht Zitat, und das wird immer noch gültiges HTML sein, aber wenn es einen Text benötigt, um den Benutzern mitzuteilen, was es ist, ist es wichtig, das einzugeben. Nun, jetzt haben wir ein bisschen bessere Einführung in HTML-Elemente und ein wenig über Attribute abgedeckt HTML-Elemente und ein wenig über und wir haben genug Informationen, um loszulegen. Öffnen wir unseren HTML-Editor und fangen Sie an, etwas HTML zu schreiben. 8. HTML-Seitenstruktur: Also, wir sind bereit zu beginnen, unser HTML zu schreiben. Also, zunächst möchten wir weitermachen und Sublime Text 2, unseren HTML-Editor, öffnen. Also, das ist in meinen Bewerbungen und ich werde voran gehen und das öffnen. Sobald wir das geöffnet haben, werden wir sehen, dass wir einen ziemlich leeren Bildschirm haben, oder einen für Zeile 1, und wir können weitermachen und anfangen zu tippen. Das erste, was auf unserer Seite erscheint, ist der so genannte Doctype. Sie schreiben es so, offene Klammer, Ausruf, Doctype, Leerzeichen HTML, Klammer schließen. Eine einfache Syntax erfordert, dass ein Doctype deklariert wird, so dass, wenn ein Browser als Datei erscheint, er sicher ist, dass er korrekt im richtigen Standardmodus gerendert wird. Sie werden also diesen Doctype oben auf jeder Ihrer Seiten einfügen möchten . Hier sind die guten Nachrichten. In HTML5 haben wir diese neue Art von Doctype eingeführt, was wir hier sehen und es ist wirklich kurz und süß. Wenn man einen Blick darauf wirft, wie die Dinge früher waren, war es früher ein bisschen verrückter. Hier sind ein paar Beispiele dafür, wie Doctypes in der Vergangenheit ausgesehen haben. Sie werden eine hier sehen und dann nach unten gehen, hier sind einige andere Beispiele. Sie können sehen, dass es früher viel mehr Text war als das, was wir jetzt schreiben, aber jetzt können wir damit davonkommen, nur diese eine Zeile zu schreiben. Also, wenn ein Browser auf diese Datei kommt, wird er diesen Doctype sehen und er wird wissen, welche Art von HTML Sie es bereitstellen. Als Nächstes ist unser HTML-Element. Das html-Element stellt die Wurzel unseres HTML-Dokuments dar. Wie viele unserer anderen Elemente hat es auch ein schließendes Tag. Also werde ich das jetzt schreiben, damit ich es später nicht schließen kann. Wenn ich ein Tag öffne, empfiehlt es sich, es zu schließen, damit Sie nicht vergessen und offenen Text hinterlassen. Der doctype ist ein Beispiel für einen unserer eigenständigen Tags, bei dem kein schließendes Tag benötigt wird. Das HTML-Element sollte immer auch ein Attribut mit sich haben. Dieses Attribut ist das lang-Attribut. Die lang-Attribute gibt die primäre Sprache für den Inhalt unseres Elements. Zum Beispiel können wir lang="de“ tun. Das bedeutet, dass wir Englisch servieren werden, Sie können Dinge wie fr für Französisch und vieles mehr tun. Wenn Sie eine Liste anderer Ländercodes benötigen, ist es eine einfache Google-Suchmethode, um einfach nach HTML-Ländercodes zu suchen und Sie erhalten eine ganze Liste von Möglichkeiten. Nach unserem HTML-Element werden wir mit dem head-Element haben. Wieder werde ich voran gehen und das schließen, also erinnere ich mich daran, das Kopfelement zu öffnen und zu schließen. Das head-Element wird eine Sammlung von Metadaten für unser Dokument darstellen. Dinge wie Seitentitel oder Stylesheets Referenzen, das ist, was in unserem Kopf gehen wird. Die Dinge, die wir in den Kopf unseres Dokuments schreiben , werden nicht in unserem Browser Chrome zu sehen sein. Danach haben wir das Körperelement und das hat ein öffnendes Körper-Tag und ein schließendes Körper-Tag. Der Körper enthält den Hauptinhalt unseres Dokuments, also was auch immer wir in den Körper schreiben, ob es sich um diese oder tatsächlich lesbare Dinge wie dieses handelt, ein Satz oder tatsächlich lesbare Dinge wie dieses handelt, ein Satzist, das wird in unserem Webbrowser erscheinen. Alles, was sich im Körper befindet, wird auf die Seite gedruckt. Sobald Sie Dokumente wie diese erstellen, ist die gute Nachricht, dass Sie es als Shell auf Ihrem lokalen Computer speichern können und dies im Grunde als Kopie und Einfügen verwenden und als wiederverwendbare Shell für alle Ihre HTML-Dokumente haben . An diesem Punkt wird unsere Datei immer noch nicht gespeichert und ich bin ein großer, fester Gläubiger, oft zu sparen. Es gibt verschiedene Möglichkeiten, wie Sie Ihr Dokument speichern können. Einer ist, zu Datei, Speichern zu gehen. Der andere Weg, wie Sie hier auf der rechten Seite sehen können, dass zeigt, sind Abkürzung für Speichern. Also, Command S auf einem Mac oder Control S auf einem PC wird Ihr Dokument speichern. Du wirst das oft tun. Es gibt nichts, was mehr stinkt, als wenn Sie viel Code schreiben und dann plötzlich etwas passiert, wie ein Computer abstürzt oder eine Katze über Ihre Tastatur geht und das Ganze löscht. Daher ist es empfehlenswert, Ihre Dateien häufig zu speichern. Also, ich werde voran gehen und sparen. Jetzt werde ich aufgefordert, es als einen bestimmten Dateinamen zu speichern , da wir es noch nicht gespeichert haben. Ich gehe zu meinem jon-arbuckle-Site-Ordner, der auf meinem Desktop ist und hier drin, ich werde dies wechseln, stellen Sie sicher, dass Sie voran gehen und dies ändern. Es wird standardmäßig auf die erste Zeile Ihres Dokuments, die Doctype html ist. Wir wollen es nicht so speichern. Also, Sie möchten dies ändern, so dass es class.html sagt. The.html ist wirklich wichtig, weil das ist, was dies als HTML-Datei definieren wird. Genau wie wir a.mp3 für Musikdatei or.psd für Photoshop-Datei or.txt für Text haben , sagt .html, was wir hier schreiben, ist eine HTML-Datei. Also, dann werde ich auf Speichern klicken und wir sind alle rettet. Jetzt können Sie sehen, wie etwas anderes irgendwie Verrücktes passiert ist. Plötzlich haben wir dieses fluoreszierende Rosa und es ist immer eine tolle Einstellung, die ich habe , die nur Dinge macht AB Farben, wenn ich Dinge zu retten. Was das ist, ist ein Thema in Sublime Text und das ist, was wir Syntax Highlighting nennen. So, wie wir zuvor gesprochen haben, gibt es einen kleinen Unterschied zwischen einem HTML-Editor und einem Texteditor. In diesem HTML-Editor erkennt es diese als a.html Datei, weil wir sie so gespeichert haben. Es wird also beginnen, Elemente und Tag-Namen hervorzuheben, die es erkennt. Also, es weiß, dass, wenn HTML Kopf und Körper gemeinsame Dinge sind und es weiß, dass es ein Element ist, so wird es rosa. Alle Attribute befinden sich nun in diesem hellen Grün und alle Attributwerte sind in dieser gelben Farbe. Wenn diese hellen fluoreszierenden Farben nicht Ihre Tasse Tee sind, können Sie das auch in Sublime Text ändern. Sie haben einen Abschnitt „Einstellungen“ unter „Farbschema“ und Sie können voran gehen und einige verschiedene, die sie haben. Vielleicht ist das mehr von deinem Stil. Ich bin eigentlich ein großer Fan von diesem leuchtend rosa, es macht mich glücklich, also werde ich es dabei lassen. Aber wenn Sie etwas anderes möchten, zögern Sie nicht, das zu überprüfen. Also, jetzt sind wir alle mit unserer gespeicherten Datei eingestellt und dies ist die Shell für den Rest des HTML, den wir schreiben werden. In und im nächsten Video werden wir uns unser Kopfelement genauer ansehen. 9. Kopfelement: Eines der ersten Dinge, die ich dokumentieren werde, ist unser Kopfelement und das Kopf-Element stellt eine Sammlung von Metadaten für das Dokument dar, das wir schreiben. Die Sache, die wir in den Kopf setzen, werden nicht im Browser Chrome gesehen werden , aber sie bieten zusätzliche Informationen zu unserem Dokument. Eines der Dinge, die wir in das Kopfelement setzen können, ist unser Titel. Also fangen wir an, Titel zu schreiben und der Titel dieser Seite wird John Arbuckle's Portfolio sein. Dann, wie die meisten unserer Elemente, müssen wir es schließen. Also, um zu sagen, dass dieser Titel vorbei ist, gehen wir voran und schließen das Tag. Also, alles, was zwischen dem Titel-Tag liegt, wird dieser Inhalt unser Titel sein. Ihr habt vielleicht bemerkt, dass etwas passiert, als ich das geschrieben habe, richtig? Wenn ich das lösche und mit meinem öffnenden Tag beginne, bekomme ich plötzlich dieses Popup. Dies begann zu geschehen, nachdem ich als a.html gespeichert habe. Eines der anderen Dinge, die HTML-Editoren haben, ist die Fähigkeit, automatische Vervollständigung anzubieten. Das Programm beginnt nach Möglichkeiten zu suchen, wie wir diesen Text füllen können und es sucht nach einem Element. Also, wenn ich anfangen, t zu tippen, wird es alle Elemente auflisten, die es möglicherweise hier am Anfang mit einem t schreiben könnte . In diesem Fall, sobald ich begonnen habe, Titel zu schreiben, können Sie sehen, Titel erscheint. Wenn ich jetzt auf „Enter“ klicke, füllt es automatisch das für mich aus und schließt auch das Ende des Tags. automatische Vervollständigung ist eine super hilfreiche Funktion. Es erspart Ihnen das Tippen und es erinnert sich auch daran, Tags für Sie zu schließen, wenn Sie es vielleicht vergessen. Manchmal kann es ein wenig schwierig sein, dies zu tun, während Sie zuerst etwas lernen. Wenn Sie also keine automatische Vervollständigung wünschen, können Sie das deaktivieren. Ich werde es für jetzt ausschalten und ich werde das tun, indem ich zu meinen Präferenzen gehe. Sublime Text hat eine Sache namens Benutzereinstellungen und hier drin ist Ihre wahrscheinlich gerade leer. Dies sind einige Einstellungen, die ich mir hinzugefügt habe. Was Sie tun möchten, ist diesen Text hinzuzufügen. Also, was Sie tun werden, ist „auto_complete“ zu tippen: und dann statt wahr, werden wir falsch schreiben und dann werde ich das speichern. Sie können auch Dinge wie Ihr Farbschema ist hier, Ihre Schriftgröße ist hier, Wort Rap, es gibt eine Reihe von Präferenzen, die Sie einstellen können , um Ihre Bedürfnisse für Sublime Text zu erfüllen. Wenn Sie daran interessiert sind, zu sehen, was Sie sonst noch tun können, wollen Sie einfach gehen, googeln Sie das nicht, nur Google „sublime text 2 voreinstellungen“. Klicken Sie auf die Dokumentation und sie haben eine ganze Reihe von Informationen über ihre Einstellungen. Wenn es etwas gibt, was Sie suchen, wie sagen, dass Sie sich nicht erinnern konnten, was die Präferenz für die automatische Vervollständigung war, können Sie einfach „sublime text 2 auto complete“ googeln, hier gehen wir. Suchen Sie danach, klicken Sie darauf und jetzt sehen Sie genau hier, es wird Ihnen sagen, wie Sie die automatische Vervollständigung deaktivieren. Das Schöne daran ist, wenn Sie wissen, wonach Sie suchen müssen, macht es Ihr Googeln viel einfacher. Also, jedes Mal, wenn Sie sich fragen, ob erhabener Text es tun kann, machen Sie einfach eine schnelle Suche nach „sublime text 2" und dann, was auch immer es ist, wonach Sie suchen. Vergessen Sie nicht, Ihre Einstellungen zu speichern, wenn Sie mit ihnen fertig sind. Datei, Speichern oder Strg+S oder Befehl S für die Verknüpfung. Nun, wenn ich hierher zurückkomme und mit der Eingabe beginne, ist die automatische Vervollständigung jetzt deaktiviert und so liegt es an mir, mich zu erinnern, was ich tun soll. Also, lassen Sie uns einen Blick auf das in Aktion und wir gehen zurück auf meine Website bei Jennlukas.com, und wenn ich voran gehe und die Quelle für diese, so Entwickler, View Source, können Sie sehen, dass das Ding sollte ein wenig vertrauter aussehen. Sie werden sehen, dass wir diesen Doctype html haben und dann haben wir das Kopf-Element und das schließende Kopf-Element hier unten. Also, das sind all die Dinge, die ich in das Hauptelement meiner Website gesetzt habe. Du wirst sehen, dass wir den Titel dort haben. Also, Titel Jenn Lukas Front-End-Entwicklung, und wie wir gesagt, wenn wir hierher kommen, das ist nirgendwo bis zu dieser Seite geschrieben aber wo es geschrieben ist, ist oben in diesem Tab-Bereich. Sie werden Jenn Lukas Front-End-Entwicklung sehen, dieser Wert wird von unserem Titel-Tag empfangen und dann in der Registerkarte angezeigt. Der andere Ort, an dem unser Titel-Tag kommt, ist in den Suchergebnissen. Also, wenn ich nach Jonn Lukas suchen werde, sehen Sie Jenn Lukas Front-End-Entwicklung. Dieser Wert wird aus dem Titel-Tag des HTML für diese Seite abgerufen. Ihre Suchergebnisse im Titel Ihres Tabs werden also darauf angewiesen, dass dieses Titel-Tag ausgefüllt wird. Wenn wir zur Quelle zurückkehren, werden Sie sehen, dass hier etwas anderes ist und das ist dieser Meta-Zeichensatz gleich UTF-8. Meta-Tag wird zusammen mit dem charset -Attribut verwendet um die Zeichencodierung zu definieren, die vom Dokument verwendet wird. Also, wir werden das auch zu unseren Seiten hinzufügen wollen. Zeichencodierung definiert, welche Art von Zeichen wir in unseren Wörtern in unserem HTML-Dokument verwenden. UTF-8 ist die am häufigsten verwendete Methode, um Unicode-Text in Webseiten darzustellen. Wenn Sie mehr darüber erfahren möchten, empfehle ich Ihnen, Zeichenkodierungen für Anfänger bei w3.org auszuprobieren. Es geht wirklich in die Tiefe darüber, welche Art von Dingen Zeichencodierung Handles und wie es Ihre Seiten beeinflussen kann. Wenn Sie nicht glauben, dass Sie so viel Detail benötigen, denken Sie daran, es auf allen Ihren Seiten hinzuzufügen. Das Meta-Tag mit dem charset -Attribut und dem title-Tag sind die beiden erforderlichen Dinge, die Sie in Ihr head-Element einfügen. Aber es gibt noch andere Dinge, die du auch da reinlegen kannst. Wenn wir auf die Quelle für jennlukas.com zurückgehen, werden Sie sehen, dass es hier definitiv einige andere Daten gibt. Also, eine Sache, die wir haben, ist ein anderes Meta-Tag, in diesem Fall ist das Attribut hier name und der Wert ist Beschreibung. In der Beschreibung haben wir einen anderen Attributinhalt. Inhalt sagt Front-End-Entwickler, Sprecher, Schriftsteller und Beratung. Sie werden feststellen, dass dies in meinen Google-Ergebnissen angezeigt wird. Front-End-Entwickler, Sprecher, Schriftsteller und Beratung. Also, das ist ein Ort, an dem Ihre Meta-Beschreibung angezeigt werden kann. Das Meta-Tag mit dem Attributnamen und dem Wert von Schlüsselwörtern wird mit dem Inhalt gekoppelt. Dieser Inhalt ist eine Liste von durch Komma getrennten Werten für Keywords, von denen Sie hoffen, dass Sie Ihre Suchmaschinen-Indizierung unterstützen. Jeder von Ihnen, die jede SEO getan haben, könnte wissen, dass Google eine sehr geheime Formel hat, so dass niemand genau sicher ist , wie viel dies hilft Ihre Suchmaschine Ergebnis, aber es kann sicherlich nicht schaden. Also, da sind es die Meta-Name-Schlüsselwörter. Meta-Namen-Ansichtsfenster beginnt in Dinge zu gelangen, die wir für das responsive Design und die Größe Ihres Bildschirms benötigen , wenn sie in andere Geräte geladen werden. Die nächste, die wir hier sehen, ist das Link-Tag und Sie werden Verknüpfungssymbol mit diesem image.ico und favicon.ico sehen , ist ein Link zu unserem Favicon. Das Favicon ist dieser kleine Avatar, der in den Registerkarten Ihrer Seiten erscheint. Also, Google hat eine hier, das ist das Favicon für Google. Hier ist der für Jenn Lukas. Wenn ich auf eine Website wie Hund Fisch Kopf ging, werden Sie sehen, dass sie ein Favicon hier auch wie vielleicht ist wie ein kleiner Bierbecher und sogar auf einer Website wie jello.com, Sie werden eine dort zu sehen. Wenn Sie jemals Ihr Favicon nicht angeben, erhalten Sie nur das kleine Standard-Dokumentsymbol , das wir ein wenig später sehen werden. Sie können auch Dinge wie Apple Touch-Symbole angeben, und das ist, wenn Sie sich auf einem Apple-Mobilgerät befinden und eine Webseite auf Ihrem Telefon speichern, das ist, was es für das Symbol dort angezeigt wird. So, Sie können sehen, dass, obwohl es nicht genau in unserem normalen Browser Chrome angezeigt wird, die Metadaten für unser Dokument können eine Menge nützlicher Dinge bieten. Im nächsten Video werfen wir einen Blick auf die Dinge, die in der Mitte unserer Seite erscheinen , und das ist in unserem Körperelement. 10. Körperelement: Im letzten Video haben wir über unser Kopfelement gesprochen und was nicht auf unserer Seite erscheint. Nun, lassen Sie uns darüber reden, was tut, das ist alles, was wir innerhalb der Körperelemente schreiben. Alles, was wir zwischen unserem öffnenden und schließenden Körper-Tag eingeben , wird auf unseren Seiten erscheinen. Wenn wir einen Blick zurück auf johnlucas.com werfen, sehen Sie alles, was im Body-Tag ist, wird im Browserbereich gedruckt. Werfen wir einen Blick auf eine andere Seite. Dies ist thesuperest.com. Wir werden dieses Inspect-Element wieder verwenden. Wenn wir hier unten schauen, können wir jetzt sehen, wir sehen auch den Körper und den Kopf. Also, wenn ich das für eine Minute zusammenbreche und das Kopfelement anschaue, werden wir einige Dinge sehen, die wir im letzten Video gelernt haben, wie den Titel und die Meta-Tags. Dann sehen wir, wenn wir den Mauszeiger über Körper bewegen, wurde der ganze Abschnitt hier oben blau hervorgehoben, denn das sind alle Informationen in unserem Körperelement. Wenn ich das aufgeklappt habe, um sehen zu können, was drin ist, wird alles im Körper auf die Seite gedruckt. Also, noch einmal, denken Sie daran, dass wir die Elemente überprüfen können, und sehen, dass diese Dinge alle im Körper leben, und dann auf die Seite gedruckt werden. Alles, was sich im Kopfelement befindet, wird nicht auf diese Seite gedruckt. Also, alles, was wir in unserer Content-Gliederung geschrieben haben, werden wir in unserem Body-Element schreiben wollen , weil das ist, was auf die Seite gedruckt wird. Also, gehen wir weiter und öffnen das wieder. Also, hier ist der Inhalt wieder skizziert. Wir wissen, dass wir wollen, dass Andres Arbuckle, ein freiberuflicher Illustrator und Autor, auf unserer Seite erscheinen. Also, ich werde sie von hier kopieren. Sie können entweder auf Bearbeiten, Kopieren klicken oder die Tastenkombination für die Tastaturen den Befehl C auf einem Mac oder C auf einem PC steuern. Also, ich werde kopieren, und ich werde hierher zurückkommen, und Sie tun Bearbeiten, Einfügen. Die Verknüpfung für Einfügen ist Steuerelement V oder Befehl V, also fügen Sie ein. Sieht aus, als hätte ich das Ich vergessen, also schreiben wir das einfach wieder da rein. Wir wissen, dass alle anderen Dinge, die wir auf unserer Seite wollen, das ist, wo wir es schreiben werden. Also, ich werde das jetzt speichern, Datei, Speichern. Dann, in unserem nächsten Video, werden wir sehen, wie das aussieht, sobald wir es in unserem Browser öffnen. 11. Erstellung und Vorschau unserer ersten Seite: Wir haben einen Text auf unserer Seite, und lassen Sie uns fortfahren und speichern Sie dieses Dokument erneut. Sie können feststellen, dass eine Datei nicht sicher ist, wenn Sie auf der Registerkarte, sehen Sie diesen kleinen Kreis hier oben. Wenn ich voran gehe und Datei speichern, wird dieser Kreis auf das X ändern. Also, class.HTML wird gespeichert, aber jetzt wollen wir gehen und es in einem Browser anzeigen. Es ist empfehlenswert, unsere Dateien oft in einem Browser zu betrachten , um sicherzustellen, dass die Dinge so aussehen, wie wir es erwarten. Also, ich werde die class.HTML auf meinem Computer drücken, die sich in meinem jon-arbuckle-site-Ordner und class.HTML befindet, und doppelklicken Sie darauf, um sie zu öffnen. Also, hier ist es, in Chrome geöffnet. Unsere erste HTML-Webseite, oder zumindest der Anfang davon. Also, das ist class.HTML, und wir sehen jetzt, „Ich bin Jon Arbuckle, ein freiberuflicher Illustrator und Autor,“ in unserem Browser. Alles im Body-Tag wird hier gedruckt. Wir haben unseren Titel hier oben, und wir können die Quelle ansehen und alles sehen, was wir in Sublime Text geschrieben haben. Also, jetzt möchte ich noch ein Exemplar auf dieser Seite. Ich möchte andere Dinge sehen, die wir innerhalb des Body-Tags setzen können. Manchmal bist du vielleicht nicht sicher, dass dein Urheberrecht entfernt ist, und so benutzen manche Leute das, was man Lorem Ipsum nennt. Lorem Ipsum ist im Grunde griechischer Platzhaltertext den wir in unserem Dokument verwenden können, um einige Texte auszudrucken , ohne dass Sie solche Dinge schreiben müssen. Es ist ein wenig lesbarer. Da draußen gibt es ein paar verschiedene Lorem Ipsum. Wenn wir einen Blick auf Lorem Ipsum Generatoren, so Top-Ergebnis ist 56 einzigartige Lorem Ipsum Generator. Also, wie Sie sagen können, gibt es eine Menge von ihnen, 101. Also, es gibt eine Menge Zeug im Internet. Werfen wir einen Blick auf einige von denen, die wir haben, Cupcake Ipsum, das ist ein guter. Picksum, Lorizzle, Samuel L. Ipsum, Fillerati, Speck Ipsum, Thunfisch Ipsum, Veggie Ipsum und Käse. Also, ich werde auf Cheese Ipsum verkauft, also gehen wir vorerst mit dem. Also, hier ist Cheese Ipsum. Jeder liebt ein bisschen Käse, ist das nicht die Wahrheit oder was? Nehmen wir an, wie viele Absätze, und wir werden auf Käse generieren klicken. Dann wirst du hier sehen. Wir haben eine Kopie und einen Text, den wir kopieren und in unser Dokument einfügen können . Dies wird uns nur einen Text geben, den wir verwenden können. Also, wir werden nicht am Schreiben von Texten hängen, und dann einfach unser Copyright da draußen, um zu sehen, wie es aussieht. Also, ich werde das nochmal retten. Ich gehe zurück zum Browser-Tab, und dann kann ich die Seite aktualisieren, indem ich hier oder Befehl oder Control R. Jetzt, wie Sie sehen können, wird die gesamte Kopie, die ich gerade geschrieben habe, jetzt auf die Seite gedruckt. Irgendetwas sieht aber ein bisschen aus, oder? Alles hier ist durcheinander. Wenn ich das Browserfenster expandiere und verkleinere, können Sie sehen, dass der Text im Grunde in jedem Raum passt. Während wir es in unserem HTML-Editor betrachten, ist es formatiert, so dass es viel einfacher ist, mit Leerzeichen zu lesen. Es ist wirklich wichtig, darauf hinzuweisen, dass es in HTML keine Leerzeichen liest. Das einzige Leerzeichen, das gelesen wird, ist ein Leerzeichen, das ist der Raum, den wir brauchen, um Wörter zu trennen. Aber es spielt keine Rolle, ob Sie das tun und dort eine ganze Reihe von Leerzeichen haben. Wenn ich das speichere und aktualisiere, wird es immer noch nur einen Platz hier haben. Leerzeichen werden vom Browser ignoriert und das ist ein weiterer Grund, warum wir HTML-Formatierung verwenden, um unsere semantischen Elemente zu trennen. Also, lasst uns das mit der Kopie machen, die wir haben. Nun, zuerst, lasst uns den unerschütterten, unseren [unhörbaren] vorerst loswerden, und haben vielleicht eine Überschrift für all diesen Käse. Also, Liste der Käse, die ich liebe, das wird die Überschrift für unsere Seite sein. Wir haben ein wenig über ein Überschriftenbeispiel in unserem früheren Video gelernt, und das war das H1-Element. Das H1-Element ist die wichtigste Überschrift auf der Seite, und Sie schreiben es, indem Sie eine offene Klammer, H1, schließen Klammer. Dann gehen Sie zum Ende des Satzes, und wir werden das schließende Tag einfügen wollen. Also, und jetzt haben wir eine Überschrift für unsere Seite. Weiter geht es um eine Reihe von Absatztexten. Ich weiß, dass wir uns vorhin etwas angesehen haben, das Absätze markieren kann. Wir haben es kurz angeschaut, damit Sie sich vielleicht nicht mehr erinnern können, was es war. Was passiert aber, wenn Sie sich daran erinnern können, was es war? Was, wenn wir denken, dass es ein Absatz ist, aber wir sind uns nicht wirklich sicher, oder hieß es Para? Ich bin mir nicht sicher. Eines der Dinge, die ich gerne mache, ist oft auf eine Referenzseite zurückverweisen. Eine der Websites, die ich wirklich gerne benutze, ist eine Website namens htmldog.com. Nein, es ist nicht voll von einem Haufen niedlicher entzückender Hunde, nur einer im Logo, aber es ist eine wirklich gute Referenz-Website. Ich empfehle dringend, dies zu Lesezeichen zu markieren und darauf zurückzukommen, schauen Sie sich einfach die gängigen Tags an, die Sie verwenden werden. Sie sehen auf der linken Seite diesen Referenzen Abschnitt und dann diesen Link hier für HTML-Tags. Also, gehen wir weiter und schauen uns das an. Was wir tun können, ist dann die Seite zu scannen, um zu sehen, welche HTML-Elemente für uns verfügbar sind und wie wir den Inhalt entsprechen, den wir haben. Also, es gibt eine Struktur, und wir haben einige davon vorher gesehen, wie HTML, Kopf, Körper. Diese sollten alle vertraut sein oder DOCTYPE und Meta. Wir haben das gesehen, das steht unter Meta-Informationen. Aber was wir jetzt wollen, sind Elemente, die für Text verwendet werden. Sie sehen, dass das erste hier aufgelistete Element ein P-Tag ist. Das sollte wahrscheinlich den Speicher von früher auslösen, wo P-Tag ist, wie wir auf einen Absatz verweisen. Falls Sie vergessen, klicken Sie einfach darauf, und dann sehen Sie HTML-Tag P, und es lässt uns wissen, dass es für einen Absatz ist. Später geben sie uns hier unten ein Beispiel. Das Tolle beim Schreiben von HTML ist, dass Sie normalerweise Geschichte über einen Computer schreiben. Ich nehme an, du könntest es auf einem Stück Papier einer Schreibmaschine machen, aber wenn du willst, wirst du es innerhalb des Computers wollen. Was ordentlich daran ist, ist im Grunde, solange Sie eine Internetverbindung haben, dann ist Google an Ihren Fingerspitzen. Sie sind also in der Lage, die ganze Zeit zu überprüfen, um sicherzustellen, dass Sie sich an die richtige Syntax zum Schreiben von Dingen erinnern. Irgendwann bin ich sicher, dass Sie all das auswendig lernen. Aber es ist kein Wettbewerb, und es ist nichts, was Sie gleich am Anfang merken müssen, weil Sie sofort die Werkzeuge haben , um alles nachschlagen zu können, was Sie vielleicht vergessen. Mach dir keine Sorgen darüber, zu viel zu googeln, niemand wird es wissen, und selbst wenn wir es taten, würde niemand beurteilen. Also, jederzeit, wenn Sie vielleicht verloren für das, was das Tag ist, kommen Sie einfach zu htmldoc.com oder Sie können eine Google-Suche wie html Absatz-Tag machen, und sofort können Sie beginnen, es sogar innerhalb der Suchergebnisse aus ihrem Titel zu sehen -Tags. Also, jetzt, da wir wissen, dass wir ein Absatz-Tag nur mit dem Buchstaben P schreiben, lassen Sie uns voran gehen und dies ändern. Lassen Sie uns ein Absatz-Tag um all diese Absätze von Text hinzufügen: <p> Tag, </p> Tag, <p> Tag, </p> Tag. Lasst uns das vorerst machen. Ich kann dies für dieses Beispiel löschen, und so haben wir jetzt das. Wir werden drei Absätze und eine Überschrift speichern. Lassen Sie uns aktualisieren und sehen, wie das jetzt aussieht. Hey, sieh dir das an. Das ist viel einfacher zu lesen, oder? Also, jetzt werden Sie sehen, sobald wir diese Elemente um unseren Text hinzugefügt haben, plötzlich begann Formatierung zu passieren. Diese Textstücke wurden voneinander getrennt. Sie werden auch feststellen, dass die Überschriftenebene 1 fett und größer wurde als der Rest des Textes auf der Seite. Standardmäßig wird ein Browser in H1 stoßen und sagen: „Das ist wichtig. Machen wir es fett und größer als andere Texte.“ Für Absatztext wird eine relativ normale lesbare Größe sein. Nun, wenn wir den Browser erweitern und reduzieren, passt er immer noch zeilenweise von links nach rechts, aber wir haben diese Zeilenumbrüche zwischen jedem einzelnen unserer Absatz-Tags. Diese Unterbrechungen passieren nach dem, was wir Blockelemente nennen. Dinge wie H1 und P, das nennen wir ein Blockelement. Was das im Wesentlichen bedeutet, ist, dass sie ihre eigene Zeile aufnehmen, und dann wird es ein Leerzeichen hinter einem anderen Element geben. Ein wenig später werden wir einen Blick auf Elemente auf Blockebene werfen. Aber im Moment werden wir diese Lektion beenden, indem wir diese neue HTML-Datei erstellen. Hinzufügen von unnötiger Struktur zur Seite. Gehen Sie weiter und fügen Sie einige Metadaten hinzu, wenn Sie versuchen möchten , einige dieser anderen Dinge wie Schlüsselwörter oder Beschreibungen hinzuzufügen. Gehen Sie weiter, und tun Sie das auch, dann fügen Sie einige HTML-Elemente zum Körper hinzu. Versuchen Sie, eine Überschrift hinzuzufügen, vielleicht noch einige Absätze, und wenn Sie damit fertig sind, speichern Sie sie und zeigen Sie sie in einem Browser an. Kommen Sie zu Lektion drei zurück, und wir werden uns mit Überschriften und anderen Elementen für unsere Seiten genauer auseinandersetzen. 12. Unseren Inhalt in HTML-Markup umwandeln: Wir haben ein wenig darüber gelernt, was wir brauchen, um die Dokumentstruktur für unsere HTML-Seiten zu schreiben , und wir haben ein wenig über das Überschrift-Tag und das Absatz-Tag gelernt. Als nächstes werden wir lernen, Inhaltstypen auf unsere HTML-Elemente abzustimmen. Also haben wir einen Inhaltsumriss erstellt, und was wir tun wollen, ist, sich das anzusehen und irgendwie zu sehen, welche HTML-Elemente wir verwenden können, um den Inhalt, den wir haben, auf unsere Seite zu bekommen. Schauen wir uns zum Beispiel unsere Homepage an. Wir wissen, dass wir es die Homepage nennen wollen, und Homepage wird wahrscheinlich in unserem Titel-Tag erscheinen. Manchmal möchte ich nur ein Stück Papier ausdrucken und direkt daneben, welches Element in HTML sein wird. Manchmal, wenn Sie dies tun, erfordert es ein wenig Druck, es mit einem HTML-Editor anzustarren, aber tun Sie, was für Sie funktioniert. Als Nächstes auf unserer Seite haben wir den Heldeninhalt. Wir haben die Überschrift, die besagt: „Ich bin Jon Arbuckle, ein freiberuflicher Illustrator und Autor“, und wir wissen, dass das die Hauptüberschrift unserer Seite sein wird. Auf unserer Homepage wird dies jedem sagen, was Jon macht und warum diese Seite existiert. Also, ich denke, dass die wichtigste Überschrift auf unserer Seite. Also, wir werden das ein H1 nennen, wie das, was wir vorher gesehen haben. Wir werden auch ein großes Bild von einem Comic haben. Also, wir werden das Image-Tag dafür verwenden, was img ist. Der nächste Abschnitt ist Jons Web-Comics. Also, wir werden eine Überschrift und eine Beschreibung dafür haben, richtig? Also, vielleicht in dieser Beschreibung, werden wir wahrscheinlich eine Überschrift haben. In diesem Fall wird es die zweitwichtigste Überschrift sein , weil es nicht die wichtigste ist, also wird das ein h2 sein, und wir werden Text haben. Also, es wird einige Absatz-Tags sein. Wir werden einen Link haben, um mehr über die Comics zu erfahren. Wir haben uns noch nicht wirklich Links angesehen. Also, wenn ich nicht wirklich sicher bin, was ein Link wäre, möchte ich jetzt zurück zur HTML-Doc-Site gehen und sehen, ob ich etwas finden kann, das aussieht, wäre das Element, um einen Link zu erstellen. Also, zurückblickend hier auf diese Referenzstelle, erinnerst du dich? Wir haben die Meta-Informationen, einen Text, und dann sehe ich zum Glück hier Links, und diese machen jetzt nicht wirklich viel Sinn für mich. Aber wenn ich auf dieses A-Tag klicke, sehe ich HTML-Tags A, Anchor. Verwenden Sie in erster Linie den Hyperlinktext. Die Verknüpfung mit einer anderen Seite oder einem Teil einer Seite oder einem anderen Speicherort im Web. Nun, hey toll, das ist genau das, was ich suche. Also, nicht genau sicher, was ein A-Tag ist noch, aber lassen Sie mich es für jetzt markieren, dass dies ein A sein wird Mach dir keine Sorgen, wenn es verwirrend scheint, wir gehen in die Tiefe zu gehen, was diese in späteren Videos bedeuten. Also, für den nächsten Abschnitt sollte dies im Bild ein wenig vertraut aussehen. Wir wissen schon, was das ist. Der Name der CD, das wird wahrscheinlich auch eine Überschrift sein. Also, wir werden es vorerst auch ein H2 nennen, und eine andere Sache, von der wir gerade gelernt haben. Also, wir werden sagen, ein Jons Twitter-Account wird mit seiner Twitter-Seite verknüpft werden, das wird auch ein A für einen Link sein. Ein Kunden-Testimonial. Also, Kunden-Testimonial, ich bin mir auch ein bisschen unsicher. Gehen wir zurück zu dieser HTML-Doc-Site, und schauen Sie sich das an, und ich weiß, dass es keine Liste ist. Es ist kein Bild eines Objekts. Es ist keine Schwänze auf einem Formular, aber es ist Text. Gehen wir zurück zum Textabschnitt. P, H1, Stark, em, abbr. Das hört sich nicht richtig an. Warte, schau blockquote, das klingt nach dem, wonach wir suchen, richtig? Manchmal wird es in einfachem Englisch genau dem entsprechen, was wir nach einem HTML suchen. Blockquote - ein großes Zitat. Hey, perfekt. Also, vorerst werde ich Blockquote schreiben. werden wir ein wenig später abdecken. Das Logo wird ein Bild sein. Sagen wir, die Navigation ist ein bisschen knifflig. Wir wissen, dass es sich um Links handelt. Also, wir brauchen definitiv ein A, aber kommen wir später darauf zurück, und dann werden Copyright-Informationen ein Absatz sein. Also, das ist definitiv in der Luft, und wir werden es decken, aber wir haben unsere grundlegenden Elemente für den Inhalt, den wir skizziert haben. Also, lassen Sie uns diese Elemente und was sie wirklich bedeuten, in unseren nächsten Videos überprüfen , beginnend mit Überschriften. 13. Überschriftenelemente (H1-H6): Bisher haben wir einen Blick auf eine Art von Überschrift genommen, und das ist die H1. Wir wissen, dass die H1 die wichtigste Überschrift auf der Seite ist und es kann nur eine pro Seite geben. Wir wissen, dass die H1 die wichtigste Überschrift auf der Seite ist und es sollte wirklich nur eine pro Seite geben. Es gibt auch andere Ebenen von Überschriften, weil wir wahrscheinlich mehr als eine Überschriftenebene haben werden. Es gibt H1 bis H6, das heißt, es gibt ein H2, ein H3, ein H4, ein H5. Dies ist, wenn ich beginne, wirklich paranoid zu werden, wie laut ich tippe und ein H6. Entschuldigung. Hier sind unsere Überschriftenstufen, H1 bis H6. H1 ist am wichtigsten, H6 ist am wenigsten wichtig. Es gibt kein H7. Ich bin mir nicht sicher, wer einmal auf einem Zimmer saß und beschlossen, dass sie bis zu sechs Ebenen von Überschriften gehen sollten, aber jemand tat es. Also, H7 existiert nicht, aber H1 bis H6 tut. Lassen Sie uns ein wenig mehr über Überschriften untersuchen. Also, wenn wir nur eine Notepad-Datei öffnen, lassen Sie uns über Überschriften ein wenig mehr sprechen. Denken Sie an Überschriften wie eine Gliederung eines Schulpapiers oder eine Gliederung für einen Lebenslauf. Nehmen wir an, wir haben einen Lebenslauf. Also, wir werden Jon Arbuckles Lebenslauf machen. Was ist das Wichtigste, das auf Jon Arbuckles Lebenslauf ist? Nun, Jon Arbuckles Name, denn ohne sie, woher würdest du wissen, wessen Lebenslauf es war. Also, die wichtigste Rubrik oder unser H1 wäre Jon Arbuckle. Danach, was geht noch weiter? Nun, wie wär's mit seinem Ziel. Also, wir sind Ende am Ende, weil das die nächste Stufe nach unten ist und wir sagen, das Ziel, und das wird ein H2 sein. Lassen Sie uns diese einfach in Klammern setzen nach, ein wenig leichter zu lesen. Was geht noch in einen Lebenslauf? Auf der gleichen Ebene Ziele, haben wir wahrscheinlich Erfahrung, Bildung, Kontakt. Dies sind alle H2, weil sie das gleiche Maß an Bedeutung wie einander und die zweitwichtigste Ebene der Rubrik sind. Unter Ziel werden Sie wahrscheinlich einige Texte haben, so dass wir wahrscheinlich keine anderen Überschriften haben werden. Unter Erfahrung werden Sie wahrscheinlich alle Jobs auflisten wollen, die Jon hatte. Sagen wir mal, dass Jon bei The Daily Chronicle gearbeitet hat und dann beschreiben wir danach die Daten, die er dort arbeitete, seine Aufgaben, also ist Daily Chronicle auch eine Überschrift. In diesem Fall wird das die Überschrift Ebene drei sein. Er arbeitete auch bei der US Bizarre Weekly und wir werden das ein weiteres H3 nennen, weil es auf dem gleichen Niveau wie dieser andere Job bei The Daily Chronicle ist, und es wird auch die Überschrift zu anderen Dingen wie seine Beschreibung dessen, was er bei der US Bizarre Weekly getan hat. Ich bin sicher, es war sehr bizarr. Unter Bildung werden wir auflisten, wo er aufs College ging und wir werden sagen, dass er an die University of Indiana gegangen ist und das ist ein H3. Danach ist das auch eine Überschrift, weil wir beschreiben, was er dort studiert hat, sowie die Jahre, die er dort war. Dann für den Kontakt, vielleicht wollen wir eine Telefonüberschrift haben, also ist das ein H3 und eine Postanschrift wird auch in H3 sein. Vielleicht hat er doppelt an der University of Indiana studiert. Also brauchen wir noch ein paar Rubriken, um seine Majors zu beschreiben. Also, sagen wir, er hat in Illustration und Musik studiert. Das werden zusätzliche Überschriften darunter sein, weil sie sein Studium ein bisschen mehr beschreiben werden . Also, diese werden H4 sein. Wenn wir mehr Überschriften haben als diese, dann würden wir runter zu H5s und H6 s kommen. Also vielleicht unter Musik, will er jede Klasse beschreiben, die er nahm, das wäre wahrscheinlich seltsam setzen auf einen Lebenslauf, aber das könnte ein H5 sein. So können Sie sehen, dass dies ein bisschen ist, wie Überschriften funktionieren. Sehr ähnliche Umrisse, die wir hatten, also denken Sie einfach so über sie nach, wenn Sie Ihre Überschriften für Ihre Seite erstellen. Also, wenn wir hier zurück gehen und einfach anfangen, in einem Text hinzuzufügen, in diesem Fall haben wir Listen von Käse, die ich liebe. Also, vielleicht stattdessen lasst uns dies ändern in, Liste der Lebensmittel, die ich liebe, und dann werde ich eine andere Überschrift machen, die sagt , Desserts, und ich werde auch über Snacks sprechen wollen. Dieser bekommt einen Ausruf und hier möchte ich die Desserts auflisten, die ich mag und über sie reden. Vielleicht werde ich sagen, Key Lime Pie und dann vielleicht werde ich einen Absatz darüber haben, warum ich Key Lime Pie liebe. Also, ich liebe KLP, weil es verdammt lecker ist. Gute Geschichte. Wenn wir eine Überschrift haben wollen, wollen wir wahrscheinlich eine andere, also lassen Sie uns ein weiteres Dessert hinzufügen. Ich liebe auch Reis krispy Leckereien und ich habe einen Absatz. Es ist der beste Weg, Butter zu verwenden, nur drei Zutaten. Dies ist die Art der Kopie, die ich schreibe. Dann gilt das Gleiche für Snacks. Also, Snacks, können wir ein bisschen unter Snacks wie Kartoffelpüree schreiben. Sind Kartoffelpüree ein Snack? Wahrscheinlich nicht. So buchstabiert man Kartoffeln nicht. Machen wir das richtig und vielleicht will ich stattdessen Kartoffeln machen und ich werde darüber reden. Ich mag sie püriert, ich mag sie tater totted usw. So wie Sie sehen können, hier ist ein weiteres Beispiel dafür, wie wir Überschriften auf unserer Seite verwenden würden. Wenn wir noch einen hätten, möchte ich vielleicht über Toppings reden und ich könnte sagen, pikante Toppings und dann vielleicht einen Absatz haben, der die herzhaften Toppings beschreibt, die ich auf Tater Tots mag, wie Ketchup, Senf und dann vielleicht süße Toppings. Ich muss dir jetzt alles gestehen, ich esse nie wirklich süße Toppings auf meinen Tatertots. Aber sagen wir, ich habe es getan, vielleicht möchte ich Apfelsoße darauf legen oder vielleicht möchte ich Schokoladensirup darauf setzen. Es klingt völlig appetitlich. Apfel-Sauce wäre wahrscheinlich ziemlich gut. Okay, also gibt es einige Beispiele für die Überschriften, die wir haben. Wieder habe ich sie jetzt eingegeben, nur damit wir diesen Umriss sehen konnten, aber sie sind wirklich auf der gleichen Ebene der Verschachtelung. Also, wir würden die wieder rausbringen wollen. Also, ich werde das nur ein wenig aufräumen, und ich werde speichern und dann möchte ich die Sicherung in der Vorschau sehen. Also, lassen Sie uns unsere class.HTML Datei wieder öffnen, kann im Browser öffnen und jetzt können Sie sehen, hier sind meine Überschriften und Sie können sehen, dass die H1 die größte war, dann die H2, dann die H3 und dann kommen wir runter zum H4, die H5 und die H6. Standardmäßig wird der Browser sie kleiner machen, die untere Überschrift lässt Sie gehen. Das war's jetzt für Überschriften. Unsere Seite sieht ein wenig langweilig aus. Lassen Sie uns im nächsten Video darüber sprechen, wie wir Bilder hinzufügen. 14. Das Bild-Tag und die Absoluten/Relativen Dateipfade: Sie könnten sich also daran erinnern, wenn wir uns Bilder vorher angesehen haben, dass die Bilder ein eigenständiges Element waren, was bedeutet, dass sie kein schließendes Tag haben. Aber sie haben ein paar erforderliche Attribute. Also, für den Anfang, machen wir unsere offene Klammer, und dann für Bild, schreiben wir IMG. Dann werden wir auf Leerzeichen klicken, und dann werden wir beginnen, die Themen unseres Attributs einzugeben. Unser erstes Attribut wird die Quelle sein. Die Quelle wird uns sagen, wo unser Bild lebt. Also, src=“ "und wir füllen das mit dem Wert, wo der Dateipfad zu unserem Bild ist. Die andere Sache, die wir brauchen, ist das alt-Attribut und das Alt wird geladen, wenn das Bild aus irgendeinem Grund nicht geladen werden kann oder Bildschirmlesegeräte mitteilt, was das Bild ist. Also, lassen Sie uns ein Bild finden, das auf unserer Website verwendet werden kann. Ich werde voran gehen und ich möchte ein Bild von einem Faultier setzen , weil Faultiere entzückend sind. Also, ich gehe voran und klicke über die Bild-Tags von Google Bild. Ich bin nicht auf der Suche nach Faultier aus den Goonies, obwohl ich die Goonies sehr genieße. Ich suche einen dieser entzückenden kleinen Kerle. Also, ich werde die Bild-URL dafür finden, indem ich auf Bild anklicke und dann , wenn das geladen wird, werde ich die URL hier oben kopieren, die in Punkt JPEG endet. Das wird die Bilddatei für das sein, was ich innerhalb der Quelle verwenden werde. Also, ich werde das alle auswählen und Dateien kopieren oder steuern C oder Befehl C. Dann gehe ich zurück zu Sublime Text 2. Ich werde mein Bild-Tag finden und zu diesem Quellattribut übergehen und dann in den Wert einfügen. Also, ich werde diese URL einfügen, die in Punkt JPEG endet und das ist der Pfad zu unserer Bilddatei. Ein häufiger Fehler, den ich manchmal gesehen habe, ist das Einfügen der URL für das Bild außerhalb des doppelten Anführungszeichens und das funktioniert nicht. Wenn Sie es einfügen, stellen Sie sicher, dass es zwischen dem Anführungszeichen liegt, sodass es als Wert für das Attribut fungiert. Also, dieser Wert hier ist, was wir als den absoluten Dateipfad bezeichnen. Es zeigt auf, wo dieses Bild im Internet lebt. Wir nennen dies unseren absoluten Dateipfad, weil es den absoluten Ort gibt, an dem das Bild lebt. Also, es lebt unter http://static.ddmcdn.com/gif/2-_sloth_in_bowl.jpg und endet in diesem Punkt JPEG sagen: „Wenn Sie diese URL in ein Browserfenster einfügen, werden Sie dieses Bild finden, das dort lebt. Im nächsten Schritt müssen wir auch Text hinzufügen oder alt, damit jeder, der das Bild nicht sehen kann, weiß, dass es Faultier ist. Yehey, Faultier. Wir möchten das speichern und dann sehen, wie es in unserem Browser aussieht. Eine andere Möglichkeit, unsere Datei neben einem Doppelklick zu sehen, ist indem Sie auf die geöffnete Datei in unserem Browser Chrome klicken. Also, jetzt haben wir unsere Klassendatei geöffnet und hey, sieh mal! Da ist unser Faultier. Unsere Seite ist etwas heller und glücklicher. Aber was ist, wenn Sie ein Bild wünschen, das lokal auf dem Computer und nicht im Internet ist? Nun, wir können dieses Bild entweder jetzt in unserem Site-Ordner in unseren Bildern speichern und es als Referenz verwenden. Oder wenn Sie zusammen mit den Klassendateien folgen, werden Sie sehen, dass wir im Bilderordner bereits sieben Bilder zur Auswahl haben. Also, lassen Sie uns diese arbuckle-bio.jpg in unserer Website einschließen. Eine einfache Möglichkeit, zu sehen, wo sich unsere Dateien befinden, ist, indem Sie die Seitenleiste anzeigen. Also, in Ansicht, Sidebar, Show Sidebar in Sublime Text, erhalten wir einen zusätzlichen Fensterbereich , und das ermöglicht uns zu sehen, mit welchen Dateien wir arbeiten. Also, im Moment sehen wir class.html und das ist die Registerkarte, die geöffnet ist. Aber was, wenn wir die anderen Dateien und Ordner sehen wollen, die in unserer Jon Arbuckle-Website sind? Wir können dies tun, indem wir einfach unseren Ordner packen und wir werden ihn direkt in die Seitenleiste ziehen. Also, klicken und ziehen Sie und jetzt werden Sie sehen, dass diese Ordner Pop-up wie aufgetreten. Also, wir werden Jon Arbuckle Website sehen und wir werden class.html sehen und das ist Datei, in der wir arbeiten hier. Dann sind wir in der Lage, alle Bilder, die sich in unserem Bilderordner befinden, leicht zu sehen. Lassen Sie mich das noch einmal mit Ihnen durchmachen. Eine andere Möglichkeit, dass Sie die Seitenleiste in Ihrem Sublime Text öffnen können , ist nur durch Klicken auf Datei, Öffnen und Navigieren zu Ihrem Ordner, so Jon Arbuckle Website. Wenn Sie dann auf Öffnen klicken, wird automatisch der Ordner mit allen Dateien angezeigt. Sublime Text 2 macht diese seltsame Sache, wo es zwei Fenster öffnet, also schließen Sie einfach das andere und stellen Sie sicher, dass Sie in Ihren Klassendateien arbeiten. Also, jetzt können wir sehen, dass wir unsere class.html wieder haben. Ich werde das öffnen und Sie werden sehen, wenn ich doppelt darauf geklickt habe, es erscheint hier und in der Seitenleiste. Wenn ich nur einmal klicke, dann wird Sublime Text 2 mir eine kurze Vorschau geben. Aber sobald ich entweder hier eintippe oder doppelklicke, wird es tatsächlich als Tab geöffnet. Also, während ich tippe, öffnet es dann die Datei. Dies ist nur eine Möglichkeit, dass Sie Ihre Dateien schnell durchsuchen können , ohne sie tatsächlich zu öffnen. Aber stellen Sie sicher, dass Sie doppelt geklickt haben und Ihre class.html wieder geöffnet haben. Also, jetzt lassen Sie uns unser Bild auf der Seite hinzufügen. Wir werden das Bild-Tag duplizieren, weil wir unseren absoluten Dateipfad Beispiel speichern möchten. Also, wieder werden wir img source = "alt=“ schreiben und dann unser Tag schließen. Wir wissen also, dass wir zu unserer logo.png Datei gelangen wollen, die sich innerhalb unseres Image-Ordners befindet. Aber wie genau kommen wir dorthin? In unserem absoluten Dateipfadbeispiel hatten wir die URL, die in Bowl dot JPEG mit Faulheit endete. Wir wissen also, dass wir die Art von Bildverweis darauf einschließen wollen. Also, wir wissen, dass wir logo.png hier sicher brauchen werden. Versuchen wir also, diese logo.png hinzuzufügen, weil das der Name unserer Bilddatei ist. Natürlich können wir auch Alt-Text hinzufügen, so dass wir es einfach nennen Logo für jetzt. Speichern wir dann diese Datei und sehen Sie, was passiert, wenn wir sie in unserem Browser öffnen. Also, ich habe die Seite aktualisiert und ich werde nach unten scrollen und wie Sie sehen können, haben wir das Faultier aus unserem absoluten Dateipfad, aber hier drüben mit unserem relativen Dateipfad, nichts auftaucht. Wir haben dieses fehlerhafte Bild-Symbol, das uns anzeigt, dass das Bild nicht den richtigen Dateipfad zu ihm hat. Also, wir schweben logo.png hier, nichts kommt auf. Sie können sehen, ob ich die gleiche Aktion oben auf dem absoluten Dateipfad mache, erhalten wir eine kleine Vorschau des Faultierbildes. Aber hier haben wir nichts. Irgendetwas stimmt nicht. Lassen Sie uns also einen weiteren Blick darauf werfen, wie wir unsere logo.png erscheinen lassen können. Also müssen wir herausfinden, wo die Datei relativ zu unserer class.html Datei ist. Hier sind wir in class.html Datei und diese Datei befindet sich auf der gleichen Wurzel wie der Bildordner. Also, im Wesentlichen was wir tun müssen, ist, dass wir dem Browser sagen müssen , dass wir gerade bei class.html aber wir müssen in den Bild-Ordner gehen und dann, wenn wir innerhalb des Bild-Ordners sind. Wir werden nach einer Datei namens logo.png suchen. Also, wir werden dies tun, indem wir IMG eingeben, weil wir in diesen Ordner mit Bild gehen und dann innerhalb eines Ordners gehen wollen . Wir verwenden den Schrägstrich. Dies sagt, finden Sie den Bildordner dann der Schrägstrich sagt, gehen Sie hinein und dann sagen wir, suchen Sie nach logo.png. Lassen Sie uns das speichern, gehen Sie zurück zu unserem Browser und geben Sie eine Aktualisierung. Hey, sieh mal, da ist unser Logo. So durchlaufen wir unsere Dateipfade und können unsere Bilder relativ zu unserem Dokument auf die Seite bringen. Also, so gehen wir in einen Ordner, aber was ist, wenn wir wieder nach oben gehen und eine Datei finden müssen? Nun, für diesen nächsten Teil möchte ich nur, dass du weiterführst während ich das mache und das nicht in deine Dateien kopierst. Aber was ich tun werde, ist einen neuen Ordner zu erstellen und dieser neue Ordner wird unsere class.html Datei halten. Also, direkt in Sublime Text, kann ich auf Neuer Ordner klicken und ich werde es nur Klasse nennen. Also, jetzt, wie Sie sehen können, haben wir einen neuen Klassenordner in unserem Jon Arbuckle Site-Ordner. Ich schließe die Datei, mit der ich gearbeitet habe, und öffne mein Finder-Fenster. Denn gerade jetzt, nur um es Ihnen zu zeigen, werde ich die Datei class.html in den Klassenordner ziehen. Ich werde diese Datei erneut öffnen und die Datei class.html anzeigen, die jetzt darin lebt. Wir werden dies im Browser öffnen. Jetzt scrollen wir nach unten und Sie können sehen, dass unser Bildpfad wieder gebrochen ist. Unser Bildpfad ist wieder gebrochen, weil wir unsere Quelle noch einmal besuchen. Wir suchen im Wesentlichen nach einem Bild-Ordner mit einer Logo-PNG-Datei innerhalb unseres Klassenordners. Denn denken Sie daran, dass es relativ zu dem Ort ist, wo unsere Datei ist. Also, unsere Datei class.html sagt: „Nun, wo ist ein Bild-Ordner hier drin?“ Und es ist nicht, weil es eine Ebene höher ist. Also, wir müssen tun, ist herauszufinden, wie wir von der Klasse HTML-Backup auf die Route von Jon Arbuckle Site-Ordnerbekommen die Route von Jon Arbuckle Site-Ordner und dann zurück in den Bild-Ordner, um die logo.png zu finden. So können wir dies auch innerhalb von Sublime Text und in unserer HTML-Datei tun. Was wir tun müssen, ist, wieder auf eine Ebene zu gehen. Um eine Ebene nach oben zu gehen, geben wir Punkt Punkt Schrägstrich und das sagt, von wo ich class.html bin, gehen Sie eine Ebene nach oben, suchen Sie dann nach einem Bildordner und finden Sie dann die Datei logo.png. Also, lassen Sie uns das retten. Gehe zurück zu einem Browser, aktualisiere und hey sieh da ist es wieder. Unser absoluter Dateipfad dauert etwas länger zum Laden, aber das wird momentan angezeigt. Hey, sieh mal, da ist es. Also, jetzt haben wir beide Dateien wieder auf unserer Seite und wir haben dies korrigiert indem wir den Punkt Punkt Schrägstrich machen, um die obere Ebene zu gehen und das richtige Bild zu finden. Wenn Sie ein paar Ordner tief verschachtelt wurden, können Sie weiter Ebenen nach oben gehen, indem Sie einfach den Punkt Punkt Punkt Schrägstrich eingeben. Also, im Moment würde das ein, zwei, drei, vier Ebenen steigen, wenn wir vier Ordner tief wären. Natürlich sind wir nicht, also lasst uns das loswerden. Also, so durchqueren wir unsere Dateien bekommen relative Dateipfade. Im Moment werden wir alles wieder darauf einstellen, wie es war und unsere Datei class.html zurück in die Wurzel verschieben , damit wir wieder darauf zurückgehen können, wie die Dinge vorher organisiert wurden. Wenn ich Dateien so verschiebe, möchte ich sicherstellen, dass ich in Sublime Text die richtigen Dateien arbeite. Also, im Moment schaut es sich eigentlich immer noch die Datei class.html an , die sich in einem Klassenordner befand, der nicht mehr existiert. Also möchte ich sicherstellen, dass ich das schließe, meine eigentliche Datei nicht speichern und öffnen. So bekommen wir Bilder mit absoluten und relativen Dateipfaden auf unsere Seiten. Lassen Sie uns im nächsten Video einen Blick auf Listenelemente werfen und sehen wie wir beginnen können, verschiedene Arten von Listen zu unserer Seite hinzuzufügen. 15. Listenelemente: Also, als nächstes betrachten wir List Elements. Ich werde nur einige dieser Absätze löschen, um uns ein wenig mehr Platz zu geben , und so eine Liste, die wir haben, die wir ein wenig zuvor gesehen haben, war die Ungeordnete Liste, die wir durch Schreiben eingegeben <UL> und dann lassen Sie uns sicher sein, sie zu schließen auch das schließende Tag des </UL>. Also, UL ist für ungeordnete Listenelemente und wir können Ungeordnete Liste für eine Vielzahl von verschiedenen Dingen verwenden. Vielleicht, wenn wir ein Rezept kochen und wir brauchten, um Zutaten zu bekommen, Unordered List wäre großartig für Zutaten, denn wenn wir Essen einkaufen gehen, Es spielt keine Rolle, die Reihenfolge, dass wir es kaufen und solange wir nur alles auf der Liste. Eines unserer Beispiele könnte so etwas wie das sein, was wir zum Backen benötigen. Also, sagen wir, dass wir etwas wie Mehl, Zucker und Schokoladenchips brauchen . Also, wenn wir das jetzt speichern und es in unserem Browser ansehen , werden wir die Seite aktualisieren und dann werden wir dort Mehl, Zucker und Schokoladenchips sehen , aber sie sitzen alle auf der gleichen Zeile wie einander. Im Wesentlichen erscheinen sie nicht so sehr als Listenelemente, wie sie nur Absatztext sind. Wann immer wir eine Ungeordnete Liste oder eine andere Art von Listentyp verwenden, können wir nicht einfach den Container einer UL setzen. Wir müssen auch ein LI-Element einschließen. Das LI-Element steht für List Item und trennt jedes Element, das in der Liste gehört. In diesem Fall ist die Ungeordnete Liste. Wir tun das, indem wir tippen <Ll> und dann wieder haben wir unser schließendes Tag für eine. Wir schneiden diesen Text ein Mehl und wir werden es in die LI einfügen, um als LI-Artikel zu vermarkten. Wir werden das Gleiche für Zucker tun und wir werden auch Schokoladenchips umgeben, denn das ist der dritte Listeneintrag in unserer Liste. Lassen Sie uns den Speicherplatz hier loswerden und dann speichern wir diese Datei erneut und sehen Sie jetzt, wie das in unserem Browser aussieht. Wir werden die Seite aktualisieren und jetzt, wie Sie sehen können, sieht das ganz anders aus. Plötzlich haben wir jetzt eine Aufzählungsliste mit drei ungeordneten Listenelementen. Also, Mehl, Zucker, Schokoladenchips und standardmäßig, wenn Sie eine Ungeordnete Liste verwenden , wird der Browser diesen Punkt oder Aufzählungszeichen zu jedem unserer Listenelemente hinzufügen. Listenelemente können auch andere Arten von Text enthalten, neben nur Klartext können wir tatsächlich HTML-Elemente darin einfügen. Also, wenn wir eine Reihe von Absatztexten mit innerhalb eines Listenelements setzen wollten, könnten wir. Also, wir haben ein Tag in unserem LI verschachtelt, verschachtelt innerhalb unserer UL und wir können hier einen Absatz schreiben, wie Vollkornmehl zu kaufen und wir können das schließen und wenn wir wollten, ist dies total semantisches HTML sowie, so dass Sie ein ein paar Absätze, die jedes Listenelement beschreiben. Eine andere Sache, die Sie bemerken müssen, ist, dass Sie nicht einfach einen Absatz in eine UL einfügen können. Es muss immer eine UL sein, gefolgt von einer LI und jedem anderen zusätzlichen Text darin, um einen gültigen Listeneintrag zu haben. Also, lassen Sie uns unseren Text wieder auf, wie es war und denken Sie daran, zu speichern, weil es wichtig ist, oft zu speichern, aber was, wenn die Bestellung wichtig ist. Was wäre, wenn wir nicht nur eine ungeordnete Liste wollten, sondern eine geordnete Liste wollten. Nun, wir können das mit einem OL machen. OLs sahen genau wie eine UL aus, außer wir werden OL verwenden, aber im Inneren haben wir wieder Listenelemente. Immer ein OL mit verschachtelten LIs innen. Einer der Gründe, warum wir eine bestellte Liste wollen, ist, wenn wir tatsächlich über die Anweisungen sprechen, um etwas zu backen. Also, das ist, wo die Reihenfolge der Operationen wichtiger ist , also werden wir eine Bestellliste für so etwas wie verwenden wollen, gießen Sie eine Tasse Mehl in eine Schüssel, mischen Sie den Zucker, essen Sie die Schokoladenchips, weil dies ein wirklich legitimen Rezept. Ich glaube nicht wirklich, dass jemand dem zu Hause folgen sollte, aber lassen Sie uns so tun, als wären die Schritte hier wichtig und das wäre eine geordnete Liste. Wir werden das speichern und schauen wir uns in einem Browser an. So können Sie für eine geordnete Liste standardmäßig den Browser sehen, legt Zahlen davor. Also, eins, zwei, drei vor jedem Schritt, im Gegensatz zu der Aufzählungsliste in der Ungeordnete Liste. Wir haben eine weitere Art von Liste, die wir abdecken werden, und das ist ein bisschen anders und das ist die Definitionsliste. Definitionsliste ist mit einer DL gekennzeichnet. Wir haben jedoch keine Listenelemente in diesen. Für Definitionsliste werden wir tatsächlich einen Definitionsbegriff und eine Definitionsbeschreibung definieren . Also, unser Definitionsbegriff könnte so etwas wie Banane sein, und dann werden wir die Definitionsbeschreibung machen wollen. Also, für Banane können wir sagen, dass die Definition so etwas wie eine köstliche gelbe Frucht ist und dann werden wir diese Definition schließen, indem wir sie mit einem Tag schließen. Lassen Sie uns einen weiteren Begriff hinzufügen. Also, wenn wir mehrere Begriffe in unseren Listen haben wollen, so sagen Sie, dies ist eine Liste von Früchten. Wir werden definieren, was ein Kiwi mit dem DT ist und dann müssen wir ihm auch eine Beschreibung geben, also in der DD werden wir etwas über Kiwis schreiben, so etwas wie grüne seltsame Früchte mit Fuzz und ansprechendem Geschmack und dann werden wir diese Definition schließen. Ich werde dies ein wenig erweitern, weil es in die nächste Zeile ging, also hatten wir nicht genug Platz und dann haben wir eine fertige Definitionsliste. Also, lassen Sie uns sehen, wie das in unserem Browser aussieht. Wir werden unsere Datei speichern und dann werden wir aktualisieren und hier können Sie sehen, dass es ein bisschen anders ist. In unserer Definitionsliste befindet sich unser Begriff auf der linken Seite und dann wird die Definitionsbeschreibung nach rechts eingerückt. Dies sind also die Browser-Standardeinstellungen für die Anzeige einer Definitionsliste innerhalb des Bildschirms. Sieht so aus, als wüsste ich nicht, wie man lecker buchstabiert, also lasst uns das beheben und damit ist unsere Definitionsliste alles eingestellt. In der nächsten Lektion werden wir einen Blick darauf werfen, was das Internet zu einem der besten Dinge macht , die es gibt, und das ist Links. Also, komm zurück für das nächste Video. 16. Links: Bisher hatten wir wirklich nur statischen Inhalt auf einer Seite, aber was HTML von anderen Markupsprachen wie SGML unterscheidet , ist die Funktion für Hypertext und diskrete interaktive Dokumente. Ein Link ist eine Verbindung von einer Seite zur anderen und sie sind super genial. Also, wie wenn wir ein YouTube-Video ansehen und es endet, und es ist wie, Sie haben dieses niedliche Katzenvideo hier ist ein Link zu einem anderen niedlichen Katzenvideo und Sie sind wie, ist genial oder wenn Sie eine neue Geschichte schreiben und klicken Sie auf einen Link noch eine neue Geschichte. Links sind, wie wir herumkommen. Also, lassen Sie uns ein wenig darüber reden, wie wir Links machen. Link hat im Wesentlichen zwei Enden; ein Anker und dann hat es auch eine Richtung. Also, wie wir ein Link-Tag schreiben, ist im Wesentlichen, dass wir ein Anker-Tag schreiben. Also, lassen Sie uns nach unten scrollen und etwas Platz finden, und um unser Anker-Tag zu schreiben, werden wir A für Anker schreiben und dann der nächste Teil, der super wichtig ist, ist das href-Attribut. Das href-Attribut ist die Richtung, wohin wir wollen, dass der Link gehen. Der Wert dafür ist im Wesentlichen die Quelle der URL , die unsere Besucher besuchen möchten, nachdem sie auf diesen Link geklickt haben. Also, im Inneren können Sie einen Text schreiben wie „klicken Sie hier“ und dann werden wir unser Anker-Tag mit dem schließenden A schließen In unserem href werden wir diese URL einfügen, wohin die Seite gehen soll. Das könnte eine Seite auf unserer Website sein oder es könnte eine externe Seite sein, so vielleicht etwas wie cuteoverload.com ist, wo wir unsere Besucher senden möchten. Also, lassen Sie uns das speichern und sehen, wie das auf unserer Seite aussieht. Also, lassen Sie es eine alte Aktualisierung geben und jetzt können wir sehen, dass wir einen „Klick hier“ -Link haben, also warum nicht? Lasst uns hier klicken. Also, ich werde auf diesen Link klicken und wenn ich es tue, werde ich zu cuteoverload.com nehmen und ich kann schnell sehen, dass das eine sehr kluge Entscheidung war, weil schauen Sie sich all die niedlichen, die auf dieser Seite ist. Es ist ein Meerschweinchen aus Merino? Das ist ziemlich gut. Sieh dir den kleinen Löwen an. Ist das eine Löwenkatze? Ich weiß nicht, was das ist, aber es isst eine Giraffe und ich genieße das und schaue mir den Elefanten an. Okay, ich werde jetzt offiziell abgelenkt, also kommen wir zurück zu unseren Link-Tags. Also, da ist unser Klick hier Link-Tag und ich sollte sagen , dass hier klicken ist schrecklich Link-Text zu haben. Es ist schrecklich, weil ich hier klicke. Ich meine, ich habe diesen Fehler im Internet schon mal gemacht, oder? Also, wenn wir Link-Deskriptoren schreiben, wollen wir sicherstellen, dass es klarer Text ist. So etwas wie „sehen entzückende Tiere“, und dann weiß ich, dass, wenn ich auf diesen Link klicke, ich werde, um entzückende Tiere genommen werden. Also, das ist viel besser Link-Text, der auf niedliche Überlastung verweist und Ihren Besuchern klarer macht, wohin sie gehen werden, wenn sie auf diesen Link klicken. Das schließt unsere Anker ein. Werfen wir einen Blick auf Blockzitate in unserem nächsten Video. 17. Blockquote: In unserem Inhaltskonzept haben wir darüber gesprochen, ein Zitat von einem von Jons Kunden einzubinden. Um dies zu tun, werden wir das blockquote Element verwenden. Das blockquote Element stellt einen codierten Textabschnitt dar. Also, lassen Sie uns etwas Platz finden, um das hineinzusetzen. Wir tun dies, indem wir offene Klammer, Blockbuch, geschlossene Klammerschreiben , Blockbuch, geschlossene Klammer , und dann müssen wir natürlich unser Tag schließen. Also, lassen Sie uns hier ein Zitat setzen. Also werde ich hier ein Zitat von einem meiner Lieblingstexter setzen und schreiben: „Wach am Morgen auf, fühle mich wie P Diddy.“ Nur wirklich tiefe Blockquotes gehen heute auf unsere Seite Leute. Also, im Wesentlichen, wenn wir uns diesen Text ansehen, ist es nicht nur Klartext. Dies ist eigentlich ein Absatz weil Kesha nur sehr kluge Absätze in ihren Texten schreibt. Also, lassen Sie uns unseren Text durch einen Absatz umgeben. Also, jetzt ist unser Absatz in unserem Blockquote verschachtelt. Wir sehen dies im Browser in der Vorschau, und Sie werden sehen, hier ist es. Hier ist unser Blockquote und standardmäßig wird es von der linken Seite unserer Seite eingerückt, um darzustellen, dass es sich um ein Stück zitierten Text handelt. Ein Blockquote wird auch als Blockelement bezeichnet. Bisher haben wir wirklich viele Blockelemente auf unserer Seite verwendet, und Blockelemente, die Sie durch den harten Zeilenumbruch nach jedem Element erkennen können, also ist das der weiße Raum zwischen unseren Elementen. Im nächsten Video werden wir über Inline-Elemente sprechen, die auch Teile unserer Webseiten sein werden. 18. Inline-Elemente: Bisher haben wir meist Block-Level-Elemente verwendet, und die Block-Level-Elemente haben nach jedem Mal, wenn sie sich auf der Seite befinden, einen Leerraum. Texte innerhalb einer Absatzüberschrift oder andere Elemente auf Blockebene können jedoch auch auf verschiedene Arten markiert werden. Also, vielleicht möchten wir betonen oder Text hervorheben, na ja, wir können das innerhalb von Dingen wie unseren Absätzen oder unseren Blockelementen auf einer Seite tun. Ein Beispiel für ein Inline-Element ist also das ABBR-Element oder eine Abkürzung. Also, wenn Sie eine Abkürzung verwenden, tatsächlich einmal, und das ist für Q und pie. Wir sagten, ich liebe KLP, weil es verdammt lecker ist. Lassen Sie uns also sagen, was das ist, was eine Abkürzung in unserem Text ist. Was wir also mit einem Inline-Element tun können, ist es in ein Block-Level-Element zu setzen. Also geben wir das Tag ABBR ein und schließen es dann mit einem schließenden ABBR-Tag und das besagt, dass KLP eine Abkürzung ist, so dass Sie sehen , dass dieses Inline-Element innerhalb des Absatzes verschachtelt ist. Wir können auch ein Attribut zu unseren ABBR-Elementen hinzufügen und wir werden das title-Attribut hinzufügen. Das title-Attribut unterscheidet sich insofern von dem title-Tag, als es den ABBR beschreibt und diesen Tab-Text nicht auf unserer Seite enthält. So wird der Titel hier sein, was diese Abkürzung steht, für die Q, I und pie ist. Dies sagt Suchmaschinen und Bildschirmlesegeräte, was KLP ist, und auch wenn wir speichern und Vorschau im Browser sehen Sie, dass wir in der Lage sein, es in einem anderen Bereich zu sehen. Also im Moment sieht es ziemlich gleich aus, aber wenn wir unsere Maus nehmen und den Mauszeiger über, können Sie sehen, dass wir tatsächlich jetzt einen Tool-Tipp bekommen, der das Titelattribut unseres ABBR-Tags sagt, die besagt, Key lime pie. Das ABBR ist also ein Inline-Element und Sie werden sehen, dass es danach keinen harten Zeilenumbruch gibt. Es erscheint nur direkt im Einklang mit dem Rest des Textes. Das ist also, was als Inline-Element bekannt ist. Es gibt andere Inline-Elemente, die wir verwenden können, HTML bietet uns zwei Möglichkeiten, um unseren Text zu betonen. Eine der Möglichkeiten ist durch das M-Tag. Wir können gewöhnliche Betonung hinzufügen, indem Sie das M-Tag um den Textblock legen. Lassen Sie uns in diesem Fall Mozzarella betonen, weil es verdient, betont zu werden. Ein weiteres Schwerpunktniveau ist die starke Betonung. Wir können das auf unserer Seite hinzufügen, indem wir das starke Tag verwenden. Also werden wir Spaß haben, als starker Text hier zu tun. Alle diese Inline-Elemente sind in unserem Absatz verschachtelt und wenn wir aktualisieren und nach unten scrollen, um zu überprüfen, dass Sie sehen können, dass standardmäßig die Betonung tatsächlich kursiv dargestellt wird und unser starkes Tag tatsächlich standardmäßig gerenderter Bolzen ist. Dies sind also ein paar Beispiele für die Inline-Elemente, die wir haben. Es gibt auch andere Inline-Elemente da draußen, denken Sie daran, dass Sie diese HTML-Doc-Site überprüfen können und sehen, was noch da ist. Wenn wir also einen Blick auf unseren Textabschnitt hier werfen, können Sie einige der Dinge sehen , die wir gerade besprochen haben, wie das starke Tag oder das M-Tag. Einige andere Dinge hier sind Inline-Elemente, wie das DFN-Tag oder das Delete-Tag. Wir haben uns auch ein anderes Inline-Element angesehen, rechts das Link-Element. Jedesmal, wenn wir einen Link auf unserer Seite haben , ist das ein anderes Inline-Element, bei dem es sich nicht um eine Blockebene handelt. Wir können auch einen Link innerhalb unseres Absatztextes hinzufügen, der nicht allein stehen muss. Wenn wir also so etwas wie käsiges Grinsen einen Link machen wollten, können wir das tun. Wir setzen einfach unseren Cursor rechts in diesen Text und dann um den Text, den wir auf Link sein wollen, wir unser A-Tag schreiben. Also A href gleich und dann werden wir unseren Attributwert haben, wir werden das nachher einfügen, wir schließen zuerst unser Tag und dann gehen wir zurück und wohin wir das wollen, kann es gehen. Also lassen Sie uns sagen, dass wir käsiges Grinsen 2.2 wollen. Lassen Sie uns cheese.com tun, ich bin sicher, das ist eine schöne Website, die Sie über Käse grinsen lassen wird. So können wir einen Inline-Link in unseren Absatztext hinzufügen und jetzt können Sie sehen, dass der Link erscheint und es gibt keine Zeilenumbrüche davor oder danach, weil es ein Inline-Element ist. Sie werden auch feststellen, dass es hier einen Farbunterschied gibt, wenn die Links besucht wurden, erscheint sie standardmäßig als lila und wenn wir noch keinen Link angeklickt haben, erscheint er blau. Also, das schließt Links. In unserem nächsten Video werden wir über HTML-Entitäten sprechen und wie man sie zu unserer Seite hinzufügen kann. 19. HTML-Entitäten: Manchmal brauchen wir in unseren HTML-Dokumenten mehr als reine Texte. Reservierte Zeichen in HTML müssen durch Zeichenentitäten ersetzt werden. Also, Dinge wie Copyright-Symbole oder Marken, das ist, wofür wir HTML-Entitäten verwenden werden. Lassen Sie uns einige Beispiele dafür sehen. Wir werden hier einen neuen Absatz erstellen, der als Beispiel für Entitäten verwendet wird. Also, wir werden nur sagen, dass dies unser Entitätsabsatz ist. Und dann versuchen wir, eine Entität hinzuzufügen. Wie Sie eine Entität auf eine Seite schreiben, folgt der gleichen Syntax. Es beginnt immer mit einem kaufmännischen Und-Zeichen, und dann werden wir den Namen der Entität schreiben. In diesem Fall werden wir eine Kopie für das Urheberrecht schreiben, und dann endet es mit einem Semikolon. Also, kaufmännisches Und-Zeichen, Kopie, Semikolon. Lassen Sie es uns speichern, aktualisieren, und dort können Sie sehen, dass es unser Copyright-Symbol. Das ist eine HTML-Entität. Es ist ziemlich cool. Und da draußen gibt es einen ganzen Haufen, den wir schreiben können. Wir können noch einen machen, wenn wir eine Cent-Entität reinsetzen wollen , können wir, kaufmännisches Und-Cent Semikolon. Oder wie wäre es, wenn wir Euro setzen wollen, können wir kaufmännisches Und-Zeichen, Euro, Semikolon machen. Wenn Sie eine Marke wollen, die kaufmännisches Und-Zeichen, Handel, Semikolon. Einige von ihnen sind ziemlich leicht zu lesen oder erraten und dann können wir sehen, wenn wir die Seite dort aktualisieren sie alle sind. Aber was ist, wenn wir ein kaufmännisches Und-Zeichen wollen? Nun, wir können das auch tun, wir machen kaufmännisches Und-Zeichen, Ampere, Semikolon, und jetzt sehen, es gibt ein hübsches kaufmännisches Und-Zeichen auf unserer Seite. Keine Sorge, Sie müssen sich nicht alle diese merken. Wenn Sie nach HTML-Entitäten suchen, finden Sie viele Verweise auf alle Entitäten, die Sie da draußen verwenden können. Hier ist eine Seite, die einen Haufen zeigt und wie Sie sehen können, gibt es eine ganze Menge von ihnen. Also, machen Sie sich keine Sorgen über das Auswendiglernen, jederzeit, wenn Sie nach einer Entität suchen, machen Sie einfach eine schnelle Google-Suche dafür und Sie können es finden. Sie werden wahrscheinlich einige auswendig lernen, die mehr als andere verwenden, aber wenn Sie jemals vergessen, machen Sie einfach eine schnelle Suche nach einem HTML-Entity Copyright, und Sie werden wahrscheinlich 3,7 Millionen Ergebnisse auf den Inter-Webs darüber erhalten , wie um dir zu sagen, dass du das tun sollst. Also, keine Sorge, wenn du vergisst. Im nächsten Video wir einen Blick auf die Code-Formatierung und einige Best Practices. 20. Code-Formatierung: Also haben wir ein wenig über Leerraum und Codeformatierung gesprochen, aber ich möchte nur ein paar Best Practices überprüfen. Es ist wirklich wichtig, dass wir unseren Code schön und sauber halten. Dies erspart Ihnen Kopfschmerzen, wenn Sie in einer Woche oder einem Jahr zu Ihrem Code zurückkehren und Sie sich nicht genau daran erinnern. Es wird auch Kopfschmerzen sparen, wenn Sie innerhalb eines Teams arbeiten. Es ist am besten, wenn Sie sich alle darauf einigen können, wie Sie Ihren Code formatieren. Technisch gesehen, weil Leerzeichen ignoriert werden, könnten Sie Ihren HTML-Code so schreiben. Es könnte im Grunde ein schlampig sein, wie Sie wollen und der Browser wird das irgendwie für Sie beheben. Aber es ist wirklich schwer, das zu lesen. Also, halten Sie immer auf eine Art schönen Zeilenabstand, dass es Ihnen leicht macht, zu analysieren. Sie werden auch sehen Sublime Text hat hier, was sie eine Minimap nennen , und die Minimap ermöglicht es Ihnen, Ihre Texte zu durchsuchen Wenn Sie also nach einem bestimmten Stück HTML suchen, das Sie geschrieben haben. Im Moment ist unser Dokument ziemlich kurz, so dass das möglicherweise nicht notwendig ist, aber wenn Ihr Projekt lange wird, sollten Sie es verwenden. Moment können wir aber Minimap verstecken und dann wird das keine Immobilien an unserer Ecke blockieren. Eine andere Sache, die wir vermeiden wollen, ist die sogenannte Tag-Suppe. Also können wir h1 auf Kleinbuchstaben schreiben, wie wir es getan haben, oder wir können es in Großbuchstaben schreiben. Dies wird auch vom Browser gelesen. Sie könnten auch etwas wirklich Cooles tun, wie dies, Großbuchstaben T, Kleinbuchstaben I, Großbuchstaben T, Großbuchstaben L, Sie bekommen den Punkt. Dies ist, wenn Sie 1996 Hacker Tage wieder leben wollen und Sie Null cool sein wollen, aber es ist wirklich nicht sehr cool überhaupt. Also, dies wird gültiges HTML sein, das gelesen werden kann, aber es tut nur weh, die Augen anzuschauen. Also empfehle ich, dies nicht zu tun. Es ist wirklich schön, Ihren Code sauber und ordentlich zu halten. Also, lassen Sie uns das auf alle Kleinbuchstaben zurücksetzen. Wenn Sie dann mit einem Team arbeiten, können Sie ein Formatierungsdokument erstellen, das zeigt, wie jeder seinen HTML-Code schreiben sollte. Es ist wirklich gute Übung zu folgen und es wird Sie sauber und ehrlich mit Ihrem Code halten. Ein weiteres Werkzeug, das wir zur Verfügung haben, sind HTML-Kommentare. Also, sagen wir, wir wollten uns hier eine kleine Notiz schreiben. Was wäre, wenn ich später noch mehr Wüsten hinzufügen wollte und ich nicht vergessen wollte. Ich schreibe eine Notiz, die besagt: „Vergiss nicht, mehr Wüsten hinzuzufügen.“ Großartig. Das Problem ist jedoch, dass alles, was wir in unserem Körper schreiben, auf die Seite gedruckt wird. Also, wenn ich hier aktualisiere, dann werden wir natürlich die Notiz sehen, die ich mir auf der Seite geschrieben habe. Also, wie können wir vermeiden, dass dies geschieht. Nun, wir können HTML-Kommentare verwenden. Also, für HTML-Kommentare sehen sie so aus, offene Klammer Ausruf, Bindestrich, Bindestrich, und dann am Ende des Kommentars werden wir einen weiteren doppelten Bindestrich und die schließende Klammer machen. Sie können sehen, dass Sublime Text diese graue Farbe macht, um uns wissen zu lassen, dass es ein Kommentar ist. Jetzt, wenn ich speichere und zum Browser gehe, ist er nicht sichtbar. HTML-Kommentare können also wirklich super hilfreich sein. Eine Sache, die ich darauf hinweisen möchte, ist, nur weil wir es in dieser Browser-Ansicht hier nicht sehen können , bedeutet nicht, dass es nicht in Ihrer Quelle ist. Also, wenn jemand Ihre Quelle sehen würde, schauen Sie, da ist unser Kommentar. Ich sage dir das, weil ich nicht will, dass du so etwas wie „Ich hasse meinen Boss“ schreibst. In Ihren Kommentaren, weil es definitiv möglich ist, dass jemand es sehen kann. Also, denken Sie daran. Obwohl HTML-Kommentare nicht auf die Seite gedruckt werden, ist es immer noch möglich, dass jemand sehen kann, was Sie dort schreiben. HTML-Kommentare können super hilfreich sein, nur um alles zu verfolgen, was wir wollen. Also, vielleicht in den Klassennotizen möchte ich sagen, was dieser Abschnitt ist. Also, hier haben wir über Überschriften erfahren. Also, hier ist ein HTML-Kommentar, der sagt: „Überschriften“. Also, hier unten lese ich die Kommentare und dieser wird Bilder sagen, weil wir hier über Bilder gelernt haben. Ich kann das kopieren und einfügen, um es für mich ein wenig einfacher zu schreiben. Also, hier drüben haben wir über Blockquotes gelernt. Also werde ich den Text in Blockquotes ändern. Hier haben wir über Links gelernt. Also, lassen Sie mich in dieser Überschrift für Links hinzufügen. Hier war unser Absatz und unser Inline-Elementbeispiel. Wir haben unsere ungeordneten Listen, unsere sortierten Listen und unsere Definitionsliste. Also, das sind HTML-Kommentare und einige Hinweise zur Code-Formatierung. Also, denken Sie daran, versuchen Sie immer, Ihren Code schön und ordentlich zu halten, verwenden Sie Ihre Tabs zum Einrücken und Anzeigen von Verschachtelungen, und achten Sie darauf, alle Kleinbuchstaben zu machen, damit es ein wenig einfacher zu lesen ist. Wir haben in diesen letzten Videos viel gelernt und ich denke, wir sind jetzt bereit, auf unsere Inhaltsskizze zurückzukehren und unsere Inhalte in HTML für unsere Homepage zu übersetzen. 21. Markierung unserer Homepage: Wir werden aus unserer class.html Datei für jetzt zu bewegen, um unsere Homepage zu machen. Also, wir werden wählen Datei, Neue Datei, und wir werden ein neues Dokument erstellen, von dem aus arbeiten. Wir werden unsere HTML-Shell hinzufügen, so dass Sie kopieren und einfügen können, wenn Sie möchten, aber im Moment, lassen Sie es von Grund auf neu tun. Also brauchen wir unseren Doctype HTML, und das ist ein eigenständiges Tag. Als nächstes ist unser HTML-Element, und vergessen Sie nicht, dass wir das Lang Attribut dort setzen und es auf Englisch setzen. Wir werden unser HTML-Tag schließen, weil alles darin verschachtelt wird. Als nächstes kommt unser Hauptelement. Denken Sie daran, unser Kopf hält alle unsere Metadaten für unsere Seite. Danach unser Körperelement. Das body Element enthält alle Inhalte, die auf dem Bildschirm angezeigt werden. Wir werden unsere Datei speichern, und für die Homepage aller unserer Websites werden wir tatsächlich diese index.html nennen. Die Index-HTML-Datei ist, wonach der Webserver suchen wird , wenn sie in den Stamm Ihres HTML-Dokuments gehen. Index.html zeigt an, dass dies die Homepage ist und die erste Seite, die geladen werden sollte, wenn Besucher auf Ihre Website kommen. Also, wir werden das speichern und Sie werden feststellen, dass, sobald Sublime Text weiß, dass dies eine HTML-Datei ist, es beginnt, farbige Syntax-Hervorhebung basierend auf HTML-Tags durchzuführen. Öffnen wir ein Backup unserer Inhaltsstruktur und werfen Sie einen Blick darauf, was wir für unsere Homepage haben. Also, wir wissen, dass wir wollen, dass das Titel-Tag im Titel-Tag die Informationen für das, was diese Homepage ist, das in unser Hauptelement geht, weil es Metadaten sind. Wir werden unser Titel-Tag hinzufügen, und dann werden wir schreiben, was wir erscheinen wollen, was das Portfolio von Jon Arbuckle sein wird. Vergessen Sie nicht die andere notwendige Sache, die wir in unserem Kopf brauchen, ist ein Meta-Tag mit dem Auto-set-Attribut. Wir werden das auf UTF 8 setzen. Lassen Sie uns das speichern, denn denken Sie daran, dass wir immer oft sparen wollen. Als Nächstes werden wir anfangen, den Inhalt zu unserem Körper hinzuzufügen Wenn wir dies jetzt ansehen, wird natürlich nichts auf der Seite sein, weil wir noch nichts auf unser Körperelement gesetzt haben, aber wir werden unser Titel-Tag in die Registerkarte des Browsers. Außerdem haben wir nie ein fave-Icon gesetzt, also hier ist das Standard-Dokumentsymbol, das ich zuvor erwähnt habe. Lässt beginnen, Dinge zum Hauptteil der Seite hinzuzufügen , so dass es tatsächlich im Browser angezeigt wird. Wir haben unseren Aufzug Stellplatz, der als unser H1 fungiert. Ich werde diesen Text kopieren, dann werde ich das H1-Element erstellen. Ich werde den Text einfügen und dann werde ich das H1-Element schließen und jetzt haben wir unsere Überschrift Level 1 für unsere Seite. Es wird die wichtigste Überschrift sein, die auf unserer Seite angezeigt wird. Wenn wir das überprüfen, gehen wir, und denken Sie daran, dass es standardmäßig größer und kühner wird als der Rest des Textes auf unserer Seite. Sie könnten bemerken, dass das Apostroph in I'm tatsächlich als lockiges Zitat angezeigt wird, was wir wollen. Das passiert, weil wir es aus einem Word-Dokument kopiert und eingefügt haben. Wenn Sie jedoch nur Text in diesem Editor eingegeben haben, werden Sie feststellen, dass, wenn ich das Ich Apostroph M mache und die Seite aktualisiere. Dann stellt sich heraus, dass das nicht das geschweifte Apostroph ist, das wir wirklich wollen. Jason Santa Maria hat einen tollen Artikel darüber: „Sei nicht dumm, du schlau“, und es geht darum, sicherzustellen, dass du tatsächlich geschweifte Zitate verwendest und nicht Dinge wie Zoll oder Füße beschreiben. Wie stellen wir sicher, dass das passiert? Nun, wir können auf unsere HTML-Entitäten zurückgehen, die wir kennen. Es gibt tatsächlich eine HTML-Entität dafür und es ist ' und das steht für rechts-Single-Zitat. Also, wenn wir in diese HTML-Entität fallen, werden Sie sehen, dass es jetzt auf das rechte geschweifte Zitat korrigiert wird. Als Nächstes wollen wir dieses große Bild einschließen, das wir beschrieben haben. In diesem Fall ist Jon noch nicht sicher, was er dort hinstellen will. Wir wissen, dass wir das Bild-Tag mit der Quelle und allen Attributen benötigen. Aber was wird der Wert in unserer Quelle sein? Nun, wir sind uns noch nicht sicher, also was tun wir nicht sicher? Nun, denken Sie daran, dass wir über Lorem Ipsum Text gesprochen haben und dass es Lorem Ipsum Generatoren gibt, die wir verwenden können. Es gibt auch im Grunde das Äquivalent für Lorem Ipsum von Bildern. Mein Favorit ist, placekitten.com. Hier ist placekitten und was Sie tun, ist, dass Sie diese URL, die hier aufgeführt ist, zu greifen , placekitten.com/200/300. Wir werden es kopieren, und wir werden das in unseren Quellwert fallen lassen. Die 200 und 300 stehen für Breite und Höhe, so dass Sie diese an die gewünschte Größe anpassen können. Hier zeigen wir 200 Pixel breit und 300 Pixel hoch. Wir wollen, dass dies eher ein vertikales Bild ist, lassen Sie uns das auf eine 1000 für die Breite wechseln und es wurde aktualisiert, oh, schau, es gibt ein kleines Katzengesicht. Sie können dies irgendwie an das anpassen, was Sie suchen, und es setzt im Grunde nur einen Platzhalter für ein Kätzchenbild für Sie. Da gehen wir, Wenn Katzen nicht Ihr Ding sind, gibt es eine Menge anderer Dienste da draußen auch, die Sie verwenden können. Einer von ihnen ist, nicenice.jpg, der Vanilla Ice Platzhalterdienst, oder sie sind Fill Murray, das Bilder von Bill Murray ist. Sie können auch überprüfen Placebear, wenn Sie Bären mehr als Katzen mögen. Es gibt auch eine einfachere, hier ist die dummyimage.com, und das gibt uns nur ein Bild mit den Dimensionen oben geschrieben. Dies könnte ein wenig klassischer für einige Dinge sein, die Sie suchen, vielleicht nicht so viel Spaß, aber wahrscheinlich eher richtig auf den Punkt, vielleicht besser für Kundenleistungen, abhängig von Ihrem Kunden. Also, lassen Sie uns das hier anpassen. So 900 mal 300, und dann die 0001 und fff stehen für die Farben, so 000 steht für Schwarz und der fff ist weiß für den Text, der oben sitzt. Also, da gehen wir, gerade jetzt haben wir unser H1, wir haben unser Heldenbild. Wir sind uns nicht genau sicher, worauf es sein wird. Also für den Moment verwenden wir nur dieses Platzhalterbild. Bild setzen wir mit einem absoluten Dateipfad. Als Nächstes wollen wir ein paar Informationen über Jons Web-Comics einbringen. Wir wollen ein bisschen eine Beschreibung, um sicherzustellen, dass sie wissen, dass Jon tatsächlich Web-Comics schreibt. Also, Web-Comics, wenn wir an unsere Gliederung zurückdenken, ist die zweite Ebene Überschrift, unter der Jon Arbuckle selbstständig arbeiten, also lasst uns eine andere Überschrift machen, diesmal ein H2 und es auf Web Comics setzen, dann werden wir möchten, dass Beschreibungstext, über die wir in einem Absatz-Tag gesprochen haben, hinzufügen. Für den Absatz werden wir hier nur einen ziemlich einfachen Text schreiben. Wir können immer zurückgehen und uns anpassen. Diesmal, werden wir sagen, folgen zusammen mit Jons Essabenteuer drüben in den Lasagne Chronicles. Allein dieser Text tut viel Gutes. Wir wollen, dass die Leute tatsächlich mehr lernen. Also, lassen Sie uns sicher sein, einen Link hier hinzuzufügen. Der Link wird zu unserer Arbeitsseite gehen. Wir setzen das ein wenig später ein und wir werden den verlinkten Text etwas beschreibendes sagen lassen, denn denken Sie daran, dass wir wollen, dass die Leute wissen, wohin sie gehen werden, und deshalb lassen wir sie einfach sagen, Jons Comics sehen. Wir wollen auch über Jons sehr prominente Musikkarriere sprechen. Also, lassen Sie uns in eine andere Überschrift setzen, denn das wird unter dem leben, was er tut, und das wird in H2 mit dem Text der Musik sein. Wenn wir auf unseren Umriss zurückverweisen, können wir sehen, dass wir über seine beliebten CDs zum Verkauf sprechen und ein Bild davon enthalten wollten . Fügen wir also unser Bild-Tag mit unserem Quellattribut und unserem Alt-Attribut hinzu, und lassen Sie uns herausfinden, welches Bild wir wollen. Nun, wir werden wollen, dass dieses pokeaholic.jpg Bild erscheint. Denken Sie daran, da wir auf ein Bild innerhalb unserer eigenen Website verlinken, werden wir eine relative URL anstelle eines absoluten Pfades verwenden. Also gehen wir in den Bild-Ordner. Also, wir tun das, indem wir img eingeben, weil es auf der gleichen Ebene wie unsere index.html ist. Dann, um innerhalb des Ordners zu gehen, werden wir Schrägstrich schreiben, und dann werden wir den Dateinamen eingeben, der polkaholic.jpg ist. Für alle, die das nicht sehen können, wollen wir sicherstellen, dass wir alternativen Text zur Verfügung stellen, damit wir dort etwas wie Polkaholic schreiben können. Wir werden das in diesem Beispiel eigentlich nicht brauchen und hier ist der Grund. In der folgenden Überschrift, unsere H3-Überschrift, weil sie unter unserer Musikumrisse verschachtelt ist, werden wir Polkaholic schreiben. Also, wenn wir eigentlich Alt-Text setzen würden, würde es sagen, polkaholic, polkaholic. Also, lassen Sie uns einfach den Text innerhalb des H3 behalten. Nun, da die Leute wissen, dass es eine CD , werden sie sie natürlich kaufen wollen. Also, lassen Sie uns einen Link auf die CD auf Amazon.com setzen. Also, wir setzen unseren Ankertext auf die CD, und vergessen Sie nicht, Ihre href auf die URL zu setzen, die Sie gehen möchten. Als nächstes wollen wir versuchen, Jons Social Media in Gang zu bringen. Stellen wir sicher, dass die Leute wissen, dass er auf Twitter ist und dass sie ihm dort folgen können. Das wird eine weitere Überschrift Ebene zwei sein, weil es unter unserer Überschrift der obersten Ebene verschachtelt ist. Also, da wir h2 Jon auf Twitter sind, werden wir hier einen Absatztext einfügen, der hoffentlich Leute dazu bringt, mit Jons neuesten Musik und Illustrationen mithalten zu wollen. Dann werden wir einen Link zu Jons Twitter-Seite haben. Also, so etwas wie twitter.com/jonarbs. Ich weiß nicht, ob das ein echter Twitter-Account ist. Wenn es so ist, hoffe ich, dass es gut ist. Dann werden wir die @jonarbs für den Linktext setzen , da dies den Leuten anzeigt, dass dies das Twitter-Profil ist, mit dem wir sie verknüpfen. Als Nächstes wollen wir das Kunden-Testimonial einschließen. Also, Dr. Liz Wilson war nett genug, um nette Worte über Jon zu schreiben. Also, wir werden das einbeziehen wollen, und wie schließen wir die Zitate ein? Mit dem blockquote-Element. Also, wir werden hier blockquote tippen. Ich werde das nach oben ziehen, damit du es ein bisschen mehr sehen kannst. Wir öffnen und schließen unsere Tags, und dort werden wir diesen Text innerhalb eines Absatz-Tags einfügen. Wir wollen das „von wem es ist“ in den nächsten Zeilen, also werden wir tatsächlich zwei Absätze innerhalb dieses Block-Zitats machen. Also, der erste Absatz ist der eigentliche Text und der zweite Absatz ist, wer es gesagt hat. Denken Sie daran, wir haben früher über die geschweiften Zitate gesprochen. Gehen wir also zurück und stellen Sie sicher, dass wir diese aufräumen, indem wir die richtigen HTML-Entitäten hinzufügen, damit sie korrekt angezeigt werden. Hier haben wir ein doppeltes Anführungszeichen, das dem einfachen Anführungszeichen sehr ähnlich ist. Wir werden diese Entität nur ein bisschen umschalten. Also, anstatt zu sagen, schreibe einfaches Anführungszeichen, wir wollen hier ist kaufmännisches Und-Zeichen, und dann L für Links, D für Double, und dann das Quo wieder für Zitat. Also, ldquo bleibt doppeltes Anführungszeichen. Dann, für das schließende Zitat, brauchen wir rdquo für das richtige doppelte Anführungszeichen. Wir werden diesen rsquo für hier kopieren wollen , um sicherzustellen, dass alle korrekt angezeigt werden, und dann gibt es tatsächlich eine weitere Entität, die wir auf dieser Seite haben. Das sollte ein Bindestrich sein. Es gibt einige interessante Lektüre auf em Bindestriche Verse und was sie zu verwenden, wenn Sie mehr darüber erfahren möchten. Aber jetzt machen wir dies einfach zu einem mdash, so dass am &mdash mit einem Semikolon, und jetzt ist unser Block Zitat gesetzt. Nachdem die Leute dieses Blockzitat gelesen haben, werden sie wahrscheinlich Jon einstellen wollen, richtig? Also, lassen Sie uns sicherstellen, dass einige Absatztext in setzen, um Leute dazu zu bringen, Jon für Haustier-Porträt-Bedürfnisse zu engagieren, und jetzt wollen wir, dass „in Kontakt Text“, einen Link, um tatsächlich auf die Kontaktseite unserer Website zu gehen. Also, wir werden es mit dem Anker-Tag umschließen, aber die href später setzen , sobald wir tatsächlich eine Kontaktseite haben, mit der wir es verknüpfen können. Als Nächstes wollen wir unsere Fußzeileninformationen. Für unsere Fußzeile werden wir nur ein wenig Copyright-Text haben. Also, so etwas wie alle Inhalte Copyright Jon A. 2014 und schließen Sie dann den Absatz. Vielleicht möchten wir die Copyright-Entität hinzufügen, damit wir dies tun können, indem wir © schreiben und unsere Fußzeileninhalte gesetzt sind. Das letzte, was wir brauchen, ist, dass Header-Inhalt, die ein Logo enthält , das wird ein Bild und dann eine Reihe von Website-Navigation so, eine Liste von Links zu anderen Seiten in unserer Website. Lassen Sie uns hier nach oben gehen, und hier werde ich anfangen, meine HTML-Kommentare hinzuzufügen. Also, hier sind meine Header-Informationen. Ich werde das nur markieren. Das ist Seiteninhalt hier drüben, also werde ich das markieren. Wieder, wenn ich später auf diese Seite zurückkomme, wird es mir leichter machen, die Informationen zu finden, die ich suche und mich daran zu erinnern, wo all dieser Inhalt ist. Also, hier sind meine Fußzeileninformationen darunter. Es ist nur ein Werkzeug, um die Dinge organisiert zu halten. Also, zurück zu unserem Header, wir wissen, dass wir die Logos wollen, die Bild sein werden. Also, wir tun img Quelle gleich, und dann unser Logo befindet sich in unserem Bild-Ordner. Also, wir werden sagen, gehen Sie in den Bild-Ordner, also wieder das ist img, Schrägstrich, um hinein zu gehen, logo.png. Dann wollen wir den gesamten Text hier einstellen und der gesamte Text wird Jon Arbuckle sein , weil das der Text ist, der in unserem Logo erscheint. Wir wollen, dass die Leute wissen, dass es das ist, was es sagt, nur für den Fall, dass sie das nicht sehen. Als nächstes benötigen wir diese Liste von Links, um zu den drei anderen Seiten auf unserer Website zu gelangen , weil wir immer wollen, dass die Leute in der Lage sein, zur Arbeit, zur About und zur Kontaktseite zu gelangen . Also, etwas, das ich manchmal gerne mache, um herauszufinden , wie ich Dinge in HTML markieren möchte, ist es irgendwie laut auszusprechen. Also, ich weiß, dass dies Links sind und ich sage, hier sind drei Links, die wir haben. Wenn ich das Wort Link sage, weiß ich, dass ich einen Anker-Tag brauche. Das ist cool. Was habe ich aber noch gesagt? Ich sagte, wir brauchen eine Liste von Links. Oh, Listen, also klingen die vertraut. Wenn wir über die Liste der Navigation sprechen, ist das eigentlich eine andere ungeordnete Liste. Also, wir können das Markieren unserer Liste der Links ist mit ungeordneter Liste. Also werden wir das tun, indem wir ul eingeben. Wir werden das schließen und dann wollen wir, dass diese Links innerhalb unserer ul leben, aber was brauchen wir innerhalb einer ul, wir brauchen unsere li Elemente, um jedes Element darzustellen. Wir wissen, dass wir drei Seiten haben, also brauchen wir hier drei Links. Dann innerhalb all dieser Listenelemente gibt es das Link-Tag, das auf die Seite der Website verweist. Also, der erste wird unsere Arbeitsseite sein, unser zweiter Link wird zu unserer Über Seite gehen, und unser letzter Link wird zu unserer Kontaktseite gehen. Natürlich haben wir diese noch nicht erstellt, also gehen wir zurück und füllen diese href-Werte aus, sobald diese Seiten erstellt wurden. Lassen Sie uns das eine Auffrischung geben. Hey, wir haben eine Menge Inhalte gehört, die hier vor sich gehen. Wir haben unser Logo, wir haben unsere Liste von Links, wir haben unsere h1, die besagt, wer diese Seite ist und worum es geht, wir haben ein Platzhalterbild, das unser Heldenbild sein wird, das greifen wird Besucher Aufmerksamkeit, wir haben eine Reihe von h2s, Sub-Inhalte für unter unserem Haupt-Header. Also, wir haben Comics, wir haben einen Absatz, wir haben einen Link, um Jons Comics zu sehen, wir haben ein h2 von Musik, wir haben ein anderes Bild-Tag mit einer relativen URL, wir haben ein h3, weil das eine Überschrift ist, die unter Musik verschachtelt ist, wir haben einen Link, um die CD auf einer anderen Website zu kaufen, wir gehen zurück zu unserem h2, weil Jon auf Twitter auf der gleichen Ebene wie unsere anderen Kategorien ist, wir haben einen Absatz, um das zu beschreiben und einen Link, wir haben unser Block Zitat mit zwei Absätze darin. Wir verwenden auch HTML-Entitäten, um sicherzustellen, dass unsere Curlicues schön aussehen. Wir haben einen zusätzlichen Absatz und innerhalb dessen haben wir unseren Inline-Link, um sich in Verbindung zu setzen , der auf unsere Kontaktseite verweist. Schließlich haben wir unseren Fußzeilenabsatz. Der Fußzeilenabsatz enthält einen Text sowie unsere urheberrechtlich geschützte Einheit. Nun, unsere Homepage ist semantisch und genial und bereit zu gehen. Also, das schließt Lektion drei ein. Wir haben eine neue Seite und index.html erstellt, um unsere Homepage in zu speichern, wir haben neuen Block in Inline-Elementen hinzugefügt, wir folgten unserem Inhalt Out-Zeile, um sicherzustellen, dass alle unsere Inhalte korrekt für unsere HTML markiert wurden, wir folgte auch gute Formatierungspraktiken. Also, stellen Sie sicher, dass Sie sich jetzt die Zeit nehmen, um zurückzugehen und alles zu reparieren , wenn Sie vielleicht ein wenig schnell tippen würden. Es passiert uns allen, aber nehmen Sie sich die Zeit, stellen Sie sicher, dass die Dinge schön und sauber sind, speichern Sie es, stellen Sie sicher, dass es im Browser gut aussieht, und dann in der nächsten Lektion werden wir uns unsere anderen drei Seiten ansehen, und stellen Sie sicher, dass wir alle diese Kopie vom Inhalt zu HTML-Elementen erhalten können. 22. Verbleibende Inhaltstypen als HTML-Elemente identifizieren: Nun, da wir die Homepage unter unserem Gürtel haben, gehen wir zu unseren verbleibenden drei Seiten. Als Nächstes haben wir unsere Arbeitsseite. Hier haben wir die Inhaltsskizze, die wir für unsere Arbeitsseite erstellt haben. Also, lasst uns anfangen, das in Sublime Text zu setzen. Wir werden Sublime Text Backup öffnen, und jetzt haben wir unsere class.html Datei und unsere index.html Datei, aber wir werden eine Seite für unsere Arbeitsseite benötigen. Entweder Rechtsklick oder Steuerelement klicken und tun Neue Datei oder wir können Datei, Neue Datei tun. Hier sind wir mit unserer neuen Datei gesetzt. Jetzt habe ich bereits die Idee erwähnt, etwas Zeit durch Kopieren und Einfügen zu sparen, und das können wir sicherlich mit unserer vorherigen Datei tun. Wenn wir also zurück zu unserer Indexseite für unsere Homepage gehen, ist eines der Dinge, die wir tun können, den Text hier zu ändern, um auf unseren anderen Seiten zu arbeiten. Wir gehen zu Auswahl und dann Alle auswählen. Die Tastenkombination dafür ist Befehl A oder Steuerelement A und jetzt werden Sie feststellen, dass alles hervorgehoben ist. Lassen Sie uns Bearbeiten, Kopieren, und dann gehen wir in unsere neue Datei, die wir noch nichts getan haben, und fügen Sie. Großartig. Also, jetzt wird unser ganzer Code in hier kopiert. Was wir jetzt tun wollen, ist Anpassungen vorzunehmen, so dass es tatsächlich für unsere Arbeitsseite ist. Also zuerst, lassen Sie uns das speichern, damit wir keinen unserer Fortschritte verlieren, und wir werden es work.html nennen. Stellen Sie sicher, dass Sie innerhalb Ihrer jon-arbuckle-site speichern. Sie sollten Ihre Indexierungsklassendatei bereits dort sehen und auf Speichern klicken. Also, jetzt müssen wir die HTML-Datei speichern, aber es hat alle unsere Inhalte von der Homepage. Also, was wissen wir, dass wir auf einer Arbeitsseite brauchen? Nun, wir haben einige Inhalte, die anders sind als unsere Homepage, aber wir haben zwei Dinge, die gleich sind. Das ist der Kopfzeileninhalt und der Fußzeileninhalt. Also, was wir tun werden, ist, Sie werden sehen, dass wir diese handy-dandy Kommentare haben , die uns sagen, dass dies die Kopfzeile ist, hier ist der Seiteninhalt, und hier ist unsere Fußzeile. Also wissen wir tatsächlich, dass wir die Kopf- und Fußzeile behalten möchten, und was wir als Nächstes tun, ist einfach alle Inhalte zu löschen, die in unserem Seiteninhalt enthalten sind. Wählen Sie es aus und löschen Sie es dann. Dann sehen Sie, dass wir unsere Kopfzeileninformationen von der ersten Seite oder Fußzeileninformationen von der ersten Seite haben und jetzt alles, was Sie tun müssen, ist den benutzerdefinierten Inhalt für unsere Seiteninhalte dazwischen zu setzen. Dies ist eine wirklich einfache Möglichkeit, den Rest Ihrer Seiten zu erstellen. Es gibt aber noch etwas, das fehlt, und das ist, wir müssen den Titel aktualisieren. Also, lasst uns das löschen. Nun, was wir hier haben, ist im Wesentlichen die Shell für den Rest unserer Seiten. Lassen Sie uns anfangen, unsere anderen Inhalte zu erstellen. Dies ist die Arbeitsseite, nicht mehr die Homepage, also sagen wir „Arbeit“. Dann lassen wir die Leute immer noch wissen, dass es das Portfolio von Jon Arbuckle ist, also „Work: Das Portfolio von Jon Arbuckle“ oder „Work - Das Portfolio von Jon Arbuckle“. Die Leute werden immer noch wissen, dass wir uns das Portfolio ansehen, aber genau das sind wir auf der Arbeitsseite. Also, unser Titel wurde jetzt aktualisiert. Gehen wir runter zu unseren Seiteninhalt. In unserem Seiteninhalt wollen wir HTML schreiben, das spezifisch für unsere Arbeitsseite ist. wir zurück zu unserer Inhaltsstruktur gehen, haben wir den Seitentitel gemacht, aber wir brauchen auch etwas anderes. Wir brauchen die H1, richtig? Also, lassen Sie uns h1 tun, und die Überschrift dieser Seite wird auch „Arbeit“ genannt. Als Nächstes wollen wir über die Web-Comics sprechen, die Jon hat. Also, wenn wir uns an unsere Überschriften erinnern, sagten wir, dass dies unser h1 war, was bedeutet, dass Web-Comics in h2 sein werden. Wir sehen, dass es einige andere Dinge auf der gleichen Ebene wie Web-Comics unter unserer Arbeit gibt, richtig? Also, Portraits und Musik werden auf dem gleichen Niveau sein, also werden diese auch h2s sein. Dann haben wir innerhalb von Web-Comics zwei verschiedene Arten von Comics mit Informationen darunter, also lasst uns diese h3s machen. Wir haben auch einen Titel einer CD, also werden wir das auch in h3 machen, weil es die Überschrift für die anderen Informationen über die CD ist. Also, gehen wir zurück zu Sublime Text, und wir werden mit unserem Web Comics Bereich arbeiten. Also, wir haben unsere zweite Level-Überschrift, die h2, und das heißt „Web Comics“. Dann werden die h3s der Titel der Comics sein, also der erste ist die „Lasagne Chronicles“. Wir wollen auch ein Bild der Lasagna Chroniken und einen Link zu einer externen Seite dafür haben. Also, lassen Sie uns das Bild hier einschließen, also img src gleich und das Bild für Lasagna Chronicles ist wieder in unserem Image-Ordner, lasagna-chronicles.jpg. Gehen Sie in unseren Image-Ordner. Um in sie zu gehen, die /lasagna-chronicles.jpg. Dann wollen wir Leute verlinken, um zur Offsite-URL für den Lasagna Chronicles Web Comic zu gehen , also machen wir ein Anker-Tag. Sagen wir einfach, dass das bei so etwas wie lasagnachronicles.com lebt. Wir wollen einen Call-to-Action-Text, der beschreibt, wohin die Menschen gehen, also so etwas wie: „Lesen Sie die Lasagne Chroniken“. Dann folgen wir dem gleichen Format für den nächsten Web Comic, der Cat Town ist. Also, h3, Katzenstadt. Bewegen Sie das einfach etwas runter, damit wir etwas besser sehen können. Wir werden unser Image-Tag wieder haben, also img src gleich „img/cat-town.jpg“ ist. Ich habe den Alt-Text vergessen, also stellen wir sicher, dass wir das Alt haben, das leer sein wird. Dann wieder, wir wollen den Link auf die Website, so vielleicht cattowncomic.biz, Lesen Cat Town. Ok. Also, jetzt ist unsere Web Comics gesetzt. Der nächste Abschnitt unter Jons Arbeit sind seine Porträts. Also, das geht in die Überschrift der zweiten Ebene, weil es unter Arbeit verschachtelt ist, also Portraits. Dann werden wir für die Portraits nur zwei Bilder haben, eines von einer Katze und eines von einem Hund, damit die Leute wissen, dass Porträts verfügbar sind. Also, wir werden das Bild-Tag wieder machen, also img src gleich, und wir werden den Alt-Text haben, und wir sagen cat portrait, cat-portrait.jpg, aber etwas ist schon falsch hier, richtig? Als ich gerade cat-portrait.jpg gemacht habe, wird es darauf auf der gleichen Ebene suchen. Also denken Sie daran, wir müssen in unseren Bilderordner gehen, also image/. Dann kann ich das einfach kopieren und einfügen, wenn ich möchte, also Bearbeiten, Kopieren, Bearbeiten, Einfügen. Ich kann das aktualisieren, damit es nur „Hundeporträt“ sagt. Es ist eine nette Abkürzung, damit wir nicht alles eingeben müssen. Also, jetzt haben wir unsere Porträts hier drauf. Der nächste Abschnitt unserer Inhaltsskizze war unsere Musik. Also, lassen Sie uns ein weiteres h2 hinzufügen, weil es auf dem gleichen Niveau wie Portraits und Web Comics ist. Sie sind alle unter der Arbeit genauso wichtig. Also, Musik, h2 und der Name der CD ist „The Best of Jonny Arbs“, so dass wird eine weitere Überschrift. Dies ist eine weitere Überschrift, denn wenn der Fall, dass Jon mehr Musik schreibt hat er eine lange Liste von verschiedenen CDs, die er hatte und die Beschreibung von ihnen, so dass er am Ende mehr h3s haben könnte, sobald er uns mit mehr seiner Polka-Genie. Also, wir haben das Beste von Jonny Arbs. Wir wollen das Image der CD und den Link auf Amazon kaufen. Also wieder, wir werden unser Image-Tag verwenden, und das ist die Polkaholic CD, also img/polkaholic.jpg. Der Alt hier wird Polkaholic sein. Wir haben auch vergessen, unseren alt-Text hier drüben zu setzen, also sagen wir etwas wie „Portrait einer Katze“ und „Portrait eines Hundes“. Ok. Entschuldigung, zurück zu unserer Musik, und dann wieder unseren Link zu Amazon. Also, a href=“ http://amazon.com/polkaholic“. Da drin werden wir sagen: „Kaufen Sie diese CD.“ Das wird der Linktext sein, den die Leute sehen werden und wenn sie „Buy this CD“ sehen, können sie darauf klicken und dieses musikalische Genie bekommen. Also, das ist es für unsere Arbeitsseite, und Sie können sehen, dass es mit unseren weiteren Inhalten, die wir bereits hatten, als wir kopiert und eingefügt. Also, lassen Sie uns diese Datei speichern und sehen, wie sie in unserem Browser aussieht. Hier ist unsere Arbeitsseite. Also wieder, wir haben unser Logo und unsere Navigationslinks, dann haben wir unseren Arbeitstitel. Wir haben die Web-Comic-Sektion und zuerst lernen wir ein wenig über die Lasagna Chroniken zusammen mit dem Link, um die Lasagne Chronicles zu lesen. Wir haben Cat Town mit unserem Bild von der Cat Town und unserem Link, um Cat Town zu lesen. Wir haben die Porträts Abschnitt, so dass wir sehen können, dass wir das Katzenporträt und das Hundeporträt haben , damit wir wissen können, dass diese verfügbar sind und Teil von Jons Arbeit. Wir haben den Musikbereich mit The Best of Jonny Arbs darunter und das ist die Polkaholic CD und der Link, um die CD auf Amazon zu kaufen. Dann enden wir mit unserem Fußzeileninhalt. Also, jetzt, da unsere Arbeitsseite fertig ist, lassen Sie uns voran und machen unsere About Seite. Wir werden „Datei“, „Neue Datei“ und wieder, wir können kopieren und einfügen aus unseren anderen Projekten wenn wir wollen, oder wir können Dinge eingeben, so können wir doctype html sagen und dann brauchen wir unser HTML-Element mit unserem „lang“ -Attribut. Wir schließen das, unser „Kopf“ -Element, um unsere Metadaten zu halten, unser „Körper“ -Element, um unsere Kopie für die Seite zu halten. Wir benötigen die Meta-Elemente, um es als utf-8 zu definieren. Wir brauchen ein Titel-Tag für unsere Seite, in diesem Fall sagen wir „Über“ und dann wollen wir mit der Syntax halten, die wir für die anderen Titel verwenden , also sagen wir „Das Portfolio von Jon Arbuckle“ und wir werden das da drin. Ich werde meine Datei speichern und wir werden speichern, es ist about.html und das Speichern wird mir diese Farbsyntax wieder erhalten , damit ich sicherstellen kann, dass ich die Dinge richtig tippe. Jetzt gehen wir in unsere Körperabteilung. Also, denken Sie daran, wir werden unseren Header-Inhalt haben wollen. Ich kann all das von hier aus greifen und sagen „Bearbeiten“, „Kopieren“, „Bearbeiten“, „Einfügen“, die Informationen zum Seiteninhalt, und ich möchte mit der Fußzeile beenden, die ich auch von dieser anderen Seite kopieren und einfügen werde, um sicherzustellen, dass es das gleiche. Alles Set. Lassen Sie uns nun unsere About Inhalte hinzufügen. Zurück zu unserer Inhaltsstruktur haben wir bereits unsere Kopfzeileninhalte und unsere Fußzeileninhalte erstellt. Wir haben den Seitentitel aktualisiert, aber jetzt machen wir es auch zum h1 der Seite. Also, <h1> Über. Vielleicht willst du „Über Jon“ sagen. Dann wollen wir ein Bild von Jon, ein paar Absätze beschreiben Jon, und einige seiner Fähigkeiten und professionellen Dienstleistungen, die in einer Liste angeboten werden. Wir haben das Bild von Jon mit unserem IMG-Tag. Wir werden das mit der Datei arbuckle-bio.jpg tun, also img/arbuckle-bio.jpg, dann werden wir einige Absätze über Jon haben. Ich bin mir nicht wirklich sicher, was das sein wird, also jetzt werde ich nur den Lorem Ipsum Generator benutzen. Sie werden sich erinnern, dass ich das tun kann, indem ich nur nach Lorem ipsum Generator suche und ich werde nur von hier greifen, die das Lipsum ist und sie sagen, fünf Absätze erzeugen, das ist eine Menge, ich werde nur zwei Absätze machen. Dann werde ich all dies auswählen, „Bearbeiten“, „Kopieren“, komme zurück zu meinem Sublime Text und „Bearbeiten“, „Einfügen“. Das ist eine Menge Text. Lassen Sie uns dies einrücken, so dass es mit der Einrückung des restlichen Dokuments übereinstimmt. Fügen wir dann die Absatz-Tags um diese Kopie hinzu. Also, Öffnen Sie p Tag und dann werden wir das p Tag schließen. Dasselbe hier unten, in der Nähe. Danach werden wir die Liste der Dinge haben, die Jon für seine Dienste anbietet. Vielleicht möchten wir eine Überschrift für diese Liste hinzufügen , denn wenn wir gerade anfangen, die Listenelemente herunterzulegen, wissen die Leute vielleicht nicht, was diese Liste ist. Also, lassen Sie uns eine Überschrift hinzufügen. Moment sind wir bei einem h1 und wir hatten noch kein h2 auf der Seite, also lasst uns h2 machen und dann „Professional Services“ sagen und die h2 schließen. Nun, in diesem Fall sind Jons Listenelemente für seine Liste der Dienste grundsätzlich nicht übereinander geordnet, so dass wir eine ungeordnete Liste verwenden können. Also, öffnen Sie unsere ul und dann sicher sein, es zu schließen und dann denken Sie daran, wir unsere Listenelemente brauchen. Vielleicht so etwas wie „Drawing“, „Illustrationen“, „Aquarelle“, „Hochzeiten“, für seine Band, wenn sie Hochzeiten spielen wollen oder vielleicht macht er dort auch Karikaturen. Hier sind einige Beispiele für die professionellen Dienstleistungen, die er anbietet. Wenn Sie einige weitere Listenelemente hinzufügen möchten, können Sie sicherlich so viele hinzufügen, wie Sie möchten, so fühlen Sie sich frei, das zu tun. „ Tanzunterricht“, „Sudoku Beratung“. Das sind die professionellen Dienste von Tom und das ist alles auf unserer About Seite. Also, lassen Sie es uns speichern und sehen, wie es aussieht. Jetzt sehen wir unsere About Seite. Also, wieder, wir haben unsere Header, aber jetzt haben wir unsere h1 ist Über Jon. Wir haben dieses Bild von Jon, das glücklich und einladend aussieht. Dieser Platzhaltertext wird jetzt für seine Bio sein. So etwas wie „Hi, ich bin Jon. Ich arbeite seit 1965 in Illustration. Ich liebe es, Porträts von Tieren zu machen und ich spiele gerne mein Akkordeon mit meinem Polka Lied“, et cetera. Das ganze Exemplar könnte hier reingehen. Dann haben wir eine Überschrift, unsere Professional Services ist in h2 und diese Überschrift ist für diese ungeordnete Liste hier, viele von ihnen muss ich tippen. Aber diese Überschrift ist für hier und wir haben eine ungeordnete Liste mit sechs Listenelementen darin. Denken Sie daran, dass wir unseren Inspektor immer nutzen können, um zu sehen, wie die Dinge sind. Werfen wir einen Blick auf das. Wir können sehen, dass dies ein Bild ist, dass wir eine ungeordnete Liste haben. Ich kann das öffnen und jedes von ihnen als Listenelement sehen. Dann haben wir in Sichtweite eine Ankerverbindung. Hier ist unser h1 für Über Jon. Nach unten bewegt, hier ist unser Bild und es hebt hervor, wenn ich darüber schwebe. Hier ist ein Absatz. Ich kann sagen: „Ich frage mich, was das ist.“ Denken Sie daran, wir können direkt darauf klicken, Inspect Element, und wir können sehen, dass diese „Li"s innerhalb der ul, die wir geschrieben. Absatz, das Ende unseres Körpers und das Ende unseres HTML. Dies sind einige der Möglichkeiten, wie Sie den Inspektor verwenden möchten, um zu sehen, wie sich die Dinge auf einer Seite auf Ihrer Website oder auf den Websites anderer Personen befinden. Wir haben noch eine Seite zu gehen und das ist unsere Kontaktseite. Machen wir eine neue Akte. „ Datei“, „Neue Datei“. Wir würden anfangen, das von Anfang an zu speichern, sobald wir es öffnen. Wir können contact.html sagen, stellen Sie sicher, dass wir es an der richtigen Stelle speichern. Ich werde die About Seite als Modell dafür verwenden also gehe ich zu „Auswahl“, „Alles auswählen“. Ich werde das kopieren und ich werde es einfügen. Denken Sie daran, ich möchte die Dinge innerhalb des Seiteninhalts bis zur Fußzeile aktualisieren , damit ich meinen Cursor dorthin setzen und dann, wenn ich die Umschalttaste gedrückt halte, werde ich hier unten auswählen , der den Text zwischen diesen beiden Stellen auswählt, und dann werde ich einfach auf Löschen klicken. Ich möchte auch unser Titel-Tag aktualisieren. Anstatt „Über Jon“ zu sagen, sagen wir „Kontaktieren Sie Jon“. Als Nächstes wollen wir die Kontaktinformationen hier abgeben. Für Jons Kontaktseite werden wir unsere h1 als seinen Kontakt, Jons E-Mail-Adresse und eine Liste von Links zu seiner Social-Media-Präsenz haben. Dies wird eine ziemlich einfache Seite sein. Wir haben unser h1, das sagt: „Kontaktieren Sie Jon.“ Dann lassen Sie uns ein wenig Absatztext haben, um zu beschreiben, was Sie tun. Etwas wie: „Jon wird es lieben, von dir zu hören.“ Senden Sie ihm eine E-Mail an jon@jonarbs.com. Nun, für die jon@jonarbs.com, wollen wir eigentlich, dass Sie in der Lage sein, klicken, um eine E-Mail zu senden, ich bin sicher, dass Sie das im Internet schon vorher gesehen haben. Wie machen wir das? Wie machen wir andere Dinge, wenn wir darauf klicken müssen? Wir verwenden eine Ankerverbindung. Setzen wir einen Ankerlink um das herum. Also, a href= "“, das ist unser Link-Text. Schließen wir den Anker. Öffnen Sie das, um das zu sehen. Um einen E-Mail-Link zu erstellen, anstatt auf eine Website zu verlinken , schreiben wir „mailto:“ und dann die E-Mail-Adresse, wohin der der Link gehen soll. Dies wird eine E-Mail an jon@jonarbs.com senden. Wenn Sie feststellen, dass Sie eine Menge Spam von jemandem wie diesem auf Ihrer Website bekommen, möchten Sie vielleicht in etwas wie woohoo.com suchen, das Kontaktformulare und auch nur Validierung für Sie bietet , um zu versuchen, Spamming zu verhindern. Aber jetzt lassen Sie es uns so behalten. Dann wollen wir auch die Links von Jon auf Social Media haben. Also, lassen Sie uns eine andere Überschrift machen, weil wir eine Liste von Links machen und wir wollen, dass die Leute wissen, was diese Liste ist. Wir werden sagen „Anderswo auf den Interwebs“, und das wird Links zu Jon an anderer Stelle auf den Interwebs sein. Also, wir werden diese ungeordnete Liste wieder verwenden. Wir werden einen Listeneintrag haben und wir werden einen Link zu Jon an anderer Stelle haben. Also, dies wird auf seine Twitter-Seite gehen, twitter.com/jonarbs, und lassen Sie uns in einem abschließenden Zitat hier bei jonarbs. Vielleicht hat Jon auch eine Facebook-Seite, also holen wir ihm einen Facebook-Link, /jonarbs. Vielleicht werden wir so etwas wie Jons sagen, lassen Sie uns eine Entität dort verwenden, also rsquo für richtige Singles Zitat, Jons Facebook-Fan-Seite. Schließen Sie den Link und denken Sie dann auch daran, das Li zu schließen. Dann ist Jon vielleicht auch auf Pinterest, weil er gerne sein Kunstwerk anheftet. Also, wir sagen pinterest.com/jonarbs, also Jon auf Pinterest, und schließen Sie dann das Listenelement. So gibt es seine Links zu sozialen Medien anderswo auf den Interwebs. Lassen Sie uns dies speichern und dann sehen, wie unsere Kontaktseite aussieht. Da ist es, kurz und süß, aber genau das, was die Leute auf einer Kontaktseite brauchen. Also, wir haben unsere Kopfzeile wieder, unsere h1, um Jon zu kontaktieren, ein wenig Absatztext mit unserem Inline-Link, der auf seine E-Mail-Adresse zeigt, werden Sie sehen „mailto jon@jonarbs.com“. Wenn ich darauf klicke, werden Sie sehen, dass mein Mail-Programm geöffnet wird. Ich benutze keine E-Mails sehr oft auf diesem Computer, also stornieren Sie das. Dann haben wir an anderer Stelle auf den Interwebs, die in dieser Inhaltsskizze unter Contact Jon leben, und wir haben seine Twitter, sein Facebook und seine Pinterest-Seite. Dann enden wir mit unserer Fußzeile. Also, da haben Sie es, den HTML für vier Seiten unseres Portfolios. Wir sehen im Moment ziemlich gut aus, aber wir können tatsächlich von einer Seite zur anderen gelangen , ohne die Datei separat zu öffnen. Also, im nächsten Video, werden wir darüber sprechen, wie Sie die Seiten miteinander verknüpfen. 23. Separate Seiten miteinander verlinken.: Also, jetzt haben wir alle vier unserer Seiten, aber keine Möglichkeit, von einer Seite zur anderen zu gelangen. Wir wollen also wieder in unsere Navigation gehen und den entsprechenden Wert dafür hinzufügen, wohin diese Textlinks gehen sollen. Also, fangen wir an, wo wir zuletzt aufgehört haben, was mit unserer Kontaktseite war. Um auf unserer Kontaktseite zu unserer Arbeitsseite zu gelangen, müssen wir in der Lage sein, die Datei work.html zu finden. Unsere href-Werte folgen also der gleichen Logik wie unsere Bildquellen. Wir können entweder einen absoluten oder relativen Wert setzen. Also, hier unten, wenn wir auf Twitter verlinken, ist das ein absoluter Weg zum John Arbs Twitter-Account auf twitter.com. Wir haben das Gleiche gesehen, als wir Bilder gemacht haben. Sie beginnen mit dem HTTP und dann machen sie die vollständige Adresse, wo sich die Datei oder der Link befindet. In diesem Fall wollen wir relative URLs verwenden , da wir auf eine Seite innerhalb unserer eigenen Website gehen. Also, genau wie wir auf ein Bild verlinken würden, werden wir auf die Datei the.html verlinken, in diesem Fall für eine Verknüpfung mit der Datei work.html. Da die Kontaktseite auf den gleichen Ebenen Arbeit ist, müssen wir nicht auf eine Ebene oder in einen Ordner gehen. Es ist auf der gleichen. Im Gegensatz dazu, in etwas wie pages/work.html zu gehen, sind wir auf der gleichen Ebene, so dass wir einfach zu work.html gehen können. Dasselbe für about.html und contact.html. Lasst uns das retten. Nun, wenn wir unsere Kontaktseite wieder nach oben bringen, werden Sie sehen, dass die Arbeit über in Kontakt jetzt verlinkt ist und wir können das aus den Unterstreichungen und der Farbe sagen. Also, wenn wir auf die Arbeitsseite gehen wollen, können wir auf „Arbeit“ klicken, wenn wir auf die About Seite gehen wollen , haben wir ein Problem, das wir nicht in den Text für diese noch hinzugefügt haben. Lassen Sie uns einfach den „Zurück“ -Button gerade jetzt und von der Kontaktseite, wo wir die richtigen Links hinzugefügt haben, und wir werden auf „Über“ klicken und das bringt uns auf die über Seite. Natürlich waren sie schon auf der Kontaktseite. Also, das ist alles bereit. Also, Arbeit und Kontakt sind jetzt in, aber wir vermissen eine andere Seite. Richtig? Was ist mit der Homepage. Manchmal wollen die Leute vielleicht wieder dorthin zurückkehren, wo sie angefangen haben. Wir haben zwei Optionen hier eine, wir könnten einen weiteren Link in unserer Liste der Links für zu Hause hinzufügen. Die andere Option, die Sie oft sehen werden, ist, das Logo zu einem Link zur Homepage zu machen. Also, lassen Sie uns das stattdessen tun. Wir gehen zurück zu unserer Kontaktseite und wir wollen im Wesentlichen dieses Bild zu einem Link machen. Denken Sie daran, dass es manchmal einfach ist, wenn wir laut sagen, was wir versuchen zu tun. Also, ich möchte das Bild zu einem Link machen, genau wie jeder andere Link, wo wir Text darin setzen können wir auch ein Bild innerhalb eines Anker-Tags setzen. Also, wir werden dieses Bild umgeben, das als Link für die Homepage fungiert, die wir mit einem Anker-Tag umgeben werden. Also, ein href gleich umschließen, dass wir es jetzt am Ende schließen und jetzt macht dies dieses Bild Link und wohin wollen wir das gehen? Zur Homepage und was ist unsere Homepage? Index.html. Also, genau hier drüben werden wir zu diesem Link speichern, gehen Sie zurück zu unserem Browser und jetzt werden Sie sehen, wenn ich über diesen Mauszeiger ändert sich zu diesem Zeiger, der darauf hinweist, dass ein Link ist. Also, wenn ich darauf klicke, bin ich wieder auf der Homepage. Wir haben die Homepage noch nicht aktualisiert, so dass Sie sehen, dass dies als Cursor bleibt, weil es noch kein Link aber wenn wir zurück gehen, hat unsere Kontaktseite jetzt alle richtigen Links. Also, was können wir tun? Nun, wir können einfach unseren gesamten Header-Abschnitt kopieren und ihn auf allen unseren Seiten ersetzen. Also, bearbeiten Sie Einfügen. Das ist eine unsere über Seite, lassen Sie uns das speichern. Lassen Sie uns zu unserer Arbeitsseite gehen und dasselbe tun, ersetzen Sie diesen ganzen Header-Abschnitt. Sie können sehen, wie einfach es ist, das zu finden, wonach wir suchen, aufgrund unserer HTML-Kommentare. Speichern Sie das, gehen Sie zurück auf unsere Homepage und nur um ein weiteres Mal zu überprüfen denken, dass wir einen Anker um unser Bild gewickelt haben, weil wir das zu einem Link machen können. Wir haben das einen Link zu index.html gemacht und dann haben wir in den richtigen relativen Pfaden für diese Seiten hinzugefügt; also, work.html, about.html und contacts.html. Sie können hier sehen, warum die intelligente Benennung wie Arbeit, About und Kontakt für unsere Seiten es wirklich leicht gemacht hat, sich an die Seiten zu erinnern, auf die wir verlinkt haben, ohne etwas in unserer Seitenleiste überprüfen zu müssen. Also, jetzt haben alle unsere Seiten Links. Wir hatten eigentlich noch ein paar mehr, auf dieser Homepage, oder? Siehst du Jons Kommentare? Das geht auf die Seite work.html. Also, lassen Sie uns das speichern, und ich denke, wir sind jetzt alle bereit damit. Oben, nein, noch einen. Denken Sie daran, dass wir Jon einstellen wollen und wir Jon einstellen. Wir werden sie auf die Kontaktseite schicken, um Kontakt aufzunehmen. Also, lasst uns das zu contact.html gehen. Jetzt Datei speichern. In Ordnung. Also, jetzt sind wir auf unserer Kontaktseite, und jetzt schauen. Egal, auf welche Seite ich gehe, wir haben eine vollständig anklickbare Seite. Zurück auf der Homepage können wir hier runter kommen und sagen, dass wir Jons Comics sehen. Ja. Sie können sehen, wenn wir auf die Arbeitsseite gehen, da Jons Comics. Wenn ich auf die Homepage zurückging und wirklich nur mit Jon in Kontakt treten wollte, könnte ich mich auf der Kontaktseite melden, und ich weiß, dass ich ihm eine E-Mail schicken oder ihn im Internet finden kann. Also, jetzt haben wir unsere voll anklickbare vierseitige Portfolio-Website. Wir haben in dieser Lektion viel über unseren HTML auf unseren Seiten gelernt. Wir vervollständigten den Rest unserer Seiten, indem unsere Inhalte auf der Grundlage unserer Inhaltsskizze markieren. Sie können sehen, wie das Erstellen dieser Inhaltsstruktur am Anfang wirklich diktiert, wohin wir gehen. Mit Hilfe der Sitemap und dem Inhalt, den wir eine Richtung hatten, hatten wir ein Ziel. Manchmal kann es wirklich entmutigend sein, wenn man eine neue Datei anstarrt und sagt: „Ich weiß nicht, was ich auf diese Seite setzen soll.“ Wenn Sie dieses Gefühl bekommen, nehmen Sie sich ein Stück Papier, greifen Sie einen Stift, öffnen Sie eine Art Computerprogramm, öffnen Sie TextEdit, öffnen Sie Photoshop, öffnen Sie eine von vielen Dateien, und tippen Sie einfach Informationen, die Sie kennen , die Sie auf Ihrer Website sein möchten. Es ist ein großartiger Ort, um zu starten und dann gibt Ihnen ein Ziel zu erreichen. Wenn Sie anfangen, sich Ihre Inhalte anzusehen, können Sie Websites wie HTML Dog besuchen und herausfinden welche Art von Elementen Sie Ihren Inhalt markieren möchten. also sicher, dass Sie Ihre vier Seiten ausgefüllt haben. Fügen Sie den gesamten Inhalt in hinzu. Wenn Sie Ihre eigenen Inhalte verwenden, stellen Sie sicher, dass Sie diese ebenfalls markieren. Dann schließlich, fügen Sie Links hinzu, so dass es eine vollständig anklickbare Websites ist und niemand jemals in einer Sackgasse innerhalb Ihrer Website stecken bleibt. Wir haben nur noch eine Lektion. Lassen Sie uns einige Dinge wie Fehlerbehebung und nächste Schritte überprüfen. 24. Fehlerbehebung: Im Moment funktioniert alles auf unserer Seite großartig und das ist fantastisch. Ich hasse es, der Träger von schlechten Nachrichten zu sein, aber das wird nicht immer passieren. Sie werden auf Fehler und Straßensperren stoßen und es ist wichtig, einige Möglichkeiten zu decken, das zu beheben. Der erste Weg ist, einen Kumpel zu greifen, manchmal mit separaten Augen auf ein Projekt, das Sie seit einer Weile angestarrt haben, kann wirklich helfen. Tippfehler in HTML-Dokumenten können viele Fehler verursachen und so manchmal ist nur jemand, der über die Schulter schaut und sagt: „Oh schau, du hast vergessen, ein Tag zu schließen“ wirklich hilfreich. Manchmal haben wir das nicht immer und so sehr, wie ich mir wünsche, dass meine Katzen mir helfen würden, Probleme zu beheben, tun sie es nicht. Also, stattdessen müssen wir nach einigen anderen Möglichkeiten suchen, es zu tun, ich gehe zurück zu einem unserer Dokumente, unserer Kontaktseite und ich werde nur etwas tun , wie vergessen Sie, dieses „a“ -Tag zu schließen. Wenn du wirklich schnell tippst, passiert das viel, also ist es definitiv möglich, dass du in so etwas geraten wirst. Ich werde diese Datei speichern und dann werde ich sie erneut in unserem Browser in der Vorschau anzeigen. Wenn ich diese Seite sofort aktualisiere, sehe ich, dass es hier einige kaputte Inhalte gibt. Was ich zuerst tun werde, ist es zu inspizieren und zu sagen: „Hey, was ist das?“ Ich kann hineinbohren und sehen, dass direkt nach dieser Bildquelle dieses kleine Bild auftaucht, das es nicht sein soll. Also, für mich zeigt das, dass das Problem direkt nach unserem Image-Logo kommt, das es mir erlaubt, zurück zu gehen und dann zu sagen, 'Image-Logo' und dann kann ich sagen: „Oh, sieh dir das an, ich habe vergessen, es zu schließen“. Eine andere Möglichkeit, das zu identifizieren, da das Problem durch die Farbsyntaxierung unseres HTML-Editors ist , also, wie wir sehen können, sind alle unsere Elemente normalerweise eine weiße offene Klammer und dann ein rosafarbener Tab-Name. Wenn ich hierher komme, kann ich sehen, dass dieses „a“ tatsächlich weiß ist, was mir zeigt, dass es nicht als das richtige Tag gerendert wird. Das ist eine andere Möglichkeit für mich zu erkennen, dass ich ein Problem in dieser allgemeinen Umgebung habe, und dann kann ich normalerweise sehen: „Oh, schau, ich habe vergessen, es zu schließen.“ Also, ich kann das tun. Wir haben darüber ein wenig vorher gesprochen, aber manchmal werden wir vergessen, entweder ein Zitat zu schließen, so etwas passiert oft und Sie können sehen, dass alle meine Attribute grün sind, aber ich sehe, dass dieses ein gelb ist, also, dass wird erkennen, dass irgendwo zwischen hier und hier etwas schief gelaufen ist. Wenn es grün ist, war alles in Ordnung, wenn es gelb ist, irgendwo ging etwas schief. Eine Möglichkeit, herauszufinden, was falsch ist, ist, einfach durchzugehen und zu sagen, Quelle entspricht Zitat, hier ist meine Sache „Oh, schau, ich vermisse ein Zitat.“ Manchmal kann man es einfach nicht sehen und ich finde, dass es am besten ist, schreibe einfach die ganze Sache neu, also schreibe es einfach wieder neu, Quelle ist gleich, stelle sicher, dass du zuerst dein Shell-Formular schreibst, also hast du alle deine Anführungszeichen und setzen Sie dann Ihren Text wieder hier für image.logo.png ein. Ich muss das nur rückgängig machen, um es zurück zu setzen, und lassen Sie uns das Zitat korrigieren. Wenn das nicht funktioniert, haben wir auch den W3-Validator, der W3-Validator ist genial. Wir setzen unseren Code ein und es geht und prüft auf Fehler. Also, lasst uns das löschen und dem einen Fehler geben, was ich tun werde, ist das zu speichern. Ich werde alle auswählen und dann können Sie diese Seite mit einem Lesezeichen versehen, aber wenn Sie es vergessen, schauen Sie einfach nach oben, W3 Validator. Ich werde auf das erste klicken, die W3C-Markup-Validierung und dann können Sie per URI validieren, das bedeutet, dass Sie hier eine Webadresse eingeben können. Sie können Ihre Datei hochladen, oder wir werden nur tun, um durch direkte Eingabe zu validieren. Hier werde ich meinen ganzen Code einfügen und dann werde ich auf „Scheck“ klicken. Ich bekomme dieses Rot an der Spitze, was mir sagt, dass etwas nicht stimmt und es sagt, dass es sechs Fehler gefunden wurden. Wenn Sie die Seite ein wenig nach unten scrollen, Es wird Ihnen Ihre Fehler geben. Also, Fehler, Ausgabe sechs Fehler und sagt: „Zeile 13, Spalte 52: Kein Leerzeichen zwischen den Attributen Und ich sage: „Ha! Was ist das?“ Ich schaue mir das an, und vielleicht macht das nicht gerade Sinn für mich, aber ich weiß, jetzt, wo ich nach Zeile 13 suche, also wenn ich zurück zu meinem Texteditor gehe. Sicher genug Zeile 13 Ich habe jetzt identifiziert, wo das Problem ist, was es einfacher macht, herauszufinden, dass ich dieses Zitat vermisse. Also, sobald ich erkannte, dass ich das behoben habe, kann ich mein Dokument wieder speichern, ich gehe zu Control-A oder Befehls-A, um alle auszuwählen, Befehls-C, Strg-C und jetzt möchte ich das erneut ausführen. Also, was ich tun kann, ist, wählen Sie all das, fügen Sie meinen neuen Code ein und dann gibt es dieses Revalidieren hier und hey, jetzt ist alles gut. Sie werden feststellen, dass es tatsächlich sechs Fehler in der letzten gesagt, das liegt daran, wenn Sie einen Fehler haben, kann es eine Reihe von anderen Fehlern machen. Also, es ist am besten, mit dem ersten zu beginnen, herauszufinden, dass man heraus und sehen, ob das alles behebt. Es gibt zwei Warnungen hier, Sie können Warnungen vorerst ignorieren, was mit der Verwendung des HTML5-Dokumenttyps zu tun hat, den wir verwenden. Die Validatoren sind wirklich hilfreiche Möglichkeit, Probleme in Ihrem Code zu sehen. Wenn die Dinge jemals wirklich schlecht werden, manchmal mache ich gerne eine neue Datei. Also, hier ist eine neue Datei und ich werde alles auswählen, es dort hineinschieben und dann gehe ich zurück zu meiner alten Datei, das wird sehr mühsam erscheinen, aber was ich tue, ist, dass ich im Grunde nur eine Zeile nach dem anderen gehen werde. Also, ich speichere das, ich komme zurück zu meinem Browser und sage: „Okay, sieht gut aus.“ Dann setze ich die nächste Zeile ein und sage: „Okay, ich sehe immer noch gut aus.“ Also gehen Sie einfach im Grunde, bis Sie spezifisch identifizieren können, wo das Problem ist, das ist eine Art letzter Ausweg, aber manchmal werden Sie es brauchen. Die gute Nachricht ist, dass je länger und länger Sie HTML schreiben, desto einfacher wird es für Sie sein, die häufigsten Probleme oder häufige Probleme zu identifizieren , auf die Sie stoßen könnten, Dinge wie Tippfehler, Dinge wie unzitierte Attribute, Dinge wie das Vergessen, ein Tag zu schließen. Sie passieren uns allen, und sie passieren ziemlich viel. Zum Glück haben wir diese Werkzeuge und ich verspreche dir, je mehr und mehr du das schreibst, desto einfacher wird es. Ich empfehle dem W3C dringend, mehr Dinge zu suchen , wenn Sie jemals nach Informationen wie dem W3-Validator und auch einer sehr guten vertrauenswürdigen Ressource zum Finden von Informationen über HTML suchen. Irgendwie kann es ein wenig trocken und langweilig sein, aber es ist eine wirklich gute Ressource zu haben, so sicher sein, dass ein Lesezeichen. Ich werde unsere Kontaktseite auf das zurücksetzen, was es war, indem ich all das kopiere und speichere. Also, jetzt haben wir eine Website, aber wenn Sie bemerken, dass die einzige Art, wie Sie diese Website sehen, ist auf Ihrem eigenen Computer. Aber ein Teil der Blendung des Web ist in der Lage, unsere Seiten mit anderen Menschen zu speichern , um zu teilen, müssen wir unsere Inhalte hochladen und wir werden das im nächsten Video zu behandeln. 25. Inhalte auf einen Webserver hochladen: Also, um Ihre Seiten ins Web zu bringen, werden Sie Web-Hosting benötigen. Es gibt eine Menge von Web-Hosting-Dienstleistungen da draußen. Im Grunde, was das tut, ist es ein Computer, der alle Ihre Dateien hält und dann im Internet bereitstellt. Das war zu viel Zeit, dies zu erklären. Wenn Sie in die Tiefe gehen möchten, können Sie einfach eine Suche nach Web-Hosting machen, um ein wenig mehr herauszufinden. Aber ich möchte, dass du die notwendigen Teile von dem weißt, was du brauchst. Sie benötigen also einen Webhosting-Dienst. Einige sind teurer als andere, vieles davon basiert darauf, wie viele Besucher Sie auf Ihrer Website haben. Sie können überprüfen Bewertungen von verschiedenen Hosting zu, das ist eine wirklich gute zu überprüfen, bevor Sie entscheiden, welche Sie gehen, um zu verwenden. Also, machen Sie einfach eine Suche nach Bewertungen. Wir können sehen, was Techcrunch zu sagen hat, und dieser überprüft ReviewSignal, das uns offenbar ein wenig über den Vergleich von Web-Hosting erzählt, also ist das eine Option. Sobald Sie entscheiden, welches Hosting Sie möchten, werden Sie sich für ein Konto anmelden, und dann werden Sie auch einen Domain-Namen benötigen. Also, der Domain-Name ist so etwas wie techcrunch.com ist der Domain-Name, jennlukas.com ist der Domain-Name. Sie entscheiden, welchen Domain-Namen Sie wollen. Sie werden auch sicherstellen, dass es verfügbar ist. Domize.com ist eine Website, die Sie verwenden können, also wenn ich Jonarbs registrieren wollte. Es wird nachschlagen und Jonarbs blau sagen, also Jonarbs ist verfügbar. Dann müssen Sie Ihren Domain-Namen registrieren. Sie haben auch Optionen, wo Sie Ihren Domainnamen registrieren können. Also, im Grunde möchten Sie eine URL-Registrierung nachschlagen. So können Sie die URL-Registrierung nachschlagen und einen Ort finden. Es gibt viele verschiedene Funktionen, also stellen Sie sicher, dass Sie Ihre Forschung durchführen, bevor Sie sich für eine entscheiden. Sobald Sie eine URL haben und sobald Sie Web-Hosting haben, das nächste, was Sie tun möchten, ist Ihre Dateien von Ihrem Computer bis zu Ihrem Web-Host. Sie tun dies über ein FTP-Programm oder ein Dateiübertragungsprotokoll. Also, ich benutze ein Programm namens Transmit and Transmit ist auf dem Mac, aber es gibt sicherlich eine Menge FTP-Programme da draußen auch. Ihr merkt ein Muster, es gibt viele Möglichkeiten, die ihr habt. Im Wesentlichen, was Sie tun werden, ist, dass Sie gehen, um Ihre FTP-Informationen einrichten, und Sie erhalten, dass von Ihrem Web-Hosting, wenn Sie das registrieren. Also, Sie werden Ihren Server, Ihren Benutzernamen und Ihr Passwort. Sobald Sie sich dann mit dem Server verbinden, können Sie den Site-Ordner von Ihrem Desktop oder von Ihrem Computer auf Ihre FTP-Informationen ziehen , wo auch immer Sie ihn gespeichert haben . Sobald das alles ist, wenn jemand zu Ihrer URL geht, die Sie wie jonarbs.com registriert haben, wird es nach einer index.html Datei auf Ihrem Webhost suchen. Wenn es gefunden wird, wird es dann den Benutzern auf Ihrer Seite angezeigt. Viele dieser Web-Hosting und Domain-Namen-Registrierung bieten eine Menge von Kunden-Support. Ich empfehle auch, das zu betrachten, denn wenn Sie jemals Probleme haben, ist es toll, eine Telefonnummer, die Sie anrufen können, oder eine E-Mail oder einen Live-Chat zu haben. Wir werden jemanden fragen, wie er helfen kann, und oft sind sie bereit, dies zu tun. So erhalten Sie Ihre Inhalte von Ihrem Computer auf Ihre Website. Lassen Sie uns schließlich ein wenig über die nächsten Schritte danach sprechen. 26. Nächste Schritte: Also jetzt haben wir eine vierseitige Portfolio-Site und der gesamte HTML-Code ist semantisch. Wir haben es validiert. Wir haben dafür gesorgt, dass alles gut ist, und das beginnt als Grundlage für den Aufbau einer kompletten Website. Also im Moment haben wir alle Inhalte auf der Seite und das ist großartig. Egal welche Größe Bildschirm Sie haben, es wird sich irgendwie an Ihren Bildschirm anpassen, solange die Bilder nicht überlaufen, und es ist wirklich einfach für die Leute zu lesen, was hier vor sich geht. Wir müssen das fade Zeug lernen, um zu den hübscheren Sachen zu kommen. Also, nachdem Sie Ihren HTML-Code haben, werden Sie Stile anwenden möchten. Sie werden Farben, Textgrößen Hintergrundbilder wollen . Sie werden wahrscheinlich den Dingen Breite hinzufügen. Es wird wirklich genial werden. Ich verspreche es. Der nächste Schritt besteht also darin, CSS oder Cascading Style Sheets zu lernen. Cascading Style Sheets sind die Präsentationsschicht Ihrer Website. Ein wirklich gutes Beispiel dafür, wie CSS Ihre Website beeinflussen kann , ist auf der Website CSS Zen Garden. CSS Zen Garden basiert auf dem Konzept, dass es eine HTML-Datei gibt, und jeder greift diese HTML-Datei, aber dann verschiedene CSS-Dateien an die Website gesendet. Also, wenn wir die Ansicht alle Designs, so hier ist eine Website und es ist im CSS Zen Garden, und Sie können sehen, dass es Inhalt hat und, wie Sie scrollen, bleibt der Hintergrund fixiert. Es ist ziemlich cool. Schauen wir uns hier drüben an. Das sieht viel anders aus, oder? Also hier ist ein weiteres Beispiel. Cool. Hier ist eine andere Website, und hier ist eine weitere. Alle drei sehen viel anders aus, oder? Hier ist, was fantastisch ist. Wenn wir die Quelle all dieser sehen, sind sie alle gleich minus einer kleinen JavaScript-Änderung hier, was mit dem Laden der Schriftarten zu tun hat. Die Idee des CSS Zen Garden ist, dass der gesamte HTML-Code auf der Seite auf jeder Seite gleich ist. Sie werden hier sehen, wir haben einen dunklen und trostlosen Roa, die düstere und trostlose Straße verschlüpft. Der gesamte HTML-Code für diese Seiten ist identisch. Aber Sie können mit CSS sehen, Sie können Ihre Website aussehen lassen, wie Sie wollen. Aber mit all diesen Seiten gemeinsam ist, haben sie eine starke semantische Grundlage mit dem HTML, die geschrieben wurde. Nun, das schließt unser Intro zu HTML ein. Ich hoffe, du hattest eine Menge Spaß. Das habe ich gewiss getan. Ich denke, HTML ist eine Menge Spaß, und ich hoffe, dass Sie damit zu halten. Begleiten Sie mich das nächste Mal in meinem Follow-up-Intro zur CSS-Klasse und lassen Sie mich wissen, was Sie machen. Ich kann es kaum erwarten, Sie im Internet zu sehen.