nz

Neuseelandreise HOWTO - HTML Grundgerüst

1. Vorbereitung

index.html Datei erstellen und den html 5 Baustein von VSCode einfügen

🔗 COMMIT
Sidestep VSCode 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

2. Die HTML-Seite entwickeln

Seitentitel als <title> Element ergänzen und Seitensprache über das lang-Attribut auf Deutsch (de) ändern

🔗 COMMIT
```
  <html lang="de">

  <title>Neuseelandreise</title>
```
Titel als <h1> Element (für header 1) setzen

🔗 COMMIT
```
  <h1>Neuseelandreise</h1>
```
Untertitel als <h2> Element (für header 2) setzen

🔗 COMMIT
```
  <h2>Tongariro-Nationalpark</h2>
```
Introtext als <p> Element (für paragraph) mit weichen Zeilenumbrüchen als <br> Element (für break) hinzufügen. Wikipedia-Suche “Tongariro-Nationalpark”, dann die ersten drei Absätze kopieren

🔗 COMMIT
```
  <p>Der Tongariro-Nationalpark  ... Weltnaturerbe der UNESCO. <br> ... heilig verehren</p>
```
Link zur Quelle als <a> Element (wie anchor) ergänzen

🔗 COMMIT
```
  (Quelle: <a href="https://de.wikipedia.org/wiki/Tongariro-Nationalpark">Wikipedia</a> )
```
- das Link-Ziel wird durch das href-Attribut (wie Hyperlink reference) bestimmt
- der Linktext steht zwischen <a href=""> und </a>
Quelltext mit dem VS Code Befehl F1 / Format Document formatieren - das bringt etwas Struktur in den Code und hilft später bei Skripts und Stylesheets noch viel mehr

🔗 COMMIT
Bild einer Attraktion im Netz suchen und speichern
- ein frei verfügbares Bild ohne Copyright Einschränkungen bei https://pixabay.com suchen: Keyword “tongariro” führt unter anderem zu einem Bild der Emerald Lakes unter https://pixabay.com/de/photos/neuseeland-tongariro-crossing-83645/
- die 1280 px breite Variante speichern
- Speicherort ist ein neues Unterverzeichnis images/
- Dateiname ist attraction.jpg
🔗 COMMIT
Bild der Attraktion als Abbildung mit Bildunterschrift einbauen
- die Abbildung als <figure> Element mit einem Bild als <img> Element definieren
  
  🔗 COMMIT
