ATPS - Ferramentas para Sistemas Web.

FACULDADE ANHANGUERA-FACNET
Bacharel em Sistemas de informao

Professor: Fernando Gonalves de Oliveira
Ferramenta para Sistema Web
1 Semestre
Noturno
Almir Filho Lima Costa

Paulo Henrique Rosa dos Santos
Rodrigo Alison Paes Ferreira
Robert Cerqueira de Oliveira
William da Silva Sales
RA: 1565257930
RA: 1578972355
RA: 1590856389
RA: 1596852846
RA: 1570206706
Atividades Prticas Supervisionadas

ETAPA 1
Taguatinga, DF
Abril de 2015
Introduo
Neste trabalho, realizado em grupo a construo de Site para a Empresa ESCTEC BRASIL
MOVEIS, utilizamos nesta primeira etapa HTML e CSS, esse trabalho tem como objetivo
passar para os colegas ou para qualquer pessoa que estiver lendo o conhecendo que obtemos
com esse trabalho. Apresentaremos ao longo do trabalho trs pontos que so HTML e CSS,
HTML5 imagens e cdigos do que foi solicitado na ATPS deste trabalho.
Relatrio 01 HTML e CSS

1.1 HTML e CSS
HTML
HTML significa Hyper Text Markup Language e a linguagem de marcao de Hipertexto,
ou seja, e a linguagem de como so escritas a pgina da web, interpretadas pelo navegador.
As informaes esto ligadas na forma de pginas ligadas entre si. A pgina vai ser transferida
de um computador remoto para o usurio, onde o browser vai fazer o trabalho de interpretar
os cdigos naquele documento e mostrar a pgina que o usurio deve v.A Web est
estruturada em dois princpios bsicos:HTTP que significa (Hiper Text Transfer Protocol) o
HTML (Hiper Text Markup Language).
HTTP o protocolo de transferncia de hipertexto, ou seja, o protocolo que permite a
navegao na Web, com o simples clicar do mouse sobre o texto (ou imagem) que esteja
associado a outro link
Requisitos para o desenvolvimento de uma pgina WEB
Existem trs requisitos bsicos para o desenvolvimento de uma pgina WEB que devemos
conhecer para desenvolver uma pgina da WEB que so eles:
1.Conhecer a linguagem HTML para escrever o cdigo fonte de sua pgina;
2.Editor de texto para gerar o seu cdigo fonte (bloco de notas, Front Page,Dremweaver,
Notbeeans, Notepad entre outros);
3. Um navegador de internet (browser) para visualizar as suas pginas (Internet Explorer,
Netscape, Mozila e Google Crhome entre outros).
TAGs
Os comandos HTML so chamados de TAGs, compreendem de marcas padres que so
utilizadas para fazer indicaes a um browser.
Assim como em outras linguagens, os comandos tm uma sintaxe prpria, e seguem algumas
regras:
As TAGs aparecem sempre entre sinais de menor que (<) e maior que (>);
Geralmente so utilizadas aos pares, sendo que a TAG de finalizao deum comando qualquer
seja finalizada com a precedncia de uma barra (/).
Exemplos:
TAG nico:
<br>
TAG duplo:
<center> xxx </center>
Iniciando um documento em HTML
Todo o documento HTML fica contido entre os TAGS: <HTML> e </HTML>. Uma pgina
HTML possui trs partes bsicas: estrutura principal, um cabealho e um corpo de pgina.
Possui uma estrutura dividida em 4 TAGs bsicas:
<HTML> ... </HTML>
<HEAD> ... </HEAD>
<TITLE> ... </TITLE>
<BODY> ... </BODY>
HTML-So usados para delimitar os comandos HTML, indicam o incio e o fim de um
documento.
HEAD-Usado para indicar parmetros de configurao do documento, tambm para exibir o
ttulo na barra de ttulos do browser.
TITLE- Indica o ttulo do documento para o browser. Esta TAG deve estar sempre dentro das
TAGs <HEAD></HEAD>.
BODY- Envolvem a seo de corpo do documento. Aqui fica o contedo principal da Home
Page.
CSS
CSS a mesma coisa que Style Sheets e que Folhas de Estilo. Voc j deve ter visto esses
nomes em vrios lugares. CSS mais uma forma de aperfeioar seus documentos, o CSS tem
muitos tipos de definio aqui veremos muitas delas.
O CSS formata a informao entregue pelo HTML. Essa informao pode ser qualquer
Coisa: imagem,texto,vdeo,udioou qualquer outro elemento criado.Grave isso: CSS formata
a informao. Essa formatao na maioria das vezes visual, mas no necessariamente. No
CSS Aural, ns manipulamos o udio entregue ao visitantepelo sistema de leitura de tela.
Com o CSS que ns conhecemos podemos formatar algumas caractersticas bsicas:cores,
background, caractersticas de font, margins, paddings, posio e controlamos de uma
maneira muitoartesanal e simples a estrutura do site com a propriedade float.Com o CSS ele
nos ajudar em vrios aspectos como por exemplo economizar o tempo, Diminuir o tamanho
do cdigo de sua pgina, a pgina ir carregar mais rapidamente, ter mais facilidades de
manter e fazer alteraes na pgina e ter mais controle no layout da pgina.
SELETORES COMPLEXOS
A propriedade a caracterstica que voc deseja modificar no elemento. O valor o valor

