But what can you do if you do not know how to create a HTML document? You could use an HTML editor or, if you just need to turn a plain text file into HTML, use the free software Text2HTML.

You should not expect wonders though. Text2HTML is as basic as it gets. More about that later.

When you start the portable software you will notice several configuration options at the top of the window. Here you can change the background and text color and the font size of the HTML document. And that’s it.

No title, headings, images or other features are supported by the application. The program displays a preview of how the text will look like in the HTML document.

To convert text documents all you need to do is to drag and drop files or entire folders with files into the program interface.

Text2HTML will list all files in its interface. All that’s left to do now is to click on the Make HTML button to turn all listed text documents into HTML documents. The file is created in the same directory as its source text document.

Please note that the program supports HTML tags in those documents. If you know your way around HTML you could add formatting options directly to the documents. The more you work on the documents this way the less helpful the software becomes on the other hand.

Text2HTML is a handy program for users who do not know HTML but need to create HTML documents, for instance to publish them in the company Intranet or on the Internet. If the provided options are not sufficient you could look at free HTML editors such as BlueGriffon or Bluefish (Linux) instead which offer more functionality but are more complex to work with at the same time.

Interested users can download the portable software Text2HTML from the developer website. The application is compatible with 32-bit and 64-bit editions of the Microsoft Windows operating system.

This has come as a surprise to many people as it’s the first version of the HTML language to have a logo.  This is no ordinary version of HTML though and the reasoning behind the new marketing campaign is both sensible and practical.

In a press-release the World Wide Web Consortium said…

“It stands strong and true, resilient and universal as the markup you write. It shines as bright and as bold as the forward-thinking, dedicated web developers you are. It’s the standard’s standard, a pennant for progress. And it certainly doesn’t use tables for layout.”

We’re moving into an area of computing when we’re breaking free of the legacy shackles of old.  HTML 5 is an important step forward with this but many web-based companies and even individuals with their smaller websites might be hesitant to embrace the new standard.

People and companies naturally want the maximum number of people to be able to visit their website and today that’s easy.  I can remember only ten years ago though people shying away from the use of Flash because there simply weren’t enough people with the Flash player software installed on their computers.

These days the Flash player is everywhere but HTML5 browsers aren’t.  There will be huge numbers of websites and companies watching the uptake of compatible browsers with a keen eye, and this will be one of the biggest ongoing stories for the next few years.

So it’s reasonable and rational that the W3C should launch a logo and try to kick-start a marketing campaign to get HTML5 adopted early.  We can only hope that they succeed.  Here’s to the HTML5 version of gHacks.net!

Sometimes though WordPress is not an option, which is for instance the case if no database is available which the blogging platform requires. Plain HTML sites or pages are then an option. I usually hack them right into notepad but some users may prefer an HTML editor for that.

BlueGriffon is a free portable HTML editor for Linux and the Windows operating system that can be used to create websites in a graphical user interface.

The HTML editor uses Firefox rendering engine and an option to display any website directly in its interface. That’s great for testing HTML code on the site or “borrowing” contents from it.

The editor comes with the usual features and options one would expect. A lot of HTML elements are selectable from top including tables, links, images, forms, text formatting options, media. Stylesheets are supported as well and it is always possible to switch between the what you see is what you get editor and the source editor.

The editor does not seem to support projects with multiple pages at this point in time which means that users who need to create several pages for the same web project need to do some extensive copying and pasting to do so.

The use requires knowledge of HTML elements even if they are selected from the menu in the WYSIWYG editor as the program offers no explanation of their functionality. Adventurous users can use trial and error to find that out but it definitely helps to know the majority of HTML elements to avoid this situation.

BlueGriffon is available from the project website for Linux and Windows.

Website validators like the W3C Markup Validation Service check a web page for validation errors. Webmasters use these services to correct validation errors on their websites.

