Advertisement
  1. Web Design
  2. HTML

Como Personalizar una Plantilla HTML

by
Read Time:16 minsLanguages:

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

Así que acaba de comprar una plantilla HTML y ahora tiene que personalizarla antes de que pueda ponerla en línea, sin embargo, no tiene experiencia con código así que no está seguro de como proceder. Bueno, quédese tranquilo, porque en este curso vamos a llevarlo paso a paso a través del proceso completo.

Vamos a trabajar mutuamente bajo la suposición de que usted nunca antes había visto una línea de código en HTML, mucho menos editar una, así que no importa cuán nuevo sea en trabajar con código ya que se le demostrará con exactitud que hacer en cada paso del camino.

Empecemos desde el principio.

¿Qué es HTML?

Técnicamente hablando, la respuesta a esta pregunta es “Lenguaje de marcado de hipertexto”. Sin embargo, para los propósitos de personalizar una plantilla, usted puede considerar HTML como una serie de etiquetas de apertura y cierre como esta:

Las etiquetas están indicadas con los signos < y >, además, la etiqueta de cierre siempre incluye una / . Los pares de etiquetas tienen contenidos entre ellas, así como este:

Algunas veces, sin embargo, hay etiquetas independientes, sin la otra etiqueta de cierre, como esta:

Las diferentes etiquetas HTML hacen aparecer diferentes tipos de contenidos en una página web. El ejemplo anterior de las etiquetas <h1></h1> crearían un título grande con la lectura “John Smith, Front End Developer”, y el ejemplo de la etiqueta <img>, serviría para que un archivo de imagen “mypic.jpg”  aparezca sobre la página.

Para editar una plantilla HTML, todo lo que usted necesita es saber cuales etiquetas representan las partes de la página que usted quiere cambiar, como encontrarlas en el código y como editarlas de modo que muestren lo que usted quiere.

Conviértase en un Editor de Código

Si, es completamente posible editar HTML en un Bloc de Notas o en un programa similar, aunque las cosas pueden volverse mucho más suave para usted si usa una aplicación apropiada para la edición de código. Una de las principales razones es porque conseguirá resaltar en color su código, como los verá en breve, lo cual hará mucho más fácil leer y editar el código.

Yo recomiendo Sublime Text, el cual puede descargar aquí:https://www.sublimetext.com/3

Descargue y Visualice su Plantilla HTML

Descargue la plantilla que ha comprado, para este curso, usaremos está plantilla “Clean CV”, para la demostración.

La mayoría de las plantillas HTML vendrá en un archivo ZIP, si es así, continúe y  descomprima los archivos. Luego reviese dentro de las carpetas de la plantilla hasta que encuentre el archivo “index.html”  o  “index.htm”.

En nuestro ejemplo de la plantilla CV el archivo “index.html” se encuentre en el directorio “01.html-website”.

Ahora, abra ese archivo en Chrome. Incluso si Chrome no es su navegador por defecto o preferido, de cualquier manera, por favor úselo, porque vamos a trabajar con algunas herramientas que tiene incorporado para ayudarnos con el proceso de edición. 

Identifique las Partes que usted quiere cambiar

Si esta es su primera vez que edita una plantilla, entonces trate de no bloquearse con la idea de cambiar los colores ni la composición, todavía. Para hacer eso, tiene que profundizar en CSS, el cual es el lenguaje responsable para aplicar estilos a las páginas. Es una buena idea enfocarse en una cosa a la vez, sobre todo cuando es la primera vez que está personalizando una plantilla, y HTML es el mejor lugar para empezar. 

Para poner manos a la obra, de un vistazo a su plantilla en Chrome y averigüe cuales son los elementos, ya sea,  por escrito o imágenes que están en la página pero que usted quiere cambiar. Si lo prefiere, puede preparar una lista que puede repasar y verificar cada objeto mientras hace su edición.

