Warum Sie programmieren lernen sollten (ein wenig): Eine Einführung in HTML & CSS

Veröffentlicht: 2021-08-15

Hinweis: Bevor Sie Änderungen am Code Ihres Shops vornehmen, stellen Sie immer sicher, dass Sie Ihre Website sichern.

Es war noch nie einfacher, einen Online-Shop zu eröffnen. Dank Plattformen wie Shopify können Sie innerhalb weniger Stunden ein Thema kaufen, Ihre Produkte hochladen und an Ihre Kunden verkaufen! Die Eintrittsbarriere ist so niedrig, dass es fast jeder schaffen kann.

Obwohl der Einstieg so einfach ist, ist es genauso einfach, diese Einfachheit als selbstverständlich zu betrachten. Irgendwann möchten Sie etwas in Ihrem Shop hinzufügen oder ändern und werden feststellen, dass Ihr Design dies nicht unterstützt. Entwickler sind nicht billig und das Letzte, was Sie tun möchten, ist, jemand anderen für etwas zu bezahlen, das Sie selbst hätten tun können.

Was wäre, wenn ich Ihnen sagen würde, dass Sie im Voraus ein wenig Zeit damit verbringen könnten, die Grundlagen der Funktionsweise von Websites zu erlernen, und dass Sie später Zeit und Geld sparen würden?

Am Ende dieses Artikels sollten Sie die Grundlagen von HTML & CSS kennen und genug wissen, um in Ihrem eigenen Shop zu basteln.

Nehmen Sie sich also ein paar Minuten Zeit, um sich fertig zu machen und los geht's!

Was ist HTML und CSS?

HTML steht für Hypertext Markup Language. Es ist eine der ältesten und wichtigsten Grundlagensprachen des Webs. Es ist für die Strukturierung und Darstellung der Inhalte auf dieser Seite verantwortlich!

CSS steht für Cascading Stylesheets. Es ist dafür verantwortlich, den HTML-Stil und die Formatierung bereitzustellen.

Zusammen sind dies die notwendigen Bausteine jeder Website. In diesem Artikel werde ich Sie durch die Grundlagen führen und Ihnen zeigen, wie Sie Ihre erste Webseite codieren und gestalten.

Da ich ein großer Fan von Bill Murray bin (wer ist es nicht), werden wir im Internet unseren eigenen Schrein für Bill erstellen.

Lassen Sie uns jedoch zunächst tiefer in HTML und CSS eintauchen, um ein umfassendes Verständnis ihrer Leistungsfähigkeit und Fähigkeiten zu erhalten.

Die Anatomie einer Website

Wir können leicht verstehen, wie HTML und CSS zusammenarbeiten, indem wir sie mit den strukturellen Teilen eines Hauses vergleichen.

Hinter den Mauern jedes Hauses verbirgt sich ein Rahmen, der für seine Struktur verantwortlich ist. Stellen Sie sich HTML wie einen Hausrahmen vor. Es ist für den Aufbau einer Website verantwortlich.

Um bei unserer Hausanalogie zu bleiben, ist CSS verantwortlich für Dinge wie die Farben des Anstrichs, die Abmessungen des Esszimmers, die Farbe der Holzböden und die Form und den Stil des Esstisches.

Sehen wir uns einige grundlegende HTML-Markups an und gehen sie Zeile für Zeile durch.

Beispiel für HTML-Markup

Dokumententyp

Das Tag <!DOCTYPE html> hilft dem Browser zu erkennen, dass der Dokumenttyp, mit dem wir arbeiten möchten, HTML ist.

Kopf

Im <head> -Tag speichern wir alle Metadaten unseres Dokuments. Diese Daten umfassen Dinge wie den Titel, Stile (CSS), Beschreibung und mehr. Diese Daten werden dem Endbenutzer nicht angezeigt, aber Browser verwenden sie, um zu bestimmen, wie das Dokument betitelt werden soll oder welche Stile es verwenden soll, wenn es dem Endbenutzer angezeigt wird.

Die Tools, die Sie zum Erstellen einer Website benötigen

Um mit dem Schreiben von HTML zu beginnen, denken Sie vielleicht, dass Sie eine ausgefallene, teure Software benötigen, aber das ist nicht der Fall. Tatsächlich haben Sie bereits, was Sie brauchen.

