加载中...

Archive for the ‘HTML’ Category

Jul12010
File Under: CSS, HTML, Web Standards

The Solar System, Rendered in CSS and HTML

A web developer named Alex Giron has created a working model of the solar system using only web standards.

It’s fully animated — though Alex takes advantage of some new CSS 3 features (border-radius, transforms and animations) and utilizes the -webkit prefix, so you’ll need to view it in Safari or Chrome to see the planets move around the sun.

Firefox and Opera users won’t see the animations, just a static CSS layout. But the hover events work, so you can mouse over each planet and learn the story of each celestial body. And yes, he included Pluto.

Here’s Alex’s blog post that includes a walk-through of the code.

Bonus: Alex’s screenshot of the same page in IE.

[Via kottke]

See Also:

Feb262010
File Under: HTML, UI/UX

Using ‘Mad Libs’ to Make Web Forms More Fun

In an ideal world, the web would have a built-in identity solutions — websites would automatically know who you are when you arrive. In the real world, however, almost every website has its own sign up and authentication process, endless forms enticing you to enter your name, your e-mail, pick a password… yawn, what now?

It’s repetitive, boring and makes many of your users click away in disgust. But what if you turned the sign up form into a narrative, something a bit like a Mad Lib?

That’s exactly what web developer Jeremy Keith has done for his podcasting site, Huffduffer. Instead of a list of blank boxes, Huffduffer’s sign up form looks like this:

All the usual behaviors of a web form are still there. You can tab between fields, your password is still masked and errors are highlighted if there are any. The difference is the in the presentation. It doesn’t look like some kind of online test.

In short, Huffduffer’s sign up for is refreshing, but does it work? Well, Luke Wroblewski, Chief Design Architect at Yahoo and author of the book Web Form Design, had the same question and, with some help from the team at Vast.com, ran some tests.

The designers at Vast redesigned their response forms along the lines of Huffduffer’s form and found that, as Wroblewski reports, “Mad Libs style forms increased conversion across the board by 25-40 percent.”

The forms are live on both Vast and the Kelley Blue Book website if you’d like to experience them yourself. Wroblewski has a few minor caveats about the increased number of users — be sure to check out his post for the complete details — but at least in some cases it would seem that a narrative flow trumps the boring old form.

See Also:

Feb152010
File Under: HTML, Web Standards

Make an HTML Document

HTML is the lingua franca of the web. It’s a simple, universal mark-up language that allows web publishers to create complex pages of text and images that can be viewed by anyone else on the web, regardless of what kind of computer or browser is being used.

Despite what you might have heard, you don’t need any special software to create an HTML page; all you need is a word processor (such as SimpleText, BBEdit, or Microsoft Word) and a working knowledge of HTML. And lucky for all of us, basic HTML is dead easy.

It’s All About the Tags

HTML is just a series of tags that are integrated into a text document. They’re a lot like stage directions — silently telling the browser what to do, and what props to use.
Continue Reading “Make an HTML Document” »

Feb152010
File Under: HTML, Web Standards

Add HTML Forms to Your Site

So you’ve decided it’s time to interact with your users. You’re tired of this one-way street — you talking, them listening. You want to actually hear what your readers have to say. In order to do this, you’ll need to provide a way for people to enter information. Therefore, you’re going to need an HTML form (to process this information, however, you must implement some sort of script, which might require another tutorial).


Continue Reading “Add HTML Forms to Your Site” »
Feb152010
File Under: HTML

Write Symbols and Special Characters in HTML

When you type regular letters, numbers, and characters from your keyboard into the body of an HTML document, they show up on your Web pages just as you typed them. But things aren’t so easy in non-English speaking countries (and such places do exist – honest). Languages such as French, German, and Icelandic often use characters that are not found on your typical keyboard. Even in English, accents can distinguish a “résumé” from a “resume.”

So how do you make special characters and accented letters show up on your pages? You use a special set of codes called character entities, which you insert into your HTML code and which your browser will display as the corresponding symbols or characters you want.


Continue Reading “Write Symbols and Special Characters in HTML” »
Feb152010
File Under: HTML

Refresh a Page Using Meta Tags

Childhood, as far as your basic cheese selections go, was easy. In your typical middle-class family, you had one of three choices:cheddar, Monterey Jack, and those precious, flat, sandwich-sized slices of American. That’s what all the cool kids ate. I had to fight my mother to get those into my lunch. She used to make sandwiches with these huge slabs of cheddar cheese that looked like they were hewed from the side of an orange glacier. Although I lost the Wonder Bread battle, I didn’t give an inch on this one. For some reason, Mom couldn’t see the simple beauty in a perfectly proportioned square of processed cheese food.

The problem with childhood is that we never appreciate it while we have the chance. As I grew up, I developed more mature needs and tastes. Like many young adults lost in the hype of ’80s mass cultural wonders like Molly Ringwald and Oingo Boingo, I began to experiment. I told myself that I didn’t have a problem, but a little brie here, and a bit of Chaumont there, and before I knew it, I was hooked.


Continue Reading “Refresh a Page Using Meta Tags” »
Feb152010
File Under: HTML

Make a Mailto Link

To create a link that sends an e-mail to somebody, use the HTML mailto: tag.

Your code will look like this:

<a href="mailto:webmonkey@wired.com>Send an e-mail to Webmonkey</a>

and tell us how much you love cats.

When the reader clicks on that link, their default e-mail application will launch and a blank e-mail addressed to webmonkey@wired.com (or whatever address you put in the link) will open up.


Continue Reading “Make a Mailto Link” »
Feb152010
File Under: HTML

Position Text and Images With Div Tags

Are you sick of putting align in every tag just to get a page to lay out properly? And how do you feel about table hacks for positioning images? I thought so. Well, never fear – the <div> tag is here.

Although it’s been around since HTML 3.0, <div> didn’t really catch on until CSS-based layouts became the rage du jour. It won’t solve all your problems, but it works for formatting large blocks of text, images, and just about anything else that has an HTML tag around it.



Continue Reading “Position Text and Images With Div Tags” »

Feb152010
File Under: Cheat Sheets, HTML

HTML Cheatsheet

Keep this cheatsheet handy — it contains the most common HTML tags and their proper syntax.

 

Continue Reading “HTML Cheatsheet” »
Feb152010
File Under: Cheat Sheets, HTML

Special Characters

To make special characters and accented letters show up on your pages, use a special set of codes called character entities, which you insert into your HTML code and which your browser will display as the corresponding symbols or characters you want.

The most common character entities have been collected by the International Organization for Standardization and compiled in the ISO Latin Alphabet No. 1 table, which includes special characters, letters with diacritical marks (accents, umlauts, etc.), and scientific and currency symbols. The Latin-1 table contains 255 characters.  

Continue Reading “Special Characters” »