Contente

• Dar um passo
• Parte 1 de 2: Aprendendo os conceitos básicos de HTML
• Parte 2 de 2: Aprendendo HTML avançado
• Pontas
• Avisos
• Necessidades

HTML é a abreviatura de Linguagem de marcação de hipertexto, é o código ou língua que é usado para criar sites. Pode parecer complicado se você nunca programou antes, mas para experimentá-lo, tudo que você precisa é um programa de processamento de texto simples e um navegador de Internet. Você pode reconhecer algum HTML de fóruns, perfis online ou artigos do wikiHow. HTML é um recurso útil para qualquer pessoa que use a Internet, e aprender HTML pode levar menos tempo do que você imagina.

Dar um passo

Parte 1 de 2: Aprendendo os conceitos básicos de HTML

1. Abra um documento HTML. A maioria dos programas de processamento de texto, incluindo Bloco de Notas ou Word para Windows e Editor de Texto para Mac, podem ser usados ​​para criar documentos HTML. Abra um novo documento e selecione Arquivo → Salvar como no menu superior para salvar seu documento como uma página da web ou mude a extensão do arquivo de ".doc", ".rtf" ou qualquer outra coisa para ".html" ou ".htm "
   • Agora você pode ver um aviso informando que o documento está sendo alterado do formato Rich Text Format (RTF) para o formato "texto simples" e que algumas opções de formatação e imagens não estão sendo salvas corretamente. Você pode ignorar este aviso; Documentos HTML não usam essas opções.
   • Os arquivos .html e .htm são iguais. Ambos funcionam.
2. Visualize seu documento com um navegador. Salve o documento em branco, feche-o e clique duas vezes no documento no local onde foi salvo para abri-lo novamente. Seu documento agora deve ser aberto pelo navegador como uma página da web em branco. Se isso não funcionar, arraste o ícone do arquivo para a barra de endereço do seu navegador. Posteriormente, se você editar seu documento HTML seguindo as etapas deste artigo, continuará voltando ao navegador para verificar a aparência das alterações no código.
   • Nota: sua página da web ainda não está online. A página não está acessível a outras pessoas e você não precisa de uma conexão à Internet para testá-la. Basta usar o navegador para "ler" o documento HTML como se fosse um site.
3. Entenda o que são "tags". As tags não são visíveis na página final da web, como o texto normal pode. As tags informam ao navegador como exibir a página e o conteúdo da página. A tag inicial contém instruções. Por exemplo, pode dizer ao navegador para exibir o texto em negrito. A tag final é necessária para informar ao navegador onde as instruções se aplicam: neste exemplo, todo o texto entre a tag inicial e final está em negrito. As tags finais também são colocadas entre parênteses, mas uma barra segue o primeiro parêntese.
   • Escreva as tags iniciais entre colchetes: este é o dia de início>
   • Escreva as tags finais entre parênteses, mas coloque uma barra após o primeiro parêntese: /esta é a marca de fechamento>)
   • Leia mais tarde neste artigo como escrever tags funcionais. Nesta etapa, você só precisa se lembrar de como escrever tags:> e />.
   • Em outros cursos de HTML, as tags também são chamadas de "elementos" e o texto entre as tags de abertura e fechamento também é conhecido como "conteúdo do elemento".
4. Escreva sua primeira tag html>. Cada documento HTML começa com um html>marca e termina com um / html>marcação. Isso informa ao navegador que tudo entre essas tags é escrito em HTML. Adicione essas tags ao seu documento:
   • Escreva html> na parte superior do seu documento.
   • Pressione Enter ou Return várias vezes para obter algum espaço e, em seguida, escreva / html>
   • Lembrar de você tudo neste artigo entre essas duas tags.
5. Torne o cabeçalho> parte do seu documento. Entre as tags html> e / html> você escreve um cabeça>tag de início e um / head>-end tag. Abra algum espaço novamente entre essas tags. Qualquer coisa escrita entre essas tags não será visível na própria página da web. Experimente os seguintes passos e veja se consegue ver onde as informações aparecem:
   • Escreva entre as tags head> e / head>: título> e / título>
   • Entre as tags title> e / title> você escreve: Como aprender HTML (com imagens) - wikiHow.
   • Salve o documento e abra-o em um navegador (ou salve o documento e atualize a página no navegador se a página ainda estiver aberta). Você vê o que acabou de escrever no topo da página, acima da barra de endereço?
6. Crie um corpo> seção. Todo o resto neste documento para iniciantes é colocado na seção body>, e é mostrado na página da web. Após a tag / head>, mas em frente a tag / html> você escreve corpo> e / body>. Tudo o que discutimos mais adiante neste artigo, colocamos entre as tags do corpo. Agora você deve ter um documento parecido com este (sem os marcadores):
   • html>
   • cabeça>
   • título> aprender HTML - wikiHow / título>
   • / head>
   • corpo>
   • / body>
   • / html>
