Fundamentos WEB – Turma INF131
Professor Marcelo Simas Mattos
Exercícios
1) Crie uma página com os seguintes dados:
a) Título da página: Fundamentos da web – Meu site (entre <title> e </title>);
b) Coloque uma tag <h1> para o texto “Estou aprendendo HTML”;
c) Coloque 1 parágrafo com 4 linhas no documento (digite um texto para isso). Aplique a tag <div>
com alinhamento justificado (use CSS - style=“text-align:justify;”;
d) Coloque outro parágrafo com 6 linhas. Aplique a tag <p> alinhamento à direita.
e) No item (d) acrescente a tag <br> no final da terceira linha;
f) Acrescente a tag <hr> antes e depois do texto “Estou aprendendo HTML”;
2) Crie uma página com os seguintes dados:
a) Título: Poema;
b) Coloque uma tag <h1> para o texto “Poema”;
c) Copie um poema de 4 parágrafos para o documento;
d) Aplique a tag <div> nos 4 parágrafos do documento;
e) Use a tag <p> para alinhar cada parágrafo com as distintas informações: à esquerda, à direita, centralizado e justificado (use CSS para isso);
f) Coloque a tag <br> duas vezes entre cada parágrafo;
g) Coloque a tag <hr> antes do primeiro parágrafo e depois do 4 parágrafo.
3) Crie uma página com o título Listas no HTML.
a) Use a tag <h1> no texto “Listas do HTML”.
b) Crie uma lista ordenada <ol> com os seguintes itens: Flamengo, Vasco, Botafogo, Fluminense;
c) Crie uma lista não ordenada <ul> para os itens: maçã, banana, laranja, uva e melão;
d) Crie uma lista numerada <ol> com type romano para os itens: Cabo Frio, Arraial do Cabo, Saquarema, Rio das Ostras, São Pedro da Aldeia;
e) Crie uma lista definida <dt> tendo como títulos as regiões do Brasil. Para cada região colocar os nomes dos estados e suas respectivas capitais;
f) Crie uma lista de definição <dt> com os itens: Brasil, Itália, França. Faça uma descrição do país para cada item da lista com no mínimo uma linha.
4) Codifique em HTML a página como apresentado na Figura 1, faça os alinhamentos necessários, as formatações nos textos e considere que as imagens estão no tamanho proporcional ao apresentado na figura a seguir. Considere, também:
A imagem do livro “Use a Cabeça: Programação em HTML5” está nomeada como: usecab.jpg.
A imagem do livro “Programação Profissional em HTML5” está nomeada como: progprof.jpg.
Figura 1
Página 1 de 2
5) Faça os hiperlinks pedidos associando-os adequadamente. Use a imagem da Figura 2 como referência.
a)Hiperlinks para as questões 1 e 2 de uma prova.
b)Um hiperlink para a apostila.
c)Um hiperlink para o arquivo HTML chamado “linux.html" no texto “Distribuições Linux”.
Considere:
O arquivo desta página está nomeado como index.html.
O hiperlink para Questão 1 deve direcionar a navegação para uma página nomeada como: q1.html.
O hiperlink para Questão 2 deve direcionar a navegação para uma página nomeada como: q2.html.
O hiperlink para Apostila deve direcionar a navegação para um arquivo nomeado
“apostilaHTML5.pdf” que está dentro da pasta “apostilas” no mesmo diretório de index.html.
Figura 2
6) Faça a codificação completa para criar uma página em HTML (Figura 3) que contenha um link na imagem fornecida (logotipo do IFRJ) que direcione para o sítio do IFRJ (http://portal.ifrj.edu.br). A página deverá ser codificada conforme exibido na imagem a seguir:
Informação a considerar: o nome do arquivo da imagem é “Logo_IFRJ_ARRAIAL_DO_CABO.jpg”.
Figura 3
7)
O elemento âncora “<a>..</a>” é usado para a navegação em páginas HTML. Associe as colunas correspondentes à sua codificação.
(a) Tag <a> ( ) Arquivo de imagem acrescentada como link.
(b) href=”url” ( ) Âncora de hipertexto e imagem . (c) Id=”texto” ( ) Método para identificar um fragmento (d) src=”url” ( ) Localização do arquivo alvo.
8)
A tag <img> possui propriedades que formata uma imagem na página web. Relacione a primeira coluna com a segunda.
(a) src=”url” ( ) Localiza o arquivo de imagem a ser exibido (b) alt=”texto” ( ) Altura da imagem
(c) width=”número” ( ) Largura da imagem
(d) height=”número” ( ) Texto alternativo sobre a imagem
