Html Website erstellen

Was ist HTML und CSS?

HTML (Hypertext Markup Language) definiert die Struktur des Inhalts und seine Bedeutung und definiert Inhalte wie zum Beispiel Überschriften, Absätze oder Bilder. CSS (Cascading Style Sheets) ist eine Präsentationssprache, die das Erscheinungsbild von Inhalten beispielsweise mit Schriftarten oder Farben gestaltet.
Diese beiden Sprachen, HTML und CSS, sind voneinander unabhängig und sollten dies auch bleiben. CSS sollte nicht in ein HTML-Dokument geschrieben werden und umgekehrt. In der Regel stellt HTML immer Inhalt dar, und CSS bestimmt immer sein Erscheinungsbild.

Mit diesem Verständnis des Unterschieds zwischen HTML und CSS wollen wir uns eingehender mit HTML beschäftigen.

Grundlegende HTML-Bedingungen

Bevor Sie mit der Arbeit mit HTML beginnen, werden Sie wahrscheinlich auf neue und oft ungewöhnliche Begriffe stoßen. Im Laufe der Zeit werden Sie mehr über alle erfahren, aber zunächst müssen Sie mit drei grundlegenden HTML-Begriffen beginnen – Elementen, Tags und Attributen.

Elemente

Elemente geben an, wie Struktur und Inhalt von Objekten auf der Seite definiert werden. Zu den häufig verwendeten Elementen gehören mehrere Ebenen von Überschriften (definiert als Elemente von <h1> bis <h6>) und Absätze (definiert als <p>). Sie können <a>, <div>, <span>, <strong> und <em> und viele andere in die Liste aufnehmen.
Elemente werden durch spitze Klammern <> gekennzeichnet, die den Elementnamen umgeben. Das Element wird also so aussehen:

<a>

Tags

Durch das Anbringen von spitzen Klammern <und> um ein Element wird ein so genanntes Tag erstellt. Tags werden meistens in Paaren von öffnenden und schließenden Tags gefunden.
Das öffnende Tag markiert den Anfang des Elements. Es besteht aus dem Zeichen <, dann kommt der Name des Elements und endet mit dem Zeichen>; zum Beispiel <div>.

Das schließende Tag markiert das Ende des Elements. Es besteht aus dem Zeichen <, gefolgt von einem Schrägstrich und dem Namen des Elements, und wird mit dem Zeichen> abgeschlossen. zum Beispiel </ div>.

Der Inhalt zwischen dem öffnenden und dem schließenden Tag ist der Inhalt dieses Elements. Ein Link hat beispielsweise ein öffnendes <a> -Tag und ein schließendes Tag </a>. Was zwischen diesen beiden Tags liegt, ist der Inhalt des Links.

Link-Tags sehen also etwa so aus:

<a> … </a>

Attribute

Attribute sind Eigenschaften, mit denen zusätzliche Informationen zu einem Element bereitgestellt werden. Zu den gebräuchlichsten Attributen gehört das id-Attribut, das ein Element identifiziert. das Klassenattribut, das das Element klassifiziert; das src-Attribut, das die Quelle des eingebetteten Inhalts angibt; und das href-Attribut, das auf einen Link zur zugehörigen Ressource verweist.
Attribute werden im öffnenden Tag nach dem Elementnamen definiert. Zu den Attributen gehören im Allgemeinen Name und Wert. Das Format für diese Attribute besteht aus einem Attributnamen mit einem Gleichheitszeichen, gefolgt von dem Attributwert in Anführungszeichen. Das <a> -Element mit dem Attribut href sieht beispielsweise so aus:

<a href=”http://shayhowe.com”> Shay Howe </a>

Dieser Code zeigt den Text „Shay Howe“ auf einer Webseite an und führt den Benutzer beim Klicken auf diesen Text zu http://shayhowe.com. Das Linkelement wird mit dem öffnenden <a> -Tag und dem schließenden Tag </a> für den Text sowie mit dem Attribut und dem Wert der Adresse des durch href = “http://shayhowe.com” im öffnenden Tag angegebenen Links deklariert.

Nachdem Sie nun wissen, was HTML-Elemente, -Tags und -Attribute sind, werfen wir einen Blick auf unsere erste Webseite. Wenn hier etwas neu aussieht, machen Sie sich keine Sorgen – wir werden alles auf dem Weg dechiffrieren.

Anpassen der HTML-Dokumentstruktur

HTML-Dokumente sind einfache Textdokumente, die mit der Erweiterung .html und nicht mit .txt gespeichert werden. Um mit dem Schreiben von HTML beginnen zu können, benötigen Sie zunächst einen Texteditor, den Sie bequem verwenden können. Leider sind Microsoft Word oder Pages hier nicht enthalten, da es sich um komplexe Editoren handelt. Die zwei beliebtesten Texteditoren zum Schreiben von HTML und CSS sind Dreamweaver und Sublime Text. Kostenlose Alternativen sind auch Notepad ++ für Windows und TextWrangler für Mac.
Alle HTML-Dokumente enthalten eine obligatorische Struktur, die die folgenden Deklarationen und Elemente enthält: <! DOCTYPE html>, <html>, <head> und <body>.

Die Dokumenttypdeklaration oder <! DOCTYPE html> befindet sich am Anfang des HTML-Dokuments und teilt den Browsern mit, welche HTML-Version verwendet wird. Da wir die neueste Version von HTML verwenden, lautet der Dokumenttyp nur <! DOCTYPE html> Danach folgt das Element <html>, das den Anfang des Dokuments kennzeichnet.

