Webdesign

HTML Erklärung

HTML Syntax

HTML Häufige Tags

CSS Erklärung

CSS Syntax

CSS Verwendung

HTML

Grundlegende Infos

HTML = Hypertext Markup Language
HTML-Code/Text muss sich immer in einer .html - Datei befinden damit sie gelesen und richtig dargestellt werden kann.

Der Syntax

HTML besteht Grundlegend aus sogenannten "Tags" div, p, h1 ..., die immer einen öffnenden Tag <tagname> und einen schließenden Tag haben </tagname>.
Dazwischen befindet sich der Inhalt, der Text, eine Grafik oder ähnliches sein kann.
Dazu kommen verschiedene Attribute die etwas angeben, ein Tag modifizieren oder kennzeichnen können.
Ein Bsp. hierfür ist das "href"-Attribut <a href="index.html">Home</a> welches in einem Link-Tag <a> das Ziel des Links definiert. Ähnliche Attribute können z.B. definieren von wo das Bild in einem Image-Tag <img> genommen werden soll.

Grundaufbau

Den Aufbau des HTML-Code kann man sich wie einen Körper vorstellen. Der <head> fungiert wie ein Gehirn. Es beinhaltet die Informationen, wie der Körper sich zu verhalten hat, aber ist nicht nach außen sichtbar.
Danach kommt der <body>, dieser ist der Körper und beinhaltet alle sichtbaren Elemente einer HTML-Seite.
Im <body> befindet sich dann erstmal ein <header> in dem das Oberste auf der Seite enthalten ist (Logo, Navigation).
Danach kommen beliebige Elemente, oft werden hier <section> - Elemente benutzt. Und für die Sachen, die immer ganz unten auf der Seite sind gibt es den <footer>. Darin sind dann die Utilitys einer Website enthalten.

  <!DOCTYPE html>
  <html>

  <head>
    <meta charset="UTF-8">
  </head>

  <body>

    <h1 class="text">1. Überschrift</h1>
    <p class="text">1. Paragraph</p>

  </body>

  </html>

Definiert die Datei als HTML-Datei

Öffnet HTML-Bereich

Enthält alle Hintergrundinfos wie den Zeichensatz und die verknüpften Dateien

Definiert den zu benutzenden Zeichensatz

Beendet den Bereich mit Hintergrundinfos

Öffnet den Bereich für alle auf der Seite sichtbaren HMTL-Elemente

Eine Überschrift

Ein Paragraph

Schließt den Bereich für die sichtbaren HTML-Elemente

Schließt/beendet die HTML-Datei

Häufige HTML-Tags

Text

h1,h2, ... h6 abgestufte Überschriften (werden immer kleiner, h1 = größte)

  <h1> 1. Überschrift </h1>
  <h2> 2. Überschrift </h2>
  <h3> 3. Überschrift </h3>
  <h4> 4. Überschrift </h4>
  <h5> 5. Überschrift </h5>
  <h6> 6. Überschrift </h6>

1. Überschrift

2. Überschrift

3. Überschrift

4. Überschrift

5. Überschrift

6. Überschrift

p Textabsatz

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ex corporis rerum unde, labore officia!
  </p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ex corporis rerum unde, labore officia!

ul ungeordnete Liste. Mit Punkten o.ä. aufgelistet

li Einzelne Elemente einer Liste

  <ul>
    <li> Home </li>
    <li> Über Uns </li>
  </ul>

Home
Über Uns

ol geordnete (nummerierte) Liste. Mit Zahlen oder Buchstaben aufgelistet.

  <ol>
    <li> Home </li>
    <li> Über Uns </li>
  </ol>

Home
Über Uns

table eine Tabelle

tr eine Zeile/Reihe in einer Tabelle

td Einzelne Tabellenzelle

th Beschriftungszelle in einer Tabelle (table header)

  <table>
    <tr>
      <th> Zahlen <th>
      <td> 1 <td>
      <td> 2 <td>
      <td> 3 <td>
    </tr>
  </table>

a Link bzw. "Anker"

  <a href="https://samuelwoelfl.de">Website von Samuel Wölfl</a>

i,em kursive Schrift

  <i> Text </i>
  <em> Text </em>

b,strong fette Schrift

  <b>Text</b>
  <strong>Text</strong>

Medien

img Bild auf Webseite anzeigen (img ist ein "standalone" Tag - benötigt keinen schließenden Tag)

  <img src="ordner/datei.dateiendung" alt="Bildbeschreibung">

video Video einbinden

  <video controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video.
  </video>

