What are open web standards?

Technologies that form the web infrastructure (such as HTTP and TCP/IP), and technologies we can use to build web sites (HTML, CSS, JavaScript, PHP).

Are all web technologies open?

No. Open web technologies are developed in cooperation between lots of different companies, and curated by the W3C and other standards bodies.

They are free to use by anybody, and not controlled by any one company.

Technologies like Flash and Silverlight are developed by a single company.

Why is it good to have open standards?

Because we want the web to be open to be used by anybody, not only by those who have the right political influence, or money to buy expensive software.

Can you imagine it if, to develop a web page, you had to buy an expensive IDE? And if web technologies were controlled by a single company?

Standards?

Standard are all around us, from traffic lights to common icons on signs to clothing sizes to plugs and screws. They make our life easy because we know that, generally speaking, things will just work.

From standards to web standards

These technologies are standards because they are defined in big specification documents curated by standards bodies such as the [W3C], which define how they should work. These are usually used by web browser makers to work out how their browsers should interpret web technologies.

These days browsers interpret web technologies pretty evenly, so they really are standards. It was not always that way. We used to have the browser wars.

Browser wars

In the late nineties we had the browser wars. Netscape and IE were trying to gain web browser market share by implementing better, shinier features, often in incompatible ways.

This caused lots of pain for developers, and users. Web sites were either only compatible with one of the popular browsers, or they were forked horribly to provide a different version for each!

What is a web site made up of?

A web site is made up of many different files, placed on a web server, and linked with a domain name.

Domain names

A domain name is obtained from a domain registration company, like godaddy or 123-reg.

You find a domain name that isn't already owned by someone, and buy it.

[GO THROUGH OBTAINING A DOMAIN NAME WITH STUDENTS]

Hosting space

You need some hosting space on which to put your web files.

This is sometimes bought with the domain name, and sometimes separately.

The hosting space is connected to the domain name by giving the domain name the right nameservers.

FTP

The files that comprise a site are put on a web server, often by FTP.

FTP is a web standard too — File Transfer Protocol.

[AT THIS POINT, IDEALLY YOU WANT AN FTP LOCATION FOR STUDENTS TO LOG ON TO, SO THEY CAN SEE HOW TO LOG ON, HOW THE FILES ARE THERE ON FTP, HOW THE URL BRINGS UP THAT SITE]

Types of file on the web

Returning to our example site, we can see the following common file types:

HTML — contains the content of our pages.

CSS — contains styling information to define how the content should look.

PHP, .NET and other server-side languages - these files contain dynamic code that generates HTML/CSS/JS to display on the client, which varies depending on variables given to the code.

Images and video — media assets that are used as part of the content.

Non-web files — Word files, PDFs and other types of content that are not interpreted by the web browser instead, they are downloaded and then given to a native program to handle, should one exist.

Client versus server-side

HTML/CSS/JS is static — it is downloaded, then rendered by the browser. The source looks the same on the server as it does on the client.

Server-side code is executed on the server. It contains many variables filled in from a database or other data source, and generates different HTML/CSS/JS, depending on their values. It then sends the generated client-side code to the client to render.

[SHOW SIMPLE HTML AND PHP EXAMPLES — SOURCE CODE, AND CODE AT RUNTIME, SERVED THROUGH A MAMP INSTALL, PERHAPS?]

Creating a site folder

A simple site folder generally contains:

index.html

other pages (sometimes in other folders)

styles folder

scripts folder

folders for assets - fonts, images, videos, etc.

[GET STUDENTS TO CREATE A DIRECTORY FOR THEMSELVES, AND PROVIDE THEM WITH A SIMPLE HTML INDEX FILE IN PREPARATION FOR THE NEXT SECTION]

Some simple rules:

It is advised that you always put attribute values in quotes, even if you don't have to. It makes you code easier to read, for both humans and machines.

You should always close tags that you open. <p>This is a paragraph is not ok. It causes the browser to work harder and might lead to unexpected results when you start applying CSS and JavaScript to your content.

You should also nest tags correctly —<p><a>Content</a></p> is ok, but <p><a>Content</p></a> is not. Again, it can lead to unexpected results.

Not all elements have content!

Some elements don't surround and modify content. Some elements do something else, like pull an image onto the page, insert a line break, or apply a stylesheet to the page.

<img src="kittens.jpg">

These elements are called empty elements, or sometimes "self-closing" elements.

Block versus inline

[RETURN TO THE INDEX.HTML EXAMPLE FILE. SETTING A BORDER ON ALL ELEMENTS SO YOU CAN SEE WHAT SPACE THEY AL TAKE UP WOULD BE HELPFUL]

Looking at the example file, and the rendering in the browser, you can see that some elements start on a new line and stretch across the browse window, and some just take up as much space as the text they encapsulate.

The former — <p>, <div>, <ul>, etc. — are called block level elements.

Attributes in more detail

Note that you can have multiple attributes. they should all have a space between them, and the attribute name, equals sign, quotes and value shouldn't have any spaces in between.

THE STRUCTURE OF AN HTML PAGE

[GO BACK TO THE EXAMPLE PAGE AGAIN]

First you have the DOCTYPE, as explained earlier.

Then you have an <html> element that wraps all other content.

Then you have the <head> — this doesn't contain any of the content that is shown on the page. This is where you put meta data - data about your data. Here you include things like CSS and JavaScript you want to apply to your HTML, specifying keywords and a description about your content, etc.

Last, you have the <body>, which is where all the page content goes.

DOCTYPES

The thing at the top of the example file is a DOCTYPE. Historically, this is there to define the version of HTML the document is being written in. The idea was to validate the HTML against a defined ruleset.

But really all it ever did was put browsers into standards mode so they will render HTML properly. If a DOCTYPE is not included, browsers render HTML in "quirksmode", which assumes badly-formed markup and acts accordingly. This gives unexpected results, so is not good.

Because of this, you need a DOCTYPE, but the old DOCTYPES were so long and unwieldy. Therefore, HTML5 was rewritten to include the shortest DOCTYPE possible that will still put browsers in standards mode:

<!DOCTYPE html>

HTML versus XHTML

Way back when, we used to talk about which style of HTML you wrote, and whether you favoured HTML or XHTML:

HTML is a specialised markup (based on SGML) language designed for marking up documents.

XHTML is a reformulation of HTML, as an XML vocabulary.

Historically, XHTML got a lot of support because it has stricter rules than HTML. HTML allows all sorts of omissions, such as breaking the rules we mentioned above. XHTML on the other hand wouldn't allow such errors.

But this wasn't ultimately great. XHTML never caught on because:

Old versions of IE were buggy, and wouldn't serve it properly

Proper XHTML completely refuses to display if it even contains a single small error, which is not necessarily good for the web.

The last version of XHTML, 2.0, was not backwards compatible with the existing web.

In reality, professional developers tend to write their HTML as a mixture of HTML and XML rules. HTML5 allows you to use whichever style you like.

Deprecated elements

Back in the old days, before CSS was popular, we used to use HTML to do all of our styling/layout. Some elements were just abused to do this (for example, HTML tables were used for layout, which is just wrong and evil), and a lot of presentational elements were used, which have since been deprecated (removed from the spec). For example:

<bgcolor> for setting background colour.

<font> for setting fonts.

<center> for centering content.

<strike> for striking through text.

Note: some deprecated elements have been brought back into HTML5, and repurposed. For example:

<small> is now specifically for fine print, not just to make text small.

<b> is now for drawing attention to text with no stylistic differences, not just bold text.