Como Aprender HTML

HTML é a abreviatura de Hyper Text Markup Language (Linguagem de Marcação de Hipertexto) e é o código, ou a "linguagem, que é usado para a criação de sites. Pode parecer um pouco assustador se você nunca fez qualquer codificação antes, mas tudo o que você precisa para tentar é de um programa de edição de textos comum e de um navegador de internet. Você pode até reconhecer alguns HTML usados para alterar o texto em fóruns on-line, perfis on-line personalizados ou artigos do How.com.vn. O HTML é uma ferramenta útil para quem usa a internet, e aprender o básico pode levar menos tempo do que se pensava.

Parte 1

Parte 1 de 2:

Aprendendo HTML básico

Baixe em PDF

1
Abra um documento HTML. A maioria dos programas editores de texto, incluindo o Bloco de Notas ou o Microsoft Word para Windows e o TextEdit para Mac, pode ser usada para escrever documentos HTML. Abra um novo documento e use Arquivo → Salvar como no menu superior para salvá-lo como uma "página Web", ou para alterar a extensão de arquivo para ". html" ou ". htm" em vez de ".doc", ". rtf" ou qualquer outra extensão.
- Você pode ver um aviso de que seu documento será alterado para "texto simples", em vez de "rich text", ou que imagens e formatação especial não serão salvos corretamente. Não tem problema; documentos HTML não usam essas opções.
- Não existe diferença entre arquivos. html e. htm. Qualquer um vai funcionar.^{[1]XFonte de pesquisa}
2
Veja seu documento com um navegador de internet. Salve o documento em branco, em seguida encontre o ícone dele em seu computador e dê um clique duplo para abri-lo. Ele deverá abrir como uma página da web em branco no seu navegador. Se não, arraste o ícone do arquivo para a barra de URL (endereço) do seu navegador. Conforme editar seu documento HTML neste tutorial, você pode continuar checando e ver como sua página da web muda.
- Note que isto na verdade não cria um site on-line. Ele não será acessível por outras pessoas, e você não precisará de uma conexão de internet para testá-lo. Isto só usa um navegador para "ler" seu documento HTML como se fosse um site.
3
Entenda as tags de marcação. Elas não aparecem em uma página da web como o texto normal. Em vez disso, dizem ao seu navegador da web como exibir a página e seu conteúdo. A “tag de início” contém instruções. Por exemplo, ela pode dizer ao browser para exibir o texto como negrito. Você também precisa de uma tag de "fim" para avisar o navegador onde aplicar as instruções: neste exemplo, todo o texto entre a marca de início e a marca final vai ficar em negrito. Escreva as tags de fim dentro de colchetes angulares também, mas comece-as com uma barra depois do primeiro colchete.
- Escreva as tags de início entre colchetes angulares: <A tag de início vai aqui>
- Escreva as tags finais entre colchetes angulares, mas coloque uma barra depois do primeiro colchete:</A tag de fim vai aqui>)
- Continue lendo para aprender a escrever tags de marcação funcionais. Para esta etapa, tudo o que você precisa lembrar é o formato básico. Elas são escritas em: <> e </ >
- Se você estiver usando outros tutoriais HTML também, você pode vê-los se referir às tags como "elementos", e ao texto entre as tags de início e de fim como "conteúdo do elemento."
4
Escreva sua primeira tag <html>. Todo documento html inicia com uma tag<html> e termina com uma </html>. Isto diz ao navegador que tudo entre essas tags está em HTML. Adicione estas tags ao seu documento:
- Escreva <html> no topo do seu documento.
- Use o enter várias vezes para dar espaço, e então escreva </html>.
- Lembre-se de escrever todo o resto deste tutorial entre estas duas marcas.
5
Preencha a parte <head> do seu documento. Entre as tags <html> e </html>, escreva uma tag inicial <head> e uma final </head>. Dê espaço para escrever entre elas. Tudo entre essas tags na verdade não será exibido na própria página. Tente o seguinte e veja onde aparece em vez disso:
- Entre as tags <head> e </head>, escreva <title> e </title>
- Entre as tags <title> e </title>, escreva Como Aprender HTML - How.com.vn.
- Salve o documento e abra-o em um navegador (ou salve o documento e atualize a página do browser, se ainda estiver aberta). Você vê o que você escreveu no topo do navegador, acima da barra de endereço?
6
Crie uma seção <body>. Todo o resto deste documento iniciante vai em uma seção do corpo, que é exibida na página da web. Depois da marca de fim </head>, mas antes da </html>, escreva <body> e </body>. Para o resto deste tutorial, tudo o que escrever ficará entre essas tags. Agora você deve ter um documento que se parece com este (ignorando a lista de pontos):
- <html>
- <head>
- <title>Como Aprender HTML - How.com.vn</title>
- </head>
- <body>
- </body>
- </html>
7
Adicione texto em vários estilos. Agora é hora de escrever alguma coisa que você pode ver no seu navegador! Qualquer coisa que escrever dentro das tags “body” vai aparecer no seu navegador depois que você salvar o documento HTML e atualizar a página. Não escreva nada com os símbolos < ou >, no entanto, pois o seu browser vai tentar interpretar como uma instrução HTML em vez de texto normal. Tente escrever Olá mundo! (ou qualquer outra coisa que quiser), em seguida, adicionar essas novas tags ao redor e ver o que acontece a cada vez:
- <em>Olá mundo!</em>mostrará o texto como “itálico”: Olá mundo!
- <strong>Olá mundo!</strong> mostrará o texto como “negrito”: Olá mundo!
- <s>Olá mundo!</s> mostrará o texto tachado: ~~Olá mundo!~~
- <sup>Olá mundo!</sup> mostrará o texto sobrescrito: ^{Olá mundo!}
- <sub>Olá mundo!</sub>mostrará o texto subscrito: _{Olá mundo!}
- Tente combinações destes: Como <em><strong>Olá mundo!</strong></em>fica?
8
Divida seu texto em parágrafos. Se você tentar escrever várias linhas de texto no seu documento HTML, pode notar que as quebras de linha não aparecem no seu navegador. É preciso codificar estas você mesmo:
- <p>Esse é um parágrafo separado.</p>
- Essa frase é seguida por uma quebra de linha.<br>antes dela começar.
  Essa é a primeira tag que você está vendo que não precisa de uma tag final. Elas são chamadas de “tags vazias”.
