0% acharam este documento útil (0 voto)

13 visualizações58 páginas

2 HTML

O documento aborda o desenvolvimento web no lado cliente utilizando HTML, destacando a importância da linguagem de marcação na construção de páginas da web. Ele apresenta a estrutura básica de um documento HTML, elementos essenciais, atributos, e boas práticas para organização de arquivos e caminhos. Além disso, inclui uma atividade prática para a criação de uma página de currículo.

Enviado por

nathtvpb

Direitos autorais

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% acharam este documento útil (0 voto)

13 visualizações58 páginas

2 HTML

Enviado por

nathtvpb

Direitos autorais

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

Você está na página 1/ 58

Desenvolvimento GSI019 - Programação para Internet

Web no lado Prof. Dr. Rafael D. Araújo

cliente - HTML [email protected]

2023/1 http://www.facom.ufu.br/~rafaelaraujo

Slides baseados no material do Prof. Daniel Furtado (FACOM/UFU).

GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Frontend

• Interface de interação com o usuário

• Pode ser:
• um website
• um aplicativo desktop
• um aplicativo para celular
• um aplicativo para TV

2
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Frontend

• Interface de interação com o usuário

• Pode ser:
HTML5, CSS, Javascript,
• um website jQuery, AJAX, AngularJS,
• um aplicativo desktop React, ...
• um aplicativo para celular
• um aplicativo para TV

3
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

HTML (HyperText Markup Language)

• Linguagem de marcação utilizada na construção de páginas na
Web
• Especificação definida pelo consórcio W3C
• Um arquivo .html contém marcadores (tags) que definem o
conteúdo/estrutura da página (títulos, parágrafos, links,
imagens etc.)
• Processada pelo navegador de Internet
• NÃO é linguagem de programação

4
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Histórico
• 1989: Idealização da Web por Tim Berners-Lee
• 1991: Tim publica o primeiro website (documento HTML)
• 1993: HTML 1.0
• ...
• 1997: HTML 4.0 (HTML 4.01 em 1999)
• 2000: XHTML 1.0 (eXtensible Hypertext Markup Language - reformulação da HTML com
base na XML)
• 2004: Criação do WHATWG (Web Hypertext Application Technology Working Group)
• 2008: HTML5 (WHATWG)
• 2014: HTML5 (recomendação W3C)
• 2019: W3C e WHATWG assinam acordo
• WHATWG se torna o principal responsável pelo desenvolvimento dos padrões HTML e DOM
• https://html.spec.whatwg.org/print.pdf
5
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Ambiente de Desenvolvimento Integrado (IDE)

• Microsoft Visual Studio Code (gratuito, Windows, Linux, Mac)

• Notepad++ (gratuito, Windows)

• Brackets (gratuito, Windows, Mac)

• Atom (gratuito, Windows, Linux, Mac)

• Eclipse IDE (gratuito, Windows, Linux, Mac)

6
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Estrutura básica de um documento HTML

7
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Elementos
• Estrutura geral
<nomeDoElemento>Conteúdo</nomeDoElemento>
Tag de abertura Tag de fechamento

• Há elementos sem conteúdo (elementos vazios)

• Sem tag de fechamento
• Por exemplo: <img>, para inserção de imagem
<img/> na XHTML

8
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Elementos
• Estrutura geral de um documento HTML
Não é uma tag HTML,
mas uma instrução
<!DOCTYPE html> especial para indicar
<html> ao navegador qual é a
versão do HTML a ser
<head> utilizada.
<title></title>
</head>
elemento
obrigatório <body>
<p></p>
</body>

</html>

9
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Elementos
• Estrutura geral de um documento HTML
<!DOCTYPE html>
<html>

<head> Contém informações sobre o documento HTML (metadados)

Elementos <title></title> que são de interesse somente do navegador e para outros
obrigatórios </head> serviços da web

<body>
Contém o corpo de um documento HTML, que é exibido pelo
<p></p>
navegador em sua janela, ou seja, o conteúdo do site.
</body>

</html>

10
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML
• O DOM (Document Object Model)
representa os objetos de uma página
Hierarquia de elementos HTML em forma de uma árvore. É a partir
dele que conseguimos acessar os
elementos dentro da página HTML.

html
<!DOCTYPE html>
<html>

