Bookmark and Share

Enter your email address:

Delivered by FeedBurner



Home Page













Subscribe here
Add to My Yahoo!
This page is powered by Blogger. Isn't yours?

Host your Web site with PureHost!


eXTReMe Tracker
  Web http://www.klippert.com



  Saturday, February 13, 2010 – Permalink –

Quotes and Apostrophes

HTML codes


A left double quote is “
A right double quote is &rdquo ;
A left single quote is &lsquo ;
A right single quote is &rsquo ;


OfZenandComputing.com






See all Topics

Labels: , ,


<Doug Klippert@ 3:04 AM

Comments: Post a Comment


  Monday, January 25, 2010 – Permalink –

Character Codes

HTML and ALT+


Here's another table with the codes needed to insert characters that do not appear on the keyboard:

Keyboard Shortcuts





See all Topics

Labels: , , ,


<Doug Klippert@ 3:45 AM

Comments: Post a Comment


  Thursday, January 21, 2010 – Permalink –

CSS Coding

Put by the keyboard

Cascading Style Sheets (CSS) is a simple way to define styles (e.g. fonts, colors, spacing) on Web pages.
Of course there is coding involved. Here is a printable cheat sheet you can keep close at hand.

LeslieFranke.com






See all Topics

Labels: , ,


<Doug Klippert@ 3:34 AM

Comments: Post a Comment


  Tuesday, January 12, 2010 – Permalink –

Scroll Text

Automated GIF



WigFilp.com





See all Topics

Labels: , , ,


<Doug Klippert@ 3:49 AM

Comments: Post a Comment


  Wednesday, December 09, 2009 – Permalink –

Sparklines

Quick graphic reinforcement


A graph or chart can give the reader a visual representation of a great deal of data. Concepts or results can be more easily grasped by a well formatted graphic.

Charts, usually, take up more space in a document than is absolutely required.

Edward Tufte has come up with the concept of Sparklines (Sparklines:Intense, Word-sized Graphics)
.
These are small graphs about the same height and width as common words. They are not out of place in the text of a document.

Sparklines give the reader a snapshot of the data that quickly supports the material being discussed.



See:
Bisantz Sparklines

The Sparkmaker can create Sparklines for Word, Excel, or PowerPoint. They can also be produced in HTML.



[Edited entry from 12/6/2006]




See all Topics

Labels: , , ,


<Doug Klippert@ 3:25 AM

Comments: Post a Comment


  Saturday, October 10, 2009 – Permalink –

Web Furnishings

Clips, buttons, templates


ZeroWeb.org accepts submissions and provides free downloads of web ingredients.

Website Layouts
Clean
Heavy
Strange
Premium

Web Graphics

Clipart


Zeroweb.org -- Free website layouts and templates, clipart, graphics and website tools.


[Edited entry from 9/20/2006]




See all Topics

Labels: , , ,


<Doug Klippert@ 3:07 AM

Comments: Post a Comment


  Tuesday, October 06, 2009 – Permalink –

Unicode is Big

More symbols and letters


This free download lets you see and select more characters in the Unicode set. The Unicode Character Grid shows all assigned characters and private use characters in Unicode 5.2.




Here's a blog covering Scripts, Unicode, Character Encoding and BabelStone Stuff
BableStone Blog



[Edited entry from 9/14/2006]




See all Topics

Labels: , , , , , , ,


<Doug Klippert@ 3:15 AM

Comments: Post a Comment


  Wednesday, September 16, 2009 – Permalink –

Relative Font Sizes

What size are your relatives?



Relative font sizes make websites more accessible and easier to read - but they're not much help unless the person using the site can find a way to actually change text size.

Here's a simple solution for text resizing:

Power To The People: Relative Font Sizes
Article by Bojan Mihelac

Original link from Lockergnome

[Edited entry from 8/19/2006]




See all Topics

Labels: , ,


<Doug Klippert@ 3:46 AM

Comments: Post a Comment


  Saturday, September 05, 2009 – Permalink –

HTML Tutorials

How to HTML



Ezpression Web/FrontPage can quickly create good looking web sites. If you want more versatility and the ability to edit the underlying HTML (Hyper Text Markup Language ), look at these sites:

HTML Code Tutorial (NCSA )

Chris's FrontPage Info Web

Outfront Webmasters

And others:

FrontPage Solutions

[Edited entry from 8/6/2006]




See all Topics

Labels: , , ,


<Doug Klippert@ 3:26 AM

Comments: Post a Comment


  Tuesday, August 04, 2009 – Permalink –

Web Things to Remember

A few small things you shouldn't forget


The Web Workshop suggests that these four items are among the many you should make sure are used correctly on your web page:
  • The Page Title

  • The Background Color

  • The Submit Button in Forms

  • Non-Breaking Spaces

[Edited entry from 7/1/2006] See all Topics

Labels: , ,


<Doug Klippert@ 3:28 AM

Comments: Post a Comment


  Wednesday, July 29, 2009 – Permalink –

Test Your Web Site

How does your site score?


Here are a collection of tools that can be used to analyze your web site for validity.

Sorry, it doesn't check for source information reliability.


