Pular para o conteúdo principal

HTML o básico para começar


Entendendo o que é HTML






A sigla HTML significa Hypertext Markup Language (Linguagem de Marcação de Hipertexto). Tá mas o que isso quer dizer? Para entender o que ela faz é preciso primeiro entender o que é hipertexto. Basicamente falando, hipertexto é um texto, que faz referência a outros textos, através de links. Tudo que você vê num site é basicamente texto interpretado pelo seu navegador de internet. 

Quando você acessa um site qualquer, nele há links para outras páginas e sites correto? Então, esse é um exemplo básico de hipertexto na prática. Quando falo que HTML é uma linguagem de marcação, é porque ela foi desenvolvida para marcar as partes de um texto ou documento para que ele seja exibido pelo seu navegador ou outro ambiente da forma adequada. 


Ilustração de duas páginas de documentos conectadas por links

Aqui vai uma nota importante: se você possui um navegador de internet (provavelmente tem, caso contrário não estaria lendo este conteúdo) então possui o básico para começar a aprender e para colocar em prática a maioria dos conceitos que serão apresentados aqui.

Visualizando o código-fonte de uma página

Saindo da parte teórica, um documento HTML possui marcadores (afinal ela é uma linguagem de marcação), que indicam ao navegador como exibir informação ao usuário. Vamos ver isso na prática? Se você estiver em um computador ou notebook, abra uma página web qualquer e aperte a tecla F12, será aberto o modo desenvolvedor e será exibido o código-fonte da página. Caso não apareça, procure a opção "Elementos" ou clique no símbolo de tags (< />) para exibi-lo. O código-fonte é o texto marcado (neste caso), que originou a página que você está visualizando. 

Como exemplo, acessei o blog da Mozilla que é a empresa responsável pelo navegador Mozilla Firefox, abaixo há uma imagem da página e o código fonte é somente um monte de texto demarcado por símbolos que o navegador compreende e traduz em elementos visuais (parágrafos, listas, fotos, vídeos etc...) e também sonoros (áudios) para nós. Aprenderemos futuramente como inserir tais elementos em nossos projetos.


Exibição de página do blog Mozilla

Código Fonte do Blog Mozilla



<!DOCTYPE html>
<html>
  <head>
    ... aqui vai código que ajuda o navegador e motores de busca como o Google a exibir a nossa página, porém não é exibida como conteúdo pelo navegador
  </head>
  <body>
    ... aqui vai código que é interpretado e exibido como conteúdo pelo navegador
  </body>
</html>

O que são tags?


Uma tag ou marcador serve para que o navegador ou outras ferramentas saibam como tratar o nosso texto, dando significado para ele. Em uma página html tudo é definido usando texto. No código fonte da página acima, a primeira coisa que vemos é chamada declaração DOCTYPE (tipo de documento), ela ajuda o browser (navegador) a saber qual o tipo de documento está sendo executado. Falaremos mais sobre isso futuramente, o importante é entender o motivo dessa declaração aparecer em documentos html e que precisamos lembrar de escrevê-la quando formos criar nossos projetos.

Partindo para a prática


Vamos aprender o restante na prática! Abra um editor de texto simples (por exemplo, Bloco de Notas ou NotePad++)  e insira as seguintes informações:

<DOCTYPE html>
<html>
  Olá Mundo!
</html> 

Salve o documento em local de fácil localização, na área de trabalho, por exemplo, com qualquer nome que te agrade, o importante é que a extensão (a parte final que descreve o tipo de arquivo) seja .htm ou .html. Exemplo de nome para o arquivo: exemplo1.html

*É importante lembrar que o formato por padrão de arquivos do bloco de notas é o .txt (texto puro), portanto é necessário alterálo para .htm ou .html para que nosso navegador possa exibi-lo. 

Se você salvou o documento na sua área de trabalho aparecerá um ícone do seu navegador com o nome do arquivo criado. Abra o arquivo. O seu navegador deve exibir o documento similar a isso:

Captura da tela do navegador com o texto: Olá Mundo!

Concluindo


