HTML

HTML steht für "Hypertext Markup Language" und ist dafür da Websiten mit Inhalt abzufüllen und zu strukturieren.

HTML-Grundgerüst

Das HTML-Grundgerüst besteht aus vier Teile:

doctype
Stammelement html
head
body

Am Anfang jeder Datei wird der doctype festgelegt -> <!doctype html>
Das zeigt dem Browser das es eine HTML Datei ist.

Danach folgt ein lang="de" um dem Browser die Sprache vorzugeben.

Danach kommen einige Stammelemente wie ...

Zwischen <head> und </head> stehen dann Informationen die nicht im Browser sichtbar sind wie meta und titel.

Nach dem head folgt der body . Alles was zwischen <body> und </body> steht ist später auf der Website ersichtlich.

<body>

Alles was zwischen <body> und </body> steht ist auf der Website sichtbar.
Der body wird in vier Bereiche unterteilt:

header -> Kopfbereich(nicht zu verwechseln mit dem head)
nav -> Navigation
main -> Inhaltsbereich
footer -> Fussbereich

<header>

Der Kopfbereich

Im header befindet sich meist ein Logo und ein Slogan der Firma oder ein kurzer Text welcher beschreibt auf was für einer Seite man sich befindet.

<nav>

Die Navigation

Durch den Navigationsbereich können Besucher/innen sehen was es alles auf der Website gibt.

Um eine Navigation aufzubauen braucht man das Element <ul> (unordered list) und <li> (list item)

<ul> </ul>= kennzeichen Beginn und Ende der Liste

<li> </li>= markiert die einzelnen Listenelemente

<main>

Der Inhaltsbereich

Das Element main stellt den Hauptinhalt der Seite da.
Wichtig ist: das Element main darf nur einmal pro Datei verwendet werden!

<footer>

Der Fussbereich

Im footer stehen meist Informationen wie:

Autor
Impressum
Datenschutz
Copyright-Hinweis

Sonstiges

Eine gute Angewonheit ist es, schon von Anfang an Kommentare zu schreiben. Sie dienen als Gedächnisstütze damit man später noch weis was man gemacht hat. Zudem ist es sehr hilfreich wenn man einen Quelltext auskommentieren kann. Alles was im Kommentar steht, ist später nicht auf der Website sichtbar.

Textabsätze

Das Element <p> </p> steht für "paragraphs" und erstellt Textabsätze. Um einen neuen Absatz zu erstellen öffnet man einfach wieder ein neues <p> Element.

Beispiel:
<p>Um aufzuzeigen wie Textabsätze funktionieren mache ich dieses Beispiel</p>
<p>Ist das jetzt klar?</p>

Das Element <br> </br> steht für "break"erzwingt einen Zeilenumbruch.

Überschriften

Das Element <h> </h> erzeugt Überschriften welche man durch Nummern in verschiedenen grössen erstellen kann. Die grösse Überschrift wäre <h1> (diese grösse sollte nur einmal pro Datei vorkommen). Danach kommt <h2>, <h3>, <h4> usw.

Beispiel:
<h1>Erklärung Überschriften</h1>
<h>Man kann Überschriften in verschiedenen grössen erstellen</h2>

Links

Das Element <a></a> braucht man um Weiterleitungen auf andere Seiten zu erzeugen. Um den Link einsetzen zu können braucht man noch das Element <a href>.

Beispiel:
<a href="Link Ziel">Link Text</a>

Um eine E-Mail Adresse oder eine Telefon Nummer zu verlinken macht man im Prinzip das gleiche:
<a href=mailto: vorname.nachname@gmail.com>
<a href="tel:07892493450">

Wenn man HTML und CSS verbinden möchte macht man das so
<link href="css/style.css" rel="stylesheet">

Um ein Bild zu verlinken geht das ganze so:
<img src="alle/ordner/unterordner/Bild.jpg" alt="Text" (width="200" height="300")>