Tutorial de HTML Online

TUTORIAL HTML

BÁSICO

CRIANDO E PUBLICANDO PÁGINAS DA WEB

SOBRE O TUTORIAL:

Este tutorial faz parte de uma série completa para aqueles que querem aprender a desenvolver páginas da web. Ao final desta série de tutoriais, você deverá estar apto(a) a criar websites completos. Este tutorial também está disponível para download em formato PDF e pode ser impresso para facilitar sua leitura.

Se você conhece alguém que possa se beneficiar com a leitura deste tutorial, você pode indicá-lo para este endereço da web (http://www.criarwebsite.com/tutoriais) ou distribuir a versão em PDF. Você não pode copiar este tutorial em nenhuma outra página da web - isso prejudica a avaliação do nosso site pelos motores de busca. A única versão autorizada para redistribuição é em formato PDF.

Existem dezenas de outros tutoriais de HTML na Internet mas eu quis desenvolver um tutorial que fosse o mais fácil e rápido de seguir e de consultar, ainda que contendo uma série de exemplos. Sugestões e críticas a respeito do tutorial serão muito bem-vindas.

Se encontrar falhas neste tutorial, por favor, entre em contato comigo e verei como posso melhorá-lo. Todos os colaboradores terão seu nome e website incluídos nas revisões.

Este tutorial parte da suposição de que você não tem praticamente nenhum conhecimento sobre como são criadas página da web. Caso você já tenha tido algum contato com a linguagem HTML, os primeiros tópicos podem parecer simples demais – e esta é a intenção, realmente. Qualquer que seja seu nível de instrução, este tutorial deverá ajudá-lo a aprender a construir páginas da web simples, rapidamente.

Attachment	Size
TUTORIAL_HTML_1.pdf	513.66 KB

INTRODUÇÃO À LINGUAGEM HTML

INTRODUÇÃO

1. O Que é HTML?

HTML (Hypertext Mark-up Language) é a linguagem de hipertexto utilizada para desenvolver páginas da web.

O HTML é formado por marcações (ou tags) que indicam ao navegador (programa com o qual você pode visualizar as páginas da web) como você quer que os elementos desse documento sejam apresentados.

Ou seja, uma página em HTML é escrita utilizando texto puro (letras, números, etc.), que será interpretado pelo navegador – este, por sua vez, deverá ler todas as tags (marcações) do documento e apresentar os elementos da página de acordo com elas.

Exemplos de Tags:
Tag única: (quebra de linha)

Tag dupla: ..texto.. (sublinha o texto)

Nota: Você pode utilizar tanto letras maiúsculas quanto minúsculas ao criar sua página utilizando HTML:
 =

2. HTML e Compatibilidade:

Os vários navegadores interpretam HTML de formas diferentes. Caso pretenda criar websites profissionalmente, o ideal é que você instale várias opções de navegadores em seu computador, de forma a prever a aparência que suas páginas da web terão, ao menos nos navegadores mais comumente utilizados.

O computador que o internauta utiliza ao visitar seu website também poderá apresentar suas páginas de uma forma diferente daquela que o seu computador apresenta, dependendo da configuração de tela do monitor, da quantidade de cores suportadas, etc....

Atualmente, sua maior preocupação poderá ser com a resolução de tela utilizada, pois esta difere bastante entre os diversos computadores. Os computadores mais antigos ainda podem ter uma resolução 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 apareçam maiores ou menores, e faz com que alguns sites não caibam inteiros na janela do navegador (precisando ser utilizada a barra de rolagem para ver o restante da página).

Sendo assim, a aparência final da sua página irá depender do programa (navegador) e do computador que estão sendo utilizados por cada visitante do seu website.

3. Como Editar, Salvar e Visualizar:

As páginas da web, como mencionado, são desenvolvidas utilizando texto puro, o que significa que basta escrever o código em um programa de edição de texto simples (como o ‘Bloco de Notas’ do Windows) e depois salvá-lo como:
Tipo: Todos os arquivos (*.*) , nomeando-o com a extensão .html (exemplo: página.html)

Alternativamente, você pode salvá-las com a extensão padrão de texto .txt e renomeá-las mais tarde com a extensão de arquivo HTML: .html ou .htm

Nota: O WordTM é um exemplo de Editor de Texto que não serve para digitar o código de páginas da web, pois ele gera documentos formatados (texto em negrito, itálico, imagens, tabelas, etc.) - Ele oferece apenas a possibilidade de converter seus documentos para o formato de páginas da web.

Eu não recomendo que você utilize conversores de documentos para criar suas páginas da web. Os programas que convertem texto formatado em páginas da web geralmente limitam a aparência que você pode dar ao seu site, e geram códigos cheios de falhas e erros. Isso pode causar incompatibilidade com alguns navegadores e também tornar seu código quase ilegível.

Além de editores de texto puro, você pode utilizar um Editor de HTML especializado para editar suas páginas. 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 páginas da web que são muito caros geralmente não valem o custo.. já testei sharewares e versões de avaliação destes programas, mas desinstalei todos eles antes do prazo de utilização acabar.

O tipo de ferramenta que sempre utilizei para criar minhas páginas da web, antes mesmo de conhecer muito bem a linguagem HTML (eu ainda não sabia criar tabelas e conhecia poucas marcações), são os Editores de HTML que ajudam a escrever o código diretamente na fonte.

Com um clique de botão, ele inclui as marcações 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 botões do programa somente como atalhos, pois saberá todas as marcações necessárias.

Outro recurso interessante desses editores é o de auto-completar. Você começa a digitar uma marcação e ele termina de completá-la. Isto aumenta a velocidade de criação da página, sem limitar sua capacidade criativa, ao contrário dos editores visuais, os quais abordarei mais adiante.

Para achar um editor de HTML, basta buscar em sites de downloads. Se você não se sente à vontade com a lingua inglesa, busque em sites de downloads brasileiros. Caso contrário, teste o HTML-Kit (http://www.htmlkit.com/download/), um dos melhores editores de HTML gratuitos, em inglês.

Outra possibilidade disponível são os editores de HTML do tipo WYSIWYG (“What You See Is What You Get” ? “O Que Você Vê é O Que Você Obtém”), em que você não precisa editar nem uma linha de código HTML, e são quase tão fáceis de utilizar quanto programas comuns que geram texto formatado.

Este tipo de Editor de Texto, no entanto, não é o que procuramos aqui, certo? Eles criam dependência, porque não ajudam você a aprender o código HTML, e limitam suas opções. Além 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 invés de usar esse tempo para aprender HTML. Um editor de código, por outro lado, permite que você aprenda HTML ao mesmo tempo em que explora suas funções.

HTML BÁSICO

1.Estrutura do HTML:

Esta é a estrutura de uma página em HTML:

<html>
	<head>
		<title> Aqui vem o Título </title>
	</head>

	<body>
		Aqui vem o principal, o corpo da página.
	</body>
</html>

Definições:

<html>	...	</html>	=> Indicam o início e o fim da página.

<head>	...	</head>	=> Indicam o cabeçalho da página. 

<title>	...	</title>	=> Título da página, dentro do cabeçalho.

<body>	...	</body>	=> Entre estas duas marcações fica quase todo o código que você
irá utilizar para desenvolver sua página – é o corpo da sua página.

2. Meta Tags:

Dentro do cabeçalho da página, ou seja, entre <head> e </head>, você terá também um outro componente importante do seu documento: As Meta Tags.

Meta Tags são marcações utilizadas para informar algumas propriedades do seu documento, como autor da página, editor de texto utilizado, etc.

Elas não são obrigatórias mas há duas delas que você deverá sempre utilizar:

Meta Keywords e Meta Description

Essas duas marcações são utilizadas por alguns dos maiores websites de busca para indexar seu website. Sem ter sua página indexada nesses grandes buscadores, você estará perdendo uma grande oportunidade de publicidade para seu website.

<head>

	<title>Título da Página</title>

	<meta name=”keywords” value=”Aqui vêm palavras-chave relacionadas ao conteúdo do seu website”>
	
	<meta name=”description” value=”Aqui vem uma breve descrição sobre o seu website.”>

</head>

As palavras-chave relacionadas ao conteúdo do seu website (também chamadas de Keywords) são as palavras que, ao serem digitadas por uma pessoa em um site de busca, trarão sua página como um dos resultados. A breve descrição do seu site aparecerá nas páginas de resultado das buscas logo abaixo do título da página.

Como você pode ver no exemplo acima, algumas marcações do HTML possuem atributos. Este é o caso das meta tags, onde temos os atributos name e value, preenchidos de acordo com sau função.

3. Propriedades da Tag <body>:

Dentro da marcação <body>, você poderá determinar algumas propriedades para sua página da web:

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:

background=”http://www.web.com/fundo1.jpg”     (em outro website)    ou

background=”figuras/fundo1.jpg”		(dentro do diretório “figuras”)   ou

background=”fundo.jpg”			(no mesmo diretório que a página da web)



bgcolor=””	=>   Aqui você indica a cor do plano-de-fundo da página.

No HTML, você tem duas opções para determinar uma cor:

Escrever o nome da cor em inglês (blue, red, purple, deepskyblue, etc.)
Escrever seu hex number (ou número hexadecimal):

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

text=”” link=”” vlink=”” alink=””
Cor padrão do texto, links, links visitados e links ativos, consecutivamente.

Links visitados são aqueles que levam para uma página onde o internauta já esteve. Link ativo é aquele em que se está clicando.

Outras Propriedades da marcação <body>:

BgProperties=”fixed” => Neste exemplo, o plano-de-fundo permanecerá imóvel quando a página estiver sendo rolada para baixo. Este efeito é interessante quando o plano-de-fundo é uma imagem e não somente uma cor.

TopMargin=”0” => Define a margem superior da página.

Se você quiser definir uma margem maior no alto da página ou (como no exemplo acima) retirar toda a margem superior para incluir alguma figura ou tabela junto ao topo da página, use esta propriedade.

LeftMargin=”0” => Define a margem esquerda da página.

RightMargin=”0” => Define a margem direita da página.

BgSound=”musica.mid” => Define uma gravação de áudio, de fundo, para a página. Lembre-se apenas de que nem todos têm o mesmo gosto musical que você....

PLANO DE AÇÃO:

1.Abra, no seu navegador da internet, a página criada no plano de ação anterior;
2.Clique na página com o botão direito do mouse e selecione a opção “Exibir Código-Fonte”. Isto fará com que o código fonte da página seja aberto e você poderá editá-lo;
3.Acrescente à sua página as marcações novas aprendidas. Dê um título, escolha as cores do texto e dos links, mude as margens para modificar a posição do seu texto na página.

4.Formatação de Texto:

Quebras de Linha:

Ao interpretar um documento HTML, o navegador irá ignorar múltiplos espaços e linhas em branco.
Isto significa que:

	
		Texto			Texto
				Texto			Texto

Aparecerá no documento final como:

Texto Texto Texto Texto

Então, para indicar uma quebra de linha, escreva: 
E, para indicar múltiplos espaços, utilize:

Subtítulos:

Para incluir um subtítulo em sua página, utilize a marcação:

Sendo 1 um número entre 1 e 6, indicando a importância do subtítulo e, com isso, o tamanho da
letra a ser utilizada. 1 corresponde à maior letra e 6 corresponde à menor:

align=”center” =>Alinhamento do sub-título na página.
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 não tiver nenhuma das fontes indicadas, ele verá seu texto na fonte padrão do navegador dele, o que pode fazer seu documento ter uma aparência completamente diferente da planejada.

As fontes indicadas acima são algumas das fontes “seguras”, que quase todos os computadores têm. Outras fontes comuns são: Tahoma, Verdana, Impact, Courier.

size=”” O tamanho da letra vai de 1 a 7. (Desta vez, 1 corresponde à menor)

color=”” Cor do texto (indicada pelo seu número hexadecimal, como nas cores da tag <body>)

Outras Opções de Formatação do Texto:

As opções abaixo podem ter resultados diferentes, dependendo do navegador.

<BiG> texto </BiG>
Letra um pouco maior

texto 
Letra um pouco menor

texto ou texto 
Texto em Negrito

... ou ... 
Texto em Itálico

... 
Texto Sublinhado

Dentro das tags de “observações”, você pode escrever um texto qualquer que não irá aparecer na sua página, somente no código fonte. Desta forma, você pode indicar onde começa determinado texto ou determinada parte da sua página para que mais tarde você possa interpretar facilmente o seu código.
Exemplo:

<CENTER> … </CENTER>
Os elementos da página que estiverem entre as marcações acima aparecerão centralizados.

<PRE> … </PRE>
O texto que estiver entre as marcações acima aparecerá na página da mesma forma como foi escrito no código (pré-formatado): respeitando múltiplos espaços e quebras de linha.

<BLOCKQUOTE> … </BLOCKQUOTE>
Todas as linhas de texto que estiverem entre as duas tags acima terão 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

HTML BÁSICO - Continuação

4.Parágrafos:

...

A marcação acima determina um parágrafo – que, por padrão, 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 opções de alinhamento horizontal:
Left = esquerda Right = direita Justify = margens iguais

Valign=”top”
Alinhamento vertical do texto, neste caso alinhado ao topo. Outras opções:
Bottom = ao fundo (abaixo).

5.Linha Horizontal

Size=””
Espessura da linha

Width=””
Comprimento da linha

Color=””
Cor da linha

6.Imagens e Sons:

Imagens:

Src=””
Determina o endereço da figura na web.

Width=””
Determina a largura da figura.

Height=””
Determina a altura da figura.

Border=””
Determina a largura da borda.

Sons:

Src=””
Indica o endereço do som (o “caminho” até ele) na web.

Autostart=””
Determina se o som deverá começar sozinho ou somente se o internauta apertar o play.
True = Sim (começa sozinho) False = Não

Loop=””
Determina quantas vezes o som deverá se repetir. Um número negativo (ex.: -1) determina que o som toque indefinidamente.

Hidden=””
Determina se o controle do som deverá estar oculto na página ou não.
True = Sim False = Não

Se não estiver oculto, o internauta poderá utilizá-lo para diminuir o volume, iniciar ou pausar a música, etc.. De preferência, esta propriedade deve estar configurada como “false”, caso contrário você corre o risco de espantar alguns visitantes com uma música insistente.

7.Links Internos e Externos:

<a href=”pagina2.html” target=_blank>Clique Aqui!</a>

Tudo o que estiver entre <a ..> e </a> servirá de link (ligação) para outra página. Você pode colocar uma marcação de imagem entre eles, por exemplo, para que a figura sirva de link para outra página.

href=””
Determina o destino para onde leva esse link. Pode ser outra página do site: nomedapagina.html, pode ser outro website: http://www.outrosite.com/pagina.html, ou pode ser um documento qualquer que não uma página da web: texto.txt, arquivo.zip.

target=_blank
Determina a janela em que a nova página deverá ser aberta.
Se você indicar “janela1”, por exemplo, o destino será aberto na janela nomeada “janela1”. Se ainda não 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 também 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 endereço 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 marcações 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 página, de qualquer outro lugar, digitando:

<a href=”#02”>Clique aqui para ir para a segunda parte.</a>

Você pode também indicar um link de uma página para uma parte de outra página. Exemplo:

<a href=”http://www.site.com/pagina.html#02”>
Segunda parte da página. </a>

Usando imagens como links:

Para utilizar imagens como links, basta envolver a marcação da imagem <img> com a marcação de link (<a href=””> e </a>).

8. Listas Ordenadas e Não-Ordenadas:

Listas Ordenadas:

<ol type="1">		( OL  =   ordered list  =   lista ordenada )
     <li> Item 1 </li>		( LI   =   list item       =   item da lista )
     <li> Item 2 </li>
</ol>

A lista acima terá seus itens listados utilizando números, como os tópicos deste tutorial.

Item 1
Item 2

Outras opções:

<ol type="A">			
     <li> Item 1</li>
     <li> Item 2</li>
</ol>

A lista acima terá seus itens listados utilizando as letras maiúsculas do alfabeto.
Trocando “A” por “a”, serão utilizadas as letras minúsculas.

<ol type="I">			
     <li> Item 1</li>
     <li> Item 2</li>
</ol>

A lista acima terá seus itens listados utilizando numerais romanos.

Listas Não-Ordenadas:

<ul type="disc">	( UL =   unordered list  =   lista não-ordenada )		
     <li> Item 1</li>		( LI  =   list item          =    item da lista )
     <li> Item 2</li>
</ul>

O exemplo acima ficaria assim:

Item 1
Item 2

<ul type="circle">			
     <li> Item 1</li>
     <li> Item 2</li>
</ul>

O exemplo acima ficaria assim:

Item 1
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, também, 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>

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>

Item 1
1. Sub-item 1
2. Sub-item 2

Listas Descritivas:

<DL>
	
<DT> Item 1
         <DD> Descrição 1</DD>
<DT> Item 2
          <DD> Descrição 2</DD>

</DL>


Item 1
	Descrição 1

Item 2
	Descrição 2

PLANO DE AÇÃO:

1.Abra para edição, mais uma vez, a página criada no plano de ação anterior;
2.Acrescente à sua página uma lista ordenada (<li>), listando as dúvidas que você ainda tenha sobre a criação de páginas da web. Faça outra lista (<li>) com as idéias para criação de sites que você possa ter tido durante a leitura deste tutorial.
3.Coloque uma âncora no topo da sua página, nomeando-a “topo”. Crie, no final da sua página, um link interno com o texto “Voltar para o início”. Esse link deverá levar o internauta de volta para o topo da página (ou seja, deverá apontar para a âncora “topo”).

Coloque a solução em nosso fórum:
http://criarwebsite.com/forum

CONCLUSÃO

Espero que este primeiro tutorial tenha ajudado você a entender como funciona a criação de páginas da web. Há um longo caminho pela frente, desde a criação de sites simples com o conteúdo deste pequeno tutorial, até a criação de páginas dinâmicas que interagem com os visitantes.

Suas sugestões e críticas me ajudarão a planejar melhor os próximos tutoriais da série. Participe sempre do nosso fórum, proponha novos tópicos sobre a criação de websites – para geração de renda ou diversão – a serem abordados nos próximos tutoriais, e assista aos vídeo-tutoriais.