Primer for Web Developers

From Anarchy In Action

What Is a Website Made Of?

HTML

  • HyperText Markup Language (HTML) is one of many markup languages. Think of it like a bunch of <container>Content</container> tags, the "scaffolding" of a Web page.
  • Markup languages are designed to logically present information and media, like a recipe:

RecipeBook XML Example.png

  • HTML markup consists of several key components, including elements (tags) and their attributes (settings). The tags included in the HTML standard are defined by the W3C, currently working on HTML5.

Standards and Rendering Engines

  • HTML code is rendered (displayed) by Web browsers, using their built-in rendering engines. Web developers have the constant challenge of testing in different browsers because of different implementations.
  • Corporations like Microsoft, Apple, and Google introduce their own tags and plugins over time, or actively try to subvert standards. The most famous example of this is Internet Explorer, although challenges from Mozilla and others have pressured IE into closer compliance. Tests like Acid2 and Acid3 are designed to test a browser's compliance with standards (both the W3C's official specs and de facto standards).
  • You can check your HTML (or CSS) code with the W3C's validators, either by pasting in code or your webpage URL (address).
  • Many Web pages feature HTML4 or XHTML or some mix (usually non-compliant). There are even two different working groups at the W3C for HTML5, one with a more rigid set of rules and the other with looser rules, allowing for quicker modifications as time goes on.
  • It can be difficult to get your HTML "right", especially with Content Management Systems. However, it's important to be close and to test websites in multiple browsers/operating systems.
  • The two major rendering engines to test against are WebKit and Gecko. You can think of rendering engines in three "families":
  • Gecko, the rendering engine for Firefox and the Mozilla variants (SeaMonkey, Camino, etc.)
  • WebKit (and its close variant, Blink), rendering engine for Safari, Chrome/Chromium, Midori, and most mobile browsers.
  • Trident, the rendering engine for Internet Explorer. Microsoft suffers from a severe case of NIH.

HTML Example

The following is an example of the classic Hello world program, a common test employed for comparing programming languages.

<syntaxhighlight lang="html4strict"> <!DOCTYPE html> <html> 

 <head>
   <title>Hello HTML</title>
 </head>
 <body>

Hello World!

 </body>

</html> </syntaxhighlight>

  • The text between <html> and </html> describes the web page, and the text between <body> and </body> is the visible page content. The markup text <title>Hello HTML</title> defines the browser page title.

CSS

  • Cascading Style Sheets (CSS) is the language of Web page styles. The idea is to separate the look and feel of a Web page from the structure and the actual content (text, media, images, linked documents).
  • Stylesheets allow you to edit content "on the fly". If you've ever seen a website where you can choose a color scheme (e.g. Yahoo! Mail), it's because stylesheets have been changed.

Why Use CSS?

CSS is the work of people who have experimented with the "old way" and realized it's flawed. In the old days, we might use an HTML font tag like this: <syntaxhighlight lang="html4strict"> This is some text! This is some text! </syntaxhighlight> Nowadays, we use something like this: <syntaxhighlight lang="html4strict"> This is some text! This is some text! </syntaxhighlight> That's an example of inline CSS, meaning the CSS is inside of a style="" attribute in the HTML tag (in this case, span). Inline CSS doesn't allow for the portability and "on-the-fly" customization of linked CSS stylesheets, however.

Linking Stylesheet Files

A better way of using CSS is to link to an actual CSS file, like this: <link rel="stylesheet" href="main.css">

  • Inside main.css, we would have the relevant CSS:

<syntaxhighlight lang="css"> .content { font-size: 16px; color: red; } .footer { font-size: 12px; color: blue; } </syntaxhighlight>

  • In this way, we're naming the span tag something like footer, so that we can apply styles to it, rather than putting the styles inside the actual HTML document. If we replace or edit the main.css stylesheet file, we could apply a different look to the entire website just by changing one file.
  • You can check your CSS, just like HTML, with the W3C's validators, either by pasting in code or your webpage URL (address). CSS3 is the newest version of the standard, and introduces complex methods of manipulating styles that were previously accomplished with browser hacks.

JavaScript

JavaScript is a client-side scripting language, a "real" programming language in comparison to HTML or CSS. It's designed to do things inside a Web browser: when you click a button, when you see a popup, or when something moves on the page.

JavaScript Example

