Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
AP1 de Práticas de Programação em sistemas Web
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
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
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
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
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
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
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
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
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
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
Compartilhar
Prévia do material em texto
UNIVERSIDADE UNIGRANRIO
REDES DE COMPUTADORES
TRABALHO AP1 DE PRÁTICAS DE PROGRAMAÇÃO EM
SISTEMAS WEB
PALHOÇA, 2020
SUMÁRIO
1 INTRODUÇÃO 2
2 DESENVOLVIMENTO 3
3 CONCLUSÃO 22
REFERÊNCIAS 23
1 INTRODUÇÃO
Contextualização
Depois da criação da Internet, o HTML, CSS e Javascript, cada vez mais, vem ganhando destaque em empresas de desenvolvimento Web. Isto porque o número de páginas que exigem estas tecnologias, vem crescido vertiginosamente e, com isto, também a procura por profissionais capacitados para este tipo de desenvolvimento.
Proposta de Trabalho
Suponha que você foi contratado por uma empresa de desenvolvimento de sites. Sua tarefa é desenvolver as questões abaixo:
2 DESENVOLVIMENTO
Questão 1: Criar uma página, chamada principal.html:
1 - Imagem, desevolvimento da página principal.html
Script HTML, da página principal.html
<!DOCTYPE html>
<html>
<head>
<title>principal.html</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos.css"/>
</head>
<style>
body {
background-image: url(fundo01.jpg);
background-attachment: fixed;
background-size: 85%;
background-repeat: no-repeat;
background-color: white;
background-position: center;
}
</style>
<body>
<div id="wrap">
<header>
<center>
<h4>
<a href="principal.html"title="Home" id="link02" >Home</a>
<a href="formulario.html" title="Formulário" id="link02">Formulário</a>
<a href="aboutme.html" title="Aboutme" id="link02" >AboutMe</a>
<a href="principal.html" title="Aboutme" id="link02" >Termos de uso</a>
<a href="principal.html" title="Aboutme" id="link02" >Serviços</a>
<a href="principal.html" title="Aboutme" id="link02" >Jogos</a>
</h4>
</center>
</header>
<section>
<div>
<center>
<h1 id="texto01">HOME / História HTML</h1>
</center>
</div>
</section>
<article>
<div id="texto03"><h2><p><strong>Tim Berners-Lee</strong></h2>
</div>
<div id="texto04"><br><p>(físico britânico) criou o HTML original (e outros protocolos associados como o HTTP) em uma estação NeXTcube usando o ambientede desenvolvimento NeXTSTEP. Na época a linguagem não era uma especificação, mas uma coleção de ferramentas para resolver um problema de Tim: a comunicação e disseminação das pesquisas entre ele e seu grupo de colegas. Sua solução, combinada com a então emergente internet pública (que tornar-se-ia a Internet) ganhou atenção mundial.</p>
</div>
<div id="texto04"><p>As primeiras versões do HTML foram definidas com regras sintáticas flexíveis, o que ajudou aqueles sem familiaridade com a publicação na Web. Através do tempo, a utilização de ferramentas para autoria de HTML aumentou, assim como a tendência em tornar a sintaxe cada vez mais rígida. Apesar disso, por questões históricas (retrocompatibilidade), os navegadores ainda hoje conseguem interpretar páginas web que estão longe de ser um código HTML válido.</p>
</div>
<a href="aboutme.html" title="Aboutme" id="link01">Visite HTML AboutME! </a>
</article>
</div>
<footer>
<center>
Curso de Redes de Computadores - André de Abreu Gonçalves - Agosto 2020
</center>
</footer>
</div>
</body>
</html>
Questão 3: Criar uma página, chamada formulário.html:
2 - Imagem, desenvolvimento da página formulário.html
Script HTML, da página formulário.html
<!DOCTYPE html>
<html>
<head>
<title>Formulario.hmtl</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<style>
body {
background-image: url(fundo01.jpg);
background-attachment: fixed;
background-size: 85%;
background-repeat: no-repeat;
background-color: white;
background-position: center;
}
</style>
<body>
<div id="wrap">
<center>
<h4><a href="principal.html" title="Home" id="link02">Home</a>
<a href="formulario.html" title="Formulário" id="link02">Formulário</a>
<a href="aboutme.html" title="Aboutme" id="link02">AboutMe</a>
<a href="principal.html" title="Aboutme" id="link02">Termos de uso</a>
<a href="principal.html" title="Aboutme" id="link02">Serviços</a>
<a href="principal.html" title="Aboutme" id="link02">Jogos</a> </h4>
<section>
<h1 id="texto01">Formulário</h1>
</center>
</section>
<article>
<form class="formulario" method="post">
<p> Envie uma mensagem preenchendo o formulário abaixo</p>
<div class="field">
<label for="nome">Seu Nome: </label>
<input type="text" id="nome" name="nome" placeholder="Digite seu nome*" required>
</div>
<div class="field">
<label for="telefone">Seu Telefone:</label>
<input type="text" id="telefone" name="telefone" placeholder="Digite seu Telefone">
</div>
<div class="field">
<label for="email">Seu E-Mail: </label>
<input type="email" id="email" name="email" placeholder="Digite seu E-Mail*" required>
</div>
<div class="field">
<label for="mensagem">Sua mensagem:</label>
<textarea name="mensagem" id="mensagem" placeholder="Mensagem*" required></textarea>
</div>
<input type="submit" name="acao" value="Enviar">
</form>
</article>
<footer>
<center>
Curso de Redes de Computadores - André de Abreu Gonçalves - Agosto 2020
</center>
</footer>
</body>
</html>
Questão 2: Criar uma página, chamada aboutme.html:
3 - Imagem, desenvolvimento da página Aboutme.html
Script HTML, da página AboutMe.html
<!DOCTYPE html>
<html>
<head>
<title>aboutme.html</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css"href="estilos.css" />
</head>
<body>
<div id="wrap">
<center>
<h4><a href="principal.html" title="Home" id="link02">Home</a>
<a href="formulario.html" title="Formulário" id="link02">Formulário</a>
<a href="aboutme.html" title="Aboutme" id="link02">AboutMe</a>
<a href="principal.html" title="Aboutme" id="link02">Termos de uso</a>
<a href="principal.html" title="Aboutme" id="link02">Serviços</a>
<a href="principal.html" title="Aboutme" id="link02">Jogos</a> </h4>
<section>
<h1 id="texto01">Sobre HTML</h1>
</center>
</section>
<article>
<div id="texto04"><p><strong>HTML (Linguagem de Marcação de HiperTexto)</strong> é o bloco de construção mais básico da web. Define o significado e a estrutura do conteúdo da web. Outras tecnologias além do HTML geralmente são usadas para descrever a aparência/apresentação (CSS) ou a funcionalidade/comportamento (JavaScript) de uma página da web.</p></div>
<div id="texto04"><p>"Hipertexto" refere-se aos links que conectam páginas da Web entre si, seja dentro de um único site ou entre sites. Links são um aspecto fundamental da web. Ao carregar conteúdo na Internet e vinculá-lo a páginas criadas por outras pessoas, você se torna um participante ativo na world wide web.</p>
</div>
<div id="texto04"><p><strong>CSS é chamado de linguagem Cascading Style Sheet</strong> e é usado para estilizar elementos escritos em uma linguagem de marcação como HTML. O CSS separa o conteúdo da representação visual do site. Pense na decoração da sua página. Utilizando o CSS é possível alterar a cor do texto e do fundo, fonte e espaçamento entre parágrafos. Também pode criar tabelas, usar variações de layouts, ajustar imagens para suas respectivas telas e assim por diante.</p>
<div id="texto04"><p>CSS foi desenvolvido pelo W3C (World Wide Web Consortium) em 1996, por uma razão bem simples. O HTML não foi projetado para ter tags que ajudariam a formatar a página. Você deveria apenas escrever a marcação para o site.</p>
<div>
<img src="html.jpg" alt="html" width="203" height="200" id="landscape">
</div>
</article>
<footer>
<center>
Curso de Redes de Computadores - André de Abreu Gonçalves - Agosto 2020
</center>
</footer>
</body>
</html>
Script HTML, do estilo.css aplicado a página
h1 {
color: black;font-family: sans-serif;
}
h4 {
color: rgb(169, 215, 171);
font-family: sans-serif;
}
#link02 {
color: rgb(76, 164, 213);
font-family: sans-serif;
font-size:18px;
}
#link01 {
background-color: rgb(11, 117, 78);
border-radius:auto;
font-family: sans-serif;
font-size:25px;
}
body
#wrap {
width: 900px;
margin: auto;
}
article p{
padding: 10px 0px;
}
#texto02 {background-color: rgb(11, 117, 78);}
a {
color: black;
text-decoration: none;
font-size:18px;
} }
p {font-family: sans-serif;}
#texto03 {
width: auto;
height: 10px;
}
#texto01 {
width: auto;
height: 50px;
}
#texto04
{ width: 500px;
height: auto;
}
footer {
width: 500px;
position: absolute;
top: 650px;
left: 30%;
}
.formulario{
width: 400px;
padding: 30px;
border:1px solid #ccc;
}
.formulario p{
width: 100%;
font-size: 1.5em;
}
.field{
width: 100%;
margin: 15px 0;
}
.field label, .field span{
padding-left: 10px;
font-size: 1.1em;
display: block;
width: 100%;
}
.radiobox label{
width: auto;
display: inline-block;
}
input[type=text], input[type=email], textarea{
width: 100%;
padding-left: 10px;
height: 30px;
line-height: 30px;
border-radius: 15px;
border: 1px solid #ccc;
outline: none;
}
input#nao{
margin-left: 30px;
}
#landscape {
width: 250px;
position: absolute;
top: 140px;
left: 750px;
}
3 CONCLUSÃO
O trabalho aqui apresentado, segue a estrutura básica em HTML, e definição do documento (doctype), Cabeça (head) e Corpo (body). As páginas apresentadas nas imagens 1, 2 e 3, ambas estão linkadas no meu principal, conforme a script HTML.
Foi adicionando a script estilo.css, com a formatação da página para que fique mais apresentável, além de textos, rodapé, e imagens de fundo.
REFERÊNCIAS
20Materiais relacionados
Perguntas relacionadas
Compartilhar