Desenvolvimento para

Dispositivos Móveis
(DDM)
Aula 4
HiperText Markup Language (HTML)
Prof. Wesley Pecoraro
wesley.pecoraro@gmail.com 1
 Ementa do Curso
• Introdução • JavaScript
– Motivação e Objetivos, Histórico da – Características da linguagem
Internet e das Linguagens para – Funções, Eventos
WEB/MOBILE, Comparação entre – Windows
linguagens.
– Validação de dados
• HTML (HyperText Markup Language)
– JQuery
– Estrutura da linguagem
• XML (Extensible Markup Language)
– Principais TAG’s, Formulários
– Botões, Caixa de Texto
– Caixa de Seleção, Botão de opção
– Hiperlinks
• Criação de Páginas estáticas
– Cabeçalho, Menu
– Navegação entre páginas
• CSS
– Estruturação de código
– Criação de folhas de estilo 2
– Aplicação de folhas de estilo
 Ementa do Curso
• Introdução • JavaScript
– Motivação e Objetivos, Histórico da – Características da linguagem
Internet e das Linguagens para – Funções, Eventos
WEB/MOBILE, Comparação entre – Windows
linguagens.
– Validação de dados
• HTML (HyperText Markup Language)
– JQuery
– Estrutura da linguagem
• XML (Extensible Markup Language)
– Principais TAG’s, Formulários
– Botões, Caixa de Texto
– Caixa de Seleção, Botão de opção
– Hiperlinks
• Criação de Páginas estáticas
– Cabeçalho, Menu
– Navegação entre páginas
• CSS
– Estruturação de código
– Criação de folhas de estilo 3
– Aplicação de folhas de estilo
 HTML – Multimídia
• A tag <video> reproduz arquivos de vídeo.

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Seu navegador não suporta reprodução de vídeo.
</video>

• O atributo controls adiciona controles play, pause e volume.

• Sempre insira os atributos height e width para definir o tamanho da janela do
vídeo.
• A tag <source> indica um arquivo para reprodução. O navegador reproduz
apenas o primeiro arquivo cujo formato for aceito.
• O texto dentro da tag <video> é mostrado se o navegador não for capaz de
reproduzir nenhum dos arquivos listados.
4
 HTML – Multimídia
• As tags <object> e <embed> são utilizadas para
executar plug-ins, como, por exemplo, flash, PDF,
ActiveX e Java applets.
<object width="400" height="50" data="bookmark.swf"></object>
<embed width="400" height="50" src="bookmark.swf">

• Mas também podem executar arquivos de áudio

e de vídeo, se o navegador suportar esses
arquivos.
<object height="50" width="100" data="horse.mp3"></object>
<embed height="50" width="100" src="horse.mp3"> 5
 HTML
Elementos de Bloco e Inline
• A maioria dos elementos HTML são classificados
como:

• Elementos de Bloco
• Geralmente iniciam e terminam com uma nova linha quando
apresentados no navegador.

• Elementos Inline
• Aparecem no navegador sem iniciar um nova linha.

6
 HTML
Elementos de Bloco e Inline
• A maioria dos elementos HTML são classificados
como:

• Elementos de Bloco
• Geralmente iniciam e terminam com uma nova linha quando
apresentados no navegador.
• Ex: <h1>, <p>, <ul>, <table>

• Elementos Inline
• Aparecem no navegador sem iniciar um nova linha.
• Ex: <b>, <i>, <td>, <img>, <a>
7
 HTML – Container

• São elementos que agrupam outros elementos.

• São comumente utilizados pelo CSS para definir o estilo de todos os
elementos contidos dentro deles.

• Elemento <div>
• Elemento de bloco que funciona como um container para
agrupamento de outros elementos HTML;
• Utilizado para organizar a estrutura dos documentos HTML, criando
seções ou regiões;

• Elemento <span>
• Versão inline do elemento <div> utilizado como um container para
texto. 8
 Formulário HTML

• Utilizado para a interação entre um usuário e o servidor,

possibilitando a troca de dados.

<form> ... </form>

• Formulários são tags de bloco.

• Podem ser inseridos dentro de outras tags de

bloco, inclusive dentro de outros formulários.
10
 Atributos do Formulário

Atributo Valor Descrição

action URL Indica para qual arquivo os dados serão enviados.

on
autocomplete Indica se aceita ou não recurso de autocompletar.
off
get Indica o método de envio dos dados.
method
post http://www.w3schools.com/tags/ref_httpmethods.asp
name text Indica o nome do formulário.
_blank
_self Indica onde mostrar o resultado obtido após o envio dos
target
_parent dados.
_top

11
 Formulário HTML

• Os campos de um formulário são definidos por meio das

seguintes tags:
– <input>
– <select></select>
– <textarea></textarea>
– <fieldset></fieldset>

