Often there are times when a person posts a question in a development forum and gets very negative responses. That usually happens for two reasons: a) the person wants other people to do the work for him; b) the person doesn't have a clue of what he/she had just asked for. Sometimes people want to build houses without knowing what the nails are for and that walls are supposed to stand vertically. This article will explain some trivial and not so trivial things that every web developer should know before starting his/her journey into web development. We will discuss how things work, what the web is and what you need to do to get started.

Part 1 - What is a website?

So you've decided to create a website, but do you really know what it is? It's a good thing if you do, but if your answer is "a page that opens in a browser" then you're wrong. In this first part i'll explain what parts the website consists of and how they're all connected so keep reading. Every website consists of pages just like a book or any document so let's have a look into a basic web page. Web pages are nothing like word or pdf documents or something like that. You can add lots of stuff to a word document and save it as a single file. Well you can't do that with a web page. Every image, video, audio or other multimedia file is stored separately in a webpage. The webpage itself is a simple text file, written in a Hypertext Markup Language. This document only contains instructions to a browser about how the website will look like. For example if you know that you'll need a black background and an image on the top left corner of the page, you describe that in the HTML document. And to do that you use the already mentioned HTML language. Let's try that shall we. Here's the instructions that we need:



Now let's translate that to HTML. First, create a text file anywhere on your computer and name it somename.html. Then open this document in Notepad. Now our instructions say we need a hello.jpg image. Find some JPEG image on your computer, copy it to the same directory where somename.html is and name it hello.jpg. Now copy this text to your file in Notepad and save it:



Now double-click the somename.html and it should open with a web browser. When it does, you'll see a black background and an image. The code above translates to the instructions that we've defined earlier. It is written in HTML language and your browser understands it perfectly. One thing to note is that this code is not entirely correct: it is not written according to web standards. In order to have a valid code, we'd need a little bit more stuff in the document. This example, however, has only minimal implementation so tat you'd be able to understand it better. As you can see, there is no image anywhere in the document. There's only an instruction to load it from hello.jpg file and the image itself is located in the same directory as the HTML file.
I'm not going to go deeper into explaining HTML, because that's not the purpose of this tutorial. There's only one thing left to say about HTML: if you don't know it - learn it!!! You can't be a web developer without knowing HTML. You can, offcourse, create web sites without knowing HTML, because there are special tools to do that, but they all have very limited functionality, comparing to what a web programmer can do.

Part 2 - How do websites work?

As you've already seen, they work by double-clicking the HTML file :) You've already know that a website contains pages (HTML files) and resources (images, videos, stylesheets etc.) in separate files. When you develop a website, there's one thing left to do: noone can see it from your computer and you need a place to put it for everyone to see. A place like that is called a web server. Web server is yet another computer that is way more powerful than your ordinary computer and has a very fast internet connection. You can even turn almost every computer to a web server for very primitive web sites though i'd not recommend it. So to get a server you have to ... pay. Yes, if you want a good web server, theres going to be money involved. And web servers are not for sale: you have to rent them. That means you have to pay for as long as you use them, because noone gives you the server itself: you are only given an account on that server that you can login and upload your websites to. If you have lots of money, however, you can buy a server, but you will still have to pay as long as you use it, because it still has to be connected to a fast internet line and you can't buy that. Servers are rented by a special type of companies, called hosting companies. There's lots of companies, offering lots of different plans for hosting your website and you have to choose the one you like the most. When you have a server, you can start uploading your websites to it. Now all you have to do is type the address of your website in a browser. Hey, wait! What address??? How do i know what my website's address is? There is no very trivial answer to this, actually. A hosting company might assign an address to your account and give you a web address themselves. They might give you an address like yourname.hostingcompany.com. That's not a very good address though. Well, if you have even more money, you may buy whatever address you like and assign it to your website. However, this is a difficult topic and unfortunately every hosting company has different ways of doing that so there's no universal solution that i could write in this tutorial. The one thing you can always do is contact the support of your hosting company and ask them how you can do that. A good company will always reply to you, answering your question and possibly offering their help with that.
So what happens when you have a website address and you type it to your browser? Lots of things happen, actually. First, your browser connects to a domain name server and asks if it knows where your address is located. A web address such as www.example.com is only meant to be readable for the people, but doesn't say anything to your browser. So there are domain name servers that translate textual addresses to the actual address that your computer understands. Every internet connection in the world has its own address. That means the server of your website also has an address. Just like you have a home address, servers have it too. But it's not www.example.com. Internet addresses are a combination of numbers and dots like 127.0.0.1. Not a very easy thing to remember, right? That's why a domain name server has been invented to store and translate human readable addresses to these numerical hieroglyphs. Ok so where were we? Ah, yes! Your browser first connects to a dns server and translates the entered address to a numeric IP (Internet Protocol) address. Now the browser knows where your website really is and tries to connect to it. If successfull, it asks the server to display a page you've requested. The server then checks the page address and determines where it is located in its file system. It then passes the page to your browser. After the browser receives the page, it executes all the instructions in it. If, for example, an instruction to load an image is found, your browser connects to the server again and asks it for that image. That's how your webpage is loaded and displayed.

