SISTEMA DE ENSINO PRESENCIAL CONECTADO

NALISE E DESENVOLVIMENTO DE SISTEMAS

JOSU AUGUSTO DA SILVA JUNIOR

O QUE HTML

Assis
2014

JOSU AUGUSTO DA SILVA JUNIOR

O QUE HTML

Trabalho apresentado ao Curso de nalise e

Desenvolvimento de Sistemas da UNOPAR Universidade Norte do Paran, para a disciplina de
Atividades Interdisciplinares: Portflio Individual.
Prof.
Merris Mozer;
Reinaldo Nishikawa;
Marco Hisatomi;
Anderson Macedo

Assis
2014

SUMRIO

1 Introduo.............................................................................................4
2 Desenvolvimento...................................................................................5
3 O que HTML.......................................................................................6
4 Diagrama e Projeto..............................................................................12
5 Concluso............................................................................................13
6 Referncia Bibliografica.......................................................................14

1. INTRODUO
Venho atravs deste trabalho apresentar o cenceito de HTML , suas
ferramentas

comandos,

como

trabalhar

com

essa

linguagem

de

programao, iremos saber tambem como inserir imagens, videos, inserir

tabelas. Tambem veremos os tipos de variaveis que podemos usar em uma
pagina.

2 DESENVOLVIMENTO
De acordo com atividade proposta realizei uma pesquisa sobre
os estudos bsicos do HTML, e todos seus comandos desde seu incio at o
desenvolvimento avanado. Onde tirei um bom aproveito em relao aos meus
estudos, pois consegui identificar pontos importantes para realizao da
pesquisa. Quando voc olha para uma pgina de Internet em um navegador,
voc enxerga, em um nvel mais bsico, palavras. Estas palavras geralmente
tem algumas caractersticas de estilo, como diferentes tamanhos de fontes e
cores. Em muitos casos uma pgina tambm exibe imagens ou talvez vdeo.
Algumas vezes existe um formulrio onde voc pode inserir (ou procurar por)
informao,

ou

personalizar

exibio

da

pgina

ao

seu

gosto.

Frequentemente uma pgina contm contedo animado e contedo que muda

enquanto uma pgina permanece a mesma.

HTML
Abreviao

para

a expresso

inglesa HyperText

Markup

Language, que significa Linguagem de Marcao de Hipertexto) uma

linguagem de marcao utilizada para produzir pginas na Web. Documentos
HTML podem ser interpretados por navegadores. A tecnologia fruto da juno
entre os padres HyTime e SGML.
HyTime um padro para a representao estruturada de hipermdia e
contedo baseado em tempo. Um documento visto como um conjunto de
eventos concorrentes dependentes de tempo (como udio, vdeo, etc.),
conectados por hiperligaes. O padro independente de outros padres de
processamento de texto em geral.
SGML um padro de formatao de textos. No foi desenvolvido para
hipertexto, mas tornou-se conveniente para transformar documentos em hiperobjetos e para descrever as ligaes.
Todo documento HTML possui etiquetas do ingls: tags, palavras entre
parnteses angulares (chevron) ( < e > ); essas etiquetas so os comandos de
formatao da linguagem. Um elemento formado por um nome de etiqueta
(tag), atributos, valores que podem ser outros elementos ou texto. Os atributos
modificam os resultados padres dos elementos e os valores caracterizam
essa mudana.
COMO INCLUIR IMAGENS NO SITE :
A TAG utilizada : <img src="nome da imagem+extenso"(gif,jpg,bmp,etc)>
Atributos da Imagem:
WIDTH - Define a largura da imagem.
HEIGHT - Define a altura da imagem.
6

 ALT - Texto que aparece quando passado o mouse sobre a imagem

BORDER - um valor atribuido largura da borda da imagem

(Contorno). Veja alguns exemplos:

<img

src="zero.gif"

alt="Seu

texto"

border="0">

<img

src="zero.gif"

alt="Seu

texto"

border="1">

<imgsrc="zero.gif" alt="Seu texto" border="2" width="20" height="20">

Note que no ultimo exemplo especificamos o tamanho da imagem. No

