Scribd
Carregar
0 visualizações99 páginas

Slide HTML

O documento apresenta uma introdução ao HTML5, destacando suas três camadas principais: conteúdo (HTML), estilo (CSS) e comportamento (JavaScript). O HTML5 é uma linguagem de marcação que permite a criação de páginas web e é mais tolerante que suas versões anteriores, tendo sido publicado em 2012. O texto também aborda elementos fundamentais do HTML5, como a declaração do tipo de documento, metatags e a estrutura básica de um documento HTML.

Enviado por

williamlapa25
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
0 visualizações99 páginas

Slide HTML

O documento apresenta uma introdução ao HTML5, destacando suas três camadas principais: conteúdo (HTML), estilo (CSS) e comportamento (JavaScript). O HTML5 é uma linguagem de marcação que permite a criação de páginas web e é mais tolerante que suas versões anteriores, tendo sido publicado em 2012. O texto também aborda elementos fundamentais do HTML5, como a declaração do tipo de documento, metatags e a estrutura básica de um documento HTML.

Enviado por

williamlapa25
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd

Introdução ao HTML 5

Prof. David Fernandes de Oliveira


Instituto de Computação
UFAM
As 3 Camadas

O desenvolvimento client-side é baseado em 3 camadas
principais:
―
Conteúdo, viabilizado pelo HTML
―
Estilo, viabilizado pelo CSS
―
Comportamento, viabilizado pelo JavaScript

As camadas possibilitam o desenvolvimento independente de
cada área da produção
―
Por exemplo, para modificar o design, podemos fazê-lo manipu-
lando apenas o CSS, sem se preocupar com HTML ou JavaScript

Nesta primeira parte do curso, vamos abordar a primeira
camada: o conteúdo, viabilizado pelo HTML
O HTML 5

HTML (HyperText Markup Language) é um tipo especial de
linguagem de computador chamado linguagem de marcação
―
Essa linguagem é usada para especificar o conteúdo e a estrutura
das páginas Web de uma forma portátil

O HTML é baseado no conceito de Hipertexto
―
Hipertexto é uma coleção de páginas conectadas através de links
que auxiliam o leitor a navegar entre as diferentes páginas
História do HTML5
Após o HTML 4.01, o foco O XHTML 2.0 possuia padrões mais rígidos do
do W3C mudou para o que o 1.0, rejeitando páginas que não seguiam
XHTML e seus padrões as especificações. Ele foi completamente
mais rígidos. abandonado em 2009.

XHTML 1.0
HTML 4.0.1
HTML 2.0 HTML 3.2
HTML 1.0 e 3.0 e 4.0 XHTML 2.0 HTML5

1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012


O HTML5 é mais tolerante que o XHTML e é compatível com as
versões anteriores do HTML

Embora o HTML5 tenha sido publicado em 2012, seu
desenvolvimento começou em 2014
História do HTML5
Após o HTML 4.01, o foco O XHTML 2.0 possuia padrões mais rígidos do
do W3C mudou para o que o 1.0, rejeitando páginas que não seguiam
XHTML e seus padrões as especificações. Ele foi completamente
mais rígidos. abandonado em 2009.

XHTML 1.0

HTML 4.0.1
HTML 1.0 HTML 2.0 HTML 3.2 e 4.0 XHTML 2.0 HTML5

1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012


O HTML5 é mais tolerante que o XHTML e página
Primeira é compatível
da Web com as
versões anteriores do HTML

Embora o HTML5 tenha sido publicado em 2012, seu
desenvolvimento começou em 2014
Exemplo de Código HTML5

Código HTML5 com um pequeno texto Título da
página
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Instituto de Computação
</title>
</head>
<body>
O Instituto de Computação (IComp) é
um instituto acadêmico que agrega Body
os professores da área de computação.
</body>
</html>
Document Type Declaration

O document type declaration (DOCTYPE) é obrigatório no
HTML5, para informar ao browser que o conteúdo do
documento é HTML Document
Type
<!DOCTYPE html> Declaration
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Instituto de Computação
</title>
</head>
<body>
O Instituto de Computação (IComp) é
um instituto acadêmico que agrega
os professores da área de computação.
</body>
</html>
Comentários

Insira comentários em seu código HTML5 para descrever o
conteúdo dos documentos.

Comentários começam com <!-- e terminam com -->.
<!DOCTYPE html> Comentário
<!-- Página do Instituto de Computação -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Instituto de Computação
</title>
</head>
<body>
O Instituto de Computação (IComp) é um instituto acadêmico
que agrega os professores da área de computação.
</body>
</html>
Head e Body

Um código HTML é iniciado através da tag html, cujo conteúdo
é dividido em duas partes: head e body
―
A seção head contém
informações sobre o
documento HTML5, tal como a
codificação de caracteres (ex
UTF-8) e o título da página
―
A seção body contém o
conteúdo da página em si, que
é mostrado para usuário
quando ele acessa a página
através de um browser
Tags Inicial e Final

Os documentos HTML5 delimitam a maioria dos elementos
através de tags (ou marcadores) iniciais e finais
―
Uma tag inicial (ou tag de abertura) consiste do nome do
elemento entre os sinais de menor e maior
―
Uma tag final (ou tag de fechamento) adota uma barra (/) e os
sinais de menor e maior

<h1>Instituto de Computação</h1>

Tag de Conteúdo Tag de


abertura fechamento
O Elemento Title

O elemento title é usado para atribuir um título para as
páginas Web, e deve ser inserido dentro do element head
<!DOCTYPE html>
<html lang="en"> O título é usado pelas máquinas de
<head> busca para calcular o ranking das
<meta charset="UTF-8"> páginas para as consultas submetidas
<title>
Instituto de Computação
</title>
</head> Título
<body>
O Instituto de Computação (IComp) é um instituto acadêmico
que agrega os professores da área de computação.
</body>
</html>
As Meta Tags