Part 3 - Dynamic websites

Dynamic websites are not very different from the ones we've already discussed. The only difference is that dynamic websites are generated every time your browser requests them. That means that you don't just upload it to the server: instead, you upload a script that generates your website. That might be difficult to understand at first, but let's take a look at a simple example. Imagine you have an address www.example.com/web.php. In the end of the address line, there's a web.php part that tells your server to look for web.php file in your account. Now PHP is one of the server side programming languages, that helps generate your website. And if your server supports this language - it won't pass the web.php file back to your browser. Instead, this file will be passed to a PHP script parser that will interpret your script and execute the actions you request. Let's have a look at the following example for a PHP language. Imagine that your web.php file looks like this:



As you can see this file is way different from your HTML file. It uses a different language. The purpose of PHP is to generate your website, that is - generate the HTML itself. Instead of writing the HTML for yourself, you generate it dynamically using PHP. The example above does the following: the second line checks if the internet address of the connected client is 127.0.0.1. Still remember what an internet address is? Well, you have it as well and that's what the script checks for: it checks if your address is 127.0.0.1. How does a web server know your address? Well, that's how internet works: every end of the connection knows the address of the other end. So just as your browser knows the address of your website, your website also knows your address. But your PHP script doesn't! That's why you need to check it. Now everytime you try to access the script, your address won't be 127.0.0.1 so the script will bypass the third line and go straight to the 5th line in the script. The line echo 'Hello, remote user!' tells the PHP interpreter to output text Hello, remote user. This command outputs the text that your browser sees. So after executing the PHP file, the server will return Hello, remote user to your browser. And that's exactly what the browser will show you. As you can see, the script itself was completely different than the result your web browser got. That's because instead of passing the file to the browser, the server executed it and only passed the results. This enables web developers to create amazing dynamic websites. Things like forums, user registration, email contact forms etc. are all created with the help of server side scripting languages such as PHP. However, if you want to learn one of these languages, learn HTML first. Because the result of your web scripts will be nothing else but HTML. OK if you still remember the HTML file we've created way above, let's try to convert it to a dynamic PHP script. Here's how it will look:



Instead of simply writing the HTML code, we output it with PHP's echo command. If your browser tries to load this script, the result will be the same as loading this HTML file:



But what's the point of doing this? Well there's no point in this particular example, because there's nothing dynamic about it. But imagine a slightly different example. Imagine that you still want the black background, but you only want the hello.jpg image to be shown on fridays. You can't do that in HTML, but in PHP it's easy. You would echo the background color instruction, then check if the current day is friday and echo the image instruction depending on the result. That's what server side languages are for.

Part 4 - Server side vs. Client side

You've already seen me mention the server side language phrase. But some people fail to understand what it is and that leads to stupid questions and problems. Server side language is a language like PHP, ASP or something else that is meant to generate your HTML content on the server and only send the generated result to your browser. That means you will never see the script that was used to generate the website. You will only see the result it outputs. And the result will be an HTML page. So the script itself is only visible to your server. That means you can store your passwords or other sensitive data in a PHP script and it won't be visible to your visitors. Offcourse, you have to know how to store them, you have to know the syntax of PHP language. Now there's also a language that brings confusion to the beginning web developers: JavaScript. JavaScript is a scripting language just like PHP is, but the difference is that it's a client side language. What does that mean? That means the JavaScript is actually downloaded by your browser and executed on your computer. So naturally you can't store any sensitive data in it, because it's visible to your visitors. Then why should you use it? If you've understood about server side languages then you realise that they only generate your webpage and send it to the browser. From that point on the page does not change. You can scroll through it, click on links, view images etc. But what if you want for example a clock to be displayed in a corner of your webpage? You can't do that with PHP, because it only generates a result once and it doesn't change when loaded to your browser until you press the refresh button. So if we want to make a clock in php, we'd have to refresh the page manually every second to see the changes. Pretty cool clock, huh? :) That's where JavaScript comes in. You can easily create a clock with this language and there will be no more need to press the refresh button yourself. Actually, there will be no need to reload the page at all. JavaScript can easily manipulate your page after it's loaded. You can use it to add, delete or modify the content of a loaded webpage. For example you can have an image and with the help of JavaScript make it change to a different image when you click on it or hover your mouse above it. So to sum up: PHP gives you dynamics in generating the website; JavaScript gives you dynamics after the page has been loaded to the browser. JavaScript does not use any server resources, it is being executed by the browser itself.

So these are the basic things you need to know in the very beginning of your web development experience. Hope you've learned something new and useful. If not - means you're not the very beginner that this article is meant for :)

Article written by: Marius S.
This article is an intellectual property of its respective author. All images, used here are property of tip-kit.com if not stated otherwise.

Share this article

Leave a reply

Your name:

Message:


Please enter the above code: