Kategorie: Web Entwicklung

Semantische Tags

Mit diesen Tags kann man HTML Code strukturieren.

<header>
Der Header enthält die wichtigsten Informationen einer Seite, wie den Titel, die Navigation und das Logo. 
<body>
    <header>
       Das ist der Kopfbereich der Seite
    </header>
    <main></main>
    <footer></footer>
</body>
<main>
Der Main enthält den Hauptinhalt einer Seite. 
<body>
    <header></header>
    <main>
       Das ist der Hauptberich der Seite
    </main>
    <footer></footer>
</body>
<footer>
Der Footer enthält allgemeine Informationen, wie Kontaktinformationen, Impressum und Nutzungsbedingungen. 
<body>
    <header></header>
    <main></main>
    <footer>
       Das ist der Fussbereich der Seite
    </footer>
</body>

Dies sind weitere Tags zur Strukturierung eines HTML codes

<aside>
Der Aside-Bereich enthält Inhalte, die nicht direkt zum Hauptinhalt gehören, aber ergänzende Informationen bieten. 
  <body>
    <header>
    <aside>
      Das ist der Bereich für ergänzende Informationen
    </aside>
    </header>
    <main></main>
    <footer></footer>
  </body>
<nav>
Der Nav-Bereich enthält Navigationslinks oder Menüs für die Navigation auf der Seite. 
  <body>
    <header>
    <nav>
      Das ist der Bereich für die Navigation
    </nav>
    </header>
    <main></main>
    <footer></footer>
  </body>
<article>
Der Article-Bereich enthält eigenständige Inhalte, die unabhängig voneinander existieren können. 
  <body>
    <header></header>
    <main>
      <article>
        Das ist ein eigenständiger Artikel
      </article>
    </main>
    <footer></footer>
  </body>
<section>
Der Section-Bereich gruppiert thematisch zusammenhängende Inhalte innerhalb des Hauptinhalts. 
  <body>
    <header></header>
    <main>
      <section>
        Das ist eine thematische Sektion
      </section>
    </main>
    <footer></footer>
  </body>

Ausklappbare Elemente

<details>
Zur Erstellung von ausklappbaren Elementen 
<details>
   <summary>
       Das ist der Title
   </summary>
   Das ist der eingeklpate inhalt
</details>
<summary>
Zum anzeigen des immer ausgeklappten text 
<details>
   <summary>
       Das ist der Title
   </summary>
   Das ist der eingeklpate inhalt
</details>

In das summary-Element wird der Text geschrieben, der als Erklärung für den Inhalt des details-Elements dient. Der Text kann beliebig lang sein und kann auch HTML-Elemente enthalten.

Medien Tag

<img>
Mit diesem Tag kann man Bilder anzeigen lassen 
<img src=“https://www.example.com/bild.jpg”>
Das Bild können auch durch einen Dateipfad eingefügt werden 
<img src=“bild.jpg”>
<video>
Mit diesem Tag kann man Videos in Webseiten einbinden. 
<video src="video.mp4" controls></video>
Es ist möglich verschiedene Attribute verwenden, um das Verhalten des Videos zu steuern, wie z.B. controls, autoplay, loop, etc.
<audio>
Mit diesem Tag können Sie Audiodateien in Ihre Webseite einbinden 
<audio src="audio.mp3"></iframe>
<iframe>
Dient zur Implementierung von Webseiten und PDFs. 
<iframe src="https://www.example.com"></iframe>
Wichtig zu beachten ist das viele Webseite diese Funktion aus Sicherheitsgründen blockieren und diese über diesen Tag nicht implantierbar sind.
<object>
Mit diesem Tag können Sie verschiedene Arten von Medien in Ihre Webseite einbinden
z.B. Bilder, Videos, Audiodateien, Flash-Inhalte, etc. 
leer

Svelte

Svelte ist ein Front-End-Framework, der den komplexen Framework-Code in optimierten und einfachen Javascript code Compiliert. Die schreibweise des Code ist sehr ähnlich zu reinen HTML, CSS und JavaScript und ist dank der Compilierung ein sehr schnelles zu schreibendes und effizientes tool zu entwicklung von Nutzeroberflächen.

