HTML E WEB - COMO FUNCIONA E TUTORIAL

60 %
40 %
Information about HTML E WEB - COMO FUNCIONA E TUTORIAL
Design

Published on February 4, 2014

Author: RenatoMelo1

Source: slideshare.net

Description

Aula de introdução ao html e web, traz uma aula prática de e-mail marketing. Nela, você irá produzir passo a passo o seu próprio código para enviar por e-mail. Este código é o mesmo utilizado por grandes empresas na hora de enviar seu e-mail.

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

Profissões da WEB Webmaster: responsável pela programação, instalação, e manutenção de um site. Webdesigner: responsavél pela criação da interface gráfica de um website. Webwriter: não é apenas um redator para web, mas se responsabiliza por toda distribuição de conteúdo informativo em ambientes digitais

Profissões da WEB Analista de mídias sociais: gerencia as discussões e zela pelo cumprimento das regras de comunidades on-line. Editor de conteúdo: administrar os tipos de conteúdo que recheiam as páginas. Monitoramento: Acompanha o que se passa na rede, antevê novas ações para o mercado e monitora sites de busca. Pesquisam a fundo o conteúdo que vai ser disponibilizado ao consumidor. Utiliza Google Analytics e Google Insights

Profissões da WEB Analista de SEO/SEM: SEO trabalha com a melhora de sites para que ele alcance uma excelente colocação nos motores de busca e SEM trabalha nas estratégias de buscas pagas. #entre_muitas_outras

#estagiário #bolsa auxílio #650 reais

#SEO #estagiário #links #bolsa auxílio patrocinados #650 reais #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.renatomelomkt. com.br/esamc/html.zip

VAMOS MUDAR TUDO!

DESCOMPACTE TUDO NA MESMA PASTA ABRA O HTML NO NAVEGADOR EDITE O ARQUIVO PELO BLOCO DE NOTAS

QUER VER COMO ESTÁ INDO AS ALTERAÇÕES? SALVE O ARQUIVO NO BLOCO DE NOTAS 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 E </COMANDO> FECHA UM COMANDO.

INTERPRETANDO O CÓDIGO <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> INFORMAÇÕES INICIAIS DO CÓDIGO, NÃO VAMOS MEXER EM NADA.

INTERPRETANDO O CÓDIGO <title>Extra</title> </head> TITLE = TÍTULO LOGO, VAMOS TROCAR EXTRA PELA PALAVRA DA SUA ESCOLHA.

INTERPRETANDO O CÓDIGO <body style="margin: 0px; padding: 0px;“> INFORMAÇÕES DE MARGEM E DISTÂNCIA. NÃO VAMOS MEXER AQUI.

INTERPRETANDO O CÓDIGO <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.

INTERPRETANDO O CÓDIGO <p>Caso não esteja conseguindo visualizar esta mensagem <a href="http://renatomelomkt.com.br/esamc/webaula2/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.

INTERPRETANDO O CÓDIGO <p>Caso não esteja conseguindo visualizar esta mensagem <a href="http://renatomelomkt.com.br/esamc/webaula2/extra.html">acesse este link</a> </p> O <P> É DE PARÁGRAFO, POR ISSO INCLUI TUDO ONDE TEM TEXTO.

INTERPRETANDO O CÓDIGO <p>Caso não esteja conseguindo visualizar esta mensagem <a href="http://renatomelomkt.com.br/esamc/webaula2/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.

INTERPRETANDO O CÓDIGO <p>Caso não esteja conseguindo visualizar esta mensagem <a href="http://renatomelomkt.com.br/esamc/webaula2/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

INTERPRETANDO O CÓDIGO <a href="http://www.extra.com.br"><img src="http://renatomelomkt.com.br/esamc/webaula2/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.

INTERPRETANDO O CÓDIGO <a href="http://www.extra.com.br"><img src="http://renatomelomkt.com.br/esamc/webaula2/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

#bolsa presentations

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014

bk

Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

HTML E WEB - COMO FUNCIONA E TUTORIAL - Design

1. INTRODUÇÃO À WEB E HTML RENATO MELO – 2014 . 2. Internet, como é composta? 1. Tecnologia de rede aberta 2. Hipertexto 3. Interface gráfica
Read more

Como funciona - uv.es

¿Cómo funciona esto ... guardarlo con la extensión .htm o .html, ... (World Wide Web) que es como se ha dado en llamar a este tipo de servicios ...
Read more

Qué es HTML y cómo funciona - YouTube

HTML es el lenguaje con el que está construida Internet entera, ... Qué es HTML y cómo funciona ... descubre en este tutorial, ...
Read more

¿Qué es HTML y como funciona? | WebTursos

Si no sabes absolutamente nada de diseño de paginas web y quieres aprender, estas en el lugar correcto, en este tutorial aprenderás desde cero como ...
Read more

HTML Tutorial - Inhaltsverzeichnisgertutorial - HTML.net

HTML Tutorial - Inhaltsverzeichnis - HTML- und CSS-Tutorials - Erstellen Sie Ihre eigene Webseite. Anmelden | Registrieren ... Web-Standards und Validierung
Read more

Lección 2: ¿Cómo funciona CSS?spatutorial - HTML.net

Lección 2: ¿Cómo funciona CSS? - Tutoriales sobre HTML y CSS ... Digamos que queremos un bonito color rojo como fondo de nuestra página web:
Read more

HTML Tutorial - W3Schools

Examples in Every Chapter. This HTML tutorial contains hundreds of HTML examples. With our online HTML editor, you can edit the HTML, and click on a button ...
Read more

Lição 2: Como funciona CSS?portutorial - HTML.net

Início » Tutorials » CSS » Lição 2: Como funciona ... vermelha para a página web: Usando HTML podemos ... linha de código HTML como mostrado ...
Read more