Here is an example why validation is important. About a year ago I noticed that the RSS feed of Ghacks was throwing an XML error in Internet Explorer 8. This was caused by a single character in one of the latest articles that was not escaped (meaning instead of writing the character & directly one would have to use & instead.

That single character caused problems in the feed delivery, and I had to work longer than usual to get it fixed. Consequences of invalid code are not always that drastic, but it exemplifies the impact that it can have on a website.

Validome is another website validation service. It is a bit stricter when it comes to validating pages. It can happen that a page passes as a XHTML 1.0 Transitional document in the W3C validation, and fails in the Validome validation.

Another difference between the two validation engines is that Validome supports verifications of local and remote documents. Users can either enter an url in the form on the site, or upload a document from their local computer system.

Extended settings are offered to check the document with a specific user agent or language.

A click on Validate performs the validation of the document. Errors are displayed directly.

The service lists the line and column of the validation error, the error position and an explanation of the error. This is often enough to fix the issue in the document.

Validome is an excellent alternative to the W3C validation service. It is usually enough to use Validome since it appears to be stricter in the validation. Most webmasters on the other hand will probably use both services anyway.

For those Linux (and BSD, and Mac, and Windows) users, the tool by which most measure the standard is Bluefish. Bluefish is a GPL software that was started in 1997 to facilitate web development on the Linux platform. Although the programmers and the name has changed over time, the intent has not. Bluefish was and is a fantastic HTML editor.

Features

• Lightweight
• Fast
• WYSIWYG interface
• Multiple document interface. Opens 500+ documents simultaneously.
• Project support.
• Multi-threaded support for remote files using gvfs.
• Powerful search and replace.
• Open files recursively.
• Snippets sidebar.
• Integrate external programs.
• Integrate external filters.
• Unlimited undo/redo functionality.
• Program-language aware in-line spell checker.
• Auto-recovery of changes.
• Character map of all unicode characters.
• Upload / download synchronisation.
• Full screen editing.
• Customizable programming language support.
• Multiple encodings support.
• Bookmarks functionality
• HTML toolbar and tearable menu’s.
• Compliance with the Gnome and KDE.
• Translations into ten languages.

Installation

The installation of Bluefish is simple:

Open up your Add/Remove Software tool.

Search for “bluefish” (no quotes).

Mark Bluefish for installation.

Click Apply to install.

Figure 1

You will have to enter your administrative password and accept any dependencies that might be necessary. When Bluefish has completed installation you will find the application in Applications > Programming. When the tool starts up you will notice a ton of features quickly available (see Figure 1).

Once you start working with the editor you will want to start immediately using the syntax highlighting. In order to do this you will first select the type of document you are working with (click Document > Document Type > HTML if you are working with an HTML document). Once you have selected the type of document, update the highlighting by either clicking F5 or clicking Document > Update Highlighting.

You will also notice all of the toolbars in Bluefish. There is a Main toolbar, a custom toolbar, an HTML toolbar, and a sidebar. The HTML toolbar is exactly what you would expect – it contains all of the icons for adding tags to your document. The sidebar allows you to navigate your directory hierarchy as well as check reference materials for different styles or types.

Also included with Bluefish is the ability to preview your code in a browser. As any good HTML editor, you can view your code in multiple browsers – and even add new browsers from within the Preferences window. To add a new browser click the Preferences icon on the main window and then select the External Programs tab. Here click the Add button near the middle of the right pane and then double click under the Name column (and enter the name of your browser) and then double click under the command column (and enter the command necessary for the new browser).

After you add a new browser it will show up in the External menu.

Final thoughts

If you prefer to do your HTML work by hand, in an HTML-specific text editor, you can not go wrong with Bluefish.

The Thunderbird email client supports both plain text and HTML emails. The account settings hold the default preference for each email account in the mail client. This only affects email messages that are created in Thunderbird, not messages that are received.

html emails

The preference for incoming emails is found under View > Message Body As. Here it is possible to switch from the default Original HTML to Simple HTML or Plain Text.

incoming emails plain text

This preference is valid for all incoming emails, regardless of the email address they have been sent to.

Original HTML

If you choose View – Message Body As – Original HTML, then you see HTML messages in their original form, except that:

* For privacy reasons you can choose not to allow messages to run JavaScript code.
* For privacy reasons you can choose not to allow messages to download remote images.
* Some messages might contain non-standard HTML that Thunderbird does not support.

For privacy settings, choose: Options (Preferences) – Privacy – General

Note: There are normally no security issues when you read a message in Thunderbird. It is not normally possible for hostile code to attack your computer just because you read a message. But if you open an attachment, then Thunderbird passes the attachment to your operating system or to some other application. Your operating system or the other application might allow the attachment to attack your computer.

Simple HTML

If you choose View – Message Body As – Simple HTML, then you see HTML messages in a simplified form. Thunderbird does not run JavaScript code, and does not download remote images. Simple HTML preserves basic HTML formatting.

Plain text

If the message is plain text, then you always see plain text.

If you choose View – Message Body As – Plain Text, then you see plain text even if the message is really HTML. If the message is multipart, then you see the plain text part. Otherwise Thunderbird converts the HTML message to plain text.

Thunderbird normally enhances plain text by supporting certain HTML-like features:

• Bold, italic and underlined text.
• Smileys displayed as images.
• Attached images displayed in the body of the message.
• Links displayed in blue, and underlined.
• Flowed paragraphs (if the message was sent using flowed paragraphs)
• Quoted paragraphs outlined with colored bars (if the message was sent using flowed paragraphs)
• Signatures displayed in gray.

The supported smileys are:
:-) :) smile
:-D laughing
:-( :( frown
:-[ embarassed
;-) ;) wink
:-\ undecided
:-P ;-P tongue
=-O surprise

:-* kiss
>:o >:-o yell
8-) cool
:-$ money
:-! foot
O:-) innocent
:'( cry
:-X sealed

