Começando HTML

COMEÇANDO O HTML
WEBDESIGN 2022 – RENATO MELO

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

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

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>

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.

VAMOS VER
COMO FUNCIONA
UM E-MAIL
MARKETING
DAS
AMERICANAS
EM HTML:

ARQUIVO DISPONÍVEL NO
BLACKBOARD:
exercíciohtml2.zip

LOCALIZE O ZIP NO
SEU COMPUTADOR
1

2
CLIQUE EM
EXTRAIR E
MANTENHA A
MARCAÇÃO
ABAIXO NOS “..”

3
CLIQUE PRIMEIRO
EM “ÁREA DE
TRABALHO” AO
LADO.
DEPOIS,
COMPLEMENTE COM
O NOME DE UMA
PASTA: AULA 1

5
CLIQUE NO INDEX COM
BOTÃO DIREITO E “ABRIR
COM BLOCO DE NOTAS”

6
OU ABRA O BLOCO DE
NOTAS, CLIQUE EM TODOS
OS ARQUIVOS E SELECIONE
O INDEX.HTML

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

<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>Americanas</title>
</head>
INTERPRETANDO O
CÓDIGO
TITLE = TÍTULO
LOGO, VAMOS TROCAR AMERICANAS
PELA PALAVRA NETSHOES

<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://www.americanas.com.br">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.

mensagem
este link</a></p>
INTERPRETANDO O
CÓDIGO
O <P> É DE PARÁGRAFO, POR
ISSO INCLUI TUDO ONDE TEM
TEXTO.

mensagem
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.

mensagem
este link</a></p>
INTERPRETANDO O
CÓDIGO
TROQUE O LINK DAS AMERICANAS
PELO LINK DA NETSHOES

INTERPRETANDO O
CÓDIGO
O LINK FICA NO TEXTO “ACESSE
ESTE LINK” E, ASSIM QUE VOCÊ
PASSA O MOUSE, ELE APARECE
LOGO ABAIXO

DEPOIS DE TERMINAR SUA
ARTE, VOCÊ DEVE FATIAR
UMA IMAGEM NO
PHOTOSHOP

CLIQUE NA RÉGUA E
PUXE UMA LINHA
GUIA PARA SEPARAR
CADA PARTE. (SÃO 5
NO TOTAL)

1 – USE A FERRAMENTA
DE CORTE;
2 – SALVE COMO
“NETSHOES1.JPG”
3 – DÊ CTRL+Z PARA
VOLTAR

INTERPRETANDO O
CÓDIGO
TROQUE O ENDEREÇO DA IMAGEM
PARA O NOME ESCOLHIDO, ASSIM:
“NETSHOES1.JPG”
<a href="http://www.americanas.com.br"><img
src="imagem.jpg" border="0"></a></div>

<a href="http://www.americanas.com.br"><img
src=“netshoes1.jpg" border="0"></a></div>
INTERPRETANDO O
CÓDIGO
ESTE LINK SIGNIFICA QUE, AO CLICAR
NA IMAGEM, VOCÊ VAI PARA O SITE
DA AMERICANAS. ALTERE O LINK
PARA O SITE DA NETSHOES

</body>
</html>
INTERPRETANDO O
CÓDIGO
AI FECHAMOS O CÓDIGO
FINALIZANDO O BODY E O HTML.

<a href="http://www.netshoes.com.br"><img
src=“netshoes1.jpg" border="0"></a><a
href="http://www.netshoes.com.br"><img
src=“netshoes1.jpg" border="0"></a></div>
</body>
</html>
INTERPRETANDO O CÓDIGO
VAMOS COLOCAR UMA IMAGEM ATRÁS DA OUTRA, DE “A” ATÉ “A” –
LEMBRE DE TROCAR O LINK E O NOME DA IMAGEM TAMBÉM

INCLUA O <BR/> APÓS O
</A>. ELE SERÁ
RESPONSÁVEL POR
DAR ENTER!! INSIRA
ELE ENTRE AS IMAGENS
DICAS
LEMBRETE:
NÃO DÊ ESPAÇO DO </a>
PARA O <br/>

Começando HTML

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Começando HTML

Similar to Começando HTML (20)

More from Renato Melo

More from Renato Melo (20)

Recently uploaded

Recently uploaded (8)

Começando HTML