Im <html> -Element definiert das <head> -Element den oberen Rand des Dokuments, einschließlich verschiedener Metadaten (Begleitinformationen zur Seite). Inhalt des <head> -Elements wird nicht auf der Webseite selbst angezeigt. Stattdessen kann der Name des Dokuments (der in der Titelleiste des Browserfensters angezeigt wird), Links zu externen Dateien oder andere nützliche Metadaten enthalten.

Der gesamte sichtbare Webseiteninhalt befindet sich im Element <body>. Die Struktur eines typischen HTML-Dokuments sieht wie folgt aus:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Hallo Welt!</title>
  </head>
  <body>
    <h1>Hallo Welt!</h1>
    <p>Das ist eine Webseite.</p>
 </body>
</html>

Resultat:

Hallo Welt!

Das ist eine Webseite

Dieser Code zeigt das Dokument, beginnend mit der Dokumenttypdeklaration, <! DOCTYPE html>, und sofort kommt das Element <html>. Innerhalb von <html> befinden sich die Elemente <head> und <body>. Das Element <head> enthält die Seitencodierung über das Tag <meta charset = “utf-8”> und den Titel des Dokuments über das Element <title>. Das Element <body> enthält die Überschrift durch das Element <h1> und einen Textabsatz durch <p>. Da sowohl die Überschrift als auch der Absatz im <body> -Element verschachtelt sind, sind sie auf der Webseite sichtbar.

Wenn sich ein Element in einem anderen Element befindet, das auch verschachtelt genannt wird, empfiehlt es sich, einen Einzug hinzuzufügen, um die Struktur des Dokuments gut strukturiert und lesbar zu halten. Im vorherigen Code sind sowohl das <head> – als auch das <body> -Element verschachtelt und innerhalb des <html> -Elements verschoben. Die Einrückungsstruktur für Elemente wird fortgesetzt, wobei neue Elemente in <head> und <body> hinzugefügt werden.

CSS-Einführung

CSS ist eine komplexe Sprache, die ziemlich viel Energie kostet. Sie können Layout und Design für unsere Seiten hinzufügen und Stile von Element zu Element und von Seite zu Seite gemeinsam nutzen. Bevor wir alle Funktionen von CSS offenlegen können, gibt es einige Aspekte der Sprache, die Sie vollständig verstehen müssen.
Das erste, was wichtig ist, um genau zu wissen, wie die Stile angezeigt werden. Insbesondere müssen wir wissen, wie verschiedene Typen von Selektoren funktionieren und wie die Reihenfolge dieser Selektoren die Anzeige von Stilen beeinflussen kann. Wir möchten auch einige grundlegende Werte von Eigenschaften verstehen, die ständig in CSS vorkommen, insbesondere in Bezug auf Farbe und Größe.

Werfen wir einen Blick unter die Haube des CSS, um genau zu sehen, was los ist.

Cascade

Wir werden anfangen zu verstehen, wie die Stile dargestellt werden, indem wir einen Blick auf die sogenannte Kaskade werfen und einige Beispiele der Kaskade in Aktion lernen. In CSS werden alle Stile von oben nach unten kaskadiert, sodass Sie einen anderen Stil hinzufügen oder neu schreiben können, um Stylesheets zu entwickeln.
Nehmen wir zum Beispiel an, wir haben alle Absatzelemente im oberen Teil unseres Stils ausgewählt und die Hintergrundfarbe für sie auf Orange und eine Schriftgröße von 24 Pixeln gesetzt. Anschließend wählen wir am unteren Rand unseres Stils erneut alle Absatzelemente aus und setzen die Hintergrundfarbe für sie wie hier auf Grün.

p {
Hintergrund: Orange;
Schriftgröße: 24px;
}
p {
Hintergrund: grün;
}
Da der Absatzwähler, der die grüne Hintergrundfarbe einstellt, hinter dem Absatzwähler steht, der die Hintergrundfarbe auf Orange setzt, hat dies in der Kaskade Vorrang. Alle Absätze werden auf einem grünen Hintergrund angezeigt. Die Schriftgröße bleibt 24 Pixel, da die zweite Absatzauswahl keine neue Schriftgröße definiert hat.

Kaskadiereigenschaften

Die Kaskade arbeitet mit Eigenschaften innerhalb einzelner Selektoren. Nehmen wir wieder an, wir haben zum Beispiel alle Elemente des Absatzes ausgewählt und die Hintergrundfarbe für sie auf Orange gesetzt. Dann fügen Sie direkt unter der Hintergrundeigenschaft und ihren Werten eine weitere Eigenschaft und einen Wert hinzu, der die Hintergrundfarbe auf Grün setzt, wie hier gezeigt.
p {
Hintergrund: Orange;
Hintergrund: grün;
}
Da die Ankündigung des grünen Hintergrunds wie zuvor nach der Ankündigung der orange Farbe des Hintergrunds geschrieben wird, werden unsere Absätze auf einem grünen Hintergrund angezeigt.
Alle Stile kaskadieren vom oberen Rand unseres Stylesheets bis zum unteren Rand. Es gibt jedoch Fälle, in denen die Kaskade nicht so gut funktioniert – manchmal, wenn verschiedene Arten von Selektoren verwendet werden und die Besonderheit dieser Selektoren die Kaskade durchbricht.

Die Semantik spielt, wie in dieser Lektion erwähnt, eine wichtige Rolle bei der Bereitstellung von HTML-Struktur und Bedeutung. In der Zukunft werden wir regelmäßig neue Elemente einführen, von denen jedes seine eigene Bedeutung hat. Die Bedeutung all dieser Elemente ist, unserem Inhalt eine größere Bedeutung zu verleihen.

Mehr von unseren Beiträgen

Alle Beiträge sehen
No Comments

Lassen Sie Ihren Kommentar