Metadata significa dado (informação) sobre dados

A tag <meta> provê metadados sobre páginas HTML e não
altera o conteúdo mostrado para os usuários

Os elementos meta são tipicamente usados para especificar a
descrição, as palavras-chave, e os autores dos documentos

Os metadados podem ser usados pelos browsers (codificação,
reload da página) e pelas máquinas de busca (keywords)
As Meta Tags

As tags <meta> são inseridas dentro da tag <head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="IComp, UFAM, Computação">
<meta name="description" content="Instituto de Computação">
<meta name="author" content="David Fernandes">
<meta http-equiv="refresh" content="600">
<title>
Instituto de Computação
</title>
</head>
<body>
O Instituto de Computação (IComp) é um instituto acadêmico
que agrega os professores da área de computação.
</body>
</html>
As Meta Tags

A metatag robots contém diretrizes para os robôs de máquinas
de busca e é um exemplo de metadata bastante usado
<meta name="robots" content="noindex">


Os três possíveis valores para content são:
―
noindex, não indexe esta página (não retorne nas buscas)
―
noarchive, não armazene ou cacheie esta página
―
nofollow, não siga os links desta página
As Meta Tags

A metatag robots contém diretrizes para os robôs de máquinas
de busca e é um exemplo de metadata bastante usado
<meta name="robots" content="noindex">


Os três possíveis valores para content são:
noindex,
Note
―
não indexe
que essas estasão
diretrizes página (não pedidos
apenas retorne nas buscas)
feitos às má-
noarchive,
quinas
―
não armazene
de busca, mas essasou cacheieacatar
podem esta página
tais pedidos ou não
―
nofollow, não siga os links desta página
As Meta Tags

A metatag robots contém diretrizes para os robôs de máquinas
de busca e é um exemplo de metadata bastante usado
<meta name="robots" content="noindex">


Os três possíveis valores para content são:
Outra forma
―
noindex,
Note não indexe
que essas estasão
diretrizes página (não pedidos
apenas retorne nas buscas)
feitos
de às má-
passar
―
noarchive,
quinas não armazene
de busca, mas essasou cacheieacatar
podem esta página
tais pedidos
diretrizes paraou não
os robôs é
―
nofollow, não siga os links desta página através do
[Link]
As Meta Tags

Outro uso para o elemento meta é a declaração do tipo de
codificação adotada no documento
<meta charset="utf-8">


Em nosso exemplo, usamos a codificação UTF-8
―
O UTF-8 é uma codificação amplamente adotada, que representa
todos os caracteres Unicode com o menor número de bytes
As Meta Tags

Outro uso importante para o elemento meta é a sobreescrita
de parâmetros do cabeçalho HTTP
<meta http-equiv="refresh" content="60">


Os três possíveis valores para http-equiv são:
―
refresh, que seta um período de reload da página
―
default-style, que seta o arquivo de estilo padrão
―
content-type, que indica a codificação da página

O HTTP é o protocolo normalmente


usado para transportar HTML entre
o servidor e o browser
As Meta Tags

Também podemos usar a tag meta com http-equiv="refresh"
para redirecionar o usuário para outro endereço
<meta http-equiv="refresh" content="2; url=[Link] />


No exemplo acima, o usuário será redirecionado para o site do
Google 2 segundos após visitar a página

O HTTP é o protocolo normalmente


usado para transportar HTML entre
o servidor e o browser
Elementos Void

Elementos void são aqueles que não podem ter outras tags
como antecedentes, como por exemplo o <br> abaixo
Um texto<br> e mais texto em nova linha


Outros exemplos de elementos void: <img>, <input>, <hr>,
<meta>

Em HTML, um elemento void não deve ter uma tag final – por
exemplo, em HTML <input type="text"></input> é inválido
Atributos

Muitas tags possuem atributos que provêem informações
adicionais sobre os elementos

Cada atributo possui um nome e um valor separados pelo
sinal de igual (=).
<img src="img/[Link]" alt="IComp">
Atributos Booleanos

Alguns atributos são booleanos, e nesses casos não é preciso
atribuir um valor para eles
<input disabled>


No entanto, é possível obter o mesmo efeito atribuindo uma
string vazia para o atributo, ou atribuindo seu próprio nome
<input disabled="">
<input disabled="disabled">
Atributos Personalizados

É possível criar seus próprios atributos, contanto que o nome
desses atributos iniciem com o prefixo data-
<div data-creator="david" data-number="123" id="article">


Atributos personalizados são bastante úteis e seus valores são
visíveis em códigos CSS e JavaScript
Cabeçalhos

O HTML5 provê seis elementos de cabeçalho (h1 até h6) para
especificar a relativa importância de uma informação
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cabeçalhos</title>
</head>
<body>
<h1>Cabeçalho nível 1</h1>
<h2>Cabeçalho nível 2</h2>
<h3>Cabeçalho nível 3</h3>
<h4>Cabeçalho nível 4</h4>
<h5>Cabeçalho nível 5</h5>
<h6>Cabeçalho nível 6</h6>
</body>
</html>
Cabeçalhos

O HTML5 provê seis elementos de cabeçalho (h1 até h6) para
especificar a relativa importância de uma informação
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
Os<title>Cabeçalhos</title>
cabeçalhos ajudam a criar um outline dos documentos,
</head>
e podem ser usados pelas máquinas de busca
<body>
<h1>Cabeçalho nível 1</h1>
<h2>Cabeçalho nível 2</h2>
<h3>Cabeçalho nível 3</h3>
<h4>Cabeçalho nível 4</h4>
<h5>Cabeçalho nível 5</h5>
<h6>Cabeçalho nível 6</h6>
</body>
</html>
Espaços no arquivo HTML

Por padrão, o HTML5 ignora múltimos espaços e novas linhas
dispostos nos textos
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Espaços nos Arquivos HTML</title>
</head>
<body>
Instituto de Computação (Icomp)

