Der Anfängerleitfaden für HTML und CSS

Obwohl Sie viele verschiedene Technologien finden können, die unsere Websites heute antreiben, sind die zwei wichtigsten Dateien im gesamten Internet HTML und CSS. Ja, wenn Sie etwas Komplexes benötigen, werden Sie auch mehr Technologien benötigen, die damit einhergehen. Aber wenn Sie nur eine einfache persönliche Webseite erstellen möchten, sind HTML und CSS alles, was Sie brauchen.

Einführung in die Grundlagen

Dies ist ein Anfängerleitfaden für HTML und CSS, der Ihnen zeigt, wie Sie so schnell wie möglich eine einfache Website erstellen können. Die Ergebnisse werden nicht unbedingt “standardskonform” sein. Und Sie müssen etwas selbst lesen, wenn Sie es weiter anpassen und erweitern möchten. Aber es wird eine Website sein und in den meisten Browsern “funktionieren, wie sie sollte”.

Da der Platz begrenzt ist, werden wir nicht zu tief in jeden Aspekt der Webentwicklung und des Designs eintauchen. Stattdessen führen wir Sie durch die Schritte, um von null zu einer voll funktionsfähigen Webseite zu gelangen, und erklären, was alles im Prozess tut.

Die zwei notwendigen Dateien

Eine moderne Website 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 Aussehen dieser Elemente.

Beide sind im Wesentlichen typische Textdateien, die speziell strukturierten Text enthalten. Sie benötigen kein spezielles Programm, um sie zu erstellen oder zu bearbeiten: jeder “einfache” Texteditor reicht aus. Mit “einfach” meinen wir Ihre typische Notepad-ähnliche Anwendung, nicht etwas wie den Editor von LibreOffice oder Microsoft Word, die den Text auf irgendeine Weise “bereichern” könnten.

Der erste Schritt besteht darin, einen neuen Ordner auf Ihrem Desktop zu erstellen, in dem sich zwei leere Textdateien befinden. Nennen Sie eine von ihnen “index.html” und die zweite “style.css.”

Richten Sie Ihren Arbeitsbereich ein

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

Öffnen Sie sowohl die HTML- als auch die CSS-Datei in Ihrem bevorzugten Notepad-ähnlichen Texteditor.

Es ist am bequemsten, alle drei Fenster gleichzeitig zu sehen. Wenn Sie nicht über zwei Bildschirme verfügen, um sie zu verteilen, empfehlen wir, die Fenster wie in unserem Bild unten anzuordnen.

“Heften” Sie Ihr Browserfenster an eine Seite des Bildschirms, um die Hälfte davon (vertikal) zu belegen, und platzieren Sie die beiden Notepad-Fenster auf der anderen Seite, eines unter dem anderen.

Bausteine

Schreiben Sie etwas in das Notepad mit der HTML-Datei und speichern Sie die Änderungen. Aktualisieren Sie dann Ihr Browserfenster, indem Sie F5 drücken. Sie werden sofort sehen, dass der Text, den Sie geschrieben haben, in Ihrem Browserfenster erscheint.

Herzlichen Glückwunsch, dass Sie gerade Ihre erste Website eingerichtet haben! Und wir machen keinen Scherz, denn die ersten Websites im Internet unterschieden sich in ihrem Aussehen nicht viel von dem, was Sie gerade erstellt haben. Das Wichtigste war damals der Inhalt selbst.

HTML ermöglicht es Ihnen, “zu kennzeichnen, was jedes Stück Inhalt ist”, indem Sie eine spezifische Menge an “Codes” verwenden. Einige der wichtigsten sind:

• html: Bezeichnet ein HTML-Dokument. Sollte am Anfang jeder HTML-Datei stehen.
• body: Alle Inhalte, die Sie in einem Browser sehen, sind in diesem body-Tag eingeschlossen. Es repräsentiert den visuellen Aspekt eines HTML-Dokuments.
• p: Textabsatz
• img: Bilder
• a href: Links zu Webadressen
• div: Setzt eine “Box” um jedes Stück Inhalt, das Sie dann mit CSS “stylen” können.

Um ein Stück Inhalt zu “definieren”, muss es normalerweise von demselben Code umschlossen sein, mit einer leichten Differenzierung am Anfang und Ende. Zum Beispiel wird ein Textabsatz definiert als:

Standard Textabsatz

“

” zeigt an, dass “was folgt ein Absatz ist” und “

Beachten Sie, dass es Ausnahmen gibt: Elemente wie Bilder (img) und Trennlinien (hr) benötigen keinen “schließenden Code.”

Ändern und aktualisieren

Ersetzen Sie alles in Ihrer HTML-Datei durch Folgendes:

  
  
HEADER
  
CONTENT
  
FOOTER
  
  

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

