David Arty, profile picture
Carregado porDavid Arty
624 visualizações

Desenvolvimento Web 02 - David Arty - SENAC

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.

Incorporar apresentação

Baixado 18 vezes
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
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
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
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
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
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
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
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
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:
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
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
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
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
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
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
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
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
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
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

Mais conteúdo relacionado

PDF
Desenvolvimento Web 01 - David Arty - SENAC
porDavid Arty
 
PDF
Introdução a Wordpress - David Arty - SENAC
porDavid Arty
 
PDF
Desenvolvimento Web 03 - David Arty - SENAC
porDavid Arty
 
PDF
Curso de css3 unidade 1 - introdução ao css
porLéo Dias
 
PPTX
Construindo layout de sites com CSS
porTalita Pagani
 
PPTX
Introdução ao CSS - Desenvolvimento web
porCarlos Eduardo Kadu
 
PDF
Introdução CSS
porGiorgia Barreto Lima Parrião
 
PPTX
Introdução ao CSS
porLeonardo Soares
 
Desenvolvimento Web 01 - David Arty - SENAC
porDavid Arty
 
Introdução a Wordpress - David Arty - SENAC
porDavid Arty
 
Desenvolvimento Web 03 - David Arty - SENAC
porDavid Arty
 
Curso de css3 unidade 1 - introdução ao css
porLéo Dias
 
Construindo layout de sites com CSS
porTalita Pagani
 
Introdução ao CSS - Desenvolvimento web
porCarlos Eduardo Kadu
 
Introdução CSS
porGiorgia Barreto Lima Parrião
 
Introdução ao CSS
porLeonardo Soares
 

Mais procurados

PPT
Css e iFrames
porSandra Oliveira
 
PDF
Curso de Desenvolvimento Web - Módulo 02 - CSS
porRodrigo Bueno Santa Maria, BS, MBA
 
PDF
Minicurso CSS: Definição e aplicação
porVanessa Me Tonini
 
PPTX
CSS - Módulo Básico de WEB
porDaniel Brandão
 
PPT
Css completo(2)
porSergio Finamore
 
PDF
Arquitetura CSS
porRafael Rinaldi
 
PDF
Css - por Nícolas Lazarte Kaqui
porArthur Henrique Guimarães de Oliveira
 
DOCX
Aula 1 programação web i
porEliene Resende
 
PDF
Slides Css3
porPedro Neto
 
PDF
Modular CSS - Projetando CSS para aplicativos
porBunee.io - Hiring with Intelligence
 
PPT
Aula 07 Css - Parte 1
porProfessor Samuel Ribeiro
 
PDF
WDI - aula 07 - css com html
porCristiano Pires Martins
 
PDF
Introdução ao CSS
porWillian Watanabe
 
PPTX
html, css e java script - renato araujo
pororenatoaraujo
 
PDF
Curso de HTML5 - Aula01
porZarathon Maia
 
PDF
Power point 2003
porPaulo Guimarães
 
PPTX
Web design responsivo e adaptativo - HTML5/CSS3
porHeraldo Gonçalves Lima Junior
 
PDF
Programação Web com HTML e CSS
porVictor Adriel Oliveira
 
PDF
Html com css
porNadijar Casarin
 
PDF
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
porPeslPinguim
 
Css e iFrames
porSandra Oliveira
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
porRodrigo Bueno Santa Maria, BS, MBA
 
Minicurso CSS: Definição e aplicação
porVanessa Me Tonini
 
CSS - Módulo Básico de WEB
porDaniel Brandão
 
Css completo(2)
porSergio Finamore
 
Arquitetura CSS
porRafael Rinaldi
 
Css - por Nícolas Lazarte Kaqui
porArthur Henrique Guimarães de Oliveira
 
Aula 1 programação web i
porEliene Resende
 
Slides Css3
porPedro Neto
 
Modular CSS - Projetando CSS para aplicativos
porBunee.io - Hiring with Intelligence
 
Aula 07 Css - Parte 1
porProfessor Samuel Ribeiro
 
WDI - aula 07 - css com html
porCristiano Pires Martins
 
Introdução ao CSS
porWillian Watanabe
 
html, css e java script - renato araujo
pororenatoaraujo
 
Curso de HTML5 - Aula01
porZarathon Maia
 
Power point 2003
porPaulo Guimarães
 
Web design responsivo e adaptativo - HTML5/CSS3
porHeraldo Gonçalves Lima Junior
 
Programação Web com HTML e CSS
porVictor Adriel Oliveira
 
Html com css
porNadijar Casarin
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
porPeslPinguim
 

Destaque

PDF
0 si apresentação de introdução ao desenvolvimento web
porlucianoteixeirasgmail
 
PPTX
Desenvolvimento Web: Por que Java?
porDiogo Souza
 
PPTX
Desenvolvimento web I - Introdução
porLuiz Paulo dos Prazeres Júnior
 
PPT
Curso de Joomla!
porDanilo Barros Andrade
 
PDF
Portal Padrão do Governo Federal em CMS Joomla
porrafaelberlanda
 
PPTX
Introdução sobre desenvolvimento web
porRodrigo Rodrigues
 
PPTX
Joomla, o que é? Para que serve?
porBull Marketing
 
PDF
Criação de Sites - David Arty - SENAC
porDavid Arty
 
PDF
Curso de Desenvolvimento Web - Módulo 01 - HTML
porRodrigo Bueno Santa Maria, BS, MBA
 
0 si apresentação de introdução ao desenvolvimento web
porlucianoteixeirasgmail
 
Desenvolvimento Web: Por que Java?
porDiogo Souza
 
Desenvolvimento web I - Introdução
porLuiz Paulo dos Prazeres Júnior
 
Curso de Joomla!
porDanilo Barros Andrade
 
Portal Padrão do Governo Federal em CMS Joomla
porrafaelberlanda
 
Introdução sobre desenvolvimento web
porRodrigo Rodrigues
 
Joomla, o que é? Para que serve?
porBull Marketing
 
Criação de Sites - David Arty - SENAC
porDavid Arty
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
porRodrigo Bueno Santa Maria, BS, MBA
 

Mais de David Arty

PDF
Wordpress como ferramenta de marketing digital
porDavid Arty
 
PDF
ebook Solidário Fluência de HTML & CSS
porDavid Arty
 
PDF
Briefing desenvolvimento de Site
porDavid Arty
 
PDF
Você já pensou se a água acabar hoje?
porDavid Arty
 
PDF
Corinthians - Manual de Marca
porDavid Arty
 
PDF
Game Design Document - Corpo Seco
porDavid Arty
 
PDF
Senac - Manual de Marca
porDavid Arty
 
Wordpress como ferramenta de marketing digital
porDavid Arty
 
ebook Solidário Fluência de HTML & CSS
porDavid Arty
 
Briefing desenvolvimento de Site
porDavid Arty
 
Você já pensou se a água acabar hoje?
porDavid Arty
 
Corinthians - Manual de Marca
porDavid Arty
 
Game Design Document - Corpo Seco
porDavid Arty
 
Senac - Manual de Marca
porDavid Arty
 

Desenvolvimento Web 02 - David Arty - SENAC

  • 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 CamadasWebCamadas 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 CamadasWebCamadas 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 CamadasWebCamadas 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 CamadasWebCamadas 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