O Instituto de Computação (IComp), antigo Departamento de


Ciência da Computação do Instituto de Ciências Exatas, é
uma unidade acadêmica da Universidade Federal do Amazonas.
Este instituto agrega os professores da área de
computação. Como toda unidade acadêmica, o IComp atua
no ensino, pesquisa e extensão.
</body>
</html>
Espaços no arquivo HTML

Por padrão, o HTML5 ignora múltimos espaços e novas linhas
dispostos nos textos
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Espaços nos Arquivos HTML</title>
</head>
<body>
Instituto de Computação (Icomp)

O Instituto de Computação (IComp), antigo Departamento de


Ciência da Computação do Instituto de Ciências Exatas, é
uma unidade acadêmica da Universidade Federal do Amazonas.
Este instituto agrega os professores da área de
computação. Como toda unidade acadêmica, o IComp atua
no ensino, pesquisa e extensão.
</body>
</html>
Parágrafos

O elemento <p> representa um parágrafo, e é usado para
separar blocos adjacentes de textos com espaços em branco
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Espaços nos Arquivos HTML</title>
</head>
<body>
<h1>Instituto de Computação</h1>
<p>O Instituto de Computação é o mais novo instituto
da UFAM, tendo sido formado a partir do antigo
Departamento de Ciência da Computação (DCC).</p>
<p>Este instituto agrega os professores da área de
computação. Como toda unidade acadêmica, o IComp atua
no ensino, pesquisa e extensão.</p>
</body>
</html>
Parágrafos

O elemento <p> representa um parágrafo, e é usado para
separar blocos adjacentes de textos com espaços em branco
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Espaços nos Arquivos HTML</title>
</head>
<body>
<h1>Instituto de Computação</h1>
<p>O Instituto de Computação é o mais novo instituto
da UFAM, tendo sido formado a partir do antigo
Departamento de Ciência da Computação (DCC).</p>
<p>Este instituto agrega os professores da área de
computação. Como toda unidade acadêmica, o IComp atua
no ensino, pesquisa e extensãos.</p>
</body>
</html>
Quebras de Linha

O elemento <br> insere uma nova linha na página
<h1>Tratado Geral das Grandezas do Ínfimo</h1>
A poesia está guardada nas palavras — é tudo
que eu sei.<br>
Meu fado é o de não saber quase tudo.<br>
Sobre o nada eu tenho profundidade.<br>
Não tenho conexões com a realidade.<br>
Poderoso para mim não é aquele que descobre
ouro.<br>
Para mim poderoso é aquele que descobre as
Insignificâncias (do mundo e as nossas).<br>
Por essa pequena sentença me elogiaram
de imbecil.<br>
Fiquei emocionado e chorei.<br>
Sou fraco para elogios.<br><br>
<small>Manoel de Barros</small>
Quebras de Linha

O elemento <br> insere uma nova linha na página
<h1>Tratado Geral das Grandezas do Ínfimo</h1>
A poesia está guardada nas palavras — é tudo
que eu sei.<br>
Meu fado é o de não saber quase tudo.<br>
Sobre o nada eu tenho profundidade.<br>
Não tenho conexões com a realidade.<br>
Poderoso para mim não é aquele que descobre
ouro.<br>
Para mim poderoso é aquele que descobre as
Insignificâncias (do mundo e as nossas).<br>
Por essa pequena sentença me elogiaram
de imbecil.<br>
Fiquei emocionado e chorei.<br>
Sou fraco para elogios.<br><br>
<small>Manoel de Barros</small>
Conteúdo pré-formatado

O elemento <pre> permite a preservação dos espaçamentos
originais do arquivo HTML
<body>
<pre>
Instituto de Computação (Icomp)
O Instituto de Computação é o mais novo instituto
da UFAM, tendo sido formado a partir do antigo
Departamento de Ciência da Computação (DCC).
Este instituto agrega os professores da área de
computação. Como toda unidade acadêmica, o IComp atua
no ensino, pesquisa e extensãos.
</pre>
</body>
Conteúdo pré-formatado

O elemento <pre> permite a preservação dos espaçamentos
originais do arquivo HTML
<body>
<pre>
Instituto de Computação (Icomp)
O Instituto de Computação é o mais novo instituto
da UFAM, tendo sido formado a partir do antigo
Departamento de Ciência da Computação (DCC).
Este instituto agrega os professores da área de
computação. Como toda unidade acadêmica, o IComp atua
no ensino, pesquisa e extensãos.
</pre>
</body>
Conteúdo pré-formatado

O elemento <pre> permite a preservação dos espaçamentos
originais do arquivo HTML
<body>
O elemento
<pre> pre pode ser particularmente útil para apresentar
códigosInstituto de Computação
de linguagens de programação (Icomp)
O Instituto de Computação é o mais novo instituto
da UFAM, tendo sido formado a partir do antigo
Departamento de Ciência da Computação (DCC).
Este instituto agrega os professores da área de
computação. Como toda unidade acadêmica, o IComp atua
no ensino, pesquisa e extensãos.
</pre>
</body>
Elementos Block

Elementos block são aqueles que ocupam todo o espaço
horizontal de seu elemento pai, criando assim um "bloco"
―
Exemplos: <h1>, <h2>, <p>, <article>, <ul>, e <ol>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>IComp / UFAM</title>
</head>
<body>
<h1>Instituto de Computação</h1>
</body>
</html>
Elementos Block

Elemento block são aqueles que ocupam todo o espaço
horizontal de seu elemento pai, criando assim um "bloco"
―
Exemplos: <h1>, <h2>, <p>, <table>, <ul>, e <ol>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>IComp / UFAM</title>
</head>
<body>
<h1>Instituto de Computação</h1>
</body>
</html>
Elementos Inline

