html básico para marketing online en ecommerce

7/23/2019 HTML Bsico Para Marketing Online en Ecommerce

1/21


2/21

1

ndice

ndice ................................................................................ 1

Introduccin ................................................................... 2

1.Por qu es necesario saber sobre HTML? ............. 3

2. Estructura bsica de un documento de HTML ...... 6

3. Elementos ms comunes usados en e-commerce 9

Texto ................................................................................................................. 10

Imgenes .......................................................................................................... 11

Links .................................................................................................................. 12

Atributos ........................................................................................................... 12

4. Qu es CSS y cmo usarlo junto con HTML? ..... 13

5. Uso de HTML en las plantillas de Tienda Nube ... 17

Sobre Tienda Nube ...................................................... 20


3/21

2

Introduccin

Para los emprendedores que recin empiezan con su proyecto, la cantidad de

tareas que hay que enfrentar puede ser intimidante en un principio. A cuestiones

bsicas como finanzas, administracin y ventas se suman aspectos especficos,

como el marketing online, la identidad visual de la marca y el diseo. Si no te lo

toms con calma, estas exigencias pueden hacer que te sientas sobrepasado y el

futuro del emprendimiento corra peligro. Tranquilo!

De entre todas estas cuestiones, una de las que ms problemas e inquietudessuele despertar es la del uso de lenguajes de programacin para poder

personalizar una tienda online, aunque sea mnimamente. Por eso es que

decidimos crear un e-book con los aspectos bsicos del HTML, que es el

lenguaje estndar para crear sitios web en la actualidad.

El objetivo es darte las herramientas bsicas para que puedas entender de qu se

trata el HTML y lo uses en el armado de tu tienda online. Esto puede ser

especialmente til si todava no conts con suficiente presupuesto como para

contratar a un diseador o en el caso de que te interese el tema y quieras dar tus

primeros pasos.

Preparado para entrar en el fascinante mundo de HTML? Ah vamos!


4/21

3

1. Por qu es necesariosaber sobre HTML?


5/21

4

Uno de los mayores desafos para los dueos de una tienda onlineque no

tienen experiencia en programacin o diseo web es hacer cambios en el sitio

que impliquen cierto grado de complejidad. Afortunadamente, hay muchas

plataformas (como Tienda Nube) que ofrecen una solucin completa de diseo

profesional en la tienda, sin necesidad de contar con conocimientos tcnicos. Asque no hace falta que seas un profesional para crear un sitio desde cero.

An as, es importante conocer los conceptos bsicos sobre HTML que te van a

permitir actuar rpidamente en caso de que quieras hacer alguna modificacin

simple. Pero empecemos desde el principio: qu es HTML?

Las siglas HTML corresponden a HyperText Markup Language, es decir, lenguaje

de marcas de hipertexto. Como dijimos antes, es el lenguaje estndar que se

usa para construir y visualizar la mayora de las pginas web que visits. Uno

de los temas principales que vamos a tratar en este e-book es precisamente el

cdigo usado para definir los contenidos de una pgina web, es decir, el famoso

cdigo HTML. Ten en cuenta que para desarrollar una pgina web vas a necesitar

un buen diseo adems de estos conceptos tcnicos. Pero no te preocupes, en la

Universidad del E-commerce vas a encontrar artculos como este:Cmo lograr un

diseo que potencie tus ventas.

De forma muy resumida, podramos decir que el lenguaje HTML se basa en

referencias: los elementos externos a la pgina (como imgenes o video, entre

otras cosas) no se introducen directamente en la pgina, sino que dentro del

cdigo se hace una referencia a la ubicacin de ese elemento. El objetivo es que la

pgina web solo contenga texto y que el navegador web (como Chrome, Firefox o

Explorer) sea el encargado de unir todos los elementos para visualizar el sitio de

forma completa.

Ahora, supongamos que en tu sitio quers incluir los siguientes elementos:

un ttulo;

un subttulo;

un prrafo de texto normal;

un link;

una imagen;

una lista.
https://www.tiendanube.com/universidad-ecommerce/primeros-pasos-en-ecommerce/consejos-para-lograr-un-diseno-que-potencia-tus-ventashttps://www.tiendanube.com/universidad-ecommerce/primeros-pasos-en-ecommerce/consejos-para-lograr-un-diseno-que-potencia-tus-ventashttps://www.tiendanube.com/universidad-ecommerce/primeros-pasos-en-ecommerce/consejos-para-lograr-un-diseno-que-potencia-tus-ventashttps://www.tiendanube.com/universidad-ecommerce/primeros-pasos-en-ecommerce/consejos-para-lograr-un-diseno-que-potencia-tus-ventashttps://www.tiendanube.com/universidad-ecommerce/primeros-pasos-en-ecommerce/consejos-para-lograr-un-diseno-que-potencia-tus-ventashttps://www.tiendanube.com/universidad-ecommerce/primeros-pasos-en-ecommerce/consejos-para-lograr-un-diseno-que-potencia-tus-ventas


