↓ Skip to main content
Meine Seite

HTML Basics

Web Html
Table of Contents

Eine zusammenstellung von HTML Basics.

HTML
#

HTML steht für Hyper Text Markup Language

Basics
#

Struktur
# 

┌───────────────────────────────────────────────────────┐
│ <html>                                                │
│                                                       │
│   ┌───────────────────────────────────────────────┐   │
│   │ <head>                                        │   │
│   │                                               │   │
│   │   ┌───────────────────────────────────────┐   │   │
│   │   │ <title>Page title</title>             │   │   │
│   │   └───────────────────────────────────────┘   │   │
│   │                                               │   │
│   │ </head>                                       │   │
│   └───────────────────────────────────────────────┘   │
│                                                       │
│   ┌───────────────────────────────────────────────┐   │
│   │ <body>                                        │   │
│   │                                               │   │
│   │   ┌───────────────────────────────────────┐   │   │
│   │   │ <h1>This is a heading</h1>            │   │   │
│   │   ├───────────────────────────────────────┤   │   │
│   │   │ <p>This is a paragraph.</p>           │   │   │
│   │   ├───────────────────────────────────────┤   │   │
│   │   │ <p>This is another paragraph.</p>     │   │   │
│   │   └───────────────────────────────────────┘   │   │
│   │                                               │   │
│   │ </body>                                       │   │
│   └───────────────────────────────────────────────┘   │
│                                                       │
│ </html>                                               │
└───────────────────────────────────────────────────────┘

Dokument
# 

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
  • <!DOCTYPE html> = HTML5 Dokument
  • <html></html> = Root Element
  • <head></head> = Metadaten
  • <title></title> = Titel der unter anderem im Tab angezeigt wird.
  • <body></body> = Container mit sichtbaren Inhalte; Überschriften, Paragraphen, Bilder, Hyperlinks, Tabellen, Listen usw.

Tastenkombination
#

  • Ctrl + U lässt sich im Browser der HTML Quellcode ansehen.

Elemente
#

  • <tagname> Inhalt... </tagname>

Überschriften
#

  • <h1></h1> = Überschriften

Paragraphen
#

  • <p></p> = Paragraphen
  • <br> = Zeilenumbruch
  • <pre></pre> = behält Leerzeichen und Zeilenumbrüche
  • <hr> = Trennlinie

Styles
#

  • style = Farbe, Schriftart, Grösse usw.
Schriftart
<h1 style="font-family:verdana;">Überschrift 1 mit Verdana</h1>
<p style="font-family:courier;">Paragraph mit Courier</p>
Textausrichtung
<h1 style="text-align: center;">Überschrift 1 zentriert</h1>
<p style="text-align: center;">Paragraph zentriert</p>
Schriftgrösse
<h1 style="font-size: 60px;">Das ist eine vergrösserte Überschrift</h1>
Farbe
<p style="color:red;">Dieser Paragraph ist rot.</p>

Formatierungen
#

Nachfolgende Inline-Elemente sollten innheralb von Textflusselementen stehen.

  • <b></b> = fett (nur Optik)
  • <strong></strong> = wichtig (meist fett)
  • <i></i> = kursiv (nur Optik)
  • <em></em> = Betonung (meist kursiv)
  • <mark></mark> = markiert/hervorgehoben
  • <small></small> = kleiner (z.B. Nebeninfo)
  • <del></del> = gelöscht/entfernt (meist durchgestrichen)
  • <ins></ins> = eingefügt (meist unterstrichen)
  • <sub></sub> = tiefergestellt
  • <sup></sup> = hochgestellt

Zitieren
#

Abkürzung
<abbr title="Hypertext Markup Language">HTML</abbr>

Kommentieren
#

Kommentar
<!-- Hier Kommentar schreiben -->

Farben
#

Hintergrundfarbe
<body style="background-color: burlywood;"></body>
<h1 style="background-color: powderblue;">Überschrift 1 mit Hintergrundfarbe</h1>
<p style="background-color:tomato;">Paragraph mit Hintergrundfarbe</p>
Rahmenfarbe
<h1 style="border: 2px solid DodgerBlue;">Rahmen blau</h1>

CSS
#

CSS steht für Cascading Style Sheets

CSS ist Kaskadierend. Das Elternelement übergibt ein Style an die Kinder weiter. Kinder können aber auch eigene Styles annehmen.

