Guias - HTML

E já que estamos falando de esqueleto, vamos à estrutura básica de uma página HTML.

                1.. <!DOCTYPE html>
                2.. <html>
                3.. ....<head>
                4.. ........<meta charset="utf-8">
                5.. ........<title> MyPage </title>
                6.. ....</head>
                7..
                8.. ....<body>
                9.. ....</body>
                10. </html>
            

Beleza. Que onda é essa?

<!DOCTYPE html> - Essa declaração diz ao navegador que estamos trabalhando com HTML. Não é uma tag HTML, é uma instrução para o navegador.
<html></html> - Essas são as tags de abertura e fechamento do documento HTML. <html> é o nosso ponto de partida, e </html> é o nosso adeus.
<head></head> - Entre essas tags declararemos algumas coisas interessantes, como o título da nossa página. Aquele... o que aparece na aba do navegador :) (<title></title>).
<body></body> - Entre essas tags a criatividade prudente está liberada! HAHA. É aqui que vamos compor a nossa estrutura.

Exemplos

As keywords ajudam a encontrarmos websites em mecanismos de busca.


                    1. <meta name="keywords" content="HTML, InfoJr, UFBA, CSS">

A description descreve a descrição do seu site.


                    1. <meta name="description" content="Guia de HTML da InfoJr UFBA">

Autor.


                    1. <meta name="author" content="JP Rodrigues">

Essa meta tag é importantíssima, pois garante uma boa visualização da sua página em todos os dispositivos. Responsividade.


                    1. <meta name="viewport" content="width=device-width, initial-scale=1.0">

Toda metatag deve ser incluída na head. Metadados não são escritos apenas na tag meta. A tag meta for criada para representar qualquer informação que não pudesse ser representada pelas tags <base>, <link>, <script>, <style> ou <title>.

Entenda que as metatags são opcionais. O seu código não vai parar de funcionar se não escrevê-las.

E agora?

Agora você precisa aprender algumas tags muito importantes e que devem ser utilizadas na body.

div - As divs são como caixas que agrupam qualquer conteúdo como você quiser.
h1, h2, h3, h4, h5, h6 - São tags que devem ser utilizadas apenas para títulos. O h1 é o título de maior prioridade e tamanho, e h6 é o título de menor prioridade e tamanho.
p - Tag que deve ser utilizada APENAS para texto. Representa parágrafos.
br - Quebra de linha. Só deve ser utilizada em meio a tags de TEXTO, tal como p, h1-h6. Não deve ser utilizada como auxiliar de estilização para separar divs, inputs e outras tags que não sejam tags de texto.
ul - lista não ordenada e que deve ser preenchida apenas com a tag li, que por sua vez deve ser utilizada para escrever os items de uma lista.
header - representa um grupo de ajudas introdutórias ou de navegação. Essa tag pode conter alguns elementos de título, mas também outros elementos como um logotipo, um campo de busca e afins.
nav - utilizada para identificar menus de navegação.
section - A section é um tematizador de conteúdo. Todo o conteúdo dentro de uma section deve tratar do mesmo assunto. Normalmente contém um h1-h6 que identifica a seção.
img - Utilizada para inserir imagens na página.

Criando formulários

Veja o exemplo. :)

                1.. <!DOCTYPE html>
                2.. <html>
                3.. ..<head>
                4.. ....<meta charset="utf-8">
                5.. ....<title> MyForm </title>
                6.. ..</head>
                7..
                8.. ..<body>
                9.. ....<form method="POST" action="somefile.ext">
                10. ......<label for="name"> Nome </label>
                11. ......<input id="name" name="name" type="text"></input>
                12. ......<label for="email"> Email </label>
                13. ......<input id="email" name="email" type="email"></input>
                14. ......<label for="pass"> Senha </label>
                15. ......<input id="pass" name="password" type="password"></input>
                16. ......<label for="age"> Idade </label>
                17. ......<input id="age" value="18" name="age" type="number"></input>
                18. ......<label for="phone"> Telefone </label>
                19. ......<input id="phone" name="tel" type="text"></input>
                20. ......<label for="description"> Descrição </label>
                21. ......<textarea id="description" name="description" rows="8" cols="40"></textarea>
                22. ......<select name="level" id="level">
                23. ........<option value="50">Administrador</option>
                24. ........<option value="22">Usuário</option>
                25. ......</select>
                26. ......<button type="button">Não faz nada.</button>
                27. ......<button type="submit">Envia o form.</button>
                28. ......<button type="cancel">Apaga os dados.</button>
                29. ....</form>
                30. ..</body>
                31. </html>
            

form - É a tag responsável por criar formulários.
- method - Atributo que determina por qual método HTTP um formulário vai ser enviado. As opções são GET e POST. Caso não seja especificado, o método utilizado será GET.
- action - Determina para onde as informações do formulário serão enviadas. Normalmente é o endereço de um arquivo de controlador. Ex: "controllers/user_controller.php"
input - Tag que para criar campos de texto.
- id - Atributo que identifica unicamente qualquer elemento html. Você não pode colocar o mesmo id em 2 ou mais elementos.
- type - Atributo que determina o tipo de dado que vai ser inserido em um input. (text, email, password, date, number, hidden, color, radio, checkbox)
- name - Atributo que determina o nome de um input. Essa informação normalmente é utilizada no backend para processar e identificar as informações enviadas pelo formulário.
- value - Valor padrão para um input.
label - Tag que define o título de um campo de texto.
- for - Atributo que determina a qual input a label se refere através do id do input. Faz com que ao usuário clicar na label, selecione o input.
textarea - Tag para campos de texto longo
- rows - Número de linhas.
- cols - Número de colunas.
select - Seletor com lista de opções
- option - Opção.
button - Tag para botões
- type - Determina o tipo de ação executada pelo botão.
  - submit - Envia o formulário
  - reset - Devolve os valores do formulário ao padrão. Se o padrão não for definido, será vazio.
  - button - Não executa nenhuma ação. Útil para ações personalizadas com javascript.

HyperText Markup Language

Beleza. O que é isso?

Beleza. Que onda é essa?

E que tipo de coisa interessante vai na <head></head>??

Você não achou estranho que, na seção anterior, a <meta charset="utf-8"> não foi descrita?

Subi no ônibus em Marrocos.

Exemplos

E agora?

Criando formulários

CHEGA DE TANTA TAG

E aí, a introdução a HTML é isso aí.