Anlise e Desenvolvimento de Sistemas

AUTOR
ARTHUR TOMAZ PONTES

TELECINE MOZER:
Tpico em desenvolvimento de sistemas; Metodologia cientfica; Lgica
e tcnicas de programao; Processo de negcios e Software.

Patos
2014

AUTOR
ARTHUR TOMAZ PONTES

TELECINE MOZER:
Tpico em desenvolvimento de sistemas; Metodologia cientfica; Lgica
e tcnicas de programao; Processo de negcios e Software.

Trabalho interdisciplinar para o curso de

Anlise e Desenvolvimento de Sistemas da
Universidade Norte do Paran - UNOPAR

Professores:
Merris Mozer
Reinaldo Nishikawa
Anderson Macedo
Marco Hisatomi

Patos
2014

SUMRIO

- INTRODUO ...............................................................................................4

- Objetivo........................................................................................................5

Desenvolvimento .......................................................................................6

3.1
3.2

O que um documento html? Como so chamados os documentos em html?.......... 6

Como melhorar a aparncia de um documento? ........................................................ 7

3.2.1 Alinhamento......................................................................................................8
3.2.2 Margem.............................................................................................................8
3.2.3 Tamanhos de caracteres ..................................................................................9
3.2.4 Cores diferentes ...............................................................................................9
3.3

Como inserir imagens?............................................................................................... 9

3.3.1 Borda ...............................................................................................................9

3.3.2 Texto alternativo ...............................................................................................9
3.3.3 Dimenses......................................................................................................10
3.3.4 Area

.............................................................................................................10

3.3.5 Atributos..........................................................................................................10
3.4

Como inserir som? ................................................................................................... 13

3.4.1 Atributos..........................................................................................................13
3.5
3.6
3.7
3.8

Como inserir tabelas?............................................................................................... 13

Como inserir links de navegao?............................................................................ 16
Como inserir vdeos?................................................................................................ 16
Organograma ........................................................................................................... 18

- Concluso.....................................................................................................19

- Referncia ....................................................................................................20

1 - INTRODUO

Nesta dissertao iremos falar sobre os principais conceitos de

HTML, facilitando tambm a compreenso dos leitores sobre como
melhorar a aparncia do documento HTML, como inserir imagens, vdeos,
tabelas e links, e tambm iremos organizar um organograma para facilitar
a coordenao da empresa Telecine Mozer, mesma que necessita de
avanos tecnolgicos para controlar os filmes disponveis que podero ser
locados, o ingresso dos clientes que esto devidamente em dia com a
instituio, mensalidade, e as senhas que disponibilizada aos clientes
mensalmente de acordo com o pagamento.

2 - OBJETIVO

Explicar de melhor forma os conceitos fundamentais de HTML, e

tambm desenvolver um diagrama que possa ajudar na organizao da
empresa Telecine Mozer, para assim acatar melhor seus clientes. A fim de
consentir suas deficincias tecnolgicas e fazer com que ela se desenvolva
no mercado, e que a mesma tenha xito nos servios prestados, passando
confiabilidade, tendo assim mais conceito na concorrncia.

DESENVOLVIMENTO

3.1
O que um documento html? Como so chamados os documentos em
html?

HTML (HyperText Markup Language - Linguagem de Marcao de

Hipertexto) a uma linguagem avaliada como o embasamento de todas
as outras linguagens de desenvolvimento de projetos para WEB.
Com essa linguagem podemos partilhar fotos, vdeos, msicas,
textos e fazer muitas coisas. A mesma foi criada com a viso de que todos
os dispositivos deveriam ser capazes de usar informaes da Web.
Um documento HTML principia com a marca <HTML> e termina
com a marca </HTML>. Contm ao mesmo tempo uma rubrica que
descreve o ttulo da pgina, seguidamente um corpo no qual se descobre
o contedo da pgina.
A rubrica demarcada pelas balizas <HEAD> e </HEAD>. O corpo
delimitado pelas balizas <BODY> e </BODY>.
Exemplo de uma pgina HTML:
<HTML>
<HEAD>
<TITLE>Titulo da Pagina</TITLE>
</HEAD>
<BODY>Contedo da pagina </BODY>
</HTML>

Declarao do tipo de documento

aconselhado sugerir na pgina HTML o prlogo do tipo de

documento, isto , uma referncia norma HTML utilizada, para

