Tutorial HTML (para iniciantes)

Tutorial HTML para iniciantesGostaria de aprender um pouco de HTML?


Isso parece como uma boa ideia. Daí a razão pela qual reunimos este tutorial em HTML para iniciantes.

Existem pelo menos 1,7 bilhão de sites no mundo hoje. Praticamente todos esses sites usam HTML de uma maneira ou de outra.

P.S: se você não deseja aprender HTML e começar a criar seu site imediatamente, sem a necessidade de codificação, consulte este guia: Como criar um site GRATUITAMENTE (sem aprender HTML).

Introdução ao HTML


O que é HTML?

O que é HTMLHTML, um acrônimo para HyperText Markup Language, é uma linguagem de computador para criar sites e aplicativos da web. Consistindo principalmente em séries de códigos geralmente escritos em um arquivo de texto e salvos como HTML, o código escrito na linguagem HTML se traduz em um texto bonito e bem formatado ou em uma combinação de texto e mídia quando visualizado em um navegador.

O HTML foi desenvolvido pela primeira vez pelo físico britânico Tim Berners-Lee em 1990 e passou por tantas evoluções desde então que a versão mais recente pode alcançar muito mais do que se imaginava quando a linguagem foi inventada..

Neste tutorial, abordaremos os conceitos básicos da linguagem HTML e tudo o que você precisa saber para começar a usar HTML como iniciante.

Versões HTML

Primeiro, um rápido resumo de todas as versões HTML desde que o HTML foi inventado.

  • HTML 1.0: Esta foi a versão básica do HTML e o primeiro lançamento da linguagem.
  • HTML 2.0: Esta versão foi introduzida em 1995. Ela evoluiu gradualmente, permitindo recursos extras, incluindo upload de arquivos com base em formulário, tabelas, mapas de imagens do lado do cliente e internacionalização.
  • HTML 3.2: Na tentativa de garantir o desenvolvimento de padrões para a World Wide Web, o World Wide Web Consortium (W3C) foi fundado por Tim Berners-Lee em 1994. Em 1997, eles publicaram o HTML 3.2.
  • HTML 4.0: Mais tarde, em 1997, o W3C lançou o HTML 4.0 – uma versão que adotava muitos tipos e atributos de elementos específicos do navegador.
  • Mais tarde, o HTML 4.0 foi reeditado com edições menores em 1998.
  • HTML 4.01: Em dezembro de 1999, o HTML 4.01 foi lançado.
  • XHTML: As especificações foram introduzidas em 2000 e foi recomendado o uso como padrão comum com o HTML 4.01. Ele incorporou o XML para garantir que o código seja escrito corretamente e para garantir a interoperabilidade entre linguagens de programação.
  • HTML5: O W3C publicou o HTML5 como uma recomendação em outubro de 2014 e, posteriormente, lançou o HTML 5.1 em novembro de 2016.

Escolhendo seu editor HTML

Escolha o editor HTMLSe você estiver pensando em criar páginas da Web em HTML, precisará de um editor de HTML. Há vários benefícios em usar um editor HTML.

Um bom editor de HTML manterá seu código limpo e organizado. Ele também detecta quando você abre uma nova tag e a fecha automaticamente para evitar que você tenha um código de buggy e, como resultado, reduzindo a quantidade de digitação que você precisa fazer. Atualmente, a maioria dos editores de HTML permite que você visualize sua página da web para ver como ela ficará em um navegador da Web usando o recurso WYSIWYG.

Existem muitos editores de HTML gratuitos e pagos. Abaixo estão algumas das principais opções que você pode escolher:

Blocos básicos de construção de HTML


Depois de decidir o editor de HTML que deseja usar, a próxima etapa é entender os blocos de construção do HTML. Ao codificar em HTML, é essencial entender esses blocos de construção. Eles incluem tags, atributos e elementos. Vamos dar uma olhada básica neles abaixo:

Introdução às Tags

Depois de usar o HTML, a primeira coisa que você precisa entender são as tags. Em essência, as tags separam o texto normal do código HTML.

Consequentemente, quando se trata de HTML, as tags fazem a diferença entre o documento ser exibido como texto comum ou “texto transformado”, que é basicamente um código de texto que parece exibir uma série de coisas (hiperlinks, imagens, mídia ou outros métodos de formatação) com base no que é instruído a exibir com base em tags.

Vamos dar uma olhada na palavra “Ele é um menino” como exemplo:

  • No formato de texto comum, você obtém: Ele é um menino.
  • Em formato de texto em negrito, você obtém: Ele é um menino

Para alcançar o que temos no formato negrito, você deve usar o tag.

tornando o texto em negrito em html

Em HTML bruto, temos Ele é um menino que o navegador então traduz para isso: Ele é um menino.