6/21

5

Esos elementos se veran as dentro del cdigo HTML de tu pgina web:

Y as los va a traducir un navegador web para que se vea como una pgina web:

Magia! No, por suerte es mucho ms sencillo que eso. Empecemos a ver cmo se

compone un documento HTML.


7/21

6

2. Estructura bsica de undocumento de HTML


8/21

7

Lo primero que tens que saber es que un sitio web es un conjunto de pginas

que estn unidas entre s. Cada una de esas pginas tiene una estructura bsica,

compuesta por dos partes a las que vamos a llamar cabecera y cuerpo.

Los documentos de HTML son archivos de texto simple, comnmente creados

con el Notepad de Windows (o con cualquier editor de texto, incluyendo a los

avanzados como Word) y conformados por una serie de instrucciones que le

indican al navegador qu tipo de contenido hay adentro de la pgina para que

pueda leerlo correctamente.

Una de las primeras cosas que es importante conocer es lo que se denomina

etiquetas. Como habrs podido apreciar en el ejemplo de ms arriba, cada cosa

que aparece en el cdigo HTML se escribe dentro de estas etiquetas , entre

corchetes angulares (). La idea es que siempre se usa un corchete de apertura y

otro de cierre, sin excepcin.

La estructura elemental de un documento HTML podra verse de esta manera:

El inicio del documento.

El inicio de la cabecera.

El inicio del ttulo del documento.

El fin del ttulo del documento.

El fin de la cabecera.

El inicio del cuerpo del documento.

El fin del cuerpo del documento.

El fin del documento.

Las dos secciones principales son la cabecera(representada por los

elementos ; ) y el cuerpo(que corresponde los elementos

; ). La primera seccin se usa para agregar informacin que no se

muestra directamente a la persona que navega la pgina, como el ttulo de la

pgina. Por otro lado, el cuerpo es donde va el contenido principal de la pgina y

es lo que finalmente ve un usuario a travs de su navegador. Es en esta parte

donde se definen cuestiones como, por ejemplo, el color de fondo, las distintas


9/21

8

variantes del texto (negritas, cursiva, subrayado) y links, tanto internos como

externos.

Como te imaginars, en medio del documento puede haber muchsimoselementos. Pods hacer tu propia comprobacin de este tipo de estructuras:

ubic el mouse sobre cualquier lugar de una pgina web, hac clic con el botn

derecho y, cuando aparezca el cuadro de opciones, eleg Ver informacin de la

pgina. De esa forma, vas a poder ver el cdigo HTML de cualquier sitio y

comparar cmo se visualiza el contenido de cada uno.

Adems, tambin est lo que se llama atributos: se trata de las distintas

propiedades que pueden tener los elementos. Casi que podras pensar en un

atributo como en un adjetivo de ese elemento, ya que define alguna de sus

caractersticas. En el prximo captulo vamos a volver sobre este punto.

Conocer todas las posibles etiquetas es casi imposible y, por otro lado, no tiene

tanto sentido para una gua bsica. Por lo tanto, en el siguiente captulo vamos a

cubrir los elementos bsicos que debera saber un dueo de una tienda online.


10/21

9

3. Elementos ms comunesusados en e-commerce


11/21

10

Como dijimos anteriormente, hay una gran cantidad de elementos que pods usar

en HTML y sera imposible que los listemos a todos ac. Lo que s podemos hacer

es incluir a los ms importantes para el mantenimiento de un sitio de e-commerce.

Texto

Los principales elementos para trabajar sobre los textos de un sitio web son:

Ttulos y subttulos

Se hace referencia a ellos mediante las etiquetas y ; y ; y ; etc. Estn ordenadas por criterio de importancia, as que el primero es el

que tiene ms relevancia y, a medida que aumenta el nmero que acompaa a la

letra h, decrece su tamao y su relevancia.

Prrafos

Cada nuevo prrafo tiene que estar encerrado entre las etiquetas

y
.
Negritas

Para que el texto aparezca en negritas es necesario que uses las etiquetas y

o y .

Cursiva

Tens que usar las etiquetas e .

Salto de lnea

Pods dejar un espacio entre cada prrafo usando las etiquetas
y .


12/21

11

Listas

Hay dos opciones para crear una lista; enumeracin mediante bullets (como en

este listado) o usando nmeros. Para el primer caso, tens que usar la siguiente

estructura:

Texto

Texto

Texto

Cuando quieras crear una lista numerada, el cdigo queda as:

Uno

Dos

Tres

Ten en cuenta que pods usar cuanto texto quieras dentro de cada lista.

Imgenes

