Cómo personalizar una plantilla HTML

Spanish (Español) translation by Luis Chiabrera (you can also view the original English article)

Así que acabas de comprar una plantilla HTML y ahora tienes que personalizarla antes de ponerla en línea. Pero no tienes experiencia con el código, por lo que no estás seguro de cómo hacerlo. Bueno, quédate tranquilo, porque en este tutorial te mostraremos cómo crear una pagina web en html y cómo editar plantillas HTML.

Vamos a trabajar a partir de la suposición de que nunca antes has visto una línea de HTML, y mucho menos has editado una, por lo que no importa qué tan nuevo seas para trabajar con código, se te mostrará exactamente qué hacer en cada paso del camino.

como crear una pagina web en html — Crea una revista en línea moderna con Canvas, una plantilla HTML adaptable.

Si te preguntas dónde encontrar plantillas de sitios web HTML5 profesionales, desplázate hacia abajo después de este tutorial HTML. Tenemos una selección de las mejores plantillas HTML5. Primero, aprenderás a editar plantillas de ThemeForest y luego verás algunas de las mejores del mercado.

¿Qué es HTML?

Empecemos desde cero. Técnicamente hablando, la respuesta a esta pregunta es "lenguaje de marcado de hipertexto". Sin embargo, a los efectos de personalizar una plantilla, puedes considerar HTML como una serie de etiquetas de apertura y cierre como esta:

1	<h1> </h1>

Las etiquetas se indican con los signos < y >, y la etiqueta de cierre siempre incluye un /. Los pares de etiquetas tienen contenido entre ellos como este:

1	<h1>John Smith, Front End Developer</h1>

A veces, sin embargo, también hay etiquetas independientes, sin pareja de cierre, como esta:

1	<img src="mypic.jpg">

Diferentes etiquetas HTML hacen que aparezcan diferentes tipos de contenido en una página web. El ejemplo anterior de etiquetas <h1></h1> crearía un encabezado grande que diría "John Smith, Front End Developer", y el ejemplo de etiqueta <img> haría que el archivo de imagen "mypic.jpg" apareciera en la página.

Para editar plantillas HTML, todo lo que necesitas saber es qué etiquetas representan las partes de la página que deseas cambiar, cómo encontrarlas en el código y cómo editarlas para que muestren lo que deseas.

Consigue un editor de código

Sí, es completamente posible editar HTML en el Bloc de notas o un programa similar, pero las cosas te irán mucho mejor si usas una aplicación de edición de código adecuada. Una de las razones principales es que obtendrás un resaltado en color de tu código, como verás en breve, lo que hará que sea mucho más fácil de leer y editar.

Recomiendo Sublime Text, el cual puedes descargar aquí: https://www.sublimetext.com/3

Descarga y ve tu plantilla HTML

Descarga la plantilla que compraste; en el caso de este tutorial HTML, usaremos esta plantilla HTML CV limpia para demostrarlo. Nota: la plantilla HTML CV utilizada para este tutorial ya no está disponible en ThemeForest. Pero todo lo que aprendas aquí se puede aplicar a cualquier plantilla HTML.

Si estás buscando cómo crear una página web en HTML de currículum con una plantilla HTML, esta es una excelente opción. Recuerda desplazarte hacia abajo después de este tutorial HTML para encontrar una selección de las mejores plantillas receptivas HTML5 de ThemeForest.

La mayoría de las plantillas HTML vendrán en un archivo ZIP; si es así, continúa y extrae la tuya ahora. Luego busca dentro de las carpetas de la plantilla hasta que encuentres el archivo "index.html" o "index.htm".

En nuestra plantilla HTML CV de ejemplo, el archivo "index.html" se encuentra en el directorio "01.html-website".

Ahora, abre ese archivo en Chrome. Incluso si Chrome no es tu navegador predeterminado o preferido, utilízalo de todos modos, porque vamos a trabajar con algunas herramientas que tiene integradas para ayudarte con el proceso de edición.

Identifica las partes que quieres cambiar