7. Adicione texto em estilos diferentes. Agora é a hora de você começar a escrever algo que ficará visível no navegador! Tudo o que você escrever nas tags do corpo ficará visível no navegador depois de salvar as alterações e atualizar a página no navegador. Escreva não algo com os sinais e >porque seu navegador interpretará isso como uma instrução HTML em vez de texto simples. Escreva por exemplo Olá Mundo! (Inglês para "Hello world!", Este é o texto padrão global como o primeiro exemplo em qualquer curso de programação em uma linguagem de programação específica) ou outra coisa, e coloque as seguintes tags antes e depois do texto e veja o que acontece:
   • em> Olá, mundo! / em> parece texto em itálico: Olá Mundo!
   • forte> Olá, mundo! / forte> parece texto em negrito: Olá Mundo!
   • s> Olá, mundo! / s> parece um texto tachado: Olá Mundo!
   • sup> Olá, mundo! / sup> parece sobrescrito:
   • sub> Olá, mundo! / sub> se parece com a legenda: _{Olá Mundo!}
   • Experimente combinações: como vê em> forte> Olá, mundo! / forte> / em> sair?
8. Divida seu texto em parágrafos. Se você colocar diferentes linhas de texto em seu documento, verá que todas as linhas são colocadas uma após a outra. Você mesmo deve programar novas linhas e linhas em branco:
   • p> Esta é uma seção separada./p>
   • Esta frase está na primeira linha e esta frase na próxima.
     Esta é a primeira tag que encontramos que não precisa de uma tag final! Chamamos tal marca de um etiqueta vazia.
   • Crie cabeçalhos para deixar os nomes das seções claros:
     h1> cabeçalho / h1>: o maior cabeçalho possível
     h2> cabeçalho / h2> (o cabeçalho de 2 níveis)
     h3> cabeçalho / h3> (o cabeçalho de 3 níveis)
     h4> cabeçalho / h4> (o cabeçalho de 4 níveis)
     h5> cabeçalho / h5> (o menor cabeçalho possível)
9. Aprenda a fazer listas. Existem várias maneiras de criar listas em uma página da web. Experimente os métodos a seguir para descobrir o que você mais gosta. Observe que um par de tags é colocado ao redor de toda a lista (como ul> e / ul> tags para listas não ordenadas) e que um par diferente de tags é colocado ao redor de cada item da lista, como li> e / li> .
   • Use o seguinte código para criar listas com marcadores:
     ul> li> Um item / li> li> Outro item / li> li> Outro item / li> / ul>
   • Ou este código para criar listas numeradas:
     ol> li> Item 1 / li> li> Item 2 / li> li> Item 3 / li> / ol>
   • Ou este código para criar uma chamada lista de definições:
     dl> dt> Café / dt> dd> - Bebida quente / dd> dt> Leite / dt> dd> - Bebida fria / dd> / dl>
10. Torne sua página mais atraente com novas linhas, linhas horizontais e imagens. Agora é hora de começar a adicionar outras coisas à sua página. Experimente as seguintes tags (a imagem deve ser postada online para que você possa usar um link para a imagem):
    • Insira uma linha: br> ou hr>
    • Insira imagens: img src = "the_url_of_your_image">
11. Insira links para outros lugares na página. Você também pode usar este código para criar um link para outras páginas e sites, mas como você ainda não tem um site, vamos nos concentrar em "âncoras", que são locais específicos na página para os quais você pode criar um link:
    • Primeiro, crie uma âncora com a tag a> no ponto da página que você deseja vincular. Dê à sua âncora um nome claro e fácil de lembrar:
      
      a name = "Tips"> Este é o texto em torno do qual você coloca sua âncora./a>
    • Use a tag href> para criar um link para sua âncora ou para outra página da web:
      
      a href = "url da página da web ou nome da âncora nesta página"> Escreva o texto ou imagem mostrado como link aqui./a>
    • Para criar um link para uma âncora em outra página, adicione o caractere # após o url, seguido pelo nome de sua âncora. Por exemplo, http://www.wikihow.com/HTML-leren#Tips o levará direto para a seção "Dicas" nesta página.

Parte 2 de 2: Aprendendo HTML avançado

1. Aprenda sobre os atributos. Os atributos são colocados dentro da tag e são usados ​​para fazer ajustes adicionais ao "conteúdo do elemento" entre a tag de início e fim. Eles nunca ficam sozinhos. Eles são escritos da seguinte maneira: nome = "valor". nome representa o nome do atributo (por exemplo, "cor") e valor descreve este caso específico (por exemplo, "vermelho").
   • Se você examinou atentamente a parte anterior deste artigo, já encontrou atributos. A tag img> usa o atributo src, uma âncora usa o atributo nome e os links usam o atributo href. Você pode dizer que eles são todos dimensionados ___='___’ seguir.
