Guia Completo Sobre HTML para Iniciantes

Fala, galera. Beleza? Adm Diogo Pé aqui. Escrevi este Guia Completo para Você que quer começar os estudos com HTML e HTML 5.

Não esqueça de Criar a sua Conta aqui no PB Overflow para poder interagir com a nossa comunidade!

Boa leitura.

O que é HTML?

O HTML é linguagem de marcação de hipertexto usada para criar sites de forma geral e páginas da web. O código usado para torná-los visualmente atraentes é conhecido como CSS e vamos nos concentrar nisso em um tutorial posterior. Por enquanto, vamos nos concentrar em ensinar a você como construir, em vez de projetar .

Como dito anteriormente, o HTML é uma Linguagem de Marcação de HyperTexto e, para entender o HTML, é preciso entender antes o que é HyperTexto e uma Linguagem de Marcação.

O que é HyperTexto?

Hipertexto significa que o documento contém links que permitem ao leitor pular para outros lugares no documento ou para outro documento. A versão mais recente é conhecida como HTML5.

O que é uma Linguagem de Marcação de HyperTexto?

Sendo assim, por definição, uma linguagem de marcação de HyperTexto é uma maneira pela qual os computadores se comunicam para controlar como o texto é processado e apresentado visualmente na tela do usuário. Para fazer isso, o HTML usa dois conceitos fundamentais: tags e atributos .

O que são tags e atributos?

Tags e atributos são a base do HTML.

Eles trabalham juntos, mas desempenham funções diferentes - vale a pena investir 2 minutos para diferenciar os dois .

Como Escrever em HTML

Entendido conceitualmente o que é o HTML, vamos ver um pouco como escrevê-lo:

Tags HTML: O que são?

As tags HTML são usadas para marcar o início de um elemento HTML e geralmente são colocadas entre os sinais de “menor que” e “maior que”. Um exemplo de uma tag é: <h1> .

A maioria das tags deve ser aberta <h1> e fechada </h1> para funcionar.

<h1> Meu Título </h1>

Atributos HTML: O que são?

Os atributos HTML contêm informações adicionais . Os atributos assumem a forma de uma tag de abertura e informações adicionais são colocadas dentro .

Um exemplo de atributo é:

<img src="minha_foto.jpg" alt="Foto do meu Cachorro">

Nesse caso, a fonte da imagem (src) e o texto alternativo (alt) são atributos da tag <img>.

Regras de ouro para lembrar

  1. A grande maioria das tags deve ser aberta ( <tag> ) e fechada ( </tag> ) com as informações do elemento, como um título ou texto entre as tags.
  2. Ao usar várias tags, as tags devem ser fechadas na ordem em que foram abertas . Por exemplo:

<strong><em>Este é um texto importante.</em></strong>

Note que a tag <em> é fechada antes da tag <strong>, respeitando a ordem em que foram abertas.

Criando a sua primeira Página HTML

Primeiro, você precisa abrir seu editor de HTML, onde encontrará uma página em branco limpa para escrever seu código.

De lá, você precisa fazer o layout de sua página com as seguintes tags. Essas tags devem ser colocadas uma embaixo da outra, no topo de cada página HTML que você criar.

<html> - Esta tag sinaliza que daqui em diante vamos escrever em código HTML.

<head> - É para onde vão todos os metadados da página - coisas destinadas principalmente a mecanismos de pesquisa e outros programas de computador.

<body> - É para onde vai o conteúdo da página .

Exemplo de código para a sua Primeira Página HTML

<html>
<head>
<title>PB Overflow - O Fórum do Programadores Brasil</title>
</head>
<body>
<h1>Esta é a minha Primeira Página</h1>
</body>
</html>

Copie o código a seguir e cole em um editor de texto da sua preferência. Salve o arquivo como minha_pagina.html

Entendendo o código de exemplo

No código de exemplo você deve ter notado a utilização de algumas tags HTML. Dentro da <head> tag, há uma tag que sempre está incluída:, <title> mas há outras que são igualmente importantes:

<title>

Tag Body: Adicionando conteúdo que é visível

