Lista 1

Universidade Federal de Santa Maria - UFSM
Colégio Técnico Industrial de Santa Maria - CTISM

Curso Superior de Tecnologia em Redes de Computadores
Programação para Web
Prof. Juliano F. Kazienko
Lista de Exercícios 1
Nome: Jean Trindade
1. Qual a importância de Tim Berners-Lee para a Web? Quais são seus

componentes fundamentais? Tim Berners-Lee formulou toda a arquitetura
da internet como é hoje, na época o compartilhamento de informações em
uma rede de computador era complexo, visto que diferentes plataformas
projetavam e desenvolviam seus próprios sistemas, como Tim Berners-Lee
precisava constantemente acessar dados em lugares remotos visto que
trabalhava com desenvolvimento de software para pesquisa nuclear,
quando outros pesquisadores tentavam acessar informações de Tim eles
precisavam ir pessoalmente, Tim então percebeu uma dificuldade no
compartilhamento de informações e projetou um sistema chamado “Word
Wide Web”, o qual basicamente é composta por uma linguagem de
marcação de hiper-texto (HTML), uma URL (Uniform Resource Locator), um
endereço que localiza um servidor na rede, um protocolo (HTTP) o qual
possibilita o transporte desses hiper-textos, um servidor capaz de
armazenar essas informações e por fim um aplicativo o qual interpreta e
exibe esses hiper textos em forma de informações legíveis aos usuários.
2. A linguagem HTML é especificada por qual entidade? Fale sobre tal

entidade.
A W3C( World Wide Web Consortium) é a entidade que mantém o HTML em
funcionamento provendo atualizações, além disso projeta e desenvolve
padrões para a Word Wide Web. A W3C consiste num conjunto de
organizações e membros que trabalham liderados pelo criador da web Tim
Berners-Lee, segundo a própria W3C sua missão é liderar a Web em todo
seu potencial.
3. Cite pelo menos 3 características da linguagem JavaScript e explique-

as.
A linguagem javascript possibilita inserir uma sintaxe lógica no escopo de
uma página HTML, javascript permite a interação com o usuário através de
instruções internas que permitem identificar ações do usuário na página e
assim modificar a página HTML. JavaScript permite ainda programar uma
página web por meio de operadores aritméticos, laços de repetição,
operadores condicionais, possibilitando uma expansão das fronteiras do
HTML.
4. Desenvolva em JavaScript uma função para o cálculo do fatorial. Mostre
a solução na forma de JavaScript interno e externo.
Script interno:
<script type="text/javascript">
fuction fatorial(n){
if(n == 0)
return 1;
for(var fat = 1; n > 1; n = n - 1)
fat = fat * n;
return fat;
}
</script>
Para um script externo um arquivo contém as funções JavaScript e pode ser
inserido na página HTML por meio:
<script script type="text/javascript" src="fat.js"></script>
Arquivo fat.js:
fuction fatorial(n){
if(n == 0)
return 1;
for(var fat = 1; n > 1; n = n - 1)
fat = fat * n;
return fat;
}
5. Considere o trecho HTML abaixo. Como podemos tornar esta página,

que é a sua Home Page na Web, mais fácil de ser encontrada na Internet?
Dê exemplos (codifique) na linguagem HTML de como isso seria possível.
<html>
<head>
<title>Site do Fulano de Tal</title>
</head> <body> <h1>Bem-vindo ao meu Site!</h1>
<p>Fulano nasceu em 1985 na cidade de <i>Santa Maria</i> ...</p>

</body>
</html>
Poderia ser adicionado a tag meta que permite que motores de busca
localizem determinadas páginas com base em seu assunto. Ex:
<meta name=”Fulano de Tal” content= “Fulano, Tal” />
6. Qual é a diferença entre HTML e CSS? De quais formas podemos usar
(codificar) CSS junto ao HTML? Dê exemplos. HTML é uma linguagem de
marcação, usada para criar a estrutura da página, no entanto como a
computação evolui e a concorrência entre as empesas também, surgiu as
ferramentas que modelam a página html, uma dessas ferramentas é o CSS
(Cascading Style Sheets) ou folha de estilo em cascata é uma linguagem de
estilo utilizada para estilizar a página html torná-la mais apresentável para
o usuário, muito utilizada por empresas de marketing em geral para
chamar a atenção de seus clientes.
Por exemplo para codificar a seguinte div com tag id:
<div id=”di”></div>
Podemos criar um arquivo .css o qual conterá uma configuração como essa:
#di{
background: teal;
background-position: 10px 100px;
color: aqua;
width: 400px;
height: 300px;
}
Estamos estilizando a div colocando uma cor de fundo e definindo seu
tamanho.
Para div com identificação de tag class:
<div class=”di”></div>
.di{
background: teal;
background-position: 10px 100px;
color: aqua;
width: 400px;
height: 300px;
}
7. Codifique um formulário HTML com os campos nome, idade e profissão.