It sometimes may be necessary to write HTML emails and plain text emails, depending on the recipient. While it is possible to switch the format in the account settings, it is possible to make a temporary switch when composing emails.

Holding down the Shift key before clicking on create a new message, or one of the reply options, switches from the default writing mode to the other.

Thunderbird will automatically display the plain text email editor if HTML emails are the default, and vice verse if the Shift key is pressed.

The composition window will display HTML elements like bold or underline if an HTML message is composed, or no text formatting options if it is a plain text email.

HTML Email composition window

html email

Plain Text composition window

plain text email

Holding down the shift key is the fastest way of switching between HTML and plain text composition windows.

The relevant characters that need to be escaped are ', ", &, < and >. (I had to escape them while writing this article to avoid xml errors on the page. Webmasters have several options to escape these characters. They can escape them manually, use an online tool to convert them (see How To Display Valid Markup Code In Websites) or a software program like the XML Escape Tool.

Source code has to be pasted into the first form field in the application window. The tool can then escape the source code if the user clicks on the Escape button or unescape the source if the Unescape button is pressed.

The resulting code can be copied automatically to the Windows clipboard. The benefit of using a desktop software program to escape the characters is that it works if no Internet connection is available. Users who want to try the software can download it from the developer’s website.

An OpenID is an URL. However, using an URL like http://computerjoe.myopenid.com/ to log-in and post comments with just doesn’t look sophisticated. I much prefer to use my own blog’s URL to post comments and log-in; it pumps traffic to my blog and frankly just looks better.

Whilst you could run your own OpenID identity server to do this, this takes quite a bit of expertise to set-up and whilst it is probably more secure, it isn’t needed in my opinion.

It is possible to use a any identity server with your website’s URL. I personally use MyOpenID, but I log in to sites with joeanderson.co.uk/blog; not with computerjoe.myopenid.com.

This can be done by simply adding a few lines of HTML to your website’s <head>.

For example, I put

<link rel=”openid.server” href=”http://www.myopenid.com/server” />
<link rel=”openid.delegate” href=”http://computerjoe.myopenid.com” />

Naturally, these have to be modified depending on your username and server, but the provider should provider the information.

There are several benefits using this type of OpenID identificatin. The main one is that it just looks better but the most practical one is probably that it allows you to change provider whilst keeping the same log on. So, if I suddenly decide not to use MyOpenID, I can change to any other provider but my URL remains the same.

Sticking to standards can therefore lead to issues with certain web browsers, which lack support for the latest tags or render pages wrong.

The W3C therefore has its own web browser and editor which adheres to standards more than many browsers and supports certain new technologies others don’t, such as RDF annotation. This browser is Amaya, an open-source and cross-platform browser.

Amaya can handle a wide-range of open file formats, including HTML, CSS, XHTML, SVG and MathML.

The software integrates the browser and web editor: when you go to a web page, it can be edited inside the browser. It also instantly displays syntactic errors.

