329 Fragen zu Webentwicklung

Question 1

Kann man die Größe eines HTML-Popup-Fensters beim Öffnen automatisch an den Inhalt, etwa ein Bild, anpassen?

Answer

Mit reinem HTML ist es nicht möglich, beim Öffnen eines Popup-Fensters (z.B. mit `window.open`) die Höhe und Breite automatisch exakt an den Inhalt wie ein Bild anzupassen. HTML allein... [mehr]

Answer

Mit reinem HTML ist es nicht möglich, beim Öffnen eines Popup-Fensters (z.B. mit `window.open`) die Höhe und Breite automatisch exakt an den Inhalt wie ein Bild anzupassen. HTML allein bietet keine Möglichkeit, Fenstergrößen dynamisch zu bestimmen. Mit JavaScript kannst du jedoch nach dem Laden des Inhalts (z.B. eines Bildes) die Größe des Popup-Fensters anpassen. Das funktioniert so: 1. Öffne das Popup-Fenster mit einer Startgröße. 2. Lade das Bild im Popup. 3. Passe nach dem Laden des Bildes die Fenstergröße mit `window.resizeTo()` an die Bildgröße an. **Beispiel:** ```javascript // Im Hauptfenster: function openImagePopup(url) { const popup = window.open('', '', 'width=100,height=100'); popup.document.write(` <img id="popupImage" src="${url}" style="display:block;"> <script> const img = document.getElementById('popupImage'); img.onload = function() { window.resizeTo(img.width + 20, img.height + 40); }; <\/script> `); } ``` **Hinweise:** - Die Werte `+20` und `+40` sind Schätzwerte für Fensterrahmen und -leisten und können je nach Browser variieren. - Popups können von Browsern blockiert werden. - Für komplexere Inhalte (z.B. mehrere Bilder oder dynamische Inhalte) ist zusätzliche Logik nötig. **Fazit:** Mit HTML allein geht es nicht, aber mit JavaScript kannst du die Fenstergröße nach dem Laden des Inhalts dynamisch anpassen.

Question 2

Wie zentriere ich Text in einem div-Element?

Answer

