11. Casual content
management
• Easily changing what’s on the page
• Using code to construct how it’s
presented
• Casual in that we’re not trying to
build enterprise systems
17. Stylesheets
• HTML • Selectors
#home { ... }
• CSS a.selected { ... }
input { ... }
• JavaScript • Properties
a { color: #ABB94A; }
• Media p { font-size: 1.5em; }
body {
margin: 30px;
text-align: center;
}
18. Scripting
• HTML • Flexible
• CSS • Powerful
• JavaScript • Kind of weird
• Media
19. Non-textual media
• HTML • Images
<img src="..." alt="..." />
• CSS • Audio
<audio src="...">...</audio>
• JavaScript
• Media • Video
<video src="...">...</video>
• Canvas
<canvas id="..."></canvas>
20. Back-end
• HTML Content management
is code that lets users
• CSS modify the HTML and
• JavaScript media parts of a page
through a simple
• Media interface
21. The big picture
• HTML presents data to the user
• Forms allow us to receive data from the user
• PHP constructs dynamic HTML and handles user-
submitted data
• WordPress is written in PHP
22. The bigger picture
• PHP runs in a web server (Apache) and
connects to a database (MySQL)
• MAMP (or XAMPP) is a convenient
package to run Apache, MySQL and
PHP
• A text editor (e.g., jEdit) is needed to
create and edit your files
31. Types of URLs
• Absolute http://phiffer.org/
• Relative ../images/title.png or css/style.css
• Host-absolute /images/title.jpg
• Hash link #top (<div id="top"></div>)
32. HTML & CSS references
• Don’t try to memorize, instead learn
how to find the information you need
• W3Schools
• Mozilla Developer Network
• Dive into HTML5