Archive for the 'HTML' Tag

Galeria de Imagens com JavaScript

Posted 16 Fevereiro 2008
Filed under: JavaScript, XHTML | Tags: , ,
* Comments(1)

Uou! Dei uma sumida mas já estou de volta. Agora estudando e ralando, então sobra pouco tempo para blogar. Mas vou tentar não sumir por muito tempo.

Já faz algum tempo que eu queria escrever esse post para mostrar que as HB’s aprendendo Javascript não foram tão inúteis, eu vou mostrar como criar uma simples galeria de imagens com JavaScript. Vale lembrar que eu ainda estou aprendendo, então a coisa vai ser bem básica mesmo.

As imagens
Pegue 4 imagens, de preferência do mesmo tamanho e dê os nomes de 1.jpg, 2.jpg, 3.jpg, e 4.jpg. É importante que as imagens estejam na mesma pasta que você vai salvar a sua página HTML.

O HTML
Primeiro precisamos do código HTML que ficaria assim:

<html>
<head>
</head>
<body>
<h1>Galeria de Imagens</h1>
<p>Use os botões ou clique nas fotos para ampliar.</p>
<input type="button" value="Anterior" onClick="anterior()" />
<input type="button" value="Próxima" onClick="proximo()" /><br /><br />
<img src="1.jpg" id="imgg"/><br /><br />
</body>
</html>

É importante observar que os botões tem uma propriedade “onclick”, que executa uma função Javascript quando é clicado.

E o JavaScript
Essa é a parte da mágica.

<script language="JavaScript">
img =1
function proximo(){
if (img<4){
img++
i =img+".jpg"
document.getElementById("imgg").src=""+i+""
}
}
function anterior(){
if (img!=1){
img––
i =img+".jpg"
document.getElementById("imgg").src=""+i+""
}
}
</script>

Aqui eu criei uma variável chamada img e a iniciei com o valor 1. Depois criei duas funções: uma para avançar “proximo()” e outra para voltar “anterior()”. As funções são chamadas quando clicamos no botões. O Javascript deve ser colocado dentro das tags <head>.

Juntamos tudo e pronto. Como eu tinha dito, essa galeria é bem simples, mas é uma boa forma de mostrar o que se pode fazer com alguns conceitos básicos.

Se tiver alguma dúvida ou se você quiser dar alguma sugestão, comente aí.

PS.: É melhor digitar o código do que copiar pois o WordPress converte as aspas em apóstrofos.

HTML pra quem nunca ouviu falar PARTE 3

Posted 24 Novembro 2007
Filed under: Aprender, XHTML | Tags: ,
* Comments(0)

Essa é a terceira parte do tutorial de HTML para quem nunca ouviu falar.

Nós já vimos que para começar uma página simples, precisamos das tags <html>, <heead>, <title> e <body>. Essas tags são para começar qualquer página, certo?

Agora vamos ver um pouco sobre o conteúdo da página.

A nossa professora de português (que você achava chata pra…), em suas aulas de redação sempre lembrou que os nossos textos (lembra daquele sobre: o que você fez nas férias?) deviam ter um título, parágrafos, pontos, espaços, perfume e tantas viadagens mais, pois é disso que vamos falar, mas calma eu não vou pedir nenhum texto sobre as férias.

Vamos voltar naquela nossa página básica, só que agora eu adicionei um pouco mais de texto nela:

<html>
<head>
  <title>Minha página</title>
</head>
<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat
volutpat.</p>

<p>Duis autem vel eum iriure dolor in
hendrerit in vul. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.</p>

</body>
</html>

Abra o bloco de notas (ou outro editor de texto simples) digite isso e salve com o nome de qualquer_coisa.html. Agora abra no seu navegador e veja o que há de diferente.

Agora nós temos duas novas tags <p> e <h1>.
A tag <p> foi colocada no começo e no fim de cada bloco de texto, sua função é indicar onde começa e onde termina um parágrafo (pedaço do texto). Lembre-se de sempre fechar as tags, se você abriu um <p>, então feche com </p> no fim do parágrafo.
Já a tag <h1>, é usada para destacar o título (tema) do texto. A <h1> tem outras irmãs que são as <h2>, <h3>, <h4>, <h5>, <h6>, que podem ser consideradas como níveis, por exemplo, título, subtítulo, subtítulo mais baixo, etc. Também não se esqueça de fechar todas as tags abertas.

Outra dica é sempre escrever os nomes das tags em letras minúsculas, p, h1, html, pois fica mais fácil e mais limpo de entender o código, principalmente em um código grande.

Por hora, até a próxima.

HTML pra quem nunca ouviu falar PARTE 2

