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

Desenvolvimento Web 03 - David Arty - SENAC

O documento discute as camadas da web, incluindo HTML para conteúdo, CSS para estilo e JavaScript para dinamismo. Explica que HTML usa tags para estruturar informações, CSS controla a aparência usando seletores, propriedades e valores, e JavaScript adiciona comportamento interativo.

Incorporar apresentação

Baixado 27 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 Camadas Web HTML é semântica não é design HTML- Como funciona Tags são as “marcas” usadas para informar ao navegador como deve ser apresentado o site. As tags tem o seguinte formato: começam com um sinal de menor “” e terminam com um sinal de maior “”. Existem dois tipos de tags - tags de abertura: comando e tags de fechamento: /comando. A diferença entre elas é que na tag de fechamento existe um barra “/”. Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado segundo o comando contido na tag. Tags: 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- Como funciona Tags são as “marcas” usadas para informar ao navegador como deve ser apresentado o site. As tags tem o seguinte formato: começam com um sinal de menor “” e terminam com um sinal de maior “”. Existem dois tipos de tags - tags de abertura: comando e tags de fechamento: /comando. A diferença entre elas é que na tag de fechamento existe um barra “/”. Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado segundo o comando contido na tag. Tags: Java Script DINAMISMO FORMA CONTEÚDO CSS HTML Camadas WebCamadas Web Desenvolvimento Web David Arty
Tags: 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- Como funciona Basicamente, a estrutura das tags são dividas em: tags de abertura: comando tags de fechamento: /comando. A diferença entre elas é que na tag de fechamento contém um barra ( “/” ). Tudo que estiver contido entre a abertura e o fechamento da tag será processado segundo o comando contido na tag. Tags: 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- Como funciona Basicamente, a estrutura das tags são dividas em: tags de abertura: comando tags de fechamento: /comando. A diferença entre elas é que na tag de fechamento contém um barra ( “/” ). Tudo que estiver contido entre a abertura e o fechamento da tag será processado segundo o comando contido na tag.
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- Como funciona No HTML também existem algums tags onde a abertura e o fechamento se dá na mesma tag. Essas tags contém comandos que não precisam conter algum conteúdo para serem processadas, isto é, são tags de comandos isolados. Exemplos: br , input Tags: 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- Como funciona No HTML também existem algums tags onde a abertura e o fechamento se dá na mesma tag. Essas tags contém comandos que não precisam conter algum conteúdo para serem processadas, isto é, são tags de comandos isolados. Exemplos: br , input Tags: 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- Como funciona Quantas tags HTML eu uso? Quantas eu devo saber? 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- Como funciona Quantas tags HTML eu uso? Quantas eu devo saber? 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- Como funciona http://www.w3schools.com/ http://tableless.com.br/ http://html5doctor.com/ Onde encontrar 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- Como funciona http://www.w3schools.com/ http://tableless.com.br/ http://html5doctor.com/ Onde encontrar 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- Como funciona Id e/ou Class são usados em geral para fornecer uma identidade a uma tag com o propósito de fornecer uma referência para estilização por CSS ou captura por um script • Classes e IDs não têm qualquer estilo por si mesmos. É preciso CSS para orientar e aplicar estilos • Podemos ter ID e Class na mesma tag • Quanto a formatação, tudo o que você possa fazer com um ID você pode fazer com uma Classe e vice-versa ID e Class: 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- Como funciona Id e/ou Class são usados em geral para fornecer uma identidade a uma tag com o propósito de fornecer uma referência para estilização por CSS ou captura por um script • Classes e IDs não têm qualquer estilo por si mesmos. É preciso CSS para orientar e aplicar estilos • Podemos ter ID e Class na mesma tag • Quanto a formatação, tudo o que você possa fazer com um ID você pode fazer com uma Classe e vice-versa ID e Class: 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- Como funciona Id e/ou Class são usados em geral para fornecer uma identidade a uma tag com o propósito de fornecer uma referência para estilização por CSS ou captura por um script Exemplo de uso: div id=”azul”/div div class=”verde”/div ID e Class: 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- Como funciona Id e/ou Class são usados em geral para fornecer uma identidade a uma tag com o propósito de fornecer uma referência para estilização por CSS ou captura por um script Exemplo de uso: div id=”azul”/div div class=”verde”/div ID e Class: 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- Como funciona ID SÃO exclusivas: • Cada elemento pode conter apenas um ID • Cada página pode ter apenas um elemento com aquele ID *seu código não vai passar pelo validador se você usar o mesmo ID em mais de um elemento ID: 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- Como funciona ID SÃO exclusivas: • Cada elemento pode conter apenas um ID • Cada página pode ter apenas um elemento com aquele ID *seu código não vai passar pelo validador se você usar o mesmo ID em mais de um elemento ID: 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- Como funciona Class NÃO são exclusivas: • Você pode usar a mesma classe para várias tags • Você pode usar várias classes para um mesmo elemento Qualquer informação de estilo que precise ser aplicada a vários elementos em uma página deve ser feita com uma class Class: 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- Como funciona Class NÃO são exclusivas: • Você pode usar a mesma classe para várias tags • Você pode usar várias classes para um mesmo elemento Qualquer informação de estilo que precise ser aplicada a vários elementos em uma página deve ser feita com uma class Class: Java Script DINAMISMO FORMA CONTEÚDO CSS HTML Camadas WebCamadas Web Desenvolvimento Web David Arty
ID e Class: 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- Como funciona Prefira sempre nomeá-los pela sua natureza,e não pelo que ele parece. Exemplo de boas práticas: ● Os nomes das classes devem ser escritos sempre em caixa baixa. ● Os epaços devem ser representados por “underline” (.container_principal) ● Palavras compostas devem ser separadas por hífen (.verde-limão) ID e Class: 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- Como funciona Prefira sempre nomeá-los pela sua natureza,e não pelo que ele parece. Exemplo de boas práticas: ● Os nomes das classes devem ser escritos sempre em caixa baixa. ● Os epaços devem ser representados por “underline” (.container_principal) ● Palavras compostas devem ser separadas por hífen (.verde-limão)
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- Como funciona É bom saber que: • Classes e IDs não têm qualquer estilo por si mesmos. É preciso CSS para orientar e aplicar estilos • Podemos ter ID e Class na mesma tag • Quanto a formatação, tudo o que você possa fazer com um ID você pode fazer com uma Classe e vice-versa ID e Class: 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- Como funciona É bom saber que: • Classes e IDs não têm qualquer estilo por si mesmos. É preciso CSS para orientar e aplicar estilos • Podemos ter ID e Class na mesma tag • Quanto a formatação, tudo o que você possa fazer com um ID você pode fazer com uma Classe e vice-versa ID e Class: 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 CSS- Como funciona Qual o significado de estilo em cascata? 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 CSS- Como funciona Qual o significado de estilo em cascata? 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 CSS- Como funciona Efeito cascata é o método pelo qual é aplicada uma regra CSS em função do peso ( importância, prioridade) da regra CSS. Quando a um elemento HTML aplica-se mais de uma regra CSS, diz-se que há um conflito de regras e será aplicada aquela que tiver maior pêso (importância, prioridade) determinada pela ordem do efeito cascata fonte: maujor Herança, Especificidade e !important 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 CSS- Como funciona Efeito cascata é o método pelo qual é aplicada uma regra CSS em função do peso ( importância, prioridade) da regra CSS. Quando a um elemento HTML aplica-se mais de uma regra CSS, diz-se que há um conflito de regras e será aplicada aquela que tiver maior pêso (importância, prioridade) determinada pela ordem do efeito cascata fonte: maujor Herança, Especificidade e !important 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 CSS- Como funciona Aplicando CSS a um documento HTML • In-line (o atributo style) html head titleExemplo/title /head body style=”background-color: #FF0000;” p style=”color: #FFF;”Teste/p /body /html 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 CSS- Como funciona Aplicando CSS a um documento HTML • In-line (o atributo style) html head titleExemplo/title /head body style=”background-color: #FF0000;” p style=”color: #FFF;”Teste/p /body /html 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 CSS- Como funciona seletor { propriedade: valor; } Sintaxe CSS: • 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...) 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 CSS- Como funciona seletor { propriedade: valor; } Sintaxe CSS: • 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...) 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 CSS- Como funciona Aplicando CSS a um documento HTML • In-line (o atributo style) html head titleExemplo/title /head body style=”background-color: #FF0000;” p style=”color: #FFF;”Teste/p /body /html 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 CSS- Como funciona Aplicando CSS a um documento HTML • In-line (o atributo style) html head titleExemplo/title /head body style=”background-color: #FF0000;” p style=”color: #FFF;”Teste/p /body /html 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 CSS- Como funciona Aplicando CSS a um documento HTML • Interno ( utlizando a tag style) html head titleExemplo/title style type=”text/css” body {background-color: #FF0000;} /style /head body p Teste/p /body /html 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 CSS- Como funciona Aplicando CSS a um documento HTML • Interno ( utlizando a tag style) html head titleExemplo/title style type=”text/css” body {background-color: #FF0000;} /style /head body p Teste/p /body /html 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 CSS- Como funciona Aplicando CSS a um documento HTML • Importada ( utlizando um atributo @import) style type=”text/css” @import url(”style.css”); /style 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 CSS- Como funciona Aplicando CSS a um documento HTML • Importada ( utlizando um atributo @import) style type=”text/css” @import url(”style.css”); /style 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 CSS- Como funciona Aplicando CSS a um documento HTML • Externo ( utlizando um link) link rel=”stylesheet” type=”text/css” href=”style/style.css” media=”all” / 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 CSS- Como funciona Aplicando CSS a um documento HTML • Externo ( utlizando um link) link rel=”stylesheet” type=”text/css” href=”style/style.css” media=”all” / 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 CSS- Como funciona Qual a maneira mais rápida de aprender CSS? “Se você souber ou vier a descobrir no futuro, por favor informe para eu colocar aqui!” by maujor 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 CSS- Como funciona Qual a maneira mais rápida de aprender CSS? “Se você souber ou vier a descobrir no futuro, por favor informe para eu colocar aqui!” by maujor Java Script DINAMISMO FORMA CONTEÚDO CSS HTML Camadas WebCamadas Web Desenvolvimento Web David Arty
• heroisdati.com • maujor.com • tableless.com • pt-br.html.net • desenvolvimentoparaweb.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 • pt-br.html.net • desenvolvimentoparaweb.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