especificar o standard utilizado para a codificao da pgina. Esta
declarao faz-se com uma linha do tipo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>...</HEAD>
<BODY>...</BODY>
</HTML>

A declarao do documento indica a DTD (Document Type

Definition) foi aproveitada, quer dizer, a referncia das caractersticas da
linguagem utilizada.
3.2

Como melhorar a aparncia de um documento?

Ao contrrio dos processadores de texto, a linguagem HTML no foi

criada

para

controlar

aparncia

dos

documentos. O

HTML

apenas informa ao navegador o que so os elementos que esto na

pgina, quais arquivos (imagens, sons) eles contm e onde eles esto.
(Por exemplo, certo trecho identificado como o ttulo principal do
documento e outro trecho como um link).
Essa descrio feita por meio de comandos, os tags, marcas
especiais que determinam o papel de cada elemento dentro do texto e que
permitem ao browser interpretar e exibir a pgina conforme ela foi
concebida por seu autor (a).
Com o tempo a linguagem foi evoluindo com a introduo de novos

tags e novos atributos de estilo. O HTML passou a exercer uma dupla

funo em relao ao contedo: exibir e estilizar, ou seja, dar-lhe a
aparncia visual.
Entretanto, a linguagem HTML esttica, mas pode ser dinamizada
por outras linguagens como:
Java script e CSS: so do tipo "client side", ou seja, so
interpretadas pelo browser no computador do cibernauta, ou PHP, asp,
Java: so interpretadas pelos servidores web.
Com as tags bsica citadas no assunto 3.1 acima citado, j
possvel criar pginas Web. Logo podemos notar que deixam muito a
desejar em seu aspecto, vamos melhorar um pouco a aparncia do
documento.
3.2.1 Alinhamento
A primeira providncia para melhorar a aparncia da pgina
modificar o alinhamento do texto.
Exemplo:
<H1 ALIGN=CENTER>Ttulo</H1>
<P ALIGN=CENTER>Este um pargrafo centralizado.</P>
OBS: Para alinhar o determinado texto a esquerda usa-se left, j
para alinhar a direita usa-se right.
3.2.2 Margem
Outro controle sobre o alinhamento dos elementos da pgina pode
ser conseguido atravs da mudana de margem. O par de tags
<BLOCKQUOTE> e </BLOCKQUOTE> serve para aumentar a margem. O
efeito dessas tag pode ser acumulado para conseguir margens maiores.

Veja os exemplos:
<BLOCKQUOTE>Texto com mais margem</BLOCKQUOTE>
<BLOCKQUOTE><BLOCKQUOTE>Texto com mais margem
ainda</BLOCKQUOTE></BLOCKQUOTE>
3.2.3 Tamanhos de caracteres
Alguns navegadores aceitam a modificao do tamanho do texto
atravs do atributo SIZE do tag <FONT>.
<FONT SIZE=7>Texto</FONT>
3.2.4 Cores diferentes
Alguns navegadores tambm aceitam modificar a cor padro do
texto e do fundo da janela do documento. Essa definio feita em
atributos do tag <BODY>. Os atributos so BGCOLOR e TEXT.
<BODY BGCOLOR=FFFFFF TEXT=000000>
3.3

Como inserir imagens?

Agora que j explicamos como fazer um documento hipertexto,

podemos finalmente incluir imagens nessa pgina Web. Para inserir uma
imagem basta indicar o nome do arquivo dentro do tag <IMG>.
Aqui voc v uma imagem:
<P> <IMG SRC=imagem.gif> Note que a imagem...<P>
3.3.1 Borda
possvel colocar uma borda em volta da imagem. O atributo
BORDER. O valor da borda expresso em pixels.

Aqui voc v uma imagem:

<P> <IMG SRC=imagens/imagem.gif BORDER=2> Note que a
imagem...<P>
3.3.2 Texto alternativo
<IMG SRC=imagem.gif ALT=nome_da_imagem>
3.3.3 Dimenses
<IMG SRC=imagem.gif width=310 height=220>.
3.3.4 Area
Define uma rea sensvel do mapa clicvel processado no cliente.
Deve ser usado junto com o tag<MAP> e o atributo de imagem
USEMAP=#mapa.