Posted 18 Novembro 2007
Filed under: Aprender, XHTML | Tags: ,
* Comments(1)

Essa é segunda parte do tutorial de HTML pra quem nunca ouviu falar.

Na post anterior fizemos a seguinte página básica em HTML usando um editor de textos:

<html>
<head>
<title>Minha primeira página</title>
</head>
<body>
Esta é minha primeira página feita em HTML
</body>
</html>

Certo?

Agora vamos ver o que faz cada tag usada.

<html> - é usada para dar início ao código, a primeira tag de qualquer página, é quem indica onde o código começa.

<head> </head> - Head quer dizer “cabeça”, é aqui que colocamos uma série de informações sobre a página como título, palavras chave, quem fez, etc.

<title> </title> - Title significa “titulo”, é usada para dar o título da página, parece bobo mas é fundamental para a sua página ser mostrada nas pesquisar do Google por exemplo. O título tem que dizer fielmente do que fala a página, se a pagina tiver o título de PRINCIPAL por exemplo não daria pra identificar o seu conteúdo. As tags <title> </title> sempre devem estar dentro das tags <head> </head>.

<body> </body> - Body quer dizer “corpo”, aqui vem os elementos da página que serão mostrados no navegador, textos, imagems, formularios, etc.

</html> - Indica o fim do código.

Bom, por hoje é só, mas vem mais aí.

HTML pra quem nunca ouviu falar

Posted 24 Outubro 2007
Filed under: Aprender, XHTML | Tags: ,
* Comments(4)

Ninguém melhor para entender um iniciante que outro iniciante, não é? Pois bem, há alguns meses, eu começei a me dedicar ao estudo de HTML e CSS, confesso que não tive dificuldades em achar bons site com bons tutoriais. Mas porquê não fazer um turial pra que esta começando do começo e se sente “sozinho no mundo”?

HTML é uma abreviação de Hiper Text Markup Language (linguagem de marcação de hipertexto), e é a primeira linguagem que se deve aprender para ser um Webdesiger de verdade.

Uma página básica
Como ja disse, HTML é uma linguagem de marcação (nunca confunda HTML com linguagem de programação), onde as informações são indentificadas ou marcadas usando as tags.

Tag é a menor parte do codigo HTML, elas são colocadas dentro dos sinais ” < ” e ” > “, da seguinte maneira: <tag>Conteúdo</tag>.

<tag> - é usado para iniciar a tag
Conteúdo - é o que vai ficar marcado pela tag
</tag> - é usado para fechar a tag (repare na ” / “)

Tudo que voce irá precisar é um editor de texto simples (bloco de notas ou kedit por exemplo). Abra o editor e digite:

<html>
<head>
<title>Minha primeira página</title>
</head>
<body>
Esta é minha primeira página feita em HTML
</body>
</html>

Agora salve com o nome de qualquercoisa.html, repare que no fim do nome deve-se colocar .htm ou .html. Abra sua página em qualquer navegador e veja sua obra de arte.

Gostou? Aguenta aí que vem mais!

Menu horizontal com listas e CSS

Posted 15 Outubro 2007
Filed under: Aprender, CSS, XHTML | Tags: , , ,
* Comments(4)

Uma das coisa que sempre me tirava do sério, eram as listas, principalmente se fosse para fazer menus horizontais. Bom, sempre que você tem um menu de navegação, ou uma barra de navegação, querendo ou não (como diz Diego Eis), você vai ter que coloca-los em uma lista de links.

A minha dúvida era para fazer com que uma lista, onde os itens normalmente estão um embaixo do outro, ficar na horizontal, mas sem retirar as tags <li>, o que prejudicaria a semântica do código.
Então vamos la! Primeiro vamos criar uma página com uma lista de links:


<html>
<head>
<title>Menu horizontal com listas</title>
</head>
<body>
<div id="menuhorizontal">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Sobre</a></li>
        <li><a href="#">Notícias</a></li>
        <li><a href="#">Contato</a></li>
    </ul>
</div>
</body>
</html>

Agora vamos ao CSS. As propriedades que serão usadas são Display e Padding. O display:inline; servirá para fazer com que os itens da lista, que normalmente são elementos em “bloco”, se comportem como elementos “inline”, e o padding:10px; servirá para separar os elementos uns dos outros.

Veja como fica:


<style type="text/css">
#menuhorizontal li{
display:inline;
padding:10px;
border:#000 1px dotted;
}
</style>

Prontinho, agora é só ir adicionando mais estilos e deixar o menu do jeito que você quiser.

Lembrando que o CSS vai dentro das tags <head>.
Pra todos um abraço e até a próxima!

Próxima Página »