É aqui que inserimos o nome da página conforme aparecerá na parte superior da janela ou guia do navegador. Em seguida, utilizamos a tag <body> para adicionarmos o conteúdo que de fato é visualizado na página pelo usuário. É aqui na tag <body> que incluímos textos, imagens, tabelas, formulários e tudo o mais que vemos nos sites por aí.

Tags de Cabeçalho

Os cabeçalhos HTML são muito importantes para a sua página. Eles auxiliam os usuários a entenderem a organização do seu conteúdo, além de facilitar a sua leitura. Por exemplo, esta subseção que você está lendo, chamada “Tags de Cabeçalho”, é uma tag de cabeçalho do tipo <h4>.

Em HTML, os títulos são escritos nos seguintes elementos:

  • <h1>
    • <h2>
      • <h3>
        • <h4>
          • <h5>
            • <h6>

Como você deve ter adivinhado <h1> e <h2> deve ser usado para os títulos mais importantes, enquanto as marcas restantes devem ser usadas para subtítulos e textos menos importantes.

Fique atento sempre aos cabeçalhos, pois os robôs dos mecanismos de pesquisa usam essa ordem ao decifrar quais informações são mais importantes em uma página.

Como adicionar texto em HTML

Adicionar texto à nossa página HTML é simples usando um elemento aberto com a tag <p> que cria um novo parágrafo . Colocamos todo o nosso texto normal dentro do elemento <p> .

Quando escrevemos texto em HTML, também temos uma série de outros elementos que podemos usar para controlar o texto ou fazer com que ele apareça de uma determinada maneira . Confira o exemplo:

<p> Não esqueça de criar a sua conta no PB Overflow para fazer parte da nossa comunidade </p>

Outros Elementos-Chave

Eles são os seguintes:

Essas tags devem ser abertas e fechadas em torno do texto em questão.

Vamos experimentar. Em uma nova linha no editor de HTML, digite o seguinte código HTML:

<p>Seja bem vindo(a) ao <em>PB Overflow</em>. Este é o Fórum oficial da Comunidade do <strong>Programadores Brasil.</strong></p>

Não se esqueça de clicar em salvar e atualizar a página em seu navegador para ver os resultados.

Como adicionar links em HTML

Adicionar links em HTML, sem sombra de dúvidas, é algo essencial para a sua página. Quase tudo em que você clica enquanto navega na web é um link que o leva a outra página do site que você está visitando ou a um site externo.

Os links são incluídos em um atributo aberto pela tag <a>. Este elemento é mais um dos elementos que usa um atributo e, portanto, parece diferente das tags mencionadas anteriormente .

A tag <a>

A tag de abertura <a> (ou âncora) é escrita no formato:

<a href="AQUI VEM O MEU LINK">Aqui vem o Texto meu Link</a>

A primeira parte do atributo aponta para a página que será aberta assim que o link for clicado.

Enquanto isso, a segunda parte do atributo contém o texto que será exibido para um visitante a fim de induzi-lo a clicar naquele link. Confira o exemplo:

<a href="https://programadoresbrasil.com.br/">Acesse o Programadores Brasil</a>

Como adicionar imagens em HTML

Todo site possui ao menos uma imagem. Portanto, saber como colocar imagem em HTML é essencial. Em HTML, a tag <img> é responsável por inserir imagens em seu site. Confira no exemplo:

<img src="minha_foto.jpg" alt="Foto do meu Cachorro" />

Note que são utilizados os atributos src e alt. Eles são responsáveis por, respectivamente, definir o caminho para o arquivo da sua Imagem e o texto alternativo que aparecerá na tela do usuário caso a imagem não carregue.

Continue os Estudos de HTML

Bem, pessoal… falei bastante por aqui rs. Como de costume, deixo sempre materiais complementares para você continuar seus estudos.

A Amazon está com diversos Livros de Programação com Super Desconto (clique e confira).

Além disso, está rolando agora mesmo uma Promoção no Curso Pacote Full Stack Master, da Danki Code, para você que deseja estudar HTML 5 e tecnologias Full Stack mais a fundo.

Um abraço e não esqueça de Criar a sua Conta aqui no PB Overflow para Fazer parte da Nossa Comunidade!

5 curtidas