Consista esses campos usando JavaScript quando necessário. Algumas
validações simples são factíveis via HTML. O campo nome deve conter
algum caractere. Apresente uma mensagem na tela se a idade estiver fora
da faixa entre 18 e 60 anos. A profissão deve ser uma das seguintes:
“Diretor”, “Gerente”, “Supervisor” ou “Operário”.
8. O que é o DOM? Como podemos utilizá-lo para obter acesso aos

elementos HTML?
O DOM (Document Object Model) é uma interface que representa como os
documentos HTML em forma de uma árvore hierárquica. O browser faz a
leitura do documento HTML e cria uma estrutura e define como essa
estrutura pode ser acessada. Cada elemento dentro do escopo da página
HTML pode ser acessado pelo seu ID, um exemplo é o método:
document.getElementById(‘’);
Que retorna todos os dados do elemento especificado dentro dos
parenteses, a partir do objeto document dentro da página HTML.
9. O que são frameworks? Como eles podem auxiliar no processo de

desenvolvimento de aplicações Web? Discorra sobre frameworks.
Framework é uma abstração que provê uma funcionalidade que é comum
em uma aplicação web. Como é genérico o acesso a banco de dados,
definição de um site responsivo, validação de formulários, e etc. Os
frameworks ajudam nesse sentido, pois oferecem uma aplicação ou código
pronto que é comum às páginas. Os frameworks poupam tempo no
desenvolvimento de aplicações web dinâmicas pois oferecem um conjunto
de códigos prontos sem precisar reescrever tudo novamente.
7. Arquivo CSS cs.css:

#formulario {
position: relative;
width: 500px;
height: 400px;
left: 500px;
top: 150px;
}
form {
display: block;
overflow: auto;
width: 200px;
padding: 0px;
}
div+div {
margin-top: 1em;
}
#lb1 {
position: relative;
left: 685px;
top: 286px;
background: white;
color: white;
}
#lb2 {
position: relative;
left: 685px;
top: 308px;
background: white;
color: white;
}
7. Arquivo HTML index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Formulário</title>
<link rel="stylesheet" type="text/css" href="cs.css" />
<script type="text/javascript" src="scr.js"></script>
</head>
<body>
<div id="lb1">
<label id="label1">Digite uma idade entre 18 ou 60 anos</label>
</div>
<div id="lb2">
<label id="label2">Digite uma profissão: Supervisor, Gerente ou Operário</label>
</div>
<div id="formulario">
<form action="" method="post">

<div>
<label for="name" title="Digite Seu Nome">Nome:</label>
<input type="text" id="name" autocomplete="off" placeholder="Digite Seu nome" />
</div>
<div>
<label for="idade" title="Digite Sua Idade">Idade:</label>

<input type="number" id="idade" autocomplete="off" placeholder="Digite Sua Idade"
onblur="validitid(idade.value)" />
</div>
<div>
<label for="profission" title="Digite Sua Profissão" class="pro">Profissão:</label>

<input type="text" id="profission" placeholder="Digite Sua Profissão"
autocomplete="off" onblur="validitpro(profission.value)" />
</div>
<div>
<button>Enviar</button>
</div>
</div>
</form>
</body>
</html>
7. Arquivo em javascript scr.js:
function validitid(idade) {
var id = document.getElementById("idade");
if (idade < 18 || idade > 60) {
id.style.background = "red";
id = document.getElementById("label1");
id.style.color = "red";
else {
id.style.background = "white";
id.style.color = "white";
}
}
function validitpro(profissao) {
var id = document.getElementById("profission");
if (profissao == "Supervisor" || profissao == "Gerente" || profissao == "Operário") {
id.style.background = "white";
id.style.color = "white";
}
else {
id.style.background = "red";
id.style.color = "red";
}

Lista 1

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Lista 1

Загружено:

Авторское право:

Доступные форматы

Universidade Federal de Santa Maria - UFSM

Colégio Técnico Industrial de Santa Maria - CTISM

1. Qual a importância de Tim Berners-Lee para a Web? Quais são seus

2. A linguagem HTML é especificada por qual entidade? Fale sobre tal

3. Cite pelo menos 3 características da linguagem JavaScript e explique-

5. Considere o trecho HTML abaixo. Como podemos tornar esta página,

<p>Fulano nasceu em 1985 na cidade de <i>Santa Maria</i> ...</p>

7. Codifique um formulário HTML com os campos nome, idade e profissão.

8. O que é o DOM? Como podemos utilizá-lo para obter acesso aos

9. O que são frameworks? Como eles podem auxiliar no processo de

7. Arquivo CSS cs.css:

<form action="" method="post">

<label for="idade" title="Digite Sua Idade">Idade:</label>

<label for="profission" title="Digite Sua Profissão" class="pro">Profissão:</label>

Вам также может понравиться