Wenn Sie einen PC verwenden, öffnen Sie das Programm NotePad. Wenn Sie einen Apple Mac verwenden, öffnen Sie TextEdit.

Nachdem Sie Ihr Textbearbeitungsprogramm geöffnet haben, folgen Sie mir, während wir das grundlegende HTML-Markup oben erweitern. Kopieren Sie (Strg + C auf Windows / Cmd + C auf Mac) und fügen Sie (Strg + p auf Windows / Cmd + P auf Mac) den folgenden Code in Ihren Texteditor ein.

<!DOCTYPE html>
<html>
<Kopf>
<title>Der Titel Ihrer Seite</title>
</head>
<Körper>
<h1>Hallo Welt!</h1>
<p>Dies ist unser erster Absatz.</p>
</body>
</html>

Speichern Sie diese Datei auf Ihrem Desktop und öffnen Sie sie in Ihrem Webbrowser. Ihr Code sollte nun übersetzt oder vom Browser gerendert angezeigt werden und in etwa so aussehen:

Code-Rendering-Beispiel

Das Überschrift-Element (<h1>)

Das <h1> -Tag wird verwendet, wenn Sie bestimmten Text Aufmerksamkeit und Definition verleihen möchten. In diesem Fall möchten wir den Text "Hello World!" größer und markanter sein als der nachfolgende Text.

HTML verfügt standardmäßig über sechs verschiedene Überschriften-Tags, die Sie verwenden können: h1, h2, h3, h4, h5 und h6.

Beispiele für HTML-Überschriften
Die Schriftgröße wird mit jedem „Schritt nach unten“ kleiner; H1 ist der größte und H6 der kleinste. Standardmäßig haben sie einen gewissen Rand (oder Abstand), um sie von anderen Elementen auf der Seite zu trennen und dem Benutzer eine visuelle Hierarchie zu geben.

Nehmen Sie sich eine Minute Zeit, um mit dem Ändern der Titel-, Überschriften- und/oder Absatz-Tags zu experimentieren. Nachdem Sie eine Änderung vorgenommen haben, speichern Sie sie und aktualisieren Sie dann Ihren Browser. Herzlichen Glückwunsch, Sie haben gerade HTML zum ersten Mal bearbeitet!

Sieht aber langweilig aus, oder?

Lassen Sie uns unserer Seite etwas Stil hinzufügen und mehr über die wahre Leistungsfähigkeit von CSS erfahren.

Um diesen HTML-Elementen unsere eigenen Stile hinzuzufügen, müssen wir im <head> unseres Dokuments ein <style> -Tag hinzufügen .

Dieses Tag umschließt unser gesamtes CSS. Stellen Sie sich den Inhalt des <style> -Tags als Styleguide des Browsers vor.

Fügen Sie unter dem <title> -Tag in einer neuen Zeile ein Style-Tag wie dieses hinzu:

<title>Der Titel Ihrer Seite</title>

Alternative (Profi-Tipp) zum Abrufen eines Bilds von einer Website: Suchen Sie ein Bild auf einer Website, das Sie verwenden möchten, und klicken Sie mit der rechten Maustaste darauf. Klicken Sie auf Bildadresse kopieren und die URL dieses Bildes befindet sich in Ihrer Zwischenablage. Je nach Browser kann die Formulierung leicht abweichen. Ich verwende Google Chrome. Ich empfehle nicht die übermäßige Verwendung von Hotlinking, aber für diese Demo ist es keine große Sache.

So speichern Sie ein Bild von einer Website

Kopieren Sie dieses Bildelement, fügen Sie es ein und platzieren Sie es unter Ihrem Absatz-Tag, damit Ihr vollständiger Codeblock wie meiner aussieht:

<!DOCTYPE html>
<html>
<Kopf>
<title> Der Titel Ihrer Seite </title>
<Stil>
h1 { Farbe : blau;}
</style>
</head>
<Körper>
<h1> Hallo Welt! </h1>
<p> Dies ist unser erster Absatz. </p>
<img src= “ https://www.fillmurray.com/400/500 ” alt=”Bild von Bill Murray” >
</body>
</html>

