Tutorial Intermediário de HTML: Exercícios

22 04 2008

Logo do +web em tom verde escuro

Antes de irmos pro próximo assunto, vamos praticar um pouco o que vimos por aqui.

Primeiro, dê uma incrementada no projeto que você começou lá atrás. Use as tags novas que você aprendeu, retire as tags más. Atualiza o seu servidor e envie o resultado pra meu email.

O segundo exercício é esse:

Exercício

Como você viu no começo desse curso e nesse texto que foi indicado, html é pra conteúdo e CSS é pra apresentação.

No código abaixo temos conteúdo e apresentação misturados no HTML – muito feio. Sua missão é limpar esse código. Substituir tudo que for relativo a apresentação por CSS, acrescentar o que estiver faltando, usar a tag certa pra cada elemento – p para parágrafos, h# para cabeçalhos, etc.

<html>
  <head>
    <title>Minha Página Misturada</title>
  </head>

  <body bgcolor="#00FFFF">
  <p align="center"><b><font size="6" face="Verdana">Um Cabeçalho</font></b></p>
  <p align="center"></p>
  <hr>
  <p><font face="Verdana" size="2">Esse texto que você está lendo foi retiradao de um <b> curso</b> de html.
  Desse mesmo jeito. <b> Só estou mudando os textos</b>, pro autor não ficar com raiva de mim</b>.</font></p>
  <p><font face="Verdana" size="2">E eu vou continuar escrevendo <b>qualquer coisa</b>, <b>qualquer coisa mesmo</b>,
  <b>sem ter nada pra falar</b>, <b>enrolando</b>, mais um pouco.</font></p>
  <p><font face="Verdana" size="2">E não ligue se isso não fizer sentido</font></p>
  <p align="center"><font face="Verdana" size="2">
  <img border="0" src="imagem.jpg" width="400" height="300"></font></p>
  <p><font face="Verdana" size="2"><b>Correio Electrónico:</b><a href="mailto:htmlvelhinho@algumauniversidade.pt">htmlvelhinho@algumauniversidade.pt</a></font></p>
  <p> </p><p><a href="um-link.html"><font face="Verdana" size="1">código HTML desta página</font></a></p>
  <p><a href="diario.html"><font face="Verdana" size="1">Um texto bem pequeninho.</font></a></p>
  </body>
</html>

O que é importante aqui: Compare o tamanho do arquivo antes de depois de ser limpado e você vai perceber que o arquivo limpo é bem menor. Um arquivo menor significa uma página que carrega mais rápido e que ocupa menos espaço.

Quem não quer uma página carregando mais rápido?

Quando estiver pronto, sigara para a próxima parte: CSS Intermediário.

Páginas Relacionadas

Anúncios




Tutorial Intermediário de CSS: Imagens de Background

19 03 2008

Página com Imagem de Background

Existem várias propriedades envolvidas na manipulação de imagens de background.

Felizmente, a propriedade background cuida de todas as outras.

body {
	background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}

Esse código une essas propriedades:

  • background-color, que nós já vimos antes.
  • background-image, que é o endereço da imagem que vai servir de fundo.
  • background-repeat, que é como a imagem se repete na página. Pode ser repeat-y (repetindo no eixo y, de cima até embaixo), repeat-x (repetindo no eixo x, lado a lado), repeat (repetindo nos eixos x e y, efeito semelhante a um telhado, por exemplo) ou no-repeat (que mostra apenas uma ocorrência da imagem).
  • background-position, que pode ser top (topo), center (centro), bottom (parte inferior), left (esquerda) e right (direita), ou uma combinação de dois desses elementos. Nesse caso, o primeiro indica a posição no eixo horizontal e o segundo a posição no eixo vertical.

Imagens de background podem ser usadas na maioria dos elementos HTML – não apenas pra página inteira (body) e podem ser usados pra efeitos simples mas eficazes, como bordas arredondadas.

É fácil se envolver demais com imagens de background e querer usá-las na página inteira. Algumas pessoas visualmente hiperativas podem acreditar que é uma boa ter uma foto cheia de cores vivas em todo o fundo da página, dando ao usuário o desafio de decifrar o texto no primeiro plano. Isso é um exemplo meio radical, mas o fato é que o texto mais amigável ao usuário, legível, é fonte preta em um fundo simples branco ou fonte branca num fundo preto. Algumas pessoas defendem que um fundo “quase” branco ou “quase” preto é melhor, já que reduz a claridade. Sugiro que você teste essas possibilidades e escolha a que você achar mais adequada ao seu projeto.