<head>
<title>Minha página</title> head body
</head>

<body>
<h1>Primeira página</h1> title h1 p
<p>Olá, mundo!</p>
</body>

</html> “Minha “Primeira “Olá,

página” página” mundo!”

11
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Elementos básicos

<html> Define um documento HTML

<head> Inclui informações sobre o documento
<body> Define o corpo de um documento
Define o título do documento (é o que aparece
<title>
na barra de título do navegador)
<h1> até <h6> Define cabeçalhos 1 a 6
<br> Insere uma quebra de linha
12
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Elementos básicos

<p> Define um parágrafo (nova linha com

espaçamento antes e depois)
<span> Container genérico para conteúdo em linha
Elemento que representa uma divisão de áreas
<div> significativas em um documento utilizado para
agrupar outros elementos em blocos
 Define um comentário

13
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Primeira página HTML

Código HTML

Resultado no navegador

14
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Primeira página HTML (com codificação)

Código HTML

permite
caracteres Resultado no navegador
especiais e
acentuação

15
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML HTML5: chamar a atenção
sem adicionar forte
importância
Elementos de formatação <strong> é usado para indicar
um maior destaque

Por padrão, <b> e <strong>

aparecerão em negrito
<b> Coloca o texto em negrito
<i> Coloca o texto em itálico HTML5: destaque textual para
palavras de outros idiomas,
<u> Coloca o texto sublinhado termos técnicos, taxonomias etc.

<sup> Coloca o texto em superscrito <em> é usado para dar ênfase

<sub> Coloca o texto em subscrito Por padrão, <i> e <em>

aparecerão em itálico
<del> Coloca um risco no meio do texto

16
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Atributos

• São informações de uma tag usadas para personalizá-la, ou

seja, para que ela se comporte da maneira esperada
• Geralmente são constituídos por par do tipo nome=“valor”
(alguns não necessitam de valor explícito)
• Aspas simples ou duplas são aceitas, mas aspas duplas são
mais comuns
• Exemplos:
• id, title, name, class, style <p id=“paragrafo1”></p>
17
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Atributos globais
• id
• Cria um nome de identificação único para o elemento
• Não pode conter espaços
• Deve ser único na página
• title
• Adiciona informação extra ao elemento
• A informação é exibida ao passar o ponteiro do mouse sobre o
elemento
• lang
• Especifica a linguagem/país do conteúdo do elemento
18
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Atributos globais
• class
• Permite referenciar uma classe CSS (veremos esse conceito
nas próximas aulas)

• style
• Permite inserir código CSS embutido diretamente no
elemento

19
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Algumas observações

• Nomes de elementos e atributos não são sensíveis a

letras maiúsculas/minúsculas
• W3C recomenda letras minúsculas
• A tag de fechamento pode ser omitida em alguns casos
• Porém não é recomendado pelo W3C
• A indentação é recomendada
• No Visual Studio Code, pressione SHIFT + ALT + F

20
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Obs: as listas não devem

Listas ser inseridas dentro de
parágrafos <p>

Não ordenada Ordenada

21
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Imagens
Caminho da imagem
(interno ou externo) Descrição da imagem

<img src="logo.png" alt="Logo da Google" width="150" height="100" />

Largura da imagem (em Altura da imagem (em

pixels – número inteiro) pixels – número inteiro)

• Atributo title: informação adicional sobre a imagem apresentada ao passar o ponteiro

do mouse sobre a imagem (tooltip)

22
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Elementos <figure> e <figcaption>

<figure>
<img src="google.png" alt="Logo da Google">
<figcaption>Fig. 1 - Legenda da Figura</figcaption>
</figure>

• A tag figure é utilizada para organizar semanticamente o conteúdo de imagens, vídeos,

áudios ou mesmo gráficos ou tabelas, algoritmos, bloco de códigos no documento HTML
• Imagem exibida com recuo
• Várias imagens podem compartilhar a mesma legenda

23
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Hiperlinks
Endereço de destino

<a href=“www.google.com.br”>Página da Google!</a>

Página da Google! Texto que aparecerá

para o usuário
• Endereço absoluto Use o atributo
• Inclui nome de domínio e protocolo
• Direcionamento para outro website target=“_blank”
para abrir o link em
• Endereço relativo outra aba.
• Sem nome de domínio
• Direcionamento dentro do próprio site
• Preferível sempre que possível (não vincula o site a um nome de domínio)

