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.
Introdução a Wordpress - David Arty - SENACDavid Arty
O documento discute as camadas da web, incluindo HTML para conteúdo, CSS para estilo e JavaScript para dinamismo. CMS (sistemas de gerenciamento de conteúdo) como WordPress, Joomla e Drupal permitem criar sites dinâmicos sem necessidade de programação aprofundada.
Desenvolvimento Web 02 - David Arty - SENACDavid Arty
O documento discute as camadas da web, especificamente HTML, CSS e JavaScript. Explica que HTML é usado para estruturar e apresentar conteúdo, CSS é usado para estilizar a apresentação e JavaScript é usado para adicionar comportamentos dinâmicos.
Desenvolvimento Web 01 - David Arty - SENACDavid Arty
O documento discute os principais conceitos do desenvolvimento web sem o uso de tabelas (tableless) para disposição de conteúdo, e como HTML, CSS e JavaScript atuam juntos para estruturar, estilizar e dinamizar páginas da web.
Curso de css3 unidade 1 - introdução ao cssLéo Dias
O documento resume os principais pontos sobre CSS: 1) CSS é uma linguagem de formatação para definir o estilo de páginas web, separando conteúdo da formatação; 2) Apresenta os tipos de seletores como classe, ID e filho que permitem aplicar estilos específicos; 3) Discutem propriedades comuns como cor, fonte e tamanho que controlam a aparência.
O documento discute a construção de layouts de sites com CSS. Ele apresenta os principais tópicos do CSS como inserção, seletores, propriedades e box model. Também demonstra na prática como estilizar um documento XHTML usando CSS e discute diretrizes e novidades do CSS3.
O documento introduz os conceitos básicos de CSS, incluindo sua definição como linguagem para estilos que define o layout de documentos HTML, as vantagens de usar CSS, e os três métodos para aplicar CSS em HTML. Também resume os componentes básicos de uma regra CSS, propriedades comuns como float, e aplicações como formatação de texto e elementos. Por fim, pede como exercício a criação de um site simples com HTML e CSS.
Este documento fornece um resumo de um treinamento sobre CSS (Cascading Style Sheets). Ele discute conceitos como separação de responsabilidades entre HTML, CSS e JavaScript, tipos de seletores, unidades de medida e propriedades CSS. O documento também aborda tópicos como media queries, fontes personalizadas e compatibilidade entre navegadores.
As Folhas de Estilos (CSS) permitem formatar documentos HTML de maneira separada do conteúdo, definindo propriedades como fontes, cores, tamanhos e espaçamentos. CSS é usado para aplicar estilos de forma flexível a elementos HTML em diferentes meios como tela, impressão ou leitura.
Introdução a Wordpress - David Arty - SENACDavid Arty
O documento discute as camadas da web, incluindo HTML para conteúdo, CSS para estilo e JavaScript para dinamismo. CMS (sistemas de gerenciamento de conteúdo) como WordPress, Joomla e Drupal permitem criar sites dinâmicos sem necessidade de programação aprofundada.
Desenvolvimento Web 02 - David Arty - SENACDavid Arty
O documento discute as camadas da web, especificamente HTML, CSS e JavaScript. Explica que HTML é usado para estruturar e apresentar conteúdo, CSS é usado para estilizar a apresentação e JavaScript é usado para adicionar comportamentos dinâmicos.
Desenvolvimento Web 01 - David Arty - SENACDavid Arty
O documento discute os principais conceitos do desenvolvimento web sem o uso de tabelas (tableless) para disposição de conteúdo, e como HTML, CSS e JavaScript atuam juntos para estruturar, estilizar e dinamizar páginas da web.
Curso de css3 unidade 1 - introdução ao cssLéo Dias
O documento resume os principais pontos sobre CSS: 1) CSS é uma linguagem de formatação para definir o estilo de páginas web, separando conteúdo da formatação; 2) Apresenta os tipos de seletores como classe, ID e filho que permitem aplicar estilos específicos; 3) Discutem propriedades comuns como cor, fonte e tamanho que controlam a aparência.
O documento discute a construção de layouts de sites com CSS. Ele apresenta os principais tópicos do CSS como inserção, seletores, propriedades e box model. Também demonstra na prática como estilizar um documento XHTML usando CSS e discute diretrizes e novidades do CSS3.
O documento introduz os conceitos básicos de CSS, incluindo sua definição como linguagem para estilos que define o layout de documentos HTML, as vantagens de usar CSS, e os três métodos para aplicar CSS em HTML. Também resume os componentes básicos de uma regra CSS, propriedades comuns como float, e aplicações como formatação de texto e elementos. Por fim, pede como exercício a criação de um site simples com HTML e CSS.
Este documento fornece um resumo de um treinamento sobre CSS (Cascading Style Sheets). Ele discute conceitos como separação de responsabilidades entre HTML, CSS e JavaScript, tipos de seletores, unidades de medida e propriedades CSS. O documento também aborda tópicos como media queries, fontes personalizadas e compatibilidade entre navegadores.
As Folhas de Estilos (CSS) permitem formatar documentos HTML de maneira separada do conteúdo, definindo propriedades como fontes, cores, tamanhos e espaçamentos. CSS é usado para aplicar estilos de forma flexível a elementos HTML em diferentes meios como tela, impressão ou leitura.
1. O documento descreve as principais propriedades e conceitos do CSS, incluindo como definir estilos, cores, fontes, bordas, margens, preenchimentos e posicionamento;
2. São apresentados exemplos de sintaxe CSS para cada propriedade, mostrando como aplicá-las corretamente;
3. O CSS permite separar a apresentação da estrutura e conteúdo em páginas web, tornando o design independente do HTML.
Vanessa Martinez Tonini apresenta um minicurso sobre CSS com as seguintes informações essenciais:
1) Apresenta sua experiência profissional e objetivos do minicurso de fornecer uma introdução básica à sintaxe e aplicação do CSS.
2) Explica o que é CSS, como funciona a cascata de estilos, e ferramentas para editar arquivos CSS.
3) Demonstra exemplos básicos de como aplicar estilos de fontes, cores, fundos, links, listas e tabelas usando CSS.
O documento resume os principais conceitos de CSS, incluindo: 1) CSS é usado para estilizar elementos HTML, 2) Regras CSS contêm seletores e declarações, 3) Existem diferentes maneiras de inserir CSS em uma página, e 4) O modelo de caixa CSS descreve como os elementos são renderizados.
Slide da disciplina de linguagem de programação para a web do curso técnico em informática do IFPE - Campus Garanhuns. Faz uma apresentação sobre o que é o CSS, por que o utilizamos, suas vantagens, como o utilizamos e algumas de suas propriedades.
O documento apresenta padrões de HTML e CSS para criação de layouts e componentes de forma estruturada e semântica. É apresentado o padrão de grids para definir a estrutura do layout, minidocumentos para encapsular seções de conteúdo de forma autônoma e microsemântica para melhorar a acessibilidade e o significado do código HTML.
O documento discute Cascading Style Sheets (CSS), que definem a aparência de páginas web. CSS permite aplicar estilos personalizados a elementos de forma flexível. Existem três formas de aplicar estilos: local (inline), incorporado (embedded) e externo (linked). A ordem de precedência é local > incorporado > externo.
Hoje em dia quando o assunto é CSS muito se fala em modularização e arquitetura de código. Mas o que de fato é isso? Quais abordagens podemos utilizar para tornar o código do nosso CSS mais organizado?
Nessa apresentação procuro passar uma visão geral das técnicas mais populares, detalhando suas particularidades e a ideologia por traz de cada uma.
Também falo de técnicas mais recentes que abordam o desenvolvimento de CSS de perspectivas diferentes e algumas dicas gerais de como deixar seu código mais flexível a mudanças.
O documento descreve conceitos básicos de HTML e CSS. Em 3 frases:
1) HTML é uma linguagem de marcação usada para criar páginas da web, contendo elementos como tags que formatam o conteúdo.
2) CSS permite separar a estrutura do documento HTML de sua formatação e estilo visual, definindo regras de estilo em folhas externas aplicáveis a vários documentos.
3) O documento fornece exemplos básicos de como usar tags HTML comuns e como criar regras CSS para definir propriedades de est
O documento discute o nascimento e uso do CSS, destacando que: (1) surgiu para permitir a separação entre conteúdo e formatação em páginas web; (2) oferece vantagens como manutenção simplificada e compatibilidade, porém (3) também apresenta desvantagens como incompatibilidade entre navegadores.
O documento discute a importância de padronização e reutilização no desenvolvimento front-end. Apresenta diferentes abordagens como grids, frameworks e metodologias como OOCSS, SMACSS e BEM para criar códigos reutilizáveis. Defende a criação de um arquivo de standards próprio com classes globais ao invés de depender totalmente de bibliotecas externas.
O documento resume os principais conceitos de CSS (Cascading Style Sheets), incluindo sua história, propósito, tipos de vinculação de folhas de estilo, sintaxe básica de regras CSS e diferentes seletores como classe e ID.
Este documento fornece instruções sobre como usar o software Dreamweaver para criar sites. Ele explica como conhecer a interface do Dreamweaver, criar páginas, trabalhar com imagens, hiperlinks, tabelas, formulários e outras funcionalidades.
O documento fornece uma introdução sobre CSS (Cascading Style Sheets), definindo-o como um mecanismo para adicionar estilos a documentos web. Ele explica os componentes básicos de uma regra CSS, como seletores, declarações e propriedades. Além disso, discute como inserir folhas de estilo e a ordem de precedência entre elas, e introduz o modelo de caixa CSS.
O documento descreve novos elementos HTML introduzidos recentemente, incluindo <article>, <aside>, <details> e <dialog>. É escrito por Prof. Pedro Clarindo da Silva Neto e discute cada elemento, suas funções e especificações.
O documento introduz os conceitos básicos de CSS, incluindo sua história, definição, vantagens, sintaxe, como inserir folhas de estilo, agrupar elementos e algumas propriedades comuns. É dividido em seções tratando de tópicos como histórico, definição, por que usar CSS, vantagens, sintaxe básica, como inserir folhas de estilo externas, internas e inline, agrupando elementos usando classes, ID e elementos como <span> e <div> e por fim exemplificando propriedades como background, line-
html, css e java script - renato araujoorenatoaraujo
Este documento fornece uma breve introdução sobre HTML, CSS e JavaScript. Apresenta os criadores e evolução das linguagens, características principais e boas práticas para seu uso. Sites de referência para aprendizado também são listados no final.
1. O documento discute conceitos fundamentais de CSS, incluindo sintaxe, seletores, propriedades e modelos de caixa.
2. Apresenta onde depositar código CSS, como limpar formatação padrão e como formatar elementos como tabelas e imagens.
3. Fornece exemplos de layouts responsivos, pseudo-classes, cores, fontes e frameworks para CSS.
HTML fornece a estrutura e o significado dos conteúdos da página, CSS estiliza a apresentação da informação, e JavaScript permite interatividade e comportamentos dinâmicos.
Este documento apresenta um curso introdutório sobre desenvolvimento web que inclui 20 aulas sobre HTML, CSS e construção de sites. O curso é ministrado pelo professor Mauro Duarte e inclui três provas para avaliar o conhecimento dos alunos.
O documento discute as vantagens de se usar Java para desenvolvimento web, incluindo sua flexibilidade, orientação a objetos, integração e comunidade. Também apresenta diversas tecnologias como JPA/Hibernate, JSF, EJB e JBoss para construção de aplicações web com Java. Por fim, fornece informações sobre um curso presencial de Java Web que aborda essas tecnologias.
1. O documento descreve as principais propriedades e conceitos do CSS, incluindo como definir estilos, cores, fontes, bordas, margens, preenchimentos e posicionamento;
2. São apresentados exemplos de sintaxe CSS para cada propriedade, mostrando como aplicá-las corretamente;
3. O CSS permite separar a apresentação da estrutura e conteúdo em páginas web, tornando o design independente do HTML.
Vanessa Martinez Tonini apresenta um minicurso sobre CSS com as seguintes informações essenciais:
1) Apresenta sua experiência profissional e objetivos do minicurso de fornecer uma introdução básica à sintaxe e aplicação do CSS.
2) Explica o que é CSS, como funciona a cascata de estilos, e ferramentas para editar arquivos CSS.
3) Demonstra exemplos básicos de como aplicar estilos de fontes, cores, fundos, links, listas e tabelas usando CSS.
O documento resume os principais conceitos de CSS, incluindo: 1) CSS é usado para estilizar elementos HTML, 2) Regras CSS contêm seletores e declarações, 3) Existem diferentes maneiras de inserir CSS em uma página, e 4) O modelo de caixa CSS descreve como os elementos são renderizados.
Slide da disciplina de linguagem de programação para a web do curso técnico em informática do IFPE - Campus Garanhuns. Faz uma apresentação sobre o que é o CSS, por que o utilizamos, suas vantagens, como o utilizamos e algumas de suas propriedades.
O documento apresenta padrões de HTML e CSS para criação de layouts e componentes de forma estruturada e semântica. É apresentado o padrão de grids para definir a estrutura do layout, minidocumentos para encapsular seções de conteúdo de forma autônoma e microsemântica para melhorar a acessibilidade e o significado do código HTML.
O documento discute Cascading Style Sheets (CSS), que definem a aparência de páginas web. CSS permite aplicar estilos personalizados a elementos de forma flexível. Existem três formas de aplicar estilos: local (inline), incorporado (embedded) e externo (linked). A ordem de precedência é local > incorporado > externo.
Hoje em dia quando o assunto é CSS muito se fala em modularização e arquitetura de código. Mas o que de fato é isso? Quais abordagens podemos utilizar para tornar o código do nosso CSS mais organizado?
Nessa apresentação procuro passar uma visão geral das técnicas mais populares, detalhando suas particularidades e a ideologia por traz de cada uma.
Também falo de técnicas mais recentes que abordam o desenvolvimento de CSS de perspectivas diferentes e algumas dicas gerais de como deixar seu código mais flexível a mudanças.
O documento descreve conceitos básicos de HTML e CSS. Em 3 frases:
1) HTML é uma linguagem de marcação usada para criar páginas da web, contendo elementos como tags que formatam o conteúdo.
2) CSS permite separar a estrutura do documento HTML de sua formatação e estilo visual, definindo regras de estilo em folhas externas aplicáveis a vários documentos.
3) O documento fornece exemplos básicos de como usar tags HTML comuns e como criar regras CSS para definir propriedades de est
O documento discute o nascimento e uso do CSS, destacando que: (1) surgiu para permitir a separação entre conteúdo e formatação em páginas web; (2) oferece vantagens como manutenção simplificada e compatibilidade, porém (3) também apresenta desvantagens como incompatibilidade entre navegadores.
O documento discute a importância de padronização e reutilização no desenvolvimento front-end. Apresenta diferentes abordagens como grids, frameworks e metodologias como OOCSS, SMACSS e BEM para criar códigos reutilizáveis. Defende a criação de um arquivo de standards próprio com classes globais ao invés de depender totalmente de bibliotecas externas.
O documento resume os principais conceitos de CSS (Cascading Style Sheets), incluindo sua história, propósito, tipos de vinculação de folhas de estilo, sintaxe básica de regras CSS e diferentes seletores como classe e ID.
Este documento fornece instruções sobre como usar o software Dreamweaver para criar sites. Ele explica como conhecer a interface do Dreamweaver, criar páginas, trabalhar com imagens, hiperlinks, tabelas, formulários e outras funcionalidades.
O documento fornece uma introdução sobre CSS (Cascading Style Sheets), definindo-o como um mecanismo para adicionar estilos a documentos web. Ele explica os componentes básicos de uma regra CSS, como seletores, declarações e propriedades. Além disso, discute como inserir folhas de estilo e a ordem de precedência entre elas, e introduz o modelo de caixa CSS.
O documento descreve novos elementos HTML introduzidos recentemente, incluindo <article>, <aside>, <details> e <dialog>. É escrito por Prof. Pedro Clarindo da Silva Neto e discute cada elemento, suas funções e especificações.
O documento introduz os conceitos básicos de CSS, incluindo sua história, definição, vantagens, sintaxe, como inserir folhas de estilo, agrupar elementos e algumas propriedades comuns. É dividido em seções tratando de tópicos como histórico, definição, por que usar CSS, vantagens, sintaxe básica, como inserir folhas de estilo externas, internas e inline, agrupando elementos usando classes, ID e elementos como <span> e <div> e por fim exemplificando propriedades como background, line-
html, css e java script - renato araujoorenatoaraujo
Este documento fornece uma breve introdução sobre HTML, CSS e JavaScript. Apresenta os criadores e evolução das linguagens, características principais e boas práticas para seu uso. Sites de referência para aprendizado também são listados no final.
1. O documento discute conceitos fundamentais de CSS, incluindo sintaxe, seletores, propriedades e modelos de caixa.
2. Apresenta onde depositar código CSS, como limpar formatação padrão e como formatar elementos como tabelas e imagens.
3. Fornece exemplos de layouts responsivos, pseudo-classes, cores, fontes e frameworks para CSS.
HTML fornece a estrutura e o significado dos conteúdos da página, CSS estiliza a apresentação da informação, e JavaScript permite interatividade e comportamentos dinâmicos.
Este documento apresenta um curso introdutório sobre desenvolvimento web que inclui 20 aulas sobre HTML, CSS e construção de sites. O curso é ministrado pelo professor Mauro Duarte e inclui três provas para avaliar o conhecimento dos alunos.
O documento discute as vantagens de se usar Java para desenvolvimento web, incluindo sua flexibilidade, orientação a objetos, integração e comunidade. Também apresenta diversas tecnologias como JPA/Hibernate, JSF, EJB e JBoss para construção de aplicações web com Java. Por fim, fornece informações sobre um curso presencial de Java Web que aborda essas tecnologias.
O documento apresenta um curso de desenvolvimento web que abordará XHTML, CSS e JavaScript. O curso será ministrado por Luiz Paulo e incluirá introduções às tecnologias, além de discussões sobre o mercado de trabalho e boas práticas de desenvolvimento web.
O documento discute a importância de gerenciar conteúdo de forma eficiente para obter bons resultados na internet. Ele também apresenta o CMS Joomla como uma ferramenta para gerenciar conteúdo sem necessidade de conhecimento técnico e lista extensões e exemplos de sites feitos com Joomla.
Portal Padrão do Governo Federal em CMS Joomlarafaelberlanda
O documento descreve (1) como um grupo de usuários, desenvolvedores e designers de órgãos públicos no Distrito Federal se uniram para desenvolver uma versão do portal padrão do governo federal usando o CMS Joomla, (2) a palestra apresentará a história do projeto, as escolhas realizadas e soluções adotadas para concluí-lo no prazo, e (3) alertará sobre desafios futuros para o uso do Joomla no governo.
O documento discute os principais conceitos da Web 2.0, incluindo sua evolução, tecnologias envolvidas e oportunidades de mercado. Aborda tópicos como a história da web, modelos de desenvolvimento, linguagens como HTML, CSS e JavaScript e padrões como W3C.
Joomla é um sistema de gerenciamento de conteúdo open source que permite criar sites dinâmicos de forma fácil. Ele possui componentes, módulos e templates que adicionam funcionalidades como e-commerce, pesquisa e temas visuais personalizados. Joomla também se destaca por ter traduções para diversos idiomas e manter a estabilidade e segurança por meio de atualizações frequentes.
O documento discute os padrões W3C para desenvolvimento web, incluindo seu objetivo de tornar a web acessível para todos através de qualquer dispositivo, bem como a história da evolução das tecnologias web como HTML e CSS.
O documento apresenta informações sobre um curso de desenvolvimento web ministrado pelo professor Rodrigo Santa Maria, incluindo sua formação acadêmica, experiência profissional e objetivos do curso.
O documento discute conceitos básicos de HTML, incluindo como personalizar elementos usando ID e classe, semântica HTML5, CSS para estilização, e exemplos de navegação.
O documento discute a linguagem HTML5, incluindo suas principais características e como criar um site simples usando HTML e CSS. O documento fornece instruções passo a passo sobre estrutura básica de HTML, elementos semânticos do HTML5, estilização com CSS e desafio de criar um site de artista com imagem, lista de músicas e links.
O documento fornece informações sobre HTML/CSS, incluindo:
1) Estrutura básica de um documento HTML com tags head, title e body.
2) Exemplos de tags importantes como table, link e div.
3) Diferença entre HTML para estruturar conteúdo e CSS para formatá-lo.
4) Benefícios do uso de CSS como controle de layout e aplicação de estilos.
O documento apresenta uma introdução sobre CSS e JavaScript para desenvolvimento de aplicações web. Resume os principais tópicos de CSS como separação de estilo e conteúdo, tipos de folhas de estilo e sintaxe básica. Também resume conceitos iniciais de JavaScript como linguagem do lado do cliente e interação com HTML.
O documento introduz os conceitos de Web Standards, CSS e Tableless. Resume que CSS é uma linguagem de definição de estilos usada para descrever a apresentação de documentos web e separar o conteúdo da apresentação. Tableless é uma filosofia que usa as tags HTML para seu significado semântico original.
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosneyfranciosney
O documento apresenta uma introdução sobre HTML, CSS e Bootstrap. Discute as principais tags e atributos do HTML, além de introduzir CSS e JavaScript como linguagens de estilo e programação usadas junto com HTML na construção de páginas web. Também resume os principais conceitos do framework Bootstrap.
O documento discute o desenvolvimento de sites web utilizando os padrões XHTML e CSS. Aborda a história da web, os padrões web, as diferenças entre HTML e XHTML, e como CSS pode ser usado para separar a apresentação do conteúdo em sites web.
O documento descreve conceitos básicos de HTML e CSS. Em 3 frases:
1) HTML é uma linguagem de marcação usada para criar páginas da web, contendo elementos como tags que definem o formato.
2) CSS permite separar a estrutura do documento HTML de sua formatação e estilo, definidos em folhas de estilo externas para facilitar manutenção.
3) O documento explica elementos básicos de HTML como tags, hiperlinks, imagens e tabelas, e conceitos de CSS como seletores, propriedades e valores
O documento apresenta uma aula sobre desenvolvimento web ministrada pelo professor Breno Leonardo. Ele introduz a linguagem HTML, sua história e as principais etiquetas para estruturar páginas web, incluindo o cabeçalho, corpo e hiperligações.
O documento discute semântica em HTML, introduzindo tags como header, section, aside e footer para estruturar o conteúdo da página de forma significativa. Também explica a diferença entre div e as novas tags, e como CSS é usado para estilizar a apresentação sem afetar a estrutura do conteúdo.
Padrões Web são normas estabelecidas pela W3C para construção e interpretação de conteúdo na web. Os principais padrões são XHTML, CSS, XML e DOM. Seguir padrões traz benefícios como manutenção facilitada de código, baixo custo, velocidade e acessibilidade em qualquer dispositivo.
Técnico de Informática de SistemasScripts CGI e Folhas de EstiloElsaValada
O documento discute scripts CGI e folhas de estilo. Explica que scripts CGI permitem criar páginas web dinâmicas através de pequenos programas que processam parâmetros passados por navegadores. Também descreve como folhas de estilo CSS controlam aspectos visuais de páginas web e podem ser aplicadas de três formas diferentes.
O documento descreve os conceitos básicos de HTML, incluindo sua criação por Tim Berners-Lee para permitir a inserção de conteúdo e estrutura básica na web. Explica como HTML, CSS e JavaScript trabalham juntos para criar sites modernos, com HTML fornecendo a estrutura, CSS o estilo e JavaScript a interatividade.
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Cristofer Sousa
Este documento apresenta um workshop sobre fundamentos de interfaces e desenvolvimento web. O workshop é dividido em 15 módulos que cobrem tópicos como HTML, CSS, semântica, estrutura básica de páginas, formatação de texto, imagens, links, listas e posicionamento. O objetivo é ensinar as bases de HTML5 e CSS3 para criação de sites e páginas web.
CSS (Cascading Style Sheets ou Folhas de Estilo em Cascata) é uma linguagem de estilo usada para descrever a apresentação de documentos HTML e XML, separando seu conteúdo da sua apresentação visual. CSS permite definir estilos para elementos como fontes, cores, espaçamentos e layout de páginas da web de forma a melhorar a acessibilidade, manutenção e separação entre conteúdo e visualização.
CSS (Cascading Style Sheets) são padrões web que separam a estrutura (HTML) da forma (CSS), resolvendo problemas de atualização e manipulação de arquivos HTML. CSS oferece vantagens como separação de estrutura e forma, facilidade de codificação e manutenção, sem necessidade de plugins. Existem três métodos de especificação de CSS: inline, embedded e linked.
CSS é uma folha de estilo que define a apresentação de páginas da web. Ele separa o formato e conteúdo de um documento e define como elementos serão exibidos. CSS pode ser adicionado de forma externa, embutida ou inline e usa seletores como elemento, ID ou classe para estilizar partes específicas da página. CSS suporta várias unidades de medida como pixels, em, porcentagem e outras.
1. O documento apresenta uma introdução ao HTML, CSS e JavaScript, incluindo a estrutura básica de um arquivo HTML, formatação de texto e elementos como cabeçalhos e separadores.
2. É fornecida uma explicação detalhada sobre a estrutura de um arquivo HTML, incluindo as tags <html>, <head> e <body>, e exemplos de como formatar texto.
3. O documento também discute a inserção e formatação de texto em HTML, como cores, fontes, tamanhos e blocos de texto, assim como diferentes níveis de cabeç
O documento discute conceitos de CSS como incorporação em HTML, seletores, propriedades e boas práticas. Aborda tags como <link> e <style> para adicionar folhas de estilo, e o uso de IDs, classes e estilos inline. Também menciona validação CSS e problemas de compatibilidade entre navegadores.
O documento resume a história da World Wide Web e dos padrões web como HTML, XHTML e CSS. Explica as diferenças entre HTML e XHTML e os benefícios da semântica e validação. Também discute como vincular folhas de estilo e melhorar a acessibilidade.
Semelhante a Desenvolvimento Web 03 - David Arty - SENAC (20)
Wordpress como ferramenta de marketing digital David Arty
O WordPress pode ser uma poderosa ferramenta de marketing digital através de 7 estratégias principais: 1) uso do blog como mídia independente, 2) criação de landing pages, 3) uso de métricas e testes A/B, 4) implementação de e-mail marketing, 5) integração com WooCommerce, 6) criação de cursos online, 7) facilidade de uso e suporte da grande comunidade WordPress.
Este documento fornece um modelo de briefing para o desenvolvimento de um site, abordando tópicos como descrição da empresa, público-alvo, concorrentes, visual, funcionalidades, conteúdo, objetivos, manutenção e marketing digital. O objetivo é coletar informações para elaborar um site que atenda às necessidades e objetivos do cliente.
O documento discute formas como a indústria e residências têm otimizado o uso da água no Brasil. A indústria vem investindo em tecnologia para reaproveitar a água nos processos produtivos, reduzindo o consumo em mais de 50% desde a década de 1970. Da mesma forma, programas incentivam residências a adotarem hábitos mais sustentáveis, como torneiras e vasos sanitários econômicos, para diminuir o desperdício.
La Unión Europea ha acordado un paquete de sanciones contra Rusia por su invasión de Ucrania. Las sanciones incluyen restricciones a las importaciones de productos rusos de alta tecnología y a las exportaciones de bienes de lujo a Rusia. Además, se congelarán los activos de varios oligarcas rusos y se prohibirá el acceso de los bancos rusos a los mercados financieros de la UE.
Este documento descreve um jogo chamado "A Lenda do Corpo Seco" que está sendo desenvolvido como um projeto escolar. O jogo é do gênero ação/aventura e seu objetivo é contar a história de um personagem chamado Endi que precisa derrotar uma criatura chamada Corpo Seco. O documento detalha os conceitos do jogo, mecânicas, enredo, personagens, níveis e escopo do projeto.
Este manual fornece diretrizes sobre o uso da marca e identidade visual do Senac, incluindo seu conceito, elementos gráficos, cores institucionais, aplicações permitidas e proibidas. É apresentado o desenho da marca, sua malha de construção, assinaturas, dimensões mínimas e área de proteção. Instruções sobre o uso em diferentes suportes como impressão, digital e aplicações especiais como padronagens também são detalhadas.
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
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.
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:
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)
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