2nd talk to CMG about the basics of HTML

1. HTML THE LEAST YOU SHOULD KNOW
HTML THE
LEAST YOU
SHOULD KNOW
1
1

2. HTML THE LEAST YOU SHOULD KNOW
HTML is a structured mark-up language
and the predominant mark-up language
for web pages
2
2

3. HTML THE LEAST YOU SHOULD KNOW
HTML is a structured mark-up language
and the predominant mark-up language
for web pages
2
2

4. HTML THE LEAST YOU SHOULD KNOW
HTML is a structured mark-up language
and the predominant mark-up language
for web pages
L
ca ll HTM
people
mon to see a ll HTM
L
t uncom ge, or c
It is no langua
mming .
a progra rogramming
ER
p
aut horing
HO W EV er call
ed
on has ev anythin
g
cificati ge, or
ML sp
e
ng langua
No HT rammi
a prog
HTML
t.
li ke tha
2
2

5. HTML THE LEAST YOU SHOULD KNOW
Basically its a text page marked up
with HTML elements
3
3

6. HTML THE LEAST YOU SHOULD KNOW
Basically its a text page marked up
with HTML elements
es
at describ
e ter m th
a loos
H TML is e b page
ent in f your w
A n elem piece o
nd ividual
each i
3
3

7. HTML THE LEAST YOU SHOULD KNOW
Basically its a text page marked up
with HTML elements
es
at describ
e ter m th
a loos
H TML is e b page
ent in f your w
A n elem piece o
nd ividual
each i
3
3

8. HTML THE LEAST YOU SHOULD KNOW
Basically its a text page marked up
with HTML elements
es
at describ
e ter m th
a loos
H TML is e b page
ent in f your w
A n elem piece o
nd ividual
each i
3
3

9. HTML THE LEAST YOU SHOULD KNOW
An HTML element consists of “tags”
surrounded by angle brackets
4
4

10. HTML THE LEAST YOU SHOULD KNOW
An HTML element consists of “tags”
surrounded by angle brackets
tag
4
4

11. HTML THE LEAST YOU SHOULD KNOW
There are two main kinds of HTML
elements
5
5

12. HTML THE LEAST YOU SHOULD KNOW
There are two main kinds of HTML
elements
1. The HTML container element
5
5

13. HTML THE LEAST YOU SHOULD KNOW
There are two main kinds of HTML
elements
1. The HTML container element
content
opening tag closing tag
5
5

14. HTML THE LEAST YOU SHOULD KNOW
There are two main kinds of HTML
elements
6
6

15. HTML THE LEAST YOU SHOULD KNOW
There are two main kinds of HTML
elements
2. The HTML empty element
6
6

16. HTML THE LEAST YOU SHOULD KNOW
There are two main kinds of HTML
elements
2. The HTML empty element
<br> HTML
6
6

17. HTML THE LEAST YOU SHOULD KNOW
There are two main kinds of HTML
elements
2. The HTML empty element
<br> HTML
<br /> XHTML
In XHTML 1.0 all elements must
be terminated even if their empty
6
6

18. HTML THE LEAST YOU SHOULD KNOW
There are many different types of tags
which can be added to elements to
structure your page
<h1> He ader tag </h1>
<p> Paragraph tag </p>
7
7

19. HTML THE LEAST YOU SHOULD KNOW
You can now use these tags to create a
HTML semantic structure* to your
Document
*Semantic structure means organisation that has meaning
8
8

20. HTML THE LEAST YOU SHOULD KNOW
You can now use these tags to create a
HTML semantic structure* to your
Document
<h1> Main Title </h1>
<h2> Sub head </h2>
<p> Paragraph text eum iriure
dolor in hendrerit in vulputate velit
esse molestie consequat </p>
*Semantic structure means organisation that has meaning
8
8

