Construo de Web Sites

Fabio V Almeida
Projetos
Projeto Infoprosa:
Cada fileira ser uma equipe e a cada semana uma
equipe ir trazer uma
noticia/curiosidade/novidade sobre sites de
internet/web design.
Cada equipe dever criar uma apresentao sobre
o assunto, de 15 minutos, que ser apresentado
no incio de cada aula ( 1 equipe por semana)
Desenvolvimentos de sites:
Desenvolvimento de site
Cada aluno ir desenvolver durante o curso um site a
seu gosto (proibido temas probidos) que ser
publicado na web, para avaliao da matria
A equipe de banco de dados ir criar um site sobre a
empresa a qual foi desenvolvido o banco de dados para
ser incorporado ao tcc.
Internet x Web
O que internet????
Internet o meio fsico por onde trafega a web
Web o contedo da internet
Teoricamente a internet existe sem a web
Um pouco de histria
Em 1960 surgem os computadores
interligados
Motivos blicos
Manter a comunicao mesmo que uma parte da
linha fosse derrubada
Em meados de 1970 e 1980 as conexes
extrapolam as bases militares e chegam as
universidades e centros de pesquisa
Aparece um cientista com vontade de
consertar a baguna e tornar a comunicao
popular e mais simples
Tim Bernes-Lee criar as chamadas trs tecnologias
elegantes da web a WWW (World Wide Web)
WWW
URL : endereo para identificar os recursos e
saber onde encontr-los
Para se ter uma URL necessrio a compra de um
domnio, no Brasil o responsvel pelo
gerenciamento de dominios a registro.br
HTTP: o protocolo para mover dados na web
e em toda a internet
HTML: a linguagem para representar o
contedo em termos de pginas na web e
promover sua unio atravs de links
Introduo
Nesta primeira parte do curso vamos falar
sobre a linguagem HTML.
Podemos dizer que o HTML a linguagem
me da web.
importante aprendermos o HTML, para
poder trabalhar com outras linguagens.
O HTML responsvel pela parte pesada do
site em toda sua estrutura.
Mas o que um site???
Site um conjunto de webpages compostas
por textos, imagens, animaes e,
eventualmente, sons.
Por regra todo site contm uma Home-page
que a primeira pagina do site, a pagina que
ira aparecer quando o cliente digitar a URL do
site em uma navegador
Toda home-page leva o nome de index.html
ou index.htm
HTML
Foi criado para facilitar a comunicao
Baseada no funcionamento do crebro que
armazena e localiza informaes por
associaes
Msica para lembrar algum
Cheiro que lembra um fato
No caso do html esta associao feita por
link ou hiperlinks e conectam suas pginas
HTML
Hipertext markup language linguagem de
marcao de hipertexto
Hipertexto uma forma no linear de leitura
HTML no uma linguagem de programao,
pois no tem recursos de estrutura
condicional e repetio/controle
Voc pode apenas dizer a posio de textos e
imagens e criar links
Html uma linguagem de marcao
HTML
O HTML cria as chamadas pginas estticas
Hoje usado o HTML, junto com alguma
outra linguagem, ou com outras linguagens.
Sim, porque vamos supor que voc queira
colocar animaes em seu site ou at mesmo
fazer pequenas alteraes no ponteiro do
mouse, mensagem na barra de ttulo,
mensagens de aviso. Isso no seria possvel
somente com o HTML.
So utilizadas linguagens como:
JavaScript ou DHTML(Dynamic HTML)
Hoje so desenvolvidas pginas com banners em
Flash, Fireworks, Photoshop, pginas feita toda
em Flash(o que no recomendvel para que no
tem banda larga), pginas feitas no Fireworks, mas
introduzido e alinhado em uma site usando HTML
e CSS.
Assim via-se a necessidade de criao de uma
linguagem quer permitisse uma maior
liberdade e interatividade e organizao, surge
assim o XHTML e o CSS
XHTML
De onde veio XHTML?
Quando o W3C definiu os parmetros da
quarta verso do HTML (HyperText Markup
Language) em 1997, os profissionais ficaram
satisfeitos com o resultado final e o adotaram
sem problemas como a base definitiva de
programao para a criao de pginas na Web.
Depois de trs anos, a linguagem sofre o que parece
ser sua maior evoluo com a adio de aplicaes da
meta-linguagem XML (EXtensible Markup
Language)
Usamos XHTML para definirmos a estrutura
do site
Usamos CSS para darmos forma ao site
CSS
Veio resolver o problema gerado em HTML
que lidava com a estrutura do site (contedo)
e sua forma de apresentao
O CSS responsvel pelo aspecto da pgina,
pelo layout.
Garante a acessibilidade, facilitando a leitura
das pginas pelos usurios.
De maneira grosseira CSS para html o que
seria para a linguagem humana um conjunto
de adjetivos que podem ser usados para
vrios elementos/pessoas
Exemplo: ao dizer que algum lindo(a), j temos
definidos todo o conjunto de caractersticas de
algum que para ns e lindo(a)
Utilizando corretamente a dupla XHTM e CSS
um site pode ficar at 56% mais leve
www.csszengarden.com
Exemplo html
Exemplo css
Webstandarts
So padres web
So regras para que a WWW no se torne um
caos
Estas regras so criadas por pessoas e
empresas unidas ao W3C
Regulamenta as normas tcnicas da web
A W3C dirigida por Tim Bernes-Lee
Tudo que for inventado em relao a web
dever ter uma padronizao na W3C
Consideraes Importantes
Um programa para escrever, outro para ler
Ao contrario dos programas, html pode ser escrito
por qualquer editor de texto
O bloco de notas muito utilizado
Porm para ver seus resultados preciso a
utilizao de navegadores
Aconselha-se os teste em vrios navegadores
Organizao
Esta apalavra chave para um desenvolvedor
web
O XHTML trabalha o tempo todo com
referencias, hyperlinks para buscar pginas
exibir imagens, vincular folhas
Crie uma pasta para cada site desenvolvido
Layout versus contedo
Neste curso primeiro trabalharemos a parte
estrutural do documento XHTML
Em seguida, deixaremos mais atrativo o
documento com o CSS
O visual ser sempre voltado para o formato
tableless
Eu sei que no comeo queremos encher de cores,
imagens, fundo colorido, mas o contedo sempre
vem primeiro, no se comea uma casa pelo
acabamento
Termos novos
Links
Pixels
Resoluo
Ppi
Dpi
Cores
Hexadecimal
RGB versus CMYG
TAGS (marcaes)

