how to build a website | the hard way!
By agvulpes
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 Consortiom' led by Tim Berners-Lee the inventor of the web. Viewers can find much more information on the WWW by visiting the Website shown underneath this paragraph.
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>
<head>
<title> My Basic WebPage </title>
</head>
<body>
This is the content of my basic web page. Thanks for looking !
</body>
</html>The World Wide Web Consortium (W3C)
- About W3C
The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. Led by Web inventor Tim Berners-Lee, W3C's mission is to lead the Web to its full
My Basic Web Page
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 your 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 master piece.
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 'style sheet' and it takes its orders from the 'style sheet'.
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.
Agvulpes Hobby Page
I have mocked up a webpage for my Profile name '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.
Source Code
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'
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 and 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.
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!
Easy Alternative
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", or "Blogger" which is now owned by Google. These programs give you a certain amount of freedom but nowhwere as much as running your own website.
Links to these sites are in the capsule at the bottom of the Page.
 | Amazon Price: $18.88 List Price: $34.99 |
 | Amazon Price: $25.99 List Price: $49.99 |
 | Amazon Price: $23.54 List Price: $44.99 |
 | Amazon Price: $27.99 |
 | Amazon Price: $3.97 |
 | Amazon Price: $13.79 List Price: $24.99 |
 | Amazon Price: $19.99 List Price: $44.99 |
 | Amazon Price: $19.99 |
