Themen
+HTML:
HTML ist eine textbasierte Beschreibungesprache, die dazu verwendet wird, um die Strutur einer Website zu definieren. Wie auf der Startseite genannt wird, besteht jede Website aus Boxen. ALLES, was auf einer Website zu sehen ist, ist eine Box bzw. befindet sich in einer Box. Diese Boxen werden in HTML erstellt. Dazu werden Elemente benutzt. Elemente bilden die Boxen, in denen man den Inhalt hineinschreiben kann und sind damit die Grundbausteine. Um eine Website nun aufzubauen, werden die unterschiedlichsten Arten von Elementen verwendet, die im folgenden erläutert werden.
Elemente:
Jedes Element besteht in HTML aus mindestens einem Tag.
=>es gibt zwei Arten von Elementen-Tags:
1. leere Elemente
2. geschlossene Elemente
Die beiden Varianten unterscheiden sich im Aufbau voneinander. Die geschlossenen Elemente werden häufiger verwendet, an mehr Stellen im Quellcode der Website. Diese Elemente bilden die Boxen, in denen
der Inhalt befindlich ist: (Start-Tag + Inhalt + End-Tag).
Jedes Element besteht in HTML aus mindestens einem Tag.
=>es gibt zwei Arten von Elementen-Tags:
1. leere Elemente
2. geschlossene Elemente
Die leeren Elemente bestehen nur aus einem Tag, dem Start-Tag. Sie werden vor allem im Head-Bereich genutzt, kommen aber auch im Hauptteil der Website vor, um beispielsweise Elemente wie einen Zeilnumbruch einzufügen.
Block- und Inline-Elemente:
Man unterscheidet bei diesen Elementen zwischen Block- und Inline-Elementen.1. nehmen die ganze Zeile (Breite) ein
2.beginnen in neuer Zeile
3.mit CSS umfangreich gestaltbar
1. werden nur so breit wie der Inhalt 2.beginnen neben nächstem Inline-Element oder neuer Zeile(nach Block-Element) 3.nur eingeschränkt mit CSS gestaltbar
Wie gelangt eine Website in einen Browser?
Nachdem die Website erstellt wurde (und sie erreichbar ist), kann sie in einem Brower aufgerufen und dargestellt werdden. Bei einer Website handelt es sich im grunde nur um eine oder mehrere Dateien. Diese Dateien werden geladen, entweder aus dem lokalen Speicher des Gerätes, oder von einem der vielen Webserver aus dem Internet. Um die Datei(en) der Website aus dem Internet zu beziehen, wird ein globales und ausgeklügeltes System verwendet, das Domain Name System, kurz DNS. Das alles läuft folgerdermaßen ab:
=> 1. Datei hat eine URL (bspw. www.youtube.com), die vom Browser an einen DNS-Server gesendet wird
=> 2. durch DNS wird die URL in eine IP-Adresse umgewandelt
=> 3. Browser verbindet sich mit dem Computer, der über die vom DNS gelieferte IP-Adresse verfügt.
=> 4. Browser erhält die Datei(en) und baut DOM auf
=> 5. Website kann erstellt und angezeigt werden
=> 2. durch DNS wird die URL in eine IP-Adresse umgewandelt
=> 3. Browser verbindet sich mit dem Computer, der über die vom DNS gelieferte IP-Adresse verfügt.
=> 4. Browser erhält die Datei(en) und baut DOM auf
=> 5. Website kann erstellt und angezeigt werden
DOM:
Das DOM, dass vom Browser aufgebaut wird, ist eine Art Baum, der den Aufbau der Website mit all den enthaltenen Elementen wiedergibt. DOM steht hierbei für Document Object Modell, und es ist eine signifikante Strucktur, in die der Quellcode übersetzt wird, um darauf Aufbauend die Website aufbauen zu können.1. HTML und dergleichen, also Quellcode der Website, werden vom Browser interpretiert (geparst)
2. Browser baut das DOM auf. 3. Website wird aus Boxen (durch die Eemente gebildet) gebaut
Aber jeder Browser stellt eine Website unterschiedlich dar, unter anderem, weil nicht jeder Browser dieselben HTML- (oder CSS-)Elemente unterstützt.
CSS:
Neben HTML wird auch die Sprache CSS verwendet, um eine Website zu erstellen. Während HTML jedoch dazu dient,um die Strucktur einer Website festzulegen, dient CSS dazu, um alles zu designen. Jede der mit HTML erstellten Boxen kann mit CSS-Regeln speziell designet werden. Man kann Dinge wie die Hintergrundfarbe, die Schriftfarbe und auch die Schriftgröße verändern oder einen Rand mit bestimmter Dicke definieren, der eine bestimmte Farbe hat. Oder man fügt ein Hintergrundbild hinzu. Das alles und mehr design-technische Einstellungen können mit CSS vorgenommen werden.Die Regeln können in drei verschiedenen Arten auf ein oder mehrere html-Element angewendet werden:
Selector (Element)
{
Regel: Wert;
Regel2: Wert; //letztes Semikolon kann weggelassen werden
…
}
<head>
Selector (Element)
{
Regel: Wert;
Regel2: Wert; //letztes Semikolon kann weggelassen werden
…
} </head>
<p style="Regel1: Wert; Regel2: Wert; ...; RegelN: Wert;">
Inhalt...Inhalt...Inhalt </p>
Jede definierte CSS-Regel wird auf eine Box angewendet, bzw auf ein Element. Dazu gibt es verschiedene Möglichkeiten, um die gewünschten Elemente auszuwählen, die man entsprechend verändern möchte:
Arten von Selektoren:
1. Universalselektor (*)
2. Elementselektor (Tag-Name: bsp. p für alle p)
3. Klassenselektor (Klasse)
4. ID-Selektor (IDs)
1. Universalselektor (*)
2. Elementselektor (Tag-Name: bsp. p für alle p)
3. Klassenselektor (Klasse)
4. ID-Selektor (IDs)
-3. und 4. sind Selektortypen, die häufig verwendet werden
Im CSS ist die Reihenfolge relevant, in der die Regeln definiert werden. Bei der Anwendung der CSS-Regeln für unterschiedliche Klassen, die auf das selbe Element angewendet werden sollen, wie in >div class=“rot fett“<...>/div<, ist die Reihenfolge von rot und fett nicht bedeutend. Es kann also auch div class=“fett rot“ geschrieben werden. In CSS wird überprüft, welche Regeln zuerst definiert wurden. Die Regeln der Klassen etc, welche danach deklariert wurden, überschreiben die Regeln der vorherigen Klasse.
Grid-Layout:
Beim Grid-Layout wird der verfügbare Platz auf einer Website aufgeteil, um nebeneinander oder untereinander stehende Bereiche zu haben. Die Website wird also eingeteil. adurch ist es bspw. möglich, zwei Boxen nebeneinander stehen zu lassen. In der einen kann dann Text und in der anderen ein Bild enthaten sein. Eine Möglichkeit, Grids festzulegen, ist, im HTML mehrere Container ineinander zu verschachteln und dann bestimmte CSS-Regeln auf diese Verschachtelung anzuwenden:
HTML
<section class="zweifach_Grid"> <div class="inside"> <article class="liquid_box"> >strong<BLOCK:</strong>
1. nehmen die ganze Zeile (Breite) ein
2.beginnen in neuer Zeile
3.mit CSS umfangreich gestaltbar
</article>
<article class="liquid_box">
<strong>INLINE:</strong>
1. werden nur so breit wie der Inhalt
2.beginnen neben nächstem Inline-Element oder neuer Zeile(nach Block-Element)
3.nur eingeschränkt mit CSS gestaltbar
</article>
</div>
</section>
CSS
.boxen > .inside {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
padding: 1rem;
}
Eine weitere Möglichkeit, Grids zu definieren, außer bspw. „.boxen > .inside {…}“ zu verwenden, ist, vorher Grid-area‘s zu festzulegen: grid-area: header, grid-area: footer, grid-area: main, für unterschiedliche Container.
Beim Grid-Layout wird der verfügbare Platz auf einer Website aufgeteil, um nebeneinander oder untereinander stehende Bereiche zu haben. Die Website wird also eingeteil. adurch ist es bspw. möglich, zwei Boxen nebeneinander stehen zu lassen. In der einen kann dann Text und in der anderen ein Bild enthaten sein. Eine Möglichkeit, Grids festzulegen, ist, im HTML mehrere Container ineinander zu verschachteln und dann bestimmte CSS-Regeln auf diese Verschachtelung anzuwenden:
<section class="zweifach_Grid"> <div class="inside"> <article class="liquid_box"> >strong<BLOCK:</strong>
1. nehmen die ganze Zeile (Breite) ein
2.beginnen in neuer Zeile
3.mit CSS umfangreich gestaltbar
</article>
<article class="liquid_box">
<strong>INLINE:</strong>
1. werden nur so breit wie der Inhalt
2.beginnen neben nächstem Inline-Element oder neuer Zeile(nach Block-Element)
3.nur eingeschränkt mit CSS gestaltbar
</article>
</div>
</section>
.boxen > .inside {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
padding: 1rem;
}
.Container/Grid {
Display: Grid;
Grid-Template-areas: “header header“ “main content“ “footer footer“;
Grid-Template-column: 1fr 3fr; //inks 1fr, rechts 3 fr
}
Display: Grid;
Grid-Template-areas: “header header“ “main content“ “footer footer“;
Grid-Template-column: 1fr 3fr; //inks 1fr, rechts 3 fr
}
Media-Query:
Mit Media-Querys kann man Seiten an bestimmte Bedingungen wie die Bildschrimbreite, die Ausrichtung und dergleichen anpassen. Dabei handelt es sich auch bei diesen Medi-Querys um CSS-Regeln. Diese sollten jedoch nur in eigenen CSS-Style-Sheets definiert werden. Diese Querys sind vor allem deshalb nützlich, weil man damit das Aussehen der Website an die Bildschirmbreite anpassen kann. So kann eine Seite, die auf einem Gerät wie einem iPad komfortabel und groß erscheint, auch auf einem kleinen Gerät wie einem Handy kopakt und inangepasster größer betrachtet werden.
Media-Querys werden für ein solches responsives Design können bspw. so aussehen:
@media screen and (min-width: 768px){
...
CSS-Regeln für Tablet
...
}
@media screen and (max-width: 767px){
...
CSS-Regeln für Handy's
...
}
Box-Modell:
Beim Box-Modell wird unterschieden zwischen
-border-box und
-content-box
!! Beide definieren die Boxgröße, wobei die Content-Box die Größe anhand des Inhalts (Contents) berechnet, bei Border-Box wird die gesamte Box mitsamt der Border verwendet, um die Größe zu bestimmen. Margin ist hierbei unbedeutend, da damit nur der Außenabstand definiert wird.
Mit Media-Querys kann man Seiten an bestimmte Bedingungen wie die Bildschrimbreite, die Ausrichtung und dergleichen anpassen. Dabei handelt es sich auch bei diesen Medi-Querys um CSS-Regeln. Diese sollten jedoch nur in eigenen CSS-Style-Sheets definiert werden. Diese Querys sind vor allem deshalb nützlich, weil man damit das Aussehen der Website an die Bildschirmbreite anpassen kann. So kann eine Seite, die auf einem Gerät wie einem iPad komfortabel und groß erscheint, auch auf einem kleinen Gerät wie einem Handy kopakt und inangepasster größer betrachtet werden.
Media-Querys werden für ein solches responsives Design können bspw. so aussehen:
...
CSS-Regeln für Tablet
...
}
...
CSS-Regeln für Handy's
...
}
Beim Box-Modell wird unterschieden zwischen
-border-box und
-content-box
!! Beide definieren die Boxgröße, wobei die Content-Box die Größe anhand des Inhalts (Contents) berechnet, bei Border-Box wird die gesamte Box mitsamt der Border verwendet, um die Größe zu bestimmen. Margin ist hierbei unbedeutend, da damit nur der Außenabstand definiert wird.
Kurzantworten auf mögliche Klausurthemen