Si es la primera vez que aprendes a editar HTML en las plantillas de ThemeForest, trata de no dejarte llevar por la idea de modificar los colores y el diseño todavía. Para hacerlo, debes profundizar en CSS, el lenguaje responsable del estilo de la página. Es una buena idea concentrarse en una cosa a la vez cuando eres nuevo en la personalización de plantillas, y HTML es el mejor lugar para comenzar.

Para empezar, echa un vistazo a tu plantilla en Chrome y averigua qué elementos escritos e imágenes de la página necesitas cambiar. Si lo deseas, puedes preparar una lista para que puedas revisar y marcar cada elemento a medida que realizas tus ediciones.

En el caso de nuestra plantilla HTML CV queremos cambiar:

Nombre
Profesión
Foto Personal
Enlaces de redes sociales
Información de contacto
Secciones del CV: “Perfil profesional”, “Experiencia laboral”, “Habilidades técnicas” y “Educación”
Mensaje de copyright

Ahora que tenemos una lista de elementos para cambiar, podemos comenzar a ubicar tus etiquetas HTML correspondientes en el código. Comencemos con el nombre.

Encuentra la etiqueta en el inspector

Haz clic con el botón derecho en el nombre, que dice "John Smith" de forma predeterminada, y selecciona Inspeccionar:

Un panel como este debería abrirse en tu navegador:

Este panel te brinda una forma interactiva de ver el código. Pasa el mouse sobre la línea que muestra <h1>...</h1> (etiquetas de nivel de encabezado 1) y deberías ver la sección de nombre de la plantilla resaltada como se ve en la captura de pantalla anterior.

Al pasar el mouse sobre diferentes líneas de código y ver qué áreas de la página se iluminan, este panel te ayuda a determinar qué código corresponde a qué elemento. Simplemente sigue pasando el cursor sobre diferentes líneas de código hasta que se ilumine la parte que estás buscando.

Ahora expande las etiquetas h1 haciendo clic en el pequeño triángulo a tu izquierda y deberías ver el contenido entre ellas, es decir, John Smith <small>Front End Developer</small>.

Esta redacción coincide con lo que ves en la pantalla, por lo que sabes que has encontrado la parte correcta del código.

Edita la etiqueta en HTML

Ahora es el momento de abrir tu archivo HTML para editarlo. Abre el archivo "index.html" en Sublime Text y deberías ver algo como esto:

Deseas encontrar el código aquí que coincida con lo que viste en el inspector de Chrome. Desplázate hasta encontrarlo en las líneas 61 - 64.

Ahora puedes editar el contenido entre las etiquetas para cambiar el nombre y la profesión por los tuyos. Primero, cambia "John Smith" a tu propio nombre:

Luego, entre las etiquetas <small></small>, cambia "Front End Developer" a tu propia profesión.

Guarda tu archivo y luego actualiza la plantilla en Chrome. Deberías ver tus cambios aparecer así:

Repite para editar otro contenido

Ahora tienes el proceso básico abajo:

Inspecciona el contenido que deseas cambiar
Identifica las etiquetas correspondientes
Ubica esas etiquetas en tu archivo HTML
Edita el código a gusto

Repitamos el proceso para editar el resto del contenido que queremos personalizar.

Agrega tu propia imagen

A continuación, agregaremos nuestra propia imagen a la izquierda del área de nombre y profesión. Haz clic derecho en la imagen e inspecciónala, y observa la etiqueta correspondiente:

1	<img src="_content/140x140.png" alt="">

Puedes ver en la ventana del inspector que esta línea está directamente encima de las líneas que acabamos de cambiar:

Ve a tu archivo HTML y localiza la etiqueta en la línea 59:

Para esta etiqueta, deberás cambiar el valor del atributo src que ves dentro de la etiqueta img. Para ello, edita lo que hay entre sus comillas. Lo cambiarás al nombre de archivo y la ubicación de tu propia imagen.

Toma una imagen tuya que tenga un tamaño de 150 px por 150 px (ignora que el nombre del archivo dice 140x140.png, el tamaño es en realidad 150x150).

