Download - Html Least
![Page 1: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/1.jpg)
HTML THE LEAST YOU SHOULD KNOW
HTML THE LEAST YOU
SHOULD KNOW
11
![Page 2: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/2.jpg)
HTML THE LEAST YOU SHOULD KNOW
HTML is a structured mark-up language and the predominant mark-up language for web pages
22
![Page 3: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/3.jpg)
HTML THE LEAST YOU SHOULD KNOW
HTML is a structured mark-up language and the predominant mark-up language for web pages
22
![Page 4: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/4.jpg)
HTML THE LEAST YOU SHOULD KNOW
HTML is a structured mark-up language and the predominant mark-up language for web pages
It is not uncommon to see people call HTML
a programming language, or call HTML
authoring programming.
HOWEVER
No HTML specification has ever called
HTML a programming language, or anything
like that.
22
![Page 5: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/5.jpg)
HTML THE LEAST YOU SHOULD KNOW
Basically its a text page marked up with HTML elements
33
![Page 6: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/6.jpg)
HTML THE LEAST YOU SHOULD KNOW
Basically its a text page marked up with HTML elements
An element in HTML is a loose term that describes
each individual piece of your web page
33
![Page 7: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/7.jpg)
HTML THE LEAST YOU SHOULD KNOW
Basically its a text page marked up with HTML elements
An element in HTML is a loose term that describes
each individual piece of your web page
33
![Page 8: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/8.jpg)
HTML THE LEAST YOU SHOULD KNOW
Basically its a text page marked up with HTML elements
An element in HTML is a loose term that describes
each individual piece of your web page
33
![Page 9: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/9.jpg)
HTML THE LEAST YOU SHOULD KNOW
An HTML element consists of “tags” surrounded by angle brackets
44
![Page 10: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/10.jpg)
HTML THE LEAST YOU SHOULD KNOW
An HTML element consists of “tags” surrounded by angle brackets
tag
44
![Page 11: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/11.jpg)
HTML THE LEAST YOU SHOULD KNOW
There are two main kinds of HTML elements
55
![Page 12: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/12.jpg)
HTML THE LEAST YOU SHOULD KNOW
There are two main kinds of HTML elements
1. The HTML container element
55
![Page 13: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/13.jpg)
HTML THE LEAST YOU SHOULD KNOW
There are two main kinds of HTML elements
1. The HTML container element
closing tagopening tag
content
55
![Page 14: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/14.jpg)
HTML THE LEAST YOU SHOULD KNOW
There are two main kinds of HTML elements
66
![Page 15: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/15.jpg)
HTML THE LEAST YOU SHOULD KNOW
2. The HTML empty element
There are two main kinds of HTML elements
66
![Page 16: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/16.jpg)
HTML THE LEAST YOU SHOULD KNOW
2. The HTML empty element
There are two main kinds of HTML elements
HTML <br>
66
![Page 17: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/17.jpg)
HTML THE LEAST YOU SHOULD KNOW
2. The HTML empty element
There are two main kinds of HTML elements
HTML <br>
XHTMLIn XHTML 1.0 all elements mustbe terminated even if their empty
<br />
66
![Page 18: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/18.jpg)
HTML THE LEAST YOU SHOULD KNOW
There are many different types of tags which can be added to elements to structure your page
<h1> Header tag </h1>
<p> Paragraph tag </p>
77
![Page 19: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/19.jpg)
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
88
![Page 20: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/20.jpg)
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
88
![Page 21: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/21.jpg)
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
88
![Page 22: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/22.jpg)
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)
99
![Page 23: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/23.jpg)
HTML THE LEAST YOU SHOULD KNOW
Putting it all together a well structured HTML document
1010
![Page 24: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/24.jpg)
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>
1010
![Page 25: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/25.jpg)
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>
1010
![Page 26: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/26.jpg)
HTML THE LEAST YOU SHOULD KNOW
A well structured HTML 4 document is composed of three parts:
1111
![Page 27: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/27.jpg)
HTML THE LEAST YOU SHOULD KNOW
<!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>
A well structured HTML 4 document is composed of three parts:
1111
![Page 28: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/28.jpg)
HTML THE LEAST YOU SHOULD KNOW
<!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>
A well structured HTML 4 document is composed of three parts:
1. a line containing HTML version information,(I’ll talk about DOCTYPE later)
1111
![Page 29: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/29.jpg)
HTML THE LEAST YOU SHOULD KNOW
<!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>
A well structured HTML 4 document is composed of three parts:
1. a line containing HTML version information,(I’ll talk about DOCTYPE later)
2. a declarative header section (delimited* by the HEAD element)
*A delimiter is a sequence of one or more characters used to specify the boundary between separate, independent regions
1111
![Page 30: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/30.jpg)
HTML THE LEAST YOU SHOULD KNOW
<!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>
A well structured HTML 4 document is composed of three parts:
1. a line containing HTML version information,(I’ll talk about DOCTYPE later)
3. a body, which contains the document's actual content.
2. a declarative header section (delimited* by the HEAD element)
*A delimiter is a sequence of one or more characters used to specify the boundary between separate, independent regions
1111
![Page 31: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/31.jpg)
HTML THE LEAST YOU SHOULD KNOW
However our well structured HTML 4 document is a bit boring:
1212
![Page 32: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/32.jpg)
HTML THE LEAST YOU SHOULD KNOW
However our well structured HTML 4 document is a bit boring:
1212
![Page 33: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/33.jpg)
HTML THE LEAST YOU SHOULD KNOW
However our well structured HTML 4 document is a bit boring:
We need graphics
1212
![Page 34: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/34.jpg)
HTML THE LEAST YOU SHOULD KNOW
However our well structured HTML 4 document is a bit boring:
We need graphics
We need interactivity
1212
![Page 35: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/35.jpg)
HTML THE LEAST YOU SHOULD KNOW
graphics = presentation
interactivity = behaviour
1313
![Page 36: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/36.jpg)
HTML THE LEAST YOU SHOULD KNOW
Presentation and behaviour are separate functions
They are added to an HTML document using stylesheets, graphics and scripts
1414
![Page 37: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/37.jpg)
HTML THE LEAST YOU SHOULD KNOW
content
Webpage
1515
![Page 38: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/38.jpg)
HTML THE LEAST YOU SHOULD KNOW
content
structure
HTML
Webpage
1515
![Page 39: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/39.jpg)
HTML THE LEAST YOU SHOULD KNOW
content
structure
HTML
Webpage
presentation
CSS
1515
![Page 40: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/40.jpg)
HTML THE LEAST YOU SHOULD KNOW
content
structure
HTML
Webpage
presentation
CSS
behaviour
Scripts
1515
![Page 41: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/41.jpg)
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
1616
![Page 42: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/42.jpg)
HTML THE LEAST YOU SHOULD KNOW
Audience participation
time
1717
![Page 43: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/43.jpg)
HTML THE LEAST YOU SHOULD KNOW
HTML is a structured language and the predominant language for web pages
Fill in the blanks
1818
![Page 44: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/44.jpg)
HTML THE LEAST YOU SHOULD KNOW
HTML is a structured language and the predominant language for web pages
Fill in the blanks
Mark-upMark-up
1818
![Page 45: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/45.jpg)
HTML THE LEAST YOU SHOULD KNOW
What are the 2 main reasons to construct HTML documents using a semantic structure?
1919
![Page 46: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/46.jpg)
HTML THE LEAST YOU SHOULD KNOW
What are the 2 main reasons to construct HTML documents using a semantic structure?
Web accessibility
1919
![Page 47: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/47.jpg)
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
1919
![Page 48: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/48.jpg)
HTML THE LEAST YOU SHOULD KNOW
20
Why separate structure, presentation and behaviour in an HTML document?
20
![Page 49: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/49.jpg)
HTML THE LEAST YOU SHOULD KNOW
20
Why separate structure, presentation and behaviour in an HTML document?
•Redesign in hours instead of days or weeks
20
![Page 50: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/50.jpg)
HTML THE LEAST YOU SHOULD KNOW
20
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
![Page 51: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/51.jpg)
HTML THE LEAST YOU SHOULD KNOW
20
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
![Page 52: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/52.jpg)
HTML THE LEAST YOU SHOULD KNOW
20
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
![Page 53: Html Least](https://reader034.vdocuments.site/reader034/viewer/2022052307/558e1c521a28abbd5b8b46e4/html5/thumbnails/53.jpg)
HTML THE LEAST YOU SHOULD KNOW
20
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 Standardsby Jeffrey Zeldman
20