Projetista Digital

Olá Pessoal,

Hoje invadimos o fantástico mundo dos formulários web. Com o uso de formulários podemos criar mecanismos de interação do usuário com o site, desde caixas de busca até complexas fichas de cadastro e compra de produtos. Usamos formulários o tempo inteiro: para fazer login, buscas, cadastros, compras e enviar mensagens via fale conosco. Quando enviamos emails ou scraps no Orkut, pesquisamos no Google, participamos de fóruns e chats, em todos esses momentos fazemos uso de formulários web. Portanto, fiquem de olhos abertos e estudem com atenção, porque o assunto é MUITO IMPORTANTE.

Características Gerais

Veja o formulário abaixo:

Podemos perceber que esse formulário é composto de duas partes: uma caixa de texto e um botão. Todo formulário é composto por elementos ou controles, e o usuário interagirá com esses controles seja digitando dados, subindo arquivos, escolhendo opções etc. A primeira coisa que vocês precisam aprender: todo formulário é marcado pelas tags <form></form>, e dentro dessas tags são inseridos os controles do formulário. A tag <form> exige alguns atributos essenciais para o seu bom funcionamento:

• ACTION: Declaramos a página de destino do formulário, ou seja o documento que receberá todos os dados inseridos pelo usuário. Essa página possuirá algum script, que verificará a consistência dos dados inseridos, e por fim enviará o formulário para seu destino (banco de dados, email etc.);
• METHOD: Define a forma como enviaremos o formulário, ou seja como os dados serão transmitidos. Admite dois valores GET e POST.

Qual é a diferença entre GET e POST?

No método GET, enviamos os dados do formulário como parte da URL declarada no atributo ACTION. Imaginem um formulário com um campo apenas: texto_busca. Declaramos o atributo ACTION com o valor “processa_form.php” (essa página receberá os dados do formulário, verificará se está tudo ok e executará uma ação). Quando o usuário clicar no botão de disparo do formulário, o mesmo será enviado para a página declarada na ACTION, e o valor digitado dentro da caixa de texto fará parte da URL. Ficará assim: processa_form.php?texto_busca=valor digitado pelo usuário.

Quando você acessa o site do Google, na verdade, está pedindo uma permissão ao servidor do site. Seu navegador faz uma requisição ao servidor, pedindo acesso, o servidor decide se você pode ou não ver o site. Em linhas gerais, a coisa funciona mais ou menos assim. No método POST, os dados do formulário são enviados em anexo à essa requisição ao servidor. Tais dados são enviados de forma oculta, podendo ser criptografados e tratados por outros mecanismos de segurança.

Ok, a diferença entre um e outro todos já sabem, mas qual deles devemos usar? Existem uma série de fatores relacionados ao trabalho do programador, o que não é do nosso escopo. Simplificando o problema: usamos GET para formulários que exijam rapidez e poucos requisitos de segurança, tais como formulários de busca; e para todo o resto (login, cadastro, fale conosco, compras online etc.), usamos POST.

Elementos de um formulário: INPUT

Vamos aprender a escrever nossos formulários web, e conhecer seus principais elementos.

Caixa de texto simples – input text

Quando fazemos uma busca no Google, digitamos algo naquela caixa de texto e clicamos no botão “buscar”, e aí acessamos a página de resultados. Simples assim, né? Pois então, aquela caixa de texto é obtida pela tag HTML <input type=”text” />. A tag <input /> cria um campo de formulário para entrada de dados, com o atributo TYPE podemos criar diferentes tipos de campos, e a caixa de texto simples é um deles. Veja como ficaria o código abaixo:

1
2
3

<form action="" method="post">
<input type="text" />
</form>

Resultado:

Reparem que todos os elementos de um formulário ficam dentro das tags <form></form>. Não podemos usar nenhum controle, fora dessas tags.

Checkbox – input checkbox

Checkbox são aquelas caixas de seleção, onde marcamos ou desmarcamos uma opção. São campos de entrada de dados, onde o usuário assinala os campos que deseja responder com “SIM”, e deixa em branco aqueles que deseja marcar com “NÃO”. Veja o código abaixo:

1
2
3

<form action="" method="post">
<input type="checkbox" />
</form>

Resultado:

Radio buttons – input radio

O controle input radio permite ao usuário escolher apenas uma, dentre uma lista de opções. Ao contrário do controle input checkbox, onde o usuário pode escolher vários itens dentro de uma lista. Veja o código abaixo:

1
2
3
4
5
6

<form action="" method="post">
<input type="radio" name="form" />
<input type="radio" name="form" />
<input type="radio" name="form" />
<input type="radio" name="form" />
</form>

Resultado:

* Estudaremos mais adiante o atributo NAME.

Campo oculto – input hidden

Podemos armazenar informações sobre o usuário em campos ocultos de um formulário. Esses campos não serão renderizados pelo navegador, e são de grande importância para qualquer sistema dinâmico (que utiliza alguma linguagem de programação). Veja o código abaixo:

1
2
3

<form action="" method="post">
<input type="hidden" value="valor do campo oculto" />
</form>

* Estudaremos mais adiante o atributo VALUE.

Caixa de texto para senhas – input password

Já perceberam que quando vamos digitar uma senha em qualquer site, ao invés de aparecer o texto digitado, surgem pequenos marcadores (normalmente bolinhas escuras e preenchidas)? Pois é, não seria nada legal digitar nossas senhas, para que qualquer um possa ver na tela do nosso monitor. Podemos criar campos de formulários específicos para digitação de senhas. Veja o código abaixo:

1
2
3

<form action="" method="post">
<input type="password" />
</form>

Resultado:

Campo para upload de arquivos – input file

Em muitas situações precisamos anexar arquivos aos nossos formulários (uma foto, um arquivo de texto, uma planilha etc.). Nesses casos, sempre há um caixa de texto com um botão embutido, e ao clicar nele podemos escolher um arquivo qualquer em nosso computador, para fazer um upload. Para criar esse campo, basta seguir o código abaixo:

1
2
3

<form action="" method="post">
<input type="file" />
</form>

Resultado:

Botões – input submit e reset

Podemos também criar botões para enviar formulários, ou simplesmente apagar seus dados. Veja o código abaixo:

1
2
3
4

<form action="" method="post">
<input type="submit" value="ENVIAR" /> 
<input type="reset" value="LIMPAR" />
</form>

Resultado:

Bom pessoal, por hoje finalizamos! No próximo tutorial vamos terminar a lista de elementos de um formulário. Bom estudo e até lá!

Abraços,
Diego.

Olá Pessoal,

Para finalizar o assunto, vamos falar hoje sobre tabelas complexas. Até agora criamos tabelas simples, com apenas um cabeçalho, corpo e rodapé; porém, o XHTML nos fornece recursos para criar tabelas complexas, com várias cabeçalhos, rodapés e corpos. E nesse tipo de tabelas, temos mais uma série de tags e atributos para facilitar nosso trabalho, e incrementar a acessibilidade das mesmas. Arregacem as mangas e mãos à obra!

Reparem na tabela abaixo:

Parece complicado? Um pouquinho mas… todos vocês já viram o suficiente para criar uma tabela dessas. Para prosseguir com esse tutorial, vocês terão que montá-la em seus próprios computadores. Sem reclamações, podem começar! Só avancem para o próximo parágrafo depois de terminar essa tabela, simbora!

Quero que vocês olhem para o código abaixo:

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

<table border="2" cellpadding="4" cellspacing="4" summary="Tabela de notas dos alunos do 3º ano">
<caption>Tabela de Alunos</caption>
 
<thead>
<tr>
<th colspan="5">Turma A</th>
<th colspan="5">Turma B</th>
</tr>
 
<tr>
<th>Aluno</th>
<th>1º Bimestre</th>
<th>2º Bimestre</th>
<th>3º Bimestre</th>
<th>4º Bimestre</th>
<th>Aluno</th>
<th>1º Bimestre</th>
<th>2º Bimestre</th>
<th>3º Bimestre</th>
<th>4º Bimestre</th>
</tr>
</thead>
 
<tbody>
<tr>
<th id="aprovados" colspan="10">Aprovados</th>
</tr>
<tr>
<td>João</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>Maria</td>
<td>6</td>
<td>6</td>
<td>8</td>
<td>7</td>
</tr>
<tr>
<td>José</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>Joaquim</td>
<td>4</td>
<td>7</td>
<td>6</td>
<td>5</td>
</tr>
<tr>
<td>Maria</td>
<td>6</td>
<td>6</td>
<td>8</td>
<td>7</td>
<td>João</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>Joaquim</td>
<td>4</td>
<td>7</td>
<td>6</td>
<td>5</td>
<td>José</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
 
<tr>
<th id="reprovados" colspan="10">Reprovados</th>
</tr>
<tr>
<td>Manoel</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>Joana</td>
<td>6</td>
<td>6</td>
<td>8</td>
<td>7</td>
</tr>
<tr>
<td>Maricota</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>Juvenal</td>
<td>4</td>
<td>7</td>
<td>6</td>
<td>5</td>
</tr>
<tr>
<td>Joana</td>
<td>6</td>
<td>6</td>
<td>8</td>
<td>7</td>
<td>Manoel</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>Juvenal</td>
<td>4</td>
<td>7</td>
<td>6</td>
<td>5</td>
<td>Maricota</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>