Mais conteúdo relacionado

PDF
Introdução a Wordpress - David Arty - SENAC
porDavid Arty
 
PDF
Desenvolvimento Web 02 - David Arty - SENAC
porDavid Arty
 
PDF
Desenvolvimento Web 01 - 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
 
PDF
Introdução CSS
porGiorgia Barreto Lima Parrião
 
PPTX
Introdução ao CSS - Desenvolvimento web
porCarlos Eduardo Kadu
 
PPT
Css e iFrames
porSandra Oliveira
 
Introdução a Wordpress - David Arty - SENAC
porDavid Arty
 
Desenvolvimento Web 02 - David Arty - SENAC
porDavid Arty
 
Desenvolvimento Web 01 - 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 CSS
porGiorgia Barreto Lima Parrião
 
Introdução ao CSS - Desenvolvimento web
porCarlos Eduardo Kadu
 
Css e iFrames
porSandra Oliveira
 

Mais procurados

PPTX
Folha de estilo css
porEscola de Informática Evolutime; Colégio Pio XII
 
PDF
Minicurso CSS: Definição e aplicação
porVanessa Me Tonini
 
PPTX
CSS - Módulo Básico de WEB
porDaniel Brandão
 
PDF
Slides Css3
porPedro Neto
 
PPTX
Introdução ao CSS
porLeonardo Soares
 
