This simple web tutorial utilizes a red velvet cupcake and a “dash of humor” to explain these common web design terms: HTML, CSS, PHP and SEO. (It was created for web design beginners and small business owners.)

Web Page Ingredients: HTML, CSS, PHP & SEO

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 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.

HTML5 icon

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.

HTML Tags

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.

HTML tutorial with cupcakes
Just like freshly baked cupcakes, you’ll know if your HTML code is right or not.

HTML <p> Tags

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

<p>This is a paragraph. It is surrounded by HTML tags.</p>

To learn the nitty-gritty details of HTML, read Smooth Strides from HTML to HTML5.

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.

CSS3 icon

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 the cascading style sheet.

CSS Rule for a Paragraph

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

p {font-family: verdana, sans-serif; text-align: center;}

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

To learn the nitty-gritty details of CSS, read Smooth Strides from CSS to CSS3. Also see Building Your First Web Page.

Getting Organized and Efficient

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.

Beginner PHP Tutorial

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.

PHP icon

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.

PHP for Page Footers

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 a business needs a simple change made to their website (such as an address or telephone number) and the website 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 make your cupcakes famous. SEO will make your website famous.

Advertising will help make your cupcakes famous. You can entice consumers with your ads, using words to describe your cupcakes such as delicious, mouth-watering, smooth, silky and of course… red. SEO, on the other hand, will help make your website famous.

SEO icon

What is SEO?

  • Onsite SEO is the practice of structuring and including content in a website 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 company and products.

Keyword Phrases for SEO

  • 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. They are an important part of search engine optimization.

See Basic SEO Tips for Beginners.

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

<title>Red Velvet Cupcakes – My Scrumptious Bakery</title>

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 <p> tags):

<p>Welcome to my Scrumptious Bakery. You’re going to love our gluten-free red velvet cupcakes. We use an original recipe passed down through generations. These cupcakes are so good that even our dentist loves them.</p>

Summary

You’ve reached the end of this beginner 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.

HTML, CSS, PHP and SEO Guide for Pinterest