SlideShare uma empresa Scribd logo
INTRODUÇÃO
À WEB E HTML
RENATO MELO – 2014
Internet, como é
composta?
1. Tecnologia de rede aberta
2. Hipertexto
3. Interface gráfica
HTML
Não é grego, nem coisa
de nerd.
É que nem inglês.
Não precisa saber, mas quem
sabe sempre tem um diferencial.
INTERFACE
GRÁFICA
A 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 atraem
O desenvolvimento das interfaces
gráficas permitiu a criação de
programas WYSIWYG
What You See Is What You Get
CONTRATANDO
UM 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
#desenvolviment
o 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-se
Atualize-se
Atualize-se
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.
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>
INTERPRETANDO O CÓDIGO
TITLE = TÍTULO
LOGO, VAMOS TROCAR
EXTRA 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://renatomelomkt.com.br/esamc/web-
aula2/extra.html">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.
<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>
INTERPRETANDO O CÓDIGO
O <P> É DE PARÁGRAFO, POR
ISSO INCLUI TUDO ONDE TEM
TEXTO.
<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>
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.
<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>
INTERPRETANDO O CÓDIGO
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>
INTERPRETANDO O CÓDIGO
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>
INTERPRETANDO O CÓDIGO
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

Mais conteúdo relacionado

PPT
COMO FAZER E-MAIL MARKETING EM HTML
PPT
Css no webdesign
PPT
CSS Básico para Webdesign
PPT
O FIM DO FLASH - VIVA O HTML 5
PPT
CSS: Introdução no Webdesign
COMO FAZER E-MAIL MARKETING EM HTML
Css no webdesign
CSS Básico para Webdesign
O FIM DO FLASH - VIVA O HTML 5
CSS: Introdução no Webdesign

Semelhante a HTML E WEB - COMO FUNCIONA E TUTORIAL (20)

PPT
HTML - Onde estamos e para onde vamos?
PPT
Email mkt e html: Introdução
PDF
Raymundo ferreira desenvolvendo apps com html e java script no windows phon...
PDF
Desenvolvimento Mobile Web e PHP na FIPAR
PDF
Design de APIs RESTful – Seguras, Escaláveis e Interoperáveis, por Kleber Bacili
PDF
Design de APIs RESTful Seguras e Escaláveis
ODP
Minicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
ODP
PHP e o Desenvolvimento Mobile Web
PDF
HTML5 – O que tem de novo?
PPTX
#Moving br workshop
PDF
Dos requisitos ao código: como criar código rastreável em PHP
PDF
Apicon2018.pptx
PDF
Criando software para o futuro com DDD, Arquitetura, Patterns, e Atitude
PDF
Introdução ao Desenvolvimento Mobile Web no LinguAgil
PPT
Um front end entre nós
PDF
Curso Marketing Digital Ana Paula Coelho
PPTX
Visão Geral De Desenvolvimento Web Sre 2012
PDF
Receita do Sucesso no Mercado Front End
PDF
DBA BRASIL 1.0 - O Futuro do DBA em um universo as a Service.
PPTX
Aula 02 introdução ao php
HTML - Onde estamos e para onde vamos?
Email mkt e html: Introdução
Raymundo ferreira desenvolvendo apps com html e java script no windows phon...
Desenvolvimento Mobile Web e PHP na FIPAR
Design de APIs RESTful – Seguras, Escaláveis e Interoperáveis, por Kleber Bacili
Design de APIs RESTful Seguras e Escaláveis
Minicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
PHP e o Desenvolvimento Mobile Web
HTML5 – O que tem de novo?
#Moving br workshop
Dos requisitos ao código: como criar código rastreável em PHP
Apicon2018.pptx
Criando software para o futuro com DDD, Arquitetura, Patterns, e Atitude
Introdução ao Desenvolvimento Mobile Web no LinguAgil
Um front end entre nós
Curso Marketing Digital Ana Paula Coelho
Visão Geral De Desenvolvimento Web Sre 2012
Receita do Sucesso no Mercado Front End
DBA BRASIL 1.0 - O Futuro do DBA em um universo as a Service.
Aula 02 introdução ao php
Anúncio

Mais de Renato Melo (20)