Exemplo:
<MAP NAME=MAPA>
<AREA SHAPE=CIRC COORDS=74,76,96,121 HREF=CIRCULO.HTM>
<AREA SHAPE=RECT COORDS=270,123,179,32
HREF=QUADRADO.HTM>
<AREA SHAPE=POLY COORDS=375,27,428,124,321,124,375,27
HREF=TRIANGUL.HTM>
</MAP>
<IMG SRC=mapa.gif USEMAP=#mapa>

3.3.5 Atributos
SHAPE = formato: define o formato da regio sensvel do mapa
processado no cliente. Sendo que formato uma das opes a seguir.
SHAPE=RECT: indica que a regio um retngulo.
SHAPE=CIRCLE: indica que a regio um crculo.
SHAPE=POLY: indica que a regio um polgono.

Exemplo:
<MAP NAME=MAPA>
<AREA SHAPE=CIRC COORDS=74,76,96,121 HREF=CIRCULO.HTM>
<AREA SHAPE=RECT COORDS=270,123,179,32
HREF=QUADRADO.HTM>
<AREA SHAPE=POLY COORDS=375,27,428,124,321,124,375,27
HREF=TRIANGUL.HTM>
</MAP>
<IMG SRC=mapa.gif USEMAP=#mapa>

COORDS=x,y:

define as coordenadas da regio sensvel. Sendo

que x e y so valores em pixels que marcam a coordenada de um ponto

na imagem. E x ponto do eixo horizontal, enquanto y o ponto do eixo
vertical. Uma rea sensvel formada por vrias coordenadas. Quando o
formato da rea for SHAPE=RECT (retngulo), h dois pares de x e y. O

primeiro indica o canto superior esquerdo do retngulo e o segundo, o

canto

inferior

direito.

Quando

formato

for

SHAPE=CIRC,

coordenada do centro do crculo e a do raio. Quando o formato for

SHAPE=POLY, existem pares de x e y para cada um dos pontos que
formam a rea.
Exemplo:
<MAP NAME=MAPA>
<AREA SHAPE=CIRC COORDS=74,76,96,121 HREF=CIRCULO.HTM>
<AREA SHAPE=RECT COORDS=270,123,179,32 HREF=QUADRADO.HTM>
<AREA SHAPE=POLY COORDS=375,27,428,124,321,124,375,27
HREF=TRIANGUL.HTM>
</MAP>
<IMG SRC=mapa.gif USEMAP=#mapa>

HREF=URL: indica a URL deve ser carregada quando a rea

determinada da imagem for clicada. Sendo URL o endereo que deve ser
carregado quando a rea determinada da imagem for clicada. A URL pode
ser um endereo completo ou apenas o nome de um arquivo que est
armazenado no mesmo computador.

Exemplo:
<MAP NAME=MAPA>
<AREA SHAPE=CIRC COORDS=74,76,96,121 HREF=CIRCULO.HTM>
<AREA SHAPE=RECT COORDS=270,123,179,32 HREF=QUADRADO.HTM>

<AREA SHAPE=POLY COORDS=375,27,428,124,321,124,375,27

HREF=TRIANGUL.HTM>
</MAP>
<IMG SRC=mapa.gif USEMAP=#mapa>
Ou
Exemplo:
<MAP NAME=MAPA>
<AREA SHAPE=CIRC COORDS=74,76,96,121
HREF=http://www.xyz.com/abc/abc.html>

3.4

Como inserir som?

<BGSOUND>: Carrega um arquivo de udio como trilha sonora da

pgina.
Exemplo:
<BGSOUND SRC=som. Wav>
3.4.1 Atributos
SRC=som. Wav: define o nome do arquivo de udio a ser
carregado Sendo que som.wav

o nome do arquivo a ser carregado.

Aceita os formatos. WAV, AU. E .MID.

Exemplo: <BGSOUND SRC=som. Wav>

LOOP=n:

definem

quantas

vezes

arquivo

de

udio

ser

executado. Sendo que n o nmero de vezes que o arquivo de udio ser

executado. Se n for igual a 1 ou a INFINITE, o arquivo ser executado
infinitamente.
Exemplo: <BGSOUND SRC=som.wav LOOP=INFINITE>
3.5

Como inserir tabelas?

<TABLE> e </TABLE>: Marca o incio e o fim de uma tabela.

Exemplo:
<TABLE>
<TR>
<TD>Texto</TD>
<TD>Texto</TD>
</TR>
</TABLE>

3.5.1 Atributos
BORDER=n: define a borda da tabela. Sendo que n o valor em
pixels da borda.
Exemplo:
<TABLE BORDER=1>
<TR>

