(© 1997-2008 by Francisco Panizo Beceiro)

Se você quer uma Ajuda Específica para o seu caso, proceda como indicado:
clique Suporte, e envie a sua dúvida (para cadastrados no CLUBE DO HELP DESK)
ou envie sua dúvida para nosso Super Fórum )

EsportesMotor: Notícias sobre quase 100 categorias

Seção HTML da abcDICAS.com.br

HTML
Dicas de Uso para a Construção de Páginas Web


HTML Básico

Tutorial de HTML Básico- com muitos detalhes, bem explicados, incluindo aqueles detalhes imprescindíveis para se publicar as páginas na teia mundial.
Os comandos básicos para montar uma página simples mas competente.
Ao final um Exemplo Completo de uma Página montada com os comandos aprendidos aqui.


A Página Básica Os TAGs Básicos Um Exemplo Completo
<TITTLE> <P> <BR> <HR>
<B> <I> <U> <CENTER> <H1> <H2> ... <H6>
<IMG SRC> <A HREF> <A HREF="mailto:...">

© 1997-2004 by Francisco Panizo Beceiro.
A Página Básica

Uma página HTML é na verdade um conjunto de comandos e textos, digitados no formato texto puro (por isso muita gente usa o NOTEPAD para escrever páginas para a WEB) que determinam aos browsers a maneira de apresentar a página numa tela de microcomputador.

Uma página, de qualquer tipo, e para qualquer objetivo, deve ter pelo menos a seguinte estrutura de comandos HTML:

<html>
<head>
<tittle>
Título da Página </tittle>
</head>
<body>

... . .... ... .. .
...... .. . . . .. . ...... ... ... .. ..

Texto, links e imagens
........ .... . ... . ..
....... .... ... ... ... ... ... .

</body>
</html>

Como ser visto, nesse pequeno exemplo de página HTML, os tags mínimos são os:

  • <html> e </html>: que abrem e fecham uma página HTML;
  • <head> e </head>: que iniciam e encerram uma seção de cabeçalho para a página:
  • <body> e </body>: que indicam o início e o fim do corpo da página, onde vai todo o conteúdo real de uma página HTML, isto é: os textos, as figuras, as tabelas, e os links para outros documentos e/ou outros sites da WEB;

Cada tag é composto de 2 símbolos especiais: o sinal "<" denominado "menor que", e o sinal ">" denominado "maior que". No meio desses símbolos especiais vem o comando propriamente dito, sempre uma palavra na lingua inglesa, como body (corpo). Não importa se tais comandos são digitados em maiúsculas ou minúsculas, porém o ideal, e também um padrão de fato, é se utilizar apenas de comandos em minúsculas.

Um cuidado importante com estes, e na verdade com quase todos os demais tags, é que eles sempre andam aos pares. Para cada tag de abertura (ex.: <head>) deve existir um outro tag de fechamento (ex.: </head>). E este tag de fechamento é idêntico ao de abertura, apenas com a adição de uma barra logo após o sinal de "menor que".

topo

Os TAGs Básicos

Diversos TAGs são considerados básicos, sendo na verdade um pouco relativa essa classificação. Muitos poderão perguntar: porque tal TAG é básico, e porque aquele outro TAG é avançado?. Para efeito deste Site consideraremos TAGs BÁSICOS aqueles TAGs que fazem parte de praticamente todos as páginas HTML, e aqueles que não necessitam de recursos mais elaborados para sua aplicação numa página HTML.

TAG: <tittle> Comando: TÍTULO
Objetivo do TAG: definir um texto como sendo o Título de uma Página, e que é mostrada na parte superior do browser (na Barra de Título) e no cabeçalho de uma página impressa. A tag <tittle> deve aparecer sempre dentro da tag <head>.
Sintaxe Básica:
  • <tittle> Título </tittle>
Exemplo:
<tittle>Página Principal do Meu Site</tittle>

topo

TAG: <p> Comando: PARÁGRAFO
Objetivo do TAG: definir o encerramento da linha atual, saltando uma linha após, como no encerramento de um parágrafo num documento de texto.
Sintaxe Básica:
  • Sentença ou parágrafo<p> outra sentença
Exemplo:
Este é o meu primeiro parágrafo<p>E este é o segundo parágrafo.
Como fica:
Este é o meu primeiro parágrafo

E este é o segundo parágrafo.

topo

TAG: <br> Comando: QUEBRA DE LINHA
Objetivo do TAG: definir o encerramento da linha atual, saltando para a próxima linha, como no meio de um parágrafo num documento de texto.
Sintaxe Básica:
  • Linha <br> outra linha
Exemplo:
Esta é a primeira linha<br>que continua nesta segunda linha.
Como fica:
Esta é a primeira linha
que continua nesta segunda linha.

topo

TAG: <hr> Comando: LINHA HORIZONTAL
Objetivo do TAG: traçar uma linha que divide horizontalmente a página, usada em geral para separar seções de uma mesma página.
Sintaxe Básica 1:
  • <hr>

Sintaxe Básica 2:

  • <hr width=75%> (define a linha horizontal como tendo o tamanho de 75% da página)
Exemplo:
Este é o primeiro bloco da minha página
<hr>E este é o segundo bloco da minha página.
Como fica:
Este é o primeiro bloco da minha página

E este é o segundo bloco da minha página

topo