Readability Test
The readability test analyses a Web page to determine how readable it is.
CSS Analyzer
The CSS analyzer tests for basic accessibility errors such as color contrast and units of measurement.
Luminosity Contrast Ratio Analyzer (Beta)
Tests whether foreground and background colour combinations are sufficient using a new algorithm developed by Trace R&D Center.
Color Contrast Analyzer
The color contrast analyzer tests whether the contrast between the background and the foreground is sufficient.
Image Analyzer
The image analyzer tests Web pages to ensure that images have been specified properly.
Link Analyzer
The link analyzer lists all links on a page with an icon to indicate whether or not the link resolved successfully.

Juicystudio.com:
Quality Assurance


[Edited entry from 6/23/2006]




See all Topics

Labels: , , ,


<Doug Klippert@ 3:55 AM

Comments: Post a Comment


  Wednesday, July 22, 2009 – Permalink –

Automated Newsletter

ASP and HTML


Pre-RSS, the predominate method of communication for members of a like minded group was through an emailed newsletter.

Word actually works fine with mail merge to email, but if you want to combine the data gathering and the distribution in a neat package, take a look at this tutorial.
Step 1 : Create a simple HTML Form where users can insert their email addresses and an ASP page which will receive the Form email address from the HTML page and insert it into the database.

Step 2 : Create a simple Access database to store user's email addresses.

Step 3 : A simple admin ASP page from where you can send email messages to all the users whose email addresses are present in the database.

Step 4 : An ASP page from where the users can delete their email addresses from the database if they later choose to.

Stardeveloper.com:
An ASP Tutorial to create your own News Letter



[Edited entry from 6/15/2006]




See all Topics

Labels: ,


<Doug Klippert@ 3:52 AM

Comments: Post a Comment


  Thursday, July 16, 2009 – Permalink –

Access-Excel-XML-HTML

Transfer data


XML makes data transferable between applications.
Here is a tutorial with downloadable files.
Some simple guidance of how to transfer data from Excel or Access into HTML web pages using XML data files. VBA programs can be used to export data tables from Excel or Access into simple XML files. There are several examples of using different methods to display the XML and XSL files on web pages in order to quickly share your data with others.


An introduction to Excel and XML data files

 
Also:
Some nice photos and calendar layout:
Monthly calendar with photos


[Edited entry from 6/8/2006]




See all Topics

Labels: , ,


<Doug Klippert@ 5:43 AM

Comments: Post a Comment


  Friday, July 03, 2009 – Permalink –

CSS, PHP, and all that stuff

Collections of suggestions


Under the belief that more information leads to more understanding, here is a site that may help you round the corners of web design and function. Besides CSS templates there are PHP code nibblets.


In 2003 artypapers was created by R. Marie Cox as a springboard for ideas and a working space of technical implementation -- a place to test and build an extendable collection of core classes (alliteration!) that acts as an application framework for a diverse set of projects and applications.

artypapers.com

Also:
Links and Discussion About the Best CSS Resources Available on the Web.
CSS Help Pile


[Edited entry from 5/22/2006]




See all Topics

Labels: , ,


<Doug Klippert@ 3:56 AM

Comments: Post a Comment


  Sunday, June 28, 2009 – Permalink –

30 Days Hath

One Day at a Time


Here's how to add a calendar to your web page.


Publishing Outlook Calendars on the Internet or an Intranet
(From THE definitive Outlook/Exchange site - Slipstick.com.)

Other methods:

Htmlgoodies.com
It's actually just a simple table with a couple of additions. (free)

HTMLCal
HTMLCAL is a Web calendar maker and editor that lets you maintain a group calendar for your Web site or intranet.
This software will let you maintain live calendars on your site that anyone can view or update from any Web browser. ($25)

Htmlcalendar.com
HTML Calendar Maker Pro was designed with ease of use in mind. Now you can type your events quickly and easily and they will be transformed into a customized and professional monthly calendar within seconds. Simply follow the on-screen tutorial to create your calendar and then place the finished web page on your site. It's perfect for planning for the weeks ahead or noting past historic events. ($26.50 +)

All about Calendars by:

Claus Tøndering


[Edited entry from 5/13/2006]




See all Topics

Labels: , , , ,


<Doug Klippert@ 3:00 AM

Comments: Post a Comment


  Sunday, May 31, 2009 – Permalink –

Unicode and other Characters

Why's A 65?


Underlying the intriguing prose spread across the monitor screen are numbers and more numbers.

Joel Spolsky, a New York software developer has written a combination history/tutorial about this numeric-literary liason.

He calls it:


"The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)"


Unicode and Character sets


[Edited entry from 4/11/2006]




See all Topics

Labels: , , ,


<Doug Klippert@ 3:00 AM

Comments: Post a Comment


  Tuesday, May 12, 2009 – Permalink –

Byte, Nibble, Crumb, Bit

Umpty ump definitions and references — maybe even a googol.


We all know/knew that a nibble is four binary digits or half of a (eight-bit) byte and that a crumb is jargon for two bits (two binary digits). However, there must be some other definitions that don't pop into mind right away.

That's where Whatis, an IT-specific encyclopedia comes in.



"Every File Format in the World"

This is a list of file name extension or suffixes that indicate the format or usage of a file and a brief description of that format.

KAR
MIDI file (text+MIDI) (Karaoke)


[Edited entry from 3/17/2006]




See all Topics

Labels: , , ,


<Doug Klippert@ 3:35 AM

Comments: Post a Comment


  Thursday, May 07, 2009 – Permalink –

More Cascading Style Sheet Help

