Html - CSS

HTML & CSS ETEPAM

ANDRÉ MELO

HTML & CSS

Conceitos e fundamentos

HTML & CSS ETEPAM

ANDRÉ MELO

HTML & CSS

Conceitos e fundamentos

HTML & CSS ETEPAMWeb Standards

• Web Standards (Padrões Web) é um termo geral que designa um conjunto de recomendações e especificações técnicas que norteiam o desenvolvimento para a World Wide Web.

• O termo também adquiriu um significado mais extenso sendo associado a um conjunto de boas práticas ou uma filosofia de desenvolvimento para a web que segue o mais fielmente possível as especificações propostas.

HTML & CSS ETEPAMFazem parte dos Web Standards:

• Recomendações publicadas pelo W3C.

• Padrões publicados pela ECMA International (ECMA).

• Padrões Unicode e vários Unicode Technical Reports (UTRs) publicados pelo Unicode Consortium.

HTML & CSS ETEPAMNa prática o que temos?

• Recomendações para linguagem de marcação (markup languages) como HTML, XML, XHTML, SVG and XForms, do W3C.

• Recomendações para folhas de estilo (stylesheets) como o CSS, também do W3C.

• Padrões para ECMAscript como o JavaScript, da ECMA International.

• Recomendações para o Document Object Model (DOM), do W3C.

HTML & CSS ETEPAMSemantic Web:

• Semantic Web (Web Semântica) é uma iniciativa liderada pelo W3C que visa prover um framework para reuso e compartilhamento de dados relevantes e significativos através de diversas aplicações.

• A iniciativa baseia-se no conceito que há uma grande massa de dados que usamos todos os dias e que ainda não está representada de maneira a proporcionar integracação e interoperabilidade. Ou seja, vários aplicativos possuem os seus dados em formatos proprietários que não podem ser compartilhados com outros aplicativos.

• A Web Semântica trata justamente de prover formatos de dados de modo a proporcionar integração, compartilhamento e combinação entre diversas aplicações. Além disso, procura criar formatos que relacionem, através da semântica, dados de computador com objetos e ações reais de modo a proporcionar o entendimento tanto pelas máquinas quanto pelos humanos.

HTML & CSS ETEPAMTableless:

• É um termo comumente utilizado para denominar uma metodologia de desenvolvimento que segue os Web Standards. A tradução de Tableless para português seria algo como "sem tabelas". Entretanto, isso não quer dizer que as tabelas não devam nunca ser usadas, mas sim deixar de ser usadas indiscriminadamente como instrumento estruturador de layouts. As tabelas HTML foram designadas para dispor dados tabulares e seu uso deve ser fiel a esse propósito.

• A metodologia defende jutamente que as tabelas utilizadas para estruturar os layouts, recurso largamente utilizado pelos web designers há tempos atrás, sejam substituídas por tags estruturais ou semânticas e que a formatação do layout seja colocada em uma camada separada sob responsabilidade do CSS (Cascading Style Sheets).

HTML & CSS ETEPAMDesenvolvimento em camadas:

10 a 20%80 a 90%

HTML & CSS ETEPAM

ANDRÉ MELO

HTML & CSS

Preparando o ambiente

HTML & CSS ETEPAMPara início de trabalho:

• Servidor remoto ou local para hospedagem de arquivos;

• Editor(s) HTML;• Diferentes tipos de browsers

instalados;• Ferramentas on-line

HTML & CSS ETEPAMServidor:

• Apache + banco de dados Mysql

HTML & CSS ETEPAMXampp:







HTML & CSS ETEPAMHtdocs:

HTML & CSS ETEPAMFirefox como ferramenta de desenvolvimento:

• Complementos:– Colorzilla;– Web Developer– Firebug;– Yslow;

• Onde encontrar?– http://addons.mozilla.org

HTML & CSS ETEPAMHTML vs. XHTML:

• todas as tags devem ser escritas em letras minúsculas;

• os elementos (tags) devem estar convenientemente aninhados;

• os documentos devem ser bem formados;

• o uso de tags de fechamento é obrigatório;

• elementos vazios devem ser fechados;

• diferenças para os atributos.

HTML & CSS ETEPAMDoctype

• A Definição do tipo de documento (Document Type Definitions DTD) especifica qual é a sintaxe SGML usada no documento. A DTD é usada pelas aplicações SGML ( tais como HTML ) para identificar as regras que se aplicam a linguagem de marcação usada no documento bem como o conjunto de elementos e entidades válidas naquela linguagem. Assim uma DTD para um documento XHTML descreve com precisão a sintaxe e a gramática da linguagem de marcação XHTML.

• De acordo com for declarado ou não declarado como DOCTYPE, o navegador irá definir como interpretará a sua página.

• O DOCTYPE deve ser sempre a primeira declaração em um documento web, salvo se houver XML Prolog.

HTML & CSS ETEPAMOs tipos de Doctype

• STRICT– Esta é a mais rígida das declarações. Os documentos

XHTML no modo Strict não admitem qualquer item de formatação dentro dos elementos e nem elementos em desuso "deprecated" segundo as recomendações do W3C. São indicados para uso com folhas de estilo em cascata, com marcação totalmente independente da apresentação.

• TRANSITIONAL– Esta declaração permite uma maior flexibilidade e é

indicada para documentos que ainda utilizem elementos em desuso ("deprecated"), regras de apresentação embutidas em tags e também para documentos destinados a exibição em browsers sem suporte para CSS. Não admite qualquer tipo de marcação para frames.

• FRAMESET– Esta declaração permite tudo da declaração

transational e mais os elementos especificos para frames.

HTML & CSS ETEPAMElementos e atributos

• Elementos são as Tags HTML e os atributos são inseridos nas tags

HTML & CSS ETEPAMCSS

