Informatik:HTML: Unterschied zwischen den Versionen

Aus MvLG
Zur Navigation springen Zur Suche springen
← Zum vorherigen Versionsunterschied
Keine Bearbeitungszusammenfassung
Albert 3Stein (Diskussion | Beiträge)
208 Bearbeitungen
Keine Bearbeitungszusammenfassung
 
(2 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
<h2>Grundlegendes</h2>
<h1>HTML</h1>
HTML ist eine Programmiersprache, mit der du das Grunddesign von Webseiten erstellen kannst. Das weitere Design kannst du später mit CSS erstellen. Da du aber noch andere Programmiersprachen auf den Platformen programieren kannst, muss du an den Anfang den Befehl "<!DOCTYPE html>" eingeben. Die eckigen Klammern müssen jeden Befehl einklammern. Die Sprache stellst du mit "<html lang="de"> auf Deutsch. Der erste Befehl lautet (!MUSS SEIN!) "<head>"."<meta charset="UTF-8">
    <p><strong>Hypertext Markup Language (HTML)</strong> ist die Standard-Auszeichnungssprache für Dokumente, die im World Wide Web angezeigt werden. HTML beschreibt die Struktur von Webseiten und ermöglicht es, Inhalte wie Texte, Bilder, Links und Multimedia-Elemente zu formatieren und anzuzeigen.</p>
<meta name="viewport" content="width=device-width, initial-scale=1.0">" ist wichtig für die Webseite. Dann schreibst du "<title>" uns gibst den Titel ein, zum Beispiel "Meine erste Seite". Danach verlässt du den Head und schreibst "<body>". In diesen kommt dann der Text rein. Diesen kannst du  mit "<strong>" fett machen, mit "<i>" kursiv machen und mit "<u>" unterstreichen. Für eine neue Zeile brauchst du "<br>". Um diese Textformatierungen auszuprobieren, gehe auf die Webseite: "https://www.loremipsum.de". Damit kannst du Lorem Ipsum mit x Wörtern, Sätzen, usw. erstellen. Dies kannst du danach aber auch wieder von deiner Webseite löschen.
 
    <h2>Struktur</h2>
    <p>HTML-Dokumente bestehen aus einer Reihe von Elementen, die durch Tags definiert werden. Ein typisches HTML-Dokument hat die folgende Struktur:</p>
    <pre>
        &lt;!DOCTYPE html&gt;
        &lt;html lang="de"&gt;
        &lt;head&gt;
            &lt;meta charset="UTF-8"&gt;
            &lt;title&gt;Titel der Seite&lt;/title&gt;
        &lt;/head&gt;
        &lt;body&gt;
            &lt;h1&gt;Überschrift&lt;/h1&gt;
            &lt;p&gt;Dies ist ein Absatz.&lt;/p&gt;
        &lt;/body&gt;
        &lt;/html&gt;
    </pre>
    <ul>
        <li><code>&lt;!DOCTYPE html&gt;</code>: Deklariert den Dokumenttyp und die verwendete HTML-Version.</li>
        <li><code>&lt;html&gt;</code>: Das Wurzel-Element eines HTML-Dokuments.</li>
        <li><code>&lt;head&gt;</code>: Enthält Metainformationen über das Dokument, wie den Titel und die Zeichencodierung.</li>
        <li><code>&lt;body&gt;</code>: Beinhaltet den sichtbaren Inhalt der Webseite, wie Texte, Bilder und Links.</li>
    </ul>
 
    <h2>Elemente und Tags</h2>
    <p>HTML verwendet Tags, um verschiedene Elemente zu definieren. Einige grundlegende Tags sind:</p>
    <ul>
        <li><code>&lt;h1&gt;</code> bis <code>&lt;h6&gt;</code>: Überschriften in absteigender Reihenfolge.</li>
        <li><code>&lt;p&gt;</code>: Absatz.</li>
        <li><code>&lt;a&gt;</code>: Hyperlink.</li>
        <li><code>&lt;img&gt;</code>: Bild.</li>
        <li><code>&lt;div&gt;</code>: Blockelement zur Gruppierung von Inhalten.</li>
    </ul>
 
    <h2>Semantische HTML5-Elemente</h2>
    <p>HTML5 führt semantische Elemente ein, die die Struktur und Bedeutung von Inhalten verbessern. Beispiele sind:</p>
    <ul>
        <li><code>&lt;header&gt;</code>: Kopfbereich einer Seite oder eines Abschnitts.</li>
        <li><code>&lt;footer&gt;</code>: Fußbereich einer Seite oder eines Abschnitts.</li>
        <li><code>&lt;article&gt;</code>: Unabhängiger Inhalt, der eigenständig ist.</li>
        <li><code>&lt;section&gt;</code>: Thematische Gruppierung von Inhalten.</li>
    </ul>
 
    <h1>CSS</h1>
    <p><strong>Cascading Style Sheets (CSS)</strong> ist eine Stylesheet-Sprache, die verwendet wird, um das Aussehen und das Layout von HTML-Dokumenten zu gestalten. CSS ermöglicht es Entwicklern, das Design von Webseiten zu trennen und zu steuern, ohne den HTML-Code zu ändern.</p>
 
    <h2>Syntax</h2>
    <p>CSS besteht aus Regeln, die aus Selektoren und Deklarationen bestehen. Eine typische CSS-Regel hat die folgende Struktur:</p>
    <pre>
        <code>
        selector {
            property: value;
        }
        </code>
    </pre>
    <p>- <strong>Selector</strong>: Wählt das HTML-Element aus, das gestylt werden soll.<br>
    - <strong>Property</strong>: Die CSS-Eigenschaft, die geändert werden soll (z. B. <code>color</code>, <code>font-size</code>, <code>margin</code>).<br>
    - <strong>Value</strong>: Der Wert, der der Eigenschaft zugewiesen wird.</p>
    <p>Beispiel:</p>
    <pre>
        <code>
        h1 {
            color: blue;
            font-size: 24px;
        }
        </code>
    </pre>
 
    <h2>Einbindung von CSS</h2>
    <p>CSS kann auf verschiedene Arten in HTML-Dokumente eingebunden werden:</p>
    <ol>
        <li>
            <strong>Inline-CSS</strong>: Direkt im HTML-Element mit dem <code>style</code>-Attribut.
            <pre>
                <code>
                &lt;h1 style="color: blue;"&gt;Überschrift&lt;/h1&gt;
                </code>
            </pre>
        </li>
        <li>
            <strong>Internes CSS</strong>: Innerhalb eines <code>&lt;style&gt;</code>-Tags im <code>&lt;head&gt;</code>-Bereich.
            <pre>
                <code>
                &lt;style&gt;
                    h1 {
                        color: blue;
                    }
                &lt;/style&gt;
                </code>
            </pre>
        </li>
        <li>
            <strong>Externes CSS</strong>: In einer separaten CSS-Datei, die mit dem <code>&lt;link&gt;</code>-Tag im <code>&lt;head&gt;</code>-Bereich verknüpft wird.
            <pre>
                <code>
                &lt;link rel="stylesheet" href="styles.css"&gt;
                </code>
            </pre>
        </li>
    </ol>
 
    <h2>Layout-Techniken</h2>
    <p>CSS bietet verschiedene Techniken zur Gestaltung von Layouts, darunter:</p>
    <ul>
        <li><strong>Box-Modell</strong>: Jedes HTML-Element wird als rechteckige Box betrachtet, die aus Inhalt, Padding, Border und Margin besteht.</li>
        <li><strong>Flexbox</strong>: Ein Layout-Modul, das eine flexible und effiziente Anordnung von Elementen in einem Container ermöglicht.</li>
        <li><strong>Grid</strong>: Ein leistungsfähiges Layout-System, das es ermöglicht, komplexe Layouts mit Zeilen und Spalten zu erstellen.</li>
    </ul>
 
    <h2>Fazit</h2>
    <p>HTML und CSS sind grundlegende Technologien für die Erstellung von Webseiten. HTML definiert die Struktur und den Inhalt, während CSS das Design und Layout steuert. Zusammen ermöglichen sie die Entwicklung ansprechender und funktionaler Webanwendungen.</p>

Aktuelle Version vom 17. September 2025, 12:58 Uhr

HTML

Hypertext Markup Language (HTML) ist die Standard-Auszeichnungssprache für Dokumente, die im World Wide Web angezeigt werden. HTML beschreibt die Struktur von Webseiten und ermöglicht es, Inhalte wie Texte, Bilder, Links und Multimedia-Elemente zu formatieren und anzuzeigen.

Struktur

HTML-Dokumente bestehen aus einer Reihe von Elementen, die durch Tags definiert werden. Ein typisches HTML-Dokument hat die folgende Struktur:

        <!DOCTYPE html>
        <html lang="de">
        <head>
            <meta charset="UTF-8">
            <title>Titel der Seite</title>
        </head>
        <body>
            <h1>Überschrift</h1>
            <p>Dies ist ein Absatz.</p>
        </body>
        </html>
  • <!DOCTYPE html>: Deklariert den Dokumenttyp und die verwendete HTML-Version.
  • <html>: Das Wurzel-Element eines HTML-Dokuments.
  • <head>: Enthält Metainformationen über das Dokument, wie den Titel und die Zeichencodierung.
  • <body>: Beinhaltet den sichtbaren Inhalt der Webseite, wie Texte, Bilder und Links.

Elemente und Tags

HTML verwendet Tags, um verschiedene Elemente zu definieren. Einige grundlegende Tags sind:

  • <h1> bis <h6>: Überschriften in absteigender Reihenfolge.
  • <p>: Absatz.
  • <a>: Hyperlink.
  • <img>: Bild.
  • <div>: Blockelement zur Gruppierung von Inhalten.

Semantische HTML5-Elemente

HTML5 führt semantische Elemente ein, die die Struktur und Bedeutung von Inhalten verbessern. Beispiele sind:

  • <header>: Kopfbereich einer Seite oder eines Abschnitts.
  • <footer>: Fußbereich einer Seite oder eines Abschnitts.
  • <article>: Unabhängiger Inhalt, der eigenständig ist.
  • <section>: Thematische Gruppierung von Inhalten.

CSS

Cascading Style Sheets (CSS) ist eine Stylesheet-Sprache, die verwendet wird, um das Aussehen und das Layout von HTML-Dokumenten zu gestalten. CSS ermöglicht es Entwicklern, das Design von Webseiten zu trennen und zu steuern, ohne den HTML-Code zu ändern.

Syntax

CSS besteht aus Regeln, die aus Selektoren und Deklarationen bestehen. Eine typische CSS-Regel hat die folgende Struktur:

        <code>
        selector {
            property: value;
        }
        </code>

- Selector: Wählt das HTML-Element aus, das gestylt werden soll.
- Property: Die CSS-Eigenschaft, die geändert werden soll (z. B. color, font-size, margin).
- Value: Der Wert, der der Eigenschaft zugewiesen wird.

Beispiel:

        <code>
        h1 {
            color: blue;
            font-size: 24px;
        }
        </code>

Einbindung von CSS

CSS kann auf verschiedene Arten in HTML-Dokumente eingebunden werden:

  1. Inline-CSS: Direkt im HTML-Element mit dem style-Attribut. 
                    <code>
                <h1 style="color: blue;">Überschrift</h1>
                </code>
  2. Internes CSS: Innerhalb eines <style>-Tags im <head>-Bereich. 
                    <code>
                <style>
                    h1 {
                        color: blue;
                    }
                </style>
                </code>
  3. Externes CSS: In einer separaten CSS-Datei, die mit dem <link>-Tag im <head>-Bereich verknüpft wird. 
                    <code>
                <link rel="stylesheet" href="styles.css">
                </code>

Layout-Techniken

CSS bietet verschiedene Techniken zur Gestaltung von Layouts, darunter:

  • Box-Modell: Jedes HTML-Element wird als rechteckige Box betrachtet, die aus Inhalt, Padding, Border und Margin besteht.
  • Flexbox: Ein Layout-Modul, das eine flexible und effiziente Anordnung von Elementen in einem Container ermöglicht.
  • Grid: Ein leistungsfähiges Layout-System, das es ermöglicht, komplexe Layouts mit Zeilen und Spalten zu erstellen.

Fazit

HTML und CSS sind grundlegende Technologien für die Erstellung von Webseiten. HTML definiert die Struktur und den Inhalt, während CSS das Design und Layout steuert. Zusammen ermöglichen sie die Entwicklung ansprechender und funktionaler Webanwendungen.

Abgerufen von „http://mw/index.php?title=Informatik:HTML&oldid=269“