Contatos
flavors.com/rangeljavier
carlosrangelxavier@gmail.com
3

Objetivos da Disciplina
• Mostrar os conceitos e técnicas das
Tecnologias Web no ambiente web.
• Formar webdesigners
4

O que iremos utilizar
• Softwares
– Aptana
• Ambiente de Desenvolvimento
– Google Chrome/Firefox
• Navegador
– Tecnologias e Ferramentas Webs
5

Como funciona uma página web?
6

Como funciona um website?
• Uma página é solicitada, via navegador;
• Está página encontra-se em algum servidor na
internet;
• Assim que o servidor recebe as informações
solicitadas pelo navegador, ele faz uma busca
de onde está e retorna para o seu cliente.
• A página é visualizada no navegador;

O que é necessário criar um website?
• Linguagem para marcação: HTML;
• Linguagem para estilização: CSS e JS;
• Linguagem de programação: PHP;
• Banco de Dados;
Podemos entender por banco de dados qualquer sistema
que reúna e mantenha organizada uma série de informações
relacionadas a um determinado assunto em uma
determinada ordem.

O que é HTML e CSS?
• São tecnologias para criação de páginas web;
• Enquanto o HTML fica responsável por criar a
estrutura da página, o CSS é responsável por
estilizar o HTML, colocar cores, margens,
estilizar fontes e etc...
10

W3C
• O World Wide Web Consortium (W3C) é a principal
organização de padronização da World Wide Web.
Consiste em um consórcio internacional com quase
400 membros (empresas, órgãos governamentais e
organizações independentes) com a finalidade de
estabelecer padrões para a criação e a interpretação
de conteúdos para a Web.
11

O que podemos fazer?
• Utilizando HTML e CSS podemos criar a
interface para:
– Websites
– Portais
– Hotsites
– Landing Pages
– Etc...
12

Hotsites? Landing Pages?
• Hotsites e Landing Pages, são “mini-sites”
com a finalidade de vender um determinado
produto por curto espaço de tempo.
13

Diferença: Hotsite e Landing Pages?
Landing Pages costumam ser páginas isoladas
com o objetivo de passar a mensagem mais
importante sobre um produto ou serviço
oferecido. Geralmente, encontram-se dentro
site principal e é comum que direcionem os
clientes a esse site. Hotsites costumam ser
independentes focados em um produto, sem
necessariamente direcionarem clientes para o
site principal.
14

Exemplos
• Com o conceito passado anteriormente,
utilizando apenas as URL poderíamos
entender que se fossemos criar uma Landing
Page do vestibular da FJN, uma boa sugestão
seria: www.fjn.edu.br/vest2013.
• Já um hotsite, poderia ter seu próprio site,
com vários links internos:
www.vest2013fjn.com.br
15

Objetivo da Landing Page
• Fazer com que simples
navegantes da internet,
tornem-se clientes
16

HTML
Senta que lá vem a história...
17

O que são Tags HTML?
• É a estrutura utilizada para criar páginas
HTML. As tags são responsáveis pelo
navegador interpretar o que estão entre
elas. Sem elas não seria possível
interpretar um website.

Tags Básicas (importantes)
• <html> - abertura do documento
• <head> - cabeçalho
• <title> - titulo da página
• <body> - corpo da página

Tag <head>
• Dentro do cabeçalho podemos encontrar
os seguintes comandos:
• <title>: define o título da página, que é
exibido na barra de título dos navegadores.
• <style>: define formatação em CSS

Tag <body>
• Dentro do corpo podemos encontrar outras
várias etiquetas que irão moldar a página,
como por exemplo:
• <h1>, <h2>,... <h6>: cabeçalhos e títulos no
documento em diversos tamanhos.
• <p>: novo parágrafo.
• <img>: imagem

Simples Documento
• <html>
• <head><title>Meu site</title>
• </head>
• <body>
• Aqui ficam as imagens, links, textos, vídeos,
etc.
• </body>
• </html>

