HTML basics and Web standards concepts 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 What are open web standards? 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.) 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. 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. 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. Standards? ‣ In real life standards are all around us. ‣ Traffic lights, common icons, screws, shoe sizes. ‣ They ensure things will just work. 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. 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 ‣ 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. What is a web site made up of? 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. 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 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 FTP ‣ FTP is a web standard: File Transfer Protocol ‣ An FTP program is used to upload your web files onto your hosting space 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 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 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. 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 ‣ index.html ‣ other pages (sometimes in folders) ‣ styles folder ‣ scripts folder ‣ folders for assets — fonts, images, video, etc. The anatomy of HTML 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. <a href=”http://www.amazon.co.uk”>Link to Amazon</a> ‣ <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> ‣ 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. 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: <p>This paragraph is not ok. ‣ Always nest elements correctly: <p><a>This isn’t ok either</p></a> Not all elements have content! ‣ Some elements don’t surround any content. For example: ‣ <img src=”kittens.jpg”> ‣ These are called “empty elements” or sometimes “self-closing elements” Block and inline elements ‣ Block level elements start on a new line and stretch across the browser window. Examples: <p>, <div> ‣ Inline elements don’t start on a new line, and only stretch as far as the content they encapsulate. Examples: <em>, <span> More complex attribute example ‣ <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. 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 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/xhtml1transitional.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. ‣ <!doctype html> The structure of an HTML document ‣ 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. HTML versus XHTML 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 XHTML was a good idea... ‣ ...in principle because it has stricter rules than HTML, so enforced better quality markup. XHTML: ‣ 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. HTML: ‣ 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. 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. 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. Deprecated elements Back in the old days... ‣ ...before CSS was popular and wellsupported, 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 Deprecated examples ‣ These are no longer included in the HTML spec: ‣ <bgcolor> for setting background colour. ‣ <font> for setting fonts. ‣ <center> for centering content. ‣ <strike> for striking through content. HTML5 has repurposed... ‣ ...some old deprecated elements to give them new semantic meaning. ‣ <small> is now for small/fine print, not just to make text small. ‣ <b> is for drawing attention to text without giving it extra meaning, not just for bolding text.