Vas a poder incluir imgenes en tu sitio usando la etiqueta .

Dentro de URL (y manteniendo las comillas)tens que incluir la ruta en la que

est alojada esa imagen. Por lo tanto, primero vas a tener que subir la imagen a

algn servicio de hosting(puede ser gratuito o pago).


13/21

12

Links

El texto o la imagen que quieras linkear va a tener que estar encerrada entre las

etiquetas y . Dentro de URL, como en el caso de lasimgenes, tens que ingresar la direccin web a la que quers hacer referencia.

Atributos

En el captulo anterior mencionamos a los atributos y dijimos que definen

caractersticas de los elementos. Es importante que los tengas en cuenta porque te

van a servir para darle formato al contenido de tu tienda online.

Supongamos que quers escribir un texto con relevancia de ttulo principal y que

adems est justificado. El cdigo quedara de esta forma:

Ac va tu ttulo principal

El atributo ALIGN puede incluir otras variabes, como Left,Right y Center,para contemplar las distintas posibilidades en las que puede aparecer el texto.

As como hay una gran cantidad de elementos, tambin hay un nmero

considerable de atributos, por lo que tampoco vamos a mencionarlos en este e-

book. Pero te dejamos un link en el que podsconsultar una exhaustiva lista de

elementos y atributos.
http://www.w3schools.com/tags/http://www.w3schools.com/tags/http://www.w3schools.com/tags/http://www.w3schools.com/tags/http://www.w3schools.com/tags/http://www.w3schools.com/tags/


14/21

13

4. Qu es CSS y cmo usarlojunto con HTML?


15/21

14

Usar nicamente HTML no es suficiente para que tu tienda online sea vea como la

mayora de los sitios profesionales. Para lograr un diseo que sea realmente

atractivo y visualmente agradable es necesario hacer uso de otro lenguaje

llamado CSS, siglas de cascading style sheets, es decir, hojas de estilo en cascada).

El HTML por s solo no podra lograr que un sitio web se vea bien; todo lo que le va

a dar finalmente el formato a ese documento (colores, tipografas, tamaos, etc.)

va a provenir de CSS.

De esta manera, la estructura del sitio (representada por el lenguaje HTML)

queda separada de su presentacin visual (que est definida por CSS). A

continuacin, te contamos 3 formas en las que pods emplear CSS para dar

formato a un documento HTML:

Insertar el lenguaje de estilo de pgina dentro de una etiqueta HTML .Si bien este procedimiento puede funcionar en la prctica, es aconsejable

solo si se aplican unos pocos estilos al documento, ya que cada nuevo

formato que se agrega implica que el documento se har ms extenso y

complejo para entender posteriormente.

Usar una hoja de estilo interna. Se trata de una hoja de estilo

(identificada con la etiqueta ) incrustada en el documento HTML,

dentro del elemento . As, la informacin de la estructura queda

separada de lo que tiene que ver con el estilo.

Usar una hoja de estilo externa. En este caso, la hoja de estilo es un

archivo distinto al del documento HTML. Es el mtodo ms recomendado,ya que el estilo y el cdigo de la estructura del sitio quedan completamente

separados.

Con CSS vas a poder elegir propiedades del texto (como la tipografa y el color), de

la apariencia general del sitio web (como el color de fondo) o de los elementos

visuales del mismo (como el tipo de bordes que tienen las imgenes o los

mrgenes entre distintos objetos).

Supongamos que quers aplicar un color a todos los prrafos de una pgina. En

lugar de agregar ese atributo a cada prrafo (es decir, a cada bloque en el que ves

la etiqueta

), pods hacerlo en un documento separado de CSS. Se vera de

esta forma:

p {

color: blue;

}


16/21

15

Y qu pasa si quers agregar una propiedad a ms de un objeto? Por ejemplo,

que algunos prrafos sean azules y no todos. Lo que tens que hacer en ese caso

es crear un nombre (el que quieras) para ese atributo, que va a figurar en el

documento HTML, y asignarle la propiedad en cuestin en el archivo CSS.

El HTML se vera de esta forma:

Primer prrafo

Segundo prrafo

Tercer prrafo

Mientras que en CSS eso se vera reflejado de esta forma:

.ParraAzul {

color: blue;

}

Ese nombre que creaste se llama class y es necesario que pongas un punto

delante de l para que los navegadores puedan reconocerlo y leerlo

correctamente. En el ejemplo de arriba, el primer y el tercer prrafo son los que

van a verse azules, mientras que el segundo se ver con el color normal, es decir,

el negro.

Por otro lado, tambin est lo que se llama id, que sirve para asignar

propiedades a secciones nicas del documento HTML, como el encabezado o el

cuerpo. Por ejemplo, si quisieras darle una medida especfica al encabezado

(supongamos, 900 x 150 pxeles) en el documento HTML se vera as:


