In the past two weeks I have taught myself
<ul><li>HTML</li>, <li style=’color: blue’;>CSS</li>, <li><button type=’input’ onclick=’printJS();’></button></li>, and <li><?php if ($not_done_learning) { echo ‘in the process of learning ‘ } ?> PHP.</li></ul>
<script>function printJS() {
this.innerHTML = ‘Javascript‘;
}</script>
If you understood that then you’re probably a web developer, if you didn’t then filter out all the non-bolded garbage and you should get the point (well, probably not because those abbreviations probably mean nothing to you).
So many languages to handle so many different aspects of a web page. Luckily for you, all you need to worry about is the browser which pieces it all together on a simple viewport that we can click and type on. Which brings me to my next point:
INTERNET EXPLORER. For some reason it’s still one of the most-used browsers, probably because its users don’t know how to install a better one. I think the more one knows about web programming the more they despise IE. Everywhere you turn you’ll hear people saying “except in IE,” ESPECIALLY versions before IE10. Browser-specific code is something everyone would like to avoid, but as long as the old IE versions are around, it’s unavoidable.
Luckily, these days a lot of libraries are available that abstract browser-dependent functions and provide us a nice simple function that has cross-browser support.
Now I want to dedicate the rest of this post to giving a broad overview of the different languages involved in most websites and how they affect you.
Hyper-text Markup Language (HTML) – The structure of the web page. The browser receives an HTML file from the web server you are visiting. (Ex: A server hosting facebook sends you an HTML file every time you visit a page). The HTML technically doesn’t define anything to do with how the page looks, we have Cascading Style Sheets (CSS) for that.
CSS – This is the presentation of our web page. This code “augments” the display of specific HTML elements. For example you can set the background of the page to be an image, or you can force all links to be red. Still, with just HTML and CSS you are very limited. You can make a simple, presentable website with static content, but that’s about it. If you want to go beyond that you can use Javascript.
Javascript – This defines the behavior of the page. For example, how do you change an image every 5 seconds or control what happens when you click a button? Javascript allows the user to interact with the page by allowing us to do stuff when you press a key or click an element. With this thrown into the mix we can make our website a lot more interactive, but still there are limitations. Javascript is run on the client by the browser. This restricts you from accessing databases from the code mainly because of security issues and it’s generally regarded as bad practice. Here’s where PHP Hypertext Preprocessor (PHP) comes into play.
PHP – PHP is embedded into the HTML of the page, but isn’t processed by the client, it’s processed on the server. The chain of events is: You request a web page -> the web server processes the PHP -> and then the web server sends you the web page (there is no trace of PHP on the client because it’s already been processed by the time it gets to you). By processing the language on the server, it is much more suited for communicating with a database.
Combining all 4 of these languages gives you a lot of control over a website, but I’m sure I have much more to learn.
andrewborba 