Introdução à Web e HTML

INTRODUÇÃO
À WEB E HTML
RENATO MELO – 2014

Internet, como é
composta?
1. Tecnologia de rede aberta
2. Hipertexto
3. Interface gráfica

HTML
Não é grego, nem coisa
de nerd.
É que nem inglês.
Não precisa saber, mas quem
sabe sempre tem um diferencial.

INTERFACE
GRÁFICA
A parte legal da história...

Mas antes,
vem a teoria...
Antigamente: Interface com
computadores era negócio
para gênios da informática
Hoje: O desenvolvimento de
interfaces gráficas permite o
uso por não especialistas

Os opostos
se atraem
O desenvolvimento das interfaces
gráficas permitiu a criação de
programas WYSIWYG
What You See Is What You Get

#estagiário
#bolsa auxílio
#650 reais

#SEO
#links
#estagiário
#bolsa auxílio
#650 reais
patrocinados
#web analytics
#redes sociais
#facebook,
twitter,
youtube,
google+, linkedin

#wordpress
#geolocalização
#foursquare
#desenvolviment
o de aplicativos
#webdesigner
#php e asp
#diagramação

REGRA 01
O seu cliente ou o seu
patrão querem o lucro...
Não importa o quanto
você saiba, não importe
como ele virá.

Por isso...
É bom saber o que é e como
funciona cada coisa.

Especialista
Conheça a área, mas
especialize-se!

REGRA 02
A Web muda todo dia.
Atualize-se
Atualize-se
Atualize-se
Atualize-se

HTML
Html é um arquivo que pode ser
interpretado por navegadores.

HTML
E pode ser editado desde o bloco de notas até
programas WYSIWYG, como o Dreamweaver

Bloco de notas
Somente a linha de código
contendo sua programação

Dreamweaver
Edição do html na linha de
código ou no design.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Extra</title>
</head>
<body style="margin: 0px; padding: 0px;">
<div style="font-size: 10px; font-family: verdana; padding:10px 0 10px 0;"
align="center">
<p>Caso não esteja conseguindo visualizar esta mensagem <a
href="http://renatomelomkt.com.br/esamc/web-aula2/extra.html">acesse
este link</a> </p>
<a href="http://www.extra.com.br"><img
src="http://renatomelomkt.com.br/esamc/web-aula2/extra.jpg"
border="0"></a>
</div>
</body>
</html>

TÁ BOM QUE
EU VOU FAZER
ISSO!!!!

VAMOS CRIAR
UM E-MAIL
MARKETING EM
HTML:
Arquivo:
http://www.renatomelo.com
.br/esamc/uol.zip

DESCOMPACTE TUDO
NA MESMA PASTA
ABRA O HTML NO
NAVEGADOR
EDITE O ARQUIVO PELO
BLOCO DE NOTAS

QUER VER COMO ESTÁ
INDO AS ALTERAÇÕES?
SALVE O ARQUIVO NO
BLOCO DE NOTAS
PRESSIONE A TECLA F5
NO NAVEGADOR

SELECIONE PARA ABRIR
TODOS OS ARQUIVOS PARA
APARECER O HTML

HÁ APENAS DOIS
ARQUIVOS! O HTML E A
IMAGEM DO EXTRA.

O CÓDIGO TEM 2 PARTES
<HEAD> TUDO AQUILO QUE
NÃO É EXIBIDO NO
NAVEGADOR, COM
EXCESSÃO DO TÍTULO.
</HEAD>
<BODY> TUDO AQUILO
QUE É EXIBIDO NO
NAVEGADOR.</BODY>

O ABRE E FECHA DE CADA
CÓDIGO
TOME CUIDADO PARA
NÃO APAGAR
ELEMENTOS.
<COMANDO> ABRE UM
COMANDO
</COMANDO> FECHA
UM COMANDO.

INTERPRETANDO O CÓDIGO
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
INFORMAÇÕES INICIAIS
DO CÓDIGO, NÃO VAMOS
MEXER EM NADA.

<title>Uol</title>
</head>
TITLE = TÍTULO
LOGO, VAMOS TROCAR
UOL PELA PALAVRA DA
SUA ESCOLHA.