Um ihr Aussehen durch CSS definieren zu können, haben wir jedem von ihnen ein Schlüsselwort, eine “Identität” (das “id=name” im Code) zugewiesen, die ihrem Inhalt entspricht: header, content und footer. Alle Elemente auf einer Webseite können ein solches Alias haben, das entweder als “Klasse” oder als “ID” eingerichtet ist. Klassen definieren Aliase für Elemente, die mehrmals auf derselben Webseite erscheinen, wie Absätze, Links usw. IDs definieren Aliase für Elemente, die nur einmal auf jeder Seite erscheinen, wie den Namen oder das Logo einer Website.

Echter Inhalt

Löschen Sie das Wort “HEADER” zwischen den div-Codes – ohne ihre Struktur zu ändern – und geben Sie stattdessen den Namen ein, den Sie für Ihre Website möchten.

Machen Sie dasselbe für Ihren “CONTENT”, aber anstatt nur Text einzugeben, stellen Sie auch sicher, dass Sie den Anfang und das Ende jedes Absatzes markieren, wie wir es zuvor gesehen haben. Ersetzen Sie den “CONTENT” durch zwei oder drei Absätze Text.

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

TEXT

Sie können dies kopieren und “ADRESSE” durch “das, worauf Ihr Link zeigen soll” und “TEXT” durch den Satz ersetzen, der auf Ihrer Website angezeigt wird. Wir haben einen Satz in unserer Fußzeile mit folgendem Link zu unserer Website verbunden:

Make Tech Easier

Ersetzen Sie schließlich das Wort “FOOTER” durch Ihren Namen, einen kleinen Satz, der angibt, wer die Website entworfen oder besitzt, oder alles andere, was Sie möchten.

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

Sie haben Stil (.CSS)

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

Um die Elemente einer Webseite mit CSS zu stylen, müssen Sie die CSS-Datei aus der HTML-Datei laden. Und das bedeutet, sie in Ihrem “head” einzuschließen. Folgendes zeigt an, dass die HTML-Seite eine “Verknüpfung” zu einer “Stylesheet”-Datei vom Typ “text/css” mit dem Namen “style.css” herstellen wird:

Kopieren und fügen Sie unseren Code genau so ein, wie Sie ihn sehen, “innerhalb” des Kopfes – das heißt, unter “” und über “”. Speichern Sie die Änderungen und wenden Sie sich der CSS-Datei zu. Geben Sie dort Folgendes ein:

body {}  
#header, #content, #footer {}  
#header, #footer {}  
#header {}  
#content {}  
#footer {}  
img {}

Echte Website

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

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 Parameter hinzufügen können, die ihr Aussehen definieren.

Beginnen Sie mit dem body, der alles auf Ihrer Website umfasst. Ändern Sie es wie folgt:

body {  
  width: 100%;  
  position: relative;  
  margin: 0;  
  padding: 0;  
}

Die obigen Regeln besagen, dass wir möchten, dass unsere Website die gesamte Breite des Browserfensters einnimmt (width: 100%), dass wir nicht möchten, dass sie einen Abstand zu den Rändern des Browserfensters hat (margin: 0), und dass wir keinen Leerraum um sie herum möchten (padding: 0).

Alle Regeln für ein Element sollten zwischen geschweiften Klammern eingeschlossen sein, und jede Regel sollte mit einem “;” enden, wie folgt:

#Element_ID {  
  REGEL 1;  
  REGEL 2;  
  REGEL 3;  
}

Fahren Sie fort, indem Sie Ihr “#header, #content, #footer” CSS auf Folgendes aktualisieren:

#header, #content, #footer {  
  float: left;  
  position: relative;  
}

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 wird jedes von ihnen das nächste Element “drücken”, und sie werden sich niemals überlappen.

Aktualisieren Sie #header, #footer mit Folgendem, um Ihre Webseite mehr wie eine tatsächliche Website aussehen zu lassen:

#header, #footer {  
  width: 100%;  
  height: 100px;  
  background: rgba(0, 0, 0, 0.9);  
  color: rgba(255, 255, 255, 0.9);  
  text-align: center;  
  font-size: 12px;  
}

Die obigen Regeln definieren, dass wir möchten, dass sowohl der Header als auch die Fußzeile unserer Website 100% breit, 100 Pixel hoch sind und dass der darin angezeigte Text 3em groß und zentriert ist.

Die Hintergrund- und Farbregeln geben an, welche Farbe die gesamte Header- und Fußzeilen-“div-Box” haben wird und die Farbe des darin enthaltenen Textes. “RGBA” legt die Farbe basierend auf dem Rot-Grün-Blau-Farbmischstandard fest. Jede Farbe kann einen Wert von 0 bis 255 haben, wobei Kombinationen verschiedener Rot-, Grün- und Blauwerte die Anzeige jeder Farbe ermöglichen. Die letzte Zahl entspricht der Transparenz. So würde RGBA(255,0,0,0.5) uns ein durchscheinendes Rot geben, während RGBA(50,50,255,1) ein helles und “festes” Blau ergeben würde.