KEY
HTML/CSS Patterns
porLeonardo Quixada
 
PPT
Css completo(2)
porSergio Finamore
 
PDF
Curso de Desenvolvimento Web - Módulo 02 - CSS
porRodrigo Bueno Santa Maria, BS, MBA
 
PDF
Arquitetura CSS
porRafael Rinaldi
 
DOCX
Aula 1 programação web i
porEliene Resende
 
PDF
Css - por Nícolas Lazarte Kaqui
porArthur Henrique Guimarães de Oliveira
 
PDF
Modular CSS - Projetando CSS para aplicativos
porBunee.io - Hiring with Intelligence
 
PPT
Aula 07 Css - Parte 1
porProfessor Samuel Ribeiro
 
PDF
Apostila dreamweaver
porVerônica Veiga
 
PDF
Css 3
porPedro Neto
 
PDF
Html 5 -_aula_2
porPedro Neto
 
PDF
Introdução ao CSS
porWillian Watanabe
 
PPTX
html, css e java script - renato araujo
pororenatoaraujo
 
PPTX
CSS
porFábio Nogueira de Lucena
 
PDF
Curso HTML, CSS e JavaScript
porPablo Sanches
 
Folha de estilo css
porEscola de Informática Evolutime; Colégio Pio XII
 
Minicurso CSS: Definição e aplicação
porVanessa Me Tonini
 