Tutorials, Tools, and Links

"Cascading Style Sheets separate the presentation from the structural markup of a web site. By applying a CSS style you have the ability to keep the structure of your document lean and fast, while controlling the appearance of the content.

HTML was intended as the structural markup language. This language focuses on the roles that the different elements of a document have to play, not how they have to look. CSS has been invented and developed for the Internet. It is not an adapted tool from print or programming, but a means of enhancing HTML."

Mako4CSS.com
  • CSS Creator site is a place for you to learn about and create CSS, Cascading Style Sheets. The CSS Forum is a place where you can discuss CSS page layouts, positioning, bugs and just about anything related to cascading style sheets. The forum is new, free and most of all needs people like you to create a community. Talk about CSS, ask questions, find solutions, and help each other learn at the CSS Forum.

  • The original CSS Creator is a CSS generator, which you can use to create styles and test them on your site. If you are learning CSS have a look and see how changes will affect your site and generate the styles. The CSS Creator has been used tested on 5266 urls.

  • The CSS Layout Generator will generate layouts with a flexible center column and fixed width left and or right column. All columns will be the same length, the layout can be centered on the page or full width and a header and footer can be easily added. 10545 CSS Layouts have been generated.

  • A light weight multi level menu, which uses a very small JavaScript file for browsers with bad CSS support. The markup of the menu is simply unordered lists, it can support multiple levels and will degrade to a simple unordered list if CSS is turned off.

  • A Useful CSS Links page has been added to the site and contains great links to CSS tutorials, tools, tips from all over the web.

CSS Creator.com Also see: New York Public Library Online Style Guide [Edited entry from 3/12/2006] See all Topics

Labels: , ,


<Doug Klippert@ 3:25 AM

Comments: Post a Comment


  Tuesday, April 14, 2009 – Permalink –

Border Magic with CSS

Consistent formatting



Cascading Style Sheets can be helpful in applying dependable format characteristics to web sites. Like Styles, CSS provides a reference point when a certain look is called for.

Stu Nicholls provides directions for "Fluid" borders:
"If you resize your browser window you will see that these borders are fluid and stay in shape. Resize the text and they will also stay in shape."


Even in this static shot, you can see some nice possibilities.

Fluid Borders to with CSS



[Edited entry from2/16/2006]




See all Topics

Labels: , ,


<Doug Klippert@ 3:01 AM

Comments: Post a Comment


  Sunday, March 29, 2009 – Permalink –

Web Magazine

The difference between a blog and a magazine is thin


Here's on online mag that collects information, direction, and designs for web sites


"A List Apart Magazine (ISSN: 1534-0295) explores the design, development, and meaning of web content, with a special focus on techniques and benefits of designing with web standards.

Steal our code? Copy our content?

ALA's content is protected by copyright shared jointly by the magazine and its writers, but our source code is freely available to all."

A list Apart


[Edited entry from 1/31/2006]




See all Topics

Labels: , , ,


<Doug Klippert@ 3:20 AM

Comments: Post a Comment


  Monday, March 23, 2009 – Permalink –

More CSS

Can't get enough


Demonstrations, Layouts, Menus


This site provides a wealth of examples about how to use Cascading Style Sheets.

Poke around and then come back when your project calls for something different.


"Because my site deals with experimental CSS that is exactly what you get JUST CSS, no javascript or any other programming language has been used in any of the demonstrations."


CSS Play by Stu Nicholls


[Edited entry from 1/25/2006]




See all Topics

Labels: , ,


<Doug Klippert@ 3:38 AM

Comments: Post a Comment


  Tuesday, February 24, 2009 – Permalink –

Form Design

Fancy functionals


Here is a discussion about how to design a form for use on the web.

"Computers are supposed to make our lives easier, not more difficult. As usability-conscious designers, we can make our users' lives easier by thinking about the way people interact with our websites, providing clear direction, and then putting the burden of sorting out the details in the hands of the computers—not the users.

It's that last part that we're going to focus on here. We've all heard and read about big usability mistakes time and time again: "Don't use images or flash for navigation," "Don't use Javascript for links," and I certainly hope we're all applying those lessons in our work. It's often the smallest usability quirks, however, that create the biggest annoyances for users, especially when it comes to HTML forms. Follow these guidelines, and you'll be off to a good start."


  • Use the right field for the task
  • Give them room to type
  • Shorten your forms and question "mandatory" fields
  • Mark mandatory fields clearly
  • Provide descriptive labels for all of your fields
  • Let the computer, not the user, handle information formatting
  • Use informative error messages
  • Don't return users to an altered form
Sensible Forms Brian Crescimanno



[Edited entry from 12/21/2005]



See all Topics

Labels: , ,


<Doug Klippert@ 3:10 AM

Comments: Post a Comment


  Monday, February 09, 2009 – Permalink –

Photo Gallery

A CSS exercise


FrontPage had a Photo gallery template, and you can also save a PowerPoint show as a web page.

For another take on the problem, here are the instructions needed to create a gallery using CSS.

Click here to see what it might look like:



How to Create a Photographic Gallery Using CSS
By Stu Nicholls


[Edited entry from 12/5/2005]



See all Topics

Labels: , ,


<Doug Klippert@ 3:16 AM

Comments: Post a Comment


  Tuesday, February 03, 2009 – Permalink –

Internet 099

Basics and Beyond


