suchen

Heim >Web-Frontend >CSS-Tutorial >Tag – TML/CSS – Projekt ILUGC (Webseite)

Tag – TML/CSS – Projekt ILUGC (Webseite)

Patricia Arquette
Patricia ArquetteOriginal
2025-01-04 07:11:34827Durchsuche

HTML:

  • HTML steht für Hyper Text Markup Language
  • HTML ist die Standard-Auszeichnungssprache zum Erstellen von Webseiten
  • HTML beschreibt die Struktur einer Webseite
  • HTML besteht aus einer Reihe von Elementen
  • HTML-Elemente teilen dem Browser mit, wie der Inhalt angezeigt werden soll
  • HTML-Elemente kennzeichnen Inhalte wie „Dies ist eine Überschrift“, „Dies ist ein Absatz“, „Dies ist ein Link“ usw.

Siehe – https://www.w3schools.com/Html/html_intro.asp

CSS:

  • Cascading Style Sheets (CSS) ist eine Stylesheet-Sprache, die zur Beschreibung der Darstellung eines in HTML geschriebenen Dokuments verwendet wird.
  • CSS beschreibt, wie Elemente auf dem Bildschirm, auf Papier, in Sprache oder auf anderen Medien gerendert werden sollen.

Siehe – https://developer.mozilla.org/en-US/docs/Web/CSS

Day - TML/CSS - Project ILUGC(web page)

Unterschied zwischen HTML/CSS und Javascript.

-->HTML/CSS – Statische Seiten – Der Inhalt bleibt bei jedem Laden gleich, sofern er nicht manuell aktualisiert wird.
-->Javascript – Dynamische Seiten – Seiten können auf Benutzeraktionen reagieren, z. B. auf das Klicken auf eine Schaltfläche, das Absenden eines Formulars oder das Bewegen der Maus.

HTML-Syntax:

<html>
<head>
<title>Page Title</title>
</head>
<body>
   <h1>My First Heading</h1>
   <p>My first paragraph.</p>
</body>
</html>

-->Speichern Sie die Datei mit der Erweiterung (.html) und doppelklicken Sie, um das Programm auszuführen.

Day - TML/CSS - Project ILUGC(web page)

HTML-Element:
In HTML werden Elemente normalerweise mit einem öffnenden Tag und einem schließenden Tag umschlossen, um ihren Anfang und ihr Ende zu definieren.
--> Eröffnungstag: Markiert den Anfang eines HTML-Elements.
--> Schließendes Tag: Markiert das Ende eines HTML-Elements mit einem Schrägstrich vor dem Elementnamen.
Beispiel:

Hallo Welt!

Eigenständiges Tag: Ein eigenständiges Tag (auch als selbstschließendes Tag bekannt) in HTML ist ein Element, das kein schließendes Tag erfordert, da es keinen Inhalt zwischen einem öffnenden und einem schließenden Tag hat Tag.
Ex-
- break:wird zum Einfügen eines Zeilenumbruchs verwendet

Projekt:

Vorbereitung des ILUGC-Webseitenlayouts:(https://ilugc.in/)

<html>
<Kopf>
    <title>ILUGC</title>
<Stil>
.Container{
    Grenze:1px fest;
    Höhe:200 %;
    Breite:85%;
    margin:auto;
}
.header h4{
    Texttransformation: Großbuchstaben;
    Farbe:#e22d30;
    border-top:1px durchgehend grün;
    Breite: fit-content;
    padding-top:10px;
}
.header{

    Rand:25px;
}
</style>
</head>
<Körper>
   <div>



<p>Ausgabe:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173594590044719.jpg" alt="Day - TML/CSS - Project ILUGC(web page)"></p><p><strong>Erklärung:</strong></p>

<ol>
<li>
<html>: Das Stammelement des HTML-Dokuments.</li>
<li>
<head>: Enthält Metadaten und Ressourcen für das Dokument.</li>
<li>
<title>: Legt den Titel der Webseite fest, die auf der Browser-Registerkarte angezeigt wird.</li>
<li>
<style>: Bettet CSS zum Gestalten des HTML-Dokuments ein.</li>
</ol>

  • .container: Gestaltet den Container div:
    a) border: 1px solid;: Fügt einen 1-Pixel-soliden Rand hinzu.
    b) Höhe: 200 %;: Setzt die Höhe auf das Doppelte der Höhe des Ansichtsfensters.
    c) Breite: 85 %;: Setzt die Breite auf 85 % der Breite des Ansichtsfensters.
    d) margin: auto;: Zentriert den Container horizontal.

  • .header h4: Formatiert das

    Element innerhalb der .header-Klasse:
    a) text-transform:uppercase;: Wandelt Text in Großbuchstaben um.
    b) Farbe: #e22d30;: Setzt die Textfarbe auf einen bestimmten Rotton.
    c) border-top: 1px solid green;: Fügt einen grünen oberen Rand hinzu.
    d) width: fit-content;: Verkleinert die Elementbreite, um sie an den Inhalt anzupassen.
    e) padding-top: 10px;: Fügt 10 Pixel Abstand über dem Text hinzu.

  • .header: Formatiert den Header div:
    a) margin: 25px;: Fügt einen Rand von 25 Pixeln um die Kopfzeile hinzu.

  1. : Enthält den gesamten sichtbaren Inhalt der Webseite.
  2. : Ein Containerelement zum Gruppieren und Gestalten von Inhalten.

  3. : Stellt die Hauptüberschrift der Webseite dar.

  4. : Stellt eine Unterüberschrift von geringerer Bedeutung als

    dar.

Attribut:
Ein Attribut stellt zusätzliche Informationen zu einem HTML-Element bereit, normalerweise in Form von Name-Wert-Paaren.
Beispiel: „

Polsterung:
Padding ist der Abstand zwischen dem Inhalt eines Elements und seinem Rand. Es erstellt einen inneren Rand um den Inhalt und drückt den Inhalt von den Rändern des Elements weg.

Marge:
Der Rand ist der Raum außerhalb des Randes eines Elements, der es von anderen Elementen trennt. Es definiert den Außenraum zwischen Elementen und schafft Abstand um sie herum.

Klassenselektor und ein Elementselektor:

  • Der Klassenselektor zielt auf HTML-Elemente ab, die ein bestimmtes Klassenattribut haben, indem er einen Punkt (.) gefolgt vom Klassennamen verwendet.
  • Der Elementselektor zielt direkt auf HTML-Elemente anhand ihres Tag-Namens ab

Das obige ist der detaillierte Inhalt vonTag – TML/CSS – Projekt ILUGC (Webseite). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html Static define for require auto break double using class internal Attribute this display margin padding border viewport transform https Other
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HILFE ERFORDERLICH!!!Nächster Artikel：HILFE ERFORDERLICH!!!

In Verbindung stehende Artikel

Mehr sehen