Advanced Web Basics

Aufgabe 1 Erstellen Sie ein neues HTML-Dokument mit dem folgenden Inhalt: <!doctype html> <html> <head> <meta charset=“utf-8″ /> <title>Ein Zahlenratespiel mit JavaScript und jQuery</title> <link type=“text/css“ rel=“stylesheet“ media=“screen“ href=“css/style.css“ /> </head> <body> <div id=“block1″></div> <div id=“block2″></div> <div id=“block3″></div> <div id=“steuern_rot“>Roten Block verstecken</div> <div id=“steuern_gruen“>Grünen Block langsam ausblenden</div> <div id=“steuern_blau“>Blauen Block anzeigen</div> <div id=“ratespiel“> Raten Sie…

Read More Übungsaufgaben „Ein Ratespiel mit JavaScript und jQuery“

Aufgabe 1 – Metainformationen Ergänzen Sie Ihre Website um Metainformationen (Autor, Beschreibung, Schlüsselwörter). Aufgabe 2 – Seitenhintergrund Verwenden Sie eine Rastergraphik (*.jpg, *.png) als Hintergrund Ihrer Website. Aufgabe 3 – Logo Erstellen Sie ein eigenes Logo. Lassen Sie Ihr Logo im Kopfbereich Ihrer Website darstellen. Geben Sie dem Kopfbereich eine Hintergrundfarbe. Aufgabe 4 – Navigationsleiste…

Read More Meilenstein I – HTML und CSS

Mit den folgenden zusätzlichen CSS-Selektoren und -Anweisungen erstrahlt unsere Homepage in zweispaltigem Glanz: #logo { width: 50px; padding: 13px 25px 5px 15px; } #content { background-color: #ccc; /* dieselbe Farbe wie die rechte Seitenleiste */ overflow: hidden; } main { width: 70%; float: left; background-color: #ddd; height: 100%; padding-bottom: 50px; } aside { width: 30%;…

Read More Vervollständigung des zweispaltigen Layouts

index.htm <!DOCTYPE html> <html> <head> <meta charset=“utf-8″> <title></title> <link rel=“stylesheet“ href=“css/style.css“> </head> <body> <div id=“page“> <header> <img id=“logo“ src=“img/logo.png“ alt=“Brand / Logo“> <nav id=“topnavigation“> <ul> <li>Listenelement 1</li> <li>Listenelement 2</li> </ul> </nav> </header> <div id=“content“> <div class=“teaserimage“> <div class=“imagedescription“>Teasertext</div> <img src=““> </div> <main> <article></article> </main> <aside></aside> </div> <footer>&copy;</footer> </div> </body> </html> style.css /* Stildefinitionen für ein…

Read More Stand der Dinge am Ende der Sitzung zu zweispaltigen Layouts

HTML5 und CSS Einen guten Einstieg in HTML5 und CSS bieten die W3Schools (http://www.w3schools.com) und code.makery (http://code.makery.ch/paths/web-app/). Als Kurzreferenz sind die beiden Bände aus der „kurz & gut“ Reihe von O’Reilly gut geeignet: Robbins, Jennifer (2014): HTML5 – kurz & gut Meyer, Eric (2011): CSS – kurz & gut Einen detaillierten Überblick über HTML5 und…

Read More Literaturtipps zu HTML, CSS, JavaScript, jQuery und PHP

Wenn der Browser das HTML-Dokument mal wieder etwas anderes darstellt als erwartet, helfen die Entwicklertools weiter. Vorhanden in jedem aktuellen Browser, lassen sich die Entwicklertools mit einem Rechtsklick und „Element untersuchen“ starten; alternativ – und schneller – öffnen sich die Entwicklertools mit der Taste F12. Warum die Werkzeuge in der täglichen Arbeit mit HTML, CSS…

Read More Entwicklertools im Browser

Die Homepage der „Zeit“ bietet ein schönes Beispiel für ein zweispaltiges Layout: Aufgabe 1 Schauen Sie sich bitte den Webauftritt der „Zeit“ an und erstellen Sie eine schematische Darstellung der Homepage auf einem Blatt Papier. Überlegen Sie, welche semantischen HTML5-Elemente dazu dienen könnten, die einzelnen Seitenbereiche vorzusehen bzw. auszuzeichnen. Tipp: http://www.w3schools.com/html/html5_semantic_elements.asp. Aufgabe 2 Erstellen Sie…

Read More Startaufgaben – Zweispaltige Layouts mit float

Stildefinitionen in css/style.css body { font-family: Comic Sans MS; background-color: pink; color: brown; width: 1000px; margin-left: auto; margin-right: auto; } header { height: 100px; background-color: teal; padding: 25px; } nav { background-color: yellow; padding: 15px; } main { background-color: white; padding: 25px; } footer { padding: 25px; background-color: lightblue; text-align: center; } /* Kurzschreibweise */…

Read More Beispiellösung der Hausaufgabe zum 09.11.2015 – Einspaltiges Layout