Captioned Images In XHTML

Captioned Image Example Screenshot While there are many possible different methods for captioning an image, the solution I prefer in XHTML is to place the image in a definition list. This makes the most sense semantically – the image is the item we are defining, while the definition term is the caption – and is the most flexible in terms of markup. Note that the approach in HTML5 is very different, the latter language having markup explicitly designed for the purpose of captioning images.

A typical XHTML code example would be:

<dl id=”captioned-image”>
<dt><img src=”khufu-pyramid.jpg” alt=”Great Pyramid of Giza”
title=”Great Pyramid of Giza” style=”width:492px; height: 345px;” /></dt>
<dd>The Great Pyramid of Giza, completed ~ 2560 BCE</dd>
</dl>

While this accomplishes our goal of a captioned image, it doesn’t look terribly good. First, let’s put a border on the definition list:

dl#captioned-image { border: 1px solid black; }

Note that this border makes it clear that our definition list takes up the entire horizontal space of our web page, which makes sense, as <dl> is a block tag. The height of the <dl> is determined by the content inside the list. Now let’s float it:

dl#captioned-image { border: 1px solid black; float: right; }

Note that when we float a block element it essentially collapses: now the width of our definition list is determined by the widest element it contains (the image).

We’ll add a little padding, margin-left and background-color; you could also remove the border at this stage:

dl#captioned-image { border: 1px solid black; float: right; padding: 1em;
margin-left: 1em; background-color: #ffc; }

The <dt> content is indented because that is the default for that element, just as it is for <li> elements, so let’s remove that with a separate style declaration:

dl#captioned-image dd { padding-left: 0; }

At the same time, we’ll improve a few things about the caption:

dl#captioned-image dd { padding-left: 0; text-align: centre; font-style: italic; }

Now the captioned image can have content wrapped around it. However, unlike an image by itself, it cannot be placed inside a paragraph:

<dl id=”captioned-image”>
<dt><img src=”khufu-pyramid.jpg” alt=”Great Pyramid of Giza”
title=”Great Pyramid of Giza” style=”width:492px; height: 345px;” />
</dt>
<dd>The Great Pyramid of Giza, completed ~ 2560 BCE</dd>
</dl>
<p>Common knowledge (and Cecil B deMille films) imagines rows of
sweating, beaten slaves building the pyramids. >Archeologically, there
is no evidence for this; indeed, all the available evidence shows that
the workers were local men, hired to work off taxes owed to the Pharaoh
by completing labour during the Egyptian wet season, when the Nile was
flooded and no farming could take place.</p>
<p>In addition, the gangs of workers were significantly smaller
than those shown in cinematic recreations: it has been estimated that
it would take only 2,000 men working full-time to erect the Great Pyramid
in the 10 years stated for its construction. Even taking into account
support staff and rotation of workers, the entire workforce was probably
no more than 10,000 people at any one time, lower by an order of magnitude
than the 100,000 slaves Herodotus reported in his
<cite>Histories</cite>.</p>

While we have used this list to contain a single example, you could have multiple pairs of images and captions as definition terms and matching declarations in the same list.

Interweaving XHTML and PHP: The XML Prolog Problem

Let's take a simple page and save it as prologtest.php, with the code below:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
</body>
</html>

As before, upload this page to your server and use your browser to look at it in that location.

Depending on how your server is set up (error messages shown or repressed) you will see either nothing at all on the page, or an error line similar to the following:

Parse error: syntax error, unexpected T_STRING in
/f2/demosthenes/public/test.php on line 1

This demonstrates two important points:

When PHP doesn't work (almost always due to an error in your code) it really doesn't work: the page stops, and you get an error message, or nothing at all.
The echo statement prints information to the page: that information could be a text string, as we have above, HTML, a variable, or a combination of all three. Anything other than a variable must be enclosed inside quotes; either single quotes ('') or double quotes("").

So what's the problem with our page?

The PHP opening tag is usually <?php ..., but it may also be shortcut to <? .... This latter, optional format for the opening tag confuses the PHP parser, which attempts to interpret our opening XML prolog as PHP. There are several possible solutions to this:

Drop the XML prolog. Doing so sacrifices some flexibility and future-proofing, avoids an issue in IE6 (which also has an issue with the XML prolog), keeps your page valid, and is probably the quickest solution.
Set the PHP parser to only accept the long form of the opening PHP tag and ignore the short version.
Use PHP to echo out the XML prolog. Replace the first line of the page with the following code (note the uses of single quotes):
1. <?php echo '<?xml version="1.0" encoding="utf-8"?>' ?>

Choose the option that appeals to you, make the appropriate change, save and upload the page, and view it again.

And suckas be thinkin' that they can fake this
But I'm gonna drop it at a higher level...

Creating Alpha-Masked Clouds as PNGs in PhotoShop With CSS3

In previous articles we’ve looked at creating 32-bit PNGs for use in web pages. In this exercise we are going to make a more complex image, working solely in the mask layer. I’ll be using Adobe PhotoShop CS5, but the techniques illustrated should be applicable to any version of PhotoShop, and translatable to other image editing programs such as GIMP. We’ll use the result of this tutorial in several articles to come, including PNG Optimisation and CSS3 animation. Clouds Image PhotoShop Setup

Step 1: Setup

Our initial goal is to make a banner for some text that is easily adjustable, with the foreknowledge that we will be animating it later with CSS3. First, you’ll want your canvas in PhotoShop to be a little wider and taller than your final banner to allow for animation: I would suggest around 1000px wide by 250px tall. Make sure that you name the document and make its background transparent before you press OK.

Make sure you have default colours (black foreground, white background) selected in the color picker by pressing D on your keyboard. Ctrl+ click to rename the current layer. After pressing OK, fill the layer with white by pressing SHIFT + F5 and choosing Background Color as the fill option. Immediately create a mask for your layer by clicking on the Add Mask icon in the layers palette. The mask is selected by default. We will be doing all of our work directly on the layer mask: Clouds PhotoShop Layers Palette you’ll be able to tell that you are on the layer mask by the small highlighted frame around the layer mask icon in the Layer palette.

Step 2: Create the clouds

From the menu bar, choose Filter / Render / Clouds.

The result doesn’t look terribly cloud-like yet, but we’ll improve that. Choose Filter / Render / Difference Clouds. Re-apply the Difference Clouds filter twice more by pressing CMD-F twice in succession. (You will be able to see the mask we are creating more clearly by going to the Channels palette and temporarily turning on the visibility of the Clouds Mask while turning off the others by clicking on their eye icons.)

Photoshop Clouds Levels Settings We want to tighten up the edges of the clouds a little. Press CMD-L to bring up the Layers window and adjust the sliders to the approximate locations you see in the screenshot to the right.

Finally, apply a little Gaussian blur to the cloud mask (Filter / Blur / Gaussian Blur) to break it up a fraction more, using a value of 1.6.

Step 3: Export the PNG-24

While we could continue to make improvements, let’s leave our clouds in their current state. Again, all of the work has been on the mask: the impression of “clouds” is rendered solely by the transparency information in the alpha mask.

Go ahead and save the image as a PNG-24 from PhotoShop via File / Save for Web and Devices. If you are still unclear as to why we are using PNGs and not GIFs as our export, feel free to preview the difference between the two formats in the export screen that appears. Call the final file clouds.png. It might also be wise to save your original image as clouds.psd, as we will be using it in the next lesson.

Step 4: Create the markup and basic CSS

In the text editor of your choice, create an HTML. Inside the <body>, place something like the following:

<div id=“clouds“>
<q>And suckas be thinking' that they can fake this<br />
But I'm gonna drop it at a higher level…</q>
</div>

Next, apply some CSS. We want the <div> to contain both a CSS3 gradient background and the PNG image. This is possible with CSS3’s support for multiple backgrounds, but we must be careful to specify them in the correct order:

div#clouds {
background-image: url(clouds.png);
background-image: url(clouds.png),
-webkit-gradient(linear, 0 0, 0 100%, from(#3e6caa), to(#76b6f4));
background-image: url(clouds.png),
-moz-linear-gradient(top, #3e6caa, #76b6f4);
background-repeat: no-repeat;
font-family: Highway, Arial, sans-serif;
font-size: 36px; padding: .2em 2em;
}

As you can see, the clouds appear over our gradient “sky”, and are semi-transparent against it, due to the alpha mask we created in the PNG. One advantage is that we can modify and move the clouds and sky backgrounds separately, or animate it using more CSS3, no Flash or movie file required.

Title	Japanese Title	Year of Release	Run Time
Rashomon	羅生門	1950	88 minutes
Ikuru	I生きる	1952	143 minutes
Seven Samurai	七人の侍	1954	207 minutes
Throne of Blood	蜘蛛巣城	1957	105 minutes
The Hidden Fortress	隠し砦の三悪人	1958	139 minutes
Yojimbo	用心棒	1961	110 minutes
Ran	乱	1985	160 minutes

Hover to highlight rows, click on table headers to highlight columns

Dynamic Customized Tables With CSS3

The demarcation between the appropriate roles for CSS3, JavaScript and PHP in modern web development can be a grey area. Perhaps one of the easiest ways to make this distinction clear is with tables. For example, in the table to the left, we want to accomplish several goals:

A background image that automatically resizes as we add and remove table data
Alternate appearance of table rows, to make them clearer
Highlight the row that the user places their cursor in
Make it clear which column our user is interested in.

All of this is just CSS. I've touched on almost all of the techniques I'm about to use in past articles, and will reference them as I go; the parts that are new and interesting are under-utilized and almost unknown tags that we'll use as markup to add more semantic "hooks" for our CSS to modify: <col />, <thead> and <tbody>.

Extended Table Markup

The code for our table looks something like this:

<table summary="The popular films of director Akira Kurosawa" id=kurosawa>
<col /><col /><col />
<caption>The Masterworks of Akira Kurosawa</caption>
<thead>
<tr>
<th>Title</th>
<th>Year of Release</th>
<th>Run Time</th>
</tr>
</thead>
<tbody>
<tr><td>Rashomon</td><td>1950</td><td>88 minutes</td></tr>
<tr><td>Ikuru</td><td>1952</td><td>143 minutes</td></tr>
<tr><td>Seven Samurai</td><td>1954</td><td>207 minutes</td></tr>
</tbody>
</table>

<thead> and <tbody> are fairly straightforward: they make clear what in the table is data versus header sections (<tfooter> is also possible). We've talked about table accessibility previously: that's why we use the summary attribute and caption tag. What's new here is col.

col

When we construct HTML tables, we do so by row, creating table cells each row. Columns are implied, but they are not explicit. <col> is a reference to make that association clear: each <col> tag refers to the column of cells immediately below it when the table is rendered in the browser. Therefore, you would normally have the same number of cols declared as you have <td> cells in each row, as we do here.

(It is possible to have a <col /> take responsibility for multiple columns by using the span attribute: <col span="2" />, for example).

Table Customisation

First, some base CSS:

table#kurosawa { background-image:url(seven-samurai.jpg);
background-size: cover;
border-collapse: collapse; }
table#kurosawa caption { font-size: larger; padding: 1em; }
table#kurosawa td { padding: .5em; }
table#kurosawa thead tr { background: #000; color: #fff; }

We've used a dynamic background image to fill the table and are using <thead> as a parent in a descendant selector to change the header row; aside from that, the CSS is fairly straightforward. Next, we want to zebra-stripe the rows in the table body:

table#kurosawa tbody tr:nth-child(odd) { background: rgba(0,0,0,0.3); }

To highlight the rows on hover:

table#kurosawa tbody tr:hover { background: rgba(0,0,0,0.8); color: #fff;
cursor: pointer; }

Finally, we want to be able to highlight each column. Unfortunately, <col /> supports very few CSS properties, and can't take most pseudo-selectors. Instead, we'll use :target from links in the table header section. To do so, we'll modify the markup slightly:

<table summary="The popular films of director Akira Kurosawa " id=kurosawa">
<col id=filmtitle" />
<col id=releasedate" />
<col id=runtime" />
<caption>The Masterworks of Akira Kurosawa</caption><thead>
<tr>
<th><a href="#filmtitle">Title</a></th>
<th><a href="#releasedate">Year of Release</a></th>
<th><a href="#runtime">Run Time</a></th>
</tr>
</thead>