It also integrates the mark-up languages. For example, in a web page, one can write formula utilising MathML or add SVG shapes inside the software.

Amaya is a reasonable WYSIWYG editor and a good web browser for developmental purposes. It is also good to produce rich web-pages, which include other pieces of mark-up than HTML.

Update: Amaya has not been updated in the last two years. While it is still possible to use the cross-platform HTML editor it needs to be noted that it does not support recent technology advancements. This includes no support for HTML5 or CSS3 in the last release.

Windows and Linux users find in Blue Griffon a suitable alternative. Blue Griffon user however need to know HTML to work with the program, as it does not display information about elements that can be selected in the editor. Users who know their HTML elements will find it to be a suitable alternative for Amaya.

Webmasters need a local html file so that it can be loaded into the software program. The easiest way to achieve this is to go to the website that should be validated, view the source code of it and save it as html on the computer system.

This html file can then be loaded and analyzed in the software. The html code will then be validated by the software. It will immediately jump to the first error in the code and link it to the errors and comments in the footer area. This makes it very easy to understand (in most cases) why something is not right with the code. It is possible to edit the html code right in the HTML Validator to correct the errors that have been discovered. It is still necessary to correct the error on the web as well obviously if the html code has been downloaded from the web.

The program comes with a few additional functions that help in certain cases. It is for example possible to convert all tags of the html document to lowercase, find and replace code in the html file or to use a spell checker.

CSE HTML Validator Lite can be downloaded from the developer’s website. It is available for all Windows operating systems including Windows XP, Windows Vista and Windows 7.

The main problem that arises when using the Word HTML rendering engine is that Microsoft Outlook 2010 will not support web standards like CSS or background images. This could very well mean that Outlook 2010 users will be stuck with broken HTML emails for the next years after the release. Below is an image that is showing a HTML email in both Microsoft Outlook 2000 and Outlook 2010:

Microsoft Outlook 2000 was using the Internet Explorer rendering engine to display HTML emails. Microsoft mentions benefits that Outlook users gain by using Microsoft Word as their email authoring tool which include automatic styles and templates and SmartArt among other benefits. It would also not be in the best interest performance wise to use a different rendering engine for the display of HTML emails. (via Email Standards)

The initiators of the Fix Outlook protest website are making use of Twitter to rally protesters from all over the world. Every Twitter user that mentions fixoutlook.org in their tweets will automatically partake in the protest. The avatar icons of users will be displayed on the Fix Outlook website. Currently more than 15500 users have already joined the protest.

Displaying valid markup code in websites, forums, blogs and any other page is not difficulty. The only thing that needs to be done to achieve this is to convert all entities before pasting the code. This can be done manually or by using a script like that offered at Spacefem.

All that needs to be done is to paste the code into the form and click on the Make Code button at the bottom. To display the following code on a website

<a href="http://www.ghacks.net/">Ghacks</a>

one would have to paste the following code into the form on the website where the code should be displayed

<a href="http://www.ghacks.net/">Ghacks</a>

This is actually the easiest way to ensure that the website will not interpret the code and that the code will be valid markup code.

It’s a bit difficult to describe this all in one article, but CSS is actually not that hard to get into. Basically, your HTML code has three types of “hooks”. You probably already know one of them, this is your common, everyday tag. You can also give a unique ID to any element, or a class, which can be applied to any amount of elements. CSS can grab on to these “hooks” (this is not a technical term), and style the element you are refering to.

Let’s take a side-step and look at how to implement CSS first. Right now let’s just use the following syntax inside the file, in the header section (there are many other ways, you can also call CSS from an external file) “<style type=”text/css”> </style>“. You can write your CSS code in between the start and end tag. CSS code is also very simple syntax wise. You have to specify a selector, and then some properties and values. The selector will be one of those “hooks” we looked at, it will let you specify what you want to change the style of. The property will let you specify what property of that element you want to change (text size, color, etc), and the value will specify what you want to change it to. The correct syntax is “selector {property:value; property:value}”