CSS - Módulo Básico de WEB
porDaniel Brandão
 
Slides Css3
porPedro Neto
 
Introdução ao CSS
porLeonardo Soares
 
HTML/CSS Patterns
porLeonardo Quixada
 
Css completo(2)
porSergio Finamore
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
porRodrigo Bueno Santa Maria, BS, MBA
 
Arquitetura CSS
porRafael Rinaldi
 
Aula 1 programação web i
porEliene Resende
 
Css - por Nícolas Lazarte Kaqui
porArthur Henrique Guimarães de Oliveira
 
Modular CSS - Projetando CSS para aplicativos
porBunee.io - Hiring with Intelligence
 
Aula 07 Css - Parte 1
porProfessor Samuel Ribeiro
 
Apostila dreamweaver
porVerônica Veiga
 
Css 3
porPedro Neto
 
Html 5 -_aula_2
porPedro Neto
 
Introdução ao CSS
porWillian Watanabe
 
html, css e java script - renato araujo
pororenatoaraujo
 
CSS
porFábio Nogueira de Lucena
 
Curso HTML, CSS e JavaScript
porPablo Sanches
 

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
 

Semelhante a Desenvolvimento Web 03 - David Arty - SENAC

PDF
2. Introdução ao CSSpptx.pdf
porRubenManhia
 
PDF
Tecnologias Web com foco na criação de Landing Pages
porRangel Javier
 
PDF
Mini curso html5 slides
porCarlos Rodrigo de Araujo
 
PDF
Curso HTML módulo 3 - Conceitos básicos CSS
porMichel Bernardes de Jesus
 
PDF
Post 4
pordiogolevel3
 
PDF
HTML e CSS para pequenas gafanhotas
porInajara Leppa
 
PDF
CSS - Cascading Style Sheets - 1
porIsrael Messias
 
PDF
Seu primeiro website
porCarlos Henrique Carvalho de Santana
 
2. Introdução ao CSSpptx.pdf
porRubenManhia
 
Tecnologias Web com foco na criação de Landing Pages
porRangel Javier
 
Mini curso html5 slides
porCarlos Rodrigo de Araujo
 
Curso HTML módulo 3 - Conceitos básicos CSS
porMichel Bernardes de Jesus
 