TAG: <b> Comando: COLOCA O TEXTO EM NEGRITO
Objetivo do TAG: realçar um texto através do recurso de colocar a letra em negrito.
Sintaxe Básica:
  • Linha <b> texto importante </b>
Exemplo:
Esta é a minha primeira página <b> HTML </b> que eu fiz!.
Como fica:
Esta é a minha primeira página HTML que eu fiz!

topo

TAG: <i> Comando: COLOCA O TEXTO EM ITÁLICO
Objetivo do TAG: realçar um texto através do recurso de colocar a letra em itálico.
Sintaxe Básica:
  • Linha <i> texto importante </i>
Exemplo:
Esta é a minha <i> primeira </i> página HTML que eu fiz!.
Como fica:
Esta é a minha primeira página HTML que eu fiz!

topo

TAG: <u> Comando: COLOCA O TEXTO EM SUBLINHADO
Objetivo do TAG: realçar um texto através do recurso de colocar a letra em sublinhado.
Sintaxe Básica:
  • Linha <u> texto importante </u>
Exemplo:
Esta é a minha primeira página HTML que <u> eu </u> fiz!.
Como fica:
Esta é a minha primeira página HTML que eu fiz!

topo

TAG: <center> Comando: CENTRALIZA NA PÁGINA
Objetivo do TAG: centralizar todo o texto, ou imagens, desse ponto até o tag de fechamento.
Sintaxe Básica:
  • <center> Linha de texto centralizada </center>
Exemplo:
<center> Esta linha está centralizada!. </center>
Como fica:

Esta linha está centralizada!.

topo

TAG: <h1>...<h6> Comando: DEFINE UM NÍVEL DE CABEÇALHO
Objetivo do TAG: realçar os diversos níveis de cabaçalhos de modo hierárquico num apágina; os níveis vão desde <h1> até <h6>, passando por <h2>, <h3>, e assim por diante.
Sintaxe Básica:
  • Linha <h2> Cabeçalho de Nivel 2</h2>
Exemplo:
<h1>Cabeçalho de Nível 1</h1>
<h2>Cabeçalho de Nível 2</h2>
<h3>Cabeçalho de Nível 3</h3>.
Como fica:

Cabeçalho de Nível 1

Cabeçalho de Nível 2

Cabeçalho de Nível 3

topo

TAG: <img src> Comando: INSERE UMA IMAGEM NA PÁGINA
Objetivo do TAG: realçar um texto através do recurso de colocar a letra em sublinhado.
Sintaxe Básica:
  • Texto <img src="seta.gif"> mais texto.
Exemplo:
Esta é uma seta <img src="seta.gif"> que peguei da Internet.
Como fica:
Esta é uma seta que peguei da Internet.

topo

TAG: <a href> Comando: INSERE UM LINK PARA OUTRA PÁGINA
Objetivo do TAG: insere um link na página, destacando o "endereço" com uma linha sublinhada, permitindo ao usuário que clicar sobre o link, ir diretamente à outro local, dessa ou de outra página.
Sintaxe Básica:
  • Texto <a href="endereço"> mais texto.
Exemplo:
Ir para <a HREF="http://www.superdicas.com"> Panizo's Home Page</a> para um Help Desk.
Como fica:
Ir para Panizo's Home Page para um Help Desk.

topo

TAG: <a href="mailto:...> Comando: INSERE UM LINK PARA E-MAIL
Objetivo do TAG: insere um link de E-Mail na página, permitindo ao usuário que clicar sobre o link, enviar um e-mail diretamente ao destinatário indicado no comando.
Sintaxe Básica:
  • Texto <a href="mailto:e-mail"> mais texto.
Exemplo:
Clique <a HREF="mailto:webmaster@superdicas.com">AQUI</a> para enviar um E-Mail para mim.
Como fica:
Clique AQUI para enviar um E-Mail para mim.

topo


Um Exemplo Completo:

Abaixo indicamos, puramente como exemplo didático, uma página com todos os elementos básicos de uma Página que usa apenas os TAGs básicos, descritos nesta seção. Veja bem como os comandos se integram, seu posicionamento, e veja o resultado final clicando AQUI.


<html>
<head>
<tittle>
Minha Primeira Home Page</tittle>
</head>
<body>
<h1> Esta é minha PRIMEIRA Home Page</h1>
<hr>
Meu Nome é <b>Francisco Panizo Beceiro</b> e nasci em <u>4 de janeiro</u>.
e moro na cidade de <i><b>São Paulo</b></i> desde 1970.
<hr>
Eu Gosto muito desta figura: <img src="emobras.gif"> pois lembra que estamos <b>sempre</b> em construção.
<hr>
<p>Agora vou colocar 2 links para vocês darem uma olhada:</p>
Vírus Alerta: <a href="http://www.pypbr.com/noticias/"> no Geocities</a>. Internet: <a href="http://www.abcdicas.com.br"> no Tripod</a>.
<hr>
<center>
Para enviar um E-Mail, clique <a href="mailto: webmaster@superdicas.com"> AQUI</a>.
</center>
</body>
</html>

topo

PESQUISA ON-LINE:
Vote em nossa Enquete OnLine

Atenção: não temos condição de dar suporte direto para todos os visitantes; use nosso Super Fórum Web Design para poder enviar suas dúvidas. O registro é gratuito!
Para um suporte diferenciado use o nosso Clube do Help Desk.


| Suporte | Cadastro | Consultoria | Quem Somos |