With that knowledge safely in our head, let’s take a more detailed look at our “hooks”, which will become our selectors. As I said, a tag can be a hook. Say you want the color of the font in all paragraphs to be orange. You can do this by applying the following CSS code: “p {color:#ff9900;}“. The selector is “p” the actual tag in html, the property is “color”, which controls text color, and the value is “#ff9900″ which is a color code. You could also write “orange”, but color codes give you more control (more on this in another article).

That’s not too hard is it? Ok, so now all our paragraph’s have orange text color, but what if we want one to be different? You could put them in a div instead of a paragraph, since we only specified that paragraphs should have orange text. This is a very bad approach, but it does display how CSS works. You should not do this for many reasons, first of all because you loose some semantics, that piece of text is a paragraph, so should be in a paragraph tag.� Second of all, with this approach you will very quickly run out of tags to use. So in this case we apply the other “hooks”, we can specify a unique id, or a class. Let’s apply an id, since we just want a change for this one paragraph.

In your HTML the id is applied as an attribute to the tag like so: “<p id=”example”>“. What the actual id is, is not important, but try not to start it with a number, and don’t have special characters in it a lot (underscore is fine). We can use the id in our CSS code by applying the following in addition to the rule we already have: “p#example {color:black;}“. The selector now points specifically to that one paragraph, where we have specified the id “example”.

If we would have applied a class we would have “<p class=”example”>” in our HTML and “p.example {color:black;}“. If you try it out, you can see that there is no difference. The difference is in the fact that id should only be applied to one element only, while class can be applied to as many as you like. You can apply it to a paragraph and a div for example. In this case you could write the following: “p.example {color:black;} div.example {color:black;}“. This would tell each paragraph and each div with the class of “example” to have a text color of black. There is a simpler way to do this though, you can just specify the class, like so: “.example {color:black;}“. This shows how you should “read” the code. Whenever you see just a class you should read it as “change the text color of all elements with this class to black”. If you see a tag or even another id or class in front you should read it as (in case of a paragraph) “change the text color of all paragraphs with this class to black”.

Those are the very basics of CSS, you might find a list of properties helpful, but there are many resources on the web to learn more about CSS, but I will be back with more info, and you can start reading Scriptastique for more info on CSS.

<img class=”alignleft size-full wp-image-10878″ src=”http://www.ghacks.net/wp-content/uploads/2009/03/scrip_twitter.gif” alt=”Script” width=”53″ height=”53″ /><strong>If you’d like to read some similar articles, take a look at <a title=”Web development blog” href=”http://scriptastique.com”>Scriptastique</a>, a blog all about web development and coding, with great tips on CSS, HTML, PHP, MySQL and Javasctipt and tutorials and screencasts coming soon! You can follow us on our <a title=”Scriptastique RSS feed” href=”http://feeds2.feedburner.com/scriptastique”>RSS feed</a>, or <a title=”Scriptastique on Twitter” href=”http://twitter.com/scriptastique”>Twitter</a> and <a title=”Scriptastique on Facebook” href=”http://www.facebook.com/home.php?#/profile.php?id=1470106953&amp;ref=profile”>Facebook</a>! </strong>

Right now we only have the blog, but tutorial sections and screencasts are on their way! To keep gHacks readers in the know, I will be doing a weekly short roundup of posts, if you like some of them, head on over to the site, take a look and participate in all the fun! So let’s jump to it, here’s what we covered on week 1.

• Checking MySQL queries for errors
• Creating your first function in PHP
• How the internet works – domains and hosting
• Create cool icons in a flash for your website
• Creating rounded corners using only CSS

We have a few more up there, and you can follow us on Twitter and our RSS feed or join us on Facebook. If you have any questions or comments feel free to let me know!

<?php
echo ‘Hello World’;
?>

I hate Hello World examples, but this shows what we are doing pretty well. Basically the echo command will write out that phrase “Hello World” (the quotes will not be shown, the single quotes above are part of the code), so if you open that file using Firefox for example you should simply see the phrase.

This seems straightforward, but to really understand what’s happening, and to be able to work with PHP efficiently we need to dig a bit deeper to see what really happens when we echo something.

The most important thing you need to understand is that PHP is a server side language. This means that whatever code you write is never sent directly to the client (the viewer of your site for example). When someone opens a PHP file form the next the file is first processed by the server, and only the result is shown to the user. This is why you will never see PHP code if you view the source of a page.

You also need to know that once the server has processed the file it retruns pure browser readable code. I would say pure HTML, but obviously your PHP file can contain inline javascript, just like your HTML files. Now echoing something tells the server that whatever is echoed should be placed as is into the HTML file. This means that whenever you want to put HTML tags when you are echoing you can do so by writing them as you would in an HTML file itself, like this:

<?php
echo ‘<strong>Hello World</strong>’;
?>

Once the server has returned its result, this is downloaded by the browser and processed like usual, so your “strong” tags wil be taken into account and will indeed bold text.

So what’s the point of sending the server that bit of code if all it does is just put it in like it was HTML? Well, the answer lies further down the road, but basically this is helpful because you can prevent/enable specific of section of code reaching the client, so the viewer only downloads what he/she needs, not the whole file. A simple example:

<?php
$random = rand(0, 99);

if ($random > 50)
echo ‘Number is above fifty’;
else
&nbsp; &nbsp; echo ‘Number is equal to or less than fifty’;
?>

Without really understanding what’d going on I can still explain. We create a variable, the value of it will be a randomly generated number between 0 and 99. If this number which we just generated is above 50 then we should echo that it is above fifty, in all other cases (it is below or equal to fifty), we should echo the other statement.

This is processed whenever someone loads (or reloads) a page, so the variable “$random” will always be different, generated “on the fly”. The script then checks the number, and only the relevant piece of code is returned, so if the number generated is 55 the only piece of code that you will see in the source will be:

The number is above fifty

Obviously this is a bit over-simplified, but in real life this is basically what happens. You can also use this to generate different pieces of code for different days of the week, and the change will be automatic, you only need to program once. You can also use it to create one file to display all your posts (like in WordPress), so you don1t have to code a page for each post you write. PHP is awesome, start lovin’ it!

If you would like to read more articles like this, take a look at Scriptastique, a new blog by the writer, Daniel Pataki. The site will contain different articles from the ones published here, and will eventually have complete tutorials for numerous programming languages.

The most common server architecture on which PHP is found is called LAMP (for Linux + Apache + MySQL + PHP). All of the elements of LAMP are open source, meaning that the source code of the application is freely available. This means that the cost of setting up a server running LAMP is reduced (No License Fees), so LAMP based web hosting tends to be the least expensive solution available.

The Internet is built on a client-server architecture. On the client side we have the user and the browser. One the server side we have the server and its script interpreter (In our case, Apache and PHP).
Because PHP runs on the server side, we cannot use it for flashy client side effects, things like animations and auto-complete cannot be performed by php because php is only running on the server. For client side programming we could use javascript, Flash/Flex, Silverlight, or JavaFX.

What we can do with PHP is access a database, connect to other websites/services for information, and build a page out of smaller pieces, which we then deliver to the client for rendering.

I think it is important to indicate at this time that there are four levels at which you can work with PHP.

1. Scripting – this is where you take a small script and add it (integrate) into an existing page.
2. Coding – this is where you write scripts as needed to add basic functionality to your site.
3. Development – this is where you write an full application in PHP.
4. Architect – this is where you properly design an application that develop it into an application. Like development but puts a lot more thought into a good foundation.

Depending on your actual needs, several of these layers could be overkill for your task. The following articles will mainly be focused on the first two levels – scripting, and coding. In Scripting and coding we have two primary tasks we accomplish. One makes your job as webmaster easier. The second adds new functionality to your site.

Jeremiah Stover is a Software Engineer and a Business IT Consultant at Pragmatic Development. He has hands on experience and regularly provides practical advice in Business, Marketing, IT equipment and software. His Specialties include interpersonal communications, design skills, teaching and instruction. Right now he spends most of his time developing web applications in PHP and MySQL.

The following web development articles have been published in January 2009 at Ghacks:

How does PHP work?
HTML Playground
PHP – what role does it fill
Standardizing variables to code faster
Web Development: A brief history of time()

You can download the pdf document by clicking on the link below.

ghacks web development january 09

HTML is a markup language that lets us describe attributes of the text and blocks on our pages. This works great for simple requests, making pages much more interesting than plain text. However it leaves us with a very simple structure. One page from One url (address) results in one rendered content (every time this url is requested, the output is the same).

To give us more options we have programming languages. Some like PHP run on the server side. They modify the content that will be displayed before it is sent to the client and on to the browser. Others like JavaScript run on the client side and allow changes to be made in the browser after the page has been rendered – usually for interactivity or for adding a feature not normally available in that browser.

The very first thing you _must_ do before getting started with PHP is get a good grasp of HTML (and CSS). Many webmasters use a tool like Dreamweaver, Expression Web or KompoZer. To
work with PHP it is important that you understand the underlying HTML code. You will be modifying this code so you need to be able to understand the HTML well enough to understand what you see.

If you like video training try Lynda.com or VTC.com. If you prefer reading a book try “Head First html with CSS & Xhtml” or if you prefer free web instruction try w3schools.com and tizag.com.

Now that you understand the markup language which is what is sent to the browser (HTML) you are ready to tackle the server side use of PHP.

Jeremiah Stover is a Software Developer at Pragmatic Development. He specializes in client communications. While PD does offer a full range of IT services and consulting, they are currently specializing in website development in PHP/MySQL.

HTML Playground provides the means to play around with all HTML tags (and a bit of CSS). It does not require any prior knowledge although that could be of an advantage. The website makes use of an interface that is divided into four columns. One holding all HTML tags, another that is displaying “live” examples of a selected tag and a third that is displaying valid HTML code used to create the example. Valid HTML code meaning a full html page making use of that code. Each HTML and CSS tag is clickable in the example code leading directly to an example page of that tag.

It would not really be a HTML Playground if the website would not offer the means to edit the example code. This is excellent to test changes to the code to see how the tags work.

Beginners might find it a lit difficulty to start and it is recommended to have read at least one article about learning HTML before playing around with the various elements. It is best for users who know the basic of HTML and want to start playing around with code.

Update: The HTML Playground is no longer available. There does not seem to be a comparable web service available.

The most important thing to understand is the difference between HTML and PHP. In HTML you write your code, upload it, and the user’s will subsequently download that page along with all the code. The user’s browser interprets this code and shows the user the page as you intended it (hopefully). In other words HTML is sort of what you see is what you get, in the sense that all the code goes to the user and is interpreted by the browser.

With PHP it works a bit differently because you don’t actually download the code the author wrote. What happens is that if you want to download a php page the code in that file is first processed by the server, and you download the output of the code, as opposed to the whole code as is. This in turn will be HTML just as before, this is why you never see PHP code in the source of a webpage. So what happens in processing? Turn the page to find out!

With PHP the goal is to use the processing powers of the server to build (usually) dynamic webpages. A very basic example is showing the correct greeting for the time of day on a webpage. In human terms you write a script with the directions to show “Good Morning” if it is before 10am but after 5am, “Good Afternoon” if it is after 10am but before 6pm and “Good Night” after 6pm, before 5am. Instead of receiving all the code for this and processing it in your browser, this all gets processed before you download it, and you only get the result of the process, the text “Good Night” for example if it is 9pm.

This is much quicker, since if you think of bigger sites, instead of having to download 300kb (or much more) of code, it is quickly processed on the server and you might get as little as 10kb or less. Obviously your PC could process the code quickly, but downloading and handling can take a while. In addition, the code may also have database queries which can not execute if processed on your PC, they have to be processed on the server which has the database.

If you would like a more real-life example, take a look at gHacks, which has almost 5,000 posts now. In HTML world we would have to have 5,000 posts which all have the whole site code, from header to footer with the article in between. PHP makes it possible to “compress” those 5,000 files into only 1!

When you view any gHacks post on a single post page you are actually viewing a file called single.php. This file also has some additional info in the url which will tell the script which post to show, so the file you are viewing would be single.php?p=234. This tells the script that the post with the ID of 234 needs to be shown. The script queries the database for the relevant post and pulls its details (like title and post body) from the database. So in the end all you are shown is one post. WordPress has some other stuff built in to make nicer URL’s and so on, but under the hood this is what is happening.

Likewise for the front page we don’t always go and modify the code when posting something. Martin would be coding all day, removing the last post on the page and pasting the code of the new one. Instead, in the php file you are viewing the code gets the latest 10 posts and puts their data on the page.

There is a lot more to learn in PHP, but those are the basic mechanics, the ability to create pages based on certain criteria, as opposed to static content on each page.