HTML
Prof. Jefferson Rodrigo de Souza
Universidade Federal de Uberlândia
Faculdade de Computação
jrsouza@[Link]
SUMÁRIO
(Parte 1) (Parte 2)
Introdução Caminhos dos Arquivos
Elementos Listas
Estrutura Básica HTML Tabelas e Vídeos
Página HTML (Parte 3)
Formatação Formulários
Elementos de Bloco x Linha Validação da Página HTML
(Parte 4)
Exemplo de Layout HTML
2
Introdução
(Parte 1)
3
HyperText Markup Language - HTML
É uma Linguagem de Marcação de Hipertexto; onde estrutura uma página
web, incluindo a definição de tabelas, títulos, links, figuras, vídeos, e etc.
Arquivo com a extensão “.html”
Conectadas com outras páginas através de hiperlinks;
Desenvolvida e supervisionada pela W3C (World Wide Web Consortium);
W3Schools é um site educacional voltado ao aprendizado de tecnologias web;
Um documento em HTML é interpretado por um navegador, como o Google
Chrome ou Mozilla Firefox; e sendo escrito a partir de qualquer editor; como:
Bloco de Notas, GEdit, Notepad++, Eclipse, etc.
4
“[Link]”
Resultado
5
ESTRUTURA BÁSICA HTML
Resultado
HTML não é uma linguagem de programação!
HTML é apenas um arquivo que o navegador consegue interpretar.
6
Elementos
7
ELEMENTOS
Uma página HTML é composta por um conjunto de elementos HTML;
onde cada elemento desempenha uma função dentro da página.
Ex.: exibir um link ou criar um título;
Os elementos HTML são inseridos utilizando os caracteres ‘<‘ e ‘>’
Formando o que é conhecido como tag;
As tags são ...
O conjunto <nomeDoElemento>
As marcas especiais que são interpretadas pelo navegador;
As quais são exibidas pelo navegador;
8
ELEMENTOS
Inserção de tags aos pares
<nomeDoElemento>conteúdo</nomeDoElemento>
A primeira tag é chamada tag de abertura;
A segunda tag é chamada tag de fechamento;
O conteúdo do elemento está entre a tag de abertura e a tag de
fechamento;
A tag de fechamento é escrita utilizando uma barra antes do nome da tag;
Ordem de abertura e fechamento das tags deve ser respeitada!
<nome1>< nome2 >....</ nome1></ nome2> ERRADO
< nome1>< nome2>....</ nome2></ nome1> CORRETO
Alguns elementos HTML não tem conteúdo, não usam tag de fechamento
O elemento <br> é um exemplo: usado para inserir uma quebra de linha. 9
“[Link]”
Os elementos HTML podem conter atributos que definem as
características particulares do elemento.
<nomeElem atributo1=“y” atributo2=“x”>conteúdo</nomeElem>
Nome dos elementos e dos atributos em minúsculo;
O valor dos atributos entre aspas simples ou duplas;
Exemplo:
10
Estrutura Básica de um
Documento HTML
11
ESTRUTURA BÁSICA DE UM DOCUMENTO HTML
12
ESTRUTURA BÁSICA DE UM DOCUMENTO HTML
13
ESTRUTURA BÁSICA DE UM DOCUMENTO HTML
Idioma da página HTML
Definido pelo atributo lang do elemento <html>
Tal informação pode ser utilizada por buscadores (como o Google)
Tipo de codificação dos caracteres da página
Definido pelo atributo charset do elemento <meta>
O formato UTF-8 suporta vários tipos de caracteres (cedilhas, acentos)
Elemento title
Define o título que aparece na aba do navegador
14
Página HTML
15
[Link]
16
Formatação
17
Tags Descrição
Coloca o texto em negrito sem adicionar importância.
<b>
Ex: <b>Este texto aparecerá em negrito</b>
Coloca o texto em itálico (sem adicionar importância);
<i>
Ex: <i>Este texto aparecerá em itálico</i>
FORMATAÇÃO
Coloca o texto sublinhado (underline)
<u>
Ex: <u>Texto sublinhado</u>
Coloca o texto subscrito. Ex: H20
<sub>
Ex.: Texto <sub>subscrito</sub>
Coloca o texto sobrescrito. Ex: x^2
<sup>
Ex.:Texto <sup>sobrescrito</sup>
Define o texto como “removido” ou “riscado”. Ex: R$ 100,00
<del>
Ex.:Texto <del> removido </del> ou <del> riscado </del>
Insere uma quebra de linha (sem começar um novo parágrafo).
<br>
Ex.: uma linha<br>outra linha<br>
18
Tags Descrição
Insere uma linha horizontal (faz quebra automática de linha)
<hr> Ex.: <hr size=“10”> <hr width=“80%”> <hr size=“5” width=“100”
color="red">
Início de um novo parágrafo (faz quebra automática de linha).
FORMATAÇÃO
<p>
Ex.: <p>parágrafo1</p><p align="justify">alinhamento justificado</p>
<h1> ... Títulos e subtítulos (faz quebra automática de linha ao final)
<h6> Ex.: <h1>Título da página</h1> <h6 align="center">centralizado</h6>
Link para uma nova página ou para uma subseção.
Ex.: <a href="[Link]
<a>
<a href ="# brasil">Brasil </a>
<h2 id="brasil">Brasil </h2 >
Inserção de imagens. Exemplo:
Ex.: <img src="[Link]" alt="UFU" width="100" height="100">
<img>
(src: caminho do arquivo; alt: texto alternativo a ser exibido caso a imagem
não seja carregada; width: largura; height: altura 19
19
FORMATAÇÃO – EXEMPLO DE CORES
1. Utilizando nomes de cores pré-definidas, como blue, green, white, etc.
Lista de nomes suportados: [Link]
2. Indicando, por meio de um número decimal de 0 a 255, a intensidade de cada
cor base: rgb(red, green, blue).
Exemplo: <p style="color: rgb(0,0,255);"> # intensidade máxima de azul
3. Indicando a intensidade de cada cor usando os dígitos hexadecimais
<p style="color: #0000FF;"> # intensidade máxima de azul
Explore a combinação de cores por meio da página a seguir:
[Link]
20
Elementos de Bloco x
Elementos de Linha
21
ELEMENTOS DE BLOCO X ELEMENTOS DE LINHA
Um elemento de bloco começa sempre com uma quebra de linha e
ocupa toda a largura disponível da página. Exemplos:
<div>; usado para agrupar outros elementos e organizar a página.
<h1>, <h2>, ..., <h6>
<p>
<form>
Um elemento de linha não começa com uma quebra de linha e
ocupa só a largura necessária para a sua exibição. Exemplos:
<a>
<img>
22
“[Link]”
EXEMPLO DE ELEMENTO <div>
Resultado: Uma caixa preta com cantos arredondados,
contendo: Um título em destaque e um texto descritivo em branco.
EXEMPLO DE ELEMENTO <span>
Resultado: Define um título grande, e aplica um estilo apenas parte
23
do texto; e muda a cor “Gestão de Informação” em vermelho.
Caminhos dos Arquivos
(Parte 2)
24
CAMINHOS DOS ARQUIVOS
No exemplo anterior, observe que o elemento img faz uma
referência a um arquivo por meio do atributo src.
Vejamos, algumas formas de referenciar os arquivos são:
25
Listas
26
LISTAS
Lista com marcadores: um marcador é exibido antes de cada tópico;
Resultado:
Lista numerada: os tópicos da lista são numerados
automaticamente
Resultado:
27
Tabelas
28
TABELAS
As tags mais usadas para criação de tabelas são <table>, <tr> e <td>
29
“[Link]”
30
“[Link]”
Resultado:
31
“[Link]”
width
Resultado:
border
32
TABELAS
33
Cabeçalho, Corpo e Rodapé - Exemplo 2
É possível remover
a borda da tabela.
Colocando “zero”.
34
Cabeçalho, Corpo e Rodapé - Exemplo 2
Resultado:
35
“[Link]”
As células podem ser expandidas para ocupar mais de uma linha ou coluna
dentro da tabela por meio dos atributos rowspan e colspan;
Exemplo: na tabela a seguir, a célula “Provas” ocupa o espaço de duas
colunas. Neste caso, utiliza-se o atributo colspan;
36
[Link]
Resultado:
37
Inserindo Vídeo e Áudio
38
“[Link]”
Um vídeo pode ser inserido com a tag <video> da HTML5:
Veja detalhes em: [Link]
De maneira semelhante, pode-se inserir som com a tag <audio>:
39
“[Link]”
Uma forma de inserir um vídeo do YouTube ou uma imagem da
Internet é utilizando a tag <iframe>, da seguinte forma:
EXEMPLO
40
Formulários
(Parte 3)
41
FORMULÁRIOS [Link]
Criar um formulário HTML contendo dois campos básicos, um para a inserção
de um nome de usuário e o outro para a inserção de uma senha.
42
FORMULÁRIOS
O atributo placeholder pode ser utilizado para apresentar uma
mensagem informativa no campo de texto.
Aparecerá para o usuário quando o campo estiver em branco.
Utilize o elemento <label> para rotular os campos.
Ao invés de informar um simples texto antes do campo.
O atributo HTML id é usado para prover um nome de identificação
único para o elemento (valor do id não deve ser repetido na página).
Atributo id pode ser inserido em qualquer elemento HTML.
43
FORMULÁRIOS – PRINCIPAIS ATRIBUTOS DO ELEMENTO <INPUT>
name – utilizado para dar um nome de identificação ao campo;
value – utilizado para atribuir um valor ao campo (este é o valor que será
enviado quando o formulário for submetido para uma outra página);
type – indica o tipo de campo de entrada. Alguns possíveis valores:
text: campo de entrada de texto comum;
password: campo de senha. Um asterisco * é mostrado no lugar do caractere;
radio: permite selecionar uma única opção dentre várias ();
checkbox: permite selecionar várias opções ();
hidden: campo de entrada oculto;
number: para um campo de entrada do tipo número;
submit: cria um botão para submeter (enviar) o formulário;
reset: cria um botão para “limpar” o formulário. 44
FORMULÁRIOS
action, submit e reset
45
FORMULÁRIOS – ACTION E METHOD
O atributo method especifica o método HTTP que deve ser utilizado na
submissão do formulário. Pode ser GET ou POST:
Método GET
Usado para pequenas quantidades de dados e não há informações sensíveis:
action_page.php?nome=daniel&endereco=uberlandia
O tamanho de um URL é limitado (cerca de 3000 caracteres).
Nunca use GET para enviar dados confidenciais! (ficará visível na URL).
Método POST
Não tem limitações de tamanho na URL.
46
Oferece maior segurança, pois os dados não aparecem na URL.
FORMULÁRIOS <BUTTON>
Outra forma de se criar um botão na página é utilizando <button>;
Neste caso, o texto que aparecerá no botão deve ser informado entre as tags de
abertura e fechamento:
Com a tag <button> é possível criar botões mais sofisticados.
Por exemplo, pode-se usar uma imagem para o botão.
Basta inserir um elemento <img> no local do conteúdo do texto.
OBS: se um botão for inserido sem o atributo type="button", ele será
considerado por padrão, um botão do tipo submit.
47
FORMULÁRIOS [Link]
Usado quando se deseja escolher uma opção dentre várias disponíveis.
Todos os campos do mesmo grupo devem possuir o mesmo “name”.
Resultado:
48
FORMULÁRIOS [Link]
Permite ao usuário selecionar ou marcar diversas opções:
Resultado:
49
FORMULÁRIOS [Link]
Quando se deseja enviar algum dado, sem que ele apareça para o usuário;
Resultado:
50
FORMULÁRIOS [Link]
Campo de entrada do tipo data
Resultado:
51
FORMULÁRIOS – INPUT DATE
date: Utilizado para coletar data (dia, mês e ano) sem fuso horário.
datetime: Usado para coletar data (dia, mês e ano) e hora (hora, minuto, segundo e
fração de segundo) com fuso horário em UTC (Universal Time Coordinated).
datetime-local: Utilizado para coletar data (dia, mês e ano) e hora (hora, minuto,
segundo e fração de segundo) sem fuso horário.
month: Usado para coletar data composta por mês e ano, sem fuso horário.
week: Usado para coletar data composta por semana e ano, sem fuso horário.
time: Usado para coletar hora (hora, minuto, segundo e fração de segundo) sem fuso.
52
FORMULÁRIOS – INPUT DATE
date datetime-local
53
FORMULÁRIOS – INPUT DATE
week month
54
FORMULÁRIOS [Link]
<fieldset> – agrupa dados relacionados no formulário.
<legend> – define um título para o elemento <fieldset>. Resultado:
55
Caixa de Seleção
(Parte 4)
56
FORMULÁRIOS [Link]
Permite selecionar a partir de uma caixa de seleção;
O valor selected pode ser usado para indicar o item pré-selecionado;
Resultado:
57
FORMULÁRIOS
Usando atributo multiple, um ou mais
itens podem ser selecionados.
Geralmente, mantendo a tecla CTRL
pressionada, os usuários poderão escolher
dois ou mais itens.
O elemento optgroup agrupa as opções
em categorias
Atributo label deste elemento é exibido no
drop-down list (lista suspensa).
58
FORMULÁRIOS select (caixa de seleção)
59
FORMULÁRIOS [Link]
Permite a entrada de múltiplas linhas de texto;
Resultado:
60
FORMULÁRIOS Autocomplete
Deve-se criar uma lista de sugestões com o elemento datalist.
É fundamental identificar as listas de sugestões com o atributo id.
As opções devem ser definidas no conteúdo do elemento datalist
Por meio do elemento option onde o atributo value define uma sugestão.
61
FORMULÁRIOS Atributos
disabled
Desabilita o campo ou o botão.
Utilizado nos elementos input, select, textarea e button
readonly
Não permite ao usuário realizar qualquer alteração no conteúdo.
Utilizado nos elementos input e textarea
62
Validação da Página
HTML
63
VALIDAÇÃO DA PÁGINA HTML
W3C (Organização de Padronização) oferece serviço gratuito de validação de
páginas HTML5; Acesse [Link] → “validate by file upload” e
utilize o serviço para verificar a sintaxe do arquivo anterior;
[Link]
Tal validação garante que a sintaxe usada está de acordo com padrões W3C,
reduzindo chances de incompatibilidade com alguma versão navegador web.
64
VALIDAÇÃO DA PÁGINA HTML
Validação automática do browser pelo tipo do campo
e-mail, url, ...
required: obriga o preenchimento do campo
min e max: determina o intervalo que o campo numérico deve estar
pattern: obriga o campo a respeitar uma expressão regular
65
Exemplo de Layout
HTML
66
EXEMPLO DE LAYOUT HTML
HTML5 oferece elementos para criação de divisões lógicas na página.
Tais elementos são utilizados para definir o layout da página;
Acesse o tutorial disponível no site w3schools:
[Link]
HTML Responsivo (permite páginas web renderizarem em vários dispositivos)
[Link]
67
EXEMPLO DE LAYOUT HTML Alguns dos elementos
<header>
Definir um conteúdo de introdução.
Um cabeçalho de um documento HTML ou de uma seção de um documento HTML.
Composto normalmente pelos os elementos h1, h2, h3, h4, h5 e h6 ou
por sumários, formulários de busca, logos, entre outros elementos.
<footer>
Define rodapé para o documento HTML ou seção do documento HTML.
Composto pelas informações sobre a seção, a qual ele pertence como quem a
escreveu, links relacionados ao conteúdo da seção e informações legais.
68
EXEMPLO DE LAYOUT HTML Alguns dos elementos
<nav>
Define um bloco com os principais links de um documento HTML.
É comum, definir os principais links de um documento HTML nos rodapés.
O elemento nav, neste caso, aparecerá no conteúdo do elemento footer.
<article>
Usado para definir um post de um fórum, artigo de uma revista, post de
blog, comentário enviado por usuário ou item independente de conteúdo.
Um elemento article dentro de outro elemento article deve definir algo relacionado
ao conteúdo do article que o contém.
69
EXEMPLO DE LAYOUT HTML Alguns dos elementos
<aside>
Define algum conteúdo que esteja relacionado ao conteúdo principal,
porém não é o foco do documento HTML.
Esse elemento é exibido na coluna lateral em relação ao conteúdo principal.
<section>
Define uma seção genérica de um documento.
Uma seção é o agrupamento de um conteúdo dentro de um tema.
Normalmente, as seções possuem cabeçalho e rodapé.
70
EXEMPLO DE LAYOUT HTML Alguns dos elementos
<figure>
Define um conteúdo que é autossuficiente e tipicamente referenciado
como uma unidade singular do fluxo principal do documento (figura).
Opcionalmente o conteúdo pode possuir uma legenda.
<figcaption>
Define a legenda do conteúdo do elemento figure.
71
EXEMPLO DE LAYOUT HTML
Alguns dos elementos
72
75
Referências
76
REFERÊNCIAS
Slides do Prof. Dr. Daniel A. Furtado
[Link]
Tutorial introdutório de HTML:
[Link]
77
Dúvidas?
78