Voraussetzungen für Svelte:

  • Node.js
  • Vite

Erstellung eines Svelte-Projekte:

  1. Console: npm create vite@latest
  2. Gebe deinen Projekte Namen ein
  3. Wähle Svelte aus
  4. Wähle die Sprache aus mit der du entwickeln willst.
  5. Console: cd „Projekt-Name“
  6. Console: npm install
  7. Console: npm run dev

SCSS nutzen mit Svelte:

Die Folgende Anleitung gilt nur für Svelte nicht für SvelteKit

  • Console: npm install svelte-preprocess sass --save-dev
  • füge dann den <style> Tag in der Svelte-Komponente die Eigenschaft lang="scss" hinzu
  • Konfigurieren Sie Ihren Build-Prozess, um SCSS zu kompilieren. Dies kann durch Hinzufügen von svelte-preprocess zu Ihrer Rollup- oder Webpack-Konfiguration erreicht werden.
<style lang="scss">
  .container {
    display: flex;
    div {
      background: red;
    }
  }
</style>

For Schleife

Mit einer For-Schleife wird Code in der Schleife wiederholt ausgeführt solange eine Bedingung erfüllt ist. Sie wird oft verwendet, um automatisch eine Liste von Elementen nacheinander zu bearbeiten, ohne dass du jeden einzelnen Punkt manuell behandeln musst. Das macht wiederkehrende Aufgaben viel einfacher und schneller.

Die Kopfzeile beginnt in der regel mit dem word for und einen Bezeichner (Namen). Danach kommt meist das word in und dann die z.B. eine Liste oder eine Zählerschleife.

For Schleife
JavaScript
 
// Array von Zahlen
const zahlen = [1, 2, 3, 4, 5];

// For-Schleife, um das Array zu durchlaufen und die Summe zu berechnen
for (let i = 0; i < zahlen.length; i++) {
    summe += zahlen[i];
}
Python
 
# Liste von Zahlen
zahlen = [1, 2, 3, 4, 5]

# For-Schleife, um die Liste zu durchlaufen und die Summe zu berechnen
for zahl in zahlen:
    summe = summe + zahl
Rust
 
// Vektor (ähnlich wie eine Liste) von Zahlen
let zahlen = vec![1, 2, 3, 4, 5];

// For-Schleife, um die Vektor-Elemente zu durchlaufen und die Summe zu berechnen
for zahl in &zahlen {
    summe += zahl;
}
C & C++
 
leer
Dart
 
// Liste von Zahlen
List zahlen = [1, 2, 3, 4, 5];

// For-Schleife, um die Liste zu durchlaufen und die Summe zu berechnen
for (var zahl in zahlen) {
  summe += zahl;
}
PHP
 
// Array von Zahlen
$zahlen = array(1, 2, 3, 4, 5);

// For-Schleife, um das Array zu durchlaufen und die Summe zu berechnen
foreach ($zahlen as $zahl) {
    $summe += $zahl;
}
Weiterlesen

Vergleichs Operatoren

Logische Operatoren werden verwendet um unterschiedliche Bedingungen zu definieren

Kleiner als, Größer als Operator

Diese Verwendet man um zu überprüfen ob der Wert größer oder kleiner ist, als der verglichene Wert

kleiner als oder gleich, Größer als oder gleich Operator

Diesen verwendet man um zu überprüfen ob der Operator kleiner als oder gleich ist oder ob der Operator Größer als oder gleich ist.

Gleich, Ungleich Operator

Diesen verwendet man, wenn man überprüfen will ob eine oder mehrere Bedingungen nicht erfüllt sind.

Vergleichs Operatoren
JavaScript
 Kleiner als, Größer als Operator: 
