SdevLab – Tutorial | HTML Básico

Eae Galera!

Este é o primeiro tutorial de uma série que ensina os fundamentos básicos do HTML.

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!

Ao contrário do que muitos pensam, HTML não é uma linguagem de programação, pode ser considerada uma linguagem de formatação porque na realidade um arquivo html somente vai ser interpretado pelo navegador. Tanto é que se por acaso você quiser inserir uma informação dentro de algum elemento, você vai ter que utilizar uma outra linguagem de programação.
Sem mais demoras, vamos ao tutorial!

Introdução ao HTML Básico

HTML (Hiper Text Markup Language) é uma linguagem de marcação de texto que foi desenvolvida por Tim Berners-Lee na década de 90 para resolver um problema de comunicação e disseminação de pesquisas entre ele e seu grupo de trabalho.

Desde então html se tornou a linguagem mais básica para qualquer pessoa que deseja deixar de ser um usuário e iniciar algum trabalho de desenvolvimento até pessoas que desejam escrever posts ou artigos mais elaborados em seus blogs ou gerenciadores de conteúdo (como o Joomla! ou Drupal).

Para começar este tutorial de uma forma mais prática vamos direto a um exemplo. Copie o código abaixo no Bloco de Notas (Notepad) ou no editor de textos básico de seu SO:

<html>
     <head>
          <title>
               Teste 1
          </title>
               <!--Título da página. Vai ser exibido na barra de títulos 
               e nas abas do navegador. -->
     </head>
     <body>
          Esta é minha primeira página! Tudo que eu fizer entre o par de 
          tags body será exibido no navegador. 
     </body>
</html>

Agora salve este documento como teste1.html e abra o arquivo, esta é sua primeira página!

Explicando o exemplo:

  • A primeira linha do nosso exemplo é a tag <html>. É ela que diz ao seu browser que este é o início de um documento html.
  • Na segunda linha temos a tag <head>, que marca o início do cabeçalho  da página. As informações contidas entre as tags <head> e </head> não são exibidas no navegador.
  • Na terceira linha temos a tag <title>,  o que estiver entre ela e a tag </title> (conteúdo da linha 4) será exibido na barra de título do navegador.
  • A linha 6 é um exemplo de comentário em html
  • Logo após o par de tags <body>. Tudo que estiver entre <body> e </body> será exibido no navegador.
  • Para finalizar, temos a tag </html> que fecha o nosso documento.

As tags mostradas acima são a base de todo arquivo html. Entendendo bem esta base que é muito simples, o estudo de html fica muito fácil!

Nos próximos tutoriais, vou sempre indicar o editor de textos Bloco de Notas (Notepad), caso você seja usuário de Linux ou outro sistema operacional, basta utilizar o editor de textos básico.

OBS: Você também pode usar o Notepad ++ para fazer os exemplos dos tutoriais. Ele não vem instalado por padrão no seu sistema operacional mas é muito simples de instalar e tem a vantagem de destacar as tags html (e várias outras linguagens de programação), o que facilita bastante o desenvolvimento.

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!

2 comentários sobre “SdevLab – Tutorial | HTML Básico

  1. Pingback: SdevLab – Tutoriais | Elementos HTML « Sanoj's devLab
  2. 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