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

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>

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:
exercicio1html.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
ABRA O BLOCO DE
NOTAS E SELECIONE:
ARQUIVO ABRIR

6
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
UOL 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://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
POR OUTRO SITE

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

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

INTERPRETANDO O
CÓDIGO
TROQUE O ENDEREÇO DA IMAGEM
PARA O NOME ESCOLHIDO, ASSIM:
“ARQUIVO.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="imagem.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 UM SITE QUALQUER.

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

HTML - Webdesign - 2022

Mais conteúdo relacionado

Semelhante a HTML - Webdesign - 2022

Mais de Renato Melo

HTML - Webdesign - 2022