Criando sua primeira página web com HTML

O mundo da programação pode parecer muito grande quando estamos começando. Em alguns textos aqui no site, vimos que é possível começar bem rápido com a linguagem Javascript. Hoje vamos aprender outra tecnologia, o HTML, que nos ajuda a criar páginas web.

O que é HTML

HTML é o que chamamos de linguagem de marcação, ela não é considerada de programação pois você não cria fluxos com ela, por exemplo. O HTML é escrito num arquivo de texto comum e ele segue uma estrutura chamada XML, que veremos em outro momento.

Se você quiser ver um exemplo de html, você pode no seu navegador ver o código fonte da página, no Firefox o atalho geralmente é ctrl + U  / cmd + U. Você verá que a maioria das coisas é escrita no padrão <algumacoisa>, chamamos essa estrutura de tags. Esse conjunto de tags estão dizendo pro navegador desenhar elementos na tela; um texto, um botão, um campo de texto, etc. Logo usamos essa linguagem para fazer sites, ou até mesmo aplicações para rodar no navegador.

Conhecendo algumas tags

Todo arquivo HTML deveria ter a seguinte estrutura

<!DOCTYPE html>
<html>
   <head>
      <!-- Comentário em html -->
   </head>
   <body>

   </body>
<html>

O que isso tudo quer dizer? A primeira linha é uma marcação específica pra dizer que o arquivo atual é um html. A partir daí temos a tag inicial, a <html>, perceba que na última linha temos </html>, esse </ significa que é uma tag de fechamento. Isso diz que você pode declarar outras tags dentro da tag html, e é isso que fazemos na linha 3, quando abrimos a tag head e fechamos ela na linha 5.

html minimo identado

imagem 1

Perceba que na linha 3 começamos com alguns espaços, e na linha 4 começamos com mais espaços que na linha anterior. Chamamos isso de identação. No html, você poderia escrever tudo sem enter ou sem espaços mas identar o código ajuda na leitura. Lembre-se que programadores não programam sozinhos, você sempre tem que pensar em quem vai ler o código no futuro.

Agora vamos entender o que cada uma dessas tags faz:

  • <html></html> É a tag básica, tudo que se escreve está dentro dessas marcações
  • <head></head> Define o cabeçalho da página. Lá são definidas algumas informações que não vão necessariamente aparecer na páginas mas são importantes como o título da página, o ícone e etc.
  • <body></body> Define o corpo da página, agora sim, tudo que será exibida na página está dentro dessas tags.

Se você escrever um arquivo com esse html e abrir ele usando o Firefox (abra uma nova aba, e faça ctrl + o ou cmd + o) você verá uma página em branco, porque não definimos nada no body. Vamos a seguir, começar a brincar com a página.

Formulários

formularo para criar um tweet

imagem 2

Quando estamos navegando na internet, é muito comum nos depararmos com formulários. Que são aquelas sequências de campos (ou até mesmo um campo só) com um botão final para finalizar alguma ação. Alguns tipos de formulário:

 

formulario para se cadastrar no twitter

imagem 3

Nosso primeiro código html visível será a construção de um formulário simples de cadastro, usando os mesmos campos que a imagem ao lado, do twitter.

Tags de formulário

Para isso precisamos conhecer novas tags, basicamente a tag que define o espaço de um formulário, uma que define um campo simples de texto e outra pra um botão para finalizar ação.

A tag <form></form> é uma tag apenas para dizer pro navegador que está sendo definido um formulário, com elementos que serão colocados entre as tags.

A tag <input /> cria inputs na tela, ou seja, elementos para o usuário interagir e inserir/inputar dados.  Perceba que essa tag não funciona com uma declaração de abertura e uma de fechamento, como a <body></body>, ela mesma se fecha numa declaração só usando /> .

A tag <button /> cria um botão na página.

<!DOCTYPE html>
<html>
   <head>
      <!-- Comentário em html -->
   </head>
   <body>
      <input />
      <input />
      <input />
      <button>Cadastrar<button>
   </body>
<html>

Ao abrir esse arquivo no navegador você verá algo parecido com a imagem abaixo.

exemplo de formulario desalinhado

imagem 4

Está longe de ser o formulário do Twitter. Por quê o botão não está azul? Por quê está tudo em uma “linha” só ? Quando o html nasceu, a web e as páginas eram bem mais simples que hoje, esse tipo de personalização e alinhamento é feito com outra tecnologia, o CSS. No fim, para criarmos uma página mínima usaríamos HTML, CSS e talvez um pouco de Javascript. Vamos voltar ao foco do texto, que é o HTML e resolver pelo menos o alinhamento do html usando a tag <br /> que quebra uma linha na tela.

<html>
   <head>
      <!-- Comentário em html -->
   </head>
   <body>
      <input /><br />
      <input /><br />
      <input /><br />
      <button>Cadastrar<button>
   </body>
<html>
formulario alinhado

imagem 5

Na imagem 5 você consegue ver o resultado, agora cada elemento é impresso na tela em “linhas” diferentes.

Aquele texto dentro de cada input é chamado de placeholder. É um texto padrão que só aparece enquanto o usuário não digita nada no input. Para definirmos um valor, utilizaremos um atributo do input. Atributos são usadas para mudar certas características do elemento.

<!DOCTYPE html> 
<html>
 <head>
      <!-- Comentário em html -->
 </head>
 <body>
    <form>
        <input placeholder="Nome" type="text" /><br />
        <input placeholder="email"  type="email" /><br />
        <input placeholder="senha" type="password" /><br />
        <button>Cadastrar</button>
    </form>
 </body>
</html>

O atributo type está definindo o que o usuário está digitando naquele input, se é um texto livre, um email (ou seja, não poderia colocar espaço por exemplo) ou se é uma senha.

Referência

Você pode estar se perguntando “como eu vou lembrar de todas as tags, para que elas servem, cada atributo, etc?”. Com um tempo trabalhando na área você lembrará do mínimo, mas você sempre pode acessar um site da Mozilla (mesma empresa por trás do Firefox), o MDN . Lá você pode encontrar uma documentação enorme sobre, por exemplo, todas as características, atributos e exemplos da tag input. Ele é bem completo ;).

Nesse post construimos uma página simples que representa um formulário de cadastro de usuário. Em outros posts nós vamos trabalhar mais em cima desse código, então fique de olha nos próximos conteúdos.