Arten um CSS einzubinden:

  • Inline: style innerhalb eines HTML Elements
<p style="color:red;">Dieser Paragraph ist rot.</p>
  • Internal: <style> im <head> Bereich
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>Überschrift 1</h1>
<p>Das ist ein Parapraph.</p>

</body>
</html>
  • External: Über <link> zu einem externen CSS file
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Überschrift 1</h1>
<p>Das ist ein Parapraph.</p>

</body>
</html>
style.css
body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

Farben, Schriftarten und Schriftgrösse
# 

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;

}
p  {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Rahmen
# 

p {
  border: 2px solid powderblue;
}

Innenabstand
# 

p {
  border: 2px solid powderblue;
  padding: 30px;
}

Aussenabstand
# 

p {
  border: 2px solid powderblue;
  margin: 50px;
}

Links #

  • <a></a> = Link
<p><a href="https://www.wikipedia.org/">Besuche Wikipedia!</a></p>

Ziel Attribut
#

  • target="_blank" = In neuem Tab oder Fenster öffnen
<a href="https://www.wikipedia.org/" target="_blank">Besuche Wikipedia!</a>^

Bild als Link # 

<a href="https://www.wikipedia.org/">
<img src="https://de.wikipedia.org/static/images/icons/wikipedia.png" alt="Wikipedia.org" style="width:42px;height:42px;">
</a>

Knopf als Link # 

<button onclick="document.location='https://www.wikipedia.org/'">Wikipedia</button>

Farbige Links #

Das sind standartisierte Klassen:

  • link = unbesuchter Link
  • visited = besuchter Link
  • hover = drüberschweben mit der Maus
  • active= während des Klickens
<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>

Farbige Knöpfe
#

Es können auch mehrere klassen mit den gleichen Eigenschaften befüllt werden. Im nachfolgenden Beispiel sieht der Knopf unbesucht und besucht gleich aus.

Auch beim Drüberschweben und drücken sieht der Knopf gleich aus.

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>

Bilder
#

  • <img> = Bild
  • src = Quelle
  • alt = Alternativtext wenn Bild nicht lädt
  • width / height = Breite / Höhe

Bilder können auch ohne style dargestellt werden, jedoch kann das Bild im <head> überschrieben werden, wenn dort ein styledefiniert ist.

<img src="https://de.wikipedia.org/static/images/icons/wikipedia.png" alt="Wikipedia Logo" style="width:128px;height:128px;">

Favicons
#

  • rel="icon" = rel steht für relationship und “icon” standartisiert für das Favicon
  • type="image/png" = type definiert den Typ, was in diesem fall ein PNG ist
  • href= = Link oder Pfad
<head>
    <title>Meine Testseite </title>
    <link rel="icon" type="image/png" href="https://de.wikipedia.org/static/images/icons/wikipedia.png">
</head>

Seitentitel
#

Seitentitel wird im Tab angezeigt und ist wichtig für SEO.

<head>
  <title>Meine Seite</title>
</head>

Tabellen
#

  • <table></table> = Tabelle
  • <tr></tr> = Zeile
  • <td></td> = Spalte
  • <th></th> = Überschrift
<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <table style="width: 50%">
        <tr>
            <th>Vorname</th>
            <th>Nachname</th>
            <th>Alter</th>
        </tr>
        <tr>
            <td>Max</td>
            <td>Mustermann</td>
            <td>25</td>
        </tr>
    </table>

</body>

Listen
#

Es gibt viele verschiedene arten von Listen.

  • <ul></ul> = Aufzählung mit Punkten
  • <ol></ol> = nummeriert
  • <li></li> = Listenobjekt
<ul>
  <li>Auto</li>
  <li>Fahrrad</li>
  <li>Zug</li>
</ul>

Mit Listen können auch Menüs gebaut werden.

DIV
#

  • <div></div> = Container

Mit <div> können ganze Bereiche formatiert werden.

<div style="background-color:#FFF4A3;">
  <h2>Stadt Bern</h2>
  <p>Bern ist das politische Zentrum der Schweiz.</p>
  <p>Bern hat über 130.000 Einwohner.</p>
</div>

<div style="background-color:#FFC0C7;">
  <h2>Stadt Zürich</h2>
  <p>Zürich ist die grösste Stadt der Schweiz.</p>
  <p>Zürich hat über 400.000 Einwohner.</p>
</div>

<div style="background-color:#D9EEE1;">
  <h2>Stadt Genf</h2>
  <p>Genf ist eine wichtige Stadt in der Schweiz.</p>
  <p>Genf hat über 200.000 Einwohner.</p>
</div>

Veriktale Ausrichtung
#

Float
#

Float ist für das Text-Umfliessen von Bildern gemacht und nicht für Layouts.

<style>
    div.mycontainer {
        width: 100%;
        overflow: auto;
    }

    div.mycontainer div {
        float: left;
        width: 33.33%;
    }
</style>

<body>

    <div class="mycontainer">

        <div style="background-color:#FFF4A3;">
            <h2>Stadt Bern</h2>
            <p>Bern ist das politische Zentrum der Schweiz.</p>
            <p>Bern hat über 130.000 Einwohner.</p>
        </div>

        <div style="background-color:#FFC0C7;">
            <h2>Stadt Zürich</h2>
            <p>Zürich ist die grösste Stadt der Schweiz.</p>
            <p>Zürich hat über 400.000 Einwohner.</p>
        </div>

        <div style="background-color:#D9EEE1;">
            <h2>Stadt Genf</h2>
            <p>Genf ist eine wichtige Stadt in der Schweiz.</p>
            <p>Genf hat über 200.000 Einwohner.</p>
        </div>

    </div>

</body>

Inline-Block
#

Inline-Block ist für Inline-Verhalten gemacht und nicht für Layouts.

<style>
div {
  width:30%;  
  display:inline-block;
}
</style>

<body>

        <div style="background-color:#FFF4A3;">
            <h2>Stadt Bern</h2>
            <p>Bern ist das politische Zentrum der Schweiz.</p>
            <p>Bern hat über 130.000 Einwohner.</p>
        </div>

        <div style="background-color:#FFC0C7;">
            <h2>Stadt Zürich</h2>
            <p>Zürich ist die grösste Stadt der Schweiz.</p>
            <p>Zürich hat über 400.000 Einwohner.</p>
        </div>

        <div style="background-color:#D9EEE1;">
            <h2>Stadt Genf</h2>
            <p>Genf ist eine wichtige Stadt in der Schweiz.</p>
            <p>Genf hat über 200.000 Einwohner.</p>
        </div>

    </div>

</body>

Flex
#

Flex ist gut für 1-dimensionale Layouts wie Menüs, Toolbars usw.

<style>
.mycontainer {
  display: flex;
}
.mycontainer > div {
  width:33%;
}
</style>

<body>

    <div class="mycontainer">

        <div style="background-color:#FFF4A3;">
            <h2>Stadt Bern</h2>
            <p>Bern ist das politische Zentrum der Schweiz.</p>
            <p>Bern hat über 130.000 Einwohner.</p>
        </div>

        <div style="background-color:#FFC0C7;">
            <h2>Stadt Zürich</h2>
            <p>Zürich ist die grösste Stadt der Schweiz.</p>
            <p>Zürich hat über 400.000 Einwohner.</p>
        </div>

        <div style="background-color:#D9EEE1;">
            <h2>Stadt Genf</h2>
            <p>Genf ist eine wichtige Stadt in der Schweiz.</p>
            <p>Genf hat über 200.000 Einwohner.</p>
        </div>

    </div>

</body>

Grid
#

Grid ist gut für 2-dimensionale Layouts wie Galerien, komplexe Raster usw.

<style>
    .grid-container {
        display: grid;
        grid-template-columns: 33% 33% 33%;
    }
</style>

<body>

    <div class="grid-container">

        <div style="background-color:#FFF4A3;">
            <h2>Stadt Bern</h2>
            <p>Bern ist das politische Zentrum der Schweiz.</p>
            <p>Bern hat über 130.000 Einwohner.</p>
        </div>

        <div style="background-color:#FFC0C7;">
            <h2>Stadt Zürich</h2>
            <p>Zürich ist die grösste Stadt der Schweiz.</p>
            <p>Zürich hat über 400.000 Einwohner.</p>
        </div>

        <div style="background-color:#D9EEE1;">
            <h2>Stadt Genf</h2>
            <p>Genf ist eine wichtige Stadt in der Schweiz.</p>
            <p>Genf hat über 200.000 Einwohner.</p>
        </div>

    </div>

</body>