Padrões de HTML e CSS

•

UNIVESP

Jeniffer Cristina Teles Alves Baptista Mendes

23/06/2024

Prévia do material em texto

LW1 
Seguindo Padrões – HTML 
e CSS 
PROF. ANDREZA S. AREÃO 
Relembrando 
DTD 
DTD (Document Type Definition) – Definição de tipo de 
Documento – para identificar as regras que se aplicam a 
linguagem de marcação usadas no documento, bem como o 
conjunto de elementos e entidades validas naquela 
linguagem; 
Uma DTD para um documento XHTML descreve com 
precisão a sintaxe e a gramática da linguagem de marcação 
XHML; 
Esquema é o conjunto de regras definidas na DTD; 
 
DTD HTML 
O HTML 4.01 especifica três DTDs, de maneira que os autores deverão incluir nos seus 
documentos uma das seguintes declarações do tipo de documento, um pouco mais abaixo 
especificadas. As DTD distiguem-se pelos elementos que suportam. 
A DTD HTML 4.01 Strict inclui todos os elementos e atributes que não foram deprecados ou que 
não aparecem nos documentos contendo conjuntos de molduras ("framesets"). Para os 
documentos que usem este tipo de DTD, utilize esta declaração do tipo de documento: 
◦ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
A DTD HTML 4.01 Transitional inclui todos os pormenores da DTD Estrita mais os elementos e 
atributos deprecados (a maioria dos quais se relacionam com a apresentação visual de um 
documento). Para os documentos que se sirvam desta DTD, utilize esta declaração do tipo de 
documento: 
◦ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
A DTD HTML 4.01 Frameset contendo Molduras inclui tudo aquilo que a DTD Transitiva inclui 
mais o conjunto de molduras ou "frames". Para os documentos que usem este tipo de DTD, 
utilize esta declaração do tipo de documento: 
◦ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd"> 
 
DTD XHTML 
Para facilitar a transação ela apresenta três classificações; 
◦ XHTML-1.0-Transitional – permite uma maior flexibilidade e é indicada para 
documentos que ainda utilizem elementos em desuso, regras de apresentação 
embutidas em tags e também para documentos destinados a exibição em browsers 
sem suporte para CSS. Não permite qualquer tipo de marcação para frames. 
◦ <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EM” “http://www.w3.org/TR/Xhtml1/DTD/xhtml1-
transitional.dtd”> 
◦ XHTML-1.0-Strict – é 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, 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; 
◦ <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EM” “http://www.w3.org/TR/Xhtml1/DTD/xhtml1-
strict.dtd”> 
◦ XHTML-1.0-Frameset – permite tudo da declaração TRANSITIONAL e mais os 
elementos específicos para frames. 
◦ <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EM” “http://www.w3.org/TR/Xhtml1/DTD/xhtml1-
frameset.dtd”> 
Padrões web 
Web Standards - Definição 
Web Standards é um conjunto de normas, diretrizes, recomendações, 
notas, artigos, tutoriais e afins de caráter técnico, produzidos pelo W3C e 
destinados a orientar fabricantes, desenvolvedores e projetistas para o 
uso de práticas que possibilitem a criação de uma Web acessível a todos, 
independentemente dos dispositivos usados ou de suas necessidades 
especiais. 
Por que usar padrões? 
• manutenção mais fácil 
• tamanho do arquivo menor (economia de banda e velocidade no 
carregamento) 
• maior acessibilidade para o usuário 
• compatibilidade com diferentes navegadores 
Tableless - Definição 
Tableless é uma filosofia de desenvolvimento client-side que prega a 
abordagem do HTML em seu significado semântico. 
 
As tags HTML passam a ser usadas para aquilo cujo qual foram 
originalmente designadas. 
Tableless 
Grande parte dos desenvolvedores hoje, constroem seus layouts 
usando tabelas, que não é a tag semanticamente correta para 
construção de layouts. 
 
Por conta disso começaram a chamar o desenvolvimento 
semanticamente coerente de "Tableless". 
CSS 
O que é CSS? 
CSS é a sigla para Cascading Style Sheets - folhas de estilo em cascata 
 
É uma linguagem de definição de estilos usada para descrever a 
apresentação/formatação de um documento escrito em uma linguagem 
de marcação. Sua aplicação mais comum é definir estilos de paginas web 
escritas em HTML e XHTML. 
 
Os estilos são normalmente armazenados em Folhas de Estilos (Style 
Sheets); 
 
Salvar os estilos separados do HTML economiza trabalho e facilita a 
reutilização. 
 
