nz

Neuseelandreise HOWTO (Teil 1)

HTML Grundgerüst

a) Vorbereitung

index.html Datei erstellen 🔗 COMMIT
den html 5 Baustein von VS Code einfügen 🔗 COMMIT
Sidestep: VS Code Hilfestellungen
- Bausteine wie z.B. oben, autocomplete bei allen Elementen, Attributen
- Tooltips bei Elementen & Attributen onmouseover
- Links zur MDN Reference für jedes html-Element verfügbar
- mit dem “Live Server” Plugin können wir einen lokalen Webserver starten und uns die Seite (wie im Internet) ansehen

b) Die HTML-Seite entwickeln

Seitensprache über das lang-Attribut auf Deutsch ändern 🔗 COMMIT
```
  <html lang="de">
```
Seitentitel title ändern 🔗 COMMIT
```
  <title>Neuseelandreise</title>
```
Titel h1 (für header 1) 🔗 COMMIT
```
  <h1>Neuseelandreise</h1>
```
Untertitel h2 (für header 2) und kursiv em (für emphasis) 🔗 COMMIT
```
  <h2><em>Tongariro-Nationalpark</em></h2>
```
Introtext p (für paragraph) hinzufügen - Wikipedia-Suche “Tongariro-Nationalpark”, die ersten drei Absätze 🔗 COMMIT
```
  <p>Der Tongariro-Nationalpark  ... Vulkane als heilig verehren.</p>
```
einen Begriff mit strong fett formatieren 🔗 COMMIT
```
  <strong>Kultstätten der Māori</strong>
```
Link zur Quelle als a (wie anchor) 🔗 COMMIT
```
  (Quelle: <a href="https://...">Wikipedia</a>)
```
- das Link-Ziel wird durch das href-Atrtribut (wie Hyperlink reference) bestimmt
- der Linktext steht zwischen <a href=""> und </a>
ein Bild als Abbildung mit Bildunterschrift einbauen
- zuerst suchen wir ein frei verfügbares Bild ohne Copyright Einschränkungen bei https://pixabay.com
  - Suche “Emerald Lakes” führt zu https://pixabay.com/photos/emerald-lakes-3189389/
  - wir öffnen das Vorschaubild gleich in einem neuem Tab und speichern es
    - in einem neuen Unterverzeichnis images/
    - mit dem Namen attraction.jpg (oder attraction.webp je nach Browser)
  - 🔗 COMMIT
- die Abbildung als <figure>-Element mit einem Bild als <img>-Element 🔗 COMMIT
```
  <figure>
      <img src="images/attraction.webp" alt="Drei grüne Seen im Gipfelbereich mit Schneeflecken und Rauch">
  </figure> 
```
  - das <img>-Element benötigt (mindestens) zwei Attribute
    - das src-Attribut (wie source) mit dem Ablageort des Bildes
    - das alt-Attribut (wie alternative) als Beschreibung des Bildes für Screenreader
- die Bildunterschrift als <figcaption>-Element mit einem Link zur Bildquelle 🔗 COMMIT
```
  <figcaption>
      Blick auf die Emerald Lakes. Bild: <a href="https://pixabay.com/de/photos/emerald-lakes-3189389/">Laura7933</a>
  </figcaption>
```

eine Linkliste mit drei weiterführenden Links vorbereiten 🔗 COMMIT

  <h3>Links</h3>
  <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
  </ul>

und mit Weblinks der Wikipedia-Seite komplettieren 🔗 COMMIT

c) Seitenstruktur verfeinern

wir verpacken alles im <body>-Element in ein <article>-Element innerhalb eines <main>-Elements 🔗 COMMIT

  <body>
      <main>
          <article>
              <h1>Neuseelandreise</h1>
              ....
          </article>
      </main>
  </body>

