Desevolvimento Web Client-side - HTML
-
Upload
guilherme -
Category
Technology
-
view
929 -
download
2
Transcript of Desevolvimento Web Client-side - HTML
![Page 1: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/1.jpg)
Pacote WebDesenvolvendo com Padrões Web
Módulo 1 - HTML
Guilherme Cavalcanti
@guiocavalcanti
![Page 2: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/2.jpg)
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/
![Page 3: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/3.jpg)
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
![Page 4: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/4.jpg)
Noções Gerais
![Page 5: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/5.jpg)
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
![Page 6: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/6.jpg)
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.
![Page 7: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/7.jpg)
Analogia
• Tomadas e Conectores
• CDs de Drivers
• USB
• Etc, etc, etc
![Page 8: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/8.jpg)
3 camadas
Comportamento
Formatação
Informação HTML
JavaScript
CSS
![Page 9: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/9.jpg)
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
![Page 10: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/10.jpg)
![Page 11: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/11.jpg)
Importância dos Padrões: Produtividade
• Desenvolvimento com Padrões
– Fases paralelas
– Fases independentes
• Resultado
– Mudanças rápidas
– Velocidade
– Cliente feliz
![Page 12: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/12.jpg)
![Page 13: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/13.jpg)
![Page 14: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/14.jpg)
Ferramentas
• Escrever o código
• Perigo do autocompletar
• Imitar o usuário
• Testar, testar, testar
![Page 15: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/15.jpg)
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
![Page 16: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/16.jpg)
HTML/XHTML
• Linguagem de Marcação
• Compostas por tags (marcadores)
• Dá significado ao conteúdo e o agrupa em blocos
![Page 17: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/17.jpg)
Tags
• Responsáveis por delimitar um “pedaço” de conteúdo
http://pastie.org/836704
![Page 19: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/19.jpg)
Validação
![Page 21: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/21.jpg)
DOCTYPE
• Diz ao browser que tipo de HTML está sendo enviado
![Page 22: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/22.jpg)
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
![Page 23: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/23.jpg)
head
• HEAD
– <head></head>
– Define informações sobre o documento
• Título
• Palavras-chave (metadados)
• JavaScript/CSS
![Page 24: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/24.jpg)
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
![Page 25: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/25.jpg)
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
![Page 26: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/26.jpg)
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
![Page 27: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/27.jpg)
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
![Page 28: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/28.jpg)
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
![Page 29: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/29.jpg)
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
![Page 30: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/30.jpg)
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
![Page 31: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/31.jpg)
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
![Page 32: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/32.jpg)
table
• Define uma tabela
– <table></table>
– Precisa conter pelo menos um tr, th ou td
![Page 33: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/33.jpg)
Table > tr
• Define uma linha da tabela
– <table></table>
– Sozinha não faz grandes coisas
![Page 34: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/34.jpg)
Table > thead e tfoot
• Define uma tabela
– <table></table>
– Sozinha não faz grandes coisas
![Page 35: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/35.jpg)
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
![Page 36: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/36.jpg)
td
• Células mescladas numa mesma linha
• Células mescladas numa mesma coluna http://pastie.org/838290
http://pastie.org/838291
![Page 37: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/37.jpg)
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>
![Page 38: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/38.jpg)
ul, ol
http://pastie.org/838294
http://pastie.org/838296
![Page 40: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/40.jpg)
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
![Page 41: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/41.jpg)
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
![Page 42: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/42.jpg)
form
• Atributos
– action
• URL para o controlador responsável por receber os dados
– method
• Método de submissão
• Pode ser GET ou POST
![Page 44: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/44.jpg)
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
![Page 45: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/45.jpg)
form > inputs
• Exemplo de login/senha (inseguro)
• Exemplo de login/senha (mais seguro)
http://pastie.org/838316
http://pastie.org/838318
![Page 47: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/47.jpg)
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
![Page 49: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/49.jpg)
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
![Page 50: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/50.jpg)
form > fieldset, legend
• Organizar campos em grupos
– Usabilidade
http://pastie.org/838354
![Page 51: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/51.jpg)
em
• <em>Texto</em>
• Texto enfatizado
• Geralmente usado para aplicar negrito
![Page 52: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/52.jpg)
address
• <address>Rua Sempre Viva</address>
• Tag para definir endereços
• O Google Maps utiliza
![Page 53: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/53.jpg)
hr
• <hr/>
• Usado como separador de conteúdo
![Page 54: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/54.jpg)
Gerador de metatags
http://www.iwebtool.com/metatags_generator
![Page 55: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/55.jpg)
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
![Page 56: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/56.jpg)
div
• <div> é usado para agrupar um ou mais elementos nível de bloco
• Pode conter elementos de bloco
![Page 57: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/57.jpg)
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...)
![Page 58: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/58.jpg)
Gerador de metatags
• Ferramenta mais completa– http://www.addme.com/meta.htm
http://pastie.org/838366
![Page 59: Desevolvimento Web Client-side - HTML](https://reader033.fdocumentos.com/reader033/viewer/2022052310/555e25cad8b42a6a4c8b4ec5/html5/thumbnails/59.jpg)
Comentários