O exemplo foi bem simples, usamos a declaração de tipo de documento antes de qualquer coisa e depois usamos as tags <html></html> que marcam o início e o fim do documento html para que o navegador saiba onde começar e onde terminar a interpretação do nosso documento. Porque escrevemos "Olá Mundo!" ? Há uma prática no meio da programação (alguns chamam de "maldição", mas é uma brincadeira), onde uma pessoa não é capaz de aprender qualquer linguagem se não conseguir escrever "Olá Mundo!" na tela. 

Parabéns se você conseguiu. A página é muito simples e não está tecnicamente correta, mas o navegador é capaz de renderizá-la (exibi-la) somente com as informações que declaramos. Nas próximas postagens aprenderemos novas tags como <head> (cabeçalho) e <body> (corpo) para marcar nosso código mais corretamente. Ficou com alguma dúvida? O código não funcionou? Deixe seu comentário ou sugestão! Até a próxima!


Marcadores:

Comentários

Postar um comentário

Postagens mais visitadas deste blog

Estilos Inline no HTML (Não faça isso!)

 Estilos Inline São Rápidos, Mas Perigosos A forma mais rápida de aplicar estilos em elementos é inserindo-os na própria tag html do elemento, através do atributo  style="". Todas propriedades e valores inseridos entre as aspas do atributo style serão aplicados ao elemento que o contiver, porém, não faça isso! Na presente postagem explicaremos melhor o que você deve preferir na hora de estilizar seu código. Por que não devemos usar estilos direto nos elementos (inline) html? Primeiro porque não é considerada uma boa prática misturar código html e css no mesmo local, o que causa desorganização e problemas para pesquisar e corrigir erros. O outro bom motivo para não utilizar estilos inline é que em pequenos projetos como os exemplos html que usamos, onde há poucas linhas de códigos e poucos elementos, você não terá problema em usá-los, porém conforme o código for crescendo e com isso a complexidade dele, você não achará uma boa ideia usar estilos inline. Aqui vai um exemplo: se...
Postar um comentário
Leia mais

Introdução a CSS (Cascading Style Sheets)

O que é CSS  Aprendemos que HTML é a linguagem que estrutura os documentos web, pode ser considerado a espinha dorsal dos documentos web. Da mesma forma, que o html é considerado a espinha dorsal ou estrutura básica dos sites,  CSS (Cascading Style Sheets "Folhas de Estilo em Cascata") é a linguagem responsável por estilizar, colorir e organizar o leiaute da visualização do documento web.  Podemos utilizar uma analogia com o corpo humano para entendermos melhor o papel das CSS em uma página web: Assim como a estrutura para o nosso corpo é o nosso esqueleto, em um documento web esse "esqueleto" seria o código HTML, por cima desse esqueleto recebemos outras camadas como músculos, tecidos e pele...  essas camadas que dão forma ao nosso corpo, podem ser comparadas às folhas de estilo em cascata (CSS) que em nossos códigos nos permitem dentre outras coisas: alterar a cor dos elementos em um documento, alterar a cor de fundo, adicionar imagens ou padrões  de fundo, ed...
Postar um comentário
Leia mais

Introdução a formulários HTML

 Criando um formulário de contato simples O que iremos fazer hoje Formulários permitem ao usuário de um site ou aplicativo inserirem e enviarem informações para o site ou programa. Em html temos a tag <form></form> que nos permite criar um formulário em nossos documentos. hoje teremos uma visão bem superficial do assunto, já que a intenção é introduzir a funcionalidade de forma simplificada e não entrar nos detalhes de implementação e estilo neste primeiro momento. Fazendo a nossa marcação básica Abra o bloco de notas e insira a nossa tão conhecida estrutura básica html:  <!DOCTYPE html> <html lang="pt-br">   <head>     <title>Formulário de Contato</title>     <meta charset="utf-8">   </head>   <body>       </body> </html> Insira um cabeçalho de nível 1 (<h1>) dentro do body com o seguinte texto: Formulário de Contato Salve o documento com o nome...
Postar um comentário
Leia mais