Ar-condicionado na WEB

Curso de Tecnologia em Sistemas de Computação
AD1 – : Construção de Páginas na WEB

1º semestre de 2023. Data 21/03/2023
Aluno: Francisco Eduardo Alves Torres
Matricula: 23113050240
1)
Arquivo HTML:
<html>
<head> <img src=”imagens/ResfGlobLogoDeitado.png” align=”left”/>
<hr=”490” align=”left”/>
<base target= “_blank”/></head>
<body bgcolor= “#4488AA” text=”#99EEEE” link=”#FFFFFF” vlink=”#99EEEE”>
<table width=”99%”>
<tr><td colspan=”2”>
<div align=”right”>
<fonf face=”verdana, ubuntu” size=”-1”>
<address>Av. Novaya Zemlya, 1870<br/>
Tel: (21) 98765-4321<br/>
<a href=”mailto:contato@ refriglob.com.br”>
contato@refriglob.com.br</a></address>
</font></div>
<font face=’lucida bright,liberation” color=”#99EEEE”>
<br/><hr widht=”370” align=”left” size=”3” noshade />
</font>
</td></tr>
<tr><td width=”180” valign=”top”><br/>
font face=”verdana,ubuntu” color=”#99EEEE”>
<ul type=”circle”>
<li><a href=”2_RefriGlobal.html”>Apresentação</a></li><br/>
<li><a href=”3_Tipos.html”>Tipos</a></li><br/>
<li><a href=”4_Estoque.html”>Estoque</a></li><br/>
<li><a href=”5_Cadastro.html”>Cadastro</a></li><br/>
<li><a href=”6_Compras.html”>Compras</a></li></ul>
</font> </td>
<td><div align=”center”>
<font face=”lucida bright,liberation”>
<p><br/>Pare de sentir calor!
<br/>Sinta o clima da idade do gelo aderindo ao</p>
<p><img src=”imagens/ResfGlobLogo.png” hspace=”15”/></p>
<p>Encontre aqui o ar-condicionado
<br/>ideal para sua casa.</p>
</font></div></td></tr>
</table></body></html>
2)
<!DOCTYPE html>
<html><head>
<link class=”imgLogo” src=”imagens/ResfGlobLogoDeitado.png” />
</head>
<body>
<header>
<address class=”ender”>
Av. Novaya Zemlya, 1870<br/>
Tel: (21) 98765-4321<br/>
<a href=”mailto:contato@refriglob.com.br”>
</header>
<nav>
<ul><li><a href=”2_RefriGlobal.html”>Apresentação</a></li>
<li><a href=”3_Tipos.html”>Tipos</a></li>
<li><a href=”4_Estoque.html”>Estoque</a></li>
<li><a href=”5_Cadastro.html”>Cadastro</a></li>
<li><a href=”6_Compras.html”>Compras</a></li>
</ul>
</nav>
<section>
<div class=”apres” >
<p>Pare de sentir calor!
<br/>Sinta o clima da idade do gelo aderindo ao</p>
<p><img src=”imagens/ResfGlobLogo.png” hspace=”15”/></p>
<p>Encontre aqui o ar-condicionado
<br/>ideal para sua casa.</p>
</div>
</section>
</body>
</html>
Arquivo CSS:
/* Estilo Geral
*/
Body {
color: #99EEEE;
font-size: 16px;
background-color: #4488AA;
font-family: stoke, lucida bright, liberation;
}
a: link {color: #FFFFFF; text-decoration: none;}

a: visited {color: #99EEEE; text-decoration: none;}
ul {line-height: 230%
/* Estilo Seções
*/
header {
display: block;
margin-bottom: 1px;
}
nav {
display: block;
width: 20%;
float: left;
}
section {
display: block;
width: 70%;
float: right;
}
/* Estilo Header
*/
.ender {
float: right;
text-align: right;
font-size: 15px;
line-height: 140%;
font-family: karla, verdana, ubuntu;
}
img.imgLogo {
padding-bottom: 15px;
border-bottom: 3px solid;
margin-bottom:6px;
color: #FFFFFF;
}
/* Estilo Nav
*/
nav ul {
color: #FFFFFF;
margin-top: 40px;
list-style-type: circle;
font-size: 20px;
font-family: karla, verdana, ubuntu;
}
/* Estilo Seção Apresentação

*/
div.apres {
text-align: center;
font-size: 18px;
}
Obs: Na imagem de modelo não visualizei a imagem BrilhoMark, por isso não usei.
3)
Arquivo HTML:
<!DOCTYPE html>
<html><head>
<link class=”imgLogo” src=”imagens/ResfGlobLogoDeitado.png” />
</head>
<body>
<header>
<address class=”ender”>
Av. Novaya Zemlya, 1870<br/>
Tel: (21) 98765-4321<br/>
<a href=”mailto:contato@refriglob.com.br”>
</header>
<nav>
<ul><li><a href=”2_RefriGlobal.html”>Apresentação</a></li>
<li><a href=”3_Tipos.html”>Tipos</a></li>
<li><a href=”4_Estoque.html”>Estoque</a></li>
<li><a href=”5_Cadastro.html”>Cadastro</a></li>
<li><a href=”6_Compras.html”>Compras</a></li>
</ul>
</nav>
<section>
<h3>Como escolher um ar-condicionado?</h3>
<ol class=”listaTipos”>
<li>Tipos
<ul>
<li>de Parede</li>
<li>Spliter</li>
<li>Portátil</li>
</ul></li>
<li>Capacidade</li>
</ol>
<table class=”tabInfo”>
<tr><th class=”linTH”>Área</th>
<th class=”linTH”>Incidência do Sol</th>
<th class=”linTH”>Manhã</th>
<th class=”linTH”>Tarde</th></tr>
<tr><th rowspan=”4” class=”colTH”>
<th>9 m²</th>
<td>7500 BTUs</td>
<td>9000BTUs</td></tr>
<th>12 m²</th>
<td>9000 BTUs</td>
<th>25 m²</th>
<td>12000 BTUs</td>
<th>50 m²</th>
<td>21000 BTUs</td>
</table>
<br/>
</section>
Arquivo CSS:
/* Estilo Seção
*/
listaTipos {
color: #FFFFFF;
padding: 10px 10p, 10px 5px;
line-height: 180%;
}
.tabInfo {
color: #000066;
margin-top: 6px;
border-collapse: colapse;
background-color: #FFFFFF;
font-family: “karla, verdana, ubuntu”;
font-size: 15px;
}
.listaTipos ul {
color: #336699;
padding: 6px 12px 6px 12px;
border: solid;
}
. tabInfo td, .tabInfo th {

border: 3px solid #226699;
padding: 6px 12px 6px 12px;
}
.tabInfo .linTH {
color: #FFFFFF;
background-color: #22BB66;
vertical-align: middle;
text-align: center;
}
4)
Arquivo HTML:
<html>
<head> <img src=”imagens/ResfGlobLogoDeitado.png” align=”left”/>
<hr=”490” align=”left”/>
<base target= “_blank”/></head>
<body bgcolor= “#4488AA” text=”#99EEEE” link=”#FFFFFF” vlink=”#99EEEE”>
<table width=”99%”>
<tr><td colspan=”2”>
<div align=”right”>
<fonf face=”verdana, ubuntu” size=”-1”>
<address>Av. Novaya Zemlya, 1870<br/>
Tel: (21) 98765-4321<br/>
<a href=”mailto:contato@ refriglob.com.br”>
</font></div>
<font face=’lucida bright,liberation” color=”#99EEEE”>
<br/><hr widht=”370” align=”left” size=”3” noshade />
</font>
</td></tr>
<tr><td width=”180” valign=”top”><br/>
font face=”verdana,ubuntu” color=”#99EEEE”>
<ul type=”circle”>
<li><a href=”2_RefriGlobal.html”>Apresentação</a></li><br/>
<li><a href=”3_Tipos.html”>Tipos</a></li><br/>
<li><a href=”4_Estoque.html”>Estoque</a></li><br/>
<li><a href=”5_Cadastro.html”>Cadastro</a></li><br/>
<li><a href=”6_Compras.html”>Compras</a></li></ul>
</font> </td>
<section>
<table class=”tabInfo”>
<tr><th colspan=”5” class=”listaTipos”>Estoque</th></tr>
<tr><th class=”linTH”>Marca</th>
<th class=”linTH”>Foto</th>
<th class=”linTH”>Capacidade</th>
<th class=”linTH”>Tipo</th>
<th class=”linTH”>Preço</th>
Springer</th>
<td class=”imgar”><img class=”imgar”
Src=”imagens/SpringerSplit1200.jpg”/></td>
<td>12000</td>
<td>Split</td>
<td class=”preco”>R$ 1.680,00</td></tr>
Src=”imagens/Springerparede1200.jpg”/></td>
<td>12000</td>
<td>Parede</td>

Consul</th>
Src=”imagens/ConsulParede7500.jpg”/></td>
<td>7500</td>
<td>Parede</td>

Elgin</th>
Src=”imagens/ElginPortátil.jpg”/></td>
<td>9000</td>
<td>Portátil</td>
Acréscimos ao arquivo CSS:
.tabInfo .colTH {
color: #FFFFFF;
background-color: #0066DD;
text-align: left;
}
.tabInfo {
color: #CC0000;
}
5)

Ar-condicionado na WEB

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Ar-condicionado na WEB

Enviado por

Direitos autorais:

Formatos disponíveis

Curso de Tecnologia em Sistemas de Computação

AD1 – : Construção de Páginas na WEB

a: link {color: #FFFFFF; text-decoration: none;}

/* Estilo Seção Apresentação

. tabInfo td, .tabInfo th {

<tr><th rowspan=”1” class=”colTH”>

<tr><th rowspan=”1” class=”colTH”>

Acréscimos ao arquivo CSS:

Você também pode gostar