O documento discute as camadas da web, especificamente HTML, CSS e JavaScript. Explica que HTML é usado para estruturar e apresentar conteúdo, CSS é usado para estilizar a apresentação e JavaScript é usado para adicionar comportamentos dinâmicos.

1. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
Camadas Web
Java Script: adiciona comportamento dinâmico na página
para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será
exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular
arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
Camadas Web
Java Script: adiciona comportamento dinâmico na página
para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será
exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular
arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

2. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
HTML 5 : The Revolution
Camadas Web
Java Script: adiciona comportamento dinâmico na página
para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será
exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular
arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
HTML 5 : The Revolution
Camadas Web
Java Script: adiciona comportamento dinâmico na página
para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será
exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular
arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

3. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
Camadas Web
Java Script: adiciona comportamento dinâmico na página
para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será
exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular
arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebHTML 5
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
Camadas Web
Java Script: adiciona comportamento dinâmico na página
para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será
exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular
arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebHTML 5
Desenvolvimento Web
David Arty

4. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 Diferenças
A maior diferença no HTML5 para as antigas versões é a ausência da referência de um DTD
(Document Type Definition), assim o início de um HTML que antes era assim:
Para documentos tipo Strict:
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”
Para documentos tipo Transitional:
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”
Para documentos tipo Frameset:
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset/
Antiga estrutura:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 Diferenças
A maior diferença no HTML5 para as antigas versões é a ausência da referência de um DTD
(Document Type Definition), assim o início de um HTML que antes era assim:
Para documentos tipo Strict:
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”
Para documentos tipo Transitional:
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”
Para documentos tipo Frameset:
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset/
Antiga estrutura:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

5. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 Diferenças
A nova versão ficou bem mais fácil:
!DOCTYPE html
Nova estrutura:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 Diferenças
A nova versão ficou bem mais fácil:
!DOCTYPE html
Nova estrutura:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

6. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 Diferenças
Enctype (CHARSET)
meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” /
Antiga estrutura:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 Diferenças
Enctype (CHARSET)
meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” /
Antiga estrutura:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

7. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 Diferenças
A nova versão:
meta charset=”utf-8”
Nova estrutura:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 Diferenças
A nova versão:
meta charset=”utf-8”
Nova estrutura:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

8. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 Diferenças
Sem semântica:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 Diferenças
Sem semântica:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
div id=”header”/div
div id=”navmenu”/div
div id=”content”/div
div id=”container”/div
div id=”aside”
/div
div id=”footer”/div
OOCSSOOCSS

9. header/header
nav/nav
article/article
section/section
aside/aside
footer/footer
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 Diferenças
Com semântica:
header/header
nav/nav
article/article
section/section
aside/aside
footer/footer
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 Diferenças
Com semântica:

10. Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
input type=”number” step=”1” min=”-10” max=”10”
input name=tel type=tel/
Input de número
Input de Telefone
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
input type=”number” step=”1” min=”-10” max=”10”
input name=tel type=tel/
Input de número
Input de Telefone

11. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
input name=slider type=range min=2 max=30 step=2 /
Input de slider
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
input name=url type=url /
Input de URL
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
input name=slider type=range min=2 max=30 step=2 /
Input de slider
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

12. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
input type=”email”/
Input de e-mail
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
input type=”date” value=”2013-08-11” max=”2013-12-31”/
Input de caléndario
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
input type=”email”/
Input de e-mail
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

13. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
form action=”#”
input type=”text” required=”required”/
input type=”submit”/
form/
Input com requerimento
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
form action=”#”
input type=”text” required=”required”/
input type=”submit”/
form/
Input com requerimento
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

14. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
audio controls
source src=”media/audio01.mp3 type=”audio/mpeg”
/audio
Aúdio
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
audio controls
source src=”media/audio01.mp3 type=”audio/mpeg”
/audio
Aúdio
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
video controls
source src=”media/video.mp4” type=”video/mp4
poster=”media/video.jpg”
/video
Video

15. Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
progress/progress
progress value=”30” max=”100”/progress
Barra de progresso
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
progress/progress
progress value=”30” max=”100”/progress
Barra de progresso

16. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
É o oposto de bitmap. Ao contrário do btimap ele não usa pixel e sim calcúlos
matemáticos para compor a imagem.
SVG - Gráficos Vetoriais
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
É o oposto de bitmap. Ao contrário do btimap ele não usa pixel e sim calcúlos
matemáticos para compor a imagem.
SVG - Gráficos Vetoriais
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

17. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
svg xmlns=”www.w3.org/2000/svg” version=”1.1”
circle cx=”100” cy=”50” r=“50” fill=”red”/
/svg
SVG - Gráficos Vetoriais
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
svg xmlns=”www.w3.org/2000/svg” version=”1.1”
circle cx=”100” cy=”50” r=“50” fill=”red”/
/svg
SVG - Gráficos Vetoriais
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

18. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
É a renderização de gráficos via java script
Com o canvas você consegue de simples criar gráficos, animações,
composições de imgens usando JavaScript.
Canvas
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
É a renderização de gráficos via java script
Com o canvas você consegue de simples criar gráficos, animações,
composições de imgens usando JavaScript.
Canvas
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

19. Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
Referências
• heroisdati.com
• maujor.com
• tableless.com
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
Referências
• heroisdati.com
• maujor.com
• tableless.com