HTML Basico

TUTORIAL HTML
B S I C O
CRIANDO E PUBLICANDO PGINAS DA WEB
Copyright 2008: Thas Mendes Ramalho (thais.mendes@criarwebsite.com) permitida a redistribuio deste tutorial somente em sua verso original, sem alteraes. Este e outros tutoriais esto disponveis na pgina: http://www.criarwebsite.com
SOBRE O TUTORIAL: Este tutorial faz parte de uma srie completa para aqueles que querem aprender a desenvolver pginas da web. Ao final desta srie de tutoriais, voc dever estar apto(a) a criar websites completos. Para que o tamanho do arquivo no ficasse muito grande, este tutorial foi dividido em partes: 1. Bsico 2. Formulrios 3. Tabelas Existem dezenas de outros tutoriais de HTML na Internet mas eu quis desenvolver um tutorial que fosse o mais fcil e rpido de seguir e de consultar, ainda que contendo uma srie de exemplos. Sugestes e crticas a respeito do tutorial sero muito bem-vindas. Se encontrar falhas neste tutorial, por favor, entre em contato comigo e verei como posso melhor-lo. Todos os colaboradores tero seu nome e website includos nas revises. Devido ao formato deste documento (.PDF), no foi possvel incluir vdeos diretamente entre os textos. Alm disto, minha inteno foi que este documento pudesse ser utilizado para consultas rpidas no futuro. Por este motivo, uma verso on-line do tutorial foi criada em meu website, contendo mais alguns exemplos de cdigos - alm de vdeos, imagens e modelos prontos de sites. Para adquirir a continuao deste tutorial, por favor, acesse: http://www.criarwebsite.com
Este tutorial parte da suposio de que voc no tem praticamente nenhum conhecimento sobre como so criadas pgina da web. Caso voc j tenha tido algum contato com a linguagem HTML, os primeiros tpicos podem parecer simples demais e esta a inteno, realmente. Qualquer que seja seu nvel de instruo, este tutorial dever ajud-lo a aprender a construir pginas da web simples, rapidamente.
== ndice ==
INTRUDUO:
A. O Que HTML? B. HTML e Compatibilidade. C. Como Editar, Salvar e Visualizar? 1. 2. 3. 4. a. b. c. d. 5. 6. 7. 8. 9. a. b. c. HTML BSICO: Estrutura do HTML Meta Tags Propriedades do <body> Formatao de texto Sub-Ttulos Propriedades da Fonte Outras Opes de Formatao Quebras de Linha Pargrafos Linha Horizontal Imagens e Sons Links Internos e Externos Listas Listas Ordenadas Listas No-Ordenadas Listas Descritivas
- CONCLUSO
INTRODUO
1. O Que HTML? HTML (Hypertext Mark-up Language) a linguagem de hipertexto utilizada para desenvolver pginas da web. O HTML formado por marcaes (ou tags) que indicam ao navegador (programa com o qual voc pode visualizar as pginas da web) como voc quer que os elementos desse documento sejam apresentados. Ou seja, uma pgina em HTML escrita utilizando texto puro (letras, nmeros, etc.), que ser interpretado pelo navegador este, por sua vez, dever ler todas as tags (marcaes) do documento e apresentar os elementos da pgina de acordo com elas. Exemplos de Tags: Tag nica: Tag dupla: (quebra de linha) ..texto.. (sublinha o texto)
Nota: Voc pode utilizar tanto letras maisculas quanto minsculas ao criar sua pgina utilizando HTML: = 
As pginas da web so abertas por um Programa de computador chamado de "navegador". Exemplos de navegadores so: FirefoxTM e Internet ExplorerTM
2. HTML e Compatibilidade: Os vrios navegadores interpretam HTML de formas diferentes. Caso pretenda criar websites profissionalmente, o ideal que voc instale vrias opes de navegadores em seu computador, de forma a prever a aparncia que suas pginas da web tero, ao menos nos navegadores mais comumente utilizados. O computador que o internauta utiliza ao visitar seu website tambm poder apresentar suas pginas de uma forma diferente daquela que o seu computador apresenta, dependendo da configurao de tela do monitor, da quantidade de cores suportadas, etc.... Atualmente, sua maior preocupao poder ser com a resoluo de tela utilizada, pois esta difere bastante entre os diversos computadores. Os computadores mais antigos ainda podem ter uma resoluo de tela de 480 por 600 pixels, enquanto os mais novos chegam a 1440 por 900 pixels. Isto faz com que o tamanho dos textos e imagens apaream maiores ou menores, e faz com que alguns sites no caibam inteiros na janela do navegador (precisando ser utilizada a barra de rolagem para ver o restante da pgina). Sendo assim, a aparncia final da sua pgina ir depender do programa (navegador) e do computador que esto sendo utilizados por cada visitante do seu website.
3. Como Editar, Salvar e Visualizar: As pginas da web, como mencionado, so desenvolvidas utilizando texto puro, o que significa que basta escrever o cdigo em um programa de edio de texto simples (como o Bloco de Notas do Windows) e depois salv-lo como: Tipo: Todos os arquivos (*.*) , nomeando-o com a extenso .html (exemplo: pgina.html)
Voc pode utilizar qualquer editor de texto simples para criar sua pgina da web. Basta salvar sua pgina como tipo: Todos os Arquivos e com a extenso .html Alternativamente, voc pode salv-las com a extenso padro de texto .txt e renome-las mais tarde com a extenso de arquivo HTML: .html ou .htm Nota: O WordTM um exemplo de Editor de Texto que no serve para digitar o cdigo de pginas da web, pois ele gera documentos formatados (texto em negrito, itlico, imagens, tabelas, etc.) - Ele oferece apenas a possibilidade de converter seus documentos para o formato de pginas da web.
Eu no recomendo que voc utilize conversores de documentos para criar suas pginas da web. Os programas que convertem texto formatado em pginas da web geralmente limitam a aparncia que voc pode dar ao seu site, e geram cdigos cheios de falhas e erros. Isso pode causar incompatibilidade com alguns navegadores e tambm tornar seu cdigo quase ilegvel. Alm de editores de texto puro, voc pode utilizar um Editor de HTML especializado para editar suas pginas. Existem diversos Editores de HTML no mercado, inclusive editores online e editores gratuitos, basta escolher o que for ideal para voc. Um conselho: editores de pginas da web que so muito caros geralmente no valem o custo.. j testei sharewares e verses de avaliao destes programas, mas desinstalei todos eles antes do prazo de utilizao acabar. O tipo de ferramenta que sempre utilizei para criar minhas pginas da web, antes mesmo de conhecer muito bem a linguagem HTML (eu ainda no sabia criar tabelas e conhecia poucas marcaes), so os Editores de HTML que ajudam a escrever o cdigo diretamente na fonte. Com um clique de boto, ele inclui as marcaes do HTML para voc, e quando voc menos esperar ter memorizado todas e poder escrever tudo sem a ajuda do editor. Com o tempo, voc poder utilizar os botes do programa somente como atalhos, pois saber todas as marcaes necessrias. Outro recurso interessante desses editores o de auto-completar. Voc comea a digitar uma marcao e ele termina de complet-la. Isto aumenta a velocidade de criao da pgina, sem limitar sua capacidade criativa, ao contrrio dos editores visuais, os quais abordarei mais adiante. Para achar um editor de HTML, basta buscar em sites de downloads. Se voc no se sente vontade com a lingua inglesa, busque em sites de downloads brasileiros. Caso contrrio, teste o HTML-Kit (http://www.htmlkit.com/download/), um dos melhores editores de HTML gratuitos, em ingls. Outra possibilidade disponvel so os editores de HTML do tipo WYSIWYG (What You See Is What You Get O Que Voc V O Que Voc Obtm), em que voc no precisa editar nem uma linha de cdigo HTML, e so quase to fceis de utilizar quanto programas comuns que geram texto formatado. Este tipo de Editor de Texto, no entanto, no o que procuramos aqui, certo? Eles criam dependncia, porque no ajudam voc a aprender o cdigo HTML, e limitam suas opes. Alm disso, a maioria deles custa bem caro. Quanto mais recursos o editor escolhido oferecer a voc, mais tempo voc ter que passar aprendendo a utiliz-lo, ao invs de usar esse tempo para aprender HTML. Um editor de cdigo, por outro lado, permite que voc aprenda HTML ao mesmo tempo em que explora suas funes.
PLANO DE AO: 1. Abra o Bloco de Notas ou outro editor de sua preferncia; 2. Digite algum texto simples, utilizando as trs marcaes/tags que vimos at agora: coloque uma parte do seu texto entre e para que ela fique em negrito; outras partes, coloque entre e para sublinhlas; e certifique-se de usar a marcao sempre que quiser que seu texto mude de linha. 3. Salve sua pgina com o nome: index.html e abra-a em seu navegador da internet clicando sobre o cone index.html, da mesma forma que voc faz para abrir qualquer outro arquivo em seu computador.
Para obter ajuda com os planos de ao, veja o vdeo em: http://www.criarwebsite.com/videos Sempre que precisar, pea ajuda tambm em nosso frum: http://www.criarwebsite.com/forum
HTML BSICO
1. Estrutura do HTML: Esta a estrutura de uma pgina em HTML: <html> <head> <title> Aqui vem o Ttulo </title> </head> <body> Aqui vem o principal, o corpo da pgina. </body> </html> Definies: <html> <head> <title> <body> ... ... ... ... </html> </head> </title> </body> => Indicam o incio e o fim da pgina. => Indicam o cabealho da pgina. => Ttulo da pgina, dentro do cabealho. => Entre estas duas marcaes fica quase todo o cdigo que voc ir utilizar para desenvolver sua pgina o corpo da sua pgina.
Exemplo: Veja onde aparece o ttulo, ao abrir a pgina salva.
2. Meta Tags:
Dentro do cabealho da pgina, ou seja, entre <head> e </head>, voc ter tambm um outro componente importante do seu documento: As Meta Tags. Meta Tags so marcaes utilizadas para informar algumas propriedades do seu documento, como autor da pgina, editor de texto utilizado, etc. Elas no so obrigatrias mas h duas delas que voc dever sempre utilizar: Meta Keywords e Meta Description Essas duas marcaes so utilizadas por alguns dos maiores websites de busca para indexar seu website. Sem ter sua pgina indexada nesses grandes buscadores, voc estar perdendo uma grande oportunidade de publicidade para seu website.
<head> <title>Ttulo da Pgina</title> <meta name=keywords value=Aqui vm palavras-chave relacionadas ao contedo do seu website> <meta name=description value=Aqui vem uma breve descrio sobre o seu website.> </head>
As palavras-chave relacionadas ao contedo do seu website (tambm chamadas de Keywords) so as palavras que, ao serem digitadas por uma pessoa em um site de busca, traro sua pgina como um dos resultados. A breve descrio do seu site aparecer nas pginas de resultado das buscas logo abaixo do ttulo da pgina. Como voc pode ver no exemplo acima, algumas marcaes do HTML possuem atributos. Este o caso das meta tags, onde temos os atributos name e value, preenchidos de acordo com sau funo.
3. Propriedades da Tag <body>:
Dentro da marcao <body>, voc poder determinar algumas propriedades para sua pgina da web:
<body background=imagem-de-fundo.jpg> ... </body>
background=
=>
Aqui voc indica a figura que servir de pano-de-fundo (opcional). Trata-se do caminho virtual at a figura - que pode ser, por exemplo: (em outro website) ou
background=http://www.web.com/fundo1.jpg background=figuras/fundo1.jpg background=fundo.jpg
(dentro do diretrio figuras) ou (no mesmo diretrio que a pgina da web)
bgcolor=
=> Aqui voc indica a cor do plano-de-fundo da pgina.
No HTML, voc tem duas opes para determinar uma cor:

Escrever o nome da cor em ingls (blue, red, purple, deepskyblue, etc.) Escrever seu hex number (ou nmero hexadecimal):
#FF8080 #FF80C0 #FF00FF #FF0000 #00FF00 #0080C0 #8080C0 #008000
etc....
text= link= vlink= alink= Cor padro do texto, links, links visitados e links ativos, consecutivamente. Links visitados so aqueles que levam para uma pgina onde o internauta j esteve. Link ativo aquele em que se est clicando.
Outras Propriedades da marcao <body>:
BgProperties=fixed
=> Neste exemplo, o plano-de-fundo permanecer imvel quando a pgina estiver sendo rolada para baixo. Este efeito interessante quando o planode-fundo uma imagem e no somente uma cor. => Define a margem superior da pgina. Se voc quiser definir uma margem maior no alto da pgina ou (como no exemplo acima) retirar toda a margem superior para incluir alguma figura ou tabela junto ao topo da pgina, use esta propriedade.
TopMargin=0
LeftMargin=0 RightMargin=0 BgSound=musica.mid
=> Define a margem esquerda da pgina. => Define a margem direita da pgina. => Define uma gravao de udio, de fundo, para a pgina. Lembre-se apenas de que nem todos tm o mesmo gosto musical que voc....
PLANO DE AO: 4. Abra, no seu navegador da internet, a pgina criada no plano de ao anterior; 5. Clique na pgina com o boto direito do mouse e selecione a opo Exibir Cdigo-Fonte. Isto far com que o cdigo fonte da pgina seja aberto e voc poder edit-lo; 6. Acrescente sua pgina as marcaes novas aprendidas. D um ttulo, escolha as cores do texto e dos links, mude as margens para modificar a posio do seu texto na pgina.
Ilustrao de ajuda para o plano de ao.
4. Formatao de Texto:
Quebras de Linha: Ao interpretar um documento HTML, o navegador ir ignorar mltiplos espaos e linhas em branco. Isto significa que: Texto Texto Aparecer no documento final como: Texto Texto Texto Texto Ento, para indicar uma quebra de linha, escreva: E, para indicar mltiplos espaos, utilize: Texto Texto
Subttulos: Para incluir um subttulo em sua pgina, utilize a marcao: <H1 align=center> ... </H1>
Sendo 1 um nmero entre 1 e 6, indicando a importncia do subttulo e, com isso, o tamanho da letra a ser utilizada. 1 corresponde maior letra e 6 corresponde menor:
...
H3 H4
H5
H6
align=center
=>Alinhamento do sub-ttulo na pgina. center = centralizado left = esquerda right = direita
Propriedades da Fonte:
 
face=
=> Indica as fontes (estilos de letra) a serem utilizadas.
Tenha em mente que, se o computador do internauta no tiver nenhuma das fontes indicadas, ele ver seu texto na fonte padro do navegador dele, o que pode fazer seu documento ter uma aparncia completamente diferente da planejada. As fontes indicadas acima so algumas das fontes seguras, que quase todos os computadores tm. Outras fontes comuns so: Tahoma, Verdana, Impact, Courier. size= color= O tamanho da letra vai de 1 a 7. (Desta vez, 1 corresponde menor) Cor do texto (indicada pelo seu nmero hexadecimal, como nas cores da tag <body>)
Outras Opes de Formatao do Texto: As opes abaixo podem ter resultados diferentes, dependendo do navegador. <BiG> texto </BiG> Letra um pouco maior texto Letra um pouco menor
 texto Texto em Negrito ... ou Texto em Itlico ... Texto Sublinhado
ou
 texto 
 ... 

Dentro das tags de observaes, voc pode escrever um texto qualquer que no ir aparecer na sua pgina, somente no cdigo fonte. Desta forma, voc pode indicar onde comea determinado texto ou determinada parte da sua pgina para que mais tarde voc possa interpretar facilmente o seu cdigo. Exemplo: 
<CENTER> </CENTER> Os elementos da pgina que estiverem entre as marcaes acima aparecero centralizados.
<PRE> </PRE> O texto que estiver entre as marcaes acima aparecer na pgina da mesma forma como foi escrito no cdigo (pr-formatado): respeitando mltiplos espaos e quebras de linha. <BLOCKQUOTE> </BLOCKQUOTE> Todas as linhas de texto que estiverem entre as duas tags acima tero as margens esquerda e direita maiores que as das outras partes do documento. Exemplo: Texto texto texto texto texto texto texto <blockquote> texto texto texto texto texto texto texto texto </blockquote> texto texto texto texto texto texto texto
5. Pargrafos: ... 
A marcao acima determina um pargrafo que, por padro, equivale a duas quebras de linha - e muda o alinhamento do texto. O alinhamento vertical, como regra geral, s funciona dentro de tabelas que tenham sua altura definida e que tenham, em seu interior, texto que respeite esta altura. Align=center Centraliza o texto. Outras opes de alinhamento horizontal: Left = esquerda Right = direita Justify = margens iguais Valign=top Alinhamento vertical do texto, neste caso alinhado ao topo. Outras opes: Bottom = ao fundo (abaixo).
6. Linha Horizontal
<hr width=200 size=1 color=#FF8000>
Size= Espessura da linha Width= Comprimento da linha Color= Cor da linha
7. Imagens e Sons: Imagens: <img src=figura.gif width=90 height=40 border=0>
Src= Determina o endereo da figura na web. Width= Determina a largura da figura. Height= Determina a altura da figura. Border= Determina a largura da borda.
Sons: <embed src=som.mid autostart=true loop=1 hidden=false>
Src= Indica o endereo do som (o caminho at ele) na web. Autostart= Determina se o som dever comear sozinho ou somente se o internauta apertar o play. True = Sim (comea sozinho) False = No Loop= Determina quantas vezes o som dever se repetir. Um nmero negativo (ex.: -1) determina que o som toque indefinidamente. Hidden= Determina se o controle do som dever estar oculto na pgina ou no. True = Sim False = No
Se no estiver oculto, o internauta poder utiliz-lo para diminuir o volume, iniciar ou pausar a msica, etc.. De preferncia, esta propriedade deve estar configurada como false, caso contrrio voc corre o risco de espantar alguns visitantes com uma msica insistente.
8. Links Internos e Externos: <a href=pagina2.html target=_blank>Clique Aqui!</a> Tudo o que estiver entre <a ..> e </a> servir de link (ligao) para outra pgina. Voc pode colocar uma marcao de imagem entre eles, por exemplo, para que a figura sirva de link para outra pgina. href= Determina o destino para onde leva esse link. Pode ser outra pgina do site: nomedapagina.html, pode ser outro website: http://www.outrosite.com/pagina.html, ou pode ser um documento qualquer que no uma pgina da web: texto.txt, arquivo.zip. target=_blank Determina a janela em que a nova pgina dever ser aberta. Se voc indicar janela1, por exemplo, o destino ser aberto na janela nomeada janela1. Se ainda no houver uma janela com esse nome, ele abrir uma janela nova e a nomear janela1. No exemplo acima, _blank indica que uma nova janela dever ser aberta. Esta uma propriedade opcional, mas voc pode tambm indicar _self para que o novo documento seja aberto na mesma janela. <a href=mailto:nome@email.com.br>nome@email.com.br</a> No exemplo acima, o link um endereo de e-mail. Caso a pessoa utilize um programa de e-mail integrado ao navegador, bastar clicar no link para abrir o programa.
<a name=02>Parte 2:</a> As marcaes acima podem ser usadas para indicar uma ncora na parte do texto que estiver entre elas. Desta forma, voc pode criar um link para esta parte da pgina, de qualquer outro lugar, digitando: <a href=#02>Clique aqui para ir para a segunda parte.</a>
Voc pode tambm indicar um link de uma pgina para uma parte de outra pgina. Exemplo: <a href=http://www.site.com/pagina.html#02> Segunda parte da pgina. </a>
Usando imagens como links: <a href=pagina2.html><img src=figura.gif></a> Para utilizar imagens como links, basta envolver a marcao da imagem <img> com a marcao de link (<a href=> e </a>).
9. Listas Ordenadas e No-Ordenadas:
Listas Ordenadas: <ol type="1"> <li> Item 1 </li> <li> Item 2 </li> </ol> ( OL = ordered list = lista ordenada ) ( LI = list item = item da lista )
A lista acima ter seus itens listados utilizando nmeros, como os tpicos deste tutorial. 1. Item 1 2. Item 2
Outras opes:
<ol type="A"> <li> Item 1</li> <li> Item 2</li> </ol> A lista acima ter seus itens listados utilizando as letras maisculas do alfabeto. Trocando A por a, sero utilizadas as letras minsculas. <ol type="I"> <li> Item 1</li> <li> Item 2</li> </ol> A lista acima ter seus itens listados utilizando numerais romanos.
Listas No-Ordenadas: <ul type="disc"> ( UL = unordered list = lista no-ordenada ) <li> Item 1</li> ( LI = list item = <li> Item 2</li> </ul> O exemplo acima ficaria assim: Item 1 Item 2
item da lista )
<ul type="circle"> <li> Item 1</li> <li> Item 2</li> </ul> O exemplo acima ficaria assim: o Item 1 o Item 2
<ul type="square"> <li> Item 1</li> <li> Item 2</li> </ul> O exemplo acima ficaria assim: Item 1 Item 2
Voc pode, tambm, criar uma hierarquia entre os itens da lista:
<ul type="square"> <li> Item 1 <ul> <li> Sub-item 1</li> <li> Sub-item 2</li> </ul> </ul> o o Item 1 Sub-item 1 Sub-item 2
<ol type="1"> <li> Item 1 <ol type="a"> <li> Sub-item 1</li> <li> Sub-item 2</li> </ol> </ol> 1. Item 1 a. Sub-item 1 b. Sub-item 2
Listas Descritivas: <DL> <DT> Item 1 <DD> Descrio 1</DD> <DT> Item 2 <DD> Descrio 2</DD> </DL> Item 1 Descrio 1 Item 2 Descrio 2
PLANO DE AO: 7. Abra para edio, mais uma vez, a pgina criada no plano de ao anterior; 8. Acrescente sua pgina uma lista ordenada (<li>), listando as dvidas que voc ainda tenha sobre a criao de pginas da web. Faa outra lista (<li>) com as idias para criao de sites que voc possa ter tido durante a leitura deste tutorial. 9. Coloque uma ncora no topo da sua pgina, nomeando-a topo. Crie, no final da sua pgina, um link interno com o texto Voltar para o incio. Esse link dever levar o internauta de volta para o topo da pgina (ou seja, dever apontar para a ncora topo).
CONCLUSO
Espero que este primeiro tutorial tenha ajudado voc a entender como funciona a criao de pginas da web. H um longo caminho pela frente, desde a criao de sites simples com o contedo deste pequeno tutorial, at a criao de pginas dinmicas que interagem com os visitantes. Suas sugestes e crticas me ajudaro a planejar melhor os prximos tutoriais da srie. Participe sempre do nosso frum, proponha novos tpicos sobre a criao de websites para gerao de renda ou diverso a serem abordados nos prximos tutoriais, e assista aos vdeo-tutoriais. Voc certamente ir aprender HTML muito mais rpido criando a sua prpria pgina, aos poucos, do que apenas lendo tutoriais. Sugiro que voc procure um Editor de HTML simples e gratuito na web e comece a praticar um pouco. Quando achar que j consegue criar uma pgina simples com o que foi ensinado acima, volte ao site (www.criarwebsite.com) e baixe a continuao deste tutorial.

HTML Basico

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Basico

Uploaded by

Copyright:

Available Formats

TUTORIAL HTML

Exemplo: Veja onde aparece o ttulo, ao abrir a pgina salva.

3. Propriedades da Tag <body>:

<body background=imagem-de-fundo.jpg> ... </body>

background=http://www.web.com/fundo1.jpg background=figuras/fundo1.jpg background=fundo.jpg

(dentro do diretrio figuras) ou (no mesmo diretrio que a pgina da web)

=> Aqui voc indica a cor do plano-de-fundo da pgina.

No HTML, voc tem duas opes para determinar uma cor:

#FF8080 #FF80C0 #FF00FF #FF0000 #00FF00 #0080C0 #8080C0 #008000

Outras Propriedades da marcao <body>:

LeftMargin=0 RightMargin=0 BgSound=musica.mid

Ilustrao de ajuda para o plano de ao.

=>Alinhamento do sub-ttulo na pgina. center = centralizado left = esquerda right = direita

<font face=Arial, Helvetica, Sans-Serif size=1 color=#000000> </font>

=> Indica as fontes (estilos de letra) a serem utilizadas.

<STRONG> texto </STRONG>

<EM> ... </EM>

5. Pargrafos: <P align=center valign=top> ... </P>

<hr width=200 size=1 color=#FF8000>

Size= Espessura da linha Width= Comprimento da linha Color= Cor da linha

7. Imagens e Sons: Imagens: <img src=figura.gif width=90 height=40 border=0>

Sons: <embed src=som.mid autostart=true loop=1 hidden=false>

9. Listas Ordenadas e No-Ordenadas:

Voc pode, tambm, criar uma hierarquia entre os itens da lista:

You might also like