Como já dito anteriormente, um leitor de tela irá apresentar os dados de uma tabela, de forma linear, ou seja, coluna por coluna, linha por linha. O uso de legendas e tags TH ajuda a contornar o problema em tabelas simples, com um único cabeçalho, o que não é o caso do exemplo acima. Para incrementar a acessibilidade em tabelas complexas, faremos uso dos atributos ID e HEADER. O atributo ID estabelece um identificador para um elemento HTML, distinguindo-o de qualquer outro elemento da página, ou seja, um ID aplicado em uma tag, não pode ser utilizado em nenhuma outra tag dentro da mesma página. Eu costumo brincar com meus alunos que o ID é o CPF de um elemento: podem ter vários com o mesmo nome, mas com aquele CPF só tem um!

Uma vez criado um ID para cada coluna cabeçalho da tabela, podemos referenciá-los nas demais células de conteúdo, estabelecendo uma conexão entre o cabeçalho e células de uma coluna. Para isso basta declarar o atributo HEADER em cada uma das células, referenciando os ID’s dos cabeçalhos aos quais essas células estejam relacionadas. Parece complicado, mas veja como fica a marcação do exemplo acima, com os atributos ID e HEADER:

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

<table border="2" cellpadding="4" cellspacing="4" summary="Tabela de notas dos alunos do 3º ano">
<caption>Tabela de Alunos</caption>
<thead>
<tr>
<th id="turma-A" colspan="5">Turma A</th>
<th id="turma-B" colspan="5">Turma B</th>
</tr>
 
<tr>
<th id="turma-A-nome">Aluno</th>
<th id="turma-A-bim-1">1º Bimestre</th>
<th id="turma-A-bim-2">2º Bimestre</th>
<th id="turma-A-bim-3">3º Bimestre</th>
<th id="turma-A-bim-4">4º Bimestre</th>
<th id="turma-B-nome">Aluno</th>
<th id="turma-B-bim-1">1º Bimestre</th>
<th id="turma-B-bim-2">2º Bimestre</th>
<th id="turma-B-bim-3">3º Bimestre</th>
<th id="turma-B-bim-4">4º Bimestre</th>
</tr>
</thead>
 
<tbody>
<tr>
<th headers="" id="aprovados" colspan="10">Aprovados</th>
</tr>
<tr>
<td headers="turma-A turma-A-nome aprovados">João</td>
<td headers="turma-A turma-A-bim-1 aprovados">5</td>
<td headers="turma-A turma-A-bim-2 aprovados">6</td>
<td headers="turma-A turma-A-bim-3 aprovados">7</td>
<td headers="turma-A turma-A-bim-4 aprovados">8</td>
<td headers="turma-B turma-B-nome">Maria</td>
<td headers="turma-B turma-B-bim-1 aprovados">6</td>
<td headers="turma-B turma-B-bim-2 aprovados">6</td>
<td headers="turma-B turma-B-bim-3 aprovados">8</td>
<td headers="turma-B turma-B-bim-4 aprovados">7</td>
</tr>
<tr>
<td headers="turma-A turma-A-nome aprovados">José</td>
<td headers="turma-A turma-A-bim-1">6</td>
<td headers="turma-A turma-A-bim-2">7</td>
<td headers="turma-A turma-A-bim-3">8</td>
<td headers="turma-A turma-A-bim-4">9</td>
<td headers="turma-B turma-B-nome">Joaquim</td>
<td headers="turma-B turma-B-bim-1 aprovados">4</td>
<td headers="turma-B turma-B-bim-2 aprovados">7</td>
<td headers="turma-B turma-B-bim-3 aprovados">6</td>
<td headers="turma-B turma-B-bim-4 aprovados">5</td>
</tr>
<tr>
<td headers="turma-A turma-A-nome aprovados">Maria</td>
<td headers="turma-A turma-A-bim-1">6</td>
<td headers="turma-A turma-A-bim-2">6</td>
<td headers="turma-A turma-A-bim-3">8</td>
<td headers="turma-A turma-A-bim-4">7</td>
<td headers="turma-B turma-B-nome">João</td>
<td headers="turma-B turma-B-bim-1 aprovados">5</td>
<td headers="turma-B turma-B-bim-2 aprovados">6</td>
<td headers="turma-B turma-B-bim-3 aprovados">7</td>
<td headers="turma-B turma-B-bim-4 aprovados">8</td>
</tr>
<tr>
<td headers="turma-A turma-A-nome aprovados">Joaquim</td>
<td headers="turma-A turma-A-bim-1">4</td>
<td headers="turma-A turma-A-bim-2">7</td>
<td headers="turma-A turma-A-bim-3">6</td>
<td headers="turma-A turma-A-bim-4">5</td>
<td headers="turma-B turma-B-nome">José</td>
<td headers="turma-B turma-B-bim-1 aprovados">6</td>
<td headers="turma-B turma-B-bim-2 aprovados">7</td>
<td headers="turma-B turma-B-bim-3 aprovados">8</td>
<td headers="turma-B turma-B-bim-4 aprovados">9</td>
</tr>
 
<tr>
<th headers="" id="reprovados" colspan="10">Reprovados</th>
</tr>
<tr>
<td headers="turma-A turma-A-nome reprovados">Manoel</td>
<td headers="turma-A turma-A-bim-1 reprovados">4</td>
<td headers="turma-A turma-A-bim-2 reprovados">3</td>
<td headers="turma-A turma-A-bim-3 reprovados">6</td>
<td headers="turma-A turma-A-bim-4 reprovados">3</td>
<td headers="turma-B turma-B-nome reprovados">Joana</td>
<td headers="turma-B turma-B-bim-1 reprovados">4</td>
<td headers="turma-B turma-B-bim-2 reprovados">4</td>
<td headers="turma-B turma-B-bim-3 reprovados">4</td>
<td headers="turma-B turma-B-bim-4 reprovados">5</td>
</tr>
<tr>
<td headers="turma-A turma-A-nome reprovados">Maricota</td>
<td headers="turma-A turma-A-bim-1 reprovados">2</td>
<td headers="turma-A turma-A-bim-2 reprovados">4</td>
<td headers="turma-A turma-A-bim-3 reprovados">5</td>
<td headers="turma-A turma-A-bim-4 reprovados">5</td>
<td headers="turma-B turma-B-nome reprovados">Juvenal</td>
<td headers="turma-B turma-B-bim-1 reprovados">3</td>
<td headers="turma-B turma-B-bim-2 reprovados">3</td>
<td headers="turma-B turma-B-bim-3 reprovados">4</td>
<td headers="turma-B turma-B-bim-4 reprovados">5</td>
</tr>
<tr>
<td headers="turma-A turma-A-nome reprovados">Joana</td>
<td headers="turma-A turma-A-bim-1 reprovados">6</td>
<td headers="turma-A turma-A-bim-2 reprovados">3</td>
<td headers="turma-A turma-A-bim-3 reprovados">3</td>
<td headers="turma-A turma-A-bim-4 reprovados">2</td>
<td headers="turma-B turma-B-nome reprovados">Manoel</td>
<td headers="turma-B turma-B-bim-1 reprovados">4</td>
<td headers="turma-B turma-B-bim-2 reprovados">4</td>
<td headers="turma-B turma-B-bim-3 reprovados">5</td>
<td headers="turma-B turma-B-bim-4 reprovados">5</td>
</tr>
<tr>
<td headers="turma-A turma-A-nome reprovados">Juvenal</td>
<td headers="turma-A turma-A-bim-1 reprovados">3</td>
<td headers="turma-A turma-A-bim-2 reprovados">3</td>
<td headers="turma-A turma-A-bim-3 reprovados">5</td>
<td headers="turma-A turma-A-bim-4 reprovados">5</td>
<td headers="turma-B turma-B-nome reprovados">Maricota</td>
<td headers="turma-B turma-B-bim-1 reprovados">4</td>
<td headers="turma-B turma-B-bim-2 reprovados">3</td>
<td headers="turma-B turma-B-bim-3 reprovados">2</td>
<td headers="turma-B turma-B-bim-4 reprovados">5</td>
</tr>
</tbody>
</table>

Ok! Escrevemos pra caramba, né? Vamos a algumas ponderações:

1. É necessário levar em consideração se o uso dos HEADERS não deixará a página pesada, dificultando o carregamento da mesma;
2. Como podemos ver, os HEADERS são uma lista com todos os ID’s relacionados à célula;
3. Devemos usar nomes simples para os ID’s, evitando nomes compridos e de difícil indexação;
4. É preciso ter todo cuidado ao escrever os HEADERS, sob o risco de prejudicar a leitura correta dos dados da tabela;
5. É preciso levar a escrita dos HEADERS em consideração, em sistemas dinâmicos, onde as tabelas são alimentadas via banco de dados.

Bem pessoal, por hoje é só. Falamos bastante sobre tabelas, e o assunto não acaba aqui. Continuem estudando e praticando. No próximo tutorial falaremos sobre FORMULÁRIOS, até lá!

Abraços,
Diego.

Olá Pessoal,