Elementos de marcação inline são aqueles que não começam
uma nova linha no fluxo do documento
―
Exemplos: <strong>, <emph>, <sub>, <sup>, <q> e <small>
<p>
<strong>Instituto de Computação - UFAM</strong><br>
E-mail: <emph>secretaria@[Link]</emph><br>
Fones: (92) 3305-1193, (92) 3305-2808, (92) 3305-2809<br>
Endereço: Av. Rodrigo Otávio, n<sup>o</sup> 6200.<br>
Campus Universitário Senador Arthur Virgílio Filho. <br>
Setor Norte do Campus Universitário.<br>
Manaus/AM. CEP 69077-000.<br><br>
<q>O vinho mais caro não serve de nada quando a sede é de
H<sub>2</sub>O.</q>
<small>Tati Bernardi</small>
</p>
Elementos Inline

Elementos de marcação inline são aqueles que não começam
uma nova linha no fluxo do documento
―
Exemplos: <strong>, <emph>, <sub>, <sup>, <q> e <small>
<p>
<strong>Instituto de Computação - UFAM</strong><br>
E-mail: <emph>secretaria@[Link]</emph><br>
Fones: (92) 3305-1193, (92) 3305-2808, (92) 3305-2809<br>
Endereço: Av. Rodrigo Otávio, n<sup>o</sup> 6200.<br>
Campus Universitário Senador Arthur Virgílio Filho. <br>
Setor Norte do Campus Universitário.<br>
Manaus/AM. CEP 69077-000.<br><br>
<q>O vinho mais caro não serve de nada quando a sede é de
H<sub>2</sub>O.</q>
<small>Tati Bernardi</small>
</p>
Inserindo Imagens

Os formatos de imagens mais populares usados pelos
desenvolvedores Web atualmente são
―
PNG (Portable Network Graphics)
―
JPEG (Joint Photographic Experts Group)
―
SVG (Scalable Vector Graphics)

Desenvolvedores podem criar imagens usando softwares tais
como o Adobe Photoshop, GIMP, Inkscape e muitos outros

As imagens também podem ser adquiridas de sites
especializados, muitos com opções gratuitas
Inserindo Imagens

Os formatos de imagens mais populares usados pelos
desenvolvedores Web atualmente são
―
PNG (Portable Network Graphics)
―
JPEG (Joint Photographic Experts Group)
―
SVG (Scalable Vector Graphics)

Desenvolvedores podem criar imagens usando softwares tais
como o Adobe Photoshop, GIMP, Inkscape e muitos outros

As imagens também podem ser adquiridas de sites
especializados, muitos com opções gratuitas
Inserindo Imagens

O elemento HTML <img> é usado para inserção de imagens no
documento
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Espaços nos Arquivos HTML</title>
</head>
<body>
<img src="/public/[Link]" width="320"
alt="Pilares da Criação">
<small>Os Pilares da Criação</small>
</body>
</html>
Inserindo Imagens

O elemento HTML <img> é usado para inserção de imagens no
documento
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Espaços nos Arquivos HTML</title>
</head>
<body>
<img src="/public/[Link]" width="320"
alt="Pilares da Criação">
<small>Os Pilares da Criação</small>
</body>
</html>
Inserindo Imagens

Sempre inclua os atributos width e/ou height das imagens,
para que o browser saiba seus tamanhos antes de carregá-las
―
Assim os browsers poderão reservar o espaço que a imagem
ocupará na tela antes de carregá-la

Usar valores dos atributos width e height diferentes dos
valores reais imagem pode distorcer a imagem original
―
No entanto, é possível setar tais atributos com valores
proporcionais aos da imagem original
Outros formatos de media

Além de imagens, os
browsers também
suportam audios através
da tag <audio> e vídeos
através da tag <video>
Minha Primeira Página HTML
Exercício:
criar uma
página HTML
com os
mesmos
elementos da
página ao lado

github
html
Listas não ordenadas

As listas não ordenadas, criadas através do elemento <ul>, são
listas de itens marcadas com algum bullet
―
Cada item é separado usando um elemento <li>
<body>
<p>Linhas de pesquisa do Programa de Pós-graduação em
Informática (PPGI) do Icomp/UFAM:</p>
<ul>
<li>Banco de Dados e Recuperação de Informação</li>
<li>Inteligência Artificial </li>
<li>Redes de Computadores e Sistemas Distribuídos</li>
<li>Sistemas Embarcados e Engenharia de Software</li>
<li>Visão Computacional e Robótica</li>
<li>Otimização, Algoritmos e Complexidade</li>
</ul>
</body>
Listas não ordenadas

As listas não ordenadas, criadas através do elemento <ul>, são
listas de itens marcadas com algum bullet
―
Cada item é separado usando um elemento <li>
<body>
<p>Linhas de pesquisa do Programa de Pós-graduação em
Informática (PPGI) do Icomp/UFAM:</p>
<ul>
<li>Banco de Dados e Recuperação de Informação</li>
<li>Inteligência Artificial </li>
<li>Redes de Computadores e Sistemas Distribuídos</li>
<li>Sistemas Embarcados e Engenharia de Software</li>
<li>Visão Computacional e Robótica</li>
<li>Otimização, Algoritmos e Complexidade</li>
</ul>
</body>
Listas ordenadas

As listas ordenadas, criadas através do elemento <ol>, são
listas de itens ordenados numericamente
―
Cada item é separado usando um elemento <li>
<body>
<p>Lista de planetas do Sistema Solar, ordenados
segundo as distâncias em relação ao Sol:</p>
<ol>
<li>Mercúrio</li>
<li>Vênus</li>
<li>Terra</li>
<li>Marte</li>
<li>Júpiter</li>
<li>Saturno</li>
<li>Urano</li>
<li>Netuno</li>
</ol>
</body>
</body>
Listas ordenadas

