Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
ATIVIDADE PRATICA 2021 - FERRAMENTA DE DESENVOLVIMENTO WEB -PD
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
CENTRO UNIVERSITÁRIO INTERNACIONAL UNINTER
ESCOLA SUPERIOR POLITÉCNICA
CURSO
FERRAMENTAS DE DESENVOLVIMENTO WEB
ATIVIDADE PRÁTICA
MARGARETE KLAMAS, ESP
SÃO PAULO
2021
1
1. Estrutura de pastas do projeto
(COLOCAR IMAGEM)
2. COLOCAR NOME DOS ARQUI-
VOS
[arquivo]app.component.css
*{margin: 0; padding: 0;box-sizing: border-box;}
.content{ display:flex; margin: auto;}
.rTable{ width: 100%; text-align: center;}
.rTable thead{background: black;font-weight: bold; color: white;}
.rTable tbody tr:nth-child(2n) {background: #ccc;}
.rTable th , .rTable td{padding: 7px;}
@media screen and (max-width: 480px;){
.content{width: 94%;}
.rTable thead{display: none;}
.rTable tbody td{display: flex; flex-direction: column;}
}
@media only screen and (min-width: 1200px;){
.content {width: 100%;}
.rTable tbody tr td:nth-child(1){width: 10%;}
.rTable tbody tr td:nth-child(1){width: 30%;}
.rTable tbody tr td:nth-child(1){width: 20%;}
.rTable tbody tr td:nth-child(1){width: 25%;}
.rTable tbody tr td:nth-child(1){width: 15%;}
}
img {
border-radius: 0%; align-items: flex-center;
}
.centro{
background-color: red;
width: 300px ;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
[arquivo]app.component.html
<!DOCTYPE html>
<html lang="pt.br">
<head>
<!--boostrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/boo-
tstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZME-
CAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/boo-
tstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFN-
jaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--texto exibido na aba do navegador-->
<title>Trabalho Uninter 2021</title>
<style type="text/css">
<!--formatação da pagina-->
body { position: relative; background-color: rgba(253, 247, 247,
0.767);}
<!--formatação da tabela que recebe meu array-->
.especial {font: bold; background-color: rgb(173, 241, 219); border:
1px solid #f00;}
body ,head{
position:relative;
width: 960px; ;
margin: auto;
}
</style>
</head>
<!--<img src="/assets/logo.png" alt="img"> tentei colocar uma imagem mais
não apareceu no navegador-->
<body>
<!--titulo da pagina-->
<img src="/assets/uninter-logo.png" height="95" width="250"
alt="img">
<h1>TRABALHO UNINTER </h1>
<p class="especial">Ferramenta de Desenvolvimento web
Atividade Prática</p>
<div class="content"></div>
<table class="rTable"> <!-- Aqui usamos width para alterar a lar-
gura da tabela e border para definir uma borda à tabela -->
<thead>
<tr>
<th >ALUNO</th>
<th>RU</th>
<th>CURSOS</th>
<th>DATA DE NASCIMENTO</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let people of data">
<td>{{people.Name}}</td>
<td>{{people.RUS}}</td>
<td>{{people.CURSOS}}</td>
<td>{{people.DN}}</td>
</tr>
</tbody>
</table>
<div></div>
</body>
</html>
[arquivo] app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'ATIVIDADE-PRATICA-UNINTER';
data: Array<any>;constructor(){
this.data = [
{ Name: 'ANDRE SOUSA', RUS: ' 1194161 ', CURSOS: 'ANÁLISE E DESEN-
VOLVIMENTO DE SISTEMAS', DN:'03.08.1985' },
{ Name: 'RENATO SANTOS', RUS: '1193458', CURSOS: 'GESTÃO DA TECNOLOGIA
DA INFORMAÇÃO', DN:'10.12.1991' },
{ Name: 'REGINA ANDRADE', RUS: '1191891', CURSOS: 'ENFERMAGEM',
DN:'12.05.2011' },
{ Name: 'DOUGLAS SANTOS ', RUS: '1194769', CURSOS: 'GESTÃO DA PRODU-
ÇÃO', DN:'02.04.1998' },
{ Name: 'ADRIANA DIAS ', RUS: '1194162', CURSOS: 'EDUCAÇÃO FISICA',
DN:'13.10.2015' }
];
}
}
....
3. COLOCAR IMAGEM DO CÓDIGO
EM EXECUÇÃO
Continue navegando
Materiais relacionados
7 pág.
24 pág.
Perguntas relacionadas
Compartilhar