Wordpress or Joomla!
See results without votingComments
Thank you for writing this article. I have no interest in learning HTML, but I'd like to learn a bit so I bought a book for dummies LOL. I am still learning Wordpress and have toyed with the Joomla idea for my websites that are in the making. So yes, I vote YES to more info on Wordpress and Joomla! So much of Wordpress is common sense, but I want beyond common sense, for example customize my header with my own design.
Look forward to more articles on this topic!
That was so WICKED COOL!! I still don't have any clue what you were saying half the time because I am a "technologically challenged" person. I have issues with DOS, let alone HTML!! lol This is a great article though, I learned a whole lot more than I thought I would! THANK YOU!!
Excellent hub, I could never or want to so it, but you were up for the challange to write this hub, and you are talented my freind, thumbs up.
You'll always be my 'go-to-guy' for all things HTML!! You are amazing and I appreciate you bunches!
Yep starting from scratch can be a nightmare but I would suggest it. HTML is pretty simple even though at first glance it does look a little strange and CSS is just an extension of that. There are about a million really good books on the subject that can walk the most technically challenged person through it. WYSIWYG (what you see is what you get) editors problem is that they don't keep the page source clean so as you do get more savvy it will be much harder to make simple changes.
Wow guys, thanks for the great comments, I promise I will be back to answer each and every one of them.
btw: I have just added a POLL just above the comments, to give me some idea on the interest level, would you mind popping up and voting, Please :-)
Great stuff Ag! I think building sites gets pretty hard when you get into the Search Engine optimisation, (SEO) and Wordpress seems to be the best platform for this if you do not have a lot of knowledge.
This is a well done, very informative hub!
De Greek, thanks for dropping in and leaving a comment, I did not know a lot myself up to joining Hubpages. This is a great site for people who just want to publish and not have to worry about learning any code. Any questions just ask and I will try and answer you as best I can or find out the answer :-)
I'm very happy you established that it is indeed, NOT easy from the very get-go. I always chuckle to myself when I see ads that exclaim, "Build Your Own Website in Minutes!" Ha! Right.
Very informative article, and I think this is great stuff for people just starting out. Great job!
Jane@CM, thank you for the most informative comment! The problem with only learning a bit of HTML is it's like eating chocolate, you just never know when to stop!
It depends what you want your Website to do for you?
I have had a play with both platforms and I have started forming an opinion that Wordpress is the easiest app in which to make alterations. To honor your comment the first modification I will look at is customizing the Header in Wordpress. First though I will go over the installation and set up of both Wordpress and Joomla.
cr8ve1, WICKED COOL !! I do hope you mean that in the nicest possible way. LOL
Don't mention DOS to me it's a dirty word, and should be erased from the English language.
So, cr8ve1, after reading this Hub have you discovered you are not so 'technologically challenged' after all?
I'm sure that if you gave yourself the time and the motivation of 'really' wanting to learn HTML you would be able to do it. It's not really that hard!
THANK YOU for your very kind words!
Darlene Sabella, so nice to see you visit and comment on my Hubs, and I do appreciate your kind words.
The hard part of this Hub was deciding what to leave out!
We are all so fortunate in this day and age, especially here on HubPages, to not have the worry of learning or even to know anything about HTML.
HubPages give us enough tools to do what we need to do on the Internet.
Thank your also for the thumbs up. :-)
Candie V, thank you for your vote of confidence but I would say I know more about Photoshop than I do about HTML.
Apart from being able to read and write in HTML the amount of different Web Browsers being installed these days is making the using of pure HTML more and more difficult. (I did not mention this point in the Hub)
Thank you for another kind comment :-)
Shirt, thanks for dropping in and leaving a great comment. Yes I would agree with you at least 1 million and even before they are printed they are 'out of date'!
I also agree with you about the WYSIWYG editors, I have come unstuck on a number of occasions and had to revert to the straight HTML. Thanks again for dropping in :-)
earnestshub, nice to see you here! You are so right, I did not even touch on SEO in the Hub. I agree that Wordpress looks like being the best for the SEO side of things.
I also think from what I've seen here at HubPages they give us Hubbers a pretty good tool for maximizing the SEO aspect of our Hubs?
Thanks for adding to the discussion, it does seem to be a popular topic :-)
carolina muscle, thanks for dropping by and leaving a vote of support :-)
mynameisnotpaul, yes I have cringed many times when I see those ads. Although on investigation most of these so-called fast sites are indeed using some form of CMS (content management system) such as something based on Wordpress or Joomla! used in a Commercial manner.
I thank you for dropping by and adding to the discussion.
I sense that a lot of people are interested in having their own WebSite but are 'turned off' by the complications of HTML.
Well lets try to unravel that shall we?
:-)
I actually did it the hard way, HTML I know from junior school, but CSS gave me problems until I learned it properly. I don't know, I guess if you want something done right you just do it yourself, and then realize you don't know what you are doing :)
ZarkoZivkovic, thanks for adding to the discussion. You actually learned HTML in school. WOW, I must check but I'm sure they don't do that here in Australia?
I agree with you about the doing it yourself. Even if you don't know what you are doing you seem to be able to do it better than the professionals. :-)
Oh my gosh you are sooooo humble! I know for a fact you know a fair bit about what you're talking about!! Photoshop, sure you're good at that too!
Ag they do teach html in schools in Australia. My son Hugo learnt it at Melbourne Grammar. Mind you at $6,500 a term they should have!
Candie V , you are too kind! I am a member of that famous Club called 'Jack of All Trades'.
I do appreciate your compliments though. LOL
earnestshub. I think I misunderstood the meaning of 'junior school'. I thought he was referring to what I know as 'grade school'. But what would I know I did my schooling in the 1940's lol . When I went to school computers for the masses had not been invented let alone HTML.
I'd like to know more about both. It would be definitely a big help. Glad you have still hair. :)
hypnodude, LOL
Hey dude stay tuned I'm studying up on Wordpress as we speak:-)
Thanks for dropping by always a pleasure to see your beautiful little bird :-)
Thanks - this will be very helpful to me. I'll look for your other hubs on the subject.
nadp, thanks for dropping by and leaving a kind comment.
I am looking at Wordpress now. Both Wordpress.com and Wordpress.org. Hopefully I can do another Hub on these two content management systems. :-)
Great hub and great advice, only thing is building a website is damn hard work, tis why I gave up but Wordpress is good.
intresting hub,for my first html learning
TattoGuy, you are so right, to build a website the hard way is a lot of hard work. I must catch up on your Wordpress sites.
Thanks for dropping in matey ;-)
haryanto152 thanks for dropping in. It was not my intention for this Hub to be a turorial on HTML, more of a pointer of why you would not be bothered learning the language.
I would recommend that you concentrate more on learning how to run a Wordpress platform first.
Yeah - It's a steep learning curve but I think it's advantageous to have some knowledge of HTML before moving onto, say, Dreamweaver. I think the problem with Wordpress is that the pages look very "samey". One last thing. - As the images on a web page are so important it's useful to know how to use Fireworks (not Photoshop - too complex) to manipulate and optimise images. This is a great hub - I know how hard it is to explain these concepts in a clear, easy to follow way. Best wishes, Max :)
Maxvon, thanks for your great contribution. I do agree with you about haveing some knowledge of HTML and also the 'sameness' of Wordpress and I would add Joomla!.
Although I have not gone under the 'hood' yet in these platforms I am going to very shortly.
I intend to install a 'server' on my own computer and run it as 'localhost' so that I can play with Wordpress and Joomla at my own pace!
I also agree about Photoshop being complex but I have been honing my skills on using layers and it is starting to come together. I have not used Fireworks but I will investigate the program , although it does look kind of expensive for my particular application.
Thanks again for dropping by :-)
These days everything seems to be complicated; but websites are very easy if you know how to read the code; great article
syedmn, yes you are correct but 'everyone' seems to want instant gratification these days as well. Some people don't want to put in the hard yards to learn, that is why the applications like Wordpress and Joomla! were invented
Thanks for dropping by and leaving a nice comment :-)
Nice to know. I'm afraid I'm one of the lazy ones. When I want to build a website - I want it built yesterday. fast. lol
Having said that, I do take note of some of the codes as I am into IT (just software) but it doesn't hurt to know these codes. Also, when I have problems with Wordpress, I actually type in the codes.
Great Hub. :)
Lady_E , you lazy?, no I can't believe that lol
You have written nearly 100 hubs in only 10 months phew In my book that is quite an achievement!
I agree with you that it would be quite handy to be able to at least understand how the code system works such as where these " signs should be in the structure of the code. It would save a lot of angst when things don't look right!
Thanks for visiting and I appreciate your contribution to the discussion on how to build a web site :-)
After spending time on both wordpress and Joomla I have to say I think wordpress is a lot easier to use and better for a basic blog.If you want something a bit bigger and more complicated go the Joomla route.
cool for basics and beginners ......
kev8, thanks for the great advice I will be tackling Wordpress first simply because I have a feeling that Wordpress is in fact more user friendly than Joomla!
Please feel free to offer any advise you like as we are all going to be learners here :-)
manijee, thanks for dropping by I hope you have picked up some pointers from the Hub and the comments on how to build a website :-)
Interesting Hub! As someone who is currently trying to build a webpage, I know first hand IT'S HARD!!! Thanks for a very good Hub!
Cathi Sutton, thank you for your kind words. Because the Internet is an ever changing technology, almost by the minute, we are all learning. Even the so called experts still get it wrong. Cathi if you are stuck on anything just ask, if I don't know the answer I will do my best to find one for you. In this way we will all learn as we go :-)
Great hub - well laid out.
For those after easy website create - have a look at weebly.com - very slick and quite easy to get up and running.
Thanks for the great hub and advice - I learnt the hard way and now leave it to the professionals. I mean it will take me 6 months to build a bad site, when I can pay someone professional $150 to build a great one!
DragonOZ, thanks for dropping by and leaving the great tip. I know some people will never get or want the ability of doing there own website building :-)
Property-Invest, thanks for dropping by and leaving a great comment. Sometimes it is better to go down the pro track in building a website. More so if you can get it for $150.
I have looked into that here in Australia and the old adage of "you get what you pay for" applies! Sometimes to the extent of "you don't get what you pay for" :-)
I still prefer the option of being able to control my own content and not have to rely on a third party, but then again I am not really under any deadline pressure :-)
Thanks for some very interesting & informative information. It makes a potentially difficult subject easier to understand.Ive done it the easy way too by starting to write on blogger & wordpress. One day I hope to have my own website.cheers!!
steve
wilbury steve, I hope you got some thing out of this hub on just why straight html websites are now a thing of the past.
I am still using Blogger and Wordpress.com but when I get the hang of Wordpress.org I'm sure that I'll be switching over to it :-)
Steve thanks for dropping in!
This is well written and very understandable - thanks.
gramarye, thank you for visiting and thanks also for your nice comment:-)
Building web sites is like building houses, better left to the professionals.Guess how I voted. Great explanations, worthy of the upraised thumb!
jstankevicz, mate thanks for dropping by!
Nice observation about the pros building websites.
I must say I do tend to agree with you, I think that it is the repetition thing the more you build the easier it becomes.
Thanks again for the nice contribution and the raised thumb:-)
Thank you for this. Even though I already know most of what you have here, I didn't know about CMS and it was good to get another take on html and css.
I am currently taking an html class and find it too slow. I want to become a freelance web designer and I am planning on doing all my learning online instead of going to college (I guess you call it Uni?), there are so many great tutorials out there, free and paid for. What do you think?
Thanks for stopping by and fanning me, that's how I came here. I look forward to reading more on this subject.
Alexander Mark, Oh I hear you about being too slow, most attended classes stick to a time wearied thread and progress at the pace of the slowest learner. Also most courses would not be teaching the latest in web technology.
I feel if you have the discipline to take the time, you will find many courses and forums on-line.
Here is a link to one website tutorial site from "World Wide Web Consortium" they control the standards of the Web.
http://www.w3.org/2002/03/tutorials#webdesign_html
I am self taught myself but if I can be of any help just ask and if I can I will help you!
I wish you well with your quest to be a freelance web designer!
It's definitely hard for amateurs (like myself), but I'm still learning. Working hard pays off at the end, they say...
Working hard does pay off in the end?
Maybe sometimes it only shows you that you have going in the wrong direction. We have to learn from the mistakes that we make and that in itself is a great lesson!
I bookmarked your hub several months ago, finally got around to reading it. It is great I plan on staying in touch with you. In the meantime I would like to know more about Wordpress.
platinumOwl, I'm working on a Hub specifically for Wordpress but it's a bit off yet. If you are interested stay tuned!
Your article is very helpful to me. Thanks for the great hub and the useful info.
Using the HTML code is definitely how to build a website the hard way. These days it is much easier to put up Wordpress and learn that process.
Links of Interest
- World Wide Web Consortium (W3C)
The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. - WordPress Blog Tool and Publishing Platform
- drupal.org | Community plumbing
- WordPress.com Get a Free Blog Here
- Blogger: Create your free blog
Blogger is a free blog publishing tool from Google for easily sharing your thoughts with the world. Blogger makes it simple to post text, photos and video onto your personal or team blog. - Joomla!
Joomla! - the dynamic portal engine and content management system
De Greek 2 years ago
What a great piece of work. Many thanks for this, from a complete ignoramus. You have helped me a lot :-)