referente a esta caracterstica. Se voc quer modificar a cor do texto, o valor um
Hexadecimal, RGBA ou at mesmo o nome da cor por extenso. At aqui, nada diferente.
Muitas vezes voc no precisa aprender do que se trata a propriedade, basta saber que existe e
se quiser decorar, decore. Propriedades so criadas todos os dias e no um ato de herosmo
voc saber todas as propriedades do CSS e seus respectivos valores.
Os seletores so a alma do CSS e voc precisa domin-los. com os seletores que voc ir
escolher um determinado elemento dentro todos os outros elementos do site para format-lo.
Boa parte da inteligncia do CSS est em saber utilizar os seletores de uma maneira eficaz,
escalvel e inteligente.
O seletor representa uma estrutura. Essa estrutura usada como uma condio para
determinar quais elementos de um grupo de elementos sero formatados. Seletores
encadeados e seletores agrupados so a base do CSS. Voc os aprende por osmose durante o
dia a dia. Para voc lembrar o que so seletores encadeados e agrupados segue um exemplo.
Exemplo de seletor encadeado:
div p strong a {
color: red;}
Este seletor formata o link (a), que est dentro de um strong, que est dentro de P e que por
sua vez est dentro de um DIV.
Exemplo de seletor agrupado:
strong, em, span {
color: red;
}
Voc agrupa elementos separados por vrgula para que herdem a mesma formatao.
Estes seletores so para cobrir suas necessidades bsicas de formatao de elementos. Eles
fazem o simples. O que vai fazer voc trabalhar menos, escrever menos cdigo CSS e tambm
menos cdigo Javascript so os seletores complexos.
Como criar estilos em CSS
Cada estilo que voc cria definido como uma regra CSS. Cada regra deve utilizar a seguinte
sintaxe:
Elemento {atributo1: valor; atributo2: valor ...}
Explicao desta sintaxe:
Elemento - descreve o elemento de design ao qual o estilo ser aplicado. A mesma tag HTML
mas, sem os sinais de maior e menor. Essa parte da regra s vezes chamada de seletor.
Atributo - o aspecto especfico do elemento que voc quer usar como estilo. Deve ser um
nome de atributo CSS vlido, como o atributo font-size.
Valor - a configurao aplicada ao atributo. Deve ser uma configurao vlida para o atributo
em questo, como 20pt (20 pontos) para font-size.
Atributo: valor - parte declarao da regra. Voc pode atribuir mltiplas declaraes se
desejar separ-los com ponto-e-vrgula (;). No coloque um ponto-e-vrgula depois da ltima
declarao.
Tipos de Folhas de Estilo
Voc pode definir regras de CSS em trs lugares. E, por definio, pode utilizar uma
combinao dos trs mtodos nos seus web sites. A maneira como as regras interagem entre si
est relacionada parte "em cascata. Os trs lugares so:
1) em um documento separado fora de todos os documentos HTML;
2) no cabealho de um documento HTML e,
3) dentro de uma tag de HTML. Cada um destes mtodos tem um nome e afeta as pginas
HTML em seu site de um modo diferente.
Externo - Externo significa que voc coloca as regras de CSS em um arquivo separado, e
ento sua pgina HTML pode fazer um link para esse arquivo. Essa abordagem lhe permite
definir regras em um ou mais arquivos que podem ser aplicadas em alguma pgina da sua web
site.
Incorporado - Incorporado significa que voc especifica as regras de CSS no cabealho do
documento. As regras incorporadas afetam somente a pgina atual.
Inline-Significa que voc especifica as regras de CSS dentro da tag de HTMLEssas regras
afetam somente a tag atual.
Atalhos do CSS
Alguns atributos de CSS lhe permitem fazer diversas configuraes em uma declarao. Por
exemplo, suponha que voc queira definir diversos aspectos da fonte utilizada para tags H1,
como segue:
H1 {
font-style: italic;
font-weight: bold;
font-size: 18pt;
font-family: 'Times Roman'}
A sintaxe do CSS simples:Seletor {
Propriedade: valor;}
1.2 Website
HTML5
O HTML5 a nova verso do HTML4. Enquanto o WHATWG define as regras de marcao
que usaremos no HTML5 e no XHTML, eles tambm definem APIs que formaro a base da
arquitetura web. Essas APIs so conhecidas como DOM Level 0.
Um dos principais objetivos do HTML5 facilitar a manipulao do elemento possibilitando
o desenvolvedor a modificar as caractersticas dos objetos de forma no intrusiva e de
maneira que seja transparente para o usurio final.
Ao contrrio das verses anteriores, o HTML5 fornece ferramentas para a CSS e o Javascript
fazerem seu trabalho da melhor maneira possvel. O HTML5 permite por meio de suas APIs a
manipulao das caractersticas destes elementos, de forma que o website ou a aplicao
continue levee funcional.
O HTML5 modifica a forma de como escrevemos cdigo e organizamos a informao na
pgina.Seria mais semntica com menos cdigo. Seria mais interatividade sem a necessidade
de instalao de plugins e perda de performance. a criao de cdigo interopervel, pronto
para futuros dispositivos e que facilita a reutilizao da informao de diversas formas. O
HTML5 est sendo criado para que seja compatvel com os browsers recentes, possibilitando
a utilizao das novas caractersticas imediatamente.
O HTML5 e suas mudanas
Quando o HTML4 foi lanado, o W3C alertou os desenvolvedores sobre algumas boas
prticas que deveriam ser seguidas ao produzir cdigos client-side. Desde este tempo,
assuntos como a separao da estrutura do cdigo com a formatao e princpios de
acessibilidade foram trazidos para discusses e ateno dos fabricantes e desenvolvedores.
Desenvolvido originalmente por Tim Berners-Lee o HTML ganhou popularidade quando o
Mosaic - browser desenvolvido por Marc Andreessen na dcada de 1990 - ganhou fora. A
partir da, desenvolvedores e fabricantes de browsers utilizaram o HTML como base,
compartilhando as mesmas convenes.
1.3 Website
De acordo com o que foi pedido no Passo 3 da ATPS, para Criar as pginas A empresa,
Misso, Viso e Valores para a ESCTEC utilizando HTML e CSS, u tilizamos aqui um
arquivo chamado index.html com os seguintes cdigos apresentados logo abaixo:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<title>ESCTEC Brasil</title>
<meta http-equiv="content-language" content="pt-br">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="author" content="ESCTEC">
<meta name="description" content="ESCTEC">
<meta name="keywords" content="sites, web, desenvolvimento,html, css">

