SdevLab – Tutorial | Elementos HTML

Eae galera!
O tutorial de hoje é a sequência do tutorial anterior, que dava início à uma série de tutorias sobre HTML. Se você já tem uma noção básica não faz diferença a sequência, porém, se você deseja aprender na ordem correta, siga para a página que direciona o aprendizado básico.
Boa leitura!

ATUALIZAÇÃO (06/08/2015): Este post foi escrito com base nos tutoriais do W3C para HTML 4.1. O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para o tutorial de HTML 5, logo não é mais válido. O conteúdo está correto, mas não é sobre a versão mais atual!

Elementos de uma página HTML

Relembrando, a parte do código que era responsável por exibir dados no navegador era a tag <body>. A tag <body> é um elemento html que tinha como conteúdo (no tutorial anterior):  “Esta é minha primeira página! Tudo que eu fizer entre as tags <body> e </body> será exibido no navegador”.

Esta tag  assim como as tags <html>, <head>, <title>, etc são elementos da linguagem. Html não é case sensitive (ou seja não faz diferença eu escrever <html> ou <HTML>) mas que por recomendação desde a versão HTML 4 deve ser escrita em lowercase. Isto acontece porque na linguagem XHTML (evolução do HTML) lowercase é um pré-requisito.

Os Atributos

As tags tem atributos, que podem acessar informações adicionais que modificam a forma que o navegador exibe um elemento. Voltando ao exemplo do tutorial anterior, se nós utilizarmos o atributo bgcolor dentro da tag <body> nós vamos alterar a cor do fundo da página.

Atributos sempre vem em combinações como nome=”valor” e são sempre adicionados no início de um elemento HTML, como por exemplo:

<body bgcolor="blue">

Note que no exemplo foi utilizado aspas duplas que são na maioria das vezes mais utilizadas, mas aspas simples também funcionam.
Quando o valor de um atributo precisar ser escrito entre aspas também, deve ser feita uma combinação de aspas duplas e simples, como no exemplo abaixo:

<elemento atributo='Atributo "APELIDO DO ATRIBUTO" atributo'>

Não vamos gastar muito tempo nesta parte de atributos agora, no decorrer dos tutoriais eles serão acrescentados às tags que forem apresentadas.

Tags Básicas

Todas as tags devem ficar entre os caracteres < e >; a maioria delas normalmente vem em pares como por exemplo <b> e </b>. A primeira parte <b> indica o início do elemento e a segunda parte </b> o final do elemento.

As tags mais básicas de HTML são as tags listadas na tabela abaixo:

Tag Descrição
<html> </html> Define o começo e o fim de um arquivo html.
<body> </body> Define o corpo do documento.
<h1> </h1> Define um título variando o tamanho de acordo com a tag escolhida. Para aumentar ou diminuir este tamanho, utilize h2,h3,h4,h5 ou h6.
<p> </p> Define o início um parágrafo.
<br> Insere uma quebra de linha simples no texto.
<hr> Insere uma linha horizontal no texto.
<! –> Define um comentário.

A utilização de cada tag será explicada no exemplo abaixo. Copie e cole o código no Bloco de Notas (Notepad):

<html>
   <head>
      <title>
           Teste 2
      </title>
   </head>
   <body bgcolor="blue">
      <h3>
           Esta é minha segunda página!
      </h3>
      <p>
           Este é o primeiro parágrafo. Note que entre este primeiro parágrafo 
           e o segundo foi inserida uma linha horizontal através da tag hr.
      </p>
      <hr>
      <! Veja que tudo que eu colocar entre as tags de comentário não será 
      exibido no navegador. -->
      <p>
           No segundo parágrafo vamos fazer um teste utilizando a quebra de linha. 
           Observe que vou pular uma linha agora mas
           nada vai acontecer.

           Isto acontece porque em html quando eu quero passar o texto para a linha 
           abaixo sem abrir um novo parágrafo, eu devo usar
           a tag <br> que envia o texto da maneira correta uma linha abaixo.
      </p>
   </body>
</html>

Agora salve este exemplo como teste2.html e abra o arquivo para ver o resultado!

Até o próximo tutorial!
😉

Os códigos deste post estão disponíveis em:
https://github.com/jonasvm/sdevlab-cursos/tree/master/sdevlab-html41
Contribua!

Fonte de pesquisa: w3schools.com/html

Um comentário sobre “SdevLab – Tutorial | Elementos HTML

  1. Pingback: SdevLab – Curso| Aprenda HTML 4.1 Online | Sanoj's devLab

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s