21. HTML THE LEAST YOU SHOULD KNOW
You can now use these tags to create a
HTML semantic structure* to your
Document
<h1> Main Title </h1>
<h2> Sub head </h2>
<p> Paragraph text eum iriure
dolor in hendrerit in vulputate velit
esse molestie consequat </p>
Google loves a well structured document
*Semantic structure means organisation that has meaning
8
8

22. HTML THE LEAST YOU SHOULD KNOW
HTML semantic structure is the best way
to ensure the greatest accessibility and
widespread availability of web content
Web accessibility refers to the practice of making
websites usable by people of all abilities and
disabilities.
http://en.wikipedia.org/wiki/Web_accessibility
(accessed 5th January 2010)
http://www.queensu.ca/www/wsaguide/writing/structure.html
(accessed 5th January 2010)
http://www.webaim.org/techniques/semanticstructure/
(accessed 5th January 2010)
9
9

23. HTML THE LEAST YOU SHOULD KNOW
Putting it all together
a well structured HTML document
10
10

24. HTML THE LEAST YOU SHOULD KNOW
Putting it all together
a well structured HTML document
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
</HEAD>
<BODY>
<h1> Main Title </h1>
<h2> Sub head </h2>
<p> Paragraph text eum iriure dolor in hendrerit in vulputate velit esse molestie consequat </p>
</BODY>
</HTML>
10
10

25. HTML THE LEAST YOU SHOULD KNOW
Putting it all together
a well structured HTML document
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
</HEAD>
<BODY>
<h1> Main Title </h1>
<h2> Sub head </h2>
<p> Paragraph text eum iriure dolor in hendrerit in vulputate velit esse molestie consequat </p>
</BODY>
</HTML>
10
10

26. HTML THE LEAST YOU SHOULD KNOW
A well structured HTML 4 document is
composed of three parts:
11
11

27. HTML THE LEAST YOU SHOULD KNOW
A well structured HTML 4 document is
composed of three parts:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
</HEAD>
<BODY>
<h1> Main Title </h1>
<h2> Sub head </h2>
<p> Paragraph text eum iriure dolor in hendrerit in vulputate velit esse molestie consequat </p>
</BODY>
</HTML>
11
11

28. HTML THE LEAST YOU SHOULD KNOW
A well structured HTML 4 document is
composed of three parts:
1. a line containing HTML
version information,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
(I’ll talk about DOCTYPE later)
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
</HEAD>
<BODY>
<h1> Main Title </h1>
<h2> Sub head </h2>
<p> Paragraph text eum iriure dolor in hendrerit in vulputate velit esse molestie consequat </p>
</BODY>
</HTML>
11
11

29. HTML THE LEAST YOU SHOULD KNOW
A well structured HTML 4 document is
composed of three parts:
1. a line containing HTML
version information,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
(I’ll talk about DOCTYPE later)
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD> 2. a declarative header section (delimited* by the HEAD element)
<TITLE>My first HTML document</TITLE>
</HEAD>
<BODY>
<h1> Main Title </h1>
<h2> Sub head </h2>
<p> Paragraph text eum iriure dolor in hendrerit in vulputate velit esse molestie consequat </p>
</BODY>
</HTML>
*A delimiter is a sequence of one or more characters used to specify the boundary between separate, independent regions
11
11

30. HTML THE LEAST YOU SHOULD KNOW
A well structured HTML 4 document is
composed of three parts:
1. a line containing HTML
version information,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
(I’ll talk about DOCTYPE later)
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD> 2. a declarative header section (delimited* by the HEAD element)
<TITLE>My first HTML document</TITLE>
</HEAD>
<BODY> 3. a body, which contains the
<h1> Main Title </h1> document's actual content.
<h2> Sub head </h2>
<p> Paragraph text eum iriure dolor in hendrerit in vulputate velit esse molestie consequat </p>
</BODY>
</HTML>
*A delimiter is a sequence of one or more characters used to specify the boundary between separate, independent regions
11
11

31. HTML THE LEAST YOU SHOULD KNOW
However our well structured HTML 4
document is a bit boring:
12
12

