HTML basics and Web standards concepts
Friday, 27 April 2012 What we’ll cover
‣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
Friday, 27 April 2012 What are open web standards?
Friday, 27 April 2012 What are open web technologies?
‣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.)
Friday, 27 April 2012 Are all technologies open?
‣No. ‣Some technologies are closed/proprietary. ‣They are created by only one company. ‣And/or they are not interoperable with other open technologies.
Friday, 27 April 2012 Open technologies
‣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.
Friday, 27 April 2012 Why are open technologies good?
‣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.
Friday, 27 April 2012 Standards?
‣In real life standards are all around us. ‣Traffic lights, common icons, screws, shoe sizes. ‣They ensure things will just work.
Friday, 27 April 2012 From standards to web 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.
Friday, 27 April 2012 The browser wars
‣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.
Friday, 27 April 2012 The browser wars
‣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.
Friday, 27 April 2012 What is a web site made up of?
Friday, 27 April 2012 A web site is made by
‣Choosing a domain name and linking it to that web server. ‣Putting several different files together. ‣Uploading them to a web server using FTP.
Friday, 27 April 2012 Choosing a domain name
‣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
Friday, 27 April 2012 Getting hosting space
‣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
Friday, 27 April 2012 FTP
‣FTP is a web standard: File Transfer Protocol ‣An FTP program is used to upload your web files onto your hosting space
Friday, 27 April 2012 Types of file on the Web
‣.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
Friday, 27 April 2012 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
Friday, 27 April 2012 Client-side vs server-side
‣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.
Friday, 27 April 2012 Creating a site folder
‣index.html ‣other pages (sometimes in folders) ‣styles folder ‣scripts folder ‣folders for assets — fonts, images, video, etc.
Friday, 27 April 2012 Creating a site folder
‣index.html ‣other pages (sometimes in folders) ‣styles folder ‣scripts folder ‣folders for assets — fonts, images, video, etc.
Friday, 27 April 2012 The anatomy of HTML
Friday, 27 April 2012 HTML is...
‣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.
Friday, 27 April 2012 Link to Amazon
‣ : The opening tag of the element.
‣ : The closing tag of the element.
‣ Link to Amazon: The content of the element. We’re wrapping them in tags to make a link.
Friday, 27 April 2012 Link to Amazon
‣ 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.
Friday, 27 April 2012 Some simple rules
‣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:
Friday, 27 April 2012 Not all elements have content!
‣Some elements don’t surround any content. For example: ‣ 
‣These are called “empty elements” or sometimes “self-closing elements”
Friday, 27 April 2012 Block and inline elements
‣Block level elements start on a new line and stretch across the browser window. Examples:
,
Friday, 27 April 2012 More complex attribute example
‣ ‣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.
Friday, 27 April 2012 DOCTYPES
‣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
Friday, 27 April 2012 DOCTYPES
‣HTML 4.01 strict ‣ ‣XHTML 1.0 transitional ‣
Friday, 27 April 2012 DOCTYPES
‣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
Friday, 27 April 2012 DOCTYPES
‣HTML5 was therefore rewritten to include the shortest DOCTYPE possible that would put browsers into standards mode. ‣
Friday, 27 April 2012 The structure of an HTML document ‣First you have the DOCTYPE. ‣Then you have the element, which wraps all other content. ‣Then you have the
, which contains all the page’s meta data, data about the page, such as linked stylesheets and keywords. ‣Then you have the , which is where all the page content goes.Friday, 27 April 2012 HTML versus XHTML
Friday, 27 April 2012 HTML vs 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
Friday, 27 April 2012 XHTML was a good idea...
‣...in principle because it has stricter rules than HTML, so enforced better quality markup.
Friday, 27 April 2012 XHTML:
‣self closing tags include trailing slash: 
. ‣ attribute values always quoted. ‣ attributes can't be minimized: checked="checked". ‣ code should all be lower case.
Friday, 27 April 2012 HTML:
‣self closing tags needn’t include trailing slash: . ‣ attribute values don’t always have to be quoted. ‣ attributes can be minimized: checked. ‣ code can be upper or lower case.
Friday, 27 April 2012 But XHTML never caught on
‣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.
Friday, 27 April 2012 In reality...
‣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.
Friday, 27 April 2012 Deprecated elements
Friday, 27 April 2012 Back in the old days...
‣...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
Friday, 27 April 2012 Deprecated examples
‣These are no longer included in the HTML spec: ‣
‣ for setting fonts.
‣
‣ for striking through content.
Friday, 27 April 2012 HTML5 has repurposed...
‣...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.
Friday, 27 April 2012