- Faça cabeçalhos (headings) para exibir os nomes das seções:
  <h1>texto</h1>: o maior cabeçalho
  <h2> texto</h2> (o cabeçalho de 2º nível)
  <h3> texto</h3> (o cabeçalho de 3º nível)
  <h4> texto</h4> (o cabeçalho de 4º nível)
  <h5> texto</h5> (o menor cabeçalho)
9
Aprenda como fazer listas. Existem várias maneiras de escrever listas em sua página Web. Experimente os seguintes tipos de código e veja de qual você gosta. Note que um par de tags engloba toda a lista (por exemplo, as tags <ul> e </ul> para "lista não-ordenada"), enquanto itens individuais na lista são cercados por um outro par de tags, tais como<li> e </li>.
- Use esse código para fazer listas com marcadores:
  <ul><li>Um item</li><li>Outro item</li><li>Mais um item</li></ul>
- Ou este para listas numeradas:
  <ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol>
- Ou ainda este código para uma lista de definições:
  <dl><dt>Café</dt><dd>- Bebida quente</dd><dt>Leite</dt><dd>- Bebida fria</dd></dl>
10
Deixe sua página mais arrumada com quebras de linha, linhas horizontais e imagens. Agora é hora de tentar adicionar coisas além do texto em sua página. Experimente as seguintes tags. Você precisará usar um serviço de hospedagem de imagem on-line para que tenha uma URL para vincular à tag de imagem:
- Inserir uma linha no HTML:<br>
- Fazer uma linha no HTML:<hr>
- Adicionar imagens:<img src=url_da_sua_imagem">
11
Coloque links para outros locais na página. Você também pode usar este código para inserir links para outras páginas e sites, mas por hora, como você pode não ter um site ainda, nós focaremos em "âncoras", ou lugares específicos na página para os quais você pode levar:
- Faça primeiro uma âncora com a tag <a></a> no ponto da página que você deseja vincular. Dê a ela um nome descritivo e fácil de lembrar:
  
  <a name="Dicas">Esse é o texto ao redor do qual você vai colocar a âncora.</a>
- Use o <href> para criar links para essas âncoras ou para outra página:
  
  <a href="url da página, ou nome da âncora dentro dessa página">Escreva o texto ou imagem que será mostrado como link aqui.</a>
- Para vincular a uma âncora em uma página da web diferente, adicione o sinal # após a URL, seguida do nome da âncora. Por exemplo, Como Aprender HTML: Dicas leva para a seção de dicas desta página.
Publicidade

Parte 2

Parte 2 de 2:

Aprendendo HTML mais avançado

Baixe em PDF

