Começando com o Html

COMEÇANDOCOM O HTML

RENATO MELO – 2017

HTMLNão é grego, nem coisa

de nerd.

É que nem inglês. Não precisa saber, mas quem sabe sempre tem um diferencial.

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 FUNCIONAUM 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>

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.

#NAPRATICA

VAMOS CRIAR UM E-MAIL MARKETING EM HTML:

Arquivo:http://

www.renatomelo.com.br/esamc/uol.zip

VAMOS MUDAR TUDO!

EDITE O ARQUIVO PELO BLOCO DE NOTAS

DESCOMPACTE TUDO NA MESMA PASTAABRA 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.

<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>Uol</title></head>


TITLE = TÍTULOLOGO, 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.

<p>Caso não esteja conseguindo visualizar esta mensagem <a

href="www.esamc.br"> acesse este link</a> </p>


O <P> É DE PARÁGRAFO, POR ISSO INCLUI TUDO

ONDE TEM TEXTO.

<p>Caso não esteja conseguindo visualizar esta mensagem <a href="www.esamc.br">

acesse este 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.

<p>Caso não esteja conseguindo visualizar esta mensagem <a href="www.esamc.br">

acesse este 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?

PASSO A PASSO

1 – PROCURE UMA IMAGEM NO GOOGLE2 – SALVE NA MESMA PASTA DO HTML3 – DEIXE A IMAGEM COM UM NOME FÁCIL E EM MINÚSCULO4 – 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 01E-MAIL MARKETING

Ler: http://bit.ly/aula02webLer: http://bit.ly/aula02webResponder:Responder:1) Qual dos 5 motivos você julga mais 1) Qual dos 5 motivos você julga mais importante na estratégia de e-mail importante na estratégia de e-mail marketing?marketing?2) Qual importância do e-mail marketing 2) Qual importância do e-mail marketing no marketing digital?no marketing digital?Enviar para o e-mail: Enviar para o e-mail: [email protected] até 22.02 às [email protected] até 22.02 às 18h3018h30

FACEBOOK.COM/RENATOMELOMKT

Design

Começando com o Html