html basics and web standards concepts€¦ · html basics and web standards concepts friday, 27...

HTML basics andWeb standards concepts

Friday, 27 April 2012

‣What are web standards?

‣Why do we use them?

‣What is HTML and how does it work?

‣Anatomy of a web page

‣The different HTML versions

What we’ll cover


What are open web standards?


‣Technologies that the web is built on:

‣Web infrastructure technologies (HTTP, TCP/IP, etc.)

‣Technologies we build web sites with (HTML, CSS, JavaScript, SVG, etc.)

What are open web technologies?


‣No.

‣Some technologies are closed/proprietary.

‣They are created by only one company.

‣And/or they are not interoperable with other open technologies.

Are all technologies open?


‣Are developed in cooperation by multiple companies.

‣With standards bodies (Like W3C) curating them.

‣They are interoperable with each other.

‣They are not dependant on patents, and free to use by anyone.

Open technologies


‣The web should be open to anyone to use and develop.

‣Not only those with the right political influence.

‣Or those who can afford expensive software.

Why are open technologies good?


‣In real life standards are all around us.

‣Traffic lights, common icons, screws, shoe sizes.

‣They ensure things will just work.

Standards?


‣Web standards do the same thing for the Web.

‣They are defined in big specification documents.

‣Browser vendors are encouraged to implement them equally.

‣So the same code will work across browsers.

‣Today this is mostly the case. In the old days we used to have the browser wars.

From standards to web standards


‣The late 90s and early 00s were dark times.

‣Netscape and IE fought to win market share by implementing features in incompatible ways.

‣Terrible for both developers and users.

The browser wars


What is a web site made up of?


‣Choosing a domain name and linking it to that web server.

‣Putting several different files together.

‣Uploading them to a web server using FTP.

A web site is made by


‣You buy one from a domain registration company, like GoDaddy or 123-Reg

‣You find

‣Choosing a domain name and linking it to that web server

Choosing a domain name


‣Hosting space is bought form a hosting company, like Rackspace or Media Temple

‣It sometimes comes with the domain name

‣Connect the hosting space to the domain name via nameservers

Getting hosting space


‣FTP is a web standard: File Transfer Protocol

‣An FTP program is used to upload your web files onto your hosting space

FTP


‣.html: Contains the content of our pages and defines its structure and purpose

‣.css: Contains styling information to define how the content should look

‣.js: Applies dynamic interactive behaviour to the content

Types of file on the Web


‣.php, .net: server-side languages — these contain dynamic code that generates different client-side content depending on variables

‣Images and video — media files that are used as part of the content

‣Non-web files: .doc, .pdf and other non-web content that aren’t interpreted by the web browser

Types of file on the Web


‣Also known as static vs dynamic.

‣HTML/CSS/JS are static — they’re downloaded as is, then rendered by the browser and displayed.

‣PHP etc. are dynamic — they are rendered on the server, generating different client-side depending on what variables are fed to them.

Client-side vs server-side


‣index.html

‣other pages (sometimes in folders)

‣styles folder

‣scripts folder

‣folders for assets — fonts, images, video, etc.

Creating a site folder


The anatomy of HTML


‣What we structure our content in.

‣It’s a tag-based language.

‣You wrap your content in tags to give it meaning and structure.

‣Let’s have a look.

HTML is...


‣ <a href=”http://www.amazon.co.uk”>: The opening tag of the element.

‣ </a>: The closing tag of the element.‣ Link to Amazon: The content of the element. We’re

wrapping them in tags to make a link.

<a href=”http://www.amazon.co.uk”>Link to Amazon</a>


http://www.amazon.co.uk

‣ href=”http://www.amazon.co.uk”: An attribute —attributes modify element behaviour. In this case, it defines that the link is going to point to amazon.co.uk

‣ href: The attribute name.‣ http://www.amazon.co.uk: The attribute value.

<a href=”http://www.amazon.co.uk”>Link to Amazon</a>

‣Always put attribute values in quotes, even though you don’t really have to. Makes it easier to read.

‣Always close elements that you open:This paragraph is not ok.

‣Always nest elements correctly:<a>This isn’t ok either</a>

Some simple rules

‣Some elements don’t surround any content. For example:

‣ <img src=”kittens.jpg”>

‣These are called “empty elements” or sometimes “self-closing elements”

Not all elements have content!

‣Block level elements start on a new line and stretch across the browser window. Examples: , <div>

‣Inline elements don’t start on a new line, and only stretch as far as the content they encapsulate. Examples: , 

Block and inline elements

‣ <img src=”kittens.jpg” alt=”a beautiful black kitten” class=”animal masthead”>

‣Note you can have multiple attributes.

‣They should all have a space between them.

‣The attribute name, equals sign, quotes and value shouldn’t have any spaces between them.

More complex attribute example

‣historically these defined the version of HTML the document is written in so it can be validated against a specific ruleset

‣Let’s look at some examples

DOCTYPES


‣HTML 4.01 strict‣ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

‣XHTML 1.0 transitional‣ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DOCTYPES


http://www.w3.org/TR/html4/strict.dtd

http://www.w3.org/TR/html4/strict.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

‣But all they ever did was put browsers in “standards mode” versus “quirks mode”

‣Because of this, you still need to include a doctype.

‣But they were so long and unwieldy

DOCTYPES


‣HTML5 was therefore rewritten to include the shortest DOCTYPE possible that would put browsers into standards mode.

‣ <!doctype html>

DOCTYPES

‣First you have the DOCTYPE.

‣Then you have the <html> element, which wraps all other content.

‣Then you have the <head>, which contains all the page’s meta data, data about the page, such as linked stylesheets and keywords.

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

The structure of an HTML document

HTML versus XHTML


‣Developers used to talk about whether they preferred XHTML or HTML.

‣HTML is a specialised markup language designed for marking up documents.

‣XHTML is a reformulation of HTML as an XML vocabulary

HTML vs XHTML


‣...in principle because it has stricter rules than HTML, so enforced better quality markup.

XHTML was a good idea...


‣self closing tags include trailing slash: <img src="kittens.jpg" />.

‣ attribute values always quoted.

‣ attributes can't be minimized: checked="checked".

‣ code should all be lower case.

XHTML:

‣self closing tags needn’t include trailing slash: <img src="kittens.jpg">.

‣ attribute values don’t always have to be quoted.

‣ attributes can be minimized: checked.

‣ code can be upper or lower case.

HTML:

‣Old versions of IE wouldn’t serve it properly.

‣Proper XHTML refuses to display at all if it contains ANY errors: not great for the Web.

‣XHTML 2.0 was not compatible with the existing Web.

But XHTML never caught on


‣Professional developers use a variety of different styles.

‣Most use a mixture of HTML and XHTML rules.

‣HTML5 doesn’t care whether you use XHTML or HTML rules.

In reality...


Deprecated elements


‣...before CSS was popular and well-supported, we used to use HTML to do all our styling and layout.

‣Some elements were abused (e.g. tables for layout)

‣Some elements were presentational

Back in the old days...


‣These are no longer included in the HTML spec:‣ <bgcolor> for setting background colour.‣ for setting fonts.‣ <center> for centering content.‣ <strike> for striking through content.

Deprecated examples

‣...some old deprecated elements to give them new semantic meaning.

‣ is now for small/fine print, not just to make text small.

‣ is for drawing attention to text without giving it extra meaning, not just for bolding text.

HTML5 has repurposed...

html basics and web standards concepts€¦ · html basics and web standards concepts friday, 27...

Documents