ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

How to Build a Website. Is it hard? Not with a CMS!

Updated on June 17, 2019
agvulpes profile image

Peter has worked with electronics for some 50 years. In many fields including, Communications, Entertainment and Automotive

Website Building , leave it to the Kids
Website Building , leave it to the Kids

Why Build a Website

So you want to build a website. "It can't be that hard, surely? " I hear you say!

Nah, all you gotta do is buy a Domain name, slap a few pages into it and 'bim barda boom' there you are you have a website. If you believe that hype! let me ask you a question!

"Why are there so many companies (some quite large) and individuals out in this wonderful wide world of WWW floggin' off their services to do exactly that ?"

Building Websites ?

In my opinion, you would have to be out of your cotton pickin' mind to build a website from scratch!

HTML Code

To start with you have to learn a whole new language called 'HTML' That is an acronym for HyperText Markup Language.

It has now progressed to be called 'XHTML' and I believe that they are further developments coming through at any time.

The WWW language is controlled by the consortium strangely enough called 'The World Wide Web Consortium' led by Tim Berners-Lee the inventor of the web.

I have posted below some examples of the code that you would need to use to put a basic page on to the internet.

html code Example

<html>
     <head>
             <title> My Basic WebPage   </title>
     </head>
     
     <body>
		
This is the content of my basic web page. Thanks for looking !
	
 
     </body>


</html>

My Basic Web Page

'My Basic Web Page' screenshot
'My Basic Web Page' screenshot

Practice Your Page Building Skills

Now if you would like to build the page shown above it is very easy and I will show you how in the following steps.

Copy and paste the code into 'WordPad' or 'win32pad' a free replacement for WordPad at Snapfiles.

Save the pasting into a file on your computer into a file giving it an appropriate name such as 'mybasicwebpage' that you can easily find.

Important: Don't forget to 'save as' a 'HTML' type file.

Simple so far now we want to display this page in a Browser so open the browser of your choice 'Internet Explorer' or 'Mozilla Firefox'

In the browser open 'File' then in the menu 'Open File' search for the previously saved file 'mybasicwebpage' and click 'ok'

Your page should open in your browser similar to the diagram.

If you want to change the text content or title you must change it in the 'saved file' and 'resave' then refresh your web browser. The edited text should then update.

If this is not too clear leave a comment and I will explain in a clearer fashion!

The next step

Ok, so you have learned the basics of making a webpage and showing it off to yourself on your own computer.

The next step is to publish your web page to the 'whole world' so that everyone can see your masterpiece.

The best way to do that is by "FTP" which stands for 'File Transfer Protocol'.

The way you do this is to contact the firm who is hosting your 'Website' get your FTP access site 'log on' details.

You can then set up a new 'network place' in the Control Panel of your computer which means you can then communicate with your host via FTP. (Window XP)

Log on and copy and paste your Page into the Root directly of your Domain.

NOTE: If this is your first page it must have a name of 'index' (this is normal some hosters have different names but I believe the most common is 'index'

As soon as your "index Page" is pasted it will be available to view on the WWW.

Big Problems arose !

A few years back a big big problem started to arise. I will try to explain it the way I understand it and in a few words as possible.

In the beginning of the WWW all was fine, there was basically only 'text' a few 'images' and 'graphics' being transmitted around the world, and most of the people using the internet where what is know as 'geeks' ( I use this word in the nicest possible way because I am a 'geek' myself)

However, as time progressed it was found that more and more users wanted more graphics on and things like 'video' and 'animations' etc. on their sites. To add to this more users were not technically minded and did not want the hassle of writing up new code all of the time.

The problem now was that there were two areas of interest 'artistic' and 'technical'

Now to overcome this the smart guys came up with a solution called 'Cascading Style Sheets' CSS for short.

The way this works is quite clever and in theory is simple but in practice not so easy.

What happens now when you design a Website you write up two documents, some pages have internal style sheets. These pages are:

1) The webpage, can and probably will be more than one page, which shows all of the content

2) The style sheet, which controls the layout of the site. Things like backgrounds, fonts, banners, placements, etc.

The way it works is that a reference link is built into the 'webpage' referring to the 'stylesheet' and it takes its orders from the 'stylesheet'.

If any changes are needed to the 'Website', you only have to write up the new details in one style sheet and post it to your server, it will change every page in your site.

I have put a sample up for this in the diagrams in the 'Authors Hobby Page' Diagram below.

Agvulpes Hobby Page

I have mocked up a webpage someone called 'Agvulpes' . If I were building a proper website I would possible have quite a number of pages. I would think at least twenty?

