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

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 inquietudes

suele 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!

1. Por qu es necesario
saber sobre HTML?

Uno de los mayores desafos para los dueos de una tienda online que 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. As
que 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.

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.

2. Estructura bsica de un
documento de HTML

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:

<HTML> El inicio del documento.

<HEAD> El inicio de la cabecera.
<TITLE> El inicio del ttulo del documento.
</TITLE> El fin del ttulo del documento.
</HEAD> El fin de la cabecera.
<BODY> El inicio del cuerpo del documento.
</BODY> El fin del cuerpo del documento.
</HTML> El fin del documento.

Las dos secciones principales son la cabecera (representada por los

elementos <HEAD>; </HEAD>) y el cuerpo (que corresponde los elementos
<BODY>; </BODY>). 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
7

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

Como te imaginars, en medio del documento puede haber muchsimos

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

3. Elementos ms comunes
usados en e-commerce

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 <h1> y </h1>; <h2> y </h2>; <h3>
y </h3>; 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 <p> y </p>.

Negritas
Para que el texto aparezca en negritas es necesario que uses las etiquetas <b> y
</b> o <strong> y </strong>.

Cursiva
Tens que usar las etiquetas <i> e </i>.

Salto de lnea
Pods dejar un espacio entre cada prrafo usando las etiquetas <br> y </br>.

10

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:

<ul>
<li>Texto</li>
<li>Texto</li>
<li>Texto</li>
</ul>

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

<ol>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ol>

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 <img src=URL>.
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).

11

Links
El texto o la imagen que quieras linkear va a tener que estar encerrada entre las
etiquetas <a href=URL> y </a>. Dentro de URL, como en el caso de las
imgenes, 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:

<H1 ALIGN=JUSTIFY> Ac va tu ttulo principal </H1>

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 ebook. Pero te dejamos un link en el que pods consultar una exhaustiva lista de
elementos y atributos.

12

4. Qu es CSS y cmo usarlo

junto con HTML?

13

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 <style>) incrustada en el documento HTML,
dentro del elemento <HEAD>. 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 <p>), pods hacerlo en un documento separado de CSS. Se vera de
esta forma:
p{
color: blue;
}
14

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:

<p class = ParraAzul>Primer prrafo</p>

<p>Segundo prrafo</p>
<p class = ParraAzul>Tercer prrafo</p>

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:

15

<div id = header>
</div>

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.

16

5. Uso de HTML en las

plantillas de Tienda Nube

17

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 el

cdigo 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 sitio como mejor te parezca.
Por lo tanto, vas a poder subir tu logo, elegir colores y tipografas, crear banners y
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 por ver este video para editar el estilo de una tienda. Adems tambin
hay otros dos recursos que pueden resultarte muy tiles:

18

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.

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.

19

Sobre Tienda Nube

Tienda Nube es una plataforma de e-commerce orientada a los emprendedores
que estn comenzando a incursionar en el mundo online y cuenta con distintos
planes 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.

20