So erstellst du ein korrektes Htmldokument

Korrektes Basis Html Dokument erstellen und das “Warum”.

“Diese Grundlagen sind ein festes Fundament auf dem du baust. Der Rest ist Schnickschnack.

Verglichen mit CSS und Javascript ist Html leicht zu lernen. Weil du deinen Text, Links, Bilder, Videos in Tags setzt wie:

dein Paragraph

<p>dein Paragraph</p>
<a href=”#”>der Link</a>
<img src=”dein_bild” alt=”bildname”/>
<video width="320" height="240" controls>
<source src="film.mp4" type="video/mp4">
<video>Dein Broser unterstützt das Video Tag nicht!</video>

In diesem Tutorial erfährst du kurz und bündig, alles um mit Html entspannt zu arbeiten.

Das solltes du darüber wissen:

Dein Html beginnt mit einem Html Dokument. z.b „index.html, über_uns.html…“,

Die „index.html“ ist besonders, weil es in der Regel von deinem Lokalserver oder auch Onlineserver als erstes Dokument interpretiert wird, sobald der Ordner geöffnet wird, indem sich die index.html befindet.

Wenn die index.html nicht interpretiert wird, sieht man nur die Order und Daten in dem Ordner im Browser:

die ordnerstruktur auf dem server könnte ohne index.html sichtbar werden
ohne index.html im Server Ordner

Der Code für ein blankes Htmldokument:

In dein Html Dokument schreibst du die Elemente, die der Browser darstellen soll, zunächst ohne Eigenschaften wie Position und Farbe und Formatierungen.

<!DOCTYPE html> 
<html lang="de"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Titel</title>
</head> 
<body> 
<p>Ein Paragraph Block Element</p>
<div>Ein Div Block Element</div> 
<ul>
<li>Erster Punkt</li> 
<li>Zweiter Punkt</li>
</ul> 
<hr> 
<blockquote>Ein Blockquote Block Element</blockquote> <strong>Ein Strong Inline Element,</strong> 
<span>Ein Span Inline Element,</span> 
<em>Ein kursiver Text,</em> Ein Bild Inline Element 
<img src="smiley.jpg" alt=""/> 
<h3>h3 Überschrift Block Element</h3> 
</body> 
</html>

Im Browser:

natürlicher Fluss der Elemente im Browser ohne CSS

Code:

<html>
<head>
<meta charset="utf-8">
</head>
Und damit die Html Elemente in den Mobilen Geräten die ganze Breite des Bildschirms annehmen, schalten wir das Skalieren, mit dem Metatag Viewport so ein: <meta name="viewport" content="width=device-width, initial-scale=1.0">
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Mobile Geräte passen dann den Webseiten Inhalt an Ihre Bildschirmgrößen an, anstatt die Webseite winzig klein im ganzen zu zeigen.

Der Titel vom Browser Tab geben wir so an:

<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titel</title>
Nach dem “<head>” Tag beginnt der “<body>..</body>

Im body stehen die sichtbaren Elemente wie Texte, Bilder, Videos…

<body>
<p>Ein Paragraph Block Element</p>
<div>Ein Div Block Element</div>
<ul>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
</ul>
<hr>
<blockquote>Ein Blockquote Block Element</blockquote>
<strong style="border: 1px solid blue;padding: 33px;">Ein Strong Inline Element,</strong>
<span>Ein Span Inline Element,</span>
<em>Ein kursiver Text, </em>
Ein Bild Inline Element
<img src="smiley.jpg" alt=""/>
<h3>h3 Überschrift Block Element</h3>
</body>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.