Die wichtigsten CSS-, HTML-, Javascript-Befehle

Die wichtigsten CSS-Befehle

color: Legt die Farbe des Textes fest.
font-size: Legt die Größe der Schriftart fest.
font-family: Legt die Schriftart fest, die für den Text verwendet werden soll.
font-weight: Legt das Gewicht der Schriftart fest, z.B. normal oder fett.
background-color: Legt die Hintergrundfarbe eines Elements fest.
border: Legt eine Rahmen um ein Element fest.
margin: Legt den Abstand zwischen dem Rand des Elements und dem umgebenden Inhalt fest.
padding: Legt den Abstand zwischen dem Inhalt des Elements und dem Rahmen fest.
text-align: Legt die Ausrichtung des Textes innerhalb des Elements fest.
display: Legt fest, wie ein Element im Layout angezeigt werden soll, z.B. als Block- oder Inline-Element.
position: Legt die Position eines Elements innerhalb des Layouts fest.
float: Legt fest, ob ein Element links oder rechts von anderen Elementen fließen soll.
width: Legt die Breite eines Elements fest.
height: Legt die Höhe eines Elements fest.
text-decoration: Legt die Unterstreichung, Durchstreichung oder Blinken von Text fest.
text-transform: Ändert die Groß- und Kleinschreibung von Text, z.B. in uppercase oder lowercase.
line-height: Legt den Abstand zwischen den Zeilen des Textes fest.
letter-spacing: Legt den Abstand zwischen den Buchstaben des Textes fest.
word-spacing: Legt den Abstand zwischen den Wörtern des Textes fest.
list-style-type: Legt den Typ der Aufzählungszeichen oder Nummerierungszeichen einer Liste fest.
opacity: Legt die Deckkraft eines Elements fest, wobei 1 vollständig undurchsichtig ist und 0 vollständig transparent.
z-index: Legt die Stapelreihenfolge von Elementen fest, wenn diese überlappen.
overflow: Legt fest, ob der Inhalt eines Elements innerhalb des umgebenden Bereichs sichtbar oder ausgeblendet werden soll.
background-image: Legt ein Hintergrundbild für ein Element fest.
background-position: Legt die Position des Hintergrundbilds innerhalb des Elements fest.
background-repeat: Legt fest, ob das Hintergrundbild wiederholt werden soll.
box-shadow: Erzeugt einen Schatten um ein Element.
border-radius: Legt abgerundete Ecken für ein Element fest.

Anwendungsbeispiele

1. Einfache Textformatierung: Mit CSS kann man Text formatieren, indem zum Beispiel die Schriftart, -größe, -farbe oder das Schriftgewicht geändert wird. Hier ein Beispiel:

p {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
font-weight: bold;
}

Dieser Code formatiert alle <p>-Elemente auf der Webseite mit der Schriftart Arial, einer Schriftgröße von 16px, einer Farbe von #333 und einem fetten Schriftgewicht.

2. Hintergrundbild: Mit CSS kann man ein Hintergrundbild für ein Element festlegen. Hier ein Beispiel:

body {
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-size: cover;
}

Dieser Code legt ein Hintergrundbild für die gesamte Webseite fest und sorgt dafür, dass es nicht wiederholt wird. Das Hintergrundbild wird so skaliert, dass es den gesamten Bildschirm ausfüllt.

3. Positionierung von Elementen: CSS kann auch verwendet werden, um Elemente auf der Seite zu positionieren. Hier ein Beispiel:

div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, –50%);
}

Dieser Code positioniert ein <div>-Element in der Mitte der Seite. Das position-Attribut wird auf absolute gesetzt, um sicherzustellen, dass das Element absolut positioniert ist. Die top– und left-Attribute werden auf 50% gesetzt, um das Element in die Mitte zu positionieren, und das transform-Attribut wird verwendet, um das Element auf der horizontalen und vertikalen Achse um die Hälfte seiner Größe zu verschieben.

4. Hover-Effekte: Mit CSS kann man auch Hover-Effekte für Elemente erstellen. Hier ein Beispiel:

a {
color: #333;
text-decoration: none;
}
a:hover {
color: #666;
text-decoration: underline;
}

Dieser Code ändert die Farbe und Unterstreichung eines Links, wenn der Benutzer mit der Maus darüber fährt. Die ursprüngliche Farbe und Unterstreichung wird im normalen Zustand festgelegt, während die neue Farbe und Unterstreichung im :hover-Zustand festgelegt wird.

Die wichtigsten HTML-Befehle

