2. HTML
S Não é uma linguagem de programação
S É uma linguagem de marcação
S Na programação para web é usada para apresentar elementos
visuais
S Utiliza uma síntaxe similar ao XML
S Utiliza tags <>
S É guiado por uma específicação do W3C
4. HTML e linguagens de
programação
S HTML não possui recursos de programacão, isto impossibilita:
S O uso de repetições
S Condicionais
S Usar variáveis de programação, etc…
S Apenas com HTML iremos produzir páginas estáticas
S Ao associar HTML com linguagens de programação
produziremos páginas dinâmicas
S É uma boa prática evitar código de programação junto ao
HTML
5. Tags HTML
S Tudo em HTML será representado através de tags <>
S Sua sintaxe possui duas formas:
S <tag />
S <tag></tag>
S Há também o uso de propriedades nas tags para alterar seu
comportamento
S <tag height=“20px”>
S Precisamos conhecer as tags HTML para saber o que pode ser
feito com ele…
7. Tag <head>
• <title> - Usada para determinar o título da página e será
exibido no topo da aplicação
• <style> - Determina parâmetros de estilo CSS a serem
aplicados na página
• <script> - Scripts em javascript a serem utilizados na página
• <meta> - Informações usadas para descrever a página
8. Tags HTML para textos
• Podemos formatar os textos que serão exibidos ao usuário
• Pode-se:
• Aplicar negrito
• Itálico
• Subescrito
9. Cabeçalho
S São os textos que, em geral, aparecem no início da
página
S Há diferentes tags para representar diferentes tamanhos:
S <h1>
S <h2>
S …
S <h5>
S Exemplo
S <h1>Olá mundo!</h1>
10. Tags HTML para estilos em
textos
• <b> texto em negrito </b>
• <i> texto em itálico </i>
• Texto <sup> acima </sup>
• Texto <sub> abaixo </sub>
• Texto <small> menor </small>
11. Parágrafo e quebra de linha
• Utilização de parágrafo em HTML:
• <p> Texto dentro do parágrafo </p>
• Quebra de linha em textos:
• Texto em uma linha <br /> Textro em outra linha
13. links
• Âncoras para acessar outras partes de um site
• Tag <a>
• Exemplo: <a href=“google.com”>Google</a>
14. Atributos da tag a
• Href
• Descrição: usado para especificar a url que
será carregada ao clicar no link
• Target
• Descrição: usado para especificar onde o link
será aberto
• Valores: _blank, _self, _parent, _top
15. Exemplo de uso da tag a
• Exemplo:
<a href=„index.html‟ target=„_parent‟>Texto do link</a>
16. Uso de imagens em HTML
• Exibe uma imagem na página HTML
• Tag <img>
17. Atributos da tag img
• src
• Descrição: especifica o caminho (pasta ou diretório)
onde encontra-se a imagem
• width
• Descrição: especifica a largura da imagem
• height
• Descrição: especifica a altura da imagem
• alt
• Descrição: especifica o texto que irá aparecer quando o
mouse passar pela imagem
18. Exemplo do uso da tag img
S<img src=„audi.jpg‟ alt=„Versão…‟
Sheight=„200px‟ width=„100px‟>
21. Lista de itens não ordenada
• Este é um exemplo de lista não ordenada
• Tag <ul> e vários <li>
22. Lista de itens não ordenada
• Exemplo:
S<ul>
S <li>Item 1.</li>
S <li>Item 2.</li>
S <li>Item 3.</li>
S</ul>
23. Lista de itens ordenada
• Este é um exemplo de lista ordenada
• Tag <ol> e vários <li>
24. Lista de itens ordenada
• Exemplo:
S<ol>
S <li>Item 1.</li>
S <li>Item 2.</li>
S <li>Item 3.</li>
S</ol>
25. Exercício
• Criem lista ordenadas e não ordenadas em vários itens
• Façam o uso de ambas as listas
26. HTML 5
S HTML 4 não dá mais… obsoleto!
S Flash também não!
S Uma nova forma de pensar o desenvolvimento para a
web
S Não é apenas HTML, mas também uma API DOM
27. Principais recursos do HTML 5
S Suporte a vídeo e audio
S Gráficos 2d/3d
S Armazenamento local ou com SQL
S Geolocalização
S Validação de formulários
28. Progress
S Certas operações levam algum tempo para serem
realizadas
S O usuário precisa ser informado sobre seu progresso
S <progress></progress>
29. Data
S Em algumas situações desejamos armazenar informações em
nossas tags
S Por exemplo:
S <div id=“carro” marca=“toyota”>
S O problema é que isto é inválido do ponto de vista da validação
HTML
S Uma alternativa está no uso de atributos data-
S <div id =“carro” data-marca=“toyota”>
31. Geolocalização
S Com o HTML 5 também trás a possibilidade de obter a
localização do usuário
S Este recurso é útil para aplicações ou sites que mudem ou se
adaptem quando houver essa informação
S A forma como a localização é obtida varia de dispositivo para
dispositivo
32. Gráficos
S Um dos princípios do HTML 5 é evitar o uso de plugins
externos, como o Flash
S É introduzido uma forma de criar gráficos denominado
canvas
S É possível exibir elementos 2D, 3G, imagens em SVG
S Será utilizado uma linguagem de scripting (em geral o
JavaScript)
33. Novos inputs
S Até o HTML 4 haviam basicamente 3 formas de inserir
dados em um formulário
S <select> <textarea> <input>
S Tinhamos de fazer várias modificações para lidar com
cores, datas, e-mail, números
S Agora foram adicionadas novas formas de entrada que
facilitam este processo
35. Validação de formulário
S Validar dados é um processo necessário para garantir
que informações corretas estão sendo inseridas no
sistema
S Normalmente fazemos de duas forma:
S Validação no cliente
S Validação no servidor
S Observando que é um processo bastante comum o
HTML 5 oferece algumas validações prontas
36. Draggable
S Arrastar e soltar é uma operação bastante comum
S Antes utilizávamos frameworks javascript, como o jQuery
S Agora temos uma forma padronizada de fazer isto