24
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Hiperlinks relativos

• Link para arquivo da mesma pasta

• <a href="pagina1.html">Página 1</a>

• Link para arquivo em uma subpasta específica

• <a href="pasta/pagina2.html">Página 2</a> .. (“ponto-ponto”)
permite voltar um
nível na hierarquia
• Link para index.html na raiz do projeto de diretórios

• <a href="../index.html">Home</a> (a partir de uma subpasta)

• <a href="/index.html">Home</a> (funciona apenas quando tiver em um
servidor externo)

25
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Imagem como hiperlink

• O conteúdo do elemento <a> não precisa ser textual

• Pode-se ter outros elementos, inclusive o img

• Neste caso, a imagem servirá como link

26
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Hiperlink para trecho do documento HTML

...
<a href="#secao3">(ver Seção 3)</a>
...
<h1 id="secao3">Seção 3</h1>

27
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Organização dos arquivos

• O sistema Web pode conter Pasta raiz do sistema
vários arquivos, de vários tipos
• HTML, CSS, JavaScript, PHP, Subpasta para
imagens (jpg, png, svg, …), arquivos de imagens
documentos (pdf, docx, pptx ...)
etc. Subdivisão para
• É importante organizar as organização de
conteúdo
pastas de forma a separar os relacionado à
arquivos (por tipo, por usuários
funcionalidade, por módulo, ...)

Arquivos HTML na raiz

28
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Dicas sobre caminhos

• Jamais utilize caminhos absolutos
• <img src="c:/minhas imagens/foto.jpg">
• Prefira letras minúsculas ou adote um padrão ao escolher os nomes
• Não utilize espaços e caracteres especiais
• Utilize imagens com tamanho e resolução adequados
• Arquivos de alta resolução diminuídos com width e height
• Download de arquivo grande desnecessariamente
• Utilize um formato de imagem apropriado
• PNG: compactação sem perda de informação
• JPEG: compactação com perda de informação
29
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Atividade 1 (individual)
• Faça uma página para exibir informações básicas do seu currículo.
• A página principal (index.html) deve conter:
• Foto, nome, principais competências, formação acadêmica e experiência
profissional, contato
• Um menu superior com hiperlinks para cada uma das seções
• Utilize ícones (como imagens) gratuitos de https://br.freepik.com/
• Utilize hiperlinks na seção de formação acadêmica e experiência
profissional para apontar para o site das instituições/empresas
• Na seção de contato, utilize dados fictícios

30
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Elementos de bloco e elementos de linha

• Elementos de bloco
• Começam e terminam com uma quebra de linha
• Ocupam, por padrão, toda a largura disponível
• Exemplos: <p>, <h1>, <table>, <ol>, <ul>, <li>, <div>
• Elementos de linha
• Não começam com quebra de linha
• Ocupam somente a largura necessária para sua exibição
• Exemplos: <img>, <a>, <span>, <b>, <em>

31
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Elementos de bloco e elementos de linha

<h1>, <h2> e <p> são exemplos de elementos de bloco. Observe que ele ocupam toda a largura disponível e
começam com quebra de linha. Por outro lado, <a> e <img> são exemplos de elementos de linha. Portanto, podem
ser exibidos um na frente do outro e ocupam apenas o espaço necessário para apresentação de seu conteúdo.
32
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Elementos <div> e <span>

<div>
• Container genérico de nível de bloco
• Utilizado para agrupar outros elementos
• Sem semântica (não agrega significado)
• Usar apenas quando não houver elemento semântico mais apropriado
<span>
• Container genérico de nível de linha
• Sem semântica (não agrega significado)
• Usar apenas quando não houver elemento semântico mais apropriado

33
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Elementos <div> e <span>

<div>

<span>

34
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Conteúdo embutido
• O elemento <iframe> permite embutir o conteúdo de outra página HTML
dentro da página atual
• O conteúdo embutido pode ser, por exemplo, outra página do próprio
website, um vídeo do YouTube ou um mapa do Google Maps
• Atributos comuns no <iframe>
• src indica o endereço da página a ser embutida
• width e height largura e altura do 'quadro' de exibição da página embutida
• allow política de permissões relacionada ao conteúdo de terceiros
Embutido (ativar ou desativar recursos)
• allowfullscreen indica se o quadro poderá ser exibido em tela cheia