Continuando com o último post, falaremos hoje sobre tabelas acessíveis. Já falei isso por aqui: quando construímos um site, visamos atingir todos os públicos e perfis de usuário: usuários sem e com necessidades especiais, acessando a partir de dispositivos móveis, computadores comuns, leitores de tela, robôs de busca e qualquer outro software; devemos oferecer condições para que todos eles possam acessar ao conteúdo da página, cada um ao seu jeito. Criar uma bela página, visualmente impecável, pode impedir o acesso de todos os demais usuários do seu site: portadores de deficiências, robôs de busca etc. Com certeza isso não é um bom negócio, e seu cliente vai ficar meio P… da vida, quando descobrir o quanto ele está perdendo…

Visualmente essa tabela é legível, mas qualquer outro usuário impossibilitado de enxergá-la, seria obrigado a ler seu código (softwares, por exemplo) de forma seqüencial. A leitura dessa tabela ficaria assim: Código, Produto, Preço, 001, Notebook Acer, R$1.800,00, 002… Em resumo, uma tortura! Com algumas poucas tags e atributos podemos criar tabelas acessíveis para qualquer usuário: desde um cego, até o robôzinho do Google… Parece um bom negócio? É um ótimo negócio.

Criando tabelas com cabeçalhos

O primeiro passo rumo ao incremento da acessibilidade em nossas tabelas, é a utilização de cabeçalhos, permitindo que um leitor de telas, por exemplo, associe um cabeçalho a uma célula, ou seja, indique a qual coluna aquele conteúdo pertence. A primeira medida é trocar as tags <td></td>, da primeira linha da tabela, onde colocaremos os nomes das colunas (os cabeçalhos), por tags próprias para formar cabeçalhos de colunas: <th></th>. Outra tag importante é a CAPTION, onde eu posso criar um título que descreva a minha tabela. O título aparecerá centralizado logo acima da tabela, o que pode ser modificado via CSS. A tag TABLE possui um atributo chamado SUMMARY, onde eu posso colocar um texto descrevendo a tabela. Esse texto não será renderizado no navegador do usuário, mas é de grande ajuda para outros softwares que leiam nossa página. Veja como ficará nossa tabela, com o incremento das novas tags e atributos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<table border="2" cellpadding="4" cellspacing="4" summary="Tabela dos produtos de informática da loja X">
<caption>Tabela de Produtos - Informática</caption>
<tr>
<th>Código</th>
<th>Produto</th>
<th>Preço</th>
</tr>
<tr>
<td>001</td>
<td>Notebook Acer</td>
<td>R$1.800,00</td>
</tr>
<tr>
<td>002</td>
<td>Notebook Dell</td>
<td>R$2.200,00</td>
</tr>
<tr>
<td>003</td>
<td>Notebook Sony Vaio</td>
<td>R$3.800,00</td>
</tr>
</table>

Resultado:

Percebam que a primeira linha da tabela apresentou algumas modificações visuais: o texto está centralizado e em negrito. Em termos de marcação, qualquer dispositivo conseguirá associar o cabeçalho ao conteúdo das células da coluna correspondente. Isso é efeito das tags <th></th>. Já o título da tabela, centralizado acima da mesma, é por conta da tag <caption></caption>. E o atributo SUMMARY, conforme dito, não aparece na tela, mas tem grande valor para a acessibilidade de nossas tabelas. Acabou? Não… Podemos fazer bem mais! Veja a tabela abaixo:

Ok! Apenas aumentamos os cabeçalhos… Porém, um leitor de tela irá associar o nome do cabeçalho ao conteúdo da célula. Ficaria assim: Nome do Produto (notebook) – Notebook Acer; Nome do Produto (notebook) – Notebook Dell… Não precisamos torturar o internauta, basta adicionar uma legenda ao cabeçalho, ou seja, um valor reduzido que não será renderizado no navegador, mas que substituirá o texto do cabeçalho em um leitor de tela. Para isso, basta adicionar o atributo ABBR nas tags <th></th>. Veja como fica a nossa tabela, agora:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<table border="2" cellpadding="4" cellspacing="4" summary="Tabela dos produtos de informática da loja X">
<caption>Tabela de Produtos - Informática</caption>
<tr>
<th abbr="código">Código do Produto</th>
<th abbr="nome">Nome do Produto (notebook)</th>
<th abbr="preço">Preço do produto (em R$)</th>
</tr>
<tr>
<td>001</td>
<td>Notebook Acer</td>
<td>R$1.800,00</td>
</tr>
<tr>
<td>002</td>
<td>Notebook Dell</td>
<td>R$2.200,00</td>
</tr>
<tr>
<td>003</td>
<td>Notebook Sony Vaio</td>
<td>R$3.800,00</td>
</tr>
</table>

Acessibilidade em tabelas complexas

Com o que vimos até aqui, podemos construir tabelas com um bom nível de acessibilidade. Porém, em certas ocasiões teremos tabelas com alguns níveis a mais de complexidades: mesclagem de linhas e colunas, divisão por áreas e grupos etc. Em casos assim, precisamos adicionar mais alguns recursos de marcação.

Nossas tabelas podem ser divididas em três áreas: cabeçalho, corpo e rodapé. O cabeçalho já sabemos do que se trata; o rodapé corresponde a última linha da tabela, onde iremos inserir alguma informação complementar; e o corpo corresponderia a todo o conteúdo, ou seja, a tabela propriamente dita. Essas áreas são marcadas pelas tags: <thead></thead>, <tbody></tbody> e <tfoot></tfoot>. A ordem de declaração dessas tags é a seguinte: cabeçalho, rodapé e corpo. Veja como ficaria a marcação de nossa tabela:

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

<table border="2" cellpadding="4" cellspacing="4" summary="Tabela dos produtos de informática da loja X">
<caption>Tabela de Produtos - Informática</caption>
<thead>
<tr>
<th abbr="código">Código do Produto</th>
<th abbr="nome">Nome do Produto (notebook)</th>
<th abbr="preço">Preço do produto (em R$)</th>
</tr>
</thead>
 
<tfoot>
<tr>
<td colspan="3">Produtos com 10% de desconto</td>
</tr>
</tfoot>
 
<tbody>
<tr>
<td>001</td>
<td>Notebook Acer</td>
<td>R$1.800,00</td>
</tr>
<tr>
<td>002</td>
<td>Notebook Dell</td>
<td>R$2.200,00</td>
</tr>
<tr>
<td>003</td>
<td>Notebook Sony Vaio</td>
<td>R$3.800,00</td>
</tr>
</tbody>
</table>

Resultado:

O uso de TFOOT não é obrigatório, a menos que a tabela possua um rodapé. Além de produzir uma marcação melhor estruturada, e com isso organizar melhor as nossas tabelas, alguns browsers, quando as tabelas ocupam mais de uma página, manteriam o cabeçalho e rodapé fixo na tela, enquanto apenas o corpo se movimenta. Essas são implementações futuras, que irão melhorar a experiência do internauta, além de ser um grande facilitador para quem acessa nossos sites, a partir de dispositivos móveis (celulares, smartphones etc.). Outra vantagem: se imprimirmos uma tabela extensa, o cabeçalho e rodapé aparecerão no topo e fim, respectivamente, de cada página. Bem profissional, não acham?

Bom, encerramos o assunto tabelas acessíveis! Para fechar o tema, no próximo tutorial, falaremos sobre tabelas complexas. Assunto importante, então estudem com calma e atenção.

Abraços,
Diego.

Olá Pessoal,

Hoje vamos tratar de um tema importante e controverso. Importante, pois o uso de tabelas é comum em sites. Controverso por existir todo uma discussão histórica, envolvendo o uso indevido de tabelas, gerando certo preconceito em relação ao elemento HTML.

O uso indevido de tabelas na diagramação de sites

Nos tempos negros do desenvolvimento web, quando as pessoas desconheciam o W3C e WebStandards, a diagramação de sites era feita com o uso de tabelas. Imaginem uma planilha do Excel (ou qualquer software de planilhas), onde você vá mesclando linhas e colunas, formando as áreas que componham o layout. Os sites de antigamente eram feitos assim…

Problemas: em HTML, uma tabela tem como finalidade apresentar dados de forma tabular, usar uma tabela para diagramação de páginas, é subverter o uso do elemento; HTML é uma linguagem de marcação, unicamente, e usá-la para diagramação é fazer um péssimo uso da linguagem, além de descumprir as orientações e diretrizes do W3C; o uso de tabelas faz com que toda a diagramação do site fique engessada dentro de cada página, sendo necessário alterar todas as páginas, para realizar uma simples alteração de layout (imagine isso em 10, 100, 1000 páginas… trabalhoso, não?).

WebStandards, Tableless etc.

Com o advento do W3C, a divulgação dos WebStandards (padrões, orientações e diretrizes para desenvolvimento web) e sua ampla aceitação pelos designers e desenvolvedores, fazer um site se tornou uma tarefa bem mais simples. Ao invés de utilizar HTML para marcar, formatar e diagramar conteúdo, dividimos isso em duas camadas: HTML para marcação, e CSS para estilização (formatação / diagramação). Agora, alterar um layout não requer modificar todas as páginas do site, e sim alterar um único arquivo CSS com todas as definições do visual do site. Bem mais fácil, né?

