html least

HTML THE LEAST YOU SHOULD KNOW

HTML THE LEAST YOU

SHOULD KNOW

11


HTML is a structured mark-up language and the predominant mark-up language for web pages

22


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


Basically its a text page marked up with HTML elements

33


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


An HTML element consists of “tags” surrounded by angle brackets

44


An HTML element consists of “tags” surrounded by angle brackets

tag

44


There are two main kinds of HTML elements

55



1. The HTML container element

55



1. The HTML container element

closing tagopening tag

content

55



66


2. The HTML empty element


66




HTML <br>

66




HTML <br>

XHTMLIn XHTML 1.0 all elements mustbe terminated even if their empty

<br />

66


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


You can now use these tags to create a HTML semantic structure* to your Document

*Semantic structure means organisation that has meaning

88



<h1> Main Title </h1><h2> Sub head </h2><p> Paragraph text eum iriure dolor in hendrerit in vulputate velit esse molestie consequat </p>


88



<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


88


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

http://www.4serendipity.com/accessibility/struct/

http://www.4serendipity.com/accessibility/struct/

http://www.queensu.ca/www/wsaguide/writing/structure.html

http://www.queensu.ca/www/wsaguide/writing/structure.html

http://www.webaim.org/techniques/semanticstructure/





Putting it all together a well structured HTML document

1010


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

http://www.w3.org/TR/html4/strict.dtd



A well structured HTML 4 document is composed of three parts:

1111




1111






1. a line containing HTML version information,(I’ll talk about DOCTYPE later)

1111







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







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




However our well structured HTML 4 document is a bit boring:

1212



We need graphics

1212



We need graphics

We need interactivity

1212


graphics = presentation

interactivity = behaviour

1313


Presentation and behaviour are separate functions

They are added to an HTML document using stylesheets, graphics and scripts

1414


content

Webpage

1515


content

structure

HTML

Webpage

1515


content

structure

HTML

Webpage

presentation

CSS

1515


content

structure

HTML

Webpage

presentation

CSS

behaviour

Scripts

1515


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


Audience participation

time

1717


HTML is a structured language and the predominant language for web pages

Fill in the blanks

1818


HTML is a structured language and the predominant language for web pages

Fill in the blanks

Mark-upMark-up

1818


What are the 2 main reasons to construct HTML documents using a semantic structure?

1919



Web accessibility

1919



Web accessibility

Google and other Search engines

love a well structured document

1919


20

Why separate structure, presentation and behaviour in an HTML document?

20


20


•Redesign in hours instead of days or weeks

20


20


•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



it does today •Stay on the right side of accessibility laws and

guidelines

20


20




guidelines•Support wireless and PDA users without the hassle and

expense of multiple versions

20


20




guidelines•Support wireless and PDA users without the hassle and

expense of multiple versions

From Designing with Web Standardsby Jeffrey Zeldman

20

html least

Design

html semantic structure

structured html document10

element html xhtml

knowan html element

html version information

html container element55

html container element

structured document