Coloca tu imagen en la subcarpeta "_content"; está en la misma carpeta que tu archivo "index.html".

Ahora, en tu archivo HTML, cambia el valor del atributo src, reemplazando "140x140.png" con el archivo que acabas de agregar a la subcarpeta "_content". Asegúrate de comprobar que la extensión del archivo que escribes es la misma que la de tu archivo, p.e. "png" / "jpg":

Guarda tu archivo, actualiza Chrome y deberías ver aparecer tu nueva imagen:

Editar enlaces de redes sociales

Ahora editemos los enlaces en los íconos de redes sociales en la esquina superior derecha de la plantilla. Al igual que antes, haz clic derecho en uno de los iconos e inspecciónalo. En la ventana, mira la línea sobre la que está resaltada y verás que incluye el texto "icono de Facebook". Vamos a usar esto para encontrar el código en nuestro archivo HTML.

De vuelta en Sublime Text, presiona CTRL + F y ejecuta una búsqueda de "icono de Facebook". Deberías encontrarlo en la línea 75.

La etiqueta a en la línea 75 es lo que crea el enlace en el ícono, y el atributo href que ves dentro determina dónde irá ese enlace. Deberás cambiar el valor de ese atributo href a tu URL de Facebook (por ejemplo: https://www.facebook.com/mylink).

Reemplaza el # que está ahí por defecto con tu URL. Luego haz lo mismo para Twitter en la línea 79, Google+ en la línea 83 y LinkedIn en la línea 87.

Si hay un ícono que deseas eliminar por completo, resalta su enlace comenzando en la etiqueta de apertura <a> y terminando en la etiqueta de cierre </a>, luego elimina ese código.

Ahora guarda y actualiza tu sitio, luego cuando hagas clic en los enlaces, deberían ir a la ubicación correcta.

Edita la información de contacto

A continuación, cambiemos la información de contacto justo debajo de los íconos sociales.

Comienza inspeccionando la palabra "Email" para que podamos encontrar dónde comienza esta sección de información de contacto en el código. Toma nota de la línea de código que has resaltado y la línea debajo de ella para que puedas hacerla coincidir en tu archivo HTML.

En Sublime Text, presiona CTRL + F nuevamente y esta vez busca "Email". Debes ubicar la instancia de la palabra "Email", que está rodeada por un código que coincide con lo que viste en la ventana del inspector.

Lo encontrarás en la línea 94. Resalte la dirección de correo electrónico predeterminada "john@sitename.com" en las dos ubicaciones en esa línea:

Luego reemplázalo con tu propia dirección de correo electrónico. En la siguiente línea, también puedes reemplazar el número de teléfono con el tuyo propio, y en la línea de abajo puedes reemplazar la dirección web con la tuya:

Edita las secciones de CV

Ahora avancemos y comencemos a editar las principales secciones de CV de la plantilla. Hay algunas partes en estas secciones, por lo que comenzaremos inspeccionando cada una de ellas para que sepas qué buscar en tu código. Esta también será una oportunidad para que aprendas un poco más sobre cómo moverte por la ventana del inspector para encontrar diferentes partes de tu sitio..

Desplázate hacia abajo hasta la sección "Professional Profile", haz clic derecho en el párrafo de texto e inspecciónalo.

En el inspector, verás que has resaltado una etiqueta p: esta etiqueta es responsable de crear párrafos en tu texto.

A continuación, queremos saber cómo se ve en el código una sección completa de texto en una sección de CV, no solo párrafos individuales. En la ventana del inspector, haz clic en la línea de código sobre el párrafo que acabas de inspeccionar y deberías ver todo el texto iluminado:

Esto te indica que cada sección de código está envuelta en las etiquetas <div class="cv-item">...</div>. Un div es la abreviatura de una división, y estas etiquetas se utilizan para controlar el diseño y el estilo..

Ahora inspecciona el título de la sección de CV, "Professional Profile":

Al principio, todo lo que verás es otro conjunto de etiquetas div. Esto se debe a que el encabezado real está anidado entre estas etiquetas..

Presiona ese pequeño triángulo al final de la línea para expandirlo y ver su contenido, luego haz lo mismo nuevamente en la siguiente línea hasta que veas el texto "Professional Profile" que estás buscando. Lo encontrarás envuelto en etiquetas <h2>...</h2>, que crean un encabezado de nivel 2:

Ahora que sabemos cómo se ve el código para cada parte de esta sección de CV, podemos volver a Sublime Text y comenzar a editarlo.

Coloca el cursor justo en la parte superior de tu documento HTML para que puedas comenzar a buscar desde la parte superior. Presiona CTRL + F y busca "cv-item". Sigue buscando hasta que encuentres la instancia del código <div class="cv-item"> que está justo después del código <h2>Professional Profile</h2> que acabas de identificar.

Ahora puedes reemplazar el texto de la sección Professional Profile por el tuyo propio. Envuelve cada párrafo de tu texto con etiquetas <p>...</p>.

Cuando hayas terminado, asegúrate de que la etiqueta de párrafo de apertura de tu último párrafo de la sección incluya el atributo class con el valor last, así: <p class="last">.....</p>. Esto aplica una clase de estilo de diseño del CSS de la plantilla que garantizará que el espacio debajo de la sección de texto se maneje correctamente.

Si guardas tu documento HTML y actualizas tu sitio, debería ver que todo en las dos secciones superiores se ha personalizado.

Ahora podemos pasar a editar las secciones restantes de elementos de CV de la misma manera que acabamos de hacer con el "Professional Profile".

Inspecciona cada parte de cada sección para familiarizarte con el código que debes buscar para poder editarlas.

Inspecciona el título de trabajo:

Inspecciona el período de trabajo:

Inspecciona una lista de viñetas:

Usa el mismo enfoque que usaste para editar la sección "Professional Profile" para editar el contenido de las secciones restantes del CV. Para editar títulos de trabajo, períodos de trabajo o listas de viñetas, busca el código que coincida con lo que viste en la ventana del inspector, tal como lo has hecho con cada edición hasta ahora.

Usa etiquetas p para crear párrafos, y al igual que con la sección "Professional Profile", si estás terminando una sección con un párrafo, asegúrate de que tu etiqueta <p> incluya class="last", es decir, <p class="last"> ...</p>.

Nota: si deseas agregar nuevas secciones de CV o eliminar las existentes, deberás usar el inspector para encontrar las etiquetas de código que envuelven toda la sección..

En este ejemplo, verás que toda la sección está envuelta con las etiquetas <div class="cv-item">...</div>.

En tu código, ahora puedes encontrar ese bloque completo de código y copiarlo y pegarlo para crear un nuevo elemento, o eliminar todo el lote si deseas deshacerte de él.

Edita el mensaje de copyright

Con las secciones de tu CV editadas, llegamos al último elemento de nuestra lista de cambios; el mensaje de copyright en el pie de página. Una vez más, usaremos el mismo proceso. Haz clic derecho en el mensaje de derechos de autor e inspecciónalo:

Luego busca el código correspondiente en tu HTML y edítalo con el año actual y tu propio nombre:

Ahora ya sabes cómo editar una plantilla HTML

¡Bien hecho! Sabes cómo editar HTML y acabas de personalizar completamente esta plantilla HTML para mostrar tu propio contenido. Espero que ahora te sientas seguro para asumir más personalización de código en el futuro.

La plantilla HTML en la que trabajamos puede ser relativamente simple, pero recuerda que el proceso de edición es siempre el mismo, sin importar cuán complicada pueda parecer una plantilla. Simplemente inspecciona la plantilla e identifica el código de la parte que deseas cambiar, luego busca ese código en tu archivo HTML y edítalo.

Cuando estés editando, si ves una etiqueta HTML que no entiendes, no dejes que eso te detenga. Hay infinitas cantidades de información en línea para ayudarte a aprender lo que hace cada una.

Las 5 mejores plantillas responsivas HTML5 de ThemeForest

Has aprendido a editar una plantilla HTML. Ahora sabes más sobre cómo crear una página web en HTML y cómo editar plantillas de ThemeForest. Si estás listo para obtener plantillas de sitios web HTML5 y no sabes por dónde empezar, consulta ThemeForest.

Este es el mejor mercado para obtener plantillas HTML generales. Las plantillas de sitio web HTML5 que encontrarás allí están diseñadas profesionalmente y ofrecen actualizaciones y soporte de por vida..

Plantillas HTML para página web — Obtén las mejores plantillas de sitios web HTML5 de ThemeForest.

Aquí hay una selección de plantillas responsivas de HTML5. Personalízalas para que se ajusten a todas tus necesidades y así fácilmente crear una pagina web en HTML.

1. Canvas - La plantilla HTML5 multipropósito

Canvas es una de las plantillas HTML generales más vendidas. Con más de 60.000 ventas, este es un favorito de la multitud gracias a sus infinitas posibilidades.

Obtendrás más de 1200 plantillas HTML5. Así es. Puedes construir cualquier cosa que desees con sus más de 100 demostraciones de una página o múltiples páginas. Canvas es una plantilla responsiva HTML5 completa y rápida. Tienes que ver su vista previa en vivo aquí.

La mejor plantilla que he comprado. -Usuario flyersjoe

2. Porto - Plantilla responsiva HTML5

Porto es otra plantilla responsiva HTML5 favorita. Esta plantilla HTML general ofrece muchas opciones de personalización.

La última actualización de Porto incluye más de 75 demostraciones y más de 600 archivos HTML. Esta plantilla básica de HTML5 es muy fácil de personalizar y presenta un rendimiento de alta velocidad. Aprende más detalles geniales en la vista previa en vivo.

Este es un gran tema con el que trabajar, desde la calidad del código, la gama de funciones y la buena documentación, puede ahorrarte tiempo porque es fácil de usar y personalizar, y se ve muy bien. -Usuario jack2008

3. BeTheme - Plantilla HTML multipropósito responsiva

Si tienes que crear varias páginas web en HTML, considera BeTheme. Esta plantilla HTML general viene con más de 600 sitios web preconstruidos, listos para usar.

Esta plantilla de código de página web viene con múltiples cuadrículas de diseño, 20 estilos de encabezado personalizables y más. Visita su vista previa en vivo para ver más funciones interesantes.

4. Polo - Plantilla HTML5 Responsiva Multipropósito

Hay cientos de plantillas de código de página web para elegir en ThemeForest. Y Polo es una opción fantástica.

Esta plantilla básica de HTML5 viene con más de 220 demostraciones de diseño, más de 700 plantillas, elementos reutilizables y es súper liviana y rápida. Si te gustan las plantillas de página web HTML5 con soporte y actualizaciones de por vida, esto es para ti. Conoce más detalles visitando la vista previa en vivo.

5. Litho – Plantilla HTML5 multipropósito

Litho es una de las plantillas de página web HTML5 más nuevas. Esta plantilla HTML general se destaca por su diseño limpio y moderno.

Litho es una plantilla responsiva HTML5 rápida de Bootstrap 4. Viene con más de 200 elementos listos y más de 230 plantillas prefabricadas. Litho es perfecto para cualquier tipo de proyecto de sitio web. Simplemente visita la vista previa en vivo y compruébalo tú mismo.

Descubre más plantillas HTML, tutoriales y recursos

Espero que hayas disfrutado este tutorial sobre cómo crear una pagina web en HTML, cómo editar HTML y la selección de plantillas básicas de HTML5. Para obtener ayuda adicional en el camino, consulta estos excelentes recursos. También puedes consultar los cursos 30 días para aprender HTML y CSS e Introducción a HTML.

Nota editorial: esta publicación ha sido actualizada con contribuciones de María Villanueva. María es redactora del personal de Envato Tuts+.