Porém, nesse mundo capitalista tudo é uma questão de marketing, e o nome WebStandards (Padrões Web, na tradução) não é muito chamativo. Para fazer frente ao uso de tabelas, criou-se o termo TABLELESS (do inglês, SEM TABELAS) e aí gerou-se a confusão… Um site tableless é um site que não tenha uma tabela sequer, mas isso não significa que o site seja standard ou acessível. Um site standard é aquele que atende às recomendações do W3C, e o uso de tabelas para apresentação de dados tabulares, é uma recomendação do W3C. Usar outros elementos HTML, ao invés de TABLE, para criar tabelas é conflitar com os webstandards só para fazer sites tableless… E convenhamos: o que tem de site sem tabelas, com uma marcação confusa, mais parecendo uma sopa de tags é impressionante…

Enfim: um site webstandard é aquele que possui uma marcação HTML correta, usa CSS para estilização e atende às demais diretrizes do W3C. Tableless é marketing, e não uma regra…

Criando as primeiras tabelas

Temos que criar uma listagem dos produtos de uma loja qualquer, especificando o código, nome e preço do produto. Isso é, claramente, uma tabela de produtos. Para criar tabelas, usamos a tag TABLE: <table></table>.

Uma tabela é constituída de linhas e colunas, a intersecção entre linhas e colunas formam as células. E dentro das células inserimos o conteúdo das tabelas. As linhas de uma tabela são dadas pelas tags <tr></tr>, colocadas entre <table></table>. O resultado seria: <table><tr></tr></table>. Podemos criar quantas linhas forem necessárias em nossas tabelas, e dentro dessas linhas criamos colunas / células com as tags <td></td>. Veja como ficaria a nossa tabela:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<table>
<tr>
<td>Código</td>
<td>Produto</td>
<td>Preço</td>
</tr>
<tr>
<td>001</td>
<td>Notebook Acer</td>
<td>R$1.800,00</td>
</tr>
<tr>
<td>002</td>
<td>Notebook Dell</td>
<td>R$2.200,00</td>
</tr>
<tr>
<td>003</td>
<td>Notebook Sony Vaio</td>
<td>R$3.800,00</td>
</tr>
</table>

Resultado:

Podemos ainda especificar alguns atributos do elemento TABLE, para melhorar a visualização de nossas tabelas:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<table border="2" cellpadding="4" cellspacing="4">
<tr>
<td>Código</td>
<td>Produto</td>
<td>Preço</td>
</tr>
<tr>
<td>001</td>
<td>Notebook Acer</td>
<td>R$1.800,00</td>
</tr>
<tr>
<td>002</td>
<td>Notebook Dell</td>
<td>R$2.200,00</td>
</tr>
<tr>
<td>003</td>
<td>Notebook Sony Vaio</td>
<td>R$3.800,00</td>
</tr>
</table>

Resultado:

O atributo BORDER cria bordas em volta das células de uma tabela, permitindo uma melhor separação entre seus conteúdos. Podemos especificar uma medida numérica como valor de BORDER, referente a espessura da mesma. Quanto maior o valor, mais grossa será a borda. O atributo CELLPADDING fica responsável pelo espaçamento interno de cada célula, ou seja, o espaço entre a borda e o conteúdo. Quanto maior o valor de CELLPADDING, maior será o espaçamento do conteúdo. Já o atributo CELLSPACING fica responsável pelo espaçamento externo da célula, ou seja, o espaço entre as células de uma tabela. Quanto maior o valor, maior o seu espaçamento. Todos esses efeitos podem ser obtidos via CSS, dando maior liberdade para a nossa marcação HTML.

Mesclando colunas e linhas: atributos colspan e rowspan

Como eu disse anteriormente: é possível mesclar linhas e colunas. Esses recursos permitiram, por muito tempo, a criação de layouts baseados em tabelas. Apesar disso ser passado, esses recursos ainda são muito úteis. Veja a tabela abaixo:

Perceberam que em um dado momento, eu criei uma linha com uma única coluna? Tentem criar uma tabela igual a essa… Conseguiram? Não, né? Essa linha com uma coluna só, acabou não funcionando direito… Relaxem! Para mesclar colunas basta usar o atributo COLSPAN no elemento TD. Em COLSPAN iremos especificar quantas colunas devem ser mescladas. Veja o código da nossa tabela:

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

<table border="2" cellpadding="4" cellspacing="4">
<tr>
<td>Código</td>
<td>Produto</td>
<td>Preço</td>
</tr>
<tr>
<td>001</td>
<td>Notebook Acer</td>
<td>R$1.800,00</td>
</tr>
<tr>
<td colspan="3">Produtos com desconto de 10%</td>
</tr>
<tr>
<td>002</td>
<td>Notebook Dell</td>
<td>R$2.200,00</td>
</tr>
<tr>
<td>003</td>
<td>Notebook Sony Vaio</td>
<td>R$3.800,00</td>
</tr>
</table>

Podemos também mesclar linhas, ao invés de colunas. Veja a tabela abaixo:

Legal, né? Para conseguir esse feito, basta adicionar o atributo ROWSPAN na tag TD, indicando o número de linhas que serão mescladas em uma coluna. Veja o código abaixo:

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

<table border="2" cellpadding="4" cellspacing="4">
<tr>
<td>Código</td>
<td>Produto</td>
<td>Preço</td>
</tr>
<tr>
<td>001</td>
<td>Notebook Acer</td>
<td>R$1.800,00</td>
</tr>
<tr>
<td colspan="3">Produtos com desconto de 10%</td>
</tr>
<tr>
<td>002</td>
<td>Notebook Dell - Modelo 01</td>
<td rowspan="2">R$2.200,00</td>
</tr>
<tr>
<td>003</td>
<td>Notebook Dell - Modelo 02</td>
</tr>
<tr>
<td>003</td>
<td>Notebook Sony Vaio</td>
<td>R$3.800,00</td>
</tr>
</table>

Bom, por hoje é só! No próximo tutorial iremos nos aprofundar no tema, e estudar mais algumas tags e atributos, visando a acessibilidade em nossas tabelas. Tópico pra lá de importante, portanto muita atenção, ok?

Abraços,
Diego.

Olá Pessoal,

Para complementar o assunto LINKS e IMAGENS, vamos aprender a manipular o caminho dos arquivos a serem linkados ou inseridos em nossas páginas. É um assunto importante, e usuários iniciantes costumam ter alguma dificuldade. Por isso tenham atenção e pratiquem bastante.

Caminho relativo X Caminho absoluto

Podemos classificar os caminhos de arquivos em dois tipos: absoluto e relativo. O caminho absoluto utiliza toda a estrutura de pastas e diretórios, desde a raiz, para montar a URL do arquivo. Seria algo como:

C:/Documents and Settings/All Users/Meus Documentos/sites/site/home.html

Por questões de praticidade e flexibilidade, não usamos esse tipo de caminho para montar links internos, ou seja, aqueles que apontam para páginas e arquivos dentro do nosso próprio servidor. O caminho absoluto é usado em URL’s que apontem para arquivos dentro de outro servidor. Veja um exemplo:

http://www.google.com.br ou http://www.google.com.br/intl/pt-BR_br/images/logo.gif

Já os caminhos relativos são aqueles que tomam o próprio documento HTML como referência para encontrar outros artigos. Nos caminhos relativos, partimos do documento onde criamos o link, inserimos a imagem etc., e vamos navegando pela estrutura de pastas até achar o documento a ser linkado / inserido. Usamos caminhos relativos sempre que precisamos referenciar arquivos dentro do nosso próprio servidor: imagens, vídeos, links internos etc.

Vamos estudar no decorrer desse tutorial como trabalhar com caminhos relativos. Imaginemos que exista a seguinte de estrutura de pastas e arquivos:

• Site
  • IMAGENS
    • logo.jpg
    • foto.jpg
  • CLIENTES
  • FLASH
  • home.html
  • perfil.html
  • servicos.html
  • contato.html
• Site2
  • IMAGENS2
    • logo2.jpg
    • foto2.jpg
  • CLIENTES2
  • FLASH2
  • home2.html
  • perfil3.html
  • servicos4.html
  • contato5.html

Linkando arquivos na mesma pasta

Eu preciso criar um link para me levar da página HOME.HTML para CONTATO.HTML. Como eu faria isso?

1

<a href="contato.html" title="Ir para a página de contato">Contato</a>

Como HOME e CONTATO são arquivos dentro da mesma pasta, para estabelecer um link entre eles basta especificar o nome do arquivo e sua extensão.

Linkando arquivos em pastas diferentes

Agora, como eu faria para inserir a imagem LOGO.JPG na página HOME? A primeira coisa que vocês devem perceber: o arquivo LOGO.JPG está na pasta IMAGENS, logo para acessá-la precisarei especificar a pasta IMAGENS no meu caminho de arquivo. Veja como ficará:

1

<img src="IMAGENS/logo.jpg" alt="Logomarca do site X" title="Logomarca do site X" />

Para especificar uma ou mais pastas necessárias para se chegar a um arquivo, basta colocar o nome das pastas e subpastas (respeitando o uso de caixa alta e caixa baixa) separados por “/”. Ficaria algo assim: PASTA/SUBPASTA1/SUBPASTA2/arquivo.jpg.

Essa estrutura é usada tanto em links, quanto em imagens, ou qualquer outra situação onde seja necessário estabelecer um caminho para um arquivo qualquer (dentro de pastas e subpastas).