12
 Formulário HTML
<!DOCTYPE html>
<html>
<body>

<form name=“Form1” action=“testeform.txt“ method="get"

target="_blank">
Nome: <input type="text" name="fname"><br>
Sobrenome: <input type="text" name="lname"><br>
<input type="submit" value=“Enviar">
</form>

</body>
</html>
13
 Tag <input>

• Principais atributos gerais da tag <input>:

Atributo Valor Descrição
on Indica se o campo possui a capacidade de
autocomplete
off autocompletar.
Indica que o campo deve automaticamente ganhar
autofocus autofocus
foco quando a página é carregada.
A existência desse atributo indica que o campo está
disabled disabled
desabilitado.
id texto Indica um identificador único para o campo
number Indica um número ou data máxima para o valor do
max
date campo.
Indica a quantidade máxima de caracteres
maxlength number
permitidos no campo.
number Indica um número ou data mínima para o valor do
min
date campo.
name texto Indica o nome do campo. 14
 Tag <input>

• Principais atributos gerais da tag <input>:

Atributo Valor Descrição

Indica uma dica que é mostrada quando se aproxima
placeholder texto
o mouse no campo.
A existência de desse atributo indica que o campo é
readonly readonly
somente para leitura.
A existência de desse atributo indica que o
required required
preenchimento do campo é orbigatório.
Vários tipos
type Indica o tipo do campo.
(próximos slides)
Indica o valor atual do campo.
value texto

15
 Tag <input>
• O atributo type define o tipo da tag <input>.
• Os principais tipos são:
– button
– checkbox
– color
– email
– file
– number
– password
– radio
– range
– reset
– submit
– text
– url

16
 Tag <input>

• Exemplo de text e password:

<form>
Digite o login: <input type="text" name="Usuario"> <br>
Digite uma senha: <input type="password" name="Senha">
</form>

17
 Tag <input>
• Tipo (botão) reset: apaga os dados e restaura o valor
padrão dos campos de um formulário.
<input type="reset">
• Tipo (botão) button: um botão clicável. Estes botões por si
só não têm muita utilidade.
<input type="button" value="Texto escrito no botão">
• Tipo (botão) submit: envia as informações digitadas ao
servidor.
<input type="submit" value="enviar">
• Tipo (botão) image: um submit cujo botão é uma imagem.
<input type="image" src="img_submit.gif" alt="Submit">

18
 Tag <input>

• Tipo number: cria um componente que só

aceita números inteiros:
Quantidade (1 a 5): <input type="number" name="quantity" min="1"
max="5">

• Tipo url: permite apenas a digitação de uma

URL válida.
Add your homepage: <input type="url" name="homepage"><br>

19
 Tag <input>

• Tipo color: cria um componente de seleção de cor.

Selecione uma cor: <input type="color" name="favcor">

• Tipo email: cria um campo de texto que

automaticamente valida o email quando submetido:
E-mail: <input type="email" name="usremail">

• Tipo file: cria um componente para seleção de arquivo:

Select a file: <input type="file" name="img">

20
 Tag <input>

• Tipo range: cria uma barra deslizante para

definir um valor numérico.
– O IE versão 9 ou inferior não suporta essa tag.

<form>
Points: <input type="range" name="points" min="1" max="10">
<input type="submit">
</form>

21
 Tag <input>

• O tipo checkbox serve para a seleção de

valores.
<form>
Que outro curso você quer ver em nossas páginas? <br>
<input type="checkbox" name="curso" value="csharp"
checked>C#<br>
<input type="checkbox" name="curso" value="php">PHP<br>
<input type="checkbox" name="curso" value="delphi">Delphi<br>
<input type="checkbox" name="curso" value="vb">Visual Basic
</form>

22
 Tag <input>

• O tipo radio permite apenas que uma opção

seja selecionada:
<form>
Que outro curso você quer ver em nossas páginas: <br>
<input type="radio" name="preferencia" value="csharp"
checked>C#<br>
<input type="radio" name="preferencia" value="php">PHP <br>
<input type="radio" name="preferencia" value="delphi">Delphi <br>
<input type="radio" name="preferencia" value="vb">Visual Basic <br>
<input type="radio" name="preferencia" value="java">Java <br>
</form>

23
 Tag <textarea>

• Tag <textarea>: utilizada para textos maiores,

que podem ser livremente digitados.
<textarea name="opniao" rows="5" cols="40">
digite aqui sua avaliação deste curso
</textarea>

• Em <textarea> o texto default é opcional, já os

parâmetros rows e cols devem ser
especificados.
24
 Bibliografia

Aulas baseadas no material da Profª Mariana Massimino Feres

Livro

RAMALHO, José Antonio Alves. Curso Completo para

Desenvolvedores Web. Campus, 2005.

25