aula 1 -web site

Construção 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 apresentação sobre
o assunto, de 15 minutos, que será apresentado
no início 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 “proíbidos”) que será
publicado na web, para avaliação da matéria
• 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 físico por onde trafega a web
– Web é o conteúdo da internet
– Teoricamente a internet existe sem a web
Um pouco de história
• Em 1960 surgem os computadores
interligados
– Motivos bélicos
– Manter a comunicação mesmo que uma parte da
linha fosse derrubada
• Em meados de 1970 e 1980 as conexões
extrapolam as bases militares e chegam as
universidades e centros de pesquisa
• Aparece um cientista com vontade de
consertar a bagunça e tornar a comunicação
popular e mais simples
– Tim Bernes-Lee criar as chamadas três tecnologias
elegantes da web a WWW (World Wide Web)
WWW
• URL : endereço para identificar os recursos e
saber onde encontrá-los
– Para se ter uma URL é necessário a compra de um
domínio, no Brasil o responsável 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
conteúdo em termos de páginas na web e
promover sua união através de links
Introdução
• Nesta primeira parte do curso vamos falar
sobre a linguagem HTML.
• Podemos dizer que o HTML é a linguagem
mãe da web.
• É importante aprendermos o HTML, para
poder trabalhar com outras linguagens.
• O HTML é responsável pela parte ‘pesada’ do
site em toda sua estrutura.
Mas o que é um site???
• Site é um conjunto de webpages compostas
por textos, imagens, animações e,
eventualmente, sons.
• Por regra todo site contém 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 comunicação
• Baseada no funcionamento do cérebro que
armazena e localiza informações por
associações
– Música para lembrar alguém
– Cheiro que lembra um fato
• No caso do html esta associação é feita por
link ou hiperlinks e conectam suas páginas
HTML
• Hipertext markup language – linguagem de
marcação de hipertexto
• Hipertexto é uma forma não linear de leitura
• HTML não é uma linguagem de programação,
pois não tem recursos de estrutura
condicional e repetição/controle
• Você pode apenas dizer a posição de textos e
imagens e criar links
• Html é uma linguagem de marcação
HTML
• O HTML cria as chamadas páginas estáticas
• Hoje é usado o HTML, junto com alguma
outra linguagem, ou com outras linguagens.
Sim, porque vamos supor que você queira
colocar animações em seu site ou até mesmo
fazer pequenas alterações no ponteiro do
mouse, mensagem na barra de título,
mensagens de aviso. Isso não seria possível
somente com o HTML.
• São utilizadas linguagens como:
– JavaScript ou DHTML(Dynamic HTML)
– Hoje são desenvolvidas páginas com banners em
Flash, Fireworks, Photoshop, páginas feita toda
em Flash(o que não é recomendável para que não
tem banda larga), páginas feitas no Fireworks, mas
introduzido e alinhado em uma site usando HTML
e CSS.
• Assim via-se a necessidade de criação de uma
linguagem quer permitisse uma maior
liberdade e interatividade e organização, surge
assim o XHTML e o CSS
XHTML
• De onde veio XHTML?
– Quando o W3C definiu os parâmetros da
quarta versão 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
programação para a criação de páginas na Web.
– Depois de três anos, a linguagem sofre o que parece
ser sua maior evolução com a adição de aplicações 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 (conteúdo)
e sua forma de apresentação
• O CSS é responsável pelo aspecto da página,
pelo layout.
• Garante a acessibilidade, facilitando a leitura
das páginas pelos usuários.
• De maneira grosseira CSS é para html o que
seria para a linguagem humana um conjunto
de adjetivos que podem ser usados para
vários elementos/pessoas
– Exemplo: ao dizer que alguém é lindo(a), já temos
definidos todo o conjunto de características de
alguém que para nós 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
• São padrões web
• São regras para que a WWW não se torne um
caos
• Estas regras são criadas por pessoas e
empresas unidas ao W3C
• Regulamenta as normas técnicas da web
• A W3C é dirigida por Tim Bernes-Lee
• Tudo que for inventado em relação a web
dever ter uma padronização na W3C
Considerações 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
– Porém para ver seus resultados é preciso a
utilização de navegadores
– Aconselha-se os teste em vários navegadores
Organização
• Esta é apalavra chave para um desenvolvedor
web
• O XHTML trabalha o tempo todo com
referencias, hyperlinks para buscar páginas
exibir imagens, vincular folhas
• Crie uma pasta para cada site desenvolvido
Layout versus conteúdo
• 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 começo queremos encher de cores,
imagens, fundo colorido, mas o conteúdo sempre
vem primeiro, não se começa uma casa pelo
acabamento
Termos novos
• Links
• Pixels
• Resolução
– Ppi
– Dpi
• Cores
– Hexadecimal
– RGB versus CMYG
• TAGS (marcações)