<syntaxhighlight lang="html4strict"> <script type="text/javascript"> </script> </syntaxhighlight> After the HTML and the CSS on a page loads, JavaScript is executed. Frequently, you'll see JavaScript in the <head></head> tags of an HTML document, so that it loads first; no matter where it is in the document, it's executed by the browser after HTML and CSS.

jQuery and Bootstrap

JavaScript was much derided in its early days, but is becoming the de facto standard for Web programming, and is becoming a big part of our operating systems. In Mac OSX, Windows 8, and Ubuntu Linux, JavaScript is a necessary requirement. JavaScript is becoming the glue between what we traditionally think of as the Web, and what we think of as a "desktop".

  • As JavaScript has grown, libraries have been put together. These bundles of JavaScript code allow Web developers to accomplish common tasks easily, like loading popups or error messages. jQuery is the most complex of these libraries, and probably the most common since its push by Google.
  • A combination of JavaScript and the HTML5 standard is commonly called just "HTML5". If you read about HTML5 in the news, what they're probably talking about is new JavaScript libraries/implementations. This JavaScript manipulates HTML and CSS styles inside Web browsers, using something called the Document Object Model (DOM).
  • Twitter's Bootstrap is an example of an HTML5 + CSS3 + JavaScript framework.

PHP

PHP is a server-side scripting language. In contrast to JavaScript, it executes on the Web server (the computer you're requesting a website from) rather than your local Web browser.

PHP Example

Although PHP is executed by a server before output is sent to the client Web browser, we typically include PHP inside HTML tags like this: <syntaxhighlight lang="php"> <!DOCTYPE html> <meta charset=utf-8> <title>PHP Test</title> <?php 

echo 'Hello World';

?> </syntaxhighlight> This would just look like: <syntaxhighlight lang="html4strict">Hello World</syntaxhighlight> ...to the end user, who would not see the PHP code, since it was executed before the page was "served" to the client's Web browser.

  • You may have seen language's like Microsoft's ASP or Macromedia/Adobe's ColdFusion Markup, which act the same way.
  • PHP is by far the most popular server-side scripting language on the Web. Although it has had many "growing pains" it is the engine behind all the websites we take for granted, including Wikipedia, Facebook, Google, and Yahoo.
  • PHP powers most Web Content Management Systems (CMS), such as Drupal, WordPress, MediaWiki, and Joomla.

Free Software on the Web

Perhaps the most important thing to understand about the modern Web is that it's powered by free/open-source software. This is not a coincidence. The creators of the World Wide Web were working on Unix-based, free software operating systems. Unix-based systems were good at time-sharing and networking, designed around this maxim:

  • Write programs that do one thing and do it well. Write programs to work together. Write programs to handle text streams, because that is a universal interface.

The Web is based upon these principles, and each webpage is available as text source (right-click or command-click > View Page Source or View Source). Because of this free environment of sharing, where source code is readily published and copied, the Web has grown into a powerful medium.

  • As Web developers, we're relying on the power of this medium to do our work and the least we can do is give back. It's foolish to attempt to hoard our code, or to pretend we're an original, independent "creator". Please give as much code as you can upstream, and don't rely upon silly hacks to keep your content safe from the commons.

LAMP Servers

LAMP Architecture

Apache is the most popular Web server, and relies upon the LAMP stack (typically Linux, Apache, MySQL, PHP). In this arrangement, PHP is doing the "heavy lifting", executing on the server-side, talking to the MySQL database, and giving the client HTML + CSS + JavaScript in return.

Typical LAMP Example

A typical LAMP-based interaction looks like this:

  1. Client (your computer) requests file from server via HTTP
  2. PHP executes code, grabs text content from MySQL database
  3. PHP inserts the content into an HTML + CSS "template", "theme", or "skin"
  4. The Web browser loads the HTML + CSS, and then executes any related JavaScript


When you're clicking "Save" in a CMS like WordPress, this is what you're doing!

Typical Static HTML Example

Contrast that to a non-LAMP interaction, when you view plain HTML in a browser:

  1. Client (your computer) requests file from server via HTTP
  2. The Web browser loads the HTML + CSS, and then executes any related JavaScript


As you can see, LAMP interactions are more complicated, but they allow for separation of the content into a MySQL database. In this way, a CMS like WordPress or MediaWiki can separate the actual content of a site from both its structure and its style.

More Info

For more information, please see our Developer Training, Software Recommendations, and WordPress Basics.

Retrieved from "https://anarchyinaction.org/index.php?title=Primer_for_Web_Developers&oldid=2683"