Beenden Sie, indem Sie sich auf den grundlegenden Inhalt der Website konzentrieren. Definieren Sie sein Aussehen wie folgt:

#content {  
  width: 80%;  
  background: rgba(255, 255, 255, 0.9);  
  color: rgba(0, 0, 0, 0.9);  
  margin: 0 10%;  
}

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

Bildgestaltung

Um Bilder zu Ihrer Website hinzuzufügen, müssen Sie zurück zur HTML-Datei gehen. Geben Sie dort “innerhalb” des Inhalts, aber vor dem ersten Absatz, Folgendes ein:

Wo “PATH” und “FILE.JPG” der “Standort” und der Dateiname eines beliebigen Bildes sind, das entweder online oder lokal verfügbar ist, und “TEXT” eine Beschreibung dessen ist, was es für Zugänglichkeitszwecke darstellt.

Wenn Sie versuchen, nach dieser Hinzufügung zu speichern und nach Änderungen zu suchen, werden Sie feststellen, dass Ihre Website deformiert ist. Das Problem wird behoben, sobald Sie CSS-Regeln erstellen, wie Bilder auf Ihrer Website angezeigt werden sollen.

Gehen Sie zurück zur CSS-Datei und erklären Sie, wie Sie möchten, dass alle Bilder (img links) linksbündig sind und dem Fluss anderer Elemente folgen (float: left und position: relative).

Um nicht die Seitenränder zu überschreiten, geben Sie an, wie Sie möchten, dass ihre Breite maximal die der Seite selbst beträgt (width: 100%). Um zu vermeiden, dass die Bilder Ihren Text berühren, fügen Sie etwas vertikalen Abstand oben und unten hinzu. Das Ergebnis sollte so aussehen:

img {  
  float: left;  
  position: relative;  
  width: 100%;  
  margin: 5px 0;  
  padding: 0;  
}

Vervollständigen Sie, indem Sie ein weiteres Bild hinzufügen, diesmal links oder rechts ausgerichtet. Wie zuvor sollten Sie zuerst zurück zum HTML-Code gehen und dort einen Link zu Ihrem Bild einfügen, wie wir es zuvor gesehen haben. Der Unterschied besteht darin, dass Sie eine “Klasse” hinzufügen müssen, einen Bezeichner für das Element. Dann geben Sie über CSS-Anzeigeregeln an, wie es und alle anderen Elemente, bei denen dieselbe Klasse “angehängt” ist, angezeigt werden sollen.

Wir haben unsere Klasse “alignright” genannt, da wir möchten, dass jedes Objekt, bei dem sie angehängt ist, auf der rechten Seite der Seite angezeigt wird.

Versuchen Sie, den Code selbst zu erstellen. Fügen Sie eine .alignright {}-Klasse in Ihrer “style.css” hinzu und erstellen Sie dann Regeln, die sie stylen sollten. Der CSS-Code sollte angeben, dass wir möchten, dass die Elemente auf die rechte Seite der Seite fließen und 46% breit sind (width: 46%). Wir möchten nicht, dass die Bilder den Text berühren, also sollten wir auch einen 2% Abstand um sie herum hinzufügen, aufgeteilt in 1% Margin (der Abstand zu anderen Elementen) und 1% Padding (einige “zusätzlicher Leerraum um das Element herum”).

Somit sollten unsere Regeln definieren, dass jedes Bild mit einer angehängten .alignright-Klasse 46% der Breite der Seite einnimmt, plus einen 1% Abstand auf jeder Seite, plus 1% Padding auf jeder Seite. Das ergibt insgesamt 50% – genau die Hälfte der Breite der Seite. Das Ergebnis sollte ungefähr so aussehen:

img.alignright {  
  float: right;  
  width: 46%;  
  margin: 1%;  
  padding: 1%;  
}

Nächste Seite

Ihre erste Webseite ist bereit und voll funktionsfähig. Indem Sie mehr über HTML und CSS lernen, können Sie ihren Inhalt weiter bereichern, neue Elemente hinzufügen und ihr Aussehen verbessern. Als nächsten Schritt versuchen Sie, die HTML-Datei zu kopieren und umzubenennen, ihren Inhalt zu ändern und jede neue Seite mit den anderen zu verlinken.

Klingt nicht zu schwer, oder? Willkommen in der Webentwicklung: Durch das Kopieren, Ändern und Verlinken verschiedener Seiten über Links haben Sie Ihre erste vollständige, “richtige”, mehrseitige Website erstellt!

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