HTML vs CSS: Was ist der Unterschied?

HTML und CSS sind die beiden grundlegenden Sprachen für die Erstellung einer Website. Was ist der Unterschied?

Zunächst einmal sind HTML und CSS nicht dasselbe. Sie arbeiten als Team! Zusammen bilden sie die Knochen und die Haut für jede Website. Lassen Sie uns jeden einzeln aufschlüsseln und dann sehen, wie sie zusammenarbeiten.

Wofür steht HTML?

HTML steht für Hypertext Markup Language. Stellen Sie sich HTML als das Grundgerüst des Dokuments vor. Der HTML-Code verleiht der Site Struktur. Dies erfolgt über Tags, Elemente und Attribute. Egal, ob Sie Überschriften, Listen, Bilder oder Links wünschen, HTML kann all dies.

Beginnen wir mit einem einfachen HTML-Dokument.

<!DOCTYPE html>
<html>
<head>
<title>Welcome to One Month</title>
</head>
<body>
<h1>Big Willie Style</h1>
<img src=https://i.imgur.com/Vr37Ac3.jpg alt=“Big Willie Style“>
</body>
</html>

Das! DOCTYPE in der ersten Zeile oben teilt dem Browser mit, um welche Art von Dokument es sich handelt. In diesem Fall handelt es sich um ein HTML-Dokument. Die dritte Zeile ist der Kopfbereich, und darunter sehen Sie das Titel-Tag. Hier würden Sie den Titel Ihrer Website einfügen. In diesem Fall lautet der Titel des Dokuments „Willkommen bei One Month“. Innerhalb des Körpers (Zeilen 6-9) können Sie wie wir ein H1-Tag hinzufügen, das den Text in den H1-Stil einfügt, das größte Überschriften-Tag, das es gibt.

Wie fügt man ein Bild in HTML hinzu?

Beliebte HTML-Tags

Hier sind einige andere beliebte Tags!

Diese Tags sind für Überschriften, ähnlich wie in diesem Blog-Beitrag!. H1 ist das größte Überschriften-Tag und hat daher den größten Text. H6 ist das kleinste Überschriften-Tag, also die kleinste Option für den Kopfzeilentext.

Absatztext: <p>

Zeilenumbruch: <br>

Fügen Sie ein Bild in HTML hinzu: <img src=“/link-to-your-image“>

Fügen Sie einen Link in HTML hinzu: <a href src=“http://www.yourlink.com“>

Fettgedruckter Text: <strong>

Kursiver Text: <em>

Kursiver: <ul>

Ungeordnete Listen: <ol>

Bestellte Listen: If you are writing an unordered <ul> (bulleted) or ordered <ol> (numbered) list, they will surely need items in the list! To do this, we use the list <li> tag. The <li> is a child of either the <ul> or <ol> tags. So a bulleted list of our favorite 90’s sitcoms would look something like this…

<ul>
<li>Seinfeld</li>
<li>Friends</li>
<li>Frasier</li>
<li>Growing Pains</li>
</ul>

Wofür steht CSS?

CSS steht für Cascading Style Sheet.

Was ist der Unterschied zwischen HTML und CSS?

Wenn HTML das Grundgerüst Ihrer Seite ist, ist CSS das Hauptgerüst.

Ohne CSS würden Ihre Websites ziemlich langweilig, langweilig und, wie wir sagen, nackt aussehen. In CSS gibt es eine Eigenschaft und einen Wert. Eigentum ist die Qualität, die Sie ändern möchten. Wert ist der Betrag der Änderung.

Kehren wir zu unserem HTML-Beispiel zurück.

Schauen Sie sich das <body> -Tag an. Wir können den HTML-Body mit CSS erweitern, indem wir Details hinzufügen. Nehmen wir zum Beispiel an, wir möchten die Farbe des Körpers ändern. Es würde ungefähr so aussehen …

body {
background: red;
}

Oder nehmen wir an, wir möchten die Farbe und Größe jedes Textes ändern, den wir in den Text einfügen.

Es würde so aussehen …

body {
font-size: 25px; background: blue; color: orange;
}

Oder nehmen Sie an, Sie möchten die Attribute des H1-Tags ändern. Sie könnten so etwas tun …

H1 {
color: blue; font-size: 100px
}

Die Verwendung von Farbnamen ist in Ordnung. Wenn Sie jedoch eine vielfältigere Palette auswählen möchten, verwenden Sie Hexadezimal (#RRGGBB).

Wie verknüpft man CSS mit HTML?

Damit wir die fantastischen Möglichkeiten von CSS nutzen können, müssen wir es mit unserem HTML-Code verknüpfen. Hier ist der Code, den Sie benötigen, um CSS und HTML miteinander zu verknüpfen:

Wie Sie sehen können, bedeutet dies, dass eine Beziehung (rel) zwischen HTML und CSS besteht.

Eine andere Möglichkeit, CSS zu implementieren, ist die Verwendung der Eigenschaft font-family. Dies entspricht der Verwendung eines Texteditors zum Ändern der Schriftart.

Wir tun dies, indem wir Folgendes in den Code aufnehmen:

h1 {
font-family: Arial
}

Wie zentriert man einen Text in HTML?

Das tust du nicht! Noch nie. HTML sollte nicht für das visuelle Styling verwendet werden, sondern nur zum Aufbau der Struktur Ihrer Seite. Wenn Sie Text oder ein Bild zentrieren möchten, möchten Sie CSS verwenden. Zum Beispiel:

HTML

<h1>Some text you want to center</h1>

CSS

h1 { 

text-align: center; 

}

Wie kommentieren Sie in HTML?

<!– This is a comment in HTML –>

Wie kommentieren Sie in CSS?

/* This is a CSS comment */

Fallstudie: CSS Zen Garden

Ein wunderbares Beispiel für die Beziehung zwischen den beiden Sprachen ist CSS Zen Garden.

CSS Zen Garden demonstriert die Leistungsfähigkeit von CSS. Durch Klicken auf die Links rechts wird dieselbe Seite mit einem erkennbaren Unterschied geladen, dem CSS. Dies zeigt, was CSS tun kann, um das Erscheinungsbild der Seite zu ändern.

Hier einige Beispiele aus dem Garten…

Tutorial-Highlights

Was haben wir gelernt?

HTML kann alleine existieren, CSS nicht, aber zusammen geschieht die Magie.
Je mehr wir über jede Sprache lernen, desto kreativer können wir mit unseren Designs sein. Mit der vorhandenen Struktur sind die Auswahlmöglichkeiten endlos.
HTML ist das Substantiv; CSS ist das Verb. Lass uns Sätze machen!

Lerne jetzt HTML und CSS!

Wenn Sie Ihre Reise mit HTML und CSS fortsetzen möchten, finden Sie hier einige Ressourcen:

Erfahren Sie, wie Sie HTML und CSS codieren – dieser Online-Codierungskurs führt Sie in nur 30 Tagen vom Anfänger zum fortgeschrittenen Entwickler. Der Kurs beinhaltet menschliche Unterstützung, Videos, reale Projekte, Benotung und eine HTML- und CSS-Zertifizierung nach dem Abschluss.
Front-End- und Back-End-Entwickler – Wie hoch ist das Gehalt für einen Front-End-Entwickler? Backend? Welches ist einfacher? Dies sind großartige Fragen, die Sie stellen sollten, wenn Sie anfangen. Lesen Sie diesen Artikel, um es herauszufinden.
Wie man Javascript lernt – Nachdem Sie HTML und CSS verstanden haben, was ist JavaScript und wie lernen Sie es?