A San Francisco company called Learn the Net has produced a basic on-line tutorial about the Internet.

If you need a fundamental primer, this might be a place to look.

It is not a series of scaled down "baby talk" lessons. You can drill down though the meaning of 403/404 error codes and links to WW3 Generic URI Syntax (RFC 2396) standards.

That is if you know how to drill down.

"Throughout Learn the Net--in fact on most web pages--you will see words that are in color and often underlined. By clicking on these words, known as hypertext, you jump to other places on the page, to other pages on the site, or to other resources on the Internet."


www.LearntheNet.com




[Edited entry from 11/27/2005]



See all Topics

Labels: , ,


<Doug Klippert@ 3:08 AM

Comments: Post a Comment


  Sunday, February 01, 2009 – Permalink –

MailTo Shortcut

Just a quick note


You can create a shortcut on your desk top that will start or switch to your default email application. You can also fill in parts of the message if you want.

Right-click an empty spot on the desktop and choose New>Shortcut.
In the box that says "Type the location of the item", enter something like:

mailto:All@Once.com.



The University of Nebraska at Lincoln has some other entries you may want to try. They are intended as HTML hyperlink references, but some of them work as shortcuts too.
MailTo

Outfront.net also has some information:
Getting More From 'mailto'

[Edited entry from 11/30/2005]


See all Topics

Labels: , , , , ,


<Doug Klippert@ 3:50 AM

Comments: Post a Comment


  Friday, January 23, 2009 – Permalink –

Java and All That Jazz

Free code


One way to jazz up a boring web site is to use scripting to present random images or create interesting menus. You could learn to do it yourself, or borrow from the stars.

JavaScript-2.com is a source for free JavaScript Codes.

Find FREE JavaScript codes quickly and easily with the only search engine that searches all the top Java Script libraries, offering a total of over 8,000 free JavaScripts.


[Edited entry from 11/20/2005]




See all Topics

Labels: , , ,


<Doug Klippert@ 3:05 AM

Comments: Post a Comment


  Thursday, January 08, 2009 – Permalink –

Send the Viewer on their Way

Move on


If you have an old site that people still address, or a web page that has been moved, see this code and the explanations.

<html>

<head>
<meta http-equiv="REFRESH" content="3; URL=http://WWW.MiniByteTech.com">
</head>

<body bgcolor="#FFFFFF" text="#000000">


The operative line is:

<meta http-equiv="REFRESH" content="3; URL=http://WWW.MiniByteTech.com">


The value of content is in seconds.
The new location for this web site is WWW.MiniByteTech.com! You will automatically be redirected in 3 seconds. If your browser doesn't automatically load, click <a href="http://WWW.MiniByteTech.com">HERE</a>.

</body>
</html

PCMag.com:
Routing Your Web Site Visitors

Help2Go.com:
Redirecting a Web page

ISiteBuild.com:
How to Redirect a Web Page Using a 301 Redirect

This tools help you determine if the redirect you have created is Search Engine Friendly:

WebConfs.com:
Redirect Checker




[Edited entry from 11/2/2005]



See all Topics

Labels: , , ,


<Doug Klippert@ 3:45 AM

Comments: Post a Comment


  Monday, October 27, 2008 – Permalink –

HTML Character References

Display codes


Alan Wood's Web Site provides a lot of reference material. From over 1400 ingredients of pesticides¹ to Unicode and HTML resources.

In HTML, fonts and symbols can be generated from the numeric character reference or from the character entity reference.

–  or en dash