O melhor uso pra imagens de background é preencher espaços onde não haja nenhum conteúdo, deixando a página mais visualmente agradável sem atrapalhar o conteúdo.

Páginas Relacionadas

Exemplos

Referência

BlogBlogs Tags: , ,

Esse material é uma adaptação do CSS Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Intermediário de CSS: Propriedades Atalho

18 03 2008

Trecho de código CSS

Algumas propriedades CSS permitem que uma sequência de valores substituam uma série de propriedades. Elas são representadas por valores separador por espaços.

margin, padding e border-width permitem a você combinar margin-top-width, margin-right-width, margin-bottom-width e etc. na forma

propriedade: top right bottom left;

Então:

p {
	border-top-width: 1px;
	border-right-width: 5px;
	border-bottom-width: 10px;
	border-left-width: 20px;
}

Pode ser resumido como:

p {
	border-width: 1px 5px 10px 20px;
}

border-width, border-color e border-style também podem ser somadas como, por exemplo:

p {
	border: 1px red solid;
}

(Isso também pode ser aplicado a border-top, border-right, etc.)

Ao declarar apenas dois valores (como margin: 1em 10em;), o primeiro valor vai ser o topo e a base, e o segundo valor vai ser a direita e a esquerda. Ao declarar apenas um valor, esse vai ser aplicado em todos os lados.

Propriedades relacionadas a fontes também podem ser unidas com a propriedade font:

p {
	font: italic bold 1em/1.5 courier;
}

(Onde o ‘/1.5’ é o atributo line-height.)

Então, juntando tudo, experimente esse código:

p {
	font: 1em/1.5 "Times New Roman", times, serif;
	padding: 3em 1em;
	border: 1px black solid;
	border-width: 1px 5px 5px 1px;
	border-color: red green blue yellow;
	margin: 1em 5em;
}

Atraente.

Existem bem mais atalhos que esses. E são todos muito, muito úteis. Leia esse guia de abreviações de CSS, mais abrangente que esse texto.

Páginas Relacionadas

Referência

BlogBlogs Tags: , ,

Esse material é uma adaptação do CSS Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Intermediário de CSS: Pseudo Classes

18 03 2008

Quatro Estados de um Link

Pseudo classes são usadas juntos com seletores para especificar um estado do seletor. Elas aparecem na forma seletor:pseudo classe { propriedade: valor; }, com um sinal de dois-pontos separando o seletor e a pseudo classe.

Muitas das pseudo-classes definidas pelo CSS não são suportadas por todos os navegadores, mas existem quatro que podem ser usadas com segurança quando aplicadas à links:

  • link indica o estilo de links não-visitados.
  • visited indica links que foram visitados.
  • active indica um link que está com o foco (por exemplo, quando ele está sendo clicado).
  • hover indica um link enquanto o cursor é mantido sobre ele.
a.homemdasneves:link {
	color: blue;
}

a.homemdasneves:visited {
	color: purple;
}

a.homemdasneves:active {
	color: red;
}

a.homemdasneves:hover {
	text-decoration: none;
	color: blue;
	background-color: yellow;
}

Experimente. Crie uma página HTML que use esses estilos. Veja quando cada pseudo classe é usada. Crie uma outra página HTML e um outro arquivo CSS e explore um pouco mais essas classes. Dominar esses estados te ajuda a fazer páginas bem mais legais.

Embora CSS te dê o poder de contornar isto, manter links visitados com cores diferentes de links não-visitados é uma boa prática, já que muitos usuários supõe que isso vai acontecer.

Tradicionalmente, links de texto são azuis se não visitados e violeta se visitados, e ainda existem razões para acreditar que essas cores são as mais eficazes para isso. No entanto, com a crescente popularização do uso do CSS, essas cores estão deixando de ser lugares-comum e o usuário médio não assume mais que links precisam ser azul ou violeta.

Você também devia estar apto a usar a pseudo classe hover com outros elementos além de links. Infelizmente, o Internet Explorer (sempre ele) não suporta esse recurso até a versão 6. Isso é uma tremenda irritação, porque existem um monte de truquezinhos legais que você pode fazer com isso que ficam ótimos em outros navegadores.

Páginas Relacionadas

Exemplos

  • Rollovers 1 – links gráficos que mudam quando o cursos passa por eles usando :hover.
  • Rollovers 2 – Efeitos mais interativos, usando :active.
BlogBlogs Tags: , ,

