Ghidul pentru începători pentru HTML și CSS

Das Anfängerhandbuch für HTML und CSS

⌛ Reading Time: 9 minutes

Obwohl Sie heute viele verschiedene Technologien finden, die unsere Websites antreiben, sind HTML und CSS die beiden wichtigsten Dateien im gesamten Internet. Ja, wenn Sie etwas Komplexes benötigen, benötigen Sie auch mehr Technologien. Wenn Sie jedoch nur eine einfache persönliche Webseite erstellen möchten, benötigen Sie lediglich HTML und CSS.

Einführung in die Grundlagen

Dies ist eine Anfängeranleitung für HTML und CSS, die Ihnen zeigt, wie Sie so einfach wie möglich eine einfache Site erstellen. Die Ergebnisse müssen nicht unbedingt „standardkonform“ sein. Und Sie müssen selbst etwas lesen, wenn Sie es weiter optimieren und erweitern möchten. Aber es wird eine Site sein und in den meisten Browsern “so funktionieren, wie es sollte”.

Da der Platz knapp ist, werden wir nicht zu tief in jeden Aspekt der Webentwicklung und des Webdesigns eintauchen. Stattdessen führen wir Sie durch die Schritte von Null zu einer voll funktionsfähigen Webseite und erklären, was alles in diesem Prozess tut.

Die zwei notwendigen Dateien

Eine moderne Site besteht aus vielen Dateien, aber zwei sind die wichtigsten: eine HTML- und eine CSS-Datei. Die HTML-Datei definiert die Elemente und die Struktur einer Seite. Die CSS-Datei definiert das Erscheinungsbild dieser Elemente.

Beides sind im Wesentlichen typische Textdateien, die spezifisch strukturierten Text enthalten. Sie benötigen keine spezielle Art von Programm, um sie zu erstellen oder zu optimieren: Jeder „einfache“ Texteditor reicht aus. Mit “einfach” meinen wir Ihre typische Anwendung im Editor-Stil, nicht so etwas wie den Editor von LibreOffice oder Microsoft Words, das den Text in irgendeiner Weise “bereichern” könnte.

Der erste Schritt besteht darin, einen neuen Ordner auf Ihrem Desktop mit zwei leeren Textdateien zu erstellen. Nennen Sie einen von ihnen “index.html” und den zweiten “style.css”.

Richten Sie Ihren Arbeitsbereich ein

Führen Sie Ihren bevorzugten Browser aus und laden Sie die HTML-Datei darin, indem Sie entweder “Datei -> Öffnen” auswählen oder die Datei in das Fenster ziehen und dort ablegen.

Öffnen Sie sowohl die HTML- als auch die CSS-Datei in Ihrem bevorzugten Texteditor vom Typ Editor.

Die bequemste Arbeitsweise besteht darin, alle drei Fenster gleichzeitig anzeigen zu können. Wenn Sie nicht über zwei Bildschirme verfügen, empfehlen wir, die Fenster wie in unserem Bild unten anzuordnen.

Richten Sie einen Site Workspace ein

Kleben Sie Ihr Browserfenster auf eine Seite des Bildschirms, um die Hälfte davon (vertikal) 4 zu belegen, und platzieren Sie die beiden Notizblockfenster auf der anderen Seite untereinander.

Bausteine

Schreiben Sie mit der HTML-Datei etwas auf den Notizblock und speichern Sie die Änderungen. Aktualisieren Sie anschließend Ihr Browserfenster, indem Sie F5 drücken. Sie sehen sofort, dass der von Ihnen geschriebene Text in Ihrem Browserfenster angezeigt wird.

Herzlichen Glückwunsch zum Einrichten Ihrer ersten Website! Und wir machen keine Witze, da sich die ersten Websites im Internet in ihrem Erscheinungsbild nicht wesentlich von denen unterschieden, die Sie gerade erstellt haben. Das Wichtigste war damals der Inhalt selbst.

