Grenzen Sie Auszeichnungssprache und Programmiersprache voneinander ab!
- Eine Programmiersprache unterscheidet sich von einer reinen Auszeichnungssprache (auch Markup-Sprache genannt) durch die Elemente von Sequenz, Iteration und Auswahl.
- Mit Auszeichnungssprachen werden Dokumente erzeugt, mit Programmiersprachen Scripts oder Programme.
- Dokumente von Markup-Sprachen werden von einem Parser gelesen, der die Dokumentstruktur analysiert, während Scripts oder Programme als eine Folge von Anweisungen abgearbeitet werden, sei es von einem Interpreter oder vom Betriebssystem.
Tags: HTML
Quelle:
Quelle:
Welche Funktion hat eine Dokumentyp-Deklaration (Doctype) in HTML5?
- Die Dokumenttyp-Deklaration bestimmt, welche Auszeichnungssprache in welcher Version verwendet wird.
- Im neuen HTML5 Standard wird keine DTD benötigt! Trotzdem muss vereinfachte Doctype Deklaration verwendet werden, damit Dokumente im Browserstandardkonform dargestellt werden.
- Die Syntax eines HTML / XHTML Dokuments wird durch ihre Spezifikation (DTD) definiert.
Tags: HTML
Quelle:
Quelle:
Nennen Sie 5 semantische Elemente in HTML5 und erläutern Sie deren Zweck!
| <nav> | Navigation (nur einmal!) |
| <section> | Sinnabschnitt (Content) |
| <header> | Kopfbereich |
| <footer> | Fußbereich |
| <aside> | Sidebar (mit ergänzenden Inhalten) |
| <article> | Artikel, der für sich alleine steht |
| <time> | Datum |
Tags: HTML
Quelle:
Quelle:
Welche Unterschiede gibt es zwischen HTML4, XHTML, HTML5?
- Die Entwicklung von HTML 4.01 wurde bereits 1999 eingestellt. (SGML-basiert)
- XHTML ist ein HTML-Dokument im XML-Standart und eine XML-basierte Neuformulierung von HTML 4.01. Die Entwicklung von XHTML Version 2.0 wurde zugunsten von HTML 5 eingestellt.
- HTML5 wird direkt aus HTML 4.01 entwickelt und enthalt vielfältige neue Funktionalitäten wie z.B. Video, Audio, lokalen Speicher und dynamische 2D- und 3D-Grafiken.
Tags: HTML
Quelle:
Quelle:
In welche zwei Kategorien kann man HTML Tags einordnen?
Erklären Sie den Unterschied zwischen ihnen und nennen Sie jeweils ein Beispielelement!
Erklären Sie den Unterschied zwischen ihnen und nennen Sie jeweils ein Beispielelement!
- Ein Block-Element erzeugt im Gegensatz zu einem Inline-Element einen Absatz im Textfluss und können als übergeordnetes Elemente für untergeordnete Inline-Elemente angesehen werden. Block-Elemente können selber entweder Text oder weitere Inline-Elemente enthalten, einige Block-Elemente können wiederum andere Block-Elemente enthalten.
- Inline-Elemente erzeugen im Gegensatz zu einem Block-Element keinen eigenen Absatz im Textfluss und können als untergeordnete Elemente für das übergeordnete Block-Element angesehen werden. Inline-Elemente können selber entweder Text oder weitere Inline-Elemente enthalten, jedoch in den meisten Fällen keine Block-Elemente.
Was eine Inline-Element und was ein Block-Element darstellt, ist im DTD (Document Type Definition) hinterlegt.
- Typische Blockelemente sind z.B.: <h1> ... <h6>, <header>, <p>, <article>
- Typische Inline-Elemente sind z.B.: <strong>, <em>, <img>, <style>
Tags: HTML
Quelle: http://html5-webdesign.de/Html_5.html
Quelle: http://html5-webdesign.de/Html_5.html
Erstellen Sie eine nummerierte Liste in HTML mit 2 Elementen!
<html>
<head>
<title>Nummerierte Liste definieren</title>
</head>
<body>
<h1>Listenüberschrift</h1>
<ol>
<li>Element Nummer 1</li>
<li>Element Nummer 2</li>
</ol>
</body>
</html>
Erklärung:
<ol> leitet eine nummerierte Liste ein (ol = ordered list = nummerierte Liste).
Mit <li> beginnt ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag).
</li> beendet den Listeneintrag.
</ol> beendet die Liste.
<head>
<title>Nummerierte Liste definieren</title>
</head>
<body>
<h1>Listenüberschrift</h1>
<ol>
<li>Element Nummer 1</li>
<li>Element Nummer 2</li>
</ol>
</body>
</html>
Erklärung:
<ol> leitet eine nummerierte Liste ein (ol = ordered list = nummerierte Liste).
Mit <li> beginnt ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag).
</li> beendet den Listeneintrag.
</ol> beendet die Liste.
Tags: HTML
Quelle: http://de.selfhtml.org/html/text/listen.htm
Quelle: http://de.selfhtml.org/html/text/listen.htm
Erstellen sie eine Tabelle in HTML mit 4 Einträgen!
<table>
<tr> → table-row
<td> 1 </td> → table-data
<td> 2 </td>
</tr>
<tr>
<td> 3 </td>
<td> 4 </td>
<tr>
</table>
<tr> → table-row
<td> 1 </td> → table-data
<td> 2 </td>
</tr>
<tr>
<td> 3 </td>
<td> 4 </td>
<tr>
</table>
Tags: HTML
Quelle:
Quelle:
Tags: CSS
Quelle: http://de.wikibooks.org/wiki/Websiteentwicklung:_CSS:_Box-Modell
Quelle: http://de.wikibooks.org/wiki/Websiteentwicklung:_CSS:_Box-Modell
Wie kennzeichnet man Kommentare in einer Style-Sheet Datei?
/* Beispiel für
einen Kommentar */
einen Kommentar */
Tags: CSS
Quelle:
Quelle:
Was bedeuten folgende Begriffe:
Selektor, Deklaration, Deklarationsblock, Eigenschaft und Wert?
Selektor, Deklaration, Deklarationsblock, Eigenschaft und Wert?
CSS-Regel
Beispiel:
p { color: red; background: black; max-width: 23em; }
Beispiel:
p { color: red; background: black; max-width: 23em; }
| Selektor | p |
| Deklaration | color:red |
| Deklarationsblock | Inhalt der geschweiften Klammern |
| Eigenschaft | background |
| Wert | black |
Es liegt folgender Ausschnitt einer CSS-Datei vor:
body { background: red; }
div { width: 200px; height: 200px; }
div { background: yellow; background: green; }
body > div { background: blue; }
Welche Hintergrundfarbe hat der div-Container?
body { background: red; }
div { width: 200px; height: 200px; }
div { background: yellow; background: green; }
body > div { background: blue; }
Welche Hintergrundfarbe hat der div-Container?
Der div-Container hat die Hintergrundfarbe blau.
(der body hat die Hintergrundfarbe rot)
(der body hat die Hintergrundfarbe rot)
Tags: CSS
Quelle:
Quelle:
Tags: CSS
Quelle:
Quelle:
Gegeben ist das folgende HTML-Codefragment:
<div class = "menu">
<ul>
<li> Hallo </li>
<li> Welt! </li>
</ul>
Aufgabe: Der Text soll grün und 14px groß sein!
<div class = "menu">
<ul>
<li> Hallo </li>
<li> Welt! </li>
</ul>
Aufgabe: Der Text soll grün und 14px groß sein!
<style>
li { color:green ;
font-size: 14px ; }
</style>
(anstelle von li auch .menu möglich!)
li { color:green ;
font-size: 14px ; }
</style>
(anstelle von li auch .menu möglich!)
Tags: CSS
Quelle:
Quelle:
Gegeben ist das folgende HTML-Codefragment:
<div class = "menu">
<ul>
<li> Hallo </li>
<li> Welt! </li>
</ul>
Aufgabe: Die Farbe soll bei Berührung des Containers rot werden! (Pseudoklassen)
<div class = "menu">
<ul>
<li> Hallo </li>
<li> Welt! </li>
</ul>
Aufgabe: Die Farbe soll bei Berührung des Containers rot werden! (Pseudoklassen)
<style>
div.menu : hover { color : red }
</style>
div.menu : hover { color : red }
</style>
Tags: CSS
Quelle:
Quelle:
Nennen Sie mindestens drei Regeln für Wohlgeformtheit von XML-Dokumenten!
Ein XML-Dokument heißt wohlgeformt, wenn es alle XML-Regeln einhält.
Beispiele:
Beispiele:
- Das Dokument besitzt genau ein Wurzelelement. Als Wurzelelement wird dabei das jeweils äußerste Element bezeichnet, z. B. <html> in XHTML.
- Alle Elemente mit Inhalt besitzen einen Beginn- und einen End-Auszeichner (-Tag) (z. B. <eintrag>Eintrag 1</eintrag>). Elemente ohne Inhalt können auch in sich geschlossen sein, wenn sie aus nur einem Auszeichner bestehen, der mit /> abschließt (z. B. <eintrag />).
- Die Beginn- und End-Auszeichner sind ebenentreu-paarig verschachtelt. Das bedeutet, dass alle Elemente geschlossen werden müssen, bevor die End-Auszeichner des entsprechenden Elternelements oder die Beginn-Auszeichner eines Geschwisterelements erscheinen.
- Ein Element darf nicht mehrere Attribute mit demselben Namen besitzen.
- Attributeigenschaften müssen in Anführungszeichen stehen.
- Die Beginn- und End-Auszeichner beachten die Groß- und Kleinschreibung (z. B. <eintrag></Eintrag> ist nicht gültig)
Wann wird ein XML-Dokument als valide bezeichnet?
Ein XML-Dokument heißt valid (gültig), wenn es wohlgeformt ist und zusätzlich den Regeln (die die Grammatik vorgibt) einer DTD genügt.
Tags: XML
Quelle:
Quelle:
Gegeben ist folgendes DTD Element:
<!ELEMENT Auto(Reifen+,Fenster*,Dach?,Fahrer)>
Was ist zulässig und/oder notwendig?
<!ELEMENT Auto(Reifen+,Fenster*,Dach?,Fahrer)>
Was ist zulässig und/oder notwendig?
- Es muss mindestens ein Reifen vorhanden sein
- Die Anzahl der Fenster ist unbeschränkt
- Cabrios sind zulässig (Autos ohne Dach)
- Es muss genau einen Fahrer geben
Tags: XML
Quelle:
Quelle:
Nennen Sie die Kardinalitäten in einem DTD-Element!
| + | einmal oder beliebig oft |
| ? | kein- oder einmal |
| * | keinmal oder beliebig oft |
| (ohne Angabe) | genau einmal |
Tags: XML
Quelle:
Quelle:
Schreiben Sie das folgende DTD Element minimal in XML um!
<!ELEMENT Auto(Reifen+,Fenster*,Dach?,Fahrer)>
<!ELEMENT Auto(Reifen+,Fenster*,Dach?,Fahrer)>
<?xmlversion="1.0"?>
<Auto>
<Reifen/>
<Fahrer/>
</Auto>
<Auto>
<Reifen/>
<Fahrer/>
</Auto>
Tags: XML
Quelle:
Quelle:
Welche Bedeutung hat ein CDATA-Abschnitt im XML-Dokument?
Mit einem CDATA-Abschnitt wird einem Parser mitgeteilt, dass kein Markup folgt, sondern normaler Text. Der CDATA-Abschnitt hat folgende Form:
<![CDATA[Inhalt]]>
Der CDATA-Abschnitt kann Markup-Zeichen (<, > und &) enthalten. Diese werden vom Parser nicht weiter interpretiert.
<![CDATA[Inhalt]]>
Der CDATA-Abschnitt kann Markup-Zeichen (<, > und &) enthalten. Diese werden vom Parser nicht weiter interpretiert.
Tags: XML
Quelle: http://de.wikipedia.org/wiki/CDATA
Quelle: http://de.wikipedia.org/wiki/CDATA
Was unterscheidet XML-Schema gegenüber DTDs?
- Wie ein DTD kann das Schema die Struktur eines XML Dokuments beschreiben
- Schemas nutzen XML Syntax und können somit auch geparst werden
- Ein XML Dokument kann mit mehreren Schemas verknüpft werden
- Alle aus modernen Programmiersprachen bekannte Typen stehen sowohl für Elemente als auch für Attribute zur Verfügung
- Namensräume werden unterstützt (nicht bei DTDs)
- Schemas erlauben globale Elemente oder Gruppen von Elementen, indem alle Elemente genau z. B. einmal enthalten sein müssen (all), die Elemente mindestens einmal, aber auch öfter auftreten können (sequence) oder einer Auswahl aus mehreren Möglichkeiten (choice). Sowie auch lokale Elemente (Elemente, die eine spezielle Bedeutung im Kontext erhalten
- Die möglichen Inhaltsmodelle erlauben eine wesentlich präzisere Beschreibung
- Mächtiger als DTD, aber auch komplexer
Tags: XML
Quelle:
Quelle:
Wofür verwendet man in einer DTD #REQUIRED, #FIXED und #IMPLIED?
- Bei Attributen, die man in einer DTD zu einem Elementtyp definieren, muss man stets angeben, ob das Attribut in dem Element vorkommen muss oder vorkommen kann.
Beispiel (1):
<!ELEMENT ressourcen (ressource)*>
<!ELEMENT ressource (#PCDATA)>
<!ATTLIST ressource
url CDATA #REQUIRED
sprache CDATA #IMPLIED
erfasst CDATA #REQUIRED
geaendert CDATA #IMPLIED
>
Das Beispiel definiert als Inhalt für den Dokument-Elementtyp ressourcen einen Elementtyp namens ressource. Zu diesem Elementtyp werden vier Attribute definiert. Zwei dieser vier Attribute, nämlich die mit den Namen url und erfasst, müssen bei der Anwendung des Elementtyps notiert werden. Die beiden anderen, sprache und geaendert, können notiert werden. Notwendige Attribute kennzeichnen Sie durch den Schlüsselbezeichner #REQUIRED, und optionale Attribute durch #IMPLIED. Beide Angaben müssen jeweils am Ende einer Attribut-Definition stehen.
Für alle vier Attribute im Beispiel wird festgelegt, dass der zugewiesene Wert aus Zeichendaten besteht. Dies wird durch das Schlüsselwort CDATA kenntlich gemacht.
- Es gibt auch die Möglichkeit, für ein Attribut eine bestimmte Wertzuweisung zu erzwingen. Dazu notieret man (Beispiel 2):
typ (hotel | motel) #FIXED "hotel"
Durch die Angabe #FIXED erreicht man, dass an das Attribut typ keine andere Wertzuweisung als hotel möglich ist, obwohl noch eine andere Möglichkeit definiert ist. Solche Konstrukte können sinnvoll sein, wenn ein Attribut zu einem späteren Zeitpunkt noch andere Werte aufnehmen können, aber schon mal "etabliert" werden soll.
Tags: XML
Quelle: http://de.selfhtml.org/xml/dtd/attribute.htm
Quelle: http://de.selfhtml.org/xml/dtd/attribute.htm
Was ist AJAX? Erklären Sie kurz die Funktionsweise!
= Asynchronous JavaScript and XML
Konzept der asynchronen Datenübertragung zwischen Browser und Server.
Konzept der asynchronen Datenübertragung zwischen Browser und Server.
- Inhalte werden nachgeladen und in die Webseite dynamisch integriert
- HTTP-Anfragen werden durchgeführt, während HTML-Seite angezeigt wird
- Seite wird verändert, ohne sie komplett neu zu laden (kein Page-Reload)
Tags: AJAX, JavaScript
Quelle:
Quelle:
Für welche Art von Daten eignet sich HTTP?
Das Hypertext Transfer Protocol eignet sich für den Austausch von Daten beliebiger Formate zwischen Client und Server.
Soll ein HTML-Dokument in einen Browser geladen werden, sendet der Browser (bzw. der Client) eine HTTP-Anfrage an den Web-Server.
Soll ein HTML-Dokument in einen Browser geladen werden, sendet der Browser (bzw. der Client) eine HTTP-Anfrage an den Web-Server.
Tags: HTTP, WWW
Quelle:
Quelle:
Welche Schritte beinhaltet eine HTTP Transaktion?
Eine HTTP Transaktion erfolgt in 4 Schritten:
(HTTP basiert auf dem Request-Response-Paradigma – der HTTP-Server liefert nur eine Antwort, wenn der Client vorher eine Anfrage gesendet hat.)
- Client baut TCP-Verbindung zum Server auf
- Client sendet HTTP-Request (Anfrage) zum Server
- Server schickt einen HTTP-Response (Antwort) zum Client
- Server baut die Verbindung wieder ab
(HTTP basiert auf dem Request-Response-Paradigma – der HTTP-Server liefert nur eine Antwort, wenn der Client vorher eine Anfrage gesendet hat.)
Tags: HTTP, WWW
Quelle:
Quelle:
Skizzieren Sie die Verwendung semantischer HTML 5 Elemente eines Blog oder News-Eintrags. Verwenden Sie hierbei eine Überschrift, das Datum, den Inhalt des Artikels, sowie Links zu Kommentaren!
<article>
<header>
<h1>Titel des ersten Artikels</h1>
</header>
<p>Dies ist ein erster Beispielartikel im
Beispielblog. Sein einziger und
ausschließlicher Sinn ist es, nun ja, ein
Beispielartikel zu sein. Mehr nicht. Keine wirklich
schwere Aufgabe.</p>
<footer>
<p>Geschrieben am
<time datetime="2014-08-01T21:02+01:00"
pubdate="pubdate">
02. August 2014 um 13:37
</time> Uhr von Autor.
<a href="...">Kommentare</a>
</p>
</footer>
</article>
<header>
<h1>Titel des ersten Artikels</h1>
</header>
<p>Dies ist ein erster Beispielartikel im
Beispielblog. Sein einziger und
ausschließlicher Sinn ist es, nun ja, ein
Beispielartikel zu sein. Mehr nicht. Keine wirklich
schwere Aufgabe.</p>
<footer>
<p>Geschrieben am
<time datetime="2014-08-01T21:02+01:00"
pubdate="pubdate">
02. August 2014 um 13:37
</time> Uhr von Autor.
<a href="...">Kommentare</a>
</p>
</footer>
</article>
Tags: HTML
Quelle:
Quelle:
Nennen Sie jeweils einen Vorteil, den XML gegenüber JSON bietet und JSON gegenüber XML!
| Vergleich | JSON | XML |
| JavaScript Object Notation | Extensible Markup Language | |
| JSON ist ein kompaktes und schlankes Datenaustauschformat, welches in JavaScript geschrieben ist. Dient dem Informationsaustausch zwischen Anwendungen | XML ist eine Auszeichnungssprache zur Darstellung hierarchisch strukturierter Daten in Form von Textdateien. Dient dem Informationsaustausch zwischen Anwendungen | |
| Vorteile | 1)Kompakt, auf’ wesentliche reduzierte Syntax. 2)Datenvolum rel. gering. 3)JSON ist reines JavaScript (Syntax). 4)Kann direkt ausgeführt werden und in JavaScript Objekt gewandelt werden. 5)Unkomplizierte serverseitige Verarbeitung möglich. 6)Leichtgewichtiges Mittel zum strukturierten Datenaustausch. | 1)Einfache Lesbarkeit. 2)Weit verbreitet (Hat sich als Standard-Austauschformat etabliert). 3)Übertragung von Metadaten per XML sehr komfortabel, was Austausch mit Dritten vereinfacht. 4)erweiterbar. |
| Nachteile | 1)Schlechte Möglichkeiten, Metadaten und Kommentare zu integrieren. 2)wenig verbreitet. 3)nicht erweiterbar. | 1)Komplexe Syntax. 2)Enthält oft unnötigen Ballast, der für reinen Datenaustausch nicht notwendig ist. 3)Muss geparst werden (XML-Paser) um in JavaScript Objekte gefasst zu werden (rel.zweitaufwendig). 4)Datenvolumen rel. hoch. |
Tags: JSON, XML
Quelle:
Quelle:
Gegeben sei folgende DTD, gespeichert in der Datei "squeaker.dtd":
<?xml version="1.0" encoding="UTF-8"?>
<!ELEMENT nachrichten (nachricht+)>
<!ELEMENT nachricht (inhalt)>
<!ELEMENT inhalt (#PCDATA)>
<!ATTLIST nachricht author CDATA #IMPLIED>
Schreiben Sie die kürzest mögliche XML-Datei, welche nach der DTD noch valide ist.
<?xml version="1.0" encoding="UTF-8"?>
<!ELEMENT nachrichten (nachricht+)>
<!ELEMENT nachricht (inhalt)>
<!ELEMENT inhalt (#PCDATA)>
<!ATTLIST nachricht author CDATA #IMPLIED>
Schreiben Sie die kürzest mögliche XML-Datei, welche nach der DTD noch valide ist.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE nachrichten SYSTEM "squeaker.dtd">
<nachrichten>
<nachricht><inhalt/></nachricht>
</nachrichten>
<!DOCTYPE nachrichten SYSTEM "squeaker.dtd">
<nachrichten>
<nachricht><inhalt/></nachricht>
</nachrichten>
Tags: XML
Quelle:
Quelle:
Auf welche Arten kann JavaScript in ein HTML-Dokument eingebunden werden?
JavaScript kann auf folgende Arten in ein HTML-Dokument eingebunden werden:
- Innerhalb eines <script> - Tags
- Als externe JavaScript Datei
- Als Attributwert von Event Handlern
- Als Wert von Attributen, die normalerweise URLs erwarten
Tags: JavaScript
Quelle:
Quelle:
Kartensatzinfo:
Autor: SteamChris
Oberthema: Wirtschaftsinformatik
Thema: Web-Techniken
Schule / Uni: Universität Leipzig
Ort: Leipzig
Veröffentlicht: 01.08.2014
Tags: Web-Techniken I, Franczyk
