Html Least

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML THE LEAST YOU SHOULD KNOW Webpage content 15 15

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

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

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

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

HTML THE LEAST YOU SHOULD KNOW Audience participation time 17 17

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

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

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

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

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

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

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

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 ﬁve years from now as it does today 20 20

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 ﬁve years from now as it does today •Stay on the right side of accessibility laws and guidelines 20 20

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 ﬁve 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

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 ﬁve 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

Html Least

by Ian Ecclestone on Jan 14, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 5

Statistics

Html Least — Presentation Transcript

http://posterous.com	3
http://chrisrutz.de	2