Uploaded by Saad Benselilih

HTML-basics-and-web-standards-concepts

advertisement
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.
Download