Baue deine erste Website (und Thwack Zombies mit HTML und CSS)

1. Einführung - Was wir bauen: Hallo. Mein Name ist John Ray. Ich helfe dir beim Aufbau deiner ersten Website und Flax Zombies mit HTML und CSS In diesem Kurs werden wir eine einfache zweiseitige Website erstellen, die auf einem Aufsatz basiert, den Doktor Alexander Boople Wir werden hier diese Shamel-Seite zur Indexstudie erstellen, die den vollständigen Aufsatz enthält Und dann werden wir auch eine Bio-Seite erstellen, die aus irgendeinem Grund einige seiner Lieblingssachen und ein Bild des angesehenen Doktors Boople enthält aus irgendeinem Grund einige seiner Lieblingssachen und ein Bild des angesehenen Doktors Boople . In Ordnung. Lassen Sie uns darauf eingehen. 2. Untote Dateien manipulieren: Bevor wir darüber sprechen, wie man eine Website erstellt, wenn Sie anfangen müssen, über Dateien zu sprechen Sag Hallo zu Zombie Bob. Nun, Bob als Zombie weiß ein paar Dinge. Er weiß, dass Gehirne gut sind. Er weiß, dass er zufällig all seine Gliedmaßen hat. Er weiß, dass er ein Einzelstück der Apokalypse ist. Er weiß, in welchem Zombie-Nest er sich befindet, und andere Zombies in seinem Nest wie Sally, Jamal und Carlos. Hier ist eine Datei Jetzt hat eine Datei ähnliches Wissen. File Bob weiß zufällig , dass er all seine Daten hat. Zufällig weiß er, dass er ein eigenständiges Individuum an Daten oder Informationen ist. Er weiß, in welchem Ordner er sich befindet. Er kennt andere Dateien in diesem Ordner wie Sally Dot MP Three, Jamal Dot CSS und Carlos Punkt JS Jetzt ist Bob in seinem Nest und er kennt alle Zombies darin In ähnlicher Weise kann File Bob all die verschiedenen Dateien sehen , die sich im selben Ordner befinden wie er. Eine Datei ist eine Dateneinheit und ein Computer, der durch einen Dateinamen und eine Dateierweiterung gekennzeichnet ist. Ordner sind wie ein Eimer , in den Sie Dateien und andere Ordner legen können, und Websites bestehen häufig aus mehreren Dateien und Ordnern. Typischen HTML-Dateien sind möglicherweise viele Dateien zugeordnet, darunter CSS, JavaScript, Bilder, Video, Audio und mehr Diese Dateien befinden sich möglicherweise nicht im selben Ordner wie die HTML-Datei Manchmal haben Nester Unternester und manchmal haben Ordner Unterordner Wenn Sie jedoch einen Unterordner oder ein Unternest haben, können Zombie Bob oder File Bob tatsächlich sehen, was sich in Sie können nur wissen, was da drin ist, wenn es ihnen gesagt wird. Und wir können ihnen über einen Pfad sagen, was da drin ist. Der Pfad ist im Grunde, wie man in verschiedenen Ordnern von einer Datei zur anderen oder von einem Zombie zum anderen gelangt. Pfade können in einen Unterordner, in einen übergeordneten Ordner oder Es gibt ein paar verschiedene Zeichen, die wir in Pfaden verwenden. An erster Stelle steht der Punkt, also das aktuelle Verzeichnis. Wo auch immer die Datei ist , von der wir ausgehen, zwei Punkte bedeuten das übergeordnete Verzeichnis, was bedeutet, dass wir eine Ebene höher gehen. Und Slash trennt Ordner oder sagt, schau in den nächsten Ordner Sobald wir Zombie Bob sagen, wo Evite ist und wo das Sonnennest ist, kann er sie sehen Sobald wir File Bob hier einen Pfad, einen Punkt, einen Schrägstrich, einen Unterordner, einen Schrägstrich und ein GIF angeben Punkt, einen Schrägstrich, einen Unterordner, einen Schrägstrich , dann kann es Event-GIF finden und es auf seiner Website verwenden Slash ist der gesamte Ordner. In Slash haben wir eine Reihe von Dateien. In Slash haben wir immer noch Zombie , einen weiteren Ordner , der Dateien enthält Wir haben Apocalypse, einen weiteren Ordner, der einige Dateien enthält Resistance, ein Unterordner von Apocalypse, der ein Unterordner des Stammverzeichnisses ist. Und wir haben LeRoy , ein Unterordner von Resistance, der ein Unterordner von Apocalypse usw. ist Wie kommen wir von Slash weg? Wir werden in diesem Verzeichnis sein, um, in diesem Fall, über Punkt HTM Da wir uns im selben Slash-Ordner befinden, können Sie einfach über Punkt-HTML schreiben Es muss sich um nichts kümmern. Sie könnten auch einen Punktstrich mit einem Punkt in HTML schreiben. würde nur sicherstellen, dass wir uns im aktuellen Verzeichnis befinden und dann über diesen HTML-Code, aber der Schrägstrich wird vorausgesetzt, also ist er nicht erforderlich Spiele HTML. Spiele HTML ist genau hier. Das Gleiche. Spiele HTML oder mach Spiele HTML. Jetzt Bob Punkt HTML. Bob Dot HTML befindet sich tatsächlich im Zombie-Ordner. Wir können Zombie Bob Dot HTML machen. Oder wir könnten auch Punktstrich-Zombie-Slash-Bob-Punkt-HTML machen. Ab jetzt werde ich den Schrägstrich nicht mehr angeben, das ist nur eine Annahme. In Ordnung. Kostenloses Punkt-HTML. Fred Dot HTML ist genau hier. Also gehen wir in die Apokalypse. Schrägstrich HT M. Als nächstes gehen wir zu Juan, sich Also gehen wir zur Apokalypse. Hiebfestigkeit. Schrägstrich und.tm. Für Nummer sechs machen wir Index DHTL Also das wird Apokalypse sein. Hiebfestigkeit. Schlag Leroy. Und Slash. Jetzt ist Index Dot HTML die Standarddatei. Wenn eine Webseite nur nach etwas sucht, wird Index IHL normalerweise angegeben Es ist jedoch auch gut , den Dateinamen anzugeben. Sie könnten also einfach apokalyptische Schrägstrich-Resistance-Schrägstriche Leroy verwenden , aber Sie könnten auch HTML mit Schrägstrich und Indexpunkt verwenden, um sicherzustellen, dass aber Sie könnten auch HTML mit Schrägstrich und Indexpunkt verwenden, um sicherzustellen, dass es an der richtigen Stelle ankommt. Schließlich werden wir von One-Punkt-HTML, das genau hier ist, zu Zombie-Punkt-HTML übergehen das genau hier ist, zu , das genau hier ist. Tun wir das, wir müssen den Ordner nach oben gehen, also gehen wir in einem Schrägstrich Wenn wir also in einem sind, gehen wir ein Level höher, wir befinden uns jetzt in der Apokalypse Wir müssen noch ein Level höher gehen. Punkt Punkt Punkt Schrägstrich Das heißt, wir gehen eine Ebene hoch, dann eine weitere Ebene, und dann brauchen wir Zombie-Punkt-HTML, und das ist der Pfad 3. Code-Editoren verwenden, um die Apokalypse zu stoppen: Das Wichtigste, worüber wir sprechen sollten, sind Code-Editoren. In diesem Kurs werde ich VS-Code verwenden, und Sie können ihn gerne verwenden, aber vielleicht möchten Sie etwas anderes verwenden . Klartext-Editoren. Unter Windows haben Sie Notepad, was ein Standardkurs ist Sie können auf jeden Fall HTML und CSS in Notepad erstellen . Das ist kein Problem Auf dem MAC gibt es Textbearbeitung. Sie müssen sicherstellen, dass es sich im Klartextmodus befindet. Wenn es sich um den Modus „Text anreichern“ handelt, wird die Datei nicht richtig gespeichert und funktioniert auch nicht auf die gleiche Weise, da eine ganze Reihe anderer Informationen gespeichert werden . Stellen Sie also sicher, dass es sich um den Nur-Text-Modus handelt. Nun, beide Editoren werden einwandfrei funktionieren, aber sie werden nicht empfohlen. Der Grund dafür ist, dass es einige bessere Optionen gibt. Eine Sache, die viele dieser Optionen, die ich durchgehen werde , machen, ist der Farbcode, der Code. Und das bedeutet, dass Dinge bestimmter Typen, Ihre HTML-Elemente, Ihre CSS-Selektoren, alle unterschiedliche Farben haben werden alle unterschiedliche Farben haben Das hat den Vorteil, dass, wenn etwas ein Selektor sein soll, es aber die falsche Farbe hat, Sie erkennen können, dass das ein Fehler ist und dass Sie etwas falsch eingegeben haben oder dass etwas nicht richtig läuft, sodass es Ihnen wirklich helfen kann, sodass es Ihnen wirklich helfen kann Ein paar Optionen, die kostenlos oder Noped plus plus sind. Das ist nur Windows, funktioniert aber gut. Es gibt Klammern, die für jede Plattform funktionieren sollten. Auch das ist der VS-Code, den ich in diesem Kurs verwende, aber es ist nicht erforderlich , dass Sie ihn verwenden. Jedes davon wird gut funktionieren. Aber alle drei sind kostenlos. Es gibt auch Angebote und Texte, die viele Leute wirklich mögen, obwohl dafür Kosten anfallen. Wirklich, jedes andere Codierungstool, das HML und CSS unterstützt, wäre in Ordnung Jedes davon funktioniert, wenn Sie zu Hause mitprogrammieren. 4. HTML-Grundlagen: Es wird darüber sprechen, was HTML ist und wie es funktioniert. Was ist HTML? Es steht für Hypertext Markup Language Es ist die Struktur oder das Skelett einer Webseite. Es ist eine Möglichkeit, den Inhalt einer Webseite zu markieren. Ein HTML-Element besteht aus vier Teilen . Zuerst haben wir das öffnende Tag, dann Attribute, Inhalt und das schließende Tag. Beim Öffnen von Tags beginnen Sie mit einem Kleiner-als-Zeichen oder einer linken spitzen Klammer. Dann folgt auf sie der Name des Tags, Beispiel P für Absatz. Es gibt viele verschiedene Tags, und dann schließe ich mit einem Größer-als-Zeichen oder einer rechten Klammer. Zum Beispiel haben wir ein öffnendes P-Tag. Wir haben ein erstes B-Tag für Fett, über das wir etwas später sprechen werden, und ein DIV-Tag zum Öffnen, über das wir etwas später ebenfalls sprechen werden. Aber das sind einige Beispiele für das Öffnen von Tags. Als Nächstes haben wir einige Attribute. Ein Attribut ist ein oder mehrere Namens- und Wertepaare , die auf ein HTML-Element angewendet werden. Und Attribute bewirken in der Regel eines von drei Dingen. Sie werden ein Element identifizieren. Wir werden das häufig mit CSS verwenden, wo wir etwas aus der Seite ziehen und es dann ändern. Attribute verändern das Verhalten eines Elements, wie zum Beispiel die Farbe, die Schriftart, eine ganze Reihe verschiedener Dinge, oder sie legen externe Inhalte fest. Das passiert bei Bildern, Links zu einer anderen Datei oder einer anderen Seite, und Attribute werden zwischen dem öffnenden Tag und dem Größer-als-Zeichen oder der rechten eckigen Klammer angezeigt . Und einige Beispiele wären das Setzen einer Klasse, die ein identifizierendes Attribut für das Datum ars auf dem P oder eine ID für eine Zombie-Warnung ist , anderes identifizierendes Attribut das dI-Element oder das DI-Tag. Als Nächstes haben wir Inhalt, normalerweise handelt es sich um Text oder andere HTML-Elemente Es wird zwischen den öffnenden und schließenden Tags oder innerhalb des Elements erscheinen oder innerhalb des Elements Bei einigen Elementen sind die Arten von Elementen, die sie enthalten können, begrenzt , und einige Elemente können nur innerhalb bestimmter anderer Elemente vorkommen. Einige Beispiele könnten sein, dass dieser Absatz nach Gehirnen schmeckt oder dass ein kriechender Zombie auftaucht Wir haben das abschließende Tag, das dem ersten Tag entspricht, außer dass es einen Schrägstrich nach dem linken und einem Zeichen enthält Um unsere ersten Tags von früher widerzuspiegeln, haben wir einen Schrägstrich P, Schrägstrich B oder Schrägstrich div Nicht alle HTML-Elemente benötigen ein schließendes Tag. Diese werden als ungültige oder selbstschließende Tags bezeichnet. Wenn ein Attribut den Inhalt enthält, z. B. bei Bildelementen, oder das Element keinen Inhalt wie Zeilenumbrüche hat, haben sie normalerweise den Inhalt enthält, z. B. bei Bildelementen, oder das Element keinen Inhalt wie Zeilenumbrüche hat, kein schließendes Tag. Wir haben hier ein öffnendes P-Tag mit Zombies, und dann haben wir eine öffnende Augenmarke, nein, schließende Augenmarke, Familie, schließendes P-Tag, und dann haben wir zweitens eine weitere öffnende P-Zombies. Dann haben wir eine öffnende Augenmarke, einen sich öffnenden B-Hort, schließendes B, schließendes E, schließendes P. Das nennen wir Verschachtelung Wenn Sie ein Element in HTML öffnen, müssen Sie es schließen, bevor Sie übergeordnete Element oder das darüber liegende Element schließen Wir betrachten das in Farbe. Wir haben zum Beispiel hier, wir haben dieses Element, das vollständig in das P eingekapselt ist. Man sagt, es sei ein Kind des P-Elements Dann haben wir hier, dass B vollständig vom i eingeschlossen ist, und das I ist vollständig von P eingeschlossen . B soll ein Kind von I sein, ich soll ein Kind von P sein, und B soll ein Enkelkind von P sein Sie können es auch anders machen und sagen, dass P ein Elternteil von I ist, I ein Elternteil von B ist und P ein Großvater von B. Nun, das ist eine Standard-HTML-Seite. Die kleinste Menge an Code, die Sie haben können, beginnt mit einem Dokumenttyp , der technisch gesehen kein HTML ist, aber dazu da ist, dem Browser mitzuteilen, um was für ein Dokument es sich handelt. Dann haben wir unser HTML-Element zum Öffnen. Das definiert nur , wo sich der HTML-Code befindet. Der Kopf wird Informationen über die Seite sein, und dann ist der Hauptteil alles , was auf der Seite angezeigt wird. Schauen wir uns das mal an und programmieren live. 5. HTML Live Coding - Startseite: Wir haben nur die Tags, die Sie zuvor gesehen haben, die Elemente. Wir haben unseren ersten Dokumenttyp, der dem Browser mitteilt , dass es sich um eine HTML-Seite handelt. Wir haben ein HTML-Element. Ich habe hier ein ang-Attribut hinzugefügt , um zu zeigen, dass es auf Englisch ist. Das kann für viele Dinge hilfreich sein, aber Browser, Screenreader und Suchmaschinen helfen ihnen zu wissen, in welcher Sprache es ist, sodass sie leichter Übersetzungen und ähnliches vorbereiten können leichter Übersetzungen und ähnliches vorbereiten oder wissen, aus welcher Sprache sie übersetzen sollen. Wir haben auch ein Hauptelement, das Informationen über die Seite enthalten wird. haben wir noch nichts, aber das werden wir später bearbeiten. Wir haben ein Körperelement. Welches wird alles auf der Seite zeigen. Jetzt habe ich das so eingerichtet , dass, wenn ich etwas hier speichere, es hier angezeigt wird. Wenn ich zum Beispiel Just a Hello World hinzufüge. Hilft, wenn du es richtig buchstabierst. Hallo Welt, und ich rette es. Es erscheint dann hier drüben. Das P-Element erscheint hier drüben. Als Nächstes fügen wir etwas hinzu, das H-Eins oder Überschriftenebene eins bezeichnet wird. Dies ist die Überschrift der obersten Ebene, Sie haben auch H eins, H zwei, H drei, h4h5 und H sechs, wobei Überschriftenebene eins die oberste Ebene ist, und dann würden Sie Ihren Inhalt normalerweise mit Zwischenüberschriften und so weiter aufteilen , mit H zwei, dann H drei und so weiter und so fort Lassen Sie mich das sagen und wir werden sehen, wie es aussieht. Eine Überschrift ist also standardmäßig viel größer als normaler Text und auch fett gedruckt. Sorgen Sie also dafür, dass sie sich als Überschrift von der Masse abhebt. Überschriften sind eigentlich Elemente auf Blockebene, bei denen sie Platz über und unter sich selbst schaffen Das nächste, was wir uns ansehen werden, ist ein Span-Element, das technisch gesehen ein Inline-Element ist Ich werde es verwenden, um einfach die Byline für unseren Arzt Buble anzuzeigen , der den Aufsatz geschrieben hat , an dem wir gerade arbeiten Oder die Sea-Seite, an der wir gerade arbeiten. Technisch gesehen ist es ein Inline-Element, was bedeutet , dass es keinen Raum über und unter sich selbst erzeugen würde , aber weil dieses H-Element darüber liegt, wird das H-Element Platz schaffen, und dann werden wir als Nächstes auch ein Element auf Blockebene verwenden . Aber wenn ich auf Speichern klicke, wird mir angezeigt, dass dort der Name von Doktor Pople steht Als Nächstes fügen wir etwas Text hinzu. Habe das eigentlich hier bei Inhaltstext. Schließe die Schublade und hier haben wir eine ganze Reihe von Texten , die wir verwenden können. Ich werde diesen Text hierher kopieren. Das sind alles Absätze. Das ist für die Indexseite. Ein Teil davon wird für die About- oder Bio-Seite verwendet. Ich werde diesen Inhalt indirekt einfügen. Wenn ich auf Speichern klicke, siehst du, dass alles aussieht, als wäre es ein riesiger Absatz. Hier gibt es keine Kontinuität der Absätze. Es respektiert nicht unbedingt den Abstand unserer Absätze. Um das zu tun, müssen wir P Elemente um unsere Absätze herum hinzufügen . Wenn ich dabei auf Speichern klicke, können Sie sehen, dass unser erster Absatz Gestalt annimmt. Machen Sie sich hier keine Gedanken über diesen Abstand. Es ist nur wegen des Herausgebers. Als Nächstes werde ich einige weitere Absätze hinzufügen. Wie Sie sehen können, werden wir weiterhin Absätze hinzufügen. Machen Sie sich auch hier keine Gedanken über diesen Abstand. Es ist seltsam, und wie Sie sehen können, wird es hier nicht angezeigt. Und jetzt zoome ich durch füge die restlichen Absätze hinzu. Ja. Ordnung, und wir sind zurück. Okay. Als Nächstes gehen wir durch und finden heraus, wo ich einige Dinge beschriftet habe , die fett gedruckt werden sollten Alles, was diese Sternchen enthält, werde ich durch ein fett gedrucktes Etikett ersetzen Es gibt tatsächlich zwei fett gedruckte Tags oder zwei Tags, die fett formatiert werden. Eines ist das B-Tag, dem wir gesehen haben, dass es hier um das herum ein bisschen hinzugefügt werden wird. Wenn ich das sage, können Sie sehen , dass das jetzt fett gedruckt ist. Das andere Etikett ist das starke Etikett, und das steht für starke Betonung Der Grund dafür, dass es zwei gibt, ist, dass es anfänglich tatsächlich stark und nicht strichhaltig ist. Lass mich das dort reparieren. Anfangs, als die Sprache erstellt wurde, war das Bol-Tag B alles, was wir hatten. Und es gab einige Bedenken, dass dadurch nicht genügend Informationen über den Inhalt gegeben wurden . Es war nicht semantisch genug. Und so haben sie das Strom-Tag hinzugefügt, um das etwas spezifischer und ein bisschen semantischer zu machen Strom muss jedoch viel mehr Buchstaben eingeben, sodass Entwickler Stro nicht wirklich häufiger verwenden Und so lebte der Bol-Tag weiter. Jetzt, mit HMO Five, sind beide akzeptabel, sodass Sie das verwenden können, was Sie wollen Jetzt schauen wir uns die I- und M-Elemente an, wo ich diese Unterstriche gemacht habe. Wir werden Kursivschrift hinzufügen, I für Kursivschrift Wie bei der Fettschrift gibt es zwei Elemente für Kursivschrift. Das eine ist, was hier einfach so aussieht, was wir schon ein bisschen früher gesehen Wenn ich das sage, sieht man, dass es dann kursiv wird. Ähnlich wie bei Bold and Strong, B and Strong wollten sie, dass das Element semantischer sein sollte, oder sie wollten eine semantischere Version des Elements, und so fügten sie das EM zur Betonung hinzu Aber auch hier gilt: Beides ist akzeptabel. Verwenden Sie das, was für Sie am sinnvollsten Wenn ich das hier noch einmal sage, ist es auch kursiv geschrieben Ordnung. Nun, da wir unseren Inhalt auf unserer Seite haben, fügen wir etwas Navigation hinzu. Direkt unter dem Body-Tag hier, direkt unter dem sich öffnenden Body-Tag werde ich hinzufügen Und das ist der Anfang davon. Wir haben ein A-Element, das ursprünglich für Anchor steht, aber es ist unser Link-Tag. Was auch immer wir verlinken, es wird in diesem ARF-Attribut enthalten sein. Und dann wird der Linktext dieser Text hier sein. Also werde ich es einfach mit Index DHTO verknüpfen, was dieselbe Datei ist Ich werde auf Speichern klicken, und dann können Sie sehen , dass hier ein Link ist Wenn ich darauf geklickt habe, öffnet sich einfach dieselbe Index-HTL Darüber müssen wir uns im Moment keine Gedanken machen. Aber am Ende werden wir zwei Seiten auf dieser Website haben. Also werde ich jetzt einen Link dazu hinzufügen, obwohl wir diese Seite noch nicht erstellt haben, es wird Dr. Gopals Bio Bio Dot HTML sein Und dann gehe ich zur Biografie. Spar dir das. Jetzt haben wir zwei Elemente da oben, zwei A-Elemente da oben. Normalerweise wird die Navigation in eine ungeordnete Liste aufgenommen, weil es sich um verwandte Elemente handelt. Das ist also eher die semantische Art, sie zuzuordnen Und wir werden auch ein Struktur-Tag namens NAV für die Navigation verwenden namens NAV für Also werde ich hier zuerst NAV hinzufügen. Welches ist ein strukturelles Element. Also werden wir eigentlich keine Änderungen vornehmen. Wenn ich es also speichere, werden im Moment keine Änderungen am Frontend vorgenommen, aber wir werden es viel später für CSS verwenden und auch sicherstellen aber wir werden es viel später für CSS verwenden und auch sicherstellen , dass die Seite die richtige Struktur hat. Jetzt füge ich diese ungeordnete Liste hinzu. Eine ungeordnete Liste beginnt also mit UL. Und dann wird jeder Artikel einen LI-Artikel als Listenelement haben einen LI-Artikel als Listenelement Und dann werden wir die UL schließen. Sobald ich es gespeichert habe. Dann können Sie sehen , dass es sich jetzt in einer ungeordneten Liste oder Aufzählung befindet Wir werden später etwas mehr damit herumspielen , wenn wir zu CSS kommen, aber jetzt ist es richtig strukturiert Nun, hier haben wir unsere NAB-Struktur hier drin, aber eine Seite hat mehr Struktur als das Es gibt mehrere verschiedene Strukturelemente. Zum Beispiel haben wir einen Header , der den Header umgehen kann. Lassen Sie mich nun auch betonen , dass Kopfzeile und Überschriften sehr unterschiedlich sind Ein Header hier soll also den oberen Rand der Seite anzeigen, wohingegen der Header Informationen über die Seite enthält Überschriften sind auch Inhalte , die auf der Seite angezeigt werden, also in der Kopfzeile Als nächstes haben wir Main, das ist der Hauptinhalt der Seite, was in diesem Fall der Aufsatz von Doktor Buble ist Ich werde den Hauptteil hier unten schließen. Ich werde auch ein Fußzeilenelement mit einigen Inhalten hinzufügen ein Fußzeilenelement mit einigen Inhalten Füge das hier ein. Also haben wir einen Foo. Wir haben eine Personalabteilung HR steht für horizontale Regel. Da es sich um ein ungültiges Tag handelt, ist kein abschließendes Tag erforderlich. Es wird nur eine Linie über die Seite ziehen. Dann haben wir hier ein P-Element, P-Tag mit einigen Informationen. Und dann P schließen, Fußzeile schließen. Ich werde das speichern, damit wir es hier in Aktion sehen können, und hier haben wir all unsere Inhalte Sie werden hier feststellen, dass dadurch der Speicherplatz weggefallen ist. Das ist weniger als rot. Das liegt daran, dass der Browser, während er es herausfindet, nicht ganz erkennt, dass es sich nicht um Code Es ist immer noch nicht sicher, was es ist. In der Regel startet Be Less Than Sin den Code. Es wird etwas sein , das nicht im Frontend angezeigt werden sollte. Der Browser findet es heraus, versteht, was wir hier wollen, aber das Beste , was wir tun können, ist, es auf Ampersand und LT-Semikolon zu setzen , und das steht für LT und das steht für Ampersund LT. Cticon zeigt uns dieselbe linke spitze Klammer. Wenn ich auf Speichern klicke Beachten Sie, dass es dort keine Änderung gab, und das liegt daran, dass es sich um dasselbe Symbol handelt. Wir können auch Ups. Stellen Sie das Größer-als-Zeichen ein. Hier füge ich ein Leerzeichen hinzu, das dem Groß-San-than-Zeichen entspricht. Und weil Ampersand jetzt ein oder mehrere Sonderzeichen bezeichnet, werden wir ein Ensemble-Sonderzeichen anzeigen bezeichnet, werden wir ein Ensemble-Sonderzeichen anzeigen. Ampersand, das wir anzeigen möchten, sollte jetzt auf Ampersand AMP gesetzt werden Das Ampersand, das wir anzeigen möchten, sollte jetzt auf Ampersand AMP gesetzt werden , Semic Save. Nichts davon sollte sich ändern. Es respektiert den dortigen Raum nicht. Aber wir können mehr als nur diese Symbole verwenden. Wir können auch das Copyright-Symbol verwenden. Und das Copyright-Symbol ist Ampersand Copy. ALS, und Sie können sehen, dass es jetzt das Copyright-Symbol ist. Dies sind sogenannte HTML-Entitäten, denen wir Zeichen, die sich nicht auf unseren Tastaturen befinden, auf die Seite schreiben Zeichen, die sich nicht auf unseren Tastaturen befinden, auf die Seite Nachdem wir nun unseren Inhalt und unsere Hauptstruktur für unser Indexpunkt-HTML eingerichtet haben, werden wir es jetzt speichern und unsere zweite Seite, unsere Bio-HTL, erstellen unsere zweite Seite, unsere Bio-HTL, 6. HTML Live Coding – Bio-Seite: Der einfachste Weg, Bio Dot HTL zu erstellen , besteht darin, bei Null anzufangen Wir können Index Dot HTL nehmen und es als Bio Dot HTML speichern , damit wir mit einer Struktur und dergleichen einen Vorsprung mit einer Struktur und dergleichen einen Ich gehe zu Datei > Speichern unter und ändere es in Bio DH TML Ich speichere. Jetzt haben wir Biodi-TML, aber Sie werden feststellen, dass wir auch hier unten Indexpunkt-HTML haben Das sind jetzt zwei Kopien voneinander. Ich werde auch Content Dot Text öffnen, sodass wir auch weiterhin Zugriff darauf haben. Ordnung. Nun, Bio, wir wissen mit Sicherheit, dass dieser Inhalt nicht korrekt ist. Also lass uns weitermachen und diesen Inhalt hier löschen. Wenn wir es jetzt speichern, wird es hier nicht aktualisiert, aber das liegt daran, dass wir uns hier immer noch Index von HTL ansehen. Ich sollte in der Lage sein, auf die Biografie zu klicken, und hier sind wir mit dem Bio-Punkt-HTML Ich werde mir den Inhalt von H One schnappen und ihn hier platzieren. Als Nächstes klicke ich auf Speichern und wir können sehen, ob das der richtige oder der Inhalt ist, und jetzt können wir die Seiten eines zweiten Teils leichter erkennen. Jetzt übernehme ich den Inhalt von hier. Ich werde es kopieren. Keine Index-Biografie. Ich werde es einfügen. Auch hier werden wir einiges an Arbeit vor uns haben. Ich werde anfangen, P-Tags hinzuzufügen. Jetzt haben wir hier mehrere verschiedene Überschriften. Ich werde H zwei Tags als seine Lieblingssachen hinzufügen, und ich werde hier einen Bereich um diese kleine Notiz herum hinzufügen , damit wir sie separat gestalten können Jetzt werde ich eine UL oder eine ungeordnete Liste seiner Lieblingssachen erstellen LI LI rund um jeden Gegenstand. Und schließe die UL. Diese beiden werden eine H-Zwei sein. Das wird jetzt eine geordnete Liste sein. Eine geordnete Liste ist nur ein OL im Vergleich zu einer UL. Ich werde LI hinzufügen, dasselbe LI-Element verwenden, als wir einen Abschluss hatten, und jetzt ist alles da. Lass mich auf Speichern klicken und wir werden den neuen Inhalt hier oben sehen. Wir haben unseren Absatz. Wir haben einen H zwei, wir haben unsere Spanne. Wir haben eine ungeordnete Liste. Wir haben noch zwei H, wir haben unsere geordnete Liste, und dann haben wir natürlich die Fußzeile und HR usw. Wie Sie vielleicht bemerkt haben, gibt es bei meiner Arbeit auch einige Stellen, an denen Kursiv und Fett hinzugefügt werden Lass uns das jetzt durchgehen und das machen. Ordnung. Wir haben unsere Kursivschrift und unsere Fettschrift geändert Kursivschrift und unsere Fettschrift Jetzt fügen wir danach ein Markenzeichen hinzu, danach ein Markenzeichen weil Doktor Bob sich dafür entschieden hat, es als Marke zu kennzeichnen Und das ist Ampersand-Handel, und da taucht es genau dort Das Letzte, was wir mit HTML machen werden, ist, ein Bild hinzuzufügen Also gehe ich wieder hierher und direkt in dieses P-Element. Ich werde Bildelemente hinzufügen. Jetzt ist ein Bild tatsächlich ein selbstschließendes oder ungültiges Tag. Gehen Sie also zu einem Bild und dann wird ein sogenannter SRC als Quelle verwendet , um das Bild zu finden Und das ist das PNG. Ich drücke auf Speichern und Sie können sehen, dass er in seiner ganzen Pracht ist. Eine weitere Sache, die wir zu Bildern hinzufügen möchten , ist der sogenannte alternative Text. Und auf diese Weise können Suchmaschinen und Screenreader auf den Inhalt des Bildes zugreifen. Ich hole mir das von hier drüben. Benutze ein Attribut. Verwendet ein l-Attribut. Ich habe diesen Inhalt. Ich schwöre, lass es mich holen. Ordnung. Und da erscheint es. Drücke auf Speichern. Beachten Sie , dass sich am Bild nichts geändert hat, da das Attribut nicht Ich zeige also nur zwei Screenreader und Engines, die den Code lesen , oder jedes andere Programm , das den Code liest. Jetzt haben wir unser HTL eingerichtet. Schauen wir uns CSS an. 7. CSS-Grundlagen: CSS steht für Cascading Style Sheets. Wenn HTML das Skelett ist, dann ist CSS das Fleisch und die Kleidung Damit können Sie Farben, Schriftarten und alle möglichen Dinge festlegen . Die Kaskade von CSS. Stile wirken sich nicht nur auf ein einzelnes Element aus. Sie durchlaufen das Dokument nacheinander vom Elternteil zum Kind. Wenn Sie beispielsweise eine Textfarbe für das Hauptteil festlegen , wird diese Farbe von allen untergeordneten Elementen wird diese Farbe von allen untergeordneten Eine CSS-Regel besteht aus drei Teilen. Zuerst der Selektor, dann die Eigenschaft und dann der Wert Der Teil in den geschweiften Klammern wird normalerweise als Deklarationsblock bezeichnet , und das Ganze als Ganzes wird Regel genannt Der Selektor wählt aus, auf welche Elemente die Eigenschaften angewendet werden sollen Es kann ein Element sein, wie P, di oder main sind alles Elemente, die wir uns gerade angesehen haben, und Sie können all diese Elemente innerhalb einer Seite mit der Elementauswahl auswählen einer Seite mit der Elementauswahl kann sich um eine Klasse handeln, die das Klassenattribut von HTML verwendet, Es kann sich um eine Klasse handeln, die das Klassenattribut von HTML verwendet, ihr einen beliebigen Namen geben, sodass Klasse gleich Zombies, Untoten, Politikern Untoten, Politikern Sie haben auch eine ID, die ein Wert des ID-Attributs von HTML ist , und dafür werden Sie Für Klassen werden Sie einen Punkt verwenden, um zu kennzeichnen, dass es sich um eine Klasse handelt Für IDs verwenden Sie einen Hashtag, um anzugeben, dass es sich um eine ID handelt, und Sie können auch eine Kombination verwenden Dies wählt zum Beispiel jedes P-Element aus, das sich in einem anderen Element mit der ID Apokalypse muss kein direktes Kind sein, es könnte ein Enkelkind sein, ein weiterer Nachkomme usw. Dadurch wird jedes Div ausgewählt, das ein Element mit einer Zombieklasse ist, und damit wird jedes Element mit einer Politikerklasse ausgewählt, das sich innerhalb eines Eigentum. Dies ist der Aspekt , den Sie ändern möchten. Und es gibt viele Beispiele, aber Dinge wie Farbe, Hintergrundfarbe, Schriftstil, Schriftfamilie, viele, viele, viele mehr. Und dann der Wert. Werte sind der Wert, auf den Sie die Eigenschaft von ihrem Standardwert oder einem anderen Wert, den Sie zuvor angegeben haben, ändern auf den Sie die Eigenschaft von ihrem Standardwert oder einem anderen Wert . Die Art der zulässigen Daten hängt von der Eigenschaft ab. Für einige Eigenschaften sind nur bestimmte Schlüsselwörter erforderlich, und für einige Eigenschaften sind nur Zahlen oder Zahlen mit bestimmten Einheiten zulässig. Manche akzeptieren beides. Schauen wir uns nun etwas CSS an. 8. CSS-Live-Coding: Stil hinzufügen: Also nehmen wir unsere HTML-Seiten hierher und ich gehe zurück zu unserem Index, und ich gehe zurück zu damit wir sehen können, dass es von hier aus funktioniert. Und ich muss unseren Loops ein Stilelement hinzufügen. Ich bin dort immer noch in der Biografie. Lass mich wieder hierher gehen. Index. Ich werde ein Stilelement hinzufügen. Und in dieses Stilelement kann ich unser CSS einfügen. Als Erstes wähle ich alle H-One-Tags und ändere ihre Farbe in ein Orangerot. Orangerot. Es gibt viele verschiedene Möglichkeiten, Farbe einzurichten. Orangerot ist ein Schlüsselwort, das zufällig für Farbe funktioniert. Ich werde das speichern, und jetzt ist unser H-Wert orangerot. Wir wollen auch unser H-One etwas größer machen. Ich werde die Schriftgröße und die Schriftgröße einstellen. Also, wie groß ist sie auf 50 Pixel? Die Standardeinstellung ist 16, wenn Sie also eine Schriftgröße von 50 Pixeln festlegen, wird sie viel größer. Wie Sie dort sehen können. Als Nächstes möchte ich diese Byline ändern Ich werde eine Zeitspanne festlegen. Ich werde einen Schriftstil festlegen , der Kursivschrift in Kursiv umwandelt und ihr eine graue Farbe Wenn ich das sage, können Sie sehen, dass es etwas weniger betont und kursiv Also ich will die Kugeln da oben loswerden. Der Weg, das zu tun, besteht darin, die UL zu ändern und den Stiltyp oder den Listenstiltyp auf „Keine“ zu setzen Stiltyp oder den Listenstiltyp auf „Keine“ zu Speichern. Jetzt sind sie weg. Das einzige Problem ist, dass wir eine URL in unserer Biografie haben , dass das auch entfernt wird . das zu umgehen, sie nur für diese URL zu ändern und nicht für andere ULs , besteht darin, sie zu lokalisieren oder einen abgeleiteten Selektor festzulegen Also NAV UL. Alle UL innerhalb eines NAV sind die einzigen, die betroffen sein werden. Das nächste, was wir tun wollen, ist so zu haben , sondern sie inline anzeigen zu lassen, sodass sie nacheinander angezeigt werden. Also werde ich das auch in diesem Fall ändern, ich möchte nicht alle LIs beeinflussen. Ich möchte nur die LIs innerhalb einer NAF beeinflussen und werde die Anzeige als Inline einstellen Und dann möchte ich ein bisschen Polsterung hinzufügen, damit sie ein bisschen Abstand zueinander haben Es wird zehn Pixel Polsterung hinzufügen. Dadurch wird nur ein Abstand um sie herum hinzugefügt. Jetzt können Sie sehen, dass es hier eine große Lücke gibt, die nicht ganz so sein wird. Alle Elemente haben standardmäßig einen gewissen Abstand und Rand. Diese URL hat also standardmäßig eine Menge Abstand und Rand, weil sie diese Aufzählungszeichen enthält Also setze ich den Abstand auf Null und den Rand Es ist gespeichert, und jetzt ist es ganz da drüben. Es ist immer noch ein bisschen vielschichtig, und das liegt daran , dass es rundum mit zehn Pixeln abgefüllt Rundum zehn Pixel. Eine weitere Sache, die ich gerne machen würde, ist, dass die Navigation nicht hier haben, sondern ich die Navigation nicht hier haben, sondern sie hierher fliegen lassen möchte. Sie können das also ganz einfach tun, indem Sie den Text rechts ausrichten Dadurch wird der Text rechtsbündig ausgerichtet. Wenn ich speichere, fliegt es hierher weil es jetzt rechts ausgerichtet ist, anstatt wie standardmäßig links ausgerichtet zu sein. Nun, das ist ein bisschen zu nah am oberen Rand, also möchte ich hier oben etwas Abstand hinzufügen. Ich möchte auch etwas Abstand zwischen diesen beiden hinzufügen. Ich nehme nur das Kirchenschiff ich ändere nicht die Elemente darin Ich werde Margin Top 100 Pixel sagen. Ich spare. Da haben wir es, und dann Margin Bottom. 50 Pixel, und ich drücke auf Speichern, und jetzt ist mehr Platz zwischen diesen beiden. Nun, ich mag dieses Orangerot, also möchte ich seine Verwendung ausweiten. Ich werde diese beiden Links auch orange machen. Also sage ich N A Ich möchte nur die A-Elemente auswählen. Ich möchte die Farbe Orangerot verwenden, dieselbe Farbe wie zuvor. Speichern. Jetzt sind sie orangerot. Und jetzt, wo sie eine andere Farbe haben, ist es viel klarer, dass es sich um einen Link handeln könnte. Also werde ich diese unterstrichene Textdekoration entfernen. Nein. Speichern Sie, und jetzt gibt es keine Zeile darunter. Und wir möchten markieren, auf welcher Seite wir uns befinden. Der einfachste Weg, das zu tun, besteht darin, der Seite, auf der wir uns befinden , eine Klasse hinzuzufügen . Derzeit ist dies mit dH TL indexiert, ich werde hier eine Klasse zu L hinzufügen Klasse entspricht Aktuelle Seite Aktuelle Wenn ich es jetzt speichere, was ich jetzt tun werde, ändert sich nichts, weil wir keine Stile geschrieben haben , um es zu bearbeiten Aber bevor wir weitermachen, und damit ich es nicht vergesse, werde ich es kopieren und ich werde es hier einfügen, aber es auf den Bio-Link setzen, da das der Link ist, der die aktuelle Seite hier ist. Speichern Sie das, damit wir es nicht vergessen. Alles klar. Jetzt werde ich einen Stil dafür schreiben. Da es sich um einen Kurs handelt, wähle ich eine aktuelle Seite aus. S. Dann setze ich den unteren Rand, weil ich möchte, dass er sich nur unten befindet. Dann setze ich auf Orangerot. Dann nehmen Grenzen tatsächlich drei verschiedene Werte an. Ich setze Vollton ein, und dann beträgt die Breite zwei Pixel. Solide ist der Stil. Sie können Punkte oder viele andere Dinge verwenden, aber ich lege die Farbe, den Stil und die Breite fest. Ich spare. Jetzt wird hervorgehoben , auf welcher Seite wir uns befinden. Ordnung. Nun, schauen wir uns die Fußzeile genauer an. Diese Fußzeile ist nett Mir gefällt die Linie hier, aber ich denke, es wäre wenn wir sie auch in dieser Farbe gestalten könnten , in dieser orangeroten Farbe, in einer Fußzeile HR, ich werde diesmal den oberen Rand setzen, weil das den Rand für HRs oder die Farbe einer HR behandelt. Ich werde es wieder auf zwei Pixel setzen, einfarbig, und die Farbe orangerot ich werde diesmal den oberen Rand setzen , weil das den Rand für HRs oder die Farbe einer HR behandelt. Ich werde es wieder auf zwei Pixel setzen, einfarbig, und die Farbe Wie Sie sehen, spielt die genaue Reihenfolge keine Rolle da es ziemlich klar ist, um welche Dinge es sich handelt. Ich drücke auf Speichern und hier haben wir ein orangerotes Bild. Nun, eine weitere Sache, die cool wäre, wäre, dass es nicht den ganzen Weg verlängert, sondern vielleicht einen Teil der denn wenn wir das vergrößern oder verkleinern, wollen wir nicht unbedingt, dass es zu 100% ist. Wenn ich es auf einen bestimmten Wert setze, ist es manchmal zu groß und manchmal zu klein. Ich werde eine Breite von 60% festlegen. Und das bedeutet, dass es 60% der Breite seines übergeordneten Elements haben wird . Lassen Sie uns jetzt etwas mehr mit der Fußzeile arbeiten. Ich möchte den Text zentriert ausrichten, sodass der Text zentriert ist Und dann möchte ich hier auch etwas Platz hinzufügen, damit klar ist, wo es beginnt und wo es endet. Ich spare. Lass mich ein bisschen runterscrollen. Jetzt können Sie sehen, dass es jetzt zentriert ist und ein bisschen besser aussieht. Hier gibt es etwas Platz, um sie zu unterscheiden . Das ist also gut. Eine andere Sache, die passiert , ist , dass, wenn wir bis zum Äußersten gehen, es einfach weiter so weit wie möglich skaliert, was wir wahrscheinlich nicht wollen. Normalerweise ist es viel schwieriger, eine Zeile zu lesen , die sich über die gesamte Seite erstreckt. Also werden wir eine X-Größe festlegen. Also werde ich Nav einstellen. Sie können mehrere Dinge tun, mehrere Selektoren in einer Anweisung wenn Sie ein Komma dazwischen setzen Hier stelle ich all diese Nav-Haupt-Kopf- und Fußzeilen ein. Ich werde ihnen eine maximale Breite von 1.000 Pixeln und einen automatischen Rand festlegen, um sicherzustellen , dass sie beim Speichern zentriert sind Er spart. Ich öffne es dann und jetzt ist es zentriert. Eine Sache, die wir hier verloren haben, ist, dass, als ich Margin Auto auf dem Navi eingestellt habe, der zusätzliche Rand , den wir darüber und darunter hinzugefügt haben, entfernt wurde. Und das wurde auch in den Fußzeilen entfernt, und das ist jetzt ganz nah dran Es gibt also eine einfache Möglichkeit, das zu beheben. Anstatt es auf jedes dieser Elemente zu legen, werde ich ein Div erstellen und ihm eine Wrapper-Klasse geben Und ich werde es um alle Elemente wickeln . In Ordnung. Nehmen wir an, das hat am Ende nichts gebracht, weil ich das CSS noch nicht geändert habe. Anstatt all diese Dinge auszuwählen, wähle ich jetzt nur den Wrapper Ich werde auf Speichern klicken. Jetzt hat das Navi seinen Rand zurück, die Fußzeile hat seinen Rand zurück, und wenn ich es öffne, sind es nur noch 100 Pixel Wenn wir zur Biografie gehen, werden wir feststellen, dass sie keine dieser Funktionen mehr enthält. Es gibt einen einfachen Weg, das zu tun. Sie können auf diesen gesamten Stil klicken oder ihn kopieren. Und dann werde ich es hier einfügen. Ich werde auf Speichern klicken, und jetzt steht uns dasselbe Styling zur Verfügung. Wir haben die Fußzeile hier, wir haben den Titel, all diese Dinge Wenn wir zu groß werden. Oh, wenn wir zu groß werden, hört es nicht auf. Der Grund dafür ist, dass wir den Wrapper nicht hinzugefügt haben. Also fügen wir hier das Wrapper-Div hinzu. Scrollen Sie nach unten. Es speichert. Wenn wir jetzt zu weit gehen, verhindert es immer noch, dass es zu weit geht. Jetzt sind wir wieder an Ort und Stelle. Okay. Es gibt noch ein paar Dinge, die wir damit machen wollen. Ich meine, dieses Bild ist nett. Wir mögen das Bild von Doktor B, aber es fühlt sich einfach nicht richtig an, da, wo es ist, es fließt kein Text drum herum. Wir können das machen, was man Float nennt. Bild auch und dann werde ich schweben. Beim Schweben wird das Element aus dem normalen Fluss herausgezogen und nach rechts verschoben, oder Sie können es auch nach links verschieben, sodass der Inhalt um es herum fließen Also klicke ich auf und speichere es, und jetzt kannst du sehen, dass der Inhalt jetzt um das Objekt herum fließt. Das ist besser. Das Bild ist immer noch ziemlich groß. Wir haben immer noch Sachen, die dem ziemlich nahe kommen. Ich werde hier noch einige Änderungen vornehmen. Lassen Sie uns einen linken Rand links von fünf Pixeln und einen unteren Rand festlegen . Ebenfalls von fünf Pixeln. Speichern. Das hat uns ein bisschen geholfen. Wir haben dort ein bisschen Platz. Dann möchte ich auch seine Breite im Wert von 300 Pixeln ändern, und lassen Sie uns seine Höhe ändern. Ich spare, das hat es ein bisschen gequetscht. Und das liegt daran, dass wir das Seitenverhältnis nicht eingehalten haben. Wir haben es zu einem Quadrat gezwungen, obwohl das nicht der Fall ist. Also lass mich das einfach löschen, ich speichere und jetzt sieht es automatisch viel besser aus. Die andere Sache, die Sie tun könnten, ist, Ihre Körpergröße auf Auto einzustellen, und dann würde sichergestellt , dass alles, was Sie hier einstellen, auf jeden Fall das richtige Seitenverhältnis beibehalten wird. 9. Dich später einholen, Zombigator: Dafür, dass du diesen Kurs gemacht hast? Wenn es Ihnen gefallen hat, hinterlassen Sie bitte eine Bewertung. Es hilft wirklich, die Nachricht zu verbreiten. Und du kannst dir auch meine anderen Kurse auf Skillshare Wenn du mehr Inhalte möchtest, habe ich immer noch mehr am und dot Institute, wo es Bücher, Spiele, Ressourcen und sogar einige Lehrpläne gibt . Danke. Hab einen schönen Tag.