{"id":3963,"date":"2014-09-06T17:03:06","date_gmt":"2014-09-06T17:03:06","guid":{"rendered":"http:\/\/www.crimsondesigns.com\/blog\/?p=3963"},"modified":"2019-08-03T12:40:07","modified_gmt":"2019-08-03T12:40:07","slug":"html-css-php-and-seo-jump-start-guide","status":"publish","type":"post","link":"https:\/\/www.crimsondesigns.com\/blog\/html-css-php-and-seo-jump-start-guide\/","title":{"rendered":"HTML, CSS, PHP and SEO Jump-Start Guide"},"content":{"rendered":"<p>This simple tutorial utilizes a <strong>red\u00a0velvet cupcake<\/strong>\u00a0and a <strong>dash of humor<\/strong>\u00a0to explain these common web design terms: <strong>HTML, CSS, PHP<\/strong> and <strong>SEO.<\/strong> It is aimed at web design beginners, small business owners and everyday internet surfers.<\/p>\n<p><!--more--><\/p>\n<h3><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-5382 size-full\" src=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/09\/html-css-php-seo-jump-start-guide-1.jpg\" alt=\"HTML, CSS, PHP, SEO jump-start guide\" width=\"650\" height=\"500\" srcset=\"https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/09\/html-css-php-seo-jump-start-guide-1.jpg 650w, https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/09\/html-css-php-seo-jump-start-guide-1-300x231.jpg 300w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/h3>\n<h3>Web Page Ingredients<\/h3>\n<p>The average person these days surfs the web often, clicking from one web page to another. But, a\u00a0web page is often confused with a printed document, when, in reality, they have little in common.<\/p>\n<p>A web page is actually more like a <strong>red velvet cupcake<\/strong>\u00a0than a printed document.<\/p>\n<p>Here&#8217;s why:<\/p>\n<ul>\n<li>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.<\/li>\n<li>To create a web page, you must also mix the right ingredients together. Then you rely on a <strong>web browser<\/strong> to finish the job.<\/li>\n<\/ul>\n<h4>What is HTML?<\/h4>\n<p>Web pages are written in a language called HTML. (<a href=\"https:\/\/www.crimsondesigns.com\/blog\/smooth-strides-from-html-to-html5\/\">HTML5<\/a> is the latest version.) \u00a0HTML tags\u00a0are used to structure a web page. When you look at a web page, you can&#8217;t see these tags. They\u00a0are hidden in the source code. <strong>Web browsers<\/strong> interpret these tags when they display a web page on the internet.<\/p>\n<p>Just like cupcakes fresh out of the oven, you know right away whether or not you&#8217;ve added the right ingredients or not. If you miss an important ingredient in your cupcake batter, the oven can&#8217;t fix your mistake.\u00a0If you miss important tags in your HTML code, a web browser can&#8217;t fix your source code. It will interpret it the best it can.<\/p>\n<p><a href=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/09\/oven-like-a-web-browser.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3965 size-full\" src=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/09\/oven-like-a-web-browser.jpg\" alt=\"oven like a web browser\" width=\"600\" height=\"275\" srcset=\"https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/09\/oven-like-a-web-browser.jpg 600w, https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/09\/oven-like-a-web-browser-300x138.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Here&#8217;s a peek at the source code of a paragraph:<\/p>\n<div class=\"highlight\">\n<p class=\"special\">&lt;p&gt;This is a paragraph. It is surrounded by HTML tags.&lt;\/p&gt;<\/p>\n<\/div>\n<p>A cupcake fresh out of the oven smells nice but is\u00a0rarely eaten\u00a0plain. Similarly,\u00a0a web page with just <strong>HTML<\/strong> tags has potential, but is no masterpiece.<\/p>\n<h4>The cake needs frosting. The web page needs CSS.<\/h4>\n<h4>What is CSS?<\/h4>\n<p><strong>CSS<\/strong> is used to control the look and feel of a web page\u00a0written in <strong>HTML.<\/strong> (<a href=\"https:\/\/www.crimsondesigns.com\/blog\/smooth-strides-from-css-to-css3\/\"><strong>CSS3<\/strong><\/a> is the latest version.) You can add color to a web page with <strong>CSS.<\/strong> 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. <strong>CSS<\/strong> adds the pizazz to web pages. Most <strong>CSS<\/strong> is written\u00a0in a separate style sheet that is attached to a web page. Once again the web browser must interpret the instructions written in this\u00a0cascading style sheet.<\/p>\n<p>Here&#8217;s a peek at a snippet\u00a0of <strong>CSS<\/strong> code for a paragraph.<\/p>\n<div class=\"highlight\">\n<p class=\"special\">p {font-family: verdana, sans-serif; text-align: center;}<\/p>\n<\/div>\n<p>This <strong>CSS<\/strong> code tells the web browser to use Verdana for a font and center align any paragraphs that it finds on the linked web page.<\/p>\n<p>See <a href=\"http:\/\/learn.shayhowe.com\/html-css\/building-your-first-web-page\/\" target=\"_blank\" rel=\"noopener noreferrer\">Building Your First Web Page.<\/a><\/p>\n<p><a href=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/09\/php-like-dry-ingredients.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-3969 size-full\" src=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/09\/php-like-dry-ingredients.jpg\" alt=\"php for web design\" width=\"243\" height=\"309\" srcset=\"https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/09\/php-like-dry-ingredients.jpg 243w, https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/09\/php-like-dry-ingredients-236x300.jpg 236w\" sizes=\"auto, (max-width: 243px) 100vw, 243px\" \/><\/a>Let&#8217;s say that\u00a0you have perfected your <strong>red velvet cupcake<\/strong> recipe and it has become\u00a0so popular that you have decided to start your own business. You\u00a0need to get\u00a0organized\u00a0and be more efficient.<\/p>\n<p>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\u00a0this to save time.<\/p>\n<p>In terms of designing web pages, <strong>PHP<\/strong> can help you be more efficient. Parts of the web design process can be simplified\u00a0similar to the baking process.<\/p>\n<h4><strong>What is PHP?<\/strong><\/h4>\n<p><strong>PHP<\/strong> is an open source scripting language that can be embedded into <strong>HTML.<\/strong> It\u00a0is 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\u00a0across a\u00a0website. Often, they include the exact same information. So instead of writing the same thing\u00a0over and over again, web designers can create one file and then include that file in every web page with the help of <strong>PHP.<\/strong> Sweet!<\/p>\n<p><strong>PHP<\/strong> is a very helpful tool for web designers. Business owners with websites can also benefit from <strong>PHP.<\/strong>\u00a0If they need a simple change on their website (such as an address or telephone number and it is designed with the help of <strong>PHP),<\/strong> chances are that their web designer only needs to change one file, instead of going through the time-consuming process of changing\u00a0every page in the website. <strong>PHP<\/strong> saves time. <strong>PHP<\/strong> also saves money.<\/p>\n<p>Now back to the\u00a0<strong>red velvet cupcake<\/strong> story. Your cupcakes have turned out to be very popular. Your family loves them. Your neighbors love them.\u00a0Even your dentist loves them.\u00a0But how do you\u00a0spread the word to complete strangers?<\/p>\n<h4>Advertising will help make your cupcakes famous.<\/h4>\n<p>If you want complete strangers to try your <strong>red velvet cupcakes,<\/strong> you\u00a0would entice them\u00a0with your advertising, using words like delicious, mouth-watering, smooth, silky and of course&#8230; red.\u00a0They<strong>\u00a0<\/strong>may also be<strong> gluten-free.<\/strong><\/p>\n<h4><strong>SEO, <\/strong>on the other hand, will help make your website famous.<\/h4>\n<h4>What is SEO?<\/h4>\n<p>Onsite <strong>SEO<\/strong> is the practice of structuring and including content in a website in order to make it <a href=\"https:\/\/www.crimsondesigns.com\/blog\/search-engine-friendly-website\/\">search engine friendly<\/a>. 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\u00a0navigate.<\/p>\n<p>You\u00a0need\u00a0to explain\u00a0your website to search engines using <strong>important words and phrases<\/strong> associated with your business. First, include those <strong>keyword phrases<\/strong> in the content or your web pages. Add those keywords\u00a0to your paragraphs and headings. Also, include them in your Page Titles. <strong>Page Titles<\/strong> can&#8217;t be seen in web pages. They are hidden in the source code with the <strong>HTML<\/strong>\u00a0tags. But you can see them in the <strong>Title Bar<\/strong>\u00a0when\u00a0you\u00a0view\u00a0a web page in a browser. <strong>Page Titles<\/strong> are one of the most important elements in a web page for search engines to analyze. Make sure you don&#8217;t forget them.<\/p>\n<p class=\"centerAlign\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/09\/page-title.jpg\" alt=\"page title in browser title bar\" width=\"562\" height=\"50\" \/><\/p>\n<p>See <a href=\"http:\/\/www.codetounlock.com\/basic-seo-tips-beginners\/\" target=\"_blank\" rel=\"noopener noreferrer\">Basic SEO Tips for Beginners.<\/a><\/p>\n<p>Here&#8217;s a possible\u00a0page title for your brand new cupcake business:<\/p>\n<div class=\"highlight\">\n<p class=\"special\">&lt;title&gt;Gluten-Free Red Velvet Cupcakes &#8211; My Scrumptious Bakery&lt;\/title&gt;<\/p>\n<\/div>\n<p>That&#8217;s how\u00a0it would look in the source code, enclosed in <strong>HTML<\/strong> tags. In the title bar of a web browser, those\u00a0<strong>HTML<\/strong> tags would be\u00a0hidden.<\/p>\n<p>Here&#8217;s your first paragraph (seen in the source code with the enclosing HTML tags):<\/p>\n<div class=\"highlight\">\n<p class=\"special\">&lt;p&gt;Welcome to my Scrumptious Bakery. You&#8217;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.&lt;\/p&gt;<\/p>\n<\/div>\n<p><a href=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/09\/red-velvet-cupcakes.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3968 size-full\" src=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/09\/red-velvet-cupcakes.jpg\" alt=\"red velvet cupcakes\" width=\"600\" height=\"270\" srcset=\"https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/09\/red-velvet-cupcakes.jpg 600w, https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/09\/red-velvet-cupcakes-300x135.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>You&#8217;ve now reached the end of this Jump-Start Guide. If you feel you have a basic understanding of\u00a0how\u00a0HTML, CSS, PHP and SEO fit together now, you&#8217;re off to a great start. If you&#8217;ve read this whole story\u00a0looking\u00a0for an actual cupcake recipe, unfortunately, you&#8217;ve come to the wrong place.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,5,6,9],"tags":[159,164,192,215],"class_list":{"0":"post-3963","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-dash-of-humor","7":"category-html-and-css","8":"category-search-engines","9":"category-web-design","10":"tag-page-titles","11":"tag-php","12":"tag-seo","13":"tag-title-bar","14":"cat-4-id","15":"cat-5-id","16":"cat-6-id","17":"cat-9-id"},"_links":{"self":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3963","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=3963"}],"version-history":[{"count":1,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3963\/revisions"}],"predecessor-version":[{"id":7522,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3963\/revisions\/7522"}],"wp:attachment":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=3963"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=3963"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=3963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}