35
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Conteúdo embutido - exemplo Política de mesma origem (same-

origin policy) é um mecanismo de
segurança crítico que restringe
como um documento ou script
carregado por uma origem pode
interagir com um recurso de outra
origem. Ajuda a isolar documentos
potencialmente maliciosos.

Código HTML

Visualização

36
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML
Da mesma forma, há o elemento
<audio> para embutir
Conteúdo embutido - vídeo conteúdo de som em um
documento HTML ou XHTML.

• No HTML5, o elemento <video> é utilizado para incorporar conteúdo de

vídeo em um documento HTML ou XHTML
• O atributo src é opcional. Neste caso, o elemento <source> dentro do
bloco do vídeo para especificar o vídeo a ser incorporado

37
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Tabelas
<table> Define uma tabela
<tr> Define uma nova linha na tabela (table row)
<td> Define uma célula padrão dentro de uma linha (table data)
<thead>
Definem seções de cabeçalho, corpo e rodapé na tabela,
<tbody>
respectivamente
<tfoot>
Define uma célula de cabeçalho dentro de uma linha (table
head)
<th> Por padrão o navegador exibe o conteúdo em negrito e
centralizado. Comumente utilizando dentro de <thread>
e <tfoot>.
38
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Tabelas
Código HTML

Visualização

39
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Atributo para Atributo para

Tabelas alterar a largura
da tabela
alterar a cor de
fundo da tabela

<table width="467" border="1px" bgcolor="#CCC">

Atributo para
alterar a
espessura das
bordas

<td height="40" bordercolor="#FF0000">Produto</td>

Atributo para Atributo para Utilizamos código

alterar a altura alterar a cor da hexadecimal ou RGB para
borda representar as cores:
https://www.w3schools.com/
colors/colors_picker.asp

40
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Elementos semânticos de estrutura

<header>
• utilizado para representar o cabeçalho de um documento ou seção
• dentro dela podemos colocar títulos (h1 a h6), imagens, parágrafos e listas
• é possível declarar mais de um elemento <header> por página
<nav>
• utilizado quando precisamos representar um agrupamento de links de navegação
• dentro dela podemos colocar listas e links
<main>
• especifica o conteúdo principal e, consequentemente, de maior relevância dentro da
página
<aside>
• utilizado quando precisamos criar um conteúdo de apoio/adicional ao conteúdo principal
<footer>
• representa um rodapé de um documento

41
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Elementos semânticos de estrutura

<section>
• representa uma seção dentro de um documento (divisão em tópicos, por
exemplo)
• Geralmente possui um títulos (h1 a h6)

<article>
• conteúdo que não precisa de outro para fazer sentido em um documento HTML
• é recomendado identificar cada <article> com um título

42
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Tabelas com cabeçalho, corpo e rodapé

Código HTML

Visualização

43
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Elementos semânticos de estrutura

44
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Metadado para descrição da página

45
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Formulários
<form> Agrupa os campos de um formulário
<input> Define um elemento de entrada de dados
<label> Representa uma legenda para um item
<textarea> Define um input multilinha
<button> Define um botão clicável
<select> Cria uma lista drop-down
<fieldset> Agrupa elementos

46
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Formulários

47
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Elemento <input>
• Usado para criar controles interativos para formulários
baseados na web para receber dados do usuário
• A semântica de um <input> varia consideravelmente
dependendo do valor de seu atributo type

<input type="text" id="ruaInput" name="rua" />

Tipo de controle Nome do elemento para ser

a ser exibido referenciado posteriormente.
Não é necessário ser único.
48
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Principais tipos de input

• text
• Um campo de texto com uma só linha. Quebras de linha são automaticamente
removidas do valor entrado. Use o atributo value para definir seu conteúdo.

• password (caracteres digitados não aparecem)

• Um campo de texto com uma só linha cujo valor é obscurecido.

• checkbox
• Uma caixa de marcação (permite a seleção de múltiplos itens). Use o atributo value
para definir o valor “interno” do item. O atributo checked pré-seleciona o item.

