The web context

The web context
Fast, Easy, Complicated, and Powerful Web
ITP, Spring 2011, section 1, session 1
Dan Phiffer dan@phiffer.org

Fast, Easy, Complicated, and Powerful Web

Fast, Easy, Complicated...

• Casual content management in general
• WordPress development in particular
• One major project
• In six sessions

Six sessions

• 1 week PHP overview
• 4 weeks WordPress development
• Project presentations

Projects

• Warm-up PHP exercise
• WordPress child theme
• WordPress theme from scratch
• Final project

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

The web is made out
of text

What parts contribute
to a web page?

• HTML
• CSS
• JavaScript
• Media

Markup

• HTML • Tags
<div>...</div>

• CSS <span>...</span>

• JavaScript • Attributes
<p id="intro">...</p>
<a href="home.html">...</a>
• Media
• Content
<h1>oh hai</h1>
<img src="pong.gif" alt="" />

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;
}

Scripting

• HTML • Flexible
• CSS • Powerful
• JavaScript • Kind of weird
• Media

Non-textual media

• HTML • Images
<img src="..." alt="..." />

• CSS • Audio
<audio src="...">...</audio>
• JavaScript
• Media • Video
<video src="...">...</video>

• Canvas
<canvas id="..."></canvas>

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

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

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

The minimal web page

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type"
content="text/html; charset=utf-8" />
<title>Untitled</title>
</head>
<body>
(Empty page)
</body>
</html>

Add some content

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<?php echo "Hello, world!"; ?>
</body>
</html>

External CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<style>
body { font: 72px palatino, serif; }
</style>
</head>
<body style="margin: 20px;">
</body>
</html>

Embedded CSS
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
</body>
</html>

Inline CSS
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
</body>
</html>

Add an image
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<img src="images/penguins.gif" alt="Let's begin!" />
</body>
</html>

Anchor links
<a href="page.html">Hello</a>

• The href attribute defines where the
link goes (to page.html)

• The content between tags (“hello”)
determines what is clickable

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>)

HTML & CSS references

• Don’t try to memorize, instead learn
how to find the information you need

• W3Schools
• Mozilla Developer Network
• Dive into HTML5

The web context

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à The web context

Similaire à The web context (20)

Plus de Dan Phiffer

Plus de Dan Phiffer (7)

Dernier

Dernier (20)

The web context