Mit HTML können Sie “markieren, was jeder Inhalt ist”, indem Sie einen bestimmten Satz von “Codes” verwenden. Einige der wichtigsten sind:

  • html: Bezeichnet ein HTML-Dokument. Sollte am Anfang jeder HTML-Datei stehen.
  • body: Der gesamte Inhalt, den Sie in einem Browser sehen, ist darin enthalten body Etikett. Es repräsentiert den visuellen Aspekt eines HTML-Dokuments.
  • p: Textabsatz
  • img: Bilder
  • a href: Links zu Webadressen
  • div: Legt ein “Kästchen” um jeden Inhalt fest, den Sie dann mit CSS “stylen” können.

Um einen Inhalt zu „definieren“, muss er normalerweise von demselben Code mit einer leichten Differenzierung am Anfang und am Ende eingeschlossen werden. Ein Textabschnitt ist beispielsweise wie folgt definiert:

” bedeutet, dass “das Folgende ein Absatz ist” und ““, dass “der Absatz hier endet”. Indem Sie in beiden Fällen “p” durch “div” ersetzen, definieren Sie ein Feld, das den Inhalt einschließt, anstatt ihn als Absatz zu markieren.

Beachten Sie, dass es Ausnahmen gibt: Elemente wie Bilder (img) und Trennlinien (h) erfordern keinen „Abschlusscode“.

Machen Sie eine Site ersten Absatz

Ändern und aktualisieren

Ersetzen Sie alles in Ihrer HTML-Datei durch Folgendes:

Aktualisieren Sie Ihren Browser (F5), und die Wörter HEADER, CONTENT und FOOTER werden untereinander angezeigt. Wir haben gerade drei unsichtbare, autonome “div” -Boxen erstellt. Jeder von ihnen enthält eines der Wörter.

Um ihr Erscheinungsbild über CSS definieren zu können, haben wir jedem ein Schlüsselwort zugewiesen, eine „Identität“ (die „ID = Name“ im Code), die ihrem Inhalt entspricht: Kopfzeile, Inhalt und Fußzeile. Alle Elemente auf einer Webseite können einen solchen Alias ​​haben, der entweder als “Klasse” oder als “ID” eingerichtet ist. Klassen definieren Aliase für Elemente, die mehrmals auf derselben Webseite angezeigt werden, z. B. Absätze, Links usw. IDs definieren Aliase für Elemente, die auf jeder Seite nur einmal vorkommen, z. B. den Namen oder das Logo einer Site.

Erstellen Sie eine Inhaltszeile für den Site-Header

Echter Inhalt

Löschen Sie das Wort “HEADER” zwischen den Div-Codes – ohne deren Struktur zu ändern – und geben Sie stattdessen den Namen ein, den Sie für Ihre Site wünschen.

Machen Sie dasselbe für Ihren „INHALT“, aber anstatt nur Text einzugeben, müssen Sie auch den Anfang und das Ende jedes Absatzes „markieren“, wie wir zuvor gesehen haben. Ersetzen Sie den „INHALT“ durch zwei oder drei Textabschnitte.

Jetzt ist es an der Zeit, auch über Links zu sprechen. Um eine Phrase in Ihrem Text in einen Link umzuwandeln, strukturieren Sie sie wie folgt:

Sie können dies kopieren und einfügen und “ADRESSE” durch “Auf was Ihr Link zeigen soll” und “TEXT” durch die Phrase ersetzen, die auf Ihrer Site angezeigt wird. Wir haben einen Satz in unserer Fußzeile mit unserer Website wie folgt verknüpft:

Ersetzen Sie abschließend das Wort “FOOTER” durch Ihren Namen, einen kleinen Satz, der angibt, wer die Website entworfen hat oder besitzt oder was Sie sonst noch möchten.

Speichern Sie die Änderungen und aktualisieren Sie Ihren Browser, um sie dort anzuzeigen.

Machen Sie eine Site zum eigentlichen Inhalt

Du hast Style (.CSS)

