Aula 3 - Introdução HTML (DDM)

Desenvolvimento para
Dispositivos Móveis
(DDM)
Aula 3
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 – Comentários
• Comentários permitem incluir conteúdo nos documentos HTML
que não é mostrado pelo navegador.


4
HTML - Atributos
<html>
<body>
<a href="https://www.unicep.edu.br/">UNICEP</a>
</body>
</html>
• Elementos HTML podem ter atributos que fornecem

informações adicionais sobre o elemento.
• Atributos são representados através do par

nome/valor, por exemplo: nome=“valor“
• Os valores devem vir envolvidos por aspas

HTML - Atributos
<html>
<body>
<a href="https://www.unicep.edu.br/">UNICEP</a>
</body>
</html>
Observações:
• O link abrirá em uma nova página ou aba
dependendo da configuração do browser.
HTML - Links
• Os links permitem referenciar outras páginas web.

– Link para uma página que esteja no mesmo diretório da
página atual:
<a href = “exemplo1.html">Nosso primeiro exemplo </a>
– Link para uma página que esteja em outro diretório:

<a href = "documentos/exemplo1.html">Página em outro diretório</a>
– Link para outro site:
<a href = "http://www.google.com.br">Site do Google</a>

7
HTML – Links
• Demarcação de destinos para links dentro do próprio

documento.
<a href = "#pulo1">Se clicar aqui você irá para outra parte </a>
– O rótulo "pulo1" deve ser colocado em outra parte do

documento:
<a name= "pulo1"> você veio para cá </a>

<h2 id= "pulo1"> você veio para cá </h2>
8
HTML – Links
• O local onde o link é aberto é indicado pelo atributo

target.
– Link para uma parte do próprio documento:
<a href = "http://www.google.com.br" target="_blank">Site do Google </a>
Target Descrição
_blank Abre o documento indicado em uma nova aba ou janela.
_self Abre o documento indicado no mesmo frame do link (default)
_parent Abre o documento indicado no frame pai
_top Abre o documento indicado ocupando toda a janela atual.
9
HTML - Links
<html>
<head>
<title>Links</title>
</head>
<body>
<p>Mostrando os links nos documentos </p>
<p>Fazendo link para uma parte do mesmo documento
<a href="#pulo1">Se você clicar aqui você irá para outra parte do doc.</a></p>
Fazendo links para as páginas construídas<p>
<a href=“index2.html"> Nosso primeiro exemplo</a>
<a href=“index3.html"> Nosso segundo exemplo</a>
<a name="pulo1"> você pulou para cá</a>
Fazendo link absoluto:<p>
<a href= "http://www.google.com.br"> link para o site de busca google</a>
</body>
</html>
10
HTML – Imagens
• A tag <img> é usada para incluir imagens em documentos

HTML.
<img src=“brasil.png">
• Essa tag é vazia e não possui uma tag de fechamento.
• Principais atributos:
– src: caminho do arquivo da imagem;
– alt: texto alternativo que aparece caso a imagem não carregue;
11
HTML – Listas
• As listas são utilizadas para ordenar elementos.
Listas sem ordenação ou não numeradas (UL - Unordened List)

<ul>
<li> Matemática
<li> Física
<li> Informática
</ul>
Resultado:
• Matemática
• Física
• Informática
12
HTML – Listas
• Listas ordenadas ou numeradas (OL – Ordered List)
<ol>
<li> maçã <ol type = "1"> ou <ol type = "A">, etc
<li> abacate • "1" : Especifica que os algarismos arábicos padrão
<li> uva devem ser usados para numerar a lista ( 1,2,3,4, ...).
• · "a" : Especifica que as letras minúsculas devem ser
</ol> usadas para numerar a lista (a, b, c, d, etc.)
• · "A" : Especifica que as letras maiúsculas devem ser
Resultado: usadas para numerar a lista (A, B, C, D, etc.)
1. maçã • · "i" : Especifica que os algarismos romanos minúsculos
devem ser usados para numerar a lista ( i, ii, iii, iv, etc.)
2. abacate • · "I" : Especifica que os algarismos romanos maiúsculos
3. uva devem ser usados para numerar a lista ( I, II, III, IV, etc.).
13
HTML – Listas
• Listas de Definições (DL)
<dl> → inicia a lista
<dt> → termo abreviado
<dd> → definição
<dl>
<dt> HTML </dt>
<dd> HiperText Markup Language</dd>
<dt> OL </dt>
<dd> Listas ordenadas com numeração</dd>
<dt> UL </dt>
<dd> Listas sem ordenação </dd>
<dt> DL </dt>
<dd> Listas de definição </dd>
<dt> LI </dt>
<dd> Elemento de Lista </dd>
</dl> 14
HTML – Listas
Listas Intercaladas
<ul> Resultado:
<li> Estados da região sul do Brasil:
<ul> •Estados da região sul do Brasil:
o Rio Grande do Sul
<li> Rio Grande do Sul </li>
o Paraná
<li> Paraná </li>
o Santa Catarina
<li> Santa Catarina </li> •Um estado da região sudeste:
</ul> o São Paulo
</li> o Rio de Janeiro
<li> Um estado da região sudeste: o Minas Gerais
<ul> o Espírito Santos
<li> São Paulo </li>