Linkando arquivos em níveis diferentes

No exemplo anterior, tanto a pasta IMAGENS, quanto o arquivo HOME.HTML estão no mesmo nível, por assim dizer. Percebam que ambos se encontram dentro da mesma pasta: SITE. Por esse motivo podemos acessar diretamente a pasta IMAGENS. Porém, como eu poderia linkar a página HOME2.HTML, dentro do arquivo HOME.HTML? Os dois arquivos estão em níveis diferentes: HOME está dentro da pasta SITE; HOME2 está na pasta SITE2.

Sempre que precisarmos subir um nível, ou seja sair da nossa pasta atual, e ir para uma pasta um nível acima (do mesmo modo que navegamos pelas pastas e diretórios do Windows), basta escrever “../” no caminho do arquivo. Veja como ficará o nosso link:

1

<a href="../Site2/home2.html" title="Link para o site2">Ir para o site 2</a>

Se for necessário subir três níveis de pastas, basta usar três “../”: ../../../PASTA/arquivo.html. Trabalhar com caminhos de arquivos não é difícil ou complicado, exige apenas um pouco de atenção para a hierarquia de arquivos e pastas no site. É normal se enrolar na contagem de pastas, quando precisamos subir vários níveis, e com a prática você irá se acostumar e errar cada vez menos. Uma dica importante: sempre que você errar um caminho com vários níveis, tente adicionar ou retirar “../”, para verificar se você não errou na contagem de pastas.

Bem, por hoje é só pessoal! Próximo tutorial abordará o assunto TABELAS. Até lá.

Abraços,
Diego.

Olá Pessoal,

Antes de começar: o Projetista Digital está no Twitter! A partir de agora você pode me seguir e acessar diariamente os links de artigos, blogs, sites e tudo mais relacionado a nossa área, que eu leio e encontro na web. Achei um tutorial legal, um site maneiro, qualquer coisa interessante: vou postar o link no Twitter. Então me siga no Twitter, e receba atualizações diárias sobre novidades de Design e Desenvolvimento Web. Agora voltamos com a programação normal:

O tutorial de hoje refere-se ao uso de imagens. Incluir imagens em sites é um processo simples, sem maiores complicações. A possibilidade de inserir imagens e gráficos, ajudou, e muito, a enriquecer a experiência dos internautas. Podemos criar layouts sofisticados, além de inserir fotos, gráficos e qualquer outro tipo de informação. O bom uso de imagens é uma ferramenta essencial para o sucesso de um site. As imagens influenciam na acessibilidade, usabilidade, peso e rankeamento de um site nos buscadores: em resumo, o mal uso de imagens pode comprometer seu site em várias áreas.

Formatos de imagens

Todos vocês estão acostumados com imagens: são as fotos de aniversário, natal, álbuns do Orkut, a logomarca do Google… O tempo todo usamos e vemos imagens, seja no nosso computador, seja na web. Todo arquivo possui uma extensão (arquivo HTML possuem extensão .html, Word é .doc, Excel é .xls, PowerPoint é .ppt etc.), e imagens possuem várias extensões, sendo que na web são usadas apenas três:

• GIF – Graphics Interchange Format
• JPG / JPEG – Joint Photographic Experts Group
• PNG – Portable Network Graphics

Qual a diferença entre elas? GIF é um formato que admite apenas 256 cores, sendo usado em desenhos e gráficos; JPG / JPEG admite milhões de cores, é ideal para fotografias; GIF admite fundo transparente; JPG / JPEG NÃO admite fundo transparente; GIF possui melhor compressão para imagens simples; JPG / JPEG possui melhor compressão para imagens complexas; quanto maior a compressão da imagem, menor o tamanho do arquivo, e mais rápido é o carregamento da imagem na página. E como todos sabem: páginas que demoram a carregar são um pé no saco…

E o formato PNG? Esse é um formato relativamente novo, que reúne o melhor dos dois mundos: alta compressão, fundo transparente e milhões de cores para detalhamento.

O que preciso para conseguir imagens?

O XHTML apenas insere as imagens na página: criá-las, editá-las e tratá-las é por conta de ferramentas específicas (editores de imagens). As ferramentas mais usadas: Adobe Fireworks, Adobe Photoshop e Gimp. O Gimp é uma ferramenta gratuita, enquanto as outras duas são pagas. Se você precisar usar um editor de imagens, e não tem dinheiro para comprar um software pago, use o Gimp ou Infran View (uma ferramenta simples e gratuita).

Você pode também baixar imagens diretamente da internet (lembre-se que existem direitos autorais sobre imagens, apesar de não ser o escopo desse tutorial debater o tema), basta clicar com o botão direito do mouse sobre a imagem, e clicar em “Salvar Imagem Como” (o texto varia de navegador para navegador, mas você conseguirá identificar a opção).

Inserindo imagens em uma página web

Para inserir imagens em um documento XHTML você usará a tag <img />. Essa tag possui um atributo chamado SRC, onde iremos declarar o caminho da imagem que desejamos inserir na página. Veja a tag <img /> em funcionamento:

1

<img src="imagem.jpg" />

Resultado:

Simples, né? Não tem segredo: basta colocar o caminho correto da imagem e pronto. Percebam que a tag <img /> é um elemento vazio, ou seja, não possui tag de fechamento </img >; para fechar a tag de imagem usamos a barra (/) na própria tag de abertura: <img />.

Podemos também usar imagens hospedadas em outros sites, como por exemplo:

1

<img src="http://www.google.com.br/intl/pt-BR_br/images/logo.gif" />

Resultado:

Imagens também podem servir de links. Veja como:

1

<a href="http://www.google.com.br" target="_blank"><img src="http://www.google.com.br/intl/pt-BR_br/images/logo.gif" /></a>

Resultado:

Atributos alt e title

Nosso site pode ser acessado por vários perfis de usuários: internautas com deficiência visual, sem deficiências, com dificuldades motoras, acessando a partir de celulares e dispositivos móveis, spiders, crawlers e outros robôs usados por buscadores para indexar sites etc. É importante desenvolver sites ACESSÍVEIS, ou seja, que permitam o acesso a qualquer perfil de usuário. Acessibilidade é um tópico à parte, e terá seu próprio minicurso. Mas desde agora podemos aprender a escrever um código XHTML visando a Acessibilidade. E em imagens temos dois atributos visando esse fim: alternativas para usuários que não podem visualizar imagens.

Se por algum motivo o usuário não visualizar imagem (caminho errado, dificuldade visual, configuração do navegador, ser um robô de busca etc.), podemos apresentar um texto alternativo. Esse texto alternativo é uma rápida descrição da imagem, inserida dentro da tag ALT. Veja o código abaixo:

1
2

<!-- Eu errei o nome da imagem propositalmente -->
<img src="http://www.google.com.br/intl/pt-BR_br/images/logoooooo.gif" alt="logomarca do Google - texto alternativo" />

Resultado:

Repararam que o texto do ALT apareceu no lugar da imagem? Legal, né? Além de inserir uma descrição alternativa, eu posso inserir uma rápida descrição da imagem, a ser renderizada pelos navegadores sob a forma de uma caixinha amarela, quando passamos o mouse por cima de uma imagem. Essa descrição também será usada em leitores de tela, usados por usuários com deficiência visual; e robôs de buscadores. Veja como funciona:

1

<img src="http://www.google.com.br/intl/pt-BR_br/images/logo.gif" alt="Logo do Google" title="Logo do Google" />

Resultado:

Pessoal, por hoje é só! No próximo tutorial falaremos sobre “caminhos de arquivos”, um assunto importante para complementar o uso de links e imagens (atributos HREF e SRC). Não percam!

Abraços,
Diego.

Olá Pessoal,

Conforme adiantado no último post, hoje falaremos sobre links e atributos XHTML. Até agora criamos documentos XHTML com títulos, parágrafos, estilos em textos, listas etc. Contudo, esses documentos não estão ligados entre si e por esse motivo não podemos navegar entre eles. Não é exagero dizer que os links foram a base de toda a web. Com eles podemos interconectar todas as nossas páginas, criando sites tais como conhecemos. E mais do que interligar documentos, os links hoje possuem valor semântico, são critérios extremamente relevantes para posicionamento de sites em buscadores etc. Aprender a explorar ao máximo possível o uso de links é indispensável para essa nossa área, portanto estudem com atenção e afinco.

Criando Links

Podemos converter vários elementos HTML em links: textos, imagens, áreas etc. Esses links podem apontar para dentro da própria página (são os links âncoras) ou para documentos externos. Links para páginas externas ao próprio documento podem apontar para páginas fora do servidor, onde o site está hospedado, ou dentro do próprio servidor. Podemos também linkar outros arquivos de outros formatos, tais como: DOC, PDF, MP3, imagens em geral, XLS etc.

Para criar um link usaremos a tag <a></a>. Veja como fica o código abaixo:

1
2
3

<h4>Criando um link</h4>
 
<a>Link</a>

Ok, acabamos de marcar um link, porém como definir a página de destino, ou seja, a página para onde o link me levará, assim que eu clicar nele? Para adicionar essa funcionalidade à tag <a>, será necessário utilizar…

Atributos HTML, Atributos HREF e TARGET

