WebDesigner-Fone:(15)9123-7525

Olá pessoal

Como algumas pessoas solicitaram vou tentar dar um passo a passo para quem quiser aprender sobre a construção de sites.

Primeiramente aprenderemos o XHTML, que nada mais é do que a utilização do HTML (Linguagem de formatação) em conjunto com o XML que proporciona a exibição das páginas da Web em diversos tipos de dispositivos, como palms, celulares, entre outros.

Capítulo 1

Antes de mais nada crie uma pasta em qualquer lugar do seu computador, pode ser no desktop mesmo e nomeie como aula1.

daí você deve digitar num editor de texto qualquer, como o bloco de notas ou o Notepad++, o mínimo que um site deve ter, ou seja:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
</head>

esse conteúdo deverá ser salvo da seguinte forma:

nomedasuapágina.htm

após salvar o conteúdo você verá que já possui sua primeira página. Essa página ainda está em branco. Iremos preenchê-la nas próximas aulas.

O que significa esse conteúdo que você digitou para a construção da página?

DOCTYPE: Refere-se à definição do tipo de documento;

<html> Refere-se ao elemento raiz do documento;

<head> Refere-se ao cabeça-lho da página XHTML;

<title> Refere-se ao título da página XHTML;

<body> Refere-se ao corpo da página XHTML.

Capítulo 2 - TAGs

Tag é o termo atribuído aos códigos utilizados em XHTML e são identificadas por estarem entre os sinais - menor que (<) e maior que (>).

De regra, há a necessidade de uma tag de abertura e outra de fechamento. exemplo <html></html>; <head></head>

Cabeçalho - entre as tags <head> e </head> devemos inserir o título <title>Título da minha página</title> e outros elementos como as metatags que v eremos na próxima aula, as folhas de estilos, scripts entre outros.

Corpo da página - a tag <body> determina tudo que será apresentado no browser (browser é um programa usado para a navegação como exemplo temos o Internet Explorer, o Firefox, O Crome, O Ópera entre outros).

ex.:<body>

Corpo da página

</body>

tanto o head como o body ficam dentro de um escopo maior que é o elemento raiz, ou seja o <html>

ex:

<html>

<head>

<title>Título da página<title>

</head>

<body>

Corpo da Página

</body>

</html>

Bom, por enquanto é só e até a proxima aula.

Um abraço.

Em continuação ao assunto anterior...

exemplo2 (Sobre efeitos simples de links utilizando css)

Removendo o sublinhado do link

exemplo3

Acrescentando um fundo no link

O link com o fundo de uma cor e que muda para outra cor quando você passo o mouse por cima.

exemplo5

Link que muda o tamanho da letra quado se passa o mouse

Um abraço e até a próxima.

Olá pessoal.

Vou dar uma dica para os iniciantes.

os efeitos de links.

São quatro efeitos que também são conhecidos como pseudo classes.

a:link........define o estilo do link no estado inicial;
a:visited...define o estilo do link visitado;
a:hover.....define o estilo do link quando passa-se o mouse sobre ele;
a:active....define o estilo do link ativo (o que foi "clicado").

exemplo1 acrescentando um sublinhado e sobrelinhado

Lembrem-se que na web só aprende quem pratica, então...

Até a próxima.

Um teste interessante que podemos fazer, pensando em CSS, é submeter os navegadores ao Acid Test proposto pelo Web Standards Project.

O teste é simples: Leve seu navegador para passear pelo site: http://www.acidtests.org/ e clique nos links Acid1, Acid2 e Acid3. Veja como o seu navegador renderiza essas páginas.

Explicando melhor:

O teste Acid1, criado em 1998, é obviamente o mais simples e testa tags <html> e declarações CSS. Traz uma tela de referência apenas, sem grandes apelos. Mas foi esse teste que serviu de base para os testes seguintes.

Já o Acid2, de 2005, é bem mais interessante que o primeiro. Forma uma rosto quando o navegador consegue renderizar tudo corretamente.

Por fim, o Acid3, lançado em março de 2008, é a versão mais “poderosa” deste teste. Faz aproximadamente 100 testes, indo do CSS 3 ao SVG, passando por XML e DOM, e ainda mostrando o “score” do seu navegador.

Pelo que pude constatar, nenhum navegador (em versão estável e pública) conseguiu 100%. Mas não deixa de ser interessante ver como o Chrome, o IE e Firefox se saem nestes teste.

Até a próxima.

Olá pessoal!

Hoje nós veremos como fazer no CSS a aplicação de camadas com os cantos arredondados, que durante muitos anos foi o “sonho de consumo” de muito desenvolvedor de Front End.
O atributo é o border-radius, e com ele podemos obter um raio gerando arredondamento para os cantos da camada

Ex:
Usa-se esse estilo para a camada teste:
#teste{
width:150px;
height:100px;
font-size:10px;
text-align:center;
border: solid thick red;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
}
Definindo div no html, assim:

<div id=”teste”> testando cantos arredondados em camadas</div>

Vai lá, divirta-se!
Ps: vai funcionar no Firefox e no Chrome!

Olá pessoal.

Vamos ver como fazer uma camada transparente.

-Crie uma camada:

< div id=”camadatrans”> Camada transparente</div>

Camada transparente

-No CSS, coloque:

< style>
#camadatrans{
position:absolute;
top:10px;
left:10px;
z-index:2;
width:300px;
height:250px;
background-image:url(nome_da_imagem);
filter: alpha(opacity=60); opacity: .5;
}
</style>

É isso aí. E para que vocês possam ver melhor o efeito, utilizem uma

imagem escura de background e não esqueçam de colocar

uma imagem de background também na camada!

Daí é só curtir o resultado.

Funciona no IE, Firefox e Chrome!

Abraço e sucesso!