html least
Post on 27-Jun-2015
661 Views
Preview:
DESCRIPTION
TRANSCRIPT
HTML THE LEAST YOU SHOULD KNOW
HTML THE LEAST YOU
SHOULD KNOW
11
HTML THE LEAST YOU SHOULD KNOW
HTML is a structured mark-up language and the predominant mark-up language for web pages
22
HTML THE LEAST YOU SHOULD KNOW
HTML is a structured mark-up language and the predominant mark-up language for web pages
22
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
HTML THE LEAST YOU SHOULD KNOW
Basically its a text page marked up with HTML elements
33
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
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
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
HTML THE LEAST YOU SHOULD KNOW
An HTML element consists of “tags” surrounded by angle brackets
44
HTML THE LEAST YOU SHOULD KNOW
An HTML element consists of “tags” surrounded by angle brackets
tag
44
HTML THE LEAST YOU SHOULD KNOW
There are two main kinds of HTML elements
55
HTML THE LEAST YOU SHOULD KNOW
There are two main kinds of HTML elements
1. The HTML container element
55
HTML THE LEAST YOU SHOULD KNOW
There are two main kinds of HTML elements
1. The HTML container element
closing tagopening tag
content
55
HTML THE LEAST YOU SHOULD KNOW
There are two main kinds of HTML elements
66
HTML THE LEAST YOU SHOULD KNOW
2. The HTML empty element
There are two main kinds of HTML elements
66
HTML THE LEAST YOU SHOULD KNOW
2. The HTML empty element
There are two main kinds of HTML elements
HTML <br>
66
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
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
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
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
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
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
HTML THE LEAST YOU SHOULD KNOW
Putting it all together a well structured HTML document
1010
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
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
HTML THE LEAST YOU SHOULD KNOW
A well structured HTML 4 document is composed of three parts:
1111
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
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
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
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
HTML THE LEAST YOU SHOULD KNOW
However our well structured HTML 4 document is a bit boring:
1212
HTML THE LEAST YOU SHOULD KNOW
However our well structured HTML 4 document is a bit boring:
1212
HTML THE LEAST YOU SHOULD KNOW
However our well structured HTML 4 document is a bit boring:
We need graphics
1212
HTML THE LEAST YOU SHOULD KNOW
However our well structured HTML 4 document is a bit boring:
We need graphics
We need interactivity
1212
HTML THE LEAST YOU SHOULD KNOW
graphics = presentation
interactivity = behaviour
1313
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
HTML THE LEAST YOU SHOULD KNOW
content
Webpage
1515
HTML THE LEAST YOU SHOULD KNOW
content
structure
HTML
Webpage
1515
HTML THE LEAST YOU SHOULD KNOW
content
structure
HTML
Webpage
presentation
CSS
1515
HTML THE LEAST YOU SHOULD KNOW
content
structure
HTML
Webpage
presentation
CSS
behaviour
Scripts
1515
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
HTML THE LEAST YOU SHOULD KNOW
Audience participation
time
1717
HTML THE LEAST YOU SHOULD KNOW
HTML is a structured language and the predominant language for web pages
Fill in the blanks
1818
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
HTML THE LEAST YOU SHOULD KNOW
What are the 2 main reasons to construct HTML documents using a semantic structure?
1919
HTML THE LEAST YOU SHOULD KNOW
What are the 2 main reasons to construct HTML documents using a semantic structure?
Web accessibility
1919
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
HTML THE LEAST YOU SHOULD KNOW
20
Why separate structure, presentation and behaviour in an HTML document?
20
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
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
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
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
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
top related