Web Coding Fundamentals

The Nature of the Web

Since the beginning of the Web, websites have involved client-server interactions.
The client is whatever device you are using to access the website or web application. This could be a browser on a desktop computer or laptop, the browser on a tablet computer or a smartphone, or another program used to access the Web.
The server is a computer that hosts the files in question and serves (sends) you the requested information, which is broken up into data packets that are routed over the Internet to your computer and re-assembled upon arrival.
In the earliest years of the Web's history this relationship was always synchronous, meaning that data was only sent from the server when requested.
For example, to go from page to page in the website you would click a link or button. The requested page would then be sent by the server. That back-and-forth was synchronized; the server would not send you a file until you requested it.
As the Web evolved, asynchronous data transfer became commonplace, meaning that data was being sent from the server without an explicit action coming from the user (the human being) through their client. Auto-updating news headlines, after a certain time period has elapsed, is one example.
Finally, the web is stateless, which means that a web page has no "memory" of what was entered previously or done previously. In essence, each page is a blank slate. We have to create the "memory" of the past via client-side or server-side technologies. This is because of the protocols used for the Web (HTTP / HTTPS).
So, to sum up the nature of the Web, it is a stateless client-server interaction that is either synchronous or asynchronous in nature.

Web Standards

One of the major standards bodies for the Web is the World Wide Web Consortium (W3C); their website is www.w3.org
The W3C creates standards, called Recommendations, which are developed by working groups. Working groups draw members from organizations and companies around the world.
The standards from the W3C that we focus on are HTML5 (Hypertext Markup Language Version 5) and CSS (Cascading Style Sheets). JavaScript follows the ECMAScript standard, which is not one of the W3C standards.
Standards define what is allowed in a language. Newer versions of standards also indicate what parts of earlier versions are deprecated, which means that they should no longer be supported by browsers and other clients. Note that it can take some time before deprecated things lose browser support, as browser manufacturers strive to maintain backward-compatibility with existing websites written to the earlier standard.
Why do we need standards?
- Web design becomes easier (fewer workarounds are required) and users can surf the web with fewer hassles.
- We also have greater confidence that our code will work across a wide variety of devices and environments, now as well as in the future, as long as those devices are standards-compliant.

Layers Model of Web Design

One way to think about a website is in terms of the various aspects that comprise the site. These aspects can be thought of as layers; that phrase is instructive because it suggests not only that these are separate from each other but that they also build on each other.
Modern web design views this in terms of three layers:
- Structure: This is the HTML5 tagging that holds the text information and other content, such as images. This defines the document structure, such as headings, paragraphs, lists, etc.
- Presentation: This is the CSS that styles the HTML5 tags.
- Behavior: JavaScript makes website structure, content, and/or presentation changes based on actions that users take, based on time elapsing, etc.
A non-optimal website or web application mixes structure, presentation, and behavior in the same file. This makes code harder to modify, complicates site redesigns, and makes it impossible to re-use presentation and behavior information without copying it into every page.
A much better approach is to separate the layers into different files, which makes it very easy to change presentation and behavior and promotes re-use of the code.
Server-side languages allow content and structure to be separated, with content stored in text files or in a database. This further simplifies site creation, maintenance, and redesign.

Client-Side vs. Server-Side Coding

As mentioned earlier, the Web is a client-server setup. When we talk about languages used to build web pages, we can group them into one of two categories: client-side or server-side.
Placement in a category depends on where the language is interpreted (read for meaning or processed).
All of the languages mentioned so far (HTML5, CSS, and JavaScript) are client-side languages, because they are entirely interpreted in the client device (e.g., the browser).
- This is a great benefit for us, because all that you need in order to write web pages with those languages is a browser.
- You don't even need an Internet connection! You just need to open the file in the browser and it will work (assuming the code is written properly, of course).
- Servers just send the files written in client-side languages to the browser (or whatever client you are using) without any interpretation.
- Anyone can read your code using the 'Source' or 'Page Source' option in the browser's 'View' menu. This can also usually be accessed by right-clicking on the web page and selecting 'View Page Source' in the context menu that appears.
Many server-side languages exist. Some examples are PHP, Perl, Python, and Ruby.
- Files written in server-side languages are interpreted on the server by a specialized interpreter program and the end result of that is sent to the client. Often what gets output or returned is text information and potentially some HTML5, CSS, and/or JavaScript.
- An example is a small piece of server-side code that retrieves the current date from the server and outputs that to the page. The code that retrieves the current date is removed once that interpretation occurs on the server side and in its place is the current date (which we see on the screen and also when we view the source code for the page).

Static vs. Dynamic Content

In static web pages, also referred to as hard-coded pages, the text content that appears on the page is typed in (or inserted via copying/cutting and pasting) and saved in the .html or .htm file (either file extension is fine, but .html is preferred). The HTML code and the CSS will not change unless we make edits directly to those files ourselves.
In contrast, dynamic web pages pull their content from a database, a separate text file, or have some content generated by commands in JavaScript or in a server-side language. The output of these files can change each time the browser window is reloaded.
Using the earlier example of server-side code that retrieves the current date, if that page was reloaded at midnight (or later) the date would dynamically change.

Key Themes in Modern Web Design

Separate structure, presentation, and behavior: This makes our jobs as web developers much easier. Search engines and other programs reading through web pages also experience fewer difficulties.
Write accessible code: Accessibility refers to making web content easy to access and easy to understand for all users, regardless of physical and/or cognitive impairments. Using HTML5 properly supports accessibility.
Write efficient, streamlined code: This reduces bandwidth costs and also reduces the chances of users leaving because they are tired of waiting for the page to load.
Strive for cross-browser, cross-platform consistency, but plan for graceful degradation: For old browsers there is often no choice but to allow them to gracefully degrade, which means that users can still read the content but unsupported visual effects and/or behavior are not present.