Now each table header cell has an anchor link to the <col /> it is part of. Next, we customize the links:

table#kurosawa thead tr th a {
text-decoration: none; color: #fff; background: #000;
padding: .5em; display: block; }
table#kurosawa thead tr th a:hover { background: #777; }

And then the neat part: make each column highlight when it is targeted by the appropriate link.

table#kurosawa col:target { background: rgba(255,0,0,0.5); color: white; }

<col /> can be placed almost anywhere in a table: I've put them at the very top in order to minimize "bouncing" of the page when the local anchor link is followed. Because cols are rendered on "top" of the existing content, using rgba colours creates a nice layered effect. It's also possible to "zebra stripe" cols using CSS; for example:

table#kurosawa col:nth-child(odd) { background: rgba(255,0,0,0.3); }

Microdata: Metadata For Content

In HTML most tags are semantic: that is, they carry meaning. This structure of semantic tags is embraced and extended in HTML5 through elements like <time>.

Even with the dozens of new tags in HTML5, there is no way to provide meaning for every piece of content. This impoverishes the web: machine-readable tags that provide context make for a richer, more semantic internet, better and more accurate searches, and more powerful data aggregators. But short of an XML utopia, covering every possibility of meaning is a near-infinite task.

Instead, there are several measures that add to, or extend, the semantics of web pages:

Dublin Core meta tags, and their progenitors, attempt to summarize the context of the entire page, adding information such as authorship and revision date. However, they can only describe the page as a whole: as meta tags are written in the <head> section, it is impossible for such tags to drill down and specify the individual content of the page.
Microformats extend tags via special values for class and id attributes. Microformats have strong support by Google, Facebook and YouTube through schemas like hcard (to represent people, companies, organizations, and places), calendar (for events), recipe, and XFN (to diagram relationships between people).
RDFa is another means of providing context to tags via values added to del and class attributes, currently used to indicate Creative Commons licenses, amongst other purposes.
To this, HTML5 adds microdata, a way of extending the meaning of tags through a shared vocabulary. Unlike meta tags, microdata is written in the body of an HTML document; unlike microformats and RDFa, it does not abuse class or del, instead using new attributes that are built into HTML5 such as itemscope and item type, with established, central schemas such as schema.org and data-vocabulary.org. Google and Microsoft are both supporters of microdata, with more adopters being added.

“Which system should I use?”

Which system you use depends on what you are trying to do:

Are you making an XHTML page?: In that case, use Dublin Core and microformats
Want to add a Creative Commons license?: Use RDFa
Making an HTML5 page?: Use microdata, adding meta tags and RDFa as they are supported with namespaces.

The doctype

Specifying the correct doctype of your web page is very important. Without it, the client (the web browser, iPhone, etc) will have no idea which version of HTML you are using to write the document, and will default to guessing how the HTML should be rendered. In many browsers, this is known as “Quirks” mode, and can result in pages displaying oddly. By specifying the doctype, we tell the client “try to render this document according to the standards of this specification”. That information is added at the very start of the page, as follows:

For XHTML:

<?xml version=“1.0” encoding=“utf-8”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

For HTML 5:

<!DOCTYPE html>

The first part of the specification for XHTML – the xml prolog – shows the close relationship between XHTML and XML. A strictly coded XHTML document can be parsed as XML, if we ever wanted to do so. That first line tells the browser what version of XML the XHTML can be translated to (1.0) and the character set used on the page (utf-8, a version of Unicode). This line acts to “future proof” our work, and means that it will be readable for many, many years to come. That being said, the xml prolog is optional: you can drop it if you wish to (and if you want the page to render correctly in IE6, you have to).

The next line for XHTML, and the only line for HTML5 – the doctype – tells the browser which version of HTML we are using (XHTML 1.0 Strict and HTML5), what language it is written in (English), and where to find the defining document for the specification.