```
  <figure>
      <img src="images/attraction.jpg" alt="Drei Vulkanseen beim Tongariro Gipfel">
  </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 folgt unterhalb des <img> Elements als <figcaption> Element mit einem <a> Element für den Link zur Bildquelle
  
  🔗 COMMIT
```
  <figure>
      <img>
      <figcaption>Drei Vulkanseen am verschneiten Gipfel des Tongariros
          (Quelle: <a href="https://pixabay.com/photos/new-zealand-tongariro-crossing-83645/">tongariro@pixabay</a>
      </figcaption>
  </figure>
```
Bildbearbeitung in GIMP: das Bild ist zu groß, wir verkleinern es
- GIMP starten und das Bild images/attraction.jpg laden
  - Bild -> Bildgröße -> 900 x Höhe ändert sich automatisch -> Größe ändern
  - Datei -> Exportieren nach -> images/attraction.jpg -> Exportieren
    - Qualität: 90
    - Vorschau speichern weg
    - EXIF, XMP, IPTC weg (das sind die Bildmetadaten, die auch sensible Werte haben können, z.B. Zeit, GPS-Location, vergebene eigene Tags, etc.)
die Überschrift beim <h2> Element mit einem <em> Element kursiv formatieren

🔗 COMMIT
```
  <h2><em>Tongariro-Nationalpark</em></h2>
```
einen beliebigen Begriff im Beschreibungsabsatz mit einem <strong> Element fett formatieren

🔗 COMMIT
```
  <strong>Kultstätten der Māori</strong>
```
eine Linkliste als <ul> Element (wie unordered list) mit drei weiterführenden Links als <a> Elemente verpackt in <li> Elements (wie list item) hinzufügen. Vor der Linkliste die Überschrift Links als <h3> Element ergänzen

🔗 COMMIT
```
  <h3>Links</h3>
  <ul>
      <li><a href="https://...">...</a></li>
      <li><a href="https://...">...</a></li>
      <li><a href="https://...">...</a></li>
  </ul>
```
die Navigation zu den Nachbaretappen als <nav> Element (wie navigation) mit zwei <a> Elementen ergänzen. Das href-Attribut der Links leiten wir über die Usernamen der Nachbarn ab - wir finden sie in der Etappentabelle nz_etappen.ods im OLAT Kurs. Das Muster der URL für das href-Attribut ist immer gleich: username.github.io/nz
- Unicode-Zeichen für Pfeile unterstreichen die Richtung der Navigation
  - die Pfeile finden wir auf https://symbl.cc/de/
  - Suche: Schwerer Barb-Pfeil nach links, auf der Ergebnisseite bei “ähnliche Zeichen” finden wir auch den Pfeil nach rechts / jeweils Kopieren
🔗 COMMIT
```
  <nav>
      <a href="https://damerow.github.io/nz">🡸 vorhergehende Etappe</a> |
      <a href="https://juba1508.github.io/nz">nächsten Etappe 🡺</a>
  </nav>
```
- mit dem <nav> Element sind wir bei den Strukturelementen angekommen, die unserer Seite etwas mehr Semantik verleihen werden …

3. Seitenstruktur verfeinern

mit den sprechenden Strukturelementen <header>, <main>, <article>, <footer> gleich unter dem <body> Element die Seitenstruktur definieren

🔗 COMMIT

  <body>
      <header></header>
      <main>
          <article></article>
      </main>
      <footer></footer>
  </body>

den ganzen bisher geschriebenen Content in das <article> Element verschieben. Die Etappennavigation kommt in den <footer>

🔗 COMMIT
mit F1 / Format Document den Quelltext säubern

🔗 COMMIT

zuerst ein Bannerbild für den Header bei https://pixabay.com suchen
- Suche “Tongariro” führt zu https://pixabay.com/de/photos/tongariro-vulkan-herr-der-ringe-583179/
- Die Version mit 1280 Pixel Breite downloaden
  - Speicherort im Unterverzeichnis images/
  - Bildname header.jpg
  🔗 COMMIT
- Bannerbild im <header> als <img> Element einbauen
  
  🔗 COMMIT
```
  <header>
      <img src="images/header.jpg" alt="Tongariro mit Straße im Vordergrund">
  </header>
```
- Bildbearbeitung in GIMP: das Bannerbild mit 1280x365 Pixel ausstanzen
  - Bild -> Leinwandgröße -> 1280 x 365 -> Größe ändern
  - Ebene -> Ebene auf Bildgröße
  - Datei -> Exportieren nach -> images/header.jpg -> Exportieren
    - Qualität: 90
    - Vorschau speichern weg
    - EXIF, XMP, IPTC weg
  - 🔗 COMMIT
analog zum Bannerbild ein Userbild bei https://pixabay.com suchen
- Suche “Bus” führt zu https://pixabay.com/de/photos/vw-bus-vw-bully-volkswagen-meer-1845719/
- wir speichern diesmal direkt das Vorschaubild
  - Unterverzeichnis images/
  - Bildname user.jpg
- Bildbearbeitung in GIMP: ein quadratische Bild ausstanzen und auf 100x100 Pixel bringen
  - Doppelklick auf das Symbol “rechteckige Auswahl”
    - oder Werkzeuge -> Auswahlwerkzeuge -> Rechteckige Auswahl (R)
    - F1 drücken wenn über dem Eintrag zeigt Hilfe im Web
  - Seitenverhältnis -> Fixiert -> 1:1 einstellen
  - Rahmen aufziehen und mit Drag positionieren
  - Position und Größe werden angezeigt, auch der Bildmittelpunkt
  - Größe kann auch an den Ecken geändert werden
  - Wenn alles passt:
    - Bild -> Auf Auswahl zuschneiden
    - Bild -> Bild skalieren -> 100x100 -> Skalieren
    - Datei -> Exportieren nach -> images/user.jpg -> Exportieren
      - Qualität: 100 (ist ja ohnehin klein)
      - Vorschau speichern weg
      - EXIF, XMP, IPTC weg
  🔗 COMMIT

Userbild mit Bildquelle und Bild als Link direkt unter dem Bannerbild einbauen. Der Link geht zum eigenen github Account

🔗 COMMIT

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

die Bildquellen als Kommentare (für jetzt) hinzufügen

🔗 COMMIT

  <!-- Bildquelle: https://pixabay.com/photos/tongariro-volcano-lord-who-rings-583179/ -->
  <!-- Bildquelle: https://pixabay.com/photos/vw-bus-vw-bully-volkswagen-sea-1845719/ -->

Das Grundgerüst für die Etappenseite ist damit fertig

Online unter: https://webmapping23s.github.io/nz

nz

Neuseelandreise HOWTO - HTML Grundgerüst

1. Vorbereitung

2. Die HTML-Seite entwickeln

3. Seitenstruktur verfeinern

4. Headerbereich mit Banner und Usericon erstellen

Das Grundgerüst für die Etappenseite ist damit fertig