[HTML]
HTML é uma linguagem desenvolvida para a internet, que é interpretada por browsers de internet (Internet Explorer, Netscape Communicator, etc). É uma das linguagens mais simples, pois não há necessidade de compilar o que foi escrito, basta abrir no browser.
HyperTextMarkupLanguage seria o nome completo, abreviado por HTML. Esse nome significa Linguagem de Hipertexto, pois há o uso de links. Links são a principal função do HTML.
Hiperlinks, ou Links, são partes do documento que com a interatividade do usuário o deslocam para outro documento. Entendeu? Por exemplo: isso aqui é um link. Quando você o clickar, irá ao site da amazon.
[Tutorial de HTML]
by casgoodie
Há dois tipos de editores de HTML, os WYSWYG* (pronuncia-se "wiz-e-wig"), e os que você tem que escrever todo o código HTML na mão. Dois exemplos de editores WYSWYG são o Macromedia Dreamweaver e o Microsoft FrontPage, neles, basta ter criatividade. Não recomendo que você aprenda HTML com um WYSWYG, aliás recomendo que você use um editor de texto bem simples, como o Bloco De Notas, que acompanha o Windows.
* WYSWYG: "What You See Is What You Get", ou seja, O Que Você Vê É O Você Tem.
Uma página em HTML é consituída de tags com oconteúdo dentro. Por exemplo: <font face="verdana">Aqui o texto estará na fonte "Verdana"</font>
Ao ver esse exemplo, percebe-se que as tags ficam entre <,>s, e a tag que finaliza o conteúdo entre </,>s. A tag finalizadora sempre tem uma / após o <.
Mas não pense que é tudo por aí existem algumas tags que simplesmente encaixam-se unicamente entre <,>s. Por exemplo: o tag <hr>, esse tag insere uma linha horizontal na página.
Primeiro vou mostrar o que é vital num documento hmtl:
<html> <head> <title>Aqui Vai O Título Da Página</title> Dentro do "head", geralmente vão javascripts, stylesheets, etc. Mas Esse é o cabeçário da página. </head> <body> Aqui vai todo o conteúdo da página, tudo que for escrito aqui aparecerá no browser. Você pode inserir imagens, tabelas, etc aqui. </body> </html> |
O que achou? É bem simples. Para treinar, escreva o código acima no bloco de notas, e salve como teste.htm, depois abra-o no seu browser.
Essa aí é a estrutura básica de uma página, agora vou dar uma lista com as tags principais e suas funções:
TAG | Função |
<html></html> | o primeiro e último tag |
<head></head> | cabeçario |
<title></title> | título da página |
<body></body> | corpo do documento |
<hX></hX> *X= nº de 1 a 6 | tamanha da letra, h1é a maior |
<font></font> | para editar a fonte, cor, etc |
<a></a> | para inserir um link |
<img> | para inserir uma imagem |
<pre> | escreve o texto do modo que foi digitado |
<address></address> | endereço de email |
<b></b> | escreve em negrito |
<i></i> | escreve em itálico |
<u></u> | escreve sublinhado |
<br> | quebra de linha |
<hr> | linha horizontal |
<p> | parágrafo |
BODY: dentro do tag body, você define a cor do texto, cor do link, cor do link ativo, cor do link visitado, cor de fundo, ou imagem de fundo. Por exemplo: <body bgcolor=green text=white link=blue alink=black vlink=red>conteúdo aqui</body> - Isso te daria o fundo verde, texto branco, links azuis, links ativos pretos e links visitadosvermelhos.
H1,H2,H3....: esses tags editam o tamanho e formatação do texto, por exemplo, você usaria o H1 para escrever o título, pois é o maior de todos. Exemplo: <h1>Título</h1>
FONT: aqui você edita a fonte, como se clickasse no Formatar....Fonte..., tendo controle da fonte, tamanho da letra e cor. O tamanho da letra é variável entre 1 e 7, sendo 3 o padrão. Por exemplo: <font face="verdana" size=7 color="white">texto aqui</font> - Com esse código você resultaria nisso: o texto
A: é o tag mais interessante do html, ele linka palavras ou imagens, para usá-lo, coloque um texto, palavra , ou imagem entre os <a> e </a>. Se o link for uma palavra, a cor dele vai ser a que você definiu no BODY, se você não tiver definido cor de link, o browser usará o padrão(azul,vermelho e roxo). Exemplo: <a href="http://www.cade.com.br">Cadê?</a>, quer ver o resultado? Aqui vai: Cade?
IMG: esse tag também é legal, pois faz uma das coisas que faz o site ficar mais interessante, insere uma imagem. Exemplo: <img src="http://casgoodie.excelland.com/cafnetlogo.jpg"> - isso inseriria o logo da CafNet na página
PRE: provavelmente um dos tags mais inúteis, ele faz com que o browser interprete o que foi escrito no PRE exatamente cmoo foi escrito no PRE. Exemplo: <pre>que inútil</pre>
ADDRESS: uma maneira de inserir um link para email, que ao ser clickado abre o programa de email do usuário, outra maneira de fazer isso é com o próprio <a>, aqui vai um exemplo de cada: <address>casgoodie@hotmail.com</address> e <a href="mailto: casgoodie@hotmail.com">Meu email</a>
B, I e U: esses tags dão efeito de negrito, itálico e sublinhado. Exemplo: <b>texto em negrito</b>
BR: um tag bem brasileiro pelo nome hein? BR é abreviação de "line break", ou seja, quebra de linha. Basta inserir <br> aonde quer que haja uma quebra de linha.
HR: insere uma linha horizontal. É só escrever <hr> onde deseja uma linha horizontal, boa para dividir partes da página.
P: um tag muito importante, pois é ele que spara os parágrafos, é como o HR e o BR, só escreva <p> onde quiser.
Agora você está pronto para escrever em html, quando estiver dominando esses tags, experimente um editor WYSWYG, que realmente facilita o trabalho. Examine páginas em html, clique com o botão direito sobre o site que está visitando e escolha "Exibir Código Fonte", é uma boa maneira de aprender.