Este documento fornece uma introdução aos padrões da Web, incluindo HTML. Explica a importância dos padrões para a produtividade e compatibilidade e apresenta as principais tags HTML como <html>, <head>, <body>, <p>, <img>, <a>, <table>, <form> e <div>.
1. Pacote Web
Desenvolvendo com Padrões Web
Módulo 1 - HTML
Guilherme Cavalcanti
contato@guilhermecavalcanti.com
@guiocavalcanti
2. Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 2.5 Brasil.
Para ver uma cópia desta licença, visite
http://creativecommons.org/licenses/by/2.5/br/
3. Roteiro
• Noções gerais
• O que são Padrões Web
• Importância dos Padrões Web
– 3 camadas do desenvolvimento
• Ferramentas
• HTML e XHTML
• Validação
• Hello World
• Estrutura Básica
– DOCTYPE
– HTML
– HEAD
– BODY
5. O que são Padrões Web?
• Web
– Troca de livre de informações
– Acessível por qualquer pessoa no planeta
• Guerra dos Browsers
– Netscape Vs. Microsoft
– Falta de padrões
– Usuário saí perdendo
• Gambiarras
– Tentativa de reduzir incompatibilidade entre browsers
6. O que são Padrões Web?
• W3C
– World Wide Web Consortium, 1994
– Tentativa de criar padrões para Web
• HTML, CSS, XML, XSLT
– Resolver problemas de incopatibilidade
– Uma página deve ser exibida de maneira
semelhante independente de qual dispositivo
esteja visualizando.
7. Analogia
• Tomadas e Conectores
• CDs de Drivers
• USB
• Etc, etc, etc
9. Importância dos Padrões:
Produtividade
• Desenvolvimento tradicional
– Fases seqüenciais
– Fases interdependentes
• Resultados
– Ninguém pode mudar de ideia
– Necessidade de programador e designer
11. Importância dos Padrões:
Produtividade
• Desenvolvimento com Padrões
– Fases paralelas
– Fases independentes
• Resultado
– Mudanças rápidas
– Velocidade
– Cliente feliz
14. Ferramentas
• Escrever o código
• Perigo do autocompletar
• Imitar o usuário
• Testar, testar, testar
15. Ferramentas
• Linux
– Gedit + montes de plugins
• Windows
– NotePad++
http://sourceforge.net/projects/notepadpluspe/
– EditPlus
http://www.editplus.com/download.html
• MacOS
– TextMate
• Firefox
– FireBug
– Web Development Toolbar
– Validação W3C
16. HTML/XHTML
• Linguagem de Marcação
• Compostas por tags (marcadores)
• Dá significado ao conteúdo e o agrupa em
blocos
22. html
• HTML • Atributos
– <html></html> – xmlns
– Delimita um documento http://www.w3.org/199
HTML 9/xhtml
– Todas as tags HTML – xml:lang
estão dentro dela pt-br
– lang
pt-br
23. head
• HEAD
– <head></head>
– Define informações sobre o documento
• Título
• Palavras-chave (metadados)
• JavaScript/CSS
24. head > title
• title
– <title>Título da Página</title>
– Só pode ser definido uma vez no documento
– Título que aparece na janela
– Nome que fica guardado quando a página é
adicionada aos favoritos
– Aparece nos resultados de busca do Google
25. head > meta
• meta
– <meta />
– Informações sobre os dados
– Não é exibida para o usuário
– Usada por mecanismos de busca
– Não precisa ser fechada
26. head > meta
• Atributos
Attribute Value Description
content text Specifies the content of the meta
information
name author Provides a name for the information
description in the content attribute
keywords
generator
revised
others
27. body
• body
– <body></body>
– É o corpo do documento
– Contem o que vai ser mostrado ao usuário (textos,
imagens, links)
– Parte mais importante de um documento HTML
28. h1, h2, h3, h4...
• Tags de títulos de texto
– <h1>Seção 1 do documento</h1>
– H de heading
– Organização do texto em seções
– Semelhante a um livro
– Muito importante para mecanismos de busca
• Deve condizer com o conteúdo que a segue
29. p
• Define um parágrafo de texto
– <p>Parágrafo</p>
– Para nós é mais uma ferramenta para formatar o
texto.
http://pastie.org/836928
30. img
• Inclui uma imagem no documento
– <img src=“url” alt=“texto alternativo” />
Attribute Value Description
alt text Specifies an alternate text for an image
src URL Specifies the URL of an image
longdesc URL Specifies the URL to a document that contains a
long description of an image
31. a
• Link, hyperlink ou ancora para outro
documento
– Atribui não linearidade a Web (hypertexto)
http://pastie.org/836943
Attribute Value Description
accesskey character Specifies a keyboard shortcut to access an
element
title text Specifies extra information about an element
href URL Specifies the destination of a link
32. table
• Define uma tabela
– <table></table>
– Precisa conter pelo menos um tr, th ou td
33. Table > tr
• Define uma linha da tabela
– <table></table>
– Sozinha não faz grandes coisas
34. Table > thead e tfoot
• Define uma tabela
– <table></table>
– Sozinha não faz grandes coisas
35. td
• <td></td> • Atributos
– Representa células numa – colspan: mescla células
tabela numa mesma linha
– Se nenhum “span” for – rowspan: mescla células
utilizado, deve haver a numa mesma coluna
mesma quantidade em
cada linha
36. td
• Células mescladas numa mesma linha
• Células mescladas numa mesma coluna http://pastie.org/838290
http://pastie.org/838291
37. ul, ol
• <ul></ul>
– Lista não ordenada (u de unorded)
– Pode possuir vários <li></li>
• <ol></ol>
– Lista ordenada (o de orded)
– Também possui vários <li></li>
38. ul, ol
http://pastie.org/838294
http://pastie.org/838296
40. form
• <form action=“” method=“”></form>
– Permitem o envio de dados entre cliente e
servidor
– O servidor precisa ter um controlador aguardando
a submissão dos dados
• PHP, ASP.NET, Python, Java, Ruby...
– Aplicações
• Formulários de contato, login/senha, cadastro de
usuário, busca, etc
41. Comentários sobre GET e POST
• GET
– Deve ser usado quando a submissão não irá
acarretar numa mudança de estado no servidor
– Dados visíveis pela URL
• POST
– Acarreta mudança de estado (consulta no banco
de dados, envio de e-mail)
– Os dados são enviados de maneira transparente
42. form
• Atributos
– action
• URL para o controlador responsável por receber os
dados
– method
• Método de submissão
• Pode ser GET ou POST
44. form > inputs
• Representam as entradas que serão enviadas
ao servidor
Attribute Value Description
type button Specifies the type of an input element
checkbox
file
hidden
image
password
radio
reset
submit
text
value value Specifies the value of an input element
45. form > inputs
• Exemplo de login/senha (inseguro)
http://pastie.org/838316
• Exemplo de login/senha (mais seguro)
http://pastie.org/838318
46. form > select
• form de busca com categorias
http://pastie.org/838325
47. form > label
• Adiciona labels (etiquetas) aos campos
– Atributo for especifica qual é o input alvo de um label
– Deve ser sempre usado em conjunto com um input ou
select
http://pastie.org/838329
49. form > input
Attribute Value Description
checked checked Specifies that an input element should be preselected
when the page loads (for type="checkbox" or
type="radio")
disabled disabled Specifies that an input element should be disabled when
the page loads
name name Specifies a name for an input element
readonly readonly Specifies that an input field should be read-only (for
type="text" or type="password")
src URL Specifies the URL to an image to display as a submit
button
50. form > fieldset, legend
• Organizar campos em grupos
– Usabilidade
http://pastie.org/838354
55. div, span
• Quase modificam a apresentação
• Servem para agrupar outros elementos
– Geralmente relacionados entre si
• São de grande ajuda na hora de aplicar os
estilos
56. div
• <div> é usado para agrupar um ou mais
elementos nível de bloco
• Pode conter elementos de bloco
57. span
• O elemento <span> é um elemento neutro e
que não adiciona qualquer tipo de semântica
ao documento.
• Não pode conter elementos de bloco (p, table,
div...)
58. Gerador de metatags
http://pastie.org/838366
• Ferramenta mais completa
– http://www.addme.com/meta.htm