As listas ordenadas, criadas através do elemento <ol>, são
listas de itens ordenados numericamente
―
Cada item é separado usando um elemento <li>
<body>
<p>Lista de planetas do Sistema Solar, ordenados
segundo as distâncias em relação ao Sol:</p>
<ol>
<li>Mercúrio</li>
<li>Vênus</li>
<li>Terra</li>
<li>Marte</li>
<li>Júpiter</li>
<li>Saturno</li>
<li>Urano</li>
<li>Netuno</li>
</ol>
</body>
</body>
Listas ordenadas

O elemento <ol> aceita os atributos type, start e reversed
―
type: especifica o tipo de numeração dos itens, que pode ser 1
(numérico), A (letras maiúsculas), a (letras minúsculas), I (números
romanos), i (números romanos minúsculos)
―
start: especifica o valor do primeiro elemento da lista
―
reversed (booleano): indica se a lista deve estar em ordem
decrescente
<ol type="a" start="5" reversed>
<li>Item da lista</li>
<li>Item da lista</li>
<li>Item da lista</li>
</ol>
Hyperlinks

Os hyperlinks, criados pelo elemento <a>, são referências a
outros documentos ou a outras partes do mesmo documento

Os browsers tipicamente assinalam os hyperlinks com
underlines, além de dispô-los na cor azul
―
No entanto, esse comportamento pode ser mudado usando CSS

Se o servidor Web não localizar o recurso requisitado, ele irá
retornar um erro (código 404) indicando a falta do recurso

Instituto de Computação
Hyperlinks

Para criar um link, basta usar a tag <a>, informando a URL
desejada através do atributo href
<a href="[Link] de Computação</a>


Além do HTTP, a maioria dos browsers também suporta outros
protocolos, tais como HTTPS e FTP

Também é possível usar o protocolo mailto
<a href="[Link] Fernandes</a>
Hyperlinks

O atributo target do elemento <a> permite especificar onde a
página do link deverá ser aberta, e suas opções são:
―
_self, que abre o documento em na janela atual (padrão)
―
_blank, que abre o documento em uma nova janela ou tab
Caracteres Especiais

O HTML5 provê uma série de códigos para representar
caracteres especiais
Caracteres Especiais

O HTML5 provê uma série de códigos para representar
caracteres especiais

Muitos caracteres não podem ser apresentados


em um browser a não ser através desses códigos
Caracteres Especiais

Caracteres especiais também podem ser representados por
referências decimais ou hexadecimais (hex)

Por exemplo, o caracter ★ é representado em notação
decimal como &#9733; e hexadecimal como e &#x2605;

O endereço abaixo contém uma listagem dos caracteres
especiais que podem ser referenciados no HTML
―
[Link]
Barras Horizontais

Uma barra horizontal, indicada pela tag <hr>, renderiza uma
linha horizontal com espaço extra na vertical

O CSS pode ser usado para alterar o formato dessas barras
Tabelas no HTML5

Tabelas são usadas para organizar dados em linhas e colunas,
e são criadas através do <table>

Uma tabela é dividida em linhas (com o elemento <tr>), e cada
linha é dividida em células de dados (com o elemento <td>)
<table border="1">
<tr>
<td>linha 1, dado 1</td>
<td>linha 1, dado 2</td>
</tr>
<tr>
<td>linha 2, dado 1</td>
<td>linha 2, dado 2</td>
</tr>
</table>
Tabelas no HTML5

Uma tabela pode ser dividida em três seções distintas:
―
Cabeçalho, criado pelo elemento <thead>
―
Corpo, criado através do elemento <tbody>
―
Rodapé, criado através do elemento <tfoot>
―
Legenda, criado pelo elemento <caption>

Caption
thead

tbody
Tabelas no HTML5
<table>
<caption>Professores do Grupo de
Pesquisa em Educação em Computação (GPEC),
do Instituto de Computação da UFAM</caption>

Uma tabela pode ser dividida em três seções distintas:
<thead>
<tr>
―
Cabeçalho, criado pelo elemento <thead>
<th>Nome</th>
<th>Cargo</th>
―
Corpo, criado através do elemento <tbody>
<th>Email</th>
―
Rodapé, criado
</tr> através do elemento <tfoot>
</thead>
―
Legenda, criado pelo elemento <caption>
<tbody>
<tr>
<td>David F. de Oliveira</td>
<td>Professor Associado</td>
<td>david@[Link]</td>
</tr>
<tr> Caption
<td>Eduardo Souto</td>
thead
<td>Professor Associado</td>
<td>souto@[Link]</td>
</tr>
tbody ...
Rowspan e Colspan

É possível mesclar o conteúdo de células consecutivas de uma
tabela usando os atributos rowspan e colspan

Os valores desses atributos especificam o número de linhas ou
colunas ocupadas por uma célula, e podem ser usados em
qualquer célula de uma tabela
<thead><tr><th colspan=3>Professores do GPEC</th></tr></thead>
Minha Segunda Página HTML
Exercício:
criar uma
página HTML
com os
mesmos
elementos da
página ao lado

github
html
Elementos Semânticos

Em HTML, elementos semânticos são aqueles que descrevem
claramente o seu significado dentro da página

Por exemplo, o <h1> é um elemento semântico, pois indica
que seu conteúdo é um cabeçalho de nível superior da página
<h1>Instituto de Computação</h1>


Por outro lado, o <div> é um elemento não semântico, pois ele
não revela nenhuma informação sobre o propósito de seu
conteúdo

Outros elementos semânticos: <article>, <aside>, <details>,
<footer>, <header>, <nav>
Elementos Semânticos

Em HTML, elementos semânticos são aqueles que descrevem
claramente o seu significado dentro da página

Por exemplo, o <h1> é um elemento semântico, pois indica
que seu conteúdo é um cabeçalho de nível superior da página
<h1>Instituto de Computação</h1>


Por outro lado, o <div> é um elemento não semântico, pois ele
não revela nenhuma informação sobre o propósito de seu
conteúdo

Outros elementos semânticos: <article>, <aside>, <details>,
<footer>, <header>, <nav>
Utilizamos para
Elementos Semânticos
representar o cabeçalho
de um documento ou
seção. Nele podemos
 inserirelementos
