HTML

by

Download als zip-Archiv (316KB) index.html <!DOCTYPE html> <html ng-app=“memoryGame“> <head> <title>Tic Tac Toe mit AngularJS</title> <meta charset=“utf-8″> <meta name=“keywords“ content=“Tic Tac Toe“> <meta name=“author“ content=“Jan Wieners | www.lehre.jan-wieners.de/“> <meta name=“description“ content=“Ein in JavaScript und AngularJS implementiertes Tic Tac Toe Spiel“> <link type=“text/css“ rel=“stylesheet“ media=“screen“ href=“css/style.css“ /> </head> <body ng-controller=“gameCtrl“> <div id=“gameBoard“> <div id=“messages“> {{ message…

Read More Quellcodes „Tic Tac Toe mit AngularJS“
by 0 comments on "Ein Adventskalender mit HTML, CSS, JavaScript und jQuery"

Für einen basalen Adventskalender braucht’s ein wenig Markup, ein paar Stildefinitionen – und ein paar Zeilen Code: index.htm <!DOCTYPE html> <html lang=“de“> <head> <meta charset=“UTF-8″> <title>Weihnachtskalender</title> <link rel=“stylesheet“ href=“css/style.css“ type=“text/css“> </head> <body> <div id=“kalender“></div> <script src=“js/jquery.min.js“></script> <script src=“js/app.js“></script> </body> </html> style.css #kalender { width: 1400px; margin-left: auto; margin-right: auto; margin-top: 50px; text-align: center; } body…

Read More Ein Adventskalender mit HTML, CSS, JavaScript und jQuery
by 0 comments on "Meilenstein I – HTML und CSS"

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
by 0 comments on "Stand der Dinge am Ende der Sitzung zu 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
by 0 comments on "Literaturtipps zu HTML, CSS, JavaScript, jQuery und PHP"

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
by 0 comments on "Startaufgaben – Zweispaltige Layouts mit float"

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
by 0 comments on "Beispiellösung der Hausaufgabe zum 09.11.2015 – Einspaltiges Layout"

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
by 0 comments on "Lösungen zur Sitzung „Fullscreen-Designs und Google Fonts“"

Index.htm <!DOCTYPE html> <html> <head> <meta charset=“utf-8″> <title>Endlich Montag!</title> <link rel=“stylesheet“ href=“css/style.css“> </head> <body> <div id=“heading“> Quokkas – Die freundlichsten Tiere wo geben tut! </div> </body> </html> Style.css @import url(https://fonts.googleapis.com/css?family=Amatic+SC); html, body { margin: 0; padding: 0; width: 100%; height: 100%; } body { background-image: url(„../img/bgr.jpg“); background-position: left top; background-repeat: no-repeat; background-size: cover; /* CSS…

Read More Lösungen zur Sitzung „Fullscreen-Designs und Google Fonts“