“Ele é um menino” também pode sair em itálico.

Isso é alcançado usando o tag.

tornando o texto em itálico em html

Nós temos: Ele é um menino que sai como Ele é um menino.

O hiperlink é obtido usando o tag.

tornando o texto com hiperlink em html

Em HTML bruto, temos: Ele é um garoto que mostra como ele é um garoto.

Há algumas coisas que você deve entender sobre as tags:

  • As tags são praticamente o elemento básico do HTML – você não pode fazer HTML sem tags! Se você está preso em qual tag usar, verifique nossa tabela periódica HTML.
  • Quase todas as tags abertas devem ser fechadas. Lembre-se de que há exceções. Um exemplo de uma tag que não precisa ser fechada é uma tag vazia, como a quebra de linha:
    .
  • As tags estão contidas em menos de (“<”) and greater than (“>“) suporte angular. As tags de fechamento contêm uma barra à direita que se torna antes do nome da tag que está sendo fechada. Exemplo de uma tag aberta: . Exemplo de uma tag fechada .
  • Todo arquivo HTML começa com a tag de abertura e termina com a tag de fechamento. A primeira linha do arquivo HTML deve declarar o tipo de documento para que o navegador saiba qual sabor HTML você usa. É por isso que você vê as páginas HTML iniciando com ““Antes do código HTML começar.

Antes do conteúdo ser adicionado, a maioria dos arquivos HTML se parece basicamente com isso:

HTML--

A seção que segue o A tag geralmente contém informações sobre o documento, como título, meta tags e onde localizar seu arquivo CSS – conteúdo que não é visível diretamente na página do navegador. A seção entre “ e”(Que representamos com“ CONTEÚDO PRINCIPAL ”) é onde o conteúdo principal do arquivo HTML, que o espectador verá no navegador, está localizado. Isso inclui tudo, desde o primeiro parágrafo a hiperlinks, formatação de multimídia e tudo mais.

Introdução aos Elementos

introdução aos elementos

Em HTML, um “elemento” consiste na tag de abertura e fechamento, bem como no conteúdo entre as tags.

No “Ele é um menino”(Em negrito) exemplo, temos isso em HTML: Ele é um menino. O texto “Ele é um menino” é cercado por uma etiqueta aberta e fechada. Tudo, incluindo a tag de abertura, o conteúdo e a tag close é um elemento.

Quando uma tag é aberta, o conteúdo é introduzido e a tag é fechada, temos um elemento.

Um elemento pode estar em uma forma básica ou em uma forma complexa. Por quê? Porque qualquer coisa entre uma marca aberta e uma marca de fechamento, bem como essas marcas, é um elemento. Isso significa que podemos ter elementos dentro de um elemento. No nosso exemplo atual, “ele é um menino” (Ele é um menino) é um elemento.

Você notará que dissemos anteriormente que os documentos HTML contêm o antes do início do conteúdo. O conteúdo pode incluir centenas de elementos diferentes, mas todos esses elementos fazem parte do elemento “body” (como o elemento body está aberto, contém conteúdo e é fechado).

Introdução aos atributos

Embora os documentos HTML usem basicamente tags para tudo, às vezes queremos comunicar informações adicionais dentro de um elemento. Nesse caso, usamos um atributo. O atributo é usado para definir as características de um elemento, é usado dentro da tag de abertura do elemento. Os atributos são compostos de um nome e um valor.

Observe que o valor de um atributo é colocado entre aspas usando o formato Seu texto.

exemplo de um atributo

Exemplo:

Ele é um menino

Neste exemplo, estamos instruindo que “Ele é um menino” está alinhado no centro do documento.

Introdução ao HTML


Introdução ao HTMLSupondo que você deseje criar seu próprio documento HTML básico hoje, como começar? Desde a criação de títulos de página até a criação de formulários, mostraremos como começar com o HTML abaixo.

Criando o HTML Elemento

Ao criar um documento HTML, uma das primeiras coisas que você criará é o elemento. Ele contém metadados (ou dados sobre o documento HTML). Isso inclui informações como o conjunto de caracteres, título do documento, estilos de documento, scripts etc..

Alguns dos elementos no inclua o título, criado com o tag.</p><p><strong>Exemplo</strong>:</p><pre><title>Este é o título da nossa página

Este título será exibido na guia do navegador. Também é o que será indexado como o título da página quando os robôs do mecanismo de pesquisa rastrearem seu site.

Isso também inclui o , geralmente usado para especificar informações que os mecanismos de pesquisa podem usar para descrever o conteúdo em suas listagens. Isso inclui a descrição, palavras-chave, informações do autor etc. O elemento também especifica o conjunto de caracteres que o documento HTML usa.

Criando títulos em HTML

criando cabeçalhos em html

