this is obsolete doc -- see http://doc.nethence.com/ instead
HTML & web development tips
XHTML/CSS valid !
Add those links inside your code,
<a href="http: //validator.w3.org/check?uri=referer">html</a>/<a
href="http: //jigsaw.w3.org/css-validator/check/referer">css</a>
otherwise validate from the command line,
tidy -q -i -w 79 -c -asxhtml -utf8
#-latin1
#-language fr
note. you might get tidy & libtidy from EPEL (http://fedoraproject.org/wiki/EPEL)
note. there's also xmllint,
#xmllint --format --nowarning
#--encode latin0
Image float
Make them float !
<img style="float:left;" style="padding:0 40px 40px 0;"
src="image.jpg" alt="image" />
text<br />
text<br />
<div style="clear:both;"></div>
Printable
You could try to add this style to limit the width for WYSIWYG printing,
<style type="text/css" media="print, handheld, projection, tty, tv"><!--
body { margin:0; padding:5px; width:640px; }
--></style>
Transparent PNG even for IE5,6
Note. fixed since IE7
Check the size of the image to force the width and height,
identify image.png
Add this class to your CSS (Firefox),
div.flower { background:url(image.png) no-repeat; width:100px; height:100px; }
note. change width and height accordingly
Also add this condition to the head tag (IE5,6),
<!--[if gte IE 5]>
<style type="text/css">
div.flower {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');
}
</style>
<![endif]-->
Note. no need to comment the style tag to be html valid, the condition itself is a comment
Into the HTML code, replace your img tag with a div element calling the class,
<div class="flower"></div>
Favicon
Add this to your HEAD code,
<link href="/favicon.ico" type="image/x-icon" rel="icon" />
<link href="/favicon.ico" type="image/x-icon" rel="shortcut icon" />
Note. for the following solutions, you'll have to wipe out the cache AND restart your web browsers to validate
Note. IE6 doesn't want 32x32 winicons, but 16x16 works just fine, even w/o adding the website to bookmarks
Solution 1 (recommended)
Save your 16x16 image as png with e.g. Paint.NET. Then convert it to winico,
rpm -q netpbm netpbm-progs
pngtopnm favicon16.png > favicon16.ppm
pngtopnm -alpha favicon16.png > favicon16.pgm
ppmtowinicon -andpgms -output favicon.ico favicon16.ppm favicon16.pgm
rm -f favicon16.ppm favicon16.pgm
Solution 2
Save your 16x16 image as PNM or PPM (raw encoding) with Gimp. Then convert it to winico,
rpm -q netpbm netpbm-progs
ppmtowinicon -output favicon.ico favicon16.pnm
rm -f favicon16.pnm
Solution 3
Save your 16x16 image as XPM with Gimp. Then convert it to winico,
xmp2wico ...
Other solutions
- Iconforge (http://www.cursorarts.com/ca_if.html)
- FavIcon from Pics (http://www.html-kit.com/favicon/)
- png2ico (http://www.winterdrache.de/freeware/png2ico/)
- Icon Packager (http://www.stardock.com/products/iconpackager/)
Note. ImageMagic's convert -colors 4, 8 or 16 doesn't seem to be enought to make it work
Dew* installation
FLV Flash player : http://www.alsacreations.fr/dewtube
MP3 Flash player : http://www.alsacreations.fr/mp3-dewplayer.html
Deploy the thing into your website's root folder,
mkdir -p dew/
cd dew/
wget http://www.alsacreations.fr/dl/dewplayer.zip
wget http://www.alsacreations.fr/dl/dewtube.zip
#wget http: //www.alsacreations.fr/flashswf/dewplayer.zip
#wget http: //www.alsacreations.fr/flashswf/dewtube.zip
mkdir player/
unzip dewplayer.zip -d player/
unzip dewtube.zip
mv dewtube/ tube/
#chown -R webuser:webusers dew*
Refs.
http://www.alsacreations.fr/dewplayer.html
http://www.alsacreations.fr/dewtube.html
http://www.linnrecords.com/linn-downloads-testfiles.aspx
http://www.mediacollege.com/adobe/flash/video/tutorial/example-flv.html
Encode the video as FLV
Encode your your video with Riva FLV Encoder (http://www.rivavx.com/index.php?encoder). Riva has shell integration and is able to create the video preview image. Note. avoid Flashconv trial version which ads an horrible advertisment in the flv videos.
Use Mediainfo (http://mediainfo.sf.net/) to look for those parameters,
video / width
video / height
video / scan type
video / frame rate
audio / bit rate
audio / sampling rate
Embed an FLV video (Dewtube)
Embed an FLV video with Dewtube,
<object type="application/x-shockwave-flash"
data="dewtube/dewtube.swf"
width="512"
height="384">
<param name="movie" value="dewtube/dewtube.swf" />
<param name="flashvars"
value="movie=../video.flv&width=512&height=384" />
</object>
Note. for autostart, add that flashvar,
;autostart=1
Note. for Dewtube, the path is relative to the flash executable
Note. for Dewtube to enable fullscreen, add,
<param name="allowFullScreen" value="true" />
Embed an MP3 (Dewplayer)
Embed an MP3 with Dewtube,
<object type="application/x-shockwave-flash"
data="dewplayer.swf"
width="200"
height="20"
id="dewplayer"
name="dewplayer">
<param name="movie" value="dewplayer/dewplayer.swf" />
<param name="flashvars" value="mp3=test.mp3" />
<param name="wmode" value="transparent" />
</object>
Note. for autostart, add that flashvar,
;autostart=1
Note. for Dewplayer, the path is relative to the HTML page
Note. for Dewplayer to show the music track time,
;showtime=1
Page auto reload
Add this into HEAD, e.g. 5 seconds,
<meta http-equiv="refresh" content="5" />
and eventually add a immediate reload link,
<a href="javascript:this.location.reload();">Refresh<a>
Free images & icons
FAMFAMFAM Icons : http://famfamfam.com/lab/icons/
Wikipedia:Icons : http://en.wikipedia.org/wiki/Wikipedia:Icons
iconlet : http://www.iconlet.com/browse
Colors
Quick view : http://www.sempaionline.com/colors.html
Purples : http://www.december.com/html/spec/color4.html
Maps
- Mapedit : http://www.boutell.com/mapedit/download.html
- Clickable Image Map Maker : http://www.linkedresources.com/tools/cimm.shtml
Rich text editors
Cross-Browser Rich Text Editor (RTE) : http://www.kevinroth.com/rte/
TinyMCE : http://tinymce.moxiecode.com/
htmlArea : http://www.htmlarea.com/
Xinha : http://xinha.python-hosting.com/
FCKeditor : http://www.fckeditor.net/
HTML editors
- Text editors
- NVU
- Adobe GoLive (discontinued)
- Adobe Dreamweaver
- Aptana_Studio (http://www.aptana.com/)
References -- XHTML & CSS basics
http://www.webdevout.net/articles/beware-of-xhtml
http://hixie.ch/advocacy/xhtml
http://www.webdevout.net/articles/validity-and-well-formedness
http://www.csarven.ca/interview-with-steven-pemberton
(FR) CSS : http://fr.selfhtml.org/css/formats/incorporer.htm
(FR) Floating images : http://www.pompage.net/pompe/impression/
(FR) Media types : http://www.yoyodesign.org/doc/w3c/css2/media.html
References -- CSS Advanced
Cascading Style Sheets: http://w3.org/TR/CSS21/
No tables for layout : http://xrl.us/kd35
Vertical align : http://reisio.com/examples/vertcenter/
Vertical center : http://zoffix.com/zoffix/css/vertcenter.shtml http://zoffix.com/new/css-vertical-center.html http://reisio.com/examples/vertcenter/
http://www.hongkiat.com/blog/making-png-image-transparency-work-in-internet-explorer/