<!DOCTYPE>: Definiert den Typ des Dokuments.
<html>: Definiert den Start und das Ende des HTML-Dokuments.
<head>: Enthält Metadaten über das Dokument, wie z.B. den Titel und die Beschreibung.
<title>: Definiert den Titel des Dokuments, der im Browser-Tab angezeigt wird.
<body>: Definiert den Start und das Ende des Hauptinhalts des Dokuments.
<h1>-<h6>: Definiert die Überschriften des Dokuments in absteigender Reihenfolge der Bedeutung.
<p>: Definiert Absätze des Textes.
<a>: Definiert Hyperlinks zu anderen Seiten oder Ressourcen.
<img>: Fügt ein Bild in das Dokument ein.
<ul>: Definiert eine unsortierte Liste von Elementen.
<ol>: Definiert eine sortierte Liste von Elementen.
<li>: Definiert ein Element in einer Liste.
<table>: Definiert eine Tabelle.
<tr>: Definiert eine Tabellenzeile.
<th>: Definiert eine Tabellenüberschrift.
<td>: Definiert eine Zelle in der Tabelle.
<form>: Definiert ein Formular zum Sammeln von Daten vom Benutzer.
<input>: Definiert ein Eingabefeld im Formular.
<textarea>: Definiert ein mehrzeiliges Texteingabefeld im Formular.
<button>: Definiert eine Schaltfläche im Formular.
<label>: Definiert eine Bezeichnung für ein Eingabefeld im Formular.
<header>: Definiert den Kopfbereich einer Seite oder eines Abschnitts.
<nav>: Definiert einen Navigationsbereich auf der Seite.
<main>: Definiert den Hauptinhalt einer Seite.
<aside>: Definiert einen Seitenbereich, der inhaltlich von dem Hauptinhalt getrennt ist.
<footer>: Definiert den Fußbereich einer Seite oder eines Abschnitts.
<div>: Definiert einen Abschnitt einer Seite, der als Container für andere Elemente verwendet werden kann.
<span>: Definiert eine Inline-Gruppierung von Text oder anderen Elementen.
<strong>: Definiert stark hervorgehobenen Text.
<em>: Definiert kursiv hervorgehobenen Text.
<u>: Definiert unterstrichenen Text.
<br>: Fügt einen Zeilenumbruch ein.
<hr>: Fügt eine horizontale Trennlinie ein.
<meta>: Definiert Metadaten über das Dokument, wie z.B. die Zeichencodierung oder Keywords für Suchmaschinen.
<style>: Definiert einen Block von CSS-Regeln für das Dokument.
<script>: Definiert einen Block von JavaScript-Code für das Dokument.
<iframe>: Definiert einen eingebetteten Bereich für eine andere Webseite oder Ressource.
<video>: Definiert ein Video auf der Seite.
<audio>: Definiert eine Audiodatei auf der Seite.
<source>: Definiert die Quelle für eine Video- oder Audiodatei.

Anwendungsbeispiele

1. Überschriften: Überschriften sind eine wichtige Möglichkeit, um die Struktur einer Webseite zu organisieren. Hier ein Beispiel:

<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>

Dieser Code zeigt drei verschiedene Überschriftsgrößen an, wobei h1 die größte und h3 die kleinste ist. Verwenden Sie diese Überschriften, um die Struktur der Webseite klar und verständlich zu gestalten.

2. Links: Links sind eine wichtige Möglichkeit, um Benutzer auf andere Seiten oder zu anderen Teilen der aktuellen Seite zu leiten. Hier ein Beispiel:

<a href="http://www.example.com">Ein Link zu Example.com</a>

Dieser Code erstellt einen Link zu der URL http://www.example.com. Fügen Sie eine kurze Beschreibung hinzu, um den Benutzern zu erklären, wohin der Link führt.

3. Listen: HTML-Listen sind eine großartige Möglichkeit, um Informationen auf der Webseite in einer organisierten Weise darzustellen. Hier ein Beispiel:

<ul> 
<li>Element 1</li>

<li>Element 2</li>

<li>Element 3</li> 
</ul>

Dieser Code erstellt eine unsortierte Liste mit drei Elementen. Sie können auch geordnete Listen erstellen, indem Sie <ol> anstelle von <ul> verwenden.

4. Bilder: Bilder sind eine wichtige Möglichkeit, um eine Webseite visuell ansprechend zu gestalten. Hier ein Beispiel:

<img src="bild.jpg" alt="Eine Beschreibung des Bildes">

Dieser Code fügt ein Bild mit dem Dateinamen bild.jpg hinzu. Fügen Sie eine Beschreibung des Bildes im alt-Attribut hinzu, damit Benutzer mit Sehbehinderungen oder Bildschirmlesegeräten das Bild verstehen können.

5. Formulare: HTML-Formulare sind eine Möglichkeit, um Benutzerdaten zu sammeln und zu verarbeiten. Hier ein Beispiel:

Dieser Code erstellt ein einfaches Formular mit Feldern für Name und E-Mail-Adresse. Der input-Typ kann auch auf andere Eingabetypen wie Passwörter, Radio-Buttons und Dropdown-Menüs festgelegt werden. Der submit-Button sendet das Formular an einen Server, um die Eingaben zu verarbeiten.

Die wichtigsten Javascript-Befehle

Variablen:

let und const: Deklaration und Initialisierung von Variablen
var: Ältere Möglichkeit zur Deklaration und Initialisierung von Variablen

Datentypen:

number: Zahlen
string: Zeichenketten
boolean: Wahrheitswerte (true/false)
null: Kein Wert
undefined: Variable ist nicht initialisiert
object: Objekte
array: Arrays

Operatoren:

Arithmetische Operatoren: +, -, *, /, %
Zuweisungsoperatoren: =, +=, -=, *=, /=, %=
Vergleichsoperatoren: ==, ===, !=, !==, >, <, >=, <=
Logische Operatoren: &&, ||, !
Inkrement- und Dekrementoperatoren: ++, --

Bedingungen:

if, else if, else: Ausführung von Code abhängig von Bedingungen
switch: Ausführung von Code abhängig von einem Wert

Schleifen:

for: Schleife mit Zählvariable
while: Schleife mit Bedingung
do-while: Schleife mit Bedingung, die am Ende überprüft wird

Funktionen:

function: Definition von Funktionen
return: Rückgabe eines Wertes aus einer Funktion

Objekte:

Objekt-Literale: {}-Notation zur Definition von Objekten
Eigenschaften und Methoden: Zugriff auf Eigenschaften und Methoden von Objekten

Arrays:

[]: Notation zur Definition von Arrays
push, pop, shift, unshift: Methoden zum Manipulieren von Arrays
Iteration: Schleifen zur Iteration über Arrays

Events:

addEventListener: Hinzufügen von Event-Listenern zu HTML-Elementen
event: Objekt, das Informationen über das ausgelöste Event enthält

Anwendungsbeispiele

1. Variablen: Variablen werden verwendet, um Werte zu speichern und zu verarbeiten. Hier ein Beispiel:

let name = „Max Mustermann“;
let age = 30;

Dieser Code erstellt eine Variable mit dem Namen name und weist ihr den Wert "Max Mustermann" zu. Eine zweite Variable age wird mit dem Wert 30 erstellt.

2. Bedingungen: Bedingungen erlauben es Ihnen, bestimmte Aktionen auf der Grundlage von Bedingungen auszuführen. Hier ein Beispiel:

if
(age >= 18) {
console.log(„Sie sind volljährig.“);
}
else {
console.log(„Sie sind minderjährig.“);
}

Dieser Code überprüft, ob age größer oder gleich 18 ist, und gibt je nach Ergebnis einen entsprechenden Text in der Konsole aus.

3. Schleifen: Schleifen erlauben es einem, Code wiederholt auszuführen. Hier ein Beispiel:

for (let i = 1; i <= 10; i++) {
console.log(i);
}

Dieser Code erstellt eine Schleife, die den Wert von i von 1 bis 10 erhöht und bei jedem Schleifendurchlauf den Wert von i in der Konsole ausgibt.

4. Funktionen: Funktionen erlauben es, wiederkehrende Aufgaben in einem Block von Code zusammenzufassen, der später wiederverwendet werden kann. Hier ein Beispiel:

function greet(name) {
console.log(„Hallo, „ + name + „!“);
}
greet(„Tom“); // Ausgabe: Hallo, Tom!
greet(„Anna“); // Ausgabe: Hallo, Anna!

Dieser Code definiert eine Funktion greet, die den übergebenen name mit einem Begrüßungstext ausgibt. Die Funktion wird zweimal aufgerufen, um „Max“ und „Anna“ zu begrüßen.

5. Events: JavaScript-Events erlauben es, auf Benutzeraktionen wie Mausklicks oder Tastatureingaben zu reagieren. Hier ein Beispiel:

let button = document.querySelector(„button“);
button.addEventListener(„click“, function() {
console.log(„Button wurde geklickt!“);
});

Dieser Code wählt ein HTML-Element button aus und fügt ihm einen Event-Listener hinzu, der bei einem Klick auf den Button eine Meldung in der Konsole ausgibt.

HTML, CSS und JavaScript sind drei grundlegende Technologien, die zur Erstellung von Webseiten verwendet werden. Jede Technologie hat eine andere Aufgabe:

HTML (Hypertext Markup Language) wird verwendet, um die Struktur und den Inhalt einer Webseite zu definieren. Es bietet eine Möglichkeit, Text, Bilder, Videos und andere Inhalte auf einer Webseite zu organisieren.
CSS (Cascading Style Sheets) wird verwendet, um das Aussehen einer Webseite zu definieren. Es bietet eine Möglichkeit, die Farben, Schriftarten, Layouts und andere visuelle Aspekte einer Webseite zu gestalten.
JavaScript wird verwendet, um die Interaktivität einer Webseite zu implementieren. Es bietet eine Möglichkeit, auf Benutzerinteraktionen wie Klicks und Tastendrücke zu reagieren, Daten von Servern zu empfangen und zu verarbeiten, Animationen und Effekte zu erstellen und vieles mehr.

Zusammen bilden HTML, CSS und JavaScript die Grundlage für die Erstellung von Webseiten. HTML definiert die Struktur und den Inhalt, CSS definiert das Aussehen, und JavaScript ermöglicht die Interaktivität. Eine gut gestaltete Webseite nutzt alle drei Technologien, um ein optimales Nutzererlebnis zu bieten.