<TD>Texto</TD>
<TD>Texto</TD>
</TR>
</TABLE>
BORDERCOLOR=#nnnnnn: define a cor principal da borda.
Exemplo:
<TABLE BORDER=1 BORDERCOLOR=#FF0000>
<TR>
<TD>Texto</TD>
<TD>Texto</TD>
</TR>
</TABLE>

BORDERCOLORLIGHT=#nnnnnn: define a cor da sombra mais

clara da borda.
Exemplo:
<TABLE BORDER=1 BORDERCOLOR=#FF0000
BORDERCOLORLIGHT=#FFFFFF>
<TR>
<TD>Texto</TD>
<TD>Texto</TD>

</TR>
</TABLE>

BORDERCOLORDARK=#nnnnnn: define a cor da sombra mais

escura da borda.
Exemplo:
<TABLE BORDER=1 BORDERCOLOR=#FF0000
BORDERCOLORLIGHT=#FFFFFF
BORDERCOLORDARK=#000000>
<TR>
<TD>Texto</TD>
<TD>Texto</TD>
</TR>
</TABLE>
3.6

Como inserir links de navegao?

Para inserir um link em HTML, necessitamos utilizar a tag em par

<a> derivada da palavra (anchor = ncora), que possui um elemento
referente sua abertura onde so inseridos os atributos e outra referente
ao seu fechamento. Abaixo, segue a sintaxe geral para a insero de links
em HTML:
<a href="url"> DESCRIO DO LINK </a>
Onde:

href: o atributo principal da tag anchor, usado para indicar a

localizao do arquivo de destino ao qual o link se refere. O valor "url"
representado acima dever ser substitudo pelo endereo
(protocolo://www.servidor.sigla.pas/caminho/nome_do_arquivo) no qual
deseja referenciar.
Descrio do link: Esta descrio ser apresentada na pgina com
destaque.

3.7

Como inserir vdeos?

Colocar vdeo ou udio hospedado em um diretrio para rodar no site:

Aps fazer o Upload do vdeo para a hospedagem, inclua no seu cdigo as
linhas abaixo:
No caso de um arquivo de vdeo:
<embed
src="http://nomedodominio.com/diretorio/NOME_ARQUIVO.XXX"></em
bed>
Colocar vdeo hospedado em um diretrio para rodar no site
com ajuste de tamanho:
<embed height="50"
src="http://nomedodominio.com/diretorio/NOME_VIDEO.xxx"
width="50"></embed>
Colocar vdeo do Youtube para rodar dentro do site. Este um dos processos
mais simples, basta voc acessar o Youtube e, apos selecionar o vdeo para assistir,
localizar no lado direito o item "incorporar". Nele apresentado um cdigo que voc
deve simplesmente, copiar e inserir dentro do cdigo da sua hospedagem.
OBS: No existe uma limitao especfica para o tamanho de arquivos nas

hospedagens UOL HOST, o que existe o limite do espao em disco do plano

contratado.

3.8

Organograma

Telecine Mozer
Cadastro

Registros

Cliente
EXT

Mensalidade

Locadora

Em dia (Paga)
Em Divida

Acesso Restrito
para o
Cliente

Senha Liberada
(Acesso
Livre)

4 CONCLUSO

Logo quando comecei o artigo tive muita dificuldade em apreender

como a empresa Telecine Mozer funciona para unir com o trabalho
proposto o que me levou a refletir e entender, fazendo da forma que pude
entender ms como sempre com o principal objetivo que todos os
leitores compreendessem, mas embora as dificuldades alcancei muitos
conhecimentos que me proporcionaram bastante interesse em entender
cada vez mais sobre o assunto.

5 REFERNCIA

Livro:
Sistema WEB
Mozer, Merris
M939s Sistemas WEB / Merris Mozer, Adriane Aparecida
Loper, Danilo Augusto Bambini Silva. Londrina: Editora e Distribuidora.

PUBLICAO PERIDICA ON-LINE:

Desconhecido,Autor. Estrutura de um documento HTML. Kioskea.Net.
http://pt.kioskea.net/contents/236-estrutura-de-um-documento-html
acesso
em:
28/10/2014 as 20:40hrs.
Conti, Ftima. Linguahem HTML. HTML. http://www.ufpa.br/dicas/htm/htmintr.htm#topo acesso em: 29/10/2014 as 19:30hrs.