HTML, CSS, PHP and SEO Jump-Start Guide

This simple tutorial utilizes a red velvet cupcake and a dash of humor to explain these common web design terms: HTML, CSS, PHP and SEO. It is aimed at web design beginners, small business owners and everyday internet surfers.

Web Page Ingredients

The average person these days surfs the web often, clicking from one web page to another. But, a web page is often confused with a printed document, when, in reality, they have little in common.

A web page is actually more like a red velvet cupcake than a printed document.

Here’s why:

• To bake a cake, you must carefully mix together the right ingredients in exactly the right proportions. Then you rely on an oven to finish the job.
• To create a web page, you must also mix the right ingredients together. Then you rely on a web browser to finish the job.

What is HTML?

Web pages are written in a language called HTML. (HTML5 is the latest version.)  HTML tags are used to structure a web page. When you look at a web page, you can’t see these tags. They are hidden in the source code. Web browsers interpret these tags when they display a web page on the internet.

Just like cupcakes fresh out of the oven, you know right away whether or not you’ve added the right ingredients or not. If you miss an important ingredient in your cupcake batter, the oven can’t fix your mistake. If you miss important tags in your HTML code, a web browser can’t fix your source code. It will interpret it the best it can.

Here’s a peek at the source code of a paragraph:

A cupcake fresh out of the oven smells nice but is rarely eaten plain. Similarly, a web page with just HTML tags has potential, but is no masterpiece.

The cake needs frosting. The web page needs CSS.

What is CSS?

CSS is used to control the look and feel of a web page written in HTML. (CSS3 is the latest version.) You can add color to a web page with CSS. You can also make changes to the layout of a web page with it. You can even make it so that the web page adjusts itself to adapt to different devices such as computers, tablets and cell phones. CSS adds the pizazz to web pages. Most CSS is written in a separate style sheet that is attached to a web page. Once again the web browser must interpret the instructions written in this cascading style sheet.

Here’s a peek at a snippet of CSS code for a paragraph.

This CSS code tells the web browser to use Verdana for a font and center align any paragraphs that it finds on the linked web page.

See Building Your First Web Page.

Let’s say that you have perfected your red velvet cupcake recipe and it has become so popular that you have decided to start your own business. You need to get organized and be more efficient.

So you decide to take your dry ingredients, mix them together in containers and set the containers aside. Then you can grab one each time you decide to bake a cupcake batch. You do this to save time.

In terms of designing web pages, PHP can help you be more efficient. Parts of the web design process can be simplified similar to the baking process.

What is PHP?

PHP is an open source scripting language that can be embedded into HTML. It is especially useful for adding the same chunks of information to web pages across a website. Take a look at the footer (bottom section) of some web pages across a website. Often, they include the exact same information. So instead of writing the same thing over and over again, web designers can create one file and then include that file in every web page with the help of PHP. Sweet!

PHP is a very helpful tool for web designers. Business owners with websites can also benefit from PHP. If they need a simple change on their website (such as an address or telephone number and it is designed with the help of PHP), chances are that their web designer only needs to change one file, instead of going through the time-consuming process of changing every page in the website. PHP saves time. PHP also saves money.

Now back to the red velvet cupcake story. Your cupcakes have turned out to be very popular. Your family loves them. Your neighbors love them. Even your dentist loves them. But how do you spread the word to complete strangers?

Advertising will help make your cupcakes famous.

If you want complete strangers to try your red velvet cupcakes, you would entice them with your advertising, using words like delicious, mouth-watering, smooth, silky and of course… red. They may also be gluten-free.

SEO, on the other hand, will help make your website famous.

What is SEO?

Onsite SEO is the practice of structuring and including content in a website in order to make it search engine friendly. The majority of web traffic is driven by search engines. You want to be sure yours is easy for the search engine bots to understand and navigate.

You need to explain your website to search engines using important words and phrases associated with your business. First, include those keyword phrases in the content or your web pages. Add those keywords to your paragraphs and headings. Also, include them in your Page Titles. Page Titles can’t be seen in web pages. They are hidden in the source code with the HTML tags. But you can see them in the Title Bar when you view a web page in a browser. Page Titles are one of the most important elements in a web page for search engines to analyze. Make sure you don’t forget them.

See Basic SEO Tips for Beginners.

Here’s a possible page title for your brand new cupcake business:

That’s how it would look in the source code, enclosed in HTML tags. In the title bar of a web browser, those HTML tags would be hidden.

Here’s your first paragraph (seen in the source code with the enclosing HTML tags):

You’ve now reached the end of this Jump-Start Guide. If you feel you have a basic understanding of how HTML, CSS, PHP and SEO fit together now, you’re off to a great start. If you’ve read this whole story looking for an actual cupcake recipe, unfortunately, you’ve come to the wrong place.