2. Faça experiências com tabelas HTML. Para fazer uma tabela ou gráfico, você precisa de várias tags:
   • Comece com as tags da tabela ("table" em inglês) ao redor de toda a tabela:mesa> / mesa>
   • Coloque tags em torno do conteúdo de cada linha: tr>
   • Coloque os cabeçalhos das colunas na primeira linha: th>
   • Coloque as células em linhas consecutivas: td>
   • Este é um exemplo de como tudo isso se junta:
     
     tabela> tr> th> Coluna 1: Mês / th> th> Coluna 2: Dinheiro economizado / th> / tr> tr> td> Janeiro / td> td> € 100 / td> / tr> / table>
3. Aprenda as outras tags usadas na seção principal. Você já aprendeu a tag head>, que você coloca no início de cada documento. Além da tag title>, pode haver outras tags na seção head:
   • Meta tags são usadas para criar metadados sobre uma página da web. Esses dados são usados ​​pelos mecanismos de pesquisa para categorizar as páginas da web. Para tornar sua página visível aos mecanismos de pesquisa, você pode colocar uma ou mais meta tags (tags finais não são necessárias), cada tag deve conter exatamente um atributo de nome e atributo de conteúdo, por exemplo: meta name = "descrição" content = "colocado aqui descrição ">; ou meta name = "palavras-chave" content = "escreva uma lista de palavras-chave aqui, sempre separadas por uma vírgula">
   • link> tags são usadas para vincular outros arquivos à página. Normalmente usadas para associar folhas de estilo CSS a páginas HTML, essas páginas são construídas com um tipo diferente de código e são usadas para determinar o estilo geral de uma página.
   • script> tags são usadas para associar arquivos javascript à página HTML. Javascript permite que a página mude se o usuário fizer algo na página.
4. Brinque com HTML de páginas existentes. Visualizar o código-fonte de páginas da web é uma ótima maneira de expandir seu conhecimento de HTML. Clique com o botão direito na página e selecione "Exibir código-fonte", "Mostrar código-fonte da página" ou similar. Descubra o que uma tag específica que você não conhece faz ou pesquise online pela resposta.
   • Você não pode editar os sites de outras pessoas, mas pode copiar o código HTML em seu próprio documento e brincar com ele para ver o que os diferentes ajustes fazem. Observação: como muitos sites usam folhas de estilo CSS, talvez você não consiga ver muitas cores ou outros estilos.
5. Aprenda sobre HTML lendo artigos mais aprofundados. Existem muitos recursos na Internet para dominar mais tags HTML, como W3Schools ou Codecademy. Existem também muitos livros HTML disponíveis, mas certifique-se de usar uma edição recente, pois o padrão HTML muda de tempos em tempos. Depois de dominar o HTML em um bom nível, você pode recorrer ao CSS para ter mais controle sobre o design e o estilo de sua página da web. Depois disso, a próxima etapa geralmente é javascript.

Pontas

• Pode ser útil encontrar uma página da Web simples na Internet e começar a mexer no código. Tente mover algum texto, mudar a fonte, mudar as imagens, o que você quiser!
• Você pode usar um bloco de notas para escrever o código, de modo que tenha algo em que recorrer se não se lembrar por um momento. Você também pode imprimir esta página e mantê-la para referência.
• XML e RSS são cada vez mais usados ​​em sites atualmente. O código pode parecer inacessível ao olho humano, especialmente quando visualizado no código-fonte, mas a funcionalidade pode ser útil.
• As tags usadas em HTML não diferenciam maiúsculas de minúsculas, mas o padrão é usar letras minúsculas (como fazemos neste artigo). Letras minúsculas para as tags são altamente recomendadas, também para compatibilidade com XHTML.

Avisos

• Algumas tags não são mais usadas e foram substituídas por outras tags que fazem o mesmo, mas geralmente oferecem mais opções.
• Se você quiser ter certeza de que sua página está em conformidade com o padrão HTML, vá para o site W3 para testar seu código em relação ao padrão atual. Muitas tags se tornaram obsoletas e foram substituídas por tags que funcionam melhor em navegadores modernos.

Necessidades

• Um programa de processamento de texto, como o Bloco de Notas (Windows) ou o Editor de Texto (Mac).
• uma folha de papel ou caderno (opcional)
• Um programa especialmente desenvolvido para escrever HTML, como Notepad ++ para Windows ou TextWrangler para Mac (opcional)