Um Text in einem `<div>`-Element zu zentrieren, kannst du in CSS die Eigenschaft `text-align: center;` verwenden. Beispiel: ```html <div style="text-align: center;"> Dies ist... [mehr]

Answer

Um Text in einem `<div>`-Element zu zentrieren, kannst du in CSS die Eigenschaft `text-align: center;` verwenden. Beispiel: ```html <div style="text-align: center;"> Dies ist zentrierter Text. </div> ``` Alternativ in einer externen CSS-Datei: ``` .mein-div { text-align: center; } ``` ```html <div class="mein-div"> Dies ist zentrierter Text. </div> ``` Damit wird der Text horizontal innerhalb des `<div>`-Elements zentriert.

Question 3

Was bewirkt box-sizing: border-box in CSS?

Answer

Die CSS-Eigenschaft box-sizing: border-box bewirkt, dass die angegebene Breite (width) und Höhe (height) eines Elements die Innenabstände (padding) und die Rahmenbreite (border) mit einschli... [mehr]

Answer

Die CSS-Eigenschaft box-sizing: border-box bewirkt, dass die angegebene Breite (width) und Höhe (height) eines Elements die Innenabstände (padding) und die Rahmenbreite (border) mit einschließen. Das heißt: Die Gesamtbreite und -höhe des Elements bleibt genau so groß, wie du sie im CSS angibst. Standardmäßig (box-sizing: content-box) werden padding und border zur width/höhe addiert, sodass das Element insgesamt größer wird als die angegebene Größe. Mit box-sizing: border-box kannst du also einfacher Layouts bauen, weil die Maße des Elements immer gleich bleiben, egal wie viel padding oder border du hinzufügst. Mehr Infos: [MDN Web Docs zu box-sizing](https://developer.mozilla.org/de/docs/Web/CSS/box-sizing)

Question 4

Dürfen style-Blöcke in HTML außerhalb des head-Bereichs stehen?

Answer

Ja, du kannst `<style>`-Blöcke technisch gesehen auch außerhalb des `<head>`-Bereichs in HTML schreiben, zum Beispiel im `<body>`. Das ist laut HTML-Spezifikation erlaubt... [mehr]

Answer

Ja, du kannst `<style>`-Blöcke technisch gesehen auch außerhalb des `<head>`-Bereichs in HTML schreiben, zum Beispiel im `<body>`. Das ist laut HTML-Spezifikation erlaubt und wird von modernen Browsern unterstützt. Allerdings ist es aus Gründen der Übersichtlichkeit und Wartbarkeit empfohlen, CSS immer im `<head>`-Bereich zu platzieren. Beispiel (funktioniert, aber nicht empfohlen): ```html <body> <style> p { color: red; } </style> <p>Dieser Text ist rot.</p> </body> ``` Empfohlen ist jedoch: ```html <head> <style> p { color: red; } </style> </head> <body> <p>Dieser Text ist rot.</p> </body> ``` Zusammengefasst: Es ist möglich, aber nicht best practice.

Question 5

Wie lege ich den linken Abstand eines Popupfensters in HTML fest?

Answer

Um den linken Abstand (also den Abstand vom linken Fensterrand) eines sich öffnenden Popupfensters in HTML festzulegen, kannst du beim Öffnen des Fensters mit JavaScript die Option `left` im... [mehr]

Answer

Um den linken Abstand (also den Abstand vom linken Fensterrand) eines sich öffnenden Popupfensters in HTML festzulegen, kannst du beim Öffnen des Fensters mit JavaScript die Option `left` im `window.open()`-Befehl verwenden. Das funktioniert so: ```javascript window.open('deineSeite.html', 'Fenstername', 'width=400,height=300,left=100,top=50'); ``` **Erklärung:** - `left=100` legt den Abstand in Pixeln vom linken Rand des Bildschirms fest. - `top=50` legt den Abstand in Pixeln vom oberen Rand des Bildschirms fest. - `width` und `height` bestimmen die Größe des Popups. **Beispiel:** ```html <button onclick="window.open('https://www.example.com', 'popup', 'width=500,height=400,left=200,top=100')"> Popup öffnen </button> ``` **Hinweis:** - Die Werte für `left` und `top` beziehen sich auf den Bildschirm, nicht auf das Browserfenster. - Popup-Blocker können das Öffnen von Fenstern verhindern. - Moderne Browser schränken das Verhalten von Popups teilweise ein. Weitere Infos findest du in der [MDN-Dokumentation zu window.open()](https://developer.mozilla.org/de/docs/Web/API/Window/open).

Question 6

Wofür steht CPT beim Webseitenbau?

Answer

CPT steht beim Webseitenbau für „Custom Post Type“. Das ist ein Begriff aus dem Content-Management-System WordPress. Ein Custom Post Type ist ein benutzerdefinierter Inhaltstyp, der e... [mehr]

Answer

CPT steht beim Webseitenbau für „Custom Post Type“. Das ist ein Begriff aus dem Content-Management-System WordPress. Ein Custom Post Type ist ein benutzerdefinierter Inhaltstyp, der es ermöglicht, neben den Standard-Inhaltstypen wie Beiträgen („Posts“) und Seiten („Pages“) eigene, speziell angepasste Inhaltstypen zu erstellen. Beispiele für Custom Post Types sind etwa „Portfolio“, „Events“ oder „Produkte“. Sie helfen dabei, Inhalte strukturiert und übersichtlich zu verwalten. Mehr Informationen findest du z.B. auf der offiziellen WordPress-Seite: https://developer.wordpress.org/plugins/post-types/

Question 7

Was sind die Grundeinstellungen für eine responsive Webseite?

Answer

Die Grundeinstellungen zur Erstellung einer responsiven Webseite umfassen folgende zentrale Punkte: 1. **Viewport-Meta-Tag** Im `<head>`-Bereich der HTML-Datei sollte folgender Tag stehen,... [mehr]

Answer

Die Grundeinstellungen zur Erstellung einer responsiven Webseite umfassen folgende zentrale Punkte: 1. **Viewport-Meta-Tag** Im `<head>`-Bereich der HTML-Datei sollte folgender Tag stehen, damit das Layout auf mobilen Geräten korrekt skaliert wird: ```html <meta name="viewport" content="width=device-width, initial-scale=1"> ``` 2. **Flexible Layouts mit CSS** Verwende relative Maßeinheiten wie Prozent (`%`), `em`, `rem` oder `vw/vh` statt fester Pixelwerte, um Elemente flexibel an verschiedene Bildschirmgrößen anzupassen. 3. **Media Queries** Mit Media Queries in CSS kannst du gezielt Styles für verschiedene Bildschirmgrößen und -typen definieren, z.B.: ```css @media (max-width: 600px) { body { font-size: 16px; } } ``` 4. **Flexible Bilder und Medien** Bilder und andere Medien sollten sich an die Größe des umgebenden Elements anpassen. Beispiel: ```css img { max-width: 100%; height: auto; } ``` 5. **Mobile-First-Ansatz** Entwickle das Grundlayout zunächst für kleine Bildschirme (Smartphones) und erweitere es dann mit Media Queries für größere Geräte (Tablets, Desktops). 6. **Vermeidung von festen Breiten** Vermeide feste Breiten für Container und Elemente, um ein flexibles Layout zu gewährleisten. 7. **Typografie und Lesbarkeit** Passe Schriftgrößen und Zeilenabstände für verschiedene Geräte an, um die Lesbarkeit zu optimieren. Diese Grundeinstellungen bilden die Basis für eine responsive Webseite, die auf allen Geräten gut funktioniert und aussieht.

Question 8

Wie kann man Inhalte in einer Tabelle mit CSS durch '...' abkürzen und wie heißt diese Technik?

Answer

Das, was du beschreibst, nennt man **Textüberlauf mit Auslassungszeichen** oder auf Englisch **text overflow ellipsis**. Mit CSS erreichst du das so: ```css .ellipsis { white-space: nowrap;... [mehr]

Answer

Das, was du beschreibst, nennt man **Textüberlauf mit Auslassungszeichen** oder auf Englisch **text overflow ellipsis**. Mit CSS erreichst du das so: ```css .ellipsis { white-space: nowrap; /* Kein Zeilenumbruch */ overflow: hidden; /* Überlaufenden Text ausblenden */ text-overflow: ellipsis; /* "..." anzeigen */ max-width: 200px; /* Optional: maximale Breite */ } ``` Das Element (z. B. eine Tabellenzelle `<td>`) bekommt dann die Klasse `ellipsis`: ```html <td class="ellipsis">Dies ist ein sehr langer Text, der abgeschnitten wird...</td> ``` **Wichtig:** Das funktioniert nur bei Block- oder Inline-Block-Elementen mit fester oder maximaler Breite. **Weitere Infos:** [MDN: text-overflow](https://developer.mozilla.org/de/docs/Web/CSS/text-overflow)

Question 9

Wie stellt man die Breite eines div-Elements mit CSS ein?

Answer

Die Breite eines div-Elements kannst du mit der CSS-Eigenschaft **width** festlegen. Beispiel: ```css div { width: 300px; } ``` Du kannst dabei verschiedene Einheiten verwenden, z. B. **px** (Pixe... [mehr]

Answer

Die Breite eines div-Elements kannst du mit der CSS-Eigenschaft **width** festlegen. Beispiel: ```css div { width: 300px; } ``` Du kannst dabei verschiedene Einheiten verwenden, z. B. **px** (Pixel), **%** (Prozent), **em**, **rem** oder **vw**. paar Beispiele: ```css div { width: 50%; /* 50% der Breite des Elternelements */ } div { width: 20em; /* 20-fache Schriftgröße */ } div { width: 80vw; /* 80% der Viewport-Breite */ } ``` Füge diese CSS-Regeln entweder in eine externe CSS-Datei oder in einen `<style>`-Block im `<head>` deiner HTML-Datei ein.

Question 10

Wie erstellt man einen Farbverlauf als Webseiten-Hintergrund?

Answer

Einen Farbverlauf im Hintergrund einer Webseite kannst du mit CSS ganz einfach umsetzen. Das gängigste Mittel dafür ist die Eigenschaft `background` oder `background-image` mit der Funktion... [mehr]

Answer

Einen Farbverlauf im Hintergrund einer Webseite kannst du mit CSS ganz einfach umsetzen. Das gängigste Mittel dafür ist die Eigenschaft `background` oder `background-image` mit der Funktion `linear-gradient` oder `radial-gradient`. Hier ein Beispiel für einen linearen Farbverlauf von Blau zu Rot: ```css body { /* Linearer Verlauf von oben (blau) nach unten (rot) */ background: linear-gradient(to bottom, blue, red); } ``` Für einen radialen Verlauf (kreisförmig): ```css body { /* Radialer Verlauf von der Mitte (gelb) nach außen (grün) */ background: radial-gradient(circle, yellow, green); } ``` Du kannst beliebig viele Farben angeben und auch die Richtung des Verlaufs anpassen, z.B.: ```css body { background: linear-gradient(90deg, #ff7e5f, #feb47b, #86a8e7); } ``` Füge diesen CSS-Code in deine CSS-Datei oder in einen `<style>`-Block im `<head>` deiner HTML-Datei ein. Der Farbverlauf wird dann als Hintergrund angezeigt. Weitere Informationen findest du in der [MDN Web Docs zu CSS Gradients](https://developer.mozilla.org/de/docs/Web/CSS/gradient).

Question 11

Gibt es HTML-Tags, die verhindern, dass eine Webseite aus dem Cache geladen wird?

Answer

Nein, es gibt keine HTML-Tags, die direkt verhindern, dass eine Webseite aus dem Cache geladen wird. Das Caching-Verhalten wird nicht durch HTML, sondern durch HTTP-Header gesteuert, die vom Webserver... [mehr]

Answer

Nein, es gibt keine HTML-Tags, die direkt verhindern, dass eine Webseite aus dem Cache geladen wird. Das Caching-Verhalten wird nicht durch HTML, sondern durch HTTP-Header gesteuert, die vom Webserver gesendet werden. Um das Caching zu steuern, werden typischerweise folgende HTTP-Header verwendet: - `Cache-Control` - `Pragma` - `Expires` Beispiel für einen Header, der das Caching verhindert: ``` Cache-Control: no-store, no-cache, must-revalidate Pragma: no-cache Expires: 0 ``` Diese Header müssen auf dem Server konfiguriert werden, nicht im HTML-Code selbst. In HTML kannst du das Caching also nicht direkt beeinflussen. Weitere Informationen: - [MDN Web Docs: Controlling caching](https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching) - [MDN Web Docs: Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control)

Question 12

Wie lautet der HTML-Befehl, um Bilder in einer Reihe anzuzeigen?

Answer

Um Bilder in einer Reihe (also nebeneinander) anzuzeigen, kannst du in HTML das `<img>`-Tag verwenden. Standardmäßig werden `<img>`-Elemente inline angezeigt, das heißt, s... [mehr]

Answer

Um Bilder in einer Reihe (also nebeneinander) anzuzeigen, kannst du in HTML das `<img>`-Tag verwenden. Standardmäßig werden `<img>`-Elemente inline angezeigt, das heißt, sie stehen bereits nebeneinander, solange genug Platz vorhanden ist. Beispiel: ```html <img src="bild1.jpg" alt="Bild 1"> <img src="bild2.jpg" alt="Bild 2"> <img src="bild3.jpg" alt="Bild 3"> ``` Falls du mehr Kontrolle über das Layout möchtest (z.B. Abstände oder zentrierte Ausrichtung), empfiehlt sich zusätzlich CSS, zum Beispiel mit Flexbox: ```html <div style="display: flex;"> <img src="bild1.jpg" alt="Bild 1"> <img src="bild2.jpg" alt="Bild 2"> <img src="bild3.jpg" alt="Bild 3"> </div> ``` Dadurch werden die Bilder garantiert in einer Reihe angezeigt, auch wenn sie unterschiedlich groß sind.

Question 13

Wie öffne ich mit HTML eine PDF-Datei, ohne dass der Inhalt aus dem Cache geladen wird?

Answer

Um eine PDF-Datei mit HTML zu öffnen und sicherzustellen, dass sie **nicht aus dem Cache** geladen wird, kannst du einen sogenannten **Cache-Buster** verwenden. Das bedeutet, du hängst an di... [mehr]

Answer

Um eine PDF-Datei mit HTML zu öffnen und sicherzustellen, dass sie **nicht aus dem Cache** geladen wird, kannst du einen sogenannten **Cache-Buster** verwenden. Das bedeutet, du hängst an die URL der PDF-Datei einen eindeutigen Parameter an, z. B. einen Zeitstempel oder eine zufällige Zahl. Dadurch sieht der Browser die Datei als „neu“ an und lädt sie nicht aus dem Cache. **Beispiel:** ```html <a href="deine-datei.pdf?nocache=<?=time()?>" target="_blank">PDF öffnen</a> ``` Wenn du kein PHP verwendest, kannst du das auch mit JavaScript machen: ```html <a id="pdfLink" href="#" target="_blank">PDF öffnen</a> <script> document.getElementById('pdfLink').href = 'deine-datei.pdf?nocache=' + new Date().getTime(); </script> ``` Oder direkt im `iframe`: ```html <iframe src="deine-datei.pdf?nocache=123456789"></iframe> ``` **Wichtig:** Ersetze `deine-datei.pdf` durch den tatsächlichen Dateinamen. Der Parameter `nocache` kann beliebig benannt werden, wichtig ist nur, dass der Wert sich ändert (z. B. durch `new Date().getTime()`). **Hinweis:** Das verhindert das Caching im Browser, aber nicht unbedingt in allen Proxy-Servern oder auf Serverseite. Für maximale Kontrolle sollten auch die HTTP-Header auf dem Server entsprechend gesetzt werden (z. B. `Cache-Control: no-store`). Weitere Infos zu Cache-Control: https://developer.mozilla.org/de/docs/Web/HTTP/Headers/Cache-Control

Question 14

Wie kann ich mit HTML die Höhe eines <td>-Tags verändern?

Answer

Um die Höhe einer Tabellenzelle (`<td>`) in HTML zu verändern, kannst du das CSS-Attribut `height` verwenden. Das geht entweder direkt im HTML-Tag als Inline-Style oder über eine... [mehr]

Answer

Um die Höhe einer Tabellenzelle (`<td>`) in HTML zu verändern, kannst du das CSS-Attribut `height` verwenden. Das geht entweder direkt im HTML-Tag als Inline-Style oder über eine CSS-Klasse. **Beispiel mit Inline-Style:** ```html <td style="height: 50px;">Inhalt</td> ``` **Beispiel mit CSS-Klasse:** ```html <style> .hohe-zelle { height: 50px; } </style> <table> <tr> <td class="hohe-zelle">Inhalt</td> </tr> </table> ``` **Wichtige Hinweise:** - Die tatsächliche Höhe der Zelle kann auch durch den Inhalt oder andere CSS-Eigenschaften beeinflusst werden. - Die Höhe (`height`) wird auf die Zeile (`<tr>`) angewendet, wenn du möchtest, dass alle Zellen in einer Zeile gleich hoch sind. - Bei mehreren Zellen in einer Zeile bestimmt die höchste Zelle die Mindesthöhe der gesamten Zeile. Weitere Infos findest du z.B. bei [MDN Web Docs: <td>](https://developer.mozilla.org/de/docs/Web/HTML/Element/td).

Question 15

Wie erstellt man in JSF ein modales Unterfenster mit mehreren Buttons und Wertrückgabe?

Answer

Um in **JSF (JavaServer Faces)** ein modales Unterfenster (Dialog) mit mehreren Buttons und Wertrückgabe zu erstellen, wird in der Praxis meist eine UI-Komponentenbibliothek wie **PrimeFaces** ve... [mehr]

Answer

Um in **JSF (JavaServer Faces)** ein modales Unterfenster (Dialog) mit mehreren Buttons und Wertrückgabe zu erstellen, wird in der Praxis meist eine UI-Komponentenbibliothek wie **PrimeFaces** verwendet, da das Standard-JSF keine eigenen Dialog-Komponenten bietet. Hier ein Beispiel mit **PrimeFaces**: ### Voraussetzungen - PrimeFaces in deinem Projekt eingebunden ([PrimeFaces Download](https://www.primefaces.org/downloads/)) - JSF-fähiges Projekt (z.B. mit Maven und passender Konfiguration) --- ### 1. Dialog in der XHTML-Seite definieren ```xml <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:p="http://primefaces.org/ui"> <h:head /> <h:body> <h:form id="mainForm"> <p:commandButton value="Dialog öffnen" onclick="PF('myDialog').show(); return false;" /> <p:dialog header="Mein Dialog" widgetVar="myDialog" modal="true" resizable="false"> <h:panelGrid columns="1" cellpadding="5"> <h:outputText value="Bitte wähle eine Option:" /> <p:commandButton value="Option 1" action="#{dialogBean.option1}" oncomplete="PF('myDialog').hide();" /> <p:commandButton value="Option 2" action="#{dialogBean.option2}" oncomplete="PF('myDialog').hide();" /> </h:panelGrid> </p:dialog> <h:outputText value="Gewählte Option: #{dialogBean.selectedOption}" /> </h:form> </h:body> </html> ``` --- ### 2. Backing Bean (z.B. `DialogBean.java`) ```java import jakarta.faces.view.ViewScoped; import jakarta.inject.Named; import java.io.Serializable; @Named @ViewScoped public class DialogBean implements Serializable { private String selectedOption; public void option1() { selectedOption = "Option 1"; } public void option2() { selectedOption = "Option 2"; } public String getSelectedOption() { return selectedOption; } } ``` --- ### Hinweise - Das Dialogfenster wird mit `PF('myDialog').show();` geöffnet. - Die Buttons im Dialog rufen Methoden im Backing Bean auf und schließen das Fenster (`oncomplete`). - Die gewählte Option wird im Bean gespeichert und kann auf der Seite angezeigt oder weiterverarbeitet werden. --- **Weitere Informationen:** - [PrimeFaces Dialog Dokumentation](https://www.primefaces.org/showcase/ui/overlay/dialog.xhtml) - [PrimeFaces Getting Started](https://www.primefaces.org/gettingstarted/) --- **Ohne PrimeFaces** müsstest du auf JavaScript und eigene CSS-Lösungen zurückgreifen, was deutlich aufwändiger ist und weniger komfortabel mit JSF interagiert.