Html não é linguagem de programação, é linguagem de marcação.
Estrutura básica
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="author" content="André Milani">
<meta name="keywords" content="Textos, Painéis, Links, HTML">
<meta name="description" content="Aprendendo HTML básico: textos, painéis e links">
<title></title>
<link rel="stylesheet" type="text/css" href="estilos.css">
<!--para importar uma webfont, antes do elemento style no html-->
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
Marcações semânticas
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<nav>
<main>
<section>
<aside>
<article>
<header>
<footer>
<hgroup> <h1> <h2> ...
<em>
<strong>
<address>
<cite>
<blockquote>
<address>
<code>
<figure>
<figcaption>
<abbr title=""> abreviações
<time datetime"ano-mês-diaThh:mm:ss-03:00">
<del> texto deletado/riscado
<ins> texto inserido
<kbd> keyboard
Marcações - revisar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!-- comentários em bloco -->
<div> */ painéis ou containers*/
<spam> marcar conteúdo dentro de um container
<ul> <li> </li> </ul> //listas
<ol> <li> </li> </ol> //listas
<dl> <dt> <dd> // Listas de definição
<a href="" target="_blank // _self"></a>
<br> e <hr>
<p>
<b> <i> <u> <s>
<iframe src="" name="" id=""></iframe>
<audio controls autoplay loop>
<source src="" type="audio/mp3">
</audio>
<video controls poster="" muted>
<source src="" type="video/mp4">
</video>
<figure> para imagens, gráficos ou mesmo trechos de códigos que podem ser independentes de posição no conteúdo.
<a href="http://www.youtube.com/user/softbluecursos">
<img src="sbv2_brasilMap.png" alt="">
</a>
<figcaption>Softblue: de Curitiba para todo o Brasil (mapa).</figcaption>
</figure>
<video width="320" height="180" controls>
<source src="seuVideo.mp4" type="video/mp4">
Seu navegador não suporta esse vídeo.
</video>
<iframe width="320" height="180" src="https://www.youtube.com/embed/iTlKN1HJkb0" frameborder="0" allowfullscreen></iframe>
<style>formatação css no html</style>
<button acesskey="b">botão com atalho na tecla b</button>
<div tabindex="0">para permitir colocar o elemento em foco por meio do teclado</div> O valor define a ordem
Links para elementos internos e dead links
1
2
3
4
5
6
7
<a href="#links-header">links para elemento interno</a> <!--criar links internos com #-->
<h2 id="links-header">
<a href="#">dead link</a> <!--dead links podem ter seu comportamento alterado por Java Script-->
<!--é possível aplicar mais de uma classe a um elemento, separando os nomes apenas com espaços-->
Tabelas
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<table>
<caption> </caption>
<thead>//adicionar semântica
<tr>
<th>Table Head</th>
<th>Table Head</th>
</tr>
</thead>
<tfoot></tfoot>
<tbody></tbody>
<tr>
<td>Table Row</td>
<td>Table Data</td>
</tr>
<tr>
<td rowspan="2"></td>
<td colspan="2"></td>
</tr>
</table>
//colspan=""
//rowspan=""
Imagens
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//Mapas de imagem
<img src="" usemap="#nomedomapa">
<map name="nomedomapa">
<area shape="rect//circle//poly" coords="1,1,1,1" href="">
</map>
//Imagens responsivas
<img src=""(para navegadores antigos) srcset="link 400w, link 800w(largura da imagem)" sizes="(min-width: 480px) 33.33vw, tamanhopararenderizar em viewports vw">
<picture>
<source media="(min-width: 480px)" sizes="33vw" srcset="rwd-images/1280.jpg 1280w, rwd-images/960.jpg 960w, rwd-images/480.jpg 480w">
<source sizes="100vw" srcset="rwd-images/822_mob.jpg 822w, rwd-images/640_mob.jpg 640w, rwd-images/320_mob.jpg 320w">
<source srcset="" type="">
<img src="rwd-images/1280.jpg" alt="texto alternativo">
</picture>
Formulários
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<form method="get" action="?" enctype="multipart/form-data"> diferentes metodos para envio dos dados para o servidor. action aponta o endereço de envio-->
usar get e action ? retorna os valores no endereço do próprio arquivo, e não envia arquivos anexos. prefira metodo post para mais segurança
<label>Nome: </label>
<input type="text" name="campoNome" placeholder="Insira aqui o seu nome..." required> o atributo required torna o campo obrigatório
<input type="number" name="campoIdade" min="0" max="115" maxlength="30"> o name não aparece na pagina, mas identifica os dados para o servidor
<fieldset> agrupa campos
<legend>outras informações</legend>
<label for="sexo">Sexo: </label> é considerada a melhor prática incluir um "for" com a mesma id dos imputs para que outras tecnologias possam reconhecer o relacionamento da label com os elementos filhos
<input id="sexo" type="radio" name="campoSexo" value="M"> Masculino ////a marcação input não possui fechamento
<input id="sexo" type="radio" name="campoSexo" value="F"> Feminino ///é preciso criar um radio para cada opção, com o mesmo name para limitar a marcação a uma unica opção
é preciso incluir o value para informar o valor que será enviado para o servidor
<label for="likes">Interesses: </label> <!--mesmo uso do for do caso radio-->
<br>
<input id="likes" type="checkbox" name="campoAutomovel"> Automóveis <!--não utilize no name caracteres especiais-->
<br>
<input id="likes" type="checkbox" name="campoBarco"> Barcos /////campos checkbox não enviam o valor do name, enviam "on" somente o quando o campo foi marcado, a menos que você inclua um value
<br>
<input id="likes" type="checkbox" name="campoAviao" checked> Aviões<!--incluir checked no radio ou checkbox torna o campo marcado por padrão-->
<label>Estado civil: </label>
<select name="campoEstadoCivil">
<option value="S">Solteiro(a)</option>
<option value="C">Casado(a)</option>
<option value="D">Divorciado(a)</option>
<option value="V">Viúvo</option>
</select>
<!--outra forma de campo similar a anterior-->
<label>Estado civil: </label>
<input list="campoEstadoCivil" name="campoEstadoCivil">
<datalist id="campoEstadoCivil" name="campoEstadoCivil">
<option value="Solteiro(a)"></option>
<option value="Casado(a)"></option>
<option value="Divorciado(a)"></option>
<option value="Viúvo"></option>
</datalist>
<br>
</fieldset>
<input type="email" name="email">
<input type="date" name="data">
<input type="range" name="faixa">
<input type="color" name="cor">
<textarea> </textarea>
<input type="hidden" name="campooculto" value="oculto"><!--o campo oculto não é exibido na página, mas seu valor é enviado juntamente com o formulário-->
<input type="file" name="arquivo"> <!--necessário incluir no form o parametro enctype="multipart/form-data"-->
<br>
<input type="reset" value="Limpar os dados">
<input type="submit" value="Enviar os dados"> <!--botão para enviar-->
</form>
</body>
</html>
Bootstrap
Framework para desenvolvimento de sites responsivos;
Possui uma vasta biblioteca de componentes.
Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com)
A classe “container” possui largura fixa para cada tamanho de tela, enquanto que “container-fluid” expande por toda a largura disponível.