if (x > 0) {
    console.log("x ist größer als 0");
}
if (x < 0) {
    console.log("x ist kleiner als 0");
}
Kleiner als oder gleich, Größer als oder gleich Operator: 
if (x >= 0) {
    console.log("x ist gleich oder größer als 0");
}
if (x <= 0) {
    console.log("x ist gleich oder kleiner als 0");
}
Gleich, Ungleich Operator: 
if (x === 0) {
    console.log("x ist gleich 0");
}
if (x !== 0) {
    console.log("x ist nicht gleich 0");
}
Python
 Kleiner als, Größer als Operator 
if x > 0:
    print("x ist größer als 0")
if x < 0:
    print("x ist kleiner als 0")
Kleiner als oder gleich, Größer als oder gleich Operator 
if x >= 0:
    print("x ist gleich oder größer als 0")
if x <= 0:
    print("x ist gleich oder kleiner als 0")
Gleich, Ungleich Operator 
if x == 0:
    print("x ist gleich 0")
if x != 0:
    print("x ist nicht gleich 0")
Rust
 Kleiner als, Größer als Operator: 
    if x > 0 {
        println!("x ist größer als 0");
    }
    if x < 0 {
        println!("x ist kleiner als 0");
    }
Kleiner als oder gleich, Größer als oder gleich Operator: 
    if x >= 0 {
        println!("x ist gleich oder größer als 0");
    }
    if x <= 0 {
        println!("x ist gleich oder kleiner als 0");
    }
Gleich, Ungleich Operator: 
    if x == 0 {
        println!("x ist gleich 0");
    }
    if x != 0 {
        println!("x ist nicht gleich 0");
    }
C & C++
 Kleiner als, Größer als Operator: 
if (x < 5) {
    printf("x ist kleiner als 5\n");
}
if (x > 5) {
    printf("x ist größer als 5\n");
}
Kleiner als oder gleich, Größer als oder gleich Operator: 
if (x <= 0) {
    printf("x ist kleiner als oder gleich 0\n");
}
if (x >= 0) {
    printf("x ist größer als oder gleich 0\n");
}
Gleich, Ungleich Operator: 
if (x == 0) {
    printf("x ist gleich 0\n");
}
if (x != 0) {
    printf("x ist ungleich 0\n");
}
Dart
 Kleiner als, Größer als Operator: 
  if (x > 0) {
    print("x ist größer als 0");
  }
  if (x < 0) {
    print("x ist kleiner als 0");
  }
Kleiner als oder gleich, Größer als oder gleich Operator: 
  if (x >= 0) {
    print("x ist gleich oder größer als 0");
  }
  if (x <= 0) {
    print("x ist gleich oder kleiner als 0");
  }
Gleich, Ungleich Operator: 
  if (x == 0) {
    print("x ist gleich 0");
  }
  if (x != 0) {
    print("x ist nicht gleich 0");
  }
PHP
 Kleiner als, Größer als Operator: 
if ($x > 0) {
    echo "x ist größer als 0";
}
if ($x < 0) {
    echo "x ist kleiner als 0";
}
Kleiner als oder gleich, Größer als oder gleich Operator: 
if ($x >= 0) {
    echo "x ist gleich oder größer als 0";
}
if ($x <= 0) {
    echo "x ist gleich oder kleiner als 0";
}
Gleich, Ungleich Operator: 
if ($x == 0) {
    echo "x ist gleich 0";
}
if ($x != 0) {
    echo "x ist nicht gleich 0";
}
Weiterlesen

PI (π)

PI ist eine Konstante in der Mathematik, die das Verhältnis zwischen dem Umfang und dem Durchmesser eines Kreises beschreibt. Pi ist eine unendliche Zahl, die nicht als Bruch dargestellt werden kann.

In diesem Artikel wird gezeigt wie PI (π) in mehreren Sprachen ausgegeben werden kann.

PI Inplimentierung in verschiedene Sprachen
JavaScript
 
const pi = Math.PI;
console.log(pi);
Python
 
import math

pi = math.pi

print(pi)
Rust
 
use std::f64;

