Markup
HTML
HTML stands for Hyper-Text Markup Language. It is essentially a way of
defining the structure of data on a page. in JUST html, all you would get is a
blank page with text in it, organised into different 'invisible' boxes or
'divisions'. This is what we call a 'div' example:
CSS
CSS stands for cascading style-sheets CSS is where we define what a page
'looks' like. colours, position of the 'divs', font-sizes, gradients,
background-images etc. example:
In an ideal world,
what the page looks like, is Not connected to how the page is written in html.
A good example of this is the site 'CSS Zen Garden'[1] ALL of the pages in the
above page, are the exact same HTML. Only the CSS has been changed. In a
'real-world' example this is not always practical, especially for larger sites
like facebook, reddit etc…. but it proves a point. CSS is for how it looks,
HTML is for how it is 'marked out' (content) Looping , While, and other 'code'
Code
Neither HTML or CSS are 'code' they are both essentially just GUI. They do not
'do' anything, other than provide an interface. For code you basically have
two options: 'Javascript' or 'PHP' Both do different things, and I will
outline them below, but first it is important to understand how a website
works. When you load a website, you request a page from a server. The server
gives you the page, it downloads to your computer and it is displayed. If you
want to have content that is 'dynamic', for example, text that displays todays
date, or (in an advanced system) text that displays a username, or blog post.
you wound not have a different page.html for each page. It would be silly to
have a 'different' .html page for every page/article in a blog, and this is
where PHP comes in. PHP looks like this:
PHP
echo is essentially the same as 'print' in other
languages, in php it is kind-of not a function, hense there is no need to have
echo(). HOWEVER echo() and echo are the same. This is not true for all
functions. Just echo…. TL;DR echo is weird, deal with it PHP on its own, is
also no use, because all you would get is a page of data, with no formatting.
For PHP to be useful, you must use integrate it with HTML (& CSS) eg:
This may not look useful, but as soon as you
start to use PHP functions, you will see it is. for example to display the
day, you could do:
Hopefully that makes some
sense. So remember how earlier i spoke about servers? The PHP code (the above
file) lives on the server. When you ask for it, by going to the url (eg:
www.website.com/index.php[2] ) the server runs the PHP code, and generates the
output BEFORE it is sent to you. When it sent to you you will receive ONLY
html code. (if you right-click>view-source on a webpage, you see the HTML) for
the above index.php file, you would receive:
This is important, because once the page has reached you, it is STATIC. It
will not change. even if you leave the webpage open forever, it will always
say "Wednesday the 15th" If you want that info to 'change' you want to use
'Javascript'
Javascript
Javascript runs NOT on the server, but on the users computer. ANYTHING that
moves or changes on a web-page is 99% probably javascript. There are a few
exceptions, don't worry about it yet so, Lets imagine you want to get the date
in javascript and display it on a page if we imagine we have the same HTML
page as above, Ignore the PHP stuff.
javascript could look like this:
This would cause the page to 'update' the date in '
' every 10 seconds, forever. Hopefully that is a good explanation of how a
webpage works. Basically most modern webpages work with a combination of PHP,
Javascript, HTML, CSS.. Yes its confusing :) If you need any more advice, or
help, let me know. Edit: Just realised after all of that I didn't actually
explain while or for loops… damn… Ill post another one below ;) Looping
(Again) For this example, Im going to use a HTML list as an example: Imagine
you want to (for some reason) list the numbers 1-15. Here is the html code:
This would be better to do in PHP