(&#8211; or &ndash;)

— or em dash

(&#8212; or &mdash;)

‡ or double dagger

(&#8225; or &Dagger;)

™ or trade mark

(&#8482; or &trade;)

∑ or n-ary summation, sum of

(&#8721; or &sum;)

√ or square root, radical sign

(&#8730; or &radic;)
HTML 4.0 Character Entity References

[Edited entry from 7/31/2005]



See all Topics

Labels: , ,


<Doug Klippert@ 2:59 AM

Comments: Post a Comment


  Saturday, October 04, 2008 – Permalink –

Script Bling

Page spice


Would you like to add an animation to your web page but don't know how to script?
SimplyTheBest.Net has a nice selection that can be easily pasted into your code.

Here are a few examples:

Animated page title script
A script that lets you animate the page title in the browser.

Animated message page
This script displays text messages on an introduction page before redirecting it to another page.

Bouncing image script
A script with which you can make an image bounce across the page.

Circling images
A script that will draw a circle consisting of a set of images around your mouse pointer.

Dynamic animation
This script can be used to fly text or images onto the browser screen from different directions.

Falling images
With this script you can make images fall down and then disappear from your page.

Floating images
A script that will float one or several images around the screen.

Search light
This DHTML script creates a search light effect on images using a start/stop link.

Transition effects
A script you can use to create transitions between images.

Text animation
A script to animate and fade in and/or fade out with text.

See:
Animation scripts

[Edited entry from 6/29/2005]



See all Topics

Labels: , ,


<Doug Klippert@ 6:18 AM

Comments: Post a Comment


  Tuesday, August 26, 2008 – Permalink –

Jargon translation

Tech Stuff for the Web


"There are many Web technologies, from simple to complex, and explaining each in detail is beyond the scope of this article. However, to help you get started with developing your own Web sites, beyond simple WYSIWYG designing of Web pages in FrontPage, this article provides brief definitions of the major Web technologies along with links to sites where you can find more information, tutorials, and reference documentation."



Introduction to Web Technologies for FrontPage Users


If you have seen or heard these terms, and want a definition with links to more background material, this maybe the place to start.

  • Access
  • ActiveX Controls
  • Apache
  • ASP
  • ASP.NET
  • C#
  • CGI
  • CSS
  • Databases
  • Ecma International
  • FrontPage Server Extensions
  • HTML
  • IETF
  • Internet Information Services
  • Java
  • JavaScript (JScript/ECMAScript)
  • MySQL
  • Oracle Database
  • Perl
  • PHP
  • SharePoint Team Services
  • SQL Server
  • VBScript
  • Visual Basic .NET
  • Windows SharePoint Services
  • World Wide Web Consortium
  • XML
  • XSLT


[Edited entry from 5/13/2005]




See all Topics

Labels: , , ,


<Doug Klippert@ 3:07 AM

Comments: Post a Comment


  Friday, August 08, 2008 – Permalink –

Favicons

Art in 16x16 pixels


When you link to certain sites, you might notice that a graphic is sometimes displayed instead of the IE logo. There are numerous sites that help to create and place these logos.

To add a Favicon, upload the file, favicon.ico to the root web directory of your hosted website Make sure the file is named "favicon.ico." When someone bookmarks your site with a browser that supports favicons, your mini-pic will appear.
You could also link it using this code:

<link href="favicon.ico" rel="SHORTCUT ICON">

MSDN.Microsoft.com:
How to Add a Shortcut Icon to a Web Page

Clickfire.com:
Place a Favicon on your Website

Michael P. Pierce:
MpP Favicon Gallery

Chami.com:
FavIcon from Pics

"FavIcon from Pics is an online tool that can generate a favicon from a picture, logo or other graphic of any size/resolution. It was also the first online tool that simplified the creation of favicons using a regular image without requiring manual edits."


Makiko Itoh:
favicon
" Here's a roundup of some of the favicons that caught my eye. Please click through to the sites themselves, to see how the favicon works (or not) with the site. Maybe it will get you thinking about your own site's favicon."


Daniel Burka:
Favourite Favicons

[Edited entry from 4/20/2005]




See all Topics

Labels: ,


<Doug Klippert@ 4:06 AM

Comments: Post a Comment


  Thursday, July 24, 2008 – Permalink –

HTML/CSS Resource

"The Ultimate"


You may be put off by the home page for this site, but drill deeper.
Blooberry.com
Brian Wilson

The Author has compiled a very well arranged collection of references.


You might want to go directly to:

Index D O T HTML
T h e A d v a n c e d H T M L R e f e r e n c e

Or

Index D O T CSS
T h e A d v a n c e d C S S R e f e r e n c e

Brian is looking for volunteers to expand the authoring base for this site. If you would like to participate, here is a link to his email address:
Blooberry Email

[Edited entry from 3/31/2005]




See all Topics

Labels: , ,


<Doug Klippert@ 4:34 AM

Comments: Post a Comment


  Wednesday, July 09, 2008 – Permalink –

Cascading Style Sheets

Good tutorial and reference


"Cascading Style Sheets (abbreviated CSS) add a new dimension to our pallet of Web design tools. They have the potential to allow a webmaster to control the appearance of countless web pages with one single file.

This file, known as a "Style Sheet", can be referenced by any number of web pages to define how certain areas of text appear on those pages.

With a simple change to this style sheet (to the font face, color, size, highlighting, border, or other properties), any page in the entire web site can instantly and easily be altered, eliminating the need to go through and change every single HTML tag.

In addition, style sheets add a number of other features, such as being able to specify text size in terms of points, highlighting text, using borders without the hassle of tables, defining paragraph indents, margins, and object positioning. They even provide the ability to layer elements over one another!"



University of Miami at Coral Gables:
Cascading Style Sheets


Also:
Documents and Materials

  • Beginning HTML
  • Advanced HTML
  • Cascading Style Sheets
  • Microsoft Excel
  • Microsoft PowerPoint
  • Microsoft Word

These documents are "PDF" files

[Edited entry from 3/15/2005]




See all Topics

Labels: , ,


<Doug Klippert@ 6:42 AM

Comments: Post a Comment


  Wednesday, July 02, 2008 – Permalink –

Very Clever CSS Playground

I didn't know you could do that!


"This site documents my attempts at understanding and exploring the possibilities of CSS. From standard navigation links to my more bizarre experimental techniques.

All my examples are produced with JUST CSS, no javascript, or any other language, has been used in any of the examples. The demonstrations are designed to work in all the latest browsers, but, if you're lucky, some may also work in earlier versions."


Stu Nicholls' Navigation Gallery.

Here are two of the examples demonstrated:

Messing about in boats
Hover over a picture and it enlarges to 100%

Also:



The Streaker
A piece of animation done with CSS alone, no Java.

(I haven't figured out how to use situational CSS in a blog, so you'll have to go to Stu's site to see if the guy gets to the other door.)

[Edited entry from 3/9/2005]




See all Topics

Labels: , ,


<Doug Klippert@ 4:51 AM

Comments: Post a Comment


  Saturday, June 21, 2008 – Permalink –

CSS Crib Sheet

Information rich site


When you get serious about web design, CSS or Cascading Style Sheets will add flexibility to your toolbox.


Mezzoblue .com has a wealth of information including:

CSS Crib Sheet

"You will no doubt come across many quirky layout issues when building a site with CSS. You'll end up banging your head against a wall time and again. This is an attempt to make the design process easier, and provide a quick reference to check when you run into trouble."


And:

A Roadmap to Standards
"The old-timers had to figure out the hard way all the tricks and techniques we now take for granted; lucky folks who came in later (myself included) can benefit from their sweat and tears.

In the end, when your skill using standard-based design eclipses your skill using old-school table-based methods, you’ll look back and marvel at how much more sense it makes to layout a page with CSS."


The RSS link is here

[Edited entry from 2/24/2005]




See all Topics

Labels: , ,


<Doug Klippert@ 5:07 AM

Comments: Post a Comment


  Wednesday, June 04, 2008 – Permalink –

Style Guide

Book smarts


These suggestions may help design your own web site. Unlike the library employees, you don't have to follow all the rules!


New York Public Library Style Guide

"This Style Guide for the Branch Libraries of the New York Public Library explains the markup and design requirements for all Branch Libraries web projects, along with various standards and best practices."

XHTML Guidelines
The rules of XHTML as compared to HTML—an easy transition

What is XML?
A brief introduction to the foundation of XHTML

XHTML Benefits
Four key benefits of converting from HTML to XHTML

XHTML Authoring Tips & Tools
Simplifying the work process—includes tips on thinking structurally, and tools for hand-coders and Dreamweaver users

XHTML Accessibility Tips
Making sure your pages can be read by all visitors, browsers, and devices

XHTML Validation
Ensuring interoperability by avoiding errors and sticking to standards
CSS Guidelines
Tips on authoring and linking to Style Sheets

Steal These Style Sheets!
Style Sheets for your use in Library projects

CSS Validation
Ensuring that your Style Sheets are error-free (same as XHTML validation)


[Edited entry from 2/2/2005]




See all Topics

Labels: , ,


<Doug Klippert@ 8:08 AM

Comments: Post a Comment


  Friday, May 16, 2008 – Permalink –

Link to PDF

Hyperlink to page numbers


The article tells how to link to named locations, but in most cases all you'll need is the page number:

Linking to Pages or Destinations Within PDFs
Dan Shea Associate Editor

Linking To Specific Pages

This is significantly simpler than linking to named destinations because it doesn't require any special steps to be taken in the preparation of the PDF file. I personally favor the page-linking method for this reason. In order to link through to a specific PDF page, begin with the domain, as you would for any web link:


http://www.mydomain.com/

Then add the name of the PDF document:


http://www.mydomain.com/myPDF.pdf

Then append "#page=" followed by the desired page number. For example, if you were looking to link to page 7:


http://www.mydomain.com/myPDF.pdf#page=7

So in all, the HTML link code would be:


<a href="http://www.mydomain.com/myPDF.pdf#page=7">Link text</a>


Example:

Also see:

Infoworld.com
Page-addressable PDF

Suggested in Scott Hanselman's Blog:
Addressing a PDF at the Page Level with an URL

[Edited entry from 1/10/2005]




See all Topics

Labels: , ,


<Doug Klippert@ 6:12 AM

Comments: Post a Comment


  Thursday, April 10, 2008 – Permalink –

Web News

Add news to your site



You can add information from other RSS or Atom sites to your own web page.


FeedSweep from Howell Developments takes care of the scripting. You only have to paste a short piece of code on your page. You can choose which feeds to display.

FeedSweep understands:


  • RSS 1.0 and variants
  • RSS 2.0 and variants
  • Atom 0.3
  • Slashdot Backslash


"Including up-to-date information from other web sites and news services bolsters your site's content and lets your visitors know they can come back to get updates on topics that are related to their interests. FeedSweep is a new, free service that allows anyone to include news feeds on his or her web site.

Create a Basic FeedSweep to browse and preview any of these styles, or create an Advanced FeedSweep and make your own style.

FeedSweep uses industry-standard JavaScript to draw news feed information on to web sites, so it is compatible with all the popular web browsers.

Plus, it's free."

I was pointed here by a reference on Excel News

[Edited entry from 12/1/2004]




See all Topics

Labels: , ,


<Doug Klippert@ 5:00 AM

Comments: Post a Comment


  Friday, March 21, 2008 – Permalink –

Free HTML Tools

Collection of helpful utilities




AXCEL216's MAX Speeed WinDOwS Tricks + Secrets:

HTML Authoring
Webmaster Resources

GIF + JPEG Shrinkers
Do you have large GIFs/JPEGs cluttering your internet/server space? Are your web pages loading too slow?

HTML Validators
These HTML/CSS/DHTML/XHTML validators check the accuracy of your code, reporting all aspects of design and eventual errors, flaws, invalid links etc

HTML Editors
Offline HTML + text editors

[D]HTML, XML, CSS + Java[Script] Resources
Java No Java... JavaScript dedicated web sites

FTP Transfer Tools
FTP transfer clients + FTP server tools


[Edited entry from 11/23/2004]




See all Topics

Labels: , ,


<Doug Klippert@ 7:36 AM

Comments: Post a Comment


  Monday, January 21, 2008 – Permalink –

Page-break CSS

Before or after


You can put a break on a web page like you can in a document.
A Cascading Style Sheet makes it simple

"The stub-ends left when paragraphs end on the first line of a page are called widows. They have a past but not a future, and they look foreshortened and forlorn."


Orphans are parts of a paragraph that begin on the previous page. An orphan has a future, but no past.

The only paging properties supported by Internet Explorer 7, Safari 3 and Firefox 2 are page-break-before and page-break-after.
The page-break-before and page-break-after properties enable you to say that a page break should occur before or after the specified element. The following example starts a new page every time an h1 heading is encountered and after every .section block.
h1 {
page-break-before:always }
.section {
page-break-after:always}


Etiquette of Pagination



See all Topics

Labels: , ,


<Doug Klippert@ 6:20 AM

Comments: Post a Comment


  Saturday, December 22, 2007 – Permalink –

FuzzyPad

HTML Preview



There you are, out in the wilderness of PCdom without a copy of FrontPage around. How do you find out what HTML tags looks like?
(fire up notepad, save the file, open with a browser)

Try FuzzyPad

There are no text files to save and reload. Just write a few lines of text, a few tags, even paste some text in the box from some other application if you want. When you press the button, it will show you how what's in the box will look when run through the web browser your using now.



HTML Preview
Preview HTML in a new window by entering it into the form. This script allows you to pass anything to a new window.
Instructions help you create a preview on your own web page.

Such as:
HTML TEST BED

[Edited entry from 11/7/2004]




See all Topics

Labels: , , ,


<Doug Klippert@ 6:31 AM

Comments: Post a Comment


  Saturday, November 24, 2007 – Permalink –

MHTML

One file web pages



When a web page is created using HTML, the coding is normally contained in one file and the graphics in separate folders.

The Mime HTML or MHT/MHTML format changed that.

Starting with Office 2000 as an add-in and carried through XP as a "Web Archive" option, the format emerged in Office 2003 as a "Single file web page" selection in the File Save As dialog box.


Features in Internet Explorer 5 +


Here are the Save As choices available in an application such as Word:



  • Web Page, Complete means that the contents of the page (including any pictures) will be saved into a folder as separate files, similar to those on the server hosting the site.

  • Web Page, HTML only means that only the HTML information will be saved. This option and Web Page, Complete will enable you to open the file for viewing in Internet Explorer (or any other browser) at a later time, even when you are offline.

  • Web Archive means that the page will be saved, along with any images it contains, as a single file. You can view a Web Archive later without being connected to the Internet.

  • Text File means that only the text on the page will be saved, not the HTML (or any other) formatting, including graphics.


MIME Encapsulation of Aggregate HTML Documents (MHTML)

Short Summary of the MHTML Standard

[Edited entry from 10/15/2004]




See all Topics

Labels: , , ,


<Doug Klippert@ 6:16 AM

Comments: Post a Comment


  Sunday, November 11, 2007 – Permalink –

New Window

Pick your target



Expression Web/FrontPage/HTML provides the opportunity to choose how a page opens when you click on a hyperlink.

Create a hyperlink as you usually would by selecting the text (or graphic) you want to use for the link.

Choose Insert > Hyperlink... (or use Ctrl-K or the toolbar icon Link icon as a shortcut), and locate the page in the current web or enter an address in the URL field.

On the right side of the Create Hyperlink window you'll see a button named "Target frame"; click the button.

You'll get the Target Frame dialog box.

In the "Common targets" field, select New Window.

Click OK, then click OK to close the Create Hyperlink dialog box.

Your hyperlink will now open a new browser window when clicked.

Target page
The code would appear like this:
<a target="_blank" href="TCC/Blog/blogger.html">Blog</a>

To make it the page default, place the following code in the "head" section:
<base target="_blank">

[Edited entry from 10/23/2004]




See all Topics

Labels: , ,


<Doug Klippert@ 6:17 AM

Comments: Post a Comment


  Saturday, October 27, 2007 – Permalink –

Learn HTML

HEADING


More tutorials



I like to read more than one author on a subject. It helps to clarify the sticky parts and each writer has a little bit different perspective on the subject.

WebReference.com has a good collection of material related to the Web and the Internet in general.


Stephanos Piperoglou has written a number of tutorials on Web design and construction.
From HTML 101 to I Shot the Serif and The Seven Habits of Effective Web Sites .


About HTML with Style



W3 Schools


Also:
HTML Tutorials



[Edited entry from 10/7/2004]



See all Topics

Labels: , ,


<Doug Klippert@ 6:19 AM

Comments: Post a Comment


  Friday, October 19, 2007 – Permalink –

Type, what it looks like

Screen fonts preview


This is a tool that lets you see how different typefaces will look on the screen. It also allows you to compare three fonts at once.


"The Typetester is an online application for comparison of the fonts for the screen. Its' primary role is to make web designer's life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated."


TypeTester



See all Topics

Labels: , , ,


<Doug Klippert@ 4:55 AM

Comments: Post a Comment


  Thursday, October 11, 2007 – Permalink –

Guide to CSS

Map through the forest


Dustin Diaz:
"Ok. Let's set the record straight. There is no official guide for each and every CSS shorthand property value. So let's work together and put one together shall we?

Ok. Straight to the business. Anytime I've ran into a specification (besides the confusing mess at the W3C), it turns into showing off a couple of examples and you're supposed to be set on your way.

Well well. Over the years, I've found quite some interesting unknown quirky facts about these shorthands. . . hence this Guide was born."



CSS Guide



See all Topics

Labels: , , ,


<Doug Klippert@ 8:03 AM

Comments: Post a Comment


  Saturday, September 15, 2007 – Permalink –

W3C Validation

Standards



Web pages are written in a language called Hyper Text Markup Language; HTML
The latest version of HTML is 4.01.

There is a move to upgrade the code to Extensible Hyper Text Markup Language.

XHTML is compatible with XML (EXtensible Markup Language) allowing applications to more easily exchange data.

In preparation for making the change, edit your web pages so that element and attribute names are in lower case. XHTML is case-sensitive.

Use <p> rather than <P>.

Also end tags are required. Make sure that <p> is followed by </p>.

<br> should be written <br /> and <hr> as <hr />.

For more information see:

The W3C validation site


Also:

New Line

[Edited entry from 9/19/2004]




See all Topics

Labels:


<Doug Klippert@ 7:29 AM

Comments: Post a Comment


  Sunday, September 09, 2007 – Permalink –

New Line

Shift Enter



When you hit the Enter key, the FrontPage/Expression Web editor inserts an HTML <p> (paragraph) tag. This appears as a double line space in a Web browser.


To insert a single line space (or line break) via an HTML <br> tag, just hold down the Shift key and hit Enter.

This happens when you use the

Enter key

Here's what happens with
Shift +Enter


You could also use Insert>Break... Normal Line Break, but that takes too long.

By the way, if you want your code to be XHTML compliant, use lower case for the elements and pair every <p> with a closing </p>


Differences with HTML


Single elements can be used with a built in closer such as:
<hr /> or <br />

[Edited entry from 9/12/2004]


See all Topics

Labels:


<Doug Klippert@ 7:31 AM

Comments: Post a Comment


  Wednesday, August 29, 2007 – Permalink –

Define URL Pieces

More than dot com


Google engineer and blogger Matt Cutts has defined the pieces that make up a Uniform Resource Locator.

At least as Google refers to them when they're sitting around in their backrooms
Domain

Dynamic URL


Fragment or a Named anchor


The Googlers I've talked to are split right down the middle on which way to refer it. Disputes on what to call it can be settled with arm wrestling, dance-offs, or drinking contests. Typically the fragment is used to refer to an internal section within a web document. In this case, the named anchor means "skip to 2 minutes and 30 seconds into the video."


Host


Parameters


Path


Port


Protocol


Second-level domain


Static url


Subdomain


Top-level domain


Parts of a URL



See all Topics


See all Topics

Labels: ,


<Doug Klippert@ 7:42 AM

Comments: Post a Comment


  Saturday, August 18, 2007 – Permalink –

CSS

Cascading Style Sheets



As a web page is formatted in FrontPage, the style choices are applied to each element.
To format the body of the page, the HTML code might be:

<body background="blue" color="white" font-family="times, serif" font-size=10pt>

Every page on the site would need to be coded this way in order to have a consistent look.
Cascading Style Sheets will simplify the problem. On an external page the elements can be defined like this:

body {
background: blue;
color: white;
font-family: times, serif;
font-size: 10pt


Each page would contain a reference to the CSS definitions:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>


When the element "body" is used it will now use the CSS references.

For more information see:

Using Cascading Style Sheets on Your Web Site
David Berry

and
Eric Meyer's Site

In this Blog:
CSS Links
and:
More Cascading Style Sheet Help

[Edited entry 9/4/2004]




See all Topics

Labels: ,


<Doug Klippert@ 6:45 AM

Comments: Post a Comment


  Thursday, July 19, 2007 – Permalink –

HTML Email

Formatting


Here are some guidelines for creating HTML formatted emails.

It includes suggestions on the use of inline CSS and tables.

There are also links to other sources

HTML-formatted mail message


See all Topics

Labels: ,


<Doug Klippert@ 7:56 AM

Comments: Post a Comment


  Sunday, June 24, 2007 – Permalink –

DOCTYPE

Customize



At the top of an HTML file source, you may see some code that indicates the version of HTML that is going to be used.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

The O'Reilly Net.com has a discussion:
DOCTYPE Explained.

"There are three variants on HTML 4.01, for example:

  • HTML 4.01 Strict, which describes the structural portions of HTML 4.01 and does not provide any frame-related markup.
  • HTML 4.01 Transitional, which includes the presentational markup such as >B< and >FONT<, but does not include frame-related markup.
  • HTML 4.01 Frameset, which is the same as HTML 4.01 Transitional except that it adds a description of frame-related markup."



From Thomas Brunt's Outfront.net

Editing the FP 2003 Default Template

"I've heard some folks complaining that FrontPage doesn't include a doctype declaration when you create a new page. If that's a problem for you then why not just edit the default template? That's the file that FP copies every time you create a new blank page.

Here's the location of the file. Change it you like.

C:\Program Files\Microsoft Office\Templates\1033\Pages11\normal.tem\normal.htm

FP 2003 gives you a choice of doctypes to enter somewhat automatically, however. You can edit what's available and add your own stuff too."

Also:
Fix Your Site With the Right DOCTYPE!
Choosing a DOCTYPE
The global structure of an HTML document

[Edited entry from 8/26/2004]




See all Topics

Labels: , ,


<Doug Klippert@ 7:46 AM

Comments: Post a Comment