fn main() {
  let pi = f64::consts::PI;
  println!("Pi = {}", pi);
}
C & C++
 
#include 
#include 

int main() {
    printf("Pi ist etwa %f\n", M_PI);
}
Dart
 
import 'dart:math';

pi = pi.pi;
print(pi);
PHP
 
$pi = pi();
echo $pi;

PyScript

PyScript ermöglicht es Python als ersatz für JavaScript bei der entwicklung einer Webseite zu nutzen.

<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css"/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>

Im weiteren verlauf wird eine kleine Kurzanleitung gezeigt wie man PyScript verwendet und damit eine eigene Seite mit Python schreibt

Weiterlesen

Kommentare

Ein Kommentar in einer Programmiersprache ist eine Notiz, die man im Code schreibt, um ihn leichter zu verstehen. Kommentare werden vom Computer ignoriert und sind nur für Menschen gedacht. 

Kommentare
HTML
 
<!-- Dies ist ein Kommentar -->
CSS
 
/* Dies ist ein Kommentar */
JavaScript
Ein Einzeiler:
// Dies ist ein einzeiliger Kommentar
Mehr Zeiler Kommentar:
/*
Dies ist ein
mehrzeiliger Kommentar
*/
Rust
Ein Einzeiler:
// Dies ist ein einzeiliger Kommentar
Mehr Zeiler Kommentar:
/*
Dies ist ein
mehrzeiliger Kommentar
*/
Dokumentationskomentare:
///Dokumentationskommentar für die Struktur `Point`
struct Point {
    x: i32,
    y: i32,
}

impl Point {
    //!Dokumentationskommentar für die Implementierung von `Point`.
    fn new(x: i32, y: i32) -> Self {
        Self { x, y }
    }
}
Python
Ein Einzeiler:
# Dies ist ein einzeiliger Kommentar
Mehr Zeiler Kommentar:
"""
Dies ist ein
mehrzeiliger Kommentar
"""
C und C++
Die Einzeilen:
// Das ist ein einzeiliger Kommentar
Mehr Zeiler Kommentar:
/*
Dies ist ein
mehrzeiliger Kommentar
*/
Dart
Die Einzeilen:
// Das ist ein einzeiliger Kommentar
Mehr Zeiler Kommentar:
/*
Dies ist ein
mehrzeiliger Kommentar
*/
Dokumentationskomentar
/// Das ist ein Dokumentationskommentar
/** 
Das ist ein 
mehrzeiliger Dokumentationskommentar
*/
PHP
Die Einzeilen:
// Dies ist ein einzeiliger Kommentar
# Das ist auch ein einzeiliger Kommentar
Mehr Zeiler Kommentar:
/*
Dies ist ein
mehrzeiliger Kommentar
*/
Dokumentationskomentar:
/**
Das ist ein 
Dokumentationskommentar
*/

Strukturierung und Ausrichtung

<h1> bis <h6>
Erstellt eine Überschrift
Die Größe der Überschrift wird durch die zahl bestimmt h1 ist die Größte Überschrift und je höher du mit der Zahl gehst desto kleiner wird de Überschrift und hört bei h6 auf. 
<h1> Titel </h1>
<h2> Titel </h2>
<h3> Titel </h3>
<h4> Titel </h4>
<h5> Titel </h5>
<h6> Titel </h6>
Das ist der Code ausgefürt 
Überschrift 1


Überschrift 2


Überschrift 3


Überschrift 4


Überschrift 5


Überschrift 6
<p>
Erstellt eine Absatz 
<p> Text <p>
<br>
Erzwingt einen Zeilenumbruch.
Das ist ein Beispiel Code 
Das ist Zeile 1 <br> Das ist Zeile 2
Das ist der Code ausgefürt 
Das ist Zeile 1 
Das ist Zeile 2
<hr>
Erzwingt einen Zeilenumbruch.
Das ist ein Beispiel Code 
Das ist Zeile 1 <hr> Das ist Zeile 2
Das ist der Code ausgefürt 
Das ist Zeile 1 
Das ist Zeile 2