html e web - como funciona e tutorial

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>


TITLE = TÍTULOLOGO, VAMOS TROCAR EXTRA 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="http://renatomelomkt.com.br/esamc/web-aula2/extra.html">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.


href="http://renatomelomkt.com.br/esamc/web-aula2/extra.html">acesse este link</a>

</p>


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

ONDE TEM TEXTO.


href="http://renatomelomkt.com.br/esamc/web-aula2/extra.html">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.


href="http://renatomelomkt.com.br/esamc/web-aula2/extra.html">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 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>


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>


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

html e web - como funciona e tutorial

Design