Em HTML, elementos semânticos são aqueles que descrevem
de <h1> a <h6>
claramente o seu significado dentro da página

Por exemplo, o <h1> é um elemento semântico, pois indica
que seu conteúdo é um cabeçalho de nível superior da página
<h1>Instituto de Computação</h1>


Por outro lado, o <div> é um elemento não semântico, pois ele
não revela nenhuma informação sobre o propósito de seu
conteúdo

Outros elementos semânticos: <article>, <aside>, <details>,
<footer>, <header>, <nav>
Utilizamos para
Elementos Semânticos
representar o cabeçalho
Usado para
de um documento ou
seção. representar
Nele podemosum
 inseriragrupamento
Em HTML, elementos semânticos são aqueles que
elementos descrevem
de <h1> de a
links de
<h6>
claramente navegação
o seu significado dentro da página

Por exemplo, o <h1> é um elemento semântico, pois indica
que seu conteúdo é um cabeçalho de nível superior da página
<h1>Instituto de Computação</h1>


Por outro lado, o <div> é um elemento não semântico, pois ele
não revela nenhuma informação sobre o propósito de seu
conteúdo

Outros elementos semânticos: <article>, <aside>, <details>,
<footer>, <header>, <nav>
Utilizamos para
Elementos Semânticos
representar o cabeçalho
Usado para
de um documento ou
seção. representar
Nele podemosum
Usado para
inseriragrupamento
elementos

Em HTML, elementos
de
semânticos
representar
links de o são aqueles que descrevem
de <h1> a <h6>
claramente navegação
oconteúdo
seu significado
principal e,dentro da página
consequentemente, de

Por exemplo, omaior <h1>relevância
é um elemento semântico, pois indica
que seu conteúdo dentro da página
é um cabeçalho de nível superior da página
<h1>Instituto de Computação</h1>


Por outro lado, o <div> é um elemento não semântico, pois ele
não revela nenhuma informação sobre o propósito de seu
conteúdo

Outros elementos semânticos: <article>, <aside>, <details>,
<footer>, <header>, <nav>
Utilizamos para
Elementos Semânticos
representar o cabeçalho
Usado para
de um documento ou
seção. representar
Nele podemos um
Usado para
inseriragrupamento
elementos

Em HTML, elementos
de
semânticos
representar
links de o são aqueles que descrevem
de <h1> a <h6>
claramente navegação
oconteúdo
seu significado
principal e,dentro da página
Usadoconsequentemente,
para de

Por exemplo, oconteúdo
representar um maior
<h1>relevância
é um elemento semântico, pois indica
queque
seu conteúdo dentro
é tangencialmente da página
é um cabeçalho de nível superior da página
relacionado ao conteúdo
do seu entorno;
<h1>Instituto ex:
de Computação</h1>
biografia do autor
ou um glossário

Por outro lado, o <div> é um elemento não semântico, pois ele
não revela nenhuma informação sobre o propósito de seu
conteúdo

Outros elementos semânticos: <article>, <aside>, <details>,
<footer>, <header>, <nav>
Utilizamos para
Elementos Semânticos
representar o cabeçalho
Usado para
de um documento ou
seção. representar
Nele podemos um
Usado para
inseriragrupamento
elementos

Em HTML, elementos
Usado
de para
links de
semânticos
representar o
representar são aqueles que descrevem
de <h1> a <h6>
claramente navegação
oconteúdo
um seu significado
conteúdo principal
que não e,dentro da página
consequentemente,
para de outro parade
Usadoprecisa

Por exemplo,fazer
representar um
omaior
<h1> é um
relevância
sentido
conteúdo em umelemento semântico, pois indica
queque
seu conteúdo dentro
documento
é tangencialmente da
é um página
HTML, por
cabeçalho de nível superior da página
exemplo,
relacionado ao conteúdo um artigo
do seu entorno; emex:um blog
<h1>Instituto de Computação</h1>
biografia do autor
ou um glossário

Por outro lado, o <div> é um elemento não semântico, pois ele
não revela nenhuma informação sobre o propósito de seu
conteúdo

Outros elementos semânticos: <article>, <aside>, <details>,
<footer>, <header>, <nav>
Utilizamos para
Elementos Semânticos
representar o cabeçalho
Usado para
de um documento ou
seção. representar
Nele podemos um
Usado para
inseriragrupamento
elementos

Em HTML, elementos
Usado
de para
links de
semânticos
representar o
representar são aqueles que descrevem
de <h1> a <h6>
claramente navegação
oconteúdo
um seu significado
conteúdo principal
Usado
quepara e,dentro da página
não
consequentemente,
Usadoprecisa outro parade
para derepresentar

Por exemplo,fazer
representar um
omaior
<h1>
uma é um
relevância
sentido
conteúdoimagem
em umelemento
dentro semântico, pois indica
queque
seu conteúdo dentro
documento
é tangencialmentede da
uma
é um página
HTML,seção
por ou de nível superior da página
cabeçalho
relacionado ao exemplo,
conteúdoumartigo
artigo
do seu entorno; emex:um blog
<h1>Instituto de Computação</h1>
biografia do autor
ou um glossário

Por outro lado, o <div> é um elemento não semântico, pois ele
não revela nenhuma informação sobre o propósito de seu
conteúdo

Outros elementos semânticos: <article>, <aside>, <details>,
<footer>, <header>, <nav>
Utilizamos para
Elementos Semânticos
representar o cabeçalho
Usado para
de um documento ou
seção. representar
Nele podemos um
Usado para
inseriragrupamento
elementos

Em HTML, elementos
Usado
de para
links de
semânticos
representar o
representar são aqueles que descrevem
de <h1> a <h6>
claramente navegação
oconteúdo
um seu significado
conteúdo principal
Usado
quepara e,dentro da página
não
consequentemente,
Usadoprecisa outro parade
para derepresentar

