WebTech - Standort1
Grundlagen
Grundlagen
Kartei Details
| Karten | 18 |
|---|---|
| Sprache | Deutsch |
| Kategorie | Informatik |
| Stufe | Andere |
| Erstellt / Aktualisiert | 21.02.2021 / 21.02.2021 |
| Weblink |
https://card2brain.ch/box/20210221_webtech_standort1
|
| Einbinden |
<iframe src="https://card2brain.ch/box/20210221_webtech_standort1/embed" width="780" height="150" scrolling="no" frameborder="0"></iframe>
|
Was ist ein virtueller Webserver in Apache?
Ein virtueller Webserver in Apache ist…eine eigenständige Webserver-Konfiguration, welche auf eine bestimmte URL reagiert. Virtuelle Webserver können unter einer gemeinsamen IP-Adresse betrieben werden und können aufgrund der URL voneinander unterschieden werden. Dies ist ab HTTP Version 1.1 möglich. Voraussetzung ist, dass in einem Request-Message der Hostname des gewünschten Webservers gesendet wird.
Wie können der Client bzw. der Webserver den Unterschied zwischen dem HTTP-Header und dem HTTP-Body erkennen?
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].
Erklären Sie in einzelnen Schritten, was passiert, wenn in einem Browser die URL www.zbw.ch eingegeben und im Browser angezeigt wird. Binden Sie auch die Protokolle TCP und HTTP in Ihre Überlegungen mit ein. Beachten Sie, dass www.zbw.ch ein virtueller Server auf dem Host 111.112.113.114 ist.
- TCP Port > 1024 wird auf Client geöffnet, Verbindung zu Server auf Port 80 wird etabliert
- HTTP-Request erfolgt in der Version 1.1
- GET / HTTP/1.1
- HOST: www.zbw.ch
- CONNECTION: Keep-alive
- Webserver sucht die Standardwebseite, welche mittels DirectoryIndex definiert wurde
- Webserver erstellt HTTP-Nachricht, verpackt Inhalt von Standardwebseite in Body der Nachricht, berechnet die Content-Grösse, erstellt HTTP-Header mit Status 200 OK
- Webserver sendet HTTP-Nachricht an den von TCP übermittelten Port des anfragen-den Clients
- Client nimmt Response von Server auf entsprechenden Port entgegen
- Webserver übernimmt HTTP-Nachricht, interpretiert Header und rendert den Inhalt des Bodys der HTTP-Nachricht
- Browser zeigt den gerenderten Inhalt im Browserfenster an.
- TCP Connection bleibt bestehen, bis TimeOut eintritt. Dann wird die Verbindung seitens des Servers beendet.
Erläutere die Eigenschaften von Blockelementen.
- 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>
Erläutere die Eigenschaft von Inline-Elementen.
Beispiele:
- <a>
- <b>
- <br>
- <button>
- <em>
- <img>
- <input>
- <span>
- <strong>
- <sub>
Wie ist folgende Tabelle aufgebaut?
Erläutere die Anzeigeeigenschaft: display
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.
Welche Eigenschaften können verwendet werden umd in einem flexiblen Container Items zu positionieren?
- justify-content
- align-items
- flex-direction
- order
- align-self
- flex-wrap
- flex-flow
- align-content
Erläutere die Flexbox.
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.
Erläutere die Flex-Box-Eigenschaft: justify-content.
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.
Erläutere die Flex-Box Eigenschaft: align-items.
- 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.
Erläutere die Flex-Box Eigenschaft: flex-direciton
- 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.
Erläutere die Flex-Box Eigenschaft: order
- 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
Erläutere die Flex-Box Eigenschaft: align-self
- 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:
Erläutere die Flex-Box Eigenschaft: flex-wrap
- 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.
Erläutere die Flex-Box Eigenschaft: flex-flow
- Kurzschreibweise: Kombination aus flex-direction und flex-wrap
Erläutere die Flex-Box Eigenschaft: align-content
- 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
Was ist ein Webserver?
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.
