html e css

Aula 02

A. Formatação de texto

Abaixo, algumas tags de formatação de texto:

H1 - H6 (hierarquia de títulos)
P (parágrafo)
STRONG (negrito)
EM (itálico)
FONT (fonte tipográfica)

Assim que você começar a usá-las, verá que elas têm muitas limitações. Não é possível mudar uma fonte ou colocar cor em uma página. Vejamos um exemplo:

<h3>Delenda Cartago!</h3>

<p> Ut gravida iaculis urna. Phasellus sapien pede, porttitor quis, 
<strong>adipiscing</strong> interdum, sagittis et, massa. Ut velit mauris, 
<em>porta eget</em>,  vulputate vel, euismod ut, est.</p>
<p>Vivamus aliquet. Vestibulum elit diam, accumsan 
ullamcorper,  tristique at, consequat tempor, est. Duis odio felis, 
bibendum a,  mattis eget, pulvinar a, arcu. Curabitur volutpat, neque 
eget ultricies  placerat, urna tellus tristique leo, sit amet risus a  
lectus. Aliquam erat volutpat. </p>

B. CSS

A principal função do CSS é separar conteúdo de apresentação. Enquanto o conteúdo fica nos arquivos HTML, a apresentação é determinada pelos arquivos CSS.

É possível, portanto, ter mais de uma visualização para o mesmo site... Vide o CSS Zen Garden! E depois a versão nacional, feita pelo Maujor.

Quais as vantagens de usar CSS?

Se bem aplicado, o uso do CSS implica numa formatação uniforme de suas páginas. Não haverá a possibilidade de um título de uma página se apresentar diferente de outro em outra página.
Seus arquivos ficarão menores, seu custo de hospedagem poderá cair, e seu site será carregado mais rápido.
Será fácil alterar layouts de sites complexos, com muitas páginas, pois o controle da visualização destas páginas será centralizado nos estilos CSS.
O CSS facilita a aplicação de conceitos de acessibilidade ao site. Isso não só beneficia usuários com alguma restrição motora, visual ou auditiva, mas também o acesso ao site através de celulares e outros dispositivos.

Estas vantagens, na verdade, se traduzem em outras características colaterais, que otmizam o código, o desempenho do site (melhoram a indexação por mecanismos de busca, por exemplo). Se ainda tem dúvidas, veja esta apresentação. Ela foi feita em 2003 (!) e ainda tem gente que teima em usar tabelas para posicionar conteúdo...

C. Um exemplo de aplicação de CSS

Abaixo criamos o estilo corrido (para ser usado no texto corrido) e o aplicamos ao código que havíamos feito na aula passada.

<html>
	<head>
		<title>
			Este é o título
		</title>

		<style type="text/css">
		p {
				padding-left: 50px;
				color: #f00;
		}
		</style>	
	</head>
	<body>
		<p>Vestibulum elit diam, accumsan ullamcorper, tristique 
  		at, consequat tempor, est. Duis odio felis, bibendum a,  mattis eget, 
	  	pulvinar a, arcu. Curabitur volutpat, neque eget ultricies  
  		placerat, urna tellus tristique leo, sit amet luctus urna risus 
  		a lectus. Aliquam erat volutpat.
		</p>

	</body>
<html>