<body style="margin: 0px; padding: 0px;“>
INFORMAÇÕES DE
MARGEM E DISTÂNCIA.
NÃO VAMOS MEXER AQUI.

<div style="font-size: 10px; font-family: verdana;
padding:10px 0 10px 0;" align="center“>
INFORMAÇÕES DE FONTE,
DISTÂNCIA E ALINHAMENTO.
NÃO VAMOS MEXER AQUI.

<p>Caso não esteja conseguindo visualizar esta
mensagem <a href="www.esamc.br">acesse este
link</a> </p>
CASO O SERVIDOR DE E-MAIL BLOQUEIE A
EXIBIÇÃO DA MENSAGEM, A CRIAÇÃO DESTE
LINK RESOLVE O PROBLEMA.

mensagem <a href="www.esamc.br"> acesse este
link</a> </p>
O <P> É DE PARÁGRAFO, POR
ISSO INCLUI TUDO ONDE TEM
TEXTO.

link</a> </p>
O <A> É PARA INCLUSÃO DE LINKS. NO
CASO, AS PALAVRAS ACESSE ESTE LINK
VÃO SER MARCADAS PARA RECEBER O
ENDEREÇO DO SITE.

link</a> </p>
COMO ESTAMOS TRABALHANDO
DIRETO DO COMPUTADOR, VAMOS
TROCAR O LINK. ALTERE O CONTEÚDO
ENTRE “” PARA OUTRO SITE QUALQUER.

VAMOS SUBSTITUIR A
IMAGEM DO TIOZINHO DA
UOL?

PASSO A PASSO
1 – PROCURE UMA IMAGEM NO GOOGLE
2 – SALVE NA MESMA PASTA DO HTML
3 – DEIXE A IMAGEM COM UM NOME
FÁCIL E EM MINÚSCULO
4 – VERIFIQUE SE A IMAGEM ESTÁ EM PNG
OU JPG

<a href=" http://www.esamc.br "><img src="
uol.jpg " border="0"></a>
</div>
</body>
</html>
ESTE LINK SIGNIFICA QUE, AO CLICAR
NA IMAGEM DO TIOZINHO, VOCÊ VAI
PARA O SITE DA ESAMC. ALTERE O LINK
PARA UM SITE QUALQUER.

<a href="http://www.extra.com.br"><img src=
"uol.jpg" border="0"></a>
</div>
</body>
</html>
TROQUE O ENDEREÇO DA IMAGEM, DE
UOL PARA O NOME ESCOLHIDO,
ASSIM: “ARQUIVO.JPG”

#PRÉVIA 01
E-MAIL MARKETING
LLeerr:: hhttttpp::////bbiitt..llyy//aauullaa0022wweebb
RReessppoonnddeerr::
11)) QQuuaall ddooss 55 mmoottiivvooss vvooccêê jjuullggaa mmaaiiss
iimmppoorrttaannttee nnaa eessttrraattééggiiaa ddee ee--mmaaiill mmaarrkkeettiinngg??
22)) QQuuaall iimmppoorrttâânncciiaa ddoo ee--mmaaiill mmaarrkkeettiinngg nnoo
mmaarrkkeettiinngg ddiiggiittaall??

#PRÉVIA 01
E-MAIL MARKETING
EEnnvviiaarr ppaarraa oo ee--mmaaiill::
rreennaattoommeelloo8855@ggmmaaiill..ccoomm
11-- AAttéé 2288..0088 ààss 1188hh3300 –– 110000%% VVAALLOORR
22-- AAttéé 0044..0099 ààss 1188hh3300 –– 5500%% VVAALLOORR
33-- AAPPÓÓSS ÀÀSS 1188HH3300 DDOO DDIIAA 0044..0099 == 00%% VVAALLOORR

Introdução à Web e HTML

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Viewers also liked

Viewers also liked (20)

Similar to Introdução à Web e HTML

Similar to Introdução à Web e HTML (20)

More from Renato Melo

More from Renato Melo (20)

Introdução à Web e HTML