Note that neither the doctype nor the XML prolog are, strictly speaking, part of HTML, and they largely ignore the rules that I lay out so carefully in subsequent articles. You may wish to think of the doctype and xml prolog as a negotiation or an exchange of information between the web page and the browser, much as you might, upon meeting a stranger in Switzerland, attempt words in several different languages before both parties settle on speaking English. In our case, our web page is saying “Hi. I can give you the information that follows as XML or XHTML, whichever you prefer. Oh, and I'm going to speak in English, formating my characters this way (UTF-8), just so you know.”

The doctype is also required to validate our code, to check that we have written our web page in the right way. Without a doctype, the validator has no idea what version of HTML you are using, or what rules to check your code against.

Beginning Web Development - Overview

This entry attempts to summarize, in point form, the various topics I have covered in the last two years related to basic web development, including links to relevant entries where appropriate. If you were using this blog for the purposes of study or to make a web page from scratch, this would probably be the place to start. It will be followed by "Beginning CSS Web Development".

Create a basic HTML document:

Describe HTML, its significance to the web, and why you should learn to code in a simple text editor, rather than going straight to a tool like Dreamweaver.
Distinguish between the XML Prolog and doctype.
Define an HTML tag.
Set up the appropriate simple text editor.
Add the four basic HTML tags found in all web pages.
Add text to a web page, and define the text using <p> and heading tags.
Identify deprecated tags and layout methods.
Define the rules for naming web page files., add a file extension, save a web page, and view it in a browser.
Add additional text elements such as <acronymn>, <address>, <cite>, <dfn>, and <abbr>.
Add a horizontal rule.
Distinguish between block and inline elements.
Add HTML entities to a web page such as copyright, trademark, accents and correct quotes and apostrophes.
Add an HTML comment to a web page.
Validate the document.

Add lists, tables and links to a web page.

Define the three kinds of lists in HTML.
Create an ordered, unordered and definition list.
Create an accessible table for appropriate data.
Distinguish between local (relative) and remote (absolute) links.
Create two pages in the same location and link them to each other using a local link.
Add remote links to other web sites.
Add an anchor to jump to a location in a web page.
Create a navigation list for a web site.

Manipulate and insert bitmap images into web pages.

Describe image file types that can be used in web pages including the properties, advantages and disadvantages of each.
Download free images from the web.
Insert an image into a web page with appropriate accessibility.
Open, crop, resize, and save images for the web using Adobe Photoshop.
Create a basic favicon.

Add an accessible form to a web page:

Discuss methods of processing forms, such as JavaScript, CGI scripts and PHP scripts, and how creating a form is entirely separate from processing the information on it.
Discuss the rules and guidelines for creating a useable and accessible form.
Create a form, legend and fieldset.
Add a label and an associated text input field.
Add accessibility features to a form.
Add a text area and drop-down option.
Distinguish between radio buttons and checkboxes and use them in the context of a form.
Add a submit button.
Discuss other input types.

Host a web site under a domain name.

Summarize the TLD system.
Choose an appropriate domain name and registrar for your site.
Define the criteria for choosing a hosting provider.
Define local and remote copies of a web site.
Upload a site using FTP

Register a site with search engines and optimize page rank.

Explore the site registration pages for the top three search engines.
Understand the semantic web of relationships between pages, and how this relationship is a prime contributor to both page rank and associated search terms.
Determine that your web page uses appropriate semantic markup.
Enhance a web page by adding appropriate Dublin core meta tags.
Prepare counter-arguments for common SEO requests.

Showing 1 – 7 of dozens
>
Newest

demosthenes.info

featured articles

popular favourites

Captioned Images In XHTML

Interweaving XHTML and PHP: The XML Prolog Problem

Creating Alpha-Masked Clouds as PNGs in PhotoShop With CSS3

Step 1: Setup

Step 2: Create the clouds

Step 3: Export the PNG-24

Step 4: Create the markup and basic CSS

Dynamic Customized Tables With CSS3

Extended Table Markup

col

Table Customisation

Microdata: Metadata For Content

“Which system should I use?”

The doctype

For XHTML:

For HTML 5:

Beginning Web Development - Overview

web developer guide

featured comment

what i'm reading

what i'm watching

what i'm playing

what i'm hearing

blogs

podcasts

no ads ever

creative commons licensed