There are five basic components of building web sites:
HTML content
CSS formatting
Javascript extras
server-side language, like PHP
database, like SQL
For basic web sites, you only need the first 2 components. For cooler look and feel, the first 3 is what you need. But for developing the most advanced web sites today, you really need all 5 pieces of the puzzle.
This web trick will focus on explaining these 5 components, so you can see what your up against. You will learn what you need to know to become a top web developer today.
1. HTML Content
This piece is the words and images that you want to display on your web page. Believe it or not, for the most part, you should avoid formatting, fonts, colors, sizes, and positioning in your HTML!
2. CSS Formatting
Cascading Style Sheets (CSS) is where the formatting, fonts, sizes, colors of things go. It's also the place for setting margins, padding, underlining/bolding/italics, centering, background images, and a lot of other meta-stuff about your web pages.
The basic idea is that you can assign a name to a set of formatting instructions (like "plainfont" for the body text of your site, "title" for the titles, subheadings). Then your HTML simply refers to these formatting "classes" by their names. This groups all the formatting in a central location.
Benefits:
central location to change formatting
single change can affect ALL items of that "class"
smaller amount of data sent to web browser, for faster load times
many web pages (a web "site") can share a common CSS document
hierarchical layout - many similar items can be in the same "class", with some individual differences specified by "id".
3. Javascript Extras
Javascript is a language you embed within your HTML, to do special logic operations you can't normally do in HTML.
Remember, HTML is just a formatting language - it's not a real language with variables, conditionals and looping. Javascript, however, has the power of a real, object-oriented language. It can access all the elements on the web page as a hierarchical arrangement of objects, which gives you tremendous power:
make additions and changes to content or formatting
hide/show web elements (web page will automatically shrink/expand)
perform time-based operations (change something every 2 seconds)
validate form elements BEFORE the form is submitted and suggest corrections
ask the user an OK/Cancel question before continuing (don't write a whole web page for it)
and a lot more.
Javascript is not an easy language to debug. It takes time to develop useful code. But it is very powerful. If written properly, your javascript code can be reusable with all your future web sites.
4. Server-side Languages - PHP
Those first 3 languages all operate on the client end - within the user's web browser. There's a lot of things these 3 can't do - check a user's name and password, fetch and store files, convert data formats, read or update data in a database, and so forth.
The most powerful web sites have a real language on the server end to get and manipulate data before drawing the web page. For example, a blogging site has to store all the blog entries somewhere. The server-side language can read any or all of the blog entries, count them, check if you're the owner, let you edit an existing one or write a new one if you are, etc.
PHP is a powerful language that can do this. There are many others, but PHP has the right combination of power + ease of use. If you know the Perl language, then you already know about 80% of PHP! It's an easy transition for those who've written Perl CGI scripts before. And if not, no big deal, PHP is not very hard to learn - and a lot of fun.
All of the PHP documentation is online, and has user comments beneath each page, to clarify the documentation (a very useful feature).
5. Databases - SQL
I place this in a separate category from the rest, because proper relational database design is a concept all it's own. The SQL language is not like any other language today.
It's not hard to learn the basics; it just takes time. You have to think in a different way for database design. Your data requirements must be broken into "entities" and "relationships" between those entities (one-to-one, one-to-many, and many-to-many).
Then, you learn how to "normalize" your design, so your database can be implemented as a set of "tables" in the SQL language.
Once all this is done, you can perform the most complicated queries you can imagine: sorting, grouping, conditional data extraction, limiting amount of data returned, and many other things are fairly easy with a real database.
Real databases also store your data in the smartest ways - they use hash-tables for indexed lookups on whichever fields you need, they store things in memory whenever possible to speed up data lookups and storage.