Esse material é uma adaptação do CSS Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Intermediário de CSS: Agrupando e Aninhando

17 03 2008

Código CSS com seletores aninhados e agrupados

Agrupando

Você pode aplicar as mesmas propriedades a vários seletores sem precisar repetí-los. Basta separar os seletores com vírgulas.

Por exemplo, se você tem alguma coisa assim:

h2 {
	color: red;
}

.outraClasse {
	color: red;
}

.maisUmaClasse {
	color: red;
}

Você pode trocar por isso:

h2, .outraClasse, .maisUmaClasse {
	color: red;
}

Aninhando

Se o CSS estiver bem estruturado, não deve existir a necessidade de muitos seletores de classe ou ID. Isso porque você pode especificar propriedades para seletores dentro de outros seletores. Por exemplo:

#topo {
	background-color: #ccc;
	padding: 1em
}

#topo h1 {
	color: #ff0;
}

#topo p {
	color: red;
	font-weight: bold;
}

Faz com que não haja necessidade de mais classes e ID’s se estiver aplicado a um HTML que pareça com esse:

<div id="top">

	<h1>Acarajé de Chocolate</h1>

	<p>Essa é minha receita pra fazer acarajé usando só chocolate</p>

	<p>Mmm mm mmmmm</p>

</div>

Isso acontece porque, ao separar seletores com espaços, nós estamos dizendo “h1 dentro do ID topo tem a cor #ff0” e “p dentro do ID topo é vermelho e está em negrito”.

Isso pode ficar bem complicado (porque pode se extender por mais de dois níveis, como isso dentro disso dentro disso etc.) e pode exigir um pouco de prática.

Páginas Relacionadas

BlogBlogs Tags: , ,

Esse material é uma adaptação do CSS Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Intermediário de CSS: Seletores Classe e ID

16 03 2008

Código CSS com seletores classe e id

No Tutorial Iniciante de CSS nós analisamos apenas os Seletores HTML – aqueles que representam uma tag HTML.

Você também pode definir seus próprios seletores na forma de seletores classe e ID.

A vantagem dissso é que você pode ter o mesmo elemento, mas apresentá-lo de modos diferentes dependendo de sua classe ou ID.

No CSS, um seletor de classe é um nome precedido por um ponto (.) e um seletor ID é um nome prededido por um sustenido (#).

O CSS fica mais ou menos assim:

#topo {
	background-color: #ccc;
	padding: 1em
}

.intro {
	color: red;
	font-weight: bold;
}

O HTML se liga ao CSS usando os atributos id e class. Pra esse CSS, o HTML pode ser alguma coisa assim:

<div id="top">

<h1>Acarajé de Chocolate</h1>

<p>Essa é minha receita pra fazer acarajé usando só chocolate</p>

<p class="intro">Mmm mm mmmmm</p>

</div>

Veja que o primeiro parágrafo aparece diferente do segundo, já que no segundo foi aplicada a classe “intro”.

A diferença entre ID e classe é que ID só pode ser usado pra identificar um elemento, enquanto uma classe pode ser usada pra quantos elementos você quiser.

Você também pode aplicar um seletor pra um elemento HTML específico, basta declarar o seletor HTML primeiro. Assim

p.classe { qualquer coisa }

vai ser aplicado apenas a elementos parágrafo (p) que tenham a classe “classe”.

Na hora de criar nomes para suas classes e ID, procurem usar nomes que façam sentido e que representem a função daquele seletor. Evite nomes de classe como “texto-verde”, que representa apresentação. A vantagem do CSS é poder mudar todo o estilo do seu site de forma muito simples. Se você usa nomes assim, você perde flexibilidade. Quando, por exemplo, você quiser mudar o texto pra azul, ao invés de verde, você vai ter que 1)mudar o nome da classe para “texto-azul”, e mudar cada referência no seu HTML, ou 2)fazer com que a classe “texto-verde” mostre um texto azul. Estranho, não? Por isso, a classe “texto-destacado” ou “texto-forte” seria mais adequada.

Páginas Relacionadas

BlogBlogs Tags: , ,

Esse material é uma adaptação do CSS Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Intermediário de CSS

16 03 2008

Trecho de Código CSS

Como o Tutorial Intermediário de HTML, esse Tutorial Intermediário de CSS não deve ser tão difícil, mas ao invés disso complementar o básico que você viu no Tutorial Iniciante de CSS.

Conteúdo

Páginas Relacionadas

BlogBlogs Tags: , ,

Esse material é uma adaptação do CSS Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.