Das erste Element einer Webseite ist der Kopf. Darin finden wir normalerweise Code, der die Identität der Site, ihren Namen, ihren Ersteller und ihre Sprache sowie alle Technologien definiert – abgesehen von HTML – – darin verwendet. Dort leben die meisten Links zu externen JavaScript- und CSS-Dateien. Fügen Sie Ihrer Site eine hinzu, indem Sie Folgendes ganz oben in Ihre HTML-Datei einfügen, direkt nach dem html Etikett:

Um die Elemente einer Webseite mit CSS formatieren zu können, müssen Sie die CSS-Datei aus dem HTML-Code laden. Und das bedeutet, es in deinen „Kopf“ aufzunehmen. Im Folgenden wird angegeben, dass die HTML-Seite mit einer “Stylesheet” -Datei vom Typ “text / css” verknüpft wird. mit dem Namen “style.css”:

Kopieren Sie unseren Code und fügen Sie ihn so ein, wie Sie ihn sehen, “innerhalb” des Kopfes – also unter “” und über “”. Speichern Sie die Änderungen und lenken Sie Ihre Aufmerksamkeit auf die CSS-Datei. Geben Sie dort Folgendes ein:

Machen Sie eine Site First Css

Echte Seite

CSS oder Cascading Style Sheets sind einfach Sätze von Anzeigeregeln, die bestimmten Elementen einer Webseite entsprechen. Mit CSS können wir sowohl “wo” als auch “wie” gestalten, wie alles auf einer Webseite angezeigt wird.

Im vorherigen Schritt haben wir eine Reihe von leeren Regeln für alle Elemente auf unserer Seite eingeführt. Lassen Sie uns nun sehen, wie wir ihnen Parameter hinzufügen können, die ihr Erscheinungsbild definieren.

Beginnen Sie mit dem Körper, der alles auf Ihrer Website enthält. Ändern Sie es wie folgt:

Die obigen Regeln besagen, dass unsere Site die gesamte Breite des Browserfensters einnehmen soll (Breite: 100%), dass sie keinen Abstand zu den Rändern des Browserfensters haben soll (Rand: 0) und dies nicht tun soll möchte ein Leerzeichen um ihn herum (Auffüllen: 0).

Alle Regeln für ein Element sollten in Klammern stehen und jede Regel sollte mit einem “;” enden. wie folgt:

Aktualisieren Sie anschließend Ihr CSS “#header, #content, #footer” wie folgt:

Damit sagen Sie, dass die Position aller drei Elemente einigen gemeinsamen Regeln folgen sollte: Jedes sollte „relativ“ zum vorherigen sein und ihm „folgen“ (float: left). Unabhängig von ihrer Größe, Form, Erscheinung oder einem anderen Faktor „drückt“ jeder von ihnen das nächste Element und sie überlappen sich nie.

Aktualisieren Sie #header, #footer wie folgt, damit Ihre Webseite eher wie eine tatsächliche Site aussieht:

Das Obige definiert, dass sowohl die Kopf- als auch die Fußzeile unserer Website 100% breit und 100 Pixel hoch sein sollen und dass der darin angezeigte Text 3em groß und zentriert ist.

Die Hintergrund- und Farbregeln legen jeweils fest, welche Farbe die gesamte Kopf- und Fußzeile „div box“ haben wird und welche Farbe der darin enthaltene Text hat. „RGBA“ legt die Farbe basierend auf dem Farbmischstandard Rot – Grün – Blau fest. Jede Farbe kann einen Wert von 0 bis 255 haben, wobei Kombinationen verschiedener Rot-, Grün- und Blauwerte die Anzeige einer beliebigen Farbe ermöglichen. Die letzte Zahl entspricht der Transparenz. So würde RGBA (255,0,0,0,5) ein durchscheinendes Rot ergeben, während RGBA (50,50,255,1) ein helles und „festes“ Blau ergeben würde.

Konzentrieren Sie sich abschließend auf den grundlegenden Inhalt der Website. Definieren Sie sein Erscheinungsbild als:

Speichern Sie alle Änderungen erneut und aktualisieren Sie Ihr Browserfenster, um sie anzuzeigen.

Bildstyling

Erstellen Sie eine Site, indem Sie Bilder hinzufügen