Speichern Sie Ihre Datei und laden Sie Ihren Browser neu und Sie sollten jetzt etwa Folgendes sehen:

So beginnen Sie mit dem Codieren Ihrer ersten Website

Wenn Sie aufgepasst haben, ist Ihnen ein weiteres Attribut des <img> -Tags aufgefallen , das alt="image of Bill Murray" . Da der Browser Code entschlüsselt und die gerenderte Ausgabe nicht wie Sie und ich sehen kann, muss er den Kontext seiner Anzeige kennen.

Aber was ist mit Links?

Keine Einführung in HTML/CSS wäre vollständig, ohne Links zu behandeln! Wenn Sie eine Website erstellen, möchten Sie die Möglichkeit haben, Links zu erstellen, sei es auf externe Quellen oder auf andere interne Seiten innerhalb Ihrer eigenen Website.

Sprechen wir über das Ankerelement. Die wahre Magie eines Ankerelements ist eigentlich sein href-Attribut. Lassen Sie uns die Struktur eines Anker-Tags demonstrieren, indem wir einen Link zu Bills Wikipedia-Seite hinzufügen.

<a href= „www.google.com“ > Lesen Sie seinen Wikipedia-Eintrag </a>

Dieser Code teilt dem Browser mit, dass ein Benutzer, wenn er auf den Text „Lesen Sie seinen Wikipedia-Eintrag“ klickt, ihn zu www.google.com führt.

Fügen wir diesen Code direkt unter unserem Überschriftenelement hinzu, damit unser Codeblock jetzt so aussieht:

<!DOCTYPE html>
<html>
<Kopf>
<title> Der Titel Ihrer Seite </title>
<Stil>
h1 { Farbe : blau;}
</style>
</head>
<Körper>
<h1> Hallo Welt! </h1>
<a href= „https://en.wikipedia.org/wiki/Bill_Murray“ > Lesen Sie seinen Wikipedia-Eintrag </a>
<p> Dies ist unser erster Absatz. </p>
<img src= „https://www.fillmurray.com/400/500“ alt= „Bild von Bill Murray“ >
</body>
</html>

Klicken Sie auf Speichern und aktualisieren Sie den Browser und hoffentlich sieht Ihrer aus wie meiner.

Programmiergrundlagen

Über die Ziellinie bringen

Ich habe meine kleine Hommage an Bill Murray gestylt und hier ist mein Endergebnis. Ich werde einige der hinzugefügten Stile unten durchgehen.

Trommelwirbel bitte…

Die Grundlagen von HTML und CSS

Nun, Sie können sehen, dass dies nichts ist, worüber man nach Hause schreiben sollte, aber das ist beabsichtigt. Dies ist nur die Spitze des Eisbergs, wenn es darum geht, wie diese Seite aussehen oder gestaltet werden könnte. Ich wollte die Dinge einfach halten, damit Sie verstehen, was jede der folgenden Styling-Methoden bewirkt.

Schriftfamilie
Ich wollte die Schriftart von den Standardbrowsern von Times New Roman ändern. Dafür habe ich Helvetica als meine erste Wahl gewählt (wenn der Benutzer diese Schriftart auf seinem Computer installiert hat), Arial als meine zweite Wahl (wenn der Benutzer keine Helvetica hat, wird es standardmäßig zu Arial) und als letztes Backup , eine einfache serifenlose Schriftart.

Textausrichtung
Ich habe mich dafür entschieden, den gesamten Text auf meiner Seite zentriert auszurichten. Es gibt ein paar andere Optionen für Werte wie links und rechts, aber ich dachte, dafür sieht es am besten zentriert aus.

Rand
Ich habe dem Hauptteil des Dokuments einen kleinen Rand hinzugefügt, um ihm etwas Luft zum Atmen zu geben.

Unser Image gestalten:

Zuletzt habe ich Bills schönes Gesicht gestylt, äh, ich meine das Bildelement

img {
Rahmen: 10px solide #41bcd6;
Kastenschatten: 2px 5px 5px #999;
Polsterung: 10px;
Randradius: 5px;
}

Ich tat nicht viel, wollte aber Bills Foto etwas Präsenz auf der Seite verleihen.