32. HTML THE LEAST YOU SHOULD KNOW
However our well structured HTML 4
document is a bit boring:
12
12

33. HTML THE LEAST YOU SHOULD KNOW
However our well structured HTML 4
document is a bit boring:
We need
graphics
12
12

34. HTML THE LEAST YOU SHOULD KNOW
However our well structured HTML 4
document is a bit boring:
We need
graphics
We need
interactivity
12
12

35. HTML THE LEAST YOU SHOULD KNOW
graphics = presentation
interactivity = behaviour
13
13

36. HTML THE LEAST YOU SHOULD KNOW
Presentation and behaviour are
separate functions
They are added to an HTML document using
stylesheets, graphics and scripts
14
14

37. HTML THE LEAST YOU SHOULD KNOW
Webpage
content
15
15

38. HTML THE LEAST YOU SHOULD KNOW
structure
HTML
Webpage
content
15
15

39. HTML THE LEAST YOU SHOULD KNOW
structure
HTML
CSS
presentation
Webpage
content
15
15

40. HTML THE LEAST YOU SHOULD KNOW
structure
HTML
CSS
presentation
Webpage
Scripts
behaviour
content
15
15

41. HTML THE LEAST YOU SHOULD KNOW
We have now achieved the
separation of style from content
Meaning our content can be available to
•PDAs
•Mobiles
•People of all abilities and disabilities.
•The future
16
16

42. HTML THE LEAST YOU SHOULD KNOW
Audience
participation
time
17
17

43. HTML THE LEAST YOU SHOULD KNOW
Fill in the blanks
HTML is a structured language
and the predominant language
for web pages
18
18

44. HTML THE LEAST YOU SHOULD KNOW
Fill in the blanks
HTML is a structured Mark-up language
and the predominant Mark-up language
for web pages
18
18

45. HTML THE LEAST YOU SHOULD KNOW
What are the 2 main reasons to
construct HTML documents using a
semantic structure?
19
19

46. HTML THE LEAST YOU SHOULD KNOW
What are the 2 main reasons to
construct HTML documents using a
semantic structure?
Web accessibility
19
19

47. HTML THE LEAST YOU SHOULD KNOW
What are the 2 main reasons to
construct HTML documents using a
semantic structure?
Web accessibility
Google and other
Search engines
love a well structured
document
19
19

48. HTML THE LEAST YOU SHOULD KNOW
Why separate structure, presentation
and behaviour in an HTML document?
20
20

49. HTML THE LEAST YOU SHOULD KNOW
Why separate structure, presentation
and behaviour in an HTML document?
•Redesign in hours instead of days or weeks
20
20

50. HTML THE LEAST YOU SHOULD KNOW
Why separate structure, presentation
and behaviour in an HTML document?
•Redesign in hours instead of days or weeks
•Set up your site to work as well five years from now as
it does today
20
20

51. HTML THE LEAST YOU SHOULD KNOW
Why separate structure, presentation
and behaviour in an HTML document?
•Redesign in hours instead of days or weeks
•Set up your site to work as well five years from now as
it does today
•Stay on the right side of accessibility laws and
guidelines
20
20

52. HTML THE LEAST YOU SHOULD KNOW
Why separate structure, presentation
and behaviour in an HTML document?
•Redesign in hours instead of days or weeks
•Set up your site to work as well five years from now as
it does today
•Stay on the right side of accessibility laws and
guidelines
•Support wireless and PDA users without the hassle and
expense of multiple versions
20
20

53. HTML THE LEAST YOU SHOULD KNOW
Why separate structure, presentation
and behaviour in an HTML document?
•Redesign in hours instead of days or weeks
•Set up your site to work as well five years from now as
it does today
•Stay on the right side of accessibility laws and
guidelines
•Support wireless and PDA users without the hassle and
expense of multiple versions
From Designing with Web Standards
by Jeffrey Zeldman
20
20