Post 4
pordiogolevel3
 
HTML e CSS para pequenas gafanhotas
porInajara Leppa
 
CSS - Cascading Style Sheets - 1
porIsrael Messias
 
Seu primeiro website
porCarlos Henrique Carvalho de Santana
 

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 03 - 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 Camadas Web HTML é semântica não é design HTML- Como funciona Tags são as “marcas” usadas para informar ao navegador como deve ser apresentado o site. As tags tem o seguinte formato: começam com um sinal de menor “” e terminam com um sinal de maior “”. Existem dois tipos de tags - tags de abertura: comando e tags de fechamento: /comando. A diferença entre elas é que na tag de fechamento existe um barra “/”. Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado segundo o comando contido na tag. Tags: 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- Como funciona Tags são as “marcas” usadas para informar ao navegador como deve ser apresentado o site. As tags tem o seguinte formato: começam com um sinal de menor “” e terminam com um sinal de maior “”. Existem dois tipos de tags - tags de abertura: comando e tags de fechamento: /comando. A diferença entre elas é que na tag de fechamento existe um barra “/”. Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado segundo o comando contido na tag. Tags: Java Script DINAMISMO FORMA CONTEÚDO CSS HTML Camadas WebCamadas Web Desenvolvimento Web David Arty
  • 3.
    Tags: 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- Como funciona Basicamente, a estrutura das tags são dividas em: tags de abertura: comando tags de fechamento: /comando. A diferença entre elas é que na tag de fechamento contém um barra ( “/” ). Tudo que estiver contido entre a abertura e o fechamento da tag será processado segundo o comando contido na tag. Tags: 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- Como funciona Basicamente, a estrutura das tags são dividas em: tags de abertura: comando tags de fechamento: /comando. A diferença entre elas é que na tag de fechamento contém um barra ( “/” ). Tudo que estiver contido entre a abertura e o fechamento da tag será processado segundo o comando contido na tag.
  • 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- Como funciona No HTML também existem algums tags onde a abertura e o fechamento se dá na mesma tag. Essas tags contém comandos que não precisam conter algum conteúdo para serem processadas, isto é, são tags de comandos isolados. Exemplos: br , input Tags: 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- Como funciona No HTML também existem algums tags onde a abertura e o fechamento se dá na mesma tag. Essas tags contém comandos que não precisam conter algum conteúdo para serem processadas, isto é, são tags de comandos isolados. Exemplos: br , input Tags: 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- Como funciona Quantas tags HTML eu uso? Quantas eu devo saber? 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- Como funciona Quantas tags HTML eu uso? Quantas eu devo saber? 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- Como funciona http://www.w3schools.com/ http://tableless.com.br/ http://html5doctor.com/ Onde encontrar 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- Como funciona http://www.w3schools.com/ http://tableless.com.br/ http://html5doctor.com/ Onde encontrar 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- Como funciona Id e/ou Class são usados em geral para fornecer uma identidade a uma tag com o propósito de fornecer uma referência para estilização por CSS ou captura por um script • Classes e IDs não têm qualquer estilo por si mesmos. É preciso CSS para orientar e aplicar estilos • Podemos ter ID e Class na mesma tag • Quanto a formatação, tudo o que você possa fazer com um ID você pode fazer com uma Classe e vice-versa ID e Class: 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- Como funciona Id e/ou Class são usados em geral para fornecer uma identidade a uma tag com o propósito de fornecer uma referência para estilização por CSS ou captura por um script • Classes e IDs não têm qualquer estilo por si mesmos. É preciso CSS para orientar e aplicar estilos • Podemos ter ID e Class na mesma tag • Quanto a formatação, tudo o que você possa fazer com um ID você pode fazer com uma Classe e vice-versa ID e Class: 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- Como funciona Id e/ou Class são usados em geral para fornecer uma identidade a uma tag com o propósito de fornecer uma referência para estilização por CSS ou captura por um script Exemplo de uso: div id=”azul”/div div class=”verde”/div ID e Class: 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- Como funciona Id e/ou Class são usados em geral para fornecer uma identidade a uma tag com o propósito de fornecer uma referência para estilização por CSS ou captura por um script Exemplo de uso: div id=”azul”/div div class=”verde”/div ID e Class: Java Script DINAMISMO FORMA CONTEÚDO CSS HTML Camadas WebCamadas Web Desenvolvimento Web David Arty
  • 9.
    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- Como funciona ID SÃO exclusivas: • Cada elemento pode conter apenas um ID • Cada página pode ter apenas um elemento com aquele ID *seu código não vai passar pelo validador se você usar o mesmo ID em mais de um elemento ID: 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- Como funciona ID SÃO exclusivas: • Cada elemento pode conter apenas um ID • Cada página pode ter apenas um elemento com aquele ID *seu código não vai passar pelo validador se você usar o mesmo ID em mais de um elemento ID: Java Script DINAMISMO FORMA CONTEÚDO CSS HTML Camadas WebCamadas Web Desenvolvimento Web David Arty
  • 10.
    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- Como funciona Class NÃO são exclusivas: • Você pode usar a mesma classe para várias tags • Você pode usar várias classes para um mesmo elemento Qualquer informação de estilo que precise ser aplicada a vários elementos em uma página deve ser feita com uma class Class: 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- Como funciona Class NÃO são exclusivas: • Você pode usar a mesma classe para várias tags • Você pode usar várias classes para um mesmo elemento Qualquer informação de estilo que precise ser aplicada a vários elementos em uma página deve ser feita com uma class Class: Java Script DINAMISMO FORMA CONTEÚDO CSS HTML Camadas WebCamadas Web Desenvolvimento Web David Arty
  • 11.
    ID e Class: JavaScript 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- Como funciona Prefira sempre nomeá-los pela sua natureza,e não pelo que ele parece. Exemplo de boas práticas: ● Os nomes das classes devem ser escritos sempre em caixa baixa. ● Os epaços devem ser representados por “underline” (.container_principal) ● Palavras compostas devem ser separadas por hífen (.verde-limão) ID e Class: 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- Como funciona Prefira sempre nomeá-los pela sua natureza,e não pelo que ele parece. Exemplo de boas práticas: ● Os nomes das classes devem ser escritos sempre em caixa baixa. ● Os epaços devem ser representados por “underline” (.container_principal) ● Palavras compostas devem ser separadas por hífen (.verde-limão)
  • 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- Como funciona É bom saber que: • Classes e IDs não têm qualquer estilo por si mesmos. É preciso CSS para orientar e aplicar estilos • Podemos ter ID e Class na mesma tag • Quanto a formatação, tudo o que você possa fazer com um ID você pode fazer com uma Classe e vice-versa ID e Class: 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- Como funciona É bom saber que: • Classes e IDs não têm qualquer estilo por si mesmos. É preciso CSS para orientar e aplicar estilos • Podemos ter ID e Class na mesma tag • Quanto a formatação, tudo o que você possa fazer com um ID você pode fazer com uma Classe e vice-versa ID e Class: 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 CSS- Como funciona Qual o significado de estilo em cascata? 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 CSS- Como funciona Qual o significado de estilo em cascata? 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 CSS- Como funciona Efeito cascata é o método pelo qual é aplicada uma regra CSS em função do peso ( importância, prioridade) da regra CSS. Quando a um elemento HTML aplica-se mais de uma regra CSS, diz-se que há um conflito de regras e será aplicada aquela que tiver maior pêso (importância, prioridade) determinada pela ordem do efeito cascata fonte: maujor Herança, Especificidade e !important 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 CSS- Como funciona Efeito cascata é o método pelo qual é aplicada uma regra CSS em função do peso ( importância, prioridade) da regra CSS. Quando a um elemento HTML aplica-se mais de uma regra CSS, diz-se que há um conflito de regras e será aplicada aquela que tiver maior pêso (importância, prioridade) determinada pela ordem do efeito cascata fonte: maujor Herança, Especificidade e !important Java Script DINAMISMO FORMA CONTEÚDO CSS HTML Camadas WebCamadas Web Desenvolvimento Web David Arty
  • 15.
    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 CSS- Como funciona Aplicando CSS a um documento HTML • In-line (o atributo style) html head titleExemplo/title /head body style=”background-color: #FF0000;” p style=”color: #FFF;”Teste/p /body /html 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 CSS- Como funciona Aplicando CSS a um documento HTML • In-line (o atributo style) html head titleExemplo/title /head body style=”background-color: #FF0000;” p style=”color: #FFF;”Teste/p /body /html Java Script DINAMISMO FORMA CONTEÚDO CSS HTML Camadas WebCamadas Web Desenvolvimento Web David Arty
  • 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 CSS- Como funciona seletor { propriedade: valor; } Sintaxe CSS: • 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...) 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 CSS- Como funciona seletor { propriedade: valor; } Sintaxe CSS: • 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...) 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 CSS- Como funciona Aplicando CSS a um documento HTML • In-line (o atributo style) html head titleExemplo/title /head body style=”background-color: #FF0000;” p style=”color: #FFF;”Teste/p /body /html 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 CSS- Como funciona Aplicando CSS a um documento HTML • In-line (o atributo style) html head titleExemplo/title /head body style=”background-color: #FF0000;” p style=”color: #FFF;”Teste/p /body /html 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 CSS- Como funciona Aplicando CSS a um documento HTML • Interno ( utlizando a tag style) html head titleExemplo/title style type=”text/css” body {background-color: #FF0000;} /style /head body p Teste/p /body /html 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 CSS- Como funciona Aplicando CSS a um documento HTML • Interno ( utlizando a tag style) html head titleExemplo/title style type=”text/css” body {background-color: #FF0000;} /style /head body p Teste/p /body /html Java Script DINAMISMO FORMA CONTEÚDO CSS HTML Camadas WebCamadas Web Desenvolvimento Web David Arty
  • 19.
    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 CSS- Como funciona Aplicando CSS a um documento HTML • Importada ( utlizando um atributo @import) style type=”text/css” @import url(”style.css”); /style 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 CSS- Como funciona Aplicando CSS a um documento HTML • Importada ( utlizando um atributo @import) style type=”text/css” @import url(”style.css”); /style Java Script DINAMISMO FORMA CONTEÚDO CSS HTML Camadas WebCamadas Web Desenvolvimento Web David Arty
  • 20.
    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 CSS- Como funciona Aplicando CSS a um documento HTML • Externo ( utlizando um link) link rel=”stylesheet” type=”text/css” href=”style/style.css” media=”all” / 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 CSS- Como funciona Aplicando CSS a um documento HTML • Externo ( utlizando um link) link rel=”stylesheet” type=”text/css” href=”style/style.css” media=”all” / Java Script DINAMISMO FORMA CONTEÚDO CSS HTML Camadas WebCamadas Web Desenvolvimento Web David Arty
  • 21.
    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 CSS- Como funciona Qual a maneira mais rápida de aprender CSS? “Se você souber ou vier a descobrir no futuro, por favor informe para eu colocar aqui!” by maujor 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 CSS- Como funciona Qual a maneira mais rápida de aprender CSS? “Se você souber ou vier a descobrir no futuro, por favor informe para eu colocar aqui!” by maujor Java Script DINAMISMO FORMA CONTEÚDO CSS HTML Camadas WebCamadas Web Desenvolvimento Web David Arty
  • 22.
    • heroisdati.com • maujor.com •tableless.com • pt-br.html.net • desenvolvimentoparaweb.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 • pt-br.html.net • desenvolvimentoparaweb.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