<li> Rio de Janeiro </li>
<li> Minas Gerais </li>
<li> Espírito Santos </li>
</ul>
</li>
</ul>
15
HTML – Tabelas
• Tabelas são criadas com a tag <table>.
<table>...</table> - indica o início e o fim da tabela.

<caption>título</caption> - define o título da tabela (opcional).
<tr>....</tr> - (Table Row) – início e fim de uma linha da tabela.
<td>... </td>- (Table Data) – início e fim da célula que compõe a linha.
<th>...</th> - (Table Header) - início e fim da célula do cabeçalho.
16
HTML – Tabelas
• As células das tabelas podem ser mescladas

por meio dos atributos:
• COLSPAN - Mescla células horizontais adjacentes. Se for atribuído

COLSPAN=2 a uma célula, esta célula ocupará o seu espaço e o da próxima
célula.
• ROWSPAN - Mescla células verticais adjacentes. Se for atribuído

ROWSPAN=2 a uma célula, esta célula ocupará o seu espaço e o da célula
abaixo.
18
HTML – Botões
• Para incluir um botão na página web utilize a tag

<button>.
<button>Clique Aqui</button>
• Botões podem ser usados dentro de links para
referenciar outras páginas.
<a href="http://www.google.com"><button>Google</button></a>
<form>
<a href="https://www.facebook.com/">
<input type="button" value=“Facebook"></a>
</form>
<form action="https://www.youtube.com/">
<button type="submit">Youtube</button>
20
</form>
HTML – Multimídia
• A tag <audio> reproduz arquivos de áudio.
<audio controls>
<source src=“01.ogg" type="audio/ogg">
<source src=“01.mp3" type="audio/mpeg">
Seu navegador não suporta reprodução de áudio.
</audio>
• O atributo controls adiciona controles play, pause e volume.

• 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 <audio> é mostrado se o navegador não
for capaz de reproduzir nenhum dos arquivos listados.
21
Bibliografia
Aulas baseadas no material da Profª Mariana Massimino Feres
Livro
RAMALHO, José Antonio Alves. Curso Completo para

Desenvolvedores Web. Campus, 2005.
22

Aula 3 - Introdução HTML (DDM)

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aula 3 - Introdução HTML (DDM)

Enviado por

Direitos autorais:

Formatos disponíveis

Desenvolvimento para

<!-- Não mostrar por enquanto

• Elementos HTML podem ter atributos que fornecem

• Atributos são representados através do par

• Os valores devem vir envolvidos por aspas

• Os links permitem referenciar outras páginas web.

– Link para uma página que esteja em outro diretório:

– Link para outro site:

<a href = "http://www.google.com.br">Site do Google</a>

• Demarcação de destinos para links dentro do próprio

– O rótulo "pulo1" deve ser colocado em outra parte do

<a name= "pulo1"> você veio para cá </a>

• O local onde o link é aberto é indicado pelo atributo

• A tag <img> é usada para incluir imagens em documentos

• Essa tag é vazia e não possui uma tag de fechamento.

Listas sem ordenação ou não numeradas (UL - Unordened List)

<li> São Paulo </li>

• Tabelas são criadas com a tag <table>.

<table>...</table> - indica o início e o fim da tabela.

• As células das tabelas podem ser mescladas

• COLSPAN - Mescla células horizontais adjacentes. Se for atribuído

• ROWSPAN - Mescla células verticais adjacentes. Se for atribuído

• Para incluir um botão na página web utilize a tag

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

Aulas baseadas no material da Profª Mariana Massimino Feres

RAMALHO, José Antonio Alves. Curso Completo para

Você também pode gostar