WySiWYg - WordPress.com

what you see is what you get...
WySiWYg
sites são criados com o uso de editores (X)HTML...
um editor de texto simples...
um editor de imagens de rastreio...
um programa para visualizar sites na internet...
ferramentas...
WeBSitEs
eXtensible Hyper Text Markup Language – recomendação
tradução das recomendações w3c http://www.maujor.com/w3c/xhtml10_2ed.html
“(X)HTML para estruturar e CSS para apresentar”
W3C
todas as TAGs devem ser escritas com letras minúsculas;
<DIV><P>Aqui um texto</P></DIV> ERRADO
<div><p>Aqui um texto</p></div> CERTO
TAGs devem estar convenientemente aninhadas;
<div><em><p>Aqui um texto</em></p></div> ERRADO
<div><p><em>Aqui um texto</em></p></div> CERTO
as principais diferenças...
/ HTML
XHTML =
o uso de TAG de fechamento é obrigatório;
<p>Um parágrafo. ERRADO
<li>Um ítem de lista. ERRADO
<p>Um parágrafo. </p> CERTO
<li>Um ítem de lista. </li> CERTO
as principais diferenças...
/ HTML
XHTML =
elementos vazios devem ser fechados;
<br>
<hr>
<img src=“imagem.gif” alt=“minha imagem”> ERRADO
<br></br>
<hr></hr>
<img src=“imagem.gif” alt=“minha imagem”></img> CERTO
<br />
<hr />
<img src=“imagem.gif” alt=“minha imagem” /> CERTO
as principais diferenças...
/ HTML
XHTML =
diferença na sintaxe dos atributos;
todos os atributos devem ser escritos com letras minúsculas!
<td ROWSPAN=“3”> ERRADO
<td rowspan=“3”> CERTO
as principais diferenças...
/ HTML
XHTML =
regra CSS
seletor { propriedade: valor }
declaração
seletor é o alvo da regra CSS; é a TAG do elemento da
marcação que define com precisão em qual lugar da marcação
será aplicada a regra CSS.
declaração determina os parâmetros de estilização.
propriedade define qual será a característica do elemento a ser estilizada.
valor é a quantificação ou qualificação da propriedade.
Cascading Style Sheet – Folhas de Estilo em Cascata
CSS
p{
color: #000;
background-color: #ff0;
font-style: italic;
text-aligh: right;
}
ou
p { color: #000; background-color: #ff0; font-style:italic; text-aligh: right}
o “;” é facultativo no caso de propriedade única
ou após a declaração da última propriedade no
caso de mais de uma!
CSS
com...
CSS
sem...
CSS
exercício 1
CSS
exercício 2
CSS
exercício 3
CSS
exercício 4
CSS
exercício 5
CSS