Share
Entonces, acaba de comprar una plantilla HTML y ahora tiene que personalizarla antes de poder ponerla en línea, pero no tiene experiencia con el código, por lo que no está seguro de cómo hacerlo. Bueno, descansa tranquilo, porque en este tutorial te mostraremos todo el proceso..
Trabajaremos a partir de la suposición de que nunca antes ha visto una línea de HTML, y mucho menos de editar una, así que no importa qué tan nuevo sea para trabajar con código, se le mostrará exactamente qué hacer en cada paso del camino.
Empecemos por el principio.
Técnicamente hablando, la respuesta a esta pregunta es "Hyper Text Markup Language". Sin embargo, a los efectos de personalizar una plantilla, puede considerar HTML como una serie de etiquetas de apertura y cierre como esta:
Las etiquetas están indicadas con < y > signos, y la etiqueta de cierre siempre incluye una /. Los pares de etiquetas tienen contenido entre ellos como este:
John Smith, desarrollador de Front End
A veces, sin embargo, también hay etiquetas independientes, sin un compañero de cierre, como este:
Las diferentes etiquetas HTML hacen que aparezcan diferentes tipos de contenido en una página web. El ejemplo anterior de las etiquetas crearían un encabezado grande que decía "John Smith, Desarrollador de Front End", y el ejemplo
Para editar una plantilla HTML, todo lo que necesita saber es qué etiquetas representan las partes de la página que desea cambiar, cómo encontrarlas en el código y cómo editarlas para que muestren lo que desea..
Sí, es completamente posible editar HTML en el Bloc de notas o un programa similar, pero las cosas irán mucho mejor si utiliza 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, que puede descargar aquí: https://www.sublimetext.com/3
Descargue la plantilla que ha comprado; en el caso de este tutorial, usaremos esta plantilla "Clean CV" para demostrar.
La mayoría de las plantillas HTML vendrán en un archivo ZIP. Si es así, adelante, extraiga la suya ahora. Luego mire a su alrededor dentro de las carpetas de la plantilla hasta que encuentre el archivo “index.html” o “index.htm”.
En nuestra plantilla de ejemplo de CV, el archivo "index.html" se encuentra en el directorio "01.html-website".
Ahora, abre ese archivo en Chrome. Incluso si Chrome no es su navegador predeterminado o preferido, úselo de todos modos, porque vamos a trabajar con algunas herramientas que tiene integradas para ayudarlo con el proceso de edición..
Si es la primera vez que edita una plantilla, intente no dejarse llevar por la idea de ajustar los colores y el diseño todavía. Para hacerlo, tienes que profundizar en CSS, el lenguaje responsable del estilo de la página. Es una buena idea concentrarse en una cosa a la vez cuando es nuevo en la personalización de plantillas y HTML es el mejor lugar para comenzar.
Para hacer rodar la bola, eche un vistazo a su plantilla en Chrome y descubra qué elementos escritos e imágenes en la página necesita cambiar. Si lo desea, puede preparar una lista para poder revisar y revisar cada elemento a medida que realiza las ediciones..
En el caso de nuestra plantilla de CV queremos cambiar:
Ahora tenemos una lista de elementos que cambiar, podemos establecer la ubicación de sus etiquetas HTML correspondientes en el código. Empecemos con el nombre..
Haga clic derecho en el nombre, que dice "John Smith" de manera predeterminada, y seleccione Inspeccionar:
Un panel como este debería abrirse en tu navegador:
El panel de "inspección"Este panel le ofrece una forma interactiva de ver el código. Pase el mouse sobre la línea que muestra ...
Al pasar el mouse sobre diferentes líneas de código y ver qué áreas de la página se iluminan, este panel le ayuda a averiguar qué código corresponde con qué elemento. Solo sigue moviéndose sobre diferentes líneas de código hasta que se ilumine la parte que estás buscando.
Ahora expande el h1 Haga clic en las etiquetas haciendo clic en el triángulo a su izquierda y debería ver el contenido entre ellas, es decir,. John Smith Desarrollador Front End.
Esta redacción coincide con lo que ve en la pantalla, por lo que sabe que ha encontrado la parte correcta del código.
Ahora es el momento de abrir su archivo HTML para editarlo. Abra el archivo "index.html" en Sublime Text y debería ver algo como esto:
Desea encontrar el código aquí que coincida con lo que vio en el inspector de Chrome. Desplázate hasta que lo encuentres en las líneas 61 - 64..
Ahora puede editar el contenido entre las etiquetas para cambiar el nombre y la profesión a su propio nombre. Primero, edita "John Smith" a tu propio nombre:
Entonces, entre el etiquetas, cambie "Desarrollador Front End" a su propia profesión.
Guarda tu archivo y luego actualiza la plantilla en Chrome. Deberías ver tus cambios aparecer así:
Ahora tienes el proceso básico abajo:
Repitamos el proceso para editar el resto del contenido que queremos personalizar..
A continuación, agregaremos nuestra propia imagen a la izquierda del área de nombre y profesión. Haga clic con el botón derecho en la imagen, examínela y anote la etiqueta correspondiente:
Puede ver en la ventana del inspector esta línea está directamente sobre las líneas que acabamos de cambiar:
Vaya a su archivo HTML y localice la etiqueta en la línea 59:
Para esta etiqueta, deberás cambiar el valor de la src atributo que ves dentro de la img etiqueta. Lo haces editando lo que está entre sus comillas. Lo cambiarás al nombre del archivo y la ubicación de tu propia imagen..
Toma una imagen de ti mismo 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).
Coloque su imagen en la subcarpeta “contenido”; está en la misma carpeta que su archivo "index.html".
Ahora, en su archivo HTML, cambie el valor del src atributo, reemplazando “140x140.png” con el archivo que acaba de agregar a la subcarpeta “_content”. Asegúrese de verificar que la extensión de archivo que escribe es la misma que la de su archivo, por ejemplo. “Png” / “jpg”:
Guarde su archivo, actualice Chrome y verá su nueva imagen:
Ahora vamos a editar los enlaces en los iconos de redes sociales en la esquina superior derecha de la plantilla. Al igual que antes, haz clic derecho en uno de los íconos y examí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, pulse CTRL + F y ejecutar un hallazgo para "icono de facebook". Deberías encontrarlo en la línea 75..
los una etiqueta en la línea 75 es lo que crea el enlace en el icono, y la href El atributo que ves en su interior determina a dónde irá ese enlace. Tendrás que cambiar el valor de ese href atributo a su URL de Facebook (por ejemplo: https://www.facebook.com/mylink).
Reemplace la # Eso está ahí por defecto con su 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 un icono que desea eliminar por completo, resalte su enlace que comienza en la apertura Etiqueta y acabado en el cierre. etiqueta, luego borre ese código.
Ahora guarde y actualice su sitio, luego, al hacer clic en los enlaces, deberían ir a la ubicación correcta.
A continuación vamos a cambiar la información de contacto justo debajo de los iconos sociales.
Comience por inspeccionar la palabra "Correo electrónico" para que podamos encontrar dónde comienza esta sección de información de contacto en el código. Tome nota de la línea de código que ha resaltado y la línea debajo para que pueda encontrarla en su archivo HTML.
En Sublime Text, presione CTRL + F de nuevo y esta vez busca "Email". Debe ubicar la instancia de la palabra "Correo electrónico" que está rodeada por un código que coincide con lo que vio en la ventana del inspector.
Lo encontrará en la línea 94. Resalte la dirección de correo electrónico predeterminada "[email protected]" 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 puede reemplazar el número de teléfono con el suyo, y en la siguiente línea puede reemplazar la dirección web con la suya:
Ahora sigamos adelante y comencemos a editar las principales secciones de CV de la plantilla. Hay algunas partes en estas secciones, así que comenzaremos por inspeccionar cada una de ellas para que sepa qué buscar en su código. Esta también será una oportunidad para que aprenda un poco más sobre cómo moverse a través de la ventana del inspector para encontrar diferentes partes de su sitio..
Desplácese hacia abajo hasta la sección "Perfil profesional", haga clic con el botón derecho en el párrafo del texto e inspecciónelo.
En el inspector verás que ha resaltado un pag etiqueta-esta etiqueta es responsable de crear párrafos en tu texto.
A continuación, queremos saber qué aspecto tiene una sección completa de texto en una sección de CV en el código, no solo en párrafos individuales. En la ventana del inspector, haga clic en la línea de código sobre el párrafo que acaba de inspeccionar y verá que se ilumina todo el texto:
Esto te dice que cada sección de código está envuelta en las etiquetas div es corto para un 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, "Perfil profesional":
Al principio, todo lo que verás es otro conjunto de div etiquetas Esto se debe a que el encabezado real está anidado entre estas etiquetas.
Golpee ese pequeño triángulo en el extremo de la línea para expandirlo y ver su contenido, luego haga lo mismo nuevamente en la siguiente línea hasta que vea el texto del "Perfil profesional" que está buscando. Lo encontrarás envuelto en ...
Ahora que sabemos cómo se ve el código en cada parte de esta sección de CV, podemos volver a Sublime Text y comenzar a editarlo..
Coloque el cursor en la parte superior de su documento HTML para que pueda comenzar a buscar desde la parte superior. prensa CTRL + F y busque "cv-item". Sigue buscando hasta que encuentres la instancia del código. Ahora puede reemplazar el texto de la sección Perfil profesional con el suyo. Envuelve cada párrafo de tu texto con ... Cuando haya terminado, asegúrese de que la etiqueta del párrafo de apertura de su párrafo final de la sección incluya el atributo ... Si guarda su documento HTML y actualiza su sitio, debería ver que todo en las dos secciones superiores se ha personalizado.. Ahora podemos continuar con la edición de las secciones de elementos de CV restantes de la misma manera que lo hicimos con el "Perfil profesional". Inspeccione cada parte de cada sección para familiarizarse con el código que debe buscar para editarlos.. Inspeccionar un título de trabajo: Inspeccionar un período de trabajo: Inspeccionar una lista de viñetas: Utilice el mismo método que usó para editar la sección "Perfil profesional" para editar el contenido de las secciones de CV restantes. Para editar títulos de trabajo, períodos de trabajo o listas con viñetas, busque el código que coincida con lo que vio en la ventana del inspector, como lo ha hecho con cada edición hasta el momento. Utilizar ... Nota: si desea agregar nuevas secciones de CV o eliminar las existentes, deberá utilizar el inspector para encontrar las etiquetas de código que envuelven toda la sección. En este ejemplo ves que toda la sección está envuelta con las etiquetas. En su código, ahora puede encontrar todo el bloque de código y copiarlo y pegarlo para crear un nuevo elemento, o eliminar todo el lote si desea deshacerse de él.. Con las secciones de tu CV editadas, estamos hasta el último elemento de nuestra lista de cambios; El mensaje de copyright en el pie de página. Una vez más estaremos usando el mismo proceso. Haz clic derecho en el mensaje de copyright y examínalo: Luego encuentre el código correspondiente en su HTML y edítelo con el año actual y su propio nombre: ¡Bien hecho! Acaba de personalizar completamente esta plantilla HTML para mostrar su propio contenido. Espero que ahora te sientas confiado para adquirir más personalización de código en el futuro. La plantilla en la que trabajamos puede ser relativamente simple, pero recuerde que el proceso de edición es siempre el mismo, sin importar cuán complicada pueda parecer una plantilla. Simplemente inspeccione la plantilla e identifique el código de la parte que desea cambiar, luego encuentre ese código en su archivo HTML y edítelo. Cuando esté editando, si ve una etiqueta HTML que no comprende, no permita que eso lo detenga. Hay una cantidad infinita de información en línea para ayudarlo a aprender lo que hace cada uno.. Para obtener ayuda adicional en el camino, echa un vistazo a estas excelentes guías de aprendizaje:Perfil profesional
clase con el valor último, Me gusta esto: 
pag etiquetas para crear párrafos, y al igual que con la sección "Perfil profesional", si está terminando una sección con un párrafo, asegúrese de que esté la etiqueta incluye class = "last", es decir. 
Editar mensaje de copyright
Y tu estas listo!
Accentsconagua