O que são TAGS
• A linguagem HTML utiliza Tags(Marcações) que
informam ao browser como exibir o documento.
• As marcações do HTML consistem do sinal <, (“
menor que”) , seguida pelo nome da marcação e
fechada por > (“Maior que).
• De um modo geral, as tags aparecem em pares,
por exemplo, <H1> Cabeçalho </H1>.
• O símbolo que termina uma determinada
marcação é igual aquele que a inicia, antecedido
por uma barra (/).
Tags de Titulo
• Todo documento deve conter um conjunto básico
de Tags.
• Deve ser identificado como HTML (<HTML>
</HTML>), ter uma área de cabeçalho (<HEAD>
</HEAD>) onde será colocado o título do
documento (<TITLE> </TITLE>), e uma área
definida como corpo (<BODY> </BODY>) onde
estará o conteúdo do documento.
• Veja exemplo
Criação em HTML
Cabeçalho
• <HTML>
• <HEAD>
• <TITLE> Minha Primeira Página</TITLE>
• <META NAME="author" content="WebMaster"
• <META NAME="descrription" CONTENT="Minha
Primeira Página de HTML">
• <META NAME="keywords" content="Página HTML">
• <META HTTP-EQUIV="language" content="pt-br">
• </HEAD>
• Title
– A TAG Title vai dizer qual título aparecera na
barra de nomes no topo da página; do
contrario aparecerá apenas o endereço da página.
• A Tag Meta
– As tag’s Meta são utilizadas por sites de busca
como o Google ® e o Cadê?®.
– Através delas você irá descrever alguns
comentários sobre sua pagina.
• <META NAME=“DESCRIPTION”> Fará uma
pequena descrição 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 página.
– Ex. <META HTTP-EQUIV="language" content="pt-br">.
• <META HTTP-EQUIV="Refresh"> Redireciona
sua página para uma página secundária, 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 página vai demorar até redirecionar e URL
é para onde o site será redirecionado.
• BODY
– A Tag BODY fará algumas configurações 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
após ser clicado.
• BACKGROUND – Se você for por uma imagem
como plano de fundo deve usar este elemento
de BODY no lugar de bgcolor.
• Parágrafo
– Para iniciar um parágrafo 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:
– Left–Esquerdo;
– Justify–Justificado;
– Center–Centralizado;
– Right–Direito.
• 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 também
permite alterar o estilo do texto.
– <B>- Aplica o estilo negrito. Ex. <b>texto em
negrito</b>
– <I>- Aplica o estilo itálico. 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 espaçamento regular ao
texto.
– Ex. <tt>Texto com espaçamento regular</tt>
• TITULOS E SUBTITULOS
– Estas Tag’s são utilizadas para dar ao leitor uma
visão geral sobre o que se trata o texto em
questão.
– Estas tags apresentam seis níveis de títulos que
são numerado de 1 a 6 por ordem de importância.
(1 - Titulo principal, - 2 titulo secundário, 3 –
subtítulo...)
• Ex.
– <h1>Este é o meu titulo principal</h1>
• <h2>Este é meu titulo secundário</h2>
– <h3>Este é o meu subtítulo</h3>
• Quebras de Linha
– São utilizadas para escreverem textos em linhas
diferentes, mas em um mesmo parágrafo, como
num poema, versos em linha diferentes, mas
numa mesma estrofe.
• <br>