Mehr Referenzen zu HTML& CSS:
HTML/CSS
HTML Grundgerüst:
«!»
#Metadata
Für verschiedene Metadaten die in Embeds von Links eingebunden werden können Sie folgende Meta-Tags verwenden:
<!--Embed/Tab-Color-->
<meta name="theme-color" content="#3D45B0">
<!--Titel-->
<meta property="og:title" content="Blog">
<!--site_name-->
<meta property="og:site_name" content="Blog">
<!--Beschreibung-->
<meta property="og:description" content="Lorem ipsum dolor sit amet, consetetur sadipscing elitr.">
<!--URL-->
<meta property="og:url" content="https://wigger.one/blog">
<!--Type-->
<meta property="og:type" content="website">
<!--Sprache/Region-->
<meta property="og:locale" content="en_US">
<!--Embed-IMG-->
<meta property="og:image" content="https://wigger.one/img/background-blog.webp">
Link
Für das Favicon können Sie jeweils folgendes benutzen:
<!--Favicon-->
<link rel="icon" href="img/icon.ico">
<!--CSS-->
<link rel="stylesheet" href="css/main.css">
Um JS einzubinden können Sie den “script” Tag benutzen:
<script src="js/script.js"></script>
Head
CSS:
Tipp: Bei mehrseitigen Webseiten ist es empfohlen die CSS-Atribute in einem CSS-File abzulegen. Als Referenz können Sie weiter oben nachschauen.
<style type="text/css">
</style>
font-family
Die font-family CSS Eigenschaft erlaubt es, eine priorisierte Liste von Schriftfamiliennamen und/oder generische Familiennamen für ein ausgewähltes Element anzugeben.
font-style
Die CSS-Eigenschaft font-style legt fest, ob Text mit einem kursiven Schnitt der gewählten Schriftfamilie dargestellt werden soll.
font-size
Die font-size-CSS-Eigenschaft spezifiziert die Schriftgöße. Eine Änderung der Schriftgröße kann die Größe anderer Partien beeinflussen, da sie dazu benutzt wird, den Wert der em- und ex-length-Einheiten zu berechnen.
font-weight
Die CSS-Eigenschaft font-weight definiert die Stärke der Schrift.
Color
Die CSS Eigenschaft color setzt die Vordergrund farbe des Textinhalts eines Elements und seiner Dekorationen
background-color
background-image
Die background-image-Eigenschaft legt ein oder mehrere Hintergrundbilder für ein Element fest.
text-decoration
Die text-decoration CSS Eigenschaft wird dazu verwendet, die Textformatierung auf underline, overline, line-through oder blink zu setzen.
text-align
Die CSS Eigenschaft text-align legt die horizontale Ausrichtung eines Blockelements oder eines Tabellenzellenrahmens fest.
text-transform
Das text-transform CSS Attribut legt die Groß- und Kleinschreibung eines Elementes fest. Es kann verwendet werden, um den Text eines Elementes komplett klein oder klein zu schreiben oder den ersten Buchstaben jedes Wortes groß zu schreiben.
breite = width
Die width CSS Eigenschaft legt die Breite des Inhaltsbereichs eines Elements fest.
Aussenabstand = margin
Die margin Eigenschaft ist eine Kurzform für die Außenabstände aller vier Seiten eines Elements.
Innenabstand = padding
Die padding Eigenschaft ist eine Kurzform für die Innenabstände aller vier Seiten eines Elementes.
float
Mit float können Sie die Ausrichtung eines Containers definieren.
border
Die border Eigenschaft legt den kompletten Rahmen eines Elementes fest
border-collapse
Die CSS Eigenschaft border-collapse bestimmt, ob die Zellen innerhalb einer Tabelle mit einem gemeinsamen oder getrennten Rahmen dargestellt werden.
border-spacing
Die CSS Eigenschaft border-spacing legt die Abstände zwischen Tabellenzellen fest.
Die Eigenschaft hat nur dann Auswirkungen, wenn border-collapse: separate definiert ist.
letter-spacing
Die letter-spacing CSS Eigenschaft gibt das Abstandsverhalten zwischen Textzeichen an.
:first-letter
Mit dieser Funktion kann das erste Wort eines Absatzes editiert werden.
p::first-letter {
font-size: 130%;
}
a:link
Alle Elemente A, die ein Hyperlink zu einem noch nicht besuchten Ziel sind
a:link {
color: #FFD393;
text-decoration: none;
}
a:visited
Alle Elemente A, die ein Hyperlink zu einem bereits besuchten Ziel sind
a:visited {
color: #405952;
}
:active
Während das Element A aktiv ist (z.B. Maustaste auf einen Link gedrückt ist).
a:hover {
background-color: #FF99FF;
}
a:hover
Während die Maus über dem Element A hovert
a:hover {
background-color: #FFD393;
}
grid
CSS-Grid-Layout eignet sich hervorragend zur Unterteilung einer Seite in größere Bereiche oder zur Definition der Beziehungen zwischen Teilen eines Steuerelements, das aus HTML-Primitiven besteht, in Bezug auf Größe, Position und Ebene.
Wie bei Tabellen kann ein Autor mit dem Rasterlayout Elemente in Spalten und Zeilen ausrichten. Allerdings sind mit CSS-Grid viel mehr Layouts möglich oder einfacher als mit Tabellen. Beispielsweise können die untergeordneten Elemente eines Grid-Containers so positioniert werden, dass sie sich tatsächlich überlappen und übereinander liegen, ähnlich wie bei positionierten CSS-Elementen.
Die display Eigenschaft legt den Typ einer Rendering-Box eines Elements fest. FürHTML sind die standardmäßigen display Werte in der HTML-Spezifikation beschrieben und in den User- bzw. Browser-Stylesheets angegeben. Für XML-Dokumente ist der voreingestellte Wert inline.
display: grid
grid-template-columns/rows
Die CSS-Eigenschaft grid-template-columns definiert die Zeilennamen und Spurgrössenfunktionen der Rasterspalten.
Abstand-Definieren
column-gap: 70px;
row-gap: 30px;
hyphens
Die hyphens Eigenschaft regelt die automatische Silbentrennung.
hyphens: auto;
clear
Mit clear kann man ein Textunterbruch erzwingen. Das Element ist hinter wird nach einem Element platziert.
media
Die CSS-At-Regel @media kann verwendet werden, um einen Teil eines Stylesheets auf der Grundlage des Ergebnisses einer oder mehrerer Medienabfragen anzuwenden. Mit ihr geben Sie eine Medienabfrage und einen CSS-Block an, der nur dann auf das Dokument angewendet wird, wenn die Medienabfrage mit dem Gerät übereinstimmt, auf dem der Inhalt verwendet wird.
/* At the top level of your code */
@media screen and (min-width: 900px) {
article {
padding: 1rem 3rem;
}
}
/* Nested within another conditional at-rule */
@supports (display: flex) {
@media screen and (min-width: 900px) {
article {
display: flex;
}
}
}
Titel
<title>Text</title>
Body
p = Paragraph
Das HTML-Element “p” stellt einen Absatz dar. Absätze werden in visuellen Medien in der Regel als Textblöcke dargestellt, die von benachbarten Blöcken durch Leerzeilen und/oder Einrückungen in der ersten Zeile getrennt sind, aber HTML-Absätze können jede strukturelle Gruppierung von zusammenhängendem Inhalt sein, wie z. B. Bilder oder Formularfelder.
<p>Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Antarctica.</p>
<p>Some species live in houses where they hunt insects attracted by artificial light.</p>
h1 - h6 = Titel (grösse)
Die HTML-Elemente “h1” bis “h6” stellen sechs Ebenen von Abschnittsüberschriften dar.
<h1>Beetles</h1>
<h2>External morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
header
Das HTML-Element “header” steht für einleitende Inhalte, in der Regel eine Gruppe von Einführungs- oder Navigationshilfen. Es kann einige Überschriftenelemente, aber auch ein Logo, ein Suchformular, einen Autorennamen und andere Elemente enthalten.
<header>
<h1>HTML/CSS/JS</h1>
<time>08.06.2022</time>
</header>
main
Das HTML-Element “main” stellt den dominierenden Inhalt des “body” eines Dokuments dar. Der Hauptinhaltsbereich besteht aus Inhalten, die in direktem Zusammenhang mit dem zentralen Thema eines Dokuments oder der zentralen Funktionalität einer Anwendung stehen oder diese erweitern.
<main>
<p>Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Australia.</p>
<p>Many species of gecko have adhesive toe pads which enable them to climb walls and even windows.</p>
</main>
footer
Das HTML-Element “footer” stellt eine Fußzeile für seinen nächsten Vorgänger, das Abschnittsinhalt- oder Abschnittswurzelelement, dar. Ein “footer” enthält in der Regel Informationen über den Autor des Abschnitts, Copyright-Daten oder Links zu verwandten Dokumenten.
<footer>
<p>© 2022 - Wigger</p>
</footer>
Div
Das HTML-Element “div” ist der allgemeine Container für Fließinhalte. Es hat keine Auswirkung auf den Inhalt oder das Layout, bis es auf irgendeine Weise mit CSS gestylt wird (z. B. indem das Styling direkt darauf angewendet wird oder eine Art von Layout-Modell wie Flexbox auf sein übergeordnetes Element angewendet wird).
nav
Das HTML Elemente nav zeichent einen Seitenbereich aus, der dazu bestimmt ist Navigationslinks bereitzustellen, die entweder zum aktuellen Dokument oder zu anderen Dokumenten zeigen. Häufige Beispiele für Navigationsbereiche sind Menüs, Inhaltsverzeichnisse oder andere Verzeichnisse.
a
Das HTML-Element “a” (auch HTML-Anker-Element) definiert einen Hyperlink, ein benanntes Ziel für einen Hyperlink oder beides.
<nav>
<a href="https://example.com/">Eggsample</a>
<a href="https://example.org/" target="_blank">Example</a>
</nav>
span
Das HTML-Element “span” ist ein generischer Inline-Container zur Formulierung von Inhalten, die an sich nichts darstellen. Es kann verwendet werden, um Elemente für Styling-Zwecke zu gruppieren (unter Verwendung der class- oder id-Attribute) oder weil sie gemeinsame Attributwerte wie lang haben.
Bilder
Container für z.B. Bilder.
Das Element “img” fügt eine Grafik in ein Dokument ein.
Das HTML-Element “figure” stellt in sich abgeschlossene Inhalte dar, möglicherweise mit einer optionalen Beschriftung, die mit dem Element “figcaption” angegeben wird. Die Abbildung, ihre Beschriftung und ihr Inhalt werden als eine Einheit bezeichnet.
<figure>
<img src="img/bild.webp" alt="Ein Bild :D">
<figcaption>Eine Bildbeschreibung :P</figcaption>
</figure>
Zeilenumbruch
<!-- Zeilenumbruch -->
<br>
Class/ID
id – Attribut als Linkziel class - Attribut als Linkziel
ul
Das HTML Element unordered list “ul” wird verwendet um eine ungeordnete Liste darzustellen.
table & forms
Das HTML-Element “table” stellt tabellarische Daten dar – d. h. Informationen, die in einer zweidimensionalen Tabelle dargestellt werden, die aus Zeilen und Spalten von Zellen besteht, die Daten enthalten.
Das HTML-Element form stellt einen Dokumentabschnitt dar, der interaktive Steuerelemente zum Senden von Informationen enthält.
<form action="#" method="get">
<table>
<thead>
<tr>
<th colspan="2">The table header</th>
</tr>
</thead>
<tbody>
<tr>
<td>The table body</td>
<td>with two columns</td>
</tr>
</tbody>
</table>
</form>
Formular
Input
<select name="gender">
<option value="M">Mann</option>
<option value="F">Frau</option>
<option value="N">Nicht-Binär</option>
</select>
Inputfeld
input:text
PLZ / ORT
input:number
Mail/Tel
input:email
input:tel
Größeres Inputfeld
<textarea></textarea>
Zusätzliches CSS Argument, damit die grösse nicht mehr verändert werden kann.
textarea {
resize: none;
}
Auswahl Felder
input:radio
input:checkbox
Submit/Reset
input:submit
input:reset
Colspan / Rowspan