17/21

16

Y la informacin que tens que ingresar en CSS es esta:

#header {

width: 900 px;

height: 150 px;

}

La idea de este e-book no es que te conviertas en un experto en CSS. De hecho, si

uss una plataforma como Tienda Nube es probable que nunca necesites

usar este lenguaje para editar las caractersticas de tu tienda. An as, pods

acceder a esta opcin ingresando al administrador de tu Tienda Nube y eligiendo

Diseo > Personalizar tu diseo > Edicin avanzada de CSS.

Lo que vamos a ver en el ltimo captulo es cmo pods acceder al HTML de las

plantillas de Tienda Nube.


18/21

17

5. Uso de HTML en lasplantillas de Tienda Nube


19/21

18

Antes de que te contemos cmo hacer para modificar el HTML de una plantilla de

Tienda Nube, es importante que sepas algunas cosas.

En primer lugar, no tens que preocuparte por hacer ninguna modificacin en elcdigo para que tu tienda pueda ser vista desde cualquier dispositivo, ya que

todas las plantillas de Tienda Nube estn preparadas para adaptarse al

dispositivo del comprador, se trate de una computadora, una tablet o un celular.

Adems, en el panel de administracin de tu tienda vas a poder acceder a una

gran cantidad de opciones para personalizar el sitiocomo mejor te parezca.

Por lo tanto, vas a poder subir tu logo, elegir colores y tipografas, crear bannersy

mostrar conos de redes sociales y medios de pago, entre otras cosas.

Esto quiere decir que vas a poder disear tu tienda para que respete la identidad

de tu marca sin contar con conocimientos tcnicos (es decir, sin tener que

modificar el cdigo HTML de las plantillas).

An as, tambin est la posibilidad de editar el HTML de las plantillas, ya sea por

tu cuenta o contratando a un diseador web que se encargue de hacerlo. Para

acceder a esta opcin solo tens que entrar al panel de administracin de tu

Tienda Nube y despus ir a Diseo > Elegir diseo. Una vez ah, tens que hacer

clic en la opcin Edicin avanzada (HTML y CSS).

Ah vas a poder acceder a los archivos del diseo de la plantilla mediante el uso de

un cliente FTP, como puede ser FileZilla. En este caso s vas a necesitar algunos

conocimientos un poco ms avanzados, por lo que te recomendamos que

empieces porver este video para editar el estilo de una tienda.Adems tambin

hay otros dos recursos que pueden resultarte muy tiles:

La documentacin para diseadores:ac vas a encontrar todas las guas y

tutoriales necesarios para poder crear tus propias plantillas en Tienda

Nube.

La Universidad del Diseo:con cursos y seminarios online para volverte un

verdadero experto del diseo para e-commerce.
http://ayuda.tiendanube.com/customer/portal/articles/534884-%C2%BFc%C3%B3mo-edito-el-estilo-de-la-tienda-de-un-cliente-http://ayuda.tiendanube.com/customer/portal/articles/534884-%C2%BFc%C3%B3mo-edito-el-estilo-de-la-tienda-de-un-cliente-http://ayuda.tiendanube.com/customer/portal/articles/534884-%C2%BFc%C3%B3mo-edito-el-estilo-de-la-tienda-de-un-cliente-http://docs.tiendanube.com/http://docs.tiendanube.com/https://www.tiendanube.com/universidad-designershttps://www.tiendanube.com/universidad-designershttps://www.tiendanube.com/universidad-designershttp://docs.tiendanube.com/http://ayuda.tiendanube.com/customer/portal/articles/534884-%C2%BFc%C3%B3mo-edito-el-estilo-de-la-tienda-de-un-cliente-


20/21

19

Pero no te apures! Si todava no tens suficientes conocimientos como para

acceder a estas funciones avanzadas, te recomendamos que exprimas al mximo

las posibilidades que te dan las plantillas, que son realmente muchas.


21/21

20

Sobre Tienda NubeTienda Nubees una plataforma de e-commerce orientada a los emprendedores

que estn comenzando a incursionar en el mundo onliney cuenta condistintosplanes de acuerdo al tamao de tu negocio.Luego de haberte registrado y sin

necesidad de conocimientos tcnicos, pods publicar tus productos, elegir el

diseo de tu tienda y hasta hacer un poco de publicidad para aumentar tus ventas

en unos simples pasos.
https://www.tiendanube.com/https://www.tiendanube.com/https://www.tiendanube.com/planes-y-precioshttps://www.tiendanube.com/planes-y-precioshttps://www.tiendanube.com/planes-y-precioshttps://www.tiendanube.com/planes-y-precioshttps://www.tiendanube.com/planes-y-precioshttps://www.tiendanube.com/planes-y-precioshttps://www.tiendanube.com/

html básico para marketing online en ecommerce

Documents