Simples Documento
• <html>
• <head><title>Meu site</title>
• </head>
• <body>
• <p>Navegador interpreta um parágrafo</p>
• </body>
• </html>

Cabeçalhos
Obs: Os cabeçalhos vão do NÍVEL H1 AO H6

Tags sem
fechamento
• Geralmente Inserem um elemento na página.
• <br/> Insere uma quebra de linha
• <hr/> Insere uma linha horizontal

Tags sem
fechamento
• Note que a tag é escrita como se fosse
uma mistura de tag de abertura e de
fechamento com uma barra "/" no final:
• <br/> Insere uma quebra de linha
• <hr/> Insere uma linha horizontal

Links
• É uma propriedade
importante dos
documentos HTML é a
possibilidade de fazer
hiperligações.
Para isso usa-se a
etiqueta <a> (do inglês,
anchor).

Links
• Para inserir um link em um documento, utilizamos a
etiqueta <A>, da seguinte forma:
• <A HREF = “contato.html">âncora</A>
• onde:
• Contato.html -> é a URL do documento de destino;
• Âncora-> é o texto ou imagem que servirá de ligação do
documento apresentado para o documento de destino.
href -> é abreviação para "hypertext reference" -
referência a hypertexto - e especifica o destino do link
– que normalmente é um endereço na Internet ou um
arquivo.

Links
• <A HREF = “http://www.fjn.edu.br">
Visitar site da FJN</A>
Visitar site da FJN
O que aparece para o usuário:
Página de Destino

Links
• <A HREF = http://www.fjn.edu.br
target=“_blank”>Visitar site da FJN</A>
Página de Destino
target-> O atributo target permite-nos abrir o link em
uma nova janela diferente daquela em que se clicou.
O target _blank é útil em especial para links externos
ou seja, o visitante abre o link de outro site, mas a
janela atual não se fecha.

Tags (Fontes)
Aumentar o tamanho da Fonte:
<font size=“+1”>Texto</font>
Alterar a cor da Fonte
<font color=“yellow”</font>
Alterar a Fonte(letra)
<font face=“verdana”</font>

Atributos e Valores
• Uma etiqueta/tag é formada por
atributos e valores. Os atributos
modificam os resultados padrões e os
valores caracterizam essa mudança.

Atributos e Valores
(Exemplo)
• <font color=“red">Meu Texto</font>
• No qual:
• font = Tag utilizada para alterar opções de uma
palavra ou texto.
• color = atributo que especifica a cor da palavra
ou texto.
• red = valor do atributo color, que é a cor do
texto que será apresentado (neste caso
vermelho).

Atributos e Valores
• Cada etiqueta tem seus atributos possíveis e
seus valores.
• Um exemplo, é o atributo size que pode ser
usado com a tag FONT, com a HR mas que
não pode ser usado com a tag BODY.
• Isso quer dizer que devemos saber exatamente
quais os atributos e valores possíveis para
cada comando.

Tags - Listas
• <ul>
• <li>Texto 1</li>
• </ul>
• Texto 1
• Texto 2
Resultado:
*Listasdesordenadas.

Tags - Listas
• <ol>
• </ol>
• Listas Ordenadas.
1. Texto 1
2. Texto 2
Resultado:

Negrito e itálico
• <b>
• Meu Texto
• </b>
• <i>
• Meu Texto
• </i>
Meu Texto
Resultado:
Meu Texto
Resultado:

Tags Aninhadas
• <b>
• <i>
• Meu Texto
• </i>
• </b>
Meu Texto
Resultado:

Tags Aninhadas
• <h1>
• <b>
• <i>
• Meu Texto
• </i>
• </b>
• </h1>
Meu Texto
Resultado:

Tags Aninhadas
• Conclusão:
• As últimas tags a serem abertas têm que
ser as primeiras a serem fechadas, e as
primeiras a serem abertas terão de ser as
últimas a serem fechadas.

