Embed Size (px)
Citation preview
Pacote WebDesenvolvendo com Padrões Web
Módulo 1 - HTML
Guilherme Cavalcanti
@guiocavalcanti
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/
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
Noções Gerais
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
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.
Analogia
• Tomadas e Conectores
• CDs de Drivers
• USB
• Etc, etc, etc
3 camadas
Comportamento
Formatação
Informação HTML
JavaScript
CSS
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
Importância dos Padrões: Produtividade
• Desenvolvimento com Padrões
– Fases paralelas
– Fases independentes
• Resultado
– Mudanças rápidas
– Velocidade
– Cliente feliz
Ferramentas
• Escrever o código
• Perigo do autocompletar
• Imitar o usuário
• Testar, testar, testar
Ferramentas
• Linux– Gedit + montes de plugins
• Windows– NotePad++
http://sourceforge.net/projects/notepadpluspe/
– EditPlushttp://www.editplus.com/download.html
• MacOS– TextMate
• Firefox– FireBug– Web Development Toolbar– Validação W3C
HTML/XHTML
• Linguagem de Marcação
• Compostas por tags (marcadores)
• Dá significado ao conteúdo e o agrupa em blocos
Tags
• Responsáveis por delimitar um “pedaço” de conteúdo
http://pastie.org/836704
Validação
DOCTYPE
• Diz ao browser que tipo de HTML está sendo enviado
html
• HTML
– <html></html>
– Delimita um documento HTML
– Todas as tags HTML estão dentro dela
• Atributos
– xmlnshttp://www.w3.org/1999/xhtml
– xml:langpt-br
– langpt-br
head
• HEAD
– <head></head>
– Define informações sobre o documento
• Título
• Palavras-chave (metadados)
• JavaScript/CSS
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
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
head > meta
• Atributos
Attribute Value Description
content text Specifies the content of the meta information
name authordescriptionkeywordsgeneratorrevisedothers
Provides a name for the information in the content attribute
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
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
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
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
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
table
• Define uma tabela
– <table></table>
– Precisa conter pelo menos um tr, th ou td
Table > tr
• Define uma linha da tabela
– <table></table>
– Sozinha não faz grandes coisas
Table > thead e tfoot
• Define uma tabela
– <table></table>
– Sozinha não faz grandes coisas
td
• <td></td>
– Representa células numa tabela
– Se nenhum “span” for utilizado, deve haver a mesma quantidade em cada linha
• Atributos
– colspan: mescla células numa mesma linha
– rowspan: mescla células numa mesma coluna
td
• Células mescladas numa mesma linha
• Células mescladas numa mesma coluna http://pastie.org/838290
http://pastie.org/838291
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>
ul, ol
http://pastie.org/838294
http://pastie.org/838296
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
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
form
• Atributos
– action
• URL para o controlador responsável por receber os dados
– method
• Método de submissão
• Pode ser GET ou POST
form > inputs
• Representam as entradas que serão enviadas ao servidor
Attribute Value Description
type buttoncheckboxfilehiddenimagepasswordradioresetsubmittext
Specifies the type of an input element
value value Specifies the value of an input element
form > inputs
• Exemplo de login/senha (inseguro)
• Exemplo de login/senha (mais seguro)
http://pastie.org/838316
http://pastie.org/838318
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
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
form > fieldset, legend
• Organizar campos em grupos
– Usabilidade
http://pastie.org/838354
em
• <em>Texto</em>
• Texto enfatizado
• Geralmente usado para aplicar negrito
address
• <address>Rua Sempre Viva</address>
• Tag para definir endereços
• O Google Maps utiliza
hr
• <hr/>
• Usado como separador de conteúdo
Gerador de metatags
http://www.iwebtool.com/metatags_generator
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
div
• <div> é usado para agrupar um ou mais elementos nível de bloco
• Pode conter elementos de bloco
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...)
Gerador de metatags
• Ferramenta mais completa– http://www.addme.com/meta.htm
http://pastie.org/838366
Comentários
