Introdução ao HTML 4 e 5

S
Introdução ao HTML 4 e 5
Prof. Leonardo Soares

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

Olá mundo!
<html>
<head>
<title>Meu primeiro aplicativo</title>
</head>
<body>
<h1>Olá mundo!</h1>
</body>
</html>

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

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…

Estrutura de uma página
HTML
S <html>
S <head>
S <body>

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

Tags HTML para textos
• Podemos formatar os textos que serão exibidos ao usuário
• Pode-se:
• Aplicar negrito
• Itálico
• Subescrito

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>

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>

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

links
• Âncoras para acessar outras partes de um site
• Tag <a>
• Exemplo: <a href=“google.com”>Google</a>

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

Exemplo de uso da tag a
• Exemplo:
<a href=„index.html‟ target=„_parent‟>Texto do link</a>

Uso de imagens em HTML
• Exibe uma imagem na página HTML
• Tag <img>

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

Exemplo do uso da tag img
S<img src=„audi.jpg‟ alt=„Versão…‟
Sheight=„200px‟ width=„100px‟>

Links e imagens
• É possível associar imagens a links

Exercício
1. Incluir uma imagem em uma página HTML
2. Associar um link a esta imagem

Lista de itens não ordenada
• Este é um exemplo de lista não ordenada
• Tag <ul> e vários <li>

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>

Lista de itens ordenada
• Este é um exemplo de lista ordenada
• Tag <ol> e vários <li>

Lista de itens ordenada
• Exemplo:
S<ol>
S <li>Item 1.</li>
S <li>Item 2.</li>
S <li>Item 3.</li>
S</ol>

Exercício
• Criem lista ordenadas e não ordenadas em vários itens
• Façam o uso de ambas as listas

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

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

Progress
S Certas operações levam algum tempo para serem
realizadas
S O usuário precisa ser informado sobre seu progresso
S <progress></progress>

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”>

Media tags
S Videos
S <video src=“” controls />
S Audio
S <audio src=“” />

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

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)

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

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

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

Item editável
S Partes de nosso site podem ser editáveis, e permitir isto
era um problema…
S Javascript
S CSS
S HTML
S Provê uma edição WYSIWYG

Introdução ao HTML 4 e 5

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (13)

Ähnlich wie Introdução ao HTML 4 e 5

Ähnlich wie Introdução ao HTML 4 e 5 (20)

Mehr von Leonardo Soares

Mehr von Leonardo Soares (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Introdução ao HTML 4 e 5

Hinweis der Redaktion