Lernfabrik

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.

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

Weitere 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

Ein weiteres Beispiel für <div>-Elemente.

Umrandungen

Einfacher Rahmen
border: 1px solid black;

Roter Rahmen

Doppelter blauer Rahmen
border: 3px double blue;

Einbindung von CSS

CSS steht für Cascading Style Sheets und wird verwendet, um das Aussehen einer Webseite zu gestalten.

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.

CSS in HTML einbinden

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.