Академический Документы
Профессиональный Документы
Культура Документы
Neste tutorial veremos uma introduo de como funciona a linguagem HTML. Veremos as principais tag's da linguagem.
por Leandro Oriente
3328 354 26 255
Este artigo trata de uma introduo ao HTML. O HTML uma abreviao de HyperText Markup Language ou seja que em portugus significa, Linguagem de marcao de Hipertexto. Os arquivos HTML so interpretados pelos navegadores (browsers), portanto, caso voc tenha algum arquivo HTML no computador, basta pedir que o seu navegador abra ele. O HTML trabalha com o sistema de tags (etiquetas). Esse sistema funciona da seguinte maneira. Ex:
1 <tag>Contedo da tag</tag>
Toda tag aberta, deve ser fechada, salvo raras excees, nesses casos ela pode ser fechada da seguinte maneira:
1 </tag>
Uma tag HTML pode conter outra tag dentro dela, e quantas forem necessrias.
- Uma pgina HTML tem a extenso .html, porm elas podem ser geradas dinamicamente com alguma linguagem com o PHP, ASP, PYTHON Ento em alguns casos essa extenso alterada para a extenso da linguagem utilizada para gerar a pgina HTML.
Vou abordar agora as principais tags HTML e explicar um pouco de seu funcionamento.
HTML <html> </html> Essa tag responsvel por definir o incio de um documento HTML e seu fim. Logo deve ser aberta no incio do documento e fechado no seu final. HEAD <head></head> Tag que define o incio e o fim do cabealho do documento. Abordaremos mais abaixo o que deve ser inserido no cabealho. BODY <body></body> Tag onde devem ser inseridos os contedos do site que devero ficar visveis ao usurios quando a pgina for renderizada no navegador. Somente com essas trs tags j podemos ter uma estrutura HTML bsica. Segue um exemplo.
1 2 <!DOCTYPE html> <html> 3 <head> 4 <!--conteudo do head--> </head> 5 <body> 6 <!--conteudo do body--> 7 </body> 8 </html> 9
O <!DOCTYPE html> inserido antes da tag <html> no exemplo anterior para especificar para o navegador o tipo de pgina HTML que ele vai renderizar. Existem diferentes tipos de HTML usados atualmente porm os mais usados so o HTML 5, cujo doctype especificado o que eu utilizei no exemplo, o HTML 4.1 e o XHTML. Nos ltimos dois exemplos o doctype um pouco mais complexo, trazendo informaes sobre o tipo de documento (Strict, transitional e frameset). Porm recomendo que sempre utilizem o doctype do HTML 5, pois ele mais enxuto e mesmo que no utilize HTML 5 em sua pgina no vai prejudicar em nada a renderizao da pgina pelo browser.
Cabealho <head>
No cabealho trazemos informaes que sero usadas pelo navegador como: TITLE <title>Sou o ttulo da pgina</title> Ttulo da pgina a ser exibido (texto que fica na aba de seu navegador quando uma pgina esta aberta) LINK <link href="" type="" media="" rel="" /> Geralmente usado para selecionar arquivo externo no HTML. Um uso comum dele para selecionar arquivos CSS (responsveis por definir a aparncia da sua pgina para o usurio final). Ex:
1 2 3 4 5 6 7
<!doctype html> <head> <title>Ttulo da pgina</title> <meta charset="utf-8" /> <meta name="description" content="Breve resumo sobre o contedo desta pgina" /> <link href="estilo.css" rel="stylesheet" type="text/css" /> </head>
1 <ul> 2 <li>Sou um elemento de uma lista</li> <li>Sou outro elemento dentro da lista</li> 3 </ul> 4
<a></a> O A um elemento responsvel por "linkar" pginas/arquivos na sua pgina. Atravs do atributo href voc pode especificar aonde est a pgina/arquivo a ser linkado na pgina. Ex:
1 <div> 2 <h2>Ttulo relevante</h2> <p>Texto do bloco</p> 3 <img src="alerta.jpg" width="10" height="7" alt="alerta" /></div> 4
<table></table> <td></td> <tr></tr> A tag TABLE usada para dermacar uma tabela. As linhas so marcadas com a tag TR enquanto as colunas ficam com a tag TD. possvel agrupar colunas com o atributo colspan e linhas com o atributo rowspan. Um <td colspan="2"></td>
significa que aquela coluna vai ocupar o espao de duas colunas. Ex: Tabela 22
1 2 <table> <tr> 3 <td>Primeira coluna da primeira linha</td> 4 <td>Segunda coluna da primeira linha</td> 5 </tr> <tr> 6 <td>Primeira coluna da segunda linha</td> 7 <td>Segunda coluna da segunda linha</td> 8 </tr> 9 </table> 10
<form></form> A tag FORM serve para demarcar a rea de um formulrio. No caso do form abordarei as tags utilizadas por ele em grupos diferentes pois so muitos. A tag form tem o atributo action, que determina qual ao vai ser executada quando ele for submetido. Ex:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
<input type="text" value="Digite aqui" /> <!--Campo onde o usurio pode digitar um pequeno texto. Caso queira deixar um valor por padro, basta adicionar um atributo value com o valor desejado.--> <input type="submit" /> <!-- Cria um boto que vai submeter o formulrio ao ser clicado.--> <input type="file" /> <!-- Cria um campo para fazer uploads de arquivos.--> <input type="radio" type="grupo" /> <!-- Cria um campo para seleo nica. As opes disponveis so agrupadas pelo type, ou seja, se houverem 3 inputs radio com o mesmo type, o usurio s poder escolher um deles.--> <input type="checkbox" /> <!-- Bem semelhante ao radio, porm permite mltipla seleo.-->
<textarea></textarea> A tag TEXTAREA tem um comportamento semelhante ao do input text, porm ele destinado a textos maiores. Ex:
1 <textarea></textarea>
<label></label> A tag LABEL permite que voc atribua uma legenda a um campo do seu formulrio. Existem duas formas de usa-la: Ex: 1-