Entries Tagged as 'HTML'
Creating icons for iPhones and the iPod Touch is not all that different than creating bookmark icons. First you create a 57×57 png image.
If you want an icon for all of your website or a default for pages that do not have individual icons then just name your image:
apple-touch-icon.png
and upload it to your home directory.
If you are on Blogger or some other software where you can’t upload the icon you can place it anywhere on the web and create the following link in the ‘head’ section of your pages:
<link rel=”apple-touch-icon” href=”http://your-icon-location.com/your-icon-name.png”>
If you have different pages people might wish to bookmark and you wish to have a separate icon for each then:
- create the icons
- upload them to the root directory of your website
- In the head section of pages that you wish this icon to appear add the following:
<link rel=”apple-touch-icon” href=”http://your-site.com/icon-name.png”>
I tried doctoring photos and shrinking them and using them and the results were pretty good. Gimp works well for creating icons this way. One site reported that creating larger icons and letting Apple convert them resulted in clearer pictures. It didn’t for me but if you are using photo images you should give it a try.
Apple will round the corners and gloss up your icon. You just need to create the square image and let Apple do the rest. ‘Trust the force’. 
I could not get this to work on an old section of a website that uses frames. It may or may not work on framed sites.
If you change or add an icon it does not update on users phones/touches. It must be rebookmarked for the new icon to appear.
Tags: HTML · blogger template · graphics · hack your template
Meta tags were once an important SEO tool for your website. As search engines have gotten better and SEO tactics blacker meta tags have gotten little attention. Blackhat SEOs stuffed meta tags with all sorts of nonsense and search engines stopped paying attention. Most webmasters no longer use them, most search engines stopped using them. So I was surprised to see an article about meta tags on Google’s Webmaster site this week. ( Improve snippets with a meta description makeover )
Meta tags are included between the <head></head> tags of your HTML. You can create keywords and a description of your page using meta tags.
<head>
<meta name=”description” content=”description of this webpage goes here”>
<meta name=”keywords” content=”keywords, separated, by, commas, go, here”>
There are other meta tags you may or may not find useful.
I guess even on the web everything old is new again and things left behind will be recycled for future use.
More information:
Metat Tags and Search
See also:
Robots.txt
Tags: HTML
September 26th, 2007 · No Comments
This is one of those HTML things I rarely use. So I always have to go hunt to figure out how to use when I need them. Anchor links bring you to a section of a document. Let’s say you have this huge list of links. You don’t want to dump someone at the top of a long list that is sorted by subject when you can send them straight to that subject area. Or if you have written the Great American Novel all on one page, you could provide anchor links to individual chapters.
In the long page you create anchors:
<a name=”chapterone”>Chapter One</a>
To send someone straight to Chapter One create this link:
<a href=”http://greatamericannovel.com/index.html#chapterone”> Great American Novel: Chapter One</a>
I use them on the category links to your left. Click on a category link and it will take you to the anchor link for that category on the very large archives page.
Tags: HTML · how to
This effect is much cooler if you use small gifs. I used large images in the Animate link on mouse over example just to make it easier for you to see what I am doing.
When the mouse hovers over the link, you see the animation. When the mouse is not over the link you see a still image. The best examples of this I have seen use small still image as a background, and a copy of that that has sparkles that appear and disappear when the mouse hovers.
You need two gifs; one a still image, and one animated version of that still image:
You can just drag these two images I used to your desktop to play with.
Here is the HTML/CSS for this example:
<html>
<head>
<title>Animated link mouse over example</title>
<style type=”text/css”>
#link {
position: absolute;
top: 100px;
left: 100px;
}
a {
background: url(animate-link-still.gif) no-repeat center;
height: 256px;
width: 256px;
padding: 125px;
}
a:hover{
background: url(animate-link-rotate.gif) no-repeat center;
}
</style>
</head>
<body>
<div id=”link”>
* Note: make the height and width of the link the same as your image size.
Tags: HTML · css · graphics · how to
