Portfólio de Tecnologia Web docx

•

ENIAC

0

Rafael Lazaro Palomo

08/11/2021

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 3, do total de 10 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 6, do total de 10 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 9, do total de 10 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Tecnologias Web

6.030 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

...............................................................................................................................
ENGENHARIA DA COMPUTAÇÃO - TECNOLOGIA WEB - HTML 5, CSS E JAVASCRIPT
RAFAEL LAZARO PALOMO - RA 295452020
TECNOLOGIA WEB - HTML 5, CSS E JAVASCRIPT
RESOLUÇÃO DOS DESAFIOS 01, 02 E 03
........................................................................................................................................
Guarulhos
2021
RAFAEL LAZARO PALOMO
TECNOLOGIA WEB - HTML 5, CSS E JAVASCRIPT
RESOLUÇÃO DOS DESAFIOS 01, 02 E 03
Trabalho apresentado ao Curso (Engenharia da Computação) do Centro
Universitário ENIAC para a disciplina Tecnologia Web - Html 5, Css e
Javascript.
Prof. Ricardo Magalhães
Guarulhos
2021
Desafio 1 do Portal
O seu professor de Ferramentas de Desenvolvimento Web lançou os seguintes desafios
para a turma:
1 - Qual é a função do doctype em um documento HTML?
R: O Doctype HTML é uma declaração para informar ao navegador qual é a versão do
HTML utilizada no arquivo. Essa declaração vem antes das tags HTML, portanto, geralmente é
apresentada na primeira linha de um código.
2 - Quais são os oito tipos de doctype que podem ser encontrados nos documentos atuais e a
característica de cada um?
HTML 4.0 – Transitional.
Esse DTD contém todos os elementos e atributos HTML, incluindo elementos de
apresentação e reprovados (como fonte). Assim como nos Strict, Framesets não são permitidos.
Para essa forma, a declaração é feita como no código abaixo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.0 – Strict.
Este DTD contém todos os elementos e atributos HTML, mas não inclui elementos de
apresentação ou depreciados (como fonte). Também não é permitido o uso de Framesets. Para essa
forma, a declaração é feita como no código abaixo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Frameset
Este DTD possui todas as funcionalidades do HTML 4.01 Transitional, mas permite o uso de
Framesets. Para essa forma, a declaração é feita como no código abaixo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 – Transitional.
Esse DTD contém todos os elementos e atributos HTML, inclusive os elementos de
apresentação e depreciados (como fonte). Porém, o uso de Framesets não é permitido. A marcação
também deve ser escrita como XML bem formado. Para essa forma, a declaração é feita como no
código abaixo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
XHTML 1.0 – Strict.
Este DTD contém todos os elementos e atributos HTML, mas não inclui elementos de
apresentação ou depreciados (como fonte). O uso de Framesets também não é permitido. A
marcação também deve ser escrita como XML bem formado. Para essa forma, a declaração é feita
como no código abaixo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
XHTML 1.1.
Esse DTD é igual a XHTML 1.0 Strict, mas permite adicionar módulos. Para essa forma, a
declaração é feita como no código abaixo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
XHTML 1.0 específico para celulares/smartphones.
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
XHTML 1.0 Frameset
Este DTD é igual ao XHTML 1.0 Transitional, porém, este formato permite o uso de
Frameset. Para essa forma, a declaração é feita como no código abaixo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HTML 5.
<!doctype html>
Desafio 2 do Portal
Uma escola contratou você para ajudá-los a colocar em seu site todo o conteúdo que é
trabalhado com os alunos ao longo do ano. Uma das professoras das séries iniciais está trabalhando
as cores com a sua turma e gostaria de organizá-las no site de forma a ficar claro que as cores
classificam-se em três tipos e que, cada um desses tipos, possui cores específicas.
Levando em consideração que em documentos hipertexto, as listas servem para relacionar
itens, normalmente dispostos com marcadores, para facilitar a visualização dos elementos que
pertencem a determinados grupos, ajude a professora criando um documento HTML que apresente
uma lista não ordenada que relacione a classificação das cores (primárias, secundárias e terciárias).
Cada uma dessas listas deve conter uma lista ordenada aninhada, que apresente as respectivas
cores de cada uma, conforme imagem a seguir:
Resposta:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Desafio 2 - Classificação de Cores </title>
</head>
<body>
<h2> <STRONG>CLASSIFICAÇÃO DE CORES</STRONG> </h2>
<ul type="NUMBER">
<h3><li>Cores Primárias</li></h3>
<ol type="1">
<li><font color="Red">Vermelho</font></li>
<li><font color="Blue">Azul</font></li>
<li><font color="Yellow">Amarelo</font></li>
</ol>
</ul>
<ul type="NUMBER">
<h3><li>Cores Secundárias</li></h3>
<ol type="1">
<li><font color="Green">Verde</font></li>
<li><font color="Orange">Laranja</font></li>
<li><font color="Purple">Roxo</font></li>
</ol>
</ul>
<ul type="NUMBER">
<h3><li>Cores Terciárias</li></h3>
<ol type="1">
<li><font color="Orange">Lazanja</font></li>
<li><font color="Olive">Olivia</font></li>
<li><font color="Turquise">Turqueza</font></li>
<li><font color="#3299CC">Celeste</font></li>
<li><font color="#4F2F4F">Violeta</font></li>
<li><font color="#FF6EC7">Rosa</font></li>
</ol>
</ul>
</body>
</html>
Desafio 3 do Portal
Leonardo é aluno da disciplina de Ferramentas de Desenvolvimento Web e está fazendo
uma avaliação final do semestre. A quinta e última questão traz o seguinte contexto:
Você é um desenvolvedor de sites e precisa definir qual tipo de seletor de CSS é usado para
a formatação dos códigos HTML. Lembre-se que, na página a ser criada, várias formatações serão
iguais em vários blocos, com códigos idênticos sendo reutilizados. Justifique o motivo da escolha da
regra.
Resposta:
Seletor descendente: com este seletor, podemos escolher um ou mais elementos que estão
dentro de outro , ou seja, que são descendentes do elemento principal.
Exemplo : p strong.
Com isso, selecionamos apenas tags strong que estão dentro de parágrafos. Podemos
selecionar com ainda mais especificidade, escrevendo mais elementos, como:
div p strong a.
Neste exemplo, selecionamos links que estão dentro d e tags strong que estão dentro de
parágrafos que estão dentro de tags div.
Conclusão
De acordo com meu entendimento nesta matéria do mês de agosto de tecnologia web,
vimos que as principais formas de selecionar elementos html para especificaremos regras de estilo,
com características e comportamento conforme a sintaxe utilizada.
A linguagem html é utilizada na criação e manutenção de sites, através dessa linguagem
podemos acrescentar dados, links, imagens e formulários. No momento que começamos a aprender
a definição de parâmetros para a definição e como aplicar os recursos, a estruturação de um site
através de uma interface adequada e com o padrão correto.