CSS implemention in HTML

CSS = Cascading Style Sheets, this is done primarily to externalize the ‘look and feel’ of a web page from the actual ‘data’ being presented.

There are several ways to do this…
1. External file (most common)… add the following to the <head> section of your page:

<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="/filename.css" media="all" />

2. Inline (usually in the <head> section of every page):

<style type="text/css" media="screen">
<!--
... // some stuff here.
-->
</style>

3. Inline (on individual tags):

<div style="color:red;">Red text</div>

NOTES:
1. Media types (common – though others exist!):
* screen
* print
* all

2. Guideline: always use lowercase names in your CSS, MUST start with an alpha (not numeric).

Why <!DOCTYPE …>?

The !DOCTYPE directive is one of the most commonly misunderstood parts of markup in the entire page, additionally, most WYSIWYG editors get it wrong.

This serves two major purposes, with one common goal – ‘standards’!

1. Validators can easily look to the markup to determine which version of the HTML/XHTML standard to validate against (actually, it’s done against the DTD that you define within the tag).

2. Browsers also use this tag to determine which version of the HTML/XHTML standard to render with… however, the most common browser currently on the market (MSIE), chooses to ignore it!

3. Other markup languages (decendent of SGML, like HTML and XHTML) like WML also use this tag.

NOTES:
1. This tag doesn’t follow standard XML rules, there is NO close tag, but it’s not self-closing either.
2. This MUST be the very first line of output in your HTML.
3. Because of the MSIE issue, you cannot start your page with: <?xml version="1.0"?> for XML!

Some common examples:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

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

References:

Enabling A Secure Apache Server w/SSL Certificates

