WebTech - Standort1

Zwischen dem [Header] und dem [Body]wird eine [Leerzeile] eingeschoben. Aufgrund dieser [Leerzeile] kann innerhalb der [Nachricht]erkannt werden, wann der Header [fertig] ist und der Body [beginnt].

1.  TCP Port > 1024 wird auf Client geöffnet, Verbindung zu Server auf Port 80 wird etabliert
2. HTTP-Request erfolgt in der Version 1.1
3. GET / HTTP/1.1
4. HOST: www.zbw.ch
5. CONNECTION: Keep-alive
6. Webserver sucht die Standardwebseite, welche mittels DirectoryIndex definiert wurde
7. Webserver erstellt HTTP-Nachricht, verpackt Inhalt von Standardwebseite in Body der Nachricht, berechnet die Content-Grösse, erstellt HTTP-Header mit Status 200 OK
8. Webserver sendet HTTP-Nachricht an den von TCP übermittelten Port des anfragen-den Clients
9. Client nimmt Response von Server auf entsprechenden Port entgegen
10. Webserver übernimmt HTTP-Nachricht, interpretiert Header und rendert den Inhalt des Bodys der HTTP-Nachricht
11. Browser zeigt den gerenderten Inhalt im Browserfenster an.
12. TCP Connection bleibt bestehen, bis TimeOut eintritt. Dann wird die Verbindung seitens des Servers beendet.

• beginnt immer in einer neuen Zeile.
• nimmt immer die gesamte verfügbare Breite ein (erstreckt sich so weit wie möglich nach links und rechts).
• hat einen oberen und einen unteren Rand, ein Inline-Element hingegen nicht.

Beispiele:

• <article>
• <aside>
• <div>
• <footer>
• <h1>
• <header>
• <p>
• <section>
• <ul>
• <table>
• <li>
• <hr>
• <tfoot>
• <ol>

Beispiele:

• <a>
• <b>
• <br>
• <button>
• <em>
• <img>
• <input>
• <span>
• <strong>
• <sub>

Die displayEigenschaft gibt an, ob / wie ein Element angezeigt wird.

block: 

• Es beginnt in einer neuen Zeile und nimmt die gesamte Breite ein

inline:

• Die Eigenschaften Höhe und Breite haben keine Auswirkung

flex: 

• Zeigt ein Element als Flex-Container auf Blockebene an

none

• Das Element wird vollständig entfernt.

• justify-content
• align-items
• flex-direction
• order
• align-self
• flex-wrap
• flex-flow
• align-content

Flexbox arbeitet mit einem Container-Element – dem. sog. Flex-Container – und den darin enthaltenen Kind-Elementen der 1. Ebene – den sog. Flex-Items. Die Flexbox wirkt genau eine Ebene tief. Weitere Verschachtelungen werden ignoriert.

Folgende Eigenschaften können bestimmt werden:

• justify-content
• align-items
• flex-direction
• order
• align-self
• flex-wrap
• flex-flow
• align-content

Hinweis 1: Wenn lediglich die display:flex eingeschaltet wurde, gelten folgende Standardwerte:

• flex-direction: row – von links nach rechts
• justify-content: flex-start: Die Items stehen am Anfang der Hauptachse, normalerweise links 
• align-items: stretch: Alle Items sind daher standardmäßig so hoch wie der Flex-Container.

Hinweis 2: Wenn ihr mit Hilfe des Flex-Containers Elemente zentrieren möchtet, richtet die Items mittig auf beiden Achsen aus.

Eigenschaften:

• justify-content steuert die Items auf der Haupt-Achse

Ausprägung:

• flex-start (default)
• flex-end
• center
• space-between: 1. Flex-Item am Anfang der Achse, das letzte am Ende. Alle anderen gleichmässig dazwischen.
• space-around: wie bei space-betweeen, nur hat es am Anfang/Ende auch einen Abastand.

• align-items steuert die Items auf der Kreuz-Achse
• Tipp: Verwenden Sie die Eigenschaft align-self jedes Elements, um die align-itemsEigenschaft zu überschreiben.

Eigenschaftswerte:

• flex-start
• flex-end
• center
• stretch
• baseline: Grundlinie der Schrift ist bündig. Nur sichtbar bei unterschiedlichen Schriftgrössen.

• flex-direction dreht die Haupt-Achse
  • flex-direction: row (von links nach rechts = Standardwert)
  • flex-direction: column (von oben nach unten)
  • flex-direction: row-reverse (von rechts nach links)
  • flex-direction: column-reverse (von unten nach oben)

Hinweis:
Wichtig ist, dass mit flex-direction die beiden Achsen nicht gemeinsam gedreht werden, sondern nur die Hauptachse. Wie die Kreuzachse im Verhältnis zur Hauptachse positioniert ist, zeigt die folgende Grafik.

• Die orderEigenschaft gibt die Reihenfolge eines flexiblen Elements relativ zu den übrigen flexiblen Elementen im selben Container an.
• Wenn das Element kein flexibles Element ist, hat die order Eigenschaft keine Auswirkung.
• Standardwert: 0

• richtet sich ebenso an der Querachse/Kreuzachse aus
• Die align-self Eigenschaft gibt die Ausrichtung für das ausgewählte Element im flexiblen Container an.
• Hinweis: Die align-self Eigenschaft überschreibt die Eigenschaft align-items des flexiblen Containers.

Werte:

• auto
• initial
• inherit
• flex-start
• flex-end
• center
• stretch
• baseline:

• Die flex-wrap Eigenschaft gibt an, ob die Items in eine Zeile gezwängt, oder umgebrochen werden sollen.
• Hinweis: Wenn die Elemente keine flexiblen Elemente sind, hat die flex-wrap Eigenschaft keine Auswirkung.

Eigenschaftswerte:

• nowrap: Standardwert. Legt fest, dass die flexiblen Elemente nicht umbrochen werden.
• wrap: Legt fest, dass die flexiblen Elemente bei Bedarf umbrochen werden.
• wrap-reverse: Legt fest, dass die flexiblen Elemente ggf. in umgekehrter Reihenfolge umbrochen werden.

• Kurzschreibweise: Kombination aus flex-direction und flex-wrap

• Die align-content Eigenschaft ändert das Verhalten der Flex-Wrap-Eigenschaft.
• Es ähnelt dem Ausrichten von Elementen, richtet jedoch anstelle des Ausrichtens von Flex-Elementen Flex-Linien aus.
• Hinweis: Damit diese Eigenschaft wirksam wird, müssen mehrere Elementzeilen vorhanden sein!
• Tipp: Verwenden Sie die Eigenschaft " Justify-Content", um die Elemente auf der Hauptachse (horizontal) auszurichten.

Eigenschaftswerte:

• flex-start
• flex-end
• center
• stretch
• space-between
• space-around
• space-evenly

Webserver übertragen Dokumente beziehungsweise Webinhalte an Clients, wie zum Beispiel an einen Webbrowser oder an eine Website. Der Begriff bezieht sich zum einen auf den mit einem entsprechenden Webserver-Programm ausgestatteten Computer und zum anderen auf die Software selbst.