Prüfungsfragen_HTML_v1.6.pdf

Prüfungsfragen HTML und CSS für Web Developer:innen Version 1.6 Inhalt HTML und CSS für Web Developer:innen (81 Fragen)............................................................................ 2 HTTP Request + Headers..............................................................................

Prüfungsfragen HTML und CSS für Web Developer:innen Version 1.6 Inhalt HTML und CSS für Web Developer:innen (81 Fragen)............................................................................ 2 HTTP Request + Headers....................................................................................................................................................... 2 HTTP Status Codes................................................................................................................................................................. 3 Editor, IDE.............................................................................................................................................................................. 4 Zusammenspiel HTML, CSS, Javascript.................................................................................................................................. 5 HTML Grundgerüst................................................................................................................................................................ 6 Block, Inline, andere Displayarten......................................................................................................................................... 7 Semantik................................................................................................................................................................................ 8 Hyperlinks.............................................................................................................................................................................. 9 Formulare............................................................................................................................................................................ 10 CSS Regel............................................................................................................................................................................. 11 CSS Selektoren, Kaskadierung............................................................................................................................................. 12 Box Modell.......................................................................................................................................................................... 13 Flexbox................................................................................................................................................................................ 15 Pseudoklassen, Pseudoelemente........................................................................................................................................ 16 Mediaqueries....................................................................................................................................................................... 17 Bootstrap............................................................................................................................................................................. 18 HTML und CSS für Web Developer:innen (81 Fragen) HTTP Request + Headers 1) Welche der folgenden Begriffe sind keine HTTP Request Methoden? = SECURE und SSL ‐ GET und POST ‐ PUT und DELETE ‐ PATCH und CONNECT 2) Welche Aussage trifft laut HTTP‐Standard für die Beschreibung einer HTTP Request Methode zu? = Eine GET Anfrage soll nur Daten abrufen. = Eine Anfrage mit Methode DELETE soll eine Ressource löschen. ‐ Mit einer CHANGE Anfrage wird eine Ressource teilweise verändert. ‐ Eine Anfrage mit Methode OPTION ändert die Einstellungen einer Ressource. 3) Welche Cache‐Richtlinien können mit dem Cache‐Control Header definiert werden? = no‐cache = max‐age ‐ full‐cache ‐ max‐cache 4) In welcher Syntax werden Cookies mit dem Set‐Cookie Header übertragen? = name=value; name2=value2 ‐ {name:value,name2:value2} ‐ [value,value2] ‐ name=value&name2=value2 5) Warum ist HTTP Basic Authentication eher als unsicher an zu sehen? = Username und Passwort werden nur Base64 enkodiert. ‐ Das Passwort ist mit MD5 kodiert. ‐ Es wird ein JSON Web Token unverschlüsselt verwendet. ‐ Unterschiedliche Browser verwenden unterschiedliche Verschlüsselungen. HTTP Status Codes 6) Was definiert der HTTP Status Code? = Ob ein HTTP Request erfolgreich abgeschlossen wurde oder nicht. ‐ Ob ein HTTP Request in angemessener Zeit abgearbeitet werden konnte. ‐ Ob ein HTTP Response im gewünschten Format zurück geschickt wird. ‐ Ob alle HTTP Header dem Standard entsprechen. 7) HTTP Response Status Codes werden in wie vielen Gruppen eingeteilt? =5 ‐ 47 ‐ 200 ‐ 599 8) Was beschreiben HTTP Response Status Codes von 400 bis 499? = Client error responses ‐ Server error responses ‐ Redirection messages ‐ Successful responses 9) Welche der Angaben beschreiben Gruppen von HTTP Response Status Codes? = Server error responses = Redirection messages = Successful responses ‐ Secure responses 10) Mit welchen zwei Status Codes können temporäre Umleitungen von permanenten Umleitungen unterschieden werden? = 301 und 302 ‐ 306 und 308 ‐ 300 und 204 ‐ 304 und 404 Editor, IDE 11) Was bedeutet die Abkürzung IDE? = integrated development enviroment ‐ interface digital engine ‐ internet domain execute ‐ international development error 12) Was benötigt eine vollständige IDE? = Source Code Editor, Build Automation and Debugger ‐ Source Code Editor, Extension Manager and Built Tools ‐ Source Code Editor, Version Control und CLI ‐ Source Code Editor, Class Browser und ESLint Integration 13) Visual Studio Code Extensions werden in welcher Programmsprache erstellt? = JavaScript ‐ C++ ‐ Java ‐ Python 14) Welche Editoren werden von Webentwicklern häufig verwendet? = Visual Studio Code = WebStorm = Brackets = Notepad++ 15) Die Editoren Visual Studio Code und Atom.io wurden mit welchem Framework entwickelt? = ElectronJS ‐ Cordova ‐ ReactNative ‐ JSON Zusammenspiel HTML, CSS, Javascript 16) Nach welcher Unterteilung erfolgt bei Webseite oder Webapplikation die Trennung von HTML‐, CSS‐ und Javascript‐Code? = Inhalt, Darstellung und Funktion ‐ Text, Bilder und Farben ‐ Desktop, Tablet und Mobile ‐ Programmierung und Daten 17) Wie werden HTML Tags geschrieben? = Tags stehen in „spitzen Klammern“ = Der End‐Tag wird mit geschrieben ‐ Leere Tags müssen mit einem doppelten Schrägstrich enden ‐ Mehrere Tags werden zwischen gruppiert. 18) Wofür wird mit einer CSS Regel eine Formatvorlage definiert? = für bestimmte HTML Tags ‐ für einzelne Codezeilen ‐ ausschließlich für Block‐Elemente ‐ für Kindelemente des ‐Tags 19) Welche Aussage ist korrekt? = Javascript und Java sind zwei Programmiersprachen, die nichts miteinander zu tun haben. ‐ Javascript und Java sind zwei Programmiersprachen vom selben Erfinder. ‐ Javascript und Java haben die gleiche Programmiersyntax. ‐ Javascript wurde von Java abgeleitet und ist eine einfacher zu schreibende Programmiersprache. 20) Welche HTML, CSS und Javascript Befehle passen zusammen? = Hallo Welt.absatz { color:green; } document.getElementsByClassName( 'absatz' ) = Hallo Welt #wichtig { color:green; } document.getElementById( 'wichtig' ) ‐ Hallo Welt.wichtig { color:green; } document.querySelector( 'wichtig' ) ‐ Hallo Welt.absatz { color:green; } document.getElementById( 'absatz' ); HTML Grundgerüst 21) Was gehört zum HTML Grundgerüst? = Doctype = head‐Element = body‐Element ‐ script‐Element 22) Wie sieht eine DTD für HTML5 aus? = ‐ ‐ ‐ 23) Welche Angabe ist laut W3C Standard im Tag empfohlen? = lang="..." ‐ charset="..." ‐ viewport="..." ‐ dtd="..." 24) Worauf bezieht sich der Meta‐Tag "viewport" im HTML‐Head? = Darstellung der Webseite auf mobilen Endgeräten ‐ Darstellung der Webseite angepasst an unterschiedlichen Bildschirmgrößen ‐ Darstellung der Schriftgrößen in Bezug auf Zoomfaktor ‐ Darstellung der Bildformate 25) Wo wird der Inhalt des Elementes grundsätzlich angezeigt? = Beschriftung des Browserfensters = Beschriftung des Tabs im Browser = Ergebnisseite bei Suchmaschinen = Angabe beim Setzen von Favoriten Block, Inline, andere Displayarten 26) Wofür dient die CSS‐Eigenschaft „display“ bei HTML‐Elementen? = Ob und wie ein Element auf der Seite dargestellt wird. ‐ Ob ein Element durchsichtig erscheint oder nicht. ‐ Welches Element weiter im Vordergrund steht. ‐ Bei welchem Ausgabemedium ein Element dargestellt wird. 27) Welches bzw. welche der angegeben Elemente ist bzw. sind standardmäßig Block‐Elemente? = div =p ‐a ‐ img 28) Welches bzw. welche der angegeben Elemente ist bzw. sind standardmäßig Inline‐Elemente? = strong =i ‐ h1 ‐ ul 29) Welche Aussage ist grundsätzlich falsch? = Innerhalb von Inline‐Elementen dürfen Block‐Elemente verwendet werden. ‐ Innerhalb von Inline‐Elementen dürfen Inline‐Elemente verwendet werden. ‐ Innerhalb von Block‐Elementen dürfen Block‐Elemente verwendet werden. ‐ Innerhalb von Block‐Elementen dürfen Inline‐Elemente verwendet werden. 30) Welche Werte sind bei der Eigenschaft „display“ gültig? = block = none = flex ‐ align‐self Semantik 31) Wofür steht der Begriff Semantik? = Bedeutungslehre ‐ Beziehungslehre ‐ Verschachtelungslehre ‐ Vererbungslehre 32) Was beschreibt semantisches HTML? = Die Beziehung von HTML‐Tags und deren Inhalten. ‐ Die Beziehung der Elemente zueinander im DOM. ‐ Die Vererbung von Eigenschaften an Kind‐Elemente. ‐ Das Zusammenspiel zwischen Inhalt und Aussehen. 33) Was sind Vorteile bei Verwendung von semantischen HTML‐Codes? = Besseres Verständnis der Inhalte durch Suchmaschinen = Bessere Zugänglichkeit für Benutzer mit Einschränkungen ‐ Verbesserung der Ladezeit von Webseiten ‐ Einfachere Integration von Javascript‐Bibliotheken 34) Welche der angeführten Tags sind semantiklose Tags? = div =b ‐ article ‐ strong 35) Welche der angeführten Tags sind semantiklose Tags? = span = head ‐ em ‐ header Hyperlinks 36) Welcher Tag erzeugt einen Hyperlink in der Webseite? = Hyperlink ‐ Hyperlink ‐ Hyperlink ‐ Hyperlink 37) Wofür dient das Attribut „target“ in einem Hyperlink? = Wo sich das verlinkte Dokument öffnen soll. ‐ Wo der Benutzer auf den Hyperlink klicken muss. ‐ Welches verlinkte Dokument angesprochen wird. ‐ Wie oft ein Link geklickt werden kann. 38) Welche unterschiedlichen Zustände eines Hyperlinks lassen sich mit entsprechenden Pseudoklassen formatieren? = :link = :visited = :hover ‐ :clicked 39) Was ist ein absoluter Link? = http://www.wifiwien.at/page2.html ‐ page2.html ‐ page2.html#c2 ‐ content/page2.html?absolute=true 40) Welche CSS Eigenschaft trifft auf einen Hyperlink standardmäßig zu? = text‐decoration:underline; = cursor:pointer; ‐ font‐size:1.5rem; ‐ display:inline‐block; Formulare 41) Welche Attribute können dem ‐Tag wie beschrieben zugewiesen werden? = action‐Attribut gibt an wohin die Daten geschickt werden = method‐Attribut gibt an mit welcher Versandmethode Daten geschickt werden = enctype‐Attribut gibt an wie die geschickten Daten kodiert werden ‐ type‐Attribut gibt an um welchen Eingabetyp es sich handelt 42) Mit welchem Element innerhalb eines Formulars können durch Klick eingegebene Werte verschickt werden? = = Abschicken ‐ Abschicken ‐ Abschicken 43) Welcher HTML‐Tag erzeugt ein Formularelement? = input = select = textarea ‐ checkbox 44) Wie wird eine Radiobuttongruppe mit zwei Optionen erzeugt? = 1 2 ‐ 1 2 ‐ 1 2 ‐ 1 2 45) Was ist kein gültiger Wert für das Attribut „type“ bei einem input‐Element? = username ‐ password ‐ submit ‐ email CSS Regel 46) Eine CSS Regel besteht aus welchen zwei Teilen? = Selektor und Deklarationsblock ‐ Eigenschaften und Werten ‐ Deklarationen mit Werten ‐ Selektoren und Angabe des Medium 47) Eine CSS Regel beschreibt grundsätzlich … = das Aussehen der mit dem Selektor angesprochenen HTML‐Elementen. ‐ die Formatierung aller HTML‐Tags auf einer Webseite. ‐ die Darstellung von Block‐Elementen im HTML. ‐ die Sichtbarkeit der Selektoren. 48) Wofür steht CSS? = Cascading Style Sheet ‐ Cascading Script and Styles ‐ Cascading Sheet Script ‐ Cascading Style Selector 49) Welche Aussage trifft zu? = Bei gleichwerte CSS Regeln (gleiche Spezifität des Selektors) gilt jene die weiter unten im Quellcode steht. = Eine Inline‐CSS Angabe mit !imporant gilt immer. ‐ Bei gleichwertigen Selektoren werden nur die Eigenschaften übernommen, die !important enthalten. ‐ CSS Regeln dürfen im Selektor nicht mehr als zwei Ids enthalten. 50) Welche Aussage zu einfachen CSS Selektoren ist falsch? = [foo] … jedes Element mit einem Kindelement foo wird angesprochen ‐ E … jedes Element E wird angesprochen ‐.c … jedes Element mit der Klasse c wird angesprochen ‐ #id … das Element mit der ID „id“ wird angesprochen CSS Selektoren, Kaskadierung 51) Welche der folgenden Aussagen zu Kombination von CSS Selektoren (E und F) ist falsch? = E * F … alle Elemente E die ein Elternelement von den Elementen F sind ‐ E F … alle Elemente F, die Nachfahren eines Elements E sind ‐ E ~ F … alle Element F, die einen Vorgänger auf gleicher Ebene haben ‐ E + F … alle Elemente F, die einen direkten Vorgänger E auf gleicher Ebene haben 52) Wie kann ein Selektor für das folgende HTML‐Element aussehen? Hello World! = div.top = div[data‐c] ‐ div #main.top ‐ div + #main.top 53) Welcher der folgenden Selektoren spricht alle Listenelemente mit dem Inhalt „A“ aus dem Beispiel an? A B A B = li:nth‐child(2n+1) = li:nth‐child(1), li:nth‐child(3) ‐ li:nth‐child(1,3) ‐ li:nth‐of‐type(“A”) 54) Welches der folgenden Selektoren spricht ein Pseudoelement an? = li::before ‐ div::first‐element ‐ a:hover ‐ li:nth‐child 55) Welche Farbe hat der Hyperlink? Link CSS‐Regeln: div#main p { color:red; } #hyper {color:green; } #main a {color:blue;} #main + #hyper {color:orange;} = blue ‐ green ‐ orange ‐ red Box Modell 56) Über welchen Eigenschaften definiert das Box Modell im CSS die Darstellung eines Elements? = width, height, padding, border, margin ‐ display, visibility, media ‐ border‐box, border, outline, shadow ‐ block, flex, grid, table 57) Wie kann eine Box mit einem Außenabstand von 20px links/rechts und 10px oben/unten in CSS festgelegt werden? =.box { margin:10px 20px; } =.box { margin:10px 20px 10px 20px; } ‐.box { margin‐top:10; margin‐left:20; margin‐right:20; margin‐bottom:10; } ‐.box { margin:20px 10px; } 58) Welcher Abstand wird mit „padding“ festgelegt? = Abstand des Inhaltes (=Content‐Box) zum Rahmen (border) ‐ Abstand zwischen zwei Elementen ‐ Abstand zu nachfolgenden Elementen ‐ Abstand zwischen einzelnen Zeilen eines Textblockes 59) Welche CSS Einheiten lassen sich für Größenangaben (Breite/Höhe) von Elementen verwenden? = px = vw, vh =% ‐ rad 60) Welche Schriftgröße hat der Text „Hallo Welt“? Hallo Welt html, body { font‐size:20px; } body * { font‐size:1.5em; } = 45px ‐ 30px ‐ 20px ‐ 40px Flexbox 61) Was sind Vorteile der Flexbox im Vergleich zu Float? = alle Elemente innerhalb eines Containers können die Container‐Höhe übernehmen, auch wenn sie unterschiedlich viel Inhalt haben = vertikales Zentrieren innerhalb eines Elternelementes ist möglich = horizontales Zentrieren mehrere Elemente, die nebeneinander stehen, ist möglich ‐ durch Elemente mit der Eigenschaft „clear“, können mehrere Flexboxen voneinander getrennt werden 62) Welche Werte sind bei der Eigenschaft „justify‐content“ erlaubt? = flex‐start = space‐between ‐ vertical‐align ‐ align‐self 63) Was ist der Unterschied zwischen display:flex und display:inline‐flex? = Beide erzeugen einen Flexbox‐Container, bei inline‐flex verhält sich der Container eher wie ein Inline‐Element. ‐ Beide erzeigen einen Flexbox‐Container, bei inline‐flex verhalten sich alle Flex‐Items eher wie Inline‐ Elemente. ‐ Beide erzeugen einen Flexbox‐Container, bei inline‐flex verhalten sich Container und Flex‐Items eher wie Inline‐Elemente. ‐ Es gibt keinen Unterschied, jedoch muss Eigenschaft inline‐flex bei Inline‐Elementen verwendet werden. 64) Welche Werte sind bei der Eigenschaft „flex‐wrap“ zulässig? = wrap = nowrap = wrap‐reverse ‐ none 65) Welchem Element wird die Eigenschaft align‐items zugewiesen? = einem Flex‐Container, um alle Flex‐Items in der Laufrichtung auszurichten ‐ einem Flex‐Item, um die Ausrichtung zu anderen Flex‐Items zu steuern ‐ einem Flex‐Container, um den Container zu umliegenden Elementen auszurichten ‐ einem beliebigen Blockelement, um alle Kindelemente auszurichten Pseudoklassen, Pseudoelemente 66) Welche Pseudoklasse wird verwendet um Formular‐Elemente zu stylen, die vom User nicht aktiviert bzw. ausgewählt werden können? = :disabled ‐ :active ‐ :focus ‐ :enabled 67) Welche Aussage zu Pseudoklassen in CSS ist korrekt? = Pseudoklassen ermöglichen einem Element für einen bestimmten Zustand Formatierung zu geben. = Es gibt mehrere vordefinierte Pseudoklassen, die verwendet werden können. ‐ Jede Pseudoklasse hat bei jedem HTML‐Element einen Effekt. ‐ Pseudoklassen werden dem Selektor mit einem Komma hinzugefügt 68) Welcher Selektor wählt jede zweite Zeile in einer Tabelle aus, beginnend mit der ersten (1., 3., 5. usw)? = table tr:nth‐child(2n+1) = table tr:nth‐child(odd) ‐ table tr:odd ‐ table tr:child(2n) 69) Wofür wird die Pseudoklasse „:target“ verwendet? = Es wird jenes Element formatiert, welches die ID passend zum URL Fragment (beginnen mit #) hat. ‐ Es werden alle Hyperlinks formatiert, die das Attribut „target“ besitzen. ‐ Es wird jenes Element formatiert, auf das der User klickt. ‐ Es werden alle Hyperlinks formatiert, die als Ankerlinks innerhalb des Dokuments dienen. 70) Mit welchen CSS Selektor wird das erste ‐Element innerhalb eines Containers angesprochen, ungeachtet von anderen Elementen, die im Container vorhanden sind? = #container p:nth‐of‐type(1) ‐ #container p:first‐child ‐ #container p:nth‐child(2n+1) ‐ #container > p 71) Wie sieht der Selektor für ein Pseudoelement in CSS aus? = beginnt mit :: (2x Doppelpunkt) ‐ beginnt mit : (Doppelpunkt) ‐ muss mit einem # (Hash) beendet werden ‐ der Selektor muss in @pseude{} Block stehen Mediaqueries 72) Welche Aussagen treffen auf CSS‐Mediaqueries zu? = Mediaqueries können Eigenschaften des Bildschirmes abfragen, um sowohl mobilen Geräten als auch Desktop‐Monitoren entgegenzukommen. = Mediaqueries kombinieren CSS‐Eigenschaften mit logischen Abfragen nach Eigenschaften von Geräten. = @media‐Regeln legen je nach Höhe, Breite oder Orientierung (Portrait oder Landscape) des Viewports unterschiedliche CSS‐Eigenschaften für Gerätetpyen fest. ‐ Mit Mediaqueries kann die Browser‐Fenstergröße verändert werden. 73) Welche der folgenden Angaben ist ein gültiges Mediaquery? = @media screen and (orientation:landscape) {} = @media only screen and (min‐width:800px) {} = @media print {} ‐ @media (device‐type:mobile) {} 74) Wie können Sie mit Hilfe eines Mediaqueries ihre Webapplikation für Benutzer, die den Darkmode verwenden, optimieren? = @media (prefers‐color‐scheme:dark) {} ‐ @media (user‐mode:darktheme) {} ‐ Nur mit Javascript lässt sich ein Mediaquery für Darkmode erstellen. ‐ Mediaqueries können nicht zwischen Dark‐ und Lightmode unterscheiden. 75) Wie werden Mediaqueries nach dem „Mobile‐First“ Ansatz festgelegt? = Alle CSS Angaben für kleine Screens stehen zuerst ohne Mediaquery im CSS, gefolgt von Mediaqueries, die nur für Screens mit größerer Bildschirmbreite gelten. ‐ Zuerst werden alle Mediaqueries, die kleinere Screens ansprechen, im CSS Code geschrieben. Danach folgen CSS Angaben ohne Mediequeries für große Bildschirme. ‐ Mobile‐First hat nichts mit Mediaqueries zu tun, hier geht es darum welche HTML‐Datei zuerst auf einem mobilen Endgerät geöffnet wird. ‐ Es wird die Angabe @media only mobile {} vor der Angabe @media only screen {} im CSS Code geschrieben. 76) Welches Mediaquery wirkt bei einer Bildschirmbreite von 1024px und Bildschirmhöhe von 768px? = @media screen and (min‐width:800px) {} = @media screen and (orientation:landscape) {} ‐ @media screen and (max‐width:800px) {} ‐ @media screen and (orientation:portrait) {} Bootstrap 77) Was ist Bootstrap? = Bootstrap ist ein CSS Framework für schnellere und einfachere Webentwicklung. = Bootstrap beinhaltet HTML und CSS basierte Design‐Templates für Typographie, Formulare, Buttons, Tabellen, Navigation, Bilder und optionale JavaScript Plugins. = Bootstrap ermöglicht einfaches Erstellen von responsiven Designs. ‐ Bootstrap ist eine Javascript Funktionssammlung für einfachere DOM‐Manipulation und Animationen. 78) Woraus besteht das Bootstrap Gridsystem? = aus 12 Spalten = aus Default‐Breakpoints (bei v5: xs, sm, md, lg, xl, xxl) ‐ frei konfigurierbarer Anzahl an Spalten ‐ aus 8 Spalten 79) Mit welcher Klasse können Sie im Bootstrap Grid drei gleichgroße Elemente nebeneinander erstellen, die gemeinsam die Breite des Containers einnehmen? =.col‐4 ‐.col‐3 ‐.col‐33 ‐.col‐6 80) Welcher Tag erstellt einen Bootstrap‐Button mit grünem Hintergrund? = Text = Text ‐ Text ‐ Text 81) Mit welcher Bootstrap‐Klasse werden erfolgreich validierte Formularfelder markiert? = is‐valid ‐ is‐invalid ‐ valid‐feedback ‐ valid