Programmieren mit HTML und CSS

1. Willkommen: He, alle. Mein Name ist Emily Maskin und ich bin super aufgeregt, Sie über HTML und CSS zu lehren. Ich bin seit fast 10 Jahren Webentwickler und finde immer wieder neue Wege, um schöne Websites zu erstellen. Diese Klasse ist großartig für alle, die jemals gedacht haben, ich möchte lernen, wie man kodiert, aber ich weiß nicht, wo ich anfangen soll. HTML und CSS sind der perfekte Weg, um Ihre Zehen zu tauchen, da Sie leicht die Ergebnisse dessen, was Sie erstellen, auf eine sehr einfache und visuelle Weise sehen können. Am Ende dieser Klasse können Sie eine schöne Profilseite für sich selbst oder für jemand anderen erstellen. Es ist eine großartige Möglichkeit, Ihre neuen Fähigkeiten zu präsentieren und sich gleichzeitig zu fördern. Alles, was Sie brauchen, ist ein Texteditor. Ich habe Download-Links in der Klassenbeschreibung zu einigen beliebten zur Verfügung gestellt , aus denen Sie wählen können. Also lasst uns anfangen und ich kann es kaum erwarten zu sehen, was ihr euch einfällt. 2. Anatomie einer Website: Es braucht viele verschiedene Sprachen und Technologien, um eine Website zu erstellen, oder zumindest eine, die komplexer ist als diese. Ein hilfreicher Weg, um die Teile einer Website zu denken, ist als Teile des menschlichen Körpers. Zuerst haben wir das Skelett. Das ist die Struktur, die verschiedenen Teile passen alle zusammen. Das ist HTML. Websites haben alle bestimmte grundlegende HTML-Komponenten, wie zum Beispiel einen Kopf, der auf einen Körper geht. Innerhalb des Kopfes und des Körpers gibt es viele mögliche HTML-Elemente, und sie können meist in beliebiger Reihenfolge gehen, aber an diesem Punkt beginnen die Skelettmetaphern seltsam zu werden, also werden wir vielleicht nicht dorthin gehen. Und was jetzt? Nun, unser Skelett braucht vor allem Haut. Kleidung wäre auch gut, vielleicht Haare und Make-up. Das ist CSS. Es ist, was Ihnen erlaubt, reine strukturierte Informationen in etwas umzuwandeln , was die Leute eigentlich betrachten möchten. Irgendwann werden wir wahrscheinlich wollen, dass diese Person etwas tut. Sie brauchen etwas Verhalten, Handlungen, Erinnerungen, Persönlichkeit. Dort kommen JavaScript und manchmal auch einige andere Sprachen ins Spiel, aber im Moment, keine Sorge, wir werden nur HTML und CSS in dieser Klasse abdecken. 3. Einrichten: Nehmen wir uns eine Minute Zeit, um aufzurichten. Zuerst erstellen wir einen Ordner auf dem Desktop. Hier werden wir all unsere Arbeit retten. Sie können diesen Ordner beliebig aufrufen. Sie können es sogar als unbenannten Ordner belassen, wenn Sie möchten. Ich rufe nur meine Emily an. Nun, öffnen wir unseren Texteditor, ich benutze Atom und wir werden nur eine neue Datei starten und wir geben hallo, Welt hinein. Jetzt werden wir es in dem Ordner speichern, den wir gerade auf dem Desktop erstellt haben und wir nennen diese Datei index.html. Das ist, was Sie immer die Hauptseite einer Website speichern, speichern Sie sie und dann werden wir unseren Web-Browser öffnen und wir werden einfach diese Datei direkt im Browser öffnen. Also öffnen, hier ist meine index.html Datei und wir können den Text Hallo, Welt sehen. 4. Einführung in HTML: HTML ist im Grunde eine Möglichkeit, den Inhalt einer Website in Container zu setzen , um eine Struktur zu erstellen. HTML verwendet Tags am Anfang und am Ende von Inhaltsstücken. Im Allgemeinen beginnt jeder Inhalt mit einem öffnenden Tag und endet mit einem schließenden Tag. Zum Beispiel <p> wird ein Tag verwendet, um einen Absatz zu erstellen. Mal sehen, wie wir einen um unseren Hello, Welttext setzen können. Wir beginnen mit dem öffnenden Tag am Anfang, das ist nur ein p in spitzen Klammern. Dann fügen wir unsere Inhalte hinzu. Dann setzen wir das schließende Tag am Ende, das mit dem öffnenden Tag identisch ist, außer mit einem Schrägstrich vor dem p. Jedes Mal, wenn Sie ein Tag mit oder ohne Inhalt darin haben, wird es ein Element genannt. Es gibt auch eine Reihe von Tags, mit denen Sie Überschriften und Unterüberschriften auf Ihrer Seite erstellen können. Dies sind h1, h2, h3, et cetera, den ganzen Weg durch h6. Standardmäßig werden diese kleiner, wenn die Liste weitergeht. H1 ist die größte, dann h2, et cetera. Zum Beispiel könnten wir eine Überschrift über unserem Hello, World Absatz setzen, indem wir ein h1-Tag verwenden. Abhängig von dem Browser, den wir verwenden, wird dieser Code zu etwas wie diesem führen. Hier ist unser h1 Element und unser p Element darunter. Es sieht noch nicht besonders schön aus, aber das ist okay. Das ist, wo CSS kommen, in einem späteren Video. Als Nächstes haben wir div-Tags. Divs werden hauptsächlich verwendet, um andere Elemente zusammenzufassen. Nehmen wir zum Beispiel an, wir wollten einen Rahmen um diese Elemente setzen oder eine Hintergrundfarbe hinter ihnen setzen oder sie in einen anderen Teil der Seite verschieben, ein div könnte uns helfen, dies zu tun. Wie Sie hier sehen können, können Tags verschachtelt werden, was bedeutet, dass wir ein Element in ein anderes setzen. Wir verschachteln Tags die ganze Zeit. Ansonsten gäbe es wirklich keine gute Möglichkeit, unsere Inhalte zu organisieren. Der einzige Trick beim Verschachteln ist, dass Sie daran denken müssen , die Tags in der richtigen Reihenfolge zu schließen. Denken Sie daran, wie wir gesagt haben, dass ein Element ein Container ist. Genau wie diese russischen Puppen müssen Sie jede innere schließen, bevor Sie die nächste äußere schließen können. 5. Lass uns Code schreiben: Gehen Sie voran und löschen Sie hallo Welt aus Ihrer index.html Datei, und wir werden anfangen, einige HTML zu schreiben. Alle HTML-Dokumente beginnen also mit der doc-Typ-Deklaration, die so aussieht. Das ist nur, um dem Browser zu sagen, dass wir HTML verwenden werden. der nächsten Zeile Lassen Sie uns inder nächsten Zeileein HTML-Tag erstellen. Hier ist also das öffnende Tag und das schließende Tag. Dann innerhalb dessen, wo wir all unseren Code setzen werden, werden wir ein Head-Tag und ein Body-Tag erstellen. Wir legen Informationen über die Seite in den Kopf und den tatsächlichen Inhalt, den wir im Körper anzeigen möchten. Beginnen wir im Körper und lassen Sie uns unserer Seite eine Überschrift geben. Also werden wir das h1-Tag verwenden und das kann alles sein, was Sie wollen. Ich rufe meins einfach über mich an. Speichern Sie es und jetzt, wenn wir zum Browser zurückkehren und aktualisieren, sollten Sie die Überschrift sehen, die Sie gerade erstellt haben. Nun lassen Sie uns unserem Dokument drei Absätze geben. Diese können so lang oder so kurz sein, wie Sie wollen. Sie können einen Roman schreiben. Ich werde meine kurz und süß halten. Also werde ich sagen: „Mein Name ist Emily. Ich bin ein Webentwickler. Ich liebe meine Katze.“ Wieder speichern und es gibt meine drei Absätze. Lassen Sie uns zum Schluss einen Titel hinzufügen. Der Titel ist, was in Ihrem Browser-Tab angezeigt wird. Da es sich nicht um Inhalte handelt, die auf der Seite selbst angezeigt werden, wird er im head-Tag statt im body angezeigt. Ich werde es geben, „Titel von Emilys Seite“, und gehen Sie zurück zum Browser, aktualisieren und hier oben in der Registerkarte, Sie können sehen, es sagt Emilys Seite. 6. Alles über Attribute: Tags machen nicht sehr viel alleine, außer Struktur zu erstellen. Der nächste Schritt besteht darin, ihnen Attribute zu geben. Verknüpfen Sie Elemente oder Tags, verwenden Sie Attribute, um die Linkadresse bereitzustellen. Lassen Sie uns ein Tag erstellen, ein steht übrigens für Anker. Nach dem dritten Absatz können Sie einfach ein Tag erstellen, und zuerst legen wir den Text, den wir anzeigen möchten, zwischen den öffnenden und schließenden Tags, genau wie wir es bereits gesehen haben. Ich möchte auf meine persönliche Website verlinken, also werde ich nur meine Website setzen. Sie können auch einen Link zu Ihrem Twitter oder einem Video auf YouTube, Website Ihres Unternehmens oder alles, was Sie wollen. Als nächstes geben wir unser Tag und jedes HREF-Attribut, das ihm mitteilt, zu welcher URL verlinkt werden soll. Innerhalb des öffnenden Tags direkt nach dem a setzen wir ein Leerzeichen und fügen dann ein Attribut von HREF hinzu, das für Hypertext-Referenz steht, und legen Sie es gleich URL, zu der Sie verlinken möchten, und das geht in Anführungszeichen. In meinem Fall ist das http://emilymaskin.com, und wenn wir zurück zur Seite gehen und aktualisieren, gibt es meinen Link. Bilder sind ein weiteres Element, das auf Attributen angewiesen ist. Sie benötigen ein Quellattribut, um ihnen mitzuteilen, welches Bild tatsächlich angezeigt werden soll. Gehen Sie weiter und finden Sie zwei Bilder, die Sie auf Ihrer Seite aufnehmen können. Sie werden sie in demselben Ordner speichern, den wir auf dem Desktop erstellt haben. Sie können Bilder verwenden, die Sie bereits auf Ihrem Computer haben, indem Sie sie in diesen Ordner kopieren. Oder Sie können Bilder online finden und sie in diesen Ordner herunterladen. Geben Sie Ihren Bildern ziemlich einfache Namen, wenn Sie sie speichern, z. B. me.jpg, wenn es sich um ein Bild von Ihnen handelt, so dass Sie sie später leicht referenzieren können. Ich habe bereits meins hinzugefügt. Ich entschied mich für Bilder von meiner Katze Lucy. Fühlen Sie sich frei, das Video zu pausieren und kommen Sie zurück, sobald Sie bereit sind. Fügen Sie Ihrem Dokument nun ein Bild-Tag hinzu, das IMG ist. Sie werden hier auf meinem bemerken, dass das Etikett ein wenig anders aussieht als die anderen. Es verfügt nicht über ein öffnendes Tag und ein schließendes Tag, da Bilder keinen Inhalt enthalten, sie sind der Inhalt. Jetzt geben wir das Bild-Tag und Attributquelle SRC und setzen es gleich dem Namen Ihrer ersten Bilddatei. Auch hier geht es in Anführungszeichen. Für mich ist das Lucy1.jpg. Wir geben ihm auch ein alt-Attribut. Alt wird verwendet, um Texte bereitzustellen, um anzuzeigen, ob irgendeinem Grund ein Fehler beim Laden des Bildes auftritt, und es ist auch wichtig für die Barrierefreiheit, zum Beispiel für Benutzer mit Bildschirmleseprogramm. Ich werde ihm alte Texte von Meiner Katze Lucy geben. Jetzt speichern wir es und gehen zurück. Da ist mein Bild. Wenn deine riesig herauskam, wie meine, mach dir jetzt keine Sorgen darüber. Wir werden das sehr bald beheben. Jetzt auf eigene Faust kannst du dasselbe für dein zweites Bild tun, und dann holen wir uns im nächsten Video zurück. 7. Einführung in CSS: Wir verwenden CSS, um Elemente zu stylen, indem wir im Wesentlichen sagen: „Hey Browser, jedes Mal, wenn Sie ein Element sehen, das dieser Beschreibung entspricht, tun Sie dies.“ Wir machen das mit diesem Format. Ich weiß, dass das die Dinge nicht viel klarer macht, also mal sehen, wie es in der Praxis aussieht. So wird beispielsweise der gesamte Text in allen Absatz-Tags rot angezeigt. Probieren wir es aus. Fügen Sie ein Style-Tag in Ihrem Head-Tag hinzu. Im Inneren werden H1, geschweifte Klammern, Farbe, Doppelpunkt, Rot, Semikolon hinzugefügt . Dadurch wird Ihre Überschrift rot. Grundfarben wie; rot, grün, blau, et cetera werden als Wörter erkannt. Andernfalls können wir Hex-Codes wie FF0000 verwenden, die ebenfalls rot ist. Wenn wir zurückgehen und uns auffrischen, ändert sich nichts, was wir erwarten würden. Wenn Sie zu HTML-Farbcodes.com gehen, können Sie mit der Suche nach dem genauen Farbton der genauen Farbe, die Sie suchen, spielen . Einige andere Stile, die Sie dem Text geben können, sind die Schriftgröße, die in Pixeln gemessen wird. Lassen Sie uns das 60 Pixe geben. Das ist ziemlich groß. Schriftfamilie, also das sind Dinge wie Times New Roman, Arial. Persönlich mag ich Garamond. Text ausrichten, wir gehen mit der Mitte. Mal sehen, wie das so weit aussieht. Unsere Überschrift ist jetzt 60 Pixel, sie ist zentriert und in Garamond. Lassen Sie uns versuchen, eine Grenze um unseren Header zu setzen. Rahmen erfordern drei Werte, das ist die Breite, der Stil und die Farbe. Hier ist ein Beispiel; Rahmen, zwei Pixel, durchgehend, blau. Speichern Sie und gehen Sie zurück. Dass es oben und unten ein wenig eng ist. Lassen Sie uns etwas Platz innerhalb der Box hinzufügen, also verwenden wir Padding, um dies zu tun. Padding gibt es 20 Pixel, speichern Sie und gehen Sie zurück. Ok, da ist ein bisschen mehr Platz. Das ist ziemlich gut. Vielleicht sollten wir der Box auch eine Hintergrundfarbe geben. Lassen Sie uns diesmal einen Hex-Code verwenden. Wir gehen einfach mit einem hellgrauen Farbton. Das kenne ich zufällig schon. Aber wieder können Sie einfach zu HTML-Farbcodes.com gehen und jeden Farbton finden, den Sie wünschen könnten. Lassen Sie uns auch einen Rand darunter hinzufügen. Wir werden 100 Pixel unter die Überschrift setzen. Nun, wenn wir zurückgehen und aktualisieren, können wir sehen, dass wir einen hellgrauen Hintergrund und eine 100 Pixel darunter haben. Es wird sicherlich keine Designpreise gewinnen. Aber hoffentlich können Sie hier das Potential sehen. Versuchen Sie, mit einigen dieser Eigenschaften auf Ihren H1-, P-, A- und Div-Tags herumzuspielen . 8. Spezifische Kurse mit Kursen: Sind deine Bilder so riesig wie meine? Wir können die width Eigenschaft verwenden, um sie nach unten zu verkleinern, also hier werden wir Bild als Selektor verwenden und ihm eine Breite von 300 Pixeln geben, speichern Sie es und gehen Sie zurück, und jetzt sind unsere Bilder schön und klein. Siehst du Probleme mit diesem Ansatz? Was ist, wenn Sie nicht möchten, dass beide Bilder die gleiche Größe haben. Wir können das Klassenattribut verwenden, um ein oder mehrere spezifische Elemente zu zielen , während die anderen ignoriert werden, also geben wir einem Bild eine Klasse von klein und eins eine Klasse von groß, also geben wir einem Bild eine Klasse von klein und eins eine Klasse von groß, jetzt können wir die Breite des kleinen auf 300 Pixel ändern, indem wir klein zu unserem Bildauswahl und es ist wichtig , dass es hier keinen Raum um den Punkt gibt, weil das etwas anderes macht, was ein wenig außerhalb des Geltungsbereichs dieser Klasse ist. Jetzt können wir zurückgehen und aktualisieren, und wir sehen, dass nur der erste auf 300 Pixel geschrumpft ist, und der andere ist wieder riesig. Also, jetzt lasst uns die zweite ändern, so dass wir Bild Punkt groß machen können, und wir geben, dass eine Breite von 500 Pixel, speichern und aktualisieren, und jetzt ein bisschen größer, aber immer noch ziemlich vernünftig. Eine andere Sache, die Sie hier ändern möchten ist die Tatsache, dass die Bilder jetzt nebeneinander und neben dem My Website-Link angezeigt werden, anstatt eins über dem nächsten zu sein, das passiert, weil Bildelemente und Verknüpfungselemente alle standardmäßig inline anzeigen, und was Inline-Anzeige bedeutet, ist, dass sie nur so viel Platz einnehmen, wie sie benötigen, und wir werden versuchen, so viele wie möglich in die gleiche Zeile zu passen. Das Gegenteil von Anzeige inline ist Anzeigeblock, und das weist das Element an, zur nächsten Zeile zu gehen, auch wenn noch Platz vorhanden ist. So können wir zurück zu unseren Bildselektoren gehen und beide Bilder zeigen Block, und dann, wenn wir aktualisieren und zurück, jetzt ist es eins übereinander, jetzt können Sie gehen und spielen mit einigen der anderen CSS-Eigenschaften, die wir gelernt haben, vielleicht möchten Sie Ränder zwischen den Bildern erstellen, vielleicht möchten Sie alles zentrieren, verrückt werden und Spaß haben. 9. Prüfung: Gehen wir über das, was wir gelernt haben. Zuerst haben wir gelernt, wie man eine neue HTML-Datei einrichtet. Als nächstes haben wir einige der HTML-Tags gelernt, mit denen Sie Inhalte zu Ihrer Seite hinzufügen können. Wir haben gelernt, Elemente Attribute zu geben, um ihnen mehr Informationen zur Verfügung zu stellen. Dann haben wir einige CSS-Eigenschaften gelernt und wie man sie anwendet. Wir haben das Klassenattribut verwendet, um einzelne Elemente oder Teilmengen von Elementen zu zielen. Wir haben einige der vielen CSS-Eigenschaften gelernt, die Sie verwenden können, um Ihre Website zu stylen. Wenn Sie etwas über einige der anderen erfahren möchten, schauen Sie sich den Link in der Klassenbeschreibung oder einfach nur Google CSS-Eigenschaften an. Für Ihr Klassenprojekt lade ich Sie ein, eine Profilseite über sich selbst oder eine andere Person zu erstellen. Verwenden Sie die HTML- und CSS, die wir heute gelernt haben, um Inhalte zu Ihrer Seite hinzuzufügen und sie zu gestalten. Viel Spaß und kreativ werden. Ich hoffe, dass Ihnen diese Einführung in HTML und CSS gefallen hat, und ich freue mich sehr, Ihre Projekte zu sehen.