Frontend Development

# Grundstruktur HTML

Beginnen wir nun mit deinem Portfolio.

# Grundgerüst Aufgabe

Öffne die index.html Datei in deinem Code-Editor und erstelle die folgende Grundstruktur deiner Website.

Hinweis

Zusätzlich zu den Tags und Inhalten muss ein HTML-Dokument auch immer einen <!doctype html> in der ersten Zeile enthalten. Wie der Name schon sagt, lässt diese Zeile den Browser erkennen, dass es sich um ein Dokument vom Typ HTML handelt.

<!doctype html>
<html lang="de">
  <!-- Head-Bereich des Dokuments - nur sichtbar für Browser und Suchmaschinen -->
  <head>
    <!-- Meta Einstellungen -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Meta Angaben -->
    <title>Jane Doe, Designer & Developer</title>
    <meta name="description" content="Portfolio von Jane Doe">
    <!-- CSS Dateien -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <!-- Body-Bereich des Dokuments - sichtbar für Nutzer -->
  <body>
    <header>
      <!-- Kopfbereich für Navigation, Logo etc. -->
    </header>
    <main>
      <!-- Hauptbereich für alle sections -->
    </main>
    <footer>
      <!-- Fussbereich für Sitemap, Mailadresse etc. -->
    </footer>
  </body>
</html>

# Meta-Tags

Die Meta-Elemente beinhalten Informationen über eine HTML-Seite im <head>, welche nicht direkt auf der Website sichtbar sind, sondern hauptsächlich von Suchmaschinen interpretiert werden. Aber beispielsweise auch der Seitentitel der im Browserfenster zu sehen ist, kann hier festgelegt werden. Es gibt noch deutlich mehr Meta-Tags. Die oben gezeigten Tags sind die Wichtigsten und reichen für dieses Projekt aus.

Erstellen wir als nächstes innerhalb des header-Tags eine Navigation für unsere Website. Dafür benutzen wir das Tag ul (unordered list) mit den Unterelementen li (list item). Innerhalb dieser li-Tags erstellen wir nun die einzelnen Links für unsere Navigation.

<!-- innerhalb von <header> einfügen -->
<nav>
  <a id="logo" href="#"><strong>JD</strong></a>
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#expertise">Expertise</a></li>
    <li><a href="#work">Work</a></li>
    <li><a href="#career">Career</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

# IDs und Classes

IDs und Classes dienen der Spezifizierung von HTML-Elementen. Möchte man bspw. einen einzelnen Absatz mit einer separaten Hintergrundfarbe belegen, ohne Auswirkungen auf alle anderen p-Tags, so kann man dem entsprechenden Element eine Class zuweisen.

IDs werden generell dann eingesetzt, wenn das Element nur ein einziges Mal im DOM vorkommt.

Classes hingegen können mehrmals innerhalb der gleichen Seite verwendet werden. Das ist besonders hilfreich, wenn man bspw. bestimmte CSS-Auszeichnungen für mehrere Elemente verwendet.

<div id="einmaliges_Element">Inhalt</div>
<div class="mehrfaches_Element">Inhalt</div>

In der Praxis werden wenn immer möglich Classes verwendet. Damit wird das Risiko reduziert, dass zwei identische IDs auf der selben Seite auftauchen, was zu einem Fehler führen könnte. IDs werden eigentlich nur für Anker-Navigationen (nach unten springen auf der selben Seite, wie in deinem Portfolio) und in Zusammenhang mit Javascript verwendet.

← Best Practise →