Como você pode aprender HTML

Veja como aprender a linguagem web HTML

HTML é a abreviatura de Hyper Text Markup Language (Linguagem de Marcação de Hipertexto), e é o código, ou o idioma, 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 wikiHow. 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 de 2: Aprendendo HTML básico

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 useArquivo → 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]

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.
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:Predefinição:purpleA tag de início vai aquiPredefinição:purple
- Escreva as tags finais entre colchetes angulares, mas coloque uma barra depois do primeiro colchete:Predefinição:purpleA tag de fim vai aquiPredefinição:purple)
- 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."
Escreva sua primeira tag <html>. Todo documento html inicia com uma tagPredefinição:purple e termina com uma Predefinição:purple. 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.
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 - wikiHow.
- 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?
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 - wikiHow</title>
- </head>
- <body>
- </body>
- </html>
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?
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)
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>
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.