• radio
• Um botão de escolha (permite a seleção de uma única opção). Use o atributo value
para definir o valor “interno” do item. O atributo checked pré-seleciona o item.
Campos do mesmo grupo devem compartilhar o mesmo valor do atributo name.
49
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Principais tipos de input

• button
• Um botão sem comportamento padrão. Use o atributo value para definir seu conteúdo.

• file (seleciona um arquivo com caixa de diálogo)

• Um controle que permite ao usuário selecionar um arquivo. Use o atributoaccept para definir os tipos
de arquivo que o controle pode selecionar.

• number, month e time

• Controle para inserir: um número de ponto flutuante; mês e ano, sem fuso horário; hora, respectivamente.
• No caso da data, o conteúdo “interno” estará no formato YYYY-MM-DD

• hidden (campo escondido)

• Um controle que não é exibido mas cujo valor existe e é enviado ao servidor.

• reset (botão que restaura os valores iniciais do formulário)

50
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Vincular rótulos aos campos

Referencia um campo do
formulário através do
atributo id.

<input type="text" id="nomePessoa" name="nomePessoa">

51
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Outra forma de vincular os rótulos aos campos

• Outra maneira de associar corretamente os rótulos aos campos
é inserir o elemento <input> como conteúdo do elemento
<label>
• Neste caso não é necessário utilizar o atributo for juntamente
com o id
• Porém o atributo name continua sendo fundamental

52
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Elemento <select>
• Permite seleção de um ou vários itens de uma lista suspensa
• Cada opção é inserida com o elemento <option>
• O conteúdo dentro de <option> é apresentado, mas o atributo value que é
conteúdo de fato do campo
• Se necessário, utilize um <label> para referenciar o campo

<select id="estadoSelect" name="estado">

<option value="GO">Goiás</option>
<option value="MG" selected>Minas Gerais</option>
</select>

53
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Elemento <select>
• O atributo selected dentro de <option> pré-seleciona a opção
• O atributo multiple possibilita a seleção de vários itens

<select id="estadoSelect" name="estado" required multiple>

<option value="GO">Goiás</option>
<option value="MG" selected>Minas Gerais</option>
</select>

54
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Elemento <textarea>
• Campo para textos extensos, com múltiplas linhas
• O tamanho inicial pode ser definido com os atributos rows e cols
• O atributo maxlength limita a quantidade de caracteres

<textarea id="bio" name="bio" cols="50" rows="10"></textarea>

55
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Atributos para campos textuais

• minlength e maxlength
• Permitem definir o número mínimo e o número máximo de caracteres permitido
para o campo, respectivamente
• size
• Indica a largura de apresentação de um campo <input> e a altura de um
<select>
• placeholder
• Permite a inserção de uma dica de preenchimento
• A dica é apagada quando o campo é preenchido
• Ex: <input type="text" placeholder="Informe o nome completo">

56
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Outros atributos booleanos

• autofocus
• O campo recebe o foco (cursor) assim que a página é carregada
• readonly
• Torna o campo somente leitura (impossibilita a alteração do valor)
• O campo é submetido normalmente
• disabled
• Desabilita o campo. O usuário não poderá interagir ou editar
• Campos desabilitados não são submetidos com o formulário
• required
• Indica que o campo é de preenchimento obrigatório
• O navegador não envia o formulário sem que o campo seja preenchido
57
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente - HTML

Atividade 2 (individual) – Para entregar Especificação

completa no site
do professor.
Complemente a atividade 1 (slide 30) com os seguintes itens:
• Crie uma nova página (experiencia.html) para exibir detalhes sobre a
experiência profissional do autor do currículo
• Essa nova página deve ser acessada por meio de um hiperlink na página index.html na
seção Experiência Profissional, com o texto “Veja as experiências profissionais em
detalhes”)
• Deve possuir uma tabela e um hiperlink para voltar à página principal
• Crie uma nova página (contato.html) para simular um formulário de contato
• Essa nova página deve ser acessada por meio de um hiperlink na página index.html na
seção Contato, com o texto “Clique aqui para entrar em contato”
• Deve possuir um formulário com os campos: Nome, e-mail, telefone, um campo de
escolha indicar se a pessoa é um recrutador ou não, mensagem e um botão para envio
• Deve possuir um hiperlink para voltar à página principal
58