Mais Tags - Imagens
• <IMG>: Tag para inserir uma imagem.
• Src: Local de origem da imagem
• Alt: Atributo para descrever a imagem.
• Width: Atributo para definir a largura da imagem.
• Height: Atributo para definir a altura da imagem.
• Border: Inserir uma borda na imagem.
• Align: Alinhamento da Imagem.
Código para inserir uma imagem:
<img src=“imagens/brasil.jpg” alt=“Brasil”/>

Mais Tags - Imagens
Código para inserir uma imagem:
<img src=“img1.jpg” alt=“Desc” align= “left” border=“1” />
Seu texto irá ficar alinhado
a esquerda da imagem.
A imagem tem uma borda
que foi definida pelo
atributo BORDER=“1”.

Mais Tags - Tabelas
Tabelas são usadas para apresentar
"dados tabulares", isto é, informação que
deva ser apresentada em linhas e
colunas, de forma lógica e organizada.

Mais Tags - Tabelas
Código para inserir uma tabela:
<table>
<tr><td>Célula 1 </td></tr>
<tr>
<td>Célula 2</td>
</tr>
</table>
Célula 1
Célula 2
Resultado:

Mais Tags - Tabelas
Código para inserir uma tabela:
<table border=“1”>
<tr><td>Célula 1 </td></tr>
<tr>
<td>Célula 2</td>
</tr>
</table>
Célula 1
Célula 2
Resultado:

<table border=“1”>
<tr>
<td>Célula 1 </td><td>Célula 2 </td>
</tr>
<tr>
<td>Célula 3 </td><td>Célula 4 </td>
</tr>
</table>
Célula 1
Célula 3
Resultado:
Célula 2
Célula 4

Blocos de Divisões
• A tag <div> define uma divisão ou uma seção
em um documento HTML.
• A tag <div> é usada para agrupar blocos-
elementos, e assim formatá-los com nossa
folha de estilo.
49

Blocos de Divisões
<div>
<h1>Este é meu bloco acima</h1>
</div>
<div>
<p>Este é meu bloco abaixo</p>
</div>
50