If you’ve taken some time to wander around my site, you may have noticed that I also have SSL enabled (with https://www.giantgeek.com/ url’s). Here’s the steps you can take on your site/server – provided you have proper access.

Download and install Apache-OpenSSL and OpenSSL – I’ve found http://hunter.campbus.com/ to be a reliable source for precompiled binaries for Win32 platforms.

Install OpenSSL, and add the following environmental variable.
OPENSSL_CONF=[apache_root]/bin/openssl.conf (.cnf?)

Generate a private key:
openssl genrsa —des3 —out filename.key 1024

Create CSR Request…
openssl req —new —key filename.key —out filename.csr

This step will ask for several pieces of information, here’s my example:

Country Name (2 letter code) [AU]:US
State or Province Name (full name) [Some-State]:Illinois
Locality Name (eg, city) []:Carol Stream
Organization Name (eg, company) [Internet Widgits Pty Ltd]:Dean Scott Fredrickson
Organizational Unit Name (eg, section) []:Giant Geek Communications
Common Name (eg, YOUR name) []:www.giantgeek.com
Email Address []:[email protected]
Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:xxxxxxxxxxxxxx
An optional company name []:Giant Geek Communications

You can now send this CSR to a valid Certifying Authority…
I currently use http://www.comodo.com/.

It’s very likely that the CA will need to verify your identity, typically this requires you to fax a copy of your id card/passport or business papers. A D-U-N-S Number (from Dun and Bradstreet) will make this easier for businesses.

If you don’t plan on having lots of users, you can create a Self-signed certificate…
openssl x509 —req —days 30 —in filename.csr —signkey filename.key —out filename.crt

You’ll need to install the files received from the CA, but it’s pretty trivial so I’ll leave it for later.

NOTE: this process is obsolete, from what I can gather it was only supported in MSIE6, and possibly MSIE7.

Use of this tag will disable the Image Toolbar (normally accessed via right-click) within MSIE. Typically it is enabled whenever an image larger than 130×130 is displayed.

Implementation:
Add the following to the <head> section of your webpage(s):
<meta http-equiv="imagetoolbar" content="false" />

Alternately, you COULD use some proprietary MSIE attributes on the <img /> tag.
<img src="..." galleryimg="false" />

Even when you use the META tag to disable this feature for all images, you can explicitly re-enable it with the following proprietary tag…
<img src="..." galleryimg="true" />

References:

NOTE: this is an obsolete practice, and should be removed unless you plan to support beta versions of MSIE6.

The story behind this tag is one of virtue. Microsoft, as they do TOO often, added a ‘feature’ in beta versions of Windows XP (MSIE 6.0) that enabled the browser itself to analyze the content on a given page, and insert links to other websites. This was "e;spun" as being good the the visitors of your website, because they could be exposed to related products or services. Unfortunately, the webmaster and site owners had no say in what content was being linked or to where… which could be a competitor!

This tag was added as a method to prevent these "Smart Tags" from operating on websites… in the end, Microsoft did not leave this feature (enabled?) in the released version of Internet Explorer 6!

BTW, there are some JavaScript libraries today that offer similar functionality, but they are not related to this tag.

Implementation:
Add the following to the <head> section of your webpage(s):
<meta name="MSSmartTagsPreventParsing" content="TRUE" />

REFERENCES:


GeoTags

To build on my recent post on ‘geoURL’, there’s also another system available known as GeoTags. Adding your site to their list is also trivial…

1. The “hardest” step – find your Latitude and Longitude, several sites like Google Maps make this simple if you don’t have access to a GPS reciever…

2. Add the following to the <head> section of your page(s):
<meta name="geo.position" content="41.937891;-88.142111" />
<meta name="geo.placename" content="Carol Stream" />
<meta name="geo.region" content="US-IL" />

NOTE: The above entries are my own, yours should be different.

3. After you’ve uploaded the change, submit your site at the following URL:
http://geotags.com/

FYI, It appears that they’ve also worked out a way to define your location in an RSS Feed… more on that later!

Blood Donation

As I’ve often done in the past, I gave blood recently. Since I’ve lived in the Chicago area, I’ve always done so at LifeSource Blood Centers. This time, however I was introduced to a new device/method this time. As I’m RH Type A+ (being pretty common in the US), it was recommended that I donate ‘red cells’ instead of just whole blood.

Other than taking only a few extra minutes, here’s how it’s different….

After the usual bureaucratic process and paperwork involved in giving blood, they hook you up to a machine called ALYX that runs the process.

It may sound complex, but the process is really simple…
1. A unit of whole blood is taken from you.
2. The blood is then separated into plasma and red blood cells.
3. The plasma is mixed with ‘room temperature’ saline solution.
4. The plasma/saline is returned to your body. (room temperature seems a little ‘cold’ when it returns).
5. Steps 1-4 repeat several times.
6. Remaining ‘whole’ blood, and plasma is returned to your body.
7. Done!

My first experience doing this was a pleasure, the worst part of all being the ‘stick’ they did in my finger to test my hemoglobin, which hurt like hell even hours later!

Added benefits of this process…
1. You actually give ‘twice’ the blood you would if you just gave whole blood. As such, you only visit half as often (16 weeks vs. 8, I think!)
2. With the addition of ‘saline’ to your body, you are slightly more hydrated when you leave.

I recommend that you all “save a life” by giving blood!

Ego searching – skotfred

So, here’s a little more about me… feel free to network with me if you’d like…

Direct linked to my profile:

Indirectly linked:

I’ll add more links as I become aware of them.

Pingomatic

I was looking through the WordPress admin screens, and found that it ‘pings’ http://rpc.pingomatic.com/ each time you update/add an article.

So, being the curious sort, I looked into this and found that it’s really and open input to update your Blog listing in several search engines.

To manually submit, you can fill in and submit the form available at http://pingomatic.com/.

They also have a Blog of their own at http://pingomatic.wordpress.com/.

geoURL

GeoURL is a location-to-URL reverse directory. This will allow you to find URLs by their proximity to a given location. Adding your site to their database requires minimal work.

1. The “hardest” step – find your Latitude and Longitude, several sites like Google Maps make this simple if you don’t have access to a GPS reciever…

2. Add the following to the <head> section of your pages:
<meta name="ICBM" content="XXX.XXXXX, XXX.XXXXX" />
<meta name="DC.title" content="THE NAME OF YOUR SITE" />

3. After you’ve uploaded the change, submit your site at the following URL:
http://www.geourl.org/add.html

For more info:
http://www.geourl.org/