En el caso de nuestra plantilla CV, queremos cambiar:

  • Nombre
  • Profesión
  • Fotografía personal
  • Enlaces de redes sociales
  • Información de contacto
  • En las secciones CV: “Perfil Profesional”, “Experiencia Laboral”, “Habilidades Técnicas” y “Educación” 
  • Mensaje de derechos de autor

Ahora que tenemos una lista de los artículos que queremos cambiar, podemos emprender la localización de sus etiquetas HTML correspondientes en el código. Empecemos con el nombre.

Encuentre la Etiqueta en el Inspector.

Clic derecho sobre el nombre, que dice por defecto “John Smith”, y seleccione Inspect:

Y un panel como esté debería abrir en su navegador:

El panel “Inspection”.

El panel le ofrece una forma interactiva de ver el código. Desplace su mouse sobre la línea que muestra <h1>…</h1> (etiqueta de título de nivel 1) y debería de ver la sección nombre de la plantilla resaltada como puede ver en la captura de pantalla arriba.

Al desplazar su mouse sobre diferentes líneas de código y viendo cuales áreas de la página se iluminan, éste panel ayuda a averiguar cual código corresponde con cada elemento. Solamente tiene que ir desplazando sobre diferentes líneas de código hasta que la parte que está buscando se ilumine.

Ahora expanda las etiquetas h1 haciendo clic sobre el triángulo pequeño a su izquierda y así debería de ver el contenidos entre ella, ejemplo; John Smith <small>Front End Developer</small>.

Esta terminología coincide con lo que ve en pantalla, así que en ese momento usted sabe que ha encontrado la parte exacta del código.

Editar la Etiqueta en HTML

Es hora de abrir su archivo HTML para editarlo. Abra el archivo “index.html”. en Sublime Text, ahora, debería de ver algo como esto:

Quiere encontrar el código aquí que coincide con lo que miro en el inspector de Chrome. Muévase hasta encontrar las líneas 61 - 64.

Ahora puede editar el contenido entre las etiquetas para cambiar el nombre y profesión. Primero, edite “John Smith”, y cámbielo por su nombre:

Luego, entre las etiquetas <small></small>, cambie la profesión “Front End Developer”, por la suya.

Guarde su archivo y después actualice la plantilla en Chrome. Debería de ver aparecer sus cambios así:

Repita los mismos pasos hasta Editar Otros Contenidos

Ahora que ya tiene claro el proceso básico:

  1. Inspeccionar el contenido que usted quiere cambiar
  2. Identificar las etiquetas correspondientes
  3. Localizar esas etiquetas en su archivo HTML
  4. Editar el código para adaptarlo

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

Añada su Propia Imagen.

Después, añadiremos nuestra propia imagen a la izquierda del área del nombre y la profesión. Clic-derecho en la imagen y luego utilice el inspector, y observe la etiqueta correspondiente:

Puede ver en la ventana del inspector que está línea directamente arriba de las líneas que hemos cambiado:

Diríjase a su archivo HTML y localice la etiqueta en la línea 59:

Para está etiqueta, necesitará cambiar el valor del atributo src que usted ve dentro de la etiqueta img. Esto lo hace a través de la edición de lo que está entre comillas. Lo cambiará por el nombre de archivo y la ubicación de su propia imagen.

Agarre una imagen suya que tenga un tamaño de 150px por 150px (ignore eso que dice el nombre del archivo 140px140.png, ya que el tamaño es, de hecho, 150px150).

Suelte su imagen dentro de la subcarpeta “_content”, que está en la misma carpeta de su archivo “index.html”.

Ahora, en su archivo HTML, cambie el valor del atributo src, reemplazando “140x140.png”, con el archivo que acaba de añadir a la subcarpeta “_content”. Asegúrese de verificar que la extensión del archivo es la misma a la de su archivo, por ejemplo “png / “jpg”.

Guarde su archivo, actualice Chrome, ahora debería ver su nueva imagen:

Edite los enlaces a las redes sociales

Ahora vamos a editar los enlaces de los iconos de las redes sociales que están en la esquina superior derecha de la plantilla. Al igual que antes, clic-derecho sobre uno de los iconos e inspeccionelo. En la ventana, mire la línea de arriba del que está resaltado y verá que éste incluye el texto “facebook-icon”. Vamos a usar éste para encontrar el código en nuestro archivo HTML.

De regreso en Sublime Text, presione CTRL + F y active una búsqueda para “facebook-icon”. Debería encontrarlo en la línea 75.

La etiqueta a en la línea 75 es la que crea el enlace en el icono, y el atributo href que usted ve dentro de la etiqueta, éste determina hacia adónde irá el enlace. Necesitará cambiar el valor de ese atributo href por el de su dirección URL en Facebook (por ejemplo: https://www.facebook.com/mylink).

Reemplace el símbolo # que está aquí por defecto, por su dirección URL. Luego, haga lo mismo para Twitter en la línea 79, Google+ en la línea 83 y LinkedIn en la línea 87.

Si hay algún icono que usted quisiera quitar por completo, entonces resalte su enlace desde la etiqueta de apertura <a> y termine de seleccionar hasta la etiqueta de cierre </a>, y luego, borre el código.

Ahora guarde y actualice el sitio, después revise que cada enlace conduzca a la dirección correcta.

Edite la Información de Contacto

El próximo paso que vamos a cambiar es la información de contacto que está justo debajo de los iconos de las redes sociales.

Comience con la inspección de la palabra “Email”, para que podemos encontrar donde está el inicio de la sección de información de contacto en el código. Tomamos nota de la línea de código que usted ha resaltado, y la línea debajo de eso, para que pueda igualarlo en su archivo HTML.

En Sublime Text, presione CTRL + F,otra vez, y está vez busque la palabra “Email”. Necesita localizar la instancia de la palabra “Email” la cual está rodeada por un código igual al que usted vio en la ventana del inspector.

Lo encontrará en la línea 94. Resalte la dirección de correo por defecto “john@sitename.com” en las dos ubicaciones sobre esa línea:

Y luego reemplacela con su propia dirección de correo. En la siguiente línea puede reemplazar el número de teléfono con el suyo, y en la línea debajo de esa puede reemplazar la dirección web con la suya:

Edite las secciones CV

Ahora vamos a continuar y empezaremos a editar las secciones principales de ésta plantilla. Hay pocas partes de estas secciones, así que vamos a empezar inspeccionando cada una de ellas, así usted sabrá que buscar en el código. Además, está será una oportunidad para que usted aprenda un poco más acerca de cómo puede desplazarse en la ventana del inspector para encontrar diferentes partes de su sitio.

Desplácese hacia abajo hasta la sección “Professional Profile”, clic-derecho en el párrafo de texto e inspeccione ésta sección.

En el inspector verá que está resaltada la etiqueta p, bien, ésta etiqueta es responsable de crear los párrafos en su texto.

Luego, queremos saber como luce una sección completa de texto de la plantilla CV en las líneas de código, no solamente los párrafos individuales. En la ventana del inspector, haga clic en la línea de código arriba del párrafo que acaba de inspeccionar y debería de ver todos los textos iluminados.

Esto le indica a usted que cada sección de código está dentro de la etiqueta <div class="cv-item">…</div>.  Un div es una abreviación para la palabra división, y estás etiquetas son utilizadas para controlar el formato y el estilo.

Ahora, inspeccione la sección título “Professional Profile”:

Al principio, todo lo que verá es otro conjunto de etiquetas div. Esto es porque el encabezado actual está anidado entre estás etiquetas.

Presione ese triángulo pequeño al final de la línea para expandirlo y verá su contenido, luego; haga lo mismo otra vez en la siguiente línea hasta que vea el texto “Professional Profile” que usted estaba buscando. Lo encontrar envuelto en las etiquetas <h2>…</h2>, la cual crea un título de nivel 2:

Ahora que sabemos como luce el código para cada parte de ésta sección, vamos a regresar a Sublime Text y comenzar a editarlo.

Ubique su cursor en la parte de arriba de su documento HTML, para que usted pueda empezar buscando desde arriba. Presione CTRL + F y busque; “cv-item”. Continúe buscando hasta encontrar la instancia del código <div class="cv-item">, esa está justo después del código <h2>Professional Profile</h2> que usted acaba de identificar.

Ahora puede reemplazar el texto para la sección Professional Profile con su propio texto. Envuelva cada párrafo de su texto con las etiquetas <p>…</p>.

Cuando haya terminado, asegúrese que la etiqueta de apertura de su párrafo final de la sección, incluye el atributo class con el valor last, así como éste: <p class="last">…</p>. Esto aplica una clase de estilo de la plantilla CSS que se cerciorará que el espacio debajo de la sección de texto está manejando correctamente.

Si usted guarda su documento HTML y actualiza su sitio, usted verá que todo en las dos secciones de arriba han sido personalizadas.

Ahora podemos seguir editando los objetos que quedan en esta sección en la misma forma que acabamos de hacerlo con “Professional Profile”.

Inspeccione cada parte de cada sección para familiarizarse con el código que debería buscar para editarlo.

Inspeccione el título laboral:

Inspeccione un período laboral:

Inspeccione una lista con viñetas:

Use el mismo método como lo hizo para editar la sección “Professional Profile” para editar el contenido correcto de las secciones que quedan de la plantilla CV. Para editar los títulos de trabajo, los períodos laborales o las listas con viñetas, encuentre el código que coincida con lo que usted vio en la ventana del inspector, tal y como lo hizo con cada sección que ha editado hasta ahora.

Use las etiquetas p para crear párrafos y, al igual que con la sección “Professional Profile”, si una sección termina con un párrafo, entonces asegúrese que su etiqueta <p> incluya; class="last", por ejemplo; <p class="last">…</p>.

Nota: Si desea añadir nuevas secciones, o quitar las que ya existen, entonces necesitará usar el inspector para encontrar el código de las etiquetas que envuelven toda la sección.

En éste ejemplo, usted puede ver que toda la sección está envuelta con las etiquetas <div class="cv-item">…</div>.

En su código, ahora puede encontrar el bloque completo de código y copiarlo y pegarlo o crear un nuevo artículo, o borrarlo por completo si usted quiere quitarlo.

Editar el Mensaje de Derechos de Autor

Con sus secciones CV editadas, solamente nos queda el último objeto de nuestra lista de cambios, el mensaje de derechos de autor en el footer. Una vez más, usaremos el mismo proceso. Clic-derecho sobre el mensaje de derechos de autor para inspeccionarlo:

Luego, encuentre el código que coincida en su documento HTML y editelo con el año actual y su propio nombre.

¡Y listo!

¡Bien hecho! Acaba de terminar de personalizar está plantilla HTML para mostrar su propio contenido. Espero que ahora se sienta seguro de sí mismo para encargarse de la personalización de más código en el futuro.

La plantilla en la que trabajamos podría haber sido relativamente sencilla, pero recuerde que el proceso para editar es siempre el mismo, no importa cuan complicada podría parecer una plantilla. Solamente inspeccione la plantilla e identifique el código para la parte que usted quiere cambiar, después encuentre el código en su archivo HTML y editelo.

Cuando lo esté editando y, si usted ve una etiqueta HTML que no reconoce, no permita que eso lo detenga. Hay una cantidades ilimitadas de información en línea que le ayudan a aprender que es lo que hace cada una de las etiquetas HTML.

Para una ayuda extra en su camino, verifique éstas excelentes guías de aprendizaje:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.