If you study the page you will see that I have included a few things such as:

  • Heading.
  • Navigation bar.
  • List.
  • Image.

If you study the HTML code image you will see something important. It is the link that allows this page to search for the CSS page and take all the attributes it needs for color, font , background etc.

This HTML page also includes the normal things like the opening and closing tags, H1 tags and a list and a reference to the Image for Butterfly Earrings.

If you study the CSS code image you will notice that the code has all of the attributes such as color for the body, navigation and the image.

I hope that you can see that this set up makes it much easier to maintain a Website.

Let me put this Scenario to you .

Lets say that you have a website that has, oh, lets say 20 Pages (not unusual) In the old fashioned way if you wanted to change the color of the background from say Green to Blue, you would have to physically change the code on the whole 20 pages.

Using the Cascading Style Sheets method you would only need to modify one code on your Style Sheet and upload it to your site.

That would change the background color on every page.

Agvulpes Hobby Web Page

Hobby page for Agvulpes, a page I mocked up simply to show the working of CSS
Hobby page for Agvulpes, a page I mocked up simply to show the working of CSS

Code for Agvulpes Hobby Page

HTML code for the Agvulpes sample Page
HTML code for the Agvulpes sample Page

Cascading Style Sheet (CSS) for Agvulpes Hobby Page

CSS Code for the Agvulpes sample page
CSS Code for the Agvulpes sample page

How to see Source Code of a Web Page

If you want to see a living example of webpage 'code' here is what you do :

'right click' on the white space of the page your are on and depending on the browser you are using a menu will appear. Left click on the 'View Page Source' text in the menu.

The diagram gives you some idea of the code required to bring out a reasonably simple webpage like my 'profile page'

NO, NO, NO! It's CMS you need

Now let's get down to the nitty-gritty. No way am I advocating that you learn how to do the above.

As I said in the title "How to build a Website - the hard way" I really meant it!

This is the hard way and I have spent many hours pulling my hair out, getting sites to work properly.

Yes, I do have some left, thanks for asking :-)

This exercise was simply to show you how difficult it can be and to point out that there is an easier way that is worth the effort in pursuing!

The concept of this is called a 'content management system' (CMS) and there are a number of programs available.

Although not foolproof, if you put the effort in to learn the correct way of using one of the two Programs (Applications) I'm going to suggest, I believe you will have more time to build better looking and if you desire it more profitable, Websites!

As I said these types of programs are called 'content management systems' (CMS). The two most popular applications are called WordPress and Joomla! and are both free to download.

If enough interest is shown through the comments I will write Hubs on how to download, install and use both Wordpress and Joomla!

I also welcome experienced users to leave comments as we are all here to learn from one another.

Joomla

Joomla!  a free program for content management
Joomla! a free program for content management | Source

Wordpress

Wordpress a great program for managing your content, and my personal choice
Wordpress a great program for managing your content, and my personal choice | Source

UPDATE:

Another CMS has been catching my eye called "Drupal" from what I am hearing it is not as user friendly as Wordpress or Joomla! but is improving with each new edition. There is a link below if you would like to have a look for yourself!

Easier Alternatives Wordpress and Blogger

An easier way of 'building' a presence rather than a Website is to simply start a 'blog' at one of the free sites such as "Wordpress.com" not to be confused with "Wordpress.org".

Another free Blog site is called "Blogger" which is now owned by Google.

These programs give you a certain amount of freedom but nowhere as much as running your own website.

The author is currently running a number of blogs on Blogger simply to keep my hand in and learning things about the platform.

Links to these sites are in the capsule at the bottom of the Page.

Wordpress or Joomla!

See results

© 2010 Peter

working

This website uses cookies

As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://corp.maven.io/privacy-policy

Show Details
Necessary
HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
LoginThis is necessary to sign in to the HubPages Service.
Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
AkismetThis is used to detect comment spam. (Privacy Policy)
HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
Features
Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
MavenThis supports the Maven widget and search functionality. (Privacy Policy)
Marketing
Google AdSenseThis is an ad network. (Privacy Policy)
Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
Index ExchangeThis is an ad network. (Privacy Policy)
SovrnThis is an ad network. (Privacy Policy)
Facebook AdsThis is an ad network. (Privacy Policy)
Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
AppNexusThis is an ad network. (Privacy Policy)
OpenxThis is an ad network. (Privacy Policy)
Rubicon ProjectThis is an ad network. (Privacy Policy)
TripleLiftThis is an ad network. (Privacy Policy)
Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
Statistics
Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
ClickscoThis is a data management platform studying reader behavior (Privacy Policy)