1. HTML basics and Web standards concepts

2. ‣ 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

3. What are open web standards?

4. ‣ 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?

5. ‣ 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?

6. ‣ 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

7. ‣ 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?

8. ‣ In real life standards are all around us. ‣ Traffic lights, common icons, screws, shoe sizes. ‣ They ensure things will just work. Standards?

9. ‣ 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

10. ‣ 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

11. ‣ 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

12. What is a web site made up of?

13. ‣ 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

14. ‣ 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

15. ‣ 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

16. ‣ FTP is a web standard: File Transfer Protocol ‣ An FTP program is used to upload your web files onto your hosting space FTP

17. ‣.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

18. ‣.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

19. ‣ 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

20. ‣ index.html ‣ other pages (sometimes in folders) ‣ styles folder ‣ scripts folder ‣ folders for assets — fonts, images, video, etc. Creating a site folder

21. ‣ index.html ‣ other pages (sometimes in folders) ‣ styles folder ‣ scripts folder ‣ folders for assets — fonts, images, video, etc. Creating a site folder

22. The anatomy of HTML

23. ‣ 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...

24. ‣ : 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. Link to Amazon http://www.amazon.co.uk

25. ‣ 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. http://www.amazon.co.uk Link to Amazon http://www.amazon.co.uk

26. ‣ 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: This isn’t ok either Some simple rules

27. ‣ Some elements don’t surround any content. For example: ‣ ‣ These are called “empty elements” or sometimes “self-closing elements” Not all elements have content!

28. ‣ Block level elements start on a new line and stretch across the browser window. Examples:, ‣ Inline elements don’t start on a new line, and only stretch as far as the content they encapsulate. Examples:, Block and inline elements

29. ‣ ‣ 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

30. ‣ 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

31. ‣ HTML 4.01 strict ‣ http://www.w3.org/TR/html4/strict.dtd ‣ XHTML 1.0 transitional ‣ 1- transitional.dtd"> DOCTYPES

32. ‣ 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

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

34. ‣ 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. The structure of an HTML document

35. HTML versus XHTML

36. ‣ 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

37. ‣...in principle because it has stricter rules than HTML, so enforced better quality markup. XHTML was a good idea...

38. ‣ self closing tags include trailing slash:. attribute values always quoted. attributes can't be minimized: checked="checked". code should all be lower case. XHTML:

39. ‣ 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. HTML:

40. ‣ 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

41. ‣ 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...

42. Deprecated elements

43. ‣...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...

44. ‣ These are no longer included in the HTML spec: ‣ for setting background colour. ‣ for setting fonts. ‣ for centering content. ‣ for striking through content. Deprecated examples

45. ‣...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...