O que so TAGS
A linguagem HTML utiliza Tags(Marcaes) que
informam ao browser como exibir o documento.
As marcaes do HTML consistem do sinal <, (
menor que) , seguida pelo nome da marcao e
fechada por > (Maior que).
De um modo geral, as tags aparecem em pares,
por exemplo, <H1> Cabealho </H1>.
O smbolo que termina uma determinada
marcao igual aquele que a inicia, antecedido
por uma barra (/).
Tags de Titulo
Todo documento deve conter um conjunto bsico
de Tags.
Deve ser identificado como HTML (<HTML>
</HTML>), ter uma rea de cabealho (<HEAD>
</HEAD>) onde ser colocado o ttulo do
documento (<TITLE> </TITLE>), e uma rea
definida como corpo (<BODY> </BODY>) onde
estar o contedo do documento.
Veja exemplo
Criao em HTML
Cabealho
<HTML>
<HEAD>
<TITLE> Minha Primeira Pgina</TITLE>
<META NAME="author" content="WebMaster"
<META NAME="descrription" CONTENT="Minha
Primeira Pgina de HTML">
<META NAME="keywords" content="Pgina HTML">
<META HTTP-EQUIV="language" content="pt-br">
</HEAD>
Title
A TAG Title vai dizer qual ttulo aparecera na
barra de nomes no topo da pgina; do
contrario aparecer apenas o endereo da pgina.
A Tag Meta
As tags Meta so utilizadas por sites de busca
como o Google e o Cad?.
Atravs delas voc ir descrever alguns
comentrios sobre sua pagina.
<META NAME=DESCRIPTION> Far uma
pequena descrio sobre seu site.
Ex. <META NAME="DESCRIPTION"
CONTENT="Site legal que estou criando">.
<META NAME="KEYWORDS"> Com esta tag
voc colocar a(s) palavra(s) chave(s).
Ex. <META NAME="keywords" content="Pagina
web">.
<META NAME="AUTHOR"> Indica qual o author
de sua pagina.
Ex. <META NAME=AUTHOR CONTENT=WebMaster
Brenex>.
<META HTTP-EQUIV="language"> Indica o
Idioma a ser utilizado na pgina.
Ex. <META HTTP-EQUIV="language" content="pt-br">.
<META HTTP-EQUIV="Refresh"> Redireciona
sua pgina para uma pgina secundria, um
outro Site ou para algum arquivo como uma
foto.
Ex. <meta HTTP-EQUIV="Refresh" content="2;
URL=http://www.planetadorock.xpg.com.br/plane
tarock.html">, onde 2 o tempo em segundos
que a pgina vai demorar at redirecionar e URL
para onde o site ser redirecionado.
BODY
A Tag BODY far algumas configuraes no corpo
de sua pagina. Ela quem diz a cor do plano de
fundo, a cor dos links, entre outras coisinhas.
<BODY BGCOLOR=GRAY LINK=RED
ALINK=YELLOW VLINK=DARKGREEN>
BGCOLOR Determina a cor do Plano de Fundo
da pagina.
LINK Determina a cor do Link que aparecer na
pagina
ALINK Determina a cor que aparecera quando o
link for clicado
VLINK Determina a cor que aparecera no link
aps ser clicado.
BACKGROUND Se voc for por uma imagem
como plano de fundo deve usar este elemento
de BODY no lugar de bgcolor.
Pargrafo
Para iniciar um pargrafo utilizamos a Tag P.
<p align=center><font face="Arial"
color="navy" size="2">Este o meu primeiro
par&aacute;grafo em HTML</font></p>
ALIGN Alinha o texto de acordo com o que
voc colocar:
LeftEsquerdo;
JustifyJustificado;
CenterCentralizado;
RightDireito.
A Tag FONT
Face Indica o tipo de fonte que voc vai usar. Ex.
<font face="Times New Roman">;
Color Indica qual a cor voc vai por em seu
texto. Ex. <font color=Navy>. Ou em hexadecimal
#ff00c4
Size Indica o tamanho do texto. Varia de 1 a 7 o
tamanho.
ESTILOS DE TEXTO
Como em editores de texto, o HTML tambm
permite alterar o estilo do texto.
<B>- Aplica o estilo negrito. Ex. <b>texto em
negrito</b>
<I>- Aplica o estilo itlico. Ex. <i>texto em
it&aacute;lico</i>
<U>-Aplica o estilo sublinhado (nem todos os
browser oreconhecem).
Ex. <u>texto sumblinhado</u>
<SUP>- Faz com que o texto fique sobrescrito.
Ex. ^{Texto sobrescrito}
<SUB>-Faz com que o texto fique subscrito.
Ex. _{texto subscrito}
<BIG>- Aumenta a fonte e atribui negrito.
Ex. <big>Texto GRANDE</BIG>
<SMALL>- Reduz e altera a fonte.
Ex. <small>TEXTO pequeno</small>
<TT>- Aplica um espaamento regular ao
texto.
Ex. <tt>Texto com espaamento regular</tt>
TITULOS E SUBTITULOS
Estas Tags so utilizadas para dar ao leitor uma
viso geral sobre o que se trata o texto em
questo.
Estas tags apresentam seis nveis de ttulos que
so numerado de 1 a 6 por ordem de importncia.
(1 - Titulo principal, - 2 titulo secundrio, 3
subttulo...)
Ex.
<h1>Este o meu titulo principal</h1>
<h2>Este meu titulo secundrio</h2>
<h3>Este o meu subttulo</h3>
Quebras de Linha
So utilizadas para escreverem textos em linhas
diferentes, mas em um mesmo pargrafo, como
num poema, versos em linha diferentes, mas
numa mesma estrofe.
<br>