Archive for the ‘HTML Tutorials’ Category

Marking Up and Styling an Image Gallery

Tuesday, March 25th, 2008

While working on a new site (Rolling Horde), I decided to include a small image gallery. I randomly display four images from a flickr album in the sidebar.

The pictures are presented in the mark-up that flickr creates, and I used the styling that came with the template I was working from. It creates a simple two by two square of photos, with a slight gap in between them.

Although I like the way they are presented, I’m not sure I like the mark-up that flickr creates. What would be the simplest, semantic way to mark-up and style images in a small album like this?
(more…)

Flash Movies: Standards Compliant Embedding

Tuesday, March 18th, 2008

The other day, I was looking into using Picasa to create an image album and embed it as a slideshow on a website.

Uploading the images and creating the album was easy. However, I noticed that the code Google creates to embed the slideshow (a flash file) is not standards compliant - it uses the <embed> tag.

How can we convert this code to a standards compliant version?
(more…)

How to Spoof a Form, or Why Your Form Isn’t Safe

Monday, February 25th, 2008

Forms can create all kinds of security holes in PHP applications. The biggest reason for this is that you can never be sure just what kind of input you’ll be getting.

There are some steps you can take later on to protect your applications from this unknown input. But first, let’s take a look at why you can never trust a user’s input and just how easy it is for someone to spoof a form.
(more…)

RSS Feed: Building an RSS Data Feed in PHP with SimpleXML

Thursday, February 21st, 2008

RSS feeds are a must-have for modern websites. It’s easy enough to make an RSS feed of recent articles in PHP. But did you know an RSS feed can simply be information - not links to articles?

This article will look at how to build a basic feed of data - for our purposes, we’ll consider random quotes. It will also illustrate how to use SimpleXML to build the feed for us.
(more…)

JS Game: Making a Real Game Board from a Concept

Wednesday, February 20th, 2008

In a recent post, I sketched out how to use Javascript to build a gameboard for a browser-based game - specifically Tic Tac Toe. After a little tweaking, I’ve worked this into a functioning Tic Tac Toe board.

In this post, we’ll explore the code used to set up this board. Once that’s done, the next step will be to create a php script to evaluate some of the game’s logic.
(more…)

JS Game: Creating a Simple Game Board in Javascript

Tuesday, February 19th, 2008

A thorough knowledge of Javascript can give you tremendous control over what happens on a website. Combined with PHP through an AJAX request, you can make some pretty nifty browser-based games.

This tutorial will focus on the first part of making a basic board game - creating a board. The end result will be a three by three game board suitable for use in developing a tic-tac-toe game.
(more…)

How to Access XML Attributes in PHP Using SimpleXML

Friday, February 15th, 2008

A user on Programming Talk had a problem the other day. He was trying to build an XML parser to work with an xml data file (a character sheet from the WoW Armory).

His parser wasn’t working - because all of the information was stored in attributes instead of child elements. What’s the difference between the two? And how can we fix it?

Use SimpleXML.
(more…)

How to Alternate CSS Styles Using PHP

Wednesday, February 13th, 2008

There are a lot of situations in which you’d like to alternate CSS styles from one element to the next. Long tables, for example, look a lot nicer when the background color of the rows is alternated.

How do we do that? Some pretty simple PHP can help you accomplish this task and spice up your HTML/CSS.
(more…)

Use Attribute Selectors to Fine Tune Your CSS

Thursday, January 31st, 2008

Here’s a quick tip for fine tuning your CSS declarations.

You can use attribute selectors to style an html element that contains an attribute with the value that you declare. This allows you to do a bunch of cool stuff - like style different “input” types differently, style anchor tags with titles differently, and etc.
(more…)

How to Create a 3D Button Using CSS and a Gradient Image

Monday, January 28th, 2008

While I was browsing through dzone today, I stumbled on this 3d button css tutorial by Dave Woods.

Using some simple css and a little color know-how, he shows you how to turn a square button into a pseudo 3-dimensional button. I’ll take it a step further and add a gradient background image to enhance the lighting effect. Like this…
(more…)