1
Aprenda sobre atributos. Atributos são colocados dentro da tag em si e fazem alterações adicionais ao “conteúdo do elemento” entre a tag de início e a de fim. Eles nunca ficam sozinhos. São escritos no formato name="value", onde name é o nome do atributo (por exemplo, "color" para cor), e value é a instância específica (por exemplo, "red" para vermelho).
- Você na verdade já viu atributos, se seguiu o tutorial na seção de HTML básico. As tags <img> usam o atributo src, as âncoras usam o atributo name, e os links usam o atributo href. Vê como todas seguem o formato ___="___"?
2
Experimente com tabelas HTML. Fazer uma tabela requer várias marcas diferentes. Brinque com essas tags ou aprenda sobre tabelas HTML mais detalhadamente.
- Comece com tags de tabela em torno de toda a tabela:<table></table>
- Coloque as tags de linha ao longo do conteúdo de cada linha: <tr>
- Faça cabeçalhos de coluna na primeira linha: <th>
- Coloque as células em linhas subsequentes:<td></td>
- Aqui está um exemplo de como tudo se encaixa:
  
  <table><tr><th>Coluna 1: Mês</th><th>Coluna 2: Dinheiro Guardado</th></tr><tr><td>Janeiro</td><td>R$100</td></tr></table>
3
Aprenda as diversas tags “head”. Você já aprendeu a tag <head></head>, que aparece no início de cada documento. Além da tag<title></title>, ela pode incluir os seguintes tipos:
- Meta tags, que são usadas para fornecer metadados sobre uma página da web. Este dados podem ser usados pelos motores de busca quando o robô vasculha a internet para localizar e listar os sites. Para tornar seu site mais visível nos motores de busca, use uma ou mais tags <meta> (sem tag final necessária), cada uma com exatamente um atributo de nome e um de conteúdo, por exemplo: <meta name="descrição" content="escreva uma descrição aqui"> ; ou <meta name="palavras-chave" content="escreva uma lista de palavras-chave, separadas por vírgulas">
- As tags <link> são usadas para associar a página com outros arquivos. Isto é usado principalmente para folhas de estilo CSS, que são feitas usando um tipo diferente de codificação para alterar a sua página HTML adicionando cor, alinhando o seu texto e fazendo muitas outras coisas.
- As tags <script> são usadas para ligar a página a arquivos JavaScript, que podem fazê-la mudar conforme o usuário interage com ela.
4
Brinque com o HTML encontrado em sites. Uma ótima maneira de expandir o seu conhecimento é olhar para o código-fonte HTML de páginas da Web. Você pode fazer isso clicando na página com o botão direito do mouse e selecionando “Visualizar código-fonte”, ou outra opção semelhante, ou indo na seção “Visualizar” do menu superior do seu browser. Tente descobrir o que cada tag HTML desconhecida faz, ou procure-a on-line para achar a resposta.
- Embora você não possa editar sites da web de outras pessoas, pode copiar o HTML que encontrar em seu próprio documento e, em seguida, brincar com ele para ver o que fazem as opções diferentes. Note que, sem a folha CSS para a qual esse site se vincula, você pode não ser capaz de ver todas as cores ou formatações.
Existem vários recursos na internet que você pode usar para aprender sobre muitas outras tags HTML, tais como a W3Schools ou a Codecademy. Você também pode encontrar livros com tutoriais sobre HTML, mas use um que foi publicado nos últimos anos, uma vez que existem alterações e atualizações ocasionais. Melhor ainda, aprenda CSS para ter muito mais controle sobre o layout e a aparência da sua página web. Uma ver que tiver dominado o CSS, o próximo passo para web designers é geralmente o JavaScript.
Publicidade

Dicas

Você pode gostar de encontrar uma página simples da Web na Internet e brincar com o código dela. Tente mover algum texto, alterar a fonte, mudar as imagens, tudo o que sua imaginação sugerir!
Você pode pegar um caderno e anotar todos os códigos, para que, caso precise lembrar de algum, possa abrir e consultar. Também pode imprimir esta página como um ponto útil de referência.
XML e RSS estão se tornando cada vez mais comuns em sites atualmente. O código deles pode parecer difícil de ler e compreender para um observador humano, especialmente quando visto em um arquivo de código-fonte HTML, mas eles têm seus próprios efeitos.
As tags de marcação em HTML não diferenciam maiúsculas de minúsculas, mas utilizar todas as letras minúsculas (como usado nesta página) é altamente recomendado para fins de padronização e para compatibilidade com o XHTML.^{[2]XFonte de pesquisa}

Avisos

Algumas tags se tornaram obsoletas ao longo dos últimos anos e foram substituídas por outras opções para produzir os mesmos efeitos e até mesmo adicionar outros diferentes, se assim o desejar.
Se estiver interessado em validar suas páginas, vá para o site W3 e aprenda HTML válido! Padrões HTML mudam ao longo do tempo, e algumas tags são substituídas por outras que funcionam melhor em navegadores modernos.

Materiais Necessários

Um programa de edição de texto, por exemplo o Notepad (Windows) ou o TextEdit (Mac)
Um caderno ou papel para anotações (opcional)
Um programa de edição de HTML, como o Notepad ++ (Windows) ou o TextWrangler (Mac) (opcional)