Busca avançada Meus favoritos Como criar site grátis em PHP, HTML, CSS, JS ...
Postes RECENTES
Categorias
Ultimos posts
- background-image css
- tooltip jquery
- editor de imagens online
- 60 belas texturas
- belas texturas gratis
- Calcular frete em ASP
- variaveis php existe
- redirecionar site php
- remover espaços de string
- gerador de layout css
- máscara javascript
- estrutura condicional
- teclado virtual
- crie imagem loading
- personalizar curso mouse
Tags mais comuns do HTML
Esse é nossa terceira artigo de HTML. Neste artigo vamos conhecer as principais tags usadas para formatar nossa página web. Com as tags que vamos aprender neste tutorial podemos fazer uma formatação básica de uma web página.
Vamos relembrar o que aprendemos nas duas primeiras lições desta série. Vimos na primeira lição que toda tag deve ser aberta e fechada e que estas devem esta entre os símbolos de menor quer "<" e maior que ">". Conheça também a estrutura mínima, fundamental e necessária para podermos 'chamar' um certo documento de web página. Vamos relembrar: <html>
<head>
<title>Meu título aqui</title>
</head>
<body>
Corpo da página aqui
</body>
</html>
As novas tags
Vamos começar de fato nossa terceira lição. As tags que vamos conhecer agora podem ser consideradas as tags mães, pois são as mais importantes e usadas na formatação HTML, praticamente todos os sites (se não todos) utilizam essas tags ou pelo menos algumas delas.
PARÁGRAFO
Para se escrever um parágrafo usamos a tag <p>, exemplo: <p>este é um parágrafo</p>
NEGRITO
Para deixar um texto em negrito a tag é <b>, exemplo: <b>este texto esta em negrito</b>
ITÁLICO
Com a tag <i> conseguimos o efeito itálico (texto inclinado), exemplo: <i>este texto esta em itálico</i>
CABEÇALHO
Cabeçalhos são usados geralmente para escrevermos títulos e subtítulos. Existem 6 níveis de cabeçalho, de 1 a 6, o primeiro nível é o 1 (com letra maior) e o menor é o de nível 6. As tags utilizadas para este fim são <h1>, <h2>, <h3>, <h4>, <h5> e <h6>. Exemplo: <h1>Este é um titulo</h1>
<h2>E este é um subtítulo</h2>
LINHA HORIZONTAL
Podemos querer separar nosso texto ou parte dele por uma linha horizontal, para isto basta usarmos a tag <hr />. Atenção: esta tag é usada sozinha, sem companhia, ou seja, não tem a tag de fechamento, na verdade tem mas não como estamos acostumados, seu fechamento se dá com a "/". Para ver seu efeito, escreva em sua página a tag <hr /> e visualize em seu navegador.
QUEBRA DE LINHA
O uso da tag <br /> coloca o texto que vem a seguir na próxima linha. Exemplo: Este é meu texto<br />Este texto aqui esta na linha de baixo
Veja o resultado na imagem ao lado. Embora o texto tenha sido escrito na mesma linha ele será mostrado pelo navegador em linhas separadas porque foi informado através da tag <br /> que o aquele texto deveria ficar na próxima linha.
HIPERLINK
Um hiperlink ou simplesmente link é um dos principais recursos da web. É por meio dos links que navegamos entre as diversas páginas de um site, podendo ainda apontar para outros sites (link externo). A tag que "gerencia" os links é um pouco diferente das que vimos até aqui. Exemplo de um link: <a href="pagina_destino.html">clique aqui</a>
Este é um exemplo básico de um link, esta tag tem ainda outros atributos (opcionais). O elemento a é uma referência a "ancora" e href é uma abreviação de "hypertext reference", em português seria a referência para o hypertexto - o conteúdo deste atributo é o destino do link que pode ser tanto um site, como uma página do próprio site, ou ainda, um ponto da mesma página. No exemplo acima o texto clique aqui é a parte mostrada pelo navegador, onde clicamos com o ponteiro do mouse.
O link tem ainda outros atributos, outro exemplo: <a href="pagina_destino.html" title="sou um link" target="_blank">clique aqui</a>
title, como o nome sugere, é o titulo do link, aquele texto que aprece quando colocamos o curso do mouse sobre um link. target informa ao navegador onde o link deve ser aberto, se na mesma janela ou em uma nova janela por exemplo. No exemplo acima o link será aberto em uma nova janela. Valores possíveis para target: "_parent", "_self" e "_top".
LINK RELATIVO
Os links internos, dentro do próprio site, não precisam ter no atributo href o caminho completo, supondo que seu site seja www.meusite.com e você tenha na mesma pasta do site 3 páginas (index, produtos e contato) e queira link essas páginas entre sí, seu link ficará não precisa deve ficar assim: <a href="produtos.html" title="produtos" title="produtos">produtos</a>
No exemplo acima não foi necessário informar http://www.seusite.com, isso porque a página estava no seu próprio site e dentro da mesma pasta, é o que chamamos de link relativo. Se estivéssemos criado a pasta "produtos" na raiz do seu site e a página "produtos.html" estivesse dentro desta o link seria um pouco diferente: <a href="produtos/produtos.html" title="produtos" title="produtos">produtos</a>
Mas se o link fosse da página "produtos/padutos.html" para a página "index.html", que por padrão fica na raiz do site, como seria esse link? Veja um exemplo: <a href="../index.html" title="produtos" title="produtos">produtos</a>
Percebeu a diferença? Tá, já sei, você percebeu que esta diferente, mas não entendeu o porque desses caracteres "../". Bem, "../" representa um diretório um nível acima da página onde foi feito o link. Seguindo este raciocínio podemos apontar para dois ou mais níveis acima, assim: "../../pagina.html".
Claro que você também pode usar o link completo: "http://www.seusite.com/diretorio/pagina.html". O link assim é chamado de link absoluto, é com o link absoluto que apontamos para outros sites.
LINK PARA A PRÓPRIA PÁGINA
Você pode querer criar links internos, que aponta para um determinado lugar da própria página, existe muitas razões para se querer fazer isso, por exemplo, um índice apontando para a descrição dos assuntos tratados na página. Para criar esse link você vai precisar do atributo "id" e do sinal "#".
Primeiro você vai usar o atributo id no elemento que será o destino do link, exemplo: <h3 id="cabecalho">Subtítulo 1</h3>
Destino do link criado, vamos criar o link: <a href="#cabecalho">Voltar ao subtítulo 1</a>
Não temos imagens para ilustrar isso, mas, esse exemplo vale por mais de mil palavras (:-. Faça um exemplo como este e execute em seu navegador, você irá perceber que o link foi para o local desejado. Outra coisa interessante, a página não será recarregada novamente, nisto há uma grande vantagem, tão óbvia que não vou precisar comentar.
MATERIAS RELACIONADAS
- Banco de imagens gratis de alta resolução para uso comercial
- Função em ASP para calcular frete dos correios
- função para descobrir quantos dias restam para o fim do mês
- Gerador de formulário grátis
Comentários
Por: Pedro Baeta - em: 11/12/2009 - as: 03:23:00Boa tarde,
Gostava de saber os tipos de tags HTML de animação de texto que existem
Por: adelson pereira - em: 14/07/2010 - as: 10:42:05gostei do que li quero mais
DEIXE SEU COMENTÁRIO