AIIT Webdesign - HTML & CSS

Frontend Webdesign bezieht sich auf den sichtbaren Teil einer Website, den Nutzer direkt im Browser sehen und mit dem sie interagieren.
Es wird mit HTML, CSS und Webdesign-Prinzipien erstellt:

  • HTML (HyperText Markup Language): Das Grundgerüst einer Webseite. Es legt die Struktur fest, z. B. wo Überschriften, Absätze, Bilder oder Links platziert werden.
  • CSS (Cascading Style Sheets): Wird verwendet, um das Aussehen der HTML-Elemente zu gestalten. Mit CSS legt man fest, welche Farben, Schriftarten, Abstände oder Layouts die Seite haben soll.
  • Webdesign: Der kreative und technische Prozess, um eine Website benutzerfreundlich, ansprechend und gut strukturiert zu gestalten. Dabei wird auch berücksichtigt, dass die Seite auf verschiedenen Geräten gut aussieht (responsives Design).

Zusammen formen HTML, CSS und Webdesign das visuelle und benutzerfreundliche Erscheinungsbild einer Website.

Wähle den Bereich, in dem du mehr erfahren willst:

Visual Studio Code (VS Code) ist ein kostenloser, leichtgewichtiger Text-Editor von Microsoft, der speziell für Programmierer entwickelt wurde. Er unterstützt viele Programmiersprachen und bietet hilfreiche Funktionen wie Syntaxhervorhebung, Code-Vervollständigung und Debugging. Zusätzlich können Entwickler durch Erweiterungen neue Funktionen hinzufügen, um ihre Arbeitsumgebung noch besser an ihre Bedürfnisse anzupassen.
Download Visual Studio Code
VSCode Icon

Erweiterungen und Shortcuts

  1. Live Server

    Eine sinnvolle Erweiterung von VS Code ist der "Live Server". Du findest ihn bei den Extensions und mit dem Install Button ist dieser schnell verfügbar.

  2. Keyboard Shortcuts

    Es gibt sehr viele hilfreiche Keybord Shortcuts in VS Code. Hier findest du eine Auflistung: VS Code Keyboard Shortcuts

  3. Schnellschreibweise

    Die Schnellschreibweise in Visual Studio Code (VS Code) ermöglicht es Entwicklern, schneller und effizienter Code zu schreiben durch:

    • Code-Vervollständigung: Automatische Vorschläge von Schlüsselwörtern, Variablen, Funktionen oder Tags, während du tippst. Du kannst sie schnell mit der Tabulatortaste übernehmen.
    • Snippet-Erweiterungen: Kürzel werden zu vollständigen Codeblöcken erweitert. Zum Beispiel erzeugt das Kürzel for in vielen Sprachen eine komplette for-Schleife.

  4. Emmet

    Emmet ist ein Tool in VS Code, das dabei hilft, HTML und CSS schneller zu schreiben, indem es Abkürzungen automatisch zu vollständigem Code erweitert. Einige Beispiele:

    HTML-Abkürzungen:
    • div.container: Erzeugt <div class="container"></div>
    • ul>li*5: Erzeugt eine Liste mit 5 Listenelementen:

      html

      <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
    • a[href="https://example.com"]{Beispielseite}: Erzeugt einen Link:

      html

      <a href="https://example.com">Beispielseite</a>
    CSS-Abkürzungen:
    • m10: Wird zu margin: 10px;
    • p10-20: Wird zu padding: 10px 20px;
    Vorteile von Emmet
    • Schnelligkeit: Komplexe HTML- oder CSS-Strukturen werden mit wenigen Zeichen erstellt.
    • Effizienz: Reduziert das wiederholte Eintippen, besonders bei sich wiederholenden Strukturen.
    • Standardmäßig integriert: Emmet ist direkt in VS Code integriert und sofort einsatzbereit.

In diesem Video werden dir die absoluten Grundlagen zu HTML erklärt. Sieh dir das Video an und führe dieselben Schritte auf deinem Computer durch!

Hier findest du die wichtigsten HTML Befehle zusammgefasst:

  • <html> - Das Wurzelelement, das den gesamten HTML-Code umfasst.
  • <head> - Beinhaltet Metadaten der Seite (z.B. Titel, Verlinkungen).
  • <title> - Definiert den Titel der Seite, der in der Browserleiste angezeigt wird.
  • <body> - Enthält den sichtbaren Inhalt der Webseite, wie Texte, Bilder, Links etc.
  • <h1> - <h6> - Überschriftselemente für Titel und Untertitel. <h1> ist die größte, <h6> die kleinste Überschrift.
  • <p> - Definiert einen Absatz von Text.
  • <a> - Erstellt einen Hyperlink, um zu einer anderen Seite oder Ressource zu verlinken.
  • <img> - Fügt ein Bild auf der Seite ein. Das src-Attribut gibt die Bildquelle an.
  • <ul> - Erstellt eine ungeordnete (bulleted) Liste.
  • <ol> - Erstellt eine geordnete (nummerierte) Liste.
  • <li> - Ein Listenelement, das in <ul> oder <ol> enthalten ist.

