HTML and CSS Tutorials from HTML Dog
HTML Dog offers HTML and CSS tutorials for a beginner, intermediate, and advanced web designer/developer. The website is very well designed and easy to navigate. The information in the tutorials is clear, concise, informative, very useful, and overall well written. You can also get information from additional references including HTML tags and CSS properties. There are articles available that build on the tutorials providing a more detailed understanding of certain topics. If you would like to see what you have been reading about in the tutorials in action, you can view a large number of examples spread across seven different categories.
The tutorials, articles, and examples from HTML Dog are written with a strict adherence to the Web Standards created by the W3C. The information was created by Patrick Griffiths who has been a front-end web developer using HTML and CSS since 1999. He has contributed to well known and credible sites like A List Apart and the CSS Zen Garden.
If you find the information useful and would like to have a copy of it, you can purchase a copy of the HTML Dog book which includes information similar to the tutorials and articles. You can get your copy at Barnes & Noble, Borders, and Amazon.com.
Creating a WordPress Widget
If you are reading this post, you are familiar with a wordpress widget because you can see multiple widgets displayed in the right hand sidebar of this theme. The Archives, Recent Posts, Blogroll, and Links are all wordpress widgets. If you are asking yourself, "why create a wordpress widget?" here is a short answer:
This blog, like many others, is run using wordpress (wordpress was downloaded 3,816,965 times in 2007 alone). WordPress has become increasingly popular thanks to the incredible features, themes, and plugins offered, both by wordpress.org, as well as third party developers, such as:. The administrative end of wordpress is very easy to use and at the same time very powerful. The blog has all the necessary features necessary to run a successful blog, as well as the ability to add onto the large set of tools included with the download and installation of a wordpress blog. One of the best features of wordpress in my opinion, is the ability to create plugins and widgets that suit your needs. Once the plugin or widget has been successfully created, implementation is even easier. So now that we have covered a little background information, let's get started!
Steps
1. Create a php file and put it in the "wp-content/plugins" directory in your wordpress installation path.
2. The first information in the widget file is required to be there. Each line needs to be there and is fairly self-explanatory. These lines tell the wordpress plugins manager what the plugin is, who made it, what version it is currently in, and the links to provide support and updates. It looks like this:
/*
Plugin Name: Test Widget
Plugin URI: http://smseserver.com/blog/
Description: This is my first custom created widget.
Version: 1.0
Author: Scott Spear
Author URI: http://smseserver.com/blog/
*/
3. Create the function to initialize the widget. The widget_test_init() function checks if you can register custom widgets and then loads the actual widget function, in this case named "widget_test()". The last line actually registers the new widget by calling the register_sidebar_widget() function.
function widget_test_init() {
if (!function_exists('register_sidebar_widget')) {
return;
}
function widget_test() {
echo 'This is the test widget.';
}
register_sidebar_widget(array('Test Widget', TestWidget'), 'widget_test');
}
4. After the widget is registered to the sidebar, the very last line will call the add_action() function to load the widget and show it in widget control in the admin section of your blog. The function looks like this:
add_action('plugins_loaded', 'widget_test_init');
The final php file would look like this:
<?
/*
Plugin Name: Test Widget
Plugin URI: http://smseserver.com/blog/
Description: This is my first custom created widget.
Version: 1.0
Author: Scott Spear
Author URI: http://smseserver.com/blog/
*/
function widget_test_init() {
if (!function_exists('register_sidebar_widget')) {
return;
}
function widget_test() {
echo 'This is the test widget.';
}
register_sidebar_widget(array('Test Widget', TestWidget'), 'widget_test');
}
add_action('plugins_loaded', 'widget_test_init');
?>
Apache mod_rewrite Basics
Apache mod_rewrite is a tool that I wish I had tried to understand a lot early than I did. It makes URLs look so much cleaner not to mention the positive SEO results. This capability can take a URL that is common in PHP that looks like: http://www.yoursite.com/users.php?name=testuser&mod=settings and turn it into a URL that looks like: http://www.yoursite.com/users/testuser/settings.
The basics are fairly easy and straight forward. You will need to create a .htaccess file in the directory you want to format the URL. I always include in the first line of the file "RewriteEngine on". You can use "RewriteEngine off" to disable blocks of rules so that you don't have to comment them out or delete them from your .htaccess file. The RewriteRule directive uses Regular Expressions to match the URL typed to the URL you want.
Example:
RewriteEngine on
RewriteRule ^my/account([/]*)$ myacct.php
RewriteRule ^news/([0-9]+)$ news.php?id=$1
Explanation:
RewriteRule ^my/account([/]*)$ myacct.php: This rule looks for a URL starting and ending with "my/account" after the website, for instance http://www.yoursite.com/my/account and then changes it on the server side to be http://www.yoursite.com/myacct.php, but the user only sees http://www.yoursite.com/my/account.
RewriteRule ^news/([0-9]+)$ news.php?id=$1: This rule looks for a URL starting with "news" after the website. After "news" it looks for a number that corresponds with the id generated with the news posting. The "+" allows for one or more digit to be entered. For instance http://www.yoursite.com/news/1 would be changed on the serve to http://www.yoursite.com/news.php?id=1 , but the user only sees http://www.yoursite.com/news/1.
I hope this helps get you started. This is just a basic tutorial and there is so much more that can be done with Apache's mod_rewrite feature. For more in depth information, check out these resources: