Aviso! Estamos em Beta. Caso encontre algum problema, envie um email para games@vidageek.net

Aprenda Html

Html é uma linguagem que foi criada para acrescentarmos informações à texto de forma que um computador seja capaz de entender o significado das estruturas do texto.

Isso é necessário porque, quando olhamos para textos como:

Comprar:
    - batata
    - cenouras
    - frutas

nós sabemos que isso é uma lista, mas um computador não sabe. E como ele não sabe, ele não consegue automatizar tarefas para nós (imagine a web sem links, você tendo que copiar a colar todas as urls que quiser visitar).

Hoje isso vai muito mais longe. Ferramentas como buscadores e outros analizam as nossas páginas para identificar, relacionar e tentar apresentar o melhor resultado para perguntas. Sem essa informação, isso seria praticamente impossível.

Esse jogo cobre as principais tags e atributos de Html 5

Você pode começar os exercícios pelo primeiro ou escolher um grupo abaixo:

Conteúdo:

Metadados em texto

Dentro de frases que escrevemos em páginas html, nós podemos indicar que existem palavras que merecem uma atenção especial. Para isso, nós marcamos elas com as seguintes tags, dependendo do que é esse "especial":

TopoComeçar!

Links

Links são um dos elementos mais importantes de uma página html. Ele é o que separa um simples texto (como uma página de um livro) de uma rede de informações que você consegue acessar com apenas um clique.

Um link costuma ser composto por pelo menos três informações:

Isso em html fica assim:

<a href="endereço da página">Texto para o usuário</a>

Ex.:

TopoComeçar!

Imagens

Adicionar uma imagem em uma página html também é muito simples, mas precisa de um pouco de cuidado.

Quando adicionamos uma imagem usando html, essa imagem não pode ser apenas decorativa. Ela precisa possuir significado dentro da página (como ajudar a elucidar um ponto ou apresentar informação que é muito difícil de ser descrita, como a foto de uma pessoa ou lugar).

Além disso, é muito importante colocar uma descrição da foto no atributo alt da tag, pois isso permite que deficientes visuais também utilizem a sua página com o auxílio de leitores de tela e permite que ferramentas de busca entendam o que aquela imagem representa.

A tag imagem fica da seguinte forma em html (Note que você não deve fechá-la):

<img src="endereço da imagem" alt="texto alternativo da imagem">

Ex.:

TopoComeçar!

Parágrafos e quebra de linha

Html é uma linguagem de marcação de textos, então não é de se estranhar que existam tags para marcar parágrafos e quebras de linha.

Para delimitar um parágrafo, usamos a tag <p>

Ex:

<p>Um parágrafo. Com duas frases.</p>

No caso de quebra de linha, usamos a tag <br>. Uma coisa importante de notar é que assim como a tag <img>, a tag <br> não é fechada.

Ex:

<p>Um parágrafo. <br> Com uma frase em cada linha</p>
TopoComeçar!

Cabeçalhos

Cabeçalhos, ou headings costumam indicar sobre o que é o texto que vem logo após eles. Existem seis tags para se criar um cabeçalho em html:

O número neles não é a toa. O <h1> é mais importante que o <h2>. O <h4> é mais importante que o <h5>. Outra forma de pensar é vê-los como cabeçalho e sub-cabeçalhos.

Ex.:

<h1>Cabeçalho mais importante da página</h1>
um monte de texto
<h2>Um sub-item importante do cabeçalho anterior</h2>
o texto do sub-item
TopoComeçar!

Listas ordenadas

Listas ordenadas são listas cujos elementos possuem algum tipo de ordem entre eles.

Normalmente escreveríamos uma lista dessas da seguinte forma:

1. Misturar os ingredientes secos
2. Adicionar os húmidos
3. Bater até ficar homogêneo
4. Assar por 30 minutos

Em html, essa lista fica:

<ol>
    <li>Misturar os ingredientes secos</li>
    <li>Adicionar os húmidos</li>
    <li>Bater até ficar homogêneo</li>
    <li>Assar por 30 minutos</li>
</ol>

Notem que não colocamos o número. O browser se encarregará disso.

TopoComeçar!

Listas não ordenadas

Listas não ordenadas são mais comuns. Um uso comum seria uma lista de coisas a fazer:

- Arrumar a torneira
- Colocar o chuveiro
- Prender o armário
- Limpar a casa

Embora todos esses ítens estejam relacionados, não existe uma ordem específica para eles. Em html fica assim:

<ul>
    <li>Arrumar a torneira</li>
    <li>Colocar o chuveiro</li>
    <li>Prender o armário</li>
    <li>Limpar a casa</li>
</ul>

Notem que para definir o item da lista usamos a mesma tag que é usada para as listas ordenadas, a <li>.

TopoComeçar!

Form

Formulários são uma das principais formas de um usuário enviar dados para o servidor.

Para criar um formulário, usamos a tag <form>. Mas existem alguns atributos bem importantes dessa tag:

Ex.:

<form action="http://www.google.com/search" method="get">
</form>
TopoComeçar!

Inputs

Os inputs são a parte de um formulário com a qual o usuário efetivamente interage.

Existem diversos tipos de inputs, dependendo do que você quer que o usuário digite:

Todos os inputs também podem ter o atributo name, que é como o servidor saberá de qual input que os dados vieram.

Ex.:

<form action="http://www.google.com/search" method="get">
    <input type="text" name="s" placeholder="Digite a sua busca">
</form>
TopoComeçar!

Label e Textarea

Caso você queira colocar uma área para o usuário digitar o texto, você pode usar a tag <textarea>:

Além disso, quase sempre queremos mostrar para o usuário o que é para ele digitar naquele input. Para isso, podemos usar a tag <label>. Um atributo importante que ela tem é o for, que você deve colocar o valor do atributo id do input que você está descrevendo.

Ex.:

<form>
	<label for="feedback">Feedback</label>
	<textarea id="feedback"></textarea>
</form>
TopoComeçar!

Tabelas

Html também suporta a exibição de dados em forma de tabelas. Para isso utilizamos as seguintes tags:

Várias tags, mas no fim das contas, as tabelas costumam ter a seguinte cara:

<table>
    <thead>
        <tr><th>Coluna 1</th><th>Coluna 2</th>
    </thead>
    <tbody>
        <tr><td>Valor 1 da Coluna 1</td><td>Valor 1 da Coluna 2</td></tr>
        <tr><td>Valor 2 da Coluna 1</td><td>Valor 2 da Coluna 2</td></tr>
    </tbody>
    <tfoot>
        <tr><th>Coluna 1</th><th>Coluna 2</th>
    </tfoot>
</table>

E isso seria renderizado como

Coluna 1Coluna 2
Valor 1 da Coluna 1Valor 1 da Coluna 2
Valor 2 da Coluna 1Valor 2 da Coluna 2
Coluna 1Coluna 2

TopoComeçar!

Tabelas (colspan e rowspan)

Existem dois atributos que afetam quantas linhas ou colunas o <th> ou o <td> vão ocupar:

Isso significa que se você escrever o seguinte código:

<table>
    <tr><td colspan="2" rowspan="2">Super célula</td><td>normal 1</td></tr>
    <tr><td>normal 2</td></tr>
    <tr><td>normal 3</td><td>normal 4</td><td>normal 5</td></tr>
</table>

Ele será renderizado com a primeira célula ocupando o espaço de 4 células:

Super célulanormal 1
normal 2
normal 3normal 4normal 5
TopoComeçar!

Estrutura do conteúdo

Existem 4 tags que servem para organizar pedaços grandes das nossas páginas.

TopoComeçar!

Tags sem significado

Existem duas tags cujo significado delas é não ter significado. Quando você utiliza elas você está basicamente dizendo que o que está dentro delas não possui algum significado especial e sim que você agrupou isso por outras razões (por exemplo, para facilitar a utilização de CSS ou Javascript)

TopoComeçar!

Estrutura de uma página

Até o momento você apenas criou pedaços de páginas, mas nunca criou uma página completa.

Para uma página Html ser válida, ela precisa conter alguns elementos:

Para que a página seja válida, ela precisa conter esses elementos da seguinte forma:

<!DOCTYPE html>
<html>
    <head><title>O seu título</title></head>
    <body>
    </body>
</html>
TopoComeçar!

Páginas completas

Agora que você já conhece as principais tags Html e já sabe como fazer uma página válida, você fará vários exercícios criando página completas. Esses exercícios são baseados em páginas reais.

Caso tenha alguma dúvida, consulte os exercícios anteriores.

TopoComeçar!