definindo este tamanho, a imagem aparecer no tamanho original. Voc pode
especificar um tamanho menor do que a original, pois no acarretar perda de
qualidade da imagem, do tamanho mas se fizer ao contrrio, isto , definir um
tamanho maior que a original perder qualidade de imagem. O correto voc
ter a imagem do tamanho certo que deseja que aparea na pgina. Evite
colocar imagens maiores que 50 Kb. Quanto maior a imagem mais tempo
levar para carregar.
Alinhamento texto de imagens:
<img src="zero.gif" align="top">
<img src="zero.gif" align="middle">
<img src="zero.gif" align="left">
<img src="zero.gif" align="right">
H tambm os atributos de moldura, que definem o espao vertical e horizontal
entre as imagens e os textos circundantes, onde:
<IMG SRC="imagem.gif" VSPACE=espao vertical>
<IMG SRC="imagem.gif" HSPACE=espao horizontal>
Ex.: <IMG SRC="imagem.gif" ALIGN="LEFT" WIDTH="10" HEIGHT="10"
VSPACE="50">
<IMG SRC="imagem.gif" ALIGN="RIGHT" WIDTH="10" HEIGHT="10"
HSPACE="30">

COMO INSERIR VDEO NO SITE:

Para inserir um vdeo ( arquivo com extenso.avi), como abaixo, coloque
7

este cdigo depois da tag <BODY>:

<EMBED SRC=arquivo.avi </EMBED>
Note que est no tamanho reduzido, pois foi utilizado Width e Height,
mas no preciso, pois o tamanho padro, a menos que lhe seja til.
COMO FAZER TABELAS :
As tabelas valorizam o Layout das pginas, pois do harmonia e
organizao dos textos, imagens, listas, etc. A tabela representada pelas
Tags <TABLE> e </TABLE> e possue os seguintes atributos:
border="valor" - Onde o "valor" define a largura da borda (contorno).
cellspacing="valor" - Onde o "valor" define o espao horizontal entre as
clulas.
cellpadding="valor" - Onde o "valor" define o espao vertical entre as clulas.
width="valor" - Onde o "valor" define a largura da tabela em pixels ou
porcentagem.
height="valor" - Onde o "valor" define a altura da tabela em pixels ou
porcentagem.
bgcolor=#cor Define a cor de fundo da tabela.
bordercolor=#cor Define a cor da borda.
background=imagem.jpg Define uma imagem de fundo.

A tabela possui alguns comandos que so:

<TR>

<TH>

</TH>

-Define

um

<TD>

</TD>

-Define

<CAPTION>
Veja

um

</TR>

-Define

</CAPTION>

exemplo: <TABLE

CELLSPACING="10"

uma

linha
cabealho

coluna

-Define

BORDER="2"

CELLPADDING="6"

de
ttulo

da

tabela.

da

tabela.

informaes.
da

tabela.

BORDERCOLOR="RED"

WIDTH="50"

HEIGHT="20"

BGCOLOR="YELLOW" <TR> <TD> 1a.coluna </TD> <TD>2a.coluna </TD>

8

<TD> 3a.coluna </TD> </TR> <TR> <TD> 1a.linha </TD> <TD> 1a.linha
</TD><TD>

1a.linha

</TD>

</TABLE>

</BR>

Voc pode colocar o cdigo acima em apenas uma linha. Resultado:

1
a
.
c
o
l
u
n
a

2
a
.
c
o
l
u
n
a

3
a
.
c
o
l
u
n
a

1
a
.
l
i
n
h
a

1
a
.
l
i
n
h
a

1
a
.
l
i
n
h
a

Para que a tabela fique centralizada, como acima, use a tag <CENTER> antes
do cdigo e
</CENTER> depois do cdigo.
Tambm pode-se alinhar o texto dentro das clulas, utilizando os seguintes
atributos:
Align="left" -Alinha o texto esquerda.
Align="right" -Alinha o texto direita.
Align="center" -Alinha o texto no centro.
Valign="top" -Alinha o texto no topo da clula.
Valign="middle" -Alinha o texto no meio da clula.
Valign="bottom" -Alinha o texto na parte inferior da clula.
ADICIONANDO UMA LISTA DENTRO DA CLULA:
<TABLE BORDER="1" <TR> <TD>lista dentro da clula<UL> <LI>1 item<LI>2
item<LI>3 item</UL> </TD> </TABLE>Resultado:
lista dentro da clula
9

1 item

2 item

3 item

COMO FAZER OS LINKS :

Links so pontos clicveis que levam a qualquer site da internet ou
qualquer pgina do site e at mesmo qualquer ponto da prpria pgina. A TAG
usada :

