html e web - como funciona e tutorial
DESCRIPTION
Aula de introdução ao html e web, traz uma aula prática de e-mail marketing. Nela, você irá produzir passo a passo o seu próprio código para enviar por e-mail. Este código é o mesmo utilizado por grandes empresas na hora de enviar seu e-mail.TRANSCRIPT
INTRODUÇÃOÀ WEB E HTML
RENATO MELO – 2014
Internet, como é composta?
1. Tecnologia de rede aberta
2. Hipertexto
3. Interface gráfica
HTMLNão é grego, nem coisa
de nerd.
É que nem inglês. Não precisa saber, mas quem sabe sempre tem um diferencial.
INTERFACE GRÁFICAA 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 atraemO desenvolvimento das interfaces
gráficas permitiu a criação de programas WYSIWYG
What You See Is What You
Get
CONTRATANDOUM ESTAGIÁRIO
#estagiário
#bolsa
auxílio
#650 reais
#estagiário
#bolsa
auxílio
#650 reais
#SEO
#links patrocinados
#web analytics
#redes sociais
#facebook, twitter,
youtube, google+, linkedin
#wordpress
#geolocalização
#foursquare
#desenvolvimento de
aplicativos
#webdesigner
#php e asp
#diagramação
NO FINAL DAS CONTAS...
E o que eu
preciso saber?
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-seAtualize-se
Atualize-se
HTMLHtml é um arquivo que pode ser interpretado por navegadores.
HTMLE pode ser editado desde o bloco de notas até programas WYSIWYG, como o Dreamweaver
Bloco de notasSomente a linha de código contendo sua programação
DreamweaverEdição do html na linha de código ou no design.
E COMO FUNCIONA
UM CÓDIGO?
<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!!!!
AGORA VAMOS
DEIXÁ-LO FÁCIL!
VAMOS CRIAR UM E-MAIL MARKETING EM HTML:
Arquivo:http://
www.renatomelo.com.br/esamc/html.zip
VAMOS MUDAR TUDO!
EDITE O ARQUIVO PELO BLOCO DE NOTAS
DESCOMPACTE TUDO NA MESMA PASTA
ABRA O HTML NO NAVEGADOR
SALVE O ARQUIVO NO BLOCO DE NOTAS
QUER VER COMO ESTÁ INDO AS ALTERAÇÕES?
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.
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
INTERPRETANDO O CÓDIGO
INFORMAÇÕES INICIAIS DO CÓDIGO, NÃO VAMOS MEXER
EM NADA.
<title>Extra</title></head>
INTERPRETANDO O CÓDIGO
TITLE = TÍTULOLOGO, VAMOS TROCAR EXTRA PELA PALAVRA
DA SUA ESCOLHA.
<body style="margin: 0px; padding: 0px;“>
INTERPRETANDO O CÓDIGO
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“>
INTERPRETANDO O CÓDIGO
INFORMAÇÕES DE FONTE, DISTÂNCIA E
ALINHAMENTO. NÃO VAMOS MEXER AQUI.
<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>
INTERPRETANDO O CÓDIGO
CASO O SERVIDOR DE E-MAIL BLOQUEIE A EXIBIÇÃO DA MENSAGEM, A CRIAÇÃO
DESTE LINK RESOLVE O PROBLEMA.
<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>
INTERPRETANDO O CÓDIGO
O <P> É DE PARÁGRAFO, POR ISSO INCLUI TUDO
ONDE TEM TEXTO.
<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>
INTERPRETANDO O CÓDIGO
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.
<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>
INTERPRETANDO O CÓDIGO
COMO ESTAMOS TRABALHANDO DIRETO DO COMPUTADOR,
VAMOS TROCAR O LINK. ALTERE O CONTEÚDO ENTRE “” PARA
OUTRO SITE QUALQUER.
VAMOS SUBSTITUIR A IMAGEM DO
CACHORRINHO DO EXTRA?
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.extra.com.br"><img
src="http://renatomelomkt.com.br/esamc/web-aula2/extra.jpg" border="0"></a>
</div></body></html>
INTERPRETANDO O CÓDIGO
ESTE LINK SIGNIFICA QUE, AO CLICAR NA IMAGEM DO
CACHORRINHO, VOCÊ VAI PARA O SITE DO EXTRA. ALTERE O LINK
PARA UM SITE QUALQUER.
<a href="http://www.extra.com.br"><img src="http://renatomelomkt.com.br/esamc/web-aula2/extra.jpg" border="0"></a>
</div></body></html>
INTERPRETANDO O CÓDIGO
ESTE É O ENDEREÇO DE ONDE A IMAGEM ESTÁ HOSPEDADA.
COMO ESTAMOS TRABALHANDO NO COMPUTADOR, COLOQUE O NOME DO SEU ARQUIVO ASSIM
“ARQUIVO.JPG”
FACEBOOK.COM/RENATOMELOMKT