HTML basics and Web standards concepts

‣ 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

‣ 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

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

‣ : 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

‣ href=” : 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. ‣ : The attribute value. Link to Amazon

‣ 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

‣ Some elements don’t surround any content. For example: ‣ ‣ 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:, ‣ Inline elements don’t start on a new line, and only stretch as far as the content they encapsulate. Examples:, Block and inline elements

‣ ‣ 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 ‣ ‣ XHTML 1.0 transitional ‣ 1- transitional.dtd"> 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 DOCTYPES

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

‣ 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

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:. 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:. 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: ‣ for setting background colour. ‣ for setting fonts. ‣ for centering content. ‣ 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...