<a href=nome do lugar ser levado>descrio do lugar</a>

Exemplos <a href=http://www.extremaonline.com>Conhea Extrema-MG</a>
Resultado: Conhea Extrema-MG
Note que formou-se um link para um determinado site que foi descrito no
cdigo acima.
Se voc abrir o referido site em uma outra janela, isto , sem que voc
saia deste site, isto porque foi adicionado o atributo TARGET, ento na
verdade, para voc no fechar esta janela, o cdigo inserido aqui foi:
<a href=http://www.extremaonline.com target=_blank>Conhea ExtremaMG</a>
Para Fazer um link para uma outra pgina do seu site use:

<a href="pagina_tal.html">Clic aqui</a> - Note que aps o nome da

pgina colocado a extenso .html
As variveis em C podem ser declaradas basicamente de 3 maneiras
diferentes: dentro de uma funo, fora de uma funo, e como parmetro de
uma funo. Essas 3 maneiras de declarao fazem com que as variveis
sejam

chamadas

de

locais,

globais

ou

parmetros

formais.

Variveis Globais
As variveis globais existem durante a execuo de todo o programa e
podem ser utilizadas por qualquer funo. Elas devem ser declaradas fora de
qualquer funo, inclusive do main(), e no incio de um programa.

10

Variveis Locais
Uma varivel local s pode ser utilizada pela funo ou bloco que a
declarou. Ela no reconhecida por outras funes e s pode ser usada dentro
do bloco de funo onde est declarada. Uma varivel local criada quando a
funo comea a ser executada e destruda no final da execuo dessa funo.
Alm disso, no C ANSI, todas as variveis locais precisam ser declaradas no
incio da funo.
Parmetros Formais
Os parmetros formais so variveis locais de uma funo que so
inicializadas no momento da chamada da funo. Eles tambm s existem
dentro da funo onde foram declarados. Embora sejam utilizadas como
inicializao da funo, elas podem ser utilizadas normalmente como uma
varivel

local

dentro

do

bloco

de

funo

onde

esto.

Exemplo:
int contador;

// variavel global;

int verifica(int); // prototipo de funcao

void main()
{
int num, r; // variaveis locais a main()
contador = 100;
scanf("%d",&num);
r = verifica(num); // chamada da funcao
printf("Verificacao = %d",r);
}
int verifica(int valor) // valor parametro formal de verifica
{
int saida; // variavel local a verifica()
if(valor <= contador)
saida=0;
else saida=1;
return(saida)
}

11

A principal vantagem de utilizar variveis locais a economia de memria. Isso

porque a memria s ser alocada quando for executado o bloco/funo onde
a varivel local foi declarada.

3 DIAGRAMA

12

A empresa TeleCine Mozer constituda de uma diretoria , depois ela

conta

com

sua

parte

de

TI,

responsvel

pelos

projetos

desenvolvimentos realizados, onde so testados antes de ir para produo,

que onde j est disponvel para o designer realizar as ltimas alteraes,
e assim chegar ao cliente e concluindo assim a empresa com seu financeiro
e rh.
Est empresa consiste em locao de filmes e seriados, podendo
ser visto em qualquer dispositivo que contenha internet e que d suporte ao
vdeo, podendo tambm ser baixado com um custo adicional.

4 CONCLUSO
A

primeira

etapa

do

projeto

consistia

em

pesquisa

compreendimento dos princpios mais elementares da linguagem HTML

13

(Hypertext Markup Language). Essa a linguagem padro utilizada na criao

emanuteno em sites na Web.Atravs dessa linguagem podemos acrescentar
dados, links, imagens, formulrios, entre outros. Aps anlise de sites do ramo
tecnolgico, foi possvel adquirir referenciais para a elaborao de pginas.
Tanto em estruturao de pgina, quanto em seu layout.

5 REFERNCIA BIBLIOGRAFICA
http://www.significados.com.br/html/
https://sites.google.com/site/sitesrecord/o-que-e-html
http://www.ufpa.br/dicas/htm/htm-intr.htm
http://www.tecmundo.com.br/navegador/2254-o-que-e-html-5-.htm
14

http://www.unoparead.com.br/sites/bibliotecadigital/
Apostila Tpicos em Desenvolvimento de Sistemas
Apostila Metodologia Cientifica
Apostila Processo de Negocios e Software
Apostila Lgica e Tcnicas e Software

15