{"id":3625,"date":"2013-10-15T16:45:46","date_gmt":"2013-10-15T16:45:46","guid":{"rendered":"http:\/\/www.crimsondesigns.com\/blog\/?p=3625"},"modified":"2023-11-15T15:52:47","modified_gmt":"2023-11-15T15:52:47","slug":"how-websites-work-tutorial-for-small-business-owners","status":"publish","type":"post","link":"https:\/\/www.crimsondesigns.com\/blog\/how-websites-work-tutorial-for-small-business-owners\/","title":{"rendered":"How Websites Work: Tutorial for Small Business Owners"},"content":{"rendered":"<h3><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5001 size-full\" src=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/10\/how-websites-work-tutorial-1.jpg\" alt=\"How Websites Work: Small Business Tutorial\" width=\"650\" height=\"433\" srcset=\"https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/10\/how-websites-work-tutorial-1.jpg 650w, https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/10\/how-websites-work-tutorial-1-300x200.jpg 300w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/h3>\n<h3>Most people don\u2019t understand web design.<\/h3>\n<p>It\u2019s hard to understand web design when you are not computer savvy. But if you run a small business today, your business needs to be found on the web. This mini-tutorial is aimed at the small business owner looking for a <strong>jump-start guide<\/strong> that explains the basics of <span class=\"special\">&#8220;How Websites Work.&#8221;<\/span><br \/>\n<!--more--><br \/>\n<strong>First and foremost, Web Design is not the same as Print Design.<\/strong><\/p>\n<p>A website is actually a&nbsp;&#8220;collection of files&#8221; that are displayed on the internet by a web browser. Images on the web are not actually part of a web page. They are often found in folders in the website. Web pages are written in a language called <strong>HTML.<\/strong><\/p>\n<p>This language gives instructions to web browsers so that they can display web pages and make it seem like the images are a part of the pages. <strong>HTML<\/strong> is also used to link the pages together so visitors can get from one page to another.<\/p>\n<p>If you are trying to get your business on the world wide web, you will send your web designer information such as your company&#8217;s phone number and details about the services or products you offer. Your web designer will add this to your web pages with <strong>HMTL.<\/strong> To spiff up your website, your web designer will add <strong>CSS<\/strong> (cascading style sheets) files. These files will include instructions for the web browser, such as what colors you want to include in the background of your web pages. <strong>CSS<\/strong> is used to control the look and feel of the content written in <strong>HTML.<\/strong> Your web designer will link the web pages (written in HTML) to the images and to the <strong>CSS<\/strong> files and to each other.<\/p>\n<h4>HTML + CSS + Images<\/h4>\n<p>With <strong>HTML<\/strong> files, <strong>CSS<\/strong> files and images all linked together, you have the information you need for a basic static website.&nbsp;Your web designer could send you these files and you could look at them in a web browser on your computer. But you want a website that your customers can see. Right?<\/p>\n<p>In order for your website to be seen on the internet, you will need a <strong>Domain Name<\/strong> and a <strong>Web Host.<\/strong><\/p>\n<h3>What is a Domain Name?<\/h3>\n<p><a href=\"https:\/\/www.crimsondesigns.com\/blog\/small-business-domain-name\/\"><strong>Domain Names<\/strong><\/a> enable web browsers to locate web pages. Once you buy a domain name, no one else can use that same domain name for their business. It is yours to keep, as long as you continue to pay for it on a yearly basis. And you can&#8217;t buy a domain name that your competitor has already scooped up. No two organizations can have the same domain name. Examples of domain names include <strong><a href=\"http:\/\/www.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google.com<\/a><\/strong>&nbsp;and <strong><a href=\"http:\/\/www.starbucks.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Starbucks.com.<\/a>&nbsp;<\/strong>Every company or organization that wants to be on the internet will need to register a domain name for use as their on-line identity.<\/p>\n<h3>What is a Web Host?<\/h3>\n<p><strong>Web Hosts<\/strong> are companies that provide space on a server along with internet connectivity. It is much like the space that you rent out for your company. It&#8217;s merely the space itself. Without the hosting services, you won&#8217;t have a place for your files to reside so that visitors can see your web pages through a web browser. You must continue to pay for your host yearly, just like your domain name.<\/p>\n<h4>HTML + CSS + IMAGES + DOMAIN NAME + WEB HOST<\/h4>\n<p><a href=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/10\/website-components3.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3648 size-full\" src=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/10\/website-components3.jpg\" alt=\"website components: HTML, CSS, images\" width=\"550\" height=\"277\" srcset=\"https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/10\/website-components3.jpg 550w, https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/10\/website-components3-300x151.jpg 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><\/p>\n<p>So now you have the key pieces needed to launch a basic static website onto the internet where visitors can learn all about your business and the services or products you offer.<\/p>\n<h3>Search Engine Optimization (SEO)<\/h3>\n<p>Like most people, you want to find your new website at the top of the search engines results pages. Guess what? All your competitors do too. Hopefully, you have been having many discussions with your web designer about your business. Through this process, your web designer has already gathered the important keyword phrases for your business and included them in your website. This is called search engine optimization <strong>(SEO).<\/strong><\/p>\n<p>Keep in mind, that the more competitors you have, the more difficult it will be to climb to the top of&nbsp;the search engine result pages. Also, if your company is the new kid on the block, you will have a more difficult time competing. The longer your website is on the web, the better. But you can help your website by adding fresh content to it on a weekly or, at least, monthly basis. You can also utilize <strong>social media websites,<\/strong> such as <strong>Facebook <\/strong>and <strong>Twitter<\/strong><strong>. <\/strong>By posting frequent, relevant updates on these <strong>social media sites<\/strong> and linking them to your business website, you will help boost your business website&#8217;s search engine rankings. See 8 Steps to&nbsp;<strong><a href=\"http:\/\/www.crimsondesigns.com\/SEO\/8-steps-to-search-engine-optimization.php\">Search Engine Optimization (SEO).<\/a><\/strong><\/p>\n<h3>Website Management (CMS)<\/h3>\n<p><a href=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/10\/wordpress4.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-3641 size-full\" src=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/10\/wordpress4.gif\" alt=\"Wordpress\" width=\"180\" height=\"134\"><\/a><\/p>\n<p>Are you hoping to make the changes to your website yourself? Then your web designer will need to install a Content Management System <strong>(CMS)<\/strong> into your website.<\/p>\n<p><strong>CMS<\/strong>&nbsp;examples include <strong>WordPress,<\/strong> <strong>Joomla,<\/strong> and <strong>Drupal. Learn more about <a href=\"http:\/\/www.crimsondesigns.com\/wordpress-web-design\/understanding-wordpress-CMS.php\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress.<\/a><\/strong><\/p>\n<h3>Modern Websites with&nbsp;HTML5 + CSS3<\/h3>\n<p><a href=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/10\/html5andcss3.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-3636 size-full\" src=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/10\/html5andcss3.jpg\" alt=\"HTML5 + CSS3\" width=\"291\" height=\"152\"><\/a><\/p>\n<p>As time goes on, the languages used to code web pages continue to evolve.<\/p>\n<p>The latest version of <strong>HTML<\/strong> is <strong>HTML5.<\/strong><\/p>\n<p>Modern browsers all support it.&nbsp;<strong>HTML5<\/strong> gives web designers more flexibility and enables websites to be more interactive, powerful and efficient.&nbsp;The best thing about <a href=\"https:\/\/www.crimsondesigns.com\/blog\/smooth-strides-from-html-to-html5\/\"><strong>HTML5<\/strong><\/a> is that it is simpler than previous HTML standards, thus giving rise to cleaner code, which also helps with <strong>SEO.<\/strong><\/p>\n<p>The latest version of <strong>CSS<\/strong> is <strong>CSS3.<\/strong><\/p>\n<p><strong>CSS3<\/strong> allows web designers to achieve great looking visual effects in web pages, such as rounded corners, shadows and animations. <a href=\"https:\/\/www.crimsondesigns.com\/blog\/smooth-strides-from-css-to-css3\/\"><strong>CSS3<\/strong><\/a> makes a designer\u2019s work easier. It is the future of web design and can be used today.<\/p>\n<h4>CSS3 Media Queries<\/h4>\n<p><strong>CSS3<\/strong> also introduced something special, called <span class=\"special\">&#8220;media queries.&#8221;<\/span>&nbsp; Are you looking for a mobile friendly website? Then <span class=\"special\">&#8220;CSS3 media queries&#8221;<\/span> are important to you. With the introduction of <a href=\"https:\/\/www.crimsondesigns.com\/blog\/css3-media-queries-simple-gotchas-easy-fixes\/\"><strong>CSS3<\/strong> media queries<\/a>, web designers&nbsp;can easily target specific screen sizes and create a nice visitor experience no matter what type of browser or device is used to visit the website (including widescreen desktop monitors, laptops, tablets,&nbsp;and mobile phones).<strong> CSS3&nbsp;Media Queries<\/strong> are one of the keys to building mobile friendly sites. They are at the center of <a href=\"http:\/\/www.crimsondesigns.com\/blog\/responsive-web-design-trickles-into-new-hampshire\/\"><span class=\"special\">Responsive Web Design,<\/span> <\/a>which is an emerging web design practice.<\/p>\n<h3>Web Browsers<\/h3>\n<p><a href=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/10\/google-chrome-icon.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-3656 size-full\" src=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/10\/google-chrome-icon.png\" alt=\"Google Chrome icon\" width=\"128\" height=\"128\" srcset=\"https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/10\/google-chrome-icon.png 128w, https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/10\/google-chrome-icon-100x100.png 100w\" sizes=\"auto, (max-width: 128px) 100vw, 128px\" \/><\/a><\/p>\n<p>CSS Media Queries are supported by all modern web browsers, including&nbsp;Internet Explorer 10 <strong>(IE10).<\/strong> Unfortunately, they are not supported by older versions of Internet Explorer, such as IE8, but your website can be designed in a way to ensure graceful degradation for visitors using those old web browsers.<\/p>\n<p>Do you know what browser and what version you are using to read this tutorial? Find your <a href=\"https:\/\/www.whatsmybrowser.org\" target=\"_blank\" rel=\"noopener noreferrer\">Web Browser Version.<\/a>&nbsp;The good news is that you can easily update your browser or switch to a different one, such as <strong>Google Chrome<\/strong> (the most popular browser today). Web browsers are FREE and easy to install.<\/p>\n<h3>Summary<\/h3>\n<p>You&#8217;ve learned some important terms in this mini-tutorial. You know that you will need a host, domain name, and some images for your website. You can also start preparing your content now. Your web designer will work with you to assemble all these things, and then code with&nbsp;<strong>HTML<\/strong> and <strong>CSS<\/strong>. If your web designer is utilizing the latest techniques in web design, he or she will likely be writing the code for your website in <strong>HTML5<\/strong> and <strong>CSS3.<\/strong> Your web designer will likely create a <span class=\"special\">&#8220;Responsive Website&#8221;<\/span> if you are requesting a mobile friendly site. If you do want a <a href=\"https:\/\/www.crimsondesigns.com\/blog\/what-makes-a-website-mobile-friendly\/\">mobile friendly website<\/a>, be sure to upgrade to the latest version of your web browser so you can see the magic of <span class=\"special\">Responsive Web Design<\/span> yourself.<\/p>\n<p>Your web designer will also install a Content Management System (like WordPress) if you wish to make some changes to your website yourself, once the original design is complete. Whether you make the website updates yourself or your web designer makes them for you, it is a good idea to provide fresh content on a continual basis to help with Search Engine Optimization <strong>(SEO). <\/strong><\/p>\n<p><strong>You now know the basics of how websites work. &nbsp;And as&nbsp;you can see&#8230;&nbsp;Web Design is definitely not the same as Print Design.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Most people don&#8217;t understand web design. It&#8217;s hard to understand web design when you are not computer savvy. But if you run a small business today, your business needs to be found on the web. This mini-tutorial is aimed at the small business owner looking for a jump-start guide that explains the basics of &#8216;How Websites Work.&#8217;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,3,8],"tags":[38,50,58,296,299,192],"class_list":{"0":"post-3625","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-html-and-css","7":"category-small-business","8":"category-web-browsers","9":"tag-business-website","10":"tag-css3","11":"tag-domain-name","12":"tag-how-websites-work","13":"tag-mobile-friendly","14":"tag-seo","15":"cat-5-id","16":"cat-3-id","17":"cat-8-id"},"_links":{"self":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3625","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=3625"}],"version-history":[{"count":6,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3625\/revisions"}],"predecessor-version":[{"id":7719,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3625\/revisions\/7719"}],"wp:attachment":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=3625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=3625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=3625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}