Por exemplo,fazer
representar um
omaior
<h1>
uma é um
relevância
sentido
conteúdoimagem
em umelemento
dentro semântico, pois indica
queque
seu conteúdo dentro
documento
é tangencialmentede da
uma
é um página
HTML,seção
por ou de nível superior da página
cabeçalho
relacionado ao exemplo,
conteúdoumartigo
artigo
do seu entorno; emex:um blog
Usado para
<h1>Instituto de Computação</h1>
biografia do autor representar
ou um glossáriouma seção dentro

Por outro lado, ode <div> é umouelemento não semântico, pois ele
um artigo
não revela nenhuma conteúdo principal sobre o propósito de seu
informação
conteúdo

Outros elementos semânticos: <article>, <aside>, <details>,
<footer>, <header>, <nav>
Utilizamos para
Elementos Semânticos
representar o cabeçalho
Usado para
de um documento ou
seção. representar
Nele podemos um
Usado para
inseriragrupamento
elementos

Em HTML, elementos
Usado
de para
links de
semânticos
representar o
representar são aqueles que descrevem
de <h1> a <h6>
claramente navegação
oconteúdo
um seu significado
conteúdo principal
Usado
quepara e,dentro da página
não
consequentemente,
Usadoprecisa outro parade
para derepresentar

Por exemplo,fazer
representar um
omaior
<h1>
uma é um
relevância
sentido
conteúdoimagem
em umelemento
dentro semântico, pois indica
queque
seu conteúdo dentro
documento
é tangencialmente de da
uma
é um página
HTML,seção
por ou de nível superior da página
cabeçalho
relacionado ao exemplo,
conteúdoumartigo
artigo
do seu entorno; emex:um blog
Usado para
<h1>Instituto de Computação</h1>
biografia do autor representar
ou um glossário uma seção dentro

Por outro lado, ode
Usado <div> é umouelemento não semântico, pois ele
um artigo
para
não revela nenhuma conteúdo
representar principal sobre o propósito de seu
informação
o rodapé de um
conteúdo documento, como
a área presente

Outros elementos semânticos: <article>, <aside>, <details>,
no final de uma
<footer>, <header>, página web <nav>
Elementos Semânticos

Note que é possível fazer com que um elemento não
semântico tenha a mesma aparência de um semântico

Por exemplo, usando CSS, podemos fazer com que um
elemento <div> pareça um cabeçalho de nível superior:
<div style="font-size: 32px; margin: 21px 0;">
Cabeçalho de nível superior?
</span>


No entanto, o <div> acima não possui valor semântico, e seu
uso dificulta o trabalho das máquinas de busca de identificar as
informações mais relevantes dentro do documento
Formulários

Formulários permitem que os visitantes das páginas Web
enviem dados para os servidores Web
Formulários

Um formulário é definido pelo elemento <form>

O atributo method de form informa como os dados serão
enviados para o servidor
―
Usando method="post", os dados do formulário serão
enviados através do cabeçalho do protocolo HTTP
―
Usando method="get", os dados do formulário serão
enviados através da URL da requisição

<form method="POST" action="/turma/create" />


Formulários

O atributo action informa o script do servidor que receberá e
processará os dados enviados pelo formulário
<h1>Login</h1>
<p>Por favor, informe seu login e senha: </p>
<form id="login" method="POST" action="/user/login">
Login: <input type="text" name="nome" id="nome"/><br/>
Senha: <input type="password" name="senha" id="senha">
<input type="reset" value="Resetar Dados" />
<input type="submit" name="submit" value="Entrar" />
</form>
Elementos input

Os elementos <input> são usados para criar itens de
formulário para obter dados do usuário
―
O tipo de um input é determinado pelo seu atributo type
―
Tipos de inputs disponíveis no HTML5:

button hidden search


checkbox image submit
color month tel
date number text
datetime password time
datetime-local radio url
email range week
file reset
Elementos input

Os elementos <input> são usados para criar itens de
formulário para obter dados do usuário
―
O tipo de um input é determinado pelo seu atributo type
―
Tipos de inputs disponíveis no HTML5:

button hidden search


checkbox image submit
color month tel
date number text
datetime password time
datetime-local radio url
email range week
file reset
Input text

O input do tipo text insere um campo do tipo texto no
formulário, usado para informações textuais gerais
―
O atributo value define um valor padrão para o campo
―
O atributo size define a largura do campo
―
O atributo maxlength define o número máximo de caracteres que
podem ser inseridos no campo

Nome: <input type="text" value="João" name="nome"/>


Input submit

O elemento input do tipo submit é um botão para submissão
dos dados do formulário
―
Quando o botão é pressionado, os dados que o usuário preencheu
no formulário são enviados para o servidor
―
O atributo action da tag form define o script do lado servidor que
irá receber e processar os dados enviados

O atributo value contém o texto do botão
Nome: <input type="text" value="João" name="nome"/>
<input type="submit" name="submit" value="Enviar" />
Input password

O elemento input do tipo password insere um campo para
inserção de dados sigilosos
―
Útil para inserção de informações de senhas, já que ele esconde a
informação digitada

O valor real do elemento é enviado para o servidor
<input type="password" name="senha" />
Input radio

O elemento input radio habilita os usuários a selecionar uma
dentre duas ou mais opções
―
Atributo checked informa a opção padrão do elemento
―
Atributo value define o valor a ser retornado ao servidor
<input type="radio" name="curso" value="cc">
Ciência da Computação<br>
<input type="radio" name="curso" value="es">
Engenharia de Software<br>
<input type="radio" name="curso" value="ec">
Engenharia da Computação
Input radio

O elemento input radio habilita os usuários a selecionar uma
dentre duas ou mais opções
―
Atributo checked informa a opção padrão do elemento
―
Atributo value define o valor a ser retornado ao servidor
<input type="radio" name="curso" value="cc" checked>
Ciência da Computação<br>
<input type="radio" name="curso" value="es">
Engenharia de Software<br>
<input type="radio" name="curso" value="ec">
Engenharia da Computação
O element fieldset