• Por que usar CSS?– Além de ser simples e fácil de aprender, o

CSS é muito poderoso no controle da apresentação do conteúdo de uma HTML, reduz o tempo de carga das páginas, as alterações de layout podem ser feitas sem a necessidade de se alterar o HTML, da mesma forma com o HTML. O CSS também é responsável pela diminuição do consumo de banda por parte dos sites. CSS é portável para diferentes tipos de mídia como screen, pockets, print, handheld, web tv, braille, projection etc. CSS é uma linguagem totalmente voltada a acessibilidade web.


• Inserir CSS no HTML– Inline– Incorporado– Externo


• Sintaxeseletor{

Propriedade:valor;}

•Cada linha da propriedade termina com ";" ;•O uso do ";" é facultativo na última linha;•São case-sensitive;•Os seletores podem ser escritos com carcteres alfa-numéricos, underscore e hífen;•Deve-se evitar palavras acentuadas, iniciar com hífen, underscore e números os seletores CSS


• Tipos de seletor– Agrupamento de seletor;– Seletores de identificação;– Seletores de classe;– Seletores contextual;– Seletores de atributo;– Seletor universal;– Seletores filho;– Seletores irmãos adjacentes


• Pseudos– Pseudo classes;– Pseudo-classe":first-child “;– Pseudo-classe":focus “;– Pseudo-classe":lang “;– Pseudo-elemento":first-line “;– Pseudo-elemento":first-letter “;– Pseudo-elementos":after e

before “;


• Efeito cascata: – O efeito cascata é um dos artificios mais

poderosos oferecidos pelo CSS, pois permite que propriedades sejam aplicadas a elementos que já possuem uma propriedade, dando um grau de importância maior a propriedade aplicada no mesmo elemento.

– Ordem de prioridade:• Folhas de estilo do usuário;• Folhas de estilo inline;• Folhas de estilo incorporada;• Folhas de estilo externas;• Folhas de estilo nativas


• Herança: – São as propriedades declaradas

para um elemento e que são herdadas para todos os elementos filhos contidos dentro do elemento.Ordem de prioridade:

• Propriedades identicas:– 1. A ordem define a prioridade para as

declarações de CSS externo, sendo o último com maior grau de prioridade.

– 2. Na declaração de CSS externo e incorporado, terá prioridade o último que foi declarado.

– 3. Em declarações que envolvem CSS externo, incorporado e inline. O CSS inline terá prioridade.


• Cor: – Hexadecimal

• h1{color: #cccccc;}– Nome da cor

• h2{color:red;}– RGB

• h1{color: rgb(255,0,0);}


• Hacks: – Underscore Property Hack;– Star Property Hack;– Conditional Comments


• Box Model: – Box Model (Modelo de Caixa)

é um modelo que determina como os elementos em bloco (block) relacionam suas dimensões com as dimensões dos elementos auxiliares contidos nele.


• Box Model: – Box Model (Modelo de Caixa)

é um modelo que determina como os elementos em bloco (block) relacionam suas dimensões com as dimensões dos elementos auxiliares contidos nele.


• Box Model: – width: largura do elemento;– height: altura do elemento;– padding: enchimento,

distância entre a borda do elemento e seu conteúdo;

– border: borda do elemento;– margin: margem, distância

entre o elemento e outro;


• Tipos de Box Model:– Existem dois tipos de Box Model

que possuem formas diferentes de interpretar as relações dimensionais entre os elementos:•Strict (Padrão): modo padrão que

pode ser visto no Firefox e em outros browsers Gecko-Based.

•Quirks (Não-padrão): modo padrão que pode ser visto no Internet Explorer em modo quirks.


• Box Model Strict:– No Box Model Strict, dada uma

largura e uma altura, todas as dimensões dos elementos auxiliares são somadas a elas, sendo a largura e a altura totais sempre maiores ou iguais que a largura e altura do elemento. A largura e a altura do elemento representam, por sua vez, a largura e altura do conteúdo.


• Box Model Strict:


• Box Model Quirks:– No Box Model Quirks , dada

uma largura, o elemento padding nas arestas RIGHT e LEFT é subtraído da largura total, gerando uma largura de conteúdo menor ou igual a largura total.


• Box Model Quirks:


• Propriedade display– display:inline;– display:block;– display:none;


• Propriedades float e clear– Float:

• float:none;• float:left;• float:right;

– Clear:• clear:both;• clear:left;• clear:right;


• Propriedade overflow– overflow:visible;– overflow:auto;– overflow:hidden;


• Fixfloat– Quando um elemento não possue

altura definida, isto é, sem propriedade height, e possue elementos floated dentro dele como no caso de um layout com colunas, sua altura é interpretada como nula se a propriedade overflow não for especificada (sendo assumido o valor padrão overflow:visible;). Num layout padrão com Header, Middle e Footer, caso o Middle possua colunas (elementos floated), isso significa ver o Footer encostando no Header, como se o Middle não existisse.


• Fixfloat– Para resolver esse problema, é

aplicado um conceito conhecido como fixfloat. Uma das técnicas consiste em adicionar propriedade overflow:auto; no elemento pai.


• Fixfloat– Isso resolve o problema para quase

todos os navegadores incluindo o IE7. Infelizmente o IE6, não interpreta o overflow corretamente. No IE6, o float evitado adicionando-se uma altura qualquer que seja ao elemento pai como height:1px; e setando o overflow:visible; novamente. Então para se aplicar um fixfloat eficaz tanto no IE6 como nos outros browsers.


• Propriedade position– position:static; (default);– position:relative;– position:absolute


• Media Types


• Layouts Fixos, Relativos, Fluidos Elásticos e Hybridos


• CSS Reset


• Text indent


• Image replacement


• Sprite

Documents

Html - CSS