Blocos de Divisões
• ID: Faz referência a um elemento único e
exclusivo. (No CSS é utilizado com “#”)
• CLASS: É usado para especificar um modelo
para um grupo de elementos. Ao contrário do
seletor id, o seletor de classe é mais
frequentemente usado em vários elementos.
(No CSS é utilizado com “.”)
51

Bloco de Divisões
<div id=“superior”>
<h1>Este é meu bloco acima</h1>
</div>
<div id=“inferior”>
<p>Este é meu bloco abaixo</p>
</div>
52

CSS
• Cascading Style Sheets (ou simplesmente CSS) é
uma linguagem de estilo utilizada para definir a
apresentação de documentos escritos em uma
linguagem de marcação, como HTML ou XML.
• É uma tecnologia criada para definir estilos
(cores, tipologia, posicionamento, etc...);
• CSS facilitam a criação, formação e manutenção
da páginas web.
54

HTML + CSS
Inline: CSS diretamente nas tags HTML
<p style="color:#B000FF;">CSS dentro das tags HTML</p>
Embutido: CSS dentro do Head de sua página
<head>
<style type="text/css">
.texto {color:#B000FF;}
</style>
</head>
Externo: CSS dentro do Head de sua página vindo de um arquivo
externo
<link rel=”stylesheet” type=”text/css” href=”estilo.css” />
55

CSS
A estrutura básica (“fórmula”)
seletor{
propriedade: valor;
}
56

Sintaxe do CSS
• Seletor = elemento contido na estrutura
HTML.
• Você irá selecionar pelo seu nome ou tipo de
TAG então indicará isso em primeiro lugar.
P {
color: green;
}

Sintaxe do CSS
• Propriedade = É a propriedade que você irá
manipular desse elemento. Cor de fundo,
tamanho do texto, cor de texto, posição,
largura, altura etc.
P {
color: #CCCCCC;
}

Sintaxe do CSS
• Valor = É o valor referente a propriedade
escolhida. Se você quer mudar a cor do texto,
o valor da propriedade será o nome da cor.
P {
color: white;
}

Todas as propriedades
Aqui veremos a listagem de todas as possibilidade
possíveis de propriedades CSS e usa-las.
http://www.w3c.br/divulgacao/guiasreferencia/css2/
60

HTML5 e CSS3
• São as novas versões das tecnologias para
criação web. Houveram mudanças e
62

DocType
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Isto é o doctype! Deve ser sempre a primeira
linha de qualquer documento HTML e serve para
indicar ao browser qual a versão do HTML em
que o documento está escrito. Existem dezenas
de doctypes, que podem fazer o browser
“entender” o HTML de diferentes formas.
63

DocTypes
É importante usar um doctype que faça o
browser correr num modo padrão. Por
exemplo, o doctype acima – XHML 1.0 Strict –
contem todos os elementos e atributos HTML,
mas NÃO INCLUI elementos de apresentação
ou obsoletos (como tag font).
64

DocTypes
O HTML padronizou um novo DocType que é
menor, legível e faz os todos os browsers
recentes correr em modo padronizado:
<!DOCTYPE HTML>
65

Dicas para sua Landing Page
67

1. Use fotos
• Estudos comprovam
que fotos reais são
mais eficientes até
mesmo que ilustração.
• Chamam mais atenção
e são mais elegantes
68

• Compre fotos, contrate fotografo ou prepare
você mesmo.
69

2. Claro e simples
• Você tem 5 segundos, CINCO SEGUNDOS para
convencer seu usuário a ficar na página e se
interessar. Não tente explicar como o produto
funciona em seus devidos detalhes.
70

3. Destaque quem merece
• Use sempre texto de vários
tamanhos, dando destaque
para quem merece.
71

4. O foco é o produto
• A marca de sua empresa não deve aparecer
mais do que o produto – ou você quer que ele
fique clicando em seu logotipo ao invés do
botão comprar?
• Foco é o produto e não sua empresa!
72

5. Nada de pop-ups
• Não seja chato com o usuário. Hoje, temos
diversos browsers com bloqueador de pop-up
e pop-under – o que pode prejudicar a taxa de
conversão de sua página.
73

6. Mostre depoimentos
• Uma grande parcela
de visitantes mais
desconfiados só
tomam a decisão
quando lêem reviews
de outros
consumidores, ou
especialistas da área
(veículos, blogueiros e
outros formadores de
opinião) dão seu
testemunho sobre o
produto ou serviço.
74

7. Senso de urgência
• O senso de urgência é capaz de fazer o usuário
tomar uma decisão por impulso, seja pelo
título impressionante, pela foto impactante do
produto, botão imponente, e principalmente
pela oferta que está próxima do botão.
75

8. Não use navegação
• Lembre-se que você tem uma única missão –
vender seu produto. Navegação foi feita para
websites e não para Landing Pages. Leve o seu
visitante para percorrer o mais rápido possível
o caminho entre TÍTULO > TEXTO > OFERTA >
CALL TO ACTION (botão).
76

9. Cuidado com cores
• O visitante pode até não ser designer, mas
sem perceber, ele ficará desconfiado ao entrar
em uma Landing Page preta para vender
serviços médicos, ou uma branca/verde/azul
para uma pizzaria. Aplicação de cores é
importantíssimo para usabilidade assim como
é para a conversão.
77

10. Call to Action
• Este é o seu objetivo. Ele deve ter um lugar de destaque
na sua página e ser um elemento com contraste forte e
que chame a atenção do usuário. Inclua-o duas, três vezes,
quantas vezes achar necessário (sem exagero!).
78

Tecnologias Web: Introdução às principais tags HTML e CSS

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Tecnologias Web: Introdução às principais tags HTML e CSS

Semelhante a Tecnologias Web: Introdução às principais tags HTML e CSS (20)

Mais de Rangel Javier

Mais de Rangel Javier (9)

Tecnologias Web: Introdução às principais tags HTML e CSS