Übungen

coming soon

Es gibt mehrere Möglichkeiten, CSS in eine HTML-Datei einzubinden. Hier sind die drei Hauptmethoden:

Vergleich der Methoden:

Methode Vorteile Nachteile
Externe CSS Trennung von Struktur und Design, wiederverwendbar Benötigt eine zusätzliche Datei, längere Ladezeit (initial)
Interne CSS Schnell und einfach für kleine Webseiten Gilt nur für eine Seite, weniger wiederverwendbar
Inline CSS Schnell und einfach für einmalige Änderungen Schlecht wartbar, macht den HTML-Code unübersichtlich

Einbindungsmöglichkeiten im Detail:

Externe CSS-Datei

Die empfohlene Methode ist die Verwendung einer externen CSS-Datei. Eine externe CSS-Datei enthält den gesamten CSS-Code und wird in die HTML-Datei eingebunden.

So funktioniert's:

  • Erstelle eine separate CSS-Datei, z. B. styles.css.
  • Verlinke die Datei im <head>-Bereich der HTML-Datei mit dem <link>-Tag.

HTML:

<!DOCTYPE html>
<html lang="de">
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Willkommen!</h1>
  </body>
</html>

CSS (styles.css):

body {
  background-color: lightblue;
}
h1 {
  color: darkblue;
}

Interne CSS (im <style>-Tag)

Interne CSS wird direkt im <style>-Tag der HTML-Datei geschrieben. Diese Methode ist nützlich, wenn die Styles nur für eine einzelne HTML-Datei gelten sollen.

HTML mit internem CSS:

<!DOCTYPE html>
<html lang="de">
  <head>
    <style>
      body { background-color: lightgreen; }
      h1 { color: darkgreen; }
    </style>
  </head>
  <body>
    <h1>Willkommen!</h1>
  </body>
</html>

Inline-CSS (direkt im HTML-Element)

Bei Inline-CSS werden die Styles direkt im style-Attribut eines HTML-Tags definiert. Dies ist nur für spezifische und einmalige Änderungen sinnvoll.

HTML mit Inline-CSS:

<!DOCTYPE html>
<html lang="de">
  <body>
    <h1 style="color: darkred;">Willkommen!</h1>
    <p style="background-color: lightcoral;">Das ist ein Absatz mit Inline-CSS.</p>
  </body>
</html>

Häufig verwendete CSS-Befehle

Befehl Beschreibung Beispiele
display Definiert, wie ein Element dargestellt wird. block, inline, flex
margin Setzt den Außenabstand eines Elements. margin: 10px;
padding Setzt den Innenabstand eines Elements. padding: 20px;
color Legt die Textfarbe fest. color: #333;
font-size Setzt die Schriftgröße. font-size: 16px;
border Setzt den Rand eines Elements. border: 1px solid black;
text-align Definiert die horizontale Textausrichtung. text-align: center;

Übungen

coming soon

Webdesign bezieht sich auf die Gestaltung und Strukturierung von Webseiten, damit sie sowohl optisch ansprechend als auch benutzerfreundlich sind. Zwei der wichtigsten modernen Layout-Techniken im CSS sind Flexbox und Grid.

Flexbox ist ein Layout-Modul, das für ein ein-dimensionales Layout genutzt wird, das heißt, es funktioniert entweder in einer Zeile oder in einer Spalte. Es ist besonders nützlich, um Elemente auf einer Achse flexibel und gleichmäßig zu verteilen.

CSS Grid ist ein Layout-Modul für zwei-dimensionale Layouts, d.h., es erlaubt die Organisation von Elementen in Zeilen und Spalten. Es bietet ein sehr präzises und flexibles Raster-System.

In diesem Video findest du grundlegende Regeln zum Webdesign. Sieh es dir an und versuche es danach selbst!

Als Abschluss dieses Kapitels sollst du nun die Homepage von Apple nachbauen.

  1. Lade dir den Ordner apple_vorgabe.zip in einen Ordner auf deinem Rechner, dem Schulnetz oder dergleichen und entpacke die Dateien dort.
  2. Öffne das Arbeitsblatt und baue entsprechend den Vorgaben die Webseite möglichst exakt nach.

Hosting - coming soon

Bootstrap ist ein Werkzeug, das Webentwicklern hilft, schnell und einfach schöne und funktionierende Websites zu bauen. Es bietet fertige Bausteine wie Schaltflächen, Navigationen und Layouts, die sich automatisch an verschiedene Bildschirmgrößen anpassen, sodass die Website auf Handys, Tablets und Computern gut aussieht.