home button

Übung 1: HTTP, URI und HTML

Web-Engineering Wintersemester 2022 - Marian Hönscheid

1.1. Fachliche Argumentation über Erfolgsprinzipien des WWW

  1. Mit welchen fachlichen Argumenten wurde das WWW-Proposal von TBL abgelehnt?
  2. Die Vagheit des Konzeptes wurde mit der Evolvierbarkeit verwechselt.

    Broken-Links sind Vermeidbar (Referenzielle Integrität)

  3. Was sind die fachlichen Argumente, warum das WWW dennoch ein Erfolg wurde?
  4. Offenheit (Web Technologien können sich unabhänig von einander weiterentwickeln)

    Dezentralität

  5. Was wäre der Preis für die garantierte Verhinderung von “broken links”?
  6. Webseiten die noch Referenziert sind (verlinkt) können nicht gelöscht werden.

    Die Überprüfung kostet Zeit und Bandpeite.

    Ein (zentrales) Management-System muss die Einhaltung der Refeneziellen Intigrität erzwingen.

1.2. HTTP

  1. Sie bekommen im Browser den HTTP Status Code 200. Was bedeutet das?
  2. OK - Die Anfrage war erfogreich.
  3. Sie bekommen im Browser den HTTP Status Code 301. Was hat das zu bedeuten?
  4. Moved Permanently - Die URL der angefragten Ressource hat sich geändert.
  5. Sie bekommen im Browser den HTTP Status Code 400. Was hat das zu bedeuten? Was können Sie dagegen tun?
  6. Bad Request - Die Anfrage wird aufgrund eines Fehlers in der Anfrage nicht beantwortet.
  7. Sie bekommen im Browser den HTTP Status Code 403. Was hat das zu bedeuten? Was können Sie dagegen tun?
  8. Forbidden - Der Anfragende hat nicht ausreichend Rechte um auf die Ressource zuzugreifen.
    Mit einer anderen Identität auf die Ressource zugreifen.
  9. In einer Webanwendung benötigen Sie eine OPTIONS-Anfrage, die die Optionen des Servers vor dem eigentlichen Zugriff erfragen soll. Aus Performanzgründen soll die Abfrage jedoch cacheable sein. Wie könnten Sie dafür eine Lösung angehen?
  10. Ich könnte die Antwort des Servers im Browser Cache hinterlegen.

1.3. HTML-Literatur lesen und Fragen beantworten

  1. Was ist HTML?
  2. HyperText Markup Language - ist die standard Sprache die zur Beschreibung von Inhalten auf Webseiten genutzt wird.
  3. Wie kann man eine geschachtelte geordnete Liste der Schachtelungstiefe 3 erzeugen?
  4. HTML Beispiel:
    <ol>
        <li>Erste Ebene
            <ol>
                <li>Zweite Ebene
                    <ol>
                        <li>Dritte Ebene</li>
                    </ol>
                </li>
            </ol>
        </li>
    </ol>
    HTML Output:

    1. Erste Ebene
      1. Zweite Ebene
        1. Dritte Ebene

  5. Wie ist eine HTML-Tabelle aufgebaut?
  6. Begonnen wird mit dem <table> Tag, optional gefolgt vom <thead> in diesem Bereich kann die Kopfzeile der Tabelle definiert werden:
    <table>
        <thead> 
            <tr>
                <th>Spalte 1</th>
                <th>Spalte 2</th>
            </tr>    
        </thead>
    Daraufhin folgt der Body der Tabelle:
        <tbody>
            <tr>
                <td>1. Zeile, 1. Spalte</td>
                <td>1. Zeile, 2. Spalte</td>
            </tr>
            <tr>
                <td>2. Zeile, 1. Spalte</td>
                <td>2. Zeile, 2. Spalte</td>
            </tr>
        </tbody>
    Optional kann hier auch ein Table Footer eingefügt werden.
    </table>
  7. Welche Konventionen sollte man bei Pfaden und Dateinamen beachten?
  8. Die Startseite wird index.html genannt. Es sollten keine Umlaute oder Sonderzeichen ausßer "-" & "_" verwendet werden.
  9. Wie baut man in HTML ein Menü?
  10. Der <menu> Tag wird genau so behandelt wie der <ul> Tag für unsorierte Listen.
  11. Welche Attribute sollte man bei Bildern wie verwenden?
  12. src="pic.png" - wird genutzt um die Bilddatei zu referenzieren.

    alt="Lorem Ipsum" - wird genutzt um die Bilddatei zu berschreiben.

    width="512" - wird genutzt um die Anzeigebreite der Bilddatei zu definieren.

    height="512" - wird genutzt um die Anzeigehöhe der Bilddatei zu definieren.

1.4. HTML

Wireframe Gegeben ist folgendes HTML-Wireframe:

Mit welchem HTML-Code (ohne CSS, nur mit HTML-Tags) kann man diesen Wireframe exakt nachbilden?

Hier finden Sie einen Nachbau des Wireframes

Zurück