O padrão do CSS é mantido pelo World Wide Web Consortium (W3C) 
http://www.w3.org/Style/CSS/ 
 
Por que CSS? 
Separar a marcação HTML da apresentação do site. 
 
Lembrando que HTML (XHTML) destina-se unicamente a estruturar e 
marcar o conteúdo, ficando a cargo das CSS toda a responsabilidade 
pelo visual do documento. 
◦ XHTML marca e estrutura textos, cabeçalhos, parágrafos, links, botões, 
formulários, imagens e demais elementos da página. 
◦ CSS define cores, posicionamento na tela, estilos de linhas, bordas e tudo 
o mais relacionado à apresentação. 
Vantagens 
• Economia de tempo de criação e manutenção 
• Maior eficiência no gerenciamento do layout 
• Otimização do código – os navegadores carregam as páginas mais 
rápido 
• Possibilita a separação entre conteúdo e formatação – 
interoperabilidade 
• Amigável aos sistemas de busca e indexação 
• Facilita o cumprimento de requisitos de acessibilidade 
A regra CSS e sua sintaxe 
Uma regra CSS é uma declaração que segue uma sintaxe própria e que 
define como será aplicado estilo a um ou mais elementos HTML. 
 
Um conjunto de regras CSS formam uma Folha de Estilos. 
 
Sintaxe 
Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: 
um seletor, uma propriedade e um valor e tem a sintaxe conforme 
mostrado abaixo: 
◦ seletor {propriedade: valor;} 
◦ body {color: black;} 
 
Seletor: genericamente, é o elemento HTML identificado por sua tag, ou 
uma classe, ou uma ID, ou etc., 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...) 
 
Sintaxe 
Valor com várias palavras: Usar aspas duplas 
p {font-family: "sans serif"} 
 
Especificar mais de uma propriedade: Separar 
com ponto e virgula 
p {text align:center;color:red} 
 
Agrupar seletores: Separar cada seletor com virgula 
h1,h2,h3,h4,h5,h6{ 
 color: green 
} 
 
 
Classe Seletor 
Com a classe seletor diferentes estilos podem ser definidos para o mesmo 
tag HTML. 
Definição: 
p.right {text-align: right} 
p.center {text-align: center} 
 
Utilização: 
<p class="right"> 
Este parágrafo é alinhado a direita. 
</p> 
 
<p class="center"> 
Este parágrafo é alinhado a esquerda. 
</p> 
 
Comentários em CSS 
Os comentários em CSS começam com /* e terminam com */ 
/* Este é um comentário */ 
p { 
text-align: center; 
/* Este é outro comentário */ 
color: black; 
font-family: arial 
} 
 
Como Inserir um Estilo CSS 
Existe três formas de se inserir um estilo no documento HTML: 
externa, interna e na linha; 
Externa 
<head> 
<link rel="stylesheet" type="text/css" href=“meuEstilo.css" /> 
</head> 
 
Interna 
<head> 
<style type="text/css"> 
hr {color: sienna} 
p {margin-left: 20px} 
body {background-image: url("images/back40.gif")} 
</style> 
</head> 
 
Em Linha 
<p style="color: sienna; margin-left: 20px"> 
Texto do parágrafo… 
</p> 
 
Revisão 
CSS – Folha de Estilos em Cascata; 
Regra é uma unidade básica de uma folha de estilo; 
Formato de uma regra: 
 
seletor{ propriedade: valor;} 
Agrupamento de seletores 
É possível aplicar a mesma regra CSS a vários seletores: 
h1{color:red;} 
h2{color: red;} 
p{color: red;} 
 
É agrupado como: 
h1, h2, p{color: red;} 
 
Tipos de seletores 
Seletor classe: são associados ao atributo class da XHTML; 
CSS: 
.colorido{color: green;} 
 
XHTML: 
<h1 class=‘colorido’>Título nível 1</h1> 
<p class=‘colorido’>Paragráfo</p> 
 
Tipos de seletores 
CSS: 
p.cor_um{color: green;} 
p.cor_dois{color: blue;} 
 
XHTML: 
<p class=‘cor_um’>Paragráfo</p> 
<p class=‘cor_dois’>Paragráfo</p> 
 
Tipos de seletores 
Seletor id: é semelhante ao seletor classe. 
 
CSS: 
#tcolorido{color: yellow;} 
 
XHTML: 
<h2 id=‘tcolorido’>Título nível 2</h2> 
<h1 id=‘tcolorido’>Título nível 1</h1> 
 
