[HTML] Tutorial Basico

[Teotónio Ricardo]

[HTML] Tutorial Basico

Para você que está iniciando a programar em HTML desejo boa sorte, e vai uma sugestão, se não entender alguma tag (comando), não desista esperimente-á em algum documento HTML e talvez vendo como ela funciona ira entende-lá mais facilmente. É recomendado que principiantes usem o bloco de notas do Windows 95 para elaborarem suas primeiras páginas (depois de uma olhada no editor HTML para iniciantes que se encontra na seção Faça sua HP), deve-se salvar esses arquivos com extensão .htm ou .html (escolha um padrão, prefiro html) e depois você pode visualizar suas páginas usando seu broswer, sendo ele o Netscape ou o Internet Explorer.

     Uma página html básica tem a formula parecida com a seguinte:

Code Select Expand













Conteúdo da página......



Elementos <title> e <body>

<title>
     Serve para colocar um titulo na página, que irá aparecer na parte mais acima do navegador. Ao cabar de colocar o título coloque: </title> Exemplo:

Code Select Expand

<body>

Serve para configurar algumas coisas da página, como cor de fundo(bgcolor=cor),figura de fundo(background=imagem),cor do texto(text=cor),cor dos links(link=cor), cor dos links já vistos(vlink=cor)e cor dos links abertos naquele momento(alink=cor). Exemplo:

Code Select Expand

Atributos para textos

 Em HTML praticamente tudo funciona com comandos, se você quiser fazer um paragrafo ou uma quebra de linha não poderá simplesmente apertar ENTER e escrever na linha abaixo como em editores de texto, terá que usar os comandos de paragrafo e de quebra de linhas que são seguidamentes <p> e

      Exemplo de texto com Paragrafos e quebra de linhas:

Code Select Expand

Olá!
Oi!

Tchau
Que ficaria:

Olá!
Oi!

Tchau



Existem outros atributos para textos, conheça alguns deles abaixo:

# <center>Texto</center> - Texto centralizado
# Texto - Texto em Negrito
# Texto - Texto Sublinhado
# Texto - Texto em Italico
# <h#>Texto</h#> - Texto com o nivel #
#

Texto

- Texto preformatado
#

Texto

- Bloco de notas
# <address>Texto</address> - Endereços
# <code>Texto</code> - Carecteres de tamanhos fixos



Letras

Usando letras pode mudar as cores de um texto, aumentar ou diminuar seu tamanho e mudar o estilo da fonte. O comando é o seguinte:

<Font color=\\"cor_do_texto\\">Texto</font> - Mudar a cor de um texto
<Font size=#>Texto</font> - Mudar o tamanho para #
<Font face=\\"estilo\\">Texto</font> - Mudar o estilo da fonte



Barras

   Se você quiser adicionar uma barra a sua página, use o comando:

Code Select Expand

(Onde # é a largura) Ex.:


Links

 Links são conexões para outros endereços usados geralmente para acessar outras páginas ou pegar algum arquivo
 A formula para inserir um link é a seguinte:

Code Select Expand

Texto Link


No caso de frames ou se você quiser que o endereço apareça em outra janela você pode selecionar o alvo com o seguinte comando:

Code Select Expand

Texto Link
Um exemplo, para criar um link para o webtuga adicione:

Code Select Expand

< a href="http://www.webtuga.com">Webtuga



Ancôras

  Para criar um link que acesse determinada parte de uma página você deve usar ancôras.
     Para criar uma ancôra faça o seguinte:
     Na página que terá a ancôra adicione:

Code Select Expand

Parte
     E no link use a seguinte formula:

Code Select Expand

Texto Link



Imagens

Adicionar imagens em uma página é uma coisa que não pode faltar na hora de tornar a página bonita.
O comando para adicionar imagens é:

Code Select Expand

     No caso se quiser fazer uma imagem que seja um link, em vez de colocar o texto link adicione o comando citado. Lembre-se de botar após o src=\\"imagem.ext\\" a linha: border=0 se você não quiser que a imagem tenha borda

  Para selecionar o alinhamento de uma imagem use:

Code Select Expand

Listas

Não numeradas

Inicie uma lista não numerada com a etiqueta: <ul>
     Adicione um item a lista com a estiqueta: <li>Item
     Repita a etiqueta para adicionar items quantas vezes quiser e depois finalize a lista com a etiqueta: </ul>


Numeradas

 Se você quiser fazer uma lista numerada, simplesmente substitua os comandos <ul> e </ul> por <ol> e </ol> seguidamente da lista não numerada


Descritivas

Uma lista de descricao usualmente consiste em alternar um descricao do titulo (abreviado como dt) e Um descricao descricao (abreviado como dd). A descricao geralmente inicia em uma nova linha, porque o viewer deixa toda linha para o conteudo da descricao do titulo dt

      Segue um exemplo de linguagem HTML, de listas descritivas:

<DL> <DT> National Center for Supercomputing Applications <DD> Se localiza no campus da Universidade de Illinois, em Urbana-Champaign. NCSA e\\' uma das quatro instituicoes-membro, no Nacional Metacenter for Computational Science and Engineering. <DT> Cornell Theory Center <DD> O CTC se localiza no campus da Cornell University, in Ithaca, New York. CTC e\\' outra instituicao-membro do Nacional Metacenter for Computational Science and Engineering. </DL>
     O resultado se parece com:

National Center for Supercomputing Applications
    Se localiza no campus da Universidade de Illinois, em Urbana-Champaign. NCSA e\\' uma das quatro instituicoes-membro, no Nacional Metacenter for Computational Science and Engineering.
Cornell Theory Center
    O CTC se localiza no campus da Cornell University, in Ithaca, New York. CTC e\\' outra instituicao-membro do Nacional Metacenter for Computational Science and Engineering.

As entradas com etiquetas <DT> and <DD> podem conter:

-multiplos paragrafos (separados por etiquetas de paragrafo),
-listas, ou
-outra informacao da descricao.



Tabelas

 Inicie uma tabela com: <table border=\\"largura_da_borda\\">

     Após isso selecione os campos usando: <tr><td>Campo1</td><td>Campo2</td> e assim seguidamente.
     Quando acabar de selecionar os campos, finalize os campos com: </tr>
     Depois é só adicionar os items usando: <tr><td>Item1</td><td>Item2</td></tr> e depois criando uma nova lista de items com: <tr><td>Item1</td><td>Item2</td></tr>
     Finalize a tabela com: </table>

Como exemplo, olhe como ficaria uma tabela parecida com essa citada:



E pronto aqui esta, é claro que podem sempre utilisar um editor de html para ser mais facil.

Espero ter feito falta

[Peludo]

BoAS,

Ta  bom, era mesmo isso k andava á procura.. bem pensado cenourinha..


cumps [  ]

[revx]

Ainda me lembro quando começei a aprender html há 2 anos  : fumar :

Tá porreiro, qualquer dia destes crio um sobre php  : fumar :