Sidestep: Beautify Plugin
- das Beautify Plugin von VS Code hilft uns, die Einrückungen unter Kontrolle zu behalten
- Aufruf nach der Installation:
  - F1 + Beautify file (oder Beautify selection)
  - STRG+UMSCHALT+P + Beautify file
  - View / Command Palette + Beautify file

wir brauchen zuerst ein Bannerbild für den Header von https://pixabay.com
- Suche “Tongariro” führt zu https://pixabay.com/de/photos/tongariro-vulkan-herr-der-ringe-583179/
- Version mit 1280 Pixel downloaden
  - im Unterverzeichnis images/
  - mit dem Namen header.jpg
- Größe ändern mit https://redketchup.io/
  - Image Resizer
  - Browse / Crop Dimensions
  - 1280 x 365 Pixel einstellen
  - Save Image
  - 🔗 COMMIT
wir bauen das Banner in einem neuen <header>-Element als <img>-Element ein 🔗 COMMIT
```
  <main>
      <header>
          <img src="images/header.jpg" alt="Straße im Vordergrund mit dem Vulkankegel im Hintergrund">
      </header>
      <article>
      </article>
  </main>
```
- Hinweis: im commit ist das <header>-Element falsch positioniert und wurde erst später in das <main>-Element verschoben (siehe 🔗 COMMIT
- das Bannerbild wird diesmal ohne <figure>-Element direkt als <img>-Element eingebaut
analog zum Bannerbild suchen wir ein Userbild bei https://pixabay.com
- Suche “Bus” führt zu https://pixabay.com/de/photos/vw-bus-vw-bully-volkswagen-meer-1845719/
- wir speichern wieder direkt das Vorschaubild
  - im Unterverzeichnis images/
  - mit dem Namen user.jpg
- Größe ändern mit https://redketchup.io/
  - Image Resizer
  - Aspect Ratio / Square
  - Ausschnitt wählen
  - Resize Dimensions
  - 100 x 100 Pixel einstellen
  - Save Image
  - 🔗 COMMIT
Userbild mit Bildquelle und Bild als Link direkt unter dem Bannerbild einbauen 🔗 COMMIT
```
  <a href="#"><img src="images/user.jpg" alt="Another one rides the bus"></a>
```
- beim href-Attribut des Links verwenden wir die Raute (#) als Platzhalter, später werden wir das eigene github User-Repo verlinken
- als Linktext verwenden wir das Bild statt einem Text

e) Footerbereich mit Etappennavigation erstellen

wir ergänzen ein <footer>-Element
- nach </article> und vor </main>
- im <footer>-Element ein <nav>-Element mit zwei Links (# wieder als Platzhalter)
```
  <footer>
      <nav>
          <a href="#">vorhergehende Etappe</a>
          <a href="#">nächste Etappe</a>
      </nav>
  </footer>
```
🔗 COMMIT
- Hinweis: im commit ist das <footer>-Element falsch positioniert und wurde erst später in das <main>-Element verschoben (siehe 🔗 COMMIT
Unicode-Zeichen für Pfeile unterstreichen die Richtung der Navigation
- die Pfeile finden wir auf https://unicode-table.com
- Pfeile / 13. Navigation Arrows / Nach links gerichteter mittlerer Barb-Pfeil 🔗 COMMIT
```
  <a href="#">🡨 vorhergehende Etappe</a>
  <a href="#">nächste Etappe 🡪</a>
```

f) Userlink und Etappennavigation ergänzen

mit Erstellung eurer github-Repos und der Zuteilung der github-User zu den Etappen können die #-Links noch angepasst werden

Userlink zum github-Repo 🔗 COMMIT

  <a href="https://github.com/webmapping"><img src="images/user.jpg" alt="Another one rides the bus"></a>

Vor- und Zurücklinks für die Tongariro-Seite 🔗 COMMIT

  <a href="https://paulasp3.github.io/nz/index.html">🡨 vorhergehende Etappe</a>
  <a href="https://andrea-1408.github.io/nz/index.html">nächste Etappe 🡪</a>

nz