Desenvolvimento de Aplicações
para Internet - HTML
Prof. Maurício Aldenor
2024
HTML – Características
• HTML: HyperText Markup Language
• XHTML: eXtensible HyperText Markup Language
• Trata-se de uma Linguagem de Marcação:
• Não é compilada, mas interpretada pelo browser;
• Não tem suporte para declaração de variáveis, if-else, for,
while, vetores, matrizes, orientação a objeto, etc...
• Para programar em HTML, é necessário:
• Conhecer as tags que compõem o HTML;
• Editor de texto;
• Browser.
HTML – Tag
• Uma tag representa um elemento do arquivo HTML;
• Tags podem possuir:
• Identificador* (obgt; abre e fecha a tag);
• Atributo(s), com valor respectivo;
• Conteúdo.
• Exemplo:
Link no browser: Ir para o Google
<a href="[Link] para Google</a>
Nome Atributo Valor Conteúdo Fechamento
HTML – Estrutura básica do arquivo HTML
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título do arquivo HTML</title>
</head>
<body>
<p>Exemplo de parágrafo HTML</p>
</body>
</html>
HTML – Principais Tags do BODY
Exemplo de Tag Descrição
<h1> Isto é um cabeçalho </h1> Tag de cabeçalho. Pode ir de <h1> até <h6>. À
<h2> Isto é um cabeçalho </h2> medida que o número cresce, a letra na tela
<h3> Isto é um cabeçalho </h3> diminui.
<p> Isto é um parágrafo. </p> Tag para formar parágrafo.
<p> Isto é outro parágrafo. </p>
<a href="[Link] Tag para formar hiperlinks para outras
target="_blank">Isto é um link para páginas, para um arquivo ou para uma
o site Google</a> determinada parte da página web
(âncora).
O conteúdo de um link também pode ser
uma imagem. Target: quando clicar, abre
outra aba.
<img src="[Link]" width="104" Tag para mostrar uma imagem na página
height="142" alt="Imagem de casa"/> HTML.
HTML – Principais Tags do BODY
Tag Descrição
<br> ou <br/> Quebra de linha no texto.
<hr> ou <hr/> Desenha uma linha separadora.
<!-- Isto é um comentário --> Insere comentário no código
HTML. Comentários são ignorados
pela interpretação do browser, ou
seja, não aparecem na página.
<b> Texto em negrito </b> Define o texto em negrito.
<i> Texto em itálico </i> Define o texto em itálico.
<sub>Texto subscrito</sub> Mostra o texto subscrito.
<sup>Texto sobrescrito</sup> Mostra o texto sobrescrito.
HTML – Principais Tags do BODY
Tag Descrição
<center> Texto centralizado Texto centralizado.
</center>
<marquee> Texto que se Serve para adicionar movimento
movimenta na horizontal a um texto horizontalmente
</marquee> (pouco usado atualmente -
legado).
HTML – Principais Tags do HEAD
Tag Descrição
<head> Define informações sobre o documento HTML.
<title> Define o título do documento HTML.
<base> Define o endereço padrão ou um alvo padrão para todos
os links da página.
<link> Realiza uma relação entre um documento HTML e outros
documentos externos.
<meta> Define metadata para um documento HTML (aqui se
define o charset. UTF-8, por exemplo).
<script> Define um script do tipo client-side (lado do cliente).
[Javascript]
<style> Define informação de estilo para o documento
[CSS].
HTML – Principais Atributos de Tags
Atributo Descrição
class Especifica um nome de classe para um elemento. Serve para
referir classes de estilo CSS.
id Especifica um único identificador para um elemento. Em
XHTML, não se pode repetir IDs.
style Especifica um estilo CSS para um elemento.
title Especifica informação extra sobre um determinado elemento.
Pode mostrar esta informação em um tool tip.
tabindex Especifica a ordem de TAB de cada elemento.
HTML – Tags de Tabelas
Tag Descrição
<table> Cria a tabela.
<thead> & <th> Definem o cabeçalho e uma célula
de cabeçalho na tabela.
<tbody> & <tfoot> Definem o corpo e o rodapé da
tabela.
<tr> Cria uma linha na tabela.
<td> Cria uma célula na tabela.
<caption> Cria um título para a tabela.
HTML – Atributos de Tabelas
Atributo Descrição
align Alinhamento da tabela.
border Adiciona borda na tabela.
colspan Mescla células dispostas em colunas.
rowspan Mescla células dispostas em linhas.
HTML – Tags de Listas
Tag Descrição
<ol> Define uma lista ordenada
<ul> Define uma lista não ordenada
<li> Define um item de uma lista
HTML – Caracteres Especiais
á á Á Á ã ã Ã Ã â â Â Â
à à À À é é É É ê ê Ê Ê
í í Í Í ó ó Ó Ó õ õ Õ Õ
ô ô Ô Ô ú ú Ú Ú ç ç Ç Ç
• Os problemas de caracteres especiais se dão em virtude do tipo de
codificação de cada navegador de internet.
• O ideal é configurar o parâmetro charset com o valor UTF-8 dentro do
head:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
HTML – O elemento DIV
[Link]-se de uma tag, escrita como <div> conteúdo... </div>,
que serve para criar blocos no arquivo HTML;
[Link] em dia, é muito utilizada para criar layouts, pois se
integra facilmente com folhas de estilo (CSS);
3.É a base do conceito de “tabless”, que significa a utilização
unicamente de divs para construir o layout de um site;
HTML – O elemento DIV - Exemplo
Código-fonte: Resultado:
<div id=”div1” class=”classDiv1”> Conteúdo da div
<p> <b> Conteúdo da div </b> </p> link para o Google
<a href=”[Link]
para o Google</a>
</div>
HTML – Estrutura da página - DOM
Desenvolvimento de Aplicações
para Internet - HTML
Prof. Maurício Aldenor
2023
HTML – Exercício 1
A partir do código HTML abaixo, desenhe/escreva o que será mostrado
no browser.
<!DOCTYPE html> <li> <a
<html> href="[Link]
<head> iário Online</a> </li>
<meta http-equiv="Content-Type" <li> <a
content="text/html;charset=utf-8" /> href="[Link]
<title>Links</title> ia</a> </li>
</head> <li> <a
<body> href="[Link]
<p>Links salvos como favoritos:</p> ook</a> </li>
<ol> </ol>
<li> <a </body></html>
href="[Link]
</li>
<li> <a
href="[Link]
a> </li>
HTML – Exercício 2
Encontre os SETE erros no código HTML abaixo:
<!DOCTYPE html> <figure
<html> source="img/[Link]"/>
<head> <link href="[Link]"
<meta http-equiv="Content-Type" target="_blank">Página sobre
content="text/html;charset=utf" /> Smartwatch</link>
<title>Links</title> </body>
</head>
<body>
<h8>Smartphone</h8>
<p>Um <i>smartphone<i> é um
celular que combina recursos de
computadores pessoais, com
funcionalidades avançadas que podem
ser estendidas por meio de aplicativos
executados pelo seu sistema
operacional. A figura abaixo mostra um
HTML – Estrutura da página
Tarefa 1: Acesse um site qualquer na internet e analise a
estrutura da página, utilizando o visualizador de código-fonte do
navegador de internet (Ctrl + U). Desenhe uma parte da árvore
da estrutura da página.
HTML – Exercício 3.1
Gerar o código HTML que produz a tela abaixo:
HTML – Exercício 3.2
A partir da tela do exercício 3.1 - TELA DE FREQUÊNCIA:
HTML – Exercício 3.3
A partir da tela do exercício 3.1 - TELA DE NOTAS:
HTML – Exercício 3.4
A partir da tela do exercício 3.1, quando o usuário clicar no link Sair,
então uma tela inicial deve ser mostrada com:
a) o nome da escola;
b) uma imagem que representa a logo da mesma;
c) um link com o texto "Acessar Sistema Acadêmico".
Quando este link for clicado, o usuário é redirecionado para a tela
que contém o menu com as opções.
Desenvolvimento de Aplicações
para Internet - HTML
Prof. Maurício Aldenor
@[Link]
2023
HTML5
• Trata-se de uma nova versão da linguagem de marcação;
• Várias novas tags disponíveis
([Link]
• O layout do site é facilitado.
HTML5
Fonte: [Link] - último acesso agosto/2021
HTML5
Fonte: [Link] - último acesso agosto/2021
Resumo HTML
HTML5 - Tarefa de pesquisa 1
• A sua primeira tarefa de pesquisa é construir a página inicial de
um site usando as tags de layout do HTML 5, baseado no
protótipo a seguir:
