HTML 1 e 2 - Webdesign - 2022

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

HTML 1 e 2 - Webdesign - 2022

Mais conteúdo relacionado

Mais procurados

Semelhante a HTML 1 e 2 - Webdesign - 2022

Mais de Renato Melo

HTML 1 e 2 - Webdesign - 2022