PPTX
Expressa Esamc - Oficina de Reels e TikTOk
PPT
Redação para Gestão de Crise 1 - Técnicas de Redação em RP
PPT
HTML 1 e 2 - Webdesign - 2022
PPT
Redação para E-mail - Jornalismo Multimídia
PPT
Html e E-mail Marketing - Webdesign 2022
PPT
Anúncio para AT Revista - Computação Gráfica 2022
PPT
Marketing por Conteúdo - Projeto Web 2022
PPT
FERRAMENTAS DE STORYTELLING - Técnicas de Redação em RP 2022
PPT
Storytelling no Jornalismo - Jornalismo Multimídia 2022
PPT
HTML - Webdesign - 2022
PPT
Imagens para Redes Sociais - Computação Gráfica 2022
PPT
Social Ads - Projeto Web - 2022
PPT
Vídeo Marketing - Comportamento Digital e Redes Sociais MBA 2022
PPT
Storytelling - Técnicas de Redação em RP 2022
PPT
Jornalismo em Vídeo - Jornalismo Multimídia 2022
PPT
Redes e Plataformas Digitais - Comportamento Digital e Redes Sociais 2022
PPT
Jornalismo nas Plataformas Digitais - Jornalismo Online 2022
PPT
Ambiente Digital - MBA Comportamento Digital e Redes Sociais- 2022
PPT
Escrevendo para o SEO - Técnicas de Redação em RP - 2022
PPT
COPYWRITING PARA JORNALISTAS - JORNALISMO MULTIMIDIA 2022
Expressa Esamc - Oficina de Reels e TikTOk
Redação para Gestão de Crise 1 - Técnicas de Redação em RP
HTML 1 e 2 - Webdesign - 2022
Redação para E-mail - Jornalismo Multimídia
Html e E-mail Marketing - Webdesign 2022
Anúncio para AT Revista - Computação Gráfica 2022
Marketing por Conteúdo - Projeto Web 2022
FERRAMENTAS DE STORYTELLING - Técnicas de Redação em RP 2022
Storytelling no Jornalismo - Jornalismo Multimídia 2022
HTML - Webdesign - 2022
Imagens para Redes Sociais - Computação Gráfica 2022
Social Ads - Projeto Web - 2022
Vídeo Marketing - Comportamento Digital e Redes Sociais MBA 2022
Storytelling - Técnicas de Redação em RP 2022
Jornalismo em Vídeo - Jornalismo Multimídia 2022
Redes e Plataformas Digitais - Comportamento Digital e Redes Sociais 2022
Jornalismo nas Plataformas Digitais - Jornalismo Online 2022
Ambiente Digital - MBA Comportamento Digital e Redes Sociais- 2022
Escrevendo para o SEO - Técnicas de Redação em RP - 2022
COPYWRITING PARA JORNALISTAS - JORNALISMO MULTIMIDIA 2022
Anúncio

Último (12)

PPTX
Teorias Motivacionais: Teoria das necessidades de Abrham Maslow
PPTX
A importância do Dom de profecia.pptx sdsfdgfvgghghgjbhghfgfgdvddf
PPTX
ppt-licao04-jesusrestaurador.pptxxxxxxxxxx
PPTX
tema_8_-_discipulado_novo_tempo.pptxxxxxx
PPTX
tema_7_-_discipulado_novo_tempo.pptxxxxxx
PDF
lesoes cancerizaveis da boca educação e desenvolvimento.pdf
PDF
CERTIFICADO BIOMAS DO BRASIL DIVERSIDADE, SABERES E TECNOLOGIAS SOCIAIS.pdf
PPTX
Viajando pela literatura brasileira.pptx
PPT
inimigos-invisc3adveis.ppttttttttttttttttt
PPTX
Espatula Culinaria do futuro by inteligência artificial
PPTX
volume currículoOOOOOOOOOOOOOOOOOOOO.pptx
PDF
Slide de apresentação - legendas africanas
Teorias Motivacionais: Teoria das necessidades de Abrham Maslow
A importância do Dom de profecia.pptx sdsfdgfvgghghgjbhghfgfgdvddf
ppt-licao04-jesusrestaurador.pptxxxxxxxxxx
tema_8_-_discipulado_novo_tempo.pptxxxxxx
tema_7_-_discipulado_novo_tempo.pptxxxxxx
lesoes cancerizaveis da boca educação e desenvolvimento.pdf
CERTIFICADO BIOMAS DO BRASIL DIVERSIDADE, SABERES E TECNOLOGIAS SOCIAIS.pdf
Viajando pela literatura brasileira.pptx
inimigos-invisc3adveis.ppttttttttttttttttt
Espatula Culinaria do futuro by inteligência artificial
volume currículoOOOOOOOOOOOOOOOOOOOO.pptx
Slide de apresentação - legendas africanas

HTML E WEB - COMO FUNCIONA E TUTORIAL