Este documento explica qué son las plantillas web, las ventajas y desventajas de usarlas, y cómo comenzar a editar una plantilla. Las plantillas son diseños prediseñados que se pueden personalizar fácilmente y a bajo costo, pero tienen limitaciones en su personalización y rendimiento. El documento guía al lector sobre cómo insertar texto, imágenes e hipervínculos en una plantilla para crear una página web.

1. Ambientacion de
Pagina Web
▪PLANTILLAS ( WEB
▪ Mtro. Ernesto Silva Mendoza
1

2. ▪ Una plantilla (template o
theme, en inglés) es una
página web prediseñada a la
cual se puede modificar el
texto, las fotos, los colores, el
logotipo y la información de
contacto
▪ Son diseños realizados por
empresas o
diseñadores/programadores,
que se venden en masa a
precios bajos (incluso existen
gratuitas) y son populares
porque generalmente son
sencillas de usar
2
¿Qué es una plantilla Web?

3. Ventajas de usar una
plantilla
3
Fácil manipulación y edición
• La mayoría de ellas son diseñadas de manera amigable, de
modo que tareas comunes como cambiar el texto, agregar
fotos, videos y redes sociales o cambiar los colores de la
página web es tan sencillo
Bajo costo
• Hay plantillas básicas que pueden estar alrededor de unos
60 USD hasta unos 150 USD, todo esto depende de las
funciones, la cantidad de diseños visuales que posee y las
características
Corto tiempo de implementación
• Una página web puede estar listo en poco tiempo, esto se
debe a que toda la página ya está armada y solamente se
necesita ingresar información

4. Desventajas de las
plantillas
4
Limitación de su personalización
• Es sumamente difícil cambiar la posición de algunos elementos de
diseño web, por ello no son flexibles y son difíciles de modificar
No están optimizados y por ello afecta su rapidez de carga
• Al no tener un código limpio y bien trabajado, afecta el rendimiento
para la carga de la página web y del posicionamiento SEO.
Muchas veces no cumplen su cometido
• El ser un Producto fabricado masivamente y enlatado, no ofrece
respuestas concretas, enfocadas y específicas
Lo barato sale caro
• Existe otro costo escondido: el ranking en buscadores. Si la plantilla
no está optimizada para SEO, es muy lenta o insegura: Google
penalizará el ranking de la página web.

5. ▪Gratuitas
• Html5up
• FreewebsiteTemplete
• WebGenio
▪Comerciales
• Template Monster
• Theme Forest
• Webflow
• Creativemarket
5
Plataforma para adquirir una plantilla

6. Requisitos para crear tu
primera página web
Contar con una
planificación o
wireframe de la
estructura de la
pagina
Programa de
edición web
instalado en el
equipo similar
a Dreamweaver
Tener la plantilla
para llevar a cabo
la implementación
6

7. Archivos que contienen las
plantillas
index.html images
Los
archivos style.css o d
efault.css (css)
fonts
Media js
7

8. Comenzar a editar la plantilla: Abre el archivo index.html con al programa con el
que vas a editarlo.
8
El área del HEAD

9. Comenzar a editar la plantilla: Abre el archivo index.html con al programa con el
que vas a editarlo.
9
El área del BODY

10. ▪Comenzar a editar la plantilla:
Insertar el texto en la plantilla
• Todas las áreas de texto en las
plantillas, para diferenciarlas
fácilmente aparecen en el
idioma latín, te darás de cuenta
rápidamente. Sustituye cada
una por el texto que tienes
preparado de antemano.
• Las platillas están en inglés,
por lo que también tendrás
que sustituir los nombres
predeterminados de los
vínculos como Home (Inicio),
Contact (Contacto), etc.
10

11. ▪Comenzar a editar la plantilla:
Editar y crear los vínculos en la
plantilla
• Los vínculos en todas las páginas web
tienen el siguiente formato:
<a href="#">Texto del vínculo</a>
• El caracter: # = Sustitúyelo por la dirección
URL de la página donde será enviado el
usuario al dar un clic en el vínculo, hay dos
opciones:
• El vínculo conduce a otra página en la
misma carpeta o directorio del sitio.
En ese caso solo es necesario reflejar el
nombre de archivo de la página, por
ejemplo:
<a href="otrapagina.html">Texto del
vínculo</a>
• El nombre de la página no puede contener
espacios y tiene que incluir la extensión de
archivo .html. 11

12. ▪ Comenzar a editar la plantilla:
Insertar Imágenes a la pagina
▪ Para mostrar las imágenes es
necesario insertar en el lugar donde se
desean que aparezca la siguiente
etiqueta:
<img
src="images/nombreimagen.jpg"
width="940" height="255"
alt="Descripcion de la imagen"
/>
▪ Sustituye en cada caso los siguientes
valores:
src="images/nombreimagen.jpg"
▪ Es la ruta a la ubicación de la imagen.
• width="940" Ancho de la imagen en
pixeles.
• height="255" Altura de la imagen en
pixels.
• alt="Descripcion de la imagen"
▪ Las medidas de la imagen puedes
conocerla fácilmente ya que aparecen
en la ficha Propiedades al dar un clic
derecho con el ratón en cada una. 12

13. Bibliografía
▪ Yi Min Shum . (2019). ¿Qué es una plantilla web o template?. 24/05/2021, de Yi Min Shum Xie Sitio
web: https://yiminshum.com/plantilla-web-template/
▪ Desarrollo Web. (2018). CONVENIENTE ES USAR PLANTILLAS. 24/05/2021, de Tactic Center Sitio
web: https://tactic-center.com/desarrollo-web/plantillas-en-nuestra-pagina-web/
13