Os atributos HTML são características de uma tag que adicionam funcionalidades a ela. Por exemplo: não basta criar um link, é preciso definir uma página destino. Como já vimos, a tag usada para linkar é <a></a>, para adicionar à essa tag a página de destino do link, usaremos um atributo dessa tag, chamado HREF. Todo atributo XHTML segue as seguintes regras:

1. É escrito em letras minúsculas;
2. É escrito dentro da tag de abertura;
3. Respeita a seguinte sintaxe: nome_do_atributo=”valor_do_atributo”.

Vejamos como ficaria nosso link, usando o atributo HREF:

1
2
3
4
5

<h4>Link para uma página externa</h4>
<a href=”http://www.google.com.br”>Link</a>
 
<h4>Link para uma página dentro do próprio servidor</h4>
<a href=”pagina.html”>Link Interno</a>

Resultado:

Link para uma página externa

Link

Link para uma página dentro do próprio servidor
Link Interno

Perceberam que páginas dentro do nosso próprio servidor não precisam do caminho completo (http://www.dominio.com.br/etc…)? Basta apenas declarar o nome do arquivo, e sua hierarquia de pastas (quando necessário). O tema caminho de arquivos será tratado mais a frente.

Outra funcionalidade importante sobre links: escolher em qual janela o link será aberto. Temos duas opções: abrir links na mesma janela, obrigando o usuário a utilizar o botão VOLTAR, do navegador, para retornar a nossa página; abrir links em uma nova janela. Por padrão os links abrem na mesma janela, para forçar a abertura de links em uma nova janela precisaremos do atributo TARGET. Veja como funciona:

1 2 3 4 5

<h4>Link abrindo na mesma janela</h4> <a href=”pagina.html”>Link</a>   <h4>Link abrindo em uma nova janela</h4> <a href=”pagina.html” target=”_blank”>Link</a>

Basta adicionar o atributo TARGET com o valor “_blank” e o link abrirá em uma nova janela. Outra coisa importante a ser observado: se preciso utilizar mais de um atributo por tag, basta separá-los por um espaço em branco e escrevê-los normalmente, seguindo as regras expostas acima. Nesse exemplo utilizamos os atributo HREF e TARGET simultaneamente, mas da mesma forma podemos ter dez atributos (exagero meu em uma mesma tag, a lógica da sintaxe é a mesma.

Links âncoras

Vimos como criar links para documentos externos (dentro e fora do nosso servidor), agora iremos criar links para dentro do próprio documento. Imagine uma página enorme, cheia de conteúdo dividido em seções e subseções: não seria útil criar um índice para o usuário avançar pela página sem precisar acionar a barra de rolagem indefinidamente? Facilitaria, e muito, a vida do internauta. Para isso criaremos links âncoras, ou seja, links que apontem para o próprio documento.

Para criar uma âncora precisamos de dois fatores:

1. Definir um pedaço da página para ser o destino do link;
2. Criar um link apontando para o pedaço da página selecionado como destino.

Para definir um trecho da página como destino do link âncora, será preciso envolvê-lo com as tags <a></a> acrescentando o atributo NAME. Veja como funciona:

1
2

<h4><a name=”ancora1”>Título 1</a></h4>
<p>Parágrafo 1...</p>

Bem, definimos um parágrafo de nossa página como uma âncora, agora é preciso criar um link apontando para essa âncora. Para isso basta criar um link normalmente, e no caminho da página de destino colocar o seguinte valor: #nome_da_ancora. Veja como ficará o nosso exemplo:

1
2
3
4
5
6

<h4><a name=”topo”>Topo</a></h4>
<a href=”#ancora1”>Parágrafo 1</>
 
<h4><a name=”ancora1”>Título 1</a></h4>
<p>Parágrafo 1...</p>
<a href=”#topo”>Voltar para o topo</a>

E se eu quiser criar um link para uma âncora que se encontra em outra página?

Simples! Basta criar um link como o especificado abaixo:

1

<a href=”pagina.html#nome_ancora”>Link para âncora em outra página</a>

Viram só, como é fácil trabalhar com links e âncoras? Agora é só praticar e criar suas primeiras páginas web linkadas entre si. Aproveitem e estudem bastante. No próximo tutorial falaremos sobre como inserir imagens em nossas páginas.

Forte abraço,
Diego.

Olá Pessoal,

Continuando com o tema listas em XHTML, vamos tratar hoje de listas mistas (lista com subníveis). Até agora vimos como criar listas de um único nível, porém podemos explorar ainda mais o recurso de listas seja criando subníveis, ou mesclando listas ordenadas com não-ordenadas.

Listas mistas não-ordenadas

Quando criamos subníveis em listas ordenadas, os itens de níveis inferiores são apresentados com um marcador diferenciado e um certo recuo em relação aos itens de nível superior. Veja o código abaixo:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<h4>Lista não-ordenada simples</h4>   <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>   <h4>Lista mista não-ordenada</h4>   <ul> <li>Item 1</li> <li>Item 2 <ul> <li>Item 2.1</li> <li>Item 2.2</li> <li>Item 2.3</li> </ul> </li> <li>Item 3</li> </ul>

Resultado:

Lista não-ordenada simples

• Item 1
• Item 2
• Item 3

Lista mista não-ordenada

• Item 1
• Item 2
  • Item 2.1
  • Item 2.2
  • Item 2.3
    • Item 2.3.1
    • Item 2.3.2
• Item 3

Para criar listas mistas ou aninhadas basta adicionar uma nova lista dentro de um elemento <li>. A cada nível adicionado percebemos um recuo em relação ao nível anterior; percebe-se também que os marcadores mudam: no primeiro nível temos um bolinha preenchida; no segundo nível temos uma bolinha vazia; no terceiro nível em diante temos um quadrado. Podemos criar listas com N níveis, dependendo apenas da nossa necessidade. Com essa marcação podemos criar menus dropdown (aqueles onde passamos o mouse por cima de um item para abrir um submenu). Aprenderemos, inclusive, a construir esse tipo de menu com CSS. É só seguir o blog!

Listas mistas ordenadas

Podemos também criar listas aninhadas usando ordenação. Veja o caso de uma lista mista ordenada:

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

<h4>Lista ordenada simples</h4>
 
<ol>
<li>Alunos</li>
<li>Professores</li>
<li>Carros</li>
</ol>
 
<h4>Lista mista não-ordenada</h4>
 
<ol>
<li>Alunos
<ol>
<li>José</li>
<li>João</li>
<li>Maria</li>
</ol>
</li>
<li>Professores
<ol>
<li>Diego</li>
<li>Marcelo</li>
<li>Mike</li>
</ol>
</li>
<li>Carros
<ol>
<li>Palio</li>
<li>Gol</li>
<li>Uno</li>
</ol>
</li>
</ol>

Resultado:

Lista ordenada simples

1. Alunos
2. Professores
3. Carros

Lista mista não-ordenada

1. Alunos
   1. José
   2. João
   3. Maria
2. Professores
   1. Diego
   2. Marcelo
   3. Mike
3. Carros
   1. Palio
   2. Gol
   3. Uno

Como vocês podem perceber a numeração reinicia quando criamos subníveis, ou seja, nada de 2.1, 2.2, 2.3 etc. Não há como fazer esse tipo de alteração.

Listas mistas ordenadas e não-ordenadas

Para finalizar o post veremos como misturar listas ordenadas e não-ordenadas. Observe o código abaixo:

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

<h4>Lista ordenada seguida de uma não-ordenada</h4>
 
<ol>
<li>Alunos
<ul>
<li>José</li>
<li>João</li>
<li>Maria</li>
</ul>
</li>
<li>Professores
<ul>
<li>Diego</li>
<li>Marcelo</li>
<li>Mike</li>
</ul>
</li>
<li>Carros
<ul>
<li>Palio</li>
<li>Gol</li>
<li>Uno</li>
</ul>
</li>
</ul>
 
<h4>Lista não-ordenada seguida de uma ordenada</h4>
<ul>
<li>Alunos
<ol>
<li>José</li>
<li>João</li>
<li>Maria</li>
</ol>
</li>
<li>Professores
<ol>
<li>Diego</li>
<li>Marcelo</li>
<li>Mike</li>
</ol>
</li>
<li>Carros
<ol>
<li>Palio</li>
<li>Gol</li>
<li>Uno</li>
</ol>
</li>
</ul>

Resultado:

Lista ordenada seguida de uma não-ordenada

1. Alunos
   • José
   • João
   • Maria
2. Professores
   • Diego
   • Marcelo
   • Mike
3. Carros
   • Palio
   • Gol
   • Uno

Lista não-ordenada seguida de uma ordenada

• Alunos
  1. José
  2. João
  3. Maria
• Professores
  1. Diego
  2. Marcelo
  3. Mike
• Carros
  1. Palio
  2. Gol
  3. Uno

Bem pessoal, com isso finalizamos o assunto LISTAS XHTML. No próximo tutorial falaremos sobre links e atributos. Bom estudo e até lá.

Forte abraço,
Diego.

Olá Pessoal,

Continuando nosso minicurso de HTML vamos hoje conhecer um punhado de tags novas, com elas vocês poderão criar títulos, parágrafos e formatar textos. É um dos primeiros passos de uma longa jornada, então aproveitem e estudem com atenção e afinco.

Cabeçalhos ou títulos

Em HTML quando queremos criar títulos para seções, ou qualquer tipo de agrupamento de conteúdo, usamos tags apropriadas. O par de tags <h1></h1> fica responsável por criar um título de primeiro nível, onde o texto etiquetado tem sua fonte aumentada consideravelmente e fica em negrito. Outra característica dos cabeçalhos é o fato de forçarem uma quebra de linha, ou seja, todo o conteúdo após </h1> é jogado para linha de baixo; para ser mais exato o cabeçalho deixa uma linha em branco entre o seu conteúdo e o que vier depois de </h1>.

Agora algum leitor atento pergunta: “se H1 é um título de primeiro nível, significa que existem outros níveis”? Exatamente meu caro Padawan (rs!), ao todo são seis níveis de cabeçalhos, marcados por <h1> até </h6>. Conforme a numeração aumenta, o tamanho da fonte usada no título diminui. Devemos utilizar a hierarquia dos cabeçalhos (H1 é mais importante do que H2, e assim sucessivamente até H6) para aninhar nossos títulos: uma seção dentro de outra. Com isso fazemos uma marcação semântica.

Exemplo:

1
2
3
4
5
6
7
8
9
10
11
12

<html>
<head>
<title>Praticando com cabeçalhos</title>
</head>
<body>
<h1>Título de nível 1</h1>
<h2>Título de nível 2</h2>
<h3>Título de nível 3</h3>
<h4>Título de nível 4</h4>
<h5>Título de nível 5</h5>
<h6>Título de nível 6</h6>
</body>

Parágrafos e quebras de linha

Se você já brincou um pouco com HTML, deve ter percebido que para jogar o texto para a linha de baixo, não é tão simples quanto apertar ENTER. Ainda não viu? Faça o teste: crie uma página HTML e tente jogar o conteúdo abaixo em duas linhas:

Essa é a linha 1…<br />
Essa é a linha 2…

Não deu, né? Para forçar um quebra de linha em HTML é preciso conhecer algumas tags próprias para isso. E tem mais, em HTML existem dois tipos de quebra de linha: simples (joga o conteúdo para uma linha abaixo, sem nenhum espaçamento entre elas) e parágrafo (deixa uma linha em branco entre cada bloco de texto). Para forçar uma quebra de linha simples basta usar a tag <br /> (ela fecha na própria tag de abertura mesmo). Tudo o que vier depois de BR será jogado para a linha de baixo. Sendo assim, para fazer a quebra de linha que eu pedi anteriormente, o código ficaria assim:

1
2

Essa é a linha 1...<br />
Essa é a linha 2...

Para formar parágrafos em HTML é bem simples: basta envolver o bloco de texto com as tags <p></p>, ou seja, devemos marcar o início do parágrafo com <p> e o fim com </p>. Veja como ficaria o código abaixo:

1
2
3

<p>Conteúdo do parágrafo 1...</p>
<p>Conteúdo do parágrafo 2...</p>
<p>Conteúdo do parágrafo 3...</p>

Perceberam que além de marcar o início e fim de cada parágrafo, eu usei <p></p> para cada parágrafo criado? É exatamente assim que vocês devem trabalhar: etiquetando cada parágrafo com seu próprio <p></p>. Veja abaixo exemplos errados de como trabalhar com parágrafos:

1
2
3
4

<p>Conteúdo do parágrafo 1... <!-- Esqueci da tag de fechamento -->
<p>Conteúdo do parágrafo 2...
Conteúdo do parágrafo 3...</p>
<!-- Supostamente eu deveria montar dois parágrafos aqui, ao invés de um apenas -->

Comentários

Perceberam que no código acima eu fiz anotações entre <!— e –>? Tudo o que eu escrevo entre <body></body> é entendido como conteúdo ou comandos HTML. Caso eu queira fazer anotações no código para futuramente eu encontrar uma certa seção etc., sem que esse conteúdo apareça para o usuário irei fazer uso de comentários HTML. Comentários são blocos de texto que não são interpretados pelo navegador: tudo o que estiver entre <!– e –> será ignorado pelo navegador e não aparecerá na tela do usuário.

1
2

<h1>Isso é um título</h1> <!-- Isso é um comentário, não será renderizado na tela do usuário -->
<!-- <p>Mesmo isso sendo um parágrafo, por estar dentro de um comentário ele não aparecerá no seu navegador. Eu posso utilizar comentários para inabilitar trechos de código HTML na minha página -->

Não há limite de tamanho para comentários: eles podem ter uma ou várias linhas.

Formatação de texto

Até agora aprendemos a criar e salvar nossas páginas web, usar cabeçalhos, quebras de linha e formar parágrafos. Para incrementar um pouco mais a lista de coisas que podemos fazer, vamos aprender algumas tags para formatação de texto. A primeira coisa é colocar texto em negrito: basta usar a tag <strong></strong>. Todo o texto entre as tags será apresentado em negrito.

Negrito

Outra tag importante é <em></em> responsável por colocar texto em itálico.

Itálico

A tag  coloca o texto em suspenso, ou seja um pouco recuado para cima. Já a tag  coloca o texto um pouco recuado para baixo. Veja o uso dessas tags

^{Esse texto está sobre efeito de SUP.} Já esse é um texto normal. _{Esse texto aqui está sobre efeito de SUB.}

A tag <small></small> apresenta o texto com o tamanho das letras reduzido.

Texto com small. Texto normal. Texto com small.

1
2
3
4
5
6
7
8
9
10
11

<!-- Texto em negrito -->
<strong>Negrito</strong> 
 
<!-- Texto em itálico -->
<em>Itálico</em>
 
<!-- Texto com SUP e SUB -->
<sup>Esse texto está sobre efeito de SUP.</sup> Já esse é um texto normal. <sub>Esse texto aqui está sobre efeito de SUB.</sub> 
 
<!-- Texto com SMALL -->
<small>Texto com small.</small> Texto normal. <small>Texto com small.</small>

Fechamos por hoje. No próximo tutorial iremos trabalhar com LISTAS em HTML. Até lá então!

Abraços,
Diego.

(Graças ao pessoal da PredialNet não pude postar o conteúdo de ontem, por isso estou lançando um post único com o tutorial ontem e de hoje simultaneamente)

Olá Pessoal,

Estamos iniciando nosso minicurso de HTML, onde abordaremos os principais tópicos dessa linguagem essencial para quem trabalha com internet. Hoje em dia todo mundo que trabalha na nossa área precisa aprender um pouco de HTML: redatores, jornalistas, designers, publicitários, profissionais de marketing, programadores, gerentes de projeto etc. Não importa se você precisa aprender o básico para montar o layout de um texto, ou ter noções avançadas para dominar uma ferramenta web do seu trabalho, configurar newsletters, desenvolver sites, hotsites, portais e todo e qualquer tipo de sistema web, esse tutorial irá introduzí-lo no fantástico mundo do desenvolvimento web.

Se você é aluno de algum curso técnico (WebDesigner, Programador Web etc.), ou está estudando para trabalhar nesse ramo, enfim, se você é um iniciante e não sabe por onde começar, me permita ajudá-lo: comece por aqui! Acompanhe o be-a-bá do HTML e a partir desse minicurso avance para outras áreas. Programação, PHP, banco de dados, JavaScript, CSS tudo isso vem depois. Vamos começar aqui uma jornada rumo ao desenvolvimento de sites completos e funcionais.

Lembrando que essa é o conteúdo que ministro em minhas turmas de WebDesigner e Programador Web, no SENAC e outros cursos. Portanto, o conteúdo tende ser o mais atualizado possível, assim como didaticamente separado e estruturado.

O que é HTML, afinal de contas?

HTML ou HyperText Markup Language é uma linguagem de marcação, utilizada para construir a camada visual de páginas web. Sua função é dar um valor semântico e estruturar todo o conteúdo de um documento. Toda vez que você abre o seu navegador e acessa algum site, o que você está vendo na verdade é um punhado de código HTML interpretado pelo browser, e convertido em formas, cores, gráficos e vídeos. Podemos dizer que o HTML é a linguagem por detrás de um site, é o que define o conteúdo visualizado na tela. Com HTML podemos definir o que é um conteúdo: parágrafos, listas, links, imagens, vídeos, tabelas, colunas etc. Toda linguagem de programação web interage com HTML, por esses motivos todo profissional que se preza (redatores, designers, programadores etc.) conhece bem a sua sintaxe. Não é exagero dizer que o HTML é a base de tudo, o ponto inicial da sua carreira futura.

Ok, entendi que HTML é importante demais! Mas… como funciona?

Trabalhar com HTML é bem simples, como vocês verão nos próximos dias. Essa linguagem de marcação baseia-se em etiquetas com valor semântica, englobando trechos de conteúdo dotando-os de sentido e valor. Essas etiquetas são chamadas <strong>tags</strong>. Uma tag nada mais é do que um comando HTML com um ponto inicial (abertura) e um ponto final (fechamento). Quando digitamos um texto no Word, por exemplo, para criar um parágrafo, simplesmente apertamos a tecla ENTER. Em HTML não é tão simples assim, é preciso especificar via código que queremos um parágrafo em dado lugar; precisamos também dizer onde começa e onde termina esse parágrafo. Veja abaixo como funciona:

<paragrafo>Conteúdo do parágrafo 1…</paragrafo>
Conteúdo fora do parágrafo…

Perceberam que um pedaço do texto está entre <paragrafo></paragrafo>? Esse texto formará um parágrafo, enquanto todo o resto do conteúdo ficará de fora. Tá, mas por que os símbolos <> e </>. É o seguinte: toda tag possui a seguinte sintaxe – <nome_da_tag>… Conteúdo a ser etiquetado…</nome_da_tag>, onde delimitamos um início para tag (<>) e um fim (</>). Chamamos isso de tag de abertura e tag de fechamento. O HTML possui dezenas de tags com nomes diferentes. A nomenclatura das tags é algo bem fácil de lidar, pois os nomes sempre tem a ver com a funcionalidade do comando. Por exemplo: <p></p>são tags de parágrafo; <table></table> correspondem a tabelas; <form></form> corresponde a formulários, e por aí vai.

Eu ouvi falar de um tal XHMTL… Que raios é isso? É HTML também?

No princípio era o caos… Desenvolver um site há uns 10 ou 15 anos era um inferno. Não tínhamos padronização, folhas de estilo em cascata (vamos estudar isso), cada navegador interpretava o mundo do seu jeito, são tempos ruins que devemos esquecer. Naquele período não havia regulamentação e padronização de desenvolvimento, e por conseqüência o próprio HTML era meio zoneado. Usava-se HTML para tudo: marcação de conteúdo (sua finalidade real), estilização, diagramação etc. E conforme a web foi evoluindo, novas tecnologias surgiram e o HTML velho de guerra apresentou uma série de limitações frente às novas necessidades. Por esse motivo refizeram o HTML de acordo com o padrão XML, uma linguagem de marcação rígida, compatível com qualquer sistema: surgiu então o XHTML (XML + HTML). O novo formato apresentava a rigidez sintática do XML, assim como sua compatibilidade, e a linguagem ganhava novos horizontes. XHTML então é uma versão reformulado do velho HTML, dentro do padrão XML de marcação. É uma melhoria. Outra vantagem a ser assinalada: marcações XHTML são compatíveis com aplicações XML (usadas a torto e direito nos sistemas web modernos).

Não se preocupem: aqui aprenderemos marcação XHTML, que é muito parecido com o velho e bom HTML de guerra.

Ainda não estou satisfeito… Quais são as reais diferenças entre HTML e XHTML?

Ok, caro estudante… Você tem que perguntar mesmo! O HTML por não ser padronizado, admitia uma série de falhas e inconsistências. O XHTML é muito rígido, e não deixa passar nenhum erro. Por esse motivo somos obrigados a ter atenção com algumas regrinhas básicas:

Documentos em XHTML devem ser bem formatados

Os navegadores tentam resolver erros e inconsistências em páginas HTML, e cada um faz alterações conforme sua lógica interna. Nem é preciso dizer que isso não pode dar certo… Em XHTML não são permitidos erros de sintaxe, tags sem fechamento, aninhamento inconsistente etc.

Tags devem ser escritas em letras minúsculas

XHTML é o que chamamos de linguagem case-sensitive, ou seja: diferencia letras maiúsculas de minúsculas. Em uma linguagem case-sensitive “BRASIL” é diferente de “brasil”, apesar da grafia ser a mesma, pois o tipo de caixa (alta e baixa) varia. Todas as tags e atributos XHTML usam letras minúsculas, em resumo: nada de escrever <P></P>…

As tags devem ser aninhadas corretamente

Uma coisa importante sobre o uso de tags em HTML: se você usa várias tags aninhadas (uma dentro da outra) na sua marcação, é importante respeitar a ordem de abertura e fechamento de tags – a primeira tag a ser aberta é a última a ser fechada, a segunda tag é a penúltima e por aí vai…

OK – <p><strong>Texto</strong></p>
ERRADO – <p><strong>Texto</p></strong>

É obrigatório o uso de tags de fechamento

No HTML algumas tags como <p>, <br> e <li> dispensam o uso da tag de fechamento. Legal, mas isso no HTML. O padrão XML (do qual o XHTML é derivado) diz claramente: TODA TAG OBRIGATORIAMENTE DEVE SER FECHADA. Como diz aquele comentarista esportivo: “a regra é clara”… Existem algumas tags que não possuem par de fechamento, são o que chamamos de elementos vazios. Esse tipo de elemento precisa ser fechado na própria tag de abertura, e sua estrutura é a seguinte: <nome_da_tag />

Veja algumas tags que podem ser fechadas no comando de abertura:

<br /> – Força quebra de linha
<img /> – Insere uma imagem
<input /> – Coloca um campo de formulário (entrada de dados)

Tá… Você me convenceu: quando começamos a brincar com HTML?

Bom, chega de papo introdutório e vamos por a mão na massa. Todo mundo aqui já entendeu o que são tags, como elas funcionam e para o que servem. Para fechar esse post vamos conhecer as primeiras tags HTML, formando o que chamamos de estrutura básica de uma página web. O browser/navegador (Internet Explorer, Firefox, Opera, Safari etc.) é um dispositivo que usamos para acessar a internet e navegar pela web a fora, ele é capaz de interpretar código HTML, CSS, JavaScript, applets Java, XML e mais algumas coisas. Os códigos são interpretados e juntos geram as páginas web que visitamos. Mas precisamos ajudar o navegador a diferenciar código HTML de CSS ou qualquer outra linguagem. Por isso temos tags específicas para marcar cada tipo de código. Por exemplo, para criar uma página web precisamos dizer ao browser qual é a linguagem usada, e se for um documento HTML/XHTML iremos utilizar a tag <html></html>. Toda a página deve ficar entre essas tags, e o navegador não irá considerar qualquer código fora dessas etiquetas. A idéia é mais ou menos essa:

<html>
Aqui entra todo o conteúdo da página web…
</html>

Todo documento HTML é dividido em duas partes: cabeçalho e corpo. No cabeçalho colocamos todas as informações referentes a página, mas que não serão exibidas na tela do usuário; no corpo colocamos o site propriamente dito, ou seja todo o conteúdo a ser visualizado no navegador do usuário. Essa divisão entre cabeçalho e corpo é efetivada pelo uso das tags <head></head> e <body></body>. Nossa página ficará da seguinte forma:

<html>
<head>
Aqui entram informações sobre o documento, mas que não serão visualizadas pelo usuário
</head>
<body>
Aqui entra todo o conteúdo do documento, ou seja a página propriamente dita…
</body>
</html>

O corpo da página é a parte mais fácil de compreender. Todos já perceberam que os parágrafos, imagens, tabelas, listas, vídeos, formulários e qualquer outro tipo de conteúdo do site, ficarão dentro das tags <body></body>. Mas e o cabeçalho?

“Informações sobre o documento que não serão visualizadas pelo usuário” é um tanto vago e abstrato para a maioria de vocês. Na verdade não adianta me prolongar em explicações sobre o tipo de conteúdo do cabeçalho, pois vocês precisam pegar alguma experiência primeiro. Só para exemplificar: dentro do cabeçalho colocamos o título da página, aquele texto no topo do seu navegador (na barra de títulos); meta-tags – informações gerais sobre o documento como o autor, idioma, padrão de codificação, palavras-chave (termos que indiquem do que trata o conteúdo, por muito tempo foram o ponto alto da indexação de conteúdo no Google, sendo hoje ainda um fator relevante) etc.; links para outros documentos (arquivos com programação JavaScript, comandos de diagramação e estilização CSS etc.) etc. Prometo que conforme você prosseguir em seus estudos, tudo isso fará mais sentido e será mais fácil de entender.

Por enquanto vejamos como colocar um título no documento. Para inserir um título em sua página web, basta adicionar dentro cabeçalho (<head></head>) a tag TITLE (<title></title>). O conteúdo entre as tags aparecerá na barra de títulos (barra azul no topo do navegador) do seu browser. Veja como fica a nossa página:

1
2
3
4
5
6
7
8

<html>
<head>
<title>Minha primeira página web</title>
</head>
<body>
Conteúdo da minha primeira página web...
</body>
</html>

Para visualizar esse arquivo faça o seguinte: abra o bloco de notas; escreva a estrutura HTML acima (sinta-se à vontade para fazer suas modificações livremente); salve o arquivo com o nome minhaPrimeiraPagina, e ao invés da extensão .txt, troque por .html (isso é undamental, pois se você não alterar a extensão para .html, a página não será visualizada); agora dê um duplo clique em cima do arquivo que você acabou de salvar e… voi lá, você está visualizando sua primeira página HTML.

Bem pessoal, por hoje é só. No próximo post vamos conhecer novas tags, e aprender a criar títulos, parágrafos, quebras de linha e a formatar texto (negrito, itálico, sublinhado etc.). Até breve.

Forte abraço,
Diego.

PS: Já que o blog tem ajudado muita gente e tudo mais, eu me comprometi a atualizá-lo diariamente (ou quase). Mas, como eu tenho uma produtora web pra cuidar e dou aulas no SENAC, fica meio complicado encontrar tempo. Então vamos oficializar: eu vou sempre postar os artigos e tutoriais à noite ou de madrugada. Durante o dia não dá mesmo.