Os títulos desempenham um papel importante no sucesso de um site. Em primeiro lugar, eles facilitam a digitalização do conteúdo de suas páginas. Em segundo lugar, e talvez mais importante, eles comunicam a estrutura de suas páginas da web aos mecanismos de pesquisa e, portanto, geralmente afetam a classificação do seu conteúdo nos resultados dos mecanismos de pesquisa..

Dito isto, é importante evitar o uso de tags de cabeçalho para tornar seu texto grande ou negrito. Existem outras tags que podem ser usadas para isso (que abordaremos mais adiante nesta seção). Em vez disso, as tags de cabeçalho devem ser usadas apenas para estrutura.

Existem seis tags de cabeçalho em HTML:

para
, com o

tag indicando o cabeçalho mais importante e o
tag indicando o cabeçalho menos importante.

Para criar cabeçalhos, simplesmente decida qual cabeçalho você está criando, abra o cabeçalho com a tag de cabeçalho comum e lembre-se sempre de fechar as tags assim que terminar.

Exemplo de cabeçalhos HTML:

  • Este é o seu primeiro título HTML

    (o maior)

  • Este é o seu segundo título HTML

  • Este é o seu terceiro título HTML

  • Este é o seu quarto título HTML

  • Este é o seu quinto título em HTML
  • Este é o seu sexto título HTML

Criando parágrafos

criando parágrafos em HTML

O próximo passo é começar a criar parágrafos. Os parágrafos podem ser criados com o

tag.

Exemplo:

Este é o seu primeiro parágrafo.

Este é o seu segundo parágrafo e você criará muitos outros parágrafos.

Lembre-se de que escrever em HTML é muito diferente de escrever em texto puro. Portanto, se você dividir o texto dentro do HTML sem iniciar um novo parágrafo, não importará realmente quando o texto for exibido pelo navegador. Em vez disso, você deseja usar uma quebra de linha, que é representada pelo
tag.

Exemplo:

Este é um novo parágrafo. E eu quero usar um número de novas linhas. Então, eu estou terminando.

Isso não sairá da seguinte forma:

Este é um novo parágrafo.
E eu quero usar um número de novas linhas.
Então, eu estou terminando.

Em vez disso, sairá assim:

Este é um novo parágrafo. E eu quero usar um número de novas linhas. Então, eu estou terminando.

Então, como você divide os textos em novas linhas para que apareçam assim:

Este é um novo parágrafo.
E eu quero usar um número de novas linhas.
Então, eu estou terminando.

Usando quebras de linha.

Exemplo:

Este é um novo parágrafo.
E eu quero usar um número de novas linhas.
Então, eu estou terminando.

Dito isto, é importante observar que a quebra de linha (
) é uma tag vazia, então você não precisa fechá-la.

Formatação de texto em HTML

formatação de texto em HTML

O próximo passo é formatar seu texto em HTML. É aqui que você pode indicar se deseja que seu texto saia em negrito, itálico, sublinhado, inscrito, sobrescrito etc. Este é um guia básico, portanto, esta seção não será a última palavra para formatação. Em vez disso, incluiremos apenas algumas tags de formatação básicas. O processo para usar outras formas de formatação é simples – basta encontrar a tag desejada e prosseguir:

Usando negrito: Ele é um menino sai como Ele é um menino

Usando itálico: Ele é um menino sai como Ele é um menino

Sublinhando o texto: Ele é um menino sai como Ele é um menino. Vale a pena notar que o A tag foi preterida no HTML 4.01 e foi redefinida para representar texto estilisticamente diferente no HTML5. Como resultado, é recomendável usar CSS para indicar o texto que deve ser sublinhado. Como este artigo é um guia básico, estamos simplificando.

Usando subscrito: Ele é um menino sai como Ele é um menino

Usando sobrescrito: Ele é um menino sai como Ele é um menino

Para outras tags que podem ser usadas para formatar, dê uma olhada no glossário no final deste recurso, onde incluímos diversas tags HTML relevantes.

Listas ordenadas e não ordenadas

Cedo ou tarde, você terá que criar listas. As listas podem ser ordenadas (ou seja, numeradas) ou desordenadas (ou seja, não numeradas).

Aqui está um exemplo de uma lista ordenada:

  1. Item 1
  2. Item 2
  3. Item 3

Aqui está como criá-lo:

  1. Item 1
  2. Item 2
  3. Item 3

Aqui está um exemplo de uma lista não ordenada:

  • Item 1
  • Item 2
  • Item 3

Aqui está como criá-lo:

  • Item 1
  • Item 2
  • Item 3

Se ainda não é óbvio. Aqui está um detalhamento:

o

  • A tag é usada para indicar cada item da lista. Ao fazer uma lista, você pode usar o
      para indicar uma lista ordenada (“o” = ordenada e “l” = lista) ou o