<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/submenu.css">
<link rel="shortcut icon" href="img/icon.jpg" type="image/x-icon">
</head>
<body>
<div class="container">
<img src="img/topo.jpg" alt="Logo Esctec Brasil"/>


<div class="menu">
<ul class="menu-top"/ul>
<li><a href="#">HOME</a></li>
<li><a href="#">A EMPRESA</a>
<ul>
<li><a href="misso.html">Misso</a></li>
<li><a href="viso.html">Viso</a></li>
<li><a href="valor.html">Valor</a></li>
</ul>
</li>
</div>
</body>
</html>
Para criar as abas Misso, Viso e Valores foram criados trs arquivos diferentes com os
nomes de misso.html, viso.html e valores.html todos eles vinculados ao arquivo
index.html com os seguintes cdigos:
<li><a href="misso.html">Misso</a></li>
<li><a href="viso.html">Viso</a></li>
Sendo assim, as trs abas ficaram como Sub Menu da aba A Empresa. Criamos um efeito
para quando o cliente passar mouse sobre a aba A Empresa aparecer as aba misso, viso e
valores, confira as imagens:
Aqui sem passar o mouse sobre A EMPRESA.
Aqui desce as abas quando passamos o mouse sobre A EMPRESA
Para criar esse efeito foi criado dois arquivos CSS com os nomes de layout.css e
submenu.css, com os seguintes cdigos:
Layout.css - Cdigo
body{
background: #E5E5E5;
margin: 0;
padding: 0;
font-family: Tahoma, arial,verdana;
font-size: 13px;
color: #000;
}
a{ text-decoration: none; color: #000;}
ul{
list-style: none;
margin: 0;
padding: 0;
}
.container{
margin: 0 auto;
width: 750px;
height: auto;
}
/* Menu */
.menu{
background: #CCC;
width: 751px;
height: 35px;
margin: 1px 0 0 0;
padding: 0;
box-shadow: 1px 1px 3px #888888;

-moz-box-shadow: 1px 1px 3px #888888;
-webkit-box-shadow: 1px 1px 3px #888888;
border-radius: 2px;
}
.menu li{
display: inline;
}
.menu-top li a{
width: 50px;
height: 15px;
padding: 8px 40px;

float: left;
text-shadow: 0px 2px 3px #666;
}
.menu-top li a:hover{
background: #393939;
color: #fff;
border-bottom: solid 4px #FF8C00;
border-radius: 2px;
text-shadow:1px 0px 1px #fff;
}
Submenu.css - Cdigo
/* Documento Css */
.menu{
background: #CCC;
width: 751px;
height: 35px;
margin: 1px 0 0 0;
padding: 0;
box-shadow: 1px 1px 3px #888888;

-moz-box-shadow: 1px 1px 3px #888888;
-webkit-box-shadow: 1px 1px 3px #888888;
border-radius: 2px;
}
.menu li{
display: inline;
}
.menu li{
position:relative;
float:left;
border-right: 0px solid #DCDCDC;
padding-left:10px;
padding-right: 10px;
background-color: #CCC;
height:28px;
line-height: 25px;
}
.menu li ul {
position: absolute;
top:37px;
left: 8px;
display: none;
}
.menu li:hover ul, .menu li ul li:hover ul, .menu li.over ul, .menu li ul li.over ul
{ display: block;
}
.menu li ul li{
border: 1px solid #696969;
display:block;
width: 110px;
height:25px;
line-height: 10px;
}
Depois de criarmos com muita dedicao o menu A EMPRESA no estilo drop drown,
partimos para a edio dos arquivos misso.html, viso.html e valores.html e de acordo com o
pedido na parte 4 da ATPS vamos apresentar as imagens e cdigos de cada uma logo abaixo:
Misso.html
Clicando sobre a aba Misso de acordo com a imagem abaixo:
O Cliente direcionado a pgina Misso que apresenta o texto descrito na imagem baiaxo:
O cdigo usado para criar essa pgina foi:

Misso.html - Cdigo
<html>
<head>


</head>
<body>
<img src="img/topo.jpg" alt="Logo Esctec Brasil"/>


<div class="menu">
<li><a href="#">HOME</a></li>
<ul>
<li><a href="#">Missao</a></li>
<li><a href="#">Visao</a></li>
<li><a href="#">Valor</a></li>
</ul>
</li>
</div>
</body>
</html>
Viso.html
Clicando sobre a aba Viso de acordo com a imagem abaixo:
O Cliente direcionado a pgina Viso que apresenta o texto descrito na imagem baiaxo:
Viso.html - Cdigo
<html>
<head>



</head>
<body>
<img src="img/topo.jpg" alt="Controle Xbox 360" />


<div class="menu">
<li><a href="index.html">HOME</a></li>
<ul>
<li><a href="misso.html">Missao</a></li>
<li><a href="viso.html">Visao</a></li>
</ul>
</li>
</div>
</body>
</html>
Valor.html
Clicando sobre a aba valor de acordo com a imagem abaixo:
O Cliente direcionado a pgina Valor que apresenta o texto descrito na imagem abaixo:
Valor.html Cdigo

<html>
<head>



</head>
<body>
<img src="img/topo.jpg" alt="Controle Xbox 360" />


<div class="menu">
<li><a href="index.html">HOME</a></li>
<ul>
<li><a href="misso.html">Missao</a></li>
<li><a href="viso.html">Visao</a></li>
</ul>
</li>
</div>
</body>
</html>
Concluso:
Este trabalho foi fundamental para aprimorar nossos conhecimentos em HTML e CSS, com
certeza o grupo que fez este trabalho nunca mais vai esquecer o que HTML e CSS sabemos
o quanto empolgante trabalhar com essas ferramentas e buscando conhecimento seremos um
programador de sucesso. Finalizamos aqui a nossa ETAPA 1 ATPS - Ferramentas para
Sistemas Web.

ATPS - Ferramentas para Sistemas Web.

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

ATPS - Ferramentas para Sistemas Web.

Caricato da

Copyright:

Formati disponibili

FACULDADE ANHANGUERA-FACNET

Bacharel em Sistemas de informao

Almir Filho Lima Costa

Atividades Prticas Supervisionadas

Relatrio 01 HTML e CSS

A propriedade a caracterstica que voc deseja modificar no elemento. O valor o valor

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<meta http-equiv="content-language" content="pt-br">

Aqui sem passar o mouse sobre A EMPRESA.

Aqui desce as abas quando passamos o mouse sobre A EMPRESA

a{ text-decoration: none; color: #000;}

box-shadow: 1px 1px 3px #888888;

padding: 8px 40px;

box-shadow: 1px 1px 3px #888888;

O cdigo usado para criar essa pgina foi:

<meta http-equiv="content-language" content="pt-br">

<link rel="stylesheet" type="text/css" href="css/layout.css">

<link rel="shortcut icon" href="img/icon.jpg" type="image/x-icon">

<img src="img/topo.jpg" alt="Logo Esctec Brasil"/>

<meta http-equiv="content-language" content="pt-br">

<meta name="description" content="ESCTEC">

<link rel="shortcut icon" href="img/icon.jpg" type="image/x-icon">

<img src="img/topo.jpg" alt="Controle Xbox 360" />

Clicando sobre a aba valor de acordo com a imagem abaixo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<meta http-equiv="content-language" content="pt-br">

<meta name="description" content="ESCTEC">

<link rel="shortcut icon" href="img/icon.jpg" type="image/x-icon">

<img src="img/topo.jpg" alt="Controle Xbox 360" />

Potrebbero piacerti anche