Início » Web » HTML

Atributos básicos do HTML

Enviado por Flavio Ribeiro, ter, 21/10/2008 - 20:05

O HTML quando usado puramente serve apenas para criar páginas estáticas, mas todas as linguagens de programação o utilizam como base, sendo assim, podemos dizer que ele é a base da Web.

Inicialmente a web foi desenvolvida para transmitir informacoes em formato de texto puro, mas para a difusão da web atingir a grande massa, foi preciso implementar formas de transmitir outros formatos e imagens através dos mesmos arquivos de texto puro, assim surgiu o HTML (Hyper Text Markup Language ou Linguagem de Marcação de Hipertexto). Ele nada mais é que uma sequência de etiquetas, e atributos que diz o seu browser como intrepretar a sua página e mostrar ao usuário apenas a parte visual.

Índice:
body
Formatacao de texto
Posicao de texto
Listas
Tabelas
Formularios
Hiperlinks
Imagens


A estrutura básica de uma página é constituida de 6 etiquetas que é chamada de tags:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>Esse é o corpo da minha primeira página </body>
</html>

Se você escrever estas 8 linhas em um arquivo texto comum e nomeá-lo como nome_da_pagina.html e abrir no seu browser você terá sua primeira página da internet.

Vamos ver o que significam cada tag:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> = diz ao browser qual a versão do html você está utilizando, não é obrigatória, mas evita que o browser gere erros.

<html> = inicia a sessão do código

<head> = cabeçlho, nessa parte você pode passar uma série de informações ao browser, como executar códigos de outra linguagens como JavaScript por exemplo

<title> </title> = define o título da página

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> = declara qual a codificação de caractére que no nosso caso é iso-8859-1

</head> = a barra "/" indica que estamos fechando uma tag, nesse caso fechando o cabeçalho

<body> </body> = entre estas tags serão inseridas todas as informações da página

</html> fecha a sessão do código


Esse é o básico, vamos ver agora o significado de uma série de outras tags que podemos utilizar.

Topo <body></body> podemos inserir uma série de argumentos dentro de algumas tags, por exemplo <body bgcolor="#0000cc" text="#000000">

  • alink="#000099", link="#CCCCCC" , vlink="#CCCCCC" = definem cores para os Hiperlinks em seus três estados, não visitado, visitado e selecionado, onde # é o código da cor
  • text="#CCCCCC" = cor do texto
  • background="imagem.jpg", bgcolor="#FFFF00" = definição de imagem de fundo para a página ou cor
  • bgproperties=" "
  • id="" = define um ID para a tag, que pode ser utilizado em estilos CSS ou execussão de códigos
  • class="", style=" " = definições de estilos CSS
  • dir="ltr", dir="rtl"
  • lang="pt" = define a linguagem como português
  • leftmargin="", rightmargin="", topmargin="", bottommargin=" ", marginheight="", marginwidth="" = definição das margens da página medido em pixels
  • onBlur="", onError="", onFocus="", onLoad="", onResize="", onUnload="" = execussão de códigos em eventos
  • title="" = define um título para a tag, diferente da tag <title></tilte>

Topo Formatação de texto

<h></h> Cabeçalho de 1-6, utilizei <h2>text</h2>

<b> </b> Negrita um texto
<strong></strong> Similar ao negrito
<i></i> Itálico
<u></u> Sublinhado
<strike></strike> texto riscado
<sub></sub> texto subscrito

<sup></sup> texto sobrescrito
<tt></tt> Texto teletipo (largura fixa)
<small></small> texto menor
<big></big> texto maior
<font size="x"></font> tamanho da font, utilizei x= -1
<font face="nome da fonte"></font> Especifica o nome da fonte, utilizei Courier New, Courier, mono
<font color="X"> Atribui cor a uma fonte, utilizei x= #0000FF

Topo Posição de texto

<blockquote></blockquote> desloca o bloco de texto
<br> insere qubra de linha
<center></center> centraliza texto ou blocos
<div></div> Divide página em seções

<hr> Insere uma régua horizontal ao longo da página utilizei <hr size="5px" width="200px" align="left"noshade>
<p> Cria parágrafos;

Topo Listas

<DL> </DL> título de definição
<DD> </DD> definição
<DT> </DT> termo de definição
    <OL> </OL> Inicia / termina lista ordenada
  1. <LI></LI> Item da lista

    <UL> </UL> Lista não ordenada;
  • <LI TYPE=SQUARE> você pode escolher o tipo de LI

Topo Tabelas

<table border="1" cellspacing="5" cellpadding="0" width="400" ></table> Inicia e finaliza uma tabela;

<tr></tr> abre uma linha fecha uma linha;

<td></td> abre uma celula fecha uma celula;

<TD COLSPAN="x"> mescla aquantidade X de colunas

<TD ROWSPAN="x"> mescla aquantidade X de linhas;

<TD width="x"> especifica a largura da celula ;

<TH></TH> define o cabeçalho da tabela;

nesse caso utilizei <table border="1" cellspacing="0" cellpadding="5" width="400"><tr>
<td width="386">Texto</td></tr></table>

Topo Formulários

<form action ="url" Method="get/post"> inicia e define parâmetros, nesse caso utilizei <form action="url.com.br" method="get" target="_blank" ></form>

<input type="text" name="textfield">

<input type="password" name="textfield2">

<input type="checkbox" name="checkbox" value="checkbox"> <input type="checkbox" name="checkbox2" value="checkbox" checked>

<input name="radiobutton" type="radio" value="radiobutton"> <input name="radiobutton" type="radio" value="radiobutton" checked>

<select name="select"> <option>Spyderit</option> <option>Flavio</option></select>

<textarea name="textarea" >texto</textarea>

<input type="HIDDEN"> Campo oculto;

<input type="file" name="file">

<input type="reset" name="Reset" value="Reset"> <input type="submit" name="Submit" value="Submit">

Topo Hiperlinks

Link <a href="http://www.spyderit.com.br" title="Link" target="_blank">Link</a>

  • <a name="ancora2"></a>
  • ancora1 <a href="#ancora1">ancora1</a>
  • <a name="ancora1"></a>
  • ancora1 <a href="#ancora2">ancora1</a>

    • Topo Imagens

    <IMG SRC="URL"> Apresenta uma imagem;

    <IMG SRC="URL" align=top/middle/bottom> Alinha a imagem em relação a base do texto;

    <IMG SRC="URL"align=left/right> Alinha imagem em relação a página ou frame;

    <IMG SRC="URL" alt="texto"> mostra descritivo;

    <IMG SRC="URL" width="X" height="Y"> especifica largura e altura;

    <IMG SRC="URL" border="0"> retira as bordas da imagem;

    <IMG SRC="URL" hspace="X" vspace="Y"> especifica espaçamentos vertical e horizontal;

     

    Muito bem, aqui estão apenas algumas tags básicas para vcê conseguir escrever sua página em qualquer arquivo texto
    Abraço,
    Flavio Ribeiro
    www.spyderit.com.br

    »