O elemento fieldset indica um grupo de campos relacionados
―
Para rotular um grupo de campos, usamos a tag legend
<fieldset>
<legend>Selecione seu Curso</legend>
<input type="radio" name="curso" value="cc">
Ciência da Computação<br>
<input type="radio" name="curso" value="es">
Engenharia de Software<br>
<input type="radio" name="curso" value="ec">
Engenharia da Computação<br>
</fieldset>
O elemento label

O elemento <label> define um rótulo para um <input>
―
Essa tag melhora a usabilidade das páginas

Ao clicar no rótulo definido por <label>, o usuário obtém o
controle do elemento que ela rotula
<fieldset>
<legend>Selecione seu Curso</legend>
<input type="radio" name="curso" value="cc" id="cc">
<label for="cc">Ciência da Computação</label><br>
<input type="radio" name="curso" value="es" id="es">
<label for="es">Engenharia de Software</label><br>
<input type="radio" name="curso" value="ec" id="ec">
<label for="ec">Engenharia da Computação</label><br>
</fieldset>
O elemento label

O elemento <label> define um rótulo para um <input>
―
Essa tag melhora a usabilidade das páginas

Ao clicar no rótulo definido por <label>, o usuário obtém o
controle do elemento que ela rotula
<fieldset>
<legend>Selecione seu Curso</legend>
<input type="radio" name="curso" value="cc" id="cc">
<label for="cc">Ciência da Computação</label><br>
<input type="radio" name="curso" value="es" id="es">
<label for="es">Engenharia de Software</label><br>
<input type="radio" name="curso" value="ec" id="ec">
<label for="ec">Engenharia da Computação</label><br>
</fieldset>
Textarea

O elemento textarea insere uma área de texto de múltiplas
linhas no formulário
―
O atributo rows define o número de linhas do campo, e e atributo
cols define o número de colunas
―
O texto padrão é definido através de um texto dentro da tag
<textarea name="mensagem" rows="4" cols="30">
Este é o valor padrão!
</textarea>
Input email

O input do tipo email é usado para requisitar um endereço de
email do usuário
―
O abrituto booleano multiple permite que o usuário informe uma
lista de emails

Se o usuário informar um tipo de e-mail inválido, ele será
notificado desse erro
<label for="email">E-mail </label>
<input type="email" name="email" id="email" required
placeholder="seunome@[Link]">
Input email

O input do tipo email é usado para requisitar um endereço de
O atributo placeholder
email do usuário
permite a adição de um texto
― temporáriomultiple
O abrituto booleano ao campo, que
permite que o usuário informe uma
O atributo required
desaparece quando o
lista de emails
usuário informa o email.
torna o campo
obrigatório

Se o usuário informar um tipo de e-mail inválido, ele será
notificado desse erro
<label for="email">E-mail </label>
<input type="email" name="email" id="email" required
placeholder="seunome@[Link]">
Input checkbox

Os input checkbox são controles quadriculados semelhantes
ao radio, mas que permitem a escolha de mais de uma opção
<label for="java">Java</label>
<input type="checkbox" name="ling" id="java" value="java">
<label for="c">C</label>
<input type="checkbox" name="ling" id="c" value="c">
<label for="cpp">C++</label>
<input type="checkbox" name="ling" id="cpp" value="cpp">
<label for="perl">Perl</label>
<input type="checkbox" name="ling" id="perl" value="perl">
<label for="python">Python</label>
<input type="checkbox" name="ling" id="python" value="python">
<label for="js">Javascript</label>
<input type="checkbox" name="ling" id="js" value="js">
Input date

O input do tipo date habilita o usuário a informar uma
determinada data
<label for="nascimento">Data de Nascimento</label>
<input type="date" name="nascimento" id="nascimento">
Input date

O input do tipo date habilita o usuário a informar uma
determinada data
<label for="nascimento">Data de Nascimento</label>
<input type="date" name="nascimento" id="nascimento">

Apesar de ser um recurso bastante


útil, o input date continua sem
suporte em alguns browsers.
Input number

O input number deixa o usuário a informar um dado numérico

Os atributos min e max determinam o menor e o maior valor
que o campo pode assumir, respectivamente

O atributo step determina como o valor é incrementado
<label for="ano">Ano de entrada em seu curso do IComp</label>
<input type="number" name="ano" min="1980" max="2020" step="1"
value="2020" id="ano">
Input file

O input do tipo file permite o upload de um arquivo do usuário
para o servidor

Após clicar em um botão, o usuário pode selecionar um
arquivo de seu computador local
<fieldset>
<legend>Submeta seu curriculo vitae</legend>
<input type="file" name="curriculo">
</fieldset>
O elemento select

Atravé do elemento <select>, o usuário pode escolher uma
dentre um conjunto de opções disponíveis
<select name="area" id="area">
<option value="1">Banco de Dados</option>
<option value="2">Educação a Distância</option>
<option value="3">Engenharia de Software</option>
<option value="4">Otimização</option>
<option value="5">Programação para a Web</option>
<option value="6">Recuperação de Informação</option>
<option value="7">Redes de Computadores</option>
</select>
Os browsers usam diferentes engines HTML/CSS/JS
para renderizar as páginas, e por isso o layout dos
players podem variar de browser para browser
Os browsers usam diferentes engines HTML/CSS/JS
para
Asrenderizar as páginas,
pricipais engines são: eblink
por (usado
isso o layout dos
pelo opera,
players podem
chrome variar
e edge), de browser
webkit (usadopara
pelobrowser
safari), gecko
(usado pelo firefox)
Minha terceira
Página
Exercício: criar uma
página HTML com os
mesmos elementos da
página ao lado

github
html

Você também pode gostar