Tipos de seletores 
O seletor id possui três diferenças em relação ao seletor classe: 
◦ Deve ser aplicado a um único elemento dentro do documento; 
◦ Tem a característica de identificar exclusivamente um elemento; 
◦ A especificidade de um seletor id é maior do que a de um seletor classe. 
Unidades CSS 
Unidades de medida absolutas: não dependem de um valor de 
referência. 
Abreviatura Unidade 
in Polegada. (2,54 mm) 
cm Centímetro. 
mm Milímetro. 
pt Ponto. Medida tipográfica. 1pt = 1/72in 
pc Paica. Medida tipográfica. 1pc = 12pt 
Unidades CSS 
Unidades de medida relativas: tomam como base um valor de referência 
anteriormente definido. 
Abreviatura Unidade 
em 1em é igual ao tamanho de fonte definido para o 
elemento em questão. 
ex 1ex é igual a altura da letra x da fonte definida 
para o elemento em questão. 
px Pixel. 
Unidades CSS 
Porcentagem: são calculadas em relação a um valor preexistente, em geral uma 
unidade de medida. 
CSS: 
p{font-size: 30px;} 
span{font-size: 200%;} 
 
XHTML: 
<p>O paragráfo tem uma <span>grande</span> palavra</p> 
Estilização de Textos 
Fontes seguras: conjunto de 9 fontes que são instaladas pelo sistema 
operacional. 
◦ Arial; 
◦ Arial Black; 
◦ Comic Sans MS; 
◦ Courier New; 
◦ Georgia; 
◦ Impact; 
◦ Times New Roman; 
◦ Trebuchet MS; 
◦ Verdana. 
 
Estilização de Textos 
Fontes genéricas: definição de 5 fontes, pelo W3C, que servem de 
última opção caso a seleção de fontes falhe. 
◦ Família serif; 
◦ Família sans-serif; 
◦ Família cursive; 
◦ Família fantasy; 
◦ Família monospace. 
 
Estilização de Textos 
Propriedades de fonte: 
◦ font-family: define uma lista de fontes; 
◦ font-style: normal, italic, oblique; 
◦ font-variant: normal, small-caps; 
◦ font-weight: normal, bold, bolder, lighter, valores (100 a 900); 
◦ font-size: define o tamanho da fonte; 
Estilização de Textos 
Tamanho absoluto de fontes: 
◦ xx-small; 
◦ x-small; 
◦ small; 
◦ medium; 
◦ large; 
◦ x-large; 
◦ xx-large. 
Estilização de Textos 
Propriedades de texto: 
◦ text-indent: permite recuo na primeira linha; 
◦ text-align: alinha o texto (right, center, justify); 
◦ text-decoration: underline, overline,line-through; 
◦ letter-spacing: espaçamento entre caracteres; 
◦ text-transform: controla a capitalização (capitalize uppercase, lowercase, 
none); 
Cores e Background 
Cor hexadecimal: define a cor por 6 números hexadecimais precedidos por #. 
 
p{color: #FF0000} 
 
#RRGGBB: 2 hexadecimais para vermelho, 2 hexadecimais para verde, 2 
hexadecimais para azul. 
Cores e Background 
notação rgb: utilizada para definir a cor por uma lista de 3 valores. 
p{color: rgb(100, 200, 300);} 
p{color: rgb(10%, 30%, 75%);} 
 
Não é permitido utilizar porcentagem e valores inteiros juntos. 
Cores e Background 
Cor por palavra-chave: 
 
aqua maroon teal 
black navy white 
blue olive yellow 
fucshia orange 
gray purple 
green red 
lime silver 
Cores e Background 
Propriedades: 
◦ color: define a cor de primeiro plano do elemento; 
◦ background-color: define a cor de fundo do elemento; 
◦ background-image: define uma imagem de fundo. Usa url(arquivo); 
◦ background-repeat: controla a repetição da imagem (repeat-x, repeat-y, 
repeat, no-repeat); 
◦ background-attachment: define se ficará fixa ou se rolará na tela (scroll, 
fixed) 
Referências Bibliográficas 
SILVA, M. S. Construindo sites com CSS e (X)HTML: Sites controlados por folhas de estilo 
em cascata. São Paulo: Novatec Editora. 2008. 
 
SILVA, M. S. CSS para WebDesign: Tutoriais e pensamentos. Disponível em: 
<http://www.maujor.com>. Último acesso em 20 de Outubro de 2008. 
 
________. CSS Zen Garden: The Beauty of CSS Design. Disponível em: 
<http://www.csszengarden.com>. Último acesso em 20 de Outubro de 2008. 
 
Alves, Gabriel Marcelino. Notas de Aula. 2008