Einführung in HTML

HTML steht für Hypertext Markup Language und wird verwendet, um die Struktur einer Webseite zu definieren.

HTML-Beispiel:

<!DOCTYPE html>
<html>
<head>
  <title>Meine Webseite</title>
</head>
<body>
  <h1>Willkommen auf meiner Webseite!</h1>
  <p>Hier ist ein Absatz.</p>
</body>
</html>

CSS steht für Cascading Style Sheets und wird verwendet, um das Aussehen einer Webseite zu gestalten. Eingebettet kann das CSS direkt im HTML Dokument. Dazu wird <style> ... </style> genutzt. Zwischen den beiden Style-TAGS werden die CSS-Formatierungen vorgenommen.

CSS-Beispiel innerhalb einer HTML-Seite:

<style>	
h1 {
  color: blue;
  font-size: 24px;
}
p {
  color: green;
  background-color: red;
}
</style>

Vorschau:

<h1 style="color:blue">Willkommen auf meiner Webseite!</h1>

<p style="color:yellow; background-color:red;">Das ist ein Absatz</p>

Weitere HTML-Komponenten

<h1>...</h1> - Überschrift der höchsten Ebene
<p>...</p> - Absatz
<a href="url">...</a> - Hyperlink
<img src="bild.jpg" alt="Beschreibung"> - Bild
<ul>...</ul> - Ungeordnete Liste
<ol>...</ol> - Geordnete Liste
<li>...</li> - Listenelement
<u>...<//u> - Unterstrich
<table>...</table> - Tabelle
<tr>...</tr> - Tabellenzeile
<th>...</th> - Tabellenkopfzelle
<td>...</td> - Tabellenzelle
<form>...</form> - Formular
<input type="text"> - Texteingabefeld
<button>...</button> - Schaltfläche
<label>...</label> - Beschriftung für ein Eingabefeld

Weitere CSS-Befehle

CSS wird verwendet, um das Aussehen und das Design einer Webseite zu definieren. Mit CSS-Regeln können verschiedene visuelle Eigenschaften festgelegt werden. Hier sind einige der gängigsten CSS-Befehle:

color: #333; - Farbe des Textes
font-size: 16px; - Schriftgröße
font-family: Arial, sans-serif; - Schriftart
background-color: #f1f1f1; - Hintergrundfarbe
margin: 10px; - Außenabstand
padding: 5px; - Innenabstand
border: 1px solid #ccc; - Rahmen
text-align: center; - Textausrichtung
width: 300px; - Breite
height: 200px; - Höhe

Weitere Beispiele

Tabellen

Name	Alter
Max Mustermann	25
Erika Musterfrau	30

Verwendung von <div>-Elementen

Div Element 1

Dies ist ein Beispiel für die Verwendung von <div>-Elementen.

Div Element 2

Dies ist ein weiteres Beispiel für die Verwendung von <div>-Elementen.

Umrandungen

Dies ist ein Beispiel für eine einfache Umrandung.
border: 1px solid black; padding: 10px; margin-bottom: 10px;

Dies ist ein Beispiel für eine Umrandung mit einer roten Farbe.

Dies ist ein Beispiel für einen doppelten Rahmen mit einer blauen Farbe.
double-border-example" style="border: 3px double blue; padding: 10px; margin-bottom: 10px;

Einführung in CSS

CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die verwendet wird, um das Aussehen und das Layout von HTML-Dokumenten zu gestalten. Mit CSS kannst du das Design deiner Webseite kontrollieren, einschließlich Farben, Schriftarten, Abständen, Positionen und vielem mehr.

Wie bindet man CSS in HTML ein?

Um CSS in dein HTML-Dokument einzubinden, kannst du das <link>-Element verwenden. Das <link>-Element wird im <head>-Bereich deines HTML-Dokuments platziert und verweist auf die externe CSS-Datei. Hier ist ein Beispiel, wie du Bootstrap CSS einbinden kannst:

		
            <head>

                <meta charset="UTF-8">

                <meta name="viewport" content="width=device-width, initial-scale=1.0">

                <title>Meine Webseite</title>

                <!-- Link zu Bootstrap CSS -->

                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

                <!-- Link zu deiner eigenen CSS-Datei, falls vorhanden -->

                <link rel="stylesheet" href="styles.css">

            </head>

Beachte, dass das <link>-Element ein Attribut href verwendet, um auf die URL der CSS-Datei zu verweisen, und ein Attribut rel, um den Typ des verknüpften Dokuments anzugeben (in diesem Fall ist es ein Stylesheet). Wenn du eine eigene CSS-Datei hast, kannst du sie durch Angabe des Pfads in das href-Attribut einbinden, wie im obigen Beispiel gezeigt.

Inline-CSS und eingebettetes CSS

Neben der externen Einbindung von CSS kannst du CSS auch inline oder direkt in das <head>-Bereich deines HTML-Dokuments einbetten. Dies kann durch die Verwendung von <style>-Tags erfolgen. Hier ist ein Beispiel für eingebettetes CSS:

		
            <head>

                <meta charset="UTF-8">

                <meta name="viewport" content="width=device-width, initial-scale=1.0">

                <title>Meine Webseite</title>

                <style>

                    /* Hier ist das eingebettete CSS */

                    body {

                        font-family: Arial, sans-serif;

                        background-color: #f0f0f0;

                    }

                    h1 {

                        color: #337ab7;

                    }

                </style>

            </head>

In diesem Beispiel sind einige CSS-Regeln direkt im <style>-Tag eingebettet. Beachte, dass die CSS-Regeln von geschweiften Klammern {} umschlossen sind und die Eigenschaften und Werte durch einen Doppelpunkt : getrennt sind.

Das war eine grundlegende Einführung in CSS und wie es in HTML eingebunden wird. Mit CSS kannst du das Erscheinungsbild deiner Webseite vollständig anpassen und sie visuell ansprechend gestalten.

HTML-Übungen Bootstrap-Framework HTML/CSS Editor