svg SVG Vektor anzeigen - SVGs bestehen aus Text wie eine HTML-Datei z.B. auch.

  <svg version="1.1"
      baseProfile="full"
      width="300" height="200"
      xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" fill="black" />
    <circle cx="150" cy="100" r="90" fill="blue" />
  </svg>

Stukturierung

div Gruppiert eine Gruppe von Elementen

  <div>
    <!-- *Elemente -->
  </div>

header Kopfbereich der Seite

  <header>
    <!-- *Elemente -->
  </header>

section Gruppierung von Inhalt

  <section>
    <!-- *Elemente -->
  </section>

footer Fußbereich einer Website

  <footer>
    <!-- Utilitys (Impressum etc.) -->
  </footer>

Formulare

form Erstellt ein Formular - die Eingaben werden hierrüber verarbeitet

input Einzeiliges Eingabefeld (input ist ein "standalone" Tag - benötigt keinen schließenden Tag, hat keinen Inhalt)

label Beschriftung für Eingabefelder

button anklickbare Schaltfäche die Aktionen auslösen kann

select Eine Dropdown Liste aus der man auswählen kann

textarea mehrzeiliges Eingabefeld

  <form action="mail.php">

    <label>Anrede</label><br>
    <select name="anrede">
      <option value="undefined">Bitte Wählen</option>
      <option value="frau">Frau</option>
      <option value="mann">Herr</option>
      <option value"andere">Andere</option>
    </select><br><br>

    <label>Name</label><br>
    <input type="text" name="name"><br><br>

    <label>Telefon</label><br>
    <input type="tel" name="name"><br><br>

    <label>Email</label><br>
    <input type="email" name="mail"><br><br>

    <label>Passwort</label><br>
    <input type="password" name="password"><br><br>

    <label>Lieblingszahl</label><br>
    <input type="number" name="favorite"><br><br>

    <label>Bewertung</label><br>
    <input type="range" name="favorite"><br><br>

    <input type="radio" name="age">
    <label>unter 18</label><br>

    <input type="radio" name="age">
    <label>über 18</label><br><br>

    <input type="checkbox" name="vehicles">
    <label>Auto</label><br>

    <input type="checkbox" name="vehicles">
    <label>Fahrrad</label><br><br>

    <label>Lieblingsfarbe</label>
    <input type="color"><br><br>

    <label>Datum</label>
    <input type="date"><br><br>

    <label>Nachricht:</label>
    <textarea name="name" rows="8" cols="35"> <br><br>

    <button type="submit" value="Submit">Submit</button>
    <button type="reset" value="Submit">Reset</button>

  </form>

Anrede

Name

Telefon

Email

Passwort

Lieblingszahl

Bewertung

unter 18
über 18

Auto
Fahrrad

Lieblingsfarbe

Datum

Nachricht:

CSS

Grundlegende Infos

CSS = Cascading Style Sheets
CSS ist die Sprache die verwendet wird um das Aussehen von HTML-Elementen zu verändern und sie anzuordnen.

CSS Syntax

Verschiedene Arten CSS zu benutzen:

Inline CSS

Inline CSS wird benutzt um ein einzelnes HTML-Element zu stylen. Dafür benutzt man das Attribut "style". Diesem Attribut kann man dann mehrere CSS-Anweisungen geben.
In diesem Beispiel wird die <h1> blau gemacht.

Internal CSS

Internal CSS wird benutzt um eine einzelne HTML-Seite zu stylen. Internal CSS befindet sich im <head> Bereich, innerhalt eines <style> Elements.

External CSS

External CSS wird benutzt um mehrere HTML-Seiten mit einer Datei zu stylen. Das bringt den Vorteil, dass man mit nur einer CSS-Datei z.B. immer die Überschriften über verschiedene Seiten hinweg gleich gestalten kann.
Um Externes CSS zu nutzen muss man eine extra style.css Datei erstellen und diese dann mit <link rel="stylesheet" href="style.css"> in die HTML-Datei einbinden.

index.html

style.css

HTML

Grundlegende Infos

Der Syntax

Grundaufbau

Häufige HTML-Tags

Text

1. Überschrift

2. Überschrift

3. Überschrift

4. Überschrift

5. Überschrift

6. Überschrift

Medien

Stukturierung

Formulare

CSS

Grundlegende Infos

CSS Syntax

Verschiedene Arten CSS zu benutzen:

Inline CSS

Internal CSS

External CSS

Einstellungen

Color Picker

Themes

Custom Colors