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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie The web context

Ähnlich wie The web context (20)

Mehr von Dan Phiffer

Mehr von Dan Phiffer (7)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

The web context