Um Ihrer Site Bilder hinzuzufügen, müssen Sie zur HTML-Datei zurückkehren. Geben Sie dort “innerhalb” des Inhalts, jedoch vor dem ersten Absatz, Folgendes ein:

Wobei “PATH” und “FILE.JPG” der “Speicherort” und der Dateiname eines Bildes sind, das entweder online oder lokal verfügbar ist, und “TEXT” eine Beschreibung dessen, was es für Barrierefreiheitszwecke darstellt.

Machen Sie eine Site Crude Image Addition

Wenn Sie versuchen, nach dieser Hinzufügung zu speichern und nach Änderungen zu suchen, werden Sie feststellen, dass Ihre Site deformiert ist. Das Problem wird behoben, sobald Sie CSS-Regeln für die Anzeige von Bildern auf Ihrer Website erstellen.

Kehren Sie zur CSS-Datei zurück und legen Sie fest, wie alle Bilder (img) linksbündig ausgerichtet werden sollen, und folgen Sie dabei dem Fluss anderer Elemente (float: left und position: relative).

Machen Sie eine Site Bilder behoben

Um die Seitengrenzen nicht zu überschreiten, geben Sie an, wie deren Breite das Maximum der Seite selbst sein soll (Breite: 100%). Fügen Sie oben und unten einen vertikalen Rand hinzu, um zu vermeiden, dass die Bilder Ihren Text berühren. Das Ergebnis sollte folgendermaßen aussehen:

Erstellen Sie eine Site-ausgerichtete Bilder

Schließen Sie ab, indem Sie ein weiteres Bild hinzufügen, diesmal links oder rechts ausgerichtet. Nach wie vor sollten Sie zunächst zum HTML-Code zurückkehren und dort einen Link zu Ihrem Bild einfügen, wie wir bereits gesehen haben. Der Unterschied besteht darin, dass Sie dem Element eine „Klasse“ hinzufügen müssen, einen Bezeichner. Anschließend geben Sie über CSS-Anzeigeregeln Regeln und alle anderen Elemente an, an die dieselbe Klasse angehängt ist.

Wir haben unsere Klasse “alignright” genannt, da jedes Objekt, an dem es angehängt ist, auf der rechten Seite angezeigt werden soll.

Versuchen Sie, den Code selbst zu erstellen. Fügen Sie eine hinzu .alignright {} Klasse in Ihrer “style.css”, und erstellen Sie dann Regeln, die es formatieren sollten. Der CSS-Code sollte angeben, dass die Elemente auf der rechten Seite der Seite schweben und 46% breit sein sollen (Breite: 46%). Wir möchten nicht, dass die Bilder den Text berühren, daher sollten wir auch eine Lücke von 2% um sie herum hinzufügen, aufgeteilt in 1% Rand (Abstand zu jedem anderen Element) und 1% Abstand (etwas „zusätzlicher Leerraum um das Element“ ”).

Daher sollten unsere Regeln definieren, dass jedes Bild mit einem .alignright Die angehängte Klasse nimmt 46% der Seitenbreite plus 1% Rand auf jeder Seite plus 1% Polsterung auf jeder Seite ein. Alles summiert sich auf 50% – genau die Hälfte der Seitenbreite. Das Ergebnis sollte ungefähr so ​​aussehen:

Nächste Seite

Ihre erste Webseite ist fertig und voll funktionsfähig. Indem Sie mehr über HTML und CSS erfahren, können Sie den Inhalt weiter bereichern, neue Elemente hinzufügen und das Erscheinungsbild verbessern. Versuchen Sie als nächsten Schritt, die HTML-Datei zu kopieren und umzubenennen, ihren Inhalt zu ändern und jede neue Seite mit den anderen zu verknüpfen.

Es klingt nicht zu schwer, oder? Willkommen bei der Webentwicklung: Durch Kopieren, Ändern und Verknüpfen verschiedener Seiten über Links haben Sie Ihre erste vollständige, “richtige” mehrseitige Website erstellt!

Bildnachweis: Pluks Kätzchen, Pluks Kätzchen, IMG_20171124_142629