21
Web-Programmierung (Subject) / html (Lesson)
Advertisement
- Wozu dienen HTML-, CSS-Elemente und JavaScript innerhalb einer Webseite? html - dient zur Struktur der Webseite css - bestimmt das aussehen einer Webseite javascript - bestimmt die Interaktivität einer Webseite
- Wie heißt das Protokoll mit dem im WWW die Webseiten übertragen werden und welcher ist der Standardport? Hypertext Transfer Protocol (HTTP) TCP auf den Standard-Port 80 des HTTP-Servers
- Welche Aufgaben haben Web-Client und Web-Server im Rahmen des WWW? Client: • Darstellung der ausgeliefertenWebseiten / Daten(einschließlich multimedialer Inhalte)• Scriptverarbeitung• Requestgenerierung Webserver:• Requests per HTTP annehmen• statische und dynamische Ressourcenbereitstellen• Ressourcen per HTTP zum Client senden• Fehlermeldungen generieren u. senden(z..B. "404-Datei nicht gefunden")• Session-Management• Autentifizierung
- 4. Wie ist die Grundstruktur eines HTML5-Dokuments? ein HTML-Dokument bestehen aus Text• der Inhalt von HTML-Dokumenten steht in s.g. HTML-Elementen• HTML-Elemente werden durch s.g. Tags markiert, wobei fast alle HTML-Elemente durch ein öffnendes und schließendes Tag markiert werden• Tags werden in spitzen Klammern notiert, ein abschließendes Tag beginnt mit einem Slash (/) Unterteilung > Dokumententyp-Deklaration <!DOCTYPE html>Dokument <html> (Wurzelelement)Dokumentenkopf <head> </head>Dokumentenkörper <body> Inhalt </body> </html> (Wurzelelement)
- Mit welchem Tag und welchem Attribut wird der verwendete Zeichensatz angegeben? <meta charset="UTF-8"> Tag = charset ? Attribut = meta ?
- Welcher Zeichensatz (Zeichencodierung) sollte bei HTML5 Dokumenten verwendet werden und wo wird dieser im Dokument angegeben? <meta charset="UTF-8"> ist der Standardzeichensatz für html5
- Wozu können praktischerweise die Tags <header>, <footer>, <nav>, <aside>, <section> im HTML-Dokument verwendet werden? Gemeinsamkeit: Textstrukturierung auf der Webseite. header: Kopfzeile footer: Fußzeile nav: Abschnitt für Navigationslinks aside: steht für Randbemerkungen section: Abschnitte für "umfangreichere" html-Dokumente.
- Schreiben Sie eine ungeordnete Liste mit drei Einträgen! <ul> <li>Eintrag 1 </li> <li>Eintrag 2 </li> <li>Eintrag 3 </li> </ul>
- Nennen Sie Unterschiede zwischen ungeordneten und geordneten Listen! ungeordnete Liste: Ist eine Sammlung von Einträgen, die keine nummerische Ordnung aufweisen− die Einträge werden mit einem Aufzählungszeichen (Bullet) dargestellt geordnete Liste: Ist eine Sammlung von Einträgen, die eine bestimmte nummerische Ordnung aufweisenbzw. deren Aufzählungsreihenfolge von Bedeutung ist.− die Einträge werden durchnummeriert (1,2,3 oder a,b,c,)
- Schreiben Sie nachfolgend dargestellte verschachtelte Liste in HTML! <ol> <li> Damenbekleidung </li> <ol> <li> Kleider </li> <li> Röcke </li> <li> Blusen </li> </ol> <li> Herrenbekleidung </li> <ol> <li> Socken </li> </ol> </ol>
- Advertisement
- Nennen Sie die Bedeutung folgender Tags: <h1>, <p>, <pre>, <b>, <i>, <span>, <div> h1- Überschrift erster Ordnung p - Paragraph, Textabsatz <pre> preformatted. Text wird so dargestellt wie im Editor. (Vorformattiert) <b> bold. Text dick darstellen <i> italic. Text kursiv darstellen <span> "überspannt" einen Bereich. Hilfreich für CSS. <div> division. Einen Bereich einschließen. Es ist dann ein Block bzw. Division.
- Erzeugen Sie aus dem Text „Hochschule Mittweida“ einen HTML-Hyperlink , welcher absolut auf die Startseite der Hochschule verweist! <a href="http://www.hs-mittweida.de/">Hochschule Mittweida</a>
- Schreiben Sie die HTML-Anweisung zum Einbinden des Bildes „Beispiel.jpg“ mit den Eigenschaften „Höhe=20px“, „ Breite=30px“ und alternativen Text „Beispiel“! <img src="Beispiel.jpg" style="width:30px;height:20px;">
- Erweitern Sie das eingebundene Bild mit einem Hyperlink welcher relativ auf die Datei „Beispiel.html“ verweist! <a href="hsmw.de"> <img src="Beispie.jpg" " style="width:304px;height:228px;"> </a>
- Nennen und beschreiben Sie kurz die Tags zum Aufbau einer Image-Map! (Sind Grafiken, bei denen der User mit der Maus auf bestimmte Details klicken kannDaraufhin wird ein Verweis ausgeführt) <img> definiert das Image-Element <map> definiert die Map <area> definiert die verweissensitiven Bereiche ---> Verstehe Image-Maps erstmal
- Nennen und beschreiben Sie kurz die Tags zum Einbinden von Audio- und Videoressourcen sowie anderen Medienressourcen! <audio> - dient zum Einbinden von Audioressourcen- ermöglicht die Angabe einer Audioressource in mehreren Dateiformaten <video> - dient zum Einbinden von Videoressourcen- ermöglicht die Angabe einer Videoressource in mehreren Dateiformaten <source> - Element wird zwischen <audio></audio> (oder video) notiert- ermöglicht die Definition von mehreren Audio/Video-Ressourcen
- Wozu dient das iframe-Tag? Ermöglicht das Einbinden von anderen Webseitenz.B. YouTube-Video, GoogleMaps
- Schreiben Sie ein Formular mit einem einfachen Textfeld, einem Passwortfeld und einem Submit-Button! Die Zieladresse ist „login.php“ und die Daten sollen per „POST“ versendet werden. Test yourself
- Beschreiben Sie den Aufbau der Parameterkette bei der Übertragung der Formulardaten mit GET! GET HTTP-Methode, bei der die Formularinhalte getrennt durch "?" an den URL angehangenwerden. Die Formularinhalte selbst werden als Schlüssel/Wertpaare durch „&" getrennt,In der Statuszeile des Webbrowsers sieht man die übergebenen FormularinhalteGET ist default, d.h. wird method nicht angegeben, so wir automatisch per GET übertragen /test/demo_form.asp?name1=value1&name2=value2
- . Wie kann man Radiobuttons gruppieren? <input type="radio" value="rb3" name="rb3" /> RB_3<input type="radio" value="rb4" name="rb3" /> RB_4
- Nennen Sie wenigstens 5 weitere Formularelemente und geben Sie die entsprechenden Tags und minimal notwendigen Attribute an! Felder: <fieldset> style <legend> <input> type value name Comboboxen: <input>type name list <datalist> id<options> value Buttons: <input> <button> type=„submit“ type=„reset“ type=„button“ type=„file“ Schlüsselgenerierung: <keygen> keytype challenge Ausgabeerzeugung <output> for name from