Saum
Ich habe einen 10px-Rahmen um das Bild herum hinzugefügt. #41bcd6 ist ein weiterer hexadezimaler Farbwert, der eine hellblaue Farbe wiedergibt (Teil meines geheimen unterschwelligen Steve Zissou-Farbthemas).

Box Schatten
Ich wollte dem Bild ein dreidimensionales Gefühl geben, also fügte ich ihm einen hellen Schatten hinzu. Die Eigenschaft box-shadow akzeptiert Pixel- und Farbwerte, die die Länge, Unschärfe und Farbe des Schattens bestimmen. Um mehr über die Box-Shadow-Deklaration zu erfahren, hat Moz sie hier gut für Sie aufgeschlüsselt.

Polsterung
Damit das Bild eher wie ein Bilderrahmen aussieht, habe ich 10px Padding zwischen ihm und dem Rand hinzugefügt.

Grenzradius
Nur um eine der cooleren Fähigkeiten von CSS zu veranschaulichen, habe ich die Ecken des Bildes abgerundet, indem ich border-radius verwendet habe. Als ich anfing, Websites zu erstellen, gab es nichts Vergleichbares, und das Erstellen abgerundeter Ecken im Web war eigentlich eine ziemliche Herausforderung. Seitdem haben wir einen langen Weg zurückgelegt, und jetzt ist es ziemlich einfach. Es akzeptiert einen Wert wie px oder ems, und hier habe ich mich entschieden, ihn genug zu runden, um es zu bemerken, indem ich den Wert auf 5px gesetzt habe.

Abschluss

In diesem Artikel haben wir zusammengearbeitet, um die grundlegende Anatomie einer Website zu lernen. Wir haben auch etwas einfaches HTML und CSS gelernt, was letztendlich zu einer ziemlich erstaunlichen kleinen einseitigen Hommage an einen der größten Schauspieler einer Generation aller Zeiten wurde

Aber im Ernst, ich hoffe, Sie konnten mir folgen und Ihre erste Basis-Website aufbauen. Wenn Bill Murray nicht Ihr Lieblingsschauspieler ist, fordere ich Sie auf, diesen Code zu bearbeiten, um Ihren Lieblingsschauspieler, Ihre Lieblingsband oder was auch immer Sie möchten, zu präsentieren.

Wenn Sie jederzeit auf diesen Code verweisen müssen, kommen Sie zurück und lesen Sie diesen Artikel, oder der Einfachheit halber habe ich ihn hier auf CodePen gestellt.

Es gibt so viele lustige Dinge , die Sie mit nur HTML + CSS tun können. Hier sind ein paar großartige Ressourcen für Sie, um Ihr Lernen zu erweitern:

Code Academy: 100% KOSTENLOSE Einführung in den HTML/CSS-Kurs
CSS Zen Garden: Das erste Beispiel im Web, das für mich wirklich „geklickt“ hat, um mir zu verdeutlichen, dass Sie 100 unterschiedlich aussehende Websites haben können, die alle das gleiche HTML-Markup verwenden
CSS-Animationen
Die Mona Lisa nur mit CSS
Animierter Husky-Hund nur mit CSS
CodePen: CodePen ist ein Online-Tool zum LIVE-Testen und Präsentieren Ihres HTML-, CSS- und JavaScript-Codes

Wir haben in diesem Artikel ernsthaft nur an der Oberfläche gekratzt, daher empfehle ich Ihnen, mehr zu lesen, einige Online-Kurse zu belegen und Ihr Wissen weiterzuentwickeln!

Warum Sie programmieren lernen sollten (ein wenig): Eine Einführung in HTML & CSS

Was ist HTML und CSS?

Die Anatomie einer Website

Dokumententyp

Kopf

Werbung

Körper

Die Tools, die Sie zum Erstellen einer Website benötigen

Das Überschrift-Element (<h1>)

Sieht aber langweilig aus, oder?

Werbung

Hinzufügen von Bildern zu unserer Seite

Werbung

Aber was ist mit Links?

Über die Ziellinie bringen

Werbung

Den Körper stylen:

Unser Image gestalten:

Abschluss

Werbung